Kunskapsbanken

Artiklar, guider, tips och trix tillsammans med exempelprogram inom webbprogrammering och webbutveckling. Inläggen är listade i den ordning som de senast uppdaterats.

Installera versionshanteringssystemet Git på Windows med Cygwin

Git är ett versionshanteringssystem som utvecklades i samband med arbetet med Linux-kärnan. Git har nu det blivit ett alltmer populärt verktyg för att hantera kod.

Här är en kort guide till hur du installerar Git på Windows och använder det tillsammans med terminalen Cygwin.

Read more »

Category: labbmiljö, webbprogrammering.

Programmera din webbplats med PHP

Programmera webbsidan med PHP.

Programmera webbsidan med PHP.

Vi skall gå igenom ett antal grundläggande PHP-konstruktioner som hjälper oss att använda PHP som ett programmeringsspråk och skapa dynamiska webbsidor. “Dynamiska” webbsidor innebär att man skriver en PHP-fil som kan generera olika webbsidor med olika innehåll. Webbsidan kan ändra sitt innehåll baserat på vilken dag det är eller visa upp sökresultat när man söker i en databas eller visa upp alla sidorna i en bok.

Vi börjar med att övergripande och kortfattat gå igenom olika konstruktioner och därefter använder vi dem för att skapa webbsidor och träna på PHP.

Read more »

Category: webbprogrammering, html, css, php, kurs webtec.

Skapa en webbsida med HTML, CSS och PHP (v2)

En webbplats, en me-sida.

En webbplats, en me-sida.

Vill man bli webbprogrammerare så behöver man lära sig flera tekniker och hur de samverkar. Låt oss därför, steg för steg, skapa en liten webbplats med HTML, CSS och PHP.

Webbplatsen får innehålla ett par sidor med header och footer, några bilder, länkar och en meny för att navigera mellan sidorna. Det blir en bra start. Dessutom lär vi oss att validera sidorna så att de stämmer med de standarder vi använder.

Read more »

Category: webbprogrammering, html, css, php, kurs webtec.

Notera att den här artikeln ska du enbart läsa igenom. Du behöver inte installera Apache2 lokalt på din maskin, utan det gör du senare i Docker.

Kom igång med Apache

Apache är en webbserver utvecklad av Apache Software Foundation. Apache har funnits med sedan 1995 och är en av världens mest använda webbservermjukvaror för webbinnehåll via HTTP.

#Installera Apache

Vi behöver webbservern Apache. Så här installerar du Apache och testar att det fungerar. Om du installerar som rootanvändare behöver du inte använda sudo. Det gäller genomgående genom artikeln.

$ sudo apt install apache2
$ sudo apachectl start
$ sudo apachectl status

apachectl är en frontend för att administrera servern. Via den kan vi bland annat starta, stoppa och se status.

Apache sparar sina loggfiler i /var/log/apache2. I filen access.log loggas varje request till webbplatsen. I filen error.log loggas felaktigheter, till exempel om något i en configurationsfil gör så att servern inte kan startas.

Du kan starta ett kommando tail -f som skriver ut saker som hamnar i slutet av en loggfil. Det kan vara ett bra sätt att kolla om något skrivs till loggen. För att titta i loggfilerna så måste man vara root. Så här man kan skriva för att logga innehåll som skrivs till filen error.log.

$ sudo tail -f /var/log/apache2/error.log

I standardinstallationen så lägger Apache sina configfiler i /etc/apache2/ och webrooten ligger i /var/www/html/. Om du vill testa att lägga till en ny sida så gör du det. Det är alltid bra att känna att man har kontroll på saker och ting.

#Eventuella warningar och fel

När du kör $ apachectl start kan du få varningen:

AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.17.0.2. Set the 'ServerName' directive globally to suppress this message

Vi kan sätta variabeln ServerName globalt så slipper vi se varningen. Editera filen /etc/apache2/apache2.conf:

$ sudo nano /etc/apache2/apache2.conf

Gå längst ner i filen och lägg till följande:

ServerName 127.0.0.1

Ipadressen pekar på localhost.

När du kör $ apachectl status kan du stöta på felet:

/usr/sbin/apachectl: 113: www-browser: not found
'www-browser -dump http://localhost:80/server-status' failed.
Maybe you need to install a package providing www-browser or you
need to adjust the APACHE_LYNX variable in /etc/apache2/envvars

Det handlar om att det inte finns en webbläsare för terminalen installerad. Det finns flera att välja mellan men någon av följande fungerar:

$ apt install w3m
# Alternativt:
$ apt install lynx

Nu kan Apache göra en “http request” till den lokala webbservern och visa status med kommandot $ apachectl status.

Om du nu har möjlighet att nå localhost kan du se default filerna som webbservern skapat i mappen /var/www/html.

#Skapa en namnbaserad virtuell host

Låt oss nu skapa en Apache Name-based Virtual Host. Ponera att vi har en kund och vi skall skapa deras webbplats vlinux.dbwebb.se. Men, vi vill först testa den i vår egen utvecklingsmiljö, genom att köra samma domän via en namnbaserad virtuell host i Apache.

Det finns en katalog /etc/apache2/sites-available där man lägger configfilerna för de virtuella hostar man har. Sedan enablar man de virtuella hostar som Apache skall använda. Då länkas filerna i katalogen sites-enabled.

I katalogen sites-available ligger en configfil som man kan utgå ifrån. Den brukar heta 000-default.conf.

Följ dessa steg för att “enabla” en virtuell namnbaserad host för vlinux.dbwebb.se. Jag använder nano som editor.

$ cd /etc/apache2/sites-available
$ sudo cp 000-default.conf vlinux.dbwebb.se.conf
$ sudo nano vlinux.dbwebb.se.conf

Den färdiga filen vlinux.dbwebb.se.conf kan se ut så här. Du kan behöva ändra sökvägarna så de passar till ditt system.

<VirtualHost *:80>
    ServerAdmin klw@vlinux.dbwebb.se

    ServerName vlinux.dbwebb.se
    ServerAlias www.vlinux.dbwebb.se

    DocumentRoot /var/www/vhosts/vlinux.dbwebb.se/

    ErrorLog  /var/www/vhosts/linux.dbwebb.se/error.log
    CustomLog /var/www/vhosts/linux.dbwebb.se/access.log combined

    <Directory />
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

Jag tänker mig alltså att min virtuella host skall ligga i katalogen /var/www/ under en katalogstruktur om vhosts/vlinux.dbwebb.se.

Så här fullföljer jag.

$ mkdir -p /var/www/vhosts/vlinux.dbwebb.se

Nu är det bara att enabla den virtuella hosten och låta Apache ladda om configurationen.

sudo a2ensite vlinux.dbwebb.se
sudo apachectl restart

#Lägga till namnet i hosts filen

Webbservern svarar än så länge bara på localhost. För att lägga till vårt egna namn behöver vi uppdatera filen /etc/hosts. Den innehåller redan en koppling mellan namnet localhost och dess ipadress 127.0.0.1. Lägg till följande rad i filen:

127.0.0.1   vlinux.dbwebb.se

Nu kommer inkommande trafik via namnet vlinux.dbwebb.se riktas om och gå mot localhost. Testa med någon av de terminalbaserade webbläsarna vi intallerade, tex w3m:

$ w3m vlinux.dbwebb.se

Om vi nu har några filer i /var/www/vhosts/vlinux.dbwebb.se/ kan vi förhoppningsvis se dem nu.

#Felsök configfilen

Om du får problem med configfilen så kan du titta i error-loggen för felutskrifter. Titta både i /var/log/apache2 och i loggilerna för den virtuella hosten.

sudo tail -f /var/log/apache2/error.log
tail -f /var/www/vhosts/vlinux.dbwebb.se/error.log

Du kan också köra följande kommandon för att se status på apache och dess configfil.

# Check status of apache
sudo apachectl status

# Check configuration file for errors
apachectl configtest
apachectl -t

# List virtual hosts with settings
apachectl -S

# Stop and start the service
sudo apachectl start

sudo apachectl stop

#En snyggare configfil med variabler

En variant av configfilen skulle kunna se ut så här, om man väljer att använda en form av alias, variabel, som är tillgänglig i konfigurationsfilen. På Apache-språk heter det Define.

<VirtualHost *:80>
    Define site vlinux.dbwebb.se
    Define path /var/www/vhosts

    ServerAdmin klw@dbwebb.se

    ServerName ${site}
    ServerAlias www.${site}

    DocumentRoot ${path}/${site}

    ErrorLog  ${path}/${site}/error.log
    CustomLog ${path}/${site}/access.log combined

    <Directory />
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

Pröva att använda denna varianten istället. Som du ser så är den klart enklare att duplicera när du vill skapa nya virtuella hostar. Du behöver bara ändra de två Define i början på filen.

#Simulera ett hostnamn för servern

Du har nu en virtuell host som kommer svara så fort den får ett anrop på namnet vlinux.dbwebb.se. Vad du behöver göra är att peka domännmamnet på serverns ipadress.

Normalt gör vi detta med DNS. Vi lägger så att maskinens namn kopplas mot en ipadress och DNS:en håller koll så vi hamnar på rätt plats. Om du gör detta exemplet och har en server ute på nätet, så använder du DNS:en för att den skall hamna rätt.

Men nu har vi en utvecklingsmiljö med en server i Docker som kan exponera en vald port där servern kan nås. Vi behöver dock alltså sätta upp lokalt, i vårt eget nätverk, att maskinen vlinux.dbwebb.se känns igen som 127.0.0.1 (localhost) och trafiken ska skickas dit via porten.

Vi behöver uppdatera hosts filen även på vår “riktiga” dator. På Linux finns filen på följande sökväg:

$ sudo nano /etc/hosts

Följande rad lägger du till i filen.

127.0.0.1   vlinux.dbwebb.se

På en klient med MacOS gör du på samma sätt.

Sitter du på Windows så heter filen följande. Glöm inte att du måste vara administratör för att redigera filen.

C:\Windows\system32\drivers\etc\hosts

Nu kan jag komma åt den lokala maskinen via namnet istället. Låt säga att servern exponerar port 8080. Adressen http://vlinux.dbwebb.se:8080 är numer samma som att skriva http://localhost:8080 eller http://127.0.0.1:8080. Det är precis detta som Apache tittar på när den identifierar den namnbaserade virtuella hosten.

När jag nu använder http://vlinux.dbwebb.se:8080 så kommer jag till Apache som identifierar namnet som en virtuell host och använder den DocumentRoot som är specificerad.

Klart. Magiskt. Så vida det inte strular förstås. Då får man felsöka och göra om - göra rätt. Det är en hård värld vi lever i.

#Avslutningsvis

“Namnbaserade virtuella hostar” med Apache är ett bra sätt att köra flera webbplatser på en server. Det är också ett bra sätt att köra en utvecklingsserver med många webbplatser.

När man nu kombinerar detta med servar i Docker, så får du en möjlighet att köra många webbplatser och att köra dem på många olika servrar som kan vara konfigurerade på olika sätt. Det kan vara ett kraftfullt verktyg för en webbprogrammerare.

#Revision history

  • 2022-05-09: (A, lew) Första utgåvan inför kursen vlinux ht22.

Document source.

Read more »

Category: linux.

APT, apt och pakethantering

När vi hanterar program i Linux använder vi oss utav en pakethanterare. Paketen består av det som behövs för att programmen ska fungera och Debian och Debian-baserade distributioner (tex Ubuntu) använder systemet APT (Advanced package tool) för att hantera dem. APT i sin tur tillhandahåller kommandot apt-get och det nyare kommandot apt. Den lägsta nivån av pakethanterare är dpkg (Debian Package). APT är med andra ord en mer användarvänlig front-end över systemet APT.

Du har redan använd pakethanterare i andra kurser, till exempel composer i PHP, npm i JavaScript, pip i Python osv.

#Paketlistor

Innan vi kan börja installera program bör vi förstå hur det ligger till med paketlistor och de grundläggande kommandona.

När vi installerar program utgår vi ifrån .deb filer som finns i så kallade “repositories” (arkiv). Det är servrar som tillhandahåller installationsfilerna för diverse program. Det finns 4 officiella repositories: “main”, “restricted”, “universe” och “multiverse”.

main innehåller open-source mjukvara och program från Ubuntu. restricted innehåller licensierade installationsfiler, tex drivrutiner. universe innehåller publik och open-source mjukvara. multiverse innehåller licensierad programvara.

Fri programvara Inte fri programvara
Support main restricted
Ingen support universe multiverse

Vi kan se vilka som används i filen /etc/apt/sources.list. Följande format används: <type> <url> <release-name> <repository-name>.

En rad ur filen kan se ut så här:

deb http://archive.ubuntu.com/ubuntu/ jammy-updates universe

#Kommandot apt

För att hantera alla paket och pakethanteraren använder vi kommandot apt. Det är en nyare variant på tidigare kommandon, bland annat apt-get och apt-search. De tidigare versionerna är mer lågnivå än det nyare apt så hanteringen är en del förenklad.

Kommando vad händer?
apt update Uppdatera paketlistorna
apt install Installera mjukvara
apt search Sök efter mjukvara
apt upgrade Uppgradera mjukvara
apt list –upgradable Se vilka program som kan upgraderas

#Snap

Numer kan man stöta på programmet snap. Många program finns tillgängliga via APT men via Snap kan utvecklare paketera ihop sina program och distribuera dem till användarna. Allt som behövs kommer “sandboxat” i paketet.

#Övriga pakethanterare

Andra Linux distributioner kan använda andra pakethanterare, tex rpm, pacman, yum med flera.

#Revision history

  • 2022-04-28: (A, lew) Första utgåvan inför kursen vlinux ht22.

Document source.

Read more »

Category: linux.

Testramverket Jest

Vi tar en titt på Jest som är en “test-runner” för JavaScript. Jest låter oss köra alla våra tester med ett enkelt kommando. Vi kommer sedan använda React Native Testing Library för att underlätta vissa funktioner som till exempel att rendera olika komponenter.

Read more »

Category: javascript.

Meddelanden i React Native

I denna övning tar vi en titt på hur vi kan lägga till meddelanden i våra appar. Både för när saker går som de ska och när saker blir fel.

Read more »

Category: javascript.

Installera virtualiseringsmiljön Docker

Docker kommer utgöra grunden för kursens labbmiljö. Vi kommer få en unixmiljö där vi kan exekvera alla uppgifter och program samt träna på terminalkommandon. Vi lutar oss mot Dockers egna dokumentation för installationsanvisningar, https://docs.docker.com/. Fortsätt läsa för att se hur du går vidare.

#Hämta installationsprogrammet

Webbplatsen för Docker innehåller en del där du kan ladda hem och installera Docker. Det finns en Community Edition (CE) versioner för Windows, Mac och Linux. Kör igenom installationen enligt anvisningarna.

Docker är en virtualiseringsmiljö så den kräver att din datorn är kapabel att köra vissa virtualiseringstekniker.

Du behöver bekanta dig med dokumentationen för Docker. Det är din vägledare för att komma igång med Docker.

Tips vid installation

Nu har du förhoppningsvis installerat Docker CE. Det kan såklart krångla med installationen så här samlar vi lite tips och trix når något går snett. Om du inte väljer att installera Docker för Linux kan det vara bra att tänka på följande.

#Verifiera installationen

Nu är Docker (förhoppningsvis) installerat. Det är lika bra att dubbelkolla…

$ docker --version
Docker version 20.10.13, build a224086
$ which docker
/usr/bin/docker

Bra då vet vi var vi har det installerat och att kommandot docker fungerar. Vi kör vår första container:

$ docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
1b930d010525: Pull complete
Digest: sha256:2557e3c07ed1e38f26e389462d03ed943586f744621577a99efb77324b0fe535
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

Vad som hände ovan är att Docker letar lokalt efter en image hello-world med taggen latest. Om den inte hittar den lokalt laddas den ned från Docker Hub och containern startas. Just den här containern är inte så spännande men nu vet vi att det fungerar!

#Avslutningsvis

Nu har du förhoppningsvis en fungerande Dockerinstallation.

#Revision history

  • 2022-04-11: (B, lew) Uppdatering för Windows och ht22.
  • 2019-03-08: (A, lew) Första utgåvan.

Document source.

Read more »

Category: labbmiljo.

Installera verktyget jq för att söka i JSON-filer

När vi jobbar med JSON data kan filerna snabbt bli stora och svåra att överskåda och hitta informationen i. Med hjälp av ett verktyg som jq kan vi söka och visa informationen i en JSON fil.

Ett verktyg som jq kan vara bra för den webbprogrammerare som skall jobba med JSON. Artikeln visar hur du installerar och kommer igång med verktyget.

Read more »

Category: webbprogrammering.

Lagrade procedurer i databas

Ibland räcker det inte till med enbart SQL utan man behöver någon form av ytterligare programmeringsmässig hantering av informationen. För att ta ett exempel, säg att man vill flytta pengar från ett konto till ett annat, men bara om det finns tillräckligt mycket pengar på kontot.

Man kan naturligtvis koda detta i godtyckligt externt programmeringsspråk. Men kan det finnas en möjlighet att koda sådant direkt i databasen?

Här kommer lagrade procedurer kommer till vår hjälp.

Read more »

Category: databas, sql, kurs databas.