Afgelopen week heb ik besloten om me aan te sluiten bij Scriptorama. Mathieu had al meerdere keren een verzoek gedaan om daar te komen bloggen. In het jaartje dat ik m’n weblog bijgehouden heb, heb ik geleerd dat je alleen weinig kunt bereiken. Met elkaar kan je meer regelmaat in de artikelen brengen. Daarnaast loopt er bij Scriptorama een schat aan kennis rond in de vorm van Mathieu en Tri en vele vaste bezoekers. Ik ga dus een leerzame tijd tegemoet en hoop dat ik ze ook nog wat kan bijbrengen daar.

Vanaf nu kunnen jullie mijn artikelen dus terug vinden op Scriptorama.

Permalink | Leave a comment  »

Tweakers.net bericht dat verschillende investeerders Zend een financiële injectie hebben gegeven. Zend gaat het geld gebruiken om zijn activiteiten in Europa en Azië uit te breiden en de programmastructuur uit te breiden met ondersteuning voor Ajax.

Originele artikel

Permalink | Leave a comment  »

Vaak zal een server-side taal als PHP niet snel gekoppeld worden aan de opmaak van een website. Toch kan je op het gebied van weergave hele interessante dingen doen met PHP, zo laat A List Apart zien.

In uitgave 222 van het online magazine staat een artikel over Sandbags ter ondersteuning van de uitlijning van tekst rond afbeeldingen. Door onzichtbare elementen over een afbeelding te plaatsen is het mogelijk om de tekst soepel om een afbeelding met transparante achtergrond te draperen.

Het gedeelte waar PHP in beeld komt, is het uitlezen van de transparante pixels in de afbeelding. Door elke rij in de afbeelding langs te gaan en te bepalen waar de werkelijke afbeelding begint, is het mogelijk om div’s heel nauwkeurig te positioneren en zo de tekst uit te laten lijnen. Dit idee bleek niet altijd te werken, maar uiteraard hebben ze daar een prima oplossing voor gevonden.

Kortom: een interessant artikel over de perfecte samenwerking tussen server- en client-side talen om het leven van de webdeveloper wat makkelijker te maken. En de tijd die daardoor beschikbaar komt kan je mooi gebruiken om….

Save time by tricking PHP into managing your tricky text-wrap problems; use that time to fix your About page. Everybody wins.

Permalink | Leave a comment  »

Eerder deze week schreef ik over een update van de JavaScript library Script.aculo.us. Vandaag is er nog een nieuwe update uitgekomen. De hoofdsite van script.aculo.us heeft een upgrade gekregen. En daarmee laten ze zien wat er allemaal mogelijk is met een goede library. Met een minimaal aantal regels code krijg je een aantal vloeiende effecten op het scherm.

De nieuwe website is dus zeker een bezoekje waard!

Permalink | Leave a comment  »

Begin dit jaar schreef Tri Pham een interessant artikel op Scriptorama over de perfecte webdeveloper. Zijn conclusie was simpel maar doeltreffend:

De perfecte web developer bestaat misschien niet, maar er naar streven doet geen vlieg kwaad.

Een manier om hier naar te streven is voor mij een goede opbouw van een applicatie. De laatste tijd heb ik verschillende verzoeken ontvangen om te adviseren bij het ontwikkelen van een webapplicatie. Omdat het hier niet om kleine websites gaat, is de opbouw van groot belang. In dit artikel ga ik proberen de perfecte web developer uit te hangen en mijn mening geven over de perfecte opbouw van een webapplicatie.

A key thing about patterns is that you can never just apply the solution blindly, which is why pattern tools have been such miserable failures. I like to say that patterns are “half baked,” meaning that you always have to finish them off in the oven of your own project. Every time I use a pattern I tweak it a little here and a little there. You see the same solution many times over, but it’s never exactly the same.

De bovenstaande uitspraak komt uit het boek Patterns of Enterprise Application Architecture van Martin Fowler. In dit artikel zullen veel design patterns aan bod komen, patterns die ik zelf handig vind om te gebruiken. Luister naar Fowler, blijf altijd nadenken over de opbouw van je eigen applicatie!

De opbouw van webapplicaties is meestal in grote lijnen met elkaar te vergelijken. Je hebt te maken met de weergave van de applicatie in een webbrowser. Daarnaast zal er een bepaalde gegevensbron zijn, bijvoorbeeld in de vorm van een database. Het laatste element is de koppeling tussen de weergave en de database. Dit element zal de aanvraag van een client omzetten naar een weergave van gegevens uit de database.

De drie bovenstaande elementen zijn beter bekend als Model, View en Controller. Het MVC pattern is in mijn ogen daarom een goede basis voor een webapplicatie.

Model

Het model van een webapplicatie bestaat uit de koppeling tussen de applicatie en een gegevensbron. In veel gevallen hebben hier te maken met een database. De gegevens in een database bestaan uit verschillende entiteiten die inhoud kunnen bevatten. In verschillende projecten in het verleden heb ik ervoor gekozen om voor elke tabel een klasse aan te maken die er globaal als volgt uit ziet:

<?php
class PageModel extends Model {

public function getPages(){
return $this->query("SELECT * FROM pages");
}

public function getPage($iId){
return $this->query("SELECT * FROM pages WHERE id = ".$iId);
}

public function addPage($sName, $sLocation, $bPublished){
return $this->query("INSERT INTO ...");
}

public function editPage($iId, $sName, $sLocation, $bPublished){
return $this->query("UPDATE pages SET ...");
}

public function deletePage($iId){
return $this->query("DELETE FROM ...");
}

}
?>

