eftec/dashone

PHP 的快速 UI 仪表板生成器

1.7 2020-04-23 13:08 UTC

This package is auto-updated.

Last update: 2024-09-23 23:04:47 UTC


README

PHP 的极简仪表板/后端库

这个库允许创建一个带有基本功能的快速仪表板,无需任何模板,仅使用代码。在示例中,我们用不到 80 行代码创建了一个仪表板的页面( examples/test.php

Build Status Packagist Total Downloads Maintenance composer php php CocoaPods

示例( examples/test.php

doc/screenshot1.jpg

另一个示例( examples/test.php

doc/screenshot2.jpg

入门

通过 composer 安装

composer require eftec/dashone

创建一个新的对象 DashOne(您需要通过 autoload.php 或手动添加所需的包含文件)

$dash=new DashOne();

然后您可以使用 DashOne() 类的对象来渲染页面

use eftec\DashOne\DashOne;
$dash=new DashOne();
$dash->head('Example - test 1'); // it is required
$dash->rawHtml('hello world'); 
$dash->footer(); // it is required
$dash->render(); // it renders an empty page

DashOne

这是生成仪表板的主要类。

$dash=new DashOne();

可以使用流畅的接口添加新元素(每个方法都是链式调用的)。

示例:渲染一个空页面

use eftec\DashOne\DashOne;
$dash=new DashOne();

$dash->head('Example - test 1');
$dash->footer();
$dash->render();

使用流畅的示例

use eftec\DashOne\DashOne;
$dash=new DashOne();
$dash->head('Example - test 1')
    ->footer()
    ->render();

其中 head 方法是渲染页面 的必需方法。

页脚也是必需的,以关闭所有标签。

每个方法链必须以 render() 方法结束(它绘制页面)。

// see examples/testuibasic.php
$dash=new DashOne();
$dash->head('Example - test 1')
	->menuUpper(['Upper title'])
	->startcontent()
	->menu($links) // left menu
	->startmain()
	// here it goes the content
	->endmain()
	->endcontent()
	->footer()
	->render();		

doc/screenshotdashboardempty.jpg

方法 DashOne->head($title,$extrahtml)

它渲染页面的 head。此元素是必需的

$dash->head('示例 - 测试 1');

方法 DashOne->menuUpper($leftControls=[],$rightControls=[])

它渲染仪表板的上部菜单。

$dash->menuUpper([new ImageOne('https://via.placeholder.com/32x32')," - ",new LinkOne('可口可乐','#')]);

AlertOne

它渲染一个警报

new AlertOne($title,$content,$class);

示例

$dash->alert("It is an alert","Content of the alert")

doc/screenshotalert.jpg

$dash->alert("It is an alert","Content of the alert","alert alert-danger")

doc/screenshotalert2.jpg

ButtonOne

它渲染一个按钮

new ButtonOne('button1','点击我','btn btn-primary');

您可以使用方法 buttons(DashOne)来渲染按钮(或多个按钮)。该方法有一个第二个参数用于确定按钮是否与表单对齐。

$buttons=[
	new ButtonOne('button1','Click me','btn btn-primary'),
	new ButtonOne('button2','Click me too','btn btn-danger')
];


$dash->buttons($buttons,false) // where if true then buttons are aligned with the form

$dash->buttons($buttons,true)

doc/screenshotbutton1.jpg

$dash->buttons($buttons,false)

doc/screenshotbutton2.jpg

ContainerOne

它渲染一个容器,可以在其中添加其他元素(如按钮)

new ContainerOne($html);

示例

	$dash->container("<div class='form-group row'><div class='col-sm-10 offset-sm-2'>%control</div></div>")
		->buttons($buttons)

方法 container() 后必须跟一个视觉方法。此方法添加到容器内部(在 %control 处)

另一个示例

	$dash->container("<hr>%control<hr>")->rawHtml("hello world")

doc/screencontainer.jpg

FormOne

它渲染一个表单。它需要一个声明性数组。

如果设置了定义,则使用定义来定义输入对象的类型(文本框、文本区域等)

如果定义中的一个字段是数组,则用于渲染下拉项

如果没有定义,则使用值来定义输入对象的类型(文本框、文本区域等)

您还可以渲染一个消息(例如警告或信息)您可以使用关联数组绘制表单。默认情况下,每个字段都将是一个文本框

$currentValue=['IdProduct'=>"2"
	,'Name'=>"aaa"
	,'Price'=>"333"
	,'Type'=>1
	,'Description'=>''];

$dash->form($currentValue) // it's macro of new FormOne()

doc/screenshotform0.jpg

或者您可以显式指定字段的类型

$definition=['IdProduct'=>'hidden'
	,'Name'=>'text'
	,'Price'=>'text'
	,'Type'=>['cocacola','fanta','sprite']
	,'Description'=>'textarea'];
$currentValue=['IdProduct'=>"2"
	,'Name'=>"aaa"
	,'Price'=>"333"
	,'Type'=>1
	,'Description'=>''];

$dash->form($currentValue,$definition) // it's macro of new FormOne()

doc/screenshotform.jpg

UlOne

它绘制一个列表(无序列表)

$valueUL=['Cocacola','Fanta','Sprite'];

$dash->ul($valueUL) // it's macro of new UlOne()

doc/screenshotul.jpg

ImageOne

它绘制一个图像

new ImageOne('https://via.placeholder.com/32x32');

https://via.placeholder.com/32x32

LinkOne

它绘制一个超链接

第一个值是链接的名称,第二个是地址。第三个值(可选),是一个图标(使用 Font-Awesome 类)

创建一个新的LinkOne实例('Cocacola','#','far fa-star') $dash->link('Cocacola','#','far fa-star')

doc/link.jpg

TableOne

它渲染一个表格。

$values=
	[
		['IdProduct'=>1,'Name'=>'Cocacola','Price'=>"20.2"],
		['IdProduct'=>2,'Name'=>'Fanta','Price'=>"30.5"],
		['IdProduct'=>3,'Name'=>'Sprite','Price'=>"11.5"],
	];

$dash->table($values)->...  // it must be called after the render

doc/screenshottable.jpg

一个基本的页面

任何页面至少需要调用head(),footer()和Render()。

Render()绘制页面,因此必须在链的末尾调用。

例如,一个基本页面如下

$dash=new DashOne();

$dash->head('Example - test 1');
$dash->footer();
$dash->render();

一个空的仪表板

$dash=new DashOne();

$dash->head('Example - test 1');
$dash->menuUpper([new ImageOne('https://via.placeholder.com/32x32')," - ",new LinkOne('Cocacola','#')]);
$dash
	->startcontent() // start the container
		->menu($links) // left menu
		->startmain() // start the main container
			->title('Table of Products')
		->endmain()
	->endcontent();
$dash->footer();
$dash->render();

登录页面

examples/testlogin.php

doc/login.jpg

该库有一个内置的登录页面,它依赖于PHP的session变量。

要使用该函数,必须启用session

@session_start(); // or via php.ini

我们可以按以下方式读取当前session

$_SESSION['user'];
// array(5) { ["username"]=> "" ["password"]=> "" ["remember"]=> "" ["_csrf"]=>  "" ["result"]=> bool(true) }

第1步 初始化登录页面

要创建一个登录页面,必须在构造函数中初始化,如下所示

使用数组(用户和密码)

$dash=new DashOne(false,true,'salt_123',['user'=>'john','password'=>'doe']);

或使用方法

$validateLogin= function($user) {
    // this method could access to the database
    return $user['username'] === 'john' && $user['password'] === 'doe';
};
$dash=new DashOne(false,false,'salt_123',$validateLogin);

第2步 获取值

$user=[];
$dash->fetchLogin($user); // user could returns [ ["username"]=> "" ["password"]=> "" ["remember"]=> "" ["_csrf"]=>  "" ["result"]=> bool(true) ]

第3步 如果用户正确登录,则重定向

if($user['result']) {
    @session_write_close();
    header('location:testlogin2.php');
    die(1);
} else {
    $message='user or password incorrect';
}

第4步 显示登录屏幕

$dash->head('Example - test 1','',true) // title of the page, extra content in the header and true= for login page
    ->login($user,null,'Sign-In') // user variable, null or link to the login image and title of the login page
        ->alert($message) // (optional) shows an alert inside the login page
        ->footer() // (optional) shows a footer inside the login
    ->endLogin() // end login container
->render();

第5步 登出

用户验证保存在session中。因此,要关闭session,我们可以销毁session或取消设置session。

session_destroy();
unset($_SESSION['user']);

第6步 CSRF保护(可选)

可以通过添加以下行添加额外的保护层

if (!$dash->checkCSRF()) {
    die(1);
}

第7步 验证session

可以验证session

if (isset($_SESSION['user']) ) {
	// user has sign-in
} else {
    // user hasn't sign-in
}

版本

  • 1.7 2020-04-23
    • 添加.gitattribute 示例和文档不是通过composer推送的(应该会减小大小)
  • 1.6.2 2020-04-23
    • 修复:清理。
  • 1.6.1 2020-03-03
    • 修复:TableOne现在允许非零基数组
  • 1.6 2020-18-01
    • 修改LinkOne::LinkOne()
    • 添加summernote到textarea
  • 1.5 2020-16-01
    • 新增方法getLogin()
    • 新增方法logout()
  • 1.4 2020-16-01
    • 新增方法cssLogin()
    • 新增方法login()
    • 新增方法fetchLogin()
    • 新增方法decrypt()
    • 新增方法encrypt()
    • 新增字段var $salt='';
    • 新增字段$validateLogin (callable)
    • 更改到__construct()
  • 1.3 2020-01-15 新增方法fetchvalue()
  • 1.2 2019-03-30 新增更改。
  • 1.1 2019-03-17 修复了一些错误
  • 1.0 2019-03-01 第一个版本。

版权

版权Jorge Patricio Castro Castillo 双许可(LGPL v3和商业许可)

您可以在商业/封闭源代码产品或服务中使用,同时

简而言之(这是许可协议)

  • 您必须保留版权声明。
  • 如果您修改了库,则必须共享更改和修改。