Headless Drupal & Laravel | Een blog concept in Laravel gekoppeld aan een Drupal 8 REST API

14 Dec 2015

Joris Snoek
Digital Consultant
+31 (0)20 - 261 14 99

English translation

Ik hoorde de laatste tijd steeds meer geluiden over Laravel, het is een snel populair wordend PHP framework om web applicaties te bouwen. Om op de hoogte te blijven met deze hedendaagse techniek wilde ik het graag testen. Dus ik dacht: ik bouw een concept in Laravel, om te kijken hoe het werkt en ter vergelijking met Drupal 8.

Mijn doelen:

  • Een statische pagina, waarin de content uit een lokale database wordt geladen.
  • Een lijst met Blog items opbouwen, welke gevoed wordt uit een Drupal 8 RESTful API (die ik eerder voor Node.js bouwde).

Globale inhoud van dit blog:

  1. Introductie Laravel
  2. Laravels fundering
  3. Installeren van Laravel
  4. Routing in Laravel
  5. Laravel Migration: beheer van de database structuur
  6. Eloquent ORM: queriën van de database
  7. HTML templating in Laravel: Blade en Views
  8. Data laden uit een RESTful Drupal 8 API

1. Introductie Laravel

Benodigde Tools en kennis

Om mee te kunnen doen, zul je over deze basiskennis en tools moeten beschikken:

  • PHP: medior kennisnivo
  • HTML/CSS basis kennis
  • Goede code editor (IDE), ik gebruik PHPStorm
  • Een browser, bv Firefox

Wat is Laravel

  • Een PHP framework voor web applicaties
  • Ontwikkeld door Taylor Otwell
  • Eerste release: februari 2012
  • Open Source (MIT licentie)

Waarom Laravel

Volgens de bouwers is het een 'clean, modern web applicatie framework’, wat gebouwd is op andere grootse tools. Daarbij wordt gezegd dat Laravel ‘fun to code’ is.

Laravel is een MVC Framework

  • MVC = Model View Controller, een moderne structurering van web applicaties.
  • Model: applicatie data en functies
  • View: de zichtbare output, de HTML
  • Controller: interactie tussen gebruiker, model en view. In Laravel gefaciliteerd middels PHP.

Standaard tools in Laravel

  • Routing van binnenkomende requests
  • HTML templating (Blade)
  • Database definiëring en versiebeheer (Laravel’s Migrations en Eloquent ORM)
  • Authenticatie: inloggen gebruikers en beheren permissies.
  • E-mailing, met bijlagen

Laravel core is geen cms zoals Drupal 8

Laravel out of the box is geen cms, er is wel een cms component beschikbaar (October cms), maar in dit opzicht is Laravel niet te vergelijken met Drupal 8, wat in de core wél full blown cms functionaliteiten aanbiedt. Als je Laravel met Drupal wilt vergelijk zul je dat moeten doen op Drupal API nivo en niet op Drupal cms nivo.

2. Laravel’s fundering

Laravels fundering is gebouwd op sterkte componenten:

  1. Symfony voor core Laravel functies: oa simulatie, toegang tot bestanden en debugging. Drupal 8 gebruikt tevens Symfony componenten.
  2. Composer: een dependency manager waar honderden packages reeds beschikbaar zijn. (Soortgelijk aan NPM voor Node.js). Composer kan ook in Drupal 8 gebruikt worden, maar niet op nivo zoals Laravel dat doet: daar gebruikt Drupal 8 modules met YAML files voor.
  3. Eloquent ORM (Object Relational Mapper): object georiënteerd database management. Soortgelijk aan de Database abstraction layer in Drupal 8
  4. Migrations: database versiebeheer voor Laravel. Deze is soortgelijk aan soortgelijk aan de schema API in Drupal 8 en Migrations van Ruby on Rail Migrations.
  5. Blade: html templating systeem, Drupal 8 gebruikt Twig.

Laravel is dus een framework gebouwd op meerdere andere sterke frameworks, een toelichting per component:

2.1 Laravel fundering: Symfony

Symfony is een van de belangrijkste componentent in Laravel. Onder andere volgende Symfony componenten worden gebruikt in Laravel:

Toekomstige releases van Laravel
Laravel heeft aangekondigd in synch te blijven met toekomstige releases van Symfony.

Symfony gebruikers
Als je een Symfony gebruiker bent, kan je ook Laravel componenten inzetten.

2.2 Laravel fundering: Composer

Laravel maakt gebruik van Composer, een PHP dependency manager. De belangrijkste kenmerken:

  • Werkt op een ‘per project’ basis, niet globaal.
  • Werkt op Mac, Windows en Unix.
  • De dependencies worden gedefinieerd in een JSON bestand: composer.json. Composer kan je ook in Drupal 8 gebruiken. Tevens is deze aanpak soortgelijk aan de package.json in Node.js waar NPM ‘optreedt’ als Composer, zie ook.
  • Zie Packagist.org voor 3rd party packages welke je kunt gebruiken in Laravel door deze te installeren middels Composer.

2.3 Laravel fundering: Eloquent ORM

Eloquent ORM is Laravel’s database component, soortgelijk aan de Database abstraction layer in Drupal 8. ORM is een acroniem voor Object Relational Mapper. Het is ontwikkeld voor Laravel, maar kan ook daar buiten gebruikt worden. Het gebruikt een Active record pattern voor database CRUD acties. Het kan één-op-één, één-op-veel en veel-op-veel relaties faciliteren.

2.4 Laravel fundering: Migrations

Tabellen kunnen aangemaakt, gestructureerd en (versie) beheerd worden middels Laravel’s Migrations. Dit alles gebeurd middels code, niet configuratie.

2.5 Laravel fundering: Blade

Blade is Laravel’s html templating machine. Een Blade bestand sla je op met de extentie ‘.blade.php’. Variabelen in de template file kan je als volgt plaatsen: {{variabele}} (XSS gefilterd) of {!! variabele !!} (ongefilterd, [!] alleen gebruiken als je 100% weet wat je doet). Je kunt ook PHP functies en code gebruiken binnen in blade files. Blade ondersteunt tevens subtheming en conditional controls.

3. Installeren van Laravel

Ik werk op een Mac met OS X El Capitan. Huidige Laravel versie is 5.1, die ga ik gebruiken. Ga naar http://laravel.com/docs en volg de instructies:

  • Zorg dat je Composer geïnstalleerd hebt.
  • Zorg ervoor dat de directory ~/.composer/vendor/bin in je PATH staat, zodat het laravel commando overal beschikbaar is. Lees hier hoe.
  • Nu kan je middels het commando laravel new een verse Laravel installatie plaatsen. Ik ga nu naar mijn webroot en voer in laravel new blogconcept: een verse Laravel installatie wordt aangemaakt in de map /blogconcept:

De aangemaakt install:

  • Je krijgt een ‘applicatie key’, deze wordt onder andere gebruikt om data te versleutelen, zoals sessie-data.
  • Ga nu naar de Laravel installatie en voer volgende commando uit: php artisan serve om de Laravel server te starten. Artisan is Laravels command line omgeving.

Ga nu naar je browser en navigeer naar http://localhost:8000, je zou dit moeten zien:

4. Routing in Laravel

Routes worden gebruikt om binnenkomende page requests te faciliteren. Dit is soortgelijk aan Drupal 7’s hook_menu() en Drupal 8’s routing system. Je vindt de routes in /app/Http/routes.php:

Statische routes
In de routes.php zie je de standaard homepage gedefinieerd, welke je hierboven zag in de browser. Hier kan je je eigen routes toevoegen, een voorbeeld voor een pagina met statische informatie:

In een browser:

Dynamische routes
Routes zijn ook dynamisch op te bouwen, waarbij je werkt met variabelen:

Let op de dubbele quotes, die verplicht zijn om de variabele dynamisch uit te printen. Als je enkele quotes gebruikt print Laravel letterlijk {$person}.

In de browser:

5. Laravel Migrations: beheer van de database structuur

Allereerst heb je een database nodig, de standaard die hier gebruikt wordt is MySQL; ik maak een database aan genaamd ‘blogconcept’. Alle database instellingen staan in config/database.php:

In dit bestand kan je instellen:

  • Fetch style
  • Type database: mysql is de standaard, maar Laravel ondersteunt tevens sqlite, pgsql en sql server.
  • De database connecties, ik voer volgende in:

Je kunt tabellen handmatig beheren via bijvoorbeeld phpmyadmin, maar dat is niet aan te raden. Binnen Laravel kunnen tabellen/database structuur in code geprogrammeerd worden, wat flexibiliteit en versiebeheer geeft. ‘Database structure’ wordt ook wel ‘schema’ genoemd.

Door dit te beheren binnen Laravels Migration kunnen developers makkelijk elkaars databases in synch houden binnen een versiebeheersysteem zoals GIT. Zodat je tevens makkelijk een database wijziging kunt terug draaien.

Een voorbeeld: middels commando php artisan make:migration create_content_table maak ik de initiële migration file aan. In die aangemaakt file voeg ik code toe die database tabellen definieert:

