• Contact Us
Senin, Oktober 2, 2023
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result

Tutorial Codeigniter 3 ~ Menggunakan Multiple select2 dan menyimpan dengan format json

admin by admin
Mei 25, 2022
in Codeigniter, Problem Solution, Tutorial
0 0
0
Home Tutorial Codeigniter

This post is also available in: English

Hallo apa kabar teman teman semua, kali ini kita membahas codeigniter 3 dan select2. Select2 sangat berguna bagi kita ketika membuat data pencarian sesai data tertentu. Select2 sangat membantu developer ketika membangun aplikasi berbasis web. Sebelum kita lanjutkan di mohon teman teman pelajari dasar dari Codeigniter 3.

Kita langsung saja ke pemabasan kita, cara menggunakan select2 di Codeigniter 3.

1. Database

Buatlah tabel User dan Hobby pada sql teman semua. Struktur tabel seperti ini seperti ini:

  • Tabel Users
CREATE TABLE `users` (
  `id` varchar(25) NOT NULL,
  `name` varchar(255) NOT NULL,
  `data_pro_hobby` text DEFAULT NULL COMMENT 'Data Format JSON',
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Tabel users ini hanya sebagai contoh untuk menyimpan data hobby dalam format json.

  • Tabel Hobby
CREATE TABLE `hobbies` (
  `id` varchar(25) NOT NULL,
  `data_name` varchar(255) NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Tabel hobby berfungsi untuk menympan data hobby.

2. Controller Index

Kali ini teman teman buat controller sebagai fungsi untuk menampilkan data.

public function index()
    {
        $data['name'] = $this->security->get_csrf_token_name();
        $data['hash'] = $this->security->get_csrf_hash();
        $data["hobby"] = $this->db->get_where('hobbies',array('status'=>1))->result();
        $this->display('index', $data);
        }

    }

3. View Hobby

Selanjutnya kita tambahkan view untuk input data hobby kita.

<div class="modal fade" id="modalHobby" role="dialog" aria-labelledby="Label" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="Lable">Add Hobby</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form action="<?php echo base_url('user/profile/add_hobby/) ?>" method="post" role="form" enctype="multipart/form-data">
            <input type="hidden" name="<?php echo $CSRF['name']; ?>" value="<?php echo $CSRF['hash']; ?>"/>
            <input type="hidden" name="id" value="<?php echo $users->id ?>" />
            <input type="hidden" name="form" value="profile/setting" />
            <div class="modal-body">
                <div class="mb-3">
                <input type="text" name="name" class="form-controll">
                </div>
                <div class="mb-3">
                <select class="hobby w-100 form-select" name="hobbies[]" multiple="multiple" require>
                    <?php
					           if(!empty($hobby)){
					              foreach($hobby as $value){
						              echo "<option value='$value->id'>$value->data_name</option>";
					          }}
                    ?>
                </select>
                </div>
            </div>
            <div class="modal-footer border-top">
                <button type="button" class="btn btn-muted" data-bs-dismiss="modal">Cancel</button>
                <input type="submit" class="btn btn-danger" value="Save">
            </div>
            </form>
            </div>
        </div>
    </div>

Maka langkah selanjutnya kita tambahkan, code select2.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>	
$(this).find('.hobby').each(function() {
				var dropdownParent = $(document.body);
				if ($(this).parents('.modal.show').length !== 0)
					dropdownParent = $(this).parents('.modal.show');
				$(this).select2({
                    theme: "bootstrap5",
                    placeholder: '-Select Hobby-',
					dropdownParent: dropdownParent,
                    ajax: {
                        url: '<?php echo base_url();?>user/setting/searchhobby',
                        dataType: 'json',
                        delay: 250,
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        },
                        cache: true
                    },
                    tags: true
                });
			});
</script>

Hasil dari kode di atas:

4. Route

Tambahkan route untuk menjalankan select2 dan penyimpanan data kita.

// Hobby
$route['user/setting/searchhobby']           = 'users_setting/searchHobby';
$route['user/profile/add_hobby/(:any)']      = 'users_profile/hobby_add';

5. Controller Search Data Hobby

 function searchHobby()
    {
        $q = $this->input->get('q');
        $this->load->model('M_hobby');
        echo json_encode($this->M_setting->getHobby($q));
    }

6. Model Hobby

<?php
class M_hobby extends CI_Model
{
    function __construct()
    {
        parent::__construct();
    }
    
    function getHobby($str)
    {
        $this->db->select('id, data_name as text');
        $this->db->like('data_name', $str);
        $query = $this->db->get('mst_hobbies');
        return $query->result();
    }
}
?>

7. Controller tambah hobby

Kali ini kita akan membuat sebuah fungsi untuk menyimpan data hobby kita ke tabel users.

/** add hobby */
    public function hobby_add()
    {
        $this->form_validation->set_rules('hobbies[]', 'hobby', 'trim|required');
        $name    = $this->input->post('name');
        $hobbies    = $this->input->post('hobbies');
		    if(!empty($hobbies)){
                $result = [];
                foreach($hobbies AS $key => $val){
                $hobby = $this->db->get_where('hobbies', array('id'=>$hobbies[$key]))->row();
                $result[] = array(
                    'hobby_id'          => $hobby->id,
                );
                }
        $contact['hobby'] = json_encode($result, true);
        $update = $this->db->update('users', $contact);
        }
        if($update == true){
            $this->session->set_flashdata('success', 'Account has been saved');
        }
        redirect('index');
    }

Output data json ke tabel users:

[{"hobby_id":"21090861384371A7E59"},{"hobby_id":"210908613842CA630B1"},{"hobby_id":"210908613842D26118E"},{"hobby_id":"210908613842D8F29B9"}]

Demikian tutorial yang bisa saya sampaikan, semoga bermanfaat untuk teman teman semuanya.

Baca juga tutorial yang lainnya:

Tutorial Codeigniter 4 ~ Load more menggunakan ajax

Tutorial CodeIgniter 4 ~ RESTful API JWT Authentication

Menghilangkan Public dan Index.php dari URL Codeigniter 4

Tags: codeigniter 3codeigniter 4Menggunakan Multiple select2 dan menyimpan dengan format jsonselect2 codeignitertutorial codeignitertutorial codeigniter 4
ShareTweetShare
admin

admin

Next Post
Indosat Ooredoo Hutchison Digital Camp

Indosat Ooredoo Hutchison Digital Camp

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Juni 2, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

Juli 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

Mei 30, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Juni 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Migration Laravel

Migration Laravel

1
HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023
Programmer Atau Hacker?

Programmer Atau Hacker?

April 6, 2023
PENGENALAN BACKEND DEVELOPER

Pemrograman Backend Developer

April 5, 2023
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html html basic html dasar infinite scroll javascript javascript tutorial laravel laravel 8 laravel 9 laravel9 load more ajax mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs

Recent News

HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • English
  • Indonesia