How to Create a Front End for a SQL Server Database in 4 Steps

How to Create a Front End for a SQL Server 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 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 an SQL Server database using Five.

Create A Front End For a SQL Server Database
Sign Up for Free Access to Five's Development Environment

Goals & Outcomes: Creating a Front End for a SQL Server Database in 4 Steps

In this how-to guide, we will go through the 4 steps of creating a front end for an SQL Server database. These steps are:

1. Creating a new application with Five.
2. Connecting to a SQL Server database with Five.
   Five can connect to an existing SQL Server database. Supply a connection string, and Five can be used to create a web front-end for your database.
3. Creating forms with Five.
   For the sake of simplicity, the only front-end components we are building in this tutorial are forms that give our end-users the ability to read, write, update, or delete (CRUD) data in our SQL Server database.
4. Launching the application.
   We will deploy the application on the web using Five’s free trial.

Our final result will be a responsive front-end or graphical user interface (GUI) for end-users to interact with our SQL Server database.

What Is Five?

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 database frontends, CRUD tools, or 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. Examples are custom CRM solutions, custom membership systems, custom order management systems (OMS), custom product information management systems (PIM), or custom inventory systems. Check out our use cases for application templates and inspiration.

What Is Five’s Tech Stack?

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:

• MERN: MongoDB, Express, React, and Node.
• LAMP: Linux, Apache, MySQL, PHP/Perl/Python.
• MEAN: MongoDB, Express, Angular, and Node.
• For a comparison, check out our blog post on MEAN vs MERN here.

Each stack is named after the core technologies that make up the stack, from the web server to the database (MongoDB or MySQL) to the programming language used for the front-end and back-end development.

In recent years, end-to-end JavaScript stacks such as MERN or MEAN have grown in popularity. The only difference between the MERN and MEAN stack is the choice of front-end framework (React or Angular). But even the older LAMP stack is still a popular choice due to its combination of tried-and-tested open-source technologies with great support communities.

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

• use Five’s built-in MySQL database or connect to an existing, external database such as SQL Server,
• are extensible through SQL, JavaScript, and TypeScript,
• use the popular React component library Material-UI for their auto-generated front end, and
• can be deployed in a single click to a highly scalable infrastructure as a containerized web application (using Docker & Kubernetes).

Why Use Five, Instead of an Open-Source Software Stack?

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 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:

Speed of Development

Developers can get started with building the application right away, and don’t have to waste valuable time setting up their software stack. This contributes to a faster speed of development.

An All-In-One Tool

Developers don’t need to be familiar with all the latest technologies and tools required to build & deploy a full-stack application.
Inside Five, they find everything they need to build, maintain, and deploy an application to the cloud, without ever having to leave the Five development environment. For example, there is no need to create a SQL script in a MySQL GUI external to Five, sift through component libraries, or figure out the MS Azure management console for cloud deployment.

All of this is covered by Five, accelerating the delivery of cloud applications to end-users. And Five is extensible through full code written in SQL (queries), JavaScript, or TypeScript (for functions and processes). Five also supports popular technologies such as webhooks or APIs.

Ease of Use

Last, Five makes it easy for back-end developers to create a frontend, even if they are not experts in the usual tools used to create a frontend or backend. And developers of all stripes – frontend, backend of full-stack – can easily launch applications to the cloud, even if they do not have cloud expertise. This makes Five very easy to use and get started with.

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 SQL Server database with Five.

There are four steps involved in creating a front end for a SQL Server database:

1. Creating a new application with Five.
2. Providing a connection string to the SQL Server database.
3. Creating forms with Five.
4. Launching the application.

How to Create a Front End for a SQL Server Database in 4 Steps

Create A Front End For a SQL Server Database
Sign Up For a Free Trial to Follow this Tutorial

Step 1: Creating a New Application in Five

Let’s start by creating a new application with Five. To do so, sign up for a free trial.

The first screen you will see after logging into Five looks like this.

Here’s how to create a new web application using Five:

1. Start by clicking on Applications in the top left corner.
2. Next, click on the yellow Plus button.
3. Give your application a descriptive name in the Title field, and save it by clicking the tick mark in the top right.
4. Done.

You have successfully created your first application in Five. Here’s what this should look like before clicking Save.

You will now see your new application in the list of all applications that you have created with Five.

Next, click on the blue “Manage” button in the top right corner to access all of Five’s development features.

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 by adding authentication, 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 an SQL Server database.

Step 2: Creating a MySQL Database With Five

Next, we create our MySQL database inside Five. Why MySQL, and why not SQL Server?

Five comes with an integrated MySQL database GUI that lets us create and manage a MySQL database. Whether you’re building on Five’s free MySQL database, or on your existing SQL Server database: the development process is the same. By using Five’s free MySQL database, we can learn how Five works first before repeating the steps with our database.

If you prefer working with your database, follow our documentation to connect it to the Five development environment.

Applications developed in 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.

In this tutorial, we will use Five to create fresh MySQL database tables. To do so, click on Manage, and then on Data, and Table Wizard.

Using the Table Wizard, you can:

1. Create new database tables from scratch,
2. Assign data and display types to your database fields, which define how data is stored and displayed to your end users,
3. Build relationships between tables using Primary Keys and Foreign Keys,
4. Import CSV files straight into your database tables, and
5. Add new fields to existing database tables.

Add new fields to your table by clicking on the Plus icon. Define their data and display types, as well as their size, and you’re done creating a database table.

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.

Alternatively, 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. This means that when creating a new table from scratch, 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.

To view keys, click on Data and then Database Modeler. The database modeler visualizes your database schema and shows you all of your tables and their relationships.

Step 3: Creating Forms With Five

Once your database tables are set up, you can start creating forms. Click on Visual, and then Form Wizard in the Menu on the top.

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 “Inventory”. 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 or your external MS SQL 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:

1. You can adjust the size and order of your form fields.
2. Through the use of “Show If”, “Read Only If” or “Required If” and JavaScript conditions, you can create forms with conditional logic.
3. You can create custom display types, or apply regular expressions (RegEx) to validate the data that end-users store inside of forms.
4. You can assign events to end users’ actions on forms. For example, you can run a JavaScript function that is tied to an “on enter” or “on exit” event in relation to a form field.
5. To find out more about the forms you can design in Five, visit our how-to articles on advanced form design.

In a nutshell, there is little that you cannot do with a form built inside of Five. But if you still have questions, then our user community is a good place to learn more about Five’s features.

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 create, read, update or delete data stored in your database through a graphical user interface. Later on, you can customize forms based on your requirements.

Step 4: Launching The Application

We have now completed all steps to create a single table, single form application with Five.

But let’s remember what we are here for. We want to learn how to create a front end for a 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!

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.

If you cannot see the run button, don’t worry. You first need to initiate your deployment. To do so, follow these steps:

1. Click on Setup > Instances.

2. Click on your Default instance, and then on the Cloud icon in the top right, as shown here:

3. This is the screen that you will see now. To deploy your application into development click on the button shown here:

4. Your first deployment will take a few seconds. Once deployed successfully, your screen will look like this.

5. Click the Run button in the top right corner to launch and preview your application in your browser.

Five automatically creates a clean and intuitive admin panel user interface on top of your 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.

Understanding The User Interface

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 web applications. These applications can range from tools purely used by internal staff to business partner or supplier portals. Through the user interface, the end-user can store, amend, view, visualize, report, or query data.

Five comes with dozens of popular UI 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 creating 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.

Connecting Five To An Existing SQL Server Database

To connect Five to an existing SQL Server database, supply Five with a connection string. ve will treat your existing database as a data source.

To do so, follow these steps:

1. Provide the connection string to establish the database connection inside Five’s Database menu. 

The connection string represents a set of parameters in the form of key = value pairs separated by semicolons.

For example, here’s what your connection string should look like: driver=mssql; url=five-test-server.database.windows.net:1433; username=user; password=password; name=exampleDB

2. Once your connection string is saved, Five will add your existing database as a data source, and you can use Five to develop a front end including forms, charts, reports, or dashboards on your SQL Server database.

Conclusion & Next Steps

In this article, we covered how to create a front end for an SQL Server database by using Five’s free MySQL database as a starting point.

Five is best used for building custom business applications. It makes the process of creating a front end on any relational database, such as MySQL or SQL Server 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 an SQL Server 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 creating different access rights and permissions for different user groups?
• Adding a mail merge to notify users about changes inside your application?
• Writing an SQL query inside Five to create reports, charts, or dashboards?
• Adding JavaScript functions to connect Five to external systems, such as Slack?