Les 7

Inleiding

Een aantal zaken komen aan bod. Zo gaan we eerst de Drupal kern updaten. Vervolgens werken we verder aan onze overzichten van vorige les. Tot slot kijken we al even naar de installatieprocedure van Drupal.

Drupal Core Update

Op 06/10/2016 is Drupal 7.51 uitgekomen. Dit is een update van de kern. Dergelijke updates moeten worden uitgevoerd via Third Party. Dit doen we even samen.

--> klik onder rapportages op Statusraportage

  1. Download het programma FileZilla
  2. Download de update via drupal.org (of via de site)
  3. Log uit op de site
  4. De update wordt in een zip-bestand gedownload. Pak dit eerst even uit op de computer.
  5. Maakt connectie met de server via FTP
  6. Vervang alles in de map public_html behalve de map sites

  1. Ga naar de website
  2. Update de databank en eventuele andere modules.
  3. Opmerking: beter om eerst een back-up te maken.

Naast de kern bestaan er nog twee soorten updates:

De kern

--> Updaten via FTP

Plugins

--> Updaten via FTP

Modules en thema's

--> Klik op 'beschikbare updates' / vink aan wat je wil updaten / doorloop de stappen / update de databank

Overzichten (deel 2)

In het tweede overzicht van ons thema 'schilders en schilderijen' willen we een kleine afbeelding van het schilderij, een beetje uitleg en een afbeelding van de schilder. Bovendien kan de bezoeker het overzicht filteren op de kunststroming. Verder zal je bij klikken op de schilder worden doorverwezen naar de uitleg van de schilder, bij klikken op het schilderij start er een fancybox en bij klikken op de titel van het schilderij kom je bij de bijhorende uitleg. Tot slot passen we ook de html van de titels aan gevolgd door een beetje css om het overzicht wat aantrekkelijker te maken.

  • Maak een nieuw overzicht met als titel 'schilderijen'
  • Kies voor inhoud van het type schilderijen
  • Voorzie een menulink in het hoofdmenu
  • Plaats het overzicht in een raster van 2 kolommen

  • Voeg de nodige velden toe:
    • Titel
    • Afbeelding
    • Body
    • Schilder
    • (het laatste veld komt hier lager aan bod)
  • Instellingen per veld:
    • Titel:
      • Geen label maken
      • Linken naar oorspronkelijke inhoud
      • Stijlinstelling: H2-element
    • Afbeelding
      • Geen label
      • Fancybox
        • Large
        • Per Field in Page Galery
    • Body:
      • Geen label
      • Opmaak: ingekort tot 150 tekens
    • Schilder:
      • Geen label
      • Linken naar de node
  • Om ook de foto van de schilder te zien moeten we eerst een relatie leggen die dus een link maakt met het inhoudstype Schilders. Een foto kunnen we namelijk niet terugvinden bij het inhoudstype Schilderijen.
    • Klik bij uitgebreid en kies bij relaties om eentje toe te voegen
    • Zoek de gerefereerde entiteit naar de schilders
    • Voeg nu opnieuw het veld afbeelding toe
    • Bij relatie kan je nu kiezen voor de toegevoegde relatie
    • Zorg dat de afbeelding als thumbnail wordt weergegeven.

  • Tot slot zorgen we ervoor dat de gebruiker het overzicht kan filteren op de kunststroming:
    • Kies bij filtercriteria om er eentje toe te voegen
    • Zoek de kunststroming
    • Zorg dat de filter als keuzelijst wordt weergegeven
    • Stel de filter zodanig in dat deze zichtbaar is en een aangenaam(er) label krijgt

  • Uiteindelijk krijgen we het resultaat:

  • Afwerking:
    • Zorg ervoor dat je bij de menu's een uitklapmenu krijgt waar je kan kiezen tussen de schilderijen en de schilders
    • We geven het raster ook de klasse views-align-center mee zodanig dat deze mooi gecentreerd worden.

  • Css aanpassen van de afbeelding van de schilder:
    • We dienen een klasse 'afgerond' toe aan het veld afbeelding
    • We voegen de CSS toe bij de css injector
    • Als resultaat krijgen we een aangenamer beeldje van de schilder

.afgerond img{
  border-radius:15px;
  box-shadow: 5px 5px 5px #888888;
}

  • Opdrachten:
    • Verander het overzicht van de schilders van een raster naar een tabel. Kies uiteindelijk zelf het mooiste uit; raster of tabel
    • Maak een overzicht van het inhoudstype bestuursleden, zorg voor een menulink

Hosting

Wat je eerst en vooral nodig hebt is een hosting. Dit is eigenlijk een externe server waarop jouw site zal draaien. Uiteraard is dit niet gratis. Een aantal voorbeelden:

Waarop moet je zeker letten:

  • Aantal mogelijke databanken
  • De prijs
  • De service

Databank

Voor we de feitelijke Drupal-installatie kunnen doen moeten we eerst een databank aanmaken. Vanaf hier werk ik verder met Futureweb.

Wanneer Futureweb de betaling heeft ontvangen krijg je een mail met de nodige gegevens om jouw site te beheren. Vooral de inloggegevens voor het controlpanel zijn belangrijk. Het Control Panel geeft jou de mogelijkheid om de bestanden op de server te gaan beheren en het maken van een databank.

  • Control Panel:

 

  • Databank beheer:

  • Bestandenbrowser:

Drupal Core

Wanneer de databank is aangemaakt kunnen we Drupal installeren op de server.

Op het moment van het schrijven van dit onderdeel werken we met Drupal 7.50 ondanks het feit dat Drupal 8 reeds gelanceerd is. Dit doen we enkel en alleen omdat er in Drupal 8 op dit moment te veel kinderziektes zitten.

Om een dergelijk drupal kern te downloaden is er één site belangrijk:

  • www.drupal.org --> dit is de officiele website van Drupal
  • Na wat klikwerk kom je uiteindelijk op een pagina waar de je 7.5 kan downloaden:

  • Je zal merken dat je automatisch een zip-bestand binnenhaalt. Even uitpakken dus.
  • De volgende stap is het connecteren met de server. Dit kan je het beste doen met FileZilla. Het eerder besproken FTP-programma.
  • Upload de map met de Drupal-kern naar de map Public_html op de server.
  • --> Surf met een browser naar keuze naar jouw website
  • Nu begint de feitelijke installatie:
    • Je zal de gegevens van de eerder gemaakte databank moeten ingeven.
    • Heb je dat gedaan, dan heb je een cleane install van Drupal. Dit wil zeggen dat je aan de slag kan maar dat er nog heel wat werk is om de website zo in te stellen dat je ermee aan de slag kan zoals je die kent van in de les:
      • Het beheersmenu zal aangepast moeten worden
      • De vertalingen zullen geïnstalleerd worden
      • De CKeditor moet worden toegevoegd en ingesteld
      • ....