Jeroen Bolle. 1. Inleiding 2. Geschiedens 3. Technology Stack 4. Multi-site 5. Modules 6. Theming 7. LNE theme 8. Extra functionaliteit.

Presentatie over: "Jeroen Bolle. 1. Inleiding 2. Geschiedens 3. Technology Stack 4. Multi-site 5. Modules 6. Theming 7. LNE theme 8. Extra functionaliteit."— Transcript van de presentatie:

1 Jeroen Bolle

2 1. Inleiding 2. Geschiedens 3. Technology Stack 4. Multi-site 5. Modules 6. Theming 7. LNE theme 8. Extra functionaliteit

3 1. Inleiding

4

5

6 2. Geschiedenis dorp.org Dries Buytaert

7 3. Technology stack Server Operating System Webserver PHP Drupal Database

8 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

9 Database wordt aangemaakt en opgevuld Default site wordt aangemaakt adhv. settings.php./sites/default/settings.php 5. Aanmaken eerste gebruiker: super user 3. Installatie

10 Standaardinstallatie De Drupal website is klaar voor gebruik! 3. Installatie

11 4. Multi-site Verschillende websites gebruiken dezelfde programmatie als backend! default Standaardwebsite bij installatie all Modules en themes voor alle websites.../.../... Oneindig aantal websites

12 sites\default sites\default\modules\Extra modules voor default site sites\default\themes\Extra themes voor default site sites\default\settings.phpInstellingen voor default site sites\all sites\all\modules\Extra modules voor alle sites sites\all\themes\Extra themes voor alle sites sites\xxx sites\xxx\modules\Extra modules voor site xxx sites\xxx\themes\Extra themes voor site xxx sites\xxx\settings.phpInstellingen voor site xxx 4. Multi-site

13 Voorbeelden multi-site./sites/ all/ modules/ themes/ default/ settings.php voorbeeld.com/ settings.php themes/ voorbeeld.com.site3/ settings.php modules/ themes/ sub.voorbeeld.com/ settings.php themes/ modules/ 4. Multi-site

14 5. Modules Contributed modules RequiredOptional Core modules

15 BlockBesturen van de boxes die rond de inhoud getoond worden. FilterZorgt 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. SystemVerzorgt de algemene configuratie van de site voor de beheerders User Beheert het registreren van gebruikers en het systeem om aan te melden. WatchdogLoggen en opnemen van systeemgebeurtenissen. Core modules - required 5. Modules

16 ContactPersoonlijke en algemene contact formulieren HelpBeheert het tonen van online help Locale Zorgt voor de vertaling van de User Interface naar talen buiten het Engels MenuHiermee kunnen beheerders menu’s maken en beheren. PathHet vertalen van de URL’s naar eenvoudige woorden TaxonomyIndelen 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 installatie Aanzetten afhankelijk van functionele eisen van de website 5. Modules

17 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

18 5. Modules Contributed modules CAPTCHABeveiliging van formulieren tegen geautomatiseerde bots FCKEditorInvoegen van inhoud in MS-Word stijl (WYSIWYG) GuestbookEen gastenboek ImageUploaden, verkleinen en bekijken van afbeeldingen LocalizerMogelijkheid om inhoud naar meerdere talen te vertalen SimplenewsVersturen van nieuwsbrieven naar geabonneerde adressen. Site_mapMaakt automatisch een site map voor de website ViewsZelfgemaakt views van nodelijsten

19 Beheer van modules Installeren van modules Afhankelijk van door welke sites ze gebruikt worden Gedownloade map kopiëren naar de modules directory /sites/all/modules/ Module dependencies Sommige modules zijn afhankelijk van een andere modules om hun taak uit te voeren Beheer van modules Het uitschakkelen, aanzetten en deïnstalleren van modules gebeurt in de Administer sectie /sites/all/modules/ 5. Modules

20

21 6. Theming Uitdenken en uitwerken van een ontwerp Uitwerking aan de hand van Macromedia Fireworks MX

22 Vertalen van het ontwerp naar een webpagina XHMTL Indelen van het ontwerp in verschillende onderdelen De onderdelen krijgen een semantische betekenis CSS Opmaken van de verschillende XHTML onderdelen Positioneren van de verschillende elementen Complexe taak! - Browser incompatibiliteit (Internet Explorer) - Sommige constructies zijn moeilijk te vertalen 6. Theming

23 Identificeren van secties in het ontwerp header intro main sidebar 6. Theming

24 Omzetten van secties naar XHTML........................ Verdere uitwerking elementen XHMTL 6. Theming

25 Opmaken van XHTML element met CSS CSS #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

26 Na verloop van tijd uitgewerkte webpagina = template TEMPLATE vormt de basis voor THEME 6. Theming

27 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

28 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

29 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

30 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

31 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

32 PHPTemplate theme engine bevindt zich standaard in Drupal core Beste keuze is PHPTemplate: volledig afgestemd op Drupal 6. Theming

33

34 Enkele drupal objecten Node Alle vormen van inhoud in Drupal worden opgeslaan als een node. Dit kan bijvoorbeeld een afbeelding, een pagina of een download zijn. node 6. Theming

35 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

36 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.phpHet bepalen van de lay-out van een comment 6. Theming

37 7. LNE theme Opmaken van de standaardpagina 1.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.php css/ style.css nav.css images/...

38 Opmaken van de standaardpagina 4.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 website moeten nu in de lay-out opgenomen worden! 7. LNE theme

39 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

40

41

42 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. $content De HTML-inhoud die Drupal gegenereerd heeft en weergeven moet worden. $css Een array met alle CSS bestanden voor de huidige pagina. $directory De map waar in het theme geplaatst is. $feed_icons Een string met alle feeds (RSS) voor de huidige pagina $footer_message Het footer bericht dat opgegeven is in de Administer sectie $head HTML gegenrereerd door drupal_get_html_head(). $head_title De tekst die moet weergeven worden als pagina titel. $help Dynaminsche help tekst voor admin pagina’s 7. LNE theme

43 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

44 " xml:lang=" "> " title="">

45

46 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

47 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

48 Block regions Regions zijn locaties in de lay-out waar blocks kunnen geplaatst worden. sidebar-leftsidebar-rightcontentheaderfooter_message 5 standaard regions door PHPTemplate: LNE theme heeft slechts 3 regions nodig sidebar linksheaderfooter vanonder Custom regions: theme overriding 7. LNE theme

49 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

50 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

51 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 $block Het volledige block object $block_id Integer die telkens verhoogt wordt als het block gegenereerd wordt en de template file geladen is. $block_zebra Telkens $block_id verhoogt wordt, verandert deze variabele naar de waarde odd of even. 7. LNE theme

52 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-outGewenste block lay-out theme override Dit kan niet aan de hand van een block.tpl.php file bereikt worden! 7. LNE theme

53 Block: theme overriding 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] => English français ) Dit moet veranderen! 7. LNE theme

54 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

55 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', ' ', $links[$key] ); $links[$key] = str_replace ( 'français', utf8_encode(' '), utf8_decode($links[$key]) ); $output.= $links[$key]; } return utf8_encode($output); } 7. LNE theme

56 8. Extra functionaliteit Extra functionaliteit aan de Drupal website toevoegen Eigen module ontwikkelen Views & Content Construction Kit modules Custom functions

57 Views Module 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

58 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

59 The power of Drupal: download systeem 8. Extra functionaliteit

60 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

61 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

62 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

63 <?php if ($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 ' '; if ($previous) { print ' '. $previous. ' '; } if ($next) { print ' '. $next. ' '; } print ' '; } ?> node-image.tpl.php 8. Extra functionaliteit

64