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

Nhìn chung, chỉ cần nhìn vào website giới thiệu bản thân là người dùng có thểnắm bắt gần như toàn bộ những thông tin cơ bản, các sản phẩm, thành tựu củangười đó hoặc của tập thể đó.. Với

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 6

MỤC LỤC

LỜI MỞ ĐẦU 4

CHƯƠNG I GIỚI THIỆU ĐỀ TÀI 6

1 TÊN ĐỀ TÀI 6

2 GIỚI THIỆU ĐỀ TÀI 6

3 MỤC TIÊU VÀ PHẠM VI ĐỀ TÀI 6

3.1 Mục tiêu 6

3.2 Phạm vi đề tài 6

4 BỐ CỤC BÀI TẬP LỚN 6

CHƯƠNG II CÔNG NGHỆ SỬ DỤNG 7

1 Tổng quan về Công nghệ Web 7

2 Tổng quan về HTML, CSS và JavaScript 7

2.1 HTML 7

2.2 CSS 8

2.3 JavaScript 9

CHƯƠNG III PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNH 11

1 THIẾT KẾ KIẾN TRÚC 11

1.1 Cấu trúc tổng quan 11

1.2 Phân trang dữ liệu 11

2 XÂY DỰNG ỨNG DỤNG WEB 15

2.1 Thư viện và công nghệ sử dụng 15

2.2 Kết quả thu được 15

CHƯƠNG IV KẾT LUẬN 19

1 ƯU ĐIỂM 19

2 HẠN CHẾ 19

2.1 Hạn chế của web 19

2.2 Hạn chế và giải pháp trong quá trình làm bài 19

3 KẾT LUẬN 19

4 HƯỚNG PHÁT TRIỂN 20

5 SOURCE CODE 20

5.1 Link source code 20

5.2 Link domain 20

Một website giới thiệu bản thân là một website cung cấp sơ yếu lý lịch của một

cá nhân hoặc từng cá nhân trong một tập thể Tại đây, bạn sẽ được cung cấp tất cảnhững sản phẩm, các bài blog của họ Các website giới thiệu bản thân thường đượcthiết kế dưới dạng website tĩnh, không có tính năng đăng ký tài khoản Hầu hếtngười dùng chỉ có thể đọc và chia sẻ nội dung trên trang Cũng có thể là nhữnglanding page giới thiệu chuyên biệt những sản phẩm, dịch vụ và có để lại thông tinliên hệ với chủ sở hữu

Nhìn chung, chỉ cần nhìn vào website giới thiệu bản thân là người dùng có thểnắm bắt gần như toàn bộ những thông tin cơ bản, các sản phẩm, thành tựu củangười đó hoặc của tập thể đó Với mong muốn xây dựng một website để thầy cóthể nắm được thông tin các thành viên trong nhóm, chúng em đã xây dựng mộtwebsite giới thiệu các thành viên trong nhóm 6

Đề tài và bài báo cáo được chúng em thực hiện với những hạn chế về mặt kiếnthức, kĩ thuật và cũng như kinh nghiệm thực tế Do đó, trong quá trình làm nên đềtài có những thiếu sót là điều không thể tránh khỏi nên chúng em rất mong nhậnđược những ý kiến đóng góp quý báu của thầy để kiến thức của chúng em đượchoàn thiện hơn và chúng em có thể làm tốt hơn nữa trong những lần sau

Để hoàn thành tốt để tài và bài báo cáo này, chúng em xin gửi lời cảm ơn chânthành đến giảng viên, thầy Vũ Văn Quang, người đã trực tiếp hỗ trợ chúng emtrong suốt quá trình làm đề tài Chúng em cảm ơn thầy đã đưa ra những lời khuyên

từ kinh nghiệm thực tiễn của mình để định hướng cho chúng em đi đúng với yêucầu của đề tài đã chọn, luôn giải đáp thắc mắc và đưa ra những góp ý, chỉnh sửakịp thời giúp chúng em khắc phục nhược điểm và hoàn thành tốt cũng như đúngthời hạn đã đề ra

Bảng phân chia công việc nhóm 11

1 Hoàng Thị Hà Code giao diện, một phần báo cáo

2 Trần Công Danh Code chính giao diện, làm hiệu ứng

3 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á quá trình

ST

T HỌ VÀ TÊN

MÃ SINH VIÊN

ĐIỂM Nhóm tự chấm Giáo viên chấm

1 Hoàng Thị Hà 20010893 9

2 Trần Công Danh 20010793 9

3 Dương Văn Quang 20010760 9

Bảng 2: Bảng đánh giá điểm quá trình

CHƯƠNG I GIỚI THIỆU ĐỀ TÀI

1 TÊN ĐỀ TÀI

Website giới thiệu các thành viên trong nhóm

2 GIỚI THIỆU ĐỀ TÀI

Với mục đích gây ấn tượng với nhà tuyển dụng và giúp nhà tuyển dụng cócái nhìn chính xác về ứng viên, các website giới thiệu bản thân đã ra đời Dựa trênmục đích đó, với mong muốn giới thiệu từng cá nhân trong nhóm, chúng em đãquyết định xây dựng đề tài: ”Website giới thiệu các thành viên trong nhóm”

3 MỤC TIÊU VÀ PHẠM VI ĐỀ TÀI

3.1 Mục tiêu

Hiểu rõ hơn về HTML và CSS cùng các ngôn ngữ lập trình web, trau dồinhững kỹ năng xây dựng một ứng dụng web Bên cạnh đó nó còn giúp trau dồinhững kỹ năng làm việc như kỹ năng thuyết trình, kỹ năng quản lý dự án, kỹ nănglàm việc nhóm Ngoài ra khi thực hiện đề tài đã giúp chúng em có nhiều kiến thứcnền tảng để phát triển ứng dụng của công nghệ vào thực tế

3.2 Phạm vi đề tài

 Tìm hiểu về lập trình Web

 Tìm hiểu về HTML, CSS và JavaScript

 Phân trang và xây dựng bố cục trang web

 Xây dựng trang web sử dụng các ngôn ngữ lập trình như: html, css vàjavascript

4 BỐ CỤC BÀI TẬP LỚN

Phần còn lại của báo cáo Bài tập lớn được tổ chức như sau:

 Chương 2 sẽ nói về công nghệ được sử dụng để xây dựng ra sản phẩm

 Chương 3 chúng em sẽ nói rõ hơn về phát triển và triển khai website Để viếtđược chương trình thì sử dụng những chương trình gì và cách triển khai đểviết ứng dụng

 Chương 4 là chương tổng kết lại và so sánh với các chương trình tương tự đểthấy được sự khác biệt nổi trội hơn của sản phẩm so với các chương trìnhkhác

CHƯƠNG II CÔNG NGHỆ SỬ DỤNG

1 Tổng quan về Công nghệ Web

Công nghệ web là một thuật ngữ chung đề cập đến nhiều ngôn ngữ và gói đaphương tiện được sử dụng kết hợp với nhau, để tạo ra các trang web Mỗi côngnghệ có chức năng riêng biệt và cần yêu cầu sử dụng kép ít nhất thêm một côngnghệ khác Do đó, có thể nói rằng tất cả các thành phần tạo nên một trang web phụthuộc lẫn nhau

Website là một văn phòng ảo của doanh nghiệp trên mạng Internet Websitebao gồm toàn bộ thông tin, dữ liệu, hình ảnh về các sản phẩm, dịch vụ 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ậpInternet Với vai trò quan trọng như vậy, có thể coi Website chính là bộ mặt củaCông ty, là nơi để đón tiếp và giao dịch với các khách hàng trên mạng Websitekhông chỉ đơn thuần là nơi cung cấp thông tin cho người xem, cho các khách hàng

và đối tác kinh doanh của doanh nghiệp, nó còn phải phản ánh được những nét đặctrưng của doanh nghiệp, đảm bảo tính thẩm mỹ cao, tiện lợi, dễ sử dụng và đặc biệtphải có sức lôi cuốn người sử dụng để thuyết phục họ trở thành khách hàng củadoanh nghiệp

2 Tổng quan về HTML, CSS và JavaScript

2.1 HTML

HyperText Markup Language hay còn gọi là HTML là ngôn ngữ đánh dấutiêu chuẩn cho các tài liệu được thiết kế để hiển thị trong trình duyệt web Nó cóthể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống nhưJavaScript

HTML cung cấp các phương tiện để tạo tài liệu có cấu trúc bằng cách biểuthị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs, lists, links, quotes vàcác mục khác Các phần tử HTML được phân định bằng các tags, được viết bằngdấu ngoặc nhọn Các tags như và giới thiệu trực tiếp nội dung vào trang Các tagskhác như bao quanh và cung cấp thông tin về văn bản tài liệu và có thể bao gồmcác thẻ khác làm phần tử phụ Các trình duyệt không hiển thị các thẻ HTML,nhưng sử dụng chúng để diễn giải nội dung của trang

- Ưu điểm của HTML là:

 Ngôn ngữ này được sử dụng rộng rãi với rất nhiều nguồn tài nguyên

hỗ trợ cùng một cộng đồng sử dụng vô cùng lớn đằng sau nó

 Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện hành

 Quá trình học HTML khá đơn giản

 Mã nguồn mở và hoàn toàn miễn phí

 Các Markup sử dụng trong HTML thường ngắn gọn và đồng nhất

 Chuẩn chính của web được vận hành bởi World Wide WebConsortium (W3C)

 Dễ dàng tích hợp với các ngôn ngữ backend như PHP, Node.js,

- Nhược điểm của HTML:

 Ngôn ngữ này chỉ được áp dụng chủ yếu cho trang web tĩnh Đối vớicác tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữbackend bên thứ 3 ví dụ như PHP

 Người dùng phải tạo các trang web riêng lẻ cho HTML, ngay cả khicác phần tử giống nhau

 Một số trình duyệt chấp nhận các tính năng mới một cách chậm chạp.Đôi khi các trình duyệt cũ hơn không phải lúc nào cũng hiển thị cácthẻ mới hơn

2.2 CSS

Cascading Style Sheet hay còn gọi là CSS là mô ~t ngôn ngữ lâ ~p trình đượcthiết kế rất đơn giản và dễ sử dụng Mục tiêu của CSS là giúp đơn giản hóa quátrình tạo ra các website CSS có nhiệm vụ thực hiê ~n viê ~c xử lý giao diê ~n của mô ~ttrang web Có thể kể đến các yếu tố như màu sắc văn bản, hay khoảng cách giữacác đoạn, font chữ, hình ảnh, bố cục, màu nền,…

Với sự hỗ trợ của CSS thì người dùng có thể thay đổi, chỉnh sửa những yếu

tố trên theo ý muốn Trong quá trình phát triển và thiết kế website thì CSS chính làmột công cụ vô cùng cần thiết Nó có thể giải quyết tốt những công việc mà HTMLkhông xử lý được

- Có thể phân chia các loại CSS thành những loại như:

 CSS tùy chỉnh hình nền

 CSS tùy chỉnh cách hiển thị đoạn text

 CSS tùy chỉnh kiểu chữ và kích thước

 CSS tùy chỉnh bảng

 CSS tùy chỉnh danh sách

- Ưu điểm của CSS:

 Khả năng tiết kiệm thời gian

 CSS giúp khả năng tải trang nhanh chóng

 Dễ dàng khi thực hiện bảo trì

 CSS sở hữu thuộc tính rộng

 Khả năng tương thích tốt

- Nhược điểm của CSS:

 CSS hoạt động khác biệt cho từng trình duyệt

 Khá khó khăn cho người mới

 Định dạng của web có khả năng gặp rủi ro

2.3.JavaScript

Javascript chính là một ngôn ngữ lập trình web rất phổ biến ngày nay.Javascript được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nênsống động hơn Chúng cũng đóng vai trò tương tự như một phần của website, chophép Client-side Script từ người dùng tương tự máy chủ (Nodejs) để tạo ra nhữngwebsite động

Javascript – một ngôn ngữ vô cùng phổ biến trong lĩnh vực lập trình ngày nay

Có thể nói rằng, Javascript hay còn gọi là JS là ngôn ngữ rất thông dụng trong vàinăm gần đây Đã có khá nhiều framework ra đời và được viết bằng loại ngôn ngữnày Từ frontend cho đến backend thì bất cứ nơi nào cũng có sự xuất hiện của JS.Một vài thông tin sau đây sẽ giúp cho bạn hiểu thêm về loại ngôn ngữ đặc biệt này

- Ưu điểm của Javascript:

 Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ vànhanh hơn nhiều so với các ngôn ngữ lập trình khác

 JS còn có thể được gắn trên một số các element hoặc những events củacác trang web

 Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sựtương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng

 Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra nhữnginput thay vì cách kiểm tra thủ công thông qua hoạt động truy xuấtdatabase

 Giao diện của ứng dụng phong phú với nhiều thành phần như Drag andDrop, Slider để cung cấp đến cho người dùng một Rich Interface (giaodiện giàu tính năng)

 Giúp thao tác với người dùng phía Client và tách biệt giữa các Client vớinhau

- Nhược điểm của Javascript:

 JS Code Snippet khá lớn

 JS dễ bị các hacker và scammer khai thác hơn

 JS cũng không có khả năng đa luồng hoặc đa dạng xử lý

 Có thể được dùng để thực thi những mã độc ở trên máy tính của người sửdụng

 Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến

CHƯƠNG III PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNH

Với NavBar là phần header của trang, người dùng có thể quan sát thấy thôngtin tổng quan như: logo, menu chứa các trang con.

Slider chia sẻ thông tin chung về chủ đề và mục đích của trang web, giúpngười xem có cái nhìn khát quát về trang web

Bottum chứa các thông tin như: tổng quan về trang web, thông tin về mônhọc Ứng dụng web, thông tin liên hệ với từng thành viên

1.2.2 Trang About Us

Tương tự với page Home, page About Us cũng có cấu trúc 3 phần Điềukhác biệt ở đây là page About Us là trang chứa thông tin của từng thành viên trongnhóm Là page chứa thông tin chính, cũng như thể hiện nội dung mà trang webmuốn hướng đến

Phần NavBar và Bottum của page không thay đổi so với page Home Vớiphần Silder – body page chứa các thông tin miêu tả tổng quan về từng thành viêntrong nhóm như: họ tên, ngày sinh, mã sinh viên, tính cách cùng 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 sẽ đưa ra các thông tin về công nghệ được sửdụng trong quá trình xây dựng trang web

Để người xem có cái nhìn cụ thể về từng công nghệ, người xem có thể truy cập đếntrang thông tin gốc của từng ngôn ngữ lập trình và tìm hiểu nó thông qua phầnTeck-body trang

1.2.4 Trang Source Code

Trong trường hợp người xem muốn theo dõi những source code chính tạo ratrang web, họ có thể truy cập đến page Source Code

Tại đây, chúng em cung cấp những source code về HTML, CSS chính được

sử dụng trong trang web Ngoài ra còn có source code đầy đủ tại Github

1.2.5 Trang Contact

Trong trường hợp người dùng muốn gửi những nhận xét, đánh giá hay chỉđơn giản liên hệ, họ có thể 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 và công nghệ sử dụng

- Thư viện sử dụng: Font Awesome 5 là một trong những icon font phổ biếnnhất hiện nay, tại thời điểm viết bài 28/10/2020 với phiên bản 5.15.1 hỗ trợtrên 1600 icon miễn phí, rất dễ dàng để tích hợp vào website, công việc củabạn bây giờ là lựa chọn icon và copy paste Font Awesome có bản miễn phí

và bản trả phí, tuy nhiên bạn chỉ cần dùng bản miễn phí là đủ để làm đẹp chowebsite của mình

- 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 quả thu được

- 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

- Còn hơi sơ sài, đơn giản quá so với những web hiện tại trên thị trường

- Chưa có cơ sở dữ liệu

- Hệ thống đáp ứng các thao tác cơ bản

2.2 Hạn chế và giải pháp trong quá trình làm bài

Vì HTML, CSS, Javascript là ngôn ngữ mới được học nên có nhiều bỡ ngỡtrong việc căn chỉnh đúng kích thước và có nhiều lệnh mới nên giải pháp duy nhất

là đọc slide bài giảng của thầy và tìm thêm kiến thức ở trên mạng – Internet.Trong quá trình làm bài, chúng em gặp một chút khó khăn trong việc kết nối

dữ liệu, phân chia bố cục trang web, … Chúng em đã tìm hiểu, lắng nghe những ýkiến, nhận xét của thầy để có thể cải tiến trang web

3 KẾT LUẬN

Sau một thời gian học tập và nghiên cứu, nhóm chúng em đã hoàn thành bàitập đúng hạn Khi làm bài tập lớn, chúng em đã học tập thêm nhiều kiến thức vềnhững ngôn ngữ, những phần mới,… và giúp chúng em cải thiện được những điểmyếu như ngại giao tiếp, kỹ năng làm việc nhóm

Trong quá trình làm, chúng em đã gặp rất nhiều những thắc mắc trong quátrình làm web, cũng như phân trang Tuy nhiên đây là lần đầu tiên chúng em làmweb nên vẫn còn nhiều hạn chế trong thiết kế, sản phẩm vẫn còn một số lỗi nhỏ.Chúng em mong sẽ nhận được những ý kiến đóng góp của các thầy cô vàcác bạn để bài tập lớn của chúng em được hoàn thiện hơn và có thể đi 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ướngdẫn, truyền đạt những kiến thức mới và chỉ bảo nhóm em trong suốt thời gian qua.Chúng em xin chân thành cảm ơn!

4 HƯỚNG PHÁT TRIỂN

Với sự phát triển vượt bậc của công nghệ trong thời đại hiện nay, cơ hội việclàm xứng tầm với bản thân luôn rộng mở với mỗi người Những công việc dànhcho những SE chúng ta không chỉ đòi hỏi những kỹ năng như teamwork, quản trị

dự án, xây dựng dự án, lập trình, … mà còn đòi hỏi những kỹ năng đặc trưng như

kỹ năng giao tiếp, … Việc gây ấn tượng, “ghi điểm” với nhà tuyển dụng là mộtđiều tối quan trọng với từng ứng viên trong quá trình apply vào công việc.Chúng ta có thể phát triển chương trình thành một website tạo CV cho mỗingười phù hợp với mọi ngành nghề, mọi công việc giúp đỡ những ứng viên trongquá trình ứng tuyển vào các công ty

5 SOURCE CODE

5.1 Link source code

https://drive.google.com/drive/folders/1PWpKcTnMqE1m10meo20buYrTHqvxG51t?fbclid=IwAR1b-SKP2JoBZ8bJHJwiaGX-

DJrZzMIdCTD3bxwK8SWhjeRGvoxoq8iLHHA

5.2 Link domain

https://web-cv-phe-team6.000webhostapp.com/index.html