Repository Universitas Komputer Indonesia

Komputer Aplikasi IT-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 E-Commerce
Materi ini membahas mengenai pembuatan aplikasi untuk mengelola data member toko onlin

 
Bab 11 Mengelola Data Member 
 
Taryana Suryana M.Kom 
Hubungan Internasional Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
11. Data Member 
Data Member merupakan data-data yang menyimpan semua member atau anggota dari toko online, 
adapun struktur tabelnya adalah sebagai berikut: 
Tabel:Member 
 
 
Gambar 11.1. Struktur Tabel Member 
 
CREATE TABLE `member` ( 
  `id_member` varchar(10) NOT NULL, 
  `nama` varchar(30) NOT NULL, 
  `alamat` varchar(50) NOT NULL, 
  `kota` varchar(20) NOT NULL, 
  `kodepos` varchar(5) NOT NULL, 
  `email` varchar(20) NOT NULL, 
  `hp` varchar(15) NOT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; 
ALTER TABLE `member` 
  ADD PRIMARY KEY (`id_member`); 
COMMIT; 
11.1. Form Input Data Member  
 
Untuk memasukan data Member yang sesuai dengan struktur tabel tersebut diatas, maka pada 
materi ini akan dibahas mengenai pembuatan Form Masukannya 
Adapun Design Form yang akan di buat adalah seperti berikut: 
 
 
 
Gambar 11.2. Design Form Input member 
 
NamaFile:Input_member.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 INPUT MEMBER</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
<form action="save_member.php" method=post> 
<center> 
<table> 
<tr><td>ID MEMBER<td><input name=id_member size=10> 
<tr><td>NAMA LENGKAP<td><input name=nama size=20> 
<tr><td>ALAMAT<td><input name=alamat size=50> 
<tr><td>KOTA<td><input name=kota size=30> 
<tr><td>KODE POS<td><input name=kodepos size=5> 
<tr><td>E-MAIL<td><input name=email size=25> 
<tr><td>HP<td><input name=hp size=20> 
</table> 
<hr> 
<input type=submit value="Save"  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> 
 
 
11.2. Menyimpan Data Member 
Untuk menyimpan data dari Form Input Member kedalam database atau tabel, maka dapat 
dilakukan dengan menggunakan kode program berikut: 
Nama File:save_member.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 MEMBER</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-aqua"> 
<p> 
<table border=0> 
<?php 
$id_member=$_POST['id_member']; 
if($id_member!='') 
{ 
$nama=$_POST['nama']; 
$alamat=$_POST['alamat']; 
$kota=$_POST['kota']; 
$kodepos=$_POST['kodepos']; 
$email=$_POST['email']; 
$hp=$_POST['hp']; 
 
echo "<tr><td width=150>ID MEMBER<td>$id_member"; 
echo "<tr><td>NAMA<td>$nama"; 
echo "<tr><td>ALAMAT<td>$alamat"; 
echo "<tr><td>KOTA<td>$kota"; 
echo "<tr><td>KODE POS<td>$kodepos"; 
echo "<tr><td>E-MAIL<td>$email"; 
echo "<tr><td>HP POS<td>$hp"; 
 
require ("koneksi.php"); 
 
$sql="insert into member values 
('$id_member','$nama','$alamat','$kota','$kodepos','$email','$hp') "; 
$hasil=mysqli_query($conn,$sql); 
?> 
</table> 
<hr> 
<p> 
<div class="w3-panel w3-gray w3-round-xxlarge"> 
  <h1 class="w3-text-white" style="text-shadow:1px 1px 0 #444"> 
 
  <b>Data Telah di Simpan..!</b></h1> 
</div> 
<?php 
} 
else 
{ 
?> 
 <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 Boleh Kosong..!</b></h1> 
</div> 
 
<?php 
} 
?> 
</table> 
 
 
 
Gambar 11.3. Design Form Save member 
 
 
11.3. Menampilkan Data Member 
Untuk menampilkan seluruh data yang tersimpan dalam tabel member, dapat dilakukan dengan 
menggunakan kode program berikut: 
NamaFile:tampil_member.php 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body background="paper.gif"> 
<div class="w3-panel w3-center w3-blue w3-card-4 w3-round-xxlarge"> 
  <p><h1>MENAMPILKAN DATA MEMBER</h1></p> 
</div> 
 
<hr> 
<table class="w3-table-all"> 
 
  <thead> 
  <tr class="w3-cyan"> 
   <th>NO<th>ID MEMBER<th>NAMA<th>ALAMAT<th>KOTA<th>KODEPOS<th>EMAIL<th>HP 
</thead> 
<?php 
require ("koneksi.php"); 
$sql="select * from member"; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
$n=1; 
do 
{ 
list($id_member,$nama,$alamat,$kota,$kodepos,$email,$hp)=$row; 
echo "<tr><td>$n<td>$id_member<td>$nama<td>$alamat<td>$kota<td>$kodepos<td>$email<td>$hp"; 
$n++; 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table> 
 
 
 
Gambar 11.4. Tampil Data Member 
 
 
PUSTAKA HI 
 
1. Suryana, Taryana (2022) Materi 10 Integrasi Aplikasi E-commerce. [Teaching Resource] 
2. Suryana, Taryana (2022) Materi 9 Hapus Data Penjualan. [Teaching Resource] 
3. Suryana, Taryana (2022) Materi 8 Membuat Program Untuk Menangani Penjualan 
Barang. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 7 Hapus Data Barang. [Teaching Resource] 
5. Suryana, Taryana (2022) 6.edit Data Barang Pada Database Barang. [Teaching Resource] 
6. Suryana, Taryana (2022) 6.edit Data Ktp. [Teaching Resource] 
7.  
8. Suryana, Taryana (2022) Materi 5 Pencarian Data Barang Dan Data Pegawai. [Teaching 
Resource]  
9. Suryana, Taryana (2022) Membuat Form Memasukan Data Pegawai. [Teaching Resource] 
10. Suryana, Taryana (2022) Materi 3 Input Dan Output Pada Database Barang. [Teaching Resource] 
11. Suryana, Taryana (2022) Membuat Database. [Teaching Resource] 
12. Suryana, Taryana (2022) Instalasi Xampp Untuk Pemrograman E-commerce 2022. [Teaching 
Resource] 
13. Suryana, Taryana (2022) Pengenalan E-commerce. [Teaching Resource] 
 
14. Suryana, Taryana (2022) Membuat Program Untuk Edit Data Akta Perkawinan. [Teaching 
Resource] 
15. Suryana, Taryana (2022) Membuat Program Untuk Perubahan Atau Edit Data. [Teaching 
Resource] 
16. Suryana, Taryana (2022) Menampilkan Relasi Penjualan Barang. [Teaching Resource] 
17. Suryana, Taryana (2021) Membuat Program Untuk Menangani Penjualan Barang. [Teaching 
Resource] 
18. Suryana, Taryana (2021) Membuat Toko Online. [Teaching Resource] 
19. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
20. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
21. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
22. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
23. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
24. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
25. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
26. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
27. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
28. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
29. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
30. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
31. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
32. https://www.w3schools.com/  September, 2021 
33. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
34. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
35. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
36. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 


Materi 11 Mengelola Data Member

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

Pemrograman Web 2
Materi ini membahas mengenai fungsi logika if dan switch dalam java scrip

 
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. Materi 3 Fungsi Kondisi - Fungsi Logika

Aplikasi IT-1
Materi ini membahas mengenai List, baik yang berurutan maupun yang tidak beruruta

 
 
Membuat List / Daftar 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
 
 
3.0 List / Daftar 
Daftar atau list diperlukan untuk menampilkan informasi yang bersifat berurutan dan biasanya 
ditampilkan dalam bentuk daftar. HTML menyediakan beberapa tipe daftar, yaitu: Daftar tanpa nomor 
atau unordered list atau disebut juga bulleted list; daftar dengan nomor atau ordered list atau disebut 
juga numbered list; dan daftar untuk definisi atau disebut juga sebagai definition list 
 
 Ol - Order List 
 Ul – Unorder List 
 ul type 
 
3.1. UL 
Bagian pertama ini akan diberikan contoh penggunaan daftar tanpa nomor yang dapat dibuat dengan 
cara sebagai berikut:  Tag untuk membuat daftar dalam bentuk bullet atau unorder list dimulai dengan 
<UL>; kemudian untuk menampilkan daftar butir-butir yang diinginkan digunakan perintah  <LI> dan 
untuk mengakhiri pembuatan daftar ditutup dengan </UL>.  
Contoh penggunaannya di bawah ini: 
Nama File:UL.HTML 
<html> 
<head> 
<<html> 
<head> 
<title>Daftar bullet</title> 
<head> 
 
<body> 
Menampilkan Nama Kota 
<ul> 
<li> Bandung 
<li> Cimahi 
<li> Jakarta 
<li> Bogor 
</ul> 
</body> 
</html> 
 
Unordered List yang disebut juga sebagai bulleted list, mempunyai tanda bullet default berupa 
noktah. Simpanlah file di atas dengan nama ul.html 
 
Gambar 3.1 Menampilkan Unorder List / UL 
Unoreder List Memiliki Tiga Tipe yaitu: 
Tipe Keterangan 
circle Tanda Bulatan 
disc Tanda Bulat hitam 
square Kotak 
 
 
 
 
 
 
 
 
 
 
 
Berikut adalah contoh penggunaan Unorder List dengan Menggunakan Parameter Type 
Nama File: ULTYPE.HTML 
<html> 
<title>Daftar List</title> 
</head> 
<body> 
Menampilkan List dengan Tanda Bulat Putih 
<hr> 
<ul type=circle> 
<li>Tahu 
<li>Gehu 
<li>Bakso 
<li>Siomay 
</ul> 
 
Menampilkan List dengan Tanda Bulat Hitam (disc) 
<hr> 
<ul type=disc> 
<li>Hardisk 
<li>SSD 
<li>Processor 
<li>Flashdisk 
</ul> 
 
 
Menampilkan List dengan Tanda Kotak 
<hr> 
<ul type=square> 
<li>BTC 
<li>BIP 
<li>BEC 
<li>BALTOS 
</ul> 
 
<body> 
</html> 
 
 
Gambar 3.2. Menampilkan Tipe Unorder List 
 
3.2. OL 
Bagian kedua ini akan diberikan contoh penggunaan daftar yang menggunakan nomor atau  disebut 
juga sebagai ordered list. Cara membuat daftar seperti ini ialah dengan menggunakan tag awal <OL>; 
kemudian untuk menampilkan daftar butir-butir yang diinginkan digunakan perintah  <LI> dan untuk 
mengakhiri ditutup dengan </OL> 
Contoh penggunaannya seperti di bawah ini:: 
<html> 
<title>Daftar angka</title> 
</head> 
<body> 
Menampilkan List Berupa Angka 
<ol> 
<li>Komputer 
<li>Printer 
<li>Laptop 
<li>Handphone 
 
</ol> 
<body> 
</html>  
 
 
Simpanlah file di atas dengan nama ol.html 
 
Gambar 3.3 Menampilkan OrderList 
 
Kita dapat mengubah pembuatan daftar menggunakan nomor atau ordered list dengan menggunakan 
model yang lain, yaitu dengan cara menambahkan atribut type pada <OL> tersebut.  
Di bawah ini adalah tipe-tipe lain yang digunakan: 
Tipe Keterangan 
1 Daftar berupa angka 1,2,3 dst  
I Daftar berupa huruf Romawi besar 
i Daftar berupa huruf Romawi kecil 
A Daftar berupa abjad dengan huruf  besar 
a Daftar berupa abjad dengan huruf kecil 
  
Di bawah ini diberikan contoh penggunaannya: 
Nama File OLTYPE.HTML 
<HTML> 
<<HTML> 
<TITLE>OL Tipe</TITLE> 
</HEAD> 
<BODY> 
Menampilkan List Huruf Romawi Besar 
<OL type=I> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
<hr> 
Menampilkan List Huruf Romawi Kecil 
<OL type=i> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
<hr> 
 
Menampilkan List dengan Alfabet Huruf Besar 
<OL type=A> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
<hr> 
Menampilkan List dengan Alfabet Huruf Kecil 
<OL type=A> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
 
<hr> 
Menampilkan List dengan Angka 
<OL type=1> 
<LI>PENDAHULUAN 
<LI>IDENTIFIKASI MASALAH 
<li>MAKSUD DAN TUJUAN 
<li>BATASAN MASALAH 
</OL> 
</BODY> 
</HTML> 
Simpanlah file di atas dengan nama oltype.html 
 
 
Gambar 3. 4 Hasil Menampilkan type Order List 
 
3.3. DD, DL & DT 
Bagian ketiga diberikan contoh pembuatan daftar definisi atau disebut definition list yang 
menggunakan tag<DL>) yang terdiri dari definition term dengan tag<DT>, dan definition definition  
dengan tag<DD>. Contoh penggunaanya seperti di bawah ini: 
 
 
 
Nama File:Definisi_list.html 
<HTML> 
<TITLE>Daftar Definisi</TITLE> 
</HEAD> 
<BODY> 
<DL> 
<DT>GATEWAY 
<DD>Gateway adalah sebuah perangkat yang digunakan untuk menghubungkan satu jaringan 
komputer dengan satu atau lebih jaringan komputer yang menggunakan protokol komunikasi 
yang berbeda sehingga informasi dari satu jaringan Komputer dapat diberikan kepada jaringan 
komputer lain yang protokolnya berbeda. 
<DT>ROUTER 
<DD>Router merupakan perangkat jaringan yang bekerja pada OSI Layer 3, Network Layer. Pada 
layer ini sudah dikenal pengalamatan jaringan menggunakan IP Address, dan router ini berperan 
penting sebagai penghubung/penerus paket data antara dua segmen jaringan atau lebih 
</DL> 
</BODY> 
</HTML> 
 
Simpanlah file di atas dengan nama definisi_list.html 
 
Gambar 3.5. Daftar Definisi 
 
3.5. Nested List 
Bagian keempat diberikan contoh pembuatan nested list merupakan suatu daftar yang terdiri dari 
daftar utama yang diikuti dengan sub-daftar dan yang kemudian dapat diikuti dengan sub-sub daftar 
lagi. Untuk membuat nested list kita dapat menggunakan   unordered list atau ordered list  serta dapat 
 
juga menggabung unordered list dengan  ordered list. Contoh nested list dengan menggunakan 
unordered list 
Nama File:NESTED_LIST.HTML 
<HTML> 
<HEAD> 
<TITLE>Nested List Unordered List</TITLE> 
</HEAD> 
<BODY> 
 <UL> 
 <LI> Bagian Pertama  
  <UL> 
  <LI> Sub bagian pertama 
   <UL> 
   <LI> Sub sub bagian pertama 
   <LI> Sub sub bagian pertama 
   <LI> Sub sub bagian pertama 
   </UL> 
  <LI> Sub bagian kedua 
  <LI> Sub bagian ketiga 
  </UL> 
 <LI> Bagian Kedua 
  <UL> 
  <LI> Sub bagian kedua 1 
  <LI> Sub bagian kedua 2 
  </UL> 
 <LI> Bagian Ketiga 
 </UL> 
</BODY> 
</HTML> 
 
Simpanlah file di atas dengan nama nested_list.html 
. 
 
Gambar 3.6 Nested List Tidak berurutan 
 
 
Bagian kelima ialah penggunaan nested list dengan ordered list 
Nama File: nested_list_ol.html 
<HTML> 
<HEAD> 
<TITLE>Nested List Ordered List </TITLE> 
</HEAD> 
<BODY> 
 <OL> 
 <LI> Bagian Pertama  
  <OL> 
  <LI> Sub Bagian Pertama  
   <OL> 
   <LI> Sub Sub Bagian Pertama 1 
   <LI> Sub Sub Bagian Pertama 2 
   <LI> Sub Sub Bagian Pertama 3 
   </OL> 
  <LI> Sub Bagian Kedua 
  <LI> Sub Bagian Ketiga 
  </OL> 
 <LI> Bagian Kedua 
  <OL> 
  <LI> Subpoint 1 
  <LI> Subpoint 2 
  </OL> 
 <LI> Bagian Ketiga 
 </OL> 
</BODY> 
</HTML> 
Simpanlah file di atas dengan nama nested_list_ol.html 
 
Gambar 3.7. Nested List Berurutan 
 
 
 
 
Bagian keenam adalah nested list dengan menggunakan gabungan antara unordered list dan ordered 
list 
Nama File:gabungan_list.html 
<HTML> 
<HEAD> 
<TITLE>Gabungan Nested List </TITLE> 
</HEAD> 
<BODY> 
<UL TYPE=disk> 
<LI>Daftar Merk Handphone 
<OL TYPE=1> 
<LI>Nokia 
<LI>Samsung 
</OL> 
<LI>Daftar Stasiun TV 
<OL TYPE=A> 
<LI>TVRI 
<LI>RCTI 
<LI>TRANS 
</OL> 
<LI>Daftar Merk Sepeda Motor 
<OL TYPE=a> 
<LI>Honda 
<LI>Yamaha 
</OL> 
</UL> 
</BODY> 
</HTML> 
 
 
. 
 
Gambar 3.8. List Gabungan 
  
 
 
TUGAS 3 
Dengan menggunakan perintah LIST yang telah dibahas sebelumnya, buatlah  halaman html seperti 
berikut: 
 
 
Gambar TUGAS 3 
Untuk Prodi selain Teknik Informatika, Tuliskan Daftar/List Seperti Diatas Pada Prodi Masing-
masing, menambahkan Nama Dosen dan matakuliah yang diampunya. 
 
Program HTML dan Hasil Run Screenshot, dicopy ke dalam Word, dan kemudian di 
Konversi menjadi file PDF, selanjutnya kirim ke https://kuliahonline.unikom.ac.id 
Paling Lambat hari Minggu Jam 18.00 Wib 
 
Buku: 
*Aplikasi Internet Menggunakan HTML, CSS & Java Script, Taryana Suryana, 
Koesheryatin, Elexmedia Komputindo 
 
 


Materi 3. Membuat Daftar Atau List

Komputer Aplikasi Akuntansi VI - E-Commerce
Materi ini berisi mengenai berbagai jenis input yang ada dalam html dan prosesnya dengan menggunakan PHP Mysq

 
 
Form Input dan Output 
Oleh:Taryana Suryana M.Kom 
Jurusan Akuntansi Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
BAB 4.Input dan Output dalam PHP 
Dengan memanfaatkan form yang terdapat dalam HTML, kita dapat membuat program komputer 
untuk menangani masukan yang bervariasi, pada dasarnya ada 5 Objek html yang biasa digunakan 
untuk memasukan data, yaitu: text, radio, checkbox, select, dan textarea 
 
4.1. Menangani objek tipe Text 
Objek bertipe text atau textbox merupakan objek html yang dapat digunakan untuk memasukan 
data dalam satu baris. 
Berikut adalah contoh untuk memasukan input yang bertipe text 
Sintak dasar: 
<input type=text name=namaobjek size=length> 
 
Namafile: input1.html 
<html> 
<form action="proses1.php" method=post> 
<center> 
<h1>Program Penjualan 
 <hr> 
 <table> 
 <tr><td>Nama Barang<td>:<input name=namabarang size=20> 
 <tr><td>Harga<td>:<input name=harga size=10> 
 <tr><td>Jumlah<td>:<input name=jumlah size=2> 
 </table> 
 <hr> 
 <input type=submit value=Proses> 
 <input type=reset value=Reset> 
 
 
 
Gambar 4.1 Input Program Data Barang 
 
Sedangkan untuk menangani form input tadi, dapat dilakukan dengan menggunakan perintah POST 
untuk membaca isi variabel yang dikirim. 
NamaFile: Proses1.php 
<?php 
 echo "<center>"; 
 echo "<h1>"; 
 echo "Program Penjualan "; 
 echo "<hr>"; 
 echo "<table>"; 
 $namabarang=$_POST['namabarang']; 
 $harga=$_POST['harga']; 
 $jumlah=$_POST['jumlah']; 
 
 $total=$harga*$jumlah; 
 
 echo "<tr><td>Nama Barang<td>:$namabarang"; 
 echo "<tr><td>Harga<td>:$harga"; 
 echo "<tr><td>Jumlah<td>:$jumlah"; 
 echo "<tr><td colspan=3><hr>"; 
 echo "<tr><td>Total Harga<td>:$total"; 
?> 
  
Selanjutnya ketika program dijalankan dan di Click tombol Proses, maka hasilnya akan ditampilkan 
seperti  pada gambar 4.2. 
 
 
  
Gambar 4.2. Menampilkan Hasil Proses 
  
 
 
 
 
4.2.Menangani Objek Tipe Radio 
Objek type radio berfungsi untuk membuat tombol radio atau tombol pilihan yang diisi dengan cara 
memilih dari salah satu tombol radio yang ada. Radio biasa digunakan untuk pilihan yang membatasi 
user untuk memilih satu dari pilihan yang ada. 
Dalam penggunaan radio HTML, kita hanya memerlukan tag input dengan sebuah atribut type 
radio. Berikut format dasar radio dalam HTML: 
Sintak: 
<input type="radio" name=namaobjek value=isivalue>Label 
 
 
 
NamaFile:radio.html 
<form action="proses_radio.php" method=post> 
<?php 
<center> 
<font size=5> 
Menggunakan Objek Radio 
<hr> 
<table> 
<tr><td>Tujuan 
<td><input type=radio name=tujuan value=Bandung>Bandung 
<tr><td><td><input type=radio name=tujuan value=Jakarta>Jakarta 
<tr><td><td><input type=radio name=tujuan value=Bogor>Bogor 
</table> 
<hr> 
<input type=submit value=Proses> 
<input type=reset value=Reset> 
 
 
Gambar 4.3. Objek Tipe Radio 
 
  
 
Untuk menangani input objek Radio, dapat dilakukan dengan membaca value dari objek tersebut. 
 
 
NamaFile:Proses_radio.php 
<?php 
echo "<center>"; 
echo "<font size=8>"; 
echo "Membaca Objek Radio"; 
echo "<hr>"; 
$tujuan=$_POST['tujuan']; 
echo "<tr><td>Tujuan<td>:$tujuan"; 
?> 
 
 
   
 
Gambar 4.4.Menampilkan data tipe Radio 
 
 
4.3. Menangani Objek Tipe Checkbox 
Objek type Checkbox berfungsi untuk membuat pilihan dengan cara men-checklist pilihan tersebut, 
pilihan bisa lebih dari satu pilihan. 
 
Checkbox.html 
<form action="proses_checkbox.php" method=post> 
<center> 
<font size=6> 
Menggunakan Checkbox 
<hr> 
<table> 
<tr><td><input type=checkbox name=nasigoreng>Nasi Goreng 
<td><input type=checkbox name=esjeruk>Es Jeruk 
<tr><td><input type=checkbox name=soto>Soto 
<td><input type=checkbox name=tehmanis>Teh Manis 
<tr><td><input type=checkbox name=nasirames>Nasi Rames 
<td><input type=checkbox name=eskelapa>Es Kelapa 
</table> 
<hr> 
<input type=submit value=Proses> 
<input type=reset value=Reset> 
 
 
 
 
Gambar 4.5.Objek Tipe Checkbox 
Untuk membaca data dengan tipe checkbox dapat dilakukan dengan membaca value dari objek 
tersebut, jika isi value adalah on artinya dipilih. 
Proses_checkbox.php 
<?php 
error_reporting(0); 
echo "<center>"; 
echo "<font size=6>"; 
echo "WARTEG BAHARI"; 
echo "<hr>"; 
echo "<table>"; 
$nasigoreng=$_POST['nasigoreng']; 
if($nasigoreng) 
{ 
$hnasgor=15000; 
echo "<tr><td>Nasi Goreng <td>$hnasgor"; 
} 
$esjeruk=$_POST['esjeruk']; 
if($esjeruk) 
{ 
$hesjeruk=5000; 
echo "<tr><td>Es Jeruk<td>$hesjeruk"; 
} 
?> 
 
 
 
Gambar 4.6.Menangani Objek Tipe Checkbox 
 
  
 
4.4.Menangani Objek Select 
Objek bertipe select digunakan untuk memasukan data dengan cara memilih salah satu pilihan dari 
beberapa pilihan yang disediakan 
 
Sintak Dasar: 
<select name=namaobjek> 
<option>Pilihan1 
<option>Pilihan2 
</select> 
 
select.html 
<html> 
<form action="proses_select.php" method=post> 
<center> 
<font size=8> 
Program Gaji Pegawai 
<hr> 
<table> 
<tr><td>Nama Pegawai <td><input name=namapegawai size=20> 
<tr><td>Jabatan<td><select name=jabatan> 
<option>MANAGER 
<option>MARKETING 
<option>PRODUKSI 
<option>HRD 
<option>OB 
<tr><td>Tahun Masuk <td><input name=tahunmasuk size=4>    
</table> 
<hr> 
<input type=submit value=Proses> 
<input type=reset value=Reset> 
 
 
 
Gambar 4.7.Input Objek Select 
 
Untuk membaca objek bertipe select, dapat dilakukan dengan cara yang sama dengan membaca objek 
tipe text atau textbox 
 
 
 
 
Proses_select.php 
<?php 
 echo "<center>"; 
 echo "<font size=10>"; 
 echo "<font color=blue>"; 
 echo "Program Gaji Pegawai "; 
 echo "<hr>"; 
 echo "<table>"; 
 $namapegawai=$_POST['namapegawai']; 
 $jabatan=$_POST['jabatan']; 
 $tahunmasuk=$_POST['tahunmasuk']; 
 $lamakerja=2019 - $tahunmasuk; 
 if($jabatan=="MANAGER") $gajipokok=10000000; 
 if($jabatan=="MARKETING") $gajipokok=8000000; 
  
 $tunjangan=0.05*$gajipokok*$lamakerja; 
 $gajitotal=$gajipokok+$tunjangan; 
 echo "<tr><td>Nama Pegawai<td>:$namapegawai"; 
 echo "<tr><td>Jabatan<td>:$jabatan"; 
 echo "<tr><td>Tahun Masuk<td>:$tahunmasuk"; 
 echo "<tr><td>Lama Kerja<td>:$lamakerja"; 
 echo "<tr><td>Gaji Pokok<td>:$gajipokok"; 
 echo "<tr><td>Tunjangan<td>:$tunjangan"; 
 echo "<tr><td>Gaji Total<td>:$gajitotal"; 
?> 
  
 
Gambar 4.8.Proses Objek Tipe Select 
 
 
  
 
 
 
4.5.Memasukan atau Menambah Data 
Kedalam Database 
Dengan Menggunakan Objek yang telah dibahas sebelumnya, pada bagian ini kita akan 
mencoba membuat program Komputer untuk memasukan atau menambah data kedalam 
tabel barang yang pernah dibuat sebelumnya. 
Pertama Buat File berikut: 
NamaFile:inputbarang.html 
<html> 
<form action="savebarang.php" method=post> 
<center> 
<font size=6> 
Form Input Barang 
<hr width=320> 
<table> 
<tr><td>Kode Barang<td><input name=kodebrg size=5> 
<tr><td>Nama Barang<td><input name=namabarang size=10> 
<tr><td>Harga<td><input name=harga size=20> 
<tr><td>Stok<td><input name=stok size=5> 
</table> 
<hr width=320> 
<input type=submit value=Save> 
<input type=reset value=Reset> 
 
 
NamaFile:savebarang.php 
<html> 
<center> 
<font size=6> 
Informasi Data Barang 
</font> 
<hr width=320> 
<table> 
<?php 
require ("koneksi.php"); 
$kodebrg=$_POST['kodebrg']; 
$namabarang=$_POST['namabarang']; 
 
$harga=$_POST['harga']; 
$stok=$_POST['stok']; 
echo "<tr><td>Kode Barang<td>$kodebrg"; 
echo "<tr><td>Nama Barang<td>$namabarang"; 
echo "<tr><td>Harga<td>$harga"; 
echo "<tr><td>Stok<td>$stok"; 
echo "</table>"; 
echo "<hr width=320>"; 
 
if($kodebrg!='') 
{ 
$sql="insert into barang values ('$kodebrg','$namabarang','$harga','$stok')"; 
$hasil=mysqli_query($conn,$sql); 
echo "Data telah ditambahkan"; 
} 
else 
{ 
echo "Kode Barang Tidak Boleh Kosong"; 
} 
?> 
 
Setelah kedua File dibuat, kemudian, buka browser anda dan jalankan file:inputbarang.php 
dengan cara ketikan: 
http://localhost/hi 
 
 
Masukan Data Contoh Seperti diatas, kemudian click tombol Save, jika Program Benar dan 
datanya benar, maka akan ditampilkan layar seperti berikut, dan data yang dimasukan akan 
masuk ke tabel barang. 
 
 
 
Untuk Melihat data masuk atau tidak kedalam tabel barang. Jalankan file:tampilbarang.php, 
dengan cara dari browser ketik:localhost/hi/tampilbarang.php 
 
 
Data dengan KodeBarang B011, masuk kedalam tabel barang. 
Sampai sini berarti program anda sudah benar. 
 
  
 
 
Tugas 4:  
Dengan Menggunakan phpmyadmin, buat tabel: member, dengan jumlah field 
sebanyak 7 field: 
 
Name:member  number of columns:7 
 
.  
 
Kemudian Save: 
 
 
Struktur file: member yg sudah dibuat 
 
 
 
 
 
Hampir sama dengan inputbarang.html dan savebarang.php 
Buat Program untuk memasukan data member seperti berikut: 
 
 
NamaFile:inputmember.html 
 
 
 
NamaFile:savemember.php 
 
 
 
 
Jika Programnya benar, maka data member yang dimasukan akan terekam 
kedalam tabel:member 
Bisa dilihat dengan menggunakan phpmyadmin 
 
 
 
Jika Tugas4 sudah dikerjakan dan berhasil menyimpan data seperti contoh, 
silahkan kirimkan Copy Paste kodeprogram: inputmeber.html dan 
savemember.php  dan screenshot tampilan, kedalam File Microsoft Word atau 
dalam format PDF , paling Lambat hari Minggu Sore 
 
Kirimkan ke https://kuliahonline.unikom.ac.id pada bagian tugas 
 
 
 
 
 
 
ooOOoo 
  
 
 
PUSTAKA AK 
 
1. Suryana, Taryana (2023) Bab 3 Penggunaan Operator Pada Pemrograman Php Dan 
Database. [Teaching Resource] 
2. Suryana, Taryana (2023) Bab 2 Variabel Dalam Php Dan Datase. [Teaching Resource] 
3. Suryana, Taryana (2023) Materi 1. Instalasi Xampp Dan Pengenalan Php. [Teaching Resource] 
4. Suryana, Taryana (2023) Materi 13 Edit Data Member. [Teaching Resource] 
5. Suryana, Taryana (2023) Materi 12 Pencarian Data Member Dengan Menggunakan 
Sql. [Teaching Resource] 
6. Suryana, Taryana (2023) Materi 11 Mengelola Data Member. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 10 Integrasi Aplikasi E-commerce. [Teaching Resource] 
8. Suryana, Taryana (2022) Materi 9 Hapus Data Penjualan. [Teaching Resource] 
9. Suryana, Taryana (2022) Materi 8 Membuat Program Untuk Menangani Penjualan 
Barang. [Teaching Resource] 
10. Suryana, Taryana (2022) Materi 7 Hapus Data Barang. [Teaching Resource] 
11. Suryana, Taryana (2022) 6.edit Data Barang Pada Database Barang. [Teaching Resource] 
12. Suryana, Taryana (2022) 6.edit Data Ktp. [Teaching Resource] 
13.  
14. Suryana, Taryana (2022) Materi 5 Pencarian Data Barang Dan Data Pegawai. [Teaching 
Resource]  
15. Suryana, Taryana (2022) Membuat Form Memasukan Data Pegawai. [Teaching Resource] 
16. Suryana, Taryana (2022) Materi 3 Input Dan Output Pada Database Barang. [Teaching Resource] 
17. Suryana, Taryana (2022) Membuat Database. [Teaching Resource] 
18. Suryana, Taryana (2022) Instalasi Xampp Untuk Pemrograman E-commerce 2022. [Teaching 
Resource] 
19. Suryana, Taryana (2022) Pengenalan E-commerce. [Teaching Resource] 
20. Suryana, Taryana (2022) Membuat Program Untuk Edit Data Akta Perkawinan. [Teaching 
Resource] 
21. Suryana, Taryana (2022) Membuat Program Untuk Perubahan Atau Edit Data. [Teaching 
Resource] 
22. Suryana, Taryana (2022) Menampilkan Relasi Penjualan Barang. [Teaching Resource] 
23. Suryana, Taryana (2021) Membuat Program Untuk Menangani Penjualan Barang. [Teaching 
Resource] 
24. Suryana, Taryana (2021) Membuat Toko Online. [Teaching Resource] 
25. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
26. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
27. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
28. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
29. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
30. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
31. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
32. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
33. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
34. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
35. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
36. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
37. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
38. https://www.w3schools.com/  September, 2021 
39. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
 
40. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
41. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
42. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 


Materi 4. Form Input Dan Output Untuk Menambah Data Barang

Pemrograman Web-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

Komputer Aplikasi E-Commerce
Materi 13 membahas mengenai program perbaikan data pada data member yang sudah ada dalam databas

 
Perbaikan Data Member  
Oleh: 
Taryana Suryana M.Kom 
Jurusan Hubungan Internasional Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
13. Program Edit Data Member 
Pada bagian ini akan dibahas mengenai pembuatan program untuk melakukan edit data atau 
perbaikan data member yang ada dalam database atau tabel.  
Adapun cara kerja dari Edit data adalah sebagai berikut: 
1. Tampilkan Form Edit Data Member 
2. Masukan id_member atau nama Member 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_member.html 
2. proses_edit_member.php 
3. save_edit_member.php 
 
 
13.1.Membuat File Edit Data Member 
File Edit_Member.html berfungsi untuk menampilkan Form Pencarian Edit Data Member, 
berdasarkan keyword field id_member dan Nama Member: 
 
NamaFile:edit_member.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 EDIT DATA MEMBER</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
 
 
<form action="proses_edit_member.php" method=post> 
<hr> 
<table> 
  <tr><td><select name=pilihan> 
  <option value=id_member>ID MEMBER 
  <option value=nama>NAMA 
  </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. Menampilkan Data Yang Akan di Edit 
File proses_edit_member.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_member.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 EDIT DATA MEMBER</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-light-blue"> 
<p> 
<form action="save_edit_member.php" method=post> 
<hr> 
<table border=0> 
<?php 
require ("koneksi.php"); 
$pilihan=$_POST['pilihan']; 
$data_cari=$_POST['data_cari']; 
$sql="select * from member where $pilihan='$data_cari' "; 
 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
if($row) 
{ 
do 
{ 
list($id_member,$nama,$alamat,$kota,$kodepos,$email,$hp)=$row; 
echo "<tr><td width=100>ID MEMBER<td width=380>:  
<input name=id_member value='$id_member' readonly size=10> 
<td rowspan=7><img src='$id_member.jpg' width=200 height=200>"; 
echo "<tr><td>NAMA<td>: <input name=nama value='$nama' size=20>"; 
echo "<tr><td>ALAMAT<td>: <input name=alamat value='$alamat' size=30>"; 
echo "<tr><td>KOTA<td>: <input name=kota value='$kota' size=20>"; 
echo "<tr><td>KODE POS<td>: <input name=kodepos value='$kodepos' size=5>"; 
echo "<tr><td>E-MAIL<td>: <input name=email value='$email' size=20>"; 
echo "<tr><td>HP POS<td>: <input name=hp value='$hp' size=15>"; 
 
echo "</table>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
} 
else 
{ 
 ?> 
 <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> 
<?php 
} 
?> 
</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 member where id_member='$data_cari' "; 
 
 
Artinya tampilkan semua field dari tabel MEMBER yang ID_MEMBER sama dengan 
yang diinputkan 
 
 
13.3. Membuat Program Untuk Menyimpan Edit Data Member 
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 member set nama=’$nama’ where id_member=’$id_member’; 
 
NamaFile:save_edit_member.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 EDIT DATA MEMBER</h1></p> 
</div> 
<div class="w3-panel w3-border w3-card-4 w3-aqua"> 
<p> 
<table border=0> 
<?php 
$id_member=$_POST['id_member']; 
$nama=$_POST['nama']; 
$alamat=$_POST['alamat']; 
$kota=$_POST['kota']; 
$kodepos=$_POST['kodepos']; 
$email=$_POST['email']; 
 
$hp=$_POST['hp']; 
 
echo "<tr><td width=150>ID MEMBER<td>$id_member"; 
echo "<tr><td>NAMA<td>$nama"; 
echo "<tr><td>ALAMAT<td>$alamat"; 
echo "<tr><td>KOTA<td>$kota"; 
echo "<tr><td>KODE POS<td>$kodepos"; 
echo "<tr><td>E-MAIL<td>$email"; 
echo "<tr><td>HP POS<td>$hp"; 
 
require ("koneksi.php"); 
 
$sql="update member set nama='$nama', 
alamat='$alamat', 
kota='$kota', 
kodepos='$kodepos', 
email='$email', 
hp='$hp' where id_member='$id_member'"; 
$hasil=mysqli_query($conn,$sql); 
?> 
</table> 
<hr> 
<p> 
<div class="w3-panel w3-green w3-round-xxlarge"> 
  <h1 class="w3-text-white" style="text-shadow:1px 1px 0 #444"> 
  <b>Data Telah di Simpan..!</b></h1> 
</div> 
 
 
 
 
 
  
 
 
13.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/hi 
3. Click File  edit_member.html 
Akan ditampilkan form pencarian seperti berikut: 
 
 
Gambar 13.1. Form Edit Data Member 
 
4. Masukan ID_MEMBER yang akan dicari, misalnya  
M1008 
5. Click Tombol Cari, selanjutnya akan ditampilkan hasil seperti berikut Jika data 
yang dicari ada: 
 
 
 
Gambar 13.2. Hasil Pencarian Edit Data Member 
 
Anda dapat melakukan perbaikan pada form diatas sesuai dengan data yang ingin 
dirubah atau diperbaiki, kemudikan Click tombol Save_Edit, untuk menyimpan 
perubahan tersebut, dan selanjutnya akan ditampilkan layar seperti berikut: 
 
 
 
Gambar 13.4. Menyimpan Data yang Sudah di Edit 
 
 
 
 
 
 
Jika data yang akan di Edit, tidak ada dalam database, maka akan ditampilkan 
jendela seperti berikut: 
 
 
. 
Gambar 13.5. ID_MEMBER yang dicari tidak ada 
 
 
PUSTAKA HI 
1. Suryana, Taryana (2023) Materi 12. Aplikasi Pencatatan Data Perkawinan. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 12 Pencarian Data Member Dengan Menggunakan 
Sql. [Teaching Resource] 
3. Suryana, Taryana (2023) Materi 11 Mengelola Data Member. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 10 Integrasi Aplikasi E-commerce. [Teaching Resource] 
5. Suryana, Taryana (2022) Materi 9 Hapus Data Penjualan. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 8 Membuat Program Untuk Menangani Penjualan 
Barang. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 7 Hapus Data Barang. [Teaching Resource] 
8. Suryana, Taryana (2022) 6.edit Data Barang Pada Database Barang. [Teaching Resource] 
9. Suryana, Taryana (2022) 6.edit Data Ktp. [Teaching Resource] 
10.  
11. Suryana, Taryana (2022) Materi 5 Pencarian Data Barang Dan Data Pegawai. [Teaching 
Resource]  
12. Suryana, Taryana (2022) Membuat Form Memasukan Data Pegawai. [Teaching Resource] 
13. Suryana, Taryana (2022) Materi 3 Input Dan Output Pada Database Barang. [Teaching Resource] 
14. Suryana, Taryana (2022) Membuat Database. [Teaching Resource] 
15. Suryana, Taryana (2022) Instalasi Xampp Untuk Pemrograman E-commerce 2022. [Teaching 
Resource] 
16. Suryana, Taryana (2022) Pengenalan E-commerce. [Teaching Resource] 
17. Suryana, Taryana (2022) Membuat Program Untuk Edit Data Akta Perkawinan. [Teaching 
Resource] 
18. Suryana, Taryana (2022) Membuat Program Untuk Perubahan Atau Edit Data. [Teaching 
Resource] 
19. Suryana, Taryana (2022) Menampilkan Relasi Penjualan Barang. [Teaching Resource] 
20. Suryana, Taryana (2021) Membuat Program Untuk Menangani Penjualan Barang. [Teaching 
Resource] 
21. Suryana, Taryana (2021) Membuat Toko Online. [Teaching Resource] 
22. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
23. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
24. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
25. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
26. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
28. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
29. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
30. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
31. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
32. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
33. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
34. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
35. https://www.w3schools.com/  September, 2021 
36. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
37. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
38. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
39. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
  


Materi 13 Edit Data Member

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

Pemrograman Web-1
Materi ini membahas pembuatan menu navigasi  dengan menggunakan class w3-bar, dan class w3-dropdown-hove

Not a member yet

Materi 11 Input Dan Label

Materi 11 Mengelola Data Member

Materi 1 Pengenalan Java Script

Materi 3. Materi 3 Fungsi Kondisi - Fungsi Logika

Materi 3. Membuat Daftar Atau List

Materi 4. Form Input Dan Output Untuk Menambah Data Barang

Materi 12 W3 Css Animation Effect

Materi 13 Edit Data Member

Materi 13 Membuat Menu Navigasi Dengan W3 Css

Materi 13 Membuat Menu Navigasi Dengan W3 Css

15,029

70,114