DEV Community

Alpha Olomi
Alpha Olomi

Posted on

Getting started with Infyom Generator on Laravel 9

#webdev #laravel

Laravel Infyom with DT

Author: Alpha Olomi

Hello, my name is Alpha, and I'm part of the Openepsa team. I will show you how to use Infyom Generator to create a CRUD demo in Laravel

1. Create a new laravel application

Using the laravel/installer

laravel new fast-admin
cd fast-admin
Enter fullscreen mode Exit fullscreen mode

Setup Local database using SQlite

Create a SQLite flat file

touch database/database.sqlite
Enter fullscreen mode Exit fullscreen mode

Update the .env variables to direct to sqlite databse

first comment all DB_* variables

and add the line

// ...
LOG_LEVEL=debug

DB_CONNECTION=sqlite
// DB_CONNECTION=mysql
// DB_...
Enter fullscreen mode Exit fullscreen mode

Migrate

php artisan mgirate
Enter fullscreen mode Exit fullscreen mode

Scaffold the Authentication and Portal UI

Using a Custom AdminLTE preset from Infyom

composer require infyomlabs/laravel-ui-adminlte
Enter fullscreen mode Exit fullscreen mode

Create login/register and home pages and code

For more info see LaravelUI AdminLTE preset

php artisan ui adminlte --auth
Enter fullscreen mode Exit fullscreen mode

Edit resources/views/layouts/app.blade.php
Update yield to stack. This will match other blade files generated later on

@stack('third_party_stylesheets')
Enter fullscreen mode Exit fullscreen mode 
@stack('third_party_scripts')
Enter fullscreen mode Exit fullscreen mode

Finally, compile the frontend assets

# compile app.css and app.js
npm install && npm run prod
Enter fullscreen mode Exit fullscreen mode

2. Install Infyom Generator

Intro

Infyom Generator is a Laravel package that helps you generate CRUD operations in your Laravel application. It is a great tool to generate CRUD operations in your Laravel application.

composer require infyomlabs/laravel-generator
composer require infyomlabs/adminlte-templates
composer require doctrine/dbal  # Used for reading the database
Enter fullscreen mode Exit fullscreen mode

Misc composer packages

Few more packages are required these will be used by the code generated:

composer require laravelcollective/html
composer require laracasts/flash
Enter fullscreen mode Exit fullscreen mode 
php artisan vendor:publish --provider="InfyOm\Generator\InfyOmGeneratorServiceProvider"
Enter fullscreen mode Exit fullscreen mode

A config file config/infyom/laravel_generator.php will be generated.

Update it as follows:

'options' => [
    'softDelete' => false, // line 131
    'save_schema_file' => false,
    'repository_pattern' => false, // line 139
]
Enter fullscreen mode Exit fullscreen mode

we will create a AppBaseController to extend out Controllers functionality

touch app/Http/Controllers/AppBaseController.php
Enter fullscreen mode Exit fullscreen mode

Update

<?php

namespace App\Http\Controllers;

class AppBaseController extends Controller
{
    // 
}
Enter fullscreen mode Exit fullscreen mode

3. Install DataTable

Install composer package

composer require yajra/laravel-datatables
Enter fullscreen mode Exit fullscreen mode

Publish assets for buttons

php artisan vendor:publish --tag=datatables-buttons
Enter fullscreen mode Exit fullscreen mode

Install node packages

yarn add datatables.net-bs5 datatables.net-buttons-bs5
Enter fullscreen mode Exit fullscreen mode

Edit resources/js/bootstrap.js and add the following:

require("bootstrap");
require("datatables.net-bs5")();
require("datatables.net-buttons-bs5")();
Enter fullscreen mode Exit fullscreen mode

Edit resources/scss/app.scss and add the following:

@import "~datatables.net-bs5/css/dataTables.bootstrap5.css";
@import "~datatables.net-buttons-bs5/css/buttons.bootstrap5.css";
Enter fullscreen mode Exit fullscreen mode

Compile the assets again

# compile app.css and app.js
npm install && npm run prod
Enter fullscreen mode Exit fullscreen mode

4. Create a migration

We will create a migration for products table.
In the terminal run:

php artisan make:migration create_products_table --create=products
Enter fullscreen mode Exit fullscreen mode

Update the newly created migration to add 3 more columns ie name, description and price

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('description');
            $table->float('price', 8, 2);
            $table->timestamps();
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

migrate 

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

5. Scaffolding the Application UI

Finally, using the products table we just created and migrated, we will scaffold the UI for it.

# To to ensure we use latest configurations
# lets clear the cache on more time
php artisan optimize
Enter fullscreen mode Exit fullscreen mode 
php artisan infyom:scaffold Product --fromTable --tableName=products
Enter fullscreen mode Exit fullscreen mode

Files generated

A list of files will be generated and enabling a full CRUD on Products

minor tweaks

Edit resources/views/products/table.blade.php

remove @include('layouts.datatables_css') and @include('layouts.datatables_js')

Recall we bundled all our frontend assets all together

Open

Start the development server

php artisan serve
Enter fullscreen mode Exit fullscreen mode

Happy Coding!

Top comments (1)

Collapse
 
luckytechpr0 profile image
Lucky Tech Pro •

nice one!!

Read next

nattive profile image

My top VS Code Extensions for Front-End Development in 2024

Sofolahan Eniola Ademola -

hirelaraveldevelopers profile image

Tips and Strategies for Hiring Top ReactJS Developers in 2024: Expert Guide

Hire Laravel Developers -

orlidev profile image

** Programación con Kung Fu Panda: Dominar el Paradigma de Orientación a Objetos **🐼

Orli Dun -

phukon profile image

Be a Better UI Engineer: Selectively Exclude CSS Styles

phukon -