Ditutorial series ini kita akan belajar membauat sebuah aplikasi web menggunakan django framework.
Aplikasi yang akan kita buat, kita namakan Mini Wallet. Di aplikasi ini nantinya user bisa mengelola keuangan pribadi mereka dan bisa melihat histori pemakaian uang yang tersimpan di Mini Wallet.
Selain itu user juga bisa melihat report harian dibagian dashboar dalam bentuk grafik.
Dibagian yang pertama dari tutorial Mini Wallet, kita akan belajar tentang django template dan static file.
Untuk mengikuti tutorial ini pastikan bahwa Anda telah berada pada mode python virtual environment, kemudian ikuti langkah-langkah berikut ini:
A) Install Django
pip install django
B) Buat Project Ewallet
django-admin startproject ewallet
C) Download Template
Di tutorial ini kita akan menggunakan bootstrap 5.0, Anda dapat mendowload contoh templatenya di link ini : https://getbootstrap.com/docs/5.0/examples/.
D) Setup Static Folder
Tambahkan konfigurasi berikut ke file settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
Kemudian buat folder dengan nama "static", static_root akan digunakan untuk menyimpan semua file dang directory saat nanti Anda menjalankan perintah python manage.py collectstatic.
Folder static akan menyimpan semua hal terkait dengan file .css dan juga .js
E) Setup Template
Tambahkan kode berikut ke file settings.py
TEMPLATES = [
{
.....
'DIRS': [os.path.join(BASE_DIR, 'templates')],
.....
},
]
Kemdian buat folder dengan nama templates. Di folder ini Anda bisa menambahkan kode html dengan pengaturan templating pda Django Framework
F) Index Template View
Buat sebuah APP dengan nama home, jalankan perintah berikut:
python manage.py startapp home
Selanjutnya buat sebuah file di direktory templates/home dengan nama index.html
{% load static %}
<html>
<head>
<title>Mini Wllet</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
<h2>Welcome</h2>
</body>
</html>
Kemudian buka file views.py dan buat class dengan nama IndexTemplateView.
from django.shortcuts import render
from django.views.generic import TemplateView# Create your views here.
class IndexTemplateView(TemplateView):
template_name = 'home/index.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
return context
G) Setup URL
Kembali ke root direktori project buka file urls.py dan import class IndexTemplateView.
from home.views import IndexTemplateViewurlpatterns = [
path('', IndexTemplateView.as_view(), name='index page'),
]
H) Run App
Untuk menguji hasil pekerjaan kita jalankan perintah berikut di terminal:
python manage.py runserver
Jika semua berjalan lancar, makan di web browser Anda akan terbuka sebuah halaman web.
I) Video Tutorial
Github : https://github.com/halovina/e-wallet/tree/django-static-file
Baca artikel lainya:
- Tutorial bassic Mysql bagian 1 - Create Read Update Delete
- Tutorial bassic Mysql bagian 2 - Inner, Left, Right, Cross Join
- Tutorial bassic Mysql bagian 3 - Filtering Data
- Tutorial bassic Mysql bagian 4 - Grouping Data
- Tutorial bassic Mysql bagian 5 - Operator dan Clausa
- Tutorial bassic Mysql bagian 6 - Replace Statement
- Tutorial bassic Mysql bagian 7 - Constraint Data
- Tutorial bassic Mysql bagian 8 - Mengubah Struktur tabel
- Tutorial bassic Mysql bagian 9 - Subquery
- Tutorial bassic Mysql bagian 10 - Virtual Tabel
- Tutorial bassic Mysql bagian 11 - Control Flow Function
- Membuat service OTP bagian 1 - OTP dan PIN
- Membuat service OTP bagian 2 - Sequence Diagram
- Membuat service OTP bagian 3 - Model dan Serializer
- Membuat service OTP bagian 4 - Validate OTP
- Membuat service OTP bagian 5 - Api Client Service
- Membuat service user login bagian 1 - Konfigurasi Database
- Membuat service user login bagian 2 - Serializer dan JWT
- Membuat CRUD service product bagian 1 - Models Product
- Membuat CRUD service product bagian 2 - Function Serializer
- Membuat CRUD service product bagian 3 - Api Client Service
- Membaut CRUD service product bagian 4 - Auth User
- Membuat CRUD service product bagian 5 - TDR File Log
- Membuat CRUD service product bagian 6 - Unit Test
- Membuat service user register bagian 1 - Django
- Membuat Service user register bagian 2 - Django
- Membuat service filter dan download file CSV di django
- Django upload file menggunakan FileSystemStorage