كيفاش دير images upload ب dropzone.js و laravel الجزء الثالت


فهاد الجزء الثالت من كيفاش دير images upload ب dropzone.js و laravel غادي نكملو الملفات لي بقاو ولي غادي تكون فيهم الفورم لي كتمكن من إضافة وتعديل منتوج فقاعدة البيانات وهاد الجزء هو الجزء الآخير.

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

1- الملف add.blade.php

دائما فالمجلد views فيه زيد ملف جديد سميه add.blade.php هادا الملف لي فيه الكود لي كيمكن المستخدم من إضافة produit من بعد ما كيدخل المعلومات الخاصين به فل form ثم كترسل للfonction add لي كاينة فالملف ProductsController.php الكود ديال الملف هو :

                                @extends('includes.main-layout')

@section('styles')
    <link rel="stylesheet" href="{{URL::to('css/main.css')}}">
@endsection
@section('header')
   @include('includes.header')
@endsection
@section('content')
   <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3 class="text-primary">Ajouter un produit</h3>
            <hr>
            <form action="{{route('product.add')}}" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="title">Titre*</label>
                    <input type="text" name="title" class="form-control">
                    <input type="hidden" name="_token" value="{{Session::token()}}">
                </div>
                <div class="form-group">
                    <label for="description">Déscription*</label>
                    <textarea cols="30" rows="5" name="description" class="form-control"></textarea>
                </div>
                <button type="submit" id="button" class="btn btn-success">Suivant</button>
            </form>
        </div>
   </div>
@endsection
@section('footer')
   @include('includes.footer')
@endsection
@section('scripts')
    
@endsection
                            

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

دائما فالمجلد views فيه زيد ملف جديد سميه update.blade.php هادا الملف لي فيه الكود لي كيمكن المستخدم من تعديل المعلومات ديال produit اختارو فمنبعد مكنسترجع ل produit بواسطة ل id ديالو كنعرض المعلومات فالحقول من بعد ما كيدخل المعلومات الجديدة فل form كترسل للfonction update لي كاينة فالملف ProductsController.php مرفوقة بل id ديال ل produit لي غادي يتعدل الكود ديال الملف هو :

                                @extends('includes.main-layout')

@section('styles')
    <link rel="stylesheet" href="{{URL::to('css/main.css')}}">
@endsection
@section('header')
   @include('includes.header')
@endsection
@section('content')
   <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3 class="text-primary">Modifier un produit</h3>
            <hr>
            <form action="{{route('product.update',$product->id)}}" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="title">Titre*</label>
                    <input type="text" name="title" class="form-control" value="{{$product->title}}">
                    <input type="hidden" name="_token" value="{{Session::token()}}">
                </div>
                <div class="form-group">
                    <label for="description">Déscription*</label>
                    <textarea cols="30" rows="5" name="description" class="form-control">{{$product->description}}</textarea>
                </div>
                <button type="submit" id="button" class="btn btn-success">Suivant</button>
            </form>
        </div>
   </div>
@endsection
@section('footer')
   @include('includes.footer')
@endsection
@section('scripts')
    
@endsection
                            

3- الملف upload.blade.php

دائما فالمجلد views فيه زيد ملف جديد سميه upload.blade.php هادا الملف لي فيه الكود لي كيمكن المستخدم من إضافة صور ديال ل produit لي زاد وهنا خدمنا ب dropzone.js باش تزيدها يا إما كت télécharger الملف js و css من الموقع الرسمي http://www.dropzonejs.com أوكتزيد فقط روابط cdn كيف درت انا والفورم فقط كتعطيها ل class dropzone وroute لي كيدي ل fonction add لي كاينة ف PhotosController.php لي كتزيد التصاور للproduit الكود ديال الملف هو:

                                @extends('includes.main-layout')

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.css">
    <link rel="stylesheet" href="{{URL::to('css/main.css')}}">
@endsection
@section('header')
   @include('includes.header')
@endsection
@section('content')
   <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3 class="text-primary">Ajouter des photos</h3>
            <hr>
            <form action="{{route('photo.add')}}" enctype="multipart/form-data" class="dropzone"  id="dropzone">
                <div class="dz-message" data-dz-message><span>Déposez vos fichiers ici</span></div>
                <input type="hidden" name="_token" value="{{Session::token()}}">
            </form>
            <hr>
            <div class="form-group">
                <a href="{{url('/')}}" class="btn btn-info">Retour</a>
            </div>
        </div>
   </div>
@endsection
@section('footer')
   @include('includes.footer')
@endsection
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script>
@endsection
                            

4- الملف photo-update.blade.php

دائما فالمجلد views فيه زيد ملف جديد سميه photo-update.blade.php هادا الملف لي فيه الكود لي كيمكن المستخدم من تعديل صور ديال ل produit لي زاد ولي كيدي لل fonction update لي كاينة ف الملف PhotosController.php ولي كتعدل الصور الخاصين بproduit الكود ديال الملف هو :

                                    @extends('includes.main-layout')

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.css">
    <link rel="stylesheet" href="{{URL::to('css/main.css')}}">
@endsection
@section('header')
   @include('includes.header')
@endsection
@section('content')
   <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3 class="text-primary">Modifier des photos</h3>
            <hr>
            <form action="{{route('photo.update')}}" method="post" enctype="multipart/form-data" class="dropzone"  id="dropzone">
                <div class="dz-message" data-dz-message><span>Déposez vos fichiers ici</span></div>
                <input type="hidden" name="_token" value="{{Session::token()}}">
            </form>
            <hr>
            <div class="form-group">
                <a href="{{url('/')}}" class="btn btn-info">Retour</a>
            </div>
        </div>
   </div>
@endsection
@section('footer')
   @include('includes.footer')
@endsection
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script>
@endsection
                                

5- الملف web.php

يلا كنتي تليشارجيتي ل version < 5.2 ديال laravel غادي تمشي للمجلد app/Http وفالملف routes.php كاين les routes ويلا تليشارجيتي version > 5.2 غادي تلقى مجلد سميتو routes فيه ملف سميتو web.php فيه كاين les routes وغادي تدير عليه تغييرات غادي تزيد les routes ديالنا ولي فيهم محددين les urls باش خدمنا ولي كيديو ل les fonctions لي زدنا ف les controlleurs دياولنا الكود ديال الملف بعد التغيير هو :

                                    <?php

/*
|--------------------------------------------------------------------------
| 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('/',[
    'uses'=>'ProductsController@index',
    'as'=>'index'
]);
Route::get('/upload', function () {
    return view('upload');
});
Route::get('/create',[
    'uses'=>'ProductsController@create',
    'as'=>'product.create'
]);
Route::get('/add-photo',[
    'uses'=>'PhotosController@create',
    'as'=>'photo.create'
]);
Route::post('/add-photo',[
    'uses'=>'PhotosController@add',
    'as'=>'photo.add'
]);
Route::post('/add',[
    'uses'=>'ProductsController@add',
    'as'=>'product.add'
]);
Route::get('/product/{id}/edit',[
    'uses'=>'ProductsController@edit',
    'as'=>'product.edit'
]);
Route::post('/product/{id}/update',[
    'uses'=>'ProductsController@update',
    'as'=>'product.update'
]);
Route::get('/product/{id}/delete',[
    'uses'=>'ProductsController@destroy',
    'as'=>'product.delete'
]);
Route::get('/photo/edit',[
    'uses'=>'PhotosController@edit',
    'as'=>'photo.edit'
]);
Route::post('/photo/update',[
    'uses'=>'PhotosController@update',
    'as'=>'photo.update'
]);


                                


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

بحث في الموقع


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