Repository Universitas Komputer Indonesia

Pemrograman Web-1
Materi ini membahas mengenai penggunaan Framework W3 CSS dari W3Schoo

Suryana, Taryana

 
 
W3.CSS FRAMEWORK  
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
9.W3.CCS Merupakan Sebuah Framework  
1. W3.CSS adalah framework CSS modern dengan dukungan untuk desktop, tablet, dan 
desain seluler secara default. 
2. W3.CSS lebih kecil dan lebih cepat dari kerangka kerja CSS serupa. 
3. W3.CSS dirancang untuk menjadi alternatif berkualitas tinggi untuk Bootstrap. 
4. Ini dirancang untuk menjadi lebih kecil, lebih cepat, lebih mudah dipelajari, dan lebih 
mudah digunakan. 
5. Itu juga dirancang untuk tidak bergantung pada jQuery atau pustaka JavaScript 
lainnya. 
 
Untuk dapat Menggunakan W3.CSS Framework disitus Web Anda, Ada 2 cara 
1. Cukup tambahkan link ke "w3.css" dari halaman web Anda: 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
2. Atau unduh w3.css dari w3css_downloads dan tambahkan tautan ke w3.css 
<link rel="stylesheet" href="w3.css"> 
 
 
 
 
9.1.W3 Container 
Kelas Kontainer merupakan salah satu kelas yang ada dalam w3.css,  
1. Kelas w3-container menambahkan padding kiri dan kanan 16px ke elemen HTML 
apa pun. 
2. Kelas w3-container adalah kelas yang sempurna untuk digunakan untuk semua 
elemen penampung HTML seperti: <div>, <article>, <section>, <header>, 
<footer>, <form>, dan lainnya. 
3. Kontainer Memberikan Kesetaraan 
W3-container memberikan kesesuaian untuk semua elemen penampung HTML: 
 margins 
 paddings 
 alignments 
 fonts 
 colors 
Untuk menggunakan container, cukup tambahkan kelas w3-container ke elemen apa saja: 
Berikut adalah contoh halaman html yang menggunakan framework W3.CSS 
 
Namafile:css19.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-red"> 
  <h1>Kampus Pasca Sarjana</h1> 
</div> 
 
<div class="w3-container w3-tomato"> 
<img src="unikom_dago.jpg" alt="Kampus Dago" style="width:90% height:50%"> 
</div> 
 
<div class="w3-container"> 
  <h2>Universitas Komputer Indonesia</h2> 
</div> 
 
<div class="w3-container w3-blue"> 
  <p>Jl.Ir.H.Djuanda Dago Bandung</p> 
</div> 
 
</body> 
</html> 
 
 
 
 
 
 
Hasil akhit contoh Penggunaan Container, Untuk Menampilkan hasil seperti berikut: 
 
 
 
Gambar 9.1. Penggunaan Container 
 
 
Berikut adalah contoh penggunaa kelas Container, untuk membuat tampilkan dilayar: 
<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"> 
  <h1>Warna Background</h1> 
  <p>Kelas w3-color mendefinisikan warna latar belakang untuk elemen 
HTML</p> 
</div> 
 
<div class="w3-container w3-red"> 
  <h2>Bandung</h2> 
 
  <p>Kota Bandung merupakan kota metropolitan terbesar di Provinsi Jawa 
Barat,  
  sekaligus menjadi ibu kota provinsi Jawa Barat. Terletak 140 km sebelah 
tenggara Jakarta,  
  dan merupakan kota terbesar ketiga di Indonesia setelah Jakarta dan 
Surabaya.</p> 
</div> 
 
<div class="w3-container w3-teal"> 
  <h2>Bandung</h2> 
  <p>Kota Bandung merupakan kota metropolitan terbesar di Provinsi Jawa 
Barat,  
  sekaligus menjadi ibu kota provinsi Jawa Barat. Terletak 140 km sebelah 
tenggara Jakarta,  
  dan merupakan kota terbesar ketiga di Indonesia setelah Jakarta dan 
Surabaya.</p> 
</div> 
 
<div class="w3-container w3-yellow"> 
  <h2>Bandung</h2> 
  <p>Kota Bandung merupakan kota metropolitan terbesar di Provinsi Jawa 
Barat,  
  sekaligus menjadi ibu kota provinsi Jawa Barat. Terletak 140 km sebelah 
tenggara Jakarta,  
  dan merupakan kota terbesar ketiga di Indonesia setelah Jakarta dan 
Surabaya.</p> 
</div> 
 
<div class="w3-container w3-gray"> 
  <h2>Bandung</h2> 
  <p>Kota Bandung merupakan kota metropolitan terbesar di Provinsi Jawa 
Barat,  
  sekaligus menjadi ibu kota provinsi Jawa Barat. Terletak 140 km sebelah 
tenggara Jakarta,  
  dan merupakan kota terbesar ketiga di Indonesia setelah Jakarta dan 
Surabaya.</p> 
</div> 
 
 
</body> 
</html>  
 
 
 
 
 
 
Gambar 9.2. Menampilkan Warna Latar Belakang Pada Layar 
 
9.2.Kelas Panel 
Kelas panel w3 menambahkan margin atas dan bawah 16px dan bantalan kiri dan kanan 16px 
ke elemen HTML apa pun. 
 
<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>Panels Catatan</h2> 
  <p>Class w3-panel dapat digunakan untuk menampilkan Catatan</p> 
 
  <div class="w3-panel w3-pale-green"> 
    <p>Kota Bandung merupakan kota metropolitan terbesar di Provinsi Jawa Barat,  
  sekaligus menjadi ibu kota provinsi Jawa Barat. Terletak 140 km sebelah tenggara Jakarta,  
  dan merupakan kota terbesar ketiga di Indonesia setelah Jakarta dan Surabaya.</p> 
  </div> 
 
 
  <h2>Panels Untuk Kutipan</h2> 
  <p>Class w3-panel dapat digunakan untuk menampilkan Kutipan</p> 
 
  <div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif"> 
    <p><i>"Make it as simple as possible, but not simpler."</i></p> 
  </div> 
 
 
</div> 
 
</body> 
</html> 
 
 
 
Gambar 9.3. Penggunaan Kelas Panel 
 
Panel Kartu dan Panel Bulat 
Kelas Panel kartu dan Panel Bulat dapat digunakan untuk membuat Panel atau kotak untuk 
menampilkan tulisan. 
 
NamaFile:css22.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>Panels Kartu</h2> 
  <p>Class w3-panel dapat digunakan untuk menampilkan Panel Bentuk Kartu atau Panel Bentuk Bulat:</p> 
  <div class="w3-panel w3-blue w3-card-4"> 
    <p>Unikom Universitas Komputer Pertama di Indonesia</p> 
  </div> 
  <h2>Panels Bulat</h2> 
  <div class="w3-panel w3-red w3-round-xlarge"> 
 
    <p>Unikom Universitas Komputer Pertama di Indonesia.</p> 
  </div> 
</div> 
</body> 
</html> 
 
 
 
Gambar 9.4. Panel Kartu dan Panel bulat 
 
  
 
 
TUGAS 9.1 
Dengan Menggunakan Container, buat Profile Tampilan Pribadi Anda Masing-masing, 
seperti berikut: 
 
 
 
 
 
 
Tugas 9.2 
Buat Tampilan Seperti berikut, Gunakan Panel dan Panel Bulat, 
Foto boleh diganti 
 
 
 
 
Kumpulkan Program dan Screenshot tampilan dalam format PDF, Paling Lambat Hari 
Minggu 
 
  
 
 
Warna Pada W3 FrameWork 
 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching Resource] 
2. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
3. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam Html. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan Html5. [Teaching Resource] 
5. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam Html. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 2 Memformat Dokumen Html. [Teaching Resource] 
8. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching Resource] 
9. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
10. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
11. https://www.w3schools.com/html, September, 2021 
12. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
13. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
14. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
15. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
16. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
17. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
18. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
 
19. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
20. https://www.w3schools.com/html, September, 2021 
21. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
22. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
23. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
24. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
25. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
26. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
28. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
30. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
31. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
32. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
33. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
34. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
35. https://www.w3schools.com/html 
 
 
 


Materi 9 Penggunaan Framework W3 Css

Pemrograman Web-1
Download file w3.css kemudian simpan dalam folder yg sama dengan tempat menyimpan kode html and

W3 Css Framework

Komputer Aplikasi E-Commerce
Materi ini membahas mengenai penghapusan data penjualan dari tabe

 
 
 
Menghapus Data Penjualan 
 
 
Oleh:Taryana Suryana M.Kom 
Jurusan Hubungan Internasional 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480599 
 
9. Delete  Data Penjualan 
Pada bagian ini akan dibahas mengenai pembuatan program untuk menghapus data 
penjualan yang sudah ada dalam database atau tabel. 
 
Adapun file yang akan digunakan dan dibuat yaitu: 
1. Tampil_penjualan.php 
2. Delete_penjualan.php 
3. Proses_delete_penjualan.php 
 
 
9.1. Menambahkan Link Delete 
File tampil_penjualan.php berfungsi untuk menampilkan seluruh isi data yang 
ada pada tabel penjualan. Pada halaman ini akan ditampilkan link ke file 
delete_penjualan.php dengan parameter adalah ID penjualannya. 
 
 
NamaFile:tampil_penjualan.php 
<html> 
<center> 
<h1>MENAMPILKAN DATA PENJUALAN</h1> 
<hr> 
<table border=1> 
<tr><th>NO<th>KODE<th>NAMABARANG<th>HARGA<th>JUMLAH<th>PEMBELI<th>ALAMAT
<th>TELP 
<?php 
require ("koneksi.php"); 
$sql="select * from penjualan"; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
$n=1; 
 
