Codeigniter Tutorial Indonesia - Input Dengan Jquery Add Remove Text
Codeigniter Tutorial Indonesia – Bismillahirrohmanirrohim, tutorial kali ini adalah mengenai framework Codeigniter. Seperti yang kita ketahui, Codeigniter merupakan framework yang paling banyak digunakan di Indonesia. Dengan instalasi yang terbilang mudah dan tidak rumit dalam mengimplementasi kan nya, membuat framework ini menjadi favorit (menurut saya sih hehehe…).
Kita kembali ke bahasan utama yaitu bagaimana menghadapi multi input dalam satu halaman transaksi. Ketika dalam melakukan perancangan suatu database biasanya kita menemukan Many-to-Many Relationship atau One-to-Many Relationship. Jika menemukan relasi seperti tadi, maka sering menimbulkan pertanyaan. Yaitu bagaimana merancang form yang mendukung dalam implementasi relasi seperti tadi.
Contoh kasusnya adalah dalam retur atau pengembalian barang. Dalam retur barang biasanya tidak hanya satu jenis barang yang dikembalikan dan jumlah masing-masing dari jenis barang bisa saja berbeda. Lalu bagaimana solusinya? Jika dalam perancangan database, maka dimisalkan perancangannya seperti berikut ini:
Tabel Retur
id_retur
tanggal
keterangan
Tabel Detail Retur
id_detail
id_retur
barang
jumlah
Berikut ini adalah query pada database nya dengan nama database test:
-- --------------------------------------------------------
--
-- Struktur dari tabel `detail_retur`
--
CREATE TABLE IF NOT EXISTS `detail_retur` (
`id_detail_retur` int(11) NOT NULL AUTO_INCREMENT,
`id_retur` int(11) NOT NULL,
`barang` varchar(20) NOT NULL,
`jumlah` int(11) NOT NULL,
PRIMARY KEY (`id_detail_retur`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Struktur dari tabel `retur`
--
CREATE TABLE IF NOT EXISTS `retur` (
`id_retur` int(11) NOT NULL AUTO_INCREMENT,
`tanggal` date NOT NULL,
`keterangan` text NOT NULL,
PRIMARY KEY (`id_retur`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Kemudian buatkan file utama.php pada view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<title>Retur | Pengembalian</title>
<!-- Bootstrap core CSS -->
<link href="<?php echo base_url();?>assets/bootstrap.css" rel="stylesheet">
<script type="text/javascript">
var i = 0;
function tambah(){
i++;
var addBarang = "<input type='text' class='form-control' name='barang[]' required>";
var addJumlah = "<input type='text' class='form-control' name='jumlah[]' required>";
$("#detailRetur tbody").append("<tr class='"+i+"'><td>"+addBarang+"</td><td>"+addJumlah+"</td></tr>")
};
function kurang() {
if(i>0){
$("#detailRetur tbody tr").remove("."+i);
i--;
} else {
i = 1;
}
};
</script>
</head>
<body>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<h2>Retur Barang</h2>
<form role="form" class="form-horizontal" method="post" action="<?php echo base_url();?>welcome/doretur">
<div class="form-group">
<label for="tanggal">Tanggal</label>
<input type="text" class="form-control" name="tanggal" required>
</div>
<div class="form-group">
<label for="keterangan">Keterangan</label>
<input type="text" class="form-control" name="keterangan" required>
</div>
<div class="form-group">
<h3>Detail Retur Barang</h3>
<table id="detailRetur" class="table table-striped" width=100%>
<thead>
<tr>
<td align="center"><h4>Barang</h4></td>
<td align="center"><h4>Jumlah</h4></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control 0" name="barang[]" required></td>
<td><input type="text" class="form-control 0" name="jumlah[]" required></td>
</tr>
</tbody>
</table>
<br>
<a id="tambah" class="btn btn-primary" onclick="tambah();">+</a>
<a id="kurang" class="btn btn-primary" onclick="kurang();">-</a>
</div>
<button type="submit" class="btn btn-warning btn-lg">Submit</button>
</form>
</div>
</div>
<hr>
<footer>
<p>© <a href="http://aditiyagita.com">Aditiyagita.com</a></p>
</footer>
</div> <!-- /container -->
<script src="<?php echo base_url();?>assets/assets/js/jquery.js"></script>
<script src="<?php echo base_url();?>assets/assets/js/bootstrap.min.js"></script>
</body>
</html>
Lalu edit welcome.php pada folder controller
class Welcome extends CI_Controller {
public function index()
{
$this->load->view('utama');
}
public function doretur(){
$this->load->model('model_retur');
$tanggal = $this->input->post('tanggal');
$keterangan = $this->input->post('keterangan');
$barang = $this->input->post('barang');
$jumlah = $this->input->post('jumlah');
$query = $this->model_retur->addRetur($tanggal, $keterangan);
$id_retur = $query['max'];
$i = 0;
foreach ($barang as $br) {
$this->model_retur->addDetilRetur($id_retur, $br, $jumlah[$i]);
$i++;
}
}
}
Kemudian buatkan file model_retur.php pada Model
class model_retur extends CI_model{
function addRetur($tanggal, $keterangan){
$query = $this->db->query("INSERT INTO `retur` VALUES (NULL, '$tanggal', '$keterangan')");
if($query){
$max = $this->db->query("SELECT MAX(id_retur) as max FROM retur");
}
return $max->row_array();
}
function addDetilRetur($id_retur, $barang, $jumlah){
$query = $this->db->query("INSERT INTO `detail_retur` VALUES (NULL, '$id_retur', '$barang', '$jumlah')");
}
}
?>
Jika ingin mendowload sorce nya, silahkan download disini.
Selamat Mencoba