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

منذ سنة imadbelasri Laravel

فهاد الجزء السادس من Mini Stack Overflow ب Laravel 8 Darija & Vuejs 2 Darija غادي نزيدو ل collectives لي هما بحال les groupes ديال facebook كيكونوا فيهم أسئلة خاصة مثلا ب html أو python.

غادي نشوفوا كيفاش نزيدو collective نديروا عليها تعديلات أو حذف.

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

1- إضافة Laravel Controller Collective

من بعد زيد Laravel Controller سميه CollectiveController لي فيه les fonctions ديال الإضافة العرض التعديل والحذف.

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

عرض الكود

                                                    
                                                        //
<?php

namespace App\Http\Controllers;

use App\Models\Category;
use App\Models\Collective;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
use App\Http\Requests\CollectiveRequest;

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

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

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
        $categories = Category::all();
        return view('collectives.create')->with([
            '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:collectives',
            'description' => 'required|min:10',
            'category_id' => 'required|numeric'
        ]);
        $data = $request->except('_token');
        $data['user_id'] = auth()->user()->id;
        $data['slug'] = Str::slug($request->title);
        Collective::create($data);
        return redirect()->route('collectives.index')->with([
            'success' => 'Collective added successfully'
        ]);
    }

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

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

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

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

2- إضافة Laravel View Collective Index

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

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

عرض الكود

                                                        
                                                            //
@extends('layouts.app')


@section('title')
    My Collectives | 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 Collectives') }}</div>

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

3- إضافة Laravel View Collective Create

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

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

عرض الكود

                                                        
                                                            //
@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 Collective') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('collectives.store') }}">
                        @csrf
                        <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('description') is-invalid @enderror"
                                    name="description"
                                    required autocomplete="description">{{ old('description') }}</textarea>

                                @error('description')
                                    <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 Collective Edit

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

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

عرض الكود

                                                        
                                                            //
@extends('layouts.app')

@section('title')
    Update Collective | 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 Collective') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('collectives.update',$collective) }}">
                        @csrf
                        @method('PUT')
                        <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 === $collective->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',$collective->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('description') is-invalid @enderror"
                                    name="description"
                                    required autocomplete="description">{{ old('description',$collective->description) }}</textarea>

                                @error('description')
                                    <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 Collective Show

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

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

عرض الكود

                                                        
                                                            //
@extends('layouts.app')


@section('title')
    {{ $collective->title }} | Mini Slack
@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"> {{ $collective->title }}</div>

                    <div class="card-body">
                        <ul class="list-group">
                            @foreach ($collective->questions as $question)
                                <li class="list-group-item list-group-item-action">
                                    <a href="{{route('questions.show',$question)}}"
                                        class="btn btn-link text-decoration-none text-primary">
                                        {{$question->title}}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection