jeroen bolle. 1. inleiding 2. geschiedens 3. technology stack 4. multi-site 5. modules 6. theming 7....
TRANSCRIPT
Jeroen Bolle
1. Inleiding2. Geschiedens3. Technology Stack4. Multi-site5. Modules6. Theming7. LNE theme8. Extra functionaliteit
1. Inleiding
1. Inleiding
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
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
Standaardinstallatie
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
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>
<!-- START HEADER --><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><!-- EINDE HEADER --><!-- START INTRO --><?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 } ?>
<div id="content" class="clearfix"><div class="inner">
<div id="contentcontainer" class="clearfix"><div id="sidebar">
<?php print $customleft ?></div><div id="main">
<h1 class="title"><?php print $title ?></h1><div class="tabs"><?php print $tabs ?></div><?php print $help ?><?php print $messages ?><?php print $content; ?><?php print $feed_icons; ?>
</div></div>
</div></div>
</div><div id="footer">
<div class="cont"><div id="adres" style="float: left; width: 300px; text-align: left;">
<?php print nl2br($footer_message); ?></div><div id="footerlinks" style="float: right; width: 500px;">
<?php print $customfooter; ?></div>
</div></div>
</body></html>
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
Block: theme overriding
<?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
Block: theme overriding
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
Block: theme overriding
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
8. Extra functionaliteit
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
8. Extra functionaliteit
The power of Drupal: download systeem
8. Extra functionaliteit
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
8. Extra functionaliteit
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
8. Extra functionaliteit
function next_prev($huidig_nid, $type, $knopType, $label, $class) { $tid = db_result(db_query(db_rewrite_sql("SELECT tn.tid FROM {term_node} tn LEFT JOIN {node} n ON tn.nid=n.nid WHERE tn.nid = $huidig_nid"))); if (empty($tid)){ return ''; } switch ($knopType) { case 'next': $sort = 'DESC'; $case = '< '; break; case 'prev': $sort = 'ASC'; $case = '> '; break; default: return NULL; break; } $sql = "SELECT n.nid, n.title FROM {node} n INNER JOIN {term_node} t ON n.nid = t.nid "; $sql .= "INNER JOIN {term_data} r ON t.tid = r.tid WHERE n.type = '". $type ."' AND n.nid ". $case; $sql .= $huidig_nid ." AND r.tid = ". $tid ." AND n.status = 1 ORDER BY nid ". $sort; $result = db_fetch_array(db_query(db_rewrite_sql($sql))); if (!$result) { return NULL; return l($label.$name, "$type/tid/$tid", array('title' => $name, 'class' => $class)); } else { return l($label, 'node/'. $result['nid'], array('title' => $result['title'], 'class' => $class)); }}
template.php
Image pager
<?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
8. Extra functionaliteit