Django part 1

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Pendahuluan
What is Django?
• Django is a Python framework that makes it easier to create web sites
using Python.
• Django takes care of the difficult stuff so that you can concentrate on
building your web applications.
• Django emphasizes reusability of components, also referred to as DRY
(Don't Repeat Yourself), and comes with ready-to-use features like
login system, database connection and CRUD operations (Create Read
Update Delete).

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Bagaimana Django Bekerja
Django follows the MVT design pattern (Model View Template).
• Model - The data you want to present, usually data from a database.
• View - A request handler that returns the relevant template and
content - based on the request from the user.
• Template - A text file (like an HTML file) containing the layout of the
web page, with logic on how to display the data.

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Model

• Model menyediakan data dari basis data.

• Di Django, data disampaikan melalui Object Relational Mapping (ORM),
yang merupakan teknik yang dirancang untuk memudahkan bekerja
dengan basis data. Cara paling umum untuk mengambil data dari basis
data adalah dengan SQL maka kita perlu memiliki pemahaman yang
cukup baik tentang struktur basis data agar bisa bekerja dengan efektif.
• Dengan ORM, Django memudahkan komunikasi dengan basis data
tanpa perlu menulis pernyataan SQL yang kompleks. Model-model
biasanya terletak dalam file yang disebut models.py.
Departemen Pendidikan Ilmu Komputer
Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 View
• View adalah komponen yang mengontrol logika aplikasi dan
menangani permintaan dari pengguna. View mengambil permintaan
http sebagai argumen, mengimpor model yang relevan.
• Di Django, view dapat berupa fungsi atau kelas yang menerima
permintaan HTTP, memproses data (mengambil dari model), dan
mengembalikan respons (biasanya dalam bentuk template)
• View berfungsi sebagai penghubung antara model dan template,
menentukan data mana yang akan ditampilkan kepada pengguna.
• A view adalah fungsi atau metode yang biasanya terletak dalam file
yang disebut views.py.
Departemen Pendidikan Ilmu Komputer
Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Template
• A template adalah file yang mendefinikan bagaimana tampilan harus
ditampilkan
• Template memungkinkan pemisahan antara logika presentasi dan
logika aplikasi, sehingga pengembang front-end dapat bekerja secara
terpisah dari pengembang back-end.
• Templates biasanya adalah .html files,
• File HTML menjelaskan tata letak halaman web, tetapi dapat juga
dalam format file lain untuk menyajikan hasil lain.

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 URLs
• Django menyediakan cara untuk menavigasikan antar berbagai
halaman yang berbeda dalam website.
• Ketika user requests URL, Django memutuskan view mana yang akan
dikirimkan
• Hal ini dilakukan oleh file urls.py.

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Alur Kerja MVT - Django Web
Application
• When you have installed Django and created your first Django web application,
and the browser requests the URL, this is basically what happens:
• Django receives the URL, checks the urls.py file, and calls the view that matches
the URL.
• The view, located in views.py, checks for relevant models.
• The models are imported from the models.py file.
• The view then sends the data to a specified template in the template folder.
• The template contains HTML and Django tags, and with the data it returns
finished HTML content back to the browser.
• Django can do a lot more than this, but this is basically what you will learn in this
tutorial, and are the basic steps in a simple web application made with Django.
Departemen Pendidikan Ilmu Komputer
Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Sederhananya Alur Kerja MVT
• Pengguna mengirimkan permintaan HTTP (misalnya, mengakses URL
tertentu).
• URL dispatcher Django mengarahkan permintaan ke view yang sesuai.
• View mengambil data yang diperlukan dari model.Data yang
diperoleh kemudian dikirim ke template untuk dirender.
• Template menghasilkan HTML yang dikirim kembali sebagai respons
ke pengguna.

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Check Python
• Windows
• C:\Users\Your Name>python –version
• Linux/Mac
• Python –version

If you find that you do not have Python installed on your computer, then you
can download it for free from the following website: https://www.python.org/

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Virtual Environment
• It is suggested to have a dedicated virtual environment for each
Django project, and one way to manage a virtual environment is venv,
which is included in Python.
• The name of the virtual environment is your choice, example : myVE
• Windows
• py -m venv myVE myVE
• Unix/MacOS Include
Create folder myVE
Lib
• python -m venv myVE Scripts
• Activate the environment Pyvenv.cfg

• Windows : myworld\Scripts\activate.bat
• Unix/MacOS : source myworld/bin/activate
Departemen Pendidikan Ilmu Komputer
Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Install Django
• Windows
• (myVE) C:\Users\Your Name>py -m pip install Django
• Unix/MacOS
• (myVE) ... $ python -m pip install Django Cek
• Cek
• django-admin --version

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Buat Virtual Env
• Install venv (jika belum)
python –m pip install –user virtualenv
• Buat virtual env
python –m venv nama_env
• Aktifkan virtual env
Windows : nama_env\Scripts\activate
macOS/Linux : source nama_env/bin/activate
• Install Django
pip install django
• Periksa hasil instalasi
django-admin --version
• Buat proyek baru
django-admin startproject nama_project
• Jalankan server pengembangan
cd nama_proyek
python manage.py runserver
• Kunjungi : http://127.0.0.1:8000/ untuk melihat
Departemen Pendidikan Ilmu Komputer
Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Project vs App
• Apa perbedaan antara proyek dan aplikasi?
• Aplikasi adalah aplikasi Web yang melakukan sesuatu – misalnya,
sistem Weblog, aplikasi catatan publik, atau aplikasi jajak pendapat
sederhana.
• Proyek adalah kumpulan konfigurasi dan aplikasi untuk situs web
tertentu. Proyek dapat berisi beberapa aplikasi. Aplikasi dapat berada
dalam beberapa proyek
• Create app :
python manage.py startapp myApp

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Tulis View.py
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.

def home(request):
return render(request,'myApp/home.html')

Ini adalah view sederhana dalam Django.

Untuk memanggil view tersebut kita harus memapingnya dalam URL

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 myApp/urls.py
• Create urls.py di folder myApp

from django.urls import path

from . import views

urlpatterns =[
path('', views.home, name='home'),
]

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 home.html <!DOCTYPE html>
<html lang="en">
• Buat folder templates di myApp <head>
<meta charset="UTF-8">
• Dan buat folder myApp di folder <meta name="viewport" content="width=device-width, initial-scale=1.0"
templates <title>This is my website</title>
</head>
• Buat file home.html di folder
tersebut <body>
<h1>My website</h1>
</body>

</html>

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Cek myProject/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
path('myApp/', include('myApp.urls')),
path('admin/', admin.site.urls),
]

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Cek myProject/settings.py
import os

INSTALLED_APPS = [
'myApp’,
….
]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates’,
'DIRS': [os.path.join(BASE_DIR, 'myApp/templates’)],
….
}
Departemen Pendidikan Ilmu Komputer
Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Run lagi di terminal
python manage.py runserver

Buka http://127.0.0.1:8000/myApp

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Buat file html ke dua profile.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is my profile</title>
</head>

<body>
<h1>This is profile page</h1>
</body>

</html>
Departemen Pendidikan Ilmu Komputer
Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Ubah home html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is my website</title>
</head>

<body>
<h1>My home</h1>
<a href="{% url 'profile' %}">Profile saya</a>
</body>

</html>
Departemen Pendidikan Ilmu Komputer
Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Tambahkan fungsi dalam view.py
def profile (request):
return render(request, 'myApp/profile.html')

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Tambahkan ulrs.py
from django.urls import path
from . import views

urlpatterns =[
path('', views.home, name='home’),
path('profile/', views.profile, name='profile'),
]

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Latihan
• Buat tampilan profil diri yang terdiri dari beberapa page:
• Page pertama : profil umum
• Page ke 2 page pendidikan
• Page ke 3 page pengalaman kerja
• Page ke 4 page sosial media
• Page 2,3 dan 4 dapat diakses dari page profil umum

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.
 Selesai

Departemen Pendidikan Ilmu Komputer

Fakultas Pendidikan Matematika dan Pengetahuan Alam
Erna Piantari, M.T.