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 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 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
