Web Prepration

Web Concept Tutorials

Laravel

How to Integrate Stripe Payment Gateway in Laravel

by Leave a Comment

In  this article, we are going to explain “How to integrate Stripe Payment gateway in laravel”. In many websites required payment gateway like Paypal,Stripe,Authorize etc.

Stripe payment:-

Stripe is one of the most popular payment gateway which is integrated in many websites, Stripe payment is easy to integrate and use. Stripe is very simple and most powerful and flexible tools.



Step 1:- First we need to install required packages cartalyst/stripe-laravel, So open your composer.json file and put following one package in require array.

1
2
3
4
5
6
7
8
9
10
11
 
"require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "5.6.*",
        "laravel/tinker": "^1.0",
        "paypal/rest-api-sdk-php": "*",
        "laravelcollective/html": "^5.4.0",
        "cartalyst/stripe-laravel": "8.0.x"
    },
 

Then After update composer by run following command.

1
2
3
 
composer update
 

It will take some time and installed required package “cartalyst/stripe-laravel”

Step 2:- Now  need to configure package in config/app.php, So open app.php file and paste below code in app.php file.

1
2
3
4
5
6
7
8
9
10
11
12
 
'providers' => [
....
    ....
    Cartalyst\Stripe\Laravel\StripeServiceProvider::class,
],
'aliases' => [
....
    ....
    'Stripe' => Cartalyst\Stripe\Laravel\Facades\Stripe::class,
],
 

Step 3:- Now in this step need to configure STRIPE_KEY and STRIPE_SECRATE in .env file.

1
2
3
4
 
STRIPE_KEY=XXXXXXXXXX
STRIPE_SECRET=XXXXXXXXXX
 

Step 4:- Now we are require two route one for display payment form and second is required for post request to stripe, So open your web.php file and put the following code in routes/web.php.

1
2
3
4
5
6
 
// Route for stripe payment form.
Route::get('stripe', array('as' => 'stripe.stripe','uses' => 'StripeController@payWithStripe'));
// Route for stripe post request.
Route::post('stripe', array('as' => 'stripe.stripePost','uses' => 'StripeController@postPaymentWithStripe'));
 

Step 5:- Now create StripeController.php file in app/http/controllers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<?php
 
namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
use Validator;
use URL;
use Session;
use Redirect;
use Input;
use App\User;
use Cartalyst\Stripe\Laravel\Facades\Stripe;
use Stripe\Error\Card;
 
class StripeController extends Controller
{
    
    
    /**
     * Show the application paywith stripe.
     *
     * @return \Illuminate\Http\Response
     */
    public function payWithStripe()
    {
        return view('paywithstripe');
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function postPaymentWithStripe(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'card_no' => 'required',
            'ccExpiryMonth' => 'required',
            'ccExpiryYear' => 'required',
            'cvvNumber' => 'required',
            'amount' => 'required',
        ]);
        
        $input = $request->all();
        if ($validator->passes()) {          
            $input = array_except($input,array('_token'));            
            $stripe = Stripe::make('sk_test_K0ThsZWtj2g1AorbBQDcV2h5');
            try {
                $token = $stripe->tokens()->create([
                    'card' => [
                        'number'    => $request->get('card_no'),
                        'exp_month' => $request->get('ccExpiryMonth'),
                        'exp_year'  => $request->get('ccExpiryYear'),
                        'cvc'       => $request->get('cvvNumber'),
                    ],
                ]);
                if (!isset($token['id'])) {
                    \Session::put('error','The Stripe Token was not generated correctly');
                    return redirect()->route('stripe.stripe');
                }
                $charge = $stripe->charges()->create([
                    'card' => $token['id'],
                    'currency' => 'USD',
                    'amount'   => $request->get('amount'),
                    'description' => 'Add in wallet',
                ]);
                if($charge['status'] == 'succeeded') {
                    /**
                    * Write Here Your Database insert logic.
                    */
                    \Session::put('success','Money add successfully in wallet');
                    return redirect()->route('stripe.stripe');
                } else {
                    \Session::put('error','Money not add in wallet!!');
                    return redirect()->route('stripe.stripe');
                }
            } catch (Exception $e) {
                \Session::put('error',$e->getMessage());
                return redirect()->route('stripe.stripe');
            } catch(\Cartalyst\Stripe\Exception\CardErrorException $e) {
                \Session::put('error',$e->getMessage());
                return redirect()->route('stripe.stripe');
            } catch(\Cartalyst\Stripe\Exception\MissingParameterException $e) {
                \Session::put('error',$e->getMessage());
                return redirect()->route('stripe.stripe');
            }
        }
        \Session::put('error','All fields are required!!');
        return redirect()->route('stripe.stripe');
    }    
}
 
?>
 

Step 6:- And in the last step create view file in resources/view folder paywithstripe.blade.php and paste below code in view file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                @if ($message = Session::get('success'))
                <div class="custom-alerts alert alert-success fade in">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                    {!! $message !!}
                </div>
                <?php Session::forget('success');?>
                @endif
                @if ($message = Session::get('error'))
                <div class="custom-alerts alert alert-danger fade in">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                    {!! $message !!}
                </div>
                <?php Session::forget('error');?>
                @endif
                <div class="panel-heading">Paywith Stripe</div>
                <div class="panel-body">
                    <form class="form-horizontal" method="POST" id="payment-form" role="form" action="{{route('stripe.stripePost') }}" >
                        {{ csrf_field() }}
                        <div class="form-group{{ $errors->has('card_no') ? ' has-error' : '' }}">
                            <label for="card_no" class="col-md-4 control-label">Card No</label>
                            <div class="col-md-6">
                                <input id="card_no" type="text" class="form-control" name="card_no" value="{{ old('card_no') }}" autofocus>
                                @if ($errors->has('card_no'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('card_no') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group{{ $errors->has('ccExpiryMonth') ? ' has-error' : '' }}">
                            <label for="ccExpiryMonth" class="col-md-4 control-label">Expiry Month</label>
                            <div class="col-md-6">
                                <input id="ccExpiryMonth" type="text" class="form-control" name="ccExpiryMonth" value="{{ old('ccExpiryMonth') }}" autofocus>
                                @if ($errors->has('ccExpiryMonth'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('ccExpiryMonth') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group{{ $errors->has('ccExpiryYear') ? ' has-error' : '' }}">
                            <label for="ccExpiryYear" class="col-md-4 control-label">Expiry Year</label>
                            <div class="col-md-6">
                                <input id="ccExpiryYear" type="text" class="form-control" name="ccExpiryYear" value="{{ old('ccExpiryYear') }}" autofocus>
                                @if ($errors->has('ccExpiryYear'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('ccExpiryYear') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group{{ $errors->has('cvvNumber') ? ' has-error' : '' }}">
                            <label for="cvvNumber" class="col-md-4 control-label">CVV No.</label>
                            <div class="col-md-6">
                                <input id="cvvNumber" type="text" class="form-control" name="cvvNumber" value="{{ old('cvvNumber') }}" autofocus>
                                @if ($errors->has('cvvNumber'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('cvvNumber') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group{{ $errors->has('amount') ? ' has-error' : '' }}">
                            <label for="amount" class="col-md-4 control-label">Amount</label>
                            <div class="col-md-6">
                                <input id="amount" type="text" class="form-control" name="amount" value="{{ old('amount') }}" autofocus>
                                @if ($errors->has('amount'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('amount') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Paywith Stripe
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
 

Now stripe payment all steps completed and ready to test, for testing first need to start serve, for that run below command and then test payment.

1
2
3
 
php artisan serve
 

And now you can open below url for testing….

1
2
3
 
http://localhost:8000/stripe
 

Now use dummy/test credit card for payment. if your payment is successfully done then you can change your payment mode test to live.

1
2
3
4
5
6
 
Card No : 4242424242424242 / 4012888888881881
Month : any future month
Year : any future Year
CVV : any 3 digit No.
 

We hope this post is very helpful for integrate stripe in laravel. If you need paypal or ccavenue payment gateway then you can also read paypal payment gateway integration and CCAvenue payment gateway etc.

Thanks!!

 

 

How to create API Authentication using Passport

by Leave a Comment

In this article, We are going to explain “How to create API Authentication using passport in laravel”  application. In Laravel 5.2, we got a new structure in our authentication system with multiple auth drivers. This means that, instead of there being a single auth system that is responsible for one app at a time, you can apply different auth systems to different routes (or in different environments).

Web services

web service is very important for when you are create web and mobile apps.

If you require to create API for mobile application As we know laravel is most popular framework for API creation. If you are beginners and don’t know what is API and web services then you are a right place. In this article I will show how to create very simple API and Authentication for mobile APPs.



Laravel provide passport package for API authentication, In this example we will use passport package for user auth via API.

You have to just follow below given steps for users API.

  1. Register API
  2. Login API
  3. User Details API

Above three API, you can simply get by following few step. It is from scratch so just follow bellow steps, at last i attach screen shot of api test.

Step 1:-  In first step require to install fresh laravel using below command, So open your terminal or command prompt and run command.

1
2
3
 
composer create-project --prefer-dist laravel/laravel APITest
 

Step 2:-  In this  step to get install the passport package in laravel using below command

1
2
3
 
composer require laravel/passport
 

After passport installation package open config/app.php file and add service provider

1
2
3
 
Laravel\Passport\PassportServiceProvider::class,
 

Step 3:- The Passport service provider registers its own database migration directory with the framework, so you should migrate your database after registering the provider. The Passport migrations will create the tables your application needs to store clients and access tokens.

1
2
3
 
php artisan migrate
 

Next, you should run the passport:install command. This command will create the encryption keys needed to generate secure access tokens. In addition, the command will create “personal access” and “password grant” clients which will be used to generate access tokens.

1
2
3
 
php artisan passport:install
 

Step 4:- In this step we have to configure passport, So just follow three given file changes.

firest we need to add the Laravel\Passport\HasApiTokens trait to your App\Usermodel. This trait will provide a few helper methods to your model which allow you to inspect the authenticated user’s token and scopes.

App/User.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<?php
 
 
namespace App;
 
 
use Laravel\Passport\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
 
 
class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
 
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];
 
 
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];
}
 

app/Providers/AuthServiceProvider.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<?php
 
 
namespace App\Providers;
 
 
use Laravel\Passport\Passport;
use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
 
 
class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        'App\Model' => 'App\Policies\ModelPolicy',
    ];
 
 
    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();
        Passport::routes();
    }
}
 

config/auth.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php
 
 
return [
    .....
    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],
        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
        ],
    ],
    .....
]
 

Step 5:- In this step, We will create API routes laravel provide api.php file for write web services routes So lets add new routes on that file.

routes/api.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<?php
 
 
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
 
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
 
 
Route::post('login', 'API\UserController@login');
Route::post('register', 'API\UserController@register');
 
 
Route::group(['middleware' => 'auth:api'], function(){
Route::post('details', 'API\UserController@details');
});
 

Step 6:- In this step  first we have create new directory API on controller folder  and create new controller in API directory, So let’s create UserController and put below code.

app/Http/Controllers/API/UserController.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<?php
 
 
namespace App\Http\Controllers\API;
 
 
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\User;
use Illuminate\Support\Facades\Auth;
use Validator;
 
 
class UserController extends Controller
{
 
 
    public $successStatus = 200;
 
 
    /**
     * login api
     *
     * @return \Illuminate\Http\Response
     */
    public function login(){
        if(Auth::attempt(['email' => request('email'), 'password' => request('password')])){
            $user = Auth::user();
            $success['token'] =  $user->createToken('MyApp')->accessToken;
            return response()->json(['success' => $success], $this->successStatus);
        }
        else{
            return response()->json(['error'=>'Unauthorised'], 401);
        }
    }
 
 
    /**
     * Register api
     *
     * @return \Illuminate\Http\Response
     */
    public function register(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required',
            'c_password' => 'required|same:password',
        ]);
 
 
        if ($validator->fails()) {
            return response()->json(['error'=>$validator->errors()], 401);            
        }
 
 
        $input = $request->all();
        $input['password'] = bcrypt($input['password']);
        $user = User::create($input);
        $success['token'] =  $user->createToken('MyApp')->accessToken;
        $success['name'] =  $user->name;
 
 
        return response()->json(['success'=>$success], $this->successStatus);
    }
 
 
    /**
     * details api
     *
     * @return \Illuminate\Http\Response
     */
    public function details()
    {
        $user = Auth::user();
        return response()->json(['success' => $user], $this->successStatus);
    }
}
 

Now we are ready to run our API, So run below command

1
2
3
 
php artisan serve
 

Now, we can simply test API using postman tool, I have test it and you can see screenshot.

Register:-

 

Login:-

 

getDetails:-

 

We hope this article is very helpful for creating API using passport for mobile application.

Thanks !!

export csv file in php

by Leave a Comment

In this article, I am going to explain “How to export csv file in PHP”. The ability to export data in excel csv format is very useful feature for web applications. If you want to learn export data in excel then follow these easy steps.

First create database and then create table in database. I have created organization table and table structure given below.

1
2
3
4
5
6
7
8
9
 
CREATE TABLE `organization` (
`id` INT(12) NOT NULL AUTO_INCREMENT ,
`org_name` VARCHAR(150) NOT NULL ,
`org_code` VARCHAR(100) NOT NULL ,
`gst_no` VARCHAR(100) NOT NULL ,
`address` TEXT NOT NULL ,
PRIMARY KEY (`id`)) ENGINE = InnoDB;
 

Now create export.php file and copy below code and paste it on created file.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<?php
 
$conn = mysqli_connect('localhost','root','','laravel1');
if(!$conn){
    die('Connection ERROR!');
}
 
    $fileName = "Organizations" . date('Ymd') . ".xls";
    header("Content-Disposition: attachment; filename=\"$fileName\"");
    header("Content-Type: application/vnd.ms-excel");    
    $flag = false;        
    $heading =array('ID','Organization Name','Org Code','GSTN','Address');
    $result= mysqli_query($conn,"SELECT * FROM organization");
    if($result->num_rows >0){
        while ($row = mysqli_fetch_assoc($result))
        {
            if(!$flag) {
            echo implode("\t", array_values($heading)) . "\n";
            $flag = true;
            }
            array_walk($row,'filterData');
            echo implode("\t", array_values($row)) . "\n";
        }
    }
 
 
    function filterData(&$str)
    {
        $str = preg_replace("/\t/", "\\t", $str);
        $str = preg_replace("/\r?\n/", "\\n", $str);
        if(strstr($str, '"')) $str = '"' . str_replace('"', '""', $str) . '"';
    }
 
