SlideShare a Scribd company logo
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
Episode X: The Python
Way Of The Force
May the web be with you
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
Build our web site, you will
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
Dagens agenda
• Demo på vad vi ska bygga
• Bygga webbsidor med Python
• Hur fungerar en webbserver?
• Webbserver med Python
• Server => Python
• Klient => HTML/CSS
• Bottle som mikroramverk
• Vad är ett mikroramverk?
• Routes => Funktioner
• Bygga vår webbplats
Vad vi ska bygga
“You can’t stop the
change, any more than
you can stop the suns
from setting.”
- Shmi Skywalker
Webbserver?
Important, this is!
En webbserver är antingen ett
datorprogram som
tillhandahåller webbsidor för en
viss webbplats eller en serverdator på
vilken sådan programvara körs.
...datorprogram som
tillhandahåller webbsidor ...
HT23 - DA354A - Webbprogrammering med Python
Webbserver
• Ett webbserverprogram har som uppgift att tillhandahålla
webbsidor och andra filer via protokollet HTTP eller HTTPS,
vanligen över Internet.
• Det förekommer också att en enskild användare kör en
webbserver för eget lokalt bruk på sin egen dator. Vanligen
kommunicerar användaren med webbservern med hjälp av
en webbläsare.
• Användaren väljer webbsidor och webbläsaren ”beställer”
webbsidorna från webbservern och visar dem på användarens
datorskärm. Webbläsaren är klient till webbservern.
Internet
Klient
Server
Klient
Internet
Klient
Server
Klient
URL
Uniform Resource Locator
Exempel på URL
https://mau.se
https://student.mau.se/mina-studier/
https://mau.instructure.com/courses/6601/discussion_topics/128343
https://student.mau.se/mina-studier/
Protokoll
Domän / IP-adress
Resurs
Grundläggande URL
http://sv.wikipedia.org:80/w/index.php?title=Dator&action=edit#Historia
Protokoll
Domän / IP-
adress Resurs
Komplett URL
Port Extra information
(GET-parametrar)
Ankare
Andra URI
Uniform Resource Identifier
ftp://ftp.is.co.za/rfc/rfc1808.txt
http://www.ietf.org/rfc/rfc2396.txt
mailto:John.Doe@example.com
telnet://192.0.2.16:80/
news:comp.infosystems.www.servers.unix
No place like 127.0.0.1, there is.
python -m http.server 8000
Starta en webbserver från en specifik mapp
HT23 - DA354A - Webbprogrammering med Python
127.0.0.1 = Den här datorn
HT23 - DA354A - Webbprogrammering med Python
Demo – Lokal webbserver
Men – hur mycket Python var
detta egentligen?
Feel the power of the server side!
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
Vad kan vi hittills?
DA106A - Webbutveckling
• Skapa webbsidor genom:
• HTML
• CSS
• (JavaScript)
Vad behöver vi lära oss? => Bygga en webbtjänst!
DA354A - Programmering
• Programmera i Python
• Variabler
• Datatyper
• Funktioner
• Filhantering
• Felhantering
• JSON
• M.m.
“Oh, my dear friend.
How I’ve missed you.”
- C-3PO
HT23 - DA354A - Webbprogrammering med Python
Behöver vi bygga allt själva?
A simpler way, there is.
To be efficent, a tool you need.
https://www.mindinventory.com/blog/best-python-web-frameworks-2019/
“I’m just a simple man trying to make
my way in the universe.”
- Jango Fett
Koncept 1
- Routes
https://student.mau.se/mina-studier/
Protokoll
Domän / IP-adress
Resurs
Grundläggande URL
Bottle - Routes
•Vi vill kunna mappa URL till olika funktioner i Python
• /home => def home()
• /contact => def contact()
• /about => def about()
• 127.0.0.1/home => def home()
• 127.0.0.1/contact => def contact()
• 127.0.0.1/about => about()
Kom igång med routes
HT23 - DA354A - Webbprogrammering med Python
Hello <name>
HT23 - DA354A - Webbprogrammering med Python
1. Första grunderna i koden
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
2. Förstå routes och argument
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
3. Förstå parametrar (& värde)
HT23 - DA354A - Webbprogrammering med Python
Ex. 1 Ex. 2
Namn på parameter till
template
- En total översikt
Riskerar att bli lite förvirrande´…
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
Att använda sig
utav flera routes...
http://127.0.0.1/
http://127.0.0.1/contact
http://127.0.0.1/about
http://127.0.0.1/xxxxxxxxx
DEMO - Routes
Koncept 2
- Templates
Templates – Mallar i HTML
Join the dark side, we have the prettiest web sites!
Bottle - Templates
• Templates är mallar för hur vi ska presentera vår information
• HTML
• CSS
• JavaScript
• Vi kan skicka data (bearbetad utav python) till våra malla för
att skapa dynamiska webbsidor
Bottle – Templates och statiska filer
•Alla templates ska:
• Ligga i mappen ”views”
• Ha filändelsen *.tpl eller *.html
•Statiska filer (bilder, css, js, etc.) ska:
• Ligga i mappen ”static”
Hur ser detta ut i bottle?
Demo - Templates
HT23 - DA354A - Webbprogrammering med Python
JSON
JavaScript Object Notation
json.dumps() => omvandla datatyper till sträng
json.loads() => omvändla stäng till datatyp
”[
{
’title': 'Star Wars',
'year': 1977,
'director': 'George Lucas'
},
{
'title': 'Fight club',
'year': 1999,
'director': 'David Fincher'
}
]”
[
{
"title": "Star Wars",
"year": 1977,
"director": "George Lucas"
},
{
"title": "Fight club",
"year": 1999,
"director": "David Fincher"
}
]
json.dumps
json.loads
Lista Sträng
Lista Sträng
Nu till vårt projekt
“There’s always a bigger fish.”
- Qui-Gon Jinn
HT23 - DA354A - Webbprogrammering med Python
Routes => Vilka behöver vi?
Route Syfte Metod Template
/ Till vår startsida GET index
/vote Rösta på en sida POST index
/disqus Visa gästbok GET disqus
/new-post Skriv ett inlägg POST disqus
*error404* En sida som ej finns Alla error
BONUS!
HT23 - DA354A - Webbprogrammering med Python
Testa så att allt fungerar
Let the battle begin
1. Fixa röstningen
2. Fixa gästboken
Röstningen
• Spara alla röster i filen ”votes.json”
• Spara rösterna som JSON-format, enligt mallen:
{
"empire": 0,
"rebels": 0
}
• Vi kan omvandla lexikon i Python till JSON genom:
• json_votes = json.dumps(votes)
• Vi kan omvandla JSON till Python-datatyper genom:
• votes = json.loads(json_votes)
HT23 - DA354A - Webbprogrammering med Python
Flödesschema
Läs in textfilens
innehåll
Tolka JSON-data
till ett lexikon
{
"empire": 0,
"rebels": 0
}
1
2
3
Flödesschema
Läs in textfilens
innehåll
Tolka JSON-data
till ett lexikon
Skriv ut
imperiets röster
Skriv ut
Rebellers röster
Skicka röster till
template
Webbsida på internet
Nu bygger vi! ;)
2. Fixa gästboken
“Power! Unlimited
power!”
- Darth Sidious
Frågor?
HT23 - DA354A - Webbprogrammering med Python

