In this Assignment, you will build a supermarket product management app that persists da offline. You will use IndexedDB and Localbase library to read, add, update, and delete produc in the database. The Product Management App should have the following CRUD features: 1. Create Product: when the user clicks on the create new product button in figure 1, you should open the add product page in figure 2 that allows the user to add a new product. Once they click on the save button, you should navigate them to the product page and show the newly added Product, as shown in figur Doha - Supermarket Read Products Figure 1: Product Page - Before adding any product Doha - Supermarket
SQL
SQL stands for Structured Query Language, is a form of communication that uses queries structured in a specific format to store, manage & retrieve data from a relational database.
Queries
A query is a type of computer programming language that is used to retrieve data from a database. Databases are useful in a variety of ways. They enable the retrieval of records or parts of records, as well as the performance of various calculations prior to displaying the results. A search query is one type of query that many people perform several times per day. A search query is executed every time you use a search engine to find something. When you press the Enter key, the keywords are sent to the search engine, where they are processed by an algorithm that retrieves related results from the search index. Your query's results are displayed on a search engine results page, or SER.
![In this Assignment, you will build a supermarket product management app that persists data
offline. You will use IndexedDB and Localbase library to read, add, update, and delete products
in the database.
The Product Management App should have the following CRUD features:
1. Create Product: when the user clicks on the create new product button in
figure 1, you should open the add product page in figure 2 that allows the user
to add a new product. Once they click on the save button, you should navigate
them to the product page and show the newly added Product, as shown in figure
Doha - Supermarket
Add Product
Read Products
Prodat
Figure 1: Product Page - Before adding any product
Doha - Supermarket
Produs
A rodut
Create Product
Ne cer
The best ern the wor
Pce
Figure 2: Add Product page
Doha - Supermarket
A Pr
Read Products
wodc
Deserpon
Pce
Acon
The best N erewo
Figure 3:Product Page - After adding Product
2. List Products: as soon as the application loads, you show all the products saved
in the database in a table, as shown in figure 4.](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F218f9072-257e-40a1-b166-59377df19144%2F739a8891-ec3e-494c-b9d8-5c409e114547%2F1wywi4_processed.png&w=3840&q=75)
![Doha - Supermarket
4. Delete Product: Delete the selected Product from the database and reload the
Frodugs
ds Product
page.
Read Products
Doha - Supermarket
Procucts
Ad roduct
localha y
Read Products
Creane New YORKT
Caman
O Nane
Acson
Descnpnan
Price
The best Niga nCkern the wornd
Na sse
Edi
ID Name
Deseriotion
Price
Action
Skeeping wel a mpurlant.
Nga erTD
The be Naya sernme wond
Reat
Dnin
Ephone
You roud thta une Eyou love m
ST
P
Sieping wet a impora
Reat
Edt
Dee
7 Caphore
You need this one e mse
Mouse
Very uaetul f you kove your compuer
S11.35
E
Dekte
eat
Dee
Trash Can
It wil halp you maintain cieaniness.
sa as
53.95
Dee
After you complete the Assignment, fill in the TestingDoc-Grading-Sheet.docx and save it inside
the Assignment3 folder. Push your work to the Github repository.
Eyn Gces
I wil make you read teer
Dek
Tnis ka very goos ank mor amwes
atorte
Ed
De
A DLUseT n the NHÀ
Haea
D
Red
Ed
Figure 4: Products page
3. Edit Products: If the user clicks on the edit product button, you should take the
selected product details to allow the user to update the information of the
selected Product, as shown in Figure 5.
Doha - Supermarket
Produs
Ad Produt
Update Product
Name
N scer EDTED
Descron
The best Ni cherin the wond
Pce
seve Change at prouts
Figure 5 Update Product](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F218f9072-257e-40a1-b166-59377df19144%2F739a8891-ec3e-494c-b9d8-5c409e114547%2Fotw8sco_processed.png&w=3840&q=75)
![](/static/compass_v2/shared-icons/check-mark.png)
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
![C How to Program (8th Edition)](https://www.bartleby.com/isbn_cover_images/9780133976892/9780133976892_smallCoverImage.gif)
![Database Systems: Design, Implementation, & Manag…](https://www.bartleby.com/isbn_cover_images/9781337627900/9781337627900_smallCoverImage.gif)
![Programmable Logic Controllers](https://www.bartleby.com/isbn_cover_images/9780073373843/9780073373843_smallCoverImage.gif)