Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HT21 - DA354 - Webbapplikationer

1e708b2afb8622d5c5f070a94a3425a9?s=47 Anton Tibblin
December 14, 2021

HT21 - DA354 - Webbapplikationer

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

December 14, 2021
Tweet

More Decks by Anton Tibblin

Other Decks in Education

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. Episode X: The Python Way Of The Force May the

    web be with you
  10. None
  11. None
  12. None
  13. None
  14. Build our web site, you will

  15. None
  16. None
  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
  18. Vad vi ska bygga

  19. “You can’t stop the change, any more than you can

    stop the suns from setting.” - Shmi Skywalker
  20. Webbserver? Important, this is!

  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.
  22. ...datorprogram som tillhandahåller webbsidor ...

  23. None
  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.
  25. Internet Klient Server Klient

  26. Internet Klient Server Klient

  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

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

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

  31. No place like 127.0.0.1, there is.

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

    specifik mapp
  33. None
  34. 127.0.0.1 = Den här datorn

  35. None
  36. Demo – Lokal webbserver

  37. Men – hur mycket Python var detta egentligen? Feel the

    power of the server side!
  38. None
  39. None
  40. None
  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.
  42. “Oh, my dear friend. How I’ve missed you.” - C-3PO

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

  45. To be efficent, a tool you need.

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

  47. “I’m just a simple man trying to make my way

    in the universe.” - Jango Fett
  48. Koncept 1 - Routes

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

  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()
  51. Kom igång med routes

  52. None
  53. Hello <name>

  54. None
  55. 1. Första grunderna i koden

  56. None
  57. None
  58. 2. Förstå routes och argument

  59. None
  60. None
  61. None
  62. None
  63. 3. Förstå parametrar (& värde)

  64. None
  65. Ex. 1 Ex. 2

  66. Namn på parameter till template

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

  68. None
  69. None
  70. None
  71. Att använda sig utav flera routes...

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

  73. DEMO - Routes

  74. Koncept 2 - Templates

  75. Templates – Mallar i HTML Join the dark side, we

    have the prettiest web sites!
  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
  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”
  78. Hur ser detta ut i bottle?

  79. Demo - Templates

  80. None
  81. JSON JavaScript Object Notation json.dumps() => omvandla datatyper till sträng

    json.loads() => omvändla stäng till datatyp
  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
  83. Nu till vårt projekt “There’s always a bigger fish.” -

    Qui-Gon Jinn
  84. None
  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
  86. None
  87. Testa så att allt fungerar Let the battle begin

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

  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)
  90. None
  91. Flödesschema Läs in textfilens innehåll Tolka JSON-data till ett lexikon

    { "empire": 0, "rebels": 0 } 1 2 3
  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
  93. Nu bygger vi! ;)

  94. 2. Fixa gästboken

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

  96. Frågor?

  97. None