De methoden werden meestal aangevuld met controles op de gegeven parameters. De Model klasse bevatte alle functionaliteit voor de koppeling met de database. Vaak gaf de methode ‘query’ al associatieve arrays terug met gegevens zodat het in de applicatie verder niet nodig was om te werken met mysql_* functies. Het voordeel hiervan was ook de uitwisselbaarheid met andere database typen, zoals PostgreSQL.

De bovenstaande opzet van een model klasse werkt, alleen doe je regelmatig dubbel werk. De queries in de verschillende klassen zullen voor het grootste gedeelte gelijk zijn. Daarnaast mis je veel flexibiliteit. Zodra je in een controller of view een andere sortering van de gegevens wilt dien je gelijk aanpassingen te maken in de model klasse. Er is dus nog veel ruimte voor automatisering van een model klasse.

Dat laatste is iets waar ik veel belang aan ben gaan hechten. Dubbel werk moet niet nodig zijn als je een goede opbouw van je applicatie hebt, DRY dus. Helemaal als je gebruik gaat maken van object-georiënteerd programmeren. Versie 5 van PHP biedt de hiervoor voldoende mogelijkheden, al ben ik zelf meer een Ruby aanhanger aan het worden. Ruby is zelf een native OOP taal waardoor er veel meer mogelijk is op dat gebied.

Een goed design pattern voor het model is in mijn ogen ActiveRecord. Binnen verschillende frameworks wordt dit pattern toegepast en mijn ervaring is dat het geweldig werkt. Het biedt alle mogelijkheden om DRY te werken, maar je kunt altijd nog zelf je queries gaan schrijven als het nodig is.

Een simpel voorbeeld:
<?php
class Person extends ActiveRecord {

}

// SELECT * FROM persons WHERE id = 1
$person = Person::find(1);
echo $person->name;

// UPDATE persons SET name = 'Edwin V.' WHERE id = 1
$person->name = "Edwin V.";
$person->save;
?>

Zoals je ziet is het overbodig om queries te schrijven, ActiveRecord stelt zelf de queries samen. Het hangt van de implementatie van ActiveRecord af wat allemaal mogelijk is. De implementatie binnen Ruby on Rails biedt bijvoorbeeld functionaliteit voor associaties en gegevens validatie. Het Zend Framework biedt helaas geen implementatie van ActiveRecord aan, maar wel andere handige database klassen.

Een interessant overzicht van object-relational mapping implementaties in PHP is te vinden op de PHP wiki.

View

Een net zo belangrijk onderdeel van een applicatie is de weergave richting de gebruiker. Bij een webapplicatie gebeurd dat meestal in een browser, dus de weergave bestaat uit HTML en de bijbehorende afbeeldingen, JavaScripts en stylesheets. Daarnaast is het natuurlijk mogelijk om XML als weergave te hebben, voor bijvoorbeeld gebruik in een andere applicatie of als RSS feed.
Een laatste – redelijk nieuwe – techniek is JavaScript. In dat geval zal als reactie op een Ajax request vanuit de browser een stukje JavaScript terug gezonden worden om uitgevoerd te worden in de browser. Deze manier van werken wordt de laatste tijd meer toegepast door de introductie van RJS templates in Rails. Een korte introductie van RJS is te vinden op de weblog van Cody Fauser.

De belangrijkste taak van de view is dus de gegevens uit de controller omzetten naar een passend formaat. Hiervoor kan je vaak gebruik maken van een template engine zoals Smarty of Yapter. Mijn ervaring is dat template engines meestal overbodig zijn omdat PHP zelf al een perfecte template engine is.

<ul>
[LOOP $items]
<li>[$item]</li>
[ENDLOOP]
</ul>

<ul>
<? foreach($this->items as $item): ?>
<li><?= $item ?></li>
<? end; ?>
</ul>

Het bovenste voorbeeld zou uit een template engine kunnen komen. Het doet precies wat je wilt, maar absoluut niet meer. Het onderste voorbeeld is dezelfde code in PHP. Als nadeel kan je het aantal tekens noemen, maar dat weegt zeker op tegen de voordelen. Je kunt namelijk gewoon alle functionaliteit gebruiken die PHP te bieden heeft.

Een goede implementatie van een View is die van het Zend Framework. Hierbij ken je in de controller waarden toe aan variabelen in het view object. Deze variabelen kan je vervolgens weer gebruiken in je template.

Binnen templates kan het handig zijn om met helpers te werken. Dit principe kennen we onder andere van Rails en zit wederom in het Zend Framework. Helpers bevatten functies die veel gebruikte HTML tags genereren. Ze kunnen bijvoorbeeld helpen bij het samenstellen van een formulier voor een bepaald object.

Controller

De taak van de controller klassen is een request van een gebruiker omzetten naar een bepaalde weergave van de staat van het systeem. Een request van een gebruiker bestaat meestal uit een URL met daarin bepaalde informatie over de op te vragen gegevens. Een veel gebruikte opzet bestaat uit:
* Controller: De entiteit die opgevraagd wordt, bijvoorbeeld ‘person’
* Actie: De actie die uitgevoerd wordt op de entiteit, bijvoorbeeld ‘show’
* ID: De unieke identifier naar de entiteit, bijvoorbeeld ’1′.

Een aanvraag kan er dus uit zien als ‘index.php?controller=person&action=show&id=1′, maar vaak wordt gebruik gemaakt van nette URL’s en ziet de URL er zo uit: ‘/person/show/1′. Voor elke entiteit bestaat vervolgens een controller:

<?php
class PersonController extends ApplicationController {

public function showAction(){
// Show Person with given ID
}
}
?>

Een controller bevat voor elke mogelijke actie een methode. In het verleden heb ik wel gewerkt met speciale klassen voor elke actie, maar mijn ervaring is dat dit erg onoverzichtelijk is. Het is aan te raden om voor elke actie een methode te gebruiken.

Het omzetten van de URL naar een aanroep van een methode in een controller gaat meestal via routing. De implementatie van controllers in het Zend Framework bevat een RewriteRouter waarmee dit makkelijk te realiseren is. Zodra het routing gedaan is kan de methode de benodigde acties uitvoeren. Een voorbeeld van een controller met twee acties is:
<?php
class PersonController extends ApplicationController {

public function showAction(){
$view = new View();
$view->person = Person::find($this->params['id']);
return $view->parse('person/show.tpl');
}

public function editAction(){
if($this->request->isPostMethod()){
$person = Person::find($this->params['id']);
$person->name = $this->params['person']['name'];
$person->save();
return $this->redirect('person', 'show', $person->id);
} else {
$view = new View();
$view->person = Person::find($this->params['id']);
return $view->parse('person/edit.tpl');
}
}

}
?>

Conclusie

Zoals uit het artikel blijkt ben ik zelf een grote fan van Ruby on Rails en het Zend Framework. Het Rails framework geeft webdevelopers een kant-en-klare oplossing voor de opbouw van een webapplicatie. Zowel het MVC pattern als ActiveRecords is hierin terug te vinden, beide met een zeer goede implementatie.

Het Zend Framework is helaas nog in een beta status en dwingt niet de opbouw van een applicatie af. Ze geven echter wel een goede basis met verschillende klassen ter ondersteuning van MVC en object-relation mapping. Hoewel ik de laatste tijd veel werk met Ruby, zou ik het framework zeker gebruiken als basis voor een PHP applicatie.

De genoemde opbouw van een applicatie is in mijn ogen een manier om DRY te werken en toch voldoende flexibiliteit te hebben. De methode heeft al meerdere keren goede dienst bewezen bij mij. En om net zo’n pakkende conclusie als Tri Pham te geven:

Een perfecte opbouw van een webapplicatie bestaat niet, maar er naar streven doet geen vlieg kwaad.

Permalink | Leave a comment  »

Afgelopen week is er een update uitgekomen van de JavaScript library script.aculo.us. Script.aculo.us wordt standaard meegeleverd met Ruby on Rails en biedt functionaliteit voor visuele effecten, drag-and-drop en verschillende controls.

In de vorige versie van de bibliotheek was het onder andere mogelijk gemaakt om geneste lijsten te sorteren, de zogenaamde sortable trees. Helaas zat er een bug in de serialisatie van de lijsten waardoor ze in applicaties onbruikbaar waren. In de nieuwe versie is onder andere dit probleem opgelost.

Een uitgebreide changelog en download links zijn te vinden op de website van script.aculo.us.

Permalink | Leave a comment  »

Gisteravond was de keynote van Apple’s Steve Jobs. Hierin kregen we onder andere een preview van de nieuwe versie van Mac OS X Leopard. Na afloop weet Riding Rails te melden dat Ruby on Rails voortaan standaard met het besturingssysteem geleverd wordt.

Op de preview website van de server versie van Leopard is inderdaad de onderstaande tekst te vinden:

Leopard Server also features administration for either Apache 2.2 or 1.3, MySQL 5 with Apache/MySQL/PHP integration, JBoss 4, and Tomcat 5 for hosting EJB 3.0 and J2EE 1.4-compliant enterprise applications, and Ruby on Rails with Mongrel for simplified development and deployment of web-based applications.

Ze zijn goed bezig bij Apple! Niet alleen werken met OS X is een genoegen, maar ook webdevelopment in Ruby on Rails is geweldig. Helemaal geweldig dat ze elkaar voortaan nog meer ondersteunen.

Permalink | Leave a comment  »

Voor een project was ik op zoek naar een simpele manier om tabbladen in html te maken. Tabbladen vormen een manier om alternatieve inhoud naast elkaar weer te geven in een kleine ruimte. In dit specifieke geval zocht ik naar een mogelijkheid om twee lijsten met gegevens op dezelfde pagina kwijt te kunnen, zonder hierbij de pagina onnodig lang te maken. Aangezien de gegevens inhoudelijk gezien niet noodzakelijk naast elkaar hoeven te staan, leken tabbladen mij een aantrekkelijke optie.

De meeste tabblad interfaces die ik tegen kwam op het web hadden het grote nadeel dat eerst de navigatie en vervolgens de inhoud van de tabbladen vastgelegd wordt in html. Semantisch vind ik dit niet correct, je kunt immers de tabbladen zien als verschillende paragrafen met een kopje. Misschien is een opsomming van verschillende gegevens nog wel een betere omschrijving.

De ideale semantische structuur voor tabbladen leek mij:

<ul class="TabInterface">
<li>
<h2>Item 1</h2>
<div>
<p>
Inhoud 1
</p>
</div>
</li>
<li>
<h2>Item 2</h2>
<div>
<p>
Inhoud 2
</p>
</div>
</li>
<li>
<h2>Item 3</h2>
<div>
<p>
Inhoud 3
</p>
</div>
</li>
</ul>

Dit is valide xhtml en met behulp van CSS en een klein beetje JavaScript kunnen we hier zonder problemen een mooie tabblad interface van maken. De JavaScript is nodig om de click op het h2 element op te kunnen vangen en vervolgens het actieve tabblad te sluiten en de aangeklikte te openen.

Ik ben begonnen met het opzetten van de CSS. Allereerst moeten de bullets voor de lijstelementen weg en hebben we de marge niet meer nodig. Verder geef ik de lijst een relatieve positie, zodat we zonder problemen elementen absoluut kunnen positioneren binnen de lijst.

.TabInterface {
padding: 0px;
margin: 0px;
list-style-type: none;
position: relative;
}

