site ecommerce ب laravel 7 الجزء العاشر
منذ سنتين
imadbelasri
Laravel
LA
فهاد الجزء العاشر من site ecommerce ب laravel غادي نزيدو les pages الخاصين ب les produits أولا الصفحة الخاصة بعرض les produits مع روابط الإضافة التعديل والحذف ثم les pages ديال الإضافة والتعديل.
نظرة سريعة بالفيديو
1- إضافة الصفحة الخاصة بعرض les produits
دائما ف dossier admin فيه زيد dossier products فيه زيد la page index.blade.php لي فيها غادي نعرضوا les produits لي عندنا مع روابط الإضافة التعديل والحذف.
الكود ديال الملف هو :
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
@include('layouts.sidebar')
</div>
<div class="col-md-8">
<a
href="{{ route("products.create") }}"
class="btn btn-primary my-2">
<i class="fa fa-plus"></i>
</a>
<table class="table table-hover">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>In Stock</th>
<th>Image</th>
<th>Category</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach ($products as $product)
<tr>
<td>{{ $product->id }}</td>
<td>{{ $product->title}}</td>
<td>{{ Str::limit($product->description,50) }}</td>
<td>{{ $product->inStock }}</td>
<td>{{ $product->price }} DH</td>
<td>
@if($product->inStock > 0)
<i class="fa fa-check text-success"></i>
@else
<i class="fa fa-times text-danger"></i>
@endif
</td>
<td>
<img src="{{ asset($product->image) }}"
alt="{{ $product->title }}"
width="50"
height="50"
class="img-fluid rounded"
>
</td>
<td>
{{ $product->category->title }}
</td>
<td class="d-flex flex-row justify-content-center align-items-center">
<a
href="{{ route("products.edit",$product->slug) }}"
class="btn btn-sm btn-warning mr-2">
<i class="fa fa-edit"></i>
</a>
<form id="{{ $product->id }}" method="POST" action="{{ route("products.destroy",$product->slug) }}">
@csrf
@method("DELETE")
<button
onclick="event.preventDefault();
if(confirm('Do you really want to delete {{ $product->title }} ?'))
document.getElementById({{ $product->id }}).submit();
"
class="btn btn-sm btn-danger">
<i class="fa fa-trash"></i>
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
<hr>
<div class="justify-content-center d-flex">
{{ $products->links() }}
</div>
</div>
</div>
</div>
@endsection
2- إضافة الصفحة الخاصة بإضافة produit
دائما ف dossier products فيه زيد la page create.blade.php لي فيها غادي تكون الفورم ديال إضافة produit جديد.
الكود ديال الملف هو :
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
@include("layouts.sidebar")
</div>
<div class="col-md-8">
<div class="card p-3">
<h3 class="card-title">Add new product</h3>
<div class="card-body">
<form method="post" action="{{ route("products.store") }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<input type="text"
name="title"
placeholder="Title"
class="form-control">
</div>
<div class="form-group">
<textarea name="description" placeholder="Description"
cols="30" rows="10" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="number"
name="price"
placeholder="Price"
class="form-control">
</div>
<div class="form-group">
<input type="number"
name="old_price"
placeholder="Old Price"
class="form-control">
</div>
<div class="form-group">
<input type="number"
name="inStock"
placeholder="In Stock"
class="form-control">
</div>
<div class="form-group">
<input type="file"
name="image"
class="form-control">
</div>
<div class="form-group">
<select name="category_id" class="form-control">
<option value="" selected disabled>
Choose a category
</option>
@foreach ($categories as $category)
<option value="{{ $category->id }}">
{{ $category->title }}
</option>
@endforeach
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
3- إضافة الصفحة الخاصة بتعديل produit
دائما ف dossier products فيه زيد la page edit.blade.php لي فيها غادي تكون الفورم ديال تعديل produit.
الكود ديال الملف هو :
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
@include("layouts.sidebar")
</div>
<div class="col-md-8">
<div class="card p-3">
<h3 class="card-title">Update {{ $product->title }}</h3>
<div class="card-body">
<form method="post" action="{{ route("products.update",$product->slug) }}" enctype="multipart/form-data">
@csrf
@method("PUT")
<div class="form-group">
<input type="text"
name="title"
placeholder="Titre"
value="{{ $product->title }}"
class="form-control">
</div>
<div class="form-group">
<textarea name="description" placeholder="Description"
cols="30" rows="10" class="form-control">{{ $product->description }}</textarea>
</div>
<div class="form-group">
<input type="number"
name="price"
placeholder="Prix"
value="{{ $product->price }}"
class="form-control">
</div>
<div class="form-group">
<input type="number"
name="old_price"
placeholder="Prix Ancien"
value="{{ $product->old_price }}"
class="form-control">
</div>
<div class="form-group">
<input type="number"
name="inStock"
placeholder="Quantité en stock"
value="{{ $product->inStock }}"
class="form-control">
</div>
<div class="form-group">
<img src="{{ asset($product->image) }}"
width="200"
height="200"
alt="{{ $product->title }}">
</div>
<div class="form-group">
<input type="file"
name="image"
class="form-control">
</div>
<div class="form-group">
<select name="category_id" class="form-control">
<option value="" selected disabled>
Choisir une catégorie
</option>
@foreach ($categories as $category)
<option
{{ $product->category_id === $category->id ? "selected" : "" }}
value="{{ $category->id }}">
{{ $category->title }}
</option>
@endforeach
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection