Membuat Aplikasi Konsep Modular di Server Lokal

Pada praktikum sebelumnya kita mencoba untuk membuat aplikasi berbasis Modular tahap pertama yang artinya fokus untuk membangun pada file basis atau
file template. Pada praktikum kali ini kita akan melanjutkan membangun aplikasi berbasis modular yang terfokus pada sisi file konten. File konten yang dibuat ada
2 yaitu file konten yang berisi form dan konten tentang aplikasi. Konten yang berisi form memiliki mekanisme untuk mengitung hari kelahiran beserta pasarannya.
Sedangkan tentang aplikasi berisi informasi mengenai aplikasi yang dibangun. Berikut merupakan urutan langkah-langkah praktikum:
1. Copy folder dp1 yang ada di HTDOCS. Kemudian paste di HTDOCS dan ubah nama foldernya menjadi dp2.
2. Buat sebuah file konten yang bernama form.html tempatkan file tersebut sejajar dengan index.html.
3. Isikan syntax berikut ke dalam file form.html
<div class="row mt-5">
<div class="col-md-4 ml-auto mr-auto">
<div class="card">
<div class="card-header">
<div class="card-title">Form Hari Kelahiran & Pasaran</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Isi Tanggal Lahir</label>
<input type="date" class="form-control" id="txttgllahir" style="font-size: 20px;">
<small class="form-text text-muted">Isi Sesuai Dengan Format yang Muncul</small>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary">Tampilkan</button>
<button type="button" class="btn btn-danger">Reset</button>
</div>
<div class="form-group">
<p id="blokhasil" style="font-size: 20px;">Hari Kelahiran: ?????</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
4. Langkah berikutnya adalah meng-set menu Form agar jika saat dipilih akan menampilkan file form.html sebagai konten menggantikan file beranda.html ubah
syntax berikut yang ada di index.html
<a href="#"><i class="icon-note"></i><p>Form</p></a>
Menjadi
<a href="#" onclick="konten('form.html')"><i class="icon-note"></i><p>Form</p></a>
5. Jika langkah No. 4 telah dilakukan untuk melihat hasil layoutnya, silahkan menjalankan aplikasinya. Jika berhasil, maka gambar seperti berikut

6. Langkah berikutnya adalah membuat function yang digunakan untuk mencari hari kelahiran. Buat sebuah function yang bernama HitungHari dan tempatkan
function tersebut sejajar dengan function lain yang ada di index.html. Syntaxnya sebagai berikut
function HitungHari(){
let terjemahhari = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
let x = $("#txttgllahir").val();
let tgllahir = new Date(x);
return terjemahhari[tgllahir.getDay()];
}
7. Langkah berikutnya membuat function yang digunakan untuk mencari pasaran. Buat sebuah function yang bernama HitungPasaran dan tempatkan function
tersebut sejajar dengan function lain yang ada di index.html. Syntaxnya sebagai berikut
function HitungPasaran(){
let terjemahpasar = ["Kliwon","Legi","Pahing","Pon","Wage"];
let x = $("#txttgllahir").val();
 let tgllahir = new Date(x);
let y = "1900-01-01";
let tglawal = new Date(y);
let selisih = (Date.parse(tgllahir.toGMTString())-Date.parse(tglawal.toGMTString()))/(1000*60*60*24);
let hasil = Math.floor(selisih + 2) % 5;
return terjemahpasar[hasil];
}
8. Langkah berikutnya membuat function yang digunakan untuk menampilkan apa yang dihasilkan oleh function HitungHari dan HitungPasaran. Buat sebuah
function yang bernama tampil dan tempatkan function tersebut sejajar dengan function lain yang ada di index.html. Syntaxnya sebagai berikut
function tampil(){
let hari = HitungHari();
let pasaran = HitungPasaran();
let hasil = "Hari Kelahiran: " + hari + " " + pasaran;
$("#blokhasil").html(hasil);
}
9. Langkah berikutnya membuat function yang digunakan untuk mengkosongkan isian tanggal dan blok hasil (kembali ke nilai default awal). Buat sebuah function
yang bernama kosong dan tempatkan function tersebut sejajar dengan function lain yang ada di index.html. Syntaxnya sebagai berikut
function kosong(){
$("#txttgllahir").val("");
$("#blokhasil").html("Hari Kelahiran: ?????");
}
10. Langkah berikutnya adalah memberikan Event pada tombol Tampil dan Reset yang ada pada form di file form.html. Ubah syntax berikut
<button type="button" class="btn btn-primary">Tampilkan</button>
<button type="button" class="btn btn-danger">Reset</button>
Menjadi
<button type="button" class="btn btn-primary" onclick="tampil()">Tampilkan</button>
<button type="button" class="btn btn-danger" onclick="kosong()">Reset</button>
11. Sampai langkah No. 10 jika aplikasi dijalankan sesuai prosedur (mengisi tanggal lahir kemudian menekan tombol tampilkan), maka akan menghasilkan gambar
seperti berikut
12. Buat sebuah file konten yang bernama about.html tempatkan file tersebut sejajar dengan index.html.
13. Isikan syntax berikut ke dalam file about.html
<div class="row mt-5">
<div class="col-md-6 ml-auto mr-auto">
<p class="row" style="text-align:justify; font-size: 20px;">
<img src="assets/img/bg-abstract2.png" style="margin-bottom: 25px; display:block; margin-left:auto;
margin-right:auto; text-align:center; width: 50%; border-radius: 15px;">
Praktikum 2 ini merupakan praktikum matakuliah Desktop Programming yang membuat aplikasi berbasis modular
dengan menggunakan Framework CSS Varian Bootstrap yaitu Atlantis Lite Master
</p>
</div>
</div>
14. Langkah berikutnya adalah meng-set menu Tentang agar jika saat dipilih akan menampilkan file about.html sebagai konten menggantikan file beranda.html
ubah syntax berikut yang ada di index.html
<a href="#"><i class="icon-tag"></i><p>Tentang</p></a>
Menjadi
<a href="#" onclick="konten('about.html')"><i class="icon-tag"></i><p>Tentang</p></a>
15. Sampai langkah No. 14 maka aplikasi telah utuh seluruh fiturnya sehingga jika kita klik menu-menunya akan memunculkan konten-konten sesuai menu.
16. Jika dianalisa lebih lanjut, maka terdapat beberapa logika yang kurang sesuai atau terlupakan untuk dipikirkan. Misal
a. Jika kita klik menu selain beranda, maka status menu yang aktif tetap di menu beranda. Contoh seperti gambar dibawah ini
Solusi yang dapat dilakukan adalah silahkan ubah syntax berikut yang ada di file index.html
<li class="nav-item active">
<a href="#" onclick="konten('beranda.html')"><i class="icon-layers"></i><p>Beranda</p></a>
</li>
<li class="nav-item">
<a href="#" onclick="konten('form.html')"><i class="icon-note"></i><p>Form</p></a>
</li>
<li class="nav-item">
<a href="#" onclick="konten('about.html')"><i class="icon-tag"></i><p>Tentang</p></a>
</li>
Menjadi
<li class="nav-item active mnsidebar" id="mnberanda">
<a href="javascript:void(0)" onclick="konten('beranda.html','#mnberanda')">
<i class="icon-layers"></i><p>Beranda</p>
</a>
</li>
<li class="nav-item mnsidebar" id="mnform">
<a href="javascript:void(0)" onclick="konten('form.html','#mnform')">
<i class="icon-note"></i><p>Form</p>
</a>
</li>
 <li class="nav-item mnsidebar" id="mnabout">
<a href="javascript:void(0)" onclick="konten('about.html','#mnabout')">
<i class="icon-tag"></i><p>Tentang</p>
</a>
</li>
Kemudian langkah berikutnya memodifikasi function konten. Modifikasi dilakukan untuk menambahkan logika dalam meng-non-aktifkan dan
mengaktifkan menu sehingga sesuai dengan konsep yang terlewatkan oleh kita. Ubah syntax berikut yang ada di index.html
konten("beranda.html");
function konten(namafile){
$("#blokkonten").load(namafile);
}
Menjadi
konten("beranda.html","#mnberanda");
function konten(namafile, namaid){
$("#blokkonten").load(namafile);
$(".mnsidebar").removeClass("active");
$(namaid).addClass("active");
}
Jika berhasil akan menghasilkan gambar seperti dibawah ini

b. Setelah memilih menu, maka sidebar tidak menghilang tetapi tetap muncul. Solusi yang dapat dilakukan adalah menambah logika untuk meng-klik button
dengan class sidenav-overlay-toggler. Modifikasi dapat dilakukan dengan ubah syntax berikut yang ada di index.html
<button class="btn btn-toggle sidenav-overlay-toggler"><i class="icon-menu"></i></button>
Menjadi
<button class="btn btn-toggle sidenav-overlay-toggler" id="btnx"><i class="icon-menu"></i></button>
Kemudian modifikasi function konten dengan menambahkan fungsi klik melalui expression. Ubah syntax berikut
function konten(namafile, namaid){
$("#blokkonten").load(namafile);
$(".mnsidebar").removeClass("active");
$(namaid).addClass("active");
 }
Menjadi
function konten(namafile, namaid){
$("#blokkonten").load(namafile);
$(".mnsidebar").removeClass("active");
$(namaid).addClass("active");
$("#btnx").click();
}
17. Silahkan dicoba kembali. Jika benar seluruh skenario telah lengkap sehingga dapat dijalankan semua fiturnya.