How to Build an SQLite GUI (Fast & Easy Tutorial)
Tags: sql, gui, tutorial, beginners
Published: 2024-06-30 23:00:42

<!-- wp:heading -->
<h2 class="wp-block-heading">How to Build an SQLite GUI: 4 Steps Only</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this guide, we will walk through the four essential steps to create an <a href="https://www.sqlite.org/">SQLite</a> GUI. These steps include:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li><strong>Creating a new application with Five.</strong></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Connecting to an SQLite database with Five.</strong><br>Five can connect to your existing SQLite database. Just provide a connection string, and Five will enable you to create a <a href="https://five.co/blog/how-to-create-a-database-front-end/">web front-end</a>. Note that this requires a paid subscription to Five.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Creating forms.</strong><br>We will focus on building forms that allow end-users to perform <a href="https://five.co/blog/how-to-build-a-crud-app/">CRUD</a> (Create, Read, Update, Delete) operations on the data in our SQLite database.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Launching the application.</strong><br>Deploy the application locally for free using Five's free download.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>By the end, you'll have a responsive GUI for end-users to interact with your SQLite database.</p>
<!-- /wp:paragraph -->

<!-- wp:essential-blocks/table-of-contents {"blockId":"eb-toc-tmg4m","blockMeta":{"desktop":".eb-toc-tmg4m.eb-toc-container { max-width:610px; background-color:var(\u002d\u002deb-global-background-color); padding:30px; border-radius:4px; transition:all 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s }.eb-toc-tmg4m.eb-toc-container .eb-toc-title { text-align:center; cursor:default; color:rgba(255,255,255,1); background-color:rgba(69,136,216,1); font-size:22px; font-weight:normal }.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper { background-color:rgba(241,235,218,1); text-align:left }.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li { color:rgba(0,21,36,1); font-size:14px; line-height:1.4em; font-weight:normal }.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li:hover,.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li.eb-toc-active \u003e a { color:var(\u002d\u002deb-global-link-color) }.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li a { color:inherit }.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li svg path { stroke:rgba(0,21,36,1) }.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li:hover svg path { stroke:var(\u002d\u002deb-global-link-color) }.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li a,.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li a:focus { text-decoration:none; background:none }.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li { padding-top:4px }.eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper .eb-toc__list li:not(:last-child) { padding-bottom:4px }.eb-toc-tmg4m.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list { background:#fff; border-radius:4px }","tab":"","mobile":"","editorDesktop":"\n\t\t  \n\t\t  \n\n\t\t  .eb-toc-tmg4m.eb-toc-container{\n\t\t\t  max-width:610px;\n\n\t\t\t  background-color:var(\u002d\u002deb-global-background-color);\n\n\t\t\t  \n             \n\n            \n\t\t\t  \n            padding: 30px;\n\n            \n\t\t\t  \n      \n           \n          \n\n      \n          \n                border-radius: 4px;\n\n            \n          \n\n       \n\n\n    \n\t\t\t  transition:all 0.5s, \n  border 0.5s, border-radius 0.5s, box-shadow 0.5s\n  ;\n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container:hover{\n\t\t\t  \n    \n         \n\n\n        \n\n    \n          \n                 \n\n            \n          \n\n     \n\n    \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-title{\n\t\t\t  text-align: center;\n\t\t\t  cursor:default;\n\t\t\t  color: rgba(255,255,255,1);\n\t\t\t  background-color:rgba(69,136,216,1);\n\t\t\t  \n\t\t\t  \n             \n\n            \n\t\t\t  \n               \n              font-size: 22px;\n               \n              font-weight: normal;\n               \n               \n               \n               \n          \n\n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper{\n\t\t\t  background-color:rgba(241,235,218,1);\n\t\t\t  text-align: left;\n\t\t\t  \n             \n\n            \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper ul,\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper ol\n\t\t  {\n\t\t\t  \n\t\t\t  \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li {\n\t\t\t  color:rgba(0,21,36,1);\n\t\t\t  \n               \n              font-size: 14px;\n              line-height: 1.4em;\n              font-weight: normal;\n               \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li:hover,\n          .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li.eb-toc-active \u003e a{\n\t\t\t  color:var(\u002d\u002deb-global-link-color);\n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li a {\n\t\t\t  color:inherit;\n\t\t  }\n\n          .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li svg path{\n            stroke:rgba(0,21,36,1);\n          }\n          .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li:hover svg path{\n            stroke:var(\u002d\u002deb-global-link-color);\n          }\n\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li a,\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li a:focus{\n\t\t\t  text-decoration:none;\n\t\t\t  background:none;\n\t\t  }\n\n\t\t  \n\n        .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li {\n            padding-top: 4px;\n        }\n\n        .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper .eb-toc__list li:not(:last-child) {\n            padding-bottom: 4px;\n        }\n\n        \n        .eb-toc-tmg4m.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            background: #fff;\n            \n      \n           \n          \n\n      \n          \n                border-radius: 4px;\n\n            \n          \n\n       \n\n\n    \n        }\n\n\n\t  \n\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper{\n\t\t\t  display:block;\n\t\t  }\n\t\t  ","editorTab":"\n\t\t  \n\t\t  .eb-toc-tmg4m.eb-toc-container{\n\t\t\t  \n\n\t\t\t  \n                 \n\n            \n\t\t\t  \n                 \n\n            \n\t\t\t  \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n\n    \n\t\t  }\n\t\t  .eb-toc-tmg4m.eb-toc-container:hover{\n\t\t\t  \n    \n         \n        \n    \n              \n                 \n\n            \n          \n    \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-title{\n\t\t\t  \n                 \n\n            \n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper{\n\t\t\t  \n                 \n\n            \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li{\n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n          .eb-toc-tmg4m.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n\n    \n        }\n\n\t  \n\t\t  ","editorMobile":"\n\t\t  \n\t\t  .eb-toc-tmg4m.eb-toc-container{\n\t\t\t  \n\n\n\t\t\t  \n                 \n\n            \n\t\t\t  \n                 \n\n            \n\t\t\t  \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n    \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container:hover{\n\t\t\t  \n    \n         \n\n        \n    \n              \n                 \n\n            \n          \n\n    \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-title{\n\t\t\t  \n                 \n\n            \n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper{\n\t\t\t  \n                 \n\n            \n\t\t  }\n\n\t\t  .eb-toc-tmg4m.eb-toc-container .eb-toc-wrapper li{\n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n          .eb-toc-tmg4m.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n    \n        }\n\n\t  \n\t  "},"headers":[{"level":2,"content":"How to Build an SQLite GUI: 4 Steps Only","text":"How to Build an SQLite GUI: 4 Steps Only","link":"how-to-build-an-sqlite-gui-4-steps-only"},{"level":2,"content":"Why Use Five to Create Your SQLite GUI?","text":"Why Use Five to Create Your SQLite GUI?","link":"why-use-five-to-create-your-sqlite-gui"},{"level":2,"content":"Features of SQLite GUI's Built with Five:","text":"Features of SQLite GUI's Built with Five:","link":"features-of-sqlite-guis-built-with-five"},{"level":3,"content":"Why Choose Five Over an Open-Source Software Stack?","text":"Why Choose Five Over an Open-Source Software Stack?","link":"why-choose-five-over-an-open-source-software-stack"},{"level":2,"content":"How to Create an SQLite GUI:","text":"How to Create an SQLite GUI:","link":"how-to-create-an-sqlite-gui"},{"level":3,"content":"Building a New Application With Five","text":"Building a New Application With Five","link":"building-a-new-application-with-five"},{"level":3,"content":"Creating a Database with Five","text":"Creating a Database with Five","link":"creating-a-database-with-five"},{"level":3,"content":"Creating Database Tables","text":"Creating Database Tables","link":"creating-database-tables"},{"level":3,"content":"Creating Forms with Five","text":"Creating Forms with Five","link":"creating-forms-with-five"},{"level":3,"content":"Launching Your Application","text":"Launching Your Application","link":"launching-your-application"},{"level":3,"content":"Understanding Five's User Interface","text":"Understanding Five's User Interface","link":"understanding-fives-user-interface"},{"level":3,"content":"Connecting Five To An Existing SQLite Database","text":"Connecting Five To An Existing SQLite Database","link":"connecting-five-to-an-existing-sqlite-database"},{"level":2,"content":"Conclusion \u0026 Next Steps: Build An SQLite GUI","text":"Conclusion \u0026 Next Steps: Build An SQLite GUI","link":"conclusion-next-steps-build-an-sqlite-gui"}],"deleteHeaderList":[{"label":"How to Build an SQLite GUI: 4 Steps Only","value":"how-to-build-an-sqlite-gui-4-steps-only","isDelete":false},{"label":"Why Use Five to Create Your SQLite GUI?","value":"why-use-five-to-create-your-sqlite-gui","isDelete":false},{"label":"Features of SQLite GUI's Built with Five:","value":"features-of-sqlite-guis-built-with-five","isDelete":false},{"label":"Why Choose Five Over an Open-Source Software Stack?","value":"why-choose-five-over-an-open-source-software-stack","isDelete":false},{"label":"How to Create an SQLite GUI:","value":"how-to-create-an-sqlite-gui","isDelete":false},{"label":"Building a New Application With Five","value":"building-a-new-application-with-five","isDelete":false},{"label":"Creating a Database with Five","value":"creating-a-database-with-five","isDelete":false},{"label":"Creating Database Tables","value":"creating-database-tables","isDelete":false},{"label":"Creating Forms with Five","value":"creating-forms-with-five","isDelete":false},{"label":"Launching Your Application","value":"launching-your-application","isDelete":false},{"label":"Understanding Five's User Interface","value":"understanding-fives-user-interface","isDelete":false},{"label":"Connecting Five To An Existing SQLite Database","value":"connecting-five-to-an-existing-sqlite-database","isDelete":false},{"label":"Conclusion \u0026 Next Steps: Build An SQLite GUI","value":"conclusion-next-steps-build-an-sqlite-gui","isDelete":false}],"isMigrated":true,"titleBg":"rgba(69,136,216,1)","titleColor":"rgba(255,255,255,1)","contentBg":"rgba(241,235,218,1)","contentColor":"rgba(0,21,36,1)","contentGap":8,"titleAlign":"center","titleFontSize":22,"titleFontWeight":"normal","titleLineHeightUnit":"px","contentFontWeight":"normal","contentLineHeight":1.4,"ttlP_isLinked":true,"commonStyles":{"desktop":".wp-admin .eb-parent-eb-toc-tmg4m { display:block }.wp-admin .eb-parent-eb-toc-tmg4m { filter:unset }.wp-admin .eb-parent-eb-toc-tmg4m::before { content:none }.eb-parent-eb-toc-tmg4m { display:block }.root-eb-toc-tmg4m { position:relative }","tab":".editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-tmg4m { display:block }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-tmg4m { filter:none }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-tmg4m::before { content:none }.eb-parent-eb-toc-tmg4m { display:block }","mobile":".editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-tmg4m { display:block }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-tmg4m { filter:none }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-tmg4m::before { content:none }.eb-parent-eb-toc-tmg4m { display:block }"}} /-->

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

<!-- wp:heading -->
<h2 class="wp-block-heading">Why Use Five to Create Your SQLite GUI?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Five is a rapid application builder designed to accelerate the creation and deployment of custom web applications. It offers developers pre-built components that can be combined with custom code as needed.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The Five development environment supports the entire application development process, from data modeling to deployment. It's perfect for building business applications for internal or external users.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Applications built with Five range from internal tools and departmental applications to operations software, business partner portals, and B2B applications. Examples include custom CRM solutions, membership systems, order management systems (OMS), product information management systems (PIM), and inventory systems. Check out our <a href="https://five.co/use-cases/">use cases</a> for application templates and inspiration.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading -->
<h2 class="wp-block-heading">Features of SQLite GUI's Built with Five:</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Database Integration</strong>: Utilize Five's built-in MySQL database or connect to <a href="https://five.co/blog/build-apps-on-external-database/">external databases </a>such as SQLite.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Extensibility</strong>: Enhance applications using <a href="https://five.co/blog/how-to-execute-a-query-in-sql-using-queries-and-data-views/">SQL</a>, <a href="https://five.co/blog/javascript-typescript-functions-inside-five/">JavaScript</a>, and TypeScript.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Front-End</strong>: Employ Material-UI from the popular React component library for auto-generated front-end development.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Deployment</strong>: Deploy your GUI effortlessly to a scalable infrastructure as containerized web applications using <a href="https://www.docker.com/">Docker</a> and <a href="https://kubernetes.io/">Kubernetes</a>.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Why Choose Five Over an Open-Source Software Stack?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Developers might wonder why they should use Five instead of traditional stacks like MEAN, MERN, or LAMP. Here’s why:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li><strong>Faster Development</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>With Five, developers can start building applications immediately without spending time on environment setup. This leads to quicker development cycles.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Comprehensive Toolset</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Five provides all necessary tools for building, maintaining, and deploying applications within its environment. There's no need for external SQL script creation, component library searches, or navigating cloud deployment consoles. Five includes everything required, streamlining the development process and supporting full-code extensibility through SQL, JavaScript, or TypeScript. Popular technologies like webhooks and APIs are also supported.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Ease of Use for All Developers</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Back-end developers can easily create front-ends without needing expertise in typical front-end or back-end tools. Developers of any specialization—front-end, back-end, or full-stack—can deploy applications to the cloud effortlessly, even without cloud expertise. Five simplifies the entire process, making it accessible and user-friendly.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

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

