Pelatihan Pembuatan Aplikasi

Sederhana Menggunakan
Django 2.1.5

ARISSA APRILIA NURCAHYANI

BTI UMS
Membuat Aplikasi Sederhana dengan Django 2.1.5
1 Pengantar
Django adalah sebuah framework full-stack untuk membuat aplikasi web dengan bahasa pemrograman Python.
Framework akan membantu kita membuat web lebih cepat, dibandingkan menulis kode dari nol. Pemrograman django
meliputi sisi front-end (sisi yang dilihat oleh pengguna) dan juga back-end (sisi logika, algoritma dan database.

Django menggunakan konsep Model, Views, Template (MVT) dimana:

a) Model berisi kelas-kelas yang menggambarkan table pada database.

b) Views berisi kumpulan function di dalam suatu modul yang akan memproses request dan memberikan response
seperti controller di MVC
c) Template berisi file-file HTML yang nantinya akan dilihat langsung oleh user.

Jadi, request dari user dalam bentuk URL, di teruskan ke views. Selanjutnya views akan menulis/mengambil data
dari models. Kemudian mengirimkan data yang telah diproses ke template untuk diracik dan ditampilkan sebagai respon
ke user. Secara sederhana dapat digambarkan:

2 Apa yang dibutuhkan?

a) Niat
b) Python
c) Pip
d) Virtual Environment
e) Command Prompt/Terminal
f) IDE/Code Editor
3 Installasi
3.1 Install Python
4 Membuat Virtual Environment
Masuk ke direktori yang kita inginkan untuk menyimpan project, misalkan Documents dengan nama folder Aplikasi.

Untuk membuat virtual environment, masukkan command:

python -m venv aplikasi_env

Untuk mengaktifkan virtual environment yang sebelumnya telah kita buat, dapat kita lakukan dengan command:

C:\Users\LENOVO\Documents\aplikasi>aplikasi_env\Scripts\activate

Jika nama virtual environment sudah muncul sebagai prefix, berarti virtual environment berhasil diaktifkan.
5 Menginstall Django
Pada tahap ini akan kita lakukan installasi Django dengan menggunakan PIP. Namun, sebelumnya harus kita pastikan
menggunakan pip versi terbaru. Upgrade pip dapat dilakukan dengan command:

(aplikasi_env) C:\Users\LENOVO\Documents\aplikasi>python -m pip install --

upgrade pip

Kemudian lakukan download dan install Django dengan command:

(aplikasi_env) C:\Users\LENOVO\Documents\aplikasi>pip install Django

6 Membuat Django Project

Buat sebuah project missal “Mahasiswa” dengan command:

(aplikasi_env) C:\Users\LENOVO\Documents\aplikasi>django-admin
startproject mahasiswa

Keterangan:
 startproject adalah perintah untuk membuat project;
 mahasiswa adalah nama direktori project-nya.
 Jika project berhasil dibuat, maka akan muncul folder “mahasiswa” sesuai dengan nama project yang kita buat tadi.
Di dalam direktori mahasiswa akan kita dapatkan struktur sebagai berikut:

Ada beberapa file dan direktori yang harus kita ketahui:

 Direktori mahasiswa/ adalah root direktori yang berisi seluruh file dari project.
 File [Link] adalah program untuk mengelola project Django. Kita akan sering mengeksekusi [Link] saat
ingin melakukan sesuatu terhadap project, misalnya: menjalankan server, melakukan migrasi, membuat aplikasi,
dll.
 File mahasiswa/__init__.py adalah sebuah file kosong yang menyatakan direktori ini adalah sebuah paket
(python package).
 File mahasiswa /[Link] adalah tempat kita mengkonfigurasi project.
 File mahasiswa /[Link] adalah tempat kita mendeklarasikan URL.
 File mahasiswa /[Link] adalah entri point untuk WSGI-compatible

7 Menjalankan Project
Project yang telah kita buat tadi dapat dijalankan dengan command:

(aplikasi_env) C:\Users\LENOVO\Documents\aplikasi\mahasiswa>python
[Link] runserver

Masuk ke url [Link] dengan browser, dan akan kita jumpai halaman seperti dibawah ini:
8 Menyesuaikan Setting
Buka file [Link] pada direktori mahasiswa. Kemudian lakukan penyesuaian sesuai dengan yang kita inginkan.
Misalkan:

a. Bahasa dan TimeZone

b. Database
Django tlah menyediakan database default/bawaan yaitu SQLite.

9 Membuat Aplikasi Data Mahasiswa

Project berhasil dijalankan, artinya kita siap untuk memulai membuat aplikasi di dalam project kita. Langkah pertama
yang harus dilakukan adalah:

9.1 Membuat Aplikasi

Buat aplikasi misal “data_mahasiswa” dengan command:
 (aplikasi_env) C:\Users\LENOVO\Documents\aplikasi\mahasiswa>python
[Link] startapp data_mahasiswa

Python secara otomatis akan membuat folder data_mahasiswa beserta file-file yang akan dibutuhkan untuk
pengerjaan aplikasi data_mahasiswa.

9.2 Menginstall aplikasi ke project

Buka file [Link] pada direktori mahasiswa dengan code editor, kemudian edit bagian INSTALLED_APPS, tambahkan
‘data_mahasiswa’.
9.3 Membuat Model Data Mahasiswa
Pada tahap ini akan kita lakukan pembuatan database data mahasiswa. Pertama kita definisikan filed-field yang
diperlukan pada file [Link]:

from [Link] import models

# Create your models here.
JENIS_KELAMIN = (
(0, 'Laki-laki'),
(1, 'Perempuan'),
)

class DataMahasiswa([Link]):
nama = [Link](max_length=200)
nim = [Link](max_length=10, unique=True)
tempat_lahir = [Link](max_length=200)
tanggal_lahir = [Link]()
no_hp = [Link](null=True, blank=True)
alamat = [Link]()
jenis_kelamin=[Link](choice s=JENIS_KELAMIN)

def __str__(self):
return [Link]

Pada bagian bawah kita melihat method __str__(self) yang akan menampilkan representasi object dalam bentuk string
yang dapat dibaca.

9.4 Migrasi Database

Setelah models dibuat, langkah selanjutnya adalah melakukan migrasi database. migrasi database merupakan sebuah
cara untuk mengubah data di database dengan mengikuti suatu skema. Django menyediakan pembuatan skema
migrasi secara otomatis dengan menggunakan command:

(aplikasi_env) C:\Users\LENOVO\Documents\aplikasi\mahasiswa>python
[Link] makemigrations
 Secara otomatis, akan tercipta file skema dengan nama 0001_initial.py.

Untuk mengaplikasikan skema tersebut masukkan command:

(aplikasi_env) C:\Users\LENOVO\Documents\aplikasi\mahasiswa>python
[Link] migrate

9.1 Django Admin

Django telah menyediakan halaman admin yang dapat kita gunakan untuk pengelolaan data. Django admin dapat diakses
oleh user dengan role “SuperUser”. Halaman Django admin dapat diakses melalui url:
[Link]
Kita akan diarahkan ke halaman login. Pertama kita harus membuat SuperUser untuk dapat masuk ke halaman Django
Admin. Pembuatan superuser dapat dilakukan dengan command:

(aplikasi_env) C:\Users\LENOVO\Documents\aplikasi\mahasiswa>python
[Link] createsuperuser

Kemudian login dengan user yang baru saja kita buat. Setelah berhasil masuk kita akan berhadapan dengan halaman
seperti ini:

Bagaimana dengan data mahasiswa? Kenapa tidak ada?

Untuk memunculkan halaman pengelolaan data mahasiswa, perlu kita definisikan terlebih dahulu melalui file [Link].

from [Link] import admin

# Register your models here.

from .models import DataMahasiswa #import DataMahasiswa dari [Link]

[Link](DataMahasiswa)
Maka akan muncul pada halaman admin seperti berikut ini:

Coba tambahkan data, kemudian simpan.

10 Pengelolaan Data Mahasiswa (CRUD) tanpa halaman Admin
Selanjutnya akan kita lakukan pengelolaan Data Mahasiswa untuk Create, Read, Update, dan Delete tanpa halaman admin.

10.1 Modifikasi file [Link]

Buka file data_mahasiswa/[Link]. Kemudian masukkan code berikut:

from [Link] import render

from .models import DataMahasiswa
# Create your views here.
def index(request):
data = {}

data_mahasiswa = [Link]()
data['mahasiswa'] = data_mahasiswa
return render(request,'[Link]', data)

 Dictionary, untuk menyimpan data yang akan dikirimkan ke template

 data_mahasiswa, variable untuk menyimpan semua data yang dipanggil dari table DataMahasiswa

 data[‘mahasiswa’], data adalah dictionary yang telah dibuat, sedangkan ‘mahasiswa’ menunjukkan
key atau kunci yang akan dipanggil ketika di template.

 Meneruskan request data ke template ‘[Link]’ sekaligus mengirimkan datanya.

10.2 Membuat Template

Untuk membuat template sederhana, kita dapat memanfaatkan framework CSS Bootstrap. Buat sebuah folder misal ‘static’
di direktori mahasiswa, kemudian copy-paste komponen bootstrap-CSS ke dalam folder tersebut.

Kemudian sesuaikan pada file [Link]:

STATICFILES_DIRS = (
[Link](BASE_DIR, 'static'),
)
10.2.1 Buat Base Template
Base template merupakan basis template yang akan digunakan untuk semua template yang akan kita gunakan. Hal ini
sangat berguna karena mengurangi penulisan kode berulang dan menjaga konsistensi template.

Buat file base_template.html.

Copy-Paste code dari:

[Link]

10.2.2 Buat file untuk content

Buat file bernama [Link], file digunakan untuk menampilkan seluruh data mahasiswa yang ada di table
DataMahasiswa.

Copy-Paste code dari:

[Link]

10.3 Modifikasi file [Link]

[Link] digunakan untuk mengatur URL aplikasi yang akan kita akses nantinya. Pertama kita modifikasi file urls utama,
yaitu file [Link] yang berada di direktori mahasiswa:

from [Link] import admin

from [Link] import path, include

urlpatterns = [
path('admin/', [Link]),

path('', include('data_mahasiswa.urls')), #<== tambahkan url

untuk data_mahasiswa
]

Kemudian buat file urls di direktori data_mahasiswa, untuk mengatur URL khusus untuk aplikasi data_mahasiswa.

from [Link] import path

from . import views

urlpatterns = [
path('', [Link], name='index'),
]
Coba buka [Link] dan lihat hasilnya:

10.4 Menambah Data Mahasiswa dengan FormBuilder

Django menyediakan fasilitas untuk generate form secara otomatis sesuai dengan Model yang kita definisikan ke dalam
HTML atau template dengan Form Builder. Langkah yang harus dilakukan adalah membuat dengan nama [Link],
kemudian masukkan kode:

from django import forms

from .models import DataMahasiswa

class MahasiswaForm([Link]):
class Meta:
model = DataMahasiswa
fields = ('nama', 'nim', 'tempat_lahir', 'tanggal_lahir',
'jenis_kelamin', 'no_hp', 'alamat',)
widgets = {'tanggal_lahir':
[Link](format='%d/%m/%Y',attrs={'class': 'datepicker'})}
Untuk mengirimkan forms tersebut ke templates, kita perlu mendefinisikannya melalui file [Link], tambahkan kode:

def tambah_mahasiswa(request):
if [Link] == 'POST':
form = MahasiswaForm([Link])
if form.is_valid():
[Link]()
return redirect('index')
else:
form = MahasiswaForm()

mydata = {}
mydata['form'] = form
return render(request, "add_mhs.html", mydata)

Jangan lupa menambahkan URL pada data_mahasiswa/[Link].

from [Link] import path

from . import views

urlpatterns = [
path('', [Link], name='index'),
path('add', views.tambah_mahasiswa, name='add'), #<==tambahkan

Selanjutnya kita buat halaman untuk menambah mahasiswa, buat file add_mhs.html:

Copy-paste code dari:

[Link]

Jangan lupa tambahkan url untuk tombol “Tambah” pada template:

<div>
<a href="{% url 'add' %}" class="btn btn-primary"role="button">Tambah
Mahasiswa</a>
</div>
Coba buka [Link] dan klik tombol “Tambah”, hasilnya:

Coba Masukkan data dan Simpan.

10.5 Mengedit Data Mahasiswa

Untuk membuat fitur edit data, pertama kita tambahkan kode ke [Link]:

def edit_mahasiswa(request, id):

mahasiswa = [Link](pk = id)
if [Link] == 'POST':
form = MahasiswaForm([Link], instance=mahasiswa)
if form.is_valid():
[Link]()
return redirect('index')
else:
form = MahasiswaForm(instance=mahasiswa)

mydata = {}
mydata['form'] = form
return render(request, "add_mhs.html", mydata)
Jangan lupa menambahkan URL pada data_mahasiswa/[Link].

from [Link] import path

from . import views

urlpatterns = [
path('', [Link], name='index'),
path('add', views.tambah_mahasiswa, name='add'),
path('edit/<int:id>', views.edit_mahasiswa, name='edit'), #<==tambahkan
]

Jangan lupa tambahkan url untuk tombol “Edit” pada template:

<a href="{% url 'edit' [Link] %}" class="btn btn-warning" role="button">Edit

Mahasiswa</a>

Coba buka [Link] dan klik tombol “Edit” pada salah satu data, hasilnya:

Coba Edit data dan Simpan.

10.6 Menghapus Data Mahasiswa
Untuk membuat fitur hapus data, pertama kita tambahkan kode ke [Link]:

def hapus_mahasiswa(request, id):

mahasiswa = [Link](pk = id)
[Link]()
return redirect('index')

Jangan lupa menambahkan URL pada data_mahasiswa/[Link].

from [Link] import path

from . import views

urlpatterns = [
path('', [Link], name='index'),
path('add', views.tambah_mahasiswa, name='add'),
path('edit/<int:id>', views.edit_mahasiswa, name='edit'),
path('hapus/<int:id>', views.hapus_mahasiswa, name='hapus'), #<==tambahkan
]

Jangan lupa tambahkan url untuk tombol “Hapus” pada template:

<a href="{% url 'hapus' [Link] %}" class="btn btn-danger hapusItem"

role="button">Hapus Mahasiswa</a>

Coba buka [Link] dan klik tombol “Hapus” pada salah satu data, hasilnya:

-Selesai-