Scenario Tamah Data
1.Ketika Klik tab Tambah seperti gabar di bawah .
2.Kalo kalian ingin berpungsi ketika klik tambah kalian harus Menambahkan Class nya seperti gambar di bawah.Di mana cara nambah class ?
3.Saya akan tunjukan ke kalian membuata classs nya di mana lihat gambar di bawah ini.Kalian bisa ke views index
4.Lalu kita buat JQUERY nya seperti di gambar , kiata akan set title
$('#title-category').html("Tambah Category"); Codingan ini untuk membuat ,seperti gambar di bawah , kalo arti dari (#) adalah id
$('input[name="title"]').val(""); gunanya ketika kita sudah tambah teus mau nambah lagi nama yang di dalam tabel akan menghilang ,jadi gak per lu kita hapus dulu kita ingin tambah lagi .
$('#modal-categori').modal (show) Untuk menam pilkan tbale nya , # hesteg untuk nama-nama clum nya yang ingin kita buat .
5. kita coba isi colom nya seperti digambar, nama colom nya kalian bebas yan kalian buat.
.Lalu kita klik save nah kalo kalian ingin ketika klik save nya ber pungsi kalian harus buat class nya dulu dan buat codingan nya dulu seperti gambar-gambar di bawah ini.
GAMBAR 1
GAMBAR2
6. Lalu kita lanjut ke JQUERY nya kita liat codingan di bawah .
$(document).on('click', '.save', function(e){
e.preventDefault();
var el = $(this).parent().parent();
var url = "{{ route('category.store')}}";
var form = new FormData()
form.append('_token', $('meta[name="csrf-token"]').attr('content'));
form.append('id', $('input[name="id"]').val())
form.append('title', $('input[name="title"]').val())
form.append('status', $('select[name="status"]').val())
$.ajax({
url: url,
type: 'post',
data: form,
cache: false,
contentType: false,
processData: false,
success: function(res){
if(res.status){
table.draw();
$('#modal-category').modal('hide');
swal({
title: 'Berhasil !',
text: res.data.message,
type: 'success',
showCancelButton: false,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'OK',
allowOutsideClick: false
});
}else{
swal({
title: 'Error !',
text: res.data.message,
type: 'error',
showCancelButton: false,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'OK',
allowOutsideClick: false
});
}
}
});
});
.Ketika klik buat function(e) nya ya seperti codingan di atas ya ,lalu kita buat Route nya ke mana .
*
7. ajax untuk men store atau mengirim data Tambah ,bagai mana cara memastikan nya kita debug "log" yang kita ingin ketahua apa yang kita ingin tau.
$.ajax({
url: url,
type: 'post',
data: form,
cache: false,
contentType: false,
processData: false,
success: function(res){
if(res.status){
table.draw();
$('#modal-category').modal('hide');
swal({
title: 'Berhasil !',
text: res.data.message,
type: 'success',
showCancelButton: false,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'OK',
allowOutsideClick: false
});
}else{
swal({
title: 'Error !',
text: res.data.message,
type: 'error',
showCancelButton: false,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'OK',
allowOutsideClick: false
});
}
}
});
if (res.status) jika susses akan berhasil seperti coding di bawah :'Berhasil' ,jika gagal maka akan gagal .
public function store(Request $request)
{
$status = false;
try {
if ($request->id == null) {
$validator = \Validator::make(
$request->all(),
[
'title' => 'required|unique:categories,title',
'status' => 'required',
],
[
'title.required' => 'Silahkan Masukkan Judul !',
'title.unique' => 'Judul sudah pernah diinput !',
'status.required' => 'Silahkan Pilih status !',
]
);
} else {
$validator = \Validator::make(
$request->all(),
[
'title' => 'required|unique:categories,title,' . $request->id,
],
[
'title.required' => 'Silahkan Masukkan Judul !',
'title.unique' => 'Judul sudah pernah diinput !',
]
);
}
if ($validator->fails()) {
$messages = $validator->getMessageBag();
throw new \Exception($messages->first());
}
if ($request->id == null){
$category = new Category();
$category->title = $request->title;
$category->seotitle = Str::slug($request->title , "-");
$category->status = $request->status;
$category->save();
} else {
$category = Category::find($request->id);
$category->title = $request->title;
$category->seotitle = Str::slug($request->title, "-");
$category->status = $request->status;
$category->update();
}
$status = true;
$data['message'] = 'Data telah tersimpan !';
$response = [
'status' => $status,
'data' => $data
];
return response()->json($response);
} catch (\Exception $err) {
$data['message'] = $err->getMessage();
$response =[
'data' => $data,
'status' => $status
];
return response()->json($response);
}
}
8.table.draw: penjelasan "id"modal-category dan modal ('hide')menghilangkan, lalu munculkan notif susses atau Berhasil
$('#modal-category').modal('hide');
swal({
title: 'Berhasil !',
text: res.data.message,
type: 'success',
showCancelButton: false,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'OK',
allowOutsideClick: false
});
}else{
swal({
title: 'Error !',
text: res.data.message,
type: 'error',
showCancelButton: false,
confirmButtonColor: '#4fa7f3',
cancelButtonColor: '#d57171',
confirmButtonText: 'OK',
allowOutsideClick: false
});
}
.Sekian dan terimaksih maaf kalo ada ke salahan saya juga masih belajar ya ;-) .
Comments