More Related Content

PDF
HT19 - DA354A - Webbprogrammering med bottle
PDF
HT17 - DA354A - Webbapplikation
PDF
HT18 - DA354A - Bottle web app
PPTX
HT15, DA354A - Introduktion till Webbprogrammering - Bottle
PPTX
HT15, DA354A - Introduktion till Webbprogrammering - Bottle (2)
PPTX
Att bygga webbapplikationer med hjälp av Django
ODP
Så funkar det (del 3) - webben
PDF
Webbens Arkitektur
HT19 - DA354A - Webbprogrammering med bottle
HT17 - DA354A - Webbapplikation
HT18 - DA354A - Bottle web app
HT15, DA354A - Introduktion till Webbprogrammering - Bottle
HT15, DA354A - Introduktion till Webbprogrammering - Bottle (2)
Att bygga webbapplikationer med hjälp av Django
Så funkar det (del 3) - webben
Webbens Arkitektur

Similar to HT23 - DA354A - Webbprogrammering med Python (20)

PDF
HT17 - DA156A - Sammanfattning av kursen
PPTX
Anpassad kurs för Acudira AB
PDF
VT16 - DA355A - Geolocation & media
PDF
HT24 - Introduktion till webbutveckling - Introduktion till HTML
PDF
Introduktion till HTML
PDF
Rails för systemvetare
PDF
Webboptimering 25 min
PDF
13 cms ht14
PDF
WP Meetup i Norrköping 2012-05-25
PDF
Webbplats med WordPress
PPTX
WPKAFE - Grunderna i WordPress
PDF
WebSockets för applikationstestare
PDF
VT18 - DA355A/DA344A - Introduktion till HTML
PDF
VT17 - DA355A - Introduktion HTML
PDF
HT19 - DA156A - Introduktion till HTML
KEY
Virtualenv och Buildout med Django
KEY
Vad är webb
PPTX
Dreamweaver cs3 och css
PDF
VT2019 - DA355A - Intro HTML & CSS
PDF
HT18 - DA156A - Extra
HT17 - DA156A - Sammanfattning av kursen
Anpassad kurs för Acudira AB
VT16 - DA355A - Geolocation & media
HT24 - Introduktion till webbutveckling - Introduktion till HTML
Introduktion till HTML
Rails för systemvetare
Webboptimering 25 min
13 cms ht14
WP Meetup i Norrköping 2012-05-25
Webbplats med WordPress
WPKAFE - Grunderna i WordPress
WebSockets för applikationstestare
VT18 - DA355A/DA344A - Introduktion till HTML
VT17 - DA355A - Introduktion HTML
HT19 - DA156A - Introduktion till HTML
Virtualenv och Buildout med Django
Vad är webb
Dreamweaver cs3 och css
VT2019 - DA355A - Intro HTML & CSS
HT18 - DA156A - Extra

