SmartTutorials.net https://smarttutorials.net Tutorials on Javascript, VueJS, NodeJS, PHP, CakePHP, jQuery, Angular, MySQL Tue, 30 Jul 2019 03:30:57 +0000 en-US hourly 1 Integrate jQuery Autocomplete With Ajax Call in Laravel, MySQL in 5 Minutes https://smarttutorials.net/integrate-jquery-autocomplete-with-ajax-call-in-laravel-mysql-in-5-minutes/ Mon, 04 Feb 2019 04:01:33 +0000 https://smarttutorials.net/?p=20008 Read More >>>>]]> In this tutorial we are going to integrate simple and multi textfield autocomplete. I have created video tutorials for integration of jQuery autocomplete with Laravel, where I gave step by step instruction to integrate jQuery UI autocomplete with Laravel. Please follow watch and know more about jQuery UI autocomplete as well integration of jQuery autocomplete with Laravel.

Integrate jQuery Autocomplete With Ajax Call in Laravel, MySQL in 5 Minutes

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:

]]>
Integrate jQuery Simple & Multi Textfield Autocomplete With CodeIgniter in 5 Minutes https://smarttutorials.net/integrate-jquery-simple-multi-textfield-autocomplete-with-codeigniter-in-5-minutes/ Tue, 29 Jan 2019 05:56:27 +0000 https://smarttutorials.net/?p=19969 Read More >>>>]]> In this tutorial we are going to integrate jQuery UI Autocomplete with CodeIgniter Framework using jQuery, Ajax and MySQL Database. I will start with scratch and go over advanced concepts of jQuery Autocomplete installation.

I have created two pages in CodeIgniter application.

  1. Simple jQuery Autocomplete search Integration with CodeIgniter using jQuery, Ajax and MySQL Database
  2. Multi textfield jQuery Autocomplete search Integration with CodeIgniter using jQuery, Ajax and MySQL Database.

 

 

how-to-integrate-jquery-autocomplete-with-codeigniter-php-mysql-ajax

 

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:

]]>
How to Integrate Simple & Multi Textfield jQuery UI autocomplete with Cakephp 3 Via Ajax https://smarttutorials.net/how-to-integrate-simple-multi-textfield-jquery-ui-autocomplete-with-cakephp-3-via-ajax/ Wed, 23 Jan 2019 17:27:01 +0000 https://smarttutorials.net/?p=19942 Read More >>>>]]> In this series of video tutorial I am going to cover integration jQuery UI autocomplete with CakePHP 3 from scratch.

 

 

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.

]]>
Send Email with Attachment Using PHP, jQuery, PHPMailer & Ajax from Scratch to Advanced https://smarttutorials.net/send-email-with-attachment-using-php-jquery-phpmailer-ajax-from-scratch-to-advanced/ Wed, 09 Jan 2019 06:24:28 +0000 https://smarttutorials.net/?p=19885 Read More >>>>]]> This is series video tutorial on how to Send Email with Attachment Using PHP, jQuery, PHPMailer & Ajax from Scratch to Advanced. It’s start with designing simple responsive contact form and sending mail using php mail function, then go over explaining about advanced concepts of sending email with attachment. Please follow each video tutorial to know about sending email with attachment.

Send Email with Attachment Using PHP, jQuery, PHPMailer & Ajax from Scratch to Advanced

 

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.

]]>
Responsive Expense Manager HTML5 CSS3 Template Using Bootstrap 4 https://smarttutorials.net/responsive-expense-manager-html5-css3-template-using-bootstrap-4/ Wed, 26 Sep 2018 17:07:56 +0000 https://smarttutorials.net/?p=19839 Read More >>>>]]> Responsive Expense Manager HTML5, CSS3 Template Using Bootstrap 4 jQuery
This responsive expense manager html5, css3 template are built using bootstrap 4. You can use this admin panel for other web application admin panel. It has responsive sidebar navigation for different resolution.

 

 

Built using following tools and libraries

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

 

  

Instructions for Download & Customization of Template:

Step 1:

Download this free responsive expense manager admin template. Downloaded folder contains dist folder. This dist folder contains final generated html5, css3 and JS files.

If you want to do customize this admin template, then follow below instructions to customize and generate build.

Step 2:

This free admin template are built using webpack build system. So it requires NodeJS must installed in your system.

So please install latest stable release of NodeJS using Node Version Manager (NVM). Please follow this Video tutorial on how to install NodeJS in Mac/Ubuntu/Windows Using NVM, if you not installed NodeJS already using NVM. Because Node Version manager helps us to easily manage NodeJS version.

Step 3:
Unzip the downloaded bootstrap responsive admin template. Next open your command terminal and go to the template folder.

Next install necessary node packages using following node commands.

npm install

Step 4:

Next run the following command development server in your local.

npm start

It will automatically open the your index.html file in your default web browser. Now edit and see live changes in browser.

Step 4:
To generate final build, then run the following command.

npm run prod

It will generate final build and put it in dist folder

]]>
Create Production Ready CRUD Application In 2 Minutes Using CakePHP 3.6 https://smarttutorials.net/create-production-ready-crud-application-in-2-minutes-using-cakephp-3-6/ Wed, 19 Sep 2018 06:54:09 +0000 https://smarttutorials.net/?p=19790 Read More >>>>]]> Create Production Ready CRUD Application In 2 Minutes Using CakePHP 3.6
In this tutorial we are going to see how to create Production ready application in Just 2 Minutes using CakePHP 3.6. We are going create entire Blog Application in 2 Minutes Using CakePHP Bake Code generation command line tool.

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

how-to-seed-mysql-db-design-php

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.

How to seed/populate MySQL database with dummy/test data Using PHP DB Seeder

Note: This tutorial has SQL query to create tables

Installation Instructions:

  1. Download and extract CakePHP application.
  2. Open your terminal and go the extracted CakePHP application, Just run the following command to install necessary PHP packages.

     composer install 

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
]]>
How to Create jVectorMap In ReactJs Using create-react-app Cli, jQuery https://smarttutorials.net/how-to-integrate-jvectormap-with-reactjs-using-create-react-app-cli-jquery/ Wed, 12 Sep 2018 05:09:46 +0000 https://smarttutorials.net/?p=19762 Read More >>>>]]>

In this tutorial we are going to see How to create jVectorMap in ReactJs Using create-react-app cli, jQuery. Please follow this step by step instructions to Integrate jVectorMap With your React application.

Prerequisites

  1. NPM (Latest stable release of NodeJS)
  2. Facebook create-reacta-app Cli
  3. jQuery
  4. jVectorMap
  5. Map JS Files (It contains SVG path, latitude and longitude informatio to draw a map)

 

 

Create React Application Using create-react-app CLI:

First create and start React application and using create-reacta-app cli by running following commands in your local project folder.

npx create-react-app YOUR-PROJECT-NAME
cd YOUR-PROJECT-NAME
npm start

create-react-app requires NodeJS need to be installed in your system. So please install latest stable release of NodeJS using Node Version Manager (NVM). Please follow this Video tutorial on how to install NodeJS in Mac/Ubuntu/Windows Using NVM, if you not installed NodeJS already using NVM. Because Node Version manager helps us to easily manage NodeJS version.

Install react-router-dom to Add Routing:

Next Install react-router-dom using NPM.

 npm install react-router-dom --save 

Where – –save add the react-router-dom in project dependency in package.json file.

Create Multiple Pages and Add Routing Using react-router-dom in React App:

Next create ‘pages’ directory in src folder, Now add required pages (Africa.js, Asia.js, Europe.js, NorthAmerica.js, SouthAmerica.js and World.js ) in Single page React Application.

Next import HashRouter or BrowserRouter from react-router-dom in index.js file, and inform React Application by keeping entire tag inside the tage that’s we are going use Routing like this.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import './styles/css/style.css';

//import {BrowserRouter as Router} from 'react-router-dom';
import {HashRouter as Router} from 'react-router-dom';

ReactDOM.render(
    <Router>
        <App />
    </Router>
    , 
    document.getElementById('root')
);

Now add routing in App.js file by importing all the pages.

import React, { Component } from 'react';

import {Route, Switch} from 'react-router-dom';

import World from './pages/World';
import Africa from './pages/Africa';
import Asia from './pages/Asia';
import Europe from './pages/Europe';
import NorthAmerica from './pages/NorthAmerica';
import SouthAmerica from './pages/SouthAmerica';

import TopNavBar from './components/TopNavBar';
import Navbar from './components/Navbar';


class App extends Component {
  render() {
    return (
      <div className="App">
        <TopNavBar/>
        <div className="container mt-nav">
          <Navbar/>
          <Switch>
            <Route path="/africa" component={Africa}/>
            <Route path="/asia" component={Asia}/>
            <Route path="/europe" component={Europe}/>
            <Route path="/north-america" component={NorthAmerica} />
            <Route path="/south-america" component={SouthAmerica}/>
            <Route path="/" component={World}/>
          </Switch>
        </div>

        
      </div>
    );
  }
}

export default App;

Install jQuery and jVectorMap Using NPM:

Now install jQuery and jVectorMap using Node Package Manager (NPM). So run following command in your terminal from your React project root folder.

npm install jquery jvectormap --save

Import jQuery, jVectorMap and Map Files in React Pages and Initialize jVectorMap:

