Ecommerce App ب laravel & stripe paiement الجزء الخامس


فهاد الجزء الخامس والأخير من Ecommerce App ب laravel & stripe paiement غادي نكملو الملفات لي بقاو ولي فيهم الصفحة الرئيسية لي كتعرض les produits كاملين وايضا غادي نزيدو les routes ديالنا ولي غادي يمكنونا من التنقل بين الصفحات وغادي نزيدو ايضا ملفات css و javascript.

نظرة سريعة بالفيديو

1- الملف routes/web.php

كنمشي ل dossier routes فيه كاين الملف web.php ولي فيه غادي يكونوا les routes ديالنا فف route / لي هو la page principale كنسترجع les produits وكنرسلهم للملف home ولي غادي نزيدوه من بعد ولي هو ل index ديالنا الكود ديال الملف هو :

                                <?php
use App\Product;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    $products = Product::all();
    return view('home',compact('products'));
});
Route::post('/cart/add',[
    'uses'=> 'ShopController@add_to_cart',
    'as' => 'cart.add'
]);
Route::get('/cart',[
    'uses'=> 'ShopController@cart',
    'as' => 'cart.index'
]);
Route::get('/cart/remove/{id}',[
    'uses'=> 'ShopController@cart_delete',
    'as' => 'cart.delete'
]);
Route::get('/cart/dec/{id}/{qte}',[
    'uses'=> 'ShopController@cart_dec',
    'as' => 'cart.decrease'
]);
Route::get('/cart/inc/{id}/{qte}',[
    'uses'=> 'ShopController@cart_inc',
    'as' => 'cart.increase'
]);
Route::get('/cart/checkout',[
    'uses'=> 'CheckoutController@index',
    'as' => 'cart.checkout'
]);
Route::post('/cart/pay',[
    'uses'=> 'CheckoutController@pay',
    'as' => 'cart.pay'
]);
Route::get('/products/add',[
    'uses'=> 'ProductsController@create',
    'as' => 'product.create'
]);
Route::post('/products/update/{id}',[
    'uses'=> 'ProductsController@update',
    'as' => 'product.update'
]);
Route::get('/products/{id}/delete',[
    'uses'=> 'ProductsController@destroy',
    'as' => 'product.delete'
]);
Route::get('/users/login',[
    'uses'=> 'UsersController@login',
    'as' => 'users.login'
]);
Route::get('/users/logout',[
    'uses'=> 'UsersController@logout',
    'as' => 'users.logout'
]);
Route::post('/users/auth',[
    'uses'=> 'UsersController@auth',
    'as' => 'users.auth'
]);
Route::resource('/products','ProductsController');
Route::resource('/users','UsersController');
                            

2- الملف home.blade.php

فالمجلد views زيد ملف جديد سميه home.blade.php هادا الملف لي فيه غادي يتعرضوا les produits لي جاونا من route / لي هضرنا عليه فالملف السابق فكنخدم ب foreach باش كنعرضهم كيف درنا من قبل الكود ديال الملف هو :

                                @extends ('includes.main-layout')

@section('styles')

@endsection

@section('header')
    @include('includes.header')
@endsection

@section('content')
    <div class="row mt-4">
    @include('includes.errors')
    @foreach($products as $product)
        <div class="col-4">
            <div class="card mb-2" style="width: 18rem;">
                <img class="card-img-top" height="200" src="{{URL::to('images/'.$product->file)}}" alt="Produit">
                <div class="card-body">
                    <h5 class="card-title">{{$product->name}}</h5>
                    <p class="card-text">{{$product->prix}} DH</p>
                    <a href="{{route('products.show',['id'=>$product->id])}}" class="btn btn-primary btn-block">Voir</a>
                </div>
            </div>
        </div>
    @endforeach
    </div>
@endsection

@section('footer')

@endsection

@section('scripts')

@endsection
                            

3- الملف includes/errors.blade.php

فالمجلد includes زيد ملف جديد سميه errors.blade.php هادا الملف لي فيه الكود لي كيمكن من عرض les flash messages ولي هما رسائل النجاح والفشل ولي درنالو ل include فالملفات كاملين لي عندنا ف dossier views الكود ديال الملف هو :

                                @if(Session::has('fail'))
    <div class="alert alert-danger">
        {{Session::get('fail')}}
    </div>
@endif
@if(Session::has('success'))
    <div class="alert alert-success">
        {{Session::get('success')}}
    </div>
@endif
@if(Session::has('info'))
    <div class="alert alert-info">
        {{Session::get('info')}}
    </div>
@endif
@if(count($errors) > 0)
    @foreach($errors->all() as $error)
        <div class="alert alert-danger">{{$error}}</div>
    @endforeach
@endif
                            

4- الملف style.css

ف dossier public/css زيد ملف سميه style.css ولي غادي يكون فيه الكود css ديالنا فانا زدت هاد الكود ونتا يمكن تزيد لي بغيتي الكود هو :

                                    body{
    font-family: 'Raleway',Verdana, Geneva, Tahoma, sans-serif;
}
.table{
    width: 100%;
}
                                

5- الملف main.js

ف dossier public/js زيد ملف سميه main.js ولي غادي يكون فيه الكود jquery لي كيسترجع القيمة لي كاينة فالحقل quantité وايضا كيسترجع les liens لي كيمكنوا من تعديل ل quantité بل id ديالهم فل onclick ديال le lien ديال الزيادة كنزيد فل قيمة ديال الحقل وفل onclick ديال le lien ديال النقص كنقص من ل قيمة ديال الحقل الكود ديال الملف هو :

                                    $(function(){
    var qte = $('#qte').val();
    var min = $('#moins');
    var plus = $('#plus');
    min.on('click',function(){
        $('#qte').val(qte-=1);
    });
    plus.on('click',function(){
        qte = parseInt(qte);
        $('#qte').val(qte+=1);
    });
});
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد