Application de gestion d'un restaurant ب laravel الجزء الرابع
فهاد الجزء الرابع من Application de gestion d'un restaurant ب laravel غادي نكملوا وندوزو لعرض les catégories ديالنا أيضا غادي نشوفوا كيفاش نديرو إضافة وتعديل catégorie و menu.
نظرة سريعة بالفيديو
1- إضافة catégorie
ف views زيد dossier سميه managments فيه زيد dossier categories فيه زيد fichier سميه create.blade.php لي غادي تكون فيه فورم إضافة ل catégorie.
الكود لي غادي تزيد فالملف هو :
@extends('layouts.app')
@section("content")
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
@include('layouts.sidebar')
</div>
<div class="col-md-8">
<h3 class="text-secondary border-bottom mb-3 p-2">
<i class="fas fa-plus"></i> Ajouter une catégorie
</h3>
<form action="{{ route("categories.store") }}" method="post">
@csrf
<div class="form-group">
<input
type="text" name="title" id="title"
class="form-control"
placeholder="Titre"
>
</div>
<div class="form-group">
<button class="btn btn-primary">
Valider
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
2- تعديل catégorie
دائما ف dossier categories زيد fichier سميه edit.blade.php لي غادي تكون فيه فورم تعديل catégorie.
الكود لي غادي تزيد فالملف هو :
@extends('layouts.app')
@section("content")
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
@include('layouts.sidebar')
</div>
<div class="col-md-8">
<h3 class="text-secondary border-bottom mb-3 p-2">
<i class="fas fa-plus"></i> Modifier la catégorie {{ $category->title }}
</h3>
<form action="{{ route("categories.update",$category->slug) }}" method="post">
@csrf
@method("PUT")
<div class="form-group">
<input
type="text" name="title" id="title"
class="form-control"
placeholder="Titre"
value="{{$category->title }}"
>
</div>
<div class="form-group">
<button class="btn btn-primary">
Valider
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
3- عرض les catégories
دائما ف dossier categories زيد fichier سميه index.blade.php لي غادي نعرضوا فيه les catégories كاملين لي عندنا.
الكود لي غادي تزيد فالملف هو :
@extends('layouts.app')
@section("content")
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
@include('layouts.sidebar')
</div>
<div class="col-md-8">
<div class="d-flex flex-row justify-content-between align-items-center border-bottom pb-1">
<h3 class="text-secondary">
<i class="fas fa-th-list"></i> Catégories
</h3>
<a href="{{ route("categories.create") }}" class="btn btn-primary">
<i class="fas fa-plus fa-x2"></i>
</a>
</div>
<table class="table table-hover table-responsive-sm">
<thead>
<tr>
<th>Id</th>
<th>Titre</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($categories as $category)
<tr>
<td>
{{ $category->id }}
</td>
<td>
{{ $category->title }}
</td>
<td class="d-flex flex-row justify-content-center align-items-center">
<a href="{{ route("categories.edit",$category->slug) }}" class="btn btn-warning mr-1">
<i class="fas fa-edit"></i>
</a>
<form id="{{ $category->id }}" action="{{ route("categories.destroy",$category->slug) }}" method="post">
@csrf
@method("DELETE")
<button
onclick="
event.preventDefault();
if(confirm('Voulez vous supprimer la catégorie {{ $category->title }} ?'))
document.getElementById({{ $category->id }}).submit()
"
class="btn btn-danger">
<i class="fas fa-trash"></i>
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="my-3 d-flex justify-content-center align-items-center">
{{ $categories->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
4- إضافة menu
ف dossier managments زيد dossier menus فيه زيد fichier سميه create.blade.php لي غادي تكون فيه فورم إضافة ل menu.
الكود لي غادي تزيد فالملف هو :
@extends('layouts.app')
@section("content")
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
@include('layouts.sidebar')
</div>
<div class="col-md-8">
<h3 class="text-secondary border-bottom mb-3 p-2">
<i class="fas fa-plus"></i> Ajouter un menu
</h3>
<form action="{{ route("menus.store") }}" method="post" enctype="multipart/form-data">
@csrf
<div class="form-group">
<input
type="text" name="title" id="title"
class="form-control"
placeholder="Titre"
>
</div>
<div class="form-group">
<textarea
name="description" id="description"
rows="5"
cols="30"
class="form-control"
placeholder="Description"
></textarea>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
$
</div>
</div>
<input type="number"
name="price"
class="form-control"
placeholder="Prix"
>
<div class="input-group-append">
<div class="input-group-text">
.00
</div>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Image
</span>
</div>
<div class="custom-file">
<input type="file"
name="image"
class="custom-file-input"
>
<label class="custom-file-label">
2mg max
</label>
</div>
</div>
<div class="form-group">
<select name="category_id" id="category_id" class="form-control">
<option value="" selected disabled>Choisir une catégorie</option>
@foreach ($categories as $category)
<option value="{{ $category->id }}">
{{ $category->title }}
</option>
@endforeach
</select>
</div>
<div class="form-group">
<button class="btn btn-primary">
Valider
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
5- تعديل menu
دائما ف dossier menus زيد fichier سميه edit.blade.php لي غادي تكون فيه فورم تعديل menu.
الكود لي غادي تزيد فالملف هو :
@extends('layouts.app')
@section("content")
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
@include('layouts.sidebar')
</div>
<div class="col-md-8">
<h3 class="text-secondary border-bottom mb-3 p-2">
<i class="fas fa-plus"></i> Modifier le menu {{ $menu->title }}
</h3>
<form action="{{ route("menus.update",$menu->slug) }}" method="post" enctype="multipart/form-data">
@csrf
@method("PUT")
<div class="form-group">
<input
type="text" name="title" id="title"
class="form-control"
placeholder="Titre"
value="{{ $menu->title }}"
>
</div>
<div class="form-group">
<textarea
name="description" id="description"
rows="5"
cols="30"
class="form-control"
placeholder="Description"
>{{ $menu->description }}</textarea>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
$
</div>
</div>
<input type="number"
name="price"
class="form-control"
placeholder="Prix"
value="{{ $menu->price }}"
>
<div class="input-group-append">
<div class="input-group-text">
.00
</div>
</div>
</div>
<div class="my-2">
<img src="{{ asset("images/menus/".$menu->image) }}"
width="200"
height="200"
class="img-fluid"
alt="{{ $menu->title }}">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Image
</span>
</div>
<div class="custom-file">
<input type="file"
name="image"
class="custom-file-input"
>
<label class="custom-file-label">
2mg max
</label>
</div>
</div>
<div class="form-group">
<select name="category_id" id="category_id" class="form-control">
<option value="" selected disabled>Choisir une catégorie</option>
@foreach ($categories as $category)
<option
{{ $category->id === $menu->category->id ? "selected" : ""}}
value="{{ $category->id }}">
{{ $category->title }}
</option>
@endforeach
</select>
</div>
<div class="form-group">
<button class="btn btn-primary">
Valider
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection