Scribd
Unggah
110 tayangan

Python Django - Modul 3

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
110 tayangan

Python Django - Modul 3

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
Anda di halaman 1/ 10

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 settings.py dan tambahkan kode seperti gambar di bawah.

Gambar 60 Kode settings.py

30 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
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


https://medium.com/@kevinperdana
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


https://medium.com/@kevinperdana
PYTHON
7. Jalankan server website.

Gambar 65 Jalankan Server

8. Tes URL gambar.

Gambar 66 URL Gambar

33 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
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


https://medium.com/@kevinperdana
PYTHON
11. Buat folder baru dengan nama css di dalam folder static utama.

Gambar 69 Folder css

12. Buat file baru dengan nama styles.css di dalam folder css yang telah dibuat.

Gambar 70 File styles.css

35 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON
13. Tulis kode styles.css seperti gambar di bawah.

Gambar 71 Kode styles.css

14. Sesuaikan kode index.html Halaman Utama seperti gambar di bawah.

Gambar 72 Kode HTML Halaman Utama

36 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON
15. Sesuaikan kode index.html 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


https://medium.com/@kevinperdana
PYTHON
17. Tampilan Halaman About

Gambar 75 Tampilan Halaman About

38 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana

Anda mungkin juga menyukai