Skip to content
Syarat yang harus dipenuhi:
Memiliki file html, baik berupa template maupun bikinan 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 didalam folder aitc kemudian pindah folder asset dan image dari folder template/ html kedalam folder stati
Membuat folder templates didalam folder aitc kemudian pindah folder .html dari folder template/ html kedalam 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 tambahkan aitc.apps.AitcConfig
,di line 40 seperti dibawah ini:
Melakukan perubahan code pada file urls.py di folder djangoku > djangoki, 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 adalah src="images/pod-talk-logo.png"
/ href="css/owl.carousel.min.css"
maka kali ini harus di tambah perintah ="{% static' …..' %}"
sehingga menjadi src="{% 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
Navigasi pos