Static Files Django Framework Tutorial

Mengatur Static Files Django Framework

sebelum anda melakukan praktek yang ada pada artikel ini anda harus sudah menyelesaikan praktek pada artikel sebelumnya yaitu :

Jika sudah mari kita lanjutkan, pada praktek ini kita akan memahami bagaimana cara mengatur static files berupa gambar dan CSS, kita akan memasukan gambar kedalam project dan menambahkan CSS. silahkan buka kembali project sebelumnya kemudian ikuti langkah-langkah berikut :

Menambahkan Gambar

Langkah 1 :

Tambahkan sebuah 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 sudah ditandai diatas, coding diatas berguna agar folder static yang sudah kita buat bisa terbaca oleh sistem.

Langkah 3 :

Tambahkan sebuah folder baru dengan nama img pada folder static yang kita sudah buat tadi, silahkan masukan gambar berikut pada folder tersebut :

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 sudah masuk kita bisa coba untuk memanggil gambar tersebut melalui browser, tetapi sebelum itu kita harus jalankan terlebih dahulu project nya dengan cara seperti biasa :

jika sudah running silahkan buka browser kemudian masukan masukan alamat url nya seperti 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) kemudian lakukan modifikasi seperti berikut :

Karena file yang kita punya adalah format *.png jadi silahkan ubah dari home.jpg menjadi home.png, jangan lupa tambahkan dipaling atas dokumen {% load static %} yang berguna 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 sebuah folder baru dengan nama css pada folder static kemudian buatlah sebuah file baru 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;
}
#menu 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;

}
#menu ul li a:hover{
    color: #666;
}

sesuaikan juga halaman index.html yang ada pada folder websiteku/templates/index.html menajadi seperti berikut :


{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}" />
  </head>
  <body>
    <img id="banner" src="{% static '/img/home.PNG' %}" />
    <div id="menu">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
      </ul>
    </div>
    <h1>Halaman Utama</h1>
  </body>
</html>

Sedangkan untuk halaman index.html yang ada pada about/templates/index.html sesuaikan menjad seperti berikut :


{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}" />
  </head>
  <body>
    <img id="banner" src="{% static '/img/about.PNG' %}" />
    <div id="menu">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
      </ul>
    </div>
    <h1>Halaman About</h1>
  </body>
</html>

Jika sudah silahkan refresh browser anda atau masukan lagi alamat http://127.0.0.1:8000/ maka akan tampil seperti gambar

Halaman Utama :