관리-도구
편집 파일: blog.blade.php
@extends('layouts.apps') @section('content') <main class="main-wrapper"> <div class="main-content"> <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3"> <div class="breadcrumb-title pe-3">AK Furniture</div> <div class="ps-3"> <nav aria-label="breadcrumb"> <ol class="breadcrumb mb-0 p-0"> <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li> <li class="breadcrumb-item active" aria-current="page">Blog</li> </ol> </nav> </div> </div> {{-- Alerts --}} @if(session('success')) <div class="alert alert-success alert-dismissible fade show"> <strong>Success!</strong> {{ session('success') }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div> @endif @if(session('message')) <div class="alert alert-info alert-dismissible fade show"> {{ session('message') }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div> @endif @if(session('error')) <div class="alert alert-danger alert-dismissible fade show"> <strong>Error:</strong> {{ session('error') }} <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div> @endif @if($errors->any()) <div class="alert alert-danger alert-dismissible fade show"> <ul class="mb-0"> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div> @endif <div class="row g-3"> <div class="col-auto flex-grow-1"></div> <div class="col-auto"> <button class="btn btn-primary px-4" data-bs-toggle="modal" data-bs-target="#addModal"> <i class="bi bi-plus-lg me-2"></i>Add New </button> </div> </div> <div class="card mt-4"> <div class="card-body"> <div class="table-responsive white-space-nowrap"> <table class="table align-middle"> <thead class="table-light"> <tr> <th><input class="form-check-input" type="checkbox"></th> <th>#</th> <th>Name</th> <th>Date</th> <th>Title</th> <th>Slug</th> <th>Description</th> <th>Image</th> <th>Action</th> </tr> </thead> <tbody> @foreach ($blogs as $blog) <tr> <td><input class="form-check-input" type="checkbox"></td> <td>{{ $loop->iteration }}</td> <td>{{ $blog->name }}</td> <td>{{ $blog->date }}</td> <td>{{ $blog->title }}</td> <td>{{ $blog->slug }}</td> <td style="max-width:300px; white-space:normal;">{!! $blog->description !!}</td> <td> @if($blog->image) <img src="{{ asset('storage/'.$blog->image) }}" width="100"> @else <span class="text-muted">No image</span> @endif </td> <td> <div class="d-flex gap-3"> <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#editModal{{ $blog->id }}"> <i class="material-icons-outlined">edit</i> </a> <form method="POST" action="{{ route('admin-blog.destroy', $blog->id) }}"> @csrf @method('DELETE') <button class="btn p-0 bg-transparent" onclick="return confirm('Delete this blog?');"> <i class="material-icons-outlined text-danger">delete</i> </button> </form> </div> </td> </tr> <!-- Edit Modal --> <div class="modal fade" id="editModal{{ $blog->id }}" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Edit Blog</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <form method="post" action="{{ route('admin-blog.update', $blog->id) }}" enctype="multipart/form-data"> @csrf @method('PUT') <div class="modal-body"> <div class="mb-3"> <label class="form-label">Name</label> <input type="text" name="name" class="form-control" value="{{ $blog->name }}"> </div> <div class="mb-3"> <label class="form-label">Date</label> <input type="date" name="date" class="form-control" value="{{ $blog->date }}"> </div> <div class="mb-3"> <label class="form-label">Title</label> <input type="text" name="title" class="form-control" value="{{ $blog->title }}"> </div> <div class="mb-3"> <label class="form-label">Slug</label> <input type="text" name="slug" class="form-control" value="{{ $blog->slug }}" placeholder="blog-title-slug"> </div> <div class="mb-3"> <label class="form-label">Description</label> <textarea id="edit-editor-{{ $blog->id }}" name="description"> {!! $blog->description !!} </textarea> </div> <div class="mb-3"> <label class="form-label">Image</label> <input type="file" name="image" class="form-control"> @if($blog->image) <img src="{{ asset('storage/'.$blog->image) }}" width="100" class="mt-2"> @endif </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Update</button> </div> </form> </div> </div> </div> @endforeach </tbody> </table> </div> </div> </div> <!-- Add Modal --> <div class="modal fade" id="addModal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add New Blog</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <form method="post" action="{{ route('admin-blog.store') }}" enctype="multipart/form-data"> @csrf <div class="modal-body"> <div class="mb-3"> <label class="form-label">Name</label> <input type="text" name="name" class="form-control" placeholder="Enter Name"> </div> <div class="mb-3"> <label class="form-label">Date</label> <input type="date" name="date" class="form-control"> </div> <div class="mb-3"> <label class="form-label">Title</label> <input type="text" name="title" class="form-control" placeholder="Enter Title"> </div> <div class="mb-3"> <label class="form-label">Slug</label> <input type="text" name="slug" id="slug" class="form-control" placeholder="blog-title-slug"> </div> <div class="mb-3"> <label class="form-label">Description</label> <textarea id="add-editor" name="description"></textarea> </div> <div class="mb-3"> <label class="form-label">Image</label> <input type="file" name="image" class="form-control"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save</button> </div> </form> </div> </div> </div> </div> </main> <style> /* CKEditor editable area text color fix */ .ck-editor__editable { color: #000 !important; background: #fff !important; min-height: 200px; max-height: 300px; overflow-y: auto !important; } .ck-content * { color: #000 !important; } </style> <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { let editors = {}; function initEditor(id) { let element = document.querySelector('#' + id); if (element && !editors[id]) { ClassicEditor.create(element) .then(editor => { editors[id] = editor; }) .catch(error => console.error(error)); } } // INIT ADD MODAL EDITOR initEditor('add-editor'); // INIT ALL EDIT EDITORS @foreach($blogs as $blog) initEditor("edit-editor-{{ $blog->id }}"); @endforeach }); </script> <script> function slugify(text) { return text .toString() .toLowerCase() .trim() .replace(/\s+/g, '-') .replace(/[^\w\-]+/g, '') .replace(/\-\-+/g, '-'); } // ADD MODAL document.querySelector('input[name="title"]')?.addEventListener('keyup', function () { document.getElementById('slug').value = slugify(this.value); }); // EDIT MODALS @foreach($blogs as $blog) document.querySelector('#editModal{{ $blog->id }} input[name="title"]') ?.addEventListener('keyup', function () { document.querySelector('#editModal{{ $blog->id }} input[name="slug"]').value = slugify(this.value); }); @endforeach </script> @endsection