{"id":2492,"date":"2024-02-29T16:20:13","date_gmt":"2024-02-29T08:20:13","guid":{"rendered":"https:\/\/five.co\/?p=2492"},"modified":"2026-04-03T16:18:47","modified_gmt":"2026-04-03T08:18:47","slug":"code-along-rest-api-gui","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/code-along\/code-along-rest-api-gui\/","title":{"rendered":"Code-Along: How to Develop a REST API GUI"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hi and welcome to our step-by-step guide on building your first web app with Five. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Follow the steps below to build a responsive web app on a REST API <em>and <\/em>MySQL database in Five.<\/strong> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Goals and Outcomes: How to Develop a REST API GUI<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By the end of this step-by-step guide, we have developed a responsive web app with a MySQL backend and a live connection to the DummyJSON API. The data from the API is shown in our front end on a form. The app further has a button that extracts data from the API and pushes it into our database, so that users can work with or perform CRUD operations on the data from the API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before we continue, make sure to <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 a REST API GUI<\/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-lzlmj1v wp-block-essential-blocks-table-of-contents\"><div class=\"eb-parent-wrapper eb-parent-eb-toc-lzlmj1v \"><div class=\"eb-toc-container eb-toc-lzlmj1v  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 Outcomes: How to Develop a REST API GUI&quot;,&quot;text&quot;:&quot;Goals and Outcomes: How to Develop a REST API GUI&quot;,&quot;link&quot;:&quot;goals-and-outcomes-how-to-develop-a-rest-api-gui&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Get Your REST API GUI Online From US$29.99 Per Month&quot;,&quot;text&quot;:&quot;Get Your REST API GUI Online From US$29.99 Per Month&quot;,&quot;link&quot;:&quot;get-your-rest-api-gui-online-from-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: How to Build a REST API GUI&quot;,&quot;text&quot;:&quot;Resources and Downloads: How to Build a REST API GUI&quot;,&quot;link&quot;:&quot;resources-and-downloads-how-to-build-a-rest-api-gui&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Download the Finished Application&quot;,&quot;text&quot;:&quot;Download the Finished Application&quot;,&quot;link&quot;:&quot;download-the-finished-application&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;JavaScript Functions&quot;,&quot;text&quot;:&quot;JavaScript Functions&quot;,&quot;link&quot;:&quot;javascript-functions&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Video: Develop a REST API GUI&quot;,&quot;text&quot;:&quot;Video: Develop a REST API GUI&quot;,&quot;link&quot;:&quot;video-develop-a-rest-api-gui&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: Data &gt; Connection Wizard: Adding an API As a Data Source&quot;,&quot;text&quot;:&quot;Step 8: Data &gt; Connection Wizard: Adding an API As a Data Source&quot;,&quot;link&quot;:&quot;step-8-data-connection-wizard-adding-an-api-as-a-data-source&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 9: Visual &gt; Form Wizard: Creating a Form on the API&quot;,&quot;text&quot;:&quot;Step 9: Visual &gt; Form Wizard: Creating a Form on the API&quot;,&quot;link&quot;:&quot;step-9-visual-form-wizard-creating-a-form-on-the-api&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Third Checkpoint: Run Your Application&quot;,&quot;text&quot;:&quot;Third Checkpoint: Run Your Application&quot;,&quot;link&quot;:&quot;third-checkpoint-run-your-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 10: Logic &gt; Functions: Adding JavaScript Functions to the Application&quot;,&quot;text&quot;:&quot;Step 10: Logic &gt; Functions: Adding JavaScript Functions to the Application&quot;,&quot;link&quot;:&quot;step-10-logic-functions-adding-javascript-functions-to-the-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Explainer: Understanding the Five API&quot;,&quot;text&quot;:&quot;Explainer: Understanding the Five API&quot;,&quot;link&quot;:&quot;explainer-understanding-the-five-api&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 11: Visual &gt; Forms: Adding a Button to a Form&quot;,&quot;text&quot;:&quot;Step 11: Visual &gt; Forms: Adding a Button to a Form&quot;,&quot;link&quot;:&quot;step-11-visual-forms-adding-a-button-to-a-form&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Fourth Checkpoint: Run Your Application&quot;,&quot;text&quot;:&quot;Fourth Checkpoint: Run Your Application&quot;,&quot;link&quot;:&quot;fourth-checkpoint-run-your-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Next Steps: Creating Charts and Reports or Adding Logins to Your Application&quot;,&quot;text&quot;:&quot;Next Steps: Creating Charts and Reports or Adding Logins to Your Application&quot;,&quot;link&quot;:&quot;next-steps-creating-charts-and-reports-or-adding-logins-to-your-application&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;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;}]\" data-visible=\"[true,true,true,true,true,true]\" data-delete-headers=\"[{&quot;label&quot;:&quot;Goals and Outcomes: How to Develop a REST API GUI&quot;,&quot;value&quot;:&quot;goals-and-outcomes-how-to-develop-a-rest-api-gui&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Get Your REST API GUI Online From US$29.99 Per Month&quot;,&quot;value&quot;:&quot;get-your-rest-api-gui-online-from-us2999-per-month&quot;,&quot;isDelete&quot;:false},{&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: How to Build a REST API GUI&quot;,&quot;value&quot;:&quot;resources-and-downloads-how-to-build-a-rest-api-gui&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Download the Finished Application&quot;,&quot;value&quot;:&quot;download-the-finished-application&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;CSV File&quot;,&quot;value&quot;:&quot;csv-file&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;JavaScript Functions&quot;,&quot;value&quot;:&quot;javascript-functions&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Video: Develop a REST API GUI&quot;,&quot;value&quot;:&quot;video-develop-a-rest-api-gui&quot;,&quot;isDelete&quot;:false},{&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: Data &gt; Connection Wizard: Adding an API As a Data Source&quot;,&quot;value&quot;:&quot;step-8-data-connection-wizard-adding-an-api-as-a-data-source&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 9: Visual &gt; Form Wizard: Creating a Form on the API&quot;,&quot;value&quot;:&quot;step-9-visual-form-wizard-creating-a-form-on-the-api&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Third Checkpoint: Run Your Application&quot;,&quot;value&quot;:&quot;third-checkpoint-run-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 10: Logic &gt; Functions: Adding JavaScript Functions to the Application&quot;,&quot;value&quot;:&quot;step-10-logic-functions-adding-javascript-functions-to-the-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Explainer: Understanding the Five API&quot;,&quot;value&quot;:&quot;explainer-understanding-the-five-api&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 11: Visual &gt; Forms: Adding a Button to a Form&quot;,&quot;value&quot;:&quot;step-11-visual-forms-adding-a-button-to-a-form&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Fourth Checkpoint: Run Your Application&quot;,&quot;value&quot;:&quot;fourth-checkpoint-run-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Next Steps: Creating Charts and Reports or Adding Logins to Your Application&quot;,&quot;value&quot;:&quot;next-steps-creating-charts-and-reports-or-adding-logins-to-your-application&quot;,&quot;isDelete&quot;:true},{&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;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}]\" data-smooth=\"true\" data-top-offset=\"\"><div class=\"eb-toc__list-wrap\"><ul class=\"eb-toc__list\"><li><a href=\"#goals-and-outcomes-how-to-develop-a-rest-api-gui\">Goals and Outcomes: How to Develop a REST API GUI<\/a><li><a href=\"#get-your-rest-api-gui-online-from-us2999-per-month\">Get Your REST API GUI Online From US$29.99 Per Month<\/a><li><a href=\"#resources-and-downloads-how-to-build-a-rest-api-gui\">Resources and Downloads: How to Build a REST API GUI<\/a><li><a href=\"#video-develop-a-rest-api-gui\">Video: Develop a REST API GUI<\/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-8-data-connection-wizard-adding-an-api-as-a-data-source\">Step 8: Data &gt; Connection Wizard: Adding an API As a Data Source<\/a><li><a href=\"#step-9-visual-form-wizard-creating-a-form-on-the-api\">Step 9: Visual &gt; Form Wizard: Creating a Form on the API<\/a><li><a href=\"#third-checkpoint-run-your-application\">Third Checkpoint: Run Your Application<\/a><li><a href=\"#step-10-logic-functions-adding-javascript-functions-to-the-application\">Step 10: Logic &gt; Functions: Adding JavaScript Functions to the Application<\/a><li><a href=\"#explainer-understanding-the-five-api\">Explainer: Understanding the Five API<\/a><li><a href=\"#step-11-visual-forms-adding-a-button-to-a-form\">Step 11: Visual &gt; Forms: Adding a Button to a Form<\/a><li><a href=\"#fourth-checkpoint-run-your-application\">Fourth Checkpoint: Run Your Application<\/a><li><a href=\"#finding-help-in-five\">Finding Help in Five<\/a><\/ul><\/div><\/div><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\" id=\"get-your-app-online-for-us-29-99-per-month\">Get Your REST API GUI Online From 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 to the web, 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\">Resources and Downloads: How to Build a REST API GUI<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Download the Finished Application<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the finished application as a Five Definition File (FDF) and <a href=\"https:\/\/www.youtube.com\/watch?v=tq7ULfWFfu0\" rel=\"nofollow noopener\" target=\"_blank\">import it into Five<\/a>. Once imported, run the application by clicking the &#8220;Deploy to Development&#8221; button, located in the top-right corner of Five.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-9701676e-7d1f-4dc5-b3bc-ae53036abaa9\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/API-GUI.fdf\">API-GUI<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/API-GUI.fdf\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-9701676e-7d1f-4dc5-b3bc-ae53036abaa9\" download>Download<\/a><\/div>\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-afd3bf16-c10e-41a7-a0c7-d6f93c0a17ca\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/product_data-1-1.csv\">product_data-1-1<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/product_data-1-1.csv\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-afd3bf16-c10e-41a7-a0c7-d6f93c0a17ca\" download>Download<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"java-script-function\">JavaScript Functions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the JavaScript functions here.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-2a321039-39db-4017-b108-2d66a4df1e00\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/OnPressDataExtract.txt\">OnPressDataExtract<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/OnPressDataExtract.txt\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-2a321039-39db-4017-b108-2d66a4df1e00\" download>Download<\/a><\/div>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-f26b2fdd-66b7-4e22-8b7f-1df58918a58d\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ExtractData.txt\">ExtractData<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ExtractData.txt\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-f26b2fdd-66b7-4e22-8b7f-1df58918a58d\" download>Download<\/a><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Video: Develop a REST API GUI<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow this video to develop a REST API GUI in Five (fast forward to 9 minutes to skip the introduction):<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Webinar: How To Build Responsive Web Apps With Five In Record Time\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/RWmChSlAP2w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-creating-a-new-application\">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. Click on the Run \u25b6\ufe0f icon in the top right corner. 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\/2023\/01\/Five.Co-Run-Your-Application.png\" alt=\"Five.Co-Run-Your-Application\" class=\"wp-image-742\"\/><figcaption class=\"wp-element-caption\"><em>Image 2.1: 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.<\/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. 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. To add fields to a table, click on the <strong>Plus <\/strong>\u2795 icon on the 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>Brand<\/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\">3.4. Once your <strong>Product<\/strong> table looks exactly as shown below, 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=\"652\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-63-1024x652.png\" alt=\"\" class=\"wp-image-2493\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-63-1024x652.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-63-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-63-768x489.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-63-1536x978.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-63.png 1766w\" 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<h3 class=\"wp-block-heading\" id=\"the-orders-table\">The Orders Table<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">3.5. Here 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><\/td><td>_Date<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3.6. Once your <strong>Orders <\/strong>table looks exactly as shown below, 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 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 exactly as shown below, 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:<\/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. Our query and report, which will be developed later, refer to the field names shown above.<\/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.<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. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what your CSV import should look like:<\/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-64-1024x649.png\" alt=\"\" class=\"wp-image-2494\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-64-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-64-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-64-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-64-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-64.png 1774w\" 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\">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 steps above for <strong>Orders<\/strong> 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-and-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<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 of the ProductOrders form<\/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\" 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\">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:<\/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 application for the first time. 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). Check out the <strong>filter and search bar<\/strong> above your products, for example.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Data &gt; Connection Wizard: Adding an API As a Data Source<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Note: The &#8216;Connection Wizard&#8217; menu is not available in the basic version. <a href=\"https:\/\/preview-php85.dzine.org\/five\/upgrade-payment\/\" target=\"_blank\" rel=\"noreferrer noopener\">Upgrade your Five account here.<\/a><\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We will now use Five&#8217;s <strong>Connection Wizard <\/strong>to connect Five to an external API. Once the API is connected to Five, it can be used as a data source inside of Five.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8.1. Click on <strong>Data &gt; Connection Wizard<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"190\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-1024x190.png\" alt=\"\" class=\"wp-image-2495\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-1024x190.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-300x56.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-768x143.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-1536x285.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.1: The Connection 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\">8.2. Next, click on <strong>Read List Mapping<\/strong> inside the <strong>Connection Wizard.<\/strong><br>8.3. We will use the DummyJSON API available here: <a href=\"https:\/\/dummyjson.com\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dummyjson.com\/<\/a><br>8.4. Inside <strong>Read List Mapping, <\/strong>paste the URL for the get all products request: <code>https:\/\/dummyjson.com\/products<\/code><br>8.5. Click on <strong>Send.<\/strong> Five now shows you the API&#8217;s response: a list of products in JSON format.<\/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-66-1024x651.png\" alt=\"\" class=\"wp-image-2496\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66.png 1770w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.2: Once the API URL has been filled in, click on Send to get a response<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">8.6. Click on <strong>Field Mapping<\/strong> to understand how Five treats the API response: Five maps the fields from the API response into fields, and tries to identify the primary key of the data. <br>8.7. Inside the <strong>Field Mapping,<\/strong> change the <strong>Default Display Type<\/strong> of the <strong>&#8220;products&#8221;[].&#8221;description&#8221;<\/strong> field to <strong>_Memo<\/strong>.<br>8.8. Make sure that the <strong>id <\/strong>field is selected as the <strong>Primary Key.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"646\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-1024x646.png\" alt=\"\" class=\"wp-image-2497\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-1024x646.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-300x189.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-768x485.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-1536x969.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-2048x1292.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.3: Field Mapping Inside the Connection 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\">8.9. Next, click on <strong>Read Single Mapping.<\/strong><br>8.10. Inside <strong>Read Single Mapping, <\/strong>paste the URL for the get single product request: <code>https:\/\/dummyjson.com\/products<\/code>\/:id<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8.10.1 &#8211; In the PATH VARIABLES, add 1 to the field Value, this will make the &#8220;:id&#8221; in the URL to be replaced by the value 1.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8.10.2 &#8211; Click on <strong>Send.<\/strong> Five now shows you the API&#8217;s response: a list of products in JSON format.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"492\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/11\/image-2-1024x492.png\" alt=\"\" class=\"wp-image-4363\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/11\/image-2-1024x492.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/11\/image-2-300x144.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/11\/image-2-768x369.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/11\/image-2-1536x737.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/11\/image-2.png 1912w\" 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\">8.11. Click on <strong>General<\/strong>.<br>8.12. In the <strong>WebService <\/strong>dropdown, select <strong>New.<\/strong><br>8.13. Fill in the required fields. Write <strong>DummyJSON<\/strong> into the <strong>WebService ID<\/strong> field, and <strong>ProductsAPI<\/strong> into the <strong>Name<\/strong> field.<br>8.14. Here&#8217;s what your API connection should look like. 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-67-1024x649.png\" alt=\"\" class=\"wp-image-2498\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67.png 1774w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.4: The General Settings of the API Connection<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">To confirm that your API has been set up as a data source in Five correctly, click on <strong>Data <\/strong>in the top navigation, and then on <strong>Connections. <\/strong>Your API connection should now appear in the list of connections.<\/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\">Step 9: Visual &gt; Form Wizard: Creating a Form on the API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">9.1. Click on <strong>Visual &gt; Form Wizard.<\/strong><br>9.2. Select <strong>ProductsAPI <\/strong>as the data source.<br>9.3. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/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=\"second-checkpoint-run-your-application\">Third Checkpoint: Run Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s time to run your application again. 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. On the left, you should now see a new menu item called <strong>ProductsAPIs<\/strong>. By clicking on the menu item, users can see all of the API&#8217;s data in a form created by Five. <\/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\/Five.Co-API-App-with-ProductsAPIs-1024x651.png\" alt=\"\" class=\"wp-image-2499\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-API-App-with-ProductsAPIs-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-API-App-with-ProductsAPIs-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-API-App-with-ProductsAPIs-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-API-App-with-ProductsAPIs-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-API-App-with-ProductsAPIs-2048x1301.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Next up, we want to build a feature that extracts product data from the API and stores the data in the <strong>Product <\/strong>database table.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 10: Logic &gt; Functions: Adding JavaScript Functions to the Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We will now add two JavaScript functions to our application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">10.1. Click on <strong>Logic &gt; Code Editor.<\/strong><br>10.2. Click on the <strong>Plus <\/strong>icon to <strong>Add New Code.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"654\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-68-1024x654.png\" alt=\"\" class=\"wp-image-2500\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-68-1024x654.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-68-300x192.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-68-768x490.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-68-1536x981.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-68.png 1762w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 10.1: To add a function to Five, click on the Plus button in the Code Editor<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">10.3. The first function we add to our application is called <strong>OnPressExtractData. <\/strong>Put this into the <strong>FunctionID <\/strong>field.<br>10.4. Paste this code into Five&#8217;s <strong>Code Editor.<\/strong><\/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=\"function OnPressExtractData(five, context, result) {\n    let variables = {\n        form: five.form\n    }\n    const functionName = 'ExtractData';\n    five.executeFunction(functionName, variables, null, null, null, function (result) {\n        \n    });\n    return five.success(result);\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\">function<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">OnPressExtractData<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75; font-style: italic\">five<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">context<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">result<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">let<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">variables<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #E06C75\">form<\/span><span style=\"color: #ABB2BF\">: <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">form<\/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\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">functionName<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">&#39;ExtractData&#39;<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">executeFunction<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">functionName<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75\">variables<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #D19A66\">null<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #D19A66\">null<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #D19A66\">null<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #C678DD\">function<\/span><span style=\"color: #ABB2BF\"> (<\/span><span style=\"color: #E06C75; font-style: italic\">result<\/span><span style=\"color: #ABB2BF\">) {<\/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\">    <\/span><span style=\"color: #C678DD\">return<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">success<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">result<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">10.5. Click on <strong>Add New Code<\/strong> again to add a second function.<br>10.6. Call the function <strong>ExtractData <\/strong>in the <strong>FunctionID<\/strong> field.<br>10.4. Paste this JavaScript function into Five&#8217;s <strong>Code Editor<\/strong>.<\/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=\"function ExtractData(five, context, result) {\n    const form = context.form.ProductsAPIs;\n    const name = form.title;\n    const price = form.price;\n    const rating = form.rating;\n    const brand = form.brand;\n    const guid = five.uuid();\n    let sql = 'INSERT INTO Product(ProductKey,Name,Price,Rating,brand) VALUES(?,?,?,?,?)'\n    let queryResults = five.executeQuery(sql,0,guid,name,price,rating,brand);\n    five.log(JSON.stringify(queryResults));\n    if (!queryResults.isOk()) {\n            return five.createError(queryResults);\n    }\n    five.showMessage(&quot;Data Extracted Succesfully&quot;)\n    return five.success(result);\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\">function<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">ExtractData<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75; font-style: italic\">five<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">context<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">result<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">form<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">context<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E5C07B\">form<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">ProductsAPIs<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">name<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">form<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">title<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">price<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">form<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">price<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">rating<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">form<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">rating<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">brand<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">form<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">brand<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">guid<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">uuid<\/span><span style=\"color: #ABB2BF\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">let<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">sql<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">&#39;INSERT INTO Product(ProductKey,Name,Price,Rating,brand) VALUES(?,?,?,?,?)&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">let<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">queryResults<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">executeQuery<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">sql<\/span><span style=\"color: #ABB2BF\">,<\/span><span style=\"color: #D19A66\">0<\/span><span style=\"color: #ABB2BF\">,<\/span><span style=\"color: #E06C75\">guid<\/span><span style=\"color: #ABB2BF\">,<\/span><span style=\"color: #E06C75\">name<\/span><span style=\"color: #ABB2BF\">,<\/span><span style=\"color: #E06C75\">price<\/span><span style=\"color: #ABB2BF\">,<\/span><span style=\"color: #E06C75\">rating<\/span><span style=\"color: #ABB2BF\">,<\/span><span style=\"color: #E06C75\">brand<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">log<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E5C07B\">JSON<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">stringify<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">queryResults<\/span><span style=\"color: #ABB2BF\">));<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">if<\/span><span style=\"color: #ABB2BF\"> (<\/span><span style=\"color: #56B6C2\">!<\/span><span style=\"color: #E5C07B\">queryResults<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">isOk<\/span><span style=\"color: #ABB2BF\">()) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            <\/span><span style=\"color: #C678DD\">return<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">createError<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">queryResults<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">showMessage<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&quot;Data Extracted Succesfully&quot;<\/span><span style=\"color: #ABB2BF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">return<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">success<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">result<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">10.5. Click on <strong>Save All Tabs<\/strong>, indicated by a double tick icon \u2714\ufe0f\u2714\ufe0f to save both functions.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"634\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Editor-Storing-Functions-1024x634.png\" alt=\"Five.Co - Code Editor - Storing Functions\" class=\"wp-image-2501\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Editor-Storing-Functions-1024x634.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Editor-Storing-Functions-300x186.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Editor-Storing-Functions-768x475.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Editor-Storing-Functions-1536x950.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Editor-Storing-Functions-2048x1267.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 10.2: Storing your Functions in Five<\/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\">Explainer: Understanding the Five API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Our second function, the <strong>ExtractData<\/strong> function uses the Five API. The Five API lets you interact with Five when adding code to your application. For example, <code>five.showMessage(\"Message Body\")<\/code> triggers a pop-up message in your end-user application. There are many other useful commands, such as <code>five.now()<\/code>, which inserts the current universal time into a date field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a full list of supported commands<a href=\"https:\/\/help.five.org\/2.6\/docs\/api\/introduction\/\" rel=\"nofollow noopener\" target=\"_blank\"> visit our documentation<\/a>.<\/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\">Step 11: Visual &gt; Forms: Adding a Button to a Form<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s add a button to our ProductsAPIs form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">11.1. Click on <strong>Visual &gt; Forms.<\/strong><br>11.2. Now, click on <strong>ProductsAPIs<\/strong> in the list.<br>11.3. On the right side of the screen, click on <strong>Pages.<\/strong><br>11.4. Click on <strong>General.<\/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\/Five.Co-Forms-Pages-General-1024x650.png\" alt=\"\" class=\"wp-image-2502\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Forms-Pages-General-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Forms-Pages-General-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Forms-Pages-General-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Forms-Pages-General-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Forms-Pages-General-2048x1299.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 11.1: Go to the ProductsAPIs Form, click on Pages, and then on General<\/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.5. Now, click on <strong>Fields.<\/strong><br>11.6. Click on the <strong>Plus icon <\/strong>on the right side of the screen to <strong>Add Fields.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"623\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-New-Field-to-a-Form-1024x623.png\" alt=\"\" class=\"wp-image-2503\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-New-Field-to-a-Form-1024x623.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-New-Field-to-a-Form-300x183.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-New-Field-to-a-Form-768x468.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-New-Field-to-a-Form-1536x935.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-New-Field-to-a-Form-2048x1247.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 11.2: Adding a New Field to a 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\">You can now configure your new field. <br>11.7. From the <strong>Display Type <\/strong>drop-down, select <strong>_Button.<\/strong><br>11.8. Write <strong>Push Into DB<\/strong> as <strong>Caption, <\/strong>and <strong>ExtractButton<\/strong> as <strong>Field ID.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"647\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-69-1024x647.png\" alt=\"\" class=\"wp-image-2504\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-69-1024x647.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-69-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-69-768x485.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-69-1536x971.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-69.png 1780w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 11.3: Creating a Button 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\">11.9. Click on <strong>Events.<\/strong><br>11.10. Select the <strong>OnPressDataExtract<\/strong> for the <strong>OnClick <\/strong>event. This associates our function with the event of clicking the button.<\/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\/Five.Co-Adding-a-Function-to-a-On-Click-Event-1024x651.png\" alt=\"\" class=\"wp-image-2505\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-Function-to-a-On-Click-Event-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-Function-to-a-On-Click-Event-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-Function-to-a-On-Click-Event-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-Function-to-a-On-Click-Event-1536x977.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Adding-a-Function-to-a-On-Click-Event-2048x1302.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 11.4: Adding an OnClick Event to a 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\">11.11. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save. <br>11.12. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save again.<\/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=\"second-checkpoint-run-your-application\">Fourth Checkpoint: Run Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s time to run your application again. 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\">1. Click on the <strong>ProductsAPIs <\/strong>menu item in your end-user application. <br>2. Select any product shown in the list, such as Samsung Universe 9, for example. Once you have clicked on the product, you can see its details. At the bottom of its details, the button that we have just added to our form is now visible with the caption <strong>Push Into DB. <\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"659\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-1024x659.png\" alt=\"\" class=\"wp-image-2506\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-1024x659.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-300x193.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-768x495.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-1536x989.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Click the <strong>Push Into DB <\/strong>button for several products to push products from the API into your database<\/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. Click this button to extract data from your API and push it into your database. Do this for a few products.<br>4. Next, click on <strong>Products<\/strong> in your end-user application. <br>Confirm that the products that you have pushed from the API into your database appear in your list of products stored inside your database. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Congratulations! You have successfully built an app with two data sources: a MySQL database and an API, and you have successfully created a mechanism to push products from the API into your database!<\/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\">Next Steps: Creating Charts and Reports or Adding Logins to Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Continue from here by writing SQL queries, developing charts or PDF reports for your applications, or by adding user logins, roles, and permissions to your application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To learn more about all of these features, <a href=\"https:\/\/preview-php85.dzine.org\/five\/code-along\/acs-masterclass\">visit our step-by-step guide here<\/a>. <strong>Our recommendation: <\/strong>continue from <strong>Step 8.B.: Data &gt; Queries: Write SQL In Five<\/strong>. <\/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<h2 class=\"wp-block-heading\" id=\"get-your-app-online-for-us-29-99-per-month-1\">Get Your App Online For 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\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Subscribe Now<\/strong><\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hi and welcome to our step-by-step guide on building your first web app with Five. Follow the steps below to build a responsive web app on a REST API and MySQL database in Five. Goals and Outcomes: How to Develop a REST API GUI By the end of this step-by-step guide, we have developed a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2511,"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-2492","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\/02\/Five.Co-Code-Along-How-to-Develop-a-REST-API-GUI.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Along-How-to-Develop-a-REST-API-GUI-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Along-How-to-Develop-a-REST-API-GUI-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Along-How-to-Develop-a-REST-API-GUI-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Along-How-to-Develop-a-REST-API-GUI-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Along-How-to-Develop-a-REST-API-GUI.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Code-Along-How-to-Develop-a-REST-API-GUI.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":"Hi and welcome to our step-by-step guide on building your first web app with Five. Follow the steps below to build a responsive web app on a REST API and MySQL database in Five. Goals and Outcomes: How to Develop a REST API GUI By the end of this step-by-step guide, we have developed a&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2492","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=2492"}],"version-history":[{"count":1,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2492\/revisions"}],"predecessor-version":[{"id":17496,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2492\/revisions\/17496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/2511"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=2492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=2492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=2492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}