Technical Requirements

1. AWS Lightsail Instance
2. Github (your code must be github repo)
3. Laravel App

I am using following Github repo.

For this tutorial I am going assume you have already have Github repository for your Laravel application.

Configuring AWS Access Key & Secret

To establish communication with AWS via command line or programmatically, we need Access Key & Secret access key.

First login into your AWS console using your username and password. Then go to IAM -> Users section.

Next Click on Add users button on the top right to create user.

Now enter user name you want create and click Next button to continue.

Now don’t provide any permission and click on Next button to continue.

Now click Create user button to create new user.

Now click on newly created user ‘depoy-laravel-app’ to create Access key & Secret.

Now click Create access key button to create access key & secret.

Now check check the radio button ‘I understand the above recommendation and want to proceed to create an access key‘. And click on ‘Next‘ continue.

Finally click ‘Create access key’ button to create a key.

Configuring GitHub Secrets:

Now login into Github.com account and access your repository settings page to configure all the secrets that are required for CI & CD deployment. I have added following secrets by clicking on ‘New repository secret‘ button. (AWS ACCESS KEY, ACCESS SECRET, PEM FILE, AWS HOSTNAME & USERNAME).

Defining the Deployment Workflow:

Now create ‘.github‘ folder in the project root directory, and add ‘workflows‘ folder in it. Now add deploy-aws.yml file in it.

├── .github
│   └── workflows
│       └── deploy-aws.yml
├── .gitignore
├── README.md
├── app
```

Now following content to it.

name: Quiz

on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Install Build dependencies
      run: |
        sudo apt-get update
        sudo apt-get install -y git php composer
      
    - name: Set up Node.js 18.12.0
      uses: actions/setup-node@v2
      with:
        node-version: '18.12.0'
    
    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_ACCESS_SECRET_KEY }}
        aws-region: eu-west-2

    - name: Install Frontend dependencies
      run: |
        npm install
    
    - name: Build Frontend Code
      run: npm run build

    - name: Build Backend Code
      run: composer install --prefer-dist

    - name: Deploy Laravel code
      env:
          PRIVATE_KEY: ${{ secrets.AWS_PEM_KEY  }}
          HOSTNAME : ${{ secrets.HOSTNAME  }}
          USER_NAME : ${{ secrets.USER_NAME  }}
          ENV : ${{ secrets.ENV  }}
      run: |
        echo "$ENV" > .env
        echo "$PRIVATE_KEY" > private_key && chmod 600 private_key
        rsync -r --exclude 'node_modules' --exclude 'storage' --exclude '.git/' --delete-after -e "ssh -o StrictHostKeyChecking=no -i private_key" . ${USER_NAME}@${HOSTNAME}:/var/www/nxgeninventors.com/quiz/

        ssh -o StrictHostKeyChecking=no -i private_key ${USER_NAME}@${HOSTNAME} '
            cd /var/www/nxgeninventors.com/simba/ && 
            sudo chmod -R 777 storage && 
            php artisan storage:link 
        '
        
        
```

When ever code pushed to main branch, it trigger job.

Step1: Checkout codebase from main branch

Step 2: Install build dependencies that are required for this project (git, php, composer).

Step 3: Setting up Node version 18.12.0.

Step 4: Configure AWS Credentials (Access key & Secret).

Step 5: Install Frontend dependencies.

Step 6: Build Frontend Code

Step 7: Finally Deploy Laravel build code to the server, and set appropriate permission.

We display the array of objects using v-for directive, where content of the each item is large. So by default we will display excerpt of the content with show more button. When user clicks on the show more button, we will display large content with show less button. let see how we are going to implement this for this dynamic list.

<script src="https://unpkg.com/vue"></script>
<div id="app">
    <h1 class="title">{{title}}</h1>

    <div>
        <ul>
            <li :key="key" v-for="(list, key) in lists">
                <!-- Excerpt section -->
                <div class="mb-1 gray-bg" v-show="!list.Flag">
                    <p class="mb-1">{{list.about | summary }}</p>
                    <p class="btn" @click="toggler(list, true);">Show More</p>
                </div>
                <!-- Excerpt section end -->

                <!-- Content section -->
                <div class="mb-1 gray-bg" v-show="list.Flag">
                    <p class="mb-1" v-html="list.about"></p>
                    <p class="btn" @click="toggler(list, false);">Show Less</p>
                </div>
                <!-- Content section end-->
            </li>
        </ul>
    </div>
</div>
<script>
    var app = new Vue({
                data: function(){
                    return {
                        title: "Dynamic List Show More & Less Feature Using VueJS",
                        lists: [
                            {
                                "about": "Velit adipisicing quis mollit consequat ullamco veniam ipsum in laborum excepteur veniam nostrud qui amet. Quis ipsum nostrud reprehenderit consectetur consectetur consequat id. Ipsum nostrud magna aliquip nisi ea nisi Lorem ut cillum nisi eiusmod tempor. Aute incididunt commodo ea deserunt in quis esse eiusmod voluptate nisi veniam anim.\r\n<br/>Esse eiusmod veniam sunt reprehenderit magna in. Eu officia sunt laborum qui irure ex ad excepteur ea duis quis esse sint occaecat. Laborum ut et dolor labore. Exercitation Lorem culpa quis sint sint exercitation elit ea aute culpa ex. Dolore Lorem consequat dolore consequat reprehenderit voluptate officia pariatur qui dolor ut Lorem labore quis. Sint proident id consequat cupidatat nostrud. Dolore sit labore reprehenderit sit cupidatat voluptate laboris incididunt.\r\n<br/>Qui amet consectetur anim proident dolore nisi dolore. Veniam dolore fugiat deserunt proident officia dolor in tempor ut nulla dolore elit ea labore. Ut anim esse do reprehenderit adipisicing. Et in Lorem incididunt nostrud et. Cillum quis enim nisi ad cillum.\r\n<br/>"
                            },
                            {
                                "about": "Officia veniam Lorem labore eu sint do anim pariatur cupidatat officia fugiat aliqua sunt culpa. Nulla aute voluptate aliquip ea Lorem. Anim laboris dolor velit culpa eu deserunt qui sunt eu in aute. Ut voluptate anim labore in eiusmod aliquip do ea id magna et do et.\r\n<br/>Excepteur sunt eiusmod cillum laboris aliqua elit commodo. Ut anim duis laboris pariatur laborum esse ad aute culpa consequat est occaecat eiusmod qui. Aute sunt laboris officia consectetur nostrud mollit dolore incididunt id. Qui duis elit deserunt culpa ut labore id esse. Laboris veniam duis commodo dolor sit ex id ut occaecat. Aliquip exercitation culpa veniam voluptate occaecat adipisicing ullamco voluptate culpa et dolor fugiat ut aliqua. Sunt id commodo id ut dolore magna non dolor cupidatat anim laboris nulla.\r\n<br/>Nulla aliqua laboris velit eu ex ullamco irure labore id et aliqua. Eiusmod aliqua minim incididunt adipisicing do cillum velit quis non ut voluptate sint velit culpa. Qui cillum tempor excepteur Lorem tempor occaecat laborum magna magna pariatur labore amet est. Eu nulla enim Lorem ex est adipisicing elit velit cupidatat amet do reprehenderit aliquip. Cupidatat magna excepteur laboris officia exercitation anim Lorem tempor. Occaecat ex pariatur aliqua enim.\r\n<br/>"
                            }
                            ]
                    }
                },
                filters: {
                    summary: function(text) {
                        return text.substring(0, 150)+' ...';
                    }
                },
                methods:{
                    toggler(obj, flag){
                        this.$set(obj, 'Flag', flag);
                    }
                }
            });
    app.$mount("#app");        
</script>

I have added CDN link of Vue.js v2.6.11, next created VueJS app by instantiating Vue. Using v-for directive listed the array of Objects. Where each item will have two section. 

