Repository Universitas Komputer Indonesia

Widya, Amilia

Pertemuan 13 : Goa Gong Pacitan

Pemrograman WEB 1
Materi ini membahas mengenai bagaimana membuat form input dengan menggunakan w3css, didalamnya meliputi text,select, radio dan checkbox, serta labe

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.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 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 10 Januari 2021 


Pertemuan 12 Css Input Dan Label

Aplikasi IT-1
Materi ini membahas mengenai bagaimana membuat form input dengan menggunakan w3css, didalamnya meliputi text,select, radio dan checkbox, serta labe

GEOLOGI LINGKUNGAN
Mengenal Bhaya Geologi disekitar Kit

BAHAYA 
GEOLOGI
PROSES GEOLOGI
▪ Proses proses geologi adalah semua aktivitas yang terjadi di bumi baik yang berasal dari dalam 
bumi(endogen) maupun yang berasal dari luar bumi (eksogen).
Apa itu Bahaya / 
Hazard ?
4
PERKA BNPB NO.2 TH.2012
5
6
7
8
Alasan Mengapa harus mempelajari 
mengenai “Bahaya Geologi”
Geologi Memungkinkan 
menimbulkan Collateral/ second 
Hazard
Tidak hanya ancaman saja, tetapi 
menimbulkan kerugian berkali lipat 
baik jiwa, harta, lingkungan dll
THIS IS A SLIDE TITLE
9
10
“
Gempa bumi, tsunami, 
Gunung Berapi
11
12
Endogen merupakan Tenaga yang berasal 
dari dalam bumi yang menyebabkan 
perubahan pada kulit bumi.
Proses Endogen
Aktivitas Tektonik
Vulkanik
Gempa Bumi
Pergerakan pada lempeng/tumbukan yang ada 
di kerak bumi (lithosphere)
Hasil pergerakan/Tumbukan Menghasilkan :
Pembentukan Pegunungan (Orogenesa)
Aktifitas magmatik/vulkanik
Gempa Bumi
“Pergerakan aktivitas 
vulkanik maupun gempa 
bumi baik muncul karena : 
Divergen,Convergen dan 
Transform”
“
Gempa bumi
13
GEMPA BUMI
PENYEBABNYA
PUSATNYA / LETAK 
EPISENTRUMNYA
LETAK 
HIPOSENTRUMYA
1. GEMPA TEKTONIK
2. GEMPA VULKANIK
3. GEMPA RUNTUHAN
1. GEMPA DARATAN
2. GEMPA LAUT
1. GEMPA DALAM
2. GEMPA MENENGAH / 
INTERMEDIER
3. GEMPA DANGKAL
15
Hal yang diperhatikan dalam Gempa Bumi
Intesitas
Magnitudo
Pencatat Gempa seismograf
16
Informasi Skala MMI
Skala Richter : Besarnya kekuatan gempa dengan cara 
mengukur gelombang seismik penyebab gempa.
MMI : Skala Mercalli mengukur intensitas gempa 
berdasarkan dampak yang ditimbulkannya
18
Bahaya Susulan
“
Tsunami
19

21
Dampak Tsunami
“
Gunung Berapi
22
23
Semua gejala di dalam bumi sebagai
akibat adanya aktivitas magma
disebut vulkanisme. Gerakan magma
itu terjadi karena magma
mengandung gas yang merupakan
sumber tenaga magma untuk
menekan batuan yang ada di
sekitarnya
Vulkanisme yaitu peristiwa yang 
sehubungan dengan naiknya magma 
dari dalam perut bumi.
Proses Endogen 
Vulkanisme
Proses Endogen 
Tektonik
DIRECTORATE OF VOLCANOLOGY AND GEOLOGYCAL HAZARD MITIGATION
JL. DIPONEGORO 57 BANDUNG,  INDONESIA 40122
TEL : (62-22) 727 2606, 727 4012
FAX : (62-22) 720 2761 DISTRIBUTION MAP OF INDONESIAN VOLCANOES


27
Dampak negatif
28
Dampak Positif
“
Pergerakan Tanah
29
30
Gerakan Tanah, proses berpindahnya 
tanah atau batuan tanah atau batuan 
disebabkan oleh gaya gravitasi bumi.
Longsoran tersebut menyebabkan korban jiwa dan 
kerugian 
Bahaya
Geological
Hidro –
meteorologi
Pergerakan Lempengan
Susunan Batuan
Topografi
Iklim
Kemiringan lereng
Material Organik (Lebat/jarangnya vegetasi) dll
Penyebabnya
31
Pencegahan
Hal 239-242
32
Bahaya Geologi Teridentifikasi Bencana
Upaya Pencegahan
Pengkajian Resiko Bencana Pengkajian risiko bencana 
merupakan sebuah pendekatan 
untuk memperlihatkan potensi 
dampak negatif yang mungkin 
timbul akibat suatu potensi bencana 
yang melanda. 
Tingkat risiko bencana Tersebut 
tergantung pada :
1. Tingkat ancaman kawasan;
2. Tngkat kerentanan kawasan 
yang terancam;
3. Tingkat kapasitas kawasan yang 
terancam.
Upaya Penanggulangan
Intesitas dan 
Probabilitas
Dokumen Rencana
Peta Kebencanaan
Siklus Kebencanaan
Sebelum
Saat
Sesudah 
Upaya Penanggulangan
Saat 
Bencana
Pasca 
Bencana
Pra Bencana
Pengetahuan, Pembangunan dan Pelaksanaan
Proses Perencanaan Tata Guna Lahan
34
“
“Pemanfaatan Lahan yang 
ditunjukan untuk suatu 
peruntukan tertentu”
35
36
Lahan 
Lingkungan Fisik :
Lereng, iklim, jenis tanah, 
batuan, Hidrologi, penggunaan 
lahan, satwa liar, bahaya geologi 
3 proses perencanaan tata guna lahan 
1. Survei awal : data dasar, kajian pustaka,
survei lapangan, sampai perpaduan data
dasar kedalam pemetaan.
2. Penilaian kapabilitas lahan : peruntukan
lahan (pertanian, perumahan, perkebunan
dll).
3. Rencana Lokasi : Peruntukan lahan yang
ada.
Sesuai pada tempatnya
TUGAS BESAR.
37
38
OUTPUT :
1. VLOG
2. Laporan sederhana dalam 
bentuk Sofile.
3. Membuat Permainan
edukasi seputar vlog kepada
teman2 kelompok lain dan
siapkan hadiah untuk yg
juara.
VLOG :
1. Min 10 menit max 20menit
2. Berisi mengenai :
A. Perkenalan :
Lokasi dimana?
Matakuliah apa?
Tujuan apa?
Perkenalan kalian?
B. Isi :
Sejarah terbentuk
Proses geologi
Bentang alam (ex: perbukitan,sungai, air terjun, kawah, gunung dll)
Jenis Batuan yg ada
Flora faunana
Analisis rentan bencananya
Pemanfaatan lahan (sesuaikah,sebaiknya seperti apa dll)
Kondisi alam yg unik
Mitos/budaya
C. Penutup
Wawancara
Harapan
Catatan :
▪ Pakaian rapih bebas aksesoris
▪ Berbahasa edukatif
▪ Bebas backsound apapun
▪ Bebas menggunakan animasi, peta, alat2
apapun berbasis aman dan edukasi.
Pemutaran Vlog dimulai tgl 6 / 13
Januari 2020
Batas Upload Video 23 Desember 2020
Like dan subscribe 
Like terbanyak akan mendapat Hadiah
Geolingunikom@gmail.com
Pswrd : geologilingkunganunikom
39
THANKS!


Pertemuan 9 : Bahaya Geologi

Akuntansi Biaya
Materi XIII Variable & Full Costin

Mulyadi, Hendri

Materi Xiii Variable & Full Costing

ANALISA PEMERINTAHAN INDNESIA
Pada pertemuan ini membahas tentang Fungsi parpol, Faksionalisme Parpol dan Demokratisasi Partai Politi

Rohmawati, Tatik

Partai Politik Dalam Demokratisasi

Aplikasi IT-1 (Web Program)
Download gambar pendukung, extrak pada folder htm

Gambar Pendukung

Aplikasi Akt.E-Commerce
Pada bagian ini akan dibahas mengenai bagaimana membuat program untuk menampilkan Relasi antara table penjualan dengan table baran

 
 
 
Menampilkan Relasi Penjualan Barang 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
13.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 13.1.Structure Tabel Penjualan 
 
 
 
 
 
 
 
 
 
 
Sedangkan table barang, memiliki Field seperti berikut: 
 
 
Gambar 13.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 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 13.3. phpmyadmin 
 
 
Kemudian Click tombol Go, maka hasilnya seharusnya ditampilkan seperti berikut: 
 
Gambar 13.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 
 
 
13.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> 
LAPORAN RELASI PENJUALAN BARANG 
<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 
<?php 
require ("koneksi.php"); 
$sql="select 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($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"; 
    $n++; 
   } 
 while ($row=mysqli_fetch_row($hasil)); 
?> 
 
 
13.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 13.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 13: 
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: 
 
Contoh isi tabel barang dikomputer saya: 
 
 
Contoh isi tabel Penjualan dikomputer saya: 
 
 
 
 
 
 
 
 
 


Pertemuan 14: Menampilkan Relasi Penjualan Barang

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

 
 
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</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> 
 
 
<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 
 


Not a member yet

Pertemuan 13 : Goa Gong Pacitan

Pertemuan 12 Css Input Dan Label

Pertemuan 12 Css Input Dan Label

Pertemuan 9 : Bahaya Geologi

Materi Xiii Variable & Full Costing

Partai Politik Dalam Demokratisasi

Gambar Pendukung

Pertemuan 14: Menampilkan Relasi Penjualan Barang

Pertemuan 14:navigation Tab Dan Java Script

Pertemuan Ke-10

15,029

70,114