Skip to main content

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 :
  1. Instalasi Django
  2. Memahami URL, Views, dan Template Django
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 :
Static Files Django Framework Tutorial

Langkah 2 :

Kemudian silahkan buka file setting.py yang ada pada folder websiteku seperti gambar berikut :
Static Files Django Framework Tutorial

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 :
  1. Gambar Home
  2. Gambar About
Download dan Copy saja gambar diatas kemudian paste (Gunakan Windows Exlporer) kedalam folder static, sehingga akan jadi seperti ini jika sudah dimasukan :
Static Files Django Framework Tutorial

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 :
Static Files Django Framework Tutorial

jika sudah running silahkan buka browser kemudian masukan masukan alamat url nya seperti gambar berikut :
  1. http://127.0.0.1:8000/static/img/home.png
  2. http://127.0.0.1:8000/static/img/about.png
Static Files Django Framework Tutorial

Static Files Django Framework Tutorial

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 :
Static Files Django Framework Tutorial
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
 
Static Files Django Framework Tutorial

Menambahkan CSS

Langkah 1 :

Tambahkan sebuah folder baru dengan nama css pada folder static kemudian buatlah sebuah file baru dengan nama styles.css
Static Files Django Framework Tutorial


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 :
Static Files Django Framework Tutorial

Halaman About :
Static Files Django Framework Tutorial

Sekian cara mengatur Static Files Django Framework, semoga bermanfaat dan mudah dipahami.













credit by : https://medium.com/@kevinperdana
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar