• Contact Us
Thursday, December 22, 2022
-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
May 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

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

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

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

June 2, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

June 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

May 30, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

July 28, 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
Membuat Sitemap Otomatis Codeigniter 4

Membuat Sitemap Otomatis Codeigniter 4

1
Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

September 22, 2022
DOM dan GOM Javascript

Perbedaan BOM Dan DOM Pada JavaScript

September 20, 2022
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 infinite scroll javascript javascript tutorial laravel laravel 8 laravel9 laravel 9 load more ajax Menggunakan Multiple select2 dan menyimpan dengan format json 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 uang dari blog

Recent News

Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022

© 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