Đang tải... (xem toàn văn)
Bao cao do an css framework bootstrap Bao cao do an css framework bootstrap Bao cao do an css framework bootstrap Bao cao do an css framework bootstrap Bao cao do an css framework bootstrap Bao cao do an css framework bootstrap
TRƯỜNG ĐẠI HỌC PHÚ XUÂN HUẾ KHOA CÔNG NGHỆ - KINH DOANH - - ĐỒ ÁN MÔN HỌC: CSS FRAMEWORK: BOOTSTRAP ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN HÀNG “NÔNG SẢN SẠCH” Sinh viên thực hiện: Trần Văn Nguyên Lớp: CNTT K18A Giảng viên hướng dẫn: Th.s Trần Thị Minh Thảo Xây dựng website bán hàng “Nông sản sạch” Huế - 06/2021 Mục lục LỜI MỞ ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1: Thực trạng vấn đề 1.2 Giới thiệu tổng quan website 1.3 Ngôn ngữ xây dựng website 1.3.1 HTML (Hypertext Markup Language) 1.3.2 CSS (Cascading Style Sheet) 1.3.3 JavaScript (Jquery) 1.3.4 Framework: Boostrap CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ 14 2.1 Xây dựng giao diện website 14 2.1.1 Xây dựng giao diện trang chủ 14 2.1.2 Xây dựng giao diện trang tất sản phẩm .18 2.1.3 Xây dựng giao diện trang sản phẩm chi tiết 19 2.1.4 Xây dựng giao diện trang toán .20 2.2 Responsive cho website 21 2.3 Xử lí JavaScrip (Jquery) .22 CHƯƠNG 3: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI 26 3.1 Những điểm website làm 26 3.2 Những điểm website chưa làm .26 3.3 Ứng dụng 26 3.4 Kết luận 27 TÀI LIỆU THAM KHẢO 28 PHỤ LỤC 29 Chương trình minh họa “Tạo khối hình ellipse với clip-path” 29 CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” LỜI MỞ ĐẦU Ngày 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, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Việc xây dựng trang web để phục vụ cho nhu cầu riêng tổ chức, cơng ty chí cá nhân, ngày nay, khơng lấy làm xa lạ Với vài thao tác đơn giản, người trở thành chủ website giới thiệu quan tâm: website giới thiệu thân gia đình anh ta, website trình bày sưu tập hình ảnh địa điểm thích chẳng hạn Đối với phủ cơng ty việc xây dựng website riêng ngày trở nên cấp thiết Thông qua website này, thông tin họ công văn, thông báo, định phủ hay sản phẩm, dịch vụ công ty đến với người quan tâm, đến với khách hàng họ cách nhanh chóng kịp thời, tránh phiền hà mà phương thức giao tiếp truyền thống thường gặp phải Hoạt động cửa hàng có quy mơ lớn tăng cường mở rộng xây dựng website tốt Bắt nguồn với ý tưởng này, với gợi ý cô Trần Thị Minh Thảo, em thực đồ án “XÂY DỰNG WEBSITE BÁN HÀNG NÔNG SẢN SẠCH” nội dung trình bày sau Trong báo cáo này, em tập trung trình bày nội dung sau: - Lời mở đầu - Chương 1: Cơ sở lí thuyết Thực trạng vấn đề Giới thiệu tổng quan website Ngôn ngữ xây dựng website - Chương 2: Phân tích thiết kế Xây dựng giao diện website Responsive CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” Javascrip (Jquery) - Chương 3: Kết luận hướng phát triển đề tài - Tài liệu tham khảo Do lần đầu tiếp cận với đề tài mẻ rộng lớn nên làm nhiều hạn chế thiếu sót, mong q thầy bạn có góp ý để e hoàn thiện đề tài tốt Em xin chân thành cám ơn cô Trần Thị Minh Thảo hướng dẫn giúp em thực đề tài suốt trình qua CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1: Thực trạng vấn đề Trong hoạt động sản xuất kinh doanh, đây, thương mại điện tử khẳng định vai trò thúc tiến thúc đẩy phát triển doanh nghiệp Đối với cửa hàng, việc quảng bá giới thiệu đến khách hàng mặt hàng hấp dẫn mình, đồng thời để tiện lợi cho q trình tốn online, mang yếu tố định đến tồn phát triển cửa hàng Vì thật thiếu sót cửa hàng chưa xây dựng website để giới thiệu rộng rãi mặt hàng hấp dẫn, chương trình khuyến mãi,các phương thức toán tiện lợi, tạo cho khách hàng cảm giác thoải mái trình tương tác website Với nhu cầu trên, thông qua đồ án này, tơi xin trình bày cách thức xây dựng website bán hàng “Nông sản sạch” để giúp cửa hàng thuận tiện việc quản lí sản phẩm khách hàng 1.2 Giới thiệu tổng quan website Một website phải có giao diện rõ ràng, bắt mắt cấu trúc hợp lí để gây ấn tượng tốt ban đầu với người xem, nội dung website phải tiện dụng, đầy đủ, đáp ứng nhu cầu thường gặp khách hàng Trên website bán hàng phải có đầy đủ mặt hàng cửa hàng, chương trình khuyến hấp dẫn, cách thức toán thơng tin, sách cửa hàng mang lại 1.3 Ngôn ngữ xây dựng website 1.3.1 HTML (Hypertext Markup Language) HTML chữ viết tắt Hypertext Markup Language, khơng phải ngơn ngữ lập trình mà là ngơn ngữ markup Nó giúp người dùng tạo cấu trúc CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” thành phần trang web ứng dụng, phân chia đoạn văn, heading, links, blockquotes, vâng 1.3.2 CSS (Cascading Style Sheet) CSS ngôn ngữ tạo phong cách cho trang web, viết tắt từ “Cascading Style Sheet” dùng để tạo phong cách định kiểu cho yếu tố viết dạng ngôn ngữ đánh dấu, HTMLCSS có nhiều thuộc tính HTML Do đó, sử dụng CSS giúp bạn tạo tạo webpage đẹp nhiều so sánh với việc sử dụng thẻ thuộc tính HTML *Responsive Web Design Responsive Web Design (Thiết kế website tương thích di động) cách thức bạn xây dựng website đáp ứng thiết bị kích thước khung hình khác nhau, không cần biết khung lớn, nhỏ hay máy tính (desktop) Với cách thức này, trải nghiệm người dùng thiết bị tăng rõ rệt Chẳng hạn, khung hình điện thoại, thứ hiển thị rõ ràng, đầy đủ tinh tế 1.3.3 JavaScript (Jquery) JavaScript ngôn ngữ lập trình HTML WEB Nó nhẹ sử dụng phổ biến phần trang web, mà thi hành chúng cho phép Client-Side script tương tác với người sử dụng tạo trang web động Nó ngơn ngữ chương trình thơng dịch với khả hướng đối tượng *Thư viện Jquery: jQuery thư viện kiểu JavaScript, tạo John Resig vào năm 2006 jQuery làm đơn giản hóa việc truyền tải HTML, xử lý kiện, tạo hiệu ứng động tương tác Ajax Với jQuery, khái niệm Rapid Web Development khơng cịn q xa lạ 1.3.4 Framework: Boostrap Bootstrap framework bao gồm HTML, CSS JavaScript template dùng để phát triển website chuẩn responsive CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” Bootstrap sưu tập miễn phí mã nguồn mở cơng cụ dùng để tạo mẫu webiste hoà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 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ó typography, forms, buttons, tables, grids, navigation, image carousels… * 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ể - 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 - 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 * Cách nhúng Bootstrap vào HTML (có cách) : - Tải trực tiếp từ trang cung cấp Bootstrap : Ta tải Bootstrap từ trang chủ https://getbootstrap.com/ Sau tải về, ta nhận cấu trúc gồm thư mục JS, CSS, link vào file HTML để sử dụng - Sử dụng Bootstrap từ CDN: Nếu không muốn tải xuống, ta nhúng bootstrap thơng qua CDN (Content Delivery Network ) CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” * Sử dụng Bootstrap: Bootstrap thiết kế để tương thích với hầu hết thiết bị có kích thước hình khác nhau, hay cịn gọi RWD viết tắt từ “Responsive Web Design” Để đảm bảo hiển thị thu phóng khung website linh hoạt với khung browser, ta thêm thẻ sau vào bên phần tử : + Breakpoint: khối thiết kế đáp ứng, chúng sử dụng để kiểm sốt bố cục bạn đến kích thước hình thiết bị cụ thể + Containers: phần tử bố cục Bootstrap, sử dụng để làm thùng chứa nội dung bên trong, thường kèm với loại khác nhau: CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” 10 + Bootstrap Grid System: mấu chốt cho khả tương thích giao diện (web responsive) bootstrap, giao diện hiển thị dạng lưới (Grid), chia thành 12 collumn đặt class row Trong collumn bao gồm padding tương ứng với độ phân giải thiết bị (điện thoại, tablet, máy tính) + Màu sắc: Màu sắc Bootstrap thể qua class thơng dụng “primary”, “success” , ví dụ cho chữ màu xanh da trời ta sử dụng class “text-primary”, màu đỏ ta sử dụng class “bg-danger” CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nơng sản sạch” 17 Ngồi cịn có khối #modal sử dụng class modal Bootstrap thể form đăng nhập, đăng kí giỏ hàng trang web, #callnow, #messenger #noti có thuộc tính fixed chỉnh gần bottom nhầm tương tác với khách hàng, giúp khách hàng liên lạc với cửa hàng cách thuận tiện CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” 18 2.1.2 Xây dựng giao diện trang tất sản phẩm Trang tất sản phẩm thiết kế dựa vào trang chủ, giữ nguyên phần #header, #footer, phần content thêm component pagination bootstrap 2.1.3 Xây dựng giao diện trang sản phẩm chi tiết CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” 19 Trang sản phẩm chi tiết thể thông tin đầy đủ sản phẩm đánh giá người dùng khác, phần content có sử dụng form boostrap với class checkbox, radio section CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên Xây dựng website bán hàng “Nông sản sạch” 20 2.1.4 Xây dựng giao diện trang toán Trang toán thể cách thức toán sản phẩm, sử dụng component table boostrap form liên kết với trang khác qua nút “đặt hàng” Ngoài ra, cịn có trang giới thiệu liên hệ liên kết với trang chủ để khách hàng dễ dàng nắm rõ thông tin cửa hàng CSS framework: Bootstrap CNTT K18A Trần Văn Nguyên