Drupal

Hier vinden jullie de cursus bij de opleiding Drupal 7 bij CVO Cervo-GO. Omdat Drupal 7 enorm snel evolueert, is er geen kant-en-klare cursus, maar wordt deze rubriek week na week aangevuld met nieuwe hoofdstukken. Tegen het eind van de opleiding zullen de eerste hoofdstukken waarschijnlijk alweer gedateerd zijn. Naar analogie met Drupal is het cursusmateriaal vrij te gebruiken en verspreiden, mits bronvermelding.

Voor de opleiding is geen voorkennis vereist, dit is een beginnerscursus. We starten van nul en leren gaandeweg niet alleen Drupal gebruiken, maar ook de basis van HTML en CSS om Drupal verder naar onze eigen wens aan te passen.

Inleiding

In dit hoofdstuk bekijken we wat een content management system (CMS) precies is, en wat je met een CMS in het algemeen en Drupal specifiek allemaal kan doen.

Wat is een content management system?

Een content management systeem (Nederlands: inhouds-beheersysteem maar we spreken kortweg van een CMS) is een softwarepakket dat middelen voorziet om inhoud op een website in te voeren, te publiceren en te beheren. "Inhoud" kan vanalles zijn: een nieuwsartikel, blog post, foto's, videos, muziek, kaarten, enz. Kort samengevat  is inhoud elke combinatie van tekst en multimedia die een bezoeker van de website zal lezen, zien of horen.

Een CMS heeft doorgaans een aantal functies die het aanmaken, beheren en onderhouden van een website vergemakkelijken, zoals:

  • Een zogenaamde backend of administratieve interface waarop je kan inloggen en zaken kan doen die een gewone bezoeker niet kan
  • Een database waarin de inhoud opgeslagen wordt
  • Een systeem waarbij de inhoud uit de database netjes op de website weergegeven wordt
  • Functies om de inhoud aan te maken en te bewerken
  • Functies om de navigatie op een website te beheren, zoals een menu
  • Functies om het uiterlijk van een website aan te passen, zoals thema's en templates
  • Een systeem om gebruikers te registreren en te beheren
  • Interactieve functies zoals formulieren, forums, commentaren, wikis en polls
  • Een e-commerce systeem om een online winkel op te zetten
  • ...

Er bestaat honderden CMS'en, gaande van eenvoudige systemen om te bloggen zoals Wordpress tot complexe systemen die voor praktisch ieder type website gebruikt kunnen worden, zoals Drupal.

Wat is Drupal?

Drupal is een gratis en open-source CMS geschreven in PHP en valt onder de zgn. GNU General Public License, wat erop neerkomt dat iedereen de software vrij mag verspreiden en aanpassen. Drupal werd oorspronkelijk ontwikkeld door de Belg Dries Buytaert die een systeem zocht om nieuws en evenementen met vrienden te delen. In 2001 werd Drupal open-source, waarna er een community ontstond rond Drupal die meehielp met het ontwikkelen van de software. Ondertussen is Drupal één van de meest gebruikte pakketten om websites te bouwen en wordt het systeem wereldwijd gebruikt op miljoenen websites.

In zijn eenvoudigste vorm bestaat Drupal uit de zgn. Drupal core (kern), die uit enkele basismodules bestaat om een eenvoudige website aan te maken. Met Drupal core kan je bvb een nieuwssite of blogsite met een forum en polls aanmaken. De kern van Drupal kan uitgebreid worden met duizenden verschillende modules (of contrib-modules) die allerlei functionaliteit aan de kern toevoegen en waardoor er meer complexe websites gemaakt kunnen worden, zoals een sociaal netwerk of een online winkel.

Voorbeelden van Drupal sites

Enkele voorbeelden van bekende en drukbezochte websites die op basis van Drupal gemaakt zijn: vtm.be, iwatch.be, stubru.be, ketnet.be, gaultmillau.be en vele anderen. Je kan vaak aan bepaalde kenmerken van een site al zien of die op Drupal gebaseerd is, bvb het formulier om in te loggen.

Wat heb je nodig om een Drupal-site op te zetten?

Iedere Drupal-site is een dynamische website. Dit houdt in dat een pagina pas wordt samengesteld op het ogenblik dat die door de bezoeker opgevraagd wordt. Dit in tegenstelling tot een statische website waarbij de pagina's vast gemaakt zijn in HTML en in principe nooit veranderen. Bij het opvragen van een Drupal-pagina gebeurt er veel meer dan je in eerste instantie zou denken: de nodige gegevens worden uit de database gehaald, de PHP code zorgt voor de verwerking van de gegevens en de templates gieten de gegevens in een leesbare vorm die via het thema weergegeven wordt aan de bezoeker. Onderstaande afbeeldingen geven een eenvoudige schematische weergave van het proces.

We hebben dus meer nodig dan een standaard webruimte, zoals die vaak in een internet abonnement inbegrepen is. M.a.w. je kan geen Drupal sites installeren op de standaard webruimte van Telenet, Skynet of andere provider. Je zal je moeten wenden tot een betalende dienst zoals one.com.

Om de opleiding bij Cervo-GO te volgen heb je geen betalende dienst nodig, vermits we in de les alles lokaal doen. We installeren m.a.w. de webserver (Apache), PHP en de database (MySQL) op onze computer. We werken hiervoor met het pakket USBWebserver, wat toelaat om alles eenvoudig te installeren op een USB-stick, zodat je de gemaakte websites mee naar huis kan nemen. Meer hierover in het volgende hoofdstuk.

Installatie

In dit hoofdstuk installeren we USBwebserver en Drupal.

USBwebserver downloaden en installeren

  1. Ga naar de site http://www.usbwebserver.net/nl/ en klik bovenaan in het menu op Download.
  2. Klik op USBWebserver V8.2 (Nederlands) en sla het bestand op op de harde schijf. Dit is een ZIP-bestand
  3. Maak eerst een nieuwe map op je USB-stick of ergens op de harde schijf. Noem de map usbwebserver.
  4. Dubbelklik op het ZIP-bestand en pak het uit in de map usbwebserver.
  5. Dubbelklik op usbwebserver.exe om de webserver op te starten.

USBWebserver gebruiken

In de rubriek Algemeen zie je enkele knoppen:

  • Root dir: met deze knop wordt de verkenner geopend in de root dir "hoofdmap" van de webserver. In deze map komen de Drupal-bestanden te staan.
  • Localhost: met deze knop wordt de browser gestart en de lokale website weergegeven. Standaard is dit het adres http://localhost:8080/
  • PHPMyAdmin: met dit programma (geschreven in PHP) kan je de MySQL database beheren. 
  • www.usbwebserver.com: een link naar de website van het programma

In de rubriek Apache kan je de webserver stoppen en starten, het logboek van de webserver bekijken en de instellingen van de webserver aanpassen.

In de rubriek Mysql kan je de database stoppen en starten en de instellingen voor de database aanpassen.

In de rubriek Instellingen kan je de algemene instellingen van USBwebserver aanpassen, zoals de locatie van de root-map en de poort van de webserver.

Drupal downloaden

  1. Ga naar de officiële site op http://www.drupal.org en klik bovenaan in het menu op Download & Extend.
  2. Klik vervolgens op Download Drupal 7.7
  3. Je komt nu op de projactpagina van Drupal core terecht. Scroll naar onderaan de pagina en klik op de ZIP-link naast versie 7.7
  4. Sla het bestand op op de harde schijf.
  5. Dubbelklik op het ZIP-bestand en pak het uit in de map usbwebserver/root
  6. Hernoem de uitgepakte map van drupal-7.7 naar drupal.

Je kan nu de Drupal site bezoeken op het adres http://localhost:8080/drupal

Drupal installeren

  1. Bezoek je nieuwe Drupal site, je komt onmiddellijk in de installatie-wizard terecht. Voorlopig is alles nog in het Engels. Kies voor een Standard installatie.
  2. We gaan de taal nu nog niet instellen, dus laat het op English en ga verder
  3. Normaal gezien wordt de stap Verify requirements overgeslagen vermits alle benodigdheden (Webserver, PHP, database) in de USBWebserver zitten. We komen bij de database-instellingen terecht. Hiervoor moeten we eerst een nieuwe database aanmaken met PHPMyAdmin. 
  4. Ga terug naar USBwebserver en klik in de rubriek Algemeen op PHPMyAdmin.
  5. Log in op PHPMyAdmin met de gegevens die eronder staan: gebruikersnaam root, wachtwoord usbw.
  6. Maak een nieuwe database met naam drupal en klik op aanmaken.
  7. We gaan geen tabellen aanmaken in deze database, Drupal zal dit automatisch doen. In de praktijk is het veiliger om nog een aparte gebruiker voor de database aan te maken, maar vermits we lokaal werken kan het in dit voorbeeld geen kwaad om de standaardgebruiker root te gebruiken.
  8. Sluit PHPMyAdmin en keer terug naar de Drupal installatie. Vul nu de gegevens in:
    Database name: drupal
    Database username: root
    Database password: usbw
    Klik op Advanced options. De standaardpoort voor een MySQL-database is 3306, maar USBWebserver gebruikt de poort 3307 om conflicten te vermijden. Dit moeten we hier aanpassen. Vul dus in:
    Database port: 3307
  9. De database tabellen worden nu aangemaakt en de standaardmodules worden geïnstalleerd.
  10. Tenslotte moeten we nog wat gegevens invullen omtrent de site en een eerste gebruikersaccount aanmaken. De eerste gebruikersaccount van een Drupal site is automatisch een administrator die alles kan aanpassen. Ik gebruikte onderstaande gegevens. Vergeet vooral je paswoord niet!

Drupal core is nu geïnstalleerd! Klik op de link om de site te bezoeken.

In het volgende hoofdstuk veranderen we de taal van Engels naar Nederlands.

Drupal in het Nederlands

Nu Drupal succesvol geïnstalleerd is kunnen we de configuratie aanpassen naar onze wensen. We kunnen bvb Nederlands als standaardtaal instellen. Het vertalen van Drupal gebeurt door vrijwilligers en er zijn regelmatig updates te vinden op de website http://localize.drupal.org/. Op deze website kan je ook zien hoeveel van Drupal core al in een bepaalde taal vertaald is.

In principe moeten we die vertalingen regelmatig downloaden en kopieren naar de Drupal map, maar er bestaat ook een module Localization update in contrib waarmee we het downloaden kunnen automatiseren. In dit hoofdstuk doen we het volgende:

  • De standaardtaal naar Nederlands veranderen mbv de modules locale en content translation
  • De contrib module localization update downloaden en installeren
  • De Nederlandse vertalingen voor alle modules downloaden

De standaardtaal veranderen

Bij een standaardinstallatie wordt de module content translation niet geactiveerd. Als we de website in een andere taal willen weergeven dienen we dit eerst te doen. De core-module content translation hangt af van de core-module locale, dus die zullen we ook moeten activeren. Ga als volgt te werk:

  1. Klik bovenaan in het administratiemenu op Modules. Vink de module content translation aan. Je ziet bij de informatie dat deze module afhangt van de module locale, dus vink deze ook aan en sla op.
  2. Klik bovenaan op Configuration en dan op de link Languages om de talen te bewerken. Klik vervolgens op Add language.
  3. Kies Dutch (Nederlands) uit de lijst en klik op Add language.
  4. Stel Nederlands in als default (standaard) language en sla op.

 

Vertalingen downloaden met localization update

Deze module zit niet in Drupal core en moeten we apart downloaden. De pagina van de module staat op http://drupal.org/project/l10n_update. Het downloaden en installeren van deze module is gelijkaardig aan de installatie van andere modules. Ga als volgt te werk:

  1. Ga naar de pagina http://drupal.org/project/l10n_update (of zoek bvb op Google naar drupal localization update).
  2. We gebruiken Drupal 7, dus we kiezen voor de Recommended 7.x versie, in dit geval 7.x-1.0-beta2. Vermits we de update via Drupal zelf gaan installeren, kiezen we niet voor de zip-versie, maar voor de tar.gz-versie. We gaan dit bestand ook niet opslaan zoals bij Drupal core, maar we gaan de link naar het bestand kopieren.
    Klik met de rechtemuisknop op tar.gz en kies voor snelkoppeling kopieren of linkadres kopieren of URL kopieren, afhankelijk van de browser die je gebruikt.
  3. Ga terug naar het onderdeel Modules van je Drupal site en klik bovenaan op install new module.
  4. Plak het gekopieerde linkadres in het vak Install from a URL en klik op Install.
  5. De module wordt geïnstalleerd. Klik na de installatie op Enable newly added modules om de module te activeren. Controleer daarna op de pagina Modules of de module geactiveerd is.
  6. Klik bovenaan op Configuration en kies voor Translate interface. Kies op deze pagina voor het tabblad Update. Klik op deze pagina onderaan op Update translations.
  7. De vertalingen worden nu gedownload. Daarna verschijnt de website in het Nederlands.

Er zijn regelmatig nieuwe vertalingen beschikbaar dus regelmatig de vertalingen opnieuw downloaden kan geen kwaad. Ook bij de installatie van nieuwe modules worden vanaf nu de Nederlandstalige vertalingen automatisch gedownload. Hou er wel rekening mee dat niet alle contrib modules goed vertaald zijn, maar je kan ook zelf teksten vertalen in de rubriek Instellingen > Interface vertalen.

Werken met inhoud

Een website zonder inhoud is als een café zonder bier of een boek zonder tekst in. Inhoud maakt een website interessant en uniek, en zorgt ervoor dat bezoekers terugkomen naar de website.

In de inleiding kon je lezen dat inhoud in essentie een combinatie is van tekst, foto's, video, geluid en andere multimedia. Een specifiek stuk inhoud kan verschillende vormen aannemen, bvb een nieuwsbericht, een blog post, een productomschrijving, een pagina met informatie over een bedrijf, een forumbericht, een foto of een evenement, om maar enkele te noemen.

In Drupal bestaat een inhoudstype doorgaans uit een titel en een stuk tekst, maar dit kan eenoudig aangevuld worden met extra "velden" waarin andere relevante informatie opgenomen kan worden. Een typisch voorbeeld is een activiteit: behalve een titel en omschrijving is ook een datum voor de activiteit nuttig. Als we de datum in een apart veld opslaan kunnen we de activiteit bvb eenvoudig weergeven op een kalender of een chronologische lijst met activiteiten genereren. Andere nuttige velden voor activiteiten zijn de locatie, een kaart of een foto.

 

Drupal core voorziet standaard twee inhoudstypes, een artikel en een pagina. In essentie zijn alle inhoudstypes gelijk, maar het gebruik ervan verschilt.

Een artikel is bedoeld om een stuk inhoud weer te geven dat tijdsgebonden is, zoals een nieuwsbericht of blog post. Deze inhoud wordt standaard op de voorpagina weergegeven. Het is de bedoeling dat je regelmatig nieuwe artikels op de site plaatst.

Een pagina is "vast" stuk inhoud, bvb een pagina met adresgegevens of een pagina met een voorstelling van het bedrijf. Een pagina wordt vaak in een menu weergegeven.

Inhoud aanmaken met Drupal

In dit voorbeeld maken we ons eerste artikel aan.

  1. Klik bovenaan op Inhoud. Er is nog geen inhoud, klik op "inhoud toevoegen".
  2. Kies voor een artikel.
  3. Geef het artikel een titel en vul de tekst in bij body. Klik onderaan op Opslaan.
  4. Het artikel wordt opgeslaan en weergegeven

Extra velden gebruiken

  1. Maak opnieuw een artikel met titel Opleiding Drupal bij Cervo-GO
  2. Geef het artikel de volgende tags: drupal, cervo-go, cvo, les
    Tags zijn trefwoorden waarmee je de inhoud van je site beter kan organiseren (zie later bij taxonomie).
  3. Vul bij de body wat tekst in over de opleiding.
  4. Kies nog een afbeelding om aan het artikel toe te voegen, bvb het logo van Drupal of Cervo-GO. Klik eerst op Bestand kiezen en kies een bestand op je harde schijf. Vergeet niet om een alternatieve beschrijvende tekst in te voeren voor de afbeelding, zeker niet als je bezoekers hebt met een visuele beperking.
    Klik vervolgens op Uploaden.
  5. Sla het artikel op. De afbeelding en de tags worden netjes weergegeven

Standaardweergave en teaser

Drupal kan dit artikel (en elke vorm van inhoud) op verschillende maniere weergeven. Op de homepage wordt het artikel als teaser weergegeven. Hier wordt de lengte van het artikel beperkt (standaard tot 600 tekens) en worden afbeeldingen kleinder weergegeven. Klik je op de titel van het artikel of de link Lees meer, dan zie je de standaardweergave met de volledige tekst en een grotere afbeelding.

Inhoud bewerken

Aangemaakte inhoud bewerken kan op verschillende manieren:

  • In de standaardweergave zie je een tabblad bewerken
  • In de teaser-weergave klik je op het tandwiel-icoontje en kies dan bewerken.
  • In de lijst met inhoud staat er een link bewerken naast ieder item.

Vul het artikel aan met nog enkele zinnen en geef als extra tag de vestiging waar de opleiding plaats heeft (bvb De Panne of Gistel).

Opties voor inhoud

Bij het aanmaken en bewerken van inhoud vind je onderaan nog een vak met meer opties. Met deze opties kan je o.a. bepalen of er een menu-item moet aangemaakt worden, of de inhoud op de voorpagina moet weergegeven worden, enz.

Menu-instellingen

In sommige gevallen zal je willen dat de inhoud die je aanmaakt rechtstreeks toegangelijk is via het menu van de website, denk bvb aan een pagina met contactgegevens. Drupal voorziet standaard verschillende menu's, waarvan het hoofmenu (main menu) het belangrijkste is. Dit menu wordt prominent weergegeven op de website, meestal bovenaan of in een zijbalk. Later zien we hoe we het menu verder naar onze wens kunnen instellen, maak nu al een menu-item voor het artikel.

  1. Bewerk het artikel "Opleiding Drupal bij Cervo-GO".
  2. Klik onderaan bij menu-instellingen op "Voer een menulink in".
  3. Vermits het hoofdmenu horizontaal wordt weergegeven, kiezen we voor een korte menu-titel, bvb Opleiding Drupal.
  4. Geef optioneel een omschrijving, dit wordt getoond als iemand met de muis over het menu beweegt.
  5. Kies het <Hoofdmenu> als bovenliggend onderdeel.
  6. Laat het gewicht op 0 staan. Met het gewicht kan je de volgorde van de menu-items bepalen, hoe kleiner het getal, hoe eerder het in het menu weergegeven wordt.
  7. Sla de inhoud opnieuw op en bezoek de homepage van de site. Het menu-item "opleiding Drupal" werd toegevoegd.

