Scribd
Unggah
62 tayangan

Python Django - Modul 4

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

Python Django - Modul 4

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

Integrasi Bootstrap

7.1 Langkah-Langkah
Melanjutkan project yang telah dijelaskan di modul sebelumnya. Pada materi ini
dibahas cara integrasi Bootstrap ke dalam Django.

1. Buat folder baru dengan nama vendor dan bootstrap di dalam vendor.

Gambar 76 Folder vendor dan bootstrap

39 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON
2. Buka folder bootstrap-4.3.1-dist dan di dalam folder css, copy bootstrap.css.
Dan paste ke dalam folder bootstrap yang telah dibuat. Ikuti gambar di bawah.

Gambar 77 Copy dan Paste css

40 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON
3. Buka folder bootstrap-4.3.1-dist dan di dalam folder js, copy beberapa file
javascript (ikuti gambar dibawah). Dan paste ke dalam folder bootstrap yang
telah dibuat.

Gambar 78 Copy dan Paste javascript

41 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON
4. Cek di dalam Visual Studio Code.

Gambar 79 File css dan javascript Sudah Masuk

5. Buka file index.html untuk Halaman Utama.

Gambar 80 Buka index.html Halaman Utama

42 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON
6. Sesuaikan kode index.html. Copy dan paste kode dibawah.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<!-- CSS 1 -->
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<!-- CSS BOOTSTRAP -->
<link rel="stylesheet" href="{% static 'vendor/bootstrap/bootstrap.css' %}
">
</head>
<body>
<img id="banner" src="{% static 'img/home.jpg' %}" alt="">
<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
</ul>
</div>

<!-- KELAS CONTAINER BOOTSTRAP -->


<div class="container">
<br>
<div class="jumbotron">
<h1 class="display-4">Selamat Datang di Era Industri 4.0</h1>
<p class="lead">Topik Revolusi Industri 4.0 yaitu :</p>
<hr class="my-4">
<p>Internet of Things, saat komputer dan smartphone te
rsambung ke internet.</p>
<hr class="my-4">
<p>Cloud Computing, proses data sampai bermain game ti
dak perlu menggunakan device yang canggih, cukup terhubung dengan internet. Da
ta diproses pada komputer server yang menyediakan service tersebut.</p>
<hr class="my-4">
<p>Machine Learning, yaitu mesin yang memiliki kemampu
an untuk belajar, sehingga melakukan koreksi yang tepat untuk memperbaiki hasi
l berikutnya.</p>
<a class="btn btn-primary btn-
lg" href="#" role="button">Topik Lainnya</a>
</div>
</div>

43 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON

<!-- FOOTER -->


<footer class="footer">
<div class="container">
<span class="text-dark">Copyright 2019</span>
</div>
</footer>

<!-- JS BOOTSTRAP -->


<script src="{% static 'vendor/bootstrap/jquery-
3.3.1.slim.min.js' %}" type="text/javascript"></script>
<script src="{% static 'vendor/bootstrap/popper.min.js' %}" type="text/jav
ascript"></script>
<script src="{% static 'vendor/bootstrap/bootstrap.js' %}" type="text/java
script"></script>

</body>
</html>

7. Buka file index.html untuk Halaman About.

Gambar 81 Buka index.html Halaman About

44 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON
8. Sesuaikan kode index.html. Copy dan paste kode dibawah.

{% load static %}
<!DOCTYPE html>
<head>
<title>About</title>
<!-- CSS 1 -->
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<!-- CSS BOOTSTRAP -->
<link rel="stylesheet" href="{% static 'vendor/bootstrap/bootstrap.css' %}
">
</head>
<body>
<img id="banner" src="{% static 'about/img/about.jpg' %}" alt="">
<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
</ul>
</div>

<!-- KELAS CONTAINER BOOTSTRAP -->


<div class="container">
<p></p>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">About Django</h4>
<p>Django itu merupakan Web Framework open source berbasis Python,
digagas oleh Jacob Kaplan Moss dan Adrian Holovaty. Django menjadi salah satu
Web Framework terbesar yang dimiliki Python baik dari segi komunitas maupun W
eb Framework itu sendiri. Django memiliki sebuah badan yang dinamakan dengan D
jango Software Foundation yang bertugas mengelola pendanaan untuk kelangsungan
pengembangan Django.
Django memiliki tagline "The web framework for perfectioni
sts with deadlines", bagaimana tidak, karena secara default Django sudah memil
iki berbagai modul umum yang biasa digunakan ketika mengembangkan aplikasi web
. Dengan Django saja, Anda sudah dapat menggunakan autentikasi sendiri, dan me
ndapatkan halaman admin sesuai dengan model yang kamu definisikan di dalam apl
ikasi!
Django banyak dipakai oleh perusahaan internet besar belak
angan ini seperti Instagram, Discus, Mozzila dan masih banyak lagi. Django di
ciptakan untuk memudahkan developer membuat aplikasi web dengan cepat, mudah d
an dengan kode yang lebih sedikit.</p>
<hr>
<p class="mb-
0">Django awalnya dikembangkan pada tahun 2003 dan 2005 oleh beberapa web deve
loper yang bertugas membuat dan merawat web portal (newspaper website). Setela
h membuat beberapa website, orang-orang tersebut mulai membuat ulang kode-
kode yang pernah mereka tulis dengan menerapkan beberapa design pattern. Lalu
disebarkan sebagai project open source dengan nama “Django” pada bulan Juli 20
05.</p>

45 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON

</div>
</div>

<!-- FOOTER -->


<footer class="footer">
<div class="container">
<span class="text-dark">Copyright 2019</span>
</div>
</footer>

<!-- JS BOOTSTRAP -->


<script src="{% static 'vendor/bootstrap/jquery-
3.3.1.slim.min.js' %}" type="text/javascript"></script>
<script src="{% static 'vendor/bootstrap/popper.min.js' %}" type="text/jav
ascript"></script>
<script src="{% static 'vendor/bootstrap/bootstrap.js' %}" type="text/java
script"></script>

</body>
</html>

9. Buka file styles.css dan tambahkan beberapa baris kode seperti gambar di bawah.

Gambar 82 Kode styles.css

46 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana
PYTHON
10. Tampilan Halaman Utama

Gambar 83 Tampilan Halaman Utama

11. Tampilan Halaman About

Gambar 84 Tampilan Halaman About

47 | Page Kevin Perdana, ST


https://medium.com/@kevinperdana

Anda mungkin juga menyukai