HT21 - DA354 - Webbapplikationer

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

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

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. Build our web site, you will
    

    View Slide

15. View Slide

16. View Slide

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

    View Slide

18. Vad vi ska bygga
    

    View Slide

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

    View Slide

20. Webbserver?
    Important, this is!
    

    View Slide

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

    View Slide

22. ...datorprogram som
    tillhandahåller webbsidor ...
    

    View Slide

23. View Slide

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

    View Slide

25. Internet
    Klient
    Server
    Klient
    

    View Slide

26. Internet
    Klient
    Server
    Klient
    

    View Slide

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

    View Slide

28. https://student.mau.se/mina-studier/
    Protokoll
    Domän / IP-adress
    Resurs
    Grundläggande URL
    

    View Slide

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

    View Slide

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

    View Slide

31. No place like 127.0.0.1, there is.
    

    View Slide

32. python -3 -m http.server 8000
    Starta en webbserver från en specifik mapp
    

    View Slide

33. View Slide

34. 127.0.0.1 = Den här datorn
    

    View Slide

35. View Slide

36. Demo – Lokal webbserver
    

    View Slide

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

    View Slide

38. View Slide

39. View Slide

40. View Slide

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

    View Slide

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

    View Slide

43. View Slide

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

    View Slide

45. To be efficent, a tool you need.
    

    View Slide

46. https://www.mindinventory.com/blog/best-python-web-frameworks-2019/
    

    View Slide

47. “I’m just a simple man trying to make
    my way in the universe.”
    - Jango Fett
    

    View Slide

48. Koncept 1
    - Routes
    

    View Slide

49. https://student.mau.se/mina-studier/
    Protokoll
    Domän / IP-adress
    Resurs
    Grundläggande URL
    

    View Slide

50. 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()
    

    View Slide

51. Kom igång med routes
    

    View Slide

52. View Slide

53. Hello
    

    View Slide

54. View Slide

55. 1. Första grunderna i koden
    

    View Slide

56. View Slide

57. View Slide

58. 2. Förstå routes och argument
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. 3. Förstå parametrar (& värde)
    

    View Slide

64. View Slide

65. Ex. 1 Ex. 2
    

    View Slide

66. Namn på parameter till
    template
    

    View Slide

67. - En total översikt
    Riskerar att bli lite förvirrande´…
    

    View Slide

68. View Slide

69. View Slide

70. View Slide

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

    View Slide

72. http://127.0.0.1/
    http://127.0.0.1/contact
    http://127.0.0.1/about
    http://127.0.0.1/xxxxxxxxx
    

    View Slide

73. DEMO - Routes
    

    View Slide

74. Koncept 2
    - Templates
    

    View Slide

75. Templates – Mallar i HTML
    Join the dark side, we have the prettiest web sites!
    

    View Slide

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

    View Slide

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

    View Slide

78. Hur ser detta ut i bottle?
    

    View Slide

79. Demo - Templates
    

    View Slide

80. View Slide

81. JSON
    JavaScript Object Notation
    json.dumps() => omvandla datatyper till sträng
    json.loads() => omvändla stäng till datatyp
    

    View Slide

82. ”[
    {
    ’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
    

    View Slide

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

    View Slide

84. View Slide

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

    View Slide

86. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

90. View Slide

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

    View Slide

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

    View Slide

93. Nu bygger vi! ;)
    

    View Slide

94. 2. Fixa gästboken
    

    View Slide

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

    View Slide

96. Frågor?
    

    View Slide

97. View Slide