How to Create Simple Shopping List using php mysql jquery Bootstrap

View Demo Download Project File
Many of you have the habit of forgetting things when you go out for shopping? I am definitely one of those guys. Writing down the shopping list item on paper is one of the traditional ways to remember stuff. It was one fine day when I thought why not create a web app to do the same thing. So I created this simple shopping list using PHP Mysql jquery and bootstrap.

About shopping list application

Before getting started, let me tell you about the features of this application. This simple shopping list application was created by me with an intent to track down the list of item (digitally) to be purchased when a person goes out for shopping. Have a look at the detailed features below:

  • User can create as many item as they want.
  • User can check the item if they have purchased it.(Ajax feature).
  • Left over item which is not bought/ not available will be left unchecked.
  • User can clear the the entire list in one go, or they can delete a single item individually.
  • Application is created using PHP and MySql and have the usage of PHP PDO classes.
  • Bootstrap Framework has been used for for developing the User Interface ( UI) and also to get mobile friendly look.
  • JavaScript and JQuery has been used for client side validation and triggering/binding events.

Ups and Downs of Shopping List Application

Since nothing is perfect in this world, this application has its ups and downs. Let’s have a look at them

Since nothing is perfect in this world, this application has its ups and downs. Let’s have a look at the

Coding the application

Let’s get into the programmer mode. First thing we need to create a database and table for the application. Have a look at the SQL below.

Once the database is created we can move on and create a configuration file where site constants and database connection code are written. I call this page config.php

I am not going to teach about bootstrap framework in this tutorial. You can learn from their official website.

On the home page (index.php) of the application we will display the list of item on the shopping list. Also, we need to give option for adding new items and delete each item or delete the entire list as well. Have a look at the code for listing the shopping list item as a html table.

Displaying the records as a html table with check box to check/uncheck the status and a delete option as well.

When user click on the button ( Add new ), it is redirected to a page add-item.php where user add a new item on the text box and clicks on submit button. Upon both client and server side validation the item is added in the database. (Full code can be found in the download file below)

There are more codes, which you can see when you download the files available at the end of this post.

  • Delete items
  • Update status of item via Ajax
  • Clear shopping List

Future updates

If I get enough time, I might add some more updates to the current version

  • Multiple user with permission can access the application. ( say like only family members or only friends) .
  • Can track down prices of each item, so user can tally the shopping total.
  • User can add comments for any item ( if any)

View Demo Download Project File

Related Post

21 Comments on “How to Create Simple Shopping List using php mysql jquery Bootstrap”

  1. Not gonna lie….this all seems liks gibberish to me lol I think my brain just isnt wired for coding. I will definitely pass this along the all my coder friends they’ll def find this info useful!

  2. Good to see the requirements for the shopping list. This post is a reminder for me. I need to refresh my PHP skills. Also, need to finish pending projects.

  3. Ah my husband actually created something like this when it was taking us ages to write shopping lists. Now we have entered all of our recipes into a database and then we pick which meals we want and it sends us an email of all the ingredients we need, it’s fantastic!

Leave a Reply

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