HTML Module 4 les 4.6 t.b.v. studenten applicatie en mediaontwikkeling MBO Rijnland

1. Bootstrap 6
HTML module 44.6 Bootstrap 6

2. HTML module 44.6 Bootstrap 6
Terugblik

3. HTML module 44.6 Bootstrap 6
Huidige situatie Nieuwe situatie

4. HTML module 44.6 Bootstrap 6
Responsive Navbar

5. HTML module 44.6 Bootstrap 6
Responsive Navbar

6. HTML module 44.6 Bootstrap 6
Verbergen van elementen

7. HTML module 44.6 Bootstrap 6
Verbergen van elementen

8. HTML module 44.6 Bootstrap 6

9. HTML module 44.6 Bootstrap 6
Huidige situatie Nieuwe situatie

10. HTML module 44.6 Bootstrap 6

11. HTML module 44.6 Bootstrap 6
Nieuwe Stof

12. HTML module 44.6 Bootstrap 6
Vindennn optimaliseren
voor Tablet!

13. HTML module 44.6 Bootstrap 6
Huidige situatie

14. HTML module 44.6 Bootstrap 6
Nieuwe situatie

15. HTML module 44.6 Bootstrap 6
Hoe codeer je dit ?
Huidige code!

16. HTML module 44.6 Bootstrap 6
Hoe moet de code
aangepast worden?

17. HTML module 44.6 Bootstrap 6
Nieuwe Code?
Verwijderd bij section: col-md-12 (was overbodig)
Toegevoegd bij article de classes:
• col-12 (small devices)
• col-md-2 wordt col-md-5
• col-xl-2 (laptops)
• Shadow

18. HTML module 44.6 Bootstrap 6
Huidige situatie

19. HTML module 44.6 Bootstrap 6
Nieuwe situatie

20. HTML module 44.6 Bootstrap 6
Hoe codeer je dit ?
Huidige code!

21. HTML module 44.6 Bootstrap 6
Hoe moet de code
aangepast worden?

22. HTML module 44.6 Bootstrap 6
Nieuwe Code?
Verwijderd bij section: col-md-12 (was overbodig)
Toegevoegd bij article de classes:
• col-12 (small devices)
• col-md-2 wordt col-md-5
• col-xl-3 (laptops)
• Shadow
• I.p.v. 2 sections 1 section voor cards gemaakt

23. HTML module 44.6 Bootstrap 6
Combineren met Database!
Stap 1 we maken een database vinden met een tabel opdrachten

24. HTML module 44.6 Bootstrap 6
Combineren met Database!
Stap 2 we maken connection.php voor het benaderen van de database

25. HTML module 44.6 Bootstrap 6
Combineren met Database!
Stap 3 Koppelen connection.php in index.php

26. HTML module 44.6 Bootstrap 6
Combineren met Database!
Stap 4 Bestand functions.php creeren voor bepalen
hoeveel opdrachten per categorie.

27. HTML module 44.6 Bootstrap 6
Combineren met Database!
Stap 5 Koppelen functions.php in index.php

28. HTML module 44.6 Bootstrap 6
Stap 6 aantal per categorie plaatsen in index.php bij
opdrachten per categorie.
Variable wordt
in functions bepaald

29. HTML module 44.6 Bootstrap 6
Stap 7 alle data t.b.v. trending jobs uit de tabel opdrachten
ophalen.

30. HTML module 44.6 Bootstrap 6
Eindresultaat trending jobs met data uit tabel

31. HTML module 44.6 Bootstrap 6
Opdracht!
Inmiddels weet je steeds meer over bootstrap daarom
onderstaande opdracht.
Optimaliseer de webapplicatie zodat deze beter geschikt is
voor tablets. Kijk naar portrait en landscape modus.
Gebruik de code vanuit deze en vorige lessen.
Upload het geheel in teams in html_module_4 opdracht 4.6.