MEOJ1 >PHP EN GD (VERSIE 0.6) MEDIADEVELOPMENT CREBO: LEERJAAR 2 GRAFISCH LYCEUM ROTTERDAM SAMENSTELLER: BIJLSMA

Transcriptie

1 MEOJ1 >PHP EN GD (VERSIE 0.6) MEDIADEVELOPMENT CREBO: LEERJAAR 2 GRAFISCH LYCEUM ROTTERDAM SAMENSTELLER: BIJLSMA

2

3 INHOUDSOPGAVE Inleiding... 2 Werkwijze en beoordeling... 3 Werkwijze... 3 Beoordeling... 3 Hoofdstuk 1: GD en afbeeldingen... 4 Afbeelding uit formulier:... 5 Afbeelding verplaatsen naar server-map:... 5 Thumbnail maken:... 5 Watermerk maken:... 6 Opdracht Hoofdstuk 2: Nog meer gd... 8 Opdracht Opdracht Eindopdracht Eindopdracht

4 INLEIDING Tijdens de vorige module hebben jullie al gewerkt mat AJAX PHP. Deze periode gaan jullie gebruik maken van de gd-library; soms in combinatie met AJAX. Het lesmateriaal voor deze module zit niet in deze reader, maar jullie zullen daarvoor zelf op zoek moeten gaan op internet. Soms zullen er tips gegeven worden, bijvoorbeeld d.m.v. links naar tutorials, maar soms zullen jullie zelf op onderzoek uit moeten om uit te zoeken hoe de opdracht uitgewerkt moet worden. Veel succes! 2

5 WERKWIJZE EN BEOORDELING WEBJ1:PHP, AJAX EN GD GRAFISCH LYCEUM ROTTERDAM WERKWIJZE Maak in jullie webmap een nieuwe map: MEOJ1. Sla binnen deze map alle opdrachten op. Maak voor elke opdracht een aparte map. Zoals in de inleiding staat zal je zelf op zoek moeten naar de juiste tutorials. Hou een worddocument bij waarin je per opdracht beschrijft welke tutorials je hebt gebruikt. Sla ook dit document op in dezelfde map. Laat jouw uitwerkingen tijdens de les nakijken door de docent. BEOORDELING Laat de opdrachten tijdens de les aftekenen door de docent. Geef zelf aan als je klaar bent met een opdracht. Opdr. Omschrijving #pt. Deadline 1 Upload, thumbnail en watermerk 30 Week 3 2 Simulatie dobbelsteen 20 Week 4 3 Stemmen 20 Week 5 Eind Wenskaarten 30 Week 7 TOTAAL: 100 3

