Halaman

Jumat, 07 September 2012

Kode PHP Mempertahankan Item Terpilih pada Elemen SELECT

Tutorial PHP dari saya kali ini adalah mengenai penggunaan kode PHP, HTML, dan JavaScript untuk mempertahankan item terpilih pada elemen select (combo box) pada saat user melakukan refresh atau reload pada suatu halaman web.

Mungkin Anda bingung mengenai judul dari tutorial PHP saya ini. Untuk memperjelasnya yakni jika kita memilih suatu pilihan menu item (option) pada elemen select, maka bila saat browser di-refresh atau di-reload maka pilihan item yang telah kita pilih pada elemen select tersebut akan kembali ke index nomor nol atau item paling atas kecuali jika pada suatu item tersebut diberi atribut selected pada sub-elemen option pada elemen select tersebut, maka pilihan akan berada pada option yang telah ditambahkan atribut selected.


Item terpilih tetap dipertahankan meski browser di-refresh


Terus bagaimana caranya agar item terpilih tetap dipertahankan pilihannya meski browser di-refresh atau di-reload berkali-kali?

Pada dasarnya pilihan default dapat diatur dengan menambahkan atribut selected pada salah satu sub-elemen option seperti terlihat pada potongan kode di bawah ini:
<select name="sel_def">
  <option>item 1</option>
  <option>item 2</option>
  <option selected>item 3</option>
  <option>item 4</option>
</select>
Pada kode di atas, jika browser di-refresh atau di-reload maka item 3 selalu dipilih. Atribut selected hanya boleh dituliskan pada salah satu sub-elemen option saja. Nah jika item 2 dipilih maka setelah browser me-reload halaman yang sama maka item 3 yang akan dipilih sebagai pilihan awal (default).

Proses tersebut akan sangat tidak menyenangkan jika ada dua elemen select dimana elemen kedua bergantung pada pilihan pada elemen select yang pertama. Misalnya saja data pada elemen pertama berisi item fakultas:
  • MIPA
  • Ilmu Komputer
  • Teknik
Sekarang elemen select yang kedua berisi item data program studi yang bersesuaian dengan elemen select yang pertama. Contohnya:
  • MIPA : Matematika, Fisika, Kimia
  • Ilmu Komputer : Sistem Informasi, Teknik Informatika
  • Teknik : Elektro, Sipil, Industri
Artinya jika item MIPA dipilih pada elemen select pertama maka yang akan muncul pada item elemen select yang kedua adalah Matematika, Fisika, Kimia. Begitu juga jika item Ilmu Komputer pada elemen select pertama yang dipilih maka item pada elemen select yang kedua hanya berisi item Sistem Informasi dan Teknik Informatika.

Salah satu cara untuk memenuhi kriteria pemilihan tersebut, maka diperlukan perbandingan item data terpilih dengan data yang ada pada database atau array.

Kali ini saya hanya akan menggunakan data pada array saja untuk menyederhanakan masalah. Jika Anda memakai data dari database, maka prinsip pengkodeannya sama seperti yang akan saya jelaskan berikut ini.

Sebelumnya diperlukan suatu array untuk menampung data-data yang ada. Berikut potongan kodenya:
<?php
  $fakultas = array(
    "mipa" => array("matematika", "fisika", "kimia"),
    "ilmu_komputer" => array("sistem_informasi", "teknik_informatika"),
    "teknik" => array("elektro", "sipil", "industri")
  );
?>
Jenis array diatas adalah multidimensional associative array, dimana suatu elemen array menyimpan data array yang lain menggunakan indeks bertipe string. Misalnya suatu elemen dengan indeks string "mipa" memiliki array yang berisi kumpulan data string "matematika", "fisika", "kimia".

Karena elemen select termasuk elemen dari jenis form, maka elemen form dibuat dahulu untuk menampung elemen select. Elemen form ini perlu diberi nama agar elemen select dapat diakses menggunakan kode JavaScript.
<form name="frmFakultas" method="post" action="">
....
</form>
Kemudian pada elemen select yang pertama, bentuk penulisan kodenya seperti berikut:
<select name="selFakultas"
        onchange="document.frmFakultas.selProdi.selectedIndex=0;
                  document.frmFakultas.submit();">
  <?php foreach ($fakultas as $fak => $prodi): ?>
    <?php
      if ($_POST["selFakultas"] == $fak) $selected1 = "selected";
      else $selected1 = "";
    ?>
    <option value="<?php echo $fak;?>" <?php echo $selected1; ?>>
      <?php echo strtoupper($fak); ?>
    </option>
  <?php endforeach ?>
</select>
Maksud dari kode diatas adalah saat suatu item pada elemen select pertama (selFakultas) dipilih (mengaktifkan event onchange), maka browser akan memilih item ke 1 (indeks ke 0) pada elemen select kedua (selProdi). Tujuannya agar setiap perubahan pada menu item selFakultas, data pada elemen select selProdi selalu diset ke pilihan yang kosong (telah diatur agar memiliki nilai "---").

Fungsi submit() pada variabel frmFakultas dipakai agar bila terjadi perubahan pilihan pada elemen select selFakultas, maka data akan langsung di-submit (dikirim). Proses ini digunakan untuk menggantikan peranan tombol tipe submit.
<select name="selFakultas"
        onchange="document.frmFakultas.selProdi.selectedIndex=0;
                  document.frmFakultas.submit();">
.....
.....
</select>
Selanjutnya pada tiap perulangan foreach data pada variabel $_POST["selFakultas"] yang merupakan data item terpilih pada elemen select selFakultas dibandingkan dengan sub-array ($fak) yang ada pada array $fakultas.

Variabel $fak berisi data array "mipa", "ilmu_komputer", dan "teknik". Jika apa yang dipilih pada item elemen select selFakultas sama dengan salah satu data pada array $fak tersebut, maka variabel $selected1 berisi data string "selected", jika tidak sama maka variabel $selected1 akan berisi data null.
<?php foreach ($fakultas as $fak => $prodi): ?>
  <?php
    if ($_POST["selFakultas"] == $fak) $selected1 = "selected";
    else $selected1 = "";
  ?>
  <option value="<?php echo $fak;?>" <?php echo $selected1; ?>>
    <?php echo strtoupper($fak); ?>
  </option>
<?php endforeach ?>
Selanjutnya isi dari variabel $selected1 akan dituliskan pada sub-elemen option untuk mengatur item mana yang seharusnya dipilih (selected) berdasarkan data yang dipilih sebelumnya.

Kemudian untuk mengatur opsi item menu pada select yang kedua (selProdi) dengan berdasar pilihan item dari select yang pertama (selFakultas), maka kode berikut perlu dituliskan:
<select name="selProdi" onchange="document.frmFakultas.submit();">
  <option value="---">---</option>
  <?php foreach ($fakultas[$_POST["selFakultas"]] as $prodi): ?>
    <?php
      if ($_POST["selProdi"] == $prodi) $selected2 = "selected";
      else $selected2 = "";
    ?>
    <option value="<?php echo $prodi; ?>" <?php echo $selected2; ?>>
      <?php echo strtoupper($prodi); ?>
    </option>
  <?php endforeach; ?>
</select>
Kode di atas mirip dengan kode untuk pengaturan elemen select pertama (selFakultas). Namun yang membedakan di sini adalah pada atribut perulangan foreach dituliskan dalam bentuk:
<?php foreach ($fakultas[$_POST["selFakultas"]] as $prodi): ?>
.....
.....
<?php endforeach; ?>
Kode di atas dapat diartikan bahwa isi dari variabel $fakultas mengacu atau berasosiasi pada indeks string tertentu yakni berdasarkan data pada $_POST["selFakultas"]. Jadi misalnya item ilmu_komputer pada elemen select selFakultas dipilih, maka variabel $fakultas dapat diakses dalam bentuk $fakultas["ilmu_komputer"] kemudian isi dari variabel array tersebut akan diambil setiap perulangannya. Hasilnya berupa data string "sistem_informasi" dan "teknik_informatika".

Data tersebut nantinya ditampung pada variabel $prodi dan akan digunakan untuk nilai (value) dari sub-elemen option dan tampilan data itemnya.

Berikut kode selengkapnya dari penggunaan script PHP, HTML, dan JavaScript yang saya buat untuk keperluan ini:
<?php
  $fakultas = array(
    "mipa" => array("matematika", "fisika", "kimia"),
    "ilmu_komputer" => array("sistem_informasi", "teknik_informatika"),
    "teknik" => array("elektro", "sipil", "industri")
  );
?>
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>husnanlabs.blogspot.com</title>
  </head>
  <body>
    <form name="frmFakultas" method="post" action="">
      <table>
        <tr>
          <td><label for="selFakultas">Fakultas:</label></td>
          <td><label for="selProdi">Program Studi:</label></td>
        </tr>
        <tr>
          <td>
            <select name="selFakultas"
                    onchange="document.frmFakultas.selProdi.selectedIndex=0;
                              document.frmFakultas.submit();">
              <?php foreach ($fakultas as $fak => $prodi): ?>
                <?php
                  if ($_POST["selFakultas"] == $fak) $selected1 = "selected";
                  else $selected1 = "";
                ?>
                <option value="<?php echo $fak;?>" <?php echo $selected1; ?>>
                  <?php echo strtoupper($fak); ?>
                </option>
              <?php endforeach ?>
            </select>
          </td>
          <td>
            <select name="selProdi" onchange="document.frmFakultas.submit();">
              <option value="---">---</option>
              <?php foreach ($fakultas[$_POST["selFakultas"]] as $prodi): ?>
                <?php
                  if ($_POST["selProdi"] == $prodi) $selected2 = "selected";
                  else $selected2 = "";
                ?>
                <option value="<?php echo $prodi; ?>" <?php echo $selected2; ?>>
                  <?php echo strtoupper($prodi); ?>
                </option>
              <?php endforeach; ?>
            </select>
          </td>
        </tr>
      </table>
    </form>
    <p>Fakultas: <?php echo strtoupper($_POST["selFakultas"]); ?></p>
    <p>Program Studi: <?php echo strtoupper($_POST["selProdi"]); ?></p>
  </body>
</html>
Kode tersebut memiliki tampilan dan fungsi seperti terlihat pada gambar di awal artikel ini.

Jika ada yang belum jelas silakan ditanyakan dengan memberi komentar di bawah ini. Semoga bermanfaat... keep learning by doing...

© 2012 husnanlabs.blogspot.com

10 komentar:

  1. kalau pake database gimana kak

    BalasHapus
  2. array("matematika", "fisika", "kimia"),
    "ilmu_komputer" => array("sistem_informasi", "teknik_informatika"),
    "teknik" => array("elektro", "sipil", "industri")
    );
    ?>
    kok gak ke detect yah???

    BalasHapus
  3. gmana ya kok combo kok selalu diatas...

    BalasHapus
  4. www.pasaranbandarbola.com = pasaran bola terbaru
    www.daftar-sbobet.com = daftar id sbobet
    www.daftarsabungayam.com = daftar id sabung ayam
    www.casino-sbobet.com = casino sbobet
    www.wap-sbobet.com = sbobet mobile
    www.ibcbetmobile.com = ibcbet / maxbet mobile
    www.maxbetlogin.com = alternativ login
    www.permainanjudionline.com = permainan judi online
    www.daftarbolatangkas.com = daftar bola tangkas
    www.beritabolalive.com = berita bola terupdate
    www.jadwalpertandinganbola.com = jadwal pertandingan bola terupdate
    www.caramembukainternetpositif.com = cara membuka internet positif, membuka nawala
    www.dewa-judi.com = dewa judi online
    www.gudangberita77.blogspot.com = berita terupdate terkini
    www.beritaterkini.biz = sumber berita online

    BalasHapus
  5. sangat membantu sekali mas bro bagi sy yang newbie tks forever

    BalasHapus
  6. sangat membantu gan, tp gmna cara penerapannya dgn mengunakan database?

    BalasHapus
  7. Gan mau bertanya , kalau untuk menghilangkan pilihan yg telah dipilih ketika user pindah tab pakai apa ya . mohon dijawab via email : cyclonemediacs@gmail.com terimakasih

    BalasHapus
  8. klok mau datanya di kirim gimana mas bro

    BalasHapus