Repository Universitas Komputer Indonesia

Komputer Aplikasi IT-1
Materi ini membahas pembuatan menu navigasi dengan menggunakan class w3-bar, dan class w3-dropdown-hove

Suryana, Taryana

 
 
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 membahasa mengenai penghapusan Data Akta Perkawinan yang ada dalam tabe

 
Hapus Data Perkawinan  
Oleh: 
Taryana Suryana M.Kom 
Jurusan Ilmu Pemerintahan Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221580577 
 
 
15. Program Hapus Data Perkawinan 
Pada bagian ini akan dibahas mengenai pembuatan program untuk melakukan penghapusan  
data Perkawinan yang ada dalam database atau tabel.  
Adapun cara kerja dari Hapus data adalah sebagai berikut: 
1. Tampilkan Form Hapus Data Perkawinan 
2. Masukan noakta atau nama_suami yang akan dihapus 
3. Lakukan pencarian kedalam database,  
4. Jika data ditemukan tampilkan kelayar komputer,  
5. Click tombol “Yakin Data Ini Akan di Hapus” 
 
 
Adapun file yang akan dibuat yaitu: 
1. Hapus _Perkawinan.html 
2. proses_hapus_Perkawinan.php 
3. delete_Perkawinan.php 
 
 
15.1.Membuat Program Hapus Pernikahan 
File Hapus_Perkawinan.html berfungsi untuk menampilkan Form Pencarian Data Perkawinan, 
berdasarkan keyword field NOAKTA atau Nama_Suami: 
 
NamaFile:hapus_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 Hapus Data Perkawinan</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
 
 
<form action="proses_hapus_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:Perkawinan0px"> 
<input type=reset value="Reset"  class="w3-btn w3-gray w3-round-xlarge" 
style="width:Perkawinan0px"> 
</p> 
</div> 
</html> 
 
15.2. Menampilkan Data Yang Akan di Hapus 
File proses_hapus_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 Hapus Data,  
NamaFile:proses_hapus_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>Data Akta Perkawinan</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
 
<hr> 
<table border=0> 
<form action="delete_perkawinan.php" method=post> 
<?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 "<input type=hidden name=noakta value='$noakta'>"; 
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>"; 
exit; 
} 
?> 
</table> 
<hr> 
<input type=submit value="Yakin Data Ini Akan di Hapus ?"  class="w3-btn w3-deep-orange w3-
round-xlarge" style="width:300px"> 
</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 
 
 
15.3. Membuat Program Untuk Menghapus Data Perkawinan 
Untuk Melakukan penghapusan data dari database digunakan perintah SQL Delete 
from Namatabel 
 
Berikut Sintak SQL untuk Delete Data 
Delete From Perkawinan  where noakta=’$data_cari’; 
 
NamaFile:delete_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>Proses Delete Data Perkawinan</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
<?php  
require ("koneksi.php");  
$noakta=$_POST['noakta'];  
 require ("koneksi.php");  
 $sql="delete from perkawinan where noakta='$noakta' "; 
 $hasil=mysqli_query($conn,$sql);  
 echo"<div class='w3-panel w3-red w3-round-xxlarge'> 
  <h1 class='w3-text-white' style='text-shadow:1px 1px 0 #444'> 
  <b>Data Telah di Hapus ..!</b></h1> 
</div>"; 
?> 
 
 
15.4.Menampilkan Hasil Via Browser 
Setelah  ketiga program yaitu hapus_Perkawinan.html, proses_hapus_Perkawinan.php dan 
delete_Perkawinan.php selesai dibuat dan disimpan sesuai nama file diatas, kemudian 
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  hapus_Perkawinan.html 
Akan ditampilkan form pencarian seperti berikut: 
 
 
Gambar 15.1. Form Hapus 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 15.2. Hasil Pencarian Hapus Data Perkawinan 
 
Click tombol “Yakin Data Ini Di Hapus” untuk Menghapus data secara permanen. 
 
 
 
Gambar 15.3. Data Dihapus dari Database 
 
 
Sedangkan apabila data yang akan dihapus tidak ditemukan, akan ditampilkan jendela 
seperti berikut: 
 
 
 
Gambar 15.4. 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 15 Hapus Data Akta Perkawinan

Komputer Aplikasi IT-2
Materi ini membahas mengenai dasar-dasar pemrograman dengan menggunakan Java Script, Variabel, Operatior, Komen, Statemen

 
 
BAB I 
MENGENAL JAVA SCRIPT 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Telegram: 081221480577 
 
 
 
1.1.JavaScript 
Java Script adalah bahasa script yang berdasar pada objek yang memperbolehkan 
pemakai untuk mengendalikan banyak aspek interaksi pemakai pada suatu dokumen 
HTML. Dimana objek tersebut dapat berupa suatu dokumen, URL, windows, frame 
form,  button atau item lain yang semuanya itu mempunyai properti yang saling 
berhubungan dengannya dan masing-masing memiliki nama, lokasi, warna nilai dan 
atribut lain. 
 
1.2.Memulai JavaScript 
Untuk dapat memulai dan menjalankan program JavaScript, ada dua perangkat lunak  
yang  diperlukan yaitu browser dan teks editor. Teks  editor adalah sebuah pengolah 
kata yang menghasilkan  file dalam format ASCII murni. Bila Anda adalah pengguna 
Windows, Anda bisa menggunakan Notepad,Wordpad atau menggunakan 
Notepad++. Selain itu browser web yang akan anda gunakan harus mendukung 
JavaScript, Anda dapat menggunakan Chrome, Firefox, Internet Explorer, Opera 
ataupun browser lainnya yang mendukung JavaScript. 
 
JavaScript sebagai bahasa pemrograman yang berjalan di atas browser harus di tulis di 
dalam HTML. Ada empat cara penulisan javascript pada HTML. 
 
1. Tag <script> 
 Cara umum yang dipakai adalah menuliskanya dalam tag <script>. Tag <script> bisa 
dibuat di dalam tag <head>, maupun di dalam tag <body>. 
Menulis ke dalam output HTML menggunakan document.write (). 
Contoh penulisan Java Script 
NamaFile:js1.html 
<html> 
    <title>Penulisan Javascript</title> 
    <script> 
      document.write("ini kode Javascript"); 
    </script> 
</html> 
 
 
Gambar1. Menampilkan Teks dengan JavaScript 
 
Menulis ke dalam elemen HTML, menggunakan innerHTML. 
Namafie:js2.html 
<html> 
<h2>Penulisan dengan innerHTML</h2> 
<p id="demo"></p> 
<script> 
   document.getElementById("demo").innerHTML = "Belajar Java Script";   
</script> 
</html> 
 
 
 
 
 
Gambar22. Menampilkan Teks dengan innerHTML 
 
2. File Eksternal 
Jika tidak ingin kode Javascript bercampur dengan HTML,  bisa menuliskannya pada file 
terpisah. Caranya, adalah dengan menyimpannya pada sebuah file yang berekstensi .js, 
misalnya isinya sebagai berikut. 
// file-eksternal.js 
alert("Kode Javascript dari File Eksternal"); 
 
Kemudian, kita perlu menghubungkan file eksternal tersebut dengan file HTML. Caranya, 
gunakan tag <script> dengan atribut src untuk menentukan lokasi file Javascriptnya. 
<html> 
<title>Penulisan dengan external Javascript</title> 
    <script src="file-eksternal.js"> 
    </script> 
</head> 
</html> 
 
 
3. Atribut Event 
Cara atribut event ini sering digunakan untuk memanggil fungsi pada event terentu. Misalnya 
ketika suatu elemen diklik, maka jalankan fungsi Javascript. 
<button onclick="alert('Ok Terima kasih!')">Klik donk!</button> 
 
Selain event onclick ada juga event-event  yang lain, seperti  onsubmit, onload, 
ondoubleclick,  onmouseover,  onmouseout, dsb. 
4. URL 
 
Cara penulisan Javascript pada URL, cara ini jarang digunakan, namun kita juga perlu 
mengetahuinya. Penulisan Javascript pada URL menggunakan protokol Javascript. Misal, 
cobalah untuk menuliskan kode seperti ini pada URL browser. 
javascript:alert("Nah! ini Javascript") 
 
Kemudian bagaimana agar kita dapat menggunakan cara ini di HTML? 
Cara ini bisa kita gunakan pada tag <a>, kemudian mengisi kode javascript pada atribut href. 
Cara ini bisa menggantikan event onclick. 
<a href="javascript:alert('Wih! hebat bukan?')">Klik Aku</a> 
Dari ke empat cara penulisan JavaScript tadi diatas, gunakanlah yang menurut anda lebih 
mudah dalam penggunaanya. 
 
1.3.Program JavaScript 
Pada bagian ini, akan diberikan contoh program untuk menampilkan teks  sederhana kelayar 
monitor.  
Namafile:js3.html 
<script> 
  document.write("<font size=8><center>"); 
  document.write("SELAMAT DATANG DI JAVASCRIPT <br>"); 
  document.write("Contoh sederhana menampilkan teks<br>"); 
  document.write("Dengan menggunakan JavaScript<br>"); 
</script> 
 
 
Gambar 1.3. Hasil dari Kode Program diatas. 
 
 
Berikut ini adalah contoh bagaimana menuliskan sebuah teks dengan menggunakan tag 
header di tengah jendela browser. Untuk Menampilkan teks header Anda cukup 
menambahkan statement <H1> Header pertama </H1> 
 
Namafile:js4.html 
<script> 
   document.write("<center>"); 
   document.write("<h1><font color=blue>UNIVERSITAS KOMPUTER INDONESIA</h1>"); 
   document.write("<h2><font color=red>Prodi Ilmu Komunikasi</h2><hr>"); 
   document.write("<h3><font color=orange>JL.DIPATIUKUR 112 BANDUNG<h2><br>"); 
   document.write("</center>"); 
</script> 
 
Gambar 1.4. Teks Header dan Font Color Pada JavaScript 
1.4. Komentar 
Sama seperti bahasa pemrograman yang lainnya, JavaScript juga menyediakan fasilitas 
untuk menuliskan komentar, komentar ini beguna bila nantinya Anda atau orang lain 
membaca suatu program. 
Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitu dengan 
menuliskan komentar setelah tanda garis miring dua kali, contoh: 
// ini cara menuliskan komentar 
atau 
/*  
    ini juga cara menuliskan komentar apabila lebih 
   dari satu baris 
 */ 
 
 
1.5. Event 
 
Event dan event handler merupakan hal yang sangat penting dalam pemrograman JavaScript. 
Event adalah sesuatu yang terjadi karena aksi user. Contohnya jika user men-click tombol 
mouse maka akan terjadi event Click. Jika MousePointer bergerak melewati sebuah link 
terjadilah event MouseOver. Tentunya kita ingin program JavaScript kita bereaksi jika terjadi 
suatu event tertentu. Ini bisa dilakukan dengan bantuan event-handlers. Sebagai contoh kita 
memiliki sebuah tombol yang akan mengeluarkan sebuah popup window jika di-tekan. Ini 
berarti bahwa sebuah window popup harus muncul sebagai reaksi dari event Click. Event-
handler yang harus kita gunakan adalah onClick, yang memberitahukan apa yang harus 
dikerjakan oleh komputer jika event ini terjadi. Contoh di bawah ini menunjukkan bagaimana 
mudahnya menggunakan event-handler onClick:  
<form> 
<input type="button" value="Proses" onClick="alert('Anda telah MengClick Tombol Proses')"> 
</form> 
 
 
 
Gambar 1.5. Penggunaan Event 
 
Ada beberapa hal baru dalam kode di atas, mari kita lihat satu per satu. Kita telah membuat 
form dan sebuah tombol (ini merupakan bahasa HTML standard) . Bagian yang baru adalah 
onClick="alert('Anda telah MengClick Tombol Proses')" yang berada di dalam tag <input>.  
Inilah yang mendefinisikan apa yang akan terjadi jika tombol ditekan. Jadi jika terjadi event 
Click, komputer akan mengeksekusi alert(''Anda telah MengClick Tombol Proses''), yang 
merupakan kode JavaScript. 
 
