Application de gestion des événements ب laravel 6 & fullcalendarjs الجزء الثاني


فهاد الجزء الثاني من Application de gestion des événements ب laravel 6 & fullcalendarjs غادي نزيدو ل controller ديالنا لي غادي يكونوا فيه les fonctions لي غادي نحتاجو أيضا غادي نشوفوا كيفاش نعرضوا ل calendrier ديالنا فالصفحة الرئيسية.

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


1- تعديل الملف EventController


غادي نمشي للملف EventController لي هو ل controller ديالنا لي سبق وزدنا

فيه غادي نزيدو les fonctions لي غادي نحتاجوا فعندي :

- index لي بها كنسترجع ل events ديالي على شكل json حيت باش نعرضهم فل calendrier خصني نحولهم ل json.

- eventToArray هادي هي ل fonction لي كتستقبل ل events ولي كتحولهم ل json وترجعهم ف array.

- store لي كتمكن باش نزيدو event فقاعدة البيانات.

- show كنسترجع بها event بإستعمال title ديالو.

- update كنعدل بها event.

- destroy كنحذف بها event.

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

                                    
                                        <?php

namespace App\Http\Controllers;

use App\Event;
use Illuminate\Http\Request;

class EventController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        return $this->eventsToArray(Event::all());
    }

    public function eventsToArray($events){
        $eventsArray = [];
        foreach($events as $event){
            $data = [
                "title" => $event->title,
                "start" => $event->start_date,
                "end" => $event->end_date,
                "textColor" => "white"
            ];
            array_push($eventsArray,$data);
        }
        return response()->json($eventsArray);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        Event::create([
            "title" => $request->title,
            "start_date" => $request->start,
            "end_date" => $request->end
        ]);
        return response()->json(['success'=>'added']);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Event  $event
     * @return \Illuminate\Http\Response
     */
    public function show(Event $event)
    {
        //
        return view('show')->withEvent($event);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Event  $event
     * @return \Illuminate\Http\Response
     */
    public function edit(Event $event)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Event  $event
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Event $event)
    {
        //
        $event->update([
            "start_date" => $request->start,
            "end_date" => $request->end
        ]);
        return response()->json(['success'=>'updated']);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Event  $event
     * @return \Illuminate\Http\Response
     */
    public function destroy(Event $event)
    {
        //
        $event->delete();
        return response()->json(['success'=>'deleted']);
    }
}
                                    
                                

2- إضافة الملف الرئيسي


منبعد غادي نمشي ل dossier resources/views فيه غادي نزيد dossier سميه layouts فيه زيد ملف سميه main.blade.php.

فيه غادي يكونوا روابط ملفات css و js لي غادي نحتاجوا عندي :

- ملفات ال css و js الخاصة ب bootstrap و أيضا الخاصة ب fullcalendar js ولي غادي تخليني نزيد ل calendrier ديالي و sweet alert باش نعرض رسائل التأكيد.

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

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css"/>
    <link rel="stylesheet" href="{{asset("css/style.css")}}">
    <title>Laravel Event App</title>
</head>
<body>
    <div class="container border border-dark my-2">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">Events App</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="{{url('/')}}">Accueil <span class="sr-only">(current)</span></a>
                </li>
            </div>
        </nav>
        @yield('content')
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
    @yield('scripts')
</body>
</html>
                                    
                                

3- عرض ل calendrier فالصفحة الرئيسية


دائما ف dossier views زيد ملف جديد سميه home.blade.php لي هو الصفحة الرئيسية ديالنا فيه كنزيد div لي كتاخد ل id calendar فتما غادي تعرض ل calendrier ديالنا.

فالجهة الخاصة ب javascript وفاش الصفحة كتشارجا كنسترجع div بل id calendar منبعد كن créer objet من la classe FullCalendar وكنخدم بل méthode Calendar لي كنعطيها div لي حددنا.

منبعد كنحدد les options لي غادي تاخد فل plugins عندي dayGrid يعني غادي يتعرضوا الأيام و عندي interaction يعني إمكانية نضغط على يوم من الأيام لي فل calendrier.

فل header كنزيد ل menu باش نتحرك بين الأيام والأسابيع والشهور والباقي كنحدد أنه ممكن نعدل event أي نحركو من التاريخ لي فيه ونزيدو فتاريخ آخر وكنعطي la date par défaut ل calendrier.

منبعد كنحدد لغة ل calendrier فالفرنسية ممكن تغيرها للغة لي بغيتي كلشي كاين ف docs وكنعرض ل calendrier.

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

                                      
                                        @extends('layouts.main')

@section('content')
    <div class="row">
        <div class="col-md-10 mx-auto my-4">
            <div id='calendar'></div>  
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');//your dive id of calendar
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'interaction', 'dayGrid' ],
                header: {
                    left: 'prevYear,prev,next,nextYear today',
                    center: 'title',
                    right: 'dayGridMonth,dayGridWeek,dayGridDay'
                },
                defaultDate: '{{ date('Y-m-d') }}',
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                selectable: true,
                eventLimit: true // allow "more" link when too many events
            });
            calendar.setOption('locale', 'fr');           
            calendar.render();
            document.querySelector('.fc-dayGridMonth-button').innerHTML = "Mois";
            document.querySelector('.fc-dayGridWeek-button').innerHTML = "Semaine";
            document.querySelector('.fc-dayGridDay-button').innerHTML = "Jour";
            document.querySelector('.fc-today-button').innerHTML = "Ajourd'hui";
        });
    </script>
@endsection
                                      
                                    

4- إضافة routes


غادي تمشي للملف web.php غادي تزيد route الخاص بإسترجاع ل events على شكل json و route الخاص بالصفحة الرئيسية منبعد متزيدهم غادي تمشي للصفحة الرئيسية لي هي 127.0.0.1:8000 غادي تلقى ل calendrier معروضة.

متنساش تدير ل commande :

php artisan serve

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

                                        
                                            <?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');
});
Route::resource('/events','EventController');
                                        
                                    

كلمات مفاتيح :