PHP-CRUD-UI updated to v2

13 Mar 2019 - by 'Maurits van der Schee'

Okay, so I finally updated my two automatic CRUD-UI projects to v2 of PHP-CRUD-API. One is written in Vue 2.6 with Bootstrap 4 and the other in PHP 7 with Bootstrap 3. The result may not be directly usable as a custom web application, but it may provide you with a quick start or as an admin interface.

Use case

When you are building a mobile or web app you often need to store some data centrally on a server. This is typically done using an API and a database. After creating the tables in your favorite database technology (MySQL, PostgreSQL or SQL Server) you can upload and configure "api.php" from the PHP-CRUD-API project. This gives you an API that allows you to do CRUD (Create Read Update and Delete) operations on your data. In order to manage the data you need an admin user interface interface. Uploading and configuring the "ui.php" file from the PHP-CRUD-UI project will give you this instant admin interface.

Functionality

Navigation, viewing, editing and deleting of the data is supported. The relationships of the various data tables are exposed with custom properties in the open API specification. This allows the user interface to show drop-down inputs for foreign key values and to filter related tables on relevant records. Because the exposed open API specification reflects the security model, the applied security model is also reflected in the user interface.

Missing features

Now there are many things that are missing and could be added, for instance:

Documentation for basic usage and modification.
Authentication support (basic authentication and JWT).
Pagination with various page sizes (and enable it by default).
Base the input type on the field type (support date picker).
Ordering of results by clicking table headers.
Filtering on any column and value, with any operator.
Configurable set of columns in list view.
Configurable display columns for foreign key values.
Generator of specific form code, so it can be customized.
Easy customizable colors, fonts and logos.

This list is not exhaustive, but these are definitely required to make it a nice admin interface.

Vue variant

My dear friend Mark ported the PHP-CRUD-UI to Vue (and named it "vue-crud-api" and I also updated this port to be compatible with PHP-CRUD-API v2. I loved doing that and I learned a thing or two about web application development in Vue. Because I also upgraded to Bootstrap 4, I also learned the differences between Bootstrap 3 and 4. Things that come to mind are: no more "extra small" elements and there is no longer a "well" component.

Open source

All the code is available for you to play with. It is MIT licensed and published on Github. If you have feedback, then please do use the Github issues and I promise to give you a reply.

See: https://github.com/mevdschee/php-crud-ui

Enjoy!

PS: Liked this article? Please share it on Facebook, Twitter or LinkedIn.

TQ
dev.com