Enjun
Enjun Manusia

#4 Insert Data (Membuat Web Data Mahasiswa Sederhana Menggunakan CI dan Bootstrap 4)




Kali ini kita akan lanjutkan tutorial sebelumnya, setelah kita selesai menampilkan data yang ada di database, sekarang kita akan mencoba bagaimana untuk menambahkan data ke dalam database, cara nya cukup mudah dan sangat simple, mungkin yang agak rumit itu membuat komponen form input nya wkwk, oke langsung saja kita mulai.


hasil akan seperti ini.

Pertama, pastikan kalian telah menyelesaikan tutorial sebelumnya, jika belum kalian bisa buka tutorialnya di kategori codeigniter. Jika sudah mari kita buka codingan sebelumnya.


Sebelumnya kita telah membuat halaman data mahasiswa, serta membuat sebuah modal untuk button detail, kali ini kita akan bermain-main lagi dengan modal, maka dari itu kita buat sebuah modal baru untuk bagian tambah data, yang mana modal ini akan muncul jika kita klik button "Tambah Data" pada navbar.
Jadi, mari kita tambahkan codingan modal tambah data pada view halaman_data.




Pada codingan diatas, terdapat 3 bagian modal, modal header,modal body, dan modal footer, yang mana modal tersebut kita dapatkan dari bootstrap https://getbootstrap.com/docs/4.4/components/modal/, khusus pada bagian modal body, kita membutuhkan 6 element input 1 select option, dan 1 textarea, semua codingan untuk membuat elemen tsb bisa kalian cari di dokumentasi bootstrap.

Sekarang jika kalian klik tombol tambah data tidak akan ada respon apa2 dari web, karena kita belum menambahkan data-toggle="modal" data-target="#tambahData"  pada button tambah data, jadi silahkan kalian tambahkan, dan hasilnya akan seperti ini :
 <li class="nav-item">
        <a class="nav-link btn btn-outline-secondary" href="#" 
        data-toggle="modal" data-target="#tambahData">
        Tambah Data</a>
</li>

Kita akan membahas 1 tag input agar kalian tahu fungsi tiap element yang ada pada modal tambah data.

<div class="form-group">
    <label for="exampleInputEmail1">NIM</label>
    <input type="text" name="nim" class="form-control">
</div> 

Contoh diatas adalah codingan untuk membuat bagian input NIM, yang mana disini tag input kita bungkus dengan tag div yang disertai class form-group, pada tag input terdapat type="text" yang fungsinya adalah komponen input yang akan kita buat akan bertipe text, lalu ada name="nim" yang mana fungsinya untuk memberi sebuah nama agar ketika kita ingin menampung data dari suatu form input, kita bisa membedakan data tersebut dari sebuah nama, tag input dengan name nama berarti tag tsb khusus untuk mengisi/menerima data yang berhubungan dengan nama.

Ketika kita telah selesai membuat form input, selanjutnya adalah kita akan memproses data yang akan ditambahkan lewat form input akan kita arahkan ke controller yang memiliki function tambah data, lalu data yang dari form input akan kita tampung nilai nya kedalam sebuah variabel. sebelum itu kita membutuhkan sebuah tag form untuk mengarahkan data kepada controller serta function yang kita tuju.

      <form action="<?= base_url('c_data')?>/tambah_data" method="post">

Contoh diatas adalah tag form yang kita gunakan pada latihan kali ini, mari kita bahas satu-satu tiap bagian nya :
  • action="<?= base_url('c_data')?>/tambah_data"
Action ini berfungsi untuk mengarahkan suatu proses ke halaman yang dituju, contoh disini kita akan arahkan ke controller c_data yang mana di controller tsb kita akan membuat sebuah function tambah_data untuk memproses data dari halaman view. lalu ada method="post" kalian bisa cari tahu sendiri apa itu method pada form.

Setelah kita buat modal tambah data, mari kita buat function tambah_data di controller c_data yang telah kita tetapkan pada form action.


        $nim = $this->input->post('nim');
        $nama = $this->input->post('nama');
        $prodi = $this->input->post('prodi');
        $email = $this->input->post('email');
        $kampus = $this->input->post('kampus');
        $quotes = $this->input->post('quotes');
        $jk = $this->input->post('jk');

Pada function tambah_data kita telah membuat variabel2 yang menampung nilai dari masing-masing form input yang ada di modal tambah_data.
$this->input->post('nim'); maksudnya adalah variabel $nim menerima data dari form input di modal yang mana form input tsb mempunyai sebuah nama yaitu "nim", ingat bahwa kita telah membahas apa itu name tadi.
Semua data yang ada di input kita tampung dalam variabel, yang tujuannya adalah data tersebut akan kita masukkan kedalam database.

$data = array (
            'nim' => $nim,
            'nama_lengkap' => $nama,
            'prodi' => $prodi,
            'email' => $email,
            'kampus' => $kampus,
            'quotes' => $quotes,
            'jk' => $jk
        );

Nah bagian diatas adalah bagian untuk  data yang sebelumnya telah kita masukan ke tiap variabel, kini variabel yang telah menampung data dari modal tambah_data  kita buat kedalam array yang mana array ini kita masukan kedalam variabel $data. Pada intinya, variabel data ini akan menampung semua variabel yang telah menerima nilai dari form input. 'nim' => $nim, maksudnya adalah "nim" yang berasal dari field nim yang ada pada tabel data_mahasiswa
akan memperoleh data dari variabel $nim.
perlu di ingat yah, bahwa yang berada didalam array adalah patokannya dari tabel database, sedangkan jika yang insialisasi tiap variabel diatas patokannya dari form input.
$this->m_data->add_data($data,'data_mahasiswa');
        redirect('c_data/data_page');
 
Selanjutnya adalah meneruskan data dari controller ke model agar data yang telah disiapkan akan di insert kedalam tabel, yaitu dengan code $this->m_data->add_data($data,'data_mahasiswa'); yang artinya data yang telah kita siapkan kedalam array menjadi variabel $data, akan kita teruskan ke bagian model yaitu m_data yang mana mempunyai function add_data lalu tak lupa juga kita sertai parameter $data (karena datanya ingin kita insert), lalu nama tabel nya.

Jadi sekarang mari kita buat function add_data di dalam model m_data.

function add_data($data,$table)
    {
        $this->db->insert($table,$data);
    }

dalam function add_data terdapat 2 parameter, yaitu $data,dan $table, tahu kan parameter tsb darimana? jika belum parameter tsb dapat dari controller, yang mana kita ingin meneruskan sebuah data ke model lalu di function model kita sertakan juga parameter nya, bedanya hanya yang sebelumnya di controller kita sertakan nama tabel sedangkan di function berubah menjadi $table, mengapa? karena nama tabel di controller adalah sebuah argumen, jadi nilainya akan masuk kedalam variabel $table yang ada di method.

$this->db->insert($table,$data); code ini berfungsi untuk melakukan sebuah insert data kedalam database, ini sama saja jika kedalam query yaitu (INSERT INTO nama_tabel VALUES('isi'); jika sudah, mari kembali ke controller.

Setelah data telah berhasil kita tambahkan langkah terakhir adalah membuat halaman web kembali ke halaman list data, redirect berfungsi untuk mengalihkan suatu halaman ketika proses sebelumnya telah diselesaikan, intinya jika kita tidak menggunakan redirect setelah data berhasil di insert halaman web akan menampilkan halaman kosong,untuk kembali ke halaman list data kalian harus merubah halaman url sesuai dengan url ke halaman list_data, dengan redirect kita dapat mengaturnya secara otomatis, contohnya adalah seperti ini redirect('c_data/data_page'); disini web akan otomatis mengalihkan halaman ke controller c_data yang mempunyai function data_page, function data page adalah function yang untuk menampilkan list data.

Oke itu saja untuk kali ini, jika kalian kurang paham kalian bisa bertanya lewat kolom komentar atau bisa pc saya lewat salah satu sosmed. Dan jika kalian ingin download source code nya, kalian bisa download di github saya : disini


Enjun
Enjun  Manusia

Komentar