Les 5

(pdf-versie)

Beveiliging Webform

  1. Volgende modules kan je alvast installeren voor de beveiliging van formulieren:

Honeypot

Antibot

  1. Enkel Honeypot moet je nog aanzetten.

Oefening

Voorbereiding

  1. Zorg voor een uitklapmenu 'tuinvogels'. Plaats alles rond dat onderwerp in dat uitklapmenu
  2. Download HIER de nodige bestanden

Homepage

  1. Op dit moment zien we op de homepage een overzicht van teasers met de verschillende reeds toegevoegde nodes. We willen hier een mooie pagina tonen die de bezoeker aanspreekt.
  2. Maak twee nieuwe blokken aan. De eerste krijgt de titel boekensteun en je plaatst deze in het blokgebied Content Top. Het tweede blok plaats je in het gebied Content Top Highlighted met als titel Boekenworm. Gebruik de juiste afbeeldingen.
  3. Bij de instellingen van het thema pas je de schikking aan, dat doe je via Layouts - Page (Default) - Wide

layout

result

  1. Met wat CSS zorg je ervoor dat de titels boven de blokken centraal staan en maar 21px groot zijn.

css

 

  1. Voeg nieuwe inhoud toe van het type Artikel, geef het de titel 'Welkom'. Neem onderstaande over om in de body te plakken:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

  1. Zorg dat deze pagina nu ingesteld wordt als homepage
  2. Plaats tot slot twee blokken in de Content Bottom First en Content Bottom Second, uiteraard enkel zichtbaar op de homepage. Gebruik de afbeeldingen uit de gedownloade bestanden. Deze afbeeldingen zijn 450 breed en 300 hoog. Ze staan centraal.

boeken

 

Inhoud

Op dit moment hebben we nog geen inhoud wat de boeken betreft. In de gedownloade bestanden zit ook een Excel-lijst. Daarin zit een lijst van boeken. De bedoeling is dat je deze boeken op de site gaat plaatsen. Ik overloop nog eens de stappen:

  1. Inhoudstype aanmaken
  2. Databank voorbereiden (velden juiste namen geven)
  3. Databank omzetten naar CSV (met Libre Office)
  4. Databank importeren met Feeds

--> Tip: probeer eerst met 5 boeken om te testen

Uiteindelijk moet je 168 boeken hebben staan als je gaat kijken onder Content

Overzicht

Maak een nieuw overzicht aan dat jouw boeken toont. Het overzicht zelf bestaat uiteindelijk uit drie weergaves:

Weergave 1: Overzicht voor de bezoeker

  1. Onopgemaakte lijst van velden
  2. Link in het hoofdmenu
  3. Alle items worden getoond
  4. Velden:
    1. Titel: H5
    2. Auteur: Strong
    3. Thema: geen aangepaste html
  5. Zorg voor de nodige CSS:
    1. Gecentreerd
    2. Ronde hoeken van 7pt
    3. Left floatend
    4. Padding van 5pt
    5. Marge van 5pt
    6. Achtergrondkleur: #C75A5C (of iets naar keuze)
    7. Witte tekstkleur van de auteur

boeken

Weergave 2: VBO voor de admin

  1. Naam van de weergave aanpassen: VBO voor admin

  1. Pad opgeven: /vbo_boeken
  2. Link in het menu
  3. Enkele zichtbaar boor de admin
  4. Weergave aanpassen naar Tabel (DEZE WEERGAVE)
  5. Verwijder de CSS
  6. Zorg voor passende labels

  1. Voeg het veld afbeelding toe, kies als afbeeldingstijl voor miniatuur --> Het veld afbeelding zal je eerst moeten aanmaken in het inhoudstype!
  2. Voeg het veld Views Bulk Operations toe

  1. Vink Process in a bathc operation uit, dat geeft anders fouten straks!

  1. Vink enkel de optie Modify Filed Values aan

  1. Zorg dat het veld op de eerste plaats komt te staan

  1. Voeg een filter toe, deze zal ervoor zorgen dat je kan filteren op het thema:
  2. Test de VBO nu uit door de drie thema's te voorzien van een bijhorende afbeelding (zie gedownloade bestanden)

vbo

Weergave 3: Blok voor de frontpage

  1. Installeer de module flexslider
  2. Plaats de plugin in de map libraries (op een nieuwe installatie moet je die eerst nog maken)
  3. Voeg een weergave toe, dit keer kies je voor een block
  4. Geef deze weergave de naam: slideshow front

  1. Pas de weergave van tabel aan naar Flexslider (DEZE WEERGAVE)
  2. Voeg het veld afbeelding toe, kies als afbeeldingsstijl miniatuur
  3. Verwijder het veld Thema
  4. Geef het blok nu een plaats: alleen op de frontpage

--> de instellingen van flexslider moet je gaan bekijken en bewerken onder Instellingen. We overlopen deze klassikaal

Contactformulier

Maak een contactformulier zoals in onderstaand voorbeeld. Het formulier moet voldoen aan volgende kenmerken:

  1. De velden voornaam en familienaam zijn verplicht
  2. Geef de gebruiker de mogelijkheid om in een selectielijst zijn/haar favoriete boek te kiezen
  3. Wanneer een gebruiker alles heeft ingevuld krijgt deze een gepersonaliseerde bedanking te zien

recensie

bedankt

Detail

Het hoofdmenu ziet er uiteindelijk zo uit:

menu