Lesweek 6

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 2

Kennismakingsronde

• terugblik javascript
• wat is er nodig om wordpress lokaal te draaien
• installatie xampp
• onderdelen xampp

Doelen

Wat is de functie van document.getElementById("mijnElement") in JavaScript?

1. Het maakt een nieuw HTML-element aan met de ID "mijnElement"
2. Het verwijdert een element met de ID "mijnElement" van de pagina
3. Het zoekt een HTML-element met de ID "mijnElement" en geeft dit terug, zodat je er wijzigingen aan kunt maken
4. Het zorgt ervoor dat een element met de ID "mijnElement" verborgen wordt

De variabele leeftijd heeft de waarde 15. Wat zal er in de console worden weergegeven?

1. "Ga links af"
2. "Ga rechts af"
3. Er gebeurt niets
4. Er verschijnt een foutmelding

Waarom wordt JavaScript vaak gebruikt in webontwikkeling?

1. Om de stijl van een website te bepalen
2. Om interactieve elementen en dynamische content op een webpagina mogelijk te maken
3. Om afbeeldingen op een website te beheren
4. Om tekst te formatteren

Kennismakingsronde

• Kan een eenvoudig functioneel en technisch ontwerp voor een website lezen
• Kan een content management systeem (CMS) installeren
• Kan een database koppelen aan de website via een content management systeem (CMS)
• Kan door middel van gebruik van thema's een website vormgeven en realiseren conform het functioneel en technisch ontwerp
• Kan een website publiceren
• Kan de website via het content management systeem (CMS) aanpassen aan de specifieke wensen van een klant of

Exameneisen

Kennismakingsronde

Een website met een webshop met behulp van Wordpress

Examen - technisch

Met een cms kan je een website maken zonder dat je iets hoeft te weten van html en css.
Een website bestaat altijd uit html en css?
Hoe doet een cms dat dan???

Als je het antwoord niet weet: Wat zou je dan willen leren/weten over een cms?

Kennismakingsronde

• Software om websites te maken
• HTML, CSS zijn de standaardtalen die een browser begrijpt
• Bij CMS hoef je niets te weten van html en css
  
• Hoe kan dat?
• Wat doet een cms eigenlijk?

Content Management System (CMS)

Kennismakingsronde

Wat hebben we nodig aan software?

• Webserver (apache)
• Databaseserver (Mysql)
• PHP
  
  
• Als stack - xampp met een control panel
  
  

Wordpress lokaal installeren

Kennismakingsronde

Wordpress technieken

Kennismakingsronde

Wordpress technieken

Kennismakingsronde

• Programmeertaal
• Speciaal voor het web ontwikkeld
• Draait op de server
• Verzorgt de uitwisseling met de database
  
• Extensie .php
• functie -> html genereren!
  

PHP

Kennismakingsronde

Download en installeer de laatste versie

• https://www.apachefriends.org/download.html
• Gebruik de standaardmap c:\xampp
• Bij de opties zijn de optionele opties:
  mysql en phpmyadmin nodig
  De andere tools als perl etc niet
  

XAMPP installeren

Kennismakingsronde

• http(s)://localhost in de browser verwijst naar de map
  c:\xampp\htdocs
• Zoekt naar index.php of index.html
• Je kunt elke map binnen htdocs beschouwen als een website

XAMPP

Kennismakingsronde

• voeg een map 'site' toe aan c:\xampp
• maak in de nieuwe map 'site' een bestand 'index.html' 
  
• Voeg een welkomsttekst aan die html pagina
  
• Start apache op via de control panel
• Ga in de browser naar http://localhost/site
• De welkomsttekst moet dan zichtbaar zijn in de browser
  

Oefening

Kennismakingsronde

• Content Management System
• Open source
• Meest populair
• Oorspronkelijk voor blogs
  

Wordpress

Kennismakingsronde

• nl.wordpress.org
  
• uitpakken als map in de htdocs map en hernoemen naar site naam, bijvoorbeeld : c:\xampp\htdocs\sportive
  
• in de browser benaderbaar als http://localhost/sportive

Wordpress installatie

Kennismakingsronde

• installatie starten via browser bij http://localhost/sportive
  
• database aanmaken via mysql admin (phpmyadmin)
  
• database gebruiker aanmaken voor database (systeemgebruiker!)
• database gegevens invoeren in de installatiestap
  
• beheerder account aanmaken(wordpress gebruiker)

Wordpress installatiestappen

Kennismakingsronde

Download en installeer Wordpress:

• nl.wordpress.org
  
• map een website sportive aan
  
• Doorloop de stappen database, databasegebruiker, beheerder account

Wordpress installeren

Evaluatie - noem drie dingen die nieuw waren voor jou en die je in deze les hebt geleerd

Kennismakingsronde

Introductie cms - Wordpress

• Installatie XAMPP
• Korte introductie PHP

Volgende week

Installatie Wordpress

Terug- en vooruitblik