Building a website for selling interior furniture using odoo framework Building a website for selling interior furniture using odoo framework
Introduction
Software Product Vision
Simplifying the Furniture Shopping Experience
One of our primary objectives is to simplify the furniture shopping experience for our customers To achieve this, we design a user-friendly interface that makes it easy for them to search for and discover products Smart search and filtering tools will help customers quickly find the items that match their needs and preferences This way,
13 customers can save time and effort during the shopping process while enhancing their online shopping experience
Quality and reliability are always crucial factors for an e-commerce platform We are committed to partnering with reputable manufacturers and suppliers to provide the highest quality products Additionally, our flexible warranty and return policies will ensure maximum benefits for customers, giving them peace of mind when shopping
We believe that only when customers are satisfied with the quality of products and services will they continue to support and trust our platform
To bring maximum satisfaction to our customers, we provide online interior design consulting services Our team of experts will help customers choose products that match their living space and style Besides, we offer product combination suggestions, creating complete and aesthetic interior collections Customers will not only purchase satisfactory products but also receive comprehensive support in decorating and arranging their living spaces
We understand that payment and delivery are two important factors in the online shopping process Therefore, we support a variety of safe and secure payment methods, helping customers feel secure when conducting transactions Our fast and reliable delivery service will ensure that products reach customers in the shortest possible time
We always strive to bring convenience and satisfaction to customers at every stage of the shopping process
Commitment to sustainable development is one of our core values We prioritize the use of environmentally friendly products, utilizing sustainable materials and green production processes At the same time, we encourage customers to participate in
14 recycling and environmental protection programs We believe that sustainable development not only brings benefits to the business but also contributes to protecting the living environment for future generations.
Project Scope
● Create, update, and store order information
● Track the status of orders from creation to completion
● Ability to update order status
● Create and manage a product list, including descriptions, images, prices, and technical details
● Allow customization of categories and brands for products
5.2 Shopping Cart System for Website
● Design a user-friendly interface for adding and managing products in the shopping cart
● Display detailed information about products, prices, and quantities
● Allow adding, removing, and editing the quantity of products in the shopping cart
● Calculate the total order value including taxes and shipping fees
● Store the shopping cart for users, allowing them to continue shopping on their next visit
● Integrate popular and secure payment methods such as credit cards, e- wallets, and bank transfers
● Create a smooth checkout process, from when the customer clicks
"Checkout" until the order is confirmed
● Ensure all payment transactions are encrypted and secure
● Comply with regulations regarding the security of personal information and customer data
Creation and Management of Vouchers
● Generate and manage various types of vouchers such as discount codes, gift cards, and buy x get y deals
● Set expiration dates, usage limits, and terms and conditions for each voucher
● Allow customers to enter voucher codes during the checkout process to receive discounts or promotions
Tools & Infrastructures
5 IDEs/Editors Pycharm ,Visual Studio Code
6 UML tools Visio, Astah, Draw.io, Figma
Table 1.6.1 List of tools and infrastructures be used
Technology used
Odoo is a software platform with outstanding features that not only enhance business management efficiency but also create the best possible user experience Firstly, the comprehensiveness of Odoo's software is noteworthy, offering a wide range of integrated applications from financial management, warehouse management, customer management to production management, helping businesses manage every aspect of their operations effectively
Additionally, Odoo is easily expandable and integratable with other systems, facilitating seamless integration with other applications and services, thus optimizing workflows and enhancing system interoperability
Another strength of Odoo is its reasonable initial deployment cost, allowing businesses to save costs when implementing and expanding the system This makes Odoo a suitable choice for both small businesses and large enterprises
Odoo is also a globally supported platform, with a large and diverse community worldwide This offers significant benefits to users, with multilingual support and diverse resources during the deployment and use of the system
Moreover, Odoo continuously upgrades its technology to ensure the system always provides the latest features and reflects the newest technological trends
Finally, the user-friendly UI/UX design is another highlight of Odoo The user interface is designed to be intuitive and easy to use, helping users quickly access and familiarize themselves with the system, thereby optimizing the user experience [1]
The Sales module of Odoo is a powerful and comprehensive tool that helps businesses efficiently manage the entire sales process from start to finish Designed with a user- friendly and intuitive interface, this module assists enterprises in tracking and managing the entire sales process, from generating quotations, processing orders, to managing delivery and payments [5]
Quote and Order Management: The Sale module allows users to create and send professional quotations to customers with just a few clicks Moreover, converting quotations into orders and tracking the status of each order becomes easy and convenient
Customer and Pricing Management: With the ability to store detailed customer information and manage price lists along with promotional programs, the Sale module helps businesses easily track the purchase history of customers and create suitable discounts
Product List Creation and Management: The Sale module allows users to create and manage product lists effortlessly Each product can be described in detail with information such as name, description, image, price, and technical details
Promotion and Discount Code Management: This module provides features to create and manage promotional programs, discount codes, and special offers, thereby creating attractive sales opportunities for customers
Advantages and disadvantages of Odoo's sales module:
The Sale module of Odoo brings numerous benefits to businesses, including comprehensiveness, ease of use, flexible integration, and detailed reporting Not only does it enhance work efficiency, but it also improves the customer experience, thereby boosting sales performance
Although the interface is user-friendly, newcomers may encounter difficulties in getting acquainted with all the features and initial configurations To fully leverage the module's capabilities, users need to have a certain level of knowledge about system administration and sales Additionally, the system functions require a stable internet connection to operate smoothly, which may be a hindrance for businesses in areas with poor connectivity
In the digital revolution of today, building powerful and flexible web applications has become an imperative Among the many technologies and frameworks available, ReactJS shines as a star, offering clear advantages along with some notable challenges
ReactJS, developed by Facebook, is a powerful JavaScript library designed to build user interfaces (UI) for web applications The prominence of ReactJS stems not only from creating visually appealing user interfaces but also from how it intelligently manages and reuses source code
One of the greatest advantages of ReactJS is its high performance Instead of updating the entire DOM, ReactJS utilizes Virtual DOM to update only the necessary parts,
19 thereby increasing the rendering speed of the application This enhances user experience, making it smoother and more enjoyable
The ability to reuse components is another advantage that ReactJS brings By creating reusable interface components, developers can easily reuse source code, minimizing repetition and enhancing the maintainability of the application
However, like any other technology, ReactJS is not without its challenges One of them is the difficulty in control, especially as the application becomes complex Managing the state of components can become complex and prone to errors if not handled carefully
Integrating ReactJS with other technologies can also be a challenge ReactJS primarily focuses on the user interface, so to build a complete application, you may need to integrate other technologies such as Redux for state management, React Router for navigation, and various other technologies This can pose a significant learning curve for beginners
Despite the challenges, the allure of ReactJS remains strong Its efficiency and flexibility have attracted a large community of developers and businesses worldwide, ranging from beginners to software development experts
Management Plan
1 Work Breakdown Structure and Estimation
No WBS Item East Effort
Total Estimated Effort (man-days) 54
Table 2.1.1 Table Work Breakdown Structure and Estimation
4 Select discount code in cart
5 Apply discount codes and promotions
16 Automatically create orders when users checkouted
21 Create, edit, delete conditional rules of loyalty
22 Create, edit, delete rewards of loyalty
Software Requirement Specification
Use Case Diagram
+ Homepage: The customer can access the homepage of the website + About Us page: The customer can view information about the company on the About Us page
+ Contact page: The customer can access the contact information of the company
+ Shoppage: The customer can browse the shop page to view and select products
+ Cart: The customer can add products to the cart and view the cart
+ Select discount: The customer can select and apply discount codes to their cart
+ Checkout: The customer can proceed to checkout to complete their purchase
+ Product management: The administrator can manage the products, including adding, updating, or deleting products
+ Pricelist management: The administrator can manage the pricing of products
+ Loyalty and discount management: The administrator can manage loyalty programs and discount codes
+ Order management: The administrator can manage customer orders
+ When customers access the shop page, information regarding the products needs to be sent across for display
+ When customers visit the shopping cart, they have the option to select a discount Relevant discount information is necessary for display.
System Actors
1 Administrator Represents a user who manages the system's backend functionalities This person is responsible for monitoring order status, managing orders, creating products for sale, setting prices for products, and creating promotional programs
2 Customer Represents a user who interacts with the system to browse and purchase products This user mainly interacts with the system's frontend
Table 3.2.1 List of system actors
Use Cases List
08 List discount can apply [Auto] Administrator
13 Loyalty and discount management Administrator
Table 3.2.2 List of use cases
In this section, I will describe each feature included in the project.
Feature Add to cart
ID and Name: UC-01 Add to cart
Description: A Customer accesses the website from the corporate intranet or from home, views the list product they want to buy
Trigger: A Customer indicates that he wants to buy product
PRE-1 Customer accesses shop page
PRE-2 Customers click on the "add to cart" button below the product they want to buy
POST-1 The product will be added to the cart with a quantity of one
Normal Flow: 1.0 Add Product To Cart
1 Customer asks to view the shopage
2 Shopage displays all publications of available products items
3 Customer selects one item from the list product
4 Customers click on the "add to cart" button below the product they want to buy
5 The system display quantity of product in cart Alternative Flows: None
Frequency of Use: Approximately 50 users, average of one usage per day
Table 3.3.1 Table describing function add to card
Feature Cart
ID and Name: UC-02 Cart
Description: A Customer accesses the website from the corporate intranet or from home, views the list product they want to buy The cart displays product names, images, quantities, prices, and subtotals, allowing users to adjust quantities or remove items Users can also apply discount codes and save products for later
Trigger: A Customer indicates that he wants to buy product
Preconditions: PRE-1 Customers need to access the shopping cart
POST-1 Displays products added to the cart with quantity and price
Normal Flow: 1.0 Display all products in cart
1 Customer click icon cart on menu
2 The system displays the products in the shopping cart
3 The system displays the total amount
4 The customer presses the "+" button near the product that wants to change the quantity
5 The system updates the product quantity and updates the total amount
6 The customer presses the "-" button near the product that wants to change the quantity
7 The system updates the product quantity and updates the total amount
8 When the product quantity is 0, the system automatically deletes the product from the cart
5 The system updates the total amount
Exceptions: 1.0.E1 There are no products in the cart
The system displays “Your Cart is Empty”
Approximately 50 users, average of one usage per day
Table 3.3.2 Table describing function card
Feature select discount
ID and Name: UC-03 Select discount
Description: The customer selects eligible discounts that have been created by the administrator
Trigger: The customer wants to add a discount code to the order
PRE-1 Customers need to access the shopping cart
POST-1 Displays information about the discount code and the discounted amount or additional product
POST-2 Update the total amount
1 Customers click on the “Select Discount” button
2 The system displays a list of applicable discount codes and has a code entry box
3 Customers select the discount code they want to apply
4 The system will calculate the discount amount based on the rewards installed on the system
5 The system displays the discount code applied to the shopping cart and updates the total amount
Flows: 1.1 User enters discount code
1 The customer enters the discount code into the box
2 Customers press the "Apply" button
3 Go back to step 4 in 1.0 Exceptions:
1.0.E1 The customer entered the wrong discount code
The system displays “Promotion code is invalid or has expired”
Approximately 50 users, average of one usage per day
Table 3.3.3 Table describing function select discount
Feature payment
ID and Name: UC-04 Payment
Description: Customers need to fill in personal information and delivery address Customers can choose payment method by bank transfer or via VNPAY payment gateway Customers can choose to deposit 50% or pay 100% of the order amount
Trigger: The customer wants to pay
PRE-1 Customers need to access the shopping cart
PRE-1 There must be products in the cart
POST-1 Orders are recorded on the management system
POST-2 Order status corresponds to payment method
1 The customer presses the “Checkout” button in the shopping cart
2 The system displays information fields such as phone number, shipping address, and payment method selection
3 Customers fill in all information and press the "submit" button
4 The system will redirect to the payment page
5 Order recording system on the management system
6 The system successfully redirects to the payment page
Flows: 1.1 Customers choose the transfer payment method
1 The system displays bank information and account numbers
2 When the admin receives the money, the admin changes the order status to paid status
1.2 Customers choose payment method via VNPAY payment gateway
1 The system switches to the VNPAY payment page
2 If the customer makes a successful payment, the system automatically changes the order status to paid
3 The system automatically redirects to the successful payment page
Exceptions: 1.0.E1 Customer does not fill in complete information
The system informs that please fill in all information
Approximately 50 users, average of one usage per day
Business Rules: BR-41, BR-42,BR-43, BR-44
Table 3.3.4 Table describing function payment
Feature Product Management
ID and Name: UC-05 Product Management
Description: Administrators can view all products, add new products, or edit products
Trigger: Admins want to manage products
PRE-1 Access to management software
POST-1 Displays products available on the system
1 Admin clicks on product on the menu
2 The system displays a list of products available on the system
3 The administrator presses the “New” button near the menu bar
4 The system displays the interface for adding new products
5 The user fills in the information and presses the “save” button
6 The system records information and adds it to the product list
7 From the product list screen, the user clicks on the product they want to change information
8 The system displays the detailed interface of the product
9 From the product list screen, the user clicks on the product they want to change information
10 The system displays the detailed interface of the product
11 The user edits the information that needs to be changed and presses the 'save' button
12 The system records information and saves it to the database
5.0 Delete the product from the system
13 From the product list screen, the user clicks to select the product to delete
14 The administrator presses the “action” button and selects
15 The system records changes and deletes products from the product list
Exceptions: 2.0.E1 The administrator did not fill in all the information
The system informs you that please fill in all information and highlight any missing information fields in red
2.1.E1 The administrator fills in the duplicate product code The system informs that the product code exists on the system 4.0.E1 The administrator did not fill in all the information
The system informs you that please fill in all information and highlight any missing information fields in red
4.1.E1 The administrator fills in the duplicate product code The system informs that the product code exists on the system
Business Rules: BR-01, BR-02,BR-03, BR-04,BR-05, BR-06
Table 3.3.5 Table describing function products management
Feature Order Management
ID and Name: UC-06 Order Management
Description: Admin can view all orders from the website Administrators can create orders from the management system Admin can change the status of an order
Trigger: Administrators want to view and manage orders
PRE-1 Access to management software
POST-1 Displays orders available on the system
1 Admin clicks order on the menu
2 The system displays a list of orders available on the system
3 The administrator presses the “New” button near the menu bar
4 The system displays the interface for adding a new order and automatically generates the order code and order name
5 The user fills in the information and presses the “save” button
6 The system records information and adds it to the order list
3.0 Display detailed information of the order
7 From the order list screen, the user clicks on the order he wants to view order details
8 The system displays the detailed interface of the order
9 From the orders list screen, the user clicks on the order they want to change information
10 The system displays the detailed interface of the order
11 The user edits the information that needs to be changed and presses the 'save' button
12 The system records information and saves it to the database
5.0 Delete orders from the system
13 From the order list screen, the user clicks to select the order to delete
14 The administrator presses the “action” button and selects
15 The system records changes and deletes orders from the list
2.0.E1 The administrator did not fill in all the information
The system informs you that please fill in all information and highlight any missing information fields in red
4.0.E1 The administrator did not fill in all the information
The system informs you that please fill in all information and highlight any missing information fields in red
Business Rules: BR-11, BR-12,BR-13, BR-14
Table 3.3.6: Table describing function orders management
Feature Loyalty Management
ID and Name: UC-07 Loyalty Management
Description: Administrators can view all discounts available on the system
Administrators can create discount codes and apply from the management system
Trigger: Admin wants to see, manage discounts
PRE-1 Access to management software
POST-1 Display discounts available on the system
POST-2 Change the information of the discount
1 Admin click on loyalty on the menu
2 The system displays the list of loyalties available on the system
3 The administrator presses the “New” button near the menu bar
4 The system displays the interface to add new loyalty
5 The user fills in the information and presses the “save” button
6 The system records information and adds it to the loyalty list
7 From the loyalty list screen, users click on the loyalty they want to see details
8 The system displays the detailed interface of loyalty
9 From the loyalty list screen, the user clicks on the loyalty they want to change information
10 The system displays the detailed interface of loyalty
11 The user edits the information that needs to be changed and presses the 'save' button
12 The system records information and saves it to the database
5.0 Delete the loyalty from the system
13 From the loyalty list screen, the user clicks to select the loyalty to be deleted
14 The administrator presses the “action” button and selects
15 The system records changes and removes loyalty from the list
1 In the rules & rewards table, in the conditional rules section, click the add button
2 The system displays the rules settings table
3 The administrator enters the information and presses the
4 The system records and saves to the database, displaying config information on the loyalty screen
1 In the rules & rewards table, click the add button
2 The system displays the rewards settings table
3 The administrator enters the information and presses the
4 The system records and saves to the database, displaying config information on the loyalty screen
Exceptions: 2.0.E1 The administrator did not fill in all the information
The system informs you that please fill in all information and highlight any missing information fields in red
4.0.E1 The administrator did not fill in all the information
The system informs you that please fill in all information and highlight any missing information fields in red
Business Rules: BR-21, BR-22,BR-23, BR-24,BR-25
Table 3.3.7 Table describing function loyalty management
Feature Pricelist Management
ID and Name: UC-08 Pricelist Management
Description: A pricelist is a list of prices that allows setting specific pricing rules such as time frames, minimum quantities to apply prices or discounts for each customer
Trigger: Admin wants to see, manage pricelist
PRE-1 Access to management software
POST-1 Display pricelist available on the system
POST-2 Change the information of the pricelist
1 Admin click on pricelist on the menu
2 System displays the list of pricelist available on the system
3 The administrator presses the “New” button near the menu bar
4 The system displays the interface to add new pricelist
5 The user fills in the information and presses the “save” button
6 The system records information and adds it to the loyalty list
7 From the pricelist list screen, users click on the pricelist they want to see details
8 The system displays the detailed interface of pricelist
9 From the pricelist list screen, the user clicks on the pricelist they want to change information
10 The system displays the detailed interface of pricelist
11 The user edits the information that needs to be changed and presses the 'save' button
12 The system records information and saves it to the database
5.0 Delete the pricelist from the system
13 From the pricelist list screen, the user clicks to select the pricelist to be deleted
14 The administrator presses the “action” button and selects
15 The system records changes and removes pricelist from the list
Flows: 2.5.1 Add new rules of pricelist
1 In the Price Rules section, click the add button
2 The system displays the rules settings table
3 The administrator enters the information and presses the
4 The system records and saves to the database, displaying config information on the pricelist screen
2.0.E1 The administrator did not fill in all the information
The system informs you that please fill in all information and highlight any missing information fields in red
4.0.E1 The administrator did not fill in all the information
The system informs you that please fill in all information and highlight any missing information fields in red
Table 3.3.8 Table describing function pricelist management
Screen Flow
Screen Details
1 Home page The homepage is the main access point, serving as a hub from which users can navigate to different sections
2 Shop Display the products or services the store offers It includes the product image, name, price, and brief description
3 Cart Displays the products that the user has chosen to purchase
The checkout screen includes shipping information, payment methods, order summary, and a payment confirmation button
5 Contact The contact screen provides information so users can contact the company
6 About us Provide information about company
The order screen is where users review and confirm their order before finalizing it It includes details of the selected products, quantities, prices, total cost, shipping information, and payment method Users can make adjustments to this information before completing the order
8 List Product The product screen shows images, descriptions, prices, and options for each item available for purchase
The price list screen displays products or services alongside their corresponding prices It serves as a place where users can get an overview of items and their costs
The discount management screen is where administrators can create, edit, and manage promotional offers for products or services
Table 3.4.1 Table of screen description
Software Design
Package Diagram
Figure 4.1.2 Package Diagram of project
Frontend Package: Contains the user interface components built with ReactJS
Backend Package: Contains the business logic and data management components using Odoo
API Package: Contains API services to facilitate communication between the Frontend and Backend
Components: header, footer, shop, product detail, checkout, about us, contact, cart
Pages: home page, shop page, product detail page, cart page, checkout page, payment page, about us page, contact page
Models: product, product category, pricelist, order, order line, partner, loyalty, loyalty rules, loyalty rewards, survey
Frontend Package communicates with the API Package through API services created by Axios Requests from ReactJS will call endpoints in the API Package
API Package receives requests from the frontend and forwards them to the Backend Package for business logic processing and data access
Backend Package (Odoo) contains models and controllers to handle and manage data, then returns the results to the API Package, which ultimately sends them back to the frontend.
Package Diagram of cart
Figure 4.1.3 Package Diagram of future cart
- CartItem: Displays individual items in the cart
- CartSummary: Shows a summary of the cart, including total price and item count
- CartControls: Provides controls for updating the cart, such as quantity adjustments and item removal
- CartPage: The main page component for the cart, integrating all the sub- components
- CartService: Uses Axios to communicate with the API endpoints related to cart operations
- CartItem: Represents items within the cart
- CartController: Handles operations related to the cart
- CartItemController: Handles operations related to individual cart items API Package:
Frontend Package communicates with API Package through the CartService Components within the CartPage use this service to perform operations like adding, removing, and updating items in the cart
API Package provides endpoints that handle requests from the frontend and forwards them to the appropriate controllers in the Backend Package
Backend Package (Odoo) contains the logic and data models for the cart and cart items, processing requests and returning responses to the API package, which then communicates back to the frontend.
Package Diagram of checkout
Figure 4.1.4 Package Diagram of future checkout
- CheckoutForm: Captures user input for order details
- OrderSummary: Displays a summary of the order, including items and total cost
- PaymentOptions: Provides options for selecting a payment method
- ApplyDiscount: Provides available discount options
- CheckoutPage: The main page component for the checkout process, integrating all the sub-components
- CheckoutService: Uses Axios to communicate with the API endpoints related to checkout operations
- OrderController: Handles operations related to orders
- PaymentController: Handles operations related to payments
- DiscountController: Handles operations related to discounts
Frontend Package communicates with API Package through the CheckoutService Components within the CheckoutPage use this service to
51 perform operations like submitting order details, processing payments, and managing shipping information
API Package provides endpoints that handle requests from the frontend and forwards them to the appropriate controllers in the Backend Package
Backend Package (Odoo) contains the logic and data models for orders, payments, and shipping, processing requests and returning responses to the API package, which then communicates back to the frontend.
System Detailed Design
3.1 Sequence Diagram of product management
Figure 4.3.1 Sequence diagram of product management
When the Admin wants to manage products, they start by clicking on the "Manage Product" menu in the interface This request is sent to the Product View The Product View receives the request and initiates a "Do Get" request to the Product Model The Product Model checks the Admin's access rights by interacting with the BaseController The Product Model sends a "Check Access Right" request to the BaseController If the
52 access is invalid, the BaseController returns an "Invalid Access" response This response is sent back to the Product Model, then forwarded to the Product View, and finally, the Admin receives a notification of invalid access
If the access is valid, the BaseController sends a "Valid Access" response The Product Model then proceeds with the next steps as the Admin's access is authenticated The Product Model initiates a read operation by sending a "get read" request to itself Next, the Product Model sends a "queryProducts" request to the ProductDao to query the product data The ProductDao executes the query by sending an "ExecuteQuery" request to the Database After the Database returns the queried product data, the ProductDao sends this data back to the Product Model as a product list
The Product Model processes the received product data and fills the product list Finally, the filled product list is sent back to the Product View in XML format The Admin receives the XML product list for further management actions
This process illustrates the detailed steps and interactions among the Admin, Product View, Product Model, BaseController, ProductDao, and Database components in the system to manage products
3.2 Sequence Diagram of order management
Figure 4.3.2 Sequence diagram of order management
When the Admin wants to manage orders, they start by clicking on the "Manage Order" menu in the interface This request is sent to the Order View The Order View then initiates a "Do Get" request to the Order Model
The Order Model checks the Admin's access rights by sending a "Check Access Right" request to the BaseController If the access is invalid, the BaseController returns an
"Invalid Access" response This response is passed back to the Order Model, which then sends it to the Order View, and finally, the Admin receives a notification of invalid access
If the access is valid, the BaseController sends a "Valid Access" response The Order Model then proceeds with the next steps as the Admin's access is authenticated The Order Model initiates a read operation by sending a "get read" request to itself
Next, the Order Model sends a "queryOrder" request to the OrderDao to query the order data The OrderDao executes the query by sending an "ExecuteQuery" request to the Database After the Database returns the queried order data, the OrderDao sends this data back to the Order Model as an order list
The Order Model processes the received order data and fills the order list Finally, this order list is sent back to the Order View in XML format The Admin receives the XML order list for further actions
This process illustrates the detailed steps and interactions among the Admin, Order View, Order Model, BaseController, OrderDao, and Database components in the system to manage orders
3.3 Sequence Diagram of loyalty management
Figure 4.3.3 Sequence diagram of loyalty management
When the Admin wants to manage the loyalty program, they start by clicking on the
"Manage Loyalty" menu in the interface This request is sent to the Loyalty View The Loyalty View receives the request and initiates a "Do Get" request to the Loyalty Model The Loyalty Model checks the Admin's access rights by interacting with the BaseController and sending a "Check Access Right" request to the BaseController If the access is invalid, the BaseController will return an "Invalid Access" response This response is sent back to the Loyalty Model, then forwarded to the Loyalty View, and finally, the Admin receives a notification of invalid access
If the access is valid, the BaseController sends a "Valid Access" response The Loyalty Model then proceeds with the next steps as the Admin's access is authenticated The Loyalty Model initiates a read operation by sending a "get read" request to itself Next, the Loyalty Model sends a "queryLoyalty" request to the LoyaltyDao to query the loyalty program data The LoyaltyDao executes the query by sending an
"ExecuteQuery" request to the Database After the Database returns the queried loyalty data, the LoyaltyDao sends this data back to the Loyalty Model as a loyalty list
The Loyalty Model processes the received loyalty data and fills the loyalty list Finally, the filled loyalty list is sent back to the Loyalty View in XML format The Admin receives the XML loyalty list to continue management actions
This process illustrates the detailed steps and interactions among the Admin, Loyalty View, Loyalty Model, BaseController, LoyaltyDao, and Database components in the system to manage the loyalty program
Screen Design
Figure 4.4.6 Order management page design
Figure 4.4.7 Product management page design
Database Design
● Loyalty_rule: This table stores rules related to the discount program
● Loyalty_program: This table contains details about various discount programs
● Loyalty_reward: This table stores information about rewards related to the discount program
● Sale_Order_Line: This table represents the lines in an order
● Sale_Order: This table stores information about orders
● Res_partner: This table stores customer information
● Product: This table contains details about the product
● Product_category: This table stores information about product categories
No Field name Type Size Uni que
3 date_to date Code expiration date
4 limit_usage int Limit the number of times the code can be used
Table 4.5.1 Table loyalty program in database
No Field name Type Size Uni que
3 product_categ ory_id int fk Discounts by category
Minimum quantity of product purchased to receive discount
5 minimum_am ount int Minimum amount to receive discount
_amount points earned if enough condition
Table 4.5.2 Table loyalty rule in database
No Field name Type Size Uni que
4 discount_prod uct_category_ id int fk
6 reward_produ ct_id int fk
Table 4.5.3 Table loyalty reward in database
No Field name Type Size Uni que
Table 4.5.4 Table sale order in database
No Field name Type Size Uni que
Table 4.5.5 Table sale order line in database
No Field name Type Size Uni que
Table 4.5.6 Table respartner in database
No Field name Type Size Uni que
Table 4.5.7 Table product in database
No Field name Type Size Uni que
Table 4.5.8 Table product category in database
Build An App
Have built a website system with websites for customer
The homepage is the first page that customer see when they visit the website It serves as the central hub, typically featuring the main information and providing important links to other sections of the site This layout ensures that users can easily navigate to various parts of the website, making it an essential component for guiding customer and enhancing their overall experience
The shop page is where customers can browse and search for the products offered by the store Here, products are usually organized by categories, and each product displays detailed information such as images, prices, and descriptions The shop page makes it easy for customers to find what they need and make purchasing decisions conveniently
+ Provides quick links to filter products by category
+ Display price and quantity of products in the cart
+ Links to shopping cart page
+ Links to detail product page
+ Provides quick links to add product to card
The shopping cart is where items selected by customers for purchase are stored As customers browse the website and choose the products they want to buy, these items are added to their shopping cart On the shopping cart page, customers can review the list of selected items, update quantities, or remove products they no longer wish to purchase The shopping cart helps customers easily manage and track the items they intend to buy before proceeding to checkout
The shopping cart feature on the website displays a collection of items with visuals, names, prices, and quantities for each product It provides a clear overview of selected items before checkout, allowing users to review their choices easily Each item in the cart includes a link to its respective product detail page, where customers can access more information and make informed decisions about their purchases This functionality enhances the shopping experience by ensuring transparency and accessibility throughout the selection and checkout process
Customers have the ability to manage their shopping carts effectively by adjusting product quantities or removing items entirely This interactive feature enables users to tailor their orders to meet their specific preferences and needs
As customers make changes, such as adding or removing items, the total cart value automatically updates to reflect these adjustments This real-time calculation ensures that customers have accurate pricing information throughout their shopping experience, enhancing convenience and transparency in the checkout process
The shopping cart prominently displays the total value of all products selected by the customer In addition to calculating the base cost of the items, the system also computes other factors such as discounts or promotions applied to provide a clear view of the final total cost This comprehensive calculation ensures transparency and helps customers understand the complete financial aspect of their purchases before proceeding to checkout By showing both the subtotal and any applied discounts or additional costs, the system enhances clarity and facilitates informed decision-making for customer
Continue Shopping and Buy Now:
The shopping cart interface offers convenient options for customers to navigate through their purchasing decisions It includes a "Continue shopping" button that allows users to return to the store, facilitating the addition of more products to their cart This feature encourages seamless exploration of additional items without interrupting the shopping flow
Additionally, there is a "Buy now" button that directs customers to the payment page, enabling them to swiftly proceed with their transaction and finalize their purchases This straightforward process ensures efficiency in completing orders, catering to varying customer preferences and enhancing overall shopping convenience on the platform
The website actively promotes customer engagement by displaying information about available promotions and discounts, encouraging increased shopping activity When customers qualify for a discount, whether through promotional codes or automatic offers, the system applies the discount seamlessly It then automatically calculates the discounted prices for each applicable item and recalculates the total amount in the shopping cart to reflect these adjustments After a discount is applied, the system displays detailed information about the discount, including the type of discount (percentage or fixed amount) and the specific terms of the promotion This transparency ensures that customers are well-informed about the benefits they receive, fostering trust and satisfaction throughout their shopping experience
The checkout page is the final step in the online shopping process, where customers confirm their order Here, customers enter their shipping information, select a payment method, and review their entire order, including the list of products, prices, and the total cost The checkout page ensures that all necessary information is provided and accurate before customers complete their purchase
Fill in Delivery Address Information: Customer are required to enter complete information and accurately verify the transaction address This includes delivery address, phone, name, email
Contact Info: Require shoppers to enter contact information, including phone number and email address, to ensure communication results in necessary cases
Show Payment Methods: Lists and displays available payment methods, such as credit cards, bank transfers, e-wallets, or other online payment services
Deposit: There are 2 options: 100% order or 50% order
Payment: If payment method is bank tranfer, switch to the bank information page and record the order on the backend system
Figure 4.6.6 Bank information page when payment method is bank tranfer
+ If payment method is VNPAY, switch to the vnpay payment page
Figure 4.6.7 VNPay payment page when payment method is vnpay
The "About Us" page is where businesses or organizations provide information about their history, mission, values, and team It offers insights into the company's background, goals, and the people behind it Typically, this page includes details such as the company's founding story, its vision for the future, any milestones achieved, and contact information The "About Us" page aims to establish trust, credibility, and transparency with website visitors, helping them understand the brand's identity and purpose
The contact page serves as a communication hub between a business or organization and its audience It typically provides visitors with various methods to get in touch, such as email addresses, phone numbers, physical addresses, and sometimes contact forms The purpose of the contact page is to facilitate easy communication, allowing visitors to ask questions, provide feedback, or inquire about products or services It plays a crucial role in fostering customer engagement and building relationships with the audience
/product/get_all_products GET Get all products available on the system and published /product/ POST Post the product ID then the system will return information of one product
/category/allCategory GET Get all categories available in the system /product/category/ GET Get all products in category
/order/discount POST Post all products in the cart, the system will return all applicable discounts
/create_order POST Create the order
/order/apply_discount POST Post the coupon ID and all products in cart, the system will return the reduced amount
/survey POST Create the survey of customer send from contact page
Show Order List: The system displays a comprehensive list of all orders and provides detailed status updates for each one, allowing managers to have an overview of activities This feature ensures that managers can efficiently track and manage orders, enhancing operational oversight and decision-making
Order processing: Allows managers to take actions to validate, cancel, or change order status to track delivery
Commodity information: Present comprehensive customer details, encompassing both shipping and contact addresses, facilitating straightforward communication and order verification
Manage inventory quantity: Update inventory after each order to ensure product information and availability are accurate
Show all products: Display all products with name, photo, price and product code
Conclusion
With strong expertise in building attractive and interactive user interfaces, I excel in web design and development, creating engaging experiences for users I also possess solid skills in back-end programming, specifically using Odoo for server-side development, ensuring robust and efficient performance Additionally, my knowledge in web security allows me to implement measures to protect customer information and prevent cyber attacks, ensuring the safety and integrity of web applications
I developed a website with a user-friendly interface, making product searches intuitive and straightforward for users Additionally, I implemented a comprehensive system management feature, allowing for easy addition, editing, and deletion of content To enhance customer engagement, I integrated diverse types of loyalty and discount programs, including various discount conditions to provide a tailored shopping experience
Lack of shipping fee calculation and order tracking functionalities can create challenges for customers, making it difficult for them to manage their orders effectively Ensuring device compatibility is essential to meet diverse user needs, allowing the website to operate smoothly across both computers and mobile devices This approach enhances user experience by providing consistent and reliable performance regardless of the device used
In the process of developing the final product, I focused deeply on achieving several key objectives and successfully implemented a comprehensive set of features for an online store This project was not just a technical challenge but also a profound learning experience, spanning from designing a user-friendly interface to backend programming, testing, and real-world deployment
Creating an attractive and user-friendly interface posed a significant challenge, and I concentrated on optimizing the user experience to facilitate easy product search and shopping This involved developing advanced search functionalities, intelligent website layouts, and ensuring high interactivity between users and the platform
Furthermore, I utilized Odoo for backend development, leveraging its robust features for managing products, orders, and customer data Integrating data management functionalities and ensuring customer information security played a crucial role in this process, ensuring system reliability and trustworthiness
While the final product may not have reached the quality standards of larger, more heavily invested e-commerce websites, it marks a significant milestone in my career I gained valuable insights into handling challenges such as integrating complex features like shipping fee calculation and order tracking, as well as honing project management skills and teamwork
Notably, the absence of shipping fees may have posed limitations in the customer shopping experience, which is an area I aim to improve in future projects However, the successes and lessons learned from this project have laid a solid foundation for further advancements and progress in my professional journey
In the future, the development direction of the system will be:
- Responsive Design: Ensure the website is fully responsive, providing an optimal user experience across all devices, including desktops, tablets, and smartphones
- User-Friendly Navigation: Improve site navigation with intuitive menus, breadcrumb trails, and an advanced search feature to help users find products quickly
- Personalization: Implement personalized recommendations based on user behavior and preferences to enhance the shopping experience
- Bulk Product Uploads: Facilitate bulk uploading of products via CSV or Excel files to streamline the addition of new inventory
- Inventory Management: Integrate an inventory management system to automatically update stock levels and alert administrators when stock is low
- Multiple Payment Options: Integrate various payment gateways (credit cards, PayPal, Apple Pay, etc.) to offer customers a range of payment options
- Real-Time Shipping Rates: Integrate with major shipping carriers (UPS, FedEx, DHL, etc.) to offer real-time shipping rates during checkout
- Shipping Options: Offer multiple shipping options (standard, express, overnight) to cater to different customer needs
- Automated Shipping Labels: Enable the automatic generation of shipping labels to streamline the order fulfillment process
- Live Chat: Integrate live chat support to provide real-time assistance to customers
- Customer Feedback: Implement a system for collecting and responding to customer feedback to continuously improve the service.