CRUD Operations with Indexdb Database – Step-by-Step Guide


Hey, welcome to the daily tuition website. We gonna learn how to create CRUD ( create, read, update, delete) Operations with Indexdb database. In this tutorial, we are going to learn something very interesting. So what is CRUD basically? CRUD stands for create, read, update and delete.

So now using Indexdb database I will show you how you can create crud operation with javascript. but let me first inform you what is the indexdb database.

Indexdb

 

What is IndexDb?

According to Google, IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs.

So now we know that what is indexdb let’s move on and create a project. so we actually achieve everything with functional programming way.

Project Structure:-

  • src folder > Index.html
  • src folder > style.css
  • js folder > main.js
  • js folder > module.js

So to create a new project create an empty directory with any name you want and create two folders. Source (src) and javascript (js). In src folder create index.html and style.css and In js folder create main.js and module.js file.

Ones you have done that place this code inside the index.html file.

Index.html

As you can see, In this file we will add a bootstrap library, font awesome icon CDN, Dexie API, and custom stylesheet.

Now let me explain these linked files one by one. We gonna use the bootstrap to glorify the template and create beautiful UI. Then we have font awesome link to use icons in the application and dexie API to create and work with Indexdb database.

You can create Indexdb database with vanilla javascript also but using dexie API it is very easy to create it. Now just after that, we have Input textboxes to insert values in the database and four buttons to create, read, update and delete data.

Now just after that, you can see we added a table. In this table we have columns but we commented on the data. Because we are going to fetch data from the database and dynamically create that using javascript. As you know you can create HTML elements using javascript as well. So we gonna do that using javascript.

Now let’s see how style.css file look like.

Style.css

As you can see, In this file we added style and the animation, therefore, we included @keyframe to create animation. But why we need to make this animation? When you add update and delete any record from the database we will show the message to the user using this animation.

Now we know how this application looks like but does it work well? Let’s find out the answer to this question by creating a module. To make this application readable and maintain our code we are going to create a module. In this module, we have several functions that help us to reuse the code.

Now let’s see how the module.js file looks like.

Module.js

In this file, we have several useful functions. We use these functions to create, read, update, and delete data from the database. You can also notice we are creating a new database using productdb() function. To use these functions in the main.js file we exported these functions and consume it using import statement.

Well, If you are familiar with module javascript then import and export is not a big deal for you. To use these functions we use function name and the parameter with respective arguments. we are using pure and HOC functions to get the result. 

Now ones you now the module let’s use it in the main.js file to complete the application.

Main.js

In this file, you can see so many complicated sections and functions. I try to explain it with the comment in the code. The main part of this file is we used table() function to create dynamic table data. Take a look at this function to understand how you can create dynamic data using javascript.

As I said earlier, we use module functions in main.js file to create an abstraction to the functions.

To use this application open index HTML file with an internet connection. Use the add button to add data in the database. keep in mind we added validation to the textboxes so the user cannot add data without entering any value in the database.

To read or refresh the database use a read button. You usually need read button when you update data in this application. Then we have the update button to update values in the database. To update the record select the record using the edit button. You gonna get the record values in the textboxes. Update it whatever you want and press the update button to update it. Press read button to refresh the database. Done.

To delete data we used two ways. first by clicking on the delete icon to delete the specific record and second by pressing delete all button. When you press Delete all button it will delete all the record from the database and start new from 1.

So that’s it. I hope you understand how to create this amazing Indexdb database CRUD operation. If you want to learn this tutorial using video lecture just open this link.

If you want to download this tutorial, click here.

Thank you for your support. See you at the next time.

Leave a Reply

Your email address will not be published. Required fields are marked *