Båtforening på nett Hovedprosjekt våren 2009, Høgskolen i Oslo Prosjektgruppe 36 Vegard Skipnes, Rade Vuckovic & Frode Sørensen Produktrapport
1 Sammendrag Denne rapporten er en del av Hovedprosjektet til gruppe 36 våren 2009. Det kan være av interesse, for å kunne lettere skjønne hvorfor vi har laget systemet slik som det har blitt, å lese prosessrapporten før du leser denne rapporten. I denne rapporten vil du få en oversikt over hvordan systemet er oppbygd. Dvs. mappe og filsturkturen på nettsiden og hvordan du kan benytte deg av det for å lage egne utvidelser til systemet. Vi vil også kort komme inn på hva brukeren ser. For nærmere informasjon om hvordan nettsiden fungerer henviser vi til brukerveiledningen som er laget til nettsiden. Dette dokumentet er beregnet på utviklere og eventuelt systemadministratorer, og er derfor lagt opp slik at leseren bør ha kunnskap om PHP/programmering, HTML, CSS, JavaScript, og hvordan en Apache webserver fungerer. Side 2
2 Beskrivelse av systemet Vi har laget en nettside som skal være enkel å bygge ut og kopiere til andre nettsteder. Vi har bygget systemet fra bunnen av og har dermed laget et sett med regler som man bør, som systemadministrator, være klar over for å kunne utnytte systemets potensiale. Man kan si at systemet vi har laget er et enkelt CMS-system. CMS står for Content Management System, altså et system for styring av innhold. Et slik system er ofte populært å ha på større nettsider. Et kjennetegn på et CMS-system er at brukergrensesnittet er laget slik at man ikke behøver å kunne kode for å publisere innhold. Hele idéen med systemet er at man enkelt skal kunne utvide og utvikle systemet videre. Vi vil i slutten av dette dokumentet gå mer konkret inn på hvordan du kan opprette en ny nettside med systemet og momenter som da må prioriteres. Side 3
3 Innhold 1 Sammendrag... 2 2 Beskrivelse av systemet... 3 3 Innhold... 4 4 Teknologi... 5 4.1 Programmeringsspråk... 5 4.2 Database... 5 4.3 Server... 5 4.4 Presentasjon... 5 4.5 Utviklingsmetodikk... 5 4.6 Sikkerhet... 6 4.7 Tilgjenglighet... 6 5 Innloggingsinformasjon... 7 6 Websidens oppbygning... 8 7 htaccess... 9 8 Oppbygging... 10 8.1 Moduler... 10 8.2 System... 10 8.3 Template... 10 9 Filstuktur... 11 9.1 Moduler... 12 9.2 System... 16 9.3 Template... 17 10 Database... 18 10.1 mod_gjestebok... 18 10.2 mod_infoside... 18 10.3 mod_kategorier... 19 10.4 mod_medlemmer... 19 10.5 mod_nyheter... 19 12 Kravspesifikasjon... 20 12.1 Opprinnelige systemkrav... 20 12.2 Systemet i dag... 20 13 Hvordan opprette et nytt nettsted med dette systemet?... 21 13.1 Systemkrav... 21 13.2 Steg-for-steg... 21 Side 4
4 Teknologi 4.1 Programmeringsspråk PHP er et programmeringsspråk tilpasset for å lage dynamiske nettsider. Dette kjører direkte på server, og man skriver kun ut HTML-kode som blir oversent til klientens PC. Det var et krav fra vår oppdragsgiver at vi skulle benytte PHP, derfor vurderte vi ikke alternativer. All logikk i vårt prosjekt er derfor skrevet i dette språket. Vi benyttet PHP versjon 5.2 (den siste versjonen). Den støtter bl.a. objektorientert programmering mye bedre enn tidligere versjoner. Den håndtere også bedre XMLgjennomgang ved bruk av en utvidelse kalt "SimpleXML". Dette er forbedringer som vi i liten grad har benyttet oss av i dette prosjektet. Filene forventes derfor også å kunne fungere på servere med tidligere versjoner av PHP. Av sikkerhetsmessige årsaker har vi valgt å skrive de aller fleste av PHP-filene med endelsen.inc (ikke.php som er vanlig) og disse blir kun inkludert i andre filer. 4.2 Database MySql er et Sql-basert ("strukturert spørrespråk") database. Kildekoden er tilgjengelig, men det eies av Sun Microsystems og all utvikling drives av de. MySql kan kjøreres på mange forskjellige servere og det er mange språk som kan koble seg opp til databasen enkelt. Vi tør påstå at MySql er den mest brukte databaseløsningen som er fritt tilgjengelig. Det er et krav fra Bonefish at vi skal benytte MySql i dette prosjektet, og dette syntes også gruppen var et fornuftig valg. Vi har ikke opplevd problemer med dette valget under prosjektet. Konkret hvilke tabeller vi satte opp finner du senere i denne rapporten. 4.3 Server Vi har benyttet Apache webserver 2.2.1 (Debian) for utvikling og testing i dette prosjektet. 4.4 Presentasjon Vi har benyttet forskjellige tekonologier til å presentere dataen. HTML (4.01) er en defacto standard for visning av nettsider og alt vises i dette språket. Egne CSS-filer benyttes i størst mulig grad, i tillegg har vi benyttet JavaScript i noen utvalgte tilfeller. 4.5 Utviklingsmetodikk Vi benyttet Scrum som utviklingsmetodikk for prosjektet. For å få muligheten til å gjøre det var vi avhengig av å lage et fleksiblet system hvor det er lett å utvikle bit-for-bit. Arbeidsmetoden har vært avgjørende for utviklingen av dette produktet. Side 5
4.6 Sikkerhet Vi har bygget systemet for å kunne være mest mulig sikkert i forhold til å ta over innhold på nettsiden (sikkerhet mot Cross-site scripting). En viktig del er å skjule hvor filene egentlig ligger. Dette gjør vi ved å benytte en.htaccess-fil. Den omdirigerer forespørselene fra URL til riktig fil. Alle forespørsler som ikke er korrekte blir rutet til forsiden. Systemet har også en del klare svakheter. Ved innlogging så kreves det kun fire siffer som passord. Dette blir et svakt passord. Passordet sendes i tillegg ukryptert og passordet ligger også ukryptert i databasen. I tillegg kan det i enkelte inputfelter være mulig å skrive kode som kan gjøre skade på siden og databasen. 4.7 Tilgjenglighet Det viktigste vi har gjort i forhold til tilgjenglighet er å følge standardene, satt av World Wide Web Consortium (W3C). Vi har benyttet Firefox Developer Toolbar for å kontrollere koden. I forhold til tilgjenglighet så mangler det noe på metainformasjon (som beskrivelse av de enkelte sidene). Dette er noe vi ikke har implementert og dermed vil den ikke godkjenne tilgjengligheten for sidene. Side 6
5 Innloggingsinformasjon Som du ser av skjermbildet over så vil brukeren oppleve en vanlig nettside, med menyer og innholdsinformasjon. Øverste menyen vises kun til de som har spesielle rettigheter. Ønsker du å teste ut nettsiden mer utførlig kan du benytte følgende informasjon for å logge på: http://hp2009.baatforening.net Følgende brukernavn kan benyttes for å logge inn på tjenestene: Systemadministrator: 4@4.com Manager: 3@3.com Publiserer: 2@2.com Registrert: 1@1.com Alle benytter samme passord: 9876. Side 7
6 Websidens oppbygning Nettsidens utseende blir styrt av templates (maler). Dette systemet inneholder i dag kun en enkelt mal, men det er enkelt å kopiere designet slik det er og lage flere forskjellige maler. Nettsiden, slik den vises i Standard template er bygget opp av CSS-elementer. Enkelt kan vi si at den er bygget opp slik: Administratormeny Hode Overmeny Midten (M) Hoyremeny (H) Alt innhold (moduler) vil bli vist i midten. Footer Side 8
7 htaccess For å forenkle logistikken, samt av sikkerhetsmessige årsaker, har vi valgt å benytte aktiv omdirigering av URL på nettstedet. URLen brukeren opplever er annerledes enn filbanen, som skjer på server nivå..htaccess er en fil som overstyrer serveren, med lokale regler som gjelder i mappen denne fila ligger i. Vi har kun benyttet.htaccess-fila til å omdirigere trafikk i URL, men det er også mulig å benytte den til andre ting. Slik ser deler av fila ut: Indikerer hvilken regel. Adressen man i virkligheten blir sendt til. URL-adressen som er innskrevet. Avslutter videre travarsering. Htaccess fungerer på følgende måte: Du skriver f.eks i URLen følgende adresse: http://hp2009.baatforening.net/kontakt. Serveren vil da begynne å traversere denne listen, ovenifra og ned. I nest siste linje på utklippet over finner den ^Kontakt$. Etter $-tegnet finner den adressen du blir sendt til. Du vil bli vist filen /Template/Standard/index.php. Denne filen henter så parameterene som er medsendt ( modul=kontakt&side=index.php ) noe som gjør at filen kan inkludere /Moduler/Kontakt/index.php i midten (fra forrige figur). Vi har også i noen tilfeller benyttet en form for Regex for å kunne sjekke forskjellige variable sendt via url og på den måten vidresende korrekt. Les mer om.htaccess-fil på http://httpd.apache.org/docs/1.3/howto/htaccess.html. Side 9
8 Oppbygging Systemet er bygget opp basert på trelagsarkitektur, men med noe utradisjonell mappestruktur. 8.1 Moduler Hele systemet er bygget opp på at man lager moduler for hver nettside man ønsker med funksjoner, ikke ulikt OpenSource CMS-systemer som finnes på nettet (Joomla, Draupal ol.). Modulene inneholder filer for alle tre lagene. Dvs. den har en egen fil som inneholder SQLspørringer (f.eks. SQL_modulnavn.inc). Gjøres spørringen mot andre typer databaser enn MySQL, eller spørringens utvalg ønskes endret, så kan dette gjøres i den filen. Filen med SQL-spørringer skal alltid starte med SQL_. Filen er skrevet som en PHP-fil. Modulen har egne filer for logikk. De er skrevet i språket PHP. Alle PHP-filer har endelsen.inc. For å presentere dataene kan man legge til CSS-filer og JavaScript-filer også i samme mappe. For at disse filene skal inkluderes i nettsiden automatisk så må filnavnet være det samme som modulen/ mappen det ligger i. 8.2 System For å ivareta mulighet for å benytte filer på tvers av moduler så er det opprettet en System - mappe. 8.3 Template Systemet legger til rette for å benytte ulike templates, altså maler, for enkelt å kunne endre utseende på nettsiden. Det er i utgangspunktet bare opprettet en template for denne løsningen ( Standard ). For å kunne endre template må det gjøres endringer i.htaccess-filen. Side 10
9 Filstuktur Her vises de tre hovedmappene, med undermapper. Vi vil nå fortløpende gå igjennom hva de enkelte mappene inneholder: Side 11
9.1 Moduler 9.1.1 Autentisering Beskrivelse: Mulighet for å logge inn og ut av nettsiden. Kontroll: Filsturktur: OK Ryddig kode: OK Kommentarer: OK Godkjent CSS: Ok 2.1 Godkjent HTML: OK 4.01 Brukerveiledning: Rade Utført av: Vegard Kontrollert av: Frode 9.1.2 Infosider Beskrivelse: Mulighet for å lage infosider (nettsider) og legge den til i menystrukturen. Kontroll: Filsturktur: OK Ryddig kode: OK Kommentarer: OK Godkjent CSS: Ok 2.1 Godkjent HTML: OK 4.01 Brukerveiledning: Rade Utført av: Vegard Kontrollert av: Rade Side 12
9.1.3 Kategorier Beskrivelse: Legger inn lenker i menyene, og mulighet for å endre disse. Kontroll: Filsturktur: OK Ryddig kode: OK Kommentarer: OK Godkjent CSS: Ok 2.1 Godkjent HTML: OK 4.01 Brukerveiledning: Rade Utført av: Vegard Kontrollert av: Frode 9.1.4 Gjestebok Beskrivelse: Mulighet for å legge inn en kommentar i en gjestebok og lese tidligere innlagte kommentarer. Kontroll: Filsturktur: OK Ryddig kode: OK Kommentarer: OK Godkjent CSS: Ok 2.1 Godkjent HTML: OK 4.01 Brukerveiledning: Rade Utført av: Rade Kontrollert av: Vegard Side 13
9.1.5 Medlemmer Beskrivelse: Mulighet for å legge til medlemmer/ tilgang, og endre dette i etterkant. Nytt medlem får automatisk tilsendt pin-kode. Kontroll: Filsturktur: OK Ryddig kode: OK Kommentarer: OK Godkjent CSS: Ok 2.1 Godkjent HTML: OK 4.01 Brukerveiledning: Rade Utført av: Frode Kontrollert av: Vegard 9.1.6 Kontakt Beskrivelse: Mulighet for å fylle ut et kontaktskjema og få det sendt via e-post. Kontroll: Filsturktur: OK Ryddig kode: OK Kommentarer: OK Godkjent CSS: Ok 2.1 Godkjent HTML: OK 4.01 Brukerveiledning: Rade Utført av: Frode Kontrollert av: Vegard Side 14
9.1.7 Nyheter Beskrivelse: Mulighet for å legge inn og se nyheter. Kontroll: Filsturktur: OK Ryddig kode: OK Kommentarer: OK Godkjent CSS: Ok 2.1 Godkjent HTML: OK 4.01 Brukerveiledning: Rade Utført av: Vegard Kontrollert av: Rade Side 15
9.2 System Denne mappen brukes for å dele filer på tvers av modulene/ templates. 9.2.1 Bilder 9.2.2 Elementer Tiny_MCE er direkte kopiert fra http://tinymce.moxiecode.com/. Den søger for et mer attraktivt brukergrensesnitt ved skriving i teaxarea-felt. 9.2.3 Funksjoner Side 16
9.3 Template 9.3.1 Standard Beskrivelse: Viser hele nettstedet. Styrer alt innhold som skal inkluderes. Inneholder filer som sørger for overmeny, administratormeny, logo/navn, høyremenyen og footer. Kontroll: Filsturktur: OK Ryddig kode: OK Kommentarer: OK Godkjent CSS: Ok 2.1 Godkjent HTML: OK 4.01 Brukerveiledning: n/a Utført av: Vegard Kontrollert av: Frode Side 17
10 Database Som nevnt tidligere i rapporten så benyttet vi en MySQL-database i dette prosjektet. Basert på måten vi valgte å bygge systemet så har hver enkelt utvikler lagt til tabeller i databasen etter behov. De tre første bokstavene etterfulgt av en underlinje indikerer hvor i mappestrykturen tabellen hører hjemme. mod_ = Moduler sys_ = System tmp_ = Template Databasen inneholdt følgende tabeller ved prosjektets ferdigstillelse: 10.1 mod_gjestebok Benyttes for å legge inn kommentarer i gjesteboka. 10.2 mod_infoside Benyttes for å lage en infoside (nettside). Side 18
10.3 mod_kategorier Brukes for å legge inn kategorier til Administratormenyen og Overmenyen (hovedmenyen), men tilhørende underkategorier. 10.4 mod_medlemmer Benyttes for å holde oversikt over medlemmer med navn, roller, mm. 10.5 mod_nyheter Tabell for å lagre nyheter som vises på forsiden. Side 19
12 Kravspesifikasjon 12.1 Opprinnelige systemkrav For båtforeningen Medlemsregister Nyheter Informasjonssider Eget design fra template Mulighet for å legge inn egen logo Gjestebok For medlemmer Logge inn med brukernavn(e-postadresse) Lese nyheter Lese informasjon Mulighet for å besøke andre båtforeninger og skrive i gjestebok For administratorer Legge til og administrere båtforeninger For gjester Se liste over båtforeninger Lese åpen informasjon om disse 12.2 Systemet i dag Systemet som står ferdig ved endt prosjekt er helt i tråd med oppdragsgivers krav. Vi er meget fornøyde med det endelige produktet og hvordan vi har tilfredsstilt de kravene som ble satt ved prosjektstart. Kravspesifikasjonen har ikke blitt endret fra den første versjonen, men den har helt siden vi ble presentert med den blitt behandlet som et levende dokument. Innholdet og kravene er hele tiden blitt evaluert i samråd med oppdragsgiver med tanke på tid til disposisjon, ferdighetsnivå innenfor programmering og utvikling, samt brukerenes behov. Side 20
13 Hvordan opprette et nytt nettsted med dette systemet? 13.1 Systemkrav Løsningen anbefales med følgende teknologi: PHP 5.2.0-8 Apache 2.2.3 (Debian) MySQL 5.0.32 13.2 Steg-for-steg 1. Overfør filene som er vedlagt på CD til ditt nettsted. 2. Sørg for å opprette en database og bruk SQLen i filen _DB_baat for å opprette tabellene. 3. Endre til din (avsenders) e-postadresse i /Moduler/Kontakt/config.php og /Moduler/Medlemmer/MedlemLagttil.inc. 4. Tilpassing av designet gjør du i mappen /Template/Standard/. Side 21