Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija الجزء السابع
فهاد الجزء السابع من 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