- Buka file settings.py dan ubah pada bagian dibawah ini :
import os
.....
.....
......
.....
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'templates'),], # path yang mengarahkan ke folder 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',
],
},
},
]Fokus pada bagian TEMPLATES dan dibagian DIRS.
2. Lalu, pada file views.py tambahkan function baru untuk merender tampilan html nya. Berikut ini source code nya :
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return render(request,"index.html",{})3. Tambahkan folder templates dengan di isi dengan folder partials dan file index.html. Berikut ini struktur file nya :

4. Pada file templates/index.html diisi dengan code seperti berikut ini :
{% include 'partials/header.html' %}
{% include 'partials/content.html' %}
{% include 'partials/footer.html' %}5. Pada file templates/partials/header.html diisi dengan tampilan header web yang bisa dilihat pada code berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Deteksi Penyakit Coral</title>
</head>
<body class="bg-light">
<!-- Header -->
<header class="bg-dark text-white text-center py-3">
<h1>Deteksi Penyakit Coral</h1>
</header>6. Pada file templates/partials/content diisi dengan tampilan isi dari web yang bisa dilihat pada code berikut ini :
<!-- Main Content -->
<div class="container my-5">
<h2 class="text-center mb-4">WEBSITE DETEKSI PENYAKIT CORAL</h2>
<h5 class="text-center mb-4">BERBASIS ARTIFICIAL INTELLIGENCE MENGGUNAKAN ARSITEKTUR VGG19</h5>
<div class="text-center mb-4">
<label for="upload" class="form-label">Upload Gambar Coral Anda Disini</label>
<input type="file" id="upload" class="form-control d-inline-block w-auto mb-2">
<button class="btn btn-success">Proses</button>
</div>
<!-- About Coral Section -->
<section class="my-5">
<h3 class="text-center mb-4">Tentang Coral</h3>
<p class="text-center">Coral atau karang adalah hewan invertebrata yang hidup di laut, khususnya di perairan
dangkal dan hangat, yang membentuk koloni dan kerangka keras seperti batu. Koloni ini disebut terumbu karang
dan merupakan habitat penting bagi banyak makhluk hidup laut. Karang termasuk dalam kelas Anthozoa dari filum
Cnidaria, dan memiliki polip kecil yang menyerap kalsium karbonat dari air laut untuk membentuk kerang.</p>
</section>
<!-- Coral Types Section -->
<section class="my-5">
<h3 class="text-center mb-4">Jenis Coral</h3>
<div class="row">
<div class="col-6 mb-3">
<div class="border p-3">
<img src="#" alt="Coral Normal" class="img-fluid mb-2" style="height: 150px; object-fit: cover;">
<h5 class="text-center">Coral Normal</h5>
<p>Coral normal adalah kondisi coral normal yang tidak mengalami penyakit apapun.</p>
</div>
</div>
<div class="col-6 mb-3">
<div class="border p-3">
<img src="#" alt="Coral Bleaching" class="img-fluid mb-2" style="height: 150px; object-fit: cover;">
<h5 class="text-center">Coral Bleaching</h5>
<p>Coral bleaching adalah fenomena di mana karang kehilangan warna cerahnya dan menjadi putih. Ini
terjadi ketika karang mengeluarkan alga simbiontik yang disebut zooxanthellae dari jaringannya akibat
stres, seperti peningkatan suhu air. Alga simbiontik ini memberi warna pada karang dan juga
menyediakan nutrisi.</p>
</div>
</div>
</div>
</section>
</div>7. Pada file templates/partials/footer.html diisi dengan tampilan header footer yang bisa dilihat pada code berikut ini :
<footer class="text-center py-3">
<small>Made with ❤ by Alfajri Hulvi</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>8. Terakhir jalankan perintah
python manage.py runserver
Buka browser dan masukkan URL http://127.0.0.1:8000/. Maka akan muncul tampilan seperti ini :

9. Selesai. Alhamdulillah gak ada error hehehe :)