http://electronics.malgadi.co.in
Malgadi is a for the students, by the student's venture. It is a non-profitable organization started by the college students to provide better quality electronic components at a reasonable rate. Along with this, we also organize workshops and seminars in colleges to impart technical knowledge to students.
We intend to develop this platform and extend its reach to as many students as possible, hence making technical education a bit more interesting. This is the platform which made us technically potent along with an experience of entrepreneurship.
Malgadi is a subsidiary company of Heaven Solar.
The Malgadi Electronics website for the user, works similar to any other online shopping website:-
- Add items to cart
- Checkout
- Provide delivery information
- Place order
Apart from this, other functionalities on the website are:-
- Search for a product
- Send a message
- Track Order
- Write a Review
- Subscribe to an Out of Stock product
The Member Section is located at /manage of the root directory. It is intended to be used by the members to control and manage the website. The following pages are available in the member section:-
- Pending Orders (Home)
- All Orders
- Products
- Reviews
- Messages
- Statistics
- Configurations
These pages gives full control of the website to the manager. All these functionalities are described later in the documentation.
Following are the technologies used in the production of this application.
HTML5 is used for basic markup in web pages.
CSS (MaterializeCSS)
Materialize CSS is used for the front-end components. Materialize CSS is a modern responsive front-end framework based on Material Design.
JavaScript is used for the interactivity on the client side.
AJAX is used to make calls to the API which manages the cart.
JSON is used to store configuration data for some webpages.
Core PHP is used to create the API and which handles almost everything from user messages to product information.
MySQL database is used to store data on server.
The Member Section requires a password to be accessed, for obvious reasons. There are 2 different level of privileges for Member Section.
- Master Login
- Normal Login
Both of these passwords are hard-coded in the PHP script in the form of SHA-1 Hash.
This privilege level offers all the functionalities required to handle the website. It consists of all the following pages:-
- Pending Orders (Home)
- All Orders
- Products
- Reviews
- Messages
- Statistics
- Configurations
This privilege level offers only sufficient information to non-technical members. It consists of the following pages:-
- Pending Orders (Home)
- All Orders
- Statistics
Pending orders are listed in the form of drawers for each order. Clikcing on these drawers will pull all the information of that order as shown below. The number on the drawer handle indicates the Order ID.
Clicking on the Email ID or the phone number will directly open the email app and the caller app respectively, so there is no need to copy it when needed.
To mark the order as delivered hit the deliver button in the drawer and to cancel the order, hit the cancel button. To perform this action the member must select their name from the top dropdown, so that there is always a record of who handled which order. Once these actions are performed, there is no going back because emails of confirmations have been sent by this time.
The Stock Requirement function will list out all the products along with quantities required to complete the pending orders. Moreover it will also show the order ID of that product requirement. Same information, different view.
This page will display all the orders from the database. The drawers are marked with the order status of pending, canceled and delivered. Opening the drawer will show the same information as in the Pending Order section and will also show who delivered or canceled the order. An order can also be searched by the order ID using the search form available at the top of the page.
This page displays and controls all the products available on the website.
The top part of this page contains the following components:
-
Search
Used to search a product by the product ID. The product ID can be known by looking at the URL of the item page on the website. The number afterqin the URL is the product ID. -
Waiting List
This will display the number of people "waiting" for an out of stock product. When a user uses theNotify Mefeature for the out of stock products, that information is shown here. When the product is made in stock, these users are automatically notified via email. -
Add Product
This function can be used to add new products to the website. It is very important to follow the Add Product Guidelines in order for the website to function correctly. These instructions are avilable at the top of the Add Product page.
The rest of the page contains the listing of the individual items. Each item has it's own card. Each card looks like the one showed below.
The number in the heading is the item ID followed by the Full Name of the item. The waiting shows the number of people who are Waitng for the product to be in stock, i.e. the number of people who used the Notify Me feature for an out of stock item. Once the item is in stock, these people are automatically notified via email.
Further, there are 3 switches, Stock Status, Homepage and Featured. The use of each switch is described below.
-
Stock Status
If the item is in stock, leave the switch on. And to make the item out of stock, simply turn off the switch. Easy! -
Homepage
If this switch is turned on, the item will show up on the homepage of the website. Use this feature to display most common items on the homepage. The homepage items will be shown after the connect with us section on the homepage. -
Featured
If this switch is turned on, the item will show up in the top part of the homepage. This function is reserved for top selling products of the website. The featured items will be shown before the connect with us section on the homepage.
Please Note
- Do not turn on both homepage and featured switches. Doing so will display the product twice on the homepage.
- Try to keep the number of featured items around 4 and the number of homepage items no more than 20. This will ensure a nice view of the page and fast loading.
There are 2 more functions remaining, edit and delete. To make changes in the information of an item use the edit function. Just like Add Item, edit also has some guidelines that are to be followed. These instructions will be available on the edit page itself. And finally, the delete option will permanently delete the item from the website. There is no going back from this.
This page will display all the reviews submitted by the users. Each review is on the form of a drawer. Clicking on the drawer will display the review as shown below.
Each drawer has a switch on the right. This switch controls the visibility of the review. When a new review is posted, it won't be visible on the website right away. The switch will be off for the new review. If the review is worth showing on the website, simply turn on the switch.
This page will display the Contact Messages and the Special Orders of the users, submitted via the website.
Just like reviews, each message as a separate drawer. Clicking on the drawer will display the message.
On this page, all sorts of statistics are available for analysis. These statistics include sales, orders, views, users, various comparison graphs, etc.
This page allows you to change certain configurations of the website. In order to use this, knowledge of JSON language is required because these configurations are stored in json format.
There are 4 configuration files that control various aspects of the website. Each described below:
This configuration is for the full width image slider on the homepage of the website.
Each image has a caption and a sub caption. Any number of slider images are possible, but it does affect the page loading time. Thus, about 3 images would be just fine. The image path has to be provided in the image key of json.
The 2 captions keys in json are - captionBig and captionSmall, for a caption and sub caption respectively.
The caption and the sub caption, both have it's own (MaterializeCSS) classes. These keys are available in the json as well, namely captionBigClasslist and captionSmallClasslist. Use these to change the colors of the caption. Refer MaterializeCSS website for color classes.
To add/remove a slider image, simply add/remove objects to the array.
Refer MaterializeCSS website for more information on the full width slider.
The JSON slider data looks like this:
This file maintains a list of current team members of Malgadi Electronics. Further, this list is used on the about page to display images and in notifications.json for configurations. Thus team.json is important to maintain. It looks like this:
Save the image in the given directory and provide the relative path in the image key. The email key is required for notifications (for notifications.json).
Simply add/remove the objects as shown in the json array to add/remove team members.
Please Note
In order to display team member images properly on the about page, the dimensions of all images should be square.
In this application, whenever an there is some activity on the website - placing an order, submitting a message, etc., The desired team members are notified automatically by email. This file stores the name of the people to be notified on various events as explained below.
- orderPlaced: When a new order is placed through the website.
- newMessage: When a user submits a contact message / special order.
- newReview: When a new review is posted.
- orderCanceled: When an order is canceled through the member section.
The file looks like this:
Important
- Use exact names used in the team.json file because it fetches the email of the person from team.json file.
- Do not put more than 3 names per category because there is some time cost in sending these email.
When the call button is pressed on the website, the following modal pops up:
This file configures the people shown in this modal.
The file looks like this:
This file's on it's own. Thus, names can be different in it. You may use the same image path used in the team.json.
Simply add/remove objects in the array to add/remove people from the contact modal. Any number of people in the modal is possible but 3 is most favourable.
The folder /db-backup contains a backup generator of the database. It generates a database backup in the same folder and updates it every week. So if anything was to happen to the database, you may find a backup in this folder.
This file is present in the root directory. It sweeps the website's error logs periodically and notifies the person whose email ID is provided in the file about the error if found.
This covers everything that is required to run the website without any issues. If everything is followed in the documentation, the website is least likely to show any errors ever.