จำนวนคนเข้าดู: 49

CRUD จัดการข้อมูลแผนกงาน Department Laravel & MySQL

Workshop นี้เป็นส่วนหนึ่งของคอร์ส สอนทำระบบแจ้งซ่อมออนไลน์ Laravel

คอร์สเรียนออนไลน์ สอนทำระบบแจ้งซ่อม ราคา 999 บาท จะได้ Template ตั้งต้น สอนทำเต็มระบบ

department.blade.php

@extends('layouts.master')
@section('title')
    @lang('Department')
@endsection

@section('content')
    @component('common-components.breadcrumb')
        @slot('pagetitle') Admin @endslot
        @slot('title') Department @endslot
    @endcomponent

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <a href="javascript:void(0);" onclick="openModal()" class="btn btn-success waves-effect waves-light"><i class="mdi mdi-plus me-1"></i>แผนกงาน</a>
                            </div>
                        </div>
                     
                            <div class="col-md-6">
                                <div class="form-inline float-md-end mb-3">
                                    <div class="search-box ms-2">
                                        <div class="position-relative">
                                            <form action="" id="search">
                                                <input type="text" class="form-control rounded bg-light border-0"
                                                    placeholder="Search..." id="search-input" name="search">
                                                <i class="mdi mdi-magnify search-icon"></i>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <!-- end row -->
                    <div class="table-responsive mb-4">
                        <table class="table table-centered table-nowrap mb-0" id="userTable">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>          
                                    <th scope="col" style="width: 90%;">แผนกงาน</th>
                                    <th scope="col" style="width: 5%;">แก้ไข/ลบ</th>
                                </tr>
                            </thead>
                            @foreach($data as $item)
                                <tr>
                                    <td>{{$item->id}}</td>
                                    <td>{{$item->dep_name}}</td>
                                    <td>
                                        <ul class="list-inline mb-0">
                                            <li class="list-inline-item">
                                                <a href="javascript:void(0);" 
                                                onclick="editModal(this)" 
                                                data-id="{{$item->id}}" 
                                                data-dep-name="{{$item->dep_name}}" 
                                                class="px-2 text-primary"><i
                                                class="uil uil-pen font-size-18"> </i></a>
                                            </li>
                                            <li class="list-inline-item">
                                                <a href="javascript:void(0);" 
                                                onclick="DeleteModal(this)"
                                                data-id="{{$item->id}}"
                                                data-dep-name="{{$item->dep_name}}" 
                                                class="px-2 text-danger"><i
                                                        class="uil uil-trash-alt font-size-18"></i></a>
                                            </li>
                                  
                                        </ul>
                                    </td>
                                </tr>
                            @endforeach
                        </table>
                    </div>

                    <div class="modal fade" tabindex="-1" id="exampleModal">
                        <form action="">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title">จัดการข้อมูลแผนกงาน</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                    <input type="text" name="dep_name" id="dep_name" class="form-control" placeholder="กรอกข้อมูลแผนก">
                                    <input type="hidden" name="id" id="id" class="form-control">
                                    </div>
                                    <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
                                    <button type="button" onclick="save()" class="btn btn-primary">บันทึกข้อมูล</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    {!! $data->links('layouts.pagination') !!}
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->
    @endsection
    @section('script') 
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        function openModal() {
            $('#id').val(null);
            $('#dep_name').val(null);
            $('#exampleModal').modal('show');
        }
        function editModal(element){
            $('#id').val($(element).data('id'));
            $('#dep_name').val($(element).data('dep-name'));
            $('#exampleModal').modal('show');
        }
        function save(){
            id =  $('#id').val();
            dep_name = $('#dep_name').val();
            if(id == ''){
               $.ajax({
                type:'POST',
                url:'{{url('admins/department/add')}}',
                data: {
                    name: dep_name
                },
                success:function(data) {
                    // console.log(data)
                    Swal.fire({
                        title: data.mgs,
                        html: '',
                        icon: data.icon,
                        timer: 1000,
                        showConfirmButton: false,
                        willClose: () => {
                                window.location.href = '';
                            clearInterval(timerInterval);
                        }
                    });
                }
             });
            }else{
                $.ajax({
                type:'POST',
                method: 'PUT',
                url:'{{url('admins/department/edit')}}',
                data: {
                    id: id,
                    name: dep_name
                },
                success:function(data) {
                     // console.log(data)
                     Swal.fire({
                        title: data.mgs,
                        html: '',
                        icon: 'success',
                        timer: 1000,
                        showConfirmButton: false,
                        willClose: () => {
                                window.location.href = '';
                            clearInterval(timerInterval);
                        }
                    });
                }
             });
            }
        }
        function DeleteModal(button){
            id = $(button).data('id');
            name = $(button).data('dep-name');
            Swal.fire({
                title   : 'ยืนยันการลบข้อมูลหรือไม่ ?',
                text    :  name,
                icon    : 'warning',
                showCancelButton    : true,
                confirmButtonColor  : '#3085d6',
                cancelButtonColor   : '#d33',
                confirmButtonText   : 'ยืนยันลบ',
                cancelButtonText    : 'ยกเลิก',
            }).then((result) => {

                if (result.isConfirmed) {
                    $.ajax({
                        url : '{{url('admins/department/del')}}',
                        type :'POST',
                        method: 'DELETE',
                        data : { 
                            id : id,
                           
                        },
                        success: function (data) {
                            Swal.fire({
                                title: data.mgs,
                                html: '',
                                icon: data.icon,
                                timer: 1000,
                                showConfirmButton: false,
                                willClose: () => {
                                        window.location.href = '';
                                    clearInterval(timerInterval);
                                }
                            });
                        }, error: function (data) {
                            // console.log(response);
                        }
                    });

                }

            });
        }
        $('#search-input').change(function(){
            document.getElementById("search").submit();
        })
    </script>
@endsection

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

@extends('layouts.master')

@section('title')

@lang('Department')

@endsection

@section('content')

@component('common-components.breadcrumb')

@slot('pagetitle') Admin @endslot

@slot('title') Department @endslot

@endcomponent

<a href="javascript:void(0);" onclick="openModal()" class="btn btn-success waves-effect waves-light"><i class="mdi mdi-plus me-1"></i>แผนกงาน</a>

</div>

<input type="text" class="form-control rounded bg-light border-0"

placeholder="Search..." id="search-input" name="search">

</form>

</div>

<thead>

<tr>

<th scope="col" style="width: 90%;">แผนกงาน</th>

</tr>

</thead>

@foreach($data as $item)

<tr>

<td>

<a href="javascript:void(0);"

onclick="editModal(this)"

data-id="{{$item->id}}"

data-dep-name="{{$item->dep_name}}"

class="px-2 text-primary"><i

class="uil uil-pen font-size-18"> </i></a>

</li>

<a href="javascript:void(0);"

onclick="DeleteModal(this)"

data-id="{{$item->id}}"

data-dep-name="{{$item->dep_name}}"

class="px-2 text-danger"><i

class="uil uil-trash-alt font-size-18"></i></a>

</li>

</ul>

</td>

</tr>

@endforeach

</table>

</div>

<h5 class="modal-title">จัดการข้อมูลแผนกงาน</h5>

</div>

</div>

<button type="button" onclick="save()" class="btn btn-primary">บันทึกข้อมูล</button>

</div>

</form>

</div>

{!! $data->links('layouts.pagination') !!}

</div>

@endsection

@section('script')

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

function openModal() {

$('#id').val(null);

$('#dep_name').val(null);

$('#exampleModal').modal('show');

}

function editModal(element){

$('#id').val($(element).data('id'));

$('#dep_name').val($(element).data('dep-name'));

$('#exampleModal').modal('show');

}

