Repository Universitas Komputer Indonesia

Pemrograman Web-1
Materi ini membahas mengenai label dan berbagai objek untuk input dan output pada w3 framewor

Suryana, Taryana

 
 
W3.CSS INPUT dan LABEL 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
11.W3.CCS Input 
Kelas w3-input memungkinkan Anda untuk membuat form input lebih baik dan lebih rapih, 
ada beberapa type masukan yang dapad digunakan, yaitu: 
Text 
Checkbox 
Select 
Radio 
 
11.1. Input Text 
Jika anda ingin memasukan data dalam bentuk kotak masukan satu baris, maka dapat 
digunakan input type text,  adapun penggunaannya adalah seperti berikut: 
 
 
<input class="w3-input" type="text" name=”namaobjek”> 
 
 
Contoh Misalkan anda ingin membuat form input, dengan nama variable akan disimpan di 
namasiswa, maka code programnya adalah sebagai berikut: 
 
<input class="w3-input" type="text" name=”namasiswa”> 
 
 
 
Misalkan Anda, ingin membuat form masukan sebagai berikut: 
 
 
 
Gambar 11.1. Form Input dengan Tipe Text 
 
NamaFile:css36.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container w3-blue"> 
  <h2>Input Form</h2> 
</div> 
<form class="w3-container"> 
  <p> 
  <label>Nama Lengkap</label> 
  <input class="w3-input" type="text"></p> 
  <p> 
  <label>Alamat</label> 
  <input class="w3-input" type="text"></p> 
  <p> 
  <label>Email</label> 
  <input class="w3-input" type="text"></p> 
</form> 
</body> 
</html> 
 
 
 
11.1.1 Mewarnai Label dan Input 
Apabila anda ingin mewarnai label atau input pada form, maka dapat dilakukan dengan 
menambahkan class “w3-text-namawarna”, contoh: 
 
<label class="w3-text-teal"><b>First Name</b></label> 
<input class="w3-input w3-light-grey" type="text"> 
  
 
 
11.1.2. Bordered Input 
Ketika membuat form dan anda ingin agar form inputan memiliki garis atau border makan dapat 
dilakukan dengan menambahkan class w3-border, contoh: 
 
<input class="w3-input w3-border w3-round" type="text"> 
<input class="w3-input w3-border w3-round-large" type="text"> 
 
 
11.1.3.Hoverable inputs 
Class w3-hover-color akan menambahkan warna background ketika kursor 
mouse berada diatas kotak inputan. 
input class="w3-input w3-hover-green" type="text"> 
 
 
11.1.4. Animate Input 
Membuat Form Input dengan menggunakan w3-animate-input, pada contoh ini akan ditampilkan 
form masukan dengan lebar default sebesar 135px atau bisa juga dalam %, kemudian ketika Kursor 
mouse anda Click di kotak inputan tadi, maka otomatis form input akan menjadi lebar begitu juga 
jika di click diluar kota input, maka form akan kembali ke awal 
 
Contoh: 
<p> 
<input class="w3-input w3-animate-input" type="text" style="width:135px"><br> 
<input class="w3-input w3-border w3-animate-input" type="text" style="width:30%"> 
</p> 
 
 
11.2. Input Card 
Jika anda menghendaki agar form input berbentuk seperti kartu, maka dapat ditambahkan 
class card seperti berikut: 
 
<div class="w3-card-4"> 
 <div class="w3-card-4"> 
    <div class="w3-container w3-green"> 
      <h2>DATA SISWA</h2> 
    </div> 
 <div> 
</div> 
 
 
NamaFile:css37.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-container"> 
  <h2>Input Card</h2> 
   
  <div class="w3-card-4"> 
    <div class="w3-container w3-green"> 
      <h2>DATA SISWA</h2> 
    </div> 
 
    <form class="w3-container"> 
      <p> 
      <input class="w3-input" type="text" name="nim"> 
      <label>NIM</label></p> 
      <p>      
      <input class="w3-input" type="text" name="namalengkap"> 
      <label>NAMA LENGKAP</label></p> 
    </form> 
  </div> 
</div> 
</body> 
</html> 
 
 
 
 
 
Gambar 11.2. Form Input Bentuk Kartu 
 
 
 
 
11.3. Input Checkbox 
Jika anda ingin membuat form input dengan pilihan berbentuk checkbox atau checklist, maka 
dapat digunakan kelas w3-check,  adapun perintah dasarnya adalah sebagai berikut: 
 
<input class="w3-check" type="checkbox" name="namaobjek"> 
 
<input class="w3-check" type="checkbox" checked="checked"> 
<label>Milk</label> 
 
<input class="w3-check" type="checkbox"> 
<label>Sugar</label> 
 
<input class="w3-check" type="checkbox" disabled> 
<label>Lemon (Disabled)</label> 
 
 
 
 
NamaFile:css38.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-card-4"> 
<p> 
  <div class="w3-container w3-orange"> 
    <h2>Bahasa Pemrograman</h2> 
  </div> 
  <form class="w3-container" action="action_page.php"> 
  <p> 
  <input class="w3-check" type="checkbox" checked="checked" name="pascal"> 
  <label>Pascal</label></p> 
  <p> 
  <input class="w3-check" type="checkbox" name="delphi"> 
  <label>Delphi</label></p> 
  <p> 
  <input class="w3-check" type="checkbox" disabled> 
  <label>Assembler (Disabled)</label></p> 
  <hr> 
 <p> 
<button class="w3-btn w3-round-xxlarge w3-purple">Kirim Form</button> 
</form> 
</div> 
</body> 
</html> 
 
 
 
 
Gambar 11.3. Form Input Checkbox 
 
 
 
11.4.INPUT TIPE RADIO 
Jika anda ingin membuat form input dengan pilihan berbentuk radio, maka dapat digunakan 
kelas w3-radio,  adapun perintah dasarnya adalah sebagai berikut: 
<input class="w3-radio" type="radio" name="namaobjek" value="nilai" checked> 
 
 
NamaFile:css39.html 
 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-card-4"> 
<p> 
  <div class="w3-container w3-orange"> 
    <h2>Jenis Kelamin</h2> 
  </div> 
  <form class="w3-container" action="action_page.php"> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" value="male" 
checked> 
  <label>Pria</label></p> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" value="female"> 
 
  <label>Wanita</label></p> 
  <p> 
  <input class="w3-radio" type="radio" name="gender" value="" 
disabled> 
  <label>Tidak Tahu (Disabled)</label></p> 
 <hr> 
 <p> 
<button class="w3-btn w3-round-xxlarge w3-purple">Kirim 
Form</button> 
</form> 
</div> 
</body> 
</html> 
 
 
 
Gambar 11.4. Form Input Radio 
 
 
 
11.5.Menggunakan Select Option 
Jika anda ingin membuat form dengan input berupa pilihan yang berbentuk dropdown, maka 
dapat digunakan kelas w3-select,  adapun perintah dasarnya adalah sebagai berikut: 
 
<select class="w3-select" name="namaobjek"> 
    <option value="" disabled selected>Pilihan Anda</option> 
    <option value="1">Satu</option> 
    <option value="2">Dua</option> 
    <option value="3">Tiga</option> 
    <option value="4">Empat</option> 
  </select> 
 
 
 
 
 
 
Contoh misalkan ingin dibuat pilihan seperti Gambar 11.5 berikut: 
 
 
Gambar 11.5. Menggunakan Select Option 
 
NamaFile:css40.html 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
 
<form class="w3-container w3-card-4" action="action_page.php"> 
<div class="w3-container w3-green"> 
   <h2>Memilih menggunakan Select Option</h2> 
  </div> 
   <select class="w3-select" name="option"> 
    <option value="" disabled selected>Tempat Pavorit Kamu</option> 
    <option value="1">Cafe</option> 
    <option value="2">Taman</option> 
    <option value="3">Gunung</option> 
 <option value="4">laut</option> 
  </select> 
  <p><button class="w3-btn w3-teal">Kirim</button></p> 
</form> 
</html> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Tugas 11. Buat Form Seperti berikut: 
Data Form, warna, isi, Boleh di Rubah asal memenuhi 4 jenis Tipe Input, yaitu ada text,select, radio 
dan checkbox 
NAMAFile:TUGAS11-NIM-NAMA.PDF 
 
 
 
Kirim Screenshot program dan Code Program dalam bentuk PDF ke Tugas Kuliah Online, dikirim paling 
telat hari minggu 
 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2022) Materi 10. Display Layout Dan Button. [Teaching Resource] 
2. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching Resource] 
3. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching Resource] 
5. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam Html. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan Html5. [Teaching Resource] 
8. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam Html. [Teaching Resource] 
9. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching Resource] 
10. Suryana, Taryana (2022) Materi 2 Memformat Dokumen Html. [Teaching Resource] 
11. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching Resource] 
12. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
13. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
14. https://www.w3schools.com/html, September, 2021 
15. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
16. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
17. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
18. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
19. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
20. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
21. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
22. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
23. https://www.w3schools.com/html, September, 2021 
24. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
25. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
26. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
28. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
30. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
31. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
32. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
33. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
34. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
35. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
36. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
37. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
38. https://www.w3schools.com/html 
 
 
 


Materi 11 Input Dan Label

