Repository Universitas Komputer Indonesia

Pemrograman WEB 2
Materi 9. Membahas mengenai instalasi xampp, Pengenalan PHP, Variabel, pengenalan phpmyadmin, pembuatan database

Suryana, Taryana

 
 
Pengenalan Xampp dan Phpmyadmin 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
9.1. Software XAMPP 
Untuk memulai menggunakan aplikasi ini langkah pertama yang harus anda lakukan 
adalah men-download aplikasi xampp terbaru yang dapat di akses di alamat: 
https://www.apachefriends.org/index.html selanjutnya akan ditampilkan jendela 
seperti berikut: 
 
Gambar 9.1 Halaman Utama website apachefriends.org 
 
Pilih Download file sesuai dengan sistem operasi yang anda gunakan, pada buku ini 
semua latihan program dilakukan dengan menggunakan sistem operasi Microsoft 
Windows 
 
 
 
9.2. Instalasi XAMPP 
Untuk memulai instalasi XAMPP, setelah anda mendapatkan File Master Instaler 
xampp, ikuti langkah berikut: 
1. Lakukan double click pada file  
xampp-windows-x64-7.3.9-0-VC15-installer.exe
 
2 Setelah dijalankan akan ditampilkan jendela installer seperti berikut: 
 
 
Gambar 9.2. Jendela Utama Setup xampp 
 
3 Click Next untuk melanjutkan, dan akan ditampilkan jendela seperti gambar 1.3 
berikut: 
 
 
Gambar 9.3. Jendela Setup Select Components 
 
 
4. Click Next untuk melanjutkan ke proses berikutnya, dan akan ditampilkan 
jendela seperti gambar 9.4. 
 
 
 
Gambar 9.4.Tentukan Folder dimana XAMPP akan di Install 
 
5. Click Next untuk melanjutkan ke langkah berikutnya, akan ditampilkan seperti 
Gambar 9.5. 
 
 
 
Gambar 9.5.Jendela Bitnami Setup 
 
6. Click Next untuk melanjutkan ke Proses berikutnya, dan akan ditampilkan 
jendela seperti gambar 9.6 
 
 
Gambar 9.6.Memulai Instalasi 
 
7. Click Next untuk memulai Instalasi XAMPP, dan akan ditampilkan jendela 
progres instalasi seperti gambar 9.7 
 
 
 
Gambar 9.7.Progres Instalasi 
 
8. Click Next untuk Melanjutkan kelangkah berikutnya, ditampilkan seperti 
gambar 1.8 
 
 
 
Gambar 9.8. Mengatur Hak Akses XAMPP 
 
9. Click Allow Access, untuk memberi hak Access pada XAMPP, dan Click Finish 
untuk menyelesaikan proses instalasi 
 
 
 
 
Gambar 9.9. Jendela selesai proses instalasi xampp 
 
 
 
9.3.Menjalankan XAMPP 
 Untuk memulai menjalankan xampp dapat dilakukan dengan cara double click 
icon xampp, atau dapat juga dilakukan dengan menggunakan windows explorer, 
kemudian jalankan file xampp-control.exe, dan akan ditampilkan jendela seperti 
gambar 1.10 
 
 
Gambar 9.10. Jendela xampp control panel 
 
Click tombol Action Start pada Modul Apache dan Modul MySQL 
 
 
Gambar 9.11.Mengaktifkan service Apache dan MySQL 
 
 
9.4.Dasar Pemrograman PHP 
Dalam dunia pemrograman dikenal ada istilah Server Side dan Local side, yaitu 
program yang dijalan di server dan program yang dijalankan di Lokal, Contohnya 
adalah Bahasa PHP ini dijalankan di sisi server, sedangkan contoh bahasa html 
dan javascript dijalankan dilokal. 
 
Contoh Program php: 
<?php 
 echo "Halo PHP"; 
?> 
 
Program PHP harus disimpan di folder xampp/htdocs 
Misalnya jika webserver atau software xampp di install di drive c: maka seluruh file 
yang anda buat harus disimpan di c:/xampp/htdocs/namafile.php, atau anda membuat 
folder baru di root htdocs tadi. 
 
Untuk Menjalankan Program PHP yang telah dibuat dilakukan dengan cara dari address browser, 
tuliskan localhost/namafile.php atau localhost/namafolder/namafile.php 
 
 
 
  
 
 
Variabel 
Untuk Mendeklarasikan Variabel dalam PHP dituliskan seperti berikut: 
 
<?php 
$nama="Fahra Ragita";  //tipe string 
$umur=21; //tipe numerik 
echo "Nama Siswa : $nama Usia saat ini $umur tahun"; 
?> 
 
 
Maka jika ditampilkan di browser akan keluar seperti berikut: 
 
 
 
 
 
 
9.5.Menjalankan phpMyAdmin 
Ketika anda ingin menjalankan phpMyAdmin langkah pertama adalah: 
a. Buka browser, kemudian pada kotak Address, ketikan: 
http://localhost/phpmyadmin 
  
 
 
Gambar 9.12.Jendela phpMyAdmin 
 
b. Untuk membuat database baru, Click New, pada kotak Create Database, 
masukan nama database yang akan dibuat, misalnya “belajar” kemudian Click 
tombol Create 
 
Gambar 9.13.Membuat database 
 
c. Jika Database “Belajar” berhasil dibuat, maka pada jendela phpMyadmin 
sebelah kiri akan ditampilkan hasil seperti berikut” 
 
 
Gambar 9.14. Database “belajar” berhasil dibuat 
  
 
 
LATIHAN  
Pada latihan ini akan dibuat sebuah tabel yang berisi data-data siswa, adapun 
datanya adalah sebagai berikut: 
 
Nama Tabel:SISWA 
 
NIM  NAMA  ALAMAT   KOTA  HP 
10120001 GUNADI  JLN.MERDEKA 12  BANDUNG 08111111111 
10120002 SARI KARTIKA JLN.SETIABUDI 89 BANDUNG 08122222222 
10120003 DEWI PURNAMA JLN.SARIJADI 76 BANDUNG 08133333333 
10120004 SONYA ERMINA JLN.HEGARMANAH 23 BANDUNG 08144444444 
10120005 DAVIN KAREL JLN.CIWARUGA 76 CIMAHI  08155555555 
 
Langkah-langkah pembuatan tabel: 
1. Click database “belajar” 
2. Pada Jendela Create Table, tuliskan NameTable:SISWA dan Number of 
Columns:5, Click tombol GO 
 
 
Gambar 9.15.Membuat Table SISWA 
 
 
 
 
 
 
 
 
 
 
 
 
 
3. Kemudian akan ditampilkan Jendela seperti berikut: 
 
 
Gambar 9.16. Latihan Membuat Table SISWA 
 
 
3.Perhatikan pada Header Name, Type dan Length, bagian ini diisi sesuai dengan 
yg ada di modul ini dulu, jika sudah selesai Click tombol Save di bagian Kanan Bawah 
 
 
Gambar 9.17.Struktur Tabel Siswa 
 
 
 
4. Selanjutnya jika berhasil akan ditampilkan jendela seperti berikut: 
 
Gambar 9.18. Table SISWA Berhasil di Buat 
 
5.Untuk memasukan data, Click Menu Insert di sebelah Atas, selanjutnya akan 
ditampilkan jendela seperti berikut: 
 
Gambar 9.19.Memasukan Data Kedalam Tabel Siswa 
 
6.Click Tombol GO, selanjutnya akan ditampilkan Jendela Berikut: 
 
 
Gambar 9.20. Informasi Data Berhasil di Tambahkan 
 
7.Click Menu Browse, untuk menampilkan hasil berikut: 
 
Gambar 9.21. Tampilan Jendela Browse 
 
8. Selanjutnya untuk memasukan Data Berikutnya, Ulangi langkah ke 5,6,7, sampai  
data masuk semuanya 
 
Gambar 9.22. Menampilkan Semua Data 
 
 
 
TUGAS 9 
Tambahkan Data Nama Sendiri, dan sedikitnya 2 Orang data Nama Teman  kedalam Tabel 
Siswa di Atas. Jika Telah Masuk Kedalam Tabel Siswa, Screenshoot tampilan tersebut, 
kemudian Copy Paste kedalam Dokumen Microsoft Word, Simpan dengan Nama File: 
TUGAS-9-NIM-NAMA.DOCS, kemudian save As ke format PDF kemudian file tersebut 
upload kemenu Tugas di https://kuliahonline.unikom.ac.id 
  
 
 
PUSTAKA 
 
1. Suryana, Taryana (2022) Penggunaan Input Data Select Dan Textarea Pada Html Dan 
Javascript. [Teaching Resource] 
2. Suryana, Taryana (2022) Perulangan Dalam Java Script. [Teaching Resource] 
3. Suryana, Taryana (2022) Membaca Data Bertipe Text Dari Html Ke Javascript. [Teaching 
Resource] 
4. Suryana, Taryana (2022) Penggunaan Array Dan Methode Array Dalam Java Script. [Teaching 
Resource] 
5. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
7. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
8. Suryana, Taryana (2022) Pengenalan Dasar Pemrograman Java Script. [Teaching Resource] 
9. Suryana, Taryana (2022) Fungsi Logika Atau Pecabangan Dalam Javascript. [Teaching Resource] 
10. Suryana, Taryana (2022) Operator Dalam Php Dan Mysql. [Teaching Resource] 
11. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
12. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
13. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
14. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
15. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
16. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
17. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
18. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
19. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
20. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
21. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
22. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
23. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
24. https://www.w3schools.com/  September, 2021 
25. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
26. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
27. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
28. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 


Instalasi Xampp Untuk Menjalankan Webserver Apache Dan Mysql

Praktikum Aplikasi Berbasis Web II 

Materi 9. Membahas mengenai instalasi xampp, Pengenalan PHP, Variabel, pengenalan phpmyadmin, pembuatan database

Aplikasi IT-2
Materi 10 Membahas mengenai Variabel dalam PHP, Penanganan Input dan Output dalam php dengan menggunakan Method POS

 
 
Input dan Output dalam  
Pemrograman PHP 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081021480577 
 
 
BAB 10.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 
 
10.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 10.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 10.2. 
 
 
  
Gambar 10.2. Menampilkan Hasil Proses 
 
  
 
 
 
10.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 10.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 10.4.Menampilkan data tipe Radio 
 
 
10.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 10.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 10.6.Menangani Objek Tipe Checkbox 
 
  
 
10.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 10.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=20110 - $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 10.8.Proses Objek Tipe Select 
 
 
 
 
  
 
Tugas 
Tugas 10.1. 
Dengan menggabungkan Beberapa objek yang telah dibahas diatas, buat program 
Gaji seperti berikut: 
 
 
 
Hasil Outputnya 
 
 
 
 
Tugas 10.2 
Dengan Menggunakan Objek select dan Checkbox, buat form dan program 
seperti berikut: 
 
 
 
Hasil Outputnya 
 
 
  
 
Tugas 10.3 
Dengan Menggunakan Objek select dan Radio dan Text, buat form dan program 
seperti berikut: 
 
  
 
Hasil Output 
 
 
 
Kirim dalam format PDF Coding Program dan Screenshot, paling Lambat hari 
Minggu Sore 
 
 
ooOOoo 
 
PUSTAKA 
 
1. Suryana, Taryana (2022) Penggunaan Input Data Select Dan Textarea Pada Html Dan 
Javascript. [Teaching Resource] 
2. Suryana, Taryana (2022) Perulangan Dalam Java Script. [Teaching Resource] 
3. Suryana, Taryana (2022) Membaca Data Bertipe Text Dari Html Ke Javascript. [Teaching 
Resource] 
4. Suryana, Taryana (2022) Penggunaan Array Dan Methode Array Dalam Java Script. [Teaching 
Resource] 
5. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
6. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
 
7. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
8. Suryana, Taryana (2022) Pengenalan Dasar Pemrograman Java Script. [Teaching Resource] 
9. Suryana, Taryana (2022) Fungsi Logika Atau Pecabangan Dalam Javascript. [Teaching Resource] 
10. Suryana, Taryana (2022) Operator Dalam Php Dan Mysql. [Teaching Resource] 
11. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
12. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
13. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
14. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
15. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
16. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
17. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
18. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
19. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
20. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
21. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
22. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
23. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
24. https://www.w3schools.com/  September, 2021 
25. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
26. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
27. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
28. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 


Pengenalan Variabel Dalam Php, Dan Penanganan Input Dan Output Dalam Php

Komputer Aplikasi IT II 
Materi 8 Membahas Mengenai Dasar-Dasar Pembuatan Halaman WEB Dengan Menggunakan CSS, konsep dasar, selector,  class, proper

 
 
Cascading Style Sheet 
 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
8.1 Pengertian CSS 
CSS (Cascading Style Sheet) adalah suatu bahasa stylesheet yang digunakan untuk 
mengatur tampilan suatu website, baik tata letaknya, jenis huruf, warna, dan semua yang 
berhubungan dengan tampilan. Pada umumnya  CSS digunakan untuk menformat 
halaman web yang ditulis dengan HTML atau XHTML.  
Sintak Dasar CSS: 
 
 
 
8.2 Cara Menuliskan CSS  
Ada dua cara yang bisa diterapkan untuk menggunakan CSS pada web. Cara yang pertama 
adalah dengan membuat CSS langsung didalam satu file HTML kita (internal / inline style 
sheet). Cara yang kedua adalah dengan cara memanggil CSS tersebut dari file CSS tersendiri 
(external style sheet).  
 
Cara pemakaian CSS ada 2 cara. Cara yang pertama adalah dengan menggabungkan CSS 
langsung ke dalam satu file markup  (internal), cara yang kedua adalah dengan cara 
memanggil CSS tersebut (eksternal). 
 
Contoh eksternal css 
<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css" /> 
</head> 
 
Kalau memakai internal CSS semua kode CSS dan markup dimasukkan dalam satu file yang 
sama, sedangkan jika memakai eksternal CSS diperlukan link untuk menghubungkan 
keduanya. 
Contoh Internal css 
Nama File:css1.html 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
  background-color: lightblue; 
} 
 
h1 { 
  color: white; 
  text-align: center; 
} 
 
p { 
  font-family: verdana; 
  font-size: 20px; 
} 
</style> 
</head> 
<body> 
 
<h1>Contoh Header dengan Menggunakan CSS</h1> 
<p>Ini adalah paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 Ini 
adalah paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 Ini adalah 
paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 Ini adalah 
paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 Ini adalah 
paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 Ini adalah paragraph1 .</p> 
 
</body> 
 
</html> 
 
 
Gambar 8.1. COntoh Menampilkan halaman CSS 
 
8.2.1. Inline 
Penulisan dengan cara Inline artinya bahwa code css tersebut dituliskan langsung 
dibagian program yang sedang anda buat. 
Nama File:css2.html 
<html> 
<head> 
<title>Bentuk inline</title> 
</head> 
<body bgcolor="#ffffff"> 
<p>kalimat ini tidak menggunakan format css</p> 
<p style="font-size:20pt">kalimat ini menggunakan format css 
untuk ukuran font sebesar 20 point</p> 
<p style="font-size:20px" >kalimat ini menggunakan format css 
untuk ukuran font sebesar 20 pixel</p> 
</body> 
</html> 
 
 
 
 
 
Gambar 8.2. CSS Inline 
 
8.2.2.Embedded 
Penulisan dengan Embedded artinya bahwa code css tersebut dituliskan langsung atau 
dibenamkan pada bagian atas program yang sedang anda buat dan pada bagian 
penggunaan cukup menuliskan selector dari css tersebut disertai dengan parameter yang 
ada 
 
Nama File:css3.html 
<html> 
<head> 
<title>bentuk penulisan secara embedded</title> 
</head> 
<style> 
 body {background-color: lightblue; margin-left:0.5in} 
 h1 {font-size:18pt; color:#ff0000} 
 p {font-size:12pt; font-family:arial; text-indent:0.5in} 
</style> 
<body> 
 <h1 id="cth1">judul berukuran 18 point dan warna merah</h1> 
 <p id="cth2">tag p di format dengan ukuran 12, tipe font arial, indensi 0.5 inch</p> 
</body> 
 
</html> 
 
 
Gambar 8.3. CSS dengan cara Embeded 
 
 
8.2.3.Embedded Class 
Penulisan dengan Embedded Class hampir sama dengan penulisan embedded, tetapi 
disini dalam penggunaannya menggunaka clausa class pada bagian text yang ingin 
ditampilkan. 
 
NamaFile:css4.html 
 
<html> 
<head> 
<title>Bentuk penulisan secara embedded dengan class</title> 
</head> 
<style> 
 p.coklat {font-size:14pt; color:brown} 
 p.biru {font-size:15pt; color:blue} 
</style> 
<body> 
 <p>Paragraph Standar tanpa style</p> 
 <p class="coklat">Paragraph bentuk class coklat</p> 
 <p class="biru">Paragraph bentuk class biru</p> 
</body> 
</html> 
 
 
Gambar 8.4. CSS dengan cara Embeded Class 
 
 
8.2.4. Linked Style Sheet 
Cara Penulisan css berikutnya adalah dengan cara menuliskan code css tersebut disebuah 
file yang terpisah kemudian memanggilnya dengan menggunakan perintah link, untuk 
menggabungkanya dengan program utama yang memanggil.  
 
NamaFile:css5.html 
<html> 
<head> 
<title>bentuk linked style sheet</title> 
 <link rel=stylesheet href="linked.css" type="text/css"> 
</head> 
<body> 
 <h1>judul berukuran 20 point dengan warna biru</h1> 
 <h2>judul berukuran 15 point dengan warna merah</h2> 
 <p>tag p di format dengan ukuran 14, tipe font arial, indensi 0.5 inch</p> 
 <p>latar belakang warna putih dengan margin 0,5 inch</p> 
</body> 
</html> 
 
 
  
 
 
Contoh file css yang disimpan terpisah dari halaman utama  
Nama File:Linked.css 
<style> 
 H1 {font-size:20pt; color:#00008b} 
 H2 {font-size:15pt; color:red} 
 P {font-size:14pt; font-family:arial; text-indent:0.5in} 
 body {background-color: lightblue; margin-left:0.5in}  
</style> 
 
 
 
Gambr 8.5. Memanggil Linked css 
 
8.3.Sintak CSS 
CSS memiliki aturan dalam penulisannya, yaitu ada bagian utama yang dinamakan selector dan ada 
satu atau lebih bagian deklarasi 
 
 
 
Bagian Selector biasanya ditulis menggunakan perintah html yang biasa digunakan, sedangkan 
deklarasi biasanya terdiri dari properti dan nilai, Propert sendiri adalah atribut style yang ingin Anda 
ubah.  
 
CATATAN PENTING: 
Setiap Properti selalu memiliki sebuah nilai 
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung 
kurawal: 
p{color: red; text-align: center;} 
Untuk membuat CSS agar lebih mudah dibaca, Anda dapat menempatkan satu deklarasi pada tiap 
baris, seperti ini: 
p 
{ 
color:red; 
text-align:center; 
} 
Contoh Program 
<html> 
<head> 
<style type="text/css"> 
p 
{ 
color:red; 
text-align:center; 
}  
</style> 
</head> 
<body> 
<p>Belajar CSS</p> 
<p>Paragrap ini menggunakan CSS.</p> 
</body> 
</html> 
 
 
Gambar8.6. Contoh Sintak Dasar CSS 
 
 
8.3.1. id dan class Selectors 
Selain menggunakan style html, CSS memungkinkanAnda untuk menentukan penyeleksi Anda 
sendiri yang disebut"id" dan "kelas". 
CATATAN PENTING: 
id selektor harus elemen tunggal yang unik di definisikan dengan 
menggunakan tanda “#”  
Contoh Program 
#paragrap1 
{ 
text-align:center; 
color:red; 
} 
<html> 
<head> 
<style type="text/css"> 
#paragrap1 
{ 
text-align:center; 
color:red; 
}  
</style> 
</head> 
<body> 
<p id="paragrap1">Belajar CSS!</p> 
<p>Tulisan ini tidak menggunakan style yang telah dibuat</p> 
</body> 
</html> 
 
 
 
 
Gambar 8.7. Id dan Class Selector 
 
8.3.2.class Selectors 
class selectors digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan id 
selector,class selector paling sering digunakan pada beberapa elemen. 
Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk banyak elemen HTML dengan 
kelas yang sama. 
CATATAN PENTING: 
id class selector menggunakan atribut class html dan didefinisikan dengan 
menggunakan “.” 
Contoh program 
.center  
{ 
text-align:center; 
} 
<html> 
<head> 
<style type="text/css"> 
.center 
{ 
text-align:center; 
} 
</style> 
</head> 
<body> 
<h1 class="center">Center-aligned heading</h1> 
<p class="center">Center-aligned paragraph.</p> 
</body> 
</html> 
 
 
 
Gambar 8.8. Class Selector 
 
8.4 CSS Styling 
CSS dapat digunakan untuk mendefinisikan efek yang terjadi pada latar belakang dan elemennya. CSS 
properti yang digunakan untuk mengatur efek latar belakang: 
 background-color 
 background-image 
 background-repeat 
  background-attachment 
 background-position 
 
 
 
8.4.1.Background-color 
Properti background-color dapat digunakan untuk  menentukan elemen  dari warna latar belakang. 
 
<html> 
<head> 
<style type="text/css"> 
body 
{ 
background-color:#A9A9A9; 
} 
</style> 
</head> 
<body> 
<h1>Jurusan Teknik Informatika</h1> 
<p>universitas Komputer Indonesia</p> 
</body> 
 
</html> 
 
Gambar 8.9. Mengatur Warna Latar Belakang 
Untuk menentukan warna pada css dapat dilakukan dengan beberapa cara, yaitu: 
 Nilai HEXADESIMAL, contoh  "#ff0000" 
 Nilai RGB, contoh  "rgb(255,0,0)" 
 Nama warna, contoh “red" 
 
<html> 
<head> 
<style type="text/css"> 
h1 
{ 
background-color:#6495ed; 
} 
p 
{ 
background-color:#e0ffff; 
} 
div 
{ 
background-color:#b0c4de; 
} 
</style> 
</head> 
<body> 
<h1>Mengatur Warna Background dengan CSS!</h1> 
<div> 
VIRUS MALWARE TROJAN HORSE 
 
<p>Sebagai salah satu platform yang paling populer sejagat saat ini, ternyata telah 
membawa  Android ke sisi dimana harus dihadapkan pada permasalahan keamanan 
baru berupa munculnya  
ancaman virus Trojan Horse tangguh terbaru bernama Obad yang ditemukan  oleh 
Kaspersky baru-baru ini dan setidaknya harus segera ditanggulangi secepatnya. 
<p>sumber:http://www.beritateknologi.com</p> 
</div> 
</body> 
</html> 
 
 
Gambar 8.10.Mengatur Warna Background 
 
Kotak Transparan 
Saat menggunakan properti opasitas untuk menambahkan transparansi ke elemen 
latar belakang, semua elemen anaknya menjadi transparan juga. Ini dapat membuat 
teks di dalam elemen yang sepenuhnya transparan sulit dibaca: 
 
Namafile:css12.html 
<html> 
<head> 
<style> 
div { 
  background: rgb(0, 128, 0); 
} 
 
div.satu { 
  background: rgba(0, 128, 0, 0.1); 
} 
 
div.dua { 
  background: rgba(0, 128, 0, 0.3); 
} 
 
div.tiga { 
  background: rgba(0, 128, 0, 0.6); 
} 
</style> 
</head> 
<body> 
 
 
<h1>Transparent Box</h1> 
<p>With opacity:</p> 
 
<div style="opacity:0.1;"> 
  <h1>10% opacity</h1> 
</div> 
 
<div style="opacity:0.3;"> 
  <h1>30% opacity</h1> 
</div> 
 
<div style="opacity:0.6;"> 
  <h1>60% opacity</h1> 
</div> 
 
<div> 
  <h1>opacity 1</h1> 
</div> 
 
<p>With RGBA color values:</p> 
<div class="satu"> 
  <h1>10% opacity</h1> 
</div> 
 
<div class="dua"> 
  <h1>30% opacity</h1> 
</div> 
 
<div class="tiga"> 
  <h1>60% opacity</h1> 
</div> 
 
<div> 
  <h1>default</h1> 
</div> 
 
</body> 
</html> 
 
 
 
Gambar 8.11. Latar Belakang Warna dengan Opacity 
 
8.4.2. background-image 
Properti background-image dapat digunakan untuk  menentukan elemen  dari latar belakang dengan 
menggunakan Gambar. 
 
NamaFile:css13.html 
<html> 
<head> 
<style> 
body { 
  background-image: url("paper.gif"); 
} 
</style> 
</head> 
<body> 
 
<h1>Hello CSS!</h1> 
 
 
<p>Background Menggunakan Gambar</p> 
 
</body> 
</html> 
 
 
Gambar 8.12. Latar Belakang Gambar 
 
Background Gambar dapat juga digunakan untuk memberikan Latar Belakang 
gambar pada paragraph tertentu. 
 
NamaFile:css14.html 
<html> 
<head> 
<style> 
p { 
  background-image: url("paper.gif"); 
} 
</style> 
</head> 
<body> 
 
<h1>Hello CSS!</h1> 
 
<p>Paragrap Ini Menggunakan Latar Belakang Gambar!</p> 
 
</body> 
</html> 
 
 
 
 
 
 
Gambar 8.13. Paragraph dengan Latar Belakang Gambar 
 
 
 
8.4.3.background-repeat 
Secara default, properti gambar latar belakang mengulangi gambar baik secara 
horizontal maupun vertikal. 
 
Pengulangan Pada Bagian Horizontal 
NamaFile:css15.html 
<html> 
<head> 
<style> 
body { 
  background-image: url("gradient_bg.png"); 
  background-repeat: repeat-x; 
} 
</style> 
</head> 
<body> 
 
<h1>Hello CSS!</h1> 
<p>Latar Belakang Gambar hanya diulang pada bagian Horizontal!</p> 
<p>Latar Belakang Gambar hanya diulang pada bagian Horizontal!</p> 
<p>Latar Belakang Gambar hanya diulang pada bagian Horizontal!</p> 
<p>Latar Belakang Gambar hanya diulang pada bagian Horizontal!</p> 
</body> 
</html> 
 
 
 
 
Gambar 8.14. Latar Belakang Gambar dengan Repeat  
 
 
 
 
 
8.4.3.background-attachment 
Properti lampiran latar belakang menentukan apakah gambar latar belakang harus 
menggulir atau tetap (tidak akan menggulir dengan halaman lainnya): 
 
Namafile:css16.html 
<html> 
<head> 
<style> 
body { 
  background-image: url("img_tree.png"); 
  background-repeat: no-repeat; 
  background-position: right top; 
  margin-right: 200px; 
  background-attachment: fixed; 
} 
</style> 
</head> 
<body> 
 
<h1>The background-attachment Property</h1> 
 
<p>The background-attachment property specifies whether the background image should scroll or be 
fixed (will not scroll with the rest of the page).</p> 
 
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p> 
 
<p>The background-image is fixed. Try to scroll down the page.</p> 
<p>The background-image is fixed. Try to scroll down the page.</p> 
<p>The background-image is fixed. Try to scroll down the page.</p> 
<p>The background-image is fixed. Try to scroll down the page.</p> 
<p>The background-image is fixed. Try to scroll down the page.</p> 
 
<p>The background-image is fixed. Try to scroll down the page.</p> 
<p>The background-image is fixed. Try to scroll down the page.</p> 
<p>The background-image is fixed. Try to scroll down the page.</p> 
<p>The background-image is fixed. Try to scroll down the page.</p> 
<p>The background-image is fixed. Try to scroll down the page.</p> 
</body> 
</html> 
 
 
 
 
Gambar 8.15. Latar Belakang Gambar tidak ikut bergulir 
 
 
NamaFile:css17.html 
<html> 
<head> 
<style> 
body { 
  background-image: url("img_tree.png"); 
  background-repeat: no-repeat; 
  background-position: right top; 
  margin-right: 200px; 
  background-attachment: scroll; 
} 
</style> 
</head> 
<body> 
 
<h1>The background-attachment Property</h1> 
 
 
<p>The background-attachment property specifies whether the background image 
should scroll or be fixed (will not scroll with the rest of the page).</p> 
 
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the 
browser window.</p> 
 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
<p>The background-image scrolls. Try to scroll down the page.</p> 
 
</body> 
</html> 
 
 
 
 
 
 
Gambar 8.16. Latar Belakang Gambar ikut bergulir 
 
 
 
8.4.4.background - Shorthand 
Untuk mempersingkat kode, dimungkinkan juga untuk menentukan semua properti 
latar belakang dalam satu properti tunggal. Ini disebut properti singkat. 
 
Contoh: 
body { 
  background-color: #ffffff; 
  background-image: url("img_tree.png"); 
  background-repeat: no-repeat; 
  background-position: right top; 
} 
 
Dapat ditulis singkat menjadi: 
body { 
  background: #ffffff url("img_tree.png") no-repeat right top; 
} 
 
NamaFile:css18.html 
<html> 
<head> 
<style> 
body { 
  background: #ffffff url("img_tree.png") no-repeat right top; 
  margin-right: 200px; 
} 
</style> 
</head> 
<body> 
 
<h1>The background Property</h1> 
 
<p>The background property is a shorthand property for specifying 
all the background properties in one declaration.</p> 
 
<p>Here, the background image is only shown once, and it is also 
positioned in the top-right corner.</p> 
 
<p>We have also added a right margin, so that the text will not 
write over the background image.</p> 
 
</body> 
</html> 
 
 
 
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
 
 
TUGAS 8 
Untuk Modul 8 tidak ada tugas, pelajari,coba dan pahami materi css, agak ribet 
dikit,,, Tetep semangat belajar 
 


Pengenalan Css

Komputer Aplikasi IT I
Materi 9 Membahas form input tipe text dan membacaca variabelnya di javascrip

 
BAB 9 
Form HTML Input Type Text 
Pemrosesan dalam JavaScript 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
 
  
9.1.Membaca Data dari HTML ke 
JavaScript  
Pada materi ini akan dibahas bagaimana membaca data dari objek yang dituliskan di HTML 
kemudian dibaca di JavaScript. 
Untuk lebih Mudah dalam Mempelajari Proses Pembacaan data dari html dan 
menampilkannya dengan JavaScript dapat dilakukan dengan membuat sebuah file 
template.html yang nantinya dapat dijadikan acuan ketika akan membuat program 
dalam JavaScript yang memiliki Proses ke sebuah Function. 
1. Buat Sebuah Function dalam JavaScript 
2. Function dipanggil melalui button melalui method onclick, 
 
Berkut adalah kode program untuk template.html 
<form name=form> 
<script> 
function proses() 
{ 
  alert("Halo ini Java Script"); 
} 
 
</script> 
 
<html> 
<center> 
<h2>Judul Program 
<hr> 
<table> 
 Kode HTML di Sini 
</table> 
<hr> 
<input type=button value=Proses onclick="proses()"> 
<input type=reset value=Reset> 
 
 
 
Gambar 9.1. Keluaran template.html 
 
 
 
Gambar 9.2. Messagebox ketika tombol Proses di Click 
 
 
 
 
 
 
 
 
 
9.2.Membaca Data Bertipe Text  
Untuk membuat form masukan dengan tipe text dapat dilakukan dengan memberikan perintah 
dasar html berikut: 
 <input type=text name=namaobjek size=5> 
Lebih jelasnya berikut akan dibuat form masukan untuk menghitung Luas Persegi Panjang, 
dengan Input Panjang dan lebar serta hasil keluarannya adalah Luas. 
1. Buatlah design form masukan seperti gambar 9.1.  
 
Gambar 9.2.Design Form Objek Text 
 
2. Data contoh 
Tabel 9.1 Berikut merupakan contoh Data Masukan dan Hasilnya 
 Tabel 9.1. Data Masukan dan variabel 
 
Variabel Data Masukan Keluaran 
Panjang 100  
Lebar 50  
Luas Panjang*lebar 5000 
 
 
3. Code Program 
Berikut adalah code program untuk membuat form seperti gambar 5.2 diatas 
 
Nama File:textbox.html 
<form name=form> 
<script> 
function proses() 
{ 
var panjang=document.form.panjang.value; 
var lebar=document.form.lebar.value; 
var luas=panjang*lebar; 
document.form.luas.value=luas; 
} 
</script> 
 
 
<html> 
<center> 
<font size=4> 
Menghitung Luas Persegi Panjang 
<hr> 
<table> 
<tr><td>Panjang<td><input name=panjang size=5> 
<tr><td>Lebar<td><input name=lebar size=5> 
<tr><td colspan=2><hr> 
<tr><td>Luas<td><input name=luas size=5> 
</table> 
<hr> 
<input type=button value="Proses" onclick="proses()"> 
<input type=reset value="Reset"> 
</html> 
 
4. Skenario Pengujian 
Untuk menguji Program apakah sesuai dengan yang diharapkan dapat dilakukan 
dengan cara pengujian sebagai berikut: 
1) Jalankan Program textbox.html 
2) Akan ditampilkan Form seperti gambar 5.2 
3) Isi Kolom Panjang dan Lebar, Panjang diisi angka 100 dan lebar diisi angka 50, 
kemudian click tombol Proses 
4) Program akan melakukan proses perkalian antara Panjang*Lebar, sehingga pada 
Kolom Luas akan ditampilkan angka 5000 
5) Jika Luas  yang ditampilkan sesuai dengan tabel 9.1 diatas, maka program sudah 
sesuai dengan yang diharapkan 
6) Jika Form masukan tidak di isi maka akan ditampilkan hasil seperti gambar 9.4 
 