alert() berfungsi untuk menampilkan window popup. Di dalam tanda kurung anda dapat 
menentukan string yang akan muncul pada window yang dimaksud. 
Satu hal yang mungkin membingungkan: pada perintah document.write() kita 
menggunakan double quotes (") dan pada alert() kita menggunakan juga single quotes  ('), 
mengapa? Pada contoh ini kita menuliskan onClick="alert('Ya')",  kita gunakan keduanya 
(double dan single quote) . Jika kita tulis onClick="alert("Ya")" maka komputer akan 
bingung mana yang menjadi bagian event-handler onClick dan mana yang bukan. Urutan 
penggunaannya tidak menjadi masalah. Jadi bisa juga kita tuliskan onClick='alert("Ya")'. 
 
Ada banyak event-handler lain yang bisa kita gunakan. Selengkapnya lihat pada referensi 
JavaScript.  
 
1.6. Function 
Pada dasarnya function merupakan suatu cara yang dapat anda gunakan untuk  menyatukan 
beberapa perintah 
Fungsi Tanpa Parameter 
 Berikut merupakan contoh sebuah fungsi sederhana untuk menampilkan teks. 
 
<script> 
function menampilkan_teks()  
{ 
  document.write("Contoh Fungsi Menggunakan<br>"); 
  document.write("Java Script<br>"); 
} 
menampilkan_teks(); 
</script> 
 
 
Gambar 1.6.Penggunaan Fungsi 
 
 
Fungsi dengan Parameter 
Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam fungsi. 
Function dapat pula dikombinasikan dengan event-handler seperti pada contoh berikut ini:  
<script> 
function penjumlahan(x,y) { 
  var result = x + y; 
  alert(result); 
} 
penjumlahan(10,5); 
</script> 
 
 
Fungsi yang Mengembalikan Nilai 
Agar hasil pengolahan nilai di dalam fungsi dapat digunakan untuk proses berikutnya, maka 
fungsi dapat juga diprogram untuk mengembalikan nilai. 
Pengembalian nilai pada fungsi menggunakan kata kunci return kemudian diikuti dengan nilai 
atau variabel yang akan dikembalikan. Contoh: 
 
<script> 
function kali(a,b){ 
    hasilkali = a * b; 
    return hasilkali; 
} 
 
// memanggil fungsi 
var nilai1 = 20; 
var nilai2 = 5; 
var hasilperkalian = kali(nilai1, nilai2); 
document.write(hasilperkalian);  
</script> 
 
 
Gambar 1.7.Fungsi yang mengembalikan nilai 
 
1.7.Variabel dalam JavaScript 
 
Dalam hampir setiap bahasa pemrograman ada yang namanya variable. Variabel 
berguna untuk menyimpan data. Tanpa bantuan variabel sebuah program tidak bisa 
melakukan apa yang Anda inginkan.  
Dalam Java Script pendeklarasian sebuah variabel sifatnya opsional, artinya Anda 
boleh mendeklarasikan atau tidak, Jika Anda memberi nilai pada suatu variabel,  maka 
dalam JavaScript dianggap bahwa Anda telah mendeklarasikan variabel tersebut. 
Contoh: 
Nama  = ”Fahra Ragita” 
X = 2021 
Y = 12122019 
Untuk mendeklarasikan secara explisit, tulislah variabel tersebut dengan didahului 
kata kunci var. 
Contoh 
var nama; 
var nama=”Fahra Ragita”; 
var X = 2021; 
var Y; 
Untuk mendeklarasikan beberapa variabel dalam satu baris, dapat dilakukan dengan 
menuliskan seperti berikut: 
var A,B,C; 
 
1.8.Tipe Data 
Tidak seperti bahasa pemrograman lainnya, JavaScript tidak mempunyai tipe data 
secara explisit. Hal ini dapat dilihat dari beberapa contoh  yang telah disajikan 
sebelumnya. Anda mendeklarasikan variabel tapi tidak menentukan tipenya. 
Meskipun JavaScript tidak mempunyai tipe data explisit, JavaScript mempunyai tipe 
data Implisit. Ada empat macam tipe data implisit yang dimiliki JavaScript yaitu: 
 Numerik, seperti 2351978, 2003948,3.14, 100 dsb 
 String, seperti “Asep”. “Mei”, “Juli”, “Kenapa Mundur”, “JavaScript” dsb 
 Boolean, hanya bernilai true atau false 
 
 Null, yaitu variabel yang tidak diinisialisasi 
 
1.8.1.Tipe Numerik 
Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu bilangan 
bulat  dan bilangan real. 
Untuk bilangan bulat, Anda bisa merepresentasikan dengan basis desimal, oktal, atau 
heksadesimal. 
Contoh: 
 var A = 100; 
 var A = 0x2F; 
Untuk pendeklarasian tipe bilangan real, Anda bisa menggunakan tanda titik atau 
notasi ilmiah (notasi E).  
Contoh: 
 var   a = 123.567 
 var  b  = 1.234567E+3 
 
 
 
1.8.2. Tipe String 
Untuk mendeklarasikan tipe  string dapat dilakukan dengan cara   menuliskan string 
diantara tanda tunggal (‘) atau tanda petik ganda (”); 
Contoh: 
var  A = ‘Ini pendeklarasian String’; 
var C = “Ini juga string “; 
 
1.8.3.Tipe Boolean 
 
Tipe Boolean hanya mempunyai nilai True atau false. Tipe ini biasanya digunakan 
untuk mengecek suatu kondisi atau keadaan. 
Contoh 
Var   X = (Y>90); 
Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akan bernilai 
True. 
 
1.8.4. Tipe Null 
Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal 
(inisialisasi) 
var x; 
 
1.9. Operator 
Operator pada JavaScript dibagi menjadi enam, yaitu 
 Aritmetik 
 Pemberian nilai (Assign) 
 Pemanipulasian bit (bitwise) 
 Pembanding 
 Logika 
 String 
 
1.9.1. Operator Aritmetik 
Operator ini digunakan untuk operan bertipe numerik, Ada dua macam operator 
aritmetik, yaitu operator numerik tunggal  dan  operator aritmetik biner. Perbedaan 
kedua operator ini terletak pada jumlah operan yang harus dioperasikan. 
 
Operator Tunggal/Biner Keterangan 
 
+ 
- 
* 
/ 
% 
- 
++ 
-- 
Biner 
Biner 
Biner 
Biner 
Biner 
Tunggal 
Tunggal 
Tunggal 
Penjumlahan 
Pengurangan 
Perkalian 
Pembagian 
Modulus 
Negasi 
Penambahan dengan Satu 
Pengurangan dengan Satu 
 
1.9.2. Operator Pemberian Nilai 
Digunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu operan. 
Operator Keterangan Contoh Equivalen 
= 
+= 
-= 
*= 
/= 
%= 
&= 
|= 
Sama dengan 
Ditambah dengan 
Dikurangi dengan 
Dikalikan dengan 
Dibagi dengan 
Modulus dengan 
Bit AND dengan 
Bit OR dengan 
X=Y 
X+=Y 
X-=Y 
X*=Y 
X/=Y 
X%=Y 
X&=Y 
X|=Y 
 
X=X+Y 
X=X-Y 
X=X*Y 
X=X?Y 
X=X%Y 
X=X&Y 
X=X|Y 
 
 
1.9.3. Operasi Pemanipulasi Bit 
Operasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan 
bulat. 
 
Operator Keterangan 
& 
| 
^ 
~ 
<< 
>> 
Bit AND 
Bit OR 
Bit XOR 
Bit NOT 
Geser  ke kiri 
Geser ke kanan 
 
>>> Geser kekanan dengan diisi nol 
 
<script> 
var  A = 12; // A = 1100b 
var  B = 10; // B = 1010b 
var  C = A &  B 
/*maka akan dihasilkan bilangan seperti berikut:  
      1100b 
      1010b AND 1000b 
*/ 
document.write("C:",C,"<br>"); 
var A = 12; 
var C = A << 2;     
var D = A>>1 
document.write("A:",A,"<br>"); 
document.write("B:",B,"<br>"); 
document.write("C:",C,"<br>"); 
document.write("D:",D,"<br>"); 
</script> 
 
maka variabel C akan bernilai 48 (0011 0000b 
variabel D akan bernilai 6 (0110b). 
    
 
Gambar 1.8.Contoh Hasil Operasi Bit 
 
1.9.4. Operator Pembanding 
Digunakan untuk membandingkan  dua buah operan. Operan  yang dikenai operator 
ini dapat bertipe string, numerik, maupun ekspresi lain. 
Operator Keterangan 
== 
!= 
> 
< 
>= 
Sama dengan 
Tidak sama dengan 
Lebih besar  
Lebih kecil 
Lebih bersar atau sama dengan 
 
<= Lebih kecil atau sama dengan  
 
1.9.5. Operator Logika 
Sesuai namanya operator ini digunakaan untuk mengoperasikan  operan yang bertipe 
boolean, 
 
Operator Keterangan 
&& 
|| 
! 
Operator logika AND 
Operator logika OR 
Operator logika NOT 
 
Contoh: 
var A = true; 
var B = false; 
var  C = A && B; //false 
var  D = A || B; //true 
var  E =  !A; // false 
 
 
 
 
 
1.9.6. Operator String 
Selain operator pembanding, operan bertipe string pada JavaScript juga mengenal 
satu operator lagi yang dinamakan penggabungan. Operator ini digunakan untuk 
menggabungkan beberapa string menjadi sebuah string yang lebih panjang. 
Contoh: 
Nama =  “Java” + ” Script”; 
Akan menghasilkan “JavaScript” pada variabel Nama 
Penggunaan Operator String 
<script> 
 
document.writeln("<h1>Operasi Aritmetika </h1><pre>"); 
var A = "100"; 
var B = "200"; 
var C = 300; 
var D = 400; 
var E = A + B; 
document.writeln('"100" + "200" =  ' + E); E = B + C; 
document.writeln('"200" +  300  =  ' + E); E = C + D; 
document.writeln(' 300  +  400  =  ' + E);  
</script> 
 
Gambar 1.9. Output Program Operasi String 
 
 
Referensi: 
*Aplikasi Internet Menggunakan HTML, CSS & Java Script, Taryana Suryana, 
Elexmedia Komputindo 


Materi 1. Pengenalan Java Script

Komputer Aplikasi IT-2
Materi ini membahas mengenai beberapa perulangan yang ada dalam java script, perulangan for, for in, forech, while dan dowhil

 
 
BAB 2 
PERULANGAN DALAM JAVASCRIPT 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
2.PERULANGAN 
Perulangan adalah proses mengulang-ulang eksekusi satu statement atau lebih blok 
statement tanpa henti, selama kondisi yang dijadikan acuan terpenuhi. Biasanya disiapkan 
variabel untuk iterasi atau variabel penanda kapan perulangan akan diberhentikan. . 
Ada lima macam bentuk perulangan di Javascript dan Secara umum, perulangan ini 
dibagi menjadi dua kelompok, yaitu: counted loop dan uncounted loop. 
 Counted Loop merupakan perulangan yang jelas dan sudah ditentukan berapa banyak 
perulangannya. 
 Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia harus 
mengulan. 
Perulangan yang termasuk dalam Counted Loop: 
1. Perulangan For 
2. Perulangan Foreach 
3. Perulangan Repeat 
Perulangan yang termasuk dalam Uncounted Loop: 
1. Perulangan While 
2. Perulangan Do/While 
 
 
 
 
 
 
 
2.1.Perulangan For 
Perulangan for merupakan perulangan yang termasuk dalam couted loop, karena sudah 
jelas berapa kali ia akan mengulang.  
NamaFile:for1.html 
<script> 
for(i=0;i<=10;i++){ 
    document.write("Perulangan ke-" + i + "<br>"); 
} 
</script> 
 
Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata for. 
Kondisi ini akan menentukan: 
1. Hitungan akan dimulai dari 1 (i = 1); 
2. Hitungannya sampai berapa? Sampai i<=10; 
3. Lalu di setiap perulangan i akan bertambah +1 (i++). 
 
Variabel i pada perulangan for berfungsi untuk menyimpan nilai hitungan. 
Jadi setiap perulangan dilakukan nilai i akan selalu bertambah satu. Karena kita 
menentukannya di bagian i++. 
 
Gambar 2.1.Jendela Keluaran Perulangan For 
 
2.2.Perulangan foreach 
Perulangan foreach biasanya digunakan untuk mencetak item di dalam array. 
Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya akan 
ditentukan oleh panjang dari array. 
Ada dua cara menggunakan perulangan foreach di Javascript: 
1. Menggunakan for dengan operator in; 
2. Menggunakan method forEach(). 
Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator in: 
NamaFile:for2.html 
<script> 
var kota=["Bandung","Cimahi","Ciwaruga", "Sarijadi"]; 
for(i=0;i<kota.length;i++){ 
    document.write(i+"."+kota[i]+"<br/>"); 
} 
</script> 
 
 
 
Gambar 2.2. Perulangan Array for biasa 
 
Perulangan foreach bisa dibuat lebih sederhana lagi dengan menggunakan 
operator in seperti ini: 
 
 
NamaFile:for3.html 
 
<script> 
{ 
kota=["Bandung","Cimahi","Ciwaruga", "Sarijadi"]; 
for(i in kota){     
document.write(i+"."+kota[i]+"<br/>"); 
} 
</script> 
 
 
Cara kedua membuat perulangan  foreach  ialah dengan menggunakan  
method  forEach() dari array. 
 
NamaFile:for4.html 
 
<script> 
{ 
var hari = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"]; 
hari.forEach(function(hari){ 
    document.write(hari + "<br>"); 
} 
); 
</script> 
 
 
 
Gambar 2.3. Perulangan foreach function 
 
 
 
 
2.3. Perulangan repeat() 
Perulangan dengen method atau fungsi repeat() termasuk dalam perulangan counted loop. 
Fungsi ini khusus digunakan untuk mengulang sebuah teks (string). 
 
NamaFile:repeat.html 
 
<script> 
    document.write("Tampilkan tulisan ini 10 kali <br> ".repeat(10)); 
</script> 
 
 
Gambar 2.4. Perulangan dengan Repeat 
 
2.4. Perulangan while 
Perulangan while akan terus melakukan perulangan selama kondisi masih memenuhi. 
NamaFile:while.html 
<script> 
i=1; 
while(i<=10){ 
    document.write("Perulangan ke-" + i + "<br>"); 
i++; 
} 
</script> 
 
 
 
 
Gambar 2.5.Jendela Keluaran Perulangan While 
 
2.5.Perulangan do..while 
Perulangan do..while hampir sama dengan while ia akan terus melakukan perulangan 
selama kondisi masih memenuhi. 
NamaFile:dowhile.html 
<script> 
i=1; 
do 
{ 
  document.write("Perulangan ke ",i,"<br>"); 
  i++; 
} 
while (i<=10); 
</script> 
 
 
 
 
Gambar 2.6. Perulangan dengan do..while 
 
 
  
 
 
 
TUGAS1 
Dengan Menggunakan Perulangan Buat Program Java Script Untuk menampilkan berikut: 
 
1. Soal latihan Ini dibuat dengan menggunakan perulangan while dan dowhile 
2. Menampilkan Bilangan Ganjil dari 1 sampai 100 
 
 
 
2.Menampilkan bilangan Genap dari 1 sampai 100 
 
 
 
 
 
3.Menampilkan Perulangan Mundur dengan hasil sepeti berikut: 
 
 
 
Upload Latihan ke 
https://Kuliahonline.unikom.ac.id 
 
Setelah program semua program selesai dibuat dan hasilnya sesuai dengan tampilan 
yang ada di materi ini:  
 
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: Tugas1-nama-nim-kelas.pdf 
Dikumpulkan Paling Lambat Setiap Hari Minggu Jam 18:00 
 
Ok…selamat mencoba 
 
 
 
DAFTAR PUSTAKA 
1. Suryana, Taryana (2023) Materi 1 Pengenalan Java Script. [Teaching Resource] 
2. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
3. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
4. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
5. https://www.w3schools.com/  September, 2021 
6. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
7. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
8. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 


Materi 2 Perulangan Dalam Java Script

Aplikasi IT-2
Materi ini membahas mengenai dasar-dasar pemrograman HTM

 
 
Pengenalan HTML 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
Join Zoom Meeting  
https://us04web.zoom.us/j/3629329963?pwd=ZUhWcXl6RHp3dTNKZmlxWkUrV2ZCQT09  
 
Meeting ID: 362 932 9963  
Passcode: 8HQiXn 
 
 
Pendahuluan  
 Pengenalan Web Browser 
 Electronic Mail (E-Mail) 
 Pengantar Desain Website dengan HTML 
 
1.1. Pengertian Web Browser 
Web Browser adalah sebuah Software Aplikasi yang digunukan untuk menerima,  
menampilkan, dan menerjemahkan informasi dari world wide web (wikipedia). Dan 
salah satu informasi itu dibuat dalam format HTML. 
Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti 
yang dirancang. Pada dasarnya seluruh web browser dapat menampilkan kode HTML 
sama baiknya, namun jika sudah berbicara mengenai desain halaman, tiap-tiap 
browser memiliki beberapa perbedaan. 
HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus 
menangani web, yaitu W3C (World Wide Web Consortium). Hal ini dikarenakan tiap-
tiap program web browser menerjemahkan kode-kode HTML secara berbeda-beda, 
sehingga di perlukan sebuah standar yang sama untuk seluruh browser. 
Namun pada penerapannya, standar ini hanya merupakan rekomendasi. Beberapa 
web browser membuat aturannya sendiri. 
Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 2000-an. Hampir 
90% web browser yang digunakan saat itu adalah Internet Explorer, dan IE tidak 
sepenuhnya mengikuti rekomendasi W3C. Sedangkan web browser Opera yang 
mencoba menerapkan standar W3C tidak terlalu populer. Perbedaan aturan 
penerjemahan HTML di antara web browser inilah yang terus menjadi tantangan bagi 
Programmer web. 
 
Sekarang Internet Explorer tidak lagi sekuat dulu. Web Browser Mozilla Firefox dan 
Google Chrome telah menguasai lebih dari 50%, dan IE juga telah berusaha 
menerapkan standar W3C, termasuk web browser terbaru mereka: Microsoft Edge. 
 
 
Fungsi Web Browser 
Untuk mempelajari HTML, web browser adalah perangkat utama yang kita butuhkan. 
Ibarat bahasa pemrograman lainnya, Web Browser adalah Compiler dan intrepreter 
HTML. Anda bebas menggunakan web browser yang disukai, namun dalam tutorial 
Belajar HTML ini saya akan menggunakan Google Chrome. 
 
1.2.Memilih Aplikasi Editor HTML 
Memilih sebuah aplikasi editor HTML tidaklah terlalu sulit. Aplikasi editor HTML 
digunakan untuk mempermudah kita membuat kode HTML. HTML sendiri pada 
dasarnya hanya text biasa yang ditulis dalam kode-kode khusus. Web Browser-lah 
yang akan menerjemahkan kode HTML ini menjadi sebuah tampilan halaman web. 
Untuk membuat kode HTML maupun halaman web sederhana, kita tidak perlu 
menggunakan aplikasi yang besar dan berat. Aplikasi Notepad bawaan Windows 
sebenarnya sudah cukup untuk membuat kode HTML. Namun untuk tutorial belajar 
HTML kali ini saya akan menggunakan aplikasi Notepad++. 
 
Text Editor Notepad++ 
Aplikasi Notepad++ bisa di download secara gratis dari http://notepad-plus-
plus.org/download/ dimana pada saat tutorial ini diupdate pada September 2020, versi 
terakhir adalah v7.8.9, berukuran sekitar 3.95MB. Notepad++ merupakan aplikasi 
editor text gratis ringan namun memiliki banyak fitur. Salah satunya adalah fitur 
pewarnaan code (syntax highlighting). Fitur ini akan memudahkan penulisan HTML. 
 
Untuk dapat mengikuti Mata Kuliah Pemrograman WEB ada beberapa perangkat 
lunak (software) yang harus disiapkan dan di Install di Komputer Anda, yaitu  sebagai 
berikut: 
1. Text Editor, bisa menggunakan Notepad++, Visual Studio Code, Atom, dan 
lain-lain  
2. Web Browser, bisa menggunakan Chrome, Mozilla, Internet Explorer, Microsoft 
Edge dan lain-lain 
 
 
 
 
 
 
 
 
 
 
Pada Materi ini dan materi selanjutnya Text Editor yang akan digunakan adalah 
dengan menggunakan Notepad++ dan browsernya menggunakan chrome 
 
Download Notepad++ ada di : 
https://notepad-plus-plus.org/downloads/ 
 
Gambar 1.1. Download Notepad ++ 
 
Ada 2 Pilihan Flatform Windows, ada yang versi 32 Bit, dan versi 64 Bit,  
Pada Materi ini penulis menggunakan Notepad++ versi 64-bit x64, setelah berhasil 
didownload, kemudian lanjutkan dengan menginstallasikan  notepad++, jika berhasil 
diinstall kemudian jalankan, maka akan ditampilkan jendela seperti berikut: 
  
 
1.3.Program Pertama dengan HTML 
Pada jendela editor Notepad++ tuliskan code program berikut: 
 
 
Gambar 1.2. Menuliskan Kode Program Pada Notepad ++ 
 
1.4.Menyimpan Kode Program 
Setelah mengetikan Kode Program diatas, selanjutnya adalah menyimpannya 
kedalam media penyimpanan anda, caranya adalah Pada  Jendela Notepad++, Pilih 
menu File, kemudian Save, misalnya simpan di drive 
D:\BELAJAR_HTML\pertama.html 
 
 
Gambar 1.3. Menyimpan File HTML 
 
1.5.Membuka File Dengan Browser 
Untuk menampilkan hasil dari kode program pertama.html yang tadi sudah dibuat, 
dapat dilakukan dengan cara, pada Jendela Windows Explorer, Click kanan pada file 
yang akan dibuka, kemudian pilih open With->Google Chrome 
 
Gambar 1.4. Menampilkan Halaman Pertama belajar HTML 
 
1.6.Pengertian E-Mail 
E-Mail adalah singkatan dari Electronics Mail atau dalam bahasa Indonesia disebut 
Surat Elektronik merupakan sarana dalam mengirim surat yang dilakukan melalui 
media internet. Media internet yang dimaksud bisa melalui komputer atau handphone 
yang memiliki akses internet. Pada umumnya mengirim surat biasa akan di kenakan 
biaya (Membeli Perangko) namun pada Surat Elektronik hanya dibutuhkan 
sambungan internet. 
 
Fungsi E-mail 
E-mail adalah alamat resmi kita di dunia maya. Dengan menggunakan email kita dapat 
terhubung dalam berbagai kegiatan internet, seperti bergabung di situs jejaring sosial 
semisal Facebook, Twitter atau Instagram maka saat pendaftaran akan membutuhkan 
email. Saat ini, Email telah berkembang hingga memiliki fungsi yang sangat beragam. 
Mengirim file, foto, video dengan teman dan keluarga menjadi lebih mudah 
Anda Mahasiswa yang kuliah di Unikom akan memiliki E-Mail dengan domain 
@email.unikom.ac.id, E-mail ini digunakan untuk seluruh aktivitas akademik yang ada 
di Unikom, seperti mengikuti perkuliahan online, registrasi, perwalian, nilaionline dan 
lain sebagainya. 
Cara menggunakan E-Mail unikom sama halnya seperti anda menggunakan Gmail 
(Google Mail) hal ini dikarenakan Unikom yang sudah bekerja sama dengan Google 
dalam hal Pemanfaatan Google Apps for Education. 
 
Gambar 1.5. Halaman inbox E-Mail Unikom Penulis 
 
 
1.7.HTML (Hypertext Markup Language) 
Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. 
HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard 
Generalized Markup Language (SGML).  HTML pada dasarnya merupakan dokumen ASCII atau teks 
biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. 
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali 
oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. 
Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari 
versi sebelumnya.  
Kegunaan bahasa ini ialah untuk memanipulasi browser sehingga dapat menampilkan informasi yang 
dapat dibaca oleh pengguna komputer.  
 
 
 
Materi yang akan dibahas meliputi diantaranya: 
 Dasar–Dasar HTML 
 Menambahkan Efek Karakter Fisik pada Halaman Web 
 Menambahkan Efek Karakter Logika 
 Membuat Tabel 
 Membuat Daftar 
 Mengatur Tampilan Dokumen 
 Membuat Link 
 Menempatkan Gambar ke dalam Web 
 Menambahkan Obyek-Obyek Multimedia 
 Membuat Formulir HTML 
 Membuat Frame 
 Membuat Web Site 
 
Struktur Halaman HTML 
Di bawah ini adalah visualisasi struktur halaman HTML: 
 
Gambar 1.6 Struktur Dokumen HTML 
 
 
 
Catatan: Konten di dalam bagian <body> (area putih di atas) akan ditampilkan di 
browser. Konten di dalam elemen <title> akan ditampilkan di bagian atas judul browser atau di 
tab halaman. 
 
Penjelasan Contoh 
 <!DOCTYPE html>deklarasi mendefinisikan bahwa dokumen ini adalah dokumen HTML5 
 <html>elemen elemen akar halaman HTML 
 <head>elemen berisi informasi meta tentang halaman HTML 
 <title>elemen menentukan judul untuk halaman HTML (yang ditampilkan dalam bar judul 
browser atau tab halaman ini) 
 <body>elemen mendefinisikan  dokumen, dan merupakan wadah untuk semua isi 
terlihat, seperti judul, paragraf, gambar, hyperlink, tabel, daftar, dll 
 <h1>elemen mendefinisikan judul besar 
 <p>elemen mendefinisikan sebuah paragraf 
 
 
Untuk jelasnya tuliskan kode program berikut pada halaman baru notepad++ anda: 
<!DOCTYPE html> 
<html> 
<head> 
<title> 
       Belajar HTML 
</title> 
</head> 
<body> 
     Belajar Pemrograman WEB dengan Menggunakan Bahasa HTML<br> 
     Unikom Bandung 
</body> 
</html> 
Gambar 1.7. Latihan1.html 
 Setelah selesai menuliskan dokumen tersebut di atas lakukan perintah FILE SAVE, atau 
SAVE AS nama  file latihan1.html dan pada bagian perintah SAVE AS TYPES pilih ALL FILES  
 
Gambar 1.8. Hasil tampilan latihan1.html 
 
 
Menambahkan Isi pada Bagian Body 
Isi dalam dokumen HTML ditempatkan di antara bagian <BODY> sampai dengan </BODY>. Untuk 
menambahkan isi tersebut  dapat dilakukan dengan cara sebagai berikut:  
Contoh Program 
<!DOCTYPE html> 
<html> 
<head> 
<title> JUDUL HALAMAN </title> 
</head> 
<body> 
 <h1> Potensi Manusia </h1> 
Manusia memiliki potensi diri untuk meraih sukses yang didambakannya.  
Sukses sejati tidak hanya diukur melalui pencapaian materi, akan tetapi  
lebih kepada seberapa besar peranan kita untuk manusia dan alam ini 
</body> 
</html> 
Gambar 1.9. kode Program Latihan.html 
Di bagian <BODY> sampai dengan </BODY> diisi dengan Header Halaman contohnya adalah “Potensi 
Manusia”. Cara membuatnya ialah dengan menggunakan perintah <H1> sampai dengan </H1>. 
Perintah H1 digunakan untuk membuat HEADER atau Kepala Berita.. Setelah itu ditambahkan Caption 
atau penjelasan singkat mengenai isi halaman tersebut..  
 
Setelah selesai menuliskan semua bagian dokumen tersebut, lakukan perintah FILE SAVE AS dengan 
nama file latihan2.html 
 
Gambar 1.10. Tampilan  Halaman latihan2.html 
 
 
Upload Latihan ke 
https://Kuliahonline.unikom.ac.id 
Setelah program latihan1.html dan latihan2.html selesai dibuat dan hasilnya sesuai 
dengan tampilan yang ada di materi ini:  
 
Dengan menggunakan Word Copy Paste Kode program latihan1.html dan 
latihan2.html beserta tangkapan layar (screenshot) hasil keluarannya (screenshot), 
kemudian kirim ke Modul Tugas yang ada di kuliahonline.unikom.ac.id, Nama 
Filenya: 
TUGAS-1-NIM-NAMA  Bisa dalam format Docs atau PDF 
Dikumpulkan Paling Lambat Setiap Hari Minggu Sore 
 
Terimakasih, selamat belajar 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, Elexmedia 
Komputindo, Jakarta 
2. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
3. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
4. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
5. https://www.w3schools.com/html, September, 2021 
 
 
 
 


Materi 1. Pengenalan Html

Komputer Aplikasi Akuntansi VI - E-Commerce
Materi ini membagas berbagai macam operator, aritmatika, penugasan, penugasan, eksekusi dan penggunaanya dalam databas

 
Penggunaan Operator  
Pada Pemrograman PHP dan Database 
 
Oleh:Taryana Suryana M.Kom 
Jurusan Akutnasi Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
3.1. Operator pada PHP 
Operator merupakan symbol yang biasa di libatkan dalam program untuk melakukan suatu operasi 
atau manipulasi. 
Misalnya untuk: 
1. Menjumlahkan dua buah nilai 
2. Memberikan nilai ke suatu variable 
3. Membandingkan kesamaan dua buah nilai 
 
3.2. Operator aritmatika 
Adalah operator yang digunakan dalam melakukan suatu proses operasi matematika, seperti 
penjumlahan, perkalian dan sebagainya. 
Contoh: 
$a + $b 
symbol + merupakan operator untuk melakukan operasi penjumlahan dari kedua operand-nya (yaitu 
$a dan $b). Karena operator penjumlahan melibatkan dua buah operand, maka operator ini tergolong 
sebagai operator binary. 
 
Tabel 3.1. Operator Aritmatika 
 
 
Operator pembagian ("/") mengembalikan suatu nilai bulat  (hasil dari suatu pembagian bulat) Jika 
kedua operan adalah integer (atau string yang dikonversi ke integer). Jika salah satu operan adalah 
nilai  floating-point value, pembagian  floating-point dilakukan.Operator seperti penjumlahan, 
pengurangan, perkalian dan pembagian merupakan hal yang umum. Adapun operator sisa pembagian 
(modulus) berupa % adalah sesuatu yang berbeda dengan operator sebelumnya. 
 
 
 
Lihat contoh. 
 
 
 
3.3. Operator pemberi nilai  atau penugasan 
Operator pemberian nilai (penugasan) yang disimbolkan dengan tanda (=) sama dengan, berguna 
untuk memberikan suatu nilai kesuatu variable. Operator ini dapat digunakan sebagai ungkapan 
ataupun berdiri sendiri sebagai pernyataan. 
$a = 3; memberikan nilai 3 ke $a 
$a = ($b = 4) + 5; // $a is equal to 9 now, and $b has been set to 4. 
$a = 2 + 3; 
 
3.4. Operator Bitwise 
Operator Bitwise memungkinkan anda untuk memanipulasi data dalam bentuk bit tertentu dalam 
suatu integer on atau off. 
 
Table 3.2. Operator Bitwise 
 
 
3.5. Operator Perbandingan 
Operator perbandingan, sesuai dengan namanya, memperbolehkan anda untuk membandingkan dua 
nilai. 
 
Table 33. Operator Perbandingan 
 
  
 
 
3.6. Operator Eksekusi 
PHP mendukung sebuah operator eksekusi yang disimpan dalam tanda  backticks (``). Dalam tanda 
backticks tersebut dapat dimasukan perintah yang dilakukan dalam shell, kemudian outputnya akan 
dikeluar di jendela browser. 
 
Contoh: 
$output = `ls -al`; 
echo "<pre>$output</pre>"; 
 
 
3.7. Operator Penaikan dan Penurunan 
PHP mendukung perintah C-style yang berhubungan dengan penaikan (increment) dan penurunan 
(decrement). Kedua operator ini digunakan pada operand bertipe bilangan bulat (integer). 
 
Tabel 3.4. Increment/decrement Operators 
 
 
Contoh 1: 
$a = 10; 
$b = 10 +  ++$a; // $a akan bernilai 11 dan $b akan bernilai 21 
Perintah diatas akan sama dengan perintah berikut: 
$a = 10 + 1; 
$b = 10 + 11 
 
Contoh 2: 
$a = 10; 
$b = 10 +  $a++; // $a akan bernilai 11 dan $b akan bernilai 20 
Perintah diatas akan sama dengan perintah berikut: 
$b = 10 + $a 
$a = 10 + 1; 
  
 
 
3.8. Operator Logical 
Operator logika biasa digunakan untuk menghubungkan dua buah ungkapan kondisi menjadi sebuah 
ungkapan kondisi 
 
Table 3.5. Operator Logical 
 
 
3.9. Operator Prioritas 
Operator prioritas menentukan bagaimana suatu ekpresi dikerjakan oleh PHP. Operator yang 
mempunyai prioritas tinggi akan didahulukan dalam hal pengerjaannya dibandingkan dengan 
operator uang memiliki prioritas lebih rendah. 
Contoh: 
1 + 5 * 3, jawabanya adalah 16 dan bukan 18, sebab tanda operator kali  (*) lebih tinggi derajatnya 
dibandingkan dengan operator penjumlahan (+). 
Dibawah ini adalah tabel operator prioritas dimana operator yang mempunyai derajat lebih rendah 
akan disimpan diawal. 
 
Table 3.6. Operator Prioritas 
 
 
 
 
 
 
3.10. Operator String 
Operator string adalah operator yang digunakan untuk menggabungkan dua atau beberapa string. 
Hanya ada satu operator string dalam PHP yaitu operator pengabungan string (".") titik. 
Contoh: 
$a = "Hello "; 
$b = $a . "World!"; // now $b = "Hello World!" 
 
 
3.11.Operator Pada Database 
Dalam Database anda dapat menggunakan operator sebagaimana pada pemrograman php, 
perhatikan dan ikuti langkah berikut: 
 
Berdasarkan pada tabel databarang berikut adalah contoh SQL untuk mencari TOTAL: 
 
SELECT NAMABARANG, HARGA,JUMLAH, HARGA*JUMLAH as TOTAL  
FROM BARANG 
 
 
Gambar 3.1. Menampilkan Total Harga 
 
 
TOTAL didapat dari hasil perkalian antara HARGA * JUMLAH 
Menggunakan operator * (perkalian) 
 
 
Penggunaan Operator Matematika Perkalian dan Operator Increment pada Pemrograman PHP, 
Untuk menampilkan Data barang dan Total Harga 
 
NamaFile:TAMPILBARANG.PHP 
 
<html> 
<center> 
<h1>MENAMPILKAN DATA BARANG</h1> 
<hr> 
<table border=1> 
<tr><th>NO<th>KODE<th>NAMABARANG<th>HARGA<th>JUMLAH<th>TOTAL 
 
<?php 
require ("koneksi.php"); 
$sql="select * from barang"; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
$n=1; 
do 
{ 
list($kode,$namabarang,$harga,$jumlah)=$row; 
$total=$harga*$jumlah; //operator perkalian 
echo 
"<tr><td>$n<td>$kode<td>$namabarang<td>$harga<td>$jumlah<td>$t
otal"; 
$n++; //operator increment 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table> 
 
 
 
Gambar 3.2. Menampilkan Nomor Urut dan Total Harga dengan Menggunakan Operator 
 
  
 
 
Latihan  
Berikut adalah contoh penggunaan Operator dalam Program 
Nama File:operator1.php 
<?php 
$A=100; 
$B=5; 
$C=$A+$B; //Operator + untuk penjumlahan 
$D=$A-$B; //Operator - untuk pengurangan 
$E=$A/$B; //Operator / untuk pembagian 
$F=$A*$B; //Operator * untuk perkalian 
 
echo "<h2>Contoh Penggunaan Operator</h2>"; 
echo "<hr>"; 
echo "A = $A<br>"; 
echo "B = $B<hr>"; 
 
echo "Variabel A di Jumlahkan Variabel B Hasilnya disimpan di variabel C<hr>"; 
echo "C = $C<hr>"; 
echo "Variabel A di Kurangi Variabel B Hasilnya disimpan di variabel D<hr>"; 
echo "D = $D<hr>"; 
echo "Variabel A di Bagi  Variabel B Hasilnya disimpan di variabel E<hr>"; 
echo "E = $E<hr>"; 
echo "Variabel A di KALI Variabel B Hasilnya disimpan di variabel F<hr>"; 
echo "F = $F<hr>"; 
?> 
 
Jangan lupa file selalu disimpan di folder: 
xampp/htdocs/hi/ 
 
 
Gambar 3.1.Hasil Program operator1.php 
 
 
 
 
Membuat Program Untuk mencari Nilai Akhir dan nilai Rata-rata 
Diketahui nilai Tugas, UTS dan UAS,  
Nilai Akhir = 20% tugas + 30% uts + 50% uas 
Rata = (tugas+uts+uas)/3; 
 
NamaFile:operator2.php 
<?php 
$namasiswa="Fahra Ragita Musyafa"; 
$prodi="Hubungan Internasional"; 
$tugas=75; 
$uts=80; 
$uas=85; 
$nilaiakhir=(0.2*$tugas) + (0.3*$uts) + (0.5*$uas); 
$rata=($tugas+$uts+$uas)/3; 
echo "<h2>Menampilkan Nilai dan Rata-rata</h2>"; 
echo "<hr>"; 
echo "Nama Siswa = $namasiswa<br>"; 
echo "Prodi = $prodi<br>"; 
echo "Tugas = $tugas<br>"; 
echo "UTS = $uts<br>"; 
echo "UAS = $uas<hr>"; 
echo "Nilai Akhir = $nilaiakhir<br>"; 
echo "Rata Rata Nilai = $rata<hr>"; 
?> 
 
 
Gambar 3.2. Hasil Program Menampilkan Nilai Akhir dan Rata-rata 
  
 
Tugas: 
Tugas 3.1. Buat Program Penjualan, Untuk Menampilkan Totalharga, Diskon, dan 
Total bayar, jika diketahui: 
 
 
 
Hasil Akhir Tugas3.1 
  
 
 
Tugas 3.2. Dengan Menggunakan Database Barang, Buat Program Untuk 
Menampilkan Hasil Seperti berikut: 
 
 
Kerjakan Tugas3, kirim dalam format PDF Coding Program dan Screenshot, 
paling Lambat hari Minggu Sore 
 
 
 
ooOOoo 
 
  
 
PUSTAKA  
 
1. Suryana, Taryana (2022) Materi 7 Hapus Data Barang. [Teaching Resource] 
2. Suryana, Taryana (2022) 6.edit Data Barang Pada Database Barang. [Teaching Resource] 
3. Suryana, Taryana (2022) 6.edit Data Ktp. [Teaching Resource] 
4.  
5. Suryana, Taryana (2022) Materi 5 Pencarian Data Barang Dan Data Pegawai. [Teaching 
Resource]  
6. Suryana, Taryana (2022) Membuat Form Memasukan Data Pegawai. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 3 Input Dan Output Pada Database Barang. [Teaching Resource] 
8. Suryana, Taryana (2022) Membuat Database. [Teaching Resource] 
9. Suryana, Taryana (2022) Instalasi Xampp Untuk Pemrograman E-commerce 2022. [Teaching 
Resource] 
10. Suryana, Taryana (2022) Pengenalan E-commerce. [Teaching Resource] 
11. Suryana, Taryana (2022) Membuat Program Untuk Edit Data Akta Perkawinan. [Teaching 
Resource] 
12. Suryana, Taryana (2022) Membuat Program Untuk Perubahan Atau Edit Data. [Teaching 
Resource] 
13. Suryana, Taryana (2022) Menampilkan Relasi Penjualan Barang. [Teaching Resource] 
14. Suryana, Taryana (2021) Membuat Program Untuk Menangani Penjualan Barang. [Teaching 
Resource] 
15. Suryana, Taryana (2021) Membuat Toko Online. [Teaching Resource] 
16. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
17. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
18. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
19. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
20. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
21. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
22. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
23. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
24. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
25. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
26. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
27. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
28. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
29. https://www.w3schools.com/  September, 2021 
30. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
31. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
32. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
33. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 


Bab 3 Penggunaan Operator Pada Pemrograman Php Dan Database

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

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) reverse() 
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-2
Materi ini membahas mengenai Fungsi Logika dalam java script, 
ada fungsi if, if..else, if..else..if, dan switch cas

Not a member yet

Materi 13 Membuat Menu Navigasi Dengan W3 Css

Materi 13 Membuat Menu Navigasi Dengan W3 Css

Materi 15 Hapus Data Akta Perkawinan

Materi 1. Pengenalan Java Script

Materi 2 Perulangan Dalam Java Script

Materi 1. Pengenalan Html

Bab 3 Penggunaan Operator Pada Pemrograman Php Dan Database

Materi 3 Fungsi Kondisi - Fungsi Logika

Materi 4. Array Dalam Java Script

Materi 3. Materi 3 Fungsi Kondisi - Fungsi Logika

15,029

70,114