- បន្ថែមពត៌មានក្រុមហ៊ុន
- កែប្រែពត៌មានក្រុមហ៊ុន
- លុបទិន្នន័យក្រុមហ៊ុន ម្តងមួយៗ
1-បង្កើត companies.blade.php នៅក្នុង views/companies ដើម្បីហៅពី CompanyController.php ខាងលើ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ប្រើប្រាស់ DataTable ជាមួយ Ajax</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
{{-- ប្រើប្រាស់ DataTable សម្រាប់ List --}}
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
{{-- បិតការប្រើ DataTable --}}
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="float-left">
<h2>Company Information</h2>
</div>
<div class="float-right mb-2">
<a class="btn btn-success" onClick="add()" href="javascript:void(0)"> Create Company</a>
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<div class="card-body">
<table class="table table-bordered" id="ajax-company">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
{{-- <th>Logo</th> --}}
<th>Created at</th>
<th style="width: 200px;">Action</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- បើក boostrap company model -->
<div class="modal fade" id="company-modal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="CompanyModal"></h4>
</div>
<div class="modal-body">
<form action="javascript:void(0)" id="CompanyForm" name="CompanyForm" class="form-horizontal" method="POST" enctype="multipart/form-data">
<input type="hidden" name="id" id="id">
<div class="form-group">
<label for="name" class="col-sm-4 control-label">Company Name</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Company Name" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-4 control-label">Company Email</label>
<div class="col-sm-12">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter Company Email" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-4 control-label">Company Phone</label>
<div class="col-sm-12">
<input type="telephone" class="form-control" id="phone" name="phone" placeholder="Enter Company phone" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Company Address</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="address" name="address" placeholder="Enter Company Address" required="">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="btn-save">Save changes
</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- បិត end bootstrap model -->
</body>
<script type="text/javascript">
$(document).ready( function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#ajax-company').DataTable({
processing: true,
serverSide: true,
ajax: "{{ url('ajax-company') }}",
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'phone', name: 'phone' },
{ data: 'address', name: 'address' },
{ data: 'created_at',
name: 'created_at.timestamp'
},
{data: 'action', name: 'action', orderable: false},
],
order: [[0, 'desc']]
});
});
// សម្រាប់ពេលចុច create Company
function add(){
$('#CompanyForm').trigger("reset");
$('#CompanyModal').html("Create New Company"); //ដាក់ Title អោយ Form
$('#company-modal').modal('show'); //បើក Form Company Modal
$('#id').val('');
}
function editFunc(id){
$.ajax({
type:"POST",
url: "{{ url('edit-company') }}",
data: { id: id },
dataType: 'json',
success: function(res){
$('#CompanyModal').html("Edit Company");
$('#company-modal').modal('show');
$('#id').val(res.id);
$('#name').val(res.name);
$('#address').val(res.address);
$('#email').val(res.email);
$('#phone').val(res.phone);
}
});
}
function deleteFunc(id){
if (confirm("Delete Record?") == true) {
var id = id;
// ajax
$.ajax({
type:"POST",
url: "{{ url('delete-company') }}",
data: { id: id },
dataType: 'json',
success: function(res){
var oTable = $('#ajax-company').dataTable();
oTable.fnDraw(false);
}
});
}
}
$('#CompanyForm').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: "{{ url('store-company')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
$("#company-modal").modal('hide');
var oTable = $('#ajax-company').dataTable();
oTable.fnDraw(false);
$("#btn-save").html('Submit');
$("#btn-save"). attr("disabled", false);
},
error: function(data){
console.log(data);
}
});
});
</script>
</html>
និងបង្កើត file action.blade.php ក្នុង folder companies
<a href="javascript:void(0)" data-toggle="tooltip" onClick="editFunc({{ $id }})" data-original-title="Edit" class="edit btn btn-success btn-sm edit">
Edit
</a>
<a href="javascript:void(0);" id="delete-compnay" onClick="deleteFunc({{ $id }})" data-toggle="tooltip" data-original-title="Delete" class="delete btn btn-danger btn-sm">
Delete
</a>
2-បង្កើត CompanyController ដោយប្រើ command ខាងក្រោម៖
php artisan make:controller CompanyController -r
បន្ទាប់មកយើងបើក file companycontroller.php ក្នុង app/Http/Controllers/ រួចសរសេរកូដដូចខាងក្រោម៖
<?php
namespace App\Http\Controllers;
use App\Models\Company;
use Illuminate\Http\Request;
use KhmerDateTime\KhmerDateTime;
class CompanyController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
// dd(request()->ajax());
// $data['company']=Company::get();
$data = Company::latest()->get();
if(request()->ajax()) {
// return datatables()->of(Company::select('*'))
return datatables()->of($data)
->addColumn('action', 'companies.action')
->rawColumns(['action'])
->editColumn('created_at', function ($request) {
// https://www.leonelngande.com/format-dates-for-humans-with-carbon-in-php/
// https://datatables.yajrabox.com/eloquent/carbon
// https://github.com/phannaly/php-datetime-khmer
// return $request->created_at->diffForHumans();
return KhmerDateTime::parse($request->created_at)->fromNow();
})
->addIndexColumn()
->make(true);
}
return view('companies.companies');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$companyId = $request->id;
$company = Company::updateOrCreate(
[
'id' => $companyId
],
[
'name' => $request->name,
'email' => $request->email,
'address' => $request->address,
'phone' => $request->phone
]);
return Response()->json($company);
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit(Request $request)
{
$where = array('id' => $request->id);
$company = Company::where($where)->first();
return Response()->json($company);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Company $company)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy(Request $request)
{
$company = Company::where('id',$request->id)->delete();
return Response()->json($company);
}
}
3-បង្កើត Model ឈ្មោះថា Company.php ដោយប្រើ command ខាងក្រោម៖
php artisan make:model Company -m
បន្ទាប់មក បើក file app/Models/Company.php ហើយសរសេរកូដដូចខាងក្រោម៖
class Company extends Model
{
use HasFactory;
protected $fillable = [ 'name', 'email', 'address','phone','logo' ];
}
4-ទៅកែ file company នៅក្នុង database/migrations/2021_06_25_214841_create_employees_table.php
ដោយបន្ថែមកូដដូចខាងក្រោម៖
public function up()
{
Schema::create('companies', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('email');
$table->string('phone')->nullable();
$table->string('address')->nullable();
$table->string('logo')->default('default.jpg');
$table->timestamps();
});
}
ក្រោយមកយើងធ្វើ migration ដោយប្រើ command :
php artisan migrate
5-បង្កើត Route ដើម្បីហៅ Functions ទាំងអស់នៅក្នុង CompanyController.php
Route::get('ajax-company', [CompanyController::class, 'index']);
Route::post('store-company', [CompanyController::class, 'store']);
Route::post('edit-company', [CompanyController::class, 'edit']);
Route::post('delete-company', [CompanyController::class, 'destroy']);
6-តម្លើង Yajra Datatable Package
composer require yajra/laravel-datatables-oracle
After that you need to add providers and alias in your project's config/app.php file
'providers' => [ ..., Yajra\DataTables\DataTablesServiceProvider::class,]
'aliases' => [ ..., 'DataTables' => Yajra\DataTables\Facades\DataTables::class,]
composer require yajra/laravel-datatables-oracleAfter that you need to add providers and alias in your project's config/app.php file
'providers' => [
...,
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
...,
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
Then publish laravel datatables vendor package by using the following command:
php artisan vendor:publish
php artisan vendor:publish
7-Run Laravel 8 Project ដោយប្រើ command ខាងក្រោម៖
php artisan serve
រួចយើងវាយនៅលើ browser ដូចខាងក្រោម៖
localhost:8000
0 Comments