Gambar 9.3.Tampilan Layar ketika panjang dan lebar diisi data 
 
 
 
 
Gamar 9.4.Tampilan Layar ketika Panjang dan Lebar tidak diisi 
  
 
Tugas 9.1  
Buat Program untuk menghitung Gaji Pegawai dengan Design  Form Seperti gambar 9.5 berikut: 
 
Dengan Input Nama Pegawai, Jamkerja, upahperjam dan jumlah anak. 
sedangkan outputnya Gaji Perbulan, Tunjangan Anak, Gaji Total sebulan, PPH10% dan Gaji Bersih 
diterima 
 
 
 
Gambar 9.5. Design Form Program Gaji Pegawai 
Note: 
*1 minggu 5 hari kerja 
*1 Bulan 4 Minggu 
*Tunjangan Anak 10% Tiap Anak  dari Gaji  
 
 
 
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 File: Tugas9-nama-nim-kelas.pdf 
Dikumpulkan Paling Lambat Setiap Hari Minggu Jam 18:00 
 
Ok…selamat mencoba 
 
 
PUSTAKA 
 
1. Suryana, Taryana (2022) Penggunaan Array Dan Methode Array Dalam Java Script. [Teaching 
Resource] 
2. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
3. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
4. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
5. Suryana, Taryana (2022) Pengenalan Dasar Pemrograman Java Script. [Teaching Resource] 
6. Suryana, Taryana (2022) Fungsi Logika Atau Pecabangan Dalam Javascript. [Teaching Resource] 
7. Suryana, Taryana (2022) Operator Dalam Php Dan Mysql. [Teaching Resource] 
8. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
9. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
10. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
11. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
12. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
13. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
14. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
15. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching Resource] 
16. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
17. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
18. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
19. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
20. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
21. https://www.w3schools.com/  September, 2021 
22. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
23. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
24. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
25. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 


Membaca Form Dari Html Ke Java Script

Komputer Aplikasi IT II 
Materi ini membahas mengeni penggunaan button untuk navigasi halaman dalam fram

 
 
MENU FRAME DENGAN W3.CSS 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
11. Membuat Menu Dengan W3.CSS  
Untuk membuat menu dalam pembuatan Web, dapat dilakukan dengan 
menggunakan class="w3-btn” 
Adapun sintak dasarnya adalah sebagai berikut: 
<a href="#" class="w3-btn w3-lime" style="width:10%">Link </a> 
 
Misal akan dibuat Menu Website seperti berikut: 
 
 
 
 
11.1.Buat Frame 
Untuk membuat tampilkan seperti diatas, pertama buat frame dengan bentuk kolom, dengan 
ukuran, sebelah kiri 20% dan sebelah kanan sisanya 
 
Pertama Buat Frame dulu, yaitu dengan membagi lagi layar menjadi 2 Bagian 
NamaFile:frame.html 
<frameset cols="20%,*"> 
   <frame src="menubar.html"> 
   <frame src="welcome.html" name="welcome"> 
</frameset> 
 
 
Kemudian buat file kedua yaitu:  
Namafile:menubar.html 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-container"> 
 <center><h2>MENU</h2> 
 <a href="welcome.html" target="welcome" class="w3-btn w3-lime" style="width:200px">Home </a> 
<hr> 
<a href="profile.html" target="welcome"  class="w3-btn w3-red" style="width:200px">Profile</a> 
<hr> 
<a href="#" class="w3-btn w3-orange" style="width:200px">Pendidikan</a> 
<hr> 
<a href="#" class="w3-btn w3-indigo" style="width:200px">Hoby</a> 
<hr> 
<a href="#" class="w3-btn w3-pink" style="width:200px">Teman</a>  
</div> 
</body> 
</html> 
 
Kemudian buat file ketiga yaitu: 
Namafile:welcome.html 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
<center> 
<div class="w3-card-4"> 
 
<header class="w3-container w3-blue"> 
  <h1>Belajar Membuat Web</h1> 
</header> 
 
<div class="w3-container"> 
  <p>Lorem ipsum...</p> 
  <img src="images/unikom-du.jpg" style="width:100%;max-width:600px"> 
</div> 
<hr> 
 
 
<footer class="w3-container w3-blue"> 
  <h5>Unikom Bandung</h5> 
</footer> 
</div> 
 
 
 
11.2.Menjalankan Program 
Untuk menjalankan Program, buka file frame.html dengan menggunakan browser, 
selanjutnya akan ditampilkan hasil seperti berikut: 
 
 
 
 
11.3. Membuat Isi Halaman Link 
Pada contoh menu diatas terdapat 5 buah menu atau link, yaitu Home, Profile, Pendidikan, 
Hoby dan Teman 
Langkah berikutnya adalah membuat masing-masing file yang akan dilink tersebut, Misalnya 
NamaFile:profile.html 
<html> 
<center> 
<h1>Profile</h1> 
<hr> 
<img src="images/fahra.jpg"> 
<hr> 
<table> 
<tr><td>Nama Lengkap<td>Fahra Ragita Musyafa 
 
<tr><td>Asal Sekolah<td>SMA NEGERI 3 BANDUNG 
<tr><td>Jurusan<td>Psikologi 
<tr><td>Perguruan Tinggi<td>Unpad 
<tr><td> 
</table> 
<hr> 
 
 
Ulangi Langkah tersebut untuk membuat file lainnya, isinya bisa 
disesuakan dengan keinginan anda. 
Contoh jika tombol Profile di Click, maka pada halaman welcome akan 
ditampilkan isi dari Profile yang Anda Buat 
 
 
 
Ok, silahkan link lainnya dibuat, sampai semua tombolnya berfungsi 
 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2022) Membuat Form Dengan Html5. [Teaching Resource] 
2. Suryana, Taryana (2022) Membuat Tabel Pada Html. [Teaching Resource] 
3. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
4. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
5. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
6. Suryana, Taryana (2022) W3.css Animation Effect. [Teaching Resource] 
7. Suryana, Taryana (2022) W3.css Navigation Dan Javascript. [Teaching Resource] 
8. Suryana, Taryana (2022) Membuat Form Atau Formulir Input Dengan W3 Css. [Teaching 
Resource] 
9. Suryana, Taryana (2022) Membuat Program Hapus Data Akta Perkawinan. [Teaching Resource] 
10. Suryana, Taryana (2022) Membuat Program Untuk Menghapus Data Barang. [Teaching 
Resource] 
 
11. Suryana, Taryana (2022) Membuat Form Input Dan Label Dengan W3 Css. [Teaching Resource] 
12. Suryana, Taryana (2021) Menggunakan W3 Css Display Dan Layout. [Teaching Resource] 
13. Suryana, Taryana (2020) Pertemuan 10 W3.css Framework. [Teaching Resource] 
14. Suryana, Taryana (2021) Pengenalan Css Cascading Style Sheet. [Teaching Resource] 2. 
15. Suryana, Taryana (2021) Penggunaan Css Dalam Html. [Teaching Resource] 3. Suryana, 
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 
36. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
37. Suryana, Taryana (2021) Membuat Form Input Data Dengan Menggunakan Html Dan Html5 Kelas 
Ts-2021-1. [Teaching Resource] 
38. Suryana, Taryana (2021) Membuat Formulir Input Data Dengan Html Dan Html5 Kelas Pwk-2021-
1. [Teaching Resource] 
39. Suryana, Taryana (2021) Membuat Form Atau Formulit Input Data Dengan Html Dan Html5 Kelas 
If3-2021-1. [Teaching Resource] 
40. Suryana, Taryana (2021) Membuat Formulir Atau Form Dengan Html Dan Html5 Kelas If2-2021-
1. [Teaching Resource] 
 
 
 


Navigasi Menu Dengan W3 Css

GEOLOGI LINGKUNGAN
Kunjungan Museum Geologi Bandun

Kuliah Online, Arsip

UNIKOM PWK 2021
Onsite / VirtuaL
KUNJUNGAN MUSEUM 
GEOLOGI
TIM PERJALANAN
2
6 MAHASISWA LURING : 
PEMANDU
10 MAHASISWA DARING :
PEMERHATI
10 orang Mahasiswa Daring di
bagi ke dalam 6 Tim 
mahasiswa Luring.
6 Mahasiswa luring memiliki
Tim sekitar 1/2 orang dari
mahasiswa daring
TUGAS
3
LURING :
MEMBANTU REKAMAN 
ONLINE 
DARING :
MEMPERHATIKAN 
REKAMAN ONLINE 
TUGAS KESELURUHAN :
MENCATAT, FOTO/VIDEO SESUATU YG MENARIK DISETIAP 
SEASON.
DALAM SEBUAH VIDEO DAN CATATAT
MEDIA YG DIGUNAKAN
CATATAN :
- BOLEH MEMAKAI MCR.WORD/PPT
DLL YG MENUNJANG DAN TERBACA
OLEH DOSEN.
- TULISAN BEBAS.
- KARAKTER ISI BEBAS, DENGAN 
SYARAT BERKAITAN. 
VIDEO :
- BOLEH MENGGUNAKAN APLIKASI
APAPUN YG MENUNJANG DAN BISA
DI PUTAR.
- MIN DAN MAX.DURASI : 1 MENIT.
- PENGUCAPAN BAHASA BEBAS, 
TETAP SOPAN.
- BOLEH MENGGUNAKAN MUSIC.
- MENARIK.
4
5
PENGUMPULAN TUGAS
TUGAS DIKUMPULKAN KE LEADER CLASS DALAM 1 
FOLDER DAN DIKIRIM EMAIL KE examutsuas@gmail.com 
PALING LAMBAT TGL 17 NOV 2021 PKL. 06.00 SUDAH ADA
TERKIRIM KE EMAIL
Tugas Bersifat Santai, Maka Kerjakan dalam Keadaan sehat,
Bahagia dan menyenangkan.
Silangkan Menghubungi dosen bersangkutan jika masih
belum paham.
6
THANKS
7


Pertemuan 7 : Kunjungan Museum Geologi

GEOLOGI LINGKUNGAN
Explore Geologi Geopark Ciletu

LAPORAN TUGAS KELOMPOK  
GEOLOGI LINGKUNGAN  
 
GEOPARK CILETUH-PALABUHANRATU 
 
 
oleh: 
Kelompok 4 
 
Ghea isabella ohoitimur(10618801) 
Livania Marques Belo(10619027) 
Chaidir Firmansyah antuli(10620008) 
Deritama Ramadhani Salampessy(10620011) 
 
 
Kata pengantar  
Puji dan syukur ke hadirat Tuhan yang maha kuasa atas segala rahmat yang diberikan-Nya sehingga 
tugas laporan kami ini dapat terselesaikan dengan baik dan tepat waktu.Laporan ini dibuat sebagai 
kewajiban untuk memenuhi tugas kelompok mata kuliah Geologi Lingkungan.Kami menyadari masih 
ada kekurangan baik dari sisi susunan kalimat maupun tata bahasanya.oleh karena itu dengan tangan 
terbuka kami menerima segala saran dan kritik dari teman-teman.Akhir kata kami berharap semoga isi 
dari laporan ini dapat memberikan manfaat bagi teman-teman semua yang membacanya. 
 
 
Sejarah terbentuk  
  kala itu kawasan Ciletuh masih dikelilingi oleh hutan belantara. Konon untuk memasuki 
kawasan tersebut hanya bisa ditempuh melalui jalur laut. "Tak ada yang berani masuk ke 
Ciletuh melalui jalur darat. Satu-satunya pintu masuk menuju kawasan itu hanya melalui 
laut saja,Di tahun 1890 - 1923, terdapat kapal uap yang khusus melayani perjalanan laut 
untuk rute Pelabuhanratu-Ciletuh. Seiring waktu, bangsa Belanda mulai membuka kawasan 
perkebunan di sekitar Ciletuh. Sejak saat itulah, tidak sedikit orang yang mulai berani 
memasuki Ciletuh melalui jalur darat. Perlintasan menuju obyek wisata Ciletuh kian ramai 
setelah adanya tempat berburu yang dibuka di kawasan Cikepuh atau dahulu dikenal 
dengan Cibanteng.Kawasan Ciletuh pernah dijadikan sebagai pusat bisnis bangsa Belanda, 
salah satunya dengan dibangun perusahaan yang bergerak di bidang pengolahan kelapa. 
Bahkan Ciletuh juga menjadi destinasi wisata yang banyak dikunjungi wisatawan luar 
negeri.Kala itu mereka menamakannya sebagai Bale Kambang. Di sekitar Ciletuh juga dibuka 
taman bunga untuk melengkapi keindahan perpaduan alam berupa areal persawahan 
dengan banyaknya air terjun, salah satunya Cimarinjung. 
 
Proses geologi 
Kawasan Ciletuh mempunyai karakteristik struktur yang khas dan secara umum tidak 
terlepas dari kegiatan proses tektonik regional Jawa Barat, yang merupakan fosil tektonik 
(subduksi pada jaman Kapur). Sehingga menjadikan singkapan geologi di kawasan Ciletuh ini 
sangat unik dan langka. 
Mekanisme pembentukan struktur geologi Jawa Barat terjadi secara simultan di bawah 
pengaruh aktivitas tumbukan lempeng Hindia-Australia dengan lempeng Eurasia yang 
berlangsung sejak Zaman Kapur hingga sekarang. Posisi jalur tumbukan (subduction zone) 
dalam kurun waktu tersebut telah mengalami beberapa kali perubahan. Jalur paleo subduksi 
Jawa (subduksi tua) diketahui berdasarkan pemunculan batuan melange berumur Kapur 
yang tersingkap di beberapa tempat. Batuan melange.merupakan batuan campur aduk yang 
pembentukannya berasal dari zona subduksi. Di Pulau Jawa hanya ada tiga lokasi yang 
memiliki jenis batuan tersebut, yaitu di daerah Ciletuh, Sukabumi-Jawa Barat, daerah 
Karangsambung, Kebumen-Jawa Tengah dan daerah Bayat, Klaten-Yogyakarta. Berdasarkan 
pada posisi singkapan batuan melange tersebut, Katili (1973) menarik jalur subduksi melalui 
ketiga daerah tersebut, yang pada saat ini berada di poros tengah Pulau Jawa sekarang. 
Selanjutnya penulis ini menggambarkan jalur paleo subduksi Jawa menerus ke daerah 
Meratus, Kalimantan Timur, karena di daerah ini dijumpai pula batuan melange yang 
berumur sama. 
 
 
Bentang alam dan jenis batuan 
 
Kawasan Geopark Ciletuh menawarkan bentang alam yang indah dan masuk dalam 
keragaman geologi. 
Terdapat beberapa Bentang alam yang indah di pulau ciletuh seperti: 
● Pulau-pulau Kecil 
●  Gua  
● Air Terjun 
● Pantai/laut 
● Geyser 
● Bukit dll. 
 
Selain amphitheater,salah satu yang menjadi daya tarik lain yakni adanya sembilan air terjun 
di kawasan Geopark Ciletuh-Palabuhanratu.Ke sembilan air terjun ini bisa dengan mudah 
dilihat pengunjung karena lokasinya sebagian berada di pinggir jalan. Air terjun itu 
yakni:Curug Cimarinjung, Cikanteh, Awang, Cikaret, Luhur, Puncak Jeruk, Puncak Manik, 
Sodong, dan Curug Tengah. 
 
Keunikan lainnya yang ada di Geopark Ciletuh berupa bebatuan unik yang langka,berada di 
pantai pulau-pulau kecil di kawasan tersebut. Di sepanjang pesisir pantai antara Cikadal, 
Batununggul hingga Cikepuh terdapat sejumlah objek batuan yang berbentuk unik 
menyerupai berbagai jenis binatang kodok, kepala badak, kerbau, buaya, kepala komodo, 
naga, kepala singa, kepala elang dan pagar serta motif lainnya seperti batik. 
Batuan unik ini  merupakan batuan sedimen berjenis batupasir kuarsa sebagai bagian dari 
Formasi Ciletuh yang berumur lebih dari 45 juta tahun yang diendapkan di  dalam laut. 
Terdapat singkapan batuan tertua berumur lebih dari 60 tahun, berupa batuan langkah yang 
berasal dari mantel bumi berupa ofiolit: (Ophiolite: Peridotit,gabro,plagiogranit/anortosit,lava 
bantal);Batuan Metamorf(Serpentinit,amfibolit,sekis mika dan sekis hijau);Batuan Melange. 
Terdapat Keragaman geologi di bagian selatan Geopark Ciletuh-Palabuhanratu meliputi 
bebatuan purba yang terhampar di kawasan pesisir.  
 
Flora dan Fauna  
Terdapat beberapa jenis Flora dan fauna. 
Seperti pepohonan,Tanaman lainnya dan salah satunya Jenis tanaman langka "Rafflesia 
Patma"yang beberapa saat lalu ditemukan di Hutan Cadangan Cipeucang Geopark Ciletuh 
Palabuhanratu,Bunga Bangkai,dan keanekaragaman dan kelimpahan Makroalga dan 
tumbuhan Mangrove dll. 
 Selain Bunga Bangkai yang terbilang langka, di hutan Cipeucang juga dapat ditemui 
beberapa  hewan langkah lainnya. 
 
Hutan Cadangan Cipeucang dan sekitarnya terdapat beberapa Tumbuhan dan Hewan 
langka yang hampir punah diantaranya Hewan jenis Jeralang yang hanya tinggal 1 ekor, 
Elang Jawa 4 ,ada Juga Buaya dan hiu bentang dll. 
 
Analisis rentan bencana  
*Kecamatan Ciemas 
1. Banjir lima titik 
– Jalan Cidahon Desa Mekarsakti 
– Kampung Cimalim, Desa Ciemas 
– Kampung Cipicung, Desa Ciwaru 
– Curug Marinjung 
– Kampung Cihuni Desa Ciwaru 
2. Longsor empat titik 
– Jalan Cipeucang, Desa Tamanjaya 
– Cibatu Desa Girimukti 
– Batu Cakup Desa Ciemas 
– Pasir Muncang Desa Girimukti 
* Kecamatan Simpenan 
1. Angin kencang satu titik 
– Kampung Tanjankan sampai Desa Loji 
* Kecamatan Waluran 
1. Banjir satu titik 
– Ruas jalan Waluran – Mareleng – Palangpang 
* Kecamatan Cisolok 
– Longsor satu titik 
– Kampung Cikiray Desa Sirnaresmi 
 
 
Pemanfaatan lahan 
Menurut, PERDA PROVINSI JAWA BARAT NOMOR 22 TAHUN 2010 TENTANG RENCANA TATA 
RUANG WILAYAH PROVINSI JAWA BARAT TAHUN 2010-2029 : 
● Kawasan Lindung Geologi terdiri dari kawasan konservasi lingkungan geologi, kawasan rawan 
bencana alam geologi, dan kawasan yang memberikan perlindungan terhadap air tanah. 
● Kawasan Geologi Ciletuh adalah kawasan cagar alam geologi yang merupakan turunan dari 
kawasan konservasi lingkungan geologi di Kabupaten Sukabumi. 
● Sehingga menurut Pasal35 RTWP Provinsi Jawa Barat, Geopark Ciletuh merupakan bagian 
dari Kawasan lindung geologi. 
 
Terdapat tiga pemanfaatan lahan di Kawasan geopark ciletuh terlihat pada gambar : 
 
1. Cisolok geoare 
2. Jampang geoarea 
3. Ciletuh geoarea 
 
Di Dalamnya terdapat : 
a. Area Konservasi:  
● SM Cikepuh 
● CA Cibanteng 
● Penyu Pangumbahan Situs Budaya 
b. Area Budidaya: 
● Tambak 
● Perkebunan 
● Pertanian 
● Pemukiman 
● Hutan Produksi 
c. Area Khusus: 
● Kawasan Latihan KOSTRAD 
d. Area Pengembangan 
● Wisata 
● Pantai / Laut 
● Curug/ Air Terjun 
● Agrowisata 
● Wisata Budaya 
 
Kondisi alam yang unik 
Kawasan Geopark Ciletuh menawarkan bentang alam yang indah dan masuk dalam 
keragaman geologi. Di mana warga bisa melihat pemandangan di daerah tinggi dengan 
lembah berbentuk tapal kuda yang terbuka ke arah laut sehingga membentuk seperti 
panggung alam atau disebut amfiteater. Bentuk amfiteater ini memiliki diameter lebih dari 15 
kilometer sehingga dinilai sebagai bentuk amfiteater alam terbesar di Indonesia. Keindahan 
amfiteater dan Teluk Ciletuh dapat di lihat dari daerah Panenjoan di Desa Tamanjaya, 
Pamoyanan di Desa Ciemas, Puncak Darma dan Cikalapa di Desa Girimukti. keindahan alam 
di kawasan geopark cukup lengkap mulai dari pemandangan bentang alam, air terjun atau 
curug, pantai, pegunungan, dan batuan unik yang langka. Selain amfiteater, salah satu yang 
menjadi daya tarik lain yakni adanya sembilan air terjun di kawasan Geopark Ciletuh-
Palabuhanratu. Ke sembilan air terjun ini bisa dengan mudah dilihat pengunjung karena 
lokasinya sebagian berada di pinggir jalan. Air terjun itu yakni Curug Cimarinjung, Cikanteh, 
Awang, Cikaret, Luhur, Puncakjeruk, Puncakmanik, Sodong, dan Curug Tengah. Keunikan 
di geopark lainnya berupa bebatuan unik langka yang berada di pantai pulau-pulau kecil di 
kawasan tersebut. Di sepanjang pesisir pantai antara Cikadal, Batununggul hingga Cikepuh 
terdapat sejumlah objek batuan yang berbentuk unik menyerupai berbagai jenis binatang 
kodok, kepala badak, kerbau, buaya, kepala komodo, naga, kepala singa, kepala elang dan 
pagar serta motif lainnya seperti batik. Batuan unik ini terang Dana merupakan batuan 
sedimen berjenis batupasir kuarsa sebagai bagian dari Formasi Ciletuh yang berumur lebih 
dari 45 juta tahun yang diendapkan di laut dalam. Untuk bisa melihat secara dekat 
pengunjung dapat menggunakan perahu sekitar 30 menit dari Pantai Palangpang, Ciemas. 
Selain itu terdapat pula kawasan konservasi Penyu di Pantai Pangumbahan 
 
Mitos/budaya 
kawasan Geopark Ciletuh-Palabuhanratu juga tidak kalah menarik. Mulai dari upacara adat 
yang disebut Pesta Laut atau Hajat Laut sebagai rasa syukur atas hasil laut yang melimpah. 
Berikutnya pertunjukan kesenian yang sering ditampilkan dalam upacara hajat laut maupun 
festival Ciletuh seperti Gondang, Buncis, Angklung Geblug, Reog, Calung, Gendang Penca, 
Degung, Badawang, Kuda Lumping, Wayang Golek, serta seni beladiri Pencak Silat 
 
Harapan  
Untuk diketahui, wisata Geopark Ciletuh di Sukabumi Jawa Barat memperoleh pengakuan 
Unesco Global Geopark berdasarkan tiga unsur, antara lain geodiversity, biodiversity, dan 
culture diversity. Semua unsur tersebut dianggap sangat mendukung menjadikan kawasan 
wisata geopark ciletuh pelabuhan ratu untuk dijaga kelastariannya. Pengakuan Geopark 
Ciletuh sebagai Kawasan yang dilindungi dunia tentu tidak lepas dari peran masyarakat yang 
hidup di dalamnya. Jadi kita sebagai masyarakat dan pengunjung harus wajib menjaga alam 
sekitar tempat wisata dengan tidak membuang sampah sembarangan, Merusak Fasilitas 
Wisata dan patuhi setiap aturan yang ada di tempat wisata geopark ciletuh. 
 
 
 
 
 
 
 
 
 


Pertemuan 15 : Explore  Geopark Ciletuh

HUKUM PERLINDUNGAN KONSUMEN
Sdr diskusikan apa yang dimaksud dengan klausula eksonerasi dalam perjanjian standar dan bagaimana pengaturan tentang klausula baku (klausula eksonerasi) perjanjian standar tersebut dalam UUPK

 
 
Latihan 
PERJANJIAN STANDAR SERTA PRAKTEK PERIKLANAN DAN 
PERLINDUNGAN KONSUMEN 
Klausula Eksonerasi Yang Merugikan 
Dalam rangka memberi hadiah kepada Ariel saudara sepupunya yang akan berulang 
tahun di Jakarta, Luna yang bertempat tinggal di Kawasan Kuta, Badung sengaja 
memberikan sebuah Kamera Digital seharga Rp 5.000.000,-. Kamera tersebut dikirim 
ke Jakarta melalui PT. Bawain, perusahaan jasa yang bergerak dibidang pengiriman 
barang, dengan ongkos kirim sebesar Rp. 150.000,- 
Tiga hari kemudian, kamera hadiah ulang tahun tersebut telah diterima oleh Ariel 
sesuai dengan perjanjian baku (standar) yang telah ditandatangani antara Luan dengan 
perusahaan jasa pengiriman barang tersebut.  Namun sayang, ternyata kamera 
tersebut rusak (ringsek) karena kesalahan perusahaan, sehingga tidak bisa fungsikan 
lagi. Atas kejadian itu Luna merasa dirugikan, dan  kemudian pihak perusahaan 
memberikan ganti rugi kepada Luna maksimal 10 x ongkos kirim yaitu sebesar 
Rp.1.500.000,- sesuai dengan klausula eksonerasi (Exemption  clause)  yang terdapat 
dalam perjanjian baku pengiriman barang. 
Sdr diskusikan apa yang dimaksud dengan klausula eksonerasi dalam perjanjian 
standar dan bagaimana pengaturan tentang klausula baku (klausula eksonerasi) 
perjanjian standar tersebut dalam UUPK. 
Pertanyaan : 
1) Jelaskan tentang pengertian dan karakteristik dari perjanjian standar ? dan apa 
bedanya dengan perjanjian pada umumnya ? 
2) Apa yang dimaksud dengan Klausula Eksonerasi dalam perjanjian standar ? 
Jelaskan dan  berikan  contoh kongkrit ! 
3) Bagaimana pengaturan perjanjian standar  (Klausula Baku) dalam UUPK ? 


P-14 Mareri 13 : Kasus Klausula Eksonerasi

Pemrograman Web 2
Materi 12 Membahas mengenai pembuatan program untuk Edit Data kedalam tabel barang, menggunakan perintah sql Inser

 
 
 
Melakukan Edit  atau Perubahan Data 
 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081321480577 
 
12.Edit  Data Barang 
Pada bagian ini akan dibahas mengenai bagaimana membuat program untuk 
melakukan perubahan atau edit pada data yang sudah ada dalam database atau 
tabel. 
 