Het volgende doel is om alle h2 elementen in een lijstelement in een balk naast elkaar te plaatsen. Dit kunnen we doen door middel van een float naar de linkerkant, alleen zal dan de inhoud van een tabblad in de weg zitten. Hierdoor is het nodig om de div elementen absoluut te positioneren, zodat de h2 elementen netjes naast elkaar komen te liggen.

.TabInterface h2 {
float: left;
border-color: black;
border-style: solid;
border-width: 1px 1px 0 1px;
margin: 0 5px;
font-size: 10pt;
padding: 3px 5px;
height: 14px;
background-color: lightgrey;
z-index: 10;
cursor: pointer;
}

.TabInterface div {
display: none;
clear: both;
position: absolute;
top: 20px;
left: 0px;
border: 1px solid black;
}

De volgende stap is het verschil aanbrengen tussen actieve en niet actieve tabbladen en koppen. Een actief tabblad zal zichtbaar moeten zijn en we willen eventueel de stijl van een kop aanpassen zodra deze actief is. De volgende css zorgt hiervoor:

.TabInterface li.TabActive div {
display: block;
}

.TabInterface li.TabActive h2 {
position: relative;
top: 0px;
background-color: white;
}

Om ervoor te zorgen dat we tabbladen kunnen activeren, hebben we een klein stukje JavaScript nodig. De verantwoordelijkheid van deze code is om tijdens het laden van de pagina de volgende zaken te regelen:
* Het eerste element in de lijst moet initieel het actieve tabblad zijn, dit element moet dus de class TabActive krijgen.
* Elk element in de lijst moet een event handler toegekend krijgen. De handler moet ervoor zorgen dat eerst het huidige actieve tabblad gedeactiveerd wordt om vervolgens de nieuwe selectie te activeren.

Ik heb ervoor gekozen om gebruik te maken van het Prototype Javascript Framework, omdat deze in het project ook gebruikt wordt.

window.onload = function(){
document.getElementsByClassName('TabInterface').each ( function(TabInterface){
var FirstTab = true;
$A(TabInterface.childNodes).each( function(Tab){
if(Tab.nodeName 'LI'){ if(FirstTab){ Element.addClassName(Tab, 'TabActive') FirstTab = false; } Tab.onclick = function(e){ $A(Event.element(e).parentNode.parentNode.childNodes).each( function(OtherTab){ if(OtherTab.nodeName 'LI'){
Element.removeClassName(OtherTab, 'TabActive');
}
});
Element.addClassName(Event.element(e).parentNode, 'TabActive');
}
}
});
});

}

Het eindresultaat is hier te vinden.

Permalink | Leave a comment  »

Afgelopen week heeft Zend een nieuwe versie van de veel gebruikte Zend Studio uitgegeven. Er zijn enkele wijzigingen gemaakt aan de stabiliteit van het programma en het is nu mogelijk om nog sneller je applicaties te maken.

Een gratis trail kan hier gevonden worden, meer informatie over dit product is te vinden op de product pagina van Zend.

Permalink | Leave a comment  »

Onder het mom van “Doe eens gek” heeft Thomas Fuchs, de ontwikkelaar van script.aculo.us, een leuk effect aan de javascript library toegevoegd. Door middel van de Reflector kan je afbeeldingen een reflectie geven, zoals je ook regelmatig ziet in Mac OS.

Fuchs geeft wel duidelijk aan dat de code nog niet gereed is voor productie. Daar kan ik me helemaal in vinden, omdat de reflectie bestaat uit een x aantal kopieën van de afbeelding, telkens met een andere opacity en marge. Redelijk heftig voor een browser lijkt mij.

Permalink | Leave a comment  »

Ajaxian kwam vandaag met twee mooie linkjes. De linkjes verwijzen naar een website van Yusuke Kawasaki en geven een demonstratie van de mogelijkheden van JavaScript. Of de taal hiervoor bedoelt is valt natuurlijk te betwisten, maar leuk is het wel.

Een ge-animeerde kubus en een ge-animeerd raster laten maar weer eens zien dat er meer kan met JavaScript dan je denkt. Funky!

Permalink | Leave a comment  »

Vitamin is een nieuw online magazine met interessante artikelen voor webontwikkelaars. De artikelen zijn veel gericht op Web 2.0 aspecten zoals AJAX en Ruby on Rails. Een voorbeeld hiervan is het artikel van Thomas Fuchs over het maken van AJAX effecten in je web applicaties.

Een ander interessant artikel is ‘Making Popular Layout Decisions’ van Eric Meyer. Op een luchtige wijze laat hij precies zien waar het tijdens webdesign altijd om gaat: het maken van keuzes.

De magazine wordt elke week geüpdate, een aanrader voor in de RSS reader dus.

Permalink | Leave a comment  »

Zend heeft net een nieuwe preview van hun framework openbaar gemaakt. Na een herstyle van de framework website afgelopen week, is er nu dus ook weer wat aan de code gedaan. Overigens is het ook mogelijk om rechtstreeks in de SVN repository een checkout te doen, zodat je de allerlaatste preview hebt.

De changelog van de nieuwe versie ziet er als volgt uit:

RELEASE 0.1.3 / 18-Apr-2006

• Zend_Filter is* methods return strictly TRUE or FALSE. (Chris)
• Zend_InputFilter has test* methods for retrieving valid data. (Chris)
• Fixed bug in Zend_View_Abstract::__isset(). Reported by James Simmons. (Mike)
• Zend_Db_Adapter_Pdo_Mysql::limit() now compatible with MySQL versions prior to 4.0. Reported by Greg Neustaetter (Mike)
• Fixed bug in Zend_Controller_Dispatcher_Token::setParams(). Reported by Rob Allen. (Chris)
• Fixed bug in Zend_Log::log(). Reported by Mislav. (Mike)
• Updated Zend_Filter::isFloat() and Zend_Filter::isInt() to respect locale. (Chris)
• Improved Zend_Db_Adapter_Pdo_Mssql contributed by Rob Allen. (Mike)
• Fixed bug in Zend_Controller_Dispatcher::_formatName. Reported by Arpad Ray. (Chris)
• Zend::dump() now works from CLI (Rob Allen)
• Improved support for XML-RPC namespaces (Mike, Chuck)
• Registry can now be tested with Zend::isRegistered (Shekar C. Reddy, Mike)
• Zend_Search_Lucene promoted from incubator (Alex)
• Zend_Cache has been accepted to the incubator (Fabien, Mislav)
• Zend_Json testing expanded; covers all major cases (Matthew)
• Fixed Zend_Json encoding of empty values (Matthew, Davey)
• Fixed Zend_Json encoding of associative arrays (Matthew, Davey)
• Fixed Zend_Json encoding of numeric indices in associative arrays (Matthew)
• Removed formatting (newlines, tabs) from Zend_Json encoding methods (Matthew)
• Fixed escaping in Zend_Json_Encoder (Matthew)
• Zend_HttpClient moved to Zend_Http_Client (Mike)
• Zend_Console_Args in the incubator but not yet refactored (Jason Garber)
• Zend_Mail enhancements in the incubator by Austria Telekom (Nico, Clez)
• Zend_Service classes no longer subclass Zend_Service_Rest (Davey, Andi, et al)
• Zend_Service classes now use new Zend_InputFilter (Davey)
• Fixed bug in Zend_Service_Amazon::itemLookup() (Davey)
• Fixed bug in Zend_Service_Flickr::userSearch() (Davey)
• Fixed bug in Zend_Uri_Http::__construct(). Reported by Adrian Gheorghe. (Mike)
• Improved some not well-formed PDF processing with Zend_Pdf. (Alexander)
• Minor Zend_Pdf documentation fixes. (Alexander)
• Fixed Zend_Pdf processing of inherited page attributes. (Alexander)
• Fixed Zend_Pdf umlauts support for standard fonts. (Alexander)

Permalink | Leave a comment  »

Al lange tijd zit ik te wachten op een goed framework om webapplicaties in te bouwen. Gezien mijn ruime ervaring met PHP, leek het nieuwe Zend Framework een uitkomst te bieden. Helaas staat dit framework nog teveel in de kinderschoenen en wordt mijn drang naar iets goeds met de dag groter. De andere PHP frameworks zijn vaak afgeleid van Ruby on Rails. Reden genoeg om eens naar dit geweldige framework te kijken.

Door enkele wijzigingen in de nieuwe versie van Ruby on Rails, is het mij deze keer wel gelukt om het framework op een linux server te installeren. In plaats van het bekende – maar weinig zeggende – witte scherm, kreeg ik nu een keurige foutmelding, waardoor mijn fouten met FastCGI zo opgelost waren.

Natuurlijk valt er nog veel te leren op het gebied van Ruby en Rails, maar mijn eerste kennismaking is positief. Ruby heeft een aparte syntax, maar na het doorspitten van enkele hoofdstukken uit Programming Ruby – The Pragmatic Programmer’s Guide werd de opbouw al snel duidelijk. Volledig werken met OOP heb ik goede ervaringen mee vanuit Java. In PHP heb ik al enkele pogingen gedaan om netjes OOP te werken, maar daar helpen ze niet echt mee. Binnen Ruby kunnen ze niet anders, dus dat zit wel goed.

De documentatie van Ruby bestaat uit een Class and Library Reference, die overigens ook in een ander formaat te verkrijgen is. Het is een genot om bijvoorbeeld naar de String klasse te kijken en het te vergelijken met PHP. Moest je in PHP nog de manual openen om te zoeken of voor een string functie ‘str’, ‘str_’ of niets stond, hier heet het gewoon ‘capitalize’ of ‘include?’.

De API van Rails is duidelijk en bevat voldoende informatie over de verschillende onderdelen. Het kost echter wat tijd voordat je door hebt in welke klasse iets te vinden is (al is dat achteraf wel logisch). Verder is de Wiki een goede aanvulling op de API.

Ik ben van plan om de komende tijd regelmatig wat over mijn bevindingen met Ruby on Rails te schrijven.

Permalink | Leave a comment  »

Drie week geleden heb ik jullie kennis laten maken met ajaxWrite. Robertson was van plan om elke week een nieuwe AJAX applicatie te introduceren. Ondertussen zijn dat er dus alweer drie. Een kort overzichtje.

De eerste is ajaxSketch, een simpele alternatief voor Paint. Het is gebaseerd op SVG, waardoor je het alleen in Firefox 1.5 kunt gebruiken. Hierdoor zijn de afbeeldingen echter wel uitwisselbaar met applicaties als Microsoft Visio, Adobe Illustrator en Inkscape.

De tweede applicatie is eyespot. Hier kan je korte video’s uploaden en delen met anderen. Daarnaast beschikt het over de mogelijkheid om filmpjes te mixen. Erg interessant natuurlijk voor een AJAX applicatie.

De derde en voorlopig laatste applicatie is ajaxXLS. Een logisch vervolg op de Word kloon van 3 week geleden, hiermee kan je namelijk spreadsheets bewerken. Wederom erg interessant, aangezien er veel meer intelligentie in zit dan een ‘normale’ tekst editor.

Een goede opmerking bij al dit AJAX-geweld komt van Robert van Blueace

Ook al weet ik niet of de term “AJAX� wel past bij dit project, aangezien die techniek hier weinig mee te maken heeft, maar goed…

De bovenstaande applicaties zijn allemaal hoogstandjes als het gaat om Javascript, maar of ze nou allemaal de definitie van AJAX opvolgen is maar de vraag.

Asynchronous JavaScript And XML, or its acronym, Ajax (Pronounced A-jacks), is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page’s interactivity, speed, and usability.

Permalink | Leave a comment  »

Veel webdeveloper weten handige informatiebronnen voor het programmeren niet te vinden. Onder het mom van Read The F*cking Manual zal ik in dit artikel een overzicht geven van de resources die ik regelmatig raadpleeg tijdens m’n ontwikkel werk.

1. PHP.net
   De officiële PHP handleiding, grotendeels vertaald naar het Nederlands. De handleiding bevat een slimme zoekmachine, als je achter ‘php.net’ een term typt zal hij proberen de goede handleiding pagina voor te schotelen. Een voorbeeld http://php.net/array_search
2. MySQL Reference Manual
   De officiële MySQL handleiding, helaas helemaal in het Engels, maar dat is voor de echte webdeveloper geen punt. Naast de goede SQL syntax en handige functies, staan hier ook veel zaken voor database beheerders in. Minder interessant tijdens het programmeer werk dus. Nuttige hoofdstukken zijn:
3. Data Types
4. Functions And Operators
5. SQL Statement Syntax
6. PostgreSQL Documentation
   Wederom een officiële handleiding, ditmaal van PostgreSQL. Vooral het hoofdstuk SQL Syntax moet je doorgelezen hebben voordat je aan de slag gaat met PostgreSQL (maar veel hiervan kan je ook toepassing bij MySQL).
7. CSS level 2
   De definitie van CSS volgens het W3C. Heel handig om te kijken wat de syntax van CSS is en om te kijken welke argumenten een property kan krijgen.
8. URL Rewriting Guide
   Een hele duidelijke uitleg over de toepassing van mod_rewrite in je scripts. Samen met de syntax specificatie zou je hiermee al je rewrite rules op moeten kunnen stellen.

Scriptorama wees mij afgelopen week op een handige verzameling van deze verschillende handleidingen. Via gotAPI kan je via een simpele interface snel zoeken in de handleidingen.

Permalink | Leave a comment  »

Webwereld bericht dat Michael Robertson begonnen is met het aanbieden van een online Word variant. Via ajaxWrite kan je documenten aanmaken en bewerken. Op dit moment is de editor alleen beschikbaar voor Firefox omdat er gebruik gemaakt wordt van XUL.

De komende weken zal Robertson elke woensdag een nieuwe Ajax applicatie introduceren. Meer informatie hierover is te vinden op de ajaxLaunch website.

Scriptorama bracht enkele dagen geleden al een Ajax OS naar voren. Dit is meer een speel project van enkele ontwikkelaars. Robertson lijkt het wat serieuzer aan te pakken.

Mijn eerste indruk van ajaxWrite is positief. Het werkt op een vergelijkbare manier als Word en kan voor een bepaalde doelgroep een handig alternatief zijn. Als je echter meer eisen gaat stellen aan Word, zoals het aanmaken van inhoudsopgaven en bewerken van afbeeldingen, kan ajaxWrite zich niet evenaren met Word. Desondanks toch een mooi voorbeeld van wat met Ajax mogelijk is.

Uiteindelijk is Robertson niet de eerste die een Word alternatief in Ajax gemaakt heeft. Enkele andere voorbeelden zijn Writely en WriteBoard. Deze projecten richten zich ook meer op collaboration en document sharing.

Permalink | Leave a comment  »

The current version of Zend Framework doesn’t include a way to use scaffolding in a script-in-development. Because I wanted to play with the framework, I’ve extended the Zend_Controller_Action class to make scaffolding possible. In this article I shall explain the code and give some feedback for the developers of the framework.

The main purpose for scaffolding is creating very basic pages for viewing and editing content in the database. In an early stage of implementation, scaffolding gives the developer a way to test certain functionality, without the need to work directly in the database. Besides that, scaffolding is used as a basis for the final implementation.

In this example, I’m using the Action and Router class from Akra’s DevNotes to create a simple application. In fact, de Scaffold class will extend the Akrabat_Action class, which hopefully in the future will be part of the framework itself.

h3. Creating the model

First of all, we need to create a new data object to apply our Scaffold class to. Create a new table in your favorite database and create a new model class for the database:

<?php
class tableName extends Zend_Db_Table { }
?>

‘tableName’ matches the name of the table you just created, in this case ‘table_name’. Make sure the column name which contains the primary id of the table is ‘id’ or define another primary column.

Creating the controller class

To manage the data inside the table, we want to create a controller class like this:

class tableNameController extends Fly_Scaffolding { }

The controller ‘tableName’ should give us the possibility to:
* Show a list of rows in the table
* Show a single row in the table
* Edit a row
* Delete a row
* Add a row

The Scaffolding class

The code for the Fly_Scaffolding class is:

<?php

/**
* This file contains the scaffolding class
*
*
* @copyright 2006 Edwin V.
* @license http://www.zend.com/license/3_0.txt PHP License 3.0
* @version CVS: $Id:$
* @link
*/

require_once 'Zend/Db/Inflector.php';

/**
* Scaffolding class, extends the Akrabat_Action class
* Provides the developer a simple CRUD interface for a table
*
* @copyright 2006 Edwin V.
* @license http://www.zend.com/license/3_0.txt PHP License 3.0
* version Release: @package_version
* @link
*/
class Fly_Scaffolding extends Akrabat_Controller_Action {

/**
* For name inflections.
*
* @var Zend_Db_Inflector
*/
static protected $_inflector;

/**
* The name of this controller
*
* @var string
*/
protected $_name;

/**
* The name of this entity, this is the table name without the given prefix
*
* @var string
*/
protected $_entityName;

/**
* The table to scaffold
*
* @var Zend_Db_Table
*/
private $_table;

/**
* The information about the table
*
* @var array
*/
private $_tableInfo;

/**
* Construct a new scaffolding object
*/
public function __construct($tableName = ""){
parent::__construct();

// Use the db inflector
self::$_inflector = new Zend_Db_Inflector();

if(empty($tableName)){
$this->_name = str_replace("Controller", "", get_class($this));
} else {
$this->_name = self::$_inflector->camelize($tableName);
}

// Replace fly with some kind of table prefix
$this->_entityName = $this->_name;

require_once("../application/models/".ucfirst($this->_name).".php");

$this->_table = new $this->_name();

$this->_tableInfo = $this->_table->info();

// Define the singular and plural name for use in the views
$this->nameSingular = self::$_inflector->singular($this->_entityName);
$this->namePlural = self::$_inflector->plural($this->_entityName);

$info = $this->_table->info();
$this->primary = strtolower($this->_tableInfo['primary']);

}

public function indexAction(){
$this->_redirect('list');
}

/**
* The list action shows a list of all rows in the table
*/
public function listAction(){
$info = $this->_table->info();
$this->columns = $info['cols'];
$this->items = $this->_table->fetchAll();
}

/**
* The show action shows a single row in the table
*/
public function showAction(){
$this->item = $this->_table->find($this->_getParam('id'));

// Create array because of bug
$data = $this->item->toArray();
$this->id = $data[$this->primary];
}

/**
* The edit action shows a form for editing a row in the table
*/
public function editAction(){
$this->item = $this->_table->find($this->_getParam('id'));
}

/**
* The update action updates the table with information from the edit form
*/
public function updateAction(){
// Add some kind of post method check
// check if post variables are available

$id = $_POST[$this->primary];

// We don't want to update the primary column
unset($_POST[$this->primary], $_POST['submit']);

$where = $this->_table->getAdapter()->quoteInto($this->primary." = ?", $id);
$this->_table->update($_POST, $where);

$this->_redirect('show/id/'.$id);
}

/**
* The add action displays a form for adding a new row to the table
*/
public function newAction(){
$this->columns = $this->_tableInfo['cols'];
}

/**
* The create action adds a new row to the table
*/
public function createAction(){
unset($_POST['submit']);

$id = $this->_table->insert($_POST);
$this->_redirect('show/id/'.$id);
}

/**
* The delete action deletes a row from the table
*/
public function destroyAction(){
$where = $this->_table->getAdapter()->quoteInto($this->primary." = ?", $this->_getParam('id'));
$this->_table->delete($where);
$this->_redirect('../../list');
}

}

This class extends the action class and defines eight new actions for the controller. For the list, show, edit and new action we create views to display the information delivered by this controller. The view files can be found in the zip file, together with an application to test the scaffolding class.

Suggestions for improvement of the Scaffold class

The given implementation of the Scaffold class is just an example of how it can be implemented. There are a lot of improvement points and possible security problems.

Some suggestions for improvement:

• Move the view files to the Zend Framework path, so users don’t have to copy it to their application path.
• Check if a view is available, if not, use the framework default view for the action (but therefor the above point should be solved first)
• Display form elements according to the column type
• Check if the request method of the update and create actions is post

Feedback

Things I’m missing in the current version of the framework and bugs I’ve found:

• There is no possibility to get the current url of the page. If you want to create a link to a different action in the same controller, you should always read the current url and do some tricky actions. Maybe a function like this can be interesting:
  // Returns the value of the controller part and the action part of the url,
// in case of requesting 'tableNameController/edit/id/1' this would return 'tableNameController/edit'
$this->getUrl("controller/action");
• In the form helper functions, it is possible to define html tag arguments in the array. In case of the ‘disabled’ argument of a form element, giving a boolean always puts the disabled argument in the tag. Actually, you only want to add the disabled argument when the argument is true. In case of false, the output would be ‘disabled=”"‘, which still means that the element is disabled.
• A new function in the inflector class for creating human readable column names: ‘site_id’ should become ‘Site id’. Maybe make the inflector class available as a helper in a view?
• A way to detect if a request is post or get and if there are certain post variables available. For example in the update method in my class this can be useful. The update method should only be parsed succesful when the method is post and the post variables that existed in the edit form are available.
• With the Zend_Db_Table::update method, it is possible to update some rows in the table. The method doesn’t check if the given keys are valid columns in the table.
• “Notice: Undefined index: ID in e:public_htmlZFlibraryZendDbTableRow.php on line 95″ When using ID as a primary column, ZF sometimes makes the column lowercase. In this case, the column exists, but the value is stored in ‘id’, so this error is thrown.
• Create a special Zend_Db_Row property which contains the value of the primary key:
  echo $this->item->_primary;
// instead of
$data = $this->item->toArray();
$info = $this->_table->info();
echo $data[$info['primary']];
• Make it possible to have table prefixes that do not need to be in the classname of the class that extends Zend_Db_Table or Fly_Scaffolding
• Improve the table classes to:
  • Define validations for table contents which can easily be read to use in add/edit forms.
  • Define relations between tables
  • Make is possible to read the column types of the table to use appropriate form elements

I really hope that there will be some kind of scaffolding in the stable version of the Zend Framework. With one small class and a few views, the work of many developers can be made a lot easier.

Permalink | Leave a comment  »

byFly.net is al tijden mijn virtuele kindje. Nu hij zijn eerste stapjes in de grote mensen wereld gezet heeft, denk ik dat het tijd wordt om hem eens te leren voetballen zodat hij later misschien wat kan gaan doen bij AJAX.

