Inledning
I takt med att fler och fler vågar sig på handel på nätet – både att handla i butiker och viljan att starta egen webbshop – följer här en guide till hur man skapar sin egen webbshop från grunden. Den slutgiltiga produkten kommer bygga på ASP, MySQL, HTML och CSS och finns för nedladdning för varje steg i denna artikelserie.
Välja ett webbhotell
Detta skript kommer köras hos webbhotellet Binero. Privat- eller företagskonto på deras Windows-server fungerar lika bra, och det kan upp- eller nedgraderas när som helst.
När webbhotellet är beställt och ett domännamn är kopplat till kontot är ni redo att ansluta till FTP-servern för att ladda upp filerna. Eftersom det inte finns några filer att ladda upp ännu börjar vi istället med att sätta upp databasstrukturen.
Sätta upp MySQL-databasen
1. Skapa en databas vid namn “webshop”.
2. Gå till www.kontrollpanelen.se och logga in i det nedre formuläret med användarnamn webXXXXX och ert lösenord för anslutning till databasen. Dessa uppgifter finns i det e-postmeddelande som skickats ut av Binero till er när ni beställde webbhotellet. I phpMyAdmin, som är ett visuellt presentationsskal till de databaser som finns under ert konto, väljer ni nu till vänster under rubriken “webXXXXX” att klicka på “_webshop”.
Tabellstruktur
Vi kommer skapa en rad olika tabeller för skriptet, eftersom det är mycket information av varierande sort som ska sparas i databasen när skriptet är fullfjädrat. Man kan alltid gå tillbaks och fylla på med fler tabeller eller ta bort i efterhand. Man kan skapa hur många tabeller som helst och beror i stor grad på hur många funktioner man avser utveckla till skriptet. Vi börjar dock enkelt med två tabeller; kategorier och produkter.
I den högra delen av sidan scrollar ni nu till slutet “Skapa ny tabell i databas webXXXXX_databasnamn“. Skriv i tabellnamnet “kategorier” och välj att tabellen skall ha tre (3) fält.
På sidan som följer finns nu tre kolumner. Vi ska nu specificera vad de olika fälten ska heta och vilken typ av information som avses sparas i fältet.
I första kolumnen under “Fält” skriver ni namnet “ID”. Detta blir namnet på fältet. Varje kategori kommer således få ett eget unikt ID-nummer som enbart identifierar just precis en specifik kategori. Under “Typ” väljer ni i rullistan / drop down-boxen “INT“, vilket betyder integer och avser datatypen heltal. Slutligen måste valet “auto_increment” (automatisk ökning) göras under “Extra” och därefter kryssar ni i den radio button / runda knapp precis under “Extra” som avser “Primary” eller “Primär”. Detta har nu gjort att för varje ny kategori som läggs in i denna tabell, ökar ID-fältet upp sitt värde automatiskt, vilket gör att två kategorier aldrig kan få samma ID-nummer.
Vidare till nästa fält. Ge det namnet “intPID”. Vi kommer i denna guide använda oss av denna form av namngivning av tabellfälten för att lätt kunna avgöra vilken datatyp som lagras i fältet. I detta fall står “int” som innan för integer/heltal, men vad står då PID för? ID känner vi igen sedan innan, så vi kan gissa att det kan vara en återkoppling till föregående fält (“ID”). “P” i “PID” är tänkt att stå för “parent”, dvs. förälder eller tidigare. När man känner till vad en kategori har för Parent ID ges möjligheten att skapa en trädliknande menystruktur med underkategorier till huvudkategorierna. Vi minns att varje kategori automatiskt får ett ID-nummer och kan således i fältet PID ange detta nummer för att berätta att denna kategori är en underkategori till huvudkategorin med ID-numret PID. Det är mycket detta handlar om när man pratar om relationsdatabaser och vi har just naggat lite i kanten på detta vidsträckta område. Var dock lugn, vi kommer inte gå så mycket djupare på det. Vad är då anledningen till att första fältet döptes till ID och inte intID tänker ni då? Det är helt och hållet en smaksak. Prefixen på fältnamnen är till för att hjälpa dig och spelar inte in på funktionaliteten. I regel vet man att det löpnummer som ID utgör är alltid ett heltal och prefixet “int” blir lite overkill.
Fortsätt med att välja datatyp för fältet PID. Även här väljer vi INT i rullisten, då det rör sig om samma datatyp som i ID-fältet innan. Inga fler val skall göras, eftersom detta fält inte ska räkna upp sig självt.
Sista fältet döper vi till “strKategori”, där “str” är kort för “string”. En string är motsatsen till “int” kan man säga, även om MySQL och andra databastyper bjuder på många fler datatyper än så här. Vi kommer dock inte komma i kontakt med andra typer än “int” och strängar i denna guide. Det finns dock ingen datatyp som heter “str”, utan det syftar bara på ett samlingsnamn som förkunnar att fältet innehåller vanlig text. Som datatyp väljer vi istället “VARCHAR”, som troligtvis är förvalt alternativ. I rutan för “Längd/Värden” skall vi ange maxlängd för innehållet i fältet. Ett kategorinamn i en webbshopsmeny är oftast inte så långt, men ta till lite i överkant ändå och välj 250.
Välj nu “Spara”, så skapas tabellen och första steget är klart. Just “Kategorier” är en angenäm tabell att skapa eftersom det inte finns så mycket information att spara ihop med kategorinamnet. Man kan alltid lägga till ett fält för kategoribeskrivning eller kanske ett fält med sökvägen till en kategoriikon, men när denna guide är till ända kommer ni troligtvis kunna lista ut hur ni kan utöka skriptet med fler funktioner på egen hand.
Nästa steg är att göra om proceduren. Klicka på “webXXXXX_webshop (1)” i vänsterkanten och scrolla ner till botten. Döp tabellen till “produkter” och välj att skapa fem (5) fält. Gör om proceduren från ovan genom att lägga till följande fält i tur och ordning med nämnda egenskaper:
- ID [typ: INT | extra: auto_increment | primär: kryssa i radioknappen ]
- intKategoriID [typ: INT]
- strProdukt [typ: VARCHAR | längd: 500 ]
- strProduktBeskrivning [typ: VARCHAR | längd: 8000 ]
- intPrice [typ: INT]
Inmatningsförfarandet kommer troligtvis ske på bredden nu eftersom antalet fält överstiger tre, men fälten är de samma, så håll bara tungan rätt i mun och glöm inte bort att välja auto_increment och kryssa i primär (första radioknappen) på ID-fältet
Tabellerna är nu uppsatta och det har blivit dags att lägga till två kategorier och två produkter. Vi börjar med att lägga till kategorierna, eftersom vi behöver veta ID-nummer som automatiskt tilldelas kategorierna innan vi kan lägga in produkterna, så att produkterna blir kopplade till rätt kategori. Det låter logiskt va?
Klicka till vänster på “kategorier” för att komma till tabellen vi skapade först. Till höger väljer ni nu femte menyknappen “Lägg till” och ni kommer till ett formulär för att lägga till rader i tabellen. Troligtvis finns här möjlighet att lägga till två rader direkt. Vi väljer att göra det enligt följande agerande:
- Lämna ID-fältet tomt. Det ges automatiskt det lägsta möjliga ID-numret.
- Skriv 0 i intPID. Eftersom det är en huvudkategori har den inget ovanliggande menyalternativ.
- I strKategori anger ni i klartext vad ni vill att kategorin skall heta. Det är detta som visas i butiken. Vi gör det enkelt för oss och kallar den för “Kategori 1″
Gör nu samma sak i formuläret nedanför, men döp den till “Kategori 2″. Glöm inte att lämna ID-fältet tomt. Tryck sedan på någon av de två nedre “Kör”-knapparna. Vi har nu skapat “Kategori 1″ och “Kategori 2″. Väljer vi “Visa” i menyn ser vi också att två rader har skapats och att ID-nummer för de två raderna har tilldelats; 1 och 2. Eftersom vi sköter inmatningen av data manuellt i databasen och ännu inte via vårt framtida egenutvecklade administrationssystem för webbshopen får vi hålla dessa siffror i minnet när vi nu väljer att gå över till tabellen “produkter” i vänsterkant. Tryck sedan på “Lägg till” och samma inmatningsprincip råder igen.
Nu ska vi mata in produkterna i databasen. Samtidigt vill vi göra kopplingar mellan de två tabeller som vi skapat och väljer således att lämna ID tomt, i intKategoriID skriva 1 (som avser “Kategori 1″), i strProdukt skriva det namn vi vill ha på produkten som visas för kunderna. Vi gör det enkelt även här och väljer det beskrivande namnet “Produkt 1″. i strProduktBeskrivning har vi nu spelrum att skriva en hel novell på 8000 tecken. Vi väljer dock att fatta oss kort och skriver “Produktbeskrivning 1″. I sista fältet, intPrice, kommer vi till det kittlande – vad ska vi ta i pengaväg för klenoden? Vi minns att datatypen sattes till att handska heltal, så ange 79. I framtiden kommer skriptet ha stöd för ören, men nu i början behöver vi inte krångla till det i onödan.
Fyll nu i nedanstående formulär med samma kategori-ID (1), produktnamn “Produkt 2″ och produktbeskrivning “Produktbeskrivning 2″, sätt priset till “1000″ och tryck på “Kör”-knappen. Två produkter har nu lagts till i kategorin “Kategori 1″ och “Kategori 2″ är fortfarande tom.
I nästa del lägger vi upp en enklare design för sidan och tar fram de menyalternativ vi just lagt in i databasen. Lägg gärna till denna blogg i din RSS-läsare. När ni följer feeden riskerar ni inte att missa någon del av denna artikelserie. Har ni frågor eller funderingar är ni givetvis välkomna att lämna en kommentar till denna artikel!