中條 美冬

1643111160

Laravel 8Vueで無限スクロールロードをさらに作成する方法

この包括的なガイド全体を通して、laravelプロジェクトのvuejsコンポーネントを使用してVueJs無限ページスクロールを構築する最も簡単な方法を見つけることができます。

無限スクロールは、ユーザーが最終的な洞察なしにコンテンツの大きなチャンクをスクロールできるようにする手順です。このメソッドは、ページを下にスクロールすると、ページを完全に更新し続けます。

一般的に、無限スクロールは、ユーザーエクスペリエンスを向上させるために、ほとんどの最新のアプリケーションで使用されています。eコマースサイトでは、1つのページに複数の製品を表示できます。アプリをスクロールすると、アプリケーションのビューにさらに多くのデータが読み込まれます。

同じパラダイムを使用して、主にページスクロールイベントが発生したときに、より多くの複数の製品をロードする小さなアプリを作成します。このように、laravel vuejsアプリで無限ページスクロールを使用してすべての製品を表示します。

Laravelプロジェクトをインストールする

最初はlaravelプロジェクトのインストールから始まるので、ターミナルを開いて次のコマンドを実行します。

composer create-project laravel/laravel laravel-vue-infinte-scroll --prefer-dist

データベースの詳細を追加

2番目のステップでは、.env構成ファイルを開き、データベース名、ユーザー名、およびパスワードを追加します。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

モデルを作成して移行を実行する

このステップは、モデルの作成方法を確認することであり、移行を使用してテーブルをデータベースに移行することも同様に重要です。

したがって、コマンドを実行して製品モデルファイルを作成します。

php artisan make:model Product -m

さらに、database / migrations / create_products_table.phpファイルを開き、製品の移行内にテーブル値を追加します。

<?php

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

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('description');
            $table->timestamps();
        });
    }

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

app / Http / Models / Product.phpファイルを開き、次のコードを更新します。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;
    protected $fillable = [
        'name',
        'description'
    ];        
}

モデルを作成してセットアップし、移行した直後に、次のコマンドを実行してデータベース内のProductテーブルを移行します。

php artisan migrate

偽のデータを生成する

まず、製品ファクトリクラスを作成する必要があります。

php artisan make:factory ProductFactory --model=Product

さらに、以下のコードをdatabase \ factorys \ ProductFactory.phpに配置します。

<?php

namespace Database\Factories;

use App\Models\Product;
use Illuminate\Database\Eloquent\Factories\Factory;

class ProductFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Product::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->name,
            'description' => $this->faker->text
        ];
    }
}

コンソールでtinkerコマンドを使用して、データベースにテストデータを生成します。

php artisan tinker
Product::factory()->count(200)->create()

コントローラの生成と構成

コンソールに移動し、次のコマンドを呼び出して新しいコントローラーを生成します。

php artisan make:controller ProductController

このパスapp / Http / Controllers / ProductController.phpで新しく生成されたファイルを開き、次のコードを更新します。

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;


class ProductController extends Controller
{
    public function index(Request $request)
    {
        return view('welcome');
    }

    public function fetchProducts()
    {
        $data = Product::orderBy('id')->paginate(12);
        return response()->json($data);
    }
}

ルートを作成する

次に、HTTP GETリクエストを作成し、データベースから製品データをフェッチするのに役立つルートを作成します。以下のコードをroutes / web.phpファイルに挿入します。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/

Route::get('/', [ProductController::class, 'index']);

Route::get('/products', [ProductController::class, 'fetchProducts']);

Laravel VueUIをインストールする

このステップでは、以下のコマンドでlaravel VueUIパッケージをインストールする必要があります。

composer require laravel/ui
php artisan ui vue

さらに、コマンドを実行して、必要なnpm依存関係をインストールします。

npm install

Vue InfiniteLoadingをインストールする

次の手順では、npmコマンドを使用してvue-infinite-loadingパッケージをインストールします。これは、Vue.jsアプリケーションに役立つ無限スクロールプラグインです。

無限のスクロールを実装したり、非常に簡単な方法でより多くの機能をロードしたりするための迅速なソリューションを提供します。この素晴らしいプラグインが提供する機能は次のとおりです。

  • モバイルフレンドリー
  • 内部スピナー
  • 2方向のサポート
  • 結果メッセージ表示をロード
npm install vue-infinite-loading

LaravelにVueJSをセットアップする

リソース/ JS /コンポーネント/フォルダにInfiniteScrollComponent.vueファイルを作成し、次のコードを追加し、リソース/ JS /コンポーネント/ InfiniteScrollComponent.vueファイル:

<template>
    <div> 
        <div v-for="product in Products" :key="product.id">
            {{product.name}}
        </div>
        <infinite-loading @distance="1" @infinite="handleLoadMore"></infinite-loading>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                Products: [],
                page: 1,
            };
        },
        methods: {
            handleLoadMore($state) {

                this.$http.get('/products?page=' + this.page)
                    .then(res => {
                        return res.json();
                    }).then(res => {
                        $.each(res.data, (key, value) => {
                            this.Products.push(value);
                        });
                        $state.loaded();
                    });

                this.page = this.page + 1;
            },
        },
    }
</script>

 

次に、Vue単一ファイルコンポーネントを有効にするためのvue-resourceパッケージをインストールします。

npm install vue-resource

次に、resources / js / app.jsファイルを開き、VueJSコンポーネントを登録します。

require('./bootstrap');
window.Vue = require('vue').default;
import VueResource from 'vue-resource';

Vue.use(VueResource);

Vue.component('infinite-scroll-component', require('./components/InfiniteScrollComponent.vue').default);
Vue.component('InfiniteLoading', require('vue-infinite-loading'));

const app = new Vue({
    el: '#app',
});

さらに、resources / views /welcome.blade.phpファイル内にvueコンポーネントを追加します。

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

<div class="container" style="margin-top:30px">
    <infinite-scroll-component></infinite-scroll-component>
</div>

@endsection

最後に、resources / viewsパス内にレイアウトフォルダーを作成し、app.blade.phpファイルも作成します。

resources / views / layout / app.blade.phpに次のコードを追加します:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}" />

    <title>Laravel Vue JS Load More Example</title>

    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>

</html>

テストアプリケーション

最後に、vueアセットをコンパイルするには、以下のコマンドを実行する必要があります。

npm run watch

別のターミナルを開き、laravel開発サーバーを起動します。

php artisan serve

ブラウザを開き、アドレスバーに次のURLを貼り付けて、アプリを表示します。

http://127.0.0.1:8000

laravel vue js InfiniteScrollチュートリアルは終了しました。このチュートリアルでは、vue-infinite-loadingパッケージを使用してLaravel 8 VueJSアプリでLoadMoreを作成する方法を学びました。

 

What is GEEK

Buddha Community

Seamus  Quitzon

Seamus Quitzon

1595201363

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete

Juned Ghanchi

1621508419

Laravel App Development Company in India, Hire Laravel Developers

Hire our expert team of Laravel app developers for flexible PHP applications across various cloud service providers.

With this easy build technology, we develop feature-rich apps that make your complex business process a lot easier. Our apps are,

  • More secure and scalable.
  • A good framework lets you manage and organize resources better.
  • And have a rich community base.

Get your business a best in classlaravel app. Hire laravel app developers in India. We have the best organizational set-up to provide you the most advanced app development services.

#laravel app development company india #hire laravel developers india #laravel app development company #hire laravel developers #laravel development agency #laravel app programmers

Liz  Fernandes

Liz Fernandes

1670234150

Best Laravel Development Company

In the present world, PHP is a well-liked framework. Laravel is one of the most well-known frameworks out there. The popularity of Laravel is due to its expressiveness, flexibility, good controllers, strength, seamless caching, and time savings when handling tasks like routing, authentication, sessions, and many more.

Laravel is a PHP framework that everyone who knows PHP should be familiar with. The Laravel PHP framework is simple to learn and use, but it is packed with useful features. Despite rising market competition, many developers consider Laravel to be one of the best PHP frameworks available.

WPWeb Infotech is a top Laravel development company in India and the US since 2015. They develop reliable, scalable Laravel web and mobile apps using Ajax-enabled widgets, MVC patterns, and built-in tools. WPWeb Infotech has top-notch expertise in combining a variety of front- and back-end technologies like Laravel + VueJS, Laravel + Angular, and Laravel + ReactJS to create scalable and secure web architectures, so you don't have to worry about scalability and flexibility while developing your product. They understand business scale and recommend technology that fits. Agile experts reduce web and mobile app development time and risk.

When it comes to hiring Laravel developers from India, they are the best choice because their Laravel developers can work according to your time zone to provide you with hassle-free, innovative, and straightforward web development solutions. Being the most trusted Laravel development company in India, they can help you reach new heights of success, unleashing the power of the Laravel PHP framework.

Partner with one of India’s best Laravel Development Company and get the most expertise in Laravel development.

#laravel  #laravel-development #laravel-development-company #laravel-development-services #hire-laravel-developers

sophia tondon

sophia tondon

1618970788

Top Laravel Development Company India | Laravel Development Services

Laravel is a popular framework for website development, acquiring 25.85% of the PHP framework market share. As a most admired framework among PHP frameworks, it is being utilized for e-commerce, enterprise, social media, and various different types of websites.

There are more than 1 million websites worldwide available over the web that are created using Laravel. Laravel framework is the first preference of PHP developers as it allows them to develop highly scalable, flexible, and faster web applications.

Surely, you, too, would want to deliver a splendid and unhindered user experience to your target audience over the web. Laravel framework can help you achieve this pursuit at ease; all you need to do is hire Laravel developers from reliable & coveted hosts. But! There is no shortage of Laravel development companies that promise to deliver an excellent solution, but only some are able to deliver top-notch quality.

Therefore, I have decided to enlist top Laravel development companies to help you find a reliable and expert host for web development. So, stay hooked with me till the end of this article and explore the best Laravel developers in 2021.

While creating this list, I have kept the following pointers in reflection:

Years of excellence (average 8 years)
Workfolio
Rewards & Recognition
Client rating & feedback
Hourly/Monthly Price
Number of happy clients
Number of successfully launched projects
Minimum man-years experience
So, let’s not waste a minute and glance at top Laravel development companies to hire for creating excellent web solutions.

Read More - https://www.valuecoders.com/blog/technology-and-apps/top-laravel-development-companies-to-hire-experts/

#hire a laravel developer #hire laravel developer #hire laravel developers #laravel developer for hire #laravel developers #laravel developers for hire

sophia tondon

sophia tondon

1620977020

Hire Laravel Developers | Laravel Development Company, Services India

Looking for a team of experienced offshore Laravel developers? Hire a top dedicated team of Laravel developers from India online with 6+ years of average experience on an hourly or dedicated (monthly) basis from ValueCoders and enjoy easy hiring, quality work, and on-demand scalability at up to 60% less cost.

Our offshore Laravel development experts are fully competent to build scalable, secure, and robust custom web apps suiting your business requirements.

First Time Right Process
Complete Control Over The Team
Certified Laravel Coders
Agile & DevOps Enablement
Non-Disclosure Agreement
No Contract Lock-Ins

Visit Us- https://www.valuecoders.com/hire-developers/hire-laravel-developers

#hire a laravel developer #hire laravel developer #laravel development #hire laravel experts #find laravel developers #laravel development services india