Applikation: template

Att arbeta med en template

Introduktion

För att underlätta utvecklingen av webbsidor så använder vi oss ofta av templates. Det finns två stora fördelar med att bygga en template på det sätt som jag kommer visa.

  1. Det blir en tydlig struktur då det finns fyra olika filer som var och en har sin uppgift. Genom att ändra i den filen som har en specifik uppgift så kommer ändringen direkt slå igenom på hela webbplatsen.

  2. Genom att ha en färdig struktur att utgå ifrån så går det snabbt och är enkelt att komma igång med utvecklingen av en ny webbplats/webbapplikation. Skall du inför ett projekt göra stora förändringar av din template så duplicera hela mappen och skapa en variant som blir en ny template, då har du ju flera att utgå ifrån när du skall bygga en helt ny typ av webbapplikation.

Innehåll

Min template består av fyra filer som var och en har sin specifika uppgift i detta sätt att bygga applikationer.

  • page.php, detta är själva ramen för hur webbsidan skall se ut. Här finns skalet/ramen för hur hela webbsidans html-struktur ser ut.

  • common.php, här sätts allt innehåll som är identiskt genom hela applikationen. Just nu finns <header> och <footer> här. I <footer>-elementet så finns det automatgenererade länkar för att validera html och css. Detta bör tas bort i en slutlig version men det är skönt att med bara ett klick kunna få koden validerad.
    Skall det finnas en meny i din applikation så skapas den i common. Sedan ändras pgae.php så att menyn får sin plats i strukturen.

  • template.php, är själva mallen för en specifik sida. Det är den jag har duplicerat och döpt till index.php för att skapa denna webbsida som du läser just nu. Här sätts innehållet ihop till variabeln $html som sedan skrivs ut när sidan page.php anropas längst ner på sidan.
    page.php använder då variablerna $html, $header och $footer från sidorna template.php och common.php. common.php läses in från template.php och där finns också möjligheten att ändra variablerna $header och $footer, samt alla andra variabler som du väljer att lägga i common.php. Undvik dock att andra dessa variabler som skall användas för att få ett enhetligt utseende på hela webbplatsen i onödan.

  • style.css, denna fil innehåller allt som har med utseendet av sidan att göra. Försök att sätt utseende på element, klasser och id från css-filen istället för att kladda med internal-css i varje template eller inline-css i specifika element.

Genom denna tydliga struktur så är det enkelt att lägga till funktionalitet. En databasuppkoppling skapas i en egen fil som requestas från common.php eller template.php beroende på om den behöver finnas på varje sida eller bara på enskilda sidor. Att lägga det anropet i page.php blir för sent för då skall innehållet redan vara skapat.
Att implementera JavaScript/jQuery i din applikation görs på liknande sätt, koden kan skrivas som en variabel i common.php (om den skall finnas på varje sida), template.php (om den gäller enskild sida) eller läggas i page.php om den skall vara på varje sida. Nackdelen med scriptet är att det bör skrivas ut efter <footer>-elementet för att sidan skall vara så snabb som möjligt. Då kan vi behöva skapa en ny variabel $script som bara skrivs ut i page.php om den innehåller någonting. Kika på hanteringen av $mess, i template.php, för att se hur en sådan teknik kan användas.

I vår template så har vi även två tomma mappar, det är /img/ som innehåller bilder till applikationen samt /js/ som innehåller de JavaScript som jag kopplar till applikationen. Det är ju inte alltid säkert att dessa mappar kommer innehålla något när vi byggt färdigt vår applikation och då kan vi ta bort dem, det är dock bra att bygga strukturen och i det läget ta bort det som inte behövs. En vanlig mapp som också kan/bör användas är /incl/ för alla filer som inte lever ett eget liv utan bara inkluderas till andra sidor. Exempel på dessa filer i vår template är common.php, page.php. Andra filer som bör hamna i den mappen är dbConn.php, functions.php och liknande.

Som du märker så finns det flera olika sätt att bygga sina templates på, det viktigaste är att det skapas en tydlig struktur. Med template i olika former så kan vi bygga ut väldigt stora och avancerade webbapplikationer.

Koder

Alla koder som ligger i applikationen template hittar du genom CSource som ligger i denna mapp. Där kan du dessutom se denna sida, index.php, så att du får se på ett exempel på hur en riktig sida kan skapas utifrån en template. Allt jag har gjort är att skapa en kopia av template.php och sedan sparat den med ett annat namn och börjat skriva den kod som sidan skall bestå av.

Din egna template

Lär dig att jobba med template, det kommer göra ditt utvecklingsarbete så mycket enklare och snabbare. Du har full rätt att tanka ner min template och använda den som den är eller göra vilka förändringar du själv vill och skapa dina egna templates. Lyckas du göra någon riktigt användbar template så dela gärna med dig av den. Glöm inte bort att vara noggrann med kommentarer och dokumentation.