Adapun file yang akan digunakan dan dibuat yaitu: 
1. editbarang.html 
2. carieditbarang.php 
3. Saveeditbarang.php 
 
 
12.1. Membuat form Edit Barang 
Buat form untuk memasukan data barang yang akan di edit, seperti berikut: 
 
NamaFile:editbarang.html 
 
<form action="carieditbarang.php" method=post> 
<center> 
<h1> 
FORM EDIT DATA BARANG 
<hr> 
<table> 
<tr><td>KODE BARANG<td><input name=kodebrg size=5> 
</table> 
<hr> 
<input type=submit value=Cari> 
<input type=reset value=Reset> 
 
 
 
12.2.Membuat Program Cari Edit Data Barang 
Program ini berfungsi untuk melakukan pencarian data kedalam database, jika data 
yang dicari ada maka data tersebut akan ditampilkan kelayar dan sekaligus dapat 
melakukan perubahan data pada form tersebut. 
 
NamaFile:CARIEDITBARANG.PHP 
<h1> 
<form action="saveeditbarang.php" method=post> 
<center> 
MENAMPILKAN DATA BARANG 
<hr> 
<table border=0> 
<?php 
$kode=$_POST['kode']; 
$conn=mysqli_connect("localhost","root","","IF"); 
$sql="select * from barang where kode='$kode' "; 
$hasil=mysqli_query($conn,$sql); 
$row=mysqli_fetch_row($hasil); 
do 
{ 
list($kode,$nama,$harga,$jumlah)=$row; 
echo "<tr><td>KODE BARANG<td><input name=kode value='$kode' size=5 readonly>"; 
echo "<tr><td>NAMA BARANG<td><input name=nama value='$nama' size=30>"; 
echo "<tr><td>HARGA<td><input name=harga value='$harga' size=10>"; 
echo "<tr><td>STOK<td><input name=jumlah value='$jumlah' size=3>"; 
} 
while($row=mysqli_fetch_row($hasil)); 
?> 
</table> 
<hr> 
<input type=submit value=Save> 
<input type=reset value=Reset> 
 
 
 
12.3. Menyimpan Hasil Edit Data Barang 
Untuk menyimpan hasil perubahan data kedalam database, selanjutnya dibuat 
program untuk meyimpan datanya. 
 
File SAVEEDITBARANG.PHP berfungsi untuk menangani proses penyimpanan data 
yang dimasukan dari form CARIEDITBARANG.PHP kedalam tabel Barang. 
 
NamaFile:Saveeditbarang.php 
<h1> 
<center> 
Save EDIT Data Barang 
<hr> 
<table> 
<?php 
$kode=$_POST['kode']; 
$nama=$_POST['nama']; 
$harga=$_POST['harga']; 
$jumlah=$_POST['jumlah']; 
echo "<tr><td>KODE<td>$kode"; 
echo "<tr><td>NAMA BARANG<td>$nama"; 
echo "<tr><td>HARGA<td>$harga"; 
echo "<tr><td>JUMLAH<td>$jumlah"; 
 
$conn=mysqli_connect("localhost","root","","IF");  
$sql="update barang set nama='$nama',harga='$harga',jumlah='$jumlah' where 
kode='$kode' "; 
$hasil=mysqli_query($conn,$sql); 
echo "</table><h1><hr>Data Barang Telah di Simpan"; 
?> 
 
 
12.4.Menampilkan Hasil Via Browser 
Setelah  Ketiga program dibuat yaitu editbarang.html, carieditbarang.php dan 
saveeditbarang.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/NamaFolder 
3.Click File editbarang.html 
 
Gambar 12.1. Menampilkan Form Pencarian Barang 
 
4.Click tombol Cari, pada contoh ini yang masukan adalah kode barang B001, 
selanjutnya akan ditampilkan hasil seperti berikut: 
 
 
 
Gambar 12.2. Menampilkan Form Edit Barang 
 
Lakukan perubahan data pada Nama Barang, Harga dan Stok, misalnya Harga 
dirubah menjadi 6000000 dan Stok menjadi 25 
 
 
 
 
Gambar 12:3. Menyimpan Data Kedalam Tabel Barang 
 
 
Setelah proses ini Data Barang yang ada di dalam database atau table akan 
terupdate. 
Berikut adalah contoh hasil perubahan data tersebut jika ditampilkan di phpmyadmin. 
 
 
Gambar 12.4. Browse Tabel Barang 
 
Sampai tahap ini pembuatan program untuk edit data barang telah selesai dan sesuai 
dengan yang diharapkan diawal materi. 
 
 
 
 
 
 
 
PUSTAKA 
 
1. Suryana, Taryana (2022) Navigasi Menu Dengan W3 Css. [Teaching Resource] 
2. Suryana, Taryana (2022) Pengelolaan Database Dan Structure Query Language. [Teaching 
Resource] 
3. Suryana, Taryana (2022) Objek Tipe Checkbox Dan Radio. [Teaching Resource] 
4. Suryana, Taryana (2022) Objek Tipe Select Dan Text Area. [Teaching Resource] 
5. Suryana, Taryana (2022) Membaca Form Dari Html Ke Java Script. [Teaching Resource] 
6. Suryana, Taryana (2022) W3 Css Display, Layout, Button. [Teaching Resource] 
7. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
8. Suryana, Taryana (2022) Gambar Pendukung Meteri Css. [Teaching Resource] 
9. Suryana, Taryana (2022) Pengenalan Css. [Teaching Resource] 
10. Suryana, Taryana (2022) W3.css Display Dan Button. [Teaching Resource] 
11. Suryana, Taryana (2022) Navigasi Menu Dengan W3 Css. [Teaching Resource] 
12. Suryana, Taryana (2022) Materi 3. Operator Dalam Php. [Teaching Resource] 
13. Suryana, Taryana (2022) Materi 3. Membuat List Atau Daftar Dalam Html. [Teaching Resource] 
14. Suryana, Taryana (2022) Fungsi Logika Atau Percabangan. [Teaching Resource] 
15. Suryana, Taryana (2022) Pengenalan Dasar Pemrograman Java Script. [Teaching Resource] 
16. Suryana, Taryana (2022) Fungsi Logika Atau Pecabangan Dalam Javascript. [Teaching Resource] 
17. Suryana, Taryana (2022) Operator Dalam Php Dan Mysql. [Teaching Resource] 
18. Suryana, Taryana (2021) Edit Data Pada Aplikasi Ijin Gangguan Ho. [Teaching Resource] 
19. Suryana, Taryana (2021) Pembuatan Aplikasi Ijin Gangguan Ho Dengan Php Dan 
Mysql. [Teaching Resource] 
20. Suryana, Taryana (2021) Fungsi Logika Dalam Pemrograman Php Dan Mysql. [Teaching 
Resource] 
21. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data Member. [Teaching Resource] 
22. Suryana, Taryana (2021) Instalasi Xampp Untuk Menjalankan Web Server Apache Database 
Mysql Dan Program Php. [Teaching Resource] 
23. Suryana, Taryana (2021) Membuat Formulir Pemasukan Data Dengan Html Dan Html5 Kelas If-
wa1-ul2-2021. [Teaching Resource] 
24. Suryana, Taryana (2021) Berbagai Macam Operator Dalam Php Dan Mysql. [Teaching Resource] 
25. Suryana, Taryana (2021) Instalasi Xampp Untuk Pemrograman E-commerce. [Teaching 
Resource] 
26. Suryana, Taryana (2021) Pengenalan E-commerce. [Teaching Resource] 
27. Suryana, Taryana (2021) Membuat Database. [Teaching Resource] 
28. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan HTML, CSS & Java Script, 
Elexmedia Komputindo, Jakarta 
29. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan Menggunakan Html Dan 
Dreamweaver. [Teaching Resource] 
30. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan HTML., Gava Media, Jogyakarta 
31. https://www.w3schools.com/  September, 2021 
32. Suryana, Taryana; Sarwono, Jonathan. E-Commece Menggunakan PHP & MySQL, Graha Ilmu, 
Jogyakarta 
33. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser Dan Text Editor. [Teaching 
Resource] 
34. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, 
Jogyakarta 
35. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-231.pdf 
 
 
 
 


Not a member yet

Instalasi Xampp Untuk Menjalankan Webserver Apache Dan Mysql

Instalasi Xampp Untuk Menjalankan Webserver Apache Dan Mysql

Pengenalan Variabel Dalam Php, Dan Penanganan Input Dan Output Dalam Php

Pengenalan Css

Membaca Form Dari Html Ke Java Script

Navigasi Menu Dengan W3 Css

Pertemuan 7 : Kunjungan Museum Geologi

Pertemuan 15 : Explore Geopark Ciletuh

P-14 Mareri 13 : Kasus Klausula Eksonerasi

Membuat Program Edit Atau Perubahan Data Pada Tabel

15,029

70,114