Sabtu, 13 April 2019

Pembuatan dan Pemanggilan Form dengan menggunakan Sublime Text 3

Assalamu'alaykum warahmatullahi wabarakatuh

Saya akan memberikan tutorial cara Pembuatan dan Pemanggilan Form dengan menggunakan Sublime Text 3. 

Berikut cara Pembuatan Form Input dan Pemanggilan Data dari Form Input :

1. Buka aplikasi XAMPP, lalu klik Start pada 'Apache' dan 'MySQL'.


2. Setelah itu, buka aplikasi Text Editor nya yaitu Sublime Text 3.


3. Setelah itu, untuk memudahkan pengerjaan codingan, simpan terdahulu dengan nama file forminputpegawai.php .

Lalu, ketik "html"


4. Setelah itu, klik Enter. Maka akan muncul seperti ini..


5. Buat codingan script program untuk membuat Form Input seperti ini :



<!DOCTYPE html>
<html>
<head>
<title>Input Formulir Pegawai</title>
</head>
<body bgcolor="purple"> <center>
<form action="tampilformulir.php" method="post">
<h1>Formulir Pegawai Negeri Konoha</h1>
<br>
<table border=2 align="center" width="500">
<tr>
<td colspan="4" align="center"><b>Isi Data Dibawah ini :</b>
</tr>
<pre>
<tr>
<td>Nama</td>
<td> : <input type="text" name="Nama" size="25" maxlength="50" required="Nama"></td>
</tr>
<tr> 
<td>Alamat</td>
<td> : <textarea type="text" name="Alamat" rows="5" cols="25" required="Alamat"> </textarea> </td>
</tr>
<tr>
<td>Tempat Lahir</td>
<td> : <input type="text" name="Tempat" size="25" maxlength="50" required="Tempat"></td>
</tr>
<tr>
<td> Tanggal Lahir </td>
<td> : <input type="text" name="Tanggal" size="25" maxlength="50" required="Tanggal"> </td>
</tr>
</pre>

<tr>
<td> Jenis Kelamin </td>
<td> : <input type="radio" name="jeniskel" value="Laki-Laki">Laki-Laki
<input type="radio" name="jeniskel" value="Perempuan">Perempuan 
</td>
</tr>
<tr>
<td> Pendidikan </td>
<td> : <select name="Pendidikan">
           <option value="-Pilih-">-Pilih-
           <option value="SMA/SMK">SMA/SMK
           <option value="D3">D3
           <option value="S1">S1
</td>
</tr>
</option>
</select>
    </table>
<p>
<center>
<tr> 
<td align="center"> <input type="submit" value="Submit">
<input type="reset" value="Cancel"> </td>
</center>
</tr>
</p>
</body>
</html>

Setelah sudah selesai, Save kembali.

6. Setelah buat codingan form Input nya, lalu buatlah codingan script program untuk Memanggil Data dari Form Input dengan nama file tampilformulir.php .





<!DOCTYPE html>
<html>
<head>
<title>Tampil Formulir</title>
</head>
<body bgcolor="purple"> <center>
<?php
$nama=$_POST['Nama'];
$alamat=$_POST['Alamat'];
$tempat=$_POST['Tempat'];
$tanggal=$_POST['Tanggal'];
$jeniskel=$_POST['jeniskel'];
$pendidikan=$_POST['Pendidikan'];
?>
<h1>FORMULIR PEGAWAI NEGERI KONOHA</h1> <center>
<table border="2">
<tr>
<td>Nama :</td>
<td><?php echo "$nama"; ?></td>
</tr>
<tr>
<td>Alamat :</td>
<td><?php echo "$alamat"; ?></td>
</tr>
<tr>
<td>Tempat Lahir :</td>
<td><?php echo "$tempat"; ?></td>
</tr>
<tr>
<td>Tanggal Lahir :</td>
<td><?php echo "$tanggal"; ?></td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td><?php echo "$jeniskel"; ?></td>
</tr>
<tr>
<td>Pendidikan :</td>
<td><?php echo "$pendidikan"; ?></td>
</tr>
</table>
<a href="forminputpegawai.php">Back To Home</a>
</body>
</html>

Setelah sudah selesai, Save kembali.

7. Buka salah satu web browser seperti Google Chrome, Mozilla  Firefox, Internet Explorer

8. Setelah itu ketik di alamat URL seperti ini :


9.  Hasilnya seperti ini :

                  Form INPUT 






Setelah isi input an nya, maka output nya akan muncul seperti  ini :

                Form OUTPUT





Sekian tutorial cara Pembuatan dan Pemanggilan Form dengan menggunakan Sublime Text 3. 
Mohon maaf jika ada kesalahan kata.

Semoga bermanfaat untuk kalian :)

Wassalamu'alaykum warahmatullahi wabarakatuh

Tidak ada komentar:

Posting Komentar