BÁO cáo CHUYÊN đề học PHẦN cơ sở lập TRÌNH WEB đề TÀI xây DỰNG GIAO DIỆN WEBSITE bán cây CẢNH

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN CƠ SỞ LẬP TRÌNH WEB ĐỀ TÀI: XÂY DỰNG GIAO DIỆN WEBSITE BÁN CÂY CẢNH Sinh viên thực : HOÀNG THANH TÙNG Giảng viên hướng dẫn : PHƯƠNG VĂN CẢNH Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D14CNPM7 Khóa : 2019- 2024 Hà Nội, tháng năm 2020 PHIẾU CHẤM ĐIỂM STT Mã Sinh Viên 19810310531 Họ tên sinh viên Nhiệm vụ Hoàng Thanh Tùng Tạo giao diện trang ứng dụng Điểm GIẢNG VIÊN CHẤM ĐIỂM Họ tên Giảng Viên Giảng Viên Nhận Xét Chữ Ký LỜI CẢM ƠN Ngày nay, việc ứng dụng công nghệ thông tin trở nên phổ biến rộng rãi lĩnh vực tồn cầu Cơng nghệ thơng tin nhịp cầu cho phát triển tiên tiến để đất nước ngày vươn cao, xa để sánh ngang với cường quốc năm châu Đây bước ngoặt lớn phát triển để Đất Nước tiến lên công nghiệp hóa, đại hóa Trong vài năm trở lại đây, ngày công nghệ thông tin phát triển vũ bão Nó giúp ích nhiều đời sống xã hội Vì để bắt kịp nhịp độ đó, với kiến thức chúng em học giảng đường nghiên cứu, tìm tịi từ bạn bè thầy cô Em hiểu tầm quan trọng Chính vậy, em xin gửi tới thầy cô khoa công nghệ thông tin Trường Đại học Điện Lực nói chung đặc biệt giảng viên Phương Văn Cảnh nói riêng hết lịng giảng dạy kiến thức cho chúng em để chúng em trang bị đầy đủ kiến thức Tận tình dạy hướng dẫn chúng em suốt trình học tập vừa qua Chúng em xin chân thành cảm ơn quý thầy (cô) giáo! Giảng viên hướng dẫn: Nguyễn Quang Trung LỜI MỞ ĐẦU Hiện nay, ứng dụng công nghệ thơng tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức công ty Cùng với phát triển không ngừng kĩ thuật máy tính mạng điện tử, cơng nghệ thơng tin cơng nghệ có đẳng cấp cao chinh phục hết đỉnh cao đến đỉnh cao khác Mạng Internet sản phẩm có giá trị lớn lao ngày trở thành công cụ thiếu, tảng cho truyền tải, trao đổi thơng tin tồn cầu thời đại 4.0 Bằng việc sử dụng Internet, việc ngồi nhà chọn thân thích, giúp tiết kiện khoản lớn chi phí thời gian Chính điều làm thúc đẩy phát triển thương mại điện tử, làm biến đổi đáng kể mặt văn hóa, nâng cao chất lượng đời sống người Với mong muốn đó, chúng em xin thực đề tài “XÂY DỰNG GIAO DIỆN WEBSITE TIN TỨC BÁO MỚI” nhằm phục vụ cho nhu cầu cập nhật tin tức người, giúp tất có nhìn tổng quát giới loài diễn xung quanh Giảng viên hướng dẫn: Nguyễn Quang Trung CHƯƠNG 1: CƠ SỞ LÝ THUYẾT VÀ TỔNG QUAN VỀ ĐỀ TÀI Cơ Sở Lý Thuyết 1.1 Website gì? - Website tập hợp trang thơng tin có chứa nội dung dạng văn bản, chữ số, âm thanh, hình ảnh, video v v… lưu trữ máy chủ (web server) truy cập từ xa thơng qua mạng Internet Nói cách khác website gọi trang web, trang mạng tập hợp trang web thường nằm miền miền phụ Word Wide Web internet Website thường xây dựng từ tập tin HTML (web tĩnh) Website xây dựng nhiều ngơn ngữ lập trình khác - Các bước để thiết kế website:  Thu thập thông tin  Lập kế hoạch  Thiết kế  Phát triển website  Kiểm tra chỉnh sửa 1.2 Web Tĩnh Website tĩnh là trang web sử dụng hồn tồn ngơn ngữ HTML, sau tải trang HTML từ máy chủ xuống, trình duyệt biên dịch mã hiển thị nội dung trang web, người dùng tương tác với trang web Web tĩnh sử dụng đoạn mã html, hình ảnh, video, css, javascript web tĩnh khơng có kịch cho trước (Khơng có hệ quản trị sở dư liệu) Giảng viên hướng dẫn: Nguyễn Quang Trung Web tĩnh có nhược điểm sau:  Khó thay đổi giao diện cách đồng  Khơng có khả tương tác web 1.3 Tổng quan HTML - HTML (Hyper Text Markup Language) ngôn ngữ đánh dấu siêu văn dùng để tạo trang web - Định nghĩa cấu trúc trang web - Tạo siêu liên kết tới trang web khác - Sử dụng thẻ để đánh dấu văn giúp cho trình duyệt xác định cách biểu diễn trang web tới người sử dụng - Cấu trúc bản: - Trong đó: + có ý nghĩa bắt đầu tài liệu html có nghĩa kết thúc tài liệu html + có ý nghĩa bắt đầu phần Heading kết thúc phần Heading + bắt đầu phần thân trang web phần chứa nội dung trang web Giảng viên hướng dẫn: Nguyễn Quang Trung - Các thẻ HTML: thành phần quan trọng trang web Mỗi thẻ có chức riêng, nhiệm vụ riêng - Cấu trúc thẻ: - Ngoài cịn số thẻ khơng có thẻ đóng Ví dụ thẻ , , , … 1.4 Tổng quan vể CSS - CSS viết tắt cụm từ “Cascading Style Sheet’’, ngơn ngữ quy định cách trình bày thẻ html trang web CSS giúp cho trang web trở lên đẹp sinh động tuỳ chỉnh định dạng, màu sắc cho nội dung trang web - - Cấu trúc CSS Đối tượng thẻ, lớp thẻ Mỗi thẻ có thuộc tính khác giác trị biểu diễn nhiều dạng khác như: p, a, i, … - CSS quy định cách hiển thị nội dung thẻ HTML trình duyệt với phần giống cách quy định thuộc tính cho thẻ html Nó tìm dựa vào vùng chọn vùng chọn áp dụng thuộc tính cần thay đổi vùng chọn - Cách chèn CSS vào HTML:  Cách 1: Chèn trực tiếp mã css vào thẻ html Giảng viên hướng dẫn: Nguyễn Quang Trung  Cách 2: Tham chiếu tới tập tin HTML link 1.5 JavaScript JavaScript (viết tắt "js") ngôn ngữ lập trình mang đầy đủ tính năng của một ngơn ngữ lập trình động mà áp dụng vào tài liệu HTML, nó có thể đem lại khả tương tác động trang web - JavaScript ngôn ngữ giúp gia thêm khả tương tác cho website Ví dụ ấn vào button đăng ký hiển thị hộp thoại thông báo bạn đăng ký thành công không đăng ký thành công - JavaScript ngơn ngữ lập trình mang đầy đủ tính ngơn ngữ lập trình động mà áp dụng vào tài liệu html, đem lại khả tương tác động trang web - Cách chèn JavaScript vào HTML:  Cách 1: Chèn trưc tiếp vào html Ví dụ: câu lệnh  Cách 2: Nhúng đường link Ví dụ: < script src = “ten_file.js” > Giảng viên hướng dẫn: Nguyễn Quang Trung Tổng quan đề tài 2.1 Lí chọn đề tài: Hiện nay, công nghệ thông tin xem ngành mũi nhọn quốc gia, đặc biệt quốc gia phát triển, tiến hành công nghiệp hóa đại hố nước ta Sự bùng nổ thông tin phát triển mạnh mẽ công nghệ kỹ thuật số, yêu cầu muốn phát triển phải tin học hố tất ngành, lĩnh vực Thật khó tìm khơng có smartphone, ngơi nhà khơng máy tính để bàn hay laptop Với phương tiện đó, người mua cập nhật sản phẩm cách nhanh chóng Nắm bắt nhu cầu thiết yếu, nhiều công ty, doanh nghiệp mạnh dạn đầu tư vào làm trang web bán hàng, cập nhật thông tin đa chiều đến cho người Với vốn kiến thức học qua môn “Cơ sở lập trình web”, chúng em xin chọn đề tài: “Xây Dựng WebSite Bán Cây Cảnh” để giúp tất người mua cập nhật thông tin giống loại cây, mang đến nhìn tổng quan cho khách hàng 2.2 Mục tiêu: Xây dựng chức website bán hàng Website có khả tự tương thích, hiển thị tất thiết bị nâng cấp tương lai Website hiển thị cách sinh động, đẹp mắt không phức tạp, màu mè tất người sử dụng Hỗ trợ khách hàng cách nhanh nhận yêu cầu liên hệ từ khách hàng Quản lý thông tin sản phẩm, cấu hình website Nắm bắt cơng nghệ thiết kế web ngôn ngữ như: ngôn ngữ đánh dấu siêu văn HTML, CSS, JAVASCRIPT giúp cho website sinh động thú vị Giảng viên hướng dẫn: Nguyễn Quang Trung 2.3 Yêu cầu trang Web - Hình thức thơng tin đa dạng sống động - Giao diện thân thiện, dễ nhìn, an toàn liệu - Cung cấp sản phẩm phát triển hoạt động 24/24 - Thông tin cập nhật sửa đổi thường xun 2.4 Mơ tả tốn - Website giúp cho người đọc sử dụng cách thuận tiện nhất, đồng thời chủ web cập nhật sản phẩm lên website, lưu thông tin sản phẩm đồng thời kiểm tra, chỉnh sửa viết - Website gồm nhiều trang, trang có chủ đề chức riêng Mỗi chủ đề phải có đường dẫn đến trang, có tên chủ đề nội dung trang Trang chủ tóm tắt nội dung tồn website bao gồm danh mục sản phẩm: cảnh, chậu cảnh, phụ kiện … - Mỗi chủ đề phải khác phân biệt với chủ đề khác Mỗi chủ đề có giao diện riêng biệt cho chủ đề phù hợp với chủ đề - Đối với người truy cập Website với tư cách User trải nghiệm tính trang web chọn lọc thơng tin quan tâm, đăng ký nhận thơng báo đến máy tính bạn trang web có tin tức mới, hay đăng ký người dùng thân thiện trang web - Đến với trang web bạn trải nghiệm trang web bán hàng đơn giản nhất, dễ dùng với tiêu chuẩn riêng biệt Chúng hân hạnh đồng hành bạn đường chinh phục tin tức nóng hổi Tất tạo nên cộng đồng người chơi cảnh Việt Nam vững mạnh tin tức nhanh 24h qua trang web chúng tôi: WEBSITE VƯỜN CÂY HÀ NỘI! Giảng viên hướng dẫn: Nguyễn Quang Trung CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG Yêu cầu chi tiết Website Hiển thị danh mục thông tin sản phẩm thiết kế để lên trang web Hiển thị thông tin chi tiết sản phẩm, sản phẩm thuộc nhóm 1.1 Đối với người truy cập Website với chức user - Cho phép đăng nhập, đăng kí thành viên - Cho phép xem thơng tin chi tiết sản phẩm - Cho phép tìm kiếm thơng tin, theo tên sản phẩm, cụm từ “khóa” - Thực chức user 1.2 Đối với người quản trị - Là người điều hành, quản lý theo dõi hoạt động trang web - Quản lí user - Cập nhật thông tin - Kiểm tra chỉnh sửa lại thông tin - Cập nhật loại tin tức lên trang website để người dùng cập nhật nhanh Các nhóm chức năng: Hệ thống Website: bao gồm trang:  Trang Chủ: Bao Quát  Danh Mục Cây Cảnh  Danh Mục Chậu Cảnh  Danh Mục Phụ Kiện  Dịch Vụ  Hỗ Trợ  Liên Hệ Chức hệ thống chia làm nhóm chức sau: Giảng viên hướng dẫn: Nguyễn Quang Trung + Người quản trị (Admin): Chỉ có Admin có quyền truy cập vào chức (Thêm, sửa, xóa, xem viết, xem thành viên, quản lý thông tin người dùng, tài khoản người dùng, quản lý danh mục viết) + Nhóm thành viên Website (User): Dành cho User đăng nhập vào xem tin tức báo theo nhiều lĩnh vực, cảm nhận người dùng sản phẩm, đánh giá chất lượng sản phẩm, đăng ký đăng nhập tài khoản thành viên có Xác định thực thể: - Dựa mô tả tốn, ta xác định thực thể hệ thống bán hàng sau: + Người quản lí: Là người điều hành, quản lí theo dõi hoạt động hệ thống quản lý người dùng hệ thống nhằm cho hệ thống hoạt động cách trơn chu linh hoạt linh hoạt + Thành viên: Bao gồm người quản lí, người dùng đăng kí Sau đăng nhập để trở thành thành viên, chức chung người sử dụng, cịn có số chức khác phục vụ cho công việc cụ thể đối tượng + Người dùng: người tương tác trực tiếp với hệ thống, đăng ký làm thành viên hệ thống để nhận ưu đãi đặc biệt Xác định Use Case: - Thực thể Khách hàng có Use Case sau:  Đăng kí làm thành viên  Thực việc xem thơng tin sản phẩm  Tìm kiếm thơng tin sản phẩm theo danh mục, chủ đề cho  Chọn thông tin sản phẩm cần xem  Đánh giá trải nghiệm người dùng hệ thống - Thực thể Người quản lí có Use Case sau:  Tiếp nhận thơng tin đăng kí thành viên từ người dùng  Tiếp nhận sản phẩm đăng lên Website Giảng viên hướng dẫn: Nguyễn Quang Trung 10  Quản lí danh sách thành viên  Quản lí danh mục sản phẩm  Bảo hành lại hệ thống website Xanh Hà Nội  Đăng thông tin chi tiết sản phẩm lên Website  Kiểm tra hoạt động thành viên  Cập nhật lại thông tin sản phẩm thành viên hệ thống  Phản hồi lại ý kiến User - Ngoài ra, thành viên website báo bao gồm Người quản lí Thành viên đăng kí cịn có Use Case sau:  Đăng nhập  Xem thông tin cá nhân  Sửa đổi thông tin cá nhân Giảng viên hướng dẫn: Nguyễn Quang Trung 11 CHƯƠNG 3: CÀI ĐẶT GIAO DIỆN HỆ THỐNG Cấu trúc trang web Các trang web tạo nên từ bố cục trang web: Nội dung (body) trang web bao bọc thẻ container: Nội dung (body) trang web cấu tạo chung thẻ khác nhau: Giảng viên hướng dẫn: Nguyễn Quang Trung 12 Giao diện - Giao diện trang chủ: Vườn Cây Hà Nội - Giao diện trang Cây Cảnh: - Giao diện trang Hỗ Trợ: Giảng viên hướng dẫn: Nguyễn Quang Trung 13 - Danh Mục: Giao diện Dịch Vụ: Giảng viên hướng dẫn: Nguyễn Quang Trung 14 Giao diện Footer: KẾT LUẬN Qua việc thực nghiên cứu đề tài “XÂY DỰNG TRANG WEB THIẾT KẾ GIAO DIỆN BÁN CÂY CẢNH” Em học hỏi nhiều kĩ hay từ môn Cơ Sở Lập Trình Web Bên cạnh đó, việc làm nghiên cứu giúp em trau dồi kiến thức, nâng cao khả làm việc Trong trình thực đề tài có nhiều ý tưởng hay, độc đáo Nhưng kiến thức em hạn hẹp thời gian không cho phép nên em chưa thể thực ý tưởng Mặc dù em cố gắng để xây dựng chương trình hồn chỉnh nhất, đẹp trình xây dựng chương trình em khó tránh khỏi thiếu Giảng viên hướng dẫn: Nguyễn Quang Trung 15 sót Vì em mong thầy đóng góp ý kiến để em hồn thành web bán hàng cách hồn chỉnh chỉnh chu Em xin chân thành gửi lời cảm ơn tới thầy Nguyễn Quang Trung, người tận tình giảng dạy em mơn Cơ Sở Lập Trình Web, giúp đỡ em trình nghiên cứu đề tài Chia sẻ kiến thức hay, tài liệu bổ ích, tài liệu thú vị kĩ lập trình, tiếp cận tốn nhanh Một lần chúng em xin chân thành cảm ơn! Giảng viên hướng dẫn: Nguyễn Quang Trung 16 TÀI LIỆU THAM KHẢO Giáo Trình HTML5 CSS HTML – W3Schools CSS - W3Schools Trang mạng: Tự Học HTML & CSS Giảng viên hướng dẫn: Nguyễn Quang Trung 17 ... Nguyễn Quang Trung 14 Giao diện Footer: KẾT LUẬN Qua việc thực nghiên cứu đề tài “XÂY DỰNG TRANG WEB THIẾT KẾ GIAO DIỆN BÁN CÂY CẢNH” Em học hỏi nhiều kĩ hay từ mơn Cơ Sở Lập Trình Web Bên cạnh đó,... tư vào làm trang web bán hàng, cập nhật thông tin đa chiều đến cho người Với vốn kiến thức học qua mơn ? ?Cơ sở lập trình web? ??, chúng em xin chọn đề tài: ? ?Xây Dựng WebSite Bán Cây Cảnh? ?? để giúp tất... Quang Trung 12 Giao diện - Giao diện trang chủ: Vườn Cây Hà Nội - Giao diện trang Cây Cảnh: - Giao diện trang Hỗ Trợ: Giảng viên hướng dẫn: Nguyễn Quang Trung 13 - Danh Mục: Giao diện Dịch Vụ: