Cara Membuat dynamic form on cheng di Jquery laravel sekarang kita lihat ke gambar sebagai contoh di bawah.
Nah di gambar ini sya akan memilih di colum tipe pelanggan memilih Prusahaan , memakai on cheng agar nampil colum Namaperusahaan , di sini saya ada dua pilihan yaituh perusahaan & Personal sekarang kita liaht gambar di bawah ini.
Nah ketika kita pilih personal kita akan mengurangi clum nya atau meng hilang kan satu klum nya , nah bagai mana cara nya simak gambar codingan di bawah , dan codinga nya .
<div id="content" class="modal-body data-form-pelanggan">
<input type="hidden" value="" name="id">
<div class="form-group">
<label for="" class="col-sm-8 control-label">Tipe Pelanggan</label>
<div class="col-sm-12">
<select name="tipe_pelanggan" id="tipe_pelanggan" class="form-control type"
style="width:100%;">
<option value="">Pilih Tipe Pelanggan</option>
<option value="perusahaan">Perusahaan</option>
<option value="personal">Personal</option>
</select>
<span style="color: red" class="error"></span>
</div>
</div>
<div class="form-group" id="perusahaan">
<div class="col-sm-12">
</div>
</div>
codingan lengkap"" . VIew index.blade.php
@extends('layouts.app')
@section('page-title')
{{ $module }}
@endsection
@section('content')
<div class="content-header sty-one">
<h1 class="text-black">Management {{ $module }}</h1>
<ol class="breadcrumb">
<li><a href="#">{{ $module }}</a></li>
<li class="sub-bread"><i class="fa fa-angle-right"></i> Management {{ $module }}</li>
</ol>
</div>
<!-- Main content -->
<div class="content">
<div class="info-box">
@permission('create' . $permission)
<p><a href="javascript:void(0)" class="btn btn-primary btn-add" type="button"><i class="fa fa-plus"></i>
Tambah</a></p>
<hr>
@endpermission
<div class="table-responsive">
<table id="pelanggan" class="table table-bordered table-striped nowrap">
<thead class="bg-primary text-white">
<tr>
<th style="width: 5%; color: #fff">No</th>
<th style="color: #fff">Tipe Pelanggan</th>
<th style="color: #fff">Nama Prusahaan</th>
<th style="color: #fff">Nama Pelanggan</th>
<th style="color: #fff">No Hp</th>
<th style="color: #fff">Email</th>
<th style="color: #fff">Kabupaten</th>
<th style="color: #fff">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
{{-- Modal Kelompok Biaya --}}
<div id="modal-pelanggan" class="modal fade bd-example-modal-lg pelanggan" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg-6">
<div class="modal-content">
<div class="modal-header bg-primary">
<h5 class="modal-title mt-0 pelanggan" id="title-pelanggan" style="color: #fff"></h5>
<button type="button" class="btn btn-social-icon btn-rounded btn-danger btn-sm" data-dismiss="modal"
aria-label="Close">
<span class="ti-close text-white"></span>
</button>
</div>
<form class="form-horizontal">
<div id="content" class="modal-body data-form-pelanggan">
<input type="hidden" value="" name="id">
<div class="form-group">
<label for="" class="col-sm-8 control-label">Tipe Pelanggan</label>
<div class="col-sm-12">
<select name="tipe_pelanggan" id="tipe_pelanggan" class="form-control type"
style="width:100%;">
<option value="">Pilih Tipe Pelanggan</option>
<option value="perusahaan">Perusahaan</option>
<option value="personal">Personal</option>
</select>
<span style="color: red" class="error"></span>
</div>
</div>
<div class="form-group" id="perusahaan">
<div class="col-sm-12">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-8 control-label">Nama Pelanggan</label>
<div class="col-sm-12">
<input type="text" class="form-control" name="nama_pelanggan" id="nama_pelanggan"
placeholder="Masukkan Pelanggan " autocomplete="off">
<span style="color: red" class="error"></span>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-8 control-label">No Hp</label>
<div class="col-sm-12">
<input type="text" class="form-control" name="no_hp" id="no_hp"
placeholder="Masukkan No Hp" autocomplete="off">
<span style="color: red" class="error"></span>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-8 control-label">Email</label>
<div class="col-sm-12">
<input type="text" class="form-control" name="email" id="email"
placeholder="Masukkan Email" autocomplete="off">
<span style="color: red" class="error"></span>
</div>
</div>
<div class="form-group ">
<label class="col-sm-8 control-label" for="example-input-normal">Kabupaten</label>
<div class="col-sm-12">
{!! Form::select('kabupaten', ['' => 'Silahkan Pilih Kabupaten'] + $kabupaten, null, [
'class' => 'form-control select2',
]) !!}
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-8 control-label">Alamat</label>
<div class="col-sm-12">
<textarea name="alamat" class="form-control" rows="5" placeholder="Masukkan Alamat"></textarea>
<span style="color: red" class="error"></span>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="fa fa-save btn btn-success save"> Simpan</button>
</div>
</div>
</form>
</div>
</div>
</div>
{{-- End Modal Kabupaten --}}
@endsection
@section('script')
<script type="text/javascript">
let pelanggan = $('#pelanggan').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route($route . 'index') }}"
},
columns: [{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
orderable: false,
searchable: false
},
{
data: 'tipe_pelanggan',
name: 'tipe_pelanggan'
},
{
data: 'nama_perusahaan',
name: 'nama_perusahaan'
},
{
data: 'nama_pelanggan',
name: 'nama_pelanggan'
},
{
data: 'no_hp',
name: 'no_hp'
},
{
data: 'email',
name: 'email'
},
{
data: 'kabupaten.nama_kabupaten',
name: 'kabupaten.nama_kabupaten',
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
],
order: [
[0, 'desc']
]
});
$(document).on('click', '.btn-add', function(e) {
e.preventDefault()
$('#title-pelanggan').html("Create Pelanggan");
$('#modal-pelanggan').modal({
backdrop: 'static',
keyboard: false,
show: true
});
$('input[name="id"]').val("");
$('select[name="tipe_pelanggan"]').val("");
$('input[name="nama_perusahaan"]').val("");
$('input[name="nama_pelanggan"]').val("");
$('input[name="no_hp"]').val("");
$('input[name="email"]').val("");
$('select[name="kabupaten"]').val("");
$('input[name="alamat"]').val("");
$('#modal-pelanggan').modal('show');
});
$(document).on('click', '.save', function(e) {
e.preventDefault()
var el = $(this).parent().parent();
var url = "{{ route($route . 'store') }}"
var form = new FormData()
form.append('_token', $('meta[name="csrf-token"]').attr('content'));
form.append('id', $('input[name="id"]').val())
form.append('tipe_pelanggan', $('select[name="tipe_pelanggan"]').val())
let tipepelanggan = $('select[name="tipe_pelanggan"]').val()
if (tipepelanggan === 'perusahaan'){
form.append('nama_perusahaan', $('input[name="nama_perusahaan"]').val())
}
// console.log(tipepelanggan);
form.append('nama_pelanggan', $('input[name="nama_pelanggan"]').val())
form.append('no_hp', $('input[name="no_hp"]').val())
form.append('email', $('input[name="email"]').val())
form.append('kabupaten', $('select[name="kabupaten"]').val())
form.append('alamat', $('textarea[name="alamat"]').val())
$.ajax({
url: url,
type: 'post',
data: form,
cache: false,
contentType: false,
processData: false,
success: function(res) {
if (res.status) {
pelanggan.draw();
$('#modal-pelanggan').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
})
}
}
});
});
$(document).on('click', '.edit', function(e){
e.preventDefault();
var id = $(this).data('id');
var url = "{{ route('pelanggan.edit', ':id') }}";
url = url.replace(':id', id)
$.ajax({
url: url,
type: 'get',
success: function(res) {
$('#title-pelanggan').html("Edit Pelanggan");
$('#content').html(res.data.view)
$('.select2').select2({
width:'100%'
})
$('#modal-pelanggan').modal({
backdrop: 'static',
keyboard: false,
show: true
});
}
});
});
$(document).on('change', '#tipe_pelanggan', function(e){
e.preventDefault();
let value = $(this).val();
let content = `<label for="" class="col-sm-8 control-label">Nama Perusahaan</label>`+
'<div class="col-sm-12">'+
`<input type="text" class="form-control" name="nama_perusahaan" id="nama_perusahaan" placeholder="Masukkan Nama Perusahaan" autocomplete="off">`+
`<span style="color: red" class="error"></span>`+
'</dev>';
if(value === 'perusahaan'){
$('#perusahaan').html(content);
}else{
$('#perusahaan').empty();
}
});
</script>
@endsection
Sekarang Lanjut Ke Controller nya .
<?phpSekarang Kiata lanjut ke edit.blde.php """
namespace App\Http\Controllers;
use App\Models\Kabupaten;
use Illuminate\Http\Request;
use App\Models\Pelanggan;
use Psy\Command\EditCommand;
use View;
use Yajra\DataTables\DataTables;
class PelangganController extends Controller
{
protected $model;
protected $title = 'Pelanggan';
protected $module = 'Pelanggan';
protected $view = 'pelanggan.';
protected $route = 'pelanggan.';
protected $permission = '-pelanggan';
public function __construct(Pelanggan $model)
{
$this->model = $model;
View::share('title', $this->title);
View::share('module', $this->module);
View::share('view', $this->view);
View::share('route', $this->route);
View::share('permission', $this->permission);
$this->middleware('permission:' . 'manage' . $this->permission)->only('index');
$this->middleware('permission:' . 'create' . $this->permission)->only('store');
$this->middleware('permission:' . 'edit' . $this->permission)->only('edit');
$this->middleware('permission:' . 'delete' . $this->permission)->only('destroy');
}
public function user()
{
return auth()->user();
}
public function index(Request $request)
{
if (\Auth::user()->isAbleTo('manage' . $this->permission)) {
$kabupaten = Kabupaten::orderBy('id', 'asc')->pluck('nama_kabupaten', 'id')->toArray();
if ($request->ajax()) {
$data = $this->model::with('kabupaten')->select();
return DataTables::of($data)
->addColumn('action', function ($data) {
return view('datatables.action', [
'model' => $data,
'can_edit' => 'edit-pelanggan',
'can_delete' => 'delete-pelanggan',
'form_url' => route('pelanggan.destroy', $data->id),
'edit_url' => route('pelanggan.edit', $data->id),
'confirm_message' => 'Yakin mau menghapus ' . $data->name . '?'
]);
})
->editColumn('tipe_pelanggan', function ($data) {
if ($data->tipe_pelanggan == 'perusahaan') {
return '<span class="badge badge-danger">Perusahaan</span>';
} else {
return '<span class="badge badge-success">Personal</span>';
}
})
->editColumn('nama_perusahaan', function ($data) {
if (empty($data->nama_perusahaan)) {
return '';
} else {
return $data->nama_perusahaan;
}
})
->setRowId(function ($data) {
return $data->id;
})
->rawColumns(['tipe_pelanggan'])
->addIndexColumn()
->make(true);
}
return view($this->view . 'index')->with(compact('kabupaten'));
} else {
return redirect()->back()->with('error', __('Permission denied'));
}
}
public function store(Request $request)
{
// dd($request->all());
$status = false;
try{
if ($request->id == null) {
$validator = \Validator::make(
$request->all(),
[
'tipe_pelanggan' => 'required',
'nama_pelanggan' => 'required',
'no_hp' => 'required',
'email' => 'required',
'kabupaten' => 'required',
'alamat' => 'required',
],
[
'tipe_pelanggan.required' => 'Silahkan Pilih Tipe Pelanggan !',
'nama_pelanggan.required' => 'Silahkan Masukan Nama Pelanggan !',
'no_hp.required' => 'Silahkan Masukan No Hp !',
'email.required' => 'Silahkan Masukan Email !',
'kabupaten.required' => 'Silahkan Pilih Kabupaten !',
'alamat.required' => 'Silahkan Masukan Alamat !',
]
);
} else {
$validator = \Validator::make(
$request->all(),
[
'tipe_pelanggan' => 'required',
'nama_pelanggan' => 'required',
'no_hp' => 'required',
'email' => 'required',
'kabupaten' => 'required',
'alamat' => 'required',
],
[
'tipe_pelanggan.required' => 'Silahkan Pilih Tipe Pelanggan !',
'nama_pelanggan.required' => 'Silahkan Masukan Nama Pelanggan !',
'no_hp.required' => 'Silahkan Masukan No Hp !',
'email.required' => 'Silahkan Masukan Email !',
'kabupaten.required' => 'Silahkan Pilih Kabupaten !',
'alamat.required' => 'Silahkan Masukan Alamat !',
]
);
}
if ($validator->fails()) {
$messages = $validator->getMessageBag();
throw new \Exception($messages->first());
}
if ($request->id == null) {
$pelanggan = new Pelanggan();
$pelanggan->tipe_pelanggan = $request->tipe_pelanggan;
$pelanggan->nama_perusahaan = (empty($request->nama_perusahaan)) ? NULL : $request->nama_perusahaan;
$pelanggan->nama_pelanggan = $request->nama_pelanggan;
$pelanggan->no_hp = $request->no_hp;
$pelanggan->email = $request->email;
$pelanggan->kabupaten_id = $request->kabupaten;
$pelanggan->alamat = $request->alamat;
$pelanggan->save();
} else {
$pelanggan = Pelanggan::find($request->id);
$pelanggan->tipe_pelanggan = $request->tipe_pelanggan;
$pelanggan->nama_perusahaan = $request->nama_perusahaan;
$pelanggan->nama_pelanggan = $request->nama_pelanggan;
$pelanggan->no_hp = $request->no_hp;
$pelanggan->email = $request->email;
$pelanggan->kabupaten_id = $request->kabupaten;
$pelanggan->alamat = $request->alamat;
$pelanggan->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);
} catch (\Exception $err) {
return redirect()->route($this->route . 'index')->with('success', ' Berhasil disimpan !');
}
}
public function edit($id)
{
$status = false;
try {
$pelanggan = Pelanggan::find($id);
$kabupaten = Kabupaten::orderBy('id', 'asc')->pluck('nama_kabupaten', 'id')->toArray();
$status = true;
$data['view'] = view('pelanggan.edit', compact('pelanggan', 'kabupaten'))->render();
$response = [
'status' => $status,
'data' => $data
];
return response()->json($response);
} catch (\Exception $er) {
$data['message'] = $er->getMessage();
$response = [
'status' => $status,
'data' => $data
];
return response()->json($response);
}
}
public function destroy($id)
{
try {
$data = $this->model::find($id);
$data->delete();
return redirect()->route($this->route . 'index')->with('success', ' Berhasil dihapus !');
} catch (\Exception $err) {
return redirect()->route($this->route . 'index')->with('error', $err->getMessage());
}
}
}
<input type="hidden" name="id" value="{{ $pelanggan->id }}">
<div class="form-group">
<label for="" class="col-sm-8 control-label">Tipe Pelanggan</label>
<div class="col-sm-12">
<select name="tipe_pelanggan" id="tipe_pelanggan" class="form-control type" style="width:100%;">
<option value="">Pilih Tipe Pelanggan</option>
<option value="perusahaan" {{ $pelanggan->tipe_pelanggan == 'perusahaan' ? 'selected':'' }}>Perusahaan</option>
<option value="personal" {{ $pelanggan->tipe_pelanggan == 'personal' ? 'selected':'' }}>Personal</option>
</select>
<span style="color: red" class="error"></span>
</div>
</div>
<div class="form-group" id="perusahaan">
<div class="col-sm-12">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-8 control-label">Nama Pelanggan</label>
<div class="col-sm-12">
<input type="text" class="form-control" name="nama_pelanggan" value="{{ $pelanggan->nama_pelanggan }}" placeholder="Masukkan Nema Pelanggan " autocomplete="off">
<span style="color: red" class="error"></span>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-8 control-label">No Hp</label>
<div class="col-sm-12">
<input type="text" class="form-control" name="no_hp" value="{{ $pelanggan->no_hp }}" placeholder="Masukkan No Hp " autocomplete="off">
<span style="color: red" class="error"></span>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-8 control-label">Email</label>
<div class="col-sm-12">
<input type="text" class="form-control" name="email" value="{{ $pelanggan->email }}" placeholder="Masukkan Email " autocomplete="off">
<span style="color: red" class="error"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-8 control-label" for="example-input-normal">Kabupaten</label>
<div class="col-sm-12">
{!! Form::select('kabupaten', ['' => 'Silahkan Pilih Kabupaten']+$kabupaten, $pelanggan->kabupaten_id,['class' => 'form-control select2']) !!}
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-8 control-label">Alamat</label>
<div class="col-sm-12">
<textarea type="text" class="form-control" name="alamat" placeholder="Masukkan Alamat " autocomplete="off">{{ $pelanggan->alamat }}</textarea>
<span style="color: red" class="error"></span>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="fa fa-save btn btn-success save"> Simpan</button>
</div>
Comments