Đề tài thiết kế web công ty web hitime

BỘ LAO ĐỘNG THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG KINH TẾ CÔNG NGHỆ TP HỒ CHÍ MINH oOo BÁO CÁO THỰC TẬP TỐT NGHIỆP XÂY DỰNG PHÁT TRIỂN GIAO DIỆN WEBSITE DỰA TRÊN BẢN THIẾT KẾ Giảng viên hướng dẫn Th S Sinh viên thực hiện Lớp C15CTT1 Ngành Công nghệ thông tin Chuyên ngành Công nghệ thông tin TP Hồ Chí Minh, tháng 06 năm LỜI CẢM ƠN Đầu tiên cho em xin trân trọng gửi lời cảm ơn chân thành và sự kính trọng tới các Thầy và Cô ngành Công nghệ thông tin trường Cao Đẳng Kinh Tế Công Nghệ TP HCM, và đặc.

BỘ LAO ĐỘNG THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG KINH TẾ - CƠNG NGHỆ TP HỒ CHÍ MINH -oOo - BÁO CÁO THỰC TẬP TỐT NGHIỆP XÂY DỰNG PHÁT TRIỂN GIAO DIỆN WEBSITE DỰA TRÊN BẢN THIẾT KẾ Giảng viên hướng dẫn: Th.S Sinh viên thực hiện: Lớp: C15CTT1 Ngành: Công nghệ thông tin Chuyên ngành: Công nghệ thông tin TP Hồ Chí Minh, tháng 06 năm LỜI CẢM ƠN Đầu tiên cho em xin trân trọng gửi lời cảm ơn chân thành kính trọng tới Thầy Cô ngành Công nghệ thông tin trường Cao Đẳng Kinh Tế - Công Nghệ TP.HCM, đặc biệt giáo viên hướng dẫn Thầy tận tình hướng dẫn, bảo em suốt trình thực luận văn Do kiến thức cịn hạn hẹp nên khơng tránh khỏi thiếu sót cách hiểu, lỗi trình bày Em mong nhận đóng góp ý kiến quý thầy cô ban lãnh đạo, anh chị công ty để báo cáo tốt nghiệp đạt kết tốt Em xin chân thành cảm ơn! TP.HCM, ngày tháng 06 năm LỜI CAM ĐOAN Nhóm báo cáo thực tập tốt nghiệp xin cam đoan cơng trình nghiên cứu riêng nhóm, khơng chép đồ án hết Các số liệu, kết đồ án trung thực chưa công bố cơng trình nghiên cứu khác Người thực TRƯỜNG CAO ĐẲNG KT-CN TPHCM KHOA KT-CN -  - CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc -  - NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN ĐỀ TÀI: XÂY DỰNG PHÁT TRIỂN GIAO DIỆN WEBSITE DỰA TRÊN BẢN THIẾT KẾ Sinh viên thực hiện: Nhận xét giáo viên: Điểm số: Điểm chữ: TP.HCM, ngày tháng năm Giảng viên (Ký ghi rõ họ tên) LỜI NĨI ĐẦU Những năm gần đây, vai trị hệ thống thông tin doanh nghiệp ngày lớn mạnh Từ chỗ đƣợc sử dụng để hỗ trợ số hoạt động văn phòng, hệ thống thơng tin trở nên có vai trị chiến lƣợc doanh nghiệp Đặc biệt thành tựu công nghệ thông tin (CNTT) khiến doanh nghiệp ngày ý tới việc áp dụng để gia tăng ưu cạnh tranh tạo hội cho Hiện nay, trào lƣu ứng dụng thành tựu CNTT không giới hạn doanh nghiệp lớn, tầm cỡ đa quốc gia mà lan rộng tất doanh nghiệp, kể doanh nghiệp vừa nhỏ nước phát triển Qua thời gian tìm hiểu học tập thực tế Công Ty Thiết Kế Web HiTime, với nhu cầu khách hàng mong muốn cty xây dựng phát triển website bán hàng dựa thiết kế khách hàng Nhờ cần cù siêng cơng việc , nên Trưởng phịng phẫn kĩ thuật giao cho công việc là: Phát triển Web Front-end chuyển đổi liệu sang giao diện đồ họa , để người dùng xem tương tác với liệu Phối hợp với back-end developer web designer để cải thiện tính khả dụng Website viết HTML ,CSS , JavaScript thư viện React, chạy Visual Studio Code , giúp xây dựng giao diện website dễ dàng , phân chia components dễ dàng gọn ràng hiệu Là sinh viên trường chúng em luôn mong muốn học hỏi áp dụng kiến thức mà chúng em thầy cô dạy thời gian qua Đồ án giúp chúng em tổng kết lại điều học phát triển khả tư duy, tính sang tạo cơng việc để sau chúng em vững bước đường mà chúng em chọn Xin chân thành cảm ơn thầy nhiệt tình dạy chúng em suốt năm học qua để chúng em có đủ kiến thức làm đồ án hoàn chỉnh bước khởi đầu cho dự án tương lai MỤC LỤC CHƯƠNG I: GIỚI THIỆU ĐƠN VỊ THỰC TẬP 1.1 Giới Thiệu Chung 1.2 Đội Ngũ Lãnh Đạo 1.3 Tầm Nhìn - Sứ Mệnh ……………………………………………………… CHƯƠNG 2: NỘI DUNG NHIỆM VỤ CHÍNH ĐƯỢC GIAO 2.1.Vị trí 2.2 Các nhiệm vụ phân công .2 CHƯƠNG 3: NỘI DUNG CÁC CÔNG VIỆC VÀ KẾT QUẢ ĐẠT ĐƯỢC .3 3.1 Tuần 1: Ôn tập lại kiến thức cũ 3.2 Tuần 2: Thực giao diện dựa file psd 3.2.1 Tạo giao diện đơn giản theo mẫu sau: 3.2.2 Sử dụng HTML CSS để tạo giao diện: 3.2.3 Phân bổ thư mục theo cấu trúc 3.3 Tuần 3: Thực hoàn thành mẫu chi tiết 3.3.1 Viết định dạng theo SCSS cài đặt grunt để tạo file 3.3.2 Tạo dự án phân chia components Visual Studio Code 3.3.3 Kết đạt 3.4 Tuần 4: Responsive cho web 3.4.1.Tổng quát: ……………………………………………………………… 3.4.2 Kết quả: ……………………………………………………………………9 3.5 Tuần 11 3.5.1.Trao đổi, phân tích với team nhận dự án xây dựng giao diện website 11 3.5.2 Tiến hành tạo dự án phân chia component Visual Studio Code 13 Public : 14 Trang index.html 14 Src :………………………………………………………………… 14 File Assets : Là file chứa hình ảnh Image 14 File App.css : File chứa đoạn code Css 14 App.js : Thư viện gọi Components 14 File Components: Giúp phân chia UI 14 Hình 3.1………………………………………………………14 CSS : Là file chứa Css components .14 Hình 3.2………………………………………………………14 Section : File chứa components 15 Hình 3.3………………………………………………………15 Svg: File chứa image có đuổi svg (giỏ hàng, u thích, load) 15 Hình 3.4……………………………………………… 15 3.5.3: Giao diện trang chủ…………………………………………………… 15 Hình 3.5…………………………………………………………………… 16 Hình 3.6…………………………………………………………………… 16 3.6 Tuần : Hoàn thành trang sản phẩm 17 3.6.1 : Fake IPA sản phẩm 17 Hình 3.9 18 3.6.2 : Giao diện sản phẩm 18 Hình 4.0 18 Hình 4.1 19 3.7 Tuần : Hoàn trang chi tiết sản phẩm 19 3.7.1 : Chi tiết sản phẩm 19 Hình 4.2 19 3.7.2 : Giỏ hàng 20 Hình 4.3 20 3.7.3: Xóa sản phẩm , trùng sản phẩm 20 Hình 4.4 20 3.7.4: Thanh toán 21 Hình 4.5 21 Hình 4.6 21 3.8 Tuần : Hoàn thành giao diện mobile 22 Hình 4.7 22 Hình 4.8 22 Hình 4.9 23 Hình 23 CHƯƠNG 4: KẾT QUẢ QUA ĐỢT THỰC TẬP 24 4.1 Nhận thức than sau thời gian tìm hiểu tham gia thực tập 24 4.2 Mối quan hệ đồng nghiệp tổ hay phận nơi thực tập .24 4.3 Học hỏi từ quy định nơi thực tập 25 4.3.1 Nội quy lao động, học tập, nghỉ ngơi an toàn lao động 25 4.3.2.Quy định Phòng cháy chữa cháy, Vệ sinh môi trường .25 4.4 Đánh giá mối liên hệ lý thuyết thực tiễn 26 CHƯƠNG 5: KẾT LUẬN 27 5.1 Kết luận 27 5.2 Hướng phát triển tương lai 27 TÀI LIỆU THAM KHẢO 28 CHƯƠNG I: GIỚI THIỆU ĐƠN VỊ THỰC TẬP 1.1 Giới Thiệu Chung Thành lập năm 2017, công ty HITIME trở thành công ty dịch vụ CNTT chuyên thiết kế website phát triển Việt Nam Được thúc đẩy niềm đam mê làm việc chăm chỉ, công ty giúp khách hàng họ xây dựng doanh nghiệp mạnh hơn, nhanh nhẹn sáng tạo Là tổ chức xây dựng tảng có sẵn, HiTime mang công nghệ tới gần với phương châm đơn giản hóa cho khách hàng sử dụng, với giải pháp để mang lại cho khách hàng có kết cơng việc Kinh doanh 1.2 Đội Ngũ lãnh Đạo Founder – CEO : Nguyễn Hoàng Chương Lead Designer : Vũ Thị Kim Oanh Lead Developer : Nguyễn Cơng Vũ 1.3 Tầm nhìn - Sứ Mệnh a) TẦM NHÌN: Bằng khát vọng tiên phong chiến lược phát triển bền vững, HiTime phấn đấu trở thành công ty Cơng nghệ hàng đầu Việt Nam, có uy tìn vị bảng đồ kinh tế Thế giới, xây dựng lên dịch vụ giải pháp Công nghệ nhằm hỗ trợ cộng đồng Doanh nghiệp Việt Nam phát triển mạnh mẽ thị trường Thế giới b) SỨ MỆNH: Cung cấp giải pháp công nghệ nâng cao hiệu hoạt động kinh doanh cho Doanh nghiệp Việt c) GIÁ TRỊ CỐT LỖI: Trung thực – Nhiệt Huyết – Sáng Tạo – Hiệu Quả” d) VĂN HÓA NGƯỜI HITIME: Yêu nước, Kỷ luật, Văn minh HiTime nơi tập hợp người có lý tưởng, có lực, có lĩnh ln chủ động tìm hướng riêng khao khát chung tay tạo giải pháp dịch vụ hiệu để đóng góp cho phát triển Doanh nghiệp Việt Môi trường làm việc HiTime sáng tạo, hiệu quả; Văn hóa HiTime đề cao tinh thần trách nhiệm, tôn trọng kỷ luật, coi trọng công văn minh SLOGAN: e) "Tầm Nhìn Tiên Phong" CHƯƠNG 2: NỘI DUNG NHIỆM VỤ CHÍNH ĐƯỢC GIAO 2.1 Vị trí - Phịng kĩ thuật - Thực tập vị trí lập trình viên (frontend) - Làm việc anh chị công ty - Được anh chị trước hướng dẫn - Làm việc bạn thực tập sinh khác 2.2 Các nhiệm vụ phân công - Tự học thực hành dựa tài liệu - Báo cáo thực hành - Làm bố cục giao diện chung - Làm giao diện chi tiết - Hiệu ứng cho web - Sử dụng javascript để tạo popup thay đổi cần thiết cho web - Sử dụng thư viện React, giúp phân chia components dễ dàng , tái sử dụng - Responsive cho web • Section : File chứa components Hình 3.3 • Svg: File chứa image có đuổi svg (giỏ hàng, u thích, load) Hình 3.4 3.5.3 Giao diện trang chủ 15 Hình 3.5 Hình 3.6 16 Hình 3.7 Hình 3.8 3.6 Tuần : Hoàn thành trang sản phẩm 3.6.1 : Fake IPA sản phẩm Hình 3.8 17 Hình 3.9 3.6.2 : Giao diện sản phẩm Hình 4.0 18 Hình 4.1 3.7 Tuần : Hoàn trang chi tiết sản phẩm 3.7.1 : Chi tiết sản phẩm Hình 4.2 19 3.7.2 : Giỏ hàng Hình 4.3 3.7.3: Xóa sản phẩm , trùng sản phẩm Hình 4.4 20 3.7.4: Thanh tốn Hình 4.5 Hình 4.6 21 3.8 Tuần : Hồn thành giao diện mobile Hình 4.7 Hình 4.8 22 Hình 4.9 Hình 23 CHƯƠNG 4: KẾT QUẢ QUA ĐỢT THỰC TẬP 4.1 Nhận thức than sau thời gian tìm hiểu tham gia thực tập đơn vị - Thuận lợi: + Có kỹ lập trình khả chịu khó học hỏi + Được cung cấp tài liệu, môi trường làm việc Nhận hỗ trợ gỡ lỗi từ người hướng dẫn thành viên + phòng làm việc - Khó khăn: Mất nhiều thời gian làm quen với môi trường làm việc, phương thức làm + +Một số lỗi liên quan đến môi trường - Những kiến thức, kỹ cần có: + Lập trình + Tiếng anh + Tối ưu hóa từ khóa tìm kiếm thơng tin 4.2 Mối quan hệ đồng nghiệp tổ hay phận đơn vị nơi thực tập - Để thuận lợi phát triển mối quan hệ công ty hồn thành cơng việc giao cần phải: - + Giao tiếp + Lắng nghe + Tự học Ưu điểm: + Mở rộng, tạo mối quan hệ 24 - + Học kiến thức chuyên ngành + Có đồng nghiệp hỗ trợ giải vấn đề Nhược điểm: + Chưa nắm rõ tính cách thời gian đầu + Kiến thức cá nhân hạn chế 4.3 Học hỏi từ quy định nơi thực tập 4.3.1 Nội quy lao động, học tập, nghỉ ngơi an toàn lao động - Thời gian làm việc công ty em nắm quy định, nội quy sau: - + Làm việc (8h00 - 17h00), có nghỉ trưa (12h00 – 13h00) + Khơng ép buộc làm việc tăng ca + Công việc phân công lên kế hoạch từ trước + Công ty khơng có quy định đồng phục cho đội ngũ dev Trong q trình thực tập cơng ty em nắm tác phong công nghiệp sau: + Tuân thủ giấc công ty + Lịch lộ trình làm việc rõ ràng + Ứng xử tốt, tôn trọng đồng nghiệp cấp 4.3.2.Quy định Phịng cháy chữa cháy, Vệ sinh mơi trường - Quy định Phòng cháy chữa cháy vệ sinh môi trường: + Đáp ứng tiêu chí Phịng cháy chữa cháy theo quy định + Giữ gìn vệ sinh chung có ý thức bảo vệ môi trường + Môi trường làm việc thoải mái, không gian vừa đủ cho học tập làm việc 25 Nếu thiếu kiến thức quan, nơi làm việc không đảm bảo sức + khỏe an toàn nhân viên trường hợp hy hữu diễn 4.4 Đánh giá mối liên hệ lý thuyết thực tiễn - Trong trình thực tập phát sinh tình sau: + Tiếp thu cơng nghệ mới: So với trường có Thầy, Cô hướng dẫn điểm lưu ý cung cấp tài liệu cách chi tiết công ty anh, chị hướng dẫn đưa tài liệu thực tập sinh phải tự học thông qua internet, bạn thực tập khác + Nghỉ phép: Nếu trường phải viếc đơn, thông báo với giảng viên cơng ty cần báo trước cho người hướng dẫn 3-5 ngày phải hoàn thành công việc giao vào đầu tuần báo cáo + Quá trình học tập: So với trường công ty thực tập sinh phải tự đánh giá, tìm kiếm thơng tin giải vấn đề gặp phải q trình thực tập thơng qua internet - - Để đạt hiểu cao công việc cần phải có, trang bị kỹ năng: + Tiếng anh + Giao tiếp + Kiến thức lập trình + Khả tìm kiếm sửa lỗi Trong trình học tập em nhận giúp đỡ anh, chị tài phòng làm việc: + Kỹ làm việc nhóm + Thái độ làm việc + Kỹ giao tiếp 26 + - Giải vấn đề Tại trường em nhận nhiều hỗ trợ, giúp đỡ từ giảng viên thuộc khoa Công nghệ Thông Tin hỗ trợ giải đáp giúp em vấn đề học tập, cách trình bày, làm báo cao cung cấp đầy đủ thơng tin cần thiết trình thực tập làm việc công ty CHƯƠNG 5: KẾT LUẬN 5.1 Kết luận - Sau đợt thực tập em học hỏi thêm nhiều từ thầy cô, anh chị công ty Hitime - Em tạo giao diện web - Làm hoàn thiện giao diện khách hàng đưa 5.2 Hướng phát triển tương lai - Học thêm ngôn ngữ - Cả thiện kĩ nhân 27 TÀI LIỆU THAM KHẢO Website : www.w3schools.com fullstack.edu.vn htdeveloper.mozilla.org/en-US/docs/Web/CSS getbootstrap.com https://freetuts.net/reactjs/tu-hoc-reactjs 28 ... tìm hiểu học tập thực tế Công Ty Thiết Kế Web HiTime, với nhu cầu khách hàng mong muốn cty xây dựng phát triển website bán hàng dựa thiết kế khách hàng Nhờ cần cù siêng công việc , nên Trưởng phịng... Chung Thành lập năm 2017, công ty HITIME trở thành công ty dịch vụ CNTT chuyên thiết kế website phát triển Việt Nam Được thúc đẩy niềm đam mê làm việc chăm chỉ, công ty giúp khách hàng họ xây... việc công ty em nắm quy định, nội quy sau: - + Làm việc (8h00 - 17h00), có nghỉ trưa (12h00 – 13h00) + Không ép buộc làm việc tăng ca + Công việc phân công lên kế hoạch từ trước + Cơng ty khơng