Introduction to Django

Mentor: …

Prepared in 2023
 Nama Pengajar

Profile singkat atau pengalaman yang berhubungan dengan materi

pelatihan.

Nama Pengajar Link to Professional Platform:

https://www. ….

Jabatan - Asal Perusahaan

 Table of
Contents.

01 02 03

Pengenalan Dasar-Dasar Model View

Django Django Templates

Prepared in 2023
01 Pengenalan
Django
01 | Pengenalan Django

“ - Django adalah sebuah web framework

atau kerangka kerja untuk membangun
aplikasi web dengan bahasa
pemrograman Python.
- Framework ini memudahkan para
pengembang web dalam membuat
aplikasi web yang kompleks dan fleksibel
“
lebih cepat dan mudah.
01 | Pengenalan Django

Keunggulan Django
Fast
Developme
nt Security
Routing URL, ORM, 01 02 SQL Injection, XSS (cross-
Templates site scripting), CSRF
(cross-site request forgery)

Highly
Scalable Versatile
Web ukuran besar & Web sederhana
caching, database, split
logic
04 03 Web Kompleks
Fitur pendukung
berlimpah
01 | Pengenalan Django

Instalasi Django

Prerequisite
● Python
● PIP
● Virtual Environment

Manfaat Virtual ENV

● Isolasi
● Menghindari konflik
● Memudahkan pemeliharaan
● Kemudahan Instal Libs
berbeda antar project

➜ Kelas-Django python3 -m venv env_ku

➜ (env_ku) ➜ Kelas-Django pip install Django==4.2

01 | Pengenalan Django

Software Pendukung

Code Editor
● Visual Code Studio - https://code.visualstudio.com/download

Database
● DBEaver Community - https://dbeaver.io/download/
01 | Pengenalan Django

Kategori Django
Client Side
Pada Client Side ini terjadi permintaan dan respon (request &
response HTTP), karena Django adalah Web Framework,
sehingga dari sisi client akan merequest suatu data ke server,
berupa View yang dikembalikan dalam bentuk response dan
lalu dirender di Template. Tampilah inilah yang akan kita
lihat pada web browser.

Server Side
Server Side dihandle oleh server Django Framework untuk
memanipulasi dan juga mengolah permintaan data dari
pengguna lalu hasilnya akan dikirim ke client dan di render
pada sisi client.
02 Dasar-Dasar
Django
02 | Dasar-Dasar Django

Komponen
01
Model
Adalah Django ORM 04
URLConf
02 Menghubungkan URL
dan View pada request
View
Http request dan 05
response ke Templates Middleware
Software berjalan
03 diantara Request &
Template Response, seperti
Menampilkan data Cache, auth, session,
View dan digabung dll
dengan kode HTML
02 | Dasar-Dasar Django

Memulai Django
(env_ku) ➜ Kelas-Django django-admin startproject project_pertama

(env_ku) ➜ project_pertama python3 manage.py runserver

(env_ku) ➜ project_pertama python3 manage.py

migrate

Update Model
(env_ku) ➜ project_pertama python3 manage.py
makemigrations nama_model
02 | Dasar-Dasar Django

Membuat App Django

(env_ku) ➜ project_pertama python3 manage.py startapp pengguna

project_pertama
manage.py
project_pertama
__init__.py
asgi.py
settings.py
urls.py
Wsgi.py
pengguna
__init__.py
views.py
admin.py
apps.py
models.py
tests.py
migrations
__init__.py
02 | Dasar-Dasar Django

Pegembangan Aplikasi Web

Django Authentication App Django REST Framework
App ini digunakan untuk mengelola proses otentikasi dan otorisasi App ini digunakan untuk membuat API RESTful yang dapat
pengguna dalam aplikasi web Django. digunakan oleh aplikasi lain untuk mengakses data pada
aplikasi web Django.

Django Admin App Django File Management App

App ini digunakan untuk mengelola dan memodifikasi data dalam App ini digunakan untuk mengelola dan memproses file yang
database dari halaman admin Django. diunggah oleh pengguna pada aplikasi web Django.
02 | Dasar-Dasar Django

Django Settings
02 | Dasar-Dasar Django

Struktur Proyek Django

# pengguna -> views.py #pengguna -> urls.py
from django.shortcuts import render from django.urls import path
from django.http import HttpResponse from . import views

def pengguna(request): urlpatterns = [

return HttpResponse("Selamat Datang Pengguna") path('pengguna/', views.pengguna, name='pengguna'),
]

#urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
path('', include(‘pengguna.urls')),
path('admin/', admin.site.urls),
]
02 | Dasar-Dasar Django

WSGI ASGI
● Web Server Gateway Interface ● Asynchronous Server Gateway
● Proses dimulai dari task A, setelah interface
selesai mengerjakan task B dan ● Proses dapat dikerjaan paralel,
selanjutnya task C sebagai contoh, meskipun task A
belum selesai, namun task B sudah
dieksekusi, begitu pula dengan task C
02 | Dasar-Dasar Django

Django Shell API

Django Shell
Read Data
API untuk melakukan CRUD (Create, Read, Update dan Delete)
pada database ORM Django
(env_ku) ➜ project_pertama python manage.py shell
Python 3.9.6 (default, Oct 18 2022, 12:41:40)
(env_ku) ➜ project_pertama python manage.py shell
[Clang 14.0.0 (clang-1400.0.29.202)] on darwin
Python 3.9.6 (default, Oct 18 2022, 12:41:40)
Type "help", "copyright", "credits" or "license" for more
[Clang 14.0.0 (clang-1400.0.29.202)] on darwin
information.
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
(InteractiveConsole)
>>> from pengguna.models import Pengguna
>>>

>>> from pengguna.models import Pengguna

>>> Pengguna.objects.all()
<QuerySet []>
02 | Dasar-Dasar Django

Django Shell API

Insert Data

>>> from pengguna.models import Pengguna

>>> Pengguna = Pengguna(nama='atnlie', alamat='Jakarta Selatan', email= ‘[email protected]’)
>>> Pengguna.save()

>>> from pengguna.models import Pengguna

>>> Pengguna.objects.all()
<QuerySet [<Pengguna: atnlie>]>
>>>

>>> from pengguna.models import Pengguna

>>> Pengguna.objects.all().values()
<QuerySet [{'id': 1, 'nama': 'atnlie', 'alamat': 'Jakarta Selatan', 'email': '[email protected]'}]>
>>>
02 | Dasar-Dasar Django

Django Shell API

Insert Multiple Data

>>> from pengguna.models import Pengguna

>>> Pengguna1 = Pengguna(nama='atnlie1', alamat='Jakarta Selatan No 1', email= ‘[email protected]’)
>>> Pengguna2 = Pengguna(nama='atnlie2', alamat='Jakarta Selatan No 2', email= ‘[email protected]’)
>>> Pengguna3 = Pengguna(nama='atnlie3', alamat='Jakarta Selatan No 3', email=’atnlie.abc3’)
>>> Pengguna4 = Pengguna(nama='atnlie4', alamat='Jakarta Selatan No 4', email= ‘[email protected]’)
>>> list_pengguna = [Pengguna1, Pengguna2, Pengguna3, Pengguna4]
>>> for p in list_pengguna:
… p.save()

>>> Pengguna.objects.all().values()
<QuerySet [{'id': 1, 'nama': 'atnlie', 'alamat': 'Jakarta Selatan', 'email': '[email protected]'}, {'id': 2, 'nama':
'atnlie1', 'alamat': 'Jakarta Selatan No 1', 'email': '[email protected]'}, {'id': 3, 'nama': 'atnlie2', 'alamat':
'Jakarta Selatan No 2', 'email': '[email protected]'}, {'id': 4, 'nama': 'atnlie3', 'alamat': 'Jakarta Selatan No
3', 'email': '[email protected]'}]>
>>>
02 | Dasar-Dasar Django

Django Shell API

Update Data

>>> Pengguna.objects.all().values()[3]
{'id': 4, 'nama': 'atnlie3', 'alamat': 'Jakarta Selatan No 3', 'email': '[email protected]'}
>>>

>>> x = Pengguna.objects.all()[3]
>>> x.nama
'atnlie3'
>>> x.nama = "Anton"
>>> x.save()
>>> x.nama
'Anton'
>>> x
{'id': 4, 'nama': 'Anton', 'alamat': 'Jakarta Selatan No 3', 'email': ‘[email protected]’}
>>>
02 | Dasar-Dasar Django

Django Shell API

Delete Data

>>> Pengguna.objects.all().values()
<QuerySet [{'id': 1, 'nama': 'atnlie', 'alamat': 'Jakarta Selatan', 'email': '[email protected]'}, {'id': 2, 'nama':
'atnlie1', 'alamat': 'Jakarta Selatan No 1', 'email': '[email protected]'}, {'id': 3, 'nama': 'atnlie2', 'alamat':
'Jakarta Selatan No 2', 'email': '[email protected]'}, {'id': 4, 'nama': 'atnlie3', 'alamat': 'Jakarta Selatan No
3', 'email': '[email protected]'}]>
>>>

>>> hapus = Pengguna.objects.all()[2]

>>> hapus.nama
'atnlie2'
>>> hapus.delete()
(1, {'pengguna.Pengguna': 1})
>>> Pengguna.objects.all().values()
<QuerySet [{'id': 1, 'nama': 'atnlie', 'alamat': 'Jakarta Selatan', 'email': '[email protected]'}, {'id': 2, 'nama':
'atnlie1', 'alamat': 'Jakarta Selatan No 1', 'email': '[email protected]'}, {'id': 4, 'nama': 'Anton', 'alamat':
'Jakarta Selatan No 3', 'email': '[email protected]'}]>
>>>
02 | Dasar-Dasar Django

Filter Data
Filter
● Filter di Django model adalah metode untuk >>> Pengguna.objects.filter(nama='atnlie').values()
memfilter data pada model berdasarkan kriteria <QuerySet [{'id': 1, 'nama': 'atnlie', 'alamat': 'Jakarta Selatan',
tertentu. 'email': '[email protected]'}]>
● Filter dapat digunakan untuk mengambil satu atau >>> Pengguna.objects.filter(-nama='atnlie1').values()
beberapa objek yang memenuhi kriteria tertentu dari <QuerySet [{'id': 2, 'nama': 'atnlie1', 'alamat': 'Jakarta Selatan No
model. 1', 'email': '[email protected]'}]>
● Filter digunakan pada queryset dan mengembalikan >>> Pengguna.objects.filter(id=1).values()
queryset baru yang mengandung objek yang <QuerySet [{'id': 1, 'nama': 'atnlie', 'alamat': 'Jakarta Selatan',
memenuhi kriteria yang diberikan 'email': '[email protected]'}]>
>>>
02 | Dasar-Dasar Django

Filter Data
Beberapa Jenis Filter
● exact: untuk mencari objek dengan nilai yang sama persis.
● iexact: untuk mencari objek dengan nilai yang sama persis tanpa memperhatikan huruf besar atau kecil.
● contains: untuk mencari objek yang mengandung string tertentu.
● icontains: untuk mencari objek yang mengandung string tertentu tanpa memperhatikan huruf besar atau kecil.
● startswith: untuk mencari objek yang diawali dengan string tertentu.
● istartswith: untuk mencari objek yang diawali dengan string tertentu tanpa memperhatikan huruf besar atau kecil.
● endswith: untuk mencari objek yang diakhiri dengan string tertentu.
● iendswith: untuk mencari objek yang diakhiri dengan string tertentu tanpa memperhatikan huruf besar atau kecil.
● in: untuk mencari objek yang memiliki nilai yang sama dengan satu dari beberapa nilai yang ditentukan.
● isnull: untuk mencari objek yang memiliki nilai null pada field tertentu.
● lt: untuk mencari objek yang nilai field-nya kurang dari nilai yang ditentukan.
● lte: untuk mencari objek yang nilai field-nya kurang dari atau sama dengan nilai yang ditentukan.
● gt: untuk mencari objek yang nilai field-nya lebih besar dari nilai yang ditentukan.
● gte: untuk mencari objek yang nilai field-nya lebih besar dari atau sama dengan nilai yang ditentukan.
02 | Dasar-Dasar Django

Order By
>>> Pengguna.objects.all().values()
<QuerySet [{'id': 1, 'nama': 'atnlie', 'alamat': 'Jakarta Selatan', 'email': '[email protected]'}, {'id': 2, 'nama': 'atnlie1', 'alamat':
'Jakarta Selatan No 1', 'email': '[email protected]'}]>
>>>
>>> Pengguna.objects.all().order_by('nama').values()
<QuerySet [{'id': 1, 'nama': 'atnlie', 'alamat': 'Jakarta Selatan', 'email': '[email protected]'}, {'id': 2, 'nama': 'atnlie1', 'alamat':
'Jakarta Selatan No 1', 'email': '[email protected]'}]>
>>> Pengguna.objects.all().order_by('-nama').values()
<QuerySet [{'id': 2, 'nama': 'atnlie1', 'alamat': 'Jakarta Selatan No 1', 'email': '[email protected]'}, {'id': 1, 'nama': 'atnlie', 'alamat':
'Jakarta Selatan', 'email': '[email protected]'}]>
>>>

Jenis-jenis Order
● order_by('field1', 'field2', ...): untuk mengurutkan objek-objek berdasarkan beberapa field secara ascending.
● order_by('-field1', '-field2', ...): untuk mengurutkan objek-objek berdasarkan beberapa field secara descending.
● reverse(): untuk membalikkan urutan objek-objek pada queryset.
03 Model View
Templates
03 | Model View Templates

Model View Template

Model
Model adalah komponen yang bertanggung jawab untuk mengatur
struktur dan interaksi dengan database. Model dalam Django
didefinisikan sebagai kelas Python yang mewakili tabel dalam
database. Django menggunakan ORM (Object-Relational
Mapping) untuk menghubungkan model dengan database.

View
View adalah komponen yang bertanggung jawab untuk mengatur
logika bisnis dan menghubungkan antara model dan template.
View mengambil data dari model, memprosesnya, dan
mengembalikan template HTML yang siap ditampilkan.

Template
Template adalah komponen yang bertanggung jawab untuk
mengatur tampilan atau antarmuka pengguna. Template dalam
Django adalah file HTML yang dapat mengakses data dari
view dan menampilkan data tersebut ke pengguna.
03 | Model View Templates

Fungsi MVT
Model
● Mendefinisikan struktur database
● Mengelola data
● Validasi data
● Memudahkan akses data
● Membuat relasi antara tabel

View
● Memproses permintaan HTTP
● Menghubungkan antara model dan template
● Menangani logika bisnis
● Memberikan respon HTTP yang sesuai

Template
● Memisahkan tampilan dan logika bisnis
● Menampilkan data
● Membuat tampilan yang dinamis
● Memungkinkan pengguna memanipulasi data
03 | Model View Templates

Tipe Data Model Model

● CharField: digunakan untuk menyimpan string
dengan panjang tertentu.
● TextField: digunakan untuk menyimpan teks
panjang yang tidak terbatas.
● IntegerField: digunakan untuk menyimpan
bilangan bulat dengan batasan nilai tertentu.
● FloatField: digunakan untuk menyimpan
bilangan pecahan dengan batasan nilai tertentu.
● BooleanField: digunakan untuk menyimpan
nilai boolean, True dan False.
● DateField: digunakan untuk menyimpan
tanggal.
● DateTimeField: digunakan untuk menyimpan
tanggal dan waktu dalam format tertentu.
● EmailField: digunakan untuk menyimpan
alamat email yang valid.
● ImageField: digunakan untuk menyimpan
gambar yang diupload oleh pengguna.
● FileField, URLField, IPAddressField,
UUIDField, BinaryField, TimeField
03 | Model View Templates

Contoh Model ProdukItem

class ProdukItem(models.Model):
nama_produk = models.CharField(max_length=100)
harga = models.FloatField()
harga_diskon = models.FloatField(blank=True, null=True)
slug = models.SlugField(unique=True)
deskripsi = models.TextField()
gambar = models.ImageField(upload_to='product_pics')
label = models.CharField(choices=PILIHAN_LABEL, max_length=4)
kategori = models.CharField(choices=PILIHAN_KATEGORI, max_length=2)
03 | Model View Templates

Contoh Model Order & OrderProdukItem

class OrderProdukItem(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
ordered = models.BooleanField(default=False)
produk_item = models.ForeignKey(ProdukItem, on_delete=models.CASCADE)
quantity = models.IntegerField(default=1)

class Order(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
produk_items = models.ManyToManyField(OrderProdukItem)
tanggal_mulai = models.DateTimeField(auto_now_add=True)
tanggal_order = models.DateTimeField(blank=True, null=True)
ordered = models.BooleanField(default=False)
alamat_pengiriman = models.ForeignKey('AlamatPengiriman', on_delete=models.SET_NULL, blank=True, null=True)
payment = models.ForeignKey('Payment', on_delete=models.SET_NULL, blank=True, null=True)
03 | Model View Templates

Contoh Model Payment & Alamat

class AlamatPengiriman(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
alamat_1 = models.CharField(max_length=100)
alamat_2 = models.CharField(max_length=100)
negara = models.CharField(max_length=100)
kode_pos = models.CharField(max_length=20)

class Payment(models.Model):
user = models.ForeignKey(User, on_delete=models.SET_NULL, blank=True, null=True)
amount = models.FloatField()
timestamp = models.DateTimeField(auto_now_add=True)
payment_option = models.CharField(choices=PILIHAN_PEMBAYARAN, max_length=1)
charge_id = models.CharField(max_length=50)
03 | Model View Templates

Model Diagram
03 | Model View Templates

View
Ada 2 jenis sintak yang perlu diketahui, yaitu:
● Sintak untuk menampilkan isi variabel
{{ }}
● Sintak untuk melakukan logic, seperti
melakukan pengulangan dan juga
menjalankan pengolahan logic dengan
menggunakan tags {% %}
Variabel
● {{ variable }}: Sintaks ini digunakan untuk
menampilkan nilai variable di dalam tampilan
halaman web.
● {% if condition %}: Sintaks ini digunakan untuk
mengevaluasi suatu kondisi benar
● {% for item in list %}: Sintaks ini digunakan
untuk melakukan perulangan terhadap suatu list
atau queryset
● {% url 'name' arg1 arg2 %}: Sintaks ini
digunakan untuk menghasilkan URL
● {% block name %} ... {% endblock %}:
Sintaks ini digunakan untuk dapat di override
03 | Model View Templates

Django Sintak
{% with nama="Atnlie" %}
<h1>Hi {{ nama }}, apa kabar?</h1>
{% endwith %} {% for item in belanjaan %}
<h1>{{ item.harga }}</h1>
<h1>{{ item. nama}}</h1>
{% if label_harga == NEW %}
<h1>{{ item.diskon }}</h1>
<h1>Model Baru</h1>
{% endfor %}
{% elif label_harga == SALES %}
<h1>Discount</h1>
{% else %}
<h1>Harga Normal</h1>
{% endif %}
03 | Model View Templates

Contoh Penggunaan Variabel

<div class="d-flex align-items-center">
{% if request.user.is_authenticated %}
<a class="nav-link me-3" href="{% url 'toko:order-summary' %}">
<i class="fas fa-shopping-cart"></i>
<span class="badge rounded-pill badge-notification bg-danger">{{ request.user|total_produk_dikeranjang }}</span>
</a>
<a class="nav-link me-3" href="{% url 'account_logout' %}">
<i class="fas fa-right-from-bracket"></i>
</a>
{% else %}
<a class="nav-link me-3" href="{% url 'account_login' %}">
<i class="fas fa-right-to-bracket"></i>
{% endif %}
</div>
03 | Model View Templates

Contoh Penggunaan Variabel #2

{% for pItem in object_list %}
<div class="col-lg-3 col-md-6 mb-4">
<a href="{{ pItem.get_absolute_url }}" class="text-reset">
<h5 class="card-title mb-2">{{ pItem.nama_produk }}</h5>
</a>
<a href="" class="text-reset ">
<p>{{ pItem.get_kategori_display }}</p>
</a>
<h6 class="mb-3 price">${% if pItem.harga_diskon %}{{ pItem.harga_diskon }}{% else %}{{ pItem.harga }}{% endif
%}</h6>
</div>
</div>
</div>
{% empty %}
<p>Data Produk belum tersedia</p>
{% endfor %}
03 | Model View Templates

Contoh Penggunaan Variabel #3

{% extends 'base.html' %}
{% block content %}
{% include 'carousel.html' %}
<main>
<div class="container">
{% if is_paginated %}
<nav aria-label="Page navigation example" class="d-flex justify-content-center mt-3">
…
</nav>
{% endif %}
</main>
{% endblock content %}
03 | Model View Templates

Template
03 | Model View Templates

Halaman Index & Error 404

Halaman Index
Halaman index adalah halaman pertama yang muncul ketika
sebuah situs web diakses. Halaman ini sering juga disebut sebagai
halaman beranda atau halaman depan

Halaman Error 404

Halaman yang akan tampil jika halaman yang direquest oleh
pengguna tidak ditemukan
03 | Model View Templates

Error 404 & Custom

DEBUG = False dan ALLOWED_HOSTS = [“*”]
Halaman Error 404
Halaman error 404 adalah halaman yang ditampilkan ketika
sebuah halaman web tidak ditemukan atau tidak tersedia di server.
Kode HTTP 404 adalah kode status server yang menunjukkan
bahwa halaman yang diminta oleh pengguna tidak dapat
ditemukan

DEBUG = True
THANK YOU