Membuat form pendaftaran mahasiswa baru dengan php dan mysql

Question

Buat teman-teman yang sedang belajar PHP kali ini saya ingin membagikan contoh form pendaftaran mahasiswa baru dengan PHP dan database mysql. Sebagai tambahan nya saya juga menggunakan bootstrap 4 untuk desain tampilan form nya. Form ini sudah saya sesuaikan dengan form registrasi untuk kampus tertentu (saya mengambil referensi dari kampus saya sendiri).

Table of Contents Show

Cara Membuat Form Pendaftaraan Mahasiswa Baru
1. Dowload Bootstrap dan Jquery
2. Download Database Wilayah Administratif Indonesia
3. Buat Database
4. Buat File Koneksi Database
5. Buat file index.php
6. Buat File ambil-data.php
Download Source Code
Akhir Kata…

Artikel terkait: Membuat form pendaftaraan sederhana

Form pendaftaran ini masih cukup sederhana belum menggunakan validasi form. Kalian bisa mengembangkannya dengan menambahkan validasi nya. atau menampilkan hasil review setelah mahasiswa melakukan pendaftaran.

Tampilan form nya seperti pada gambar berikut:

Perlu saya jelaskan sedikit untuk data alamat asal pada field provinsi, kabupaten/kota, kecamatan menggunakan combobox dinamis yang data-nya akan di ambil dari database. Combobox (tag select) bertingkat menggunakan teknik ajax.

Cara Membuat Form Pendaftaraan Mahasiswa Baru

1. Dowload Bootstrap dan Jquery

Tahap pertama kalian perlu download dulu file css bootstrap dan jquery.

Versi bootstrap yang saya gunakan sudah versi 4, namun masih memungkinkan untuk memakai versi 3.

Untuk versi jquery saya menggunakan versi jquery-3.4.1

2. Download Database Wilayah Administratif Indonesia

Pada proses pendaftaran mahasiswa baru dibutuhkan kolom isian untuk alamat asal seperti provinsi, kota/kabupaten dan kecamatan.

Isian seperti ini biasanya sering di temui saat kalian belanja online misalnya yang membutuhkan alamat untuk proses pengiriman barang pesanan anda.

Oleh sebab itu kita membutuhkan basis data yang mencakup seluruh wilayah Indonesia yang terdiri dari nama provinsi, kota/kabupaten dan kecamatan.

Untuk mendownload klik disini

3. Buat Database

Buatlah sebuah database baru dengan nama pendaftaran_mahasiswa_baru. kalian bisa membuat lewat phpMyAdmin atau melalui perintah sql di CMD

CREATE DATABASE pendaftaran_mahasiswa_baru

Selanjutnya buatlah sebuah tabel di dalam database tersebut dengan nama pendaftaran.

Struktur tabel pendaftaran seperti pada gambar di bawah ini:

id_pendaftaran akan dijadikan sebagai kunci utama (primary key) sekaligus menggunakan auto_increment agar nilai kolom ini terisi secara otomatis saat penambahan rows pada tabel.

Terdapat 21 kolom pada tabel pendaftaran yang masing-masing kolom memiliki tipe data yang berbeda-beda. Kalian bisa menyesuaikan sesuai kebutuhan.

4. Buat File Koneksi Database

Buatlah file baru dengan nama koneksi.php menggunakan teks editor kalian punya.

<?php
    $host="localhost";
    $user="root";
    $password="";
    $db="pendaftaran_mahasiswa_baru";

    $kon = mysqli_connect($host,$user,$password,$db);
        if (!$kon){
            die("Koneksi gagal:".mysqli_connect_error());
        }

?>

5. Buat file index.php

