Repository Universitas Komputer Indonesia

Pemrograman Web 2
Materi ini membahas mengenai bagaimana menggunakan Fungsi dan Argumen dalam pemrograma

Suryana, Taryana

Fungsi Dan Argumen

Pemrograman Web 2
Materi ini Membahas mengenai CSS dan Integrasi Progra

Css Dan Integrasi Program

Kurniasih, Dewi

Septiani, Selfa

Pengembangan Kawasan Wisata di Sekitar KCIC Kabupaten Bandung Barat

43055 - Komputer Aplikasi E-Commerce (2 SKS)
Materi ini membahas mengenai pembuatan modul aplikasi delete data pada sistem toko onlin

Materi 11 Delete Data

16032 - Komputer Aplikasi E-Commerce (2 SKS)
Materi ini membahas mengenai penerapan fungsi logika dalam pemrograman php dan dalam databas

Materi 5 Fungsi Logika

Pemrograman Web 2
Materi ini membahas mengenai pembuatan database dan tipe dat

Database Dan Tipe Data

Pemrograman Web 2
Materi ini membahas mengenai perintah dasar bahasa SQ

Perintah Dasar Sql

Pemrograman Web 2
Materi ini membahas mengenai bagaimana cara menambahkan Data ke dalam tabel dengan menggunakan for

Hapus Data

Komputer Aplikasi E-Commerce
Materi ini membahas mengenai pembuatan form, Methode Post, Get, input teks, 
select, checkbox, radio, textarea dan select, insert databas

 
BAB 4 
Form Input dan Output 
 
Oleh: 
Taryana Suryana M.Kom 
Ilmu Hukum 
2025 
 
taryanarx@email.unikom.ac.id – taryanarx@gmail.com 
 
 
4.0. Form dalam HTML 
Dengan memanfaatkan form yang terdapat dalam HTML, kita dapat 
membuat program komputer untuk menangani masukan yang 
bervariasi, pada dasarnya ada 5 Objek html yang biasa digunakan 
untuk memasukan data, yaitu: text, radio, checkbox, select, dan 
textarea 
 
4.1. Menangani objek tipe Text 
Objek bertipe text atau textbox merupakan objek html yang dapat 
digunakan untuk memasukan data dalam satu baris. 
Berikut adalah contoh untuk memasukan input yang bertipe text 
Sintak dasar: 
<input type=text name=namaobjek size=length> 
 
 
 
Namafile: input1.html 
<html> 
<form action="proses1.php" method=post> 
<center> 
 
<h1>Program Penjualan 
 <hr> 
 <table> 
 <tr><td>Nama Barang<td>:<input name=namabarang size=20> 
 <tr><td>Harga<td>:<input name=harga size=10> 
 <tr><td>Jumlah<td>:<input name=jumlah size=2> 
 </table> 
 <hr> 
 <input type=submit value=Proses> 
 <input type=reset value=Reset> 
 
 
Gambar 4.1 Input Tipe Text 
 
Sedangkan untuk menangani form input tadi, dapat dilakukan 
dengan menggunakan perintah POST untuk membaca isi variabel 
yang dikirim. 
NamaFile: Proses1.php 
<?php 
 echo "<center>"; 
 echo "<h1>"; 
 echo "Program Penjualan "; 
 echo "<hr>"; 
 echo "<table>"; 
 $namabarang=$_POST['namabarang']; 
 $harga=$_POST['harga']; 
 $jumlah=$_POST['jumlah']; 
 
 
 $total=$harga*$jumlah; 
 
 echo "<tr><td>Nama Barang<td>:$namabarang"; 
 echo "<tr><td>Harga<td>:$harga"; 
 echo "<tr><td>Jumlah<td>:$jumlah"; 
 echo "<tr><td colspan=3><hr>"; 
 echo "<tr><td>Total Harga<td>:$total"; 
?> 
  
Selanjutnya ketika program dijalankan dan di Click tombol Proses, 
maka hasilnya akan ditampilkan seperti  pada gambar 4.2. 
 
 
  
Gambar 4.2. Menampilkan Hasil Proses1 
  
  
 
 
4.2.Menangani Objek Tipe Radio 
Objek type radio berfungsi untuk membuat tombol radio atau 
tombol pilihan yang diisi dengan cara memilih dari salah satu tombol 
radio yang ada. Radio biasa digunakan untuk pilihan yang membatasi 
user untuk memilih satu dari pilihan yang ada. 
Dalam penggunaan radio HTML, kita hanya memerlukan tag input 
dengan sebuah atribut type radio. Berikut format dasar radio dalam 
HTML: 
Sintak: 
<input type="radio" name=namaobjek value=isivalue>Label 
 
