You are about to embark on a new application development project: the application requirements are clear. The entity relationship diagram (ERD) and the database schema are ready.
It is time to start developing.
But hold on: though the back-end data structure is clear, you dread how slow and painful it will be to build a bespoke front end on top of your back end. There’s got to be a better way to build a front end than spending hours wrestling with React UI component libraries.
And there is.
If you are a back-end or full-stack application developer, a database programmer or administrator, or even a business analyst with a strong grasp of SQL, this article is for you.
In it, we will explain how to create a web front end for a MySQL database using Five.
In this how-to guide, we will go through the 4 steps of creating a front end for a MySQL database. These steps are:
As a result, we will get a custom MySQL database with our own fields, as well as a front-end or graphical user interface (GUI) for end-users to interact with our MySQL database.
If you’d like to skip ahead to our “How To” section, simply scroll down to “How To Create a Front End for a MySQL Database In 4 Steps.“
Five is a low-code development environment that helps software developers build and deploy custom business applications faster. It provides developers with pre-built components that can be mixed with full code almost anywhere.
The Five Integrated Development Environment (IDE) covers the entire full-stack application development process, from data modeling to application deployment. It is ideally suited for building business applications for internal or external users.
Typical applications built with Five are internal tools, departmental applications, operations software, business partner portals, or B2B applications. Good examples are custom CRM solutions, custom membership systems, custom order management systems (OMS), custom product information management systems (PIM), or custom inventory systems.
Developers can download Five onto their local machine to develop and test applications locally free of charge. Only if they build an application that is production-worthy, do they have to sign up for a paid plan with Five.
Start-ups to large businesses can all rely on Five as their all-in-one development environment to develop, maintain and deploy custom business applications in a rapid and standardized manner.
A tech stack (or software stack) describes the combination of technologies used to build an application. Popular stacks that are known for their ability to produce fast and powerful web applications are:
How does Five compare to these popular software stacks?
Five gives developers everything they need to develop a cloud-native, modern full-stack web application in one platform.
Applications that are built with Five
Why should developers use Five, instead of MEAN, MERN, or LAMP to build web applications? The answer is faster development speed, higher standardization, and ease of use.
Of course, developers can always select to develop applications in the traditional, full-code way, setting up their own environment and starting from there. This has always been and will always remain a valid choice for application development.
But there are at least three advantages when using the Five IDE:
With Five, developers get access to an all-in-one developer tool that goes beyond a traditional IDE. Now, let’s understand how to create a front-end for a MySQL database with Five.
There are four steps involved in order to create a front end for a MySQL database:
Let’s start by creating a new application with Five. To do so, launch Five on your computer. The first screen you will see looks like this. Start by clicking on Applications in the top left corner.
Here’s how to create a new web application using Five:
You will now see your new application in the list of all applications that you have created with Five. If this is your first application built with Five, Five will automatically only show this application to you. And once you select the new application, a “Manage” button will appear in the top right corner. Click on this button to access all of Five’s development and deployment features for your new application.
EXPERT TIP: Don’t spend too much time on all the other application settings just yet. There is a lot that you can customize for each application, from making it a multi-user application, to configuring application logs, or customizing application buttons. For now, let’s simply leave the default choices as is. By having created a new application, we have access to all we need to start creating our front end for a MySQL database.
Next, we create our MySQL database inside Five.
Applications built with Five use a MySQL database that is integrated into Five. The database can be created and managed straight from inside the Five development environment. No external MySQL GUI, such as dbForge Studio, phpMyAdmin, MySQL Workbench, Navicat for MySQL, DBeaver, or Beekeeper Studio is required to create, alter or update tables.
However, if you are not ready yet to abandon your MySQL GUI for something new yet, you can also simply import a SQL dump straight into Five. Once imported, you will find all your database tables, their fields, display types, and stored procedures inside of Five. For instructions on how to do so, visit our documentation on help.five.org.
In this tutorial, we will use Five to create our MySQL database tables. To do so, click on Manage, and then on Data, and last on Tables.
From inside Tables, you can:
For a quick tutorial on how to create your first database table, follow our Quick Start Guide that walks you through setting up database tables, as well as building relationships between them.
Or watch this YouTube video that explains Five’s Table Wizard:
EXPERT TIP: Five automatically creates Primary Keys, and Foreign Key fields when you establish a relationship with another table, for you. This means that when you create a new table from scratch and inspect its fields, you will find that Five has automatically added an additional field, the Primary Key, to your table. The field is always named “TableNameKey” and is stored as a GUID. This is where Five stores primary keys for you. So there’s no need for you to create a separate field to serve as a primary key.
Once your database tables are set up, you can start creating forms. Simply click on Visual, and then Forms in the Menu on the top.
Next, click on the Form Wizard. Inside the Form Wizard, select the database table that your new form will be pointing to. For example: say your database contains a table called “Customer”. The form wizard will let you select this table, and will automatically create all the fields that your form should contain for end-users to interact with your database table.
Going from database table to form usually takes just a few seconds. Five makes it incredibly easy to build a CRUD application through its tight integration of the MySQL database into the overall development process. Simply follow this video to create your first form:
There are also plenty of customization options that Five gives you for forms. We will not go into all of these now, so here is just a quick list:
EXPERT TIP: Forms can get pretty complex. It’s best to start with a bare-bones form and delve deeper into the customization options later. The form might not look pretty at the start, but it does what it is supposed to do: it lets end users interact with your database through a graphical user interface. Later on, you can customize forms based on your requirements.
We have now completed all steps to create a single table, single form application with Five. But let’s remember what we are here: we want to learn how to create a front end for a MySQL database. But wait: we are almost at the end of the tutorial, and haven’t done anything with regard to the user interface or frontend design yet. Well, you don’t have to. Five creates it for you!
To better understand this, let’s launch our application for the first time. Click the “Run” button in the top-right corner. Your application will open and you can preview your application in a new tab.
Five automatically creates a clean and intuitive user interface on top of your MySQL database for you. Running along the top and the left-hand side, Five gives you a menu that lets end-users navigate through your application. On the top, you have icons for in-app help or a user avatar that is particularly handy for multi-user applications. And in the center, there is a main area for your users to interact with your application, its forms, charts, dashboards, or any other element that you decide to develop for them.
This user interface is customizable through themes, buttons, or custom front-end components. It also handles more complex data structures very well, by letting you add pages, drill downs, or parent-child menus.
EXPERT TIP: If you are building your application locally, you can only deploy the application into your own development environment. When using Five on the cloud (with a paid subscription), Five gives developers a development, testing, and production environment for each application and application instance. This makes managing releases across development, testing (QA), and business teams very easy, as developers do not need to worry about setting up and maintaining these environments manually.
Let’s delve a bit deeper into the user interface that Five provides you with.
Five’s user interface for end-user applications is primarily made for data-driven, multi-user business applications. These business applications can range from tools purely used by internal staff to business partner or supplier portals to custom CRM or OMS systems. Through the user interface, the end-user can store, amend, view, visualize, report, or query data.
Five comes with dozens of popular React components for displaying data, from ratings to date pickers to radio buttons. Five’s UI can also be extended via form-style plugins.
The user interface is responsive and automatically adjusts to a smaller screen size. It renders well on all common devices, from mobile phones to desktops.
EXPERT TIP: Even though Five’s UI is responsive by default, developers should carefully think through their end users’ experience. For example, Five lets developers define a custom grid for dashboards, by defining a custom grid of columns and rows. For mobile, it’s best to keep the number of columns and rows to a minimum, as end-users typically cannot consume too many visualizations at once on a small screen.
The notification icon in the top right corner is fully programmable and can be used to send notifications to end-users, based on their user profile. Developers can also add more (custom) buttons in the application bar on the top.
Overall, the user interface is designed to give developers maximum speed in their application development, without making sacrifices to the overall end-user experience.
In this article, we covered how to create a front end for a MySQL database. We used Five, a low-code development environment designed for use by experienced software developers, to do so. Five is best used for building custom business applications. It makes the process of creating a front end on a MySQL database quick, easy and efficient and provides developers with a pre-built user interface.
Now that you have learned how to create a front end for a MySQL database, where should you take your application next? So far, we only covered the basics of Five. To continue developing your application why not try:
Five is capable of building even complex applications. Canstar, Australia’s largest financial comparison website, for example, has built a complex auctioning platform used by their business partners with Five.
Whatever you decide to build: Happy coding!