1. Section one – excerpt data with show more button
2. Section two – large data with show less button

At a time either one of the section is visible by dynamic Flag attribute on each item. I made this dynamic Flag attribute is a reactive one using $set method. So whenever user clicks on either show more/less button, the toggler method triggered that will either true/false value to display more/less content based on the Flag value. 

By default less content is displayed using v-show directive, where v-show directive checks

v-show="!list.Flag"

Initially Flag property on list object is undefined. Show !list.Flag becomes true, so less content automatically visible by default.

Please leave comment, If you guys have any doubts.

1. Simple Add Show More & Less feature using VueJS
2. Dynamic List Show More & Less Feature Using VueJS

Step 1:

Create index.html file and add the following scripts in it.

<script src="https://unpkg.com/vue"></script>
<div id="app">
    <h1 class="title">{{title}}</h1>
    <div>
        <div class="mb-1 gray-bg" v-show="!showFlag">
            <p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p class="btn" @click="showFlag=true;">Show More</p>
        </div>

        <div class="mb-1 gray-bg" v-show="showFlag">
            <p class="mb-1">Velit adipisicing quis mollit consequat ullamco veniam ipsum in laborum excepteur veniam nostrud qui amet. Quis ipsum nostrud reprehenderit consectetur consectetur consequat id. Ipsum nostrud magna aliquip nisi ea nisi Lorem ut cillum nisi eiusmod tempor. Aute incididunt commodo ea deserunt in quis esse eiusmod voluptate nisi veniam anim.<br/><br/>Esse eiusmod veniam sunt reprehenderit magna in. Eu officia sunt laborum qui irure ex ad excepteur ea duis quis esse sint occaecat. Laborum ut et dolor labore. Exercitation Lorem culpa quis sint sint exercitation elit ea aute culpa ex. Dolore Lorem consequat dolore consequat reprehenderit voluptate officia pariatur qui dolor ut Lorem labore quis. Sint proident id consequat cupidatat nostrud. Dolore sit labore reprehenderit sit cupidatat voluptate laboris incididunt.<br/> <br/>Qui amet consectetur anim proident dolore nisi dolore. Veniam dolore fugiat deserunt proident officia dolor in tempor ut nulla dolore elit ea labore. Ut anim esse do reprehenderit adipisicing. Et in Lorem incididunt nostrud et. Cillum quis enim nisi ad cillum.<br/></p>
            <p class="btn" @click="showFlag=false;">Show Less</p>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
                data: function(){
                    return {
                        title: "Simple Show More & Less Feature Using VueJS",
                        showFlag: false,
                    }
                }
            });
    app.$mount("#app");        
</script>

Where I declared showFlag variable, which will help us to track show more & less status. By default less text and Show more button will show. When user clicks on Show more button showFlag set to true.

Now using v-show directive, we will show more text section with show less button. Meanwhile show less text section with show more button will get hidden. When user clicks on show less button showFlag set to false. Now v-show directive will hide more text section & show less text section.

Please leave comment, If you guys have any doubts.

There are many services available online to create wedding invitations online, but creating something impressive takes time and effort.

If you have all the time in the world you can just craft one perfectly yourself, else you need assistance.

Everyone sends an invitation to mobile devices nowadays. Mobile device has evolved so much in recent years, but do you think e-invitations evolved?

All invitations you receive are usually an image or link in Whatsapp. If it’s an image it contains details written in the text which are hard to read.
If its link, it’s is usually large to remember.

How about having an invitation like JackWedsRose.com? Wouldn’t it be easy?

Don’t you think it will be unique?

But who has the time to do all the work involved? Services like eWeddingInvite.com come as a rescue for you who needs to do something unique.

They collect only a few details to make a complete wedding website & a unique online wedding invitation for you in minutes.

Yes, it’s possible.

We know people are so terrible at remembering the dates, that’s why they have smartphones. So let us send them smart invitations

How an invitation can be smart?

First, it can be smart enough to sit just in the device home screen without the need for any installation.

Now when your invitee opens it, it opens your invitation with a quick access menu at the bottom.

It has Add to Calendar button, remember it’s a smartphone with built-in calendar and maps.

He can just add the event to the calendar and their device takes care of reminding him of the event a day before the event.

Now he gets a reminder about your event & he decides to drive to your event venue, he has your invite saved on his home screen, he can just open it and click “Get Directions”

It will get him the driving directions to the venue in his maps application.

Also your invitee can just RSVP to let you know that he isn’t coming.

Don’t you think it’s smart? It saves you & your invitees a lot of time. It’s convenience.

Now imagine you sent a traditional printed invitation or an image that has the venue details.

It’s a human tendency to forget the date & even if remembered, he has to search for the venue or to give you a call for the directions. All these hassles are taken away when you send a smart invitation.

How easy it is to create such a unique wedding invitation?

These are the minimum details that are required to build an awesome invitation for you.

Now it’s time to do something even more.

You see you just build a brand online with a unique name like JackWedsRose.com. Let’s use it to spread your love story.

1. Attach Pre & Post Wedding Photoshoots

Attach pictures to your invite (wedding website now), so that it tells a story of your love to the world. After the wedding, it becomes a wedding picture gallery for every one of your guests. Update your pictures any number of times in a year. Upload up to 500 pictures from any device. It works even on a smart TV.

2. Write your love story in words

We believe you have a fantastic story to tell the world about your journey together till the wedding, express yourself in your own words. The world wants to hear.

3. Attach your favorite videos

The adventure you did together recorded on your vacation? Attach the video to the invitation (or) attach any of your favorite video together (or) Just record a video from your phone camera & speak to your guests. It plays to everyone from within invitation in full screen.

4. Attach the YouTube live stream of the event.

Not every one of the loved ones can attend the event in person. If you are one of the few people who host it online, just attach it to your invite.

Get Invitation QR code.

It’ time to make it even easier for people who see your invitation online.

Scanning this QR code on mobile makes your name to display on the mobile screen such as JackWedsRose.com

Did we say that the invitation works in all devices that have a browser? It even works on a smart TV.

Create Invitation Now →

It’s free, You don’t need to give your email/phone to use our services ever. You can just choose to be anonymous.

You’ll get an invite key once your invitation is made which can be used to login (or) A unique link is assigned to your account which can be bookmarked to your device home screen for easy access.

Built using following tools and libraries

1. jQuery
2. jQuery UI
3. Laravel

Integrate jQuery Autocomplete With Laravel Using Ajax MySQL in 5 Minutes:

I have started with fresh installation of Laravel framework. And download required dependencies jQuery, jQuery UI, and put it into public js & css folders.

Integrate Multi Textfield jQuery Autocomplete With Laravel Using Ajax & MySQL in 5 Minutes:

I have created two pages in CodeIgniter application.

Integrate jQuery UI Autocomplete with CodeIgniter Using jQuery, Ajax & MySQL:

I have started with fresh installation of CodeIgniter framework. And download required dependencies jQuery, jQuery UI, and put it into assets folder.

Next created Employees Controller, and added three pages in it. Also created views for the three page inside views and employees folder. Finally added Empoyee form in single.ctp file. Next selected employee_id text field and initialized jQuery autocomplete.

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 offset-md-3">
            <h1>Simple jQuery Autocomplete in CodeIgniter</h1>
            <form> 
                <div class="form-group">
                    <label for="employee_id">Employee ID</label>
                    <input type="text" class="form-control" name="employee_id" id="employee_id" aria-describedby="employee_id" placeholder="Enter Employee ID">
                </div>
                <div class="form-group">
                    <label for="first_name">First Name</label>
                    <input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
                </div>
                <div class="form-group">
                    <label for="last_name">Last Name</label>
                    <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Last Name">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" name="email" id="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="designation">Designation</label>
                    <input type="text" class="form-control" name="designation" id="designation" placeholder="Designation">
                </div>
                <div class="form-group">
                    <label for="department">Department</label>
                    <input type="text" class="form-control" name="department" id="department" placeholder="Department">
                </div>
                <button class="btn btn-success btn-block">Submit</button>
            </form>
        </div>
    </div>
</div>

<!-- Our Custom JS Script - Keep Last -->
<script src="<?php echo base_url('assets/js/app.js'); ?>"></script>

$(document).ready(function(){
    var basePath = $("#base_path").val();
    $("#employee_id").autocomplete({
        source: function(request, cb){
            console.log(request);
            
            $.ajax({
                url: basePath+'get-employess/'+request.term,
                method: 'GET',
                dataType: 'json',
                success: function(res){
                    var result;
                    result = [
                        {
                            label: 'There is no matching record found for '+request.term,
                            value: ''
                        }
                    ];

                    console.log("Before format", res);
                    

                    if (res.length) {
                        result = $.map(res, function(obj){
                            return {
                                label: obj.id,
                                value: obj.id,
                                data : obj
                            };
                        });
                    }

                    console.log("formatted response", result);
                    cb(result);
                }
            });
        },
        select: function( event, selectedData ) {
            console.log(selectedData);

            if (selectedData && selectedData.item && selectedData.item.data){
                var data = selectedData.item.data;

                $('#first_name').val(data.first_name);
                $('#last_name').val(data.last_name);
                $('#email').val(data.email);
                $('#designation').val(data.designationsName);
                $('#department').val(data.deptName);
            }
            
        }  
    });  
});

Integrate Multi Textfield Autocomplete with CodeIgniter Using Ajax & MySQL in 5 Minutes:

STEP 1: INSTALL CAKEPHP 3 USING COMPOSER

All modern PHP framework uses Composer to install dependent packages. So please install Composer using below tutorial in your respective Operating system.

Once you have success installed Composer successfully, Next install CakePHP 3 using Composer using following command.

composer create-project --prefer-dist cakephp/app PROJECT-NAME

STEP 2: Create CakePHP 3 Custom Layout, Pages & Adding Routing

To create custom layout design in CakePHP 3, Go to src/Template/Layout folder then add new .ctp file in it. Now Copy & paste the content default.ctp and do the necessary changes as per your need.
Next in order to use the custom layout specify custom layout name inside Controller method name like this.

<?php

namespace App\Controller;

use App\Controller\AppController;
use Cake\Datasource\ConnectionManager;
/**
 * EmployeesController
 */
class EmployeesController extends AppController
{
    /**
     * Index
     */
    public function index()
    {
        $this->viewBuilder()->layout('app');
    }
}

STEP 3: Integrate Simple jQuery UI Autocomplete With CakePHP 3

Next I have addded the bootstrap form to the single.ctp file. Also create single.js in webroot/js folder. Next included single.js file in single.ctp file.

<div class="row">
    <div class="col-sm-12 col-md-6 offset-md-3">
        <h1>Simple jQuery Autocomplete in CodeIgniter</h1>
        <form> 
            <div class="form-group">
                <label for="employee_id">Employee ID</label>
                <input type="text" class="form-control" id="employee_id" aria-describedby="employee_id" placeholder="Enter Employee ID">
            </div>
            <div class="form-group">
                <label for="first_name">First Name</label>
                <input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
            </div>
            <div class="form-group">
                <label for="last_name">Last Name</label>
                <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Last Name">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" name="email" id="email" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="designation">Designation</label>
                <input type="text" class="form-control" name="designation" id="designation" placeholder="Designation">
            </div>
            <div class="form-group">
                <label for="department">Department</label>
                <input type="text" class="form-control" name="department" id="department" placeholder="Department">
            </div>
            <button class="btn btn-success btn-block">Submit</button>
        </form>
    </div>
</div>
<?= $this->Html->script(['single']) ?>

STEP 4: Integrate Multi Textfield jQuery UI Autocomplete with CakePHP 3 via Ajax

STEP 5: Integrate Multi Textfield jQuery UI Autocomplete with CakePHP 3 via Ajax

It’s not good practice to keep Database related queries in CakePHP controller itself. So I have created models using Cake Bake Code generation command line tool.

Next I have moved all the SQL queries in the controller to Models.

Step 1: Design Responsive Contact Form & Send email using PHP mail function:

In this video tutorial we are going to design a simple responsive HMTL5 contact form using bootstrap 4. Then sending mail using php mail() function.

Step 2: Why you not send an Email using PHP mail function:

In this video tutorial I am going to explain why you not to use PHP mail function directly to send email. Also I will cover advantages and disadvantages of PHP mail function. Finally I will cover other solutions for sending email.

Step 3: Send an Email using PHPMailer without Composer

In this video tutorial we are going to see how send an email using PHPMailer without Composer. Here we will download PHPMailer plugin from Github and use it without using PHPMailer.

Step 4: Send an Email using PHPMailer (PHP) with Composer

In this video tutorial I am going to explain installation of PHPMailer plugin using Composer. Also I will cover the advantages of using Composer in PHP development.

Step 5: Send an Email with attachment using PHPMailer (PHP)

In this video tutorial I am going to explain how to send an email with attachment using PHPMailer.

Step 6: Send Email with Multiple attachment using PHPMailer (PHP)

In this video tutorial I am going to explain how to send an email with Multiple attachment using PHPMailer.

Step 7: How to add jQuery Form Validation to HTML5 Contact Form

In this video tutorial I am going to explain How to add jQuery Form Validation to HTML5 Contact Form we designed in previous tutorial.

Step 8: How to Submit HTML5 Contact Form Via Ajax using jQuery Form Plugin

In this video tutorial I am going to explain How to Submit HTML5 Contact Form Via Ajax using jQuery Form Plugin.

Step 9: How to Send an Email from localhost using PHPMailer (PHP)

In this video tutorial I am going to explain How to Send an Email from localhost using PHPMailer SMTP.

Built using following tools and libraries

1. NPM (Latest stable release of NodeJS)
2. Webpack
3. jQuery
4. Chartist.JS

If you have designed your MySQL database design properly with all Foreign key constraint. Then it’s very to generate code for whole application in 2 minutes using CakePHP Bake Command line tool. In this tutorial I am going to use following database design

Prerequisites

1. Composer (Dependency Manager for PHP)
2. Basic Knowledge Of CakePHP
3. Knowledge in MySQL
4. Command Line

Create MySQL Database and Fill/Seed Dummy Data Using PHP DB Seeder Plugin:

Please create new MySQL Database “cake_cms” in your MySQL server. Then please follow the below tutorial, where I have explained how to create tables and populate dummy data in those tables using PHP DB seeder plugin.

Install CakePHP 3.6 Using Composer

All modern PHP framework uses Composer to install dependent packages. So please install Composer using below tutorial in your respective Operating system.

Once you have installed Composer successfully, then open your Terminal (Command line tool) and run following Composer command from your server root folder.

composer create-project --prefer-dist cakephp/app YOUR-PROJECT-NAME

— Note: In the above command replace YOUR-PROJECT-NAME with your project name.

This will download all necessary PHP packages and create CakePHP application in your server root folder (www/htdocs).

Create .env file from .env.default file in config folder:

