Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Awonapa / Pemrograman / PHP / Xampp

Membuat Form Input Output Pada HTML dan PHP

Oleh Wahyup 2 komentar

Halo teman-teman semua, selamat datang kembali pada Web Blog kami, yaitu Awonapa Jr. Pada kesempatan ini kita akan belajar mengenai Bahasa Pemrograman, Yaitu Bahasa Pemrograman PHP. Materi yang akan kita bahas saat ini adalah Belajar PHP - Membuat Form Input Output Pada HTML dan PHP.

Form Input Output Pada HTML dan PHP

Belajar PHP - Membuat Form Input Output Pada HTML dan PHP

Daftar Isi :

  • Mengenal PHP
  • Perintah Dasar PHP
  • Membuat Halaman Web HTML
  • Membuat Table dan Form Input
  • Membuat Hasil Output PHP

1. Mengenal PHP

PHP atau singkatan dari Hypertext Preprocessor. Merupakan bahasa pemrograman yang digunakan dalam pengembangan website. PHP termasuk kedalam bahasa pemrograman Server Side, yang bisa di artikan script PHP akan di proses di Server.

PHP bisa digunakan pada halaman website, secara bersamaan dengan HTML, dan saat ini PHP sudah merelease versi terbaru yaitu versi PHP 8.

2. Perintah Dasar PHP

Berikutnya yaitu tentang perintah dasar yang digunakan pada studi kasus kali ini, beberapa perintah dasar yang akan digunakan yaitu, untuk membuat variabel, menampilkan text dari variabel, dan lainya.

Oiya sebelum itu, jangan lupa untuk menjalankan nya menggunakan web server, seperti apache, disini saya menggunakan XAMPP untuk menjalankannya. dan diletakan pada folder htdocs.

Menjalankan Xampp Localhost di Windows

Beberapa sintak PHP dasar yang digunakan mari kita baca sejenak.

1. Sintak Dasar pada PHP

Sintak untuk menulis PHP, dibuka dengan <?php  dan  di tutup dengan ?>, seperti contoh: 

<?php  <<tag pembuka
    isi kode
?> <<tag penutup

2. Sintak echo()

echo merupakan fungsi yang digunakan untuk menampilkan teks ke layar halaman website atau pun lainya. perintah echo dapat ditulis sebagai berikut.

<?php 
  echo "Belajar PHP";
?>

3. Membuat Variabel pada PHP

Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti string (teks), number (angka), objek, array, dan sebagainya. Untuk membuat variabel dengan PHP dapat diawali simbol $. Seperti contoh :

<?php
    $nama = 'awonapa';
?> 

Pada sintak diatas kita sudah membuat variabel nama, yang memiliki isi tipe data string, yaitu awonapa. Lalu bagaimana untuk menampilkan hasil dari variabel nama? kita bisa menggunakan echo , seperti berikut ini caranya.

<?php
    $nama = 'awonapa';
    echo $nama;
?>
Dan akan menghasilkan output : awonapa.

3. Membuat Halaman Web HTML

Pada tahap berikutnya, kita akan membuat halaman website, yang digunakan untuk proses input data dan output data, sebelumnya saya sarankan teman-teman sudah memahami basic dari Materi HTML, jika belum materi HTML dapat di akses pada tautan berikut ini :

Belajar HTML 5 Lengkap
Sekilas, untuk dasar kerangka HTML adalah sebagai berikut :

<html lang="en">
<head>
    <title>Input Output HTML dan PHP</title>
</head>
<body>
  
</body>
</html>

4. Membuat Table dan Form Input HTML

Sebelumnya kita sudah membuat kerangka web dengan HTML, dan setelah ini kita akan membuat table yang akan digunakan untuk merapihkan form input yang akan kita buat nanti. Berikut ini adalah sintak HTML nya.

Untuk membuat table dapat menggunakan sintak HTML sebagai berikut ini :    

<table>
	<tr>
		<th>Person 1</th>
		<th>Person 2</th>
		<th>Person 3</th>
	</tr>
	<tr>
		<td>Emil</td>
		<td>Tobias</td>
		<td>Linus</td>
	</tr>
	<tr>
		<td>16</td>
		<td>14</td>
		<td>10</td>
	</tr>
</table>

Dan untuk membuat input form dapat menggunakan perintah sebagai berikut, oiya input form ini memiliki atribut di dalamnya, antara lain yaitu atribut name, method, action. Untuk sintak form sebagai berikut :

<form name="finput" method="post" action="output.php"> 

</form>

Kita sudah mengetahui basic nya, dan berikutnya langsung kita buat saja dan beri nama File ini dengan index.php. 

<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Input Output HTML dan PHP</title>
		<style>
			tr, td {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<form name="finput" method="post" action="output.php">
			<table border="1" width="80%" align="center" cellpadding="5" cellspacing="0">
				<tr>
					<td colspan="2" align="center">Input Output HTML dan PHP</td>
				</tr>
				<tr>
					<td width="45%">Nilai Tugas</td>
					<td width="55%"><input type="text" name="tugas"></td>
				</tr>
				<tr>
					<td>Nilai Kuis</td>
					<td><input type="text" name="kuis"></td>
				</tr>								
				<tr>
					<td>Nilai UTS</td>
					<td><input type="text" name="uts"></td>
				</tr>
				<tr>
					<td>Nilai UAS</td>
					<td><input type="text" name="uas"></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" name="tampil" value="Hitung">
						<input type="reset" name="reset" value="Reset">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

Dan akan menjadi hasil sebagai berikut ini :

Hasil dari index.php

Penjelasan Kode : 

  • Pada style : disitu kita gunakan untuk meletakan text di rata tengah menggunakan internal CSS.
  • Pada atribut name : digunakan untuk pengenal dari nama elemen pada tag form / input.
  • Pada atribut method = POST, ini berfungsi untuk mengirimkan data atau nilai langsung ke action untuk ditampung, tanpa menampilkan pada URL. action disini yaitu output.php.
  • Pada atribut action : ini digunakan untuk menentukan dimana data atau nilai akan di proses dan dikirimkan.

5. Membuat Hasil Output PHP

Pada proses sebelumnya, yaitu membuat halaman untuk input, dan sudah memberikan action ke output.php maka berikutnya kita akan membuat file output.php, untuk menerima dan menampilkan data dari method POST dari file index.php. 

Pertama kita akan membuat halaman HTML nya terlebih dahulu.

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Output Percabangan</title>
	<style>
		tr, td {
			text-align: center;
		}
	</style>
</head>
<body>
	<table width="80%" border="1" cellpadding="5" cellspacing="0" align="center">
		<tr>
			<td colspan="2">Output Program Percabangan</td>
		</tr>
		<tr>
			<td width="50%">Nilai Tugas Anda :</td>
			<td width="50%">-</td>
		</tr>
		<tr>
			<td>Nilai Kuis Anda :</td>
			<td>-</td>
		</tr>
		<tr>
			<td>Nilai UTS Anda :</td>
			<td>-</td>
		</tr>
		<tr>
			<td>Nilai UAS Anda :</td>
			<td>-</td>
		</tr>
		<tr>
			<td>Total Nilai :</td>
			<td>-</td>
		</tr>
		<tr>
			<td>Huruf Mutu :</td>
			<td>-</td>
		</tr>		
	</table>
</body>
</html>

Dan akan menjadi hasil sebagai berikut ini :

Hasil dari output.php 

Kedua kita akan membuat kode untuk proses menerima dan menampilkan nilai pada file output.php

<?php 
	$tugas = $_POST['tugas'];
	$kuis = $_POST['kuis'];
	$uts = $_POST['uts'];
	$uas = $_POST['uas'];

	// hitung nilai akhir
	$total = ($tugas + $kuis + $uts + $uas) / 4;

	if($total >= 85) {
		$hm = "A";
	} else if ($total >= 75) {
		$hm = "B";
	} else if($total >= 65) {
		$hm = "C";
	} else {
		$hm = "D";
	}
?>

Penjelasan Kode : 

  • kita membuat variabel yang digunakan untuk menampung data dari method : POST dari halaman index.php.
  • dan kita akan menampung dari masing-masing name pada input di file index.php, dimulai dari tugas, kuis, uts dan uas.
  • kemudian akan membuat nilai akhir, dan disini kita akan menjumlahkan semua inputan lalu dibagi dengan 4.
  • pada huruf mutu, kita membuat kondisi yang menentukan huruf mutu yang akan ditampilkan.

Ketiga kita akan menggabungkan semua kode yang sudah kita buat tadi, maka jadinya adalah seperti berikut ini.

File output.php 

<?php 
	$tugas = $_POST['tugas'];
	$kuis = $_POST['kuis'];
	$uts = $_POST['uts'];
	$uas = $_POST['uas'];

	// hitung nilai akhir
	$total = ($tugas + $kuis + $uts + $uas) / 4;

	if($total >= 85) {
		$hm = "A";
	} else if ($total >= 75) {
		$hm = "B";
	} else if($total >= 65) {
		$hm = "C";
	} else {
		$hm = "D";
	}
?>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Output Nilai</title>
	<style>
		tr, td {
			text-align: center;
		}
	</style>
</head>
<body>
	<table width="80%" border="1" cellpadding="5" cellspacing="0" align="center">
		<tr>
			<td colspan="2">Output Nilai</td>
		</tr>
		<tr>
			<td width="50%">Nilai Tugas Anda :</td>
			<td width="50%"><?php echo $tugas; ?></td>
		</tr>
		<tr>
			<td>Nilai Kuis Anda :</td>
			<td><?php echo $kuis; ?></td>
		</tr>
		<tr>
			<td>Nilai UTS Anda :</td>
			<td><?php echo $uts; ?></td>
		</tr>
		<tr>
			<td>Nilai UAS Anda :</td>
			<td><?php echo $uas; ?></td>
		</tr>
		<tr>
			<td>Total Nilai :</td>
			<td><?php echo $total; ?></td>
		</tr>
		<tr>
			<td>Huruf Mutu :</td>
			<td><?php echo $hm; ?></td>
		</tr>		
	</table>
</body>
</html>

Penjelasan Kode : 

  • pada <td> kita akan menampilkan nilai dengan perintah <?php echo $variabel ?>.

Dan jika kita coba untuk input semua nilai = 80, maka  hasilnya adalah sebagai berikut :

Hasil dari Proses Input Nilai

Teman-teman juga bisa mengkreasikan sesuai dengan keinginan, seperti contoh, bisa mencoba untuk menampung nilai array dahulu, lalu baru di proses.

Mencari Nilai Maksimum dan Minimum pada Array PHP

Baik teman-teman seperti itu adalah materi yang dapat saya share pada artikel ini yaitu mengenai Belajar PHP - Membuat Form Input Output Pada HTML dan PHP.

Terimakasih sudah berkunjung dan membaca tulisan saya, mohon maaf jika terdapat kesalahan, silahkan diperbaiki dengan cara memberikan komentar.

Salam Semangatt! Awonapa.
 
Tag Penelusuran

  • perintah dasar PHP
  • penggunaan echo PHP
  • for looping PHP
  • foreach looping PHP
  • array pada PHP 
  • input form PHP
  • output form PHP

2 komentar untuk "Membuat Form Input Output Pada HTML dan PHP"

  1. Aril5 Maret 2022 pukul 15.30

    Ini pake array gak

    BalasHapus
    Balasan
    1. Wahyup6 Maret 2022 pukul 11.50

      enggak kak, kalau mau lihat yang pakai array disini
      https://www.awonapa.com/2021/10/mencari-nilai-max-dan-minimum-array-php.html

      Hapus