Att samla in kontaktuppgifter från intressenter på en exempelvis en mässa är ofta en omständig process.
Traditionellt används pappersblanketter som senare måste matas in i datorn manuellt – tidsödande och lätt att göra fel.
Men tänk om du kunde bygga en egen webbapp som samlar in uppgifterna direkt till en databas via en enkel QR-kod?
I den här artikeln visar vi hur du bygger en sådan lösning – helt utan pappersarbete!
Bakgrund
Istället för att dela ut pappersblanketter, kan du på t.ex på en mässa ställa upp en skylt med en QR-kod.
När besökaren skannar koden med sin mobil öppnas ett formulär där de själva fyller i sina kontaktuppgifter.
Informationen sparas direkt i en databas och är redo för dig att använda – utan något extra arbete efter mässan.
Att anlita en programmerare för detta kostar ofta runt 1000 kr/timme plus moms. Dessutom är detta ett roligt och lärorikt projekt!
Koden är på en nivå som påminner om när man på 80-talet satt med C64-användarmanualen och testade hur man gjorde en ballongsprite i BASIC.
Skillnaden är att vi idag använder PHP och HTML.
Med hjälp av verktyg som ChatGPT kan du dessutom komma mycket långt på egen hand.
Tekniken bakom: LAMP
För detta projekt använder vi en klassisk LAMP-stack:
- Linux – Operativsystem
- Apache – Webbserver
- MySQL/MariaDB – Databashanterare
- PHP – Serversidespråk
Det finns flera sätt att installera en LAMP-miljö, oavsett om du kör Linux, macOS eller Windows.
En bra guide hittar du här:
👉 Så installerar du en LAMP-server med VirtualBox och Ubuntu Server 22.04 LTS
Observera att VMware numera är gratis för privatpersoner och ofta fungerar bättre än VirtualBox.
Dessutom har Ubuntu 24.04 LTS nyligen släppts.
Vi utgår från att du redan har en fungerande LAMP-miljö.
Innan vi börjar bör vi fundera på hur databasen ska se ut, det vill säga vilka fält som ska finnas. Eftersom vi ska bygga ett adressregister handlar det om de vanliga fälten: förnamn, efternamn, adressrad 1, adressrad 2, postnummer, ort, mobilnummer och e-postadress.
Ju mer specifik du är mot ChatGPT, desto bättre resultat får du.
Vår första instruktion till ChatGPT blir:
Bygg ett adressregister.
Det ska innehålla förnamn, efternamn, adressrad 1, adressrad 2, postnummer, ort, mobilnummer och e-postadress.
Skapa ett formulär i HTML med ett PHP-skript som tar emot datan och sparar den i en MySQL-databas.
Se till att namn och adresser automatiskt får stor bokstav i början.
ChatGPT kommer nu att producera din första kod. Den sparar du på webbservern i din testmiljö.
När vi har sparat vår första kodfil på webbservern och fått ett formulär och ett PHP-skript som sparar data till databasen, är det dags att tänka på nästa steg.
Nästa instruktion till ChatGPT kan vara:
Bygg ett PHP-skript som visar alla poster i adressregistret i en snygg HTML-tabell.
Lägg till möjlighet att redigera och ta bort poster. När man klickar på ”Redigera” ska formuläret fyllas i med den befintliga informationen, och när man klickar på ”Ta bort” ska posten raderas från databasen.
Genom att ge tydliga och detaljerade instruktioner blir det mycket enklare för ChatGPT att generera kod som fungerar direkt, utan att du behöver ändra så mycket i efterhand.
Spara även detta skript på webbservern och testa så att allt fungerar som tänkt innan du går vidare.
Tips: Om du använder Chrome kan du skapa en QR-kod för sidan. Om du arbetar lokalt i ditt nätverk måste dock telefonen vara inloggad på samma nätverk för att QR-koden ska fungera.
Vill du få en snyggare vy på mobilen kan du ge ChatGPT instruktionen att koden ska anpassas för exempelvis Bootstrap 5.
Steg för steg: Utveckla vidare
När vi har ett fungerande system för att lägga till, visa, redigera och ta bort poster i adressregistret, kan vi börja lägga till fler smarta funktioner.
Nästa instruktion till ChatGPT:
Bygg en sökfunktion i PHP som låter användaren söka efter poster baserat på förnamn, efternamn, postnummer eller e-postadress.
Resultatet ska visas i samma HTML-tabell som innan.
När sökningen fungerar kan du gå vidare:
Lägg till en funktion för att exportera adressregistret till en CSV-fil som kan öppnas i Excel.
Använd PHP för att skapa filen och skicka den som en nedladdning till användaren.
Genom att jobba på detta sätt — ett litet steg i taget — lär du dig både hur koden fungerar och hur du styr ChatGPT för att få exakt det du vill ha.
Spara alltid dina filer på webbservern efter varje steg och testa noggrant innan du går vidare!
Strukturera projektet
För att hålla ordning på alla filer som vi bygger upp i adressregisterprojektet, är det bra att direkt från början skapa en enkel och logisk mappstruktur på webbservern.
Förklaring av filerna:
- form.php: Här finns formuläret där du matar in nya adresser. Den versionen som ligger som tar fil på serven saknar action=”spara.php” lägg till den på form tagen.
- lista.php: Visar alla registrerade adresser i en snygg tabell.
- redigera.php: Laddar in en post i ett formulär så att den kan redigeras.
- ta_bort.php: Tar bort en post från databasen.
- sok.php: Söker i databasen. Inte aktuell för den versionen kommer finnas att lägre ner nedan.
- exportera.php: Skapar en CSV-fil för nedladdning.
- config.php: Innehåller inloggningsuppgifterna till MySQL.
- css/style.css: Här kan du lägga till egen design.
- tack.html: Innehåller en tack sida, efter användaren har skickat in sin data. Den länkar tillbaka till index.html ändra det till index.php
OBS: Under utvecklingsarbetet kan det vara praktiskt att kalla din huvudsida indx.php istället för index.php, för att enklare hålla koll på dina filer.
Tänk på att ChatGPT ibland kan förstöra sin egen kod, särskilt om instruktionerna blir många, eftersom den kan glömma bort början av instruktionerna. Därför är det bra att spara olika versioner av det ChatGPT producerar.
Skapa databasen
Logga in på din server via SSH och starta MySQL:
sudo mysql
Skapa databasen och användaren:
CREATE DATABASE adressregister;
CREATE USER 'adressregister'@'localhost' IDENTIFIED BY 'z3fxQqFMhVcjEyt3ZZeKnjHYQfiPLJ';
GRANT ALL PRIVILEGES ON adressregister.* TO 'adressregister'@'localhost';
FLUSH PRIVILEGES;
USE adressregister;
Skapa tabellen:
CREATE TABLE AdressData (
id INT AUTO_INCREMENT PRIMARY KEY,
datum DATE NOT NULL,
fornamn VARCHAR(255) NOT NULL,
efternamn VARCHAR(255) NOT NULL,
adressrad1 VARCHAR(255),
adressrad2 VARCHAR(255),
postnummer_postort VARCHAR(255),
mobiltelefon VARCHAR(20),
epost VARCHAR(255)
);
Ladda ner färdiga filer
För att undvika att artikeln blir för lång kan du ladda ner källkoden som en .tar-fil:
(Observera att vi använt indx.php istället för index.php under utvecklingen.)
Grattis – din första webbapp är klar!
Nu kan du ladda upp din kod till en server som är ansluten till internet.
Tips:
Skapa en QR-kod som leder direkt till din formulärsida. Skriv ut QR-koden på en skylt så att exempelvis mässbesökare enkelt kan fylla i sina uppgifter!
Nästa steg: Bli ännu bättre
Använd ChatGPT som din mentor:
- Be ChatGPT förklara koden rad för rad.
- Förstå varje del och börja anpassa appen efter dina egna behov.
- Sätt gärna upp en separat testmiljö där du kan experimentera utan att riskera den riktiga databasen.
Viktigt: Tänk på säkerheten!
Din webbapp fungerar – men den är inte säker än!
Internet är fullt av bottar som försöker hitta och attackera osäkra webbapplikationer.
Skydda särskilt administratörssidor som admin.php och export.php:
Skapa en separat mapp för adminfunktionerna och lägg en .htaccess-fil där med exempelvis:
Order deny,allow
Deny from all
Allow from 192.168.1.0/24
Detta gör att endast datorer från ditt lokala nätverk kan komma åt mappen.
För ännu bättre säkerhet: lösenordsskydda adminmappen.
Sammanfattning
Genom att bygga din egen webbapp:
- Sparar du tid och slipper manuellt arbete.
- Skapar du en modern och professionell upplevelse (ingen vill fylla i papper 2025!).
- Lär du dig grunderna i webbprogrammering.
- Lägger du grunden till fler spännande projekt i framtiden!