Komputer Aplikasi IT-5
Materi ini membahas mengenai Perbaikan data apabila dalam database perkawinan tersebut ditemukan ada data yang salah yang harus diperbaiki
adapun perintah SQL yang digunakan adalah UPDATE Perkawinan Set NamaField=&#39;Isi Data Baru&#39; where no_akta=&#39;noakta yang diperbaiki&#39

 
Perbaikan Data Perkawinan  
Oleh: 
Taryana Suryana M.Kom 
Jurusan Ilmu Pemerintahan Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
14. Program Edit Data Perkawinan 
Pada bagian ini akan dibahas mengenai pembuatan program untuk melakukan edit data atau 
perbaikan data perkawinan yang ada dalam database atau tabel.  
Adapun cara kerja dari Edit data adalah sebagai berikut: 
1. Tampilkan Form Edit Data Perkawinan 
2. Masukan no_akta atau nama_suami yang akan dicari 
3. Lakukan pencarian kedalam database,  
4. Jika data ditemukan tampilkan kelayar komputer, kemudian lakukan Edit Data 
5. Simpan data hasil perbaikan kedalam database 
 
Adapun file yang akan dibuat yaitu: 
1. edit_perkawinan.html 
2. proses_edit_perkawinan.php 
3. save_edit_perkawinan.php 
 
 
14.1.Membuat File Edit Data Member 
File Edit_Member.html berfungsi untuk menampilkan Form Pencarian Edit Data Member, 
berdasarkan keyword field noakta atau nama_suami: 
 
NamaFile:edit_perkawinan.html 
 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body background="paper.gif"> 
<center> 
<div class="w3-container"> 
<p> 
<div class="w3-panel w3-blue w3-card-4 w3-round-xxlarge"> 
  <p><h1>Form Pencarian Edit Data Perkawinan</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
 
 
<form action="proses_edit_perkawinan.php" method=post> 
<hr> 
<table> 
  <tr><td><select name=pilihan> 
  <option value=noakta>NOAKTA 
  <option value=nama_suami>NAMA SUAMI 
  </select> 
  <td>:<input name=data_cari size=16> 
</table> 
<hr> 
<input type=submit value="Cari"  class="w3-btn w3-deep-orange w3-round-
xlarge" style="width:150px"> 
<input type=reset value="Reset"  class="w3-btn w3-gray w3-round-xlarge" 
style="width:150px"> 
</p> 
</div> 
</html> 
 
 
14.2. Menampilkan Data Yang Akan di Edit 
File proses_edit_perkawinan.php berfungsi untuk melakukan proses pencarian data 
kedalam tabel berdasarkan keyword atau kunci field yang diinginkan, kemudian jika data 
ditemukan tampilkan kelayar form Proses Edit Data,  
NamaFile:proses_edit_perkawinan.php 
 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body background="paper.gif"> 
<center> 
<div class="w3-container"> 
<p> 
<div class="w3-panel w3-blue w3-card-4 w3-round-xxlarge"> 
  <p><h1>Pencarian Data Akta Perkawinan</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
<form action="save_edit.php" method=post> 
<hr> 
<table border=0> 
<?php 
require ("koneksi.php"); 
$pilihan=$_POST['pilihan']; 
$data_cari=$_POST['data_cari']; 
$sql="select * from perkawinan where $pilihan='$data_cari' "; 
 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
if($row) 
{ 
do 
{ 
 list($noakta,$tanggal,$nik_suami,$nama_suami,$nik_istri,$nama_istri, 
 $alamat,$kota, $kodepos,$telp)=$row; 
echo "<tr><td width=120>NO AKTA<td width=550>:<input name=noakta value='$noakta'>"; 
echo "<td rowspan=10><img src='$nik_suami.jpg' width=200 height=250>"; 
echo "<td rowspan=10><img src='$nik_istri.jpg' width=200 height=250>"; 
echo "<tr><td>TANGGAL<td>:<input name=tanggal type=date value='$tanggal'>"; 
echo "<tr><td>NIK SUAMI<td>:<input name=nik_suami value='$nik_suami' size=16>"; 
echo "<tr><td>NAMA SUAMI<td>:<input name=nama_suami value='$nama_suami' size=20>"; 
echo "<tr><td>NIK ISTRI<td>:<input name=nik_istri value='$nik_istri' size=16>"; 
echo "<tr><td>NAMA ISTRI<td>:<input name=nama_istri value='$nama_istri' size=20>"; 
 
echo "<tr><td>ALAMAT<td>:<input name=alamat value='$alamat' size=50>"; 
echo "<tr><td>KOTA<td>:<input name=kota value='$kota' size=30>"; 
echo "<tr><td>KODEPOS<td>:<input name=kodepos value='$kodepos' size=5>"; 
echo "<tr><td>TELP<td>:<input name=telp value='$telp' size=20>"; 
echo "</table>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
} 
else 
{ 
 echo "<div class='w3-panel w3-red w3-round-xxlarge'> 
  <h1 class='w3-text-white' style='text-shadow:1px 1px 0 #444'> 
  <b>Maaf Data Tidak Di Temukan ..!</b></h1> 
</div>"; 
} 
?> 
 
</table> 
<hr> 
<input type=submit value="Save Edit"  class="w3-btn w3-deep-orange w3-round-xlarge" 
style="width:150px"> 
<input type=reset value="Reset"  class="w3-btn w3-gray w3-round-xlarge" style="width:150px"> 
</p> 
</div> 
</html> 
 
Perhatikan Perintah SQL untuk pencarian berikut: 
$sql="select * from perkawinan where noakta='$data_cari' "; 
 
 
Artinya tampilkan semua field dari tabel PERKAWINAN yang memiliki NOAKTA sama 
dengan yang diinputkan 
 
 
14.3. Membuat Program Untuk Menyimpan Edit Data Perkawinan 
Untuk Melakukan penyimpan data dari Form Edit Data  yang sedang di Edit kedalam 
database digunakan perintah SQL Update SET Namafile. 
 
Berikut Sintak SQL untuk Update Data 
Update perkawinan set nama=’$nama’ where noakta=’$id_member’; 
 
NamaFile:save_edit_perkawinan.php 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body background="paper.gif"> 
<center> 
<div class="w3-container"> 
<p> 
<div class="w3-panel w3-blue w3-card-4 w3-round-xxlarge"> 
  <p><h1>SAVE DATA PERKAWINAN</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
 
<table>  
<?php  
require ("koneksi.php");  
$noakta=$_POST['noakta'];  
 
$tanggal=$_POST['tanggal'];  
$nik_suami=$_POST['nik_suami'];  
$nama_suami=$_POST['nama_suami']; 
$nik_istri=$_POST['nik_istri']; 
$nama_istri=$_POST['nama_istri']; 
$alamat=$_POST['alamat']; 
$kota=$_POST['kota']; 
$kodepos=$_POST['kodepos']; 
$telp=$_POST['telp']; 
echo "<tr><td>NOAKTA<td>: $noakta"; 
echo "<tr><td>Tanggal<td>: $tanggal"; 
echo "<tr><td>NIK Suami<td>: $nik_suami"; 
echo "<tr><td>Nama Suami<td>: $nama_suami"; 
echo "<tr><td>NIK Istri<td>: $nik_istri"; 
echo "<tr><td>Nama Istri<td>: $nama_istri"; 
echo "<tr><td>Alamat<td>: $alamat"; 
echo "<tr><td>Kota<td>: $kota"; 
echo "<tr><td>Kodepos<td>: $kodepos"; 
echo "<tr><td>Telp<td>: $telp"; 
echo "</table><hr>"; 
if($noakta!="") 
{ 
 require ("koneksi.php");  
 $sql="update perkawinan set 
  tanggal='$tanggal', 
  nik_suami='$nik_suami', 
  nama_suami='$nama_suami', 
  nik_istri='$nik_istri', 
 nama_istri='$nama_istri', 
 alamat='$alamat', 
 kota='$kota', 
 kodepos='$kodepos', 
 telp='$telp' where noakta='$noakta' "; 
 $hasil=mysqli_query($conn,$sql);  
 echo "<h1>Data Berhasil di Update "; 
} 
else 
{ 
echo "<div class='w3-panel w3-red w3-round-xxlarge'> 
  <h1 class='w3-text-white' style='text-shadow:1px 1px 0 #444'> 
  <b>Maaf Noakta Tidak Boleh Kosong ..!</b></h1> 
</div>"; 
} 
?> 
</html> 
 
 
 
 
 
 
  
 
 
14.4.Menampilkan Hasil Via Browser 
Setelah  ketiga program yaitu edit_member.html, proses_edit_member.php dan 
save_edit_member.php selesai dibuat dan disimpan sesuai nama file diatas, kemudian adalah 
menampilkannya ke layar komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara berikut: 
1. Jalankan Browser 
2. Pada Address Bar, ketikan:localhost/ip/perkawinan 
3. Click File  edit_perkawinan.html 
Akan ditampilkan form pencarian seperti berikut: 
 
 
Gambar 14.1. Form Edit Data Perkawinan 
 
4. Masukan NOAKTA yang akan dicari, misalnya  
BDG-09-01-2023-00001 
5. Click Tombol Cari, selanjutnya akan ditampilkan hasil seperti berikut Jika data 
yang dicari ada: 
 
 
Gambar 14.2. Hasil Pencarian Edit Data Perkawinan 
 
 
Anda dapat melakukan perbaikan pada form diatas sesuai dengan data yang ingin 
dirubah atau diperbaiki, kemudian Click tombol Save_Edit, untuk menyimpan 
perubahan tersebut, dan selanjutnya akan ditampilkan layar seperti berikut: 
 
 
 
Gambar 14.4. Menyimpan Data yang Sudah di Edit 
 
 
Jika data yang akan di Edit, tidak ada dalam database, maka akan ditampilkan 
jendela seperti berikut: 
 
 
. 
Gambar 14.5. NOAKTA yang dicari tidak ada 
 
 
REFERENSI: 
1. Suryana, Taryana (2023) Bab 13 Aplikasi Pencarian Data Perkawinan. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 12. Aplikasi Pencatatan Data Perkawinan. [Teaching Resource] 
3. Suryana, Taryana (2023) Materi 11 Aplikasi Ijin Gangguan -ho. [Teaching Resource] 
4. Suryana, Taryana (2023) Integrasi Menu Akta Kelahiran Dan Kematian. [Teaching Resource] 
5. Suryana, Taryana (2022) Materi 10 W3 Css Framework. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 9 Akta Kematian. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 8 Membuat Aplikasi Akta Kelahiran. [Teaching Resource] 
8. Suryana, Taryana (2022) Materi 7 Hapus Data Ktp. [Teaching Resource] 
9. Suryana,Taryana (2022) 6.edit Data Ktp. [Teaching Resource] 
10. Suryana, Taryana (2022) Materi 5. Pencarian Data E-ktp. [Teaching Resource] 
11. Suryana, Taryana (2022) Memasukan Atau Menambah Data Ektp. [Teaching Resource] 
12. Suryana, Taryana (2022) Membuat Form Memasukan Data Pegawai. [Teaching Resource] 
13. Suryana, Taryana (2022) Materi 3 Membuat Aplikasi E-ktp. [Teaching Resource] 
14. Suryana, Taryana (2022) Membuat Database. [Teaching Resource] 
15. Suryana, Taryana (2022) Instalasi Xampp Untuk Belajar Pemrograman E-government. [Teaching 
Resource] 
16. Suryana, Taryana (2022) Pengenalan E-government Dan Aplikasi Pendukung. [Teaching Resource] 
17. Suryana, Taryana (2022) Instalasi Xampp Untuk Belajar Pemrograman E-government. [Teaching 
Resource] 
18. Suryana, Taryana (2022) Menambah Data Dan Pencarian Data Akta Perkawinan. [Teaching Resource] 
19. Suryana, Taryana (2021) Membuat Aplikasi Integrasi Akta Perkawinan. [Teaching Resource] 
20. Suryana, Taryana (2021) Studi Kasus Integrasi Program Administrasi Ijin Gangguan. [Teaching 
Resource] 
21. Suryana, Taryana (2021) .delete Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
22. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan Mysql. [Teaching 
Resource] 
23. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
24. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
25. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
26. https://www.w3schools.com/  September, 2021 
27. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, Jogyakarta 
28. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
29. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-government. [Teaching Resource] 
30. Suryana, Taryana (2021) Membuat Database Dengan Phpmyadmin. [Teaching Resource] 
31. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching Resource] 
32. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
33. Suryana, Taryana (2021) Membuat Aplikasi Kependudukan. [Teaching Resource] 
34. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
35. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
36. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
37. https://www.w3schools.com/  September, 2021 
38. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, Jogyakarta 
39. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
40. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-government. [Teaching Resource] 
41. Suryana, Taryana (2021) Membuat Database Dengan Phpmyadmin. [Teaching Resource] 
42. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
43. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
44. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
45. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
 
46. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 
 
 
  


Materi 14 Perbaikan Data Perkawinan

Pemrograman Web-1
Materi ini membahas mengenai cara mempublikasi halaman website yang telah dibuat untuk di onlinekan di Internet baik menggunakan Free Web Hosting, maupun
menggunakan Web Hosting Berbayar

 
 
PUBLIKASI WEB KE INTERNET 
Pemrograman Web 1 Tahun Akademik 2022-2023 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
14.1.HOSTING WEB 
Agar program dan latihan html yang pernah dibuat dapat dibuka dari seluruh dunia maka program 
tersebut harus di hosting di web server. Ada dua pilihan layanan, yaitu yang berbayar dan yang gratis. 
Anda boleh menghosting atau mempublikasikan di server mana saja, silahkan anda bisa cari di google 
dengan mengetikan “hosting gratis”  atau “free hosting” dan lain-lain. 
 
Sebelum memulai materi ini, alangkah baiknya siapkan terlebih dahulu Tugas yang diberikan di 
pertemuan sebelumnya.  Adapun ketentuannya adalah: 
1. Website terdiri dari Minimal Ada 5 Click Artikel, ditambah dengan Home dan Profile. 
2. Supaya lebih gampangl lagi, simpan semua file dalam folder baru, misalnya tugas13, semua 
file termasuk file html, gambar dan file w3.css simpan disana 
3. Ganti nama File Tugas13.html menjadi index.html  menggunakan huruf kecil semua 
4. Nama File Gambar juga harus huruf kecil semua, dan jangan menggunakan spasi. 
5. Tab menu Profile, Tuliskan Nim,Nama,Kelas, tambahin Foto kamu juga boleh. 
6. Karena Akan di Onlinekan di Internet, tambahkan dan atur agar tulisan dan gambarnya sesuai. 
 
 
 
 
 
 
 
 
 
 
Pada materi ini akan dibahas bagaimana hosting di web server yang gratis yang beralamat di : 
https://www.000webhost.com/. 
Langkah-langkahnya adalah sebagai berikut: 
1. Jalankan browser buka alamat berikut: https://www.000webhost.com/ ,  
Selanjutnya akan ditampilkan jendela berikut: 
 
 
Gambar 14.1 Halaman Utama 
2. Pilih Free Web Hosting, dan Click tombol GET STARTED 
3. Pilih FREE SIGN UP 
 
Gambar 14.2. Memilih Jenis Hosting 
 
 
4. Jika Anda memiliki email di Google, gunakan dan Click LOG IN WITH GOOGLE 
 
Gambar 14.3 Halaman Sign Up / Pendaftaran 
 
5. Masukan Username dan Password Google Anda, jika berhasil akan ditampilkan jendela seperti 
berikut: 
 
Gambar 14.4 Halaman Jika Berhasil Login 
 
6. Click LET’S CREATE SOME MAGIC,  Akan ditampilkan pilihan berikut: 
 
 
 
Gambar 14.5. Pilih Jenis Website 
7. Click Create Web Design 
 
Gambar 14.6. Pilih Kategori Website 
 
8. Click Other, masukan nama Project, kemudian click ok 
Nama Project, masukan Nama Depan kamu, harus UNIK kalau udah ada yang menggunakan akan 
ditolak oleh server: 
Nama Project: Penting banget di ingat, nantinya akan menjadi nama domain website kamu di 
internet: misal kalau tadi name Projectnya:taryanarx maka domain internetnya menjadi : 
https://taryanarx.000webhostapp.com/ 
Alamat inilah yang nantinya bisa dibuka dari mana saja. 
 
 
 
Gambar 14.7. Masukan Nama Project 
 
Tunggu beberapa saat jika, project berhasil dibuat akan ditampilkan jendela berikut:, jika tidak  
berhasil, ulangi isi kembali nama project nya. 
 
Jika berhasil ditampilkan jendela berikut: 
 
Gambar 14.8. Halaman Upload Your Site 
 
9. Click tombol Upload Your Site 
 
 
 
Gambar 14.9. Pilic Public_html dan Upload Files 
 
10. Pada layar sebelah kiri, click Public_html, kemudian pada jendela atas kanan, click tombol 
Upload Files 
 
Gambar 14.10. Select Files 
 
11. Click tombol Select Files 
 
 
 
Gambar 14.11. Semua File yang akan di upload dipilih 
 
12. Select semua file yang digunakan untuk membuat Website kamu, File tugas13.html file w3.css 
dan semua gambar yang digunakan, kemudian click OPEN: 
Nama file tugas13.html harus diganti namanya menjadi index.html 
 
 
Gambar 14.12. Upload File yang tadi di Select 
 
 
13. Click tombol Upload. Untuk mengirimkan Files ke Server, dan jika berhasil dikirim akan 
ditampilkan jendela seperti berikut: 
 
 
 
Gambar 14.13. Contoh semua file telah di Upload ke Server 
 
 
14. Untuk melihat hasilnya buka tab baru di jendela browser, kemudian ketikan 
https://namaproject. 000webhostapp.com 
 
NamaProject adalah NamaProject anda Masing-masing, misalnya tadi namaproject saya adalah 
taryanarx. Maka buka di Browsernya menjadi  https://taryanarx.000webhostapp.com/ 
 
Hasilnya kira-kira seperti ini. 
 
 
 
Ok, selamat belajar dan jangan lupa terus mencoba, kamu harus bisa, harus berhasil……tetep 
semangat 
 
“Tidak Berat Membawa Ilmu Berapapun Banyaknya” 
 
Kamu bisa Coba di Webhosting yang lain, misalnya  
https://github.io atau https://pages.github.com/ 
 
 kalau untuk latihan boleh yang gratisan dulu, nah  kalau kamu serius ingin memiliki website 
premium dengan domain sendiri kamu bisa membelinya via webhosting yang tersedia. 
 
Contohnya: 
www.hostinger.co.id 
www.masterweb.com 
www.jagoanhosting.com 
www.qwords.com 
 
Nb: 
Jika sudah berhasil dan Online di Internet, silahkan kirimkan, link atau alamat website kamu: 
Alamat Website melalui: 
https://demo.ciwaruga.com/ 
 
Terimakasih, sampai jumpa lagi di Semester berikutnya, tetap jaga Protokol Kesehatan, semoga 
kita diberi rizki dan sehat selalu 
 
Aamiin YRA 
Taryana Suryana.M.Kom 
Teknik Informatika Unikom 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2023) Materi 13 Membuat Menu Navigasi Dengan W3 Css. [Teaching 
Resource] 
2. Suryana, Taryana (2023) Materi 12 W3 Css Animation Effect. [Teaching Resource] 
3. Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3 Framework. [Teaching Resource] 
4. Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
5. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button. [Teaching Resource] 
6. Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3 Framework. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching Resource] 
8. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
9. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching Resource] 
10. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
11. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam Html. [Teaching Resource] 
12. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan Html5. [Teaching Resource] 
13. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam Html. [Teaching Resource] 
14. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching Resource] 
15. Suryana, Taryana (2022) Materi 2 Memformat Dokumen Html. [Teaching Resource] 
16. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching Resource] 
17. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
18. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
19. https://www.w3schools.com/html, September, 2021 
20. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
21. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
22. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
23. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
24. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
25. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
26. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
27. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
28. https://www.w3schools.com/html, September, 2021 
29. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
30. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
31. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
32. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
33. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
34. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
35. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
36. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
37. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
38. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
39. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
40. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
41. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
42. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
43. https://www.w3schools.com/html 
44. https://www.w3schools.com/html/ 
 
45. https://www.w3schools.com/css/ 
46. https://www.w3schools.com/w3css/ 
47. Introducing HTML5, Bruce Lawson,Remy Sharp New Riders; 1st edition (July 11, 2010) 
48. Beginning HTML5 and CSS3: The Web Evolved (Expert's Voice in Web Development) 1st ed. 
Edition 
by Christopher Murphy  (Author), Richard Clark  
Publisher  :  Apress; 1st ed. edition (January 26, 2013) 
 
49. HTML5 and CSS3: Develop with Tomorrow's Standards Today (Pragmatic Programmers) 1st 
Edition 
by Brian P. Hogan  (Author) Pragmatic Bookshelf; 1st edition (January 17, 2011) 
 
50. HTML5 for Web Designers Jeremy Keith,Rachel Andrew First Ed. May 4, 2010; Second Ed. Feb 
17, 2016 
 
 
 
 
 


Materi 14. Publikasi Halaman Web Ke Internet - Web Hosting

Pemrograman Web 2
Materi ini membahas mengenai Array dan Method yang ada dalam arra

 
BAB 4 
ARRAY DALAM JAVASCRIPT 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
  
4.1. Pengertian Array  
Array merupakan suatu tipe data yang berisi kumpulan nilai atau tipe data lain, misalnya 
seperti integer, string, number,  boolean, floating dan lain-lain, selain itu Array juga 
digunakan untuk menampung banyak nilai dalam satu variabel  
Dalam JavaScript, Array memiliki 2 cara untuk menuliskannya, cara pertama 
penulisan dengan menggunakan kurung siku [ ], yang kedua menggunakan 
keyword new Array(). 
Urutan Indek array dimulai dari nol (0) dan bukan dari 1 
Sintak Penulisan Array 
var array_name = [item1, item2, ...];       
 
 
Contoh deklarasi Array dan cara menampilkannya 
NamaFile:array1.html 
<script> 
    var kota= ['Bandung', 'Ciwaruga', 'Cimahi','Garut']; 
    document.write(kota[2]); 
</script> 
 
 
 
Gambar 4.1. Menampilkan Array nomor indek ke 2 
 
Sintak Deklarasi Array Menggunakan Perintah new array 
 
var array_name = new array(item1, item2, ...);       
 
Contoh kode Program Menggunakan new array   
NamaFile:array2.html 
<h3>Array dengan sintak new Array</h3> 
<br> 
<script> 
var hari=new Array('Minggu','Senin','Selasa', 'Rabu','Kamis','Jumat'); 
document.write("Sekarang ",hari[1]," Besok  ",hari[2],"<br>"); 
</script>  
 
 
Gambar 4.2 Contoh Keluaran Array 
 
Jika anda ingin menampilkan seluruh isi array, maka dapat dilakukan dengan 
menggunakan perulangan. 
Namafile:array3.html 
<script> 
   var kota= ['Bandung', 'Ciwaruga', 'Cimahi','Garut']; 
   //Menampilkan seluruh isi array 
  document.write("Menampilkan dengan perulangan For <hr>"); 
  for(i=0;i<kota.length;i++) 
       document.write(kota[i],"<br>"); 
  
  var nama= ['Asep', 'Iwan', 'Cepi','Agus','Dadang']; 
  document.write("<br>Menampilkan dengan for in<hr>"); 
  for(i in nama) 
   document.write(i,".",nama[i]+"<br>"); 
 </script> 
 
 
 
 
Gambar 4.3.Menampilkan seluruh isi Array 
 
4.2. Jenis-Jenis Method Array  
Untuk mempermudah penggunaan array,  Java Script menyediakan beberapa fungsi yang 
melekat pada setiap variabel array (atau lebih tepat disebut dengan method.  
Berikut adalah method objek array di dalam JavaScript. 
 
1) join() 
2) reserve() 
3) sort() 
4) concat() 
5) slice() 
6) splice() 
7) push dan pop() 
8) shift() dan unshift() 
9) toString() dan toLocaleString() 
 
  
 
 
4.2.1.Method Array Join () 
Method Array .join() berfungsi untuk menggabungkan elemen array menjadi sebuah string. Sebuah argumen 
bisa diinputkan kedalam method ini yang akan berfungsi sebagai karakter ’pembatas’ untuk menyatukan array. 
Berikut adalah contoh penggunaan method join() dalam JavaScript: 
NamaFile:array5.html 
<script> 
    var array1 = [1,2,3,4,5,"a","b","c","d","e"]; 
    document.write(array1.join(),"<br>");       
    document.write(array1.join("."),"<br>");    
    document.write(array1.join("|"),"<br>");       
    document.write(array1.join("_"),"<br>");     
</script 
 
 
 
Gambar 4.4. Hasil Method Join 
 
4.2.2. Method Array Reverse() 
Method Array.reverse() digunakan untuk membalikkan urutan dari elemen di dalam 
array. Method ini akan mengubah array asal. Berikut adalah contoh penggunaan 
method reverse(): 
  
 
 
NamaFile:Array6.html 
<script> 
   var cemilan= ['Gehu', 'Cireng', 'Comro','Batagor','Odading']; 
   cemilan.reverse(); 
   document.write(cemilan.toString(),"<br>"); 
</script> 
 
 
Gambar 4.5. Hasil Method Reverse() 
 
4.2.3.Method Array sort() 
Method Array.sort() digunakan untuk mengurutkan elemen dari array. Jika method ini 
dipanggil tanpa argumen, elemen dari array akan diurutkan berdasarkan abjad. Jika 
elemen di dalam array bukan huruf, maka akan dikonversi sementara menjadi string, 
baru kemudian dilakukan proses pengurutan. Jika ditemukan elemen dengan 
nilai null atau undefined, akan di tempatkan pada urutan akhir. 
NamaFile:Array7.html 
<script> 
   var buah=['Pepaya', 'Apel', 'Jeruk','Mangga']; 
   buah.sort(); 
   document.write(buah.toString(),"<br>"); 
</script> 
 
 
 
 
Gambar 4.6. Array yang sudah di urutkan 
 
 
 
4.2.4. Method Array concat() 
Method array.concat() berfungsi untuk ”penyambungan” array. Hasil akhir dari 
pemanggilan fungsi ini adalah array baru dengan penambahan dari method concat(). 
Elemen yang ditambahkan diinput sebagai argumen dari method concat(). Berikut 
adalah contohnya: 
NamaFile:Array8.html 
 
<script> 
  var buah=['Pepaya', 'Apel', 'Jeruk','Mangga']; 
  var gabungan=buah.concat('Bayam','Kangkung','Genjer'); 
  document.write(gabungan.toString(),"<br>"); 
</script> 
 
 
Gambar 4.7. Menggabung Array 
 
 
 
 
4.2.5.Method Array slice() 
Method Array.slice() digunakan untuk ’memotong’ array menjadi array baru, atau 
menjadi ’sub-array’ dari array asal. Method slice() ini membutuhkan 2 buah argumen 
yang berisi posisi index awal dan akhir pemotongan. 
Jika hanya diberikan 1 argumen, maka method ini akan mengembalikan array baru 
dimulai dari posisi argumen sampai dengan akhir array. Jika argumen bernilai 
negatif, maka perhitungan akan dimulai dari akhir array. Berikut adalah contoh 
penggunaan method array slice(): 
NamaFile:Array9.html 
 
<script> 
  var buah=['Pepaya', 'Apel', 'Jeruk','Mangga']; 
  var hasil=buah.slice(2,4); 
  document.write(hasil.toString(),"<br>"); 
</script> 
 
 
 
 
Gambar 4.8.Hasil Fungsi Slice 
 
Dari contoh kode yang kita lakukan, terlihat bahwa index terakhir tidak termasuk ke 
dalam array baru. buah.slice(2,4) akan mengembalikan elemen array dari index ke-
2, ke-3, namun tidak ke-4. 
 
  
 
 
4.2.6. Method Objek Array: Array.splice() 
Walaupun memiliki nama method yang mirip dengan slice(), method splice() 
sepenuhnya berbeda. Method splice() adalah method ’serba-bisa’ yang bisa 
digunakan untuk memotong array, menambahkan elemen array, bahkan melakukan 
keduanya sekaligus.  Tidak seperti method slice() dan concat(), pemanggilan method 
ini akan mengubah array asal. 
Jika hanya diberikan satu buah argumen, method splice() akan berfungsi 
’menghapus’ array asal mulai dari index yang diberikan, dan mengembalikan nilai 
array yang ’dihapus’. Berikut contohnya: 
NamaFile:Array10.html 
<script> 
var array1 = [1,2,3,4,"a","b","c","d"]; 
document.write(array1.toString(),"<br>");     
 // hasil: 1,2,3,4,a,b,c,d 
   
//splice dari index ke 2 
var array2 = array1.splice(2) 
  document.write(array1.toString(),"<br>");      
// hasil: 1,2 
 
document.write(array2.toString(),"<br>");      
// hasil: 3,4,a,b,c,d 
</script> 
 
Jika method splice() memiliki 2 argumen, maka argumen kedua berfungsi 
untuk menentukan seberapa banyak elemen yang akan di ’hapus’. Jika 
elemen yang dihapus berada ditengah-tengah array asal, maka array asal 
akan ’tersambung’. Berikut contohnya: 
NamaFile:Array11.html 
<script> 
var arr1 = [1,2,3,4,"a","b","c","d"]; 
document.write(arr1.toString(),"<br>"); // hasil: 1,2,3,4,a,b,c,d 
//hapus 3 elemen mulai dari index ke 3 
var arr2 = arr1.splice(3,3); 
 
document.write(arr1.toString(),"<br>");  // hasil: 1,2,3,c,d 
document.write(arr2.toString(),"<br>");  // hasil: 4,a,b 
</script> 
 
Method splice() mendukung argumen ke 3, 4, dan seterusnya. Jika disertakan, 
argumen ini akan berfungsi sebagai elemen yang akan ditambahkan ke array asal 
dimulai dari posisi argumen pertama. Berikut adalah contoh kode program splice() 
dengan 3 atau lebih argumen: 
NamaFile:Array12.html 
<script> 
var arr1 = [1,2,3,4,"a","b","c","d"]; 
document.write(arr1.toString(),"<br>");  
// hasil: 1,2,3,4,a,b,c,d 
// masukkan elemen "x","y","z" 
// mulai dari elemen ke 4 
var arr2 = arr1.splice(4,0,"x","y","z") 
document.write(arr1.toString(),"<br>"); //hasil:1,2,3,4,x,y,z,a,b,c,d 
document.write(arr2.toString(),"<br>");      
// hasil: [] (array kosong) 
   
var arr1 = [1,2,3,4,"a","b","c","d"]; 
document.write(arr1.toString(),"<br>");      
// hasil: 1,2,3,4,a,b,c,d 
   
// hapus 4 elemen mulai dari elemen ke 4 
// masukkan elemen "x","y","z" pada posisi penghapusan 
var arr2 = arr1.splice(4,4,"x","y","z") 
document.write(arr1.toString(),"<br>");      
// hasil: 1,2,3,4,x,y,z 
document.write(arr2.toString(),"<br>");     
// hasil: a,b,c,d 
</script> 
   
  
 
 
4.2.7. Metode pop dan shift 
Methode pop digunakan ketika kita ingin menghapus array pada elemen terakhir sedangkan 
metode shift digunakan ketika akan   menghapus  elemen array pada bagian pertama. 
NamaFile:Arra13.html 
<script> 
  var kota= ['Bandung', 'Ciwaruga', ‘Cimahi','Garut']; 
  kota.pop(); 
  document.write(kota.toString(),"<br>"); 
</script> 
 
 
Gambar 4.9. Hasil Keluaran Menggunakan fungsi pop  
NamaFile:Arra14.html 
<script> 
   var kota= ['Bandung', 'Ciwaruga', 'Cimahi','Garut']; 
   kota.shift(); 
   document.write(kota.toString(),"<br>"); 
</script> 
 
 
Gambar 4.10. Hasil Keluaran Penggunaan shift 
 
 
 
4.2.8. Metode push dan unshift 
Berikut ini akan dibahas mengenai penggunaan  metode push dan unshift, Untuk 
menambah data pada variabel  array 
1. push (some_value): merupakan fungsi yang digunakan untuk memasukkan value 
ke sebuah array dan disimpan di paling akhir / paling kanan. 
2. unshift (some_value): fungsi yang digunakan untuk memasukkan value ke sebuah array 
tetapi disimpan di paling awal / ujung kiri. 
 
Contoh Metode push()  
Misal akan ditambahkan Kota “Lembang” kedalam variabel array kota. Maka kode 
proramnya adalah sebagai berikut 
NamaFile:Arra15.html 
<script> 
    var kota= ['Bandung', 'Ciwaruga', 'Cimahi','Garut']; 
    kota.push("Lembang"); 
    document.write(kota.toString(),"<br>"); 
</script> 
 
 
 
Gambar 4.11.  Hasil setelah dilakukan Metode push 
  
 
 
Metode unshift digunakan apabila ingin menambahkan data baru pada pada bagian awal 
array 
Contoh metode unshift kode programnya adalah sebagai berikut: 
NamaFile:Arra16.html 
<script> 
    var kota= ['Bandung', 'Ciwaruga', 'Cimahi','Garut']; 
    kota.unshift("Cigugur Girang"); 
    document.write(kota.toString(),"<br>"); 
</script> 
 
 
 
 
Gambar 4.12. Menggunakan perintah unshift 
 
 
  
 
TUGAS4 
Tugas4.1. 
Buat Program JavaScript Untuk Menampilkan, tabel berikut: 
Diketahui array nama, tugas, uts,dan uas,  
Cari Nilai Akhir (NA) 
Rumus na=40% tugas + 30% uts + 30% uas; 
Gunakan Perulangan for in... 
Gunakan Fungsi Logika IF, untuk menampilkan Grade dari Nilai Akhir, dengan ketentuan, 
 
 
NILAI AKHIR GRADE 
0..49 E 
50-59 D 
60..69 C 
70-79 B 
80-100 A 
 
 
 
setelah semua program selesai dibuat dan hasilnya sesuai :  
 
Dengan menggunakan Microsoft Word Copy Paste Kode program beserta 
tangkapan layar hasil keluarannya (screenshot), kemudian kirim ke Modul Tugas 
yang ada di kuliahonline.unikom.ac.id, Nama Filenya: Tugas4-nama-nim-kelas.pdf 
Dikumpulkan Paling Lambat Setiap Hari Minggu Jam 18:00 
 
Ok…selamat mencoba 
 
 


Materi 4. Array Dalam Java Script

Komputer Aplikasi IT-1
Materi 12 mebahas mengenai Animasi dan Effect yang terdapat dalam w3 css framework

 
 
W3.CSS ANIMATION EFFECT 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
12. W3.CSS Animation Classes 
W3CSS menyediakan kelas untuk menampilkan Animasi berikut: 
CLASS DEFINISI 
w3-animate-top Slide elemen dari atas (-300px hingga 0) 
w3-animate-bottom Slide elemen dari bawah (-300px hingga 0) 
w3-animate-left Slide elemen dari kiri (-300px ke 0) 
w3-animate-right Slide elemen dari kanan (-300px ke 0) 
w3-animate-opacity Menganimasikan opasitas elemen dari 0 hingga 1 dalam 1,5 
detik 
w3-animate-zoom Menganimasikan elemen dari ukuran 0 hingga 100% 
w3-animate-fading Menganimasikan opasitas elemen dari 0 ke 1 dan 
1 hingga 0 (fades in + fade out) 
w3-spin Memutar elemen 360 derajat 
 
12.1. w3-animate-top 
Menampilkan elemen tampil dari atas tengah layar ke bawah 
NamaFile:ani1.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container w3-center w3-animate-top"> 
  <h1>Animation is Fun!</h1> 
  <p>Menampilkan Tulisan Turun dari Atas Tengah Layar Ke Bawah</p> 
  <p>Menampilkan Tulisan Turun dari Atas Tengah Layar Ke Bawah</p> 
  <p>Menampilkan Tulisan Turun dari Atas Tengah Layar Ke Bawah</p> 
  <p>Menampilkan Tulisan Turun dari Atas Tengah Layar Ke Bawah</p> 
</div> 
</body> 
</html> 
 
 
 
Gambar 12.1. Animate-top 
 
12.2. w3-animate-bottom 
Menampilkan elemen tampil dari bawah tengah layar ke atas 
NamaFile:ani2.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container w3-center w3-animate-bottom"> 
  <h1>Animation is Fun!</h1> 
   <p>Menampilkan Tulisan Dari Bawah, naik ke Atas</p> 
   <p>Menampilkan Tulisan Dari Bawah, naik ke Atas</p> 
   <p>Menampilkan Tulisan Dari Bawah, naik ke Atas</p> 
   <p>Menampilkan Tulisan Dari Bawah, naik ke Atas</p> 
</div> 
</body> 
</html> 
 
 
 
 
 
 
Gambar 12.2. Animate-bottom 
 
 
12.3. w3-animate-left 
Menampilkan elemen tampil dari kiri ke tengah layar  
NamaFile:ani3.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container w3-center w3-animate-left"> 
  <h1>Animation is Fun!</h1> 
  <p>Menampilkan Element bergerak dari kiri</p> 
  <p>Menampilkan Element bergerak dari kiri</p> 
  <p>Menampilkan Element bergerak dari kiri</p> 
</div> 
</body> 
</html> 
 
 
 
 
Gambar 12.3. Animate-left 
 
12.4. w3-animate-right 
Menampilkan elemen tampil dari kanan ke tengah layar  
NamaFile:ani4.html 
<html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container w3-center w3-animate-right"> 
  <h1>Animation is Fun!</h1> 
  <p>Menampilkan Element bergerak dari kanan</p> 
  <p>Menampilkan Element bergerak dari kanan</p> 
  <p>Menampilkan Element bergerak dari kanan</p> 
</div> 
</body> 
</html> 
 
 
 
Gambar 12.4. Animate-right 
 
12.5. w3-animate-opacity 
Menganimasikan opasitas elemen dari 0 hingga 1 dalam 0,8 detik. 
NamaFile:ani5.html 
<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-container w3-center w3-animate-opacity"> 
  <h1>Animation is Fun!</h1> 
  <p>Menampilkan Animasi Gambar</p> 
  <img src="img_car.jpg" alt="Car" style="width:100%"> 
</div> 
 
</body> 
</html> 
 
 
 
 
 
 
Gambar 12.5. Animate-opacity 
 
  
 
 
12.6. w3-animate-zoom  
Kelas w3-animate-zoom menganimasikan elemen dari ukuran 0 hingga 100%. 
 
NamaFile:ani6.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container w3-center w3-animate-zoom"> 
  <h1>Animation is Fun!</h1> 
  <p>The w3-animate-zoom class zooms in an element (from 0% to 100% in size).</p> 
  <img src="img_car.jpg" alt="Car" style="width:100%"> 
</div> 
</body> 
</html> 
 
 
Gambar 12.6.Animate-zoom 
  
 
 
12.7. w3-spin 
Kelas w3-spin memutar elemen 360 derajat: 
NamaFile:ani7.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css"> 
<body> 
<div class="w3-container"> 
  <h1>Spinning Elements</h1> 
  <p>w3-spin class digunakan untuk memutar element 360 degrees:</p> 
  <p><i class="fa fa-spinner w3-spin" style="font-size:200px"></i></p> 
</div> 
</body> 
</html> 
 
 
Gambar 12.6.Animate-spin 
 
 
 
12.8. w3-animate-fading 
Kelas w3-animate-fading  menampilkan elemen memudar masuk dan keluar setiap 10 detik 
(terus menerus): 
 
NamaFile:ani8.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<div class="w3-container"> 
  <h2>Animate Fade In and Out</h2> 
  <p>Menampilkan element fading dalam 10 (continuously).</p> 
  <img class="w3-animate-fading" src="baesuzy.jpg" style="width:50%"> 
</div> 
</body> 
</html> 
 
 
 
Gambar 12.7.Animate-fade 
 
  
 
 
TUGAS 12.  
Dengan Menggunakjan w3-animate, buat program untuk menampilkan gambar animasi, 
seperti berikut: 
Adapun w3-animate yang digunakan adalah: 
w3-animate-top, w3-animate-bottom, w3-animate-left, w3-animate-right,w3-animate-fading, 
w3-animate-zoom 
Gambar boleh diganti dengan gambar sendiri,  
  
 
 
Adapun File yang dikumpulkan adalah file tugas12.html dan gambar atau foto yang kamu 
gunakan. Kirim ke Kuliah Online file yang sudah dalam bentuk zip atau rar, 
TUGAS12_NIM_NAMA.ZIP 
 
  
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 10. Display Layout Dan Button. [Teaching Resource] 
3. Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3 Framework. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching Resource] 
5. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching Resource] 
7. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
8. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam Html. [Teaching Resource] 
9. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan Html5. [Teaching Resource] 
10. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam Html. [Teaching Resource] 
11. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching Resource] 
12. Suryana, Taryana (2022) Materi 2 Memformat Dokumen Html. [Teaching Resource] 
13. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching Resource] 
14. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
15. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
16. https://www.w3schools.com/html, September, 2021 
17. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
18. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
19. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
20. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
21. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
22. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
23. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
24. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
25. https://www.w3schools.com/html, September, 2021 
26. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
27. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
28. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
30. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
31. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
32. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
33. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
34. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
35. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
36. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
37. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
38. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
39. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
40. https://www.w3schools.com/html 
 
 
Yesterday 
Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
 
Suryana, Taryana (2023) Materi 10. Display Layout Dan Button. [Teaching Resource] 
Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3 Framework. [Teaching Resource] 
Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3 Framework. [Teaching Resource] 
Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching Resource] 
 
Sunday 
Suryana, Taryana (2023) Integrasi Menu Akta Kelahiran Dan Kematian. [Teaching Resource] 
 
Thursday 
Suryana, Taryana (2022) Materi 10. Display Layout Dan Button. [Teaching Resource] 
Suryana, Taryana (2022) Materi 10 W3 Display Layot Dan Button. [Teaching Resource] 
 
 
 


Materi 12 W3 Css Animation Effect

Pemrograman Web 2
Materi ini membahas mengenai Fungsi Logika dalam java script, 
ada fungsi if, if..else, if..else..if, dan switch cas

 
BAB 3 
FUNGSI LOGIKA ATAU PERCABANGAN 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
3.PERCABANGAN 
 Percabangan merupakan sebuah cara yang digunakan dalam program untuk 
mengambil suatu keputusan. Didalam pemrograman kita harus dapat menentukan aksi apa 
yang harus dikerjakan oleh pemroses (processor) ketika sebuah kondisi terpenuhi, dengan 
menggunakan operasi logik 
Dalam pembahasan berikut akan dibahas mengenai 2 jenis percabangan, yaitu: 
1. if- else 
2. switch-case. 
 
3.1. Percabangan if..else 
Pernyataan Percabangan dengan mengunakan If-Else digunakan untuk mengambil suatu 
keputusan diantara banyak pernyataan yang ada. 
 
if (kondisi)  
{ 
   //Jika kondisi terpenuhi maka pernyataan1 dieksekusi  
} 
else 
{ 
   //pernyataan2 dieksekusi 
} 
 
 
 
 
Contoh Program Menggunakan if..else 
NamaFile:if1.html 
<script> 
 var nilai=80; 
 if(nilai>70) 
 { 
   document.write("Anda Lulus"); 
 } 
 else 
 { 
   document.write("Anda Belum Lulus"); 
 } 
</script> 
 
 
 
Gambar 3.1. Output penggunaan if..else 
 
Contoh2: 
Misalnya: dalam matakuliah pemrograman Web 2, untuk menghitung nilai akhir (NA) 
digunakan rumus berikut: 
NA=40% TUGAS + 30% UTS + 30%UAS,  
dan dinyatakan Lulus Jika Nilai Akhir lebih besar dari 70 
 
Maka penyelesaiannya adalah sebagai berikut: 
NamaFile:if2.html 
<script> 
 var tugas=75; 
 var uts=80; 
 var uas=70; 
 var na=0.4*tugas + 0.3*uts + 0.3*uas; 
 document.write("NILAI AKHIR : ",na,"<BR>"); 
 if(na>=70) { 
   ket="LULUS"; 
} else 
{ 
 
  ket="TIDAK LULUS"; 
} 
document.write(ket); 
</script> 
 
 
 
 
 
Gambar 3.2. Contoh Penggunaan operator dan fungsi logika if 
 
 
3.2.Switch case 
Percabangan switch case diperuntukan untuk lebih menyederhanakan percabangan yang 
menggunakan if..else, Switch Case diterapkan untuk percabangan dimana kondisi yang 
diperiksa hanya ada 1 namun memiliki banyak opsi. 
 
switch(expression) { 
  case x: 
    // code block 
    break; 
  case y: 
    // code block 
    break; 
  default: 
    // code block 
} 
 
Contoh penggunaan switch case 
<script> 
var hari = ''; 
switch (new Date().getDay()) { 
 case 0: 
  hari = 'Minggu'; 
  break; 
 case 1: 
  hari = 'Senin'; 
 
  break; 
 case 2: 
  hari = 'Selasa'; 
  break; 
 case 3: 
  hari = 'Rabu'; 
  break; 
 case 4: 
  hari = 'Kamis'; 
  break; 
 case 5: 
  hari = 'Jumat'; 
  break; 
 case 6: 
  hari = 'Sabtu'; 
  } 
  document.write("Hari ini adalah hari: ",hari); 
</script> 
 
 
 
Gambar 3.2. Output Penggunaan switch case 
 
 
  
 
TUGAS3 
Buat Program JavaScript Untuk Menghitung Berat Badan Ideal: 
1. Rumus yang ditemukan oleh Paul Broca ini membedakan cara penghitungan antara pria 
dan wanita.  
Hal ini disebabkan karena pria dan wanita memiliki komposisi tubuh yang berbeda. 
 
Berat Badan Ideal Menurut Broca 
Pria= tb-100 * 90% 
Wanita = tb-100 * 85% 
 
Contoh Hasil: 
 
 
2. Body Mass Index (BMI) adalah cara menghitung berat badan ideal berdasarkan tinggi dan berat 
badan, BMI dibedakan berdasarkan usia. 
a. Angka BMI normal berada pada kisaran 18,5-25. 
b. Jika angka BMI melebihi 25, kamu memiliki berat badan berlebih. 
c. Sedangkan, jika angka BMI berada di bawah 18 berarti berat badanmu kurang. 
d. Jika angka BMI sudah melebihi angka 40, sebaiknya dilakukan penanganan secepatnya 
karena angka ini menunjukkan tanda bahaya. 
Cara menghitungnya: 
Berat badan ideal = Berat badan (kilogram): Tinggi badan (meter) 
Sebagai contohnya, jika berat badan kamu 47 kilogram dan tinggi badan 1,63 meter, nilai BMI kamu 
adalah 47:(1,63)2= 17.8.  
Berarti, berat badan kamu termasuk di bawah rata-rata. 
 
 
 
 
Contoh Output 
 
setelah semua program selesai dibuat dan hasilnya sesuai dengan hasil hitungan manual 
anda :  
 
Dengan menggunakan Microsoft Word Copy Paste Kode program beserta 
tangkapan layar hasil keluarannya (screenshot), kemudian kirim ke Modul Tugas 
yang ada di kuliahonline.unikom.ac.id, Nama Filenya: Tugas3-NIM-NAMA-
KELAS.pdf 
Dikumpulkan Paling Lambat Setiap Hari Minggu Jam 18:00 
 
Ok…selamat mencoba 
 
 
 
DAFTAR PUSTAKA 
1. Suryana, Taryana (2023) Materi 2 Perulangan Dalam Java Script. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 1 Pengenalan Java Script. [Teaching Resource] 
3. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
4. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
5. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
6. https://www.w3schools.com/  September, 2021 
7. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
8. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
9. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 
 


