How to Create a Front End for a MySQL Database in 4 Steps

How to Create a Front End for a MySQL Database in Five: Complete Guide with Expert Tips

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 with CRUD permissions and role-based access control (RBAC) 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 an intuitive and searchable web front-end for a MySQL database using Five.

Create A Front End For a MySQL Database
Access Five for Free to Follow this Tutorial

Goals & Outcomes: Creating a Front End for a MySQL Database

In this how-to guide, we will go through the steps of developing a responsive web frontend for a MySQL database. By the end of this guide, you will understand how data stored and queried from a MySQL database can be displayed in an intuitive and user-friendly web frontend with a dynamic search bar.

The tool we will be using is Five, an all-in-one rapid application development environment with comprehensive data, logic and UI features.

What Is Five?

Five is an all-in-one Rapid Application Development Environment for building and deploying database-driven web applications. Start-ups to large businesses rely on Five as their all-in-one IDE to develop, maintain, and deploy custom business applications in a rapid and standardized manner.

It combines a full development environment with powerful built-in tools:

✅ Database Modeller – Design your data structure visually
✅ Query Writer – Create complex SQL queries with ease
✅ Prebuilt UI – Auto-generated React/Material-UI interfaces
✅ PDF Report Writer – Design and schedule custom reports
✅ Role-Based Access – Control user permissions precisely
✅ One-Click Deployment – Develop and publish directly to the cloud

Five handles everything from prototyping to production—no infrastructure setup required.

How to Create a Front End for a MySQL Database in 4 Steps

To get started:

1️⃣ Sign Up for a Free Trial.
2️⃣ Download the Sample Application. The file will be stored as “Five – SQL Frontend Demo Start.fdf“
3️⃣ Import the Sample Application into Five. Login to your trial account and follow the steps in our documentation or watch this video.

Step 1: Preview The Training Application

Before we jump into the development, let’s preview the training application we’ve just imported.

Five’s One-Click Cloud Deployment

Clicking the Cloud button will deploy the application to the cloud. Once deployed, it will open in a new browser tab. If it the application does not open automatically, you can always launch it manually. To do so, click the Run ▶️ button that is now visible in Five’s top right corner.

The Run ▶️ button lets you preview your application at any time.

Explore the Training Application

The training application is a Library Database Application prototype. Take a few minutes to explore its features, from the initial Terms and Conditions consent screen to the responsive CRUD interface.

Today we want to adjust the Search Book interface. It’s currently lacking a search bar for users to search through our MySQL database. Below, we will describe the steps for you to add a search bar, so that our users gain access to an intuitive web application that allows them to search for relevant data.

Now, go back into the development environment and let’s explore the application’s architecture.

Step 2: Understanding The Application’s MySQL Database

Applications built with Five use an integrated MySQL database. 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 to abandon your MySQL GUI 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 Five. Last, Five is also compatible with SQL Server databases, REST APIs or OData data sources.

To view the database of our training application, navigate to Manage > Data > Database Modeler.

In Data > Database Modeler you can inspect and manage the application’s MySQL database. It has three tables: books, authors and genre. Do not make any database changes at this stage. Simply understand the tables, primary and foreign keys, fields and relationships. Double-click any field to see its data and display types.

Five’s Database Modeler

Five has several features to create and manage relational databases. You can create an entire database from scratch in just point-and-click. Five manages primary and foreign keys for you when doing so. You can also connect to an existing database with a connection string, or import a .SQL file.

Your database’s schema, including all entities, fields, keys, and relationships is visible and can be managed in Five’s Database Modeler.

Step 3: Building Out the MySQL Front End

Let’s start developing. Today, we want to add a search bar to our Search Book interface. To do so, follow the steps below.

Adjust the SQL Query

1️⃣ Navigate to Data > Queries.
2️⃣ Select the SearchBookQuery. This is the query that is displayed in the Search Book interface on our prototype application.
3️⃣ Click the Query field to edit the SQL query.

Replace the existing SQL query with the following:

SELECT
    Book.BookKey, 
    Book.Title,
    Genre.GenreName, 
    Book.TotalCopies, 
    Book.ShelfLocation, 
    CONCAT(Author.FirstName, ' ', Author.LastName) AS Author,
    Book.Cover
FROM Book
INNER JOIN Author ON Author.AuthorKey = Book.AuthorKey
INNER JOIN Genre ON Genre.GenreKey = Book.GenreKey
WHERE Book.Title LIKE CONCAT('%', ?, '%')
GROUP BY Book.BookKey

What has changed? The existing query did not have a WHERE condition. By adding a WHERE condition with a parameter, as denoted by the LIKE CONCAT('%', ?, '%') condition, we are able to let our users provide an input that will filter the query. This way, we can provide an intuitive search interface for our database front end.

You can also test your SQL query by clicking the Run ▶️ button. Last, don’t forget to save your changes by clicking the Tick ✔️ button.

Next, go to Parameters, and click Plus.

Fill in the information provided below to establish a parameter for the book title. Then, click the Tick button to save the parameter.

🟩 Parameter ID: bookTitle
🟩 Parameter Type: Expression
🟩 Parameter: {{five.variable.BookTitle}}

Save the parameter, and then save all changes made to the query.

Adjusting the Data View

Next, navigate to the References tab and then click on the View button. Here you will see that our SQL query is currently being referenced by a Data View, a front-end element displayed in our web UI.

Once you’ve clicked View, you will land on the screen below. On it, select Screen Fields and then click Plus.

Now, let’s add the Search Book Title textbox along with the details provided below to link it with the parameter we created in our SQL query earlier.

🟩 Caption: Search Book Title
🟩 Field ID: SearchBookTitle
🟩 Display Type: _Text
🟩 Linked Parameter: {{five.variable.BookTitle}}

Step 4: Launching The Application

As before, let’s launch the application again and check out what has changed. Go to the Search Book interface. Where previously there was no search bar, we now have a dynamic search bar that allows users to search and filter the data in our database.

The Data View that our users are interacting with is connected to our SQL query, which in turn queries our MySQL database. We have seen all of these elements in Five.

We have further used Five’s one-click deployment to launch and preview the application to the cloud.

MySQL Front End All Steps: 1 Min Video

Here’s a video that shows all steps explained above.

Understanding The Database Front End

Let’s delve a bit deeper into the user interface that Five provides.

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 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, visualise, report, or query data.

Five comes with dozens of popular data display types for displaying data, from ratings to date pickers to radio buttons. You can also create your own display types using Regular Expressions. Last, Five’s UI can also be extended via custom plugins. The notification icon in the top right corner is fully programmable and can be used to send notifications to end-users.

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.

Overall, the user interface is designed to give developers maximum speed in their application development, without making sacrifices to the overall end-user experience.

Conclusion & Next Steps

In this article, we covered some of Five’s basic features, from database modeling to adjusting a SQL query and displaying the dynamic results in a data view embedded into our front end. We used Five, an all-in-one application development environment to do so. Best used for building custom business applications, Five comes with comprehensive application development features, ranging from database design to one-click deployment.

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:

👥 Making it a multi-user application and assigning permissions through Role-Based Access Control (RBAC)?
📈 Writing a SQL query inside Five to create reports, charts or dashboards?
📨 Adding a mail merge to notify users about changes inside your application?
🔔 Adding JavaScript functions to connect Five to external systems, such as Slack?

All of this (and much more) is possible in Five. The best places to start are:
1️⃣ Our comprehensive series of blog posts on database modelling in Five. Start here if you have a database schema (tables, fields, relationships) that you would like to implement in Five.
2️⃣ To learn how to create a data view like the Search Book interface, visit our documentation on data views here. Note that you first need a data source, such as a database or a query, to create a data view. In Five, you cannot create a frontend unless you have a data source.
3️⃣ If you get stuck, our user community is the best place to ask questions and find answers.

▶️▶️▶️ You can further accelerate your development by reaching out to us for a free and comprehensive step-by-step guide on implementing your use case. Send us a message and one of our developers will get back to you within 24 to 48 hours.

Cut down your development time to days with Five! Happy Coding!