Foto web applicatie documentatie Marijn Stuyfzand M31T PHP31 David Schol 1
Inhoudsopgave APPLICATIESTRUCTUUR MAPPENSTRUCTUUR FUNCTIONALITEITSSTRUCTUUR DE BASIS VOOR ELKE PAGINA DATABASE SERVER- SIDE EN CLIËNT- SIDE CLIËNT- SIDE SERVER- SIDE TEST RAPPORT VALIDATIE PHP DEBUG 3 4 5 5 6 7 7 7 8 8 8 2
Applicatiestructuur BESTANDEN header.php footer.php init.php albums.php, contact.php, create_album.php, delete_album.php delete_comment.php edit_album.php index.php, protected.php register.php, settings.php upload_image.php view_album.php login.php, logout.php INCLUDES head.php, header.php aside.php footer.php database: connect.php functions: album.php, general.php image.php thumb.php users.php comment.php init.php, overallheader.php overallfooter.php init.php 3
Mappenstructuur ROOT: albums.php contact.php CORE: o init.php o DATABASE:! connect.php o FUNCTIONS:! album.php! general.php! image.php! thumb.php! users.php! comment.php create_album.php CSS: o lightbox.css o reset.css o style.css delete_album.php delete_comment.php delete_image.php edit_album.php IMAGES: o afbeeldingen INCLUDES: o aside.php o footer.php o head.php o o o o header.php OVERALL:! footer.php! header.php UPLOADS:! ALBUM mappen: " geüploade afbeeldingen! THUMBS: " geüploade thumbnails WIDGETS:! loggedin.php! login.php index.php JS: o lightbox.js o javascript.js login.php logout.php protected.php register.php settings.php upload_image.php view_album.php 4
Functionaliteitsstructuur De basis voor elke pagina Elke pagina in de root folder bevat een aantal geïncludeerde.php bestanden: CORE/init.php # Include alle.php bestanden met alle functies voor de applicatie. Verbind zich met database via connect.php. Een general.php pagina, met functies die op elke pagina opgeroepen kan worden, bijvoorbeeld: controle of de gebruiker een admin is. Start een sessie. Controleert of de gebruiker wel of niet is ingelogd. Bevat variabele $errors als een array die alle foutmeldingen valideert in een formulier. INCLUDES/OVERALL/header.php # Bevat de <doctype><html><head> elementen include in head.php. Bevat de include header.php met daarin het begin van de body en de <header> en <aside> met daarin het logo en login formulier/gebruiker interface. INCLUDES/OVERALL/footer.php # Bevat de <footer> en het einde van de body en <html>. De applicatie is zo opgebouwd dat elke pagina een standaard template heeft! 5
Database In de database zijn drie tables: users # Hierin wordt een id, wachtwoord, voornaam, achternaam, email, leeftijd en het type in opgeslagen. Type 0 = normale gebruiker Type 1 = admin gebruiker albums # Hierin wordt een id gegeven aan een album, met daarbij de naam, tijdstip en beschrijving. Aan een album zit een gebruiker gelinkt doormiddel van het linken van de id van de gebruiker. Alle gebruikers zouden in theorie een album kunnen maken, maar dat is geblokkeerd voor gebruikers die type 0 zijn. images # Hierin worden de gegevens over een afbeeldingen in opgeslagen. Per afbeelding wordt het id, tijdstip, extensie (jpg, png etc), het id van het album waarin de afbeelding is opgeslagen en een id van de gebruiker die de afbeelding geüpload heeft. comments # Hierin wordt het commentaar gegeven die gebruikers kunnen geven bij albums. Er wordt een id voor elke comment, een username en het commentaar zelf opgeslagen. Bij elke comment wordt ook het album_id opgeslagen, zodat de comments van elkaar gescheiden worden. 6
Server- side en cliënt- side Cliënt- side De meeste functies in de applicatie zijn opgebouwd met PHP en mysql. Enkel voor het laten zien van een grotere foto op een klik van een thumbnail is een client- side jquery/javascript plugin gebruikt, namelijk Lightbox. Via Lightbox wordt een aparte pop van de afbeeldingen geopend, met daarop een vergrootte versie van de afbeeldingen en extra informatie. Server- side De gehele applicatie draait op php en mysql. Zonder een connectie met de database is het bekijken van de applicatie ook niet mogelijk. Voor het uploaden van afbeeldingen, wordt de image_id, tijdstip, user_id, album_id en image_extension opgeslagen in de database. Terwijl de afbeelding zelf in de map includes/uploads/ ALBUM ID wordt opgeslagen en er automatisch in de map includes/uploads/thumbs/ ALBUM ID een thumbnail wordt aangemaakt en opgeslagen. Als admin van de applicatie kan er een nieuw foto album gemaakt worden en kunnen afbeeldingen geüpload worden. Bij het uploaden van een afbeelding krijg je de keuze in welk album de afbeeldingen geüpload moet worden. De albums die al gemaakt en dus ook beschikbaar zijn, worden dynamisch weergegeven voor de admin, zodat elk album gekozen kan worden om een afbeelding in op te slaan. Tevens kan de admin een foto album bewerken en afbeeldingen verwijderen! Ook kan de admin commentaar verwijderen. Als normale gebruiker heb je de mogelijkheid om jezelf uit te schrijven, foto s te bekijken en commentaar op een album te geven. Als geen gebruiker, kan je jezelf registreren maar ook foto s bekijken. 7
Test rapport Naam pagina Formulier Afwijkend Besturingssysteem Browsers paginaontwerp Hoofdpagina Nee Lettertype dikte, kan afwijken in verschillende Apple Mac OS x Microsoft Windows Safari Mozilla Firefox Google Chrome Internet Explorer browsers Albumpagina Nee Nee # # Fotopagina Ja Nee # # Informatiepagina Nee PDF bestand # # i.p.v. pagina Contactpagina Ja Nee # # Registerpagina Ja Nee # # Uitschrijfpagina Ja Nee # # # = idem dito Validatie HTML5 valide (W3 schools validator) CSS3 valide (W3 schools validator) In Firefox en Chrome wijkt het hover effect af dan in Safari en Internet Explorer, verder werkt alles zoals het moet. De web applicatie staat niet op een school server, dit omdat op servers van school, geen afbeeldingen kunnen worden geüpload. Daarom gebruik ik een server van hostnet, waarbij de database alle verantwoordelijkheden heeft en de web applicatie werkt zoals het moet. PHP debug Met de functie error_reporting(0); laat de browser geen errors en foutmeldingen zien. Integendeel wordt bij formulieren alles gevalideerd en wordt er een foutmelding gegeven indien nodig. Met deze functie uit, zijn er geen errors en wordt alles goed afgehandeld. 8