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
- Sekumpulan siswa yang memiliki nomor registrasi unik
- Satu set nama cabang dan id cabang mereka
- 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 lainnya 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”