9. Online zetten & Header / Footer in PHP

WEB
Webdevelopment-II
Les 1 / Week 9
Online zetten & Header/Footer (PHP)
1 / 26
volgende
Slide 1: Tekstslide
Software Developer [WEB_A]MBOStudiejaar 1

In deze les zitten 26 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

WEB
Webdevelopment-II
Les 1 / Week 9
Online zetten & Header/Footer (PHP)

Slide 1 - Tekstslide

Week 9 // WEB
Online zetten
Header/footer in PHP


Slide 2 - Tekstslide

Met welke display-waarde zorg ik ervoor dat mijn element alleen de grootte van het element zelf heeft?
A
flex
B
block
C
inline
D
grid

Slide 3 - Quizvraag

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

Slide 4 - Open vraag

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

Slide 5 - Woordweb

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

Slide 6 - Open vraag

Hoe spreek ik een HTML-id aan in Javascript?

Slide 7 - Open vraag

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%

Slide 8 - Sleepvraag

Hoe reset ik de browserinstellingen?

Slide 9 - Open vraag

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)

Slide 10 - Tekstslide

Bij welke hostingprovider heb jij je hosting gekocht?

Slide 11 - Open vraag

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

Slide 12 - Tekstslide

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

Slide 13 - Open vraag

Online zetten met Strato

Slide 14 - Tekstslide

Slide 15 - Link

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.

Slide 16 - Tekstslide

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.

Slide 17 - Tekstslide

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. 

Slide 18 - Tekstslide

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.

Slide 19 - Tekstslide

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

Slide 20 - Tekstslide

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.

Slide 21 - Tekstslide

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.

Slide 22 - Tekstslide

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?

Slide 23 - Tekstslide

PHP gebruiken

Slide 24 - Tekstslide

require_once()

Slide 25 - Tekstslide

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!

Slide 26 - Tekstslide