{"id":1452,"date":"2024-02-05T16:05:00","date_gmt":"2024-02-05T08:05:00","guid":{"rendered":"https:\/\/five.co\/?p=1452"},"modified":"2026-03-16T09:35:21","modified_gmt":"2026-03-16T01:35:21","slug":"excel-to-web-app","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/excel-to-web-app\/","title":{"rendered":"Excel to Web App [Quick, Easy &#038; Free 3-Step Tutorial]"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"convert-your-excel-spreadsheet-into-a-web-application-excel-to-web-app-part-1\">Convert Your Excel Spreadsheet into a Web Application [Excel to Web App &#8211; Part 1]<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Are you planning to go from Excel spreadsheet to web app? <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a quick and easy tutorial explaining how to convert an Excel spreadsheet into a web application. We will be using Five&#8217;s free trial to build our prototype application &#8211; so before we get started, make sure to <a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\" data-type=\"URL\" data-id=\"https:\/\/preview-php85.dzine.org\/five\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">sign up<\/a> for a free trial.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This beginner&#8217;s guide does not require a background in coding. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s go!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"root-eb-toc-nh25m5f wp-block-essential-blocks-table-of-contents\"><div class=\"eb-parent-wrapper eb-parent-eb-toc-nh25m5f \"><div class=\"eb-toc-container eb-toc-nh25m5f  eb-toc-is-not-sticky eb-toc-not-collapsible eb-toc-initially-not-collapsed eb-toc-scrollToTop style-1 list-style-none\" data-scroll-top=\"false\" data-scroll-top-icon=\"fas fa-angle-up\" data-collapsible=\"false\" data-sticky-hide-mobile=\"false\" data-sticky=\"false\" data-scroll-target=\"scroll_to_toc\" data-copy-link=\"false\" data-editor-type=\"\" data-hide-desktop=\"false\" data-hide-tab=\"false\" data-hide-mobile=\"false\" data-itemcollapsed=\"false\" data-highlight-scroll=\"false\"><div class=\"eb-toc-header\"><h2 class=\"eb-toc-title\">Table of Contents<\/h2><\/div><div class=\"eb-toc-wrapper \" data-headers=\"[{&quot;level&quot;:2,&quot;content&quot;:&quot;Convert Your Excel Spreadsheet into a Web Application [Excel to Web App - Part 1]&quot;,&quot;text&quot;:&quot;Convert Your Excel Spreadsheet into a Web Application [Excel to Web App - Part 1]&quot;,&quot;link&quot;:&quot;eb-table-content-0&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;\\n        Ready to Convert Your Spreadsheet to a Web App?\\n    &quot;,&quot;text&quot;:&quot;\\n        Ready to Convert Your Spreadsheet to a Web App?\\n    &quot;,&quot;link&quot;:&quot;ready-to-convert-your-spreadsheet-to-a-web-app&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Convert Your Spreadsheet Into a Beautiful Web App&quot;,&quot;text&quot;:&quot;Convert Your Spreadsheet Into a Beautiful Web App&quot;,&quot;link&quot;:&quot;convert-your-spreadsheet-into-a-beautiful-web-app&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 1: Clean Up Your Spreadsheet&quot;,&quot;text&quot;:&quot;Step 1: Clean Up Your Spreadsheet&quot;,&quot;link&quot;:&quot;step-1-clean-up-your-spreadsheet&quot;},{&quot;level&quot;:4,&quot;content&quot;:&quot;Expert Tip: Useful Excel Commands For Cleaning Up Your Spreadsheet&quot;,&quot;text&quot;:&quot;Expert Tip: Useful Excel Commands For Cleaning Up Your Spreadsheet&quot;,&quot;link&quot;:&quot;expert-tip-useful-excel-commands-for-cleaning-up-your-spreadsheet&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 2: Setting Up Your Database and Importing Data&quot;,&quot;text&quot;:&quot;Step 2: Setting Up Your Database and Importing Data&quot;,&quot;link&quot;:&quot;step-2-setting-up-your-database-and-importing-data&quot;},{&quot;level&quot;:4,&quot;content&quot;:&quot;1. Create a New Application in Five&quot;,&quot;text&quot;:&quot;1. Create a New Application in Five&quot;,&quot;link&quot;:&quot;1-create-a-new-application-in-five&quot;},{&quot;level&quot;:4,&quot;content&quot;:&quot;2. Create Your Database and Import Data&quot;,&quot;text&quot;:&quot;2. Create Your Database and Import Data&quot;,&quot;link&quot;:&quot;2-create-your-database-and-import-data&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 3: Adding a Form and Previewing Your Application&quot;,&quot;text&quot;:&quot;Step 3: Adding a Form and Previewing Your Application&quot;,&quot;link&quot;:&quot;step-3-adding-a-form-and-previewing-your-application&quot;},{&quot;level&quot;:4,&quot;content&quot;:&quot;1. Adding a Form&quot;,&quot;text&quot;:&quot;1. Adding a Form&quot;,&quot;link&quot;:&quot;1-adding-a-form&quot;},{&quot;level&quot;:4,&quot;content&quot;:&quot;2. Preview Your Application&quot;,&quot;text&quot;:&quot;2. Preview Your Application&quot;,&quot;link&quot;:&quot;2-preview-your-application&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Excel to Web App: Next Steps&quot;,&quot;text&quot;:&quot;Excel to Web App: Next Steps&quot;,&quot;link&quot;:&quot;excel-to-web-app-next-steps&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;},{&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;}]\" data-visible=\"[true,true,true,true,true,true]\" data-delete-headers=\"[{&quot;label&quot;:&quot;Convert Your Excel Spreadsheet into a Web Application [Excel to Web App - Part 1]&quot;,&quot;value&quot;:&quot;convert-your-excel-spreadsheet-into-a-web-application-[excel-to-web-app-part-1]&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;\\n        Ready to Convert Your Spreadsheet to a Web App?\\n    &quot;,&quot;value&quot;:&quot;ready-to-convert-your-spreadsheet-to-a-web-app&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Convert Your Spreadsheet Into a Beautiful Web App&quot;,&quot;value&quot;:&quot;convert-your-spreadsheet-into-a-beautiful-web-app&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 1: Clean Up Your Spreadsheet&quot;,&quot;value&quot;:&quot;step-1-clean-up-your-spreadsheet&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Expert Tip: Useful Excel Commands For Cleaning Up Your Spreadsheet&quot;,&quot;value&quot;:&quot;expert-tip-useful-excel-commands-for-cleaning-up-your-spreadsheet&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 2: Setting Up Your Database and Importing Data&quot;,&quot;value&quot;:&quot;step-2-setting-up-your-database-and-importing-data&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;1. Create a New Application in Five&quot;,&quot;value&quot;:&quot;1-create-a-new-application-in-five&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;2. Create Your Database and Import Data&quot;,&quot;value&quot;:&quot;2-create-your-database-and-import-data&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 3: Adding a Form and Previewing Your Application&quot;,&quot;value&quot;:&quot;step-3-adding-a-form-and-previewing-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;1. Adding a Form&quot;,&quot;value&quot;:&quot;1-adding-a-form&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;2. Preview Your Application&quot;,&quot;value&quot;:&quot;2-preview-your-application&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Excel to Web App: Next Steps&quot;,&quot;value&quot;:&quot;excel-to-web-app-next-steps&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Finding Help in Five&quot;,&quot;value&quot;:&quot;finding-help-in-five&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Five&apos;s In-App Help&quot;,&quot;value&quot;:&quot;fives-in-app-help&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;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;: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}]\" data-smooth=\"true\" data-top-offset=\"\"><div class=\"eb-toc__list-wrap\"><ul class=\"eb-toc__list\"><li><a href=\"#ready-to-convert-your-spreadsheet-to-a-web-app\">\n        Ready to Convert Your Spreadsheet to a Web App?\n    <\/a><li><a href=\"#convert-your-spreadsheet-into-a-beautiful-web-app\">Convert Your Spreadsheet Into a Beautiful Web App<\/a><ul class=\"eb-toc__list\"><li><a href=\"#step-1-clean-up-your-spreadsheet\">Step 1: Clean Up Your Spreadsheet<\/a><li><a href=\"#step-2-setting-up-your-database-and-importing-data\">Step 2: Setting Up Your Database and Importing Data<\/a><li><a href=\"#step-3-adding-a-form-and-previewing-your-application\">Step 3: Adding a Form and Previewing Your Application<\/a><li><a href=\"#excel-to-web-app-next-steps\">Excel to Web App: Next Steps<\/a><\/li><\/ul><li><a href=\"#finding-help-in-five\">Finding Help in Five<\/a><li><a href=\"#get-your-app-online-for-us2999-per-month\">Get Your App Online For US$29.99 Per Month<\/a><\/ul><\/div><\/div><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"background-color: #001524; border-radius: 10px; padding: 30px; margin: 40px 0; text-align: center; border: 1px solid rgba(248, 185, 43, 0.3);\">\r\n    <h3 style=\"color: #f8b92b; margin-top: 0; font-size: 1.4rem; font-weight: 600; margin-bottom: 15px;\">\r\n        Ready to Convert Your Spreadsheet to a Web App?\r\n    <\/h3>\r\n    <p style=\"color: #f1ebda; font-size: 1.1rem; line-height: 1.6; max-width: 700px; margin: 0 auto 25px;\">\r\n        Transform your Excel files into powerful, secure web applications without the coding headache. Our experts will convert your spreadsheet with:\r\n    <\/p>\r\n    \r\n    <div style=\"display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 25px;\">\r\n        <div style=\"background: rgba(248, 185, 43, 0.15); color: #f8b92b; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 500;\">\r\n            \u2713 Cloud accessibility\r\n        <\/div>\r\n        <div style=\"background: rgba(248, 185, 43, 0.15); color: #f8b92b; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 500;\">\r\n            \u2713 Multi-user collaboration\r\n        <\/div>\r\n        <div style=\"background: rgba(248, 185, 43, 0.15); color: #f8b92b; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 500;\">\r\n            \u2713 Automated data processing\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <a href=\"https:\/\/preview-php85.dzine.org\/five\/services\/spreadsheet-conversion\/\" \r\n       style=\"display: inline-block; background-color: #f8b92b; color: #001524; text-decoration: none; padding: 14px 28px; border-radius: 6px; font-weight: 700; font-size: 1.1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 12px rgba(248, 185, 43, 0.3);\">\r\n       Convert Your Spreadsheet Now \u2192\r\n    <\/a>\r\n    \r\n    <p style=\"color: rgba(241, 235, 218, 0.8); font-size: 0.9rem; margin-top: 20px; margin-bottom: 0;\">\r\n        Free consultation &#038; fixed-price quote\r\n    <\/p>\r\n<\/div>\n\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=\"convert-your-spreadsheet-into-a-beautiful-web-app\">Convert Your Spreadsheet Into a Beautiful Web App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This blog post is part 1 of a 5-part series on converting Excel spreadsheets to web apps. To view the other parts, follow the links here:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/add-a-calculation-to-your-web-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">Part 2: Excel to Web App &#8211; Calculating a Field<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/make-your-application-look-good-themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">Part 3: Excel to Web App &#8211; Adding a Theme<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-make-a-multiuser-app-in-2-steps\/\" target=\"_blank\" rel=\"noreferrer noopener\">Part 4: Excel to Web App &#8211; Adding Logins to Your App<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/charts-dashboards\/\" target=\"_blank\" rel=\"noreferrer noopener\">Part 5: Excel to Web App &#8211; Creating Charts and Dashboards<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-clean-up-your-spreadsheet\">Step 1: Clean Up Your Spreadsheet<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Before we start building our web app, our Excel spreadsheet must store data in the correct format. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To do so, ensure that your spreadsheet&#8217;s first row contains descriptive names of the data stored in each column.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, let&#8217;s say your spreadsheet contains information on <strong>Products, Prices, and Quantities.<\/strong> Here&#8217;s what your Excel spreadsheet should look like:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Product<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Price<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Quantity<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Product 1<\/td><td class=\"has-text-align-center\" data-align=\"center\">4.99<\/td><td class=\"has-text-align-center\" data-align=\"center\">100<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Product 2<\/td><td class=\"has-text-align-center\" data-align=\"center\">5.99<\/td><td class=\"has-text-align-center\" data-align=\"center\">4<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Product 3<\/td><td class=\"has-text-align-center\" data-align=\"center\">100.99<\/td><td class=\"has-text-align-center\" data-align=\"center\">58<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Unfortunately, the real world is rarely as well-structured as this spreadsheet. So here are a few points to note:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. If your plan is to import data , make sure that your header row (row 1) only contains descriptive names for what is stored in each column. <\/strong><br>In our case, our header row contains <strong>Product<\/strong>, <strong>Price<\/strong>, and <strong>Quantity<\/strong>. Pick descriptive names for your columns and avoid adding unnecessary additional content. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Do not repeat the same information in multiple columns. <\/strong><br>For example, it is not advisable to have one column for &#8220;<strong>Products (non-perishable)<\/strong>&#8221; and another column for &#8220;<strong>Products (perishable)<\/strong>&#8220;. Instead, have one column for &#8220;<strong>Product<\/strong>&#8220;, which lists all your products. Then, add another column that classifies each product as &#8220;<strong>Perishable&#8221; <\/strong>or <strong>&#8220;Non-Perishable&#8221;. <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Make sure that each cell only contains one piece of data. <\/strong><br>For example, in the table above, it might be tempting to add information about discounts to our pricing column, such as &#8220;<strong>5.99 (discounted to 4.99)<\/strong>&#8220;. Don&#8217;t. If you do so, this data point is no longer usable in a calculation. Always make sure that every <strong>column <\/strong>only has one <em>type of data <\/em>such as text, numbers, options, or currencies, and that every <strong>record<\/strong> only stores one piece of data. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In our example, the correct way to deal with discounts would be to create three separate columns: Price, Discount and Discounted Price, a calculated field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Even if you have multiple values of the same item, do not put all of them into the same cell. <\/strong><br>For example, sometimes we might have more than one email address for a customer. How should we deal with this scenario in our spreadsheet? The correct way is having multiple &#8220;<strong>Email&#8221;<\/strong> columns, such as &#8220;<strong>Primary Email<\/strong>&#8220;, &#8220;<strong>Secondary Email<\/strong>&#8220;, or &#8220;<strong>Work Email<\/strong>&#8221; and <strong>&#8220;Personal Email&#8221;<\/strong>. Do not store multiple emails in one cell.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-center\" id=\"expert-tip-useful-excel-commands-for-cleaning-up-your-spreadsheet\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Expert Tip: Useful Excel Commands For Cleaning Up Your Spreadsheet<\/mark><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To convert an Excel spreadsheet into a web app without too much trouble, it is worth reviewing your existing data and ensuring it is clean. As the saying goes: a stitch in time saves nine! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are our three favorite Excel functions for cleaning up data:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>TRIM<\/strong>: Excel&#8217;s TRIM function deletes all leading, trailing, and in-between spaces&nbsp;<strong>except for a single space<\/strong>&nbsp;character between words. This works great for misspelled names.<br>Say some of your customers have misspelled their names when signing up on your website, such as &#8220;JohnDoe&#8221;, or &#8220;Jane Doe <strong>\u25a1\u25a1\u25a1<\/strong>&#8220;. The trim function will convert these two entries to &#8220;John Doe&#8221; and &#8220;Jane Doe&#8221;.<br><\/li>\n\n\n\n<li><strong>CLEAN<\/strong>: The CLEAN function removes all nonprintable characters from text. This is useful if your database contains names with special characters that weren&#8217;t pasted correctly into your Excel, or if you have line breaks in your cell. <br><\/li>\n\n\n\n<li><strong>PROPER: <\/strong>The PROPER function&nbsp;converts the first character to upper case and all other characters into lower case. <br>For example, the function will convert &#8220;JOHn DoE&#8221; into &#8220;John Doe&#8221;.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Later in this article, we will introduce you to a few helpful features that will make it easier for you to collect clean data in your web app. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>CHECKLIST:<\/em><\/strong> Does your Excel spreadsheet fulfill the criteria above?<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Question<\/th><th class=\"has-text-align-center\" data-align=\"center\">Status<\/th><\/tr><\/thead><tbody><tr><td>The header row (row 1) only contains descriptive column names?<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u2705<\/td><\/tr><tr><td>Every column contains unique information related to the column header?<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u2705<\/td><\/tr><tr><td>Every cell in the same column contains only one piece of data of the same data type, such as a piece of text, numbers, etc.?<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u2705<\/td><\/tr><tr><td>Multiple data points of the same category are split across multiple columns?<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u2705<\/td><\/tr><tr><td>Your data has been cleaned up using some of Excel&#8217;s built-in functions?<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u2705<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If so, it&#8217;s time to move to Step 2 to convert your Excel to a web app: setting up your database.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-setting-up-your-database-and-importing-data\">Step 2: Setting Up Your Database and Importing Data<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks to the work we just did in Step 1, going from Excel to a web app will be much easier. Let&#8217;s move on to Step 2: setting up your database. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Having a database as your <em>application backend <\/em>is a critical step in converting Excel spreadsheets to web apps. We recommend <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/what-is-mysql\/\" data-type=\"post\" data-id=\"774\">MySQL, the world&#8217;s most popular open-source database<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To create our database, we will use Five, which has a handy and easy-to-use visual database designer. Using Five&#8217;s database designer, we can create a database table entirely in point-and-click. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-create-a-new-application-in-five\">1. Create a New Application in Five<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for free access<\/a> to Five. Login to your development environment. You&#8217;ll be greeted by Five&#8217;s welcome screen: <\/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\/2026\/03\/Five.Co-Landing-Page-1024x649.webp\" alt=\"\" class=\"wp-image-17393\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Landing-Page-1024x649.webp 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Landing-Page-300x190.webp 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Landing-Page-768x487.webp 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Landing-Page.webp 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on <strong>Applications<\/strong> near the top left corner of the screen, and right below the hamburger menu icon.<\/li>\n\n\n\n<li>Now, click on the yellow <strong>Plus <\/strong>icon. A new window &#8220;New Applications Record&#8221; will appear.<\/li>\n\n\n\n<li>Give your application a <strong>Title<\/strong>, such as &#8220;<strong>Web App&#8221; <\/strong>or &#8220;<strong>Excel to Web App&#8221;.<\/strong> Feel free to pick something more descriptive for your app. <\/li>\n\n\n\n<li>Save by clicking the <strong>Tick mark<\/strong> in the top right corner.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what your screen should now look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"646\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-1024x646.png\" alt=\"\" class=\"wp-image-2344\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-1024x646.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-300x189.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-768x485.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-1536x969.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-2048x1292.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<h4 class=\"wp-block-heading\" id=\"2-create-your-database-and-import-data\">2. Create Your Database and Import Data<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s time to build your database and import your data. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. To start click the blue <strong>Manage <\/strong>button on the top right of the screen near the Five logo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"646\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-1024x646.png\" alt=\"Five.Co - Excel to Web App - Manage Button\" class=\"wp-image-2344\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-1024x646.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-300x189.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-768x485.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-1536x969.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-2048x1292.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\">2. Now click on <strong>Data<\/strong> and then on <strong>Table Wizard<\/strong>. <\/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\/2023\/08\/Five.Co-Table-Wizard-1024x649.png\" alt=\"Five.Co - Table Wizard\" class=\"wp-image-2087\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Table-Wizard-2048x1298.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s go ahead and create our first database table.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Give your table a <strong>Name<\/strong>. Let&#8217;s go with <strong>Inventory.<\/strong><br>2. Now click on the <strong>Plus <\/strong>icon on the right side of the screen. Click the plus icon four times to create four database fields:<br><strong>Field 1<\/strong> will hold information about our products, so we give it the name <strong>Product <\/strong>and select text as its data type.  <br><strong>Field 2<\/strong> will hold information about <strong>Price<\/strong>. Its data type is <strong>float <\/strong>and its display type is <strong>float.2.<\/strong><br><strong>Field 3<\/strong>, <strong>Quantity<\/strong> is an <strong>integer <\/strong>for its data and display type.<br><strong>Field 4, Total<\/strong> will be used to <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/add-a-calculation-to-your-web-app\/\">perform a calculation in the second part<\/a> of the application development process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Save by clicking the <strong>Tick<\/strong> mark. Before you save, make sure that your table looks exactly as shown on this image:<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img width=\"1024\" height=\"626\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Database-Fields-1024x626.png\" alt=\"\" class=\"wp-image-2345\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Database-Fields-1024x626.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Database-Fields-300x183.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Database-Fields-768x469.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Database-Fields-1536x939.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Database-Fields-2048x1252.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\">4. A popup asking about a <strong>Table Upgrade<\/strong> appears next. Click on <strong>Save.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now let&#8217;s import our data from our Excel spreadsheet. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. First, go to <strong>Data &gt; Tables<\/strong>.<br>6. Now click the <strong>Import CSV into Table <\/strong>icon to get started. It&#8217;s located to the left of the yellow plus icon with a small arrow pointing down into a box. See the image below to find it:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-1024x650.png\" alt=\"Five.Co - Data Import\" class=\"wp-image-2089\" 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\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">To import your data, make sure it is stored in a CSV file. If you&#8217;d like to work with sample data, <a href=\"https:\/\/preview-php85.dzine.org\/five\/download\/source\/Inventory.csv\" target=\"_blank\" rel=\"noreferrer noopener\">download our CSV file here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8. Five&#8217;s <strong>Import<\/strong> <strong>Data<\/strong> feature lets you select the database table you&#8217;d like to import data into. <br>In our case, there is only one table: our <strong>I<b>n<\/b><\/strong><b>ventory<\/b> table. So go ahead and select it from the dropdown box.<br>9. Next, click on <strong>Choose File<\/strong> and find the Inventory.csv file. Upload it.<br>10. Five will automatically map the fields of your CSV file to your database fields, provided you have been following this tutorial and your database fields have the same name as the top row of your CSV file.<br>11. For <strong>InventoryKey<\/strong> select <strong>Generated.<\/strong> Five will now automatically generate a unique primary key for every record in your CSV file.<br>12. For <strong>Total, <\/strong>select <strong>Not Imported<\/strong> from the dropdown box.<br>13. Click on the <strong>Tick<\/strong> mark to upload your data.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"2282\" height=\"1440\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-CSV-Import.png\" alt=\"\" class=\"wp-image-2346\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-CSV-Import.png 2282w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-CSV-Import-300x189.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-CSV-Import-1024x646.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-CSV-Import-768x485.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-CSV-Import-1536x969.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-CSV-Import-2048x1292.png 2048w\" sizes=\"(max-width: 2282px) 100vw, 2282px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Congratulations! You have now created a database table in a MySQL database and have populated it with data! If you require a more complex database structure with multiple tables or relationships,<a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/creating-tables\/\" target=\"_blank\" rel=\"noreferrer noopener\"> follow our how-to articles on database design here.<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the third and last step, we will add a form to our application, and finally launch and preview it.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-adding-a-form-and-previewing-your-application\">Step 3: Adding a Form and Previewing Your Application<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We have already created our application backend: a relational database with a single table that stores information about our products, prices, and quantities. But a database is not a web app. Our database needs a front-end or graphical user interface (GUI) so that users can interact with the data. So in the next step, we will replace the Excel GUI with a web app GUI.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So let&#8217;s move on to step 3 of converting our Excel to a web app.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-adding-a-form\">1. Adding a Form<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Five makes it easy to build a form for your end-users. To get started, click on <strong>Visual<\/strong> and then on <strong>Form<\/strong> <strong>Wizard.<\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-1024x650.png\" alt=\"Five.Co - Form Wizard\" class=\"wp-image-2091\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-2048x1301.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">There&#8217;s only one thing you need to do in the form wizard. Select <strong>Inventory<\/strong> as your Main Table. <br>Save by clicking the <strong>Tick<\/strong> mark.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"656\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-1024x656.png\" alt=\"Five.Co - Form Wizard - Creating a form\" class=\"wp-image-2092\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-1024x656.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-300x192.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-768x492.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-1536x985.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-2048x1313.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">It is time to preview our application! <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2-preview-your-application\">2. Preview Your Application<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the <strong>Run<\/strong> button at the top right corner. If you cannot see the <strong>Run<\/strong> button, you need to activate it first. Here&#8217;s how to do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on <strong>Setup, <\/strong>and then on <strong>Instances.<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"622\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-3-1024x622.png\" alt=\"\" class=\"wp-image-2722\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-3-1024x622.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-3-300x182.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-3-768x466.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-3.png 1380w\" 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\">2. Select the <strong>Default<\/strong> instance, and then click on the <strong>Cloud <\/strong>icon:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"619\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-4-1024x619.png\" alt=\"\" class=\"wp-image-2723\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-4-1024x619.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-4-300x181.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-4-768x464.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-4.png 1380w\" 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\">3. This is the screen that you will see now. To preview your application inside your browser, click the button shown here:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"600\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-5-1024x600.png\" alt=\"\" class=\"wp-image-2724\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-5-1024x600.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-5-300x176.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-5-768x450.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-5.png 1380w\" 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\">4. Launching your application for the first time will take a few seconds. Once launched or <em>deployed<\/em> successfully, your screen will look like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"577\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-6-1024x577.png\" alt=\"\" class=\"wp-image-2725\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-6-1024x577.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-6-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-6-768x433.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/04\/image-6.png 1380w\" 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\">5. Now, click the <strong>Run&nbsp;<\/strong>button to launch and preview your application in your browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"652\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-24-1024x652.png\" alt=\"Five.Co - Excel to Web App - Launching the Application\" class=\"wp-image-1464\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-24-1024x652.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-24-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-24-768x489.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-24-1536x977.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-24.png 1688w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what your application looks like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"655\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-First-Look-at-the-Application-1024x655.png\" alt=\"\" class=\"wp-image-2347\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-First-Look-at-the-Application-1024x655.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-First-Look-at-the-Application-300x192.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-First-Look-at-the-Application-768x491.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-First-Look-at-the-Application-1536x982.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-First-Look-at-the-Application-2048x1310.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\">Five gives you a fully auto-generated front-end, including the form that you have just developed using Five&#8217;s Form Wizard, as well as:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A menu on the left,<\/li>\n\n\n\n<li>A <strong>search bar<\/strong> on the top,<\/li>\n\n\n\n<li>A <strong>filter <\/strong>next to your search to filter through your data, and<\/li>\n\n\n\n<li>The ability to <strong>add, edit, or delete records from your databas<\/strong>e through the graphical user interface.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">In short, we have just created the prototype of a web application that runs on a searchable online database. Our Excel GUI has been successfully replaced by a web-based interface that allows us to interact with our data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To keep building this application, follow the tutorial&#8217;s next steps below.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"excel-to-web-app-next-steps\">Excel to Web App: Next Steps<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Well done! You have successfully built and deployed your first web application in Five. Instead of managing your data in an Excel spreadsheet, you can now use a modern web application to store, retrieve, and process your data. And it took only three steps to go from Excel to web app!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Five&#8217;s prebuilt user interface has automatically created an <strong>Inventories <\/strong>menu item for you. You can also see your <strong>Products<\/strong> in the list to the left of the screen. Last, by selecting one of the products, you can see its details, and make changes to them as necessary. Five also comes with a pre-built <strong>search and filtering<\/strong> feature.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What else can you develop in Five? Plenty of things! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Part 2 of this guide, you will learn how you can add calculations to your application. For example, <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/add-a-calculation-to-your-web-app\/\" target=\"_blank\" data-type=\"post\" data-id=\"2337\" rel=\"noreferrer noopener\">let&#8217;s calculate the <strong>Total<\/strong> field in our form<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also change the design of your application by <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/make-your-application-look-good-themes\/\" target=\"_blank\" data-type=\"post\" data-id=\"2348\" rel=\"noreferrer noopener\">adding a theme to it. This will make your web app look more professional and unique.<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also add a <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-make-a-multiuser-app-in-2-steps\/\" target=\"_blank\" data-type=\"post\" data-id=\"2264\" rel=\"noreferrer noopener\">login and terms &amp; conditions consent screen to your application<\/a> and give users different roles and permissions to access data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/charts-dashboards\/\" data-type=\"post\" data-id=\"2360\">charts or dashboards<\/a>, you can let users perform analytics and provide business intelligence.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Last, you can show your data in an <a href=\"https:\/\/preview-php85.dzine.org\/five\/code-along\/northwind-database-crud-app\/\" target=\"_blank\" data-type=\"post\" data-id=\"976\" rel=\"noreferrer noopener\">editable grid by following our Northwinds tutorial.<\/a> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember how at the top we spoke about capturing clean data? Why not add a few <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/powerful-sql-data-validation-techniques\/\" data-type=\"post\" data-id=\"689\">data validation rules<\/a> to your application? <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In short, we have barely scratched the surface of what&#8217;s possible in Five! For further inspiration on what can be built in Five, <a href=\"https:\/\/preview-php85.dzine.org\/five\/use-cases\/\" target=\"_blank\" data-type=\"page\" data-id=\"1070\" rel=\"noreferrer noopener\">visit our Use Cases<\/a> or keep following our tutorial by <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/add-a-calculation-to-your-web-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">adding a calculation to your application.<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"finding-help-in-five\">Finding Help in Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In case you get stuck during the development process, we&#8217;re here to help! Continue developing your application by accessing these resources:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Five&#8217;s User Community:<\/strong> Visit <a href=\"https:\/\/five.org\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/five.org<\/a> to ask questions or get inspiration from other users.<\/li>\n\n\n\n<li><strong>Five&#8217;s Documentation:<\/strong> Visit <a href=\"http:\/\/help.five.org\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">help.five.org<\/a> to access Five&#8217;s comprehensive documentation.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fives-in-app-help\">Five&#8217;s In-App Help<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Last, find useful tips for your application development by clicking on Five&#8217;s <strong>in-app help <\/strong>available in the top right corner or on almost any field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1024x649.png\" alt=\"\" class=\"wp-image-2490\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-768x486.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1536x973.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-2048x1297.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"get-your-app-online-for-us-29-99-per-month\">Get Your App Online For US$29.99 Per Month<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To deploy your application online, sign up for one of our paid plans, starting from US$29.99 per month and application. <\/p>\n\n\n\n<div class=\"wp-block-essential-blocks-row alignfull  root-eb-row-c68r7p7\"><div class=\"eb-parent-wrapper eb-parent-eb-row-c68r7p7 \"><div class=\"eb-row-root-container eb-row-c68r7p7\" data-id=\"eb-row-c68r7p7\"><div class=\"eb-row-wrapper\"><div class=\"eb-row-inner\">\n<div class=\"wp-block-essential-blocks-column  root-eb-column-rz023j7\"><div class=\"eb-parent-wrapper eb-parent-eb-column-rz023j7 \"><div class=\"eb-column-wrapper eb-column-rz023j7\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox  root-eb-infobox-z6mja1c\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-z6mja1c \"><div class=\"eb-infobox-z6mja1c eb-infobox-wrapper\"><div class=\"infobox-wrapper-inner\"><div class=\"icon-img-wrapper\"><div class=\"eb-icon number-or-icon\"><i icon=\"fas fa-computer\" class=\"fas fa-computer 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. <br><\/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-6duphov\"><div class=\"eb-parent-wrapper eb-parent-eb-column-6duphov \"><div class=\"eb-column-wrapper eb-column-6duphov\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox  root-eb-infobox-dlosnwr\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-dlosnwr \"><div class=\"eb-infobox-dlosnwr eb-infobox-wrapper\"><div class=\"infobox-wrapper-inner\"><div class=\"icon-img-wrapper\"><div class=\"eb-icon number-or-icon\"><i icon=\"fab fa-medapps\" class=\"fab fa-medapps eb-infobox-icon-data-selector\"><\/i><\/div><\/div><div class=\"contents-wrapper\"><h2 class=\"title\">Free Training<\/h2><p class=\"description\">Go from Excel to web app faster. Join our FREE app development training <\/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<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Convert Your Excel Spreadsheet into a Web Application [Excel to Web App &#8211; Part 1] Are you planning to go from Excel spreadsheet to web app? Here&#8217;s a quick and easy tutorial explaining how to convert an Excel spreadsheet into a web application. We will be using Five&#8217;s free trial to build our prototype application [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":17390,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[21],"tags":[],"class_list":["post-1452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Excel-to-Web-App.webp",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Excel-to-Web-App-150x150.webp",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Excel-to-Web-App-300x169.webp",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Excel-to-Web-App-768x432.webp",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Excel-to-Web-App-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Excel-to-Web-App.webp",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2026\/03\/Five.Co-Excel-to-Web-App.webp",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":"Convert Your Excel Spreadsheet into a Web Application [Excel to Web App &#8211; Part 1] Are you planning to go from Excel spreadsheet to web app? Here&#8217;s a quick and easy tutorial explaining how to convert an Excel spreadsheet into a web application. We will be using Five&#8217;s free trial to build our prototype application&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/1452","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=1452"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/1452\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/17390"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=1452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=1452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=1452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}