do 
{ 
list($id,$kode,$namabarang,$harga,$jumlah,$pembeli,$alamat,$telp)=$row; 
echo 
"<tr><td>$n<td>$kode<td>$namabarang<td>$harga<td>$jumlah<td>$pembeli<td>
$alamat<td>$telp"; 
echo "<td><a href='delete_penjualan.php?id=$id'>Delete</a>"; 
$n++; 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table>  
 
 
 
9.2.Membuat Program Delete Penjualan 
File DELETE_PENJUALAN.PHP berfungsi untuk menampilkan data penjualan yang 
akan di hapus, dengan parameter atau variabelnya dikirim dari program 
tampil_penjualan.php 
 
NamaFile:DELETE_PENJUALAN.PHP 
<html> 
<form action="proses_delete_penjualan.php" method=post> 
<center> 
<h1>MENAMPILKAN DATA PENJUALAN YANG AKAN DIHAPUS</h1> 
<hr> 
<table border=0> 
<?php 
require ("koneksi.php"); 
$id=$_GET['id']; 
$sql="select * from penjualan where id='$id' "; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
if($row) 
{ 
do 
{ 
list($id,$kode,$namabarang,$harga,$jumlah,$pembeli,$alamat,$telp)=$row; 
echo "<tr><td colspan=2><img src='$kode.jpg' width=300 height=300>";  
echo "<tr><td>KODE<td>:$kode"; 
echo "<tr><td>NAMA BARANG<td>$namabarang"; 
echo "<tr><td>HARGA<td>$harga"; 
echo "<tr><td>JUMLAH<td>$jumlah"; 
echo "<tr><td>PEMBELI<td>$pembeli"; 
echo "<tr><td>ALAMAT<td>$alamat"; 
echo "<tr><td>TELP<td>$telp"; 
echo "<input type=hidden name=id value='$id'>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
}  
else 
{ 
 echo "<h1>Maaf Data tidak ada !!! "; 
} 
?> 
</table> 
<hr> 
<input type=submit value="Yakin data ini akan dihapus"> 
 
 
 
9.3. Proses Penghapusan Data Penjualan 
Berikut adalah kode program yang berfungsi untuk menghapus data penjualan secara 
permanen dari database. 
 
 
 
 
NamaFile:proses_delete_penjualan.php 
<html> 
<center> 
<h1>HAPUS DATA PENJUALAN</h1> 
<hr> 
<table border=1> 
<?php 
$id=$_POST['id']; 
require ("koneksi.php"); 
$sql="delete from penjualan where id='$id' "; 
$hasil=mysqli_query($conn,$sql); 
echo "$sql"; 
?> 
</table> 
<hr> 
Data Telah Dihapus 
 
9.4.Menampilkan Hasil Via Browser 
Setelah  program TAMPIL_PENJUALAN.PHP, DELETE_PENJUALAN.PHP  dan 
“PROSES_DELETE_PENJUALAN.PHP” dibuat dan disimpan dalam folder yang 
sama, kemudian adalah menampilkannya ke layar komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti biasa menampilkan 
program php: 
1.Jalankakan Browser 
2. Pada Address Bar, ketikan:localhost/hi 
3.Click File TAMPIL_PENJUALAN.PHP 
 
 
 
Gambar 9.1. Menampilkan Data Penjualan 
 
4.Click tombol Delete pada Data yang akan dihapus, Misalnya data Penjualan No:3 
MODEM 4G 
selanjutnya akan ditampilkan hasil seperti berikut: 
 
 
 
 
Gambar 9:2. Menampilkan Konfirmasi Penghapusan Data 
 
Jika yakin data ini akan benar dihapus Click tombol “Yakin Data Ini Akan di Hapus” 
 
 
 
Gambar 9:3. Menampilkan Proses Delete Data Penjualan 
 
 
Maka Data Punjualan tersebit akan dihapus dan hilang dari List Daftar Penjualan 
dalam Database. 
 
 
 
Gambar 9:4. Data Barang Telah di Hapus 
 
Sampai tahap ini pembuatan program untuk Delete data Penjualan telah selesai dan 
sesuai dengan yang diharapkan diawal materi. 
 
  
 
 
Tugas 9: 
 
Jika telah selesai semuanya Buat Screenshot dan program filenya kirim ke modul 
tugas pada kuliahonline dengan format word atau pdf 
 
  
 
PUSTAKA HI 
 
1. Suryana, Taryana (2022) Materi 8 Membuat Program Untuk Menangani Penjualan 
Barang. [Teaching Resource] 
2. Suryana, Taryana (2022) Materi 7 Hapus Data Barang. [Teaching Resource] 
3. Suryana, Taryana (2022) 6.edit Data Barang Pada Database Barang. [Teaching Resource] 
4. Suryana, Taryana (2022) 6.edit Data Ktp. [Teaching Resource] 
5.  
6. Suryana, Taryana (2022) Materi 5 Pencarian Data Barang Dan Data Pegawai. [Teaching 
Resource]  
7. Suryana, Taryana (2022) Membuat Form Memasukan Data Pegawai. [Teaching Resource] 
8. Suryana, Taryana (2022) Materi 3 Input Dan Output Pada Database Barang. [Teaching Resource] 
9. Suryana, Taryana (2022) Membuat Database. [Teaching Resource] 
10. Suryana, Taryana (2022) Instalasi Xampp Untuk Pemrograman E-commerce 2022. [Teaching 
Resource] 
11. Suryana, Taryana (2022) Pengenalan E-commerce. [Teaching Resource] 
12. Suryana, Taryana (2022) Membuat Program Untuk Edit Data Akta Perkawinan. [Teaching 
Resource] 
13. Suryana, Taryana (2022) Membuat Program Untuk Perubahan Atau Edit Data. [Teaching 
Resource] 
14. Suryana, Taryana (2022) Menampilkan Relasi Penjualan Barang. [Teaching Resource] 
15. Suryana, Taryana (2021) Membuat Program Untuk Menangani Penjualan Barang. [Teaching 
Resource] 
16. Suryana, Taryana (2021) Membuat Toko Online. [Teaching Resource] 
17. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
18. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
19. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
20. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
21. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
22. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
23. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
24. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
25. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
26. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
27. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
28. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
29. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
30. https://www.w3schools.com/  September, 2021 
31. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
32. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
33. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
34. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 


Materi 9 Hapus Data Penjualan

Komputer Aplikasi E-Commerce
Download File ini, kemudian simpan pada folder yang sama dengan program e-commerce and

Komputer Aplikasi IT-1
Materi ini membahas mengenai Display,layout dan butto

 
 
W3.CSS DISPLAY dan BUTTON  
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
10.W3.CSS Display 
Kelas display memungkinkan Anda untuk menampilkan elemen HTML di posisi tertentu di 
dalam elemen HTML lainnya 
 
KELAS DEFINISI 
w3-display-container Container untuk w3-display-class 
w3-display-topleft  Menampilkan konten di sudut kiri atas w3-display-
container 
w3-display-topright  w3-display-topright Menampilkan konten di sudut 
kanan atas w3-display-container 
w3-display-bottomleft Menampilkan konten di sudut kiri bawah w3-
display-container 
w3-display-bottomright Menampilkan konten di sudut kanan bawah w3-
display-container 
w3-display-left Menampilkan konten ke kiri (kiri tengah) dari w3-
display-container 
w3-display-right Menampilkan konten di sebelah kanan (kanan 
tengah) dari w3-display-container 
w3-display-middle Menampilkan konten di tengah (tengah) w3-
display-container 
w3-display-topmiddle Menampilkan konten di tengah atas w3-display-
container 
 
w3-display-bottommiddle Menampilkan konten di tengah bawah w3-display-
container 
w3-display-position Menampilkan konten pada posisi tertentu di w3-
display-container 
w3-display-hover Menampilkan konten di hover di dalam w3-
display-container 
w3-left Menampilkan elemen ke kiri (float: kiri) 
w3-right Menampilkan elemen ke kanan (float: kanan) 
w3-show Menunjukkan elemen (display: block) 
w3-hide Menyembunyikan elemen (display: none) 
w3-mobile mengutamakan tampilan seluler lebih responsive 
ke elemen apa pun. 
Menampilkan elemen sebagai elemen blok pada 
perangkat seluler 
 
 
NamaFile:css30.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"> 
<h1>Cara Menggunakan w3-display-container</h1> 
<div class="w3-display-container w3-cyan" style="height:300px;"> 
<div class="w3-display-topleft">Kiri Atas</div> 
<div class="w3-display-topright">Kanan Atas</div> 
<div class="w3-display-bottomleft">Kiri Bawah</div> 
<div class="w3-display-bottomright">Kanan Bawah</div> 
<div class="w3-display-left">Kiri</div> 
<div class="w3-display-right">Kanan</div> 
<div class="w3-display-middle">Tengah Tengah</div> 
<div class="w3-display-topmiddle w3-hide-small">Tengah Tengah Atas</div> 
<div class="w3-display-bottommiddle w3-hide-small">Tengah-Tengah 
Bawah</div> 
  </div> 
</div> 
</body> 
</html> 
 
 
 
 
 
Gambar 10.1. Posisi text menggunakan kelas display 
 
 
10.1.Menampilkan Text di Dalam Gambar 
Jika anda ingin menampilkan text atau tulisan diatas gambar, maka dapat dilakukan dengan menggunakan kelas 
w3-display-container, seperti contoh berikut: 
 
NamaFile:css31.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"> 
   <p>Posisi Text di didalam Gambar</p> 
  <div class="w3-display-container w3-text-white"> 
    <img src="unikom-du.jpg" alt="Lights" style="width:100%"> 
    <div class="w3-padding w3-display-topleft">Top Left</div> 
    <div class="w3-padding w3-display-topright">Top Right</div> 
    <div class="w3-padding w3-display-bottomleft">Bottom Left</div> 
    <div class="w3-padding w3-display-bottomright">Bottom Right</div> 
    <div class="w3-padding w3-display-topmiddle">Top Mid</div> 
    <div class="w3-padding w3-display-left">Left</div> 
    <div class="w3-padding w3-display-right">Right</div> 
    <div class="w3-padding w3-display-middle w3-xxlarge">Middle</div> 
    <div class="w3-padding w3-display-bottommiddle">Bottom Mid</div> 
  </div> 
</div> 
</body> 
</html> 
 
 
 
 
Gambar 10.2. Posisi text diatas gambar 
 
10.2. Menggunakan Kelas w3-display-
hover 
Kelas w3-display-hover dapat dikombinasikan dengan kelas efek dan 
animasi untuk membuat efek hover yang keren: 
  
NamaFile:css32.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"> 
  <h1>Kelas <strong>w3-display-hover</strong></h1>   
  <div class="w3-display-container w3-hover-opacity" style="width:50%"> 
  <img src="baesuzy.jpg" alt="Avatar" style="width:100%"> 
  <div class="w3-display-middle w3-display-hover w3-xlarge"> 
  <button class="w3-button w3-black">Baesuzy</button> 
  </div> 
  </div> 
</div> 
 
</body> 
</html> 
 
 
 
 
Gambar 10.3. Display Hover 
 
10.3.W3.CSS Button Classes 
W3.CSS menyediakan kelas untuk membuat tombol berikut: 
 
 
Gambar 10.4. Bermacam Tombol 
 
 
KELAS DEFINISI 
w3-btn Tombol persegi panjang dengan efek bayangan melayang. Warna default adalah 
hitam. 
w3-button Tombol persegi panjang dengan efek melayang abu-abu. Warna default abu-abu 
muda di W3.CSS versi 3. 
Warna default diwarisi dari elemen induk di versi 4. 
w3-bar Sebuah bar horizontal yang dapat digunakan untuk mengelompokkan tombol 
menjadi satu. 
 
w3-blok Kelas yang dapat digunakan untuk menentukan tombol lebar penuh (100%). 
w3-circle Dapat digunakan untuk mendefinisikan tombol lingkaran. 
w3-ripple Dapat digunakan untuk membuat efek riak. 
 
 
 
10.3.1.Tombol 
Baik kelas w3-button dan kelas w3-btn menambahkan perilaku tombol ke elemen HTML apa pun. 
 
Elemen yang paling umum digunakan adalah <input type = "button">, <button>, dan <a>: 
NamaFile:css33.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>Tombol (w3-button)</h2> 
  <input type="button" class="w3-button w3-red" value="Input Button"> 
  <button class="w3-button w3-indigo">Button Button</button> 
  <a href="#" class="w3-button w3-deep-orange">Link Button</a> 
</div> 
 
<div class="w3-container"> 
  <h2>Tombol (w3-btn)</h2> 
  <input type="button" class="w3-btn w3-purple" value="Input Button"> 
  <button class="w3-btn w3-pink">Button Button</button> 
  <a href="#" class="w3-btn w3-lime">Link Button</a> 
</div> 
</body> 
</html> 
 
 
 
Gambar 10.5. Kelas Tombol 
 
 
 
 
10.3.2.Button Shapes 
 Kelas w3-round-size digunakan untuk menambahkan batas bulat ke tombol: 
 
 
Gambar 10.6. Kelas Button Shapes 
 
NamaFile:css34.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<style> 
.w3-btn {width:150px;} 
</style> 
<body> 
 
<div class="w3-container"> 
  <h2>Button Shapes</h2> 
  <p><button class="w3-button w3-amber w3-round-small">Round Small</button> 
  <button class="w3-button w3-brown w3-round">Round Normal</button> 
  <button class="w3-button w3-blue-gray w3-round-large">Round Large</button> 
  <button class="w3-button w3-sand w3-round-xlarge">Round XLarge</button> 
  <button class="w3-button w3-orange w3-round-xxlarge">Round XXLarge</button></p> 
</div> 
 
</body> 
</html> 
 
 
10.4.Semua Elemen diJadikan Tombol 
Dengan W3.CSS, semua element html dapat dijadikan tombol, contoh berikut adalah Gambar 
dijadikan tombol 
 
NamaFile:css35.html 
 
<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<style> 
.w3-btn {width:150px;} 
</style> 
<body> 
 
<h2>All Elements Can Be Buttons</h2> 
<p>Dengan W3.CSS, semua elemen isa dijadikan tombol:</p> 
<div class="w3-row-padding" style="margin:0 -16px"> 
<div class="w3-half"> 
<div class="w3-button w3-white w3-ripple" style="margin:0;padding:0"> 
<img src="mobil.jpg" style="width:100%"> 
<p>A picture can be a w3-button</p> 
</div> 
</div> 
<div class="w3-half"> 
<div class="w3-btn w3-white w3-ripple" style="margin:0;padding:0"> 
<img src="mobil.jpg" style="width:100%"> 
<p>A picture can be a w3-btn</p> 
</div> 
</div> 
</div> 
</body> 
</html> 
 
 
 
Gambar 10.7. Element Tombol 
 
 
 
 
 
 
10.5. Tombol Melingkar  
Kelas w3-circle dapat digunakan untuk membuat tombol melingkar: 
 
NamaFile:css351.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>Tombol Melingkar</h2> 
  <button class="w3-button w3-xlarge w3-circle w3-black">+</button> 
  <button class="w3-button w3-xlarge w3-circle w3-teal">+</button> 
  <button class="w3-button w3-xlarge w3-circle w3-red w3-card-4">+</button> 
</div> 
 
</body> 
</html> 
 
 
 
Gambar 10.11. Tombol melingkar 
  
 
 
10.6. Tombol Kotak  
Kelas w3-button dapat digunakan untuk membuat tombol kotak: 
 
NamaFile:css351.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>Tombol Kotak</h2> 
  <button class="w3-button w3-xlarge w3-red">+</button> 
  <button class="w3-button w3-xlarge w3-yellow">+</button> 
  <button class="w3-button w3-xlarge w3-green w3-card-4">+</button> 
</div> 
 
</body> 
</html> 
 
 
 
 
Gambar 10:12 Tombol Kotak 
 
 
 
 
 
 
 
 
 
 
 
 
TUGAS 10. 
Dengan Menggunakan w3.css Button, , buat program Untuk Menampilkan Gambar tombol 
bulat dan kotak seperti berikut: 
 
 
 
Ketika di Click Gambar, Maka program akan memanggil halaman yang akan digunakan 
untuk memproses. 
 
Gambar atau foto bisa diganti dengan foto Anda Masing-masing, Kumpulkan Program dan 
Screenshot tampilan dalam format PDF, Paling Lambat Hari Minggu Sore  
 
 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching Resource] 
2. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
3. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam Html. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan Html5. [Teaching Resource] 
5. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam Html. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching Resource] 
7. Suryana, Taryana (2022) Materi 2 Memformat Dokumen Html. [Teaching Resource] 
8. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching Resource] 
9. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
10. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
11. https://www.w3schools.com/html, September, 2021 
12. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
13. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
14. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
15. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
16. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
17. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
18. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
19. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
20. https://www.w3schools.com/html, September, 2021 
21. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
22. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
23. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
24. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
25. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
26. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
28. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
30. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
31. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
32. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
33. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
34. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
35. https://www.w3schools.com/html 
 
 


Materi 10 W3 Display Layot Dan Button

Pemrograman WEB 1
Materi 11 ini membahas mengenai bagaimana membuat form input dan label dengan menggunakan w3 cs

 
 
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.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"> 
 
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> 
 
<form class="w3-container w3-card-4"> 
  <h2>Pilih Kota Pavorit Anda</h2> 
  <p> 
  <input class="w3-check" type="checkbox" checked="checked"> 
  <label>Jakarta</label></p> 
  <p> 
  <input class="w3-check" type="checkbox"> 
  <label>Bandung</label></p> 
  <p> 
 
  <input class="w3-check" type="checkbox"> 
  <label>Cianjur</label></p> 
  <p> 
  <input class="w3-check" type="checkbox" disabled> 
  <label>Garut (Disabled)</label></p> 
</form> 
</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> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<form class="w3-container w3-card-4"> 
  <div class="w3-container w3-purple"> 
   <h2>Jenis Kelamin Anda</h2> 
  </div> 
  <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> 
</form> 
</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> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
   
<form class="w3-container w3-card-4" action=""> 
<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> 
     
</body> 
</html> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11.6. Colored Labels dan Input 
Dengan menggunan w3css anda dapat merubah warna Label ataupun warna Input, misalnya akan 
dibuat form input seperti berikut: 
 
 
 
Gambar 11.6. Memberi Warna Pada Label dan Kotak Input 
 
 
NamaFile:CSS41.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-card-4"> 
  <div class="w3-container w3-pale-blue"> 
    <h2>Memberi Warna Pada Label dan Input</h2> 
  </div> 
  <form class="w3-container" action=""> 
    <p>       
    <label class="w3-text-brown"><b>First Name</b></label> 
    <input class="w3-input w3-border w3-amber" name="first" type="text"></p> 
    <p>       
    <label class="w3-text-deep-orange"><b>Last Name</b></label> 
    <input class="w3-input w3-border w3-sand" name="last" type="text"></p> 
    <p> 
    <button class="w3-btn w3-brown">Register</button></p> 
  </form> 
</div> 
</body> 
</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 
 
 
 
Kirim Screenshot program dan Code Program dalam bentuk PDF ke Tugas Kuliah Online, dikirim paling 
telat hari minggu  
 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2021) Menggunakan W3 Css Display Dan Layout. [Teaching Resource] 
2. Suryana, Taryana (2020) Pertemuan 10 W3.css Framework. [Teaching Resource] 
3. Suryana, Taryana (2021) Pengenalan Css Cascading Style Sheet. [Teaching Resource] 2. 
4. Suryana, Taryana (2021) Penggunaan Css Dalam Html. [Teaching Resource] 3. Suryana, 
5. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
6. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
7. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
8. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
9. https://www.w3schools.com/html, September, 2021 
10. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
11. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
12. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
13. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
14. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
15. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
16. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
17. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
18. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
19. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
20. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
21. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
22. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
23. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
24. https://www.w3schools.com/html 
25. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
26. Suryana, Taryana (2021) Membuat Form Input Data Dengan Menggunakan Html Dan Html5 Kelas 
Ts-2021-1. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Formulir Input Data Dengan Html Dan Html5 Kelas Pwk-2021-
1. [Teaching Resource] 
28. Suryana, Taryana (2021) Membuat Form Atau Formulit Input Data Dengan Html Dan Html5 Kelas 
If3-2021-1. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat Formulir Atau Form Dengan Html Dan Html5 Kelas If2-2021-
1. [Teaching Resource] 
 
 
 
 


Menggunakan W3css Untuk Membuat Input Dan Label

Komputer Aplikasi E-Commerce
Materi 11 ini membahas mengenai relasi antara tabel penjualan dengan tabel baran

 
 
 
Menampilkan Relasi Penjualan Barang 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
11.Relasi Tabel 
Pada bagian ini akan dibahas mengenai bagaimana membuat program untuk 
menampilkan Relasi antara table penjualan dengan table barang, seperti telah 
dibahas sebelumnya. Tabel Penjualan memiliki Field seperti berikut: 
 
 
Gambar 11.1.Structure Tabel Penjualan 
 
 
 
 
 
 
 
 
 
 
Sedangkan table barang, memiliki Field seperti berikut: 
 
 
Gambar 11.2.Structure Tabel Barang 
 
Sedangkan yang ingin ditampilkan adalah hasil seperti berikut: 
 
 
Bagaimana cara merelasikan antara table barang dan table penjualan?. 
Untuk merelasikan antara tabel dapat dilakukan dengan menggunakan perintah dasar 
SQL 
 
select. 
 from.. 
where 
 
Contoh jika ingin ditampilkan relasi seperti diatas, maka perintah SQL lengkapnya 
adalah seperti berikut: 
 
select 
penjualan.id,barang.kodebrg,barang.namabarang,barang.harga,penjualan.jumlah
,penjualan.namapembeli,penjualan.alamat,penjualan.kota, 
penjualan.kodepos,penjualan.telp,penjualan.email   
from barang,penjualan  
where barang.kodebrg=penjualan.kodebrg 
 
 
 
