Nhưng để đánh đổi những thành tựu to lớn đó trái đất của chúng ta ngàycàng bị đe dọa vì vậy em đã thực hiện đồ án “ WEBSITE BÁN CÂY CẢNH ”với mong muốn mang không khí trong lành đến mọi
Trang 1TRƯỜ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Ở 1
ĐỀ TÀI: WEBSITE BÁN CÂY CẢNH
Giảng viên hướng dẫn : THS ĐỖ CÔNG ĐỨC
Đà nẵng, tháng 5 năm 2021
Trang 2TRƯỜ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Ở 1
ĐỀ TÀI: WEBSITE BÁN CÂY CẢNH
Trang 3Đà Nẵng, tháng 5 năm 2021
MỞ ĐẦU
Với sự phát triển mạnh mẽ của cách mạng 4.0, bầu không khí trên trái đấtđang bị đe dọa nghiêm trọng Tuy nhiên nó lại mang lại một cuộc sống văn minh
và hiện đại hơn, đem đến một cách nhìn khác về thế giới xung quanh của chúng
ta Với sự phát triển này mọi hoạt động đều trở nên dễ dàng, thúc đẩy tăng trưởngkinh tế nhanh chóng mặt Đặc biệt ngành công nghệ đang là bước phát triển mũinhọn nó khám phá và tìm ra những điều mà con người chúng ta không bao giờsuy nghĩ đến, là công cụ chính giúp con người có thể chinh phục những bí ẩnchưa được biết đến của vũ trụ
Nhưng để đánh đổi những thành tựu to lớn đó trái đất của chúng ta ngàycàng bị đe dọa vì vậy em đã thực hiện đồ án “ WEBSITE BÁN CÂY CẢNH ”với mong muốn mang không khí trong lành đến mọi nhà, cho mọi người thấyđược tầm quan trọng của cây xanh, có ý thức hơn trong việc trồng thật nhiều câyxanh để bảo vệ trái đất và an toàn của chính bản thân mình
Trang 4
LỜI CẢM ƠN
Với sự hướng dẫn tận tình của Ths Đỗ Công Đức em đã hoàn thành bàibáo cáo đồ án này Tuy đã rất cố gắng để hoàn thành tốt nhất có thể nhưng cũngkhông tránh được những thiếu sót em rất mong nhận được sự thông cảm và góp ýcủa các Thầy cô Em xin chân thành cảm ơn
Trang 5NHẬN XÉT (Của giảng viên hướng dẫn)
………
………
………
………
………
………
………
Trang 6
MỤC LỤC Trang MỞ ĐẦU 1
Chương 1 GIỚI THIỆU 1
1.1 Tổng quan 1
1.2 Lý do chọn đề tài 1
1.3 Giới hạn và phạm vi của đề tài 1
1.4 Yêu cầu website 1
1.5 Phương pháp, kết quả 1
1.6 Cấu trúc đồ án 1
Chương 2 PHÂN TÍCH VÀ LỰA CHỌN CÔNG NGHỆ 2
2.1 Ngôn ngữ HTML 2
2.1.1 Giới thiệu 2
2.1.2 Lịch sử của HTML 2
2.1.3 Cách HTML hoạt động 3
2.1.4 Các tag thông dụng của HTML 3
2.1.5 Ưu điểm và nhược điểm của HTML 4
2.2 CSS 4
2.2.1 Giới thiệu 4
2.2.2 Sử dụng CSS 5
2.3 JavaScript 5
2.4 Bootstrap 5
2.4.1 Giới thiệu 5
2.4.2 Các file chính của bootstrap 6
2.5 Jquery 7
Chương 3 XÂY DỰNG TRANG WEB 8
3.1 Các chức năng của trang web 8
3.1.1 Người quản trị 8
3.1.2 Người dùng 9
Chương 4 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 12
1 Kết quả đạt được 12
2 Hướng phát triển 12
DANH MỤC TÀI LIỆU THAM KHẢO 13
Trang 7DANH MỤC HÌNH
Trang
Hình 3.1 Chức năng admin 8
Hình 3.2 Kiến thức cây cảnh 8
Hình 3.3 Phần header của trang web 9
Hình 3.4 Phần footer của trang web 9
Hình 3.5 Nút cuộn lên đầu trang 9
Hình 3.6 Sản phẩm 10
Hình 3.7 Mua sản phẩm 10
Hình 3.8 Đăng nhập 11
Hình 3.9 Đăng ký 11
Hình 3.10 Khung chat 11
Trang 9Chương 1 GIỚI THIỆU
1.1 Tổng quan
- Bối cảnh thực hiện đề tài: Xã hội phát triển nhanh chóng tiềm ẩn nhiều hệlụy trong cuộc sống của chúng ta, đặc biệt về vấn đề môi trường sống đang
bị ảnh hưởng tiêu cực bởi hiện tượng nóng lên toàn cầu
- Vấn đề cần giải quyết: Làm hạn chế quá trình của hiện tượng nóng lên toàncầu
- Đề xuất nội dung thực hiện: Để hạn chế được tình trạng này em làm rawebsite bán cây cảnh với mong muốn mang đến cho mọi người một khônggian trong lành, thoải mái hơn
1.2 Lý do chọn đề tài
Ngày nay, sự phát triển nhanh chóng về mọi lĩnh vực, con người đang dầnbiến trái đất thành một quả cầu lửa đe dọa trực tiếp đến cuộc sống của chínhmình Để góp phần hạn chế quá trình đó diễn ra nhanh hơn em đã chọn đề tài
“Website bán cây cảnh” nhằm lan tỏa tầm quan trọng của cây xanh đối vớicuộc sống
1.3 Giới hạn và phạm vi của đề tài
- Ngôn ngữ HTML, Css, Bootstrap, Javascript, Jquery
1.4 Yêu cầu website
Xây dựng một trang web có giao diện đẹp mắt thu hút được nhiều ngườixem và mua Đáp ứng được nhu cầu và mong muốn của khách Lan tỏa tìnhyêu thiên nhiên, có ý thức hơn trong việc bảo về và trồng thật nhiều cây xanh
Chương 2 Phân tích và lựa chọn công nghệ
Chương 3 Xây dựng trang web
Chương 4 Kết luận và hướng phát triển
1
Trang 10Chương 2 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 của từ Hypertext Markup Language, hay là “Ngôn ngữĐánh dấu Siêu văn bản” ) là một ngôn ngữ đánh dấu được thiết kế ra để tạonên các trang web trên World Wide Web Cùng với CSS và JavaScript, HTML
là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website.HTML là xương sống của một trang web Nó giúp cấu thành các cấu trúc cơbản của một website, làm cho trang web trở thành một hệ thống hoàn chỉnh.Ngôn ngữ đánh dấu siêu văn bản này giúp bố cục, chia khung sườn các thànhphần trang web Đồng thời nó còn hỗ trợ khai báo các file kỹ thuật số nhưnhạc, video, hình ảnh,…
2.1.2 Lịch sử của HTML
HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâmnghiên cứu CERN ở Thụy Sĩ Anh ta đã nghĩ ra được ý tưởng cho hệ thốnghypertext trên nền internet
Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cậpngay lập tức Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 baogồm 18 tag HTML Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới
2
Trang 112.1.3 Cách HTML hoạt động
Khi chúng ta gõ ra 1 tên miền, trình duyệt mà chúng ta đang sử dụng(chẳng hạn như Chrome) sẽ kết nối tới 1 máy chủ web, bằng cách dùng 1 địachỉ IP, vốn được thấy bằng cách phân giải tên miền đó (DNS) Máy chủ webchính là một máy tính được kết nối tới internet và nhận các yêu cầu tới trangweb từ trình duyệt của chúng ta Máy chủ sau đó sẽ gửi trả thông tin về trìnhduyệt, là 1 tài liệu HTML, để hiển thị trang web
Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới
đuôi mở rộng là html hoặc htm Khi một tập tin HTML được hình thành,
việc xử lý nó sẽ do trình duyệt web đảm nhận Trình duyệt sẽ đóng vai trò đọchiểu nội dung HTML từ các thẻ bên trong và sẽ chuyển sang dạng văn bản đãđược đánh dấu để đọc, nghe hoặc hiểu
Chúng ta có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào(như Google Chrome, Safari, hay Mozilla Firefox) Trình duyệt đọc các filesHTML này và xuất bản nội dung lên internet sao cho người đọc có thể xemđược nó Thông thường, trung bình một 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 của HTML
Trong file HTML, block-level tags cùng inline tags là các thẻ được dùngchủ yếu
- Block-level tags của mỗi trang HTML cần có những tag như là <html>,
in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiên
Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href đểxác định link cụ thể: <a href="https://topdev.vn/">Click me!</a>
Ảnh cũng là element inline Chúng ta có thể thêm ảnh bằng cách sử dụng tag
<img> mà không cần tag đóng Nhưng cũng cần sử dụng attribute src để xácđịnh nguồn ảnh, ví dụ như: <img src="/images/example.jpg" alt="Exampleimage">
3
Trang 122.1.5 Ưu điểm và nhược điểm của HTML
- Ưu điểm:
+ Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn
+ Có thể hoạt động mượt mà trên hầu hết mọi trình duyện hiện nay
+ Các markup sử dụng trong HTML thường nắng gọn, có độ đồng nhất cao+ Sử dụng mã nguồn mở, hoàn toàn miễn phí
+ HTML là chuẩn web được vận hành bởi W3C
+ Dễ dàng tích hợp với các loại ngôn ngữ backend (ví dụ: PHP, Node.js,…)
- Nhược điểm:
+ Chỉ được áp dụng chủ yếu cho web tĩnh Nếu muốn tạo các tính năngđộng, lập trình viên phải sử dụng thêm JavaScript hoặc ngôn ngữ backendcủa bên thứ 3
+ Mỗi trang HTML cần được tạo riêng biệt, ngay có khi nhiều yếu tố trùnglặp như header, footer
+ Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt
+ Một vài trình duyệt còn chậm cập nhật đễ hỗ trợ tính năng mới của HTML
2.2 CSS
2.2.1 Giới thiệu
CSS là các tập tin định kiểu theo tầng (Cascading Style Sheets (CSS)) đượcdùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML vàXHTML Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng cho XML,SVG, XUL Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide WebConsortium(W3C) Thay vì đặt các thẻ quy định kiểu dáng cho văn bản HTMLngay trong nội dung của nó, bạn nên sử dụng CSS
Tác dụng của CSS: Hạn chế tối thiểu việc làm rối mã HTML của trang webbằng các 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 của trang web được gọn gàng hơn, tách nội dungcủa trang web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung Tạo
ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải lặp lạiviệc định dạng cho các trang web giống nhau
4
Trang 132.2.2 Sử dụng CSS
Có 3 cách để sử dụng CSS
- "Inline CSS": Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộctính style
- "Internal CSS": Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn
bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vàotrong phần header của Web (giữa <head> và </head>)
- "External CSS": Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css),khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau
2.3 JavaScript
JavaScript là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được pháttriển từ các ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãi cho cáctrang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đốitượng nằm sẵn trong các ứng dụng Nó vốn được phát triển bởi Brandan Eichtại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tênthành LiveScript, và cuối cùng thành JavaScript
Giống Java, JavaScript có cú pháp tương tự C Js là phần mở rộng thườngđược dùng cho tập tin mã nguồn JavaScript
JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu với cú pháp pháttriển từ C Giống như C, JavaScript có khái niệm từ khóa, do đó JavaScript gầnnhư không thể được mở rộng
2.4 Bootstrap
2.4.1 Giới thiệu
Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễdàng hơn dựa trên những thành tố cơ bản sẵn có như typhography, form,button, tables, grids, navigation, image carousel…
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụdùng để tạo ra một mẫu website hoàn chỉnh Với các thuộc tính về giao diệnđược quy định sẵn như kích thước, màu sắc, độ cao, độ rộng, các designer cóthể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làmviệc với framework này trong quá trình thiết kế giao diện website
5
Trang 142.4.2 Các file chính của bootstrap
- Bootstrap.css là một framework CSS sắp xếp và quản lý bố cục củatrang web Trong khi HTML quản lý nội dung và cấu trúc của trang web,CSS xử lý bố cục của trang web Vì lý do đó, cả hai cấu trúc cần cùng tồntại để thực hiện một hành động cụ thể
Do các chức năng của nó, CSS cho phép chúng ta tạo giao diện thống nhấttrên bao nhiêu trang web tùy thích Giờ thì ta có thể nói lời tạm biệt vớiviệc phải ngồi hàng giờ để chỉnh sửa thủ công chỉ để thay đổi độ rộng củađường viền
Với CSS, tất cả những gì cần làm là giới thiệu các trang web đến file CSS.Bất kỳ thay đổi cần thiết có thể được thực hiện trong file đó một mình.Các hàm CSS không chỉ giới hạn ở các kiểu văn bản vì chúng có thể được
sử dụng để định dạng các khía cạnh khác của trang web như bảng và bố cụchình ảnh
- Bootstrap.js: File này là phần cốt lõi của Bootstrap Nó bao gồm cácfile JavaScript chịu trách nhiệm cho việc tương tác của trang web
Để tiết kiệm thời gian khi viết cú pháp JavaScript nhiều lần, các nhà pháttriển có xu hướng sử dụng jQuery Nó có một thư viện JavaScript đa nềntảng, mã nguồn mở phổ biến cho phép thêm các chức năng khác nhau vàomột trang web
Dưới đây là một vài ví dụ về những gì jQuery có thể làm:
+ Thực hiện các yêu cầu Ajax như loại trự dữ liệu từ một vị trí khác mộtcách linh hoạt
+ Tạo tiện ích bằng bộ sưu tập plugin JavaScript
+ Tạo hình động tùy chỉnh bằng các thuộc tính CSS
+ Thêm tính năng động cho nội dung trang web
Mặc dù Bootstrap với các thuộc tính CSS và element HTML có thể hoạtđộng tốt, nhưng nó cần jQuery để tạo ra thiết kế responsive Nếu không,bạn chỉ có thể sử dụng các phần tĩnh của CSS
- Glyphicons
Icons là một phần không thể thiếu của giao diện trang web Chúng thườngđược liên kết với các hành động và dữ liệu nhất định trong giao diện ngườidùng Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu đó
Bootstrap bao gồm một bộ Halflings Glyphicons đã được mở khóa để sử dụngmiễn phí Phiên bản miễn phí có giao diện chuẩn nhưng phù hợp với các chứcnăng thiết yếu
Nếu muốn tìm icon có phong cách hơn, Glyphicons cũng bán các bộ iconpremium khác nhau, chắc chắn sẽ trông đẹp hơn trên từng trang web cụ thể
6
Trang 15- Ajax – xử lý Ajax
- Atributes – Xử lý các thuộc tính của đối tượng HTML
- Effect – xử lý hiệu ứng
- Event – xử lý sự kiện
- Form – xử lý sự kiện liên quan tới form
- DOM – xử lý Data Object Model
- Selector – xử lý luồng lách giữa các đối tượng HTM
7
Trang 16Chương 3 XÂY DỰNG TRANG WEB
3.1 Các chức năng của trang web
3.1.1 Người quản trị
- Có thể thêm, sửa, xóa các sản phẩm mua bán của mình:
Hình 3.1 Chức năng admin
- Trao đổi thông tin với người dùng qua kênh chat
- Đăng tải những kiến thức về cây cảnh
Hình 3.2 Kiến thức cây cảnh
8
Trang 173.1.2 Người dùng
- Trang chủ bắt mắt người xem:
Hình 3.3 Phần header của trang web
- Phần footer mang đến cảm giác trong lành:
Hình 3.4 Phần footer của 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
9
Trang 18- 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 19- Trang đăng ký và đăng nhập vào trang web:
Trang 20Hình 3.10 Khung chat
12
Trang 21Chương 4 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Chương 5 Kết quả đạt được
Với sự nỗ lực làm việc của em đã thực hiện hoàn thành đồ án, đề tài xâydựng website bán cây cảnh
Gặp những thuận lợi và khó khăn trong quá trình làm việc, website về cơbản đã hoàn thành nhưng không tránh phần sai sót Tuy nhiên, chúng em đã rất
nỗ lực và website đã hoàn thành được những nội dung chính sau:
- Qua thời gian làm đề tài, về 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ây cảnh+ Tìm hiểu được CSS
+ Tìm hiểu được JavaScript
+ Tìm hiểu được jQuery
+ Tìm hiểu được Bootstrap
Về phần thực nghiệm em đã xây dựng được trang web cơ bản để thực hiện:
- Phần giao diện người dùng: chọn những sản phẩm vừa ý phù hợp với cảnhquan của mình, học hỏi thêm nhiều kinh nghiệm về cây cảnh
- Phần quản trị: cho phép thêm, sửa, xóa các sản phẩm
Chương 6 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ồ vàtiện dụng cho tất cả mọi người Mọi người có thể tìm kiếm thông tin Hiểuđược điều đó, chúng em luôn muốn hoàn thiện website bán cây cảnh của mìnhtốt hơn:
- Giao diện đẹp hơn, tùy biến hơn
- Thực hiện thêm chức năng thống kê sản phẩm để đáp ứng nhanh chóngnhu cầu của khách hàng
- Mở rộng thêm nhiều sản phẩm mới lại, đẹp mắt
- Tạo diễn đàn trao đổi, chia sẻ kinh nghiệm giữa các người dùng
13