Deze migration class bestaat uit twee methodes: up en down. Up wordt gebruikt om nieuwe tabellen aan te maken, down wordt gebruikt om de Up acties ongedaan te maken.

Voer commando php artisan migrate uit, welke de migration code zal toepassen et voila: de database tabellen worden aangemaakt:

Meer informatie: http://laravel.com/docs/5.1/migrations

6. Queriën van de database met Eloquent ORM

Ik heb voor nu handmatig even de zojuist aangemaakte tabellen gevuld met test content. Een simpel voorbeeld om deze data te queriën:

  • Maak een Model: php artisan make:model Content
  • Laravel maakt het model aan in de /app folder:
  • Het model heet ‘Content’ en geen ‘Contents’, Laravels is slim genoeg om die connectie zelf te maken.
  • Voeg volgende code toe in routes.php:

$content = App\Content::find(1) => Dit is alles wat nodig is om record met id=1 te querien uit de database tabel 'Contents', ook hier is Laravel slim genoeg om de link te leggen met ‘Contents’. Vervolgens worden alle velden uit dat record opgeslagen in object $content, welke je kunt doorgeven als variabelen naar een blade template.

Meer informatie: http://laravel.com/docs/5.1/eloquent#defining-models

7. HTML templating in Laravel: Views & Blade

Zoals eerder aangegeven wordt de HTML templating engine Blade gebruikt in Laravel. De HTML bestanden worden views genoemd, iets anders dan Drupal Views: dat zijn lijsten. Een voorbeeld van het gebruik hiervan zie je direct terug in de standaard installatie. Daarin wordt in routes.php op regel 15 de Laravel view ‘welcome’ aangeroepen: return view(‘welcome’);.

De views staan opgenomen in de map /resources/views, daar zie je tevens de standaard view ‘welcome.blade.php’ staan:

Een eigen dynamische view

Blade faciliteert het dynamisch vullen van HTML pagina’s. Een voorbeeld: ik maak een nieuw view bestand aan genaamd ‘about.blade.php’ en kopieer de HTML uit de welcome.blade.php:

In routes.php voeg ik volgende code toe:

Je ziet dat middels View::make() de ‘about’ view wordt aangeroepen. Waarbij een extra array wordt meegegeven waarin variabelen met content gedefinieerd worden, die eerder uit de database werd geladen.

Vervolgens kan ik die variabelen gebruiken in het Blade template:

In de browser:

FYI: meer over Blade templates.

8. Data uit een RESTful Drupal 8 API

Als voorbeeld gebruik ik de Drupal 8 API die ik eerder bouwde. De json output ziet er zo uit:

Ik ben eerst een tijdje aan het stoeien geweest met Composer packages Buzz & Guzzle, beide http clients. Die packages faciliteren veel meer dan alleen het opvragen van data uit een REStful API: POST requests, streamen van grote uploads, streaming van grote downloads, gebruiken van HTTP cookies, uploaden van JSON data, etc...

Dat is te veel overhead, voor nu kan ik voldoen met een standaard php functie: file_get_contents en json_decode:

  • Maak een nieuwe route aan: /blogs
  • Query de json data van de externe Drupal 8 RESTful API.
  • Loop door de json arrays data en bouw een nieuwe array op waar: key = url, value = blog titel
  • Render de Blade html view ‘blogs’.

Vervolgens kopieer ik een bestaande blade view en hernoem hem naar ‘blogs.blade.php’:

Ik loop in deze blade html view door de associative array heen en bouw op deze manier een lijst met de links op:

Opbouwen van de blog detailpagina

Als laatste wil ik graag bereiken dat als ik een link aanklik, de detailpagina van dat blog verschijnt:

  1. Maak een nieuwe route met een variabele
  2. Vraag de data op uit de Drupal 8 RESTful API.
  3. Zoek voor een match in de url variabele en een url in de json array uit de API.
  4. Wanneer match gevonden, bouw variabele op: de title en de body uit van het gematchte item.
  5. Render de html middels een blade view.

In een browser:

Zoals je ziet moet er nog veel gedaan worden aan styling, maar voor dit puur een functioneel concept, dus ik laat het even zo voor nu.

Wrap up

Ok, that’s it for now. Dit is slechts een introductie, waarin ik een concept produceerde. Veel geavanceerd onderdelen van Laravel zijn nog niet aan bod gekomen, zoals het onderbrengen van de logica-code die ik /routes.php plaatste naar Models en Controllers. Ik ben van plan hierop verder te gaan in een vervolg blog. Vragen of feedback, let me know!

-- Cheers, Joris

Comments

Nóg meer
kennis nodig?

Check ons ons blog archief >