Wondering if you can display all the top selling items from all of your sales with their total quantity and total amount.
Yes, in this article will show you a simple way for achieving that.
Prepare your tools for making this project. I am using the following below. (May differ from what you are using but you can use your alternatives as long as it does the same job)
- XAMPP (Or any other Web Host with MySQL DB Local/Online).
- Code/Text Editor (I am using Sublime 3)
- Bootstrap and Font Awesome
Prepare your database ks_top_items and a table inside of it with the following fields.
Populate your database table so we can later fetch all the data and display in the main page.
Name your product and its unit price; declare the quantity that been sold or taken out, and the date of sale from the word itself. You can create this sample.
You can create rows as much as possible you can better compare the difference of each items from their quantities and total amount.
Create your project directory and start creating your configuration file, config.php.
Declare your $database with the database name you created earlier.
Your main page, index.php.
Do not forget to require your configuration file as follows.
Write the html page. Include Bootstrap 4 required sources in head and before end of the html like from the sample. (I am using the downloaded sources of bootstrap).
Inside the html <body> we will be needing a form and a table elements. <form> for building the query of user and the <table> for showing the results.
Your form should have the date range and the count of rows to display. Look like the following.
Your <form> element contains this following code.
The <table> element display the rank, product, unit price, total quantity, and total amount.
When user search with the date range and row limit, the final output of the project will be the following.
You can download the full source code below.
SOURCE CODE
1. Download the source code & place it on your host.
2. Create a database ‘ks_top_items’.
3. Import the sql file located at the source code's folder.
4. Test it on your host.
DOWNLOAD IT HERE -> DOWNLOAD
Enjoy !
Please share this if you find it helpful. Thank you.
No comments:
Post a Comment