POS | ระบบจัดการแผนก (Departments Laravel)

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

Workshop นี้เป็นส่วนหนึ่งของคอร์สสอนทำระบบ POS Laravel + PostgreSQL + AdminLTE

ระบบจัดการแผนก (Departments Management)

ระบบจัดการแผนกเป็นส่วนหนึ่งของระบบบริหารจัดการองค์กร ใช้สำหรับจัดเก็บข้อมูลแผนกต่าง ๆ ภายในหน่วยงาน เช่น แผนกบัญชี แผนกไอที หรือแผนกบุคคล เพื่อช่วยให้สามารถจัดการข้อมูลบุคลากรและโครงสร้างองค์กรได้อย่างเป็นระบบ
ขั้นตอนการสร้างตารางแผนก (Departments Table)

ในขั้นตอนนี้เป็นการสร้างโครงสร้างฐานข้อมูลสำหรับเก็บข้อมูลแผนกภายในระบบ โดยใช้ Laravel Migration เพื่อกำหนดรูปแบบของตาราง departments
create_departments_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::create('departments', function (Blueprint $table) {
            $table->id();
            $table->string('code')->unique();
            $table->string('name');
            $table->string('tag')->nullable();
            $table->timestamps();
            $table->unsignedBigInteger('created_by')->nullable();
            $table->unsignedBigInteger('updated_by')->nullable();
            
            $table->foreign('created_by')->references('id')->on('users')->onDelete('set null');
            $table->foreign('updated_by')->references('id')->on('users')->onDelete('set null');
        });
    }

    public function down()
    {
        Schema::dropIfExists('departments');
    }
};

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

return new class extends Migration

{

public function up()

{

Schema::create('departments', function (Blueprint $table) {

$table->id();

$table->string('code')->unique();

$table->string('name');

$table->string('tag')->nullable();

$table->timestamps();

$table->unsignedBigInteger('created_by')->nullable();

$table->unsignedBigInteger('updated_by')->nullable();

$table->foreign('created_by')->references('id')->on('users')->onDelete('set null');

$table->foreign('updated_by')->references('id')->on('users')->onDelete('set null');

});

}

public function down()

{

Schema::dropIfExists('departments');

}

};

ขั้นตอนการสร้างโมเดลจัดการแผนก (Department Model)

