Static Files Django Framework Panduan

Mengatur Static Files Django Framework sebelum anda melaksanakan praktek yang ada pada postingan ini anda harus sudah menyelesaikan praktek pada postingan sebelumnya yaitu : Instalasi Django Memahami URL, Views, dan Template Django Jika telah mari kita teruskan, pada praktek ini kita akan mengerti bagaimana cara mengendalikan static files berupa gambar dan CSS, kita akan memasukan gambar kedalam project dan menyertakan CSS. silahkan buka kembali project sebelumnya lalu ikuti langkah-langkah berikut : Menambahkan Gambar Langkah 1 : Tambahkan suatu folder baru pada base directory seperti gambar berikut : Langkah 2 : Kemudian silahkan buka file setting.py yang ada pada folder websiteku seperti gambar berikut : kemudian tambahkan coding seperti yang telah ditandai diatas, coding diatas berkhasiat agar folder static yang telah kita buat mampu terbaca oleh metode. Langkah 3 : Tambahkan suatu folder gres dengan nama img pada folder static yang kita telah buat tadi, silahkan masukan gambar berikut pada folder tersebut : Gambar Home Gambar About Download dan Copy saja gambar diatas kemudian paste (Gunakan Windows Exlporer) kedalam folder static, sehingga akan jadi seperti ini jika sudah dimasukan : Langkah 4 : Jika telah masuk kita mampu coba untuk memanggil gambar tersebut melalui browser, tetapi sebelum itu kita mesti kerjakan terlebih dahulu project nya dengan cara mirip biasa : kalau telah running silahkan buka browser kemudian masukan masukan alamat url nya mirip gambar berikut : http://127.0.0.1:8000/static/img/home.png http://127.0.0.1:8000/static/img/about.png Langkah 5 : Selanjutnya kita akan memasang gambar home.png pada halaman utama,caranya silahkan buka terlebih dahulu file index.html yang ada pada folder templates (didalam folder websiteku) lalu kerjakan adaptasi mirip berikut : Karena file yang kita punya yakni format *.png jadi silahkan ubah dari home.jpg menjadi home.png, jangan lupa tambahkan dipaling atas dokumen % load static % yang memiliki kegunaan untuk membaca folder static pada halaman index.html. Lakukan hal yang sama pada halaman index.html yang ada pada folder about/templates seperti gambar berikut, tambahkan  % load static % dan sesuaikan gambarnya dari format about.jpg ke about.png   Menambahkan CSS Langkah 1 : Tambahkan suatu folder baru dengan nama css pada folder static lalu buatlah suatu file gres dengan nama styles.css Tambahkan CSS berikut pada file styles.css body margin: 0; #banner width: 100%; float: left; #menu ul background-color: #000; list-style-type: none; overflow: hidden; margin: 0; #hidangan li float: left; #menu ul li a color: #FFF; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-decoration: none; display: block; padding-left: 15px; padding-top: 15px; padding-bottom: 15px; #hidangan ul li a:hover color: #666; sesuaikan juga halaman index.html yang ada pada folder websiteku/templates/index.html menajadi seperti berikut :  % load static % Document Home About Halaman Utama Sedangkan untuk halaman index.html yang ada pada about/templates/index.html sesuaikan menjad seperti berikut : % load static % Document Home About Halaman About Jika sudah silahkan refresh browser anda atau masukan lagi alamat  http://127.0.0.1:8000/ maka akan tampil mirip gambar Halaman Utama : Halaman About : Sekian cara mengatur Static Files Django Framework, agar berguna dan gampang diketahui. credit by : https://medium.com/@kevinperdana
Sumber https://contohapp.blogspot.com