[Kurssidene] [ ABI - fagsider bibin ] Michael Preminger (michaelp@hio.no) 08/02-14 Utvikling av dynamiske nettsteder med PHP og databaser, våren 2014 Eksempel 1: For å lage en liten array (bare 5 innførsler) kan vi bruke følgende PHP-kode: $byer=array("oslo", "Bergen", "Trondheim", "Stavanger", "Kristiansand"); Vi får en sekvensiell array med noen innførsler, hvor hver innførsel automatisk får en indeks. Kan illustreres på følgende måte: Tilgjegelighet av XHTML-forms (+ Løkker, rep. og utvidelse) Tilbakeblikk Byggestein så langt: variabler betinget utføring løkker Med hjelp av disse indeksene kan vi gjennomgå arrayen systematisk. Vi bruker denne arrayen i noen eksempler. Eksempel 2: Skriv alle innførslene til nettleseren I tillegg: Idag: enkle arrayer innebygde funksjoner, slik som print() og count(). repetisjon av løkker og arrayer (med en liten utvidelse) om å lage bedre XHTML-forms Repetisjon: løkker og arrayer - norske byer En løkke: systematisk gjentagelse av en sekvens med instruksjoner Vi bruker løkker når vi skal håndtere grupper av objekter: studenter, databaseposter osv. Vi har sett på while-løkker (fortrinnsvis) og for-løkker. En array: en variabel som kan ha flere verdier til enhver tid. Arrayen kan ha mange innførsler. Hver innførsel kan ses på som en selvstendig variabel som kan ha en verdi. Hver av innførslene har en indeks (foreløpig et nummer). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN". $byer=array("oslo", "Bergen", "Trondheim", "Stavanger", "Kristiansand"); $antallbyer = count($byer); $i=0;//oppstart while( $i < $antallbyer ){ print("$i: $byer[$i]"); $i = $i + 1 ; //oppdatering 0: Oslo 2: Trondheim 3: Stavanger 4: Kristiansand
Eksempel 3: Skriv bare annenhver innførsel til nettleseren $byer=array("oslo", "Bergen", "Trondheim", "Stavanger", "Kristiansand"); $antallbyer = count($byer); $i=0;//oppstart while( $i < $antallbyer ){ print("$i: $byer[$i]"); $i = $i + 2 ; //oppdatering 0: Oslo 2: Trondheim 4: Kristiansand Eksempel 4: Skriv bare navnet på byen som har indeks 1 til nettleseren. Grupper av "ting" behandles ikke alltid 100% likt. If-tester i løkkens nyttekode kan stå for variert behandling Her kombinerer vi en if-test i en løkke. Hver gang løkkekoden kjøres, blir betingelsen (linje 7) sjekket. Setningen på linje 8 blir bare kjørt når betingelsen stemmer. 1. 2. $byer=array("oslo", "Bergen", "Trondheim", 3. "Stavanger", "Kristiansand"); 4. $antallbyer = count($byer); 5. $i=0;//oppstart 6. while( $i < $antallbyer ){ 7. if($i == 1){ 8. print("$i: $byer[$i]"); 9. 10. print("$i"); 11. $i = $i + 1; //oppdatering 12. 13. Legg merke til at 0 1 2 3 4 bynavnet skrives ut bare én gang, fordi betingelsen stemmer bare en gang indeksen skrives ut hver gang Eksempel 5: En liten rettelse til det foregående eksemplet. 1. 2. $byer=array("oslo", "Bergen", "Trondheim", 3. "Stavanger", "Kristiansand"); 4. $antallbyer = count($byer); 5. $i=0;//oppstart 6. while( $i < $antallbyer ){ 7. if($i == 1){ 8. print("$i: $byer[$i]"); 9. 10. else{ 11. print("$i"); 12. 13. $i = $i + 1; //oppdatering 14. 15. 0 2 3 4 Eksempel 6: Skriv bare navnet til de tre første byene til nettleseren. Også her kombinerer vi en if-test i en løkke. Hver omgang løkken kjøres, blir betingelsen (linje 7) sjekket. Setningen på linje 8 blir bare kjørt de gangene betingelsen stemmer. 1. 2. $byer=array("oslo", "Bergen", "Trondheim", 3. "Stavanger", "Kristiansand"); 4. $antallbyer = count($byer); 5. $i=0;//oppstart 6. while( $i < $antallbyer ){ 7. if($i < 3){ 8. print("$i: $byer[$i]"); 9. else{ 10. print("$i"); 11. 12. $i = $i + 1; //oppdatering 13. 14. 0: Oslo 2: Trondheim 3 4 indeksen 1 skrives (separat) rett at etter bynavnet skrives ut
Assosiative Arrayer Assosiative arrayer indekserer sine innførsler med tekststrenger Så langt har vi sett på, og arbeidet med sekvensielle arrayer (med tallindeks). Innførslene i de assosiative arrayene har tekststreng-indeks. Eksempel 7: fødselsdager Vi ønsker å holde orden på fødselsdagsdatoene til noen av våre venner Med en assosiativ array kan vi gjøre det på følgende måte: //Oppretter arrayen $fodselsdager["niels"] = "11. desember"; $fodselsdager["jens"] = "12. juni"; $fodslesdager["mari"] = "21. oktober"; Assosiative arrayer holder mer informasjon enn de tall-indekserte Arrayen i eksemplet ovenfor gir oss mulighet til å ha to typer informasjon i arrayen samtidig: vennens navn Å legge en innførsel i en assosiativ array kan gjøres som følger: $fodselsdager["niels"]="11.desember"; vennens fødselsdag Dette fordi indeksen er assosiativ (henger sammen med innholdet). De "gamle" sekvensielle arrayene lagrer bare én type informasjon. Der angir indeksen bare rekkefølgen. Hvordan kunne vi brukt våre gamle arrayer til å holde orden på fødselsdagsinformasjonen? ett mulig svar (klikk) (Se også Horgens hjemmeside for en liten videosnutt) Assosiative arrayer brukes mye i forbindelse med databaser!
En kommentar ang. fnutter / hermetegn I PHP kan vi i mange tilfeller bruke fnutter og anførselstegn om hverandre når vi avgrenser tekststrenger Samme tegn må dog stå på begge sider av samme streng. "Niels' går ikke. Et unntak er variabeltolking. Strenger avgrenset av anførselstegn tolker variabler $navn = "Michael"; print ("Mitt navn er $navn"); gir Mitt navn er Michael Strenger avgrenset av fnutter tolker ikke variabler $navn = "Michael"; print ('Mitt navn er $navn'); gir Forms, brukervennlighet og tilgjengelighet Våre forms bør være brukervennlige, innbydende og lette å bruke Forms-standarden har hjelpemidler som bidrar til å gjøre våre former mer innbydende og mer forståelige. Dette går på enkeltelementene, presentasjonen og bruken av dem hele formens struktur Våre forms bør designes slik at de også er tilgjengelige for funksjonshemmede Dette har flere aspekter, bl.a: Formene bør bli lett å bruke for folk som har svekket syn, og allikevel bruker skjermen, tastaturet og musen. Formene bør bli lettere å tolke, slik at skjermlesere, som tilrettelegger formen for blinde, lett kan tolke dem og presentere dem riktig. Dette støttes av at vi unngår bruk av HTML-tabeller forms-utlegg holder oss til noen enkle regler når vi utformer forms. Vi ser på bruken av <fieldset> og <label>, samt noen enkle regler. Vi ser også på kontroll av utlegg og utseende med hjelp av CSS. Mitt navn er $navn $_GET er også en assosiativ array. Verdier fra elementnavn i forms fyller den assosiative array $_GET. Det betyr at stort sett kan, også her, fnutter og anførselstegn brukes om hverandre. Dette har egentlig ikke store konsekvenser, men kan være greit å vite.
Bruk av Label-elementet Label: En formell tilknytting mellom et merketekst og et input-element Label-elementet, <label>, er en formell måte å knytte sammen en merketekst og et input-element. Eksempel 9: Tekstelementet med navnet "fornavn" og id'en id_fornavn koblet til et labelelement Fornavn? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN". <form action= "respons_tekst.php"> <label for="id_fornavn"> Fornavn? </label> <input type="text" name= "fornavn" id="id_fornavn" /> <input type="submit" /> <input type="reset" /> </form> Med label-taggen er teksten "Fornavn?" formelt koblet til input-elementet med id=id_fornavn. for-attributtet kobler label-elementet til input-elementet gjennom inputelementets id-nummer. Label-elementet gir oss mer brukervennlige form-elementer Vi kan, for eksempel, klikke teksten "Fornavn?" for å plassere markøren i elementets tekstfeltet. Eksempel 10: Radioknapper og label-elementer Student? ja nei <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN". <form action= "respons_radio.php"> Student? <input type="radio" id="id_es_ja" name="erstudent" value= "ja" /> <label for="id_es_ja"> ja </label> <input type="radio" id="id_es_nei" name="erstudent" value="nei" /> <label for="id_es_nei"> nei </label> <input type="submit"/> </form> Fordelene er enda mer markante med radioknapper. Legg merke til at vi kan klikke tekstene ja og nei for å velge riktig radioknapp. Vi slipper å "treffe" punktet. Bruk av Fieldsets for synliggjøring av struktur Med <fieldset> kan vi dele våre forms inn i meningsfylte avsnitt. Så langt har vi delt våre forms med hjelp av, på en litt tilfeldig måte. Vi kunne også ha brukt <div>, omtrent på samme måte. Det betyr at tekstelementer, radioknapper, avkryssingsbokser osv. ble skrevet inn i hver sine avsnitt. Dermed blir Formene "flate", og strukturen vanskelig å tyde. Noen bruker tabeller, slik at man får en layout-messig fleksibilitet. Dette kan bli unødvendig komplisert, og bør unngås, særlig i enkle tilfeller. fieldsets gir oss en lettvint mulighet til å strukturere våre forms både logisk og visuelt. Enhver fieldset kan ha et legend-element, som brukes til å gi den en overskrift.
Eksempel 11: En XHTML-forms delt med fieldsets Personalia Fornavn? Akademisk status Er du student? Ja Nei Handling!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN". <form action= "respons_stor.php"> <fieldset> <legend> Personalia </legend> <label for="fn">fornavn?</label> <input type="text" id="fn" name="fornavn"/> </fieldset> <fieldset> <legend>akademisk status </legend> Er du student? <input type="radio" name= "erstudent" value="ja" id="es_ja"/> <label for="es_ja"> ja</label> <input type="radio" name= "erstudent" value="nei" id="es_nei"/> <label for="es_nei">nei</label>i </fieldset> <fieldset> <legend>handling!!!</legend> <input type="submit" name="submit2" /> <input type="reset" name="reset2" /> </fieldset> </form> Vi kontrollerer utseendet på <fieldsets> med hjelp av stilark. Følgende stildefinisjon ble brukt på formen ovenfor fieldset{ border:solid; border-color:#000000; border-width:thin; legend{ font-size:1.2em; font-weight:bold; margin-left:auto; margin-right:auto; Utlegg av forms og tekster Ha riktig rekkefølge på tekster og elementer Tekst-input og nedtrekksmenyer: Ha teksten foran input-elementet, enten på samme linje eller linjen foran. Radioknapp og avkrysningsboks: Ha teksten etter selve boksen (gjerne på samme linje) Tabeller bør brukes med forsiktighet Tabeller brukes ofte for å dele opp skjermen og plassere forms-elementer på ønsket sted. Tabeller kan dermed hjelpe med å få en fin, og i og for seg leselig utforming, men kan skape tilgjengelighetsproblemer. Dersom man allikevel bruker en tabell, bør man holde hvert element og sine tekster (for eksempel labels) samlet i samme celle. Slikt unngår man at en skjermleser feilassosierer tekster med element og vise versa. PHP-funksjoner Vi har allerede sett og brukt noen funksjoner i PHP (uten å snakke høyt om det). Eks: print, count. Funksjoner tar ofte argumenter: Ressurser print ("Jeg liker å programmere"): argumentet "Jeg liker å programmere" (en tekststreng) er det som funksjonen print skal printe til nettleservinduet count ($byer) : argumentet $byer (en array), er det som funksjonen count skal telle innførslene i. Finnes mange mange mange mange andre (www.php.net) Mer om forms og brukervennlighet i følgende ressurser: Sauers, Michael P. (2006): XHTML and CSS Essentials for Library Web Design - Neal Schuman Publishers Inc. - 451 s. - ISBN: 1-55570-504-9 (se spesielt kapittel 8) Tilgjengelig innhold Norges Blindeforbund. - URL:https://www.blindeforbundet.no /internett/tilgjengelighet/internett/internett-for-utviklere/tilgjengelig-innhold/ [lesedato 2013-02-08] (Se spesielt under "Skjemaer") Sist oppdatert 08/02-14 av Michael Preminger, michael.preminger@jbi.hio.no