In Swedish

4. kvar till episode IX
9 december 2019

5. Exakt år kvar til

9. Episode X: The Python Way Of
The Force
May the web be with you

12. Build our web site, you will

15. 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

16. Vad vi ska bygga

17. “You can’t stop the change, any
more than you can stop the suns
from setting.”
- Shmi Skywalker

18. Webbserver?
Important, this is!

19. 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.
I vårt fall ett datorprogram – skrivet i Python

20. 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.

21. Internet
Klient
Klient
Server

22. No place like 127.0.0.1, there is.

23. py -3 -m http.server
• Att starta en webbserver från en specifik mapp genom
Python (från konsolen/terminalen)

26. Men – hur mycket Python var detta
egentligen?
Feel the power of the server side!

30. Vad kan vi hittills?
• Skapa webbsidor
• HTML
• CSS
• (JavaScript)
• Programmera i Python
• Variabler
• Funktioner
• Läsa/skriva till/från filer
• JSON
• M.m.
• Vad behöver vi lära oss? => Bygga en webbtjänst!

32. “Oh, my dear friend.
How I’ve missed you.”
- C-3PO

33. Behöver vi bygga allt själva?
A simpler way, there is.

34. To be efficent, a tool you need.

35. Mikroramverk
• En samling funktioner för att bygga webbplatser, med fokus på
• Snabbt
• Smidigt
• Resurssnålt
• Exempel på mikroramverk
• Bottle (Python)
• Flask (Python)
• Slim (PHP)
• Silex (PHP)
• Camping (Ruby)
• Sinatra (Ruby)

36. Bottle – Ett mikroramverk i Python
• Bottle har många inbyggda funktioner, men fokuserar på:
• Routing Mappa URL:r mot funktioner
• Templates Skapa mallar (HTML) för att presentera innehåll
• Utilities Tillgång till data, ladda upp filer, cookies, HTTP-möjligheter,
m.m.
• Server Inklulderar en inbyggd HTTP-server
• Bottle är endast en enda fil
• Bottle använder bara standard-biblioteket för Python
• Man installera bottle genom PIP, easy_install, eller laddar hem
py-filen.

37. Hur fungerar Bottle?
Jämfört med en ”vanlig” webbsida

38. Koncept 1
- Routes

39. 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
Starwarsvote.com/home
Thedarkside.com/home

40. Att komma igång med bottle!
Jämfört med en ”vanlig” webbsida
“I’m just a simple man trying to
make my way in the universe.”
- Jango Fett

41. Hello <name>

42. Att använda sig
utav flera routes...

44. Demo – olika routes

46. Templates - Mallar för vår information
Join the dark side, we have the prettiest web sites!

47. 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

48. Bottle – Templates och statiska filer
• Alla templates ska:
• Ligga i mappen ”view”
• Ha filändelsen *.tpl eller *.html
• Statiska filer (bilder, css, js, etc.) ska:
• Ligga i mappen ”static”

49. Hur ser detta ut i bottle?

50. Demo - templates

51. Nu till vårt projekt
“There’s always a bigger fish.”
- Qui-Gon Jinn

53. 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

55. Testa så att allt fungerar
Let the battle begin

56. 1. Fixa röstningen
2. Fixa gästboken

57. 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)

59. Flödesschema
Läs in textfilens
innehåll
Tolka JSON-data
till ett lexikon
{
"empire": 0,
"rebels": 0
}

60. 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

61. Nu bygger vi! ;)

62. 2. Fixa gästboken

63. “Power! Unlimited power!”
- Darth Sidious

64. Frågor?