MYSQL-DATABASE PHP VIA DREAMWEAVER

DYNAMISCHE WEBSITES

• MYSQL-DATABASE • PHP VIA DREAMWEAVER

1. DATABASES EN SQL 1.1 WAMPSERVER

We gaan dynamische websites leren maken via Dreamweaver. In het begin zullen we leren werken met PHP, de code zal volledig door Dreamweaver gegenereerd worden. Het maken van de database doen we in MySQL.

nze pagina’s kunnen enkel communiceren met de databases als we SQL gebruiken. Tenslote moeten we O PHP-webruimte zoeken waar we onze pagina’s op kunnen plaatsen. Om een dynamische website op je eigen computer te kunnen bekijken (locaal), moet je over een persoonlijke webserver beschikken. De software die we hiervoor gebruiken is Apache. Wij gaan hiervoor Wampserver gebruiken, dit bevat PHP5, MySQL en Apache2. (download via wampserver.com).

1.2 DATABASE ONTLEDEN

Een database kan erg veel gegevens bevatten. Alle producten van een winkel, alle berichten van een gastenboek, alle gebruikers die mogen inloggen, enz ... Belangrijk is dat je de opbouw van een database kent. De database bevat 1 of meerdere tabellen. Een tabel bestaat uit verschillende velden (kolommen) en meestal uit meerdere records (rijen). Voorbeeld: Volgende database stageblog

bevat twee tabellen: inloggen en stageverslagen. Beide tabellen bestaan uit verschillende velden (kolommen). De tabel inloggen bestaat uit twee velden gebruiker en wachtwoord. 2

E en tabel moet altijd een primaire sleutel hebben. Dit kan enkel worden toegekend aan een uniek veld. Dit veld moet een waarde krijgen die uniek is. Meestal wordt dit onder de vorm van een id gedaan. Een ander uniek veld bijvoorbeeld rijksregisternummer of postcode kunnen zijn. Er zijn namelijk nooit 2 personen met hetzelfde nummer of nooit 2 gemeentes met dezelfde postcode.

1.3 VERSCHILLENDE DATABASES AANMAKEN

1. Jij en je vrienden hebben een hele boel dvd’s en jullie lenen die ook uit van elkaar. Maak een database en tabel dvd (velden= 8) waarin je bijhoudt wie welke dvd heeft uitgeleend en wanneer. Tevens moet opgenomen worden wie de eigenaar van de dvd is. id = primaire sleutel, auto_increment id titel regisseur prijs jaartal naam_eigenaar naam_uitlener datum_uitgeleend 1 Hotel Terry George 12,00 2004 tania@hotmail. dirk@hotmail. 2010-07-22 com Rwanda com 2 La Vita È Roberto Benigni 14,00 1997 steven@hottania@hot2010-06-10 Bella mail.com mail.com 3 King Arthur Antoine Fuqua 16,00 2004 dirk@hotmail. tania@hot2010-08-13 com mail.com

2. Maak een nieuwe database wijnwinkel. Selecteer de knop SQL en voeg het sql-bestand wijnen.sql toe.

Doe hetzelfde voor boeken.sql, maak een nieuwe database bibliotheek en importeer het bestand.

3

3. Maak een database en tabel recepten (velden= 9): id = primaire sleutel, auto_increment

id

recept

1

Calamares en scampi’s op Griekse wijze

categorie aantal moei- recept_van datum_ lijkstoegehiedsvoegd graad voorge- 4 matig Rina 2010-08rechten 25

ingrediënten

bereidingswijze

bereidingstijd

200 gr calamares

zwarte en witte tagliatelle

...

Tagliatelle beetgaar koken ...

00:20:00

We gaan al deze databases later integreren in verschillende opmaken voor dynamische websites.

4

2. MySQL SQL betekent Structured Query Language. Hiermee ken je gericht informatie uit databases halen m.b.v. query’s. Je kan deze taal later in Dreamweaver ingeven. We gaan starten in phpmyadmin en selecteren de gewenste database en tabel. Kies voor de knop SQL en de bovenste menubalk. 2.1 BASISACTIES MYSQL

• Het opvragen van gegevens uit een tabel SELECT * FROM tabel ( * = alle kolommen ) SELECT kolomnamen FROM tabel SELECT kolomnamen FROM tabel WHERE kolomnaam operator “waarde” • Het invoegen van nieuwe records in een tabel INSERT INTO tabelnaam (kolom1, kolom2, ...) VALUES (“waarde1”,“waarde2”,...) • Het aanpassen van records in een tabel UPDATE tabelnaam SET kolom1 = “waarde1”, kolom2=“waarde2”, ... UPDATE tabelnaam SET kolom1 = “waarde1”, kolom2=“waarde2”, ... WHERE criteria • Het verwijderen van records in een tabel DELETE FROM tabelnaam DELETE FROM tabelnaam WHERE criteria

2.2 OPERATOREN

Operator ORDER BY