?>
 

In this file you can see, I have used array_walk function this a predefined php function. The array_walk() function runs each array element in a user-defined function. The array’s keys and values are parameters in the function.

We hope that this article is helpful for creating export functionality in php. You may also want to read our other posts interesting and useful post then click  https://webprepration.com/  and also you can follow on social sites etc.

Create CURD operation in Laravel Using Ajax

by 4 Comments

In this post, I am going to given example with Demo how to create CURD (CREATE,UPDATE and DELETE) operation in laravel 5+ Using Ajax from scratch. This article is very helpful for laravel beginners, and If you want to create CURD Application using jQuery Ajax then just need to follow given steps.

In this simple ajax curd example, I have created products management with several options like:-

  1. Product Listing
  2. Add New Product
  3. Edit Product
  4. Delete Product

you can create Curd operation using simple steps, After create successful example you will find layout as below.

Step 1: Laravel Installation

If you haven’t installed laravel in your system and want to fresh project then just run bellow command and get new Laravel project.

1
2
3
 
composer create-project --prefer-dist laravel/laravel laravel-ajax
 

Step 2: Create items table and model

In this step we have to create migration for products table using Laravel  php artisan command, so first fire bellow command:

1
2
3
 
php artisan make:migration create_products_table
 

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create products table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
           $table->increments('id');
           $table->string('brand_name');
           $table->string('model_name');
           $table->string('price');
           $table->string('description');
           $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}
 




After create “products” table you should create Product model for products, so first create file in this path app/Product.php and put bellow content in product.php file:

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php
 
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Product extends Model
{
    protected $fillable = ['brand_name','model_name','price','description'];
}
 

Step 3: Configure database and migrate tables

Now we just need to create new database in phpmyadmin with any name  and then just change database configuration setting in .env file. There are three things are need to change like DB_DATABASE,DB_USERNAME and DB_PASSWORD. Then run below command.

1
2
3
 
php artisan migrate
 

Step 4: Add Route

Now we have to add route for products CRUD, in this example i added get,put and  method in route for application,  So add bellow line in your route file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<?php
 
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
use Illuminate\Http\Request;
 
 
Route::get('ajaxCRUD', function () {
    $products = App\Product::all();
    return view('ajaxcurd.index')->with('products',$products);
});
Route::get('ajaxCRUD/{product_id?}',function($product_id){
    $product = App\Product::find($product_id);
    return response()->json($product);
});
Route::post('ajaxCRUD',function(Request $request){  
    $product = App\Product::create($request->input());
    return response()->json($product);
});
Route::put('ajaxCRUD/{product_id?}',function(Request $request,$product_id){
    $product = App\Product::find($product_id);
    $product->brand_name = $request->brand_name;
    $product->model_name = $request->model_name;
    $product->price = $request->price;
    $product->description = $request->description;
    $product->save();
    return response()->json($product);
});
Route::delete('ajaxCRUD/{product_id?}',function($product_id){
    $product = App\Product::destroy($product_id);
    return response()->json($product);
});
 

 

Step 5: Create Blade File

In this step we have to create only one blade file that will manage create,update and delete modules with jQuery in modal, So let’s create index.blade.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<html>
  <head>
   <title>Laravel CRUD Demo with code using Ajax without Reloading Page</title>  
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">Laravel CURD Using Ajax without Reloading Page
<button id="btn_add" name="btn_add" class="btn btn-info pull-right"><span class="glyphicon glyphicon-plus"></span>Add New</button>
    </div>
 
      <div class="panel-body">
 
       <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Brand Name</th>
            <th>Model Name</th>
            <th>Price</th>
            <th>Description</th>
            <th>Action</th>
          </tr>
         </thead>
         <tbody id="products-list" name="products-list">
           @foreach ($products as $product)
            <tr id="product{{$product->id}}">
             <td>{{$product->id}}</td>
             <td>{{$product->brand_name}}</td>
             <td>{{$product->model_name}}</td>
             <td>{{$product->price}}</td>
             <td>{{ str_limit($product->description, $limit = 65, $end = '...') }}</td>
              <td>
              <button class="btn btn-warning btn-detail open_modal" value="{{$product->id}}"><span class="glyphicon glyphicon-edit"></span></button>
              <button class="btn btn-danger btn-delete delete-product" value="{{$product->id}}"><span class="glyphicon glyphicon-trash"></span></button>
              </td>
            </tr>
            @endforeach
        </tbody>
        </table>
       </div>
       </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Product</h4>
            </div>
            <div class="modal-body">
            <form id="frmProducts" name="frmProducts" class="form-horizontal" novalidate="">
                <div class="form-group error">
                 <label for="inputName" class="col-sm-3 control-label">Brand Name</label>
                   <div class="col-sm-9">
                    <input type="text" class="form-control has-error" id="brand_name" name="brand_name" placeholder="Brand Name" value="">
                   </div>
                </div>
                  <div class="form-group error">
                 <label for="inputName" class="col-sm-3 control-label">Brand Name</label>
                   <div class="col-sm-9">
                    <input type="text" class="form-control has-error" id="model_name" name="model_name" placeholder="Model Name" value="">
                   </div>
                </div>
                  <div class="form-group error">
                 <label for="inputName" class="col-sm-3 control-label">Price</label>
                   <div class="col-sm-9">
                    <input type="text" class="form-control has-error" id="price" name="price" placeholder="Product price" value="">
                   </div>
                </div>
                  <div class="form-group error">
                 <label for="inputName" class="col-sm-3 control-label">Description</label>
                   <div class="col-sm-9">
                    <textarea name="description" id="description" class="form-control"></textarea>
                   </div>
                </div>              
            </form>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="btn-save" value="add">Save changes</button>
            <input type="hidden" id="product_id" name="product_id" value="0">
            </div>
        </div>
      </div>
  </div>
</div>
    <meta name="_token" content="{!! csrf_token() !!}" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="{{asset('js/ajaxscript.js')}}"></script>
</body>
</html>
 

Add modal preview:-

Edit Modal preview:-

Step 6: Create JS File

In this step we require to create ajaxscript.js file through this file we can manage create,edit and delete methods.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
  var url = "http://localhost/blog/public/ajaxCRUD";
    //display modal form for product editing
    $(document).on('click','.open_modal',function(){
        var product_id = $(this).val();
      
        $.get(url + '/' + product_id, function (data) {
            //success data
            console.log(data);
            $('#product_id').val(data.id);
            $('#brand_name').val(data.brand_name);
            $('#model_name').val(data.model_name);
            $('#price').val(data.price);
            $('#description').val(data.description);
            $('#btn-save').val("update");
            $('#myModal').modal('show');
        })
    });
    //display modal form for creating new product
    $('#btn_add').click(function(){
        $('#btn-save').val("add");
        $('#frmProducts').trigger("reset");
        $('#myModal').modal('show');
    });
    //delete product and remove it from list
    $(document).on('click','.delete-product',function(){
        var product_id = $(this).val();
         $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        })
        $.ajax({
            type: "DELETE",
            url: url + '/' + product_id,
            success: function (data) {
                console.log(data);
                $("#product" + product_id).remove();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });
    //create new product / update existing product
    $("#btn-save").click(function (e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        })
        e.preventDefault();
        var formData = $('#frmProducts').serialize();
        //used to determine the http verb to use [add=POST], [update=PUT]
        var state = $('#btn-save').val();
        var type = "POST"; //for creating new resource
        var product_id = $('#product_id').val();;
        var my_url = url;
        if (state == "update"){
            type = "PUT"; //for updating existing resource
            my_url += '/' + product_id;
        }
        $.ajax({
            type: type,
            url: my_url,
            data: formData,
            dataType: 'json',
            success: function (data) {
                var product = '<tr id="product' + data.id + '"><td>' + data.id + '</td><td>' + data.brand_name + '</td><td>' + data.model_name + '</td><td>' + data.price + '</td><td>' + data.description + '</td>';
                product += '<td><button class="btn btn-warning btn-detail open_modal" value="' + data.id + '"><span class="glyphicon glyphicon-edit"></span></button>';
                product += ' <button class="btn btn-danger btn-delete delete-product" value="' + data.id + '"><span class="glyphicon glyphicon-trash"></span></button></td></tr>';
                if (state == "add"){ //if user added a new record
                    $('#products-list').append(product);
                }else{ //if user updated an existing record
                    $("#product" + product_id).replaceWith( product );
                }
                $('#frmProducts').trigger("reset");
                $('#myModal').modal('hide')
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });
 

View Demo

Okay, Now we have created successfully Ajax CURD operation, If you want to download of demo then click here For other laravel tutorials you can follow my blog Laravel category

Thanks!!!

Jquery Draggable/Sortable table rows example

by 5 Comments

In this post, I am going to explain how to create DRAGGABLE/SORTABLE table rows using jquery UI. If you need to create sortable table rows in your project then you can easily create table rows sortable using jquery.ui, jQuery UI provides sortable(); function. It helps to make sortable table rows and also perform ajax code in sortable function.

In this post you can learn drag and drop table rows and store in database using ajax, you just need to see below code .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<html lang="en">
<head>
    <title>Jquery - Drag and Drop sortable table demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">  
    <style>
    table tr{
      cursor: move;
      }
      </style>
</head>
<body>
<div class="container text-center">
     <h2>Jquery - Sortable table rows live example</h2>
     <table class="table table-bordered">
        <tbody><tr>
            <th>No</th>
            <th>Brand Name</th>
            <th>Model Name</th>
            <th>Price</th>
            <th>Image</th>
            
        </tr>
        <tr>
        <td>1</td>
        <td>VIVO</td>
        <td>VIVO V5s Perfect Selfie (Matte Black, 64 GB)  (4 GB RAM)</td>
        <td>15999</td>
        <td><img id="blah" src="http://localhost/blog/public/images/download (4).jpg" width="50"></td>
      
    </tr>
        <tr>
        <td>2</td>
        <td>VIVO</td>
        <td>VIVO V7 (Gold, 32 GB)  (4 GB RAM)</td>
        <td>18999</td>
        <td><img id="blah" src="http://localhost/blog/public/images/download (3).jpg" width="50"></td>
      
    </tr>
        <tr>
        <td>3</td>
        <td>Apple</td>
        <td>Apple iPhone 8 Plus (Gold, 64 GB)</td>
        <td>70199</td>
        <td><img id="blah" src="http://localhost/blog/public/images/download (2).jpg" width="50"></td>
      
    </tr>
        <tr>
        <td>4</td>
        <td>Apple</td>
        <td>Apple iPhone 8 Plus (Space Grey, 64 GB)</td>
        <td>69999</td>
        <td><img id="blah" src="http://localhost/blog/public/images/download (1).jpg" width="50"></td>
        
    </tr>
        <tr>
        <td>5</td>
        <td>Sumsung</td>
        <td>Samsung Galaxy J7 Pro (Gold, 64 GB)  (3 GB RAM)</td>
        <td>19900</td>
        <td><img id="blah" src="http://localhost/blog/public/images/samsung-galaxy-j7-pro-3-gb-ram-64-gb_1502447381.jpeg" width="50"></td>
        
    </tr>
        </tbody></table>
</div>
<script type="text/javascript">
  $('tbody').sortable({
    // you can use ajax code here
  });
</script>
</body>
</html>
 




Jquery Draggable/Sortable table rows example
Jquery Draggable/Sortable table rows example

View Demo

If you want to store/update anything with database, then you can use ajax with sortable() function, I have already added comment for ajax code, and you can download demo from my github repository https://github.com/hellomohsinkhan/drag-and-drop-table-demo.git

For other jQuery and PHP tutorials or queries you can follow my blog here

Thanks!!