1. Inleiding De cursus PHP & MySQL behandelt de programmeertaal PHP en het databaseprogramma MySQL zodat je in staat bent om bijvoorbeeld een eenvoudige webwinkel te bouwen. Om deze cursus te kunnen volgen wordt enige kennis van HTML en CSS verondersteld. HTML is nodig voor de structuur van je webpagina‟s, invoer van gegevens via formulieren en links te maken naar de verschillende pagina‟s. Alle opmaak wordt geregeld via een CSS. Als je van deze onderwerpen meer wilt weten vraag dan naar de cursus HTML en CSS. Je kunt ook kijken op http://www.handleidinghtml.nl/ PHP & MySQL werken volgens het client-server-principe. Dit betekent dat je naast je pc waar een browser is geïnstalleerd (client) ook een webserver nodig hebt. In de praktijk als je website online gaat, neem je een abonnement bij een provider om je site te hosten. In deze leeromgeving maak je gebruik van een lokaal geïnstalleerde webserver. Programmeren betekent nog steeds dat er code ingetoetst moet worden. Om deze klus gemakkelijker te maken gebruik je een editor. Het voordeel van een editor is dat deze je code controleert op fouten. Door met kleuren te werken laat de editor zien of de code aan bepaalde voorwaarde voldoet. Het werkt ongeveer als de spellingscontrole in Word. Notepad++ is een voorbeeld van een editor.
Alle genoemde software is open source software en gratis te downloaden.
Veel succes.
Er is vraag naar php-programmeurs op de arbeidsmarkt!
http://www.insyde.nl/
3
Cursus PHP & MySQL
2. Ontwikkelomgeving Om de opdrachten in deze cursus te kunnen maken heb je een ontwikkelomgeving nodig. Zoals in de inleiding al is verteld, websites werken volgens het cliënt-server-principe. Hierbij is de browser de cliënt kant; een programma als Internet Explorer of Firefox is op elke pc wel aanwezig. In de praktijk wordt je website gehost bij een provider en daar draait de webserver. Tijdens deze cursus werk je met een webserver op je pc. Er zijn meerdere webservers gratis te downloaden zoals Xampp en EasyPHP. In deze cursus is gekozen voor USB-webserver. De webserver voert de programma‟s, die samen je website vormen, uit. Het is echter ook handig om een programma te hebben waarin je de programma‟s schrijft, een editor. Dit kan ook met een eenvoudige tekstverwerker als Kladblok, maar een editor heeft als voordeel dat je programmacode in kleuren wordt gepresenteerd. Als je code niet aan de syntax voldoet dan krijg niet de juiste kleur. Dit voorkomt erg veel typefouten en werkt dus prettiger. Editors zijn in diverse soorten en maten gratis te downloaden; hier is gekozen voor Notepad++.
Opdracht downloaden usbwebserver Ga naar de website www.usbwebserver.net Download programma en handleiding (zie bijlage) en installeer USBWebserver
Opdracht Installeren USBWebserver In de bijlage van deze cursus is de handleiding te vinden waarin de installatieprocedure wordt behandeld. - Voer de installatie uit. Let op: plaats het gedownloade zip-bestand in de juiste map; daar wordt het programma geïnstalleerd. Er worden geen vragen gesteld over mappen e.d. -
4
Start USB Webserver op en kijk of bij Apache en MySQL groene vinkjes verschijnen
Cursus PHP & MySQL
Opdracht testen USBwebserver Start je browser op en toets in als url: http://localhost:8080/index.php Als voorgaande acties zijn gelukt verschijnt er een scherm met een dankwoord.
Opdracht testen MySQL MySQL is een databaseprogramma. Hoe je een database aanlegt en gegevens invoert, wordt later behandeld. Er is een PHP-programma meegeleverd waarmee je de meeste handelingen in MySQL via een grafische interface kunt uitvoeren; dit programma heet PHPMYADMIN. -
Start Internet Explorer op (of een andere browser) Toets als url in: http://localhost:8080/phpmyadmin Gebruikersnaam en wachtwoord staan gegeven (root en usbw) Klik op Start
In het eerste scherm staan links (grijze kolom) de databases. Rechts een serie tabbladen met diverse acties.
5
Cursus PHP & MySQL
Opdracht downloaden en installeren Notepad++ Ga naar de website www.notepad-plus-plus.org en download de laatste versie.
Installeer Notepad++.
Je werkomgeving is nu klaar. - Er draait een webserver (Apache) die je PHP-programma‟s uitvoert. - Met de editor Notepad++ kun je de programma‟s invoeren. - Het databaseprogramma MySQL is operationeel Let op de mappenstructuur: - Usbwebserver heeft een map ROOT waarin de php-programma‟s moeten staan - Er is een map MYSQL/DATA/ waar de database komt te staan Notepad++ - Bij Instellingen / voorkeuren / nieuw document kun je de bestandslocatie aangeven; bv. usbwebserver/root
6
Cursus PHP & MySQL
3. HTML en CSS Om deze cursus te kunnen uitvoeren is enige kennis van HTML en CSS noodzakelijk. HTML is nodige voor: - Structuur van de webpagina‟s (schermindeling) - Structuur van de website (sitemap) - Invoerformulieren Structuur webpagina‟s. In HTML-code zijn er drie mogelijkheden om de structuur van een pagina te bepalen: - Frames - Tabellen - Divisions Frames worden bijna niet meer gebruikt omdat je met tabellen en divisions flexibeler bent. In het voorbeeld wordt de opbouw van een pagina gegeven met de tabel-code en met de division-code. Via een CSS wordt de opmaak bepaald zoals achtergrondkleur, grootte van het vak en de positie. Om een CSS te kunnen maken moet je weten wat classes en id‟s zijn.
Als je het voorbeeld niet begrijpt vraag dan naar de cursus HTML en CSS of het boek HTML en CSS „de basis‟ van uitgever Pearson.
Voorbeeld voetbalvereniging NOAD (Nooit Opgeven Altijd Doorgaan) In het voorbeeld zijn de tabellen van een rand (border) voorzien zodat je kunt zien dat er meerdere tabellen in elkaar genest zijn.
7
Cursus PHP & MySQL In HTML-code:
8
Cursus PHP & MySQL Toelichting: - Let op het inspringen; hierdoor is duidelijk te zien dat er vier tabellen zijn. - Met commentaarregels kun je aangeven welke functie elke tabel heeft - De links naar andere pagina‟s: NIEUWS - De link naar het stylesheet (zie 4e regel) - In de pagina „gastenboek-toevoeg.html‟ vind je de code voor een formulier. CSS
Midden, groen, kop, menu en inhoud zijn classes die horen bij de html-tag
. Omdat elke cel in een tabel een andere opmaak kan hebben, moet je voor elke cel een classe maken.
9
Cursus PHP & MySQL Hetzelfde voorbeeld met divisions.
De html-code.
10
Cursus PHP & MySQL CSS
De classes zijn vervangen door id‟s. Id‟s beginnen met een # In de HTML-code kun je zien dat elke
zijn eigen id heeft.
11
Cursus PHP & MySQL
Opdracht HTML en CSS Op de CD die bij het cursusboek zit staan de bestanden NOAD_TABLE.ZIP en NOAD_DIV.ZIP. - Plaats deze bestanden in de map van waaruit je webserver programma‟s opstart (bij Xampp is dat bv. htdocs en bij usbwebserver de map root). - Laat de zip-files uitpakken. - Start je webserver - Start de table-versie van de website van NOAD (http://localhost:8080/home_table.html - Of start de div-versie (http://localhost:8080/home_div.html) Het is mogelijk dat de zip-file tijdens het uitpakken een map heeft aangemaakt; de url wordt dan http://localhost:8080/noad_table/home_table.html. De webserver voert ook html-bestanden uit. Omdat er geen servergerichte programmeertaal in voor komt, zal de server niets anders doen dan de code doorsturen naar de browser. De browser voert html en css uit.
12
Cursus PHP & MySQL
4. Programmeren Simpel gezegd is programmeren een opdracht in mensentaal omzetten naar een computertaal; een programmeur is een soort tolk. Omdat de computer binair werkt kan hij slechts eenvoudige handelingen verrichten. De taak van de programmeur gaat dus verder dan de taak van een tolk. Naast het vertalen moet een programmeur de opdracht ook kunnen analyseren. In dit geval betekent analyseren dat de opdracht vertaald moet worden naar deel-opdrachten die door de computer uitgevoerd kunnen worden. Een beetje logisch kunnen nadenken is een belangrijke eigenschap van een programmeur. In de volgende opdrachten worden de handelingen die een computer kan uitvoeren besproken. Dit zijn de controlestructuren: - De sequentie (opdrachten in volgorde uitvoeren) - De beslissing (een keuze maken uit ja/nee-vragen) - De herhaling (lussen maken waarin opdrachten worden herhaald) Variabelen. De meeste websites zijn interactief, d.w.z. dat de gebruiker acties kan uitvoeren waardoor de computer andere resultaten laat zien. Denk bv. aan het intoetsen van een zoekopdracht in Google of het inloggen bij je bankrekening. Zodra een website om invoer van gegevens vraagt heb je te maken met variabelen. Ingevoerde gegevens worden vastgelegd in geheugen van de computer. Dat geheugen kun je vergelijken met een ladenkast. Voor op het laadje kun je de naam plaatsen van de variabele (geheugenadres); in het laadje zit de inhoud (de ingevoerde gegevens).
Er zijn programmeertalen waarbij je de variabelen eerst moet declareren; dit is het benoemen van de variabelen die je gaat gebruiken en van welk type ze zijn. In PHP is dat niet nodig, afhankelijk van wat je invoert past PHP zich aan. Voer je een getal in dan wordt de variabele numeriek.
In een client-server-omgeving heb je te maken met twee „werelden‟; de wereld van de client en de wereld van de server. In websites betekent dit dat je variabelen hebt in HTML en in PHP (later komt daar MySQL nog bij). Variabelen moeten van de client naar de server worden doorgegeven en omgekeerd.
13
Cursus PHP & MySQL
POST en GET Met het Post en Get commando kunnen gegevens van de client naar de server worden gezonden. In de volgende voorbeelden wordt de werking van beide commando‟s besproken. POST In een website heb je een inlogscherm; in HTML ziet dat er zo uit:
Als het programma wordt uitgevoerd zullen, door een klik op de knop „log in‟, de gegevens naar de server worden verzonden. Hier kunnen de gegevens worden overgenomen door PHPvariabelen; dat gaat als volgt: $inlognaam = $_POST[‘inlognaam’]; $wachtwoord = $_POST[‘wachtwoord’]; Echo ‘Als inlognaam heb je ingevoerd $inlognaam’; Echo ‘je wachtwoord is $wachtwoord’;
Let op het verschil in naamgeving van variabelen: - in HTML gewoon woorden (letters) - in PHP begint elke variabele met het string-teken (dollar-teken), bovendien zijn variabelen in PHP hoofdlettergevoelig. PHP stuurt de gegevens naar de browser met het echo-commando. Post kun je overal vervangen door get en dan werkt het ook. Wat is het verschil? Bij de Get-methode zijn de variabelen zichtbaar in de url in de adresbalk. De lengte van de url is beperkt tot 1024 tekens; Post mag onbeperkt lang zijn.
GET Get is ook te gebruiken om variabelen met een link mee te sturen. In HTML ziet dat er zo uit: computer
In PHP $productnummer = $_GET[‘productnummer’]; $productnaam = $_GET[‘productnaam’];
Opdracht POST en GET Test de programma‟s prog_post.php en prog_get.php
14
Cursus PHP & MySQL
SEQUENTIE Een voorbeeld van de structuur Sequentie. De computer zal alle programma-regels achterelkaar uitvoeren. De opdracht is om een programma te schrijven waarbij de gebruiker twee getallen moet invoeren en het programma de vier basis-berekeningen (+, - , X , / ) uitvoert en de uitkomsten laat zien. Programmeren is eerder genoemd het omzetten van menselijke gedachten naar computerstructuren. Als hulpmiddel worden bepaalde schematechnieken gebruikt. Programma Structuur Diagrammen zijn schema‟s om structuur te brengen in je oplossing. Bij deze voorbeelden worden ze gegeven; later leer je meer over schematechnieken. PSD LEES “getal een “; A LEES “getal twee “; B SOM = A + B VERSCHIL = A – B PRODUCT = A * B QUOTIENT = A / B SCHRIJF SOM SCHRIJF VERSCHIL SCHRIJF PRODUCT SCHRIJF QUOTIENT Opdracht Rekenen Open het programma REKENEN.PHP in een editor en bestudeer onderstaande toelichting. Regel 2
Commando If(!empty($_POST[„submit‟]))
4
$A = $_POST[“A”];
6
$SOM = $A + $B
10
15
Rekenkundige operatoren: + * / echo "de som van " . $A . " en " . $B . " is: " . $SOM . " ";
4. Open een nieuw document in de editor en plaats deze regel 5. Sla het nieuwe document op onder de naam kop.html 6. Selecteer het menu met de links 7. Open een nieuw document en plaats het menu 8. Sla het document op onder de naam menu.html 9. Selecteer de regels waar de informatie staat 10. Open een nieuw document en plaatst de tekst 11. Sla het document op onder de naam home.html 12. Herhaal actie 9, 10 en 11 voor de bestanden nieuws.html, leden.html, wedstrijden.html, gastenboek.html en gastenboek_invoer.html Je hebt nu de volgende modules: Kop, menu, home, nieuws, leden, wedstrijden, gastenboek en gastenboek_invoer.