jeroen bolle. 1. inleiding 2. geschiedens 3. technology stack 4. multi-site 5. modules 6. theming 7....

Jeroen Bolle

1. Inleiding2. Geschiedens3. Technology Stack4. Multi-site5. Modules6. Theming7. LNE theme8. Extra functionaliteit

1. Inleiding

2. Geschiedenis

dorp.orgDries Buytaert

3. Technology stack

Server

Operating System

Webserver

PHP

Drupal

Database

3. Installatie

1. Download de laatste versie op http://www.drupal.org/

2. Pak het bestand uit naar een directory op de webserver

3. Voer het installatiescript uit door naar de directory te surfen

4. Geef de gegevens op om met de MySQL-database te verbinden

Standaardinstallatie


Database wordt aangemaakt en opgevuld

Default site wordt aangemaakt adhv. settings.php./sites/default/settings.php

5. Aanmaken eerste gebruiker: super user

3. Installatie


De Drupal website is klaar voor gebruik!

3. Installatie

4. Multi-site

Verschillende websites gebruiken dezelfde programmatie als backend!

defaultStandaardwebsite bij installatie

allModules en themes voor alle websites

.../.../...Oneindig aantal websites

sites\default

sites\default\modules\ Extra modules voor default sitesites\default\themes\ Extra themes voor default site

sites\default\settings.php Instellingen voor default site

sites\all

sites\all\modules\ Extra modules voor alle sitessites\all\themes\ Extra themes voor alle sites

sites\xxx

sites\xxx\modules\ Extra modules voor site xxxsites\xxx\themes\ Extra themes voor site xxx

sites\xxx\settings.php Instellingen voor site xxx

4. Multi-site

Voorbeelden multi-site

./sites/all/

modules/themes/

default/settings.php

voorbeeld.com/settings.phpthemes/

voorbeeld.com.site3/settings.phpmodules/themes/

sub.voorbeeld.com/settings.phpthemes/modules/

4. Multi-site

5. Modules

Contributed modules

Required Optional

Core modules

Block Besturen van de boxes die rond de inhoud getoond worden.

Filter Zorgt dat de inhoud gefilterd wordt voor het wordt weergeven

Node Laat toe dat inhoud naar de site kan gestuurd worden en op pagina’s weergeven kan worden.

System Verzorgt de algemene configuratie van de site voor de beheerders

User Beheert het registreren van gebruikers en het systeem om aan te melden.

Watchdog Loggen en opnemen van systeemgebeurtenissen.

Core modules - required

5. Modules

Contact Persoonlijke en algemene contact formulieren

Help Beheert het tonen van online help

Locale Zorgt voor de vertaling van de User Interface naar talen buiten het Engels

Menu Hiermee kunnen beheerders menu’s maken en beheren.

Path Het vertalen van de URL’s naar eenvoudige woorden

Taxonomy Indelen van de inhoud in categorieën

Upload Laat gebruikers toe om bestanden up te loaden en als bijlage toe te voegen.

Core modules - optional

Extra functionaliteiten die standaard meegeleverd worden bij een Drupal installatieAanzetten afhankelijk van functionele eisen van de website

5. Modules

5. Modules

Contributed modules

http://drupal.org/project/Modules

Functionaliteit die niet is opgenomen in de core modules is hoogst waarschijnlijk te vinden in één van de honderden contributed modules

5. Modules

Contributed modules

CAPTCHA Beveiliging van formulieren tegen geautomatiseerde bots

FCKEditor Invoegen van inhoud in MS-Word stijl (WYSIWYG)

Guestbook Een gastenboek

Image Uploaden, verkleinen en bekijken van afbeeldingen

Localizer Mogelijkheid om inhoud naar meerdere talen te vertalen

Simplenews Versturen van nieuwsbrieven naar geabonneerde adressen.

Site_map Maakt automatisch een site map voor de website

Views Zelfgemaakt views van nodelijsten

Beheer van modulesInstalleren van modules

Afhankelijk van door welke sites ze gebruikt wordenGedownloade map kopiëren naar de modules directory

/sites/all/modules/

Module dependenciesSommige modules zijn afhankelijk van een andere modules om hun taak uit te voeren

Beheer van modulesHet uitschakkelen, aanzetten en deïnstalleren van modules gebeurt in de Administer sectie

/sites/all/modules/

5. Modules

5. Modules

6. Theming

Uitdenken en uitwerken van een ontwerp

Uitwerking aan de hand van Macromedia Fireworks MX

Vertalen van het ontwerp naar een webpagina

XHMTLIndelen van het ontwerp in verschillende onderdelenDe onderdelen krijgen een semantische betekenis

CSSOpmaken van de verschillende XHTML onderdelenPositioneren van de verschillende elementen

Complexe taak!

- Browser incompatibiliteit (Internet Explorer)- Sommige constructies zijn moeilijk te vertalen

6. Theming

Identificeren van secties in het ontwerp

header

intro

main

sidebar

6. Theming

Omzetten van secties naar XHTML

<body><div id="header">

...</div><div id="intro">

...</div><div id="content" >

<div id="sidebar">...

</div><div id="main">

...</div>

</div><div id="footer">

...</div>

</body>

<ul id="menu"><li class="collapsed"><a href="">...</a></li><li class="leaf"><a href="/">...</a></li><li>

<ul class="menu"><li class="collapsed"><a href="">...</a></li><li class="collapsed"><a href="">...</a></li><li class="collapsed"><a href="">...</a></li>

</ul></li><li class="leaf"><a href="">...</a></li>

</ul>

Verdere uitwerking elementen

XHMTL

6. Theming

Opmaken van XHTML element met CSSCSS

#header { color: #336633;background: #ccff66;overflow: hidden;background-image: url(bg-lijn-header.gif);background-repeat: repeat-x;height: 50px;overflow: hidden;

}

#intro #intro_links {float: left;width: 425px;text-align: right;height: 192px;position: relative;margin-bottom: 10px;

}

ul.menu {list-style: none;border: none;text-align:left;

}

ul.menu li {margin-left: 15px;

}

li.expanded {list-style-type: none;margin: 0;text-align: right;background: url(img/arrowD.gif) no-repeat;padding-top: 4px;background-position: 0 .7em;

}

6. Theming

Na verloop van tijd uitgewerkte webpagina

= template

TEMPLATE vormt de basis voor THEME

6. Theming

Drupal theme systeem

Elegante architectuur om de drupal website van een lay-out te voorzien

Perfecte scheiding van opmaak en programmatie

Minimalisering van code en gemakkelijker onderhoud

6. Theming

Drie abstractiniveaus

1. Template language

Taal gebruikt om de template bestanden te vullen met gegevens die van Drupal afkomstig zijn.

2. Theme engine

De interface die het mogelijk maakt dat Drupal de template files kan lezen en interpreteren

3. Theme

Verzameling bestanden die de look & feel van de website vormen.

6. Theming

Template languages en theme engines

Abstractie van Drupal theme engine

Eender welke PHP template language kan

gebruikt worden

Smarty

PHPTAL

PHPTemplate

XTemplate

...

Template language speciaal voor Drupal

ontwikkeld

PHPTemplate wordt standaard meegeleverd en gebruikt

6. Theming

Installeren van theme engines

1. Theme engines kunnen gedownload worden op http://drupal.org/project/Theme+engines

2. Theme engines worden geïnstalleerd voor de sites die ze gebruiken

6. Theming

PHPTemplate theme engine bevindt zich standaard in Drupal core

Beste keuze is PHPTemplate:volledig afgestemd op Drupal

6. Theming

Enkele drupal objectenNode

Alle vormen van inhoud in Drupal worden opgeslaan als een node. Dit kan bijvoorbeeld een afbeelding, een pagina of een download zijn.

node

node

6. Theming

Enkele drupal objecten

Block

Blocks zijn navigatie of inhoud elementen die meestal aan de linker of rechter kant van de website geplaatst worden. Blocks zijn geen nodes, ze worden gebruikt om gegevens in de website te positioneren.

language selection

Menu’s

Newsletter subscription

6. Theming

Theme: template files

page.tpl.php

block.tpl.php

comment.tpl.php

template.php

node.tpl.php

Het bepalen van de lay-out van een pagina

Het bepalen van de lay-out van een block

Het bepalen van de lay-out van een node

Het bepalen van de lay-out van een comment

Theme overriding en andere theme functies

box.tpl.php Het bepalen van de lay-out van een comment

6. Theming

7. LNE theme

Opmaken van de standaardpagina1. Maak een nieuwe directory aan, rekening houdend met de sites waarvoor het

theme kan gebruikt worden.

./sites/all/themes/lne/

2. Maak een nieuw bestand aan dat de basis zal vormen voor alle pagina’s van de drupal website.

./sites/all/themes/lne/page.tpl.php

3. Plaats de inhoud van het XHTML file in page.tpl.php en kopieer de bestanden naar waar verwezen wordt ook naar de directory van het theme.

./sites/all/themes/lne/page.tpl.phpcss/

style.cssnav.css

images/...

Opmaken van de standaardpagina4. De lay-out is nu opgenomen in Drupal en kan weergeven worden door naar de

website te surfen.

De inhoud en instellingen van de Drupal websitemoeten nu in de lay-out opgenomen worden!

7. LNE theme

Integratie van Drupal elementen in de lay-out

Site configuration

De beheerder kan een aantal parameters instellen voor de website via het Administer gedeelte van de website.

/admin/settings/site-information

Integratie van PHP variabelen

De Drupal Theme Engine maakt automatisch een aantal variabelen aan die in de website geïntegreerd kunnen worden.

Vb. De instellingen van Site Configuration kunnen met deze variabelen benaderd worden.

Aan- of uitzetten van PHP variabelen

Sommige standaard PHP variabelen kunnen aan- of uitgezet worden.

/admin/build/themes/settings/lne

7. LNE theme

PHP variabelen voor page.tpl.php$base_path

Geeft een base URL pad van de Drupal installatie.$breadcrumb

HTML voor het weergeven van een ‘breadcrumb’.$closure

Moet weergeven worden op het einde van de pagina voor dynamische javascript, die enkel maar mogen uitgevoerd worden wanneer de pagina reeds geladen is.

$contentDe HTML-inhoud die Drupal gegenereerd heeft en weergeven moet worden.

$cssEen array met alle CSS bestanden voor de huidige pagina.

$directoryDe map waar in het theme geplaatst is.

$feed_iconsEen string met alle feeds (RSS) voor de huidige pagina

$footer_messageHet footer bericht dat opgegeven is in de Administer sectie

$headHTML gegenrereerd door drupal_get_html_head().

$head_titleDe tekst die moet weergeven worden als pagina titel.

$helpDynaminsche help tekst voor admin pagina’s

7. LNE theme

PHP variabelen voor page.tpl.php$is_front

Variabele is true wanneer de pagina de front page is.$language

De taal waarin de website weergeven wordt.$logo

Pad naar de locatie van het logo, gedefinieerd in de theme instellingen$messages

HTML voor status en error berichten.$mission

De missie tekst, opgegeven in de Administer sectie.$scripts

HTML om javascript bestanden te laden en de JS instellingen benaderbaar te maken.$search_box

Variabele is true als de search box enabled is.$site_name

De naam van de website$site_slogan

Toont de slogan van de website$styles

Toont de nodige style tags. Nodig voor stylesheet switching$tabs

HTML voor het tonen van tabs$title

Titel van de node

7. LNE theme

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>"><head>

<title><?php print $head_title ?></title><?php print $head ?><?php print $styles ?><?php print $scripts ?><script type="text/javascript"></script>

</head><body>

<div id="header">

<div class="inner"><div id="logo" style="float: left;"><a href="<?php print base_path(); ?>" title=""></a></div><div id="langbar"><?php print $header; ?></div>

</div></div><?php if ( $is_front ) { ?>

<div id="intro" class="clearfix"><div class="inner">

<div id="intro_links"><div style="position: absolute; right: 0px; bottom: 0px;">

<h1><?php print $site_slogan; ?></h1><p><?php print $mission; ?></p>

</div></div><div id="intro_rechts">

<div id="intro_foto"></div></div>

</div></div>

<?php } ?>

Verschillende lay-out voor een pagina

Uitgangspunt: Enkel de front page moet de introtekst en foto tonen

Template file kan op basis van de system URL gekozen worden

- page-node-edit.tpl.php- page-node-1.tpl.php- page-node.tpl.php- page.tpl.php

Vb. Pagina om node 1 te wijzigen: node/1/edit

PHPTemplate theme engine zoekt of vlgende bestanden bestaan

7. LNE theme

Extra mogelijkheid: instellen van voorpagina

page-front.tpl.php

Front page is dynamisch en kan bij Site Administration ingesteld worden.

page-front.tpl.php wordt altijd geladen bij als de pagina als front page is ingesteld

Toepassing: We kopiëren de page.tpl.php naar page-front.tpl.php en verwijderen in het originele bestand de XHTML code om de introductietekst te tonen.

7. LNE theme

Block regions

Regions zijn locaties in de lay-out waar blocks kunnen geplaatst worden.

sidebar-left sidebar-right content header footer_message

5 standaard regions door PHPTemplate:

LNE theme heeft slechts 3 regions nodig

sidebar links header footer vanonder

Custom regions: theme overriding

7. LNE theme

Custom regions: theme overriding

PHPTemplate bevat een functie om de standaard theme regions aan te maken

theme_regions()

lne_regions()

Override:Door functie opnieuw te definiëren met naam van het theme

/* * Verschillende regio's in het theme waar content geplaatst kan worden * Header wordt voor taalkeuze gebruikt */

function lne_regions(){ return array( 'customleft' => t('sidebar links'), 'header' => t('header'), 'customfooter' => t('footer vanonder'), );}

7. LNE theme

Custom regions: plaatsen van blocks

admin/build/block

Blocks kunnen in een region geplaatst worden

Blocks kunnen een gewicht toegekend krijgen om hun volgorde tov. andere blocks te bepalen

Region

Weight

7. LNE theme

Opmaken van een block

Zelfde principe voor de opmaak van een pagina.

- block-modulenaam-delta.tpl.php- block-modulenaam.tpl.php- block-region.tpl.php- block.tpl.php

Block template file volgorde

Block template file variabelen

$blockHet volledige block object

$block_idInteger die telkens verhoogt wordt als het block gegenereerd wordt en de template file geladen is.

$block_zebraTelkens $block_id verhoogt wordt, verandert deze variabele naar de waarde odd of even.

7. LNE theme

Block: theme overriding

Soms voldoet de output die een block geeft niet aan de vooropgestelde eisen van de website

vb. Localizer module: language selection block

Standaard block lay-out Gewenste block lay-out

theme override

Dit kan niet aan de hand van een block.tpl.php file bereikt worden!

7. LNE theme


<?php print_r ( $block ); ?> toont alle eigenschappen van dit block

stdClass Object(

[module] => localizer[delta] => 0[theme] => garland[status] => 1[weight] => 0[region] => left[custom] => 0[throttle] => 0[visibility] => 0[content] => <div class="item-list"><ul><li><a href="/drupal-new/?q=en/admin" class="uilanguage">English</a></li><li><a href="/drupal-new/?q=fr/admin" class="uilanguage">français</a></li></ul></div>

)

Dit moet veranderen!

7. LNE theme


Opzoeken van originele theme function die de inhoud bepaalt, in de source van de module

function theme_localizer_block_switch_language($links){ return theme('item_list', $links);}

OVERRIDE

function lne_localizer_block_switch_language($links){ ...}

template.php

7. LNE theme


Herschrijven van functie om de juiste lay-out toe te passen

/* * Switch language block herschreven voor output om het in het design te doen passen (images) */

function lne_localizer_block_switch_language($links){

foreach ( $links as $key => $value ) {$links[$key] = str_replace ( 'English', '<img src="' . base_path() . path_to_theme() . '/images/lang_en.gif" alt="english" />', $links[$key] );$links[$key] = str_replace ( 'français', utf8_encode('<img src="' . base_path() . path_to_theme() . '/images/lang_fr.gif" alt="français" />'), utf8_decode($links[$key]) );$output .= $links[$key];

} return utf8_encode($output);}

7. LNE theme

8. Extra functionaliteit

Extra functionaliteit aan de Drupal website toevoegen

Eigen module ontwikkelen

Views & Content Construction Kit modules

Custom functions

ViewsModule die een methode aanbiedt om te bepalen hoe lijsten van nodes aan de gebruiker getoond worden

Slimme query builder die met genoeg informatie inhoud op zeer verschillende manieren kan weergeven

Full Nodes

Teaser view

List view

Table view

User contributed views

- Toegangsbeperking- Filters- Velden selecteren- Page/Block- Arguments- Sort criteria- Exposed filters


The power of Drupal: download systeem

Content type: Publication

Taxonomy:Publcations

Views:Table view

Publication content type:- Enkel titel veld- Mogelijkheid om bestanden toe te voegen

(Upload module)

Publications category:- Met terms: Quarterly bulletin, Yearly report, ...- Content type: Publication- Required: Yes

Taxonomy term View:- Table view: use pager- Fields: title (without link), file (with link), size- Filter: published = yes- Sort criteria: sticky, created time DESC


The power of Drupal: download systeem


Content Construction Kit (CCK)Module waarmee de gebruiker de functionaliteit kan uitbreiden door zelfgemaakte velden toe te voegen aan content types.

Komt in actie bij specifieke eisen waar Drupal niet standaard kan voorzien

User reference

Node reference

Text

Decimal

Integer

- Text field- Select list- Checkboxes / Radio buttons- Single checkbox

- Select list - Autocomplete text field


Custom (theme) functions

Quik & dirty

Snel een functionaliteit aan een module toevoegen die met Views of CCK niet bereikt kan worden.

Functies gaan omschrijven in template.php die onmiddellijk functionaliteit bijvoegen op de plaats waar ze aangeroepen worden.

Tijdsbesparend omdat geen extra module moet bijgeprogrammeerd worden


<?phpif ($terms && arg(0) == 'node' && is_null(arg(2))){

$next = next_prev($node->nid, 'image', 'next', 'next >', 'imgprev'); $previous = next_prev($node->nid, 'image', 'prev', '< previous', 'imgnext');print '<ul id="pagernav" class="clearfix">';if ($previous) {

print '<li class="left">' . $previous . '</li>';}if ($next) {

print '<li class="right">' . $next . '</li>';}print '</ul>';

}?>

node-image.tpl.php


jeroen bolle. 1. inleiding 2. geschiedens 3. technology stack 4. multi-site 5. modules 6. theming 7....

Documents

themes modules

multisite dia

site voor

theming dia

modules themes default

inleiding dia

identificeren van secties

contributed modules