Kennismaking

Welkom bij de module Drupal 1 bij het CVO Groeipunt. In deze 17-delige cursus leren jullie een eenvoudige website maken met Drupal. We werken in de laatste versie: Drupal 9

Deze website (www.drupalschool.be) zal worden gebruikt als begeleiding bij de lessen. Straks krijgen jullie van de leerkracht een domein om op te oefenen.

Enkele afspraken:

• Aanvang les: 13u (nm) 18.30u (av) / Einde les: 16u (nm) 21.30u (av)
• Geen eten en/of drinken in de klas
• Zet je GSM op stil

Wat is Drupal?

Drupal is een CMS ontwikkeld door Gentenaar Dries Buytaert. Het is een volledig gratis en Open Source programma. Binnen de familie van de CMS'en is Drupal veruit de veiligste en biedt het de meeste opties. Door deze schijnbaar oneindige lijst aan mogelijkheden wordt het natuurlijk complex. Daarom werken we deze lessen uit in kleine stappen.

Tot voor kort had je Drupal 7, ondertussen is Drupal 8 in het leven geroepen. En de allerlaatste versie is Drupal 9. Neostrada, de hosting waar ik mee werk is daar nog niet klaar voor, alsook vele modules zijn nog niet aangepast. Deze laatste versie is niet zo een groot verschil met zijn voorganger. 

Eens Drupal is geïnstalleerd heb je de basis:

• De kern of core met een aantal basismodules
• Het standaardthema Bartik

Je kan het waarschijnlijk al raden: wil je meer dan moet je extra's installeren. Deze extra's heten modules, wil je een ander uiterlijk dan installeer je andere thema's.

De site met alle info over Drupal: www.drupal.org

Jouw hosting

Omdat ik jullie de technische kant van het klaarzetten van een Drupal 9 site voorlopig wil besparen krijgen jullie van mij een 'naakte' Drupal 9 site.*

*ik toon klassikaal de mogelijkheden voor het opstellen van een Drupal Site

Andere belangrijke sites

► www.drupalschool.be ⇒ Hierop kan je de uitgeschreven lessen raadplegen

► www.drupal.org ⇒ Dé website van Drupal, hierop vind je thema's, modules en bergen informatie

►https://drupal.family/⇒ De website van collega Dirk Bernaert. Neem hier gerust een kijkje!

Eerste stappen

Taal aanpassen

We vertalen onze gebruikersinterface eerst naar het Nederlands. Onderstaande stappen loodsen u door het proces:

1. Klik bovenaan op Extend --> voor we kunnen vertalen moeten we een module inschakelen die ons daarbij gaat helpen
2. Je krijgt een lijst te zien van alle aanwezige modules in de kern. Enkel diegene met een vink zijn geïnstalleerd en werkend.
3. Gebruik het zoekvenster om de Configuration Translation module in te schakelen

4. Vink aan en klik vervolgens op Install
5. In een volgend venster zal men u melden dat er nog een module moet worden aangezet. Klik je op Continue dan zal Drupal dat voor u in orde brengen
6. Na de vooruitgangsbalk krijg je een groene melding met het bericht dat alles is geïnstalleerd. We kunnen nu gaan vertalen
7. Kies in het beheer-menu voor Configuration
8. Kies nu voor Languages

9. Kies Add Language en zoek naar het Nederlands
10. Heb even geduld. De nieuwe taal wordt toegevoegd.
11. Verander tot slot de default taal van het Engels naar het Nederlands

12. Het beheersmenu zou moeten vertaald zijn naar het Nederlands.

Modules installeren

Het beheersmenu aanpassen

1. Je merkt dat het beheersmenu eigenlijk niet zo handig in gebruik is. We gaan dit oplossen door het installeren van een module. Drupal zit namelijk zo in elkaar dat je een basis krijgt die uitbreidbaar is met modules. Je zal er in de toekomst tientallen moeten installeren. Je zal zien dat dit gelijkaardig verloopt als het installeren van een thema:
2. Wanneer je een module zoekt volstaat het om in een nieuw tabblad te zoeken met als trefwoord "< naam van de module > drupal"
3. In dit geval zoeken we dus concreet naar: "admin toolbar drupal"

(Opmerking: in de toekomst voorzie ik rechtstreekse links in de lessenreeks)

4. Op deze website scroll je nu helemaal naar onder. Merk op dat al de rest op dergelijke pagina's ook interessante lectuur is. Sommige modules zijn wat moeilijker om te installeren, de uitleg is dan meestal te vinden op de download pagina.
5. Klik nu rechts op het zip-bestand van de juiste versie; net als bij een thema kopieer je ook hier de koppelingslocatie.

6. Keer na deze actie terug naar jouw website.
7. Kies in het beheersmenu voor 'uitbreidingen'
8. Vervolgens kies je voor "+ nieuwe module installeren"
9. Net als bij een thema plak je nu de eerder gekopieerde koppelingslocatie in het eerste tekstveld
10. Klik tot slot op 'installeren"
11. Op dit moment is de module toegevoegd aan Drupal. Deze staat echter nog niet aan! Dit mag je dus niet vergeten:
12. Klik in het volgende venster op 'Nieuw toegevoegde modules inschakelen'

13. Automatisch zal je worden doorverwezen naar de lijst met modules. Deze is in andere situaties te benaderen door een klik op 'Uitbreidingen' in het beheersmenu
14. Typ nu in de module filter 'adm', de lijst wordt vervolgens gesorteerd. Merk op dat je de twee submodules moet aanvinken. Klik vervolgens op 'Installeren'

15. Het resultaat: wanneer je nu over de verschillende hoofd dingen van het beheersmenu hoovert, klapt er automatisch een submenu uit. Dit zal ons werk in de toekomst aanzienlijk vereenvoudigen.

Thema

Een goede website begint met de keuze van een thema. Dit is jammer genoeg geen eenvoudige keuze door het immense aanbod. Op drupal.org vind je alle thema's die op die moment voor Drupal 8 beschikbaar zijn. Lager in dit deel vind je de linken naar drie thema's die we even gaan uittesten.

1. Surf naar de download-site van het thema. In deze les proberen we de drie onderstaande thema's uit:

• Drupal 8 Zymphonies Theme
• Zircon
• Mayo

2. Scroll helemaal naar onder om de download links te zien

BELANGRIJK. Gebruik op een Drupal 8 site geen versies voor een Drupal 7 site en omgekeerd. Goed kijken is dus de boodschap.

3. Klik rechts op de zip-versie van het juiste thema en kies 'koppelingslocatie kopiëren'. Dit laatste kan verschillen van browser tot browser.

4. Ga naar jouw website
5. Kies bovenaan voor Uiterlijk

Hier kan je alles raadplegen wat de thema's betreft. Je merkt hier op dat het standaardthema Bartik als naam krijgt. Straks moeten we hier opnieuw zijn om de instellingen van het thema te raadplegen.

6. Klik op + Een nieuw thema installeren

8. In het verschenen venster kan je nu de eerder gekopieerde koppeling plakken

9. Kies uiteindelijk voor Installeren: na een aantal seconden is het gebeurd
10. Klik nu op 'Installeer nieuw toegevoegde thema's' om verder te werken

10. Onderaan staat jouw nieuwe thema klaar maar deze is nog niet actief op de site klik op 'Installeren en als standaard instellen' om te switchen van thema

11. Klik linksboven om terug te keren naar de site en het resultaat te bekijken. Dit zal eerder tegenvallen :)

Logo en Favicon

1. Een andere eenvoudige instelling is het aanpassen van het logo van de site en bijgevolg ook het favicon. Een favicon is het kleine symbooltje dat je ziet staan op het tabblad van de browser. Elke professionele designer zal eraan denken dit aan te passen.
2. Vooraleer je dergelijke afbeelding gaat instellen als logo moet je eraan denken dat deze niet te groot mag zijn. Voor het gemak van werken stel ik voor dat je voor deze oefening onderstaand logo gebruikt. Sla dit even op, op het bureaublad:

3. Ga nu naar 'Uiterlijk' - 'Instellingen' - 'jouw thema'

4. Klik bij 'logo' de vink van het standaardlogo weg, je krijgt nu de optie om te gaan bladeren naar een eigen logo. Even lager zie je ook het favicon staan, de volgende handeling kan je dus op beide zaken toepassen.

Een zeer belangrijke les in het volledige Drupal-verhaal is de volgende:

