{"id":2556,"date":"2024-03-08T14:10:18","date_gmt":"2024-03-08T06:10:18","guid":{"rendered":"https:\/\/five.co\/?p=2556"},"modified":"2024-08-09T12:09:52","modified_gmt":"2024-08-09T04:09:52","slug":"how-to-build-a-sql-app","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/code-along\/how-to-build-a-sql-app\/","title":{"rendered":"How To Build a SQL App"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Can SQL create web apps? The answer is yes, it can. With the right tools, it is possible to <strong>create an entire web application with little more than a few lines of SQL<\/strong>. The only knowledge required is SQL and an understanding of relational databases, such as MySQL. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>In this step-by-step tutorial, we are building a SQL app, using only Five, a rapid application development environment, and SQL. <\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Goals and Objectives<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In this step-by-step tutorial, we are developing:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A responsive SQL app that uses a MySQL database, <\/li>\n\n\n\n<li>A chart on top of an SQL query, and <\/li>\n\n\n\n<li>A PDF report that shows data from our SQL database to our application.<\/li>\n\n\n\n<li>Last, we put all of this into a login-protected, responsive web app.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Sounds like a lot? You&#8217;ll be surprised how quickly we can do this in Five!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before we continue, make sure to&nbsp;<a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\" target=\"_blank\" rel=\"noreferrer noopener\">sign up for free access to the Five development environment<\/a>.<\/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>Get Free Access to Five's Development Environment<br \/><\/strong><span style=\"font-size: 14pt;\">Rapidly Build &amp; Deploy Apps With Only SQL<\/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>Free Sign Up<\/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-sgbejbd wp-block-essential-blocks-table-of-contents\"><div class=\"eb-parent-wrapper eb-parent-eb-toc-sgbejbd \"><div class=\"eb-toc-container eb-toc-sgbejbd  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;:3,&quot;content&quot;:&quot;Goals and Objectives&quot;,&quot;text&quot;:&quot;Goals and Objectives&quot;,&quot;link&quot;:&quot;goals-and-objectives&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Get Your App Online For US$29.99 Per Month&quot;,&quot;text&quot;:&quot;Get Your App Online For US$29.99 Per Month&quot;,&quot;link&quot;:&quot;get-your-app-online-for-us2999-per-month&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Host Your App Online&quot;,&quot;text&quot;:&quot;Host Your App Online&quot;,&quot;link&quot;:&quot;host-your-app-online&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Free Training&quot;,&quot;text&quot;:&quot;Free Training&quot;,&quot;link&quot;:&quot;free-training&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Resources and Downloads&quot;,&quot;text&quot;:&quot;Resources and Downloads&quot;,&quot;link&quot;:&quot;resources-and-downloads&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;CSV File&quot;,&quot;text&quot;:&quot;CSV File&quot;,&quot;link&quot;:&quot;csv-file&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;SQL Query&quot;,&quot;text&quot;:&quot;SQL Query&quot;,&quot;link&quot;:&quot;sql-query&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Theme&quot;,&quot;text&quot;:&quot;Theme&quot;,&quot;link&quot;:&quot;theme&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Report Template&quot;,&quot;text&quot;:&quot;Report Template&quot;,&quot;link&quot;:&quot;report-template&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 1: Creating a New Application&quot;,&quot;text&quot;:&quot;Step 1: Creating a New Application&quot;,&quot;link&quot;:&quot;step-1-creating-a-new-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 2: Running Your Application \\u25b6\\ufe0f&quot;,&quot;text&quot;:&quot;Step 2: Running Your Application \\u25b6\\ufe0f&quot;,&quot;link&quot;:&quot;eb-table-content-10&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 3: Data &gt; Table Wizard: Creating Database Tables &quot;,&quot;text&quot;:&quot;Step 3: Data &gt; Table Wizard: Creating Database Tables &quot;,&quot;link&quot;:&quot;step-3-data-table-wizard-creating-database-tables&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;The Product Table&quot;,&quot;text&quot;:&quot;The Product Table&quot;,&quot;link&quot;:&quot;the-product-table&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;The Orders Table&quot;,&quot;text&quot;:&quot;The Orders Table&quot;,&quot;link&quot;:&quot;the-orders-table&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;The ProductOrders Table&quot;,&quot;text&quot;:&quot;The ProductOrders Table&quot;,&quot;link&quot;:&quot;the-productorders-table&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 4: Data &gt; The Database Modeler&quot;,&quot;text&quot;:&quot;Step 4: Data &gt; The Database Modeler&quot;,&quot;link&quot;:&quot;step-4-data-the-database-modeler&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;First Checkpoint: Is Your Database Setup Correctly? &quot;,&quot;text&quot;:&quot;First Checkpoint: Is Your Database Setup Correctly? &quot;,&quot;link&quot;:&quot;first-checkpoint-is-your-database-setup-correctly&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 5: Data &gt; Tables: Importing a CSV&quot;,&quot;text&quot;:&quot;Step 5: Data &gt; Tables: Importing a CSV&quot;,&quot;link&quot;:&quot;step-5-data-tables-importing-a-csv&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 6: Visual &gt; Form Wizard: Creating Forms&quot;,&quot;text&quot;:&quot;Step 6: Visual &gt; Form Wizard: Creating Forms&quot;,&quot;link&quot;:&quot;step-6-visual-form-wizard-creating-forms&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Create the Product and Orders Form&quot;,&quot;text&quot;:&quot;Create the Product and Orders Form&quot;,&quot;link&quot;:&quot;create-the-product-and-orders-form&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Create the ProductOrders Form&quot;,&quot;text&quot;:&quot;Create the ProductOrders Form&quot;,&quot;link&quot;:&quot;create-the-productorders-form&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 7: Visual &gt; Forms: Adding a Page to a Form&quot;,&quot;text&quot;:&quot;Step 7: Visual &gt; Forms: Adding a Page to a Form&quot;,&quot;link&quot;:&quot;step-7-visual-forms-adding-a-page-to-a-form&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Second Checkpoint: Run Your Application&quot;,&quot;text&quot;:&quot;Second Checkpoint: Run Your Application&quot;,&quot;link&quot;:&quot;second-checkpoint-run-your-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 8.A.: Using Five&apos;s End-User GUI&quot;,&quot;text&quot;:&quot;Step 8.A.: Using Five&apos;s End-User GUI&quot;,&quot;link&quot;:&quot;step-8a-using-fives-end-user-gui&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 8.B.: Data &gt; Queries: Write SQL In Five&quot;,&quot;text&quot;:&quot;Step 8.B.: Data &gt; Queries: Write SQL In Five&quot;,&quot;link&quot;:&quot;step-8b-data-queries-write-sql-in-five&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 9: Visual &gt; Chart Wizard: Create Charts For Your Application&quot;,&quot;text&quot;:&quot;Step 9: Visual &gt; Chart Wizard: Create Charts For Your Application&quot;,&quot;link&quot;:&quot;step-9-visual-chart-wizard-create-charts-for-your-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 10: Visual &gt; Reports: Creating a PDF Report&quot;,&quot;text&quot;:&quot;Step 10: Visual &gt; Reports: Creating a PDF Report&quot;,&quot;link&quot;:&quot;step-10-visual-reports-creating-a-pdf-report&quot;},{&quot;level&quot;:1,&quot;content&quot;:&quot;Report&quot;,&quot;text&quot;:&quot;Report&quot;,&quot;link&quot;:&quot;report&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 11: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;text&quot;:&quot;Step 11: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;link&quot;:&quot;step-11-visual-menus-adding-menu-items-to-your-app&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Third Checkpoint: Here&apos;s What Your App Should Now Look Like&quot;,&quot;text&quot;:&quot;Third Checkpoint: Here&apos;s What Your App Should Now Look Like&quot;,&quot;link&quot;:&quot;third-checkpoint-heres-what-your-app-should-now-look-like&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 12: Applications: Turning Your App Into a Multiuser App&quot;,&quot;text&quot;:&quot;Step 12: Applications: Turning Your App Into a Multiuser App&quot;,&quot;link&quot;:&quot;step-12-applications-turning-your-app-into-a-multiuser-app&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Fourth Checkpoint: Logging Into Your Application For The First Time&quot;,&quot;text&quot;:&quot;Fourth Checkpoint: Logging Into Your Application For The First Time&quot;,&quot;link&quot;:&quot;fourth-checkpoint-logging-into-your-application-for-the-first-time&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 13: Setup &gt; User Roles: Creating Roles And Permissions&quot;,&quot;text&quot;:&quot;Step 13: Setup &gt; User Roles: Creating Roles And Permissions&quot;,&quot;link&quot;:&quot;step-13-setup-user-roles-creating-roles-and-permissions&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 14: Setup &gt; Themes: Give Your Application a Unique Look&quot;,&quot;text&quot;:&quot;Step 14: Setup &gt; Themes: Give Your Application a Unique Look&quot;,&quot;link&quot;:&quot;step-14-setup-themes-give-your-application-a-unique-look&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 15: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI&quot;,&quot;text&quot;:&quot;Step 15: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI&quot;,&quot;link&quot;:&quot;step-15-setup-instances-applying-a-theme-logos-and-customizing-the-ui&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Congratulations: Creating a SQL App&quot;,&quot;text&quot;:&quot;Congratulations: Creating a SQL App&quot;,&quot;link&quot;:&quot;congratulations-creating-a-sql-app&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Finding Help in Five&quot;,&quot;text&quot;:&quot;Finding Help in Five&quot;,&quot;link&quot;:&quot;finding-help-in-five&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Five&apos;s In-App Help&quot;,&quot;text&quot;:&quot;Five&apos;s In-App Help&quot;,&quot;link&quot;:&quot;fives-in-app-help&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Host Your SQL App Online For Just US$29.99 Per Month&quot;,&quot;text&quot;:&quot;Host Your SQL App Online For Just US$29.99 Per Month&quot;,&quot;link&quot;:&quot;host-your-sql-app-online-for-just-us2999-per-month&quot;}]\" data-visible=\"[true,true,true,true,true,true]\" data-delete-headers=\"[{&quot;label&quot;:&quot;Goals and Objectives&quot;,&quot;value&quot;:&quot;goals-and-objectives&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Get Your App Online For US$29.99 Per Month&quot;,&quot;value&quot;:&quot;get-your-app-online-for-us2999-per-month&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Host Your App Online&quot;,&quot;value&quot;:&quot;host-your-app-online&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Free Training&quot;,&quot;value&quot;:&quot;free-training&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Resources and Downloads&quot;,&quot;value&quot;:&quot;resources-and-downloads&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;CSV File&quot;,&quot;value&quot;:&quot;csv-file&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;SQL Query&quot;,&quot;value&quot;:&quot;sql-query&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Theme&quot;,&quot;value&quot;:&quot;theme&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Report Template&quot;,&quot;value&quot;:&quot;report-template&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 1: Creating a New Application&quot;,&quot;value&quot;:&quot;step-1-creating-a-new-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 2: Running Your Application \\u25b6\\ufe0f&quot;,&quot;value&quot;:&quot;step-2-running-your-application-\\u25b6\\ufe0f&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 3: Data &gt; Table Wizard: Creating Database Tables &quot;,&quot;value&quot;:&quot;step-3-data-table-wizard-creating-database-tables&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;The Product Table&quot;,&quot;value&quot;:&quot;the-product-table&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;The Orders Table&quot;,&quot;value&quot;:&quot;the-orders-table&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;The ProductOrders Table&quot;,&quot;value&quot;:&quot;the-productorders-table&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 4: Data &gt; The Database Modeler&quot;,&quot;value&quot;:&quot;step-4-data-the-database-modeler&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;First Checkpoint: Is Your Database Setup Correctly? &quot;,&quot;value&quot;:&quot;first-checkpoint-is-your-database-setup-correctly&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 5: Data &gt; Tables: Importing a CSV&quot;,&quot;value&quot;:&quot;step-5-data-tables-importing-a-csv&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 6: Visual &gt; Form Wizard: Creating Forms&quot;,&quot;value&quot;:&quot;step-6-visual-form-wizard-creating-forms&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Create the Product and Orders Form&quot;,&quot;value&quot;:&quot;create-the-product-and-orders-form&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Create the ProductOrders Form&quot;,&quot;value&quot;:&quot;create-the-productorders-form&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 7: Visual &gt; Forms: Adding a Page to a Form&quot;,&quot;value&quot;:&quot;step-7-visual-forms-adding-a-page-to-a-form&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Second Checkpoint: Run Your Application&quot;,&quot;value&quot;:&quot;second-checkpoint-run-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 8.A.: Using Five&apos;s End-User GUI&quot;,&quot;value&quot;:&quot;step-8a-using-fives-end-user-gui&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 8.B.: Data &gt; Queries: Write SQL In Five&quot;,&quot;value&quot;:&quot;step-8b-data-queries-write-sql-in-five&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 9: Visual &gt; Chart Wizard: Create Charts For Your Application&quot;,&quot;value&quot;:&quot;step-9-visual-chart-wizard-create-charts-for-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 10: Visual &gt; Reports: Creating a PDF Report&quot;,&quot;value&quot;:&quot;step-10-visual-reports-creating-a-pdf-report&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Report&quot;,&quot;value&quot;:&quot;report&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 11: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;value&quot;:&quot;step-11-visual-menus-adding-menu-items-to-your-app&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Third Checkpoint: Here&apos;s What Your App Should Now Look Like&quot;,&quot;value&quot;:&quot;third-checkpoint-heres-what-your-app-should-now-look-like&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 12: Applications: Turning Your App Into a Multiuser App&quot;,&quot;value&quot;:&quot;step-12-applications-turning-your-app-into-a-multiuser-app&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Fourth Checkpoint: Logging Into Your Application For The First Time&quot;,&quot;value&quot;:&quot;fourth-checkpoint-logging-into-your-application-for-the-first-time&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 13: Setup &gt; User Roles: Creating Roles And Permissions&quot;,&quot;value&quot;:&quot;step-13-setup-user-roles-creating-roles-and-permissions&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 14: Setup &gt; Themes: Give Your Application a Unique Look&quot;,&quot;value&quot;:&quot;step-14-setup-themes-give-your-application-a-unique-look&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 15: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI&quot;,&quot;value&quot;:&quot;step-15-setup-instances-applying-a-theme-logos-and-customizing-the-ui&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Congratulations: Creating a SQL App&quot;,&quot;value&quot;:&quot;congratulations-creating-a-sql-app&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Finding Help in Five&quot;,&quot;value&quot;:&quot;finding-help-in-five&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Five&apos;s In-App Help&quot;,&quot;value&quot;:&quot;fives-in-app-help&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Host Your SQL App Online For Just US$29.99 Per Month&quot;,&quot;value&quot;:&quot;host-your-sql-app-online-for-just-us2999-per-month&quot;,&quot;isDelete&quot;:false}]\" data-smooth=\"true\" data-top-offset=\"\"><div class=\"eb-toc__list-wrap\"><ul class=\"eb-toc__list\"><li><a href=\"#goals-and-objectives\">Goals and Objectives<\/a><li><a href=\"#resources-and-downloads\">Resources and Downloads<\/a><li><a href=\"#step-1-creating-a-new-application\">Step 1: Creating a New Application<\/a><li><a href=\"#eb-table-content-10\">Step 2: Running Your Application \u25b6\ufe0f<\/a><li><a href=\"#step-3-data-table-wizard-creating-database-tables\">Step 3: Data &gt; Table Wizard: Creating Database Tables <\/a><li><a href=\"#step-4-data-the-database-modeler\">Step 4: Data &gt; The Database Modeler<\/a><li><a href=\"#first-checkpoint-is-your-database-setup-correctly\">First Checkpoint: Is Your Database Setup Correctly? <\/a><li><a href=\"#step-5-data-tables-importing-a-csv\">Step 5: Data &gt; Tables: Importing a CSV<\/a><li><a href=\"#step-6-visual-form-wizard-creating-forms\">Step 6: Visual &gt; Form Wizard: Creating Forms<\/a><li><a href=\"#step-7-visual-forms-adding-a-page-to-a-form\">Step 7: Visual &gt; Forms: Adding a Page to a Form<\/a><li><a href=\"#second-checkpoint-run-your-application\">Second Checkpoint: Run Your Application<\/a><li><a href=\"#step-8a-using-fives-end-user-gui\">Step 8.A.: Using Five&#8217;s End-User GUI<\/a><li><a href=\"#step-8b-data-queries-write-sql-in-five\">Step 8.B.: Data &gt; Queries: Write SQL In Five<\/a><li><a href=\"#step-9-visual-chart-wizard-create-charts-for-your-application\">Step 9: Visual &gt; Chart Wizard: Create Charts For Your Application<\/a><li><a href=\"#step-10-visual-reports-creating-a-pdf-report\">Step 10: Visual &gt; Reports: Creating a PDF Report<\/a><li><a href=\"#report\">Report<\/a><ul class=\"eb-toc__list\"><li><a href=\"#step-11-visual-menus-adding-menu-items-to-your-app\">Step 11: Visual &gt; Menus: Adding Menu Items to Your App<\/a><li><a href=\"#third-checkpoint-heres-what-your-app-should-now-look-like\">Third Checkpoint: Here&#8217;s What Your App Should Now Look Like<\/a><li><a href=\"#step-12-applications-turning-your-app-into-a-multiuser-app\">Step 12: Applications: Turning Your App Into a Multiuser App<\/a><li><a href=\"#fourth-checkpoint-logging-into-your-application-for-the-first-time\">Fourth Checkpoint: Logging Into Your Application For The First Time<\/a><li><a href=\"#step-13-setup-user-roles-creating-roles-and-permissions\">Step 13: Setup &gt; User Roles: Creating Roles And Permissions<\/a><li><a href=\"#step-14-setup-themes-give-your-application-a-unique-look\">Step 14: Setup &gt; Themes: Give Your Application a Unique Look<\/a><li><a href=\"#step-15-setup-instances-applying-a-theme-logos-and-customizing-the-ui\">Step 15: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI<\/a><li><a href=\"#congratulations-creating-a-sql-app\">Congratulations: Creating a SQL App<\/a><li><a href=\"#finding-help-in-five\">Finding Help in Five<\/a><li><a href=\"#host-your-sql-app-online-for-just-us2999-per-month\">Host Your SQL App Online For Just US$29.99 Per Month<\/a><\/li><\/ul><\/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\" id=\"get-your-app-online-for-us-29-99-per-month\">Get Your App Online For US$29.99 Per Month<\/h2>\n\n\n\n<div class=\"wp-block-essential-blocks-row alignfull  root-eb-row-biaw09k\"><div class=\"eb-parent-wrapper eb-parent-eb-row-biaw09k \"><div class=\"eb-row-root-container eb-row-biaw09k\" data-id=\"eb-row-biaw09k\"><div class=\"eb-row-wrapper\"><div class=\"eb-row-inner\">\n<div class=\"wp-block-essential-blocks-column  root-eb-column-wx1wxil\"><div class=\"eb-parent-wrapper eb-parent-eb-column-wx1wxil \"><div class=\"eb-column-wrapper eb-column-wx1wxil\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox  root-eb-infobox-8pjjq1i\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-8pjjq1i \"><div class=\"eb-infobox-8pjjq1i eb-infobox-wrapper\"><div class=\"infobox-wrapper-inner\"><div class=\"icon-img-wrapper\"><div class=\"eb-icon number-or-icon\"><i icon=\"fas fa-cloud\" class=\"fas fa-cloud eb-infobox-icon-data-selector\"><\/i><\/div><\/div><div class=\"contents-wrapper\"><h2 class=\"title\">Host Your App Online<\/h2><p class=\"description\">Select one of our hosting packages.<br>Starting from US$29.99 per app and month<\/p><div class=\"eb-infobox-btn-wrapper\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/order-payment\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"infobox-btn  hvr-grow\">Subscribe Now<\/a><\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-essential-blocks-column  root-eb-column-qo3d78f\"><div class=\"eb-parent-wrapper eb-parent-eb-column-qo3d78f \"><div class=\"eb-column-wrapper eb-column-qo3d78f\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox  root-eb-infobox-9qgrxmq\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-9qgrxmq \"><div class=\"eb-infobox-9qgrxmq eb-infobox-wrapper\"><div class=\"infobox-wrapper-inner\"><div class=\"icon-img-wrapper\"><div class=\"eb-icon number-or-icon\"><span class=\"dashicon dashicons dashicons-welcome-learn-more eb-infobox-icon-data-selector\"><\/span><\/div><\/div><div class=\"contents-wrapper\"><h2 class=\"title\">Free Training<\/h2><p class=\"description\">Sign Up for a FREE product training session<\/p><div class=\"eb-infobox-btn-wrapper\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/free-training\/\" target=\"_self\" rel=\"noopener noreferrer\" class=\"infobox-btn  hvr-grow\">Sign Up Now<\/a><\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">To deploy your application, sign up for one of our paid plans, starting from US$29.99 per month and application. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"resources-and-downloads\">Resources and Downloads<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"csv-file\">CSV File<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the CSV file here.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-079b5d33-dcb9-48b8-8f41-1c0ca47bba8a\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/product_data-1.csv\" target=\"_blank\" rel=\"noreferrer noopener\">product_data-1<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/product_data-1.csv\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-079b5d33-dcb9-48b8-8f41-1c0ca47bba8a\">Download<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sql-query\">SQL Query<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the SQL query here. <\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-f984382b-09df-4622-81ad-72307942bb19\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ProductQuery.txt\" target=\"_blank\" rel=\"noreferrer noopener\">ProductQuery<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ProductQuery.txt\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-f984382b-09df-4622-81ad-72307942bb19\">Download<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"theme\">Theme<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the CSS theme here.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-d9efd2eb-45b1-45f3-9758-f2c68e3a7ee9\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/PurpleHazeTheme.txt\">PurpleHazeTheme<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/PurpleHazeTheme.txt\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-d9efd2eb-45b1-45f3-9758-f2c68e3a7ee9\">Download<\/a><\/div>\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<h3 class=\"wp-block-heading\" id=\"report-template\">Report Template<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the PDF report template from here.<\/p>\n<\/div><\/div>\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-file\"><a id=\"wp-block-file--media-a1eac728-16c7-40db-99ed-608c628b1f11\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ProductReport.docx\" target=\"_blank\" rel=\"noreferrer noopener\">ProductReport<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ProductReport.docx\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-a1eac728-16c7-40db-99ed-608c628b1f11\">Download<\/a><\/div>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"960\" height=\"540\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Go-From-SQL-to-Web-App.png\" alt=\"Five.Co - How to build a SQL App\" class=\"wp-image-2552\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Go-From-SQL-to-Web-App.png 960w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Go-From-SQL-to-Web-App-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Go-From-SQL-to-Web-App-768x432.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Creating a New Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.1. To create a new application in Five, click on <strong>Applications<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"694\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7-1024x694.png\" alt=\"\" class=\"wp-image-2379\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7-1024x694.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7-300x203.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7-768x520.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7.png 1308w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 1.1: Creating a New Application<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">1.2. Next, click on the yellow <strong>Plus <\/strong>icon.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649.png\" alt=\"\" class=\"wp-image-2439\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-2048x1298.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 1.2: Creating a New Application in Five<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">1.3. Type <strong>My First App<\/strong> in the <strong>Title <\/strong>field.<br>1.4. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"619\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-1024x619.png\" alt=\"\" class=\"wp-image-2386\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-1024x619.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-300x181.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-768x465.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-1536x929.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12.png 1860w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 1.3: Saving a New Application<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-running-your-application-\u25b6\ufe0f\">Step 2: Running Your Application \u25b6\ufe0f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can run and preview your application at any time. To do so, click on the <strong>Deploy to Development button<\/strong> in the top navigation bar. The first deployment of your app can take some time, as Five is creating a cloud-hosted instance, including a database server and unique URL, for your app.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"259\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-1024x259.png\" alt=\"\" class=\"wp-image-2561\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-1024x259.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-300x76.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-768x194.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-1536x388.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-2048x518.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 2.1.: To deploy your application to development, click on <strong>Deploy to Development<\/strong><\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Once your application is deployed, the <strong>Deploy to Development <\/strong>button turns into a <strong>Run<\/strong> \u25b6\ufe0f button in the top right corner. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every time you click on <strong>Run<\/strong> \u25b6\ufe0f, a new window opens up, showing the current state of your application.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img width=\"1280\" height=\"720\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application.png\" alt=\"\" class=\"wp-image-2512\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application.png 1280w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application-1024x576.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application-768x432.png 768w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><figcaption class=\"wp-element-caption\"><em>Image 2.2: Running Your Application<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-3-data-table-wizard-creating-database-tables\">Step 3: Data &gt; Table Wizard: Creating Database Tables <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s start developing our application. The first step towards a SQL app is of course the creation of a SQL database. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s go back into our development environment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.1. Click on the blue <strong>Manage<\/strong> button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><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\"\/><figcaption class=\"wp-element-caption\"><em>Image 3.1: Access Five&#8217;s development environment by clicking on the blue <strong>Manage<\/strong> button.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3.2. To add tables to Five&#8217;s integrated MySQL database, click on <strong>Data &gt; Table Wizard<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"518\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9-1024x518.png\" alt=\"\" class=\"wp-image-2381\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9-1024x518.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9-300x152.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9-768x389.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9.png 1308w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.2: Five&#8217;s Table Wizard can be accessed from Data &gt; Table Wizard<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">We are creating three separate tables: Products, Orders, and ProductOrders. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-product-table\">The Product Table<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">3.3. Give your table a name inside the <strong>Name <\/strong>field: call it <strong>Product<\/strong>. To add fields to your table, click the <strong>Plus \u2795 <\/strong>icon on the right side of the screen.<br>3.4. Here is what your <strong>Product<\/strong> table should look like. Make sure to get the <strong>Data Type<\/strong> and <strong>Display Type <\/strong>for your fields right. <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Name<\/strong><\/td><td><strong>Data Type<\/strong><\/td><td><strong>Req.<\/strong><\/td><td><strong>Size<\/strong><\/td><td><strong>Default Display Type<\/strong><\/td><\/tr><tr><td>Name<\/td><td>Text<\/td><td>\u2714\ufe0f<\/td><td>100<\/td><td>_Text<\/td><\/tr><tr><td>SKU<\/td><td>Text<\/td><td><\/td><td>100<\/td><td>_Text<\/td><\/tr><tr><td>Price<\/td><td>Float<\/td><td><\/td><td><\/td><td>_Currency<\/td><\/tr><tr><td>Rating<\/td><td>Float<\/td><td><\/td><td><\/td><td>_RatingFloat<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once your table looks exactly like what&#8217;s shown in the image below, click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save. <br>For the <strong>Table Upgrade <\/strong>dialog, click on <strong>Save <\/strong>again.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"551\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-1024x551.png\" alt=\"\" class=\"wp-image-2435\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-1024x551.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-300x161.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-768x413.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-1536x826.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50.png 1918w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.3: Creating the Product Table<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-orders-table\">The Orders Table<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">3.5. Repeat steps 3.3 and 3.4 for your <strong>Orders <\/strong>table. Shown below is what your <strong>Orders <\/strong>table should look like.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Name<\/strong><\/td><td><strong>Data Type<\/strong><\/td><td><strong>Req.<\/strong><\/td><td><strong>Size<\/strong><\/td><td><strong>Default Display Type<\/strong><\/td><\/tr><tr><td>OrderStatus<\/td><td>Text<\/td><td>\u2714\ufe0f<\/td><td>100<\/td><td>_Text<\/td><\/tr><tr><td>OrderDate<\/td><td>Date<\/td><td><\/td><td>100<\/td><td>_Date<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3.6. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"550\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-1024x550.png\" alt=\"\" class=\"wp-image-2436\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-1024x550.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-300x161.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-768x413.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-1536x825.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51.png 1917w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.4: Creating the Orders Table<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-product-orders-table\">The ProductOrders Table<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>ProductOrders <\/strong>table is a junction table between our Product and Orders table. It is used to establish a many-to-many relationship between Products and Orders and it does not contain any fields. It only contains the Foreign Keys of the Product and Orders table. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.7. To create this table, open up the <strong>Table Wizard. <\/strong><br>3.8. Type <strong>ProductOrders <\/strong>into the <strong>Name<\/strong> field.<br>3.9. Click on the <strong>Right Arrow &gt;<\/strong> as shown in this image:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"627\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-1024x627.png\" alt=\"\" class=\"wp-image-2387\" style=\"width:840px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-1024x627.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-768x470.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-1536x940.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13.png 1838w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.5: The ProductOrders Table<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3.10. Click the <strong>Plus<\/strong> \u2795 icon in the <strong>Relationships <\/strong>area at the lower part of the screen.<br>3.11. Add a relationship to the <strong>Product <\/strong>and <strong>Orders<\/strong> table and tick the <strong>Required<\/strong> box for both. Here is what this should look like.<br>3.12. Once the relationships are defined, click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"651\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-1024x651.png\" alt=\"\" class=\"wp-image-2388\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14.png 1770w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.6: Adding Relationships to the ProductOrders Table<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-4-data-the-database-modeler\">Step 4: Data &gt; The Database Modeler<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">4.1. To check whether your database is set up correctly, click on <strong>Data &gt; Database Modeler<\/strong><br>4.2. Here is what your database should look like. You have to drag and drop your tables around to get a visual Entity-Relationship-Diagram that looks exactly like Image 4.1. <br>Make sure the relationships are correct: the &#8220;crows&#8217; feet&#8221; on the lines are both pointing towards the <strong>ProductOrders <\/strong>table, indicating the many-to-many relationship that exists between products and orders.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-1024x649.png\" alt=\"\" class=\"wp-image-2389\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-768x486.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-1536x973.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15.png 1776w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 4.1: The Database Modeler showing the Orders, ProductOrders, and Product tables<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"first-checkpoint-is-your-database-setup-correctly\">First Checkpoint: Is Your Database Setup Correctly? <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure your database looks <em>exactly <\/em>like the one shown in the database modeler. Your database is your SQL app&#8217;s foundation: without a proper definition of a database, it&#8217;s difficult to build a robust application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the following steps, our SQL query and PDF report refer to the field names shown above. They will only work if your field names are the same as what is shown.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-5-data-tables-importing-a-csv\">Step 5: Data &gt; Tables: Importing a CSV<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">5.1. To import a CSV file into your database table, click on <strong>Data &gt; Tables.<\/strong><br>5.2. Now click on the <strong>Import CSV into Table<\/strong> \ud83d\udce5 button. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-1024x650.png\" alt=\"Five.Co - Data Import\" class=\"wp-image-2089\" style=\"width:840px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-2048x1301.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 5.1: Five&#8217;s Import CSV into Table Feature<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">5.3. From the dropdown, select the <strong>Product<\/strong> table. This is the table we are importing data into.<br>5.4. Click on <strong>Choose File<\/strong> and select the CSV file available for download at the top of this article.<br>5.5. For <strong>ProductKey<\/strong> select <strong>Generated.<\/strong> For all other fields, Five automatically maps the fields of your database to the columns of your CSV file.<br>5.6. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to confirm the data import. A pop-up message saying &#8220;Import of CSV completed successfully&#8221; appears. We have now successfully populated our SQL database with data and generated primary keys for each record! <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"627\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-1024x627.png\" alt=\"\" class=\"wp-image-2415\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-1024x627.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-768x470.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-1536x940.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36.png 1838w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 5.2: Mapping CSV Columns to Database Fields<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-6-visual-form-wizard-creating-forms\">Step 6: Visual &gt; Form Wizard: Creating Forms<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let&#8217;s build some forms for our front end. These forms refer back to our database tables and will give our application users an intuitive interface to create, read, update, or delete data stored in our database.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6.1. To create forms, click on <strong>Visual &gt; Form Wizard<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter 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\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.1: The Form Wizard can be accessed from Visual &gt; Form Wizard<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-the-product-and-orders-form\">Create the Product and Orders Form<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">6.2. In the <strong>Main Data Source<\/strong> field of the Form Wizard, select <strong>Product. <\/strong><br>6.3. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<br>6.4. After saving your Product form, repeat the same steps for <strong>Orders<\/strong>, i.e. select <strong>Orders <\/strong>in the <strong>Main Data Source <\/strong>field, and save again.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"628\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-1024x628.png\" alt=\"\" class=\"wp-image-2390\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-1024x628.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-768x471.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-1536x942.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16.png 1834w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.2: Creating the Product form<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-the-product-orders-form\">Create the ProductOrders Form<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">6.5. In the <strong>Main Data Source<\/strong> field of the Form Wizard, select <strong>ProductOrders<\/strong>.<br>6.6. Toggle the <strong>Add Menu Item<\/strong> to off. <br>6.7. Click on the <strong>Right Arrow &gt;<\/strong> as shown here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"627\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-1024x627.png\" alt=\"\" class=\"wp-image-2391\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-1024x627.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-768x470.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-1536x941.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17.png 1837w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.3: Click on the &gt; arrow to further define your ProductOrders form<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">6.8. <strong>Tick the Boxes<\/strong> \u2611\ufe0f for <strong>List<\/strong> for both fields: ProductKey and OrdersKey.<br>6.9. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"627\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-1024x627.png\" alt=\"\" class=\"wp-image-2392\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-1024x627.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-768x470.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-1536x940.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18.png 1838w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.4: The settings for the ProductOrders form<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-7-visual-forms-adding-a-page-to-a-form\">Step 7: Visual &gt; Forms: Adding a Page to a Form<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next up, let&#8217;s make our forms more advanced by adding a page to a form. If by now you are wondering what exactly we&#8217;re building, bear with us. We&#8217;re just a few steps away from previewing our application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7.1. Click on <strong>Visual &gt; Forms<\/strong><br>7.2. Select the <strong>Orders<\/strong> form from the list on the left.<br>7.3. Click on <strong>Pages.<\/strong><br>7.4. Click on the <strong>Plus<\/strong> \u2795 icon.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"622\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-1024x622.png\" alt=\"\" class=\"wp-image-2394\" style=\"width:840px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-1024x622.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-300x182.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-768x466.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-1536x933.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20.png 1853w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 7.1: To add a page to the Orders Form<\/em> <em>click on the Plus icon<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">7.5. Change the <strong>Page Type<\/strong> to <strong>List.<\/strong><br>7.6. Type <strong>Products<\/strong> in the <strong>Caption <\/strong>field.<br>7.7. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save. Here is what your screen should look like before saving. Save again to confirm the new page as part of your <strong>Orders<\/strong> form.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"621\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-1024x621.png\" alt=\"\" class=\"wp-image-2396\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-1024x621.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-300x182.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-768x466.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-1536x932.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22.png 1854w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 7.2: Select List as page type, and fill in the fields as shown.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"second-checkpoint-run-your-application\">Second Checkpoint: Run Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s time to run your SQL application to preview what we have developed so far. As shown in Step 2 above, you can always preview your application by clicking on the <strong>Run \u25b6\ufe0f <\/strong>icon in the top right corner.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what your app should look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"651\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-1024x651.png\" alt=\"\" class=\"wp-image-2442\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54.png 1770w\" 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\">Go ahead and get familiar with Five&#8217;s auto-generated user interface (GUI) that translates your data structure into a web app. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Check out the <strong>filter and search bar<\/strong> above your products or select a product, for example. The products that you can see inside your application are the data that was stored in our CSV and they are now part of a searchable online database.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, note how Five is converting the rating of each product into stars. This is because we defined &#8220;Rating&#8221; to be a &#8220;_RatingFloat&#8221; display type. Price, on the other hand, which is also a float, is shown as a currency, because we selected &#8220;_Currency&#8221; as its display type. Nice, isn&#8217;t it?<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-8-a-using-fives-end-user-gui\">Step 8.A.: Using Five&#8217;s End-User GUI<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For Step 8A, we will keep working inside our <strong>end-user application<\/strong>, i.e. on the screen shown in the image above. We will add a few orders to our database to better understand Five&#8217;s end-user GUI.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8A.1. Click on <strong>Orders<\/strong> in the menu on the left.<br>8A.2. Now click on the <strong>Plus \u2795 <\/strong>icon.  and add some dummy data to your database.<br>8A.3. Fill in some dummy data for your <strong>Order Status <\/strong>and <strong>Order Date.<\/strong><br>8A.4. Click on <strong>Products<\/strong>. This is the page that we added to our Orders form earlier.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-1024x650.png\" alt=\"\" class=\"wp-image-2444\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.1: Adding Dummy Data through Five&#8217;s End-User GUI<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">8A.5. Add a few products to your order. This is just dummy data, so feel free to associate any products with your order.<br>8A.6. Repeat these steps until you have several orders stored in your database. As shown in Image 8.1, your orders will appear in a list. In Image 8.1, this list contains a <strong>New, Pending, Pending <\/strong>and <strong>Shipped <\/strong>order.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-8-b-data-queries-write-sql-in-five\">Step 8.B.: Data &gt; Queries: Write SQL In Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now let&#8217;s create a SQL query in Five. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Queries are an essential part of a SQL app: they determine which data is shared with end-users. They also allow for calculations and data manipulation. We are keeping our SQL statement simple, but you can make queries as complex as you need them to be. Five&#8217;s native support for standard SQL puts the power of SQL right into the app development process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Today, we will write a query that returns some of the data you have just created in Step 8.A.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8.1. To add a query, click on <strong>Data &gt; Queries<\/strong>.<br>8.2. Click on the yellow <strong>Plus <\/strong>icon.<br>8.3. Type <strong>ProductQuery<\/strong> into the <strong>Data Source ID<\/strong> field.<br>8.4. Click on <strong>Click to add <\/strong>in the <strong>Query<\/strong> field, as shown here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-1024x649.png\" alt=\"\" class=\"wp-image-2417\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-768x486.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-1536x973.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37.png 1776w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.1: Click on Click to edit to open up Five&#8217;s Query Editor<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">8.5. Click on <strong>SQL<\/strong>.<br>8.6. Paste the SQL shown below into the SQL Editor. Make sure to have some orders in your Orders table. Otherwise the query will not produce any results. To test your query, click on <strong>Run \u25b6\ufe0f<\/strong>. Five will show you the results the query produces.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;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  `Product`.`Name`,\n  `Product`.`Price`,\n  `Orders`.`OrderDate`\nFROM\n  `Product`\n  INNER JOIN `ProductOrders` ON (\n    `ProductOrders`.`ProductKey` = `Product`.`ProductKey`\n  )\n  INNER JOIN `Orders` ON (\n    `ProductOrders`.`OrdersKey` = `Orders`.`OrdersKey`\n  )\" 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: #98C379\">`Product`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`Name`<\/span><span style=\"color: #ABB2BF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #98C379\">`Product`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`Price`<\/span><span style=\"color: #ABB2BF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #98C379\">`Orders`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`OrderDate`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">FROM<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #98C379\">`Product`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #C678DD\">INNER JOIN<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">`ProductOrders`<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">ON<\/span><span style=\"color: #ABB2BF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #98C379\">`ProductOrders`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`ProductKey`<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">`Product`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`ProductKey`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #C678DD\">INNER JOIN<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">`Orders`<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">ON<\/span><span style=\"color: #ABB2BF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #98C379\">`ProductOrders`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`OrdersKey`<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">`Orders`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`OrdersKey`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  )<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-1024x650.png\" alt=\"\" class=\"wp-image-2418\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.2: Click on SQL to paste raw SQL into Five&#8217;s Query Editor and then save.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">8.7. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your query.<br>8.8. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your query as a data source.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-9-visual-chart-wizard-create-charts-for-your-application\">Step 9: Visual &gt; Chart Wizard: Create Charts For Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">SQL apps typically deal with data. Data can be shown to our application users in many different ways: as forms, charts, reports, or dashboards. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As part of our SQL app, we are developing a simple chart that visualizes our data in a bar chart.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">9.1. To create a chart, click on <strong>Visual &gt; Chart Wizard.<\/strong><br>9.2. Fill in all fields on the left of the screen that are marked with an asterisk *, and choose your <strong>X Value Column <\/strong>and <strong>Y Value Column<\/strong>, as shown in the image below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-1024x649.png\" alt=\"\" class=\"wp-image-2397\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23.png 1774w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 9.1: Five&#8217;s Chart Wizard: Apply the settings shown to create a bar chart showing products and prices.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-10-visual-reports-creating-a-pdf-report\">Step 10: Visual &gt; Reports: Creating a PDF Report<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Another common way to show data to users is PDF reports. Let&#8217;s quickly create a PDF report for our SQL app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">10.1. To create a report, click on <strong>Visual &gt; Reports<\/strong><br>10.2. Click on the yellow <strong>Plus<\/strong> icon.<br>10.3. Type <strong>Product Report <\/strong>into the <strong>Title<\/strong> field.<br>10.4. Click on <strong>Data Sources.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"652\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-1024x652.png\" alt=\"\" class=\"wp-image-2398\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-1024x652.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-768x489.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-1536x978.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24.png 1766w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 10.1: Before a report can be created, it needs to have a title and a data source first.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">10.5. Click on the <strong>Plus<\/strong> \u2795 icon to add a data source.<br>10.6. Select <strong>Product (Table)<\/strong> as a <strong>Data Source<\/strong>. This data source will now be available for our PDF report.<br>10.7. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-1024x650.png\" alt=\"\" class=\"wp-image-2399\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 10.2: Add Product (Table) as a data source to your report.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">10.8. Go back to <strong>General.<\/strong><br>10.9. Click on the <strong>Template<\/strong> field that says <strong>Click to edit.<\/strong> This opens up Five&#8217;s report template editor. Here you can create a report using a text editor similar to Microsoft Word. <br>10.10. Click on the <strong>&lt;\/&gt; icon.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-1024x650.png\" alt=\"\" class=\"wp-image-2400\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 10.3: Click on &lt;\/&gt; to open up Five&#8217;s HTML report writer.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">10.11. Delete all code in the code editor and replace it by pasting the HTML below into the code editor.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;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=\"&lt;style&gt;\n    .demo tr {\n      background-color: lightgrey\n    }\n        \n&lt;\/style&gt;\n\n&lt;div&gt;&lt;img src=&quot;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKMAAAAtCAYAAADC1tsoAAAABmJLR0QA\/wD\/AP+gvaeTAAAHlklEQVR42u2cbWxTVRjHLxvv8hJQM1HRgdB2dLyE3rYMQizQtRs4hA8V1iIqiQu+EBK\/EAHZ5YOsiwtRfIkjSIIGWW9AhX2g3YAFPhiNiy8gbEMmuHUImYKArN0YOz6nux13d\/d2ve29t3M7\/+SfLO2559777JfnnOeck1LUABCiqLQWs7kgaKUrKCIiMeWX\/vak2hAGLSZXk4W+0GyhEfgnEnUiUTm89d\/keutrwZudu89PVqrf80bjyKCFXt9sMV3kIIz6NIk6kahySxvKAETEOZRbWs\/aSy7aKYSGJdpnk9X8SrOZbhFAyNlUSaJOJA5jSf1GHox8N8B3W5a9ey5Dbp8AXak4iNjmgyTqRKLCWVACxqg7Hd66agDTZWNqhscFI01bpGAMWsyfkKgTiSqvpC6zHxj5boFh3AsAT++naBkG4F2RyIxeEnUiUTEMSgPIwjKAxL6Ps6Xd27A+Z3fzGNF5o4XeLQYjfL6NRJ1Iet7ora+TCSPfN+2lDeVOb8Ncfp8tNL1IYqh+k0ScKMa8saEyCRj5rnWU1BXZmPPj8PqiWEWNl3tIxIkktbTswtMAkUkpL9tVp4sUMmb6o77DtGkViTiRbKGt2RnJXB+0mpb0zYzzl5LIEskD8R1DDtqhW51UHy5XOlTP1\/kw\/mGdbyLRJZKREbOmoGJ9I2JmTEi2Lxiqy3tlR6t1psKPi3eK1oK3aODHBPd+ClzEs5RywKNS+C\/FMVoS4\/s08ErBu6hlGSAymaMBxO9RsU6Rbbsmq8nBh\/F3qzVD4UDjF0QaWZjVCwTfi8kGDoFPgCekAMSR4APc870u0aZMwxjKgLFY\/xkYIUa\/QZEsa7MNBwhbe4DMyRmjcLDLBzCMc8C3eN+f5bKpVpoEPsW7\/32wS6TdDwMORsTo3uJA7ERvz3hUqYgEzfR+DsYOFQLOh\/EfcK2KzpIJ43jwcUGbP8G0BiBOA18Q3PsqeLZI21pemxvgRhUdF4h2APEeB+MpJaMC5xlXcDC2qgzjMY2HwHiGabyfv1fQ7l\/w8yo+lxl8TXDPWFmZDyOT2oKFMWQChK0RELF3GDYp2X+tyTQCquobAGPjEIQxWkDgf3IXr20nVxQpLbyOe1fwXFX9zFcHBoyIMY4DAM89AFHfhbY9M1Xp+zRb6S9UOuX9f4AxqpfA7YJryrnsqYQ2c\/NCfv\/7wCP6yxcphxGfroEhme0BMTJEG75T415450XqlHeH3zhXIRjPcEWGWh6bJIxYeNH\/puA6f5KVdjp4j6DPLhlg8WH8ADxdRUtVzoadvUDszoxqDB3UZZtttPBgLao2TQwFjIfCAWNXyG98dRBW01Iygq8Irv0FnMiI9BD4qKCvMLhQzkwqpdU0FCyrIkOyEMbter1ambhpAb0y+ndbddYCgLARjDh3tvuN7iECI8UtoAuXVFrA85Ps4y\/wYrnT+pTBiLbPzALwbvUBkdGfVXVaAGuOiHWlA3RbAL4OHogPgAxkrxkiMEaz2jFBH3fAzyWYXS+BdYnUmCmBEQqWyQDdpT4gRmzYqSaMbYHsqeFA9mkRCPnGkBYkCONJlec7oxSGMTrf+1DQD66034hxzTKReee34ETXhrWaM2Y+ANFFpQN0x8VBxJlx5rwVB92TsJUGsb0qezXMD\/\/uB8So28OBWfmDsJqWWwljMNIE7V7GNZ+gHQtOZmdL+2oaMuL7kiAW6y9H2+X5PHuch9YtVuSelaaxANfeOCHku7nt5NwnhhCMWPiUVJugz6+4Kj66VoniAHZgwwjHwV6MASL2e9G2ziPrpjh97tY8n5txwRwv4Wzon2UEqM7GCd89cG24yugN+7PsqMY2fIhlxqgWglsF\/eLlti8Fn+HsuEGhe2oHI2KyFkBWDMeEkTEs5F\/j9Hk2ApDIyRbW5B\/xyPoJFISoYQBWEfhuDPju94Yvc\/QQWPSOV3h+VRejCLgNzlfwfnwYr1Jq7u\/DMs6OyLEwRt8mDqL+KmIEqR6Agsx4MgKkz30zr8LtiuetbtfoHgHIjkkAiJdyyturZrlunzA8rFAgByOMWPinZk6LgBgEz1P4XtpX05EChtFNh73nAsiEDD6zCDBeB38s9oTLK9boAMQQByRyVrg\/L6gsGiv1RlCgLAXYgj3w+Y2tUD2zOEuGAnOmqQTEYIWR4qr3g7z+fwar8UNdB6iBcoQMbZoheQoZINzaA2M3kL8uZz29jiHh+V0okM0AdHcAvmq8jtgRmG3qk23VEV77c3FepDGMGRyQUashXLjg3ZSNVN\/tSKU0nqvmvSp7V1JPaQPQnKz7Rz6QDp+7DT7b3D0fpdLwumCoavaziDWOpIiI1FQu654HEN7rlSG7fViNNUkiophy+grLRGDEw\/aVXJ9nEYkQkXYzdShcAL5LokBC1sRrkqA0EikijbKjewm4SwJIhJeCcg+tfZxEikgrIPdLwcj52sqjG8aTSBGpLjvrmgjAtUjD6PGRKBFpWcy8IAFjp+NwoYFEiEjr4fprIYwOn+dTEhkizYULFbxnzV8Il3uggohIMTlY92s9lXSFp4REhChlwuuKcMTsTCRDsq7JJCJEKVUeu04f3acmIupP\/wHYJhviTK\/+pwAAAABJRU5ErkJggg==&quot; style=&quot;&quot;&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n&lt;h1&gt;Report&lt;\/h1&gt;\n&lt;table style=&quot;letter-spacing: 0.00938em; width: 100%; font-size: 1rem;&quot; class=&quot;demo&quot;&gt;\n    &lt;tbody&gt;\n        &lt;tr style=&quot;border-bottom: 2px solid black;&quot; class=&quot;fiveReportHeaderRepeat-Level1&quot;&gt;\n            &lt;td style=&quot;width: 28.1305%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;&quot;&gt;Name&lt;\/td&gt;\n\n            &lt;td style=&quot;width: 50.97%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;&quot;&gt;SKU&lt;\/td&gt;\n\n            &lt;td style=&quot;width: 18.254%; text-align: left; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255);&quot;&gt;Price&lt;\/td&gt;\n        &lt;\/tr&gt;\n\n        &lt;tr class=&quot;fiveReportHelper&quot; contenteditable=&quot;false&quot;&gt;\n            &lt;td class=&quot;fiveReportHelper&quot;&gt;{{#each @root.[Product].[Records] as | Product |}}&lt;\/td&gt;\n            &lt;td&gt;&lt;br&gt;&lt;\/td&gt;\n            &lt;td&gt;&lt;br&gt;&lt;\/td&gt;\n        &lt;\/tr&gt;\n        &lt;tr class=&quot;&quot; contenteditable=&quot;false&quot;&gt;\n\n            &lt;td style=&quot;text-align: left;&quot;&gt;{{Product.[Name]}}&lt;\/td&gt;\n\n            &lt;td style=&quot;text-align: left;&quot;&gt;{{Product.[SKU]}}&lt;\/td&gt;\n\n            &lt;td style=&quot;text-align: left;&quot;&gt;{{Product.[Price]}}&lt;\/td&gt;\n        &lt;\/tr&gt;\n        &lt;tr class=&quot;fiveReportHelper&quot; contenteditable=&quot;false&quot;&gt;\n            &lt;td class=&quot;fiveReportHelper&quot;&gt;{{\/each}}&lt;\/td&gt;\n            &lt;td&gt;&lt;br&gt;&lt;\/td&gt;\n            &lt;td&gt;&lt;br&gt;&lt;\/td&gt;\n        &lt;\/tr&gt;\n\n    &lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n\n&lt;div style=&quot;text-align: center;  display: flex; justify-content: center; align-items: center;&quot;&gt;\n    &lt;div style=&quot;width: 150mm; height: 125mm; border: 1px dashed black; display: flex; justify-content: center; align-items: center;&quot;&gt;&nbsp; &nbsp;{{{_Chart 'ProductChart'}}}&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n\n&lt;table class=&quot;fiveReportFooter-everyPage&quot; style=&quot;width: 100%; height: 10mm;&quot;&gt;\n    &lt;tbody&gt;\n        &lt;tr&gt;\n            &lt;td style=&quot;text-align: right;&quot;&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;&lt;em&gt;Page&nbsp;&lt;five.pageNumber.current.arabic&gt; of&nbsp;&lt;five.pageNumber.total.arabic&gt;&lt;\/em&gt;&lt;\/span&gt;&lt;\/td&gt;\n\n        &lt;\/tr&gt;\n    &lt;\/tbody&gt;\n\n\n&lt;\/table&gt;\" 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: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">style<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #D19A66\">.demo<\/span><span style=\"color: #C678DD\"> <\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">      background-color: lightgrey<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">style<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">img<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">src<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKMAAAAtCAYAAADC1tsoAAAABmJLR0QA\/wD\/AP+gvaeTAAAHlklEQVR42u2cbWxTVRjHLxvv8hJQM1HRgdB2dLyE3rYMQizQtRs4hA8V1iIqiQu+EBK\/EAHZ5YOsiwtRfIkjSIIGWW9AhX2g3YAFPhiNiy8gbEMmuHUImYKArN0YOz6nux13d\/d2ve29t3M7\/+SfLO2559777JfnnOeck1LUABCiqLQWs7kgaKUrKCIiMeWX\/vak2hAGLSZXk4W+0GyhEfgnEnUiUTm89d\/keutrwZudu89PVqrf80bjyKCFXt9sMV3kIIz6NIk6kahySxvKAETEOZRbWs\/aSy7aKYSGJdpnk9X8SrOZbhFAyNlUSaJOJA5jSf1GHox8N8B3W5a9ey5Dbp8AXak4iNjmgyTqRKLCWVACxqg7Hd66agDTZWNqhscFI01bpGAMWsyfkKgTiSqvpC6zHxj5boFh3AsAT++naBkG4F2RyIxeEnUiUTEMSgPIwjKAxL6Ps6Xd27A+Z3fzGNF5o4XeLQYjfL6NRJ1Iet7ora+TCSPfN+2lDeVOb8Ncfp8tNL1IYqh+k0ScKMa8saEyCRj5rnWU1BXZmPPj8PqiWEWNl3tIxIkktbTswtMAkUkpL9tVp4sUMmb6o77DtGkViTiRbKGt2RnJXB+0mpb0zYzzl5LIEskD8R1DDtqhW51UHy5XOlTP1\/kw\/mGdbyLRJZKREbOmoGJ9I2JmTEi2Lxiqy3tlR6t1psKPi3eK1oK3aODHBPd+ClzEs5RywKNS+C\/FMVoS4\/s08ErBu6hlGSAymaMBxO9RsU6Rbbsmq8nBh\/F3qzVD4UDjF0QaWZjVCwTfi8kGDoFPgCekAMSR4APc870u0aZMwxjKgLFY\/xkYIUa\/QZEsa7MNBwhbe4DMyRmjcLDLBzCMc8C3eN+f5bKpVpoEPsW7\/32wS6TdDwMORsTo3uJA7ERvz3hUqYgEzfR+DsYOFQLOh\/EfcK2KzpIJ43jwcUGbP8G0BiBOA18Q3PsqeLZI21pemxvgRhUdF4h2APEeB+MpJaMC5xlXcDC2qgzjMY2HwHiGabyfv1fQ7l\/w8yo+lxl8TXDPWFmZDyOT2oKFMWQChK0RELF3GDYp2X+tyTQCquobAGPjEIQxWkDgf3IXr20nVxQpLbyOe1fwXFX9zFcHBoyIMY4DAM89AFHfhbY9M1Xp+zRb6S9UOuX9f4AxqpfA7YJryrnsqYQ2c\/NCfv\/7wCP6yxcphxGfroEhme0BMTJEG75T415450XqlHeH3zhXIRjPcEWGWh6bJIxYeNH\/puA6f5KVdjp4j6DPLhlg8WH8ADxdRUtVzoadvUDszoxqDB3UZZtttPBgLao2TQwFjIfCAWNXyG98dRBW01Iygq8Irv0FnMiI9BD4qKCvMLhQzkwqpdU0FCyrIkOyEMbter1ambhpAb0y+ndbddYCgLARjDh3tvuN7iECI8UtoAuXVFrA85Ps4y\/wYrnT+pTBiLbPzALwbvUBkdGfVXVaAGuOiHWlA3RbAL4OHogPgAxkrxkiMEaz2jFBH3fAzyWYXS+BdYnUmCmBEQqWyQDdpT4gRmzYqSaMbYHsqeFA9mkRCPnGkBYkCONJlec7oxSGMTrf+1DQD66034hxzTKReee34ETXhrWaM2Y+ANFFpQN0x8VBxJlx5rwVB92TsJUGsb0qezXMD\/\/uB8So28OBWfmDsJqWWwljMNIE7V7GNZ+gHQtOZmdL+2oaMuL7kiAW6y9H2+X5PHuch9YtVuSelaaxANfeOCHku7nt5NwnhhCMWPiUVJugz6+4Kj66VoniAHZgwwjHwV6MASL2e9G2ziPrpjh97tY8n5txwRwv4Wzon2UEqM7GCd89cG24yugN+7PsqMY2fIhlxqgWglsF\/eLlti8Fn+HsuEGhe2oHI2KyFkBWDMeEkTEs5F\/j9Hk2ApDIyRbW5B\/xyPoJFISoYQBWEfhuDPju94Yvc\/QQWPSOV3h+VRejCLgNzlfwfnwYr1Jq7u\/DMs6OyLEwRt8mDqL+KmIEqR6Agsx4MgKkz30zr8LtiuetbtfoHgHIjkkAiJdyyturZrlunzA8rFAgByOMWPinZk6LgBgEz1P4XtpX05EChtFNh73nAsiEDD6zCDBeB38s9oTLK9boAMQQByRyVrg\/L6gsGiv1RlCgLAXYgj3w+Y2tUD2zOEuGAnOmqQTEYIWR4qr3g7z+fwar8UNdB6iBcoQMbZoheQoZINzaA2M3kL8uZz29jiHh+V0okM0AdHcAvmq8jtgRmG3qk23VEV77c3FepDGMGRyQUashXLjg3ZSNVN\/tSKU0nqvmvSp7V1JPaQPQnKz7Rz6QDp+7DT7b3D0fpdLwumCoavaziDWOpIiI1FQu654HEN7rlSG7fViNNUkiophy+grLRGDEw\/aVXJ9nEYkQkXYzdShcAL5LokBC1sRrkqA0EikijbKjewm4SwJIhJeCcg+tfZxEikgrIPdLwcj52sqjG8aTSBGpLjvrmgjAtUjD6PGRKBFpWcy8IAFjp+NwoYFEiEjr4fprIYwOn+dTEhkizYULFbxnzV8Il3uggohIMTlY92s9lXSFp4REhChlwuuKcMTsTCRDsq7JJCJEKVUeu04f3acmIupP\/wHYJhviTK\/+pwAAAABJRU5ErkJggg==&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">h1<\/span><span style=\"color: #ABB2BF\">&gt;Report&lt;\/<\/span><span style=\"color: #E06C75\">h1<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">table<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;letter-spacing: 0.00938em; width: 100%; font-size: 1rem;&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;demo&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">tbody<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;border-bottom: 2px solid black;&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHeaderRepeat-Level1&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 28.1305%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;Name&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 50.97%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;SKU&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 18.254%; text-align: left; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255);&quot;<\/span><span style=\"color: #ABB2BF\">&gt;Price&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHelper&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">contenteditable<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;false&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHelper&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{#each @root.[Product].[Records] as | Product |}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">contenteditable<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;false&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{Product.[Name]}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{Product.[SKU]}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{Product.[Price]}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHelper&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">contenteditable<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;false&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHelper&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{\/each}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;\/<\/span><span style=\"color: #E06C75\">tbody<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">table<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: center;  display: flex; justify-content: center; align-items: center;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 150mm; height: 125mm; border: 1px dashed black; display: flex; justify-content: center; align-items: center;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;\u00a0 \u00a0{{{_Chart &#39;ProductChart&#39;}}}&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">table<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportFooter-everyPage&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 100%; height: 10mm;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">tbody<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: right;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">span<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;font-size: 12px;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">em<\/span><span style=\"color: #ABB2BF\">&gt;Page\u00a0&lt;<\/span><span style=\"color: #E06C75\">five.pageNumber.current.arabic<\/span><span style=\"color: #ABB2BF\">&gt; of\u00a0&lt;<\/span><span style=\"color: #E06C75\">five.pageNumber.total.arabic<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">em<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">span<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;\/<\/span><span style=\"color: #E06C75\">tbody<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">table<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">10.12. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your HTML.<br>10.13. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your report.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A note on PDF reports: even though we used HTML, you could have created your report template using Five&#8217;s text editor. For this tutorial, it&#8217;s faster to copy and paste the HTML.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-11-visual-menus-adding-menu-items-to-your-app\">Step 11: Visual &gt; Menus: Adding Menu Items to Your App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next up, let&#8217;s add some additional navigation to our SQL app. Through Five&#8217;s <strong>Menus<\/strong> feature, we can add the chart and PDF report into our web application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">11.1. Go to<strong> Visual &gt; Menus<\/strong>.<br>11.2. Click on the yellow <strong>Plus <\/strong>icon<strong>.<\/strong><br>11.3. We will first create a parent menu called <strong>Charts &amp; Reports<\/strong>. <br>11.4. Type <strong>Charts &amp; Reports<\/strong> into Caption.<br>11.5. Type <strong>3 <\/strong>into <strong>Menu Order.<\/strong><br>11.6. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-1024x650.png\" alt=\"\" class=\"wp-image-2422\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 11.1: Creating the Charts &amp; Reports Menu Item<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Next, we create menu items for our chart and report.<br>11.7. Click on the yellow <strong>Plus <\/strong>icon<strong>.<\/strong><br>11.8. Here are the settings for your <strong>Chart<\/strong> menu. Make sure to fill in <strong>Caption, Action<\/strong>, and <strong>Parent Menu<\/strong> as shown.<br>11.9. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-1024x650.png\" alt=\"\" class=\"wp-image-2404\" style=\"width:840px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 11.2: Creating the Chart Menu Item Holding Our ProductChart as an Action<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">11.10. Here are the menu settings for your <strong>Report<\/strong> menu. Make sure to fill in <strong>Caption, Action, <\/strong>and <strong>Parent Menu<\/strong> as shown.<br>11.11. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-1024x650.png\" alt=\"\" class=\"wp-image-2405\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 11.3: Creating the Report Menu Item<\/em> <em>Holding Our ProductReport as an Action<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"third-checkpoint-heres-what-your-app-should-now-look-like\">Third Checkpoint: Here&#8217;s What Your App Should Now Look Like<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Run your app to make sure that your forms, charts, and reports are working. Here&#8217;s what your app should look like when clicking on <strong>Chart <\/strong>in the menu on the left. Also, test your report &#8211; you should be able to see a PDF document in your application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"652\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-1024x652.png\" alt=\"\" class=\"wp-image-2407\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-1024x652.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-768x489.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-1536x977.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33.png 1768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-14-applications-turning-your-app-into-a-multiuser-app\">Step 12: Applications: Turning Your App Into a Multiuser App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">No SQL app would be complete without user authentication and permissions. As data gets shared with users online, deciding who has access to what is an essential part of the SQL app development process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">12.1. Click on <strong>Applications<\/strong> <strong>(My First App)<\/strong> in the top navigation bar of Five.<br>12.2. Activate the <strong>Multiuser<\/strong> switch to add a login screen and user management to your application.<br>12.3. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-1024x650.png\" alt=\"\" class=\"wp-image-2426\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 12.1: Activate Multiuser to add a login screen to your application.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fourth-checkpoint-logging-into-your-application-for-the-first-time\">Fourth Checkpoint: Logging Into Your Application For The First Time<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s time to deploy your application again by clicking the run button in the top right corner. Once clicked, the application opens in a new tab inside your browser and you will be presented with a login screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use user name <strong>admin <\/strong>and password <strong>admin <\/strong>to log in to your application!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"720\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45-1024x720.png\" alt=\"\" class=\"wp-image-2427\" style=\"width:565px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45-1024x720.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45-300x211.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45-768x540.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45.png 1264w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-15-setup-user-roles-creating-roles-and-permissions\">Step 13: Setup &gt; User Roles: Creating Roles And Permissions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">13.1. To create user roles and assign permissions, click on <strong>Setup &gt; Roles.<\/strong><br>13.2. Click on the yellow <strong>Plus <\/strong>icon.<br>13.3. Type <strong>Manager <\/strong>into the <strong>Name<\/strong> field, select <strong>ChartsReports (Charts &amp; Reports)<\/strong> as the <strong>Menu<\/strong>, and give full <strong>Create, Read, Update and Delete<\/strong> permissions for the <strong>Default Query Permissions <\/strong>as shown below.<br>13.4. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-1024x649.png\" alt=\"\" class=\"wp-image-2428\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46.png 1774w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 13.1: Setting up the Manager user role.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Note how we can also use Five&#8217;s <strong>Roles<\/strong> feature to assign CRUD permissions to user roles. CRUD permissions determine what data users can create, read, update, or delete. We won&#8217;t be going into this as part of this tutorial, but if you&#8217;d like to create more granular user roles, keep this feature in mind!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-16-setup-themes-give-your-application-a-unique-look\">Step 14: Setup &gt; Themes: Give Your Application a Unique Look<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">14.1. To create a theme, go to <strong>Setup &gt; Themes.<\/strong><br>14.2. Click on the yellow <strong>Plus <\/strong>icon.<br>14.3. Type <strong>MyTheme<\/strong> into the <strong>Name<\/strong> field.<br>14.4. Click on <strong>Click to edit theme<\/strong> to open up Five&#8217;s theme editor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"648\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-1024x648.png\" alt=\"\" class=\"wp-image-2429\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-1024x648.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-768x486.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-1536x972.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47.png 1778w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 14.1: Five&#8217;s Theme Editor lets you define a theme in point-and-click.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">14.5. Click on <strong>Advanced<\/strong> at the top of theme editor.<br>14.6. Go to <a href=\"https:\/\/preview-php85.dzine.org\/five\/themes\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/preview-php85.dzine.org\/five\/themes<\/a> and download your favourite theme: copy the code and paste it into the <strong>Advanced<\/strong> theme editor, replacing all existing code.<br>14.7. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your code.<br>14.8. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon again to also save your theme.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-17-setup-instances-applying-a-theme-logos-and-customizing-the-ui\">Step 15: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">15.1 To apply a theme. go to <strong>Setup &gt; Instances<\/strong><br>15.2 Select the <strong>default<\/strong> instance<br>15.3 Click on <strong>Theme<\/strong> and select <strong>MyTheme<\/strong> from the dropdown<br>15.4 Click on The \u270f\ufe0fIcon on <strong>Logo<\/strong> and Select an image\/SVG as your logo<br>15.5 Click on <strong>User Interface<\/strong> and Select between <strong>Boston <\/strong>or <strong>New York<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"531\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-1024x531.png\" alt=\"\" class=\"wp-image-2434\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-1024x531.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-300x156.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-768x399.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-1536x797.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49.png 1898w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 15.1: Setting up Themes, Logos and UI<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Congratulations: Creating a SQL App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In just 15 steps, we have created a full-stack application that <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>runs on top of a dedicated MySQL database, <\/li>\n\n\n\n<li>connects the database to the front end through forms, charts and PDF reports,<\/li>\n\n\n\n<li>that utilizes a query as a data source for our chart,<\/li>\n\n\n\n<li>and that has a login screen with multiple user roles.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">There is a lot more that you can do with Five: from adding in-app or email notifications to <a href=\"https:\/\/preview-php85.dzine.org\/five\/code-along\/code-along-rest-api-gui\/\" data-type=\"post\" data-id=\"2492\">connecting to a REST API as a data source<\/a>. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"finding-help-in-five\">Finding Help in Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In case you get stuck during the development process, we&#8217;re here to help! Continue developing your application by accessing these resources:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Five&#8217;s User Community:<\/strong> Visit <a href=\"https:\/\/five.org\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/five.org<\/a> to ask questions or get inspiration from other users.<\/li>\n\n\n\n<li><strong>Five&#8217;s Documentation:<\/strong> Visit <a href=\"http:\/\/help.five.org\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">help.five.org<\/a> to access Five&#8217;s comprehensive documentation.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fives-in-app-help\">Five&#8217;s In-App Help<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Last, find useful tips for your application development by clicking on Five&#8217;s <strong>in-app help <\/strong>available in the top right corner or on almost any field.<\/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\/2024\/02\/Five.Co-Finding-Help-1024x649.png\" alt=\"\" class=\"wp-image-2490\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-768x486.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1536x973.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-2048x1297.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<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=\"get-your-app-online-for-us-29-99-per-month-1\">Host Your SQL App Online For Just US$29.99 Per Month<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Five lets you deploy applications starting from as little as US$29.99 per application and month.<\/p>\n\n\n\n<div class=\"wp-block-buttons has-custom-font-size has-small-font-size 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 has-custom-font-size has-medium-font-size\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background has-link-color has-text-align-center wp-element-button\" href=\"https:\/\/preview-php85.dzine.org\/five\/order-payment\/\"><strong>Subscribe Now<\/strong><\/a><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Can SQL create web apps? The answer is yes, it can. With the right tools, it is possible to create an entire web application with little more than a few lines of SQL. The only knowledge required is SQL and an understanding of relational databases, such as MySQL. In this step-by-step tutorial, we are building [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2560,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[41],"tags":[],"class_list":["post-2556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-along"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-To-Build-a-SQL-App-Cover.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-To-Build-a-SQL-App-Cover-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-To-Build-a-SQL-App-Cover-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-To-Build-a-SQL-App-Cover-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-To-Build-a-SQL-App-Cover-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-To-Build-a-SQL-App-Cover.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-To-Build-a-SQL-App-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":"Can SQL create web apps? The answer is yes, it can. With the right tools, it is possible to create an entire web application with little more than a few lines of SQL. The only knowledge required is SQL and an understanding of relational databases, such as MySQL. In this step-by-step tutorial, we are building&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2556","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=2556"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2556\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/2560"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=2556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=2556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=2556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}