6 HOOFDSTUK 1: GD EN AFBEELDINGEN De gd-library in PHP wordt gebruikt om dynamische of gewone afbeeldingen de maken. Ook kunnen met deze library de afbeldingen worden aangepast. De letters gd stonden in eerste instantie voor gif draw. Aangezien de library ook andere formaten ondersteunt, wordt nu vaak over graphics draw gesproken. In de nieuwste versies van php wordt de gd-library automatisch geïnstalleerd. Dit kan je controleren door in een php-pagina op te roepen met phpinfo() : Als deze library er niet tussen staat moet deze nog geïnstalleerd worden. Zoek zelf op internet hoe dit moet. (bijv: In vorige modulen en thema s heb je al regelmatig met afbeeldingen moeten werken. Het uploaden van afbeeldingen is voor de meesten bekend. Het maken van een thumbnail of een afbeelding met watermerk is wat misschien wat minder bekend. In dit hoofdstuk worden deze onderdelen kort(!) uitgelegd. Op internet vind je aanvullende informatie. Twee tutorials waar je gebruik van kan maken: 4

7 AFBEELDING UIT FORMULIER: Bestand uitlezen: Dit levert (na print_r ($afb) ): o LET OP: Controleren op extensie, grootte,. Met getimagesize kan je o.a. de breedte en hoogte van de afbeelding ophalen: AFBEELDING VERPLAATSEN NAAR SERVER-MAP: ( $MAP = mapnaam op server) THUMBNAIL MAKEN: 1. Lees originele bestand in: LET OP: bij gif of png: imagecreatefromgif/ png 2. Maak een nieuwe afbeelding: 3. Kopieer het origineel naar de nieuwe afbeelding: 5

8 ($br en $hg zijn de breedte en hoogte van $origineel) 4. Sla de nieuwe afbeelding (thumbnail) op: LET OP: bij gif of png: imagegif/ png, zonder een getal ( 100 ) WATERMERK MAKEN: Net als hierboven, alleen worden de afbeeldingen samengevoegd: $new_wm is dezelfde afbeelding als $watermerk, alleen met de breedte en hoogte van $source. Binnen php wordt gd onder andere gebruikt bij het uploaden van afbeeldingen, bijvoorbeeld als er een thumbnail wordt gemaakt of als er een watermerk op een afbeelding geplaatst moet worden. In de volgende opdracht gaan jullie deze technieken toepassen. De uitleg voor deze opdracht ontbreekt. Maak gebruik van de uitleg in dit hoofdstuk en tutorials op internet om deze opdracht te maken. 6

9 Opdracht 1 Maak een applicatie om afbeeldingen te uploaden. De afbeeldingen worden netjes in een aparte map gezet, en de gegevens worden opgeslagen in een tabel. In de tabel worden minimaal de volgende gegevens bijgehouden: ID-nummer, naam afbeelding, onderschrift en IP-adres van de uploader. In het formulier moet dus in ieder geval het volgende worden ingevoerd: Afbeelding, Naam en Onderschrift. Naam en Onderschrift zijn geen verplichte velden; het bestandsveld ( Afbeelding ) natuurlijk wel. Als het formulier is ingevuld en wordt verstuurd, gebeurt het volgende: 1. Er wordt gecontroleerd of het bestandveld is ingevuld. Zo niet, dan wordt de gebruiker teruggestuurd naar het formulier. 2. Er wordt gecontroleerd of de afbeelding al bestaat. Zo ja, dan krijgt de afbeelding een andere naam. 3. De afbeelding wordt geplaatst in een aparte map ( originals ). 4. Er wordt een thumbnail van de afbeelding gemaakt. Deze is maximaal 100px breed of 100 px hoog. Zorg dat de afbeelding in de juiste verhouding blijft! De thumbnail wordt in een andere map bewaard ( thumbs ). 5. Het origineel wordt ook nog een keer bewaard met een watermerk er op. Ook deze afbeelding krijgt een eigen map ( watermerk ). 6. Als dit allemaal is gelukt, worden de gegevens weggeschreven in de database. Anders krijgt de gebruiker een foutmelding. Voor onderdeel 4 en 5 wordt de gd-library gebruikt. Hoe je dit voor elkaar moet krijgen is op verschillende sites op internet te vinden. Zoek een goede tutorial om dit te scripten. Vergeet in het script de opmerkingen niet! Hierna kan de gebruiker de overzichtspagina bekijken. In deze pagina staan de thumbnails van alle afbeeldingen in rijen van 5(!). Onder elke afbeelding staat de naam. Als er op de afbeelding wordt geklikt, verschijnt de detailpagina. Hierop zijn de volgende gegevens te vinden: Naam afbeelding, Afbeelding met watermerk(!) Onderschrift IP-adres van de uploader. Uiteindelijk bestaat deze applicatie uit 4 pagina s (of minder?): Index Formulier (+ verwerk) Overzichtspagina Detailpagina Bewaar alle pagina s op \\WEBSERVER ( ) in jouw map MEOJ1. Maak hierin een nieuwe map: opdracht 1. Voor elk onderdeel zijn punten te verdienen, maar voor de verwerking van het formulier krijg je (logisch) de meeste punten. 7

10 HOOFDSTUK 2: NOG MEER GD WEBJ1:PHP, AJAX EN GD GRAFISCH LYCEUM ROTTERDAM Behalve het aanpassen van afbeeldingen kan je met de gd-labrary ook jouw eigen afbeldingen maken. Zoals al eerder vermeld is op internet genoeg informatie te vinden om te leren werken met de gd-library van php.om de volgende opdrachten te kunnen maken zal je daarom zelf op zoek moeten gaan naar de benodigde code. Een groot deel van deze code is o.a. te vinden in de volgende tutorials op internet: Opdracht 2 Maak een applicatie die het gooien met twee dobbelstenen simuleert. Op het scherm kan de gebruiker via een tekstveld invullen hoe vaak er met de dobbelstenen gegooid moet worden. Na een druk op de submitbutton wordt er m.b.v. de random functie in php bepaald hoe vaak er 2, 3, of 12 is gegooid. De uiteindelijke scores worden weergegeven in een staafdiagram. Wat moeten jullie maken: Een map: opdracht2. De pagina opdracht2.php, met hierin een formulier met één tekstveld. In dit formulier vult de gebruiker het aantal worpen in. Een php-scrip ( werpen.php )waarin het aantal worpen wordt gesimuleerd. Dit script wordt via AJAX aangeroepen, zodat er geen refresh plaatsvindt. Gebruik de gd-library om het staafdiagram in een afbeelding ( diagram.jpg ) te plaatsen. Deze afbeelding wordt opgeslagen op de server, en daarna getoond in de pagina. Het uiteindelijke resultaat zou er als volgt uit kunnen zien: Je bent vrij in de vormgeving van de staafdiagram. Deze mag natuurlijk ook vertikaal. Als de diagram maar duidelijk is. 8

11 Opdracht 3 Maak een stem-applicatie die via een cirkeldiagram zichtbaar maakt hoeveel stemmen elke partij heeft gekregen. Bedenk zelf minimaal 4 partijen. Laat de gebruiker via een button zijn/haar stem uitbrengen. Door middel van AJAX wordt de database bijgewerkt en het aantal stemmen per partij getoond. Zorg dat het duidelijk is welke kleur bij welke partij hoort. Een (eenvoudige) uitwerking zie je hiernaast: De gegevens worden dus bewaard. Elke keer als de (index-)pagina wordt opgestart zal de juiste diagram getoond worden. Maak voor deze opdracht een map ( opdracht3 ) waarin alle pagina s worden bewaard. 9

12 EINDOPDRACHT In dit hoofdstuk wordt de eindopdracht beschreven. Voor deze opdracht zal je in ieder geval gebruik moeten maken van de technieken AJAX en gd-library. Daarnaast is het heel goed mogelijk om andere technieken te gebruiken die je eerder in het schooljaar hebt geleerd, zoals Jquery, HTML5 en OOP. In deze opdracht laat je zien wat je kan. Het is belangrijk dat je de verschillende technieken goed toepast. Dus niet te veel, maar op de juiste plekken. Daarnaast zal de uiteindelijke applicatie gebruikersvriendelijk moeten worden. Er wordt daarom van jullie verwacht om aandacht te besteden aan de front-end. Leef je uit! Eindopdracht Het Grafisch Lyceum, en in het bijzonder de afdeling Mediatechnologie, wil voor de volgende Open Dag de bezoekers iets nieuws laten zien. Men wil de bezoekers online hun eigen wenskaart laten maken. De bezoeker kan kiezen uit bestaande afbeeldingen of een eigen afbeelding uploaden als achtergrond. Natuurlijk zijn er eisen aan de afbeelding. Als de afbeelding niet het juiste formaat heeft kan de bezoeker zelf de uitsnede bepalen. Daarnaast bepaalt hij/zij de tekst die op de kaart moet komen. De tekst kan op diverse plekken op de kaart geplaatst worden. Ook kan het lettertype, de grootte en kleur vrij gekozen worden. Uiteindelijk zal de kaart als PDF worden opgeslagen zodat deze uitgeprint kan worden. Aan jullie wordt gevraagd een webapplicatie te onwikkelen die deze mogelijkheid biedt. Deze webapplicatie moet voldoen aan de onderstaande eisen: De applicatie is gebruikersvriendelijk. o De gebruiker ziet duidelijk in welke fase van de ontwikkeling hij/zij zit. Tijdens de ontwikkeling ziet hij/zij het eindresultaat op het scherm. o Daarnaast krijgt hij/zij zoveel mogelijk ruimte om de wenskaart naar eigen inzicht op te maken. o Meldingen (goed of fout) worden duidelijk om het scherm weergegeven. De gebruiker kan kiezen uit een aantal standaard afbeeldingen. o Alle standaard afbeeldingen hebben de juiste afmetingen en instellingen. o Deze afbeeldingen worden netjes in een overzicht getoond. o Na een keuze wordt deze afbeelding gebruikt als achtergrond voor de wenskaart. De gebruiker kan een eigen afbeelding uploaden. o Direct wordt gecontroleerd of de afbeelding voldoet aan bepaalde eisen. (deze bepaal je zelf). Zo niet, dan krijgt de gebruiker een melding. o Indien nodig wordt de afbeelding uitgesneden op het juiste formaat. o De gebruiker kan zelf de uitsnede bepalen o De afbeelding wordt tijdelijk bewaard; nadat de wenskaart opgeslagen is als PDF wordt de afbeelding verwijderd. De gebruiker kan tekst op de wenskaart plaatsen o Via een invoerveld wordt de tekst ingetypt en daarna getoond op de afbeelding. o Beter is: de tekst kan direct op de afbeelding getypt worden. o De hoeveelheid tekst is (natuurlijk?) gebonden aan een maximum. o De gebruiker kan zelf bepalen waar de tekst komt te staan. Hij kan bijvoorbeeld kiezen uit een aantal standaard plaatsen, of hij/zij is volledig vrij in het plaatsen van de tekst. o De gebruiker kan het fontype aanpassen. o De gebruiker kan de fontgrootte aanpassen. o De gebruiker kan de fontkleur aanpassen. 10

13 De wenskaart wordt opgeslagen als PDF. o Als de gebruiker klaar is wordt de volledige wenskaart in het juiste formaat opgeslagen op de server. o De PDF krijgt een logische naam. o De PDF kan worden geprint. o De PDF kan worden opgestuurd naar de gebruiker. De gebruiker kan zich registreren o De gegevens van de gebruiker worden via een formulier opgevraagd en opgeslagen in een databasetabel. o De PDF kan naar de gebruiker worden gestuurd. o De volgende keer als de gebruiker inlogt (?) ziet hij/zij de gemaakte wenskaart (-en). Extra eisen voor de backend: De webapplicatie is op een overzichtelijke en gestructureerde manier opgebouwd. o Er is een duidelijke mappenstructuur gemaakt. o De code is overzichtelijk; er wordt op de juiste manier ingesprongen o De code is voorzien van opmerkingen. In de applicatie wordt gebruik gemaakt van AJAX. In de applicatie wordt gebruik gemaakt van de gd-library. Bovenstaande eisen zijn waarschijnlijk te veel om in één periode allemaal toe te passen. Je zal daarom zelf een keuze moeten maken welke eisen je wel en welke je niet toepast binnen jouw applicatie. Elk onderdeel levert punten op. 11