40
Produktrapport Forord Dette prosjektet er ett hovedprosjekt i data ved Høgskolen i Oslo, avdeling for ingeniørutdanning, og gjennomføres i samarbeid med Charity Docters. Dette dokumentet er produktrapporten for hovedprosjektet, og skal gi en oversikt over hvordan hele systemet er bygget opp og hvordan det fungerer i praksis. Veiledning for klargjøring og installasjon av systemet er også en del av rapporten. Det forutsettes at leseren er kyndig i Joomla, PHP, HTML og MySQL databaser. Vi retter en stor takk til veilederen Alfred Bratterud som anbefalte oss å bruke Joomla og bidro med rådgivning under utviklingsprosessen og dokumentasjonen. Til oppdragsgiver som har vist stor samarbeidsvilje og stilte til rådighet når vi trengte dem. Det rettes også en takk til sykkelgutta fra (www.kapptilkapp.no) som har bidratt med bildemateriale fra deres ekspedisjon i Afrika. Bildene, skjermbildene samt illustrasjoner i oppgaven er produsert av gruppen, andre bilder har vi mottatt fra Jørn Wichne Pedersen (www.kapptilkapp.no) med fri tillatelse til publisering. 41
Innhold 14 TEKNOLOGI... 46 14.1 Betingelser... 46 14.2 Valg av teknologi... 46 14.3 Beskrivelse av Teknologi... 47 14.3.1 CMS... 47 14.3.2 Om joomla... 47 14.4 Krav for bruk av teknologien... 49 14.4.1 Systemkrav for Joomla 1.5... 49 14.4.2 Tilgang til php.ini... 50 14.5 Andre løsninger... 50 14.5.1 Wordpress... 50 14.5.2 Drupal... 51 15 OPPBYGGING OG VIRKEMÅTE... 52 15.1 Introduksjon... 52 15.2 Design, brukergrensesnitt og tilgjenglighet... 52 15.2.1 Layout... 52 15.2.2 Grensesnitt og Brukervennlighet... 53 15.3 Kommunikasjon... 54 15.4 Delene... 54 15.4.1 Brukerdel... 54 15.4.2 Administratordel... 55 16 DATABASE... 60 16.1 Introduksjon... 60 16.2 Strukturer... 61 16.2.1 Tabeller users... 61 16.2.2 Tabeller Components... 62 16.2.3 Tabeller Modules... 63 16.2.4 Tabeller session... 64 16.2.5 Tabeller Menu... 64 16.2.6 Tabeller Videos"... 65 42
17 FUNKSJONALITET... 66 17.1 Templates... 66 17.2 Noen CSS endringer... 67 17.2.1 CSS endringer i layout.css for optimalisering av possisjon... 67 17.3 Moduler, komponenter & Php modefikasjon.... 68 17.3.1 Contus HD Video Share... 68 17.3.2 Banner... 70 17.3.3 Flexi Contact... 70 17.3.4 mod_yoo_login... 70 17.3.5 mod_mainmenu... 71 17.3.6 Search Tube... 71 17.3.7 Advanced Copyright Module... 71 17.3.8 w3c.org CSS/XHTML Validator... 71 17.3.9 Front-end Font Size Adjuster... 71 17.3.10 Endringer i php.ini... 72 18 SIKKERHET... 73 18.1 Generelt... 73 18.2 Passord... 73 19 PRODUKT VS KRAVSPESIFIKASJON... 74 20 VIDEREUTVIKLING... 74 43
Del 1 13 Innledning 13.1 Om arbeidsgiver CharityTube er ett sideprosjekt for Charity Doctors. Charity Doctors er et nyetablert veldedighetsforetak bestående av lege Neena Al-Mustafa og lege Daniel Baffoe. I samarbeid med Fattighuset i Oslo har de fått et lokale i Fattighuset til disposisjon for å drive Deres virksomhet. Dette er et engasjement som drives på fritidsbasis. Organisasjonen ble stiftet januar 2010. Charity Doctors har ingen kommunale eller statlige avtaler med tanke på refusjoner eller lignende. Organisasjonen har heller ingen andre inntektskilder. Charity Doctors er kun basert på egeninnsats og donasjoner fra privatpersoner og bedrifter. 13.2 Om prosjektet Målet med prosjektoppgaven er å gi veldedighetsorganisasjoner en ny måte å promotere seg selv på. Det skal lages en web-side som fungerer som en videokanal hvor alle store og små organisasjoner kan laste opp en video som kan gi litt beskrivelse rundt selve organisasjonen og hvilke områder organisasjonen tar for seg. På denne måten blir det letter for potensielle givere å få en oversikt over hva som finnes av veldedighetsorganisasjoner der ute. Det blir også enklere for mindre organisasjoner å få et ansikt utad. Web-siden skal hete charitytube og kommer til å stå i stil med den mer kjente videokanalen, youtube. En CharityTube løsning vil definitivt være med å øke små veldedighetsorganisasjoners inntektskilder og popularitet. 13.3 Dagens situasjon Som situasjonen er i dag, må veldedighetsorganisasjoner promotere seg selv via dør til dør kampanjer, standaktivitet, facebook profiler eller private websider. Dette er veldig resurskrevende og ikke alltid like vellykket. Det er ingen samleplass på nettet som tilbyr promotering av veldedighetsorganisasjoner. Med tanke på hvor mange små veldedighetsorganisasjoner det finnes i verden, kan man tenke seg hvor mange ressurser som frigjøres ved å tilby en tilsvarende løsning. 44
13.4 Mål Målet med prosjektoppgaven var at veldedighetsorganisasjoner skal kunne benytte seg av charitytube systemet for å promotere seg selv og øke interessen rundt dem. Systemet bør: kunne registrere nye brukerkonto på en sikker måte holde orden på rettighetene til brukerne ha en login/logout funksjon ha en egen brukermeny som vises kun etter innlogging med diverse hjelpemidler gjøre det mulig for brukere å laste opp video på opptil 100 MB ikke publisere video før administrator godkjenner den innholde kommentarfelt for videoer ha en søkemotor for video være enkel å administrere, admin har ingen programmeringskunnskap. Opprettholde personvernet til den enkelte Være 100% nettbasert Funksjonalitet som kan implementeres: Paypal donasjon direkte fra charitytube Charitytube forum 13.5 Rammebetingelser Gruppen står fritt til å velge hvilket språk vi vil benytte for å programmere charitytube. I utgangspunktet tenker vi å modellere/beskrive systemet 100% og ikke minst lage skisse av systemet. Gruppen velger å utvikle systemet ved hjelp av Joomla, Joomla er et GPL-lisensiert publiseringsverktøy basert på åpen kildekode. Vi planlegger å bruke PHP som programmeringsspråk og MySQL som database verktøy, ettersom det er disse verktøyene vi har mest erfaring med når det gjelder programmering av web- løsninger fra høgskolen i Oslo. De ferdige websidene skal støtte Internet Explorer, Mozilla Firefox og Opera som minste krav. 13.6 Konklusjon Vi mener charitytube vil være til stor hjelp for veldedighetsorganisasjoner og givere. Det vil gi en større oversikt over hjelpeorganisasjoner enn hva det er per dags dato. Systemet vil lette arbeidsmengden med tanke på promotering av organisasjonenes arbeid, og være til stor hjelp for giverne da de kan forholde seg til en samleside, og ha større sjanser for å finne eksakte og mer konkrete prosjekter de ønsker å støtte, for eksempel jenteskole i Tanzania. 45
Del 2 14 Teknologi 14.1 Betingelser Oppdragsgiveren ga oss ingen betingelser i forhold til valg av teknologi eller plattform. Vi fikk friheten til å velge den teknologien vi ønsket. Den eneste betingelsen var at man skulle kunne laste opp video direkte fra egen maskin, altså man skulle ikke være avhengig av en tredjepart for eksempel youtube og at innholdet på siden skal være på engelsk. 14.2 Valg av teknologi Det eneste egnede programmeringsspråket vi har vært borti på HiO er PHP. Derfor var det veldig naturlig for oss at det var dette vi skulle benytte oss av. PHP er også åpent tilgjengelig og kan kjøres på alle plattformer. Vi vil også benytte oss av MySQL som databaseplattform. MySQL- plattformen har vi brukt tidligere og også i andre prosjekter ved HiO. Ettersom videoløsningen skal være nettbasert, må vi også benytte oss av HTML, CSS, FLASH og javascript. Etter samtaler med veileder ble vi anbefalt et CMS-program som heter Joomla. Joomla er basert på php og mysql og ville ifølge vår veileder passe perfekt til den type nettside vi nå skulle lage, altså en videokanal. 46
14.3 Beskrivelse av Teknologi 14.3.1 CMS Content Management System er en programvare som kjører på en webserver. Oftest som en databaseapplikasjon som i Joomla sitt tifellet; med MySQL. Fig3 Joomlas grafiske brukergrensesnitt for administrator. Hovedvekten til CMS systemet er den grafiske formen for administrering. Administrator kan enkelt gjennom brukergrensesnittet lage artikler, laste opp bilder, laste opp video og vedlikeholde siden generelt for å opprettholde nettstedets kompleksitet og kontinuitet. Alt dette uten tekniske kunnskaper om html, css eller andre programmeringspråk. 14.3.2 Om joomla Joomla er et populært og prisbelønt Content Management System, også kalt CMS. Systemet er et verktøy for publisering av nettsteder og kraftige online applikasjoner. Navnet kommer fra lyden av et Swahilisk ord. Ordet «jumla» betyr «all together» eller ler «som en helhet». Navnet ble valgt for å reflektere samholdet i Joomla! Det er mange faktorer som spiller inn angående Joomlas økende popularitet etter at den første versjonen ble publisert september 2005. Vi skal her snakke litt om de største og viktigste aspektene ved vårt valg av utviklingsverktøyet Joomla!: 14.3.2.1 Åpen kildekode Omtales ofte med begrepet «Open Source» på engelsk, betyr at kildekoden til et dataprogram, i dette tilfellet Joomla!, er gjort tilgjengelig for alle. Det finnes flere forskjellige lisenser for «Open Source», men den mest brukte er GNU-General General Public License (GPL). 47
14.3.2.2 Teknologien Joomla er skrevet i PHP, bruker objektorientert programmering (OOP) teknikker og programvare design mønstre, lagrer data i en MySQL database. Sidene blir skrevet med HTML og CSS. PHP PHP er et dynamisk, tolket og løst typet programmeringsspråk hovedsakelig brukt for å utvikle dynamiske nettsider. PHP syntaks ligner på C og Perl. Den vanligste implementasjonen av PHP er en fri og åpen versjon skrevet i C og distribuert av The PHP Group via php.net. HTML HyperText Markup Language (HTML, hypertekstmarkeringsspråk) er et markeringsspråk for formatering av nettsider med hypertekst og annen informasjon som kan vises i en nettleser. HTML benyttes til å strukturere informasjon angi noe tekst som overskrifter, avsnitt, lister og så videre. CSS Cascading Style Sheets (CSS) er et språk som brukes til å definere utseende på filer skrevet i HTML eller XML. Prinsippet er at HTML- eller XML-dokumentet utelukkende skal beskrive struktur og semantikk, mens oppsett, farger og annen stilinformasjon skal beskrives ved hjelp av CSS. Stilinformasjonen kan integreres i selve dokumentet eller skilles ut som en egen fil med endelsen.css. Et ubegrenset antall dokumenter kan peke til og styres av samme.css-fil, noe som er styrken i CSS: Ved å endre på en fil, kan man endre fargebruk, bakgrunnsbilder osv. i alle dokumenter som peker til CSS-filen. MySQL Mysql er et SQL-basert databaseadministrasjonssystem som er lisensiert under GPL. Mysql er også lett å bruke og sette opp, gratis og holder en høy ytelse i forhold til både pris og krav til maskinvare. 14.3.2.3 Gode administrator muligheter/enkel bruk Joomla har meget gode administratormuligheter, og det grafiske brukergrensesnittet overgår all forventning. Som ansvarlig av en ferdigstilt webside vil administrator kunne vedlikeholde, publisere og oppdatere data osv. uten noen tekniske ferdigheter eller kunnskap om hverken html, css eller andre programmeringspråk. 48
14.3.2.4 Gode utvidelsesmuligheter Joomla er veldig brukervennlig og fleksibelt, og har enorme utvidelsesmuligheter. Det finnes et stort arsenal av funksjoner innebygd i joomla, men den reelle makten ligger i måten du tilpasser Joomla på, og hvordan du bruker utvidelsesmulighetene. På tross av Joomlas brukervennlighet og innebygde styringssystemer er det en svært vanskelig læringsprosess som må gjennomgås om man aldri har arbeidet med dette tidligere. Heldigvis finnes det en mengde lærings-materiale tilgjengelig på Internett. 14.4 Krav for bruk av teknologien For å kunne installere joomla i webserveren er det visse krav som må oppfylles. 14.4.1 Systemkrav for Joomla 1.5 Programvare Anbefalt Minimum PHP * 5,2 + 4.3.10 MySQL ** 4.1.x + 3,23 Apache *** (med mod_mysql, mod_xml, og mod_zlib) 2.x + 1,3 Microsoft IIS **** 7 6 fig4 systemkrav for joomla Joomla er ikke kompatibel med MySQL 6. Joomla er optimalisert for Apache server. Joomla 1.6 krever altså PHP 5 eller høyere, og MySQL 5. Ettersom vi skal lage en videotube må vi også ta hensyn til lagringsplass når vi velger webhotel. Vi valgte derfor å binde oss til Inmotion Hosting som innehar følgende relevante spesifikasjoner: Disk plass (GB) ubegrenset FTP Accounts (1,000 stk) Sikker POP3/IMAP/SMTP Epost PHP - Versjon 5 tilgjengelig MySQL - Versjon 5 tilgjengelig 49
14.4.2 Tilgang til php.ini Det var viktig for oss at vi kunne ha full tilgang til php.ini, slik at vi selv kunne endre på blant annet maksimal opplasting per person, per video. Mange webhotel gir deg ikke tilgang til å overstyre denne fila. Her er endringene vi gjorde for å tilpasse vårt prosjekt: php.ini: upload_max_filesize = 100M (Default: 12M) post_max_size = 20M (Default: 10M) 14.5 Andre løsninger Det finnes flere CMS (content management system) løsninger i dag, de mest populære er Wordpress, Drupal og Joomla. De siste årene har Wordpress vist seg frem som en utfordrer og er på vei opp for å være en ekte CMS, mens de to andre variantene har kjempet i toppen for å være den beste CMS løsningen i markedet. Begge er åpne kildekoder, og har tusenvis av medlemmer som hjelper med videreutviklingen av systemene. 14.5.1 Wordpress Mens Wordpress regnes som underdog i CMS krigen, er den definitivt kongen av blogging programvare, noe joomla og drupal bør gjøre noe med i fremtiden. Wordpress er et utmerket system å bruke når du oppretter et nettsted som lar deg raskt få dine tanker ut på nettet, men mens det er ofte brukt som en blogg, kan det være konfigurert til å fungere i mange andre interessante måter også. Fordeler med Wordpress: Enkel å bruke, ikke behov for modifikasjoner. Utmerket for blogging, eller dele taker i en sekvensiell måte. Brukere med minimalt it kunnskap kan få tak på det meste. Ulemper med Wordpress: Ikke utviklervennlig Brukerne klager ofte på systemet Oppdateringer fører oftere til problemer enn løsninger 50
14.5.2 Drupal Liker man å håndkode innholdet i siden på egenhånd, da er Drupal det riktige valget. Dette avanserte CM Systemet likner mer en utvikler plattform enn tradisjonell CMS. Det er ikke riktig å si at kun programmerere og utviklere kan bruke Drupal, men de vil føle seg mer hjemme enn ved bruk av Wordpress. Nettsidene som blir laget ved hjelp av drupal fungerer på en fin måte, men de er ikke kjent for å fokusere veldig mye på design. Det er litt synd da det ville vært perfekt med en sterkere brukervennlighet og design grensesnitt. Fordeler med Drupal: Ekstremt utviklervennlig Stor popularitet blant brukere, hundrevis av funksjoner og koder tilgjenglig. Kan brukes til å lage fantastiske hjemmesider som overgår mange der ut. Ulemper med Drupal: Lite design og brukervennlig. Vanskelig for en med lite kode kunnskaper. Administrator må ha gode programmeringskunnskaper for å administrere siden. Å publisert en Drupal webside koster mye tid, dermed mer penger enn Wordpress eller Joomla. 51
Del 3 15 Oppbygging og virkemåte 15.1 Introduksjon Under denne delen går vi gjennom hensikten og hva systemet kan gjøre. Formålet med websiden www.charitytube.com, er å gi ett enkelt system til veldedighetsorganisasjoner i hele verden for å kunne promotere og fortelle om seg selv ved å laste opp korte videosnutter. Charitytube bygger på prinsippet om at de registrerte skal laste opp video om seg selv og arbeidet deres, besøkende skal kunne se de forskjellige videoene og deretter kontakte organisasjonene for donasjoner. At flere organisasjoner samles i en felles side, blir det letter for givere å finne veldedigheten de ønsker å støtte. Det er selvfølgelig mange utfordringer knyttet til oppnåelsen av dette på en ryddig måte. Administrator må passe på at data kontrolleres før den blir publisert, at det ikke er mobbing og trakassering av organisasjoner og målgrupper. Administrator skal ha mulighet til å utestenge de som prøver seg. Dette er bare noen av utfordringene som vi har måttet løse underveis. Systemet består av to deler: bruker og administrator del. De fyller forskjellige krav og er tydelig fraskilt. Begge delene er webbasert og er tilgjengelig fra hvilken som helst plass i verden, så lenge brukeren har nettilgang. I utgangspunktet skal alle nettlesere og operativsystemer gi samme brukeropplevelse. Alt dette var en selvfølge når vi startet designet av websiden. 15.2 Design, brukergrensesnitt og tilgjenglighet For å oppnå best mulig brukervennlighet, har vi prøvd å lage ett grensesnitt som er enkel og intuitivt. For å unngå at brukerne skal rote seg bort i de overflødige funksjonalitetene, har vi tatt med kun det som er nødvendig for systemet. 15.2.1 Layout Når det gjelder fargevalg, har vi satset på farger og nyansene som er behaglige for brukerne. Kontrasten mellom grått og blått faller i god smak, det har blitt brukt mye tid og resurser på fargevalg da dette er en viktig faktor for oppdragsgiveren. Ved å legge alt som er relevant for brukerne i en egen user menu til venstre i forsiden(fig5), har vi redusert antall klikk ganske kraftig. 52
Fig5 layout av websiden Oppdragsgiver ønsket en logo for CharityTube, og vi fikk frie hender. Ettersom det dreier seg om en tube valgte vi å lage en logo som lignet youtube sin logo, slik at besøkende på en intuitiv måte vil oppfatte at websiden er en «tube». Logoen ble laget med Adobe Photoshop. Fig6 logo 15.2.2 Grensesnitt og Brukervennlighet Store deler av brukergrensesnittet er skrevet i HTML, PHP og CSS. Ved det har vi redusert kravet til maskinvare og programvare hos klient maskinene. Det var uunngåelig å benytte flash for videofunksjonen, dette setter derimot ett krav hos brukerens maskiner. Vi har også laget nettsiden slik at den kan skaleres s ved hjelp av den innebygde zoom funksjonen i nettleseren på en god og hensiktsmessig måte. I utgangspunktet er teksten godt tilpasset for det meste av brukermassen. Skulle det være noe tvil, finner man en funksjon i headeren som endrer skriftstørrelsen på siden. Nettsiden er validert av W3C, både HTML koden og CSS filene er godkjent. Noe som nok en gang hjelper til på nettleser kompatibilitet og unngår at man får seg en overraskelse når brukere benytter forskjellige nettlesere enn de som er blitt brukt i interne tester. Vi valgte å 53
programmere i W3C HTML standard: XHTML Transitional 1.0 siden det er det vi er vant til, og det er dette som er den standarden som brukes hyppigst til dags. 15.3 Kommunikasjon Kommunikasjon fra klient til server og omvent skjer gjennom internett og HTTP protokollen. Systemet fungerer uten bruk av cookies som lagres på klientmaskinen. Det er serveren som holder rede på hvem som er innloget ved hjelp av session variabler. Ingen informasjon om aktiviteten på applikasjonen vil bli lagret av nettleseren. 15.4 Delene 15.4.1 Brukerdel En viktig funksjonalitet i grensesnittet er registrerte brukeres mulighet til å laste opp videoer. Det vil derfor dukke opp en brukermeny når bruker har logget inn med brukernavn og passord. Figuren under viser alternativene i brukermenyen. Fig7 User Menu Naturlig nok finnes det funksjoner for hver brukers mulighet til å slette videoer, endre på videoer og holde generelt oversikt over sin egen data. Vi har modifisert videokomponenten slik at den kun viser kravspesifiserte sifiserte områder på en intuitiv og enkel måte for brukeren. Figuren under viser hvordan dette fungerer i praksis. Fig8 My Videos 54
Ved opplasting av video må følgende data fylles inn for å kunne ferdiggjøre opplastingen Valg av url video, eller opplasting fra egen pc Tittel Thumbnail bilde Beskrivelse Valg av kategori Og om video skal vises kun for medlemmer eller for alle besøkende. Vi har satt følgende begrensninger, Fig9 Last opp en video Maks 100 MB video 200 ord til beskrivelse Maks 1 kategori per video 15.4.2 Administratordel Personene med det overordnede ansvaret for websiden, skal benytte seg av administratorsiden for å gjøre endring og holde oversikt. Alt dette gjennom et brukervennlig grafisk grensesnitt. Ettersom administrator i dette tilfellet ikke har noen data-tekninske tekninske kunnskaper, har vi valgt å ha fokus på kun den viktigste biten av administrators mange muligheter. Under ser du hovedmenyen i det grafiske grensesnittet til joomla for administrator: Fig10 Administrators kontrollpanel Vi har gitt administrator mulighet å gjøre følgende endringer på selve websiden etter innlogging: 55
15.4.2.1 Registrere, re, endre eller slette brukere Fig11 Bruker oversikt Her ser vi hvordan administrator kan holde oversikt over, redigere, eller eventuelt slette brukere. Det finnes også mulighet for å legge til nye brukere. Henter følgende fra jos_users databasen: ('a.name', 'a.username', 'a.block', 'groupname', 'a.email', 'a.lastvisitdate', 'a.id') 15.4.2.2 Endre på menyene Som administrator kan du også endre på menyen. I eksempelet nedenfor kan administrator gjøre endringer i hovedmenyen, eventuelt legge til nye emner. Fig x i front end, og fig x i back end) Fig12 Oversikt over menyer i back end systemet. Fig13 Hovedmenyen 56
15.4.2.3 Godkjenne og publisere brukernes videoer Her følger endringene administrator kan foreta seg under Videokomponenten: Når brukerne laster opp en video vil den ikke automatisk bli publisert. Videoen venter da på godkjenning fra administrator. Nedenfor viser vi hvordan administrator enkelt kan publisere, eller ikke publisere videoer på som er på vent. Her kan det også slettes videoer, redigere videoer eller sette videoer som anbefalt (featured). Her holder administrator også en generell oversikt over videoene, og kan se feks hvor mange ganger en video har blitt vist. Fig14 Oversikt over opplastede videoer Som figur 14 viser kan administrator enkelt merke en video og publish/unpublish. 57
15.4.2.4 Gjøre generelle layout endringer Innebygd i Joomla finnes det funksjoner som gjør det mulig å endre noen av parametrene i selve layouten. Administrator har som vist nedenfor mulighet til å endre noen av egenskapene i CSS-filene uten å gå inn i selve CSS- og HTML kodene. Fig15 Panel for endring av layout 58
15.4.2.5 Redigere eller lage nye kategorier I likhet med videoene kan administrator også redigere videospillerens kategorier. Lage ny, endre eller slette kategorier. Fig16 Oversikt over videokategorier 15.4.2.6 Endre avanserte innstillinger på videospilleren (høyde/bredde, etc.) Administrator har også mulighet til å endre innstillingene til videokomponentens parametere. Fig17 Innstillinger for videospiller 59
Del 4 16 Database 16.1 Introduksjon CharityTube bruker SQL-setninger for samtlige gjøremål. Programmeringen er gjort med tanke på at websiden skal brukes i ett MySQL-tjener miljø. Under installasjon av joomla blir databasen vi har opprettet fylt opp med forskjellige tabeller for administrering av siden. For å forstå best mulig funksjonaliteten til siden og oppbygging av den, har vi satt oss godt inn i innholdet og funksjonen til disse tabellene. For en ryddig databasen om minimalt med dobbeltlagring, satte vi oss som mål at den følger tredje normalform. Dataene som blir lagret er delt opp logisk, slik at man ikke skal trenge å blande inn for mange tabeller for å komme frem til den dataen man ønsker. I denne delen av rapporten vil hele databasens oppbygning og funksjon bli gått gjennom. Funksjonaliteten som dekkes av de ulike tabellene vil bli forklart, og verdier som kan virke kryptiske vil bli gitt en mening. Målet med dette er å gi administrator en forklaring på hvordan han skal behandle informasjon som skal ut eller inn fra databasen. Vi har prøvd å gjøre tabellene og datastrukturene så enkle og forståelig som mulig, slik at det skal være lett å sette seg inn for administratorer og videreutviklere. Alle forklaringene av de ulike tabellene som fortsetter videre inneholder en figur printet ut fra MySQLWorkbench. 60
16.2 Strukturer Det er opprettet flere tabeller i databasen, under forklares 16.2.1 Tabeller users Denne tabellen inneholder nødvendig data om alle brukere. Informasjon som lagres i tabellen er: Ett unikt bruker identifikasjonsnummer, som er usynlig og transparent for brukere. En tabellene bør alltid ha en unik primærnøkkel, det for å unngå problemer når man registrere store mengder data og senere finne den fram. Navn, brukernavn, email og passord blir også lagret. Passordet blir ikke lagret i klartekst, men i hash form. Tabellen users forteller også om slags brukertype som er registrert. Administratorer, superbrukere, og flere brukertyper er lagret i samme database. Det var ikke nødvendig å splitte de i flere tabeller da en bruker kan kun ha en tittel, man kan ikke være administrator og superbruker samtidig, og dermed får man aldri dobbelt lagring. Users forteller også om når brukeren ble registrert, om kontoen er aktivert og siste innloggingsdag. Fig18 Databasetabell users 61
16.2.2 Tabeller Components Components tabellen tar for seg all nødvendig data om komponentene som er installert i joomla. Både hovedlinken og underlinkene i komponenten. Dette er en tabell som er opprettet av joomla og ikke påvirket av oss. Tabellen har den unike identifikasjonsnummer, som blir gitt til hver komponent. Dette er primærnøkkelen. Tabellen forteller også om navn, om det er hovedlink eller underlink til en komponent i administrator menyen. Den innholder også bilde/logo til komponenten. Fig19 Databasetabell komponenter 62
16.2.3 Tabeller Modules Dette er også en tabell som er implementert av joomla. jos_modules fremstiller dataen om de forskjellige modulene som er blitt installert. Tabellen har en identifikasjonsvariabel id, som er primærnøkkel. jos_modules forteller oss tittel på modulen, innhold (f.eks logo), plasserings rekkefølge, posisjon/plassering i siden, publiseringsstatus, navn på modulen. Dataene i denne tabellen brukes i administrasjonsdelen av systemet, under module manager Fig20 Databasetabell moduler 63
16.2.4 Tabeller session Det er mange grunner til å bruker session når man oppretter en web-basert applikasjon som bruker PHP. Session informasjon, som standard, er lagret i en fil på webserveren. Det er ikke særlig sikkert. Denne tabellen har en session_id som identifikasjonsvariabel. Den forteller også om brukernavn til den som er pålogget, tiden han logget inn, om man er gjest eller bruker, hvis bruker lagres det brukerid fra tabellen user, brukertype, gruppeid, klientid, og dataen om brukeren. Under data lagres det alt info om nettleser, os og diverse data. Fig21 Databasetabell session 16.2.5 Tabeller Menu Fig22 Databasetabellene menu og menu_type Meny tabellen innholder den unike id identifikasjonsnøkkel for hver punkt i en menytype (f.eks Home i mainmenu). Dette er enda en tabell som er implementert av joomla i likhet med modules og components. Den innholder data om hvem punkt i en meny, menutype, navn, link man blir sendt til når man klikker, typemeny, om den er publiser, om det er en undermeny, komponentid hvis det er en av type komponent, sortering av rekkefølge, parameter innstilling og om hvilken av menypunktne som er forsiden. 64
16.2.6 Tabeller Videos" hdflv_category er en tabell med data om video kategoriene. Den består av en primærnøkkel id, category navn, om det er underkategori id, sortering etter rekkefølge, og om kategorien er publisert. Fig23 Databasetabell Videokategori Her lagres all dataen etter at en video er blitt opplastet. Tabellen har også en unik primærnøkkel som brukes for binde den sammen med andre tabeller. Det lagres brukerid av opplaster. Published er en variabel som forteller om videon er publisert eller ikke. Den er satt som default å ikke publisere. Andre data som lagres er tittel på video, om den er blant de anbefalte, antall ganger den er blitt vist, og viltype. Antall ganger vist er veldig kjekt da man kan skille mellom de populær videoen. Man finner også link til video, dette er en link til ftp serveren eller tredjepart servere som youtube, google osv. Beskrivelse av video og opplastingsdato er også nedskrevet i denne tabellen. Fig24 Databasetabell opplasting av video 65
Del 5 17 Funksjonalitet 17.1 Templates Templets handler om joomlas layout og visuelle fremvisning. Det er en slags mal som kan redigeres til ønskelig resultat. Templaten er lagret seperat fra alt annet innhold på MySQL databasen. Templetene finner man i «templets» mappen i ROOT. Det finnes forskjellige templates, men hver templat består av følgene filer: index.php Denne filen inneholder HTML, PHP og noen mulige javascript som definerer rammene til websiden. Ved å kombinere index.php med CSS- og bilde filer får man helheten av utformingen. templatedetails.xml TemplateDetails.xml filen er en viktig fil. Uten den vil ikke templaten bli gjennkjent av Joomla. Filen inneholder "metaverdier" om malen (tabeller, rader, indekser og struktur ). template_thumbnail.png Dette er bare bilde av templaten, en thumbnail. template_css.css Denne fila ligger i css-mappen. Her ligger CSS filene (Cascading Style Sheets) som håndterer de visuelle effektene på nettstedet. Alt fra fontstørrelse til farger. Man kan ha mange forsjellige css filer forutsatt hensiktsmessig HTML referanse i index.php-filen. Eventuelle media filer Media filer som er lokalisert i «images» mappen. Filer som.gif.png.jpg. Dette er grafiske elementer koblet opp mot css filene. For eksempel så ligger logoen våres i denne mappen. Som nevnt tidligere kan administrator gå inn å endre noen simple innstillingene uten å grave i kodene. Vi har naturlig nok endret og konfigurert vår egen mal ved hjelp av justeringer i php, css og html kodene. 66
17.2 Noen CSS endringer Det første som var viktig for våres del var å endre posisjoner som joomla-templaten hadde satt. Vi visste hvordan vi ville ha det og hadde lagd en skisse med arbeidsgiver fra starten. Templetene fungerer med forskjellige posisjoner, så først og fremst måtte disse stå riktig. 17.2.1 CSS endringer i layout.css for optimalisering av possisjon For optimalisering Først og fremst var det viktig at posisjoneringene fikk samme output i de forskjellige nettlesere (IExplorer, Firefox, Opera, Chrome). Ofte oppstår det pikselproblemer på tvers av nettlesere, dette ordnet vi med å implementere følgende kode i toppen av CSS-filen for å resette alle satte posisjonsendringer: *{margin:0; padding:0;} kode benyttet for endring av posisjonering: position:(fixed eller ralative); z-index: «antall»; padding-top: «antallpiksler»px; padding-left: «antallpiksler»px; padding-right: «antallpiksler»px; margin-top: «antallpiksler»px margin-bottom: «antallpiksler»px margin-right: «antallpiksler»px margin-left: «antallpiksler»px width: «antallpiksler»px ; height: «antallpiksler»px ; float:«left/right/none»; I eksempelet nedenfor kan man se hvordan posisjonene er lagt opp og hvordan css-filen påvirker posisjonene. Alle posisjonene er merket med svart firkant. 67
Fig25 Posisjoner For å ha en ryddig template har vi slettet de module-posisionene som var unødige. Dette gjorde vi via ftp klienten, hvor vi fikk tilgang til template.php. Dermed sitter vi igjen kun med det som er nødvendig for vår del. 17.3 Moduler, komponenter & Php modefikasjon. En modul i joomla er en tilleggsfunksjonalitet til nettsiden. Den er som regel knyttet til en komponent. Som joomlabruker kan man laste ned tusenvis av forskjellige moduler og komponenter. nter. Modulene installeres, aktiveres og kobles til en posisjon(som vi snakket om ovenfor). Det er full tilgang til koden(open source), så alle moduler og komponenter kan modifiseres ved å implementere eller gjøre endringer i kodene. Vi har i valgt å benytte te oss av 3 komponenter og 11 moduler, hvorav alle er aktivert og i bruk. 17.3.1 Contus HD Video Share Contus videoshare er selve videospilleren våres. Det er den kraftigste komponenten og har posisjon midt på startsiden. Den har som hovedoppgave å spille av videoene for publikum. Vi har modifisert følgende funksjonaliteter i videokomponenten: 68
17.3.1.1 Upload video Først gjorde vi endringer slik at videoene ikke ble publisert med en gang en bruker lastet opp video. Et av kravene var som vi snakket om tildligere, at administrator ville se gjennom videoen før den ble publisert for å unngå spam etc. Vi endret følgende php kode: defeault.php $query='insert into # hdflv_upload(title,filepath,videourl,thumburl,previewurl,published,type,memberid,descripti on,created_date,addedon,playlistid,hdurl) values ("'.$title.'","'.$ftype.'","'.$url.'","'.$img.'","'.$previewurl.'","1","'.$type.'","'.$memberid.'","'.$des cription.'","'.$cdate.'","'.$cdate.'","'.$cid.'","'.$hd.'")'; Vi satt tallet 1, til 0. Denne lille endringen gjør at videoen ikke automatisk blir publisert. Ettersom ikke video blir publisert med en gang, må også personen som laster opp video få beskjed om dette. Derfor implementerte vi følgende php kode: default.php $success=""; $success="your video Uploaded Successfully, And Will be Published by Administrator as Soon as Possible"; return array($category1,$success,$editvideo1); 17.3.1.2 Edit video Editering av video fungerte veldig bra, og det ble bare gjort noen enkle html-endring av teksten på formene. 17.3.1.3 Count views Her ser vi hvordan sql-spørringen teller antall views og plusser med en for å få riktig antall views: $query="update # hdflv_upload SET times_viewed=1+times_viewed where id=$playid"; 69
17.3.1.4 Featured Videos Vi ville også forandre hvordan featured videos ble vist frem i spilleren slik at alle videoene som er featured blir fremvist i tilfeldig rekkefølge, og ikke etter når de ble valgt som featured. Vi implementerte følgende SQL kode for å løse problemet. Player.php group by e.vid order by rand() $featuredquery = "select a.*,b.category,d.username,e.* from # hdflv_upload a left join # users d on a.memberid=d.id left join # hdflv_video_category e on e.vid=a.id left join # hdflv_category b on e.catid=b.id where a.published='1' and a.featured='1' and a.type='0' group by e.vid order by rand() limit 0,$featurelimit "; 17.3.2 Banner Banner er den komponenten vi bruker til «Advertisement». Administrator kan laste opp reklame i denne komponenten, for så å holde en oversikt over feks hvor mange klikk hver enkelt reklame har hatt. Her er koden for hvordan banner-komponenten teller antall klikk: // Oppdaterer antall klikk $query = 'UPDATE # banner'. ' SET clicks = ( clicks + 1 )'. ' WHERE bid = '. (int)$id; 17.3.3 Flexi Contact Dette er en komponent vi bruker slik at besøkende kan sende inn spørsmål etc til eieren av websiden. Denne fungerer til akkurat det den skal og vi har ikke gjort noen spesielle endringer i php-kodene. 17.3.4 mod_yoo_login Denne modulene bruker vi for innlogging med brukernavn og passord, samt utlogging. 70
Fig26 Logg in modul 17.3.5 mod_mainmenu Denne modulen benytter vi oss av i alle menyfeltene på web siden. Fig27 Hovedmeny modul 17.3.6 Search Tube Denne modulen er plassert oppe i høyre på web-siden og er fungerer som søkemotoren til videospilleren. Fig28 Søkemotor for video 17.3.7 Advanced Copyright Module Denne modulen har vi lagt i bunnen av web-siden. Den har kun som funksjonalitet og vise frem copyright datoene. 17.3.8 w3c.org CSS/XHTML Validator Et av kravene til web-siden er at den skal valideres og godkjennes som CSS og XHTML produkt. Modulen har som oppgave å re-dirigerer bildene til validator sidene. Fig29 viser modulene Copyright og w3c. 17.3.9 Front-end Font Size Adjuster Fig30 Font size endring Modulen er til for å kunne forandre web-sidens tekststørrelsen. Fig x viser Font size modulen 71
17.3.10 Endringer i php.ini For å sette upload-størrelsen på et relativt høyt nivå, må vi gjøre noen endringer. Web hotellet har en standard som er satt til 12mb. Vi må sette vil sette denne grensen til 100mb. Ikke alle web-hoster tillater endring i php.ini -fil, men i vårt tilfellet har vi full tilgang. Endring av php.ini er den enkleste og sikreste måten å gjøre slike endringer på. Har man ikke tilgang til endringer av denne filen kan det gjøres med endringer i.htaccess-filen til apache server. Endret flgende kodesetning i php.ini: upload_max_filesize = 100M 72
Del 6 18 Sikkerhet 18.1 Generelt Sikkerheten i charitytube er hele veien blitt tatt i betraktning. Under implementering av systemet har vi tatt hensyn til scenarioer som kan dukke opp fra ondsinnede brukere. Det har blitt vist hensyn til at dataen som blir publisert skal til en hver tid kontrolleres av administratoren før det legges ut for offentlighet. Inputen som blir hentet inn fra brukeren går igjennom ett innebgyd sql-injection filter i PHP. Det skal ikke være mulig for brukere å sende eksekverbare kodesnutter til applikasjonen eller databasen. Per i dag kommuniserer siden via HTTP kanalen, dette er kjent for å være en mindre sikker kanal, men nok for charitytubes behov. Skulle det i en senere anledning implementeres donasjonsmulighet for organisasjoner, er det i aller høyeste grad viktig å videreutvikle applikasjonen for å støtte HTTPS slik at man får bedre sikring mot eavesdropping, og tyveri av givernes opplysninger. 18.2 Passord Når det gjelder brukernes passord, er den blitt lagret i databasen users med en en-veis hash. Det er gjort for at de ikke skal finnes som lesbar form noen sted i kildekoden eller databasen. Det er forskjellig hash krypteringsformer, som f.eks MD5 denne typen frarådes ettersom det er kjente hull i den. SHA2 (256-bit) viser seg å være ett bedre alternativ. På denne måte slipper man å risikere at brukernes passord kommer på avveie selv om databasen skulle bli kompromittert. Skulle det være ønskelig kan man lett endre til en annen form for hash i senere tid ved å endre på passord variabelen som finnes i auth.inc.php. Er brukeren uheldig og glemmer passordet, sendes det en kode i e-post som gir brukeren mulighet til å lage en ny kode. Ett passord som er en-veis hashkryptert kan ikke hentes tilbake i lesbarform. Dermed er bytte av passord den eneste løsningen. 73
Del 7 19 Produkt vs kravspesifikasjon Når vi ser på produktet som en helhet, og sammenligner med de gitte kravspesifikasjonene, mener vi at web-siden innfrir til forventningene. Vi skulle lage en videokanal, hvor veldedighetsorganisasjoner kunne laste opp video for å dele med omverdenen. Akkurat dette har vi gjort og alle funksjonalitetene til videokanalen er fungerende. Punktene som vi ikke har fått gjennomført er: Administratordel Motta e-post når bruker laster opp video. Brukerdel Mulighet for å kommentere andres videoer. Videofunksjon Komprimering av video under opplasting Kommentarfelt under hver video Del 8 20 Videreutvikling Prosjektet og CharityTube er godt utviklet, og i full funksjonalitet. Men det er alltid ting som kan implementeres eller forbedres. Vi har gitt systemet ett godt grunnlag for å kunne videreutvikles. Applikasjonen slik som den er i dag har noen mangler, men kan raskt ferdigstilles av en god php programmerer som har erfaring med joomla. Ting vi mener står på listen over fremtidige utvikling er: Kommentarfelt for video Paypal donasjon direkte fra webside CharityTube forum Fremvisning av logo på videospiller Teste siden på brukere med nedsatt funksjoner Samt avvikene fra kravspesifikasjon. 74