Next import jQuery, jVectorMap and Map Files on top of React Pages. Then Add map container <div>, also create a drawMap function which will be called after HTML has been appended to the DOM .i.e componentDidMount event. In the drawMap function initialize jVectorMap.


import React, {Component} from  'react';

const jQuery = require( 'jquery' );
const $ = jQuery;
window.jQuery = jQuery;
require('jvectormap');
require('../lib/jquery-jvectormap-world-mill');

class World extends Component{
    drawMap(){
        $('#world-map').vectorMap({
            map: 'world_mill'
        });    
    }
    componentDidMount() {
        this.drawMap();
    }
    render(){
        return (
            <div className="map-container">
                <div id="world-map" className="jvmap-smart"></div>
            </div>
        );
    }
}

export default World;

Include jVectorMap CSS in index.html file or Import in your SCSS file:

In this project I am using SCSS, So I have imported jVectorMap CSS in style.scss file like this.

// jVectorMap
@import "../../../node_modules/jvectormap/jquery-jvectormap"; 
]]>
How to Integrate jVectorMap With VueJs Using VueCli, jQuery https://smarttutorials.net/how-to-integrate-jvectormap-with-vuejs-using-vuecli-jquery/ Tue, 11 Sep 2018 00:32:05 +0000 https://smarttutorials.net/?p=19733 Read More >>>>]]> How to Integrate jVectorMap With VueJs Using VueCli, jQuery

In this tutorial we are going to see How to Integrate jVectorMap With VueJs Using VueCli, jQuery. Please follow this step by step instructions to Integrate jVectorMap With your VueJs application.

Prerequisites

  1. Vue Cli (To create VueJS application)
  2. jQuery
  3. jVectorMap
  4. Map JS Files (It contains SVG path, latitude and longitude informatio to draw a map)

 

 

Note: Guys who know already how create an single page VueJS application with VueCli, then follow this compact version of video tutorial. Integrate jVectorMap With VueJS Using VueCli and jQuery in 2 Minutes

Create VueJS Application Using VueCli

First Create Single Page VueJS Application Using VueCli command line interface.

  1. VueCli requires NodeJS need to be installed in your system. So please install latest stable release of NodeJS using Node Version Manager (NVM). Please follow this Video tutorial on how to install NodeJS in Mac/Ubuntu/Windows Using NVM, if you not installed NodeJS already using NVM. Because Node Version manager helps us to easily manage NodeJS version.

  2. Next install Vue Cli globally using NPM, If you have not installed already.
    npm install -g @vue/cli
    

Please go to your project root folder and open your terminal, then type following VueCli command to create VueJs application.

vue create YOUR-PROJECT-NAME

Where YOUR-PROJECT-NAME – replace with your project name like i.e.vue-jvectormap

Create Multiple Pages and Add Routing Using Vue Router:

Now Create new folder named pages in src folder. Next create Six pages names Africa.vue, Asia.vue, Europe.vue, NorthAmerica.vue, SouthAmerica.vue and World.vue in pages folder.

Next import those pages in your router.js file to add routing.


import Vue from 'vue'
import Router from 'vue-router'
import World from './pages/World.vue';
import Africa from './pages/Africa.vue';
import Asia from './pages/Asia.vue';
import Europe from './pages/Europe.vue';
import NorthAmerica from './pages/NorthAmerica.vue';
import SouthAmerica from './pages/SouthAmerica.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'world-map',
      component: World
    },
    {
      path: '/africa',
      name: 'africa',
      component: Africa
    },
    {
      path: '/asia',
      name: 'asia',
      component: Asia
    },
    {
      path: '/europe',
      name: 'europe',
      component: Europe
    },
    {
      path: '/north-america',
      name: 'NorthAmerica',
      component: NorthAmerica
    },
    {
      path: '/south-america',
      name: 'SouthAmerica',
      component: SouthAmerica
    },
  ]
})

Install jQuery and jVectorMap Using NPM:

Now install jQuery and jVectorMap using Node Package Manager (NPM). So run following command in your terminal from your VueJS project root folder.

npm install jquery jvectormap --save

Import jQuery, jVectorMap and Map Files in Each Vue Pages:

Next import jQuery, jVectorMap and Map Files on top of each Vue Pages created.


<script>
window.jQuery = require('jquery');
var $ = window.jQuery;
require('jvectormap');
require('../lib/jquery-jvectormap-world-mill.js');

export default {
   
}
</script>

Initialize jVectorMap in VueJS Application:

Next add jVectorMap container DIV in each VueJS page.


<template>
    <div class="map-container">
        <div id="world-map" class="jvmap-smart"></div>
    </div>
</template>

Finally create drawMap() method to initialize jVectorMap, which will be called on once pages has been mounted to the DOM.


<script>
window.jQuery = require('jquery');
var $ = window.jQuery;
require('jvectormap');

require('../lib/jquery-jvectormap-world-mill.js');

export default {
    mounted(){
        this.drawMap();
    },
    methods:{
        drawMap(){
            $('#world-map').vectorMap({
                map: 'world_mill'
            });
        }
    }
}
</script>
]]>
Learn jQuery Autocomplete in 3 Minutes https://smarttutorials.net/learn-jquery-autocomplete-in-3-minutes/ Sun, 09 Sep 2018 06:30:54 +0000 https://smarttutorials.net/?p=19697 Read More >>>>]]> jQuery Autocomplete Ajax, Json, PHP, MySQL Database

This is series video tutorial on jQuery autocomplete, Where i am explaining basics of jQuery UI autocomplete with static JSON in 3 minutes. Then slowly explaining each features of jQuery autocomplete. In second tutorial I am explaining how to replace the static JSON with dynamic JSON data that we get from PHP, Ajax and MySQL database. So please watch from the video one to end to be master in jQuery UI autocomplete.

Learn jQuery Autocomplete in 3 Minutes

 

 

jQuery Autocomplete with Dynamic JSON Data Using Ajax, PHP & MySQL

In this video tutorial I will cover How to cover replace static JSON data with Dynamic JSON data. Also I will cover creating database and writing PHP scripts to get the data from MySQL database.

Please check this tutorial jQuery Autocomplete Search using PHP, MySQL and Ajax to create MySQL database and for download link.

 

jQuery Autocomplete No Records Found

In this video tutorial I will cover how to show No matching records found indication to the user, when search criteria doesn’t match in jQuery autocomplete.

Dynamically Add and Remove Table Rows Using jQuery

In this video tutorial I will cover how to add and remove table rows of textboxs dynamically using jQuery.

 

 

jQuery Multiple Fields(Textbox) Autocomplete with Multiple values:

In this video tutorial I will cover how to add jQuery Multiple Fields Autocomplete functionality.

Please check below tutorial for demo and source download link.

 

]]>
Free Responsive ReactJS Admin Template Using Bootstrap 4, HTML5, CSS3, Datatables, jQuery & jVectorMap https://smarttutorials.net/free-responsive-reactjs-admin-template-using-bootstrap-4-html5-css3-datatables-jquery-jvectormap/ Thu, 06 Sep 2018 17:40:12 +0000 https://smarttutorials.net/?p=19650 Read More >>>>]]> Free Responsive ReactJS Admin Template Using Bootstrap 5, HTML5, CSS3, Datatables, jQuery & jVectorMap

This Free Responsive ReactJS admin Template are built using Bootstrap 4, HTML5, CSS3, Datatables, jQuery & jVectorMap. Each one of the technologies integration with React are going explained in separate tutorial. I have already released this free admin template on VueJS and Plain HMTL5, CSS3 Template, Please have a look on it.

Features Overview of React Admin Template

Let you look at the list features this free react admin panel has one by one.

Dashboard:

Dashboard charts are built using CHARTIST.JS, Planning to release tutorial on How to integrate CHARTIST.JS with ReactJS application.

Free Reactjs Admin Dashboard Template Using Boostrap4, HTML5, CSS3

Once you downloaded the Free ReactJS Admin Template follow the below steps to do development or generate build for production.

You must have NodeJS installed in your system. Check this Video tutorial on How to Install NodeJS In Mac/Ubuntu/Windows in 5 Minutes.

ReactJS uses Webpack for build, so need to install webpack and necessary npm packages, before going to do anything.

  1. Extract downloaded React Admin Template
  2. Open your command line terminal and go extracted folder.
  3. Next install required npm packages by running following commands.
    npm install
  4. This React admin template developed using Create React app, So better have latest stable release of NodeJS installed in your system.
  5. To development or customization in template run the following command.
    npm start
  6. To generate production build run the following command.
    npm run build

Check this video tutorial where I explained how to download and customize this React Smart Admin Template

World Map:

The World map are build using jVectorMap. Please check the source for integration jVectorMap with React.

Free ReactJS Admin Template WorldMap Using jVectorMap

Responsive ReactJs Charts Using Chartist.JS:

Free ReactJS responsive Charts are built using Chartist.JS. This charts helps us to show business performance visually to the user.

Free ReactJS Admin Template Charts Using Chartist.JS

Responsive React Form:

This ReactJS responsive form are built using Bootstrap 4. It has different variety of form like normal, horizontal and full page form. Each forms are kept in separate component.

Free React Admin Template Responsive HTML5 Forms

React Responsive Login & Registration:

This React Admin template has responsive Login, Registration & Forget Password page.

Free ReactJS Admin Template Responsive Login Form Using Bootstrap 4 ]]>