Kunskapsbanken
Artiklar, guider, tips och trix tillsammans med exempelprogram inom webbprogrammering och webbutveckling. Inläggen är listade i den ordning som de senast uppdaterats.
#Docker
En snabb översikten av vad Docker är kan vi hitta på Dockers egna webbsida. Docker är en container teknologi som liknar en avskalad virtuella maskin. Vad tillför det till oss som utvecklare?
Docker låter utvecklare att utveckla och driftsätta applikationer i virtuella container miljöer. Detta ska göra att en applikation kan köras på exakt samma sätt utan kompabilitets problem oberoende av vilken dator/server den körs på, så länge Docker är installerat. Att applikationen kan köras oberoende av systemet gör att applikationen blir lättare att använda, utveckla, underhålla och driftsätta.
#Docker terminologi
- Image: En image är typ ett exekverbart paket som innehåller allt som behövs för att köra applikationen, det inkluderar konfigurationsfiler, miljövariabler och bibliotek.
- Dockerfile: Fil som innehåller instruktionerna för att bygga en Docker image. Koden som används för att skapa en Image.
- Build: Skapar en image snapshot från Dockerfile.
- Tag: Version av en image. Varje image har ett tag namn.
- Container: Ett lättviktig program skapat från en specifik image version. Vi kan se det som att vi kallar en image en container när den exekveras.
- DockerHub: Image repository där vi kan hitta images. Typ GitHub för images.
- Docker Daemon: Körs på host systemet. Användare kan inte jobba direkt mot Docker daemon utan gör det via Docker klienter.
- Docker Engine: Skapar och kör Containers.
- Docker Client: Huvud interfacet för Docker.
#Öva på Docker
Kolla på följande video för en kort introduktion till Docker och hur vi kan använda det.
Om ni redan har läst kursen vlinux kan ni gå vidare till nästa steg. Annars jobba igenom hela följande guide för att lära er skapa egna images och containrar och använda docker-compose.
Om ni vill öva mer på Docker så finns det många Docker övningar på killercoda.
Läs om Docker latest tag, ett annat hett ämne inom Docker är om man ska använda latest taggen för att köra images eller ej.
#Docker i devops
Docker är väldigt populärt inom devops världen av många anledningar, läs om varför i Dockers bloggserie Docker and the Three Ways of DevOps.
#Databas i Docker
Att köra sin databas i Docker har länge varit debatterat, många är emot men fler och fler börjar tycka att det är OK. Jag är för att köra databasen in Docker så länge man lägger data mappen som en volym så att datan inte skrivs över när vi startar om containern.
- Läsa om argumenten i Should You Run Your Database in Docker?.
MySQL sparar sin data i mappen /var/lib/mysql så när ni kör er databas container i produktion gör den mappen till en volym på host systemet. Så att datan i databasen inte försvinner när vi stänger ned containern.
#Spara konfiguration som kod
En viktigt del av det praktiska inom devops är att spara konfiguration som kod och versionshantera den. Detta är för att undvika att tillfällen uppstår där det bara är specifika personer som vet hur man startar/kör/konfigurerar något. Allt ska finnas som kod och versionshanterat så alla kan göra det.
En typisk sån sak är att bygga/köra Docker images. Att bygga/starta en image behöver ofta någon slags konfiguration t.ex. vad ska vara volymer, miljövariabler eller vilken port som ska öppnas. Om detta inte finns som kod blir det svårt för någon annan än för den som skrev koden att göra det.
För Docker använder vi docker-compose i detta syftet.
Läs att använda docker compose i produktion.
För att docker-compose ska klara av att hantera <<-EOF i Dockerfile, vilket vi använder för Microblog, behöver ni sätta följande miljövariabler:
export DOCKER_BUILDKIT=1 export COMPOSE_DOCKER_CLI_BUILD=1
Om ni jobbade igenom hela docker guiden längre upp borde ni ha det installerat. Annars jobba igenom följande guide för att installera.
#Revision history
- 2023-10-24: (A, aar) Första versionen.
Programmera din webbplats 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.
#Grep (och regex)
Vi har kikat på grep tidigare och vi vet hur vi använder det för att matcha delsträngar från en fil och manipulera utskriften. Vi kan även använda oss av reguljära uttryck i vår matchning.
Några “bra att ha”-options:
| Command | Beskrivning |
|---|---|
$ grep -E |
Vi slipper “escapea” tecken som []{} etc. Utan -E hade vi fått använda \[\]\{\}. |
$ grep -o |
Vi visar enbart matchningen och utelämnar resten av raden. |
$ grep -n |
Visar även vilken rad matchningen är på. |
$ grep -f <file1> <file2> |
I file1 kan vi ha ett uttryck per rad och använda det på textmassan i file2. Till exempel: $ grep -f a.txt b.txt kommer plocka radvis från a.txt och applicera det på b.txt. Mycket effektivt. |
$ grep <pattern> <file1> <file2> |
letar i båda filerna och matchar. |
Vi kan såklart kombinera options i våra kommandon, tex $ grep -Eo -f <file1> <file2> <file3>.
#Special backslash expressions
GNU grep har ett par inbyggda “backslash expressions” som kan underlätta för oss. Framförallt är det \w (matcha ord) och \s (space) som fungerar.
#Några exempel
Vi tar några exempel på hur det kan gå till. Det bästa är att själv sitta och testa de olika konstruktionerna tidigare i artikeln för att se vad som händer. Filen som används återfinns i exempelmappen. Den innehåller en massa amerikanska presidenter.
Matcha alla som har förnamnet “William”:
$ grep -E "William" presidents.txt
William Henry Harrison, 1841-1841
William McKinley, 1897-1901
William Howard Taft, 1909-1913
William Jefferson Clinton, 1993-2001
Om ens mönster innehåller mellanslag måste man omsluta mönstret med quotes:
$ grep -E "George Walker" presidents.txt
George Walker Bush, 2001-2009
Matcha alla vars första bokstav är “W” eller “A”:
$ grep -E "^[WA]" presidents.txt
Andrew Jackson, 1829-1837
William Henry Harrison, 1841-1841
Abraham Lincoln, 1861-1865
Andrew Johnson, 1865-1869
William McKinley, 1897-1901
William Howard Taft, 1909-1913
Woodrow Wilson, 1913-1921
Warren Gamaliel Harding, 1921-1923
William Jefferson Clinton, 1993-2001
Matcha alla vars första bokstav INTE är i spannet A-V:
$ grep -E "^[^A-V]" presidents.txt
William Henry Harrison, 1841-1841
Zachary Taylor, 1849-1850
William McKinley, 1897-1901
William Howard Taft, 1909-1913
Woodrow Wilson, 1913-1921
Warren Gamaliel Harding, 1921-1923
William Jefferson Clinton, 1993-2001
Matcha alla vars rad sllutar på 93:
$ grep -E "93$" presidents.txt
Benjamin Harrison, 1889-1893
George Herbert Walker Bush, 1989-1993
Matcha alla vars tillträdesår börjar på 1 och slutar på 3:
$ grep -E " 1..3" presidents.txt
# Alternativt
# grep -E "1[0-9]{2}3-" presidents.txt
Franklin Pierce, 1853-1857
Grover Cleveland, 1893-1897
Woodrow Wilson, 1913-1921
Calvin Coolidge, 1923-1929
Franklin Delano Roosevelt, 1933-1945
Dwight David Eisenhower, 1953-1961
Lyndon Baines Johnson, 1963-1969
William Jefferson Clinton, 1993-2001
Matcha alla “James” vars andra namn börjar på “B” eller “K”:
$ grep -E "James [BK]" presidents.txt
James Knox Polk, 1845-1849
James Buchanan, 1857-1861
Matcha alla där antingen “Obama” eller “Earl” finns med:
$ grep -E "Obama|Earl" presidents.txt
James Earl Carter Jr., 1977-1981
Barack Hussein Obama, 2009-2017
Matcha alla “John” och “Johnson”. Här ser vi även hur en grupp fungerar, ? talar om att gruppen med “son” ska finnas 0 eller 1 gång.
$ grep -E "John(son)?" presidents.txt
John Adams, 1797-1801
John Quincy Adams, 1825-1829
John Tyler, 1841-1845
Andrew Johnson, 1865-1869
John Fitzgerald Kennedy, 1961-1963
Lyndon Baines Johnson, 1963-1969
Som vi sett kan vi använda “character classes” för att matcha spann av antingen bokstäver eller siffror. Grep har även stöd för några till som fungerar likadant men ser ut på ett annat sätt:
| Quantifier | Character Classes |
|---|---|
| [:alnum:] | Alphanumeric characters. |
| [:alpha:] | Alphabetic characters. |
| [:blank:] | Space and tab. |
| [:digit:] | Digits. |
| [:lower:] | Lowercase letters. |
| [:upper:] | Uppercase letters. |
Dessa behöver vi lägga i en character class då [ är en builtin i shellet ($ man [).
$ grep "[[:digit:]]" <file>
#Avslutningsvis
Det här var lite om grunderna i regex med grep. Kör igång och testa på sidorna:
Använd sedan artikeln att luta dig mot i uppgifterna.
#Revision history
- 2023-09-12: (A, lew) Första versionen.
#Sed
Sed är en Stream Editor som kan söka efter, matcha, gruppera och byta ut strängar från en ström med text. Sed jobbar med options och flaggor, vilka vi ska titta mer på. Det som gör Sed till ett kraftfullare verktyg än tex Grep är möjligheten att jobba med “substitution” och att kunna editera direkt i filer, sk “inplace”. Vi blandar även in lite reguljära uttryck.
I de exempel som nu följer så används en textfil, courses.txt med innehållet:
Kenneth Lewenhagen is the teacher in the course VLinux (DV1611). Andreas Arnesson is the teacher in the course OOPython (DV1437). Emil Folino is the teacher in the course Webbapp (DV1609). Mikael Roos is the teacher in the course OOPHP (DV1608).
Vi kan använda filen på följande sätt: sed OPTIONS... [SCRIPT] [INPUTFILE...]. Vill du testa själv finns filen i exempelmappen.
Några “bra-att-ha”-options och commands:
| Command | Beskrivning |
|---|---|
$ sed -E |
Vi slipper “escapea” tecken som []{} etc. Utan -E hade vi fått använda \[\]\{\}. |
$ sed OPTIONS '/<pattern>/p |
“p” talar om att vi vill skriva ut resultatet. |
$ sed -n |
Vi visar enbart raden som matchar och utelämnar resten. |
$ sed -ibackup |
Editera “inplace” och skapa en backupfil med ändelsen backup |
Fler kommer dyka upp under artikelns gång.
#Versioner av sed
Sed bör vara installerat per default. Det finns dock olika versioner av programmet och den vi ska använda är GNU’s version. I skrivande stund utgår guiden från:
$ sed --version
sed (GNU sed) 4.8
...
#Matchning av sträng/siffror
Vi har textfilen att utgå ifrån.
Tips: Kopiera gärna in texten och uttrycket i https://regex101.com/ så ser du hur det fungerar.
Låt säga att vi vill ha tag i raden om kursen OOPython:
$ sed '/OOPython/p' courses.txt
Kenneth Lewenhagen is the teacher in the course VLinux (DV1611).
Andreas Arnesson is the teacher in the course OOPython (DV1437).
Andreas Arnesson is the teacher in the course OOPython (DV1437).
Emil Folino is the teacher in the course Webbapp (DV1609).
Mikael Roos is the teacher in the course OOPHP (DV1608).
Oj då, nu fick vi alla raderna samt en av dem två gånger…
Vi bryter ned händelserna:
/OOPython/ mathar all text som är exakt OOPython.
p är en flagga (kommando) som talar om att vi vill skriva ut resultatet.
Sed jobbar rad för rad och skriver automatiskt ut alla processerade rader. Vi provar lägga till flaggan -n, som stänger av det beteendet:
$ sed -n '/OOPython/p' courses.txt
Andreas Arnesson is the teacher in the course OOPython (DV1437).
Det såg bättre ut. Om vi inte hade vetat vad kursen heter då? Vi blandar in character classes. Vi provar exempelfilen igen och kursen hette något med OOP...:
$ sed -n '/OOP[a-z]\+/p' courses.txt
Andreas Arnesson is the teacher in the course OOPython (DV1437).
Snyggt! Notera att vi behövde escapa +-tecknet. För att slippa det kan vi använda ett option, -E vilket slår på extended regular expressions:
$ sed -E -n '/OOP[a-z]+/p' courses.txt
Andreas Arnesson is the teacher in the course OOPython (DV1437).
Nu händer följande:
OOP matchar alla rader med ordet OOP.
[a-z] matchar alla små bokstäver, med andra ord ython och inte HP, vilket var Mikaels kurs.
+ talar om att det ska finnas en eller flera bokstäver i följd.
Om vi hade velat ha med Mikaels kurs kan vi ändra lite vid hakparenteserna för att matcha båda:
$ sed -E -n '/OOP[a-zA-Z]+/p' courses.txt
Andreas Arnesson is the teacher in the course OOPython (DV1437).
Mikael Roos is the teacher in the course OOPHP (DV1608).
Vi har redan kikat på reguljära uttryck så vi dyker inte ner mer i det här.
#Substitution
Ett viktigt kommando i sed är “s”-kommandot (substitution). Det möjliggör att vi kan byta ut matchningen mot något annat, antingen ren text eller en hel grupp. Vi tar och kikar på hur det kan se ut. Strukturen för kommandot är:
's/regexp/replacement/flags'
Först måste vi få rätt på hur det fungerar med “substitution” och hur vi kan styra det.
$ sed -E 's/the/not a/' courses.txt
Kenneth Lewenhagen is not a teacher in the course VLinux (DV1611).
Andreas Arnesson is not a teacher in the course OOPython (DV1437).
Emil Folino is not a teacher in the course Webapp (DV1609).
Mikael Roos is not a teacher in the course OOPHP (DV1608).
Vi kan se att vi byter ut the mot not a. Det är första matchningen på varje rad som byts ut.
$ sed -E 's/the/the best/2' courses.txt
Kenneth Lewenhagen is the teacher in the best course VLinux (DV1611).
Andreas Arnesson is the teacher in the best course OOPython (DV1437).
Emil Folino is the teacher in the best course Webapp (DV1609).
Mikael Roos is the teacher in the best course OOPHP (DV1608).
Nu, tack vare flaggan /2, är det den andra matchningen på varje rad som byts ut. För att ta alla använder vi flaggan /g (global replacement):
$ sed -E 's/the/the best/g' courses.txt
Kenneth Lewenhagen is the best teacher in the best course VLinux (DV1611).
Andreas Arnesson is the best teacher in the best course OOPython (DV1437).
Emil Folino is the best teacher in the best course Webapp (DV1609).
Mikael Roos is the best teacher in the best course OOPHP (DV1608).
#Fler exempel
Vi kikar på hur vi kan ändra på informationen i filen med hjälp av substitution. Vi tänker oss att kurskoderna ska bytas ut och under tiden behöver vi ta bort de som finns. Vi byter ut dem mot “not available”:
$ sed -E -n 's/[A-Z]+[0-9]{4}/not available/p' courses.txt
Kenneth Lewenhagen is the teacher in the course VLinux (not available).
Andreas Arnesson is the teacher in the course OOPython (not available).
Emil Folino is the teacher in the course Webapp (not available).
Mikael Roos is the teacher in the course OOPHP (not available).
Vi matchar enbart kurskoden och byter ut den mot “not available”.
s/ talar om att vi vill använda substitution.
/not available/ är den andra delen av uttrycket, kallat replacement. Vi byter ut matchningen mot detta.
Än mer kraftfullt blir det om vi blandar in grupper i mixen.
#Grupper
För att markera en grupp använder vi parenteser runt matchningen, (...). Vi kan återanvända en grupp med \1, \2 etc.
Ett första exempel för att visa hur det kan fungera. Vi fångar upp för- och efternamn och återanvänder den gruppen:
$ sed -E -n 's/(^\w+\s\w+).+/\1/p' courses.txt
Kenneth Lewenhagen
Andreas Arnesson
Emil Folino
Mikael Roos
\w är detsamma som att skriva [a-zA-Z].
\s är ett mellanslag.
Låt säga att vi vill få tag på namnet på den person som har kursen Webapp tillsammans med kurskoden:
$ sed -E -n 's/(^\w+\s\w+).+Webapp.+([A-Z]{2}[0-9]{4}).+/\1 \2/p' courses.txt
Emil Folino DV1609
Nu blev det rörigt! Vi tar det bit för bit så klarnar det:
(^\w+\s\w+): Parenteserna talar om att det ska vara en grupp.
Insättningstecknet ^ (caret, morot) markerar början på raden.
Sedan följer \w som fångar alla bokstäver följt av ett plus (+) då vi vill att det ska upprepas minst en gång. Sedan kommer ett mellanslag (\s) följt av en \w till.
Nästa plustecken tar alla bokstäver fram till något annat dyker upp, som till exempel ett mellanslag. Detta blir grupp 1 (namnet).
.*Webapp.*: Konstruktionen .* matchar vilket tecken som helst, noll eller flera gånger fram till ordet Webapp. Sedan tar vi allt som kommer i vår väg igen.
([A-Z]{2}[0-9]{4}).*: Vi vet hur en kurskod ser ut så vi stannar inte förrän vi kommer till den andra gruppen. Kurskoden är två stora bokstäver följt av 4 siffror. Måsvingarna, {2}, talar om att det som sker i karaktärsklassen ska matchas 2 gånger följt av 4 siffror. Där stänger vi gruppen och plockar resten av raden med .*.
/\1 \2/: Den andra delen av uttrycket är delen som talar om vad som ska ersätta matchningen. Nu har vi ju fångat upp de grupper som vi vill återanvända så vi petar in dem där.
#Inplace
Om vi till exempel skulle ha en stor fil med massa text, kanske en scriptfil och vi vill ta bort alla semikolon för vi har uppdaterat kodstandarden till senaste eslint, kan vi ge oss på “inplace”-editering. Man skickar då in ett “pattern” rätt in i en fil och applicerar det på den. Det kan vara oerhört lurigt då man inte alltid vet hur filen ser ut eller om man inte testat sitt regex ordentligt. För att vara på den säkra sidan kan vi ta för vana att vi alltid tar en backup utan filen vi editerar. Så här gör vi:
Jag vill byta ut läraren “Andreas Arnesson” för kursen OOPython då “Marie Grahn” ska ta över den. Om man är lite våghalsig kör man kommandot rakt av:
$ sed -E -i 's/Andreas Arnesson/Marie Grahn/' courses.txt
$ cat courses.txt
Kenneth Lewenhagen is the teacher in the course VLinux (DV1611).
Marie Grahn is the teacher in the course OOPython (DV1437).
Emil Folino is the teacher in the course Webapp (DV1609).
Mikael Roos is the teacher in the course OOPHP (DV1608).
Det var kanske inte det mest farliga eller avancerade vi kunde göra men det hade vart bättre att vara på den säkra sidan:
$ sed -E -ibackup 's/Andreas Arnesson/Marie Grahn/' courses.txt
$ ls
courses.txt courses.txtbackup
Här kommer courses.txt innehålla den editerade varianten och courses.txtbackup innehåller orginalet. Du kan självklart välja annat namn än “backup”.
#Avslutningsvis
Det här var lite om grunderna i regex med sed. Kör igång och testa på sidorna:
Använd sedan artikeln att luta dig mot i uppgifterna.
#Revision history
- 2023-09-12: (A, lew) Första versionen.
Styla din webbsida med HTML och CSS
En ostylad webbplats.
Vi skall styla en ostylad webbplats med CSS för att lära oss grunderna i hur man jobbar med CSS konstruktioner för att styla en webbplats. Vi kommer utgå från en webbplats som enbart innehåller HTML-kod och en del innehåll, sedan stylar vi del för del där vi börjar med navbaren, headern och footern för att sedan gå vidare och se hur man kan styla innehållet i en artikel och hur man kan dela upp webbsidan i 2 eller tre kolumner. Vi avslutar med inslag av en responsiv webbplats.
Det är bra om du har en CSS-resurs vid sidan när du jobbar igenom artikeln, det underlättar om du kan slå upp de konstruktioner som används.
Skapa en webbsida med HTML, CSS och PHP (v2)
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.
Installera Thonny
Denna artikel visar hur du kommer igång och installerar Thonny.
Kom igång med ditt första program i Python
Denna artikel visar hur du kommer igång med Python och visar hur du skriver ditt första program i Python.
Artikeln visar även hur du kan jobba med exempelfiler från kursrepot för python-kursen.
Installera PHP Xdebug (2023)
Så här gör du för att installera och aktivera PHP Xdebug.
Animationer och övergångar
Vi har i tidigare kursmoment tittat på hur vi kan designa webbapplikationer så de ser ut som native appar. Vi ska i denna övning titta på hur vi med hjälp av animationer och övergångar även får känslan av att det är en native app.