Cara menggunakan new option javascript

Pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) kita telah belajar menggunakan tag select, namun dalam tutorial kali ini saya akan membahasnya dengan lebih dalam beserta atribut-atribut tambahan yang bisa gunakan untuk tag select.

Fungsi Tag Select dalam pembuatan Form HTML

Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk “memaksa” user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada saat form dibuat.

Pada penggunaan tag select ini, kita juga membutuhkan tag option sebagai “isi” dari tag select. Format dasar pembuatan select dalam HTML adalah sebagai berikut:

<select >
   <option>Pilihan 1</option>
   <option>Pilihan 2</option>
   <option>Pilihan 3</option>
</select >

Anda tidak harus menggunakan tag select di dalam form HTML, namun bisa juga digunakan tanpa tag form. Akan tetapi jika digunakan diluar form, kita membutuhkan bantuan bahasa pemograman lain seperti javascript untuk memproses hasilnya.

Atribut name: Untuk Pemrosesan Tag Select

Atribut name untuk tag select digunakan sebagai identitas dari tag select tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag select, bukan di dalam tag option. Berikut contoh penulisan atribut name untuk tag select:

<select  name=”judul_pilihan”>
   <option>Pilihan 1</option>
   <option>Pilihan 2</option>
</select >

Atribut value: Sebagai Nilai untuk Tag Option

Atribut value digunakan di dalam tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang mencerminkan pilihan user. Nilai dari value tidak harus sama dengan apa yang dilihat user. Berikut contoh penulisannya:

<select>
   <option value="pil1">Pilihan 1</option>
   <option value="pil2">Pilihan 2</option>
   <option value="pil3">Pilihan 3</option>
</select>

Usahakan untuk memberi nilai value berupa nilai yang singkat namun bermakna sesuai dengan pilihan yang ditampilkan.

Atribut selected: Menampilkan Nilai Default dari Tag Select

Atribut selected digunakan pada tag option. Jika sebuah tag option mememiliki atribut selected, maka pada saat form ditampilkan, pilihan tag inilah yang akan tampil sebagai nilai awal dari select (nilai default). Nilai dari atribut ini adalah dirinya sendiri, sehingga penulisannya menjadi selected=“selected”. Berikut contoh penulisannya:

<select>
   <option >Pilihan 1</option>
   <option selected="selected">Pilihan 2</option>
   <option>Pilihan 3</option>
</select>

Atribut Size: Menentukan Besar tampilan Select

Atribut size digunakan untuk menentukan besar dari tampilan tag select. Jika tidak ditulis, tag select memiliki nilai default size=”1″, sehingga hanya 1 pilihan yang “terlihat” ketika user memilih pilihan yang ada.

Namun jika anda menambahkan atribut size=”3″, maka pada saat form ditampilkan, tag select akan ditampilkan sebanyak 3 baris, bukan 1 baris seperti biasanya.

Atribut size ini umumnya digunakan apabila tag select dirancang untuk dapat dipilih dengan beberapa pilihan sekaligus. Untuk keperluan ini, atribut size biasanya di kombinasikan dengan atribut multiple yang akan kita bahas setelah ini.

Berikut contoh penulisan atribut size untuk tag select:

<select size="2">
   <option>Pilihan 1</option>
   <option>Pilihan 2</option>
</select >

Contoh kode program HTML tag select yang saya tulis hanya merangkum apa yang telah kita pelajari pada tutorial kali ini. Selnajutnya kita akan mempelajari tentang tag textarea dalam Form HTML.

Tetapi, jika Anda seorang pemula di Codeigniter saya sarankan untuk mempelajari “Tutorial Codeigniter untuk Pemula” terlebih dahulu.

Mari kita mulai.

Konten:

#1. Persiapan

#2. Membuat Database dan Table.

#3. Installasi dan Konfigurasi Codeigniter

#4. Basic Select Option berhubungan dengan Codeigniter dan Ajax.

#5. Insert dengan Select Option berhubungan dengan Codeigniter dan Ajax.

#6. Menampilkan data yang telah di insert ke datatable.

#7. Update data Select Option berhubungan dengan Codeigniter dan Ajax.

#8. Delete data ke database.

Step #1. Persiapan

Untuk membuat select option berhubungan dengan Codeigniter dan AJAX JQuery, inilah yang perlu Anda persiapkan:

