{"id":721,"date":"2025-07-22T12:24:09","date_gmt":"2025-07-22T04:24:09","guid":{"rendered":"https:\/\/five.co\/?p=721"},"modified":"2025-07-24T14:33:52","modified_gmt":"2025-07-24T06:33:52","slug":"how-to-create-a-front-end-for-a-mysql-database","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-create-a-front-end-for-a-mysql-database\/","title":{"rendered":"How to Create a Front End for a MySQL Database in 4 Steps"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Front End for a MySQL Database 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\"><em>But hold on<\/em>: 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\u2019s 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&nbsp;<strong>how to create an intuitive and searchable web front-end for a MySQL database 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 Front End For a MySQL Database<\/strong>\n<span style=\"font-size: 14pt;\">Access 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>Get Started<\/strong><\/button><br \/><\/a><\/p>\n<hr style=\"height: 5px;\" \/><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"root-eb-toc-aa18m wp-block-essential-blocks-table-of-contents\"><div class=\"eb-parent-wrapper eb-parent-eb-toc-aa18m \"><div class=\"eb-toc-container eb-toc-aa18m  eb-toc-is-not-sticky eb-toc-not-collapsible eb-toc-initially-not-collapsed eb-toc-scrollToTop style-1 list-style-none\" data-scroll-top=\"false\" data-scroll-top-icon=\"fas fa-angle-up\" data-collapsible=\"false\" data-sticky-hide-mobile=\"false\" data-sticky=\"false\" data-scroll-target=\"scroll_to_toc\" data-copy-link=\"false\" data-editor-type=\"\" data-hide-desktop=\"false\" data-hide-tab=\"false\" data-hide-mobile=\"false\" data-itemcollapsed=\"false\" data-highlight-scroll=\"false\"><div class=\"eb-toc-header\"><h2 class=\"eb-toc-title\">Table of Contents<\/h2><\/div><div class=\"eb-toc-wrapper \" data-headers=\"[{&quot;level&quot;:2,&quot;content&quot;:&quot;How to Create a Front End for a MySQL Database in Five: Complete Guide with Expert Tips&quot;,&quot;text&quot;:&quot;How to Create a Front End for a MySQL Database in Five: Complete Guide with Expert Tips&quot;,&quot;link&quot;:&quot;how-to-create-a-front-end-for-a-mysql-database-in-five-complete-guide-with-expert-tips&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Goals &amp; Outcomes: Creating a Front End for a MySQL Database&quot;,&quot;text&quot;:&quot;Goals &amp; Outcomes: Creating a Front End for a MySQL Database&quot;,&quot;link&quot;:&quot;goals-outcomes-creating-a-front-end-for-a-mysql-database&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;What Is Five?&quot;,&quot;text&quot;:&quot;What Is Five?&quot;,&quot;link&quot;:&quot;what-is-five&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;How to Create a Front End for a MySQL Database in 4 Steps&quot;,&quot;text&quot;:&quot;How to Create a Front End for a MySQL Database in 4 Steps&quot;,&quot;link&quot;:&quot;how-to-create-a-front-end-for-a-mysql-database-in-4-steps&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Five Community Forum&quot;,&quot;text&quot;:&quot;Five Community Forum&quot;,&quot;link&quot;:&quot;five-community-forum&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 1: Preview The Training Application&quot;,&quot;text&quot;:&quot;Step 1: Preview The Training Application&quot;,&quot;link&quot;:&quot;step-1-preview-the-training-application&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Preview The Full Library Database Application&quot;,&quot;text&quot;:&quot;Preview The Full Library Database Application&quot;,&quot;link&quot;:&quot;preview-the-full-library-database-application&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 2: Understanding The Application&apos;s MySQL Database&quot;,&quot;text&quot;:&quot;Step 2: Understanding The Application&apos;s MySQL Database&quot;,&quot;link&quot;:&quot;step-2-understanding-the-applications-mysql-database&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 3: Building Out the MySQL Front End&quot;,&quot;text&quot;:&quot;Step 3: Building Out the MySQL Front End&quot;,&quot;link&quot;:&quot;step-3-building-out-the-mysql-front-end&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Data Sources and Front-End Elements&quot;,&quot;text&quot;:&quot;Data Sources and Front-End Elements&quot;,&quot;link&quot;:&quot;data-sources-and-front-end-elements&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 4: Launching The Application&quot;,&quot;text&quot;:&quot;Step 4: Launching The Application&quot;,&quot;link&quot;:&quot;step-4-launching-the-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;MySQL Front End All Steps: 1 Min Video&quot;,&quot;text&quot;:&quot;MySQL Front End All Steps: 1 Min Video&quot;,&quot;link&quot;:&quot;mysql-front-end-all-steps-1-min-video&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Understanding The Database Front End&quot;,&quot;text&quot;:&quot;Understanding The Database Front End&quot;,&quot;link&quot;:&quot;understanding-the-database-front-end&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Conclusion &amp; Next Steps&quot;,&quot;text&quot;:&quot;Conclusion &amp; Next Steps&quot;,&quot;link&quot;:&quot;conclusion-next-steps&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Database Design Services&quot;,&quot;text&quot;:&quot;Database Design Services&quot;,&quot;link&quot;:&quot;database-design-services&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;\\n        Transform Ideas Into Powerful Applications 10x Faster\\n    &quot;,&quot;text&quot;:&quot;\\n        Transform Ideas Into Powerful Applications 10x Faster\\n    &quot;,&quot;link&quot;:&quot;transform-ideas-into-powerful-applications-10x-faster&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Spreadsheet to Web App&quot;,&quot;text&quot;:&quot;Spreadsheet to Web App&quot;,&quot;link&quot;:&quot;spreadsheet-to-web-app&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Database Design&quot;,&quot;text&quot;:&quot;Database Design&quot;,&quot;link&quot;:&quot;database-design&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Portal Development&quot;,&quot;text&quot;:&quot;Portal Development&quot;,&quot;link&quot;:&quot;portal-development&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Rapid Application Dev&quot;,&quot;text&quot;:&quot;Rapid Application Dev&quot;,&quot;link&quot;:&quot;rapid-application-dev&quot;}]\" data-visible=\"[true,true,true,false,false,false]\" data-delete-headers=\"[{&quot;label&quot;:&quot;How to Create a Front End for a MySQL Database in Five: Complete Guide with Expert Tips&quot;,&quot;value&quot;:&quot;how-to-create-a-front-end-for-a-mysql-database-in-five-complete-guide-with-expert-tips&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Goals &amp; Outcomes: Creating a Front End for a MySQL Database&quot;,&quot;value&quot;:&quot;goals-outcomes-creating-a-front-end-for-a-mysql-database&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;What Is Five?&quot;,&quot;value&quot;:&quot;what-is-five&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;How to Create a Front End for a MySQL Database in 4 Steps&quot;,&quot;value&quot;:&quot;how-to-create-a-front-end-for-a-mysql-database-in-4-steps&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Five Community Forum&quot;,&quot;value&quot;:&quot;five-community-forum&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 1: Preview The Training Application&quot;,&quot;value&quot;:&quot;step-1-preview-the-training-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Preview The Full Library Database Application&quot;,&quot;value&quot;:&quot;preview-the-full-library-database-application&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 2: Understanding The Application&apos;s MySQL Database&quot;,&quot;value&quot;:&quot;step-2-understanding-the-applications-mysql-database&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 3: Building Out the MySQL Front End&quot;,&quot;value&quot;:&quot;step-3-building-out-the-mysql-front-end&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Data Sources and Front-End Elements&quot;,&quot;value&quot;:&quot;data-sources-and-front-end-elements&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 4: Launching The Application&quot;,&quot;value&quot;:&quot;step-4-launching-the-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;MySQL Front End All Steps: 1 Min Video&quot;,&quot;value&quot;:&quot;mysql-front-end-all-steps-1-min-video&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Understanding The Database Front End&quot;,&quot;value&quot;:&quot;understanding-the-database-front-end&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Conclusion &amp; Next Steps&quot;,&quot;value&quot;:&quot;conclusion-next-steps&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Database Design Services&quot;,&quot;value&quot;:&quot;database-design-services&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;\\n        Transform Ideas Into Powerful Applications 10x Faster\\n    &quot;,&quot;value&quot;:&quot;transform-ideas-into-powerful-applications-10x-faster&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Spreadsheet to Web App&quot;,&quot;value&quot;:&quot;spreadsheet-to-web-app&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Database Design&quot;,&quot;value&quot;:&quot;database-design&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Portal Development&quot;,&quot;value&quot;:&quot;portal-development&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Rapid Application Dev&quot;,&quot;value&quot;:&quot;rapid-application-dev&quot;,&quot;isDelete&quot;:true}]\" data-smooth=\"true\" data-top-offset=\"\"><div class=\"eb-toc__list-wrap\"><ul class=\"eb-toc__list\"><li><a href=\"#goals-outcomes-creating-a-front-end-for-a-mysql-database\">Goals &amp; Outcomes: Creating a Front End for a MySQL Database<\/a><li><a href=\"#what-is-five\">What Is Five?<\/a><li><a href=\"#how-to-create-a-front-end-for-a-mysql-database-in-4-steps\">How to Create a Front End for a MySQL Database in 4 Steps<\/a><ul class=\"eb-toc__list\"><li><a href=\"#step-1-preview-the-training-application\">Step 1: Preview The Training Application<\/a><li><a href=\"#step-2-understanding-the-applications-mysql-database\">Step 2: Understanding The Application&#8217;s MySQL Database<\/a><li><a href=\"#step-3-building-out-the-mysql-front-end\">Step 3: Building Out the MySQL Front End<\/a><li><a href=\"#step-4-launching-the-application\">Step 4: Launching The Application<\/a><\/li><\/ul><li><a href=\"#mysql-front-end-all-steps-1-min-video\">MySQL Front End All Steps: 1 Min Video<\/a><li><a href=\"#understanding-the-database-front-end\">Understanding The Database Front End<\/a><li><a href=\"#conclusion-next-steps\">Conclusion &amp; Next Steps<\/a><\/ul><\/div><\/div><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Goals &amp; Outcomes: Creating a Front End for a MySQL Database<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In this how-to guide, we will go through the steps of developing a <strong>responsive web frontend for a MySQL database<\/strong>. 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. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The tool we will be using is Five, an all-in-one rapid application development environment with comprehensive data, logic and UI features.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">What Is Five?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Five is an all-in-one <strong>Rapid Application Development Environment <\/strong>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. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It combines a full development environment with powerful built-in tools:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 <strong>Database Modeller<\/strong>&nbsp;\u2013 Design your data structure visually<br>\u2705 <strong>Query Writer<\/strong>&nbsp;\u2013 Create complex SQL queries with ease<br>\u2705 <strong>Prebuilt UI<\/strong>&nbsp;\u2013 Auto-generated React\/Material-UI interfaces<br>\u2705 <strong>PDF Report Writer<\/strong>&nbsp;\u2013 Design and schedule custom reports<br>\u2705 <strong>Role-Based Access<\/strong>&nbsp;\u2013 Control user permissions precisely<br>\u2705 <strong>One-Click Deployment<\/strong>&nbsp;\u2013 Develop and publish directly to the cloud<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Five handles everything from prototyping to production\u2014no infrastructure setup required.<\/p>\n\n\n<div class=\"wp-block-uagb-faq uagb-faq__outer-wrap uagb-block-d76a1604 uagb-faq-icon-row uagb-faq-layout-accordion uagb-faq-expand-first-false uagb-faq-inactive-other-true uagb-faq__wrap uagb-buttons-layout-wrap uagb-faq-equal-height     \" data-faqtoggle=\"true\" role=\"tablist\"><script type=\"application\/ld+json\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@type\":\"FAQPage\",\"@id\":\"https:\\\/\\\/preview-php85.dzine.org\\\/five\\\/blog\\\/how-to-create-a-front-end-for-a-mysql-database\\\/\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What Is Five's Tech Stack?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Five is an all-in-one IDE to manage the following tech stack:<br>\\ud83d\\udcbb A responsive web frontend, using the <strong>Material-UI design library<\\\/strong>, <br>\\ud83d\\udca1Business logic \\\/ scripts written in <strong>JavaScript and TypeScript<\\\/strong>;<br>\\ud83d\\udcbe Data stored in <strong>MySQL, SQL Server, <\\\/strong>or from a <strong>REST API or OData connection; <\\\/strong>and<br>\\u2601\\ufe0f Infrastructure provided by <strong>Microsoft Azure. <\\\/strong><br>Five combines everything developers need to <strong>develop and deploy a cloud-native, modern full-stack web application.<\\\/strong>\"}},{\"@type\":\"Question\",\"name\":\"What Are Examples of Applications Developed in Five?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Typical applications built with Five are <strong>internal tools, departmental applications, operations software, business partner portals, or B2B applications<\\\/strong>. Examples are custom CRM solutions, membership systems, order management systems (OMS), product information management (PIM) or inventory systems. \"}},{\"@type\":\"Question\",\"name\":\"Can I Preview Applications Developed in Five?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, we have a large library of sample applications available for free preview on <a href=\\\"https:\\\/\\\/apps.five.co\\\" target=\\\"_blank\\\" rel=\\\"noreferrer noopener\\\">https:\\\/\\\/apps.five.co<\\\/a>\"}},{\"@type\":\"Question\",\"name\":\"Why Should I Use Five, Instead of MEAN, MERN, or LAMP to Build a Web App?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"A tech stack (or software stack) describes the combination of technologies used to build an application. Popular stacks known for their ability to produce fast and powerful web applications are <strong>MERN<\\\/strong> (MongoDB, Express, React, and Node), <strong>LAMP<\\\/strong> (Linux, Apache, MySQL, PHP\\\/Perl\\\/Python), or <strong>MEAN<\\\/strong> (MongoDB, Express, Angular, and Node).<br>These stacks are valid choices for application development but difficult to master. By using Five developers gain <strong>speed<\\\/strong>, <strong>control<\\\/strong> and <strong>access<\\\/strong>. There's no need to setup the stack, sift through component libraries, or figure out the Azure management console for cloud deployment. All of this is handled by Five, accelerating the delivery of cloud applications to end-users. This also enablers more specialised roles, such as backend developers, to manage the entire application development lifecycle, from development to deployment.\"}}]}<\/script><div class=\"wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-9960c335 \" role=\"tab\" tabindex=\"0\"><div class=\"uagb-faq-questions-button uagb-faq-questions\">\t\t\t<span class=\"uagb-icon uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 448 512\"><path d=\"M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span class=\"uagb-icon-active uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 448 512\"><path d=\"M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t<h3 class=\"uagb-question\">What Is Five&#8217;s Tech Stack?<\/h3><\/div><div class=\"uagb-faq-content\"><p>Five is an all-in-one IDE to manage the following tech stack:<br>\ud83d\udcbb A responsive web frontend, using the <strong>Material-UI design library<\/strong>, <br>\ud83d\udca1Business logic \/ scripts written in <strong>JavaScript and TypeScript<\/strong>;<br>\ud83d\udcbe Data stored in <strong>MySQL, SQL Server, <\/strong>or from a <strong>REST API or OData connection; <\/strong>and<br>\u2601\ufe0f Infrastructure provided by <strong>Microsoft Azure. <\/strong><br>Five combines everything developers need to <strong>develop and deploy a cloud-native, modern full-stack web application.<\/strong><\/p><\/div><\/div><div class=\"wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-f33b871c \" role=\"tab\" tabindex=\"0\"><div class=\"uagb-faq-questions-button uagb-faq-questions\">\t\t\t<span class=\"uagb-icon uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 448 512\"><path d=\"M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span class=\"uagb-icon-active uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 448 512\"><path d=\"M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t<h3 class=\"uagb-question\">What Are Examples of Applications Developed in Five?<\/h3><\/div><div class=\"uagb-faq-content\"><p>Typical applications built with Five are <strong>internal tools, departmental applications, operations software, business partner portals, or B2B applications<\/strong>. Examples are custom CRM solutions, membership systems, order management systems (OMS), product information management (PIM) or inventory systems. <\/p><\/div><\/div><div class=\"wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-0b0cd2d7 \" role=\"tab\" tabindex=\"0\"><div class=\"uagb-faq-questions-button uagb-faq-questions\">\t\t\t<span class=\"uagb-icon uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 448 512\"><path d=\"M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span class=\"uagb-icon-active uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 448 512\"><path d=\"M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t<h3 class=\"uagb-question\">Can I Preview Applications Developed in Five?<\/h3><\/div><div class=\"uagb-faq-content\"><p>Yes, we have a large library of sample applications available for free preview on <a href=\"https:\/\/apps.five.co\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/apps.five.co<\/a><\/p><\/div><\/div><div class=\"wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-27a67b2d \" role=\"tab\" tabindex=\"0\"><div class=\"uagb-faq-questions-button uagb-faq-questions\">\t\t\t<span class=\"uagb-icon uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 448 512\"><path d=\"M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span class=\"uagb-icon-active uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 448 512\"><path d=\"M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t<h3 class=\"uagb-question\">Why Should I Use Five, Instead of MEAN, MERN, or LAMP to Build a Web App?<\/h3><\/div><div class=\"uagb-faq-content\"><p>A tech stack (or software stack) describes the combination of technologies used to build an application. Popular stacks known for their ability to produce fast and powerful web applications are <strong>MERN<\/strong> (MongoDB, Express, React, and Node), <strong>LAMP<\/strong> (Linux, Apache, MySQL, PHP\/Perl\/Python), or <strong>MEAN<\/strong> (MongoDB, Express, Angular, and Node).<br>These stacks are valid choices for application development but difficult to master. By using Five developers gain <strong>speed<\/strong>, <strong>control<\/strong> and <strong>access<\/strong>. There&#8217;s no need to setup the stack, sift through component libraries, or figure out the Azure management console for cloud deployment. All of this is handled by Five, accelerating the delivery of cloud applications to end-users. This also enablers more specialised roles, such as backend developers, to manage the entire application development lifecycle, from development to deployment.<\/p><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><a id=\"how-to-create-a-front-end-for-a-mysql-database\"><\/a>How to Create a Front End for a MySQL Database in 4 Steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To get started:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1\ufe0f\u20e3 <a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/preview-php85.dzine.org\/five\/sign-up\" rel=\"noreferrer noopener\">Sign Up for a Free Trial.<\/a><br><\/strong>2\ufe0f\u20e3 <strong><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five-SQL-Frontend-Demo-Start.fdf\" data-type=\"link\" data-id=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five-SQL-Frontend-Demo-Start.fdf\" target=\"_blank\" rel=\"noreferrer noopener\">Download the Sample Application<\/a><\/strong>. The file will be stored as &#8220;<em>Five &#8211; SQL Frontend Demo Start.fdf<\/em>&#8220;<br>3\ufe0f\u20e3 Import the Sample Application into Five. Login to your trial account and <a href=\"https:\/\/help.five.org\/2.9\/docs\/applications\/export-import-fdf#import-an-fdf\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">follow the steps in our documentation<\/a> or <a href=\"https:\/\/youtu.be\/-77oYJn12Fg?feature=shared&amp;t=26\" data-type=\"link\" data-id=\"https:\/\/youtu.be\/-77oYJn12Fg?feature=shared&amp;t=26\" rel=\"nofollow noopener\" target=\"_blank\">watch this video<\/a>.<\/p>\n\n\n\n<div style=\"background-color: #001524; border-left: 4px solid #f8b92b; padding: 20px; margin: 30px 0; border-radius: 0 4px 4px 0; position: relative; padding-left: 50px;\">\n    <div style=\"position: absolute; top: 20px; left: 15px; background-color: #f8b92b; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 16V12\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 8H12.01\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n    <\/div>\n    <h3 style=\"color: #f8b92b; margin-top: 0; font-size: 1.3rem; font-weight: 600;\">Five Community Forum<\/h3>\n    <p style=\"color: #f1ebda; margin-bottom: 0; font-size: 1.1rem; line-height: 1.6;\">\n        If you get stuck or need help, head to our <a href=\"https:\/\/five.org\" style=\"color: #f8b92b; text-decoration: underline; font-weight: 600;\" rel=\"nofollow noopener\" target=\"_blank\">Community Forum, the best place to ask questions and get answers from experts in our community!<\/a>\n    <\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Preview The Training Application<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Before we jump into the development, let&#8217;s preview the training application we&#8217;ve just imported.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"724\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five-Screenshots-3-1024x724.jpg\" alt=\"Five.Co - Applications\" class=\"wp-image-17240\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five-Screenshots-3-1024x724.jpg 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five-Screenshots-3-300x212.jpg 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five-Screenshots-3-768x543.jpg 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five-Screenshots-3-1536x1086.jpg 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five-Screenshots-3.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"724\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Application-Deployment-1024x724.jpg\" alt=\"\" class=\"wp-image-17242\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Application-Deployment-1024x724.jpg 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Application-Deployment-300x212.jpg 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Application-Deployment-768x543.jpg 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Application-Deployment-1536x1086.jpg 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Application-Deployment.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<h4 class=\"wp-block-heading has-text-align-center\">Five&#8217;s One-Click Cloud Deployment<\/h4>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Clicking the <strong>Cloud <\/strong>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 <strong>Run <\/strong>\u25b6\ufe0f button that is now visible in Five&#8217;s top right corner.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img width=\"743\" height=\"127\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/image.png\" alt=\"\" class=\"wp-image-17241\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/image.png 743w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/image-300x51.png 300w\" sizes=\"(max-width: 743px) 100vw, 743px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">The <strong>Run \u25b6\ufe0f<\/strong> <strong>button <\/strong>lets you preview your application at any time. <\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Explore the Training Application<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The training application is a <strong>Library Database Application prototype.<\/strong> Take a few minutes to explore its features, from the initial <strong>Terms and Conditions<\/strong> consent screen to the <strong>responsive CRUD interface.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Today we want to adjust the <strong>Search Book <\/strong>interface. It&#8217;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.<\/p>\n\n\n\n<div style=\"background-color: #001524; border-left: 4px solid #f8b92b; padding: 20px; margin: 30px 0; border-radius: 0 4px 4px 0; position: relative; padding-left: 50px;\">\n    <div style=\"position: absolute; top: 20px; left: 15px; background-color: #f8b92b; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 16V12\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 8H12.01\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n    <\/div>\n    <h3 style=\"color: #f8b92b; margin-top: 0; font-size: 1.3rem; font-weight: 600;\">Preview The Full Library Database Application<\/h3>\n    <p style=\"color: #f1ebda; margin-bottom: 0; font-size: 1.1rem; line-height: 1.6;\">\n        To preview the fully developed Library Database Application, with Role-Based Access Control, CRUD permissions, and functions, scripts and automations, visit <a href=\"https:\/\/apps.five.co\/apps\/library-database\/\" style=\"color: #f8b92b; text-decoration: underline; font-weight: 600;\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/apps.five.co\/apps\/library-database\/<\/a>, click &#8220;Click Here to Preview&#8221; and sign in with username <strong>librarian<\/strong> and password <strong>P@ssw0rd<\/strong>\n    <\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Now, go back into the development environment and let&#8217;s explore the application&#8217;s architecture.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Understanding The Application&#8217;s MySQL Database<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To view the database of our training application, navigate to <strong>Manage &gt; Data &gt; Database Modeler<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"724\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Click-Manage-to-Access-the-Five-Development-Environment-1024x724.jpg\" alt=\"\" class=\"wp-image-17243\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Click-Manage-to-Access-the-Five-Development-Environment-1024x724.jpg 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Click-Manage-to-Access-the-Five-Development-Environment-300x212.jpg 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Click-Manage-to-Access-the-Five-Development-Environment-768x543.jpg 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Click-Manage-to-Access-the-Five-Development-Environment-1536x1086.jpg 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Click-Manage-to-Access-the-Five-Development-Environment.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In <strong>Data <\/strong>&gt; <strong>Database Modeler<\/strong> you can inspect and manage the application&#8217;s MySQL database. It has three tables: books, authors and genre. Do <strong>not <\/strong>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.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<h4 class=\"wp-block-heading has-text-align-center\">Five&#8217;s Database Modeler<\/h4>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium\"><img width=\"250\" height=\"300\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/11\/image-7-250x300.png\" alt=\"SQL Database Schema in Five's Database Modeler\" class=\"wp-image-17253\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/11\/image-7-250x300.png 250w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/11\/image-7-853x1024.png 853w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/11\/image-7-768x922.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/11\/image-7-1279x1536.png 1279w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/11\/image-7.png 1293w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Your database&#8217;s schema, including all entities, fields, keys, and relationships is visible and can be managed in Five&#8217;s <strong>Database Modeler.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Building Out the MySQL Front End<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s start developing. <strong>Today, we want to add a search bar to our Search Book interface. To do so, follow the steps below.<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adjust the SQL Query<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">1\ufe0f\u20e3 Navigate to <strong>Data <\/strong>&gt; <strong>Queries<\/strong>.<br>2\ufe0f\u20e3 Select the <em>SearchBookQuery<\/em>. This is the query that is displayed in the <strong>Search Book <\/strong>interface on our prototype application.<br>3\ufe0f\u20e3 Click the <strong>Query <\/strong>field to edit the SQL query.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"724\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-WRITING-SQL-QUERIES-1024x724.jpg\" alt=\"Five.Co - Writing SQL Queries\" class=\"wp-image-17244\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-WRITING-SQL-QUERIES-1024x724.jpg 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-WRITING-SQL-QUERIES-300x212.jpg 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-WRITING-SQL-QUERIES-768x543.jpg 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-WRITING-SQL-QUERIES-1536x1086.jpg 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-WRITING-SQL-QUERIES.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Replace the existing SQL query with the following:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#abb2bf;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"SELECT\n    Book.BookKey, \n    Book.Title,\n    Genre.GenreName, \n    Book.TotalCopies, \n    Book.ShelfLocation, \n    CONCAT(Author.FirstName, ' ', Author.LastName) AS Author,\n    Book.Cover\nFROM Book\nINNER JOIN Author ON Author.AuthorKey = Book.AuthorKey\nINNER JOIN Genre ON Genre.GenreKey = Book.GenreKey\nWHERE Book.Title LIKE CONCAT('%', ?, '%')\nGROUP BY Book.BookKey\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C678DD\">SELECT<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #D19A66\">Book<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">BookKey<\/span><span style=\"color: #ABB2BF\">, <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #D19A66\">Book<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">Title<\/span><span style=\"color: #ABB2BF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #D19A66\">Genre<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">GenreName<\/span><span style=\"color: #ABB2BF\">, <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #D19A66\">Book<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">TotalCopies<\/span><span style=\"color: #ABB2BF\">, <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #D19A66\">Book<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">ShelfLocation<\/span><span style=\"color: #ABB2BF\">, <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #56B6C2\">CONCAT<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #D19A66\">Author<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">FirstName<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #98C379\">&#39; &#39;<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #D19A66\">Author<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">LastName<\/span><span style=\"color: #ABB2BF\">) <\/span><span style=\"color: #C678DD\">AS<\/span><span style=\"color: #ABB2BF\"> Author,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #D19A66\">Book<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">Cover<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">FROM<\/span><span style=\"color: #ABB2BF\"> Book<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">INNER JOIN<\/span><span style=\"color: #ABB2BF\"> Author <\/span><span style=\"color: #C678DD\">ON<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">Author<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">AuthorKey<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">Book<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">AuthorKey<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">INNER JOIN<\/span><span style=\"color: #ABB2BF\"> Genre <\/span><span style=\"color: #C678DD\">ON<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">Genre<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">GenreKey<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">Book<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">GenreKey<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">WHERE<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">Book<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">Title<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">LIKE<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">CONCAT<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;%&#39;<\/span><span style=\"color: #ABB2BF\">, ?, <\/span><span style=\"color: #98C379\">&#39;%&#39;<\/span><span style=\"color: #ABB2BF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">GROUP BY<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">Book<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #D19A66\">BookKey<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">What has changed? The existing query did not have a <code>WHERE<\/code> condition. By adding a <code>WHERE<\/code> condition with a parameter, as denoted by the <code>LIKE CONCAT('%', ?, '%')<\/code> 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.<\/p>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">You can also test your SQL query by clicking the <strong>Run \u25b6\ufe0f button.<\/strong> Last, don&#8217;t forget to save your changes by clicking the <strong>Tick \u2714\ufe0f button<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"724\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Testing-and-saving-SQL-QUERIES-1024x724.jpg\" alt=\"Five.Co - Testing and Saving SQL Queries\" class=\"wp-image-17246\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Testing-and-saving-SQL-QUERIES-1024x724.jpg 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Testing-and-saving-SQL-QUERIES-300x212.jpg 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Testing-and-saving-SQL-QUERIES-768x543.jpg 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Testing-and-saving-SQL-QUERIES-1536x1086.jpg 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Testing-and-saving-SQL-QUERIES.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Next, go to <strong>Parameters, <\/strong>and click<strong> Plus.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"724\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Proving-Parameters-for-a-Query-1024x724.jpg\" alt=\"Five.Co - Providing Parameters for a Query\" class=\"wp-image-17247\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Proving-Parameters-for-a-Query-1024x724.jpg 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Proving-Parameters-for-a-Query-300x212.jpg 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Proving-Parameters-for-a-Query-768x543.jpg 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Proving-Parameters-for-a-Query-1536x1086.jpg 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Proving-Parameters-for-a-Query.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Fill in the information provided below to establish a parameter for the book title. Then, click the <strong>Tick <\/strong>button to save the parameter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udfe9 Parameter ID: <em>bookTitle<\/em><br>\ud83d\udfe9 Parameter Type: <em>Expression<\/em><br>\ud83d\udfe9 Parameter: <em>{{five.variable.BookTitle}}<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Save the parameter, and then save all changes made to the query.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Adjusting the Data View<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Next, navigate to the <strong>References <\/strong>tab and then click on the <strong>View<\/strong> button. Here you will see that our SQL query is currently being referenced by a <strong>Data View<\/strong>, a front-end element displayed in our web UI.<\/p>\n\n\n\n<div style=\"background-color: #001524; border-left: 4px solid #f8b92b; padding: 20px; margin: 30px 0; border-radius: 0 4px 4px 0; position: relative; padding-left: 50px;\">\n    <div style=\"position: absolute; top: 20px; left: 15px; background-color: #f8b92b; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 16V12\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 8H12.01\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n    <\/div>\n    <h3 style=\"color: #f8b92b; margin-top: 0; font-size: 1.3rem; font-weight: 600;\">Data Sources and Front-End Elements<\/h3>\n    <p style=\"color: #f1ebda; margin-bottom: 0; font-size: 1.1rem; line-height: 1.6;\">\n        It&#8217;s important to understand that our SQL query isn&#8217;t displayed directly on the front end. In and by itself, it&#8217;s just a query. However, it is used inside a <strong>Data View<\/strong>. By navigating to <strong>References<\/strong>, we can see that there is a <strong>Data View<\/strong> in this application that references the query as a data source. In general, Five works on the principle that a frontend element, such as a form, data view, PDF report or dashboard, must have a data source, whether it&#8217;s a database table, a query or an API endpoint. \n    <\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve clicked <strong>View, <\/strong>you will land on the screen below. On it, select <strong>Screen Fields<\/strong> and then click <strong>Plus.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"724\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-1024x724.jpg\" alt=\"Five.Co - Adjusting a Data View\" class=\"wp-image-17248\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-1024x724.jpg 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-300x212.jpg 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-768x543.jpg 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-1536x1086.jpg 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let&#8217;s add the <strong>Search Book Title textbox<\/strong> along with the details provided below to link it with the parameter we created in our SQL query earlier. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udfe9 Caption: <em>Search Book Title<\/em><br>\ud83d\udfe9 Field ID: <em>SearchBookTitle<\/em><br>\ud83d\udfe9 Display Type: <em>_Text<\/em><br>\ud83d\udfe9 Linked Parameter: <em>{{five.variable.BookTitle}}<\/em><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"724\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-Screen-Field-Definition-1024x724.jpg\" alt=\"Five.Co - Adjusting a Data View - Screen Field Definition\" class=\"wp-image-17249\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-Screen-Field-Definition-1024x724.jpg 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-Screen-Field-Definition-300x212.jpg 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-Screen-Field-Definition-768x543.jpg 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-Screen-Field-Definition-1536x1086.jpg 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Adjusting-a-Data-View-Screen-Field-Definition.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Launching The Application<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">As before, let&#8217;s launch the application again and check out what has changed. Go to the <strong>Search Book <\/strong>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. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Data View <\/strong>that our users are interacting with is connected to our <strong>SQL query<\/strong>, which in turn queries our <strong>MySQL database. <\/strong>We have seen all of these elements in Five. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have further used Five&#8217;s <strong>one-click deployment <\/strong>to launch and preview the application to the cloud.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#f1f1f1\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"724\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Final-Result-1024x724.jpg\" alt=\"\" class=\"wp-image-17250\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Final-Result-1024x724.jpg 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Final-Result-300x212.jpg 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Final-Result-768x543.jpg 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Final-Result-1536x1086.jpg 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five.Co-Final-Result.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">MySQL Front End All Steps: 1 Min Video<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a video that shows all steps explained above.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"792\" style=\"aspect-ratio: 1122 \/ 792;\" width=\"1122\" controls src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2025\/07\/Five-Screenshots.mp4\"><\/video><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding The Database Front End<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s delve a bit deeper into the user interface that Five provides. <\/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 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;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.<\/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<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<h2 class=\"wp-block-heading\">Conclusion &amp; Next Steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we covered some of Five&#8217;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. <\/p>\n\n\n\n<div style=\"background-color: #001524; border-left: 4px solid #f8b92b; padding: 20px; margin: 30px 0; border-radius: 0 4px 4px 0; position: relative; padding-left: 50px;\">\n    <div style=\"position: absolute; top: 20px; left: 15px; background-color: #f8b92b; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 16V12\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <path d=\"M12 8H12.01\" stroke=\"#001524\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n        <\/svg>\n    <\/div>\n    <h3 style=\"color: #f8b92b; margin-top: 0; font-size: 1.3rem; font-weight: 600;\">Database Design Services<\/h3>\n    <p style=\"color: #f1ebda; margin-bottom: 0; font-size: 1.1rem; line-height: 1.6;\">\n        If you are at the very start of your application development and don&#8217;t have a database yet, our database design services are the best place to start. We quickly turn ideas into robust and scalable relational databases. \n    <\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc65 Making it a multi-user application and assigning permissions through Role-Based Access Control (RBAC)?<br>\ud83d\udcc8 Writing a SQL query inside Five to create reports, charts or dashboards?<br>\ud83d\udce8 Adding a mail merge to notify users about changes inside your application?<br>\ud83d\udd14 Adding JavaScript functions to connect Five to external systems, such as Slack?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All of this (and much more) is possible in Five. The best places to start are:<br>1\ufe0f\u20e3 Our <a href=\"http:\/\/help.five.org\" data-type=\"link\" data-id=\"help.five.org\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">comprehensive series of blog posts on database modelling in Five<\/a>. Start here if you have a database schema (tables, fields, relationships) that you would like to implement in Five. <br>2\ufe0f\u20e3 To learn how to create a data view like the Search Book interface, <a href=\"https:\/\/help.five.org\/2.9\/docs\/visual\/data-views\/introduction\/\" data-type=\"link\" data-id=\"https:\/\/help.five.org\/2.9\/docs\/visual\/data-views\/introduction\/\" rel=\"nofollow noopener\" target=\"_blank\">visit our documentation on data views here.<\/a> Note that you <strong>first<\/strong> <strong>need a data source, such as a database or a query, to create a data view. <\/strong>In Five, <strong>you cannot create a frontend unless you have a data source.<\/strong><br>3\ufe0f\u20e3 If you get stuck, our <a href=\"https:\/\/five.org\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">user community<\/a> is the best place to ask questions and find answers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u25b6\ufe0f\u25b6\ufe0f\u25b6\ufe0f <strong>You can further accelerate your development by reaching out to us for a free and comprehensive <a href=\"https:\/\/preview-php85.dzine.org\/five\/contact-us\/\" data-type=\"link\" data-id=\"https:\/\/preview-php85.dzine.org\/five\/contact-us\/\">step-by-step guide on implementing your use case.<\/a><\/strong> Send us a message and one of our developers will get back to you within 24 to 48 hours.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cut down your development time to days with Five! Happy Coding!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"background: linear-gradient(135deg, #001524 0%, #003366 100%); border-radius: 12px; padding: 40px; margin: 40px 0; color: #f1ebda; font-family: 'Segoe UI', Roboto, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,0.15); border: 1px solid rgba(248, 185, 43, 0.2);\">\n    <h2 style=\"color: #f8b92b; margin: 0 0 25px 0; font-size: 1.8rem; font-weight: 700; line-height: 1.3; text-align: center;\">\n        Transform Ideas Into Powerful Applications 10x Faster\n    <\/h2>\n    \n    <p style=\"color: white; text-align: center; margin: 0 auto 30px; max-width: 700px; font-size: 1.1rem; line-height: 1.6;\">\n        Work with our experts to turn your vision into production-ready applications at unprecedented speed\n    <\/p>\n    \n    <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0 auto; max-width: 800px;\">\n        <!-- Row 1 -->\n        <div style=\"background: rgba(248, 185, 43, 0.1); padding: 20px; border-radius: 8px; border-top: 3px solid #f8b92b;\">\n            <h3 style=\"color: #f8b92b; margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 600;\">Spreadsheet to Web App<\/h3>\n            <p style=\"color: white; margin: 0; font-size: 0.95rem;\">Convert Excel workflows into secure, scalable web applications<\/p>\n        <\/div>\n        \n        <div style=\"background: rgba(248, 185, 43, 0.1); padding: 20px; border-radius: 8px; border-top: 3px solid #f8b92b;\">\n            <h3 style=\"color: #f8b92b; margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 600;\">Database Design<\/h3>\n            <p style=\"color: white; margin: 0; font-size: 0.95rem;\">Optimized data structures for performance and growth<\/p>\n        <\/div>\n        \n        <!-- Row 2 -->\n        <div style=\"background: rgba(248, 185, 43, 0.1); padding: 20px; border-radius: 8px; border-top: 3px solid #f8b92b;\">\n            <h3 style=\"color: #f8b92b; margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 600;\">Portal Development<\/h3>\n            <p style=\"color: white; margin: 0; font-size: 0.95rem;\">Custom portals that streamline business processes<\/p>\n        <\/div>\n        \n        <div style=\"background: rgba(248, 185, 43, 0.1); padding: 20px; border-radius: 8px; border-top: 3px solid #f8b92b;\">\n            <h3 style=\"color: #f8b92b; margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 600;\">Rapid Application Dev<\/h3>\n            <p style=\"color: white; margin: 0; font-size: 0.95rem;\">Build enterprise apps in weeks, not months<\/p>\n        <\/div>\n    <\/div>\n    \n    <div style=\"text-align: center; margin-top: 30px;\">\n        <a href=\"https:\/\/preview-php85.dzine.org\/five\/hire-an-expert\/\" style=\"display: inline-block; background-color: #f8b92b; color: #001524; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-weight: 600; transition: all 0.3s ease;\">\n            Get Your Fixed-Price Quote Today \u2192\n        <\/a>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":740,"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-721","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\/2023\/01\/Five.Co-How-To-Create-A-Front-End-For-A-MySQL-Database-Cover.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-How-To-Create-A-Front-End-For-A-MySQL-Database-Cover.png",150,84,false],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-How-To-Create-A-Front-End-For-A-MySQL-Database-Cover.png",300,169,false],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-How-To-Create-A-Front-End-For-A-MySQL-Database-Cover.png",768,432,false],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-How-To-Create-A-Front-End-For-A-MySQL-Database-Cover.png",1024,576,false],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-How-To-Create-A-Front-End-For-A-MySQL-Database-Cover.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-How-To-Create-A-Front-End-For-A-MySQL-Database-Cover.png",1280,720,false]},"uagb_author_info":{"display_name":"Dominik Keller","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed3_my\/"},"uagb_comment_info":0,"uagb_excerpt":"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&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/721","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=721"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/721\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/740"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}