(pdf-versie)

Beveiliging Webform

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

Honeypot

Antibot

2. 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

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

 

3. 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

4. Zorg dat deze pagina nu ingesteld wordt als homepage
5. 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.

 

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

Weergave 2: VBO voor de admin

1. Naam van de weergave aanpassen: VBO voor admin

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

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

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

11. Vink enkel de optie Modify Filed Values aan

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

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

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

5. Pas de weergave van tabel aan naar Flexslider (DEZE WEERGAVE)
6. Voeg het veld afbeelding toe, kies als afbeeldingsstijl miniatuur
7. Verwijder het veld Thema
8. 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

Detail

Het hoofdmenu ziet er uiteindelijk zo uit:

Extra

Op de frontpage willen we ook nog een diavertoning van alle vogels. Extra hier is de CSS. We willen telkens ook de naam van de vogel op de foto zien staan. In ons huidige subject gaan we ervan uit dat we ook vogelboeken (= boeken over vogels) aanbieden.

1. Maak een nieuw overzicht aan, kies voor een blok van de tuinvogels.
2. Voeg het veld afbeelding toe
3. Maak van de afbeelding een 'responsive image' en geef deze de stijl 'wide'
4. Het veld titel geef je het HTML-element H3
5. Voeg meteen ook een CSS-klasse toe: vogeltitel; deze gaan we straks aanmaken in de injector.
6. (Zorg ervoor dat de titel niet linkt naar de inhoud)
7. Gebruik volgende CSS-code:

.vogeltitel {
   font-size: 2em;
   min-width: 300px;
   max-width: 300px;
   text-align: center;
   position: relative;
   top: 80px;
   left: calc(50% - 150px);
   background: white;
   padding: 5px;
}

Extra uitleg CSS code:

8. Geef het blok nu een plaats. Enkel op de front-page. Titel niet zichtbaar. In het blokgebied 'Content suffix'
9. Pas eventueel de CSS verder aan. Een schaduw geven, kleur geven, hoeken afronden...