Mendengar kata form wizard mungkin ada beberapa orang yang belum pernah dengar atau mungkin pernah menggunakan tapi ga tau namanya. Ok, maka dari itu pada postingan kali ini saya akan mencoba membagikan tutorial tentang cara membuat sebuah form wizard dengan library "smart_wizard". Sebelum lanjut lebih jauh, form wizard yang saya maksud adalah form yang dimana kita menginputkan data secara bertahap, biasanya dipisahkan per kategori, per part ataupun per section. Contoh ini biasanya digunakan untuk membuat form registrasi, wawancara, dll. Lebih jelasnya kalian bisa lihat contoh gambar di bawah ini. (heheheheh bingung jelasinnya lagi, tapi kalau liat gambar pasti langsung ngerti)
Contoh pada postingan ini, saya menggunakan frawework css bootstrap, kemudian library smart_wizard dan tentunya library jQuery. Seperti biasa untuk memudahkan teman-teman dalam memahami artikel ini, saya juga sudah sediakan link pada akhir artikel untuk mendownload contoh dari form wizard ini.
ok, langsung saja berikut adalah struktur file yang saya gunakan :
-css
-bootstrap.css
-smart_wizard.css
-smart_wizard_theme_dots.css
-js
-bootstrap.js
-jquery.smartWizard.js
-jquery-1.11.2.min.js
-index.html
Buat file index.html kemudian ketik script berikut :
<!DOCTYPE html>
<html>
<head>
<title>Bermain Form Wizard</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Include SmartWizard CSS -->
<link href="css/smart_wizard.css" rel="stylesheet" type="text/css" />
<!-- Optional SmartWizard theme -->
<link href="css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<br />
<form action="#" id="myForm" role="form" method="post" accept-charset="utf-8">
<!-- SmartWizard html -->
<div id="smartwizard">
<ul>
<li><a href="#step-1">Step 1<br /><small>Data Pribadi</small></a></li>
<li><a href="#step-2">Step 2<br /><small>Data Kontak</small></a></li>
<li><a href="#step-3">Step 3<br /><small>Data Pendidikan</small></a></li>
<li><a href="#step-4">Step 4<br /><small>Data Pengalaman Kerja</small></a></li>
</ul>
<div>
<div id="step-1">
<h2>Form Data Pribadi</h2>
<!-- isi dengan form sesuai kebutuhan -->
</div>
<div id="step-2">
<h2>Form Data Kontak</h2>
<!-- isi dengan form sesuai kebutuhan -->
</div>
<div id="step-3">
<h2>Form Data Pribadi</h2>
<!-- isi dengan form sesuai kebutuhan -->
</div>
<div id="step-4" class="">
<h2>Form Data Pengalaman Kerja</h2>
<!-- isi dengan form sesuai kebutuhan -->
</div>
</div>
</div>
</form>
</div>
<!-- Include jQuery -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include jQuery Validator plugin -->
<script src="js/bootstrap.js"></script>
<script src="js/jquery.smartWizard.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Toolbar extra buttons
var btnFinish = $('<button></button>').text('Finish')
.attr('id','btn-finish')
.addClass('btn btn-info')
.on('click', function(){
});
var btnCancel = $('<button></button>').text('Cancel')
.addClass('btn btn-danger')
.on('click', function(){
$('#smartwizard').smartWizard("reset");
});
// Smart Wizard
$('#smartwizard').smartWizard({
selected: 0,
theme: 'dots',
transitionEffect:'fade',
toolbarSettings: {toolbarPosition: 'bottom',
toolbarExtraButtons: [btnFinish, btnCancel]
},
anchorSettings: {
markDoneStep: true, // add done css
markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
}
});
$("#btn-finish").addClass('disabled');
$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
//alert("You are on step "+stepNumber+" now");
if(stepPosition == 'first'){
$("#prev-btn").addClass('disabled');
$("#btn-finish").addClass('disabled');
}else if(stepPosition == 'final'){
$("#next-btn").addClass('disabled');
$("#btn-finish").removeClass('disabled');
}else{
$("#prev-btn").removeClass('disabled');
$("#next-btn").removeClass('disabled');
$("#btn-finish").addClass('disabled');
}
});
});
</script>
</body>
</html>
selanjutnya tinggal save kemudian coba jalankan di browser.
Untuk konten form setiap part nya bisa disesuaikan dengan kebutuhan masing-masing ya dan kalau ada yang belum dipahami bisa tinggalkan komentar dibawah.
ok, langsung saja berikut adalah struktur file yang saya gunakan :
-css
-bootstrap.css
-smart_wizard.css
-smart_wizard_theme_dots.css
-js
-bootstrap.js
-jquery.smartWizard.js
-jquery-1.11.2.min.js
-index.html
Buat file index.html kemudian ketik script berikut :
<!DOCTYPE html>
<html>
<head>
<title>Bermain Form Wizard</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Include SmartWizard CSS -->
<link href="css/smart_wizard.css" rel="stylesheet" type="text/css" />
<!-- Optional SmartWizard theme -->
<link href="css/smart_wizard_theme_dots.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<br />
<form action="#" id="myForm" role="form" method="post" accept-charset="utf-8">
<!-- SmartWizard html -->
<div id="smartwizard">
<ul>
<li><a href="#step-1">Step 1<br /><small>Data Pribadi</small></a></li>
<li><a href="#step-2">Step 2<br /><small>Data Kontak</small></a></li>
<li><a href="#step-3">Step 3<br /><small>Data Pendidikan</small></a></li>
<li><a href="#step-4">Step 4<br /><small>Data Pengalaman Kerja</small></a></li>
</ul>
<div>
<div id="step-1">
<h2>Form Data Pribadi</h2>
<!-- isi dengan form sesuai kebutuhan -->
</div>
<div id="step-2">
<h2>Form Data Kontak</h2>
<!-- isi dengan form sesuai kebutuhan -->
</div>
<div id="step-3">
<h2>Form Data Pribadi</h2>
<!-- isi dengan form sesuai kebutuhan -->
</div>
<div id="step-4" class="">
<h2>Form Data Pengalaman Kerja</h2>
<!-- isi dengan form sesuai kebutuhan -->
</div>
</div>
</div>
</form>
</div>
<!-- Include jQuery -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include jQuery Validator plugin -->
<script src="js/bootstrap.js"></script>
<script src="js/jquery.smartWizard.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Toolbar extra buttons
var btnFinish = $('<button></button>').text('Finish')
.attr('id','btn-finish')
.addClass('btn btn-info')
.on('click', function(){
});
var btnCancel = $('<button></button>').text('Cancel')
.addClass('btn btn-danger')
.on('click', function(){
$('#smartwizard').smartWizard("reset");
});
// Smart Wizard
$('#smartwizard').smartWizard({
selected: 0,
theme: 'dots',
transitionEffect:'fade',
toolbarSettings: {toolbarPosition: 'bottom',
toolbarExtraButtons: [btnFinish, btnCancel]
},
anchorSettings: {
markDoneStep: true, // add done css
markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
removeDoneStepOnNavigateBack: true, // While navigate back done step after active step will be cleared
enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
}
});
$("#btn-finish").addClass('disabled');
$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
//alert("You are on step "+stepNumber+" now");
if(stepPosition == 'first'){
$("#prev-btn").addClass('disabled');
$("#btn-finish").addClass('disabled');
}else if(stepPosition == 'final'){
$("#next-btn").addClass('disabled');
$("#btn-finish").removeClass('disabled');
}else{
$("#prev-btn").removeClass('disabled');
$("#next-btn").removeClass('disabled');
$("#btn-finish").addClass('disabled');
}
});
});
</script>
</body>
</html>
selanjutnya tinggal save kemudian coba jalankan di browser.
Untuk konten form setiap part nya bisa disesuaikan dengan kebutuhan masing-masing ya dan kalau ada yang belum dipahami bisa tinggalkan komentar dibawah.
untuk ngirim datanya ke controler bagaimana gan?
ReplyDeletebisa kok gan,, kasi aja ajax untuk aksi tombol finishnya gan... arahin ke controller yang agan buat...
DeleteIjin gan, newbie.. mau tanya kl pas step ditengah ada pengolahan tabel ke database, supaya pas reload tetap di step yg ditentukan gimana ya gan? Mungkin referensi
ReplyDeletemaaf gan.. sebelumnya saya belum pernah coba si kalau setiap step itu ada nyimpen data ke database... mungkin bisa baca referensinya di sini gan :
Deletehttps://github.com/mstratman/jQuery-Smart-Wizard
semoga bermanfaat...