Xây dựng giao diện website cứu trợ động vật pawsrescue

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ên Đề Tài: Xây Dựng Giao Diện Website Cứu Trợ Động Vật PawsRescue Đơn vị thực tập : Công ty TNHH Công Nghệ XB Giảng viên hướng dẫn : TS.Nguyễn Thị Uyên Nhi LỜI CẢM ƠN Đầu tiên, em xin gửi lời cảm ơn chân thành đến quý thầy cô khoa Thống Kê – Tin học trường Đại Học Kinh Tế - Đại Học Đà Nẵng, đặc biệt cô Nguyễn Thị Uyên Nhi lắng nghe, tận tình dẫn sinh viên trình hồn thiện báo cáo thực tập Sự giúp đỡ cô với thông tin quý giá, ý kiến đóng góp lời khun hữu ích góp phần quan trọng trình nghiên cứu viết báo cáo em Và em xin gửi lời cảm ơn Công ty Công Nghệ XB tạo điều kiện hướng dẫn nhiệt tình, chia sẻ kiến thức kinh nghiệm quý báu giúp em có mơi trường thực tập thú vị, học hỏi nhiều kiến thức mẻ để hồn thành nhiệm vụ cách tốt Vì quỹ thời gian thực tập ngưỡng kiến thức hạn hẹp nên khơng thể tránh khỏi sai sót xảy ra, em mong thầy/cơ thơng cảm bỏ qua cho em Đồng thời, em hi vọng nhận đóng góp ý kiến, đánh chỉnh sửa thầy để em rút kinh nghiệm hoàn thiện nhiều cho báo cáo sau Em cảm ơn! LỜI CAM ĐOAN Em xin cam đoan cơng trình nghiên cứu riêng mình, hướng dẫn cô Nguyễn Thị Uyên Nhi trình thực tập cơng ty Cơng Nghệ XB, tất thông tin, ý kiến tài liệu tham khảo trích dẫn trình bày cách xác trung thực Em tuân thủ quy tắc trích dẫn trích nguồn từ nguồn tài liệu sử dụng Nếu phát có gian lận, chép khơng hợp lệ, vi phạm, em xin chịu hoàn toàn trách nhiệm MỤC LỤC LỜI CẢM ƠN i LỜI CAM ĐOAN ii MỤC LỤC iii DANH MỤC HÌNH ẢNH iv DANH MỤC BẢNG BIỂU v DANH MỤC CÁC TỪ VIẾT TẮT vi LỜI MỞ ĐẦU CHƯƠNG 1: TỔNG QUAN VỀ DOANH NGHIỆP VÀ CƠ SỞ LÝ THUYẾT CỦA FRONT-END 1.1 Giới thiệu tổng quát doanh nghiệp thực tập 1.2 Tởng quan vị trí việc làm 1.3 Cơ sở lý thuyết HTML, CSS JS Bootstrap 1.3.1 Ngôn ngữ HTML (HyperText Markup Language) 1.3.2 Ngôn ngữ CSS (Cascading Style Sheets) 1.3.3 Ngôn ngữ JS (JavaScript) 1.3.4 Thư viện Bootstrap 10 CHƯƠNG 2: 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 12 2.1.1 Phân tích trạng 12 2.1.2 Mục tiêu dự án 12 2.1.3 Xác định yêu cầu HTTT: 12 2.1.4 Ưu – Nhược điểm 13 2.2 Tài liệu hệ thống 13 CHƯƠNG 3: TRIỂN KHAI THỰC NGHIỆM 19 3.1 Triển khai hệ thống 19 3.2 Xây dựng giao diện 19 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 25 4.1 Trong tập vừa qua em đạt được: 25 4.2 Trong tập vừa qua có hạn chế: 25 4.3 Hướng phát triển 25 TÀI LIỆU THAM KHẢO 26 DANH MỤC HÌNH ẢNH Hình Minh họa cho đề tài Hình Minh họa cho ngôn ngữ HTML Hình Minh họa cấu trúc HTML Hình Minh họa cho ngơn ngữ CSS Hình Minh họa cú pháp CSS Hình Minh họa cho Responsive Hình Minh họa cho JS Hình Các frameworks phở biến 10 Hình Minh họa cho Bootstrap 10 Hình 10 Sơ đồ UC diễn tả tương tác người dùng độc giả với trang website PawsRescue ……… 18 Hình 11 Cơng cụ lập trình VS Code 19 Hình 12 Giao diện trang Home 20 Hình 13 Giao diện trang About 20 Hình 14 Giao diện trang Courses 21 Hình 15 Giao diện trang News 21 Hình 16 Giao diện trang Donate 22 Hình 17 Giao diện trang “Adopt” 22 Hình 18 Giao diện trang Testimonial 23 Hình 19 Responsive 23 Hình 20 Responsive 2- Ipad Mini 24 DANH MỤC BẢNG BIỂU Bảng Tương tác User Website 18 DANH MỤC CÁC TỪ VIẾT TẮT HTML Hypertext Markup Language AJAX Asynchronous JavaScript and XML DOM Document Object Model CSS Cascading Style Sheets JS JavaScript FE Front End UC Use Case LỜI MỞ ĐẦU Mục tiêu đề tài - Lý đề tài lựa chọn để góp phần giải vấn đề xã hội, dự án nhằm nâng cao ý thức cho cộng đồng việc cứu trợ/ chăm sóc cho động vật bị bỏ rơi, đồng thời kêu gọi giúp đỡ từ nhà hảo tâm, website thuận tiện cho việc cứu trợ, gây quỹ, tìm kiếm người nhận nuôi cho động vật bị bỏ rơi có mái ấm hạnh phúc - Ngồi mục tiêu đề tài giúp tạo tảng hiệu quả, tiếp cận đến lượng lớn người dùng nguồn lực, việc xây dựng trang website cứu trợ động vật tảng giao tiếp người quan tâm đến động vật quan tâm đến tổ chức PawsRescue Mở rộng quy mô, tăng khả cứu trợ động vật Bên cạnh cịn giúp người dễ dàng trao đởi, tìm hiểu thơng tin, đăng tin cứu trợ cho động vật cần trợ giúp Hình Minh họa cho đề tàiError! Reference source not found - Tóm lại, đề tài "Xây dựng giao diện cho website cứu trợ động vật PawsRescue" lựa chọn nhằm đóng góp vào việc giải vấn đề xã hội, tạo tảng giao tiếp hiệu quả, phát triển tổ chức cứu trợ, nâng cao kỹ cá nhân việc thiết kế giao diện website Đối tượng phạm vi nghiên cứu - Đối tượng nghiên cứu:  Người dùng trực tiếp: Tập trung vào người sử dụng website cứu trợ động vật PawsRescue, bao gồm người quan tâm đến thông tin giới động vật việc cứu trợ, ủng hộ cho quỹ hỗ trợ, quan tâm đến chăm sóc động vật bị bỏ rơi tìm kiếm nguồn nhận ni động vật - Phạm vi nghiên cứu:  Ngôn ngữ HTML  Ngôn ngữ CSS  Ngôn ngữ JavaScript Kết cấu đề tài Đề tài tổ chức gồm phần mở đầu, chương nội dung phần kết luận - Lời mở đầu - Chương 1: TỔNG QUAN VỀ DOANH NGHIỆP VÀ CƠ SỞ LÝ THUYẾT CỦA FRONT-END - Chương 2: PHÂN TÍCH & THIẾT KẾ WEBSITE CỨU TRỢ ĐỘNG VẬT - Chương 3: TRIỂN KHAI THỰC NGHIỆM - Chương 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN CHƯƠNG 2: PHÂN TÍCH & THIẾT KẾ WEBSITE CỨU TRỢ ĐỘNG VẬT 2.1 Phân tích yêu cầu 2.1.1 Phân tích trạng - Hiện động vật toàn giới gặp nhiều thách thức hàng nghìn lồi hoang dã đối mặt nguy tuyệt diệt: môi trường sống người xâm lấn phá rừng, biến đởi khí hậu, làm sinh thái suy giảm số lượng Ngồi nạn bn bán động vật hoang dã- q lợi ích cá nhân, với nhiễm mơi trường ảnh hưởng nhiều đến cấu trúc sinh học, chu kỳ sống động vật - Tình trạng động vật giới bị đe dọa, hành động cấp bách cần thiết, bao gồm việc áp dụng biện pháp bảo tồn mơi trường, kiểm sốt buôn bán trái phép xây dựng nỗ lực tồn cầu để giữ gìn đa dạng sinh học tồn lồi Bên cạnh đó, việc xây dựng website cứu trợ động vật vừa phương tiện để truyền thông, nâng cao nhận thức cho người, vừa nơi để kết nối & hỗ trợ, giúp đỡ cho động vật có mơi trường sống tốt 2.1.2 Mục tiêu dự án - Website cứu trợ động vật diễn đàn giúp tăng cường hiệu hoạt động cứu trợ, giải vấn đề xã hội, thu hẹp khoảng cách giúp cho người dễ dàng quyên góp, giúp đỡ nhận nuôi động vật bị bỏ rơi, xây dựng cộng đồng cứu trợ, cập nhật tin tức động vật ngày 2.1.3 Xác định yêu cầu HTTT: - Xây dựng trang web thu hút nhiều nhà hảo tâm, người có quan tâm đến hoạt động cứu trợ - Page cung cấp thông tin cần thiết website cứu trợ như: địa liên hệ, hoạt động gây quỹ, kiện – tin tức diễn ra, đầy đủ thơng tin khác - Page có giao diện đơn giản dễ dàng xem sử dụng với nhiều đối tượng 12 2.1.4 Ưu – Nhược điểm  Ưu điểm: - Tăng cường hiệu hoạt động cứu trợ, khuyến khích nhiều tham gia có tở chức cộng đồng cụ thể - Thu hút người có quan tâm đến hỗ trợ, cứu giúp qun góp quỹ cho vật ni tồn giới - Nâng cao tuyên truyền ý thức, tạo tảng tốt đẹp cho người hệ sinh thái động vật - Góp phần nhiều việc bảo tồn lồi động vật q hiếm, mơi trường sống, khơng gian sống thích hợp cho động vật tiền quỹ cứu trợ triển khai cải thiện điều  Nhược điểm: - Nhiều đối tượng xấu lợi dụng tiếp cận để nhận ni động vật có ý đồ xấu nên phải khảo sát kĩ - Tun truyền thơng tin sai lệch dẫn đến hưởng ứng tiêu cực cộng đồng 2.1.5 Yêu cầu 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 hình ảnh sử dụng phải hài hịa dễ nhìn - Thơng tin tin tức giới động vật phải xác, đáng tin cậy, chuyên nghiệp, thông tin dễ đọc cung cấp thông tin cần thiết - Tương thích với nhiều thiết bị khác 2.2 Tài liệu hệ thống 2.2.1 Userstory: Trong dòng in nghiêng chưa triển khai website PawsRescue, website có giao diện người dùng nhìn vào (tương tác) với trang website (chưa có trang Admin), nhiên bảng hiển thị đủ 13 Userstory để có điều kiện thời gian nghiên cứu em bổ sung cho website ID Là User Tơi muốn để Mơ tả Tơi muốn tìm kiếm động vật có Thiết kế giao diện thể nhận ni trang web, để tìm hiển thị danh sách vật vật ni cho gia đình ni cần nhận ni trang web Hiển thị hình ảnh vật ni để lại thông tin để liên lạc tổ chức cho có nhu cầu User Tơi muốn đăng ký thông tin Thiết kế giao diện trường hợp động vật gặp hiển thị địa điểm cụ nguy hiểm cần cứu trợ, để thể tở chức, biểu kịp thời cứu giúp liên lạc mẫu để người dùng với tổ chức điền thông tin liên lạc (tên, email, tiêu đề, nội dung) dễ dàng công tác cứu trợ User Tôi quan tâm đến giới động vật Thiết kế giao diện cập muốn lướt đọc báo tin tức nhật hiển thị tin giới động vật, để cập nhật tin tức tức cho người dùng Bao gồm hình ảnh, tiêu đề nội dung cụ thể 14 User Tôi muốn quyên góp quỹ cứu Tạo hệ thống quyên trợ cho động vật trang web, để góp quỹ cho phép giúp đỡ chăm sóc cho người dùng đăng ký động vật quyên góp quỹ Bao gồm biểu mẫu để thu thập thông tin tùy chọn tốn an tồn cho người qun góp User Tơi muốn có khả đăng ký nhận Tạo tính đăng thơng tin động vật ký nhận thông tin cần giúp đỡ tin tức mới, để trang web cập nhật thơng tin hỗ trợ cho phép người dùng cần thiết đăng ký nhận thông tin động vật cần giúp đỡ thông qua việc người dùng nhập vào email Cung cấp giao diện thân thiện để đăng ký dễ dàng ở cuối trang User Tôi muốn có khả đánh giá Thiết kế giao diện đóng góp ý kiến trang web, để tơi hiển thị đánh giá giúp cải thiện trải nghiệm đóng góp ý kiến người dùng người dùng trang web Trang web có đầy đủ thơng tin để 15 người dùng liên lạc theo dõi Admin Tơi muốn quản lý u cầu Tạo hệ thống quản lý cứu trợ đồng vật để giúp đỡ đăng ký cho phép chúng admin xem quản lý thông tin đăng ký cứu trợ Admin Tơi muốn có khả thêm Phát triển tính động vật vào trang web, để người cho phép admin thêm muốn nhận ni xem thông tin động vật vào chúng trang web, bao gồm thơng tin hình ảnh, tên, Đảm bảo hồ sơ động vật đầy đủ xác để cung cấp thơng tin cần thiết cho người muốn nhận nuôi Admin Tôi muốn có khả quản lý Phát triển tính quỹ từ thiện kêu gọi, để có quản lý quyên góp cho thể theo dõi tiến độ quyên góp xác phép admin xem nhận khoản quyên góp quản lý quyên góp Bao gồm tính xác nhận khoản qun góp cập nhật tiến độ qun góp 16 10 Admin Tơi muốn có khả quản lý Phát triển tính viết trang web, để quản lý viết cho đảm bảo tính xác phù hợp phép admin xem với mục đích trang web quản lý viết trang web Bao gồm tính xác nhận chỉnh sửa viết để đảm bảo tính xác phù hợp với mục đích trang web - Cụ thể hơn, đơn giản góc nhìn (tương tác) người dùng vào trang giao diện PawsResuce, có tương tác sau: ID Tên Usecase Tương tác Tìm kiếm động vật cần nhận ni Người dùng xem thông tin động vật nhận nuôi Đăng ký cứu trợ động vật Người dùng đăng ký thông tin động vật cần cứu trợ Đọc tin tức giới động vật Người dùng đọc tin tức cập nhật trang web Quyên góp quỹ cứu trợ động vật Người dùng qun góp quỹ cứu trợ cho tở chức 17 Đăng ký nhận thông báo Người dùng điền email đăng ký để nhận thông báo website Đánh giá đóng góp ý kiến Người dùng đánh giá đóng góp ý website kiến cho trang website cải thiện Bảng Tương tác User Website 2.2.2 Sơ đồ UC diễn tả tương tác người dùng độc giả với trang website PawsRescue Hình 10 Sơ đồ UC diễn tả tương tác người dùng độc giả với trang website PawsRescue 18 CHƯƠNG 3: TRIỂN KHAI THỰC NGHIỆM 3.1 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 - Ngơn ngữ thư viện sử dụng: HTML, CSS, JS, thư viện Bootstrap phở biến Trong dự án em sử dụng thư viện Bootstrap JS CSS số tác giả để hỗ trợ cho dự án thực nhanh chóng dễ dàng Tồn thơng tin thư viện Bootstrap sử dụng trích dẫn báo cáo code 3.2 Xây dựng giao diện - Trong trình triển khai giao diện hệ thống em tham khảo nhiều trang web cứu trợ động vật khác như: National Geographic, BBC Earth, World Wildlife Fund, The Dodo, để lên bố cục cho trang web hồn chỉnh 19 - Giao diện trang “Home”: Trang chủ 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 20 - Giao diện trang “Courses”: lý mà trang web thành lập, quỹ 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 hoạt động diễn ở giới động vật Hình 15 Giao diện trang News 21 - Giao diện trang “Donate”: Trang đóng góp quỹ dành cho bậc hảo tâm muốn gây quỹ cứu trợ Hình 16 Giao diện trang Donate - Giao diện trang “Adopt”: Những động vật bị bỏ rơi cần tìm chủ nhân mới, hiển thị ở đây, cá nhân quan tâm liên hệ để nhận ni Hình 17 Giao diện trang “Adopt” 22 - Giao diện trang “Testimonial”: Những cá nhân, đại diện cho tổ chức tham gia gây quỹ, có quan tâm đến trang web họ nói PawsRescue ? Hình 18 Giao diện trang Testimonial - Giao diện Responsive vài thiết bị: Hình 19 Responsive 23 Hình 20 Responsive 2- Ipad Mini 24 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Trong tập vừa qua em đạt được: - Trong tập vừa qua, giúp đỡ cô Nguyễn Thị Uyên Nhi, hội thực tập trải nghiệm ở Công ty TNHH Công Nghệ XB, em học hỏi nhiều kiến thức HTML, CSS, JS thư viện phở biến, giúp có thêm nhiều kiến thức dễ dàng định hướng tương lai - Ngồi dựa vào kiến thức học giúp đỡ hỗ trợ mentor cơng ty, em hồn thành dự án “Xây dựng giao diện website cứu trợ động vật PawsRescue” với bố cục mà trang website cứu trợ động vật yêu cầu, học thêm nhiều kỹ khác giao tiếp, viết báo cáo, lập trình bản, rèn luyện học tập mơi trường thực tế… 4.2 Trong tập vừa qua có hạn chế: - Vì quỹ thời gian thực tập ngắn ngủi, thân em có hạn chế thiếu sót cần phải học hỏi thêm nhiều, có nhiều thời gian em hi vọng triển khai ReactJs NodeJs để trang web tối ưu hóa chun nghiệp 4.3 Hướng phát triển - Trong tương lai, em tiếp tục phát triển dự án PawsRescue để trang web trở nên chuyên nghiệp, hiệu tối ưu - Học tập bổ sung thêm thiếu sót tập, vững bước theo đường Front-End Developer học thêm chuyển hướng sang thiết kế giao diện UX/UI thân có đam mê 25 TÀI LIỆU THAM KHẢO https://www.w3schools.com http://daneden.me/animate - Copyright (c) 2017 Daniel Eden http://gsgd.co.uk/sandbox/jquery/easing/ - Copyright © 2008 George McGinley Smith Owl Carousel v2.2.1 - Copyright 2013-2017 David Deutsch http://pixelcog.github.io/parallax.js/ - @copyright 2016 PixelCog, Inc https://wowjs.uk - Copyright (c) 2016 Thomas Grainger Waypoints - © 2011-2016 Caleb Troughton Bootstrap v5.0.0 (https://getbootstrap.com/) - Copyright 2011-2021 The Bootstrap Authors Mozilla Developer Network - https://developer.mozilla.org/ 26