كيفاش نصاوب ألبوم صور بإستعمال Laravel الجزء الثاني

فهاد الجزء الثاني غادي نشوفو كيفاش نزيدو الصور فقاعدة البيانات نعرضوها فالصفحة الرئيسية و نعطيو للمستخدم المكانية ديال أنه يمسح الصورة لي ختارها من قاعدة البيانات.

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


- صفحة إضافة الصور لقاعدة البيانات


باش نصاوبو هاد الصفحة غادي نزيد مجلد ف resources/views نسميه photos منبعد داخل هاد المجلد غادي نزيد ملف نسميه create.blade.php الكود النهائي ديال الملف هو :

                                    
                                        @extends('layouts.index-master')
@section('title')
   Ajouter une photo
@endsection
@section('styles')
   
@endsection

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

@section('content')
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            @include('includes.alert')
            <div class="panel panel-default">
                <div class="panel panel-body">
                    <h3 class="text-primary">Ajouter une photo</h3>
                    <hr>
                    <form  method="POST"  action="{{route('photos.store')}}" enctype="multipart/form-data"> 
                        <label for="photo">Photo</label>
                        <div class="form-group">
                            <input type="file" name="photo" id="photo">
                            <input type="hidden" name="_token" value="{{Session::token()}}">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Enregister</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
   
@endsection
                                    
                                

- إنشاء PhotosController.php


باش نتمكن من إضافة الصور خاص نزيد controller لي غادي نسميه PhotosController.php غادي نمشي ل cmd من بعد نكتب الأمر cd c:wamp/www/PhotosGallery ثم غادي نكتب الأمر php artisan make:controller PhotosController --resource غادي نمشي ل app/http/controllers تما غادي لقى ل controller تزاد غادي نزيد فيه ل الكود لي غادي يمكن من إضافة ومسح الصور من قاعدة البيانات.

                                    
                                        <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Photo;
use App\Http\Requests;

class PhotosController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $photos = Photo::all();
        return view('index',compact('photos'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
        return view('photos.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $this->validate($request, [
            'photo' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
        if($request->hasFile('photo')){
            $file = $request->file('photo');
            $name = time().'_'.$file->getClientOriginalName();
            $file->move('images',$name);
            $photo = new Photo();
            $photo->name = $name;
            $photo->save();
            return redirect()->route('photos.index')->with(['success'=>'Photo ajoutée avec succés']);
        }
        return redirect()->route('photos.index')->with(['fail'=>'Erreur lors de l\'enregistrement de votre photo']);
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
        $photo = Photo::findOrFail($id);
        unlink(public_path().'/images/'.$photo->name);
        $photo->delete();
        return redirect()->route('photos.index')->with(['success'=>'Photo supprimée avec succés']);
    }
}

                                    
                                

-الملف index.blade.php


غادي نزيد الصفحة الرئيسية فresources/views نسميها index.blade.php لي غادي يكون فيها العرض ديال كل الصور لي عندنا فقاعدة البيانات و أزرار لي غادي تمكنا من مشاهدة الصورة أو حذفها.

                                      
                                        @extends('layouts.index-master')

@section('title')
    Photo Gallery
@endsection

@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-12">
            @include('includes.alert')
            <div class="row">
                @foreach($photos as $photo)
                    <div class="col-md-3">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <img src="{{URL::to('/images/'.$photo->name)}}" alt="" class="thumbnail image" height="200" width="230">
                            </div>
                            <div class="panel-footer">
                                <a href="#showImage{{$photo->id}}" class="label label-primary" data-toggle="modal"><i class="fa fa-eye"></i> Voir</a>
                                <a href="#deleteImage{{$photo->id}}" class="label label-danger" data-toggle="modal"><i class="fa fa-trash"></i> Supprimer</a>
                            </div>
                        </div>
                    </div>
                    <!--affiche image modal-->
                    <div class="modal fade" id="showImage{{$photo->id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <h4 class="modal-title" id="myModalLabel"></h4>
                            </div>
                            <div class="modal-body">
                                 <img src="{{URL::to('/images/'.$photo->name)}}" alt="" class="thumbnail" height="300" width="550">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                            </div>
                            </div>
                        </div>
                    </div>
                    <!--supprimer image modal-->
                    <div class="modal fade" id="deleteImage{{$photo->id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="myModalLabel">Voulez vous vraiment supprimer cette image ?</h4>
                                </div>
                                <div class="modal-body">
                                    <img src="{{URL::to('/images/'.$photo->name)}}" alt="" class="thumbnail" height="300" width="550">
                                </div>
                                <div class="modal-footer">
                                    <form  method="POST"  action="{{route('destroy',$photo->id)}}"> 
                                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                                        <button type="submit" class="btn btn-danger">Oui</button>
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Non</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@section('scripts')
   
@endsection

                                      
                                    

-الملف routes.php


فالأخير غادي نزيد الكود لي غادي يمكنا باش نتصفحوا جميع الصفحات فالملف routes.php لي كاين فapp/http الكود النهائي ديالو :

                                        
                                            <?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/

Route::get('/', function () {
    return view('index');
});
Route::resource('/photos','PhotosController');
Route::post('/photo/delete/{id}',[
    'uses' => 'PhotosController@destroy',
    'as' => 'destroy'
]);
                                        
                                    

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