TỔNG QUAN VỀ DOANH NGHIỆP VÀ CƠ SỞ LÝ THUYẾT CỦA FRONT-END
Cơ sở lý thuyết về HTML, CSS và JS và Bootstrap
giao diện thiết bị khác nhau, và một kỹ năng không kém phần quan trọng đó chính là giải quyết vấn đề, làm việc dưới áp lực
The career path for a Frontend Developer typically begins as a Junior Frontend Developer, advancing to roles such as Senior Frontend Developer, Technical Lead, or Manager Additionally, Frontend Developers have the opportunity to transition into Full-stack Developers by acquiring knowledge in both Frontend and Backend technologies.
Trong thời gian thực tập tại Công ty TNHH Công Nghệ XB, tôi đã áp dụng kiến thức về HTML, CSS và JavaScript để thiết kế giao diện đơn giản cho website cứu trợ động vật PawsRescue, đảm bảo tính tương thích trên cả nền tảng web và di động.
1.3 Cơ sở lý thuyết về HTML, CSS và JS và Bootstrap
1.3.1 Ngôn ngữ HTML (HyperText Markup Language)
HTML, hay còn gọi là Ngôn ngữ Đánh dấu Siêu văn bản, là ngôn ngữ chính để xây dựng các trang web Nó được sử dụng để định dạng và cấu trúc nội dung, bao gồm văn bản, hình ảnh, liên kết, bảng, biểu mẫu và các phần tử khác trên trang web.
HTML là ngôn ngữ được sử dụng để phân chia các thành phần như đoạn văn, tiêu đề, liên kết, và blockquotes trong trang web Mỗi trang HTML bao gồm một tập hợp các thẻ (hay còn gọi là elements), mỗi thẻ đảm nhận những chức năng cụ thể, góp phần tạo nên cấu trúc hoàn chỉnh cho trang web.
HTML là ngôn ngữ được sử dụng để xây dựng cấu trúc và bố cục của trang web, hoạt động hiệu quả trên hầu hết các trình duyệt hiện nay Các phiên bản của HTML bao gồm HTML 4.01, XHTML và HTML5, trong đó HTML5 là phiên bản mới nhất với nhiều cải tiến và thêm các thẻ mới vào markup, giúp xác định rõ ràng nội dung thuộc thể loại nào.
Hình 2 Minh họa cho ngôn ngữ HTML
HTML sử dụng các thẻ (tag) để xác định và đánh dấu các phần tử trên trang web Mỗi thẻ được bao quanh bởi cặp dấu gạch nhọn (< >), ví dụ như thẻ mở `
`.
`
` là thẻ đóng của một đoạn văn bản- Cấu trúc: Tài liệu HTML được tổ chức theo cấu trúc cây, trong đó có một thẻ mở
`` và thẻ đóng `` làm vị trí cha cho toàn bộ nội dung trang web Trong
`` , có một cặp thẻ `` và `` để chứa thông tin meta và tên trang web
Phần nội dung của trang web được đặt trong cặp thẻ `` và ``
Hình 3 Minh họa cấu trúc cây của HTML
HTML cung cấp các thẻ cơ bản để xác định và định dạng các phần tử trên trang web, chẳng hạn như thẻ `` dùng để định dạng tiêu đề và thẻ `
` dùng để định dạng đoạn văn bản.
`` định dạng liên kết và `` định dạng hình ảnh
Thuộc tính trong HTML cung cấp thông tin bổ sung và điều khiển hành vi của các phần tử Chẳng hạn, thuộc tính `href` trong thẻ `` được sử dụng để xác định đường dẫn của liên kết.
- Sự kết hợp với CSS và JavaScript: HTML có thể được kết hợp với CSS (Cascading
CSS (Cascading Style Sheets) được sử dụng để định dạng và trang trí các phần tử trên trang web, đồng thời có thể kết hợp với JavaScript để thực hiện các chức năng tương tác và xử lý sự kiện.
1.3.2 Ngôn ngữ CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) là ngôn ngữ đánh dấu quan trọng dùng để định dạng và trình bày các phần tử trên trang web Nó cho phép thiết lập kiểu dáng cho các phần tử HTML như màu sắc, font chữ, kích thước và vị trí Nhờ vào CSS, việc tách biệt nội dung và kiểu dáng của trang web trở nên khả thi, giúp việc bảo trì và quản lý trang web dễ dàng hơn.
Hình 4 Minh họa cho ngôn ngữ CSS
- Một số khái niệm cơ bản về CSS bao gồm:
Lớp (Class): CSS cho phép bạn định nghĩa các lớp và gán chúng cho các phần tử
HTML để áp dụng kiểu dáng chung cho nhiều phần tử
ID: Tương tự như lớp, ID là một định danh duy nhất được gán cho một phần tử
HTML để áp dụng kiểu dáng cụ thể cho phần tử đó
Selector là phương pháp để chọn các phần tử HTML mà bạn muốn áp dụng kiểu dáng Có nhiều loại selector khác nhau như selector phần tử, selector lớp, và selector ID, giúp bạn linh hoạt trong việc định dạng trang web.
Các thuộc tính CSS là những yếu tố quan trọng để xác định kiểu dáng cho các phần tử HTML, bao gồm các thuộc tính như color (màu sắc), font-size (kích thước font chữ), margin (khoảng cách) và nhiều thuộc tính khác.
- Để nhúng CSS vào HTML, có thể sử dụng các phương pháp sau:
Inline CSS: Áp dụng CSS trực tiếp vào phần tử HTML bằng thuộc tính style Internal CSS: Định nghĩa CSS trong thẻ trong phần head của tệp HTML
External CSS: Tạo một tệp CSS riêng biệt và liên kết nó với tệp HTML bằng thẻ
CSS đóng vai trò quan trọng trong việc thiết kế giao diện hấp dẫn và tương tác cho trang web Việc nắm vững kiến thức về CSS sẽ giúp bạn tạo ra các trang web chuyên nghiệp và tùy chỉnh giao diện theo ý muốn.
CSS bao gồm hai phần chính: bộ chọn (selector) và quy tắc (rules) Bộ chọn xác định phần tử HTML mà người dùng muốn áp dụng kiểu CSS, trong khi quy tắc xác định các thuộc tính của phần tử đó Chẳng hạn, `p` là bộ chọn cho phần tử đoạn văn trong HTML, và `color: red` là quy tắc quy định màu chữ đỏ cho đoạn văn.
Hình 5 Minh họa cú pháp CSS
CSS cho phép điều khiển các thuộc tính trình bày của phần tử trên trang web, bao gồm màu sắc, font chữ, kích thước, độ rộng, độ cao, đường viền và nền Nhờ vào CSS, người dùng có thể linh hoạt thay đổi giao diện và trang trí các phần tử, tạo nên sự hấp dẫn cho trang web.
PHÂN TÍCH & THIẾT KẾ WEBSITE CỨU TRỢ ĐỘNG VẬT 12 2.1 Phân tích yêu cầu
Ưu – Nhược điểm
- Tăng cường hiệu quả hoạt động cứu trợ, khuyến khích được nhiều sự tham gia khi có một tổ chức hoặc một cộng đồng cụ thể
- Thu hút những người có quan tâm đến hỗ trợ, cứu giúp và quyên góp quỹ cho vật nuôi trên toàn thế giới
- Nâng cao tuyên truyền ý thức, tạo nền tảng tốt đẹp cho mọi người đối với hệ sinh thái động vật
Quỹ cứu trợ đóng vai trò quan trọng trong việc bảo tồn các loài động vật quý hiếm và cải thiện môi trường sống của chúng, tạo ra không gian sống thích hợp hơn cho các loài động vật.
- Nhiều đối tượng xấu có thể lợi dụng và tiếp cận để nhận nuôi động vật có ý đồ xấu nên phải khảo sát kĩ
- Tuyên truyền thông tin sai lệch có thể dẫn đến hưởng ứng tiêu cực trong cộng đồng
2.1.5 Yêu cầu của giao diện
- Giao diện đơn giản dễ sử dụng, cấu trúc trang web, bố cục, màu sắc và hình ảnh sử dụng phải hài hòa và dễ nhìn
- Thông tin tin tức về thế giới động vật phải chính xác, đáng tin cậy, chuyên nghiệp, thông tin dễ đọc và cung cấp được thông tin cần thiết
- Tương thích với nhiều thiết bị khác.
Tài liệu hệ thống
2.2.1 Userstory: Trong đó các dòng in nghiêng chưa được triển khai trên website
PawsRescue hiện tại chỉ có giao diện người dùng mà chưa có trang Admin Dù vậy, bảng thông tin dưới đây vẫn hiển thị đầy đủ nội dung cần thiết.
14 các Userstory để nếu như có điều kiện hoặc thời gian nghiên cứu em sẽ bổ sung cho website của mình
ID Là một Tôi muốn để Mô tả
1 User Tôi muốn tìm kiếm các động vật có thể nhận nuôi trên trang web, để tìm vật nuôi cho gia đình mình
Thiết kế giao diện cho trang web hiển thị danh sách vật nuôi cần nhận nuôi, bao gồm hình ảnh rõ nét của từng vật nuôi và thông tin liên hệ của tổ chức cho những ai có nhu cầu nhận nuôi.
Đăng ký thông tin về các trường hợp động vật đang gặp nguy hiểm hoặc cần cứu trợ là rất quan trọng để kịp thời hỗ trợ và liên lạc với tổ chức cứu hộ.
Thiết kế giao diện hiển thị địa điểm cụ thể của tổ chức cùng biểu mẫu dễ sử dụng giúp người dùng nhanh chóng điền thông tin liên lạc như tên, email, tiêu đề và nội dung, từ đó hỗ trợ hiệu quả cho công tác cứu trợ.
3 User Tôi quan tâm đến thế giới động vật và muốn lướt hoặc đọc báo tin tức về thế giới động vật, để cập nhật tin tức hằng ngày
Thiết kế giao diện cập nhật và hiển thị tin tức hằng ngày mới nhất cho người dùng Bao gồm hình ảnh, tiêu đề và nội dung cụ thể
4 User Tôi muốn có thể quyên góp quỹ cứu trợ cho động vật trên trang web, để có thể giúp đỡ chăm sóc cho những động vật ấy
Tạo một hệ thống quyên góp quỹ cho phép người dùng dễ dàng đăng ký và thực hiện quyên góp Hệ thống này bao gồm biểu mẫu thu thập thông tin cần thiết và cung cấp các tùy chọn thanh toán an toàn cho người quyên góp.
Người dùng mong muốn có khả năng đăng ký nhận thông tin mới nhất về các động vật cần giúp đỡ hoặc tin tức liên quan, để có thể cập nhật kịp thời và hỗ trợ khi cần thiết.
Tạo tính năng đăng ký nhận thông tin mới nhất từ trang web, cho phép người dùng dễ dàng nhập email để nhận thông tin về các động vật cần giúp đỡ Giao diện thân thiện được bố trí ở cuối trang giúp người dùng thực hiện việc đăng ký một cách nhanh chóng và thuận tiện.
6 User Tôi muốn có khả năng đánh giá và đóng góp ý kiến về trang web, để tôi có thể giúp cải thiện trải nghiệm người dùng
Thiết kế giao diện hiển thị các đánh giá và đóng góp ý kiến của người dùng về trang web Trang web có đầy đủ thông tin để
16 người dùng liên lạc và theo dõi
7 Admin Tôi muốn có thể quản lý các yêu cầu cứu trợ đồng vật để có thể giúp đỡ chúng
Tạo hệ thống quản lý đăng ký cho phép admin xem và quản lý thông tin đăng ký cứu trợ
8 Admin Tôi muốn có khả năng thêm mới các động vật vào trang web, để người muốn nhận nuôi có thể xem thông tin về chúng
Phát triển tính năng cho phép quản trị viên thêm mới động vật vào trang web, bao gồm thông tin như hình ảnh và tên Đảm bảo rằng hồ sơ động vật đầy đủ và chính xác để cung cấp thông tin cần thiết cho những người muốn nhận nuôi.
Tôi muốn có khả năng quản lý các quỹ từ thiện đang được kêu gọi, giúp theo dõi tiến độ quyên góp và xác nhận các khoản quyên góp một cách hiệu quả.
Phát triển tính năng quản lý quyên góp cho phép quản trị viên theo dõi và quản lý các khoản quyên góp một cách hiệu quả Tính năng này bao gồm việc xác nhận các khoản quyên góp và cập nhật tiến độ quyên góp, giúp cải thiện sự minh bạch và quản lý quy trình quyên góp.
Tôi muốn có khả năng quản lý các bài viết trên trang web để đảm bảo tính chính xác và phù hợp với mục đích của trang.
Phát triển tính năng quản lý bài viết cho phép admin theo dõi và điều chỉnh các bài viết trên trang web Tính năng này bao gồm xác nhận và chỉnh sửa nội dung để đảm bảo tính chính xác và phù hợp với mục tiêu của trang web.
Khi người dùng truy cập vào giao diện PawsRescue, họ sẽ trải nghiệm nhiều tương tác khác nhau, từ việc tìm kiếm thông tin về thú cưng, đến việc tham gia các hoạt động quyên góp và nhận nuôi.
ID Tên Usecase Tương tác
1 Tìm kiếm động vật cần nhận nuôi Người dùng xem thông tin động vật về nhận nuôi
2 Đăng ký cứu trợ động vật Người dùng đăng ký thông tin của động vật cần được cứu trợ
3 Đọc tin tức thế giới động vật Người dùng đọc các tin tức được cập nhật trên trang web
4 Quyên góp quỹ cứu trợ động vật Người dùng quyên góp quỹ cứu trợ của mình cho tổ chức
5 Đăng ký nhận thông báo mới nhất Người dùng điền email đăng ký để nhận thông báo mới nhất của website
6 Đánh giá và đóng góp ý kiến website
Người dùng đánh giá và đóng góp ý kiến của mình cho trang website cải thiện hơn
Bảng 1 Tương tác giữa User và Website
2.2.2 Sơ đồ UC diễn tả sự tương tác giữa người dùng là độc giả với trang website PawsRescue
Hình 10 Sơ đồ UC diễn tả sự tương tác giữa người dùng là độc giả với trang website PawsRescue
TRIỂN KHAI THỰC NGHIỆM
Triển khai hệ thống
- Lựa chọn công cụ lập trình: Visual Studio Code
Hình 11 Công cụ lập trình VS Code
Trong dự án của mình, tôi đã sử dụng các ngôn ngữ HTML, CSS và JavaScript, cùng với các thư viện Bootstrap phổ biến để tăng tốc độ và tính dễ dàng trong quá trình phát triển Tất cả thông tin và thư viện Bootstrap được sử dụng đều được trích dẫn rõ ràng trong báo cáo và trong mã nguồn của tôi.
Xây dựng giao diện
Trong quá trình thiết kế giao diện cho hệ thống, tôi đã tham khảo nhiều trang web cứu trợ động vật nổi tiếng như National Geographic, BBC Earth, World Wildlife Fund và The Dodo nhằm tạo ra một bố cục hoàn chỉnh và hấp dẫn cho trang web của mình.
- Giao diện trang “Home”: Trang chủ của PawsRescue
Hình 12 Giao diện trang Home
- Giao diện trang “About”: Trang giới thiệu
Hình 13 Giao diện trang About
- Giao diện trang “Courses”: lý do mà trang web này thành lập, các quỹ hiện đang được tổ chức để quyên góp
Hình 14 Giao diện trang Courses
- Giao diện trang News: cung cấp tin tức và hoạt động đang diễn ra ở thế giới động vật.
Hình 15 Giao diện trang News
- Giao diện trang “Donate”: Trang đóng góp quỹ của mình dành cho các bậc hảo tâm muốn gây quỹ cứu trợ
Hình 16 Giao diện trang Donate
Trang "Adopt" hiển thị những động vật bị bỏ rơi đang tìm kiếm chủ nhân mới Những cá nhân quan tâm có thể liên hệ để nhận nuôi những thú cưng cần được yêu thương và chăm sóc.
Hình 17 Giao diện trang “Adopt”
Trang "Testimonial" của PawsRescue giới thiệu những cá nhân và đại diện từ các tổ chức đã tham gia gây quỹ hoặc có sự quan tâm đến trang web Họ chia sẻ những cảm nhận và ý kiến tích cực về những hoạt động và sứ mệnh của PawsRescue, góp phần nâng cao uy tín và thu hút sự quan tâm từ cộng đồng.
Hình 18 Giao diện trang Testimonial
- Giao diện Responsive một vài thiết bị: