1215 軟工講稿

1. Fig.11 3-tier Website architecture(P.20)

On our website, almost all pages are open to the public. As shown in Figure 11, only
employees and the shopping cart require login to access specific information, such as
personal order details or editing/deleting data from the tables.

2. Fig.12 Home Webpage(Default)(P.21)

Next, we will provide brief introductions for each webpage to help you understand
their functions.

Firstly, let's talk about our website's homepage. The homepage features a brief
introduction and goals of our company, along with contact information and our
location. This allows users to quickly grasp information about the company and get in
touch with us.

3. Fig.13 About Webpage(P.22)

On our "About Us" webpage, you'll find detailed information about our company,
including our philosophy, goals, and a detailed location on Google Maps.

4. Fig.14 ProductList Webpage(P.23)

On our product browsing webpage, we provide users with the ability to explore our
products. To make it user-friendly and avoid long pages that might be inconvenient to
read, we use pagination to control the length of the webpage.

5. Fig.15 ProductSearch Webpage, use keyword “2000”

and country “US” to search(P.24)
On our product search webpage, we offer a multi-condition search feature, making it
convenient for users to find the desired items more accurately. As shown in Figure
15, we use the keyword "2000" and select the country "United States" for the search,
resulting in the displayed outcomes.
6. Fig.16 ServiceSearch Webpage, use keyword
“Warehouse” to search(P.25)
On the service search webpage, we also provide users with a multi-search feature. As
shown in Figure 16, we use the keyword "Warehouse" and perform a search without
limiting the location, resulting in the outcomes displayed in the figure.

7. Fig.17 MostItemSeller Webpage(P.26)

On our seller webpage with the most products, we provide a two-step search.
Assuming users, like Mr. Krabs from SpongeBob SquarePants, want many items at a
low cost, this feature helps users accurately find the desired products. It's an
exclusive function of our company and an additional feature. First, users can decide
the number of products they want a seller to have.

8. Fig.18 Search function in MostItemSeller Webpage(P.27)

Next, assuming users are interested in the seller with the code 1611, they can enter
"1611" in the search bar on the right side of the webpage to view the products and
contact information of that seller. This makes it convenient for users to obtain more
information about the products.

9. Fig.19 Top100Cheap page(P.28)

Our top 100 cheapest webpage is also designed based on the idea that users want
affordable and diverse product options. Here, we assume users don't know exactly
what they want, so we first recommend the top 100 cheapest products to give users
some ideas. If they have an idea, they can proceed to the second-step advanced
search webpage.

10. Fig.20 We use the keyword “Trailers” to search(P.29)

In the second-step webpage, assuming users are interested in "Trailers," they can use
keywords to search and get the top 100 cheapest products related to Trailers. This
enhances the success rate of user purchases.

11. Fig.21 Employee Webpage(P.30)

On the employee webpage, users need to log in to confirm their employee status
before they can see four buttons in the bottom right corner. These four buttons will
take employees to specific pages to edit detailed content, including categories,
vehicles, users, and service-related data tables.
12. Fig.22 Shopping Cart Webpage(P.31)
Our shopping cart page is similar to the employee webpage; you also need to log in
before continuing with any actions.

13. Fig.23 We use the user account of "accardo" as an

example(P.32)
Here, we are using the user account "accardo" for demonstration, as shown in Figure
23. After the user logs in, they can initially view their orders and remove them if
needed. If they wish to make additional purchases, they can click the "Buy More"
button to go to the additional purchase webpage and choose products.

14. Fig.24 This is the add-order page(P.33)

As shown in Figure 24, this is our webpage for adding additional items. When users
make selections here, we will redirect them to the order confirmation screen.

15. Fig.25 After we have randomly selected(P.34)

Figure 25 demonstrates the successful execution of our purchasing feature. You can
observe from the two images on the left and right that after a successful purchase, a
new item has been added to the order.

16. Fig.26 Vehicle Add/change/remove & Fig.27 Service

Add/change/remove(P.35)
Next, we will demonstrate the features that employees can edit.

The functionalities shown in Figures 26 and 27 include the ability to add, edit, and
delete cars and services. If you need to perform these actions, please remember to
log in using your employee account.

17. Fig.28 Users Add/change/remove(P.36)

Finally, we demonstrate the features for adding, editing, and deleting user data. In
the left and right images, we respectively display data for regular users and
employees with specific permissions. If you need to perform these actions, please
remember to log in with your employee account and password for modifications.
That concludes today's presentation. Thank you, everyone.