README

基于 Bootstrap 4 模板的表单构建库。此库包括可自定义的模板，可用于除 Bootstrap 之外的其他框架，支持多语言，并提供配置方式以持久化表单数据。

安装
用法
依赖
配置
- 设置前缀目录
- 获取配置变量
翻译
模板
选项 FormsEngine\Questions\Element\Option
元素 FormsEngine\Questions\Element
表单定义的序列化和反序列化 FormsEngine\Questions\Loader
分页 FormsEngine\Questions\Pagination
API 和持久化 FormsEngine\Answers\Persistence
- CSV
- 电子邮件
- JSON
- JSONDB
- MySQL
- XLSX
- 实现自己的持久化

安装

使用 composer 安装。

$ composer require apollo29/forms-engine

用法

在您的 index.php 中，您首先需要创建一个新的 FormsEngine 实例。

use FormsEngine\FormsEngine;

$engine = new FormsEngine();

然后添加一些元素来创建您的表单，并渲染它。

use FormsEngine\Questions\Element;

$r = $engine->renderer();

$r->add(new Element\Title('My First FormsEngine'));
$r->add(new Element\Text('Text Input Label','Text Input Placeholder','Text Input Helptext'));

$r->render();

依赖

此库使用的所有依赖项的列表。

CSS/JS

bootstrap
material
jquery-typeahead
Parsley.JS 输入验证
JOII (JavaScript Object Inheritance Implementation 用于 FormsEngine\Questions\Element 的 JS 对象

PHP

twig/twig 模板
myclabs/php-enum
phpcollection/phpcollection 集合、序列、集合
philipp15b/php-i18n 多语言
slim/slim RESTful
nategood/httpful HTTP 调用
league/csv CSV
rakibtg/sleekdb JSONDB
phpmailer/phpmailer 电子邮件
phpoffice/phpspreadsheet Excel

配置

设置一个名为 configFile 的会话变量以及您自己的 config.json 的路径和 json 文件名。以下是一个标准 config.json 的示例。如果您对标准的 config.json 满意，则无需设置会话变量。

$_SESSION['configFile'] = __DIR__ . '/config.json';

config.json

{
    "addDirPrefix":true,
    "templateDir":"/Templates/",
    "langDir":"/Translations/",
    "form" : {
        "dir":"/forms/",
        "name":"defaultForm",
        "method":"ajax",
        "messageAfterSubmit":true,
        "createAnother":true,
        "addTimestamp":false
    },
    "pagination": {
      "active":true,
      "reset":false
    },
    "render" : {
        "load":"COOKIE",
        "config":"jsonForm"
    },
    "persistence" : {
        "type":"JSONDB",
        "email": {
            "emailTo":"test@test.test"
        },
        "externalConfigs":[]
    }
}

设置前缀目录

待办事项

Config::setDirPrefix(__DIR__, "dir");
Config::setDirPrefix(__DIR__, "langDir");
Config::setDirPrefix(__DIR__, "templateDir");

获取配置变量

待办事项

Config::getInstance()->get('form','name')

翻译

待办事项

模板

待办事项

选项 `FormsEngine\Questions\Element\Option`

用于 RadioGroup、CheckboxGroup、Typeahead 和 Select 元素。

用法

$option = new Option();

$option->add('first',1);
$option->add('second',2);
$option->add('third',3);

公开方法

__construct() 构造函数
add($label, $value, $selected = false) 向 Option 元素添加值
addAll($options) 添加一个 Option 元素的数组
all() 获取所有元素
static create($label, $value, $selected = false) 返回一个 Option 元素
serialize() 获取用于持久化的序列化元素，包含所有属性和值。
static deserialize($object) 将对象反序列化为元素

私有方法

static camelCase($str, array $noStrip = []) 获取 camelCased 字符串，用于 id

元素 `FormsEngine\Questions\Element`

所有元素基本上都是标准的 HTML5 输入字段，并具有以下方法

公开方法

___construct($label) 如果没有其他说明，这是默认构造函数
serialize() 获取用于持久化的序列化元素，包含所有属性和值。
prepare()参见 serialize()
static deserialize($object) 将对象反序列化为元素
toObjectVar($key, $value, $class = null) 用于将数组映射到元素的键/值。
script() 获取所有用于渲染的 JavaScript 代码。
required() 将元素设置为必填
readonly() 将元素设置为只读
disabled() 将元素设置为禁用
inputmask($mask,$type = 'mask') 设置输入掩码（有关更多文档，请参阅依赖项）
addStyle($style) 添加额外的 CSS 类
attr($attr, $value) 添加属性

私有方法

setId($id,$isName = false) 设置 id 和可选的 name 属性
setName($name) 设置 name 属性
static camelCase($str, array $noStrip = []) 获取 camelCased 字符串，用于 setId 和 setName

文本、电子邮件、数字、日期、日期时间

继承自 Input

用法

$text   = new Text('Label','Placeholder','Helptext');

$email  = new Email('Label','Placeholder','Helptext');

$number = new Number('Label','Placeholder','Helptext');

$date     = new Date('Label','Placeholder','Helptext');
$dateTime = new DateTime('Label','Placeholder','Helptext');

模板/HTML（type 根据元素不同而不同）

<div class="form-group">
  <label for="label">Label</label>
  <input type="text" class="form-control" id="label" name="label" placeholder="Placeholder" aria-describedby="label-helptext">
  <small id="label-helptext" class="form-text text-muted">Helptext</small>
</div>

公开方法

__construct($label, $placeholder = null, $helptext = null) 构造函数
render($twig) Twig 模板引擎的渲染方法

多行文本框

继承自 Input

用法

$element = new Textarea('Label','Helptext');

模板/HTML

<div class="form-group">
  <label for="label">Label</label>
  <textarea
    class="form-control"
    id="label"
    name="label"
    rows="3"
    aria-describedby="label-helptext">
  </textarea>
  <small id="label-helptext" class="form-text text-muted">Helptext</small>
</div>

公开方法

__construct($label, $helptext = null) 构造函数
render($twig) Twig 模板引擎的渲染方法

隐藏

继承自 Element

用法

$element = new Hidden('id','Value');

模板/HTML

<input
    type="hidden"
    id="id"
    name="id"
    value="Value">

公开方法

__construct($id, $value = null) 构造函数
render($twig) Twig 模板引擎的渲染方法

自动完成

继承自 Text

使用，与数组一起

$options = array('first','second','third','fourth');

$array = new Typeahead('Label',$options,'Placeholder','Helptext');

使用，与 Option 一起。有关更多信息，请参阅 Option

$option = new Option();
$option->add('Germany','GER');
$option->add('Italy','ITA');
$option->add('Switzerland','SUI');

$option = new Typeahead('Label',$option,'Placeholder','Helptext');

模板/HTML

<div class="form-group typeahead__container">
  <label for="label">Label</label>
  <input type="text" class="form-control" id="label" name="label" placeholder="Placeholder" aria-describedby="label-helptext" autocomplete="off">
  <small id="label-helptext" class="form-text text-muted">Helptext</small>
</div>

公开方法

__construct($label, $options, $placeholder = null, $helptext = null) 构造函数
render($twig) Twig 模板引擎的渲染方法

单选框

继承自 Element

用法

$element = new Radio('Label','Value','Name',true);

模板/HTML

<div class="form-group">
  <div class="custom-control custom-radio">
    <input
      type="radio"
      class="custom-control-input"
      id="Label"
      value="Value"
      name="Name"
      checked="checked">
    <label class="custom-control-label" for="Label">Label</label>
  </div>
</div>

公开方法

__construct($label, $value, $name, $checked = false) 构造函数
render($twig) Twig 模板引擎的渲染方法

单选框组

继承自 Element

使用，请参阅 Option 以获取更多信息

$option = new Option();
$option->add('first',1);
$option->add('second',2);
$option->add('third',3);

$element = new RadioGroup('Label',$option,'Name');

模板/HTML

<div class="form-group">
  <label for="label">Label</label>
  <div class="mt-2" id="label">
    <!-- Renders all Option Elements -->
    <div class="custom-control custom-radio">
        <input
            type="radio"
            class="custom-control-input"
            id="first"
            name="Name"
            value="1">
        <label class="custom-control-label" for="first">first</label>
    </div>
    <!-- /End -->
  </div>
</div>

公开方法

__construct($label, $options, $name = null) 构造函数
render($twig) Twig 模板引擎的渲染方法

复选框

继承自 Element

用法

$element = new Checkbox('Label','Value',true);

模板/HTML

<div class="form-group">
  <div class="custom-control custom-checkbox">
    <input
      type="checkbox"
      class="custom-control-input"
      id="Label"
      value="Value"
      checked="checked">
    <label class="custom-control-label" for="Label">Label</label>
  </div>
</div>

公开方法

__construct($label, $value, $checked = false) 构造函数
render($twig) Twig 模板引擎的渲染方法

复选框组

继承自 Element

使用，请参阅 Option 以获取更多信息

$option = new Option();
$option->add('first',1);
$option->add('second',2);
$option->add('third',3);

$element = new CheckboxGroup('Label',$option);

模板/HTML

<div class="form-group">
  <label for="label">Label</label>
  <div class="mt-2" id="label">
    <!-- Renders all Option Elements -->
    <div class="custom-control custom-checkbox">
        <input
            type="checkbox"
            class="custom-control-input"
            id="first"
            name="first"
            value="1">
        <label class="custom-control-label" for="first">first</label>
    </div>
    <!-- /End -->
  </div>
</div>

公开方法

__construct($label, $options) 构造函数
render($twig) Twig 模板引擎的渲染方法
elementKeys() 所有 Option 键

下拉列表

继承自 Element

使用，请参阅 Option 以获取更多信息

$option = new Option();
$option->add('first',1);
$option->add('second',2);
$option->add('third',3);

$element = new Select('Label',$option,true,'Helptext');

模板/HTML

<div class="form-group">
  <label for="label">Label</label>
  <select class="custom-select" id="label" name="label">
    <!-- Renders all Option Elements -->
    <option value="1">first</option>
    <!-- /End -->
  </select>
  <small id="label-helptext" class="form-text text-muted">Helptext</small>
</div>

公开方法

__construct($label,$options,$nullable = false,$helptext = null) 构造函数
render($twig) Twig 模板引擎的渲染方法

是/否

渲染一个 Yes/No Radio 元素，使用 "Yes" / "No" 或布尔值。

继承自 ElementGroup

用法

$element = new YesNo('Name',true);

模板/HTML，请参阅 Radio 元素

公开方法

__construct($name, $booleans = false) 构造函数
render($twig) Twig 模板引擎的渲染方法

段落

继承自 Element

用法

$element = new Paragraph('Title','Description');

模板/HTML

<h2>Title</h2>
<p>Description</p>

公开方法

__construct($title=null,$description=null) 构造函数
render($twig) Twig 模板引擎的渲染方法

标题

每个表单只能有一个 Title 元素。

继承自 Paragraph

用法

$element = new Title('Form Title','Description');

模板/HTML

<h1>Form Title</h1>
<p>Description</p>

公开方法

__construct($title,$description=null) 构造函数
render($twig) Twig 模板引擎的渲染方法

按钮、重置、提交

参见 #26。

继承自 Element

用法

$button       = new Button('Button');

$reset        = new Reset('Reset'); // Shorthand
$resetButton  = new Button('Reset Button');

$submit       = new Submit('Submit'); // Shorthand
$submitButton = new Button('Submit Button');

模板/HTML

<button type="button" class="btn btn-secondary">
  Button
</button>

<button type="reset" class="btn btn-light">
  Reset
</button>

<button type="submit" class="btn btn-primary">
  Submit
</button>

公开方法

__construct($label,$buttonType=null) 构造函数
render($twig) Twig 模板引擎的渲染方法

表单定义的序列化和反序列化 `FormsEngine\Questions\Loader`

待办事项

分页 `FormsEngine\Questions\Pagination`

待办事项

API 和持久化 `FormsEngine\Answers\Persistence`

待办事项

CSV

电子邮件

JSON

JSONDB

MySQL

XLSX

实现自己的持久化

namespace Somewhere\Persistence;

use \FormsEngine\Answers\Persistence\Persistence;

class TestPersistence implements Persistence {

  public static function persist($name, $data){
    echo 'Insert Data into '.$name.': '.\implode(',',$data);
  }

  public static function load($name){
      echo 'Load Data from '.$name;
  }
}

apollo29 / forms-engine

维护者

详细信息

README

安装

用法

依赖

配置

设置前缀目录

获取配置变量

翻译

模板

选项 `FormsEngine\Questions\Element\Option`

元素 `FormsEngine\Questions\Element`

文本、电子邮件、数字、日期、日期时间

多行文本框

隐藏

自动完成

单选框

单选框组

复选框

复选框组

下拉列表

是/否

段落

标题

按钮、重置、提交

表单定义的序列化和反序列化 `FormsEngine\Questions\Loader`

分页 `FormsEngine\Questions\Pagination`

API 和持久化 `FormsEngine\Answers\Persistence`

CSV

电子邮件

JSON

JSONDB

MySQL

XLSX

实现自己的持久化

apollo29 / forms-engine

维护者

详细信息

README

安装

用法

依赖

配置

设置前缀目录

获取配置变量

翻译

模板

选项 FormsEngine\Questions\Element\Option

元素 FormsEngine\Questions\Element

文本、电子邮件、数字、日期、日期时间

多行文本框

隐藏

自动完成

单选框

单选框组

复选框

复选框组

下拉列表

是/否

段落

标题

按钮、重置、提交

表单定义的序列化和反序列化 FormsEngine\Questions\Loader

分页 FormsEngine\Questions\Pagination

API 和持久化 FormsEngine\Answers\Persistence

CSV

电子邮件

JSON

JSONDB

MySQL

XLSX

实现自己的持久化

选项 `FormsEngine\Questions\Element\Option`

元素 `FormsEngine\Questions\Element`

表单定义的序列化和反序列化 `FormsEngine\Questions\Loader`

分页 `FormsEngine\Questions\Pagination`

API 和持久化 `FormsEngine\Answers\Persistence`