Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul 4 Static File Dan Image

    Diunggah oleh

    Mukhlas Griez
    24 tayangan4 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
    24 tayangan4 halaman

    Modul 4 Static File Dan Image

    Diunggah oleh

    Mukhlas Griez

    Hak Cipta:

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

    Static file dan image

    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 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.

    Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 1


    Terlebih dahulu lakukan pengaturan, tambahkan koneksi dengan folder static yang sebelumnya
    sudah dibuat seperti berikut kodenya:

    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__)))

    Arti dari kode tersebut membuat jalur di dalam proyek, jalur tersebut berupa data folder yang
    dibaca, kemudian nilai static mengikuti nama folder-nya. Berikutnya panggil dan sematkan
    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:

    Tambahakan File di folder data/templates/data/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. 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:

    Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 2


    MEDIA_ULR = '/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 data/templates/data/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 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:

    Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 3


    Tambahakan File di folder data/templates/data/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 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.

    Created By : Moh. Ainol Yaqin, M.Kom, Universitas Nurul Jadid Page 4

    Anda mungkin juga menyukai