SlideShare a Scribd company logo
1 of 59
Download to read offline
Websites bouwen met Drupal
Vlaamse Sportfederatie, 21 november 2013
Hans Rossel, www.koba.be, hans@koba.be, twitter: @haro
Een website maken
Website
Benodigdheden:
●

Een domeinnaam: www.mijnwebsite.be, dus
enkel de naam, huren per jaar van dns.be

●

Een hosting: een computer in een datacenter die
de online bestanden van je website bevat

●

Teksten, foto's, ...

21/11/2013

Hans Rossel – hans@koba.be

3
Analyse → Wireframe → Photoshop design

21/11/2013

Hans Rossel – hans@koba.be
Werkomgeving
●

Een goede browser: Firefox, Chrome. Internet Explorer
enkel gebruiken voor testen op het einde.
●

Firebug

●

Webdeveloper toolbar

●

Een code editor: Sublime text, Notepad++,
Dreamweaver, …

●

Photoshop, Gimp 2.8,
http://www.getpaint.net/download.html

●

FTP: Filezilla

●

Localhost server: xampp, wampserver, mamp

21/11/2013

Hans Rossel – hans@koba.be

5
Drupal inleiding
Drupal – Wat?
Drupal is een Content Management System (CMS), een systeem
waarmee je via een login online websites kunt beheren: teksten maken,
foto's toevoegen, organiseren van de inhoud, ...
Drupal werd in 1999 uitgevonden door Dries Buytaert, een student
informatica uit Antwerpen. Tegenwoordig wordt het wereldwijd gebruikt
door meer dan 1 miljoen websites. Het is geschikt voor zowel kleine als
heel grote websites (Het Witte Huis, The Economist, Vlaamse Overheid,
...)
Drupal is Open Source wat betekent dat de code volledig gratis is en
volledig vrij aanpasbaar. Drupal is samen met Wordpress en Joomla de
top 3 van de Open Source CMS systemen.
Referenties Media/Entertainment
●

VRT, VTM, VT4, Vitaya, RTBF

●

Sony BMG Music, Universal Music Group, Warner Bros,
20th Century Fox, Michael Jackson, Eric Clapton and
Robbie Williams, Grammy awards, Emmy awards

●

The Examiner, The Economist, Le Figaro, Edipresse,
Infoworld, Aj Jazeera

●

Studio Brussel, Radio Netherlands Worldwide,
Australian Broadcast Company, BBC, CNN, Reuters

●

Virgin, Slate, Monthy Python and Lucas Arts

21/11/2013

Hans Rossel – hans@koba.be
NGO, Gov & edu
●

Human Rights watch, Amnesty

●

World Food Programme, World Bank, United Nations, Europese
Unie, World Economic Forum

●

Witte Huis, Vlaanderen, New York state senate, US Department of
Commerce, Belgische Premier, Belgische Monarchie, FOD
Financiën, the French government, the Dutch government, the
Australian Prime Minister and the British Government, London en
Athene.

●

Universiteit Gent, Duke University, Strayer University, Portland
University, MIT, Stanford University and Harvard

●

UitinVlaanderen, FARO, Louvre, Tate, Vlaamse Kunstcollectie

●

NASA (http://themis.asu.edu/)

●

Linux Foundation, JAVA.net en Internet Systems Consortium

21/11/2013

Hans Rossel – hans@koba.be
Enterprises using Drupal

●

Telenet, ING, Garmnin, Ebay, Symantec, Nokia,
AHOLD, Randstad, Sony Ericsson, Paypal, Twitter,
Mattel, Nvidia, Rackspace, AT&T, FUJI film,
General Motors, Intel, Fujifilm, Fedex, IBM, Cap
Gemini, Accenture, Procter & Gamble en Google
(mlab), IKEA

●

Zenito (svmb/admb)

Meer referenties:
http://www.buytaert.net/tag/drupal-sites
21/11/2013

Hans Rossel – hans@koba.be
Drupal – Voordelen
- Op een eenvoudige manier een website maken, teksten
en foto's toevoegen en de inhoud organiseren
- Meerdere personen kunnen instaan voor de website elk
met eigen login en kunnen overal de site aanpassen
- Automatiseren van taken: automatisch sorteren van
activiteiten op datum, laatste nieuws bovenaan zetten,
voorbije activiteiten niet meer tonen, ...
- Open source: gratis, heel veel mensen werken ermee
en verbeteren het, oneindig veel functionaliteiten
INSTALLATIE DRUPAL CORE
Origineel of voorverpakt





Origineel drupal.org/download
Via controlepaneel: Installatron, Fantastico
Drupal gardens: http://www.drupalgardens.com
Distributies (http://drupal.org/project/distributions)
–
–

Drupal Commons: online communities

–

Open Publish: nieuwssite

–

Commerce Kickstart: webshop

–

21/11/2013

Open Atrium: intranet

Open Public: overheid

Hans Rossel – hans@koba.be
Systeemvereisten
Standaard LAMP

Alternatieven



Linux



Lighttpd



Apache



IIS mits aanpassingen



MySQL 5



PostgreSQL



Php 5.3



Sinds D7: nieuwe abstraction
layer die andere databases
(MSSQL, Oracle) ondersteunt
via php PDO.

21/11/2013

Hans Rossel – hans@koba.be
Installatie nodig


Hosting of LAMP op localhost

> Mysql 5: database


> php 5.2: programmeertaal



Apache mod rewrite bruikbaar in .htaccess



Voldoende geheugen



http://drupal.be/documentatie/drupal-hosting

21/11/2013

Hans Rossel – hans@koba.be
Bestanden: Drupal core downloaden


Op drupal.org:


Drupal 7 downloaden



Www.drupal.org/download



Uitpakken en opslaan in mapje c/xampp/htdocs

21/11/2013

Hans Rossel – hans@koba.be
Database maken





http://localhost/phpmyadmin/
Home > databases > create new database
Users > create new user
All privileges

21/11/2013

Hans Rossel – hans@koba.be
Installatie





Ga naar http://localhost/drupalmapje en de
installatiewizard start
Vul de databasenaam, gebruikersnaam en paswoord in
Los de fout op:
– # Copy the ./sites/default/default.settings.php
file to ./sites/default/settings.php.
– # Change file permissions so that it is writable
by the web server.



Vul de gegevens van de site in als de installatie gelukt is



Kies een moeilijk paswoord voor de beheerdersaccount,
want user 1 mag steeds alles op de site.

21/11/2013

Hans Rossel – hans@koba.be
Problemen instelling php.ini


Foutreportage & security




register_globals = Of

Upload en timout limieten


memory_limit = 128M



upload_max_filesize = 150M



post_max_size = 150M



max_input_time = 300



max_execution_time = 300

21/11/2013

Hans Rossel – hans@koba.be
php.ini settings


Kunnen ingesteld worden op


Een bestandje php.ini uploaden in root



In .htaccess
php_flag register_globals of

php_value memory_limit "128M"

php_value max_execution_time 300
In settings.php van Drupal








In een gewoon stukje php code: http://www.php.net/ini_set
(enkel geldig tijdens script)

Let op


Syntax verschilt tussen werkwijzen



Als .htaccess error 500 geeft staat hosting dit niet toe

21/11/2013

Hans Rossel – hans@koba.be
Installatie op cpanel hosting


Drupal 7 uploaden met
http://filezilla-project.org/download.php?type=client



Een database aanmaken bij databases (niet in phpmyadmin)

Eerst database maken






Dan user maken
Dan user toevoegen aan database, all privileges

Drupal installatie

Databasenaam en username worden vaak
geprefixt met accountname bij hosting: dus
accountname_username en
accountname_databasename gebruiken


Permissies files en settings instellen

21/11/2013

Hans Rossel – hans@koba.be
HOOFDSTUK 3

EEN EENVOUDIGE
DRUPAL SITE
BOUWEN
Bestandsstructuur



Mappen en inhoud
Core niet hacken!

Sites map instellen: modules/templates


Files instellen

21/11/2013

Hans Rossel – hans@koba.be
Drupal in het Nederlands
●

Nederlandse taal toevoegen:
●

●

admin/config/regional/language

Localization update installeren
●

https://drupal.org/project/l10n_update: downloaden

●

Uitpakken in sites/all/modules

●

Op site: aanvinken bij modules

●

Naar “interface vertalen” en dan tab bijwerken:
admin/config/regional/translate/update

●

21/11/2013

Update laten lopen

Hans Rossel – hans@koba.be
Basisinstellingen installatie


Site instellingen




Bestandssysteem



Datum en tijd



Foutrapportage



Site onderhoud





Bestands upload

Websitegegevens

Inhoudelijk beheer




Teaserlengte, taxonomie, ...

Gebruikers


Rollen admin en redactie aanmaken + rechten instellen



Gebruikers toevoegen aan een rol

21/11/2013

Hans Rossel – hans@koba.be
Gewone pagina's toevoegen


Opbouwen structuur

Home: promoted items


Over ons



Producten



Referenties



Contact: contact module

21/11/2013

Hans Rossel – hans@koba.be
Drupal: navigatie
 Pagina's die niet automatisch opgelijst worden kun je
best een plaats in de navigatie van de website
voorzien. Er zijn twee manieren om dit te doen
 Onmiddellijk wanneer je inhoud aanmaakt: Onderaan
vinkje aanzetten bij menu-instellingen
of
 Achteraf via het menu beheer, zorg dat je eerst de
pagina hebt gemaakt.



Navigeer via het zwarte backend menu naar Menu
Hier kun je ook de volgorde van de menu-items wijzigen door ze te
verslepen. Sleep een item naar rechts onder een item om het te
laten verschijnen in het submenu dat in de linkerkolom komt.
Drupal: blokken
Structuur / Blokken

 Een blok bevat randinformatie en kan op
verschillende pagina's voorkomen
 Bijvoorbeeld: login blok, lijst met laatste
inhoud, een affiche of banner van een activiteit
 Bij elk blok kun je kiezen waar het moet
getoond worden
Drupal: toegangsbeheer
Iedere gebruiker van de site die de site moet beheren of pagina's toevoegen
kan een eigen login hebben.
Gebruikers hebben 1 of meerdere rollen. Een rol is een verzameling van
toegangsrechten. Standaard zijn er de rollen anoniem, authenticated
(ingelogde gebruiker) en admin. Van elke rol kunnen de
toegangsrechten aangepast worden. Om veiligheidsredenen is het best
dat dit enkel door gevorderde gebruikers gebeurt. De Dynamo
standaardsite voorziet al de voornaamste rollen met correcte instelling
van de rechten.
Toegangsrecht
en

Toegangsrecht
en
Zoekfunctie


Zoekfunctie en instellingen



Cron laten lopen om index op te vullen

21/11/2013

Hans Rossel – hans@koba.be
WYSYWYG


De editor




Externe editor downloaden: Ckeditor, Tinymce





www.drupal.org/project/wysiwyg (dev versie)
Alternatief Bueditor, Markdown

Afbeeldingen in de editor


www.drupal.org/project/imce



www.drupal.org/project/imce_wysiwyg

21/11/2013

Hans Rossel – hans@koba.be
WYSYWYG installatie & werking


Stappen (ook algemeen voor installeren module)


Issues bekijken: critical bugs ea bugs + versie kiezen



Opladen van de module



readme.txt lezen en online handboek



Eventuele core patches installeren



Dependend modules aanvinken op
admin/build/modules



Aanvinken op admin/build/modules



Toegangsrechten controleren



Module settings instellen



Kijken als er te activeren blokken zijn bijgekomen

21/11/2013

Hans Rossel – hans@koba.be
DRUPAL
THEMES
Drupal 7 core Themes: Appearance
Bartik en Seven


Standard frontend en backend theme Drupal 7



Bartik is bedoeld om uitgebreid te worden via een
subtheme

21/11/2013

Hans Rossel – hans@koba.be
Instellingen & Keuze theme
●

Templates: admin/build/themes
●

Core themes en nut

●

Variabelen, logo, snelkoppelingsikoon

●

Berichtinformatie weergeven over

●

Zen ea: extra theme settings

●

Extra variabelen

●

Beheertemplate

●

Blokken en menu's

21/11/2013

Hans Rossel – hans@koba.be
Prefab themes


Op Drupal.org
●
https://drupal.org/project/project_theme
●



http://www.creativebloq.com/drupal/best-freedrupal-themes-7133704

Commercieel
●

http://www.designrazzi.com/2013/drupal-7-themes/

●

http://themeforest.net/category/cms-themes/drupal

●

http://www.templatemonster.com/drupal-themes.php

21/11/2013

Hans Rossel – hans@koba.be
Prefab themes installeren


Download het theme
– Uitpakken in sites/all/themes
– Activeren bij Uiterlijk
– Css aanpassen gebeurt best via een subtheme

21/11/2013

Hans Rossel – hans@koba.be
Starter Themes
Starter themes zijn bedoeld als vertrekpunt (base theme)
om je eigen theme ermee te bouwen. Ze bevatten veel
bruikbare code en extra theme settings. Ze hebben nog
geen design.
Video:
http://blip.tv/drupalcon/evaluating-base-themes-6318801
•

http://drupal.org/project/zen

•

http://drupal.org/project/omega

•

http://drupal.org/project/adaptivetheme

•

http://drupal.org/project/fusion

21/11/2013

Hans Rossel – hans@koba.be
BACKUPS, ONDERHOUD & UPGRADES
PHPMYADMIN: BACKUP DATABASE

21/11/2013

Hans Rossel – hans@koba.be
BACKUP FILES


Vooral de map sites is van belang, met de map files in het
bijzonder



Ftp 2000 files max

21/11/2013

Hans Rossel – hans@koba.be
Backup modules & info


Handbook: http://drupal.org/node/22281



http://drupal.org/project/backup_migrate

Beste en actiefste backup module op dit
ogenblik






Scheduled backup
Excluden van grote tabellen: search, cache,
sessions

http://www.ozerov.de/bigdump.php: grote databases

21/11/2013

Hans Rossel – hans@koba.be
Upgraden: puntupgrade


Stap 1: Backup sites & database



Stap 2: Inloggen als user 1 + Offline mode



Stap 3: Alle bestanden verwijderen, behalve sites.



Stap 4: Nieuwe bestanden in de plaats zetten



Stap 5: Patches herinstalleren



Stap 6: update.php laten lopen



Stap 7: patches herinstalleren



Stap 8: controle installatie en logs

21/11/2013

Hans Rossel – hans@koba.be
Upgrade
●

Er worden steeds 2 Drupal versies ondersteund,
momenteel Drupal 6 en 7. Er zit gemiddeld 3 jaar tussen
elke versie.

●

Een grote upgrade van bijvoorbeeld Drupal 6 naar Drupal
7 kan, maar is veel meer werk dan een puntsupgrade:
●

●

Het upgrade path moet bugvrij zijn: dit is vaak pas een paar jaar na lancering van
een nieuwe Drupal versie volledig klaar
Alle extra modules die geïnstalleerd zijn moeten een nieuwe versie hebben. De
upgrade status module kan dit controleren. Indien er geen nieuwe versie
beschikbaar is moet een alternatief worden geïmplementeerd

●

●

●

Alle eigen modulecode moet aangepast worden aan de nieuwe api.drupal.org
De code van het theme moet aangepast worden

Een upgrade wordt vaak pas uitgevoerd als er grote
aanpassingen zijn aan de site, die vaak makkelijker
kunnen in een nieuwe versie van Drupal

21/11/2013

Hans Rossel – hans@koba.be
MODULES
KIEZEN EN INSTALLEREN
Een module kiezen


Overzicht:


http://drupal.org/project/Modules: thematisch



http://drupal.org/project/Modules/name: alfabetisch



Related projects & discussions



Populariteit








http://drupal.org/project/usage: populariteit
http://acquia.com/products-services/acquia-drupal-m
odules
: geselecteerd & ondersteund door Acquia
Ratings: http://drupalmodules.com

Nieuwe modules: http://drupal.org/taxonomy/term/14
Hans Rossel – hans@koba.be
Video http://www.lullabot.com/node/439/play


21/11/2013
Status van een module


Versie 6, 7, 8



Status:




Pre-alpha, Alpha, beta, rc (release candidate)





Official release
Dev versies

Opgelet met updates van 7.x-1.x naar 7.x-2.x

21/11/2013

Hans Rossel – hans@koba.be
Factoren kwaliteit module


Tijd: maturiteit & actief onderhouden?








Laatste update/commit (+ view cvs messages: most active
projects)
Tijd tussen de updates

Futureproof?




Eerste versie

Drupal 6/7 versie

Ontwikkelaar(s)


Aantal



Hoelang betrokken bij Drupal





Andere modules waarvoor verantwoordelijk (cvs messages: most
active developers)
User profile + track & track code

21/11/2013

Hans Rossel – hans@koba.be
Factoren (vervolg)


Issue queue




Aantal bugs & opgeloste bugs



Aantal patches (betrokkenheid externe developers)





Aantal meldingen (populariteit module)

Statistieken

Omvang module


Een klein probleem vraagt een kleine module



Geen module als je met enkele lijntjes code kunt oplossen



Gevaar voor modulitis: performance site zakt bij elke module die
je toevoegt



Module usage statistics



Concurrerende modules:


zie blokken related content

21/11/2013

Hans Rossel – hans@koba.be
Issue queue


Vragen over één module steeds hier stellen, niet op forum



Statussen, category & priority



Advanced search



Drupal core issues: http://drupal.org/project/issues/drupal



Ingeven van een issue




Zoeken naar duplicates
Heel duidelijke omschrijving (reproduceerbaar probleem): versies,
browser, andere zaken geinstalleerd, stappen hoe je kunt
reproduceren op “fresh install”, screenshots, code, views export,
cck export



Verwijzing naar node via filter



Geen titel wijzigen



Subscribe? Hopelijk betere oplossing toekomst. Zie ook my issues.

21/11/2013



Hans Rossel – hans@koba.be

Video: http://www.lullabot.com/node/386/play
FIELDS EN VIEWS
CCK/Fields


Historiek en evolutie




Doel




Nodes → Flexinode → cck contributed (→ fields in core)
Eigen content types met eigen velden definiëren

Fields: Drupal.org → zoeken → modules → module categories
→ fields

21/11/2013

Hans Rossel – hans@koba.be
Basis cck fields


Voornaamste extra fields

http://drupal.org/project/imagefield


http://drupal.org/project/filefield



http://drupal.org/project/date



http://drupal.org/project/email



http://drupal.org/project/link



http://drupal.org/project/emfield

21/11/2013

Hans Rossel – hans@koba.be
Afbeeldingen


Modules: CCK afbeeldingsveld

Imagefield




Image styles

Fotoalbum

Colorbox

21/11/2013

Hans Rossel – hans@koba.be
Image styles


Voordelen

Kan via voorgedefinieerde presets images
scalen, resizen en croppen


Je kunt verschillende varianten van dezelfde foto
automatisch laten genereren

21/11/2013

Hans Rossel – hans@koba.be
VIEWS


Versies

Views 1: Drupal 5: enkel van nodes




Views 2: Drupal 6: van nodes, users, …
Views 3: Drupal 7: van externe bronnen (rdf,
solr)



Download

http://drupal.org/project/views



Doel

Lijsten trekken van titels, teksten, foto's, ...



Oefening

Enkele basisviews aanmaken: blok met laatste
nieuws en overzicht van alle nieuws

21/11/2013

Hans Rossel – hans@koba.be
21/11/2013

Hans Rossel – hans@koba.be
Bedankt !
Vragen ?
Hans.Rossel@koba.be

21/11/2013

Hans Rossel – hans@koba.be

More Related Content

Similar to Drupal koba-nov2013

Introductie Drupal development
Introductie Drupal developmentIntroductie Drupal development
Introductie Drupal developmentBart Hanssens
 
Drupal opleiding
Drupal opleidingDrupal opleiding
Drupal opleidingHans Rossel
 
Drupal 7 Theming
Drupal 7 ThemingDrupal 7 Theming
Drupal 7 ThemingHans Rossel
 
Drupal intro 2010
Drupal intro 2010Drupal intro 2010
Drupal intro 2010Hans Rossel
 
Lucius Websystems Drupal Startersdag
Lucius Websystems Drupal StartersdagLucius Websystems Drupal Startersdag
Lucius Websystems Drupal StartersdagLuciuswebsystems
 
General Drupal presentation in Dutch
General Drupal  presentation in DutchGeneral Drupal  presentation in Dutch
General Drupal presentation in DutchRoel Meester
 
Aan de slag met Wordpress - TDvenlo
Aan de slag met Wordpress - TDvenloAan de slag met Wordpress - TDvenlo
Aan de slag met Wordpress - TDvenlojhaand
 
Drupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
Drupal + Open Atrium bij de Vlaamse ErfgoedbibliotheekDrupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
Drupal + Open Atrium bij de Vlaamse ErfgoedbibliotheekDavid Coppoolse
 
XPages Introductie
XPages IntroductieXPages Introductie
XPages IntroductieRob Bontekoe
 
Ict2 trm- werking internet
Ict2 trm- werking internetIct2 trm- werking internet
Ict2 trm- werking internetkaatversele
 
Joomla kennismaking
Joomla kennismakingJoomla kennismaking
Joomla kennismakingJohan Smits
 
Wat is drupal? - Drupal seminar 20 mei 2010, Colours
Wat is drupal? - Drupal seminar 20 mei 2010, ColoursWat is drupal? - Drupal seminar 20 mei 2010, Colours
Wat is drupal? - Drupal seminar 20 mei 2010, ColoursColours B.V.
 
Drupal introductie - GoalGorilla - Oxilion Lunch & Learn
Drupal introductie - GoalGorilla - Oxilion Lunch & LearnDrupal introductie - GoalGorilla - Oxilion Lunch & Learn
Drupal introductie - GoalGorilla - Oxilion Lunch & Learntaccie
 

Similar to Drupal koba-nov2013 (20)

Drupalgardens
DrupalgardensDrupalgardens
Drupalgardens
 
SEO & Drupal CMS
SEO & Drupal CMSSEO & Drupal CMS
SEO & Drupal CMS
 
Introductie Drupal development
Introductie Drupal developmentIntroductie Drupal development
Introductie Drupal development
 
Cursus Joomla 1.6
Cursus Joomla 1.6Cursus Joomla 1.6
Cursus Joomla 1.6
 
Cursusjoomla
CursusjoomlaCursusjoomla
Cursusjoomla
 
Drupal opleiding
Drupal opleidingDrupal opleiding
Drupal opleiding
 
Drupal7 Theming
Drupal7 ThemingDrupal7 Theming
Drupal7 Theming
 
Drupal 7 Theming
Drupal 7 ThemingDrupal 7 Theming
Drupal 7 Theming
 
Drupal intro 2010
Drupal intro 2010Drupal intro 2010
Drupal intro 2010
 
Lucius Websystems Drupal Startersdag
Lucius Websystems Drupal StartersdagLucius Websystems Drupal Startersdag
Lucius Websystems Drupal Startersdag
 
General Drupal presentation in Dutch
General Drupal  presentation in DutchGeneral Drupal  presentation in Dutch
General Drupal presentation in Dutch
 
Aan de slag met Wordpress - TDvenlo
Aan de slag met Wordpress - TDvenloAan de slag met Wordpress - TDvenlo
Aan de slag met Wordpress - TDvenlo
 
Drupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
Drupal + Open Atrium bij de Vlaamse ErfgoedbibliotheekDrupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
Drupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
 
Joomla
JoomlaJoomla
Joomla
 
Prosite Webinar 2010
Prosite Webinar 2010Prosite Webinar 2010
Prosite Webinar 2010
 
XPages Introductie
XPages IntroductieXPages Introductie
XPages Introductie
 
Ict2 trm- werking internet
Ict2 trm- werking internetIct2 trm- werking internet
Ict2 trm- werking internet
 
Joomla kennismaking
Joomla kennismakingJoomla kennismaking
Joomla kennismaking
 
Wat is drupal? - Drupal seminar 20 mei 2010, Colours
Wat is drupal? - Drupal seminar 20 mei 2010, ColoursWat is drupal? - Drupal seminar 20 mei 2010, Colours
Wat is drupal? - Drupal seminar 20 mei 2010, Colours
 
Drupal introductie - GoalGorilla - Oxilion Lunch & Learn
Drupal introductie - GoalGorilla - Oxilion Lunch & LearnDrupal introductie - GoalGorilla - Oxilion Lunch & Learn
Drupal introductie - GoalGorilla - Oxilion Lunch & Learn
 

Drupal koba-nov2013

  • 1. Websites bouwen met Drupal Vlaamse Sportfederatie, 21 november 2013 Hans Rossel, www.koba.be, hans@koba.be, twitter: @haro
  • 3. Website Benodigdheden: ● Een domeinnaam: www.mijnwebsite.be, dus enkel de naam, huren per jaar van dns.be ● Een hosting: een computer in een datacenter die de online bestanden van je website bevat ● Teksten, foto's, ... 21/11/2013 Hans Rossel – hans@koba.be 3
  • 4. Analyse → Wireframe → Photoshop design 21/11/2013 Hans Rossel – hans@koba.be
  • 5. Werkomgeving ● Een goede browser: Firefox, Chrome. Internet Explorer enkel gebruiken voor testen op het einde. ● Firebug ● Webdeveloper toolbar ● Een code editor: Sublime text, Notepad++, Dreamweaver, … ● Photoshop, Gimp 2.8, http://www.getpaint.net/download.html ● FTP: Filezilla ● Localhost server: xampp, wampserver, mamp 21/11/2013 Hans Rossel – hans@koba.be 5
  • 7. Drupal – Wat? Drupal is een Content Management System (CMS), een systeem waarmee je via een login online websites kunt beheren: teksten maken, foto's toevoegen, organiseren van de inhoud, ... Drupal werd in 1999 uitgevonden door Dries Buytaert, een student informatica uit Antwerpen. Tegenwoordig wordt het wereldwijd gebruikt door meer dan 1 miljoen websites. Het is geschikt voor zowel kleine als heel grote websites (Het Witte Huis, The Economist, Vlaamse Overheid, ...) Drupal is Open Source wat betekent dat de code volledig gratis is en volledig vrij aanpasbaar. Drupal is samen met Wordpress en Joomla de top 3 van de Open Source CMS systemen.
  • 8. Referenties Media/Entertainment ● VRT, VTM, VT4, Vitaya, RTBF ● Sony BMG Music, Universal Music Group, Warner Bros, 20th Century Fox, Michael Jackson, Eric Clapton and Robbie Williams, Grammy awards, Emmy awards ● The Examiner, The Economist, Le Figaro, Edipresse, Infoworld, Aj Jazeera ● Studio Brussel, Radio Netherlands Worldwide, Australian Broadcast Company, BBC, CNN, Reuters ● Virgin, Slate, Monthy Python and Lucas Arts 21/11/2013 Hans Rossel – hans@koba.be
  • 9. NGO, Gov & edu ● Human Rights watch, Amnesty ● World Food Programme, World Bank, United Nations, Europese Unie, World Economic Forum ● Witte Huis, Vlaanderen, New York state senate, US Department of Commerce, Belgische Premier, Belgische Monarchie, FOD Financiën, the French government, the Dutch government, the Australian Prime Minister and the British Government, London en Athene. ● Universiteit Gent, Duke University, Strayer University, Portland University, MIT, Stanford University and Harvard ● UitinVlaanderen, FARO, Louvre, Tate, Vlaamse Kunstcollectie ● NASA (http://themis.asu.edu/) ● Linux Foundation, JAVA.net en Internet Systems Consortium 21/11/2013 Hans Rossel – hans@koba.be
  • 10. Enterprises using Drupal ● Telenet, ING, Garmnin, Ebay, Symantec, Nokia, AHOLD, Randstad, Sony Ericsson, Paypal, Twitter, Mattel, Nvidia, Rackspace, AT&T, FUJI film, General Motors, Intel, Fujifilm, Fedex, IBM, Cap Gemini, Accenture, Procter & Gamble en Google (mlab), IKEA ● Zenito (svmb/admb) Meer referenties: http://www.buytaert.net/tag/drupal-sites 21/11/2013 Hans Rossel – hans@koba.be
  • 11. Drupal – Voordelen - Op een eenvoudige manier een website maken, teksten en foto's toevoegen en de inhoud organiseren - Meerdere personen kunnen instaan voor de website elk met eigen login en kunnen overal de site aanpassen - Automatiseren van taken: automatisch sorteren van activiteiten op datum, laatste nieuws bovenaan zetten, voorbije activiteiten niet meer tonen, ... - Open source: gratis, heel veel mensen werken ermee en verbeteren het, oneindig veel functionaliteiten
  • 13. Origineel of voorverpakt     Origineel drupal.org/download Via controlepaneel: Installatron, Fantastico Drupal gardens: http://www.drupalgardens.com Distributies (http://drupal.org/project/distributions) – – Drupal Commons: online communities – Open Publish: nieuwssite – Commerce Kickstart: webshop – 21/11/2013 Open Atrium: intranet Open Public: overheid Hans Rossel – hans@koba.be
  • 14. Systeemvereisten Standaard LAMP Alternatieven  Linux  Lighttpd  Apache  IIS mits aanpassingen  MySQL 5  PostgreSQL  Php 5.3  Sinds D7: nieuwe abstraction layer die andere databases (MSSQL, Oracle) ondersteunt via php PDO. 21/11/2013 Hans Rossel – hans@koba.be
  • 15. Installatie nodig  Hosting of LAMP op localhost  > Mysql 5: database  > php 5.2: programmeertaal  Apache mod rewrite bruikbaar in .htaccess  Voldoende geheugen  http://drupal.be/documentatie/drupal-hosting 21/11/2013 Hans Rossel – hans@koba.be
  • 16. Bestanden: Drupal core downloaden  Op drupal.org:  Drupal 7 downloaden  Www.drupal.org/download  Uitpakken en opslaan in mapje c/xampp/htdocs 21/11/2013 Hans Rossel – hans@koba.be
  • 17. Database maken     http://localhost/phpmyadmin/ Home > databases > create new database Users > create new user All privileges 21/11/2013 Hans Rossel – hans@koba.be
  • 18. Installatie    Ga naar http://localhost/drupalmapje en de installatiewizard start Vul de databasenaam, gebruikersnaam en paswoord in Los de fout op: – # Copy the ./sites/default/default.settings.php file to ./sites/default/settings.php. – # Change file permissions so that it is writable by the web server.  Vul de gegevens van de site in als de installatie gelukt is  Kies een moeilijk paswoord voor de beheerdersaccount, want user 1 mag steeds alles op de site. 21/11/2013 Hans Rossel – hans@koba.be
  • 19. Problemen instelling php.ini  Foutreportage & security   register_globals = Of Upload en timout limieten  memory_limit = 128M  upload_max_filesize = 150M  post_max_size = 150M  max_input_time = 300  max_execution_time = 300 21/11/2013 Hans Rossel – hans@koba.be
  • 20. php.ini settings  Kunnen ingesteld worden op  Een bestandje php.ini uploaden in root  In .htaccess php_flag register_globals of  php_value memory_limit "128M"  php_value max_execution_time 300 In settings.php van Drupal     In een gewoon stukje php code: http://www.php.net/ini_set (enkel geldig tijdens script) Let op  Syntax verschilt tussen werkwijzen  Als .htaccess error 500 geeft staat hosting dit niet toe 21/11/2013 Hans Rossel – hans@koba.be
  • 21. Installatie op cpanel hosting  Drupal 7 uploaden met http://filezilla-project.org/download.php?type=client  Een database aanmaken bij databases (niet in phpmyadmin)  Eerst database maken    Dan user maken Dan user toevoegen aan database, all privileges Drupal installatie  Databasenaam en username worden vaak geprefixt met accountname bij hosting: dus accountname_username en accountname_databasename gebruiken  Permissies files en settings instellen 21/11/2013 Hans Rossel – hans@koba.be
  • 23. Bestandsstructuur   Mappen en inhoud Core niet hacken!  Sites map instellen: modules/templates  Files instellen 21/11/2013 Hans Rossel – hans@koba.be
  • 24. Drupal in het Nederlands ● Nederlandse taal toevoegen: ● ● admin/config/regional/language Localization update installeren ● https://drupal.org/project/l10n_update: downloaden ● Uitpakken in sites/all/modules ● Op site: aanvinken bij modules ● Naar “interface vertalen” en dan tab bijwerken: admin/config/regional/translate/update ● 21/11/2013 Update laten lopen Hans Rossel – hans@koba.be
  • 25. Basisinstellingen installatie  Site instellingen   Bestandssysteem  Datum en tijd  Foutrapportage  Site onderhoud   Bestands upload Websitegegevens Inhoudelijk beheer   Teaserlengte, taxonomie, ... Gebruikers  Rollen admin en redactie aanmaken + rechten instellen  Gebruikers toevoegen aan een rol 21/11/2013 Hans Rossel – hans@koba.be
  • 26. Gewone pagina's toevoegen  Opbouwen structuur  Home: promoted items  Over ons  Producten  Referenties  Contact: contact module 21/11/2013 Hans Rossel – hans@koba.be
  • 27. Drupal: navigatie  Pagina's die niet automatisch opgelijst worden kun je best een plaats in de navigatie van de website voorzien. Er zijn twee manieren om dit te doen  Onmiddellijk wanneer je inhoud aanmaakt: Onderaan vinkje aanzetten bij menu-instellingen of  Achteraf via het menu beheer, zorg dat je eerst de pagina hebt gemaakt.   Navigeer via het zwarte backend menu naar Menu Hier kun je ook de volgorde van de menu-items wijzigen door ze te verslepen. Sleep een item naar rechts onder een item om het te laten verschijnen in het submenu dat in de linkerkolom komt.
  • 28. Drupal: blokken Structuur / Blokken  Een blok bevat randinformatie en kan op verschillende pagina's voorkomen  Bijvoorbeeld: login blok, lijst met laatste inhoud, een affiche of banner van een activiteit  Bij elk blok kun je kiezen waar het moet getoond worden
  • 29. Drupal: toegangsbeheer Iedere gebruiker van de site die de site moet beheren of pagina's toevoegen kan een eigen login hebben. Gebruikers hebben 1 of meerdere rollen. Een rol is een verzameling van toegangsrechten. Standaard zijn er de rollen anoniem, authenticated (ingelogde gebruiker) en admin. Van elke rol kunnen de toegangsrechten aangepast worden. Om veiligheidsredenen is het best dat dit enkel door gevorderde gebruikers gebeurt. De Dynamo standaardsite voorziet al de voornaamste rollen met correcte instelling van de rechten. Toegangsrecht en Toegangsrecht en
  • 30. Zoekfunctie  Zoekfunctie en instellingen  Cron laten lopen om index op te vullen 21/11/2013 Hans Rossel – hans@koba.be
  • 31. WYSYWYG  De editor   Externe editor downloaden: Ckeditor, Tinymce   www.drupal.org/project/wysiwyg (dev versie) Alternatief Bueditor, Markdown Afbeeldingen in de editor  www.drupal.org/project/imce  www.drupal.org/project/imce_wysiwyg 21/11/2013 Hans Rossel – hans@koba.be
  • 32. WYSYWYG installatie & werking  Stappen (ook algemeen voor installeren module)  Issues bekijken: critical bugs ea bugs + versie kiezen  Opladen van de module  readme.txt lezen en online handboek  Eventuele core patches installeren  Dependend modules aanvinken op admin/build/modules  Aanvinken op admin/build/modules  Toegangsrechten controleren  Module settings instellen  Kijken als er te activeren blokken zijn bijgekomen 21/11/2013 Hans Rossel – hans@koba.be
  • 34. Drupal 7 core Themes: Appearance
  • 35. Bartik en Seven  Standard frontend en backend theme Drupal 7  Bartik is bedoeld om uitgebreid te worden via een subtheme 21/11/2013 Hans Rossel – hans@koba.be
  • 36. Instellingen & Keuze theme ● Templates: admin/build/themes ● Core themes en nut ● Variabelen, logo, snelkoppelingsikoon ● Berichtinformatie weergeven over ● Zen ea: extra theme settings ● Extra variabelen ● Beheertemplate ● Blokken en menu's 21/11/2013 Hans Rossel – hans@koba.be
  • 38. Prefab themes installeren  Download het theme – Uitpakken in sites/all/themes – Activeren bij Uiterlijk – Css aanpassen gebeurt best via een subtheme 21/11/2013 Hans Rossel – hans@koba.be
  • 39. Starter Themes Starter themes zijn bedoeld als vertrekpunt (base theme) om je eigen theme ermee te bouwen. Ze bevatten veel bruikbare code en extra theme settings. Ze hebben nog geen design. Video: http://blip.tv/drupalcon/evaluating-base-themes-6318801 • http://drupal.org/project/zen • http://drupal.org/project/omega • http://drupal.org/project/adaptivetheme • http://drupal.org/project/fusion 21/11/2013 Hans Rossel – hans@koba.be
  • 42. BACKUP FILES  Vooral de map sites is van belang, met de map files in het bijzonder  Ftp 2000 files max 21/11/2013 Hans Rossel – hans@koba.be
  • 43. Backup modules & info  Handbook: http://drupal.org/node/22281  http://drupal.org/project/backup_migrate  Beste en actiefste backup module op dit ogenblik    Scheduled backup Excluden van grote tabellen: search, cache, sessions http://www.ozerov.de/bigdump.php: grote databases 21/11/2013 Hans Rossel – hans@koba.be
  • 44. Upgraden: puntupgrade  Stap 1: Backup sites & database  Stap 2: Inloggen als user 1 + Offline mode  Stap 3: Alle bestanden verwijderen, behalve sites.  Stap 4: Nieuwe bestanden in de plaats zetten  Stap 5: Patches herinstalleren  Stap 6: update.php laten lopen  Stap 7: patches herinstalleren  Stap 8: controle installatie en logs 21/11/2013 Hans Rossel – hans@koba.be
  • 45. Upgrade ● Er worden steeds 2 Drupal versies ondersteund, momenteel Drupal 6 en 7. Er zit gemiddeld 3 jaar tussen elke versie. ● Een grote upgrade van bijvoorbeeld Drupal 6 naar Drupal 7 kan, maar is veel meer werk dan een puntsupgrade: ● ● Het upgrade path moet bugvrij zijn: dit is vaak pas een paar jaar na lancering van een nieuwe Drupal versie volledig klaar Alle extra modules die geïnstalleerd zijn moeten een nieuwe versie hebben. De upgrade status module kan dit controleren. Indien er geen nieuwe versie beschikbaar is moet een alternatief worden geïmplementeerd ● ● ● Alle eigen modulecode moet aangepast worden aan de nieuwe api.drupal.org De code van het theme moet aangepast worden Een upgrade wordt vaak pas uitgevoerd als er grote aanpassingen zijn aan de site, die vaak makkelijker kunnen in een nieuwe versie van Drupal 21/11/2013 Hans Rossel – hans@koba.be
  • 47. Een module kiezen  Overzicht:  http://drupal.org/project/Modules: thematisch  http://drupal.org/project/Modules/name: alfabetisch  Related projects & discussions  Populariteit     http://drupal.org/project/usage: populariteit http://acquia.com/products-services/acquia-drupal-m odules : geselecteerd & ondersteund door Acquia Ratings: http://drupalmodules.com Nieuwe modules: http://drupal.org/taxonomy/term/14 Hans Rossel – hans@koba.be Video http://www.lullabot.com/node/439/play  21/11/2013
  • 48. Status van een module  Versie 6, 7, 8  Status:   Pre-alpha, Alpha, beta, rc (release candidate)   Official release Dev versies Opgelet met updates van 7.x-1.x naar 7.x-2.x 21/11/2013 Hans Rossel – hans@koba.be
  • 49. Factoren kwaliteit module  Tijd: maturiteit & actief onderhouden?     Laatste update/commit (+ view cvs messages: most active projects) Tijd tussen de updates Futureproof?   Eerste versie Drupal 6/7 versie Ontwikkelaar(s)  Aantal  Hoelang betrokken bij Drupal   Andere modules waarvoor verantwoordelijk (cvs messages: most active developers) User profile + track & track code 21/11/2013 Hans Rossel – hans@koba.be
  • 50. Factoren (vervolg)  Issue queue   Aantal bugs & opgeloste bugs  Aantal patches (betrokkenheid externe developers)   Aantal meldingen (populariteit module) Statistieken Omvang module  Een klein probleem vraagt een kleine module  Geen module als je met enkele lijntjes code kunt oplossen  Gevaar voor modulitis: performance site zakt bij elke module die je toevoegt  Module usage statistics  Concurrerende modules:  zie blokken related content 21/11/2013 Hans Rossel – hans@koba.be
  • 51. Issue queue  Vragen over één module steeds hier stellen, niet op forum  Statussen, category & priority  Advanced search  Drupal core issues: http://drupal.org/project/issues/drupal  Ingeven van een issue   Zoeken naar duplicates Heel duidelijke omschrijving (reproduceerbaar probleem): versies, browser, andere zaken geinstalleerd, stappen hoe je kunt reproduceren op “fresh install”, screenshots, code, views export, cck export  Verwijzing naar node via filter  Geen titel wijzigen  Subscribe? Hopelijk betere oplossing toekomst. Zie ook my issues. 21/11/2013  Hans Rossel – hans@koba.be Video: http://www.lullabot.com/node/386/play
  • 53. CCK/Fields  Historiek en evolutie   Doel   Nodes → Flexinode → cck contributed (→ fields in core) Eigen content types met eigen velden definiëren Fields: Drupal.org → zoeken → modules → module categories → fields 21/11/2013 Hans Rossel – hans@koba.be
  • 54. Basis cck fields  Voornaamste extra fields  http://drupal.org/project/imagefield  http://drupal.org/project/filefield  http://drupal.org/project/date  http://drupal.org/project/email  http://drupal.org/project/link  http://drupal.org/project/emfield 21/11/2013 Hans Rossel – hans@koba.be
  • 55. Afbeeldingen  Modules: CCK afbeeldingsveld  Imagefield   Image styles Fotoalbum  Colorbox 21/11/2013 Hans Rossel – hans@koba.be
  • 56. Image styles  Voordelen  Kan via voorgedefinieerde presets images scalen, resizen en croppen  Je kunt verschillende varianten van dezelfde foto automatisch laten genereren 21/11/2013 Hans Rossel – hans@koba.be
  • 57. VIEWS  Versies  Views 1: Drupal 5: enkel van nodes   Views 2: Drupal 6: van nodes, users, … Views 3: Drupal 7: van externe bronnen (rdf, solr)  Download  http://drupal.org/project/views  Doel  Lijsten trekken van titels, teksten, foto's, ...  Oefening  Enkele basisviews aanmaken: blok met laatste nieuws en overzicht van alle nieuws 21/11/2013 Hans Rossel – hans@koba.be