Het is echter de bedoeling dat onze klant zelf ook nieuwe pagina’s kan toevoegen en opmaken zonder enige kennis van HTML te hebben.

Dit kan door een extra module te installeren, namelijk de FCK-editor.

1. Module downloaden (http://drupal.org/node/16118/release) en in de map modules plaatsen (root > modules)
2. FCK-editor downloaden (http://www.fckeditor.net/download) en de bestanden uit de gedownloade map kopiëren in de map /modules/fckeditor/fckeditor/
3. We loggen in op onze Drupal-site en activeren de module: Administer › Site building › Modules
   

   FCK-editor activeren

   Klik op Save configuration

4. Vervolgens moeten we alle gebruikers toestemming geven om de FCK-editor te gebruiken. Administer > User management > Permissions, hier alle gebruikers aanvinken
   

   Alle gebruikers toestemming geven

   Klik op Save permissions

5. Nu kunnen we verschillende instellingen wijzigen bij Administer > Site configuration > FCKeditor. Klik dan op Profile › Advanced › Edit. Hier kunnen we bijvoorbeeld de skin op Silver zetten.
   

   Instellingen wijzigen

   Klik op Update profile

6. Bij Administer › Site configuration › Input format kunnen we de toegestane HTML-tags aanpassen. Klik bij Filtered HTML op configure. Hier kunnen we de huidige lijst met HTML-tags vervangen door volgende lijst:

   <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> 
   <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> 
   <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> 
   <cite> <embed> <object> <param> <strike> <caption>

    

   

   Toegestane HTML-tags wijzigen

   Klik op Save configuration

7. Bij de tab edit kunnen we Line break converter afvinken om betere controle te hebben over de regeleindes
   

   Line break converter afvinken

   Klik op Save configuration

8. Nu kunnen we de FCK-editor testen:
   

   Eindresultaat

Zoals te zien is kunnen we de ingevoerde tekst opmaken, afbeeldingen invoegen, lijsten maken, enzovoort, en dit allemaal zonder enige HTML-kennis nodig te hebben!

Origineel theme Garland

Om te beginnen vervangen we het Drupal logo door het logo van Colruyt. Het logo vinden we in de map misc in de root-map. We vervangen de afbeelding druplicon.png.

Logo vervangen

In de map /themes/garland/images/ vinden we verschillende afbeeldingen die gebruikt worden om het theme vorm te geven en die gebruikt worden als achtergrond elementen. We openen deze bestanden in Photoshop en voorzien ze allemaal van een oranje kleur. (Nieuwe laag aanmaken en deze vullen met een oranje kleur, dan de overvloeimodus van de bovenste laag op Kleur zetten. Eventueel kan de onderste laag nog aangepast worden met de levels (Ctrl + L, Cmd + L) als de afbeelding te licht of te donker zou zijn).

Voorbeeld achtergrondafbeelding aanpassen

In de map /root/themes/garland/ vinden we ook het CSS-bestand dat gebruikt wordt om het theme vorm te geven (style.css).  Hierin vervangen we alle blauwe hexadecimale kleurcodes in oranje tinten.

Uiteindelijk geeft dit het volgende resultaat:

Eindresultaat

Contactpagina

Via Drupal is het ook mogelijk om een standaard-contactformulier toe te voegen.
Allereerst gaan we naar Admin › Site building › Modules. in die lijst vinken we ‘Contact’ aan, en slaan we onze instellingen op via “Save configuration”.
Vervolgens creeren we bij Admin › Site building › Menus › Primary links, een nieuw item. we zorgen dat er bij Path enkel “contact” staat. Drupal linkt dit automatisch aan het standaard-contactformulier. De andere gegevens vullen we gewoon in.

Als we ingelogd zijn zien we in ons menu een contactpagina verschijnen, maar eenmaal we uitgelogd zijn, is dit plots weg. Dit komt omdat we bij Admin › User management › Permissions, bij Print Module, de “Access site-wide contact form” nog niet hebben aangevinkt voor “anonymous user”. Als we deze instellingen opslaan, is dit in orde; ook al zijn we niet ingelogd, we krijgen een contactformulier.

Print-friendly pages

We hebben een extra module toegevoegd om PDF te tonen en te kunnen printen.

• We downloaden de module + extra dompdf 0.5.1.
• In de map modules slepen, dompdf in de map print slepen.
• Schrijfrechten toekennen.
• Module activeren bij ‘modules’.
• Permissions toekennen.

Invoer van de HTML in de database / Uitvoer van XHTML

Aanvankelijk maken we gebruik van onze goede oude XML- en XSLT-bestandjes om onze bierendatabase om te zetten naar HTML. Indertijd capteerden we de na toepassing van de XSLT gegenereerde HTML-code met behulp van het XML-pakket Stylus Studio 2008. Deze zag er ongeveer zo uit:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Folder Colruyt</title>
  <link rel="stylesheet" type="text/css" href="opmaak.css">
 </head>
 <body>
  <h1>Folder</h1>
  <div class="artikel">
   <h2>Brigand</h2>
   <p class="afbeelding"><img src="../images/Brigand.jpg" alt="Foto van Brigand"></p>
   <p class="beschrijving">Een amberkleurig bier met een karaktervolle smaak. Licht bitter dankzij de fijne hop.</p>
   <ul>
    <li class="temperatuur">Schenken op 8 - 10° <abbr title="Celsius">C</abbr></li>
    <li class="graden"><abbr title="Alcohol">Alc.</abbr> 9% <abbr title="volume">vol</abbr></li>
    <li class="hoeveelheid">6 × 33 cl</li>
   </ul>
  </div>
  <div class="artikel">
   <h2>Brugse Tripel</h2>
   <p class="afbeelding"><img src="../images/BrugseTripel.jpg" alt="Foto van Brugse Tripel"></p>
   <p class="beschrijving">Traditionele, lichtbruine tripel uit Brugge, hergist op de fles. Heeft een aangename lichtzoete smaak: een afgerond moutkarakter, een geparfumeerde hoptoets en een lekkere combinatie van verschillende smaken.</p>
   <ul>
    <li class="temperatuur">Schenken op 8 - 12° <abbr title="Celsius">C</abbr></li>
    <li class="graden"><abbr title="Alcohol">Alc.</abbr> 9% <abbr title="volume">vol</abbr></li>
    <li class="hoeveelheid">6 × 33 cl</li>
   </ul>
  </div>
 </body>
</html>

Deze code snippet is puur ter illustratie van de opbouw van het HTML-bestand, en bevat slechts twee bieren; het werkelijke bestand is uiteraard iets groter.

We gaan plaatsen deze code nu aan de site toevoegen. We loggen hiertoe in op het Drupal-administratiegedeelte, en klikken achtereenvolgens door naar Create Content › Page. We vullen de Title in, in dit geval “Bieren”, en kiezen bij “Input Type” uiteraard voor Full HTML. Doen we dit niet, dan worden alle speciale HTML-elementen (op enkele “allowed tags” na) weggefilterd bij de uitvoer. Sowieso blijft de inhoud wel ongefilterd, in z’n originele vorm opgeslagen in de database.

Een invoertype selecteren in Drupal

Wat wij ietwat vreemd vonden, is dat Drupal automatisch line breaks omzet naar <br />-elementen, ook indien voor Full HTML wordt gekozen! Uiteraard kan deze functie handig blijken indien je simpelweg tekst met hier en daar wat eenvoudige HTML invoert… Maar wanneer je zo geavanceerde HTML inbrengt dat je al voor Full HTML moet kiezen, zou je toch denken dat je ook line breaks zelf kan coderen waar nodig. Hoe je deze functie kan uitschakelen, bespreken we later, maar wij hebben in elk geval enkele regeleindes uit onze HTML-code moeten verwijderen om tot het beoogde resultaat te komen…

Zoals tijdens onze eerste presentatie omtrent XML, HTML, XSLT en InDesign gezegd, biedt XSLT vreemd genoeg enkel de mogelijkheid om HTML te genereren. De code die we zonet toevoegden aan de database, is dan ook HTML. Bij het bekijken van de broncode van onze Drupal-pagina, merken we echter volgende regel op:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Deze DOCTYPE-declaratie geeft aan dat de pagina in XHTML is opgebouwd, hetgeen conflicteert met het DOCTYPE dat bij de HTML hoort die we zonet aan de database hebben toegevoegd. Dit bleek echter geen enkel probleem voor Drupal; voor de rendering van de uitvoer, werd onze HTML netjes omgezet naar XHTML, zonder dat wij hiervoor iets moesten doen!

Opmaak van de cataloguspagina via CSS

Bovenstaande HTML-code werd oorspronkelijk verder opgemaakt door middel van CSS. Aangezien we nu echter deze inhoud gaan invoegen binnenin onze Drupal-site, waarop een zogenaamd Theme is toegepast, zullen wij enkele wijzigingen moeten aanbrengen aan zowel onze CSS als aan de door Drupal gegenereerde HTML-uitvoer.

Vooreerst gaan we ervoor zorgen dat alle pagina-inhoud mooi omsloten wordt door een DIV-element. Dit zal ons toelaten de inhoud onafhankelijk van de rest van de pagina te stijlen. We willen immers onze oorspronkelijke catalogus-opmaak zo veel mogelijk behouden.
Hiertoe bladeren we naar de map van het huidige thema. Dit is voorlopig nog steeds het standaardthema van Drupal, “Garland” genaamd. Dit vinden we door vanuit de root van onze Drupal-installatie verder te klikken naar /themes/garland/. Vervolgens openen we de template die instaat voor het renderen van de uitvoer voor Pages, namelijk page.tpl.php. Hierin zien we aan de PHP-code <?php print $content ?> dat ter hoogte van regel 76 de eigenlijke pagina-inhoud wordt gerenderd. Nu gaan we deze regel dus binnenin een DIVje wrappen. Dit doen we als volgt:

We voegen een DIV-element toe met een unieke ID.

Vanaf nu kunnen we dus alle elementen binnen de pagina-inhoud van onze catalogus als volgt aanspreken vanuit de CSS:

#inhoud .artikel ul li {
 color: #999;
 font-size: 10pt;
 text-align: right;
 background: transparent;
 }

Voorheen was deze selector simpelweg ul li, maar zulke algemene stijlwijzigingen zouden uiteraard interfereren met het actieve Drupal-thema.

Nu rest ons enkel nog de CSS toe te voegen aan de stylesheets die reeds bij het geselecteerde Theme passen. Uiteraard kunnen we onze CSS simpelweg copy-pasten binnen /themes/garland/style.css, maar dit lijkt ons niet echt flexibel. Wat immers als we morgen beslissen een ander thema te gebruiken? Dan moeten we weer alles gaan kopiëren en plakken…
Gelukkig is er een beter oplossing voorhanden. We plaatsen de CSS die eigen is aan de cataloguspagina in een apart bestand genaamd catalogus.css, binnen de map /themes/. Vervolgens moeten we voor elk thema dat we binnen Drupal willen gebruiken slechts één regeltje toevoegen aan de stylesheet:

@import url("../catalogus.css");

Het is belangrijk dat deze regel helemaal bovenaan het stijlbestand wordt toegevoegd, anders wordt deze immers door de browser genegeerd.

In eerste instantie installeerden we Drupal lokaal op onze computer. Hiervoor maakten we gebruik van MAMP, dat ons in staat stelt een webserver te draaien, samen met een MySQL-database, op een computer, zonder gebruik te moeten maken van een connectie met het internet.

Alles begint met het downloaden van de laatse versie van Drupal op de website (www.drupal.org). We kiezen voor de laatste versie (6.6), en opteren voor Engels als taal. Eenmaal het pakket uitgepakt is slepen we alles in de map die we als ‘vertrekpunt’ in de MAMP server ingesteld hebben. Wanneer we nu naar deze map ‘surfen’ in onze browser, krijgen we het installatiescherm van Drupal te zien. We zien echter meteen ook een waarschuwing, die zegt dat de installatie niet verder gezet kan worden, zolang bepaalde permissies niet toegekend zijn aan bepaalde files. In de Terminal van OS X geven we de nodige UNIX commando’s in, die deze nodige stappen uitvoeren.

We gaan verder, maar alles lijkt vlot te verlopen, maar dan gebeurd er niets meer. Een standaard pagina wordt getoond, maar inloggen kunnen we niet. We negeerden in het begin van de installatie de aanmaning om het geheugen dat aan PHP toegekend werd te verhogen naar 16mb ipv 8mb, en besluiten daarom dit toch zo in te stellen. In de php.ini file, een centrale file met allerhande instellingen voor PHP, passen we het geheugengebruik aan.

We herstarten de webserver en de installatie verloopt verder zonder problemen. Er wordt ons gevraagd naar de connectiegegevens met de database en nadat we deze ingegeven hebben zien we dat er in de database nieuwe tabellen aangemaakt zijn (het zijn er heel wat). Met de database zullen we ons niet meer moeten bezighouden, vanaf nu wordt alles via de Drupal-installatie geconfigureerd.

Na het ingeven van gebruikersnaam en paswoord, staat Drupal klaar om helemaal geconfigureerd te worden naar onze wensen.

Drupal online installeren:

Om gemakkelijker samen te kunnen werken aan de zelfde (Drupal)website, beslissen we om Drupal te installeren op een ‘echte’ webserver. Op deze manier kan ieder lid van de groep ook van thuis uit verder werken. De installatie verliep quasi hetzelfde, al zijn er enkele opmerkingen:

• We ondervonden geen problemen met de geheugen-limitatie, deze stond dus zeker op 16mb (of meer).
• De permissie-problemen doken deze keer echter ook op. Omdat we hier geen UNIX commando’s konden uitvoeren, deden we beroep op de mogelijkheden van onze ftp-client: via het info venster van het bestand vinken we de juiste lees/schrijf bevoegdheden aan.

• Omwille van problemen met de webserver die conflict gaf met de .htaccess file, lieten we deze achterwege. Dit had echter wel tot gevolg dat we de mogelijkheid tot gebruik van ‘mooi url’s’ niet meer konden aanvinken…

• Er wordt na de installatie aangeraden om de bevoegdheden van onze settings-file terug aan te passen, dit om veiligheidsredenen. Dit doen we dan ook. 

Zo, beide installaties werden met succes afgehandeld. Op beide ‘platformen’ zijn we nu in staat onze website te personaliseren naar hartelust!

Bekijk ons resultaat hier: http://vps.wsnet.be/~drupal/

Dit Excel-bestand wordt dan opgeslaan als CSV-bestand. Maar informatie hierover vind je in het blogbericht dat Mathias eerder postte

NIET DYNAMISCH

STAP 2: bij het venster van Cacidi extreme wordt het project ingesteld

Projectinstellingen

• Nieuw project aanmaken
• Pad naar database instellen
• Op Refresh klikken
• ID-veld instellen
• Pad naar afbeeldingsmap instellen (+bestandsformaat van afbeelding ingeven)
• Pad naar Item Designs instellen

Projectinstellingen (2)

STAP 3: basis lay-out aanmaken. Voor de tekstopmaak worden de paragraaf-styles van de vorige opdracht opnieuw ingeladen

Basisopmaak

STAP 4: alles selecteren en opslaan als Item Design: Bieren_niet_dynamisch.inds 

STAP 5: alles van de pagina verwijderen. Bieren_niet_dynamisch.inds kiezen bij Item Design en op Create klikken

Resultaat

DYNAMISCH

STAP 6: bij het tabblad Textlink de teksten verbinden met de juiste kolommen uit de database en de afbeelding linken met de Afbeeldingskolom uit de database

Tekst en afbeeldingen linken

STAP 7: bij het tabblad Frame fitting instellen wat er moet gebeuren als de tekst te groot zou zijn voor het tekstkader

Frame fitting instellen

STAP 8: alles selecteren en opslaan als Item Design: Bieren_dynamisch.inds

STAP 9: alles verwijderen. Bieren_dynamisch.inds kiezen bij Item Design en op Create klikken

Resultaat

PAGE DESIGN

STAP 11: nieuw page design kiezen

Nieuw page design

STAP 12: velden toewijzen (Leeg – Groen, Item Design – Blauw of Advertentie – Rood)

Velden toewijzen

STAP 13: Page Design opslaan: pagina.cep

STAP 14: bij Page Design pagina.cep kiezen en op Create klikken 

Resultaat

MEERDERE PAGINA’S

STAP 15: dit levert maar 1 pagina op. Om meerdere pagina’s te generen moet je bij het tabblad Paginareeks meerdere pagina’s aanmaken en per pagina een Page Design toewijzen. Opslaan als: meerdere_paginas.cec

Meerdere paginas

Eindresultaat

We beschikken over een document dat voorzien is van een bepaalde opmaak met een afbeelding. De Nederlandstalige tekst werd reeds geplaatst met behulp van Cacidi Extreme. Afbeeldingen als ook tekst staan op een zelfde laag. We maken nu een nieuwe laag aan en geven deze de naam NL. Op deze laag zal onze Nederlandstalige tekst geplaatst worden. We selecteren nu de onderste laag, aldus de laag met de afbeelding en tekst. Via de tool ‘Move Text frames to next layer” kunnen we nu alle tekst uit de laag naar de laag erboven plaatsen.

We zien onmiddellijk dat de tekstkaders de kleur aannemen van de bovenste laag. We dupliceren nu deze laag en vergrendelen en verbergen de twee onderliggende lagen. We hebben nu een laag met alleen tekst, die gekoppeld is via Cacidi Extreme aan onze input file (in dit geval een .csv bestand).

Vervolgens ontkoppelen we deze input file en gaan we terug naar het paneel ‘Basic’ van Cacidi. Daar klikken we op de knop ‘update’ en er verschijnt een keuzevenster waarin we het Engelstalige document (uiteraard ook een .csv) kunnen selecteren. We klikken op OK en… er gebeurd helemaal niets. In plaats dat de Nederlandstalige tekst vervangen wordt door de Engelstalige, verdwijnt alle tekst uit de tekstkaders, ze blijven volledig leeg.

Na veel verder zoeken werd er nog geen oplossing gevonden. We blijven zoeken en hopelijk kunnen we het uiteindelijke resultaat, met een analyse van wat er fout ging, hier nog posten.

De optie om een bestand vanuit Excel op te slaan als UTF-8 zat aardig goed verstopt:

Het is wat onlogisch dat de codering-instelling zich bij Webopties bevindt, aangezien een verkeerde character encoding evenzeer gevolgen heeft bij offline-gebruik. Maar ach.

1. Klik op “Text Link Panel”
2. Klik op “Show/hide text merge adornment”

Alle tekstfragmenten die uit de database worden gehaald krijgen nu een grijze achtergrond, om aan te duiden dat de (terug)koppeling met succes is gelegd.

Data terugkoppelen via Cacidi

Om dit nu te testen, kunnen we volgende stappen doorlopen:

1. Kies een willekeurig uit de database afkomstig tekstfragment (te herkennen aan de grijze achtergrond)
2. Pas een wijziging toe op deze tekst.
3. Klik op de bewaar-knop.
4. Open nu de originele database (CSV-bestand). Als alles goed is verlopen, is de tekstwaarde hier ook aangepast.

XSLT-bestand

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" doctype-public="-//W3C//DTD HTML 4.01//EN" omit-xml-declaration="yes" encoding="UTF-8" indent="yes" />
<xsl:template match="/">
<html>
 <head>
  <title>Folder Colruyt</title>
  <link rel="stylesheet" type="text/css" href="opmaak.css" />
 </head>
 <body>
  <h1>Folder</h1>
  <xsl:for-each select="Dranken/Bier">
   <div class="artikel">
    <h2><xsl:value-of select="Naam" /></h2>
    <p class="afbeelding"><img src="../images/{translate(translate(translate(translate(translate(translate(Naam, ' ', ''), '(', ''), ')', ''), '-', ''), 'é', 'e'), 'è', 'e')}.jpg" alt="Foto van {Naam}" /></p>
    <p class="beschrijving"><xsl:value-of select="Beschrijving" /></p>
    <ul>
     <li class="temperatuur">Schenken op <xsl:value-of select="Temperatuur" />° <abbr title="Celsius">C</abbr></li>
     <li class="graden"><abbr title="Alcohol">Alc.</abbr><xsl:text> </xsl:text><xsl:value-of select="Graden" />% <abbr title="volume">vol</abbr></li>
     <li class="hoeveelheid"><xsl:value-of select="Hoeveelheid" /></li>
    </ul>
   </div>
  </xsl:for-each>
 </body>
</html>
</xsl:template>
</xsl:stylesheet>

Dit resulteert in de volgende HTML-code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Folder Colruyt</title>
  <link rel="stylesheet" type="text/css" href="opmaak.css">
 </head>
 <body>
  <h1>Folder</h1>
  <div class="artikel">
   <h2>Brigand</h2>
   <p class="afbeelding">
    <img src="../images/Brigand.jpg" alt="Foto van Brigand">
   </p>
   <p class="beschrijving">Een amberkleurig bier met een karaktervolle smaak. Licht bitter dankzij de fijne hop.</p>
   <ul>
    <li class="temperatuur">Schenken op 8 - 10°
     <abbr title="Celsius">C</abbr>
    </li>
    <li class="graden">
     <abbr title="Alcohol">Alc.</abbr> 9%
     <abbr title="volume">vol</abbr>
    </li>
    <li class="hoeveelheid">6 × 33 cl</li>
   </ul>
  </div>
</body>
</html>

In dit voorbeeld wordt er slechts één artikel weergegeven, in werkelijkheid zijn het meer artikels. 
Deze HTML-code wordt dan opgemaakt aan de hand van een CSS-bestand.

* {
 margin: 0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11pt;
 }

.artikel {
 border: 1px dashed #600;
 width: 400px;
 height: 200px;
 padding: 15px;
 margin: 10px;
 float: left;
 list-style: none;
 }

.artikel ul {
 list-style: none;
 margin-top: 20px;
 }

.artikel ul li {
 color: #999;
 font-size: 10pt;
 text-align: right;
 }

abbr {
 border: 0;
 }

h1 {
 display: none;
 }

h2 {
 font-family: Georgia, serif;
 font-weight: normal;
 border-bottom: 2px solid #f90;
 font-size: 18pt;
 margin-bottom: 10px;
 margin-left: 110px;
 color: #f90;
 }

.beschrijving {
 font-style: italic;
 height: 95px;
 }

.afbeelding {
 margin-top: -40px;
 border: 1px solid #f90;
 float: left;
 margin-right: 10px;
 }

.afbeelding img {
 width: 74px;
 height: 198px;
 }