{"id":3478,"date":"2016-04-29T13:15:24","date_gmt":"2016-04-29T09:15:24","guid":{"rendered":"http:\/\/dhtmlx.com\/blog\/?p=3478"},"modified":"2025-03-28T19:38:14","modified_gmt":"2025-03-28T16:38:14","slug":"javascript-data-grid-with-laravel-5-usage-guide","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/javascript-data-grid-with-laravel-5-usage-guide\/","title":{"rendered":"JavaScript Data Grid with Laravel 5 Usage Guide"},"content":{"rendered":"

PHP<\/a> is probably one of the most popular programming languages. Especially if we talk about the web development. Following the intention to complexity reduction, dozens of PHP frameworks have been created. One of the most popular among them is Laravel<\/a>. You can check this framework popularity survey<\/a> made by sitepoint to make sure that Laravel at least deserves your attention.<\/p>\n

Download dhtmlxGrid – JavaScript Data Table<\/a>, or the whole JS library with more than 20 components<\/a><\/strong><\/p>\n

\"js<\/p>\n

Spoiler! That’s how dhtmlxGrid will look like in the version 5.0 ;)<\/em><\/p>\n

This article’s aim is to describe the basics of Laravel usage. This framework was created for the development of web applications following the model\u2013view\u2013controller<\/a> (MVC) architectural pattern. One of the core features of Laravel is a modular packaging system that allows adding new components to your project. Since we’re not interesting in the creation of a simple “Hello, World!” application, we’ll use this feature to create something that looks like an actual web app. We’ll use our dhtmlxGrid component for our task. It’s a JavaScript grid library<\/a> that you can use for creating Ajax-enabled tables with rich in-cell editing, built-in filtering, searching, and grouping capabilities.
\n<\/p>\n

dhtmlxGrid doesn’t require a big amount of code for using it, and one article will be enough to create a working example. <\/p>\n

Step 1. Using Composer to Install Laravel<\/b><\/h3>\n

<\/p>\n

Composer<\/a> is a package manager for PHP that we can use to create a new Laravel project and install the required dhtmlxGrid files. If you use a Linux distribution, Composer is possibly available through a repository, and you can install it using your package manager like you install any other package. Otherwise, you can follow this installation guide<\/a>.<\/p>\n

There’s a well-written guide<\/a> that describes in detail how you can install Laravel, create and configure a new project. We’ll use previously installed Composer.<\/p>\n

Run in your terminal:<\/p>\n

composer create-project  laravel\/laravel --prefer-dist dhtmlxGrid<\/div><\/div>\n

This command will create a new Laravel project in a directory named dhtmlxGrid<\/em>. If you want, you can check if everything works well. Open the newly created directory and run the server:<\/p>\n

cd dhtmlxGrid
\nphp artisan serve<\/div><\/div>\n

Now you can open http:\/\/localhost:8000\/<\/strong> in your browser. Here’s what you should get:<\/p>\n

\"laravel<\/p>\n

Everything works which means that we can return to our application. Now we need to install dhtmlxConnector<\/a> which enables access to external data sources. We need it for saving and loading the data. The best thing about using Laravel is the possibility to add this component to a project via composer using a single command.<\/p>\n

You can use the Packagist<\/a> website if you want to find a proper package. You can find comprehensive information about the component that you want to use. Composer installation command, requirements, short description, link to the documentation page, etc.:<\/p>\n

\"server<\/p>\n

In our case, to install dhtmlxConnector you should use the following command:<\/p>\n

composer require dhtmlx\/connector-php<\/div><\/div>\n

Step 2. Get the dhtmlxGrid Package<\/b><\/h3>\n

<\/p>\n

After the installation complete, we should download the package with dhtmlxGrid<\/a>. Within the public<\/em> folder of your project create a new directory named dhtmlxGrid<\/em> and unpack the content of the package into it. <\/p>\n

Step 3. Create the Database<\/b><\/h3>\n

<\/p>\n

You can download<\/a> the pre-created zip archive that contains the database dump file we can use. Unpack the archive and you’ll see the dhtmlx_samples.sql file. <\/p>\n

Now, we can create a new database. If you use MySQL run:<\/p>\n

mysql -u root -p<\/div><\/div>\n

After you insert the password, you can create a new database and import the data from the dump file into it:<\/p>\n

CREATE DATABASE grid;
\nUSE grid;
\n \\. \/path\/to\/file\/dhtmlx_samples.sql<\/div><\/div>\n

After you finish with this task, we can finally create the application.<\/p>\n

Step 4. Create a Model<\/b><\/h3>\n

<\/p>\n

We need to specify the appropriate model class to get the access to the data. Create a new file named Grid.php<\/em> within the app directory of your project:<\/em><\/p>\n

<?php<\/span>
\nnamespace<\/span> App;<\/span>
\nuse<\/span> Illuminate\\Database\\Eloquent\\Model;<\/span>
\n
\nclass<\/span> Grid extends<\/span> Model
\n{<\/span>
\n    protected<\/span> $table<\/span> =<\/span> "scheduler_events"<\/span>;<\/span>
\n    public<\/span> $primaryKey<\/span> =<\/span> "event_id"<\/span>;<\/span>
\n    public<\/span> $timestamps<\/span> =<\/span> false<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

That’s it. Now we can create the View Object.<\/p>\n

Step 5. Create the View Object<\/b><\/h3>\n

<\/p>\n

Within the resources\/views directory, create a new file named grid.php<\/em>:<\/p>\n

<!DOCTYPE html><\/span>
\n<head<\/span>><\/span>
\n    <script<\/span> src<\/span>=<\/span>"dhtmlxGrid\/codebase\/dhtmlxgrid.js"<\/span>><\/<\/span>script<\/span>><\/span>
\n    <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"dhtmlxGrid\/codebase\/dhtmlxgrid.css"<\/span>><\/span>
\n<\/<\/span>head<\/span>><\/span>
\n
\n<body<\/span>><\/span>
\n    <div<\/span> id<\/span>=<\/span>"grid_here"<\/span> style<\/span>=<\/span>"width: 600px; height: 400px;"<\/span>><\/<\/span>div<\/span>><\/span>
\n    <script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n        mygrid = new dhtmlXGridObject('grid_here');
\n        mygrid.setHeader("Start date,End date,Text");
\n        mygrid.init();
\n        mygrid.load(".\/grid_data");
\n        var dp = new dataProcessor(".\/grid_data");
\n        dp.init(mygrid);
\n    <\/<\/span>script<\/span>><\/span>
\n<\/<\/span>body<\/span>><\/span><\/div><\/div>\n

Step 6. Create the Controller<\/b><\/h3>\n

<\/p>\n

The controller that we want to create will do two things: load the view, and load and process the data.<\/p>\n

To load and process data we will use GridConnector:<\/p>\n

$connector<\/span> =<\/span> new<\/span> GridConnector(<\/span>null<\/span>,<\/span> "PHPLaravel"<\/span>)<\/span>;<\/span>
\n$connector<\/span>-><\/span>configure<\/span>(<\/span>new<\/span> Grid(<\/span>)<\/span>,<\/span>"event_id"<\/span>,<\/span>"start_date,end_date,event_name"<\/span>)<\/span>;<\/span>
\n$connector<\/span>-><\/span>render<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

The GridConnector constructor takes 2 parameters:<\/p>\n

    \n
  • null<\/strong> – null is passed, as a model, not a database is used;<\/li>\n
  • $PHPLaravel<\/strong> – the module for working with PHP, the hardcoded value;<\/li>\n<\/ul>\n

    <\/p>\n

    The configure method configures the GridConnector object without rendering data and takes 5 parameters:<\/p>\n

      \n
    • new $modelName<\/strong> – the method creating a model. In this case, new Grid() that we have defined earlier;<\/li>\n
    • $id<\/strong> – the name of the id field;<\/li>\n
    • $text<\/strong> – a comma separated list of rendered data fields;<\/li>\n
    • $extra<\/strong> – (optional) a comma separated list of extra fields;<\/li>\n
    • $relation_id<\/strong> – (optional) used for building hierarchy in case of Tree and TreeGrid;<\/li>\n<\/ul>\n

      <\/p>\n

      Now, within the app\/Http\/Controllers<\/em> folder create a new file, GridController.php<\/em>:<\/p>\n

      <?php<\/span>
      \nnamespace<\/span> App\\Http\\Controllers;<\/span>
      \nuse<\/span> App\\Grid;<\/span>
      \nuse<\/span> Dhtmlx\\Connector\\GridConnector;<\/span>
      \n
      \nclass<\/span> GridController extends<\/span> Controller
      \n{<\/span>
      \n    public<\/span> function<\/span> data(<\/span>)<\/span> {<\/span>                                    
      \n        $connector<\/span> =<\/span> new<\/span> GridConnector(<\/span>null<\/span>,<\/span> "PHPLaravel"<\/span>)<\/span>;<\/span>    
      \n        $connector<\/span>-><\/span>configure<\/span>(<\/span>                                  
      \n            new<\/span> Grid(<\/span>)<\/span>,<\/span>                              
      \n            "event_id"<\/span>,<\/span>                                        
      \n            "start_date, end_date, event_name"<\/span>                  
      \n        )<\/span>;<\/span>                                                      
      \n        $connector<\/span>-><\/span>render<\/span>(<\/span>)<\/span>;<\/span>                                  
      \n    }<\/span>                                                          
      \n}<\/span><\/div><\/div>\n

      Step 7. Final Configuration<\/b><\/h3>\n

      <\/p>\n

      We should edit the .env<\/em> file that you can find within the root file of your project. We need to change four lines to give Laravel access to the previously created database:<\/p>\n

      DB_HOST=localhost
      \nDB_DATABASE=grid
      \nDB_USERNAME=root
      \nDB_PASSWORD=yourpassword<\/div><\/div>\n

      Now, let’s deal with routes. If you open the app\/Http\/routes.php<\/em> file you’ll find the default route configuration that may look like this:<\/p>\n

      Route::<\/span>get<\/span>(<\/span>'\/'<\/span>,<\/span> function<\/span> (<\/span>)<\/span> {<\/span>
      \n    return<\/span> view(<\/span>'welcome'<\/span>)<\/span>;<\/span>
      \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

      This code will perform the GET request after you open your project in a browser. As a result, the welcome view from the resources\/views<\/em> folder will be returned. We should replace it with the previously created view, grid.php<\/em>. The other step is to use GridController to save and load data. All you need to do is to replace the existing route with the following:<\/p>\n

      Route::<\/span>get<\/span>(<\/span>'\/'<\/span>,<\/span> function<\/span> (<\/span>)<\/span> {<\/span>
      \n    return<\/span> view(<\/span>'grid'<\/span>)<\/span>;<\/span>
      \n}<\/span>)<\/span>;<\/span>
      \n
      \nRoute::<\/span>match<\/span>(<\/span>[<\/span>'get'<\/span>,<\/span> 'post'<\/span>]<\/span>,<\/span> '\/grid_data'<\/span>,<\/span> "GridController@data"<\/span>)<\/span>;<\/span><\/div><\/div>\n

      One more step left. Laravel protects your application from cross-site request forgeries by generating a CSRF “token” for each active user session managed by the application. You can read more about the mechanisms of protection on this page if you want, but what we need to do now is to exclude one particular URI from CSRF protection. The one that triggered when created data is supposed to be saved. We need to add a proper value to the $except property in the file app\/Http\/Middleware\/VerifyCsrfToken.php<\/em>:<\/p>\n

      protected<\/span> $except<\/span> =<\/span> [<\/span>
      \n    'grid_data'<\/span>
      \n]<\/span>;<\/span><\/div><\/div>\n

      Step 8. Run the Application<\/b><\/h3>\n

      <\/p>\n

      Open your project’s directory and run in terminal:<\/p>\n

      php artisan serve<\/div><\/div>\n

      Open http:\/\/localhost:8000\/ in your browser and you\u2019ll see the working dhtmlxGrid:<\/p>\n

      \"laravel<\/p>\n

      Here’s the table that contains the data from our database.<\/p>\n

      That’s all. We hope you have enjoyed the tutorial.<\/p>\n","protected":false},"excerpt":{"rendered":"

      PHP is probably one of the most popular programming languages. Especially if we talk about the web development. Following the intention to complexity reduction, dozens of PHP frameworks have …<\/p>\n","protected":false},"author":2,"featured_media":3803,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1],"tags":[33,6,14,46,49],"class_list":["post-3478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlxgrid","tag-tips","tag-laravel","tag-php"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3478"}],"version-history":[{"count":3,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3478\/revisions"}],"predecessor-version":[{"id":13632,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3478\/revisions\/13632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3803"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}