Download - Drupal koba-nov2013

Websites bouwen met Drupal

Vlaamse Sportfederatie, 21 november 2013Hans Rossel, www.koba.be, [email protected], twitter: @haro

http://www.koba.be/

mailto:[email protected]

Een website maken

21/11/2013 Hans Rossel – [email protected] 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 – [email protected]

Analyse Wireframe Photoshop design→ →


21/11/2013 Hans Rossel – [email protected] 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


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



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


http://themis.asu.edu/


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


http://www.buytaert.net/tag/drupal-sites

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)

– Open Atrium: intranet

– Drupal Commons: online communities

– Open Publish: nieuwssite

– Commerce Kickstart: webshop

– Open Public: overheid


http://www.drupalgardens.com/

http://drupal.org/project/distributions


Systeemvereisten

Standaard LAMP

Linux

Apache

MySQL 5

Php 5.3

Alternatieven

Lighttpd

IIS mits aanpassingen

PostgreSQL Sinds D7: nieuwe abstraction

layer die andere databases (MSSQL, Oracle) ondersteunt via php PDO.



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



Bestanden: Drupal core downloaden

Op drupal.org:

Drupal 7 downloaden Www.drupal.org/download Uitpakken en opslaan in mapje c/xampp/htdocs


http://Www.drupal.org/download


Database maken

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


http://localhost/phpmyadmin/


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.


http://localhost/drupalmapje


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



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


http://www.php.net/ini_set


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


http://filezilla-project.org/download.php?type=client

HOOFDSTUK 3

EEN EENVOUDIGE

DRUPAL SITE

BOUWEN


Bestandsstructuur

Mappen en inhoud Core niet hacken!

Sites map instellen: modules/templates Files instellen



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

● Update laten lopen


https://drupal.org/project/l10n_update


Basisinstellingen installatie

Site instellingen Bestands upload Bestandssysteem Datum en tijd Foutrapportage Site onderhoud Websitegegevens

Inhoudelijk beheer Teaserlengte, taxonomie, ...

Gebruikers Rollen admin en redactie aanmaken + rechten instellen Gebruikers toevoegen aan een rol



Gewone pagina's toevoegen

Opbouwen structuur Home: promoted items Over ons Producten Referenties Contact: contact module


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.

Toegangsrechten

Toegangsrechten


Zoekfunctie

Zoekfunctie en instellingen Cron laten lopen om index op te vullen



WYSYWYG

De editor www.drupal.org/project/wysiwyg (dev versie)

Externe editor downloaden: Ckeditor, Tinymce Alternatief Bueditor, Markdown

Afbeeldingen in de editor www.drupal.org/project/imce www.drupal.org/project/imce_wysiwyg


http://www.drupal.org/project/wysiwyg

http://www.drupal.org/project/imce

http://www.drupal.org/project/imce_wysiwyg


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


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



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



Prefab themes Op Drupal.org

● https://drupal.org/project/project_theme ● http://www.creativebloq.com/drupal/best-free-

drupal-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


https://drupal.org/project/project_theme

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

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

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

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

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


Prefab themes installeren

Download het theme– Uitpakken in sites/all/themes

– Activeren bij Uiterlijk

– Css aanpassen gebeurt best via een subtheme



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


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

BACKUPS, ONDERHOUD & UPGRADES


PHPMYADMIN: BACKUP DATABASE



BACKUP FILES

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

Ftp 2000 files max



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


http://drupal.org/node/22281

http://drupal.org/project/backup_migrate

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


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



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


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 Video http://www.lullabot.com/node/439/play


http://drupal.org/project/Modules

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

http://drupal.org/project/usage

http://acquia.com/products-services/acquia-drupal-modules

http://acquia.com/products-services/acquia-drupal-modules

http://drupalmodules.com/

http://drupal.org/taxonomy/term/14

http://www.lullabot.com/node/439/play


Status van een module

Versie 6, 7, 8 Status:

Official release Pre-alpha, Alpha, beta, rc (release candidate) Dev versies

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



Factoren kwaliteit module

Tijd: maturiteit & actief onderhouden? Eerste versie

Laatste update/commit (+ view cvs messages: most active projects)

Tijd tussen de updates

Futureproof? 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



Factoren (vervolg)

Issue queue Aantal meldingen (populariteit module)

Aantal bugs & opgeloste bugs

Aantal patches (betrokkenheid externe developers)

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



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.

Video: http://www.lullabot.com/node/386/play


http://www.lullabot.com/node/386/play

FIELDS EN VIEWS


CCK/Fields

Historiek en evolutie Nodes → Flexinode → cck contributed (→ fields in core)

Doel Eigen content types met eigen velden definiëren

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



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


http://drupal.org/project/imagefield

http://drupal.org/project/email

http://drupal.org/project/link


Afbeeldingen

Modules: CCK afbeeldingsveld Imagefield Image styles

Fotoalbum Colorbox



Image styles

Voordelen Kan via voorgedefinieerde presets images

scalen, resizen en croppen Je kunt verschillende varianten van dezelfde foto

automatisch laten genereren



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



Bedankt !

Vragen ?

[email protected]
