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.
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:
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.
Budy Aja