<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Anita Achu</title>
    <description>The latest articles on Forem by Anita Achu (@anitaachu).</description>
    <link>https://forem.com/anitaachu</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F677728%2Fbcff9304-9e22-42c4-9c0a-cc5d6cec4064.jpeg</url>
      <title>Forem: Anita Achu</title>
      <link>https://forem.com/anitaachu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/anitaachu"/>
    <language>en</language>
    <item>
      <title>Data Management Best Practices for Modern Backend Data Security</title>
      <dc:creator>Anita Achu</dc:creator>
      <pubDate>Thu, 30 Jun 2022 12:30:02 +0000</pubDate>
      <link>https://forem.com/anitaachu/data-management-best-practices-for-modern-backend-data-security-2ao8</link>
      <guid>https://forem.com/anitaachu/data-management-best-practices-for-modern-backend-data-security-2ao8</guid>
      <description>&lt;p&gt;As a backend developer working with millions of data regularly, you understand how sensitive data is and the implications of a data breach. Whether you are building a database from scratch using code with an SQL/NoSQL database or no-code development tools, your database is prone to attacks. You must ensure that sensitive data is secured from attackers.&lt;/p&gt;

&lt;p&gt;This article will discuss data management and its security challenges and outline some of the best modern data management practices to keep your software data secure.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is data management?
&lt;/h2&gt;

&lt;p&gt;Data management refers to the practice of collecting, storing and managing data efficiently. It involves the complete lifecycle that tracks data from its creation till it is no longer required.&lt;/p&gt;

&lt;p&gt;Data is a core asset of software, holding sensitive and valuable information. Over the last few decades, application infrastructure and database patterns have advanced significantly. A modern backend developer faces far more complex data management systems such as user information, access control, authentication, and integrity of data that you must keep safe from attackers as they are most vulnerable to attacks.&lt;/p&gt;

&lt;p&gt;Let’s examine some of the common data security challenges in data management.&lt;/p&gt;

&lt;h2&gt;
  
  
  Data security challenges in data management
&lt;/h2&gt;

&lt;p&gt;The reality of managing a software data system is the amount of sensitive data you have to work with. This data could contain personal information, identities, or credentials of users. As a result, this data is a common target for cyberattacks.&lt;/p&gt;

&lt;p&gt;You are to ensure that your data is protected, prevent unauthorized access or modification to this data, and grant easy access to this data for users when requested.&lt;/p&gt;

&lt;p&gt;These are some of the security challenges in data management. Let’s discuss these challenges and how we can fix them using the best modern practices.&lt;/p&gt;

&lt;h3&gt;
  
  
  Is my information safe?
&lt;/h3&gt;

&lt;p&gt;When a website collects personal information from users, such as credit card credentials, location, identity, etc., users want to be assured that their information is safe and will not be breached someday. This assurance is what data management entails: confidentiality! Confidentiality is a core principle of data security.&lt;/p&gt;

&lt;h3&gt;
  
  
  Password changed?
&lt;/h3&gt;

&lt;p&gt;Imagine a user tries to access their account, and the login credentials show, &lt;em&gt;"You cannot log in; the password has changed."&lt;/em&gt; I would also dread this. The integrity of user data has been tampered with. Data integrity involves the protection of data from unauthorized modification or removal. Data integrity is also a principle of data security.&lt;/p&gt;

&lt;h3&gt;
  
  
  How soon can I get it?
&lt;/h3&gt;

&lt;p&gt;Data management guarantees the availability of user data when requested. When the data is requested, availability requires that information systems function effectively and be accessible when needed. For example, your admin database must be available to access your financial records.&lt;/p&gt;

&lt;p&gt;There are other challenges in data management. However, we will limit ourselves to these common challenges. Having looked into the challenges, let's dive into the best modern practices to address them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Data security best practices
&lt;/h2&gt;

&lt;p&gt;Here are some best practices for improving your software data security:&lt;/p&gt;

&lt;h3&gt;
  
  
  Use separate servers and storage.
&lt;/h3&gt;

&lt;p&gt;Storing your data on the same server as your website exposes it to a variety of attacks specifically designed to target the database. Suppose you have an e-commerce store that stores both sensitive and non-sensitive data on a single server. You may probably be using a hosting service for your site. However, the security measures provided by this hosting service do not protect your sensitive data from attacks. Any attack on your site gives the attacker access to your sensitive data.&lt;/p&gt;

&lt;p&gt;Most big cloud computing providers distribute your deployments geographically. You can operate an instance of your application on both the west and east coasts of the United States or another region. You may have numerous instances at the same location. The idea is that if one instance fails, another will be available to fulfill requests. Your service will still be connected even if a data center is unavailable. With this, the &lt;em&gt;availability&lt;/em&gt; of your service is assured.&lt;/p&gt;

&lt;p&gt;Modern databases like PostgresSQL and MongoDB have good support for server and storage separation.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Use database encryption protocols.&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;One of the best security measures for databases is encryption. Encrypting data guarantees that it is inaccessible to anybody who does not have access to the encryption key, whether it is at rest or in transit. For example, information stored in &lt;a href="https://cloud.google.com/security/encryption-at-rest"&gt;Google Cloud Storage&lt;/a&gt; is secured at rest. They allow you to provide the encryption keys to offer you more confidence and make it easier to convert encrypted data from other places to Cloud Storage. Take advantage of encryption if your cloud provider offers it. Encrypting data is critical not solely for keeping trade secrets safe but also for transferring and storing sensitive user data. You can also encrypt all connections to give an extra degree of protection to any piece of data you transfer.&lt;/p&gt;

&lt;h3&gt;
  
  
  Use a strong authentication system.
&lt;/h3&gt;

&lt;p&gt;According to the latest study from &lt;a href="https://www.verizon.com/business/resources/reports/dbir/"&gt;Verizon&lt;/a&gt;, stolen passwords are responsible for 80% of data breaches. It demonstrates that passwords are not a sufficient security mechanism on their own. Imagine a data breach in your database due to a stolen password. This breach will result in a loss of confidentiality because users are not assured that their data is safe with you. The modern practice would be to adopt a system with several authentication processes. Your users can log in with Google if they prefer to manage their passwords using that method.&lt;/p&gt;

&lt;p&gt;Better still, a multi-factor or two-factor authentication (2FA) into your system is a useful tool for protecting sensitive data from unauthorized access. You can use a combination of user authentication methods, such as biometrics, SMS/text messaging, emails, and security questions, for the most secure user sign-ins. Extra layers of protection, such as text verification, email verification, or time-based security codes, are also recommended.&lt;/p&gt;

&lt;h3&gt;
  
  
  Monitor database logs
&lt;/h3&gt;

&lt;p&gt;Regularly checking your database for attempted breaches strengthens your security and helps you respond quickly to possible threats. Keep an eye on database activity and keep track of log activities. The actions that your users take on your server should be logged.&lt;/p&gt;

&lt;p&gt;For example, where a modification has been made on Google Docs, the server records the modification and the person who made it. By monitoring the logs, you can tell if a document modification is by an authorized user. There are modern security solutions that automatically keep you up to date on logs. These security solutions use machine learning to respond to different threats and can be deployed as a service or through a Managed Service Provider (MSP) such as &lt;strong&gt;&lt;em&gt;SIEM Software&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Create data backups.
&lt;/h3&gt;

&lt;p&gt;Creating a data backup is one of the practices for data security. Backing up data has gained a lot of relevance in recent years. The goal of data backup is to have a secure copy in case the original data is lost or corrupted. You can reduce the risk of a data breach by making an exact copy of your data and storing it in a safe location that can only be accessed by authorized administrators.&lt;/p&gt;

&lt;p&gt;Imagine a situation where your data is compromised by an attacker, accidentally erased by a user, or lost due to hardware failure. Only if the cloud-based data backup plan is implemented on time will we be able to restore data without losing a single piece of information.&lt;/p&gt;

&lt;p&gt;One modern way to back up your data is by using cloud storage. A good cloud storage service, like &lt;a href="https://www.google.com/intl/en_ng/drive/"&gt;Google Drive&lt;/a&gt; or &lt;a href="https://www.dropbox.com/"&gt;Dropbox&lt;/a&gt;, has a file management system for easier access and strong encryption to keep your data safe from third parties.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Enable anti-virus and firewall protection.&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Firewalls stand as a defense against data attacks. Attackers can gain access to your data through viruses, trojans, spyware, spam messages, etc. Your system will be able to defend itself against these attacks with the help of anti-virus software and firewalls. You must ensure that your firewall or software is up to date and that it detects and blocks cyber threats before they occur.&lt;/p&gt;

&lt;p&gt;There are modern anti-virus and firewall software such as Norton, McAfee, NGFW, NAT firewalls, etc. Ensure that your firewall is regularly updated and prevents such cyber threats before they occur.&lt;/p&gt;

&lt;p&gt;According to &lt;a href="https://www.statista.com/statistics/1307426/number-of-data-breaches-worldwide/"&gt;Statista&lt;/a&gt;, there have been over 18 million data breaches in 2022, and about 72 percent of these attackers are on the database, with an estimation of each data breach costing &lt;a href="https://www.ibm.com/security/data-breach"&gt;$3.38 million&lt;/a&gt; on average. In this regard, data security is an essential action you must take to protect the data of users from hackers to prevent financial losses. While building a modern backend system, you should consider these practices.&lt;/p&gt;

&lt;p&gt;In addition, ensure you report failures to your users in time so they can take the necessary steps to better safeguard themselves. In addition to these, there are several other practices you can employ. Continue exploring new ways to make your systems more secure.&lt;/p&gt;

</description>
      <category>datasecurity</category>
      <category>backend</category>
      <category>webdev</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Building a contact application with Django and Appsmith</title>
      <dc:creator>Anita Achu</dc:creator>
      <pubDate>Mon, 02 May 2022 16:13:28 +0000</pubDate>
      <link>https://forem.com/appsmith/building-a-contact-application-with-django-and-appsmith-42n1</link>
      <guid>https://forem.com/appsmith/building-a-contact-application-with-django-and-appsmith-42n1</guid>
      <description>&lt;p&gt;A contact application is a database that collects and stores user contact data. The contact app is a widely used application, similar to the contact application on your mobile phone, that stores data such as user contact names, phone numbers, email addresses, etc. Businesses can use this application to manage their customers' information and store personal contact data.&lt;/p&gt;

&lt;p&gt;This tutorial primarily focuses on integrating a contact API in Python using the Django Rest Framework. This application will have functionalities that allow users to create, edit, and delete contact data. While this goes on the backend of the application, we will create the interface of our application using Appsmith's pre-built UI widgets.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.appsmith.com/" rel="noopener noreferrer"&gt;Appsmith&lt;/a&gt; is a powerful open-source low-code framework for creating internal tools with features such as pre-built UI widgets that connect to multiple data sources: APIs, databases, GraphQL, etc., with support for OAuth 2.0 and CURL. &lt;/p&gt;

&lt;p&gt;Appsmith allows you to create web application interfaces with little or no code. You don't need to be a developer to create an application dashboard using Appsmith. Using Appsmith's drag-and-drop UI widgets, we will create a dashboard for our application.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Prerequisites&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Basic knowledge of Python.&lt;/li&gt;
&lt;li&gt;Good understanding of &lt;a href="https://docs.djangoproject.com/en/3.2/" rel="noopener noreferrer"&gt;Django&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;An &lt;a href="https://www.appsmith.com/" rel="noopener noreferrer"&gt;Appsmith account&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Project setup: Building a contact book API&lt;/strong&gt;
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Creating a virtual environment&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;We will begin by creating a virtual environment for our project. The essence of a virtual environment is to create a separate environment for all installed packages and dependencies.&lt;/p&gt;

&lt;p&gt;The command below shows how to create a virtual environment in your terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;pip&lt;/span&gt; &lt;span class="n"&gt;install&lt;/span&gt; &lt;span class="n"&gt;virtualenv&lt;/span&gt;

&lt;span class="n"&gt;virtualenv&lt;/span&gt; &lt;span class="n"&gt;env&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Activate our virtual environment&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;For Windows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;env&lt;/span&gt;&lt;span class="se"&gt;\S&lt;/span&gt;cripts&lt;span class="se"&gt;\a&lt;/span&gt;ctivate
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For Mac/Linux:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;source env&lt;/span&gt;/bin/activate
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Virtual environment activated!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cloning a repository&lt;/strong&gt;&lt;br&gt;
Next, we will be cloning an already existing repository built with the Django Rest Framework. This repo contains a contact application with functionalities that allow users to create, edit, and delete contact data.&lt;/p&gt;

&lt;p&gt;To clone the repo, run these lines of code in your terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/Anitaachu/contactAPI.git

&lt;span class="nb"&gt;cd &lt;/span&gt;contactAPI
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Dependencies installation&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Once this is completed, we will be installing a couple of dependencies and packages required for this project using the &lt;code&gt;pip&lt;/code&gt; These packages are already contained in your cloned requirements.txt file.&lt;/p&gt;

&lt;p&gt;Run this command to create a requirements.txt file and install the packages:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pip &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; requirements.txt
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, migrate the data to the database and create a superuser. To this by running the following commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;python&lt;/span&gt; &lt;span class="n"&gt;manage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;py&lt;/span&gt; &lt;span class="n"&gt;migrate&lt;/span&gt;

&lt;span class="n"&gt;python&lt;/span&gt; &lt;span class="n"&gt;manage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;py&lt;/span&gt; &lt;span class="n"&gt;createsuperuser&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Testing the application&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Next, let's test this application locally, using the following command: &lt;code&gt;python manage.py runserver&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;In your browser hit the endpoint &lt;a href="http://127.0.0.1:8000/" rel="noopener noreferrer"&gt;http://127.0.0.1:8000/&lt;/a&gt;. You can also access the admin page using this URL &lt;a href="http://127.0.0.1:8000/admin/" rel="noopener noreferrer"&gt;http://127.0.0.1:8000/admin/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FlZkUHx72OLJMbqkEHff2%252Fuploads%252FD7wmLiWdNZgiVTIagJHb%252Flist_contact.PNG%3Falt%3Dmedia%26token%3D4048025c-03bb-40e4-9f69-d745b9822a11" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FlZkUHx72OLJMbqkEHff2%252Fuploads%252FD7wmLiWdNZgiVTIagJHb%252Flist_contact.PNG%3Falt%3Dmedia%26token%3D4048025c-03bb-40e4-9f69-d745b9822a11" alt="list_contact"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2F9xTj7BbR9HUS3PXTczi5MiE3dqE8yPG3p7v4Bl-wkJCa9H8Sc2VStaDRRVpv7WX1Dz52_Air8Fsxhz6uyQKR04Cn3_6mjUKnnB84OTtwScp4dYajcg8fy2WM7dKfjl2RX4hiikjG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2F9xTj7BbR9HUS3PXTczi5MiE3dqE8yPG3p7v4Bl-wkJCa9H8Sc2VStaDRRVpv7WX1Dz52_Air8Fsxhz6uyQKR04Cn3_6mjUKnnB84OTtwScp4dYajcg8fy2WM7dKfjl2RX4hiikjG" alt="Admin_page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Great! Our application is running!🎉&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Getting started with Appsmith&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;With our API up and running, the next phase of this project is creating an interface using Appsmith pre-built widgets and connecting these widgets to our data source (API). We will be doing this by writing some queries that will be implemented with the widgets.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Let’s dive in!&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Connecting to a Datasource&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;It takes a few minutes to connect to a datasource, and you can develop tools on the database of your choosing. You can either connect to a database, an API, or both. For this project, we will connect Appsmith to a deployed API using the API we earlier created. The deployed API can be accessed using this URL: &lt;a href="https://contactapp-api.herokuapp.com/" rel="noopener noreferrer"&gt;https://contactapp-api.herokuapp.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2FfeC3mw4W_fZHjDepzaFiKASntWwK4yQEHvP1umBxYQV4V1nrDNoHdaLNRTBq4iWP_Z4e4orNFAelVhu6dTUO3LnqjMNQfiD3374wV1gEe7eh6Fqx1DUNM4RXvLQxkUiU5ygkv876" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2FfeC3mw4W_fZHjDepzaFiKASntWwK4yQEHvP1umBxYQV4V1nrDNoHdaLNRTBq4iWP_Z4e4orNFAelVhu6dTUO3LnqjMNQfiD3374wV1gEe7eh6Fqx1DUNM4RXvLQxkUiU5ygkv876" alt="appsmith_dashboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;Ensure the API you intend to connect is already deployed. You can use Heroku or any other deployment service.&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Add the URL of your deployed API and click on ‘&lt;em&gt;run'&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2FE43MI5xAw0dmcPTMcSigbgaNhg1jKjC0pHPQOk6qS6VrLjs9O0PcX82qchsZgyjaH0VH9JalWmaOZEQfr44_NL0b4zppXdX9L3ram0bBCNYsStRWOwcEHlvERTC1OS_Kd_MQmMjY" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2FE43MI5xAw0dmcPTMcSigbgaNhg1jKjC0pHPQOk6qS6VrLjs9O0PcX82qchsZgyjaH0VH9JalWmaOZEQfr44_NL0b4zppXdX9L3ram0bBCNYsStRWOwcEHlvERTC1OS_Kd_MQmMjY" alt="datasource"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Datasource successfully connected!&lt;/p&gt;

