Simple shopping list using php mysql jquery bootstrap


How 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.

View Demo

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

    • Runs on server, so can be accessed by any devices.
    • Mobile responsive application
    • Multiple user can use this application at the same time.
    • Unlimited number of items can be added to the list
    • As it runs on server so an internet connection is required.
    • If a person is buying a handful list of items, this app is just an added extra.

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)

I will be glad if you give your suggestion of future updates.

View Demo


About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.


Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.