Dự án thiết kế website giới thiệu bản thân

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC PHENIKAA DỰ ÁN THIẾT KẾ WEBSITE GIỚI THIỆU BẢN THÂN Giảng viên: Vũ Văn Quang Nhóm sinh viên: Nhóm Thành viên Hồng Thị Hà MSV: 20010893 Trần Cơng Danh MSV: 20010760 Dương Văn Quang MSV: 20010793 Lớp: Xây dựng ứng dụng web-1-1-22(N06) HÀ NỘI, 11/2022 MỤC LỤC LỜI MỞ ĐẦU CHƯƠNG I GIỚI THIỆU ĐỀ TÀI TÊN ĐỀ TÀI GIỚI THIỆU ĐỀ TÀI .6 MỤC TIÊU VÀ PHẠM VI ĐỀ TÀI 3.1 Mục tiêu 3.2 Phạm vi đề tài .6 BỐ CỤC BÀI TẬP LỚN CHƯƠNG II CÔNG NGHỆ SỬ DỤNG Tổng quan Công nghệ Web Tổng quan HTML, CSS JavaScript .7 2.1 HTML 2.2 CSS 2.3 JavaScript CHƯƠNG III PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNH .11 THIẾT KẾ KIẾN TRÚC 11 1.1 Cấu trúc tổng quan 11 1.2 Phân trang liệu 11 XÂY DỰNG ỨNG DỤNG WEB 15 2.1 Thư viện công nghệ sử dụng .15 2.2 Kết thu 15 CHƯƠNG IV KẾT LUẬN 19 ƯU ĐIỂM 19 HẠN CHẾ 19 2.1 Hạn chế web .19 2.2 Hạn chế giải pháp trình làm 19 KẾT LUẬN 19 HƯỚNG PHÁT TRIỂN 20 SOURCE CODE .20 5.1 Link source code .20 5.2 Link domain .20 LỜI MỞ ĐẦU Là ngành công nghiệp đứng đầu chuỗi việc làm tiềm thời đại, Công nghệ thông tin mệnh danh “vua ngành” Điều chứng minh phần “độ hot” nghề thị trường Việt Nam, giới Nhu cầu tuyển dụng kỹ sư IT liên tục tăng tồn cầu khơng có dấu hiệu “giảm nhiệt” Việc apply vào cơng ty cơng nghệ địi, kỹ ứng viên yếu tố quan trọng Làm website giới thiệu thân cách nhanh để gây ấn tượng với nhà tuyển dụng, khơng, bạn sử dụng web giới thiệu thân để tạo dấu ấn thương hiệu cá nhân Một website giới thiệu thân website cung cấp sơ yếu lý lịch cá nhân cá nhân tập thể Tại đây, bạn cung cấp tất sản phẩm, blog họ Các website giới thiệu thân thường thiết kế dạng website tĩnh, khơng có tính đăng ký tài khoản Hầu hết người dùng đọc chia sẻ nội dung trang Cũng landing page giới thiệu chuyên biệt sản phẩm, dịch vụ có để lại thơng tin liên hệ với chủ sở hữu Nhìn chung, cần nhìn vào website giới thiệu thân người dùng nắm bắt gần tồn thông tin bản, sản phẩm, thành tựu người tập thể Với mong muốn xây dựng website để thầy nắm thơng tin thành viên nhóm, chúng em xây dựng website giới thiệu thành viên nhóm Đề tài báo cáo chúng em thực với hạn chế mặt kiến thức, kĩ thuật kinh nghiệm thực tế Do đó, q trình làm nên đề tài có thiếu sót điều khơng thể tránh khỏi nên chúng em mong nhận ý kiến đóng góp quý báu thầy để kiến thức chúng em hoàn thiện chúng em làm tốt lần sau Để hoàn thành tốt để tài báo cáo này, chúng em xin gửi lời cảm ơn chân thành đến giảng viên, thầy Vũ Văn Quang, người trực tiếp hỗ trợ chúng em suốt trình làm đề tài Chúng em cảm ơn thầy đưa lời khuyên từ kinh nghiệm thực tiễn để định hướng cho chúng em với yêu cầu đề tài chọn, giải đáp thắc mắc đưa góp ý, chỉnh sửa kịp thời giúp chúng em khắc phục nhược điểm hoàn thành tốt thời hạn đề Bảng phân chia cơng việc nhóm 11 STT HỌ VÀ TÊN CƠNG VIỆC ĐẢM NHẬN Hồng Thị Hà Code giao diện, phần báo cáo Trần Công Danh Code giao diện, làm hiệu ứng Dương Văn Quang Code giao diện, Tổng hợp Làm báo cáo, Vẽ sơ đồ Bảng 1: Phân chia cơng việc nhóm Điểm đánh giá trình ST MÃ SINH ĐIỂM HỌ VÀ TÊN Nhóm tự chấm VIÊN T Hồng Thị Hà 20010893 Trần Công Danh 20010793 Dương Văn Quang 20010760 Bảng 2: Bảng đánh giá điểm trình Giáo viên chấm CHƯƠNG I GIỚI THIỆU ĐỀ TÀI TÊN ĐỀ TÀI Website giới thiệu thành viên nhóm GIỚI THIỆU ĐỀ TÀI Với mục đích gây ấn tượng với nhà tuyển dụng giúp nhà tuyển dụng có nhìn xác ứng viên, website giới thiệu thân đời Dựa mục đích đó, với mong muốn giới thiệu cá nhân nhóm, chúng em định xây dựng đề tài: ”Website giới thiệu thành viên nhóm” MỤC TIÊU VÀ PHẠM VI ĐỀ TÀI 3.1 Mục tiêu Hiểu rõ HTML CSS ngơn ngữ lập trình web, trau dồi kỹ xây dựng ứng dụng web Bên cạnh cịn giúp trau dồi kỹ làm việc kỹ thuyết trình, kỹ quản lý dự án, kỹ làm việc nhóm Ngồi thực đề tài giúp chúng em có nhiều kiến thức tảng để phát triển ứng dụng công nghệ vào thực tế 3.2 Phạm vi đề tài  Tìm hiểu lập trình Web  Tìm hiểu HTML, CSS JavaScript  Phân trang xây dựng bố cục trang web  Xây dựng trang web sử dụng ngơn ngữ lập trình như: html, css javascript BỐ CỤC BÀI TẬP LỚN Phần lại báo cáo Bài tập lớn tổ chức sau:  Chương nói cơng nghệ sử dụng để xây dựng sản phẩm  Chương chúng em nói rõ phát triển triển khai website Để viết chương trình sử dụng chương trình cách triển khai để viết ứng dụng  Chương chương tổng kết lại so sánh với chương trình tương tự để thấy khác biệt trội sản phẩm so với chương trình khác CHƯƠNG II CÔNG NGHỆ SỬ DỤNG Tổng quan Công nghệ Web Công nghệ web thuật ngữ chung đề cập đến nhiều ngơn ngữ gói đa phương tiện sử dụng kết hợp với nhau, để tạo trang web Mỗi cơng nghệ có chức riêng biệt cần yêu cầu sử dụng kép thêm cơng nghệ khác Do đó, nói tất thành phần tạo nên trang web phụ thuộc lẫn Website văn phòng ảo doanh nghiệp mạng Internet Website bao gồm tồn thơng tin, liệu, hình ảnh sản phẩm, dịch vụ hoạt động sản xuất kinh doanh mà doanh nghiệp muốn truyền đạt tới người truy cập Internet Với vai trò quan trọng vậy, coi Website mặt Cơng ty, nơi để đón tiếp giao dịch với khách hàng mạng Website không đơn nơi cung cấp thông tin cho người xem, cho khách hàng đối tác kinh doanh doanh nghiệp, cịn phải phản ánh nét đặc trưng doanh nghiệp, đảm bảo tính thẩm mỹ cao, tiện lợi, dễ sử dụng đặc biệt phải có sức lơi người sử dụng để thuyết phục họ trở thành khách hàng doanh nghiệp Tổng quan HTML, CSS JavaScript 2.1 HTML HyperText Markup Language hay cịn gọi HTML ngơn ngữ đánh dấu tiêu chuẩn cho tài liệu thiết kế để hiển thị trình duyệt web Nó trợ giúp công nghệ CSS ngôn ngữ kịch giống JavaScript HTML cung cấp phương tiện để tạo tài liệu có cấu trúc cách biểu thị ngữ nghĩa cấu trúc cho văn headings, paragraphs, lists, links, quotes mục khác Các phần tử HTML phân định tags, viết dấu ngoặc nhọn Các tags giới thiệu trực tiếp nội dung vào trang Các tags khác bao quanh cung cấp thơng tin văn tài liệu bao gồm thẻ khác làm phần tử phụ Các trình duyệt khơng hiển thị thẻ HTML, sử dụng chúng để diễn giải nội dung trang - Ưu điểm HTML là:  Ngôn ngữ sử dụng rộng rãi với nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng vô lớn đằng sau  Có thể hoạt động mượt mà hầu hết trình duyệt hành  Quá trình học HTML đơn giản  Mã nguồn mở hồn tồn miễn phí  Các Markup sử dụng HTML thường ngắn gọn đồng  Chuẩn web vận hành World Wide Web Consortium (W3C)  Dễ dàng tích hợp với ngôn ngữ backend PHP, Node.js, - Nhược điểm HTML:  Ngôn ngữ áp dụng chủ yếu cho trang web tĩnh Đối với tính động, bạn cần sử dụng JavaScript ngôn ngữ backend bên thứ ví dụ PHP  Người dùng phải tạo trang web riêng lẻ cho HTML, phần tử giống  Một số trình duyệt chấp nhận tính cách chậm chạp Đơi trình duyệt cũ lúc hiển thị thẻ 2.2 CSS Cascading Style Sheet hay gọi CSS mơ ~t ngơn ngữ lâ ~p trình thiết kế đơn giản dễ sử dụng Mục tiêu CSS giúp đơn giản hóa q trình tạo website CSS có nhiệm vụ thực hiê ~n viê ~c xử lý giao diê ~n mô ~t trang web Có thể kể đến yếu tố màu sắc văn bản, hay khoảng cách đoạn, font chữ, hình ảnh, bố cục, màu nền,… Với hỗ trợ CSS người dùng thay đổi, chỉnh sửa yếu tố theo ý muốn Trong trình phát triển thiết kế website CSS cơng cụ vơ cần thiết Nó giải tốt cơng việc mà HTML khơng xử lý - Có thể phân chia loại CSS thành loại như:  CSS tùy chỉnh hình  CSS tùy chỉnh cách hiển thị đoạn text  CSS tùy chỉnh kiểu chữ kích thước  CSS tùy chỉnh bảng  CSS tùy chỉnh danh sách - Ưu điểm CSS:  Khả tiết kiệm thời gian  CSS giúp khả tải trang nhanh chóng  Dễ dàng thực bảo trì  CSS sở hữu thuộc tính rộng  Khả tương thích tốt - Nhược điểm CSS:  CSS hoạt động khác biệt cho trình duyệt  Khá khó khăn cho người  Định dạng web có khả gặp rủi ro 2.3.JavaScript Javascript ngơn ngữ lập trình web phổ biến ngày Javascript tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động Chúng đóng vai trị tương tự phần website, cho phép Client-side Script từ người dùng tương tự máy chủ (Nodejs) để tạo website động Javascript – ngôn ngữ vô phổ biến lĩnh vực lập trình ngày Có thể nói rằng, Javascript hay cịn gọi JS ngơn ngữ thông dụng vài năm gần Đã có nhiều framework đời viết loại ngơn ngữ Từ frontend backend nơi có xuất JS Một vài thông tin sau giúp cho bạn hiểu thêm loại ngôn ngữ đặc biệt - Ưu điểm Javascript:  Chương trình dễ học  Những lỗi Javascript dễ để phát hiện, từ giúp bạn sửa lỗi cách nhanh chóng  Những trình duyệt web dịch thơng qua HTML mà không cần sử dụng đến compiler  JS hoạt động nhiều tảng trình duyệt web khác  Được chuyên gia đánh giá loại ngôn ngữ lập trình nhẹ nhanh nhiều so với ngơn ngữ lập trình khác  JS cịn gắn số element events trang web  Những website có sử dụng JS chúng giúp cho trang web có tương tác tăng thêm nhiều trải nghiệm cho người dùng  Người dùng tận dụng JS với mục đích để kiểm tra input thay cách kiểm tra thủ cơng thơng qua hoạt động truy xuất database  Giao diện ứng dụng phong phú với nhiều thành phần Drag and Drop, Slider để cung cấp đến cho người dùng Rich Interface (giao diện giàu tính năng)  Giúp thao tác với người dùng phía Client tách biệt Client với - Nhược điểm Javascript: JS Code Snippet lớn JS dễ bị hacker scammer khai thác JS khơng có khả đa luồng đa dạng xử lý Có thể dùng để thực thi mã độc máy tính người sử dụng  Những thiết bị khác thực JS khác nhau, từ dẫn đến khơng đồng  Vì tính bảo mật an tồn nên Client-Side Javascript không cho phép đọc ghi file  JS không hỗ trợ bạn sử dụng tình trạng thiết bị kết nối mạng     CHƯƠNG III PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNH THIẾT KẾ KIẾN TRÚC 1.1 Cấu trúc tổng quan Người dùng truy cập đến trang thông tin cụ thể thông quan page Home ngược lại 1.2 Phân trang liệu 1.2.1 Trang HOME Page Home gồm phần: NavBar, Slider Bottum Với NavBar phần header trang, người dùng quan sát thấy thông tin tổng quan như: logo, menu chứa trang Slider chia sẻ thông tin chung chủ đề mục đích trang web, giúp người xem có nhìn khát qt trang web Bottum chứa thông tin như: tổng quan trang web, thông tin môn học Ứng dụng web, thông tin liên hệ với thành viên 1.2.2 Trang About Us Tương tự với page Home, page About Us có cấu trúc phần Điều khác biệt page About Us trang chứa thông tin thành viên nhóm Là page chứa thơng tin chính, thể nội dung mà trang web muốn hướng đến Phần NavBar Bottum page không thay đổi so với page Home Với phần Silder – body page chứa thông tin miêu tả tổng quan thành viên nhóm như: họ tên, ngày sinh, mã sinh viên, tính cách với đường dẫn đến trang facebook, github cá nhân 1.2.3 Trang Our Technology Tại page Our Technology, chúng em đưa thông tin công nghệ sử dụng trình xây dựng trang web Để người xem có nhìn cụ thể cơng nghệ, người xem truy cập đến trang thông tin gốc ngơn ngữ lập trình tìm hiểu thơng qua phần Teck-body trang 1.2.4 Trang Source Code Trong trường hợp người xem muốn theo dõi source code tạo trang web, họ truy cập đến page Source Code Tại đây, chúng em cung cấp source code HTML, CSS sử dụng trang web Ngồi cịn có source code đầy đủ Github 1.2.5 Trang Contact Trong trường hợp người dùng muốn gửi nhận xét, đánh giá hay đơn giản liên hệ, họ gửi thơng tin trực tiếp qua page Contact 2 XÂY DỰNG ỨNG DỤNG WEB 2.1 Thư viện công nghệ sử dụng - Thư viện sử dụng: Font Awesome icon font phổ biến nay, thời điểm viết 28/10/2020 với phiên 5.15.1 hỗ trợ 1600 icon miễn phí, dễ dàng để tích hợp vào website, công việc bạn lựa chọn icon copy paste Font Awesome có miễn phí trả phí, nhiên bạn cần dùng miễn phí đủ để làm đẹp cho website - Link thư viện: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css - Cơng nghệ sử dụng: HTML, CSS, Javascript 2.2 Kết thu - Giao diện trang chủ - Giao diện trang About US - Giao diện trang Our Technolory - Giao diện trang Source Code - Giao diện trang Contact CHƯƠNG IV KẾT LUẬN ƯU ĐIỂM - Cơ nắm bước xây dựng ứng dụng web – website, thực quy trình - Ứng dụng cơng nghệ giới thiệu q trình học tập: HTML, CSS, JavaScript - Có tên miền trang web riêng HẠN CHẾ 2.1 Hạn chế web - Còn sơ sài, đơn giản so với web thị trường - Chưa có sở liệu - Hệ thống đáp ứng thao tác 2.2 Hạn chế giải pháp trình làm Vì HTML, CSS, Javascript ngơn ngữ học nên có nhiều bỡ ngỡ việc chỉnh kích thước có nhiều lệnh nên giải pháp đọc slide giảng thầy tìm thêm kiến thức mạng – Internet Trong trình làm bài, chúng em gặp chút khó khăn việc kết nối liệu, phân chia bố cục trang web, … Chúng em tìm hiểu, lắng nghe ý kiến, nhận xét thầy để cải tiến trang web KẾT LUẬN Sau thời gian học tập nghiên cứu, nhóm chúng em hồn thành tập hạn Khi làm tập lớn, chúng em học tập thêm nhiều kiến thức ngôn ngữ, phần mới,… giúp chúng em cải thiện điểm yếu ngại giao tiếp, kỹ làm việc nhóm Trong q trình làm, chúng em gặp nhiều thắc mắc trình làm web, phân trang Tuy nhiên lần chúng em làm web nên nhiều hạn chế thiết kế, sản phẩm số lỗi nhỏ Chúng em mong nhận ý kiến đóng góp thầy bạn để tập lớn chúng em hoàn thiện vào thực tế Nhóm chúng em xin chân thành cảm ơn thầy Vũ Văn Quang tận tình hướng dẫn, truyền đạt kiến thức bảo nhóm em suốt thời gian qua Chúng em xin chân thành cảm ơn! HƯỚNG PHÁT TRIỂN Với phát triển vượt bậc công nghệ thời đại nay, hội việc làm xứng tầm với thân rộng mở với người Những công việc dành cho SE khơng địi hỏi kỹ teamwork, quản trị dự án, xây dựng dự án, lập trình, … mà đòi hỏi kỹ đặc trưng kỹ giao tiếp, … Việc gây ấn tượng, “ghi điểm” với nhà tuyển dụng điều tối quan trọng với ứng viên trình apply vào cơng việc Chúng ta phát triển chương trình thành website tạo CV cho người phù hợp với ngành nghề, công việc giúp đỡ ứng viên q trình ứng tuyển vào cơng ty SOURCE CODE 5.1 Link source code https://drive.google.com/drive/folders/1PWpKcTnMqE1m10meo20buYrTH qvxG51t?fbclid=IwAR1b-SKP2JoBZ8bJHJwiaGXDJrZzMIdCTD3bxwK8SWhjeRGvoxoq8iLHHA 5.2 Link domain https://web-cv-phe-team6.000webhostapp.com/index.html ... I GIỚI THIỆU ĐỀ TÀI TÊN ĐỀ TÀI Website giới thiệu thành viên nhóm GIỚI THIỆU ĐỀ TÀI Với mục đích gây ấn tượng với nhà tuyển dụng giúp nhà tuyển dụng có nhìn xác ứng viên, website giới thiệu thân. .. giới thiệu thân để tạo dấu ấn thương hiệu cá nhân Một website giới thiệu thân website cung cấp sơ yếu lý lịch cá nhân cá nhân tập thể Tại đây, bạn cung cấp tất sản phẩm, blog họ Các website giới. .. vào website giới thiệu thân người dùng nắm bắt gần tồn thơng tin bản, sản phẩm, thành tựu người tập thể Với mong muốn xây dựng website để thầy nắm thơng tin thành viên nhóm, chúng em xây dựng website