Skapa en Egen CMS


OBS! Artikel pågående

I denna artikel ska vi skapa en egen CMS från grunden. Ett CMS (Content Management System) är ett innehållshanteringssystem och ett av dom mest berömda är WordPress. Det finns ett annat begrepp som har använts för webbaserade CMS, förkortad WCMS (Web content management system) men nyförtiden räcker CMS för att alla utvecklare ska förstå vad man pratar om.

TIPS! Läs mer om CMS på Wikipedia.


Dekonstruera Projektetet

Det första vi ska göra är att identifiera dom olika beståndsdelarna i systemet.

Backend:

  1. Databas med tabellerna users & posts
  2. In- och utloggning till Admin sidan
  3. Admin sida:
    1. Lista alla inlägg
    2. Skapa ett nytt inlägg
    3. Redigera befintliga inlägg
    4. Radera inlägg
  4. Registrering av nytt användarkonto
    1. Administrering av användarkonton

Frontend:

  1. Hemsidan:
    1. Visa de 5 senaste inläggen med kort urdrag plus en utvald bild.
    2. En sid-navigering (pagination) för att komma åt äldre / nyare inlägg högst upp och längst ner.
  2. Sida som visar enskilda Inlägg.
  3. Kontaktsida med formulär.

Okej nu är det dags att börja planera projektets etapper.


Arbetsflödet

Det här är ett rätt så stort projekt och därför ska vi göra en lista med punkter, som som tillsammans utgör CMS systemet.

  1. Skapa databas – cms
    • Skapa tabeller – posts och users
  2. Göra en konfigurationsfil (med konstanter som används för bl.a. till inloggning i databasen mm.)
  3. Bygg Post klassen (som hanterar sparandet/redigeringen/raderingen av inlägg)
  4. Bygg User klassen (som hanterar inloggning/utloggning och uppdatering av användarkonto)
  5. Skriv front-end grunden
  6. Skriv backend-grunden
  7. Skapa mallar för front-end & back-end
  8. Styla allt med CSS

Förberedelse

Jag använder mig av NetBeans när jag kodar i PHP, SQL, HTML och CSS men en textredigerare som TextEdit / TextWrangler för OS X eller NotePad / NotePad++ för Windows eller Brackets som finns för de flesta plattformar.

 

Lokal server

Du behöver också installera en lokal server som MAMP (XAMP för Windows eller AMP (Apache, MySQL, PHP) för LINUX baserade system där OS X ingår).

Du hittar en fullständig lista över lokal server alternativ på Wikipedia.


Skapa Databas

Till att börja med skapar vi en databas där vi ska ha tabellerna som lagrar datan för inlägg och användare. Öppna phpMyAdmin och skapa en ny databas:

Skapa ny databas i phpMyAdmin

Skapa ny databas i phpMyAdmin

Om du föredrar att köra SQL kod klicka du på fliken SQL högst upp på phpMyAdmin sidan, varpå du får fram ett fält där du kan skriva in koden. Skriv sedan följande:

Nu har vi en databas där vi kan ha våra tabeller, jippiii.


Tabeller, tabeller…

Då var det dags för dom två tabellerna som ska innehålla inlägg och användare. Jag valde att namnge inläggs-tabellen posts och användar-tabellen till users. Jag kommer att skapa en så kallad ”foreign key” som refererar/länkar varje inlägg till en användare.

 

MySQL

Eftersom vi kommer att referera med en foreign key från posts tabellen till users så måste users skapas först. Här är users tabellen:

..och här kommer posts:

Du kan antingen kopiera koden ovan från båda fälten och klistra in den i en fil med filändelsen .sql och importera filen när du är på cms databasen. Du hittar fliken Import högst upp på phpMyAdmin sidan. Annars kan du, när du är på cms databasen klicka på SQL fliken och klistra in koden, varefter du klicka på ”GO”.

 

Använda phpMyAdmin

En tredje alternativ är att skapa tabellen users med 6 kolumner i phpMyAdmin panelen. Klicka på cms databasen, varpå du får fram ett fält där du kan skriva in tabellnamn. Skriv users och klicka på välj 6 kolumner:

Screenshot av - Skapa users tabell i cms databasen

Skapa users tabell i cms databasen

