PHP Object georiënteerd

Project Gallery

Wat moet je al kunnen

Er wordt vanuit gegaan dat je al handig bent met de volgende onderwerpen:

• HTML
• CSS (positioneren en weergave van html-objecten)
• PHP
  • Variabelen (int, string, float, array)
  • Stringfunctions (str_replace(), sub_str(), strtolower())
  • Condities (if, if else)
  • Loops (for, foreach, while)
  • Formulieren (method=post, $_POST, $_GET)

Wat ga je leren tijdens dit project

• PHP
  • Meer over arrays
  • Functions en code organiseren
  • Sessions
  • Koppeling met een databaseserver (MySQL)
  • SQL Queries
  • PHP en GD image library

Waar gaat het over

Je gaat een image-gallery maken met PHP, HTML en CSS en misschien nog javascript. Je mag zelf kiezen welke plaatjes je gebruikt. De opdracht begint eenvoudig: Een html-pagina met een aantal plaatjes. Maar gaandeweg wordt de gallery uitgebreid met nieuwe functionaliteit. Hieronder een opsomming:

• De image-gallery geeft een willekeurig aantal plaatjes weer.
• De image-gallery is niet voor iedereen bestemd, je moet kunnen inloggen om de afbeeldingen weer te geven.
• De image-gallery moet beheerd kunnen worden. Vanuit de web-interface moet je plaatjes kunnen toevoegen.
• Na uploaden worden plaatjes geoptimaliseerd, zodat ze niet te groot zijn en snel laden in je browser.
• Per pagina worden er maximaal 20 plaatjes getoond. De applicatie genereerd automatisch nieuwe pagina's als er meer plaatjes worden geupload.

Misschien kun je nog veel meer functionaliteiten verzinnen als je er over nadenkt. Kijk maar eens naar printerest, instagram of google photo's e.a. om te zien hoe de image gallery's van die sites werken.

Google photo's is niet in 1 dag gebouwd, dus dit project gaat 4 weken in beslag nemen.

De lessen

Er zijn 2 lesmomenten per week. Zorg dat je op tijd in de online lessen aanwezig bent. De les start met algemene informatie die voor iedereen van belang is. Denk aan informatie over de opdracht, het rooster of andere zaken die te maken hebben met de lessen. Dit duurt gemiddeld een half uurtje. Informatie over wat je moet doen vind je in deze opdrachtbeschrijving. Informatie over hoe je iets moet doen vind je op de website edutorial.nl. Daarnaast moet je geregeld gebruik maken van belangrijke bronnen op internet over programmeren. Onderaan dit document vind je een aantal suggesties.

Zelfstandig werken

Programmeren is een kwestie van heel veel oefenen. Je moet heel wat puzzelen en uitzoeken hoe iets werkt om een applicatie werkend te krijgen. Wat doe je als je ergens niet uitkomt:

1. Probeer het zelf op te lossen. Raadpleeg bronnen en zoek naar voorbeelden. Als je langer dan een uur bezig bent met zelf uitzoeken. Ga dan naar stap 2.
2. Probeer je vraag zo goed mogelijk te formuleren. Leg het probleem goed uit en voeg je code bij. Stuur je vraag naar medestudenten en/of docent. Samen komen we er wel uit!

Werken in groepjes

Naast de momenten dat we met de hele groep bijeen komen zijn er ook momenten dat je met een projectgroepje bij elkaar komt. Hoewel je je eigen image gallery moet maken, kun je wel (en dat is juist de bedoeling) samenwerken met anderen! Wekelijks bespreek je met je projectgroep en de docent je voortgang. Er is ook ruimte voor 1-op-1 momenten met de docent. Stuur je docent een berichtje als je 1-op-1 iets wilt bespreken!

Het programma

1. Git en Github

• Een git repository maken
• Bestanden opslaan in een repository
• Een lokale git-repository synchroniseren met github.com

2. Een image-gallery op basis van HTML, CSS en PHP

• Werken met arrays
• Tekstfuncties

3. Een inlog-systeem maken

• Werken met MySQL Server en PHP

4. Files lezen en schrijven met PHP

• Formulieren en file-uploads
• Werken met GD-library

Git en Github

Versiebeheer met Git

1. Wat is Git en wat is een repository
2. Git downloaden
3. Een github-account aanmaken
   • Gebruik je deltion-mailadres
4. Oefenen met een boerenkoolrecept
   • Maak een repository voor recepten
   • Zie Versiebeheer met Git

Een image-gallery op basis van HTML, CSS en PHP

1. Maak een html-versie van de image-gallery
2. Zorg ervoor dat je afbeeldingen hebt in het juiste formaat
3. Zorg dat het er een beetje leuk uitziet met CSS

• Probeer een grid te maken zoals in het voorbeeld
• Afbeeldingen aanpassen doe je zo

4. Sla de namen van de afbeeldingen op in een PHP-array

• Zorg ervoor dat je met een foreach-loop de afbeeldingen weer kunt geven
• Als je meer plaatjes toevoegd, krijg je automatisch een nieuwe rij