How to Build a Cloud Application
Tags: tutorial, learning, cloud, mysql
Published: 2024-06-10 01:05:12

<!-- wp:paragraph -->
<p>Hi and welcome to our step-by-step guide on building your first cloud web application with Five.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Goals and Objectives: </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this step-by-step tutorial, we'll build a cloud application in just 30 minutes. We will:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step 1: Develop a Responsive Cloud-Native Application</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Set up an online MySQL database.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Create tables with a many-to-many relationship.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Step 2: Create a Data Visualization Chart</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Write an SQL query to fetch data.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Use a chart wizard to visualize this data in the cloud.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Step 3: Validate Data Inputs</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Implement custom display types.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Use regular expressions to ensure data integrity.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Step 4: Integrate with Slack</strong> <strong>(Optional)</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Set up a Slack webhook.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Configure the app to send notifications to Slack.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Step 5: Add PDF Reporting (Optional)</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Create a report template.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Include data from the SQL database in the PDF report for easy access</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Plus using Five you can also build so much more.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Sounds like a lot? <strong>You'll be surprised how quickly we can build a simple cloud application in Five! </strong>Before we continue, <a href="https://five.co/get-started/">make sure to sign up for free access to the Five development environment</a> to start building your cloud application today.</p>
<!-- /wp:paragraph -->

<!-- wp:tadv/classic-paragraph -->
<div style="background-color: #001524;"><hr style="height: 5px;">
<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<br></strong><span style="font-size: 14pt;">Rapidly Build &amp; Deploy Cloud Web Applications</span></span></pre>
<p style="text-align: center;"><a href="https://five.co/get-started/" target="_blank" rel="noopener"><button style="background-color: #f8b92b; border: none; color: black; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; margin: 4px 2px; border-radius: 5px;"><strong>Get Instant Access</strong></button><br></a></p>
<hr style="height: 5px;"></div>
<!-- /wp:tadv/classic-paragraph -->

