Scribd
Unggah
42 tayangan11 halaman

Praktek 1

Dokumen tersebut memberikan instruksi langkah-langkah untuk membuat aplikasi modular menggunakan Bootstrap Atlantis Lite Master pada server lokal. Langkah-langkahnya meliputi pengunduhan, penginstalan, dan konfigurasi Bootstrap serta membuat template dasar, header, navbar, dan menu sidebar untuk membangun struktur halaman awal aplikasi.

Diunggah oleh

Dans Yanns
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
42 tayangan11 halaman

Praktek 1

Dokumen tersebut memberikan instruksi langkah-langkah untuk membuat aplikasi modular menggunakan Bootstrap Atlantis Lite Master pada server lokal. Langkah-langkahnya meliputi pengunduhan, penginstalan, dan konfigurasi Bootstrap serta membuat template dasar, header, navbar, dan menu sidebar untuk membangun struktur halaman awal aplikasi.

Diunggah oleh

Dans Yanns
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/ 11

Membuat Aplikasi Konsep Modular di Server Lokal

Dalam membangun aplikasi Desktop berbasis Hybrid terutama pada bagian User Interface (tampilan) kita akan dihadapkan pada pilihan membangun model
interface sendiri atau menggunakan Framework CSS yang sudah tersedia. Saat kita memilih menggunakan framework, maka kita memilih framework yang sesuai
dengan kebutuhan project kita. Hal yang perlu diperhatikan adalah komposisi yang pas antara size (ukuran) Framework CSS, fitur, kemudahan serta dokumentasi
yang lengkap
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 Basis/Template File Konten File Webpage Berkonsep Modular

Berikut peralatan yang digunakan antara lain:


• Winrar atau sejenisnya (Winzip, Peazip, KGB Archieve, dll)
• Visual Studio Code atau sejenisnya (Sublime, Atom, Notepad++, dll)
• Web Server Apache bundling Xampp atau sejenisnya (USB Webserver, Wamp Server, Laragon, dll)
• Google Chrome atau sejenisnya (Mozilla Firefox, Opera, UC Browser, dll)
Setelah menyiapkan segala kebutuhan, maka kita dapat mulai melakukan praktikum instalasi. Berikut merupakan langkah-langkah instalasi Bootstrap varian Atlantis
Lite Master
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 dp1 di folder HTDOCS
8. Langkah berikutnya yaitu meng-copy folder assets yang ada di folder atlantis – examples ke folder dp1
9. Langkah berikutnya kita akan membuat file basis atau template yang diberi nama index.html yang ditempatkan di folder 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:
<div class="wrapper overlay-sidebar">
<div class="main-header">

</div>
<div class="sidebar sidebar-style-2">

</div>
<div class="main-panel">

</div>
</div>
13. Langkah berikutnya adalah membuat struktur Main Header. Tempatkan syntax berikut diantara
<div class="main-header">…………</div> syntaxnya sebagai berikut:
<div class="logo-header" data-background-color="blue2">

</div>
<nav class="navbar navbar-header navbar-expand-lg" data-background-color="blue2">

</nav>

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:
<a href="index.html" class="logo">
<img src="assets/img/logo.svg" alt="navbar brand" class="navbar-brand">
</a>
<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="icon-menu"></i></span>
</button>
<button class="topbar-toggler more"><i class="icon-options-vertical"></i></button>
<div class="nav-toggle">
<button class="btn btn-toggle sidenav-overlay-toggler"><i class="icon-menu"></i></button>
</div>
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">[email protected]</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
<div class="sidebar-wrapper scrollbar scrollbar-inner">
<div class="sidebar-content">
<ul class="nav nav-primary">
<li class="nav-item active">
<a href="#"><i class="icon-layers"></i><p>Beranda</p></a>
</li>
<li class="nav-item">
<a href="#"><i class="icon-note"></i><p>Form</p></a>
</li>
<li class="nav-item">
<a href="#"><i class="icon-tag"></i><p>Tentang</p></a>
</li>
</ul>
</div>
</div>
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="col-md-3">
<div class="card card-info">
<div class="card-header">
<div class="card-title">Data 2</div>
</div>
<div class="card-body pb-0">
<div class="mb-4 mt-2">
<h1>123456</h1>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-warning">
<div class="card-header">
<div class="card-title">Data 3</div>
</div>
<div class="card-body pb-0">
<div class="mb-4 mt-2">
<h1>123456</h1>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-danger">
<div class="card-header">
<div class="card-title">Data 4</div>
</div>
<div class="card-body pb-0">
<div class="mb-4 mt-2">
<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>
<script>
konten("beranda.html");
function konten(namafile){
$("#blokkonten").load(namafile);
}
</script>
23. Langkah berikutnya adalah memberikan Event pada menu Beranda agar menu beranda saat diklik akan memanggil function konten. Ubah syntax berikut
<li class="nav-item active">
<a href="#"><i class="icon-layers"></i><p>Beranda</p></a>
</li>
Menjadi
<li class="nav-item active">
<a href="#" onclick="konten('beranda.html')"><i class="icon-layers"></i><p>Beranda</p></a>
</li>
24. Sampai langkah No 23 kita telah berhasil untuk membuat aplikasi dengan konsep modular tahap awal. Jika dijalankan maka akan menghasilkan interface
seperti berikut

25. Jika Ada pertanyaan silahkan bertanya kepada pengajar.

Anda mungkin juga menyukai