ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: WEBSITE BÁN CÂY CẢNH Giảng viên hướng dẫn : THS. ĐỖ CÔNG ĐỨC

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN CƠ SỞ ĐỀ TÀI: WEBSITE BÁN CÂY CẢNH Sinh viên thực : PHẠM VĂN NHẬT Giảng viên hướng dẫn : THS ĐỖ CÔNG ĐỨC Lớp : 20IT11 Đà nẵng, tháng năm 2021 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN CƠ SỞ ĐỀ TÀI: WEBSITE BÁN CÂY CẢNH Đà Nẵng, tháng năm 2021 MỞ ĐẦU Với phát triển mạnh mẽ cách mạng 4.0, bầu khơng khí trái đất bị đe dọa nghiêm trọng Tuy nhiên lại mang lại sống văn minh đại hơn, đem đến cách nhìn khác giới xung quanh Với phát triển hoạt động trở nên dễ dàng, thúc đẩy tăng trưởng kinh tế nhanh chóng mặt Đặc biệt ngành cơng nghệ bước phát triển mũi nhọn khám phá tìm điều mà người khơng suy nghĩ đến, cơng cụ giúp người chinh phục bí ẩn chưa biết đến vũ trụ Nhưng để đánh đổi thành tựu to lớn trái đất ngày bị đe dọa em thực đồ án “ WEBSITE BÁN CÂY CẢNH ” với mong muốn mang khơng khí lành đến nhà, cho người thấy tầm quan trọng xanh, có ý thức việc trồng thật nhiều xanh để bảo vệ trái đất an tồn thân LỜI CẢM ƠN Với hướng dẫn tận tình Ths Đỗ Cơng Đức em hoàn thành báo cáo đồ án Tuy cố gắng để hoàn thành tốt khơng tránh thiếu sót em mong nhận thơng cảm góp ý Thầy Em xin chân thành cảm ơn NHẬN XÉT (Của giảng viên hướng dẫn) …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… MỤC LỤC Trang MỞ ĐẦU Chương GIỚI THIỆU .1 1.1 Tổng quan 1.2 Lý chọn đề tài .1 1.3 Giới hạn phạm vi đề tài 1.4 Yêu cầu website 1.5 Phương pháp, kết 1.6 Cấu trúc đồ án Chương PHÂN TÍCH VÀ LỰA CHỌN CƠNG NGHỆ 2.1 Ngôn ngữ HTML .2 2.1.1 Giới thiệu 2.1.2 Lịch sử HTML 2.1.3 Cách HTML hoạt động .3 2.1.4 Các tag thông dụng HTML 2.1.5 Ưu điểm nhược điểm HTML 2.2 CSS 2.2.1 Giới thiệu 2.2.2 Sử dụng CSS .4 2.3 JavaScript 2.4 Bootstrap 2.4.1 Giới thiệu 2.4.2 Các file bootstrap 2.5 Jquery Chương XÂY DỰNG TRANG WEB .8 3.1 Các chức trang web .8 3.1.1 Người quản trị .8 3.1.2 Người dùng Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 13 Kết đạt 13 Hướng phát triển 13 DANH MỤC TÀI LIỆU THAM KHẢO 14 DANH MỤC HÌNH Trang DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ Khoa học máy tính Cơng nghệ thơng tin Công nghệ Viết tắt KHMT CNTT CN Chương GIỚI THIỆU 1.1 Tổng quan - Bối cảnh thực đề tài: Xã hội phát triển nhanh chóng tiềm ẩn nhiều hệ lụy sống chúng ta, đặc biệt vấn đề môi trường sống bị ảnh hưởng tiêu cực tượng nóng lên tồn cầu - Vấn đề cần giải quyết: Làm hạn chế trình tượng nóng lên tồn cầu - Đề xuất nội dung thực hiện: Để hạn chế tình trạng em làm website bán cảnh với mong muốn mang đến cho người không gian lành, thoải mái 1.2 Lý chọn đề tài Ngày nay, phát triển nhanh chóng lĩnh vực, người dần biến trái đất thành cầu lửa đe dọa trực tiếp đến sống Để góp phần hạn chế q trình diễn nhanh em chọn đề tài “Website bán cảnh” nhằm lan tỏa tầm quan trọng xanh sống 1.3 Giới hạn phạm vi đề tài - Ngôn ngữ HTML, Css, Bootstrap, Javascript, Jquery 1.4 Yêu cầu website Xây dựng trang web có giao diện đẹp mắt thu hút nhiều người xem mua Đáp ứng nhu cầu mong muốn khách Lan tỏa tình yêu thiên nhiên, có ý thức việc bảo trồng thật nhiều xanh 1.5 Phương pháp, kết - Trình bày phương pháp triển khai thực đề tài: sử dụng phần mềm Sublime text để xây dựng thiết kế website Kết đạt được: Trang web bán cảnh đẹp mắt, sáng tạo thu hút nhiều người mua 1.6 Cấu trúc đồ án Chương Phân tích lựa chọn cơng nghệ Chương Xây dựng trang web Chương Kết luận hướng phát triển Chương PHÂN TÍCH VÀ LỰA CHỌN CƠNG NGHỆ 2.1 Ngơn ngữ HTML 2.1.1 Giới thiệu HTML(viết tắt từ Hypertext Markup Language, “Ngôn ngữ Đánh dấu Siêu văn bản” ) ngôn ngữ đánh dấu thiết kế để tạo nên trang web World Wide Web Cùng với CSS JavaScript, HTML ngôn ngữ quan trọng lĩnh vực thiết kế website HTML xương sống trang web Nó giúp cấu thành cấu trúc website, làm cho trang web trở thành hệ thống hoàn chỉnh Ngôn ngữ đánh dấu siêu văn giúp bố cục, chia khung sườn thành phần trang web Đồng thời cịn hỗ trợ khai báo file kỹ thuật số nhạc, video, hình ảnh,… 2.1.2 Lịch sử HTML HTML sáng tạo Tim Berners-Lee, nhà vật lý học trung tâm nghiên cứu CERN Thụy Sĩ Anh ta nghĩ ý tưởng cho hệ thống hypertext internet Hypertext có nghĩa văn chứa links, nơi người xem truy cập Anh xuất phiên HTML năm 1991 bao gồm 18 tag HTML Từ đó, phiên HTML có thêm tag attributes Theo Mozilla Deverloper Network: HTML Element Reference, có 140 HTML tags, vài số chúng bị tạm ngưng (khơng hỗ trợ trình duyệt đại) Nhanh chóng phổ biến mức độ chóng mặt, HTML xem chuẩn mực website Các thiết lập cấu trúc HTML vận hành phát triển World Wide Web Consortium(W3C) Chúng ta kiểm tra tình trạng ngôn ngữ lúc trang W3C’s website 2.1.3 Cách HTML hoạt động Khi gõ tên miền, trình duyệt mà sử dụng (chẳng hạn Chrome) kết nối tới máy chủ web, cách dùng địa IP, vốn thấy cách phân giải tên miền (DNS) Máy chủ web máy tính kết nối tới internet nhận yêu cầu tới trang web từ trình duyệt Máy chủ sau gửi trả thơng tin trình duyệt, tài liệu HTML, để hiển thị trang web Một tập tin HTML bao gồm phần tử HTML lưu lại đuôi mở rộng html htm Khi tập tin HTML hình thành, việc xử lý trình duyệt web đảm nhận Trình duyệt đóng vai trị đọc hiểu nội dung HTML từ thẻ bên chuyển sang dạng văn đánh dấu để đọc, nghe hiểu Chúng ta xem chúng cách sử dụng trình duyệt web (như Google Chrome, Safari, hay Mozilla Firefox) Trình duyệt đọc files HTML xuất nội dung lên internet cho người đọc xem Thơng thường, trung bình web chứa nhiều trang web HTML, ví dụ như: trang home, trang product, trang blog… 2.1.4 Các tag thông dụng HTML Trong file HTML, block-level tags inline tags thẻ dùng chủ yếu - Block-level tags trang HTML cần có tag , , + Tag element cao dùng để đóng gói trang HTML + Tag chứa thông tin meta tiêu đề trang charset + Cuối tag dùng để đóng gói tất nội dung trang - Inline tags thường dùng để định dạng, tạo bố cục cho nội dung bên block-level tags Ví dụ như, tag định dạng chữ in đậm, tag định dạng chữ in nghiên Hyperlinks yếu tố element mà cần tag attributes href để xác định link cụ thể: Click me! Ảnh element inline Chúng ta thêm ảnh cách sử dụng tag mà không cần tag đóng Nhưng cần sử dụng attribute src để xác định nguồn ảnh, ví dụ như: 2.1.5 Ưu điểm nhược điểm HTML - Ưu điểm: Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vơ lớn Có thể hoạt động mượt mà hầu hết trình duyện Các markup sử dụng HTML thường nắng gọn, có độ đồng cao Sử dụng mã nguồn mở, hồn tồn miễn phí HTML chuẩn web vận hành W3C Dễ dàng tích hợp với loại ngơn ngữ backend (ví dụ: PHP, Node.js,…) - Nhược điểm: + Chỉ áp dụng chủ yếu cho web tĩnh Nếu muốn tạo tính động, lập trình viên phải sử dụng thêm JavaScript ngôn ngữ backend bên thứ + Mỗi trang HTML cần tạo riêng biệt, có nhiều yếu tố trùng lặp header, footer + Khó để kiểm sốt cách đọc hiển thị file HTML trình duyệt + Một vài trình duyệt cịn chậm cập nhật đễ hỗ trợ tính HTML + + + + + + 2.2 CSS 2.2.1 Giới thiệu CSS tập tin định kiểu theo tầng (Cascading Style Sheets (CSS)) dùng để miêu tả cách trình bày tài liệu viết ngơn ngữ HTML XHTML Ngồi ngơn ngữ định kiểu theo tầng dùng cho XML, SVG, XUL Các đặc điểm kỹ thuật CSS trì World Wide Web Consortium(W3C) Thay đặt thẻ quy định kiểu dáng cho văn HTML nội dung nó, bạn nên sử dụng CSS Tác dụng CSS: Hạn chế tối thiểu việc làm rối mã HTML trang web thẻ quy định kiểu dáng(chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn trang web gọn gàng hơn, tách nội dung trang web định dạng hiển thị, dễ dàng cho việc cập nhật nội dung Tạo kiểu dáng áp dụng cho nhiều trang web, giúp tránh phải lặp lại việc định dạng cho trang web giống 2.2.2 Sử dụng CSS Có cách để sử dụng CSS - "Inline CSS": Áp dụng trực tiếp đối tượng định thuộc tính style - "Internal CSS": Đặt CSS đầu trang Web để áp dụng kiểu dáng cho toàn trang ấy, cần đặt đoạn CSS vào cặp thẻ đặt vào phần header Web (giữa ) - "External CSS": Đặt thuộc tính CSS vào tệp tin riêng biệt (*.css), tham chiếu đến từ nhiều trang Web khác 2.3 JavaScript JavaScript ngôn ngữ lập trình kịch dựa đối tượng phát triển từ ý niệm nguyên mẫu Ngôn ngữ dùng rộng rãi cho trang web, dùng để tạo khả viết script sử dụng đối tượng nằm sẵn ứng dụng Nó vốn phát triển Brandan Eich Hãng truyền thông Netscape với tên Mocha, sau đổi tên thành LiveScript, cuối thành JavaScript Giống Java, JavaScript có cú pháp tương tự C Js phần mở rộng thường dùng cho tập tin mã nguồn JavaScript JavaScript ngơn ngữ lập trình dựa nguyên mẫu với cú pháp phát triển từ C Giống C, JavaScript có khái niệm từ khóa, JavaScript gần khơng thể mở rộng 2.4 Bootstrap 2.4.1 Giới thiệu Bootstrap cho phép trình thiết kế website diễn nhanh chóng dễ dàng dựa thành tố sẵn có typhography, form, button, tables, grids, navigation, image carousel… Bootstrap sưu tập miễn phí mã nguồn mở công cụ dùng để tạo mẫu website hồn chỉnh Với thuộc tính giao diện quy định sẵn kích thước, màu sắc, độ cao, độ rộng, designer sáng tạo nhiều sản phẩm mẻ tiết kiệm thời gian làm việc với framework trình thiết kế giao diện website 2.4.2 Các file bootstrap - Bootstrap.css framework CSS xếp quản lý bố cục trang web Trong HTML quản lý nội dung cấu trúc trang web, CSS xử lý bố cục trang web Vì lý đó, hai cấu trúc cần tồn để thực hành động cụ thể Do chức nó, CSS cho phép tạo giao diện thống trang web tùy thích Giờ ta nói lời tạm biệt với việc phải ngồi hàng để chỉnh sửa thủ công để thay đổi độ rộng đường viền Với CSS, tất cần làm giới thiệu trang web đến file CSS Bất kỳ thay đổi cần thiết thực file Các hàm CSS khơng giới hạn kiểu văn chúng sử dụng để định dạng khía cạnh khác trang web bảng bố cục hình ảnh - Bootstrap.js: File phần cốt lõi Bootstrap Nó bao gồm file JavaScript chịu trách nhiệm cho việc tương tác trang web Để tiết kiệm thời gian viết cú pháp JavaScript nhiều lần, nhà phát triển có xu hướng sử dụng jQuery Nó có thư viện JavaScript đa tảng, mã nguồn mở phổ biến cho phép thêm chức khác vào trang web Dưới vài ví dụ jQuery làm: + Thực yêu cầu Ajax loại trự liệu từ vị trí khác cách linh hoạt + Tạo tiện ích sưu tập plugin JavaScript + Tạo hình động tùy chỉnh thuộc tính CSS + Thêm tính động cho nội dung trang web Mặc dù Bootstrap với thuộc tính CSS element HTML hoạt động tốt, cần jQuery để tạo thiết kế responsive Nếu không, bạn sử dụng phần tĩnh CSS - Glyphicons Icons phần thiếu giao diện trang web Chúng thường liên kết với hành động liệu định giao diện người dùng Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu Bootstrap bao gồm Halflings Glyphicons mở khóa để sử dụng miễn phí Phiên miễn phí có giao diện chuẩn phù hợp với chức thiết yếu Nếu muốn tìm icon có phong cách hơn, Glyphicons bán icon premium khác nhau, chắn trông đẹp trang web cụ thể 2.5 Jquery Jquery thư viện viết từ JavaScript, jquery giúp xây dựng chức Javarscript dễ dàng, nhanh giàu tính Jquery tích hợp nhiều module khác Từ module hiệu ứng module truy vấn selector Jquery sử dụng dến 99% tổng số website giới Các module jquery bao gồm: - Ajax – xử lý Ajax - Atributes – Xử lý thuộc tính đối tượng HTML - Effect – xử lý hiệu ứng - Event – xử lý kiện - Form – xử lý kiện liên quan tới form - DOM – xử lý Data Object Model - Selector – xử lý luồng lách đối tượng HTM Chương XÂY DỰNG TRANG WEB 3.1 Các chức trang web 3.1.1 Người quản trị - Có thể thêm, sửa, xóa sản phẩm mua bán mình: Hình 3.1 Chức admin - Trao đổi thông tin với người dùng qua kênh chat - Đăng tải kiến thức cảnh Hình 3.2 Kiến thức cảnh 3.1.2 Người dùng - Trang chủ bắt mắt người xem: Hình 3.3 Phần header trang web - Phần footer mang đến cảm giác lành: Hình 3.4 Phần footer trang web - Nút cuộn lên đầu trang dễ dàng: Hình 3.5 Nút cuộn lên đầu trang - Thoải mái lựa chọn sản phẩm: Hình 3.6 Sản phẩm - Đặt mua sản phẩm vừa ý: Hình 3.7 Mua sản phẩm 10 - Trang đăng ký đăng nhập vào trang web: Hình 3.8 Đăng nhập Hình 3.9 Đăng ký - Khung chat: giải đáp thắc mắc, nhu cầu khách hàng Hỗ trợ xử lý trường hợp liên quan đến sản phẩm Tạo cảm giác gần gủi với người dùng 11 Hình 3.10 Khung chat 12 Chương TRIỂN KẾT LUẬN VÀ HƯỚNG PHÁT Kết đạt Với nỗ lực làm việc em thực hoàn thành đồ án, đề tài xây dựng website bán cảnh Gặp thuận lợi khó khăn q trình làm việc, website hồn thành khơng tránh phần sai sót Tuy nhiên, chúng em nỗ lực website hoàn thành nội dung sau: + + + + + Qua thời gian làm đề tài, mặt lý thuyết em tìm hiểu được: Vận dụng ngơn ngữ HTML vào việc xây dựng website bán cảnh Tìm hiểu CSS Tìm hiểu JavaScript Tìm hiểu jQuery Tìm hiểu Bootstrap Về phần thực nghiệm em xây dựng trang web để thực hiện: - Phần giao diện người dùng: chọn sản phẩm vừa ý phù hợp với cảnh quan mình, học hỏi thêm nhiều kinh nghiệm cảnh - Phần quản trị: cho phép thêm, sửa, xóa sản phẩm Hướng phát triển Ngày nay, internet trở thành phương tiện tra cứu thông tin khổng lồ tiện dụng cho tất người Mọi người tìm kiếm thơng tin Hiểu điều đó, chúng em ln muốn hồn thiện website bán cảnh tốt hơn: - Giao diện đẹp hơn, tùy biến - Thực thêm chức thống kê sản phẩm để đáp ứng nhanh chóng nhu cầu khách hàng - Mở rộng thêm nhiều sản phẩm lại, đẹp mắt - Tạo diễn đàn trao đổi, chia sẻ kinh nghiệm người dùng 13 DANH MỤC TÀI LIỆU THAM KHẢO Tiếng Anh: Giáo trình mơn CN Web khoa KHMT Trường Đại học CNTT & TT Việt – Hàn Website niemvuilaptrinh.com Website w3schools.com 14