PHP Intro

Wat is een webserver

Wat ga je leren?

In deze les leer je het verschil tussen een front-end taal en een back-end taal. Je leert dat PHP een back-end taal is en dat je daarom een (web)server nodig hebt om PHP te kunnen gebruiken.

Lees de tekst goed, want in de volgende opdracht krijg je vragen over deze tekst.

Een webserver is een computer die verbonden is met het internet en waar bestanden op staan op staan die nodig zijn om een website te laten zien.

Elke website die jij bezoekt op het world wide web staat ergens op een webserver. Zo'n webserver heeft een map (folder) met daarin webpagina's die bestaan uit HTML-pagina's, CSS-bestanden, JavaScript, PHP-bestanden en dergelijke.

Bestandssoorten	Functie
HTML	Basis opmaak van een webpagina
CSS	Detail opmaak van een webpagina
JavaScript	Interactie programmeren in de browser
PHP	Interactie programmeren op de server

Tot nu toe ben je gewend om de HTML-bestanden gewoon vanaf je eigen computer te starten door er dubbel op te klikken. De browser leest de bestanden en laat deze een mooie (of lelijke) pagina zien.

Je bent als gebruiker van webapplicaties gewend om bijvoorbeeld in te loggen, een bericht achter te laten of een e-mail te sturen. Deze applicaties zijn dynamisch. Dynamische applicaties hebben een input (invoer) en zetten deze om in een output (uitvoer) .

Bijvoorbeeld:

input : gebruikersnaam en wachtwoord
output : een boodschap dat het aanloggen is gelukt of een boodschap dat het aanloggen niet is gelukt.

Om een dynamische webapplicatie te maken heb je meestal een webserver nodig die de pagina's serveert. De webserver krijgt van de browser, de cliënt een verzoek en de webserver behandeld het verzoek en stuurt een antwoord terug. Net als een ober die een drankje serveert .

Stel, je wilt een overzicht van alle studenten in een klas. Je vraagt via de browser dan om het overzicht, bijvoorbeeld door op een menu te klikken. Het verzoek gaat dan via internet naar een webserver en die stuurt het antwoord via internet weer terug naar jouw browser .

Omdat je nog geen toegang hebt tot een echte webserver gaan we er eentje simuleren. Simuleren is het 'net doen alsof'. We simuleren de webserver met een gratis applicatie (wij doen dat met XAMPP) die je kunt installeren op je eigen laptop. Dat heet dan een lokale server. Dat wordt ook wel localhost genoemd. Je laptop is dus door het gebruik van XAMPP een webserver geworden.

Om een dynamische applicatie te maken gaan we in deze module gebruik maken van PHP.

De server heet ook wel back-end (achterkant). PHP is een back-end-taal. Dat betekent dat de taal dus op de back-end, de server draait.

Een bezoeker van de site (de eindgebruiker) kan de code die op de server staat niet zien of wijzigen.

Bestandssoorten	Functie	Waar
HTML	Basis opmaak van een webpagina	Front-end / browser
CSS	Detail opmaak van een webpagina	Front-end / browser
JavaScript	Interactie programmeren in de browser	Front-end / browser
PHP	Interactie programmeren op de server	Back-end / server

Database

Met PHP kun je ook een database benaderen waarin je gegevens kan opslaan voor een langere periode, bijvoorbeeld de gegevens van een gebruiker zoals voornaam, achternaam, e-mail en wachtwoord.

Als je met PHP aan de slag gaat dan kun je pagina's dynamisch maken. Dit betekent dat de output afhankelijk is van de input van de gebruiker.

XAMPP

Tijdens deze module maak je gebruik van een lokale server. We gebruiken hiervoor XAMPP.

Je kunt XAMPP downloaden en installeren als je dat nog niet hebt gedaan.

Weet je (nog) niet hoe je XAMPP moet installeren op jouw Windows machine of heb je een "port conflict",

of heb je andere problemen, kijk dan eens of de info op deze pagina je kan helpen.

Opdracht

1. Installeer XAMPP op de manier zoals uitgelegd in de les.
2. Volg de instructies in de les en voer de kennischeck uit in de les, 8 vragen en minimale score is 80%

Inleveren

1. Volg de instructies in de les en lever een screenshot van je XAMPP in.
   
2. Lever een screenshot van de kennis-check die je tijdens de les hebt uitgevoerd in.

Welkom!

Je hebt XAMPP geïnstalleerd.

Voer de volgende stappen uit.

1. Start XAMPP.
2. In de folder C:\xampp\htdocs staat een bestand index.php. Verwijder dit bestand!
3. Maak een nieuwe folder aan en noem die PHP1
4. Met VSC open je de net aangemaakte folder.
5. In deze folder maak je met VCS een nieuw bestand en je noemt dit bestand opdracht1-jouw-naam.php.
   • Vervang jouw-naam door jouw naam
     Overal waar in het vervolg jouw-naam staat, vervang je de tekst door jouw naam.
6. Met VSC open je het net aangemaakte bestand.
7. Je maakt de volgende code.
   

   <?php
   
   echo "Hello world!";
   
   ?>

8. Ga nu naar de browser en type als url, localhost in.
9. Open nu de folder en het bestand dat je net hebt gemaakt, wat gebeurt er?

Als het goed is zie er output in de browser verschijnt:

Uitleg code

Wat gebeurt er in deze code?

• Op regel 1 <?php
  wordt tegen de webserver verteld dat we code in php gaan maken. De server/XAMPP weet dan welke taal jij gata praten.
• Op regel 3, echo
  Het woordje echo betekent dat de server output moet gaan maken. Deze output wordt naar de web browser gestuurd.
• Op regel 3 "Hello world!"
  echo moet iets naar de browser sturen, dan moet je natuurlijk wel vertellen wat dat is. Het zinnetje na de echo is dat wat er naar de browser wordt gestuurd. Dit zinnetje staat tussen "" om aan te geven waar het zinnetje begint en waar het eindigt.
• Op regel 3 ;
  Na ELK commando in PHP staat een ; om aan te geven dat het commando afgelopen is en. De meest gemaakte fout in PHP is dat je een ; vergeet. Wedden dat jij dat dit jaar ook tig keer gaat vergeten?
• Op regel 5 ?>
  We zijn klaar met onze commando's in PHP. We vertellen de server/XAMPP dat we stoppen met "PHP praten".

Test de code en controleer of er in je browser de tekst Hello World! verschijnt.

Opdracht

Verander de (php) code zodat de volgende output in de browser verschijnt:

Welkom jouw-Voornaam !

Vergeet niet jouw-Voornaam te vervangen door jouw voornaam.

Inleveren

Je moet twee bestanden inleveren: