Thứ Hai, 31 tháng 10, 2016

Laravel 5 Vue Js Tutorial : How to Install Vue Js & Getting start in laravel 5


Laravel 5 Vue Js Tutorial : Install Vue.Js and Getting Strat to using VueJs in Laravel 5 Project. This lesson will show you how to integration framework javascript vue.js and our laravel 5 project. From vue.js installation, and simple function can be used in Laravel project.

How to Install Vue.js in laravel 5?

Vue does not support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all ECMAScript 5 compliant browsers.

Laravel 5 Vue Js Tutorial : How to Install Vue Js & Getting start in laravel 5

Standalone Method

Simply download and include with a script tag. Vue will be registered as a global variable.
Download Development Version
Download Production Version

NPM Method

NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack or Browserify. Vue also provides accompanying tools for authoring Single File Components.

# latest stable
$ npm install vue

CLI Method

Vue.js provides an official CLI for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds :

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Dev Build

Important: the built files in GitHub's /dist folder are only checked-in during releases. To use Vue from the latest source code on GitHub, you will have to build it yourself!

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

# latest stable
$ bower install vue

AMD Module Loaders

The standalone downloads or versions installed via Bower are wrapped with UMD so they can be used directly as an AMD module.

references : https://vuejs.org/guide/installation.html

Getting Start Using Vue.js in Laravel 5 Example



see you next lessons..

Laravel 5 Vue Js Tutorial : How to Install Vue Js & Getting start in laravel 5


Laravel 5 Vue Js Tutorial : Install Vue.Js and Getting Strat to using VueJs in Laravel 5 Project. This lesson will show you how to integration framework javascript vue.js and our laravel 5 project. From vue.js installation, and simple function can be used in Laravel project.

How to Install Vue.js in laravel 5?

Vue does not support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all ECMAScript 5 compliant browsers.

Laravel 5 Vue Js Tutorial : How to Install Vue Js & Getting start in laravel 5

Standalone Method

Simply download and include with a script tag. Vue will be registered as a global variable.
Download Development Version
Download Production Version

NPM Method

NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack or Browserify. Vue also provides accompanying tools for authoring Single File Components.

# latest stable
$ npm install vue

CLI Method

Vue.js provides an official CLI for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds :

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Dev Build

Important: the built files in GitHub's /dist folder are only checked-in during releases. To use Vue from the latest source code on GitHub, you will have to build it yourself!

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

# latest stable
$ bower install vue

AMD Module Loaders

The standalone downloads or versions installed via Bower are wrapped with UMD so they can be used directly as an AMD module.

references : https://vuejs.org/guide/installation.html

Getting Start Using Vue.js in Laravel 5 Example



see you next lessons..

Thứ Năm, 27 tháng 10, 2016

Laravel 5.3 : Sending an email verification after registering new user in Laravel 5.3


Laravel 5.3 tutorial for beginners - This is New lessons about Laravel 5.3 tutorial that is how er can sending the activation or confirmation email to the new users email address after they're register in our laravel applications.

UPDATED : 
New versions is available here "Email Verification for New User After Registration in Laravel 5.3"

At the previews lessons, we have learn about How to Send Email using Gmail SMTP in laravel 5.3 and VB.NET Simple Application Send Mail SMTPClient gmail.com + Source Code.

Email verification in laravel 5.3

To create simple email verification we will using "jrean" packages, https://packagist.org/packages/jrean/laravel-user-verification.

Create Email Verivication Project

first, following artisan command to create new project in laravel using Composer.

cd c:\server\htdocs
....
composer create-project --prefer-dist laravel/laravel verification

Create Database & Connection

to create database and connection in laravel 5.3, just click link on here How to Connect Database in laravel 5.3.

JREAN PACKAGES INSTALLATION

This project can be installed via Composer. To get the latest version of Laravel User Verification, add the following line to the require block of your composer.json file:

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "type": "project",
    "require": {
        "php": ">=5.6.4",
        "laravel/framework": "5.3.*",
        "jrean/laravel-user-verification": "^3.0"
    },

Next, You'll then need to run composer install or composer update to download the package and have the autoloader updated.

Other method to install "jrean" packages, following this command

composer require jrean/laravel-user-verification

Add the Service Provider & Facade/Alias

Once Larvel User Verification is installed, you need to register the service provider in config/app.php. Make sure to add the following line above the RouteServiceProvider.

....
Jrean\UserVerification\UserVerificationServiceProvider::class,
....

Create Laravel 5 User Authentication

before we add more "jrean" function, we nedd to create authentication to our project, create it following by this command :

php artisan make:auth

Create New Migration

The table representing the user must be updated with two new columns, verified and verification_token. This update will be performed by the migrations included with this package.

It is mandatory that the two columns are on the same table where the user's e-mail is stored. Please make sure you do not already have those fields on your user table.


To run the migrations from this package use the following command :

php artisan migrate --path="/vendor/jrean/laravel-user-verification/src/resources/migrations"

Register the default middleware

To register the default middleware add the following to the $routeMiddleware array within the app/Http/Kernel.php file:

// ........
'isVerified' => Jrean\UserVerification\Middleware\IsVerified::class,

Apply to our routes (routes/web.php)

Route::group(['middleware' => ['web', 'isVerified']], function () {
    //....

Create New Views

If you want to customize the e-mail view, run the following command to publish it and edit it to your needs:

php artisan vendor:publish --provider="Jrean\UserVerification\UserVerificationServiceProvider" --tag="views"

The view will be available in the resources/views/vendor/laravel-user-verification/ directory.

Create New Routes

By default this packages ships with two routes. If you want to change them, you can simply define your own routes.

Route::get('email-verification/error', 'Auth\RegisterController@getVerificationError')->name('email-verification.error');
Route::get('email-verification/check/{token}', 'Auth\RegisterController@getVerification')->name('email-verification.check');

Update Controller (app\Http\Controllers\Auth\RegisterController.php)

  1. Import the VerifiesUsers trait (mandatory)
  2. Overwrite and customize the redirect attributes/properties paths available within the RedirectsUsers trait included by the VerifiesUsers trait. (not mandatory)
  3. Overwrite the contructor (not mandatory)
  4. Overwrite the register() method (mandatory)
<?php 
    namespace AppHttpControllersAuth;

    use App\User;
    use Validator;
    use App\Http\Controllers\Controller;
    use Illuminate\Foundation\Auth\Registers\Users;
    use Illuminate\Http\Request;

    use Jrean\UserVerification\Traits\VerifiesUsers;
    use Jrean\UserVerification\Facades\UserVerification;


    class RegisterController extends Controller
    {
        /*
        |--------------------------------------------------------------------------
        | Register Controller
        |--------------------------------------------------------------------------
        |
        | This controller handles the registration of new users as well as their
        | validation and creation. By default this controller uses a trait to
        | provide this functionality without requiring any additional code.
        |
        */

        use RegistersUsers;

        use VerifiesUsers;

       /**
        * Create a new controller instance.
        *
        * @return void
        */
        public function __construct()
        {
            // Based on the workflow you need, you may update and customize the following lines.

            $this->middleware('guest', ['except' => ['getVerification', 'getVerificationError']]);
        }

        /**
        * Get a validator for an incoming registration request.
        *
        * @param  array  $data
        * @return IlluminateContractsValidationValidator
        */
        protected function validator(array $data)
        {
            return Validator::make($data, [
                'name' => 'required|max:255',
                'email' => 'required|email|max:255|unique:users',
                'password' => 'required|min:6|confirmed',
            ]);
        }

        /**
        * Create a new user instance after a valid registration.
        *
        * @param  array  $data
        * @return User
        */
        protected function create(array $data)
        {
            return User::create([
                'name' => $data['name'],
                'email' => $data['email'],
                'password' => bcrypt($data['password']),
            ]);
        }

        /**
        * Handle a registration request for the application.
        *
        * @param  IlluminateHttpRequest  $request
        * @return IlluminateHttpResponse
        */
        public function register(Request $request)
        {
            $this->validator($request->all())->validate();

            $user = $this->create($request->all());
            $this->guard()->login($user);

            UserVerification::generate($user);
            UserVerification::send($user, 'My Custom E-mail Subject');

            return redirect($this->redirectPath());
        }
    }

Video Tutorial Sending an email verification after registering new user in Laravel 5.3


List video's Laravel 5.3 tutorials (Make a blog)



Learning Laravel 5.3



Download full source code from here https://goo.gl/flna2j
see you next lessons...

Laravel 5.3 : Sending an email verification after registering new user in Laravel 5.3


Laravel 5.3 tutorial for beginners - This is New lessons about Laravel 5.3 tutorial that is how er can sending the activation or confirmation email to the new users email address after they're register in our laravel applications.

UPDATED : 
New versions is available here "Email Verification for New User After Registration in Laravel 5.3"

At the previews lessons, we have learn about How to Send Email using Gmail SMTP in laravel 5.3 and VB.NET Simple Application Send Mail SMTPClient gmail.com + Source Code.

Email verification in laravel 5.3

To create simple email verification we will using "jrean" packages, https://packagist.org/packages/jrean/laravel-user-verification.

Create Email Verivication Project

first, following artisan command to create new project in laravel using Composer.

cd c:\server\htdocs
....
composer create-project --prefer-dist laravel/laravel verification

Create Database & Connection

to create database and connection in laravel 5.3, just click link on here How to Connect Database in laravel 5.3.

JREAN PACKAGES INSTALLATION

This project can be installed via Composer. To get the latest version of Laravel User Verification, add the following line to the require block of your composer.json file:

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "type": "project",
    "require": {
        "php": ">=5.6.4",
        "laravel/framework": "5.3.*",
        "jrean/laravel-user-verification": "^3.0"
    },

Next, You'll then need to run composer install or composer update to download the package and have the autoloader updated.

Other method to install "jrean" packages, following this command

composer require jrean/laravel-user-verification

Add the Service Provider & Facade/Alias

Once Larvel User Verification is installed, you need to register the service provider in config/app.php. Make sure to add the following line above the RouteServiceProvider.

....
Jrean\UserVerification\UserVerificationServiceProvider::class,
....

Create Laravel 5 User Authentication

before we add more "jrean" function, we nedd to create authentication to our project, create it following by this command :

php artisan make:auth

Create New Migration

The table representing the user must be updated with two new columns, verified and verification_token. This update will be performed by the migrations included with this package.

It is mandatory that the two columns are on the same table where the user's e-mail is stored. Please make sure you do not already have those fields on your user table.


To run the migrations from this package use the following command :

php artisan migrate --path="/vendor/jrean/laravel-user-verification/src/resources/migrations"

Register the default middleware

To register the default middleware add the following to the $routeMiddleware array within the app/Http/Kernel.php file:

// ........
'isVerified' => Jrean\UserVerification\Middleware\IsVerified::class,

Apply to our routes (routes/web.php)

Route::group(['middleware' => ['web', 'isVerified']], function () {
    //....

Create New Views

If you want to customize the e-mail view, run the following command to publish it and edit it to your needs:

php artisan vendor:publish --provider="Jrean\UserVerification\UserVerificationServiceProvider" --tag="views"

The view will be available in the resources/views/vendor/laravel-user-verification/ directory.

Create New Routes

By default this packages ships with two routes. If you want to change them, you can simply define your own routes.

Route::get('email-verification/error', 'Auth\RegisterController@getVerificationError')->name('email-verification.error');
Route::get('email-verification/check/{token}', 'Auth\RegisterController@getVerification')->name('email-verification.check');

Update Controller (app\Http\Controllers\Auth\RegisterController.php)

  1. Import the VerifiesUsers trait (mandatory)
  2. Overwrite and customize the redirect attributes/properties paths available within the RedirectsUsers trait included by the VerifiesUsers trait. (not mandatory)
  3. Overwrite the contructor (not mandatory)
  4. Overwrite the register() method (mandatory)
<?php 
    namespace AppHttpControllersAuth;

    use App\User;
    use Validator;
    use App\Http\Controllers\Controller;
    use Illuminate\Foundation\Auth\Registers\Users;
    use Illuminate\Http\Request;

    use Jrean\UserVerification\Traits\VerifiesUsers;
    use Jrean\UserVerification\Facades\UserVerification;


    class RegisterController extends Controller
    {
        /*
        |--------------------------------------------------------------------------
        | Register Controller
        |--------------------------------------------------------------------------
        |
        | This controller handles the registration of new users as well as their
        | validation and creation. By default this controller uses a trait to
        | provide this functionality without requiring any additional code.
        |
        */

        use RegistersUsers;

        use VerifiesUsers;

       /**
        * Create a new controller instance.
        *
        * @return void
        */
        public function __construct()
        {
            // Based on the workflow you need, you may update and customize the following lines.

            $this->middleware('guest', ['except' => ['getVerification', 'getVerificationError']]);
        }

        /**
        * Get a validator for an incoming registration request.
        *
        * @param  array  $data
        * @return IlluminateContractsValidationValidator
        */
        protected function validator(array $data)
        {
            return Validator::make($data, [
                'name' => 'required|max:255',
                'email' => 'required|email|max:255|unique:users',
                'password' => 'required|min:6|confirmed',
            ]);
        }

        /**
        * Create a new user instance after a valid registration.
        *
        * @param  array  $data
        * @return User
        */
        protected function create(array $data)
        {
            return User::create([
                'name' => $data['name'],
                'email' => $data['email'],
                'password' => bcrypt($data['password']),
            ]);
        }

        /**
        * Handle a registration request for the application.
        *
        * @param  IlluminateHttpRequest  $request
        * @return IlluminateHttpResponse
        */
        public function register(Request $request)
        {
            $this->validator($request->all())->validate();

            $user = $this->create($request->all());
            $this->guard()->login($user);

            UserVerification::generate($user);
            UserVerification::send($user, 'My Custom E-mail Subject');

            return redirect($this->redirectPath());
        }
    }

Video Tutorial Sending an email verification after registering new user in Laravel 5.3


List video's Laravel 5.3 tutorials (Make a blog)



Learning Laravel 5.3



Download full source code from here https://goo.gl/flna2j
see you next lessons...

Thứ Tư, 26 tháng 10, 2016

Microsoft .NET Framework Error : Unhandled exception has occurred in your application


Microsoft .Net tutorials - Yesterday, i have some problem with my .Net Framework. I have working in Windows 10 professional, after i run one simple aplication, that Application crashes with error : Microsoft .NET Framework Error : Unhandled exception has occurred in your application.

Unhandled exception has occurred in your application

How to Fix Microsoft .NET Framework Error?

Microsoft .NET Framework component should be installed or repaired.

Symptoms

When I start any application inside the virtual machine (Windows), I receive an error: "Microsoft .NET Framework Error: Unhandled exception has occurred in your application."

Cause

This error message can be received if the Microsoft .NET Framework component is not installed on your computer, outdated or if it is damaged.

Resolution

Microsoft .NET Framework component should be installed or repaired.

To install or repair Microsoft .NET Framework please do the following:
  1. Close all open applications.
  2. Click the Windows Start button and choose Control Panel.
  3. Double-click Program and Features > Uninstall a program.
  4. Search the list of currently installed programs for Microsoft .NET Framework
If the program isn't listed, install it:
Click here to download it from the Microsoft web site >> http://www.microsoft.com/en-us/download/details.aspx?id=17718.

If the program appears in the list, repair it:
  1. Select Microsoft .NET Framework, and then click Change/Remove.
  2. Select Repair, and then click Next.
  3. When prompted, restart your computer.
NOTE : If the error persists after installing or repairing, there may be other damaged components to the Microsoft .NET Framework. Uninstalling and then reinstalling Microsoft .NET Framework using the steps in Repairing or reinstalling Microsoft .NET Framework may resolve the issue.

If this solution does not resolve the issue, please contact Microsoft Technical Support regarding the issue.

references : http://kb.parallels.com/en/117703

Microsoft .NET Framework Error : Unhandled exception has occurred in your application


Microsoft .Net tutorials - Yesterday, i have some problem with my .Net Framework. I have working in Windows 10 professional, after i run one simple aplication, that Application crashes with error : Microsoft .NET Framework Error : Unhandled exception has occurred in your application.

Unhandled exception has occurred in your application

How to Fix Microsoft .NET Framework Error?

Microsoft .NET Framework component should be installed or repaired.

Symptoms

When I start any application inside the virtual machine (Windows), I receive an error: "Microsoft .NET Framework Error: Unhandled exception has occurred in your application."

Cause

This error message can be received if the Microsoft .NET Framework component is not installed on your computer, outdated or if it is damaged.

Resolution

Microsoft .NET Framework component should be installed or repaired.

To install or repair Microsoft .NET Framework please do the following:
  1. Close all open applications.
  2. Click the Windows Start button and choose Control Panel.
  3. Double-click Program and Features > Uninstall a program.
  4. Search the list of currently installed programs for Microsoft .NET Framework
If the program isn't listed, install it:
Click here to download it from the Microsoft web site >> http://www.microsoft.com/en-us/download/details.aspx?id=17718.

If the program appears in the list, repair it:
  1. Select Microsoft .NET Framework, and then click Change/Remove.
  2. Select Repair, and then click Next.
  3. When prompted, restart your computer.
NOTE : If the error persists after installing or repairing, there may be other damaged components to the Microsoft .NET Framework. Uninstalling and then reinstalling Microsoft .NET Framework using the steps in Repairing or reinstalling Microsoft .NET Framework may resolve the issue.

If this solution does not resolve the issue, please contact Microsoft Technical Support regarding the issue.

references : http://kb.parallels.com/en/117703

Thứ Ba, 25 tháng 10, 2016

laravel 5 : Google Charts, Simple Geo Chart using Lavacharts in Laravel 5.3


Laravel 5.3 Tutorial - Lavacharts is a wrapper for Google's powerful Javascript Chart API,
 More detail https://github.com/kevinkhill/lavacharts or http://lavacharts.com/.

How to create simple Geo Chart using Lavacharts in Laravel 5.3?
First, you must have a database, i'm using MySQL database, just create "lavachart" database using MySQL.
Simple Geo Chart using Lavacharts in Laravel 5.3

Create Simple Geo Chart Project

cd c:\server\htdocs
....
composer create-project --prefer-dist laravel/laravel lavacharts

Create Connection to Database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lavacharts
DB_USERNAME=root
DB_PASSWORD=yourpassword

Create Table and Migrations

php artisan make:migration create_table_charts_table

in Migration files, add this function to create charts table

<?php

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

class CreateChartsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
      Schema::create('charts', function (Blueprint $table) {
      $table->increments('id');
      $table->string('country');
      $table->integer('users');
      $table->timestamps();
      });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('charts');
    }
}

Create Models

php artisan make:model Charts

Add this function to "Charts" model

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Charts extends Model
{
  protected $table ='charts';
  public $fillable = ['country','users'];
}

Next, we will add Lavacharts into project,

Installing Lavacharts

First, copy this line into your project's composer.json file, in the "require": {} section,

"khill/lavacharts" : "3.0.*"

Next, run composer to download and install.

composer update

Register the service provider

Register the service provider by adding this line to the providers array in config/app.php

Khill\Lavacharts\Laravel\LavachartsServiceProvider::class,

Create Controller

Create new controller following this command :

php artisan make:controller ChartsController

Next, add this function into our controller (ChartsController.php)

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Charts;
use Khill\Lavacharts\Lavacharts;
class ChartsController extends Controller
{
    public function chart(){
      $lava = new Lavacharts;
      $popularity = $lava->DataTable();
      $data=Charts::select("country as 0","users as 1")->get()->toArray();
      $popularity->addStringColumn('Country')
                  ->addNumberColumn('Users')
                  ->addRows($data);
      $lava->GeoChart('Popularity',$popularity);
      return view('charts.chart',['lava' => $lava]);
    }
}

Routes

create new routes
Route::get('charts/chart', 'ChartsController@chart');

Create Views
First, we will create new folder named with "charts" under resources folders, resources\views\charts.

Next, create new file (chart.blade.php) under charts folder resources\views\charts\chart.blade.php

Chart.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple Geo Map - Chart Map</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Geo Map using LavaCharts</h1>
          <div id="pop-div" style="width:800px;border:1px solid orange"></div>
            <?= $lava->render('GeoChart', 'Popularity', 'pop-div') ?>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Try and Error

Finally, try to open your project using Google Chrome Browser :

http://localhost:8080/charts/chart

[UPDATE] VIDEO TUTORIAL USING GOOGLE CHARTS FULL CUSTOMIZE


Video tutorial Simple Geo Chart using Lavacharts in Laravel 5.3



Download full source code Google Charts, Simple Geo Chart using Lavacharts in Laravel 5.3 >> https://goo.gl/NzoiDL

See you next lessons..

laravel 5 : Google Charts, Simple Geo Chart using Lavacharts in Laravel 5.3


Laravel 5.3 Tutorial - Lavacharts is a wrapper for Google's powerful Javascript Chart API,
 More detail https://github.com/kevinkhill/lavacharts or http://lavacharts.com/.

How to create simple Geo Chart using Lavacharts in Laravel 5.3?
First, you must have a database, i'm using MySQL database, just create "lavachart" database using MySQL.
Simple Geo Chart using Lavacharts in Laravel 5.3

Create Simple Geo Chart Project

cd c:\server\htdocs
....
composer create-project --prefer-dist laravel/laravel lavacharts

Create Connection to Database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lavacharts
DB_USERNAME=root
DB_PASSWORD=yourpassword

Create Table and Migrations

php artisan make:migration create_table_charts_table

in Migration files, add this function to create charts table

<?php

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

class CreateChartsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
      Schema::create('charts', function (Blueprint $table) {
      $table->increments('id');
      $table->string('country');
      $table->integer('users');
      $table->timestamps();
      });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('charts');
    }
}

Create Models

php artisan make:model Charts

Add this function to "Charts" model

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Charts extends Model
{
  protected $table ='charts';
  public $fillable = ['country','users'];
}

Next, we will add Lavacharts into project,

Installing Lavacharts

First, copy this line into your project's composer.json file, in the "require": {} section,

"khill/lavacharts" : "3.0.*"

Next, run composer to download and install.

composer update

Register the service provider

Register the service provider by adding this line to the providers array in config/app.php

Khill\Lavacharts\Laravel\LavachartsServiceProvider::class,

Create Controller

Create new controller following this command :

php artisan make:controller ChartsController

Next, add this function into our controller (ChartsController.php)

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Charts;
use Khill\Lavacharts\Lavacharts;
class ChartsController extends Controller
{
    public function chart(){
      $lava = new Lavacharts;
      $popularity = $lava->DataTable();
      $data=Charts::select("country as 0","users as 1")->get()->toArray();
      $popularity->addStringColumn('Country')
                  ->addNumberColumn('Users')
                  ->addRows($data);
      $lava->GeoChart('Popularity',$popularity);
      return view('charts.chart',['lava' => $lava]);
    }
}

Routes

create new routes
Route::get('charts/chart', 'ChartsController@chart');

Create Views
First, we will create new folder named with "charts" under resources folders, resources\views\charts.

Next, create new file (chart.blade.php) under charts folder resources\views\charts\chart.blade.php

Chart.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple Geo Map - Chart Map</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Geo Map using LavaCharts</h1>
          <div id="pop-div" style="width:800px;border:1px solid orange"></div>
            <?= $lava->render('GeoChart', 'Popularity', 'pop-div') ?>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Try and Error

Finally, try to open your project using Google Chrome Browser :

http://localhost:8080/charts/chart

[UPDATE] VIDEO TUTORIAL USING GOOGLE CHARTS FULL CUSTOMIZE


Video tutorial Simple Geo Chart using Lavacharts in Laravel 5.3



Download full source code Google Charts, Simple Geo Chart using Lavacharts in Laravel 5.3 >> https://goo.gl/NzoiDL

See you next lessons..

Thứ Hai, 24 tháng 10, 2016

Visual Studio : No exports were found that match the constraint VS 2012, 2013, 2015


Visual studio 2015 tutorial - when i want to open or create new project using visual studio 2010, or VS 2012, Vs 2013 and Vs 2015 express, professional and Enterprise, i got the meessage "No exports were found that match the constraint contract name". How can I fix this problem?

we can deleting the Component Model Cache. or installing an extension to VS 2012 Express. Tools > Extensions and Updates > Online > Choose any then download. This apparently invalidates the cache causing VS to rebuild it.

but, sometimes, we will can't to open our visual studio, ho to fix it?

Deleting Component Model Cache

Visual Studio Pro / Enterprise

This issue can be resolved by deleting or clearing all the folders and files from this folder

%AppData%\[yourUsername]\Local\Microsoft\VisualStudio\11.0\ComponentModelCache

This folder is same as

C:\Users\[yourUsername]\AppData\Local\Microsoft\VisualStudio\11.0\ComponentModelCache

In windows 7 machines, path is different. When you type %appdata% n RUN command it opens the folder

C:\Users\[yourUsername]\AppData\Roaming

Visual Studio Express Edition

the Component Model Cache folder will be available in this folder

C:\Users\[yourUsername]\AppData\Local\Microsoft\WDExpress\11.0\ComponentModelCache


After found the "Component Model Cache" folder, just delete or rename it and restart your visual studio.

Component Model Cache Detail folder

For Visual Studio 2012 and later versions, folder "ComponentModelCache" available in here

C:\Users\[yourUsername]\AppData\Local\Microsoft\VisualStudio\11.0\ComponentModelCache

Visual Studio 2013

C:\Users\[yourUsername]\AppData\Local\Microsoft\VisualStudio\12.0\ComponentModelCache

Visual Studio 2015

C:\Users\[yourUsername]\AppData\Local\Microsoft\VisualStudio\14.0\ComponentModelCache


Here List of videos tutorial make simple application using Visual studio





See next lessons ..

Visual Studio : No exports were found that match the constraint VS 2012, 2013, 2015


Visual studio 2015 tutorial - when i want to open or create new project using visual studio 2010, or VS 2012, Vs 2013 and Vs 2015 express, professional and Enterprise, i got the meessage "No exports were found that match the constraint contract name". How can I fix this problem?

we can deleting the Component Model Cache. or installing an extension to VS 2012 Express. Tools > Extensions and Updates > Online > Choose any then download. This apparently invalidates the cache causing VS to rebuild it.

but, sometimes, we will can't to open our visual studio, ho to fix it?

Deleting Component Model Cache

Visual Studio Pro / Enterprise

This issue can be resolved by deleting or clearing all the folders and files from this folder

%AppData%\[yourUsername]\Local\Microsoft\VisualStudio\11.0\ComponentModelCache

This folder is same as

C:\Users\[yourUsername]\AppData\Local\Microsoft\VisualStudio\11.0\ComponentModelCache

In windows 7 machines, path is different. When you type %appdata% n RUN command it opens the folder

C:\Users\[yourUsername]\AppData\Roaming

Visual Studio Express Edition

the Component Model Cache folder will be available in this folder

C:\Users\[yourUsername]\AppData\Local\Microsoft\WDExpress\11.0\ComponentModelCache


After found the "Component Model Cache" folder, just delete or rename it and restart your visual studio.

Component Model Cache Detail folder

For Visual Studio 2012 and later versions, folder "ComponentModelCache" available in here

C:\Users\[yourUsername]\AppData\Local\Microsoft\VisualStudio\11.0\ComponentModelCache

Visual Studio 2013

C:\Users\[yourUsername]\AppData\Local\Microsoft\VisualStudio\12.0\ComponentModelCache

Visual Studio 2015

C:\Users\[yourUsername]\AppData\Local\Microsoft\VisualStudio\14.0\ComponentModelCache


Here List of videos tutorial make simple application using Visual studio





See next lessons ..

Thứ Năm, 20 tháng 10, 2016

Laravel 5 tutorial : Laravel v5.3.19 is now released [HOT]


Laravel 5 tutorial - Laravel released v5.3.19 which includes a few small changes and improvements as well as a complete rewrite of the middleware sorting so that middleware calls with parameters now work properly.

Laravel 5.3.19 make:model

A new addition to Laravel is the ability to specify the creation of a resourceful controller when you are creating a new Model through Artisan, see how to make model in laravel 5.3. This means you can pass a -c or --controller flag to make:model :

php artisan make:model Post --controller

Laravel Image Dimensions Validation

New in Laravel v5.3 is the ability to validate image files to ensure they meet certain dimensions and through the validator this can be setup with a string format:

'avatar' => 'dimensions:min_width=100,min_height=200,ratio=3/2'

Now in v5.3.19 this can be specified through a fluent syntax similar to unique and exists validation rules:

Rule::dimensions()->minWidth(100)->minHeight(100)->ratio(3/2)

laravel 5 release date

Laravel Validation in and not_in

Read how to use Validation in laravel 5.3. The in and not_in validation received the ability to pass an array.

// Previous
in:php,laravel,...
// New
Rule::in(['php','laravel'])

Then the same for not_in

// Previous
not_in:php,laravel,...
// New
Rule::notIn(['php', 'laravel'])

Either style is valid and the new object-based style parses down into the old way. So you are free to use whichever suits your app.

After Validation Hook

Now your controllers can have a new withValidator method so you can easily call any hooks after validation:

protected function withValidator($validator) 
{
  $validator->after(function($validator) {
    if ($this->somethingElseIsInvalid()) {
        $validator->errors()->add('field', 'Something is wrong with this field!');
    }
  });
}

Previously you had to manually setup the $validator = Validator::make() before you could use an after hook which meant you lost the ability to utilize the ValidatesRequests trait.

Upgrading Laravel

To get this latest version all you need to do is run composer update and you can find a complete list of changes in the changelog.

References : https://laravel-news.com/2016/10/laravel-v5-3-19/?utm_medium=feed&utm_source=twitter.com&utm_campaign=Feed%3A+laravelnews

Laravel 5.3 Video's Tutorial



See you next Lessons ...

Laravel 5 tutorial : Laravel v5.3.19 is now released [HOT]


Laravel 5 tutorial - Laravel released v5.3.19 which includes a few small changes and improvements as well as a complete rewrite of the middleware sorting so that middleware calls with parameters now work properly.

Laravel 5.3.19 make:model

A new addition to Laravel is the ability to specify the creation of a resourceful controller when you are creating a new Model through Artisan, see how to make model in laravel 5.3. This means you can pass a -c or --controller flag to make:model :

php artisan make:model Post --controller

Laravel Image Dimensions Validation

New in Laravel v5.3 is the ability to validate image files to ensure they meet certain dimensions and through the validator this can be setup with a string format:

'avatar' => 'dimensions:min_width=100,min_height=200,ratio=3/2'

Now in v5.3.19 this can be specified through a fluent syntax similar to unique and exists validation rules:

Rule::dimensions()->minWidth(100)->minHeight(100)->ratio(3/2)

laravel 5 release date

Laravel Validation in and not_in

Read how to use Validation in laravel 5.3. The in and not_in validation received the ability to pass an array.

// Previous
in:php,laravel,...
// New
Rule::in(['php','laravel'])

Then the same for not_in

// Previous
not_in:php,laravel,...
// New
Rule::notIn(['php', 'laravel'])

Either style is valid and the new object-based style parses down into the old way. So you are free to use whichever suits your app.

After Validation Hook

Now your controllers can have a new withValidator method so you can easily call any hooks after validation:

protected function withValidator($validator) 
{
  $validator->after(function($validator) {
    if ($this->somethingElseIsInvalid()) {
        $validator->errors()->add('field', 'Something is wrong with this field!');
    }
  });
}

Previously you had to manually setup the $validator = Validator::make() before you could use an after hook which meant you lost the ability to utilize the ValidatesRequests trait.

Upgrading Laravel

To get this latest version all you need to do is run composer update and you can find a complete list of changes in the changelog.

References : https://laravel-news.com/2016/10/laravel-v5-3-19/?utm_medium=feed&utm_source=twitter.com&utm_campaign=Feed%3A+laravelnews

Laravel 5.3 Video's Tutorial



See you next Lessons ...

Thứ Tư, 19 tháng 10, 2016

Laravel 5 CRUD using AJAX & Modals + Bootstrap Template in Laravel 5.3


Laravel 5.3 tutorials - How to create simple CRUD example operations in Laravel 5.3 using Ajax and Modals? this lesson will show you how to perform CRUD operations using ajax in laravel 5.

At the previews tutorial, we have learn how to make simple CRUD in laravel, but that not using Ajax, please read Simple CRUD operations with Resource Controllers and How to create simple blog using Laravel 5.3

Laravel 5 CRUD using AJAX & Modals + Bootstrap Template in Laravel 5.3

Laravel 5 CRUD using AJAX

C.R.U.D Example with Ajax and Modals

Step 1 - we need to create new database, please create new database and named with "laravel_ajax_crud".

Create New Project (CRUD project)

Using composer, we will create new laravel project, and named it with "laravelajaxcrud".

cd c:\server\htdocs
....
composer create-project --prefer-dist laravel/laravel laravelajaxcrud

Connection Settings

In .ENV file, we will declare our connection to database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_ajax_crud
DB_USERNAME=root
DB_PASSWORD=ganteng666

Migrations

using Artisan Command, we will create new Migration.

php artisan make:migration create_blog_post_table

In your migration file, that stored on database\migrations\2016_10_18_215831_create_blog_post_table.php

public function up()
    {
      Schema::create('blog_post', function (Blueprint $table) {
      $table->increments('id');
      $table->string('title');
      $table->string('description');
      $table->timestamps();
      });
    }

Create Models

using Artisan command, we need to create new model, and named it with "Blog", that will stored on App\Blog.php

php artisan make:model Blog

Blog.php Model

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Blog extends Model
{
    protected $table ='blog_post';
}

Create Views.

Under views folder, we will create new file (app.blade.php), that used for our template master and Ajax CRUD operations.

Laravel 5 ajax crud

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple CRUD with Ajax and Modal</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      @yield('content')
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    // Edit Data (Modal and function edit data)
    $(document).on('click', '.edit-modal', function() {
    $('#footer_action_button').text(" Update");
    $('#footer_action_button').addClass('glyphicon-check');
    $('#footer_action_button').removeClass('glyphicon-trash');
    $('.actionBtn').addClass('btn-success');
    $('.actionBtn').removeClass('btn-danger');
    $('.actionBtn').addClass('edit');
    $('.modal-title').text('Edit');
    $('.deleteContent').hide();
    $('.form-horizontal').show();
    $('#fid').val($(this).data('id'));
    $('#t').val($(this).data('title'));
    $('#d').val($(this).data('description'));
    $('#myModal').modal('show');
});
  $('.modal-footer').on('click', '.edit', function() {
  $.ajax({
      type: 'post',
      url: '/editItem',
      data: {
          '_token': $('input[name=_token]').val(),
          'id': $("#fid").val(),
          'title': $('#t').val(),
          'description': $('#d').val()
      },
      success: function(data) {
          $('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.title + "</td><td>" + data.description + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
      }
  });
});
// add function
$("#add").click(function() {
  $.ajax({
    type: 'post',
    url: '/addItem',
    data: {
      '_token': $('input[name=_token]').val(),
      'title': $('input[name=title]').val(),
      'description': $('input[name=description]').val()
    },
    success: function(data) {
      if ((data.errors)) {
        $('.error').removeClass('hidden');
        $('.error').text(data.errors.title);
        $('.error').text(data.errors.description);
      } else {
        $('.error').remove();
        $('#table').append("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.title + "</td><td>" + data.description + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
      }
    },
  });
  $('#title').val('');
  $('#description').val('');
});

//delete function
$(document).on('click', '.delete-modal', function() {
  $('#footer_action_button').text(" Delete");
  $('#footer_action_button').removeClass('glyphicon-check');
  $('#footer_action_button').addClass('glyphicon-trash');
  $('.actionBtn').removeClass('btn-success');
  $('.actionBtn').addClass('btn-danger');
  $('.actionBtn').addClass('delete');
  $('.modal-title').text('Delete');
  $('.id').text($(this).data('id'));
  $('.deleteContent').show();
  $('.form-horizontal').hide();
  $('.title').html($(this).data('title'));
  $('#myModal').modal('show');
});

$('.modal-footer').on('click', '.delete', function() {
  $.ajax({
    type: 'post',
    url: '/deleteItem',
    data: {
      '_token': $('input[name=_token]').val(),
      'id': $('.id').text()
    },
    success: function(data) {
      $('.item' + $('.id').text()).remove();
    }
  });
});

</script>
  </body>
</html>

Next, we will create new folder named with "blog" folder that stored under views folder resources\views\blog, Next, please create new page that using for CRUD operations page and named it with "index.blade.php"

resources\views\blog\index.blade.php

@extends('app')
  @section('content')

  <div class="row">
    <div class="col-md-12">
      <h1>Simple Laravel Ajax Crud</h1>
    </div>
  </div>

  <div class="form-group row add">
    <div class="col-md-5">
      <input type="text" class="form-control" id="title" name="title"
      placeholder="Your title Here" required>
      <p class="error text-center alert alert-danger hidden"></p>
    </div>
    <div class="col-md-5">
      <input type="text" class="form-control" id="description" name="description"
      placeholder="Your description Here" required>
      <p class="error text-center alert alert-danger hidden"></p>
    </div>
    <div class="col-md-2">
      <button class="btn btn-warning" type="submit" id="add">
        <span class="glyphicon glyphicon-plus"></span> Add New Data
      </button>
    </div>
  </div>

  <div class="row">
    <div class="table-responsive">
      <table class="table table-borderless" id="table">
        <tr>
          <th>No.</th>
          <th>Title</th>
          <th>Description</th>
          <th>Actions</th>
        </tr>
        {{ csrf_field() }}

        <?php $no=1; ?>
        @foreach($blogs as $blog)
          <tr class="item{{$blog->id}}">
            <td>{{$no++}}</td>
            <td>{{$blog->title}}</td>
            <td>{{$blog->description}}</td>
            <td>
            <button class="edit-modal btn btn-primary" data-id="{{$blog->id}}" data-title="{{$blog->title}}" data-description="{{$blog->description}}">
              <span class="glyphicon glyphicon-edit"></span> Edit
            </button>
            <button class="delete-modal btn btn-danger" data-id="{{$blog->id}}" data-title="{{$blog->title}}" data-description="{{$blog->description}}">
              <span class="glyphicon glyphicon-trash"></span> Delete
            </button>
          </td>
          </tr>
        @endforeach
      </table>
    </div>
  </div>
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label class="control-label col-sm-2" for="id">ID :</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="fid" disabled>
              </div>
              </div>
              <div class="form-group">
              <label class="control-label col-sm-2" for="title">Title:</label>
              <div class="col-sm-10">
                <input type="name" class="form-control" id="t">
              </div>
            </div>
            <div class="form-group">
            <label class="control-label col-sm-2" for="description">Description:</label>
            <div class="col-sm-10">
              <input type="name" class="form-control" id="d">
            </div>
          </div>
          </form>
            <div class="deleteContent">
            Are you Sure you want to delete <span class="title"></span> ?
            <span class="hidden id"></span>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn actionBtn" data-dismiss="modal">
              <span id="footer_action_button" class='glyphicon'> </span>
            </button>
            <button type="button" class="btn btn-warning" data-dismiss="modal">
              <span class='glyphicon glyphicon-remove'></span> Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  @stop

Create new Controller (BlogController.php)

using Artisan command, we will create new controller.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Blog;
use Validator;
use Response;
use Illuminate\Support\Facades\Input;
class BlogController extends Controller
{
    public function index(){
      // we need to show all data from "blog" table
      $blogs = Blog::all();
      // show data to our view
      return view('blog.index',['blogs' => $blogs]);
    }

      // edit data function
      public function editItem(Request $req) {
      $blog = Blog::find ($req->id);
      $blog->title = $req->title;
      $blog->description = $req->description;
      $blog->save();
      return response()->json($blog);
    }

    // add data into database
    public function addItem(Request $req) {
      $rules = array(
        'title' => 'required',
        'description' => 'required'
      );
      // for Validator
      $validator = Validator::make ( Input::all (), $rules );
      if ($validator->fails())
      return Response::json(array('errors' => $validator->getMessageBag()->toArray()));

      else {
        $blog = new Blog();
        $blog->title = $req->title;
        $blog->description = $req->description;
        $blog->save();
        return response()->json($blog);
      }
    }
    // delete item
    public function deleteItem(Request $req) {
      Blog::find($req->id)->delete();
      return response()->json();
    }
}

Routes (web.php)

Route::get('/', function () {
    return view('welcome');
});
Route::group(['middleware' => ['web']], function() {
  Route::resource('blog','BlogController');
  Route::post ( '/editItem', 'BlogController@editItem' );
  Route::post ( '/addItem', 'BlogController@addItem' );
  Route::post ( '/deleteItem', 'BlogController@deleteItem' );
});

Video Ajax + Modals CRUD Example using Bootstrap template


Laravel 5.3 CRUD with VueJS


Video Tutorial Laravel CRUD with Angular Js


Download Full source code Laravel 5.3  Ajax CRUD Operations here >> https://goo.gl/Nc9h1S
See you next lessons ..

Laravel 5 CRUD using AJAX & Modals + Bootstrap Template in Laravel 5.3


Laravel 5.3 tutorials - How to create simple CRUD example operations in Laravel 5.3 using Ajax and Modals? this lesson will show you how to perform CRUD operations using ajax in laravel 5.

At the previews tutorial, we have learn how to make simple CRUD in laravel, but that not using Ajax, please read Simple CRUD operations with Resource Controllers and How to create simple blog using Laravel 5.3

Laravel 5 CRUD using AJAX & Modals + Bootstrap Template in Laravel 5.3

Laravel 5 CRUD using AJAX

C.R.U.D Example with Ajax and Modals

Step 1 - we need to create new database, please create new database and named with "laravel_ajax_crud".

Create New Project (CRUD project)

Using composer, we will create new laravel project, and named it with "laravelajaxcrud".

cd c:\server\htdocs
....
composer create-project --prefer-dist laravel/laravel laravelajaxcrud

Connection Settings

In .ENV file, we will declare our connection to database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_ajax_crud
DB_USERNAME=root
DB_PASSWORD=ganteng666

Migrations

using Artisan Command, we will create new Migration.

php artisan make:migration create_blog_post_table

In your migration file, that stored on database\migrations\2016_10_18_215831_create_blog_post_table.php

public function up()
    {
      Schema::create('blog_post', function (Blueprint $table) {
      $table->increments('id');
      $table->string('title');
      $table->string('description');
      $table->timestamps();
      });
    }

Create Models

using Artisan command, we need to create new model, and named it with "Blog", that will stored on App\Blog.php

php artisan make:model Blog

Blog.php Model

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Blog extends Model
{
    protected $table ='blog_post';
}

Create Views.

Under views folder, we will create new file (app.blade.php), that used for our template master and Ajax CRUD operations.

Laravel 5 ajax crud

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple CRUD with Ajax and Modal</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      @yield('content')
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    // Edit Data (Modal and function edit data)
    $(document).on('click', '.edit-modal', function() {
    $('#footer_action_button').text(" Update");
    $('#footer_action_button').addClass('glyphicon-check');
    $('#footer_action_button').removeClass('glyphicon-trash');
    $('.actionBtn').addClass('btn-success');
    $('.actionBtn').removeClass('btn-danger');
    $('.actionBtn').addClass('edit');
    $('.modal-title').text('Edit');
    $('.deleteContent').hide();
    $('.form-horizontal').show();
    $('#fid').val($(this).data('id'));
    $('#t').val($(this).data('title'));
    $('#d').val($(this).data('description'));
    $('#myModal').modal('show');
});
  $('.modal-footer').on('click', '.edit', function() {
  $.ajax({
      type: 'post',
      url: '/editItem',
      data: {
          '_token': $('input[name=_token]').val(),
          'id': $("#fid").val(),
          'title': $('#t').val(),
          'description': $('#d').val()
      },
      success: function(data) {
          $('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.title + "</td><td>" + data.description + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
      }
  });
});
// add function
$("#add").click(function() {
  $.ajax({
    type: 'post',
    url: '/addItem',
    data: {
      '_token': $('input[name=_token]').val(),
      'title': $('input[name=title]').val(),
      'description': $('input[name=description]').val()
    },
    success: function(data) {
      if ((data.errors)) {
        $('.error').removeClass('hidden');
        $('.error').text(data.errors.title);
        $('.error').text(data.errors.description);
      } else {
        $('.error').remove();
        $('#table').append("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.title + "</td><td>" + data.description + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-description='" + data.description + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
      }
    },
  });
  $('#title').val('');
  $('#description').val('');
});

//delete function
$(document).on('click', '.delete-modal', function() {
  $('#footer_action_button').text(" Delete");
  $('#footer_action_button').removeClass('glyphicon-check');
  $('#footer_action_button').addClass('glyphicon-trash');
  $('.actionBtn').removeClass('btn-success');
  $('.actionBtn').addClass('btn-danger');
  $('.actionBtn').addClass('delete');
  $('.modal-title').text('Delete');
  $('.id').text($(this).data('id'));
  $('.deleteContent').show();
  $('.form-horizontal').hide();
  $('.title').html($(this).data('title'));
  $('#myModal').modal('show');
});

$('.modal-footer').on('click', '.delete', function() {
  $.ajax({
    type: 'post',
    url: '/deleteItem',
    data: {
      '_token': $('input[name=_token]').val(),
      'id': $('.id').text()
    },
    success: function(data) {
      $('.item' + $('.id').text()).remove();
    }
  });
});

</script>
  </body>
</html>

Next, we will create new folder named with "blog" folder that stored under views folder resources\views\blog, Next, please create new page that using for CRUD operations page and named it with "index.blade.php"

resources\views\blog\index.blade.php

@extends('app')
  @section('content')

  <div class="row">
    <div class="col-md-12">
      <h1>Simple Laravel Ajax Crud</h1>
    </div>
  </div>

  <div class="form-group row add">
    <div class="col-md-5">
      <input type="text" class="form-control" id="title" name="title"
      placeholder="Your title Here" required>
      <p class="error text-center alert alert-danger hidden"></p>
    </div>
    <div class="col-md-5">
      <input type="text" class="form-control" id="description" name="description"
      placeholder="Your description Here" required>
      <p class="error text-center alert alert-danger hidden"></p>
    </div>
    <div class="col-md-2">
      <button class="btn btn-warning" type="submit" id="add">
        <span class="glyphicon glyphicon-plus"></span> Add New Data
      </button>
    </div>
  </div>

  <div class="row">
    <div class="table-responsive">
      <table class="table table-borderless" id="table">
        <tr>
          <th>No.</th>
          <th>Title</th>
          <th>Description</th>
          <th>Actions</th>
        </tr>
        {{ csrf_field() }}

        <?php $no=1; ?>
        @foreach($blogs as $blog)
          <tr class="item{{$blog->id}}">
            <td>{{$no++}}</td>
            <td>{{$blog->title}}</td>
            <td>{{$blog->description}}</td>
            <td>
            <button class="edit-modal btn btn-primary" data-id="{{$blog->id}}" data-title="{{$blog->title}}" data-description="{{$blog->description}}">
              <span class="glyphicon glyphicon-edit"></span> Edit
            </button>
            <button class="delete-modal btn btn-danger" data-id="{{$blog->id}}" data-title="{{$blog->title}}" data-description="{{$blog->description}}">
              <span class="glyphicon glyphicon-trash"></span> Delete
            </button>
          </td>
          </tr>
        @endforeach
      </table>
    </div>
  </div>
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label class="control-label col-sm-2" for="id">ID :</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="fid" disabled>
              </div>
              </div>
              <div class="form-group">
              <label class="control-label col-sm-2" for="title">Title:</label>
              <div class="col-sm-10">
                <input type="name" class="form-control" id="t">
              </div>
            </div>
            <div class="form-group">
            <label class="control-label col-sm-2" for="description">Description:</label>
            <div class="col-sm-10">
              <input type="name" class="form-control" id="d">
            </div>
          </div>
          </form>
            <div class="deleteContent">
            Are you Sure you want to delete <span class="title"></span> ?
            <span class="hidden id"></span>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn actionBtn" data-dismiss="modal">
              <span id="footer_action_button" class='glyphicon'> </span>
            </button>
            <button type="button" class="btn btn-warning" data-dismiss="modal">
              <span class='glyphicon glyphicon-remove'></span> Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  @stop

Create new Controller (BlogController.php)

using Artisan command, we will create new controller.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Blog;
use Validator;
use Response;
use Illuminate\Support\Facades\Input;
class BlogController extends Controller
{
    public function index(){
      // we need to show all data from "blog" table
      $blogs = Blog::all();
      // show data to our view
      return view('blog.index',['blogs' => $blogs]);
    }

      // edit data function
      public function editItem(Request $req) {
      $blog = Blog::find ($req->id);
      $blog->title = $req->title;
      $blog->description = $req->description;
      $blog->save();
      return response()->json($blog);
    }

    // add data into database
    public function addItem(Request $req) {
      $rules = array(
        'title' => 'required',
        'description' => 'required'
      );
      // for Validator
      $validator = Validator::make ( Input::all (), $rules );
      if ($validator->fails())
      return Response::json(array('errors' => $validator->getMessageBag()->toArray()));

      else {
        $blog = new Blog();
        $blog->title = $req->title;
        $blog->description = $req->description;
        $blog->save();
        return response()->json($blog);
      }
    }
    // delete item
    public function deleteItem(Request $req) {
      Blog::find($req->id)->delete();
      return response()->json();
    }
}

Routes (web.php)

Route::get('/', function () {
    return view('welcome');
});
Route::group(['middleware' => ['web']], function() {
  Route::resource('blog','BlogController');
  Route::post ( '/editItem', 'BlogController@editItem' );
  Route::post ( '/addItem', 'BlogController@addItem' );
  Route::post ( '/deleteItem', 'BlogController@deleteItem' );
});

Video Ajax + Modals CRUD Example using Bootstrap template


Laravel 5.3 CRUD with VueJS


Video Tutorial Laravel CRUD with Angular Js


Download Full source code Laravel 5.3  Ajax CRUD Operations here >> https://goo.gl/Nc9h1S
See you next lessons ..

Thứ Sáu, 14 tháng 10, 2016

Laravel 5 Tutorial : Installing Laravel 5.3 on Windows with IIS


Laravel 5 Tutorial - This Lessons will show you how to install Laravel 5.3 on windows using Microsoft Internet Information Services (IIS) Manager. We will enable Microsoft Internet Information Services (IIS) on windows 10, and install PHP 7 for IIS.

After installed laravel, for next lessons we will try configuration to connect to a SQLite database.

Installing Laravel 5.3 on Windows with IIS

In windows 10, IIS (Internet Information Services) needs to be installed, One way to do this is by selecting the start button and type Windows Features to bring up a list where "Turn Windows features on or off" can be selected.

Installing Laravel 5.3 on Windows with IIS

Another way to get to this Control Panel app is Windows + R key combination and run "appwiz.cpl". Turn Windows features on or off link should be in the upper left panel.

install laravel on windows with IIS

PHP and PHP Manager

Install PHP 7 for Windows using the Microsoft Web Platform Installer. Download Microsoft web Platform Installer here.

It's an easy way to get both PHP for IIS and takes some of the guess work out of getting PHP up and running on Windows and IIS.

install laravel on windows with IIS

Download and Install PHP Manager

To install PHP manager and running in windows with IIS, please download and install PHP Manager below :

PHP Manager 1.4 for IIS 10

PHP Manager 1.3 for IIS 8-8.5

Composer for Windows

To install Laravel on windows with Internet Information Services, you need to install composer, see How to Install Composer on Windows.

Create Laravel Project

Open your Command Prompt (CMD) with "Open as Administrator". One way to do this is by selecting the start button  and type command to bring up a list where "Command Prompt" can be selected. Right click on Command Prompt and select Run as administrator.

cd c:/intepub
......
composer create-project laravel/laravel laravel "5.3.*"

To install Laravel on windows with Xampp PHP server, go to this link.

IIS Manager Configurations

Open Internet Information Services (IIS) Manager. Right click on the Server and select Add Website. Fill out the form as follows :
Site name : Laravel in IIS
Application pool : DefaultAppPool
Physical path: C:\inetpub\laravel
Host name : laravel.win
Select "Test Settings" and then "OK" if successful.

Hosts Mapping

Since the Host name laravel.win was entered for the website, the hosts file needs to be updated. Open Notepad as an administrator. One way to do this is by selecting the start button  and type Notepad to bring up a list where it can be selected. Right click on Notepad and select Run as administrator.

Select File | Open, or Ctrl + O and change the File type from Text Documents (*.txt) to All Files (*.*). Browse to C:\Windows\System32\drivers\etc and select the hosts file. Add an entry to map localhost to laravel.win as follows.

127.0.0.1   localhost
127.0.0.1   laravel.win

Laravel Project Permissions

Go to IIS Manager, Click on website "Laravel with IIS", right click on Edit Permissions. Under the Security tab, grant full control of the storage folder to Users as shown in the figure below.

install laravel on windows with IIS

Laravel web.config

Since IIS does not have an .htaccess file like Apache, create a web.config file in C:\inetpub\laravel\public as follows.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Imported Rule 1" stopProcessing="true">
                    <match url="^" ignoreCase="false" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="index.php" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Restart IIS

In an Administrative Command Prompt, restart IIS so all of the changes get applied.

iisreset /restart

Open Laravel Project

Finally, try to open your first Laravel intalled on IIS, following by this command

http://laravel.win/public

Video Tutorial Installing Laravel 5.3 on Windows with IIS



See you Next Lessons....