Repository Universitas Komputer Indonesia

Pemrograman Web 1
Download gambar pendukung, extrak pada folder htm

Suryana, Taryana

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

Aplikasi IT-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 
 


Pertemuan 14:navigation Tab Dan Java Script

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

Aplikasi IT-1 (Web Program)
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

GEOLOGI LINGKUNGAN
Lingkungan, Limbah dan Geolog

Widya, Amilia

PENGELOLAAN 
LIMBAH 
2
Dibutuhkan Vs Diabaikan (PHP) 
Limbah Sumber 
Limbah
Pelakunya
Sumber 
Daya Bumi
Manusia
Dibutuhkan oleh manusia karena 
memiliki Potensi
Sumber 
Daya 
Kerusakan SD 
Potensi  dipakai bersifat berlebih / 
tidak sehat 
Muncul Limbah Pengelolaan Diabaikan ( Ketidaktauan/ 
Ketidakpedulian)
Limbah teh apa?
Peraturan Pemerintah (PP) No. 18/1999
Sisa/buangan dari suatu usaha atau kegiatan manusia. Limbah dapat menimbulkan
dampak negatif apabila jumlah / konsentrasinya dilingkungan telah melebihi baku
mutu.
3
UU RI No.23 th.1997 “ Pengelolaa Hidup” 
Sebagai ukuran batas atau kadar makhluk hidup, zat, energi atau komponen yang 
ada atau harus ada dan unsur pencemar yang ditenggang keberadaannya dalam
suatu sumber daya tertentu sebagai unsur lingkungan hidup.
Ambang batas / batas kadar maksimum suatu zat atau
komponen yang diperbolehkan berada dilingkungan agar 
tidak menimbulkan dampak negatif
4
Jenis Limbah Satuan
Kadar Maksimum
yang diperbolehkan
1. Air Raksa
2. Arsenik
3. Boron
4. Kadmium
5. Tembaga
6. Sianida
7. Fluorida
8. Timah
9. Nikel
10. Nitrat (NO
3
)
mg/liter
mg/liter
mg/liter
mg/liter
mg/liter
mg/liter
mg/liter
mg/liter
mg/liter
mg/liter
0,001
0,01
0,3
0,003
2
0,07
1,5
0,01
0,02
50
Salah satu 
ambang baku 
mutu untuk air 
minum
Domestik
Rumah Tangga, Bangunan 
Perdagangan, 
Perkantoran dll.
Sumber Limbah ?
5
Industri
Buangan Perusahaan 
besar
Pertanian 
Hasil sisa pertanian
Pertambangan 
Zat dalam pertambangan
Pengelompokan Limbah
Wujud 
Asal/Jenis Senyawa
Limbah berdasasarkan Wujud
7
Limbah Cair
Limbah 
Padat
Limbah Gas
Limbah yang berwujud cairan, baik berupa air 
disertai bahan-bahan buangan lain yang 
tercampur dan terlarut dalam air.
Limbah yang berwujud padat atau biasanya 
dikatakan dengan sampah yang bisa dipengaruhi 
oleh kepadatan penduduk maupun taraf hidup 
masyarakat.
Limbah berbentuk gas, dimana zat Partikel bahan
padatan atau cairan yang tersuspensi dengan gas-
gas di udara disebut sebagai Materi Partikulat
(asap, nitrogen, karbon monoksida, hidrokarbon, 
sulfur dioksida yang dilepas ke udara). Udara 
merupakan sarana pencemaran.
No Jenis Keterangan
1. CO Gas tidak berwarna, tidak berbau
2. CO2 Gas tidak berwarna, tidak berbau
3. NOx Gas berwarna, berbau
4. SOx Tidak berwarna, berbau tajam
5. HCl Berupa uap
6. NH3 Gas tidak berwarna, berbau
7. CH4 Gas berbau
8. HF Gas tidak berwarna
9. NS Gas berbau
10 Cl2 Gas berbau
Ex Limbah Gas di udara
Limbah berdasasarkan Asal/Jenis Senyawa
Limbah Organik
Limbah 
Anorganik
Pengertian Secara Kimiawi : segala limbah yang mengandung unsur
carbon ( C ),sehingga meliputi limbah dari makhluk hidup.
Secara teknis: limbah yang hanya berasal dari makhluk hidup
(alami) dan sifatnya mudah busuk. 
Pengertian Secara Kimiawi : limbah-limbah yang tidak
mengandung unsur karbon seperti logam, alumunium, kaca dan
pupuk anorganik.
Secara teknis: Segala limbah yang tidak dapat atau sulit
terurai/busuk secara alami oleh mikroorganisme pengurai
✘ LIMBAH BAHAN BERBAHAYA 
DAN BERACUN (B3)
Menurut PP RI No. 18/1999 
tentang Pengelolaan
Limbah Bahan Berbahaya
dan Beracun (B3)
Sisa suatu kegiatan yang mengandung bahan berbahaya dan beracun, yang
karena sifat dan atau konsentrasinya, baik secara langsung maupun tak
langsung merusak lingkungan hidup, kesehatan maupun manusia.
Mudah meledak (explosive)
Pengoksidasi (oxidizing)
Amat sangat mudah terbakar (extremely 
flammable)
Sangat mudah terbakar (highly flammable)
Mudah terbakar (flammable)
Amat sangat beracun (extremely toxic)
Sangat beracun (highly toxic)
Beracun (moderately toxic)
klasifikasikan sebagai zat atau bahan yang mengandung satu
atau lebih senyawa/masuk kategori B3 karena memenuhi 
satu/lebih karakteristik B3 seperti :
- Limbah Mudah Meledak (suhu dan tekanan standar (25o C,
760 mmHg) yang bisa merusak lingkungan.
- Limbah Mudah Terbakar (cairan mengandung alkohol <24%,
volume dan pada titik > 60o C akan menyala apabila terjadi
kontak dengan api).
- Limbah Bersifat Reaktif (sianida, beberapa zat bertemu
gas,api,air bisa bereaksi, limbah kedokteran dll) yang memiliki
dampak lebih dari satu.

No JENIS KEGIATAN TUJUAN PENGOLAHAN
1
PENYARINGAN
UNTUK MENGHILANGKAN ZAT
PADAT.
2
PERAJANGAN
MEMOTONG BENDA YANG 
BERADA DALAM AIR LIMBAH
3
BAK PENANGKAP PASIR
MENGHILANGKAN PASIR DAN 
KORAL
4 BAK PENAMPUNG LEMAK MEMISAHKAN BENDA TERAPUNG
5 TANGKI EKUALISASI MELUNAKKAN AIR LIMBAH
6 NETRALISASI MENETRALKAN  ASAM ATAU BASA
7 PENGENDAPAN/
PENGAPUNGAN
MENGHILANGKAN BENDA 
TERCAMPUR
8 REAKTOR LUMPUR AKTIF/
AERASI
MENGHILANGKAN BAHAN 
ORGANIK
9
KARBON AKTIF
MENGHILANGKAN BAU, BENDA 
YANG TIDAK DAPAT DIURAIKAN
✘ Jenis Kegiatan Pengolahan Limbah
13
JENIS KEGIATAN TUJUAN PENGOLAHAN
10 PENGENDAPAN KIMIAWI UNTUK MENGENDAPKAN FOSFAT
11 NITRIFIKASI/DENITRIFIKASI MENGHILANGKAN NITRAT SECARA 
BIOLOGIS
12 AIR STRIPPING MENGHILANGKAN AMONIAK
13 PERTUKARAN ION MENGHILANGKAN JENIS ZAT TERTENTU
14 SARINGAN PASIR MENGHILANGKAN PARTIKEL PADAT 
YANG LEBIH KECIL
15 OSMOSIS/ELEKTROLISIS MENGHILANGKAN ZAT TERLARUT
✘ Jenis Kegiatan Pengolahan Limbah
Limbah VS Guna lahan
✘ Menghindari limbah dengan memanfaatkan 
kondisi Geologis agar tetap menjaga 
lingkungan
Pemanfaatan Lahan dan batuan 
dlm pendirian Rumah
Pertimbangan kemiringan Lereng, jenis lahan,
letak sungai dalam opendirian pabrik
16
Contoh Aplikasi pemanfaatan 
guna lahan agar tidak 
berdampak limbah
Ex : Limbah banjir Kabupaten 
Bandung
17
Permukiman
Lahan basah
Perikanan
Hankan

20
Pemanfaatan guna lahan dengan 
kebijakan pendirian lokasi 
pembangunan, 
mempertimbangkan
-Letak geografis
-Kemiringan lereng
-Sumber daya / daya dukung 
untuk pembangunannya
Salah satu upaya agar 
limbah tidak terlalu 
berdampak lebih besar
Big concept
Sumber Limbah
Domestik
Industri
Pertanian
Pertambangan
Sarana Penyalur 
Limbah/jenis 
Limbah Cair
Limbah Padat
Limbah Gas
Sumberdaya dan 
lapisan bumi
Berkaitan 
dengan...
Limbah
Berpengaruh pada 
tata guna lahan 
Berpengaruh taraf 
hidup 
Dampak Positif 
Dampak Negatif
Berpengaruh 
pada 
Sumberdaya 
(guna lahan)
Pengelolaan
Kondisi 
Geografis
Prilaku 
Manusia
Rekayasa Adaptasi Lingkungan
22
THANKS!


Pertemuan 11 : Pengelolaan Limbah Padat

Pemrograman Web 1
Materi ini membahas, bagaimana mempublikasikan halaman web yang dibuat ke Internet, sehingga dapat diakses atau dibuka dari mana saja

 
 
PUBLIKASI WEB KE INTERNET 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
14.1.HOSTING WEB 
Agar program dan latihan html yang pernah dibuat dapat dibuka dari seluruh dunia maka program 
tersebut harus di hosting di web server. Ada dua pilihan layanan, yaitu yang berbayar dan yang gratis. 
Anda boleh menghosting atau mempublikasikan di server mana saja, silahkan anda bisa cari di google 
dengan mengetikan “hosting gratis”  atau “free hosting” dan lain-lain. 
 
Sebelum memulai materi 14 ini, alangkah baiknya perbaiki dulu yang tugas13.html, supaya lebih bagus 
lagi, adapun ketentuannya adalah: 
1. Supaya lebih gampangl lagi, simpan semua file dalam folder baru, misalnya tugas14, semua 
file termasuk file html, gambar dan file w3.css simpan disana 
2. Ganti nama File Tugas13.html menjadi index.html  menggunakan huruf kecil semua 
3. Nama File Gambar juga harus huruf kecil semua, dan jangan menggunakan spasi. 
4. Tambahkan satu Tab menu Profile, yang isinya Nim,Nama,Kelas, tambahin Foto kamu juga 
boleh. 
5. Karena Akan di Onlinekan di Internet, tambahkan dan atur agar tulisan dan gambarnya sesuai. 
 
 
 
 
 
 
 
 
 
 
Pada materi ini akan dibahas bagaimana hosting di web server yang gratis yang beralamat di : 
https://www.000webhost.com/. 
Langkah-langkahnya adalah sebagai berikut: 
1. Jalankan browser buka alamat berikut: https://www.000webhost.com/ ,  
Selanjutnya akan ditampilkan jendela berikut: 
 
 
Gambar 14.1 Halaman Utama 
2. Pilih Free Web Hosting, dan Click tombol GET STARTED 
3. Pilih FREE SIGN UP 
 
Gambar 14.2. Memilih Jenis Hosting 
 
 
4. Jika Anda memiliki email di Google, gunakan dan Click LOG IN WITH GOOGLE 
 
Gambar 14.3 Halaman Sign Up / Pendaftaran 
 
5. Masukan Username dan Password Google Anda, jika berhasil akan ditampilkan jendela seperti 
berikut: 
 
Gambar 14.4 Halaman Jika Berhasil Login 
 
6. Click LET’S CREATE SOME MAGIC,  Akan ditampilkan pilihan berikut: 
 
 
 
Gambar 14.5. Pilih Jenis Website 
7. Click Create Web Design 
 
Gambar 14.6. Pilih Kategori Website 
 
8. Click Other, masukan nama Project, kemudian click ok 
Nama Project, masukan Nama Depan kamu, harus UNIK kalau udah ada yang menggunakan akan 
ditolak oleh server: 
Nama Project: Penting banget di ingat, nantinya akan menjadi nama domain website kamu di 
internet: misal kalau tadi name Projectnya:taryanarx maka domain internetnya menjadi : 
https://taryanarx.000webhostapp.com/ 
Alamat inilah yang nantinya bisa dibuka dari mana saja. 
 
 
 
Gambar 14.7. Masukan Nama Project 
 
Tunggu beberapa saat jika, project berhasil dibuat akan ditampilkan jendela berikut:, jika tidak  
berhasil, ulangi isi kembali nama project nya. 
 
Jika berhasil ditampilkan jendela berikut: 
 
Gambar 14.8. Halaman Upload Your Site 
 
9. Click tombol Upload Your Site 
 
 
 
Gambar 14.9. Pilic Public_html dan Upload Files 
 
10. Pada layar sebelah kiri, click Public_html, kemudian pada jendela atas kanan, click tombol 
Upload Files 
 
Gambar 14.10. Select Files 
 
11. Click tombol Select Files 
 
 
 
Gambar 14.11. Semua File yang akan di upload dipilih 
 
12. Select semua file yang digunakan untuk membuat Website kamu, File tugas13.html file w3.css 
dan semua gambar yang digunakan, kemudian click OPEN: 
Nama file tugas13.html harus diganti namanya menjadi index.html 
 
 
Gambar 14.12. Upload File yang tadi di Select 
 
 
13. Click tombol Upload. Untuk mengirimkan Files ke Server, dan jika berhasil dikirim akan 
ditampilkan jendela seperti berikut: 
 
 
 
Gambar 14.13. Contoh semua file telah di Upload ke Server 
 
 
14. Untuk melihat hasilnya buka tab baru di jendela browser, kemudian ketikan 
https://namaproject. 000webhostapp.com 
 
NamaProject adalah NamaProject anda Masing-masing, misalnya tadi namaproject saya adalah 
taryanarx. Maka buka di Browsernya menjadi  https://taryanarx.000webhostapp.com/ 
 
Hasilnya kira-kira seperti ini. 
 
 
 
 
Ok, selamat belajar dan jangan lupa terus mencoba, kamu harus bisa, harus berhasil……tetep 
semangat 
 
“Tidak Berat Membawa Ilmu Berapapun Banyaknya” 
 
 
Kamu bisa Coba di Webhosting yang lain, kalau untuk latihan boleh yang gratisan dulu, nah  kalau 
kamu serius ingin memiliki website premium dengan domain sendiri kamu bisa membelinya via 
webhosting yang tersedia. 
 
Contohnya: 
www.hostinger.co.id 
www.masterweb.com 
www.jagoanhosting.com 
www.qwords.com 
 
 
Nb: 
Jika sudah berhasil dan Online di Internet, silahkan kirimkan, link atau alamat website kamu: 
Di File Tugas14.pdf  
Tuliskan 
 
Nim: 
Nama Lengkap: 
Kelas: 
Alamat Website: 
 
 
Terimakasih, sampai jumpa lagi di Semester berikutnya, tetap jaga Protokol Kesehatan, semoga 
kita diberi rizki dan sehat selalu 
 
Aamiin YRA 
 
Taryana Suryana.M.Kom 
Teknik Informatika 
  


Pertemuan 15. Mempublikasi Halaman Web Ke Internet

Pengolahan Sinyal Digital
Perancangan Filter Digital FIR
1. Metode Windowing
2. Metode Frekuensi samplin

Rahajoeningroem, Tri

Perancangan Filter Digital Fir

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

 
 
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 


Not a member yet

Gambar Pendukung

Gambar Pendukung

Pertemuan 14: Menampilkan Relasi Penjualan Barang

Pertemuan 14:navigation Tab Dan Java Script

Pertemuan 14:navigation Tab Dan Java Script

Pertemuan 14:navigation Tab Dan Java Script

Pertemuan 11 : Pengelolaan Limbah Padat

Pertemuan 15. Mempublikasi Halaman Web Ke Internet

Perancangan Filter Digital Fir

Pertemuan 12 Css Input Dan Label

15,029

70,114