Betekenis Hiermee kan je je resultaten ordenen. Dit kan alfabetisch van klein naar groot, ... ASC: van klein naar groot en DESC: van groot naar klein Voorbeeld: SELECT * FROM gemeente ORDER BY postcode ASC; Gebruik je bij WHERE = is gelijk aan. <> is niet gelijk aan Let op: bij sommige SQL-versies wordt != gebruikt. > groter dan Voorbeeld: SELECT * FROM gemeente WHERE postcode > “3500”; < kleinder dan. >= is groter dan of gelijk aan. <= is kleiner dan of gelijk aan. LIKE zoals Later zullen we een eigen zoekmachine maken met de operator LIKE! Voorbeeld: SELECT * FROM gemeente WHERE gemeente LIKE “H%”; % = Het percentage geeft aan waar er eventueel nog andere tekens mogen voor of achter staan. BETWEEN Ligt tussen ... en ... Voorbeeld: SELECT * FROM gemeente WHERE postcode BETWEEN “1000” AND “3000”; OR Hierdoor kan je meerdere criteria geven Voorbeeld: SELECT reeks, nummer, titel FROM strips WHRE reeks=”De blauwebloezen” OR reeks =”De nieuwe avonturen van Sammy”; AND Voorbeeld: SELECT reeks, nummer, titel FROM strips WHRE reeks=”De blauwebloezen” AND nummer >=”45”; 5

2.3 FUNCTIES

• AVG: gemiddelde Voorbeeld: SELECT AVG(omzet) as Gemiddelde FROM winkel; Via as kan je een alias of een andere naam geven aan een veld. • Count: aantal records Voorbeeld: SELECT count(reeks) as totaal FROM strips; Voorbeeld2: SELECT count(*) as totaal FROM winkel; * = alle kolommen • Max: maximum Voorbeeld: SELECT max(omzet) as Maximum FROM winkel; • Min: minimum Voorbeeld: SELECT min(omzet) as Minimum FROM winkel; • Sum: som

2.4 MEERDERE TABELLEN COMBINEREN

Met JOIN kan je velden van verschillende tabellen opvragen. Je moet wel eerst de naam van de tabel intypen en vevolgens de naam van het veld. De 2 gegevens scheid je van elkaar met een punt. Beide tabellen worden nu in één overzicht weergegeven. Voorbeeld: SELECT winkel.winkelnaam, winkel.postcode,

gemeente.gemeente FROM winkel, gemeente WHERE gemeente.postcode = winkel.postcode, 2.5 KLASSIKALE OEFENING:

Open de database wijnwinkel en tabel wijnen,

1. Toon alle wijnen die er zijn. Toon de naam, kleur en prijs.

.......................................................................................................................................................................................... 2.Toon alle namen met hun land en streek. Orden op streeksnaam.

.......................................................................................................................................................................................... 3. Toon alle wijnen en hun jaartal. De streek moet Languedoc zijn.

.......................................................................................................................................................................................... 4. Uit welke streken zijn er wijnen in de database, orden alfabetisch.

.......................................................................................................................................................................................... 5. Toon elke wijn met zijn jaartal vanaf 2003.

.......................................................................................................................................................................................... 6. Toon elke wijn met “Vintner” in de naam.

.......................................................................................................................................................................................... 7. Hoeveel wijnen uit de streek “zuidelijk Rhônegebied” zijn er in de database? Het jaartal moet vanaf 2002 zijn. .......................................................................................................................................................................................... 6

8. Wat is het gemiddelde prijs van alle wijnen?

.......................................................................................................................................................................................... 9. Verander de prijs naar € 7,00 voor elke wijn die komt uit de streek “Langedoc” en die nu te koop staat voor €6,00.

.......................................................................................................................................................................................... 10.Verwijder de wijn “Vintners Rosé” uit de lijst deze is niet langer meer in voorraad. ..........................................................................................................................................................................................

2.5 INDIVIDUELE OEFENING:

Open de database bibliotheek en tabel winkel en strips,

1. Toon alle eigenaars van een winkel.

.......................................................................................................................................................................................... 2. Toon alle eigenaars van een winkel, samen met de postcode, orden uit op postcode.

.......................................................................................................................................................................................... 3. T oon alle strips (de reeks, titel, nummer) . Orden de strips alfabetisch op reeks en per reeks op nummer.

.......................................................................................................................................................................................... 4. T oon alle strips van de tekenaar ‘Studio Vandersteen’

.......................................................................................................................................................................................... 5. T oon alle strips die met een S beginnen (de reeks)

.......................................................................................................................................................................................... 6. T oon alle strips (titel, prijs) die duurder zijn dan € 4.

.......................................................................................................................................................................................... 7. T oon alle strips van ‘Suske en wiske’ en ‘de blauwbloezen’

.......................................................................................................................................................................................... 8. Hoeveel strips zitten er in de database?

.......................................................................................................................................................................................... 9.Verander de uitgever Albert René naar de nieuwe korter naam Albert.

.......................................................................................................................................................................................... 10.Verwijder alle strips waar bij de inhoud niet beschikbaar staat. ..........................................................................................................................................................................................

7

3. MySQL VANUIT DREAMWEAVER 3.1 SITE DEFINIËREN

Start met het aanmaken van een nieuwe site in Dreamweaver.

Local info:

• Sitenaam: geef je site een naam • Lokale hoofdmap: deze moet staan in C:\wamp\www • Http adres: http://localhost/*** (*** vervang je door de naam van je map bij Local root folder).

Externe info:

Indien je de site wenst te publiceren, dit is niet verplicht voor deze oefeningen • Toegang: FTP • FTP-Host het adres van je webserver (url of ip-adres) • Inlognaam: gebruikersnaam • Wachtwoord: wachtwoord

Test server:

• Servermodel: PHP MySQL • Toegang: Local/Network • Servermap testen: dezelfde map als bij Lokale info • URL Prefix: http://localhost/*** Vul hier het identiek hetzelfde in als bij “http adres”

3.2 KOPPELING MYSQL DATABASE

