báo cáo đề tài hệ thống công nghệ web báo cáo đề tài hệ thống công nghệ web ĐỀ TÀI Website giới thiệu, bán đồng hồ trực tuyến,Dựng giao diện là công việc của lập trình viên. Họ sử dụng sử dụng các đoạn mã HTML, Javascript, CSS để tạo một giao diện cho trang web
BÁO CÁO ĐỀ TÀI HỆ THỐNG CÔNG NGHỆ WEB ĐỀ TÀI: Website giới thiệu, bán đồng hồ trực tuyến NGÀY ĐĂNG KÝ: 09/08/2022 NGÀY NỘP: 28/10/2022 GIÁO VIÊN HƯỚNG DẪN: NHÓM THỰC HIỆN: NHÓM NHẬN XÉT CHƯƠNG GIỚI THIỆU ĐỀ TÀI Nhằm phục vụ, tiếp cận tổng hợp đầy đủ kiến thức học từ môn Hệ thống Công nghệ Web truyền đạt từ giảng viên Chúng thiết kế “Website giới thiệu, bán đồng hồ trực tuyến” nhằm phục vụ cho việc học tập tích hợp kiến thức môn học 1.1 a - - - Mục đích Tổng quan website thu cầu thực tế tạo website • Tổng quan website: Thành viên: thành viên tham gia thực Tên Website: Thiết kế “Website giới thiệu, bán đồng hồ trực tuyến” Mục tiêu: Web thiết kế nhằm tổng hợp tất kiến thức học thời gian qua, cố nâng cao kiến thức, ngồi học từ giảng viên giảng dạy, cịn tự học thêm từ trang W3school, nhằm có kinh nghiệm để xử lý trường hợp, tình có trải nghiệm q trình học tập, hợp tác Nhằm nâng cao kỹ xử lý thân, học hỏi từ để có thêm kiến thức bổ ích có kỹ cho việc xử lý, ứng xử tốt trường hợp thi cuối kì tới lấy kinh nghiệm cho môn bổ trợ cho việc làm sau Mục đích: Nhằm cải thiện tích lũy kiến thức học được, thiết kế thành website lấy tiêu chí học hỏi kiến thức từ nhau, hỗ trợ, bổ sung, chỉnh sửa cịn thiếu sót cho Nâng cao kỹ năng, kinh nghiệm từ Xây dựng hoàn chỉnh website để phục vụ khách hàng cách tối ưu tiện lợi Trang web “Website giới thiệu, bán đồng hồ trực tuyến” thiết kế thời gian học, trình bày thiết kế với kiến thức học hỏi tốt để hồn thành tốt mơn học Thời gian: 30/08/2022 – 28/10/2022 Website thiết kế nhằm phục vụ cho việc bán đồng hồ hình thức trực tuyến, nhanh chóng, tiện lợi, tiết kiệm thời gian, hạn chế tối ưu sai sót trình đặt hàng, hình ảnh sản phẩm chân thực, đáng tin cậy, thông tin sản phẩm rõ ràng, tính xác cao Có ưu đãi cho khách - hàng quen, giao hàng khu vực, bảo vệ uy tín nâng cao chất lượng phục vụ cửa hàng dành cho khách hàng Website thiết kế tham khảo dựa tên trang web bán hàng trực tuyến NHÓM Website nhằm cung cấp sản phẩm thiết thực, đáp ứng yêu cầu thực tế khách hàng • Nhu cầu thực tế cho việc tạo website: Hiện đồng hồ trang sức, đồ dùng khơng thể thiếu người.Chính thiết bị đồ hồ trang sức cho nam , nữ ,đồng hồ treo tương có nhiều mẫu mã , kiểu dáng đa dạng với nhiều màu sắc kích cỡ khác nhau.Việc mua bán mặt hàng qua trang mạng online trở nên phổ biến.Thế nên việc thiết kế trang web phục vụ cho việc bán đồng hồ chắn bước đầu tư tiềm phát triển có triển vọng cao Vậy nên chúng em lặp trang web nhầm hướng đến khách hàng cần tiện lợi thơng qua trang web dễ dàng tìm kiếm sản phẩm phù hợp với nhu cầu sử dụng khách hàng đáp ứng nhu cầu việc tư vấn, bảo trì sản phẩm khách hàng, mang đến trải nghiệm tuyệt vời sản phẩm đồng hồ, chủ trang web có lợi nhuận từ việc kinh doanh có thêm tảng việc quản lý trì trang mạng xã hội có tính lợi nhuận b Mục đích chung Website đối tượng sử dụng (user, admin) User: - Chức tốn tiền trực tiếp web thơng qua thẻ ngân hàng ví điện tử, mà khơng cần trả tiền mặt Có nhiều lựa chọn việc chọn mua sản phẩm Có thể tham khảo, xem hình ảnh, giá cả, lựa chọn sản phẩm phù hợp với túi tiền Có thể đổi trả sản phẩm lỗi trình vận chuyển hay vấn đề ngồi ý muốn Có sách bảo hành, cam kết uy tín với khách hàng Đăng ký tài khoản để trở thành khách hàng thân quen cửa hàng, để ưu đãi hấp dẫn Thông tin sản phẩm cung cấp đầy đủ giúp khách hàng lựa chọn sản phẩm thích hợp - - Khách hàng liên hệ trực tiếp với khách hàng thơng qua website cửa hàng thơng qua số điện thoại ghim web Có số hướng dẫn dành cho khách hàng “Hướng dẫn mua hàng”, “Chính sách đổi trả”, “Chính sách bảo hành”, “Các điều khoản sử dụng website” Có chức tìm kiếm sản phẩm website tiện lợi, dễ dàng, tiết kiệm thời gian cho khách hàng Có dịch vụ chăm sóc khách hàng: “Miễn phí chuyển” (Giao hàng tồn quốc), “Miễn phí lắp đặt” (Lắp đặt tận nơi), “Hoàn tiền 100%” (Đổi trả hàng ngày), “Cam kết” (Giá rẻ thị trường) Chức thêm vào giỏ hàng để tiện cho khách hàng xem lại sản phẩm mua sau Chức đặt hàng sau lựa chọn sản phẩm web Admin: - Cần cung cấp thông tin sản phẩm đầy đủ, xác cho khách hàng Nâng cao chất lượng phục vụ khách hàng (chat, trao đổi trực tiếp với khách hàng thông qua số hotline trao đổi trực tiếp web) Dễ dàng tiếp cận thị trường, ln tư đổi Chính sách “Tuyển dụng” có nhu cầu tuyển với đầy đủ yêu cầu cửa hàng đưa “Chính sách bảo mật” bảo mật thông tin khách hàng, sản phẩm hãng, dịch vụ chuyên nghiệp tận tâm Sản phẩm phải uy tín, chất lượng, giải đơn đặt hàng khách hàng nhanh chóng, miễn phí giao hàng khu vực Xây dựng hình ảnh tốt, uy tín, đáng tin cậy để khách hàng đến ủng hộ lâu dài 1.2 Cơ sở lý thuyết thông tin kỹ thuật: Các kiến thức lý thuyết vận dụng cho việc thực website Có phương thức để thiết kế Web là: thiết kế Web tĩnh thiết kế Web động Thiết kế Web tĩnh: a - Thiết kế web tĩnh bao gồm phần công việc, bao gồm: thiết kế (design), dựng giao diện (cắt html) Trong đó: Dựng giao diện cơng việc lập trình viên Họ sử dụng sử dụng đoạn mã HTML, Javascript, CSS để tạo giao diện cho trang web Sau dựng xong giao diện html bạn website bình thường, chưa hoạt động Tức phần giao diện có khả ghi nhận kiện click, chuyển trang, số hiệu ứng… Tuy nhiên web chưa có khả lưu trữ truy xuất liệu (Đăng kí, mua hàng, tìm kiếm liệu…) Thiết kế web động thiết kế phần xử lý liệu phía sau website (back end) Có nghĩa web động web có đầy đủ sở liệu, có khả sử lý, lưu trữ liệu tự động web động cho phép dễ dàng cập nhật nội dung, tiện ích, quản lý phân tích liệu khách hàng… HTML HTML hay HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản, ngôn ngữ sử dụng cho tài liệu web Chức HTML xây dựng cấu trúc siêu văn website, khai báo tập tin kỹ thuật số (media) hình ảnh, video, nhạc HTML thường dùng để phân chia đoạn văn, heading, links, blockquotes… Với HTML, bạn có thể: b - - - Thêm tiêu đề, định dạng đoạn văn, ngắt dòng điều khiển Tạo danh sách, nhấn mạnh văn bản, tạo ký tự đặc biệt, chèn hình ảnh, tạo liên kết Xây dựng bảng, điều khiển số kiểu mẫu Ưu điểm: Ngôn ngữ sử dụng rộng rãi với nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng vô lớn đằng sau Có thể hoạt động mượt mà hầu hết trình duyệt hành Quá trình học HTML đơn giản Mã nguồn mở hồn tồn miễn phí Các Markup sử dụng HTML thường ngắn gọn đồng Chuẩn web vận hành World Wide Web Consortium (W3C) Dễ dàng tích hợp với ngơn ngữ backend PHP, Node.js, - Nhược điểm: Ngôn ngữ áp dụng chủ yếu cho trang web tĩnh Đối với tính động, bạn cần sử dụng JavaScript ngôn ngữ backend bên thứ ví dụ PHP Người dùng phải tạo trang web riêng lẻ cho HTML, phần tử giống Một số trình duyệt chấp nhận tính cách chậm chạp Đơi trình duyệt cũ khơng phải lúc hiển thị thẻ CSS CSS viết tắt cụm từ “Cascading Style Sheets”, tạm dịch: ngôn ngữ tạo phong cách cho trang web Ngôn ngữ lập trình quy định cách thành phần HTML trang web thực xuất frontend Có loại style CSS chính: c - - - Style CSS Internal: style tải lên trang web refresh Style CSS Inline: bạn chỉnh sửa yếu tố mà khơng cần truy cập trực tiếp vào file CSS External style: bạn tạo phong cách file khác áp dụng CSS vào trang bạn muốn External style cải thiện thời gian tải trang nhiều Vai trò: Tạo phong cách định kiểu cho yếu tố viết dạng ngôn ngữ đánh dấu, HTML Tiết kiệm công sức lập trình viên nhờ điều khiển định dạng nhiều trang web Phân biệt cách hiển thị trang web với nội dung trang cách điều khiển bố cục, màu sắc font chữ Ưu điểm: Tiết kiệm thời gian, công sức việc code web/ xây dựng giao diện; kiểm soát dễ dàng lỗi khơng đáng có web - CSS cung cấp nhiều thuộc tính cụ thể HTML giúp tạo nhiều style khác áp dụng cho nhiều web CSS giúp tốc độ load trang web nhanh chóng hơn, dễ dàng bảo trì, tương thích với thiết bị di động CSS thiết lập nhiều kiểu chữ khác giúp website bạn trở nên khác biệt hơn; tự động xếp chữ chèn hình ảnh (thuộc tính shapeoutsite); đặt nội dung theo chiều khác nhau/ thay đổi chế độ viết theo mong muốn (thuộc tính write-mode); tạo chữ lớn đầu dịng (thuộc tính first-letter)… Hạn chế: CSS có nhiều cấp độ, dễ gây nhầm lẫn cho người dùng mới, am hiểu lập trình Với trình duyệt khác nhau, CSS hoạt động khác JavaScript Thường viết tắt “JS”, JavaScript ngôn ngữ lập trình Brendan Eich (đồng sáng lập dự án Mozilla, quỹ Mozilla tập đoàn Mozilla) cho mắt vào năm 1995 với tên LiveScript JS có tác dụng giúp chuyển website từ trạng thái tĩnh sang động, tạo tương tác để cải thiện hiệu suất máy chủ nâng cao trải nghiệm người dùng Hiểu đơn giản, JavaScript ngôn ngữ sử dụng rộng rãi kết hợp với HTML/CSS để thiết kế web động Vai trò: d - - Dễ dàng bắt đầu với bước nhỏ, với thư viện ảnh, bố cục có tính thay đổi … nhờ linh hoạt JavaScript Có thể tạo trò chơi, hoạt họa 2D 3D, ứng dụng sở liệu toàn diện Tăng cường hành vi kiểm soát mặc định trình duyệt Ưu điểm: Ít tương tác với máy chủ – Bạn xác thực đầu vào người dùng trước gửi trang đến máy chủ Điều giúp tiết kiệm lưu lượng máy chủ, có nghĩa tải máy chủ bạn - Phản hồi cho khách truy cập – Họ đợi tải lại trang để xem họ có qn nhập nội dung khơng Tăng tính tương tác – Bạn tạo giao diện phản ứng người dùng di chuột qua chúng kích hoạt chúng thơng qua bàn phím Giao diện phong phú – Bạn sử dụng JavaScript để bao gồm mục thành phần kéo thả để trượt Giao diện phong phú cho khách truy cập trang web bạn Nhược điểm: Js phía máy khách khơng cho phép đọc ghi tệp Điều giữ lý an ninh Js sử dụng cho ứng dụng mạng khơng có hỗ trợ Js khơng có khả đa luồng đa xử lý e Bootstrap - Bootstrap thư viện giúp tạo trang web nhanh dễ dàng - Thư viện tạo sẵn code HTML, CSS Javascript để tạo thành phần giao diện thường dùng , giúp giảm nhiều thời gian tạo nên trang web hoàn chỉnh - Được Mark Otto Jacob Thornton phát triển Twitter năm 2010 - Bootstrap chạy client (trong trình duyệt web) , không chạy server Ưu điểm: Giúp giảm nhiều thời gian viết code html cung cấp sẵn code mẫu để chèn vào trang web Giúp tiết kiệm nhiều thời gian định dạng css cung cấp nhiều class css để dùng Có sẵn code javascript để tạo hiệu ứng trang, giúp giảm thời gian viết code javascript cho chức Bootstrap tổ chức hình thành hệ thống lưới (Grid System) 12 cột, giúp bạn dễ tổ chức giao diện trang web theo ý Bootstrap hỗ trợ thực responsive cho trang , phù hợp với loại thiết bị smartphone, tablet, desktop, … Nhược điểm: Tính phổ biến Sản phẩm nặng, tốc độ tối ưu chưa cao Chưa hồn thiện Q nhiều code thừa Bootstrap khơng khuyến khích sáng tạo Thư viện sử dụng (jQuery), nguồn gốc Thư viện sử dụng (jQuery) f jQuery thư viện mã nguồn mở có nguồn gốc từ JavaScript, xem thư viện bật triển khai rộng rãi lập trình web Trước 99% website giới sử dụng thư viện Trong thư viện jQuery có tích hợp nhiều module khác Từ module hiệu ứng module truy vấn selector Một số module kể đến như: Ajax, Attributes, Effect, Event, Form, DOM, Selector jQuery giúp xây dựng chức JavaScript cách nhanh chóng, dễ dàng giàu tính hơn, đồng thời có khả hoạt động tốt nhiều loại trình duyệt khác Một đối thủ cạnh tranh jQuery JS Framework Lịch sử đời: jQuery đời vào tháng năm 2006, phát hành John Resig BarCamp NYC Sau trì phát triển nhóm nhà phát triển Google đứng đầu Timmy Wilson jQuery tạo với phương châm ý nghĩa: Write less – more (Viết – làm nhiều hơn) Các tính bật: Vơ gọn nhẹ: kích cỡ thư viện cỡ khoảng 19KB (gzipped) Tương thích đa tảng: jQuery có khả tự động sửa lỗi hoạt động hầu hết trình duyệt phổ biến như: Chrome, Firefox, Safari, MS Edge, IE, Android iOS Hỗ trợ tạo Ajax cách dễ dàng: Nhờ có thư viện này, code viết Ajax tương tác với server cách dễ dàng tự động cập nhật nội dung mà không cần phải tải lại trang Hỗ trợ xử lý nhanh thao tác DOM: Các phần tử DOM lựa chọn duyệt cách dễ dàng nhờ hỗ trợ jQuery Đồng thời nội dung chúng chỉnh sửa cách sử dụng Selector mã nguồn jQuery giúp tạo hiệu ứng dễ dàng hơn: Hỗ trợ tạo hiệu ứng động website dễ dàng nhanh chóng Giúp xử lý kiện tốt hơn: tương tác website người dùng dễ dàng nhờ vào nguyên lý kiện mà ảnh hưởng đến HTML code không bị trộn lẫn với Event Handler Luôn cập nhật: jQuery ln dẫn đầu lĩnh vực mình, ln cập nhật phiên hỗ trợ công nghệ tiên tiến CHƯƠNG XÂY DỰNG ỨNG DỤNG 2.1.1 Trang đăng nhập 2.1.2 Trang đăng ký 2.1.3 Trang liên hệ 2.1.3 Trang chủ 2.1.4 Trang menu (Đồng Hồ Nam) 2.1.5 CHƯƠNG 3.1 Trang thông tin sản phẩm KẾT LUẬN – HƯỚNG PHÁT TRIỂN Kết đạt User: - Có nhiều lựa chọn việc chọn mua sản phẩm Có thể tham khảo, xem hình ảnh, giá cả, lựa chọn sản phẩm phù hợp với túi tiền Có thể đổi trả sản phẩm lỗi q trình vận chuyển hay vấn đề ngồi ý muốn Có sách bảo hành, cam kết uy tín với khách hàng Đăng ký tài khoản để trở thành khách hàng thân quen cửa hàng, để ưu đãi hấp dẫn Thông tin sản phẩm cung cấp đầy đủ giúp khách hàng lựa chọn sản phẩm thích hợp Khách hàng liên hệ trực tiếp với khách hàng thơng qua website cửa hàng thông qua số điện thoại ghim web Chức thêm vào giỏ hàng để tiện cho khách hàng xem lại sản phẩm mua sau Admin: - Cung cấp đầy đủ thông tin sản phẩm, xác cho khách hàng “Chính sách bảo mật” bảo mật thơng tin khách hàng, sản phẩm hãng, dịch vụ chuyên nghiệp tận tâm Sản phẩm phải uy tín, chất lượng, giải đơn đặt hàng khách hàng nhanh chóng, miễn phí giao hàng khu vực Xây dựng hình ảnh tốt, uy tín, đáng tin cậy để khách hàng đến ủng hộ lâu dài Có sách ưu đãi đối, giảm phần trăm khách hàng thân quen, giảm phần trăm khách hàng mua số lượng sản phẩm cao Khách hàng mua phải để lại thông tin, số điện thoại, địa để cửa hàng giao hàng cho quý khách 3.2 - Hạn chế ứng dụng web Chỉ web tĩnh, chưa có liệu Cịn số chức chưa hồn thành tìm kiếm sản phẩm, tốn tiền Khơng chat, trao đổi trực tiếp trang Chức thêm vào giỏ hàng số lượng sản phẩm, không thông tin sản phẩm thêm vào giỏ 3.3 Hướng phát triển - Nếu có thêm thời gian, lượng kiến thức vững chắc, chúng tơi hồn thiện website thêm chức tìm kiếm, tính tiền Thêm sách ưu đãi cho khách hàng - Về sản phẩm: Phát triển đa dạng hóa sản phẩm Ưu tiên cho việc phát triển sản phẩm truyền thống khẳng định thị trường sản phẩm có tính cơng nghệ, kỹ thuật cao Nghiên cứu phát triển sản phẩm mới, đặc biệt sản phẩm mà cửa hàng có tiềm lợi - CHƯƠNG 4.1 TÀI LIỆU THAM KHẢO Website Tên website tham khảo Nguồn W3school https://www.w3school.com jQuery validation https://jqueryvalidation.org/documentation jQuery easing http://gsgd.co.uk/sandbox/jquery/easing VFUN Audio https://vfun.vn ... cho khách - hàng quen, giao hàng khu vực, bảo vệ uy tín nâng cao chất lượng phục vụ cửa hàng dành cho khách hàng Website thiết kế tham khảo dựa tên trang web bán hàng trực tuyến NHÓM Website nhằm... a - - - Mục đích Tổng quan website thu cầu thực tế tạo website • Tổng quan website: Thành viên: thành viên tham gia thực Tên Website: Thiết kế ? ?Website giới thiệu, bán đồng hồ trực tuyến” Mục... vấn đề ngồi ý muốn Có sách bảo hành, cam kết uy tín với khách hàng Đăng ký tài khoản để trở thành khách hàng thân quen cửa hàng, để ưu đãi hấp dẫn Thông tin sản phẩm cung cấp đầy đủ giúp khách hàng