Na bijna elke wijziging of handeling zal je moet opslaan, vergeet je dit, dan is al je werk voor niets geweest!

5. Bekijk nu het resultaat door terug te keren naar jouw website.

Naam en slogan

We kijken even naar de instellingen van de website. Dit kan je terugvinden onder instellingen - systeem - Basic site-instellingen

Vul nu de gegevens aan of wijzig indien gewenst.

Vergeet niet op te slaan!

Wanneer je de home-page bekijkt zien we een probleem: zonet gaven we een slogan in en die is nu niet te zien...

Wanneer je met de cursor richting het logo gaat zal je in de rechterbovenhoek een potloodje zien verschijnen. Wanneer je daarop klikt en vervolgens klikt op blok instellen dan kom je bij de instellingen van dat bepaalde blok. Merk even op dat hier de naam blok valt, dit wordt in het volgende deel uitvoerig besproken.

Vink nu in het verschenen venster ook de slogan aan.

Sla even op en ga kijken op de home-page --> de slogan zal zichtbaar zijn.

Blokken

Een Drupalsite bestaat uit verschillende blokken. Plaatsten op het scherm waar inhoud kan worden weergegeven. De meest herkenbare blokken zijn de menubalk, het logo en de site naam, de hoofdinhoud. Maar dit gaat verder. Later kunnen we bijvoorbeeld de openingsuren toevoegen in een blok of een navigatiemenu aan de rechterkant. Voorlopig houden we ons nu even bezig met het opruimen van onnodige blokken.

Kijk even bij Structuur en kies voor Blok-layout

Je krijgt nu een lijst te zien van alle blokken, al dan niet reeds geplaatst.

We verbergen overbodige blokken door deze op 'geen' te plaatsen.

Zo mag je alles op 'geen' plaatsen behalve:

• Site branding
• Main navigation
• Page Title
• Main page content

Vergeet dit alles niet op te slaan onderaan

Bekijk het resultaat door terug te keren naar de homepage

Keer even terug naar die lijst met blokken.

Merk op dat je bovenaan kan klikken op 'Blokgebieden demonstreren'. Hiermee krijg je een idee waar welk blok ongeveer zal komen.

Klik bovenaan op 'Demonstratie van blokregio's afsluiten' om terug te keren naar het vorige venster

We voegen een blok toe:

Kies voor 'aangepast blok toevoegen'

Geef in het volgende venster een titel in: Welkom

In het grotere tekstveld schrijf je bijvoorbeeld: op mijn eerste site

Vervolgens moet je dit blok nu in één van de blokgebieden plaatsten. Wij kiezen voor Welcome Banner Text

De achtergrondfoto aanpassen

• Hiervoor hebben we FTP nodig.
• Open FileZilla en log in
• Navigeer naar de juiste map:

• Wat je nu moet doen is logisch:
  • Zoek op het Internet een foto die je wil gebruiken als achtergrond. De huidige foto is iets meer dan 4 MB dus je moet niet kijken op een MB meer of minder. Voor kwaliteit zoek je met het trefwoord 'wallpaper' achter de zoekterm.
  • Sla de foto even op en geef deze dezelfde naam als op de server
  • Uploaden en overschrijven
• Keer terug naar de site, even vernieuwen, en voila!

Inhoud toevoegen

• Voeg inhoud toe van het type eenvoudige pagina:

• Zet op 'volledige HTML'

• Verschillend van bovenstaande versie is de knoppenbalk, deze is bij jullie nog niet goed ingesteld. Dit doen we eerst:
• Hoover over Instellingen - Inhoud en samenstelling - Tekstopmaak en editors

• Kies voor Instellen bij Volledige HTML

• Voeg nu alle knoppen toe die je graag had gehad:

• Keer op je stappen terug en voeg nu opnieuw inhoud toe van het type eenvoudige pagina:
  • Zorg voor een titel: Drupal 8
  • Zoek op Wikipedia het artikel over Drupal en plak dit zonder de links in de body:
  • Bij de URL zorg je ervoor dat deze /home gaat heten

• Sla even op.
• Tot slot gaan we deze inhoud instellen als homepage.
  • Instellingen
  • Systeem
  • Basis Site Instellingen
  • --> Standaard voorpagina aanpassen naar de eerder ingestelde URL