Les 13

Printvriendelijke versie

Inleiding

We starten deze les met een nieuwe website. We werken op een nieuwe hosting. Tabula rasa. Ik merk nu al een wereld van verschil op. Snellere respons-time met de server, installeren gaat vlot en ik kan weer klonen zonder problemen. Ik zou dus durven concluderen dat het een goed idee is om een Drupal-installatie zo clean mogelijk te houden. Heb je het niet nodig, installeer het dan niet of gooi het van je site. 

Ter info: de php-versie staat op 7.3.5

Op deze nieuwe sites heb ik een aantal modules klaargezet. Ik heb die nog niet allemaal aangezet. Het is aan jullie deze modules aan te zetten indien je ze nodig blijkt te hebben.

  1. Admin Toolbar (ingeschakeld)
  2. Asset Injector
  3. Bootstrap (thema)
  4. Switch Page Theme
  5. NewsPlus Lite (Thema, ingeschakeld)
  6. Pathauto
  7. Token
  8. CTools
  9. Jssor image gallery
  10. PHP (filter)
  11. Views vertical tabs plugin
  12. Simple Popup Views
  13. IMCE
  14. Honeypot
  15. Antibot
  16. Add Another

Naast bovenstaande modules kan je ook al een kijken bij inhoud. Daar is ook reeds iets toegevoegd.

Instap

Een eerste module die ik ga bespreken is Jssor image gallery. Dirk Bernaert heeft deze slider in eigenhandig in een module gegoten. De sliders van jssor zijn normaal niet bruikbaar op een cms.

https://www.jssor.com/

  1. Schakel de module IMCE in om de gebruiker in staat te stellen op de server bestanden te zoeken
  2. Schakel de module Jssor Image Gallery in, je zal merken dat deze nog een module nodig heeft: PHP (filter)

jssor

  1. Geef deze node een naam: Fotogalerij
  2. Zorg voor een menulink

We willen nu afbeeldingen toevoegen aan het veld, maar het is een beetje idioot om afbeelding te gaan uploaden die reeds op de server staan. Je hebt daarnet IMCE aangezet. Deze gaan we hier even implementeren.

  1. Ga naar de weergave van het inhoudstype jssor image gallery
  2. Klik op het tandwiel bij het veld afbeeldingen en pas aan:

IMCE aanzetten

  1. Bewerk nu de bestaande node Fotogalerij en merk op dat je nu de mogelijkheid krijgt om te gaan browsen

browsen

  1. Open de correcte map: 2019-05
  2. En selecteer alle afbeeldingen met den amen Abstract en Nature
  3. Om een reden die ik niet versta heb ik dat in twee keer moeten doen.
  4. Gelukt? Sla alles op en bekijk het resultaat. Je zal zien dat deze module nogal ingrijpt op het thema. Iets waar we mee moeten leren leven op dit moment. Een zeer knappe module!

gallery

View met Tabs

We hebben op onze site een groot aanbod aan werkmaterialen. Deze willen we graag in een view gieten met overzichtelijke tabs die de inhoud gaan filteren op het merk.

Hiervoor heb je geen modules nodig. Al wat je hiervoor nodig hebt zit verwerkt in views zelf.

  1. Maak een nieuw overzicht aan: Aanbod Werkmateriaal
    1. Inhoud van het type Producten
    2. Pagina maken
    3. Onopgemaakte lijst van velden
    4. Geen paginering
    5. GEEN menulink
  2. Voeg het veld afbeeldingen toe.
    1. Afbeeldingsstijl: gemiddeld
    2. Zorg dat de afbeeldingen niet in dezelfde rij worden weergegeven

zelfde rij

 

 

 

niet dezelfde rij

  1. Het veld Title mag je verbergen

We voegen nu telkens een pagina toe met een filter. Op Page 1 willen we bijvoorbeeld enkel Makita zien

  1. Voeg een eerste Page toe

page toevoegen

  1. Wijzig meteen de naam zodanig dat een logisch gegeven blijft:

naam wijzigen

  1. Stel nu de filter zodanig in dat deze weergave enkel Makita's gaat tonen:
    1. Klik bij Filtercriteria op een filtercriteria toevoegen
    2. Zoek naar het veld Title
    3. Zorg dat dit enkel wordt toegepast op deze weergave
    4. Stel de filter vervolgens correct in:

filtercireruia

  1. Een fout die al even op onze zenuwen werkt is die van dat pad. Geef een logisch pad op. Ik ben daarvoor eerst even gaan kijken wat het pad is bij onze hoofd-weergave en heb dan een logische aanpassing gemaakt:

pad

  1. Sla alles op

We leggen nu een eerste link in het menu. Dit doen we echter niet met views:

  1. Ga naar Structuur - Menu's - Main navigation - Link toevoegen

link toevoegen

  1. Voeg nu een link toe zoals hieronder. Ik heb voor de sport de beschrijving ook eens ingevuld:

toeveogen

  1. Keer terug naar de view. Pas nu eerst de hoofdpagina (de eerste) aan van de view. Geef deze een Standaard menu-tap met een passende naam:

tab

  1. In het volgende veld duidt je aan het bovenliggende menu reeds bestaat (daar net namelijk aangemaakt)

bestaat al

  1. Schakel nu over naar de pagina van de Makita's en pas hier ook het menu aan. Echter nemen we dit keer iets anders:

