Halo, perkenalkan aku Cyla. Di kesempatan kali ini aku akan membahas tentang cara membuat website sederhana dengan Django.
Django?
Django adalah sebuah framework full-stack untuk membuat aplikasi web dengan bahasa pemrograman Python. Django juga merupakan kerangka kerja python web tingkat tinggi yang dapat melakukan pengembangan aplikasi dengan cepat dan memiliki desain pragmatis yang bersih. Django dapat membuat pengembangan aplikasi menjadi lebih mudah, lebih cepat dan lebih sedikit menggunakan kode.
Aplikasi yang menggunakan django yaitu instagram, pinterest dan prezi.
Pada tutorial ini menggunakan text editor yaitu Visual Studio Code dan OS Windows.
Langkah-langkah membuat website dengan django :
- Buka cmd, lalu buat folder django
C:\Users\Public>mkdir django
2. Lalu masuk ke folder django
C:\Users\Public>cd django
3. Kemudian buat virtual environment (disini saya membuat venv dengan nama Env)
C:\Users\Public\django>python -m venv Env
4. Lalu kita aktifkan virtual environmentnya
C:\Users\Public\django>Env\Scripts\activate.bat
5. Setelah Env aktif, maka tampilannya seperti ini
(Env) C:\Users\Public\django>
6. Kemudian kita install django
(Env) C:\Users\Public\django>pip install django
7. Kemudian kita buat project (disini saya memberi nama projectnya yaitu myweb)
(Env) C:\Users\Public\django>django-admin startproject myweb
8. Kemudian masuk ke project kita tersebut
(Env) C:\Users\Public\django>cd myweb
9. Untuk menjalankan website, ketikan perintah dibawah ini
(Env) C:\Users\Public\django\myweb>python manage.py runserver
10. Lalu akan muncul seperti ini, lalu kita copy alamat local host (http://127.0.0.1:8000/) ke browser
11. Maka hasilnya akan seperti di bawah ini, hal ini berarti web server kita sudah berjalan
12. Buka Visual Studio, lalu buka folder project kita tadi yaitu folder myweb
Di dalam folder myweb ada :
- __init__.py : sebuah file kosong yang memberitahukan Python untuk memberlakukan direktori mysite sebagai modul Python.
- settings.py : setting dan konfigurasi project kita, yang memuat seting inisial default.
- urls.py : tempat dimana pattern URL kita tinggal, setiap URL yang definisikan dipetakan untuk ditampilkan.
- wsgi.py : konfigurasi untuk menjalankan project-project sebagai sebuah aplikasi WSGI.
manage.py : sebuah utilitas command-line untuk berinterkasi dengan project kita.
13. Klik folder myweb, lalu klik views.py, lalu ketikkan seperti di bawah ini
from django.shortcuts import render
def index(request):
context = {
'judul' : 'Home',
}
return render (request,'index.html',context)
14. Lalu klik folder myweb, lalu klik urls.py, lalu ketikkan seperti di bawah ini
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index),
15. Untuk menambahkan background, maka kita buat folder static, kemudian di dalam folder static buat folder img, lalu masukkan background yg diinginkan.
16. Agar background yang kita inginkan tadi bisa muncul maka buat folder template, lalu buat file dengan nama index.html
17. Lalu pada index.html ketikkan seperti di bawah ini
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{{judul}}</title>
</head>
<body background="{% static "img/home_banner.jpeg" %}" alt="">
<p style="text-align:center"><font color="black" size="10" ><b>Selamat Datang</b></font></p>
</body>
18. Kemudian pada folder myweb, klik setting.py lalu atur seperti dibawah ini
#Bagian TEMPLATES
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
#Bagian akhir
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
19. Saat dijalankan maka tampilannya seperti di bawah ini
Kita bisa menambahkan konten ke website yang kita buat sesuai dengan keinginan kita.
Sekian, Terima kasih.
Referensi https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction
Comments