Pada tutorial kali ini kita akan belajar Tutorial cara Membuat Form Wizard Bootstrap.
Form Wizard adalah form yang dimana kita menginputkan data secara bertahap, biasanya dipisahkan per kategori, per part ataupun per section. Form Wizard ini biasanya digunakan untuk membuat form registrasi, pendaftaran, melengkapi data dan lain-lain.
Form Wizard merupakan cara paling mudah untuk membuat sebuah form. Dengan menggunakan Form Wizard pengguna saat mengisi data form dapat dengan mudah karena field yang ditampilkan sudah dikelompokkan dan diurutkan sesuai dengan jenis atau kategori data.
Dengan adanya form wizard ini proses input data yang banyak akan lebih mudah karena form sudah dikelompokkan sesuai jenisnya dan kita tidak harus scrool kebawah, sudah ada tombol next dan back.
Kita akan membuat form wizard menggunkan fasilitas bootstrap dan jQuery.
Struktur file form wizard bootstrap yang akan kita buat adalah sebagai berikut:
Kemudian tampilan hasil akhir form wizard kita nanti akan seperti gambar di bawah ini:
Perhatikan gambar diatas, kita akan membuat empat bagian form atau empat jenis isian yaitu Biodata, Alamat, Akun dan Sosial.
Baiklah, berikut ini Tutorial Membuat Form Wizard step by step:
1. Buat sebuah file untuk menampilkan form yang akan kita jadikan sebagai form wizard. Pada contoh ini saya membuat file baru dengan nama index.php kemudian untuk file css-nya dengan nama wizard.css dan file js-nya dengan nama wizard.js
Pertama kita buat file view nya dengan nama index.php.
Berikut isi dari file index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ayo Ngoding - Membuat Form Wizard Bootstrap</title>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="wizard.css">
</head>
<body style="text-align: center;">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<form action="" method="post" class="f1">
<h3>www.ayongoding.com</h3>
<p>Membuat Form Wizard Bootstrap</p>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="25" data-number-of-steps="4" style="width: 25%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>Biodata</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-home"></i></div>
<p>Alamat</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>Akun</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-address-book"></i></div>
<p>Sosial</p>
</div>
</div>
<!-- step 1 -->
<fieldset>
<h4>Identitas Pribadi</h4>
<div class="form-group">
<label>Nama Awal</label>
<input type="text" name="nama_awal" placeholder="Nama Awal" class="form-control">
</div>
<div class="form-group">
<label>Nama Akhir</label>
<input type="text" name="nama_akhir" placeholder="Nama Akhir" class="form-control">
</div>
<div class="form-group">
<label>Tentang Kamu</label>
<textarea name="tentang_kamu" placeholder="Tentang Kamu" class="form-control"></textarea>
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-primary btn-next">Selanjutnya <i class="fa fa-arrow-right"></i></button>
</div>
</fieldset>
<!-- step 2 -->
<fieldset>
<h4>Alamat Lengkap</h4>
<div class="form-group">
<label>Tempat Lahir</label>
<input type="text" name="tempat_lahir" placeholder="Tempat Lahir" class="form-control">
</div>
<div class="form-group">
<label>Alamat Rumah</label>
<input type="text" name="alamat_rumah" placeholder="Alamat Rumah" class="form-control">
</div>
<div class="form-group">
<label>Alamat Kantor</label>
<textarea name="alamat_kantor" placeholder="Alamat Kantor" class="form-control"></textarea>
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-warning btn-previous"><i class="fa fa-arrow-left"></i> Sebelumnya</button>
<button type="button" class="btn btn-primary btn-next">Selanjutnya <i class="fa fa-arrow-right"></i></button>
</div>
</fieldset>
<!-- step 3 -->
<fieldset>
<h4>Buat Akun</h4>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<label>Ulangi password</label>
<input type="password" name="ulangi_password" placeholder="Ulangi password" class="form-control">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-warning btn-previous"><i class="fa fa-arrow-left"></i> Sebelumnya</button>
<button type="button" class="btn btn-primary btn-next">Selanjutnya <i class="fa fa-arrow-right"></i></button>
</div>
</fieldset>
<!-- step 4 -->
<fieldset>
<h4>Sosial Media</h4>
<div class="form-group">
<label>Facebook</label>
<input type="text" name="facebook" placeholder="Facebook" class="form-control">
</div>
<div class="form-group">
<label>Twitter</label>
<input type="text" name="twitter" placeholder="Twitter" class="form-control">
</div>
<div class="form-group">
<label>Google plus</label>
<input type="text" name="google_plus" placeholder="Google plus" class="form-control">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-warning btn-previous"><i class="fa fa-arrow-left"></i> Sebelumnya</button>
<button type="submit" class="btn btn-primary btn-submit"><i class="fa fa-save"></i> Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="wizard.js"></script>
</body>
</html>Perhatikan kode di atas, pada bagian kode program <div class="f1-progress-line" data-now-value="25" data-number-of-steps="4" style="width: 25%;"></div> berfungsi untuk menghitung jumlah step pada form wizard. Ubah bagian ini jika ingin menambah atau mengurangi jumlah step form wizard Anda.
Pada bagian <link rel="stylesheet" href="wizard.css"> Kita memanggil file css dengan nama file wizard.css. Kemudian pada bagian <script src="wizard.js"></script> Kita memanggil file js dengan nama file wizard.js. Maka kita akan buat kedua file tersebut.
2. Buat file dengan wizard.css sebagai tampilan form wizard.
Isi dari file wizard.css adalah sebagai berikut:
.f1-steps { overflow: hidden; position: relative; margin-top: 20px; }
.f1-progress { position: absolute; top: 24px; left: 0; width: 100%; height: 1px; background: #ddd; }
.f1-progress-line { position: absolute; top: 0; left: 0; height: 1px; background: #338056; }
.f1-step { position: relative; float: left; width: 25%; padding: 0 5px; }
.f1-step-icon {
display: inline-block; width: 40px; height: 40px; margin-top: 4px; background: #ddd;
font-size: 16px; color: #fff; line-height: 40px;
-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.f1-step.activated .f1-step-icon {
background: #fff; border: 1px solid #338056; color: #338056; line-height: 38px;
}
.f1-step.active .f1-step-icon {
width: 48px; height: 48px; margin-top: 0; background: #338056; font-size: 22px; line-height: 48px;
}
.f1-step p { color: #ccc; }
.f1-step.activated p { color: #338056; }
.f1-step.active p { color: #338056; }
.f1 fieldset { display: none; text-align: left; }
.f1-buttons { text-align: right; }
.f1 .input-error { border-color: #f35b3f; }Pehatikan kode css diatas, pada pagian .f1-step {position: relative; float: left; width: 25%; padding: 0 5px;} berfungsi untuk mengatur width step pada form wizard. Ubah bagian ini jika ingin menambah atau mengurangi jumlah step form wizard Anda.
3. Selanjutnya untuk javaScript dan jQuery nya Kita Buat file wizard.js.
Isi dari file wizard.js adalah sebagai berikut:
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({scrollTop: scroll_to}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if(direction == 'right') {
new_value = now_value + ( 100 / number_of_steps );
}
else if(direction == 'left') {
new_value = now_value - ( 100 / number_of_steps );
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
$(document).ready(function() {
// Form
$('.f1 fieldset:first').fadeIn('slow');
$('.f1 input[type="text"], .f1 input[type="password"], .f1 textarea').on('focus', function() {
$(this).removeClass('input-error');
});
// step selanjutnya (ketika klik tombol selanjutnya)
$('.f1 .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
// validasi form
parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.f1'), 20 );
});
}
});
// step sbelumnya (ketika klik tombol sebelumnya)
$('.f1 .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.f1'), 20 );
});
});
// submit (ketika klik tombol submit diakhir wizard)
$('.f1').on('submit', function(e) {
// validasi form
$(this).find('input[type="text"], input[type="password"], textarea').each(function() {
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
});
});Perhatikan kode wizard.js di atas, pada bagian kode program function scroll_to_class(element_class, removed_height) merupakan function untuk scroll halaman ke awal isian form.
Pada bagian kode program function bar_progress(progress_line_object, direction) berfungsi untuk bar progress ketika di klik tombol selanjutnya pada form wizard, maka bar progress akan berjalan sesuai posisi wizard saat ini.
Kemudian kode program di dalam function jQuery $(document).ready(function() { ... } tediri dari function step selanjutnya, funtion validasi form, function step sebelumnya, dan function submit form di akhir wizard.
Jika semua file sudah di buat dan disimpan, sekarang coba kita jalankan project form wizard pada browser.
Berikut ini tampilan form wizard di step 1 Biodata:
Tampilan form wizard di step 2 Alamat adalah sebagai berikut:
Tampilan form wizard di step 3 Akun adalah sebagai berikut:
Tampilan form wizard di step 4 Sosial adalah sebagai berikut:
Proses Submit Form Wizard
Kita telah berhasil membuat Form Wizard bootstrap. Lalu bagaimana proses submit nya ke database?
Berikut langkah-langkah membuat proses submit form wizard:
1. Perhatikan file index.php yang sudah kita buat sebelumnya, pada bagian tag html <form> ubah menjadi seperti kode di bawah ini:
<form action="proses.php" method="post" class="f1">2. Jangan lupa pada bagian wizard step ke 4 ada sebuah button submit, pastikan kembali button tersebut dengan type submit seperti kode berikut:
<button type="submit" class="btn btn-primary btn-submit"><i class="fa fa-save"></i> Submit</button>3. Karena form action mengarah ke file proses.php, maka kita harus menyediakan satu file untuk proses submit nya dengan nama proses.php.
Buat sebuah file dengan nama proses.php pada direktori root project form wizard.
Sehingga struktur file form wizard bootstrap menjadi sperti berikut:
Isi dari file proses.php seperti berikut ini:
<?php
// data dari step 1
$nama_awal = $_POST['nama_awal'];
$nama_akhir = $_POST['nama_akhir'];
$tentang_kamu = $_POST['tentang_kamu'];
// data dari step 2
$tempat_lahir = $_POST['tempat_lahir'];
$alamat_rumah = $_POST['alamat_rumah'];
$alamat_kantor = $_POST['alamat_kantor'];
// data dari step 3
$email = $_POST['email'];
$password = $_POST['password'];
// data dari step 4
$facebook = $_POST['facebook'];
$twitter = $_POST['twitter'];
$google_plus = $_POST['google_plus'];
echo "<b>Identitas Pribadi</b><br>Nama Awal: ".$nama_awal."<br>Nama AKhir: ".$nama_akhir."<br>Tetang Kamu: ".$tentang_kamu."<br><br>";
echo "<b>Alamat Lengkap</b><br>Tempat Lahir: ".$tempat_lahir."<br>Alamat Rumah: ".$alamat_rumah."<br>Alamat Kantor: ".$alamat_kantor."<br><br>";
echo "<b>Akun</b><br>Email: ".$email."<br>Password: ".$password."<br><br>";
echo "<b>Sosial Media</b><br>Fasebook: ".$facebook."<br>Twitter: ".$twitter."<br>Google Plus: ".$google_plus."<br><br>";
?>Hasil ketika klik tombol submit seperti gambar di bawah ini:
Maka sampai disini kita telah selesai membuat Form Wizard Bootstrap dan Proses Submit Form Wizard ke database.
Untuk proses submitnya bagaimana bang?
untuk proses submit nya sama seperti submit pada php bang.
silahkan buka tutorial berikut ini yaa Membuat Proses Submit Form Wizard
untuk menambah kan inputan misal combobox pada biodata yang perlu di tambah apa aja ya bang?
izin bang, file proses (submit) bisakah di conver file template.rtf, saya coba ga bisa2, mohon petunjuk
bisakah filenya langsung masuk ke template.rtf, saya coba2 ga bisa2, mohon petunjuk
Sangat Membantu
terimakasih