Skip to content

Instantly share code, notes, and snippets.

@OlivierParent

OlivierParent/Drupal

Last active August 29, 2015 14:15
Show Gist options
  • Save OlivierParent/f9f3b962d0af3b0954fa to your computer and use it in GitHub Desktop.
Save OlivierParent/f9f3b962d0af3b0954fa to your computer and use it in GitHub Desktop.
Download ZIP
Drupal.md
Raw
Drupal
MMA - Drupal
============
| MMA | Informatie |
| -------------------:|:--------------------------------------------------------- |
| Opleidingsonderdeel | Multimedia-applicaties (Multimediatoepassingen GMB) |
| Academiejaar | 2014-2015 |
| Docent | [Olivier Parent](http://www.olivierparent.be/) |
| Instelling | [Arteveldehogeschool](http://www.arteveldehogeschool.be/) |
| Opleiding | Bachelor in de grafische en digitale media |
| Afstudeerrichting | Grafimediabeleid |
| Keuzeoptie | Crossmedia |
----------
[TOC]
----------
I. Inleiding
------------
### Ontstaan
In januari **2001** lanceerde [Dries Buytaert](http://buytaert.net), als student informatica aan de [Universiteit Antwerpen](http://uantwerpen.be), het opensource <abbr title="Content Management System">CMS</abbr> [Drupal](https://www.drupal.org).
In **2007** werd hij medeoprichter en <abbr title="Chief Technology Officer">CTO</abbr> van [Acquia](https://www.acquia.com/nl). Een Amerikaanse startup die commerciële ondersteuning biedt voor Drupal.
In **2008** promoveerde hij aan de [Universiteit Gent](http://ugent.be) tot *<abbr title="Doctor of Philosophy">PhD</abbr> in de ingenieurswetenschappen: Computerwetenschappen* met de thesis *Profiling techniques for Java performance analysis and optimization*.
In **2015** zal [Drupal 8](https://www.drupal.org/drupal-8.0) gelanceerd worden. In deze zeer grondig gewijzigde versie worden voor het eerst [Symfony](http://symfony.com) componenten en de [Twig](http://twig.sensiolabs.org) Templating Language gebruikt.
### Populariteit
De **top 3** van CMS'en:
1. WordPress
2. Joomla!
3. Drupal
Bronnen:
- [opensourcecms.com](http://www.opensourcecms.com/general/cms-marketshare.php)
- [w3techs.com](http://w3techs.com/technologies/overview/content_management/all)
- http://trends.builtwith.com/cms
- https://cmsusage.com
II. Installatie
---------------
We gebruiken [Artevelde Laravel Homestead](http://github.com/OlivierParent/homestead) als ontwikkelomgeving. Start de Vagrant Box op en meld je aan:
$ vagrant up
$ vagrant ssh
vagrant@homestead$ _
### 1. Mappen
Na het aanmelden op de Vagrant Box gaan we eerst naar de map `Code` die in de thuismap (`~`) staat (als je al in deze map bent mag je `~/` weglaten) met de opdracht `cd` *(Change Directory)*.
vagrant@homestead$ cd ~/Code/
Daarna maken we de map `database` aan met de opdracht `mkdir` *(Make Directory)* en de optie `--parents` (of korter `-p`), zodat ook de bovenliggende mappen *(Parent Directories)* `www` en `mma.arteveldehogeschool.local` zo nodig aangemaakt worden:
vagrant@homestead$ mkdir --parents mma.arteveldehogeschool.local/www/database/
Vervolgens gaan we naar de `www` map:
vagrant@homestead$ cd mma.arteveldehogeschool.local/www/
> **Tip:** Gebruik de `<tab>` toets om (bestaande) mapnamen automatisch aan te vullen en de pijltjestoetsen `<up>` of `<down>` om doorheen de CLI-history te gaan!
Het resultaat (Met het opdracht `vagrant@homestead$ tree -d Code`, maar daarvoor moet je eerst **Tree** installeren met `vagrant@homestead$ sudo apt-get install tree`):
Code
└── mma.arteveldehogeschool.local
└── www
├── database
└── drupal
### 2. Database
Drupal gebruikt een **MySQL** database, maar ook PostgreSQL of SQLite behoren tot de opties.
#### 2.1 Nieuwe Databasegebruiker
##### 2.1.1 Aanmelden als Databasebeheerder
Meld je aan op de databaseserver als **databasebeheerder** met onderstaande gegevens.
| Databasebeheerder | Databasewachtwoord |
|-------------------|--------------------|
| `homestead` | `secret` |
Daarvoor gebruiken we deze opdracht:
vagrant@homestead$ mysql --user=homestead --password
password: _
mysql> _
> **Tip:** Je kan onmiddellijk aanmelden door het wachtwoord op te geven.
>
> vagrant@homestead$ mysql --user=homestead --password=secret
>
> **OPGELET:** Dit is een **veiligheidsrisico** want het wachtwoord is zichtbaar in de CLI-history!
##### 2.1.2 Nieuwe databasegebruiker aanmaken
> **Opgelet:** De **databasegebruiker** is de gebruiker waarmee Drupal een verbinding maakt met de database. Dit is geen Drupalgebruiker!
We maken een databasegebruiker aan met onderstaande gegevens.
| Databasegebruiker | Databasewachtwoord |
|-------------------|--------------------|
| `mma_db_user` | `mma_db_password` |
Daarvoor gebruiken we deze opdracht:
mysql> GRANT ALL PRIVILEGES ON `mma_arteveldehogeschool_be`.*
-> TO 'mma_db_user' IDENTIFIED BY 'mma_db_password';
> **Tip:** Je kan ook een hostnaam of IP-adres toevoegen, bijvoorbeeld:
>
> * `'mma_db_user'@'%'`
> * `'mma_db_user'@'127.0.0.1'`
> * `'mma_db_user'@'localhost'`
>
> De standaardwaarde is `%` en dat wil zeggen om het even welke host of om het even welk IP-adres. Omdat `@'%'` de standaard is, mag het weglaten worden.
##### 2.1.3 Afmelden
Meld je af als databasebeheerder met:
mysql> exit
Bye
vagrant@homestead$ _
#### 2.2 Database Aanmaken
##### 2.2.1 Aanmelden als Databasegebruiker
We melden ons aan als de databasegebruiker die we daarnet aangemaakt hebben.
vagrant@homestead$ mysql --user=mma_db_user --password
password: _
mysql> _
##### 2.2.2 Database Aanmaken
We gaan een database aanmaken met de naam `mma_arteveldehogeschool_be`
mysql> CREATE DATABASE IF NOT EXISTS `mma_arteveldehogeschool_be`
-> CHARACTER SET utf8
-> COLLATE utf8_general_ci;
Bekijk alle databases met:
mysql> SHOW DATABASES;
##### 2.2.3 Afmelden
Meld je af als databasegebruiker met:
mysql> exit
Bye
vagrant@homestead$ _
#### 2.3 Database Backuppen en Terugzetten
##### 2.3.1 Database Backup
Meld je aan op de server en voer onderstaande opdracht uit:
vagrant@homestead$ mysqldump --user=mma_db_user --password=mma_db_password --databases mma_arteveldehogeschool_be > ~/Code/mma.arteveldehogeschool.local/www/database/dump.sql
> **Tip:**
>
> Je kan databasedumps ook een timestamp geven, als je een historiek wil bijhouden:
>
> vagrant@homestead$ mysqldump --user=mma_db_user --password=mma_db_password --databases mma_arteveldehogeschool_be > ~/Code/mma.arteveldehogeschool.local/www/database/dump_$(date +"%Y-%m-%d_%H%M%S").sql
##### 2.3.2 Database Terugzetten
vagrant@homestead$ mysql --user=mma_db_user --password=mma_db_password mma_arteveldehogeschool_be < ~/Code/mma.arteveldehogeschool.local/www/database/dump.sql
### 3. Broncode
We gaan versie `8.0` installeren in de map
`~/Code/mma.arteveldehogeschool.local/www/drupal/`
Deze map is in [Artevelde Laravel Homestead](http://github.com/OlivierParent/homestead) al automatisch gekoppeld aan de domeinnaam http://www.mma.arteveldehogeschool.local
> **Mappenstructuur**
>
> /home/vagrant/Code/mma.arteveldehogeschool.local/
> └── www/
> ├── database/
> └── drupal/
> ├── core/
> ├── modules/
> ├── profiles/
> ├── sites/
> ├── themes/
> └── index.php
#### 3.1 Broncode downloaden
Je kan de broncode downloaden van [drupal.org](https://www.drupal.org) en het bestand decomprimeren in de map `drupal`.
#### 3.2 Alternatieve manieren
Je kan Drupal ook installeren vanaf de Command-Line Interface.
##### 3.2.1 Installeren met Drush
> **Zie ook**
>
> - [Drush Docs](http://www.drush.org/)
[Drush](https://github.com/drush-ops/drush) is de Drupal <abbr title="Command-Line Interface">CLI</abbr>-tool.
vagrant@homestead$ composer global require drush/drush:dev-master
vagrant@homestead$ drush --version
De laatste versie van Drupal 8 installeren is eenvoudig met Drush:
vagrant@homestead$ cd ~/Code/mma.arteveldehogeschool.local/www/
vagrant@homestead$ drush dl drupal-8
We gaan de naam van de map `drupal-8.0.0-beta6` wijzigen in `drupal` met de `mv` *(Move)* opdracht:
vagrant@homestead$ mv drupal-8.0.0-beta6/ drupal/
##### 3.2.2 Installeren met cURL
Een andere manier is met `curl`
vagrant@homestead$ cd ~/Code/mma.arteveldehogeschool.local/www/
vagrant@homestead$ curl http://ftp.drupal.org/files/projects/drupal-8.0.0-beta6.tar.gz | tar zx
We gaan de naam van de map `drupal-8.0.0-beta6` wijzigen in `drupal` met de `mv` *(Move)* opdracht:
vagrant@homestead$ mv drupal-8.0.0-beta6/ drupal/
#### 3.3 Configuratie
Eens de broncode geïnstalleerd, gaan we naar
http://www.mma.arteveldehogeschool.local/
##### 3.3.1 Taal selecteren
Kies **Nederlands** en klik daarna op **Save and continue**.
##### 3.3.2 Profiel kiezen
Kies **Standaard** en klik daarna op **Opslaan en doorgaan**.
##### 3.3.3 Database instellen
Kies ***MySQL, MariaDB, Percona Server, of gelijkwaardig*.
| Veld | Waarde |
|----------------------------|------------------------------|
| **Databasenaam** | `mma_arteveldehogeschool_be` |
| **Databasegebruikersnaam** | `mma_db_user` |
| **Databasewachtwoord:** | `mma_db_password` |
En klik op **Opslaan en doorgaan**.
##### 3.3.4 Website instellen
| Veld | Waarde |
|---------------------------|-------------------------------------|
| **Naam van de website** | `www.mma.arteveldehogeschool.local` |
| **E-mailadres website** | `mma@arteveldehs.be` |
| **Gebruikersnaam** | `mma_gebruiker` |
| **Wachtwoord** | `mma_wachtwoord` |
| **Wachtwoord bevestigen** | `mma_wachtwoord` |
| **E-mailadres** | `mma@arteveldehs.be` |
| **Standaardland** | `België` |
En klik op **Opslaan en doorgaan**.
III. Gebruik
------------
### 1. Instellingen
**Beheer** → **Instellingen** → **Systeem** → **Websitegegevens**
**Beheer** → **Instellingen** → **Ontwikkeling** → **Onderhoudsmodus**
### 2. Personen
#### 2.1 Rollen
Alle **Personen** *(People)*, de gebruikers van de website, krijgen een of meer **Rollen** *(Roles)* toegewezen.
> **Beheer** → **Personen** → **Rollen**
Er zijn 3 **standaardrollen**:
- **Anonymous User**
Niet-aangemelde gebruiker, een bezoeker dus.
- **Authenticated User**
Aangemelde gebruiker.
- **Administrator**
Beheerder.
Je kan zelf ook rollen toevoegen.
#### 2.2 Toegangsrechten
Per rol zijn er **Toegangsrechten** *(Permissions)* bepaald. Deze kunnen aangepast worden.
> **Beheer** → **Personen** → **Toegangsrechten**
#### 2.3 Lijst
Alle **personen** *(people)* die gegistreerd werden worden hier opgelijst per rol.
> **Beheer** → **Personen** → **Lijst**
Je kan zelf Gebryujer
### 3. Inhoudtypes *(Content Types)*
Een stukje inhoud noemt men in Drupal een **Node**. Elke node heeft een identificatienummer (ID) en kan opgevraagd worden met een <abbr title="Uniform Resource Identifier">URI</abbr> zoals:
http://www.mma.arteveldehogeschool.local/node/3
In bovenstaand voorbeeld wordt de node met ID 3 opgevraagd. Omdat dit soort URI's niet zo gebruiksvriendelijk zijn, kan je een **alias** toevoegen aan de node. In plaats van bijvoorbeeld `/node/3` is de URI dan `/mijn_alias`.
Elke node heeft een bepaald **inhoudtype**.
Alle inhoud kan op de **Voorpagina** *(Front page)* getoond worden: http://www.mma.arteveldehogeschool.local/node/
> **Beheer** → **Instellingen** → **Systeem** → **Websitegegevens** → **Voorpagina**
#### 3.1 Artikel *(Article)*
**Artikel** is een inhoudtype voor inhoud die vaak wijzigt en die geklassificeerd moet worden. Typische voorbeelden:
- nieuwsberichten
- blogposts
- personen
Artikels worden meestal antichronologisch gesorteerd.
Een artikel wordt standaard op de Voorpagina getoond.
> **Opdracht:** Maak twee blogberichten.
#### 3.2 Eenvoudige pagina *(Basic page)*
**Eenvoudige pagina** is een inhoudtype dat gebruikt wordt voor statische inhoud. Inhoud die zelden of nooit wijzigt.
Je kan nog extra opties instellen:
- **Menu-instellingen**
Toon de pagina in het menu? En zo ja, in welke volgorde.
- **URL Path Settings**
Maak een url-alias aan voor de pagina, bijvoorbeeld `http://www.mma.arteveldehogeschool.local/node/3` wordt `http://www.mma.arteveldehogeschool.local/over`.
- **Auteursinformatie**
- **Promotie-opties**
Moet de pagina op de voorpagina komen?
> **Opdracht:** Maak een pagina **Over de auteur** met als alias **over**.
Een eenvoudige pagina wordt standaard **niet** op de Voorpagina getoond.
> **Bronnen**
>
> - [Drupal 8](https://www.drupal.org/drupal-8.0)
> - [Drupal 8 API](https://api.drupal.org/api/drupal/8)
> - [Drupal with Nginx](https://github.com/perusio/drupal-with-nginx)
IV. Themaontwikkeling
---------------------
### 1. Wat is een Thema?
> **Bronnen**
>
> - [Drupal 8 Theme Guide](https://www.drupal.org/theme-guide/8)
Een **Thema** *(Theme)* bepaalt de *look and feel* en ook een deel van de functionaliteiten van een Drupal-website. Je kan één van de meer dan 2100 thema's downloaden van [Drupal.org](https://www.drupal.org/project/project_theme) of je kan zelf een eigen thema maken.
Thema's beheren:
**Beheer** → **Uiterlijk**
> **Mappenstructuur**
>
> /home/vagrant/Code/mma.arteveldehogeschool.local/
> └── www/
> └── drupal/
> └── core/
> | └── themes/
> | ├── bartik/
> | ├── classy/
> | ├── seven/
> | └── stark/
> └── themes/
> └── arteveldehogeschool/
#### Core Themes
In Drupal zijn er al een aantal thema's in de Drupal Core voorzien die in de map `drupal/core/themes/` staan.
- **Bartik** (het standaardthema)
- **Classy** (het nieuw minimalistisch thema in Drupal 8, bedoeld als basisthema)
- **Seven** (beheerthema)
- **Stark** (het oorspronkelijk minimalistisch thema, bedoeld als basisthema)
#### Contributed Themes
Daarnaast kan je je eigen thema's maken of zogenaamde *Contributed Themes* downloaden en die komen in de map `drupal/themes/` te staan.
### 2. Wat is een childthema?
Je kan natuurlijk een eigen thema volledig van nul schrijven, maar het is meestal beter om te vertrekken van een bestaand thema en alleen die delen aan te passen die echt nodig zijn. Je maakt dan een childthema van een bestaand parentthema. Het childthema erft dan alles over van het parentthema. In drupal kan je eindeloos laten overerven. Een childthema kan dus op zijn beurt opnieuw als parenthese gebruikt worden.
Naast het voordeel van niet alles opnieuw te moeten maken is een ander groot voordeel dat parentthema's geüpdatet kunnen worden, en dat die updates ook in het childthema gebruikt worden zonder dat je eigen wijzigingen verloren gaan.
> **Mappen en bestanden**
>
> /home/vagrant/Code/mma.arteveldehogeschool.local/
> └── www/
> └── drupal/
> └── themes/
> └── arteveldehogeschool/
> ├── css/
> ├── images/
> ├── js/
> ├── templates/
> ├── arteveldehogeschool.info.yml
> ├── arteveldehogeschool.libraries.yml
> ├── favicon.ico
> ├── logo.svg
> └── screenshot.png
### Sjablonen *(Templates)*
De HTML van een Thema wordt gedefinieerd met behulp van sjablonen geschreven in de [Twig](http://twig.sensiolabs.org) Templating Language. Deze nieuwe taal vervangt PHP voor het schrijven van sjablonen. Omdat de Syntaxis van PHP nogal wat gelijkenissen met HTML vertoont was het lezen van sjablonen nogal ingewikkeld. De vereenvoudigde syntaxis van Twig zou dit een stuk makkelijker moeten maken. Een Themaontwerper hoeft nu in principe geen PHP meer te kennen, maar enkel Twig.
Twig-sjablonen worden eenmalig door Drupal omgezet naar PHP-bestanden die opgeslagen worden in de **cache**. Zo moet de omzetting die nogal processorintensief is, niet bij elk paginabezoek te gebeuren, wat er voor zorgt dat de pagina's sneller laden. Bij elke verandering aan de sjablonen moet die omzetting opnieuw gebeuren. Dit forceer je door de cache te legen:
**Beheer** → **Instellingen** → **Ontwikkeling** → **Prestaties** → **Alle caches legen**
Om een sjabloon aan te passen in je eigen Thema, zoek je een sjabloon op in het parentthema en kopieer je dit naar je eigen thema. Vervolgens pas je het sjabloon aan en leeg je de caches.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment