get json in blade view from model and controller

Question

I'm trying to transpose an "old" php script into Laravel this script work fine. I'm displaying some data in jQuery fullcalendar. But now I'm trying to integrate it into a laravel project

I do not want to use the maddhatter package. I just want to display some data stored in my mysql table on the calendar. I do not need to insert, update, etc.

the php page for database query : fetch-event.php

$json = array(); $sqlQuery = "SELECT * FROM tbl_events ORDER BY id";

$result = mysqli_query($conn, $sqlQuery);
$eventArray = array();
while ($row = mysqli_fetch_assoc($result)) {
    array_push($eventArray, $row);
}
mysqli_free_result($result);

mysqli_close($conn);
echo json_encode($eventArray);

the javascript , calendar.php page

<script>
$(document).ready(function () { 
    var calendar = $('#calendar').fullCalendar({
        editable: false,
        events: "fetch-event.php",       
        } ,
        eventClick: function (event) {            
            $.getJSON('fetch-event.php', function (user) {
    var convertToTableau=Array.from(Object.values(user));
    var us=$.grep(convertToTableau,function(v){  
                  return v.id==event.id;                
    });

    $("#firstname").text(us[0].title);
    $("#idpilote").text(us[0].id); 
});
        }
    });
});

</script> 

how can I transpose this code by translating it into laravel (5.8) with a model, a controller and a view. Thank you for your help.

Answer 1

that's what I did to progress in the solution

i create a controller

namespace App\Http\Controllers;

use App\Post;
use Illuminate\Http\Request;

class CalendrierController extends Controller
{
    public function getCalendrier()
    {
       // the view containing the fullcalendar
         return view('admin.blog.calendrier');        

    }

    public function getCalendrier2() {
        // the page who extract the data of the query 
        //(simple display of the data of the table) in json
        $products = Post::all();
        return $products;
    }
}

a model

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{

    protected $fillable = [
        'name',
        'prenom',
        'adresse',
        'phone',        
        'date1',
        'date2',
        'date_born',
        'lieu_born',
        'nationalite',
        'profession',
        'type_avion',
        'immat_avion',
    ];


    public $timestamps = false;
}

a route to display the fullcalendar view

Route::get('/blog/calendrier', [   
        'uses' => 'CalendrierController@getCalendrier', 
        'as' => 'admin.blog.calendrier' // 
    ]);

the blade view for the fullcalendar with jquery script

<script>
                            $(document).ready(function() {

                                var calendar = $('#calendar').fullCalendar({
                                    editable: false,
                                    events: "{{ route('products') }}",                                    
                                    eventClick: function(event) {

                                        $.getJSON("{{ route('products') }}", function(user) {
                                            var convertToTableau = Array.from(Object.values(user));
                                            console.log(convertToTableau);
                                            var us = $.grep(convertToTableau, function(v) {


                                                return v.id == event.id;
                                                console.log(event.id);

                                            });
                                            $("#firstname").text(us[0].name);
                                            $("#idpilote").text(us[0].id);
                                        });
                                    }

                                });
                            });
                        </script>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">

                    <div class="response"></div>
                    <div id='calendar'></div>
                    <div>
                        <p id="firstname"></p>
                        <p id="idpilote"></p>
                    </div>
                </div>
            </div>

the route who display the output query in json for the url in jquery script

Route::get('/products', [   
    'uses' => 'CalendrierController@getCalendrier2', 
    'as' => 'products' 
]);

in this page (products ) i display the json

[{"id":1,"name":"Martin","prenom":"Andr\u00e9","adresse":"125 rue des Bleuets , Lamorlaye, 60005, France","phone":"0102030102","date1":"2019-07-01","date2":"2019-07-31","date_born":"1942-01-01","lieu_born":"Charleroix , Belgique","nationalite":"Fr","profession":"Pilote","type_avion":"Planneur","immat_avion":"DZ582MMA"},{"id":4,"name":"Raymond","prenom":"Michel","adresse":"15 avenue des platanes, Riez, 04250, Fr","phone":"04258745","date1":"2019-07-07","date2":"2019-07-18","date_born":"1960-05-08","lieu_born":"Toulouse , Fr","nationalite":"Fr","profession":"Pilote","type_avion":"Planneur","immat_avion":"DZ555A"},{"id":5,"name":"Schumacher","prenom":"Hanz","adresse":"Am Hallenbad, 52000, Wurzelen, De","phone":"201748541","date1":"2019-07-05","date2":"2019-07-11","date_born":"1953-05-12","lieu_born":"Berlin , De","nationalite":"De","profession":"Pilote","type_avion":"Planneur","immat_avion":"DZ3547MMA"},{"id":6,"name":"Carbonara","prenom":"Luigi","adresse":"Via Veneto, Roma, It","phone":"2147485","date1":"2019-07-08","date2":"2019-07-15","date_born":"1968-08-02","lieu_born":"Florence , It","nationalite":"It","profession":"Pilote","type_avion":"Planneur","immat_avion":"DBBB7MMA"}]

I think that in fullcalendar there are reserved words (title, start, end). in my mysql table I have "date1" and "date2" instead of "start" and "end" and "name" instead of "title". I will try by changing the names of my columns in the mysql table. before doing that I have to make some small changes in my scripts (model, migration table etc ..)

I'll come back when I did that..