Een van de trends binnen Web 2.0 is Rich User Experience. Door middel van alom bekende technieken is het nu plots mogelijk om de mooiste dingen te doen en de gebruiker een rijkere ervaring te geven. Verschillende JavaScript libraries maken je het op dit punt makkelijk, ze bieden je een uitbreiding van de standaard functies van JavaScript (Prototype), mooie effecten (Script.aculo.us) en AJAX functionaliteit (Prototype).

De opbouw van een pagina binnen byFly.net bestaat uit enkele containers die zijn vastgelegd in de sjabloon van de pagina. Binnen het systeem bepaal je welke inhoud deze containers moet hebben door er gegevensblokken aan toe te voegen. De inhoud van deze gegevensblokken is afkomstig van de verschillende modules en kunnen dus allerlei soorten inhoud bevatten.

Wanneer 2 pagina’s dezelfde sjablonen hebben, is het dus mogelijk om alleen de inhoud van de containers te vervangen met de nieuwe inhoud. We kunnen zelfs nog een stapje verder gaan: blokken die in beide pagina’s aanwezig zijn hoeven ook niet meer van de server gehaalt te worden. Via een simpele AJAX request halen we dus alleen de nieuwe blokken op en plaatsen die in de juiste containers in de pagina.

Een nadeel van deze manier van werken is de gebruiksvriendelijkheid voor minder validen. Daarbij denk ik voornamelijk aan de bezoekers die met een screenreader de website bekijken en soms geen JavaScript ondersteuning hebben. Een belangrijke eis is dus dat de pagina’s ook zonder JavaScript normaal hun werk doen. Daarnaast moet het systeem niet de handige features van de browser onbruikbaar maken, zoals de bookmark functie en de history knoppen.

De eerste eis is redelijk simpel te bereiken: zorg ervoor dat het systeem altijd een normaal bruikbare pagina oplevert en vervang in de browser pas de links naar pagina’s door links naar AJAX requests.

De tweede eis had wat meer voeten in de aarde. Bronnen die ik hiervoor gebruikt heb zijn:
* AJAX Tutorial: A Tale of Two IFrames
* Developing Ajax Applications That Preserve Standard Browser Functionality
* Fixing the Back Button and Enabling Bookmarking for AJAX Apps
* AJAX: How to Handle Bookmarks and Back Buttons

De oplossing ligt in het gebruiken van het hash element in een url. Door deze aan te passen zal er geen nieuwe request naar de server gaan, maar wordt in Firefox wel de history aangeroepen en is het mogelijk om een link op te slaan als bookmark.

De werking van het systeem zal globaal het volgende zijn:
# Na het laden van de pagina alle links op de pagina aanpassen en in plaats van ‘index.php?page=_pagename_’ de link te laten verwijzen naar ‘index.php#_pagename_’.
# Een inventarisatie maken van de huidige inhoud van de containers.
# Een observer aanmaken die door middel van polling kijkt of de hash in de url aangepast is doordat er op een link in de pagina geklikt is.
# Indien dit het geval is, de huidige toestand van de pagina opsturen naar een serverside script
# Dit script zal de structuur van de weer te geven pagina opsturen en alleen de gegevens die nog niet beschikbaar zijn in de browser meesturen
# De response van de AJAX request wordt verwerkt tot een aanpassing van de containers op de pagina met de nieuwe gegevens. Dit kan eventueel gebeuren met een mooi effectje.

Een eerste versie van dit systeem is hier te vinden.

De volgende punten moeten nog opgelost worden:
* Wat als een gebruiker zonder JavaScript van een gebruiker met JavaScript een url met een hash erin krijgt? Op dit moment wordt in JavaScript die hash uitgelezen en de pagina aangepast. Dit is zoiezo onzinnig, want dan wordt eerst een paginainhoud geladen die de gebruiker niet nodig heeft, om vervolgens deze direct te vervangen met de inhoud van de pagina van de hash.
* Zou niet van tevoren bekend moeten zijn of achter een link een pagina met een andere sjabloon zit? Hierdoor kan sneller ingespeelt worden op requests van pagina’s met een andere sjabloon door gelijk de complete pagina te verversen. Is dit de verantwoordelijkheid van het serverside script of kan dit ook opgelost worden met een AJAX request gelijk na het laden van de pagina?
* In Internet Explorer moet de history functie nog geïmplementeerd worden. Hiervoor moet gebruik gemaakt worden van een iframe.

Permalink | Leave a comment  »

Vandaag is een nieuwe preview van het Zend Framework uitgekomen.

Mike Naberezny:
“Also, we are hoping to roll out a new preview release today that will include additional documentation, the unit test suite, and fixes for all bugs that have been reported to date. We hope new preview releases will be a very frequent event. “

De bijbehorende changelog is:
* Fixed default charset in Zend_Mail constructor. Reported by Jakob Buchgraber. (Mike)
* Fixed several Zend_Filter methods. (Chris)
* Fixed JSON datum encoding. Reported by Edwin V. (Mike)
* Fixed FormRadio Helper. Reported by AJ Tarachanowicz. (Chris)
* Fixed Zend_Uri_Http to work with new Zend_Filter. (Chris, Mike)
* Docs for the Zend_Db::factory() method were incorrect. Reported by Dinh. (Chris)
* Zend::loadClass() now works inside __autoload(). Reported by Rob Allen. (Mike)
* Fixed notices from Zend_Pdf_Element_Dictionary. Reported by Ralf Eggert. (Alex)
* Fixed notices from Zend_Search_Lucene_Index_SegmentWriter. Reported by Jared Williams. (Alex)
* Removed defunct Zend_Db_DataObject docs. (Mike)
* Added NEWS.txt file (Andi)

De nieuwe versie is te downloaden vanaf hier.

Permalink | Leave a comment  »