เรียนรู้เรื่องการปรับแต่งค่าพื้นฐานสำหรับการใช้ Free theme and Template
การปรับแต่งค่าพื้นฐานต่างๆจากการใช้งาน Free-Theme(Flexy) ดังนี้้
ก่อนจะเริ่มปรับค่าต่างๆ ให้ทำการเพิ่มฟิลด์ในตาราง user จากเดิม
– id
– name
– email
– usertype
– email_verified_at
– password
– remember_token
– created_at
– updated_at
เพิ่มเป็น
– id
– name
– username
– about
– email
– usertype
– profile
– email_verified_at
– password
– remember_token
– facebook
– twitter
– instagram
– linkedin
– youtube
– created_at
– updated_at
1. ในโฟลเดอร์ layouts แก้ไขไฟล์ app.blade.php ให้มีเนื้อหาดังนี้
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog & Post System</title>
<link rel="shortcut icon" type="image/png" href="{{ asset('assets/images/logos/favicon.png') }}" />
<link rel="stylesheet" href="{{ asset('assets/css/styles.min.css') }}" />
</head>
<body>
<!-- Body Wrapper -->
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
data-sidebar-position="fixed" data-header-position="fixed">
@include('layouts.topbar')
@include('layouts.sidebar')
<!-- Main wrapper -->
<div class="body-wrapper">
@include('layouts.headerbar')
<div class="body-wrapper-inner">
<div class="container-fluid">
@yield('items')
<div class="card">
<div class="card-body">
@yield('content')
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('assets/libs/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/sidebarmenu.js') }}"></script>
<script src="{{ asset('assets/js/app.min.js') }}"></script>
<script src="{{ asset('assets/libs/simplebar/dist/simplebar.js') }}"></script>
<!-- solar icons -->
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
</body>
@yield('script')
</html>2. ในโฟลเดอร์ layouts ให้ทำการเพิ่มไฟล์ headerbar.blade.php โดยให้มีเนื้อหา ดังนี้
<!-- Header Start -->
<header class="app-header">
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="navbar-nav">
<li class="nav-item d-block d-xl-none">
<a class="nav-link sidebartoggler " id="headerCollapse" href="javascript:void(0)">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link " href="javascript:void(0)" id="drop1" data-bs-toggle="dropdown" aria-expanded="false">
<iconify-icon icon="solar:bell-linear" class="fs-6"></iconify-icon>
<div class="notification bg-primary rounded-circle"></div>
</a>
<div class="dropdown-menu dropdown-menu-animate-up" aria-labelledby="drop1">
<div class="message-body">
<a href="javascript:void(0)" class="dropdown-item">
Item 1
</a>
<a href="javascript:void(0)" class="dropdown-item">
Item 2
</a>
</div>
</div>
</li>
</ul>
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
<li class="nav-item dropdown">
<a class="nav-link " href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
aria-expanded="false">
<img src="{{ asset('assets/images/profile/'.(auth()->user()->profile ? auth()->user()->profile : 'user-8.jpg')) }}" alt="" width="35" height="35" class="rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
<div class="message-body">
<a href="{{ route('profile.edit') }}" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-user fs-6"></i>
<p class="mb-0 fs-3">My Profile</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-mail fs-6"></i>
<p class="mb-0 fs-3">My Account</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
<i class="ti ti-list-check fs-6"></i>
<p class="mb-0 fs-3">My Task</p>
</a>
<a href="{{ route('logout') }}"
class="btn btn-outline-primary mx-3 mt-2 d-block"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" method="POST" action="{{ route('logout') }}" style="display: none;">
@csrf
</form>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header End -->3.เปลี่ยนข้อมูลรูปบริเวณตัว A โดยให้นำรูปใหม่ตามต้องการ เช่น logo.png ไปใส่ไว้ในโฟลเดอร์ public/assets/images/logos
– จากนั้นทำการแก้ไขไฟล์ sidebar.blade.php ตรงตำแหน่งที่อ้างถึงรูปภาพให้ถูกต้องตามจริง ดังตัวอย่าง
<img src=”{{asset(‘assets/images/logos/logo.png’)}}” alt=”” />
4.เปลี่ยนข้อมูลรูปบริเวณตัว B โดยให้นำรูปใหม่ตามต้องการ เช่น toplogo.png ไปใส่ไว้ในโฟลเดอร์ public/assets/images/logos
– จากนั้นทำการแก้ไขไฟล์ topbar.blade.php ตรงตำแหน่งที่อ้างถึงรูปภาพให้ถูกต้องตามจริง ดังตัวอย่าง
จากเดิม
<img src="{{ asset('assets/images/logos/logo-wrappixel.svg') }}" alt="" width="150">
เปลี่ยนเป็น
<img src="{{asset('assets/images/logos/toplogo.png')}}" alt="" width="150">5.เปลี่ยนข้อความบริเวณตัว C โดยใส่ข้อความใหม่ตามต้องการ ดังตัวอย่าง
โดยแก้ในไฟล์ topbar.blade.php ตรงตำแหน่งที่มีข้อความเดิมอยู่ ประมาณบรรทัดที่ 10 “Check Flexy Premium Version” และแก้คำว่า “Buy Now” ในหน้าเดียวกันให้เป็นคำที่ต้องการ
6.ปรับปรุงลิ้งค์ My Profile บริเวณตัว C ให้ใช้งานได้ถูกต้อง โดยเมื่อคลิ๊กลิ้งค์แล้วจะเป็นการเปิดข้อมูลส่วนตัว และสามารถอัพเดทข้อมูลได้ ดังนี้
-เปิดไฟล์ headerbar.blade.php ประมาณบรรทัดที่ 33 แก้ไขให้เป็น ดังนี้
<img src="{{ asset('assets/images/profile/'.(auth()->user()->profile ? auth()->user()->profile : 'user-8.jpg')) }}" alt="" width="35" height="35" class="rounded-circle">-ประมาณบรรทัดที่ 37 แก้เป็น
<a href="{{ route('profile.edit') }}" class="d-flex align-items-center gap-2 dropdown-item">เพิ่ม Route ให้กับลิ้งค์ My Profile ซึ่งมีอยู่แล้วในไฟล์ web.php (ตรงนี้ไม่ต้องทำอะไร)
ข้อมูลในไฟล์ web.php
<?php
use App\Http\Controllers\UserController;
use App\Http\Controllers\ProfileController;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AdminController;
Route::get('/', function () {
return view('welcome');
});
Route::get('/dashboard', [AdminController::class, 'home'])
->middleware(['auth', 'verified'])->name('dashboard');
Route::get('/admin/dashboard', [AdminController::class, 'index'])
->middleware(['auth', 'admin'])->name('admin.dashboard');
Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});
require __DIR__.'/auth.php';
-เปิดไฟล์ edit.blade.php ซึ่งอยู่ที่โฟลเดอร์ resources/view/profile แล้วลบโค้ดเดิมออกให้หมด คัดลอกโค้ดด้านล่างไปใส่แทน
@extends('layouts.app')
@section('items')
<div class="card-header d-flex justify-content-between align-items-center">
<h3 class="m-0">Profile</h3>
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="admin/dashboard">Dashboard</a></li>
<li class="breadcrumb-item">Settings</li>
<li class="breadcrumb-item active">Profile</li>
</ol>
</div>
@endsection
@section('content')
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
@if ($errors->any())
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h5><i class="icon fas fa-ban"></i> Error!</h5>
@foreach ($errors->all() as $error)
<p class="m-0">{{ $error }}</p>
@endforeach
</div>
@endif
@if (session("success"))
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h5><i class="icon fas fa-check"></i> Success!</h5>
<p class="m-0">{{ session("success") }}</p>
</div>
@endif
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<form action="{{ route("profile.update") }}" enctype="multipart/form-data" method="POST">
@csrf
@method('PATCH')
<div class="row">
<div class="col-md-6 mx-auto">
<div class="form-group">
<label for="profile">Profile Photo</label>
<img width="120px" id="profilepreview" height="120px" src="{{ asset("assets/images/profile/".($user->profile ?? "user-8.jpg")) }}" class="d-block rounded rounded-circle mb-2"/>
<input type="file" class="form-control" id="profile" name="profile" accept="image/*"/>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name" value="{{ $user->name }}"/>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter username" value="{{ $user->username }}"/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" value="{{ $user->email }}"/>
</div>
<div class="form-group mb-3">
<label for="about">About</label>
<textarea class="form-control" id="about" name="about" rows="4">{{ $user->about }}</textarea>
</div>
</div>
<div class="col-md-6 mx-auto">
<div class="form-group">
<label for="facebook">Facebook</label>
<input type="url" class="form-control" id="facebook" name="facebook" placeholder="Enter facebook profile link" value="{{ $user->facebook }}"/>
</div>
<div class="form-group">
<label for="twitter">Twitter</label>
<input type="url" class="form-control" id="twitter" name="twitter" placeholder="Enter twitter profile link" value="{{ $user->twitter }}"/>
</div>
<div class="form-group">
<label for="instagram">Instagram</label>
<input type="url" class="form-control" id="instagram" name="instagram" placeholder="Enter instagram profile link" value="{{ $user->instagram }}"/>
</div>
<div class="form-group">
<label for="linkedin">LinkedIn</label>
<input type="url" class="form-control" id="linkedin" name="linkedin" placeholder="Enter linkedin profile link" value="{{ $user->linkedin }}"/>
</div>
<div class="form-group">
<label for="youtube">YouTube</label>
<input type="url" class="form-control" id="youtube" name="youtube" placeholder="Enter youtube profile link" value="{{ $user->youtube }}"/>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Update</button>
</form>
</div>
</div>
</div>
</div>
@endsection
@section("script")
<script src="{{ asset("assets/js/sweetalert2.all.min.js") }}"></script>
<script>
$(document).ready(function() {
function readURL(input, preview, image) {
if (input.files && input.files[0] && input.files[0].type.includes("image")) {
var reader = new FileReader();
reader.onload = function (e) {
$(preview).removeClass("d-none");
$(preview).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
} else {
$(image).val('');
$(preview).addClass("d-none");
Swal.fire({
icon: "error",
text: "Select a valid image!"
});
}
}
$("#profile").change(function(){
readURL(this, "#profilepreview", "#profile");
});
});
</script>
@endsection
-ดาวน์โหลดไฟล์ sweetalert2.all.min.js Download Click Here! ตรงนี้ไปใส่ไว้ในโฟลเดอร์ public/assets/js (แตกไฟล์แล้วเอาเฉพาะไฟล์ไปใส่ ห้ามเอาไปทั้งโฟลเดอร์)
-เปิดไฟล์ ProfileController.php อยู่ในโฟลเดอร์ app/Http/Controllers/ เพิ่มโค้ดในฟังก์ชั่น update ดังนี้
public function update(ProfileUpdateRequest $request): RedirectResponse
{
$user = User::find(Auth::id());
$request->user()->fill($request->validated());
if ($request->user()->isDirty('email')) {
$request->user()->email_verified_at = null;
}
if ($request->hasFile('profile') && $request->file('profile')->isValid()) {
$image = $request->file("profile");
$imageName = time() . '.' . $image->getClientOriginalExtension();
$image->move(public_path("assets/images/profile"), $imageName);
if ($user->profile) {
if (File::exists(public_path("assets/images/profile/".$user->profile))) {
File::delete(public_path("assets/images/profile/".$user->profile));
}
}
$request->user()->profile = $imageName;
}
$request->user()->save();
return Redirect::route('profile.edit')->with('status', 'profile-updated');
}-ด้านบนส่วนหัวของไฟล์ ProfileController.php ให้เป็นดังนี้
<?php
namespace App\Http\Controllers;
use App\Models\User;
use App\Http\Requests\ProfileUpdateRequest;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Support\Facades\File;
use Illuminate\View\View;บรรทัดใดไม่มีให้เพิ่มให้เหมือน
-เปิดไฟล์ ProfileUpdateRequest.php อยู่ในโฟลเดอร์ app/Http/Requests และเพิ่มโค้ด
<?php
namespace App\Http\Requests;
use App\Models\User;
use Illuminate\Contracts\Validation\ValidationRule;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rule;
class ProfileUpdateRequest extends FormRequest
{
/**
* Get the validation rules that apply to the request.
*
* @return array<string, ValidationRule|array<mixed>|string>
*/
public function rules(): array
{
return [
'name' => ['required', 'string', 'max:255'],
'username' => 'nullable|string|max:255',
'about' => 'nullable|string|max:255',
'facebook' => 'nullable|string|max:255',
'twitter' => 'nullable|string|max:255',
'instagram' => 'nullable|string|max:255',
'linkedin' => 'nullable|string|max:255',
'youtube' => 'nullable|string|max:255',
'profile' => 'nullable|image|max:2048',
'email' => [
'required',
'string',
'lowercase',
'email',
'max:255',
Rule::unique(User::class)->ignore($this->user()->id),
],
];
}
}
- เปิดไฟล์ User.php อยู่ในโฟลเดอร์ app/Models เพิ่มโค้ด ดังนี้
<?php
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Database\Factories\UserFactory;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
/** @use HasFactory<UserFactory> */
use HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var list<string>
*/
protected $fillable = [
'name',
'username',
'about',
'email',
'usertype',
'password',
'facebook',
'twitter',
'instagram',
'linkedin',
'youtube',
'profile',
];
/**
* The attributes that should be hidden for serialization.
*
* @var list<string>
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* Get the attributes that should be cast.
*
* @return array<string, string>
*/
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}
}
7.เมื่อทุกอย่างเรียบร้อยแล้ว ให้ทดสอบ คลิ๊กที่ My Profile ลองเปลี่ยนแปลงข้อมูล หรือเปลี่ยนรูปภาพ ต้องสามารถใช้งานได้
Wirote Apinantanakon