Xataface is a full-featured PHP Web application framework for building a MySQL database front-end for, targeted at non-technical users who will do the task of actually entering data. Based on real life experience of using it for a search and comparison website for smart devices, we explain the why and how of using it. 

In web development the focus is always on the development side. But what about the infrastructure, the crucial data backend that the web site is going to operate on? 

It really depends on the content. In some cases a CMS will be enough but in a data-driven web site like that of an e-shop where you have to combine information from a variety of tables staying true to the relational model, a CMS might not be the most appropriate solution. So where does that leaves us?

Entering data using raw SQL queries might be possible for a low volume site with simple entity relationships, but for anything more involved it's not practical.

We faced this dilemma when building Smart Device Seeker, a tablet, smart phone and smart watch search and comparison engine, built in Mysql, Perl and the Dancer framework. As a site with a complex ERD and continuously updated content, a solution was required that would allow non developers and end users to be able to populate the database through an easy to use data entry interface.

Enter Xataface, a PHP based framework that focuses on data-driven design as it allows the development of web sites by first designing the database and then designing the pages used to display the data. It provides a simple configurable web interface to a MySQL database enabling users to update, delete, and find data in the underlying database. It automatically generates the appropriate forms, lists, and menus for a user to interact with the database without having to know any SQL.

This tutorial starts by setting up a Xataface instance on a Nginx powered web server and goes on to deploy a miniature database and observe how everything comes together.

The Setup

Log in to your server and navigate to the document root directory. In Nginx it usually is /usr/share/nginx/html
So:  

enter the following:

This loads the core Xataface files, initializes the framework and displays the application

enter the following,replacing the [_database] section values with your own:

The '_database' section specifies the database connection information for the MySQL database.

The '_tables' section specifies which tables will be included in the navigation menu for the application:

The '_modules' section demonstrates Xataface's extensibility with plugins (in this case we import the depeselect widget. Since we won't use it for this example you can safely remove it) 

We must also protect the installation from the outside world preferably using simple basic http authorization.

Navigate to htpasswd-generator and enter the credentials you are going to use for protecting the installation.Copy the generated string inside a .htpasswd file

for example the following entries

username: nikos
password:test

will generate the following string :

nikos:$apr1$6JMXEB4K$lNwF3RAqa3BMoKcEKeBzb0

Then place .htpasswd under /etc/nginx/sites-available

Now,we must activate the authorization at Nginx level :

enter the following:

In effect we tell Nginx to protect the conf.file by denying all access through the web, as it contains sensitive data such as the database's username and password  while at the same time activating basic authorization so that the users who access Xataface's interface can only do so through entering their credentials:

A Xataface application, at its core, provides four standard operations: add new records, edit existing records, delete records, and find records. The records will reflect the database's relational schema as we build the HTML forms around them:

For brevity, we 'll leave a lot of entities out of the sample ERD, keeping the minimum required for going through the examples.

To make Xataface understand the schema we have to create a subdirectory for each table under /xataface/tables, in essence replicating the [_tables] section of the conf.ini file :

There are four main files that are generally contained in a table's configuration directory:

• fields.ini - Contains configuration for the fields of the table (e.g., field labels, descriptions, widget types, etc...)
  
  
• valuelists.ini - Contains value lists (vocabularies) that can be used in the table to limit input into certain fields like select lists.
  
  
• relationships.ini - Defines the relationships between this table and other tables in the application.
  
  
• <TableName>.php (where <TableName> is the name of the table. - A delegate PHP class that allows you to further customize the behaviour of the application with respect to this table. May contain custom fields, importing/exporting functionality, permissions information, and more...

In general,these files must be created when there is a complex relationships between the tables.In this case so we just require them for tables Model,ModelColor and ModelOS, leaving the Brand,Color and OS directories empty: