91制片厂

MySQL is one of the most popular database systems out there. And that鈥檚 for a good reason. It is lightweight, fast, easy to learn, and widely available. Using a MySQL GUI to manage your databases will help you make the most out of this tool.

A GUI (Graphical User Interface) allows you to interact with your database with a visual interface. This allows you to see your data and use visual elements as opposed to text-based terminals and command lines.

Naturally, this is crucial if you want your non-technical colleagues to manage data.

It can be hard to pick the right MySQL GUI tool, though.

There are many options to choose from - many price ranges, features, and operating systems. However, it鈥檚 not hard to build a free tool that can do anything you want, and work on any devices you want to, including mobiles.

You can build your own MySQL GUI in just three steps.

Therefore, today we are going to explore how you can build a free MySQL web interface using 91制片厂 - or use the Data section within a 91制片厂 Workspace as a fully functioning MySQL GUI.

Let鈥檚 get started!

Does MySQL have a GUI?

MySQL is a database system. It doesn鈥檛 have an official GUI, but there are many app options to connect to it. There are free and open source apps, as well as paid options.

In addition, you can build your own MySQL GUI using the tips from this three-step guide, leveraging a 91制片厂 app as a MySQL frontend.

What is the best GUI for MySQL?

The right MySQL GUI depends on your use case and requirements. You can build your own MySQL GUI following this guide, or you can use one of these great tools listed here:

• Adminer
• BeeKeeper Studio
• Database Workbench
• DataGrip
• DBeaver
• DBEdit
• dbForge Studio for MySQL
• DronaHQ
• HeidiSQL
• LibreOffice Base
• mySQL Workbench
• Navicat for MySQL
• OpenOffice.org Base
• phpMyAdmin
• SQLBuddy
• SQLyog
• Toad Edge for MySQL
• Webmin

It鈥檚 important to research which features you need from specific tools - for instance, cross-platform integrations or auto-completion. Often, custom builds are the most cost-effective option to meet bespoke requirements.

You might also like our guide to building a Postgres GUI .

What is a MySQL GUI?

A MySQL GUI allows you to interact with your data visually. Thus, you can filter, add, update, and delete data without using SQL commands.

But a lot of these tools allow you to add your own commands as well, since you鈥檒l often need to perform custom queries.

This allows you to get the better of the two worlds. You can quickly perform actions using premade functions if you want. But you can run your own commands if you need to run a specific query as well.

Using 91制片厂 a MySQL GUI

Straight out of the box, we can use 91制片厂 as a fully functional GUI for connected databases, including MySQL. This enables App Admins within our Workspace to write, test, and save queries securely.

These can then be used within end-user applications and automations across the Workspace.

Below, you can see the query editor, where we can write custom SQL statements to retrieve insights from our MySQL database.

When we run this, we can see the results in the right-hand side panel.

We can also create bindings that can be used to pass dynamic variables to our query from end-user apps and automations, or apply custom JavaScript transformations to our query responses.

From the Queries tab of our MySQL data source, we can see all of the queries we have already saved.

What are we building?

In today鈥檚 tutorial, we鈥檙e going to build a MySQL GUI that allows end-users to perform a more specific set of actions.

Specifically, we鈥檒l be creating a CRUD tool, that enables users to create, read, update, or delete rows on two tables called posts and categories. These represent the backend of a blog platform.

On this screen, users can apply custom filtering expressions based on the title or content columns, or the related categories row.

If you click on the edit or add new button, you are going to see a form like this one:

This form is the same for the add new or update actions. There are some internal differences, and the delete button is removed if you are adding new items.

We鈥檝e also created a similar screen for performing CRUD operations on our categories table. This time, however, we鈥檝e added a static search bar to our table, based on the category column, rather than dynamic filters.

How to build a MySQL GUI in 3 steps

If you haven鈥檛 already, the first thing you鈥檒l need to do is sign up for a free 91制片厂 account, to start building as many applications as you like.

Next, we鈥檒l create a new Workspace. In 91制片厂, a Workspace is a collection of data sources, end-user apps, and automation rules, which can all interact with one another.

For our project today, we鈥檒l simply call our Workspace MySQL GUI.

1. Setting up our data layer

Once we鈥檝e created this, we鈥檙e next prompted to choose our first data source. 91制片厂 offers a range of dedicated connectors for all kinds of RDBMSs, NoSQL tools, APIs, and more, alongside our built-in low-code database.

For external databases, 91制片厂 acts as a proxy, querying your data without ever storing it.

As you may have guessed, we鈥檙e going to select the option to connect to a MySQL database.

When we do so, we鈥檙e prompted to input our config details.

We鈥檙e then asked to select which of our database鈥檚 constituent tables we鈥檇 like to Fetch, allowing us to interact with them within 91制片厂. Our table contains two tables called posts and categories.

We鈥檙e fetching both.

Here鈥檚 how these will look in the Data section of our Workspace.

Already, we can interact with our databases, including adding new data via the spreadsheet-like UI.

Configuring relationships

Before we can create a MySQL GUI that will enable us to perform CRUD actions across our two tables, we鈥檒l need to configure the relationships between them in 91制片厂. As you can see above, the posts table contains a column called category_id.

This corresponds to the id column in the categories table, as shown below.

To establish a relationship between our two tables, we鈥檒l need to hit Define Relationship from the categories table.

We鈥檙e setting up a one-to-many relationship, using id as our primary key and category_id as our foreign key.

We can now see the display column of the relevant categories row alongside each of our posts.

Handling long-form text

We鈥檙e going to make one last change within the Data section before we start creating the front-end for our MySQL GUI.

Currently, our posts table contains two text columns, called title and content. When we autogenerate our UIs, we want to give users more space to edit the content field, as well as enabling them to use Markdown.

To achieve this, we鈥檒l update the Type for this column from Text to Long-Form Text, as well as selecting the option to enable rich text.

This doesn鈥檛 alter the underlying schema of our database. Rather, it only changes the way 91制片厂 handles this attribute internally.

That鈥檚 the back-end of our MySQL GUI ready to go.

2. Autogenerating CRUD UIs

To start building our front-end, we鈥檒l head to the Apps section of our Workspace. Here, we鈥檙e presented with the option to create our first app, which can be used to access any data source contained in the same Workspace.

We鈥檙e first prompted to give our app a name and URL extension. We鈥檒l simply call ours GUI.

When we hit Confirm, we鈥檒l be brought to the 91制片厂 builder, where a new app has been created for us with a blank screen.

We could start building our GUI from scratch using 叠耻诲颈产补蝉别鈥檚 built-in library of reusable components. However, we鈥檙e instead going to rely on autogenerated layouts to create the bulk of our app.

So, we can simply delete this screen.

When we do this, we鈥檒l be offered several options for creating a new screen, including starting from scratch again or autogenerating a UI based on connected data.

We鈥檙e selecting the Table option, which will output a fully working CRUD UI for any database tables we select.

We鈥檙e picking both of our database鈥檚 constituent tables.

We鈥檙e then asked how we鈥檇 like to display our forms for creating or updating rows. We鈥檙e selecting the option to contain these within Modals.

We now have a fully working CRUD screen for each of our tables.

We can access modal forms to create or update rows, using the create row button or by clicking any individual row on our table, respectively.

3. Editing our autogenerated screens

Functionally speaking, our MySQL GUI essentially does what we want it to at this point. However, we鈥檙e going to apply a few key UX improvements, as well as implementing some additional functionality to make it easier to locate specific rows on either table.

To make things easier to follow, we鈥檒l take each of our screens in turn.

Posts

We鈥檒l start with our posts screen. The first thing we鈥檒l do here is update the Text setting of our Heading component to be more descriptive.

We鈥檒l then use the Columns sliders on our Table component to deselect our id and category_id columns, as end users don鈥檛 really need to read these.

We鈥檒l also make some design tweaks to each of our forms. First, we鈥檒l give them more descriptive Titles.

Then, under Styles, we鈥檒l set the Button Position to Top.

Lastly, we want to add functionality to this screen that will enable end-users to create and apply front-end filtering rules.

We鈥檒l start by hitting the + icon to open the components menu. Here, we can search for the Filter component.

We鈥檒l place this alongside our existing Create Row button.

叠耻诲颈产补蝉别鈥檚 Filter component accepts a setting called Target Component, and displays UI elements to allow users to filter any columns we select from the underlying data source of this.

We鈥檙e choosing our posts table, and picking title, content, and categories.category as our fields.

The category field is labeled as categories.category because it鈥檚 actually stored in the related row of our categories table, rather than each individual row of our posts table.

To address this, we can use the Label setting for this field to update its display text.

Now, our users can create filtering expressions using any of these columns.

Categories

Next, we鈥檒l start by making some similar changes to our categories screen. Once again, we鈥檒l start by updating our table鈥檚 display text and deselecting the id column.

As before, we鈥檒l also update the Title of each of our forms, and set their Button Position to Top.

However, this time we鈥檙e going to take a slightly different approach to enabling users to access specific rows in our MySQL GUI.

That is, rather than creating complex filtering expressions from the front-end, we want to provide a static search bar.

91制片厂 components have a global context, meaning that they can access the data outputs of any other components on the screen.

We鈥檒l start by adding a Text Field component, alongside our Create Row button.

This accepts several settings, but the only ones we鈥檙e interested in are Field and Placeholder.

We鈥檒l set both of these to Search.

Whereas the Filter we used on our previous screen simply allowed us to choose a target component, for our search bar to work, we鈥檒l need to configure an appropriate filtering rule on our Table, using its data output.

To do this, we can select our Table, and open the filtering menu.

Here, we鈥檒l add a filter group with three rules using the Like, Starts With, and Equals operators, based on our category column.

We can use the lightning bolt icon alongside our comparison values to open the bindings drawer, enabling us to pass values to our filter dynamically.

Here, we can see all of the categories of available bindings, including the output of our Search Text Field.

Within this, we鈥檒l select the Value binding.

We鈥檒l then repeat this process for our other two filter expressions.

Finally, we鈥檒l use the dropdown menu to return All Rows when the filter is empty.

When we鈥檙e happy, we can use the Publish button to push our web-based MySQL GUI live for end users.

You might also like to check out our ultimate guide to building database GUIs.

Turn data into action with 91制片厂

91制片厂 is the open-source, low-code platform that empowers IT teams to turn data into action.

With extensive external data support, powerful AI-driven automations, autogenerated UIs, optional self-hosting, custom RBAC, free SSO, and much more, there鈥檚 never been a faster way to build secure internal tools.

Take a look at our features overview to learn more.