1. Codeigniter

2. JQuery

3. Bootstrap (optional)

4. Datatable (optional)

Meskipun Bootstrap dan Datatable kebutuhannya opsional, akan tetapi saya sangat menyarankan Anda untuk memiliki semua list diatas. 

Karana saya akan menggunakan semua list diatas pada tutorial ini.

Step #2. Membuat Database dan Table

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

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

CREATE DATABASE pos_db;

Selanjutnya pembuatan table. Pada tutorial kali ini kita membutuhkan 3 table, yaitu: category, sub_category, dan product.

Untuk membuat table “category” dapat dilakukan dengan mengeksekusi query berikut:

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

Untuk membuat table “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 table “product” 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 bagaimana membuat database dengan MySQL, saya sarankan Anda untuk mempelajari “Data Definition Language (DDL)” pada MySQL.

Selanjunya, insert beberapa data pada table “category” dan “sub_category”.

Insert beberapa data pada table “category” dengan mengeksekusi query berikut:

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

Perintah SQL diatas, akan meng-insert data kedalam table “category” sebanyak 3 records.

Selenjutnya, Insert beberapa data pada table “sub_category” dengan mengeksekusi query 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 diatas, akan menginsert data kedalam table “sub_category” sebanyak 9 records.

Jika Anda masih bingung bagaimana meng-insert data pada MySQL, saya sarankan Anda untuk mempelajari “Data Manipulation Language (DML)” pada MySQL.

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Step #3. Installasi dan Konfigurasi Codeigniter

Extract Codeigniter yang telah Anda download sebelumnya pada direktori “C:wampwww” jika Anda menggunakan WAMPSERVER.

Atau pada direktori “C:xampphtdocs” jika Anda menggunakan XAMPP.

Kemudian rename (ganti nama) menjadi “select-ajax”.

Perhatikan gambar berikut untuk lebih jelasnya:

Selanjutnya, buat folder “assets” didalam folder “select-ajax” sejajar dengan folder application dan system.

Seperti gambar berikut:

Setelah itu, Extract file Bootstrap yang telah di download sebelumnya ke dalam folder “assets” seperti gambar berikut:

Selanjutnya, copykan file jquery kedalam folder “assets/js” seperti gambar berikut:

Jika Anda belum mendapatkan jquery, kunjungi URL berikut:

https://code.jquery.com/jquery-3.3.1.js

Select semua kode-nya (CTRL + A) dan copy lalu pastekan di notepad dan simpan dengan nama jquery-3.3.1.js.

Konfigurasi Codeigniter:

Selanjutnya lakukan konfigurasi pada file berikut:

#1.  Autoload.php

Buka file autoload.php yang tedapat pada folder “application/config” dan temukan kode berikut:

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

Kemudian atur menjadi seperti berikut:

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

#2.  Config.php

Buka file config.php yang tedapat pada folder “application/config” dan temukan kode berikut:

$config['base_url'] = '';

Kemudian atur menjadi seperti berikut:

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

Note: jika webserver Anda menggunakan port, maka sertakan juga port yang Anda gunakan.

#3.  Database.php

Buka file database.php yang tedapat pada folder “application/config” dan temukan kode berikut:

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

Kemudian atur menjadi seperti berikut:

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

Step #4. Basic Select Option berhubungan dengan Codeigniter dan Ajax

Pada step ini, Anda akan belajar dasar dari select option berhubungan dengan Codeigniter dan Ajax.

Mari kita mulai.

#1. Model

Buat sebuah file model dengan nama “Product_model.php” pada folder “application/models”.

Kemudian ketikan kode berikut:

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

#2. Controller

Buat sebuah file controller dengan nama “Product.php” pada folder “application/controllers”.

Kemudian ketikan kode berikut:

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

#3. View

Buat sebuah file view dengan nama “product_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

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

#4. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

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

Maka, akan tampil seperti gambar berikut:

Pilih salah satu “Category”, maka akan tampil option dari “Sub Category” yang berhubungan.

Seperti gambar berikut:

Pada gambar diatas, saya memilih category “Fashion Wanita”, maka pada Sub Category hanya akan tampil sesuai dengan category yang terpilih yaitu: Dress, Sweater, dan Kebaya.

Jika Anda pilih category yang berbeda, maka juga akan tampil option Sub Category yang berbeda.

