Memunculkan Select Option Lain Menggunakan PHP Ketika Salah Satu Data Dipilih

Jadi misalnya ketika Saya memilih salah satu data kecamatan di dalam sebuah select option maka secara otomatis ketika dipilih, maka php akan menampilkan select option dengan nama – nama desa dari kecamatan yang bersangkutan. Gambarannya kurang lebih seperti berikut

menampilkan pilihan select option lain ketika salah satu data dipilih - root93

Ketika data kecamatan di klik "Pilih" maka secara otomatis akan memunculkan nama - nama desa dari kecamatan tersebut. Seperti dibawah ini

Menampilkan nama - nama desa

Baca terbarunya :

Saya pikir memang sepertinya ini akan jadi lebih mudah jika menggunakan Javascript, tapi dalam tutorial ini saya akan membahasanya menggunakan PHP.
Ada beberapa hal yang perlu dipahami disini diantaranya :

Dalam contoh gambar di atas anggaplah itu sebuah form register. Maka secara logika form register itu akan melakukan insert data ke database
Selanjutnya di dalam select option kita juga akan melakukan request ke tabel kecamatan dan desa
Jadi disini akan ada dua aksi yang terjadi, yang pertama insert ke database yang kedua adalah request nama kecamatan dan desa
Maka itu artinya akan ada dua proses validasi. Untuk menyimpan data ke database dan untuk request nama desa ketika user memilih salah satu nama kecamatan
Ketika user misal memasukan nama lengkap dan no hp, kemudian dia memilih kecamatan maka secara otomatis nilai input pertama (nama) dan kedua (no hp) akan tereset saat terjadi request ke tabel kecamatan
Maka dari itu nilai – nilai variabel nama dan no hp juga akan disimpan pada di dalam validasi kedua sehingga nilainya tidak akan tereset
Meskipun ada dua aksi yang berbeda, namun Saya hanya menggunakan satu formulir yang sama, hanya dibedakan pada name submit buttonnya saja, sehingga kita bisa mengecek aksi nilai input mana pada form yang akan divalidasi menggunakan fungsi ISSET

Jadi kurang lebih gambarannya seperti itu.

Untuk penulisan kode disini akan menggunkan OOP PHP, selanjutnya untuk tampilannya kalian bisa menggunakan bootstrap, saya tidak akan terlalu menjelaskan secara detil. Berikut ini adalah hal – hal yang bisa kalian buat untuk mencoba Tutorial Memunculkan Select Option Lain Menggunakan PHP Ketika Salah Satu Data Dipilih

Database

CREATE TABLE `ap_kecamatan` (
  `id` int(11) NOT NULL,
  `kecamatan` varchar(25) NOT NULL,
  `kode` varchar(2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `ap_kecamatan`
--

INSERT INTO `ap_kecamatan` (`id`, `kecamatan`, `kode`) VALUES
(1, 'Parigi', '1'),
(2, 'Pangandaran', '2'),
(3, 'Cijulang', '3'),
(4, 'Cimerak', '4'),
(5, 'Cigugur', '5'),
(6, 'Langkaplancar', '6'),
(7, 'Sidamulih', '7'),
(8, 'Kalipucang', '8'),
(9, 'Mangunjaya', '9'),
(10, 'Padaherang', '10');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `ap_kecamatan`
--
ALTER TABLE `ap_kecamatan`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `ap_kecamatan`
--
ALTER TABLE `ap_kecamatan`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
--
-- Struktur dari tabel `ap_desa`
--

CREATE TABLE `ap_desa` (
  `id` int(11) NOT NULL,
  `desa` varchar(30) NOT NULL,
  `kode` varchar(2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `ap_desa`
--

INSERT INTO `ap_desa` (`id`, `desa`, `kode`) VALUES
(1, 'Parigi', '1'),
(2, 'Karangjaladri', '1'),
(3, 'Karangbenda', '1'),
(4, 'Cibenda', '1'),
(5, 'Bojong', '1'),
(6, 'Ciliang', '1'),
(7, 'Cintakarya', '1'),
(8, 'Cintaratu', '1'),
(9, 'Parakanmanggu', '1'),
(10, 'Selasari', '1'),
(11, 'Babakan', '2'),
(12, 'Pagergunung', '2'),
(13, 'Pananjung', '2'),
(14, 'Pangandaran', '2'),
(15, 'Purbahayu', '2'),
(16, 'Sidomulyo', '2'),
(17, 'Sukahurip', '2'),
(18, 'Wonoharjo', '2'),
(19, 'Batukaras', '3'),
(20, 'Ciakar', '3'),
(21, 'Cibanten', '3'),
(22, 'Cijulang', '3'),
(23, 'Kertayasa', '3'),
(24, 'Kondangjajar', '3'),
(25, 'Margacinta', '3'),
(26, 'Batumalang', '4'),
(27, 'Cimerak', '4'),
(28, 'Ciparanti', '4'),
(29, 'Kertaharja', '4'),
(30, 'Kertamukti', '4'),
(31, 'Legokjawa', '4'),
(32, 'Limusgede', '4'),
(33, 'Masawah', '4'),
(34, 'Mekarsari', '4'),
(35, 'Sindangsari', '4'),
(36, 'Sukajaya', '4'),
(37, 'Bunisari', '5'),
(38, 'Campaka', '5'),
(39, 'Cigugur', '5'),
(40, 'Cimindi', '5'),
(41, 'Harumandala', '5'),
(42, 'Kertajaya', '5'),
(43, 'Pagerbumi', '5'),
(44, 'Bangunjaya', '6'),
(45, 'Bangunkarya', '6'),
(46, 'Bojong', '6'),
(47, 'Bojongkondang', '6'),
(48, 'Bungur Raya', '6'),
(49, 'Cimanggu', '6'),
(50, 'Cisarua', '6'),
(51, 'Jadikarya', '6'),
(52, 'Jadimulya', '6'),
(53, 'Jayasari', '6'),
(54, 'Karangkamiri', '6'),
(55, 'Langkaplancar', '6'),
(56, 'Mekarwangi', '6'),
(57, 'Pangkalan', '6'),
(58, 'Sukamulya', '6'),
(59, 'Cikalong', '7'),
(60, 'Cikembulan', '7'),
(61, 'Kalijati', '7'),
(62, 'Kersaratu', '7'),
(63, 'Pajaten', '7'),
(64, 'Sidamulih', '7'),
(65, 'Sukaresik', '7'),
(66, 'Bagolo', '8'),
(67, 'Banjarharja', '8'),
(68, 'Cibuluh', '8'),
(69, 'Ciparakan', '8'),
(70, 'Emplak', '8'),
(71, 'Kalipucang', '8'),
(72, 'Pamotan', '8'),
(73, 'Putrapinggan', '8'),
(74, 'Tunggilis', '8'),
(75, 'Jangraga', '9'),
(76, 'Kertajaya', '9'),
(77, 'Mangunjaya', '9'),
(78, 'Sindang Jaya', '9'),
(79, 'Sukamaju', '9'),
(80, 'Bojongsari', '10'),
(81, 'Cibogo', '10'),
(82, 'Ciganjeng', '10'),
(83, 'Karangmulya', '10'),
(84, 'Karangpawitan', '10'),
(85, 'Karangsari', '10'),
(86, 'Kedungwuluh', '10'),
(87, 'Maruyung Sari', '10'),
(88, 'Padaherang', '10'),
(89, 'Paledah', '10'),
(90, 'Panyutran', '10'),
(91, 'Pasirgeulis', '10'),
(92, 'Sindangwangi', '10'),
(93, 'Sukanagara', '10');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `ap_desa`
--
ALTER TABLE `ap_desa`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `ap_desa`
--
ALTER TABLE `ap_desa`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=94;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Koneksi databse


<?php
define('DB_SERVER', 'localhost');
define('DB_USER', 'root');
define('DB_PASS','');
define('DB_NAME','ayamparigi');
$koneksi= new mysqli(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
if($koneksi==false){
 die("Gagal melakukan koneksi ke database :".$koneksi->connect_error());
}

?>

Fungsi


<?php
function query($data){
 global $koneksi;
 $perintah=$koneksi->query($data);
 if(!$perintah) die("Gagal melakukan query.".$koneksi->error());
 return $perintah;
}

function prepare($data){
 global $koneksi;
 $perintah=$koneksi->prepare($data);
 if(!$perintah) die("Gagal melakukan query".$koneksi->error());
 return $perintah;
}
function FilterInput($data){
 $data = htmlspecialchars($data);
 $data = stripslashes($data);
 $data = trim($data);
 return $data;
}
function ValidateName($data){
 if(!preg_match("/^[a-zA-Z ]*$/",$data)){
  return true;
 }else{
  return false;
 }
}
function ValidateNumber($data){
 if(!preg_match("/^[0-9]*$/",$data)){
  return true;
 }else{
  return false;
 }
}
function EscapeString($data){
 global $koneksi;
 $data=$koneksi->real_escape_string($data);
 return $data;
}

function TampilKecamatan(){
 $sql="SELECT kode, kecamatan FROM ap_kecamatan ORDER by kecamatan ASC";
 $perintah=query($sql);
 return $perintah;
}
function TampilKecamatanGetKode($data){
 global $kode_kec;
 $sql="SELECT kode FROM ap_kecamatan WHERE kecamatan=?";
 if($stmt=prepare($sql)){
  $stmt->bind_param("s",$param_kecamatan);
  $param_kecamatan=$data;
  if($stmt->execute()){
   $stmt->store_result();
   $stmt->bind_result($kode_kec);
   $stmt->fetch();
   if($stmt->num_rows==1){
    return true;
   }else{
    return false;
   }
  }
 }
 $stmt->close();
}
function TampilDesa($kode_kec){
 $sql="SELECT desa,kode FROM ap_desa WHERE kode=$kode_kec ORDER by desa ASC";
 $perintah=query($sql);
 return $perintah;
}
function CekUsername($username){
 $sql="SELECT username FROM ap_user WHERE username=?";
 if($stmt=prepare($sql)){
  $stmt->bind_param("s",$param_username);
  $param_username=$username;
  if($stmt->execute()){
   $stmt->store_result();
   if($stmt->num_rows==1){
    return true;
   }else{
    return false;
   }

  }else{
   die("Gagal mengeksekusi data");
  }
 }
 $stmt->close();

}
function InsertRegister($nama_lengkap,$no_hp,$kecamatan,$desa,$alamat_lengkap,$username, $password){
 $sql="INSERT INTO ap_user (nama_lengkap, no_hp, kecamatan, desa, alamat_lengkap, username, password) VALUES (?,?,?,?,?,?,?)";
 if($stmt=prepare($sql)){
  $stmt->bind_param("sssssss",$param_nama_lengkap, $param_no_hp, $param_kecamatan, $param_desa, $param_alamat_lengkap, $param_username, $param_password);
  $param_nama_lengkap=$nama_lengkap;
  $param_no_hp=$no_hp;
  $param_kecamatan=$kecamatan;
  $param_desa=$desa;
  $param_alamat_lengkap=$alamat_lengkap;
  $param_username=$username;
  $param_password=password_hash($password, PASSWORD_DEFAULT);
  if($stmt->execute()){
   return true;
  }else{
   return false;
  }
 }
 $stmt->close();
}

?>

Index

<?php
require_once '../config/database.php';
require_once '../function/ap.fungsi.php';
require_once '../function/ap.theme.php';
LoadHead();
LoadCss();
LoadBody();


$nama_lengkap = $no_hp = $no_hp_err = $desa =  $kecamatan = $username = $password = $confirm_password= $alamat_lengkap = $simpan ="";
$nama_lengkap_err =  $kecamatan_err = $desa_err = $username_err= $password_err = $confirm_password_err= $alamat_lengkap_err ="";

/*Bagian register data ketika semua data telah terisi dan divalidasi */
if(isset($_POST['register'])){
  if(empty(trim($_POST['nama_lengkap']))){
   $nama_lengkap_err="<div class='alert alert-danger'>Nama lengkap tidak boleh kosong</div>";
  }elseif(ValidateName($_POST['nama_lengkap'])){
   $nama_lengkap_err="<div class='alert alert-danger'>Nama lengkap harus karakter alphabet</div>";
  }
  else{
   $nama_lengkap=FilterInput($_POST['nama_lengkap']);
   $nama_lengkap=EscapeString($_POST['nama_lengkap']);
  }
  if(empty(trim($_POST['no_hp']))){
   $no_hp_err="<div class='alert alert-danger'>Nama lengkap tidak boleh kosong</div>";
  }elseif(ValidateNumber($_POST['no_hp'])){
   $no_hp_err="<div class='alert alert-danger'>Format nomor handphone harus berupa angka</div>";
  }
  else{
   $no_hp=FilterInput($_POST['no_hp']);
   $no_hp=EscapeString($_POST['no_hp']);
  }
  if(empty(trim($_POST['kecamatan']))){
   $kecamatan_err="<div class='alert alert-danger'>Kecamatan harus dipilih, tidak boleh kosong</div>";
  }else{
   $kecamatan=FilterInput($_POST['kecamatan']);
   $kecamatan=EscapeString($kecamatan);
   
  }
  if(empty(trim($_POST['desa']))){
   $desa_err="<div class='alert alert-danger'>Pilih data kecamatan terlebih dahulu. Klik pilih !</div>";
  }else{
   $desa=FilterInput($_POST['desa']);
   $desa=EscapeString($desa);
  }
  if(empty(trim($_POST['alamat_lengkap']))){
   $alamat_lengkap_err="<div class='alert alert-danger'> Masukan alamat secara lengkap</div>";
  }else{
   $alamat_lengkap=trim($_POST['alamat_lengkap']);
  }
  
  if(empty($_POST['username'])){
   $username_err="<div class='alert alert-danger'>Harap masukan sebuah username </div>";
  }elseif(strlen($_POST['username'])>12){
   $username_err="<div class='alert alert-danger'>Username tidak boleh lebih dari 12 karakter</div>";
  }else{
   if(CekUsername(trim($_POST['username']))){
    $username_err="<div class='alert alert-danger'>Username tersebut sudah digunakan !</div>";
   }else{
    $username=FilterInput($_POST['username']);
    $username=EscapeString($username);
   }
   
  }
  if(empty(trim($_POST['password']))){
   $password_err="<div class='alert alert-danger'>Harap masukan sebuah password </div>";
  }elseif(strlen($_POST['password'])<6){
   $password_err="<div class='alert alert-danger'> Password tidak boleh kurang dari 6 karakter</div>";
  }else{
   $password=trim($_POST['password']);
   
  }
  if(empty($_POST['confirm_password'])){
   $confirm_password_err="<div class='alert alert-danger'>Konfirmasi password harus diisi</div>";
  }else{
   $confirm_password=trim($_POST['confirm_password']);
   if(empty($password_err)&&($password != $confirm_password)){
    $confirm_password_err="<div class='alert alert-danger'>Konfirmasi password tidak cocok</div>";
   }
  }
  if(empty($nama_lengkap_err)&& empty($no_hp_err) && empty($kecamatan_err) && empty($desa_err) && empty($alamat_lengkap_err)&& empty($username_err)&& empty($password_err) && empty($confirm_password_err)){

   if(InsertRegister($nama_lengkap,$no_hp,$kecamatan,$desa,$alamat_lengkap,$username, $password)){
    $simpan="<div class='alert alert-success'>Registrasi berhasil. Silahkan login untuk melanjutkan berbelanja</div>";
    echo "<meta http-equiv=\"refresh\"content=\"2;URL=tesreg.php\"/>";
   }else{
    $simpan="<div class='alert alert-danger'>Registrasi berhasil. Silahkan login untuk melanjutkan berbelanja</div>";
   }
  }
  
}
/*
Bagian ini untuk menampilkan nama - nama desa secara otomatis berdasarkan kecamatan yang dipilih
*/
if(isset($_POST['get_desa'])){
 /*Validasi 3 data sebelumnya, untuk nama, dan no wa akan diulang validasinya disini supaya tidak ter-reset */
  if(empty(trim($_POST['nama_lengkap']))){
   $nama_lengkap_err="<div class='alert alert-danger'>Nama lengkap tidak boleh kosong</div>";
  }elseif(ValidateName($_POST['nama_lengkap'])){
   $nama_lengkap_err="<div class='alert alert-danger'>Nama lengkap harus karakter alphabet</div>";
  }
  else{
   $nama_lengkap=FilterInput($_POST['nama_lengkap']);
   $nama_lengkap=EscapeString($_POST['nama_lengkap']);
  }
  if(empty(trim($_POST['no_hp']))){
   $no_hp_err="<div class='alert alert-danger'>No. HP/WhatsApp tidak boleh kosong</div>";
  }elseif(ValidateNumber($_POST['no_hp'])){
   $no_hp_err="<div class='alert alert-danger'>Format nomor handphone harus berupa angka</div>";
  }
  else{
   $no_hp=FilterInput($_POST['no_hp']);
   $no_hp=EscapeString($_POST['no_hp']);
  }
  if(empty(trim($_POST['kecamatan']))){
   $kecamatan_err="<div class='alert alert-danger'>Kecamatan harus dipilih, tidak boleh kosong</div>";
  }else{
   $kecamatan=FilterInput($_POST['kecamatan']);
   $kecamatan=EscapeString($kecamatan);
  }
  if(empty($kecamatan_err)){
   
   if(TampilKecamatanGetKode($kecamatan)){
    //menyimpan data desa didalam variabel
    $data=TampilDesa($kode_kec);
    }else{
    $kecamatan_err="<div class='alert alert-danger'>Data pilihan kecamatan tidak boleh kosong</div>";
   }
  }
 
}
?>
<div class="row">
 <div id="content-wrapper">
        <div class="container-fluid">
              <!-- Breadcrumbs-->
              <ol class="breadcrumb" style="margin-top: 15px;">
                <li class="breadcrumb-item">
                  <a href="index.php">Kembali</a>
                </li>
                <li class="breadcrumb-item active">Buat Akun</li>
              </ol>
 <?php echo $simpan; ?>
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post" id="register">
 <div class="form-group">
  <label>Masukan Nama:</label>
  <input type="text" class="form-control" name="nama_lengkap" id="nama_lengkap" value="<?php echo $nama_lengkap; ?>" placeholder="Masukan nama depan Anda" required="" />
 </div>
 <?php echo $nama_lengkap_err; ?>

 <div class="form-group">
  <label>No.HP / WhatsApp:</label>
  <input type="text" class="form-control" name="no_hp" id="no_hp" value="<?php echo $no_hp; ?>" placeholder="Masukan No. HP atau WhtasApp Anda" required="" />
 </div>
 <?php echo $no_hp_err; ?>
  
   <div class="form-group">
    <label>Pilih Kecamatan:</label>   
    <select class="form-control" name="kecamatan" id="kecamatan" required="">   
     <option value="<?php echo $kecamatan; ?>"><?php echo $kecamatan; ?></option>
     <?php
     //memanggil fungsi tampil kecamatan, menampilkan data kecamatan
     $result=TampilKecamatan();
     
      while($DataKec=$result->fetch_array()){
       echo '
       <option value="'.$DataKec['kecamatan'].'">'.$DataKec['kecamatan'].'</option>
       ';
      } 
     ?>
     
     </select>

   </div>
   <div class="form-group">
    <input type="submit" class="btn btn-default full-right" name="get_desa" value="Pilih" />
   </div>
  
 <?php echo $kecamatan_err; ?>
  <?php
  //jika varibel data desa ada, maka tampilkan disini
  if(!empty($data)){

   if($data->num_rows>0){
    echo '
   
     <div class="form-group">
     <label>Pilih Desa:</label>
     <select name="desa" class="form-control" id="desa" required="">
     <option value="'.$desa.'">'.$desa.'</option>  
     ';
     while($DataDes=$data->fetch_array()){
      echo '
      <option value="'.$DataDes['desa'].'">'.$DataDes['desa'].'</option>
     
      ';
     }
     echo'
     </select>
     </div>
    
    
    ';

   }else{
    echo '<div style="color:red;"> Data desa tidak ditemukan</div>
    ';
    echo'
    <input type="hidden" name="desa"/>
    ';
   }
  }else{
   echo '<input type="hidden" name="desa"/>';
  }
  
  ?>
  <span><?php echo $desa_err; ?></span>

 <div class="form-group">
  <label>Alamat :</label>
  <textarea class="form-control" name="alamat_lengkap" id="alamat_lengkap" rows="5" placeholder="Masukan alamat lengkap. Contoh : Dusun Babakan RT 01 RW 04 Desa Parigi Kec Parigi Kab. Pangandaran"><?php echo $alamat_lengkap; ?></textarea>

 </div>
 <?php echo $alamat_lengkap_err; ?>
 <div class="form-group">
  <label>Username : </label>
  <input type="text" class="form-control" name="username" id="username" placeholder="username" value="<?php echo $username; ?>"/>
 </div>
 <?php echo $username_err; ?>
 <div class="form-group">
  <label>Password :</label>
  <input type="password" class="form-control" name="password" id="password" placeholder="Password harus lebih dari 6 karakter"/>
 </div>
 <?php echo $password_err; ?>
 <div class="form-group">
  <label>Konfirmasi password:</label>
  <input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Masukan konfirmasi password"/>
 </div>
 <div class="form-group">   
  <input type="submit" class="btn btn-primary btn-md" name="register" id="register" value="Daftar" />
 </div>
 
</form>
 </div> </div></div>

<?php
LoadFooter();
?>

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Memunculkan Select Option Lain Menggunakan PHP Ketika Salah Satu Data Dipilih

1 Response to "Memunculkan Select Option Lain Menggunakan PHP Ketika Salah Satu Data Dipilih "