Cara menggunakan javascript opsi yang dipilih

Tapi, jika Anda seorang pemula di Codeigniter saya sarankan untuk mempelajari "Tutorial Codeigniter untuk Pemula" terlebih dahulu

Mari kita mulai

 

Isi

#1. Persiapan

#2. Membuat Database dan Tabel

#3. Instalasi dan Konfigurasi Codeigniter

#4. Opsi Pilihan Dasar terkait dengan Codeigniter dan Ajax

#5. Sisipkan dengan Opsi Pilih terkait dengan Codeigniter dan Ajax

#6. Menampilkan data yang telah dimasukkan ke dalam datatable

#7. Perbarui data Select Option yang terkait dengan Codeigniter dan Ajax

#8. Hapus data ke database

 

Langkah 1. Persiapan

Untuk membuat opsi pilih yang terkait dengan Codeigniter dan AJAX JQuery, inilah yang perlu Anda persiapkan

1. Codeigniter

2. jQuery

3. Bootstrap (opsional)

4. Tabel data (opsional)

Meskipun Bootstrap dan Datatable bersifat opsional, saya sangat menyarankan Anda untuk memiliki semua daftar di atas.  

Karena saya akan menggunakan semua daftar di atas dalam tutorial ini

 

Langkah 2. Membuat Database dan Tabel

Buat database baru dengan nama "pos_db". Jika Anda membuat database dengan nama yang sama itu lebih baik

Untuk membuat database “pos_db” di MySQL, dapat dilakukan dengan mengeksekusi query berikut

CREATE DATABASE pos_db;

Selanjutnya membuat tabel. Pada tutorial ini kita membutuhkan 3 tabel yaitu. kategori, sub_kategori, dan produk

Untuk membuat tabel “kategori” dapat dilakukan dengan mengeksekusi query berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _

Untuk membuat tabel “sub_category” dapat dilakukan dengan mengeksekusi query berikut

CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB;

Untuk membuat tabel “produk” dapat dilakukan dengan mengeksekusi query berikut

CREATE TABLE product( product_id INT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(100), product_price INT, product_category_id INT, product_subcategory_id INT )ENGINE=INNODB;

Jika anda masih bingung cara membuat database dengan MySQL, saya sarankan anda untuk belajar "Data Definition Language (DDL)" di MySQL

Selanjutnya masukkan beberapa data pada table “category” dan “sub_category”

Masukkan beberapa data ke dalam tabel "kategori" dengan menjalankan kueri berikut

INSERT INTO category(category_name) VALUES ('Perlengkapan Bayi'),('Fashion Wanita'),('Fashion Pria'); _

Perintah SQL di atas akan memasukkan data ke dalam tabel “kategori” sebanyak 3 record

Selanjutnya, Masukkan beberapa data ke dalam tabel "sub_category" dengan menjalankan kueri berikut

INSERT INTO sub_category(subcategory_name,subcategory_category_id) VALUES ('Perlengkapan Makanan','1'),('Perlengkapan Mandi','1'),('Pakaian Bayi','1'), ('Dress','2'),('Sweater','2'),('Kebaya','2'), ('Kaos','3'),('Kemeja','3'),('Jeans','3');

Perintah SQL di atas akan memasukkan data ke dalam tabel “sub_category” sebanyak 9 record

Jika anda masih bingung cara insert data di MySQL, saya sarankan anda untuk belajar "Data Manipulation Language (DML)" di MySQL

 

Dapatkan paket hosting diskon 75% dan domain gratis + tambahan diskon 5% dengan menggunakan kupon. MEMIKIRKAN

Pesan sekarang

Langkah #3. Instalasi dan Konfigurasi Codeigniter

Ekstrak Codeigniter yang sudah anda download sebelumnya di direktori "C. wampwww” jika Anda menggunakan WAMPSERVER

Atau di direktori “C. xampphtdocs” jika Anda menggunakan XAMPP

Kemudian ganti namanya menjadi "pilih-ajax"

Perhatikan gambar berikut untuk lebih jelasnya

Selanjutnya buat folder “assets” pada folder “select-ajax” sesuai dengan folder application dan system

Seperti gambar berikut ini

Setelah itu, Ekstrak file Bootstrap yang sudah diunduh sebelumnya ke dalam folder "assets" seperti pada gambar berikut

Selanjutnya, salin file jquery ke folder "assets/js" seperti yang ditunjukkan pada gambar berikut

Jika Anda belum memiliki jquery, kunjungi URL berikut

https. // kode. jquery. com/jquery-3. 3. 1. js

Pilih semua kode (CTRL + A) dan salin dan tempel di notepad dan simpan dengan nama jquery-3. 3. 1. js

 

Konfigurasi kodeigniter

Kemudian lakukan konfigurasi pada file berikut

 

#1. Muat otomatis. php

Buka file pengisian otomatis. php temukan di folder "application/config" dan temukan kode berikut

$autoload['libraries'] = array(); $autoload['helper'] = array(); _

Kemudian atur seperti berikut

$autoload['libraries'] = array('database'); $autoload['helper'] = array('url');

 

#2. Konfigurasi. php

Buka file konfigurasi. php temukan di folder "application/config" dan temukan kode berikut

$config['base_url'] = '';_

Kemudian atur seperti berikut

$config['base_url'] = '//localhost/select-ajax/';_

Catatan. jika server web Anda menggunakan port, sertakan juga port yang Anda gunakan

 

#3. Basis data. php

Buka file databasenya. php temukan di folder "application/config" dan temukan kode berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _0

Kemudian atur seperti berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _1

 

Langkah #4. Opsi Pilihan Dasar terkait dengan Codeigniter dan Ajax

Pada langkah ini, Anda akan mempelajari dasar-dasar opsi pemilihan yang terkait dengan Codeigniter dan Ajax

Mari kita mulai

 

#1. Model

Buat file model dengan nama "Product_model. php" di folder "application/models".

Kemudian ketikkan kode berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _2

 

#2. Pengontrol

Buat file controller dengan nama "Product. php" di folder "application/controllers".

Kemudian ketikkan kode berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _3

 

#3. Melihat

Buat tampilan file dengan nama "product_view. php" di folder "application/views".

Kemudian ketikkan kode berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _4

 

#4. Pengujian

Untuk menguji, buka browser Anda dan kunjungi url berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _5

Maka akan muncul seperti gambar berikut

Pilih salah satu dari "Kategori", kemudian opsi dari "Sub Kategori" terkait akan muncul

Seperti gambar berikut ini

Pada gambar diatas saya memilih kategori "Fashion Wanita", sehingga Sub Kategori hanya akan muncul sesuai dengan kategori yang dipilih yaitu. Dress, Sweater, dan Kebaya

Jika Anda memilih kategori yang berbeda, maka pilihan Sub Kategori yang berbeda juga akan muncul

Itulah konsep dasar Select Option dalam kaitannya dengan Codeigniter dan Ajax JQuery

 

Langkah #5. Sisipkan dengan Opsi Pilih terkait dengan Codeigniter dan Ajax

Pada langkah ini Anda akan mempelajari cara memasukkan data ke dalam database menggunakan opsi pilih yang terkait dengan Codeigniter dan AJAX JQuery

Mari kita mulai

 

#1. Pengontrol

Buka pengontrol "Produk". php” ditemukan di folder “application/controllers”.

Kemudian ubah menjadi berikut ini

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _6

 

#2. Model

Buka model “Product_model. php” ditemukan di folder “application/models”.

Kemudian ubah menjadi berikut ini

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _7

 

#3. Melihat

Buat tampilan baru dengan nama "add_product_view. php" di folder "application/views".

Kemudian ketikkan kode berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _8

 

#4. Pengujian

Untuk menguji, buka browser Anda dan kunjungi url berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _9

Maka akan muncul seperti gambar berikut

Kemudian masukkan nama produk, kategori, sub kategori, dan harga produk

Kemudian klik tombol "Simpan Produk" untuk menyimpan produk ke database

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut

 

Langkah #6. Menampilkan data yang telah dimasukkan ke dalam datatable

Ekstrak file Datatable yang telah diunduh sebelumnya ke dalam folder "assets".

Ekstrak file datatables. css ke dalam folder "assets/css" dan datatables. js ke dalam folder "aset/js".

Perhatikan gambar berikut untuk lebih jelasnya

Setelah itu, ikuti langkah-langkah berikut

 

#1. Pengontrol

Buka pengontrol "Produk". php” ditemukan di folder “application/controllers”.