Next copy `config/.env.default to `config/.env` and keep all your application configurations.

export APP_NAME="Cake CMS in 2 Minutes"
export DEBUG="true"
export APP_ENCODING="UTF-8"
export APP_DEFAULT_LOCALE="en_US"
export APP_DEFAULT_TIMEZONE="UTC"
export SECURITY_SALT="761b5ae3729c9ee45fb6ccc02d8fe61b2a6e9981c8499aac2384a424ec45d5cb"


#DATABASE
export DATABASE_NAME = "cake_cms"
export DATABASE_USER = "root"
export DATABASE_PASSWORD = "mysql"
export DATABASE_HOST = "localhost"

Load .env file Using bootstrap.php:

Next open your bootstrap.php file in config folder, and uncomment following lines (line no: 52) of code to load environment configuration (.env file) to your applications.

/**
 * Uncomment block of code below if you want to use `.env` file during development.
 * You should copy `config/.env.default to `config/.env` and set/modify the
 * variables as required.
 */
if (!env('APP_NAME') && file_exists(CONFIG . '.env')) {
    $dotenv = new \josegonzalez\Dotenv\Loader([CONFIG . '.env']);
    $dotenv->parse()
        ->putenv()
        ->toEnv()
        ->toServer();
}

Connect MySQL Database Using Configuration loaded from .env config file:

Now you can get the configuration your defined in .env file in your application using env() function. Where env(‘CONFIG_NAME’, ‘default_value’) accepts two parameter

– One is config variable name you defined in the .env file
– other is default value if config variable is not defined in that name.

Now I am changing MySQL connection configuration app.php file in the config folder to use configuration defined in .env file.

'Datasources' => [
        'default' => [
            'className' => 'Cake\Database\Connection',
            'driver' => 'Cake\Database\Driver\Mysql',
            'persistent' => false,
            'host' => env('DATABASE_HOST', 'localhost'),
            /**
             * CakePHP will use the default DB port based on the driver selected
             * MySQL on MAMP uses port 8889, MAMP users will want to uncomment
             * the following line and set the port accordingly
             */
            //'port' => 'non_standard_port_number',
            'username' => env('DATABASE_USER', 'localhost'),
            'password' => env('DATABASE_PASSWORD', ''),
            'database' => env('DATABASE_NAME', 'cake_cms'),
            'encoding' => 'utf8',
            'timezone' => 'UTC',
            'flags' => [],
            'cacheMetadata' => true,
            'log' => false,

            /**
             * Set identifier quoting to true if you are using reserved words or
             * special characters in your table or column names. Enabling this
             * setting will result in queries built using the Query Builder having
             * identifiers quoted when creating SQL. It should be noted that this
             * decreases performance because each query needs to be traversed and
             * manipulated before being executed.
             */
            'quoteIdentifiers' => false,

            /**
             * During development, if using MySQL < 5.6, uncommenting the
             * following line could boost the speed at which schema metadata is
             * fetched from the database. It can also be set directly with the
             * mysql configuration directive 'innodb_stats_on_metadata = 0'
             * which is the recommended value in production environments
             */
            //'init' => ['SET GLOBAL innodb_stats_on_metadata = 0'],

            'url' => env('DATABASE_URL', null),
        ],

        /**
         * The test connection is used during the test suite.
         */
        'test' => [
            'className' => 'Cake\Database\Connection',
            'driver' => 'Cake\Database\Driver\Mysql',
            'persistent' => false,
            'host' => 'localhost',
            //'port' => 'non_standard_port_number',
            'username' => 'my_app',
            'password' => 'secret',
            'database' => 'test_myapp',
            'encoding' => 'utf8',
            'timezone' => 'UTC',
            'cacheMetadata' => true,
            'quoteIdentifiers' => false,
            'log' => false,
            //'init' => ['SET GLOBAL innodb_stats_on_metadata = 0'],
            'url' => env('DATABASE_TEST_URL', null),
        ],
    ],

Code Generation with Bake Command Line Tool:

Now open command line and go to your project bin folder, and run the following commands to generate scripts automatically using CakePHP Bake Command line tool.

cd C:\XAMPP\htdocs\cake-cms\bin

Next run the following commands to generate scripts automatically.

cake bake all articles
cake bake all articles_tags
cake bake all tags
cake bake all users

In MacOS you run this command like this.

./cake bake all articles
./cake bake all articles_tags
./cake bake all tags
./cake bake all users