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 os
pada line 14, juga tambahkanaitc.apps.AitcConfig
di 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 admin
from django.urls import path,include
- #image
from django.conf import settings
from django.conf.url.static import static
urlpatterns = [
-
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 models
from django.utils.deconstruct import deconstructible
from uuid import uuid4
import os
@deconstructible
class 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 path
from . import views
urlpatterns = [
-
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, redirect
from django.utils import timezone
from .models import Home, About, DetailPage, ListingPage, Contact
def 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, redirect
from django.db import models
from django.utils import timezone
- #dibawah ini utils PathForFileModel untuk memindahkan gambar ke folder yang sudah ditentukan dan ImageField
from aitc.utils import PathForFileModel
class 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 admin
from .models import Home, About, DetailPage, ListingPage, Contact
class 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 :