Step 01: Changing index() method in FrameWidthController
public function index( ) { $meta_title = 'All Frame Widths'; $query = FrameWidth::query(); $fw_widths = $query->orderBy( 'sequence', 'desc' )->paginate( 10 )->withQueryString(); return view( 'fw_widths.list', compact( 'meta_title','fw_widths' ) ); }
Step 02: Changing list.blade.php under views/resources/fw_widths folder for fetching and showing database rows using loop, adding new frame width button and adding a confirm delete modal for deleting a row of data
<div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="row"> <div class="col-md-4"> <h2 class="">All Frame Widths</h2> </div> <div class="col-md-8"> <a class="btn btn-sm btn-primary float-end mt-1" href="{{ route('frame_widths.create') }}"> Add Frame Width </a> </div> </div> <table class="table mt-3"> <thead class="table-dark"> <tr> <th>Id </th> <th class="text-center">Name </th> <th class="text-center">Percentage(%)</th> <th class="text-center">Created </th> <th class="text-center">Order </th> <th class="text-center">Actions </th> </tr> </thead> <tbody> @foreach ($fw_widths as $fw_width) <tr> <td>{{$fw_width->id}}</td> <td class="text-center">{{$fw_width->name}}</td> <td class="text-center">{{$fw_width->percentage}}</td> <td class="text-center">{{ date('y-m-d', strtotime($fw_width->created_at)) }}</td> <td class="text-center" style="width:20%;"> <form action="{{ route('frame_widths.save_order',$fw_width->id) }}" method="POST" enctype="multipart/form-data"> @csrf <input type="text" name="order" value="{{ $fw_width->sequence }}" data-post-id="{{ $fw_width->id }}" class="resource-order form-control text-center" placeholder=""> </form> </td> <td class="text-center"> <a class="text-black" href="{{ route('frame_widths.edit', $fw_width->id) }}"><i class="bi bi-pencil"></i></a> <a class="text-black delete-row" href="javascript:void(0);" data-base-url="{{ url('') }}" data-rowname="{{ $fw_width->name }}" data-rowid="{{ $fw_width->id }}" data-resource="frame_widths"><i class="bi bi-trash"></i></a> </td> </tr> @endforeach @if (count($fw_widths) == 0) <tr><td colspan="5"><span class="">Nothing found</span></td></tr> @endif </tbody> </table> <div class="justify-content-center mt-3"> {!! $fw_widths->links() !!} </div> </div> </div> </div> <div id="modal-delete-confirm" class="modal fade"> <div class="modal-dialog modal-md modal-dialog-centered" > <div class="modal-content" > <div class="modal-header"> <h4><strong >Confirm Delete </strong></h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button> </div> <div class="modal-body text-center"> <p>Would you like to delete this row <span id="modal-delete-title"></span>? <br>Once deleted it cannot be reverted.</p> <div class="row justify-content-center"> <div class="col-3"> <form id="list-frm-modal" class="float-start" method="POST" action=""> @csrf @method('DELETE') <button type="submit" class="btn btn-sm btn-danger white">Yes</button> </form> <a href="javascript:void(0);" class="btn btn-sm btn-info white float-end" data-bs-dismiss="modal">No</a> </div> </div> </div> </div> </div> </div>
Step 03: Now In FrameWidthController, adding create() method
public function create( ) { $meta_title = 'Add Frame Width'; return view( 'fw_widths.create', compact( 'meta_title' ) ); }
Step 04: Adding create.blade.php under resources/view/fw_widths folder and putting following snippet inside blade section directive extending app layout
<div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <h2 class="float-start">Add Frame Width</h2> <div class="float-end"> <a class="btn btn-sm btn-primary" href="{{ route('frame_widths.index') }}"> Back to frame widths</a> </div> <div class="clearfix"></div> <div class="card "> <div class="card-body"> <form method="post" action="{{ route('frame_widths.store') }}" id="updatefrm" method="post"> @csrf <div class="form-group mb-2"> <label for="title">Name</label> <br> <input name="name" class="form-control" placeholder="Frame Width name" title="Frame Width Name" type="text" id="FrameWidthName" value="{{ old('name') }}" /> @if ($errors->has('name')) <span class="text-danger">{{ $errors->first('name') }}</span> @endif </div> <div class="form-group mb-2"> <label for="title">Percentage (%)</label> <br> <input name="percentage" class="form-control" placeholder="Percentage" title="Percentage" type="text" id="PercentageName" value="{{ old('percentage') }}" /> @if ($errors->has('percentage')) <span class="text-danger">{{ $errors->first('percentage') }}</span> @endif </div> <input class="btn btn-sm btn-primary" class="form-control" type="submit" name="action" value="Add"> </form> </div> </div> </div> </div> </div> </div>
Step 05: Creating FrameWidthRequest.php using artisan command for validation of form fields
php artisan make:request FrameWidthRequest
Step 06: Adding validation rules like below in FrameWidthRequest.php making sure authorize function returns true
namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class FrameWidthRequest extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ 'name' => 'required', 'percentage' => 'required', ]; } }
Step 07: Changing FrameWidth.php model like below adding fillable with saving fields
namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class FrameWidth extends Model { use HasFactory; protected $fillable = [ 'name', 'percentage' ,'sequence' ]; }
Step 08: Back in FrameWidthController adding store() method like below and redirecting to list page after addition
//at the top use App\Http\Requests\FrameWidthRequest; use App\Models\FrameWidth; public function store( FrameWidthRequest $request ) { FrameWidth::create([ 'name' => $request->name, 'percentage' => $request->percentage, 'sequence' => ( FrameWidth::latest('sequence')->first()->id + 1 ) // fetching last sequence value from table and adding one to it ]); return redirect()->route('frame_widths.index'); }
Now if we fillup the create form and submit it, information with all its fields will be saved to table in the database.
Step 09: Now adding edit() method In FrameWidthController
public function edit( FrameWidth $frame_width ) { $meta_title = 'Edit Frame Width ' . $frame_width->name; return view( 'fw_widths.edit', compact( 'meta_title', 'frame_width' ) ); }
Step 10: Adding edit.blade.php under resources/view/fw_widths folder inside section blade directive extending app layout
<div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <h2 class="float-start">Edit Frame Width</h2> <div class="float-end"> <a class="btn btn-sm btn-primary" href="{{ route('frame_widths.index') }}"> Back to frame widths</a> </div> <div class="clearfix"></div> <div class="card "> <div class="card-body"> <form method="post" action="{{ route('frame_widths.update', $frame_width->id) }}" id="updatefrm" method="post"> @csrf @method('PUT') <div class="form-group mb-2"> <label for="title">Name</label> <br> <input name="name" class="form-control" placeholder="Frame Width name" title="Frame Width Name" type="text" id="FrameWidthName" value="{{ $frame_width->name }}" /> @if ($errors->has('name')) <span class="text-danger">{{ $errors->first('name') }}</span> @endif </div> <div class="form-group mb-2"> <label for="title">Percentage (%)</label> <br> <input name="percentage" class="form-control" placeholder="Percentage" title="Percentage" type="text" id="PercentageName" value="{{ $frame_width->percentage }}" /> @if ($errors->has('percentage')) <span class="text-danger">{{ $errors->first('percentage') }}</span> @endif </div> <input class="btn btn-sm btn-primary" class="form-control" type="submit" name="action" value="Edit"> </form> </div> </div> </div> </div> </div>
Step 11: Back in FrameWidthController adding update() method like below and keeping to edit page after editing with flash message at the top
public function update( FrameWidth $frame_width, FrameWidthRequest $request ) { $data = [ 'name' => $request->name, 'percentage' => $request->percentage, ]; $frame_width->update($data); return redirect()->route('frame_widths.edit',$frame_width->id)->with('success', 'Frame Width edited successfully'); }
Step 12: Deleting frame width data
public function destroy( FrameWidth $frame_width ) { $frame_width->delete(); return redirect()->route( 'frame_widths.index' )->with( 'success', 'Frame Width deleted successfully' ); }
Step 13: Saving sequence of frame width data by adding following method. Please note this is response method of ajax call.
function saveOrder ( FrameWidth $frame_width, Request $request ) { $frame_width->sequence = $request->post( 'order' ); $frame_width->save(); return response()->json($frame_width->sequence,200); }