Materi 3 Fungsi Kondisi - Fungsi Logika

Materi 11. Input Dan Label Dalam W3 Framework

Pemrograman Web-1
 Materi ini membahas mengenai pembuatan menu navigasi dengan menggunakan framework w3 cs

 
 
W3.CSS NAVIGATION dan JAVASCRIPT 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
13. W3.CSS NAVIGATION TAB 
Navigasi Tab adalah cara untuk menavigasi di sekitar situs web. Biasanya, 
navigasi tab menggunakan tombol navigasi (tab) yang disusun bersama 
dengan tab yang dipilih atau disorot.  
Contoh berikut ini menggunakan elemen dengan nama kelas yang sama 
yaitu ("kota"), dan mengubah gaya antara display: none dan display: block 
untuk menyembunyikan dan menampilkan konten yang berbeda: 
Membuat Tab dan Link ketika Nama Suatu Kota Di Click, maka Deskripsi 
dari Kota tersebut akan ditampilkan pada Bar bagian bawah Menu. 
 
Gambar 13.1.Contoh Menu Tab 
 
 
 
13.1. Membuat Menu Horizontal 
 
Pada bagian ini akan dibahas mengenai bagaimana cara membuat Menu Tab 
dengan arah menyamping (horizontal). Adapun Isi dari Tab yang di Click 
akan tampil pada bar bagian bawah menu tersebut. 
 
NamaFile:menu1.html 
 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-container"> 
  <h2>Membuat Menu Tab dan Link</h2> 
  <p>Click Pada Menu Dibawah</p> 
</div> 
 
<div class="w3-bar w3-orange"> 
  <button class="w3-bar-item w3-button" onclick="openKota('Bandung')">Bandung</button> 
  <button class="w3-bar-item w3-button" onclick="openKota('Garut')">Garut</button> 
  <button class="w3-bar-item w3-button" onclick="openKota('Tasik')">Tasik</button> 
</div> 
 
<div id="Bandung" class="w3-container kota w3-animate-zoom"  style="display:none"> 
  <h2>Bandung</h2> 
   <p>Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat. 
   Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat.</p> 
</div> 
<div id="Garut" class="w3-container kota"  style="display:none"> 
  <h2>Garut</h2> 
  <p>Dikenal dengan Julukan Kota Dodol, dan  jaman juga dikenal dengan Jeruk Garut atau Domba 
Garut</p> 
</div> 
<div id="Tasik" class="w3-container kota"  style="display:none"> 
  <h2>Tasikmalaya</h2> 
  <p>Atau Tasikmalaya Dikenal dengan Julukan Kota Intan, dan Kota Kerajinan Tangan</p> 
</div> 
<script> 
function openKota(namakota) { 
  var i; 
  var x = document.getElementsByClassName("kota"); 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none";   
  } 
  document.getElementById(namakota).style.display = "block";   
} 
</script> 
 
</body> 
</html> 
 
 
 
 
 
 
Simpan dengan nama File:menu1.html, dan kemudian jalankan pada Browser seperti biasa 
dan jika hasilnya benar, akan ditampilkan halaman menu seperti berikut: 
 
 
 
Gambar 13.2. Menampilkan Tab dan Link kota 
Java Script Untuk Menampilkan isi Link yang di Click 
 
<script> 
function openKota(namaKota) { 
  var i; 
  var x = document.getElementsByClassName("kota"); 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none";   
  } 
  document.getElementById(namaKota).style.display = "block";   
} 
</script> 
 
 
 
13.2. Membuat Menu Vertical 
 
Pada bagian ini akan dibahas mengenai bagaimana cara membuat Menu Tab 
dengan arah vertikal. Adapun Isi dari Tab yang di Click akan tampil pada bar 
bagian kanan. 
 
 
NamaFile:menu2.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:130px"> 
  <h5 class="w3-bar-item">MENU</h5> 
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 
'Bandung')">Bandung</button> 
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 
'Garut')">Garut</button> 
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 
'Tasik')">Tasik</button> 
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 
'Cirebon')">Cirebon</button>  
</div> 
 
<div style="margin-left:130px"> 
  <div class="w3-padding">Menu Tab Vertikal</div> 
 
  <div id="Bandung" class="w3-container city" style="display:none"> 
    <h2>Bandung</h2> 
     <p>Ibukota dari Provinsi Jawa Barat</p>  
  </div> 
 
  <div id="Garut" class="w3-container city" style="display:none"> 
    <h2>Garut</h2> 
    <p>Garut kota yang terkenal dengan Dodol dan domba nya</p>  
   </div> 
 
  <div id="Tasik" class="w3-container city" style="display:none"> 
    <h2>Tasik</h2> 
    <p>Terkenal dengan sebagai kota Intan.</p> 
  </div> 
 
   <div id="Cirebon" class="w3-container city" style="display:none"> 
    <h2>Cirebon</h2> 
    <p>Terkenal dengan sebagai kota Udang.</p> 
  </div> 
</div> 
 
<script> 
function openCity(evt, cityName) { 
  var i, x, tablinks; 
  x = document.getElementsByClassName("city"); 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
  } 
  tablinks = document.getElementsByClassName("tablink"); 
  for (i = 0; i < x.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" w3-green", "");  
  } 
  document.getElementById(cityName).style.display = "block"; 
  evt.currentTarget.className += " w3-green"; 
} 
</script> 
 
</body> 
</html> 
 
 
 
Gambar 13.3.Menu Tab Vertikal 
 
Jika anda ingin menambahkan Efek Animasi ketika menampilkan Teks atau gambar pada 
kota yang di Click, maka dapat ditambahkan perintah  w3-animate,  contoh misalnya ketika 
di Click Cirebon, maka tulisan mengenai Cirebon akan ditampilkan dengan mode zoom 
 
<div id="Cirebon" class="w3-container city w3-animate-zoom" style="display:none"> 
   <h2>Cirebon</h2> 
    <p>Terkenal dengan sebagai kota Udang.</p> 
  </div> 
 
  
 
 
TUGAS 13.  
Dengan Menggunakan perintah yang sudah diajarkan barusan dan perintah lainya yang sudah 
diajarkan sebelumnya, buat program untuk menampilkan Menu Seperti berikut: 
 
Catatan: 
1. Jika di Click Tab Mobil Maka akan ditampilkan gambar Mobil dengan Animasi  
w3-animate-fading 
2. Jika di Click Tab UnikomMart Maka akan ditampilkan gambar Unikom Mart dengan 
Animasi w3-animate-bottom 
3. Jika di Click Tab Kampus Maka akan ditampilkan gambar Kampus dengan Animasi  
w3-animate-top 
4. Jika di Click Tab Foto Maka akan ditampilkan gambar Foto dengan Animasi  
w3-animate-zoom 
 
Semua Gambar, Banner, Link dan isinya boleh disesuaikan dengan isi tugas yang ingin kamu 
buat, Menu Boleh Horizontal atau Vertical 
 
 
Gambar Tugas13.Ketika di Click Mobil 
 
 
Gambar Tugas13.Ketika di Click UnikomMart 
 
 
 
Gambar Tugas13.Ketika di Click Kampus 
 
 
 
Gambar Tugas13.Ketika di Click Foto 
 
Adapun File yang dikumpulkan adalah file tugas13.html dan gambar atau foto yang kamu 
gunakan. Kirim ke Kuliah Online file yang sudah dalam bentuk zip atau rar, TUGAS13.ZIP 
 
 
 
 
 
REFERENSI: 
1. Suryana, Taryana (2023) Materi 12. Aplikasi Pencatatan Data Perkawinan. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 11 Aplikasi Ijin Gangguan -ho. [Teaching Resource] 
3. Suryana, Taryana (2023) Integrasi Menu Akta Kelahiran Dan Kematian. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 10 W3 Css Framework. [Teaching Resource] 
5. Suryana, Taryana (2022) Materi 9 Akta Kematian. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 8 Membuat Aplikasi Akta Kelahiran. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 7 Hapus Data Ktp. [Teaching Resource] 
8. Suryana,Taryana (2022) 6.edit Data Ktp. [Teaching Resource] 
9. Suryana, Taryana (2022) Materi 5. Pencarian Data E-ktp. [Teaching Resource] 
10. Suryana, Taryana (2022) Memasukan Atau Menambah Data Ektp. [Teaching Resource] 
11. Suryana, Taryana (2022) Membuat Form Memasukan Data Pegawai. [Teaching Resource] 
12. Suryana, Taryana (2022) Materi 3 Membuat Aplikasi E-ktp. [Teaching Resource] 
13. Suryana, Taryana (2022) Membuat Database. [Teaching Resource] 
14. Suryana, Taryana (2022) Instalasi Xampp Untuk Belajar Pemrograman E-government. [Teaching 
Resource] 
15. Suryana, Taryana (2022) Pengenalan E-government Dan Aplikasi Pendukung. [Teaching Resource] 
16. Suryana, Taryana (2022) Instalasi Xampp Untuk Belajar Pemrograman E-government. [Teaching 
Resource] 
 
17. Suryana, Taryana (2022) Menambah Data Dan Pencarian Data Akta Perkawinan. [Teaching Resource] 
18. Suryana, Taryana (2021) Membuat Aplikasi Integrasi Akta Perkawinan. [Teaching Resource] 
19. Suryana, Taryana (2021) Studi Kasus Integrasi Program Administrasi Ijin Gangguan. [Teaching 
Resource] 
20. Suryana, Taryana (2021) .delete Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
21. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan Mysql. [Teaching 
Resource] 
22. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
23. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
24. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
25. https://www.w3schools.com/  September, 2021 
26. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, Jogyakarta 
27. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
28. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-government. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat Database Dengan Phpmyadmin. [Teaching Resource] 
30. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching Resource] 
31. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
32. Suryana, Taryana (2021) Membuat Aplikasi Kependudukan. [Teaching Resource] 
33. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
34. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
35. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
36. https://www.w3schools.com/  September, 2021 
37. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, Jogyakarta 
38. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
39. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-government. [Teaching Resource] 
40. Suryana, Taryana (2021) Membuat Database Dengan Phpmyadmin. [Teaching Resource] 
41. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
42. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
43. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
44. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
45. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 
 
 
 


Materi 13 Membuat Menu Navigasi Dengan W3 Css

Komputer Aplikasi IT-5
Materi ini membahas mengenai pembuatan modul aplikasi pencarian data akta perkawinan, dengan menggunakan perintah SQL Select * from perkawinan where noakta=&#39;noaktadicari&#39

 
 
Pencarian Data Perkawinan 
 
 
Oleh: 
Taryana Suryana M.Kom 
Jurusan Ilmu Pemerintahan Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081321480577 
 
 
13.Pencarian Data Perkawinan 
Pada bagian ini akan dibahas mengenai pembuatan program untuk melakukan 
pencarian   data perkawinan yang sudah ada dalam database atau tabel. 
 
Adapun file yang akan dibuat yaitu: 
1. cari_perkawinan.html 
2. proses_cari_perkawinan.php 
 
 
 
13.1.Membuat File Pencarian data Perkawinan 
File CARI_PERKAWINAN.HTML berfungsi untuk menampilkan Form Pencarian Data 
Perkawinan, berdasarkan keyword field no_akta dan nama_suami: 
 
NamaFile:cari_perkawinan.html 
 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body background="paper.gif"> 
<center> 
<div class="w3-container"> 
<p> 
<div class="w3-panel w3-blue w3-card-4 w3-round-xxlarge"> 
  <p><h1>Form Pencarian Data Perkawinan</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
 
<form action="proses_cari_perkawinan.php" method=post> 
<hr> 
<table> 
  <tr><td><select name=pilihan> 
  <option value=noakta>NOAKTA 
  <option value=nama_suami>NAMA SUAMI 
  </select> 
  <td>:<input name=data_cari size=16> 
</table> 
<hr> 
<input type=submit value="Cari"  class="w3-btn w3-deep-orange w3-round-xlarge" style="width:150px"> 
<input type=reset value="Reset"  class="w3-btn w3-gray w3-round-xlarge" style="width:150px"> 
 
</p> 
</div> 
</html> 
 
 
 
 
 
13.2. Membuat File  Untuk Memproses Pencarian Data 
File proses_cari_perkawinan.php berfungsi untuk melakukan proses pencarian data 
kedalam tabel berdasarkan keyword atau kunci field yang diinginkan. 
 
Misalnya pada form Pencarian yang akan dibuat, ingin dicari Data Perkawinan 
Berdasarkan no_akta atau Berdasarkan nama_suami 
 
NamaFile:proses_cari_perkawinan.php 
 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body background="paper.gif"> 
<center> 
<div class="w3-container"> 
<p> 
<div class="w3-panel w3-blue w3-card-4 w3-round-xxlarge"> 
  <p><h1>Pencarian Data Akta Perkawinan</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
 
<hr> 
<table border=0> 
<?php 
require ("koneksi.php"); 
$pilihan=$_POST['pilihan']; 
$data_cari=$_POST['data_cari']; 
$sql="select * from perkawinan where $pilihan='$data_cari' "; 
 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
if($row) 
{ 
do 
{ 
 list($noakta,$tanggal,$nik_suami,$nama_suami,$nik_istri,$nama_istri, 
 $alamat,$kota, $kodepos,$telp)=$row; 
  
echo "<tr><td width=120>NO AKTA<td width=350>:$noakta"; 
echo "<td rowspan=10><img src='$nik_suami.jpg' width=200 height=250>"; 
echo "<td rowspan=10><img src='$nik_istri.jpg' width=200 height=250>"; 
 
echo "<tr><td>TANGGAL<td>:$tanggal"; 
echo "<tr><td>NIK SUAMI<td>:$nik_suami"; 
echo "<tr><td>NAMA SUAMI<td>:$nama_suami"; 
echo "<tr><td>NIK ISTRI<td>:$nik_istri"; 
echo "<tr><td>NAMA ISTRI<td>:$nama_istri"; 
echo "<tr><td>ALAMAT<td>:$alamat"; 
echo "<tr><td>KOTA<td>:$kota"; 
echo "<tr><td>KODEPOS<td>:$kodepos"; 
echo "<tr><td>TELP<td>:$telp"; 
 
echo "</table><hr>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
} 
else 
{ 
 
  echo "<div class='w3-panel w3-red w3-round-xxlarge'> 
  <h1 class='w3-text-white' style='text-shadow:1px 1px 0 #444'> 
  <b>Maaf Data Tidak Di Temukan ..!</b></h1> 
</div>"; 
} 
?> 
Perhatikan Perintah SQL berikut: 
$sql="select * from perkawinan where no_akta='$data_cari' "; 
 
 
Artinya tampilkan semua field dari tabel Perkawinan yang NO_AKTA sama dengan 
yang diinputkan 
 
 
 
Menampilkan Hasil Via Browser 
Setelah  kedua program yaitu cari_perkawinan.html dan proses_cari_perkawinan.php 
selesai dibuat dan disimpan sesuai nama file diatas, kemudian adalah bagaimana 
cara menampilkannya ke layar komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti biasa menampilkan 
program: 
1. Jalankan Browser 
2. Pada Address Bar, ketikan:localhost/ip/perkawinan/ 
3. Click File  CARI_PERKAWINAN.HTML 
Akan ditampilkan form pencarian seperti berikut: 
 
 
Gambar 13.1. Form Pencarian Akta Perkawinan 
 
4. Masukan NO_AKTA yang akan dicari, misalnya  
BDG-09-01-2023-00001 
5. Click Tombol Cari, selanjutnya akan ditampilkan hasil seperti berikut Jika data 
yang dicari ada: 
 
 
 
Gambar 13.2. Hasil Pencarian Data Perkawinan 
 
  
 
 
Dan akan ditampilkan jendela seperti berikut, jika data yang dicari tidak ada: 
 
 
 
Gambar 13.3. NO_AKTA yang dicari tidak ada 
 
REFERENSI: 
1. Suryana, Taryana (2023) Materi 12. Aplikasi Pencatatan Data Perkawinan. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 11 Aplikasi Ijin Gangguan -ho. [Teaching Resource] 
3. Suryana, Taryana (2023) Integrasi Menu Akta Kelahiran Dan Kematian. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 10 W3 Css Framework. [Teaching Resource] 
5. Suryana, Taryana (2022) Materi 9 Akta Kematian. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 8 Membuat Aplikasi Akta Kelahiran. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 7 Hapus Data Ktp. [Teaching Resource] 
8. Suryana,Taryana (2022) 6.edit Data Ktp. [Teaching Resource] 
9. Suryana, Taryana (2022) Materi 5. Pencarian Data E-ktp. [Teaching Resource] 
10. Suryana, Taryana (2022) Memasukan Atau Menambah Data Ektp. [Teaching Resource] 
11. Suryana, Taryana (2022) Membuat Form Memasukan Data Pegawai. [Teaching Resource] 
12. Suryana, Taryana (2022) Materi 3 Membuat Aplikasi E-ktp. [Teaching Resource] 
13. Suryana, Taryana (2022) Membuat Database. [Teaching Resource] 
14. Suryana, Taryana (2022) Instalasi Xampp Untuk Belajar Pemrograman E-government. [Teaching 
Resource] 
15. Suryana, Taryana (2022) Pengenalan E-government Dan Aplikasi Pendukung. [Teaching Resource] 
16. Suryana, Taryana (2022) Instalasi Xampp Untuk Belajar Pemrograman E-government. [Teaching 
Resource] 
17. Suryana, Taryana (2022) Menambah Data Dan Pencarian Data Akta Perkawinan. [Teaching Resource] 
18. Suryana, Taryana (2021) Membuat Aplikasi Integrasi Akta Perkawinan. [Teaching Resource] 
19. Suryana, Taryana (2021) Studi Kasus Integrasi Program Administrasi Ijin Gangguan. [Teaching 
Resource] 
20. Suryana, Taryana (2021) .delete Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
21. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan Mysql. [Teaching 
Resource] 
22. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
23. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
24. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
25. https://www.w3schools.com/  September, 2021 
26. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, Jogyakarta 
27. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
 
28. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-government. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat Database Dengan Phpmyadmin. [Teaching Resource] 
30. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching Resource] 
31. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
32. Suryana, Taryana (2021) Membuat Aplikasi Kependudukan. [Teaching Resource] 
33. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
34. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
35. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
36. https://www.w3schools.com/  September, 2021 
37. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, Jogyakarta 
38. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
39. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-government. [Teaching Resource] 
40. Suryana, Taryana (2021) Membuat Database Dengan Phpmyadmin. [Teaching Resource] 
41. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
42. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
43. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
44. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
45. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 
 
 
  
 


Not a member yet

Materi 11 Input Dan Label

Materi 14 Perbaikan Data Perkawinan

Materi 14. Publikasi Halaman Web Ke Internet - Web Hosting

Materi 4. Array Dalam Java Script

Materi 11 Input Dan Label

Materi 12 W3 Css Animation Effect

Materi 3 Fungsi Kondisi - Fungsi Logika

Materi 11. Input Dan Label Dalam W3 Framework

Materi 13 Membuat Menu Navigasi Dengan W3 Css

Bab 13 Aplikasi Pencarian Data Perkawinan

15,029

70,114