WEB PROGRAMMING PYTHON

Silabus
• Python programming
• OOP & Introduction to Django
• HTML,CSS programming
• Django Admin
• Database and CRUD Operation
• Create Home Page
• Implementing Bootstrap 5 for styling UI
• Wrapping UP
Python Basic
• IDLE (Integrated Development and Learning)
• Visual Studio Code
• Tipe Data (Integer,Float, Strings)
• Built-in function
• Membuat Function
• Operator Matematika
• Variabel
• List,Tuples,Dictionaries
• Percabangan
• Perulangan
• Object Oriented Programming
Sejarah Python
• Diciptakan Guido van Rossum seorang pria berkebangsaan Belanda
• mulai mengembangkan bahasa pemrograman Python tersebut sejak tahun
1989 di Centrum Wiskunde & Informatica (CWI) dan akhirnya bahasa
pemrograman Python secara resmi dirilis kepada publik pada tahun 1991.
• Nama Python sendiri sebenarnya bukan diambil dari nama ular piton.
• Nama Python tersebut diambil dari sebuah acara humor yang ditayangkan
oleh channel BBC pada tahun 1980-an yang berjudul “Monty Python’s Flying
Circus”
• Pada tahun 1994, akhirnya Python versi 1.0 dirilis kepada publik
[Link]
Implementasi Python
• Pengembangan Website
• Pengembangan IOT
• Data Mining
• Pengembangan Machine Learning
• Pengembangan game
[Link]
Internal Proses
• Kode python (.py)
• Dicompile menjadi bytecode disimpan di dalam
memory atau dalam file .pyc
• Interpreter melakukan eksekusi bytecode sesuai
OS
IDLE (Integrated Development and Learning)
• Interactive Mode
Tipe Data

[Link]
Integers
Operator
1. Arithmetic Operators
2. Relational Operators
3. Bitwise Operators
4. Assignment operators
5. Identity operators
6. Membership operators

[Link]
Arithmetic/Math Operator

Python Cheat Sheet (Updated in 2021) | [Link]

Relational Operators
Logical Operators

[Link]
Bitwise Operators
Assignment operators
Identity operators
Membership operators
Floats
Character String/String
• Sequence of character
• Immutable
Latihan
• Buat program menggunakan console menghitung luas segitiga dengan alas dan tinggi
diinput

• Buat program menggunakan console menghitung luas persegipanjang : luas = panjang *

lebar
Menggunakan Visual Studio Code
• Buat folder ‘latihan’
• Di Visual Studio Code: File -> open folder ‘latihan’
• Buat file [Link]
Menggunakan Visual Studio Code
• Terminal
• Ketik : python .\[Link]
• Atau klik kanan file -> Run Python File in Terminal
Built-in Function
• Function = Bagian kode yang dapat digunakan kembali yang dibuat untuk menjalankan
tindakan yang ditentukan
• print()
• input()
Latihan
• Buat program menggunakan Visual Studio Code untuk menghitung luas segitiga dengan
alas dan tinggi diinput

• Buat program menggunakan Visual Studio Code untuk console menghitung luas
persegipanjang : luas = panjang * lebar
Built-in Function

[Link]
Built-in Function
# len()
nama = 'Denny Chandra'
print("Panjang string",len(nama))
#filter
umur = [5, 12, 17, 18, 24, 32]
def myFunc(x):
if x < 18:
return False
else:
return True
dewasa = filter(myFunc, umur)
print("kategori dewasa : ")
for x in dewasa:
print(x)
Methods
• Methods = function di dalam kelas

[Link]
Built-in Methods

[Link]
Built-in Methods
#string method
nama = " denny chandra "
print("upper",[Link]())
print("capitalize",[Link]())
print("title",[Link]())
value = "100"
print("isdigit",[Link]())
print("isaplha","abcdef".isalpha())

[Link]
Modules
• Modul Python adalah file yang berisi definisi dan statemen Python.
• Sebuah modul dapat mendefinisikan fungsi, kelas, dan variabel.
• Modul juga dapat menyertakan kode yang dapat dijalankan.
• Pengelompokan kode terkait ke dalam modul membuat kode lebih mudah dipahami dan
digunakan.
• Itu juga membuat kode terorganisir secara logis.

[Link]
Contoh menggunakan Modules : array
• Modul ini mendefinisikan tipe objek yang secara ringkas dapat mewakili
array nilai dasar: characters, integers, angka floating point.
• Array sangat mirip dengan lists, kecuali bahwa jenis objek yang disimpan
di dalamnya dibatasi.
• Tipe ditentukan pada waktu pembuatan objek dengan menggunakan
kode tipe
from array import array
myarray = array('i',[5,6,7,2,3,5])
print(myarray)

[Link]
Tipe Pada Array

[Link]
Membuat Modul
# A simple module, [Link]

"""add x,y."""
def add(x, y):
return (x+y)

"""subtract x,y."""
def subtract(x, y):
return (x-y)

#test_calc.py
# importing module [Link]
import calc

print([Link](10, 2))

[Link]
Package
• Python memungkinkan untuk merangkum beberapa modul dalam satu package.
• Merupakan best practice jika modul-modul ini disatukan secara tematis.
• Berbeda dengan modul, package dapat berisi sejumlah package lain, yang dapat
berisi modul atau package.
• Untuk membuat package, subfolder harus dibuat dalam directory
• Nama folder harus sesuai dengan nama package
• Folder ini dapat berisi file program bernama __init__.py
• File ini berisi kode inisialisasi yang dieksekusi sekali ketika package diimpor.

[Link]
Package

[Link]
Lists
• Digunakan untuk ordered sequence of elements
• Singkatnya, list ini untuk membantu menyimpan data terkait dan
melakukan operasi yang sama pada beberapa nilai sekaligus.
• Tidak seperti string, lists sifatnya mutable (bisa berubah)
my_list = [1, 2, 3]
my_list2 = ["a", "b", "c"]
my_list3 = ["4",2, "book", 5]
alpha_list = list((1,2,3))
print(alpha_list)

[Link]
Lists

[Link]
Lists
my_list = [1, 3, 4,2]
my_list.append(5)
print(my_list)
my_list.reverse()
print(my_list)
my_list.sort()
print(my_list)
my_list.sort(reverse=True)
print(my_list)
#combine lists
my_list2 = ["a", "b", "c"]
combo_list = my_list + my_list2
print(combo_list)
combo_list.sort()

[Link]
Tuple
• Digunakan untuk ordered sequence of elements
• Singkatnya, list ini untuk membantu menyimpan data terkait dan
melakukan operasi yang sama pada beberapa nilai sekaligus.
• Tidak seperti lists, tuple sifatnya immutable (tidak bisa berubah)
• Operasinya lebih cepat dari lists

[Link]
Tuple
my_tupple = (0,1,2,3,4,5,6,7,8,9,10)
print(my_tupple)
print(my_tupple[0])
print(my_tupple[0:3])
print(my_tupple[0:10:2])

[Link]
Dictionaries
• Dictionaries menyimpan indeks dengan kunci yang dipetakan
ke nilai tertentu.
• Sifatnya mutable
new_dict = {
"brand": "Honda",
"model": "Civic",
"year": 1995
}
print(new_dict)
new_dict["year"] = 2000
print(new_dict)
#menampilkan berdasarkan key
print(new_dict["brand"])

[Link]
Conditional
• If
• Elif
• If Else
• If Not
nilai = 50
#if
if nilai > 60:
print("lulus")
#elif, utk kondisi lain
elif nilai == 60:
print("remedial")
#jika tidak ada di kondisi diatas
else:
print("sampai jumpa di semester pendek")

new_list = [1, 2, 3, 4]
x = 1
if x not in new_list:
print("'x' bukan di list, so this is True!")

[Link]
Switch Case?
• Tidak ada bentuk switch case
• Alternati menggunakan Dictionary Mapping
# This code runs only in python 3.10 or above versions
def number_to_string(argument):
match argument:
case 0:
return "zero"
case 1:
return "one"
case 2:
return "two"
case default:
return "something"

result = number_to_string(0)
print(result)

[Link]
Loops
• while
# while loop
count = 0
while (count < 3):
count = count + 1
print("Hello Geek")

a = [1, 2, 3, 4]
while a:
print([Link]())
else:
print("done")

[Link]
Contoh Lain (while)
• Do-While
while True:
# Code to be executed
user_input = input("Enter 'q' to quit: ")
if user_input == 'q':
break

• While
user_input = input("Enter 'q' to quit: ")

while user_input != 'q':

# Code to be executed
user_input = input("Enter 'q' to quit: ")

[Link]
Loops
• for
# Iterating over a list
l = ["a", "b", "c"]
for i in l:
print(i)

#continue
for letter in 'abcdef':
if letter == 'b' or letter == 'd':
continue
print('Current Letter without b,d :', letter)

#break
for letter in 'abcdef':
if letter == 'd':
break
print('Current Letter before break :', letter)

#pass
for letter in 'abcdef':
pass
print('last letter', letter)

[Link]
Loops
new_dict = {
"brand": "Honda",
"model": "Civic",
"year": 1995
}

#print all key names in the dictionary

for x in new_dict:
print(x)

#print all values in the dictionary

for x in new_dict:
print(new_dict[x])

#loop through both keys and values

for x, y in new_dict.items():
print(x, y)

[Link]
Latihan
• Buat program untuk menampilkan bilangan genap dari 2 s.d 100 menggunakan
for dan range (range([start], stop, [step]))
• Buat program untuk menampilkan bilangan ganjil dari 99 s.d 1

[Link]
OOP
• Hampir semua elemen di Python adalah Object
• Class = blue print untuk membuat object
• Object = instansiasi/perwujudan dari Class

[Link]
OOP – membuat class
#[Link]
class Person(object):
def __init__(self,nama,alamat):
[Link] = nama
[Link] = alamat

def tampil(self):
print('nama = ',[Link],'alamat = ',[Link])

[Link]
OOP – membuat object
#test_person.py

from person import Person

person = Person("denny","bandung")
[Link]()

[Link]
OOP – membuat subclass
#[Link]
from person import Person
class Siswa(Person):
def __init__(self, nama, alamat,nim):
super().__init__(nama, alamat)
[Link] = nim

def tampil(self):
print('nama = ',[Link],'alamat = ',[Link],'nim = ',[Link])

[Link]
OOP – membuat object dari subclass
#test_siswa.py

from siswa import Siswa

siswa = Siswa("denny","bandung","12345")
[Link]()

[Link]
Latihan
• Buat class : Vehicle dengan property make,model,year dan 1 function
start_engine.function start_engine melakukan print di console untuk menampilkan
propertynya
• Buat class Car extends Vehicle, definisikan ulang function start_engine
• Buat class MotorCycle extends Vehicle, definisikan ulang function start_engine
• Buat object dari Car dan Motorcycle kemudian panggil function start_engine
Tanya Jawab, diskusi
[Link]

HTML,CSS, JavaScript
Istilah Pada Web
• Halaman web (web page)
Halaman yang digunakan untuk menampilkan informasi-informasi yang
terdapat di web.
• Situs web (web site)
Sekumpulan halaman web milik seseorang, perusahaan atau instansi yang
dikumpulkan dan diletakkan dalam web server.
• Homepage
Istilah untuk menyebut halaman pertama yang akan muncul jika sebuah
situs web diakses.
Istilah Pada Web
• Hyperlink atau Link
Penghubung antar halaman web.
• URL (Uniform Resource Locator)
Alamat suatu dokumen atau situs web yang bersifat unik dan khas, contoh :
• [Link]
• [Link]
• [Link]
Arsitektur Client-Server
Teknologi Web Client - Server
• Teknologi Web Pada Sisi Client
Pemrosesan kode program dilakukan di client.
Contoh : JavaScript,TypeScript, Angular, ReactJS, VueJS
• Teknologi Web Pada Sisi Server
Pemrosesan kode program dilakukan di server.
Contoh : PHP, JSP, ASP, NodeJS,Python,Java Servlet
HTML (Hypertext Markup Language)
• HTML Merupakan bahasa standard yang di gunakan untuk membuat
dokumen web .
• Kemampuan HTML :
• Membuat tampilan dari halaman web.
• Membuat form.
• Menambahkan objek-objek seperti gambar, audio, video, animasi, dll.
Tag HTML
• Tag adalah kode-kode yang digunakan untuk men-setting dokumen web.
• Nama tag ditulis di dalam tanda “<” dan “>” dan untuk tag penutup
ditambahkan tanda “/”.
• Boleh ditulis dengan huruf besar maupun kecil.
• Digunakan sepasang, contoh : <form> dan </form>.
• Ada tag yang tidak perlu sepasang, contoh : <br/>, <hr/>, <img/>, dll.
Struktur HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<link rel="icon" href="" type="image/x-
icon"/>
</head>
<body>
<div>Hello World</div>
</body>
</html>
Struktur HTML
• Tag <html>…</html> berfungsi untuk menyatakan bahwa dokumen
tersebut adalah dokumen HTML.
• Tag <head>…</head> berisi kode-kode untuk menuliskan
keterangan/informasi tentang dokumen HTML tersebut.
• Tag <title>…</title> digunakan untuk membuat judul halaman Web (web
page).
• Tag <body>…</body> berisi tag-tag untuk isi atau layout tampilan
halaman web.
• Tag <meta> mendefinisikan metadata tentang dokumen HTML.
Metadata adalah data (informasi) tentang data.
CSS (Cascading Style Sheet)
• CSS adalah kumpulan format yang digunakan untuk mengatur tampilan
atau isi dari sebuah halaman web menjadi lebih fleksibel.
• Elemen dasar CSS :
1. Selector
Adalah tag/elemen normal pada HTML
2. Deklarasi
Adalah satu atau beberapa perintah/nilai dari CSS yang menunjukkan
type/bentuk yang diaplikasikan pada selector.
Pengkodean CSS
• Inline style • Internal style
<div style="font-family: verdana; <head>
font-size: 12px"> <style type="text/css">
Hello World div { font-family: verdana; font-size:
</div> 20px }
body { background-color: yellow }
</style>
</head>
Pengkodean CSS
• Eksternal style
<head>
<link
href="[Link]
css" rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLA
SjC" crossorigin="anonymous">
</head>

[Link]
Selector CSS
• Class menggunakan titik
.embedded{
font-size: 20px;
color: red;
}
• Id menggunakan #
#div1{
font-size: 20px;
color: green;
}
JavaScript
• JavaScript diciptakan oleh Brendan Eich pada tahun 1995, dan menjadi standar ECMA
pada tahun 1997.
• ECMA-262 adalah nama resmi dari standar. ECMAScript adalah nama resmi dari bahasa
tersebut.
• TypeScript adalah strongly typed programming language yang dibuat diatas JavaScript.
Library/Framework pada Front End
• JQuery = Library JavaScript
• BootStrap = Framework HTML, CSS, Javascript
• Angular = Framework JavaScript
• ReactJS = Library JavaScript
• VueJS = Framework JavaScript
• Dan masih banyak lagi yang lainnya
[Link]
Tugas
• Buat 3 buah halaman html dalam 1 folder
• [Link]
• [Link]
• [Link]
• Tambahkan style (slide 67)
• Buat navigasi dari [Link] ke [Link] dan ke [Link] dan sebaliknya
• Buat menjadi halaman profile masing-masing.
• [Link] adalah halaman utama
• [Link] mendeskripsikan dirimu
• [Link] adalah kontakmu
Django Introduction & MVT Pattern
Django
• Django adalah framework web open source gratis untuk membangun Aplikasi web
berbasis Python yang modern.
• Django membantu developer dengan cepat dalam membangun aplikasi web dengan
mengabstraksikan banyak pekerjaan yang berulang dalam membangun situs web,
seperti menghubungkan ke database, menangani keamanan, mengaktifkan otentikasi
pengguna, membuat rute URL,menampilkan konten pada halaman melalui template
dan form,
• Mendukung banyak basis data dan menyiapkan antarmuka admin.
• Dengan Django maka developer akan fokus kepada fungsional aplikasi daripada
mengerjakan hal yang berulang-ulang dalam membuat web yang standar
Django
• Django merupakan salah satu framework yang banyak digunakan perusahaan besar
seperti Instagram, Pinterest, Mozilla dan National Geographic, DropBox dan lainnya.
• Django sangat mudah untuk digunakan oleh start up untuk membangun sebuah project
[Link]
django#:~:text=django%20lebih%20dulu.-
,Pengenalan%20Django,dan%20cepat%20untuk%20melakukan%20pengembangan.
The Power Of Django
• Object-relational mapper
• Automatic admin interface
• Robust template system
• Quick internationalization
Instalasi Django
• Menggunakan command prompt ketik : pip (untuk mac pip3)
• pip adalah package manager untuk python package
• pip sudah otomatis ada di dalam python versi 3.4 ke atas
Instalasi Django
• Menggunakan command prompt ketik : pip install Django==4.1.3
• Kemudian cek versi django yang terinstall
Django MVT
• MVT (Model View Template) adalah software design pattern.
• Ada tiga komponen penting yaitu Model, View dan Template.
• Model membantu menangani database, Template menangani UI (User Interface) dan
View digunakan untuk menangani proses bisnis dan menghubungkan antara model dan
template
[Link]
Django MVT

