Although Editor's API has been carefully designed to be as accessible as possible while retaining maximum flexibility, it can be a little daunting at first. To help get you kick started with Editor development (or even to speed things up for veterans!) the Editor Generator is available on this site.
You provide Generator details about the table to edit and Generator will return everything needed to put the editable table onto your own server. This can save countless hours of development time as you are using the power of the DataTables library with the flexibility of Editor to produce a highly configurable, editable DataTable with the minimum of effort!
Once you've entered the table and form information into Editor, you are able to download a complete package, based on your input that you can upload to your server and get Editor running almost immediately. You can also see the HTML, Javascript, SQL and server-side scripts that Generator produces individually, so you can apply those to your web-site directly if you already have DataTables/Editor available on your server.
In this tutorial, as well as going through the methods of how to use Generator, we will be applying these ideas to produce a simple "to-do" list example.
When you start using Generator you'll notice that the first item it asks for is the server-side environment and basic SQL information. This is so Generator can include the correct server-side scripts in the files that it generates and address the database as required. Note that if your scripting language or database is not listed in the Server backend and DB option, then you can still use Editor and the Generator, but you will need to create the server-side script. Please let us know what language and database you are using so it can be considered for a future Generator release!
Also required is the database table name that will be used. You can use an existing table if you want to add web editing abilities to it, or create a new table using the SQL from Generator.
For our example we are going to use PHP MySQL and create a table called "todo". The following screenshot shows what the form will look like:
The Form / Table section of the Generator is a table that provides information about each of the columns / fields in the DataTable / Editor. There is typically an overlap between the items which appear in the table and those that appear in the Editor form, but this doesn't always have to be true - Generator has the option of showing information in the DataTable but not presenting it as editable in the form, and vice-versa. This is controlled by the Get and Set options, where if Get is checked the option will be shown in the DataTable and if Set is checked the option will be shown in the Editor interface.
You can add and remove fields from the table using the Add option at the bottom of the table and the Delete column at the right of the table for each column. Also the fields can be reordered by clicking and dragging the Order column cell for each row. The order that the fields are submitted to Generator in is the order that they will be shown in the resulting DataTable and Editor form. This orders can very easily be changed (independently) in the code that Generator produces for your editing interface.
For each field you must enter a label, an SQL column name and select a field type. The field label is used for the DataTable column header and the Editor field label (again this is trivial to alter in the generated code if you wish to use different values for each). The SQL column is simply the name of the SQL table column that you wish to use for the field and the field type defines what field type will be used for the Editor interface. Depending on what value is selected here you may be required to enter additional information such as valuation or optional values.
For our todo list example set the form up to have three fields, with the values shown in the screenshot below:
With Generator now configured for your use case you can simply click the Complete package button at the bottom of the table and have Generator produce everything you need to upload to your server. Click the button and a ZIP file will be downloaded. Unzip this file to see the files that Generator has produced. Note that the file names are based on your table name (in our example here there will be a file called todo.html) - this makes it easy to produce multiple editable tables using Generator that uses the same media - you can put the generated HTML etc into this package.
Before uploading to your server, the is one additional file that must be edited with the DB access information (this is not done using the Generator form for extra security). The file to edit can be found in php/inc/config.php. Open this file and alter the $sql_details parameters to include your database connection parameters. When edited your file might look like this:
Editor<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Database user / pass
*/
$sql_details = array(
"type" => "Mysql", // Database type: "Mysql", "Postgres"
"user" => "editor", // User name
"pass" => "my_password", // Password
"host" => "localhost", // Database server
"port" => "", // Database port (can be left empty for default)
"db" => "my_database" // Database name
);
And that's it! To run your Editor instance all you need to do now is install the SQL that Generator has created (in the sql directory from the generated download) onto your database, and upload the unzipped Editor package to your web-server. Once that is done simply load the generated HTML page in your web-browser and enjoy your work. If you've been following the todo example in this tutorial you'll have a page that looks like this:
Generator is intended as a quick start for Editor only - it is not designed to present every option that Editor has available to it. Once you are happy using Generator, you might wish to get to grips with the API, initialisation options and field options to further customise the interface as your requirements demand. Also don't forget that Editor has a number of plug-in options if you wish to extend its capabilities and display options further!