ホームページ >PHPフレームワーク >ThinkPHP >ThinkPHP6 を使用して動的フォームを実装する

ThinkPHP6 を使用して動的フォームを実装する

WBOYオリジナル: 2023-06-20 20:49:071831ブラウズ

インターネットの普及とさまざまな電子商取引プラットフォームの出現により、動的なフォームは多くの Web サイトで不可欠な機能になりました。動的フォームは、ユーザーがさまざまな情報を入力しやすくするために、必要に応じてページを動的に生成できます。 ThinkPHP6 は優れた PHP フレームワークであり、その強力な機能と開発効率により、さまざまな Web アプリケーションの開発に広く使用されています。この記事では、ThinkPHP6 を使用して動的フォームを実装する方法を紹介します。

1. 準備
まず、ThinkPHP6 フレームワークをインストールして設定する必要があります。次に、LayUI をダウンロードしてインストールする必要があります。LayUI は、動的なフォームの作成に非常に適した人気のあるフロントエンド UI フレームワークです。

2. データベース設計
データベース設計は非常に重要な部分です。この記事では、デモのために MySQL データベースを使用します。データベース構造は次のとおりです:

CREATE TABLE form (
id int(11) NOT NULL,
form_title varchar(50) NOT NULL COMMENT 'フォームタイトル',
form_fields text NOT NULL COMMENT 'フォームフィールド',
is_active tinyint(1) NOT NULL COMMENT '有効かどうか',
create_time datetime NOT NULL COMMENT '作成時刻',
update_time datetime NOT NULL COMMENT '更新時刻'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='ダイナミックフォーム';

その中に, form_titleはフォームのタイトル、form_fieldsはフォームフィールドの情報、is_activeは有効かどうか、create_timeは作成時刻、update_timeは更新時刻を示します。

3. バックグラウンド実装

ルーティングの定義
最初に、ルートディレクトリにルーティングファイルを定義する必要があります。ファイル名は form.php であると仮定します。内容は次のとおりです:

<?php
use thinkacadeRoute;

Route::group('form', function () {
    Route::rule('index', 'form/index', 'get');
    Route::rule('add', 'form/add', 'get|post');
    Route::rule('edit/:id', 'form/edit', 'get|post')->pattern(['id' => 'd+']);
    Route::rule('delete/:id', 'form/delete', 'get')->pattern(['id' => 'd+']);
});

アプリディレクトリに Form.php という名前のコントローラーを作成します。ファイルの内容は次のとおりです:

<?php
namespace appcontroller;

use appmodelFormModel;
use appalidateForm as FormValidate;
use thinkacadeView;
use thinkacadeRequest;

class Form
{
    public function index()
    {
        $formList = FormModel::paginate();
        View::assign('formList', $formList);
        
        return View::fetch();
    }
    
    public function add()
    {
        if (Request::isPost()) {
            $data = Request::param();
            $validate = new FormValidate();
            
            if (!$validate->check($data)) {
                return json(['code' => -1, 'msg' => $validate->getError()]);
            }
            
            $res = FormModel::create($data);
            
            if ($res) {
                return json(['code' => 0, 'msg' => '添加成功']);
            } else {
                return json(['code' => -1, 'msg' => '添加失败']);
            }
        }
        
        return View::fetch();
    }
    
    public function edit($id)
    {
        if (Request::isPost()) {
            $data = Request::param();
            $validate = new FormValidate();
            
            if (!$validate->check($data)) {
                return json(['code' => -1, 'msg' => $validate->getError()]);
            }
            
            $res = FormModel::update($data, ['id' => $id]);
            
            if ($res) {
                return json(['code' => 0, 'msg' => '编辑成功']);
            } else {
                return json(['code' => -1, 'msg' => '编辑失败']);
            }
        }
        
        $form = FormModel::find($id);
        View::assign('form', $form);
        
        return View::fetch();
    }
    
    public function delete($id)
    {
        $res = FormModel::destroy($id);
        
        if ($res) {
            return json(['code' => 0, 'msg' => '删除成功']);
        } else {
            return json(['code' => -1, 'msg' => '删除失败']);
        }
    }
}

アプリディレクトリに FormModel.php という名前のモデルを作成します。ファイルの内容は次のとおりです:

<?php
namespace appmodel;

use thinkModel;

class FormModel extends Model
{
    protected $table = 'form';
    protected $pk = 'id';
    protected $autoWriteTimestamp = true;
    protected $createTime = 'create_time';
    protected $updateTime = 'update_time';
    protected $dateFormat = 'Y-m-d H:i:s';
}

4. フロントエンドの実装

ビューディレクトリに edit.html という名前のファイルを作成しますファイルの内容は次のとおりです:

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>动态表单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>

<body>
    <br>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span id="title">添加表单</span>
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" method="post">
                        <input type="hidden" name="id" id="id">
                        <div class="layui-form-item">
                            <label class="layui-form-label">表单标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="form_title" id="form_title" class="layui-input" lay-verify="required" autocomplete="off" placeholder="请输入表单标题">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">表单字段</label>
                            <div class="layui-input-block">
                                <textarea name="form_fields" id="form_fields" class="layui-textarea" lay-verify="required" placeholder="请输入表单字段，每个字段之间用英文逗号隔开"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                                <button type="button" class="layui-btn layui-btn-primary" onclick="history.go(-1);">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="/layui/layui.js"></script>
    <script>
        layui.use('form', function() {
            var form = layui.form;

            form.on('submit(save)', function(data) {
                $.post('/form/add', data.field, function(res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1}, function() {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.msg, {icon: 2});
                    }
                });
            });
        });

        $(function() {
            var id = $.getUrlParam('id');
            if (id == undefined) {
                $('#title').text('添加表单');
            } else {
                $('#title').text('编辑表单');
                $.get('/form/edit/' + id, function(res) {
                    $('#id').val(res.id);
                    $('#form_title').val(res.form_title);
                    $('#form_fields').val(res.form_fields);
                });
            }
        });
    </script>
</body>

</html>

ビューディレクトリの .html ファイルに、index という名前のファイルを作成します、ファイルの内容は次のとおりです:

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>动态表单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: auto !important;
            white-space: normal !important;
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <br>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">
                    <a href="/form/add" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe654;</i> 添加表单</a>
                </div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>表单标题</th>
                                <th>表单字段</th>
                                <th>是否启用</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% foreach(formList as v) %}
                            <tr>
                                <td>{{ v.id }}</td>
                                <td>{{ v.form_title }}</td>
                                <td>{{ v.form_fields }}</td>
                                <td>{{ v.is_active == 1 ? "是" : "否" }}</td>
                                <td>
                                    <a href="/form/edit/{{ v.id }}" class="layui-btn layui-btn-sm layui-btn-normal">编辑</a>
                                    <a href="#" onclick="deleteItem({{ v.id }});" class="layui-btn layui-btn-sm layui-btn-danger">删除</a>
                                </td>
                            </tr>
                            {% endforeach %}
                        </tbody>
                    </table>
                    <div class="layui-pagination">
                        {{ $formList->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/layui/layui.js"></script>
    <script>
        layui.use('layer', function() {
            var layer = layui.layer;

            deleteItem = function(id) {
                layer.confirm('确定要删除吗？', {icon: 3}, function(index) {
                    $.get('/form/delete/' + id, function(res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1}, function() {
                                parent.location.reload();
                            });
                        } else {
                            layer.alert(res.msg, {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            };
        });

        $.getUrlParam = function(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        };
    </script>
</body>

</html>

5. 最終的な効果

ダイナミックディレクトリの管理ページにアクセスできるようになります。ブラウザから localhost/form/index にアクセスしてフォームを追加、編集、削除したり、フォームの一覧を表示したりできます。フォームを編集するとき、ユーザーは任意の数のフォームフィールドを追加できます。

図 1: フォームリストページ

図 2: フォームの追加ページ

図 3: フォームの編集ページ

概要

ThinkPHP6 と LayUI の使用動的フォームの実装は難しいことではなく、知識とスキルを習得すれば簡単に実装できます。もちろん、この記事で提供されているコードは単なる例であり、必要に応じて変更および最適化できます。この記事が困っている読者の助けになれば幸いです。

以上がThinkPHP6 を使用して動的フォームを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ThinkPHP6 を使用して権限制御を実装する方法次の記事：ThinkPHP6 を使用して権限制御を実装する方法

続きを見る