Membagi form dalam beberapa halaman

Ada beberapa contoh kasus yang mengharuskan kita membagi form dalam beberapa halaman, agar proses input lebih mudah dan dapat memunculkan pilihan sesuai dengan inputan awal. Berikut ini saya akan berbagi trick bagaimana membuat beberapa form yang terpisah halaman bisa saling terhubung dalam sebuah proses.

Contoh kasus yang mengharuskan kita membagi form dalam beberapa halaman adalah pendataan dengan inputan yang cukup banyak. Misal data yang harus diinput lebih dari 20 atau 30 field input. Jika anda paksakan dimasukkan dalam satu halaman, maka kemungkinan penyusunan textbox maupun objek lainnya akan sangat sulit. Apalagi dengan keterbatasan layar yang mengakibatkan faktor keindahanya berkurang karena kepenuhan. Disamping itu kadang kala form yang memiliki inputan yang banyak dalam satu halaman akan sedikit menyulitkan bagi sebagian pengguna.

Contoh kasus lain, seperti inputan yang dilakukan secara bertahap dan bercabang. Proses inputan awal akan mempengaruhi form berikutnya yang mungkin saja berbeda. Misal anda membuat sistem survei yang terdiri dari serangkaian pertanyaan yang berbeda.

Saya akan contohkan yang sederhana pada kasus pendaftaran keanggotaan dengan skenario :

Form awal akan menampilkan nama, alamat dan pilihan jenis keanggotaan yang terdiri dari gratis dan berbayar. Setelah form awal dikirim dan jenis keanggotaan yang dipilih adalah gratis, maka akan memunculkan form isian nama teman yang direkomendasikan. Dan jika memilih jenis keanggotaan berbayar, maka akan memunculkan form jenis pembayaran dll.

Tahap terakhir dari proses tersebut akan kita simpan dalam database.

Membuat form tahap 1

Form utama tahap 1 akan saya rancang seperti berikut :

Membagi form dalam beberapa halaman 1

Dengan susunan html :

<form id="Form1" name="Form1" method="post" action="form2.php">
  <table width="500" border="0" align="center" cellpadding="10" cellspacing="0" bgcolor="#336600">
    <tr>
      <td height="50" colspan="3" align="center">PENDAFTARAN ANGGOTA</td>
    </tr>
    <tr>
      <td width="132">NAMA</td>
      <td width="3">:</td>
      <td width="305"><input name="nama" type="text" id="nama" size="30" maxlength="30" required="true" /></td>
    </tr>
    <tr>
      <td>ALAMAT</td>
      <td>:</td>
      <td><input name="alamat" type="text" id="alamat" size="50" maxlength="100" required="true" /></td>
    </tr>
    <tr>
      <td>KEANGGOTAAN</td>
      <td>:</td>
      <td><select name="jenis_anggota" id="jenis_anggota">
        <option value="1">Gratis</option>
        <option value="2">Berbayar</option>
      </select>      </td>
    </tr>
    <tr>
      <td height="50" colspan="3" align="center"><input type="submit" name="btnLanjut" id="btnLanjut" value="Lanjut" />
      <input type="reset" name="Reset" id="button" value="Ulangi" /></td>
    </tr>
  </table>
</form>

Form diatas, akan dikirim ke form lanjutan yaitu form 2 yang akan menampilkan form sesuai dengan pilihan jenis anggota.

Membuat form tahap 2

Form tahap kedua, akan melakukan proses lanjutan dengan mengambil nilai dari form tahap pertama. Jika pada form pertama jenis keanggotaan dipilih gratis maka akan dimanculkan form 2 dengan tampilan seperti berikut :

membuat form tahap 2

Dana jika dipilih berbayar maka akan tampil form seperti berikut :

membuat form tahap 2

Kode html form 2 :

<?php if($_POST['jenis_anggota']==1) { ?>
<form id="Form2" name="Form2" method="post" action="form3.php">
  <table width="500" border="0" align="center" cellpadding="10" cellspacing="0" bgcolor="#336600">
    <tr>
      <td height="50" colspan="3" align="center">REKOMENDASI TEMAN</td>
    </tr>
    <tr>
      <td>NAMA</td>
      <td>:</td>
      <td><?php echo $_POST['nama']?><input name="nama" type="hidden" id="nama" value="<?php echo $_POST['nama']?>" /></td>
    </tr>
    <tr>
      <td>ALAMAT</td>
      <td>:</td>
      <td><?php echo $_POST['alamat']?><input name="alamat" type="hidden" id="alamat" value="<?php echo $_POST['alamat']?>" /><input name="jenis_anggota" type="hidden" id="jenis_anggota" value="<?php echo $_POST['jenis_anggota']?>" /></td>
    </tr>
    <tr>
      <td width="132">EMAIL 1</td>
      <td width="3">:</td>
      <td width="305"><input name="email1" type="email" id="email1" size="30" maxlength="100" required="true" /></td>
    </tr>
    <tr>
      <td>EMAIL 2</td>
      <td>:</td>
      <td><input name="email2" type="email" id="email2" size="30" maxlength="100" required="true" /></td>
    </tr>
    <tr>
      <td height="50" colspan="3" align="center"><input type="submit" name="btnSimpan" id="btnSimpan" value="Simpan" />
      <input type="button" name="btnKembali" id="btnKembali" value="Kembali" onclick="javascript:window.back()" />
      <input type="reset" name="Reset" id="button" value="Ulangi" /></td>
    </tr>
  </table>
</form>
<?php } else { ?>
<form id="Form2" name="Form2" method="post" action="form3.php">
  <table width="500" border="0" align="center" cellpadding="10" cellspacing="0" bgcolor="#336600">
    <tr>
      <td height="50" colspan="3" align="center">JENIS PEMBAYARAN</td>
    </tr>
    <tr>
      <td>NAMA</td>
      <td>:</td>
      <td><?php echo $_POST['nama']?><input name="nama" type="hidden" id="nama" value="<?php echo $_POST['nama']?>" /></td>
    </tr>
    <tr>
      <td>ALAMAT</td>
      <td>:</td>
      <td><?php echo $_POST['alamat']?><input name="alamat" type="hidden" id="alamat" value="<?php echo $_POST['alamat']?>" />
      <input name="jenis_anggota" type="hidden" id="jenis_anggota" value="<?php echo $_POST['jenis_anggota']?>" /></td>
    </tr>
    <tr>
      <td width="132">NAMA BANK</td>
      <td width="3">:</td>
      <td width="305"><input name="nama_bank" type="text" id="nama_bank" size="30" maxlength="30" required="true" /></td>
    </tr>
    <tr>
      <td>PEMILIK</td>
      <td>:</td>
      <td><input name="nama_pemilik" type="text" id="nama_pemilik" size="30" maxlength="50" required="true" /></td>
    </tr>
    <tr>
      <td>NOMOR</td>
      <td>&nbsp;</td>
      <td><input name="nomor_rekening" type="text" id="nomor_rekening" size="30" maxlength="30" required="true" /></td>
    </tr>
    <tr>
      <td height="50" colspan="3" align="center"><input type="submit" name="btnSimpan" id="btnSimpan" value="Simpan" />
        <input type="button" name="btnKembali" id="btnKembali" value="Kembali" onclick="javascript:window.back()" />
      <input type="reset" name="Reset" id="button" value="Ulangi" /></td>
    </tr>
  </table>
</form>
<?php } ?>

Pada form ke 2, jika anda amati lebih detail pada perintah htmlnya, ada beberapa objek form yang tersembunyi type="hidden" yang ditanamkan dan akan dibawa ke tahap selanjutnya. Objek form yang tersembunyi tersebut diberi nilai sesuai dengan inputan awal dengan perintah $_POST['nama_objek']. Amati pada perintah :

<input name="nama" type="hidden" id="nama" value="<?php echo $_POST['nama']?>" />

Halaman tahap 3

Halaman ke 3 pada tahapan proses ini adalah bagian proses selanjutnya, bisa menyimpan atau melanjutkan form setelahnya.

Nilai yang dikirim ke halaman 3 tergantung inputan pada tahap dua. Jika tahap ke 2 yang muncul pembayaran maka nilai yang bisa diambil pada halaman 3 yaitu : nama, alamat, jenis_anggota, nama_bank, pemilik dan nomor. Dan jika yang muncul rekomendasi teman maka halaman 3 akan menerima nilai : nama, alamatm jenis_anggota, email1 dan email2.

Berikut ini file contoh membagi form dalam beberapa halaman

Semoga bermanfaat

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Membuat fungsi cek data mysql dengan php
    Proses pengecekan apakah data sudah ada dalam database tentunya pasti kita lakukan berulang-ulang dalam sebuah aplikasi php. Untuk mempermudah proses pengecekannya kita memerlukan sebuah fungsi/function yang gampang dipanggil setiap saat. Berikut ini saya ingin berbagi tentang bagaimana membuat fungsi tersebut.
  • Perbedaan php dengan javascript dan html
    Apa perbedaan php dengan javascript? atau apa perbedaan php dengan html? pertanyaan ini seringkali muncul jika anda mulai mengenal bahasa pemrograman web. Ketiga bahasa pemrograman ini ternyata saling terkait dalam membangun sebuah web yang dinamis dan interaktif.
  • Membuat pesan error sendiri dengan php
    Pesan error yang sering kita temui di lingkungan pemrograman php sangat beragam tergantung proses apa yang sedang dilakukan. Contoh paling gampang seperti gagalnya melakukan koneksi database, gagalnya menjalankan query, atau salahnya penggunaan sebuah function. Secara mendasar memang semua error akan muncul dilayar tanpa diminta dengan format seadanya (bawaan php). Bagaimana jika kita ingin membuat bentuk tampilan error sendiri?? ini bisa kita lakukan selama yang salah bukan cara penulisan phpnya. Caranya akan saya bahas pada artikel ini.
  • Membuat nomor urut harian dengan php
    Ada teman bertanya, bagaimana membuat nomor urut yang setiap hari kembali ke awal? Secara logic prosesnya cukup sederhana yaitu melakukan pengecekan pada tabel mysql yang sudah dibuat apakah ada data hari sesuai tanggal sistem. Jika ada maka ambil dan tambahkan nilainya, kemudian perbaharui datanya. Jika tidak ada maka buat record baru dengan?tanggal tersebut kemudian set nilai urutan 1.
  • Membuat kalender bulan dengan php
    Jika anda membuat aplikasi berbasis web, fitur yang yang sering diandalkan adalah tampilan dan kemudahan membuat laporan. Misal saja dalam aplikasi yang anda buat ada salah satu laporan yang menyajikanya berdasarkan tanggal.

Kiriman terbaru