Static file dan image
Pembahasan kali ini adalah tentang static file dan image, artinya menambahkan file css,
js dan gambar-gambar dalam Django. Terlebih dahulu buat folder dengan nama static dengan
posisi sejajar dengan app data, kemudian di dalam folder static terdapat tiga folder yaitu js, css
dan images, sebenarnya nama-nama folder bebas sesuai keinginan, folder-folder tesebut seperti
gambar berikut:
Gambar 1 Susunan folder static
Mari lakukan uji coba dulu dengan css, pada file [Link] sudah ada css sederhana,
buat file [Link] di folder static/css/[Link], kemudian pindahkan atau cut css-nya yang ada
pada [Link]. Lebih lengkapnya isi [Link] seperti berikut:
File di folder static/css/[Link]
#logo{}
body{
background-color: #ebeff5;
}
#total-orders{
background-color: #4cb4c7;
}
#orders-delivered{
background-color: #7abecc;
}
#orders-pending{
background-color: #7CD1C0;
}
Hasilnya file [Link] tidak terbaca ya, hal tersebut disebabkan belum diatur pada file
[Link] yang ada di project dan belum dipanggil ke pusat templating yaitu file [Link].
Created By : Moh. Ainol Yaqin, [Link], Universitas Nurul Jadid Page 1
Terlebih dahulu lakukan pengaturan, tambahkan koneksi dengan folder static yang sebelumnya
sudah dibuat seperti berikut kodenya:
STATICFILES_DIRS =[
[Link](BASE_DIR, 'static')
Penjelasan:
Letakkan kode di atas pada file [Link] yang ada di folder jualan posisi peletakannya
di paling bawah kode. Nilai BASE_DIR dipanggil dari pengaturan pada file [Link], jadi file
[Link] pasti ada kode berikut:
BASE_DIR = [Link]([Link]([Link](__file__)))
Arti dari kode tersebut membuat jalur di dalam proyek, jalur tersebut berupa data folder yang
dibaca, kemudian nilai static mengikuti nama folder-nya. Berikutnya panggil dan sematkan
dengan cara penggailan css, seperti biasanya.
- Panggil artinya dengan cara letakkan kode berikut {% load static %}, di file
[Link], letakkan di paling atas kode.
- Sematkan artinya tulisan dengan cara pemanggilan css, seperti berikut:
<link rel="stylesheet" type="text/css" href="{% static '/css/[Link]' %}">
Letakan dibawah meta, untuk lebih jelasnya berikut potongan dari [Link]-nya:
Tambahakan File di folder data/templates/data/[Link]
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<link rel="stylesheet" type="text/css" href="{% static '/css/[Link]' %}">
………
Jalankan seperti biasanya, maka hasilnya css-nya berfungsi, dengan memberikan warna
pada file [Link]. Sistem Django berikutnya adalah menambahkam gambar, yang akan
ditambah pertama icon pada header di file [Link] dan kedua logo pada file [Link].
Silakan copy dan paste logo ke bagian folder images, sebagai contoh nama logo yang akan di
copy paste ialah [Link], setelah file tersebut di copy paste ke folder images, tambahkan kode
berikut ke [Link] dengan posisi di atasnya kode static sebelumnya, seperti berikut:
Created By : Moh. Ainol Yaqin, [Link], Universitas Nurul Jadid Page 2
MEDIA_ULR = '/images/'
STATICFILES_DIRS =[
[Link](BASE_DIR, 'static')
]
Isian images pada kode di atas sesuai nama folder pada folder static, tuliskan kode
tambahan di [Link] di bawah css/[Link] sebagai berikut:
<link rel="stylesheet" type="text/css" href="{% static '/css/[Link]' %}">
<link rel="icon" href="{% static '/images/[Link]' %}">
Jalankan dan lihat perubahannya, pada header sudah ada gambar logonya, berikutnya
menambah logo menu. Tempat di file [Link], perhatikan kode berikut:
Tambahakan File di folder data/templates/data/[Link]
Awalnya:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">DJANGO</a>
Ditambah dan Diganti:
{% load static %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img src="{% static '/images/[Link]' %}">
Lihat hasilnya:
Gambar 2 Tampilan setelah ditambah gambar
Hasilnya yang digaris lingkarang tersebut, tapi logonya terlalu besar, maka perlu di
desain pada css-nya. Cara id=”logo” pada kode di atas, dan kecilkan ukurannya pada [Link]-
nya, seperti kode berikut:
Created By : Moh. Ainol Yaqin, [Link], Universitas Nurul Jadid Page 3
Tambahakan File di folder data/templates/data/[Link]
<img src="{% static '/images/[Link]' %}" id="logo">
File folder static/css/[Link], atur seperti kode berikut:
#logo{
width: 50px;
}
Kemudian lihat hasilnya:
Gambar 3 Tampilan setelah gambarnya diatur di [Link]
Pengaturan css pada [Link] tidak harus bernilai width: 50px;tapi menyesuaikan
dengan ukuran gambar, jadi perkirakan sendiri agar sesuai dengan desain [Link]-nya.
Created By : Moh. Ainol Yaqin, [Link], Universitas Nurul Jadid Page 4
