Codeigniter

Multiple Input Form dengan Menggunakan Codeigniter

Akhirnya aku bisa update blog ini lagi, hehe… mungkin temen2 udah ga sabar untuk menanti tutorial2 komputer yang baru di blog ini, khususnya tutorial Codeigniter.

Untuk kali ini, Cheyuz akan membuat tutorial Codeigniter untuk membuat Multiple Input Form. Apa itu Multiple Input Form? Multiple Input Form adalah suatu bentuk form di mana kita akan menginputkan banyak data ke dalam database melalui form secara sekaligus. Jadi kita tidak menginputkan data satu persatu.

Form Input Mahasiswa

NIM:
Nama:
Alamat:

Jika kita memakai cara yang di atas, maka kita harus menginputkan mahasiswa satu persatu. Bayangkan gimana kalo kita ingin menginputkan 50 data? Tentu kita harus mengisi form sebanyak 50 kali bukan?

Coba lihat form berikut ini:

Form Input Mahasiswa

NIM Nama Alamat

Coba Anda lihat, apa bedanya cara pertama dengan cara kedua? keliatan kan? Nah, jadi bedanya apabila kita memakai cara kedua, kita dapat menginput beberapa siswa sekaligus.

Di sini kita akan membuat 3 bagian modul, yaitu:

  1. Form untuk mengisi berapa data yang akan dimasukkan
  2. Form untuk pengisian form multiple
  3. Daftar data yang telah dimasukkan
Catatan:
Diasumsikan base_url() untuk tutorial ini adalah http://localhost/webku
dan index.php telah dihilangkan..tutorial untuk menghilangkan index.php ada di sini

Pertama2 buat dulu database sebagai berikut:

CREATE TABLE IF NOT EXISTS mahasiswa (
  id int(5) NOT NULL AUTO_INCREMENT,
  `nim` varchar(20) NOT NULL,
  `nama` varchar(100) NOT NULL,
  `alamat` text NOT NULL,
  PRIMARY KEY (id)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Jangan lupa cek koneksi ke database apakah sudah benar atau belum..
konfigurasi untuk koneksi database ada di /system/application/config/database.php.

Buatlah sebuah controller data_mahasiswa.php (atau Anda bisa melanjutkan tutorial dari Tutorial Dasar Part I untuk membuat controller data_mahasiswa.php dan melanjutkannya).

Di controller tersebut, tambahkan function untuk membuat tampilan multiple input form:

<?php
class Data_mahasiswa extends Controller {
 
...
 
    function add_multiple() {
        $this->load->view('add_multiple');
    }
}
?>

Setelah kamu bikin controller di atas, kamu tinggal bikin ‘view’ untuk tampilan formnya, dengan cara membuat file add_multiple.php di folder /system/application/view
Isikan code HTML berikut di file tersebut:

<h2>Multiple Form Input Mahasiswa</h2>
<form action="" method="post">
    Banyak mahasiswa yang ingin dimasukkan:
    <input name="banyak_data" size="3" /> orang<br />
    <input type="submit" value="Lanjut" />
</form>

Maka hasilnya seperti berikut:

Multiple Form Input Mahasiswa

Banyak mahasiswa yang ingin dimasukkan: orang

Kemudian tambahkan code berikut untuk function add_multiple() file controller data_mahasiswa.php tadi, menjadi seperti berikut:

<?php
class Data_mahasiswa extends Controller {
 
...
 
    //ADD MULTIPLE
    function add_multiple() {
        if($_POST==NULL) {
            $this->load->view('add_multiple');
        }else{
            redirect('data_mahasiswa/add_multiple_post/'.$_POST['banyak_data']);
        }
    }
}
?>

Maksud dari function di atas adalah meload view add_multiple.php yang berisi halaman input banyak data mahasiswa yang dimasukkan.. kemudian ketika disubmit (POST) maka akan di-redirect/alihkan ke function add_multiple_post() dengan parameter banyaknya data yg dimasukkan ($_POST[‘banyak_data’]) yang akan kita buat nanti… yaitu halaman munculnya multiple form.

Tambahkan function berikut di bawah function add_multiple():

class Data_mahasiswa extends Controller {
 
...
 
    function add_multiple_post($banyak_data=0) {
        $data['banyak_data'] = $banyak_data;
        $this->load->view('add_multiple_form',$data);
    }
}

Kemudian, buatlah tampilan multiple form input seperti gambar table di atas.
Berikut ini adalah kode HTML dari add_multiple_form.php, simpan di /system/application/views:

<h2>Multiple Form Input Mahasiswa</h2>
<form action="" method="post">
    <table>
        <tr>
            <td>NIM</td>
            <td>Nama</td>
            <td>Alamat</td>
        </tr>
        <?php for($i=1;$i<=$banyak_data;$i++): ?>
        <tr>
            <td><input name="data[<?php echo $i ?>][nim]" /></td>
            <td><input name="data[<?php echo $i ?>][nama]" /></td>
            <td><input name="data[<?php echo $i ?>][alamat]" /></td>
        </tr>
        <?php endfor ?>
    </table>
    <input type="submit" value="simpan" />
</form>

http://localhost/webku/data_mahasiswa/add_multiple_post/3

Multiple Form Input Mahasiswa

No NIM Nama Alamat
1
2
3

http://localhost/webku/data_mahasiswa/add_multiple_post/5

Multiple Form Input Mahasiswa

No NIM Nama Alamat
1
2
3
4
5

Kemudian, tambahkan ‘if’ dan ‘foreach’ di function add_multiple_post tadi, fungsinya adalah untuk mengetahui apakah form udah disubmit atau belum… jadi kode PHP lengkapnya sbb:

<?php
class Data_mahasiswa extends Controller {
 
...
 
    function add_multiple_post($banyak_data=0) {
        if($_POST==NULL) {
            $data['banyak_data'] = $banyak_data;
            $this->load->view('add_multiple_form',$data);
        }else {
            foreach($_POST['data'] as $d){
                $this->db->insert('mahasiswa',$d);
            }
            redirect('data_mahasiswa/lihat_data');
        }
    }
}
?>

OK, aku jelasin ya…
untuk function add_multiple_post():

  1. Data dicek dulu apakah sudah disubmit ato belum ($_POST==NULL), kalo belum, load view add_multiple_form.php dengan variable $banyak_data yang diambil dari parameter berdasarkan data yg dimasukkan sebelumnya (di function add_multiple(), yaitu $_POST[‘banyak_data’])
  2. Kalo datanya udah disubmit, maka lakukan insert data yang berulang sebanyak elemen dari $_POST[‘data’] (berdasarkan $banyak_data) ke dalam table ‘mahasiswa’ dengan data dari $_POST[‘data’] (input-an dari multiple form)
  3. Kemudian redirect/alihkan ke function lihat_data untuk menampilkan seluruh data mahasiswa yang akan kita buat setelah ini.

Nah, sekarang kita tinggal bikin daftar data ‘mahasiswa’ yang sudah dimasukkan.. Caranya, buat file list_mahasiswa.php di /system/application/views/ dengan isi sebagai berikut:

list_mahasiswa.php:

<h2>Daftar Mahasiswa</h2>
 
<table>
    <tr>
        <th>No</th>
        <th>NIM</th>
        <th>Nama</th>
        <th>Alamat</th>
    </tr>
    <?php $i = 0 ?>
    <?php foreach($mahasiswa as $m): ?>
    <tr>
        <td><?php echo $i++ ?></td>
        <td><?php echo $m->nim ?></td>
        <td><?php echo $m->nama ?></td>
        <td><?php echo $m->alamat ?></td>
    </tr>
    <?php endforeach ?>
</table>
<?php echo anchor('data_mahasiswa/add_multiple','Tambah Data') ?>

Lalu buat function-nya di Controller data_mahasiswa.php:

<?php
class Data_mahasiswa extends Controller {
 
...
 
    function lihat_data(){
        $data['mahasiswa'] = $this->db->get('mahasiswa')->result();
        $this->load->view('list_mahasiswa',$data);
    }
}
?>

Selesai.

Berikut ini adalah source code lengkapnya:

/system/application/controllers/data_mahasiswa.php

class Data_mahasiswa extends Controller {
    //...
    //... function2 yg ada di tutorial sebelumnya
    //...
 
    //ADD MULTIPLE
    function add_multiple() {
        if($_POST==NULL) {
            $this->load->view('add_multiple');
        }else {
            redirect('data_mahasiswa/add_multiple_post/'.$_POST['banyak_data']);
        }
    }
    function add_multiple_post($banyak_data=0) {
        if($_POST==NULL) {
            $data['banyak_data'] = $banyak_data;
            $this->load->view('add_multiple_form',$data);
        }else {
            foreach($_POST['data'] as $d){
                $this->db->insert('mahasiswa',$d);
            }
            redirect('data_mahasiswa/lihat_data');
        }
    }
    function lihat_data(){
        $data['mahasiswa'] = $this->db->get('mahasiswa')->result();
        $this->load->view('list_mahasiswa',$data);
    }
}

/system/application/views/add_multiple.php

<h2>Multiple Form Input Mahasiswa</h2>
<form action="" method="post">
    Banyak mahasiswa yang ingin dimasukkan:
    <input name="banyak_data" size="3" /> orang<br />
    <input type="submit" value="Lanjut" />
</form>

/system/application/views/add_multiple_form.php

<h2>Multiple Form Input Mahasiswa</h2>
<form action="" method="post">
    <table>
        <tr>
            <td>No</td>
            <td>NIM</td>
            <td>Nama</td>
            <td>Alamat</td>
        </tr>
        <?php for($i=1;$i<=$banyak_data;$i++): ?>
        <tr>
            <td><?php echo $i ?></td>
            <td><input name="data[<?php echo $i ?>][nim]" /></td>
            <td><input name="data[<?php echo $i ?>][nama]" /></td>
            <td><input name="data[<?php echo $i ?>][alamat]" /></td>
        </tr>
        <?php endfor ?>
    </table>
    <input type="submit" value="simpan" />
</form>

/system/application/views/list_mahasiswa.php

<h2>Daftar Mahasiswa</h2>
 
<table>
    <tr>
        <th>No</th>
        <th>NIM</th>
        <th>Nama</th>
        <th>Alamat</th>
    </tr>
    <?php $i = 0 ?>
    <?php foreach($mahasiswa as $m): ?>
    <tr>
        <td><?php echo $i++ ?></td>
        <td><?php echo $m->nim ?></td>
        <td><?php echo $m->nama ?></td>
        <td><?php echo $m->alamat ?></td>
    </tr>
    <?php endforeach ?>
</table>
<?php echo anchor('data_mahasiswa/add_multiple','Tambah Data') ?>

Untuk contoh file nya klik link Download yang ada di bawah ini..

DOWNLOAD

 

sumber : http://harian.cheyuz.com/_other/multiple-input-form-dengan-menggunakan-codeigniter

About Suendri

Owner dan Founder Go Software Media sebelumnya bernama PHPBeGO Foundation

Discussion

One thought on “Multiple Input Form dengan Menggunakan Codeigniter

  1. solved gan, tapi saya mau nanya gmn kalau inputannya dari scanner barcode trus formnya otomatis muncul di bawahnya ketika selesai scan…tanpa harus mengisi tambah angka

    Posted by Adib Jr | October 7, 2015, 1:05 pm

Tinggalkan Komentar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow Go Software Media Blog on WordPress.com

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 63 other followers

Archives

%d bloggers like this: