12b. Content inladen /Responsive/background-img/colors/tickets

• Software Developer [WEB_A]
• MBO
• Studiejaar 1

WEB

Webdevelopment-II

Les 5 / Week 13

Responsive / Content inladen /

background-img / colors / tickets

Week 13 // WEB

Responsive / content inladen /

background-img / tickets

Welk attribuut geven we mee aan een input-element om het in php te kunnen ophalen?

1. type
2. name
3. value
4. placeholder

Leg in je eigen woorden uit waarom je afbeeldingen optimaliseert.

Waarvoor dient een (HTML)-validator?

Hoe haal ik vanuit php gegevens op uit een HTML-formulier met name-attribuut 'email' en plaats deze in variabele $email?

Inhoud van de les

• Een pagina responsive maken aan de hand van een mediaquery
• Content uit een tekstbestand inladen met PHP in HTML
• Een achtergrondafbeelding toevoegen
• Kleurencombinaties kiezen
• Tickets oplossen

Responsive

• Pagina's zien er anders uit op telefoon / tablet / laptop / beamerscherm.
• Een pagina aanpassen aan de grootte van het scherm
• Bijv. 2 kolommen bij kleiner scherm of zelfs 1. 

Responsive / mediaquery

• In CSS schrijf je een mediaquery, zoals je ook CSS schrijft.
• Je geeft aan welke CSS aangepast wordt bij welke resolutie
• Bijv. Als de resolutie kleiner is dan 600px, maak de achtergrond van de body blauw.

Responsive / controleren

Druk op CTRL + SHIFT + I en druk op het responsive icoontje (zie onder).

Responsive / controleren 

Pas de resolutie aan naar de grootte van je aanpassingen en kijk of de eigenschap verandert.

Content ophalen (PHP)

• We hebben al eens content verstuurd naar een tekstbestand (file_put_contents). 
• We kunnen ook content ophalen uit een tekstbestand en laten zien aan de gebruiker (file_get_contents) met behulp van PHP

file_get_contents()

Leest een bestand als string

Bestandspad geeft de locatie en bestandsnaam aan van het in te laden bestand. 

Andere parameters zijn 'waar starten in document' en bijv. 'maximale lengte'.

Opdracht 13.2: file_get_contents gebruiekn

File_get_contents werkend gekregen?

Klaar?

Afbeelding als achtergrond

background-img()

• Als je naast de afbeelding ook andere elementen (bijv. tekst/links) op dezelfde plaats wilt laten zien
• Als we de afbeelding als achtergrond laten zien, kunnen we de andere content op de voorgrond van de afbeelding plaatsen.
• background-img(url('bestandslocatie')) of
  
• background(url('bestandslocatie')) voeg je toe in CSS.

Voorbeeld background-img()

Tickets

Aanpassen van een bestaande website. 

Klant heeft bijv. andere wensen 

Belangrijk om goed code van anderen te kunnen interpreteren!

Inleveropdracht 13

Open het moduleboekje van WDV-II en ga aan de slag met de inleveropdracht 13 op pagina 33 ('een ticket oplossen').

Lever deze opdracht in in itslearning --> WDV-II --> Weekchecks --> Week 13 --> Inleveropdracht 13