Universiteit Gent Faculteit Ingenieurswetenschappen Vakgroep Telecommunicatie en Informatieverwerking Voorzitter: Prof. Dr. Ir. Herwig Bruneel
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Dado Van Peteghem Thomas Claus Promotor: Prof. Dr. Guy De Tré Begeleider: Lic. Niels Charlier
Scriptie ingediend tot het behalen van de graad van Master in de Toegepaste Informatica
Academiejaar 2006-2007
De auteurs geven de toelating deze scriptie voor consultatie beschikbaar te stellen en delen van de scriptie te kopiëren voor persoonlijk gebruik. Elk ander gebruik valt onder de beperkingen van het auteursrecht, in het bijzonder met betrekking tot de verplichting de bron uitdrukkelijk te vermelden bij het aanhalen van resultaten uit deze scriptie.
Datum: 13/08/2007
Handtekening:
Dankwoord
De voorbije maanden hebben wij dankbaar gebruik gemaakt van de goede begeleiding van een aantal mensen. Zij hebben ervoor gezorgd dat deze thesis, als orgelpunt van dit academiejaar, in de juiste banen werd geleid.
Vooreerst willen wij onze promotor, Prof. dr. Guy De Tré, bedanken die ons met zijn concrete ideeën en raadgevingen op weg heeft geholpen. Verder bedanken wij ook onze begeleider Niels Charlier voor zijn kritische opmerkingen en nuttige tips gedurende de uitwerking van dit project. Dankzij zijn waardevol advies zijn we gekomen tot de voltooiing van onze thesis.
Ook willen wij elkaar bedanken voor de aangename samenwerking gedurende het voorbije jaar, welke uiteindelijk heeft geleid tot dit eindresultaat. Tenslotte danken wij U, als lezer, voor de belangstelling die U nu reeds stelt in ons werk.
Dado Van Peteghem Thomas Claus
i
Overzicht •
Ontwikkeling van een databank en dynamische website voor dj-profilering.
•
Dado Van Peteghem Thomas Claus
•
Scriptie ingediend tot het behalen van de graad van Master in de Toegepaste Informatica Academiejaar 2006-2007
•
Promotor: Prof. Dr. Guy De Tré Begeleider: Lic. Niels Charlier
Vakgroep Telecommunicatie en Informatieverwerking Voorzitter: Prof. Dr. Ir. Herwig Bruneel
Samenvatting: Dit afstudeeronderwerp beoogt de ontwikkeling van een databank en dynamische website voor dj's die zich via het web willen profileren. Het te ontwikkelen systeem moet gebruikers toelaten om via verschillende applicaties onze databank te bevragen en te komen tot een zo groot mogelijke interactiviteit.
Lijst van Acroniemen ASP Active Server Pages CD Compact Disk - Read Only Memory CSS Cascading Style Sheets DBMS Databasemanagementsysteem DVD Digital Versatile Disc EER Enhanced Entity-Relationship FTP File Transfer Protocol HTML HyperText Markup Language HTTP Hypertext Transfer Protocol PHP Hypertext Preprocessor SQL Structured Query Language UML Unified Modeling Language URL Uniform Resource Locater WAMP Windows Apache MySQL PHP WWW World Wide Web WYSIWYG What You See Is What You Get XHTML Extensible HyperText Markup Language XML Extensible Markup Language
iv
1
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Inleiding Momenteel is communicatie één van de belangrijkste peilers van onze samenleving. Organisaties en individuen willen via allerlei mogelijke telecommunicatiemiddelen informatie verspreiden en opvangen. Aanvankelijk publiceerden bedrijven en organisaties oproepen, reclame en vacatures in allerlei tijdschriften, magazines en dagbladen. Telefoon en faxtoestellen werden gebruikt om orders door te geven, marketingenquêtes af te nemen etc. Toen televisie en radio reeds goed ingeburgerd waren, maakten producers er gretig gebruik van om reclametijd te commercialiseren. Ondertussen beschikt men over een nog breder aanbod inzake communicatie.
De laatste decennia gebruiken heel veel organisaties het Web als nieuw en optimaal communicatiemiddel. Kleine zelfstandigen tot grote multinationals gebruiken websites niet alleen als uithangbord, maar ook steeds meer als uitgebreid en interactief webplatform. Particulieren participeren in nieuwsgroepen, fora en communities om foto’s, opinies en algemene ervaringen met de buitenwereld te delen. Het Internet speelt dus een heel belangrijke rol in de verdere mondialisering en functionering van de samenleving.
Deze mondiale communicatie zorgt voor een gigantische informatiestroom op het Web. Opdat men op eenvoudige wijze vlot door deze informatie zou kunnen surfen, is er nood aan een bepaalde structuur om gegevens op te slaan. Een databank voorziet in deze behoefte.
Deze elementen hebben ons ertoe aangezet zowel communicatie en interactie als structurele gegevensopslag in een dj-applicatie te verwerken. Bij het opstarten van een dergelijk project is het belangrijk eerst goed te brainstormen over wat je van de applicatie verwacht. Binnen ons project werd dit verwerkt in een functionele beschrijving. Verder is er nood aan een duidelijke structuur van de te verwerken entiteiten en informatie: in dit project maken we gebruik van een EER-diagram (Enhanced Entity-Relationship). Aan de hand van beschikbare technieken ontwerpen we vervolgens een consequente datastructuur die we finaal implementeren in een webapplicatie: webpagina’s met bijbehorende databank.
2
Ontwikkeling van een databank en dynamische website voor dj-profilering.
1. Algemeen 1.1 Probleemstelling Ultimasso is een opkomende dj. Dj's moeten kunnen communiceren met hun publiek en hun potentiële bookers. Er is nood aan image building door te tonen waarvoor de dj staat. Zonder meer is het ook belangrijk te kunnen meedelen wanneer en waar de dj optreedt. Het is verder uitermate interessant te weten wat het publiek wilt. Om in deze noden te voorzien, dachten wij aan het ontwerpen van een website.
1.2 Doelstelling Dit afstudeeronderwerp beoogt het ontwerpen van een dynamische website en de ontwikkeling van een databank voor een dj (Ultimasso) die zich via het web willen profileren. Daarvoor willen wij een systeem opzetten dat het mogelijk moet maken voor gebruikers om per genre een aantal songs en artiesten te raadplegen die de Dj zijn stijl omschrijven. Verder is er nood aan een contactformulier, bookingsformulier en gastenboek, en moet het mogelijk zijn om in te schrijven op een nieuwsbrief. Dit alles wordt zoveel mogelijk verwezenlijkt via de connectie met de database. Uiteraard is er ook aandacht voor gebruiksvriendelijkheid en een aantrekkelijke layout. De website zal worden opgebouwd aan de hand van een viertal onontbeerlijke markup- en scriptingtalen, zijnde: HTML, CSS, JavaSript en PHP. Ook zal er in beperkte mate gewerkt worden met Flash ActionScript als basis voor een aantal animaties. Het meest elementaire deel van deze thesis zal echter bestaan uit de connectie met de Open-Source database MySQL. Daartoe hebben wij gekozen voor de server-side scripting taal PHP (Hypertext Preprocessor), die dezer dagen enorm populair is onder professionele webdeveloppers.
1.3 Studenten Dit thesisonderwerp werd verwerkt door twee studenten: Dado Van Peteghem en Thomas Claus (MTI 2006 - 2007)
2
3
Ontwikkeling van een databank en dynamische website voor dj-profilering.
2. Werkwijze Van vooraf aan hebben wij ons tot doel gesteld te bepalen welke de basiscomponenten zijn van onze dynamische website. Deze componenten vormen immers de rode draad binnen ons project en dienen dus goed beschreven te worden. Een goede structuur van de database en een degelijk uitgewerkt kader van onze hoofdapplicaties kan enkel tot stand komen op basis van een logisch diagram van het project. Het zogenaamde EER-schema (Enhanced Entity Relationship schema) zal verderop worden verklaard. Het is geen evidentie om de juiste structuur van een database te bepalen maar aan de hand van een goed schematisch overzicht kan men vaak problemen vermijden. Indien de theoretische- en praktische uitwerkingen niet goed op elkaar zijn afgestemd wordt er immers onefficiënt gewerkt.
De uitwerking van deze thesis zit voornamelijk vervat in de gemaakte codepagina’s die u bijgevoegd op een CD-ROM aantreft. Wat U hieronder te lezen krijgt is niet gebaseerd op uitgebreid literatuuronderzoek aangezien er geen prominent onderzoeksluik gekoppeld is aan dit werk. Anderzijds hebben wij evenwel de nodige vakliteratuur geraadpleegd om te komen tot een goede theoretische onderbouw voor dit project. Deze bundel is voornamelijk een verslag van wat wij concreet hebben uitgevoerd en hoe wij daartoe zijn gekomen. Het bevat een beschrijving van de gemaakte keuzes die nader toegelicht en verantwoord worden.
De structuur van deze bundel is als volgt: we beginnen met een functionele beschrijving van ons project. Daarna volgt een beschrijving van het ontwerpproces van onze databank en een toelichting bij de implementatie van onze applicaties en de daartoe gebruikte programmeertalen. We bespreken nadien ook enkele softwarecomponenten en we eindigen met een besluit dat onze voornaamste bevindingen bevat.
3
4
Ontwikkeling van een databank en dynamische website voor dj-profilering.
3. Uitvoering 3.1 Databankontwerpproces Een databank wordt in verschillende fases ontworpen: de informatievergaring, het conceptueel ontwerp, het logisch ontwerp en het fysieke ontwerp.
In een eerste fase wordt nagegaan welke functionaliteit je aan welke gebruikers wilt aanbieden. Tijdens de tweede fase gaat met de verzamelde informatie abstraheren en presenteren in een abstracte voorstelling van de databank (conceptueel model).
Vervolgens, wanneer alle concepten van de databank bekend zijn, kiest men een databankmodel en moet een databank schema opgesteld worden (logisch ontwerp). Pas in de laatste stap gaat men
fysieke ontwerp • DDL-scripts • implementatie van gedrag Figuur: De fases van het datbaseontwerpproces Bron: De Tré, G., Principes van databases
4
5
Ontwikkeling van een databank en dynamische website voor dj-profilering.
3.1.1 Fase 1: beschrijving van de functionaliteit
Hieronder volgt een beschrijving van wat wij concreet aan de gebruikers van onze webapplicaties willen aanbieden. Verderop zal dit als basis worden aangewend voor een gedetailleerde uitwerking van ons project.
De meeste websites die we vandaag op het Web terugvinden bevatten doorgaans traditionele applicaties zoals een contactformulier, een pagina met links, een gastenboek etc. De meeste Dj’s tonen op hun website een kort overzicht van hun geliefkoosde nummers samen met een aantal nummers die verwijzen naar hun muziekstijl. Deze toepassingen zullen ook in ons project worden verwerkt maar we willen een uitgebreidere interactiviteit. De bijkomende functionaliteit die wij willen aanbieden aan de bezoekers van onze website is de zogenaamde ‘Dj Bag’. Concreet kan deze applicatie door de gebruiker worden aangewend om de platencollectie van Dj Ultimasso te bekijken. Wij bieden het complete platengamma van de Dj online aan. De bezoekers kunnen de Dj Bag op eenvoudige wijze doorzoeken.
De Dj Bag bestaat uit twee belangrijke peilers: enerzijds is er een gebruiksvriendelijke interface voor de gebruikers van de website, en anderzijds de bijbehorende data uit de database. Zo is er de mogelijkheid om de platencollectie van Dj Ultimasso te doorzoeken op basis van muziekgenre, artiest, song en jaartal.
Naast het online aanbieden van de platen collectie groeide ook de idee om geregistreerde gebruikers de kans te geven een score aan de songs toe te kennen. Het toekennen van een score leidt tot een globale TOP 10 van de songs uit de Dj Bag.
Deze TOP 10 is voor Dj Ultimasso de ideale mogelijkheid om te achterhalen wat de noden zijn van zijn publiek. Het wordt mogelijk om hun muzikale voorkeuren te ontdekken. Op die manier kan de dj zijn platenkeuze beter gaan afstemmen.
5
6
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Voorlopig bevat de collectie per genre een 5-tal songs die als het ware als ‘sample data’ kunnen worden gebruikt bij het voorstellen van onze applicatie. Later kan de dj naar believen songs/genres/jaartallen of artiesten toevoegen.
Aangezien wij een rigide structuur willen behouden binnen onze webapplicatie zal er worden gewerkt met een registratiemodule. Hierdoor krijgen de gebruikers verschillende rechten toegekend die wij hierna kort beschrijven.
Gebruikers zullen binnen dit project worden onderverdeeld in 3 types:
1) De Administrator: administrators worden beschouwd als beheerders van webapplicaties en kunnen via hun loginmodule wijzigingen aanbrengen in verschillende gegevens op de website. Zo kunnen zij berichten uit het gastenboek aanpassen of verwijderen. Songs kunnen worden toegevoegd aan de Dj bag en de nodige wijzigingen kunnen worden aangebracht. Verder zullen ook de bookings, parties en links kunnen worden aangepast of verwijderd. 2) De geregistreerde gebruiker: deze groep gebruikers krijgt de mogelijkheid om een score uit te brengen op songs uit de Dj bag en op de dj zelf. Daarnaast kunnen ze een booking vastleggen en er kan een bericht nagelaten worden in het gastenboek. Geïnteresseerden kunnen eveneens een externe link toevoegen. Bij de registratie kan de gebruiker bepalen indien hij/zij wenst in te schrijven op een nieuwsbrief. 3) De gewone gebruiker: deze groep kan de Dj bag raadplegen maar beschikt niet over de mogelijkheid om een score uit te brengen op de songs. Omwille van beveiligingsredenen zullen gewone gebruikers moeten registeren willen zij een bericht nalaten in het gastenboek. Via het contactformulier kunnen zij echter wel rechtstreeks een email verzenden naar de Dj. Gewone gebruikers kunnen, net als de andere 2 groepen, een aantal video’s en foto’s bekijken op de website.
Geregistreerde gebruikers zullen de mogelijkheid krijgen om een booking te plaatsen. De geplaatste bookings zullen worden gekoppeld aan een agenda die de gebruikers kunnen raadplegen. 6
7
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Daarin zullen zij een overzicht krijgen op welke parties (en op welke dag) Dj Ultimasso zal draaien. De geregistreerde gebruiker een aantal belangrijke elementen doorgeven bij het plaatsen van een booking: •
de naam van de party
•
de datum van de party
•
welk soort muziek wil de gebruiker op zijn party
•
hoelang moet de Dj op de party draaien
•
wat is het budget van de gebruiker voor Dj’s?
•
de locatie van de party
Binnen ons project zijn ook een aantal kleine applicaties voorzien die de interactiviteit van de website ondersteunen. Zo is er een ratingsysteem waar gebruikers een stem kunnen uitbrengen van 1 t.e.m. 10 voor de Dj (met login!). De uitgebrachte stem wordt weggeschreven naar onze database en een phpscript op de pagina zorgt ervoor dat een gemiddelde score zichtbaar wordt. Verder ook een bezoekersteller die aanduidt hoeveel unieke bezoekers de website bezocht hebben.
Binnen ons project werken we met twee formulieren die door de gebruiker kunnen worden ingevuld en doorgestuurd. De contactpagina bestaat uit een HTML formulier dat wordt verzonden naar de server. Elke type gebruiker kan dit formulier aanwenden om de Dj te contacteren. Het bookingsformulier zal, zoals reeds hoger vermeld, enkel kunnen aangewend worden door geregistreerde gebruikers.
3.1.2 Fase 2: conceptueel ontwerp Bij de vertaling van de functionaliteiten naar een conceptueel model maken we gebruik van het enhanced entity-relationship diagram (EER-diagram). De omzetting gebeurt in vier stappen: (1) identificatie van de reguliere entiteittypes, subtypes, supertypes en categorieën, (2) identificatie van de zwakke entiteittypes en hun identificerende relatietypes, (3) identificatie van attributen, hun karakteristieken en hun restricties en (4) identificatie van de reguliere relatietypes, hun eventueel attributen, hun karakteristieken en hun restricties(De Tré, G., 2007, p82-83). 7
8
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Stap 1: Identificatie van de reguliere entiteitstypes, subtypes, supertypes en categorieën. We onderscheiden elf reguliere entiteitstypes: ‘Song’, ‘Album’, ‘Artiest’, ‘Genre’, ‘Medium’, ‘Gebruiker’, ‘Guestbook’, ‘Links’, ‘Booking’, ‘Categorie’ en ‘Type Party’.
Stap 2 Identificatie van de zwakke entiteitstypes en hun identificerende relatietypes. Er zijn twee zwakke entiteittypes ‘Party’ en ‘Vote The Dj’. Een party heeft steeds betrekking op een booking. ‘Party’ heeft een partieel sleutelattribuut P_Name en een regulier attriubut Location. ‘Vote The Dj’ bevat een attribuut score.
Stap 3 Identificatie van attributen, hun karakteristieken en hun restricties. Het entiteittype song heeft als sleutelattribuut ‘ID’ en als regulier attribuut ‘Title’. Het entiteitstype Artiest heeft eveneens als sleutelattribuut ‘ID’ en als regulier attribuut ‘Name’. Het entiteitstype Album heeft als reguliere attributen ‘Year’ en ‘Name’ en als sleutelattribuut ‘ID’. Het entiteitstype Genre heeft als sleutelattribuut ‘ID’ en als regulier attribuut ‘G_Name’. Het entiteitstype Medium heeft als sleutelattribuut ‘ID’ en als regulier attribuut ‘Name’. Het entiteitstype Gebruiker heeft als reguliere attributen ‘Login’, ‘Pass’, ‘Name’, ‘Email’, ‘Last Login’, ‘Date of Registry’, ‘Receive newsletter’ en ‘Type’. Het sleutelattribuut is ‘ID’. Het entiteitstype Links heefts als reguliere attributen ‘Url’ en ‘Name’ en als sleutelattribuut ‘ID’. Het entiteitstype Guestbook heeft als reguliere attributen ‘ip’, ‘Bericht’ en ‘Tijdtip’. Het sleutelattribuut is ook hier ‘ID’. Het entiteitstype Booking heeft als reguliere attributen ‘Datum’, ‘Budget’, ‘Aantal uur’ en ‘Status’. Het sleutelattribuut is opnieuw ‘ID’. Het entiteitstype Type Party heeft als regulier attribuut ‘Omschrijving’ en als sleutelattribuut ‘ID’. Het entiteitstype Categorie heeft als regulier attribuut ‘Omschrijving’ en als sleutelattribuut ‘ID’.
Stap 4 Identificatie van de reguliere relatietypes, hun eventuele attributen, hun karakteristieken en hun restricties. Op de volgende twee pagina’s wordt het EER-schema weergeven.
8
9
Ontwikkeling van een databank en dynamische website voor dj-profilering.
9
10
Ontwikkeling van een databank en dynamische website voor dj-profilering.
10
11
Ontwikkeling van een databank en dynamische website voor dj-profilering.
3.1.3 Fase 3: logisch ontwerp
Tot en met de vorige fase was het ontwerp databankonafhankelijk. Tijdens deze fase van het databankontwerpproces wordt een databankmodel gekozen. Aan de hand van een omzettingsalgoritme wordt het EER-diagram uit de conceptuele fase omgezet naar een databankschema. Dit algoritme moet dit doen volgens de voorschriften van het gekozen databankmodel. Dit proces noemt men forward ‘engineering’(De Tré, G., 2007, p142).
Wij werken met een relationele databank. Het omzettingsalgoritme voor dit databankmodel bestaat uit negen stappen: (1) omzetting van reguliere entiteittypes, (2) omzetting van zwakke entiteittypes, (3) omzetting van specialisaties en generalisaties, (4) omzetting van categorieën, (5) omzetting van binaire 1:1 relatietypes, (6) omzetting van binaire 1:N relatietypes, (7) omzetting van binaire M:N relatietypes, (8) omzetting van meerwaardige attributen en (9) omzetting van naire relatietypes waarbij n>2. De werkwijze 1 bij de verschillende stappen wordt hieronder gespecificeerd.
Hieronder vindt u de mapping van ons EER-diagram: Stap 1: omzetting van regulier entiteittypes Genre (G_ID, G_Name) PK {G_ID} Medium (M_ID, M_Name) PK{M_ID} Song (S_ID, S_Title) PK{S_ID} Album (AL_ID, AL_Name, AL_Year) PK{AL_ID} Artist (A_ID, A_Name) PK{A_ID} User{U_ID,U_Login,U_Pass, U_Name, U_Email, U_LaLogin, U_RegDate, U_RecNews) PK{U_ID} 1
De Tré, G., 2007, Principes van databanken, p 143-157
11
12
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Stap 2: Omzetting van zwakke entiteittypes Party(P_Name, Location, B_ID) PK{P_name, B_ID} FK {B_ID} verwijst naar Booking
Stap 3: Omzetting van specialisaties en generalisaties / Stap 4: Omzetting van categoriën / Stap 5: Omzetting van binaire ‘één-op-één’ relatietypes Party (P_Name, B_ID) PK{P_name, B_ID} FK {B_ID} verwijst naar Booking VoteDj (V_Score, U_ID) PK: {U_ID} FK: {U_ID} verwijst naar User
12
13
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Stap 6: Omzetting van binaire ‘één-op-meerdere’ relatietypes Party (P_Name, B_ID, C_ID, Lo_ID) PK{P_name, B_ID} FK {B_ID} verwijst naar Booking FK {C_ID} verwijst naar Category FK {TP_ID} verwijst naar TypeParty Booking (B_ID, B_Datum, B_Budget, B_AantalUur, B_Status, U_ID) PK{B_ID} FK{U_ID} verwijst naar User Album (AL_ID, AL_Name, AL_Year, M_ID) PK{AL_ID} FK{M_ID} verwijst naar Medium Guestbook{Gu_ID, Gu_IP, Gu_Bericht, Gu_Time, U_ID} PK{Gu_ID} FK{U_ID} verwijst naar User Song (S_ID, S_Title, A_ID, G_ID, AL_ID) PK: {S_ID} FK: {A_ID} FK: {G_ID} FK: {AL_ID} Links(L_ID, L_Name, L_Url, U_ID) PK{L_ID} FK: {U_ID} verwijst naar User
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Stap 8: Omzetting van meerwaardige attributen / Stap 9: Omzetting van n-aire relatietypes waarbij n > 2 / Sythese: Uit bovenstaande mapping kunnen we dan de databank samenstellen. Genre (G_ID:smallint(6), G_Name:varchar(25)) Primaire sleutel: {G_ID} Medium (M_ID:smallint(6), M_Name:varchar(25)) Primaire sleutel: {M_ID} Artist (A_ID:smallint(6), A_Name:varchar(50)) Primaire sleutel: {A_ID} User (U_ID:smallint(6), U_Login:varchar(50), U_Pass:varchar(32), U_Name:varchar(15), U_Email:varchar(30), U_LaLogin:date, U_RegDate:date, U_RecNews:char(1)) Primaire sleutel: {U_ID} TypeParty (TP_ID:smallint(6), TP_Omschrijving:varchar(20)) Primaire sleutel: {TP_ID} Category(C_ID:smallint(6), C_Omschrijving:varchar(20)) Primaire sleutel: {C_ID} VoteDj (V_Score:varchar(20), U_ID:smallint(6)) Primaire sleutel: {U_ID} Vreemde Sleutel: {U_ID} verwijst naar User Party (P_Name:varchar(50), B_ID:smallint(6), C_ID:smallint(6), TP_ID:smallint(6), Lo_ID:smallint(6) P_Locatie:varchar(50)) Primaire sleutel: {P_name, B_ID} Vreemde Sleutel: {B_ID} verwijst naar Booking Vreemde Sleutel: {C_ID} verwijst naar Category Vreemde Sleutel: {TP_ID} verwijst naar TypeParty Booking (B_ID:smallint(6), B_Datum:date, B_Budget:varchar(20), B_AantalUur:varchar(20), B_Status:varchar(30), U_ID:smallint(6)) Primaire sleutel: {B_ID} Vreemde Sleutel: {U_ID} verwijst naar User Album (AL_ID: smallint(6), AL_Name:varchar(70), AL_Year:year(4), M_ID:smallint(6)) Primaire sleutel: {AL_ID} Vreemde Sleutel: {M_ID} verwijst naar Medium 14
15
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Guestbook (Gu_ID:int(50), Gu_IP:varchar(20), Gu_Berich:text, Gu_Time:varchar(23), U_ID:int(11)} Primaire sleutel: {Gu_ID} Vreemde Sleutel: {U_ID} verwijst naar User
Song (S_ID:smallint(6), S_Title:varchar(50), A_ID:smallint(6), G_ID:smallint(6), AL_ID:smallint(6)) Primaire sleutel: {S_ID} Vreemde Sleutel: {A_ID} verwijst naar Artist Vreemde Sleutel: {G_ID} verwijst naar Genre Vreemde Sleutel: {AL_ID} verwijst naar Album Links (L_ID:smallint(6), L_Name:varchar(50), L_Url:varchar(50), U_ID:smallint(6)) Primaire sleutel: {L_ID} Vreemde Sleutel: {U_ID} verwijst naar User Score (S_ID:smallint(6), U_ID:smallint(6), Sc_Score:smallint(6)) Primaire sleutel: {S_ID, U_ID} Vreemde Sleutel: {S_ID} verwijst naar Song Vreemde Sleutel: {U_ID} verwijst naar User PartyGenre (P_Name:varchar(50), B_ID:smallint(6), G_ID:varchar(50)) Primaire sleutel: (P_name, B_ID, G_name) Vreemde Sleutel: {P_name} verwijst naar Party Vreemde Sleutel: {B_ID} verwijst naar Booking Vreemde Sleutel: {G_name} verwijst naar Genre
15
16
Ontwikkeling van een databank en dynamische website voor dj-profilering.
3.2 Normalisatie Bij het opstellen van een relationele databank kunnen zich een aantal problemen voordoen: gegevens kunnen verscheidene keren worden opgeslaan, gegevens kunnen bepaalde afwijkingen bevatten en er kan ook ongewild informatieverlies optreden.
Op basis van een goede EER-modelering kunnen deze problemen worden beperkt. Dit betekent niet dat fouten onoverkomelijk zijn; er kunnen nog steeds fouten optreden zoals overtollige componenten in het schema, data die verkeerd worden geïnterpreteerd, etc. Om deze fouten verder weg te werken maakt men gebruik van een normalisatieproces 2 . Doorheen het proces kan men verschillende normaalvormen bereiken. “Een normaalvorm kan gezien worden als een kwaliteitsnorm voor basisrelaties: hoe hoger de normaalvorm van de relati, hoe minder problemen men kan hebben met die relatie.” 3
Het leek ons niet nodig om de verschillende normalisatiestappen hier volledig uit te werken. Een duidelijk voorbeeld hoe het proces in zijn werk gaat, vindt de lezer in “Principes van databases”, geschreven door Professor Guy De Tré. Wel willen wij aanmerken dat de door ons opgestelde databank voldoende genormaliseerd is, opdat frequente databankproblemen moeilijker kunnen optreden.
2
“Normalisatieproces: door dit proces wordt een relatie met een lagere normaalvorm opgesplitst en omgezet naar verschillende relaties die allemaal een hogere normaalvorm hebben.”, De Tré, 2007, Principes van databases, Pearson Education, p169 3 De Tré, 2007, Principes van databases, Pearson Education, p169
16
17
Ontwikkeling van een databank en dynamische website voor dj-profilering.
4. Implementatie – Programmering 4.1 Editors
Voor het opstellen en/of het wijzigen van codepagina’s voor een website heeft men een editor nodig. Hiervoor bestaan er verschillende mogelijkheden. De meest voor de hand liggende optie is een voorgeprogrammeerde functie binnen het besturingssysteem Windows, nl. Kladblok. Deze optie is vooral nuttig voor het snel aanbrengen van kleine wijzigingen maar leent zich niet voor de volledige uitwerking van scripts. Daarvoor is een meer professionele editor geschikt. Zoals reeds gezegd zijn verschillende alternatieven mogelijk.
Onze keuze is gevallen op Dreamweaver, een softwarepakket dat sinds kort in handen is gevallen van Adobe maar voorheen deel uitmaakte van Macromedia. Dreamweaver maakt het mogelijk om via een gebruiksvriendelijke interface efficiënt met programmeercode te werken. Het gebruik van kleuraanduidingen en ingebouwde functies om snel veranderingen aan te brengen zorgen ervoor dat deze editor zich uitermate leent tot het opzetten van een website. Bovendien is het mogelijk om te werken in twee verschillende ‘views’: codeview en designview. Binnen ons project hebben wij gewerkt met het codeview van Dreamweaver aangezien het designview meer gericht is op ontwikkelaars die het principe WYSIWYG (What You See Is What You Get) hanteren. In het kader van browsercompatibiliteit en codeconsistentie was dit voor ons geen optie. Wel is het designview nuttig gebleken bij het voorbeschouwen van onze pagina’s.
We wijzen er op dat de keuze van een editor een subjectieve keuze is. Er bestaan heel wat varianten en het is aan de developer om het alternatief te kiezen dat tot het beste resultaat leidt.
17
18
Ontwikkeling van een databank en dynamische website voor dj-profilering.
4.2 FTP
Voor het uploaden van onze bestanden naar de server hebben wij gebruik gemaakt van het File Transer Protocol (FTP). Meer concreet is die overdracht tot stand gekomen via een zogenaamde FTP-client.
De dataconnectie kan evenwel net zo goed worden opgezet via onze editor Dreamweaver maar aangezien dit soms nogal stroef verloopt hebben wij ervoor gekozen om onze files via een extern FTP-programma up te loaden.
4.3 Server
Basic HTML-pagina’s kunnen zondermeer lokaal worden geopend via de browser van de client. Pagina’s die server-side scritpting taal bevatten kunnen echter niet zomaar lokaal worden bekeken in een browser. We weten dat dit soort pagina’s aan de serverkant worden gegeneerd. Daarom is een speciaal softwarepakket nodig dat het mogelijk maakt om PHP pagina’s lokaal te bekijken. Een veel gebruikte oplossing is het softwarepakket WAMP, dat automatisch Apache 1.3.31 , PHP5, MySQL database, PHPmyadmin and SQLitemanager installeert op de computer.
Voor dit project hebben wij gebruikt gemaakt van een online server. Om vlot te kunnen werken hebben wij een webgebruiker aangemaakt op dit domein met een autonome mappenstructuur. Hierdoor konden wij onafhankelijk werken en anderzijds vlot elkaars resultaten bekijken.
18
19
Ontwikkeling van een databank en dynamische website voor dj-profilering.
4.4 Markuptaal De basisstructuur van een webpagina wordt opgesteld aan de hand van de bekende markuptaal HTML (Hypertext Markup Language). Via HTML kan men volledig statische, op tekst gebaseerde pagina’s schrijven die via http verzoeken tot bij de client kunnen worden gebracht. Het is zo dat PHP (Hypertext Preprocessor), de serverside-scriptingtaal waarvoor wij hebben gekozen in feite in HTML wordt ingesloten.
Statische HTML heeft een aantal belangrijke voordelen: vooreerst is het zo dat welgevormde HTML door iedere browser correct kan worden weergegeven. Verder is HTML snel produceerbaar waardoor de taal vlot kan aangeleerd worden. 4 “De HTML (Hypertext Markup Language) werd ontwikkeld als een eenvoudige toepassing van SGML, een markuptaal die vooral gebruikt wordt in organsiaties met complexe publishing vereisten” 5
HTML is een opmaaktaal die gebruik maakt van zogenaamde “tags”. Opmaakcode die tussen ‘<>’ wordt ingesloten. De meeste tags bestaan uit een beginnende –en afsluitende tag, bv. . Voor sommige toepassingen volstaat het slechts één tag te gebruiken. Ter illulstratie geven wij hieronder een voorbeeld van een eenvoudige HTML implementatie: Hello World Hello World
Hoewel HTML cruciaal is, zijn er toch een aantal opmerkelijke nadelen aan verbonden: statische HTML is niet optimaal wanneer met een groot aantal pagina’s werkt en is er bovendien weinig interactie mogelijk. 4 5
PHP5 en MySQL, Het complete handboek, 2004, p 21. Cursus Internet Toepassingen, 2006-2007, p 38
19
20
Ontwikkeling van een databank en dynamische website voor dj-profilering.
HTML leent zich eveneens niet voor snelwijzigende content en personalisatie. Ook op het vlak van lay-out biedt HTML slechts een beperkt aantal mogelijkheden. 6 Daarom vragen uitgebreide webapplicaties aanvullende technologieën die het mogelijk maken faciliteiten zoals bijvoorbeeld databaseconnectiviteit te implementeren. 7
De huidige versie van HTML zal niet verder worden ontwikkeld, maar wordt opgevolgd door XHTML (Extensible Hypertext Markup Language). XHTML kent een striktere syntax dan HTML, maar biedt mogelijkheden. De basis van deze taal komt voort uit XML, een taal die een zeer grote opgang kent bij de ontwikkeling van webapplicaties. 8 XML biedt immers meer mogelijkheden dan HTML om structuur te brengen in gegevens.
4.5 Scriptingtaal 4.5.1 Server-side scripting
Voor de ontwikkeling van geavanceerde webapplicaties heeft men een bepaalde scriptingtaal nodig. Het uitkiezen van zo’n scriptingtaal is een belangrijke stap in de opbouw van het project. De meest frequente gebruikte codeertalen bezitten een aantal voor- en nadelen die men tegen over elkaar moet afwegen.
Voor het dynamische aspect van ons project hebben wij een keuze gemaakt uit verschillende “server-side scriptingtalen”. Een webpagina die server-side scriptingtaal bevat wordt door de server bewerkt of gegenereerd alvorens deze naar de client wordt verstuurd. Als resultaat wordt een HTML – pagina naar de client verzonden. De gebruiker zal in zijn pagina geen server-side code terugvinden en zal bijgevolg niet merken dat de toegestuurde webpagina dynamisch is opgebouwd.
De meest bekende (en meest gebruikte) server-side scriptingtalen zijn ongetwijfeld ASP (Active Server Pages) en PHP (Hypertext Preprocessor). Wij hebben gekozen voor PHP omwille van diverse redenen: 6
PHP5 en MySQL, Het complete handboek, 2004, p 21. PHP5 en MySQL, Het complete handboek, 2004, p 22. 8 Cursus Internet Toepassingen, 2006-2007, p 99 7
20
21
Ontwikkeling van een databank en dynamische website voor dj-profilering.
PHP is compatibel met verschillende besturingssystemen zoals Windows, Linux, Mac OS,..
PHP is open source
PHP voorziet in grote doorgroeimogelijkheden
PHP heeft op het net een grote aanhang waardoor technische ondersteuning snel te vinden is.
PHP biedt de mogelijk om snel en vrij gemakkelijk connectie te maken met achterliggende databases.
Met PHP kan men geen databases maken, maar men kan gegevens uit databases lezen en weergeven. Men kan ook gegevens wijzigen of nieuwe gegevens toevoegen aan een database. 9
PHP kent vele voor- en tegenstanders waardoor het een onbegonnen zaak is iedereen te proberen overtuigen van onze keuze voor PHP. Laat ons daarom stellen dat onze keuze geschoeid is op individuele voorkeuren en bijgevolg subjectief is.
PHP-pagina’s kunnen worden herkend via hun .php- extensie (nog andere extensies zijn mogelijk zoals bv .phtml, .php3, etc.) PHP opdrachten worden duidelijk afgebakend via vastgelegde tags: wordt gebruikt als PHP-eindtag. PHP opdrachten worden niet naar de browser verstuurd en zijn dus onzichtbaar voor de gebruiker. Hierdoor blijft de code van de programmeur beschermd en kan zij dus niet zomaar door iedereen worden geraadpleegd.
PHP werkt samen met een webserver. Doorgaans (PHP kan worden gebruikt met verschillende webservers) wordt Apache webserver gebruikt aangezien de PHP-scriptingtaal ontwikkeld is als een project van Apache Software. Apache is net als PHP open source, het is populair en het wordt bovendien als vrij stabiel beschouwd. Verder is er ook hier compatibiliteit met verschillende besturingssystemen als Windows, Mac OS, Linux en de meeste UNIX-versies.
9
Webdesign met PHP5, 2007, p 36.
21
22
Ontwikkeling van een databank en dynamische website voor dj-profilering.
“Hello World” PHP:
4.5.2 Client-side scripting 4.5.2.1 JavaScript
JavaScript is een client-side technologie die het mogelijk maakt om meer interactiviteit toe te voegen aan websites. JavaScript werd in 1995 ontwikkeld en had aanvankelijk de naam LiveScript. Het is belangrijk op te merken dat Java en JavaScript twee onafhankelijke technologieën zijn. Qua syntax bestaan er gelijkenissen, de semantiek is echter sterk verschillend.
Een JavaScript implementatie kan men als volgt herkennen: <script type="text/javascript"> // code
Een belangrijk voordeel van JavaScript is dat vrijwel alle moderne browsers deze scriptingtaal ondersteunen, al moeten we hierbij vermelden dat gebruikers de mogelijkheid hebben om JavaScripts uit te schakelen omwille van beveiligingsredenen.
In dit project hebben we JavaScript voornamelijk gebruikt om de lay-out van de webapplicaties verder te optimaliseren. We maakten gebruik van een JavaScript waarmee we onze verschillende contentelementen van afgeronde hoeken konden voorzien (Nifty Corners). Het script werd als bijlage toegevoegd.
4.6 Database 4.6.1 MySQL
Een belangrijk aspect van dit eindproject ligt vervat in de goede connectie met onze achterliggende database. Daartoe hebben wij een DBMS (Database management system) nodig dat de opgeslagen gegevens binnen onze database naar behoren beheert. 22
23
Ontwikkeling van een databank en dynamische website voor dj-profilering.
In de praktijk wordt vaak voor de combinatie PHP/MySQL gekozen. Vaak worden ze beschouwd als het optimale ‘dynamische duo’, en wel om diverse redenen: •
Ze zijn gratis.
•
Ze zijn webgeorienteerd: beide zijn er vrijwel specifiek op voorzien om dynamische websites te maken.
•
Eenvoudig in gebruik.
•
Snel: dynamische webpagina’s kunnen op korte termijn voor gebruikers beschikbaar gemaakt worden.
•
Goede communicatie tussen beide!
•
Ze worden allebei zeer uigebreid ondersteund op het web waardoor er grote hoeveelheden informatie en oplossingen voor handen zijn. 10
De connectie met de database werd via onderstaand script tot stand gebracht:
4.7 Lay-out 4.7.1 CSS (Cascading Style Sheets)
In onze doelstelling hebben wij vooropgesteld onze website te voorzien van een aantrekkelijke lay-out. Een goed design voor een website is vaak niet van primordiaal belang, maar gezien de 10
PHP5 en MySQL, Het complete handboek, 2004, p 23.
23
24
Ontwikkeling van een databank en dynamische website voor dj-profilering.
intentie van dit project (profilering van een Dj) is een mooie lay-out een sterke troef. Daarom hebben wij ook met zorg gezocht naar de juiste stijl. Vooral de bekende CSS-techniek (Cascading Style Sheets ) is van groot belang gebleken bij het verzorgen van een consistente lay-out die de compatibiliteit met verschillende browsers mogelijk heeft gemaakt.
CSS zorgen ervoor dat de code voor de opmaak van de webpagina’s een stuk vlotter verlopen. Een aangemaakte CSS-file zorgt ervoor dat men bepaalde stijlen kan toepassen op verschillende pagina’s en elementen. De stijlen moet men zelf definiëren met de specifieke syntax die voor CSS is voorzien.
Het bepalen van de hoofdstijl is geen evidentie. Niet alleen zijn lay-outkeuzes vaak persoonsgebonden, ook mag men de diversiteit van browsers niet uit het oog verliezen. Daarom hebben wij ook aandacht besteed aan de zogenaamde browsercompatibiliteit. Dit wil zeggen dat we ernaar gestreefd hebben onze webpagina’s zo correct mogelijk te laten weergeven in zoveel mogelijk browsers. Het merendeel van de gebruikers werkt nog steeds met Internet Explorer (6 of 7) van Microsoft, maar ook Firefox van Mozilla kent ondertussen een groot aantal aanhangers. Daarnaast is er nog Safari voor de Mac-gebruikers en de alternatieve webbrowser Opera. Een correcte
formulering
van
de
CSS-klasses
verhoogt
de
kansen
op
een
geslaagde
browsercompatibiliteit.
De afgeronde hoeken van de verschillende divisions binnen onze layout zijn een mooi voorbeeld van het verschil tussen browsers en hun interpretatie van de codeertaal. Origineel werden deze afgeronde hoeken gedefinieerd via CSS, maar al snel werd duidelijk dat enkel Firefox deze optie ondersteunde. Daarom zijn we op zoek gegaan naar een passend alternatief, waarbij een JavaScript-implementatie uiteindelijk de beste oplossing bleek.
Onze CSS zijn vrijwel allemaal ‘external Style Sheets’, wat wil zeggen ze in een apart document met de extensie .css zijn opgenomen. Hierdoor is het gemakkelijk om snel en efficiënt verschillende webpagina’s op te maken. Ter illustratie tonen wij hieronder hoe een externe CSSfile in een html wordt opgenomen: 24
25
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Dj Ultimassotitle> Hier komt de inhoud van je pagina.
4.7.2 Flash Actionscript
Het ontwikkelen van een dynamische website moet op een dubbelzijdig niveau worden beschouwd. Het kernwoord ‘dynamisch’ is niet enkel van toepassing op de codedynamiek en de interactiviteit, maar tevens op de dynamiek van de lay-out.
Een veel gebruikte designmethode die een website dynamischer kan maken is het gebruik van Flash. Via deze software is het mogelijk om animaties op te bouwen die via tijdseenheden(frames) worden bepaald. Websites die zich visueel willen onderscheiden worden vaak via Flash opgebouwd.
Voor een correcte weergave van Flash-objecten moet een plugin geïnstalleerd zijn bij de client. Aangezien de browser van de client in staat moet zijn om een Flash-object weer te geven, hebben wij een link geplaatst op onze index pagina waar men deze plugin kan downloaden. De installatie hiervan loopt bijzonder vlot (2 minuten @ 56K Modem) en zorgt dus niet voor vervelende ongemakken bij de client. Tevens gaan we ervan uit dat het gros van de webgebruikers reeds over deze plugin beschikt.
Flashbestanden zijn op onze server terug te vinden onder de .swf extentie. Dit bestandsformaat bevat de uiteindelijke weergave van de zogenaamde flash-movie. Onze werkbestanden (.fla’s) daarentegen worden ook bijgevoegd op CD-ROM (in de map ‘fla’), aangezien enkel daarin de weergave van het ActionScript en de geconstrueerde opbouw mogelijk is.
25
26
Ontwikkeling van een databank en dynamische website voor dj-profilering.
Binnen onze website maken we gebruiken van vier Flashbased bestanden. Objecten die gecreëerd zijn binnen Flash worden Flashmovies genoemd. Het is namelijk zo dat een Flash – document grosso modo kan beschouwd worden als een ‘movie’ die bestaat uit verschillende lagen (‘layers’), een groot aantal ‘movieclips’ en vaak ook meerdere scenes.
Het meest uitgebreide Flash – bestand binnen dit project is de introductie animatie op de indexpagina. De movie is opgebouwd uit twee aparte scenes, respectievelijk de preloader en de eigenlijke movie zelf. De volledige constructie is binnen Flash vervaardigd. We hebben dus geen bestaande afbeeldingen of andere prefabelementen gebruikt. De volledige animatie is van scratch opgebouwd.
Preloader van de animatie:
Animatie:
26
27
Ontwikkeling van een databank en dynamische website voor dj-profilering.
5. Operationele beschrijving van de applicaties Hieronder volgt een beschrijving van onze applicaties op basis van een aantal screenshots. U zal hierdoor een beter zicht krijgen op de uiteindelijke implementatie met de daarbijhorende functionaliteiten. Uiteraard kan U alle functies die worden besproken online uittesten door naar de URL te surfen die wordt vermeld op de hoes van de bijgeleverde CD-ROM. Op die CD-ROM treft U overigens alle bestanden aan die de constructie van deze website mogelijk hebben gemaakt.
5.1 Index De indexpagina (index.php) van onze website, die volgt na de inleidende intro-animatie, bevat het globale raamwerk met daarbij een voorstelling van Dj Ultimasso binnen de contentsectie. De index.php pagina is een vrij eenvoudige pagina die bestaat uit een aantal includes. Een include zorgt ervoor dat een pagina als het ware andere pagina’s kan insluiten. De inhoud van een pagina wordt geplaatst waar de pagina wordt aangeroepen. Het globale raamwerk bestaat uit een header die twee Flash-movies bevat, een navigatiegedeelte met een aantal kleine applicaties en een footer.
Deze worden als volgt in de code vervat : //Het insluiten van de header en het navigatiegedeelte (+kleine applicaties)
include ("header.php");?> include ("nav.php");?>
// Het insluiten van de begintekst
include ("home.php");?>
//Het insluiten van de footer include ("footer.php");?>