관리-도구
편집 파일: about.blade.php
@extends('layouts.app') @section('content') <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script> <div class="main-panel"> <div class="content-wrapper"> <style> .description-cell { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } img.table-img { max-width: 100px; max-height: 80px; border-radius: 5px; object-fit: cover; } </style> <div class="row"> <div class="col-lg-12 grid-margin stretch-card"> <div class="card"> <div class="card-body"> <div class="d-flex justify-content-between align-items-center"> <h3 class="text-center"><b>About Section</b></h3> <!-- <button class="btn btn-success" data-toggle="modal" data-target="#addAbout">Add New</button> --> </div> <hr> <div class="table-responsive"> <table class="table table-hover text-center"> <thead> <tr> <th>#</th> <th>Title</th> <th>Description</th> <th>Image </th> <th>Action</th> </tr> </thead> <tbody> @foreach ($about as $aboutus) <tr> <td>{{ $loop->iteration }}</td> <td>{{ $aboutus->title }}</td> <td class="description" style="white-space: pre-wrap; padding: 10px;"> {!! $aboutus->description !!} </td> <td> @if($aboutus->image) <img src="{{ asset('storage/' . $aboutus->image) }}" class="table-img"> @else <span>No image</span> @endif </td> <td> <button class="btn btn-primary my-2" data-toggle="modal" data-target="#updateAbout{{ $aboutus->id }}"> <i class="fa fa-pen"></i> </button> <form method="POST" action="{{ route('admin-about.destroy', $aboutus->id) }}" style="display:inline;"> @csrf @method('DELETE') <button class="btn btn-danger my-2" onclick="return confirm('Are you sure to delete this item?')"> <i class="fa fa-trash"></i> </button> </form> </td> </tr> <!-- UPDATE MODAL --> <div class="modal fade" id="updateAbout{{ $aboutus->id }}" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Update About</h5> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> <form method="POST" action="{{ route('admin-about.update', $aboutus->id) }}" enctype="multipart/form-data"> @csrf @method('PUT') <div class="form-group"> <label>Title</label> <input type="text" name="title" value="{{ $aboutus->title }}" class="form-control" required> </div> <div class="form-group"> <label> Image </label> <input type="file" name="image" class="form-control"> @if($aboutus->image) <img src="{{ asset('storage/' . $aboutus->image) }}" class="table-img mt-2"> @endif </div> <div class="form-group"> <label>Description</label> <textarea class="form-control summernote" name="description" rows="4">{{ $aboutus->description }}</textarea> </div> <div class="text-center"> <button type="submit" class="btn btn-primary w-50"> Update </button> </div> </form> </div> </div> </div> </div> @endforeach </tbody> </table> </div> </div> </div> </div> </div> </div> <!-- ADD MODAL --> <div class="modal fade" id="addAbout"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add New About</h5> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> <form method="POST" action="{{ route('admin-about.store') }}" enctype="multipart/form-data"> @csrf <div class="form-group"> <label>Title</label> <input type="text" name="title" class="form-control" required> </div> <div class="form-group"> <label> Image</label> <input type="file" name="image" class="form-control" required> </div> <div class="form-group"> <label>Description</label> <textarea class="form-control summernote" name="description" rows="4" required></textarea> </div> <div class="text-center"> <button type="submit" class="btn btn-primary w-50">Submit</button> </div> </form> </div> </div> </div> </div> <script> $('.summernote').summernote({ placeholder: 'Description', tabsize: 2, height: 120 }); </script> @endsection