<!-- wp:heading -->
<h2 class="wp-block-heading">How to Create an SQLite GUI:</h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li><strong>Create a New Application</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Start by creating a new application within Five.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Connect to SQLite</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Provide a connection string to the SQLite database <a href="https://five.co/order-payment/">(note: this feature is part of a paid plan).</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Form Creation</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Use Five to create the necessary forms for your application.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Launch the Application</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Deploy your application with a single click, leveraging Five’s scalable infrastructure.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>With Five, developers gain access to an all-in-one development tool that extends beyond a traditional IDE, facilitating rapid and efficient application development and deployment.</p>
<!-- /wp:paragraph -->

<!-- wp:tadv/classic-paragraph -->
<div style="background-color: #001524;"><hr style="height: 5px;" />
<pre style="text-align: center; overflow: hidden; white-space: pre-line;"><span style="color: #f1ebda; background-color: #4588d8; font-size: calc(18px + 0.390625vw);"><strong>Create An SQLite GUI</strong>
<span style="font-size: 14pt;">Get Free Access of Five to Follow this Tutorial</span></span></pre>
<p style="text-align: center;"><a href="https://five.co/get-started/" target="_blank" rel="noopener"><button style="background-color: #f8b92b; border: none; color: black; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; margin: 4px 2px; border-radius: 5px;"><strong>Get Instant Access</strong></button><br /></a></p>
<hr style="height: 5px;" /></div>
<!-- /wp:tadv/classic-paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Building a New Application With Five</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let's start by creating a new application with Five. To do so, <a href="https://five.co/get-started/">access our free access version</a>. The first screen you will see looks like this. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3144,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Landing-Page-1024x649-1-1.png" alt="" class="wp-image-3144"/></figure>
<!-- /wp:image -->

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

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li><strong>Access the Application Menu</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on the "Applications" option located in the top left corner.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Create a New Application</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on the yellow Plus button to start a new application.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Name Your Application</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Enter a descriptive name in the Title field. Save your new application by clicking the tick mark in the top right corner.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":3145,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/image-31-1024x617-1.png" alt="" class="wp-image-3145"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Once saved, you will see your newly created application listed among all your Five applications.</p>
<!-- /wp:paragraph -->

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

<!-- wp:list {"ordered":true,"start":4} -->
<ol start="4"><!-- wp:list-item -->
<li><strong>Manage Your Application</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on the blue "Manage" button that appears in the top right corner to access Five's development features.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":3146,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Manage-Your-Application-2-1024x576.png" alt="" class="wp-image-3146"/></figure>
<!-- /wp:image -->

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

<!-- wp:paragraph -->
<p><strong>EXPERT TIP</strong>: Initially, don’t worry about customizing all the application settings. There are many options for configuring multi-user access, application logs, and buttons. For now, stick with the default settings. Creating a new application gives you access to everything needed to start building your SQLIite GUI.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Creating a Database with Five</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Next, let's create a MySQL database within Five.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Why MySQL Instead of SQLite?</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Connecting Five to an external database like SQLite requires a paid subscription. However, Five includes a free integrated <a href="https://five.co/blog/how-to-create-a-front-end-for-a-mysql-database/">MySQL database</a> GUI, allowing you to create and manage a MySQL database without needing additional tools. This is a great way to familiarize yourself with Five’s features before committing to a paid plan.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Applications created with Five’s free version utilize the built-in MySQL database. You can manage this database directly within Five, without the need for external tools like dbForge Studio, phpMyAdmin, MySQL Workbench, Navicat for MySQL, DBeaver, or Beekeeper Studio.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to purchase a paid plan right away and use your SQLite database, <a href="https://five.co/order-payment/">you can purchase a paid plan here</a>.</p>
<!-- /wp:paragraph -->

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

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

<!-- wp:paragraph -->
<p>To create new MySQL database tables in Five:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Access the Data Management Tools</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on "Manage," then select "Data," and finally, "Table Wizard."</li>
<!-- /wp:list-item --></ul>

<!-- wp:image {"align":"center","id":3149,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Table-Wizard-1024x649-2.png" alt="" class="wp-image-3149"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Using the Table Wizard</strong>:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Create new database tables from scratch.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Assign data and display types to fields, determining how data is stored and presented to users.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Establish relationships between tables using Primary and Foreign Keys.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Import CSV files directly into your database tables.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Add new fields to existing tables.</li>
<!-- /wp:list-item --></ul>

<!-- wp:paragraph -->
<p>To add new fields, click on the Plus icon, define their data and display types, set their size, and you’re done.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3147,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Create-a-Table-with-the-Table-Wizard-1024x627-1.png" alt="" class="wp-image-3147"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>By following these steps, you can effectively create and manage your database within Five, making it a great tool for developing your web applications.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>For a quick tutorial on how to create your first database table, <a href="https://help.five.org/docs/training/quick-start-guide/build-database-tables">follow our Quick Start Guide that walks you through setting up database tables, as well as building relationships between them.</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Or watch this YouTube video that explains Five's Table Wizard:</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=jcRAhyw9rmI","type":"video","providerNameSlug":"youtube","responsive":true,"align":"center","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=jcRAhyw9rmI
</div></figure>
<!-- /wp:embed -->

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

<!-- wp:paragraph -->
<p><strong>Expert Tip: Simplified <a href="https://help.five.org/2.6/docs/data/table-wizard/create-table-relationships/">Table Relationships</a> and Keys in Five</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When you create a relationship between tables in Five, the platform automatically generates primary and foreign key fields for you. For instance, when you create a new table, Five adds a primary key field named "TableNameKey" as a GUID. This means you don't need to manually create a primary key field.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To view your database schema and relationships, navigate to <strong>Data</strong> and select <strong>Database Modeler.</strong> This tool visually represents your database schema, including all tables and their interconnections.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><strong>Creating Forms with Five</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>After setting up your database tables, you can start creating forms. Go to <strong>Visual</strong> and then click on <strong>Form</strong> Wizard in the top menu.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3150,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Form-Wizard-1024x650-5.png" alt="" class="wp-image-3150"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Within the Form Wizard, choose the database table that your new form will be associated with. For example, if your database has a table named "Inventory," you can select this table in the wizard, which will automatically generate the necessary fields for user interaction.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3151,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Form-Wizard-Creating-a-form-1024x656-1-1.png" alt="" class="wp-image-3151"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Building a form from a database table typically takes just a few seconds. Five’s integration with MySQL simplifies the creation of CRUD applications. Watch this video to create your first form.</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=C-P0vgwrU6s","type":"video","providerNameSlug":"youtube","responsive":true,"align":"center","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=C-P0vgwrU6s
</div></figure>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>Five offers various customization options for forms, including:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Adjusting the size and order of form fields.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Using conditional logic with "Show If," "Read Only If," or "Required If" and JavaScript conditions.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Creating custom display types and validating data with regular expressions (RegEx).</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Assigning events to user actions, such as running a JavaScript function on field entry or exit.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>In a nutshell, there is little that you <em>cannot</em> do with a form built inside of Five. But if you still have questions, then our <a href="https://five.org">user community</a> is a good place to learn more about Five's features.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p><strong>Expert Tip:</strong> Start with a basic form and explore customization options as needed. Initially, focus on functionality, ensuring that your form allows user interaction with your database. You can refine the form's appearance and functionality later.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><strong>Launching Your Application</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>After setting up a table and a form, you can launch your application. Click the "Run" button in the top-right corner to preview your application in a new tab.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3152,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Run-Your-Application-4-1024x576.png" alt="Build an SQLite GUI today" class="wp-image-3152"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Five automatically generates a user-friendly <a href="https://five.co/blog/the-admin-panel-the-best-web-app-template/">admin panel</a> interface for your MySQL database. This interface includes a navigational menu, in-app help icons, a user avatar for multi-user applications, and a central area for user interaction with forms, charts, dashboards, and other elements.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The interface is customizable with themes, buttons, and custom front-end components, and it can handle complex data structures with pages, drill-downs, and parent-child menus.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><strong>Understanding Five's User Interface</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Five’s user interface is designed for data-driven, multi-user business applications, from internal tools to CRM or OMS systems. It allows end-users to store, amend, view, visualize, report, and query data.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Five includes a variety of UI components for data display, such as ratings, date pickers, and radio buttons. The UI is responsive, adjusting to different screen sizes from mobile phones to desktops.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Overall, Five’s user interface is designed to accelerate application development without compromising the end-user experience.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p><strong>Expert Tip:</strong> While Five’s UI is responsive by default, developers should consider the end-user experience. For example, when designing dashboards, use a custom grid with a minimal number of columns and rows for mobile devices to enhance usability.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Connecting Five To An Existing SQLite Database</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To connect Five to an existing SQLite database, <a href="https://five.co/order-payment/">subscribe to Five's paid plan</a>. This gives you access to a web-hosted development environment. Supply Five with a connection string, and Five will treat your existing database as a data source.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To do so, follow these steps:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First, provide the connection string to establish the database connection inside Five's <strong>Database </strong>menu.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The connection string represents a set of parameters in the form of&nbsp;<em>key = value</em>&nbsp;pairs separated by semicolons.</p>
<!-- /wp:paragraph -->

<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td><strong>Key</strong></td><td><strong>Value</strong></td></tr><tr><td><strong>Driver&nbsp;</strong></td><td>The database driver allows you to interact with your chosen DBMS through Five’s interface.</td></tr><tr><td><strong>URL&nbsp;</strong></td><td>A database connection URL provides a way of identifying a database so that the selected driver recognizes it and connects to it.</td></tr><tr><td><strong>Username&nbsp;</strong></td><td>Your username.</td></tr><tr><td><strong>Password&nbsp;</strong></td><td>Your password.</td></tr><tr><td><strong>Name&nbsp;</strong></td><td>The name of your database.</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Once your connection string is saved, Five will add your existing database as a data source, and you can use Five to develop a front end including forms, <a href="https://five.co/blog/how-to-build-charts-using-the-chart-wizard/" data-type="post" data-id="2183">charts</a>, <a href="https://five.co/blog/generate-mysql-report/" data-type="post" data-id="1786">reports</a>, or <a href="https://five.co/blog/how-to-create-custom-dashboards/" data-type="post" data-id="2198">dashboards </a>on your SQLite database. </p>
<!-- /wp:paragraph -->

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

<!-- wp:heading -->
<h2 class="wp-block-heading"><strong>Conclusion &amp; Next Steps</strong>: Build An SQLite GUI</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this article, we covered how to create a GUI for an SQLite database using Five.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Five is ideal for building custom business applications. It simplifies the process of creating a front end for any relational database, including SQLite, and provides developers with a pre-built user interface.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now that you have learned how to build a GUI for your SQLite database, where should you take your application next? We have only covered the basics of Five. To continue developing your application, consider the following:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Making it a Multi-User Application:</strong> Create different access rights and permissions for various user groups.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Adding a Mail Merge:</strong> Notify users about changes within your application.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Writing SQL Queries:</strong> Use Five to create reports, charts, or dashboards.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Integrating with External Systems:</strong> Add JavaScript functions to connect Five to external systems, such as Slack.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>To continue building out your web application and adding more features check out this <a href="https://five.co/code-along/code-along-full-stack-web-app/">Code-Along: Build &amp; Deploy a Full-Stack Web App</a></p>
<!-- /wp:paragraph -->