FullStackEngineer 2022年3月20日更新

Laravel8での行うローコード開発・Laravel-Generatorを利用した高速開発
Index

Laravel8での行うローコード開発

※　現在随時追加執筆中です。

Laravel-Generatorを利用した高速開発

laravel自体が、高速で開発が可能ですが、色々なライブラリを組み合わせて可能な限り 高速で開発できるようにした内容です。

参考情報

参考：laravel 参考：laravel-generator

前提条件

  • asdfでphpを管理しております。
$ php -v
PHP 8.1.4 (cli) (built: Mar 19 2022 13:49:04) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.4, Copyright (c) Zend Technologies

$ composer --version
Composer version 2.2.9 2022-03-15 22:13:37

laravelをインストール

Installation Via Composer 今回はsailを使わずに行きます。

アプリ名をそのまま appname　として進めます

$ composer create-project laravel/laravel:^9.0 appname $ cd appname

$ php artisan serve

Laravel v9.5.1がインストールされました。

laravel-generatorをインストール

公式サイトにありますが、Laravelのバージョンに合わせた物をインストールする必要があります。

その１

laravel 9　の場合は下記の通りです。それぞれ requireに追加してください。

    "require": {

        //....
        "laravelcollective/html": "^6.3",
        "infyomlabs/laravel-generator": "^4.0",
        "infyomlabs/adminlte-templates": "^4.0",
        "doctrine/dbal": "~2.3"

$ composer update

$ php artisan vendor:publish --provider="InfyOm\Generator\InfyOmGeneratorServiceProvider"

$ php artisan infyom:publish

その２

Check out this page and configure the generator based on your settings.

ジェネレーターのセッティング 現時点で、こちらに記載されてる管理画面用のテンプレートとして今回はAdmin-Lteを利用しています。

Admin-Lteのセッティング

Admin-Lte

$ php artisan ui adminlte --auth

私のnodeの環境は現時点で
node -v
v17.6.0

$ npm install && npm run dev

    Additional dependencies must be installed. This will only take a moment.

    Running: npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps

    Finished. Please run Mix again.

指示通り追加でコマンドを実行します。 $ npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps

再度

$npm run dev エラーはいくつか出ましたが、一応成功したみたい。

これでサーバーから確認してみると、ログイン画面やレジスター画面が出来てて、cssなどもあたってるのを確認出来ます。

データベースの設定

自身の環境に合わせて行ってください。

初期ユーザーの投入

以下でテストの管理者を作成

name:admin email:admin@test.jp password:password

$ php artisan make:seeder UserSeeder

soffice/database/seeders/UserSeeder.php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\Hash;
use App\Models\User;

class UserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        User::create([
            'name' => "admin",
            'email' => 'admin@test.jp',
            'password' => Hash::make('password')
        ]);
    }
}

database/seeders/DatabaseSeeder.php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Database\Seeders\UserSeeder; //追加

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {

        // \App\Models\User::factory(10)->create();
        $this->call([
            UserSeeder::class,
        ]);

    }
}

$ php artisan migrate:fresh --seed

これで、さきほどの画面からログインできるはずです。

scaffoldしていく

コマンドでscaffoldする

$ php artisan infyom:scaffold post

guiを使う

追加

"infyomlabs/generator-builder": "^1.0"

プロバイダーに追加 config/app.php

InfyOm\GeneratorBuilder\GeneratorBuilderServiceProvider::class, 

$ php artisan vendor:publish

 > Provider: InfyOm\GeneratorBuilder\GeneratorBuilderServiceProvider

Copied File [/vendor/infyomlabs/generator-builder/config/generator_builder.php] To [/config/infyom/generator_builder.php]
Publishing complete.

$ php artisan infyom.publish:generator-builder

soffice/config/infyom/laravel_generator.php

これはずしておく
        //'datatables'        => app_path('DataTables/'),

これでGUIを作成可能に

http://localhost:8000/generator_builder

注意 GUI方式だと

Add Primaryで入れる        
$table->id();

Add　Timestampsで入れる
$table->timestamps();
を明示しないと抜けるので注意

作成後に migrate

$ php artisan migrate Migrating: 2022_03_19_133249_create_posts_table Migrated: 2022_03_19_133249_create_posts_table (41.83ms)

            [](https://github.com/yajra/laravel-datatables)


            x
                composer require yajra/laravel-datatables-oracle:"~9.0"

                config/app.php
                ```php
                'providers' => [
                    ...,
                    Yajra\DataTables\DataTablesServiceProvider::class,
                ]

                'aliases' => [
                    ...,
                    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
                ]
                ```

                > $ composer require yajra/laravel-datatables --with-all-dependencies


                不足するファイルは作っておく
                resources/views/layouts/datatables_css.blade.php
                resources/views/layouts/datatables_js.blade.php


                ```
                <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
                <script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
                <script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
                <script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"></script>

                ```
  • jqueryとか追加

resources/views/layouts/app.blade.php

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw==" crossorigin="anonymous" />
  • date入力はおかしくなるので formatを修正するか、無くす

resources/views/posts/fields.blade.php

@push('page_scripts')
    <script type="text/javascript">
        $('#published_at').datetimepicker({
            //ここを削除　format: 'YYYY-MM-DD HH:mm:ss',
            useCurrent: true,
            sideBySide: true
        })
    </script>
@endpush

最新記事一覧

続きを見る

関連コンテンツ

カテゴリー一覧

TOP フルスタックエンジニアを目指すに方々へ Laravel8での行うローコード開発・Laravel-Generatorを利用した高速開発