Perintah diatas dapat dituliskan atau di copy ke program phpmyadmin, pada menu 
SQL: 
 
Gambar 11.3. phpmyadmin 
 
 
Kemudian Click tombol Go, maka hasilnya seharusnya ditampilkan seperti berikut: 
 
Gambar 11.4. Hasil Relasi tabel barang dan tabel Penjualan. 
 
  
 
 
Langkah selanjunya adalah membuat program Untuk Menampilkan Relasi Antara 
Tabel Barang dan Tabel Penjualan: 
Adapun file yang akan digunakan dan dibuat yaitu: 
1. Tampilrelasipenjualan.php 
 
 
11.1. Membuat Program Menampilkan relasi 
Untuk membuat program menampilkan relasi dapat dicopy dari program 
tampilpenjualan.php dan merubahnya sedikit 
 
 
TAMPILRELASIPENJUALAN.PHP 
<html> 
<center> 
<font size=8> 
RELASI PENJUALAN BARANG 
<br> 
TOKO Online SAGALA AYA 
<hr> 
<table border=1> 
<tr bgcolor=silver><td>NO<td>KODE<td>NAMABARANG<td>HARGA<td>JUMLAH<td>TOTALHARGA<td>NAMAPEMBELI<td>ALAMAT 
<td>KOTA<td>KODEPOS<td>TELP<td>EMAIL<td><center>ACTION 
<?php 
 require ("koneksi.php"); 
 $sql="select penjualan.id,barang.kodebrg,barang.namabarang, barang.harga, penjualan.jumlah, 
penjualan.namapembeli,penjualan.alamat,penjualan.kota,penjualan.kodepos, penjualan.telp,penjualan.email  
from barang,penjualan 
where barang.kodebrg=penjualan.kodebrg"; 
  $hasil=mysqli_query($conn,$sql); 
  $row=mysqli_fetch_row($hasil); 
  $n=1;$total=0; 
  do 
   { 
    list($id, $kodebrg,$namabarang,$harga,$jumlah,$namapembeli,$alamat,$kota,$kodepos,$telp,$email)=$row; 
    $total=$harga*$jumlah; 
    echo "<tr><td>$n<td>$kodebrg<td>$namabarang<td>$harga<td>$jumlah<td> 
    $total<td>$namapembeli<td>$alamat<td>$kota<td>$kodepos<td>$telp<td>$email"; 
    echo "<td><a href='deletepenjualan.php?id=$id'>Delete"; 
 $n++; 
   } 
 while ($row=mysqli_fetch_row($hasil)); 
?> 
 
 
11.2.Menampilkan Hasil Via Browser 
Setelah  program TAMPILRELASIPENJUALAN.PHP  dibuat dan disimpan dalam 
folder yang sama, kemudian adalah menampilkannya ke layar komputer: 
 
Untuk menampilkan hasilnya dapat dilakukan dengan cara seperti biasa menampilkan 
program php: 
1.Jalankakan Browser 
2. Pada Address Bar, ketikan:localhost/belajar 
3.Click File TAMPILRELASIPENJUALAN.PHP 
 
 
Gambar 11.5. Hasil Relasi Penjualan 
 
Jika isi tabel penjualan anda sudah ada beberapa data, maka data akan ditampilkan 
sebanyak data yang ada di tabel penjualan 
 
 
  
 
 
Tugas 11: 
Buat Screenshot dari isi tabel barang, tabel penjualan, dan hasil 
program:TampilrelasiPenjualan.php yang telah anda buat,  
Kirim ke modul tugas pada kuliahonline dengan format word atau pdf: 
 
 
  
 
PUSTAKA HI 
 
1. Suryana, Taryana (2021) Membuat Program Untuk Menangani Penjualan Barang. [Teaching 
Resource] 
2. Suryana, Taryana (2021) Membuat Toko Online. [Teaching Resource] 
3. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
4. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
5. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
6. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
7. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
8. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
9. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
10. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
11. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
12. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
13. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
14. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
15. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
16. https://www.w3schools.com/  September, 2021 
17. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
18. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
19. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
20. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 


Menampilkan Relasi Penjualan Barang

Web Aplikasi
Materi 11 ini membahas mengenai bagaimana menggunakan w3 css untuk membuat for

