ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: Xây dựng trang web trao đổi và buôn bánnông sản

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: Xây dựng trang web trao đổi buôn bán nông sản Sinh viên thực : BÙI ĐỨC HIẾU Lớp : 20IT11 Sinh viên thực : NGUYỄN TIẾN DŨNG Lớp : 20IT10 Giảng viên hướng dẫn : TH.S.ĐẶNG THỊ KIM NGÂN Đà 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Ở Xây dựng trang web trao đổi buôn bán nông sản Đà Nẵng, tháng năm 2021 MỞ ĐẦU Ngày với thời đại 4.0 công nghệ ngày phát triển nhanh chóng, người trẻ bắt việc bắt kịp xu hướng khơng có vấn đề q khó khăn, chí cịn tiếp nhận cách nhanh chóng Kèm theo người có tuổi tiếp xúc với công nghệ khiến đối tượng bị bỏ lại phía sau thời đại 4.0 Điển người nông dân nước ta nhiều nhà có điều kiện sài thiết bị điện tử phát huy hết chức giúp người nông dân chưa? Câu trả lời chưa nên lý tụi em nghĩ ý tưởng xây dựng diễn đàn trao đổi mua bán nông sản để giúp cho người nơng dân việt nam có nơi để trao đổi kỹ thuật canh tác, cập nhật tin tức nông nghiệp ngồi nước, bn bán trao đổi nơng sản trực tiếp với người có nhu cầu mua thực phẩm nhà trồng Với hướng dẫn tận tình Đặng Thị Kim Ngân người có đóng góp ý kiến để em hồn thành đồ án Mặc dù tìm hiểu kĩ phân tích thiết kế khó tránh khỏi thiếu sót khơng mong muốn.Em kính mong nhận thơng cảm góp ý q thầy Em xin kính chúc q thầy dồi sức khỏe, tiếp tục đào tạo hệ trẻ, nguồn nhân lực chất lượng tốt cho đất nước Em xin chân thành cảm ơn! Nhận xét GVHD …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… Đà Nẵng, tháng , năm 2020 CHỮ KÍ GVHD THS ĐẶNG THỊ KIM NGÂN MỤC LỤC Trang MỞ ĐẦU Nhận xét GVHD Tổng quan Tên dự án .8 Sinh viên thực Nội dung nghiên cứu Phương pháp, kết Bố cục Chương Cơ sở lý thuyết .9 1.1 Website gì? 1.1.1 Vậy trang web gì? 1.1.2 Cấu tạo hoạt động website 1.1.3 Giao diện website gồm thành phần nào? .9 1.1.4 Các loại website .10 1.2 Tổng quan HTML 11 1.2.1 Ưu điểm 11 1.2.2 Khuyết điểm 11 1.3 Tổng quan CSS 12 1.3.1 Tại lại sử dụng CSS 12 1.4 Tổng quan ngơn ngữ lập trình Javascript 13 1.4.1 Ưu điểm 13 1.4.2 Nhược điểm 13 1.5 Giới thiệu thư viện Bootstrap 13 1.5.1 Bootstrap.css 14 1.5.2 Bootstrap.js 14 1.5.3 Glyphicons .14 1.6 Giới thiệu thư viện hình ảnh Font Awesome 14 Chương Khảo sát phân tích thiết kế hệ thống .16 2.1 Đối tượng sử dụng chức 16 Chương Triển khai xây dựng .18 3.1 Giao diện trang web .18 3.1.1 Giao diện trang chủ 18 3.1.1.1 Phần header 18 3.1.1.2 Phần navigation 18 3.1.1.3 Phần body 18 3.1.1.4 Phần footer .20 3.1.2 Giao diện giới thiệu 20 3.1.3 Giao diện cửa hàng 21 3.1.4 Giao diện tin tức 21 3.1.5 Giao diện liên hệ .22 3.1.6 Giao diện đăng nhập/ đăng ký 23 Kết luận Hướng phát triển 25 Kết đạt 25 Hướng phát triển 25 Danh mục tài liệu tham khảo………………………………………………….25 DANH MỤC HÌNH Trang Hình 2-1 Chỉnh sửa/bổ sung thơng tin cá nhân 16 Hình 2-2 Đăng bán sản phẩm .16 Hình 2-3 Quản lý sản phẩm đăng bán .17 Hình 2-4 Chỉnh sửa đăng .17 Hình 3-1 Header 18 Hình 3-2 Navigation 18 Hình 3-3 Body 19 Hình 3-4 Body 19 Hình 3-5 Body 19 Hình 3-6 Footer 20 Hình 3-7 Giới thiệu 20 Hình 3-8 Giới thiệu 21 Hình 3-9 Cửa hàng .21 Hình 3-10 Tin tức .22 Hình 3-11 Tin tức .22 Hình 3-12 Liên hệ 23 Hình 3-13 Liên hệ 23 Hình 3-14 Đăng nhập 24 Hình 3-15 Đăng ký 24 Tổng quan Tên dự án - Xây dựng trang web trao đổi mua bán nông sản Sinh viên thực - Bùi Đức Hiếu Nguyễn Tiến Dũng - MSV: 20IT531 - MSV: 20IT521 Nội dung nghiên cứu - Nhóm em tìm hiểu công nghệ dùng để xây dựng nên trang web cộng với kiến thức học tìm hiểu thị trường web bán mặt hàng nơng sản nên nhóm em chọn thị trường làm nên trang web nongsanvn Phương pháp, kết - Để thực đề tài nhóm chúng em tìm hiểu trang lớn mạng xã hội Facebook, Instagram, - Sau phân tích thông tin nhu cầu người tiêu dùng nhóm chúng em lên nội dung kế hoạch thực cho dự án Bố cục Phần trình bày cấu trúc đồ án: Chương 2, chương 3, …  Phần 1: Tổng quan  Phần 2: Cơ sở lý thuyết  Phần 3: Triển khai xây dựng  Phần 4: Kết luận Hướng phát triển Chương 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 ỉnternet 1.1.1 Vậy cịn trang web gì? Đó trang cụ thể website thường gọi “web page” ngắn gọn “pages” Là tài liệu thị trực tiếp trình duyệt web 1.1.2 Cấu tạo hoạt động website Một website gồm nhiều webpage (trang con), tập tin dạng html xhtml, lưu trữ máy tính có chức máy chủ (web server) thông tin trang web có nhiều dạng như: văn bản, âm thanh, hình ảnh, video,… Các máy tính nơi khác (gọi máy trạm) sử dụng ứng dụng gọi trình duyệt web, thơng qua đường truyền dẫn internet để lấy tập tin nêu từ máy chủ hiển thị lên cho người dùng đọc - Để website hoạt động môi trường internet, cần có thành phần chính:  Source Code (mã nguồn): phần mềm website lập trình viên thiết kế xây dựng  Web hosting (Lưu trữ web): dùng để lưu trữ mã nguồn  Tên miền (domain): địa website để máy tính nơi trỏ tới muốn truy cập vào website 1.1.3 Giao diện website gồm thành phần nào? Trong trình hợp tác xây dựng website, nhiều bên không hiểu hiểu không thống cách gọi tên thành phần để truyền đạt ý kiến Vì bố cục phổ biến bao gồm Header, Slide/Carousel, Content Area, Footer với trang cụ thể có thay đổi phù hợp với nhu cầu hiển thị nội dung chức 1.1.3.1 Header - Là phần đầu trang thường hiển thị tất trang Phần thường có logo, hotline, lựa chọn ngơn ngữ, đăng ký/đăng nhập, menu điều hướng, tìm kiếm, giỏ hàng, 1.1.3.2 Slider/Carousel - Dưới header thường thiết kế hình ảnh thu hút giới thiệu chủ đề website sản phẩm, dịch vụ, kèm theo câu hiệu (slogan) doanh nghiệp Các ảnh lập trình để trượt ngang (dạng slide), hiển thị theo trục với hiệu ứng kèm (dạng carousel) Khu vực có dẫn hướng để người dùng chủ động xem ảnh trước 1.1.3.3 Content/Area - Là khu vực có vai trị quan trọng trang web, nơi cung cấp nội dung cho đọc giả nội dung nhiều dạng khác như: văn bản, âm thanh, hình ảnh, video, links,… 1.1.3.4 Footer - Là phần chân trang nằm trang web, thường dùng để bố trí thơng tin quyền, liên kết nhanh, fanpage, social, network,… 1.1.4 Các loại website Có nhiều tiêu chí website nên cách phân loại khác có phổ biến sử dụng nay: 1.1.4.1 Theo cấu trúc cách hoạt động  Website tĩnh: chủ yếu sử dụng ngôn ngữ html (và css, javascript), nội dung khi chỉnh sửa (sau đăng), thường khơng có tương tác với người dùng Do hạn chế, dần sử dụng  Website động: ngồi html, css javascript, cịn dùng thêm ngơn ngữ lập trình server ASP.NET hay PHP,… sở liệu SQL Server, MySQL,… web có nội dung thường xuyên dễ dàng thay đổi, dựa tướng tác với người dùng Đa số web động 1.1.4.2 Theo mục đích website  Website giới thiệu cơng ty: chứa đầy đủ thông tin cần thiết công ty, bao gồm lịch sử hình thành phát triển, thành tựu, sản phẩm dịch vụ, thông tin liên lạc,…  Website giới thiệu cá nhân: thường tập trung giới thiệu thành tựu người đó, với vai trị CV đẹp có sẵn, với mục đích để xây dựng thương hiệu cá nhân  Website bán hàng: cung cấp thơng tin chi tiết hàng hố, để giới thiệu chào hàng  Website có chức đặc biệt, phức tạp: chợ điện tử, mạng xã hội, diễn đàn, wiki, web-app,… 1.1.4.3 Theo lĩnh vực cụ thể Cách phân loại chủ yếu để phục vụ cho doanh nghiệp muốn đặt thiết kế website người dùng hay tìm kiếm loại website theo ngành nghề này:  Website tin tức  Web du lịch, bán vé máy bay  Website nội thất, xây dựng  Website bất động sản 1.4 Tổng quan ngơn ngữ lập trình Javascript JavaScript ngơn ngữ lập trình mang đến sinh động website Nó khác với HTML (thường chuyên cho nội dung) CSS (thường chuyên dùng cho phong cách), khác hẵn với PHP (chạy server không chạy máy client) JavaScript ngơn ngữ lập trình phổ biến giới suốt 20 năm qua Nó số ngơn ngữ lập trình web: HTML: Giúp bạn thêm nội dung cho trang web CSS: Định dạng thiết kế, bố cục, phong cách, canh lề trang web JavaScript: Cải thiện cách hoạt động trang web 1.4.1 Ưu điểm  Dễ học ngơn ngữ lập trình khác  Lỗi dễ phát dễ sửa  Javascript hoạt động nhiều tảng, trình duyệt,…  Giúp website tương tác tốt với khách truy cập  Nhanh nhẹ ngôn ngữ lập trình khác  Có thể dùng Javascript để kiểm tra input giảm thiểu việc kiểm tra thủ công truy xuất qua database  Có thể dùng để gắn lên kiện cho chuột hay phần tử html trang web 1.4.2 Nhược điểm Mọi ngôn ngữ lập trình có khuyết điểm Một phần ngơn ngữ phát triển đến mức độ Javascript, thu hút lượng lớn hacker, scammer người ác tâm ln tìm kiếm lỗ hổng lỗi bảo mật để lợi dụng Một số nhược điểm nhắc đến là:  Dễ bị khai thác  Có thể dùng để thực thi mã độc máy tính người dùng  Nhiều không hỗ trợ trình duyệt  Có thể bị triển khai khác tùy thiết bị dẫn đến việc không đồng 1.5 Giới thiệu thư viện Bootstrap Bootstrap sưu tập miễn phí mã nguồn mở chứa tất mẫu thiết kế dựa HTML CSS với nhiều chức thành phần khác nhau, điều hướng, hệ thống lưới, băng chuyền hình ảnh nút Mặc dù Bootstrap giúp tiết kiệm thời gian nhà phát triển khỏi việc phải quản lý template nhiều lần, mục tiêu tạo responsive website Nó cho phép giao diện người dùng trang web hoạt động tối ưu kích thước hình, điện thoại hình nhỏ máy tính để bàn hình lớn Do nhà phát triển không cần xây dựng trang web dành riêng cho thiết bị bị giới hạn phạm vi đối tượng - Với thuộc tính giao diện quy định sẵn kích thước, màu sắc, độ cao, độ rộng,… bootstrap có file chính:  Bootstrap.css  Bootstrap.js  Glyphicons 1.5.1 Bootstrap.css - Nó Framework CSS có chức quản lý xếp bố cục trang Web HTML có nhiệm vụ quản lý cấu trúc nội dung CSS xử lý bố cục Website Vì mà hai cấu trúc phải tồn để thực hành động cụ thể - Giúp tiết kiệm thời gian code chỉnh thủ công chút tạo giao diện thống nhiều Website mà không bị giới hạn - Hàm CSS khơng giới hạn kiểu văn mà cịn dùng định dạng bảng, bố cục hình cần thời gian để CSS ghi nhớ hết tất khai báo chọn 1.5.2 Bootstrap.js  Đây phần cốt lõi chứa File JavaScript, chịu trách nhiệm cho việc tương tác Website Để tiết kiệm thời gian viết cú pháp JavaScript mà nhiều nhà phát triển sử dụng jQuery Đây thư viện JavaScript mã nguồn mở, đa tảng giúp thêm nhiều chức vào trang Web  jQuery thực số chức như:  Thực yêu cầu Ajax như: loại trừ liệu đến từ vị trí khác cách linh hoạt  Giúp tạo tiện ích sưu tập Plugin JavaScript  jQuery tạo hình động tùy chỉnh thuộc tính CSS 1.5.3 Glyphicons - Trong giao diện trang Web, phần khơng thể thiếu Icons Chúng thường liên kết với liệu định hành động giao diện người dùng - Bootstrap dùng Glyphicons để đáp ứng nhu cầu mở khóa Halflings Glyphicons để người dùng sử dụng miễn phí Tại miễn phí, có giao diện chuẩn phù hợp với chức thiết yếu 1.6 Giới thiệu thư viện hình ảnh Font Awesome - Font Awesome là thư viện chứa font chữ ký hiệu hay sử dụng website Font chữ ký hiệu icons mà ta thường hay sử dụng layout website - Font Awesome xây dựng thành nhiều định dạng file font khác file otf, eot, ttf, woff, svg, - Font Awesome hoạt động hầu hết trình duyệt đại hay Tuy nhiên với phiên cũ IE7 khơng hỗ trợ IE7 coi chết Chương thống Khảo sát phân tích thiết kế hệ 2.1 Đối tượng sử dụng chức - - Trang web thiết kế với giao diện chức dễ nhìn dễ tìm kiếm mục đích khơng để người thường tiếp xúc nhiều với mạng xã hội dùng mà cịn giúp người nơng dân tiếp xúc với mạng xã hội dùng Vì mà giao diện chức dễ nhìn: o Chỉnh sửa thông tin cá nhân: Người dùng sau đăng ký đăng nhập vào trang web chỉnh sửa lại thông tin sau đăng kí tên cập nhật thêm số thơng tin Hình Khảo sát phân tích thiết kế hệ thống-1 Chỉnh sửa/bổ sung thông tin cá nhân - o Đăng bán sản phẩm: Người dùng đăng bán sản phẩm Hình Khảo sát phân tích thiết kế hệ thống-2 Đăng bán sản phẩm - o Quản lý đăng: Tại trang quản lý đăng người dùng thấy mà đăng xố hay chỉnh sửa thơng tin đăng Hình Khảo sát phân tích thiết kế hệ thống-3 Quản lý sản phẩm đăng bán - o Chỉnh sửa đăng: Khi người dùng bấm vào chỉnh sửa lên bảng cho người dùng nhập lại thơng tin sản phẩm Hình Khảo sát phân tích thiết kế hệ thống-4 Chỉnh sửa đăng Chương Triển khai xây dựng 3.1 Giao diện trang web 3.1.1 Giao diện trang chủ 3.1.1.1 Phần header Phần header bao gồm logo, tìm kiếm, nút đăng ký/đăng nhập Hình Triển khai xây dựng -5 Header 3.1.1.2 Phần navigation Phần navigation bao gồm mục điều hướng tới trang: trang chủ, giới thiệu, cửa hàng, tin tức, liên hệ Hình Triển khai xây dựng -6 Navigation 3.1.1.3 Phần body Phần body bao gồm: Banner: có chứa câu slogan nút mua Content Area: có slider/carousel giới thiệu sản phẩm bật trang web link tới hàng để xem sản phẩm người dùng muốn xem chi tiết Phần tin tức hiển thị vài đăng bật công thức chế biến ăn ngon hay đặc sản Footer: phần footer có hiển thị logo trang web địa hotline để liên hệ, đường dẫn liên kết nhanh đến trang, ô nhập email đăng kí nhận thơng báo đường dẫn liên kết đến page web mạng xã hội khác Hình Triển khai xây dựng -7 Body Hình Triển khai xây dựng -8 Body Hình Triển khai xây dựng -9 Body 3.1.1.4 Phần footer Hình Triển khai xây dựng -10 Footer 3.1.2 Giao diện giới thiệu Ở trang giới thiệu có đoạn giới thiệu trang web, carousel giới thiệu số hình ảnh đẹp loại nông sản, thành viên ban quản lý trang web cuối cho người dùng đăng ký Hình Triển khai xây dựng -11 Giới thiệu Hình Triển khai xây dựng -12 Giới thiệu 3.1.3 Giao diện cửa hàng Khi truy cập vào cửa hàng lên sản phẩm bán chạy với có mục truy cập nhanh vào loại thực phẩm muốn mua Hình Triển khai xây dựng -13 Cửa hàng 3.1.4 Giao diện tin tức Khi truy cập vào trang tin tức người dùng thấy đa số viết nút truy cập nhanh vào viết chủ đề bàn luận nút truy cập nhanh vào với loại sản phẩm phía bên phải Hình Triển khai xây dựng -14 Tin tức Hình Triển khai xây dựng -15 Tin tức 3.1.5 Giao diện liên hệ Ở trang liên hệ người dùng thấy rõ thông tin địa liên lạc shop có đồ địa nhóm quản lý phía bên phải Cũng có bảng nhập liệu người dùng ý kiến muốn phản hồi đến trang web Hình Triển khai xây dựng -16 Liên hệ Hình Triển khai xây dựng -17 Liên hệ 3.1.6 Giao diện đăng nhập/ đăng ký Khi bấm vào nút đăng nhập lên bảng đăng nhập nhỏ hình thay phải chuyển người dùng sang trang khác để đăng nhập, người dùng đăng nhập phải nhập đầy đủ thông tin không nhập đầy đủ mà bấm đăng nhập thông báo đỏ yêu cầu người dùng nhập lại Hình Triển khai xây dựng -18 Đăng nhập - Khi bấm vào nút đăng ký lên bảng cho người dùng nhập thông tin mà không chuyển người dùng sang trang khác, người dùng muốn đăng ký phải nhập đầy đủ thơng tin yêu cầu điền không đầy đủ thông báo đỏ yếu cầu người dùng nhập lại Hình Triển khai xây dựng -19 Đăng ký Kết luận Hướng phát triển Kết đạt Trang web có xây dựng chức sau: - Đăng nhập/ Đăng ký - Đăng - Chỉnh sửa Hướng phát triển   Vì trang web với việc vận dụng kiến thức học nên nhiều bất cập xảy ra, đóng góp ý kiến giúp nhóm chúng em dễ dàng việc khắc phục phát triển Tìm hiểu, tiếp tục phát triển thêm chức như: o Tìm kiếm người/ viết o Trị chuyện trực tiếp người mua người bán o Tìm kiếm sản phẩm DANH MỤC TÀI LIỆU THAM KHẢO [1] Tutorialpoint MySQL – Introduction, 26/5/2021, từ < https://www.tutorialspoint.com/mysql/mysql-introduction.htm> [2] Visual Studio Code Getting Started, 26/5/2021, từ [3] MDN Web Docs JavaScript, 26/5/2021, từ [4] MDN Web Docs CSS: Casscading Style Sheets, 26/5/2021, từ