Ứng dụng Javascript trong việc giải quyết bài toán

Một phần của tài liệu xây dựng hệ thống quản lý các cơ sở giáo dục (Trang 31)

2.6. GIỚI THIỆU VỀ JQUERY 2.6.1. Tổng quan về jQuery

jQuery là một thư viện kiểu mới của JavaScript giúp đơn giản hóa cách viết JavaScript và tăng tốc độ xử lý các sự kiện trên trang Web.

jQuery có mã nguồn mở và hoàn toàn miễn phí. jQuery có một cộng đồng đông đảo sử dụng và được rất nhiều lập trình viên tham gia hoàn thiện, phát triển và viết Plugin.

Việc sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt web.

2.6.2. Sử dụng jQuery

Để sử dụng jQuery cần phải có thư viện do jQuery cung cấp bằng cách truy cập vào địa chỉ http://jquery.com để download phiên bản mới nhất.

<script> dung="<img src='images/true.png'/>"; sai="<img src='images/false.png'/>"; function tencoso(){ var loi=0; var tencoso=document.getElementById("txtTenCoSo").value; if(tencoso==""){ loi++; document.getElementById("tencoso").innerHTML=sai+ "Tên cơ sở giáo dục không được rỗng!"

} else{ document.getElementById("tencoso").innerHTML=dung; } if(loi!=0){ return false; } else { return true; } } </script>

Sử dụng trực tiếp jQuery lưu trữ tại jQuery hay Google từ 2 địa chỉ sau: http://code.jquery.com/jquery - 1.8.3.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

2.6.3. Ưu điểm của jQuery

jQuery được sử dụng nhiều trong thiết kế website bởi vì jQuery có những ưu điểm sau:

 Hỗ trợ tốt việc xử lý các vấn đề thường gặp (DOM, Ajax,…).

 Tương thích với nhiều trình duyệt web phổ biến.

 Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết.

 Ít xung khắc với các thư viện Javascript khác.

 Có rất nhiều Plugin.

2.7. GIỚI THIỆU VỀ AJAX

2.7.1. Tổng quan về AJAX

AJAX (Asynchronous Javascript and XML) là một nhóm các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet.

Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:

 Kết hợp với HTML (hoặc XHTML) và CSS trong việc hiển thị thông tin.

 Kết hợp với mô hình DOM (Document Object Model), được thực hiện thông qua Javascript nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị.

 Kết hợp với đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web.

 Kết hợp với XML thường là định dạng cho dữ liệu truyền, mặc dù bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần, JSON và ngay cả EBML.

Hình 5. Sơ đồ miêu tả hoạt động của Ajax

(Nguồn: http://blog.bounceweb.com/advantages-of-using-ajax-in-your-website/)

2.7.2. Ưu điểm của Ajax

Ajax có những ưu điểm sau:

 Trong nhiều trường hợp, các trang web chứa rất nhiều nội dung thông thường trong trang. Nếu sử dụng các phương pháp truyền thống, những nội dung đó sẽ phải nạp lại toàn bộ với từng yêu cầu. Tuynhiên, nếu sử dụng Ajax, một ứng dụng web có thể chỉ yêu cầu cho các nội dung cần thiết phải cập nhật do đó giảm lượng lớn băng thông và thời gian nạp trang.

 Ajax giúp việc thiết kế web đa dạng hơn và tăng tính tương tác của website với người dùng.

 Ajax sử dụng các công nghệ đã có sẵn nên dễ học và sử dụng.

 Nhờ tính phổ biến của Ajax đã khuyến khích việc phát triển các khuôn mẫu mà sẽ giúp lập trình viên tránh khỏi các vết xe đổ trước.

 Được hỗ trợ trong các trình duyệt phổ biến hiện nay.

2.7.3. Ứng dụng Ajax trong giải quết vấn đề bài toán

Để quản lý các cơ sở giáo dục, cần lưu địa chỉ của cơ sở giáo dục ấy. Ở nước ta có đến 63 tỉnh thành, trong đó có rất nhiều quận huyện, xã phường vì thế để tạo ra một select box mà khi người dùng chọn thông tin của tỉnh thành phố, thì select box quận huyện sẽ tự động lọc dữ liệu chỉ hiện ra những quận huyện ở tỉnh mà người dùng lựa chọn.

2.8. GIỚI THIỆU VỀ HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU ORACLE ĐA

PHƯƠNG TIỆN

2.8.1. Giới thiệu về hệ quản trị cơ sở dữ liệu đa phương tiện

 Một hệ quản trị cơ sở dữ liệu đa phương tiện là một cái khung quản trị nhiều kiểu dữ liệu khác nhau.

<script language="javascript"> $(document).ready(function() { $('#slTinh').change(function() { id_tinh = this.value; $('#shuyen').load('ajax.php?id_tinh=' + id_tinh); }); }); </script>

 Một hệ quản trị cơ sở dữ liệu đa phương tiện phải cung cấp một môi trường thích hợp cho việc sử dụng và quản trị dữ liệu đa phương tiện. Do đó hệ quản trị cơ sở dữ liệu đa phương tiện phải hỗ trợ nhiều kiểu dữ liệu đa phương tiện cùng với những phương tiện dễ dàng cho việc sử dụng cho việc thực hiện những chức năng của một hệ quản trị cơ sở dữ liệu truyền thống

2.8.2. Kiến trúc của Oracle multimedia

Kiến trúc của Oracle đa phương tiện được giới thiệu trong hình 6. Dữ liệu multimedia được chia thành hai lớp là các dữ liệu liên tục và các dữ liệu không liên tục. Các dữ liệu liên tục bao gồm các dữ liệu âm thanh, video thay đổi theo thời gian. Các dữ liệu không liên tục là các dữ liệu không phục thuộc vào thời gian, các loại dữ liệu đặc trưng cho dạng này là các dữ liệu văn bản (có hoặc không có định dạng), hình ảnh tĩnh và các đối tượng đồ họa.

Các kiểu dữ liệu thông thường của một CSDL multimedia bao gồm:

 Dữ liệu văn bản (có hoặc không có định dạng).

 Hình ảnh: là các hình ảnh được mã hóa sử dụng các dạng thức chuẩn như là JPEG hoặc MPEG.

 Âm thanh.

 Video

Các đặc tính chung của dữ liệu multimedia bao gồm:

+ Phi cấu trúc: Các dữ liệu multimedia có khuynh hướng phi cấu trúc vì

vậy các tác nghiệp quản trị dữ liệu chuẩn như chỉ số hoá, tìm kiếm nội dung, truy vấn dữ liệu thường là không áp dụng được.

+ Tính tạm thời: Một vài kiểu dữ liệu multimedia như là video, âm thanh

và hoạt hình đều phụ thuộc vào yếu tố thời gian liên quan mật thiết đến việc lưu trữ, thao tác và mô tả chúng.

+ Có dung lượng lớn: các dữ liệu video và âm thanh thường đòi hỏi các

+ Các ứng dụng hỗ trợ: các dữ liệu phi chuần có thể đòi hỏi các quy

trình xử lý phức tạp như việc sử dụng các thuật toán nén dữ liệuđối với các ứng dụng CSDL multimedia.

Hình 6. Kiến trúc của Oracle Multimedia

(Nguồn: http://www.slideshare.net/thuymtg/bao-cao-csdldaphuongtien-1)

2.8.3. Những ưu điểm khi sử dụng cơ sở dữ liệu đa phương tiện

 Có có đầy đủ các chứa năng của có sở dữ liệu truyền thống.

 Có khả năng lưu trữ dữ liệu lớn.

 Có khả năng truy xuất đồng nhất về mặt hình thức dữ liệu đa phương tiện và dữ liệu cổ điển được trình bày bằng những quy cách khác nhau.

 Có khả năng truy vấn cùng một lúc các tài nguyên đa phương tiện khác nhau và mang cách làm cho cơ sở dữ liệu cổ điển hoạt động sang cơ sở dữ liệu đa phương tiện.

 Có khả năng tìm lại được các đối tượng đa phương tiện từ các thiết bị lưu trữ cục bộ bằng phương pháp liên tục.

 Có khả năng chuyển giao người dùng bản trình bày kết quả truy vấn đáp ứng các nhu cầu về chất lượng phục vụ khác nhau.

2.8.4. Các kiểu đối tượng đa phương tiện

Oracle Multimedia cung cấp 4 kiểu đối tượng quan hệ chính là:

 ORDImage: sử dụng cho dữ liệu hình ảnh

 ORDAudio: sử dụng cho dữ liệu âm thanh

 ORDVideo: sử dụng cho dữ liệu phim ảnh

 ORDDoc: sử dụng cho dữ liệu kết hợp

Các kiểu đối tượng này lưu thông tin nguồn dữ liệu trong kiểu đối tượng quan hệ ORDSource, có nghĩa là đối tượng ORDSource được nhúng bên trong các đối tượng này.Kiểu đối tượng ORDSource cung cấp các phương thức cho thao tác nguồn dữ liệu đa phương tiện, không sử dụng đối tượng ORDSource một cách trực tiếp mà phải thông qua một trong 4 kiểu đối tượng trên.

2.8.5. Tạo bảng với kiểu dữ liệu đa phương tiện

Để tạo một bảng có cột chứa dữ liệu đa phương tiện chúng ta sử dụng lệnh CREATE TABLE như tạo bảng thông thường.Cột chứa dữ liệu đa phương tiện có thể là kiểu ORDImage, ORDAudio, ORDVideo, ORDDoc.

Vi dụ: câu lệnh SQL sau tạo một bảng có tên là image có chứa kiểu dữ liệu ORDIMAGE

CREATE TABLE IMAGE (

MA_IMAGE NUMBER PRIMARY KEY, MO_TA VARCHAR2(100) NOT NULL, IMAGE ORDSYS.ORDIMAGE NOT NULL, MA_COSOVARCHAR2(10) REFERENCES COSO_GIAODUC(MA_COSO)

)

2.8.6. Truy xuất dữ liệu đa phương tiện

Để truy xuất các tập tin trong một thư mục trên đĩa của máy chủ CSDL từ PL/SQL, chúng ta phải tạo một đối tượng thư mục trong CSDL trỏ đến thư mục. Câu lệnh CREATE DIRECTORY được sử dụng để tạo một đối tượng thư mục trong CSDL

Ví dụ:

Câu lệnh: CREATE DIRECTORY MEDIA_DIR AS

'/home/oracle/media_dir'; sẽ tạo một đối tượng thư mục có tên là MEDIA_DIR và chỉ đến thư mục /home/oracle/media_dir trên hệ thống tập tin của máy chủ CSDL.

Để có thể ghi dữ liệu đa phương tiện từ CSDL vào một tập tin, chúng ta phải gán quyền ghi trên thư mục cho người sử dụng. Ví dụ: lệnh sau gán quyền ghi cho người dùng (user) thao.

GRANT WRITE ON DIRECTORY MEDIA_DIR TO thao;

Để tải dữ liệu đa phương tiện từ một tập tin vào CSDL, chúng ta phải gán quyền đọc trên thư mục chứa dữ liệu đa phương tiện cho người sử dụng tương ứng.

GRANT READ ON DIRECTORY MEDIA_DIR TO thao;

2.8.7. Thêm dữ liệu đa phương tiện vào cơ sở dữ liệu bằng ngôn ngữ PHP PHP

Viết một hàm để thêm dữ liệu đa phương tiện vào cơ sở dữ liệu hàm này nhận các giá trị đầu vào bao gồm chuỗi kết nối dữ liệu, các biến lưu thuộc tính không phải dạng đa phương tiện, biến lưu dữ liệu đa phương tiện và biến lưu loại của kiểu dữ liệu đa phương tiện.

Bên trong hàm ta viết một khối lệnh PL/SQL để lưu các giá trị nhận vào trong cơ sở dữ liệu.

Ví dụ này bao gồm một câu truy vấn được dùng để đưa dữ liệu đa phương tiện vào trong các đối tượng Oracle Multimedia chưa có sẵn trong một bảng bằng cách thêm một dòng mới

2.8.8. Truy xuất dữ liệu đa phương tiện từ Oracle Multimedia

Viết câu lệnh truy vấn để lấy nội dung của hình ảnh đã thêm vào $query= “select t.image.getContent() from hinh_anh t” ;

2.8.9. Kết hợp PHP và Oracle database

Kết nối cơ sở dữ liệu

Cú pháp:

$conn=oci_connect(“hostname”, “user”, “password”);

Thực thi câu truy vấn

Cú pháp:

Oci_parse($conn,“Câu truy vấn”);

Đếm số dòng dữ liệu trong bảng

Cú pháp:

- oci_num_rows($ket_qua);

Lấy dữ liệu từ bảng đưa vào mảng

Cú pháp:

- oci_fetch_array($ket_qua);

$query=INSERT INTO hinh_anh t (ma_anh,mo_ta,image,ma_coso ,thumb) VALUES(photos_tbl_seq.nextval,:MoTa, ordimage.init(),:ma,ordimage.init())

RETURNING t.image.getcontent(), rowid into :lob, :rid

Đóng kết nối cơ sở dữ liệu

Cú pháp:

oci_close();

2.9. GIỚI THIỆU TỔNG QUAN VỀ GOOGLE MAP API V3

2.9.1. Giới thiệu về Google Map APIv3 trong việc lưu tọa độ các cơ sở giáo dục vào trang đồ. sở giáo dục vào trang đồ.

Google Maps là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google, hỗ trợ nhiều dịch vụ khác của Google nổi bật là dẫn đường. Nó cho phép thấy bản đồ đường sá, đường đi cho xe đạp, cho người đi bộ và xe hơi, và những địa điểm kinh doanh trong khu vực cũng như khắp nơi trên thế giới.

Map API là một phương thức cho phép 1 website B sử dụng dịch vụ bản đồ của site A (gọi là Map API) và nhúng vào website của mình (site B). Site A ở đây là google map, site B là các web site cá nhân hoặc tổ chức muốn sử dụng dịch vụ của google, có thể rê chuột, room, đánh dấu trên bản đồ... Các ứng dụng xây dựng trên maps được nhúng vào trang web cá nhân thông qua các thẻ javascripts do vậy việc sử dụng API google rất dễ dàng

2.9.2 Cách sử dụng Google Map API

2.9.2.1 Đăng ký sử dụng Google map API

Tạo một API Key:

 Truy cập vào https://code.google.com/apis/console và đăng nhập bằng tài khoản gmail của mình

 Click vào Services link bên trái menu

 Kéo xuống dưới tìm Google Maps API v3 service và kích hoạt dịch vụ

 Click API Access, một API key sẽ hiện lên và bạn sẽ coppy lại để sử dụng

2.9.2.2 Chèn bản đồ về trang web

 Chèn key vào script

 Chèn bản đồ vào bằng cách viết một hàm trong javascript <script type="text/javascript">

function initialize() {

var myOptions = {

center: new google.maps.LatLng(-34.397, 150.644),

zoom: 8,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"),

myOptions);

}

</script>

 Các thuộc tính có trong hàm initialize()

 Center: một điểm làm trung tâm của bản đồ Latitudes(vĩ độ) và Longitudes(kinh độ). Tương tự như trên khi ta định nghĩa 1 điểm là tọa độ trong Map ta để nó nằm trong new google.maps.LatLng(lat,lng). Một điểm được xác định bởi vĩ độ và kinh độ.

 Zoom:độ zoom được quy định khi map được load.

 Map type: loại Map được hiển thị sau khi load xong. có 4 loại để chọn: ROADMAP, SATELLITE, HYBRID, TERRAIN <scripttype="text/javascript"

src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SE T_TO_TRUE_OR_FALSE">

2.9.2.3 Lớp phủ trên bản đồ

 Tổng quan: Lớp phủ(overlays) là các đối tượng trên bản đồ và được gắn với vĩ độ, kinh độ. Overlays phản ánh các đối tượng chúng ta thêm vào bản đồ như points, line, areas,…

 Các loại lớp phủ: markers, polylines, areas, info windows, polygons.

 Giới thiệu về lớp phủ Markers

 Markers dùng để xác định một điểm trên bản đồ hoặc đánh dấu địa điểm dựa trên vĩ độ và kinh độ. Theo mặc định sử dụng icon của google làm hình ảnh hiện lên điểm đánh dấu. Hoặc muốn một icon của mình thì ta gọi phương thức setIcon().

 Các trường được xây dựng trong new google.maps.Marker: o Position(bắt buộc): quy định là tọa độ LatLng của

điểm được đánh dấu.

o Map(tùy chọn): quy định đối tượng bản đồ được đánh dấu. nếu thuộc tính này được khai báo trong đây nó sẽ thay thế cho Markers.setMap(map).

o Icon(tùy chọn): hình ảnh tùy chọn mà bạn muốn hiển thị thay thế hình ảnh mặc định. Dùng tùy chọn này thay thế cho marker.setIcon(link đến hình ảnh trong thư mục).

o Title(tùy chọn): tiêu đề của địa điểm.

o Draggable(tùy chọn): thuộc tính động của điểm đánh dấu, thể hiện sự chuyển động của điểm được đánh dấu. Nếu TRUE tính động được khởi động.

o Animation: cách thức chuyển động của điểm đánh dấu. CÓ 2 cách thức DRAG, Bounce

 Infowindows

o Infowindows là một cửa sổ chứa các thông tin. o Tạo một Infowindows

New google.maps.InfoWindow({

Content:’text’//chứa nội dung InfoWindows })

o Sự kiện:click, dbclick, mouseup, mousedown, mouseover, mouseout.

Google .maps.event.addListener(đối tượng, sự kiện gọi, function()){}

2.9.2.4 Sử dụng PHP, Oracle, XML với google map xây dựng điểm đánh dấu các địa điểm trên bản đồ

Tạo bảng:

Tạo bảng để lưu các thông tin của địa điểm cần hiện lên bản đồ, quan trọng nhất là kinh độ và vĩ độ.

Xuất ra XML với PHP

 Xuất dữ liệu bảng vào một định dạng XML để bản đồ có thể lấy dữ liệu thông qua câu lệnh JavaScript.

 Sử dụng chức năng domhtml PHP xuất ra XML.

Tạo bản đồ

 Để tải các tập tin XML vào các trang web, bạn có thể tận dụng lợi thế của các trình duyệt cung cấp đối tượng XMLHttpRequest. Đối tượng này cho phép bạn lấy một tập tin nằm trên cùng tên miền với trang web yêu cầu, và là cơ sở của lập trình "AJAX".

 Với function đã được định nghĩa ta thực hiện gọi file xml và nhận kết quả trả về và lặp lại từ đầu đến cuối file xml để xử lý chúng.

CHƯƠNG 3

NỘI DUNG VÀ KẾT QUẢ NGHIÊN CỨU

3.1. MÔ TẢ HỆ THỐNG

Khi người dùng có nhu cầu tìm hiểu thông tin của các cơ sở giáo dục hoặc người dùng có nhu cầu giới thiệu về có sở giáo dục ở nơi mình đang công tác họ sẽ tạo một tài khoản trên trang web.Sau khi tạo tài khoản, người dùng phải đăng nhập vào tài khoản email (cung cấp lúc đăng ký) để kích hoạt tài khoản của mình.

Dựa vào những thông tin đăng ký của người dùng hệ thống cấp quyền cho người dùng, phân chia làm 3 loại người dùng:

 Người dùng là quản trị hệ thống

 Người dùng bình thường

 Người dùng có quyền

Nếu người dùng chưa có tài khoản hoặc chưa đăng nhập vào hệ thống

Một phần của tài liệu xây dựng hệ thống quản lý các cơ sở giáo dục (Trang 31)

Tải bản đầy đủ (PDF)

(90 trang)