Vad ska du lära dig i denna lektion?
Du kommer att få lära dig hur du kan skapa din alldeles egna hemsida i Python, med det exakta innehållet som du vill ha. Du kommer att använda dig av den externa modulen Flask. Detta innebär att du måste installera "Flask" innan du börjar programmera. Modulen borde dyka upp som "flask" (med små bokstäver) när du ska installera den.
Kom igång med att få hemsidan att köra:
För att initiera Flask krävs det endast några få rader kod. Först så ska du importera funktionen "Flask" från själva modulen med denna kod:
Denna kod importerar funktionen "Flask" från modulen "flask"
Enkelt, eller hur? Nu måste vi skapa en variabel som vi använder när vi programmerar hemsidan. Vi kommer att kalal den för "app", vilket är vanligt. Du skriver sånär för att initiera Flask i variabeln "app":
Denna kod initierar "Flask" i variabeln "app":
Byt inte ut "__name__" mot något annat! Nu så ska vi bara starta vår hemsida, vilket vi gör med denna kod:
Denna kod startar din hemsida med hjälp av "Flask":
Detta talar helt enkelt om att hemsidan ska startas. "debug=True" är valfritt att skriva innanför parenteserna (de kan vara tomma eller innehålla andra saker som fungerar med Flask om du vill det), men "debug=True" gör så att du enkelt kan se att din app funkar eftersom att varje gång någon besöker sidan så skrivs det ut där du vanligtvis ser vad som händer när du kör din Python - kod.
När du kör koden vore du se detta:
Nu så kan du bara klicka på den blåa länken som du hittar efter "Running on: ". Länken vore öppnas i en webbläsare (om inte, kopiera bara länken och klistra sedan in den i adressfältet). Du vore nu se detta:
Detta beror på att du inte har valt vad som ska hända när en användare når hemsidan. Du har bara initierat Flask. För att skapa en sida på hemsidan så behöver du följa denna mall:
Skapa sidor på din hemsida:
Denna kod skapar en sida på din hemsida:
@app.route() talar om vad som händer när någon besöker hemsidan. Byt ut "(länk)" mot t.ex. "/" för sidan som användaren först ser när den skriver in adressen till din hemsida eller "/exempelsida" för att ange innehållet på en sida som du hittar genom att lägga till "/exempelsida" efter länken till din hemsida (t.ex. "127.0.0.1:5000/exempelsida"). Det som ska hända när användaren besöker varje sida skriver du innuti en def()-loop. Funktionernas namn spelar oftast ingen roll, så länge du inte döper funktionen till någon av Flasks inbyggda funktioner eller en funktions namn återanvänds vid flera sidor. När all kod har körts så skrivs en text ut med "return", som fungerar ungefär som print() i detta fall, kan man säga.
Och nu kan du skapa enkla hemsidor! Nu kommer du att få lära dig hur du kan visa en så kallad HTML-fil som sidinnehåll, använda varibaler i hemsideslänkar, skicka filer från din dator och mycket mer!
(för att se resultatet av hemsidan som du precis har skapat, starta om ditt program och gå in på länken i din webbläsare.)
Använd variabler i hemsideslänkar:
Det är enkelt att använda variabler i dina hemsideslänkar. Varje gång du vill ha en variabel skriver du <string:variabelnamn> istället för ett sidnamn och byter ut "variabelnamn" mot ett valfritt namn på en variabel. Detta kan du göra hur många gånger du vill. Här är ett exempel på en länk som innehåller två variabler: 127.0.0.1:5000/variabler/<string:variabel1>/<string:variabel2>.
Om du istället skulle vilja ha siffror i hemsideslänkar kan du bara konvertera variabeln till en siffra med hjälp int() senare i programmet.
Nästa steg är att inkludera variabelnamnen i def() loopen genom att skriva alla variabler i hemsideslänken (med kommatecken emellan) innanför parenteserna, på detta sätt:
Om du istället skulle vilja ha siffror i hemsideslänkar kan du bara konvertera variabeln till en siffra med hjälp int() senare i programmet.
Nästa steg är att inkludera variabelnamnen i def() loopen genom att skriva alla variabler i hemsideslänken (med kommatecken emellan) innanför parenteserna, på detta sätt:
Denna kod använder sig av variabler i hemsideslänkar:
Nu vet du hur man använder sig av variabler i hemsideslänkar! Du kan på detta sätt göra ett enkelt program som t.ex. hälsar på en person genom att låta den skriva in sitt namn:
Denna kod låter användaren skriva in sitt namn och få en personlig hälsning med hjälp av Flask och variabler:
Och nu vet du hur man kan använda variabler i hemsideslänkar! Nu ska vi kolla in hur du kan använda så kallade "HTML-filer" som sidinnehåll!
Använd "HTML-filer" som hemsidesinnehåll:
Nu ska vi lära oss om så kallade "HTML-filer" som är ett sätt att skapa en snygg hemsida. Först måste vi lära oss lite om HTML och vad det oftast används till.
Vad är HTML?
Man skulle kunna säga att HTML är ett slags programmeringsspråk. Det används på många hemsidor (inklusive KlassKlur) för att få hemsidan att se ut som man vill. HTML ger ett grundläggande utseende och det är det som används för att sätta ihop hela sidan. Man kan sedan använda sig av två andra programmeringsspråk - CSS och Javascript för att styla sidan nästan exakt som man vill (med CSS) och skapa egna funktioner och program m.m (med Javascript). Men lugn - vi ska inte ta oss tid till att lära oss om CSS och Javascript. Vi ska bara lära oss några grundkoder i HTML för att skapa en snygg hemsida.
Hur fungerar HTML?
HTML använder sig av så kallade "taggar". En tagg kan se ut så här: <p></p>. Varje tagg måste ha ett start och ett slut. En HTML-tagg inleds med en "<"-symbol. Efter det kommer taggens namn t.ex. "p", "h1" eller "a". Detta avslutas med ">" och sedan kommer innehållet i HTML-taggen (oftast text). En HTML-tagg avsultas på samma sätt som den inleds, men du lägger till ett "/" före namnet på HTML-taggen.
Vad är HTML?
Man skulle kunna säga att HTML är ett slags programmeringsspråk. Det används på många hemsidor (inklusive KlassKlur) för att få hemsidan att se ut som man vill. HTML ger ett grundläggande utseende och det är det som används för att sätta ihop hela sidan. Man kan sedan använda sig av två andra programmeringsspråk - CSS och Javascript för att styla sidan nästan exakt som man vill (med CSS) och skapa egna funktioner och program m.m (med Javascript). Men lugn - vi ska inte ta oss tid till att lära oss om CSS och Javascript. Vi ska bara lära oss några grundkoder i HTML för att skapa en snygg hemsida.
Hur fungerar HTML?
HTML använder sig av så kallade "taggar". En tagg kan se ut så här: <p></p>. Varje tagg måste ha ett start och ett slut. En HTML-tagg inleds med en "<"-symbol. Efter det kommer taggens namn t.ex. "p", "h1" eller "a". Detta avslutas med ">" och sedan kommer innehållet i HTML-taggen (oftast text). En HTML-tagg avsultas på samma sätt som den inleds, men du lägger till ett "/" före namnet på HTML-taggen.
Först så behöver vi skapa en ny HTML-fil. Skapa en ny fil i PyCharm, men välj "HTML-file" istället, så här:
Ett pop-up-fönster kommer nu att visas. Välj ett namn för HTML-filen och se till att "HTML 5 file" är det valda alternativet:
Tryck sedan på "Ok". Nu kan du börja med att skriva innehållet i din HTML-fil!
Nu ska vi titta vidare på hur du kan bygga upp din hemsida med hjälp av HTML. PyCharm kommer att skapa en bra mall att lägga till taggar på. Den har två delar, <head> och <body>. Koden innanför <head> syns ej på sidan, utan kan innehålla bland annat bakgrundsprocesser och annat. <body> kommer vi att placera kod innanför. Det du placerar där syns på hemsidan för besökaren. Här är en bild för att lättare förklara <head> och <body> med hjälp av PyCharms HTML-mall:
Nu ska vi ta en titt på några olika HTML-taggar som du kan använda innanför <body>. Om du redan nu vill ändra titeln på sidan så kan du byta ut "Title" mot ett passande sidnamn (t.ex. "Startsida").
Här är en lista med HTML-taggar som du kan prova att använda dig av:
<h1>Text</h1>, <h2>Text</h2>, <h3>Text</h3>, <h4>Text</h4>, <h5>Text</h5> och <h6>Text</h6> - Byt ut "Text" mot valfri text för en titel att ha på din hemsida. Numret efter "h" beror på vilken storlek på titeln som du vill ha. 1 är den största storleken och 6 är den minsta av de titlarna som nämnts ovan.
<img src="Bildlänk här, t.ex. https://res.cloudinary.com/klassklur/image/upload/v1531407938/klassklur/programmering/Skapa%20en%20hemsida%20med%20Python/Exempelbild.png"> - Byt ut texten ovan mot en länk till en bild som du vill använda. Vill du få en länk till en bild enkelt kan du använda dig av denna hemsida. Notera att <img>-taggar inte ska avslutas som de flesta andra HTML-taggar.
<font face="Typsnitt" size="20" color="Black">Taggar</font> - Alla texttaggar som är där texten "Taggar " är i exemplet får ett valfritt typsnitt (t.ex. "Arial"), texttstorleken 20 och färgen "Black" (svart).
<p>Text</p> - En enkel texttagg . Byt ut "text "mot valfri text.
Du kan också använda dig av HTML-kodsredigerare online som t.ex. https://html-online.com/editor/. När du har din kod redo, klistra in den i ditt HTML-dokument. Nu ska vi skapa en sida som visar HTML-filen.
Det finns en speciell funktion som heter "render_template" som vi också måste importera. Ändra "import" raden i din fil till detta:
Här är en lista med HTML-taggar som du kan prova att använda dig av:
<h1>Text</h1>, <h2>Text</h2>, <h3>Text</h3>, <h4>Text</h4>, <h5>Text</h5> och <h6>Text</h6> - Byt ut "Text" mot valfri text för en titel att ha på din hemsida. Numret efter "h" beror på vilken storlek på titeln som du vill ha. 1 är den största storleken och 6 är den minsta av de titlarna som nämnts ovan.
<img src="Bildlänk här, t.ex. https://res.cloudinary.com/klassklur/image/upload/v1531407938/klassklur/programmering/Skapa%20en%20hemsida%20med%20Python/Exempelbild.png"> - Byt ut texten ovan mot en länk till en bild som du vill använda. Vill du få en länk till en bild enkelt kan du använda dig av denna hemsida. Notera att <img>-taggar inte ska avslutas som de flesta andra HTML-taggar.
<font face="Typsnitt" size="20" color="Black">Taggar</font> - Alla texttaggar som är där texten "Taggar " är i exemplet får ett valfritt typsnitt (t.ex. "Arial"), texttstorleken 20 och färgen "Black" (svart).
<p>Text</p> - En enkel texttagg . Byt ut "text "mot valfri text.
Du kan också använda dig av HTML-kodsredigerare online som t.ex. https://html-online.com/editor/. När du har din kod redo, klistra in den i ditt HTML-dokument. Nu ska vi skapa en sida som visar HTML-filen.
Det finns en speciell funktion som heter "render_template" som vi också måste importera. Ändra "import" raden i din fil till detta:
Den uppdaterade raden ska se ut så här:
Detta berättar för Python att både Flask och render_template ska importeras. Istället för att använda oss av en textsträng i return så ska vi använda oss av render_template istället. Skapa först en ny sida och skriv en return som ser ut så här:
Denna kod visar filen "filnamn.html" som sidinnehåll:
Byt bara ut "filnamn.html" mot namnet på din HTML-fil så är det klart!
Nu så vet du hur du kan skapa din egen hemsida med hjälp av Python! Uppgiften till denna lektion är att skapa din egen hemsida, med precis vad du vill som innehåll!