Fully support multiple Pigeon Table directive in single webpage.
Added loader to Pigeon Table.
Bugs Fixed
Fixed improper data display on CRUD operation when multiple Pigeon Table directive are used.
Improvements
No need declare "pigeon-table" Angular Module to your project anymore.
Provide details in delete confirmation modal.
Refactored code to provide better performance.
Changed to Pigeon Core as backend processing.
Removed Angular Cookies as it was not suitable for storing data purpose.
Added AngularUI Bootstrap for better integration between Bootstrap and AngularJS.
Introduction
Pigeon-table is one of the sub-projects initiated under ngPigeon project. It is a self-contained and convenient module for web application development particularly, for operations such as data retrieval, data presentation as well as data manipulation. The module is handy and adaptable for quick web application prototyping purpose.
By using pigeon-table module, web app developers could render table(s) with data retrieved from databases into their web application by just defining the custom HTML element tag i.e. <pigeon-table> and specify a SQL SELECT statement in the "query" attribute. Besides, pigeon-table also supports aggregated queries statement e.g. SELECT … AVG(…) … GROUP BY… which will return aggregated records and results.
This work has been published in:
Voon, Y. N., & Ong, C. A. (2017). Pigeon-table: A quick prototyping tool using twitter bootstraps and AngularJS for data-driven web application development. In 2017 International Conference on Computer and Drone Applications (IConDA) (pp. 33–37). IEEE. https://doi.org/10.1109/ICONDA.2017.8270395
As soon as you downloaded all the plugins, just includes all the plugins into your project in the order as below:
jQuery
Bootstrap
AngularJS
AngularUI Bootstrap
Pigeon Table
*** If your project is running in PHP, you can insert the "includes.php" to include all the dependencies. The "includes.php" file is located in "pigeon-table/php/includes.php".
Database Configuration
A simple database configuration is required to connect and retrieve the data from SQL database. The database configuration is stored in "pigeon-core/configdb.php".
How to use?
Pigeon Table Directive
In order to use pigeon table, you are required to include "pigeon-table" HTML tag into your project.
<pigeon-table query="SELECT * FROM user_account" editable="false" control="true"></pigeon-table>
Pigeon Table Settings
query - SQL query for data retrieval *Required
editable (Default: false) - Whether enable CRUD operation or not. CRUD operation will be disabled if Pigeon Table detects aggregation table or JOIN table.
control (Default: true) - Whether display the panel on top of the Pigeon Table or not.
Pigeon Table Components
Sortable
The data can be sorted to either ascending or descending order by clicking on the column title.
Searchable
The data can be filtered by entering the data you want to search along with the column you want to filter with. Besides that, exact match provides sensitive filtering to the data.
Excludable
The data also can be excluded by entering the data you want to exclude along with the column you want to exclude with. *Note: The data will be excluded in exact match (case sensitive).
Insert (CRUD Operation)
You can insert the data into that MySQL table. The input field of the insertion is based on the columns that are specified in the SQL query. Data validation will be conducted base on the MySQL table column's type.
Edit (CRUD Operation)
You can edit the data of every row. The input field of the edit form is based on the columns that are specified in the SQL query. The validation is based on the MySQL table column's type. *Note: The primary key input field cannot be edit.
Delete (CRUD Operation)
You can delete the data of each row by clicking on the delete button. A delete confirmation box will pop out before perform deletion.