Kemudian ubah menjadi berikut ini

CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB; 0

 

#2. Model

Buka model “Product_model. php” ditemukan di folder “application/models”.

Kemudian ubah menjadi berikut ini

CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB; 1

 

#3. Melihat

Buat tampilan baru dengan nama "product_list_view. php" di folder "application/views".

Kemudian ketikkan kode berikut

CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB; 2

 

#4. Pengujian

Untuk menguji, buka browser Anda dan kunjungi url berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _5

Maka akan muncul seperti gambar berikut

Klik tombol "Tambah Produk Baru" untuk menambahkan produk baru

Masukkan semua input, lalu klik tombol "Simpan Produk".

Jika berjalan dengan baik, maka akan muncul seperti berikut

 

Langkah #7. Perbarui data Select Option yang terkait dengan Codeigniter dan Ajax

Pada langkah ini, saya akan membagikan cara memperbarui data dengan opsi pilih menggunakan Codeigniter dan AJAX

Mari kita mulai

Pertama-tama buka file view “product_list_view. php” ditemukan di folder “application/views”.

Kemudian cari kode berikut

CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB; _4

Kemudian ubah menjadi berikut ini

CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB; 5

Setelah itu, ikuti langkah-langkah berikut

 

#1. Pengontrol

Buka pengontrol "Produk". php” ditemukan di folder “application/controllers”.

Kemudian ubah menjadi berikut ini

CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB; 6

 

#2. Model

Buka model “Product_model. php” ditemukan di folder “application/models”.

Kemudian ubah menjadi berikut ini

CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB; 7

 

#3. Melihat

Buat tampilan baru dengan nama "edit_product_view. php" di folder "application/views".

Kemudian ketikkan kode berikut

CREATE TABLE sub_category( subcategory_id INT PRIMARY KEY AUTO_INCREMENT, subcategory_name VARCHAR(100), subcategory_category_id INT )ENGINE=INNODB; _8

 

#4. Pengujian

Untuk menguji, buka browser Anda dan kunjungi url berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _5

Maka akan muncul seperti gambar berikut

Kemudian klik tombol edit, maka akan muncul form edit seperti gambar berikut

Edit data yang ingin Anda edit, lalu klik tombol "Perbarui Produk".

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut

 

Langkah #8. Hapus data ke database

Pada langkah ini, saya akan membagikan cara menghapus data ke database

Mari kita mulai

Pertama-tama buka file view “product_list_view. php” ditemukan di folder “application/views”.

Kemudian cari kode berikut

CREATE TABLE product( product_id INT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(100), product_price INT, product_category_id INT, product_subcategory_id INT )ENGINE=INNODB; 0

Kemudian ubah menjadi berikut ini

CREATE TABLE product( product_id INT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(100), product_price INT, product_category_id INT, product_subcategory_id INT )ENGINE=INNODB; 1

Setelah itu, ikuti langkah-langkah berikut

 

#1. Pengontrol

Buka pengontrol "Produk". php” ditemukan di folder “application/controllers”.

Kemudian tambahkan fungsi hapus sebagai berikut

CREATE TABLE product( product_id INT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(100), product_price INT, product_category_id INT, product_subcategory_id INT )ENGINE=INNODB; 2

 

#2. Model

Buka model “Product_model. php” ditemukan di folder “application/models”.

Kemudian tambahkan fungsi delete_product sebagai berikut

CREATE TABLE product( product_id INT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(100), product_price INT, product_category_id INT, product_subcategory_id INT )ENGINE=INNODB; _3

 

#3. Pengujian

Untuk menguji, buka browser Anda dan kunjungi url berikut

CREATE TABLE category( category_id INT PRIMARY KEY AUTO_INCREMENT, category_name VARCHAR(100) )ENGINE=INNODB; _5

Kemudian klik salah satu tombol "Hapus" untuk menghapus data

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut

 

Terkait. CodeIgniter 4 Tutorial Lengkap Untuk Pemula

Kesimpulan

Tutorial ini adalah tentang cara membuat opsi pilih yang terkait dengan Codeigniter dan AJAX JQuery

Mulai dari persiapan, pembuatan database dan tabel, instalasi Codeigniter, konfigurasi Codeigniter, hingga CRUD (Create Read Update Detail) dengan opsi pilihan terkait