Opsi pilih formulir edit php

Dalam banyak skenario, kita mungkin perlu membuat input dropdown yang dapat menampilkan semua opsi yang konsisten dengan status database saat ini. Bentuk masukan ini digunakan berkali-kali dalam kehidupan nyata dan contoh berikut dapat membantu untuk memahami hal yang sama

1. Sekumpulan siswa yang memiliki nomor registrasi unik
2. Satu set nama cabang dan id cabang mereka
3. Daftar kategori yang harus dimiliki produk tertentu

Pada artikel ini, kami akan membuat drop-down dengan daftar kategori yang harus dimiliki produk tertentu

Mendekati. Dalam setiap contoh ini, jika kita menggunakan menu drop-down yang mengambil data dari database, pengguna akan dapat memasukkan data dengan lebih akurat dan UI akan lebih mudah digunakan.  

Kami membutuhkan yang berikut ini

• Basis data dengan tabel kategori dan tabel produk lain dengan kunci asing ke ID kategori tempat produk tersebut berada
• Formulir HTML yang menerima data

Langkah

Pembuatan basis data

• Aktifkan Apache dan MySQL dari panel kontrol XAMPP

Klik tombol "Mulai".

• Buat database "example_store" dengan mengklik tombol baru

Klik tombol “baru” untuk membuat database baru

• Masukkan nama database dan klik "Buat"

Buat database baru dengan nama "example_store"

• Klik pada tab SQL dan rekatkan kode berikut dan klik "GO"

Untuk menjalankan SQL dan menyiapkan database

kueri MySQL

