DEV Community

Cover image for How to Build MySQL Admin Tools in 6 Steps [VIDEO]
Ronan McQuillan
Ronan McQuillan

Posted on • Originally published at budibase.com

How to Build MySQL Admin Tools in 6 Steps [VIDEO]

MySQL admin tools are some of the simplest applications around - but they can play a vital role in all kinds of daily workflows.

The unfortunate reality is that the kinds of colleagues who are responsible for most admin tasks don’t have the technical expertise or time to sit around writing custom queries all day. Therefore, we often need custom solutions to bridge this gap.

IT teams are tasked with outputting huge numbers of internal tools for managing data sets. These aren’t the most exciting solutions in the world, but they do take up a massive amount of internal development resources.

Today, we’re going to check out how we can use Budibase to produce admin tools for MySQL in a matter of minutes - not days.

What are we building?

We want to build a tool that’s an accurate representation of the kinds of tasks your average admin colleague will need to perform on a daily basis. So, we’re going for the most basic solution of them all - a simple CRUD app.

We’re going to base this around some dummy data for inventory management - just so we’re dealing with a use case that most of you will be familiar with.

Essentially, we have a MySQL database with five tables - and we’re going to create a simple tool for users to create, read, update, and delete entries - including managing relationships between different entities.

You might also like our tutorial on how to build a MySQL GUI.

Let’s jump right in.

How to build MySQL admin tools

We’re going to use Budibase to build our MySQL admin tools without writing a single line of code.

The whole thing should take us about fifteen to twenty minutes - but there’s also plenty of scope for you to put your own spin on the build.

Here’s how.

1. Create a new application

First, we want to create a new application project. From your Budibase portal, hit create new app and choose start from scratch.

Create a Budibase app

We’re then prompted to give our app a name. Budibase uses this to generate a URL extension based on your tenant address - but you can override this and specify whatever slug you like.

MySQL Admin Tools

Then, we’re asked to choose a database. As you might guess, we’re picking MySQL:

Choose a data source

2. Connecting our data

On the next screen, we’re prompted to enter our database credentials. Once we’ve done this, we can hit connect.

SQL credentials

Once we fetch our tables, we can view and manipulate our MySQL database tables within Budibase’s Data section:

MySQL Admin Tools

We’ll make a couple of changes here a little bit later, but for now, that’s our data layer pretty much completed.

3. Autogenerate CRUD screens

Next, we can start building our MySQL admin tool’s interface. Remember, the requirements here are that we want to give non-technical users an easy way to carry out CRUD actions on our five MySQL tables.

Luckily, in Budibase, we can basically create these with a couple of clicks.

From the design tab, we’re going to hit add screen and then select list view on the modal that pops up.

New Screens

Then we’re prompted to choose which tables we want to add CRUD screens for. We’re going to select all five of the tables in our MySQL database, but we could opt for any combination of these if we wanted to.

MySQL tables

Now we’ve got five admin screens where users can read, update, or create entries on each of our tables.

CRUD screen

To finish these off, we’ll open the component tree on each page, select the relevant table block, and scroll down to check show delete - giving users the option to delete entries when they click through to edit a row.

And that’s our basic CRUD screens completed. We’ll return to these in a bit to tidy up the UI slightly, but already, we have fully functioning MySQL admin tools.

4. Define relationships

Now, the problem with our current app is that we haven’t accounted for how our five tables relate to each other. That’s a pretty big oversight - since manipulating relational data is basically the main selling point of SQL.

Let’s head back to the data section of the Budibase builder.

On each table, we have the option to define relationships - effectively telling Budibase how each of our tables links up with the others.

For example, each row in our products table might relate to many rows in our inventories table. We can hit define relationships and configure this information, including which variables to use as our primary and foreign keys.

So, for the relationship between products and inventories, the configuration would look like this:

MySQL admin tools

Budibase creates a new relationship column on each table to reflect this.

