jQuery SQL Designer quick start guide

Table of Contents

To build a new database
To edit tables and columns that have already been created
Managing the display of tables
Defining and managing relations
Generating SQL and working with live databases

jQuery SQL Designer can be accessed at the following URL: http://users.ox.ac.uk/~oucs0107/JQuery-SQLDesigner/designer.html

jQuery SQL Designer is an online tool for designing databases. It can be used to design a new database, modify an existing database or to view the design of a live database.

When you visit/start the database designer you will see a page that looks like a blank sheet of graph paper with a column of icons superimposed on the left hand side (LHS).  We will refer to the blank graph paper as the design grid.

To build a new database

To start designing a database designing, drag the Table icon from the LH side onto the design grid. The Table icon looks like this:

This will bring up a pop-up window that allows you to create a database:

Fill in the fields within the window by giving the name of database and its description and click button Create Database. This will result in another pop-up window to confirm that the database has been created:

Click the OK button to continue.

Next we need to create the first table within the database. To create a table drag the Table icon onto the design grid again. This will bring up a pop-up window that allows you to create a table:

Fill in the fields within the window by giving the name of table and its description and click button Create Table.

This will create a new table with a primary key of "ID". This primary key is an integer. (Note: In the current version of the SQL Designer it is not possible to create a table without a primary key but in future versions this will be possible.)  The table will appear on the grid:

The next step is to add columns to the table we have just created. We can do this using the Column icon:

Drag the Column icon onto the table that we have just created (the table should be visible on the design grid). This will bring up a pop-up window that allows you to create a column:

The fields in this window are related in that when you choose one value for one field it may change or restrict the values that you can enter into subsequent fields.  For example:

  1. The fields Data Length and Scale are either disabled or enabled depending on the Column Type:

    1. When Column Type is set to CHARACTER the field Data Length is editable:

    2. When Column Type is set to DECIMAL or FLOAT, the fields Data Length and Scale are editable:

  2. If the field labeled “Is column a primary key?” is set to Primary Key then the form automatically sets the column properties as Not Null and Unique and makes them un-editable (the fact that you cannot edit the fields is shown by the fact that they are greyed out):

Fill in the fields within the Create Column window as appropriate and click the button Create Column. This will add a new column to the existing table:

To edit tables and columns that have already been created

Each table and column name has a Properties icon on the right hand side:

To modify a table or column double click the properties icon of the table or column you wish to modify. This will bring up either the Update Table or Update Column pop-up window:

The pop-up window allows you to verify or modify the existing values for the table or column along with the option to delete the table or column by using the Delete Table or Delete Column button. If you make any changes you need to click the Update Column button to make the changes take effect.

Managing the display of tables

Each table has a minimise icon in the top left hand corner:

To minimise the table, double click the minimise icon. The table will be collapsed to show just the title with inverted colours as shown below:

Tables can be moved around the design grid by clicking on the table header and dragging table to new location before releasing the mouse button. Mouse icon changes on entering the table header and changes again when user right click the mouse button.

Defining and managing relations

A relational database is a collection of tables that are connected in some way.  In order to connect tables within the database we need to define relations between fields within different tables.

There are many different types of relations that we can specify, e.g. One-To-One (Identifying and Non Identifying), One-To-Many One (Identifying and Non Identifying) and Many-To-Many.  These relations are depicted by icons in the LH column:

Icons with dashed lines represent Non Identifying relations. Similarly icons with continuous line represent Identifying relations.

When any of the relation buttons is clicked it changes its appearance as shown below:


Defining a relation between two tables is a three stage process:

  1. Click the appropriate relation icon (the icon will turn red to indicate that it has been selected)

  2. Double click the header of the table containing the Primary Key

  3. Double click the header of secondary (dependent) table.

A line will appear between the two tables representing the relation and the relation icon reverts to its normal state.

Once a relation has been established you can examine that relation by hovering the mouse over the line representing the relation.  When you do this, the relation will change colour and the headers of tables involved in that relation are highlighted.

Generating SQL and working with live databases

To help make the process of learning how to use the database designer it is possible to load an example database and see how it is constructed.  To do this you can use the load example database icon:

The example database that gets loaded is a fairly complicated database used by Roman Economy Project in Oxford University. This functionality is also useful for demo purposes.

Once you have designed a database it is possible to generate the SQL commands necessary to reproduce this database.  You can do this using the SQL Generator icon:

In addition to generating the SQL for the live running database it is also possible to draw the design diagram.  You can do this using the load  live database icon:

Click on the load live database icon. Thsi will take you through the process of migrating a databse that you alreday have into a DaaS database. The first step brings up the ‘Remote Database Connection Properties’pop-up window as below:

You will need to fill in the fields in this window as appropriate to the database that you wish to load:

  • Database type: currently only MySQL and PostgreSQL are supported

  • Database Host URL: the host name where database is located.  Do not specify and protocol, e.g. daas.oucs.ox.ac.uk is correct while http:// daas.oucs.ox.ac.uk will not work.

  • Database port: for MySQL the default port is 3306 and for PostgreSQL it is 5432.  However, you should contact your system administrator if you are not sure of the port number.

  • Database name: use alpha numeric characters only

  • User name: the details of the user who has access to the database

  • Password: the password of the user who has access to the database

Finally click  the connect button to complete the migration process.

Behind the scenes, the migration process is performing the following steps:

  • Pull the database design from the source database

  • Pull the data from the source database

  • Create a new database within the DaaS

  • Populate the new database with the data pulled from the source databse

As a result of what is happening behind the scenes, the load live database process can be used to migrate a database between different database formats. Each site will have an 'in-house' database format that they use to store databases within the DaaS. (In Oxford's case this is Postgres but other sites may use a different databse format.) So, when you migrate an exiting database that is not in Postgres format into the DaaS the migration process will convert that databse from its orginal source form, eg Access, into Postgres.