Thiết kế giao diện website giày mwc

TRƯỜNG ĐẠI HỌC KINH TẾ 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 QUẢN TRỊ HỆ THỐNG THÔNG TIN ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE GIÀY MWC Đơn vị thực tập : R2S Company Giảng viên hướng dẫn : TS Nguyễn Thị Uyên Nhi i LỜI CẢM ƠN Sau thời gian học tập trường truyền đạt kiến thức, lời khuyên công việc định hướng sau giúp đỡ tận tình q thầy cơ, em có hội ngồi thực tập cơng ty, tiếp xúc với môi trường làm việc thực tế, tiếp xúc với công cụ quản lý dự án đại… Em xin gửi lời cảm ơn chân thành đến thầy cô khoa Thống kê-Tin học giúp đỡ em suốt thời gian thực tập cho em lời tư vấn, nhận xét đắn đề em có đủ hành trang kiến thức để tìm vị trí thực tập tốt hồn thành báo cáo Để hoàn thành tập báo cáo em xin gửi lời cảm ơn sâu sắc tới công ty R2S nhận em vào thực tập anh chị tận tình giúp đỡ, hỗ trợ nhiệt tình, củng cố kiến thức, tạo điều kiện thuận lợi trình thực tập ii LỜI CAM ĐOAN “Em xin cam đoan đề tài: “Thiết kế giao diện website giày MWC” cơng trình nghiên cứu độc lập em hướng dẫn anh chị Mentors cơng ty R2S Ngồi khơng có chép người khác Đề tài, nội dung báo cáo thực tập sản phẩm mà em nỗ lực nghiên cứu trình học tập trường tham gia thực tập công ty.” MỤC LỤC iii LỜI CẢM ƠN iii LỜI CAM ĐOAN iv MỤC LỤC v-vii DANH MỤC HÌNH ẢNH viii DANH MỤC BẢNG BIỂU ix DANH MỤC CÁC TỪ VIẾT TẮT x LỜI MỞ ĐẦU Chương TỔNG QUAN 1.1 Tổng quan công ty` 1.2 Vị trí việc làm thăng tiến 1.3 Tổng quan lập trình Front End Chương CƠ SỞ LÝ THUYẾT 2.1 Ngôn ngữ HTML 2.1.1 Giới thiệu HTML 2.1.2 Các ví dụ HTML 2.1.3 Khái niệm phần tử thuộc tính HTML 2.1.4 Cách sử dụng thẻ , HTML 2.1.5 Chèn ảnh liên kết HTML 2.1.6 Thẻ tiêu đề (heading) đoạn văn (paragraph) HTML 2.1.7 Thuộc tính ID Class HTML 2.1.8 Thuộc tính Style HTML 2.1.9 Phần tử khối phần tử nội tuyến 2.2 Ngôn ngữ CSS 2.2.1 Giới thiệu CSS 2.2.2 Các cú pháp CSS 10 2.2.3 Cấu trúc phần tử CSS 10 iv 2.2.4 Cách tạo đường viền (border) cho phần tử 10 2.2.5 Cách thiết lập vùng đệm (padding) CSS 10 2.2.6 Khoảng cách lề (margin) CSS 10 2.2.7 Thiết lập màu sắc CSS 11 2.2.8 Kích thước phần tử (width/height) 11 2.2.9 Responsive 11 2.3 Ngôn ngữ JavaScript 11 2.3.1 Giới thiệu JavaScript 11 2.3.2 Cách sử dụng biến (Variable) JavaScript 12 2.3.3 Toán tử JavaScript 13 2.3.4 Các kiểu liệu JavaScript 13 2.3.5 Cách tạo hàm (Function) JavaScript 14 2.3.6 Cách tạo đối tượng (Object) JavaScript 14 2.3.7 Cách tạo mảng (Array) JavaScript 14 2.3.8 Tìm hiểu câu điều kiện JavaScript 15 2.3.9 Tìm hiểu vịng lặp JavaScript 15 2.3.10 Các thao tác DOM JavaScript 2.4 Thư viện ReactJS 16 17 2.4.1 Giới thiệu ReactJS 17 2.4.2 Các câu lệnh JSX 18 2.4.3 Props ReactJS 18 2.4.4 Xử lý kiện ReactJS 18 2.4.5 Phương thức state ReactJS 19 2.5 Thư viện Bootstrap 2.5.1 19 Giới thiệu Bootstrap 18 2.5.2 file Bootstrap 20 v 2.5.2 Câu lệnh bootstrap 20 CHƯƠNG 3: TRIỂN KHAI DỰ ÁN 3.1 21 Khảo sát thông tin cần thiết hệ thống 21 3.1.1 Khảo sát đánh giá trạng hoạt động hệ thống có: 21 3.1.2 Xác định yêu cầu HTTT 21 3.2 Phân tích thiết kế yêu cầu hệ thống 21 3.2.1 Xác định chức hệ thống 21 3.2.2 Userstory 22 3.2.3 Sơ đồ Usecase 22 3.2 Phân tích thiết kế yêu cầu hệ thống 3.2.1 Mục tiêu thiết kế giao diện 23 23 3.2.2 Công cụ thiết kế 23 3.2.3 Thiết kế khung giao diện Figma 24 CHƯƠNG 4: PHÁT TRIỂN HỆ THỐNG 28 4.1 Xây dựng hệ thống 28 4.2 Xây dựng giao diện 28 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 33 5.1 Kết đạt tập 33 5.2 Kết luận hướng phát triển giải pháp 33 TÀI LIỆU THAM KHẢO 34 CHECK LIST CỦA BÁO CÁO 35 PHỤ LỤC 36 vi DANH MỤC HÌNH ẢNH Hình 1.1 Logo cơng ty Hình Visual Studio Code Hình Ngơn ngữ HTML Hình Ngơn ngữ CSS Hình Ngơn ngữ JavaScript 12 Hình Thư viện ReactJS 18 Hình Thư viện Bootstrap 19 Hình Sơ đồ Usecase 22 Hình Cơng cụ Figma 23 Hình 10 Khung giao diện “Trang chủ” 24 Hình 11 Khung giao diện “Sản phẩm” 25 Hình 12 Khung giao diện “Bộ sưu tập” 26 Hình 13 Khung giao diện “Đăng nhập” 27 Hình 14 Giao diện “Trang chủ” 28 Hình 15 Giao diện “Bộ sưu tập” 30 Hình 16 Giao diện “Sản phẩm” 31 Hình 17 Giao diện “Đăng nhập” 32 vii DANH MỤC CÁC TỪ VIẾT TẮT STT Kí hiệu chữ viết Chữ viết đầy đủ tắt HTML Hypertext Markup Language CSS Cascading Style Sheets JS JavaScript viii LỜI MỞ ĐẦU Mục tiêu nghiên cứu của đề tài Mục tiêu đề tài “Thiết kế giao diện website giày nam MWC” tạo website bán hàng online Sắp xếp phân bổ bố cục trang web cách hợp lý, phù hợp dễ nhìn Vận dụng khả lập trình để tạo mục giao diện web như: trang chủ, trang sản phẩm,… Nhiệm vụ của đề tài Tìm hiểu ngơn ngữ, mơi trường lập trình Front End vận dụng kiến thức học để xây dựng website đơn giản Phương pháp nghiên cứu - Nghiên cứu kiến thức sẵn có internet - Hướng dẫn mentor - Kiến thức tiếp thu công ty thực tập - Xây dựng demo để hiểu rõ học Đối tượng phạm vi nghiên cứu - Phạm vi nghiên cứu ● Ngôn ngữ HTML ● Ngôn ngữ CSS ● Ngôn ngữ JavaScript ● Thư viện ReactJS - Đối tượng nghiên cứu ● Giao diện website ● Người dùng sử dụng website 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 - Chương 2: Cơ sở lý thuyết - Chương 3:Triển khai dự án - Chương 4: Kết - Chương 5: Kết luận hướng phát triển