Show sourcecode

<h2>Redovisning av BMO</h2>

<p>Länk till min BMO-sajt: <a href="http://www.student.bth.se/~nidu08/htmlphp/BMO/hem.php">http://www.student.bth.se/~nidu08/htmlphp/BMO/hem.php</a></p>

<p><strong>Login-info:</strong><p>
användarnamn: nicolas
lösenord: password

<p><strong>Beskriv din style och layout och den känsla du vill förmedla.</strong></p>
<p><strong>Jag valde att utgå från ett färgschema framtaget genom ett verktyg som genererar färgscheman utefter färgteori. Verktyget jag brukat är www.paletton.com. Som basfärg för mitt färgschema valde jag en viss grön nyans. Jag vill få fram en style som kan få en att tänka på ”naturlighet”, då döden är ”en del av livet” och höst, en årstid som har vissa associationer med döden. Jag ville få till en någorlunda minimalistisk stil, då jag föredrar sådana överlag. Jag är inte riktigt nöjd med designen i nuläget, då jag känner att den skulle bli bättre med paneler som tycks ha mer ”form” och djup (exempelvis genom bruk av ”tre-dimensionella” kanter, lite skuggning, eller liknande).</strong></p>
<p><strong>1.1. Ett allmänt stycke om hur projektet gick att genomföra.</strong></p>

<p><strong>Problem/lösningar/strul/enkelt/svårt/snabbt/lång tid, etc. Var projektet lätt eller svårt? Tog det lång tid? Vad var svårt och vad gick lätt?</strong></p>
<p>Det mest problematiska var införandet/bruket av ett tag-system för databasen samt att få till visandet av de större versionerna av galleribilderna såsom jag ville ha det, främst för att dessa krävde att jag satte in mig in i lite nytt databas-tänk/mönster för taggande samt att jag satte mig in i JavaScript, vilket var så gott som helt nytt för mig. Dessa moment tog två-tre dagars arbete var. Annars tyckte jag, bortsett från det att jag inte blivit närainpå fullt nöjd med min layout för sajten, att projektet var enkelt eftersom de flesta av de komponenter som behövdes liknade sådana jag gjort i och med utförandet av tidigare kursmoment. För att få godkänt krävdes det inget mer än sådant man redan haft att göra.</p>

<p><strong>Kommentera kortfattat din implementation av de obligatoriska funktionaliteterna.</strong></p>

<p><strong>BMO hem:</strong></p>
<p>Jag ordnade en någorlunda enkel förstasida med en bild på en minnestavla som jag modifiera lite grann och som sätter lite fokus på att det handlar om ett museum som liksom andra museum går ut på att minnas det förflutna/bevara minnen av de förflutna. Jag återanvände ett stycke text från "Om BMO"-artikeln och lade till en rad för besöksadress, postadress, telefon, och öppettider.</p>

<p><strong>BMO innehåll / BMO samling av objekt / BMO artiklar:</strong><p>
<p>Allt innehåll i "BMO innehåll" presenteras i tre olika sektioner som nås via nav-menyn: artiklar, objekt, galleri. Artiklar/Objekt koms åt antingen genom att man väljer i en rullningslista vilken artikel eller vilket objekt man vill se, eller genom att man väljer att få alla artiklar/objekt visade på samma gång på en sida. För rullningslistan hämtas alla artiklar/objekt från databasen och läggs i en lista av option-element, vilka lagrar artiklarnas/objektens databas-id, och när val görs i listan sker en post som förmedlar deras id återigen till sidan, fast denna gången används det förmedlat id för att också selecta dess tillörande artikel/objekt för visning på sidan, som då selectar i databasen med dessa id. När alla objekt/artiklar skall visas hämtas helt enkelt alla från databasen och konkateneras i en PHP-variabel vars innehåll jag sedan echo:ar ut. Vad det gäller artiklar görs ett undantag för "about"-artikel, som inte tas med någonstans på sajten förutom just på "Om"-sidan.</p>

<p><strong>Om BMO:</strong></p>
<p>Sajtens "Om"-sida nås även den via nav-menyn. På den sidan hämtas helt enkelt Om-sidan från databasen och visas som en artikel, ovanför en kort presentation av mig.</p>

<p><strong>Validera och kompabilitet</strong></p>
<p> fungerar minst i Firefox, liksom var kravet, och jag validerade den med Unicorn-validatorn, samt LinkChecker- och i18n-validatorerna. Såvida jag inte missade någon sida skall allt ha passerat felfritt som HTML5 och CSS3.</p>

<p><strong>1.2. Skriv specifikt om de optionella krav du eventuellt valt att implementera. Skriv ett textstycke om varje krav.</strong></p>
<p><strong>Presentera innehåll på alternativa sätt</strong></p>
<p>Man kan bläddra bland objekt/artiklar genom en rullningslista, för att visa en artikel eller ett objekt i taget, och man kan visa alla artiklar/objekt på en och samma sida.</p>
<p>Jag valde att visa aritklar tillsammans med relaterade objekt. För att avgöra vilka objekt som är relevanta för artiklarna införde jag ett tag-system i databasen, någorlunda följandes Toxi-schemat för tags i databaser. Mitt system är sådant att det finns en Tags-tabell som innehåller alla tags som finns för sidans innehåll och en ArticleTags-tabell och en ObjectTags-tabell som länkar artiklar respecktive objekt till de tags som de skall ha och på så vis har jag möjligheten till att ha en många-till-många-relation vad det gäller artiklar/objekt och tags, dvs. en artikel/ett objekt kan ha flera tags och varje tag kan höra till flera artiklar/objekt.</p>
<p>Sättet jag med hjälp av detta tag-system tar fram eventuella relaterade objekt för en artikel är sådant att jag för varje artikel genom SQL-queries hämtar de objekt som har samma tags som artikeln. Därefter väljer jag att antingen, om antalet relaterade objekt är 7 eller färre, visa thumbnails för alla 1-7 relaterade objekt i en aside vid slutet av artikeln, eller, om antalet relaterade objekt är fler än 7, slumpa fram 7 av dessa objekt och visa de thumbnails för de fram-slumpade 7 objekten i en aside vid slutet av artikeln.</p>
<p>Jag har ordnat en sök-funtionaliteten för artiklar/objekt, som är sådan  att användaren kan skriva in ett antal söktermer separerade med mellanslag, söktermer som sedan läggs i en array som en for-loop går igenom för att bygga upp ett SELECT-statement för SQL som byggs upp av en ”LIKE '%" . "$substrings[i]" . "%'" för varje sökterm. På så vis fungerar sökningar som framstår som nonsens, exempelvis ger ”kra gra” alla objekt med pärlkransar och begravningsföremål, eftersom ”pärlkrans” innehåller ”kra” och ”begravning” innehåller ”gra”.</p>
<p>Jag har även manuellt lagt in minst en figure i varje befintlig artikel, förutom Maggys.</p>

<p><strong>Ett administrativ gränssnitt</strong></p>
<p>För det administrativa gränssnittet ville jag hade så att, om det är aktiverat, dvs. om man är inloggad, så skall dess knappar för redigerande, borttagande, och skapande av artiklar/objekt finnas vid varje artikel/objekt på samma sidor vilka de visas på för vanliga besökare. På så vis kan man se över sin sida som admin och, om man ser något man vill ändra eller ta bort, eller kommer på att man i en sektion vill lägga till nåt, så kan man direkt ändra eller ta bort ett föremål man ser utan att först behöva upptäcka vad man vill ändra/ta bort och sedan behöva gå till ett separat administrativt gränssnitt och där leta upp artikeln/objektet/sektionen igen. Att ha ett sådant separat gränssnitt utöver det jag har vore ju bra om man redan vet precis vad man vill ändra, förstås, och på sätt och vis får jag ju ett sådant extra gränssnitt automatiskt genom att sajten ju har en rullningslista där man man välja bland alla artiklar och en där man kan välja bland alla objekt, för när man väl valt en artikel eller objekt att visa genom en sådan rullningslista så dyker ju artikeln/objektet upp tillsammans med knappar för att redigera/ta bort den/det. Koden för gränssnittet skiljer ju sig egentligen inte särskilt mycket från tidigare liknande gränssnitt som gjorts under tidigare kursmoment.</p>
<p>Något nytt att tänka för detta gränssnittet var att i och med att jag infört att Tag-schema för databasen var möjligheten att, vid skapande/redigerande av artiklar/objekt, råka införa dubletter av tags i databasen, men det var inte så svårt att förhindra detta. Eftersom jag lät det vara så att Tags-tabellen har namnen på Tags som unika primärnycklar så behöver jag inte göra något för att förhindra att en viss tag sätts in i den tabellen mer än en gång. När jag läste om Toxi-schemat online föreslogs det att ens Tags-tabell skulle ha kolumn av heltal som unika primärnycklar, vilket jag tänkte väl förvisso skulle kunna leda till snabbare hämtning av data från databasen och kanske även mer effektivt nyttjande av diskutrymme, men jag nöjde mig ändå med min lösning. För att artiklar/objekt inte skall få en viss tag satt på sig mer än en gång så tar jag bort alla dessa tags innan nya/gamla tags införs/återinförs vid redigering av artiklar/objekt, istället för mer precisa ingrepp jag endast tar bort just de tags som eventuellt redigeras bort och endast tillför just de eventuella tags som är nya.</p>

<p><strong>Galleri av bilder</strong></p>
<p>Jag har implementerat ett galleri av bilder. Jag ville att gallerivisandet skulle gå till på så vis att inte alla bilder i bildsamlingen visas, ens som thumbnails, på en och samma sida, dels eftersom att jag inte ville att eventuellt hundratals bilder inte skulle behöva läsas in på samma gång och dels eftersom jag helt enkelt ville pröva på att koda ett galleri där man brukar ”föregående”- och ”nästa”-knappar för att ta sig igenom galleriet. Jag ville dessutom ha det så att när man trycker på en bild så skall en större version av bilden synas emot en transparent, mörk bakgrund, som är fallet med somliga gallerier på nätet.</p>
<p>För att uppfylla dessa två krav som jag satt på mitt galleri så brukade jag PHP-kod och PDO-kod för att sköta bläddrandet respektive framtagandet av bild-sökvägar från databasens Objekt-tabell så att bilder inom ett visst intervall, beroende av sid-index (som jag dessutom låtit besökare kunna sätta i addressfältet), visas. För att fixa bildvisningen vid klickandet av thumbnails i galleriet som jag ville ha den så ordnade jag en javascript-funktion, med diverse hjälpfunktioner, vars anrop jag ställt in skall ske vid ”onclick” på en thumbnail. Detta anrop leder till att en div-tag (”screencover”), som jag lagt till vid början av body-elementet, får dess dimensioner satta så att den fyller skärmen, samt får dess visibility satt till visible så att den visas samt att en något centrerad position för bilden som skall visas beräknas, varpå bilden sen även såklart visas just där.</p>

<p><strong>1.3. Avsluta med ett nytt stycke med dina tankar om kursen och vad du anser om materialet och handledningen (ca 5-10 meningar). Ge feedback till lärarna och förslå eventuella förbättringsförslag till kommande kurstillfällen. Är du nöjd/missnöjd? Kommer du att rekommendera kursen till dina vänner/kollegor? På en skala 1-10, vilket betyg ger du kursen?</strong></p>
<p>Något jag gillade särskilt med kursen var dess bredd, som jag inte upplevde ledde till någon uppoffring av att gå "tillräckligt" djup in på de olika områdena, och på sätt och vis är det ju så att i och med hur de olika komponenter har kombinerats så har ju det inneburit att man gått in på djupet. Det känns som att man får bra koll på det mesta man behöver göra och ha i åtanke för att skapa en riktigt bra sida, åtminstone vad det gäller det tekniska. Ett nämnvärt undantag är det med säkerthetsbrister, som bara snuddades vid vad det gäller inloggning och SQL-injections. Allt kan ju dock inte få fokus i en och samma kurs av denna längd.</p>
<p>Jag önskar att sidorna för varje kursmoment i början eller i slutet hade en kortfattade lista över vad man ska göra i momentet. Det vore smidigt att ha en sådan att bruka som checklist, särskilt om man vill försöka helt på egen hand med vissa moment (vilket det ju ibland föreslås att man lämpligen kan göra) och inte råka läsa delar av lärarens lösning.</p>
<p>Kursbetyg: 9/10. Högt betyg för att jag verkligen gillade upplägget - hur kursmomenten kopplas samman på ett vis som ger en vad jag nu tror är en bra nästan-helhetsbild av grunderna i webb-utveckling - samt den trevliga tonen som kursmomenten hade.</p>