PHP 1 - introductie, xampp, echo, ;, commentaar

• Informatica
• WO
• Studiejaar 4,5

Fundament

introductie

D. Programmeren met PHP

Hoofdstuk 1.1 tmt 1.4

https://fundament-online.nl/leeromgeving/content.php?paragraaf_id=115044

Leerdoelen

Na deze les kun je:

• uitleggen wat PHP is en wat het doet
• met XAMPP een PHP en MySQL server starten
• een simpel PHP "Hello, World!" bestand uitschrijven
• uitleggen hoe je PHP code begint en eindigt
• uitleggen hoe je HTML code "maakt" in je PHP bestand
  
• vertellen wat een ; doet en hoe je commentaar toevoegt

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Bouwen app

Voor onze web applicatie moeten we kennis hebben over de volgende 3 onderwerpen:

• database (weet je nog? RDBMS?)
• SQL-taal (om de database te benaderen en bewerken)
• PHP-taal (voor de website en de database)

Wat is PHP? 1/2

PHP is een échte programmeertaal

PHP werkt samen met HTML en CSS

PHP werkt op de server van de website 

JavaScript werkt op de client (computer van de gebruiker)

JavaScript is dus onveilig(er), omdat de gebruiker alles kan zien wat er gebeurt... bij PHP is dat verborgen

Wat is PHP? 2/2

PHP is een programmeertaal dat op de server werkt

Waar we dus bij HTML en JavaScript gewoon de bestanden direct op onze laptop konden openen, kan dat nu niet: we hebben een server nodig

Straks gaan we daarom iets installeren dat lokaal de server installeert, tegelijkertijd met SQL software

XAMPP download

Er zijn verschillende mogelijkheden om lokaal een PHP server te installeren

Wij hebben gekozen voor de XAMPP versie van ApacheFriends.com : https://nl.wikipedia.org/wiki/XAMPP

XAMPP staat voor X-platform (cross) Apache MySQL PHP Perl

https://informatica.stmichaelcollege.nl/software/

XAMPP installatie 1/5

Open het programma en klik op "OK" als hij piept over UAC

Bij "Select Components" laat je alles 

aangevinkt (als je niet genoeg ruimte 

heb dan gooi je Fortnite maar weg)

Druk dan op "Next >"

XAMPP installatie 2/5

Bij "Installation folder" geef je een plek aan in je "Mijn Documenten"

Druk daarvoor eerst op het folder icoontje:

Ik kies voor C:\Users\<jouw naam>\Documents

(maar c:\xampp kan ook)

Zet er \XAMPP achter

En druk op "Next"

 

XAMPP installatie 3/5

Selecteer "English" als taal (behalve als je liever Deutsch hebt)

Druk op "Next" en weer op "Next"

Zet een lekker muziekje op en wacht tot hij klaar is met installeren

XAMPP installatie 4/5

Windows beveiliging zal vragen of de diverse onderdelen toegang mogen tot je netwerk, deze kun je gewoon toestaan

Uiteindelijk zie je dit scherm:

Laat daar het vinkje aan staan 

en druk op "Finish"

XAMPP installatie 5/5

In het configuratiescherm kun je de diverse "modules" opstarten via de "Start" knop

Apache is de PHP server

MySQL is de SQL server

1. Druk bij Apache op "Start"
2. Druk bij MySQL op "Start"

XAMPP bestanden

De bestanden van je website staan in de XAMPP subfolder 

.\htdocs

htdocs : HyperTextDocumentS

Tip: zet deze map in je OneDrive of Google Drive!

Je kunt je lokale website zien via http://localhost

Opdracht # 1: XAMPP hello

1. Maak een bestand genaamd 1.1.php in .\htdocs
   
2. Zet in dat bestand de volgende
                                    PHP code:
   (met VS Code of Notepad++)
3. Ga daarna naar: https://localhost/1.1.php
   Tadaaaa, je hebt nu je eerste PHP pagina gemaakt!
4. Kijk in inspector wat de broncode is... zie je <?php ... ?>

Und jetzt?

We hebben nu de PHP server, daar kun je dus mee oefenen als Fundament dat aan je vraagt ( in .\htdocs )

Voor nu in de les eerst wat theorie over hoe PHP werkt

Daarna wat uitleg over de syntax van PHP

Hoe werkt PHP? 1/2

De gebruiker doet via de browser een HTTP(S) request

Feitelijk betekent dit een pagina openen/ergens op klikken

Dit request gaat naar de server, die via PHP opdrachten uitvoert op de Database 

en/of het Bestandssysteem 

(Engels: FS of File System)

Hoe werkt PHP? 2/2

De functionaliteit van PHP kan worden aangepast/uitgebreid door middel van extensies

Hier rechts zie je een overzichtje...

alfabetisch, zoals je ziet (héééél goed kijken!)

https://www.php.net/manual/en/
extensions.alphabetical.php

<?php ... ?>

PHP is een programmeertaal, daarmee programmeer je eigenlijk de website

Wat de browser ziet is dus niet PHP, maar eigenlijk HTML... met PHP maak je dus eigenlijk HTML!

PHP heeft de 

volgende structuur

echo

Met echo kun je in PHP dus HTML maken... 

hoe zou deze pagina eruit zien?

echo

Met echo kun je in PHP dus HTML maken... 

hoe zou deze pagina eruit zien?

                                                                        zo dus:

; 1/2

En het was je vast al opgevallen... elke regel (statement) eindigt met een ;

PHP is  strikter dan JavaScript, hij zal echt een foutmelding geven als je de ; per ongeluk weglaat tussen regels!

; 2/2

Commentaar

In PHP kunnen we commentaar toevoegen:

• // geeft commentaar voor 1 regel
• # geeft ook commentaar voor 1 regel
• /*
      hier is het hele blok commentaar
   */

Opdracht 2

1. Maak een kopie van 1.1.php en noem die 1.2.php
   
   
2. Voeg op twee manieren commentaar toe aan 1.2.php
   
   
3. Open de webpagina en kijk of je via inspector de commentaar ziet staat

Opdracht # ? PHP filter

Idee:

maak in PHP een pagina die van alle niet PHP bestanden in dezelfde folder een downloadlink in een ongeordende lijst maakt, en maak daarboven een edit link die deze lijst kan "filteren", zodat de gebruiker een bepaald bestand kan zoeken

Opdracht # ? SSL

Idee:

voeg een SSL certificaat toe

volg deze leidraad (nog testen!): https://gist.github.com/nguyenanhtu/33aa7ffb6c36fdc110ea8624eeb51e69

of

https://robsnotebook.com/xampp-ssl-encrypt-passwords/

Leerdoelen

Nu kun je:

• uitleggen wat PHP is en wat het doet
  
• met XAMPP een PHP en MySQL server starten
  
• een simpel PHP "Hello, World!" bestand uitschrijven
• uitleggen hoe je PHP code begint en eindigt
  
• uitleggen hoe je HTML code "maakt" in je PHP bestand
• vertellen wat een ; doet en hoe je commentaar toevoegt

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6