13 March 2017

Cara Membuat Form Input dan Ouput Mahasiswa

Karena sudah banyak yang meminta untuk membuat sebuah form input mahasiswa dengan output datanya maka hari ini ini saya akan memberikan Cara Membuat Form Input Mahasiswa Dan Outputnya.

Form input mahasiswa biasanya digunakan untuk menginput data mahasiswa, kali ini saya tidak menggunakan database supaya mudah dipahami oleh pemula.

Untuk membuat form input mahasiswa memerlukan 2 file. satu untuk form input dan satu lagi untuk output datanya.

Berikut Cara Membuat Form Input Mahasiswa :
1. Buka Aplikasi XAMPP, jika tidak punya bisa download DISINI


    Jalankan Apache dan Mysql.

2. Buat folder pendaftaran ditempat dimana file instalan XAMPP kamu tempatkan. biasanya di Drive C/Program Files/XAMPP/htdocs. 


Kalau saya menyimpan file instalan XAMPP nya di Drive D. Buka folder XAMPP lalu buka htdocs dan buat folder pendaftaran disitu.

3. Buka Aplikasi Notepad++, jika tidak punya download DISINI
    ketikkan code berikut dan simpan ke folder Pendaftaran tadi
    beri nama input.php

<html>
<head><title>Form Input Mahasiswa</title>
    <style type="text/css">
    h1{color:black;font-family:"Elephant"}
    </style>
    <style type="text/css">
    td{font-family:Elephant;}
    h3{font-family:Mv Boli;}
    b{color:yellow;}
    table{background-color:026510;}
</style>
</head>
<body bgcolor=green>
    <center>
    <h1>Form Input Mahasiswa</h1>
    <form method="post" action="output.php">
    <table border="0">
    <tr>
        <td>Nama</td>
        <td>:</td>
        <td><input type="text" name="nama" size=40/></td>
    </tr>
    <tr>
        <td>Tempat Lahir</td>
        <td>:</td>
        <td><input type="text" name="tempat_lahir" size=40/></td>
    </tr>
    <tr>
        <td>Tanggal Lahir</td>
        <td>:</td>
        <td><select name="tanggal">
            <option value="" selected="selected">Tanggal
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
        </select>
        <select name="bulan">
            <option value="" selected="selected">Bulan
            <option value="Januari">Januari</option>
            <option value="Februari">Februari</option>
            <option value="Maret">Maret</option>
            <option value="April">April</option>
            <option value="Mei">Mei</option>
            <option value="Juni">Juni</option>
            <option value="Juli">Juli</option>
            <option value="Agustus">Agustus</option>
            <option value="September">September</option>
            <option value="Oktober">Oktober</option>
            <option value="Nopember">Nopember</option>
            <option value="Desember">Desember</option>
        </select>
        <select name="tahun">
            <option value="" selected="selected">Tahun
            <option value="2014">2014</option>
            <option value="2013">2013</option>
            <option value="2012">2012</option>
            <option value="2011">2011</option>
            <option value="2010">2010</option>
            <option value="2009">2009</option>
            <option value="2008">2008</option>
            <option value="2007">2007</option>
            <option value="2006">2006</option>
            <option value="2005">2005</option>
            <option value="2004">2004</option>
            <option value="2003">2003</option>
            <option value="2002">2002</option>
            <option value="2001">2001</option>
            <option value="2000">2000</option>
            <option value="1999">1999</option>
            <option value="1998">1998</option>
            <option value="1997">1997</option>
            <option value="1996">1996</option>
            <option value="1995">1995</option>
            <option value="1994">1994</option>
            <option value="1993">1993</option>
            <option value="1992">1992</option>
            <option value="1991">1991</option>
            <option value="1990">1990</option>
        </select></td>
    </tr>
    <tr>
        <td>Jenis kelamin</td>
        <td>:</td>
        <td>
        <input type="radio" name="j_kelamin" value="Laki-laki" id="" />Laki-laki
        <input type="radio" name="j_kelamin" value="Perempuan" id="" />Perempuan
        </td>
    </tr>
    <tr>
        <td valign="top">Alamat</td>
        <td valign="top">:</td>
        <td><textarea cols=27 rows=5 name="alamat"> </textarea></td>
    </tr>
    <tr>
        <td>Jurusan</td>
        <td>:</td>
        <td>
        <select name="jurusan">
            <option value="" selected="selected">--Pilih Jurusan
            <option value="Teknik Informatika">Teknik Informatika</option>
            <option value="Sistem Informasi">Sistem Informasi</option>
        </select>
        </td>
    </tr>
    <tr>
        <td>Hobby</td>
        <td>:</td>
        <td>
        <input type="checkbox" name="hobby" value="Olahraga">Olahraga
        <input type="checkbox" name="hobby" value="Musik">Musik
        <input type="checkbox" name="hobby" value="lainnya">Lainnya
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><input type="submit" value="Daftar"/></td>
    </tr>
    </table>
    </form>
    </center>
</body>
</html>


4. buat file baru di notepad++ dan ketikan code berikut dan simpan ke folder pendaftaran tadi, beri nama output.php

<?php
$nama=$_POST['nama'];
$tempat_lahir=$_POST['tempat_lahir'];
$tanggal=$_POST['tanggal'];
$bulan=$_POST['bulan'];
$tahun=$_POST['tahun'];
$j_kelamin=$_POST['j_kelamin'];
$alamat=$_POST['alamat'];
$jurusan=$_POST['jurusan'];
$hobby=$_POST['hobby'];
?>
<a href="input.php">Input Mahasiswa</a>
<form method="POST">
<table width="400" border="1" align="center">
<tr>
    <td colspan="3" align="center">Data Mahasiswa</td>
</tr>
<tr>
    <td>Nama</td>
    <td>:</td>
    <td><?php echo "$nama"?></td>
</tr>
<tr>
    <td>Tempat Lahir</td>
    <td>:</td>
    <td><?php echo "$tempat_lahir"?></td>
</tr>
<tr>
    <td>Tanggal Lahir</td>
    <td>:</td>
    <td><?php echo "$tanggal"?>-<?php echo "$bulan"?>-<?php echo "$tahun"?></td>
</tr>
<tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td><?php echo "$j_kelamin"?></td>
</tr>
<tr>
    <td>Alamat</td>
    <td>:</td>
    <td><?php echo "$alamat"?></td>
</tr>
<tr>
    <td>Jurusan</td>
    <td>:</td>
    <td><?php echo "$jurusan"?></td>
</tr>
<tr>
    <td>Hobby</td>
    <td>:</td>
    <td><?php echo "$hobby"?></td>
</tr>
</table>
</form>


5. Jalankan Browser ketikkan dialamat localhost/pendaftaran/input.php


   Maka tampilannya akan seperti ini


6. Inputkan data mahasiswa di form


   Jika sudah lengkap klik Daftar
7. Setelah itu akan tampil output datanya seperti ini

Untuk input kembali klik Input Mahasiswa


Download Source Code nya DISINI

Baik sampai disini dulu Cara Membuat Form Input Mahasiswa, SELAMAT MENCOBA
 
  

No comments: