In dit voorbeeld zullen we een controller met een sjabloon maken in Cody. We gaan een pagina maken waar bezoekers op kunnen reageren.
Wat hebben we nodig?
- Een zelfgemaakte controller
- Een zelfgemaakt sjabloon
- Een klein beetje MySQL code
Hoe beginnen we hieraan?
Start uw favoriete IDE (in dit voorbeeld wordt WebStorm 6 gebruikt) en open de map van uw website.
Maak nu 2 bestanden aan CommentController.js in de map controllers en Commentablepage.ejs in de map views.
Vervolgens voegen we deze nieuwe controller toe aan het index.js bestand van de website.
Voeg het volgende toe aan de controllers array: {name: "CommentController", controller: YourSiteName.EventController}.
Vergeet zeker niet om onze nieuwe controller te exporteren uit de controller map, dit kan u bekomen door het volgende toe te voegen aan het index.js bestand in de controllers map: module.exports.CommentController = require("./CommentController.js");
Vervolgens gaan we het sjabloon toevoegen aan de database.
Voer het volgende MySQL statement uit in de database van uw website:
INSERT INTO templates(name,description,controller,fn,maxnumber,system,defaultchild)
VALUES ('Commentable-page','A page users can write comments','CommentController','Commentablepage.ejs',0,'N',0);
Als u vervolgens een nieuwe pagina wil toevoegen zal u zien dat het nieuwe sjabloon is toegevoegd aan de lijst.
Tijd voor wat code
Laten we starten met de controller.
Iedere controller heeft enkele dingen nodig om deftig te werken.
Wat u hier ziet zijn enkele imports (de require statements), een constructor (function CommentController), een export en een doRequest functie.
Het meeste werk gebeurt in en rond de doRequest functie.
De DoRequest functie
Deze functie zal opgeroepen worden iedere keer de controller een request ontvangt. Vanuit deze functie kan u de request behandelen op de manier dat u wil, maar zorg ervoor dat u de finish methode oproept (met al dan niet als parameter de juiste view).
U vraagt zich misschien af waarom we een variabele self maken, dit is om in callback en anonieme functies er zeker van te zijn dat we het juiste object aanspreken.
Genoeg hierover, tijd om wat code toe te voegen en onze requests te behandelen.
Zoals u hierboven ziet maken we gebruik van de functie isRequest, de waarde hiervan is meestal afgeleid uit een form( bijvoorbeeld: ). Of wat er na de URL geplaatst is (voorbeeld: instance http://codyweb.com/en/comment/submit).
Gegevens uit de view halen
Als u een controller schrijft wil u gegevens van uw gebruikers ontvangen. Dus zullen we een form maken in het Commentablepage.ejs bestand.
Om het simpel te houden kopiëren we de inhoud van index.ejs en plaatsen we onderstaande code tussen de main section en de footer.
Zodat we het volgende te zien krijgen.
Als de gebruiker op de submit knop klikt zal de doRequest functie in onze controller opgeroepen worden. Laten we nu eens kijken naar wat code om de data uit deze request te halen hiervoor gebruiken we de getParam() functie.
Om dit te illustreren in het volgende voorbeeld voegen we het volgende stukje code toe aan de doRequest() functie.
Laten we dit eens testen door een pagina aan te maken met het "Commentable-page" sjabloon
Vervolgens gaan we deze nieuwe pagina bekijken.
Vul wat data in en klik op de Submit knop.
Als we in onze console kijken zien we wat de gebruiker gepost heeft.
Data opslaan in een MySQL databank
We kunnen data krijgen van onze gebruikers, de volgende stap is om deze op te slaan. Een MySQL database is hiervoor de ideale locatie.
Laten we eerst een tabel maken waar we onze data kunnen opslaan.
Voer de volgende query uit in de database van de website:
CREATE TABLE `empty`.`comment` (
`idcomment` INT NOT NULL AUTO_INCREMENT ,
`user` VARCHAR(45) NOT NULL DEFAULT 'anonymous' ,
`comment` TEXT NOT NULL ,
`pageid` INT NOT NULL ,
`time` DATETIME NOT NULL ,
PRIMARY KEY (`idcomment`) );
Nu hebben we onze data en onze database, tijd voor enkele query's. Om het overzichtelijk te houden declareren we enkele query's in de constructor van de controller
Vervolgens gaan we deze query's uitvoeren. Om een query uit te voeren kunnen we gebruik maken van de query functie uit de basisklasse van de controller.
Syntax: query(query,parameters,callback).
We zullen dit meteen illustreren met een voorbeeld. Hiervoor schrijven we een nieuwe functie AddNewComment.
Vervolgens passen we onze doRequest functie aan (en voegen een kleine getCurrentDateTime functie toe)
Als we nu een reactie achterlaten op onze pagina zal deze worden opgeslagen in onze database.
Zoals u ziet werkt dit.
Nu hebben we data in onze database gestopt, nu moeten we ze er ook weer uithalen.
Data terug naar de pagina sturen
Om dit te illustreren gaan we eerst een functie schrijven dat de data uit de database haalt, deze in een variabele stopt en vervolgens de view teruggeeft.
Nu moeten we voor de laatste keer de doRequest functie aanpassen.
Vervolgens voegen we nog wat code toe aan Commentablepage.ejs.
Zoals u hier ziet staat er code tussen "<% %>", deze bevatten javascript. En als u goed kijkt ziet u ook "<%= %>"-tags staan, deze geven de waarde van een variabele weer.
Als we nog wat CSS toevoegen krijgen we uiteindelijk het volgende resultaat.
Proficiat.
U heeft uw eerste controller gemaakt.
Als u enige problemen ondervind neem dan cotact op met het Cody team.