Membuat Formulir Pendaftaran Online Untuk Input Ke Database

Pada tahap ini kita akan membuat halaman formulir pendaftaran online yang nantinya akan digunakan untuk menambahkan anggota ke database, karena pada tahap sebelumnya kita telah membuat template tambah.html silahkan anda buka file tersebut, jika anda baru mengujungi halaman ini silahkan kembali ke pembuatan halaman utama dan form pendaftaran online.

Perbedaan file form html dengan form php ini yang adalah dengan menggunakan php maka halaman akan kita ubah ke bentuk dinamis dan memiliki proses input ke database yang telah kita buat.

Membuat Formulir Pendaftaran Online

Untuk membuat formulir pendaftaran online dinamis ini maka silahkan anda buka file tambah.html yang telah dibuat sebelumnya lalu salin bagian kode dibawah ini dengan menambahkan tag form didalamnya dan simpan dengan nama tambah.php di folder content.

<h3>Tambah Anggota</h3>
<form action="" method="POST">
<div class="content">
    <table class="table-form" border="0" width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td width="20%"><label for="nama">Nama Lengkap</label></td>
            <td colspan="3"><input name="nama" id="nama" type="text" class="form"></td>
        </tr>
        <tr>
            <td><label for="tempat_lahir">Tempat Lahir</label></td>
            <td><input name="tempat_lahir" id="tempat_lahir" type="text" class="form"></td>
            <td><label>Tanggal Lahir</label></td>
            <td>
                <select name="tgl_lahir" class="form">
                    <option>xx</option>
                    <option>xx</option>
                    <option>xx</option>
                </select>
                <select name="bln_lahir" class="form">
                    <option>xx</option>
                    <option>xx</option>
                    <option>xx</option>
                </select>
                <select name="thn_lahir" class="form">
                    <option>xxxx</option>
                    <option>xxxx</option>
                    <option>xxxx</option>
                </select>
            </td>
        </tr>
        <tr>
            <td valign="top"><label for="alamat">Alamat</label></td>
            <td valign="top" colspan="2">
                <textarea name="alamat" id="alamat" class="form" cols="50" rows="8"></textarea>
            </td>
            <td valign="top">
                <div>
                    <label for="kota">Kota</label>
                    <input type="text" name="kota" id="kota" class="form">
                </div>
                <div>
                    <label for="negara">Negara</label>
                    <input type="text" name="negara" id="negara" class="form">
                </div>
                <div>
                    <label for="kode_pos">Kode Pos</label>
                    <input type="number" name="kode_pos" id="kode_pos" class="form">
                </div>
            </td>
        </tr>
        <tr>
            <td><label for="hp">No. HP</label></td>
            <td colspan="3"><input name="hp" id="hp" type="number" class="form"></td>
        </tr>
        <tr>
            <td><label for="email">Email</label></td>
            <td colspan="3"><input name="email" id="email" type="text" class="form"></td>
        </tr>
        <tr>
            <td><label for="tinggi_badan">Tinggi Badan</label></td>
            <td colspan="3"><input name="tinggi_badan" id="tinggi_badan" type="number" class="form"></td>
        </tr>
        <tr>
            <td><label for="berat_badan">Berat Badan</label></td>
            <td colspan="3"><input name="berat_badan" id="berat_badan" type="number" class="form"></td>
        </tr>
    </table>
</div>
<input type="submit" class="btn" value="Simpan">
</form>Code language: HTML, XML (xml)

Jika file tambah.php ini sudah di letakan di folder content maka kita buka kembali file index.php lalu pada bagian kode dibawah ini didalam file index.php:

<?php include('content/home.php'); ?>Code language: HTML, XML (xml)

Diubah menjadi seperti dibawah ini:

<?php

    if(empty($_GET['page']) OR $_GET['page'] == NULL) {
        include('content/home.php');
    }
    elseif(!empty($_GET['page']) && $_GET['page'] == 'tambah') {
        include('content/tambah.php');
    }
 
 ?>Code language: HTML, XML (xml)

Setelah itu buka file home.php yang berada di folder content dan ubah bagian kode dibawah ini didalam file home.php tersebut:

<a href="" class="btn">Tambah</a>Code language: HTML, XML (xml)

Menjadi seperti dibawah ini:

<a href="index.php?page=tambah" class="btn">Tambah</a>Code language: HTML, XML (xml)

Lalu sekarang buka url dibawah ini dan klik tombol tambah yang terdapat pada halaman utama pendaftaran online.

http://localhost/tutorial/php-mysql/pendaftaran/Code language: JavaScript (javascript)

Maka jika tombol tambah di klik secara otomatis akan diarahkan ke halaman formulir pendaftaran online, sama seperti template yang telah kita buat, namun bedanya ini bersifat dinamis.

Membuat Tanggal, Bulan, Tahun Secara Dinamis

Karena didalam formulir pendaftaran online terdapat beberapa form untuk menentukan tanggal, bulan dan tahun lahir maka tidak mungkin kita menambahkan satu persatu mulai dari tahun 1990 sampai ke tahun saat ini, tentu itu akan menjadi teks yang panjang nantinya. Maka solusinya adalah dengan menjadikan penanggalan tersebut dinamis, caranya dengan menggunakan perulangan, silahkan buka file tambah.php yang berada di folder content lalu buat seperti dibawah ini.

Tanggal lahir dinamis.

Pada bagian kode dibawah ini:

<select name="tgl_lahir" class="form">
    <option>xx</option>
    <option>xx</option>
    <option>xx</option>
</select>Code language: HTML, XML (xml)

Ubah menjadi dibawah ini:

<select name="tgl_lahir" class="form">
<?php 
   for($tanggal = 1; $tanggal <= 31; $tanggal++) {
       if($tanggal < 10) {
           echo '<option value="0'. $tanggal .'">0'. $tanggal .'</option>';
       }
       else {
           echo '<option value="'. $tanggal .'">'. $tanggal .'</option>';
       }
    }
 ?>
 </select>Code language: HTML, XML (xml)

Bulan lahir dinamis

Silahkan ganti kode dibawah ini:

<select name="bln_lahir" class="form">
    <option>xx</option>
    <option>xx</option>
    <option>xx</option>
</select>Code language: HTML, XML (xml)

Menjadi seperti kode dibawah ini:

<select name="bln_lahir" class="form">
<?php 
    for($bulan = 1; $bulan <= 12; $bulan++) {
        if($bulan < 10) {
            echo '<option value="0'. $bulan .'">0'. $bulan .'</option>';
        }
        else {
            echo '<option value="'. $bulan .'">'. $bulan .'</option>';
        }
    }
?>
</select>Code language: HTML, XML (xml)

Tahun lahir dinamis

Tahun lahir dengan perulangan ini diawali dari tahun sekarang (terbaru) sampai tahun 1980. Caranya silahkan ganti kode dibawah ini:

<select name="thn_lahir" class="form">
    <option>xx</option>
    <option>xx</option>
    <option>xx</option>
</select>Code language: HTML, XML (xml)

Dengan kode dibawah ini:

<select name="thn_lahir" class="form">
<?php 
    for($tahun = date('Y'); $tahun >= 1980; $tahun--) {
        echo '<option value="'. $tahun .'">'. $tahun .'</option>';
    }
?>
</select>Code language: HTML, XML (xml)

Jika semua sudah setelah silahkan buka kembali halaman formulir pendaftaran, maka penanggalan tanggal lahir sudah menjadi dinamis yang dilakukan oleh php.

http://localhost/tutorial/php-mysql/pendaftaran/index.php?page=tambah

Membuat Proses Input Anggota Ke Database MySQL

Jika semua sudah berjalan dengan baik maka kini saatnya kita membuat proses formulir pendaftaran diatas agar dapat melakukan penyimpanan data ke database mysql.

Masih di file tambah.php yang berada di folder content, silahkan ubah kode dibawah ini pada file tambah.php:

<form action="" method="POST">Code language: HTML, XML (xml)

Menjadi seperti dibawah ini:

<form action="aksi/aksi_tambah.php" method="POST">Code language: HTML, XML (xml)

Setelah itu buat sebuah file bernama aksi_tambah.php lalu salin kode dibawah ini dan simpan di folder aksi, jika belum ada maka silahkan buat folder aksi (penjelasan hierarki telah ada pada tutorial pengenalan).

<?php

include('../config/koneksi.php');

$nama          = $_POST['nama'];
$tempat_lahir  = $_POST['tempat_lahir'];
$tanggal_lahir = $_POST['thn_lahir'] . '-' . $_POST['bln_lahir'] . '-' . $_POST['tgl_lahir'];
$alamat        = $_POST['alamat'];
$kota          = $_POST['kota'];
$negara        = $_POST['negara'];
$kode_pos      = $_POST['kode_pos'];
$hp            = $_POST['hp'];
$email         = $_POST['email'];
$tinggi_badan  = $_POST['tinggi_badan'];
$berat_badan   = $_POST['berat_badan'];

$query = mysqli_query($connect, "INSERT INTO anggota(nama_lengkap, tempat_lahir, tanggal_lahir, alamat, kota, negara, kode_pos, no_hp, email, tinggi_badan, berat_badan) 
                      VALUES ('$nama_lengkap', '$tempat_lahir', '$tanggal_lahir', '$alamat', '$kota', '$negara', '$kode_pos', '$no_hp', '$email', '$tinggi_badan', '$berat_badan')");

if($query) {
    header('location:../index.php?aksi=tambah&status=true');
}
else {
    header('location:../index.php?page=tambah&status=false');
}

?>Code language: HTML, XML (xml)

Jika sudah silahkan kembali ke halaman tambah, yaitu di url dibawah ini:

http://localhost/tutorial/php-mysql/pendaftaran/index.php?page=tambah

Lalu isi semua form yang ada di halaman tambah tersebut, setelah klik tombol Simpan, jika halaman berubah ke halaman utama atau halaman index, maka data berhasil disimpan, namun jika masih dihalaman tambah maka data gagal disimpan.

Untuk dapat melihat atau memastikan apakah data yang telah di isi pada form-form yang ada di halaman tambah itu tersimpan di database, caranya buka phpmyadmin anda di  url:

http://localhost/phpmyadmin/

Lalu klik database belajar_pendaftaran_online dan klik tabel anggota, maka apabila benar-benar berhasil seharusnya ada data yang tersimpan ditabel tersebut, seperti gambar dibawah ini:

membuat formulir pendaftaran online input ke database mysql

Terlihat bahwa data-data yang diisi dihalaman tambah tadi ternyata telah masuk didatabase, maka itu menandakan proses tambah anggota pada formulir pendaftaran online ini telah berhasil. Demikian tutorial tahap ini, untuk tahap selanjutnya adalah menampilkan seluruh anggota pendaftaran formulir ini.

25 Komentar

Budy Aja

Budy Aja

gimn caranya ya membuat form untuk penginputan nilai peserta didik semua mapel dari semester 1 sampai 6
Bahasaweb.com

Bahasaweb.com

@Budy Aja
proses tersebut dapat dibuat dengan menggunakan php, mysql, html.
Balas #89
ithoy Rasamala

ithoy Rasamala

databasenya mana gan,,,, boleh saya minta data basenya master mohon pengarahannya terima kasih
Bahasaweb.com

Bahasaweb.com

@ithoy Rasamala
pada tutorial ini ada step by step yg perlu di pelajari, silahkan di ikuti dari awal.
Balas #90
pay thea

pay thea

gan ane masih belum mudeng () itu script PHP nya yang mana yang home.php
al aja

al aja

lu punya web tapi ga di perhatiin, ada yg nanya ga lu jawab, males gw juga promosiinnya.
Bahasaweb.com

Bahasaweb.com

@al aja
maaf sobat, untuk beberapa bulan ini admin tengah ada kesibukan dalam pekerjaan, diusahakan dalam waktu dekat akan ada update lagi. Terima kasih
Balas #88
Otaku_Desu

Otaku_Desu

kasih contoh form pendaftaran beserta foto yang ditampilkan nanti terus usahakan beri hasil dari percobaannya donk
Bahasaweb.com

Bahasaweb.com

@Otaku_Desu
selanjutnya akan ada file demo dari program yang akan dibuat.
Balas #112
arief aditya

arief aditya

web ini lanjutannya yang "embuatan halaman utama dan form pendaftaran online." kan? tapi kok dihalaman ini ada "index.php" sedangkan di halaman sebelumnya hanya ada"index.html? beri petunjukmu min? gua butuh banget nihh:v
Balas #107
Bahasaweb.com

Bahasaweb.com

@arief aditya
maaf sobat, untuk kelanjutannya akan terus di update oleh Bahasaweb.com dan akan banyak tutorial-tutorial menarik lainnya.
Balas #111
Suramin

Suramin

share donk file sql.y
Balas #115
Ananda

Ananda

Kl mau ngasih background ke web nya ini nambahinnya dimananya ya?
Balas #190
Aris Munandar

Aris Munandar

@Ananda
Pakai css mas.
Balas #191
david tri handoyo

david tri handoyo

skrip untuk menambahkan jenis kelamin sama foto gk ada ya mas?? kalau boleh saya minta skripnya mas
Balas #1417
Aris Munandar

Aris Munandar

@david tri handoyo
Kalau masnya mengikuti tutorial ini step by step saya rasa mas bisa kembangkan untuk menambahkan jenis kelamin.
Balas #1420
Abhe

Abhe

mau tanya donk,. kl semua udah d isi komplit dan udah berhasil masuk db, tp d db nya ada yg g ke input itu knp ya? di praktek sy, nama lengkap dan no hp nya g ada di db tuh,. kl yg lainnya ada,. tolong pencerahannya ya,. mkasih,.
Balas #1886
Ts

Ts

Kira-kira apa Aplikasi atau sejenisnya yang bisa digunakan untuk input data pasien? 1 to banyak. Misalnya 1 Pemilik Hewan bawa 3 Ekor kucing
Balas #1981
Aris Munandar

Aris Munandar

@Ts
untuk aplikasi yang ditanya saya tidak tahu.. tapi kalau mau dibuatkan bisa PM.
Balas #1983
asmaul husna

asmaul husna

mau pengajuan bpjs
Balas #2063
Aris Munandar

Aris Munandar

@asmaul husna
maksudnya bagaimana ya kak?
Balas #2064
Ragil permadi

Ragil permadi

Pencairan dana BPJS tku
Balas #2128
Aris Munandar

Aris Munandar

@Ragil permadi
ada yang bisa di bantu?
Balas #2129
risaltanjung

risaltanjung

risaltanjung27@gmail.com
Balas #2130
Aris Munandar

Aris Munandar

@risaltanjung
ada yang bisa dibantu?
Balas #2132
Terima kasih telah memilih untuk meninggalkan komentar. Harap diingat bahwa semua komentar dimoderasi sesuai dengan kebijakan, dan informasi anda TIDAK akan dipublikasikan. Harap JANGAN gunakan kata kunci di kolom nama. Mari kita buat diskusi yang menarik dan bermakna.

Tinggalkan komentar

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.