<!-- wp:essential-blocks/table-of-contents {"blockId":"eb-toc-ei7na","blockMeta":{"desktop":".eb-toc-ei7na.eb-toc-container { max-width:610px; background-color:var(\u002d\u002deb-global-background-color); padding:30px; border-radius:4px; transition:all 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s }.eb-toc-ei7na.eb-toc-container .eb-toc-title { text-align:center; cursor:default; color:rgba(255,255,255,1); background-color:rgba(69,136,216,1); font-size:22px; font-weight:normal }.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper { background-color:rgba(241,235,218,1); text-align:left }.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li { color:rgba(0,21,36,1); font-size:14px; line-height:1.4em; font-weight:normal }.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li:hover,.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li.eb-toc-active \u003e a { color:var(\u002d\u002deb-global-link-color) }.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li a { color:inherit }.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li svg path { stroke:rgba(0,21,36,1) }.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li:hover svg path { stroke:var(\u002d\u002deb-global-link-color) }.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li a,.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li a:focus { text-decoration:none; background:none }.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li { padding-top:4px }.eb-toc-ei7na.eb-toc-container .eb-toc-wrapper .eb-toc__list li:not(:last-child) { padding-bottom:4px }.eb-toc-ei7na.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list { background:#fff; border-radius:4px }","tab":"","mobile":"","editorDesktop":"\n\t\t  \n\t\t  \n\n\t\t  .eb-toc-ei7na.eb-toc-container{\n\t\t\t  max-width:610px;\n\n\t\t\t  background-color:var(\u002d\u002deb-global-background-color);\n\n\t\t\t  \n             \n\n            \n\t\t\t  \n            padding: 30px;\n\n            \n\t\t\t  \n      \n           \n          \n\n      \n          \n                border-radius: 4px;\n\n            \n          \n\n       \n\n\n    \n\t\t\t  transition:all 0.5s, \n  border 0.5s, border-radius 0.5s, box-shadow 0.5s\n  ;\n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container:hover{\n\t\t\t  \n    \n         \n\n\n        \n\n    \n          \n                 \n\n            \n          \n\n     \n\n    \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-title{\n\t\t\t  text-align: center;\n\t\t\t  cursor:default;\n\t\t\t  color: rgba(255,255,255,1);\n\t\t\t  background-color:rgba(69,136,216,1);\n\t\t\t  \n\t\t\t  \n             \n\n            \n\t\t\t  \n               \n              font-size: 22px;\n               \n              font-weight: normal;\n               \n               \n               \n               \n          \n\n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper{\n\t\t\t  background-color:rgba(241,235,218,1);\n\t\t\t  text-align: left;\n\t\t\t  \n             \n\n            \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper ul,\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper ol\n\t\t  {\n\t\t\t  \n\t\t\t  \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li {\n\t\t\t  color:rgba(0,21,36,1);\n\t\t\t  \n               \n              font-size: 14px;\n              line-height: 1.4em;\n              font-weight: normal;\n               \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li:hover,\n          .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li.eb-toc-active \u003e a{\n\t\t\t  color:var(\u002d\u002deb-global-link-color);\n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li a {\n\t\t\t  color:inherit;\n\t\t  }\n\n          .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li svg path{\n            stroke:rgba(0,21,36,1);\n          }\n          .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li:hover svg path{\n            stroke:var(\u002d\u002deb-global-link-color);\n          }\n\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li a,\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li a:focus{\n\t\t\t  text-decoration:none;\n\t\t\t  background:none;\n\t\t  }\n\n\t\t  \n\n        .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li {\n            padding-top: 4px;\n        }\n\n        .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper .eb-toc__list li:not(:last-child) {\n            padding-bottom: 4px;\n        }\n\n        \n        .eb-toc-ei7na.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            background: #fff;\n            \n      \n           \n          \n\n      \n          \n                border-radius: 4px;\n\n            \n          \n\n       \n\n\n    \n        }\n\n\n\t  \n\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper{\n\t\t\t  display:block;\n\t\t  }\n\t\t  ","editorTab":"\n\t\t  \n\t\t  .eb-toc-ei7na.eb-toc-container{\n\t\t\t  \n\n\t\t\t  \n                 \n\n            \n\t\t\t  \n                 \n\n            \n\t\t\t  \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n\n    \n\t\t  }\n\t\t  .eb-toc-ei7na.eb-toc-container:hover{\n\t\t\t  \n    \n         \n        \n    \n              \n                 \n\n            \n          \n    \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-title{\n\t\t\t  \n                 \n\n            \n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper{\n\t\t\t  \n                 \n\n            \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li{\n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n          .eb-toc-ei7na.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n\n    \n        }\n\n\t  \n\t\t  ","editorMobile":"\n\t\t  \n\t\t  .eb-toc-ei7na.eb-toc-container{\n\t\t\t  \n\n\n\t\t\t  \n                 \n\n            \n\t\t\t  \n                 \n\n            \n\t\t\t  \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n    \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container:hover{\n\t\t\t  \n    \n         \n\n        \n    \n              \n                 \n\n            \n          \n\n    \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-title{\n\t\t\t  \n                 \n\n            \n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper{\n\t\t\t  \n                 \n\n            \n\t\t  }\n\n\t\t  .eb-toc-ei7na.eb-toc-container .eb-toc-wrapper li{\n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n          .eb-toc-ei7na.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n    \n        }\n\n\t  \n\t  "},"headers":[{"level":2,"content":"Goals and Objectives: ","text":"Goals and Objectives: ","link":"goals-and-objectives"},{"level":2,"content":"Resources and Downloads","text":"Resources and Downloads","link":"resources-and-downloads"},{"level":3,"content":"CSV File","text":"CSV File","link":"csv-file"},{"level":3,"content":"SQL Query","text":"SQL Query","link":"sql-query"},{"level":3,"content":"JavaScript Function","text":"JavaScript Function","link":"javascript-function"},{"level":3,"content":"Theme","text":"Theme","link":"theme"},{"level":3,"content":"Report Template","text":"Report Template","link":"report-template"},{"level":2,"content":"Step-by-Step Guide: Building a Cloud Application from Scratch","text":"Step-by-Step Guide: Building a Cloud Application from Scratch","link":"step-by-step-guide-building-a-cloud-application-from-scratch"},{"level":3,"content":"Step 1: Creating a New Cloud Application","text":"Step 1: Creating a New Cloud Application","link":"step-1-creating-a-new-cloud-application"},{"level":3,"content":"Step 2: Running Your Cloud-Based Application","text":"Step 2: Running Your Cloud-Based Application","link":"step-2-running-your-cloud-based-application"},{"level":3,"content":"Step 3: Creating Database Tables with Table Wizard","text":"Step 3: Creating Database Tables with Table Wizard","link":"step-3-creating-database-tables-with-table-wizard"},{"level":4,"content":"Creating the Product Table","text":"Creating the Product Table","link":"creating-the-product-table"},{"level":4,"content":"Creating the Orders Table","text":"Creating the Orders Table","link":"creating-the-orders-table"},{"level":4,"content":"Creating the ProductOrders Table","text":"Creating the ProductOrders Table","link":"creating-the-productorders-table"},{"level":3,"content":"Step 4: Using the Database Modeler","text":"Step 4: Using the Database Modeler","link":"step-4-using-the-database-modeler"},{"level":3,"content":"Step 5: Importing Data from a CSV","text":"Step 5: Importing Data from a CSV","link":"step-5-importing-data-from-a-csv"},{"level":3,"content":"Step 6: Creating Forms with Form Wizard","text":"Step 6: Creating Forms with Form Wizard","link":"step-6-creating-forms-with-form-wizard"},{"level":4,"content":"Creating the Product and Orders Forms","text":"Creating the Product and Orders Forms","link":"creating-the-product-and-orders-forms"},{"level":4,"content":"Creating the ProductOrders Form","text":"Creating the ProductOrders Form","link":"creating-the-productorders-form"},{"level":3,"content":"Step 7: Enhancing Forms by Adding Pages","text":"Step 7: Enhancing Forms by Adding Pages","link":"step-7-enhancing-forms-by-adding-pages"},{"level":2,"content":"Second Checkpoint: Build Your Cloud Application","text":"Second Checkpoint: Build Your Cloud Application","link":"second-checkpoint-build-your-cloud-application"},{"level":3,"content":"Step 8: Validating Data on a Form","text":"Step 8: Validating Data on a Form","link":"step-8-validating-data-on-a-form"},{"level":3,"content":"Step 9: Using Five's End-User GUI","text":"Step 9: Using Five's End-User GUI","link":"step-9-using-fives-end-user-gui"},{"level":3,"content":"Step 10: Writing SQL Queries in Five","text":"Step 10: Writing SQL Queries in Five","link":"step-10-writing-sql-queries-in-five"},{"level":3,"content":"Step 11: Creating Charts For Your Cloud Application","text":"Step 11: Creating Charts For Your Cloud Application","link":"step-11-creating-charts-for-your-cloud-application"},{"level":3,"content":"Step 12: Visual \u003e Reports: Generating a PDF Report","text":"Step 12: Visual \u003e Reports: Generating a PDF Report","link":"step-12-visual-reports-generating-a-pdf-report"},{"level":1,"content":"Report","text":"Report","link":"report"},{"level":3,"content":"Step 13: Visual \u003e Menus: Adding Menu Items to Your App","text":"Step 13: Visual \u003e Menus: Adding Menu Items to Your App","link":"step-13-visual-menus-adding-menu-items-to-your-app"},{"level":2,"content":"Third Checkpoint: Ensuring Your App Functions Correctly","text":"Third Checkpoint: Ensuring Your App Functions Correctly","link":"third-checkpoint-ensuring-your-app-functions-correctly"},{"level":3,"content":"Step 14: Logic \u003e Code Editor: Creating a JavaScript Function","text":"Step 14: Logic \u003e Code Editor: Creating a JavaScript Function","link":"step-14-logic-code-editor-creating-a-javascript-function"},{"level":3,"content":"Step 15: Visual \u003e Forms: Associating a Function with an Event","text":"Step 15: Visual \u003e Forms: Associating a Function with an Event","link":"step-15-visual-forms-associating-a-function-with-an-event"},{"level":3,"content":"Step 16: Applications: Enabling Multiuser Functionality","text":"Step 16: Applications: Enabling Multiuser Functionality","link":"step-16-applications-enabling-multiuser-functionality"},{"level":2,"content":"Fourth Checkpoint: First Login","text":"Fourth Checkpoint: First Login","link":"fourth-checkpoint-first-login"},{"level":3,"content":"Step 17: Setup \u003e User Roles: Configuring Roles and Permissions","text":"Step 17: Setup \u003e User Roles: Configuring Roles and Permissions","link":"step-17-setup-user-roles-configuring-roles-and-permissions"},{"level":3,"content":"Step 18: Setup \u003e Themes: Customizing the Appearance of Your App","text":"Step 18: Setup \u003e Themes: Customizing the Appearance of Your App","link":"step-18-setup-themes-customizing-the-appearance-of-your-app"},{"level":3,"content":"Step 19: Setup \u003e Instances: Applying a Theme and Customizing the UI","text":"Step 19: Setup \u003e Instances: Applying a Theme and Customizing the UI","link":"step-19-setup-instances-applying-a-theme-and-customizing-the-ui"},{"level":2,"content":"Congratulations: You've Built Your Cloud Web Application","text":"Congratulations: You've Built Your Cloud Web Application","link":"congratulations-youve-built-your-cloud-web-application"},{"level":3,"content":"Exploring User Roles","text":"Exploring User Roles","link":"exploring-user-roles"},{"level":3,"content":"Finding Help in Five","text":"Finding Help in Five","link":"finding-help-in-five"},{"level":3,"content":"Deploying Your App","text":"Deploying Your App","link":"deploying-your-app"}],"deleteHeaderList":[{"label":"Goals and Objectives: ","value":"goals-and-objectives","isDelete":true},{"label":"Resources and Downloads","value":"resources-and-downloads","isDelete":true},{"label":"CSV File","value":"csv-file","isDelete":true},{"label":"SQL Query","value":"sql-query","isDelete":true},{"label":"JavaScript Function","value":"javascript-function","isDelete":true},{"label":"Theme","value":"theme","isDelete":true},{"label":"Report Template","value":"report-template","isDelete":true},{"label":"Step-by-Step Guide: Building a Cloud Application from Scratch","value":"step-by-step-guide-building-a-cloud-application-from-scratch","isDelete":false},{"label":"Step 1: Creating a New Cloud Application","value":"step-1-creating-a-new-cloud-application","isDelete":false},{"label":"Step 2: Running Your Cloud-Based Application","value":"step-2-running-your-cloud-based-application","isDelete":false},{"label":"Step 3: Creating Database Tables with Table Wizard","value":"step-3-creating-database-tables-with-table-wizard","isDelete":false},{"label":"Creating the Product Table","value":"creating-the-product-table","isDelete":false},{"label":"Creating the Orders Table","value":"creating-the-orders-table","isDelete":false},{"label":"Creating the ProductOrders Table","value":"creating-the-productorders-table","isDelete":false},{"label":"Step 4: Using the Database Modeler","value":"step-4-using-the-database-modeler","isDelete":false},{"label":"Step 5: Importing Data from a CSV","value":"step-5-importing-data-from-a-csv","isDelete":false},{"label":"Step 6: Creating Forms with Form Wizard","value":"step-6-creating-forms-with-form-wizard","isDelete":false},{"label":"Creating the Product and Orders Forms","value":"creating-the-product-and-orders-forms","isDelete":false},{"label":"Creating the ProductOrders Form","value":"creating-the-productorders-form","isDelete":false},{"label":"Step 7: Enhancing Forms by Adding Pages","value":"step-7-enhancing-forms-by-adding-pages","isDelete":false},{"label":"Second Checkpoint: Build Your Cloud Application","value":"second-checkpoint-build-your-cloud-application","isDelete":false},{"label":"Step 8: Validating Data on a Form","value":"step-8-validating-data-on-a-form","isDelete":false},{"label":"Step 9: Using Five's End-User GUI","value":"step-9-using-fives-end-user-gui","isDelete":false},{"label":"Step 10: Writing SQL Queries in Five","value":"step-10-writing-sql-queries-in-five","isDelete":false},{"label":"Step 11: Creating Charts For Your Cloud Application","value":"step-11-creating-charts-for-your-cloud-application","isDelete":false},{"label":"Step 12: Visual \u003e Reports: Generating a PDF Report","value":"step-12-visual-reports-generating-a-pdf-report","isDelete":false},{"label":"Report","value":"report","isDelete":true},{"label":"Step 13: Visual \u003e Menus: Adding Menu Items to Your App","value":"step-13-visual-menus-adding-menu-items-to-your-app","isDelete":false},{"label":"Third Checkpoint: Ensuring Your App Functions Correctly","value":"third-checkpoint-ensuring-your-app-functions-correctly","isDelete":false},{"label":"Step 14: Logic \u003e Code Editor: Creating a JavaScript Function","value":"step-14-logic-code-editor-creating-a-javascript-function","isDelete":false},{"label":"Step 15: Visual \u003e Forms: Associating a Function with an Event","value":"step-15-visual-forms-associating-a-function-with-an-event","isDelete":false},{"label":"Step 16: Applications: Enabling Multiuser Functionality","value":"step-16-applications-enabling-multiuser-functionality","isDelete":false},{"label":"Fourth Checkpoint: First Login","value":"fourth-checkpoint-first-login","isDelete":false},{"label":"Step 17: Setup \u003e User Roles: Configuring Roles and Permissions","value":"step-17-setup-user-roles-configuring-roles-and-permissions","isDelete":false},{"label":"Step 18: Setup \u003e Themes: Customizing the Appearance of Your App","value":"step-18-setup-themes-customizing-the-appearance-of-your-app","isDelete":false},{"label":"Step 19: Setup \u003e Instances: Applying a Theme and Customizing the UI","value":"step-19-setup-instances-applying-a-theme-and-customizing-the-ui","isDelete":false},{"label":"Congratulations: You've Built Your Cloud Web Application","value":"congratulations-youve-built-your-cloud-web-application","isDelete":false},{"label":"Exploring User Roles","value":"exploring-user-roles","isDelete":false},{"label":"Finding Help in Five","value":"finding-help-in-five","isDelete":false},{"label":"Deploying Your App","value":"deploying-your-app","isDelete":false}],"isMigrated":true,"titleBg":"rgba(69,136,216,1)","titleColor":"rgba(255,255,255,1)","contentBg":"rgba(241,235,218,1)","contentColor":"rgba(0,21,36,1)","contentGap":8,"titleAlign":"center","titleFontSize":22,"titleFontWeight":"normal","titleLineHeightUnit":"px","contentFontWeight":"normal","contentLineHeight":1.4,"ttlP_isLinked":true,"commonStyles":{"desktop":".wp-admin .eb-parent-eb-toc-ei7na { display:block }.wp-admin .eb-parent-eb-toc-ei7na { filter:unset }.wp-admin .eb-parent-eb-toc-ei7na::before { content:none }.eb-parent-eb-toc-ei7na { display:block }.root-eb-toc-ei7na { position:relative }","tab":".editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-ei7na { display:block }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-ei7na { filter:none }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-ei7na::before { content:none }.eb-parent-eb-toc-ei7na { display:block }","mobile":".editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-ei7na { display:block }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-ei7na { filter:none }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-ei7na::before { content:none }.eb-parent-eb-toc-ei7na { display:block }"}} /-->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="resources-and-downloads">Resources and Downloads</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="csv-file">CSV File</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Download the CSV file here.</p>
<!-- /wp:paragraph -->

<!-- wp:file {"id":2411,"href":"https://five.co/wp-content/uploads/2024/02/product_data-1.csv"} -->
<div class="wp-block-file"><a id="wp-block-file--media-079b5d33-dcb9-48b8-8f41-1c0ca47bba8a" href="https://five.co/wp-content/uploads/2024/02/product_data-1.csv" target="_blank" rel="noreferrer noopener">product_data-1</a><a href="https://five.co/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>
<!-- /wp:file -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="sql-query">SQL Query</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Download the SQL query here. </p>
<!-- /wp:paragraph -->

<!-- wp:file {"id":2412,"href":"https://five.co/wp-content/uploads/2024/02/ProductQuery.txt"} -->
<div class="wp-block-file"><a id="wp-block-file--media-f984382b-09df-4622-81ad-72307942bb19" href="https://five.co/wp-content/uploads/2024/02/ProductQuery.txt" target="_blank" rel="noreferrer noopener">ProductQuery</a><a href="https://five.co/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>
<!-- /wp:file -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="java-script-function">JavaScript Function</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Download the JavaScript function here.</p>
<!-- /wp:paragraph -->

<!-- wp:file {"id":2651,"href":"https://five.co/wp-content/uploads/2024/03/Slack.txt"} -->
<div class="wp-block-file"><a id="wp-block-file--media-f3a116a7-4b94-4c84-a981-813b030fc81c" href="https://five.co/wp-content/uploads/2024/03/Slack.txt" target="_blank" rel="noreferrer noopener">Slack</a><a href="https://five.co/wp-content/uploads/2024/03/Slack.txt" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-f3a116a7-4b94-4c84-a981-813b030fc81c">Download</a></div>
<!-- /wp:file -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="theme">Theme</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Download the CSS theme here.</p>
<!-- /wp:paragraph -->

<!-- wp:file {"id":2430,"href":"https://five.co/wp-content/uploads/2024/02/PurpleHazeTheme.txt"} -->
<div class="wp-block-file"><a id="wp-block-file--media-d9efd2eb-45b1-45f3-9758-f2c68e3a7ee9" href="https://five.co/wp-content/uploads/2024/02/PurpleHazeTheme.txt">PurpleHazeTheme</a><a href="https://five.co/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>
<!-- /wp:file -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="report-template">Report Template</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Download the report template or copy the HTML from here.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:file {"id":2414,"href":"https://five.co/wp-content/uploads/2024/02/ProductReport.docx"} -->
<div class="wp-block-file"><a id="wp-block-file--media-a1eac728-16c7-40db-99ed-608c628b1f11" href="https://five.co/wp-content/uploads/2024/02/ProductReport.docx" target="_blank" rel="noreferrer noopener">ProductReport</a><a href="https://five.co/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>
</div>
<!-- /wp:group -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading"><strong>Step-by-Step Guide: Building a Cloud Application from Scratch</strong></h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 1: Creating a New Cloud Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>1.1.</strong> To create a new application in Five, navigate to the "Applications" section.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3013,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-7-1024x694-1.png" alt="Creating a New Cloud Application" class="wp-image-3013"/><figcaption class="wp-element-caption"><em>Image 1.1: Creating a New Cloud Application</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>1.2.</strong> Click on the yellow Plus icon to start a new application.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3014,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649-1.png" alt="Build a New Cloud Application in Five" class="wp-image-3014"/><figcaption class="wp-element-caption"><em>Image 1.2: Build a New Cloud Application in Five</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>1.3.</strong> Enter "My First App" in the Title field.<br><strong>1.4.</strong> Save your application by clicking the Tick ✔️ icon.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3015,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-12-1024x619-1.png" alt="" class="wp-image-3015"/><figcaption class="wp-element-caption"><em>Image 1.3: Saving a New Application</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 2: Running Your Cloud-Based Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can run and preview your cloud application at any time. Click on the "Deploy to Development" button in the top navigation bar. The initial deployment may take a while as Five sets up a cloud-hosted instance for your app.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3016,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-4-1024x259-1.png" alt="Deploy your application to development" class="wp-image-3016"/><figcaption class="wp-element-caption"><em>Image 2.1.: Deploying your application to development</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>After deployment, the "Deploy to Development" button will change to a "Run ▶️" button. Click "Run ▶️" to open a new window showing the current state of your application.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3017,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Run-Your-Application-1-1024x576.png" alt="Running Your Application" class="wp-image-3017"/><figcaption class="wp-element-caption"><em>Image 2.2: Running Your Application</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 3: Creating Database Tables with Table Wizard</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let's start building our cloud application. Return to the development environment to continue.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>3.1.</strong> Click on the blue "Manage" button.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3018,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Manage-Your-Application-1024x576.png" alt="Accessing Five's development environment" class="wp-image-3018"/><figcaption class="wp-element-caption"><em>Image 3.1: Accessing Five's development environment</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>3.2.</strong> To add tables to Five's integrated MySQL database, go to "Data" &gt; "Table Wizard."</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3019,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-9-1024x518-1.png" alt="Accessing Five's Table Wizard" class="wp-image-3019"/><figcaption class="wp-element-caption"><em>Image 3.2: Accessing Five's Table Wizard</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>We will create three tables: Products, Orders, and ProductOrders.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Creating the Product Table</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>3.3.</strong> Name your table "Product" in the Name field. Add fields by clicking the Plus ➕ icon.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>3.4.</strong> Ensure your Product table fields match this structure:</p>
<!-- /wp:paragraph -->

<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>Name</th><th>Data Type</th><th>Required</th><th>Size</th><th>Default Display Type</th></tr></thead><tbody><tr><td>Name</td><td>Text</td><td>✔️</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>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Save the table by clicking the Tick ✔️ icon and confirm in the Table Upgrade dialog.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3020,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-50-1024x551-1.png" alt="Creating the Product Table" class="wp-image-3020"/><figcaption class="wp-element-caption"><em>Image 3.3: Creating the Product Table</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Creating the Orders Table</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>3.5.</strong> Repeat steps 3.3 and 3.4 for the Orders table. Ensure it looks like this:</p>
<!-- /wp:paragraph -->

<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>Name</th><th>Data Type</th><th>Required</th><th>Size</th><th>Default Display Type</th></tr></thead><tbody><tr><td>OrderStatus</td><td>Text</td><td>✔️</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>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Save by clicking the Tick ✔️ icon.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3021,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-51-1024x550-1.png" alt="" class="wp-image-3021"/><figcaption class="wp-element-caption"><em>Image 3.4: Creating the Orders Table</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Creating the ProductOrders Table</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The ProductOrders table links Products and Orders in a many-to-many relationship and contains only the Foreign Keys of these tables.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>3.7.</strong> Open the Table Wizard and name the table "ProductOrders."</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>3.8.</strong> Click the Right Arrow &gt; to proceed.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3022,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-13-1024x627-1.png" alt="" class="wp-image-3022"/><figcaption class="wp-element-caption"><em>Image 3.5: The ProductOrders Table</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>3.10.</strong> Add relationships by clicking the Plus ➕ icon in the Relationships area, linking to both Product and Orders tables. Tick the Required box for both.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>3.12.</strong> Save the relationships and the table by clicking the Tick ✔️ icon.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3023,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-14-1024x651-1.png" alt="" class="wp-image-3023"/><figcaption class="wp-element-caption"><em>Image 3.6: Adding Relationships to the ProductOrders Table</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 4: Using the Database Modeler</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>4.1.</strong> Verify your database setup by navigating to "Data" &gt; "Database Modeler."</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>4.2.</strong> Arrange your tables to form a visual Entity-Relationship Diagram (ERD). Ensure relationships are correct, with "crows' feet" pointing to the ProductOrders table.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3024,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-15-1024x649-1.png" alt="" class="wp-image-3024"/><figcaption class="wp-element-caption"><em>Image 4.1: Database Modeler with ERD</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 5: Importing Data from a CSV</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>5.1.</strong> To import a CSV file into your database table, go to "Data" &gt; "Tables."</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>5.2.</strong> Click on the "Import CSV into Table 📥" button.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3025,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Data-Import-1024x650-1-1.png" alt="" class="wp-image-3025"/><figcaption class="wp-element-caption"><em>Image 5.1: Importing CSV into a Table</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>5.3.</strong> Select the Product table from the dropdown.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>5.4.</strong> Choose the CSV file to import. Set ProductKey to "Generated."</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>5.5.</strong> Five will map your database fields to the CSV columns. Confirm by clicking the Tick ✔️ icon.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3026,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-36-1024x627-1.png" alt="" class="wp-image-3026"/><figcaption class="wp-element-caption"><em>Image 5.2: Mapping CSV Columns to Database Fields</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 6: Creating Forms with Form Wizard</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>6.1.</strong> To create forms, go to "Visual" &gt; "Form Wizard."</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3027,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Form-Wizard-1024x650-2.png" alt="" class="wp-image-3027"/><figcaption class="wp-element-caption"><em>Image 6.1: Accessing the Form Wizard</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Creating the Product and Orders Forms</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>6.2.</strong> Select "Product" as the Main Data Source in the Form Wizard and save.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>6.4.</strong> Repeat the process for the Orders table.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3028,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-16-1024x628-1.png" alt="" class="wp-image-3028"/><figcaption class="wp-element-caption"><em>Image 6.2: Creating the Product Form</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">Creating the ProductOrders Form</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>6.5.</strong> Select "ProductOrders" as the Main Data Source in the Form Wizard.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>6.6.</strong> Toggle off "Add Menu Item."</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong>6.7.</strong> Click the Right Arrow &gt; to proceed.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3029,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-17-1024x627-1.png" alt="" class="wp-image-3029"/><figcaption class="wp-element-caption"><em>Image 6.3: Defining the ProductOrders Form</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>6.8.</strong> Tick the "List" box for both fields: ProductKey and OrdersKey, then save.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3030,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-18-1024x627-1.png" alt="" class="wp-image-3030"/><figcaption class="wp-element-caption"><em>Image 6.4: Settings for the ProductOrders Form</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 7: Enhancing Forms by Adding Pages</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>7.1.</strong> Go to "Visual" &gt; "Forms."</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>7.2.</strong> Select the Orders form.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>7.3.</strong> Click on "Pages" and then the Plus ➕ icon.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3031,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-20-1024x622-1.png" alt="" class="wp-image-3031"/><figcaption class="wp-element-caption"><em>Image 7.1: Adding a Page to the Orders Form</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>7.5.</strong> Set the Page Type to "List," caption it as "Products," and select "ProductOrders (Form)" as the Action.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>7.7.</strong> Save the new page by clicking the Tick ✔️ icon.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3032,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-22-1024x621-1.png" alt="" class="wp-image-3032"/><figcaption class="wp-element-caption"><em>Image 7.2: Page Type and Field Settings</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="second-checkpoint-run-your-application">Second Checkpoint: Build Your Cloud Application</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It's time to run your application to see what we have developed so far. As shown in Step 2 above, you can always preview your application by clicking on the <strong>Run ▶️ </strong>icon in the top right corner.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's what your app should look like:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2442,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2024/02/image-54-1024x651.png" alt="" class="wp-image-2442"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 8: Validating Data on a Form</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>8.1. Go to <strong>Setup &gt; Display Types.</strong><br>8.2. Click on the yellow <strong>Plus ➕ </strong>button to create a new display type.<br>8.3. Fill in the following fields:<br>- For <strong>Name, </strong>type in <strong>SKU</strong>.<br>- For <strong>Display Type, </strong>select <strong>Text</strong>.<br>- Now go down to the bottom of the display type form, and toggle <strong>Regular Expression</strong>.<br>- For <strong>Mask,</strong> type or paste this regular expression: <code>^[A-Z]{3}-\d+$</code><br>- Last, for <strong>Error Message, </strong>type in the error message that users will see if they fill in an invalid SKU, such as "Please enter a valid SKU."<br>8.4. Click on the <strong>Tick ✔️ </strong>icon to save your display type.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3033,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-8-1024x525-1.png" alt="" class="wp-image-3033"/><figcaption class="wp-element-caption"><em>Image 8.1: Creating a New Display Type</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>8.5.</strong> Apply this display type to the SKU field in the Products form under "Visual" &gt; "Forms" &gt; "Pages" &gt; "General" &gt; "Fields."</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3034,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-9-1024x525-1.png" alt="" class="wp-image-3034"/><figcaption class="wp-element-caption"><em>Image 8.2: Applying the Display Type to a Field</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>8.8.</strong> Change the Display Type of the SKU field to SKU and save.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3035,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-10-1024x521-1.png" alt="" class="wp-image-3035"/><figcaption class="wp-element-caption"><em>Image 8.3: SKU Field with Display Type Applied</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 9: Using Five's End-User GUI</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>9.1.</strong> In the end-user application, add some dummy data to the Orders table.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>9.2.</strong> Add products to your orders via the Plus ➕ icon in the Products page.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3047,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-56-1024x650-1.png" alt="" class="wp-image-3047"/><figcaption class="wp-element-caption"><em>Image 9.1: Adding Dummy Data in End-User GUI</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>9.5 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 9.1, this list contains a <strong>New, Pending, Pending </strong>and <strong>Shipped </strong>order.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 10: Writing SQL Queries in Five</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now let's create a SQL query in Five, so let's go back into our development environment. We will write a query that returns some of the data you created previously.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>10.1.</strong> Go to "Data" &gt; "Queries."</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>10.2.</strong> Add a new query by clicking the yellow plus and name it "ProductQuery."</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>10.4.</strong> Click on "Click to add" to open the Query Editor.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3048,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-37-1024x649-1.png" alt="" class="wp-image-3048"/><figcaption class="wp-element-caption"><em>Image 10.1: Accessing the Query Editor</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>10.5</strong>. Click on <strong>SQL</strong>.<br><strong>10.6</strong>. Paste the SQL 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 the <strong>Run </strong>▶️ icon.</p>
<!-- /wp:paragraph -->

<!-- wp:kevinbatdorf/code-block-pro {"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  )","codeHTML":"\u003cpre class=\u0022shiki one-dark-pro\u0022 style=\u0022background-color: #282c34\u0022 tabindex=\u00220\u0022\u003e\u003ccode\u003e\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003eSELECT\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`Product`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`Name`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e,\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`Product`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`Price`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e,\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`Orders`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`OrderDate`\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003eFROM\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`Product`\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  \u003c/span\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003eINNER JOIN\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`ProductOrders`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003eON\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e (\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e    \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`ProductOrders`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`ProductKey`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #56B6C2\u0022\u003e=\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`Product`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`ProductKey`\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  )\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  \u003c/span\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003eINNER JOIN\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`Orders`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003eON\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e (\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e    \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`ProductOrders`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`OrdersKey`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #56B6C2\u0022\u003e=\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`Orders`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`OrdersKey`\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  )\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e","language":"sql","theme":"one-dark-pro","bgColor":"#282c34","textColor":"#abb2bf","fontSize":".875rem","fontFamily":"Code-Pro-JetBrains-Mono","lineHeight":"1.25rem","clampFonts":false,"lineNumbers":false,"headerType":"headlights","disablePadding":false,"footerType":"none","enableMaxHeight":false,"seeMoreType":"","seeMoreString":"","seeMoreAfterLine":"","seeMoreTransition":false,"highlightingHover":false,"lineHighlightColor":"rgba(134, 167, 228, 0.2)","copyButton":true,"copyButtonType":"heroicons","useTabs":false} -->
<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
  `Product`.`Name`,
  `Product`.`Price`,
  `Orders`.`OrderDate`
FROM
  `Product`
  INNER JOIN `ProductOrders` ON (
    `ProductOrders`.`ProductKey` = `Product`.`ProductKey`
  )
  INNER JOIN `Orders` ON (
    `ProductOrders`.`OrdersKey` = `Orders`.`OrdersKey`
  )" 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>
<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>
<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>
<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>
<span class="line"><span style="color: #C678DD">FROM</span></span>
<span class="line"><span style="color: #ABB2BF">  </span><span style="color: #98C379">`Product`</span></span>
<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>
<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>
<span class="line"><span style="color: #ABB2BF">  )</span></span>
<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>
<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>
<span class="line"><span style="color: #ABB2BF">  )</span></span></code></pre></div>
<!-- /wp:kevinbatdorf/code-block-pro -->

<!-- wp:paragraph -->
<p><strong>10.7.</strong> Save your query by clicking the Tick ✔️ icon.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3049,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-38-1024x650-1.png" alt="" class="wp-image-3049"/><figcaption class="wp-element-caption"><em>Image 10.2: SQL Query Editor</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 11: Creating Charts For Your Cloud Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>11.1.</strong> Navigate to "Visual" &gt; "Chart Wizard."</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>11.2.</strong> Fill in the required fields (marked with an asterisk *) and select your X Value Column and Y Value Column.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>11.3.</strong> Save the chart settings by clicking tick in the top right</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3050,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-23-1024x649-1.png" alt="" class="wp-image-3050"/><figcaption class="wp-element-caption"><em>Image 11.1: Creating a Bar Chart</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 12: Visual &gt; Reports: Generating a PDF Report</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>12.1. Begin by navigating to Visual &gt; Reports to create a PDF report from your database.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>12.2. Click the yellow Plus icon to start a new report.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>12.3. Enter "Product Report" into the Title field.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>12.4. Select the Data Sources option.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3051,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-24-1024x652-1-1.png" alt="" class="wp-image-3051"/><figcaption class="wp-element-caption"><em>Image 12.1: A report requires a title and data source before it can be created.</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>12.5. Click the Plus ➕ icon to add a new data source.</p>
<!-- /wp:paragraph -->

**To continue the rest of this tutorial navigate to ["How to Build a Cloud Application"](https://five.co/blog/how-to-build-a-cloud-application/)
**