Đang tải... (xem toàn văn)
bao quanh cung cấp thông tin văn tài liệu bao gồm thẻ khác làm phần tử phụ Các trình duyệt khơng hiển thị thẻ HTML, sử dụng chúng để diễn giải nội dung trang Hiện nay, phiên HTML HTML5 với nhiều tính ưu việt so với phiên cũ HTML cải tiến nhiều đặc biệt hỗ trợ mạnh mẽ phần tử multimedia mà không cần plugin HTML5 mạnh mẽ nhiều khơng tốc độ độ thích ứng cao mà khả hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) DOM (Document Object Model – đối tượng thao tác văn bản) 1.1.2 Ngôn ngữ CSS CSS (Cascading Style Sheets) ngôn ngữ định kiểu sử dụng để mô tả trình bày tài liệu viết HTML XML (bao gồm phương thức XML SVG, MathML XHTML) CSS mô tả phần tử hiển thị hình, giấy, lời nói phương tiện khác CSS ngôn ngữ cốt lõi web mở chuẩn hóa trình duyệt Web theo thông số kỹ thuật W3C Trước đây, việc phát triển phần khác đặc tả CSS thực đồng bộ, cho phép tạo phiên cho đề xuất CSS sử dụng để tạo kiểu bố cục trang web – ví dụ: để thay đổi phơng chữ, màu sắc, kích thước khoảng cách nội dung, chia thành nhiều cột thêm hoạt ảnh tính khác CSS sử dụng viết trực tiếp xen lẫn vào mã HTML tham chiếu từ file css riêng biệt Hiện CSS thường viết riêng thành tập tin với mở rộng “.css” Chính mà trang web có sử dụng CSS mã HTML trở nên ngắn gọn Ngồi sử dụng tập tin CSS cho nhiều website tiết kiệm nhiều thời gian công sức Một đặc điểm quan trọng tính kế thừa CSS giảm số lượng dòng code mà đạt yêu cầu Tuy nhiên, CSS trình duyệt hiểu theo kiểu riêng Do vậy, việc trình bày nội dung trình duyệt khác không thống CSS cung cấp hàng trăm thuộc tính trình bày dành cho đối tượng với sáng tạo cao việc kết hợp thuộc tính giúp mang lại nhiều hiệu 1.2 Một số thư viện hỗ trợ 1.2.1 Thư viện Javascript JavaScript ngơn ngữ lập trình động sử dụng để phát triển web, ứng dụng web, để phát triển trị chơi, v.v Nó cho phép triển khai tính động trang web khơng thể thực với HTML CSS Javascript tích hợp nhúng HTML giúp cho website trở nên sống động Đây dạng ngôn ngữ theo kịch bản, hình thành dựa đối tượng phát triển có sẵn đơn giản tự định nghĩa Javascript cho phép bạn kiểm soát hành vi trang web tốt so với việc sử dụng HTML Có thể kể đến vài ứng dụng thực tiễn quen thuộc Javascript slideshow, pop-up quảng cáo hay tính autocomplete Google, … chúng viết ngôn ngữ Javascript JavaScript, theo phiên hành, một ngôn ngữ lập trình thơng dịch được phát triển từ ý niệm ngun mẫu Ngôn ngữ dùng rộng rãi cho các trang web (phía người dùng) phía máy chủ (với Node.js) Giống Java, JavaScript có cú pháp tương tự ngơn ngữ lập trình C “.js” phần mở rộng thường dùng cho tập tin mã nguồn JavaScript 1.2.2 Thư viện Ajax Ajax viết tắt “Asynchronous JavaScript and XML” tập hợp kỹ thuật phát triển web khác phía máy khách để tạo ứng dụng web không đồng Với Ajax, ứng dụng web gửi truy xuất liệu từ máy chủ cách không đồng (ở chế độ nền) mà không can thiệp vào việc hiển thị hoạt động trang có Bằng cách tách lớp trao đổi liệu khỏi lớp trình bày, Ajax cho phép trang web theo phần mở rộng, ứng dụng web, thay đổi nội dung động mà không cần tải lại toàn trang Trong thực tế, triển khai đại thường sử dụng JSON thay XML Ajax kỹ thuật phát triển web có tính tương tác cao cách kết hợp ngôn ngữ: - HTML/XHTML làm ngơn ngữ CSS để tạo phong cách The Document Object Model (DOM) để hiển thị liệu động tạo tương tác XML để trao đổi liệu nội XSLT để xử lý Nhiều lập trình viên thay bằng JSON vì gần với JavaScript hơn XMLHttpRequest object để giao tiếp bất đồng Cuối cùng, JavaScript là ngôn ngữ lập trình để kết nối tồn cơng nghệ lại 1.2.3 Thư viện Jquery Jquery là thư viện được viết từ JavaScript, Jquery giúp xây dựng chức Javascript dễ dàng, nhanh giàu tính hơn. Jquery được tích hợp nhiều module khác Từ module hiệu ứng module truy vấn selector. Jquery được sử dụng đến 99% tổng số website giới Cú pháp Jquery thiết kế để giúp điều hướng tài liệu, chọn phần tử DOM, tạo hoạt ảnh, xử lý kiện phát triển ứng dụng Ajax dễ dàng Thư viện Jquery cung cấp cú pháp đơn giản để thêm trình xử lý kiện vào DOM JavaScript, thay thêm thuộc tính kiện HTML để gọi hàm JavaScript Do đó, khuyến khích nhà phát triển tách hoàn toàn mã JavaScript khỏi đánh dấu HTML Jquery thúc đẩy ngắn gọn rõ ràng với tính hàm "có thể đọc được" tên hàm viết tắt Cơng cụ JavaScript trình duyệt khác khác nên mã JavaScript hoạt động cho trình duyệt khơng hoạt động cho trình duyệt khác Giống cơng cụ JavaScript khác, Jquery xử lý tất điểm khơng qn trình duyệt cung cấp giao diện quán hoạt động trình duyệt khác Có thể dễ dàng thêm kiện, phần tử phương thức sau sử dụng lại plugin Jquery bao gồm tính sau: - Lựa chọn phần tử DOM cách sử dụng công cụ chọn mã nguồn mở đa trình duyệt Sizzle, sản phẩm phụ dự án Jquery Thao tác DOM dựa chọn CSS sử dụng tên thuộc tính phần tử, chẳng hạn id lớp, làm tiêu chí để chọn nút DOM Sự kiện Hiệu ứng hình ảnh động Ajax Đối tượng Deferred Promise để kiểm sốt q trình xử lý khơng đồng Phân tích cú pháp JSON Khả mở rộng thơng qua trình cắm thêm Các tiện ích, chẳng hạn phát tính - - Các phương thức tương thích vốn có sẵn trình duyệt đại, cần dự phịng cho trình duyệt cũ hơn, chẳng hạn Jquery.inArray () Jquery.each () Hỗ trợ nhiều trình duyệt 1.2.4 Thư viện Bootstrap Bootstrap khn khổ CSS mã nguồn mở miễn phí hướng đến phát triển web front-end đáp ứng thiết bị di động Nó chứa mẫu thiết kế dựa CSS (tùy chọn) JavaScript cho kiểu chữ, biểu mẫu, nút, điều hướng thành phần giao diện khác Bootstrap Thư viện HTML, CSS & JS tập trung vào việc đơn giản hóa việc phát triển trang web thông tin (trái ngược với ứng dụng web) Mục đích việc thêm vào dự án web áp dụng lựa chọn màu sắc, kích thước, phơng chữ bố cục Bootstrap cho dự án Thiết kế đáp ứng giúp trang web ứng dụng phát kích thước hướng hình khách truy cập tự động điều chỉnh hình cho phù hợp; phương pháp tiếp cận dành cho thiết bị di động giả định điện thoại thông minh, máy tính bảng ứng dụng dành cho thiết bị di động dành riêng cho tác vụ cơng cụ nhân viên để hồn thành cơng việc giải u cầu cơng nghệ thiết kế Ưu điểm Bootstrap - - - Tiết kiệm thời gian: Bootstrap giúp người thiết kế giao diện website tiết kiệm nhiều thời gian Các thư viện Bootstrap có đoạn mã sẵn sàng cho bạn áp dùng vào website Bạn khơng phải tốn q nhiều thời gian để tự viết code cho giao diện Tùy biến cao: Bạn hồn tồn dựa vào Bootstrap phát triển tảng giao diện Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12 bột độ rộng 940px Bạn thay đổi, nâng cấp phát triển dựa tảng Responsive Web Design: Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hết Đây xu hướng phát triển giao diện website ưa chuộng giới 1.2.5 Thư viện Java Spring Boot Spring Boot khung công tác dựa Java mã nguồn mở sử dụng để tạo dịch vụ vi mơ Nó phát triển Pivotal Team sử dụng để xây dựng ứng dụng Spring độc lập sẵn sàng sản xuất Spring Boot cung cấp tảng tốt cho nhà phát triển Java để phát triển ứng dụng mùa xuân độc lập cấp - Biểu đồ Usecase quản lý khách hàng Hình 2.10 Biểu đồ Usecase quản lý khách hàng - Biểu đồ quản lý khách hàng Hình 2.11 Biểu đồ quản lý khách hàng 21 2.1.2.1.7 Biểu đồ quản lý nhà cung cấp - Giúp Admin lựa chọn, thêm hủy quản lý thông tin nhà cung cấp sản phẩm Bảng Chức quản lý nhà cung cấp -Biểu đồ Usecase 22 Hình 2.12 Biểu đồ Usecase biểu thị quản lý nhà cung cấp - Biểu đồ Hình 2.13 Biểu đồ quản lý nhà cung cấp 2.1.2.1.8 Quản lý đơn hàng - Bảng đặc tả chi tiết 23 -Biểu đồ Usecase Hình 2.14 Biểu đồ Usecase biểu thị quản lý đơn hàng Admin -Biểu đồ 24 Hình 2.15 Biểu đồ thể quản lý đơn hàng Admin 2.1.2.1.9 Thống kê sản phẩm - Bảng Đặc tả chi tiết 25 -Biểu đồ Usecase Hình 2.16 Sơ đồ usecase biểu thị quản lý thống kê Admin - Biểu đồ Hình 2.17 Biểu đồ tần tự biểu diễn quản lý thống kê sản phẩm 26 2.1.2.1.10 Quản lý Giỏ hàng - Bảng Đặc tả chi tiết - Biểu đồ Usecase 27 Hình 2.18 biểu đồ usecase biểu diễn quản lý giỏ hàng -Biểu đồ Hình 2.19 Biểu đồ biểu diễn quản lý giỏ hàng 28 2.1.2.1.11 Quản lý tài khoản cá nhân - Bảng Đặc tả chi tiết -Biểu đồ UseCase 29 -Biểu đồ Hình 2.21 Sơ đồ biểu diễn quản lý tài khoản user 2.1.2.1.12 Thanh toán - Bảng Đặc tả chi tiết 30 Bảng -Biểu đồ Usecase 31 Hình 2.22 Biểu đồ Usecase tốn -Biểu đồ Tuần tự Hình 2.23 Biểu đồ toán 32 2.2 Thiết kế Website 2.2.1 Thiết kế sở liệu 2.2.1.1 Bảng sở liệu 2.2.1.2 Mơ hình sở liệu quan hệ 2.2.2 Thiết kế giao diện 2.2.2.1 Thiết kế giao diện người dùng - Giao diện hiển thị - Giao diện giới thiệu - Giao diện sản phẩm - Giao diện giỏ hàng - Giao diện toán - Giao diện đăng ký - Giao diện đăng nhập - Giao diện chi tiết sản phẩm 2.2.2.2 Thiết kế giao diện người quản trị - Giao diện quản lý, đăng nhập - Giao diện danh sách đơn hàng - Hóa đơn mua hàng - Giao diện danh mục sản phẩm - Giao diện chỉnh sửa sản phẩm - Giao diện thêm sản phẩm - Giao diện chỉnh sửa thông tin 33 CHƯƠNG KẾT QUẢ WEBSITE 3.1 Mơ hình Website 3.2 Ứng dụng Website 3.2.1 Các tính dành cho khách hàng 3.2.2 Các tính dành cho quản trị viên 34 KẾT LUẬN TÀI LIỆU THAM KHẢO [1] TS.Dương Kiều Hoa - Tơn Thất Hịa An, Giáo trình phân tích thiết kế hệ thống thơng tin với UML, NXB Đại học Quốc gia TPHCM, 2006 [2] https://en.wikipedia.org/wiki/English_Wikipedia [3] https://www.w3schools.com [4] https://vietjack.com [5] https://tedu.com.vn 35 ... TÍCH, THIẾT KẾ VÀ XÂY DỰNG WEBSITE .10 2.1 Phân tích Website 10 2.1.1 Phân tích yêu cầu người dùng 10 2.1.2 Các chức Website 2.2 Thiết kế Website 22... 22 2.2.2 Thiết kế giao diện 22 CHƯƠNG KẾT QUẢ WEBSITE 23 3.1 Mơ hình Website 23 3.2 Ứng dụng Website .23 3.2.1 Các tính dành cho khách hàng ... việc sở hữu Website khơng cịn điều xa lạ, chí số trường hợp cịn tiêu chuẩn bắt buộc doanh nghiệp – công ty thời điểm cạnh tranh mang tính tồn cầu Đề tài “Xây dựng Website bán giày online? ?? chúng