ในขั้นตอนนี้เป็นการสร้าง Model เพื่อใช้เป็นตัวกลางระหว่างระบบและฐานข้อมูล โดยโมเดล Department จะทำหน้าที่จัดการข้อมูลในตาราง departments

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Department extends Model
{
    use HasFactory;

    protected $fillable = [
        'code',
        'name',
        'tag',
        'created_by',
        'updated_by'
    ];

    public function creator()
    {
        return $this->belongsTo(User::class, 'created_by');
    }

    public function updater()
    {
        return $this->belongsTo(User::class, 'updated_by');
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Department extends Model

{

use HasFactory;

protected $fillable = [

'code',

'name',

'tag',

'created_by',

'updated_by'

];

public function creator()

{

return $this->belongsTo(User::class, 'created_by');

}

public function updater()

{

return $this->belongsTo(User::class, 'updated_by');

}

โมเดลนี้ใช้แทนตาราง departments ในฐานข้อมูล Laravel จะเชื่อมโยง Model กับตารางให้อัตโนมัติ

ทำให้สามารถ:
- เพิ่มข้อมูล
- แก้ไขข้อมูล
- ลบข้อมูล
- เรียกดูข้อมูล
ได้สะดวกผ่าน Eloquent ORM
ขั้นตอนการสร้างตัวควบคุมระบบจัดการแผนก (Department Controller)

Controller เป็นส่วนสำคัญที่ใช้ควบคุมการทำงานระหว่าง Model และ View โดย DepartmentController ทำหน้าที่จัดการข้อมูลแผนกทั้งหมดภายในระบบ

<?php

namespace App\Http\Controllers;

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

class DepartmentController extends Controller
{
    public function index()
    {
        $departments = Department::with(['creator', 'updater'])->latest()->paginate(10);
        return view('admins.departments.index', compact('departments'));
    }

    public function create()
    {
        return view('admins.departments.create');
    }

    public function store(Request $request)
    {
        $request->validate([
            'code' => 'required|unique:departments,code|max:255',
            'name' => 'required|max:255',
            'tag' => 'nullable|max:255'
        ]);

        Department::create([
            'code' => $request->code,
            'name' => $request->name,
            'tag' => $request->tag,
            'created_by' => auth()->id(),
            'updated_by' => auth()->id()
        ]);

        $notification = [
            'message' => 'เพิ่มแผนกสำเร็จ',
            'alert-type' => 'success'
        ];

        return redirect()->route('admin.departments.index')->with($notification);
    }

    public function edit(Department $department)
    {
        return view('admins.departments.edit', compact('department'));
    }

    public function update(Request $request, Department $department)
    {
        $request->validate([
            'code' => 'required|max:255|unique:departments,code,' . $department->id,
            'name' => 'required|max:255',
            'tag' => 'nullable|max:255'
        ]);

        $department->update([
            'code' => $request->code,
            'name' => $request->name,
            'tag' => $request->tag,
            'updated_by' => auth()->id()
        ]);

        $notification = [
            'message' => 'แก้ไขแผนกสำเร็จ',
            'alert-type' => 'success'
        ];

        return redirect()->route('admin.departments.index')->with($notification);
    }

    public function destroy(Department $department)
    {
        $department->delete();
        
        $notification = [
            'message' => 'ลบแผนกสำเร็จ',
            'alert-type' => 'success'
        ];

        return redirect()->route('admin.departments.index')->with($notification);
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Department;

use Illuminate\Http\Request;

class DepartmentController extends Controller

{

public function index()

{

$departments = Department::with(['creator', 'updater'])->latest()->paginate(10);

return view('admins.departments.index', compact('departments'));

}

public function create()

{

return view('admins.departments.create');

}

public function store(Request $request)

{

$request->validate([

'code' => 'required|unique:departments,code|max:255',

'name' => 'required|max:255',

'tag' => 'nullable|max:255'

]);

Department::create([

'code' => $request->code,

'name' => $request->name,

'tag' => $request->tag,

'created_by' => auth()->id(),

'updated_by' => auth()->id()

]);

$notification = [

'message' => 'เพิ่มแผนกสำเร็จ',

'alert-type' => 'success'

];

return redirect()->route('admin.departments.index')->with($notification);

}

public function edit(Department $department)

{

return view('admins.departments.edit', compact('department'));

}

public function update(Request $request, Department $department)

{

$request->validate([

'code' => 'required|max:255|unique:departments,code,' . $department->id,

'name' => 'required|max:255',

'tag' => 'nullable|max:255'

]);

$department->update([

'code' => $request->code,

'name' => $request->name,

'tag' => $request->tag,

'updated_by' => auth()->id()

]);

$notification = [

'message' => 'แก้ไขแผนกสำเร็จ',

'alert-type' => 'success'

];

return redirect()->route('admin.departments.index')->with($notification);

}

public function destroy(Department $department)

{

$department->delete();

$notification = [

'message' => 'ลบแผนกสำเร็จ',

'alert-type' => 'success'

];

return redirect()->route('admin.departments.index')->with($notification);

}

ขั้นตอนการสร้างหน้าจัดการแผนก (Departments List Page)

ในขั้นตอนนี้เป็นการพัฒนาหน้าแสดงรายการแผนกทั้งหมดในระบบ โดยใช้ Blade Template ของ Laravel เพื่อแสดงข้อมูลจากฐานข้อมูลในรูปแบบตาราง พร้อมเครื่องมือสำหรับจัดการข้อมูล
index.blade.php

@extends('themes.index')
@section('title', 'แผนก')

@section('content')
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">จัดการแผนก</h3>
                        <div class="card-tools">
                            <a href="{{ route('admin.departments.create') }}" class="btn btn-primary btn-sm">
                                <i class="fas fa-plus"></i> เพิ่มแผนก
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered table-striped dataTable dtr-inline collapsed" id="data-table">
                            <thead>
                                <tr>
                                    <th width="5%">#</th>
                                    <th width="10%">รหัส</th>
                                    <th>ชื่อแผนก</th>
                                    <th width="15%">แท็ก</th>
                                    <th width="12%">สร้างโดย</th>
                                    <th width="12%">แก้ไขโดย</th>
                                    <th width="12%">วันที่สร้าง</th>
                                    <th width="10%">จัดการ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($departments as $department)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $department->code }}</td>
                                    <td>{{ $department->name }}</td>
                                    <td class="text-center">
                                        @if($department->tag)
                                            <span class="badge badge-tag" style="background-color: {{ $department->tag }}; color: #000;">{{ $department->code }}</span>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>{{ $department->creator ? $department->creator->firstname : '-' }}</td>
                                    <td>{{ $department->updater ? $department->updater->firstname : '-' }}</td>
                                    <td>{{ $department->created_at ? $department->created_at->format('d/m/Y') : '' }}</td>
                                    <td>
                                        <a href="{{ route('admin.departments.edit', $department->id) }}" class="btn btn-sm btn-warning">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form id="delete-form-{{ $department->id }}" action="{{ route('admin.departments.destroy', $department->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-sm btn-danger" onclick="confirmDelete(event, {{ $department->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center">ไม่มีข้อมูลแผนก</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@extends('themes.index')

@section('title', 'แผนก')

@section('content')

<h3 class="card-title">จัดการแผนก</h3>

<i class="fas fa-plus"></i> เพิ่มแผนก

</a>

</div>

<thead>

<tr>

<th>ชื่อแผนก</th>

<th width="12%">สร้างโดย</th>

<th width="12%">แก้ไขโดย</th>

<th width="12%">วันที่สร้าง</th>

<th width="10%">จัดการ</th>

</tr>

</thead>

<tbody>

@forelse($departments as $department)

<tr>

<td>{{ $loop->iteration }}</td>

<td>{{ $department->code }}</td>

<td>{{ $department->name }}</td>

@if($department->tag)

<span class="badge badge-tag" style="background-color: {{ $department->tag }}; color: #000;">{{ $department->code }}</span>

@else

@endif

</td>

<td>{{ $department->creator ? $department->creator->firstname : '-' }}</td>

<td>{{ $department->updater ? $department->updater->firstname : '-' }}</td>

<td>{{ $department->created_at ? $department->created_at->format('d/m/Y') : '' }}</td>

<td>

<a href="{{ route('admin.departments.edit', $department->id) }}" class="btn btn-sm btn-warning">

</a>

<form id="delete-form-{{ $department->id }}" action="{{ route('admin.departments.destroy', $department->id) }}" method="POST" style="display:inline;">

@csrf

@method('DELETE')

</button>

</form>

</td>

</tr>

@empty

<tr>

<td colspan="8" class="text-center">ไม่มีข้อมูลแผนก</td>

</tr>

@endforelse

</tbody>

</table>

</div>

@endsection

create.blade.php

@extends('themes.index')
@section('title', 'เพิ่มแผนก')

@section('content')
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">เพิ่มแผนก</h3>
                    </div>
                    <form action="{{ route('admin.departments.store') }}" method="POST">
                        @csrf
                        <div class="card-body">
                            <div class="form-group">
                                <label>รหัสแผนก <span class="text-danger">*</span></label>
                                <input type="text" name="code" class="form-control @error('code') is-invalid @enderror" value="{{ old('code') }}" required>
                                @error('code')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label>ชื่อแผนก <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                                @error('name')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label>แท็ก</label>
                                <input type="color" name="tag" class="form-control @error('tag') is-invalid @enderror" value="{{ old('tag') }}">
                                @error('tag')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">บันทึก</button>
                            <a href="{{ route('admin.departments.index') }}" class="btn btn-secondary">ยกเลิก</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@extends('themes.index')

@section('title', 'เพิ่มแผนก')

@section('content')

<h3 class="card-title">เพิ่มแผนก</h3>

</div>

@csrf

<label>รหัสแผนก <span class="text-danger">*</span></label>

@error('code')

<span class="invalid-feedback">{{ $message }}</span>

@enderror

</div>

<label>ชื่อแผนก <span class="text-danger">*</span></label>

@error('name')

<span class="invalid-feedback">{{ $message }}</span>

@enderror

</div>

@error('tag')

<span class="invalid-feedback">{{ $message }}</span>

@enderror

</div>

<button type="submit" class="btn btn-primary">บันทึก</button>

<a href="{{ route('admin.departments.index') }}" class="btn btn-secondary">ยกเลิก</a>

</div>

</form>

</div>

@endsection

edit.blade.php

@extends('themes.index')
@section('title', 'แก้ไขแผนก')

@section('content')
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">แก้ไขแผนก</h3>
                    </div>
                    <form action="{{ route('admin.departments.update', $department) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="card-body">
                            <div class="form-group">
                                <label>รหัสแผนก <span class="text-danger">*</span></label>
                                <input type="text" name="code" class="form-control @error('code') is-invalid @enderror" value="{{ old('code', $department->code) }}" required>
                                @error('code')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label>ชื่อแผนก <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $department->name) }}" required>
                                @error('name')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            
                            <div class="form-group">
                                <label>แท็ก</label>
                                <input type="color" name="tag" class="form-control @error('tag') is-invalid @enderror" value="{{ old('tag', $department->tag) }}">
                                @error('tag')
                                <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">บันทึก</button>
                            <a href="{{ route('admin.departments.index') }}" class="btn btn-secondary">ยกเลิก</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@extends('themes.index')

@section('title', 'แก้ไขแผนก')

@section('content')

<h3 class="card-title">แก้ไขแผนก</h3>

</div>

@csrf

@method('PUT')

<label>รหัสแผนก <span class="text-danger">*</span></label>

<input type="text" name="code" class="form-control @error('code') is-invalid @enderror" value="{{ old('code', $department->code) }}" required>

@error('code')

<span class="invalid-feedback">{{ $message }}</span>

@enderror

</div>

<label>ชื่อแผนก <span class="text-danger">*</span></label>

<input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $department->name) }}" required>

@error('name')

<span class="invalid-feedback">{{ $message }}</span>

@enderror

</div>

@error('tag')

<span class="invalid-feedback">{{ $message }}</span>

@enderror

</div>

<button type="submit" class="btn btn-primary">บันทึก</button>

<a href="{{ route('admin.departments.index') }}" class="btn btn-secondary">ยกเลิก</a>

</div>

</form>

</div>

@endsection

ขั้นตอนการเพิ่มเมนูระบบจัดการแผนก (Navigation Menu)

ในขั้นตอนนี้เป็นการเพิ่มเมนูสำหรับเข้าสู่หน้าจัดการแผนกในระบบ เพื่อให้ผู้ใช้งานสามารถเข้าถึงฟังก์ชันการจัดการแผนกได้อย่างสะดวก

    <li class="nav-item">
                    <a href="{{ route('admin.departments.index') }}" class="nav-link {{ request()->routeIs('admin.departments.*') ? 'active' : '' }}">
                        <i class="nav-icon fas fa-building"></i>
                        <p>
                            แผนก
                        </p>
                    </a>
                </li>

<a href="{{ route('admin.departments.index') }}" class="nav-link {{ request()->routeIs('admin.departments.*') ? 'active' : '' }}">

<p>

แผนก

</p>

</a>

