site ecommerce ب laravel 7 الجزء العاشر

فهاد الجزء العاشر من 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
                                      
                                    

كلمات مفاتيح :