-- Table structure for table `category`
CREATE TABLE `category` (

 `Category_ID` int(11) NOT NULL,

 `Category_Name` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data for table `category`
INSERT INTO `category` (`Category_ID`, `Category_Name`) VALUES

(1, 'Category A '),

(2, 'Category B');

-- Table structure for table `product`
CREATE TABLE `product` (

 `Product_ID` int(11) NOT NULL,

 `product_name` varchar(255) NOT NULL,

 `category_id` int(11) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data for table `product`
INSERT INTO `product` (`Product_ID`, `product_name`, `category_id`) VALUES

(1, 'Product A1', 1),

(2, 'Product A2', 1),

(3, 'Product B1', 2);


-- Primary Key Constraints
ALTER TABLE `category`

 ADD PRIMARY KEY (`Category_ID`);

ALTER TABLE `product`

 ADD PRIMARY KEY (`Product_ID`),

 ADD KEY `Category_constraint` (`category_id`);
 
 
 
-- AUTO_INCREMENT for table `category`
ALTER TABLE `category`

 MODIFY `Category_ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

-- AUTO_INCREMENT for table `product`

ALTER TABLE `product`

 MODIFY `Product_ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

-- Foreign Key Constraints

ALTER TABLE `product`

 ADD CONSTRAINT `Category_constraint` FOREIGN KEY (`category_id`) 
 REFERENCES `category` (`Category_ID`) ON DELETE 
 CASCADE ON UPDATE CASCADE;

Contoh. Kami membuat file PHP di folder bernama "example_store" di htdocs dan membuat formulir berikut. halaman web php yang dapat diakses di browser di “localhost/example_store/form. php”

PHP

<?php

    // Connect to database

    $con = mysqli_connect("localhost","root",<?php1,<?php3<?php4

Kotak Pilih HTML dibuat dengan daftar opsi, dan digunakan untuk membuat daftar dropdown dari opsi yang memungkinkan. Seorang pengguna mengklik dropdown pilih dan memilih salah satu opsi berdasarkan persyaratan. Kami juga dapat menggunakan banyak tag dengan tag pilih, yang memungkinkan pengguna memilih beberapa nilai dari daftar tarik-turun

<form action="" method="post">
    <select name="Fruit">
        <option value="" disabled selected>Choose option</option>
        <option value="Apple">Apple</option>
        <option value="Banana">Banana</option>
        <option value="Coconut">Coconut</option>
        <option value="Blueberry">Blueberry</option>
        <option value="Strawberry">Strawberry</option>
    </select>
    <input type="submit" name="submit" vlaue="Choose options">
</form>

PHP 8 Dapatkan Nilai Terpilih Tunggal dari Kotak Pilih

Kami menggunakan $_POST_ untuk mendapatkan nilai opsi pilih jika nilai dipilih maka akan ditampilkan kepada pengguna jika tidak kami akan membuang pesan kesalahan

<?php
    if(isset($_POST['submit'])){
    if(!empty($_POST['Fruit'])) {
        $selected = $_POST['Fruit'];
        echo 'You have chosen: ' . $selected;
    } else {
        echo 'Please select the value.';
    }
    }
?>

Kami menambahkan beberapa CSS untuk menambahkan gaya kustom untuk pilihan dropdown, Anda dapat melihat contoh kode lengkap di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Select Dropdown Example in PHP</title>
  <style>
    .container {
      max-width: 350px;
      margin: 50px auto;
      text-align: center;
    }
    input[type="submit"] {
      margin-bottom: 20px;
    }
    .select-block {
      width: 300px;
      margin: 110px auto 30px;
      position: relative;
    }
    select {
      width: 100%;
      height: 50px;
      font-size: 100%;
      font-weight: bold;
      cursor: pointer;
      border-radius: 0;
      background-color: #1A33FF;
      border: none;
      border: 2px solid #1A33FF;
      border-radius: 4px;
      color: white;
      appearance: none;
      padding: 8px 38px 10px 18px;
      -webkit-appearance: none;
      -moz-appearance: none;
      transition: color 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease;
    }
    /* For IE <= 11 */
    select::-ms-expand {
      display: none;
    }
    .selectIcon {
      top: 7px;
      right: 15px;
      width: 30px;
      height: 36px;
      padding-left: 5px;
      pointer-events: none;
      position: absolute;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .selectIcon svg.icon {
      transition: fill 0.3s ease;
      fill: white;
    }
    select:hover,
    select:focus {
      color: #000000;
      background-color: white;
    }
    select:hover~.selectIcon,
    select:focus~.selectIcon {
      background-color: white;
    }
    select:hover~.selectIcon svg.icon,
    select:focus~.selectIcon svg.icon {
      fill: #1A33FF;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <form action="" method="post" class="mb-3">
      <div class="select-block">
        <select name="Fruit">
          <option value="" disabled selected>Choose option</option>
          <option value="Apple">Apple</option>
          <option value="Banana">Banana</option>
          <option value="Coconut">Coconut</option>
          <option value="Blueberry">Blueberry</option>
          <option value="Strawberry">Strawberry</option>
        </select>
        <div class="selectIcon">
          <svg focusable="false" viewBox="0 0 104 128" width="25" height="35" class="icon">
            <path d="m2e1 95a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 1 9 9zm14 55h68v1e1h-68zm0-3e1h68v1e1h-68zm0-3e1h68v1e1h-68z"></path>
          </svg>
        </div>
      </div>
      <input type="submit" name="submit" vlaue="Choose options">
    </form>
    <?php
      if(isset($_POST['submit'])){
        if(!empty($_POST['Fruit'])) {
          $selected = $_POST['Fruit'];
          echo 'You have chosen: ' . $selected;
        } else {
          echo 'Please select the value.';
        }
      }
    ?>
  </div>
</body>
</html>

Dapatkan Beberapa Nilai Terpilih dari Select Dropdown di PHP

Pada langkah ini kita akan belajar dapatkah pengguna memilih beberapa nilai yang dipilih dari kotak opsi pilihan. Tambahkan beberapa tag dengan tag pilih juga tentukan array dengan properti nama

<select name="Fruits[]" multiple>
  <option value="" disabled selected>Choose option</option>
  <option value="Apple">Apple</option>
  <option value="Banana">Banana</option>
  <option value="Coconut">Coconut</option>
  <option value="Blueberry">Blueberry</option>
  <option value="Strawberry">Strawberry</option>
</select>

Pastikan array Fruits tidak kosong, jalankan foreach loop untuk mengulangi setiap nilai dropdown pilih. Tampilkan nilai yang dipilih jika tidak tampilkan pesan kesalahan kepada pengguna

<?php
  if(isset($_POST['submit'])){
    if(!empty($_POST['Fruits'])) {
      foreach($_POST['Fruits'] as $selected){
        echo '  ' . $selected;
      }          
    } else {
      echo 'Please select the value.';
    }
  }
?>

Berikut adalah kode terakhir dari kotak multi pilih

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Multiple Select Dropdown in PHP</title>
  <style>
    .container {
      max-width: 350px;
      margin: 50px auto;
      text-align: center;
    }
    select {
      width: 100%;
      min-height: 150px;
      margin-bottom: 20px;
    }
    input[type="submit"] {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <form action="" method="post" class="mb-3">
        <select name="Fruits[]" multiple>
          <option value="" disabled selected>Choose option</option>
          <option value="Apple">Apple</option>
          <option value="Banana">Banana</option>
          <option value="Coconut">Coconut</option>
          <option value="Blueberry">Blueberry</option>
          <option value="Strawberry">Strawberry</option>
        </select>
        <input type="submit" name="submit" vlaue="Choose options">
    </form>
    <?php
      if(isset($_POST['submit'])){
        if(!empty($_POST['Fruits'])) {
          foreach($_POST['Fruits'] as $selected){
            echo '  ' . $selected;
          }          
        } else {
          echo 'Please select the value.';
        }
      }
    ?>
  </div>
</body>
</html>

Kesimpulan

Kami telah menyelesaikan tutorial PHP Select Option, dan dalam tutorial ini, kami belajar cara mendapatkan nilai kotak pilih tunggal atau ganda menggunakan PHP 8 dengan beberapa validasi dasar

Digamber

Saya Digamber, full-stack developer dan pecinta kebugaran. Saya membuat situs ini untuk memberikan pengalaman coding saya dengan programmer pemula. Saya suka menulis di JavaScript, ECMAScript, React, Angular, Vue, Laravel

Posting yang Direkomendasikan

Build PHP MySQL 5 Star Rating System menggunakan jQuery AJAXPHP 8 AJAX Live Data Search dengan MySQL TutorialPHP 8 Select2 Multi Select dengan jQuery AJAX TutorialPHP 8 JSON Data Encode and Decode ContohPHP 8 Server Side Form Validasi Tutorial ContohMengintegrasikan Google reCAPTCHA di PHP 8 Formulir KontakCara Membuat Captcha . Dapatkan Nilai yang Dipilih dan Tambahkan GayaDapatkan Beberapa Nilai dari Kotak Centang yang Dipilih di PHP 8Buat Paginasi di PHP 8 dengan MySQL dan BootstrapBangun Formulir Pendaftaran (Pendaftaran) Pengguna PHP 8 dengan MySQL

Bagaimana cara mengedit kotak pilih di PHP?

Bagaimana cara memilih nilai opsi di PHP?