ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN VỚI HTML5 VÀ CSS3 - Full 10 điểm

UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN -----  ----- TRẦN VĂN QUỐC Tên đề tài: ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN VỚI HTML5 VÀ CSS3 KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC Qu ả ng Nam, tháng 04 n ă m 2016 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN -----  ----- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Tên đề tài: ỨNG DỤNG RESPONSIVE VÀO TRONG XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN VỚI HTML5 VÀ CSS3 Sinh viên thực hiện: TRẦN VĂN QUỐC MSSV: 2112011024 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA: 2012 – 2016 Cán bộ hướng dẫn: ThS DƯƠNG PHƯƠNG HÙNG MSCB: 21882 Qu ả ng Nam, tháng 4 n ă m 2016 LỜI CẢM ƠN Đầu tiên em xin chân thành cảm ơn đến tất cả các thầy cô trong khoa Công Nghệ Thông Tin trường Đại học Quảng Nam đã giảng dạy tận tình cho em những kiến thức bổ ích trong 4 năm qua để thực hiện khóa luận này Đặc biệt em xin gửi lời cảm ơn đến giảng viên Th S Dương Phương Hùng – người đã trực tiếp hướng dẫn em hoàn thành khóa luận này Bên cạnh đó là những ý kiến đóng góp của bạn bè, đã cho em nguồn động viên lớn để hoàn thành nhiệm vụ của khóa luận Qua đó, em đã đạt được nhiều tiến bộ về kiến thức cũng như những kĩ năng làm việc bổ ích Em chân thành gửi lời cảm ơn sâu sắc đến toàn thể thầy cô và các bạn! MỤC LỤC Phần 1 MỞ ĐẦU 1 1 1 Lý do chọn đề tài 1 1 2 Mục tiêu của đề tài 1 1 3 Đối tượng và phạm vi nghiên cứu 1 1 3 1 Đối tượng nghiên cứu 1 1 3 2 Phạm vi nghiên cứu 1 1 4 Phương pháp nghiên cứu 2 1 5 Lịch sử nghiên cứu 2 1 6 Đóng góp của đề tài 2 1 7 Cấu trúc đề tài 2 Phần 2 NỘI DUNG NGHIÊN CỨU 3 CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ RESPONSIVE, HTML5 VÀ CSS3 3 1 1 Công nghệ Responsive Web Design (RWD) 3 1 1 1 Lịch sử ra đời của RWD 3 1 1 2 Một số khái niệm 3 1 1 3 Những ưu thế của Responsive Web Design 4 1 1 4 Khả năng ứng dụng Responsive Web Design hiện nay 5 1 1 5 Cơ chế hiển thị đáp ứng thiết bị người dùng 5 1 1 6 Những kỹ thuật thiết kế Responsive Web Design 18 1 2 HTML5 và CSS3 20 1 2 1 HTML5 20 1 2 1 1 Khái niệm 20 1 2 1 2 Các thẻ mới của HTML5 20 1 2 1 3 Ứng dụng 21 1 2 2 CSS3 24 1 2 2 1 Khái niệm 24 1 2 2 2 Một số ưu điểm của CSS3 24 1 2 3 Sự kết hợp giữa HTML5 và CSS3 24 1 2 4 Những điểm khác và nổi bật của HTML5 và CSS3 25 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN 28 2 1 Khảo sát hiện trạng 28 2 2 Phân tích yêu cầu 28 2 2 1 Đặt vấn đề 28 2 2 1 1 Định nghĩa bài toán 28 2 2 1 2 Hệ thống cũ 29 2 2 1 3 Mục đích của hệ thống mới 29 2 2 1 4 Yêu cầu chức năng 30 2 2 1 5 Yêu cầu phi chức năng 30 2 2 2 Tác nhân của hệ thống 31 2 2 3 Xác định các ca sử dụng(UC) của các tác nhân 31 2 2 4 Biểu đồ Ca sử dụng của hệ thống 33 2 2 4 1 Biểu đồ UC tổng quát 33 2 2 4 2 Biểu đồ UC đăng ký 33 2 2 4 3 Biểu đồ UC đăng nhập 34 2 2 4 4 Biểu đồ tìm kiếm sản phẩm 34 2 2 4 5 Biểu đồ UC mua hàng 35 2 2 4 6 Biểu đồ UC thanh toán 35 2 2 4 7 Biểu đồ UC nhập hàng 36 2 2 4 8 Biểu đồ UC xuất hàng 36 2 2 5 Đặc tả ca sử dụng 37 2 3 Thiết kế các tương tác của hệ thống 52 2 3 1 UC Đăng ký 52 2 3 2 UC đăng nhập 53 2 3 3 UC tìm kiếm sản phẩm 54 2 3 4 UC thanh toán 55 2 3 5 UC nhập hàng 56 2 3 6 UC xuất hàng 57 2 4 Thiết kế các lớp của hệ thống 58 2 4 1 Xác định các lớp biên 58 2 4 2 Xác định các lớp điều khiển 59 2 4 3 Xác định các lớp thực thể 59 2 4 4 xây dựng thẻ CRC của các lớp thực thể 62 2 4 5 Biểu đồ lớp của hệ thống 69 2 5 Thiết kế cơ sở dữ liệu của hệ thống 70 2 5 1 Biểu đồ mô hình quan hệ 70 2 5 2 Mô tả các bảng 70 2 6 Thiết kế giao diện 74 2 6 1 Biểu đồ định hướng giao diện người dùng cho chức năng đăng ký 74 2 6 2 Biểu đồ định hướng giao diện người dùng cho chức năng đăng nhập 75 2 6 3 Biểu đồ định hướng giao diện người dùng cho chức năng mua hàng 76 CHƯƠNG 3: XÂY DỰNG HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN 77 3 1 Kiến trúc vật lý của hệ thống 77 3 1 1 Biểu đồ thành phần 77 3 1 2 Biểu đồ triển khai 77 3 2 Các chức năng của hệ thống được cài đặt trong chương trình Demo 78 3 3 Một số giao diện chính của hệ thống 79 3 3 1 Hình ảnh ở thiết bị màn hình lớn hơn 1200px 79 3 3 1 Hình ảnh ở thiết bị màn hình thiết bị từ 767px đến 979px 80 3 3 3 Hình ảnh ở thiết bị màn hình thiết bị nhỏ hơn 767px 82 Phần 3 KẾT LUẬN VÀ KIẾN NGHỊ 85 Phần 4 TÀI LIỆU THAM KHẢO 86 DANH MỤC CÁC TỪ VIẾT TẮT HTML HyperText Markup Language CSS Cascading Style Sheet RWD Responsive Web Design UC Use Case DANH MỤC CÁC HÌNH ẢNH Hình1 1 Hình Ảnh sản phẩm thu nhỏ 7 Hình 1 2 Hình ảnh tin công nghệ 8 Hình 1 3 Hình ảnh sản phẩm thu nhỏ 10 Hình 1 4 Hình ảnh tin công nghệ 3 hàng 11 Hình 1 5 Hình ảnh form đặt hàng 2 cột 12 Hình 1 6 Hình ảnh sản phẩm thu nhỏ 16 Hình 1 7 Hình ảnh tin công nghệ 1 cột 16 Hình 1 8 Hình ảnh form đặt hàng 1 cột 17 Hình 3 1 Hình ảnh sản phẩm thu nhỏ 79 Hình 3 2 Hình ảnh tin công nghệ 80 Hình 3 3 Hình ảnh sản phẩm thu nhỏ 80 Hình 3 4 Hình ảnh tin công nghệ 3 hàng 81 Hình 3 5 Hình ảnh form đặt hàng 2 cột 81 Hình 3 6 Hình ảnh sản phẩm thu nhỏ 1 cột 82 Hình 3 7 Hình ảnh tin công nghệ 1 cột 83 Hình 3 8 Hình ảnh form đặt hàng 1 cột 84 Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 1 Phần 1 MỞ ĐẦU 1 1 Lý do chọn đề tài Với sự phát triển mạnh mẽ của công nghệ thông tin và sự lớn mạnh của mạng máy tính toàn cầu Công nghệ thông tin đang được ứng dụng rộng rãi trên tất cả các lĩnh vực của cuộc sống, nó ngày càng được quan tâm và sử dụng hiệu quả về mọi mặt Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinh doanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công ty lớn đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất So với kinh doanh truyền thống thì việc kinh doanh trực tuyến sẽ tốn chi phí thấp hơn, hiệu quả sẽ đạt cao hơn, với lợi thế của công nghệ Internet việc truyền tải thông tin về sản phẩm nhanh chóng, thuận tiện Kết hợp với bộ phận giao hàng tận nơi, thông qua bưu điện và ngân hàng để thanh toán tiền, càng tăng thêm thuận lợi để loại hình này phát triển Cùng với sự phát triển mạnh mẽ của công nghệ thì các thiết bị điện tử cũng nhanh chóng phát triển theo, trong lĩnh vực thiết kế và phát triển web, chúng ta nhanh chóng nhận ra rằng không thể theo kịp với sự phát triển của các thiết bị mới với những độ phân giải màn hình khác nhau Đối với các doanh nghiệp, tạo ra từng phiên bản website phù hợp với mỗi thiết bị có độ phân giải mới là điều không thể, hoặc ít nhất là không thực tế Các trang web cần phải có công nghệ tự độn1g đáp ứng theo thiết bị của người dùng, điều này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web Từ nhu cầu thực tế đó em đã chọn đề tài “ Ứng dụng Responsive vào trong xây dựng website bán hàng điện tử trực tuyến với HTML5 và CSS3” 1 2 Mục tiêu của đề tài Nắm vững ngôn ngữ HTML5 và CSS3 Phân tích và thiết kế hệ thống hướng đối tượng để đưa ra một sản phẩm phần mềm có các chức năng cần thiết Xây dựng được một website bán hàng điện tử trực tuyến 1 3 Đối tượng và phạm vi nghiên cứu 1 3 1 Đối tượng nghiên cứu Đề tài chủ yếu nghiên cứu về công nghệ Responsive, ngôn ngữ HTML5 và CSS3 1 3 2 Phạm vi nghiên cứu Nghiên cứu kiến thức nền tảng về Responsive, HTML5, CSS3 Nghiên cứu triển khai ứng dụng trên cơ sở đáp ứng nhu cầu của website bán hàng điện tử trực tuyến Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 2 1 4 Phương pháp nghiên cứu Khảo sát các cửa hàng bán hàng điện tử Tìm hiểu thông tin trên sách báo, các thông tin từ Internet và các phương tiện truyền thông Tìm hiểu, học hỏi kiến thức từ giáo viên và bạn bè 1 5 Lịch sử nghiên cứu Responsive là công nghệ thiết kế website thế hệ mới đang được phát triển trong những năm gần đây, đến năm 2015, công nghệ này đã phát triển bùng nổ và trở thành một trào lưu trong cộng đồng những nhà phát triển web cũng như doanh nghiệp Những công ty chuyên thiết kế web Responsive: Công ty TNHH phần mềm Việt Nhân, công ty EC Việt Nam Một số website được ứng dụng công nghệ responsive: Trang web tin tức lớn nhất thế giới BBC, trang The Google Cultural Institute, công ty Sony Việt Nam 1 6 Đóng góp của đề tài Xây dựng được website bán hàng điện tử trực tuyến theo công nghệ Responsive 1 7 Cấu trúc đề tài Gồm có 3 chương như sau: Chương 1: Tổng quan về công nghệ Responsive, HTML5 và CSS3 Chương 2: Phân tích và thiết kế hệ thống website bán hàng điện tử trực tuyến Chương 3: Xây dựng hệ thống website bán hàng điện tử trực tuyến Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 3 Phần 2 NỘI DUNG NGHIÊN CỨU CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ RESPONSIVE, HTML5 VÀ CSS3 1 1 Công nghệ Responsive Web Design (RWD) 1 1 1 Lịch sử ra đời của RWD Responsive website được nhắc đến lần đầu tiên vào từ năm 2010 Tuy nhiên, phải tới đầu năm 2012 thı̀ khái niệm mới này mới được để mắt và tiếp cận Đó là những kỹ thuật mới được quan tâm, tạo ra một xu hướng và đã được rất nhiều website thực hiện thành công Responsive Web Design (thiết kế web đáp ứng linh hoạt) ta có thể hiểu là nó như là một dạng chuẩn, một xu hướng thiết kế mới Nguyên nhân xuất phát từ việc cùng với sự phát triển của khoa học công nghệ, các nhà sản xuất trên thế giới cũng không ngừng ra mắt các sản phẩm thiết bị di động, tablet với đa dạng về độ rộng của màn hình, độ phân giải…Và để đáp ứng việc thay vì không thể nào kịp với việc ứng với mỗi thiết bị di động có kích cỡ màn hình phân giải khác nhau lại xây dựng một phiên bản cho nó Điều không thể với khoảng cách lớn về sự phát triển là lý do mà Responsive Web Design xuất hiện Nó là sự kết hợp linh hoạt bởi các kỹ thuật flexible grid, responsive image và CSS media query…để từ đó chỉ với duy nhất một thiết kế website nhưng tương thích ở mọi chế độ màn hình khác nhau của các thiết bị di động, tablet nhờ sự tự thay đổi co giãn hiển thị với mọi chế độ Hiện nay, cách thức mà Responsive Web Design hoạt động là do những lập trình viên viết code mà ở đó thiết lập những giá trị quy định để trình duyệt hiểu rồi tự động thực thi để tương thích với những quy định đó tuy theo kích thước của trình duyệt Responsive Web Design đang được ngày càng nhiều hơn sự chú ý đối với cộng đồng phát triển website cũng như đối với doanh nghiệp 1 1 2 Một số khái niệm Responsive website có thể hiểu là khái niệm về một website "phản hồi", một website có khả năng "tự biến đổi" dựa trên môi trường hoạt động của chúng Cùng một website, nhưng giao diện và phương thức tương tác của website đó có thể biến đổi khi truy cập website đó từ các thiết bị khác nhau như điện thoại, ipad, tablet, laptop Responsive Web Design là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính thẩm mỹ với độ hiển thị nội dung co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone và duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi chế độ phân giải, linh hoạt trong chuyển dữ liệu sang dạng ngang hoặc đứng một cách nhanh chóng và tiện lợi Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 4  Hiểu một cách đơn giản Web Responsive là phong cách thiết kế website làm sao cho phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình 1 1 3 Những ưu thế của Responsive Web Design  Thân thi ệ n v ớ i ng ườ i dùng Thiết kế đáp ứng rõ ràng sẽ khiến trang web trở nên thân thiện với người sử dụng bởi nó có thể “vừa vặn” với bất kỳ màn hình nào của hầu hết các thiết bị Ngày nay, công nghệ phát triển không ngừng, smartphone không hề xa lạ với con người Vì vậy nếu có một trang web áp dụng giải pháp này, mọi người sẽ luôn có khả năng kết nối với trang web một các hiệu quả nhất Với Responsive website sẽ được xử lý nhanh hơn khi người dung truy cập website những thiết bị di động Giao diện website được thiết kế tập trung hiển thị cho người dùng những nội dung quan trọng nhất, tất cả đều được thu gọn trong màn hình của thiết bị, giờ đây khách hàng truy cập website không phải mất thời gian để điều chỉnh kích thước, phóng to nội dung để có thể xem rõ hơn Có responsive website sẽ thật sự trở nên chuyên nghiệp và hiệu quả Đối với website một cột hay nhiều cột thì Responsive Web Design hiển thị vô cùng ấn tượng Và thiết kế hiện đại theo xu hướng 2014 và tương lai là flat và trải rộng full màn hình với các hiển thị theo từng dòng phẳng  Có l ợ i t ạ i phân khúc dành cho đ i ệ n tho ạ i di độ ng Nhờ có Responsive web design , có thể tính được toàn bộ số lượt người truy cập trong một trang web Có thể có được tất cả các thông tin cần thiết liên quan đến lượt người truy cập trang web bởi vì giờ đây người dùng trên di động cũng được tính lượt truy cập Do đó, lượng người truy cập được tính toán chính xác sẽ rất hiệu quả cho việc phân tích, đánh giá chất lượng của trang web hoặc nâng cấp nó  Nâng cao khả năng chia sẻ Responsive web design cũng cho người chủ trang web cơ hội để thu thập tất cả những chia sẻ của các mạng xã hội chỉ với một đường dẫn URL Nó sẽ cho phép chúng ta có những đóng góp hay hơn cho trang web, gần gũi hơn với người dùng + Không phải lo về đổi hướng người dùng Các lập trình viên sẽ không phải tạo những liên kết ngược hay đổi hướng cho người dùng điện thoại nữa Hẳn nhiên là trang web sẽ dễ dàng xuất hiện trên các công cụ tìm kiếm hơn + Ít phải bảo dưỡng hơn Phát triển một trang web riêng cho điện thoại di động là thì chúng ta phải bỏ công duy trì cả hai trang web Nhưng nếu chúng ta chọn Responsive web design, sự bảo hành cho Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 5 trang web sẽ rất nhỏ vì chỉ có duy nhất một bản thiết kế cho mọi thiết bị Điều này sẽ làm giảm khối lượng cho công việc 1 1 4 Khả năng ứng dụng Responsive Web Design hiện nay Vài năm trở lại đây, các ngôn ngữ lập trı̀nh phục vụ cho việc thiết kế website cũng có những bước tiến đáng ngạc nhiên Các ngôn ngữ lập trı̀nh cập nhật phiên bản mới cho phép khai thác nhiều tı́nh năng hơn, cung cấp nhiều công cụ hơn cho các lập trı̀nh viên HTML5, CSS3, PHP6 ngày càng được ứng dụng nhiều hơn trên các website Trước đây khoảng 2 năm, để thiết kế một website, lập trình viên thường lựa chọn màn hı̀nh tiêu chuẩn 1024x768 (độ phân giải màn hı̀nh phổ biến trước đây) cho máy tı́nh thông thường hay 320x240 cho các điện thoại di động Website cho máy tı́nh thông thường được thiết kế riêng, website cho điện thoại di động được thiết kế riêng vı̀ những giới hạn này Một số công ty chọn giải pháp là viết phần mềm cho các điện thoại di động chứ không thiết kế website bởi sự bất tiện khi lướt web trên điện thoai di động Nhưng hiện nay, màn hı̀nh máy tı́nh thường là màn rộng lớn, với độ phân giải phổ biến 1366x768, và độ phân giải này cũng đang có xu hướng nâng cao thêm Các điện thoại cũng có độ phân giải rất lớn so với trước đây, và khá phong phú: 720x1280, 480x800 Các thiết bị di động tablet mới cũng có độ phân giải không đồng đều: 1024x600, 1024x768,2048×1536 Điều này làm cho việc thiết kế giao diện website trở nên khó khăn hơn, do rất khó để tı̀m ra được một quy chuẩn chung Chı́nh điều này cũng thôi thúc sự phát triển của Responsive web design tạo một website có thể thı́ch ứng với tất cả các độ phân giải màn hı̀nh Công nghệ Responsive Web Design có thể nhận diện được thiết bị đang truy cập là máy tı́nh bảng Ipad hay điện thoại di động thông dụng và trả về giao diện tự động hợp lý và dễ sử dụng nhất Responsive Web Design còn có thể xác định được độ phân giải đưa ra giao diện và hı̀nh ảnh không bị méo mó hay vỡ giao diện Và có thể tự động loại bỏ những hı̀nh ảnh ,slide… được phép hiển thị hay không ? Để thiết bị có thể tải website nhanh nhất và dễ sử dụng nhất trên những thiết bị có màn hı̀nh hạn chế và tốc độ yếu 1 1 5 Cơ chế hiển thị đáp ứng thiết bị người dùng Khi nhận một yêu cầu vào website do người dùng gửi tới, máy chủ chứa website sẽ phân tích xem người dùng đang sử dụng loại thiết bị gì và trình duyệt web gì và dựa vào đó gửi xuống một file trình bày kiểu (style sheet) tương ứng File style sheet này sẽ quyết định việc hiển thị nội dung web theo cách phù hợp nhất với màn hình của thiết bị và khung nhìn khiến cho người dùng có được một trải nghiệm thân thiện nhất Ta có thể minh họa như sau: Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 6 Để nhận biết thiết bị nào đang truy cập vào trang web, người ta có rất nhiều cách Thứ nhất, mỗi trình duyệt đều có một chuỗi kí tự cụ thể để xác định tên, bộ nguồn dựng trang của chính nó Các website được phép đọc chuỗi này để biết được rằng người dùng đang dùng trình duyệt nào, thậm chí là thiết bị nào, tên gì để vào web Ví dụ, UserAgent của IE 10 0 là: Mozilla/5 0 (compatible; MSIE 10 0; Windows NT 6 1; WOW64; Trident/6 0), còn của Safari trên iPad là: Mozilla/5 0(iPad; CPU OS 6_0 like Mac OS X)AppleWebKit/536 26 (KHTML, like Gecko)Version/6 0 Mobile/10A5355d Safari/8536 25 Khi biết được máy nào đang truy cập website, người ta có thể dễ dàng xác định kích cỡ màn hình và nhiều thông tin khác liên quan đến thiết bị, từ đó dùng mã tinh chỉnh lại bố cục web ngay khi người dùng mới truy cập vào Khi bạn truy cập vào một số trang web nhất định, nó cũng dùng UserAgent để biết bạn đang dùng máy nào và đưa ra đề xuất tương ứng (ví dụ, vào https://www google com/intl/en/chrome/browser/ bằng máy Macbook thì nút download là dành cho Macbook, vào bằng máy Windows thì nút dowload lại cho phép tải file exe của Windows) Ngoài ra, việc nhận biết thiết bị còn có thể được tích hợp vào ngay trong file CSS và đây là cách mà người ta thường dùng Nhà thiết kế web có thể đặt ra các “luật”, ví dụ như nếu thiết bị truy cập vào web có độ phân giải chiều ngang thấp hơn 700px thì không tải thành phần A, sắp xếp lại thành phần B và C Còn nếu thiết bị có màn hình từ 700px trở lên, thành phần A sẽ xuất hiện, B và C giữ nguyên vị trí ban đầu Ở phần này chúng ta sẽ tìm hiểu về “Media Query” Media Query là cú pháp của CSS3 giúp ta có thể phân các đoạn CSS chúng ta ra nhiều phần khác nhau tương ứng với kích thước của các loại thiết bị Kích thước chúng ta đang cần phân chia chính là độ rộng của màn hình Cú pháp của Media Query như sau: - @media screen and (max-width: “kích thước lớn nhất mà chúng ta xét(px)”){ Kiểu CSS hiển thị } - @media screen and (max-width: “kích thước lớn nhất mà chúng ta xét(px)”){ Kiểu CSS hiển thị } Để hiểu rõ hơn về cơ chế hiển thị đáp ứng thiết bị người dùng chúng ta sẽ đi vào phần Demo trang web bán hàng điện tử như sau: + Đối với màn hình có giá trị cao nhất là 1200px: @media (max-width: 1200px) { span4 { Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 7 width: 300px; } } Thì trang web sẽ hiển thị: + Phần hình ảnh sản phẩm thu nhỏ với giá trị chiều rộng là 300px…vv: Hình1 1 Hình Ảnh sản phẩm thu nhỏ kích thước lớn Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 8 + Tin công nghệ sẽ hiển thị thành 3 cột hình lớn: Hình 1 2 Hình ảnh tin công nghệ 3 cột lớn + Đối với màn hình thiết bị từ 767px đến 979px @media (max-width: 979px) { body { padding-left:0; padding-right:0; } navbar-fixed-top, navbar-fixed-bottom { position: fixed; margin-left: 0px; margin-right: 0px; } navbar nav > li > a { line-height: 20px; vertical-align: middle; Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 9 } section { padding-left:20px; padding-right:20px; } nav-collapse nav { float: none; margin: 0 0 10px; } nav-collapse nav > li { float: none; } nav-collapse, nav-collapse collapse { width: 100%; display: inherit; clear: both; } thumbnail more { margin-left:-21px; width:40px; height:40px; border-radius:30px; line-height: 40px; } thumbnail:hover more { margin-top:-20px; } newsletter form { text-align:center; } project-infoinfo span { width: 154px; display: inline-block; margin-top: 12px; color: gold; font-size: 25px; Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 10 margin-left: 22%; } project-infoinfo div { margin-bottom: 3px; font-size: 14px; } popup-inner{ top:60%; } span4 { width: 228px; } } Thì các thành phần sẽ bị thay đổi như: + Phần nội dung( thẻ body), phần menu( navbar-fixed-top, navbar-fixed-bottom) và hình ảnh sản phẩm thu nhỏ khi đó sẽ có giá trị chiều rộng là 228px…vv Hình 1 3 Hình ảnh sản phẩm thu nhỏ Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 11 + Tin công nghệ sẽ hiển thị 3 cột giống màn hình lớn hơn 1200px nhưng kích thước nhỏ hơn: Hình 1 4 Hình ảnh tin công nghệ 3 cột Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 12 + Form đặt hàng sẽ hiển thị 2 cột: Hình 1 5 Hình ảnh form đặt hàng 2 cột + Đối với màn hình nhỏ hơn767px: @media (max-width: 767px) { body { padding-right: 20px; padding-left: 20px; } info-mail { width:90%; padding:15px 0px; } project-description { Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 13 padding-left:20px; } row-fluid { width: 100%; } row, thumbnails { margin-left: 0; } thumbnails > li { float: none; margin-left: 0; } [class*="span"], uneditable-input[class*="span"], row-fluid [class*="span"] { display: block; float: none; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } span12, row-fluid span12 { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } row-fluid [class*="offset"]:first-child { margin-left: 0; } input-large, input-xlarge, Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 14 input-xxlarge, input[class*="span"], select[class*="span"], [class*="span"], uneditable-input { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input-prepend input, input-append input, input-prepend input[class*="span"], input-append input[class*="span"] { display: inline-block; width: auto; } controls-row [class*="span"] + [class*="span"] { margin-left: 0; } modal { position: fixed; top: 20px; right: 20px; left: 20px; width: auto; margin: 0; } popup-inner { max-width:780px; width:60%; padding:40px; position:absolute; top:96%; Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 15 left:50%; box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:#fff; } Dh_td { margin-top: -52px; text-align: center; color: #0088cc; border-bottom: 1px solid #0088cc; width: 100%; margin-left: 2%; } form_infor margin-right-20 margin-left-10 { width: 100%; } } Thì nội dung sẽ hiển thị: + Hình ảnh sản phẩm có chiều ngang bằng với màn hình thiết bị ([class*="span"], uneditable-input[class*="span"], row-fluid [class*="span"] { display: block; float: none; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }) Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 16 Hình 1 6 Hình ảnh sản phẩm thu nhỏ + Tin công nghệ sẽ hiển thị theo hàng: Hình 1 7 Hình ảnh tin công nghệ 1 cột Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 17 + Form đặt hàng sẽ hiển thị 1cột( popup-inner { max-width:780px; width:60%; padding:40px; position:absolute; top:96%; left:50%; box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:#fff; }): Hình 1 8 Hình ảnh form đặt hàng 1 cột Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 18 1 1 6 Những kỹ thuật thiết kế Responsive Web Design  CSS3 Transitions & Media Queries CSS (Cascading Style Sheets) là file css có tác dụng tách phần định dạng style ra khỏi nội dung HTML giúp dễ dàng quản lý được nội dung trong HTML Ở đây cái tên CSS3 Transitions & Media Queries đã nói lên đặc tính của kỹ thuật này: CSS chuyển đổi với truy vấn, yêu cầu phương tiện truyền thông Trong đó thiết kế cần tới CSS Media Queries để giúp website tự động thay đổi bố cục theo màn hình ( CSS3 Media Queries được phát triển lên từ Media Type CSS2) Tuy nhiên nếu chỉ có CSS Media Queries thì khi có sự thay đổi về kích cỡ trình duyệt thì một chuyển đổi rõ ràng và đột ngột giữa hai kiểu màn hình Và sự kết hợp thêm CSS Transitions với các mã vô cùng đơn giản khiến sự chuyển đổi diễn ra mềm mại hơn rất nhiều, ví dụ như một đoạn sau: body { transition: all 3s linear; -0-transition:all 3s linear -moz-transition:all 3s linear -webkit-transition:all:all 3s linear } Thêm đoạn mã CSS Transition đơn giản này nhưng sự chuyển đổi sẽ diễn ra suôn sẻ hơn rất nhiều so với khi chỉ có CSS Media Queries  Responsive Data Tables Tự động linh hoạt co giãn thay đổi mọi hiển thị chỉ với một phiên bản web đáp ứng đòi hỏi của các thiết bị di động tablet có kết nối Internet Responsive Data Tables cho giải pháp tạo một định dạng linh hoạt với hình ảnh tự động điều chỉnh để không bị vỡ layout hay nói một cách khác chúng ta hiển thị dữ liệu thay thế cho dữ liệu chính bằng một bản mini-table với đầy đủ về nội dung như bản chính ( Layout: có thể hiểu là sự dàn trang định dạng bố cục của người thiết kế )  Responsive Navigation Menus Đây là kỹ thuật chuyển đổi Menu chứa các trang chính của website ở dạng thông thường thành một Drop Down Menu – một dạng trình đơn thả xuống danh sách các lựa chọn khi website truy cập với một định dạng trình duyệt bị thu nhỏ Drop Down Menu với khái niệm miêu tả “ Một danh sách các lựa chọn được xổ xuống từ thanh trình đơn khi được yêu cầu và vẫn mở mà không có thêm hành động cho các thiết lập của người dùng đóng nó hoặc chọn một mục trong các danh sách” có thể hiểu cơ bản là một danh sách (thực đơn) lựa chọn sẽ được sổ ra khi yêu cầu và mở ra như thế cho đến khi người sử dụng đóng nó lại hoặc chọn một mục của danh sách đó Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 19  CSS Media Queries and Using Available Space Kỹ thuật này có thể được hiểu là sử dụng CSS để thực hiện những yêu cầu thay đổi bố trí của người dùng trên cả website một cách tinh tế với không gian sẵn có Tuy nhiên đây là một vấn đề khá lớn và chuyên sâu Ví dụ cú pháp CSS Media Queries để truy vấn những yêu cầu thuộc tính của tất các thiêt bị đa phần là thuộc tính “screen” và “ print” trong một khai báo duy nhất dạng như sau: Sau khi khai báo thì ta đưa trực tiếp vào file CSS dạng như: @media screen { body { width: 75%; } } @media print { body { width: 100%; } } Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 20 1 2 HTML5 và CSS3 1 2 1 HTML5 1 2 1 1 Khái ni ệ m HTML5 là một chuẩn mới và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu văn bản – HyperText Markup Language explained (gọi tắt là HTML) HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa, được đề xuất đầu tiên bởi Opera Software, đây là phiên bản thứ 5 của ngôn ngữ HTML - được tạo ra năm 1990 và chuẩn hóa như HTML4 năm 1997 - và xuất hiện vào tháng 12 năm 2012, là ngôn ngữ được giới thiệu bởi World Wide Web Consortium (W3C) Các phiên bản trước của HTML, như HTML 4 01 đã ra đời từ năm 1999 Cho đến nay các trang web đã có những thay đổi rất nhiều kể từ đó HTML5 vẫn còn trong giai đoạn phát triển và hoàn thiện Tuy nhiên, nhiều phiên bản trình duyệt mới hiện nay đã có các hỗ trợ cho những phần tử, thẻ mới có trong HTML5 và các APIs 1 2 1 2 Các th ẻ m ớ i c ủ a HTML5 HTML5 thêm một số thẻ mới đặc biệt để xác định những cấu trúc phổ biến như: - Thẻ : nó cũng giống như một phần hoặc một chương của một quyển sách, hay một đoạn trong một chương - Thẻ : phần đầu hiển thị trên trang, không giống như thẻ head - Thẻ : phần dưới chân trang giống như chữ ký trong một thông điệp email - Thẻ : một tập liên kết tới những trang khác - Thẻ : có thể xem như một bài viết cụ thể (chẳng hạn như một blog entry rất thích hợp để đặt trong một ) - Thẻ : thường đóng vai trò như một sidebar cung cấp các thông tin liên quan cho thẻ chứa nó - Thẻ : xác định nội dung âm thanh, chẳng hạn như âm nhạc hoặc luồng âm thanh khác bất kỳ - Thẻ : Tạo một danh sách gợi ý cho input - Thẻ : Định nghĩa một trường sinh cặp key (cho form) - Thẻ : Định nghĩa một kết quả tính toán - Thẻ : Dùng cho mục đích đồ họa, vẽ bằng JavaScript - Thẻ : Định nghĩa một nguồn multy media cho hoặc - Thẻ : Định nghĩa một khung chứa cho các chương trình bên ngoài (như là Flash) - Thẻ : Định nghĩa text tracks cho hoặc Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 21 …vv 1 2 1 3 Ứ ng d ụ ng  HTML5 làm gi ả m t ầ m quan tr ọ ng c ủ a các plug-ins Trước đây, câu chuyện về Web gắn với plug-in hay add-on của một trình duyệt bởi nó khuyến khích sự sáng tạo cũng như sự trải nghiệm Âm thanh, ảnh động hay những thủ thuật khác xuất hiện trên Website thông qua plug-ins, phát triển bởi Sun, Adobe, RealAudio, Microsoft và rất nhiều hãng khác Giao diện plug-ins mở đối với tất cả và mọi người có thể trải nghiệm bằng cách thêm những tính năng mới Cuộc chiến về Flash có thể là cuộc chiến nổi tiếng nhất, nhưng sức mạnh mới được từ HTML5 cũng đe dọa tới hệ mã lệnh JavaFX là lý tưởng, nhưng ai là người muốn học một loại cú pháp mới trong khi JavaScrip và Canvas đang làm rất tốt Ai cần hệ thống Real khi các video sẽ được chuyển thành audio và video?, Plug-in dường như sẽ bị lãng quên Plug-ins sẽ bị biến mất hoặc không được dùng, nó còn phụ thuộc vào việc làm của chúng ta Nếu chúng ta muốn vẽ hình ảnh, Canvas là thích hợp nhất Nhưng nếu muốn vẽ một thế giới 3-D đặc biệt, giống như trong các trò chơi Flash và Shockwave phức tạp, chúng ta sẽ phải dùng tới plug-in khi nó có thể kết nối trực tiếp tới video cũng như chạy thế giới game 3-D  HTML5 h ỗ tr ợ đồ h ọ a t ươ ng tác Website cũ tải hình ảnh bằng cách tải file GIF hay JPG Website mới có thể xây dựng hình ảnh trên Canvas Một loạt thư viện đồ họa đẹp được đưa ra, giúp cho đồ họa của Website trở nên tương tác hơn Hiện nay, JavaScript có thể tính toán cũng như vẽ hình ảnh bằng dữ liệu Mọi thứ trở nên sống động khi những lập trình viên có thời gian để đưa ra giải pháp Adobe mới đây đã bắt đầu phát triển đồ họa tinh xảo cho HTML5 Sự xuất hiện của những công cụ này sẽ mở đầu cho những khả năng mới cũng như đồ họa sẽ được tinh xảo hơn hiện nay  HTML5 cho phép các ứ ng d ụ ng k ế t n ố i t ớ i khu v ự c l ư u tr ữ file Những người lập trình Web thường lưu trữ một lượng lớn thông tin trong các cookies (300 cookies tương đương với 4096 byte) Bộ công cụ dùng plug-in Flash để trưng dụng lựa chọn từ ổ đĩa là phiên bản đầu của bộ công cụ Dojo Tuy nhiên, giờ đây chỉ cần sử dụng HTML5 là được Lập trình viên có thể lưu trữ bất cứ thứ gì họ muốn Điều này giúp việc cài đặt các ứng dụng dễ dàng hơn giống như các ứng dụng cũ Các ứng dụng chạy mã JavaScript từ ứng dụng lưu trữ HTML5 ngoại tuyến và hoạt động ngay cả khi kết nối Website đang hoạt động Phương pháp này không ảnh hưởng tới hoạt động phát triển nhóm “đám mây” bởi những dữ liệu có thể hoạt động như những lưu trữ thông minh Lập trình game có thể lưu Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 22 trữ theo vùng những phần mô tả và ảnh minh họa, giúp tiết kiệm thời gian tải thông tin nhiều lần Ngược lại, những dữ liệu này sẽ được lưu trữ trong các tệp tin hệ thống Thế nên việc lấy lại dữ liệu không phải là dễ dàng Người dùng muốn chuyển dữ liệu từ máy này sang máy khác sẽ gặp phải khó khăn  HTML5 s ẽ đơ n gi ả n hóa chia nh ỏ d ữ li ệ u v ớ i cyborg data Ai đã từng chia nhỏ dữ liệu từ các trang web đều biết rằng HTML không giúp được nhiều ngoại trừ giúp trình duyệt nơi đặt dữ liệu Microformats trong HTML5 cung cấp các phương pháp tinh xảo giúp việc phân tích dữ liệu dễ dàng hơn Không ai có thể dự đoán microformats có thể thay đổi Web tới mức nào nhưng rất dễ để thấy được nó đã giúp các lập trình viên có nhiều giải pháp hơn  HTML5 giúp h ợ p nh ấ t các đị a ch ỉ Đối với máy chủ Web, địa chỉ máy tính của chúng ta đơn thuần chỉ là những con số ẩn danh Chuẩn HTML5 cho phép các trình duyệt định vị vị trí của người dùng Tuy nhiên, nó sẽ không hoạt động với các máy bàn (hoạt động với GPS hoặc Wifi), nhưng nó lại hoạt động tốt với smartphone cầm tay  HTML5 làm video c ủ a Website đẹ p h ơ n Chuẩn HTML5 giúp các nhà lập trình tiếp hợp videp dễ dàng hơn với thông tin trên trang, cung cấp các ứng dụng tới lập trình viên jQuery và PHP ngoài Flash, Silverlight hay JavaFX Mọi người đều muốn cung cấp mã nguồn mở để mở những hình ảnh động và âm thanh tương ứng dẫn đến việc không thống nhất Chuẩn HTML5 sẽ là mã nguồn mở trung gian, có nghĩa là chúng ta thay đổi cách gọi từ plug-in thành codec Tuy nhiên, dù ta có chuẩn video nhưng trình duyệt lại rất khó để dịch dữ liệu Mặc dù vẫn còn sự cân nhắc cũng như thiếu sự nhất trí hoàn toàn, thẻ video mới này sẽ cho thấy sức mạnh của video, giúp cho HTML bớt đi kí tự văn bản và video sẽ được dùng nhiều hơn  HTML5 t ạ o ra widget chat Widget sử dụng trong iframes cho phép các trang web ghi nhớ lại thông tin từ các trang khác trong vòng nhiều năm Tuy nhiên chúng lại bị các rào cản an ninh giới hạn khi chỉ lưu trữ mỗi widget trong một sandbox riêng HTML5 cung cấp cơ chế chuẩn giúp các widget có thể trò chuyện với nhau Mặc dù chúng vẫn khống thể vượt qua được sandbox của widget khác nhưng các widget có thể gửi tin nhắn qua lại, kết nối công việc, thậm chí là chuyển đổi thông tin về người đang sử dụng máy tính Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 23 Các nhà quảng cáo có cơ hội để đăng quảng cáo với các ô hình chữ nhật khác nhau xuất hiện trên các trang web Trong khi đó, các nhà phát triển vẫn khẳng định sẽ tìm được những ứng dụng thức tế khác Tuy nhiên, sử dụng cơ chế này để gửi tin nhắn thì chỉ mới là bước đầu Vẫn cần tạo ra tiêu chuẩn cho những thông tin được chuyển đi do các widget là một cơ hội để trò chuyện giữa mọi người nên chúng cần phải có những ngôn từ chuẩn  HTML5 có th ể t ă ng kh ả n ă ng b ả o m ậ t Mỗi trình duyệt có một plug-in riêng do các nhóm lập trình khác nhau lập ra với những tiêu chuẩn khác nhau, được đưa ra vào thời điểm khác nhau và kiểu mẫu bảo mật cũng khác nhau Thông thường, một số phiên bản plug-in có tính bảo mật hơn so với loại khác Và khi số lượng plug-in gia tăng, chúng làm tăng độ phức tạp trong kiểm tra các lỗi an ninh Liệu plug-in hay trình duyệt đã có lỗ hổng lớn, liệu có phức tạp không khi chỉ cập nhât trình duyệt mà không nâng cấp plug-in hoặc ngược lại, ai có thể nhớ được? Thay thế nhiều loại plug-in với các đặc điểm được tích hợp với HTML 5 sẽ bỏ đi được những khuyết điểm có trong các plug-in trước đó Những khuyết điểm có thể bị lợi dụng để thiết lập mã độc Nếu như nhóm an ninh kiểm tra Firefox, Chorme hoặc IE cho phép cài đặt các plug-in này, sự nguy hiểm sẽ giảm bớt đi  HTML5 đơ n gi ả n hóa vi ệ c phát tri ể n web Bill Mill – chuyên viên thiết kế cho Lookingglass Cyber Solutions giải thích ngắn gọn về sự thay đổi này: “Tôi thực sự thích HTML5 vì nó cho phép tôi làm việc trong một môi trường thích hợp, trình duyệt kết hợp với Javascript, DOM mà không phải bật đi bật lại Flash và HTML5 Nó vừa là một ngôn ngữ lại vừa là một công cụ, không khác biệt lắm so với các plug-in khác” HTML5 cung cấp một ngôn ngữ lập trình JavaScript, một kiểu dữ liệu (XML hoặc DOM) và một phần nguyên tắc thiết lập (CSS) để kết nối văn bản, audio, video và Đồ họa Thách thức trong việc tạo ra cái gì đó tốt đẹp vẫn là mênh mông nhưng điều đó sẽ đơn giản hơn khi làm việc trong một tiêu chuẩn thống nhất  Bên cạnh những ứng dụng đó HTML5 vẫn còn nhiều thiếu sót, gây khó khăn cho người sử dụng chúng: - Có r ấ t ít các trình duy ệ t web h ỗ tr ợ HTML5: Việc HTML5 ra đời tạo nên một sự đổi mới cho công nghệ website, nhưng việc hỗ trợ công nghệ HTML5 để có thể hiển thị tốt cho người sử dụng thì vẫn còn rất ít, chỉ có các trình duyệt thông dụng như Google Chorme, Firefox và mới update nên có thể hỗ trợ tốt HTML5, các trình duyệt còn lại vẫn theo phương thức cũ nên việc ứng dụng toàn bộ công nghệ HTML5 vào quá trình thiết kế như thiết kế website asp là một điều mạo hiểm, có thể sẽ ứng dụng rộng rãi trong tương lai nhưng với thời điểm hiện tại vẫn còn nhiều khó khăn Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 24 - S ự m ớ i m ẻ trong câu l ệ nh: Do mới phát triển và ra đời không lâu nên vẫn còn rất nhiều người lập trình chưa thông thuộc các công lệnh mới nên việc chuyển đổi giữa công nghệ cũ sang công nghệ HTML5 mới sẽ mất khá nhiều thời gian và công sức 1 2 2 CSS3 1 2 2 1 Khái ni ệ m CSS3 là một chuẩn mới nhất của CSS, hay nói cách khác nó là một phiên bản mới của CSS Nó được chia ra làm nhiều module và mỗi module sẽ có những nhiệm vụ khác nhau, khi kết hợp chúng với nhau sẽ tạo nên những hiệu ứng tuyệt vời CSS3 được xây dựng dựa trên các nguồn gốc của các style, selectors và cascade dựa trên phiên bản cũ của CSS 2 0 trước đó Nó cho phép thực thi thêm một số tính năng mới, bao gồm cả mới selectors, pseudo-class và các properties Bằng cách sử dụng các tính năng mới này, việc thiết kế trình bày template sẽ trở nên dễ dàng hơn rất nhiều 1 2 2 2 M ộ t s ố ư u đ i ể m c ủ a CSS3  CSS làm t ă ng s ứ c m ạ nh cho HTML: CSS kết hợp với HTML tạo nên một trang web có kĩ thuật cao hơn và giao diện đẹp mắt hơn Ngoài ra, khi sử dụng CSS sẽ giúp sắp xếp các thành phần trong HTML như: div, header, footer , body… một cách khoa học hơn  CSS h ỗ tr ợ các công c ụ tìm ki ế m: CSS giúp loại bỏ những đoạn code thừa vì các thẻ này thường hay được sử dụng lặp lại như các thẻ , thẻ

hay các thuộc tính không quan trọng được sinh ra bởi các công cụ lập trình  CSS giúp các website có s ự đồ ng b ộ tuy ệ t đố i: Dù website có bao nhiêu trang đi nữa thì cũng chỉ phải định dạng một file CSS duy nhất Khi muốn phát triển giao diện của website chúng ta chỉ phải thay đổi một trang duy nhất, các trang khác sẽ tự động thay đổi theo  CSS t ươ ng thích v ớ i h ầ u h ế t các trình duy ệ t: Ngôn ngữ này được hỗ trợ bởi hầu hết các trình duyệt Trang web được hiển thị ở các trình duyệt khác nhau với nội dung khá nhất quán Tuy nhiên trong một số trường hợp, người thiết kế web cần phải xác định khách hàng thường hay sử dụng trình duyệt nào để có sự điều chỉnh phù hợp 1 2 3 Sự kết hợp giữa HTML5 và CSS3 HTML5 và CSS3 là các công cụ cần thiết cho việc tạo ra các trang web động, sự kết hợp giữa HTML5 và CSS3 sẽ làm cho các ứng dụng web và trang web trở lên hấp dẫn dựa trên các thuộc tính mà các thế hệ ngôn ngữ trước không có HTML5 và CSS3 sẽ giúp các nhà thiết kế Wedsite dễ dàng hơn trong việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến Flash Một số ví dụ về Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 25 những gì chúng ta có thể làm với HTML5, CSS3 và một ít hỗ trợ từ JavaScript đó là Akihabra Games và Star Wars AT-AT Walker Thiết kế Shack cũng có một số ví dụ hiệu ứng động CSS3 khác Mặc dù không thể thay thế hoàn toàn cho Flash nhưng HTML5 và CSS3 có nhiều hứa hẹn trong lĩnh vực này Một số trình duyệt hiện tại không chấp nhận tất cả các tính năng phức tạp của HTML5 và CSS3, nhưng các nhà phát triển đang làm việc để thực hiện các tính năng này trên tất cả các trình duyệt một cách nhanh chóng nhất có thể 1 2 4 Những điểm khác và nổi bật của HTML5 và CSS3 HTML5 và CSS3 là những công nghệ mới nhất cho ứng dụng việc thiết kế web  HTML5 Các tính năng video của HTML5 cho phép đơn giản hoá việc thêm một video vào trang Web đã được nhận được nhiều sự chú ý, không những thế HTML5 còn có nhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng cũng như các nhà phát triển web  HTML5 có m ộ t s ố tính n ă ng để phân bi ệ t nó v ớ i HTML: HTML 5 vẫn giữ cho mình những cấu trúc cơ bản như HTML nhưng bên cạnh đó bổ sung thêm các tập lệnh mới, kết hợp với CSS3, tạo ra phân khung cho trang Có những câu lệnh trong HTML sẽ không được dùng trong HTML5 Bên cạnh đó HTML5 còn có khả năng hỗ trợ người lập trình như lập trình API (Application Programming Interface) và DOM (Document Object Model – Trong HTML đã được ứng dụng) Một số trình duyệt có hỗ trợ HTML 5: Firefox, Chrome, Safari, Opera Microsoft cũng đã được công bố là sẽ đưa HTML 5 vào trong sản phẩm mới IE 9 của mình HTML 5 sẽ là ngôn ngữ nền tảng web trong tương lai gần…  HTML5 có nh ữ ng đ i ể m n ổ i b ậ t sau: - Khả năng tương thích: HTML5 vẫn giữ lại các cú pháp truyền thống trước đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt hỗ trợ thì nó phải có một cơ chế fall back để render trong các trình duyệt cũ - Tính tiện dụng: đặt người dùng lên hàng đầu nên cú pháp của HTML5 khá thoải mái (dù chưa được chặt chẽ như XHTML), thiết kế hỗ trợ sẵn bảo mật, và sự tách biệt giữa phần nội dung và trình bày ngày càng thể hiện rõ: công việc định dạng hầu hết do CSS đảm nhiệm, HTML5 không còn hỗ trợ phần lớn các chức năng định dạng trong các phiên bản HTML trước đây - Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp các khai báo đơn giản hơn và một API mạnh mẽ Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 26 - Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho cácngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các thiết bị và nền tảng khác nhau - Điểm đặc trưng đầu tiên của một ngôn ngữ đánh dấu (markup language) là các thẻ Và ở mặt này thì HTML5 được bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và multimedia (video, audio…) Trong HTML5 cũng xuất hiện một khái niệm gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa Các thẻ này ra đời từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”) Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả Bên cạnh đó, thẻ của HTML5 cũng được xem là một cải tiến lớn Giờ đây với Form 2 0 (một cách gọi form trong HTML5), tất cả những chức năng cần (định dạng, validate data…) đã được xây dựng trực tiếp vào trong HTML không còn cần đến Ajax, Flash hay các công nghệ hỗ trợ  CSS3  CSS3 có nh ữ ng đ i ể m n ổ i b ậ t sau: - Multiple background: CSS3 cho phép áp dụng nhiều hình nền lên một phần tử (element) Tương tự như việc áp dụng đổ bóng , ta có thể dùng tất cả các thuộc tính như: background-image, background-repeat, background-position và background-size Các khai báo hình nền cách nhau bởi dấu phẩy(,): body { background: url( /images/2 png) no-repeat left top, url( /images/1 png) no-repeat right top, url( /images/3 png) no-repeat left bottom, url( /images/4 png) no-repeat right bottom; background-color: #ffffff; } - Selectors: CSS3 selectors cho phép chọn các phần tử HTML dễ dàng hơn Cách chọn của CSS3 không những giúp tiết kiệm thời gian viết CSS, giảm dung lượng file mà còn giúp cho mã HTML dễ nhìn hơn Các pseudo-classes mới cho phép chọn một nhóm các phần tử hoặc phần tử tiêng biệt nào đó (trước đây phải dùng javascript để làm việc này) Dưới đây là một số pseudo-classes mới: first-of-type: Chọn phần tử đầu tiên của thẻ nào đó last-child: Chỉ chọn phần tử cuối cùng nth-child(n): Chọn phần tử thứ n Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 27 not(e): Chọn tất cả trừ phần tử e - Resize: Với CSS3 ta có thể thay đổi kích thước phần tử với thuộc tính resize Với đoạn mã sau, ta sẽ thấy dưới cùng bên phải của thẻ div#ntuts xuất hiện một hình tam giác nhỏ để thay đổi kích thước: div#ntuts { resize: both; } - Font: Nếu ở CSS2 bị hạn chế với các font như Arial, Verdana , Tahoma vì phần lớn các máy tính có các font này thì ở CSS3 có thể sử dụng bất kỳ font nào chúng ta muốn Font sẽ được lấy từ một địa chỉ nào đó trên internet @font-face { font-family: VNIThufap2; src: url(''''http://ntuts com/fonts/VNI-Thufap2 ttf''''); } h1 { font-family: VNIThufap2; font-size: 3 2em; letter-spacing: 1px; text-align: center; } Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 28 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN 2 1 Khảo sát hiện trạng Giả định rằng có một công ty nào đó chưa có website bán hàng điện tử trực tuyến, hoặc công ty đã có website nhưng vẫn còn sơ sài và không tương thích ở mọi chế độ màn hình khác nhau của các thiết bị di động, chủ yếu vẫn là quản lý bằng thủ công, mua bán trực tiếp tại công ty Công ty đó có nhu cầu thống kê tình hình mua bán với những tiêu chí và hình thức khác nhau Vì vậy, cách thức quản lý của công ty chưa đáp ứng được yêu cầu của thời đại Nó biểu hiện ở những nhược điểm sau đây: + Cần nhiều nhân công + Tốc độ xử lý công việc chậm + Chu trình trao đổi hàng hóa tốn khá nhiều thời gian + Thường gặp khó khăn, mất thời gian khi kiểm tra Mặt khác, mục tiêu của công ty là cải thiện năng suất làm việc của nhân viên và giảm nhân công, tạo được một trang web mà người dùng có thể truy cập dễ dàng trên tất cả các lại màn hình thiết bị Với hệ thống quản lý trên thì công ty sẽ gặp rất nhiều khó khăn trong công việc Vì vậy việc xây dựng một website bán hàng điện tử trực tuyến theo xu hướng Responsive là rất hữu ích và cần thiết 2 2 Phân tích yêu cầu 2 2 1 Đặt vấn đề 2 2 1 1 Đị nh ngh ĩ a bài toán Khi một khách hàng truy cập vào website họ có khả năng xem và tìm kiếm những mặt hàng mà họ cần theo tên mặt hàng, danh mục, tên nhà cung cấp, giá sản phẩm Khi khách hàng xem một sản phẩm cụ thể website sẽ đưa ra thông tin chi tiết về sản phẩm, bao gồm mô tả của nhà cung cấp, hình ảnh sản phẩm và các đánh giá của những khách hàng khác Nếu muốn họ có thể đưa ra đánh giá của mình về sản phẩm hoặc đưa sản phẩm vào giỏ hàng thì website sẽ đưa ra yêu cầu đăng nhập tài khoản, nếu khách hàng chưa có tài khoản thì website sẽ đưa ra hướng dẫn tạo tài khoản mới Khi tạo tài khoản mới khách hàng sẽ phải cung cấp cho website các thông tin sau: Tên khách hàng, ngày sinh, số điện thoại, địa chỉ email, tên tài khoản, mật khẩu Khi một người dùng muốn sửa đổi thông tin cá nhân thì vào mục sửa đổi thông tin và được sửa những thông tin sau: mật khẩu, email, số ĐT, số tài khoản Người quản lý website có quyền xóa tài khoản khách hàng khi khách hàng vi phạm nội quy của website Bài báo cáo “Khóa luận tốt nghiệp” ------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------ SVTH: Trần Văn Quốc Lớp: DT12CTT01 29 Website sẽ giữ các thông tin về các nhà cung cấp và tình trạng các mặt hàng của các công ty Các công ty muốn đưa hàng lên website thì phải đăng kí tài khoản với nhà quản lý website, cung cấp các thông tin về công ty và các mặt hàng công ty sẽ cung cấp, số tài khoản của công ty,… Tài khoản của công ty sẽ được quyền thêm các mặt hàng mới nhưng phải có sự xác nhận của người quản lý website thì thông tin về sản phẩm mới được đưa lên cho khách hàng xem 2 2 1 2 H ệ th ố ng c ũ Hoạt động của hệ thống cũ như sau: Nhân viên bán hàng sẽ tính tiền số sản phẩm mà khách hàng đã mua và lập hóa đơn giao cho khách hàng thanh toán Thủ kho sẽ quản l

NỘI DUNG NGHIÊN CỨU

1.1 Công nghệ Responsive Web Design (RWD)

1.1.1 Lịch sử ra đời của RWD

Responsive website được nhắc đến lần đầu tiên vào từ năm 2010 Tuy nhiên, phải tới đầu năm 2012 thı̀ khái niê ̣m mới này mới được để mắt và tiếp câ ̣n Đó là những kỹ thuâ ̣t mới được quan tâm, ta ̣o ra một xu hướng và đã được rất nhiều website thực hiê ̣n thành công

Responsive Web Design (thiết kế web đáp ứng linh hoạt) ta có thể hiểu là nó như là một dạng chuẩn, một xu hướng thiết kế mới Nguyên nhân xuất phát từ việc cùng với sự phát triển của khoa học công nghệ, các nhà sản xuất trên thế giới cũng không ngừng ra mắt các sản phẩm thiết bị di động, tablet với đa dạng về độ rộng của màn hình, độ phân giải…Và để đáp ứng việc thay vì không thể nào kịp với việc ứng với mỗi thiết bị di động có kích cỡ màn hình phân giải khác nhau lại xây dựng một phiên bản cho nó Điều không thể với khoảng cách lớn về sự phát triển là lý do mà Responsive Web Design xuất hiện

Nó là sự kết hợp linh hoạt bởi các kỹ thuật flexible grid, responsive image và CSS media query…để từ đó chỉ với duy nhất một thiết kế website nhưng tương thích ở mọi chế độ màn hình khác nhau của các thiết bị di động, tablet nhờ sự tự thay đổi co giãn hiển thị với mọi chế độ

Hiện nay, cách thức mà Responsive Web Design hoạt động là do những lập trình viên viết code mà ở đó thiết lập những giá trị quy định để trình duyệt hiểu rồi tự động thực thi để tương thích với những quy định đó tuy theo kích thước của trình duyệt Responsive Web Design đang được ngày càng nhiều hơn sự chú ý đối với cộng đồng phát triển website cũng như đối với doanh nghiệp

Responsive website có thể hiểu là khái niê ̣m về một website "phản hồi", một website có khả năng "tự biến đổi" dựa trên môi trường hoa ̣t đô ̣ng của chúng Cùng một website, nhưng giao diê ̣n và phương thức tương tác của website đó có thể biến đổi khi truy câ ̣p website đó từ các thiết bi ̣ khác nhau như điê ̣n thoa ̣i, ipad, tablet, laptop

Responsive Web Design là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính thẩm mỹ với độ hiển thị nội dung co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone và duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi chế độ phân giải, linh hoạt trong chuyển dữ liệu sang dạng ngang hoặc đứng một cách nhanh chóng và tiện lợi.

TỔNG QUAN VỀ CÔNG NGHỆ RESPONSIVE, HTML5 VÀ CSS3

Công nghệ Responsive Web Design (RWD)

1.1.1 Lịch sử ra đời của RWD

Responsive website được nhắc đến lần đầu tiên vào từ năm 2010 Tuy nhiên, phải tới đầu năm 2012 thı̀ khái niê ̣m mới này mới được để mắt và tiếp câ ̣n Đó là những kỹ thuâ ̣t mới được quan tâm, ta ̣o ra một xu hướng và đã được rất nhiều website thực hiê ̣n thành công

Responsive Web Design (thiết kế web đáp ứng linh hoạt) ta có thể hiểu là nó như là một dạng chuẩn, một xu hướng thiết kế mới Nguyên nhân xuất phát từ việc cùng với sự phát triển của khoa học công nghệ, các nhà sản xuất trên thế giới cũng không ngừng ra mắt các sản phẩm thiết bị di động, tablet với đa dạng về độ rộng của màn hình, độ phân giải…Và để đáp ứng việc thay vì không thể nào kịp với việc ứng với mỗi thiết bị di động có kích cỡ màn hình phân giải khác nhau lại xây dựng một phiên bản cho nó Điều không thể với khoảng cách lớn về sự phát triển là lý do mà Responsive Web Design xuất hiện

Nó là sự kết hợp linh hoạt bởi các kỹ thuật flexible grid, responsive image và CSS media query…để từ đó chỉ với duy nhất một thiết kế website nhưng tương thích ở mọi chế độ màn hình khác nhau của các thiết bị di động, tablet nhờ sự tự thay đổi co giãn hiển thị với mọi chế độ

Hiện nay, cách thức mà Responsive Web Design hoạt động là do những lập trình viên viết code mà ở đó thiết lập những giá trị quy định để trình duyệt hiểu rồi tự động thực thi để tương thích với những quy định đó tuy theo kích thước của trình duyệt Responsive Web Design đang được ngày càng nhiều hơn sự chú ý đối với cộng đồng phát triển website cũng như đối với doanh nghiệp

Responsive website có thể hiểu là khái niê ̣m về một website "phản hồi", một website có khả năng "tự biến đổi" dựa trên môi trường hoa ̣t đô ̣ng của chúng Cùng một website, nhưng giao diê ̣n và phương thức tương tác của website đó có thể biến đổi khi truy câ ̣p website đó từ các thiết bi ̣ khác nhau như điê ̣n thoa ̣i, ipad, tablet, laptop

Responsive Web Design là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính thẩm mỹ với độ hiển thị nội dung co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone và duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi chế độ phân giải, linh hoạt trong chuyển dữ liệu sang dạng ngang hoặc đứng một cách nhanh chóng và tiện lợi

- SVTH: Trần Văn Quốc Lớp: DT12CTT01

 Hiểu một cách đơn giản Web Responsive là phong cách thiết kế website làm sao cho phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình

1.1.3 Những ưu thế của Responsive Web Design

 Thân thi ệ n v ớ i ng ườ i dùng

Thiết kế đáp ứng rõ ràng sẽ khiến trang web trở nên thân thiện với người sử dụng bởi nó có thể “vừa vặn” với bất kỳ màn hình nào của hầu hết các thiết bị Ngày nay, công nghệ phát triển không ngừng, smartphone không hề xa lạ với con người Vì vậy nếu có một trang web áp dụng giải pháp này, mọi người sẽ luôn có khả năng kết nối với trang web một các hiệu quả nhất

Với Responsive website sẽ được xử lý nhanh hơn khi người dung truy cập website những thiết bị di động Giao diện website được thiết kế tập trung hiển thị cho người dùng những nội dung quan trọng nhất, tất cả đều được thu gọn trong màn hình của thiết bị, giờ đây khách hàng truy cập website không phải mất thời gian để điều chỉnh kích thước, phóng to nội dung để có thể xem rõ hơn Có responsive website sẽ thật sự trở nên chuyên nghiệp và hiệu quả Đối với website một cột hay nhiều cột thì Responsive Web Design hiển thị vô cùng ấn tượng Và thiết kế hiện đại theo xu hướng 2014 và tương lai là flat và trải rộng full màn hình với các hiển thị theo từng dòng phẳng

 Có l ợ i t ạ i phân khúc dành cho đ i ệ n tho ạ i di độ ng

Nhờ có Responsive web design, có thể tính được toàn bộ số lượt người truy cập trong một trang web Có thể có được tất cả các thông tin cần thiết liên quan đến lượt người truy cập trang web bởi vì giờ đây người dùng trên di động cũng được tính lượt truy cập Do đó, lượng người truy cập được tính toán chính xác sẽ rất hiệu quả cho việc phân tích, đánh giá chất lượng của trang web hoặc nâng cấp nó

 Nâng cao khả năng chia sẻ

Responsive web design cũng cho người chủ trang web cơ hội để thu thập tất cả những chia sẻ của các mạng xã hội chỉ với một đường dẫn URL Nó sẽ cho phép chúng ta có những đóng góp hay hơn cho trang web, gần gũi hơn với người dùng

+ Không phải lo về đổi hướng người dùng

Các lập trình viên sẽ không phải tạo những liên kết ngược hay đổi hướng cho người dùng điện thoại nữa Hẳn nhiên là trang web sẽ dễ dàng xuất hiện trên các công cụ tìm kiếm hơn

+ Ít phải bảo dưỡng hơn

Phát triển một trang web riêng cho điện thoại di động là thì chúng ta phải bỏ công duy trì cả hai trang web Nhưng nếu chúng ta chọn Responsive web design, sự bảo hành cho

5 trang web sẽ rất nhỏ vì chỉ có duy nhất một bản thiết kế cho mọi thiết bị Điều này sẽ làm giảm khối lượng cho công việc

1.1.4 Khả năng ứng dụng Responsive Web Design hiện nay

Vài năm trở la ̣i đây, các ngôn ngữ lâ ̣p trı̀nh phu ̣c vu ̣ cho viê ̣c thiết kế website cũng có những bước tiến đáng nga ̣c nhiên Các ngôn ngữ lâ ̣p trı̀nh câ ̣p nhâ ̣t phiên bản mới cho phép khai thác nhiều tı́nh năng hơn, cung cấp nhiều công cu ̣ hơn cho các lâ ̣p trı̀nh viên HTML5, CSS3, PHP6 ngày càng được ứng du ̣ng nhiều hơn trên các website

Trước đây khoảng 2 năm, để thiết kế một website, lập trình viên thường lựa cho ̣n màn hı̀nh tiêu chuẩn 1024x768 (đô ̣ phân giải màn hı̀nh phổ biến trước đây) cho máy tı́nh thông thường hay 320x240 cho các điê ̣n thoa ̣i di đô ̣ng Website cho máy tı́nh thông thường đươ ̣c thiết kế riêng, website cho điê ̣n thoa ̣i di đô ̣ng được thiết kế riêng vı̀ những giới ha ̣n này Mô ̣t số công ty cho ̣n giải pháp là viết phần mềm cho các điê ̣n thoa ̣i di đô ̣ng chứ không thiết kế website bởi sự bất tiê ̣n khi lướt web trên điê ̣n thoai di đô ̣ng

HTML5 và CSS3

HTML5 là một chuẩn mới và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu văn bản – HyperText Markup Language explained (gọi tắt là HTML)

HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa, được đề xuất đầu tiên bởi Opera Software, đây là phiên bản thứ 5 của ngôn ngữ HTML - được tạo ra năm 1990 và chuẩn hóa như HTML4 năm 1997 - và xuất hiện vào tháng 12 năm 2012, là ngôn ngữ được giới thiệu bởi World Wide Web Consortium (W3C) Các phiên bản trước của HTML, như HTML 4.01 đã ra đời từ năm 1999 Cho đến nay các trang web đã có những thay đổi rất nhiều kể từ đó

HTML5 vẫn còn trong giai đoạn phát triển và hoàn thiện Tuy nhiên, nhiều phiên bản trình duyệt mới hiện nay đã có các hỗ trợ cho những phần tử, thẻ mới có trong HTML5 và các APIs

HTML5 thêm một số thẻ mới đặc biệt để xác định những cấu trúc phổ biến như:

- Thẻ : nó cũng giống như một phần hoặc một chương của một quyển sách, hay một đoạn trong một chương

- Thẻ : phần đầu hiển thị trên trang, không giống như thẻ head

- Thẻ : phần dưới chân trang giống như chữ ký trong một thông điệp email

- Thẻ : một tập liên kết tới những trang khác

- Thẻ : có thể xem như một bài viết cụ thể (chẳng hạn như một blog entry rất thích hợp để đặt trong một )

- Thẻ : thường đóng vai trò như một sidebar cung cấp các thông tin liên quan cho thẻ chứa nó

- Thẻ : xác định nội dung âm thanh, chẳng hạn như âm nhạc hoặc luồng âm thanh khác bất kỳ

- Thẻ : Tạo một danh sách gợi ý cho input

- Thẻ : Định nghĩa một trường sinh cặp key (cho form)

- Thẻ : Định nghĩa một kết quả tính toán

- Thẻ : Dùng cho mục đích đồ họa, vẽ bằng JavaScript

- Thẻ : Định nghĩa một nguồn multy media cho hoặc

- Thẻ : Định nghĩa một khung chứa cho các chương trình bên ngoài (như là Flash)

- Thẻ : Định nghĩa text tracks cho hoặc

 HTML5 làm gi ả m t ầ m quan tr ọ ng c ủ a các plug-ins

Trước đây, câu chuyện về Web gắn với plug-in hay add-on của một trình duyệt bởi nó khuyến khích sự sáng tạo cũng như sự trải nghiệm Âm thanh, ảnh động hay những thủ thuật khác xuất hiện trên Website thông qua plug-ins, phát triển bởi Sun, Adobe, RealAudio, Microsoft và rất nhiều hãng khác Giao diện plug-ins mở đối với tất cả và mọi người có thể trải nghiệm bằng cách thêm những tính năng mới

Cuộc chiến về Flash có thể là cuộc chiến nổi tiếng nhất, nhưng sức mạnh mới được từ HTML5 cũng đe dọa tới hệ mã lệnh JavaFX là lý tưởng, nhưng ai là người muốn học một loại cú pháp mới trong khi JavaScrip và Canvas đang làm rất tốt Ai cần hệ thống Real khi các video sẽ được chuyển thành audio và video?, Plug-in dường như sẽ bị lãng quên Plug-ins sẽ bị biến mất hoặc không được dùng, nó còn phụ thuộc vào việc làm của chúng ta Nếu chúng ta muốn vẽ hình ảnh, Canvas là thích hợp nhất Nhưng nếu muốn vẽ một thế giới 3-D đặc biệt, giống như trong các trò chơi Flash và Shockwave phức tạp, chúng ta sẽ phải dùng tới plug-in khi nó có thể kết nối trực tiếp tới video cũng như chạy thế giới game 3-D

 HTML5 h ỗ tr ợ đồ h ọ a t ươ ng tác

Website cũ tải hình ảnh bằng cách tải file GIF hay JPG Website mới có thể xây dựng hình ảnh trên Canvas Một loạt thư viện đồ họa đẹp được đưa ra, giúp cho đồ họa của Website trở nên tương tác hơn

Hiện nay, JavaScript có thể tính toán cũng như vẽ hình ảnh bằng dữ liệu Mọi thứ trở nên sống động khi những lập trình viên có thời gian để đưa ra giải pháp Adobe mới đây đã bắt đầu phát triển đồ họa tinh xảo cho HTML5 Sự xuất hiện của những công cụ này sẽ mở đầu cho những khả năng mới cũng như đồ họa sẽ được tinh xảo hơn hiện nay

 HTML5 cho phép các ứ ng d ụ ng k ế t n ố i t ớ i khu v ự c l ư u tr ữ file

Những người lập trình Web thường lưu trữ một lượng lớn thông tin trong các cookies

(300 cookies tương đương với 4096 byte) Bộ công cụ dùng plug-in Flash để trưng dụng lựa chọn từ ổ đĩa là phiên bản đầu của bộ công cụ Dojo Tuy nhiên, giờ đây chỉ cần sử dụng HTML5 là được

Lập trình viên có thể lưu trữ bất cứ thứ gì họ muốn Điều này giúp việc cài đặt các ứng dụng dễ dàng hơn giống như các ứng dụng cũ Các ứng dụng chạy mã JavaScript từ ứng dụng lưu trữ HTML5 ngoại tuyến và hoạt động ngay cả khi kết nối Website đang hoạt động

Phương pháp này không ảnh hưởng tới hoạt động phát triển nhóm “đám mây” bởi những dữ liệu có thể hoạt động như những lưu trữ thông minh Lập trình game có thể lưu

22 trữ theo vùng những phần mô tả và ảnh minh họa, giúp tiết kiệm thời gian tải thông tin nhiều lần

Ngược lại, những dữ liệu này sẽ được lưu trữ trong các tệp tin hệ thống Thế nên việc lấy lại dữ liệu không phải là dễ dàng Người dùng muốn chuyển dữ liệu từ máy này sang máy khác sẽ gặp phải khó khăn

 HTML5 s ẽ đơ n gi ả n hóa chia nh ỏ d ữ li ệ u v ớ i cyborg data

Ai đã từng chia nhỏ dữ liệu từ các trang web đều biết rằng HTML không giúp được nhiều ngoại trừ giúp trình duyệt nơi đặt dữ liệu Microformats trong HTML5 cung cấp các phương pháp tinh xảo giúp việc phân tích dữ liệu dễ dàng hơn

Không ai có thể dự đoán microformats có thể thay đổi Web tới mức nào nhưng rất dễ để thấy được nó đã giúp các lập trình viên có nhiều giải pháp hơn

 HTML5 giúp h ợ p nh ấ t các đị a ch ỉ Đối với máy chủ Web, địa chỉ máy tính của chúng ta đơn thuần chỉ là những con số ẩn danh Chuẩn HTML5 cho phép các trình duyệt định vị vị trí của người dùng Tuy nhiên, nó sẽ không hoạt động với các máy bàn (hoạt động với GPS hoặc Wifi), nhưng nó lại hoạt động tốt với smartphone cầm tay

 HTML5 làm video c ủ a Website đẹ p h ơ n

Chuẩn HTML5 giúp các nhà lập trình tiếp hợp videp dễ dàng hơn với thông tin trên trang, cung cấp các ứng dụng tới lập trình viên jQuery và PHP ngoài Flash, Silverlight hay JavaFX

Mọi người đều muốn cung cấp mã nguồn mở để mở những hình ảnh động và âm thanh tương ứng dẫn đến việc không thống nhất Chuẩn HTML5 sẽ là mã nguồn mở trung gian, có nghĩa là chúng ta thay đổi cách gọi từ plug-in thành codec Tuy nhiên, dù ta có chuẩn video nhưng trình duyệt lại rất khó để dịch dữ liệu

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN

Khảo sát hiện trạng

Giả định rằng có một công ty nào đó chưa có website bán hàng điện tử trực tuyến, hoặc công ty đã có website nhưng vẫn còn sơ sài và không tương thích ở mọi chế độ màn hình khác nhau của các thiết bị di động, chủ yếu vẫn là quản lý bằng thủ công, mua bán trực tiếp tại công ty

Công ty đó có nhu cầu thống kê tình hình mua bán với những tiêu chí và hình thức khác nhau Vì vậy, cách thức quản lý của công ty chưa đáp ứng được yêu cầu của thời đại

Nó biểu hiện ở những nhược điểm sau đây:

+ Tốc độ xử lý công việc chậm

+ Chu trình trao đổi hàng hóa tốn khá nhiều thời gian

+ Thường gặp khó khăn, mất thời gian khi kiểm tra

Mặt khác, mục tiêu của công ty là cải thiện năng suất làm việc của nhân viên và giảm nhân công, tạo được một trang web mà người dùng có thể truy cập dễ dàng trên tất cả các lại màn hình thiết bị Với hệ thống quản lý trên thì công ty sẽ gặp rất nhiều khó khăn trong công việc

Vì vậy việc xây dựng một website bán hàng điện tử trực tuyến theo xu hướng Responsive là rất hữu ích và cần thiết.

Phân tích yêu cầu

2.2.1.1 Đị nh ngh ĩ a bài toán

Khi một khách hàng truy cập vào website họ có khả năng xem và tìm kiếm những mặt hàng mà họ cần theo tên mặt hàng, danh mục, tên nhà cung cấp, giá sản phẩm Khi khách hàng xem một sản phẩm cụ thể website sẽ đưa ra thông tin chi tiết về sản phẩm, bao gồm mô tả của nhà cung cấp, hình ảnh sản phẩm và các đánh giá của những khách hàng khác Nếu muốn họ có thể đưa ra đánh giá của mình về sản phẩm hoặc đưa sản phẩm vào giỏ hàng thì website sẽ đưa ra yêu cầu đăng nhập tài khoản, nếu khách hàng chưa có tài khoản thì website sẽ đưa ra hướng dẫn tạo tài khoản mới Khi tạo tài khoản mới khách hàng sẽ phải cung cấp cho website các thông tin sau: Tên khách hàng, ngày sinh, số điện thoại, địa chỉ email, tên tài khoản, mật khẩu Khi một người dùng muốn sửa đổi thông tin cá nhân thì vào mục sửa đổi thông tin và được sửa những thông tin sau: mật khẩu, email, số ĐT, số tài khoản Người quản lý website có quyền xóa tài khoản khách hàng khi khách hàng vi phạm nội quy của website

Website sẽ giữ các thông tin về các nhà cung cấp và tình trạng các mặt hàng của các công ty Các công ty muốn đưa hàng lên website thì phải đăng kí tài khoản với nhà quản lý website, cung cấp các thông tin về công ty và các mặt hàng công ty sẽ cung cấp, số tài khoản của công ty,… Tài khoản của công ty sẽ được quyền thêm các mặt hàng mới nhưng phải có sự xác nhận của người quản lý website thì thông tin về sản phẩm mới được đưa lên cho khách hàng xem

Hoạt động của hệ thống cũ như sau:

Nhân viên bán hàng sẽ tính tiền số sản phẩm mà khách hàng đã mua và lập hóa đơn giao cho khách hàng thanh toán

Thủ kho sẽ quản lý việc nhập, xuất hàng và kiểm tra sản phẩm của cửa hàng Khi bán sản phẩm số lượng lớn với đối tác trực tiếp hay cần xuất hàng lên quầy thì thủ kho sẽ lập phiếu xuất hàng Khi hết loại sản phẩm nào đó thì cần nhập thêm hàng, hay nhập thêm loại sản phẩm mới thì thủ kho sẽ tiến hành tạo phiếu nhập hàng, trong 2 loại phiếu này, thủ kho phải ghi rõ thông tin trên phiếu về ngày tháng năm nhập- xuất, loại, số lượng…Trong quá trình kiểm tra hàng nếu phát hiện thấy sản phẩm nào không đạt tiêu chuẩn thì lập Phiếu trả hàng

Nhân viên kế toán ghi nhận trong sổ kế toán những dữ liệu giao dịch có thể đo lường bằng tiền, từ đó tiến hành thống kê doanh thu, số sản phẩm đã bán, số sản phẩm tồn kho…Những thông tin này được người quản lý cửa hàng sử dụng để đưa ra những quyết định, những phương án kịp thời để phát triển cửa hàng

Người quản lý là người trực tiếp liên hệ với các nhà cung cấp để nhập hàng, cũng như quan hệ với đối tác để bán hàng Người quản lý sẽ quản lý nhân viên, quản lý doanh thu của cửa hàng, quản lý việc nhập, xuất hàng

 Ưu điểm của hệ thống cũ:

- Hệ thống làm việc đơn giản

- Công cụ và phương tiện ít

- Ít phụ thuộc sự cố đột xuất, những tác động khách quan.

 Nhược điểm của hệ thống cũ:

- Khi có yêu cầu công việc tìm kiếm và báo cáo mất thời gian

- Khi việc cập nhật, sửa đổi, huỷ bỏ thông tin thiếu chính xác

- Việc lưu chuyển thông tin chậm, kém hiệu quả

- Việc quản lý rất phức tạp vì mất nhiều thời gian

- Khắc phục những khó khăn, hạn chế của hệ thống cũ

- Tổ chức hoạt động chặt chẽ hiệu quả

- Giảm bớt lực lượng lao động trong hệ thống

- Việc lưu trữ, tìm kiếm, thống kê thông tin nhanh, chính xác

- Việc quản lý thông tin được bảo đảm

Xây dựng hệ thống website bán hàng điện tử trực tuyến với các yêu cầu sau:

- Nhóm chức năng đăng ký , đăng nhập thành viên

- Nhóm chức năng xem thông tin: xem thông tin giỏ hàng, xem thông tin đơn hàng, xem thông tin sản phẩm, xem thông tin cá nhân

- Nhóm chức năng quản lý thông tin: gồm quản lý thông tin cá nhân, quản lý danh sách thành viên, quản lý danh mục sản phẩm

- Nhóm chức năng nhập, xuất hàng và cập nhật thông tin lên website

- Nhóm chức năng mua hàng và tiếp nhận và xử lý đơn hàng

 Các chức năng chính của hệ thống:

- Xem thông tin thành viên

- Xem thông tin sản phẩm

- Tốc độ: chương trình khi chạy lên không mất nhiều thời gian, tốc độ tra cứu thông tin nhanh, chính xác, rõ ràng

- Khối lượng lưu trữ: vì số lượng truy cập rất đông và theo thời gian dài thông tin lưu trữ sẽ rất lớn, bởi vậy trước tiên phải xác định cơ sở dữ liệu được xây dựng phải đảm bảo lưu trữ được tất cả khối lượng lớn trong thời gian dài

- Giao diện: đẹp, dễ thao tác sử dụng, thân thiện với người dùng

- Đảm bảo được việc nâng cấp: công nghệ ngày càng phát triển nhanh chóng, nhu cầu con người cũng thay đổi không ngừng, để phục vụ hiệu quả cho quá trình luôn tự hoàn thiện, hệ thống đòi hỏi sự quản trị đúng đắn, nâng cấp phù hợp với sự phát triển.

2.2.2 Tác nhân của hệ thống

Hệ thống website bán hàng điện tử trực tuyến gồm các tác nhân sau:

 Khách hàng: là những khách truy cập vào hệ thống nhưng chưa đăng kí là thành viên, xem thông tin, bình luận sản phẩm, mua hàng

 Thành viên: là những khách hàng đã đăng kí là thành viên của hệ thống, tìm kiếm sản phẩm, mua hàng, bình luận sản phẩm, thanh toán

 Người quản lý: điều hành, quản lý và theo dõi mọi hoạt động của hệ thống: tìm kiếm, xem, thêm, sửa, xóa thành viên, thêm sửa xóa sản phẩm

 Bộ phận kinh doanh: tiếp nhận đơn hàng, kiểm tra thông tin, liên hệ với khách hàng để khẳng định các thông tin trên đơn hàng và chuyển hàng

 Bộ phận kho: kiểm tra hàng còn trong kho, nhận hàng, xuất hàng và cập nhật lên website hệ thống

 Bộ phận nhập hàng: thực hiện chức năng nhập hàng khi có nhu cầu

 Hệ thống ngân hàng: xác nhận thông tin tài khoản của khách hàng, trung gian chuyển tiền của khách hàng sang tài khoản của cửa hàng

2.2.3 Xác định các ca sử dụng(UC) của các tác nhân

 Đối với tác nhân khách hàng có các ca sử dụng:

- Tìm kiếm, xem, bình luận sản phẩm

 Đối với tác nhân Thành viên có các ca sử dụng:

- Tìm kiếm, xem, bình luận sản phẩm

- Xem, sửa thông tin cá nhân

- Xem, sửa thông tin giỏ hàng

 Đối với tác nhân người quản lý có các ca sử dụng:

- Thêm, sửa, xóa thông tin tài khoản nhân viên

- Thêm, sửa, xóa sản phẩm

 Đối với tác nhân bộ phận kinh doanh có các ca sử dụng:

- Xác nhận thông tin đơn hàng

- Cập nhật đơn đặt hàng

- Thống kê, báo cáo mặt hàng, hóa đơn

 Đối với tác nhân bộ phận kho có các ca sử dụng:

 Đối với tác nhân bộ phận nhập hàng có các ca sử dụng:

 Đối với tác nhân hệ thống ngân hàng có các ca sử dụng:

- Thanh toán bằng séc hoặc bằng thẻ

2.2.4 Biểu đồ Ca sử dụng của hệ thống

2.2.4.1 Bi ể u đồ UC t ổ ng quát

Sua thong tin nguoi dung

Xoa thong tin ca nhan Nhan, xuat hang

He thong ngan hang Thanh toan

Xem thong tin san pham

Tim kiem thong tin san pham

Xac nhan thong tin don hang

2.2.4.2 Bi ể u đồ UC đă ng ký

Xem san pham Xem san pham

Dang kyXem san pham

2.2.4.3 Bi ể u đồ UC đă ng nh ậ p

Xem san pham Xem san pham

Dang nhap Xem san pham

2.2.4.4 Bi ể u đồ tìm ki ế m s ả n ph ẩ m

2.2.4.5 Bi ể u đồ UC mua hàng

Them san pham vao gio hang

Loai san pham khoi gio hang

Thanh toan qua ATM Thanh toan qua the ghi no

2.2.4.6 Bi ể u đồ UC thanh toán

2.2.4.7 Bi ể u đồ UC nh ậ p hàng

Nhap hang Kiem tra hang trong kho

2.2.4.8 Bi ể u đồ UC xu ấ t hàng

Cap nhat hang len website

2.2.5 Đặc tả ca sử dụng

 Ca s ử d ụ ng Đă ng ký

Tên Use-Case: Đăng ký ID: 1 Mức độ quan trọng: Cao

Kiểu Use-Case: Chi tiết, cần thiết

Những người tham gia và quan tâm:

Khi khách hàng truy cập vào hệ thống website bán hàng điện tử trực tuyến

Khách hàng nhập tên và thông tin đăng ký vào form đăng ký khi mở hệ thống

Hệ thống sẽ bắt đầu kiểm tra thông tin đăng ký nhập vào Nếu thông tin nhập vào là đúng thì sẽ thông báo đăng ký thành công, ngược lại nếu thông tin đăng ký nhập vào là sai thì sẽ thông báo không thành công và yêu cầu nhập lại

Khi khách hàng bắt đầu truy cập vào hệ thống

Bao hàm (Include): Kiểm tra thông tin

Các luồng sự kiện thông thường:

1 Khách hàng chọn mục đăng ký thành viên

2 Form đăng ký thành viên hiển thị

3 Khách hàng nhập thông tin cá nhân vào form đăng ký

5 Hệ thống báo kết quả quá trình nhập thông tin cá nhân

6 Hệ thống cập nhật thông tin của tài khoản mới đăng ký

Các luồng sự kiện con:

Các luồng sự kiện thay thế/ngoại lệ:

3a Nếu thông tin đăng ký không hợp lệ thì hệ thống thông báo yêu cầu người dùng đăng ký lại

 Ca s ử d ụ ng Đă ng nh ậ p

Tên Use-Case: Đăng nhập ID: 2 Mức độ quan trọng: Cao

Thành viên, Người quản lý

Thành viên, Người quản lý phải nhập tên và mật khẩu vào form đăng nhập khi mở hệ thống Hệ thống sẽ bắt đầu kiểm tra tên và mật khẩu nhập vào Nếu thông tin nhập vào là đúng thì sẽ thông báo đăng nhập thành công và cho vào cửa sổ chương trình, ngược lại nếu thông tin nhập vào sai thì sẽ thông báo ra màn hình và yêu cầu nhập lại

Thành viên, Người quản lý sau khi đăng ký và muốn đăng nhập vào hệ thống

Bao hàm (Include): Kiểm tra thông tin

1 Thành viên, Người quản lý chọn chức năng đăng nhập

2 Form đăng nhập hiển thị

3 Nhập tên, mật khẩu vào form đăng nhập

4 Hệ thống kiểm tra tên, mật khẩu của Thành viên, Người quản lý

5 Nếu việc đăng nhập thành công thì vào hệ thống

3a Thành viên, Người quản lý nhập sai tên, mật khẩu thì đăng nhập không thành công

+ Hệ thống thông báo quá trình đăng nhập không thành công

+ Chọn: đăng ký hay đăng nhập lại

+ Hệ thống yêu cầu nhập lại tên và mật khẩu.

 Ca s ử d ụ ng Tìm Ki ế m s ả n ph ẩ m

Tên Use-Case: Tìm kiếm sản phẩm ID: 3 Mức độ quan trọng: Trung bình

Tác nhân chính: Khách hàng, Thành viên

Khách hàng, Thành viên muốn tìm kiếm sản phẩm trên website

Ca sử dụng mô tả việc Khách hàng, Thành viên muốn tìm kiếm thông tin về sản phẩm như: thông số kỹ thuật, xuất xứ, giá bán của sản phẩm…vv

Khách hàng, Thành viên tìm kiếm sau khi truy cập vào hệ thống

Bao hàm (Include): Tìm kiếm sản phẩm

1 Người sử dụng kích vào mục tìm kiếm sản phẩm

2 Hệ thống hiển thị form tìm kiếm: tìm kiếm theo tên, tìm kiếm theo nhà cung cấp, tìm theo mã sản phẩm, tìm theo giá…

3 Người sử dụng nhập thông tin cần thiết vào form tìm kiếm

5 Hệ thống báo kết quả tìm kiếm

Các luồng sự kiện thay thế/ngoại lệ:không có

Tên Use-Case: Ca sử dụng Thêm sản phẩm ID: 4 Mức độ quan trọng: Cao

Tác nhân chính: Người quản lý Kiểu Use-Case: Chi tiết, cần thiết

Ca sử dụng mô tả việc Người quản lý thêm sản phẩm mới vào trong hệ thống website

Người quản lý sau khi đăng nhập vào hệ thống

Kết hợp (Association): Người quản lý

1 Người quản lý chọn chức năng thêm sản phẩm

2 Hệ thống hiển thị form để thêm sản phẩm

3 Người quản lý nhập thông tin sản phẩm cần thêm

4 Nhấn nút lưu thông tin

5 Nếu việc cập nhật thành công thì thực hiện lưu thông tin

Các luồng sự kiện thay thế/ngoại lệ: không có

 Ca s ử d ụ ng Xem thông tin s ả n ph ẩ m

Tên Use-Case: Ca sử dụng Xem thông tin sản phẩm ID: 5 Mức độ quan trọng: Trung bình

Tác nhân chính: Khách hàng, Thành viên

Khách hàng, Thành viên muốn xem thông tin sản phẩm trên hệ thống website

Ca sử dụng mô tả việc Người quản lý, Khách hàng, Thành viên xem thông tin về các sản phẩm có trong hệ thống website

Khách hàng, Thành viên sau khi truy cập vào hệ thống

1 Khách hàng, Thành viên chọn sản phẩm cần xem

2 Form xem thông tin sản phẩm xuất hiện, hệ thống hiển thị thông tin về sản phẩm đã chọn

3 Khách hàng, Thành viên xem thông tin chi tiết về sản phẩm được hiển thị

 Ca s ử d ụ ng S ử a thông tin s ả n ph ẩ m

Tên Use-Case: Ca sử dụng Sửa thông tin sản phẩm ID: 6 Mức độ quan trọng: Trung bình

Người quản lý muốn sửa thông tin sản phẩm trên hệ thống website

Ca sử dụng mô tả việc Người quản lý sửa thông tin về các sản phẩm có trong hệ thống website

Bao hàm (Include): Người quản lý

7 Người quản lý chọn chức năng sửa thông tin sản phẩm

8 Hệ thống hiển thị form sửa thông tin với các thông tin cũ của sản phẩm hiện tại

9 Người quản lý nhập các thông tin mới

3a.Nếu việc cập nhật thông tin nhập không hợp lệ thì thực hiện:

+ Hệ thống báo việc nhập dữ liệu không hợp lệ

+ Người quản lý nhập lại thông tin

+ Nếu việc cập nhật thành công thì thực hiện lưu thông tin

 Ca s ử d ụ ng Xóa thông tin s ả n ph ẩ m

Tên Use-Case: Ca sử dụng Xóa thông tin sản phẩm ID: 7 Mức độ quan trọng: Trung bình

Người quản lý muốn xóa thông tin sản phẩm hết hàng hoặc không bán sản phẩm đó nữa trên hệ thống website

Ca sử dụng mô tả việc Người quản lý xóa thông tin về các sản phẩm hết hàng hoặc không bán sản phẩm đó nữa trong hệ thống website

Bao hàm (Include): Người quản lý

1 Người quản lý chọn chức năng xóa thông tin sản phẩm

2 Hệ thống hiển thị form sửa thông tin với các thông tin cũ của sản phẩm hiện tại

3 Người quản lý xóa thông tin sản phẩm

Các luồng sự kiện con: không có

 Ca s ử d ụ ng Tìm ki ế m thành viên

Tên Use-Case: Tìm kiếm thành viên

ID: 8 Mức độ quan trọng: Trung bình

Người quản lý muốn tìm kiếm thông tin thành viên muốn xem

Ca sử dụng mô tả việc Người quản lý muốn tìm kiếm thông tin về Thành viên như: Họ tên, địa chỉ, gới tính, ngày sinh, email…

Người quản lý, Thành viên tìm kiếm sau khi đăng nhập vào hệ thống

7 Người quản lý chọn vào mục tìm kiếm

8 Hệ thống hiển thị form tìm kiếm

9 Người quản lý nhập thông tin cần thiết vào form tìm kiếm

11 Hệ thống báo kết quả tìm kiếm

 Ca s ử d ụ ng Xem thông tin cá nhân

Tên Use-Case: Ca sử dụng Xem thông tin cá nhân ID: 9 Mức độ quan trọng: Trung bình

Người quản lý muốn xem thông tin của mình trên hệ thống website

Ca sử dụng mô tả việc Người quản lý có thể xem các thông tin đăng ký

1 Người quản lý chọn chức năng xem thông tin cá nhân

2 Hệ thống hiển thị form xem thông tin với các thông tin cũ của người quản lí hiện tại

 Ca s ử d ụ ng S ử a thông tin cá nhân

 Tên Use-Case: Ca sử dụng Sửa thông tin cá nhân ID: 10 Mức độ quan trọng: Cao

Người quản lý muốn sửa thông tin của mình trên hệ thống website

Ca sử dụng mô tả việc Người quản lý có thể thay đổi các thông tin đăng ký

Người quản lý, Thành viên sau khi đăng nhập vào hệ thống

4 Người quản lý chọn chức năng sửa thông tin cá nhân

5 Hệ thống hiển thị form thông tin với các thông tin cũ của người quản lý hiện tại

6 Người quản lý nhập các thông tin mới

3a Nếu thông tin nhập không hợp lệ:

+ Người quản lý, Thành viên nhập lại thông tin

+ Nhấn nút lưu thông tin

 Ca s ử d ụ ng Xóa thông tin cá nhân

 Tên Use-Case: Ca sử dụng Xóa thông tin cá nhân ID: 11 Mức độ quan trọng: Cao

Người quản lý muốn xóa thông tin của mình trên hệ thống website

Ca sử dụng mô tả việc Người quản lý xóa các thông tin đăng ký

1 Người quản lý chọn chức năng xóa thông tin cá nhân

2 Hệ thống hiển thị form thông tin với các thông tin cũ của Người quản lý hiện tại

3 Người quản lý xóa thông tin cá nhân

4 Nếu việc xóa thành công thì thông báo là đã xóa thành công

3a Nếu thông tin nhập không hợp lệ:

+ Người quản lý nhập lại thông tin

+ Nhấn nút lưu thông tin

 Tên Use-Case: Ca s ử d ụ ng Mua hàng ID: 12 Mức độ quan trọng: Cao

Tác nhân chính: Thành viên, Khách hàng

Thành viên, Khách hàng muốn mua sản phẩm trên hệ thống website

Ca sử dụng mô tả việc Thành viên, Khách hàng đưa sản phẩm đã chọn vào giỏ hàng

Thành viên, Khách hàng sau khi đăng nhập vào hệ thống và đã xem thông tin của sản phẩm cần mua

Kết hợp (Association): Thành viên, Khách hàng

Bao hàm (Include): Xem giỏ hàng

1 Thành viên,Khách hàng chọn chức năng thêm vào giỏ hàng để đưa sản phẩm đã chọn vào lưu trữ trong giỏ hàng

2 Hệ thống hiển thị thông tin giỏ hàng như: Mã sản phẩm, tên sản phẩm, số lượng…

3 Thành viên, Khách hàng chọn vào thanh toán, hệ thống sẽ hiển thị form thanh toán để Thành viên, Khách hàng nhập thông tin cá nhân và chọn hình thức thanh toán

3a - Nếu chưa chọn sản phẩm cần mua:

+ Hệ thống thông báo sản phẩm chưa được chọn

+ Hiển thị sản phẩm để khách hàng chọn

+ Chọn chức năng thêm vào giỏ hàng để đưa sản phẩm đã chọn vào lưu trữ trong giỏ hàng

+ Hệ thống hiển thị thông tin giỏ hàng như: Mã sản phẩm, tên sản phẩm, số lượng…

+ Thành viên, Khách hàng chọn vào thanh toán, hệ thống sẽ hiển thị form thanh toán để Thành viên nhập thông tin cá nhân và chọn hình thức thanh toán

 Tên Use-Case: Ca s ử d ụ ng Thanh toán ID: 12 Mức độ quan trọng: Cao

Tác nhân chính: Thành viên Kiểu Use-Case: Chi tiết, cần thiết

Thành viên, Khách hàng muốn mua sản phẩm trên hệ thống website

Ca sử dụng mô tả việc Thành viên, Khách hàng đưa sản phẩm đã chọn vào giỏ hàng

Thành viên sau khi đăng nhập vào hệ thống và đã xem thông tin của sản phẩm cần mua

Kết hợp (Association): Thành viên, Khách hàng

Mở rộng (Extend): Thanh toán

5 Thành viên, Khách hàng chọn chức năng thêm vào giỏ hàng để đưa sản phẩm đã chọn vào lưu trữ trong giỏ hàng

6 Hệ thống hiển thị thông tin giỏ hàng như: Mã sản phẩm, tên sản phẩm, số lượng…

7 Thành viên chọn vào thanh toán, hệ thống sẽ hiển thị form thanh toán để

Thành viên, Khách hàng nhập thông tin cá nhân và chọn hình thức thanh toán

3a - Nếu chưa chọn sản phẩm cần mua:

+ Hệ thống thông báo sản phẩm chưa được chọn

+ Hiển thị sản phẩm để khách hàng chọn

+ Chọn chức năng thêm vào giỏ hàng để đưa sản phẩm đã chọn vào lưu trữ trong giỏ hàng

+ Hệ thống hiển thị thông tin giỏ hàng như: Mã sản phẩm, tên sản phẩm, số lượng…

+ Thành viên, Khách hàng chọn vào thanh toán, hệ thống sẽ hiển thị form thanh toán để Thành viên nhập thông tin cá nhân và chọn hình thức thanh toán

 Ca s ử d ụ ng Ki ể m tra đơ n hàng

 Tên Use-Case: Ca sử dụng Kiểm tra đơn hàng ID: 13 Mức độ quan trọng: Cao

Tác nhân chính: Bộ phận kinh doanh Kiểu Use-Case: Chi tiết, cần thiết

Những người tham gia và quan tâm: Bộ phận kinh doanh

Ca sử dụng mô tả việc nhân viên kinh doanh kiểm tra và xác nhận thông tin đơn hàng

Sau khi Thành viên, Khách hàng đã chọn mua hàng và đã thanh toán

Kết hợp (Association): Bộ phận kinh doanh

1 Nhân viên kinh doanh kiểm tra đơn hàng

2 Hệ thống hiển thị thông tin đơn hàng

3 Nhân viên xác nhận thông tin trên đơn hàng

 Ca s ử d ụ ng Nh ậ p, xu ấ t hàng

 Tên Use-Case: Ca sử dụng Nhập, xuất hàng ID: 14 Mức độ quan trọng: Cao

Tác nhân chính: Bộ phận Kho Kiểu Use-Case: Chi tiết, cần thiết

Bộ phận kho, Bộ phận kinh doanh

Ca sử dụng mô tả việc Bộ phận kho nhập hàng và xuất hàng theo đơn hàng được chuyển từ Bộ phận kinh doanh

Sau khi nhận đơn hàng từ Bộ phận kinh doanh

Kết hợp (Association): Bộ phận kinh doanh

1 Nhân viên bộ phận kinh doanh chuyển đơn hàng đến bộ phận kho

2 Nhân viên bộ phận kho kiểm tra đơn hàng sau đó nhận hoặc xuất theo đơn hàng

3 Nhân viên bộ phận kho xác nhận thông tin trên đơn hàng

Thiết kế các tương tác của hệ thống

[1] Biểu đồ tuần tự UC đăng ký

: Khach hang Dang ky Dang ky

1: Nhap thong tin dang ky()

[2] Biểu đồ cộng tác UC đăng ký

1: Nhap thong tin dang ky() 4: Xac nhan()

2: Dang ky() 5: Cap nhat CSDL()

: Thanh vien Dang nhap Dang nhap

1: Nhap thong tin dang nhap()

[2] Biểu đồ cộng tác UC đăng nhập

2: Dang nhap() 5: Cap nhat CSDL()

1: Nhap thong tin dang nhap()

2.3.3 UC tìm kiếm sản phẩm

[1] Biểu đồ tuần tự UC tìm kiếm sản phẩm

3: Tra lai thong tin tim duoc()

He thong 1: Nhap tu khoa tim kiem()

[2] Biểu đồ cộng tác UC tìm kiếm sản phẩm

1: Nhap tu khoa tim kiem()

3: Tra lai thong tin tim duoc()

[1] Biểu đồ tuần tự UC Thanh toán

: Thanh vien Thong tin san pham

Thanh toan Thanh toan Ngan hang Ngan hang Don hang Don hang

2: Hien thi danh muc san pham()

5: Phan hoi thong tin() 7: Yeu cau thanh toan()

10: Hien thi form thanh toan()

14: Cap nhat don hang() 15: Phan hoi thong tin()

12: Xac nhan thanh toan() 11: Nhap thong tin thanh toan()

3: Chon san pham can mua()

[2] Biểu đồ cộng tác UC thanh toán

1: Yeu cau mua hang() 3: Chon san pham can mua() 2: Hien thi danh muc san pham()

6: Danh nhap thanh cong() 8: Dang nhap() 11: Nhap thong tin thanh toan()

7: Yeu cau thanh toan() 10: Hien thi form thanh toan()

[1] Biểu đồ tuần tự UC Nhập hàng

: Bo phan kho Kho hang Kho hang : Bo phan nhap hang

1: Kiem tra() 2: Thong tin phan hoi()

[2] Biểu đồ cộng tác UC Nhập hàng

[1] Biểu đồ tuần tự UC xuất hàng

: Khach hang : Bo phan chuyen phat hang

: Bo phan chuyen phat hang

: Bo phan kho : Bo phan kho

[2] Biểu đồ cộng tác UC xuất hàng

: Bo phan chuyen phat hang

9: Giao hang 10: Ky xac nhan

Thiết kế các lớp của hệ thống

2.4.1 Xác định các lớp biên

Dựa vào các ca sử dụng đã được xây dựng ở trên, hệ thống có các lớp biên như sau:

- Lớp I_NQL_DangKy: giao diện để tác nhân Người quản lý đăng ký vào hệ thống

- Lớp I_KH_DangKy: giao diện để tác nhân Khách hàng đăng ký vào hệ thống

- Lớp I_NQL_DangNhap: giao diện để tác nhân Người quản lý đăng nhập vào hệ thống

- Lớp I_TV_DangNhap: giao diện để tác nhân Thành viên đăng nhập vào hệ thống

- Lớp I_NQL_Timkiem: giao diện để tác nhân Người quản lý tìm kiếm thông tin sản phẩm và Thành viên của hệ thống

- Lớp I_KH_Timkiem: giao diện để tác nhân Khách hàng tìm kiếm thông tin sản phẩm của hệ thống

- Lớp I_NQL_XemTV: giao diện để tác nhân Người quản lý xem thông tin Thành viên

- Lớp I_NQL_ThemTV: giao diện để tác nhân Người quản lý thêm Thành viên

- Lớp I_NQL_SửaTV: giao diện để tác nhân Người quản lý sửa thông tin Thành viên

- Lớp I_NQL_XoaTV: giao diện để tác nhân Người quản lý xóa thông tin Thành viên

- Lớp I_ NQL_ThemSP: giao diện để tác nhân Người quản lý thêm sản phẩm

- Lớp I_ NQL_SửaSP: giao diện để tác nhân Người quản lý sửa thông tin sản phẩm

- Lớp I_ NQL_XóaSP: giao diện để tác nhân Người quản lý xóa thông tin sản phẩm

- Lớp I_ TV_XemSP: giao diện để tác nhân Thành viên xem thông tin sản phẩm

- Lớp I_ TV_Muahang: giao diện để tác nhân Thành viên mua hàng trên hệ thống website

- Lớp I_ TV_Thanhtoan: giao diện để tác nhân Thành viên thanh toán tiền sau khi mua hàng

- Lớp I_ BPKD_KiemtraDH: giao diện để tác nhân Bộ phận kinh doanh kiểm tra đơn hàng sau khi Thành viên chọn thanh toán

- Lớp I_BPNH_Nhaphang: giao diện để tác nhân Bộ phận nhập hàng cập nhật hàng vào trong kho

- Lớp I_BPK_Xuathang: giao diện để tác nhân Bộ phận kho xuất hàng theo hóa đơn từ bộ phận kinh doanh yêu cầu

2.4.2 Xác định các lớp điều khiển

Các lớp điều khiển chính của hệ thống:

- Lớp C_NQL_Dangky: lớp điều khiển cho ca sử dụng Đăng ký

- Lớp C_NQL_Dangnhap: lớp điều khiển cho ca sử dụng Đăng nhập

- Lớp C_NQL_Timkiem: lớp điều khiển cho ca sử dụng Tìm kiếm sản phẩm

- Lớp C_KH_Timkiem: lớp điều khiển cho ca sử dụng Tìm kiếm sản phẩm

- Lớp C_TV_Muahang: lớp điều khiển cho ca sử dụng Mua hàng

- Lớp C_KH_Thanhtoan: lớp điều khiển cho ca sử dụng Thanh toán

- Lớp C_BPNH_Nhaphang: lớp điều khiển cho ca sử dụng Nhập hàng

- Lớp C_BPK_Xuathang: lớp điều khiển cho ca sử dụng Xuất hàng

2.4.3 Xác định các lớp thực thể

- Lớp Người quản lý (NguoiQuanLy) gồm các thuộc tính:

 MaNQL: Mã người quản lý

 TenNQL: Tên người quản lý

- Lớp Thành viên (ThanhVien) gồm các thuộc tính:

- Lớp Sản phẩm (SanPham) gồm các thuộc tính:

 MaNCC: Mã nhà cung cấp

- Lớp Loại sản phẩm (LoaiSanPham) gồm các thuộc tính:

- Lớp Nhà cung cấp (NhaCungCap) gồm các thuộc tính:

 MaNCC: Mã nhà cung cấp

 TenNCC: Tên nhà cung cấp

- Lớp Đơn đặt hàng (DonDatHang) gồm các thuộc tính:

- Lớp Hóa đơn (HoaDon) gồm các thuộc tính:

2.4.4 xây dựng thẻ CRC của các lớp thực thể

Mô tả: lưu giữ thông tin hồ sơ của

Các Ca sử dụng kết hợp: Quản lý thông tin Người quản lý, thêm, sửa, xóa, tìm kiếm thông tin

Hiển thị hồ sơ Người quản lý

Cập nhật hồ sơ Người quản lý

Hiển thị thông tin của Người quản lý

- MaNQL: Mã người quản lý

- TenNQL: Tên người quản lý

Mô tả: lưu giữ thông tin hồ sơ của

Các Ca sử dụng kết hợp: Quản lý thông tin Thành viên, thêm, sửa, xóa, tìm kiếm thông tin

Hiển thị hồ sơ Thành viên

Cập nhật hồ sơ Thành viên

Hiển thị thông tin của Thành viên

Quản lý hồ sơ cá nhân

Mô tả: lưu giữ thông tin chi tiết của sản phẩm

Các Ca sử dụng kết hợp: Quản lý thông tin Sản phẩm, thêm, sửa, xóa, tìm kiếm thông tin sản phẩm

Hiển thị thông tin sản phẩm

Cập nhật thông tin sản phẩm(Thêm, sửa, xóa sản phẩm)

Hiển thị nhà cung cấp sản phẩm

- MaNCC: Mã nhà cung cấp

Mô tả: Lưu giữ thông tin chi tiết

Các Ca sử dụng kết hợp: Quản lý thông tin Loại Sản phẩm, thêm, sửa, xóa, tìm kiếm thông tin loại sản phẩm

Hiển thị thông tin Loại sản phẩm

Cập nhật thông tin sản phẩm

Mô tả: lưu giữ thông tin chi tiết

Nhà cung cấp sản phẩm

Các Ca sử dụng kết hợp: Quản lý thông tin Nhà cung cấp, thêm, sửa, xóa Nhà cung cấp

Hiển thị thông tin Nhà cung cấp sản phẩm

Cập nhật thông tin Nhà cung cấp sản phẩm

- MaNCC: Mã nhà cung cấp

- TenNCC: Tên nhà cung cấp

Mô tả: lưu giữ thông tin chi tiết đơn đặt hàng của Thành viên hệ thống

Các Ca sử dụng kết hợp: Quản lý thông tin Đơn đặt hàng, thêm, sửa, xóa Đơn đặt hàng

Hiển thị thông tin Đơn đặt hàng

Cập nhật thông tin Đơn đặt hàng

Hiển thị thông tin Thành viên

Mô tả: lưu giữ thông tin chi tiết sản phẩm, Thành viên mua hàng

Các Ca sử dụng kết hợp: Quản lý thông tin Hóa đơn, thêm, sửa, xóa Hóa đơn

Hiển thị thông tin Hóa đơn

Cập nhật thông tin Hóa đơn

Hiển thị thông tin Thành viên

2.4.5 Biểu đồ lớp của hệ thống n 1 n

NguoiQuanLy MaNQL : int TenNQL : nvarchar(50) Taikhoan : nvarchar(50) Matkhau : nvarchar(50) Diachi : nvarchar(50) Dienthoai : nvarchar(5 Ngaysinh : datetime Gioitinh : nchar(3) Email : nvarchar(50)

ThemNguoiquanly() SuaNguoiquanly() XoaNguoiquanly() TimkiemNguoiquanly() HienthiNguoiquanly()

ThanhVien MaTV : int TenTV : nvarchar(50) Taikhoan : nvarchar(50) Matkhau : nvarchar(50) Email : nvarchar(50) Diachi : nvarchar(50) Dienthoai : nvarchar(5

NhaCungCap MaNCC : int TenNCC : nvarchar(50) Diachi : nvarchar(200) Dienthoai : nvarchar(5

ThemNhaCungCap() SuaNhaCungCap() XoaNhaCungCap() HienthiNhaCungCap() TimkiemNhaCungCap()

HoaDon MaHD : int MaSP : int MaTV : int Soluong : int Ngayban : Datetime Ghichu : Text Ngaydat : Date tim

ThemHoaDon() SuaHoaDon() XoaHoaDon() Tinhtongtien() Luuhoadon()

SanPham MaSP : int TenSP : nvarchar(50) Dongia : decimal(18, 0) Mota : nvarchar(50) Hinhanh : nvarchar(50) Ngaycapnhat : Datetim

Soluong : int Maloai : int MaNCC : int

ThemSanPham()SuaSanPham()XoaSanPham()HienthiSanPham()TiemkiemSanPham()

Thiết kế cơ sở dữ liệu của hệ thống

2.5.1 Biểu đồ mô hình quan hệ

 DonDatHang_Chitiet(MaDH, SoLuong, Dongia, Ngaydat)

 HoaDon_Chitiet(MaHD, Soluong, Ngayban, Ghichu, Ngaydat)

 SanPham(MaSP, TenSP, Mota, Hinhanh, Ngaycapnhat, Giaban, Soluong, Maloai, MaNCC)

 ThanhVien(MaTV, TenTV, Taikhoan, Matkhau, Email, Diachi, Dienthoai, Gioitinh, Ngaysinh)

 NhaCungCap(MaNCC, TenNCC, Diachi, Dienthoai, Fax, Email)

 Nguoiquanly(MaNQL, TenNQL, Taikhoan, Matkhau, Diachi, Dienthoai, Gioitinh, Ngaysinh, Email)

Bảng 1: DonDatHang_Chitiet(MaDH, MaSP, MaTV, TenTV, Ngaysinh, DiaChi,

Khóa Tên trường Kiểu dữ liệu Độ rộng Mô tả Ràng buộc (nếu có)

PK MaDH int 10 Mã hóa đơn Khoá chính

SoLuong int Số lượng Not null

Dongia Nvarchar(50) Đơn giá Not null

Ngaydat datetime Ngày đặt Not null

Bảng 2: DonDatHang(MaDH, MaSP, MaTV)

PK MaDH int 10 Mã hóa đơn Khoá chính

MaDH int Mã đặt hàng Not null

MaTV int MaTV Not null

Bảng 3: HoaDon_Chitiet(MaHD, MaSP, MaTV, Soluong, Ngayban, Ghichu, Ngaydat) Tên bảng: HoaDon

PK MaHD Int 10 Mã hóa đơn Khoá chính

Soluong Int Số lượng Not null

Ngayban datetime Điện thoại Not null

Ghichu Nvarchar(255) 255 Nội dung Not null

Ngaydat datetime Ngày đặt Not null

Bảng 4: HoaDon(MaHD, MaSP, MaTV)

PK MaHD Int 10 Mã hóa đơn Khoá chính

FK MaSP Int 10 Mã sản phẩm Khoá ngoại

FK MaTV Int 10 Mã thành viên Khoá ngoại

Bảng 5: SanPham(MaSP, TenSP, Mota, Hinhanh, Ngaycapnhat, Dongia, Soluong,

Khóa Tên trường Kiểu dữ liệu Độ rộng Mô tả Ràng buộc

PK MaSP Int 10 Mã sản phẩm Khoá chính

TenSP Nvarchar(50) 50 Tên sản phẩm Not null

Giaban Decimal(0,18) 255 Giá bán Not null

Mota Nvarchar(255) 255 Mô tả Not null

Hinhanh Nvarchar(50) 50 Hình ảnh Khoá ngoại

Ngaycapnhat Nvarchar(50) 50 Ngày cập nhật Not null

Soluong Int Số lượng Not null

FK Maloai Int 10 Mã loại sản phẩm Khoá ngoại

FK MaNCC Int 10 Mã nhà cung cấp Khoá ngoại

PK Maloai Nvarchar(50) 50 Mã liên hệ Khoá chính

Tenloai Int 10 Tên loại sản phẩm Not null

Bảng 7: ThanhVien (MaTV, TenTV, Taikhoan, Matkhau, Email, Diachi, Dienthoai,

PK MaTV Int 10 Mã thành viên Khoá chính

TenTV Nvarchar(50) 50 Tên thành viên Not null

Taikhoan Nvarchar(50) 50 Tài khoản Not null

Matkhau Nvarchar(50) 50 Mật khẩu Not null

Ngày sinh Nvarchar(50) 50 Ngày sinh Not null

Email Nvarchar(50) 50 Email Not null

Diachi Nvarchar(50) 50 Địa chỉ Not null

Dienthoai Int 20 Điện thoại Not null

Gioitinh Nvarchar(50) 50 Giới tính Not null

Bảng 8: NhaCungCap(MaNCC, TenNCC, Diachi, Dienthoai, Fax, Email)

Tên bảng: Nha cung cấp

PK MaNCC Int 10 Họ tên Khoá chính

TenNCC Nvarchar(50) 50 Tên nhà cung cấp Not null

Diachi Nvarchar(50) 50 Địa chỉ Not null

Dienthoai Int 20 Điện thoại Not null

Fax Int 12 Số Fax Not null

Email Nvarchar(50) 50 Email Not null

Thiết kế giao diện

2.6.1 Biểu đồ định hướng giao diện người dùng cho chức năng đăng ký

2.6.2 Biểu đồ định hướng giao diện người dùng cho chức năng đăng nhập

2.6.3 Biểu đồ định hướng giao diện người dùng cho chức năng mua hàng

XÂY DỰNG HỆ THỐNG WEBSITE BÁN HÀNG ĐIỆN TỬ TRỰC TUYẾN

Kiến trúc vật lý của hệ thống

 Gói Client: chứa thành phần Giao diện giao tiếp với người dùng

 Gói Server: Bao gồm các thành phần:

- Thành phần điều khiển: dùng để chứa các thành phần điều khiển cần thiết cho thành phần giao diện

- Thành phần thủ tục: đặc tả các thuộc tính, các phương thức để thao tác với các đối tượng trong CSDL

 Gói cơ sở dữ liệu: Chứa thành phần cơ sở dữ liệu của hệ thống.

Biểu đồ triển khai mô tả cấu trúc hệ thống phần cứng khác nhau như: bộ xử lý, các thiết bị và các thành phần phần mềm thực hiện nên kiến trúc đó Nó mô tả cấu trúc của các đơn vị phần cứng và phần mềm chạy trên nó

Nút là đối tượng vật lý có tài nguyên tính toán Chúng có thể là máy tính, máy in, đọc thẻ từ… Các nút được kết nối thông qua kết hợp giao tiếp Các nút trao đổi thông điệp

78 hay đối tượng theo đường dẫn kết nối Kiểu giao tiếp được thể hiện bằng stereotype, chỉ ra thủ tục giao tiếp được sử dụng.

Các chức năng của hệ thống được cài đặt trong chương trình Demo

Nhập thông tin đăng ký của người đăng ký Nếu đúng thì thông báo đăng ký thành công và cho phép đăng nhập vào hệ thống website, nếu sai thì thông báo nhập sai và yêu cầu nhập lại các trường còn thiếu hoặc sai

Khách hàng sau khi đăng ký có thể đăng nhập để mua hàng và trở thành thành viên của hệ thống công ty Nếu đúng thì cho phép vào hệ thống, ngược lại thông báo nhập sai và yêu cầu đăng ký lại

Khách hàng mua hàng không cần đăng ký hoặc đăng ký trở thành thành viên để mua hàng

Một số giao diện chính của hệ thống

3.3.1 Hình ảnh ở thiết bị màn hình nhỏ hơn 1200px

Hình 3.1 Hình ảnh sản phẩm thu nhỏ

Hình 3.2 Hình ảnh tin công nghệ 3.3.1 Hình ảnh ở thiết bị màn hình thiết bị từ 767px đến 979px

Hình 3.3 Hình ảnh sản phẩm thu nhỏ

Hình 3.4 Hình ảnh tin công nghệ 3 hàng

Hình 3.5 Hình ảnh form đặt hàng 2 cột

3.3.3 Hình ảnh ở thiết bị màn hình thiết bị nhỏ hơn 767px

Hình 3.6 Hình ảnh sản phẩm thu nhỏ 1 cột

Hình 3.7 Hình ảnh tin công nghệ 1 cột

Hình 3.8 Hình ảnh form đặt hàng 1 cột

Tiêu đề	Ứng Dụng Responsive Vào Trong Xây Dựng Website Bán Hàng Điện Tử Trực Tuyến Với HTML5 Và CSS3
Tác giả	Trần Văn Quốc
Người hướng dẫn	ThS. Dương Phương Hùng
Trường học	Trường Đại Học Quảng Nam
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	khóa luận tốt nghiệp đại học
Năm xuất bản	2016
Thành phố	Quảng Nam

Định dạng
Số trang	93
Dung lượng	1,74 MB