{"id":2466,"date":"2024-02-27T10:44:22","date_gmt":"2024-02-27T02:44:22","guid":{"rendered":"https:\/\/five.co\/?p=2466"},"modified":"2024-03-20T13:13:41","modified_gmt":"2024-03-20T05:13:41","slug":"how-to-create-a-sql-server-gui","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-create-a-sql-server-gui\/","title":{"rendered":"How to Create a SQL Server GUI in 4 Steps"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a SQL Server GUI in Five: Complete Guide with Expert Tips<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is time to start developing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;s got to be a better way to build a front end than spending hours wrestling with React UI component libraries.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And there is.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In it, we will explain <strong>how to create a SQL Server GUI using Five<\/strong>.<\/p>\n\n\n\n<div style=\"background-color: #001524;\"><hr style=\"height: 5px;\" \/>\n<pre style=\"text-align: center; overflow: hidden; white-space: pre-line;\"><span style=\"color: #f1ebda; background-color: #4588d8; font-size: calc(18px + 0.390625vw);\"><strong>Create a SQL Server GUI<\/strong>\n<span style=\"font-size: 14pt;\">Download Five for Free to Follow this Tutorial<\/span><\/span><\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\" target=\"_blank\" rel=\"noopener\"><button style=\"background-color: #f8b92b; border: none; color: black; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; margin: 4px 2px; border-radius: 5px;\"><strong>Sign Up<\/strong><\/button><br \/><\/a><\/p>\n<hr style=\"height: 5px;\" \/><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Goals &amp; Outcomes: Creating a SQL Server GUI in 4 Steps<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In this how-to guide, we will go through the 4 steps of creating a SQL Server GUI. These steps are:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Creating a new application with Five.<\/strong><\/li>\n\n\n\n<li><strong>Connecting to a SQL Server<\/strong> <strong>database with Five.<br><\/strong>Five can connect to an existing SQL Server database. Simply supply a connection string, and Five can be used to create a web front-end for your database. Note that this requires a paid subscription to Five. <\/li>\n\n\n\n<li><strong>Creating forms with Five.<br><\/strong>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 contained in our SQL Server database.<\/li>\n\n\n\n<li><strong>Launching the application.<br><\/strong>We will deploy the application locally and free of charge using Five&#8217;s free download.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Our final result will be a responsive front-end or graphical user interface (GUI) for end-users to interact with our SQL Server database.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">What Is Five?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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. Check out our <a href=\"https:\/\/preview-php85.dzine.org\/five\/use-cases\/\" target=\"_blank\" data-type=\"page\" data-id=\"1070\" rel=\"noreferrer noopener\">use cases<\/a> for application templates and inspiration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Developers can download Five 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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img width=\"1200\" height=\"630\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-Start-Developing.-Free-Download..png\" alt=\"Five.Co - Start Developing. Free Download.\" class=\"wp-image-952\"\/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What Is Five&#8217;s Tech Stack?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A tech stack (or software stack) describes the combination of technologies used to build an application. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Popular stacks that are known for their ability to produce fast and powerful web applications are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>MERN<\/strong>: MongoDB, Express, React, and Node.<\/li>\n\n\n\n<li><strong>LAMP<\/strong>: Linux, Apache, MySQL, PHP\/Perl\/Python.<\/li>\n\n\n\n<li><strong>MEAN<\/strong>: MongoDB, Express, Angular, and Node.<\/li>\n\n\n\n<li>For a comparison, <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/mean-vs-mern\/\" data-type=\"post\" data-id=\"1365\">check out our blog post on MEAN vs MERN here.<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">How does Five compare to these popular software stacks?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img width=\"1280\" height=\"720\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-Software-Stack.png\" alt=\"Five.Co - Software Stack\" class=\"wp-image-738\"\/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Five gives developers everything they need to develop a cloud-native, modern full-stack web application in one platform.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Applications that are built with Five<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>use Five&#8217;s built-in <strong>MySQL database<\/strong> or connect to an existing, external database such as SQL Server,<\/li>\n\n\n\n<li>are extensible through <strong>SQL<\/strong>, <strong>JavaScript and TypeScript<\/strong>,<\/li>\n\n\n\n<li>use the popular <strong>React component library Material-UI<\/strong> for their auto-generated front end, and<\/li>\n\n\n\n<li>can be deployed in a single click to a<strong> highly scalable infrastructure <\/strong>as a <strong>containerized web application<\/strong> (using Docker &amp; Kubernetes). <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Why Use Five, Instead of an Open-Source Software Stack?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Why should developers use Five, instead of MEAN, MERN, or LAMP to build web applications? <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The answer is faster development speed, higher standardization, and ease of use.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But there are at least three advantages when using the Five IDE:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Developers can get started with building the application right away, and don&#8217;t have to waste valuable time setting up their software stack. This contributes to a faster speed of development.<\/li>\n\n\n\n<li>Developers don&#8217;t need to be familiar with all the latest technologies and tools required to build &amp; deploy a full-stack application. <br>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 AWS 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.<\/li>\n\n\n\n<li>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 &#8211; frontend, backend of full-stack &#8211; 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.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">With Five, developers get access to an all-in-one developer tool that goes beyond a traditional IDE. Now, let&#8217;s understand how to create a front-end for a SQL Server database with Five.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are four steps involved in creating a SQL Server GUI:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Creating a new application with Five.<\/li>\n\n\n\n<li>Providing a connection string to the SQL Server database (this is a paid feature).<\/li>\n\n\n\n<li>Creating forms with Five.<\/li>\n\n\n\n<li>Launching the application.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"how-to-create-a-front-end-for-a-mysql-database\"><\/a>How to Create a SQL Server GUI in 4 Steps<\/h3>\n\n\n\n<div style=\"background-color: #001524;\"><hr style=\"height: 5px;\" \/>\n<pre style=\"text-align: center; overflow: hidden; white-space: pre-line;\"><span style=\"color: #f1ebda; background-color: #4588d8; font-size: calc(18px + 0.390625vw);\"><strong>Create A SQL Server GUI<\/strong>\n<span style=\"font-size: 14pt;\">Download Five for Free to Follow this Tutorial<\/span><\/span><\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\" target=\"_blank\" rel=\"noopener\"><button style=\"background-color: #f8b92b; border: none; color: black; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; margin: 4px 2px; border-radius: 5px;\"><strong>Sign Up<\/strong><\/button><br \/><\/a><\/p>\n<hr style=\"height: 5px;\" \/><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Creating a New Application With Five<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s start by creating a new application with Five. To do so, <a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\">download Five from our website free of charge<\/a> and launch it on your computer. The first screen you will see looks like this. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Landing-Page-1024x649.png\" alt=\"Five.Co - Landing Page\" class=\"wp-image-2085\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Landing-Page-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Landing-Page-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Landing-Page-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Landing-Page.png 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s how to create a new web application using Five:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Start by clicking on <strong>Applications <\/strong>in the top left corner.<\/li>\n\n\n\n<li>Next, click on the yellow <strong>Plus <\/strong>button. <\/li>\n\n\n\n<li>Give your application a descriptive name in the <strong>Title<\/strong> field, and save it by clicking the tick mark in the top right.<\/li>\n\n\n\n<li>Done: You have successfully created your first application in Five. Here&#8217;s what this should look like before clicking Save.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"617\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-31-1024x617.png\" alt=\"Click the Tick Mark in the Top Right Corner to Save\" class=\"wp-image-1605\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-31-1024x617.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-31-300x181.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-31-768x463.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-31-1536x926.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-31.png 1777w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">You will now see your new application in the list of all applications that you have created with Five. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, click on the blue &#8220;<strong>Manage<\/strong>&#8221; button that has appeared in the top right corner to access all of Five&#8217;s development features.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img width=\"1280\" height=\"720\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-Manage-Your-Application.png\" alt=\"Five.Co - Manage Your Application\" class=\"wp-image-741\"\/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>EXPERT TIP:<\/em><\/strong> Don&#8217;t spend too much time on all the other application settings just yet. <br>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&#8217;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 SQL Server GUI.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Creating a MySQL Database With Five<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we create our MySQL database inside Five.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hold up: why MySQL, and why not SQL Server? <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To connect Five to an existing, external database, a paid subscription is required. However, Five comes with a <strong>free MySQL database GUI<\/strong> <strong>that lets us create and manage a MySQL database.<\/strong> Whether you&#8217;re building on Five&#8217;s free MySQL database, or on your existing SQL Server database: <strong>the development process is the same<\/strong>. By using Five&#8217;s free MySQL database, we can learn how Five works first before committing to a paid subscription. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s start!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Applications built on Five&#8217;s free download 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, we will use Five to create fresh MySQL database tables. To do so, click on <strong>Manage<\/strong>, and then on <strong>Data, <\/strong>and on <strong>Table<\/strong> <strong>Wizard<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-1024x649.png\" alt=\"Five.Co - Table Wizard\" class=\"wp-image-2087\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-2048x1298.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Using the Table Wizard, you can:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create new database tables from scratch,<\/li>\n\n\n\n<li>Assign data and display types to your database fields, which define how data is stored and displayed to your end users,<\/li>\n\n\n\n<li>Build relationships between tables using Primary Keys and Foreign Keys,<\/li>\n\n\n\n<li>Import CSV files straight into your database tables, and<\/li>\n\n\n\n<li>Add new fields to existing database tables.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Simply add new fields to your table by clicking on the <strong>Plus <\/strong>icon. Define their data and display types, as well as their size, and you&#8217;re done creating a database table.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"627\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Create-a-Table-with-the-Table-Wizard-1024x627.png\" alt=\"Five.Co - Create a Table with the Table Wizard\" class=\"wp-image-2088\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Create-a-Table-with-the-Table-Wizard-1024x627.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Create-a-Table-with-the-Table-Wizard-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Create-a-Table-with-the-Table-Wizard-768x470.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Create-a-Table-with-the-Table-Wizard-1536x940.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Create-a-Table-with-the-Table-Wizard-2048x1253.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">For a quick tutorial on how to create your first database table, <a href=\"https:\/\/help.five.org\/docs\/training\/quick-start-guide\/build-database-tables\" rel=\"nofollow noopener\" target=\"_blank\">follow our Quick Start Guide that walks you through setting up database tables, as well as building relationships between them.<\/a><\/p>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">Or watch this YouTube video that explains Five&#8217;s Table Wizard:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Creating A Membership App | Step 1: Database Tables | Five.Co\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/jcRAhyw9rmI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>EXPERT TIP:<\/em><\/strong> 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 &#8220;TableNameKey&#8221; and is stored as a GUID. This is where Five stores primary keys for you. So there&#8217;s no need for you to create a separate field to serve as a primary key.<br><br>To view keys, click on <strong>Data<\/strong> and then <strong>Database Modeler. <\/strong>The database modeler visualizes your database schema for you and shows you all of your tables and their relationships.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Creating Forms With Five<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Once your database tables are set up, you can start creating forms. Simply click on <strong>Visual,<\/strong> and then <strong>Form Wizard <\/strong>in the Menu on the top.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-1024x650.png\" alt=\"Five.Co - Form Wizard\" class=\"wp-image-2091\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-2048x1301.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Inside the Form Wizard, select the database table that your new form will be pointing to. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example: say your database contains a table called &#8220;Inventory&#8221;. 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"656\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-1024x656.png\" alt=\"Five.Co - Form Wizard - Creating a form\" class=\"wp-image-2092\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-1024x656.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-300x192.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-768x492.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-1536x985.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-2048x1313.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Creating A Membership App | Step 2: Forms  | Five.Co\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/C-P0vgwrU6s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>You can adjust the size and order of your form fields.<\/li>\n\n\n\n<li>Through the use of &#8220;Show If&#8221;, &#8220;Read Only If&#8221; or &#8220;Required If&#8221; and JavaScript conditions, you can create forms with conditional logic.<\/li>\n\n\n\n<li>You can create custom display types, or apply regular expressions (RegEx) to validate the data that end-users store inside of forms.<\/li>\n\n\n\n<li>You can assign events to end users&#8217; actions on forms. For example, you can run a JavaScript function that is tied to an &#8220;on enter&#8221; or &#8220;on exit&#8221; event in relation to a form field.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">In a nutshell, there is little that you <em>cannot<\/em> do with a form built inside of Five. But if you still have questions, then our <a href=\"https:\/\/five.org\" rel=\"nofollow noopener\" target=\"_blank\">user community<\/a> is a good place to learn more about Five&#8217;s features.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>EXPERT TIP:<\/em><\/strong> Forms can get pretty complex. It&#8217;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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Launching The Application<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">We have now completed all steps to create a single table, single form application with Five. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But let&#8217;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&#8217;t done anything with regard to the user interface or frontend design yet. Well, you don&#8217;t have to. Five creates it for you!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To better understand this, let&#8217;s launch our application for the first time. Click the &#8220;Run&#8221; button in the top-right corner. Your application will open and you can preview your application in a new tab.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img width=\"1280\" height=\"720\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-Run-Your-Application.png\" alt=\"Five.Co-Run-Your-Application\" class=\"wp-image-742\"\/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Five automatically creates a clean and intuitive <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/the-admin-panel-the-best-web-app-template\/\" data-type=\"post\" data-id=\"995\">admin panel user interface<\/a> on top of your MySQL database for you. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>EXPERT TIP:<\/em><\/strong> If you are building your application locally, you can only deploy the application into your 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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Understanding The User Interface<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s delve a bit deeper into the user interface that Five provides you with.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Five&#8217;s user interface for end-user applications is primarily made for data-driven, multi-user <strong>business applications<\/strong>. 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Five comes with dozens of popular UI components for displaying data, from ratings to date pickers to radio buttons. Five&#8217;s UI can also be extended via form-style plugins.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>user interface is responsive <\/strong>and automatically adjusts to a smaller screen size. It renders well on all common devices, from mobile phones to desktops.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>EXPERT TIP:<\/em><\/strong> Even though Five&#8217;s UI is responsive by default, developers should carefully think through their end users&#8217; experience. For example, Five lets developers define a custom grid for dashboards, by defining a custom grid of columns and rows. For mobile, it&#8217;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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Overall, the user interface is designed to give developers maximum speed in their application development, without making sacrifices to the overall end-user experience.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Connecting Five To An Existing SQL Server Database<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To connect Five to an existing SQL Server database, subscribe to Five&#8217;s paid plan. This gives you access to a web-hosted development environment. Supply Five with a connection string, and Five will treat your existing database as a data source.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To do so, follow these steps:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, provide the connection string to establish the database connection inside Five&#8217;s <strong>Database <\/strong>menu.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The connection string represents a set of parameters in the form of&nbsp;<em>key = value<\/em>&nbsp;pairs separated by semicolons.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Key<\/strong><\/td><td><strong>Value<\/strong><\/td><\/tr><tr><td><strong>Driver&nbsp;<\/strong><\/td><td>The database driver allows you to interact with your chosen DBMS through Five\u2019s interface.<\/td><\/tr><tr><td><strong>URL&nbsp;<\/strong><\/td><td>A database connection URL provides a way of identifying a database so that the selected driver recognizes it and connects to it.<\/td><\/tr><tr><td><strong>Username&nbsp;<\/strong><\/td><td>Your username.<\/td><\/tr><tr><td><strong>Password&nbsp;<\/strong><\/td><td>Your password.<\/td><\/tr><tr><td><strong>Name&nbsp;<\/strong><\/td><td>The name of your database.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For example, here&#8217;s what your connection string should look like: driver=mssql; url=five-test-server.database.windows.net:1433; username=user; password=password; name=exampleDB<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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, <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-build-charts-using-the-chart-wizard\/\" data-type=\"post\" data-id=\"2183\">charts<\/a>, <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/generate-mysql-report\/\" data-type=\"post\" data-id=\"1786\">reports<\/a>, or <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-create-custom-dashboards\/\" data-type=\"post\" data-id=\"2198\">dashboards <\/a>on your SQL Server database. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion &amp; Next Steps<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we covered how to create a SQL server GUI by using Five&#8217;s free MySQL database as a starting point.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Five is best used for building custom business applications. It makes the process of creating a front end on any relational database, MySQL or SQL Server database quick, easy, and efficient and provides developers with a pre-built user interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you have learned how to create a SQL server GUI, where should you take your application next? So far, we only covered the basics of Five. To continue developing your application why not try:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Making it a multi-user application and creating different access rights and permissions for different user groups?<\/li>\n\n\n\n<li>Adding a mail merge to notify users about changes inside your application?<\/li>\n\n\n\n<li>Writing a SQL query inside Five to create reports, charts or dashboards?<\/li>\n\n\n\n<li>Adding JavaScript functions to connect Five to external systems, such as Slack?<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"expansion-build-a-web-app-on-a-my-sql-database\">Expansion: Build a Web App on a SQL Database<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Learn how to build an entire web app on a SQL database by following our <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/acs-masterclass\/\" target=\"_blank\" rel=\"noreferrer noopener\">step-by-step app development guide<\/a>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The guide starts with the creation of a database from scratch and finishes with a web app that contains a chart, PDF reports, and forms for users to interact with your data. You will learn how to combine all these front-end elements with your back-end database.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Best of all: it&#8217;s free to follow!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/acs-masterclass\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn How to Build a Web App<\/a><\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>How to Create a SQL Server GUI 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 [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":2472,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[21],"tags":[],"class_list":["post-2466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Create-a-SQL-Server-GUI-in-4-Steps.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Create-a-SQL-Server-GUI-in-4-Steps-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Create-a-SQL-Server-GUI-in-4-Steps-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Create-a-SQL-Server-GUI-in-4-Steps-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Create-a-SQL-Server-GUI-in-4-Steps-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Create-a-SQL-Server-GUI-in-4-Steps.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Create-a-SQL-Server-GUI-in-4-Steps.png",1280,720,false]},"uagb_author_info":{"display_name":"Ryan Forrester","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed9_au\/"},"uagb_comment_info":0,"uagb_excerpt":"How to Create a SQL Server GUI 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&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=2466"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2466\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/2472"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=2466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=2466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=2466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}