LOGO

MVC
jQuery
Write less, do more

Contents

Javascript jQuery Vn p dng m hnh MVC Gii php Client side MVC Demo

2
3 4 5

LOGO

MVC
jQuery
Javascript jQuery

Javascript jQuery

- jQuery l mt framwork javascript m ngun m c s dng rng ri nht hin nay. - Gip vit m nhanh javascript, ngn gn, sc tch trn cng mt cng vic. - Truy vn tp tin Htmlx l s kin, animate, ajax,... - Vi jQuery m ngun hot ng ging nhau trn mi trnh duyt.

Javascript jQuery
To Object : var doiTuong= { thuocTinh : giaTri, } Ch : giaTri c th l chui s hoc function, cc thuc tnh u c l public Vd : var sinhvien = { mssv : 0912000 getDiemTB : function(){ return 10; } }

Javascript jQuery
- Ni dung gii thiu jQuery c nhm c phn cng thit trnh nn nhm mnh khng tp trung qu sau vo n m ch gii thiu nhng ci c bn c lin quan n demo ca nhm. Cc bn mun tm hiu sau c th ln trang ch ca jQuery hoc i nhm sau thuyt trnh

Javascript jQuery
Khai bao class var TenClass = function(thamso1,thamso2){ this.thuocTinhPrivivate = thamso1; var thuocTinhPublic = thamso2; } Vd : var SinhVien = function(mssv, hoten ){ var _mssv = mssv; var _hoTen = hoten; this.getMSSV = function(){ return _mssv; } this.getHoTen = function(){ return _hoTen; } } var sv = new SinhVien("0912000","Nguyen Van A");

Javascript jQuery
Array :
$(function () {

var dsTen = new Array();

dsTen[0] = "Nguyn Vn A"; dsTen[1] = "Trn Vn B"; /* * hoc * var dsTen = ["Nguyn Vn A", "Trn Vn B"]; */

$.each(dsTen, function (index, value) {

alert("Phn t th " + index + " = " + value); }); });

Javascript jQuery
M rng i tng jQuery
$.extend({

min: function (a, b) { return a < b ? a : b; },

max: function (a, b) { return a > b ? a : b; } }); Kt qu : $.min(2, 3); // => 2 $.max(4, 5); // => 5

Javascript jQuery
M rng phn t jQuery ( c to ra vi selector)
$.fn.extend({
check: function () { return this.each(function () { this.checked = true; }); },

uncheck: function () {
return this.each(function () { this.checked = false; ); } })

Kt qu :
$("input[@type=checkbox]").check(); $("input[@type=radio]").uncheck();

Javascript jQuery
Json (JavaScript Object Notation) : Mt cch n gin th nh sau khi khai bo mt object : var sv = { mssv : '0912000', ten:'hello'}
Khi trang web ca bn yu cu server tr v mt json, server s tr v mt chui sau :

{ mssv : '0912000', ten:'hello'}

Chui ny chnh l json

Javascript jQuery
Ajax (Asynchronous JavaScript and XML) : l k thut gi v nhn d liu gia server l client mt cch bt ng b.
$.ajax({ async : function, beforeSend : function, cache : boolean, complete : function, data : Object,Array dataType : xml | html | scipt | text, error : function, success : function, timeout : mili giy, type : POST|GET, url : a ch })

LOGO

MVC
jQuery
Vn p dng m hnh MVC
(Server side)

Vn p dng
MVC ti server

HTTP request
Controller initializes Selects and Renders

HTTP Respond View

Read Data to render Model

Vn p dng

Vn

Javascript, ajax (cc script client) ng vai tr quan trng trong ng dng web(lm tng tnh tng tc,validation, hiu ng ) , vy chng c qun l u trong m hnh MVC ny ?

Ta thy rng cc client scipt khng thuc vo trong cc m hnh MVC server side ny.

Vn p dng
Khng qun l
Javascript, ajax

View qun l ton b

Ri rm Kh bo tr, kim tra

Cng khng ci thin c

LOGO

MVC
jQuery
Gii php

Gii php

MVC : - Phn chia s ph thuc. - Mm do. - Ti s dng. D kim tra, d li Ti sao ch p dng vi server side ???

Gii php

MVC server side + MVC client side = ALL !!!!

LOGO

MVC
jQuery
Server,Client MVC

Server,Client MVC v jQuery

S

Model

Model

Respond
Controller request Controller

View

View