HT19 - DA354A - Webbprogrammering med bottle

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

15. This is a new day,
a new beginning

17. Build our web site, you will

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

21. Vad vi ska bygga

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

23. Webbserver?
Important, this is!

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

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

26. Internet
Klient
Klient
Server

27. No place like 127.0.0.1, there is.

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

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

35. Great, kid.
Don’t get cocky

36. 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!

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

39. Låt oss bygga allt själva, vi kan ju
programmera nu! 

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

42. Vad behöver man kunna för att
bygga en webbtjäst?
Hantera URL
Hantera
formulär
Hantera
webbside-
mallar

43. To be efficent, a tool you need.

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

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

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

47. Koncept 1
- Routes

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

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

50. Hello <name>

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

53. Demo – olika routes

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

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

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

58. Hur ser detta ut i bottle?

59. Demo - templates

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

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

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

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

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

68. Python datastruktur till text (JSON.dumps() )
Python - Datastruktur Sträng

69. Text till Python datastruktur (JSON.loads() )
Python - Datastruktur Sträng

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

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

72. Nu bygger vi! ;)

73. 2. Fixa gästboken

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

76. Kommer ni bli
webbprogrammerare?

77. Frågor?