Itulah konsep dasar dari Select Option berhungan dengan Codeigniter dan Ajax JQuery.

Step #5. Insert dengan Select Option berhubungan dengan Codeigniter dan Ajax

Pada step ini Anda akan belajar bagaimana melakukan insert data ke database menggunakan select option berhubungan dengan Codeigniter dan AJAX JQuery.

Mari kita mulai.

#1. Controller

Buka controller “Product.php” yang tedapat pada folder “application/controllers”.

Kemudian ubah menjadi seperti berikut:

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

#2. Model

Buka model “Product_model.php” yang tedapat pada folder “application/models”.

Kemudian ubah menjadi seperti berikut:

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

#3. View

Buat sebuah view baru dengan nama “add_product_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

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

#4. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

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

Maka, akan tampil seperti gambar berikut:

Kemudian masukan product name, category, sub category, dan product price.

Kemudian klik tombol “Save Product” untuk menyimpan product ke database.

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

Step #6. Menampilkan data yang telah di insert ke datatable.

Extract file Datatable yang telah di download sebelumnya kedalam folder “assets”.

Extract file datatables.css kedalam folder “assets/css” dan datatables.js kedalam folder “assets/js”.

Perhatikan gambar berikut untuk lebih jelasnya:

Setalah itu, ikuti langkah berikut:

#1. Controller

Buka controller “Product.php” yang tedapat pada folder “application/controllers”.

Kemudian ubah menjadi seperti berikut:

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

#2. Model

Buka model “Product_model.php” yang tedapat pada folder “application/models”.

Kemudian ubah menjadi seperti berikut:

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

#3. View

Buat sebuah view baru dengan nama “product_list_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

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

#4. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

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

Maka, akan tampil seperti gambar berikut:

Klik tombol “Add New Product” untuk menambahkan product baru.

Masukan semua input, kemudian klik tombol “Save Product”.

Jika berjalan baik, maka akan tampil seperti berikut:

Step #7. Update data Select Option berhubungan dengan Codeigniter dan Ajax

Pada step ini, saya akan sharing bagaimana membuat update data dengan select option berhungan dengan Codeigniter dan AJAX.

Mari kita mulai.

Pertama-tama buka file view “product_list_view.php” yang terdapat pada folder “application/views”.

Kemudian temukan kode berikut:

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

Kemudian ubah menjadi seperti berikut:

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

Setalah itu, ikuti langkah berikut:

#1. Controller

Buka controller “Product.php” yang tedapat pada folder “application/controllers”.

Kemudian ubah menjadi seperti berikut:

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

#2. Model

Buka model “Product_model.php” yang tedapat pada folder “application/models”.

Kemudian ubah menjadi seperti berikut:

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

#3. View

Buat sebuah view baru dengan nama “edit_product_view.php” pada folder “application/views”.

Kemudian ketikan kode berikut:

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

#4. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

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

Maka, akan tampil seperti gambar berikut:

Kemudian klik tombol edit, maka akan tampil form edit seperti gambar berikut:

Edit data yang ingin di edit, kemudian klik tombol “Update Product”.

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

Step #8. Delete data ke database.

Pada step ini, saya akan sharing bagaimana membuat delete data ke database.

Mari kita mulai.

Pertama-tama buka file view “product_list_view.php” yang terdapat pada folder “application/views”.

Kemudian temukan 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;

Kemudian ubah menjadi seperti 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;

Setalah itu, ikuti langkah berikut:

#1. Controller

Buka controller “Product.php” yang tedapat pada folder “application/controllers”.

Kemudian tambahkan function delete seperti 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. Model

Buka model “Product_model.php” yang tedapat pada folder “application/models”.

Kemudian tambahkan function delete_product seperti 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. Testing

Untuk melakukan pengujian, buka browser Anda dan kunjungi url berikut:

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

Kemudian klik salah satu tombol “Delete” untuk menghapus data.

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

Related: Tutorial Lengkap CodeIgniter 4 Untuk Pemula

Kesimpulan:

Tutorial kali ini adalah tentang bagaimana membuat select option berhubungan dengan Codeigniter dan AJAX JQuery.

Mulai dari persiapan, pembuatan database dan table, installasi Codeigniter, konfigurasi Codeigniter, sampai dengan CRUD (Create Read Update Detele) dengan select option berhubungan.