[Link]
Membuat Project
• Buat folder di drive c atau drive lain misal c:\projectdjango
• Klik kanan di c , New -> Folder

• Rename jadi projectdjango

Membuat Project
• Menggunakan command prompt arahkan ke folder tersebut

• Ketik : python –m django startproject bookreviews (ini perintah untuk membuat

project)
Membuat Project
• Rename folder di c:\projectdjango\bookreviews menjadi
c:\projectdjango\bookreviewsproject
• Berikut ini strukturnya:
Membuat Project
• Menggunakan command prompt menuju ke folder bookreviews : cd
bookreviewsproject
• Ketik : python [Link] runserver (Ini perintah untuk menjalankan project)
Jika Membuat Project selain di C (misal di drive F)
• Buat folder di drive F atau drive lain misal F:\projectdjango
• Klik kanan di F , New -> Folder

• Rename jadi projectdjango

Membuat Project (misal di F)
• Menggunakan command prompt arahkan ke folder tersebut

• Ketik : python –m django startproject bookreviews

Membuat Project
• Rename folder di F:\projectdjango\bookreviews menjadi
F:\projectdjango\bookreviewsproject
• Menggunakan command prompt menuju ke folder bookreviews : cd
bookreviewsproject
• Ketik : python [Link] runserver (Ini perintah untuk menjalankan project)
Membuat Project
• Buka chrome ketik : [Link]
Visual Studio Code
• Buka Visual Studio Code
• File -> Open Folder arahkan ke folder bookreviewsproject
• Klik Select Folder
Struktur Direktori
Struktur Direktori
• __pycache__: Folder ini menyimpan bytecode yang dikompilasi saat kita membuat proyek.
Kita dapat mengabaikan folder ini. Tujuan folder ini adalah untuk membuat proyek lebih
cepat dijalankan dengan men-cache kode yang dikompilasi yang kemudian dapat dengan
mudah dieksekusi.
• __init__.py: File ini menetapkan apa yang harus dijalankan ketika Django diluncurkan
untuk pertama kali
• [Link]: File ini memungkinkan Antarmuka Gateway Server Asynchronous opsional (ASGI)
untuk dijalankan. ASGI menyediakan antarmuka antara server web dan kerangka kerja
Python yang bekerja secara asinkron.
Struktur Direktori
• [Link]: File [Link] adalah file penting yang mengontrol pengaturan proyek. File
ini berisi beberapa properti.
• BASE_DIR: Menentukan lokasi proyek di drive komputer.
• SECRET_KEY: Digunakan ketika kita memiliki data yang mengalir masuk dan keluar dari
aplikasi [Link] pernah berbagi ini dengan orang lain.
• DEBUG: Situs dapat berjalan dalam mode debug atau tidak. Dalam mode debug, kita
mendapatkan informasi terperinci tentang kesalahan – misalnya, jika mencoba
menjalankan [Link] di browser, kita akan melihat halaman tidak
ditemukan(404)
• INSTALLED_APPS: Tempat untuk modul/aplikasi di register di aplikasi web
• MIDDLEWARE: Mengacu pada fungsi bawaan Django untuk memproses aplikasi
request/response, yang mencakup otentikasi, session, dan keamanan.
Struktur Direktori
• [Link]: File [Link] adalah file penting yang mengontrol pengaturan proyek. File
ini berisi beberapa properti.
• ROOT_URLCONF: Menentukan di mana URL berada.
• TEMPLATES: Mendefinisikan kelas template, daftar direktori tempat komputer harus
mencari file template, dan pengaturan template tertentu.
• AUTH_PASSWORD_VALIDATORS: menentukan validasi yang diinginkan pada password
– misalnya, panjang minimum. Ada beberapa properti lain di [Link], seperti
LANGUAGE_CODE dan TIME_ZONE, tetapi kita hanya fokud pada properti yang lebih
penting.
Struktur Direktori
• [Link]: File ini memberitahu Django halaman mana yang akan dirender sebagai response
terhadap browser atau permintaan URL. Misalnya, ketika seseorang memasuki
[Link] URL, permintaan masuk ke [Link] dan dialihkan ke halaman
berdasarkan jalur yang ditentukan di sana.
• [Link]: File ini adalah singkatan dari Web Server Gateway Interface (WSGI) dan
membantu Django melayani halaman web.
• [Link]: File ini digunakan internal oleh Django, kita tidak perlu melakukan apapun di
file ini
• db.sqlite3 : Adalah File database SQLITE yang merupakan bawaan dan digunakan selema
development
Django Project Structure
• Sebuah project django dapat memiliki beberapa apps
Django Project Structure
• Setiap apps kita buat, kemudian di daftarkan di file [Link] pada bagian
INSTALLED_APPS
App book
• Sebagai awal, kita akan membuat apps Buku di dalam project BookReviews
• Kita gunakan terminal pada Visual Studio Code dengan memilih menu View -> Terminal
• Ketik : python [Link] startapp book
App book
• Setelah perintah tersebut maka akan terbentuk folder book sebagai berikut:
App book
• Daftarkan app book pada bookreviews/[Link]
Struktur App book
• Folder migrations adalah tempat Django menyimpan migrasi, atau perubahan pada
basis data.
• __init__.py memberi tahu Python bahwa app book adalah sebuah package.
• [Link] adalah tempat untuk mendaftarkan model dengan aplikasi admin Django.
• [Link] adalah file konfigurasi umum untuk aplikasi Django.
• [Link] adalah modul yang berisi model untuk aplikasi.
• [Link] berisi prosedur pengujian yang dijalankan saat menguji aplikasi.
• [Link] adalah modul yang berisi tampilan untuk aplikasi.
Membuat halaman Home Page
• Buka file [Link] di folder bookreviews

from [Link] import admin

from [Link] import path
from book import views as bookView

urlpatterns = [
path('admin/', [Link]),
path('',[Link])
]
Membuat halaman Home Page
• Buka file [Link] di folder book

from [Link] import render

from [Link] import HttpResponse

# Create your views here.

def home(request):
return HttpResponse('<h1>Welcome to Home Page</h1>')
Membuat halaman Home Page
• Pada terminal jalankan perintah : python .\[Link] runserver
Membuat halaman Home Page
• Buka browser dan ketik : [Link]
Latihan : membuat halaman About
Membuat Templates (HTML)
• Di dalam folder book, buat folder templates
Membuat Templates (HTML)
• Di dalam folder templates buat file [Link], klik kanan folder templates -> New File
Membuat Templates (HTML)
• Isi [Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Movies App</title>
<meta name="description" content="Aplikasi BookReview"/>
<meta name="keywords" content="book review,katalog buku"/>
</head>
<body>
<h1>Welcome to Home Page</h1>
<div>Konten disini</div>
</body>
</html>
Membuat Templates (HTML)
• Buka file book/[Link]
from [Link] import render
from [Link] import HttpResponse

# Create your views here.

def home(request):
return render(request,'[Link]')

def about(request):
return HttpResponse('<h1>Welcome to About Page</h1>')
Latihan : membuat Templates (HTML) untuk halaman about/
• Buat file [Link] di dalam folder book/templates
• Isi [Link] dengan html seperti [Link], ubah isinya
• Ubah book/[Link] supaya method about me-render [Link]
Passing data ke template
• Buka file book/[Link]
from [Link] import render
from [Link] import HttpResponse

# Create your views here.

def home(request):
return render(request,'[Link]',{'name' : 'Denny Chandra'})

def about(request):
return render(request,'[Link]')
Passing data ke template
• Buat file book/templates/[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Movies App</title>
<meta name="description" content="Aplikasi BookReview"/>
<meta name="keywords" content="book review,katalog buku"/>
</head>
<body>
<h1>Welcome to Home Page {{ name }}</h1>
<div>Konten disini</div>
</body>
</html>
Latihan Passing data ke template about
Membuat Hyperlink
• Buka file bookreviews/[Link]

from [Link] import admin

from [Link] import path
from book import views as bookView

urlpatterns = [
path('admin/', [Link]),
path('',[Link],name='home'),
path('about/',[Link],name='about')
]
Membuat Hyperlink
• Buka file book/templates/[Link] dan [Link]
• Beri potongan kode berikut setelah <body>
<a href="{% url 'home' %}">Home</a>
<a href="{% url 'about' %}">About</a>
Menambahkan bootstrap di templates
• Ke alamat [Link]
• Klik Icon disk sebelah kanan
Menambahkan bootstrap di templates
• Paste di templates [Link] dan [Link]
Menambahkan bootstrap di templates
• Tambahkan elemen <div class=“container”> setelah body
<body>
<div class="container">
<a href="{% url 'home' %}">Home</a>
<a href="{% url 'about' %}">About</a>
<h1>Welcome to Home Page {{ name }}</h1>
<div>Konten disini</div>
</div>
</body>
Menambahkan bootstrap di templates
Menambahkan form search di HomePage
• Menggunakan VSCode buka book/templates/[Link]
<body>
<div class="container">
<a href="{% url 'home' %}">Home</a>
<a href="{% url 'about' %}">About</a>
<form action="">
<div class="mb-3">
<label class="form-label">Cari Buku:</label>
<input type="text" name="judul" class="form-control" />
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
</body>
Menambahkan form search di HomePage
Menambahkan form search di HomePage
• Menggunakan VSCode buka book/[Link]
from [Link] import render
from [Link] import HttpResponse

# Create your views here.

def home(request):
searchJudul = [Link]('judul')
return render(request, '[Link]', {‘searchJudul':searchJudul})

def about(request):
return render(request,'[Link]',{'appName' : 'BookReview'})
Menambahkan form search di HomePage
• Menggunakan VSCode buka book/templates/[Link]
<div class="container">
<a href="{% url 'home' %}">Home</a>
<a href="{% url 'about' %}">About</a>
<form action="">
<div class="mb-3">
<label class="form-label">Cari Buku:</label>
<input type="text" name="judul" class="form-control" />
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
{% if searchJudul %}
Pencarian untuk <strong>{{ searchJudul }}</strong>
{% endif %}
</div>
Menambahkan form search di HomePage
Referensi Django Template Language
• [Link]
Resume command
• python –m django startproject bookreviews (untuk membuat project)
• python [Link] runserver (untuk menjalankan project)
• python [Link] startapp book (untuk membuat app)
Model
• Membuat model Buku
• Manage migrations
• Mengakses Django admin
• Mengkonfigurasi gambar
• Menyimpan gambar (upload)
• Menambah model di admin
Model
• Model adalah object yang dipetakan ke database
• Ketika membuat model, Django melakukan eksekusi SQL untuk membuat
tabel yang sesuai dalam database tanpa kita harus menulis satu baris pun
dari SQL
Membuat Model Buku
• Buka menggunakan VSCode book/[Link]
from [Link] import models

# Create your models here.

class Book([Link]):
judul = [Link](max_length=250)
isbn = [Link](max_length=13)
pengarang = [Link](max_length=250)
sinopsis = [Link](blank=True,null=True) #null = DB, blank = form
tanggal_rilis = [Link]()
jumlah_halaman = [Link]()
gambar = [Link](upload_to='movie/images/’)

def __str__(self) -> str:

return [Link]
Referensi Django Model (Field)
Referensi Django Model (Field)
Referensi Django Model (Field)
Referensi Django Model (Field)
Referensi Django Model (Field Options)

[Link]
Referensi Django Model
• [Link]
Instalasi Pillow (library Image)
• Pillow adalah library untuk melakukan image processing
• Pada command Prompt ketik : pip install pillow
Managing Migrations
• Migrations bertujuan untuk men-generate skema database
• Perintah migrate akan membuat database berdasarkan default setting
• Ketik : python [Link] migrate
Managing Migrations
• Membuat migrations untuk Book
• Ketik : python [Link] makemigrations
Managing Migrations
• Jalankan migrations
• Ketik : python [Link] migrate
Managing Migrations
• Jadi setiap penambahan model harus melakukan command
• python [Link] makemigrations
• python [Link] migrate
Mengakses Django admin
• Alamat admin sudah definisikan di awal (default) di bookreviews/[Link]

• Untuk mengakses maka jalankan aplikasi : python [Link] runserver

Mengakses Django admin
• Buka browser ketik : [Link]
Mengakses Django admin
• Membuat superuser yang akan digunakan untuk login admin
• Ketik : python [Link] createsuperuser
• Isi username,email,password
Mengakses Django admin
• Login menggunakan user yang dibuat tadi
Mengakses Django admin
• Tampilan Django admin
Mengkonfigurasi setting gambar
• Buka menggunakan VSCode buka bookreviews/[Link]
• Tambahkan kode berikut paling bawah
MEDIA_ROOT = [Link](BASE_DIR,'media')
MEDIA_URL = '/media/'
• Tambahkan paling atas
import os
Mengkonfigurasi setting gambar
• Buka menggunakan VSCode buka bookreviews/[Link]
• Sesuaikan kode berikut
from [Link] import admin
from [Link] import path
from book import views as bookView
from [Link] import static
from [Link] import settings

urlpatterns = [
path('admin/', [Link]),
path('',[Link],name='home'),
path('about/',[Link],name='about')
]
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
Menambahkan model Book ke admin
• Buka menggunakan VSCode file : book/[Link]
from [Link] import admin
from .models import Book

# Register your models here.

[Link](Book)
CRUD Buku
• List Buku
CRUD Buku
• Input Buku
Resume command

• python [Link] migrate (untuk melakukan inisialisasi database)

• python [Link] makemigrations (untuk melakukan migrasi model)
• python [Link] createsuperuser (untuk setting superuser)
Resume command setiap ada model baru

• python [Link] makemigrations (untuk melakukan migrasi model)

• python [Link] migrate (untuk melakukan inisialisasi database)
Resume command instalasi

• Instalasi ini hanya dilakukan sekali di komputer, kecuali jika ingin update
• pip install Django==4.1.3 (untuk install Django)
• pip install pillow (untuk install library pillow)
Troubelshooting

• Command pyton atau py tidak dikenali, pastikan ketika instalasi sepert ini:
Troubelshooting

• Command pip tidak dikenali, bisa dengan custom install seperti gambar dibawah
VSCode Extension: SQLite

• Untuk melihat isi dari db.sqlite3 maka bisa menggunakan extension SQLite
VSCode Extension: SQLite

• Klik kanan db.sqlite3 -> Open Database

VSCode Extension: SQLite
• Akan muncul SQLite Explorer
VSCode Extension: SQLite
• Klik Kanan pada tabel book_book -> New Query [Select]
VSCode Extension: SQLite
• Akan muncul SQL Editor lalu ketikkan kode SQL untuk operasi ke tabel book_book
• Berikut SQL untuk menghapus semua data di tabel book_book
Relasi antar Model
• Aplikasi BookReviews memiliki 2 tabel publisher dan book
• Relasinya adalah 1 publisher dapat menerbitkan banyak buku (one to Many) atau
banyak buku diterbitkan oleh 1 publisher (many to one)
Model
• Membuat model Publisher
• Melakukan edit model Buku
• Melakukan migrations
File book/[Link]
from [Link] import models
from [Link] import RegexValidator

# Create your models here.

class Publisher([Link]):
nama = [Link](max_length=250)
alamat = [Link](blank=True,null=True)
phone_regex = RegexValidator(regex=r'^\+?1?\d{9,15}$',message="min 8 digit")
telpon = [Link](validators=[phone_regex], max_length=15, blank=True)
email = [Link](blank=True,null=True)
def __str__(self) -> str:
return [Link]
File book/[Link] (lanjutan)
class Book([Link]):
judul = [Link](max_length=250)
isbn = [Link](max_length=13)
pengarang = [Link](max_length=250)
sinopsis = [Link](blank=True,null=True) #null = DB, blank = form
tanggal_rilis = [Link]()
jumlah_halaman = [Link]()
gambar = [Link](upload_to='movie/images/')
publisher = [Link](Publisher,on_delete=[Link])

def __str__(self) -> str:

return [Link]
File book/[Link] (lanjutan)
from [Link] import admin
from .models import Book
from .models import Publisher

# Register your models here.

[Link](Publisher)
[Link](Book)
Lakukan Migration
• Hapus semua data book jika masih ada datanya
• Lakukan eksekusi berikut:
• python [Link] makemigrations
- Jika muncul warning seperti disamping, maka
ketik 1 lalu ketik lagi 1 seperti gambar
disamping

• python [Link] migrate

Hasil di Halaman Admin
Hasil di Halaman Admin
Hasil di Halaman Admin
Halaman Pencarian
• Mengubah book/[Link]
• Mengubah template book/templates/[Link]
File book/[Link] (potongan kode)
def home(request):
searchJudul = [Link]('judul')
if searchJudul:
books = [Link](judul__icontains=searchJudul)
else:
books = [Link]()
return render(request, '[Link]', {'searchJudul':searchJudul,'books' : books})
 File book/templates/[Link] (potongan kode)
{% if searchJudul %}Pencarian untuk <strong>{{ searchJudul }}</strong>{% endif %}
<br/>
<div class="row row-cols-1 row-cols-md-3 g-4">
{% for book in books %}
<div class="col">
<div class="card">
<img alt="" class="card-img-top" src="{{ [Link] }}" />
<div class="card-body">
<h5 class="card-title fw-bold">{{ [Link] }} | {{ [Link] }} | {{ book.tanggal_rilis|date:"d-m-Y" }}</h5>
<p class="card-text">
{{ [Link] }}
<br/>
{{ [Link] }} | {{ book.jumlah_halaman }} | {{ [Link] }}
<a href="{% url 'detail' [Link] %}">
<h5 class="card-title fw-bold">Detail</h5>
</a>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
Hasil halaman home
Hasil pencarian di halaman home
Membuat Halaman Detail (klik detail dari home)
• Buat template book/templates/[Link]
• Buat method detail di book/[Link]
• Buat path di bookreviews/[Link]
Buat template book/templates/[Link]
<div class="card">
<img alt="" class="card-img-top" src="{{ [Link] }}" />
<div class="card-body">
<h5 class="card-title fw-bold">
{{ [Link] }} | {{ [Link] }} | {{ book.tanggal_rilis|date:"d-m-Y" }}
</h5>
<p class="card-text">
{{ [Link] }}
<br/>
{{ [Link] }} | {{ book.jumlah_halaman }} | {{ [Link] }}
</p>
</div>
</div>
Buat method detail di book/[Link] (potongan kode)
• Tambab import from [Link] import get_object_or_404
• Tambah method
def detail(request,book_id):
book = get_object_or_404(Book,pk=book_id)
return render(request,'[Link]',{'book' : book})
Tambah path di bookreviews/[Link]
path('book/<int:book_id>', [Link], name='detail')
Hasil halaman detail
Membuat Base Template (untuk menu)
• Membuat base template untuk menu untuk menghilangkan duplikasi kode
• Buat file di book/templates/[Link]
• Masukkan base template ke setiap halaman (home,about,detail)
Buat file di book/templates/[Link]
<!DOCTYPE html>
<html>
<head>
<title>BookReviews App</title>
<!-- CSS only -->
<link href="[Link]
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"/>
<!-- JavaScript Bundle with Popper -->
<script
src="[Link]
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
Buat file di book/templates/[Link] (lanjutan)
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">BookReview</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
Buat file di book/templates/[Link] (lanjutan)
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<ul class="navbar-nav mb-2 mb-lg-0 d-flex">
<li class="nav-item d-flex justify-content-end">
<a class="nav-link active" aria-current="page" href="{% url 'admin:index' %}">Login</a>
</li>
</ul>

</ul>
</div>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
</body>
</html>
Masukkan base template ke setiap halaman (home,about,detail)
• Ketik paling atas
{% extends '[Link]' %}
{% block content %}

• Ketik paling bawah

{% endblock content %}
Masukkan base template book/[Link]

{% extends '[Link]' %}
{% block content %}

<div class="card">
<img alt="" class="card-img-top" src="{{ [Link] }}" />
<div class="card-body">
<h5 class="card-title fw-bold">
{{ [Link] }} | {{ [Link] }} | {{ book.tanggal_rilis|date:"d-m-Y" }}
</h5>
<p class="card-text">
{{ [Link] }}
<br/>
{{ [Link] }} | {{ book.jumlah_halaman }} | {{ [Link] }}
</p>
</div>
</div>
{% endblock content %}
Hasil implementasi base template
Latihan mini project
• Aplikasi Kantin Sekolah
• Kantin
• nama (input text)
• telpon (input telpon)
• Makanan
• nama (input text)
• harga (input int)
• gambar (input text)
• Stok (input int)
• tersedia (radio button [Tersedia,Tidak Tersedia]
• Kantin ForeignKey(Kantin,on_delete=[Link])
Latihan mini project
• Aplikasi Kantin Sekolah
• Halaman admin CRUD kantin,makanan
• Halaman Home menampilkan makanan kantin bisa search
• Halaman detail adalah detail dari makanan
Langkah-langkah
1. python –m django startproject appkantin

2. Rename folder (perhatikan : appkantinproject)

Langkah-langkah
3. Buka Visual Studio Code dengan New Window untuk dapat membuka
2 project (bookreviews dan appkantin). Membuka 2 window project
memudahkan untuk melihat project bookreviews sebagai referensi
Langkah-langkah
4. Open Folder
Langkah-langkah
5. Pada VSCode View -> Terminal
Langkah-langkah
6. Ketik di terminal : python [Link] runserver. Sebelumnya
pastikan bookreviews sudah dimatikan (ctrl + c) pada terminal di project
bookreviews
Langkah-langkah
7. Buka browser
Langkah-langkah
8. Buka cmd, buat app makanan di folder appkantinproject
Langkah-langkah
9. Cek di VSCode
Langkah-langkah
10. Daftarkan app ‘makanan’ di [Link]
Langkah-langkah
11. Buat Model (makanan/[Link])
Langkah-langkah
12. Command : python [Link] migrate
Langkah-langkah
13. Command : python [Link] makemigrations
Langkah-langkah
13. Command : python [Link] migrate
Langkah-langkah
14. Create super user untuk admin : python [Link]
createsuperuser. Misal username : admin, password:admin
Langkah-langkah
15. Setting image asset (appkantin/[Link])
Buka menggunakan VSCode buka appkantin/[Link]
Tambahkan kode berikut paling bawah
MEDIA_ROOT = [Link](BASE_DIR,'media')
MEDIA_URL = '/media/'

Tambahkan paling atas

import os
Langkah-langkah
16. Setting image asset (appkantin/[Link])

from [Link] import admin

from [Link] import path
from [Link] import static
from [Link] import settings

urlpatterns = [
path('admin/', [Link]),
]
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
Langkah-langkah
17. Register model di makanan/[Link]
from [Link] import admin
from .models import Kantin
from .models import Makanan
# Register your models here.
[Link](Kantin)
[Link](Makanan)
Langkah-langkah
18. Login (pastikan server jalan, jika tidak jalankan di terminal VSCode :
python [Link] runserver). CRUD kantin, makanan sudah selesai.
Membuat View di Home
19. Membuat view di makanan/[Link]
from [Link] import render
from [Link] import HttpResponse
from .models import Makanan
from [Link] import get_object_or_404

# Create your views here.

def home(request):
searchMakanan = [Link]('nama')
if searchMakanan:
makanans = [Link](nama__icontains=searchMakanan)
else:
makanans = [Link]()
return render(request, '[Link]', {'searchMakanan':searchMakanan,'makanans' : makanans})

def detail(request,makanan_id):
makanan = get_object_or_404(Makanan,pk=makanan_id)
return render(request,'[Link]',{'makanan' : makanan})
Langkah-langkah
20. Siapkan url (appkantin/[Link])
from [Link] import admin
from [Link] import path
from [Link] import static
from [Link] import settings
from makanan import views as makananView

urlpatterns = [
path('admin/', [Link]),
path('',[Link],name='home'),
path('makanan/<int:makanan_id>', [Link],
name='detail')
]
urlpatterns +=
static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
Langkah-langkah
21. Seting template (appkantin/[Link])
Langkah-langkah
22. Buat template untuk [Link],[Link] dan [Link] (File
kosong dulu)
Langkah-langkah
23. Buat template untuk [Link]
• Copy dari [Link] di project bookreviews
• Sesuaikan
Langkah-langkah
24. Buat template untuk [Link]
• Copy dari [Link] di project bookreviews
• Sesuaikan
Langkah-langkah
25. Buat template untuk [Link]
• Copy dari [Link] di project bookreviews
• Sesuaikan
Materi Tambahan (static file) pada project (bookreviews)
• Menambahkan file statis (bisa gambar,css,javascript,pdf)
• Misal akan menambahkan icon dari :
[Link]
book_81467?related_id=81467&origin=pack
• Setelah download nama filenya ‘[Link]’
• Buat folder di dalam bookreviews (static > images)
Materi Tambahan (static file)
• Letakkan file ‘[Link]’ di dalam folder images

• Buka file bookreviews/[Link], letakkan kode berikut

paling bawah
STATICFILES_DIRS = [
BASE_DIR / 'bookreviews/static/',
]
Materi Tambahan (static file)
• Mengakses file static di template ([Link])
<a class="navbar-brand" href="{% url 'home' %}">
{% load static %}
<img src="{% static 'images/[Link]' %}"
alt="" width="30" height="24"
class="d-inline-block align-text-top" />
BookReview</a>
Materi Tambahan melakukan migrasi ke database MySQL
• Asumsi sudah ada database di MySQL dengan nama ‘bookreviews’
• Install : pip install pymysql
• Letakkan kode berikut di bookreviews/__init__.py
import pymysql
pymysql.install_as_MySQLdb()

• Ganti property database di [Link]

DATABASES = {
'default': {
'ENGINE': '[Link]',
'NAME': 'bookreviews',
'USER': 'root',
'PASSWORD': '',
'HOST': 'localhost', # Or an IP Address that your DB is hosted on
'PORT': '3306',
}
}
Materi Tambahan melakukan migrasi ke database MySQL
• Lakukan migrasi : python [Link] migrate
TERIMAKASIH.