Drupal koba-nov2013

of 59 /59
Websites bouwen met Drupal Vlaamse Sportfederatie, 21 november 2013 Hans Rossel, www.koba.be, [email protected], twitter: @haro

Embed Size (px)

Transcript of Drupal koba-nov2013

  • 1. Websites bouwen met Drupal Vlaamse Sportfederatie, 21 november 2013 Hans Rossel, www.koba.be, [email protected], twitter: @haro

2. Een website maken 3. Website Benodigdheden: Een domeinnaam: www.mijnwebsite.be, dus enkel de naam, huren per jaar van dns.beEen hosting: een computer in een datacenter die de online bestanden van je website bevatTeksten, foto's, ...21/11/2013Hans Rossel [email protected] 4. Analyse Wireframe Photoshop design21/11/2013Hans Rossel [email protected] 5. Werkomgeving Een goede browser: Firefox, Chrome. Internet Explorer enkel gebruiken voor testen op het einde. FirebugWebdeveloper toolbarEen code editor: Sublime text, Notepad++, Dreamweaver, Photoshop, Gimp 2.8, http://www.getpaint.net/download.htmlFTP: FilezillaLocalhost server: xampp, wampserver, mamp21/11/2013Hans Rossel [email protected] 6. Drupal inleiding 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, RTBFSony BMG Music, Universal Music Group, Warner Bros, 20th Century Fox, Michael Jackson, Eric Clapton and Robbie Williams, Grammy awards, Emmy awardsThe Examiner, The Economist, Le Figaro, Edipresse, Infoworld, Aj JazeeraStudio Brussel, Radio Netherlands Worldwide, Australian Broadcast Company, BBC, CNN, ReutersVirgin, Slate, Monthy Python and Lucas Arts21/11/2013Hans Rossel [email protected] 9. NGO, Gov & edu Human Rights watch, AmnestyWorld Food Programme, World Bank, United Nations, Europese Unie, World Economic ForumWitte Huis, Vlaanderen, New York state senate, US Department of Commerce, Belgische Premier, Belgische Monarchie, FOD Financin, 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 HarvardUitinVlaanderen, FARO, Louvre, Tate, Vlaamse KunstcollectieNASA (http://themis.asu.edu/)Linux Foundation, JAVA.net en Internet Systems Consortium21/11/2013Hans Rossel [email protected] 10. Enterprises using DrupalTelenet, 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), IKEAZenito (svmb/admb)Meer referenties: http://www.buytaert.net/tag/drupal-sites 21/11/2013Hans Rossel [email protected] 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 12. INSTALLATIE DRUPAL CORE 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 communitiesOpen Publish: nieuwssiteCommerce Kickstart: webshop21/11/2013Open Atrium: intranetOpen Public: overheidHans Rossel [email protected] 14. Systeemvereisten Standaard LAMPAlternatievenLinuxLighttpdApacheIIS mits aanpassingenMySQL 5PostgreSQLPhp 5.3Sinds D7: nieuwe abstraction layer die andere databases (MSSQL, Oracle) ondersteunt via php PDO.21/11/2013Hans Rossel [email protected] 15. Installatie nodig Hosting of LAMP op localhost > Mysql 5: database > php 5.2: programmeertaalApache mod rewrite bruikbaar in .htaccessVoldoende geheugenhttp://drupal.be/documentatie/drupal-hosting21/11/2013Hans Rossel [email protected] 16. Bestanden: Drupal core downloaden Op drupal.org: Drupal 7 downloadenWww.drupal.org/downloadUitpakken en opslaan in mapje c/xampp/htdocs21/11/2013Hans Rossel [email protected] 17. Database maken http://localhost/phpmyadmin/ Home > databases > create new database Users > create new user All privileges21/11/2013Hans Rossel [email protected] 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 isKies een moeilijk paswoord voor de beheerdersaccount, want user 1 mag steeds alles op de site.21/11/2013Hans Rossel [email protected] 19. Problemen instelling php.ini Foutreportage & security register_globals = OfUpload en timout limieten memory_limit = 128Mupload_max_filesize = 150Mpost_max_size = 150Mmax_input_time = 300max_execution_time = 30021/11/2013Hans Rossel [email protected] 20. php.ini settings Kunnen ingesteld worden op Een bestandje php.ini uploaden in rootIn .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 werkwijzenAls .htaccess error 500 geeft staat hosting dit niet toe21/11/2013Hans Rossel [email protected] 21. Installatie op cpanel hosting Drupal 7 uploaden met http://filezilla-project.org/download.php?type=clientEen database aanmaken bij databases (niet in phpmyadmin) Eerst database maken Dan user maken Dan user toevoegen aan database, all privilegesDrupal installatie Databasenaam en username worden vaak geprefixt met accountname bij hosting: dus accountname_username en accountname_databasename gebruiken Permissies files en settings instellen21/11/2013Hans Rossel [email protected] 22. HOOFDSTUK 3EEN EENVOUDIGE DRUPAL SITE BOUWEN 23. Bestandsstructuur Mappen en inhoud Core niet hacken! Sites map instellen: modules/templates Files instellen21/11/2013Hans Rossel [email protected] 24. Drupal in het Nederlands Nederlandse taal toevoegen: admin/config/regional/languageLocalization update installeren https://drupal.org/project/l10n_update: downloadenUitpakken in sites/all/modulesOp site: aanvinken bij modulesNaar interface vertalen en dan tab bijwerken: admin/config/regional/translate/update21/11/2013Update laten lopenHans Rossel [email protected] 25. Basisinstellingen installatie Site instellingen BestandssysteemDatum en tijdFoutrapportageSite onderhoudBestands uploadWebsitegegevensInhoudelijk beheer Teaserlengte, taxonomie, ...Gebruikers Rollen admin en redactie aanmaken + rechten instellenGebruikers toevoegen aan een rol21/11/2013Hans Rossel [email protected] 26. Gewone pagina's toevoegen Opbouwen structuur Home: promoted items Over onsProductenReferentiesContact: contact module21/11/2013Hans Rossel [email protected] 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 enToegangsrecht en 30. Zoekfunctie Zoekfunctie en instellingenCron laten lopen om index op te vullen21/11/2013Hans Rossel [email protected] 31. WYSYWYG De editor Externe editor downloaden: Ckeditor, Tinymcewww.drupal.org/project/wysiwyg (dev versie) Alternatief Bueditor, MarkdownAfbeeldingen in de editor www.drupal.org/project/imcewww.drupal.org/project/imce_wysiwyg21/11/2013Hans Rossel [email protected] 32. WYSYWYG installatie & werking Stappen (ook algemeen voor installeren module) Issues bekijken: critical bugs ea bugs + versie kiezenOpladen van de modulereadme.txt lezen en online handboekEventuele core patches installerenDependend modules aanvinken op admin/build/modulesAanvinken op admin/build/modulesToegangsrechten controlerenModule settings instellenKijken als er te activeren blokken zijn bijgekomen21/11/2013Hans Rossel [email protected] 33. DRUPAL THEMES 34. Drupal 7 core Themes: Appearance 35. Bartik en Seven Standard frontend en backend theme Drupal 7Bartik is bedoeld om uitgebreid te worden via een subtheme21/11/2013Hans Rossel [email protected] 36. Instellingen & Keuze theme Templates: admin/build/themes Core themes en nutVariabelen, logo, snelkoppelingsikoonBerichtinformatie weergeven overZen ea: extra theme settingsExtra variabelenBeheertemplateBlokken en menu's21/11/2013Hans Rossel [email protected] 37. Prefab themes Op Drupal.org https://drupal.org/project/project_theme http://www.creativebloq.com/drupal/best-freedrupal-themes-7133704Commercieel http://www.designrazzi.com/2013/drupal-7-themes/http://themeforest.net/category/cms-themes/drupalhttp://www.templatemonster.com/drupal-themes.php21/11/2013Hans Rossel [email protected] 38. Prefab themes installeren Download het theme Uitpakken in sites/all/themes Activeren bij Uiterlijk Css aanpassen gebeurt best via een subtheme21/11/2013Hans Rossel [email protected] 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/zenhttp://drupal.org/project/omegahttp://drupal.org/project/adaptivethemehttp://drupal.org/project/fusion21/11/2013Hans Rossel [email protected] 40. BACKUPS, ONDERHOUD & UPGRADES 41. PHPMYADMIN: BACKUP DATABASE21/11/2013Hans Rossel [email protected] 42. BACKUP FILES Vooral de map sites is van belang, met de map files in het bijzonderFtp 2000 files max21/11/2013Hans Rossel [email protected] 43. Backup modules & info Handbook: http://drupal.org/node/22281http://drupal.org/project/backup_migrate Beste en actiefste backup module op dit ogenblik Scheduled backup Excluden van grote tabellen: search, cache, sessionshttp://www.ozerov.de/bigdump.php: grote databases21/11/2013Hans Rossel [email protected] 44. Upgraden: puntupgrade Stap 1: Backup sites & databaseStap 2: Inloggen als user 1 + Offline modeStap 3: Alle bestanden verwijderen, behalve sites.Stap 4: Nieuwe bestanden in de plaats zettenStap 5: Patches herinstallerenStap 6: update.php laten lopenStap 7: patches herinstallerenStap 8: controle installatie en logs21/11/2013Hans Rossel [email protected] 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 genstalleerd zijn moeten een nieuwe versie hebben. De upgrade status module kan dit controleren. Indien er geen nieuwe versie beschikbaar is moet een alternatief worden gemplementeerdAlle eigen modulecode moet aangepast worden aan de nieuwe api.drupal.org De code van het theme moet aangepast wordenEen upgrade wordt vaak pas uitgevoerd als er grote aanpassingen zijn aan de site, die vaak makkelijker kunnen in een nieuwe versie van Drupal21/11/2013Hans Rossel [email protected] 46. MODULES KIEZEN EN INSTALLEREN 47. Een module kiezen Overzicht: http://drupal.org/project/Modules: thematischhttp://drupal.org/project/Modules/name: alfabetischRelated projects & discussionsPopulariteit http://drupal.org/project/usage: populariteit http://acquia.com/products-services/acquia-drupal-m odules : geselecteerd & ondersteund door Acquia Ratings: http://drupalmodules.comNieuwe modules: http://drupal.org/taxonomy/term/14 Hans Rossel [email protected] Video http://www.lullabot.com/node/439/play 21/11/2013 48. Status van een module Versie 6, 7, 8Status: Pre-alpha, Alpha, beta, rc (release candidate)Official release Dev versiesOpgelet met updates van 7.x-1.x naar 7.x-2.x21/11/2013Hans Rossel [email protected] 49. Factoren kwaliteit module Tijd: maturiteit & actief onderhouden? Laatste update/commit (+ view cvs messages: most active projects) Tijd tussen de updatesFutureproof? Eerste versieDrupal 6/7 versieOntwikkelaar(s) AantalHoelang betrokken bij DrupalAndere modules waarvoor verantwoordelijk (cvs messages: most active developers) User profile + track & track code21/11/2013Hans Rossel [email protected] 50. Factoren (vervolg) Issue queue Aantal bugs & opgeloste bugsAantal patches (betrokkenheid externe developers)Aantal meldingen (populariteit module)StatistiekenOmvang module Een klein probleem vraagt een kleine moduleGeen module als je met enkele lijntjes code kunt oplossenGevaar voor modulitis: performance site zakt bij elke module die je toevoegtModule usage statisticsConcurrerende modules: zie blokken related content21/11/2013Hans Rossel [email protected] 51. Issue queue Vragen over n module steeds hier stellen, niet op forumStatussen, category & priorityAdvanced searchDrupal core issues: http://drupal.org/project/issues/drupalIngeven 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 exportVerwijzing naar node via filterGeen titel wijzigenSubscribe? Hopelijk betere oplossing toekomst. Zie ook my issues.21/11/2013Hans Rossel [email protected]: http://www.lullabot.com/node/386/play 52. FIELDS EN VIEWS 53. CCK/Fields Historiek en evolutie Doel Nodes Flexinode cck contributed ( fields in core) Eigen content types met eigen velden definirenFields: Drupal.org zoeken modules module categories fields21/11/2013Hans Rossel [email protected] 54. Basis cck fields Voornaamste extra fields http://drupal.org/project/imagefield http://drupal.org/project/filefieldhttp://drupal.org/project/datehttp://drupal.org/project/emailhttp://drupal.org/project/linkhttp://drupal.org/project/emfield21/11/2013Hans Rossel [email protected] 55. Afbeeldingen Modules: CCK afbeeldingsveld Imagefield Image stylesFotoalbum Colorbox21/11/2013Hans Rossel [email protected] 56. Image styles Voordelen Kan via voorgedefinieerde presets images scalen, resizen en croppen Je kunt verschillende varianten van dezelfde foto automatisch laten genereren21/11/2013Hans Rossel [email protected] 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/viewsDoel Lijsten trekken van titels, teksten, foto's, ...Oefening Enkele basisviews aanmaken: blok met laatste nieuws en overzicht van alle nieuws21/11/2013Hans Rossel [email protected] 58. 21/11/2013Hans Rossel [email protected] 59. Bedankt ! Vragen ? [email protected]/11/2013Hans Rossel [email protected]