9. Online zetten & Header / Footer in PHP

• Software Developer [WEB_A]
• MBO
• Studiejaar 1

WEB

Webdevelopment-II

Les 1 / Week 9

Online zetten & Header/Footer (PHP)

Week 9 // WEB

Online zetten

Header/footer in PHP

Met welke display-waarde zorg ik ervoor dat mijn element alleen de grootte van het element zelf heeft?

1. flex
2. block
3. inline
4. grid

Met welke twee property-value-combinaties kan ik de elementen in mijn nav-bar uitlijnen met gelijke ruimte ertussen?

Noem zoveel mogelijk properties ik in CSS kan toepassen op een a-element en leg er achter tussen haakjes uit wat het doet.

Hoe kan ik in Javascript een variabele 'location' met de waarde 'Breda' maken?

Hoe spreek ik een HTML-id aan in Javascript?

Welke CSS-waarde geef ik een wrapper-class als ik de pagina in het midden wil uitlijnen?

{

}

;

;

:

:

.wrapper

wrapper

margin

text-align

padding

border

center

0 auto

auto 0

auto

width

968px

70%

Hoe reset ik de browserinstellingen?

Online zetten

• Als je website volledig klaar is voor gebruik en niet gelijk meer aangepast hoeft te worden
• Webhosting (een stukje webruimte op een server die altijd in verbinding staat met het internet).
• Middels FTP een verbinding tussen jouw computer en de host (FileZilla)

Bij welke hostingprovider heb jij je hosting gekocht?

Opdracht 9.1: procedure opzoeken

• Zoek alvast je de inloggegevens van je hosting op. Dit zijn de gegevens achter ‘FTP’, ‘username’ en ‘password’.
  
• Vrijwel elke hosting biedt een handleiding hoe gebruik te maken van hun hosting. Dit kan bijvoorbeeld zijn door een file manager of door een FTP-server te gebruiken. Hierin staat vrij uitgebreid beschreven welke stappen je moet ondernemen om je site online te zetten.
  
• Download het programma 'Filezilla' (vink alle extra extensies uit):

https://filezilla-project.org/download.php?platform=win64

Noteer hier je hostingprovider en de link van de handleiding die je gevonden hebt om je website online te zetten:

Online zetten met Strato

www.strato.nl

Opdracht 9.2: zet je website online

• Controleer nog 1x of je geen absolute links hebt (links die direct naar een bestand in jouw map verwijzen).
  
• Zorg ervoor dat je met behulp van FileZilla (zie download hierboven) jouw gehele lokale projectmapinhoud  ‘portfolio’ (dus vanaf de mapnaam in de map ‘xampp’- ‘htdocs’) verplaatst naar de juiste map van jouw hosting (www of public_html bijv.)
  
• Controleer of alles goed verplaatst is en check of je website online werkt.
  

FileZilla (stappenplan

1. Als je FileZilla opstart, zie je vrij bovenaan een balk met daarin de woorden Host, Gebruikersnaam, Wachtwoord en Poort. Vul achter elk onderdeel de gegevens in die je toegestuurd hebt gekregen van je hosting provider. Als je hostingprovider niets zegt over de Poort, dan kun je dat veld leeglaten.
   
2. Klik op de knop Snelverbinden, in dezelfde balk. Er wordt dan verbinding gelegd met de server van je provider. Het linkervak stelt je eigen computer voor; het rechter de server van je hosting provider.
   

Zoek aan de linkerkant van je scherm het bestand op dat je wilt uploaden en selecteer het (meerdere bestanden tegelijkertijd selecteren kan ook). Zorg ervoor dat aan de rechterkant de map open staat waar het bestand terecht moet komen. Klik dan met je rechtermuisknop en kies ‘Uploaden’. Je bestand wordt nu verzonden. (Je kunt het bestand trouwens ook met je muis van het ene scherm naar het andere slepen.) Naar welke map je je bestanden moet uploaden, hangt van je provider af. Meestal is dat een map die ‘www’ of ‘public_html’ heet, of die dezelfde naam heeft als je domeinnaam.

Als je klaar bent, klik je op het rode kruisje in de bovenste balk (naast het icoontje van het groene vinkje) en de verbinding tussen jouw computer en de webserver wordt weer verbroken. 

Header/footer in PHP

• Niet steeds dezelfde gegevens kopiëren en plakken.
• Niet alles in elke file van je project hoeven aanpassen
• Header en footer inladen vanuit 1 bestand in elk html-bestand waar het van toepassing is.

PHP

• Backend programmeertaal in plaats van frontend (HTML/CSS)
• Pagina's dynamisch maken
• Ingebouwde functies gebruiken 
• Pagina's inladen

Extensie aanpassen

.html / .css lezen alleen de taal waarin de extensie is.

.php kan zowel HTML als PHP lezen. 

Op die manier kunnen we HTML en PHP in 1 document combineren.

Opdracht 9.3: hernoem je index.html naar index.php

- Open in Sublime Text 3 je project ‘portfolio’.

- Klik met de rechtermuis op het bestand ‘index.html’ en druk op ‘Rename’

- Verander de naam ‘index.html’ in ‘index.php’ en sla op.

Er verandert nu verder niets aan onze pagina, maar we zouden nu php kunnen gebruiken als we willen.

Opdracht 9.4: header.php en footer.php aanmaken

• Maak in de root (basis) van je projectmap (dezelfde map als index.php) twee nieuwe files: ‘header.php’ en ‘footer.php’. (zie rechts)
  
• Kopieer uit het bestand ‘index.php’ de hele basisstructuur inclusief het stuk van de body waar de header in staat naar het bestand ‘header.php’.
  
• Kopieer uit het bestand ‘index.php’ de hele basisstructuur inclusief het stuk van de body waar de footer in staat naar het bestand ‘footer.php’.
  
• Verwijder uit je bestand ‘index.php’ het element ‘header’ & alles wat daarin staat. 
• Doe ditzelfde voor het element ‘footer’.
  
• Doe de vorige stap voor alle bestanden waarin je je header gekopieerd hebt.
  
• Open je index.php in de browser (zijn je header en footer inderdaad weg?
  

PHP gebruiken

require_once()

Opdr. 9.5: Header en footer inladen

• Open PHP op de header-locatie in je index.php bestand.
  
• Require het bestand ‘header.php’ zoals op de bovenstaande manier voorgedaan.
  
• Sluit PHP hierna weer af.
  
• Open PHP op de footer-locatie in je index.php bestand.
• Require het bestand ‘footer.php’ zoals op de bovenstaande manier voorgedaan.
• Sluit PHP hierna weer af.
  
• Open je bestand ‘index.php’ in je browser. Zie je je header en footer weer terug? En op de andere pagina’s? Daar nog niet!
  
• Probeer ook op de andere pagina’s van je portfolio-site het stukje PHP te gebruiken om je header en footer te requiren.
  
• Misschien zijn er wel meer projecten waar je dit bij kunt toepassen. Kijk eens of het je lukt om daar ook de header in een apart bestand te zetten!