Revisie informatie

Tijdens het bewerken van inhoud kan je verschillende versies van dezelfde inhoud bewaren, dit zijn revisies. Dit kan handig zijn indien je met meerdere mensen wijzigingen aanbrengt, maar ook voor jezelf om eerdere versies te bekijken of een vroegere versie terug te zetten.

  1. Bewerk het artikel "Opleiding Drupal bij Cervo-GO".
  2. Verander de titel naar Opleiding Drupal bij CVO Cervo-GO.
  3. Voeg nog een extra zin aan de tekst toe.
  4. Klik onderaan bij Revisie-informatie op "Nieuwe revisie aanmaken" en vul als logbericht de veranderingen in die je gemaakt hebt.
  5. Sla de inhoud opnieuw op.
  6. Bekijk het artikel in de standaardweergave, er is een link Revisies bijgekomen.
  7. Klik op deze link om de verschillende revisies te bekijken. Met de link terugzetten kan je oudere versies terugzetten.

URL-pad instellingen

Je hebt misschien al gemerkt dat ieder artikel standaard een URL heeft in de vorm http://localhost:8080/drupal/node/1 of http://localhost:8080/drupal/node/2.

http://localhost:8080/drupal is het basisadres van onze Drupal-installatie. "Node" betekent dat Drupal ons de pagina toont van een specifiek stuk inhoud en het nummer is het volgnummer of ID van de inhoud. Ons eerste berichtje heeft als ID 1, het volgende 2, enz...

Deze adressen werken maar zijn niet echt leesbaar en ook niet optimaal voor zoekmachines die onze website indexeren, zoals Google. Via de URL-pad instellingen kunnen we aan ieder stuk inhoud een tekstueel adres geven wat deze problemen verhelpt.

  1. Bewerk opnieuw het artikel Opleiding Drupal.
  2. Geef bij URL-Pad instellingen een URL-alias in, bvb opleiding-drupal. Vermijd spaties en vervang ze door streepjes, een URL kan in principe geen spaties bevatten!
  3. Sla het artikel opnieuw op. Je kan het artikel nu bezoeken via het adres http://localhost:8080/drupal/opleiding-drupal

Reactie-instellingen

Drupal-core voorziet in een reactie-systeem (comment) waarmee bezoekers reacties op inhoud kunnen achterlaten. Via de rubriek reactie-instellingen kan je voor ieder stuk inhoud bepalen of er al dan niet reacties op geschreven mogen worden. Kies je voor Open, dan verschijnt er een reactieformulier op de inhoudspagina.

Probeer zelf een reactie te schrijven op het artikel over de opleiding Drupal.

Auteursinformatie

In deze rubriek kan je de naam van de auteur en de publicatiedatum wijzigen. Waarschijnlijk wil je dit niet veranderen, maar het kan wel.

Publicatie-opties

In deze rubriek kan je verschillende opties instellen m.b.t. de publicatie van de inhoud.

Gepubliceerd: hiermee bepaald je of de inhoud weergegeven wordt op de website of niet. Je bvb kiezen om de inhoud nog niet te publiceren als het nog niet afgewerkt is en je er later aan wil verder werken. De ongepubliceerde inhoud kan je terugvinden in de rubriek inhoud bovenaan.

Aangeraden op de voorpagina: hiermee bepaal je op de inhoud op de voorpagina moet weergegeven worden of niet. Artikels worden standaard op de voorpagina weergegeven, pagina's niet. Een stuk inhoud dat niet op de voorpagina weergegeven wordt is nog steeds toegangelijk via de URL (bvb "node/1") of via het menu als er een link is.

Vastgeplakt bovenaan de lijst: hiermee kan je ervoor zorgen dat een stuk inhoud steeds bovenaan weergegeven wordt in lijsten (sticky). Op de voorpagina worden bvb de  artikels chronologisch weergegeven, de laatste artikels eerst, maar met deze optie wordt het artikel steeds bovenaan weergegeven, ongeacht de chronologie. Gebruik dit bvb voor een stuk inhoud dat belangrijk is en steeds prominent weergegeven moet worden, bvb een belangrijk nieuwsbericht.

Opdracht: maak een contact-pagina

Probeer nu zelf een nieuwe contactpagina aan te maken met je adresgegevens. Geef de pagina als titel Contact, zorg dat er een link in het hoofdmenu weergegeven wordt en  zorg dat de pagina bereikbaar is op het adres http://localhost:8080/drupal/contact

Inhoud zoeken

In de rubriek inhoud zie je een lijst met alle inhoud van je site en kan je de inhoud filteren om iets terug te vinden. Je kan bvb filteren op ongepubliceerde inhoud of enkel pagina's. Van hieruit kan je de inhoud bewerken, verwijderen of de opties bijwerken.

Werken met taxonomie

Drupal biedt een krachtig en veelzijdig systeem om je inhoud te categorizeren en te ordenen, nl. taxonomie. Deze functie wordt vaak ondergewaardeerd door nieuwe Drupal-gebruikers, maar is essentieel voor websites met veel inhoud.

Je kan taxonomie nog het best vergelijken met een bibliotheek. In een bibliotheek kan je vaak rechtstreeks naar het boek wandelen dat je zoekt. Stel je zoekt een Engelstalige dichtbundel van Edgar Allan Poe, dan weet je dat je bij de fictie moet kijken, afdeling Engelstalig in het rek met Poëzie. Zoek je een reisgids over de Provence, dan moet je bij de non-fictie kijken, afdeling reisgidsen in het rek met boeken over Frankrijk. Stel dat in dezelfde bibliotheek alle boeken op één grote hoop zouden liggen en je daartussen moet beginnen zoeken... dit laatste is een beetje zoals inhoud zonder taxonomie op een Drupal site.

Taxonomie zijn in essentie woordenlijsten die verband houden met elkaar. Je kan deze woordenlijsten in Drupal aanmaken en toekennen aan inhoud. In het volgende voorbeeld maken we pagina's voor een website over softwareprogramma's. Hierbij gebruiken we drie taxonomielijsten:

  • Het soort programma, bvb kantoorsoftware, grafische software, internet/webdesign,...
  • De producent van het programma, bvb Microsoft, Adobe of Google
  • Het besturingssysteem: Windows, Mac of Linux

Nadat we deze woordenlijsten aanmaken dienen we ze toe te kennen aan een inhoudstype, in ons geval aan pagina's. Daarna kunnen we pagina's aanmaken en hierbij de woordelijsten beginnen gebruiken.

Woordenlijsten aanmaken

  1. Ga naar Structuur > Taxonomie. Hier zie je de bestaande woordenlijsten. Drupal heeft standaard al één woordenlijst aangemaakt, nl Tags. Deze lijst hebben we al gebruikt bij het aanmaken van artikels.
    Klik op Woordenlijst toevoegen.
  2. Geef als naam soort programma en vul de omschrijving in. Sla op
  3. Klik vervolgens op termen toevoegen.
  4. Geef als naam Kantoor en vul de omschrijving in. 
  5. Nadat je op opslaan geklikt hebt kan je onmiddellijk de volgende term invullen. Maak deze termen aan:
    Grafisch
    Internet
    Klik tenslotte op lijst bovenaan om de lijst met termen te zien.
  6. Maak op gelijkaardige manier een woordenlijst Producent, met als termen Microsoft, Adobe en Google.
  7. Maak tenslotte nog een woordenlijst Besturingssysteem, met als termen Windows, Mac en Linux.

De woordenlijsten zijn nu aangemaakt. Nu kunnen we ze toekennen aan een inhoudstype.

Een woordenlijst aan een inhoudstype toevoegen

Niet alle woordenlijsten zullen nuttig zijn om aan elk type inhoud toe te voegen. Kies dus bij het toevoegen enkel de woordenlijsten die effectief nut hebben voor het type inhoud. In dit voorbeeld passen we het inhoudstype pagina aan.

  1. Ga naar structuur > inhoudstypen. Op deze pagina zie je de twee standaardtypes. Van hieruit kunnen we ook nieuwe types inhoud aanmaken, maar dit komt later aan bod. Klik op velden beheren bij basic page.
  2. Vul bij Veld toevoegen deze gegevens in:
    Label: Soort programma
    Veldnaam: soort_programma (veldnamen kunnen enkel uit kleine letters, cijfers en liggende streepjes _ bestaan)
    Data-type: Referentie naar een term (in de volgende stap kunnen we een woordenlijst kiezen)
    Formulierelement: Selectielijst (hiermie kunnen we de termen kiezen uit een selectielijst bij het toevoegen van inhoud)
    Sla op
  3. In de volgende stap kiezen we de woordenlijst, in dit geval Soort programma.
  4. In de volgende stap kan je nog opties voor het veld instellen:
    Label, deze tekst wordt weergegeven naast de selectielijst bij het invoeren.
    Verplicht veld, indien dit aangevinkt is moet er altijd een waarde gekozen worden.
    Helptekst, dit wordt weergegeven onder het veld. Geef hier informatie over hoe iemand het veld moet gebruiken.
    Standaardwaarde, deze waarde wordt standaard geselecteerd.
    Aantal waardes, verhoog dit indien er meerdere termen uit de lijst mogelijk zijn. Laat het in dit voorbeeld op 1.
  5. Voeg nu op dezelfde manier velden toe voor de woordenlijsten Producent en Besturingsyssteem, met deze verschillen:
    Bij producent kies je niet voor een selectielijst, maar voor keuzevakjes/keuzerondjes
    Bij besturingssysteem zet je het aantal waardes op onbeperkt. Een programma kan namelijk verkrijgbaar zijn voor verschillende besturingssystemen.

Termen kiezen bij het maken van inhoud

Nu de termen aangemaakt zijn en we ze gekoppeld hebben aan het inhoudstype pagina kunnen we enkele pagina's over computerprogramma's aanmaken. Ga naar Inhoud > Inhoud toevoegen > Pagina. We maken een pagina over het programma Word. Dit is een kantoorpakket van producent Microsoft en is beschikbaar voor Windows en Mac. Vul het formulier als dusdanig in.

Maak op gelijkaardige manier pagina's aan voor onderstaande sofware:

 

  • Excel: kantoor, Microsoft, Windows en Mac
  • Photoshop: grafisch, Adobe, Windows en Mac
  • Illustrator: grafisch, Adobe, Windows en Mac
  • Paint: grafisch, Microsoft, Windows
  • Picasa: grafisch, Google, Windows, Mac en Linux
  • Dreamweaver: internet, Adobe, Windows en Mac
  • Internet Explorer: internet, Microsoft, Windows
  • Chrome: internet, Google, Windows, Mac en Linux

Bekijk nu de pagina van bvb Photoshop, je ziet dat de termen uit de woordenlijsten automatisch links geworden zijn. Klik je bvb op grafisch, dan kom je op een pagina terecht waar alle inhoud met dezelfde term op wordt weergegeven, dus bvb ook Picasa, Paint, enz.

Deze pagina heeft momenteel een "moeilijk" adres: http://localhost:8080/drupal/taxonomy/term/6. We kunnen, net als bij de inhoud zelf, ook voor taxonomie-termen een URL-alias aanmaken. Klik bovenaan op Bewerken om deze term te bewerken (of werk via structuur > taxonomie) en geef een meer "leesbare" URL-alias in. In het voorbeeld wordt de pagina met grafische inhoud beschikbaar op http://127.0.0.1:8080/grafisch

Een hiërarchische woordenlijst

Je kan een woordenlijst ook onderverdelen en zo een hiërarchie maken. Zo kunnen we de woordenlijst soort programma nog verder onderverdelen:

Bij het aanmaken van een term kan je onderaan bij Relaties een bovenliggende term kiezen, bvb maak een nieuwe term fotobewerking en kies Grafisch als bovenliggende term.

 

Nu we de basis van taxonomie in Drupal onder de knie hebben, kan je zelf beginnen nadenken over woordenlijsten die je nodig zou kunnen hebben voor jouw website.

Werken met menu's

Een goede website staat of valt met een goed systeem om door de verschillende pagina's te bladeren en informatie snel terug te vinden. Er zijn verschillende manieren waarop een bezoeker door je Drupal-site kan navigeren: links die in de inhoud verwerkt zijn en waarmee de bezoeker naar een nieuwe pagina kan surfen, aanklikbare afbeeldingen en knoppen op een pagina, en menu's. Een menu is een horizontale of verticale lijst met links als tekst of afbeeldingen. In dit hoofdstuk bekijken we hoe we menu's kunnen aanmaken en beheren met Drupal.

Er zijn standaard al een aantal menu's actief in Drupal. Op onderstaande afbeelding zie je vijf verschillende menu's:

  • De zwarte balk bovenaan met Dashboard, Inhoud, Structuur,...
  • De grijze balk eronder met Inhoud toevoegen,...
  • Bovenaan rechts met Mijn account en uitloggen
  • Het hoofdmenu met Home, Opleising Drupal
  • Het navigatiemenu met Inhoud toevoegen

Een item aan een menu toevoegen

Er zijn over het algemeen twee manieren waarmee we items aan een menu kunnen toevoegen: tijdens het aanmaken/bewerken van inhoud (automatisch) of manueel. In het hoofdstuk over inhoud zagen we reeds dat we makkelijk een menulink kunnen aanmaken voor de inhoud die we toevoegen. Het voordeel van deze methode is dat als we de inhoud verwijderen, het menu-item automatisch mee verwijderd wordt. Als we manueel menulinks toevoegen dan moeten we in de gaten houden dat de links in de toekomst steeds blijven werken.

Ga als volgt te werk om manueel een item aan een menu toe te voegen:

  1. Ga naar de rubriek Structuur > Menu's. Klik op link toevoegen bij het menu waaraan je de link wil toevoegen.
  2. Vul de gegevens in:
    Titel: de tekst die in het menu zal verschijnen
    Pad: de pagina waarnaar de link verwijst. In het voorbeeld verwijzen we naar een intern pad "search", dit is de standaard zoekfunctie van Drupal. Maar we kunnen hier ook naar een extern adres verwijzen, bvb naar http://www.cervogo.be
    Omschrijving: deze tekst wordt weergegeven wanneer een bezoeker over de link beweeegt met de muis
    Ingeschakeld: bepaalt of de link weergegeven wordt of niet
    Uitgeklapt: Als er onderliggende menulinks zijn dan worden deze steeds uitgeklapt weergegeven
    Link naar bovenliggend onderdeel: kies het onderdeel waar deze link onder geplaatst moet worden
    Gewicht: bepaalt de volgorde van de menulink, een lager getal geeft de link eerder weer in het menu
  3. De link wordt toegevoegd. In dit venster kan je de volgorde van de links wijzigen door  te verslepen. Vergeet niet om te bevestigen met de knop "instellingen opslaan".

Probeer nu zelf nog een link toe te voegen naar het externe adres http://www.cervogo.be

Een nieuw menu aanmaken

Voor sommige websites zullen de ingebouwde Drupal-menu's niet voldoende zijn en zal je extra menu's willen aanmaken. In dit voorbeeld maken we een extra menu met links naar bekende externe websites. Ga als volgt te werk:

  1. Ga naar Structuur > Menu's en klik bovenaan op Menu toevoegen
  2. Geef het menu een titel en omschrijving
  3. Voeg daarna op gelijkaardige manier links toe als daarnet. Gebruik onderstaande links, of kies zelf.
    Google (http://www.google.be)
    Drupal (http://www.drupal.org)
    Cervo-GO (http://www.cervogo.be)
    Denis Monsieur (http://www.denismonsieur.be)
  4. We moeten dit menublok nu nog weergeven in een regio van onze site. Ga hiervoor naar Structuur > Blokken.
  5. Onderaan zie je bij de uitgeschakelde blokken "Nuttige websites" staan. Met de keuzelijst ernaast kan je bepalen in welke regio het menu moet komen te staan, kies hier voor "Eerste zijbalk" en klik onderaan op "Blokken opslaan".
  6. Bezoek de homepage. Het menu wordt nu weergegeven in de zijbalk van de website. Experimenteer met de andere posities.

Later gaan we nog dieper in op regio's en blokken binnen Drupal, je kan alvast experimenteren met de verschillende blokken via Structuur > Blokken

 

 

Werken met thema's

In dit hoofdstuk gaan we dieper in op thema's, waarmee je het uiterlijk van je Drupal-site kan aanpassen. We leren hoe we een thema kunnen kiezen en instellen. We zien ook hoe we extra thema's kunnen downloaden en activeren.

De visuele presentatie en layout van je Drupal-site wordt bepaald door het thema. Een thema is een concept in Drupal dat onderstaande zaken omvat:

  • De gebruikte kleuren op de site
  • De lettertypes en letterstijl die gebruikt wordt voor tekst, hoofdingen , links en andere elementen
  • De plaatsing en weergave van afbeeldingen die op iedere pagina zichtbaar zijn (bvb in de hoofding of voettekst)
  • De layout van de pagina, zoals de plaatsing van de menu's, blokken en inhoud, het gebruik van kolommen, enz

Drupal thema's bestaan uit HTML (opmaaktaal), CSS (stijlbestanden) en PHP (scripttaal). In dit hoofdstuk leren we de thema's nog niet aanpassen met HTML en CSS, dit komt later aan bod.

Een thema kan erg uiteenlopend zijn, van eenvoudig (bvb een eenvoudige layout met één kolom) tot erg ingewikkeld (verschillende kolommen met een complexe weergave). Bekijk voor uiteenlopende voorbeelden de Drupal-websites uit de inleiding of blader door de voorbeelden op Drupal Gardens.

We hebben totnogtoe met twee thema's gewerkt. Bartik is het standaard thema dat meegeleverd wordt met Drupal 7, te herkennen aan de blauwe kleur. De administratieve interface om inhoud, taxonomie, etc te bewerken, gebruikt het neutrale (grijs) thema Seven.

Regio's

Een thema bestaat uit een aantal regio's. Dit zijn rechthoekige gebieden op de pagina waarin menu's, blokken, widgets, inhoud enz geplaatst kan worden. De meeste thema's hebben een aantal standaardregio's: de hoofding bovenaan, een linkerzijbalk, een rechterzijbalk, een gebied voor de inhoud en een footer onderaan. In onderstaand voorbeeld zie je de verschillende regio's van het standaardthema Bartik:

Je kan de verschillende regio's van een thema zien via Structuur > Blokken. Klik op Blokgebieden demonstreren.

Het standaardthema Bartik

De eigenschappen en instellingen van een thema veranderen kan via de rubriek Uiterlijk. Klik op Instellingen bij het thema dat je wil wijzigen. Let wel, de instellingen kunnen verschillen naar gelang het thema. In Bartik kan je de kleuren aanpassen met deze interface terwijl dit in veel andere thema's niet mogelijk is zonder CSS te gebruiken.

Andere instellingen hebben betrekking op de weergave van elementen, zoals het logo of de naam van de website.

Verder kan je zelf een logo uploaden ipv het Drupal logo. Vink hiervoor Gebruik het standaardlogo uit en kies een logo op je harde schijf. Je kan op gelijkaardige manier een snelkoppelingspictogram uploaden. Een snelkoppelingspictogram of favicon is het kleine icoontje (16x16px) dat weergegeven wordt in de tabbalk van de webbrowser en in de lijst met favotieten. Standaard is dit .

Pas nu de kleuren van je site aan naar jouw smaak en upload een eigen logo.

Een ander thema inschakelen

Drupal 7 heeft behalve Bartik en Zen nog twee andere thema's standaard geïnstalleerd:

  • Garland: dit is het standaardthema van Drupal 6, een soort oudere versie van Bartik. Er zijn dan ook veel gelijkenissen met Bartik.
  • Stark: dit is een puur basisthema, bedoeld om de standaard HTML-opmaak en CSS stijlen van Drupal te demonstreren.

Om deze thema's te testen ga je naar de rubriek Uiterlijk en klik op Inschakelen als standaard bij het thema. Bezoek vervolgens de homepage om het thema te zien.

Thema's zoeken en downloaden

Al zijn de standaardthema's zeker bruikbaar, je zal in de meeste gevallen een ander thema willen. Er zijn honderden gratis thema's beschikbaar voor Drupal, je kan ze downloaden vanaf de website drupal.org:

  1. Ga naar http://www.drupal.org/project/themes (of klik op de themes link op de drupal.org homepage)
  2. Kies in de keuzelijst Filter by compability voor 7.x, zo zie je enkel de compatibele thema's.
  3. Blader door een thema en kies een thema dat je aan staat. Klik door naar de pagina van het thema.
  4. Kopieer de link naar het .tar.gz bestand net zoals bij modules.
  5. Klik op je Drupal site in de rubriek uiterlijk op Installeer een nieuw thema.
  6. Plak de URL in het vak en installeren maar
  7. Na installatie kan je het thema activeren

Thema's testen voor installatie

Omdat je niet altijd kan inschatten hoe een thema precies past bij jouw site en het nogal omslachtig is om de verschillende thema's te bekijken bestaan er websites waar je een demonstratiesite kan laten weergeven in verschillende thema's. Vroeger was er de website themegarden.org maar hier vind je tegenwoordig geen thema's voor Drupal 7. Er bestaan wel (tijdelijke) alternatieven zoals de site http://ec.mobonobomo.com/ waar je een 70-tal thema's kan uittesten. Gebruik de keuzelijst in Theme-blok om van thema te veranderen.

Enkele populaire thema's

In het vorige hoofdstuk zagen we hoe je thema's kan downloaden en installeren. In dit hoofdstuk bekijken we de kenmerken van enkele populaire thema's op dit ogenblik.

Er zijn in essentie twee soorten thema's:

  • Basisthema's waarbij het de bedoeling is dat je zelf een nieuw sub-thema maakt met HTML en CSS. Deze thema's bevatten alle basisvoorzieningen om je website manueel vorm te geven.
  • Kant-en-klare thema's waarbij je via het administratiegedeelte van Drupal de layout en opmaak van je website (deels) kan aanpassen. Voorlopig werken we met deze thema's, we kunnen steeds manueel ingrijpen wanneer nodig blijkt.

Voorbeelden van basisthema's zijn:

  • Zen, het populairste basisthema voor Drupal. Zen biedt een ongekende vrijheid voor ontwikkelaars van eigen thema's. Als kant-en-klaar thema is het echter niet bruikbaar
  • Fusion, ook erg populair. Onder andere de veelgebruikte thema's Acquia Prosper en Acquia Marina zijn op dit basisthema gebaseerd.
  • AdaptiveTheme, een veelgebruikt basisthema dat ondersteuning biedt voor weergave op tablets en mobiele toestellen. De populaire thema's Pixture Reloaded en Sky zijn op dit basisthema gebaseerd.
  • Basic, een eenvoudig basisthema dat je zelf moet aanpassen.

 

Kant-en-klare thema's

Hieronder bespreken we kort enkele populaire thema's, zonder in te gaan op alle specifieke instellingen. Probeer deze thema's eens uit door ze te downloaden, installeren en de instellingen in de rubriek Uiterlijk te wijzigen.

Marinelli

Marinelli is een populair thema met heel wat extra instellingen, bvb:

  • Een heleboel flexibele regio's
  • Een geïntegreerde roterende banner
  • Een mega-dropdownmenu (bekijk de demo-site voor meer informatie)

Pixture Reloaded

Pixture Reloaded is een populair thema gebaseerd op het basisthema AdaptiveTheme. Functies:

  • Keuze uit 18 kleurencombinaties
  • Keuze uit vele lettertypes
  • Keuze voor afgeronde hoeken
  • Instellingen voor de positionering van afbeeldingen
  • Keuze voor een horizontaal login-blok
  • Keuze uit vele instelbare regio's

Sky

 

Sky is een populair thema, ook gebaseerd op het basisthema AdaptiveTheme. Functies:

  • Keuze uit 4 kleurencombinaties
  • Keuze uit vele lettertypes
  • Keuze voor afgeronde hoeken
  • Instellingen voor de positionering van afbeeldingen
  • Keuze voor een horizontaal login-blok
  • Keuze uit vele instelbare regio's

BlueMasters

BlueMasters is een thema dat gebaseerd is op een standaard PSD-template. Je kan dit PSD document downloaden en Photoshop gebruiken om het thema aan te passen. Functies:

  • Een aanpasbare homepage
  • Een ingebouwde slideshow

Corolla

Corolla is alweer een thema gebaseerd op het basisthema AdaptiveTheme. Functies:

 

  • Keuze uit 6 kleurencombinaties
  • Keuze uit vele lettertypes
  • Keuze voor afgeronde hoeken
  • Instellingen voor de positionering van afbeeldingen
  • Keuze voor een horizontaal login-blok
  • Keuze uit vele instelbare regio's

Andere thema's

  • BlogBuzz, meer bedoeld voor blogsites
  • Tarski, gebaseerdop het gelijknamige Wordpress thema
  • Analytic, modern thema voor blogs, communities en nieuwssites
  • Aberdeen, fris en neutraal thema
  • ...

Nuttige modules

Voor het bewerken van het uiterlijk zijn er behalve de thema's ook verschillende modules die het ons makkelijker maken:

  • Noggin, een module die toelaat om een actergrondafbeelding voor de hoofdig te kiezen vanuit de Drupal interface
  • Skinr, een module waarmee je de opmaak van blokken en andere onderdelen van de layout kan aanpassen vanuit de interface. Helaas is deze module nog iet stabiel genoeg voor Drupal 7
  • Superfish of NiceMenus om de menu's dynamischer te maken

 

Drupal blokken

In dit hoofdstuk bekijken we het gebruik van blokken en zogenaamde widgets (zoals het inlogformulier of de lijst met het aantal bezoekers online), die je op een bepaalde positie (regio) van je pagina kan weergeven. We bekijken de standaardblokken in Drupal 7, blokken die meegeleverd worden met extra modules en we kunnen ook zelf aangepaste blokken maken.

Soorten blokken

In essentie zijn er drie soorten blokken:

  • De blokken die standaard in Drupal 7 core zitten: het login-blok, het zoekblok, het "Wie is online"-blok, enz...
  • Blokken die meegeleverd worden met bepaalde modules, zoals een blok waarin het nieuws of weerbericht weergegeven wordt, een blok met je laatste Twitter-posts of je Facebook status.
  • Zelfgemaakte blokken, bvb een blok met een stuk tekst in of een lijst met activiteiten.

Blokken weergeven op een pagina

In onderstaand voorbeeld worden er 6 blokken weergegeven

We zien menu-blokken (Management, navigatie en nuttige website), interactieve blokken (Zoeken) en informatieve blokken ("Wie is online" en "Gebouwd met Drupal") 

Om blokken weer te geven en in te stellen ga je naar de rubriek Structuur > Blokken.

 

Hier vind je eerst de geactiveerde blokken per regio, onderaan staan de niet-geactiveerde blokken.

Om een blok te activeren kies je een regio (ipv "- Geen -") en klik je onderaan op Blokken opslaan. Het blok wordt nu weergegeven in de betreffende regio.

De volgorde van de blokken veranderen kan analoog met de volgorde van menu-items of taxonomie: Neem het blok vast bij het dubbele pijltje  en versleep naar boven of beneden. Vergeet niet op Blokken opslaan te klikken om de nieuwe volgorde te bewaren.

Om blokken uit te schakelen kies je voor "- Geen -" uit de lijst en sla je weer op.

Blokken configureren

In de rubriek Structuur > Blokken kan je voor ieder blok verschillende instellingen wijzigen. Zo kan je de titel wijzigen en bepalen waar het blok zichtbaar moet zijn. Blokken die meegeleverd worden met modules hebben vaak nog meer instellingen. We nemen als voorbeeld het "wie is online" blok. Klik op de link instellen naast het blok.

Bloktitel: hier kan je een andere titel ingeven voor het blok. Sommige blokken hebben al een standaardtitel. Indien je geen titel wil weergeven voor dit blok vul dan <none> in.
Gebruikersactiviteit en lengte gebruikerslijst: deze opties zijn specifiek voor het "wie is online" blok. Standaard is een bezoeker "online" als hij in de laatste 15 minuten een pagina heeft bezocht. Er worden standaard tot 10 gebruikers weergegeven in het blok.
Regio-instellingen: desgewenst kan je hier voor elk thema de regio kiezen waarin het blok weergegeven wordt. Dit kan je ook in de rubriek Structuur > Blokken.

De zichtbaarheidsinstellingen bepalen op welke pagina's en voor welke gebruikers het blok weergegeven moet worden. Je kan bvb instellen dat een blok enkel weergegeven wordt op de homepagina, of op pagina's met artikels, of voor bezoekers die ingelogd zijn. 

In bovenstaand voorbeeld wordt het blok enkel weergegeven op de homepage (let op het speciale adres <front> dat verwijst naar de homepage).

In bovenstaand voorbeeld wordt het blok enkel weergegeven voor geverifieerde (ingelogde) gebruikers. Als je uitlogt zal je het blok dus niet meer zien.

Toepassing

Zorg dat het blok "Recente inhoud" ergens in de voet van de website weergegeven wordt. Verander de titel naar "Nieuwe items" en zorg dat er 5 items weergegeven worden. Geef dit blok enkel weer op de homepage.

Blokken uit contrib-modules gebruiken

Veel modules die we kunnen downloaden bevatten één of meer blokken. Sommige modules bestaan zelfs uitsluitend uit één blok. Dit kan bvb een blok met nieuwsberichten zijn of een blok met het weerbericht.

We nemen als voorbeeld de module weather op http://www.drupal.org/project/weather

  1. Ga naar de pagina van de module en kopieer de link naar het .tar.gz bestand (rechtermuisknop)
  2.  Ga in je Drupal site naar de rubriek modules en klik op installeer een nieuwe module.
  3. Plak het adres in het vak en klik op installeer.
  4. Activeer de module in de rubriek modules
  5. Ga naar Structuur > Blokken om een weer-blok te activeren. Er zijn drie verschillende blokken bijgekomen:
    Weather: IP-based location of user. Dit blok toont weersinformatie op basis van het IP-adres van de bezoeker. Een Amerikaanse bezoeker zal dus een ander weerbericht zien als je Belgische bezoeker. Vermits we werken met een lokale Drupal-installatie heeft het voorlopig geen zin om dit blok te activeren.
    Weather: custom user. Met dit blok kunnen we weersinformatie tonen over een vaste locatie. Deze locatie moeten we nog instellen in de gebruikersinstellingen.
    Weather: location of nodes. Met dit meer geavanceerde blok kunnen we weersinformatie weergeven op basis van de locatiegegevens uit een pagina of artikel. Dit blok kunnen we niet gebruiken zonder de location-module te installeren.

    Plaats het blok Weather: custom user in de tweede zijbalk en sla de blokken op.

  6. Bezoek de homepage. Het blok wordt nog niet weergegeven omdat we nog geen locatie gekozen hebben
  7. Klik in het gebruikersmenu op Mijn account of klik bovenaan op je gebruikersnaam. Klik vervolgens op het tabblad Weather. Op deze pagina kies je voor Add location to this display.
  8. Kies een locatie uit de selectielijsten en bevestig met opslaan.
  9. Het blok met weersinformatie over je gekozen locatie verschijnt nu in de tweede zijbalk. Met de link Edit configuration of display kan je de weergave van het blok verder instellen.

Toepassing

Installeer en activeer het Twitter block op  http://drupal.org/project/twitter_block. Dit blok geeft Twitter-berichten weer van een bepaalde peroon of over een bepaalde term. Stel het blok in zodat 5 Twitter berichten weergegeven worden over een onderwerp naar keuze (bvb #koksijde of #obama). Plaats het blok naar keuze maar verander de titel van het blok naar een Nederlandstalige titel.

Eigen blokken aanmaken

In sommige gevallen kan het nuttig zijn om zelf een blok aan te maken met eigen tekst en andere inhoud. In dit voorbeeld maken we een eenvoudig blok met contactinformatie.

  1. Ga naar Structuur > Blokken.
  2. Klik bovenaan op de link Blok toevoegen.
  3. Vul de vakken in:
    Blokbeschrijving: dit is voor jezelf. Deze beschrijving wordt weergegeven op de pagina met blokken.
    Bloktitel: de titel van het blok.
    Blokinhoud: de inhoud van het blok. Dit tekstvak is gelijkaardig aan het tekstvak bij het toevoegen van inhoud.
  4. Kies bij de regio-instellingen voor de eerste zijbalk en sla het blok op. Het blok wordt nu weergegeven.

Toepassing

Maak nu zelf een blok met eigen tekst "Welkom op onze website". Zorg ervoor dat dit blok boven de inhoud weergegeven wordt (dus in het midden van de pagina) en zorg er ook voor dat het blok enkel op de homepage getoond wordt.

Gebruikers aanmaken en beheren

Als je een Drupal site maakt dien je je enkele vragen te stellen. Ben jij de enige administrator of zullen er nog anderen de site beheren? Is de site toegankelijk voor iedereen of moeten gebruikers inloggen om bepaalde inhoud en blokken te zien? In dit hoofdstuk bekijken we hoe Drupal omgaat met gebruikers en hoe je als administrator de rechten van een ingelogde gebruiker kan beperken.

Gebruikers, rollen en toegangsrechten

Gebruikers worden in twee algemene categorieën onderverdeeld: anonieme gebruikers en geverifieerde gebruikers. Anonieme gebruikers zijn personen die de website bezoeken zonder ingelogd te zijn. Geverifieerde gebruikers hebben een gebruikersaccount en kunnen over het algemeen meer doen met de website. In Drupal kan je beide gebruikersaccounts specifieke rechten toekennen.

Rollen zijn een Drupal-systeem waarmee je als administrator de gebruikers in verschillende groepen of categorieën kan onderverdelen. Stel dat je een website voor een bedrijf maakt, dan zijn mogelijk rollen bvb Human Resources, Boekhouding, Marketing en Klantenservice. Iedere werknemer met toegang tot de website behoort tot één of meerdere rollen en kan afhankelijk van de rol meer of minder doen met de site. In essentie dienen rollen dus om geverifieerde gebruikers in categorieën onder te verdelen, waarbij iedere rol specifieke permissies of rechten heeft.

Toegangsrechten in Drupal bepalen wat een bepaalde rol al dan niet mag doen. Er bestaan afhankelijk van het aantal geïnstalleerde modules tientallen verschillende toegangsrechten, bvb het recht om een nieuwe pagina aan te maken, het recht om pagina's te verwijderen, het recht om te zoeken op de site of het recht om een gebruikersaccount aan te maken.

De combinatie van toegangsrechten, rollen en gebruikers geeft een erg flexibel en geavanceerd systeem om de toegang tot je Drupal site te beperken.

Gebruikersaccounts

Iedere Drupal site heeft standaard één gebruikersaccount die aangemaakt wordt tijdens de installatie: de administrator. Deze account heeft standaard alle rechten en kan dus alles doen. Als je anderen toegang wil geven tot de website dan kan je kiezen uit 3 methodes waarmee gebruikersaacounts aangemaakt worden:

  • Bezoekers kunnen een account aanmaken zonder dat administrators dit hoeven te verifiëren
  • Bezoekers kunnen een account aanmaken, maar de acccount wordt pas actief na goedkeuring door een administrator
  • Enkel addministrators kunnen accounts aanmaken

Deze instelling kan je veranderen in de rubriek Instellingen > Accountinstellingen.

Wat je hier kiest hangt af van het type site. Als je een sociale netwerksite met veel interactie maakt dan laat je de registratie doorgaans door de bezoeker zelf doen. Als je een site maakt waar een beperkt aantal mensen op in kunnen loggen, is het vaak interessanter om enkel beheerders accounts aan te laten maken.

Accountinstellingen

In de rubriek Instellingen > Accountinstellingen vind je nog meer algemene opties voor gebruikersaccounts. Dit kan je o.a. instellen:

  • De naam voor anonieme gebruikers (standaard: Anoniem) 
  • De beheerdersrol (standaard administrator). Wanneer je een nieuwe module installeert krijgt de administrator standaard alle rechten.
  • E-mailverificatie (standaard aangevinkt). Wanneer een bezoeker zich registreert met een e-mailadres, dan wordt er een e-mail met een verificatielink verstuurd naar dit adres. Zo ben je zeker dat het e-mailadres werkt en toebehoort aan die persoon. Best aan laten staan dus. 
  • Opties voor annuleren, hier kan je instellen wat er moet gebeuren als een gebruiker zijn account annuleert
  • Personalisatie. In deze rubriek bepaal je of gebruikers een handtekening mogen instellen of een afbeelding (avatar) kunnen kiezen
  • E-mails. In deze rubriek kun je de teksten aanpassen van de verschillende e-mails die verstuurd worden. 

Extra velden

Je kan aan een gebruikersaccount extra velden toevoegen zodat een gebruiker meer informatie over zichzelf kwijt kan. Klik hiervoor in de rubriek Instellingen > Accountinstellingen bovenaan rechts op Velden beheren.

Voeg zoals in het voorbeeld een veld toe waarin een gebruiker zijn locatie kan invullen. Laat in de volgende stappen de standaardinstellingen staan. Later leren we nog meer over velden in het hoofdstuk over inhoudstypes.

Werken met rollen

Met rollen kunnen we gebruikers onderverdelen in groepen en aan iedere rol specifieke permissies toekennen. Het moeilijkste hierbij is voor jezelf bepalen welke rollen er nodig of nuttig zijn voor je website. Je kan dit tot op zeker hoogte vergelijken met taxonomie.

Sowieso is het interessant om niet teveel rollen aan te maken, dit maakt het beheren van de toegangsrechten eenvoudiger. Als voorbeeld maken we twee algemene rollen aan:

  • Een rol "medewerker" voor gebruikers van je bedrijf of organisatie die verantwoordlijk zijn voor het maken en publiceren van inhoud en menu's op je site
  • Een rol "bezoeker" voor bezoekers van je site die bepaalde inhoud kunnen zien en er commentaar kunnen op geven, maar zelf geen inhoud kunnen aanmaken of bewerken

Om rollen aan te maken en te bewerken ga je naar de rubriek Personen. Klik aan de rechterkant op Toegangsrechten en vervolgens op Rollen.

Vul als naam Medewerker in en klik op Rol toevoegen. Maak op dezelfde manier nog een tweede rol Bezoeker.

Nu de rollen zijn aangemaakt kunnen we er toegangsrechten aan toekennen.

Toegangsrechten toekennen

Om toegangsrechten aan rollen toe te kennen ga je naar de rubriek Personen en klik aan de rechterkant op Toegangsrechten. Op deze pagina zie je een soort matrix-overzicht van alle mogelijke toegangsrechten en de verschillende rollen.

Vink deze toegangsrechten aan voor de rol Medewerker:

  • Article: nieuwe inhoud aanmaken
  • Article: Eigen inhoud bewerken
  • Article: Eigen inhoud verwijderen
  • Basic page: nieuwe inhoud aanmaken
  • Basic page: Eigen inhoud bewerken
  • Basic page: Eigen inhoud verwijderen

Vink deze toegangsrechten aan voor de rol Bezoeker

  • Reacties bekijken
  • Reacties plaatsen
  • Eigen reacties bewerken

Er zijn nog veel meer toegangsrechten beschikbaar. Blader door de lijst om te zien wat de mogelijkheden zijn.

Nu we de rollen hebben aagemaakt en toegangsrechten hebben ingesteld, kunnen we een gebruiker aanmaken.

Gebruikers aanmaken

Om als administrator een gebruiker toe te voegen aan de website, ga je naar de rubriek Personen en klik je bovenaan op Gebruiker toevoegen en vul je de gegevens in. Kies als rol voor Medewerker. Merk op dat de rol "geverifieerde gebruiker" automatisch wordt toegekend.

De gebruiker Jan kan nu inloggen op je website:

Log nu uit en terug in als Jan en verifieer indien Jan inhoud kan aanmaken een bewerken.

Gebruikers zelf een account laten aanmaken

Als je dit toelaat (zie begin hoofdstuk) dan kunnen bezoekers zichzelf registreren op je site. Als het blok gebruikerslogin zichtbaar is dan kan een bezoeker klikken op de link Nieuw account aanmaken.

Nadat de bezoeker zijn gegevens ingevuld heeft wordt de account aangemaakt en krijgt de bezoeker een e-mail met activatielink. Daarna kan de bezoeker inloggen, tenzij je hebt ingesteld dat nieuwe accounts door een beheerder geverifieerd moeten worden. In dat geval moet je als administrator de gebruiker nog bewerken en op actief zetten in de rubriek Personen.

Maak als toepassing een account aan op de website http://www.denismonsieur.be

Opmerking: Indien het blok gebruikerslogin niet weergegeven wordt kan je altijd inloggen op een Drupal site via het pad /user. Voor jouw lokale site wordt dit http://127.0.0.1:8080/drupal/user 

Interactieve modules

In dit hoofdstuk bekijken we enkele modules waarmee we een website interactiever kunnen maken. We bespreken de basismodules blog, forum en poll. Verder gebruiken we de contrib-module webform om formulieren aan te maken.

Bloggen

Bloggen is één van de meest gebruikte interactieve functies op het internet. Bloggen is in essentie je gedacht schrijven over één of verschillende onderwerpen, dit kan gaan van een persoonlijke blog over wat je dagdagelijks meemaakt, tot bvb een blog waar de nieuwste snufjes of voetbaluitslagen worden besproken.

Blogs activeren en rechten toekennen

Drupal 7 bevat een blog-module die het makkelijk maakt om met verschillende personen op dezelfde site te bloggen. In dit voorbeeld activeren we de module en stellen we de website zo in dat personen met de rol "blogger" rechten hebben om blogs te schrijven op je website.

  1. Activeer de core-module blog in de rubriek Modules (net zoals we andere modules activeren).
  2. Merk op dat er een nieuw inhoudstype gemaakt werd: blog-item.
  3. Ga naar Personen > Toegangsrechten > Rollen en maak hier een nieuwe rol blogger aan.
  4. Bewerk vervolgens de toegangsrechten voor deze rol.
  5. Geef deze rol de rechten Blog-item: Nieuwe inhoud aanmaken, Blog-item: eigen inhoud bewerken en Blog-item: eigen inhoud verwijderen.
  6. Maak in de rubriek Personen een nieuwe gebruiker testblogger (e-mail: test@test.com, wachtwoord: test) en ken aan deze persoon de rol blogger toe.

Blog-items aanmaken

  1. Log nu uit en log terug in als testblogger.
  2. Klik op de link Inhoud toevoegen. Vermits testblogger enkel blog-items kan aanmaken verschijnt onmiddellijk het venster om een nieuw blog-item aan te maken.
  3. Voeg 2 à 3 korte blogposts naar keuze toe.

De blog-items worden automatisch op de homepage gepubliceerd waar je ook een link naar de blog van testblogger ziet. De URL van een blog is steeds in de vorm /blog/UID (UID is het nummer van de gebruiker, bvb 3 of 15). Kan je een menu-item maken in het hoofdmeu voor de blog van testblogger?

Blok met recente blog-items

Als je de blog-module activeert dan heb je ook een blok ter beschikking met de laatste blog-items. Probeer dit blok ergens in een zijbalk weer te geven (via Structuur > Blokken).

Forums

Forums of discussiegroepen zijn één van de oudste vormen van interactie op het internet. Drupal 7 voorziet in een forum-module waarmee het kinderspel is om forums op jouw site op te zetten. In dit voorbeeld activeren we de module, kennen we rechten toe en maken we ons eerste forum.

Forums activeren en rechten toekennen

  1. Activeer de forum-module. Merk op dat er een nieuw inhoudstype aangemaakt werd: forumonderwerp.
  2. Ga naar Personen > Toegangsrechten en ken volgende rechten toe aan de rol geverifieerde gebruiker: Forumonderwerp: Nieuwe inhoud aanmaken, Forumonderwerp: Eigen inhoud bewerken en Forumonderwerp: Eigen inhoud verwijderen.
  3. Nu kunnen we één of meer forums aanmaken waarin onderwerpen geplaatst kunnen worden. Ga naar Structuur > Forums en klik op Forum toevoegen. Merk op dat er al één forum aangemaakt werd, Algemene discussie.
  4. Vul een naam en omschrijving in (bvb Ervaringen met Drupal 7) en sla op. Het forum wordt nu aangemaakt
  5. Ga naar Inhoud > Inhoud toevoegen en kies voor een forumonderwerp.
  6. Vul een onderwerp in, kies een forum, typ je bericht in de body en sla op.
  7. Klik in het navigatiemenu op Forums om de forums en berichten te zien.

Opmerking: je kan in de rubriek Structuur > Forums ook zogenaamde containers aanmaken om verschillende forums te groeperen, bvb volgens onderwerp.

Opmerking: het standaardforum heeft een beperkte functionaliteit in vergelijking met veel andere fora. Ben je op zoek naar een forum met meer mogelijkheden, probeer dan eens de contrib module http://drupal.org/project/advanced_forum

Toepassing

Voeg zelf nog twee forums naar keuze toe via de rubriek structuur. Log ook eens in als testblogger en antwoord op het bericht dat je geplaatst hebt.

Polls

Polls zijn een andere vaak geziene interactieve functie op een site. Polls worden gebruikt om stemmen van bezoekers te verzamelen rond een bepaalde vraag, bvb "wie wordt volgens jou kampioen in eerste klasse". Een poll heeft meestal een aantal vaste antwoorden waaruit een bezoeker kan kiezen. Drupal 7 voorziet in een poll-module waarmee we dit eenvoudig kunnen aanmaken.

Polls activeren en configureren

  1. Activeer de module Poll in de rubriek Modules. Merk op dat er een nieuw inhoudstype Enquête aangemaakt wordt.
  2. Pas de toegangsrechten aan zodat anonieme en geverifieerde gebruikers volgende rechten hebben: Stem op enquêtes, Annuleer en verander uw eigen stemmen en Resultaten van stemmen weergeven.

Een poll aanmaken

  1. Ga naar Inhoud > Inhoud toevoegen > Enquête.
  2. Typ als vraag "Wie wordt kampioen in de eerste klasse van het voetbal?"
  3. Geef 4 voetbalploegen als keuzemogelijkheden. Klik op de knop Meer keuzes om keuzemogelijkheden toe te voegen.
  4. Verder kan je kiezen om de poll als open of gesloten weer te geven. Op gesloten polls kan niet meer gestemd worden, maar de resultaten kunnen wel nog bekeken worden. Je kan ook de duur van de enquête instellen, bvb op 7 dagen.
  5. Sla op, de poll wordt nu weergegeven:

Als administrator heb je toegang tot verschillende tabbladen:
Bewerken: hier kan je de poll bewerken en het aantal stemmen manipuleren.
Resultaten: hier zie je de resultaten van de stemming. Dit is ook zichtbaar voor wie het toegangsrecht Resultaten van stemmen weergeven heeft.
Stemmen: in deze rubriek vind je een logboek van de uitgebrachte stemmen.

Enquêteblok

Je kan de meest recente enquête ook als blok weergeven, bvb op iedere pagina van je site. Activeer hiervoor het blok Meest recente enquête in de rubriek Structuur > Blokken.

Toepassing

Voeg zelf een enquête met minstens 4 antwoorden toe. Zorg ervoor dat de enquête niet op de homepagina wordt weergegeven, maar wel in een blok.

Webformulieren

Informatie over je bezoekers verzamelen via webformulieren is nog zo'n interactieve functie die je op veel websites ziet. We kunnen hiervoor gebruik maken van de contrib-module webform waarmee we op een eenvoudige manier complexe focmulieren kunnen samenstellen.

Om te beginnen installeren en activeren we de module webform, te vinden op http://drupal.org/project/webform. Dit zou je al zelf moeten kunnen. Nadat je de module geactiveerd hebt verschijnt er een nieuw inhoudstype webform.

Een formulier aanmaken

In dit voorbeeld maken we een contactformulier dat een bezoeker van de site kan invullen. We voorzien deze velden: Naam (tekstvak), Adres (tekstgebied), Telefoon (tekstvak), E-mail (e-mailadres), Bericht (tekstgebied) en Hoe hebt u ons gevonden? (selectielijst).

  1. Ga naar Inhoud > Inhoud toevoegen > Webform
  2. Geef het formulier als naam Contactformulier en typ in de body "Gebruik onderstaand formulier om ons te contacteren". Verander de opties zodat gebruikers niet kunnen reageren en het formulier niet op de homepage weergegeven wordt. Zorg ook voor een menulink "Contacteer ons" in het hoofdmenu. Sla op.
  3. In de volgende stap dienen we de invulvelden aan te maken. Begin met een veld Naam, type textfield. Vink mandatory (verplicht) aan en klik Toevoegen.
  4. In de volgende stap kunnen we allerlei opties instellen. Het enige wat we hier veranderen is Label display naar inline. Dit zorgt ervoor dat de veldnaam aan de linkerkant van het tekstveld weergegeven wordt i.p.v. erboven. Sla op.
  5. Voeg op gelijkaardige manier de velden adres, telefoon, e-mailadres en bericht toe zoals in het voorbeeld:
  6. Voeg nog een veld toe met label Hoe hebt u ons gevonden? en kies als type voor Select options. Klik op toevoegen.
  7. Het ingeven van de selectie-opties werkt ietwat speciaal. In het vak Opties is iedere lijn een aparte keuze-optie. Zo'n optie bestaat uit twee delen, eerst de sleutelwaarde en daarna de weergegeven tekst, gescheiden door een pipe-symbool | (rechte streep). De sleutelwaarde mag enkel kleine tekens, cijfers en underscores bevatten. Een optie reclamefolder kunnen we dus als volgt ingeven: reclamefolder|Via een reclamefolder
    Vul het vak opties in zoals in het onderstaande voorbeeld:

    Vink vervolgens de optie Listbox aan om de keuzes in een selectielijst weer te geven. Plaats het label weer inline en sla op.
  8. Sla het formulier op en bekijk het met de link in het hoofdmenu.

Het formulier kan u ingevuld worden. De ingezonden formulieren kan je bekijken in de rubriek resultaten. Hier kan je de inzendingen individueel bekijken of in een overzichtstabel. Je kan ook de resultaten analyseren om er statistieken uit te halen.

Je kan de resultaten ook per e-mail versturen aan jezelf of andere adressen. Bezoek het tabblad Webform > E-mails voor meer info. Merk op dat het versturen van e-mails niet werkt op onze lokale installatie.

Toepassing

Probeer nu zelf een formulier te maken waarmee bezoekers zich kunnen inschrijven voor een wedstrijd. Gebruik onderstaande velden:

Hoeveel jaar bestaat onze firma? (Selectielijst met keuzes 3, 5, 10 en 20 jaar, verplicht in te vullen)
Schiftingsvraag: hoeveel inzendingen zullen we ontvangen? (Tekstvak, verplicht in te vullen. Is er een mogelijkheid om de ingevulde waarde te valideren zodat het zeker een getal is?)
Naam (Tekstvak, verplicht in te vullen)
Telefoon (Tekstvak)
E-mail (E-mailvak, verplicht in te vullen)

Zorg voor een menulink "Wedstrijd" in het hoofdmenu.

 

Inhoudstypes en velden

Inhoudstypes en velden zijn misschien wel de krachtigste functie van Drupal 7. Inhoudstypes kan je zien als een soort sjabloon waarmee specifieke inhoud ingevoerd en weergegeven kan worden. Hoewel we al veel kunnen doen met de standaard inhoudstypes artikel en basispagina, is het vaak aangewezen om eigen inhoudstypes aan te maken voor meer flexibiliteit.

De standaard inhoudstypes basispagina en artikel 

Met deze inhoudstypes hebben we regelmatig gewerkt. In essentie zijn deze inhoudstypes gelijk, het verschil zit hem in de beschikbare velden.

Een basispagina heeft twee velden, een titel en een body (de inhoud van de pagina). Een artikel heeft behalve deze velden nog 2 extra velden: een veld om een afbeelding up te loaden en een veld om tags toe te voegen.

In principe zijn deze inhoudstypes voldoende om een basis website op te zetten, maar soms wil je de inhoud meer structureren. Je wil bvb:

  • bepaalde informatie verplichten, zoals de datum voor een evenement, of de plaats van een evenement
  • berekeningen uitvoeren met de informatie, bvb de kostprijs van een product
  • bepaalde informatie sorteren op basis een veld
  • bepaalde informatie filteren op basis van een veld
  • bepalen hoe de informatie weergegeven wordt, bvb voor het inhoustype boek eerst de titel dan de auteur, dan de ISBN code, etc

In al deze gevallen ben je beter af met het maken van eigen inhoudstypes, of het bewerken van bestaande.

Een nieuw inhoudstype definiëren

Om de kracht en flexibiliteit van inhoudstypes aan te tonen maken we een nieuw inhoudstype om recepten mee te bewaren.

Om recepten gestructureerd toe te voegen kunnen we gebruik maken van deze informatie/velden:

  • De naam van het recept
  • De bereidingswijze van het recept
  • De tijd nodig om het recept te bereiden
  • De bron(nen) van het recept (websites, eigen recept,...)
  • Het soort keuken: Spaans, Italiaans, Belgisch,...
  • De moeilijkheidsgraad van het recept: makkelijk/gemiddeld/moeilijk
  • De ingrediënten uit het recept
  • Een bijlage met het recept in PDF om af te drukken
  • Een foto van het gerecht
  • Een vak met aanduiding of het recept vegetarisch is
  • ...

We kunnen al deze verschillende velden eenvoudig aanmaken en configureren vanuit de interface van Drupal

Een nieuw inhoudstype aanmaken

Maak het nieuwe inhoudstype als volgt aan:

  1. Ga naar Structuur > Inhoudstypen en klik bovenaan op Inhoudstype toevoegen.
  2. Geef als naam Recept en vul een korte omschrijving in. Overloop vervolgens de opties onderaan:
    Instellingen inzendingsformulier: hiermee kan je de naam van het titelveld bewerken
    Publicatie-opties: hiermee bepaal je de standaard publicatie-opties voor recepten. Dit kan je nog per recept instellen bij het aanmaken van de recepten.
    Weergave-instellingen: moeten de naam van de auteur en de datum getoond worden?
    Reactie-instellingen: hiermee bepaal je de standaard reactie-opties voor recepten.
    Menu-instellingen: hiermee bepaal je in welke menu's een link naar een recept kan toegevoegd worden. Het toevoegen van menu-items zelf kan je tijdens het aanmaken van de recepten.
  3. Klik tenslotte onderaan op Inhoudstype opslaan.
  4. Nu kunnen we velden toevoegen met de link velden beheren naast het inhoudstype.
  5. Er worden bij een nieuw inhoudstype standaard twee velden voorzien, een titelveld en een bodyveld. We gaan het bodyveld hernoemen tot bereidingswijze en dit veld verplicht maken. Klik eerst op bewerken naast het bodyveld.
  6. Verander het label naar bereidingswijze en maak het verplicht. Sla op

Velden toevoegen aan het inhoudstype

Nu voegen we verschillende soorten velden aan het inhoudstype recept toe

Numeriek veld voor de bereidingstijd

Voor de bereidingstijd gebruiken we een numeriek veld, het aantal minuten. Ga als volgt te werk:

  1. Ga naar de pagina om velden voor het recept te beheren. Je ziet het vak veld toevoegen.
  2. Vul de gegevens in en klik onderaan op Opslaan.
    Label: Bereidingstijd
    Veldnaam: bereidingstijd
    Data-type: integer
  3. Het integer-veld heeft geen veldinstellingen, klik op Veldinstellingen indienen.
  4. In de volgende stap kunnen we de opties voor het veld wijzigen:
    Verplicht veld: ja
    Achtervoegsel: minuten (dit wordt na het invulvak weergegeven)
  5. Sla de instellingen op en ga naar Inhoud > Inhoud toevoegen > Recept om te zien of alles klopt.

Tekstveld voor de bron(nen) van het recept

Voor de bron van het recept gebruiken we een tekstveld. We zorgen dat er meerdere waardes ingevuld kunnen worden want er kunnen meerdere bronnen voor een recept zijn. Ga als volgt te werk:

  1. Ga naar de pagina om velden voor het recept te beheren. Je ziet het vak veld toevoegen.
  2. Vul de gegevens in en klik onderaan op Opslaan.
    Label: Bronnen
    Veldnaam: bronnen
    Data-type: tekst
  3. Het tekstveld heeft als instelling de maximum lengte, laat zit staan op 255 en klik Veldinstellingen indienen.
  4. In deze stap kunnen we weer de opties wijzigen:
    Aantal waardes: onbeperkt (zo kunnen we meerdere bronnen in dit veld toevoegen)
  5. Sla de instellingen op en ga naar Inhoud > Inhoud toevoegen > Recept om te zien of alles klopt.

Lijstveld voor de moeilijkheidsgraad

Voor de moeilijkheidsgraad van het recept gebruiken we een selectielijst met drie waardes: makkelijk, gemiddeld en moeilijk. We zouden dit ook met taxonomie kunnen maken wat misschien een betere keuze zou zijn, maar voor de oefening maken we hier een gewone lijst. Ga als volgt te werk:

  1. Ga naar de pagina om velden voor het recept te beheren. Je ziet het vak veld toevoegen.
  2. Vul de gegevens in en klik onderaan op Opslaan.
    Label: Moeilijkheidsgraad
    Veldnaam: moeilijkheidsgraad
    Data-type: lijst (tekst)
    Formulierelement: selectielijst
  3. In de volgende stap kunnen we de lijst met toegestane waardes invullen. Dit kan in het formaat sleutel|label maar het label is niet verplicht. Wij kunnen eenvoudig de drie moeilijkheidsgraden elk op een regel zetten.
  4. Maak in de volgende stap het veld verplicht en zorg dat de standaardwaarde gemiddeld is.
  5. Sla op en ga naar Inhoud > Inhoud toevoegen > Recept om te zien of alles klopt.

Taxonomieveld voor de ingrediënten

Het toevoegen van een lijst met ingrediënten (zonder hoeveelheden) is het interessantst via taxonomie. Zo krijgt ieder ingrediënt automatisch een eigen pagina waarop de recepten met dit ingrediënt getoond worden. Vermits er honderden verschillende ingrediënten bestaan, gaan we geen vooraf gedefinieerde lijst voorzien, maar voegen we ad hoc ingediënten toe (taggen). Ga als volgt te werk:

  1. Ga naar Structuur > Taxonomie > Woordenlijst toevoegen en geef de woordenlijst als naam ingrediënten. We gaan nog geen termen aan deze woordenlijst toevoegen
  2. Ga naar de pagina om velden voor het recept te beheren. Je ziet het vak veld toevoegen.
  3. Vul de gegevens in en klik onderaan op Opslaan.
    Label: Ingrediënten
    Veldnaam: ingredienten
    Data-type: referentie naar een term
    Formulierelement: widget voor taxonomietermen (tagging) met automatische aanvulling
  4. Kies bij de veldinstellingen als woordenlijst ingrediënten.
  5. Verander in de volgende stap het aantal waardes naar onbeperkt, zo kunnen we meerdere ingrediënten aan het veld toevoegen.
  6. Sla op en ga naar Inhoud > Inhoud toevoegen > Recept om te zien of alles klopt.

Bestandsveld voor een bijlage

We kunnen bvb een PDF versie van het recept in een bestandsveld bewaren zodat een bezoeker dit makkelijk kan opslaan en afdrukken. Ga als volgt te werk:

  1. Ga naar de pagina om velden voor het recept te beheren. Je ziet het vak veld toevoegen.
  2. Vul de gegevens in en klik onderaan op Opslaan.
    Label: Bijlage
    Veldnaam: bijlage
    Data-type: bestand
  3. Laat de algemene veldinstellingen ongewijzigd, we willen geen weergaveveld inschakelen (het bestand wordt niet weergegeven, maar moet gedownload worden). klik dus op Veldinstellingen indienen.
  4. In de specifieke veldinstellingen verander je deze zaken:
    Toegestane bestandsextensies: pdf (zo kunnen er enkel PDF bestanden geüpload worden
    Map: pdf (een submap in de map files waarin deze bestanden bewaard worden)
  5. Sla op en ga naar Inhoud > Inhoud toevoegen > Recept om te zien of alles klopt.

Fotoveld voor een afbeelding

Om het recept war aanschouwelijker te maken kunnen we een foto toevoegen. Dit doen we niet met het veldtype bestand maar met een apart veldtype afbeelding. Ga als volgt te werk:

  1. Ga naar de pagina om velden voor het recept te beheren. Je ziet het vak veld toevoegen.
  2. Vul de gegevens in en klik onderaan op Opslaan.
    Label: Foto
    Veldnaam: foto
    Data-type: afbeelding
  3. In de algemene veldinstellingen veranderen we niets. Je zou hier kunnen een standaardafbeelding kiezen die weergegeven wordt voor recepten zonder afbeelding. Klik dus op Veldinstellingen indienen.
  4. Verander de specifieke veldinstellingen als volgt:
    Map: foto
    Alt-veld inschakelen: aangevinkt
    Titelveld inschakelen: aangevinkt
  5. Sla op en ga naar Inhoud > Inhoud toevoegen > Recept om te zien of alles klopt.

Binair veld voor vegetariërs

Een binair veld kan twee waardes bevatten: 0 en 1. Je kan dit gebruiken als een selectievakje dat je al dan niet aanvinkt. We kunnen in deze toepassing een binair veld voor vegetarische gerechten toevoegen. Ga als volgt te werk:

 

  1. Ga naar de pagina om velden voor het recept te beheren. Je ziet het vak veld toevoegen.
  2. Vul de gegevens in en klik onderaan op Opslaan.
    Label: Vegetarisch
    Veldnaam: vegetarisch
    Data-type: Binair
    Formulierelement: een aan/uit keuzevakje
  3. Verander bij de veldinstellingen de waardes voor aan en uit zoals in het voorbeeld:
  4. Sla op en ga naar Inhoud > Inhoud toevoegen > Recept om te zien of alles klopt.

Recepten toevoegen

 

Nu we de velden hebben aangemaakt is het tijd om enkele recepten toe te voegen, zo kunnen we testen of alles naar behoren werkt. We voegen vijf recepten toe:

  1. Spaghetti Bolognaise
  2. Chili con carne
  3. Kaastaart met olijf en tomaat
  4. Caponata
  5. Penne met aubergines

We nemen als voorbeeld spaghetti bolognaise. Ga naar Inhoud > Inhoud toevoegen > Recept. Vul de velden als volgt in:

Titel: Spaghetti bolognaise

Bereidingswijze: open spaghetti bolognaise.pdf en kopieer de tekst in dit vak

Bereidingstijd: 50 minuten

Bronnen: Smulweb 

Moeilijkheidsgraad: makkelijk

Ingrediënten: spaghetti, tomaat, ui, look, spek, gehakt, peper, zout

Bijlage: kies hier het PDF bestand om up te loaden

Foto: kies hier de foto spaghetti bolognaise.jpg

Vegetarisch: laat dit uitgevinkt

Verander de overige instellingen naar eigen smaak en sla op.

Toepassing

Voer nu op dezelfde manier de vier andere recepten in.

De weergave van inhoudstypes aanpassen

De velden van een recept worden nu netjes onder elkaar weergegeven. We zien telkens het label van een veld met daaronder de waarde van het veld. We kunnen deze weergave aanpassen naar onze eigen smaak. Ga als volgt te werk:

  1. Ga naar Structuur > Inhoudstypes en klik op de link weergave beheren naast recept.
  2. Begin met de volgorde van de velden als volgt te veranderen: eerst foto, dan bereidingswijze, bereidingstijd, moeilijkheidsgraad, ingrediënten, vegetarisch, bijlage en tenslotte bronnen. Vergeet niet om de nieuwe volgorde op te slaan.
  3. Vervolgens passen we de labels aan. Een label heeft drie weergavemogelijkheden:
    Boven: het label wordt boven de waarde geplaatst. Dit is vaak de beste keuze.
    Inline: het label wordt links van de waarde geplaatst. Dit is een goede keuze als de inhoud niet te breed is.
    Verborgen: het label wordt niet weergegeven.
    Pas de labels aan zoals in het voorbeeld en sla op.
  4. Tenslotte kunnen we per veld het formaat aanpassen waarin de gegevens weergegeven worden. De mogelijke formaten hangen af van het veldtype. In principe hoeven we hier niks te veranderen, maar experimenteer gerust met de waardes. Sommige veldtypes hebben nog meer mogelijkheden, te herkennen aan .
  5. Momenteel werken we in de standaardweergave, maar je kan ook nog andere weergaves bewerken en instellen. Voor dit inhoudstype is er ook nog een teaserweergave. Dit is de verkorte weergave die bvb gebruikt wordt om het recept op de homepage te tonen. Klik bovenaan op Teaser om de instellingen voor die weergave te zien.
  6. De teaserweergave toont momenteel enkel de bereidingswijze. Verander de teaser weergave zodanig dat de foto, moeilijkheidsgraad en bereidingstijd ook getoond worden.

Extra toepassingen

Nog meer velden

Probeer het inhoudstype recepten te bewerken om nog meer velden toe te voegen. Mogelijke velden zijn: soort keuken (Italiaans, Spaans,...), soort gerecht (voorgerecht, hoofdgerecht, dessert), enz. Misschien kan je zelf nog extra velden bedenken?

Bewerk daarna de reeds ingevoerde recepten om deze nieuwe velden van inhoud te voorzien.

Nog inhoudstypes

Probeer een nieuw inhoudstype film aan te maken voor een filmsite. Mogelijke velden: titel, jaar, genre, regisseur, acteurs, foto, korte inhoud,... Voeg daarna enkele films naar keuze toe. 

Geen filmliefhebber? Maak dan een inhoudtype voor muziekalbums. Mogelijke velden: titel, artist, jaar, genre, aantal nummers, tracktitels, waardering,...

Eigen inhoudstypes

Denk eens na over welke inhoudstypes nuttig zouden kunnen zijn voor jouw website. Recepten, films en muziekalbums zijn slechts enkele voorbeelden, maar er zijn enorm veel mogelijkheden voor inhoudstypes.

Tekst opmaken met Drupal

Totnogtoe hebben we bij het aanmaken van inhoud enkel met platte tekst gewerkt. Platte tekst is in essentie tekst zonder opmaak. Indien we de tekst van opmaak willen voorzien dan moeten we in principe gebruik maken van HTML codes of tags. Maar we kunnen het opmaken ook vereenvoudigen door gebruik te maken van een zogenaamde WYSIWYG editor.

WYSIWYG?

De afkorting WYSIWYG staat voor "What You See Is What You Get". Men bedoelt hiermee een interface waarmee we de opmaak kunnen veranderen, en waarbij de veranderingen onmiddellijk zichtbaar zijn op het scherm.

Er zijn verschillende manieren om een WYSIWYG editor te integreren, maar sinds Drupal 7 wordt aangeraden om met de WYSIWYG module als basis te werken. Deze module voorziet de mogelijkheid om met meerdere editors te werken.

Tekstopmaak

Om de editor goed in te stellen is het belangrijk dat je inzicht verwerft in het systeem voor tekstopmaak dat Drupal voorziet. Ga daarom eerst naar Instellingen > Tekstopmaak. In deze rubriek zie je standaard drie soorten tekstopmaak:

  • Filtered HTML: hierbij kan de tekst beperkt opgemaakt worden, er kunnen bvb geen afbeeldingen of tabellen in de tekst weergegeven worden.
  • Full HTML: hierbij kunnen alle HTML tags gebruikt worden en dus ook afbeeldingen, tabellen of Flash animaties weergegeven worden.
  • Plain text (platte tekst): hierbij kan geen opmaak gebruikt worden, enkel de tekst wordt weergegeven zonder opmaak.

Opgelet: zoals je kan zien is het gebruik van de soorten tekstopmaak afhankelijk van de rollen (administrator, geverifieerde gebruiker, etc). Het is belangrijk dat je niet iedereen zomaar toegang geeft om Full HTML te gebruiken want dit houdt veiligheidsrisico's in. Met bepaalde HTML-tags is het mogelijk om kwaadaardige links of scripts in de tekst op te nemen.

Je kan de instellingen van een soort tekstopmaak wijzigen via de link instellingen.

De WYSIWYG module installeren

We beginnen met de module WYSIWYG te downloaden en te installeren. Deze module vormt de basis om met een editor te werken.

  1. Ga naar de projectpagina van WYSIWYG op drupal.org: http://drupal.org/project/wysiwyg
  2. Kopieer de link naar het .tar.gz bestand voor de 7.x versie
  3. Ga op je Drupal site naar Modules > Installeer een nieuwe module en plak het adres in het tekstvak 
  4. Installeer en activeer de module
  5. Ga naar Instellingen > WYSIWYG profiles. Hier zie je dat er nog geen editors geïnstalleerd hebben. We hebben de keuze tussen de heel wat courante editors, die we apart moeten downloaden en installeren.

De editor CKeditor downloaden en installeren

We moeten een editor kiezen en opteren voor CKeditor. Deze editor is eenvoudig in gebruik en biedt voldoende mogelijkheden. Let wel, we gaan nu geen module installeren via drupal.org, maar wel het pakket CKeditor zelf via de website van de uitgever. Dit is een zogenaamde library (bibliotheek) die we in een aparte map in onze Drupal installatie dienen te plaatsen. Ga als volgt te werk:

  1. Maak een nieuwe map genaamd libraries in de map sites/all/ binnen je Drupal installatie.
  2. Ga naar de website van CKeditor op http://www.ckeditor.com
  3. Klik bovenaan in het menu op Download.
  4. Download het ZIP-bestand voor CKeditor.
  5. Pak de inhoud van het ZIP-bestand uit in de map libraries die je zonet hebt aangemaakt.

CKeditor activeren en configureren

  1. Ga naar je Drupal site opnieuw in de rubriek Instellingen > WYSIWYG profiles.
  2. Kies zowel voor Filtered HTML als voor Full HTML voor CKeditor uit de keuzelijst en sla op.
  3. Na het opslaan kunnen we de instellingen bewerken. Klik op de link Bewerken naast Filtered HTML.
  4. Verander in de rubriek Basic Setup de interface language naar Nederlands.
  5. Activeer in de rubriek Buttons en Plugins deze knoppen: Bold, Italic, Bullet list, Numbered list, Ongedaan maken, Redo, Link, Unlink, Anker, Cut, Copy, Paste, Select all
  6. Sla op
  7. Ga naar Inhoud toevoegen en kies voor een artikel. Merk op dat een artikel standaard gebruik maakt van Filtered HTML, dus dat de knopjes van CKeditor zichtbaar zijn.
  8. Experimenteer zelf met de mogelijkheden, het gebruik van CKeditor is gelijkaardig aan het gebruik van een tekstverwerker als Word of een e-mailprogramma als Outlook.

Toepassing

Bewerk nu zelf het WYSIWYG profiel voor Full HTML en activeer hierbij alle mogelijke knoppen. Maak vervolgens nog een artikel maar verander de tekstopmaak naar Full HTML en experimenteer met de nieuwe knoppen.

Werken met afbeeldingen in inhoud

We hebben al één methode gezien om afbeeldingen bij inhoud weer te geven. We kunnen namelijk werken met een afbeeldingsveld en hiermee afbeeldingen uploaden. Deze methode heeft enkele voordelen:

  • De afbeeldingen worden opgeslagen in de database waardoor ze makkelijker te structureren en weer te geven zijn
  • De afbeeldingen kunnen automatisch in verschillende groottes weergegeven worden naargelang de context (bvb teaserweergave en normale weergave)
  • De afbeeldingen worden met behulp van het thema automatisch op een standaardplaats weergegeven

Hoewel bovenstaande methode aan te raden is wanneer je met afbeeldingen werkt, wil je soms meer flexibiliteit. Je wil misschien meerdere afbeeldingen op een pagina weergeven, de afbeeldingen op een willekeurige manier weergeven tussen de tekst of de afbeeldingen naar een bepaald adres doen verwijzen. In deze gevallen is het mogelijk om afbeeldingen manueel up te loaden en zelf ergens in de body tussen de tekst te plaatsen.

Hiervoor dienen we een module te installeren die ons toelaat om bestanden up te loaden naar de server. Er bestaan verschillende modules die dit kunnen maar we kiezen voor de populaiste module, IMCE. Om IMCE te integreren met de WYSIWYG module hebben we nog een extra module nodig, de IMCE WYSIWYG Bridge.

IMCE installeren en integreren met WYSIWYG

  1. Installeer de module IMCE vanaf http://drupal.org/project/imce
  2. Installeer de module IMCE WYSIWYG Bridge vanaf http://drupal.org/project/imce_wysiwyg
  3. Activeer beide modules
  4. Ga naar Instellingen > WYSIWYG profiles en bewerk het profiel Full HTML.
  5. In de rubriek Buttons en Plugins is er een extra optie bijgekomen, IMCE. Vink dit aan en sla op.

Afbeeldingen uploaden en invoegen

Ga als volgt te werk om een afbeelding op te laden en in een tekstvak in te voegen:

  1. Begin met nieuwe inhoud te maken, bvb een artikel
  2. Verander de tekstopmaak naar Full HTML
  3. Klik op het knopje om afbeeldingen in te voegen 
  4. We kunnen hier een URL invoegen om een afbeelding van een andere website weer te geven, maar we willen een afbeelding van de server weergeven. Klik op de knop Bladeren op server
  5. Een nieuw venster wordt geopend voor IMCE. Hier zie je de de inhoud van de map sites/default/files in Drupal.
  6. Klik op Uploaden. Kies een bestand op de harde schijf met de knop Bladeren. Je kan opteren om automatisch thumbnails of kleinere versies van de afbeelding aan te maken. Klik tenslotte onderaan het venster op de knop uploaden om dit bestand door te sturen.
  7. Klik vervolgens op het bestand dat je hebt upgeload en klik bovenaan op Insert File om de foto naar de editor door te sturen.
  8. Terug in de editor kan je de eigenschappen van de afbeelding verder aanpassen. Je kan bvb een alternatieve tekst ingeven of de uitlijning van de afbeelding t.o.v. de tekst wijzigen (om de afbeelding links of rechths naast de tekst weer te geven). Klik tenslotte op OK om de afbeelding in te voegen.
  9. De afbeelding wordt nu ingevoegd in het tekstveld. Je kan de eigenschappen van de afbeelding steeds bewerken door de afbeelding te selecteren en opnieuw op het knopje te klikken waarmee je de afbeelding hebt ingevoegd.

Opmerking 1: Je kan op gelijkaardige manier Flash-animaties invoegen, maar gebruik hiervoor het knopje met het Flash logo.

Opmerking 2: Indien je veel afbeeldingen hebt die je wil invoegen kan het uploaden met IMCE nogal omslachtig zijn. In dat geval kan je de bestanden ook gewoon in de map /sites/default/files plaatsen via de verkenner. Je kan ze dan op dezelfde manier in het tekstvak invoegen. Let wel, dit kan enkel zolang we met een lokale installatie van Drupal werken. Eens je site online staat zal je niet meer met de verkenner kunnen werken maar dien je een FTP programma te gebruiken.

Opmerking 3: Vermits met deze methode het pad (de verwijzing) naar de afbeeldingen in de tekst opgeslagen wordt, kan je hiermee problemen krijgen als je de site lokaal aanmaakt en achteraf online zet. Stel dat je lokaal de site aanmaakt op localhost:8080/drupal en je die achteraf online zet op www.mijnsite.be dan zullen de afbeeldingen niet correct weergegeven worden, tenzij je de site zou plaatsen op www.mijnsite.be/drupal (hetzelfde pad als lokaal).

Toepassingen

1. Foto naast tekst

Maak een nieuw artikel aan met inhoud naar keuze, maar zorg dat er een afbeelding naast de tekst weergegeven wordt zoals in onderstaand voorbeeld. De truc is om de afbeelding voor de tekst in te voegen en bij de afbeeldingsopties te kiezen voor een rechtse uitlijning.

2. Blok met afbeelding

Je kan in eigen blokken ook Filtered HTML en Full HTML gebruiken. Maak een nieuw blok waarin je een afbeelding plaatst met een link naar een andere website. In de eigenschappen van de afbeelding kan je het adres van de link instellen.

Een testsite aanmaken

Nu we de basis van Drupal onder de knie hebben, kunnen we wat dieper gaan. Hiervoor installeren we eerst een nieuwe testsite die we automatisch opvullen met willekeurige inhoud. Ga als volgt te werk:

  1. USBwebserver is al geïnstalleerd. We dienen geen nieuwe versie te installeren want we kunnen verschillende websites draaien op dezelfde webserver
  2. Download de laatste versie van Drupal core via http://drupal.org/project/drupal (download het ZIP-bestand)
  3. Pak het zip-bestand uit in de map root van USBwebserver. Er komt nu een nieuwe map drupal-7.x te staan.
  4. Hernoem de map drupal-7.x naar testsite
  5. Ga naar http://localize.drupal.org en klik op Dutch (Nederlands)
  6. Download het Nederlandse vertaalbestand (drupal-7.x-dutch.po) en sla het op in de map testsite/profiles/standard/translations
  7. Ga naar PHPMyAdmin en maak een nieuwe database genaamd testsite.
  8. Surf nu naar het adres http://127.0.0.1:8080/testsite om de installatie te starten
  9. Kies voor een Standard installatie
  10. Kies Nederlands als taal
  11. Vul de database-instellingen correct in:
    Database-naam: testsite
    Databasegebruikersnaam: root
    Databasewachtwoord: usbw
    Databasepoort (bij uitgebreide opties): 3307
  12. Geef de site als naam Testsite en vul de overige gegevens in
  13. De testsite is nu geïnstalleerd
  14. Ga naar de rubriek modules en activeer deze modules: Blog, Forum, Poll en Update manager

Inhoud automatisch aanmaken

Momenteel ziet onze site er nogal leeg uit. In plaats van tijd te stoppen in het maken van test-inhoud bestaat er ook een module die automatisch willekeurige inhoud aanmaakt. DIt is de module devel generate die deel uitmaakt van de module devel, een populaire module bij ontwikkelaars (developers) van Drupal sites. We gaan de devel-module eerst installeren.

  1. Kopieer de link naar de 7.x versie van de module devel op http://drupal.org/project/devel
  2. Ga naar Modules > Nieuwe module installeren en plak de link
  3. Activeer de modules Devel en Devel generate en sla op
  4. Ga Naar Instellingen > Ontwikkeling. In deze rubriek vind je verschillende links om inhoud, menu's gebruikers, enz aan te maken (Generate content, genereate menus,...)
  5. Klik op Generate users en maak 50 gebruikersaccounts aan. Controleer in de rubriek personen of dit klopt.
  6. Ga naar Instellingen > Generate terms en maak 10 termen aan in de woordelijst tags.
  7. Ga terug naar Instellingen > Ontwikkeling en klik op Generate content. Maak 50 nodes aan en stel maximum 5 comments per node in. Controleer in de rubriek inhoud of de inhoud aangemaakt werd
  8. Je zou op dezelfde manier woordenlijsten en menus automatisch kunnen genereren

We hebben nu een functionele testsite met inhoud.

Werken met views

Views is niet zonder reden de populairste contrib-module voor Drupal. Veel ontwikkelaars kunnen gewoonweg niet zonder van deze essentiële module. Met views kunnen we namelijk op een eenvoudige manier lijsten maken van de inhoud op onze website. Zo'n lijst kan op allerlei manieren weergegeven worden, bvb in een tabel, in een rasterweergave, op een kalender of op een interactieve kaart. Met views kan je bvb:

  • De meest recente artikels weergeven, gesorteerd volgens de postdatum
  • Een lijst met blog-items weergeven die gefilterd kan worden op onderwerp op tags
  • Een fotogallerij aanmaken en weergeven
  • RSS feeds aanmaken die de meest recente inhoud van je site weergeven

Views installeren

Views hangt af van de module CTools, we moeten die dus eerst installeren. Handig bij views is ook de module advanced help. Deze module toont meer hulpteksten dan de standaardhulp in Drupal. Dit is niet vereist, maar wordt toch aangeraden

  1. Installeer de module CTools vanaf http://drupal.org/project/ctools
  2. Installeer de module Views vanaf http://drupal.org/project/views
  3. Installeer de module Advanced Help vanaf http://drupal.org/project/advanced_help
  4. Activeer de modules CTools, Views, Views UI en Advanced help

Een eerste view aanmaken

Omdat de mogelijkheden van views enorm uitgebreid zijn, beginnen we met een eenvoudige view aan te maken. We willen een lijst krijgen met alle artikels, gesorteerd volgens datum. Ga als volgt te werk:

  1. Ga naar Structuur > Views en klik bovenaan op Add new view.
  2. Vul de gegevens in zoals in het voorbeeld
  3. De view wordt nu aangemaakt. Als resultaat krijg je een pagina met artikels, aflopend gesorteerd volgens datum en met een menulink en pad

Een view bewerken

We hebben onze eerste view aangemaakt met behulp van de snelle methode. Maar we kunnen views nog veel gedetailleerder instellen in het bewerkvenster voor views. We bekijken de mogelijkheden.

Ga naar Structuur > Views. Klik op de link Bewerken naast de view Recente artikels.

Je komt nu in het overzichtsvenster terecht waarbij je de eigenschappen en opties van deze view kan bewerken door op de links te klikken. Onder de instellingen is er een handige voorbeeldweergave waar je de veranderingen onmiddellijk ziet nog voor ze opgeslagen worden.

Titel

In deze rubriek kan je de titel van de view wijzigen. Klik op de titel en verander hem naar Nieuwste artikels.

Formaat

Hier kan je bij formaat het soort weergave kiezen, bvb tabel, lijst, grid (rasterweergave) en voor ieder formaat de instellingen wijzigen. Laat het in dit voorbeeld staan op unformatted list.

Bij weergeven kan je bepalen welke inhoud weergegeven moet worden. Je hebt de keuze tussen inhoud en velden. Inhoud toont de inhoud zoals die standaard getoond wordt (op basis van de weergave-instellingen van de inhoudstypes). Met velden heb je meer controle over welke velden al dan niet in deze view weergegeven moeten worden.

Laat dit voorlopig staan op inhoud - teaser.

Fields

Indien je in de rubriek formaat gekozen had voor velden, dan kan je hier bepalen welke velden weergegeven worden. Heb je in de rubriek formaat voor inhoud gekozen, dan kan je hier niks wijzigen.

Filter criteria

Hier bepaal je welke inhoud weergegeven moet worden op basis van filters. De huidige view heeft twee filters: er wordt enkel gepubliceerde inhoud getoond en enkel inhoud van het type artikel.

We kunnen bvb nog een filter toevoegen waarbij enkel artikels getoond worden die twee of meer reacties hebben. Ga als volgt te werk:

  1. Klik op de link Toevoegen bij Filter criteria
  2. Vink Inhoud: aantal reacties aan en klik op Add and configure filter criteria
  3. Kies als operator voor Is greater than or equal to, vul bij Value 2 in en klik op Apply (all displays)
  4. Er worden nu enkel artikels met 2 of meer reacties weergegeven

Sort criteria

Hier bepaal je hoe de inhoud geordend moet worden. Momenteel wordt er geordend volgens de post date, de datum waarop de artikels geplaatst werden. De sorteervolgorde is desc wat staat voor descending (aflopend, dus de nieuwste items eerst).

Verander dit zodat er gesorteerd wordt op de datum van de laatste reactie. Ga als volgt te werk:

  1. Klik op Inhoud: Post date (desc) om dit filter te bewerken
  2. Klik onderaan op verwijderen om dit filter te verwijderen
  3. Klik op de link Toevoegen bij Sort criteria
  4. Vink Inhoud: last comment time aan en klik op Add and configure sort criteria
  5. Kies in deze stap voor Sort descending en klik op Apply (all displays)
  6. De items worden nu gesorteerd volgens meest recente reactie

Page settings

In deze rubriek kan je het pad, het menu en de toegangsrechten wijzigen. Dit werkt op een gelijkaardige manier als bij het toevoegen of bewerken van inhoud.

  • Verander het pad van recente-artikels naar nieuwste-artikels door op de link te klikken
  • Verander de tekst van het menu van Recente artikels naar Nieuwste artikels door op de link te klikken

Kop en Voet

Hier kan je nog stukken tekst toevoegen die boven of onder de lijst met items weergegeven worden. Je kan zelfs een andere view boven of onder deze view weergeven. Voeg als volgt een koptekst toe:

  1. Klik op Toevoegen naast Kop
  2. Vink Global: Text area aan en klik op Add and configure
  3. Typ volgende tekst in het tekstvak: Bekijk hier onze nieuwste artikels en klik op Apply (all displays)
  4. De tekst wordt nu boven de artikels weergegeven

Pager

In deze rubriek kan je bepalen hoeveel items weergegeven moeten worden en of er een pager weergegeven met worden indien de lijst uit meerdere pagina's bestaat. Je hebt verschillende mogelijkheden, klik op Full om deze te zien:

  • Display a specified number of items: deze optie toont X aantal items, zonder link om meer items te zien
  • Display all items: hiermee worden alle items weergegeven. Let op want dit kan tot langs pagina's leiden
  • Paged output, full pager: hiermee worden alle items weergegeven, maar in pagina's van X aantal items. Onderaan de pagina komt een full pager met links naar alle pagina's
  • Paged output, mini pager: hiermee worden alle items weergegeven, maar in pagina's van X aantal items. Onderaan de pagina komt er een mini pager met links naar de volgende en vorige pagina

Verander de pager naar een mini pager en zorg dat er 5 items per pagina weergeven worden in plaats van 10.

Advanced

In de rubriek advanced kan je meer geavanceerde instellingen wijzigen zoals contextuele filters, relaties, enz. Deze instellingen komen later aan bod.

Vergeet niet om de wijzigingen in de view op te slaan met de knop Opslaan bovenaan de pagina!

De weergave van een view aanpassen

Onze view geeft nu de artikels weer in de inhoudsweergave, maar dit kan ook anders. Als voorbeeld willen we dezelfde artikels weergeven in een overzichtelijke tabel met een aantal tabellen. Ga als volgt te werk:

  1. Ga naar Structuur > Views en bewerk de view Recente artikels
  2. Klik bij Formaat op de link Unformatted list en kies voor Tabel. Klik op Apply (all displays).
  3. Klik in de volgende stap voorlopig op Apply (all displays) zonder iets te wijzigen. We moeten namelijk eerst de velden kiezen die we in de tabel willen weergeven.
  4. In de rubriek Fields zie je nu dat er één inhoudsveld wordt weergegeven, de titel. Klik op toevoegen om nog meer velden toe te voegen.
  5. Vink in de lijst volgende velden aan:
    Inhoud: Aantal reacties
    Inhoud: Image
    Inhoud: Post date
    Klik op Add and configure fields. Nu kan je de eigenschappen voor ieder veld afzonderlijk bewerken
  6. Eerst zie je de eigenschappen van het veld Aantal reacties. Hier dienen we niks te wijzigen. Klik op Apply (all displays).
  7. Nu zien we de eigenschappen van de afbeelding. Verander hier de afbeeldingsstijl naar thumbnail zodat we een kleine versie van de afbeelding in de tabel weergeven. Zorg ook dat de afbeelding gelinkt is aan de inhoud zodat je erop kan klikken. Klik daarna weer op Apply (all displays).
  8. Tenslotte komen we bij de instellingen van het veld post date. Verander hier het label naar Datum en kies voor een kort datumformaat. Klik wederom op Apply (all displays).
  9. Nu kunnen we de volgorde van de velden veranderen. Klik in de rubriek velden op het driehoekje naast toevoegen en kies voor rearrange.
  10. Verander de volgorde als volgt: Afbeelding, Titel, Datum, Aantal reacties
    Sla op
  11. Klik tenslotte bij Formaat op de link instellingen naast tabel. Hier kunnen we de tabel nog verder verfijnen:
    Verander de uitlijning (align) van de datum en het aantal reacties naar Rechts
    Maak de kolommen datum en aantal reacties sorteerbaar. Zo kan je de tabel op verschillende manieren sorteren door op de kolomkoppen te klikken
    Verander de standaardvolgorde van de kolom datum naar descending (aflopend) en vink default sort aan zodat er standaard op datum gesorteerd wordt
    Klik tenslotte op Apply (all displays).
  12. Sla de wijzigingen in de view op (knop bovenaan). De artikels worden nu in een tabel weergegeven.

Toepassing

Wijzig deze view opnieuw en zorg ervoor dat:

  • Er geen label voor het veld afbeelding weergegeven wordt
  • Alle items in de tabel weergegeven worden (en dus niet de eerste X items)
  • Er een extra kolom met de tags in de tabel komt te staan
  • Er niet meer gefilterd wordt op het aantal reacties, dus alle artikels worden weergegeven, ongeacht het aantal reacties

Workshop: activiteiten

In deze workshop maken we een nieuw inhoudstype voor activiteiten. We maken hiervoor gebruik van de module date. Vervolgens maken we verschillende views om de lijst met activiteiten weer te geven. Tenslotte maken we met de module calendar een kalender toe waar de activiteiten in weergegeven worden.

De module date

Standaard is er in Drupal geen veld voor handen waarin we datums kunnen opslaan. Er is wel de uitstekende module date die dit voorziet. We gaan deze module eerst downloaden en installeren:

  1. Installeer de module date vanaf http://drupal.org/project/date
  2. Activeer de modules Date API, Date, Date Popup en Date Views

Inhoudstype activiteit aanmaken

Nu we datumvelden kunnen gebruiken is het tijd om een nieuw inhoudstype aan te maken voor activiteiten. Ga als volgt te werk:

  1. Ga Naar Structuur > Inhoudtypen en klik op Inhoudstype toevoegen
  2. Vul als volgt in en sla op:
    Naam: Activiteit
    Beschrijving: Voeg hiermee aciviteiten met datum en plaats in
    Label voor het titelveld: Naam
    Publicatie-opties: NIET aangeraden op voorpagina
    Weergave-instellingen: auteur en datum NIET tonen
    Reactie-instellingen: Gesloten
  3. Voeg nu een veld toe voor de datum van de activiteit:
    Label: Datum
    Veldnaam: datum
    Data-type: Date
    Widget: Pop-up calendar
    Veldinstellingen: laat dit ongewijzigd
    Activiteit-instellingen: laat dit ongewijzigd
  4. Voeg nu een veld toe voor de plaats van de activiteit:
    Label: Plaats
    Veldnaam: plaats
    Data-type: tekst
    Laat de overige opties ongewijzigd
  5. Voeg tenslotte nog een veld toe voor de kostprijs van de activiteit:
    Label: Kostprijs
    Veldnaam: kostprijs
    Data-type: Decimaal
    Veldinstellingen: laat dit ongewijzigd
    Activiteit-instellingen: gebruik € als voorvoegsel of EUR als achtervoegsel

Het inhoudstype activiteit met de nodige velden is nu aangemaakt. Je kan vanzelfsprekend nog extra velden toevoegen, bvb een afbeelding, een taxonomielijst met het soort activiteit of een selectievakje voor privé-activiteiten. 

 

Activiteiten toevoegen

Ga nu naar Inhoud > Inhoud Toevoegen > Activiteit en voeg via dit formulier minstens activiteiten toe. Neem onderstaande activiteiten als voorbeeld of kies zelf activiteiten maar zorg dat de meeste activiteiten in de toekomst plaatsvinden.

Naam Body Datum Plaats Kostprijs
Sinterklaasfeest vul zelf in 06-12-2011 Oostende 5
Valentijnsparty vul zelf in 14-02-2012 Nieuwpoort 10
Nieuwjaar vul zelf in 01-01-2012 Diksmuide 25
Verjaardagsfeest vul zelf in 17-01-2012 Brugge 0
Kerstfeest vul zelf in 25-12-2011 De Panne 20
Studentenfuif vul zelf in 01-10-2011 Gent 0

Bekijk de toegevoegde activiteiten en pas indien nodig de weergave van de velden aan in de rubriek Structuur > Inhoudstypen. Zo kan je bvb de datum, plaats en kostprijs onder de body weergeven.

Toepassing: zorg er alvast voor dat de teaser-weergave van activiteiten ook de datum en de plaats van de activiteit weergeven.

Een view voor activiteiten maken

In de volgende stap maken we een view voor onze activiteiten. Deze view gebruikt dezelfde gegevens maar heeft twee weergaves (displays):

  • Een pagina met een chronologisch overzicht van alle activiteiten met uitleg. Van hieruit kan een bezoeker doorklikken naar de pagina van een activiteit. Er wordt ook een menu-item "activiteiten" voorzien naar deze view vanuit het hoofdmenu.
  • Een blok met een eenvoudige lijst van de eerstvolgende activiteiten, met de datum en naam van de activiteit. Dit blok kunnen we op iedere pagina weergeven.

We maken dus één enkele view die de gegevens op twee manieren weergeeft. Ga als volgt te werk.

  1. Ga naar Structuur > Views,  klik op Add new view en vul onderstaande gegevens in.


  2. De pagina en het blok worden nu aangemaakt met standaardinstellingen, die we in het overzichtsvenster van views verder naar onze wens kunnen aanpassen. We willen enkel activiteiten tonen die nog moeten plaatsvinden, dus voegen we een extra filter toe. Klik op toevoegen bij Filter criteria, vink Inhoud: Datum aan en klik op Add and configure filter criteria. Op de volgende pagina moeten we niks veranderen, klik op Apply and continue.
  3. Verander in dit venster de criteria voor dit filter als volgt:
  4. We willen de activiteiten in chronologische volgorde weergeven. Hiervoor dienen we een soorteercriterium toe te voegen dat sorteert volgens de datum van de activiteit. Klik op de link toevoegen bij Sort criteria. Selecteer het veld Inhoud: Datum en klik op Add and configure sort criteria. Laat in dit venster de sorteervolgorde op ascending (oplopend) en klik Apply (all displays).
  5. Sla de view op door bovenaan rechts op de knop Opslaan te klikken en ga terug naar de homepage. Klik daar op de link Activiteiten in het hoofdmenu om de lijst met activiteiten te zien.
  6. Nu voegen we het blok toe. Ga naar Structuur > Blokken en plaats het blok View: Activiteiten: Block in de Eerste zijbalk. Vergeet onderaan niet op Blokken opslaan te klikken.
  7. Ga terug naar de homepage en bekijk het blok. Zoals je ziet wordt de datumveld niet in het blok weergegeven, dit gaan we veranderen. Klik op het radertje rechts bovenaan in het blok en kies edit view. Je komt nu in de blokweergave van de view terecht, waar we het datumveld kunnen toevoegen.
  8. Klik op toevoegen bij Fields. Kies opnieuw het veld Inhoud: Datum en klik Add and configure fields.
  9. We willen dat dit veld enkel in het blok weergegeven wordt en niet op de pagina met activiteiten, want daar staat de datum al. Kies daarom bovenaan in het venster voor This block (override) in plaats van All displays. Als je meerdere weergaves in een view hebt is het belangrijk om deze selectielijst in de gaten te houden, dit wordt vaak vergeten.
    Zorg er verder voor dat er geen label weergegeven wordt en kies voorlopig de datumstijl Kort. Klik op Apply (this display).
  10. Klik bij Fields op rearrange en zorg ervoor dat de datum eerst weergegeven wordt, dan pas de titel.
  11. Klik in de rubriek Formaat op de Instellingen (naast Weergeven: Fields). Vink bij Inline fields de beide velden aan. Zo worden ze niet onder elkaar, maar naast elkaar weergegeven.
  12. Klik in de rubriek Formaat op Unformatted list en verander dit naar een HTML list met standaardinstellingen.
  13. Sla de view op en bekijk het resultaat op de site.

Het datumformaat wijzigen

Datums worden wereldwijd op vele manieren weergegeven. Zo worden in Amerika datums doorgaans in het formaat Maand/Dag/Jaar geschreven, dus bvb 11/20/2011 in plaats van 20/11/2011 bij ons. Drupal weet flexibel met dit probleem om te gaan door het gebruik van zogenaamde datumtypes. Dit zijn een soort sjablonen voor datumweergaves (bvb lang, middelgroot, kort) waarmee je dezelfde datum op verschillende manieren kan weergeven.

Wij willen twee zaken doen, de datums weergeven in het Europese formaat en enkel de datum weergeven (dus niet de tijd) in het blok met activiteiten.

Bestaande datumtypes wijzigen

De bestaande (standaard)datumtypes vind je terug in de rubriek Instellingen >  Regionale instellingen en taal > Datum en tijd. Er zijn drie standaardtypes die reeds gebruikt worden op je Drupal-site, lang, middelgroot en kort. Verander de formaten van deze types naar het Europese formaat en sla op.

Eigen formaten en types toevoegen

Voor ons blok met activiteiten hebben we een kort datumformaat nodig met enkel de datum. Dit moeten we zelf aanmaken, met behulp van de standaardvariabelen die in PHP gebruikt worden. In PHP wordt een datumformaat gevormd door verschillende letters. Het formaat d/m/Y komt bvb overeen met de datumweergave 20/11/2011. De kleine letter d is dus de dag van de maand (altijd met twee getallen dus 01, 02,..), de kleine letter m de maand (ook met twee getallen) en de hoofdletter Y is het jaartal (met vier getallen). Meer informatie hiervover vind je op http://be.php.net/manual/en/function.date.php

In ons voorbeeld willen we een weergave als volgt 20-11-11, dit bekomen we met de code d-m-y

  1. Ga naar Instellingen >  Regionale instellingen en taal > Datum en tijd en klik op het tabblad Formaten. Er zijn nog geen aangepaste formaten, klik op Opmaak toevoegen. Hier moeten we het formaat ingeven met behulp van PHP code.
  2. Vul d-m-y in en klik op Opmaak toevoegen.
  3. Keer terug naar het tabblad Typen en klik op Voeg een datumtype toe. Vul de gegevens in zoals hieronder en sla op
  4. Probeer nu zelf het blok te wijzigen zodat de korte datum weergegeven wordt. Bewerk daarvoor de view van het blok en verander in de rubriek Fields de instellingen voor het datumveld.

Een kalender toevoegen

Met behulp van de module Calendar kunnen we op een eenvoudige manier een kalender weergeven op onze website. Vervolgens kunnen we eender welke inhoud waaraan een datum verbonden is op deze kalender weergeven. Eigenlijk is de kalender gewoon een weergave van een view, wat het een erg flexibel systeem maakt.

  1. Installeer en activeer de module Calendar vanaf het adres http://drupal.org/project/calendar
  2. Ga naar Structuur > Views. Er is een nieuwe view bijgekomen, calendar
  3. Bewerk deze view. Er zijn reeds verschillende weergaves actief: een maandweergave, weekweergave, dagweergave, jaarweergave, blokweergave en een "upcoming" blok.
      
    Standaard geven deze alle inhoud weer volgens datum waarop die aangemaakt of bewerkt is, ongeacht het type. Wij willen enkel de activiteiten weergeven en dit volgens de datum waarop de activiteit plaats vindt en niet de datum waarop we de activiteit aangemaakt hebben.
  4. Klik bij Fields op Inhoud: Updated date en onderaan op verwijderen.
  5. Klik bij Fields op toevoegen en voeg het veld Inhoud: datum toe. Vink bij de opties Exclude from display aan. Zo wordt de datum niet in het vakje van de kalender weergegeven maar kan de datumwaarde wel gebruikt worden door de kalender.
  6. We willen enkel activiteiten weergeven. Klik daarom bij Filter criteria op toevoegen en voeg het criterium Inhoud: Type toe. Kies enkel voor Activiteiten als inhoudstypen en sla op.
  7. (optioneel) Klik bij Sort Criteria op Inhoud: Updated date en onderaan op verwijderen.
  8. (optioneel) Klik bij Sort Criteria op toevoegen en voeg het veld Inhoud: datum toe met standaardinstellingen.
  9. Klik in de rechterkant van het venster van views op Advanced om de geavanceerde instellingen te wijzigen. Deze view maakt gebruik van zogenaamde contextuele filters. Dit betekent dat de view het webadres gebruikt om de inhoud te filteren. Deze pagina staat bvb op standaard op het pad /calendar/month. Maar iedere maand heeft een aparte pagina. Door de waarde van een veld als argument in het adres mee te geven weet de view welke maand weergegeven moet worden. Het adres wordt dan bvb /calendar/month?month=2012-02. Dit kan met contextuele filters. 
  10. Klik bij Contextual filters op Datum: Date (node) (Inhoud: Updated date). Zorg dat in de rubriek Date fields enkel de optie Inhoud: Datum (field_datum) aangevinkt is.
  11. Vermits de tekst Contextual Filters cursief gedrukt staat weten we dat hier specifieke instellingen gebruikt worden voor deze (maand)weergave. We dienen op dezelfde manier nog de andere pagina's aan te passen. Herhaal dus de laatste stap voor de andere weergaves van de view: Week, Day, Year en Block.
  12. Klik opnieuw op de weergave Month. Verander de instellingen zodat er een link "Kalender" naar deze view getoond wordt in het hoofdmenu (zie de rubriek page settings).
  13. Verander tenslotte de titel van de view naar Kalender en Vergeet de view niet op te slaan.
  14. Ga naar de homepage en klik op de link Kalender in het hoofdmenu. Verifieer of alles werkt.
  15. Voeg het blok View: Calendar: Block toe aan de Eerste zijbalk en test dit uit.

Bij het toevoegen van nieuwe activiteiten komen deze automatisch in de kalender te staan.

 

Workshop: foto-albums

In deze workshop maken we foto-albums. We maken een nieuw inhoudstype dat we uitsluitend via views weergeven. Verder gebruiken we afbeeldingsstijlen om afbeeldingen in verschillende formaten weer te geven. Tenslotte geven we foto's weer in een virtuele lichtbak of lightbox.

Inhoudstype foto-album

We beginnen met het maken van een nieuw inhoudstype voor foto-albums. Ga als volgt te werk:

  1. Ga naar Structuur > Inhoudstypen > Inhoudstype toevoegen en stel het inhoudstype in:
    Naam: Foto-album
    Beschrijving: voeg hiermee albums met foto's toe
    Publicatie-opties: niet aangeraden op de voorpagina
    Laat de andere opties ongewijzigd en sla op
  2. Klik op velden beheren bij foto-album en voeg een veld toe voor de foto's:
    Label: Foto's
    Veldnaam: fotos
    Veldtype: Afbeelding
    Sla op
  3. Laat de eerste stap met algemene veldinstellingen ongewijzigd en klik op Veldinstellingen indien.
  4. Verander de Foto-album-instellingen als volgt:
    Map: fotos
    Alt-veld inschakelen: ja
    Titelveld inschakelen: ja
    Aantal waardes: onbeperkt
    Sla op

Het inhoudstype is nu aangemaakt.

Foto-album toevoegen

We kunnen nu een eerste foto-album toevoegen. Ga naar Inhoud > Inhoud toevoegen > Foto-album en voeg een album toe met foto's naar keuze (bvb de voorbeelden van afbeeldingen uit Windows). Noem het album Voorbeeldfoto's en voeg bij iedere foto een alternatieve tekst en titel in.

Sla het album op. Je zal merken dat de standaardweergave van het album beter kan. Dit gaan we nu oplossen door niet met de standaardweergaves te werken, maar een view aan te maken waarmee zowel het album overzicht als de foto's per album weergegeven worden.

Een view om albums weer te geven

We maken dus een view met twee displays:

  • Het algemene overzicht van alle foto-albums. Dit komt op het adres /albums te staan. Als een bezoeker op een album klikt dan wordt het tweede display weergegeven waarin de foto's van dat specifieke album staan.
  • Een view waarin één specifiek album weergegeven wordt. Dit komt op het adres /album/ID te staan. ID is hier een variabele factor, dit kunnen we instellen met behulp van een contextuele filter

De overzichtsview

  1. Ga naar Structuur > Views en klik Add new view. Gebruik de wizard om snel een eerste view aan te maken. We willen inhoud van het type foto-albums als een grid (raster) met velden weergeven. Stel dit als volgt in en klik continue & edit:
  2. Momenteel wordt enkel het veld Inhoud: Titel weergegeven. Voeg nog twee velden toe, Inhoud: Foto's en Inhoud: Nid (Nid is het node ID van het foto-album). Stel deze velden als volgt in:
    Inhoud: Foto's: geen label en afbeeldingsstijl medium. Verander bij multiple field settings het vak display all value(s) naar display 1 value(s). Zo wordt er per album slechts één foto weergegeven.

    Inhoud: Nid: geen label en vink ook exclude from display aan. Dit veld hoeft niet weergegeven worden, we gaan dit enkel gebruiken om een link te maken naar de afzonderlijke albums.
  3. We kunnen nu de ID-waarde (uit Inhoud: Nid) als token gebruiken om een link te maken naar de afzonderlijke albums. Voorwaarde hiervoor is dat het veld vóór de andere velden weergegeven wordt. Klik dus bij Fields op het driehoekje naast toevoegen en kies rearrange. Verander de volgorde: eerst Nid, dan Foto's, dan Titel.
  4. Klik daarna bij fields op Inhoud: Foto's om dit veld te bewerken. Zoek de rubriek Rewrite results en vink hier Output this field as a link aan. Bij het link path vul je album/[nid] in en sla je op. Als je nu op de foto klikt dan kom je op de het adres /album/123 uit. Deze pagina's moeten we nog aanmaken.
  5. We doen nu hetzelfde voor de titel, die nog aan de oorspronkelijke pagina gekoppeld is. Klik dus op Inhoud: Titel en vink Link this field to the original piece of content uit. Pas daarna de rubriek Rewrite results aan zoals hierboven. 
  6. Verander tenslotte de Display name van de view (bovenaan links) van Page naar Overzichtweergave.
  7. Sla tenslotte de view op (bovenaan rechts) en test de overzichtsweergave uit vanaf het hoofdmenu.

Een view per foto-album

De links naar de individuele foto-albums werken nog niet want we dienen hiervoor nog een aparte display aan te maken. We kunnen dit doen binnen dezelfde view.

  1. Bewerk opnieuw de view Foto-albums.
  2. Klik bovenaan naast de display overzichtsweergave op +Add en kies vervolgens voor een pagina. De nieuwe pagina krijgt alle standaardeigenschappen uit de overzichtsweergave.
  3. Verander de Display name naar albumweergave.
  4. Verander de instellingen bij het Formaat Grid zodat de foto's in 3 in plaats van 4 kolommen weergegeven worden.
  5. We dienen het veld Foto's aan te passen zodat alle foto's weergegeven worden en er geen link meer is. Klik dus bij fields op inhoud: Foto's en bewerk het veld als volgt:
    Verander bovenaan All displays naar This page (override) zodat we de instellingen specifiek voor deze weergave veranderen en de andere weergaves niet gewijzigd worden.
    Vink bij Multiple field settings het vak Display all values in the same row uit. Zo wordt iedere foto als een item apart weergegeven.
    Vink bij Rewrite results de optie Output this field as a link uit.
    Klik op Apply (this display).
  6. Het titelveld hebben we in principe niet meer nodig. Klik bij Fields op Inhoud: Titel en vink Exclude from display aan. Sla op.
  7. Verander het pad (bij Page settings) naar album/%. Het percentteken staat voor de contextuele filter en wordt vervangen door het ID van het album.
  8. Klik aan de rechterkant op Advanced om dit open te vouwen. Klik vervolgens naas Contextual filters op toevoegen.
  9. Selecteer het veld Inhoud: Nid en klik op Add and configure contextual filters
  10. Verander bovenaan de optie opnieuw van All displays naar This page (override). Verander ook de optie When the filter value is not in the URL naar Show "Page not found". Zo werkt het pad /album enkel als er effectief een ID achter komt (dus /album werkt niet maar /album/123 wel)
  11. Sla opnieuw de view op (bovenaan rechts) en test dit uit vanaf de homepage. Als je klikt op een album zou je nu de foto's van het album moeten zien. 

Werken met afbeeldingsstijlen

Standaard zitten er 3 afbeeldingsstijlen in Drupal: 

  • thumbnail: schaalt afbeeldingen naar 100x100px
  • medium: schaalt afbeeldingen naar 220x220px
  • large: schaalt afbeeldingen naar 480x480px

Je kan de instellingen van deze afbeeldingsstijlen aanpassen, maar er wordt eerder aangeraden om zelf nieuwe afbeeldingsstijlen aan te maken wanneer nodig. In dit voorbeeld maken we een nieuwe afbeeldingsstijl die afbeeldingen verkleint naar 360x360px. Ga als volgt te werk:

  1. Ga naar Instellingen > Afbeeldingsstijlen (rubriek media). Klik bovenaan op Stijl toevoegen.
  2. Geef als naam albumfoto en klik Een nieuwe stijl aanmaken.
    In de volgende stap kunnen we één of meer bewerkingen toevoegen die voor deze stijl toegepast worden. Zo kunnen we bvb:
    Bijsnijden: de afbeelding wordt bijgesneden naar exacte afmetingen (er verdwijnen dus stukken van de afbeelding).
    Verzadiging verminderen: hiermee verkrijg je een grijswaardenafbeelding.
    Afmetingen aanpassen: hiermee wordt de afbeelding vergroot of verkleind naar een vaste afmeting, zonder rekening te houden met de verhoudingen in de afbeelding. Zo kan een afbeelding bvb uitgerekt weergegeven worden. Vaak is schalen een betere keuze.
    Roteren: roteert een afbeelding.
    Schalen: verkleint of vergroot de afbeelding maar behoudt de verhoudingen.
    Schalen en bijsnijden: schaalt eerst de afbeelding en snijdt de afbeelding vervolgens bij.
  3. Kies als bewerking Schalen en klik Toevoegen.
  4. Verander de breedte en hoogte naar 360 pixels en klik Effect toevoegen.
  5. Klik op Stijl bijwerken om de stijl op te slaan.

Tracht nu de albumweergave in de view foto-albums te bewerken zodat de stijl albumfoto gebruikt wordt (Klik hiervoor bij fields op Inhoud:foto's). Je zal ook het aantal kolommen van de grid op 2 moeten zetten.

Afbeeldingen in een lichtbox weergeven

We zien nu slechts kleine versies van de afbeeldingen in onze view. Veel sites gebruiken tegenwoordig een lichtbox systeem om grote versies van afbeeldingen weer te geven. Ook Drupal heeft verschillende modules die deze functie toevoegen, zoals colorbox en lightbox2. In ons voorbeeld maken we gebruik van lightbox2.

  1. Installeer en activeer de module lightbox2 vanaf http://drupal.org/project/lightbox2
    Nu kunnen we overal waar afbeeldingen weergegeven worden kiezen of we lightbox2 willen gebruiken voor de weergave. Daarbij kiezen we de afbeeldingsstijl op de pagina en de afbeeldingsstijl in de lightbox. Wij willen op de pagina de stijl albumfoto en in de lightbox de originele afbeelding weergeven.
  2. Bewerk opnieuw de albumweergave van de view foto-albums. Klik opnieuw op het veld Inhoud: Foto's om dit te bewerken.
  3. Kies bij Formatter voor Lightbox2: lightbox: albumfoto -> original en sla op. Vergeet niet om de view zelf nog eens op te slaan.
  4. Test dit uit door een album te bekijken en op de foto's te klikken

Een eigen Drupal site

Nu we inzicht hebben in wat we kunnen doen met Drupal en hoe de basis van Drupal ineen steekt kunnen we beginnen nadenken over hoe we best een eigen website opzetten. In dit hoofdstuk overlopen we de verschillende stappen die we het maken van de website doorgaans volgen.

De site op papier

Vooraleer je echt met Drupal aan de slag gaat is het aangewezen om de kernlijnen van je website op papier te zetten. Formuleer daarbij telkens het antwoord bij onderstaande vragen:

1. Waarover gaat de website?

Zonder al te veel in detail te gaan, hoe zou je de website omschrijven aan iemand die je niet kent?

2. Welk doelpubliek hoop je te bereiken?

Wie verwacht je dat je website zal bezoeken en gebruiken? Bvb jongeren, ouderen, mannen, vrouwen, specifieke doelgroepen, vrienden, collega's,...

3. Welke inhoud wil je aanbieden?

Zonder al teveel in Drupal termen te denken, welke soorten inhoud wil je aanbieden aan je bezoekers? Bvb artikels, reisverslagen, filmbesprekingen, portfolio, activiteiten, producten, foto-albums, noem maar op. De inhoud is vaak het unieke aspect van een website en de hoofdreden waarom een bezoeker al dan niet terugkeert.

4. Welke interactieve functies wil je aanbieden?

Met andere woorden: wat kunnen bezoekers doen met je website. Voorbeelden zijn reacties plaatsen, zelf blogitems posten, een poll invullen, formulieren versturen, discussiëren op fora, producten aankopen, video's bekijken,...

5. Hoe structureer je de website?

Hoe wil je de inhoud gestructureerd weergeven en welke pagina's heb je allemaal nodig? Een klassieke website heeft meestal enkele hoofdrubrieken die vanuit het menu toegankelijk zijn. Een website van een ontwerpfirma heeft bvb volgende hoofdrubrieken: | Blog | Producten | Portfolio | Referenties | Contact |

Maak een lijst van alle pagina's die je nodig hebt en probeer ze in een soort structuur weer te geven.

6. Welke inhoudstypes heb je nog nodig?

Met de standaard inhoudstypes artikel en pagina kan je al een eenvoudige site ineen steken, maar vaak wil je eigen inhoudstypes met aangepaste velden toevoegen. Als je bvb activiteiten wil weergeven is het aangewezen om een nieuw inhoudstype aan te maken met velden voor de datum en de plaats van de activiteit. Maak indien nodig een lijstje met inhoudstypes en alle velden per inhoudstype .

Denk ook eens na over welke taxonomie je zou kunnen gebruiken om de inhoudstypes nog meer te sctructureren. Voor een activiteit zou je een woordenlijst met het soort activiteit kunnen maken (vergadering, receptie, diner, feest,...)

7. Hoe moet de website eruit zien?

Teken op papier een ruwe schets van hoe de website er ongeveer uit moet zien. Hoeveel kolommen wil je, wat komt er in de hoofding, wat komt er in de zijbalken, wat komt onderaan?

Teken ook ruwe versies van de verschillende andere pagina's van je website, bvb de pagina met activiteiten of het contactformulier.

De site in de praktijk

Nu we een goed theoretisch zicht hebben op onze site is het makkelijker om de site in de praktijk aan te maken.

8. Installeer Drupal

Je kan eerst de website lokaal aanmaken en later uploaden naar een webhost, of je kan eerst een webhost kiezen en de site onmiddellijk online installeren en configureren. Lokaal werken is vaak sneller werken en je moet nog niet investeren in een webhost. Maar die webhost heb je uiteindelijk toch nodig dus je zou evengoed rechtstreeks via de webhost kunnen werken en zo een reeël beeld van de snelheid van de site te krijgen.

9. Zoek een bestaand thema

Een eigen thema van nul aanmaken is in de meeste gevallen niet aangewezen. Zoek dus een bestaand thema dat aansluit bij de schetsen die je gemaakt hebt (zie het hoofdstuk over thema's). Installeer en activeer het thema.

10. Modules installeren

Maak een lijstje met modules die je denkt nodig te hebben en installeer deze modules. Heb je datums nodig, installeer date. Wil je lijstjes maken, installeer views. Wil je foto's in een lichtbak weergeven, installeer lightbox2. Enzovoort.

11. Inhoudstypes aanmaken

Maak de inhoudstypes aan die je op papier hebt staan.

12. Voeg inhoud en views toe

Maak de pagina's, artikels en andere inhoud aan. Maak ook views indien nodig.

13. Kijk de rollen en toegangsrechten na

Wees er zeker van dat de nodige rollen aangemaakt zijn en de toegangsrechten goed toegekend zijn. Zorg ervoor dat bezoekers en gebruikers geen ongeoorloofde dingen kunnen doen.

14. Test de site

Test alle fucties van je site uit als anonieme bezoeler (dus uitgelogd). Laat ook anderen de site testen vooraleer die in productie gaat.

15. Plaats de site online

Instellingen en rapportages

In dit stukje bekijken we enkele algemene instellingen en rapportages in Drupal. Al deze instellingen bevinden zich in de rubrieken Instellingen en rapportages.

Instellingen

Websitegegevens

In de rubriek websitegegevens kan je een aantal algemene instellingen wijzigen:

  • Naam van de website
  • Slogan (dit wordt in sommige thema's weergegeven)
  • E-mailadres: dit is het adres waarop algemene systeemberichten zoals registraties verstuurd worden
Voorpagina

Standaard bestaat de voorpagina van Drupal uit de inhoud die als "Aangeraden op de voorpagina" gemarkeerd is. Maar je kan ook een volledig andere homepagina instellen.

  • Aantal berichten op de voorpagina: bij een standaard homepage bepaal je hier hoeveel berichten er weergegeven moeten worden.
  • Standaardvoorpagina: indien je een andere pagina als voorpagina wil, vul dan hier het pad in naar die pagina
Foutmeldingspagina's

Foutmeldingspagina's worden weergegeven als een bezoeker een pagina probeert te bezoeken waavoor die geen rechten heeft (verboden toegang) of wanneer een pagina of pad niet bestaat (niet gevonden). Standaard worden de teksten "geen toegang" of "pagina niet gevonden" weergegeven, maar je kan ook zelf foutpagina's aanmaken en het pad invullen in deze vakjes

Toepassing
  1. Maak een nieuwe pagina "Welkom" waarop je de bezoeker welkom heet op je website. Geef de pagina als pad "welkom".
  2. Maak een nieuwe pagina "Geen toegang" waarop je uitlegt dat deze pagina niet toegankelijk is omdat de bezoeker niet genoeg rechten heeft. Geef deze pagina als pad "geen-toegang".
  3. Maak een nieuwe pagina "Pagina niet gevonden" waarop je uitlegt dat deze pagina niet bestaat. Geef deze pagina als pad "pagina-niet-gevonden".
  4. Verander de instellingen zodanig dat deze pagina's weergegeven worden als standaardvoorpagina en foutmeldingspagina's.
  5. Test dit uit.

Onderhoudsmodus

In de rubriek Instellingen > Onderhoudsmodus kan je de website in een speciale "onderhoudsmodus" zetten. Hierdoor krijgt de bezoeker een tekst te zien als die de website probeert te bezoeken. De onderhoudsmodus is vooral handig als je updates uitvoert of als je wijzigen aan de website wil aanbrengen waarvan je niet zeker bent of ze zullen werken.

Plaats de site in onderhoudsmodus en test uit wat er gebeurt als je uitgelogd en ingelogd bent.

Zoekinstellingen

Drupal core heeft een ingebouwde zoekfunctie die door alle inhoud kan zoeken. Je kan het zoekblok gebruiken of de zoekfunctie die standaard te vinden is op het pad /search. In de rubriek Instellingen > Zoekinstellingen kan je de zoekfunctie verder verfijnen. Zo wordt er standaard gezocht op woorden van minstens 3 tekens. Je kan ook de weging van de resultaten beïnvloeden, zodat bvb recentere resultaten eerst weergegeven worden.

URL-aliassen

In de rubriek Instellingen > URL-aliassen kan je een extra adres toekennen aan een bestaand pad. Zo is er het standaardpad "search" dat naar de zoekfunctie verwijst. Maar voor een Nederlandstalige site wordt dit misschien beter het pad "zoeken". Klik op alias toevoegen om dit op te lossen. Voeg ook een alias "login" toe voor de login pagina op het standaardpad "user".

Rapportages

In deze rubriek vind je allerlei rapporten omtrent je Drupal site:

Statusrapportage

In deze belangrijke rubriek vind je de status van de Drupal site terug. Hier kan je zien welke problemen en zijn er hoe je die kan oplossen. Problemen in het rood dienen dringend opgelost te worden, problemen in het geel en blauw zijn minder dringend.

Beschikbare updates

Hier zie je welke modules in aanmerking komen voor een update. Modules met een rode achtergrond dienen dringend geüpdatet worden want bevatten beveiligingsproblemen

Recente logberichten

Zowat alle acties op een Drupal site worden gelogd. Ook alle foutmeldingen die gebruikers te zien krijgen komen in de logs terecht. Bekijk deze logberichten regelmatig om problemen op te sporen en gebruikers in de gaten te houden. Je kan de logberichten op een heleboel criteria filteren. De instellingen voor de logfunctie vind je bij Instellingen > Loggen en fouten.

Meest populaire zoekwoorden

Een lijst met de meest gebruikte woorden van de zoekfunctie weergeven.

Meest voorkomende fouten 'geen toegang' en 'pagina niet gevonden'

In deze lijsten krijg je een overzicht van pagina's die foutmeldingen geven. Dit is interessant om bvb niet werkende pagina's op te sporen.

Overzicht van velden

Een lijst van alle velden die gebruikt worden op de site.

 

Webhosting

Als je een Drupal-site online wil zetten heb je dynamische webruimte nodig. Dit wil zeggen dat je een Drupal site niet zomaar op een standaard webruimte van Skynet of Telenet kan plaatsen. Je zal je moeten wenden tot een betalende dienst, maar dit kan tegenwoordig al aan zeer democratische prijzen vanaf enkele euro's per maand.

In dit hoofdstuk bekijken we hoe je zo'n webhosting kan aanvragen. We gebruiken hiervoor de Franse webhost OVH, maar het aanvragen van webhosting bij andere firma's is gelijkaardig. Andere webhosts zijn bvb one.com of versio.nl.

Wat zijn de vereisten voor Drupal 7?

Webserver: bij voorkeur Apache.

Database: MySQL 5.0.15 of hoger

PHP: minimum versie 5.2.5, liefst 5.3 of hoger

Webruimte: minstens 15MB voor de Drupal installatie, de rest hangt af van de inhoud van je site. Als je bvb van plan bent veel foto's in hoge resolutie op je site te plaatsen, zal je minstens 500MB nodig hebben.

Processor en geheugen: dit hangt vooral af van het aantal bezoekers van je site maar hoe meer hoe liever.

Webhosting aanvragen

  1. Ga naar http://www.ovh.nl en klik bovenaan op Webhosting
     
  2. Maak een keuze uit het aanbod
  3. Hier kan je nog extra opties instellen indien je dit wenst
  4. Kies de domeinnaam voor  je site, bvb mijndomein.be of mijnbedrijf.com
  5. Kies het soort offerte, de Gold offerte is standaard zonder extra kosten.
  6. Het totaal van de bestelling verschijnt
  7. Kies Nieuwe contact en vul je gegevens in.
  8. In de volgende stap kan je eventueel andere personen toevoegen een andere eigenaar, administrator en technieker van de domeinnaam. Doorgaans is dit niet nodig.
  9. Ga akkoord met het contract.
  10. Kies een betalingsmethode en voer de betaling uit. Met een kredietkaart wordt je webruimte het snelst geactiveerd.

Webhosting beheren

Van zodra de webhosting geactiveerd is kan je inloggen in het administratiegedeelte.

In deze rubrieken kan je de hosting beheren. Het voornaamste is hier de rubriek SQL databases. Hier kan je een nieuwe database aanmaken voor je Drupal site, die je daarna kan beheren met PHPMyAdmin (zoals bij USBwebserver). Daarna kan je Drupal uploaden via een FTP programma met de FTP gegevens die je van de webhost gekregen hebt.

Een andere mogelijkheid bij sommige webhosts is een zgn. one-click installatie. Hiermee kan je met één klik een recente versie van Drupal of een ander CMS laten installeren op je webruimte. Bij OVH vind je die functie in de rubriek Modules beheer.

Problemen

Op deze pagina komen technische problemen te staan die we in de les tegenkomen.

Kan geen modules installeren via Drupal interface

Dit probleem kwamen we de eerste les tegen in de klaslokalen. Zie de "screenshot" hieronder. LET WEL, op je eigen computer heb je dit probleem normaal niet. Het heeft te maken met de beveiliging van de klascomputers.

Oorzaak: de tijdelijke map, ingesteld in Drupal, is niet schrijfbaar voor Drupal. Deze tijdelijke map staat ingesteld op C:\Windows\TEMP

Oplossing: zelf een tijdelijke map maken en de verwijzing in Drupal aanpassen. Ga als volgt te werk.

  1. Maak een nieuwe map temp in de map USBwebserver.
  2. Ga in Drupal naar Instellingen > Bestandssysteem (Configuration > File System)
  3. Verander hier de locatie van de tijdelijke map (temporary folder). We kunnen een absoluut pad invullen (bvb D:\usbwebserver\temp) maar we kiezen beter voor een relatief pad t.o.v. de installatie van Drupal. ZO werkt de verwijzing nog steeds als je de map usbwebserver verplaatst. Vult dus in:
    ../../temp

 

 

 

Kan USBwebserver niet installeren op Mac of Linux

Alternatief: installeer XAMPP op het adres http://www.apachefriends.org/en/xampp.html

Dit is een gelijkaardig pakket als USBwebserver. Ook het gebruik is gelijkaardig.

Evaluaties

Hier vinden jullie de evaluaties bij de cursus.

Evaluatie 1

Evaluatie 3

In deze evaluatie is het de bedoeling dat jullie samenwerken om een website te bouwen.

Je registreert je op de Drupal-site http://www.cervo-go.be. Daarna krijg je van de leerkracht administrator-rechten om deze website aan te passen.

 

Wat wordt er verwacht?

We maken een alternatieve website voor ons centrum Cervo-GO. De layout en het thema van de site is minder van belang, het gaat hem vooral over de inhoud.

Welke inhoud dienen jullie aan te maken?

  • Een rubriek Nieuws met daarin minstens 3 (fictieve) nieuwtjes over de school. Gebruik hiervoor het bestaande inhoudstype artikel, maar maak een view om de nieuwberichten chronologische weer te geven op een aparte pagina.
  • Een taxonomielijst voor deze vestigingen: De Panne, Nieuwpoort, Gistel, Ieper, Poperinge
  • Een nieuw inhoudstype cursussen met deze velden:
    • Naam
    • Omschrijving
    • Startdatum (datumveld)
    • Einddatum (datumveld)
    • Vestiging (uit taxonomie)
    • Kostprijs
  • Voeg deze cursussen toe: Initiatie, Word 1, Internet, Windows, Drupal en zorg opnieuw voor een view die de cursussen in een lijst of tabel weergeeft.
  • Een nieuw inhoudstype activiteiten met titel, omschrijving, startdatum en plaats. Voeg minstens 3 (fictieve) activiteiten toe en zorg ook hier voor een view én een blok dat de verschillende activiteiten weergeeft. Dit mag ook een kalender zijn maar is niet verplicht.
  • Een rubriek contact met een webformulier dat bezoekers kunnen invullen en versturen (naam, e-mail, telefoon, bericht)
  • Een rubriek foto-albums met daarin minstens twee fictieve albums van minstens 5 foto's. Werk hier zoals in het voorbeeld uit de les.
  • Een pagina over ons met wat (fictieve) uitleg over de school.
  • Een pagina vacatures met enkele (fictieve) vacatures.
  • Een blok met adres, telefoon en e-mail dat op iedere pagina zichtbaar is.
  • Een blok met de tekst u kan zich vanaf u inschrijven voor het tweede semester

De website zal dus uiteindelijk deze rubrieken in het hoofdmenu hebben:

Nieuws | Cursussen | Activiteiten | Contact | Foto's | Over ons | Vacatures

Opmerking: niet alle benodigde modules zijn geïnstalleerd op de webruimte http://www.cervo-go.be. Je zal dus zelf modules moeten installeren waar nodig. Installeer enkel modules indien nodig om de stabiliteit en de snelheid van de website optimaal te houden.

Opmerking 2: behalve de bovenstaande punten zijn jullie vrij om de website verder uit te werken naar eigen smaak. Je mag dus zelf nog inhoudtypes, blokken, menu's aanmaken. Originaliteit wordt beloond, maar overleg steedzs met de groep wat je van plan bent.

Hoe met de website eruit zien?

Dit bepalen jullie volledig zelf in overleg, maar gebruik zeker aan ander thema dan Bartik. Zorg ook dat het logo van Cervo-GO weergegeven wordt.

Hoe begin je eraan?

Het is niet de bedoeling dat je alles alleen doet, integendeel. Verdeel jezelf in groepjes en bepaal onderling wie welk deel van het werk zal doen. Maak dit ook kenbaar aan de leerkracht. Hou contact met elkaar om dit project in goede banen te leiden.

Voor vragen en problemen kan je steeds bij de leerkracht terecht.

Succes!

Voorbeelden van Drupal sites

Op deze pagina vinden jullie voorbeelden van Drupal sites in productie:

België

Internationaal