Overview

Connecter BxB is a platform designed by keeping in mind to ease the communication gap between wholesalers and retailers. The idea was to make B2B trade transparent and eliminate the third party. In this platform the retailer can order the product and amount of products they want by themselves without any kind of third party and the wholesaler can deliver the product. Likewise, the wholesaler can manage the product incorporation and distribution.

Web Application Architecture

First user request to server for connector Bxb. View sees the user request, retrieves appropriate data from the database, then renders back the template along with retrieved data

Use Case Diagram

• Above figure shows the use case diagram for web applications.
• We have two types of users: Admin and User
• The functionalities accessed by Admin are : Create Product, Update Product, Delete Product, View Products, View Profile, View All Profiles and Assign Privileges.
• The functionalities accessed by User are : View Products, View Profile and Make Request
• Users can make a request to the admin for products

Sequence Diagram

• Above diagram shows a sequence diagram for our web application.
• First user will be redirected to the Login Page. If the user does not have an account, then he/she can go to the Register Page.
• After filling the register form, the user will be redirected to the Login Page.
• After login, the user will be redirected to the Staff Dashboard and admin will be redirected to Admin Dashboard after interacting with databases whether the user exists or not.

Templates

1. Dashboard

2. Index.html

• This is the index page of the admin dashboard.
• Information contains the message that we want to show on a daily basis.
• The Statistics section contains three cue cards: Staff, Products and Order. The number shows the quantity of cue cards. We have 9 staff members, 11 products and 11 orders.
• The Pie Chart shows the number of orders requested by users for any particular product and the area shows the quantity of product.
• The Bar chart shows the products and quantity of products we have.

1. Product.html

• This is the product template. It shows the Navigation bar , Information and Statistics section same as other pages.
• Here it shows the products in table format with name, category, quantity and activity.
• Admin can search by applying filters like name, category and quantity.
• To add the product it contains product form with the field name, category and quantity.
• To modify or delete any product admin is required to click on edit or delete button of a particular product.

1. Staff.html

• This is the staff template and contains information about staff. It shows the Navigation bar , Information and Statistics section same as other pages.
• Here it shows the users information in table format with username, email and phone no.
• Admin can view profiles by clicking the view button of any particular user.
• Admin can use search by applying filters like username.

1. Order.html

• This is the order template and contains information about orders. It shows the Navigation bar, Information and Statistics section similar to other pages.
• Here it shows the order placed by users in table format with product, category, quantity and order date.
• Admin can search by filters like product name, product category and staff.

1. User

2. Login.html

• Login can be done via email id and password.
• Validation is provided for email and password and respective warning will be provided
• Forgot password feature is provided which will take mail ID as input and send new password generation mail to that ID.
• After login, users can be redirected to either admin or user dashboard depending on the privilege provided.

1. Register.html

• Users can register themselves by submitting their username, email, password.
• After clicking on the submit button user can redirect to login page.

1. Logout.html

• User logout from the session after clicking on the logout button.
• Users can login after clicking login button.

1. Index.html

• It shows the Navigation bar, Make request form and Order requests.
• Navigation bar contains a view profile and logout button.
• User can make request by filling a form with product name and product quantity fields.
• Order Request contains the request made by user in ascending order.

1. Profile.html

• User can see the details of his own
• After clicking on the edit button the user can edit all the details including profile pic.

1. Forgot_password.html

• Users can change the password by entering an email and submitting the details.

Features

1. Admin

2. Add product

• Admin can add products by filling a form which contains the name of the product, category and quantity as a field.
• If admin wants to add a One Plus product of Electronics category and 50 quantities.

• Green flash message shows that One Plus product is added. In table product number 12 One plus is added.

2. Edit product

• Admin can edit a product by clicking the edit button in the activity center of that product. Form is populated with data of that product.

• Quantity is changed from 50 to 100.

• One plus quantity is modified in 12 number row.

3. Delete Product

• To delete a product admin is required to click on the delete button besides that product. Then it shows the confirmation message like below.

• One plus product is deleted from the database. Here row no 12 is deleted.

4. Searching by data

• Admin can search in a table using a search filter. Here the clothing category is selected and the table shows all the products with category clothing.

• Here rohan is selected as a staff member in the order table. And it shows all orders placed by rohan.

• Rohan is selected as the username in the user table.

5. Edit Profile

• After clicking on the profile button in the navigation bar admin is redirected to the profile page. It shows the image of admin, name, email, phone, address as profile information.

• After clicking on the edit button, the form is populated with all the information. Here address and profile photo are changed.

• After clicking on the update button profile is updated which is given below.

6. Pie Chart & Histogram

• This pie chart shows the order placed by all the users
• Area shown by the chart is the quantity of the order like pencil have 100 quantities.

• We can see the remaining order by clicking on the name of the order and chart changed the area accordingly.

• Here histogram shows all the products with frequency of its quantity. For example Paracetamol has 250 quantity and Pencil has 150 quantity.

Staff

1. Register

• User can register by submitting the details like username, password and email
• Users can register themself by clicking on the register button.

• After clicking on submit button user redirect to login page
• Green message flash on the screen saying register successfully.

2. Login

• Users after submitting details like username and password, user can be able to login and redirect to dashboard

• This is the user dashboard shown after login page

3. Logout

4. Make request

• If the user wants to make a request for a particular product of a particular category and a certain quantity.
• Users can submit the details like product and order quantity like USB-100 and 50 respectively.

• After submitting the details, the user can see the request on the screen below.

5. Edit profile

• If the user/admin wants to edit their profile they can edit by clicking on the button.

• User can edit the details like username email address, address, phone, image.

• After clicking on submit button user can see the changes on the screen as below

6. Forgot password

• If the user forgot the password and want to change it, user have to submit the email id.

• Reset mail sent after entering email

.

• Password reset mail came to the user after entering his/her mail ID.

• By clicking on the link sent on mail we are taken to the new password page.

• After entering a new password, the success page is shown.