VIETNAM NATIONAL UNIVERSITY, HANOI INTERNATIONAL SCHOOL GRADUATION PROJECT PROJECT NAME: DEVELOPING A WEBSITE FOR SELLING SNEAKERS Student’s name: Ngo Tai Vuong Hanoi, 2024 VIETNAM NATIONAL UNIVERSITY, HANOI INTERNATIONAL SCHOOL GRADUATION PROJECT PROJECT NAME: DEVELOPING A WEBSITE FOR SELLING SNEAKERS SUPERVISOR: Dr. Nguyen Dang Khoa STUDENT: Ngo Tai Vuong STUDENT ID: 18071550 SUBJECT CODE: INS4014 MAJOR: Informatics and Computer Engineering CLASS: ICE2018A Hanoi, 2024 ACKNOWLEDGEMENT I sincerely thank the International School for providing me with a constantly developing learning and training environment. The first steps into a new environment made me confused, but thanks to the dedicated guidance and guidance of the teaching staff, I overcame all challenges, constantly persevered and made efforts to achieve success. reaping significant achievements during four years of study.
In particular, I want to express my deep gratitude to the teachers majoring in Informatics and Computer Engineering, especially Mr. Nguyen Dang Khoa. He is not only my guide in better understanding the major but also enthusiastically supports me during the process of writing my thesis. Your creativity and extensive knowledge have been a great source of encouragement to help me overcome all difficulties.
The achievements I have achieved are not only the result of personal efforts but also the result of consensus and support from a quality academic community like the International School. Thank you everyone for being a source of encouragement and independence for my development. Sincerely, Ngo Tai Vuong 1 LETTER OF DECLARATION I hereby commit that the project to develop a shoe selling website is an independent effort and has not been previously published. I leverage my personal knowledge and skills to develop this website, placing a high level of responsibility on ethical research practices.
All elements and features on the website are constructed based on my personal research and analysis. Every piece of information, imagery, and product description is created authentically and reliably. I assure that all images and content used on the website adhere to copyright regulations and do not violate the intellectual property rights of any third party. I take full responsibility for the accuracy of product information, pricing, and any other data on my website.
Transparency and honesty are top priorities throughout the process of building and managing this website. 2 SUMMARY OF PROJECT CONTENT In the current era of digital technology, online shopping is becoming increasingly popular and more convenient than ever. In this context, developing an online shoe store is not just an appealing business opportunity but also a significant step in meeting the diverse shopping needs of consumers. Shoes are not merely fashion accessories; they can reflect the personality and style of each individual.
Bearing the name "Stylish Online Store," this website promises to offer customers a completely new and convenient online shopping experience. Stylish Online Store is an online shoe store developed to cater to the diverse and unique shopping needs of customers. The platform will provide a range of shoe products from renowned brands, offering styles that range from traditional to modern. Customers can easily select and compare products based on various criteria such as brand, color, and functionality, among others.
3 LIST OF ABBREVIATIONS Terminology name Terminology explained An organized collection of data stored and accessed Database electronically from a computer system. Describes typical interactions between external users Use Case and the system. An activity diagram is a behavioral diagram to Activity diagram describe the dynamic aspects of a system. Class diagram, is a static structural diagram that describes the structure of a system by showing the Class Diagram system's classes, their properties, operations, and relationships between objects.
Includes languages: Html, Css, JS Communication Front – end user interface Includes languages: Java Spring boot, MySql. Back – end Process, send and receive information from the front- end interface ERD Entity relationship model Java Object-oriented programming language CPU Central processing unit RAM Temporary memory UDPM Software application 4 LIST OF FIGURES Figure 1: Bitis survey shop .13 Figure 2:Introduction to Web Services.20 Figure 3: What is React JS? [3].23 Figure 4: Why do JavaScript developers use ReactJS? [3] .23 Figure 5: Install MySQL products and features [5] .25 Figure 6: How Redux works [6].27 Figure 7: Ant Design [8] .28 Figure 8: General Usecase .31 Figure 9: General Usecase .32 Figure 10: The use case decomposes the Employee actor .33 Figure 11: Usecase decomposes the Customer actor .34 Figure 12: Usecase decomposes the Guest actor .34 Figure 13: Workflow offline .35 Figure 14: Workflow online .36 Figure 15: Login Activity .38 Figure 16: Registration Activity .40 Figure 17: Add Product Activity .42 Figure 18: Edit Product Activity .44 Figure 19: Delete Product Activity .46 Figure 20: Add Order Activity .48 Figure 21: Edit Order Activity .50 Figure 22: Revenue and profit statistics Activity .51 Figure 23: Ordering in cart Activity .54 Figure 24: Add Brand Activity.56 Figure 25: Edit Brand Activity .58 Figure 26: Delete Brand Activity .60 Figure 27: General database .60 Figure 28: User home page interface .68 Figure 29: Product detail view page interface .69 Figure 30: Cart page interface .69 Figure 31: Order page interface .70 5 Figure 32: Product page interface .70 Figure 33: Registration interface .71 Figure 34: Login interface .71 Figure 35: Management home page statistics page interface .72 Figure 36: Product management page interface .72 Figure 37: Order management page interface .73 Figure 38: Category management page interface .73 Figure 39: Brand management page interface .74 Figure 40: Color management page interface .74 Figure 41: Employee management page interface .75 Figure 42: Account management page interface .75 6 LIST OF TABLES Table 1: Product database .61 Table 2: Customer_order database .61 Table 3: Employee table .62 Table 4: Account database .63 Table 5: Category database .63 Table 6: Brand database .64 Table 7: Color database .64 Table 8: Size database .64 Table 9: Product_category database .65 Table 10: Order_detail database .65 Table 11: Carts database .65 Table 12: Payment database .66 Table 13: Order_status database .66 Table 14: Employee_status database .67 Table 15: Role database.67 Table 16: Account_role database .67 7 TABLE OF CONTENT ACKNOWLEDGEMENT.1 LETTER OF DECLARATION .2 SUMMARY OF PROJECT CONTENT .3 LIST OF ABBREVIATIONS .4 LIST OF FIGURES .5 CHAPTER I: INTRODUCTION TO THE TOPIC – SYSTEM. Reason for choosing the topic .2 Conclusion after survey .2 Identify system users. Software development methods .1 Some things to know about E-commerce .1 What is E-commerce? .2 What is an Ecommerce website? .1 What is Web-Service? .2 Components of Web Service.
Product development context. Tools and technologies used in the project .1 What is ReactJS? .2 Why do JavaScript Developers use ReactJS? .1 What is Redux? .2 How does Redux work? .27 CHAPTER II: SYSTEM DESIGN ANALYSIS. Identify system actors .2 Identify Use Cases. Use Case diagram.
Use Case diagram decomposes the Manager actor. Use Case diagram of employee actor decomposition. Use Case diagram decomposes the Customer actor. Use Case diagram decomposing the visiter actor .1 Login Use Case .2 Registration Use Case .3 Product Use Case .1 Add Product Use Case.2 Edit Product Use Case.3 Delete Product Use Case .4 Order Use Case.1 Add Order Use Case .2 Edit Status Order Use Case .5 Revenue and profit statistics Use Case .6 Use Case of ordering in cart .1 General Database table .2 Product table details .3 Customer_order table details .4 Employee table details .5 Account table details .6 Category table details .7 Brand table details .8 Color table details .9 Size table details .10 Product_category table details .11 Order_detail table details .12 Carts table details .13 Payment table details .14 Order_status table details .15 Employee_status table details.16 Role table details .17 Account_role table details .67 CHAPTER III: DESIGN THE THEME .1 User home page interface .2 Product detail view page interface .3 Cart page interface .4 Order page interface .5 Product page interface .1 Management home page/statistics page interface .2 Product management page interface .3 Order management page interface .4 Category management page interface .5 Brand management page interface .6 Color management page interface.7 Employee management page interface .75 CHAPTER IV: CONCLUSION.
Project development time. Level of project completion. Difficulties and risks encountered and how to solve them. Lessons learned after doing the project .76 CHAPTER V: FUTURE DEVELOPMENT .78 11 CHAPTER I: INTRODUCTION TO THE TOPIC – SYSTEM 1.
Reason for choosing the topic Choosing the website design theme to sell Stylish Online Store shoes was motivated by a number of important reasons. Firstly, the shoe market always attracts the attention of a variety of customers, from fashion lovers to collectors. Second, developing an online shoe selling website offers great business potential, not limited by geography or time, helping to optimize accessibility and increase revenue opportunities. Third, building this website is also experimental and challenging in applying new technologies such as friendly user interface, secure payment and effective inventory management.
Topic objective Building the Stylish Online shoe-selling website with various practical features: For the Store: Introduction of the Store: The website will comprehensively introduce the store, creating a positive impression for new customers. Online Product Selling: Providing the capability to introduce and sell products online, contributing to flexible and effective revenue growth. For the Customer: Clear Product Information: Providing detailed and transparent information about products, instilling confidence in customers when deciding to make a purchase. Diverse Payment Options: Supporting payment methods via QR code and cash, creating convenience for customers during the payment process.
User-Friendly Interface: A simple and friendly interface design helps customers easily interact and conduct transactions. For Employees: Convenient Sales: Allowing sales staff at the counter to efficiently carry out transactional operations. Quick Inventory Check: An automated system that checks the quantity of inventory, making it convenient for employees to monitor the status of goods. Topic scope Build websites using Java, JS and Web Service combined with restful API.
12 Target users: Website is applied to Stylish Online Store shoe store for customers outside Hanoi with the following functions: Product management Manage shopping cart Statistics management Personal profile management Category management Shipping by Express Delivery Invoice management Login / Register 4. Survey Name of the store: Bitis sports shoe Address: 272 Tran Thanh Ngo - Kien An – Hai Phong Figure 1: Bitis survey shop 13 4.1 Survey Interviewee: Manager of a shoe store Answer The question The current business situation of my store is What is the current business quite good. Customers have access to both situation of your store? online and offline purchases Currently my house is providing a variety of What products does your store products from affordable to mid-range and currently offer? high-end shoe products Most items will be classified by category and color. There are only a few special products classified by brand.
For example, at the store How are items classified? there are currently 2 models specially displayed according to the sign: Hunter Street, Hunter X Can you show me your restaurant management software, especially the orders section, I need to see the order statuses? Prices usually do not change much, because How will prices change? How is shoes usually have prices listed in advance, if the product price calculated? there are promotions on birthdays, or welcoming new students, back to school, etc. 14 Can I see the items in your management software? Currently, we mainly use Excel on computers for management and paper books. What means are you currently using to store information about revenue, products, customers, especially invoices? My store currently has 3 employees and 1 How many users does your store manager. The manager will be the one to have, and like this software, do I provide you with an account to access the have full rights to use it or can I system to add products and make orders.
It's only sell? just that we won't have the right to see the revenue.