Ứng dụng công nghệ json 2 0 xây dựng website đấu giá trực tuyến

Đồ án tốt nghiệp Tr-ờng Đại học Vinh TRờng đại häc vinh Khoa c«ng nghƯ th«ng tin ===  === lê thị phợng ứng dụng công nghệ json 2.0 xây dựng website đấu giá trực tuyến đồ án TốT NGHIệP kỹ s cntt Vinh, 5/2010 SV: Lê Thị Ph-ợng Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại häc Vinh LỜI NĨI ĐẦU Cã thĨ nãi sù ph¸t triển v-ợt bậc Công nghệ thông tin đà giúp ng-ời hoá giải đ-ợc nhiều toán nh-ng điều quan trọng không đơn giải đ-ợc toán mà ph-ơng pháp để giải toán nh- cho có hiệu Hầu hết tất ứng dụng Web làm việc dựa mô hình lớp sử dụng công nghệ Ajax Việc ng dng n y đà làm cho phần ch-ơng trình tr nên độc lập hơn, đáng tin cậy tính bảo mật cao Điều đặc biệt sử dụng Ajax ng-êi dïng c¶m thÊy kÕt qu¶ tr¶ vỊ lËp tức mà không cần nạp lại trang Nhng ng dng cã tÝnh thay đổi thƣờng xuyªn nhƣ ứng dụng Web gi s tr nên linh động có nhiều ng-ời truy cập trở nên dễ dàng việc thay nâng cấp Tuy nhiên có số toán đòi hỏi sử dụng thêm công nghệ khác để giải đ-ợc cách tèi -u nhÊt Riêng toán đấu giá trực tuyến việc hệ thống chạy theo thời gian thực việc để request trang liên tục vơ quan trọng em sử dụng công nghệ JSON, công nghệ ngƣời lập trình client script JSON giảm tải trình truy xuất liệu liên tục cho server Cuối cùng, xin chân thành cảm ơn thầy, cô bạn, đặc biệt hƣớng dẫn trực tiếp thầy giáo ThS Vũ Chí Cƣờng anh phận công nghệ Công ty VTCOnline dẫn cơng nghệ cho em q trình xây dựng đồ án Mặc dù cố gắng hoàn thành đồ án phạm vi khả cho phép nhƣng chắn không tránh khỏi thiếu sót Em mong nhận đƣợc chia sẻ, góp ý thầy, cô bạn Sinh viên thc hin SV: Lê Thị Ph-ợng Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Lờ Th Phng SV: Lê Thị Ph-ợng Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Chng I TÌM HIỂU CƠNG NGHỆ JSON I GIỚI THIỆU JSON viết tắt JavaScript Object Notation Cũng nhƣ XML, JSON định dạng text data, cấu trúc JSON cho phép data dễ đọc, dễ thao tác, nhẹ, độc lập ngơn ngữ, đặc biệt JSON mơ tả liệu theo object oriented Tại JSON có liên quan đến Javacript Đơn giản JSON cách biểu diễn đối tƣợng Javascript Khi sử dụng Json với Javascript, khơng cần phải có bƣớc phân tích phức tạp nhƣ XML Mà truy vấn trực tiếp giá trị theo tên (khóa) đƣợc định nghĩa JSON JSON chuẩn quan trọng lập trình webclient Tƣơng tác client-server (ajax chẳng hạn) với JSON đỡ mệt sử dụng XML nhiều, đƣợc xây dựng dùng với JavaScript để tạo requests Code server, viết nhiều ngôn ngữ khác nhau, nhƣ C#, Python, PHP Java Đối với lập trình viên clientscript Nó rút ngắn thời gian phát triển sử dụng XML JSON nét đặc trƣng ngơn ngữ Nó cung cấp cho lập trình viên khả tạo mảng nhƣ phác thảo đối tƣợng cách đơn giản ngắn gọn Để hiểu đƣợc JSON, trƣớc hết ta tìm hiểu xem cách thức mà mảng JavaScript hoạt động JavaScript cung cấp cho đối tƣợng Array Cách cài đặt mảng đơn giản, ví dụ: myArray = new Array(); myLibrary.books = new Array(); SV: Lê Thị Ph-ợng Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Khá giống với ngôn ngữ nhƣ Java hay C, JavaScript cho phép khai báo trƣớc số phần tử mảng nhƣ gán giá trị cho phần tử mảng: family=new Array(4); family[0] = “Tom”; Hoặc trí ta kết hợp với giá trị khóa nhƣ sau: family["father"]=”Tom”; Tất nhiên ta gán giá trị cho mảng trí object, JavaScript ngơn ngữ có kiểu lỏng lẻo Cách khởi tạo giá trị mảng nhƣ nhanh gọn, nhƣng nhƣ mảng lớn phức tạp việc khai báo nhƣ tẻ nhạt Một cách khác để để khởi tạo giá trị ban đầu cho mảng sử dụng cặp ngoặc vuông [ ]: family=["Tom","Jery","Jack","Timy"]; Hoặc dùng cặp đấu { } kết hợp với giá trị khóa nhƣ sau: family={ farther: “Tom”, mother: “Jery”, first_son: “Jack”, second_son: “Timy” }; Đây cách mô tả đối tƣợng kiểu JSON Nếu muốn sử dụng dấu cách trống cho khóa ta dùng cắp dấu “” ví dụ: “first son”: “Jack”, Chúng ta lồng JSON vào để khai báo đối tƣợng phức tạp hơn, ví dụ: var rectangle={ SV: Lê Thị Ph-ợng Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh topleft: { x: 1, y: }, width: 5, height: 10 }; //Khi alert(rectangle.topleft.x); // đƣa giá trị Để thêm vào phƣơng thức cho đối tƣợng khai báo theo kiểu JSON ta làm đơn giản nhƣ sau: var rectangle={ //Thuộc tính topleft: { x: 1, y: }, width: 5, height: 10, //Phƣơng thức area: function() { return this.width*this.height; } }; //Khi alert(rectangle.topleft.x); // đƣa giá trị alert(rectangle.area()); // đƣa giá trị 50 Trong ví dụ trên, ta sử dụng từ khóa this để truy cập vào thuộc tính vừa khai báo thân đối tƣợng Đây từ khóa đặc biệt mạnh, ta có dịp đề cập đến nhiều phần sau Nhƣ vậy, ta sử dụng đối tƣợng Object JSON để khai báo đối tƣợng JavaScript trí sử dụng kết hp c SV: Lê Thị Ph-ợng Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh hai phƣơng pháp Tuy nhiên, ta thƣờng xuyên phải sử dụng, nhƣ với nhiều đối tƣợng chƣơng trình hai phƣơng pháp tỏ hiệu quả, lẽ với lần thuộc tính thay đổi ta lại phải thực khai báo phức tạp tính tái sử dụng code không đƣợc đảm bảo Khi sử dụng JSON với JavaScript hay ActionScript, khơng cần phải có bƣớc phân tích phức tạp nhƣ XML Mà truy vấn trực tiếp giá trị theo tên (khóa) đƣợc định nghĩa JSON Ví dụ: Ta có liệu XML: 2 3 Sử dụng JavaScript để đọc liệu này, ta phải qua bƣớc phân tích, đƣa văn XML thành đối tƣợng liệu đọc liệu theo nodes Giả sử object ta xmlObj, ta muốn lấy liệu x y ta gọi: var x = xmlObj.childNodes[0].text; var y = xmlObj.childNodes[1].text; Trong trƣờng hợp tƣơng tự, ta có liệu JSON: var jsonStr = '{ data: { x: , y: 3}}'; Sử dụng JavaScript ta cần gọi: eval( 'var jsonObj = ' + jsonStr + ';'); var x = jsonObj.x; var y = jsonObj.y; Đối với lập trình viên client script JSON rút ngắn thời gian viết mã JS, AS sử dụng XML SV: Lê Thị Ph-ợng Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh II S DỤNG JSON TRONG AJAX RESPONSE Ta dùng JSON việc ta muốn nhƣ cách ta dùng XML vậy, nhƣng em muốn đề cập ứng dụng Ajax application Tạo truy xuất JSON Ajax application (both server & client side) 1.1 Tạo response data send client Nhƣ ta biết Ajax application, client send XMLHttpRequest đến server, server handle request trả response, response plain text, xml, js, json VD: define java bean có properties nhƣ sau: public class Customer { private String id; private String name; public Customer(String id, String name) { this.id = id; this.name = name; } //các accessor methods } Và khởi tạo object: Customer customer = new Customer("abc", "sabrina"); Nếu diễn đạt object customer dƣới dạng XML, có dạng sau: abc sabrina SV: Lª Thị Ph-ợng Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Nu din t object customer dƣới dạng JSON, thì: {id: "abc", name: "sabrina"} -> Cả JSON XML có tính dễ đọc, JSON chiếm dụng nhớ XML Để tạo xml response trên, ta tạo String cộng lại Hoặc ta dùng XML data binding framework (JAXB, JDOM, XMLBeans ) VD: dùng JAXB tạo xml từ java object JAXBContext jaxbContext = JAXBContext.newInstance("com.giaodn.booksearchdemo"); Marshaller marshaller = j axbContext.createMarshaller(); marshaller.marshal(customer, response.getOutputStream()); Để tạo JSON response nhƣ ta cộng String lại với nhau, dùng library, VD: tạo JSON response dùng Json-lib response.getWriter().write(JSONObject.fromObject(customer).toString()); 1.2 Handle data phía client Nếu ta định dùng XML reponse data, ta phải dùng javascript để traverse DOM(Document Object Model) lấy node DOM api document.getElementById("id"); Nếu dùng JSON ta dùng hàm eval() javascript để evaluate JSON data thành javascript object: var jsonRep = eval(respondText); Sau ta truy xuất data t js object: jsonRep.id; jsonRep.name; SV: Lê Thị Ph-ợng Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại häc Vinh Chƣơng II TỔNG QUAN VỀ ĐỀ TÀI I GIỚI THIỆU VỀ ĐẤU GIÁ TRỰC TUYẾN Đấu giá trực tuyến gì? Mơ hình đấu giá trực tuyến hình thức mà bên tham gia đấu giá sản phẩm dịch vụ thông qua Internet Các hoạt động mua bán đấu giá trực tuyến đƣợc phần mềm đấu giá kiểm soát Các phƣơng thức đấu giá trực tuyến Hiện có hai phƣơng thức đƣợc sử dụng:  Đấu giá kiểu Anh: Đây hình thức đấu giá từ thấp tới cao Ngƣời tham gia trả giá công khai với nhau, giá sau cao giá trƣớc Cuộc đấu giá kết thúc không đƣa giá cao đạt tới mức giá trần, ngƣời chiến thắng ngƣời đƣa mức giá cao  Đấu giá kiểu Hà Lan: Đấu giá Hà Lan hình thức đấu đấu giá này, hàng đƣợc chào với mức giá cao Giá ban đầu đƣợc đƣa SV: Lª Thị Ph-ợng 10 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Khỏch hng cú th c tin tức nhấn vào link TinTức menu: Để xem tin tức chi tiết ta đồng nhấn vào nút Go sang trang tin tức chi tiết đồng thời đƣa tin tức liên quan phía dƣới để tiếp tục xem Ở trang ngƣời dùng gửi link tin tức cho bạn bè in toàn trang ngoi SV: Lê Thị Ph-ợng 54 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh đặt giá cho sản phẩm ngƣời dùng cần phải đăng nhập mua gói bid để có lƣợt đặt giá Ta mua gói mua l s bid: SV: Lê Thị Ph-ợng 55 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Do để sử dụng toán qua chuyển khoản ta cần liên kết với ngân hàng mở cổng toán nên ta cho tài khoản đƣợc mua gói bid mà chƣa check số tiền dƣ có đủ mua hay khơng? Khách hàng nhấn nút tốn để mua gói bid chọn Khi khách hàng đăng nhập tài khoản trang cịn có phần thị thông tin tài khoản gồm: tên tài khoản đăng nhập, số bid còn, link đến trang mua bid Khách hàng sửa đổi thơng tin cá nhân đăng kí click vào tên tài khoản xem chi tiết tài khoản thao tác trang click vào tài khoản Vào trang tài khoản bao gồm có tab: - Danh sách đấu giá tài khoản khách hàng tham gia SV: Lê Thị Ph-ợng 56 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Bao gm tờn sn phẩm tham gia đấu giá, ngày tham gia, số bid tay thực hiện, số bid tự động trạng thái đấu giá (hình ảnh đấu giá kết thúc) - Danh sách sản phm thng SV: Lê Thị Ph-ợng 57 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Bao gồm thông tin quan tâm sản phẩm nhƣ tên sản phẩm ngày bắt đầu đấu giá, ngày kết thúc, giá bán lẻ sản phẩm, giá mua đƣợc, số bid sử dụng - Danh sách sản phẩm mua - Quản lý bid sử dụng SV: Lê Thị Ph-ợng 58 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Bao gm: S bid mua, danh sách mua bid, số bid sử dụng, danh sách đấu tài khoản bạn đặt bid tự động SV: Lª Thị Ph-ợng 59 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Phn BackEnd Do s trang phần quản trị nhiều nên đƣa số trang ngƣời quản trị đăng nhập click đầu tiên: 2.1 ìn ệ ốn - Quản lý Menu - Phân quyền - Quản lý danh mục - Quản lý ngôn ngữ - Quản lý bƣớc nhảy giá 2.2 ộ d n 2.2.1 n lý n Admin có quyền quản lý tất tin tức hiển thị AuctionShop (tìm kim, thờm mi, sa, xúa) SV: Lê Thị Ph-ợng 60 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại häc Vinh 2.2.3 n lý r 2.2.3 n lý dan m SV: Lê Thị Ph-ợng ỳp r ỳp 61 Lớp 46K2 - CNTT Đồ án tốt nghiệp 2.2.5 Tr-ờng Đại häc Vinh n lý pol y Ngƣời quản trị có quyền đƣa sách 2.2.6 n lý Bann r Banner ô quảng cáo đặt trang web, có dạng tĩnh động, liên kết đến trang web khác có thơng tin quảng cáo 2.2.4 n lý np m Quản lý thông tin chi tiết sản phẩm đƣợc đƣa lên trang đấu giá SV: Lê Thị Ph-ợng 62 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh 2.3 Qun lý cho phép sản phẩm đƣợc đấu giá, thời gian đấu giá, giá khởi điểm, giá bán lẻ, số lƣợng bán 2.4 T ốn kê 2.4.1 T ốn kê ê 2.4.2 T ốn kê l 2.4.3 T ốn kê SV: Lª Thị Ph-ợng d d n 63 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Chng V ĐỊNH HƢỚNG PHÁT TRIỂN I KẾT QUẢ ĐẠT ĐƢỢC Nhìn cách tổng thể đồ án nhận thấy đồ án đạt đƣợc số kết sau:  Đã so sánh đƣợc ƣu điểm, nhƣợc điểm mơ hình đấu giá  Ứng dụng đƣợc công nghệ JSON xây dựng website Auctions  Ứng dụng đƣợc mơ hình lớp, cơng nghệ Ajax trình xây dựng phát triển website  Sử dụng mạnh Stored Procedure SQL Server 2005  Ứng dụng công nghệ DeepZoom để xem ảnh sản phẩm  Trình bày chi tiết trình phân tích thiết kế hệ thống  Hồn thành tƣơng đối chức cần thiết trang đấu giá  Website có giao diện đơn giản, thân thiện với tất ngƣời II HƢỚNG PHÁT TRIỂN TIẾP THEO - Xây dựng đƣợc cổng toán qua tài khoản ngân hàng để website vào hoạt động thực tế - Tiếp tục phát triển ứng dụng web sử dụng công nghệ JSON, Ajax, DeepZoom Cuối cùng, xin chân thành cảm ơn thầy, cô bạn đặc biệt hƣớng dẫn trực tiếp thầy giáo ThS Vũ Chí Cƣờng anh phận công nghệ công ty VTCOnline dẫn công nghệ cho em hon thnh ỏn ny./ SV: Lê Thị Ph-ợng 64 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng §¹i häc Vinh TÀI LIỆU THAM KHẢO [1] http: //www.bidrivals.com [2] http: //www.junglecents.com [3] http://www.swoopo.com [4] SV: Lê Thị Ph-ợng http://google.com.vn 65 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh MC LC Trang LI NểI U Chƣong I TÌM HIỂU CƠNG NGHỆ JSON I GIỚI THIỆU II SỬ DỤNG JSON TRONG AJAX RESPONSE Tạo truy xuất JSON Ajax application (both server & client side) 1.1 Tạo response data send client 1.2 Handle data phía client Chƣơng II TỔNG QUAN VỀ ĐỀ TÀI 10 I GIỚI THIỆU VỀ ĐẤU GIÁ TRỰC TUYẾN 10 Đấu giá trực tuyến gì? 10 Các phƣơng thức đấu giá trực tuyến 10 Những ƣu điểm mô hình ĐGTT: 11 II TỔNG QUAN MƠ HÌNH ĐẤU GIÁ KIỂU ANH 12 Penny Auction 12 1.1 Mô tả chung 12 1.2 Đặc điểm 13 1.3 Cơng thức tính 13 1.4 Sản phẩm đƣợc đem đấu giá 15 Nail biter auction (http: //www.junglecents.com/ ) 15 2.1 Mô tả chung 15 2.2 Đặc điểm 16 2.3 Công thức tính 17 2.4 Loại sản phẩm bán 17 III KỊCH BẢN CHƢƠNG TRÌNH ĐẤU GIÁ TRỰC TUYẾN 18 Mô tả chung 18 Cách thức chơi 18 SV: Lê Thị Ph-ợng 66 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại häc Vinh 2.1 Tham gia tạo tài khoản để đấu giá 18 2.2 Đấu giá Hệ thống đấu giá tự động 18 2.3 Cuộc đấu giá hoạt động nào? 19 2.4 Kết thúc đấu giá / Thanh toán 19 2.5 Vận chuyển sản phẩm cho ngƣời thắng 19 Chƣơng III PHÂN TÍCH THIẾT KẾ VÀ CÀI ĐẶT CHƢƠNG TRÌNH 20 I PHÂN TÍCH THIẾT KẾ HỆ THỐNG 20 Phân tích hệ thống mặt chức 20 1.1 Biểu đồ phân cấp chức 20 1.2 Biểu đồ luồng liệu 20 1.2.1 Biểu đồ luồng liệu mức khung cảnh 22 1.2.2 Biểu đồ luồng liệu mức đỉnh: 23 1.2.3 Sơ đồ số chức chi tiết 25 Phân tích hệ thống mặt liệu 29 II VẤN ĐỀ CẦN GIẢI QUYẾT 38 Làm để request trang liên tục? 38 Xử lý đa luồng? 38 View ảnh sản phẩm 38 Thanh toán trực tuyến 38 III GIẢI PHÁP ĐƢA RA 39 Sử dụng công nghệ JSON để thực request trang liên tục 39 Xử lý đa luồng 42 2.1 Cơ sở lý thuyết 42 2.2 Tạo BackGroundWorker 42 2.3 Tạo Event handle cho BackGroundWorker 42 2.4 Tạo Event handle cho kiên ProcessChanged 44 2.5 Tạo kiện cho RunWorkerCompeleted 44 2.6 Bổ sung kiện vào BackGroundWorker 45 2.7 Chạy BackgroundWorker 46 SV: Lê Thị Ph-ợng 67 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh 2.8 Hy b mt BackgroundWorker 46 2.9 Cài đặt 46 Chƣơng IV TRIỂN KHAI VÀ THỬ NGHIỆM 49 I CÁC TÁC NHÂN TRONG HỆ THỐNG 49 Admin 49 AuctionsManager 49 AuctionManagerSite 49 User 50 II QUY TRÌNH THAM GIA ĐẤU GIÁ 50 Phần FrontEnd 50 Phần BackEnd 60 2.1 Cấu hình hệ thống 60 2.2 Nội dung 60 2.2.1 Quản lý tin tức 60 2.2.3 Quản lý trợ giúp 61 2.2.3 Quản lý danh mục trợ giúp 61 2.2.5 Quản lý policy 62 2.2.6 Quản lý Banner 62 2.2.4 Quản lý sản phẩm 62 2.3 Đấu giá 63 2.4 Thống kê 63 2.4.1 Thống kê tiêu thụ bid 63 2.4.2 Thống kê lịch sử bid 63 2.4.3 Thống kê thắng 63 Chƣơng V ĐỊNH HƢỚNG PHÁT TRIỂN 64 I KẾT QUẢ ĐẠT ĐƢỢC 64 II HƢỚNG PHÁT TRIỂN TIẾP THEO 64 TÀI LIỆU THAM KHẢO 65 SV: Lê Thị Ph-ỵng 68 Líp 46K2 - CNTT ... phẩm P: giá bán thị trƣờng (giá bán lẻ) Đơn vị 10 000 VND SV: Lê Thị Ph-ợng 13 Lớp 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Po: giá khởi điểm Đơn vị 10 000 VND p: phí lần Đơn vị 10 000 VND... định Khi ngƣời chơi đấu giá, họ có hội sở hữu sản phẩm với mức giá đấu giá đấu giá kết thúc Tuy nhiên, họ ngƣời thắng đấu giá đấu giá kết thúc ngƣời cuối đấu giá 10 giây cuối đấu giá thời gian lặp... 46K2 - CNTT Đồ án tốt nghiệp Tr-ờng Đại học Vinh Chng II TỔNG QUAN VỀ ĐỀ TÀI I GIỚI THIỆU VỀ ĐẤU GIÁ TRỰC TUYẾN Đấu giá trực tuyến gì? Mơ hình đấu giá trực tuyến hình thức mà bên tham gia đấu giá