Cursus Analyse voor Web Applicaties 1 Organisatie Opleiding Module Onderwerp Syntra AB Webdesign / Web Programmeren Analyse voor web applicaties SDM methode + Basis UML Analyse op basis van SDM en UML Een goede analyse is noodzakelijk om een web project tot een goed einde te brengen Gedurende de cursus wordt gebruik gemaakt van een fictief project Het project bestaat uit de vraag van een reisbureau om online reizen aan te bieden door informatie en foto s van reizen op een pagina te tonen. Ook moet het mogelijk zijn dat men (een bestaande of nieuwe klant van het reisbureau) een reis kan boeken. Voor het boeken van een reis moet gebruik gemaakt kunnen worden van een beschikbaarheidsagenda De analyse zal gedeeltelijk uitgewerkt worden in HTML, CSS en PHP. Hier zullen we enkel de belangrijkste stukken code tonen en bespreken Voor een volledige cursus over HTML, CSS, PHP en (My)SQL verwijzen we naar andere cursussen Doel van een analyse Na de analyse beschikt men over een document waarin het volledige web project beschreven staat De verwachtingen van de (nieuwe) website of webapplicatie worden ook vermeld in dit document Ook wordt er beschreven op welke manier dit project dient uitgewerkt te worden Je kan dit document beschouwen als een soort lastenboek en plan dat men zal gebruiken om het project te realiseren Na de realisatie van het project zal het analyse- document een naslagwerk zijn met de bedoeling dat men dit kan gebruiken als documentatie voor eventuele updates aan de webapplicatie De verschillende fasen die doorlopen moeten worden om een goede analyse te bekomen 1. Doel en doelgroep van de website of webapplicatie bepalen a. Men kan beschrijven met woorden wat het doel van de site is b. Ook kan men met woorden beschrijven welke personen tot de doelgroep behoren, bv alle vrouwen tussen 25 en 70 jaar voor een dames schoenwinkel c. Om het volledige project duidelijk voor te stellen wordt gebruik gemaakt van UML d. Ook wordt een planning opgesteld. In deze planning komen alle stappen voor die nodig zijn om het project goed af te werken. e. Als de planning opgesteld is kan men deze gebruiken om een offerte te maken 2. Functioneel ontwerp a. In deze fase wordt de menustructuur en de databasestructuur van een webapplicatie besproken b. Dit kan best grafisch en/of schematisch gebeuren 3. Grafisch ontwerp a. In deze fasen worden drie layouts voorgesteld. Samen met de opdrachtgever wordt de beste layout gekozen b. Ook worden de te gebruiken kleurcodes en lettertypes hier vastgelegd c. Eventueel gebruikte formulieren worden hier ook weergegeven en eventueel uitgelegd (waar dient welk veld voor)
Cursus Analyse voor Web Applicaties 2 d. Ook alle formulieren die in een webapplicatie gebruikt worden dient men weer te geven en daarvan de functionaliteit te beschrijven. Het is ook aan te raden om de namen van invoer- velden (via het name= attribuut in de <input> of <select> tag) te vermelden in dit gedeelte van de analyse e. Als laatste item wordt ook een prototype van de site (layout zonder content) voorgesteld 4. Technisch ontwerp a. Tijdens deze fase wordt besproken welke technologieën gebruikt zullen worden b. Mogelijke technologieën kunnen zijn: HTML, CSS, PHP, JQuery, Angular JS,. c. Ook kan men hier specifieke deeltjes code beschrijven, bv welke SQL- statements men dient te gebruiken d. Het beschrijven van algoritmen, of deeltjes van code, kan men best schematisch doen door gebruik te maken van blokkenschema s e. Kies de beste hosting. Denk hierbij aan bv ondersteuning van PHP en MySQL 5. Testen a. Men kan best een testplan en test gegevens set opstellen b. In het testplan staat vermeld wie wat gaat testen c. In het test gegevens set staan alle waarden waarmee men dient te testen. Gebruik hiervoor alle waarden die mogelijk ingevuld kunnen worden maar ook waarden die normaal niet toegelaten zijn of waarden die niet mogelijk zijn, bv 30/02/2016 d. Na het testen kan men ook best een rapport opstellen met daarin de status van de verschillende tests. Ook eventuele aanbevelingen of oplossingen van de eventuele fouten in het systeem kunnen in dit rapport vermelde worden e. Eventuele fouten in het systeem kunnen gedurende deze fase dan recht gezet worden 6. Opleiding en oplevering a. Breng de hosting in orde b. Breng de nodige bestanden en mappen over van de eigen computer naar de webruimte (hosting) c. Schrijf indien nodig een handleiding (hoe de site te gebruiken) of zorg voor een opleiding van medewerkers van de opdrachtgever, zeker als het over een CMS of ERP gaat 7. Opvolging a. Hier gaat het over het onderhoud van de site na de oplevering ervan b. De nodige afspraken worden vastgelegd in een onderhoudscontract
Cursus Analyse voor Web Applicaties 3 De (beknopte) analyse van het project Online Reizen bekijken en boeken Fase 1 Doel en doelgroep van de site bepalen Voor dit project is het duidelijk dat de reizigers de doelgroep van de site zijn en dat het doel is om meer reizen te verkopen. Ook is het de bedoeling dat de geboekte reizen online beheerd kunnen worden. Na een gesprek met de klant blijkt ook dat de bedienden en agenten die voor het reisbureau werken ook online de verschillende reizen kunnen beheren (bv invoeren van een nieuwe reis, beheer reizigersgegevens, beheer van actieve reizen, enz ) Het project wordt grafisch voorgesteld d.m.v. UML UML kan gebruikt worden om het project grafisch voor te stellen zodat het voor de web ontwikkelaar en de opdrachtgever duidelijk is wat het project juist omvat In deze fase kan men nog bijsturen Een voorbeeld van een use- case diagram waar een aspect van het project besproken wordt, kan je hieronder bekijken PERT- planning Men maakt hierbij gebruik van standaard symbolen
Cursus Analyse voor Web Applicaties 4 Een project wordt opgedeeld in verschillende taken Elke taak krijgt een volgnummer Elke taak wordt voorgesteld d.m.v. een rechthoek met daarin info zoals taaknummer, duur van de taak, de begin- en einddatum van de taak Bovenaan staat steeds de naam van de taak Op de eerste rij, links staat het volgnummer van de uit te voeren taak Rechts, naast het volgnummer, staat de duurtijd van de taak, meestal uigedrukt in aantal uren In de onderste rij staat links de begindatum en rechts de einddatum van de taak De volledige planning wordt op deze manier gemaakt Deze planning gebruiken we om een offerte te maken Offerte 23 Mafrasoft -- Webdesign Omschrijving Aantal Eenheid Tarief Totaal Ontwerp Layout 12 uren 55,00 660,00 Ontwerp Database 16 uren 65,00 1 040,00 TOTAAL excl. BTW 1 700,00 Geldigheidsdatum 12/06/16 Fase 2 Functioneel ontwerp In deze fase gaan we analyseren of er een database nodig is of niet Vanaf het moment dat de content van de site regelmatig zal wijzigen is er behoefte aan een database. Denk hierbij aan een prijslijst, een fotogalerij, een login- systeem, weergave van nieuwe producten, aankondigingen van kortingen,. Ook wordt in deze fase vastgelegd welke navigatie, menustructuur, we zullen gebruiken op de site 1. Ontwerp van een database a. Tracht te achterhalen welke gegevens je wenst op te slagen b. Groepeer deze gegevens per soort c. Een database bestaat uit verschillende tabellen
Cursus Analyse voor Web Applicaties 5 d. Een tabel bestaat uit verschillende velden e. Een tabel bevat gegevens die tot een bepaalde soort behoren. Zo kan je bv tabellen om gegevens van klanten, artikels, leveranciers, bestellingen, planning, facturen, stock, nodig hebben om daarin die gegevens op te slagen. f. Elk gegeven wordt opgeslagen in een veld g. Een veld heeft een bepaald gegevenstype. h. De mogelijke gegevenstypes zijn: een geheel getal (int in MySQL), een kommagetal (DECIMAL voor valuta en FLOAT voor wiskundige getallen in MySQL), verzameling van letters, cijfers en tekens (VARCHAR in MySQL), lange tekst (TEKST in MySQL), een datumen /of tijdnotatie (DATE in MySQL) i. Schematische voorstelling van de database voor het reisbureau j. Elke tabel moet een primaire sleutel bevatten k. Een primaire sleutel is een veld van een tabel waar elk gegeven uniek moet zijn. Een veld waar namen worden opgeslagen kan nooit een primaire sleutel zijn omdat eenzelfde naam meer dan 1 keer kan voorkomen l. Indien er geen veld gevonden kan worden dat primaire sleutel kan zijn dan wordt er een extra veld toegevoegd. Dat extra veld zal van het type Int zijn en zal door het DBMS automatisch ingevuld worden. In MySQL dient men dan aan te geven dat dit veld A.I. is (Auto Increment, dus een volgnummer) m. Een tabel beschrijven welk gegevenstype gebruikt men, wat wordt de veldnaam en hoe groot mag het veld maximaal zijn n. Hieronder wordt de tabel tblreizen beschreven
Cursus Analyse voor Web Applicaties 6 Beschrijving van de tabel tblreizen Veldnaam Gegevenstype Grootte Validatieregels fldreisnr (*) varchar 10 Eigen codering fldreisnaam varchar 50 geen fldreisprijs decimal 7,2 Controle geldig valuta fldreisdatum date / Controle geldige datum (*) dit veld is de primaire sleutel