-
- |
-
Ngotha is an UI automation tool that will convert SQL tables (Create table statements) to HTML forms, with javascript validations and CSS rules. It helps you cut the time spent on UI by 98% and also drastically reduce your development cost.
In this post we are going to explain the engine and the user interface.
UPLOADING YOUR SQL
The first step in generating the HTML forms is uploading your SQL dump that has the 'create table' statements. You could use tools like phpMyAdmin or HeidiSQL to export your SQL dump or you could type your create table statements manually in the text area provided.
Your SQL dump may have other statements such as insert, update, alter etc. All these statements will be stripped out by our parser. The engine uses only your 'create table' statements. These statements are used to generate the HTML forms. As of now we supportonly MySQL database. Its also important to note that the engine supports only a select set of data types since rendering the unsupported ones as UI elements does not make any sense. You do not have to go through the painful process of removing these columns as the engine will take care of ignoring them. We also do not support MS SQL data types as of now.
SUPPORTED DATA TYPES
VARCHAR, TEXT, DATE, SMALLINT, MEDIUMINT, INT, BIGINT, FLOAT, DOUBLE, DECIMAL, DATETIME, YEAR, CHAR, TINYTEXT, MEDIUMTEXT, LONGTEXT, ENUM,SET, BOOL
VIEWING YOUR NEWLY CREATED PROJECT and OLDER ONES
Once the engine is done with parsing statement, you will be taken to the My Projects page. The page will list your newly created project and the older projects. Just click the "Load" button to load the project into the form builder.
GENERATING THE HTML AND EDITING YOUR FORM
Once you have loaded the project in the form editor, you could see the list of tables in the project.
1.Select the table you want to generate the form for.
2.Set the naming conventions.
Giving names to your form input elements can be very tedious and error prone, particularly in case of web applications that might use auto binding on the server side. MVC frameworks like ASP.NET MVC, RoR depend on the names of your form input elements. This entire process is made so easy for you!
We have 3 predefined formats and one option that allows a custom convention. We will talk about each of these conventions now.
Column Name
The name of the input element generated will be the name of the corresponding column.
Here is an example
first_name varchar(20) not null
will be render as
<input type="text" name="first_name" />
ASP.NET MVC
For auto-binding, the naming convention used in ASP.NET MVC ( all versions) framework is {table_name}.{column_name}
Example
Table name : users
first_name varchar(20) not null
Will be rendered as
<input type="text" name="users.first_name" />
Ruby on Rails
For auto-binding or referred as micro formatting in RoR, the naming convention used in ASP.NET MVC (all versions) framework is {table_name}.{column_name}
Latest versions of CakePHP also support this convention. Kindly refer their doc for more.
Example
Table name : users
first_name varchar(20) not null
Will be rendered as
<input type="text" name="users[first_name]" />
Custom Naming
Here is the most awesome part. You could set your own patterns/formats for naming your input elements.
You should use these two tokens {table_name} and {column_name} to set the formats. The token {table_name} will be replaced by the table name and the token {column_name} will be replaced by the column name in the database table. This gives the flexibility to deal with all sorts of server side technologies.
Example
Table name : users
Naming convention pattern : my_{table_name}_{column_name}
first_name varchar(20) not null
Will be rendered as
<input type="text" name="my_users_first_name" />
3. Ajax submission or no Ajax submission.
Ajax form submission or non-ajax form submission, we have got both cases covered. If you are creating a form that submits the data to the server side script asynchronously then the engine will generate the javascript code to make the AJAX submission, thus saving you huge loads of work. You no longer have to write the javascript to make your form submit data in AJAX mode! The final output will have the JS code necessary to do this.
All you have to do is select the form submission type. You also can select the method of submission "GET" or "POST".
4. Form submit URL.
Every form submits its data to a server side code. Enter the URL of the server side code.
Please note that we generate no server side code. This URL will be used in generating the HTML. You can choose to skip it if you want to and later make changes in the generated output.
Once you are done with the above setups, just click the "Generate HTML" button. That’s it. You can see the form in the editor. From here, you can edit/delete your UI elements using our friendly form editor.
GENERATING THE OUTPUT(HTML, JAVASCRIPT, CSS)
Your final output will be in the form of HTML, Javascript, CSS code snippets. Just copy them and use in your local environment.