Table

And we can repeat this process for all of the other relationships that we need to create between our tables.

5. Customize our CRUD screens

Now, if we return to our CRUD screens, they’re gotten a bit messier - since we’ve added extra columns to our tables.

Even worse, from an end-user perspective, some of these even appear to be effectively duplicated:

UI

We can go back to our table block component and configure which columns we actually want to display to users. Since we have our new relationship variables, we no longer strictly need ProductID or WarehouseID, so let’s remove them.

First, we’ll hit configure columns and then choose add all columns in the drawer that opens - then we can use the delete icon to remove any columns we don’t want to display.

Bindings

This leaves us with a much neater interface, free from any clutter:

Table

Again, we can repeat this step for each of the tables we want to manage with our MySQL admin tools.

6. Navigation and design

Finally, we can play around with our app’s overall design to make it a little bit more appealing. By default, every Budibase app has a blank home screen. But we’re not using this, so we can simply remove it.

MySQL admin tools

Now we need to assign one of our remaining screens as our MySQL admin tool’s homepage. We’ll go with inventory, so select that page and check the set as home screen box in the top right.

Set home screen

We can also head over to the theme panel and select one of Budibase’s built-in color palettes, and alter the design of interactive elements.

The last thing we want to do is remove Home from our navigation menu - since we don’t have a dedicated home screen anymore. Under navigation hit configure links and the drawer will allow you to edit your menu.

Once again, we’ll use the delete icon to remove the Home option. We can also change the copy our the order of our remaining menu items.

MySQL Admin TOols

And that’s our MySQL admin tools totally finished.

All that’s left is to hit Publish and start sending our app to users.

If you liked this tutorial, check out our guide on how to build a SQL GUI.

Turn data into action with Budibase

Of course, this is just a basic example of what you could build with Budibase. To get a flavor of what else is possible, let’s take a look at what Budibase brings to the table for busy IT teams.

Here’s why Budibase is the ideal solution for all sorts of apps - not just MySQL admin tools.

Our open-source, low-code platform

Our design philosophy is simplicity by default; extensibility when you need it. Budibase offers a generous free tier, market-leading data support, intuitive design tools, autogenerated UIs, custom automations, and much more.

Check out our features overview to learn more.

External data support

No other low-code tool comes close for data support. We offer dedicated connectors for MySQL, MSSQL, Postgres, Oracle, S3, Airtable, Mongo, Couch, Arango, Google Sheets, REST API, and more.

We’ve also got our own built-in database, with full support for CSV uploads.

Optional self-hosting

At Budibase, we empower our users to deploy their solutions, where they want, how they want. We offer self-hosting with Docker, Digital Ocean, Kubernetes, Portainer, Linode, and more.

We’ve also got our own proprietary cloud hosting option. Check out our pricing page to learn more about both.

Automations and integrations

Budibase makes building custom automations a breeze. Define triggers and combine, nest, and configure pre-built automation blocks, with minimal custom code.

We also offer a huge array of integrations with Zapier, Webhooks, REST, and more.

Role-based access control

Use Budibase’s built-in RBAC to safeguard security without compromising on UX. Add users to defined roles and grant permissions based on data sources, queries, automation rules, screens, or individual components.

We even offer free SSO using OpenID, OAuth, Microsoft, and more.

Custom plug-ins

Budibase leads the pack for extensibility. Build your own data sources, automation actions, or components, and leverage them across your app projects with our dedicated CLI tools. Or, import community contributions from GitHub at the click of a button.

Check out our custom plug-ins documentation to learn more.

50+ free application templates

Budibase is the ideal solution for building all kinds of web apps, utilities, internal tools, and more. To prove it, we’ve created over fifty free, fully-customizable app templates to help get you started.

Whether you need MySQL admin tools or a totally bespoke solution, sign up to Budibase today to start building professional apps the fast, easy way.

Top comments (0)