دورة laravel للمبتدئين الدرس السابع عشر


فهاد الدرس السابع عشر من  دورة laravel للمبتدئين غادي نكملو الملف ديال العرض ديال post اختاريناه مع لعرض ديال التعليقات الخاصين به وغادي نشوفوا ايضا كيفاش نخدموا بل pagination باش نعرضوا عدد محدود من les posts مع إمكانية التنقل بين الصفحات.


1- إضافة الفورم الخاصة بالتعليقات

فغادي نمشي ل show.blade.php فيه غادي نزيد لفورم لي غادي تمكن المستخدم من إضافة تعليق الفورم كترسل المعلومات ل route comment.add ولي كيزيد التعليق فالجدول الخاص بالتعاليق.

الكود لي زدنا هو :

                                //
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="row mt-4">
                <div class="col-md-8 mx-auto">
                    <h3>Article {{$post->id}}</h3>
                    <hr>
                    <div class="card">
                        <div class="card-body bg-light">
                            <h3 class="card-title">{{$post->title}}</h3>
                            <p>Par : {{$post->user->name}}  | Le : {{$post->created_at}}</p>
                            <div class="card-body">
                                {{$post->body}}
                            </div>
                        </div>
                    </div>
                    <h3 class="text-left">Commentaires</h3>
                    <form action="{{route('comment.add')}}" method="post">
                        {{csrf_field()}}
                        <div class="form-group">
                            <input type="hidden"  name="post_id" value="{{$post->id}}" class="form-control">
                        </div>
                        <div class="form-group">
                            <textarea placeholder="Description" col="30" rows="5" name="body" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="submit">Valider</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>
                            

2- عرض التعليقات الخاصة بكل post

فباش نعرض التعليقات غادي نخدم بالعلاقة لي زدت ف Post.php ولي زدناها فل fonction comments فكنخدم ب foreach لي كتمكن من عرض كل تعليق وكنخدم ايضا بالعلاقة لي زدت بين التعليق والمستخدم باش نعرض اسم صاحب التعليق.

الكود لي زدنا ف show.blade.php هو :

                                //
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="row mt-4">
                <div class="col-md-8 mx-auto">
                    <h3>Article {{$post->id}}</h3>
                    <hr>
                    <div class="card">
                        <div class="card-body bg-light">
                            <h3 class="card-title">{{$post->title}}</h3>
                            <p>Par : {{$post->user->name}}  | Le : {{$post->created_at}}</p>
                            <div class="card-body">
                                {{$post->body}}
                            </div>
                        </div>
                    </div>
                    <h3 class="text-left">Commentaires</h3>
                    <div class="media">
                        @foreach($post->comments as $comment)
                            <div class="media-left">
                                <h4> {{$comment->user->name}} </h4> <span class="text-muted">{{$comment->created_at}}</span>
                                <div class="media-body">
                                    {{$comment->body}}
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <hr>
                    <form action="{{route('comment.add')}}" method="post">
                        {{csrf_field()}}
                        <div class="form-group">
                            <input type="hidden"  name="post_id" value="{{$post->id}}" class="form-control">
                        </div>
                        <div class="form-group">
                            <textarea placeholder="Description" col="30" rows="5" name="body" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="submit">Valider</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>
                            

3- استعمال ل pagination ف laravel

فيلا رجعنا للصفحة الرئيسية غادي نلقاو عندنا les posts معروضين فصفحة وحدة وخصني نبقا هابط باش نشوفهم كاملين هنا الدور ديال ل pagination لي كيمكني باش نفرقهم على صفحات متعددة يمكن نتنقل عليها بكل سهولة.

غادي نمشيو ل web.php ف / route لي كنسترجع فيه les posts كاملين غادي نبدل ل méthode من all ل paginate ونعطي العدد ديال les posts لي بغيت يتعرض ولي حددناه ف 10.

فالكود من بعد التعديل ف web.php هو :

                                //
<?php
use App\Post;
/*
|--------------------------------------------------------------------------
| 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 () {
    $posts = Post::paginate(10);
    return view('welcome',compact('posts'));
});
...
                            

4-عرض الروابط ديال ل pagination ف laravel

فدبا يلا مشينا للصفحة الرئيسية غادي نلقاو 10 ديال les posts هما لي كاينين فباش نشوف شي لاخور خص ضروري ما نزيد الروابط فكنزيد الكود لي كيمكني باش نعرضهم فيكفي باش نزيد هاد السطر:

 {{$posts->links()}}

وتكون عندي هاد النتيجة :



فكل رقم ضغطت عليه غادي يعرض 10 ديال les posts لي من بعد.

الكود لي زدنا ف welcome.blade.php هو :

                                    //
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="row mt-4">
                <div class="col-md-6">
                    <h3>Ajouter un article</h3>
                    <hr>
                    {{-- part 4 --}}
                    @if(Session::has('success'))
                        <div class="alert alert-success">{{Session::get('success')}}</div>
                    @endif
                    {{-- part 3 --}}
                    @foreach($errors->all() as $error)
                        <div class="alert alert-danger">{{$error}}</div>
                    @endforeach
                    {{-- part 1 --}}
                    <form action="{{route('post.add')}}" method="post">
                        {{csrf_field()}}
                        <div class="form-group">
                            <input type="text" placeholder="Titre" name="title" class="form-control">
                        </div>
                        <div class="form-group">
                            <textarea placeholder="Description" col="30" rows="5" name="body" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="submit">Valider</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-6">
                    <h3>Articles</h3>
                    <hr>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Auteur</th>
                                <th>Titre</th>
                                <th>Déscrption</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($posts as $post)
                                <tr>
                                    <td>{{$post->user->name}}</td>
                                    <td>{{$post->title}}</td>
                                    <td>{{$post->body}}</td>
                                    <td><a href="{{route('post.show',$post->id)}}">Voir</a></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{$posts->links()}}
                </div>
            </div>
        </div>
    </body>
</html>