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
                                                        
                                                    

دروس ذات صلة

LA

site ecommerce ب laravel 7 الجزء الأول

فهاد ال projet الجديد غادي نقادو site ecommerce ب laravel 7 غادي نزيدو ل paiement ب paypa...


LA

site ecommerce ب laravel 7 الجزء الثاني

فهاد الجزء الثاني من site ecommerce ب laravel 7 غادي نزيدو ل model Category ول controller CategoryCo...


LA

site ecommerce ب laravel 7 الجزء الثالت

فهاد الجزء الثالت من site ecommerce ب laravel 7 غادي نشوفوا كيفاش نزيدو login & logout بل email...


LA

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

فهاد الجزء الرابع من site ecommerce ب laravel 7 غادي نكملوا login و logout وغادي نزيدو تعديلات على L...


LA

site ecommerce ب laravel 7 الجزء الخامس

فهاد الجزء الخامس من site ecommerce ب laravel 7 غادي نشوفوا كيفاش نزيدو ل panier ومن بعد غادي نعرضوا...


LA

site ecommerce ب laravel 7 الجزء السادس

فهاد الجزء السادس من site ecommerce ب laravel 7 غادي نزيدو les routes ديالنا باش داكشي لي زدنا فالجز...


LA

site ecommerce ب laravel 7 الجزء السابع

فهاد الجزء السابع من site ecommerce ب laravel غادي نزيدو ل order model ول controller من بعد غادي نشو...


LA

site ecommerce ب laravel 7 الجزء الثامن

فهاد الجزء الثامن من site ecommerce ب laravel غادي نكملوا الجزء الخاص بالأدمن غادي نزيدو ل factory و...


LA

site ecommerce ب laravel 7 الجزء التاسع

فهاد الجزء التاسع من site ecommerce ب laravel غادي نزيدو la page ديال login ديال الأدمن ومنبعد غادي...