H7: Read: Van database naar tabel

Read: van database naar tabel
WDV-III en DBS-I
Les H7 / Week 4
1 / 30
suivant
Slide 1: Diapositive
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Cette leçon contient 30 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

Read: van database naar tabel
WDV-III en DBS-I
Les H7 / Week 4

Slide 1 - Diapositive

Even terugblikken
  • Met een insert-query en PDO-object kunnen we informatie toevoegen aan de database
  • Placeholders toevoegen voor de veiligheid
  • Dropdown en checkbox
  • Boodschap teruggeven aan 
gebruiker.

Slide 2 - Diapositive

Leerdoelen
  • Je kunt een pagina maken en bijhorende code in de controller om een nieuw item in te voegen in de database-tabel.
  • Je kunt een select-query schrijven en uitvoeren, eventueel met een where-clause.
  • Je geeft de juiste tabel aan waaruit geselecteerd moet worden.
  • Je geeft de juiste voorwaarde aan indien nodig 
  • Waar nodig sorteer je het resultaat op de juiste kolom.

Slide 3 - Diapositive

Voeg de juiste SQL-code in de query toe om een statement voor te bereiden?
gebruikers (naam, gebruikersnaam, leeftijd)
INSERT INTO
VALUES
(:naam, :gebruikersnaam, :leeftijd)
($naam, $gebruikersnaam, $leeftijd)
':naam', ':gebruikersnaam', ':leeftijd'
SELECT
FROM
WHERE

Slide 4 - Question de remorquage

Hoe zorg je dat de VERBINDING bereikbaar is vanuit je controller?
A
$_POST[ 'conn.php'];
B
header("location: index.php");
C
$conn->prepare($query)
D
require_once 'conn.php'

Slide 5 - Quiz

Met welke php-functie bereid je de uitvoer van je SQL-statement voor?
A
require_once
B
$query
C
prepare
D
execute

Slide 6 - Quiz

Geef een voorbeeld van een juiste placeholder?

Slide 7 - Question ouverte

Met welke functie check je of een checkbox is aangevinkt?
A
is_numeric($_POST['news']);
B
is_empty($_POST['news']);
C
isset($_POST['news']);
D
isset($news);

Slide 8 - Quiz

READ
  • Overzicht van alle contacten / meldingen / taken etc.

Slide 9 - Diapositive

PHP kun je schrijven:
  • In een controller: enkel PHP code (backend)
  • Tussen je HTML: front-end wordt dynamisch. Inline PHP. Je opent PHP in je HTML en echo't daar iets; bijv.
<p> <?php echo $name; ?> </p> 

Slide 10 - Diapositive

Request - response

Slide 11 - Diapositive

Opdracht 7.4: inline PHP
Wat: maak opdracht 7.4
Hoe: moduleboekje, pagina 31
Hulp: je buurman - daarna docent
Uitkomst: een werkende browserpagina waarop de gegevens te zien zijn. 
Klaar: start met de weekcheck van H7
timer
5:00

Slide 12 - Diapositive

SELECT-query uitvoeren
Stappen:
  • Voer de SELECT-query uit volgens het 5-stappenplan (pag. 24)
  • Bouw de structuur van je lijst of tabel op.
  • Gebruik een loop om voor ieder item uit de database iets te printen.

Slide 13 - Diapositive

Stappen in code
Als we geen selectie hoeven te maken: "SELECT * FROM tabel"




SELECT is eenvoudiger dan INSERT: geen placeholders, want geen gegevens die we hoeven in te voegen
Merk op dat stap 5 is toegevoegd; geldt niet voor INSERT, wel voor SELECT, omdat we de gegevens ophalen en in een variabele zetten om te gebruiken.

Slide 14 - Diapositive

Debuggen met print_r( )
Inhoud van een array (lijst) bekijk je met de print_r-functie.





Bevat verschillende key-value-combinaties.

Slide 15 - Diapositive

Opdracht 7.7: meldingen ophalen en dumpen
Wat: Opdracht 7.7: stap 1 t/m 4 uitvoeren
Hoe: moduleboekje WDV-III en DBS-I, pagina 32
Hulp: je buurman - daarna de docent
Uitkomst: een overzicht van alle gegevens uit meldingen uit de database.
Klaar: ga verder met de weekcheck van H7.
timer
10:00

Slide 16 - Diapositive

Een foreach( )-loop


  • Om met data te werken: erdoorheen loopen
  • foreach ( )-loop door een array

In php                                                  In HTML


Slide 17 - Diapositive

Opdracht 7.9: loopen door meldingen
Wat: Opdracht 7.9: uitvoeren
Hoe: moduleboekje WDV-III en DBS-I, pagina 33
Hulp: je buurman - daarna de docent
Uitkomst: een overzicht van de meldingen onder elkaar.
Klaar: ga verder met de weekcheck van H7.
timer
15:00

Slide 18 - Diapositive

Table-tag
Gegevens netjes tonen met een HTML-tabel
<table></table> om aan te geven dat er een tabel volgt. 
<tr></tr> Table row: rij in de tabel 
<th></th> Table head: koppen van de tabel: in de bovenste rij
<td></td> Table cell: een cel die je vult met informatie.

Slide 19 - Diapositive

Tabel opbouw in HTML

Slide 20 - Diapositive

Welk element gebruik ik voor elke kop van een tabel.
A
<table></table>
B
<th></th>
C
<tr></tr>
D
<td></td>

Slide 21 - Quiz

Welk element gebruik om één tabel cel te specificeren
A
<table></table>
B
<th></th>
C
<tr></tr>
D
<td></td>

Slide 22 - Quiz

Met welk element geef ik aan dat ik een tabel ga gebruiken?
A
<table></table>
B
<th></th>
C
<tr></tr>
D
<td></td>

Slide 23 - Quiz

Met welk element geef ik aan dat ik een tabel rij ga specificeren?
A
<table></table>
B
<th></th>
C
<tr></tr>
D
<td></td>

Slide 24 - Quiz

Slide 25 - Diapositive

Opdracht 7.11: meldingen in een tabel
Wat: Opdracht 7.11 uitvoeren
Hoe: moduleboekje WDV-III en DBS-I, heel pagina 35
Hulp: je buurman - daarna de docent
Uitkomst: een overzicht van de meldingen in een tabel.
Klaar: ga verder met de weekcheck van H7.
timer
15:00

Slide 26 - Diapositive

Samen bespreken

Slide 27 - Diapositive

Een tabel stylen
Specifieke styling voor een tabel toevoegen
Specifiek even regels/ oneven regels
Specifiek voor hoveren
Specifiek voor enkel de bovenste rij (koppen)

Slide 28 - Diapositive

Opdracht 7.13: tabel afmaken
Wat: Opdracht 7.13 uitvoeren
Hoe: moduleboekje WDV-III en DBS-I, pagina 36
Hulp: je buurman - daarna de docent
Uitkomst: een overzicht van de meldingen in een tabel met styling.
Klaar: ga verder met de weekcheck van H7.
timer
10:00

Slide 29 - Diapositive

Weekcheck H7: Toolshed
Wat: Weekcheck H7 uitvoeren
Hoe: moduleboekje WDV-III en DBS-I, pagina 37
Hulp: je buurman - daarna de docent
Uitkomst: een overzicht van de tools in een nette gestylede tabel.
Klaar: Inleveren Itslearning: 
  • screenshot tools/index.php
  • screenshot van de tabel in je browser
Daarna: verder met herhalingsoefening van klassenlijst, waar je vorige week aan begonnen bent.

Slide 30 - Diapositive