Django#101 – All You Need to Know for Getting Started

DJANGO#101WHAT YOU NEED TO KNOW FOR GETTING STARTED
10th July 2018
@Code Mania 111, Bangkok, Thailand

PANKAMOL SRIKAEW
Aime
AimeTPGM
AimeTPGM.github.io
aim.ske09@gmail.com
fb.com/aimetpgm
FullStack Developer@Allianz Technology Thailand

source code for this slide
https://github.com/AimeTPGM/wanneeginnai
https://github.com/AimeTPGM/candyfactory
source code for Live Demo
https://aimetpgm.pythonanywhere.com
Live Demo
slideshare
https://www.slideshare.net/PankamolSrikaew
or search for Django#101

INITIALIZE PROJECTDJANGO#101
VIRTUAL ENVIRONMENT
~$ cd path/to/your/folder
folder User$ python3 -m venv myvenv
folder User$ source myvenv/bin/activate
(myvenv) folder User$
INSTALLING DJANGO
(myvenv) folder User$ pip install --upgrade pip
(myvenv) folder User$ pip install django~=1.11.0
Collecting django~=1.11.0 
Downloading Django-1.11.3-py2.py3-none-any.whl (6.8MB) 
Installing collected packages: django 
Successfully installed django-1.11.3
STARTING PROJECT
(myvenv) folder User$ django-admin startproject mysite .
(myvenv) folder User$ python manage.py runserver

INITIALIZE PROJECTDJANGO#101
RUNNING SERVER
(myvenv) folder User$ python manage.py runserver
Performing system checks...
System check identified no issues (0 silenced).
June 01, 2018 - 10:07:22
Django version 1.11.13, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

PROJECT STRUCTUREDJANGO#101
yourproject
mysite
manage.py
__init__.py
settings.py
urls.py
wsgi.py

...
DEBUG = True
# use [‘127.0.0.1’, ‘.pythonanywhere.com’] for deployment
ALLOWED_HOST = []
...
INSTALLED_APPS = […]
...
LANGUAGE_CODE = ‘en-us’
TIME_ZONE = ‘UTC’
...
STATIC_URL = ‘/static/‘
STATIC_ROOT = os.path.join(BASE_DIR, ‘static’)
mystite/settings.py

...
DEBUG = True
# use [‘127.0.0.1’, ‘.pythonanywhere.com’] for deployment
ALLOWED_HOST = []
...
INSTALLED_APPS = […, ‘webapp’]
...
LANGUAGE_CODE = ‘en-us’
TIME_ZONE = ‘UTC’
...
STATIC_URL = ‘/static/‘
STATIC_ROOT = os.path.join(BASE_DIR, ‘static’)
mystite/settings.py
(myvenv) folder User$ python manage.py startapp webapp

yourproject
mysite
manage.py
__init__.py
settings.py
urls.py
wsgi.py
webapp
__init__.py
admin.py
apps.py
model.py
views.py
tests.py

DATABASE, MODEL  
AND ADMINDJANGO#101

Django#101 – All You Need to Know for Getting Started

THE BASIS – ADDING NEW MODELDJANGO#101
from django.db import models 
from django.utils import timezone
class Candy(models.Model): 
flavor = models.CharField(max_length=100) 
description = models.TextField() 
manufacturedDate = models.DateTimeField(‘MFD', default=timezone.now()) 
bestBefore = models.DateTimeField('BB', blank=True, null=True)
def produce(self): 
self.bestBefore = timezone.now() + timezone.timedelta(days=30)
def __str__(self): 
return self.flavor
webapp/models.py

return self.flavor
from django.contrib import admin 
from .models import Candy
admin.site.register(Candy)
webapp/admin.py
webapp/models.py

return self.flavor
from django.contrib import admin 
admin.site.register(Candy)
(myvenv) folder User$ python manage.py makemigrations 
(myvenv) folder User$ python manage.py migrate
webapp/admin.py
webapp/models.py

THE BASIS – DJANGO ADMINDJANGO#101
(myvenv) folder User$ python manage.py createsuperuser

(myvenv) folder User$ python manage.py createsuperuser 
Username: admin 
Email address:  
Password: ThisIsPassword123 
Password (again): ThisIsPassword123 
Superuser created successfully.

(myvenv) folder User$ python manage.py createsuperuser 
Username: admin 
Email address:  
Password: ThisIsPassword123 
Password (again): ThisIsPassword123 
Superuser created successfully.
http://127.0.0.1:8000/admin

http://127.0.0.1:8000/admin

http://127.0.0.1:8000/admin/webapp/candy/add/

http://127.0.0.1:8000/admin/webapp/candy/

THE BASIS – ROUTES AND VIEWSDJANGO#101
http://127.0.0.1:8000/list/
http://127.0.0.1:8000/list/1
http://127.0.0.1:8000/list/1/edit
http://127.0.0.1:8000/list/1/delete

mysite/urls.py
webapp/urls.py
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'', include(‘webapp.urls')),
]
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.mainpage, name=‘main_page’),
]
ROUTES

mysite/urls.py
webapp/urls.py
urlpatterns = [
]
from . import views
urlpatterns = [
]
REGEX CHEATSHEET
^ the beginning
$ the end
d number
+ should have the previous 
char at least one
ROUTES

mysite/urls.py
webapp/urls.py
urlpatterns = [
]
from . import views
urlpatterns = [
]
REGEX CHEATSHEET
^ the beginning
$ the end
d number
char at least one
something.com/list/
^list/$
ROUTES

mysite/urls.py
webapp/urls.py
urlpatterns = [
]
from . import views
urlpatterns = [
]
REGEX CHEATSHEET
^ the beginning
$ the end
d number
char at least one
something.com/list/
^list/$
something.com/list/123/edit/
^list/(d+)/edit/$
ROUTES

mysite/urls.py
webapp/urls.py
urlpatterns = [
]
from . import views
urlpatterns = [
]
REGEX CHEATSHEET
^ the beginning
$ the end
d number
char at least one
something.com/list/
^list/$
something.com/list/123/edit/
^list/(d+)/edit/$
something.com/list/{candyId}/edit/
^list/(?P<candyId>d+)/edit/$
ROUTES

VIEWS

VIEWS
webapp/urls.py
from . import views
urlpatterns = [
]

webapp/views.py
VIEWS
from django.shortcuts import render
def mainpage(request):
candies = Candy.object.all()
return render(request, ‘index.html’, { ‘candyList’: candies })
webapp/urls.py
from . import views
urlpatterns = [
]

webapp/templates/index.html
webapp/views.py
VIEWS
from django.shortcuts import render
def mainpage(request):
candies = Candy.object.all()
return render(request, ‘index.html’, { ‘candyList’: candies })
<div>{{candyList}}</div>
webapp/urls.py
from . import views
urlpatterns = [
]

THE BASIS – {% %} AND {{ }}DJANGO#101
{% for candy in candyList %}
<div>
<div>
{{candy.flavor}}
</div>
<div>
{{candy.description}}
</div>
</div>
{% endfor %}

webapp/static/style.css
THE BASIS – CSS STYLESHEETDJANGO#101
<html>
<head>
 
</head>
<body>
<div>
<div>
{{candy.flavor}}
</div>
<div>
</div>
</div>
{% endfor %}
</body>
</html>

<html>
<head>
 
</head>
<body>
<div class=“candy-list”>
<div class=“flavor”>
{{candy.flavor}}
</div>
<div class=“desc”>
</div>
</div>
{% endfor %}
</body>
</html>

.candy-list {
display: flex;
padding: 10px;
}
.candy-list .flavor {
font-weight: bold;
width: 20%;
}
.candy-list .desc {
width: 80%;
}
<html>
<head>
 
</head>
<body>
{{candy.flavor}}
</div>
</div>
</div>
{% endfor %}
</body>
</html>

.candy-list {
display: flex;
padding: 10px;
}
.candy-list .flavor {
font-weight: bold;
width: 20%;
}
.candy-list .desc {
width: 80%;
}
{% load staticfiles %}
<html>
<head>
<link rel=“stylesheet”  
href=“{% static ‘css/style.css’ %}”>
</head>
<body>
{{candy.flavor}}
</div>
</div>
</div>
{% endfor %}
</body>
</html>

THE BASIS – TEMPLATE BLOCKDJANGO#101
<html>
<head>
<link rel=“stylesheet” href=“{% static ‘css/style.css’ %}”>
</head>
<body>
{{candy.flavor}}
</div>
</div>
</div>
{% endfor %}
</body>
</html>

C
webapp/templates/base.html
C
webapp/templates/list.html
<html>
<head>
</head>
<body>
{{candy.flavor}}
</div>
</div>
</div>
{% endfor %}
</body>
</html>

C
C
<html>
<head>
</head>
<body> {% block content %}
{{candy.flavor}}
</div>
</div>
</div>
{% endfor %}
{% endblock %} </body>
</html>

C
C
<html>
<head>
</head>
{% block content %}
{{candy.flavor}}
</div>
</div>
</div>
{% endfor %}
{% endblock %}
</html>

C
C
<html>
<head>
</head>
{% extends ‘base.html’ %}
{% block content %}
{{candy.flavor}}
</div>
</div>
</div>
{% endfor %}
{% endblock %}
</html>

<html>
<head>
<link rel=“stylesheet”  
href=“{% static ‘css/style.css’ %}”>
<body>
{% block content %}
{% endblock %}
</body>
</html>
{% block content %}
{{candy.flavor}}
</div>
</div>
</div>
{% endfor %}
{% endblock %}

THE BASIS – MAKING FORM (ADDING)DJANGO#101
return self.flavor
webapp/models.py
FROM THE EXISTING MODEL

from django import forms
class CandyForm(forms.ModelForm):
class Meta:
model = Candy
field = (‘flavor’, ‘description’,)
webapp/forms.py
CREATING A FORM

from django import forms
class CandyForm(forms.ModelForm):
class Meta:
model = Candy
field = (‘flavor’, ‘description’,)
from . import views
urlpatterns = [
url(r'^$', views.mainpage, name='main_page'),
url(r’^add/$’, views.add, name=‘add’),
]
webapp/forms.py
webapp/urls.py
CREATING A FORM

from django.shortcuts import render, redirect
from .forms import CandyForm
...
def add(request):
if request.method == “POST”:
form = CandyForm(request.POST)
candy = form.save(commit=False)
candy.produce()
candy.save()
return redirect(‘main_page’)
else:
form = CandyForm()
return render(request, ‘add.html’, { ‘candyForm’: form })
webapp/views.py

...
def add(request):
candy.produce()
candy.save()
else:
form = CandyForm()
webapp/views.py
webapp/views.py
{% block content %}
{% endblock %}

...
def add(request):
candy.produce()
candy.save()
else:
form = CandyForm()
webapp/views.py
webapp/views.py
{% block content %}
<form method=“POST”> {% csrf_token %}
{{candyForm}}
<button type=“submit”>Add</button>
</form>
{% endblock %}

...
def add(request):
else:
form = CandyForm()
webapp/views.py
webapp/views.py
{% block content %}
<form method=“POST”> {% csrf_token %}
{{candyForm}}
<button type=“submit”>Add</button>
</form>
{% endblock %}

THE BASIS – MAKING FORM (EDITING)DJANGO#101
webapp/urls.py
...
url(r’^(?P<pk>d+)/edit/$’, views.edit, name=‘edit’),
...
webapp/views.py
from django.shortcuts import render, redirect, get_object_or_404
def edit(request, pk):
candy = get_object_or_404(Candy, pk=pk)
form = CandyForm(request.POST, instance=candy)
candy.produce()
candy.save()
else:
form = CandyForm(instance=candy)
return render(request, ‘add.html’, ‘candyForm’: form)
<a href=“{% url ‘edit’ pk=candy.pk %}”>{{candy.flavor}}</a>

THE BASIS – AUTHENTICATIONDJANGO#101
webapp/views.py
if request.user.is_authenticated:
# do something if user is already logged in
else:
# redirect to main page
webapp/templates/some_page.html
{% if user.is_authenticated %}

{% endif %}

DJANGO
WEBAPP  
DEVELOPMENT
CHEATSHEET
DJANGO#101
1. create virtual environment
2. activate virtual environment
3. upgrade pip
4. install django
5. start django project
6. run server
1. start new app
2. install app in manage.py
3. include route in project/urls.py
4. add route in app/urls.py
1. create a model in app/models.py
2. register model in app/admin.py
3. migrate model
4. makemigration
5. create superuser
6. login
1. create a route in app/urls.py binding with views
2. create or reuse a new method in app/views.py return render html
3. create or reuse a html in app/templates/some_page.html
4. (Optional) css, images, font and other static file have to be located in app/static/
5. refresh page
CREATING PROJECT
INSTALLING AN APP TO DJANGO PROJECT
ADDING A DATABASE MODEL
MAKING A NEW PAGE TO THE APP

BONUS!
DEPLOY YOUR APP TO  
PYTHONANYWHERE.COM
DJANGO#101
1. register
2. create a pythonanywhere API token
3. go to dashboard -> open a bash
4. install pip
5. install your django project from GitHub
6. create a superuser on pythonanywhere
7. collect static file
8. refresh the apps
9. your app is ready on  
username.pythonanywhere.com
P.S. you can use ‘git pull’ for the latest 
version of your django project and repeat 
number 7 - 9

https://aimetpgm.pythonanywhere.com
https://github.com/AimeTPGM/wanneeginnai

Django#101 – All You Need to Know for Getting Started

More Related Content

What's hot (20)

Similar to Django#101 – All You Need to Know for Getting Started (20)

Recently uploaded (20)

Django#101 – All You Need to Know for Getting Started