Skip to main content
form step wizard gambar 1

Membuat Form Step Wizard dengan Jquery dan Codeigniter

Membuat form step wizard – pada dasarnya ini berguna untuk mempercantik form registrasi atau membuat form checkout, dimana menampilkan langkah demi langkah dalam pengisian form. Dengan cara ini anda dapat dengan mudah mengorganisir inputan saat membuat form registrasi. Misalkan untuk inputan data akun di step/langkah yang pertama, dan dilanjutkan inputan berupa detail informasi user di langkah selanjutnya.

Baca:

Ada banyak cara untuk membuat form semacam ini, anda bisa menggunakan javascript secara langsung, atau dengan library javascript yakni Jquery. Pada dasarnya Jquery sendiri menyediakan fitur semacam ini dan bisa anda temukan di http://www.jquery-steps.com, akan tetapi di tutorial kali ini saya ingin membuatnya secara manual. Supaya kita dapat belajar bersama dalam menggunakan Jquery di Codeigniter.

Pada tutorial ini saya menggunakan Codeigniter, Jquery dan Bootstrap. Dimana di akhir dari pembahasan, akan saya sediakan source codenya agar dapat di download dan anda pelajari sendiri. Dan dikesempatan selanjutnya saya akan membuat pembahasan dengan topik yang sama akan tetapi menggunakan http://www.jquery-steps.com. Sehingga dengan latihan-latihan ini, kita semakin mantap dalam mendesain sebuah web. Perlu diingat bahwa , tutorial ini menggunakan Codeigniter, akan tetapi anda bisa mengimplementasikannya di native php secara langsung.

 

Pengenalan Jquery

Jquery adalah kumpulan library dari Javascript, sama halnya dengan codeigniter yang merupakan framework dari PHP. Maka bisa dikatakan Jquery juga frameworknya Javascript. Sehingga anda dapat dengan mudah dan ringkas dalam memanggil fungsi-fungsi javascript menggunakan Jquery. Jquery sendiri dapat anda temukan di websitenya secara langsung di http://jquery.com/. Jquery sendiri menyediakan beragam plugin siap pakai seperti datepicker yang digunakan untuk membuat form input dari calender, accordion tab panel , dll. Anda bisa pelajari lebih lanjut di dokumentasi jquery yang ada di websitenya.

Persiapan setting Codeigniter

Seperti biasa untuk dapat membuat form dengan codeigniter lakukan setting berikut:

Edit application/config/autoload.php dan copas kode berikut:

$autoload['helper'] = array('form','url');

Kemudian buka application/config/config.php dan copas kode di bawah ini, saya menggunakan folder latihan:

$config['base_url'] = 'http://localhost/latihan/';

Selanjutnya buka application/config/routes.php dan edit file dibagian ini (yang artinya default controller nya yakni controller ‘utama‘:

$route['default_controller'] = 'utama';

Buat File Controller Utama.php

Buat file controller Utama.php dan letakkan di application/controllers/Utama.php dan copas kode berikut ini:


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Utama extends CI_Controller {

public function index()
{
$this->load->view('v_latihan');
}
}

Buat File View v_latihan.php

Buat file view v_latihan.php dan letakkan di directory application/views/v_latihan.php serta copas kode dibawah ini:


<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!-- HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Latihan Wizard Form</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">
    function hilang(){
      $('#target1').hide();
      $('#target2').hide();
      $('#target3').hide();
      $('#target4').hide();
      $('#target5').hide();
      $('#target6').show();
      $('#target7').show();
      $('#target8').show();
      $('#target9').show();
      $('#target10').show();
      $('#target11').show();
      $('#target12').show();
      $('#target13').show();
    }
  </script>
  <style>
    .col-md-6:first-child {
      background-color: yellow;
    }
  </style>
</head>
<body bgcolor="#E6E6FA">
<div class="container">
  <div class="col-md-6 blue">
    <h2>Form Latihan Wizard <span id="target13" style="display: none">- Langkah 2</span></h2>
    <form action="">
      <div class="form-group">
        <label id="target1">Username:</label>
        <input type="text" class="form-control" id="target2" placeholder="Masukkan Username" name="username" >
      </div>
      <div class="form-group">
        <label id="target3">Email:</label>
        <input type="email" class="form-control" id="target4" placeholder="Masukkan Email" name="email">
      </div>
        <button type="button" id="target5" onclick="hilang()" class="btn btn-primary" >Selanjutnya</button>
      <div class="form-group">
        <label id="target6" style="display: none">Nama Lengkap:</label>
        <input type="text" class="form-control" id="target7" placeholder="Masukkan Nama Lengkap" name="namaLengkap" style="display: none">
      </div>
      <div class="form-group">
        <label id="target8" style="display: none">Nomor telp:</label>
        <input type="text" class="form-control" id="target9" placeholder="Masukkan Nomor telepon" name="telepon" style="display: none">
      </div>
      <div class="form-group">
        <label id="target10" style="display: none">Jenis Kelamin:</label>
        <select class="form-control" id="target11" name="gender" style="display: none">
          <option value="L" selected="selected">Laki-laki</option>
          <option value="P">Perempuan</option>
        </select>
      </div>
      <div class="form-group">
        <button type="button" id="target12" class="btn btn-danger" style="display: none">Simpan</button>
      </div>
    </form></div>
</div>
</body>
</html>

 

Penjelasan Singkat

Untuk memanggil Bootstrap dan Jquery maka digunakan perintah:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Selanjutnya anda membuat fungsi javascript dengan jquery yang membidik attribut id di dalam form input yakni id= target 1 s/d 13. Dimana jika tombol “Selanjutnya” diklik maka akan menjalankan fungsi hilang( ), dan akan menyembunyikan form input dengan syntax .hide( ), serta akan menampilkan form input yang sebelumnya disembunyikan dengan syntax .show( ).


function hilang(){
$('#target1').hide();
$('#target2').hide();
$('#target3').hide();
$('#target4').hide();
$('#target5').hide();
$('#target6').show();
$('#target7').show();
$('#target8').show();
$('#target9').show();
$('#target10').show();
$('#target11').show();
$('#target12').show();
$('#target13').show();
}

Di dalam form sendiri harus ada atrribut id=”target1″ seperti contoh dibawah ini:


<div class="form-group">
<label id="target1">Username:</label>
<input type="text" class="form-control" id="target2" placeholder="Masukkan Username" name="username" >
</div>

Dimana label username memiliki attribut id=”target1″, dan disaat tombol “selanjutnya” di klik maka akan disembunyikan dengan perintah $(‘#target1’).hide();

Dan hasilnya akan seperti ini saat halaman pertama di load:

form step wizard gambar 2

Gambar 1. Form langkah pertama.

 

form step wizard gambar 3

Gambar 2. Form langkah kedua.

Catatan Penulis

Anda bisa mendownload source codenya DISINI. Jika ada yang ingin ditanyakan silahkan mengisi kolom komentar, saya dengan senang hati akan membalas pertanyaan anda. Akhir kata mohon maaf jika ada penulisan yang kurang jelas dan sulit dipahami. Nantikan tutorial-tutorial saya selanjutnya di website ini.

Leave a Reply

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