Praktikum 4

PRAKTIKUM
PENGENALAN PEMROGRAMAN
(Bagian 4)
PRAKTEK DAN PENGENALAN BOOTSTRAP
Bootstrap merupakan salah satu UI framework yang paling populer, memiliki banyak fitur maupun varian
pengembangan. Selain itu Bootstrap memiliki kemudahan dalam penggunaan dalam proses pengembangan. Pada
modul praktikum ini kita akan mencoba membuat aplikasi yang menganut konsep modular dengan menggunakan
Bootstrap varian Atlantis Lite Master pada server lokal. Konsep modular adalah konsep dimana sebuah webpage
(halaman website) dibangun dari sebuah webpage yang berfungsi menangani Header, Footer, Menu atau apapun
selain konten (disebut sebagai file basis atau template) dan sebuah webpage yang berfungsi menangani konten (file
konten). Ilustrasinya sebagai berikut.
Header, Menu Dll Header, Menu Dll
Blank/Kosong Content Content

+ =
Footer Footer
File Konten
File Basis / Template File Webpage Berkonsep Modular
Selanjutnya kita akan menerapkan bootstrap dalam halaman tampilan html. Kita mulai dengan installasi bootstrap
berikut langkah-langkahnya :
1. Buka link https://drive.google.com/drive/folders/1fRm7I_AHSEjnIrSxXTKk3m4RloBbn1vJ?usp=sharing

kemudian download file yang bernama Atlantis-lite-master.zip.
2. Kemudian extract file tersebut sehingga terbuat sebuah folder Atlantis-Lite-master.
3. Pindahkan folder Atlantis-Lite-master ke dalam folder HTDOCS.
4. Ubah nama Atlantis-Lite-master menjadi atlantis.
5. Buka Browser Chrome dan eksekusi path http://localhost/atlantis/examples/demo1 untuk memastikan
Bootstrap varian Atlantis Lite Master berjalan dengan sempurna. Jika benar, maka tampilan akan seperti
berikut.
6. Dalam Atlantis Lite Master, dokumentasi dapat dilihat melalui syntax yang membangun webpage (halaman
web) tersebut.
7. Langkah berikutnya adalah membuat sebuah folder yang bernama p_dp1 di folder HTDOCS
8. Langkah berikutnya yaitu meng-copy folder assets yang ada di folder atlantis – examples ke folder p_dp1
9. Langkah berikutnya kita akan membuat file basis atau template yang diberi nama index.html yang
ditempatkan di folder p_dp1.
10. Langkah berikutnya kita akan menulis syntax ke dalam file index.html. Syntax yang akan ditulis merupakan
syntax dasar untuk mengakses file-file core yang dibutuhkan agar template Atlantis Lite Master berjalan
dengan baik di aplikasi kita nantinya. Silahkan ketik syntax berikut ke dalam file index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Praktek Pertamaku</title>
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
<link rel="icon" href="assets/img/icon.ico" type="image/x-icon"/>
<script src="assets/js/plugin/webfont/webfont.min.js"></script>
<script>
WebFont.load({
google: {"families":["Lato:300,400,700,900"]},
custom: {"families":[
"Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular",
"Font Awesome 5 Brands", "simple-line-icons"],
urls: ['assets/css/fonts.min.css'] },
active: function() {sessionStorage.fonts = true;}
});
</script>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/atlantis.min.css">
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/plugin/sweetalert/sweetalert.min.js"></script>
<script src="assets/js/atlantis.min.js"></script>
</head>
<body>
</body>
</html>
11. Langkah berikutnya adalah membuat rancangan struktur yang ada dalam body. Konsep yang akan kita buat
menggunakan jenis Overlay Sidebar yaitu sidebar yang tidak menempati sebagian tempat dilayar secara
permanen melainkan akan muncul diatas halaman utama saat diakses.
12. Langkah berikutnya membuat struktur Overlay Sidebar pada tag body. Tempatkan syntax berikut diantara
<body>............</body> syntaxnya sebagai berikut:

13. Langkah berikutnya adalah membuat struktur Main Header. Tempatkan syntax berikut diantara
<div class="main-header">............</div> syntaxnya sebagai berikut:
14. Sampai langkah no 14, maka apa yang kita buat telah memiliki visualisasi walaupun sederhana. Jika benar,
maka tampilan menjadi seperti berikut
15. Langkah berikutnya adalah membuat struktur Logo Header. Tempat syntax berikut diantara
<div class="logo-header" data-background-color="blue2">............</div>syntaxnya
sebagai berikut:
Hasil tampilannya sebagai berikut

16. Langkah berikutnya adalah membuat struktur Navbar.Tempatkan syntax berikut diantara
<nav class="navbar navbar-header navbar-expand-lg" data-background-color="blue2">
............</nav> syntaxnya sebagai berikut:
<div class="container-fluid">
<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
<li class="nav-item dropdown hidden-caret">
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="nav-item dropdown hidden-caret">
<a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-
expanded="false">
<div class="avatar-sm">
<img src="assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
</div>
</a>
<ul class="dropdown-menu dropdown-user animated fadeIn">
<div class="dropdown-user-scroll scrollbar-outer">
<li>
<div class="user-box">
<div class="avatar-lg">
<img src="assets/img/profile.jpg" alt="image profile" class="avatar-
img rounded">
</div>
<div class="u-text">
<h4>Hizrian</h4>
<p class="text-muted">hello@example.com</p>
<a href="profile.html" class="btn btn-xs btn-secondary btn-sm">View
Profile</a>
</div>
</div>
</li>
<li>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</li>
</div>
</ul>
</li>
</ul>
</div>
Hasil tampilannya seperti gambar dibawah
17. Langkah berikutnya adalah membuat menu sidebar. Dalam menu sidebar tersebut, direncanakan terdapat 3
buah menu yaitu menu Beranda, Form dan Tentang Aplikasi. Silahkan tempatkan syntax berikut pada blok
<div class="sidebar sidebar-style-2">............</div> (perhatikan langkah No. 12)
syntaxnya sebagai berikut
Akan menghasilkan tampilan seperti gambar dibawah
18. Langkah berikutnya adalah membuat blok untuk konten. Blok konten hanya disiapkan saja karena sesuai
konsep modular blok konten blank/kosong yang nantinya akan diisi dengan file lain (file content, silahkan lihat
konsep modular di bagian pendahuluan modul ini). Tempatkan syntax berikut dalam blok
<div class="main-panel">............</div>
(perhatikan langkah No. 12) syntaxnya sebagai berikut
<div class="content" id="blokkonten">
</div>
19. Sampai langkah diatas, kita telah berhasil membuat file basis atau file template. Jika dijalankan melalui
browser, maka hasilnya akan memunculkan visual berupa webpage (halaman website) tanpa konten.
20. Langkah berikutnya adalah membuat layout halaman beranda. Konsep halaman beranda adalah menampilkan
data berupa infografis hasil perhitungan data. Dikarena bahasan kita belum mencapai hal tersebut, maka kita
buat halaman beranda dengan informasi data statis. Silahkan membuat file yang bernama beranda.html
tempatkan dalam folder dp1 dan sejajar dengan file index.html.
21. Langkah berikutnya adalah menulis syntax pada file beranda.html syntaxnya sebagai berikut
<div class="panel-header bg-primary-gradient">

<div class="page-inner py-5">
<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">
<div>
<h2 class="text-white pb-2 fw-bold">Beranda</h2>
<h5 class="text-white op-7 mb-2">Halaman Beranda Informasi Sistem</h5>
</div>
</div>
</div>
</div>
<div class="page-inner mt--5">
<div class="row mt--2">
<div class="col-md-3">
<div class="card card-success">
<div class="card-header">
<div class="card-title">Data 1</div>
</div>
<div class="card-body pb-0">
<div class="mb-4 mt-2">
<h1>123456</h1>
</div>
</div>
</div>
</div>
<div class="card card-info">
</div>
<h1>123456</h1>
</div>
</div>
</div>
</div>
<div class="card card-warning">
</div>
<h1>123456</h1>
</div>
</div>
</div>
</div>
<div class="card card-danger">
</div>
<h1>123456</h1>
</div>
</div>
</div>
</div>
</div>
</div>
22. Langkah berikutnya adalah membuat function yang digunakan untuk menangani konten sekaligus pengaturan
default bahwa saat pertama kali dijalankan akan langsung mengisi blok konten yang kosong dengan file
beranda.html tanpa harus klik menu beranda.
Letakkan syntax berikut diantara </div>............</body>

23. Langkah berikutnya adalah memberikan Event pada menu Beranda agar menu beranda saat diklik akan
memanggil function konten. Ubah syntax berikut Menjadi
24. Sampai langkah No 23 kita telah berhasil untuk membuat aplikasi dengan konsep modular tahap awal. Jika
dijalankan maka akan menghasilkan interface seperti berikut

Praktikum 4

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktikum 4

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM

Header, Menu Dll Header, Menu Dll

Blank/Kosong Content Content

File Basis / Template File Webpage Berkonsep Modular

1. Buka link https://drive.google.com/drive/folders/1fRm7I_AHSEjnIrSxXTKk3m4RloBbn1vJ?usp=sharing

<body>............</body> syntaxnya sebagai berikut:

<div class="main-header">............</div> syntaxnya sebagai berikut:

Hasil tampilannya sebagai berikut

............</nav> syntaxnya sebagai berikut:

Hasil tampilannya seperti gambar dibawah

<div class="panel-header bg-primary-gradient">

Letakkan syntax berikut diantara </div>............</body>

Anda mungkin juga menyukai