&lt;p&gt;Now let’s get to work!&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Creating a dashboard with the Appsmith widget&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;With Appsmith, you can build a fully customized interface with no code. Appsmith has many pre-built UI widgets such as tables, forms, buttons, boxes, images, and more, all available to help you create exciting applications. &lt;/p&gt;

&lt;p&gt;Let’s begin! Firstly, let's create a table that will display our contact data.&lt;/p&gt;

&lt;p&gt;Follow these steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;From the widget section, drag and drop the table widget onto the canvas in this manner:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157263509-ee2bb8e8-7d38-41ab-84e1-520eae5ec0fd.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157263509-ee2bb8e8-7d38-41ab-84e1-520eae5ec0fd.gif" alt="dashboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Edit the default data from the property pane and add the column names as contained in our database. As contained in our database, the column names include "&lt;em&gt;first_name", "last_name", "phone_number", "email", "address",&lt;/em&gt; and &lt;em&gt;"birthday."&lt;/em&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157263688-7aac74d5-2ec8-46b0-acbc-263ca585a736.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157263688-7aac74d5-2ec8-46b0-acbc-263ca585a736.gif" alt="dashboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Next, edit the Table Data property in Table Widget’s property pane to  &lt;code&gt;{{Contact_API.data}}&lt;/code&gt; in other access data from the query.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2Fc_q9bN0GzZUGrqc_5Tf1VZF3fcOFcSZfWbGgvEkp9wF4reaKU128181_8iysbAVILYLQ4vW2L2XA2BcXNEW7iXSZmn_aNm6hWTj3hjF_PamLLF37YQix1f6sZ254YujAiFfB-0DQ" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2Fc_q9bN0GzZUGrqc_5Tf1VZF3fcOFcSZfWbGgvEkp9wF4reaKU128181_8iysbAVILYLQ4vW2L2XA2BcXNEW7iXSZmn_aNm6hWTj3hjF_PamLLF37YQix1f6sZ254YujAiFfB-0DQ" alt="dasboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next, we will create a button widget that will be used to create contacts. When a user clicks this button, it navigates to another page that contains a form widget.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Adding a button and form widget&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Drag and drop the button widget into the canvas.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157264443-8a7bdb0a-0eaa-4644-adb6-34e407de80aa.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157264443-8a7bdb0a-0eaa-4644-adb6-34e407de80aa.gif" alt="dashboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the label section, change the ‘&lt;em&gt;submit&lt;/em&gt;’ label to '&lt;em&gt;create contact'.&lt;/em&gt; Next, edit the button widget, in the &lt;em&gt;&lt;em&gt;Events &amp;gt; onClick &amp;gt; Navigate to.&lt;/em&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2F6jRGXyzCv2dufZ5eTiD1UO8v6DUGHQIawaHQcvqNgXOTHSc5hBpF1-8KodzZdu2LwGlELwk5YwLQTwjB0oJyMWClM_WizhZqEvv_W92o78pCqvFIlO74ncXckgKDuZ53SYeQggeU" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2F6jRGXyzCv2dufZ5eTiD1UO8v6DUGHQIawaHQcvqNgXOTHSc5hBpF1-8KodzZdu2LwGlELwk5YwLQTwjB0oJyMWClM_WizhZqEvv_W92o78pCqvFIlO74ncXckgKDuZ53SYeQggeU" alt="dashboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Under "&lt;em&gt;Page Name&lt;/em&gt; or &lt;em&gt;URL&lt;/em&gt;" type in '&lt;em&gt;Page 2&lt;/em&gt;'. By doing this, when we click on the &lt;em&gt;"&lt;/em&gt;&lt;em&gt;Create contact&lt;/em&gt;&lt;em&gt;"&lt;/em&gt; button, it navigates us to a new page that will take us to the contact form.&lt;/p&gt;

&lt;p&gt;Lastly, click on the "+" icon at the top left to add a new page.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Form widget&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;This new page will contain a contact form that will be used to add a new contact, using input fields where users can enter the contact data they wish to create.&lt;/p&gt;

&lt;p&gt;Let’s create a form using a form widget with these few steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;From the widget section, drag a form widget into the canvas.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2FNNbqNoHqrQTLx0OK0CBPvh5-LnAEKC8Hyy3B3V9wbIMZCva7hEWJCHVaxOrrV9m8vJaxm_tPBT1e81Lr0yaL77M7ecnUnm0fwNp-MLOdxXrLEprZLI1zqL0gsTz1h96ayVRh9jB3" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2FNNbqNoHqrQTLx0OK0CBPvh5-LnAEKC8Hyy3B3V9wbIMZCva7hEWJCHVaxOrrV9m8vJaxm_tPBT1e81Lr0yaL77M7ecnUnm0fwNp-MLOdxXrLEprZLI1zqL0gsTz1h96ayVRh9jB3" alt="form_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Change the "&lt;em&gt;Form&lt;/em&gt;" label to "&lt;em&gt;Create contact&lt;/em&gt;".&lt;/li&gt;
&lt;li&gt;Next, drag and drop text widgets into the form widget we just created. Edit the label name to first name, last name, etc. In this manner:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2FI-qcxYC1d_WPcS6fGNfZOd8zd0keG80uvwsSH30_cKfQJRlVSTnhQrqMtsT-djIvAkXTnBpAJMlJNTN2e60DCnJEkTjU2XS45TcZHRFq3o9rOLCI-fwSaRDvpyDspjRclnBfyPW2" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2FI-qcxYC1d_WPcS6fGNfZOd8zd0keG80uvwsSH30_cKfQJRlVSTnhQrqMtsT-djIvAkXTnBpAJMlJNTN2e60DCnJEkTjU2XS45TcZHRFq3o9rOLCI-fwSaRDvpyDspjRclnBfyPW2" alt="form_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add the input widget to the canvas. This widget will allow the user to enter their contact name, phone number, address, etc.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2FEvKqdYSonDac15TUyGUdMqzLhcgevJh4Vtb4M-3zR9zX3EBMKUPRdE0OAsfNx05w_JKxt9cGYB8L7Pjc76KK4gyS5N-FT9rjwmUMsXv3SkwIpKEb871i8vLa0lMVjsNYDCjRphLQ" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh4.googleusercontent.com%2FEvKqdYSonDac15TUyGUdMqzLhcgevJh4Vtb4M-3zR9zX3EBMKUPRdE0OAsfNx05w_JKxt9cGYB8L7Pjc76KK4gyS5N-FT9rjwmUMsXv3SkwIpKEb871i8vLa0lMVjsNYDCjRphLQ" alt="form_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add functionality to the submit button. To do this, create a new query on the right side of the page.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FjN5Pbo2jfNROou1w6xqsJ08k1DxbbX9sJ_b6iH_E1-UrwMr4f9hBNXmSp42jA9kobdB2OuwCF3LnhHrgo6wxuEg1mKF6F1xe1IBykT-xDDzSWpWqWDaODlHbfsnZ0hbLjTr-YEoM" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FjN5Pbo2jfNROou1w6xqsJ08k1DxbbX9sJ_b6iH_E1-UrwMr4f9hBNXmSp42jA9kobdB2OuwCF3LnhHrgo6wxuEg1mKF6F1xe1IBykT-xDDzSWpWqWDaODlHbfsnZ0hbLjTr-YEoM" alt="form_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create a new datasource and enter the URL of the datasource, &lt;a href="https://contactapp-api.herokuapp.com/" rel="noopener noreferrer"&gt;https://contactapp-api.herokuapp.com/&lt;/a&gt;. You can also change the name of this datasource to be able to identify it.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2Fl275yCm3fX_w-QOIymEn3JzCgIjTHbqfcE2c6tBZsT7kJmsBup9JEq1J8PPrkVmp5GoIYSZXuheNC9aeopPZstczKlCfZoqWBG3mRaidRni1L6yzk3CLw-zWcWsR-Bm7xCflQHN7" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2Fl275yCm3fX_w-QOIymEn3JzCgIjTHbqfcE2c6tBZsT7kJmsBup9JEq1J8PPrkVmp5GoIYSZXuheNC9aeopPZstczKlCfZoqWBG3mRaidRni1L6yzk3CLw-zWcWsR-Bm7xCflQHN7" alt="form_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add connect the query to the submit button.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FlTbmqSM8GC8Crft7ueyZxP0AsyTi8Py6zjy0CNnATFye9DX-Mwg8qrV4AFvL5-mvOSN8Qqho25HA4Tdf6aLvcSy1Thh7AWpvEIRxTyrdA0nwxX95Wiz12jjYzSNamYIxUh2FY96E" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FlTbmqSM8GC8Crft7ueyZxP0AsyTi8Py6zjy0CNnATFye9DX-Mwg8qrV4AFvL5-mvOSN8Qqho25HA4Tdf6aLvcSy1Thh7AWpvEIRxTyrdA0nwxX95Wiz12jjYzSNamYIxUh2FY96E" alt="form_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Lastly, set the body property of your datasource to:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
"first_name": "{{Input1.text}}",
"last_name": "{{Input2.text}}",
"phone_number": "{{Input3.text}}",
"email":"{{Input4.text}}",
"address":"{{Input5.text}}",
"birthday": "{{Input6.text}}"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By doing this, a connection will be created between the widget and the datasource.&lt;/p&gt;

&lt;p&gt;Now let’s test out our widget to ensure that it's functioning. Firstly, on the contact dashboard, click on the "&lt;em&gt;Create Contact&lt;/em&gt;" button. The button would redirect to another page that contains a contact form.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157268605-ed5e5021-cd4d-4282-b35b-ee8edf191e09.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157268605-ed5e5021-cd4d-4282-b35b-ee8edf191e09.gif" alt="widget_5_new"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Fill out this form and hit the submit button. You will notice that contact details that are added through the form are displayed on our application dashboard.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FppQGPQXYzkEB6xEWl6UKayb7sL3fICKHJ4u4_4dWetN-O9grCs9zpMFZd3XLqAalk1zeguCgESIqQ8rjVfia_2RvOK3TuT-qzchqA2D1CUhm8gSVC42pFdicDEMgGyAKT2aYHhYc" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FppQGPQXYzkEB6xEWl6UKayb7sL3fICKHJ4u4_4dWetN-O9grCs9zpMFZd3XLqAalk1zeguCgESIqQ8rjVfia_2RvOK3TuT-qzchqA2D1CUhm8gSVC42pFdicDEMgGyAKT2aYHhYc" alt="form_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So far, we have been able to create a form widget where users can create contacts, and these contacts will be displayed on our dashboard.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Great!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Asides creating contacts, contact applications also have features where users can edit contacts or delete contacts that are no longer needed. Let’s add the edit and delete contact buttons and write queries that will connect these buttons to our datasource.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Edit contact button&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;In our application dashboard, add an edit button. This button will also be connected to our datasource. Let’s work on our edit button.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Step 1&lt;/strong&gt;: In the application dashboard, create a new column named "edit contact".&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Step 2&lt;/strong&gt;: Next, click on the Settings symbol in the “&lt;em&gt;Edit Contact”&lt;/em&gt;* column to add some functions to it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Step 3&lt;/strong&gt;: Replace the following:&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Column Type:&lt;/strong&gt; Choose ‘&lt;em&gt;Button&lt;/em&gt;’.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Label&lt;/em&gt;&lt;/strong&gt;: Replace ‘&lt;em&gt;Action&lt;/em&gt;’ with ‘&lt;em&gt;Edit&lt;/em&gt;’.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;onClick&lt;/strong&gt;: Choose ‘&lt;em&gt;Open modal&lt;/em&gt;’&lt;/li&gt;
&lt;li&gt;Lastly, under 'Modal Name', create a new modal.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When you click on the edit button, it spins up a modal. We will edit this modal and add some queries to it to enhance its functionality. To do this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First, create a text and input widget similar to that of the form widget in the modal. This way:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2F17tSgFquEOwhR-RGs6L_paZ-Vodvv9mlXHz22IEppdwsnSrKCc9ImsIna-FptiwB7ktULZ8J3Ayc8LUxFqsMewU-xxlL5iZh25X-FV_kBm6XYfV5G0GcSXcKEKpXE_1GyRaNELLF" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2F17tSgFquEOwhR-RGs6L_paZ-Vodvv9mlXHz22IEppdwsnSrKCc9ImsIna-FptiwB7ktULZ8J3Ayc8LUxFqsMewU-xxlL5iZh25X-FV_kBm6XYfV5G0GcSXcKEKpXE_1GyRaNELLF" alt="modal"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add a new datasource and enter the URL of the datasource.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FiO9vgUoqPILFYvYV-zA_C29otarOgbH_MMjfNAhKrXSQLVjGyahJgbrVDg0NmFNAWRCAtVPr9vD0gUBLwRGhzFz8_wLn7h1ky1-lp11CbpR2cpatXZDjhO2n7bWgutjb776VqWV3" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh6.googleusercontent.com%2FiO9vgUoqPILFYvYV-zA_C29otarOgbH_MMjfNAhKrXSQLVjGyahJgbrVDg0NmFNAWRCAtVPr9vD0gUBLwRGhzFz8_wLn7h1ky1-lp11CbpR2cpatXZDjhO2n7bWgutjb776VqWV3" alt="datasource"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now you can edit a contact by clicking on the edit button and adding new data to replace the former contact data.&lt;/p&gt;

&lt;p&gt;For the delete function, we simply repeat the same process as that of the edit button. However, the modal of the delete may differ. The Delete modal should appear like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2FQzZteeEujuTdgVqdWt3fXqgz_xv2VPlkdq_EpOWQbaQh0-UwKIaVolMOjt0pShashbBR_vRF4EoCRD6BOd36YQUN1JrZjzRJkcE-n2-xUC4obqIUxQjeXY5P2xAk0skVjWG-l14I" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2FQzZteeEujuTdgVqdWt3fXqgz_xv2VPlkdq_EpOWQbaQh0-UwKIaVolMOjt0pShashbBR_vRF4EoCRD6BOd36YQUN1JrZjzRJkcE-n2-xUC4obqIUxQjeXY5P2xAk0skVjWG-l14I" alt="modal"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Just as we did for the first modal, create a query that will connect the delete button widget to a data source.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2FOE7Q8ZzalTVmW7NM2KArVhmMQcQfsBNB9agj2JN8eSL_FAD0rCBoK2Ck0ooNq0wPM_Rbf7054c1HxVCT0OgctSz6_5YqhodKs4spQnQUrsnovs3VH7DfqdB32kQfC9dZTyRLHPe4" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh3.googleusercontent.com%2FOE7Q8ZzalTVmW7NM2KArVhmMQcQfsBNB9agj2JN8eSL_FAD0rCBoK2Ck0ooNq0wPM_Rbf7054c1HxVCT0OgctSz6_5YqhodKs4spQnQUrsnovs3VH7DfqdB32kQfC9dZTyRLHPe4" alt="button_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Set the body property of your datasource to: &lt;code&gt;{{Table1.selectedRow.id}}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Lastly, execute a query under &lt;em&gt;Events &amp;gt; onClick&lt;/em&gt;. This button will query data from the deleted datasource you have created.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2FnpKR9mxd5YppbHUJjoA58ciYPLYMZ5h-xmkiksPbjvjqM4EsiXj2gJ_VsazEpvLhzCaKYdeZhr4VC8hAHQvdGwKYdSMPc5Dzr_eY_bqOz1hxpSmQTcGhgAqN5pTEdN6-nPZiPmuT" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Flh5.googleusercontent.com%2FnpKR9mxd5YppbHUJjoA58ciYPLYMZ5h-xmkiksPbjvjqM4EsiXj2gJ_VsazEpvLhzCaKYdeZhr4VC8hAHQvdGwKYdSMPc5Dzr_eY_bqOz1hxpSmQTcGhgAqN5pTEdN6-nPZiPmuT" alt="button_widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let’s test out the delete method to see if it is working properly.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157284656-bb6a605e-fe76-472a-96a6-d71c2347f354.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157284656-bb6a605e-fe76-472a-96a6-d71c2347f354.gif" alt="delete_method"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Nicely done! Our widgets and datasources are well implemented and functioning properly.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Deployment&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;So far, we have done a great job. The last phase of this project will deploy our application. On the right section of the dashboard, click on &lt;em&gt;'Deploy'&lt;/em&gt;. You can also deploy this application by connecting to a Git repository.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Our application is deployed!&lt;/em&gt; 🎉&lt;/p&gt;

&lt;p&gt;Finally, to test the work we have done so far. Try creating a new contact:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157284930-d04a6b76-9e4a-462e-a1ca-74428fef9b7d.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157284930-d04a6b76-9e4a-462e-a1ca-74428fef9b7d.gif" alt="deployment"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We will also test the delete button to ensure it's working as well:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157285060-ff3bcbb6-eafa-4a16-af80-ec5b660da5bc.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F52820835%2F157285060-ff3bcbb6-eafa-4a16-af80-ec5b660da5bc.gif" alt="delete_button"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Successful!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In this tutorial, we created an amazing user interface for our contact application with low code. I hope you had fun building!&lt;/p&gt;

&lt;p&gt;Happy coding!🙂&lt;/p&gt;

</description>
      <category>python</category>
      <category>django</category>
      <category>appsmith</category>
    </item>
  </channel>
</rss>
