Ajax và bài toán đăng ký tín chỉ

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC CHUYÊN NGÀNH SƯ PHẠM TIN -o0o - LUẬN VĂN TỐT NGHIỆP Đề tài: AJAX VÀ BÀI TỐN ĐĂNG KÝ TÍN CHỈ GVHD: ThS Ngơ Đình Thưởng SVTH: Hồ Văn Thuận Lớp: 08SPT Đà Nẵng, năm 2012 ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC CHUYÊN NGÀNH SƯ PHẠM TIN -o0o - LUẬN VĂN TỐT NGHIỆP Đề tài: AJAX VÀ BÀI TỐN ĐĂNG KÝ TÍN CHỈ GVHD: ThS Ngơ Đình Thưởng SVTH: Hồ Văn Thuận Lớp: 08SPT MSSV: 312011081137 Đà Nẵng, tháng 4/2012 MỤC LỤC Đề mục Trang Mục lục i Danh mục bảng ii Danh mục hình iii MỞ ĐẦU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT VỀ AJAX 1.1 Tổng quan mơ hình ứng dụng Web 1.2 Giới thiệu Ajax CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG THƠNG TIN 11 CHO BÀI TỐN ĐĂNG KÝ TÍN CHỈ 11 2.1 Phát biểu đề tài 11 2.2 Khảo sát hệ thống tín 11 2.3 Khảo sát chi tiết 12 2.4 Phân tích chức hệ thống ĐKTC 13 2.5 Phân tích thiết kế liệu .15 CHƯƠNG 3: THIẾT KẾ GIAO DIỆN GIỮA NGƯỜI VÀ MÁY 22 3.1 Mục đích .22 3.2 Giao diện dự định thiết kế 22 CHƯƠNG 4: THIẾT KẾ ỨNG DỤNG .25 4.1 Thiết kế chương trình 25 4.2 Phân tích thiết kế tệp cần thiết tạo nên chương trình 30 4.3 Viết code Ajax- đăng ký tín .33 4.4 Thiết kế kiểm soát 46 KẾT LUẬN 49 TÀI LIỆU THAM KHẢO .50 Trang i DANH MỤC BẢNG Bảng 1.1: Các tham số phương thức open Bảng 1.2 Các giá trị readyState .10 Bảng 2.1: Bảng thiết kế vật lý CSDL DKTC 19 Bảng 4.1: Mẫu danh sách sinh viên .27 Bảng 4.2: Mẫu danh sách giảng viên 28 Bảng 4.3: Mẫu chương trình đào tạo .28 Bảng 4.4: Mẫu lớp dự định mở .30 Trang ii DANH MỤC HÌNH Hình 1.1: Mơ hình ứng dụng web Hình 1.2: Mơ hình kiến trúc client-server .3 Hình 1.3: Ví dụ minh họa Ajax Hình 1.4: Quy trình truyền thống để đệ trình liệu nhận kết Hình 1.5: Mơ hình truyền thống tương tác Client- Server Hình 1.6: Quy trình Ajax để đệ trình nhận kết Hình 1.7: Mơ hình AJAX tương tác Client- Server .6 Hình 1.8: Kỹ thuật Ajax Hình 1.9: Trang gởi/nhận liệu client .7 Hình 2.1: Mơ hình phân rã chức hệ thống ĐKTC 13 Hình 2.2: Sơ đồ dòng liệu ĐKTC .14 Hình 2.3: Sơ đồ dòng liệu mức đỉnh hệ ĐKTC 15 Hình 2.4: Mơ hình liên kết kiểu thực thể hệ thống đăng ký tín 17 Hình 3.1: Mơ tả cấu trúc giao diện 22 Hình 3.2: Giao diện hộp thoại xác nhận đăng ký .23 Hình 3.3: Giao diện nhập thơng tin sinh viên 24 Trang iii Ajax tốn đăng ký tín MỞ ĐẦU Học theo hệ tín thuật ngữ quen thuộc với sinh viên Nó có nhiều điểm bật Ba quyền lợi học gồm: phép chọn lớp, chọn thầy, chọn thời gian học Theo tơi biết có nhiều trang web đăng ký tín trường đại học Ở nơi mà máy tính có kết nối mạng, sinh viên vào trang web trường để đăng ký tín tiện lợi Đã có nhiều website khác phục vụ cho sinh viên đăng ký tín chỉ, tơi cịn chọn đề tài đăng ký tín Điều mở đầu Tôi muốn tham gia vào việc thiết kế web đăng ký tín để ứng dụng kiến thức học trường, đồng thời nội dung luận văn tốt nghiệp Qua hướng dẫn Thầy Ngô Đình Thưởng, tơi chọn đề tài thích hợp có tên: “Ajax tốn đăng ký tín chỉ” Q trình phân tích tốn ứng dụng mơn học lập trình web, sở liệu nâng cao, phân tích thiết kế hệ thống thơng tin để có website tơi xin trình bày phần sau Mặc dù cố gắng, kinh nghiệm thân có hạn nên luận văn gặp sai sót Rất mong q thầy đọc góp ý chỗ sai sót để đề tài tơi thêm hồn chỉnh Tơi xin chân thành cảm ơn thầy Ngơ Đình Thưởng hướng dẫn Đồng thời tơi xin cám ơn thầy Lê Viết Chung chủ nhiệm lớp sư phạm tin chúng tôi, thầy cô trường Đại học Sư phạm giảng dạy chuyên môn nghiệp vụ cho Trang Ajax tốn đăng ký tín CHƯƠNG 1: CƠ SỞ LÝ THUYẾT VỀ AJAX 1.1 Tổng quan mơ hình ứng dụng Web World Wide Web (gọi tắt Web) hệ thống server Internet hỗ trợ riêng cho tư liệu định dạng ngôn ngữ đánh dấu gọi HTML (HyperText Markup Language) Những tư liệu cho phép liên kết đến tư liệu khác tệp tin đồ họa, âm thanh, video Chú ý tất server Internet World Wide Web, Web không đồng nghĩa với Internet, Web tập Internet, ứng dụng quan trọng Internet [13] user CSDL Internet Xử lý hệ khách Trình duyệt web Xử lý hệ phục vụ Hệ phục vụ web Hình 1.1: Mơ hình ứng dụng web Khái niệm Client-Server đề cập đến mối quan hệ logic máy tính mạng Trong mạng client-server máy tính chia thành máy server máy client, trình xử lý phân bổ cho máy server lẫn máy client, với máy có vai trị chun biệt Server máy tính chun dụng, có khả xử lý mạnh, lưu trữ lớn Chức chủ yếu server quản lý lưu giữ nguồn tài nguyên mà máy tính khác mạng truy cập, ngồi server có nhiệm vụ kiểm soát truy cập bảo mật liệu Tùy theo chức xử lý , ta có loại : file server, web file server, database server, mail server, Server chạy trình chủ (server program) Client máy tính truy cập liệu từ server, client chạy trình khách (client program) chịu trách nhiệm giao diện người sử dụng, số trình xử lý Client máy tính thơng thường kết nối với Server qua mạng Client gởi Trang Ajax tốn đăng ký tín u cầu người sử dụng đến server, server xử lý yêu cầu gởi kết cho client Mạng Internet mạng có kiến trúc client-server Hình 1.2: Mơ hình kiến trúc client-server Kiến trúc client-server có nhiều ưu điểm, tính bảo mật an tồn thơng tin nhờ vào tính năng: [1- trang ]  Các tài nguyên mạng quản lý tập trung  Có thể tạo cấp kiểm sốt chặt chẽ việc truy cập file liệu  Giảm nhẹ việc quản lý máy client  Bảo mật backup liệu  Có thể mở rộng hệ thống cần Tuy nhiên mơ hình có nhược điểm: giá thành cao, server trở thành điểm tối yếu hệ thống, có nghĩa server bị hư hỏng tồn hệ thống khơng thể họat động 1.2 Giới thiệu Ajax 1.2.1 Ajax ? AJAX = Asynchronous JavaScript and XML Hiện kỹ thuật Ajax ứng dụng nhiều trang web nhằm tăng tính thân thiện tiện lợi cho trang web, tăng tốc hiển thị trang nhờ khơng tải lại thành phần cố định Hình 1.3: Ví dụ minh họa Ajax Trang Ajax tốn đăng ký tín Theo [6- trang ]: Ajax nhóm cơng nghệ phát triển web sử dụng để tạo web động Một cách ngắn gọn, AJAX viết tắt Asynchronous JavaScript And XML Như tên gọi nó, AJAX chẳng qua kết hợp Javascript XML thiết kế web Khi tìm hiểu AJAX, thường nhầm tưởng AJAX ngôn ngữ lập trình Thực tế, AJAX kỹ thuật kết hợp Javascript XML để đem lại cho người dùng website nhanh hơn, tốt có tính tương tác cao Kỹ thuật AJAX xuất từ lâu thuật ngữ AJAX thống phổ biến rộng rãi giới công nghệ phần mềm từ năm 2006 trở Điểm khác biệt sử dụng AJAX, Javascript tương tác trực tiếp với Server cách sử dụng đối tượng XMLHttpRequest Nhờ đó, trang web tương tác trực tiếp với Server nhận kết trả từ Server mà không cần phải tải lại toàn trang web So với cách truyền nhận liệu thông thường, người dùng nhấn chuột vào liên kết website, toàn web tải trình duyệt sử dụng AJAX, lượng nhỏ thông tin (đa phần dạng text) truyền nhận tốc độ trang web tăng lên đáng kể.Thiết kế web với AJAX cải thiện tốc độ truy cập web người dùng 1.2.2 Giao tiếp với máy chủ Chìa khóa cho việc giao tiếp khách/chủ Ajax sử dụng đối tượng XMLHttpRequest JavaScript Đối tượng hầu hết trình duyệt hỗ trợ, gồm Windows® Internet Explorer 5.0 cao hơn, Safari 1.2, Mozilla Firefox, Opera cao hơn, Netscape Để hiểu khác giao tiếp khách/chủ truyền thống giao tiếp khách/chủ dựa Ajax, tơi sử dụng ví dụ Theo truyền thống, để trình duyệt khách gửi nội dung đến máy chủ để xử lý lưu trữ sở liệu, thường sử dụng hành động POST để gửi nội dung từ trường đầu vào thu thập phía khách tới máy chủ Máy chủ xử lý nội dung cách sử dụng PHP (hoặc ngôn ngữ kịch lệnh mà lựa chọn), đọc lưu liệu cách sử dụng sở liệu, trả lại kết nhúng bên mã HTML Sau HTML trình Trang Ajax tốn đăng ký tín duyệt xử lý trang biểu cho người sử dụng cuối xem Hình 1.4- mơ tả rõ kịch Hình 1.4: Quy trình truyền thống để đệ trình liệu nhận kết Server Page1 page2 page page Browser Hình 1.5: Mơ hình truyền thống tương tác Client- Server Khi sử dụng Ajax, quy trình cần thời gian mặt trước Ý tưởng làm cho người sử dụng cảm thấy họ đợi trang cập nhật Thực tế cách sử dụng Ajax, phát triển tồn ứng dụng web cách sử dụng trang HTML đơn lẻ, không làm Theo cách truyền thống, muốn gửi biểu mẫu cho máy chủ, thiết lập hành động (action) biểu mẫu định rõ kiểu hành động POST Với Ajax, không thực đệ trình biểu mẫu trực tiếp cho máy chủ Thay vào đó, gọi hàm JavaScript, kiểm tra lại Trang Ajax tốn đăng ký tín 4.3.2.2 Tệp Ajax.php 4.3.2.3 Tệp getuser.php tac{border-collapse:collapse;border:solid 1px green;} tdc{border:solid 1px silver;padding: 2 3;font:normal 9pt Arial;color:navy;} tdn{border:solid 1px silver;padding: 2 3;font:normal 9pt Arial;color:navy;text-align:center} but{width:80px;color:green}