The website shopping system (Online Shopping System) was using the internet as the sole method for selling goods to its consumers. It would allow customers to register with the site and purchase goods online. Using sessions to save users, users can add and purchase products. Various products where displayed through a database, in the index page as well as categorized and dispalyed in subdetails page, from where the user can view the products or selected items by clicking the Quick View button that appears while hovering the cursor over a specific item in Subdetails page.
Once viewed the product properly and checked if the quality of item meets the expectation of customer, they can add item to the cart from where the user can select partcular item and buy it and can also buy all the items present in the cart. The cart page fulfills almost the use of both wishlist and cart in this shoppping site.
Since it was my first E-commerce website project, which have been done in a duration of 6 months(approx) as major project while pursing my MCA degree,so payment gateway mechanism is yet to be provided. Hopefull in upcoming days it will be added.
HTML5, CSS3, Bootstrap, Javascript, PHP
Xampp control pannel(cross platform)
Apache server provided by Xampp
MYSQL
- First download the XAMPP server and start it.
- Now download this project, unzip it and save it in htdocs folder under Xampp folder which resides by default in C drive while installing (if installation location of XAMPP server is not changed during installation).
- location of htdocs is c:/xampp/htdocs
- Open your browser.
- Within the DB folder in htdocs select the shopping.sql file and import the file using XAMPP control pannel.
- url for XAMPP control pannel= localhost/phpmyadmin
- Type in url= localhost/cyber_shoppe/index.php
The user index page of online shopping site provides us with different options in the navigation panel. From where user can Sign in if already registered or if the user is new then he/she can register first themselves. Then login with the credentials.
By clicking on the “Sign in” link, the Modal for login appears at the top of the screen. Then by putting the correct credentials in the correct fields, a user can login to their account thereby clicking on the “LOGIN” button, if the user account already exists.
After clicking on login button if the user provide correct login credentials the control will display a success message which states that the user has successfully logged in within a pop up message, below which an “OK” button is placed, by clicking that the control will redirect the user to the index page where in the top right side a message will be displayed which states that the user has successfully logged in his/her account.
In the index page (Home page), the navigation panel also provides several other features like choosing the product category wise. Initially, the products are divided into two categories Men’s and Women’s section. By clicking any of the categories a drop down menu appears where the subcategories are listed.
By clicking on any of the subcategories, the user will be redirected to another page where the products of those particular categories will be displayed to the user which are available in the stock. From this page we can see any products detail information if we wish to, by clicking on the “Quick view” option that appears in the image of each product whenever we hover the mouse cursor over any particular product.
By clicking on “QUICKVIEW button”, the user will be redirected to a new page where the information of the specific product is displayed in details like the original price in Indian currency along with the amount of money which is off on the particular product. The availability of the size is mentioned there, along with number of item present in the stock.
The user can also select the quantity of items he/she want to order together, by clicking on the dropdown menu positioned above the button “Add to Cart”.
By clicking on the “Add to Cart” button the user will receive a pop up notification above the page which will display a message stating that the item is added to Cart. Below which “OK” button is placed, by clicking which the control will redirect the user to the cart page.
In the cart page, the product that we have added to the cart, will be displayed by all the details and information in a tabular format. And at the end of each Product details which is added to the cart, there is a cross button, By clicking which, the Item will be removed from the cart.
By clicking on the cross button, the user will receive a pop up menu above the page which will display the message that “Your Order for the particular product is cancelled”.
Below which there is a “OK” button by clicking which the control will redirect the user to the cart page where he/ she can see that the added product is removed from the cart. And also the total amount of the money, which is displayed in the cart page against the product that is added also became zero (0).
User can also add multiple products in the cart and by clicking the “Buy” button, user can purchase the products available in the cart.
Then by clicking the “Buy” button, the pop up notification will be displayed above the screen that states the user with a message that the user has successfully purchased the order.
If multiple products are added in the cart, then if the user click the cancel button then all the products added in the cart will be cancel and the cart will be empty.
When the user click on the “Cancel” button, then a pop up notification will display above the top of the page which will display a message states that “Your orders are cancelled!!... HAPPY SHOPPING!!..”.
From the navigation panel if the user click on the About link, the control will redirect the user to the about us page, where regarding our online shopping website, details are written down.
If the user click on the contact link given in the navigation panel, then the control will redirect the user to the contact page of our shopping website, which will provide all the necessary information’s and details regarding how to reach to the owner of the shopping site if any sort of queries need to be clear.
By clicking the logout link, the control will display a pop up notification, which states that the user has successfully logged out.
By clicking the “OK” button the control will redirect the user to the homepage or index page of our online shopping site. Where the user again needs to login if he/she wants to purchase or view any product.
When an existing Vendor, provide all the Credentials for login in the correct place.
After clicking “login” button the control redirect the vendor to the vendor index page of the inventory management system.
From the index page if the Vendor clicks on the “ADD NEW PRODUCTS” tab, then the control will redirect the vendor to a new page from where we can insert the products.
From the vendor index page if we click on the tab “MANAGE PRODUCTS”, then the control will redirect the vendor to a new page from where we can manage the products available under the particular vendor.
If the vendor clocks on the “Edit” button beside every product, then the control will redirect the vendor to a new page from where the vendor can update the information regarding the product.
In the Manage product page if the vendor clicks the “Delete” button beside each product listed in the tabular format, then the data of that product will be deleted from the database of the online shopping site.
In the vendor index page if we click on the “TOTAL BUSINESS” tab, then the control will redirect the vendor to the new page, where the total business done by the particular logged in vendor, is written in the Table format, along with the total business.
By clicking on the drop down present in there panel of the Vendor, labelled “DASH BOARD” the control goes back to the vendor index page.
.In the top right corner when we click on the vendor name in the index page a drop down menu arises. From which if we click on settings, then the control will redirect the vendor to the new page from where the vendor can update his/her profile.
In the navigation panel of vendor, at the top right corner, if the Vendor clicks over his/her name, then a drop down menu will arise in which there is an option called logout.
By clicking on the link “logout”, a popup notification will arise at the top of the page with a message, which states that the vendor has successfully logged out from their account, and the control will redirect the Vendor to the login page.
The Admin is mainly plays the role of managing the users and vendors in the inventory management system. The admin profile is pre-registered in the system.
When the admin provides the correct login credentials in the correct field of the login page, and click on the “Log in” button, then the control redirects the index page of the admin account in the inventory management system.
When the admin enters the Index page of the inventory management system, then he/she can perform all the operations present in the tabs. When the admin enters the index after successful login, then he can view the request of Vendors which are pending. By clicking the View request.
After clicking on the “VIEW REQUEST” link in the tab, the control redirect the admin to another page from where the admin can see all the pending request of the vendor’s in a tabular format. Beside every vendor request there is an action column, from where admin can either “Accept” the vendor request or by clicking on “Delete” button the admin can delete the pending request of the Vendor.
From the admin index page, the admin can also change the active and inactive status by clicking on the “USER REQUEST” link in the tab. When the Admin clicks on the “USER REQUEST” link from the tab, the control redirect the admin to the new page in which the details of all the users are displayed in the tabular format.
And beside every user detail there is an Action section which consists of two button “Active” and “Inactive”. If the admin clicks on active button beside any user details, if the user was previously inactive, then the user will now become active. But if the user is previously active, then the message will appear that the user is already active.
And if the admin clicks on inactive button, if the user is previously active, then the user will be active now. But if the user is previously inactive, then the message will displayed to the admin that the user is already inactive.
From the admin index, the admin can also block or delete vendor, by clicking on the “MANAGE VENDOR” link from the tab of the index page. When the admin clicks on the “MANAGE VENDOR” link, the control redirect the admin to a new page, where all the vendor’s details are displayed in tabular format, along with the action buttons “Block” and “Delete”.
By clicking on the “Block” button the admin can block the Vendor. And after clicking the “Block” button, the vendor data will not be shown in this page.
By clicking the “Delete” button the Vendor account will be deleted. And also the corresponding data of that particular Vendor will not be displayed in this page.
Admin can also view the total business of all the vendor’s from the admin index page. By clicking the total business tab from the index tab, the control will redirect the admin to new page in which details of all the Vendors sell is displayed in tabular format along with the total sell.
In the top right corner, the name of the admin is displayed, by clicking on it, a drop down list will open, in which one of the option is settings.
By clicking on the setting option, the control will redirect the admin to the new page in which all the details of the admin is displayed, from where admin can change its password and update his/her account.
In the top right corner of the index page, the name of the admin is displayed, by clicking on the name a drop down menu will appear on the screen, which consists of options, among which one option is logout. By clicking the logout option, the control will redirect the admin to the login page from where the user can login again.
Since the admin clicked the log out button, so the admin account get logged out and the control is redirected to the login page by displaying the popup notification above the screen, along with a message that states “ADMIN Successfully logged out!!!.......”. By clicking the “OK” button below the pop up notification message, the control redirect the admin to the login page.
- Niladri Goswami (https://www.linkedin.com/in/niladri-goswami-0972a2118/)
- Souvik Basu (https://www.linkedin.com/in/souvik-basu-a4a262b5/)