NamaFile:radio.html 
<form action="proses_radio.php" method=post> 
<?php 
<center> 
<font size=5> 
Menggunakan Objek Radio 
<hr> 
<table> 
<tr><td>Tujuan 
<td><input type=radio name=tujuan value=Bandung>Bandung 
<tr><td><td><input type=radio name=tujuan value=Jakarta>Jakarta 
<tr><td><td><input type=radio name=tujuan value=Bogor>Bogor 
</table> 
<hr> 
<input type=submit value=Proses> 
<input type=reset value=Reset> 
 
 
 
Gambar 4.3. Objek Tipe Radio 
 
Untuk menangani input objek Radio, dapat dilakukan dengan 
membaca value dari objek tersebut. 
NamaFile:Proses_radio.php 
<?php 
echo "<center>"; 
echo "<font size=8>"; 
echo "Membaca Objek Radio"; 
echo "<hr>"; 
$tujuan=$_POST['tujuan']; 
echo "<tr><td>Tujuan<td>:$tujuan"; 
?> 
 
 
   
 
 
Gambar 4.4.Menampilkan data tipe Radio 
 
 
4.3. Menangani Objek Tipe Checkbox 
Objek type Checkbox berfungsi untuk membuat pilihan dengan cara 
men-checklist pilihan tersebut, pilihan bisa lebih dari satu pilihan. 
 
Checkbox.html 
<form action="proses_checkbox.php" method=post> 
<center> 
<font size=6> 
Menggunakan Checkbox 
<hr> 
<table> 
<tr><td><input type=checkbox name=nasigoreng>Nasi 
Goreng 
<td><input type=checkbox name=esjeruk>Es Jeruk 
<tr><td><input type=checkbox name=soto>Soto 
<td><input type=checkbox name=tehmanis>Teh Manis 
<tr><td><input type=checkbox name=nasirames>Nasi Rames 
<td><input type=checkbox name=eskelapa>Es Kelapa 
</table> 
<hr> 
 
<input type=submit value=Proses> 
<input type=reset value=Reset> 
 
 
 
Gambar 4.5.Objek Tipe Checkbox 
Untuk membaca data dengan tipe checkbox dapat dilakukan dengan 
membaca value dari objek tersebut, jika isi value adalah on artinya 
dipilih. 
Proses_checkbox.php 
<?php 
error_reporting(0); 
echo "<center>"; 
echo "<font size=6>"; 
echo "WARTEG BAHARI"; 
echo "<hr>"; 
echo "<table>"; 
$nasigoreng=$_POST['nasigoreng']; 
if($nasigoreng) 
{ 
$hnasgor=15000; 
echo "<tr><td>Nasi Goreng <td>$hnasgor"; 
} 
$esjeruk=$_POST['esjeruk']; 
if($esjeruk) 
{ 
 
$hesjeruk=5000; 
echo "<tr><td>Es Jeruk<td>$hesjeruk"; 
} 
?> 
 
 
 
Gambar 4.6.Menangani Objek Tipe Checkbox 
 
4.4.Menangani Objek Select 
Objek bertipe select digunakan untuk memasukan data dengan cara 
memilih salah satu pilihan dari beberapa pilihan yang disediakan 
 
Sintak Dasar: 
<select name=namaobjek> 
<option>Pilihan1 
<option>Pilihan2 
</select> 
 
select.html 
<html> 
<form action="proses_select.php" method=post> 
<center> 
<font size=8> 
Program Gaji Pegawai 
<hr> 
<table> 
<tr><td>Nama Pegawai <td><input name=namapegawai size=20> 
<tr><td>Jabatan<td><select name=jabatan> 
 
<option>MANAGER 
<option>MARKETING 
<option>PRODUKSI 
<option>HRD 
<option>OB 
<tr><td>Tahun Masuk <td><input name=tahunmasuk size=4>    
</table> 
<hr> 
<input type=submit value=Proses> 
<input type=reset value=Reset> 
 
 
 
Gambar 4.7.Input Objek Select 
 
Untuk membaca objek bertipe select, dapat dilakukan dengan cara 
yang sama dengan membaca objek tipe text atau textbox 
 
Proses_select.php 
<?php 
 echo "<center>"; 
 echo "<font size=10>"; 
 echo "<font color=blue>"; 
 echo "Program Gaji Pegawai "; 
 echo "<hr>"; 
 echo "<table>"; 
 
 $namapegawai=$_POST['namapegawai']; 
 $jabatan=$_POST['jabatan']; 
 $tahunmasuk=$_POST['tahunmasuk']; 
 $lamakerja=2019 - $tahunmasuk; 
 if($jabatan=="MANAGER") $gajipokok=10000000; 
 if($jabatan=="MARKETING") $gajipokok=8000000; 
  
 $tunjangan=0.05*$gajipokok*$lamakerja; 
 $gajitotal=$gajipokok+$tunjangan; 
 echo "<tr><td>Nama Pegawai<td>:$namapegawai"; 
 echo "<tr><td>Jabatan<td>:$jabatan"; 
 echo "<tr><td>Tahun Masuk<td>:$tahunmasuk"; 
 echo "<tr><td>Lama Kerja<td>:$lamakerja"; 
 echo "<tr><td>Gaji Pokok<td>:$gajipokok"; 
 echo "<tr><td>Tunjangan<td>:$tunjangan"; 
 echo "<tr><td>Gaji Total<td>:$gajitotal"; 
?> 
  
 
Gambar 4.8.Proses Objek Tipe Select 
 
 
  
 
 
4.5.Memasukan atau Menambah Data Kedalam Database 
Dengan Menggunakan Objek yang telah dibahas sebelumnya, pada 
bagian ini kita akan mencoba membuat program Komputer untuk 
memasukan atau menambah data kedalam tabel barang yang pernah 
dibuat sebelumnya. 
Pertama Buat File berikut: 
NamaFile:inputbarang.html 
<html> 
<form action="savebarang.php" method=post> 
<center> 
<font size=6> 
Form Input Barang 
<hr width=320> 
<table> 
<tr><td>Kode Barang<td><input name=kodebrg size=5> 
<tr><td>Nama Barang<td><input name=namabarang size=10> 
<tr><td>Harga<td><input name=harga size=20> 
<tr><td>Stok<td><input name=stok size=5> 
</table> 
<hr width=320> 
<input type=submit value=Save> 
<input type=reset value=Reset> 
 
 
NamaFile:savebarang.php 
<html> 
<center> 
<font size=6> 
Informasi Data Barang 
</font> 
<hr width=320> 
<table> 
<?php 
require ("koneksi.php"); 
$kodebrg=$_POST['kodebrg']; 
$namabarang=$_POST['namabarang']; 
$harga=$_POST['harga']; 
$stok=$_POST['stok']; 
echo "<tr><td>Kode Barang<td>$kodebrg"; 
 
echo "<tr><td>Nama Barang<td>$namabarang"; 
echo "<tr><td>Harga<td>$harga"; 
echo "<tr><td>Stok<td>$stok"; 
echo "</table>"; 
echo "<hr width=320>"; 
 
if($kodebrg!='') 
{ 
$sql="insert into barang values 
('$kodebrg','$namabarang','$harga','$stok')"; 
$hasil=mysqli_query($conn,$sql); 
echo "Data telah ditambahkan"; 
} 
else 
{ 
echo "Kode Barang Tidak Boleh Kosong"; 
} 
?> 
 
Setelah kedua File dibuat, kemudian, buka browser anda dan 
jalankan file:inputbarang.html dengan cara ketikan: 
http://localhost/hi 
 
Gambar 4.9.Input Data Barang 
 
Masukan Data Contoh Seperti diatas, kemudian click tombol Save, 
jika Program Benar dan datanya benar, maka akan ditampilkan layar 
 
seperti berikut, dan data yang dimasukan akan masuk ke tabel 
barang. 
 
 
Gambar 4.10.Menyimpan Data Barang 
 
Untuk Melihat data masuk atau tidak kedalam tabel barang. 
Jalankan file:tampilbarang.php, dengan cara dari browser 
ketik:localhost/hi/tampilbarang.php 
 
 
Gambar 4.11 Menampilkan Data 
 
Data dengan KodeBarang B011, masuk kedalam tabel barang. 
Sampai sini berarti program anda sudah benar. 
 
  
 
 
Tugas 4:  
Dengan Menggunakan phpmyadmin, buat tabel: member, dengan 
jumlah field sebanyak 7 field: 
 
Name:member  number of columns:7 
 
.  
 
Struktur file: member yg sudah dibuat 
 
 
 
 
Hampir sama dengan inputbarang.html dan savebarang.php 
Buat Program untuk memasukan data member seperti berikut: 
NamaFile:inputmember.html 
 
 
NamaFile:savemember.php 
 
 
 
Jika Kode Programnya benar, maka data member yang dimasukan 
akan terekam kedalam tabel:member 
Bisa dilihat dengan menggunakan phpmyadmin 
 
 
 
 
 
 
 
 
 
ooOOoo 
 
DAFTAR PUSTAKA 
1. Suryana, Taryana (2024) Pengantar Pemrograman WEB (HTML, 
CSS, PHP, MYSQL) xviii, 181 hlm Deepublish, ISBN:978-623-02-
8181-5 
2. Suryana, Taryana; Koesheryatin (2014), (2023), Aplikasi Internet 
Menggunakan HTML, CSS & Java Script, Elexmedia Komputindo, 
Jakarta 
3. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
4. Suryana, Taryana; Sarwono, Jonathan (2007)  E-COMMERCE 
MENGUNAKAN PHP DAN MYSQL, Graha Ilmu, Yogyakarta 
5. Wong Jony. 2010. Internet Marketing for Beginners. Jakarta: PT 
Elex Media Komputindo. 
6. Kumar, Anil and Manoj Kumar Dash. 2013. Constructing a 
Measurement in Service Quality for Indian Banks: Structural 
Equation Modeling Approach. Journal of Internet Banking and 
Commerce, April 2013, vol. 18, no.1 
7. Siregar, Riki R. 2010. Strategi Meningkatkan Persaingan Bisnis 
Perusahaan dengan Penerapan E-commerce 
8. https://www.php.net/manual/en/book.mysql.php 
9. https://www.w3schools.com  
10. https://tekno.kompas.com/read/2022/09/26/10150007/pengertian-e-
commerce-beserta-jenis-contoh-dan-manfaatnya 
11. https://meenta.net/pengertian-e-commerce/ 
12. https://www.rumahweb.com/journal/session-adalah/ 
13. https://rizkypratama.id/blog/2019/11/01/membuat-session-login-
pada-php/ 
14. https://blog.skillacademy.com/supplier-adalah 
15. https://chat.openai.com/ 
16. Suryana, Taryana (2025) Materi 15 Integrasi Program 
17. Suryana, Taryana (2025) Materi 11 Percabangan - Fungsi 
Logika. [Teaching Resource] 
18. Suryana, Taryana (2024) Materi 2. Memformat Dokumen Html Dan 
List. [Teaching Resource] 
 
19. Suryana, Taryana (2024) Materi7. Membagi Layar Dengan Frame Dan 
Iframe. [Teaching Resource] 
20. Suryana, Taryana (2024) Materi 6. Membuat Tautan Atau Link Dalam 
Html. [Teaching Resource] 
21. Suryana, Taryana (2024) Materi 5. Form Dengan Html Dan 
Html5. [Teaching Resource] 
22. Suryana, Taryana (2024) Materi 4. Membuat Tabel Dengan 
Html. [Teaching Resource] 
23. Suryana, Taryana (2024) Materi 3. Membuat List Berurutan Dan List 
Tidak Berurutan. [Teaching Resource] 
24. Suryana, Taryana (2024) Materi 2. Memformat Dokumen Html Dan 
List. [Teaching Resource] 
25. Suryana, Taryana (2024) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor. [Teaching Resource] 
26. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
27. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
28. Suryana, Taryana, e-COMMERCE MENGUNAKAN PHP DAN MYSQL, 
Graha Ilmu, Jogyakarta 
29. http://www.grahailmu.co.id/previewpdf/978-979-756-182-6-
231.pdf 
30. Suryana, Taryana (2023) Materi 2. Pengenalan Php, Variabel, Tipe 
Data Dan Database Hubungan Internasional 2023-2024. [Teaching 
Resource] 
31. Suryana, Taryana (2023) Materi 1. Pengenalan E-commerce Dan 
Persiapan Software Pendukungnya. [Teaching Resource] 
32. Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching 
Resource] 
33. Suryana, Taryana (2023) Materi 10. Display Layout Dan 
Button. [Teaching Resource] 
34. Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3 
Framework. [Teaching Resource] 
35. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching 
Resource] 
36. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
37. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching 
Resource] 
38. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
39. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam 
Html. [Teaching Resource] 
 
40. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan 
Html5. [Teaching Resource] 
41. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam 
Html. [Teaching Resource] 
42. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching 
Resource] 
43. Suryana, Taryana (2022) Materi 2 Memformat Dokumen 
Html. [Teaching Resource] 
44. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching 
Resource] 
45. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
46. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
47. https://www.w3schools.com/html, September, 2021 
48. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
49. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
50. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
51. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
52. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
53. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
54. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
55. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
56. https://www.w3schools.com/html, September, 2021 
57. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
58. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
59. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching 
Resource] 
60. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Materi Jurusan Perancangan Wilayah Dan Kota. [Teaching Resource] 
61. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Untuk Jurusan Teknik Sipil. [Teaching Resource] 
62. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan 
Html. [Teaching Resource] 
63. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-
ul2-2021. [Teaching Resource] 
 
64. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-
2021-1. [Teaching Resource] 
65. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-
2021-1. [Teaching Resource] 
66. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data 
Member. [Teaching Resource] 
67. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan 
Disdukcapil. [Teaching Resource] 
68. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-
2021-1. [Teaching Resource] 
69. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-
2021-1. [Teaching Resource] 
70. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-
12021-1. [Teaching Resource] 
71. https://www.w3schools.com/html 
 
 
 
 
 


Materi 4. Membuat Form Input Dan Output

43055 - Komputer Aplikasi E-Commerce (2 SKS)
Materi ini membahas mengenai pembuatan form untuk input dan output dengan menggunakan html5 dan penangananya dalam ph

Not a member yet