makita tab

  1. Er rest ons nu enkele nog de taak om de nodige stappen te herhalen voor DeWalt en Milwaukee. Wanneer je uiteindelijk het resultaat bekijkt zouden de tabs zichtbaar en bruikbaar moeten zijn. Is dat niet het geval; controleer dan of het blok Tabs is ingeschakeld. Ter afwerking is het misschien een idee om de afbeeldingen te laten floaten. Aan u de keuze.

makita

Eenvoudige boeking

Om bezoekers te laten inschrijven of een afspraak te maken bestaan er een aantal modules. Helaas zijn deze bijzonder complex. Met dank aan Dirk Bernaert kan ik jullie de volgende tutorial aanbrengen die een bescheiden maar eenvoudige manier om booking aan te bieden aanleert.

Wij bieden drie cursussen aan: Drupal Basis, Drupal Gevorderd en Drupal Expert. Hiervoor mogen maximaal 5 personen inschrijven.

  1. Maak een inhoudstype met de keuzemogelijkheden. Voeg een inhoudstype toe, geef dat de naam Drupal Cursus. Voeg geen velden toe.
  2. Voeg nu inhoud toe van het type inhoudstype. 5 personen voor elke cursus. Dus je zal van de drie cursussen telkens 5 nodes moeten maken:

jodes

  1. Maak nog een inhoudstype aan. Geef dit de naam Cursusinschrijvingen
  2. Voeg hier een inhoudsreferentie toe:

keuzes

  1. Aangezien we het inhoudstype gaan openzetten voor de anonieme bezoeker in een volgende stap moeten we daar eerst wat instellingen voor doen:
    1. Zorg dat formulieren worden beveiligd met Honeypot en Antibot
    2. Zorg ervoor dat het label van het veld Title wordt aangepast naar Naam
    3. Zorg ervoor dat er geen revisies kunnen worden ingediend
    4. Zorg ervoor dat een indiening niet wordt gepubliseerd
    5. Verwijder het veld body
    6. Zorg dat de keuzemogelijkheden van ons overgebleven veld ingesteld is op keuzevakjes/keuzerondjes
    7. Zorg voor een passende beschrijving bij het veld Drupalcursus
  2. Om het inhoudstype beschikbaar te maken voor de anonieme gebruiker gaan we naar People - Toegangsrechten

rechten

  1. Met Ctrl-F ga je op zoek naar het inhoudstype

dink

  1. Zorg er vervolgens voor dat de anonieme gebruiker inhoud kan toevoegen

vink

  1. Voeg inhoud toe van het type Cursusinschrijving en controleer hetgeen je ziet.

type

  1. Vul geen inhoud toe. Kopieer echter wel de URL. Hiervan maken we nu een menulink:

link

  1. Open een nieuwe browser. Surf naar je website en controleer of je een inschrijving kan toevoegen.
  2. Indien dit lukt dan zou je op de ingelogde website een nieuwe node moeten zien verschijnen bij de inhoud

inschrijing

De volgende stap nu is ervoor zorgen dat gekozen mogelijkheden niet meer verschijnen bij een volgende inschrijving.

  1. Maak een nieuw overzicht aan:

View

  1. Sorteer eventueel oplopend om eerst de Basis cursussen te zien.
  2. Bij dit inhoudstype willen we ook de namen zien van de mensen die zich inschrijven. Dat kan je doen door een relatie toe te voegen:

relatie

  1. Voeg bij de velden het veld Title toe, maar leg ook de relatie.

f

  1. Het gevolg is nu dat je bij elke cursus die een inschrijving heeft ook de naam van die persoon ziet staan:

lander

(In bovenstaande heb ik het eerste veld title niet meer gelinkt)

  1. We willen nu dat die cursussen met een inschrijving niet meer zichtbaar zijn. Daarin kan namelijk niet meer worden ingeschreven. Dit doen we door een filter toe te voegen op de Title. We leggen daarop de relatie en stellen de filter zodanig is dat deze enkel toont wanneer het veld leeg is:

leeg

  1. Voeg nu een referentie naar een entiteit toe:

ref

  1. Stel even in:

d

  1. Sla alles op en ga naar de instellingen van het veld in kwestie van het inhoudstype. Pas vervolgens de referentie aan zodanig er nu naar het overzicht wordt gerefereerd.

ref

  1. Alles zou nu moeten werken. test uit door een aantal keer in te schrijven in de uitgelogde versie van jouw site, telkens met een andere naam. Per keer dat je inschrijft zouden de mogelijkheden moeten slinken.

Uitsmijter

We maken nog een laatste overzicht waarin we twee leuke modules verwerken: Simple PopupViews en Vertical tabs Style Plugin. Deze mag je alvast even gaan inschakelen.

  1. Maak een nieuw overzicht aan:

dfg

  1. Pas de instellingen bij Verticale tabs aan:

f

  1. Voeg het veld afbeelding toe. Stel geen scheidingsteken in.
  2. Verberg het veld Title

mil

  1. Maak opnieuw een overzicht:
    1. Naam: De Betere boormachine
    2. Onopgemaakte lijst van velden
    3. Inhoud van Producten
    4. Menulink
    5. Geen paginering
  2. Voeg het veld afbeeldingen toe, stel zodanig in dat je maar 1 afbeelding weergeef, gemiddeld
  3. De title geeft je de stijl H3
  4. Voeg het veld simple popup Views en stel in:

c

  1. Verberg het veld afbeeldingen
  2. Sla op en bekijk het resultaat

Pas het volgenden nog even toe:

  1. Aanpassen naar een raster van drie kolommen
  2. Volgende CSS laten draaien op de pagina:

css