Lärare: Pär Eriksson
, Hans Jernberg
Kursen behandlar grundläggande begrepp och tekniker inom webbutveckling. Här ingår front-end-skript för att skapa interaktiva användargränssnitt. Kursen introducerar även back-end-ramverk och databaser, vilket möjliggör skapandet av dynamiska och datadrivna webbapplikationer.
| Fö1 -skapa konto på pythonanywhere.com | Skapa konto för att kunna koda och köra en webbapp gjord i python med Flask microramverk |
| Fö2 - Intro URL mapping/routing | Vad är routing? Hur mappar en url till python funktionaliten? Mappstrukturen, flask_app.py filen, vad är @app.routes för att mappa url till python funktioner |
| Fö3 - Error loggen | Här dyker dina fel upp om appen inte funkar syntaxmässigt. Du kanske fått internal server error eller andra typer av fel. |
| Fö4 - URL mapping/routing | Vad är request-response cykeln?Vad är och hur göra url mappning? Vad är routing? Vad är dynamiska variabler i url:en?Hur göra dynamiskrouting? |
| Fö5 - Templates | Exemplet för bilar där vi har templates i form av html sidor som visar bildata. Hur route:a och rendera man bildata till en html sidor med bla hjälp av render_template funktionen? Hur används Jinja2 syntax för att visa bildata i html sidan, hur används url_for funktionen för att skapa och få en länk |
| Fö6 - Blueprints och template inheritance | Gör om bil exemplet till blueprints som används för att organisera koden, dvs dina routes och templates, i logiska enheter så att alla routes inte ligger i flask_app.py och att alla html sidor inte ligger i dess template mapp. Du slipper att flask_app.py fylls med för många @app.routes och att dess templates mapp fylls med för många html sidor. Visar hur du organisera din blueprint genom att skapa lämplig mappstrukter för den med bla templates mapp och dess html sidor. Samt själva cars_bp.py filen för din blueprint där du skapar upp route:sen och dess mappning till python funktioner. Visar även hur du jobbar med arv för templates. |
| Fö7 - Registerar din blueprint hos flask_app.py | Hur importerar man samt registerar man sin blueprint i flask_app.py? Hur sättar man url:en till sin blueprint i flask_app.py med hjälp av url_prefix? |
| Fö8 - Google books api:et | Exemplet visar en egen blueprint som söker och presenterar data om böcker från Googlebooks api:et. Hur jobbar man med html sökformulär? Hur anropar man tredjeparts api och presenterar dess json data? |
| Fö 9 - Googlebooks visa sökta böcker | Loopar googlebooks bokdata och presentera det i html-tabell. Här skapas även dynamisk routning där en variable i url:en får olika bok id. |
| Fö 10 - Googlebooks visar enskild boks data | Visa mer info om specifik bok. Här användas dynamisk routing med dynamisk id variabel för att hämta data från google baserat på detta bokid. Bokens data presenteras sen i egen html sida. |
| Fö 11 - Sessioner shoppingsite med kundvagn | Vad är och hur skapas sessioner och sessionsvariabler? Går igenom mappstruktur och filer för blueprinten för shoppingvagn_bp. Hur används sessioner för att hantera en kundvagn, dess data och funktionalitet. |
| Fö 12 - Sessioner kundvagnens add | Kundvagnens add_to_cart funktionalitet förklaras. Går även igenom cart.html där både listan av produkter till försäljning och kundvagnen innehåll loopas för att prestenteras i olika html tabeller. Visar hur du skapar länkar i html tabellerna som anropar bl a blueprintens add_to_cart funktionalitet vars kod även förklaras. |
| Fö 13 - Sessioner kundvagnens delete | Kundvagnens delete_from_cart funktionlitet förklaras. Går även igenom cart.html där både listan av produkter till försäljning och kundvagnen innehåll loopas för att prestenteras i olika html tabeller. Visar hur du skapar länkar i html tabellerna som anropar bl a blueprintens delete_from_cart funktionalitet vars kod även förklaras. |
| Youtube - Organisera kod i blueprints |
| Fö1 - Intro formulär | Här lär du dig att skapa en blueprint som hantera formulär för att hyra en bil. Vi använder WTF-form plugin. Vi skapar upp en klass för formuläret och dess GUI komponenter (textfält kanppar checkboxar) så vi kan utifrån den rendera formuläret i html sida. |
| Fö2 - Flaskforms klassen | Visa hur du använder FalskForms klassen för att renderar i html sidan olika gui komponenter som Datefields, SelectField, BooleanField samt Radiofield. |
| Fö3 - Hantera postat formulärsdata | Formulärshantering för att visa postat data. Skapar route med post och mappar den till funktionalitet i blueprinten. Bl a byggs en dict upp med postat formulärs datat. Den dict:en loopas i html sidan för att visa postat data, dvs data om bilhyrningen. Även en flash skapas. |
| Fö4 - Rendera formulärsdata | Presenterar postat bilhyresdata i html tabell. |
| Fö5 - Formulärdata data i json fil | Spara biluthyrning data till json fil. Visar också hur du läser upp data från json filen och presentera alla uthyrningar i en html tabell. |
| Fö6 - Intro rollbaserad inloggning | Visar hur den rollbaserad login funkar för olika användare. De roller som finns är tre: admin, user och superuser. Beroende vilken roll du är inloggade som kan du se och gör olika saker. |
| Fö 7 - Login blueprinten | Grundstrukter över mappar och filer för den enkel rollbaserd inloggning. Visar blueprinten, login_bp.py, template mappen och dess login.html. I flask_app.py hur du importera blueprinten och LoginManager för att kunna initerar hela app för LoginManager. |
| Fö8 - Login hantering med routes och formulär | Genomgång av login_bp.py. Visar hur du skapar upp förutsättningar kunna gör login och logout. Hur du importera från flask_login. Skapar upp User klass, samt route:en för login samt secret route:en som kräver login för att visas. Visar även LoginForm klassen för att skapa upp formuläret i login.html |
| Fö9 - Logout | Visar hur du skapar upp logout funktionaliteten. Forsatt genomgång av login.html sidan. |
| Fö10 - Exemplet login för en blog | Exempel på hur jag använder min login_bp för egen gjord blog. Där bara rollen admin kan ta bort och lägg till poster, där rollen user kan läsa mer om, samt like:a och kommentera poster. Alla kan se posterna utan att vara inloggad. Se nästa vecka videos om hur jag bygger upp bloggens övriga funktionalitet och koppling till databasen. |
| Fö11 - Epost intro | Intro till skicka epost. Går igenom att skapa gratis konto hos https://sendgrid.com/pricing/ för att skicka epost. Visar grundstrukturen för mail_bp blueprintnen samt mailappens funktionalitet och användning. |
| Fö12 - Epost skicka epost med sendgrid | Blueprint kod för att skicka epost med sendgrids api. Visar hur mailet ser ut som kommer till mig. Hur du öppnar konsolen i pythonnanywhere för att installera tredjeparts extensions sendgrid. Går igenom html sidorna samt kod i blueprinten för att skicka epost med sendgrid. |
| Fö1 - Databas Intro till Caradmin app | Går igenom vad användaren kan göra i admin sidan för att hantera bilar på lager. Hur den visuellt ser ut och hur det fungerar med CRUD operationerna mot SQLite databasen. |
| Fö2 - Blueprinten caradmin_bp.py | Mapp- och filstruktur för blueprinten som hantera admin appen för bilar på lager. Genomgång av vilka html filer som finns i templates mappen, vilka python filer som behövs. |
| Fö3 - CarRepository | Forsatt genomgång av Blueprint filen, caradmin_bp.py, dess routing/url-mappning. Visar hur denna blueprint också använder sig av Car klass samt CarRepository klass för crudoperationer som visar alla bilar som finns i databasen. Visar hur man i CarRepository klassen skapar en databas med tabellen, cars, som har kolumner och lite bildata i med hjälp av SQLlite biblioteket. |
| Fö4 - Hämta alla bilar | Genomgång blueprintens route och mapping för get_all_cars. Visa hur blueprinten använder CarRepository klassens get_all() metod som hämtar allt bil data från databasen, skapar en lista med bil objekt i. Den lista med bil objekt skickas till och renderas i allcars.html. |
| Fö5 - Rendera alla bilar | Rendering av alla bilar i allcar.html. Gör igenom hur man loopar bildata för att skapa upp html strukturen som visar bildata samt länkar för att ta bort, editera och visa mer info om bil. |
| Fö6 - Mer info om vald bil | Går igenom funktionalitet för att visa mer info om vald bil. Pratar om hur blueprintens route och url-mapping anropar CarRepository's get_car_by_regnr(regnr) som hämtar från databasen info om vald bil baserat på regnummer.Det bil objekt visas sen i carinfo.html. |
| Fö7 - Lägg till ny bil | Går igenom funktionalitet för att lägga till en ny bil i databasen via formulär. |
| Fö8 - Editera bildata | Går igenom funktionalitet för att via länken editera kom till formulär där data om vald bil att editera finns. När man sen tryucker på udpatar kanner så hämta formulärs data in och skickas via CarRepository till databasen för uppdatering. |
| Fö9 - Tabort vald bil | Går igenom funktionalitet för att ta bort en bil från databasen. Går även igenom enkel inloggning för att kunna ta bort en bil. |
| Fö10 - SQLAlchemy för databashantering | Vi ska göra om vår tidgare caradmin app till att använda SQLAlchemy istället. Kort om vad är SQLAlchmey är. Går igenom grundstrukturen för SQLAlchemy blueprinten. Skillnander mot sqlite CarRepositoriet vi gjort tidigare. |
| Fö11 - SQLAlchemy skapa Databasmodellen | Genomgång av CarRepository nu gjort med sqlalchemy. Visar hur man skapar en data modell, Car, som ärver från Base klassen. Datamodellen används i bakgrunden när engine och session objekt skapar upp databasen. Visar hur du i CarRepository använder Session objekt för att hämta alla bilar och lägg till bilar |
| Fö12 - SQLAlchemy mer info om vald bil | Hur gör man för att visa mer info om vald bil? |
| Fö13 - SQLAlchemy lägg till ny bil | Hur gör man för att lägga till ny bil? |
| Fö14 - SQLAlchmey editera bildata | Hur gör man för att editera och uppdatera bildata? |
| Fö15 - Blogg intro till bloggen | Intro till blog app. Visa hur den funkar för olika inloggade användare. Går igenom grundstrukturenn för blueprintern blog_bp templates mappen och dess html filer samt blog_bp.py samt blogrepository.py. Visar även hur databas modellen Post och Comments som är underlag till tabell och dess relationer mellan Post och Comments skapas upp med hjälp av SQLAlchemy. |
| Fö16 - Visa alla bloggposter | Hur från anrop till av routen /blog/posts i dess funktion använder get_all_posts från repository, för att sedan loopa och rendera alla poster i list_posts.html. Går igenom kod för get_all_posts i repositoriet, hur du då använder sqlalchemy Session objekt för det. |
| Fö17 - Lägg till bloggpost | Endast användare med rollen admin kan lägga till en bloggpost. Kopplar tillbaka till förra veckans video om rollbaserad inloggning. |
| Fö18 - Ta bort bloggpost | Endast användare med rollen admin kan lägga till en bloggpost. Kopplar tillbaka till förra veckans video om rollbaserad inloggning. |
| Fö19 - Kommentera och like:a en bloggpost | Endast inloggade användare kan kommentera och like:a en bloggpost. Kopplar tillbaka till förra veckans video om rollbaserad inloggning. |
| Fö1 - Intro REST api | Vad är REST api? Vilka http verb som finns? Hur du strukturerar ditt REST api med olika uri's (url:er) och hur du routar/urlmappar dessa till python funktioner i ditt Flask REST api. |
| Fö2 - REST api:et names olika GET | Struktur för ditt REST api's blueprint, names. HTTP verbet GET och dess anrop för att hämta alla personers namn och epost, samt en GET för att hämta epost och namn för visa personer tex alla som heter John. Visar också hur du använder Postman. Den måste du ladda ner till din dator. |
| Fö3 - REST api:ets POST | Visar hur man gör POST funktionalitet för att spara ner namn och epost till json fil. |
| Fö4 - REST api:ets DELETE | Visar hur man gör DELETE funktionalitet för att ta bort person baserat på epost, den epost adressen är unik för varje person. |
| Fö5 - REST api:ets PUT | Visar hur man gör PUT funktionalitet för att uppdatera en persons namn baserat på epost adressen som är unik. |
| Fö6 -VUE.js och Axios javscript ramverk | Hur använda Vue och Axios javascript ramverk mot vårt REST api names? Visar vad som lagts till i blueprinten för names för att kunna skapa en html/javascript klient som använder dessa två javascript ramverk mot REST api:et. Bla i template mappen har en html sidan med vue.js axiod kod. Samt en skapad route som renderar denna html sida. Förklarar kort vad Vue är, hur dess special syntax ser ut och hur du använder Vue js.kod och axios.js kod för att gör http anrop mot REST api:et i en html sida. |
| Fö7 - Grundstruktur för alla vue.js appar | Du kan använda denna grundstruktur för alla din vue appar. |
| Fö8 - Visar allas namn och epost | Vue appens grundstruktur, visar alla names från REST api:et names. Går igenom VUE names appens grundstruktur så som data, mounted, methods. Hur man med hjälp av Axios gör http anrop till REST api för att hämta alla names för att presenter dem i en html tabell. Går igenom vue syntax som v-for, @click och hur du mappar @click mot metod i din vue app. |
| Fö9 - Lägg till namn och epost | Lägg till namn och epost. Hur axios post funkar, hur du kopplar @click på add-knappen i layouten för att anropa metod/funktion som lägger till data, Hur vue's v-model används i formulärets textfält för att koppla till data modell/variabler i Vue's data. Samt vad är och hur anvädns @submit.prevent i formuläret. |
| Fö10 -Ta bort namn och epost | Hur axios delete funkar, hur du kopplar @click på delete-knappen i layouten för att anropa metod/funktion som tar bort data. |
| Fö11 - Editera och Uppdatera namn | Editera och Uppdatera baserat på epost. Visar hur axios put funkar samt hur du kopplar @click på Edit-knappen och Update-knappar i layouten för att visa och fylla ett formulär med data för den person som ska uppdateras. När vi sen trycker på uppdatera så anropas vue metod/funktion som i sin tur anropar rest api:et uppdaterar data. Visa hur man gömmer och visar updatera formuläret. |
| Fö12 - Vue appen som en komponent | Gör om Vue app till att använda en komponent i stället. Visar hur en kompenent byggs upp och registrera hos vue appen samt hur den lägger in i html sidans div tagg. |
| Fö13 - Vue appen i egen js fil | Flytta ut NameListCrudComponent i egen js fil. Visar också hur du importera den till din html sida via script taggen. Visar hur du i din blueprint skapar en static mapp där du lägger egen gjord .js fil som ska importeras. Samt hur du i din blueprint talar om var static mappen finns så att den hittar din .js filer. Visar hur du med hjälp av flask url_for i html sida för att importer din .js fil. |
| Youtube - REST flask api | |
| Youtube - REST GET | |
| Youtube - REST POST | |
| Youtube - REST UPDATE/PUT | |
| Youtube - REST DELETE |