25
Dag 4: Django

Tjejer Kodar 100 - Dag 4 - Django

Embed Size (px)

Citation preview

Page 1: Tjejer Kodar 100 - Dag 4 - Django

Dag 4: Django

Page 2: Tjejer Kodar 100 - Dag 4 - Django

Läxförhör Python• Variabler

• Listor

• Dictionaries

• Klasser

• Funktioner

• Metoder

• Loopar

• If-satser

Page 3: Tjejer Kodar 100 - Dag 4 - Django

Imorgon

• Ikväll: Förbered era frågor!

• 16.00 - Deadline - Emil sammanfattar

• 16.30 - Samling med de andra, grupper om 10

Page 4: Tjejer Kodar 100 - Dag 4 - Django

Hur fungerar webben?

Webbläsaren Webbservernhttp://www… HTTP

HTMLCSS & img

Django

Page 5: Tjejer Kodar 100 - Dag 4 - Django

Django• Finns på Github:

https://github.com/django/django/

• 23172 commits av 1250 personer

• Ett webbramverk - en samling pythonkod för att bygga en webbplats

• Skapat av Simon, Jacob och Adrian, tre utvecklare från en lokaltidning i Lawrence, Kansas

Page 6: Tjejer Kodar 100 - Dag 4 - Django

Grundkoncept• Projekt

• URL:er

• Views

• Templates

• Modeller

Page 7: Tjejer Kodar 100 - Dag 4 - Django

Projektet

.get()

templates

models.py

<html>

views.pyurls.py

/quiz/1 def quiz()

Page 8: Tjejer Kodar 100 - Dag 4 - Django

Projektet• pip install django

• django-admin startproject quizsite .

• python3 manage.py migrate

• python3 manage.py runserver

• Surfa till: http://127.0.0.1:8000

Installera

Skapa projekt

Skapa databas

Starta webbserver

Surfa till din sajt!

Page 9: Tjejer Kodar 100 - Dag 4 - Django
Page 10: Tjejer Kodar 100 - Dag 4 - Django

URL:er• http://something.herokuapp.com• / => Startsida• /quiz/1/ => Quiz 1

/quiz/2/ => Quiz 2/quiz/3/ => Quiz 3

• /quiz/1/question/1/ => Quiz 1 - Question 1/quiz/1/question/2/ => Quiz 1 - Question 2/quiz/1/question/3/ => Quiz 1 - Question 3

• /quiz/1/completed/ => Quiz 1 - Results

Page 11: Tjejer Kodar 100 - Dag 4 - Django

Mönster för URL:er

• ^$

• ^quiz/[0-9]+/$

• ^quiz/[0-9]+/question/[0-9]+/$

• ^quiz/[0-9]+/completed/$

Page 12: Tjejer Kodar 100 - Dag 4 - Django

urls.py

urlpatterns = [url(r"^$", views.startpage),url(r"^quiz/[0-9]+/$", views.quiz),url(r"^quiz/[0-9]+/question/[0-9]+/$", views.question),url(r"^quiz/[0-9]+/completed/$", views.completed),

]

Page 13: Tjejer Kodar 100 - Dag 4 - Django

views.pyfrom django.http import HttpResponse

def startpage(request): return HttpResponse("Du är just nu på startsidan")

def quiz(request): return HttpResponse("Du är just nu på quizsidan")

def question(request): return HttpResponse("Du är just nu på frågesidan")

def completed(request): return HttpResponse("Du är just nu på klarsidan")

Page 14: Tjejer Kodar 100 - Dag 4 - Django

http://example.com/quiz/1/

quiz/1/

url(r”^quiz/[0-9]+/$", views.quiz)

def quiz(request): return HttpResponse("Du är just nu på quizsidan")

Du är just nu på quizsidan

Page 15: Tjejer Kodar 100 - Dag 4 - Django

def quiz(request): return HttpResponse("Du är just nu på quizsidan")

Vilken specifik quiz?

url(r"^quiz/[0-9]+/$", views.quiz)url(r"^quiz/([0-9]+)/$", views.quiz)

def quiz(request, quiz_number): return HttpResponse("Du är på quiz " + quiz_number)

Page 16: Tjejer Kodar 100 - Dag 4 - Django

http://example.com/quiz/2/

quiz/2/

url(r”^quiz/([0-9]+)/$”, views.quiz)

def quiz(request, quiz_number): return HttpResponse("Du är på quiz " + quiz_number)

Du är just nu på quiz 2

Page 17: Tjejer Kodar 100 - Dag 4 - Django

Templates

• Vi vill ju skicka tillbaka vår HTML, inte bara text…

• return HttpResponse(”text <b>här</b>”) ???

• Bättre: Templates!

Page 18: Tjejer Kodar 100 - Dag 4 - Django

Template

<!doctype html><html><body>Välkommen till quiz {{ quiz_number }}</body></html>

Page 19: Tjejer Kodar 100 - Dag 4 - Django

<!doctype html><html><body>Välkommen till quiz {{ quiz_number }}</body></html>

{"quiz_number": "1"} <- context+

<!doctype html><html><body>Välkommen till quiz 1</body></html>

=

Page 20: Tjejer Kodar 100 - Dag 4 - Django

Templates

return HttpResponse("text <b>här</b>")

def quiz(request, quiz_number): context = {"quiz_number": 1} return render(request, "quiz/quiz.html", context)

Page 21: Tjejer Kodar 100 - Dag 4 - Django

Testdataquizzes = [ { "quiz_number": 1, "name": "Klassiska böcker", "description": "Hur bra kan du dina klassiker?" }, { "quiz_number": 2, "name": "Största fotbollslagen", "description": "Kan du dina lag?" }, { "quiz_number": 3, "name": "Världens mest kända hackare", "description": "Hackerhistoria är viktigt, kan du den?" },]

Page 22: Tjejer Kodar 100 - Dag 4 - Django

Skicka med mer?quizzes = [ { "quiz_number": 1, "name": "Klassiska böcker", "description": "Hur bra kan du dina klassiker?" }, …]

def quiz(request, quiz_number): context = {"quiz": quizzes[quiz_number - 1]} return render(request, "quiz/quiz.html", context)

Välkommen till {{ quiz.name }}-quizetVälkommen till Klassiska böcker-quizet

Page 23: Tjejer Kodar 100 - Dag 4 - Django

Lista quizzes på startsidan?

def startpage(request): context = {"quizzes": quizzes} return render(request, "quiz/startpage.html", context)

{% for quiz in quizzes %} <p>{{ quiz.name }}</p>{% endfor %}

quizzes = { { "quiz_number": 1, "name": "Klassiska böcker", "description": "Hur bra kan du dina klassiker?" }, …}

Page 24: Tjejer Kodar 100 - Dag 4 - Django

Direktlänk till quiz?{% for quiz_slug, quiz in quizzes.items %} <p>{{ quiz.name }}</p>{% endfor %}

{% for quiz_slug, quiz in quizzes.items %} <p><a href="?">{{ quiz.name }}</a></p>{% endfor %}

{% for quiz in quizzes %} <p><a href="{% url "quiz_page" quiz.quiz_number %}”> {{ quiz.name }} </a></p>{% endfor %}

url(r"^quiz/([0-9]+)/$", views.quiz, name="quiz_page"),

<p><a href="/quiz/1/"> Klassiska böcker</a></p>

Page 25: Tjejer Kodar 100 - Dag 4 - Django

Projektet

.get()

templates

models.py

<html>

views.pyurls.py

/quiz/1 def quiz()