Advanced Forum ب laravel 5.8 الجزء الثالت


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

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

1- إضافة فورم إضافة سؤال جديد

غادي نمشي ل views زيد dossier questions فيه زيد ملف جديد سميه create.blade.php فيه غادي تكون فورم إضافة سؤال جديد لي كتمشي المعلومات ديالها ل fonction store لي زدنا فل controller QuestionsController.

الكود لي غادي تزيد هو :

                                //
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        @if(!empty($errors))
            @foreach($errors->all() as $error)
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="alert alert-danger">
                            {{$error}}
                        </div>
                    </li>
                </ul>
            @endforeach
        @endif
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">Ajouter une question</div>
                <div class="card-body">
                    <form method="post" action="{{route('questions.store')}}">
                        @csrf
                        <div class="form-group">
                            <input type="text" name="title" placeholder="Titre" class="form-control">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" placeholder="Description" name="body" rows="5" cols="30"></textarea>
                        </div>
                        <div class="form-group">
                            <select class="form-control" name="category_id">
                                <option selected="" disabled>Veuillez choisir une catégorie</option>
                                @foreach($categories as $categorie) 
                                    <option value="{{$categorie->id}}">{{$categorie->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">
                                Valider
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
                            

2- عرض تفاصيل سؤال

فنفس dossier لي هو questions زيد ملف جديد سميه show.blade.php فيه غادي تعرض تفاصيل سؤال بما فيها الأجوبة الخاصة به مع إمكانية إضافة جواب للقائمة ديال أفضل الأجوبة هاد الميزة عند فقط صاحب السؤال.

ممكن للمستخدم لي ماشي صاحب السؤال يزيد أجوبة ويصوت على السؤال واش جيد أو لا لا.

الكود لي غادي تزيد هو :

                                //
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-start">
        <div class="col-md-4">
            <div class="p-2 my-3">
                <a href="{{route('questions.create')}}" class="btn btn-primary">Ajouter</a>
            </div>
            <div class="card">
                <div class="card-header">Categories</div>
                <div class="card-body">
                    <ul class="list-group">
                        @foreach($categories as $categorie)
                            <li class="list-group-item">
                                <a href="{{route('questions.category',$categorie->slug)}}">{{$categorie->name}}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            @if(session()->has('success'))
                <div class="alert alert-success">{{session()->get('success')}}</div>
            @endif
            <div class="card">
                <div class="card-header">{{$question->title}}</div>
                <div class="card-body row">
                    <div class="col-md-4">
                            <div class="mt-4 d-flex justify-content-center align-items-center flex-column">
                                <a href="{{route('questions.addVote',$question->slug)}}">
                                    <i class="fa fa-chevron-up bg-primary rounded p-1 text-white fa-x2"></i>
                                </a>
                                <p class="mt-3 lead">
                                    {{$question->votes}}
                                </p>
                                <a href="{{route('questions.removeVote',$question->slug)}}">
                                    <i class="fa bg-primary text-white rounded p-1 fa-chevron-down fa-x2"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="media bg-light rounded shadow-sm bg-light p-2 my-2">
                            <div class="media-body">
                                <div class="d-flex justify-content-start align-items-start flex-column">
                                    <p class="lead">Par : {{$question->user->name}}</p>
                                    <p class="bg-danger text-white rounded p-2">{{$question->created_at->diffForhumans()}}</p>
                                </div>
                                <h3>{{$question->title}}</h3>
                                <p class="lead">
                                    {{$question->body}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-2">
                <div class="card-header">Réponses</div>
                <div class="card-body">
                    @foreach($question->replies as $reply)
                        <div class="col-md-8">
                            <div class="media
                             {{$reply->bestAnswer ? 'shadow' : 'bg-light '}}
                             rounded shadow-sm bg-light p-2 my-2">
                            <div class="media-body">
                                    <div class="d-flex justify-content-end align-items-end flex-column">
                                    @if($reply->bestAnswer)
                                        <span class="badge badge-success text-white p-2 my-3">Meilleure Réponse</span>
                                    @endif
                                    @if(auth()->user()->id === $question->user->id)
                                        @if(!$reply->bestAnswer)
                                        <a href="{{route('replies.markAsBest',$reply->id)}}{">
                                            <i class="fa fa-star-o fa-2x"></i>
                                        </a>
                                        @else
                                        <a href="{{route('replies.removeAsBest',$reply->id)}}">
                                            <i class="fa fa-star fa-2x"></i>
                                        </a>
                                        @endif  
                                    @endif
                                </div>
                                <div class="d-flex justify-content-start align-items-start flex-column">
                                    <p class="lead">Par : {{$reply->user->name}}</p>
                                    <p class="bg-danger text-white rounded p-2">{{$reply->created_at->diffForhumans()}}</p>
                                </div>
                                <p class="lead">
                                    {{$reply->body}}
                                </p>
                            </div>
                        </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="card mt-2">
                <div class="card-header">Ajouter une réponse</div>
                <div class="card-body">
                    <form method="post" action="{{route('replies.store')}}">
                        @csrf
                        <div class="form-group">
                            <textarea class="form-control" placeholder="Réponse" name="body" rows="5" cols="30"></textarea>
                        </div>
                        <input type="hidden" name="question_id" value="{{$question->id}}">
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">
                                Valider
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
                            

3- عرض جميع الأسئلة

فالملف home كندير تغيير كنعرض جميع الأسئلة مع ل catégories لي كيمكنوا من عرض الأسئلة الخاصة بكل catégorie أيضا كنزيد رابط إضافة سؤال جديد و نظام التصويت.

الكود لي غادي تزيد هو :

                                //
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-start">
        <div class="col-md-4">
            <div class="p-2 my-3">
                <a href="{{route('questions.create')}}" class="btn btn-primary">Ajouter</a>
            </div>
            <div class="card">
                <div class="card-header">Categories</div>
                <div class="card-body">
                    <ul class="list-group">
                        @foreach($categories as $categorie)
                            <li class="list-group-item">
                                <a href="{{route('questions.category',$categorie->slug)}}">{{$categorie->name}}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            @if(session()->has('success'))
                <div class="alert alert-success">{{session()->get('success')}}</div>
            @endif
            <div class="card">
                <div class="card-header">Questions</div>
                        <div class="card-body row">
                        @foreach($questions as $question)
                        <div class="col-md-4">
                            <div class="mt-4 d-flex justify-content-center align-items-center flex-column">
                                <a href="{{route('questions.addVote',$question->slug)}}">
                                    <i class="fa fa-chevron-up bg-primary rounded p-1 text-white fa-x2"></i>
                                </a>
                                <p class="mt-3 lead">
                                    {{$question->votes}}
                                </p>
                                <a href="{{route('questions.removeVote',$question->slug)}}">
                                    <i class="fa bg-primary text-white rounded p-1 fa-chevron-down fa-x2"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="media bg-light rounded shadow-sm bg-light p-2 my-2">
                            <div class="media-body">
                                <div class="d-flex justify-content-start align-items-start flex-column">
                                    <img src="https://robohash.org/test"
                                    width="60"
                                    height="60"
                                    >
                                    <p class="lead">Par : {{$question->user->name}}</p>
                                    <p class="bg-danger text-white rounded p-2">{{$question->created_at->diffForhumans()}}</p>
                                </div>
                                <h3><a href="{{route('questions.show',$question->slug)}}">{{$question->title}}</a></h3>
                                <p class="lead">
                                    {{str_limit($question->body,300)}}
                                </p>
                            </div>
                        </div>
                        </div>
                    @endforeach
                </div>
                <div class="d-flex justify-content-center align-items-center">
                    {{{$questions->links()}}}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
                            

4- إضافة les routes

باش نتنقل مابين الصفحات ضروري مخصني les routes غادي نمشي للملف web.php تما كنزيد les routes ديالي.

الكود لي غادي تزيد هو :

                                    //
<?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('/', function () {
    return view('home');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::resource('/questions', 'QuestionsController');
Route::resource('/replies', 'RepliesController');
Route::get('/addVote/{question}', 'QuestionsController@addVote')->name('questions.addVote');
Route::get('/questions/category/{category}', 'QuestionsController@category')->name('questions.category');
Route::get('/removeVote/{question}', 'QuestionsController@removeVote')->name('questions.removeVote');
Route::get('/markAsBest/{reply}', 'RepliesController@markAsBest')->name('replies.markAsBest');

Route::get('/removeAsBest/{reply}', 'RepliesController@removeAsBest')->name('replies.removeAsBest');
                                


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

بحث في الموقع


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