Membuat Form Input Dan Label Dengan W3 Css

Pemrograman WEB 1
Materi 13 membahas mengenai bagaimana membuat menu vertikal ataupun horizontal dengan 
menggunakan w3 css w3-bar-item w3-button  dan javascript untuk membuka halama

 
 
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-black"> 
  <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"  style="display:none"> 
  <h2>Bandung</h2> 
   <p>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>Tasik</h2> 
   <p>Atau Tasikmalaya Dikenal dengan Julukan Kota Intan, dan Kota Kerajinan Tangan</p> 
</div> 
 
<div id="Ciirebon" class="w3-container kota"  style="display:none"> 
   <h2>Cirebon</h2> 
   <p>Dikenal dengan Julukan Kota udang</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="openKota(event, 'Bandung')">Bandung</button> 
  <button class="w3-bar-item w3-button tablink" onclick="openKota(event, 'Garut')">Garut</button> 
  <button class="w3-bar-item w3-button tablink" onclick="openKota(event, 'Tasik')">Tasik</button> 
  <button class="w3-bar-item w3-button tablink" onclick="openKota(event, 'Cirebon')">Cirebon</button>  
</div> 
 
<div style="margin-left:130px"> 
 <div class="w3-padding">Menu Tab Vertikal</div> 
  <div id="Bandung" class="w3-container kota" style="display:none"> 
    <h2>Bandung</h2> 
     <p>Ibukota dari Provinsi Jawa Barat</p>  
  </div> 
 
  <div id="Garut" class="w3-container kota" style="display:none"> 
    <h2>Garut</h2> 
    <p>Garut kota yang terkenal dengan Dodol dan domba nya</p>  
   </div> 
 
  <div id="Tasik" class="w3-container kota" style="display:none"> 
    <h2>Tasik</h2> 
    <p>Terkenal dengan sebagai kota Intan.</p> 
  </div> 
 
 <div id="Cirebon" class="w3-container kota w3-animate-zoom" style="display:none"> 
    <h2>Cirebon</h2> 
    <p>Terkenal dengan sebagai kota Udang.</p> 
 </div> 
</div> 
 
<script> 
function openKota(evt, namaKota) { 
  var i, x, tablinks; 
  x = document.getElementsByClassName("kota"); 
  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(namaKota).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 
 
NB: isi tugas silahkan dirubah disesuaikan dengan Menu yang akan kalian Buat, Minimal 
ada 4 buah pilihan Menu 
 
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 
  
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2022) W3.css Animation Effect. [Teaching Resource]Suryana, 
2. Suryana, Taryana (2022) Menggunakan W3css Untuk Membuat Input Dan Label. [Teaching 
Resource] 
3. Taryana (2021) Menggunakan W3 Css Display Dan Layout. [Teaching Resource] 
4. Suryana, Taryana (2020) Pertemuan 10 W3.css Framework. [Teaching Resource] 
5. Suryana, Taryana (2021) Pengenalan Css Cascading Style Sheet. [Teaching Resource] 2. 
6. Suryana, Taryana (2021) Penggunaan Css Dalam Html. [Teaching Resource] 3. Suryana, 
7. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
8. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
9. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
10. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
11. https://www.w3schools.com/html, September, 2021 
12. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor.  [Teaching 
Resource] 
13. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan Pemrograman Web. [Teaching 
Resource] 
14. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching Resource] 
15. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Materi Jurusan Perancangan 
Wilayah Dan Kota. [Teaching Resource] 
16. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html Untuk Jurusan Teknik 
Sipil. [Teaching Resource] 
17. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html. [Teaching Resource] 
18. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-ul2-2021. [Teaching 
Resource] 
19. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-2021-1. [Teaching Resource] 
20. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-2021-1. [Teaching Resource] 
21. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
22. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan Disdukcapil. [Teaching 
Resource] 
23. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-2021-1. [Teaching Resource] 
24. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-2021-1. [Teaching Resource] 
25. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-12021-1. [Teaching Resource] 
26. https://www.w3schools.com/html 
27. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
28. Suryana, Taryana (2021) Membuat Form Input Data Dengan Menggunakan Html Dan Html5 Kelas 
Ts-2021-1. [Teaching Resource] 
29. Suryana, Taryana (2021) Membuat Formulir Input Data Dengan Html Dan Html5 Kelas Pwk-2021-
1. [Teaching Resource] 
30. Suryana, Taryana (2021) Membuat Form Atau Formulit Input Data Dengan Html Dan Html5 Kelas 
If3-2021-1. [Teaching Resource] 
31. Suryana, Taryana (2021) Membuat Formulir Atau Form Dengan Html Dan Html5 Kelas If2-2021-
1. [Teaching Resource] 
 
 


Not a member yet

Materi 9 Penggunaan Framework W3 Css

W3 Css Framework

Materi 9 Hapus Data Penjualan

W3 Css Framework

Materi 10 W3 Display Layot Dan Button

Menggunakan W3css Untuk Membuat Input Dan Label

Menggunakan W3css Untuk Membuat Input Dan Label

Menampilkan Relasi Penjualan Barang

Membuat Form Input Dan Label Dengan W3 Css

W3.css Navigation Dan Javascript

15,029

70,114