InfyOm Blog

latest-post

Generally, we are using a Swagger in Laravel. it will take time if we set up swagger manually. so, In this article, I going to show you very easy steps for setup in Laravel.

You can watch the following video tutorial as well.

Steps 1:

You should download these assets from here. unzip the folder and go to the public directory. you can found the swagger directory in the side public folder. let open the swagger directory and you can see the following files.

  • jquery-2.1.4.min.js
  • style.css
  • swagger-bundle.js
  • swagger.yaml

If are you still confuse then visit this link for files.

now, Copy the swagger directory and put it in your laravel application on the same path.

Steps 2:

We need to load swagger with proper swagger UI. so, let navigate to resources/views on the downloaded source code project.

You can see the swagger directory inside the views directory. copy the swagger directory to your laravel application on the same path. I don't think you need to do anything in this view file. let's go to the next step.

Steps 3:

You need to update this swagger.yaml file. you should update the following details first. and then add APIs documentation in this file. Api document example given here. you can refer it.

info:
  description: LPT APis
  version: 1.0.0
  title: LPT Frontend API's
basePath: /api/

Steps 4:

In this step, you need to create a route for loading swagger docs. so, let's open the web.php file add the following few lines of code.

Route::get('/docs', function () {
    return view('swagger.index');
});

Now, run a command php artisan serve and open http://127.0.0.1:8000/docs or open a virtualHostDomain/docs if you have one.

You should watch this tutorial as well if you using InfyOm Generator

September 22, 20212 minutesuserShailesh Ladumor

Posts

post

Today we are going to take another major decision on our template development for Laravel Generator.

It's been around more than 7 months since we launched a new Laravel generator with the ability to select any CSS framework based on developers choice. Even anyone can develop his own templates and use it with a generator.

After these 7 months, now we have around 4 templates repository including Bootstrap Templates, AdminLTE Theme Templates, FlatLab Theme Templates, Metronic Theme Templates with maintaining templates for 3 different version of Laravel including 5.1, 5.2, 5.3. Also, laravel has a rapid release cycle, so it's very hard to maintain 4 packages with 3 different versions supported.

Also, what we realized is, lots of developers are using AdminLTE templates only for their main backend development. We found AdminLTE far better than any other templates. Also, It comes with a better setup, better elements support, regular updates and fits best for back-end Admin Panel development.

So today, we are taking a decision to actively only maintain AdminLTE templates and deprecate all other template development from our end. so we can focus on one template repository and can add more features to it.

It doesn't mean that packages will be deleted from its GitHub repository. It will always be there, but we will be focusing more on AdminLTE templates and all other templates will be more community driven.

September 27, 20161 minuteauthorMitul Golakiya
post

In this tutorial, we are going to learn how to display image in datatable or add image column to datatable while using yajra/laravel-datatables with infyom laravel generator.

We are continuously getting some questions like how we can achieve something with laravel generator. Recently, we got a question like, how we can display Image in DataTable while using yajra/laravel-datatables with infyom laravel generator. so I thought maybe it can be a requirement for lots of other developers as well and tried myself to find a solution. And then I decided to write a tutorial on that, so other developers can get an idea on that.

so here is the use case, suppose we have a Post model which contains three fields,

  1. Title
  2. Image
  3. Body

Image field contains a full or relative URL of the image which we need to show in a datatable (same as above image).

When you are using InfyOm Laravel Generator it generates PostDataTable.php file for the definition of DataTable. That file contains a function named, getColumns() for the definition of columns of DataTable. Something like following,

 return [     
   'title' => ['name' => 'title', 'data' => 'title'],     
   'image' => ['name' => 'image', 'data' => 'image'],     
   'body'  => ['name' => 'body', 'data' => 'body'] 
]; 

This is a very simple implementation of a DataTable Column definition.

To Display images in DataTable, we need to use the `render` function on the column to display images. You can define your own render function which will return the data that should be rendered in the column. In our case, we want to render an image, so our render function will be something like following,

 return [     
   'title' => ['name' => 'title', 'data' => 'title'],     
   'image' => ['name' => 'image', 'data' => 'image'],     
   'body'  => ['name' => 'body', 'data' => 'body'] 
]; 

If you will look carefully, we are returning, from render function. Where data will be the data from the model. In our case, It will be a URL.
Render function gets the data parameter as a first argument. You can find more information about render function over here.

Above code will generate output something like following,

"name": "image",    
   "data": "image",    
   "render": function (data, type, full, meta) {        
        return <img src=\"" + data + "\" height=\"50\"/>;     
},     
   "title": "Image",    
   "orderable": true,   
   "searchable": true 
}

So, this is how we can display an image in a datatable.

September 30, 20162 minutesauthorMitul Golakiya
post

Recently, we introduced some breaking updates by which many developers are getting something from the following errors:

  • datatables_css.stub failed to open stream
  • datatables_js.stub failed to open stream
  • View [datatables_css] not found
  • View [datatables_js] not found

Problem:

so, the purpose of this breaking update was, till now when we generate CRUD with datatables we were including datatable scripts into table.blade.php something like the following:

{!! $dataTable->table(['width' => '100%']) !!}
@section('scripts')
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
    <script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
    <script src="vendor/datatables/buttons.server-side.js"></script>
    {!! $dataTable->scripts() !!}
@endsection

And the main CSS files for datatables were included in the layout file layout/app.blade.php, also some js files were also included in the same folder. Like following,

<!-- Datatables -->
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"></script>

So the problem that we found was when we want to update the datatables version, we have to go to each file and update them manually. Also, there were some redundant JS and CSS files that were included in both table.blade.php & app.blade.php.

Solution:

As a solution, we decided to move these things to two partial files datatables_css.blade.php & datatables_js.blade.php. Which were published during the publishing layout.

php artisan infyom.publish:layout

so if anyone is getting this error then, run composer update to update your code to the latest commits and then try to run the above command and publish these two files into your layouts folder. As an alternative, you can also create those files manually from the templates and can update your layout file accordingly.

If anyone is still facing issues after performing these steps, then please post your comments below.

September 29, 20162 minutesauthorMitul Golakiya
post

Another minor update release for InfyOm Laravel Generator with some enhancement for datatables and few bug fixes.

This release contains datatable duplication script & CSS fixes with partial files support for datatables js and CSS files.

Also, it contains a few bug fixes about save JSON model schema, text area field generation and few more.

You can find full release notes here.

September 30, 20161 minuteauthorMitul Golakiya
post

Lots of people are wondering about implementing a multi-column search with Datatables and specifically how we can implement it with infyom laravel generator. There are several examples for creating a multi-column search with a traditional javascript way. Here are the links for that:

These all examples work great, but still, the missing piece is, there are no examples by which we can implement a laravel service which yajra provides. So after some research and reviewing several examples, finally I found out a way to create a multi-column search with yajra datatables with our generator. Here is the detailed guide to implementing it:

Before moving ahead, generate all scaffolds with datatables option true and make sure, your generated scaffold is fully working without any error.

Now, find out following files from your generated files (In my case, My model name is Post, find files, based on your generated files):

  • resources\views\posts\table.blade.php
  • app\DataTables\PostDataTable.php

Now we have to do the following changes in both files.

table.blade.php

find out this line,

 {!! $dataTable->table(['width' => '100%']) !!}

and add an extra parameter true to table function, like this:

 {!! $dataTable->table(['width' => '100%'], true) !!}

What it will do is, it will tell the datatable HTML builder that we want to draw a footer. so we can add our search boxes there. For more reference, you can check here.

Let's move to next file.

PostDataTable.php

In your `PostDataTable.php`, find out html() function, and we need to add one extra parameter to parameters array for a builder,

'initComplete' => function () {
this.api().columns().every(function () {
    var column = this;
    var input = document.createElement("input");
    $(input).appendTo($(column.footer()).empty()).on(\'change\', function () {
    column.search($(this).val(), false, false, true).draw();
    });
  });
} 

so it should look like as follows,

 public function html()
{
    return $this->builder()->columns($this->getColumns())
        ->addAction(['width' => '10%'])
        ->ajax('')
        ->parameters([
            'dom'          => 'Bfrtip',
            'scrollX'      => false,
            'buttons'      => [
                [
                    'extend' => 'print',
                    'text'   => 'Print all',
                ],
                [
                    'extend'        => 'print',
                    'text'          => 'Print selected',
                    'exportOptions' => ['modifier' => ['selected' => true]],
                ],
            ],
            'select'       => true,
            'initComplete' => function () {
this.api().columns().every(function () {
    var column = this;
    var input = document.createElement("input");
    $(input).appendTo($(column.footer()).empty()).on(\'change\', function () {
    column.search($(this).val(), false, false, true).draw();
    });
  });
 }
]);
}

Here, we are listening for the `initComplete` event of datatable and adding search input to every column footer. Also, we are listening for change event of each text input and searching that column. It will only work when you hit enter as we are listening for a change event, if you like to do instance search, then you should listen for keyup event.

That's it. Your search for each column should be working now.

March 04, 20172 minutesauthorMitul Golakiya