</li>

ขั้นตอนการกำหนดรูปแบบการแสดงผลของระบบ (System Styling)

ในขั้นตอนนี้เป็นการกำหนดรูปแบบตัวอักษรและการแสดงผลของหน้าเว็บ เพื่อให้ระบบมีความสวยงาม อ่านง่าย และเป็นมาตรฐานเดียวกัน

    <style>
        @font-face {
            font-family: 'LINESeedSansTH';
            src: url('{{ URL::to("dist/fonts/line_seed_san/LINESeedSansTH_W_Rg.woff") }}') format('woff'),
                url('{{ URL::to("dist/fonts/line_seed_san/LINESeedSansTH_W_Rg.woff2") }}') format('woff2'),
                url('{{ URL::to("dist/fonts/line_seed_san/LINESeedSansTH_W_Rg.eot") }}') format('eot');
            font-weight: normal;
            font-style: normal;
        }

        body {
            font-family: 'LINESeedSansTH';
        }

        .w-5 {
            width: 5%;
        }
        
        .w-10 {
            width: 10%;
        }

        .float-right {
            float: right !important;
        }
       
        table .nav-link {
            display: unset;
        }

        .swal2-popup {
            justify-items: center;
        }
    </style>

<style>

@font-face {

font-family: 'LINESeedSansTH';

src: url('{{ URL::to("dist/fonts/line_seed_san/LINESeedSansTH_W_Rg.woff") }}') format('woff'),

url('{{ URL::to("dist/fonts/line_seed_san/LINESeedSansTH_W_Rg.woff2") }}') format('woff2'),

url('{{ URL::to("dist/fonts/line_seed_san/LINESeedSansTH_W_Rg.eot") }}') format('eot');

font-weight: normal;

font-style: normal;

}

body {

font-family: 'LINESeedSansTH';

}

.w-5 {

width: 5%;

}

.w-10 {

width: 10%;

}

.float-right {

float: right !important;

}

table .nav-link {

display: unset;

}

.swal2-popup {

justify-items: center;

}

</style>

line_seed_san กดดาวน์โหลด fonts ได้เลยครับ

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

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

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

PHP POS POS PostgreSQL

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

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

ระบบจัดการแผนก (Departments Management)

ขั้นตอนการสร้างตารางแผนก (Departments Table)

ขั้นตอนการสร้างโมเดลจัดการแผนก (Department Model)

ขั้นตอนการสร้างตัวควบคุมระบบจัดการแผนก (Department Controller)

ขั้นตอนการสร้างหน้าจัดการแผนก (Departments List Page)

ขั้นตอนการเพิ่มเมนูระบบจัดการแผนก (Navigation Menu)

ขั้นตอนการกำหนดรูปแบบการแสดงผลของระบบ (System Styling)

Share this:

Related

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