Contoh Aplikasi

Beranda
Django Framework

Cara menambahkan Static Files pada Django Framework


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

perhatikan coding yang perlu ditambahkan berada pada baris 121-123, coding tersebut 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 :
Cara menambahkan Static Files pada Django Framework
Halaman Home


Cara menambahkan Static Files pada Django Framework
Halaman About
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
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>Home</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>About</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