Selanjutnya buatlah file index.php sebagai halaman utama pada project kita kali ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pendaftaran Mahasiswa Baru</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery/jquery-3.4.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container p-3 my-3 border">
    <h2 class="text-center">Form Pendaftaran Mahasiswa Baru</h2>
    <?php
    //Include file koneksi, untuk koneksikan ke database
    include "koneksi.php";
    
    //Fungsi untuk mencegah inputan karakter yang tidak sesuai
    function input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
    //Cek apakah ada kiriman form dari method post
    if ($_SERVER["REQUEST_METHOD"] == "POST") {

        $nama=input($_POST["nama"]);
        $nik=input($_POST["nik"]);
        $tempat_lahir=input($_POST["tempat_lahir"]);
        $tanggal_lahir=input($_POST["tanggal_lahir"]);
        $jk=input($_POST["jk"]);
        $kewarganegaraan=input($_POST["kewarganegaraan"]);
        $agama=input($_POST["agama"]);
        $nama_ibu=input($_POST["nama_ibu"]);
        $email=input($_POST["email"]);
        $no_telp=input($_POST["no_telp"]);
        $alamat=input($_POST["alamat"]);
        $kode_pos=input($_POST["kode_pos"]);
        $provinsi=input($_POST["provinsi"]);
        $kabupaten=input($_POST["kabupaten"]);
        $kecamatan=input($_POST["kecamatan"]);
        $pendidikan=input($_POST["pendidikan"]);
        $sekolah=input($_POST["sekolah"]);
        $nilai_raport=input($_POST["nilai_raport"]);
        $prog1=input($_POST["prog1"]);
        $prog2=input($_POST["prog2"]);

        //Query input menginput data kedalam tabel pendaftaraan
        $sql="insert into pendaftaraan (nama,nik,tempat_lahir,tanggal_lahir,jk,kewarganegaraan,agama,nama_ibu,email,no_telp,alamat,kode_pos,provinsi,kabupaten,kecamatan,pendidikan,sekolah,nilai_raport,prog1,prog2) values
		('$nama','$nik','$tempat_lahir','$tanggal_lahir',$jk,'$kewarganegaraan','$agama','$nama_ibu','$email','$no_telp','$alamat','$kode_pos','$provinsi','$kabupaten','$kecamatan','$pendidikan','$sekolah',$nilai_raport,'$prog1','$prog2')";

        //Mengeksekusi/menjalankan query diatas
        $hasil=mysqli_query($kon,$sql);

        //Kondisi apakah berhasil atau tidak dalam mengeksekusi query diatas
        if ($hasil) { 
            echo "<div class='alert alert-success'> Selamat $nama anda telah berhasil mendaftar.</div>"; 
        }
        else {
            echo "<div class='alert alert-danger'> Pendaftaraan Gagal.</div>";
        }
    }
    ?>
        <form id="form" method="post">
            <div class="alert alert-primary">
                <strong>Data Diri</strong>
            </div>
            <div class="row">
                <div class="col-sm-7">

                    <div class="form-group">
                        <label>Nama Lengkap:</label>
                        <input type="text" name="nama" class="form-control" placeholder="Masukan Nama Lengkap">
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="form-group">
                        <label>Nomor Identitas (NIK):</label>
                        <input type="text" name="nik" class="form-control" placeholder="Masukan Nomor NIK">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Tempat Lahir:</label>
                        <input type="text" name="tempat_lahir" class="form-control" placeholder="Masukan Tempat Lahir">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label>Tanggal Lahir:</label>
                        <input type="date" name="tanggal_lahir" class="form-control">
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="form-group">
                        <label>Jenis Kelamin:</label>
                        <select class="form-control" name="jk">
                            <option>Pilih</option>
                            <option value="1">Laki-laki</option>
                            <option value="2">Perempuan</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="row">

                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Kewarganegaraan:</label>
                        <select class="form-control" name="kewarganegaraan">
                            <option>Pilih</option>
                            <option value="WNI">Warga Negara Indonesia</option>
                            <option value="WNA">Warga Negara Asing</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label>Agama:</label>
                        <select class="form-control" name="agama">
                            <option>Pilih</option>
                            <option value="Islam">Islam</option>
                            <option value="Kristen">Kristen</option>
                            <option value="Katolik">Katolik</option>
                            <option value="Hindu">Hindu</option>
                            <option value="Budha">Budha</option>
                            <option value="Lainnya">Lainnya</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="form-group">
                        <label>Nama Ibu Kandung:</label>
                        <input type="text" name="nama_ibu" class="form-control" placeholder="Masukan Nama Ibu Kandung">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Email:</label>
                        <input type="email" name="email" class="form-control" placeholder="Masukan Email">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label>No Telp:</label>
                        <input type="text" name="no_telp" class="form-control" placeholder="Masukan No Telp">
                    </div>
                </div>
            </div>
            <div class="alert alert-primary">
                <strong>Data Alamat Asal</strong>
            </div>
            <div class="row">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label>Alamat:</label>
                        <textarea class="form-control" name="alamat" rows="2" id="alamat"></textarea>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label>Kode Pos:</label>
                        <input type="text" name="kode_pos" class="form-control" placeholder="Kode Pos">
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Provinsi:</label>
                        <select class="form-control" name="provinsi" id="provinsi">
                            <?php
                            include "koneksi.php";
                            //Perintah sql untuk menampilkan semua data pada tabel provinsi
                            $sql="select * from provinsi";
                            $hasil=mysqli_query($kon,$sql);
                            while ($data = mysqli_fetch_array($hasil)) {
                                ?>
                            <option value="<?php echo $data['id_prov'];?>"><?php echo $data['nama'];?></option>
                            <?php
                                }
                        ?>
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Kabupaten:</label>
                        <select class="form-control" name="kabupaten" id="kabupaten">
                            <!-- Kabupaten akan diload menggunakan ajax, dan ditampilkan disini -->
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Kecamatan:</label>
                        <select class="form-control" name="kecamatan" id="kecamatan">
                            <!-- Kecamatan akan diload menggunakan ajax, dan ditampilkan disini -->
                        </select>
                    </div>
                </div>

            </div>
            <script>
            $("#provinsi").change(function() {
                // variabel dari nilai combo provinsi
                var id_provinsi = $("#provinsi").val();

                // Menggunakan ajax untuk mengirim dan dan menerima data dari server
                $.ajax({
                    type: "POST",
                    dataType: "html",
                    url: "ambil-data.php",
                    data: "provinsi=" + id_provinsi,
                    success: function(data) {
                        $("#kabupaten").html(data);
                    }
                });
            });

            $("#kabupaten").change(function() {
                // variabel dari nilai combo box kabupaten
                var id_kabupaten = $("#kabupaten").val();

                // Menggunakan ajax untuk mengirim dan dan menerima data dari server
                $.ajax({
                    type: "POST",
                    dataType: "html",
                    url: "ambil-data.php",
                    data: "kabupaten=" + id_kabupaten,
                    success: function(data) {
                        $("#kecamatan").html(data);
                    }
                });
            });
            </script>
            <div class="alert alert-primary">
                <strong>Data Pendidikan</strong>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Pendidikan Terakhir:</label>
                        <select class="form-control" name="pendidikan">
                            <option value="SMA-IPA">SMA - IPA</option>
                            <option value="SMA-IPS">SMA - IPS</option>
                            <option value="SMK-IPA">SMK - IPA</option>
                            <option value="SMK-IPS">SMK - IPS</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Nama Sekolah:</label>
                        <input type="text" name="sekolah" class="form-control" placeholder="Masukan Nama Sekolah">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Rata-rata Nilai Rapor Kelas 12:</label>
                        <input type="text" name="nilai_raport" class="form-control"
                            placeholder="Masukan Rata-rata nilai raport">
                    </div>
                </div>
            </div>
            <div class="alert alert-primary">
                <strong>Pilihan Program Studi</strong>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Pilih Program Studi 1:</label>
                        <select class="form-control" name="prog1">
                            <option value="D3 - Teknik Komputer">D3 - Teknik Komputer</option>
                            <option value="D3 - Komputerisasi Akuntansi">D3 - Komputerisasi Akuntansi</option>
                            <option value="D3 - Manajemen Informatika">D3 - Manajemen Informatika</option>
                            <option value="S1 - Sistem Informasi">SI - Sistem Informasi</option>
                            <option value="S1 - Teknik Informatika">SI - Teknik Informatika</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Pilih Program Studi 2:</label>
                        <select class="form-control" name="prog2">
                            <option value="D3 - Teknik Komputer">D3 - Teknik Komputer</option>
                            <option value="D3 - Komputerisasi Akuntansi">D3 - Komputerisasi Akuntansi</option>
                            <option value="D3 - Manajemen Informatika">D3 - Manajemen Informatika</option>
                            <option value="S1 - Sistem Informasi">SI - Sistem Informasi</option>
                            <option value="S1 - Teknik Informatika">SI - Teknik Informatika</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <button type="submit" name="Submit" id="Submit" class="btn btn-primary">Daftar</button>
                    <button type="reset" class="btn btn-secondary">Reset</button>
                </div>

            </div>
        </form>
    </div>
</body>
</html>

6. Buat File ambil-data.php

<?php
include "koneksi.php";
if (isset($_POST['provinsi'])) {
    $provinsi = $_POST["provinsi"];

    $sql = "select * from kabupaten where id_prov=$provinsi";
    $hasil = mysqli_query($kon, $sql);
    while ($data = mysqli_fetch_array($hasil)) {
        ?>
        <option value="<?php echo  $data['id_kab']; ?>"><?php echo ucwords($data['nama']); ?></option>
        <?php
    }
}
if (isset($_POST['kabupaten'])) {
    $id_kabupaten = $_POST["kabupaten"];

    $sql = "select * from kecamatan where id_kab=$id_kabupaten";
    $hasil = mysqli_query($kon, $sql);
    while ($data = mysqli_fetch_array($hasil)) {
        ?>
        <option value="<?php echo  $data['id_kec']; ?>"><?php echo ucwords($data['nama']); ?></option>
        <?php
    }
}
?>

File ambil-data.php berfungsi untuk mengambil data kabupaten dan kecamatan berdasarkan ID provinsi yang dikirim menggunakan ajax saat combobox provinsi dipilih.

Jika kalian ikuti sesuai dengan langkah-langkah di atas, hasilnya seperti contoh berikut:

Download Source Code

Jika teman-teman kesulitan mengikuti langkah-langkah di atas, saya sudah menyediakan source code dan database nya yang bisa kalian download dan langsung gunakan.

[sociallocker id=”5349″] [/sociallocker]

Akhir Kata…

Sekian pembahasan singkat mengenai contoh membuat form pendaftaran mahasiswa baru menggunakan PHP dan MySQLI. Semoga bermanfaat dan membantu teman-teman semua.

Oh iya versi PHP yang saya gunakan sudah menggunakan PHP 7 jika kalian menjalankan di localhost kalian dan mengalami error kemungkinan karena versi PHP kalian perlu di perbarui ke versi yang terbaru (versi 7).

Bila ada pertanyaan silakan kirim melalui kolom komentar di bawah artikel ini, Terima kasih.

kode php