Drupal 7 cursus deel 1: de basis

Een gelikte website ontwerpen met alle denkbare functionaliteit is allang niet meer voorbehouden aan doorgewinterde professionele webbouwers. Met moderne contentmanagementsystemen als Drupal 7 lukt het je ook zonder kennis van codetalen als php en html. In deze vierdelige workshop leer je stap voor stap hoe je een site bouwt.

Stel, je bent lid van een vereniging die een mooie website nodig heeft, bijvoorbeeld een club van autoliefhebbers. De club wil graag een uitnodigende website met een online kennisbank, een blog en een forum om ervaringen uit te wisselen. Oh ja, het moet er wel professioneel uitzien en clubleden moeten zelf pagina’s kunnen bijhouden. Kun jij dat regelen? Ja, dat kan, want met Drupal 7 heb je een gratis pakket in handen waarmee je zo’n website van topklasse bouwt. Het Witte Huis gebruikt Drupal, Sony Music gebruikt Drupal, dus waarom jij niet?

Installeren, content maken en nieuwe functionaliteit toevoegen is prima te doen – als je weet waar je moet beginnen. Want al is werken met Drupal niet moeilijk, het is wél een uitdagend systeem waarin je echt even je weg moet leren vinden.

In deze serie verkennen we stap voor stap hoe je een website bouwt met Drupal. In dit eerste deel leggen we de basis: hoe installeer je Drupal en wat zijn de basismogelijkheden? In de volgende afleveringen bouw je verder aan een website met de juiste looks en met alle gewenste functionaliteiten.

Kleuren en logo aanpassen

Een website met een standaard Drupal-logo schreeuwt natuurlijk om aanpassing. Tot besluit kijken we daarom hoe je de sjabloon (het thema, in Drupal-termen) van je site naar je hand kunt zetten met een aangepast kleurenschema en je eigen logo.

Klik, als beheerder, in de menubalk op Uiterlijk. Je ziet een overzicht van de geïnstalleerde templates. De standaardsjabloon in Drupal 7 is Bartik. Klik op de link Instellingen om Bartik te bewerken. Op het volgende scherm krijg je een groot aantal opties, waarin je in een kleurenspectrum andere kleuren kunt kiezen en direct de effecten kunt zien in de voorbeeldweergave. Mooi!

Door andere kleuren te kiezen bij Bovenzijde kop en Onderzijde kop kun je een fraaie verlooptint aan de bovenkant van de webpagina creëren. Als je tevreden bent met de kleuren, scroll dan door op de instellingenpagina. Onderaan vind je nog veel meer instellingen.

Om het Drupal-logo te vervangen, haal je het vinkje weg bij Gebruik het standaardlogo. In het vak Logo-afbeelding uploaden kun je nu een logo selecteren op je eigen computer. Een grafisch bestand van ongeveer 100x200 pixels is geschikt, gebruik bij voorkeur een png-bestand met een transparante achtergrond. Op die manier sluit het logo naadloos aan op de achtergrond. Klik op Instellingen opslaan en sluit de instellingenpagina (met een klik op het kruisje rechtsboven) om het resultaat te zien.

De basis is er

Je website is al een eindje op weg. Het cms is geïnstalleerd, het eerste artikel staat op de site en je hebt de vormgeving al een beetje naar je hand gezet. Maar natuurlijk kun je met Drupal veel meer. Vanaf het volgende deel begint het écht leuke werk: verschillende soorten content toevoegen en Drupal naar je hand zetten met een paar handige uitbreidingen.

Je eerste artikel toevoegen

Hoogste tijd om je stempel te zetten op je Drupal-site en je eigen content toe te voegen; zo zie je meteen hoe de administratieve overlay in de praktijk werkt. Klik op de link Inhoud toevoegen in de menubalk. Over de gewone website heen verschijnt nu een tweede overlay, naast de menubalk: Het scherm Inhoud toevoegen. Standaard kun je kiezen uit twee inhoudstypen: Artikel en Basispagina. Kies hier voor Basispagina.

Schrijf in het scherm Basispagina aanmaken je eerste artikel. In dit geval gebruiken we de basispagina voor een welkomsttekst over de website. Voer als titel Welkom bij ClubClassic in en schrijf in het vak Berichttekst een tekstje. Je zult merken dat je geen opmaak kunt toevoegen: het tekstvak accepteert alleen platte tekst en html. Standaard heeft Drupal namelijk geen wysiwyg-teksteditor. Voor nu laten we dat even zo, maar wees gerust: in deel 2 van deze workshop zul je merken dat het eenvoudig is om een wysiwyg-plugin te installeren.

Om je basispagina af te maken, pas je nog een paar instellingen aan. Klik onderaan het scherm op Publicatie-opties en zet een vinkje bij Aangeraden op de voorpagina en bij Vastgeplakt boven aan de lijst. Dat betekent dat je welkomsttekst vanaf nu bovenaan de homepage te zien zal zijn – en daar ook bovenaan blijft staan als er andere content bij komt. Klik op Opslaan. Voilà, je artikel is klaar en verschijnt direct op de homepage.

Let erop dat je ook nu een mix ziet van de gewone website en een aantal extra’s die alleen jij als ingelogde sitebeheerder te zien krijgt. Je ziet bijvoorbeeld een melding dat de nieuwe pagina is aangemaakt. Boven het artikel zelf staat een tab Bewerken, waarmee je je basispagina kunt veranderen. Gewone gebruikers zien de pagina zonder die extra’s.

De voorbereiding: serversoftware installeren

Om Drupal uit te proberen, kun je het cms het best installeren op je eigen computer. Op die manier kun je naar hartenlust bouwen en experimenteren, ook als je nog niet beschikt over een domeinnaam en webhostingaccount. Bovendien kun je wat je gebouwd hebt later altijd nog online zetten. Lokaal installeren gaat in twee stappen: eerst installeer je de software waarmee je computer doet alsof het een webserver is, daarna installeer je Drupal zelf. Je webserver is niet via internet te benaderen, maar alleen vanaf je eigen computer. Precies wat je nodig hebt, want zo kun je straks Drupal installeren zonder dat de rest van de wereld bij je website in uitvoering kan komen.

Een veelgebruikt alles-in-één-pakket om webserversoftware op je computer te zetten, is WampServer. Met de installatie van WampServer wordt je Windows-computer geconfigureerd met alles wat nodig is om moderne webapplicaties als Drupal te laten werken: een Apache-webserver, inclusief ondersteuning van MySQL-databases en de scripttaal php.

Download WampServer van wampserver.com/en/download.php. Dubbelklik op het gedownloade exe-bestand en installeer WampServer met de standaardinstellingen. In het startmenu van je computer klik je nu op de snelkoppeling Start WampServer. Je computer doet alsof het een webserver is. Daar merk je niet direct iets van, maar op de achtergrond draait nu de benodigde software. Je kunt zien dat WampServer actief is aan een groen icoontje (met de letter W) in de taakbalk van Windows.

Database aanmaken

Nog één voorbereidende stap te gaan voordat je Drupal kunt installeren: een database aanmaken. Klik in de Windows-taakbalk op het pictogram van WampServer. In het popupmenu dat verschijnt, klik je op PhpMyAdmin. PhpMyAdmin is het programma waarmee je de MySQL-database kunt aanmaken. In PhpMyAdmin vul je in het vak Nieuwe database aanmaken een naam in, bijvoorbeeld Drupal . Klik op Aanmaken om de database te maken.

Dit is alles: je hebt een werkende webserver en je hebt een database. Omdat je op je eigen computer werkt (en niet op het web), hoef je de database niet te beveiligen door een inlognaam en password aan te maken. Standaard is de gebruikersnaam ‘root’, zonder password. Wil je die gegevens toch wijzigen, dan doe je dat via Rechten, Gebruiker ‘root’, Wijzig rechten, Wijzig de inloginformatie.

Waarom Drupal?

Er is een top-3 van populaire opensource-contentmanagementsystemen: Joomla, Drupal en WordPress. WordPress wordt algemeen gezien als het gebruiksvriendelijkste systeem, maar is ook minder veelzijdig. Al laat WordPress zich uitbreiden met talrijke plugins, het is vooral de juiste keuze als je een weblog nodig hebt.

Zowel Joomla als Drupal zijn geschikt voor sites waaraan meer eisen gesteld worden: met meer soorten content, met extra’s, met forums of fotoalbums. Joomla geldt daarbij als een laagdrempelig systeem dat al meteen een kant-en-klare voorbeeldsite biedt.

Drupal vereist dat je je wat meer in het pakket verdiept en zelf aan de slag gaat. Toch wordt de drempel van Drupal wat lager. Bij de ontwikkeling van Drupal 7 stond gebruiksgemak centraal. Nog altijd is Drupal geen pakket waarmee je in een paar klikken een website installeert, maar als je bereid bent om je in de basisprincipes van Drupal te verdiepen, krijg je een website waarin je nooit tegen beperkingen zult aanlopen: alles is configureerbaar.

Hét sterke punt van Drupal is flexibiliteit: waar je bijvoorbeeld in Joomla de keuze hebt uit een aantal voorgedefinieerde soorten pagina’s (zoals artikelen, blogpagina’s, formulieren) kun je in Drupal zélf je paginatypen volledig definiëren.

Drupal installeren

Je bent klaar om Drupal te installeren. Ga naar drupal.org/download en download de laatste versie naar je computer. Pak het gedownloade zip-bestand uit: sla alle bestanden op in de standaardmap van je C:/wamp/www.

Om de installatie te starten, ga je in je webbrowser naar het adres localhost. In feite wordt je browser nu door je lokale webserver naar de inhoud gestuurd van de map C:/wamp/www. De webserver presenteert de inhoud aan je browser alsof het een ‘live’ website is. In dit geval verschijnt in je browser het eerste installatiescherm van Drupal.

Kies voor de standaardinstallatie en klik op Save and continue. Nu kom je in het taalkeuzescherm. Standaard is de installatieprocedure in het Engels, hier kun je dat veranderen. Klik op Learn how to install Drupal in other languages en klik op Download a translation from the translation server. In een nieuw browsertabblad krijg je nu een overzicht van de beschikbare vertalingen. Rechtsklik op de link naar het Nederlandse taalbestand en kies Link opslaan als…. Sla het taalbestand op in de map 'C:/wamp/profiles/standard/translations'.

Ga terug naar de browsertab met het taalkeuzescherm van Drupal. Klik op Reload the language selection page after adding translations. Nu kun je kiezen voor Dutch (Nederlands) als installatietaal. Klik op Save and continue om je keuze te bevestigen. In het volgende scherm (Database-instellingen) is de Nederlandse taalinstelling direct actief.

Vul in het scherm Database-instellingen de naam in van de database die je eerder in PhpMyAdmin hebt aangemaakt. In dit voorbeeld is dat drupal. De gebruikersnaam is root en als je in PhpMyAdmin geen ander wachtwoord hebt aangemaakt, hoef je hier geen wachtwoord in te vullen. Klik op Opslaan en doorgaan. Vanaf nu kun je achteroverleunen: Drupal toont verloop van de installatie in een voortgangsbalk.

Als de automatische installatie afgerond is, kom je op de laatste pagina Site instellen. Daar vul je de naam van de site in. In ons voorbeeld is dat ClassicClub. Ook vraagt Drupal om een e-mailadres voor systeemberichten vanaf de site. Dat laatste werkt alleen maar als je de Drupal online installeert. Via je eigen lokale webserver kunnen standaard geen mails verstuurd worden.

Bij Onderhoudsaccount vul je een gebruikersnaam in en een wachtwoord. Voor een installatie op je pc is een makkelijk te onthouden combinatie van gebruikersnaam en wachtwoord mooi genoeg, maar als je online installeert, moet je natuurlijk een veilige combinatie bedenken. Geef tot slot een mailadres op waar je systeemberichten wilt ontvangen. Klik op Opslaan en doorgaan. De installatie is rond! Klik op Ga naar de nieuwe website om het resultaat te zien: een website zonder content, maar vol verborgen functionaliteit.

De website verkennen

Wat je ziet als je Drupal net geïnstalleerd hebt, is misschien even wennen. Het is namelijk een mix van de website die de gewone bezoeker krijgt met een admistratieve ‘overlay’ die je ziet omdat je ingelogd bent als beheerder (administrator) van de site. Aan de bovenkant van het scherm zie je daarom een zwarte menubalk die je toegang geeft tot alle mogelijke functionaliteiten van het cms.

Ook in de webpagina zelf zie je links die speciaal voor het beheer zijn, zoals Inhoud toevoegen. Pas als je klikt op Uitloggen, zie je wat de gewone bezoeker ziet: een lege website met een paar links en wat koppen, maar zonder de mogelijkheid om content toe te voegen. Je logt weer in als beheerder via het loginblokje op de homepage.

Beginners vinden het lastig dat je als beheerder tegelijkertijd de ‘gewone site’ ziet én alle extra functionaliteit die ‘over de site heen ligt’. Maar in de praktijk werkt dat goed. Als je dat gemengde beeld toch storend vindt, is er een trucje: ben je bijvoorbeeld in Firefox ingelogd op je site, kun je je gewone site wél bekijken in een andere browser (bijvoorbeeld Google Chrome). Het loont dus de moeite om een andere browser te installeren. Ga in die browser naar localhost, en je ziet je Drupal-site zoals een gewone bezoeker. Zo kun je na aanpassingen van je site in de ene browser de effecten op de website zien in de andere browser.

Deel dit artikel
Voeg toe aan favorieten