Thiết kế giao diện web bán trang sức vị trí front end developer

TRƯỜNG ĐẠI HỌC KINH TẾ ĐẠI HỌC ĐÀ NẴNG KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH TIN HỌC QUẢN LÝ TÊN ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEB BÁN TRANG SỨC Vị trí: FRONT-END DEVELOPER Giảng viên hướng dẫn : TS Hoàng Thị Thanh Hà Xác nhận của đơn vị thực tập LỜI CẢM ƠN Trước tiên, em xin gửi lời cảm ơn chân thành đến Cơng Ty TMA Solutions Bình Định hỗ trợ giúp đỡ quý báu trình thực tập nghề nghiệp công ty Sự ân cần tận tâm thành viên công ty giúp em có trải nghiệm thực tế phát triển kỹ cách toàn diện Em xin gửi lời cảm ơn chân thành tri ân sâu sắc thầy cô trường Đại học Kinh Tế Đà Nẵng, đặc biệt thầy cô khoa Thống Kê- Tin Học trường tạo điều kiện cho em thực tập Và em xin chân thành cảm ơn Hồng Thị Thanh Hà nhiệt tình hướng dẫn em hồn thành tốt khóa thực tập Cuối cùng, em xin cảm ơn đến anh Nguyễn Đại Đông tất anh chị khác - Mentor hướng dẫn em trực tiếp công ty TMA Solutions Bình Định giúp đỡ, cung cấp tài liệu cho em trình thực tập để hoàn thành kỳ thực tập tốt Trong trình thực tập, trình làm báo cáo thực tập, khó tránh khỏi sai sót, mong thầy, cô bỏ qua Đồng thời trình độ lý luận kinh nghiệm thực tiễn cịn hạn chế nên báo cáo khơng thể tránh khỏi thiếu sót, em mong nhận ý kiến đóng góp thầy, để em học thêm nhiều kinh nghiệm hoàn thành tốt báo cáo tốt nghiệp tới LỜI CAM ĐOAN Em xin cam đoan dự án “Thiết kế giao diện Web bán trang sức” kết nghiên cứu độc lập hướng dẫn giảng viên hướng dẫn: TS Hoàng Thị Thanh Hà Mentor: Nguyễn Đại Đơng Ngồi ra, khơng có chép người khác Dự án, nội dung báo cáo sản phẩm mà em nổ lực nghiên cứu trình học nhà bên thực tập Các liệu, kết trình bày báo cáo hoàn toàn trung thực, em xin chịu hoàn toàn trách nhiệm, kỷ luật môn nhà trường đề có vấn đề xảy MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC .5 DANH MỤC HÌNH ẢNH LỜI MỞ ĐẦU 1.1 Giới thiệu tổng quát doanh nghiệp thực tập 11 1.1.1 Tổng quan công ty 11 1.1.2 Tầm nhìn sứ mệnh cơng ty TMA Solutions Bình Định .12 1.2 Tổng quan nghề Developer .12 1.2.1 Định nghĩa Developer 12 1.2.2 Developer làm cơng việc gì? 12 1.2.3 Cơ hội nghề nghiệp (FrontEnd) 13 2.1 JavaScript 14 2.1.1 JavaScript gì? 14 2.1.2 Tại nên học JavaScript 14 2.1.3 JavaScript tutorial 14 2.1.4 JavaScript Functions 14 2.1.5 JavaScript HTML DOM 15 2.1.6 JavaScript oop 16 2.2 ReactJS 16 2.2.1 Introducing JSX 16 2.2.2 Rendering Elements 16 2.2.3 Components and Props 17 2.2.4 State and Lifecycle 17 2.2.5 Handling Events 17 2.2.6 List and Keys .17 2.2.7 Forms 18 2.3 Hooks 18 2.3.1 Introducing Hooks .18 2.3.2 Hooks at a Glance .18 2.3.3 Using the State Hook 18 2.3.4 Using the Effect Hook .18 2.3.5 Hooks API Reference 18 2.4 Redux-Toolkit .19 2.4.1 ConfigureStore 19 2.4.2 CreateSlice 19 2.4.3 CreateReducer 19 2.5 React Router 19 3.1 Phân tích yêu cầu hệ thống 21 3.1.1 Mục tiêu đề tài : 21 3.1.2 Khảo sát hệ thống : .21 3.2 Thiết kế dự án 22 3.2.1 Mục tiêu thiết kế giao diện : .22 3.2.2 Quy trình thiết kế giao diện web ReactJS : 22 3.2.3 Thiết kế giao diện : .23 3.2.3.1 Thiết kế hình : 23 3.2.3.2 Giao diện hình : 23 a Giao diện trang chủ 23 b Giao diện trang sản phẩm 28 c Giao diện trang chi tiết sản phẩm 29 d Giao diện trang mua (thanh toán) .31 e Giao diện trang thông tin 33 f Giao diện trang liên hệ 35 g Giao diện trang đăng nhập 36 h Giao diện trang đăng ký 39 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .41 DANH MỤC HÌNH ẢNH Hình 1: Logo cơng ty TMA Solutions Bình Định 10 Hình 2: Giao diện trang chủ .22 Hình 3: Giao diện trang chủ .23 Hình 4: Giao diện trang chủ .23 Hình 5: Giao diện trang chủ .24 Hình 6: Giao diện trang chủ .24 Hình 7: Giao diện trang chủ .25 Hình 8: Giao diện trang chủ .25 Hình 9: Giao diện trang chủ .26 Hình 10: Giao diện trang chủ .26 Hình 11: Giao diện sản phẩm .27 Hình 12: Giao diện sản phẩm .27 Hình 13: Giao diện sản phẩm .28 Hình 14: Giao diện chi tiết sản phẩm 28 Hình 15: Giao diện chi tiết sản phẩm 29 Hình 16: Giao diện chi tiết sản phẩm 29 Hình 17: Giao diện chi tiết sản phẩm 30 Hình 18: Giao diện mua .30 Hình 19: Giao diện mua .31 Hình 20: Giao diện mua .31 Hình 21: Giao diện mua .32 Hình 22: Giao diện thơng tin 32 Hình 23: Giao diện thông tin 33 Hình 24: Giao diện thông tin 33 Hình 25: Giao diện liên hệ 34 Hình 26: Giao diện liên hệ 34 Hình 27: Giao diện liên hệ 35 Hình 28: Giao diện đăng nhập .35 Hình 29: Giao diện đăng nhập nhập email mật 36 Hình 30: Giao diện đăng nhập nhấn icon mật 36 Hình 31: Giao diện đăng nhập bỏ trống tài khoản mật 37 Hình 32: Giao diện nhập Email khơng dịnh dạng mật thiếu kí tự 37 Hình 33: Giao diện nhập Email mật sai 38 Hình 34: Giao diện đăng ký 38 Hình 35: Giao diện đăng ký để trống thông tin 39 Hình 36: Giao diện đăng ký nhập sai điều kiện ô 39 LỜI MỞ ĐẦU Mục tiêu của đề tài - Tên đề tài : Trang web bán trang sức (Front-End) - Tạo giao diện trực tuyến hấp dẫn chuyên nghiệp để thu hút khách hàng tăng cường trải nghiệm mua sắm họ Đối tượng phạm vi nghiên cứu - Đối tượng nghiên cứu : Thư viện ReactJS, Javascript - Phạm vi nghiên cứu : Nghiên cứu lập trình giao diện cho trang web Kết cấu của đề tài Đề tài tổ chức gồm phần mở đầu, chương nội dung phần kết luận - Mở đầu - Chương 1: Tổng quan cơng ty TMA Solutions Bình Định nghề Developer - Chương 2: Cơ sở lý thuyết - Chương 3: Triển khai - Chương 4: Kết - Kết luận hướng phát triển CHƯƠNG TỔNG QUAN VỀ CÔNG TY TMA SOLUTIONS BÌNH ĐỊNH 1.1 Giới thiệu tởng quát doanh nghiệp thực tập 1.1.1 Tổng quan công ty      TMA Bình Định dự án đầu tư quy mô lớn TMA Solutions Với bề dày 24 năm phát triển vững mạnh TMA Solutions TMA Bình Định dần khẳng định vị CNTT tỉnh Bình Định, góp sức với tỉnh xây dựng Thung Lũng Sáng tạo Quy Nhơn trở thành trung tâm khoa học, công nghệ cao miền Trung Năm 2017: TMA định đầu tư xây dựng Công viên sáng tạo TMA Bình Định (TMA Innovation Park) Thung Lũng Sáng Tạo Quy Nhơn Năm 2018:  Thành lập TMA Bình Định  Khởi công xây dựng Công viên Sáng tạo TMA Bình Định (TMA Innovation Park - TIP) Năm 2019:  Đạt 70 kỹ sư  Thành lập Nhóm Data Science Group  Tổ chức Ngày hội Công nghệ ĐH Quy Nhơn Năm 2020:  Khai trương Công viên Sáng tạo TMA Bình Định  Đạt 140 kỹ sư  Khách hàng từ nước (Mỹ, Úc, Pháp, Nhật Bản, Hàn Quốc, Singapore) Hình 1: Logo cơng ty TMA Solutions Bình Định