Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء السابع

imadbelasri Laravel
LA

فهاد الجزء السابع من Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija غادي نزيدو ل questions وغادي نشوفوا كيفاش نزيدو question نديروا عليها تعديلات أو حذف.


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


1- إضافة Laravel Controller Question

من بعد زيد Laravel Controller سميه QuestionController لي فيه les fonctions ديال الإضافة العرض التعديل الحذف التصويت وعرض التعليقات الخاصة بكل سؤال.

الكود ديال ل controller هو :

                                                    
                                                        //
<?php

namespace App\Http\Controllers;

use App\Models\Category;
use App\Models\Question;
use App\Models\Collective;
use App\Models\Comment;
use Illuminate\Support\Str;
use Illuminate\Http\Request;

class QuestionController extends Controller
{
    public function __construct()
    {
        return $this->middleware(['auth', 'verified'])
            ->except('show', 'voteUp', 'voteDown', 'getQuestionComments');
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $questions = Question::where('user_id', auth()->user()->id)
            ->latest()->paginate(10);
        return view('questions.index')->with([
            'questions' => $questions
        ]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
        $categories = Category::all();
        $collectives = Collective::all();
        return view('questions.create')->with([
            'collectives' => $collectives,
            'categories' => $categories
        ]);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $this->validate($request, [
            'title' => 'required|min:10|unique:questions',
            'body' => 'required|min:10',
            'category_id' => 'required|numeric'
        ]);
        $data = $request->except('_token');
        $data['user_id'] = auth()->user()->id;
        $data['slug'] = Str::slug($request->title);
        Question::create($data);
        return redirect()->route('questions.index')->with([
            'success' => 'Question added successfully'
        ]);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Question  $question
     * @return \Illuminate\Http\Response
     */
    public function show(Question $question)
    {
        //
        return view('questions.show')->with([
            'question' => $question
        ]);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Question  $question
     * @return \Illuminate\Http\Response
     */
    public function edit(Question $question)
    {
        //
        $categories = Category::all();
        $collectives = Collective::all();
        return view('questions.edit')->with([
            'collectives' => $collectives,
            'categories' => $categories,
            'question' => $question
        ]);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Question  $question
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Question $question)
    {
        //
        if ($question->owner($question->user_id)) {
            $this->validate($request, [
                'title' => 'required|min:10|unique:questions,id,' . $question->id,
                'body' => 'required|min:10',
                'category_id' => 'required|numeric'
            ]);
            $data = $request->except('_token', '_method');
            $data['user_id'] = auth()->user()->id;
            $data['slug'] = Str::slug($request->title);
            $question->update($data);
            return redirect()->route('questions.index')->with([
                'success' => 'Question updated successfully'
            ]);
        }
        abort(403);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Question  $question
     * @return \Illuminate\Http\Response
     */
    public function destroy(Question $question)
    {
        //
        if ($question->owner($question->user_id)) {
            $question->delete();
            return redirect()->route('questions.index')->with([
                'success' => 'Question deleted successfully'
            ]);
        }
        abort(403);
    }

    public function voteUp($id)
    {
        $question = Question::find($id);
        $question->increment('votes');
    }

    public function voteDown($id)
    {
        $question = Question::find($id);
        $question->decrement('votes');
    }

    public function getQuestionComments($id)
    {
        $comments = Comment::where('question_id', $id)->with('user')->latest()->get();
        return response()->json($comments);
    }
}
                                                    
                                                

2- إضافة Laravel View Question Index

منبعد ف views زيد dossier سميه questions فيه زيد fichier index.blade.php لي هو الصفحة الرئيسية لي غادي يتعرضوا فيها ل questions لي زاد واحد المستخدم.

الكود ديال الملف هو :

                                                        
                                                            //
@extends('layouts.app')


@section('title')
    My Questions | Mini Slack
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center my-5">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">{{ __('My Questions') }}</div>

                    <div class="card-body">
                        <table class="table table-hover table-stripped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Collective</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($questions as $key => $question)
                                    <tr>
                                        <td>{{$key+=1}}</td>
                                        <td>{{$question->title}}</td>
                                        <td>
                                            <span class="badge bg-success">
                                                {{$question->collective->title}}
                                            </span>
                                        </td>
                                        <td class="d-flex justify-content-center align-items-center">
                                            <a href="{{route('questions.show',$question)}}"
                                                 class="btn btn-sm btn-primary">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{route('questions.edit',$question)}}"
                                                 class="btn btn-sm btn-warning mx-2">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form id="{{$question->id}}" action="{{route('questions.destroy',$question)}}" method="post">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                            <a href="#"
                                                onclick="if(confirm('are you sure ?')) document.getElementById('{{$question->id}}').submit()"
                                                class="btn btn-sm btn-danger">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="d-flex justify-content-center">
                            {{$questions->links()}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
                                                        
                                                    

3- إضافة Laravel View Question Create

دائما ف dossier questions زيد fichier create.blade.php لي فيه غادي تكون الفورم ديال إضافة question.

الكود ديال الملف هو :

                                                        
                                                            //
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center my-5">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Create Question') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('questions.store') }}">
                        @csrf
                        <div class="form-group row mb-3">
                            <label for="collective_id" class="col-md-4 col-form-label text-md-right">{{ __('Collective') }} </label>

                            <div class="col-md-6">
                                <select name="collective_id" id="collective_id"
                                    class="form-select">
                                    <option disabled selected>Choose a collective</option>
                                    @foreach ($collectives as $collective)
                                        <option value="{{$collective->id}}">
                                            {{$collective->title}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label for="category_id" class="col-md-4 col-form-label text-md-right">{{ __('Category') }} <span class="text-danger fw-bold">*</span> </label>

                            <div class="col-md-6">
                                <select name="category_id" id="category_id"
                                    class="form-select @error('category_id') is-invalid @enderror">
                                    <option disabled selected>Choose a category</option>
                                    @foreach ($categories as $category)
                                        <option value="{{$category->id}}">
                                            {{$category->name}}
                                        </option>
                                    @endforeach
                                </select>

                                @error('category_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label for="title" class="col-md-4 col-form-label text-md-right">{{ __('Title') }}<span class="text-danger fw-bold">*</span></label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title') }}" required autocomplete="title" autofocus>

                                @error('title')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label for="description" class="col-md-4 col-form-label text-md-right">{{ __('Description') }}<span class="text-danger fw-bold">*</span></label>

                            <div class="col-md-6">
                                <textarea rows="5" cols="30"
                                    class="form-control @error('body') is-invalid @enderror"
                                    name="body"
                                    required autocomplete="body">{{ old('body') }}</textarea>

                                @error('body')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Save') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
                                                        
                                                    

4- إضافة Laravel View Question Edit

دائما ف dossier questions زيد fichier edit.blade.php لي فيه غادي تكون الفورم ديال تعديل question.

الكود ديال الملف هو :

                                                        
                                                            //
@extends('layouts.app')

@section('title')
    Update Question | Mini Stack
@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center my-5">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Update Question') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('questions.update',$question) }}">
                        @csrf
                        @method('PUT')
                        <div class="form-group row mb-3">
                            <label for="collective_id" class="col-md-4 col-form-label text-md-right">{{ __('Collective') }} </label>

                            <div class="col-md-6">
                                <select name="collective_id" id="category_id"
                                    class="form-select">
                                    <option disabled selected>Choose a collective</option>
                                    @foreach ($collectives as $collective)
                                        <option
                                            @if($collective->id === $question->collective_id) selected @endif
                                            value="{{$collective->id}}">
                                            {{$collective->title}}
                                        </option>
                                    @endforeach
                                </select>

                                @error('category_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label for="category_id" class="col-md-4 col-form-label text-md-right">{{ __('Category') }} <span class="text-danger fw-bold">*</span> </label>

                            <div class="col-md-6">
                                <select name="category_id" id="category_id"
                                    class="form-select @error('category_id') is-invalid @enderror">
                                    <option disabled selected>Choose a category</option>
                                    @foreach ($categories as $category)
                                        <option
                                            @if($category->id === $question->category_id) selected @endif
                                            value="{{$category->id}}">
                                            {{$category->name}}
                                        </option>
                                    @endforeach
                                </select>

                                @error('category_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label for="title" class="col-md-4 col-form-label text-md-right">{{ __('Title') }}<span class="text-danger fw-bold">*</span></label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title',$question->title) }}" required autocomplete="title" autofocus>

                                @error('title')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label for="body" class="col-md-4 col-form-label text-md-right">{{ __('Body') }}<span class="text-danger fw-bold">*</span></label>

                            <div class="col-md-6">
                                <textarea rows="5" cols="30"
                                    class="form-control @error('body') is-invalid @enderror"
                                    name="body"
                                    required autocomplete="body">{{ old('body',$question->body) }}</textarea>

                                @error('body')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Save') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
                                                        
                                                    

5- إضافة Laravel View Question Show

دائما ف dossier questions زيد fichier show.blade.php لي فيه غادي يكون عرض المعلومات الخاصة question.

الكود ديال الملف هو :

                                                        
                                                            //
@extends('layouts.app')


@section('title')
    {{ $question->title }} | Mini Slack
@endsection

@section('content')
    <div class="container"  id="app">
        <div class="row my-5">
            <vote-component id="{{$question->id}}" votes="{{$question->votes}}"></vote-component>
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h4>{{ $question->title }}</h4>
                    </div>

                    <div class="card-body">
                        <div class="card-text">
                            {{$question->body}}
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <span class="fw-bold">
                            {{$question->user->name}}
                        </span>
                        <span class="fw-bold">
                            {{$question->created_at->diffForhumans()}}
                        </span>
                    </div>
                </div>
                <comment-component
                    question_id="{{$question->id}}"
                    user_id="{{auth()->check() ? auth()->user()->id : null}}"
                    verified_user="{{auth()->check() && auth()->user()->email_verified_at !== null ? true : false}}"
                        ></comment-component>
            </div>
        </div>
    </div>
@endsection
                                                        
                                                    

دروس ذات صلة

LA

Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء الأول

فهاد ل projet الجديد غادي نقادو Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija المستخدم كيز...


LA

Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء الثاني

فهاد الجزء الثاني من Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija غادي نزيدو Login & Logo...


LA

Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء الثالت

فهاد الجزء الثالت من Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija غادي نكملوا الجزء الخاص...


LA

Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء الرابع

فهاد الجزء الجديد من Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija غادي نزيدوا الصفحة الرئ...


LA

Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء الخامس

فهاد الجزء الخامس من Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija غادي نزيدوا ل models دي...


LA

Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء السادس

فهاد الجزء السادس من Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija غادي نزيدو ل collective...


LA

Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء الثامن

فهاد الجزء الثامن من Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija غادي نزيدوا Vuejs ل pro...


LA

Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء التاسع

فهاد الجزء التاسع والأخير من Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija غادي نشارجيو ل...