Maak een nieuwe pagina aan, kies nu voor de bestandsextensie PHP. Nu je site klaar is, dien je een connectie te leggen van je pagina’s naar MySQL database. Dit moet je doen voor één pagina. Hierdoor zal je website de database herkennen. Ga naar het paneel Databases en klik op het +-icoon. Let op dat je website zeker in c:\wamp\www staat! • Naam verbinding: kies een eigen naam van je connectie. Kies een woord zonder spaties, hoofdletter of speciale tekens. • MySQL verbinding: localhost (dit is altijd “localhost”) • Gebruikdersnaam: root (dit is altijd “root”) • wachtwoord: leeg (tenzij je je rechten in phpmyadmin beveiligd hebt) • Database: Klik op Select en er verschijnt een lijst van alle bestaande databases.

8

Je kan nu in je paneel Databases de hele structuur van je database zien: tabellen met velden. Achter elk veld kan je ook zien welke lengte en type deze heeft. Je kan niets wijzigen aan je database !

3.3 GEGEVENS TONEN

e gaan nu via receordsets (query) op een visuele manier W SQL aanmaken. Indien je niet alles kan selecteren wat je wil, moet in in SQL naar de geavanceerde mode ipv eenvoudige mode.

Kies voor +-icoon bij het paneel Recordset (Query) • Naam: geef je recordset een naam • Verbinding: kies je connectie • Tabel: kies de tabel uit de lijst. • Kolommen: kies best voor Alle. Je kan dan nog kiezen welke velden je al dan niet toont. • Filter: wordt enkel gebruikt als je niet alle gegevens wil tonen. Bijvoorbeeld bij een detailpagina, zoekformulier, ... • Tabel: Hiermee kan je de gegevens ordenen op een bepaald veld, zowel oplopend (ASC) als aflopend (DESC).

Kies Testen om een overzicht te krijgen van de resultaten. Kies Geavanceerd als je in de SQL aanpassingen wil doen. 3.4 VELDEN TONEN

u je recordset klaar is, moet je nog bepalen welke velden je wil tonen in je pagina. Maak nu best een tabel N voor je lay-out, in deze tabel gaan we de velden slepen. Je kan de velden een bepaalde opmaak geven (tekstkleur, lettertype, vet,... via css). Je kan er tevens woorden of tekens voor of achter typen. Selecteer de velden {rs dvd. naam eigenaar} en {rs dvd.naam uitlener} en typ in het palet Eigenschappen bij Koppeling “mailto:” voor.

Je kan het resultaat bekijken via F12 of via Live View.

150px 10px

geen waarde meegeven

Tabel: 3 kolommen en 9 rijen, breedte: 420 px

9

3.4 AFBEELDINGEN TONEN

We gaan een dynamische figuur tonen. We voegen eerst in de database en tabel dvd (in phpmyadmin) een nieuw veld toe “afbeeldingen” in de tabel dvd (dit vind je onder paneel structuur). Kies voor Invoegen > Afbeelding en kies bovenaan de optie Gegevensbronnen. Selecteer in de lijst het veld waarin het pad

van elke foto staat. Indien je de foto’s in een submap hebt staan en deze niet vermeld hebt in de database, moet je bij URL de mapnaam voortypen (bijvoorbeeld afbeeldingen/
Om alle records te kunnen zien, moet je een “Herhalingsgebied” instellen. Selecteer wat je wilt herhalen, dit kan een rij of een volledige tabel zijn. In het voorbeeld selecteer je de volledige tabel. Ga naar het tabblad Servergedragingen en kies voor het +-icoon Herhalingsgebied. Je kan ook instellen hoeveel records

je per pagina wil tonen.Als je kiest voor Alle records, worden deze op één pagina getoond. Rond de geselecteerde gebieden komt een rechthoek te staan met “Herhalen”.

Indien je gekozen hebt om slechts een aantal records per pagina te tonen (in het voorbeeld per 1), moet je een navigatiebalk invoegen via Invoegen > Dataobjecten > Recordset Pagineren > Navigatiebalk recordset. Positioneer dit boven of onder het herhalingsgebied.

Bekijk het resultaat opnieuw via Live view. Tip: verwijder de rand rond de afbeeldingen. 3.6 LEGE RECORDS OPVANGEN Indien de recordset leeg is, is het aangenaam dat de bezoeker

een aangepaste mededeling krijgen. • Typ in de webpagina een mededeling in. • Selecteer deze mededeling. • Ga nar het tabblad Servergedragingen en kies voor het +-icoon Gebied weergeven > Weergeven indien lege recordset. Rond je tekst verschijnt nu een kader met de boodschap Weergeven indien ...

10

• Selecteer nu de tabel waarin de gegevens staan, de navigatiebalk en andere zaken die mensen mogen zien als er wel records zijn. • Ga naar Servergedragingen en kies voor het +-icoon Gebied weergeven > Weergeven indien niet lege recordset.

3.7 HET AANTAL RECORDS TONEN

et kan interessant zijn om het aantal records te tonen. Op die manier weet de bezoeker hoeveel berichten er H in het gastenboek zitten, hoeveel producten er verkocht worden, enz.

Ga naar het tabblad Servergedragingen en kies voor het +-icoon Telling records weergeven. Er zijn 3 mogelijkheden: • Nummer aanvangsrecord tonen: het nummer van de eerste record die op de pagina getoond wordt. • Nummer eindrecord tonen: het nummer van de laatste record die op de pagina getoond wordt. • Totaal aantal records tonen: het totaal aantal record die aanwezig zijn.

3.8 ACTIES BEWERKEN EN VERWIJDEREN

Je kan acties uit het paneel Servergedragingen bewerken door er op te dubbelklikken. Je kan ze verwijderen door op de deletetoets of --icoon te drukken. Let op: Bij elke actie horen heel wat regels PHP-code. Wanneer een actie wordt verwijderd, blijven soms enkele regels in de code staan en dit zorgt voor problemen!

Bekijk het resultaat in de browser.

Er is nog één probleempje, de letter È wordt niet weergeven in de titel. Oplossing: plaats de html-code È binnen de database (in phpmyadmin). Surf naar http://www.degraeve.com/reference/specialcharacters.php voor een duidelijk overzicht.

11

3.9 INDIVUDELE OPDRACHT

e gaan een dynamische site ontwerpen voor een wijnshop. We geven een overzicht weer van alle wijnsoorten, W per pagina zullen er 4 wijnen worden weergegeven.

• Maak een eigen ontwerp, enkel de pagina Aanbod moet werken. • Kies een eigen naam “Wijnshop ...” • Integreer de tekstopmaak binnen uw gekozen huisstijl (CSS). • Plaats uw naam onderaan als “Copyright © eigennaam - 2010-2011”.

12

4. DETAILPAGINA 4.1 VOORBEELD Je kan niet altijd alle gegevens tonen op de indexpagina. Hierdoor werkt men dikwijls met detailpagina’s: de

hoogstnoodzakelijke info staat op de index-pagina, als men een product aanklikt, krijgt men een detailpagina te zien met alle mogelijke informatie. Voorbeeld: mediadis.be

hoofdpagina

detailpagina

ij het klikken op de link, wordt een id meegegeven. In het bovenstaande voorbeeld is de link B http://www.mediadis.com/music/detail.asp?id=229057. Er wordt echter niet per product een aparte pagina gemaakt, de pagina detail bevat een filter.

4.2 DETAILPAGINA MAKEN We werken verder binnen de site “dvd”. Maak een nieuwe

php-pagina en sla deze op als detail.php. Maak een recordset “rs_dvd” met een filter, de filter is als volgt: Voorbeeld: dezelfde tabel uit de indexpagina werd gebruikt,

Voeg enkel de datum bovenaan toe. Maak gebruik van een terug knop naar de indexpagina.

13

4.3 LINK LEGEN VANUIT INDEX

Vanuit de indexpagina dienen we een speciale link te leggen: • Selecteer een woord of figuur, in het voorbeeld is zowel de afbeelding als de titel geselecteerd geweest. • Leg een link via het mapje-icoon • Selecteer de pagina detail.php • Klik op Parameters en typ bij Naam “id” in, bij waarde klik je op het donder-icoon en selecteer “id”. 4.4 DATUMS WIJZIGEN

anneer je het datetime veld gebruikt zal deze altijd opgeslagen worden in de vorm YYYY-MM-DD HH:MM:SS. W We gaan in het tabblad Bindingen de data wijzigen. Installeer eerst de plug-in “mtPHPServerFs”. en start Dreamweaver opnieuw op. Selecteer het veld datum_uitgeleend en verander het Formaat via MediaTafel > Date/Time..

14

4.5 INDIVIDUELE OPDRACHT

erk verder aan de site wijnshop, maak voor elke wijn een detailpagina waar de rest van de informatie terecht W komt. We gaan de plug-in “Breadcrumbs” installeren, zo kan de bezoeker zich beter oriënteren.

15

5. GEGEVENS TOEVOEGEN 5.1 FORMULIER MAKEN Natuurlijk moet het ook mogelijk zijn om via een webpagina gegevens toe te voegen aan een database. Op deze

manier kan zelfs iemand die niets van webdesign kent iets toevoegen aan zijn/haar site. Informatie toevoegen aan een database gebeurt altijd via een formulier. Maak een formulier, voorzie voor elk veld in de tabel (behalve id) een formulierobject (tekstvakken, keuzerondjes, lijsten, ...). Geef elke object een duidelijke naam, gebruik dezelfde naam als de namen van de velden in de database..

5.2 GEGEVENS TOEVOEGEN

Selecteer de knop Toevoegen en ga naar het tabblad Servergedragingen. Kies voor het +-iccoon Record Invoegen. Bij Kolommen check je of het formulierveld in een juist databaseveld wordt toegevoegd. Bij waarde kan je eventueel nog een ander veld kiezen bij een geselecteerde kolom. Ga na invoegen naar wijnshop.php. Tip: Maak een transparante afbeelding in de juiste verhoudingen (Breedte 150px hoogte: 210px). Sla op als een transparant.gif en geef dit als waarde mee bij afbeeldingen zodat er geen tekst in de plaats verschijnt.

16


aak een formulier voor onze wijnshop zoals hieronder.Voeg een eigen gekozen wijn toe. De afbeelding plaats je M in de juiste proporties (Breedte 80xp en Hoogte: 200px).

17

5.4 OPDRACHT: OLDTIMERS

Maak een nieuw ontwerp voor het thema “Oldtimers”. Afbeeldingen en database worden meegeleverd.

Hou rekening met:

Er zullen in totaal 5 pagina’s zijn: • Home (index.html); • Oldtimers (oldtimers.php: weergave van alle inhoud uit de database); • Chevy (chevy.php: weergave van enkel de aard: chevy); • Mustang (mustang.php: weergave van enkel de aard: mustang); • Gran Torino (torino.php: weergave van enkel de aard: torino);

STAP 1: Ontwerp in photoshop en segmenteer in afzonderlijke afbeeldingen (banner, menu, ...).

STAP 2: Maak een index.html en positioneer de afbeeldingen in div-blokken.

HTML code:

Home

Oldtimers

• Breedte van verschillende schermen (= bufferruimte), dit mag niet breder zijn dan 1000 pixels. • De hoogte moet automatisch aangepast worden aan de inhoud.

18

Chevy

Mustang

Gran Torino

Lorem ipsum...

Copyright 2010 - kerfuffle.be

#container #hoofding #inhoud

#links

#rechts

#footer

CSS code: body { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; text-align: center; margin: 0px; padding: 0px; background-attachment: fixed; background-image: url(layout/achtergrond.jpg); background-position: center top; } #container { width:980px; text-align: left; margin-top: 15px; margin-right: auto; margin-bottom: auto; margin-left: auto; background-image: url(layout/wrapper.jpg); }

19

#hoofding { width:980px; height:204px; } #inhoud { width:980px; } #links { width:180px; float: left; padding-right: 10px; padding-left: 10px; } #rechts { width:760px; float: left; padding-right: 10px; padding-left: 10px; } #footer { width:980px; height:21px; background-image: url(layout/footer.jpg); background-repeat: no-repeat; clear: both; color: #E9E8E3; text-align: center; } #footer a { color: #C6C4B7; } p{ margin-top: 0px; margin-bottom: 2px; } #links a { float: left; width: 150px; font-weight: bold; color: #6A2C2D; text-decoration: none; background-color: #F4F3F1; border: 1px solid #323B4C; margin-bottom: 5px; }

20

#links a:hover {

color: #F5F4F2; background-color: #602426; } #rechts h1 { font-size: 12pt; color: #79292C; font-variant: small-caps; } #rechts a { color: #5C2423; } STAP 3: Als de homepagina af is gaan we dit opslaan als Template (Opslaan als Sjabloon). Maak een nieuwe pagina en vertrek vanuit “Pagina van sjabloon”. Momenteel kunnen we niets aanpassen, ga terug naar de sjabloon-pagina via de map Templates en stel een bewerkbare zone in op #rechts. Ga naar het palet Invoegen en kies bij Sjablonen de optie Bewerkbare zone. Geef dit de naam “tekst”. Sla de pagina (sjabloon) opnieuw op en ga terug naar uw nieuwe pagina. Benoem de pagina “oldtimers.php”. STAP 4: We gaan verbinding maken met de database via het palet database (naam: connect_oldtimers).

3

STAP 5: We gaan een recordset (query) maken via het Bindingen palet om de juiste tabel te selecteren.

STAP 6: Maak een tabel aan in #rechts en sleep volgende

5

velden hierin: Merk, aard, foto, prijs, promo. Maak verschillende klassen om tekst beter te laten opvolgen. Plaats de tabel in een nieuwe div-blok “auto”. Geef de opmaak mee: #auto { float:left; width:200px; margin:10px; 6 } Tip: Maak in uw tabel oldtimers (in phpMyAdmin) een veld bij voor thumbnails en verklein dit in

Photoshop (= formaat overal). Link naar de juiste map en afbeelding !.

21

STAP 7: Selecteer #auto en maak een herhalingsgebied (Servergedragingen > Herhalingsgebied > Alle tonen).

STAP 8: Maak een detailpagina, geef volgende velden weer: Merk, foto, prijs, omschrijving, promo.

Plaats een filter in de recordset URLparamater=id!

STAP 9: Plaats een link op de titel en op de afbeelding (in oldtimers.php) om naar de detailpagina te gaan.

Via Koppelingen > Gegevensbronnen (url: detail.php + parameter id).

STAP 10: Sla de pagina oldtimers.php opnieuw op en verander de naam chevy.php. Plaats een filter

“aard=chevy”. Doe dit nogmaals voor mustang.php en torino.php.

22

6. ADMINISTRATOR 6.1 TABEL INLOGGEN We hebben drie pagina’s nodig: een eerste pagina met een overzicht van alle records en twee andere pagina’s

waarmee je kan wijzigen of verwijderen. Maak een nieuwe pagina en sla deze op als admin.php. Maak een nieuwe recordset “rs_dvd”, er is geordend op id aflopend. Ga naar het tabblad Gegevens en klik op de knop “Dynamische tabel”. We voegen op het einde van de tabel nog twee kolommen toe, dit zijn de knoppen “wijzigen” en “verwijderen”. Hiervoor kan je tekst of figuren gebruiken.

6.2 VERWIJDER.PHP Maak een nieuwe pagina en sla deze op als verwijder.php. Maak een formulierveld met een tekstje “Bent u zeker?” en een knop Ja en Neen.

Wijzig de eigenschappen van beide knoppen: • Ja: naam: bevestig en actie: Formulier verzenden // knop Ja werkt niet ? • Nee: naam: geen en actie: geen

Selecteer de knop Ja en kies het tabblad Servergedragingen, klik op het +-iccon Record verwijderen. Het product wordt pas verwijderd nadat men klikt op de knop Ja.

23

Je kan ook dadelijk verwijderen, laat de standaardinstelling URL-parameter id staan. Wanneer men in admin.php klikt op verwijderen, flits de pagina verwijderen.php heel snel voorbij en wordt de record dadelijk verwijderd.

Selecteer de knop Nee. Ga naar het tabblad Paneel Tags > Gedragingen en klik op het +-icoon JavaScript aanroepen. Typ de code history.go(-1). Sla de pagina op.

pen de pagina admin.php en selecteer de knop verwijder. Leg een koppeling naar verwijderen.php, voeg O een paramer op id toe.

6.3 WIJZIGEN.PHP Je kan je veel werk besparen door de de pagina toevoegen.php op te slaan als wijzigen.php. Je moet wel de

actie invoegen record verwijderen.Voeg een verborgen veld in en noem dit “id”. Maak een nieuwe recordset aan, deze moet een filter krijgen! De filter zal in de url de id halen die door admin. php wordt doorgegeven. Op deze manier kan er maar één pagina getoond worden.

24

Koppel elk formulierobject met een veld in het paneel Bindingen. Er zijn verschillende methodes voor tekstvelden, selectievakjes, keuzerondjes en menu/lijsten.

• Tekstvakken en verborgen velden: Ofwerl sleep je het veld vanuit het paneel op het tekstvak, ofwel selecteer je beiden en klik je op de knop Binden. Koppel ook het veld id aan het verborgen veld id. • Selectievakjes en keuzerondjes: Selecteer één vakje of rondje en klik in het eigenschappenvenster op de knop Dynamisch, klik dan op de knop met het bliksemschichtje en kies het veld waaraan je de rondjes of vierkantjes wil koppelen. • Menu/lijst: Deze stappen zijn hetzelfde als hierboven bij selectievakjes en keuzerondjes.

Open de pagina admin.php en selecteer de knop wijzigen. Leg een koppeling naar wijzigen.php, voeg een paramer op id toe. Test het resultaat in de browser, vertrek vanuit admin.php.

25


Maak een admin-pagina voor onze wijnshop zoals hieronder. De verwijder-pagina mag direct verwijderd worden..

26

7. BEVEILIGEN 7.1 TABEL INLOGGEN Bepaalde pagina’s van een website mogen niet voor iedereen toegankelijk zijn. We gaan de pagina’s uit vorig

hoofdstuk beveiligen (admin, toevoegen, wijzigen en verwijderen).

We gaan eerst een nieuwe tabel “inloggen” aanmaken in phpmyadmin.Voeg twee gebruikers toe. id 1 2

gebruikersnaam vanhaver vermeulen

wachtwoord tania jos

Tip: Exporteer deze tabel ‘inloggen’ via tabblad Exporteer en voeg deze later toe in de database wijnshop.

7.2 INLOGGEN.PHP Maak een nieuwe pagina en sla deze op als inloggen.php. We maken een formulier met twee tekstvelden “gebruikersnaam” en “wachtwoord”. Kies bij wachtwoord de optie wachtwoord, zodat de bezoekers

bolletjes/sterretjes zien bij het invullen. Selecteer de knop Inloggen en ga het het paneel Servergedragingen, kies voor het +-icoon Gebruikersverificatie > Gebruiker aanmelden.

27

Sla de pagina inloggen op als fout.php, typ een melding “Gelieve correct in te loggen aub”.

7.3 PAGINA’S BEVEILIGEN Open een pagina die niet door iedereen bezocht mag worden (admin, toevoegen, wijzigen en verwijderen).

Let op: de pagina inloggen.php mag je niet beveiligen! Deze pagina moet voor iedereen toegankelijk zijn. We starten met de admin-pagina, ga naar het tabblad Servergedragingen en kies voor het +-icoon Gebruikersverificatie > Toegang tot pagina beperken. Kies vor Gebruikersnaam en wachtwoord en blader bij “Ga bij weigering ...” naar de pagina fout.php. Doe dezelfde voor de andere beveiligde pagina’s.

anneer nu een pagina geopend wordt met een “geweigerde toegang”, zal getest worden of de bezoeker W ingelogd is of niet? Indien niet zal hij worden geleidt naar fout.php. Indien men juist inlogt, krijgt men een beveiligde pagina te zien, men zit in een sessie van een 30-tal minuten. Indien men gedurende een half uur niets meer doet in de website, is men automatisch uitgelogd. Een tweede manier is een uitlogknop maken. 7.4 UITLOGGEN Wanneer men zich wil afmelden van de beveiligde pagina’s moet men op een uitlogknop kunnen klikken.

Typ het woord “uitloggen” of “afmelden” in de pagina admin.php. Selecteer het woord en ga naar het paneel

28

Servergedragingen, kies voor het +-icoon Gebruikersverificatie > Gebruiker afmelden.

Ga terug naar de index-pagina.

7.5 BEVEILIGING OP MEERDERE NIVEAUS

Je kan op meerdere niveaus beveiligen, hierbij creëer je verschillende bezoekersgroepen. De ene groep is gast, de andere lid en nog een andere is administrator. De administrator krijgt natuurlijk meer rechten als leden of gasten.

We gaan drie nieuwe velden toevoegen in de database “inloggen” (phpmyadmin). Wanneer je een site wil beveiligen op meerdere niveaus moet je een veld “rechten” voorzien. Indien je de ingelogde persoon wil aanspreken op naam, moet je nog de velden “naam” en “email” voorzien.

Ga naar de pagina “inloggen.php” en dubbelklik op Gebruiker aanmelden in het paneel Servergedragingen. Wijzig: • Toegang beperken op basis van: Gebruikersnaam, wachtwoord en toegangsniveau. • Niveau ophalen uit: kies hier het veld “rechten”.

Ga opnieuw naar de beveiligde pagina’s en dubbelklik op Toegang tot pagina beperken in het paneel Servergedragingen. Kies ook voor de optie Gebruikersnaam, wachtwoord en toegansniveau. We gaan de rechten ingeven bij de knop Definiëren. Doe dit op elke pagina die beveiligd moet worden.

29


Maak een inlogpagina voor onze wijnshop zoals hieronder. De admin, toevoegen, wijzig en verwijder pagina’s moeten beveiligd worden. Als er niet juist wordt ingelogd of niet is ingelogd zal er een foutmelding getoond worden. Geef bij het inloggen ook een welkomboodschap mee met de juiste naam en zijn rechten.

Extra: Sessie

S essies zijn zaken die lopend zijn, iemand die inlogt, verzeilt in een sessie. Een object dat in een winkelkarretje gestoken wordt of een taal gekozen wordt, komen tevens in een sessie terecht.

We gaan een sessievariabele gebruiken om de ingelogde persoon aan te spreken. Dit komt terecht op de adminpagina als men succesvol is ingelogd. Maak een nieuwe recordset “rs_inloggen” aan en plaats een filter aan op “gebruikersnaam”. De waarde is altijd “MM_Username” (hoofdlettergevoelig). Als de recordset klaar is, kan je het veld naam en rechten vanuit je paneel slepen op je pagina.

30

8 ZOEKFORMULIER 8.1 ZOEKFORMULIER Voor een zoekfunctie heb je 2 pagina’s nodig:

• zoekformulier • resultaten pagina

e starten met het maken van een formulier op de index-pagina. Geef het tekstvak de naam “zoekveld”. W Bij actie type je zoeken.php en methode: POST.

8.2 RESULTATENPAGINA

Maak een nieuwe pagina zoeken.php, kopieer de tabel vanuit de index-pagina. Zorg dat de tabel herhaald. Maak een nieuwe recordset “rs_dvd” en plaats een filter: naam bevat Formuliervariabele zoekveld. Sorteer alfabetisch. Test in de browser!

Voorbeeld: Typ de letter a in, je ziet alle titels verschijnen waar deze

letter in voorkomt. . Belangrijk: Toon alle records op deze pagina. Je kan ivm zoekfuncties

geen navigatiebalk gebruiken in een herhalingsgebied.

31

8.3 FORMULIERVARIABELE

anneer je een URL parameter wil tonen, kan je dit doen via het paneel Bindingen. Kies voor +-icoon Form W Variabele en typ de naam in van het formulierveld. Je kan deze variabele gewoon slepen op je webpagina.

Je kan met dit principe het trefwoord tonen, waarop men zocht in een zoekfunctie. Geef ook het aantal records weer.

8.4 MEERDERE DATABASEVELDEN

Je kan een site ook doorzoeken op meerdere databasevelden. We gaan terug naar de resultatenpagina “zoeken.php” en openen de recordset “dvd”. De recordset wordt iets ingewikkelder. Klik op de knop Geavanceerd, hier zie je de SQL-statements die is aangemaakt. Je ziet dat er automatisch een variabele is aangemaakt door de recordset (colname).

pen onderaan het venster de tabel, zodat je de namen van de velden goed kan zien. Typ volgende waarde bij or O regisseur LIKE %colname%. Dit betekent “zoek alle dvd’s onder naam of regisseur die de zoekterm bevat.

Wanneer je een veld wil gelijkstellen aan een trefwoord is de code: prijs = colname Anders zou je bij trefwoord 1 prijzen krijgen zoals 10, 125, ...De prijs moet dus gelijk zijn aan het getal !

32

et probleem is dat je nu prijs, naam, regisseur in hetzelfde tekstveld moet intypen. Het zou toffer zijn als er H meerdere zoekvelden waren in het formullier. 8.5 MEERDERE FORMULIERVELDEN

Je kan zoveel zoekvelden maken als je wilt, geef ze allemaal een duidelijke naam, deze wordt namelijk aan een variabele gekoppeld. Maak een nieuwe pagina “index2.php” en plaats 3 invoegvelden in het formulier. Geef de juiste benaming mee (dezelfde naam als databasevelden).

Open opnieuw de recordset “rs_dvd” en maak 2 variabele bij (prijs en regisseur). Plaats telkens bij Runtime-waarde: $_POST[‘regisseur’] en $_POST[‘prijs’]. Het SQL-statement ziet er als volgt uit: %color prijs

SELECT * FROM dvd WHERE titel LIKE name% or regisseur LIKE %varRegisseur% <= varPrijs

33

8.6 DYNAMISCHE SELECTIELIJSTEN

Dynamische selectielijsten zijn lijsten die opgebouwd worden met gegevens vanuit een database.

1. Maak een nieuwe recordset aan “rs_kleur”, selecteer enkel het veld kleur. Klik op de knop Geavanceerd en typ distinct voor de naam van het veld.

2. Maak een formulierveld met een lijst aan, klik op Dynamisch in het eigenschapvenster. Klik op “Opties uit recordset” en selecteer de recordset ‘rs_kleur” in de lijst.

34


laats een formulier op de index-pagina van de wijnshop. Zoek op naam, kleur en prijs en geef de resultaten P weer in een zoekpagina, Geef bovenaan het aantal resultaten weer.

35

9 HERHALINGSOEFENING: BIBLIOTHEEK

e maken een site die men op een bibliotheek zou kunnen gebruiken. Het grafisch ontwerp wordt volledig naar W persoonlijke stijl ingevuld. Ook typografisch voor de titel “Biblionet” ben je vrij. Denk zorgvuldig aan de opmaak, laat bepaalde aspecten beter opvallen als andere bijvoorbeeld of het boek aanwezig is of niet.

1. Het personeel (administratieve rechten “admin.php”) • Personeel kan boeken toevoegen (met foto), wijzigen, verwijderen. • Personeel kan ook boeken uitlenen. Vergeet niet deze pagina’s te beveiligen ! 2. Leden kunnen kijken welke boeken uitgeleend zijn en welke niet. (catalogus.php).Van elk boek kan je een detailpagina bekijken door te klikken op de titel of afbeelding van het boek. 9.1 INTROPAGINA

Deze homepagina laat de bezoeker eerst een keuze maken of hij gewoon lid is of personeel.

9.2 CATALOGUS

ier kunnen de leden alle boeken bekijken. Plaats bovenaan een banner als herkenningsfactor van de homepagina. H Zorg dat de bezoeker kan terug linken naar de homegpagina (via het logo).

Wat moet zeker aanwezig zijn op deze pagina:

1. Zoekmachine (met één formulierveld). Zoek wel op twee databasevelden (titel en schrijver). 2. Recentste aanwinsten: • Afbeelding (link naar detailpagina) • Titel boek • Naam schrijver

36

3.Volledige collectie (geef het aantal boeken uit de database ook weer): • Naam schrijver • Titel boek • Uitgeleend/aanwezig 4. Elk boek bevat een detailpagina, deze bevat: • Naam schrijver • Titel boek • Foto • Uitgeleend/aanwezig Extra: • Uitgever • ISBN nummer • Aantal pagina’s • Korte inhoud Zorg dat je eenvoudig kunt terug gaan op alle pagina’s !

9.3 ADMINISTRATOR

Zorg voor een inlogpagina. Maak een nieuwe tabel aan met 6 velden (id, gebruikersnaam, wachtwoord, naam, email, rechten).Voorzie twee soorten rechten: • één voor een medewerker (gebruikersnaam: personeel en wachtwoord: admin) • één voor de beheerder (gebruikersnaam: beheerder + wachtwoord: admin).

Is er juist ingelogd dan gaan we verder naar de admin pagina. Is er fout ingelogd dan geef je onder het inlogformulier een boodschap weer.

In de admin pagina van het persnoneel kan je enkel een boek wijzigen en uitloggen.

37

In de admin pagina voor de beheerder kan je boeken toevoegen, wijzigen en verwijderen (en uitloggen). Geef telkens bovenaan de gebruikersnaam weer (beide admin pagina’s).

Admin.php voor personeel

Admin.php voor beheerder

De afbeeldingen worden meegeleverd. Importeer het SQL-document in phpMyAdmin.

38

SAMEVATTING ADMINISTRATOR OLDTIMERS

Volgorde van werken bij het maken van dynamische websites:

1. Maak een nieuwe database met tabellen en velden in phpMyAdmin (of importeer het tekstbestand .sql

in een nieuwe database via de tab SQL.Voeg eventueel een aantal records toe (tab Invoegen). 2. Maak een map in C:\wamp\www. 3. Definieer je site in Dreamweaver. 4. Maak een nieuwe php-pagina. 5. Maak een MySQL-connectie van je site naar de database via het paneel Databases. 6. Maak de pagina’s aan: gegevens tonen, wijzigen, toevoegen en verwijderen.Voorzie je site van een beveiligde omgeving voor de administrator.

Gegevens tonen uit een database

1. Maak een nieuwe recordset in een lege pagina. 2. Maak een tabel. 3. Sleep de velden vanuit het paneel bindingen in je tabel. 4. Herhaal de velden via Herhalingsgebied (paneel Servergedragingen). 5. Gebied weergeven: • Typ een melding en selecteer deze tekst: Weergeven indien lege recordset (paneel Servergedragingen). • Selecteer de gegevens: Weergeven indien niet lege recordset (paneel Servergedragingen). 6. Toon eventueel Totaal aantal records weergeven (paneel Servergedragingen).

Gegevens toevoegen aan een database

1. Maak een formulier. 2. Selecteer de knop en kies voor Record Invoegen in het paneel Servergedragingen.

Gevens wijzigen in een database

Adminpagina:

1. Maak een nieuwe recordset (zonder filter). 2. Maak een tabel.

39

3. Sleep de velden vanuit het paneel Bindingen in je tabel, typ het woord wijzig en verwijder in 2 nieuwe kolommen achteraan de tabel (of importeer afbeeldingen). 4. Laat de rij/tabel herhalen via Herhalingsgebied. 5. Selecteer het woord wijzig en hect hier een link met parameter id aan. Wijzigpagina Wizard formulier:

1. Maak een formulier via de knop Wizard formulier record bijwerken.

Apart formulier maken:

1. Maak een formulier. 2. Maak een recordset met een filter op id. 3. Maak een verborgen veld id. 4. Koppel de formuliervelden aan de velden van de recordset. 5. Selecteer de knop en kies voor Record bijwerken in het paneel Servergedragingen.

Verwijderpagina

1.Voeg een nieuwe pagina toe verwijder en selecteer de optie Record verwijderen.

Een inlogprocedure maken

1. Zorg dat je een database inloggen hebt met volgende velden: id, gebruikersnaam en wachtwoord. 2. Maak een formulier in uw sjabloonpagina of op een aparte inlogpagina. 3. Selecteer de knop en kies voor Gebruiker aanmelden in het paneel Servergedragingen. 4. Bij het juist invoeren van gegevens stuur je hem naar de adminpagina, bij het fout invoeren stuur je hem naar een foutpagina (met melding bv. Deze gegevens zijn niet correct!). 5. Kies bij alle pagina’s die enkel bestemd zijn voor de administrator voor Toegang tot pagina beperken in het paneel Servergedragingen. Zo kan niemand op de pagina terechtkomen zonder in te loggen. 6. Voorzie op al deze pagina’s ook een link met afmelden, kies voor Gebruiker afmelden in het paneel Servergedragingen.

40

41

MYSQL-DATABASE PHP VIA DREAMWEAVER

Recommend Documents