Kembali lagi bersama saya kali ini kita akan belajar bagaimana cara membuat form perulangan dengan PHP Codeigniter. Kita hanya butuh library javascript
jquery untuk proses code loopingnya. Ok lanjut saja anda simak kode dibawah ini, Good Luck :
Langkah 1. Anda buat File Controller dengan nama file
FormLoop.php selanjutnya anda kopi paste code controller dibawah ini.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class FormLoop extends CI_Controller {
public function index()
{
$data['title'] = "Insert Form Looping Using Javascript";
$this->load->view('form/form_loop', $data);
}
public function post()
{
$i = 0; // untuk loopingnya
$a = $this->input->post('first_name');
$b = $this->input->post('last_name');
if ($a[0] !== null)
{
foreach ($a as $row)
{
$data = [
'first_name'=>$row,
'last_name'=>$b[$i],
];
$insert = $this->db->insert('biodata', $data);
if ($insert) {
$i++;
}
}
}
$arr['success'] = true;
$arr['notif'] = '<div class="alert alert-success">
<i class="fa fa-check"></i> Data Berhasil Disimpan
</div>';
return $this->output->set_output(json_encode($arr));
}
}
/* End of file FormLoop.php */
/* Location: ./application/controllers/FormLoop.php */
2. File View
Langkah 2. Silahkan anda buat folder
Langkah 2. Silahkan anda buat folder
form dan buat file didalamnya dengan nama file form_loop.php dan simple saja anda tinggal kopi kode dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title><?php echo $title; ?></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body>
<div class="container">
<div class="row">
<div class="box-header with-border">
<div class="text-center">
<h2 align="center">Tutorial Codeigniter</h2>
<h3 class="box-title"><?php echo $title ?></h3>
</div>
</div>
<div class="col-md-12">
<div id="notif"></div>
</div>
<div class="col-md-12" style="margin: 10px;">
<div class="box box-solid">
<form action="<?php echo base_url('FormLoop/post') ?>" method="post" id="SimpanData">
<div class="box-body">
<blockquote>
<p><b>Keterangan!!</b></p>
<small><cite title="Source Title">Inputan Yang Ditanda Bintang Merah (<span style="color: red;">*</span>) Harus Di Isi !!</cite></small>
</blockquote>
<br>
<table class="table table-bordered" id="tableLoop">
<thead>
<tr>
<th class="text-center">#</th>
<th>First Name</th>
<th>Last Name</th>
<th><button class="btn btn-success btn-block" id="BarisBaru"><i class="fa fa-plus"></i> Baris Baru</button></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="box-footer">
<div class="form-group text-right">
<button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Simpan</button>
<button type="reset" class="btn btn-default">Batal</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
for(B=1; B<=1; B++){
Barisbaru();
}
$('#BarisBaru').click(function(e) {
e.preventDefault();
Barisbaru();
});
$("tableLoop tbody").find('input[type=text]').filter(':visible:first').focus();
});
function Barisbaru() {
$(document).ready(function() {
$("[data-toggle='tooltip']").tooltip();
});
var Nomor = $("#tableLoop tbody tr").length + 1;
var Baris = '<tr>';
Baris += '<td class="text-center">'+Nomor+'</td>';
Baris += '<td>';
Baris += '<input type="text" name="first_name[]" class="form-control first_name" placeholder="Firs Name..." required="">';
Baris += '</td>';
Baris += '<td>';
Baris += '<input type="text" name="last_name[]" class="form-control last_name" placeholder="Last Name..." required="">';
Baris += '</td>';
Baris += '<td class="text-center">';
Baris += '<a class="btn btn-sm btn-danger" data-toggle="tooltip" title="Hapus Baris" id="HapusBaris"><i class="fa fa-times"></i></a>';
Baris += '</td>';
Baris += '</tr>';
$("#tableLoop tbody").append(Baris);
$("#tableLoop tbody tr").each(function () {
$(this).find('td:nth-child(2) input').focus();
});
}
$(document).on('click', '#HapusBaris', function(e) {
e.preventDefault();
var Nomor = 1;
$(this).parent().parent().remove();
$('tableLoop tbody tr').each(function() {
$(this).find('td:nth-child(1)').html(Nomor);
Nomor++;
});
});
$(document).ready(function() {
$('#SimpanData').submit(function(e) {
e.preventDefault();
biodata();
});
});
function biodata() {
$.ajax({
url:$("#SimpanData").attr('action'),
type:'post',
cache:false,
dataType:"json",
data: $("#SimpanData").serialize(),
success:function (data) {
if (data.success == true) {
$('.first_name').val('');
$('.last_name').val('');
$('#notif').fadeIn(800, function() {
$("#notif").html(data.notif).fadeOut(5000).delay(800);
});
}
else{
$('#notif').html('<div class="alert alert-danger">Data Gagal Disimpan</div>')
}
},
error:function (error) {
alert(error);
}
});
}
</script>
</body>
</html>
bagaimana model nya?
ReplyDelete