Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul 4 Static File Dan Image

    Diunggah oleh

    Moh. Irfan Efendi
    14 tayangan5 halaman

    Judul Asli

    Modul 4 Static file dan image

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    14 tayangan5 halaman

    Modul 4 Static File Dan Image

    Diunggah oleh

    Moh. Irfan Efendi

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    BAB 4

    STATIC FILE DAN IMAGE

    4.1 Static file

    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 4.1 Susunan folder static

    Mari lakukan uji coba dulu dengan css, pada file main.html sudah ada css sederhana,
    buat file main.css di folder static/css/main.css, kemudian pindahkan atau cut css-nya yang ada
    pada main.html. Lebih lengkapnya isi main.css seperti berikut:

    File di folder static/css/main.css

    #logo{}

    body{
    background-color: #ebeff5;
    }
    #total-orders{
    background-color: #4cb4c7;
    }
    #orders-delivered{
    background-color: #7abecc;
    }
    #orders-pending{
    background-color: #7CD1C0;
    }
    Hasilnya file main.css tidak terbaca ya, hal tersebut disebabkan belum diatur pada file
    setting.py yang ada di project dan belum dipanggil ke pusat templating yaitu file main.html.
    Terlebih dahulu lakukan pengaturan, tambahkan koneksi dengan folder static yang sebelumnya
    sudah dibuat seperti berikut kodenya:

    file jualan/setting.py Bagian Bawah

    STATICFILES_DIRS =[

    os.path.join(BASE_DIR, 'static')

    Penjelasan:
    Letakkan kode di atas pada file setting.py yang ada di folder jualan posisi peletakannya
    di paling bawah kode. Nilai BASE_DIR dipanggil dari pengaturan pada file setting.py, jadi file
    setting.py pasti ada kode berikut:

    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

    Artinya dari kode tersebut membuat jalur di dalam proyek, jalur tersebut berupa data folder yang
    dibaca, kemudian nilai static kode STATIC_URL = '/static/' jika diubah maka harus diubah
    juga namanya, secara otomatis akan mencari folder static. Bisa tidak perlu menggunaka kode
    tersebut akan tetapi folder static-nya harus ada di app, dengan aturan format penulisannya,
    app/static/app/( Bisa diisi folder atau file lainnya ). Berikutnya panggil dan menyematkan
    dengan cara penggailan css, seperti biasanya.

    - Panggil artinya dengan cara letakkan kode berikut {% load static %}, di file
    main.html, letakkan di paling atas kode.
    - Sematkan artinya tulisan dengan cara pemanggilan css, seperti berikut:

    <link rel="stylesheet" type="text/css" href="{% static '/css/main.css' %}">


    Letakan dibawah meta, untuk lebih jelasnya berikut potongan dari main.html-nya:

    File di folder templates/main.html

    {% 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/main.css' %}">
    ………
    Jalankan seperti biasanya, maka hasilnya css-nya berfungsi, dengan memberikan warna
    pada file status.html.

    Static image

    Sistem Django berikutnya adalah menambahkam gambar, yang akan ditambah pertama
    icon pada header di file main.html dan kedua logo pada file navbar.html. Silakan copy dan
    paste logo ke bagian folder images, sebagai contoh nama logo yang akan di copy paste ialah
    logo.png, setelah file tersebut di copy paste ke folder images, tambahkan kode berikut ke
    setting.py dengan posisi di atasnya kode static sebelumnya, seperti berikut:

    MEDIA_URL = '/images/'
    STATICFILES_DIRS =[
    os.path.join(BASE_DIR, 'static')
    ]
    Isian images pada kode di atas sesuai nama folder pada folder static, tuliskan kode
    tambahan di main.html di bawah css/main.css sebagai berikut:

    <link rel="stylesheet" type="text/css" href="{% static '/css/main.css' %}">


    <link rel="icon" href="{% static '/images/logo.png' %}">
    Jalankan dan lihat perubahannya, pada header sudah ada gambar logonya, berikutnya
    menambah logo menu. Tempat di file navbar.html, perhatikan kode berikut:

    Tambahakan File di folder templates/navbar.html

    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/logo.png' %}">
    Lihat hasilnya:
    Gambar 4.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 main.css-
    nya, seperti kode berikut:

    File di folder templates/navbar.html

    <img src="{% static '/images/logo.png' %}" id="logo">


    File folder static/css/main.css, atur seperti kode berikut:

    #logo{
    width: 50px;
    }
    Kemudian lihat hasilnya:

    Gambar 4.3 Tampilan setelah gambarnya diatur di main.css


    Pengaturan css pada main.css tidak harus bernilai width: 50px;tapi menyesuaikan
    dengan ukuran gambar, jadi perkirakan sendiri agar sesuai dengan desain navbar.html-nya.

    Anda mungkin juga menyukai