jquery ui-style timepicker

Ik ben een fan van jquery, vooral het concept van "querying the DOM" is erg handig. Ik gebruik jquery ook op die manier, het koppelen van data en events doe ik zelf liever via orginele javascript objecten die dan via jquery met het documentobject communiceren.

Er bleek geen goede timepicker plugin te bestaan voor jquery, daarom heb ik de plugin zelf maar geschreven. De plugin is compatible met jqueryUI. De bedoeling is om de code nog te refactoren om daarbij gebruik te maken van jqueryUI widget.

15-09-2010 : versie 1.2 is online

Meer informatie en demo :

timepicker project page googleCode

Web 2.0 toolkit

Er ontstond behoefte aan een toolkit die mij de benodigde functionaliteit kon bieden buiten jquery. Veel was al voorhanden op het web maar veel is niet volgens OOP maatstaven opgezet. Een aantal heb ik naar OOP omgewerkt en de rest zelf geschreven.

Opzet :

De toolkit bestaat uit verschillende modules, die voor het gemak als extentie aan de jquery library kunnen worden gekoppeld.
  • util.js

    Deze file bevat een aantal functies om de DOM te manipuleren , een aantal functies tbv coderen en decoderen, en een zeerr flexibele object inspector console.
    Bijna alle functies zijn gedocumenteerd, als ik meer tijd heb ;-) zal ik ze ook hier meer uitgebreid beschrijven.

  • request.js

    Deze file bevat een aantal functies om via XHR te communiceren met de server , een aantal functies om forms te manipuleren, en een aantal functies om veilig JSON-objecten uit te wisselen tussen de server en de client.

  • client.js

    Deze file bevat een module tbv crossbrowser clientdetectie.

  • event.js

    Deze file bevat een module tbv crossbrowser eventhandling.

  • md5.js

    Deze file bevat een module om een md5 hash te genereren.
    Ik heb de orginele code naar OOP gerefactored

    * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
    * Digest Algorithm, as defined in RFC 1321.
    * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
    * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
    * Distributed under the BSD License
    * See http://pajhome.org.uk/crypt/md5 for more info.

Webtoolkit project page download toolkit at googleCode

Message Broker

Een message broker is een architecturaal patroon voor validatie van berichten, bericht transformatie en message routing. Een broker bemiddelt de communicatie tussen applicaties, minimaliseert het wederzijdse besef dat de verschillende onderdelen (widgets) binnen een applicatie van elkaar moeten hebben om te kunnen berichten uit te wisselen, en implementeert effectief ontkoppeling. Het doel van een broker is om inkomende berichten te ontvangen en er eventueel actie op uit te voeren,en ze vervolgens door te sturen.

De hier beschreven javascript broker functioneert als een message bus, en werkt volgens het publish -> topic -> subscribe model.
De broker registreert de producers en consumers van de afzonderlijke widgets. De widgets kunnen zich als publisher van een topic en/of subscriber op een topic aanmelden en via hun procucers en consumers berichten versturen en ontvangen/verwerken. Elke producer en consumer heeft een uniek id. Het grote voordeel is dat de architectuur eenvoudig gewijzigd kan worden, de widgets zijn loosely coupled binnen de applicatie waardoor een grote mate van flexibiliteit en uitwisselbaarheid gerealiseerd wordt.

Message Broker

Native PHP Templating

Native templating en de MVP-benadering

Het scheiden van de layout/content layer (Presenter/View) en de buisiness logic (Model) is aan te bevelen. Hiervoor is een template systeem heel geschikt. Ik was op zoek naar een lichtgewicht, snel en overzichtelijk template systeem, en heb gekozen voor het native templating van PHP zelf, omdat dit verreweg superieur is wat betreft snelheid en mogelijkheden.

PHP gebruikt hiervoor een aantal bestandstypen die direct te koppelen zijn aan het Model-View-Presenter paradigma.

  1. PHP-classes waarin de functionaliteit ligt besloten [MODEL]
  2. PHP-code , als communicatie infrastructuur tussen model en view [PRESENTER]
  3. PHP-code, waarin de structuur van de view wordt opgebouwd [VIEW / structuurlayer]
  4. HTML-templates waarin PHP variabelen geparsed worden (content als plain text) [VIEW / contentlayer]
  5. Bestanden met uitsluitend statische html-code (content, metatags, headers etc)[STATIC HTML]


Native PHP Templating

Keyword Extractor

De keywordextractor maakt een csv-bestand aan met keywords, gegenereerd vanuit een willekeurig document. Er is ook een versie als PHP class , waarmee ik bijvoorbeeld bij Boerderijkamers.nl een zoekfunctie heb gebouwd. De keywordextractor maakt dan in het CMS databasevelden aan met keywords uit de door de gebruiker ingevulde content en ingestelde opties.

De zoekzeef staat op zichzelf en communiceert via interfaces met het CMS en de database [backoffice] en de DOM [frontoffice].
Hierbij wordt ook gebruik gemaakt van de statuspersistentiemodule, om de zoekopties te kunnen bookmarken en de status van de zoekzeef te besturen met de forward- en backbuttons van de browser.

Keyword Extractor

XHR intelligent form

De idee is om een form als object te beschouwen dat via een interface met de DOM kan communiceren en met via een tweede interface met de server en de database. Er kunnen nog verschillende andere modules [lees javascriptobjecten] met het form communiceren, dat gaat via custom events, een loosly coupled interface. Op die manier kun je meer functionaliteit en veiligheid implementeren, bijvoorbeeld validatie per veld, controleren of de gebruiker al bekend is in het systeem, data al eerder beschikbaar stellen om een betere gebruikerservaring te bewerkstelligen.

Dit project is ook een goed voorbeeld van de toepassing van de web2.0 toolkit.

xhr intelligent form

XHR form validatie

Dit formulier wordt per veld clientside en serverside gecontroleerd en na submission ook nog in zijn geheel aan de serverkant. Het geheel is modulair opgebouwd voor grotere flexibiliteit. Het is ook mogelijk om verdere functionaliteit aan de serverkant te implementeren bijvoorbeeld checken of iemand al bekend is in een database, formulieren dynamisch opbouwen en uitbreiden enzovoort.

Dit project is ook een goed voorbeeld van de toepassing van de web2.0 toolkit, en de objectinspector

xhr form validatie

safeURI data transfer

Voor een stabiele en veilige produktie codebase is het belangrijk dat het XHR data transport op een veilige manier plaatsvindt en dat eventuele malafide manipulaties en code-injecties niet mogelijk zijn.

Ook moeten eventuele anomalieën in het transport gedetecteerd en gelogd worden.

Om verschillende mogelijkheden te testen heb ik een testsuite opgezet waarin codering en datatransport op verschillende manieren kunnen worden bestudeerd. Gebruikt worden de Web 2.0 toolkit en jquery.

safeURI data transfer

Encoding and Decoding

Tekst en data kunnen op verschillende manieren gecodeerd worden, een klein overzicht is hier te vinden.
De koppeling van de CONTROLLER en de VIEW aan het MODEL van de diverse formulieren gebeurt dynamisch
als het tabSelect-event wordt getriggerd. Gebruikt worden de Web 2.0 toolkit en jquery.

Encoding and Decoding

Encoded GET requests

Statuspersistentie met encoded GET-requests

Vaak moet er in een PHP-applicatie over de pagereload heen de status van de pagina worden gepersisteerd. Dat ligt niet zo eenvoudig als het op het eerste gezicht lijkt.
Vaak zijn er verschillende formelementen of knoppen met een <a href""> tag die via de URI component statusinformatie verzenden.

Voorbeeld:

<a href="?page=save.php&action=opslaan"> Opslaan </a>


Dit is nog eenvoudig, maar wat als er vijf knoppen zijn, drie selectiecriteria, drie dropdowns, en nog twee statusflags die allemaal in de URL meegenomen moeten worden ? Dan krijg je iets als

<a href="?page=save.php&action=opslaan&status=4&orderby=updated&sorteren=DESC&soort=\'.$soort.\' &limit=\'.$limit.\'&delete=\'.$_SESSION[\'delete\'].\'$flag=true&button1=no&button2=weeiuddjj"\'."> Opslaan</a>

enzovoort enzovoort, en dat dus bij elke SELECT-option en elke url.
En wat te doen als er een nieuwe parameter bij moet komen vanwege uitbreiding van functionaliteit ? Alle url\'s aanpassen is tijdrovend met grote kans op fouten.

Een tweede probleem is dat alle informatie in de adresbalk van de browser te zien en aan te passen is door de gebruiker. Het is beter om de url te versleutelen zodat er minder snel iets fout kan gaan, een goed voorbeeld is zoals GOOGLE dat doet.

Ik heb een Util-class geschreven die de GET-requests versleuteld en de parameters opslaat. Op die manier hoef je alleen de parameters die je aanpast door te geven.

Encoded GET-requests

Encrypt Data Transfer

Een module met de implementatie van een RSA-encrypter. Hier wordt gebruik gemaakt van de BigInt suite
en een PEAR RSA decrypter. Een mooi voorbeeld van een chain van callbacks en events gecombineerd met AJAX serverside eventhandling. Gebruikt worden de Web 2.0 toolkit en jquery.

Encrypt Data Transfer

AJAX status persistentie

Deze module laat via een interface met de hash en cookies de status van een DOM-documentobject dat via XHR met de server commmuniceert persisteren zodat de gebruiker de status kan bookmarken en door de statushistory kan navigeren met de forward- en backbuttons.
Voordeel van dit idee is dat er onderscheid kan worden gemaakt tussen parameters in de hash die onmiddelijk de status bijwerken en parameters in de hash die dat niet doen als ze veranderen [handig voor uri-communicatie die niet perse hoeft te worden opgeslagen in het history-object van de browser]

Deze code is een refactoring van de code die ik heb geschreven voor de zoekfuncties op www.boerderijkamers.nl, een real world example. ajax status persistentie

Real CMS

Dit is een idee om aan een willekeurige website een module te koppelen waarmee je een willekeurig aantal layers kunt toevoegen waarvan vormgeving inhoud volledig zelf is te bepalen. Ook is het mogelijk modules te koppelen aan een layer via simpele codes. Te denken valt aan video of audio en kleine applicaties. De userinterface is geïnspireerd door grafische programma's. OOP javascript, AJAX, jqueryUI zijn gebruikte technieken. De module is nog in ontwikkeling, er is nog wat refactoring te doen...

Meer info :

Real CMS Demo

Custom Search Engine

Het doel van de ontwikkeling van deze module was om de functionaliteit van Google's custom search engine-API toe te passen binnen de vormgeving van een willekeurige website.
Deze PHP-module stelt de resultaten van een zoekopdracht, gedaan via een custom search engine [ dus binnen één of meer sites ] ter beschikking aan een zelf vorm te geven raamwerk. ik heb nu gekozen voor een vorm die sterk lijkt op de Google presentatie, maar in principe is elke presentatie mogelijk.

Een voorbeeld :

Custom search engine

Iframe Loader

Deze module maakt het mogelijk om in een pagina een willekeurig aantal iframes te plaatsen en dan te bepalen welke content er in die iframes geladen wordt. Het bijzondere is dat de afmetingen van de ifames wordt bepaald door de geladen inhoud van de iframes. Crossbrowser, zeer geschikt voor het bouwen van een AJAX-userinterface waarbij er verschillende externe [door anderen gebouwde] modules geladen moeten worden. Een beetje zoals Gmail. Voordeel is ook dat de navigatiebuttons van de browser gewoon werken.

Een voorbeeld :

Iframe Loader

PHP Debugger

PHP Debugger heb ik ontwikkeld om in een online omgeving een logger met een afgeschermde testomgeving te kunnen inzetten.
Ten eerste zal een bezoeker van de online website niets merken van de werkzaamheden en ten tweede kunje aleen maar aan de slag als je bent ingelogd en vanaf een toegestaan IP-adres werkt.

Door de uitgebreide loggerfuncties is het niet nodig om PHP

var_dump($bla);
of
echo $bla;
te gebruiken om online te debuggen en te loggen.

Een voorbeeld :

PHP Debugger

Fancybox plus

Fancybox toont allerlei soorten content in een modaal venster, mooi gecentreerd. Voor een gebruikersvriendelijke interface was ik op zoek naar een jquery plugin die iframe en ajax content op verschillende plaatsen op de pagina kon tonen bijvoorbeeld als keuzemenu. Ik heb daarvoor Fancybox aangepast, dat is een goedgeschreven flexibele plugin, heel bruikbaar om op verder te borduren.

Een voorbeeld :

Fancybox Plus

Add Table Row

Add Table Row is een module die vanuit een template een tabel kan clonen en daar één of meerder kopieën in een form kan plaatsen. Aan de tabel kan een rij worden toegevoegd, bijvoorbeeld voor dynamische formulieren.

De module is eenvoudig uit te breiden met meerdere acties, of je kunt denken aan het clonen van andere DOM elementen.

Een voorbeeld :

Add Table Row