function save(){

id = $('#id').val();

dep_name = $('#dep_name').val();

if(id == ''){

$.ajax({

type:'POST',

url:'{{url('admins/department/add')}}',

data: {

name: dep_name

success:function(data) {

// console.log(data)

Swal.fire({

title: data.mgs,

html: '',

icon: data.icon,

timer: 1000,

showConfirmButton: false,

willClose: () => {

window.location.href = '';

clearInterval(timerInterval);

}

});

}

});

}else{

$.ajax({

type:'POST',

method: 'PUT',

url:'{{url('admins/department/edit')}}',

data: {

id: id,

name: dep_name

success:function(data) {

// console.log(data)

Swal.fire({

title: data.mgs,

html: '',

icon: 'success',

timer: 1000,

showConfirmButton: false,

willClose: () => {

window.location.href = '';

clearInterval(timerInterval);

}

});

}

});

}

function DeleteModal(button){

id = $(button).data('id');

name = $(button).data('dep-name');

Swal.fire({

title : 'ยืนยันการลบข้อมูลหรือไม่ ?',

text : name,

icon : 'warning',

showCancelButton : true,

confirmButtonColor : '#3085d6',

cancelButtonColor : '#d33',

confirmButtonText : 'ยืนยันลบ',

cancelButtonText : 'ยกเลิก',

}).then((result) => {

if (result.isConfirmed) {

$.ajax({

url : '{{url('admins/department/del')}}',

type :'POST',

method: 'DELETE',

data : {

id : id,

success: function (data) {

Swal.fire({

title: data.mgs,

html: '',

icon: data.icon,

timer: 1000,

showConfirmButton: false,

willClose: () => {

window.location.href = '';

clearInterval(timerInterval);

}

});

}, error: function (data) {

// console.log(response);

}

});

}

});

}

$('#search-input').change(function(){

document.getElementById("search").submit();

})

</script>

@endsection

DepartmentController.php

<?php

namespace App\Http\Controllers;
use App\Models\Department;
use Illuminate\Http\Request;

class DepartmentController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    public function index(Request $request)
    {
        $data = Department::select('*');
        if(isset($request->search)){
            $data = $data->where('dep_name', 'like', '%' . $request->search. '%');
        }
        $data = $data->orderBy('id', 'DESC')->paginate(10);
                 
        // return $data;
        return view('admins/department', compact(
            'data'
        ));
    }
    public function add(Request $request)
    {
        $check =  Department::where('dep_name', $request->name)->first();
        if(isset($check)){
            return response() -> json([
                'dep_name' => $request->name,
                'mgs' => 'ข้อมูลซ้ำ กรุณากรอกข้อมูลใหม่',
                'icon' => 'error'
            ]);
        }else{
            Department::insert(['dep_name'=>$request->name]);
            return response() -> json([
                'dep_name' => $request->name,
                'mgs' => 'บันทึกข้อมูลสำเร็จ',
                'icon' => 'success'
            ]);
        }
    }
    public function edit(Request $request)
    {
        Department::where('id', $request->id)->update(['dep_name'=>$request->name]);
        return response() -> json([
            'dep_name' => $request->name,
            'mgs' => 'แก้ไขข้อมูลสำเร็จ'
        ]);
    }
    public function del(Request $request)
    {
        Department::where('id', $request->id)->delete();
        return response() -> json([
            'mgs' => 'ลบข้อมูลสำเร็จ',
            'icon' => 'success'
        ]);
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Department;

use Illuminate\Http\Request;

class DepartmentController extends Controller

{

/**

* Create a new controller instance.

* @return void

public function __construct()

{

$this->middleware('auth');

}

public function index(Request $request)

{

$data = Department::select('*');

if(isset($request->search)){

$data = $data->where('dep_name', 'like', '%' . $request->search. '%');

}

$data = $data->orderBy('id', 'DESC')->paginate(10);

// return $data;

return view('admins/department', compact(

'data'

));

}

public function add(Request $request)

{

$check = Department::where('dep_name', $request->name)->first();

if(isset($check)){

return response() -> json([

'dep_name' => $request->name,

'mgs' => 'ข้อมูลซ้ำ กรุณากรอกข้อมูลใหม่',

'icon' => 'error'

]);

}else{

Department::insert(['dep_name'=>$request->name]);

return response() -> json([

'dep_name' => $request->name,

'mgs' => 'บันทึกข้อมูลสำเร็จ',

'icon' => 'success'

]);

}

public function edit(Request $request)

{

Department::where('id', $request->id)->update(['dep_name'=>$request->name]);

return response() -> json([

'dep_name' => $request->name,

'mgs' => 'แก้ไขข้อมูลสำเร็จ'

]);

}

public function del(Request $request)

{

Department::where('id', $request->id)->delete();

return response() -> json([

'mgs' => 'ลบข้อมูลสำเร็จ',

'icon' => 'success'

]);

}

Department Model

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Model;
 
class Department extends Model
{
    protected $table = 'department';
    protected $primaryKey = 'id';
    protected $fillable = ['dep_name'];
    public $timestamps = false;
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Department extends Model

{

protected $table = 'department';

protected $primaryKey = 'id';

protected $fillable = ['dep_name'];

public $timestamps = false;

}

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

laravel Laravel10 สอนทำระบบแจ้งซ่อมออนไลน์

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

CRUD จัดการข้อมูลแผนกงาน Department Laravel & MySQL

คอร์สเรียนออนไลน์ สอนทำระบบแจ้งซ่อม ราคา 999 บาท จะได้ Template ตั้งต้น สอนทำเต็มระบบ

Share this:

Related

วัยวุฒิ ชุมเมืองปัก