Drupal 7 cursus deel 4: poll, forum en nieuw thema

In de vorige delen van deze cursus Drupal 7 heb je een website gebouwd die klaar is om te groeien. In deze slotaflevering rond je de functionaliteit en de vormgeving helemaal af. Uiteraard zet je je website vervolgens online. In de eerste drie delen van de cursus Drupal 7 heb je de site ingericht met verschillende soorten pagina’s, de navigatiemenu’s aangepast en je hebt ervoor gezorgd dat gebruikers kunnen inloggen en bijdragen leveren. In het vierde en laatste deel voeg je een poll en een forum toe en verander je de layout met een nieuw thema. Tot slot leren we je in vijf stappen hoe je je website online zet. De site is klaar, maar hij staat nog op je eigen computer. Hoe zet je hem over naar het web? Dat is nauwkeurig werk, maar het is goed te doen. Als je er wat routine in hebt, is het in 5 minuten gebeurd. De belangrijkste stappen: kopieer de database, kopieer Drupal en pas de instellingen aan. Om de site online te installeren, heb je een eigen domeinnaam nodig en een webhostingaccount met in elk geval ondersteuning van MySQL 5.0.15 of hoger en php 5.2.5 of hoger. Stap 1: kopieer bestaande database Om te beginnen maak je een kopie van de database. Klik op je computer op het pictogram van WampServer in de taakbalk en klik op het databasebeheerprogramma phpMyAdmin. Selecteer de naam van de database en klik op het tabblad Exporteer. Hier staan de meeste instellingen goed. Selecteer bij Structuur: Voeg DROP TABLE ... toe. Kies bij Verzenden voor Compressie: gezipt, zodat je geen onnodig groot databasebestand krijgt. Klik dan op Start om de databasekopie te maken. Die wordt opgeslagen met een naam als databasenaam.sql.zip. Stap 2: nieuwe lege database De kopie van de database is er, maar hoe zet je die op de webserver? Daarvoor heb je een (lege) database nodig. Hoe je die maakt, verschilt per webhost: soms krijg je de naam van de database (plus inlognaam en wachtwoord) van je hostingprovider, soms maak je die database zelf in een beheeromgeving (zoals Plesk of Cpanel). Je webhost kan je daarover informeren. Stap 3: importeer de data Importeer de database-inhoud in de lege database. Ook hier verschilt de procedure per webhost, maar vaak is in de beheeromgeving van de webhost phpMyAdmin beschikbaar. Open dat programma, selecteer de te vullen database en klik op Importeer. Nu kun je het sql-zipbestand importeren. Als je een melding krijgt dat de tabellen uit het sql-bestand geïmporteerd zijn, is de database klaar. Stap 4: zet Drupal over Na de database is de volgende stap het overzetten van de Drupal-bestanden zelf. Dat doe je met een ftp-programma, zoals het gratis Filezilla. Bij de accountinformatie die je van je webhost hebt ontvangen, staan ook de ftp-gegevens. Met die gegevens maak je in Filezilla een verbinding met de webserver. Kopieer alle bestanden uit de lokale Drupal-map (bijvoorbeeld C:/.../www) naar de rootmap van de webserver (de naam verschilt per webhost, bijvoorbeeld httpdocs of www). Stap 5: pas de instellingen aan Tot slot moet je Drupals bestand met database-instellingen aanpassen. Navigeer in het ftp-programma naar de map sites/default. Die bevat het bestand settings.php. Open dat en scroll door tot je de gegevens van de database vindt. Let op: het gaat om de regels waar géén sterretje voor staat. Vul bij database de naam in van de nieuwe, online database. Vul ook username en password van die database in. Klaar: de website is nu bereikbaar vanaf de nieuwe locatie. De website is zo goed als rond: klaar voor alle content, met alle gewenste functionaliteit. Alleen de vormgeving is nog niet bijzonder. Als je iets anders wilt dan het standaardthema, is dat zo geregeld. Met een nieuw thema krijgt de site over een totaal andere look and feel. Een populair thema uit het aanbod van Drupal.org is Marinelli. Download Marinelli hier. Via Uiterlijk, Installeer een nieuw thema installeer je dat bestand. Kies na installatie van het thema voor Als standaard instellen. De metamorfose van de site is al meteen compleet. Je zou met dit thema al kunnen werken, maar in de praktijk is het beter om een kopie te maken: een subthema. Je aanpassingen gaan dan niet verloren als je later het originele thema updatet. Bij Marinelli maak je zo’n kopie als volgt: Kopieer de map sites/all/themes/marinelli/subtheme naar de locatie sites/all/themes/subtheme. Om het thema een andere naam te geven, verander je de mapnaam subtheme in bijvoorbeeld autoclub. In die map vind je een tekstbestand subtheme.info.txt. Open dat en verander name = subtheme in name = autoclub. Sla het bestand op. Tot slot hernoem je dat bestand van subtheme.info.txt. naar autoclub.info (dus zonder de extensie txt). Nu is het subthema met de naam autoclub klaar voor gebruik. Ga in de beheeromgeving naar Uiterlijk en schakel autoclub in als standaardthema. De site heeft nu nog steeds de Marinelli-layout: het subthema neemt alle instellingen over van het hoofdthema, behalve als je die instellingen verandert in het subthema. Logo en banner In het nieuwe thema pas je de header aan zoals je al in de eerste aflevering van deze workshop hebt gezien, via Uiterlijk, Instellingen. Haal het vinkje weg bij Gebruik het standaardlogo en upload opnieuw het autoclublogo. Maar Marinelli biedt iets extra’s: het thema bevat ook een slideshowbanner. Om die te gebruiken, vervang je de standaardfoto’s (zoals de kattenogen) door je eigen foto’s. Ga via Uiterlijk naar de instellingen van het thema en klik op Banner Management. Verwijder de voorbeeldfoto’s één voor één (Delete image). Zorg ervoor dat je een paar geschikte foto’s hebt op het juiste formaat: 1020x320 pixels. Je kunt Photoshop gebruiken om afbeeldingen bij te snijden, maar denk ook aan gratis online alternatieven als pixlr.com, die voor dit soort bewerkingen prima volstaan. Als je een afbeelding op het juiste formaat op je computer hebt staan, voeg je die toe via Upload a new banner. Bij Titel en Omschrijving kun je informatie invullen die onder aan de banner zal verschijnen. Wil je dat de banner een link vormt naar een andere pagina op de site? Vul dan bij URL het adres in van de doelpagina. Bij Zichtbaarheid ten slotte bepaal je waar de banner verschijnt: bijvoorbeeld alleen op de homepage ( ) of overal (vul dan een sterretje in). Herhaal deze stappen tot je voldoende banners hebt voor een slideshow. Als je wilt, kun je via de lay-utinstellingen (Layout Settings) ook de kolomindeling kiezen. De kolom met de hoofdcontent kan links staan, in het midden of rechts. Megadropdownmenu Marinelli bevat naast de slideshow nog een extra: een megamenu. Dat toont in één grote dropdownweergave direct alle sublinks binnen de beschikbare rubrieken. Je kunt een menu maken dat er uitziet als in de afbeelding hierboven. Hoe maak je zo’n megamenu? Selecteer eerst bij het thema Marinelli onder Primary Menu Settings, Mega Drop Down. In de voorbeeldsite is het effect nog bescheiden, omdat het hoofdmenu nog maar een paar links bevat. Maar als je het menu bevolkt met meer links en sublinks, wordt die hiërarchie ook in het menu getoond. Je kunt dit uitproberen door menulinks toe te voegen via Structuur, Menu’s, Hoofdmenu. Gebruik korte links voor het tweede niveau, dat worden de ‘kopjes’ boven de lijsten met sublinks daaronder. Je kunt per hoofdlink maximaal 4 links op het tweede niveau maken. Op het derde niveau is het aantal menulinks onbeperkt. Css-stijlen aanpassen Als je de vormgeving van een thema wilt aanpassen, moet je wijzigingen aanbrengen de css-bestanden (de bestanden met de vormgevingsstijlen). Daarvoor is het nodig dat je een beetje css-code beheerst, maar dat is niet ingewikkeld en het stelt je in staat om met beperkte ingrepen het hele aanzien van de site te veranderen. Je vindt de css-bestanden in de map sites/all/themes/marinelli/css. Kopieer die bestanden eerst naar je subthema voordat je ze verandert. Een voorbeeld: stel dat je het bestand layout.css wil aanpassen, maak dan eerst de map sites/all/themes/autoclub/css aan en kopieer lay-out.css naar die nieuwe map. Verander ook iets in het tekstbestand sites/all/themes/autoclub/autoclub.info: verwijder de puntkomma aan het begin van de regel vóór het bestand layout.css. Je vertelt Drupal daarmee dat het niet het originele layout.css-bestand moet raadplegen, maar de door jou veranderde kopie in het subthema autoclub. Een voorbeeld van wat je met css kunt veranderen: als je layout.css opent in een teksteditor, vind je daar de stijl voor de body van de pagina. Als je die wijzigt in background: orange, verandert de achtergrondkleur van elke pagina. Denk er wel om dat je na dit soort wijzigingen altijd Drupals cachegeheugen leegmaakt (Instellingen, Prestaties, Alle caches legen). Pas dan vindt Drupal alle wijzigingen in de themabestanden. Verder met Drupal De voorbeeldsite is af: inhoud, extra functies en vormgeving zijn naar wens. Maar natuurlijk valt er nog veel meer uit Drupal te halen. Het is leerzaam om rond te kijken in de menustructuur en te experimenteren met de beschikbare opties. Kijk ook op de volgende sites: Over Drupal:http://drupal.org (internationale site)http://drupal.nl (Nederlandstalig) Over CSS:http://www.homepage-maken.nl/csscursus/overcss.php Over FTP:http://www.byte.nl/docs/Alles-Over-FTP.html Gratis ftp-programma Filezilla:http://filezilla-project.org Modules zijn er in soorten en maten: de module Poll is een relatief kleine uitbreiding van je site. Een voorbeeld van een module met veel meer mogelijkheden is Forum. Om een forum toe te voegen, ga je naar Modules. Zet een vinkje bij Forum om de forumfunctionaliteit in te schakelen en sla je wijziging op. Om in te stellen wie forumberichten mag posten, klik je op dezelfde pagina bij Forum op Toegangsrechten. Op de toegangsrechtenpagina scrol je door naar Nodes. Daar staan de rechten voor forumberichten tussen, zoals Forumonderwerp: Nieuwe inhoud aanmaken en Forumonderwerp: eigen inhoud bewerken. Die twee rechten moet je toekennen aan geverifieerde (=geregistreerde) gebruikers, zodat zij forumberichten kunnen posten. Eventueel kun je ook anonieme gebruikers de gelegenheid geven om berichten op het forum te zetten, maar bedenk wel dat dat spam kan opleveren. Sla de toegangsrechten op. Als je wil, kun je het hierbij laten. De forumfunctionaliteit is beschikbaar, de toegangsrechten zijn geregeld, en er is standaard al één forum, Algemene discussie. Ook de bezoeker kan ze nu bereiken: in het navigatiemenu is automatisch een link Forums toegevoegd. Heb je meer forums nodig, dan voeg je die toe via Structuur, Forums. Klik op Container toevoegen om een hoofdgroep te maken, bijvoorbeeld Discussie over automerken. Klik op Forum toevoegen om bijvoorbeeld Citroënforum, Peugeotforum enzovoort aan te maken. Bij elk van de forums kies je Discussie over automerken als ‘bovenliggend’. Zo krijg je een serie forums met specifieke onderwerpen, die allemaal vallen onder de container Discussie over automerken. Als je op die manier een aantal forums aanmaakt, ziet de bezoeker via de link Forums een overzicht van forums en de laatste bijdragen (die nu natuurlijk nog leeg zijn) en kan hij zelf ook een forumbijdrage toevoegen. Forumposts in blok Zojuist heb je een blok toegevoegd waarin je de poll laat zien. Ook voor het forum is een blok beschikbaar, waarin je een lijstje kunt tonen met nieuwste forumberichten. Je vindt het via Structuur, Blokken, Nieuwe forumonderwerpen. Selecteer als gebied Sidebar second en sla je wijzigingen op. Via Instellen kun je aangeven op welke pagina’s het blok verschijnt. Om het blok niet te tonen op forumpagina’s, kies je voor Alle pagina’s behalve de genoemde. Noteer in het invulvak forum en op de volgende regel forum/*. Drupal weet nu dat het blok niet mag opduiken op de hoofdpagina van het forum en op alle subpagina’s (aangegeven met het sterretje). Vanaf nu verschijnt een het blok met recente forumberichten in de rechterkolom. Blokken zijn in Drupal een krachtig middel om speciale content en speciale functies ‘rondom de pagina’ te plaatsen. Via Structuur, Blokken zie je welke blokken er nog meer standaard in Drupal zitten. Je kunt ze uitproberen door ze in te schakelen en toe te wijzen aan een paginapositie. Zo ontdek je vanzelf wat er allemaal aan extra’s in Drupal meekomt. Om blokken te kunnen toepassen, moet je natuurlijk wel weten wáár je die blokken kwijt kunt op de pagina. Informatie daarover vind je op de pagina Blokken: de link Blokgebieden demonstreren biedt een overzicht van alle beschikbare posities en hun namen. Modules zijn plugins voor Drupal waarmee je alle denkbare functionaliteit kunt toevoegen, of het nu gaat om een eenvoudig blokje met links naar de nieuwste artikelen of om een compleet forum. Op Drupal.org vind je een enorme keuze aan modules die ontwikkelaars beschikbaar stellen. Maar ook in de standaard Drupal-installatie vind je al een aantal modules die je alleen nog maar hoeft aan te zetten en te activeren. Een goed voorbeeld is de module Poll, waarmee je een mini-enquête op de site kunt zetten. Ga naar Modules, Poll en schakel de module in door een vinkje te zetten. Zodra je deze wijziging hebt opgeslagen, is de module klaar voor gebruik. Om een poll te maken, gebruik je nu het nieuwe Inhoudstype Enquête (Poll). Klik op op Inhoud toevoegen, Enquête. Vul een vraag in (in dit voorbeeld: ‘Wat is je favoriete Franse automerk?’), en vul bij Keuze de verschillende antwoorden in, bijvoorbeeld Citroen, Peugeot en Renault. Als je nu de enquête opslaat, verschijnt hij direct op de homepage van de site. Om de poll echt te kunnen gebruiken, moet je een paar instellingen veranderen. Voor gewone gebruikers is de poll namelijk wel zichtbaar, maar ze kunnen niet stemmen. Daarvoor moeten ze eerst inloggen. Dat ook niet ingelogde bezoekers kunnen stemmen, regel je via Personen, Toegangsrechten. Scrol door tot je Poll vindt in de lijst. Zet een vinkje in de kolom Anonieme gebruiker bij het recht Stem op enquêtes. Nu kan elke sitebezoeker stemmen. Tot slot verander je de weergave van de poll, zodat hij niet midden op de pagina verschijnt, maar in een bescheiden blok. Blokken zijn functieblokjes die op verschillende posities in de pagina kunnen verschijnen, bijvoorbeeld in de rechterkolom. Vaak worden blokken mee geïnstalleerd als onderdeel van een module. Voor de module Poll is standaard een blok beschikbaar dat de laatste enquête weergeeft. Om een poll in een blok weer te geven, ga je naar Structuur, Blokken. Kies het blok Meeste recente enquête en selecteer als positie Sidebar Second. Het blok springt meteen naar zijn nieuwe positie, hoger in de lijst. Klik op Instellen om te bepalen dat het blok uitsluitend op de homepage verschijnt. Selecteer bij Pagina’s: Alleen de genoemde pagina’s en typ in het invulvak . Die code (in vishaken) vertelt Drupal dat het blok alleen op de homepage mag verschijnen. Het blok is klaar. Om ervoor te zorgen dat de poll niet langer getoond wordt tussen de artikelen op de homepage, ga je tenslotte naar Inhoud en klik je op de link Bewerken naast de titel van de enquête. Bij de Publicatie-opties verwijder je het vinkje bij Aangeraden op de voorpagina. Bewaar die aanpassing. Als je nu uitlogt en navigeert naar de homepage van je site, zie je de enquête in de rechterkolom. Omdat de enquête openstaat voor iedere bezoeker, kun je meteen nu een stem uitbrengen.

PCM

Drupal 7 cursus deel 4: poll, forum en nieuw thema

Inhoudsopgave

Laatste Vacatures

Nieuws headlines

PCM

Drupal 7 cursus deel 4: poll, forum en nieuw thema

Inhoudsopgave

Nieuws headlines

Inloggen

Registreren

We hebben je een e-mail gestuurd!

Oops… er ging wat mis.

Hoera, je account is nu geactiveerd!

Dit token is niet meer valide.

Wachtwoord vergeten?

Je aanvraag is verstuurd

Wachtwoord herstellen

Wachtwoord herstellen

Dit token is niet meer valide.

Bedankt!

Je vraag is geplaatst!

Je antwoord is geplaatst!

Bevestigingsmail verstuurd!

Cookies op Reshift websites

Wij maken gebruik van cookies, en dit doen we:

Waarom moet je eigenlijk akkoord gaan met cookies?

Geen cookie ondersteuning