Kali ini kita akan melakukan integrasi HTML ke dalam Django. Untuk melakukan ini terdapat beberapa hal yang harus dilakukan. Agar dapat melakukannya simak dan ikuti langkah-langkah berikut.
Berikut langkah-langkah untuk Integrasi HTML ke Django:
- Syarat yang Harus Dipenuhi:
- Menginstal Django terlebih dahulu, untuk tata caranya bisa disimak di cara install django
- Memiliki file html, baik berupa template maupun buatan sendiri.
- Cara Integrasi HTML ke Django:
- Membuat project baru di command prompt dengan nama djangoku :
Django-admin startproject djangoku. - Masuk ke folder djangoku:
cd djangoku - Membuat app baru dengan nama aitc :
Django-admin startapp aitc. - Tampilan CMD:
- Membuat folder static di dalam folder aitc kemudian pindah folder asset dan image dari folder template/ html ke dalam folder static.
- Membuat folder templates di dalam folder aitc kemudian pindahkan file .html dari folder template/ html ke dalam folder templates.
- Kemudian buka folder aitc menggunakan text editor (vs code / sublime).
- Membuat file baru urls.py dan utils.py didalam folder aitc.
- Merubah code pada file setting di folder djangoku > djangoku. Tambahkan
import ospada line 14, juga tambahkanaitc.apps.AitcConfigdi line 40 seperti dibawah ini:
- Melakukan perubahan code pada file urls.py di folder djangoku > djangoku pada line 17 – 28 seperti dibawah ini:
from django.contrib import adminfrom django.urls import path,include- #image
from django.conf import settingsfrom django.conf.url.static import staticurlpatterns = [-
path('admin/', admin.site.urls), -
path('', include('aitc.urls')), ]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
- Menambahkan code pada file utils.py di folder aitc seperti dibawah ini:
- #pertama kali untuk file upload image kita buat utils.py dulu
from django.db import modelsfrom django.utils.deconstruct import deconstructiblefrom uuid import uuid4import os@deconstructibleclass PathForFileModel(object):def __init__(self, sub_path):-
self.path = sub_path -
def __call__(self, instance, filename): -
ext = filename.split('.')[-1] - #uuid : set filename as random string
-
filename = '{}.{}'.format(uuid4().hex, ext) - #return the whole path to the file
-
return os.path.join(self.path, filename) - # jika hapus data yang ada gambarnya, maka gambar di folder juga ikut hilang , ini masih bisa perlu dihapus
class ImageField(models.ImageField):-
def save_form_data(self, instance, data): - if data is not None:
-
file = getattr(instance,self.attname) -
if file != data: -
file.delete(save=False) -
super(ImageField,self).save_form_data(instance,data)
- Menambahkan code pada file urls.py di folder aitc seperti dibawah ini:
from django.urls import pathfrom . import viewsurlpatterns = [-
path('',views.home, name='home'), -
path('index.html',views.home, name='home'), -
path('about.html',views.about, name='about'), path('detail-page.html',views.detail_page, name='detail_page'),-
path('listing-page.html',views.listing_page, name='listing_page'), -
path('contact.html',views.contact, name='contact'), ]
- Menambahkan code pada file views.py di folder aitc seperti dibawah ini:
from django.shortcuts import render, get_object_or_404, redirectfrom django.utils import timezonefrom .models import Home, About, DetailPage, ListingPage, Contactdef home(request):-
home_list = Home.objects.all() -
return render(request, 'index.html',{'index' : home_list}) def about(request):-
about_list = About.objects.all() -
return render(request, 'about.html',{'about' : about_list}) def detail_page(request):-
dp_list = DetailPage.objects.all() -
return render(request, 'detail-page.html',{'detail_page' : dp_list}) def lisring_page(request):-
lp_list = ListingPage.objects.all() -
return render(request, 'listing-page.html',{'listing_page' : lp_list}) def contact(request):-
contact_list = Contact.objects.all() -
if request.POST: -
name = request.POST.get('name',None) -
email = request.POST.get('email',None) -
company = request.POST.get('company',None) -
message = request.POST.get('message',None) try:-
obj=Contact(name=name, email=email, company=company, message=message) -
obj.save() -
except Exception as e: -
print(e) -
return render(request, 'contact.html',{'contact' : contact_list})
- Menambahkan code pada file models.py di folder aitc seperti dibawah ini:
from django.shortcuts import render, get_object_or_404, redirectfrom django.db import modelsfrom django.utils import timezone- #dibawah ini utils PathForFileModel untuk memindahkan gambar ke folder yang sudah ditentukan dan ImageField
from aitc.utils import PathForFileModelclass Home(models.Model):-
title = models.CharField(max_length=200) -
text = models.TextField() -
def __str__(self): -
return self().title -
class Meta: -
ordering = ['id'] -
verbose_name ='Home' -
verbose_name_plural = 'Home' class About(models.Model):-
gambar = models.ImageField(upload_to=PathForFileModel('image'), max_length=255, null=True, blank=True) -
text = models.TextField() - #jika gambar tidak ada, maka default gambar no-image.jpg
-
def get_foto(self): -
if self.gambar: -
return settings.MEDIA_URL+str(self.gambar) -
return settings.STATIC_URL+"images/no-images.png" -
def __str__(self) : -
return self.text -
class Meta: -
ordering = ['id'] -
verbose_name = 'About' -
verbose_name_plural = 'About' class DetailPage(models.Model):-
gambar = models.ImageField(upload_to=PathForFileModel('image'), max_length=255, null=True, blank=True) -
text = models.TextField() - #jika gambar tidak ada, maka default gambar no-image.jpg
-
def get_foto(self): -
if self.gambar: -
return settings.MEDIA_URL+str(self.gambar) -
return settings.STATIC_URL+"images/no-images.png" -
def __str__(self) : -
return self.text -
class Meta: -
ordering = ['id'] -
verbose_name = 'Detail Page ' -
verbose_name_plural = 'Detail Page' class ListingPage(models.Model):-
gambar = models.ImageField(upload_to=PathForFileModel('image'), max_length=255, null=True, blank=True) -
text = models.TextField() - #jika gambar tidak ada, maka default gambar no-image.jpg
-
def get_foto(self): -
if self.gambar: -
return settings.MEDIA_URL+str(self.gambar) -
return settings.STATIC_URL+"images/no-images.png" -
def __str__(self) : -
return self.text -
class Meta: -
ordering = ['id'] -
verbose_name = 'Listing Page' -
verbose_name_plural = 'Listing Page' class Contact(models.Model):-
name = models.CharField(max_length=200) -
email = models.EmailField() -
company = models.TextField() -
message = models.TextField() -
def __str__(self) : -
return self.name -
class Meta: -
ordering = ['id'] -
verbose_name = 'Contact' -
verbose_name_plural = 'Contact'
- Menambahkan code pada file admin.py di folder aitc seperti dibawah ini:
from django.contrib import adminfrom .models import Home, About, DetailPage, ListingPage, Contactclass HomeAdmin(admin.ModelAdmin):- #list_display_links = None
list_display = ('title','text')search_fields =('title', 'text')class ContactAdmin(admin.ModelAdmin):- #list_display_links = None
list_display =('name','email','company','message')search_fields =('name', 'message')admin.site.register(Home, HomeAdmin)admin.site.register(About)admin.site.register(DetailPage)admin.site.register(ListingPage)admin.site.register(Contact, ContactAdmin)
- Berikan perintah
{%load static %}di line paling atas. Jika pada html biasa perintah untuk memanggil gambar dan link adalahsrc="images/pod-talk-logo.png"/href="css/owl.carousel.min.css"maka kali ini harus di tambah perintah="{% static' …..' %}"sehingga menjadisrc="{% static' images/pod-talk-logo.png' %}"/href="{% static 'css/owl.carousel.min.css'%}"seperti dibawah ini:
- Dalam nomor 16 dan 17 lakukan hal yang sama dalam setiap halaman.
- Aktifkan Virtual Environment :
Env\Scripts\activate.bat.
- Mengaktifkan server: python manage.py runserver .
- Lihat hasil yang telah dijalankan dengan server http://localhost:8000/:
- Tampilan halaman index.
- Tampilan halaman about.
- Tampilan halaman listing-page
- Tampilan halaman detail-page
- Tampilan halaman contact
- Tampilan halaman index.
- Membuat project baru di command prompt dengan nama djangoku :