Scribd
Unggah
59 tayangan10 halaman

Mengatur Static Files di Django

Dokumen ini menjelaskan cara menambahkan file statis seperti gambar dan CSS pada aplikasi Django. Langkah-langkahnya adalah membuat folder static dan menambahkan konfigurasi di settings.py, kemudian menyimpan file-file statis di folder static dan memanggilnya di template HTML menggunakan URL statis.

Diunggah oleh

dimas aryamukhti
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
59 tayangan10 halaman

Mengatur Static Files di Django

Dokumen ini menjelaskan cara menambahkan file statis seperti gambar dan CSS pada aplikasi Django. Langkah-langkahnya adalah membuat folder static dan menambahkan konfigurasi di settings.py, kemudian menyimpan file-file statis di folder static dan memanggilnya di template HTML menggunakan URL statis.

Diunggah oleh

dimas aryamukhti
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

12 | P a g e

PYTHON

Mengatur Static Files (Gambar dan CSS)

6.1 Langkah-Langkah
Melanjutkan project yang telah dijelaskan di modul sebelumnya. Pada materi ini
dibahas cara memasukkan gambar dan file CSS, pada Django ini disebut dengan “Static
Files”.
1. Buat folder baru dengan nama static di dalam Base Directory.

Gambar 59 Folder static

2. Buka file [Link] dan tambahkan kode seperti gambar di bawah.

Gambar 60 Kode [Link]

30 | Page Kevin Perdana, ST


[Link]
PYTHON
3. Buat folder baru dengan nama img di dalam folder static.

Gambar 61 Folder img

4. Copy gambar yang akan dimasukkan ke Halaman Utama website.

Gambar 62 Copy Gambar untuk Halaman Utama

31 | Page Kevin Perdana, ST


[Link]
PYTHON
5. Buat folder static, about, dan img di dalam app about.

Gambar 63 Folder Baru

6. Copy gambar yang akan dimasukkan ke Halaman About.

Gambar 64 Copy Gambar untuk Halaman About

32 | Page Kevin Perdana, ST


[Link]
PYTHON
7. Jalankan server website.

Gambar 65 Jalankan Server

8. Tes URL gambar.

Gambar 66 URL Gambar

33 | Page Kevin Perdana, ST


[Link]
PYTHON
9. Sesuaikan kode HTML Halaman Utama seperti gambar di bawah.

Gambar 67 Kode HTML Halaman Utama

10. Sesuaikan kode HTML Halaman About seperti gambar di bawah.

Gambar 68 Kode HTML Halaman About

34 | Page Kevin Perdana, ST


[Link]
PYTHON
11. Buat folder baru dengan nama css di dalam folder static utama.

Gambar 69 Folder css

12. Buat file baru dengan nama [Link] di dalam folder css yang telah dibuat.

Gambar 70 File [Link]

35 | Page Kevin Perdana, ST


[Link]
PYTHON
13. Tulis kode [Link] seperti gambar di bawah.

Gambar 71 Kode [Link]

14. Sesuaikan kode [Link] Halaman Utama seperti gambar di bawah.

Gambar 72 Kode HTML Halaman Utama

36 | Page Kevin Perdana, ST


[Link]
PYTHON
15. Sesuaikan kode [Link] Halaman About seperti gambar di bawah.

Gambar 73 Kode HTML Halaman About

16. Tampilan Halaman Utama

Gambar 74 Tampilan Halaman Utama

37 | Page Kevin Perdana, ST


[Link]
PYTHON
17. Tampilan Halaman About

Gambar 75 Tampilan Halaman About

38 | Page Kevin Perdana, ST


[Link]

Anda mungkin juga menyukai