Nu ska du fylla i alla sex fälten med följande:

  1. id – unik ID ges till varje användare. Det ska vara en int och öka automatiskt med 1 för varje ny användare. Kryssa  i  A_I. som står för AUTO_INCREMENT och till vänster om den klickar du på dropdown menyn och välj PRIMARY.
  2. name – lagrar fullständig namn och är en VARCHAR med length/value 50.
  3. email – är till för email och ska vara en VARCHAR med length/value 255.
  4. username – användarnamn som används vid inloggning, ska vara en VARCHAR med length/value 50.
  5. password – lösenord används vid inloggning, och ska vara en VARCHAR med length/value 255.
  6. admin – som indikerar om användaren har admin rättigheter. Den sätts till en tinyint med length/value 1.

Och sedan skapar du posts tabellen som innehåller 8 kolumner:

  1. id – unik ID tilldelas till varje ny inlägg. Den ska vara en int och öka med 1 för varje ny inlägg, så kryssa i  A_I och precis som i users, denna id sätts till PRIMARY.
  2. author_id – som ska vara en int med length/value 11 och sättas som INDEX så att den kan refereras till id i users tabell.
  3. created – ska vara en DATETIME med default värde CURRENT_TIMESTAMP.
  4. updated – ska vara en DATETIME med default värde CURRENT_TIMESTAMP och attributet on update CURRENT_TIMESTAMP.
  5. title – som ska vara en VARCHAR med length/value 255.
  6. summary – ska vara en TEXT och det är denna som ska lagra en kort urdrag av inlägget.
  7. featured_image – ska vara en VARCHAR med length/value 255. Denna kolumn ska lagra länken till utvald bild.
  8. body – ska lagra HTML koden och så gott som hela inlägget. Den ska vara av typen MEDIUMTEXT.
  9. footer – till sist har vi en kolumn där man kan t.ex. skriva källförteckning eller andra viktiga länkar, mm.

Om du valde att sätta in dom här värdena i phpMyAdmin panelen så ska du skapa en foreign key som länkar kolumnen author_id i posts tabellen till user tabellens kolumn id. För att göra detta manuellt i phpMyAdmin panelen så letar du fram kolumnen author_id och till höger på den kolumnen står det Index, vilket du ska klicka på för att göra den till en index. Sedan klickar du på ”Relation view” som finns under tabellen/kolumnerna, och får då fram en ny sida där du på andra kolumnen, author_id klicka på den andra dropdown menyn och välja users och i den sista id, och så namnger vi denna foreign key till posts_users_fk. Till sist sätter vi ON DELETE till NO ACTION och ON UPDATE till CASCADE så att det ser ut så här:

foreign key constrint

Skapa ”foreign key” där posts » author_id refererar till user » id

Du kan även för att skapa en foreign key genom att klicka på posts tabellen och sedan fliken SQL och klistrar in följande SQL kod:


Dummy Data i users & posts

Jag tänkte att vi skulle lägga in ett par användare i users tabellen. Vi måste börja med den eftersom posts har en foreign key author_id som är beroende av ett värde från users » id och vilket gör att posts inte kan fyllas i med data innan det finns en användare som kan ha skrivit ett inlägg.

 

users

Börja med att fyll i kolumnen, name, email, username och admin vilket kan vara antingen 1 eller 0 d.v.s. admin eller inte (kom ihåg att id sätts automatiskt).

Du kanske märke att jag hoppade över kolumnen password? På grund av att lösenordet kommer att vara krypterat i databasen med BCRYPT (som använder sig av CRYPT_BLOWFISH algoritm) måste vi kryptera lösenordet innan vi lagrar den i tabellen. Detta göt vi så klart i koden när en ny användare anger ett lösenord vid registrering av nytt konto.

Skapa en PHP fil där du skriver in följande:

När du nu kör filen på din server ska du få ett liknande output i webbläsaren:

Kopiera det och klistra in det i password kolumnen (kom ihåg att skriva ner lösenordet någonstans).

Du kan läsa mer om funktionerna hör kryptering av lösenord i PHP dokumentationen: password_hash() och password_verify().

 

posts

Nu kan vi lägga till en artikel i posts tabellen. Om du har lagt till ett par användare kommer du att få välja mellan dom i kolumnen author_id:

kolumnen author_id

Jag la till två användare och har därför två att välja mellan i kolumnen author_id.


 

Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *