jazmy / jaz-form-builder
Laravel 包,用于使用 JQuery 表单构建器创建拖放表单构建器
This package is auto-updated.
Last update: 2024-09-09 07:22:55 UTC
README
注意:本包可能不兼容 Laravel 7 或 8。我不再维护此包,请仅将代码用作创建 jQuery 表单构建器的参考。
一个用于创建使用 JQuery 表单构建器 的拖放表单构建器的 Laravel 包。
演示: http://demoform.jazmy.com/
注意:在演示中,电子邮件、注册和文件上传等功能被禁用
截图
表单字段以 json 格式保存并存储在您的数据库中。您的网站成员可以创建、编辑和删除表单。表单属于创建它们的用户,并且每个表单都有一个唯一的链接,可以公开分享。
表单的 json 版本可用于渲染表单,供用户填写。
示例 Json 表单
[{"type":"header","subtype":"h1","label":"Demo Form 01"},{"type":"paragraph","subtype":"p","label":"This demo form is a potluck sign-up sheet"},{"type":"text","label":"Name","className":"form-control","name":"name","subtype":"text"},{"type":"radio-group","label":"Food Category","name":"foodcategory","other":true,"values":[{"label":"Appetizer","value":"Appetizer"},{"label":"Beverage","value":"Beverage"},{"label":"Salad","value":"Salad"},{"label":"Main","value":"Main"},{"label":"Dessert","value":"Dessert"}]},{"type":"number","label":"How many will it serve","className":"form-control","name":"numberserved","min":"1","max":"50","step":"1"},{"type":"text","label":"Dish Name","className":"form-control","name":"dishname","subtype":"text"},{"type":"checkbox-group","label":"Dietary Restrictions","description":"Which of the following does your dish contain?","name":"dietaryrestrictions","values":[{"label":"Alcohol","value":"Alcohol"},{"label":"Carbs","value":"Carbs"},{"label":"Dairy","value":"Dairy"},{"label":"Egg","value":"Egg"},{"label":"Fish","value":"Fish"},{"label":"Gluten","value":"Gluten"}]},{"type":"textarea","label":"Comment","className":"form-control","name":"comment","subtype":"textarea"}]
表单权限选项
- 公共 - 任何人都可以提交表单,无需登录
- 私有 - 只有您的网站认证成员才能访问表单。提供用户编辑他们以前提交的选项。
要求
- Laravel 5.7
- MySQL
- Laravel 认证 - php artisan make:auth
如果您正在寻找一个可管理的云主机,便于轻松创建 Laravel 网站,那么我强烈推荐 Cloudways。Cloudways 将在几分钟内设置 Laravel 网站和 MySQL 数据库。
包含在包中的依赖项
- jQuery UI - 基于 jQuery 的用户界面操作。 查看 jQuery UI 文档
- jQuery Formbuilder - 拖放全功能的表单编辑。 查看 jQuery Formbuilder 文档
- clipboard.js - 将文本复制到剪贴板。 查看 Clipboard 文档
- parsley.js - JavaScript 表单验证库。 查看 Parsley 文档
- moment.js - 在 JavaScript 中解析、验证、操作和显示日期和时间。 查看 Moment 文档
- footable - 一个基于 jQuery 和为 Bootstrap 制作的响应式表格插件。 查看 FooTable 文档
- sweetalert - 一个美丽的网站错误/警告/确认消息的替代品。 查看 SweetAlert 文档
安装说明
此自定义包的安装需要几个步骤,但我将尽量使其尽可能简单。
第一步
手动编辑您的 composer.json 文件或只需输入
composer require jazmy/jaz-form-builder
第二步
确保您已安装所有依赖项
composer install
注意:对于版本 5.6 及以上,包将自动使用 Laravel 的 包发现功能进行自我注册。这意味着您不需要更新您的 config/app.php 文件。
第三步
我们需要添加额外的数据库表,所以运行以下命令
php artisan migrate
第四步
创建表单包的配置文件。这将在一个名为 config 的文件夹中放置一个名为 formbuilder.php 的文件。在配置文件中,您可以更改包的路由的 URL 路径、要使用的布局模板以及脚本/样式输出部分。
运行以下命令
php artisan vendor:publish --tag formbuilder-config
第五步
更新您的 blade 模板文件。在默认的 Laravel 安装中,模板文件位于此处:/resources/views/layouts/app.blade.php
您需要在 blade 文件的顶部添加新的样式和脚本的标签,就在关闭 head 标签之上
@stack('styles')
在 blade 文件的底部添加标签,就在关闭 body 标签之上
@stack('scripts')
注意:如果您需要更改使用这些 @stack 值调用的文件,您可以更新配置文件。
第六步
通过运行以下命令发布自定义的 blade 视图文件
php artisan vendor:publish --tag formbuilder-views
通过运行以下命令发布公共资源
php artisan vendor:publish --tag formbuilder-public
或者,您可以使用以下命令一次性发布所有内容
php artisan vendor:publish --provider="jazmy\FormBuilder\FormBuilderServiceProvider"
第七步
为了正确链接附件,您需要运行 storage:link 命令,这将使存储文件夹公开可访问
php artisan storage:link
访问应用
太棒了!您做到了!现在可以访问表单应用。 http://your.domain.com/form-builder/forms
查看提交: http://your.domain.com/form-builder/my-submissions
使用特性
您可以在您的应用程序中访问属于用户的表单和提交。要使用特性,请向您的用户模型类添加一个 use 语句。
use jazmy\FormBuilder\Traits\HasFormBuilderTraits; class User extends Authenticatable { use HasFormBuilderTraits; }
现在,您可以运行以下命令来访问用户的表单和提交
$user = User::first(); // get the user's forms $user->forms; // get the user's submissions $user->submissions; // or use static methods on the jazmy\FormBuilder\Models\Form class $user_forms = Form::getForUser($user); // returns a paginated resultset // the jazmy\FormBuilder\Models\Submission class also has a static method for getting the submissions // that belong to a user $my_submissions = Submission::getForUser($user); // returns a paginated resultset
使用事件
当记录被创建或更新时,包会分发多个事件,这样您就可以监听这些事件并在您应用程序的逻辑中执行自定义任务
注意事项
- 请确保您的数据库中有一个名为 users 的表,其中有一个名为 id 的列 {bigSignedInteger}。
- 一旦您在表单上有了提交,不要再次尝试编辑该表单,因为它会破坏早期提交的显示 3。
致谢
特别感谢 Farayola Oladele,他是 Fiverr 上最好的 Laravel 程序员之一: https://www.fiverr.com/harristech 他教了我很多,我强烈推荐他为您的 Laravel 项目提供帮助。