Agile UI is a high-level PHP framework for creating Web User Interfaces
Universal and Open-Source PHP framework providing you with wide range of "UI Components" - CRUD, Wizard, Form, Table, Menu, ProgressBar, AutoComplete and many more. Any component can be invoked from pure PHP and integrated into legacy, open-source PHP apps or framework.
A most common use for Agile UI is building "Admin Interface", "Signup Wizard" or even "SaaS Web App UI" where a consistent UI needs to be built with minimum effort.
Agile UI is loved by beginners because it saves time by hiding complex details and providing simple-to-use syntax. It makes it possible to build apps without need to know HTML or JavaScript. If you are senior PHP developer, you'll appreciate extensibility of components and depth and stability of data persistency. ATK UI + Data + API combination is very well suited for commercial apps.
$crud = new \atk4\ui\CRUD();
$crud->setModel(new User($db));
echo $crud->render();Components can be used inside your existing app, Wordpress plug-in or your framework of choice
Here is an example of a multi-step wizard:
<?php
$app = new \atk4\ui\App('Test App');
$app->initLayout('Centered');
$wizard = $app->add('Wizard');
$wizard->addStep('Welcome', function ($wizard) {
$wizard->add(['Message', 'Welcome to wizard demonstration'])->text
->addParagraph('This code is only executed when you are on step1');
});
$wizard->addStep(['Set DSN', 'icon'=>'configure', 'description'=>'Database Connection String'], function ($step) {
$form = $step->add('Form');
$form->addField('dsn', 'Connect DSN', ['required'=>true]);
$form->onSubmit(function ($form) use ($step) {
$step->memorize('dsn', $form->model['dsn']);
return $step->jsNext();
});
});
$wizard->addStep(['Migration', 'description'=>'Create or update table', 'icon'=>'database'], function ($step) {
$consore = $step->add('Console');
$step->buttonFinish->addClass('disabled');
$console->set(function ($consore) use ($step) {
$dsn = $step->recall('dsn');
$model = $step->recall('model');
$console->output('please wait');
sleep(1);
$console->output('connecting to "'.$dsn.'"');
sleep(2);
$console->output('initializing table for model "'.$model.'"');
sleep(1);
$console->output('DONE');
$console->send($step->buttonFinish->js()->removeClass('disabled'));
});
});See this example in action: http://ui.agiletoolkit.org/demos/wizard.php
Agile UI is part of Agile Toolkit
Agile UI uses framework "Agile Data" which offers a rich set of enterprise features compared to ORMs layer of transparency and can be connected to SQL, NoSQL, API or other persistence media. See also "Agile API" if you need a RestAPI for a Mobile / JS application:
If you are new to PHP and Development download bundle of Agile UI from www.agiletoolkit.org that includes some examples and dependencies, works without any set-up.
Those who are confident with composer should use: composer require atk4/ui.
Start with components such as CRUD, Form and Wizard.
For a LIMITED TIME, I'm offering you to get access to my course on udemy.com. New Lessons are coming out every week, here is how you can apply.
It's really easy to put together a complex Admin system, here is how. Add this code to a new PHP file (tweak it with your database details, table and fields):
<?php
$app = new \atk4\ui\App('My App');
$app->initLayout('Admin');
$db = \atk4\data\Persistence::connect('mysql://user:pass@localhost/yourdb');
class User extends \atk4\data\Model {
public $table = 'user';
function init() {
parent::init();
$this->addField('name');
$this->addField('email', ['required'=>true]);
$this->addField('password', ['type'=>'password']);
}
}
$app->add('CRUD')->setModel(new User($db));Your new CRUD is fully interactive, will dynamically reload itself and support pagination. You can also add more actions, drill-downs, quick-search and dialogs easily:
Last release of Agile UI has put emphasis on high-level components and real-time interactivity.:
- Wizard - ideal for sign-up process
- Login - add-on implementing authentication control
- Console - real-time output tracking
- ProgressBar - execute long process in PHP and show progress-bar to user
- Upload - Form field for uploading files and images
- AutoComplete - drop-in replacement for DropDowns
- Password field - store passwords encrypted
- Lister - show information as a list
- Radio buttons - yet another alternative to a drop-down
- Static data - provide data to Table in array.
Previous release has introduced:
- Loader which can be nested, carry arguments, integrate with events and more.
- Notifyer flashes a dynamic success/error message
- Modal View and Dynamic jsModal are similar but use different techniques for Dynamic Dialogs
- AutoComplete is a new Form Field that will automatically traverse referenced Model and even open a Modal dialog for adding a new record. Very useful for web apps!
- jsSSE is an easy-to-use module for running background jobs in PHP and displaying progress visually through a Progress-bar or Console.
Add-ons:
- User Authentication - User Log-in, Registration and Access Control for Agile UI
- Charts add-on - Modern looking and free charts with chartJS
- Audit for Models - Record all DB operations with Undo/Redo support for Agile Data
- Data for Reports - Implement data aggregation and union models for Agile Data
Integrations:
- Agile UI for Wordpress - Write Wordpress plugin using Agile UI
- Laravel Agile Data - ServiceProvider for Agile Data
- .. more connectors wanted. If you are working to integrate Agile UI or Agile Data, please list it here (even if incomplete).
Agile UI comes with a lot of ready-to-use components, but they are also very extensible:
- application layouts (e.g. Admin and Centered)
- form fields (e.g. CheckBox and Calendar)
- table columns (e.g. Status and Links)
- action-column actions (e.g. Button, Expander)
- data types (e.g. money, date)
- persistences (APIs and Services)
- models (e.g. User, Country)
Agile UI comes with many built-in components:
| Component | Description | Introduced |
|---|---|---|
| View | Template, Render Tree and various patterns | 0.1 |
| Button | Button in various variations including icons, labels, styles and tags | 0.1 |
| Input | Decoration of input fields, integration with buttons. | 0.2 |
| JS | Assign JS events and abstraction of PHP callbacks. | 0.2 |
| Header | Simple view for header. | 0.3 |
| Menu | Horizontal and vertical multi-dimensional menus with icons. | 0.4 |
| Form | Validation, Interactivity, Feedback, Layouts, Field types. | 0.4 |
| Layouts | Admin, Centered. | 0.4 |
| Table | Formatting, Columns, Status, Link, Template, Delete. | 1.0 |
| Grid | Toolbar, Paginator, Quick-search, Expander, Actions. | 1.1 |
| Message | Such as "Info", "Error", "Warning" or "Tip" for easy use. | 1.1 |
| Modal | Modal dialog with dynamically loaded content. | 1.1 |
| Reloading | Dynamically re-render part of the UI. | 1.1 |
| Actions | Extended buttons with various interactions | 1.1 |
| CRUD | Create, List, Edit and Delete records (based on Advanced Grid) | 1.1 |
| Tabs | 4 Responsive: Admin, Centered, Site, Wide. | 1.2 |
| Loader | Dynamically load itself and contained components inside. | 1.3 |
| Modal View | Open/Load contained components in a dialog. | 1.3 |
| Breadcrumb | Push links to pages for navigation. Wizard. | 1.4 |
| ProgressBar | Interactive display of a multi-step PHP code execution progress | 1.4 |
| Console | Execute server/shell commands and display progress live | 1.4 |
| Items, Cards | Responsive Items and Card implementaiton. | 1.4 |
| Wizard | Multi-step, wizard with temporary data storing. | 1.4 |
Agile UI has still more stuff ahead:
- Make all the texts and error messages translateable
- Add "Developer Console" into UI
- ..
All bundled components are free and licensed under MIT license. They are installed together with Agile UI.
External and 3rd party components may be subject to different licensing terms.
Although we support composer require atk4/ui for your first application we recommend you to:
- Go to www.agiletoolkit.org and click download.
- Follow instructions to run the "sample" app.
- Blank repo is bundled, so
git add . && git commit - Deploy to cloud - Heroku, Google App Engine or any Docker environment through
git push.
Semantic of Agile UI is really simple:
require "vendor/autoload.php";
$app = new \atk4\ui\App('My First App');
$app->initLayout('Centered');
$app->add('HelloWorld');That's right! We have HelloWorld an LoremIpsum components!! Next is a code for a more sophisticated admin system:
require "vendor/autoload.php";
$db = new \atk4\data\Persistence_SQL('mysql:dbname=test;host=localhost','root','root');
$app = new \atk4\ui\App('My Second App');
$app->initLayout('Admin');
$m_comp = $app->layout->menu->addMenu(['Layouts', 'icon'=>'puzzle']);
$m_comp->addItem('Centered', 'centered');
$m_comp->addItem('Admin', 'admin');
$m_comp = $app->layout->menu->addMenu(['Component Demo', 'icon'=>'puzzle']);
$m_form = $m_comp->addMenu('Forms');
$m_form->addItem('Form Elements', 'from');
$m_form->addItem('Form Layouts', 'layout');
$m_comp->addItem('CRUD', 'crud');
$app->layout->leftMenu->addItem(['Home', 'icon'=>'home']);
$app->layout->leftMenu->addItem(['Topics', 'icon'=>'block layout']);
$app->layout->leftMenu->addItem(['Friends', 'icon'=>'smile']);
$app->layout->leftMenu->addItem(['Historty', 'icon'=>'calendar']);
$app->layout->leftMenu->addItem(['Settings', 'icon'=>'cogs']);
$f = $app->layout->add(new \atk4\ui\Form(['segment']));
$f_group = $f->addGroup('Name');
$f_group->addField('first_name', ['width'=>'eight']);
$f_group->addField('middle_name', ['width'=>'three']);
$f_group->addField('last_name', ['width'=>'five']);
$f_group = $f->addGroup('Address');
$f_group->addField('address', ['width'=>'twelve']);
$f_group->addField('zip', ['Post Code', 'width'=>'four']);
$f->onSubmit(function ($f) {
$errors = [];
foreach (['first_name', 'last_name', 'address'] as $field) {
if (!$f->model[$field]) {
$errors[] = $f->error($field, 'Field '.$field.' is mandatory');
}
}
return $errors ?: $f->success('No more errors', 'so we have saved everything into the database');
});We have many examples in the demo folder.
Agile UI fits into your framework of choice. That's why we didn't bother adding our own Router and didn't want to give you another REST framework. Enjoy Agile UI in any environment - Wordpress, Laravel, Yii or plain PHP. If you need to render only one component without boilerplate HTML, use render() method.
<head>
<link rel="stylesheet" type="text/css" href="http://semantic-ui.com/dist/semantic.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="http://semantic-ui.com/dist/semantic.js"></script>
</head>
<body>
<?php
$component = new \atk4\ui\HelloWorld();
echo $component->render();
?>
</body>Because Agile UI makes active use of Agile Core and Agile data, I'm linking all related documentation here:
If anything is unclear or you want to get in touch with other awesome people who use Agile UI:
- Forum - use label Agile UI or Agile Data.
- Developer Gitter Live Chat - if you wish to say Thanks to those who created Agile UI (for free!)
What makes this UI toolkit stand out from the others UI libraries is a commitment to bring rich and interractive web components that can be used for web applications without any custom-HTML/JS. Additionally, Agile UI provides a very controlled and consistent ways to develop "add-ons" that include visual components and other re-usable elements.
To achieve its goal, Agile UI offers both the tools for creating components and a wide selection of built-in components that provides the "minimum standard Web UI":
Q: HTML-generating frameworks are lame and inefficient, real coders prefer to manually write HTML/CSS in Twig or Smarty.
Agile UI focuses on "out-of-the-box" experience and development efficiency. Our ambition is to make PHP usable for those who are not familiar with HTML/CSS/JS. In fact, we are working with some educational partners and have "education course" available for secondary school students that teaches how to build Data-drivven Web Apps in just 1 year.
Q: What about Angular-JS, VueJS and all the other JS frameworks?
You should look into Agile API, which provides binding between Agile Data and your front-end framework.
Q: I prefer Bootstrap CSS (or other CSS) over Semantic UI
We considered several CSS frameworks. We decided to focus on Semantic UI implementation as our primary framework for the following reasons:
- Great theming and customisation variables
- Clear patterns in class definitions
- Extensive selection of core components
- jQuery and JavaScript API integrations
Bearing in mind the popularity of Bootstrap CSS, we plan to build extension for it sometime soon.
Agile UI, Data and API are projects we develop in our free time and offer you free of charge under terms of MIT license. If you wish to say thanks to our core team or take part in the project, please contact us through our chat on Gitter.
