XÂY DỰNG WEBSITE MUA SẮM CỘNG ĐỒNG HIỂN THỊ TỐT TRÊN MOBILE

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM KHOA CÔNG NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP XÂY DỰNG WEBSITE MUA SẮM CỘNG ĐỒNG HIỂN THỊ TỐT TRÊN MOBILE Ngành : Niên khoá : Lớp : Sinh viên thực : Hồ Thị Mỹ Uyên Phan Ngọc Yến CNTT 2007-2011 DH07DTH 07130144 07130149 TP HỒ CHÍ MINH, tháng năm 2011 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM KHOA CÔNG NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP XÂY DỰNG WEBSITE MUA SẮM CỘNG ĐỒNG HIỂN THỊ TỐT TRÊN MOBILE Giáo viên hướng dẫn: Sinh viên thực hiện: Ths Nguyễn Thị Thanh Thủy Hồ Thị Mỹ Uyên Phan Ngọc Yến TP.HỒ CHÍ MINH, tháng năm 2011 XÂY DỰNG WEBSITE MUA SẮM CỘNG ĐỒNG HIỂN THỊ TỐT TRÊN MOBILE Năm 2011 CƠNG TRÌNH HỒN TẤT TẠI TRƯỜNG ĐẠI HỌC NƠNG LÂM TP HCM Cán hướng dẫn: Thạc sĩ Nguyễn Thị Thanh Thủy Cán phản biện: Thac sĩ Phạm Công Thiện Luận văn cử nhân bảo vệ HỘI ĐỒNG CHẤM LUẬN VĂN CỬ NHÂN TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM ngày 31 tháng 08 năm 2011 Bộ Giáo Dục Đào Tạo Trường ĐH NÔNG LÂM TpHCM CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập-Tự Do-Hạnh Phúc NHIỆM VỤ LUẬN VĂN CỬ NHÂN Họ tên sinh viên: HỒ THỊ MỸ UYÊN Ngày tháng năm sinh: 15/12/1988 Chuyên ngành: Hệ Thống Thông Tin Phái: Nữ Nơi sinh: Bến Tre Ngành: CNTT Họ tên sinh viên: PHAN NGỌC YẾN Ngày tháng năm sinh: 17/07/1989 Chuyên ngành: Hệ Thống Thông Tin Phái: Nữ Nơi sinh: TPHCM Ngành: CNTT I TÊN ĐỀ TÀI: Xây dựng website mua sắm cộng đồng hiển thị tốt mobile II NHIỆM VỤ VÀ NỘI DUNG - Tìm hiểu cơng nghệ WURFL - Nhận dạng thiết bị truy cập mobile PC - Tìm hiểu WebService sử dụng kĩ thuật XML-RPC - Tim hiểu CSS mobile - Xây dựng web cho dòng Symbian, Android, Windows Mobile, Blackberry, Iphone III NGÀY GIAO NHIỆM VỤ: /03/2011 IV NGÀY HOÀN THÀNH NHIỆM VỤ: /08/2011 V HỌ VÀ TÊN CÁN BỘ HƯỚNG DẪN: Thạc sĩ Nguyễn Thị Thanh Thủy Ngày / / CÁN BỘ HƯỚNG DẪN Ngày / / CHỦ NHIỆM CHUYÊN NGÀNH Ngày / / KHOA CNTT LỜI CẢM TẠ Trước trình bày nội dung nghiên cứu luận văn, chúng em xin dành dòng để gởi lời cảm ơn chân thành đến: Cô Nguyễn Thị Thanh Thủy, tận tình hướng dẫn, giúp đỡ cho chúng em suốt thời gian thực luận văn, dù chúng em nhiều sai sót Chúng em xin gởi lời cảm ơn chân thành đến quý Thầy, Cô khoa công nghệ thông tin trường Đại học Nông Lâm Thành phố Hồ Chí Minh giảng dạy, hướng dẫn cho chúng em suốt thời gian học trường Trong trình làm luận văn khơng tránh khỏi thiếu sót Kính mong quý Thầy, Cô xem xét bảo DANH SÁCH CHỮ VIẾT TẮT CSS Cascading Style Sheets XML-RPC Extensible Markup Language Remote Procedure Call XHTML Extensible HyperText Markup Language WURFL Wireless Universal Resource File I DANH MỤC CÁC HÌNH Trang Hình 1: Kết thử nghiệm thuộc tính CSS trình duyệt 15  Hình 2: Safari IOS sử dụng khung nhìn mặc định 980-pixel-rộng 18  Hình 3: Các khung nhìn với tỉ lệ khác 19  Hình 4: Thực gọi Nokia, BlackBerry trình duyệt NetFront Sony Ericsson 22  Hình 5: Select lists Safari IOS 25  Hình 6: Select lists Symbian Android 26  Hình 7: Sơ đồ hoat động XML-RPC 29  Hình 8: Yêu cầu chức 37  Hình 9: Sơ đồ usecase khách hàng 38  Hình 10: Sơ đồ usecase hệ thống 39  Hình 11: Yêu cầu phi chức 40  Hình 12: Mơ hình xử lý 41  Hình 13: Phương pháp thực symbian 44  Hình 14: Phương pháp thực android 44  Hình 15: Phương pháp thực windows mobile 45  Hình 16: Phương pháp thực blackberry 45  Hình 17: Phương pháp thực iphone 46  Hình 18: Sơ đồ kiến trúc hệ thống 49  Hình 19: Sơ đồ lớp miền 50  II DANH MỤC CÁC BẢNG Trang Bảng 1: Ý nghĩa user-agent từ web browser BlackBerry8520 7  Bảng 2: Ý nghĩa user-agent từ web browser Opera mini Android 8  Bảng 3: User- agent số web browser mobile 9  Bảng 4: User- agent số web browser PC 9  Bảng 5: User-agent từ web browser hệ điều hành 10  Bảng 6: Trung bình ký tự sử dụng tiêu đề 16  Bảng 7: Khả tương thích sử dụng khung nhìn trình duyệt 19  Bảng 8: Khả tương thích tạo liên kết mở cửa sổ 21  Bảng 9: Khả tương thích cho hành động gọi 22  Bảng 10: Khả tương thích cho hành động nhắn tin 24  Bảng 11: Khả tương thích danh sách lựa chọn 27  Bảng 12: Chuyển đổi liệu sang kiểu liệu XML-RP 35  Bảng 13: User-agent hệ điều hành 43  Bảng 14: Các nội dung css tính tương thích trình duyệt di động 48  III TÓM TẮT Xây dựng website mua sắm cộng đồng hiển thị tốt mobile Những vấn đề cần tìm hiểu xây dựng đề tài: Tìm hiểu WURFL để nhận dạng thiết bị truy cập PC hay mobile Tìm hiểu css xhtml để hiển thị tốt nội dung website lên thiết bị di động Tìm hiểu WebService sử dụng kĩ thuật XML-RPC Xây dựng website hiển thị tốt dòng Symbian, Android, Windows Mobile, Blackberry, Iphone Mặc dù nhóm có thời gian học tập làm việc tích cực thời gian có hạn khơng có điều kiện tốt để thử nghiệm nên tồn hạn chế: Chưa tiến hành thực nghiệm thiết bị điện thoại thật thuộc dòng điện thoại RIM Windows Mobile.Chưa xử lí tin nhắn SMS thơng tin có sản phẩm giảm giá để người dùng truy cập đến website mua sắm cộng đồng nhanh Với hạn chế tồn tại, đề tài mở rộng theo hướng sau: Xử lí tin nhắn SMS gởi từ PC đến điện thoại dạng link có sản phẩm giảm giá để người dùng điện thoại truy cập đến website mua sắm cộng đồng cách nhanh chóng Cho phép người dùng sử dụng thiết bị điện thoại di động khơng truy cập website mua mặt hàng sản phẩm giảm giá theo cách thức soạn tin nhắn IV Hình 17: Phương pháp thực iphone Xây dựng CSS cho dòng mobile (Symbian, Android, Windows Mobile, Blackberry, Iphone) Đa số thiết bị hỗ trợ h1, h2, v.v Nhưng mức độ tương đối, số thiết bị đặt kích cỡ chữ h1, h2 Tag

an toàn dùng với thiết bị di động Bởi tag hầu hết thiết bị hỗ trợ tốt tag Tương tự với Tuy nhiên thiết bị di động Đặc biệt hiển thị tiếng việt bị lỗi để 46 Về chữ, font-size gần khơng có tác dụng đa số thiết bị di động tự định cỡ chữ theo cách riêng Do dó nên dùng

trường hợp bình thường heading tag (h1,h2 ) với trường hợp cỡ chữ khác Bên cạnh sử dụng font-family tương tự, thiết bị di động thường hỗ trợ sans-serif Hầu hết thiết bị hỗ trợ hiển thị ảnh Tuy nhiên, bắt buộc phải sử dụng alt cho trường hợp thiết bị khơng hỗ trợ hiển thị ảnh background-image hỗ trợ tốt trái lại background-color hỗ trợ số thiết bị Border-style hỗ trợ tốt Tuy nhiên với trường hợp an toàn border-style: solid giải pháp tốt Margin Padding hỗ trợ tốt hầu hết thiết bị Cỡ chữ nên tính em % để dễ co giãn với độ phân giải hình thay đơn vị pixels - Nội dung CSS tính tương thích trình duyệt di động: position overflow Symbian Android WindowMobile Blackberry Iphone (s60 v3) (G1) (HTC Touch)  scroll incomplete incomplete (BB 9500) x scroll To be tested incomplete incomplete  display   incomplete   min/max-   x   47 width/height opacity x  x x text-shadow x x x x :hover and  focus x x  focus :active Bảng 6: Các nội dung css tính tương thích trình duyệt di động 48 3.4.2 Kiến trúc hệ thống Hình 18: Sơ đồ kiến trúc hệ thống 49 3.4.3 Sơ đồ lớp miền Hình 19: Sơ đồ lớp miền 50 Chương Đánh giá 4.1 Iphone 51 4.2 Windows Mobile 52 4.3 Android 53 4.4 Symbian \ 54 4.5 Blackberry 55 Chương Kết luận hướng phát triển 5.1 Kết luận Website bán hàng điện thoại ứng dụng có lợi cho ba bên: doanh nghiệp, khách hàng nhà cung cấp dịch vụ Website cung cấp nhiều sản phẩm dịch vụ giá rẻ cho khách hàng mà quảng bá sản phẩm doanh nghiệp đến với khách hàng cách nhanh chóng, hữu hiệu tốn chi phí Đạt : - Tìm hiểu css dòng điện thoại :  Symbian -  IOS  RIM  Android  Windows Mobile Xây dựng website mua sắm cộng đồng triển khai hostfree eatj.com hiển thị tốt dòng điện thoại:  Symbian: Điện thoại Nokia6131, sử dụng web brower OperaMini version 10.54  IOs: Điện thoai giả lập Mobione Test Center-Iphone4.0, sử dụng web brower safari version 4.0.5  RIM: Điện thoại giả lập Blackberry Touch 9800, sử dụng web browser safarfi version 6.0  Andoird: Điện thoại giả lập HTC T-Mobile G1, sử dụng web browser Mobile Safari.525.20 56  Windows mobile: Điện thoại giả lập XdeviceEmulator, sử dụng web browser Emobile 7.0 - Tìm hiểu wurfl :  Nhận dạng thiết bị mobile hay PC  Xác định dòng điện thoại truy cập vào website - Tìm hiểu xây dựng webservice Apache-XML rpc - Tìm hiểu XHTML Hạn chế: Mặc dù nhóm có thời gian học tập làm việc tích cực thời gian có hạn khơng có điều kiện tốt để thử nghiệm nên tồn hạn chế:  Chưa tiến hành thực nghiệm thiết bị điện thoại thật thuộc dòng điện thoại RIM Windows Mobile  Chưa xử lí tin nhắn SMS thơng tin có sản phẩm giảm giá để người dùng truy cập đến website mua sắm cộng đồng nhanh 5.2 Hướng phát triển Với kết đạt hạn chế tồn tại, đề tài mở rộng theo hướng sau: Xử lí tin nhắn SMS gởi từ PC đến điện thoại dạng link có sản phẩm giảm giá để người dùng điện thoại truy cập đến website mua sắm cộng đồng cách nhanh chóng 57 Cho phép người dùng sử dụng thiết bị điện thoại di động không truy cập website mua mặt hàng sản phẩm giảm giá theo cách thức soạn tin nhắn 58 Chương - Tài liệu tham khảo Maximiliano Firtman, Programming the Mobile Web, O’Reilly Media, the United States of America, July 2010 - http://wurfl.sourceforge.net/backgroundinfo.php - http://ws.apache.org/xmlrpc/ - http://www.nhommua.com - http://www.cungmua.com/ - http://www.deal.zing.vn - http://www.hotdeal.vn - http://www.cucre.vn - http://www.phagia.com.vn 59 Chương Phụ lục 1.Requirement\GiaHotOnMobile_1.BusinessProcessSpecification.doc 1.Requirement\GiaHotOnMobile_2.FunctionREQs.doc 1.Requirement\GiaHotOnMobile_3.NonFunctionREQs.doc 1.Requirement\GiaHotOnMobile_4.UserInterfacePrototype.doc 2.AnalysisAndDesign\1.HighLevelDesign\1.HighLevelDesignDocument.doc 2.AnalysisAndDesign\1.HighLevelDesign\2.Domain Model Documentation.doc 2.AnalysisAndDesign\2.LowLevelDesign\3.Class Model Documentation.doc GiaHotlOnMobile_UseCaseDocument.doc 60 ... TẮT Xây dựng website mua sắm cộng đồng hiển thị tốt mobile Những vấn đề cần tìm hiểu xây dựng đề tài: Tìm hiểu WURFL để nhận dạng thiết bị truy cập PC hay mobile Tìm hiểu css xhtml để hiển thị tốt. .. NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP XÂY DỰNG WEBSITE MUA SẮM CỘNG ĐỒNG HIỂN THỊ TỐT TRÊN MOBILE Giáo viên hướng dẫn: Sinh viên thực hiện: Ths Nguyễn Thị Thanh Thủy Hồ Thị Mỹ Uyên Phan Ngọc Yến... MINH, tháng năm 2011 XÂY DỰNG WEBSITE MUA SẮM CỘNG ĐỒNG HIỂN THỊ TỐT TRÊN MOBILE Năm 2011 CƠNG TRÌNH HỒN TẤT TẠI TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM Cán hướng dẫn: Thạc sĩ Nguyễn Thị Thanh Thủy Cán