More from Anton Tibblin (20)

PPTX
React - Gästföreläsning - Flerplattformsapplikationer
PDF
2025 - DA395A - Localstorage & cookies Geolocation Mediahantering.pdf
PDF
DA395A -jQuery och Ajax - Flerplattformsapplikationer med webbtekniker
PDF
VT25 - JavaScript och DOM - Flerplattformsapplikationer med webbtekniker
PDF
VT25 - DA395A - Kursintroduktion i Flerplattformsapplikationerm med webbtekniker
PDF
HT24 - DA354B - Introduktion till programmering - OOP
PDF
DA354B - Introduktion till programmering - Webbprogrammering
PDF
DA354B - Introduktion till programmering: Fil- och felhantering
PDF
HT24 - DA354B - Mer om funktioner i Python
PDF
HT24 - DA354B -Intro:Funktioner i Python
PDF
HT24 - DA354B - Introduktion till Python
PDF
HT24 - DA354B - Kursintroduktion till programmering
PDF
DA106A - Introduktion till webbutveckling - Responsiv design
PDF
HT24 - Introduktion till webbutveckling - Introduktion till CSS
PDF
HT24 - Introduktion till webbutveckling - Tabeller och formulär
PDF
HT24 - Introduktion till webbutveckling - Kursintroduktion
PDF
2024 - Localstorage & cookies Geolocation Mediahantering.pdf
PDF
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
PDF
VT24 - Responsiv design & Ramverk inom webbutveckling
PDF
DA395A - VT24 - JavaScript & Document object model
React - Gästföreläsning - Flerplattformsapplikationer
2025 - DA395A - Localstorage & cookies Geolocation Mediahantering.pdf
DA395A -jQuery och Ajax - Flerplattformsapplikationer med webbtekniker
VT25 - JavaScript och DOM - Flerplattformsapplikationer med webbtekniker
VT25 - DA395A - Kursintroduktion i Flerplattformsapplikationerm med webbtekniker
HT24 - DA354B - Introduktion till programmering - OOP
DA354B - Introduktion till programmering - Webbprogrammering
DA354B - Introduktion till programmering: Fil- och felhantering
HT24 - DA354B - Mer om funktioner i Python
HT24 - DA354B -Intro:Funktioner i Python
HT24 - DA354B - Introduktion till Python
HT24 - DA354B - Kursintroduktion till programmering
DA106A - Introduktion till webbutveckling - Responsiv design
HT24 - Introduktion till webbutveckling - Introduktion till CSS
HT24 - Introduktion till webbutveckling - Tabeller och formulär
HT24 - Introduktion till webbutveckling - Kursintroduktion
2024 - Localstorage & cookies Geolocation Mediahantering.pdf
VT24 - jQuery & Ajax - Flerplattformsapplikationer med webbtekniker
VT24 - Responsiv design & Ramverk inom webbutveckling
DA395A - VT24 - JavaScript & Document object model

HT23 - DA354A - Webbprogrammering med Python