Giao Trinh Bai Tap Lap Trinh Mang

40 bi thc hnh Thit k v lp trnh web (PHP)- ver 1.0 Lu hnh ni b

Ging vin: ThS. L Anh T BM Truyn thng a phng tin

MC LC

MC LC ....................................................................................................................... 1

PHN 1. HTML CSS ................................................................................................... 3

Bi 1. Vit m HTML thit k giao din trang web ng k thng tin c nhn ......... 3

Bi 2. Vit m HTML thit k giao din trang web ngg k thng tin c nhn ....... 4

Bi 3. Vit m HTML thit k giao din trang web tm kim thng tin ..................... 5

Bi 4. To trang m hnh v nh dng vn bn .......................................................... 6

Bi 5. To trang m hnh v to gc gp cho khung vn bn ..................................... 6

Bi 6. M hnh vn chn hnh nh v ph theo hnh mu ................................. 7

Bi 7. M hnh nh dng bng n gin dng CSS ................................................... 8

Bi 8. M hnh to mu cho thanh cun ca s .......................................................... 9

Bi 9. To Menu 1 tng dc vi hiu ng i mu nn v mu ch c khung vin

bao theo hnh mu........................................................................................................ 9

Bi 10. Dng css p dng dng hng khi thit k form khng dng th Table ........ 10

Bi 11. Hng dn thit k form vi CSS................................................................. 12

Bi 12. Dng css to gallery dng thumbnail ............................................................ 14

Bi 13. To menu s ngang bng CSS v HTML ..................................................... 15

Bi 14. Menu ngang v submenu ngang s dng Jquery (CSS) ............................... 17

Bi 15. To mt website c giao din theo mu ....................................................... 20

Bi 16. To menu ng 2 cp .................................................................................... 22

PHN 2. JAVASCRIPT ............................................................................................... 27

A. TO V X L C C TNG (LAYER) ........................................................... 27

Bi 17. Minh ho s kin di chuyn chut vo phn t ............................................ 29

Bi 18. Minh ho s kin di chuyn chut vo v ra khi mt phn t .................... 29

Bi 19. Minh ho to mt lin kt hon chnh n mt trang web ........................... 30

Bi 19a. To menu dc .......................................................................................... 30

Bi 19b. To menu ngang ...................................................................................... 30

Bi 20. Minh ho to tng trong IE ........................................................................... 31

Bi 21. Minh ho vic n v hin tng bng cu lnh JavaScirpt ............................. 31



Bi 21a. To h thng menu .................................................................................. 33

B. NI DUNG NG V NH V NG ........................................................... 34

Bi 22. Minh ho thay i thuc tnh innerText ....................................................... 35

Bi 23. Minh ho thay i thuc tnh innerHTML ................................................... 36

Bi 24. Minh ho thay th thuc tnh outerText ........................................................ 36

Bi 25. Minh ho thay i thuc tnh outerHTML ................................................... 37

Bi 26. Minh ha vic nh v ng trong IE ............................................................ 37

Bi 27. Minh ho ni dung trong Netscape ............................................................... 38

C. KIM TRA TNH HP L CA D LIU ....................................................... 40

Bi 29. Kim tra d liu nhp vo form .................................................................... 40

Bi 30. Kim tra ng k hc tn ch ......................................................................... 43

Bi 31. Kim tra ni dung n t hng.................................................................... 43

PHN 3. PHP ................................................................................................................ 45

Bi 32. Thay i mu cho dng ca bng ................................................................. 45

Bi 33. To web site trc nghim trc tuyn dng tr li ng sai ........................... 46

Bi 34. Xy dng trang web trc nghim trc tuyn dng nhiu la chn ............... 46

Bi 35. Lp trnh xy dng form nhp cu hi trc nghim...................................... 46

Bi 36. To form ng k ti khon n gin ........................................................... 47

Bi 37. Cc thao tc x l d liu c bn (hin th, thm, sa, xa) ........................ 48

Bi 38. K thut hin th phn trang.......................................................................... 54

Bi 39. To trang ng k, ng nhp, ng xut, qun l bng PHP &MySQL ..... 56

Bi 40. Thit k gi hng online ............................................................................... 65



PHN 1. HTML CSS

Bi 1. Vit m HTML thit k giao din trang web ng k thng tin c

nhn



Bi 2. Vit m HTML thit k giao din trang web ngg k thng tin c

nhn



Bi 3. Vit m HTML thit k giao din trang web tm kim thng tin



Bi 4. To trang m hnh v nh dng vn bn nh ngha th tiu H1, H2 v th P c m ty v p dng vo 3 dng u. Dng th Span thc to im nhn: T sng nn, ch m p dng vo dng th 4.

h1 {

color: #00ff00

}

h2 {

color: #dda0dd

}

p {color: rgb(0,0,255)}

span.highlight{

background-color:yellow; font-weight:bold

}

This is header 1

This is header 2

This is a paragraph

This is a text. This is a text. This is a text. This is a

text.This is a text. This is a text. This is a text.

Bi 5. To trang m hnh v to gc gp cho khung vn bn

Khung c rng 300px, c khung vin kt hp gp gc di phi.(gp gc l 1 nh do gio vin cung cp. p dng vo thoe hnh mu

.curlycontainer{

border: 1px solid #b8b8b8;

margin-bottom: 1em;

width: 300px;

}

.curlycontainer .innerdiv{

background: transparent url(brcorner.gif)

bottom right no-repeat;

position: relative;

left: 2px;

top: 2px;

padding: 1px 4px 15px 5px;

}



Some title Some text here.Some text here. Some text here.Some text here.Some

text here. Some text here.Some text here.Some text here. Some text here.Some text

here.Some text here.

Bi 6. M hnh vn chn hnh nh v ph theo hnh mu

Hnh nh tri v bn phi, trong mt khong trng bng khong 20% rng ca cc on xung quanh, c ng vin, vn bn ph in nghing, canh gia, c nh.

Hng dn:

File css div.figure {

float: right;

width: 20%;

border: thin silver solid;

margin: 0.5em;

padding: 0.5em;

}

div.figure p {

text-align: center;

font-style: italic;

font-size: smaller;

text-indent: 0;

}

File HTML

Hinh Anh Va Phu De

Scale model of the Eiffel tower in Parc Mini-France

Hnh nh v ph . . . . .



Bi 7. M hnh nh dng bng n gin dng CSS

nh dng Font ch, c ch khong cc l, c vin, mu nn cho dng tiu . .. . theo hnh mu:

Hng dn: File css

.tablelist {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

margin: 0;

padding: 0;

border-collapse: collapse;

border-spacing: 0px;

border: 1px solid #EBDDBC;

}

.tablelist th {

margin: 0;

padding: 4px 6px;


background-color: #F1EFD8;

}

.tablelist td {

margin: 0;

padding: 4px;


}

File HTML

Table

DANH S CH NHN VIN

S th t H v tn Gii tnh

1

Nguyn Quang Th Nam

2

Trn Mai Dung



N

Bi 8. M hnh to mu cho thanh cun ca s

S dng mu sc ty cho cc thanh phn thanh cun theo hnh mu:

Hng dn: File css

body {

scrollbar-face-color : SILVER;

scrollbar-shadow-color :BLACK;

scrollbar-highlight-color :RED;

scrollbar-3dlight-color : GREEN;

scrollbar-darkshadow-color : LIME;

scrollbar-track-color : YELOW;

scrollbar-arrow-color : RED;

}

File HTML

Table

Cho cc bn. . . . . .

Bi 9. To Menu 1 tng dc vi hiu ng i mu nn v mu ch c

khung vin bao theo hnh mu

Hng dn:

File css ul,li,a {

display:block;

margin:0;

padding:0;

border:0;

}

ul {

width:150px;



border:1px solid #9d9da1;

background:white;

list-style:none;

}

li {

position:relative;

padding:1px;

padding-left:26px;

background:url("item_moz.gif") no-repeat;

z-index:9;

}

a {

padding:2px;

border:1px solid white;

text-decoration:none;

color:gray;

font-weight:bold;

width:100%;

}

a:hover {

border-color:gray;

background-color:#bbb7c7;

color:black;

}

File HTML

Menu 1 tang

Trang ch Tin tc Gii Tr Lin h

Bi 10. Dng css p dng dng hng khi thit k form khng dng th

Table

Hng dn:

File css label{

float: left;

width: 120px;

font-weight: bold;

}

input, textarea{

width: 180px;

margin-bottom: 5px;

}

textarea{



width: 250px;

height: 150px;

}

.boxes{

width: 1em;

}

#submitbutton{

margin-left: 120px;

margin-top: 5px;

width: 90px;

}

br{

clear: left;

}

input:focus, textarea:focus{

background-color: lightyellow;

}

File HTML

Form dng Tableless

Name

Email Address:

Comments:

Agree to Terms?



Bi 11. Hng dn thit k form vi CSS

Personal Information

First name:

Last name:

Email:

Sex

Male Female

Country

VietNam

China

study

PHP ASP.NET

Comments:



Trang m ngun CSS:

/* demo css tren form */

form {

margin: 0;

text-align:left;

padding:5px;

}

form fieldset {

border:1px solid #0066FF;

padding: 10px;

margin: 0;

}

form legend{

color:#FF0000;

font-weight:bold;

}

form label {

/* display: block; */

float: left;

width: 100px;

padding: 0;

margin: 5px 0px 0px 5px;

text-align: left;

}

form fieldset label:first-letter {

text-decoration:underline;

}



Bi 12. Dng css to gallery dng thumbnail (Over chut vo vo nh s hin th khung cha nh v nhiu ni dung khc) , thun tin cho vic to gallery trong phn admin hoc trong cc icon ca mu tin

File CSS .thumbnail{

position: relative;

z-index: 0;

}

.thumbnail:hover{

background-color:

transparent;

z-index: 50;

}

.thumbnail span{

position: absolute;

background-color:

lightyellow;

padding: 5px;

left: 200px;

border: 1px dashed gray;

width:280px;

text-align: justify;

visibility: hidden;

color: black;

text-decoration: none;

}

.thumbnail span img{

border-width: 1;

padding: 2px;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

top: 0;

left: 60px; /*position where enlarged image should offset horizontally */

}

File HTML

Table

y l on CSS n gin lm gallery dng thumbnail, rt thun tin cho vic to gallery trong phn admin hoc trong cc icon ca mu tin



Bi 13. To menu s ngang bng CSS v HTML

C rt nhiu cch c th to c mt menu s ngang nh th ny

Thng th khi lm menu s ngang nh vy th mi ngi ngh ngay n vic s dng javascript. Tuy nhin, vi nhng kin thc c bn v html v css hon ton c th to c menu ny m khng cn phi s dng n nhng hm javascript. u tin bn bt u vi m html to ra menu. To ra mt file html mi t tn l menu.html v vit code vi ni dung nh sau:

Main 1

Sub 1

Sub 2

Sub 3

Sub 4

Sub 5

Sub 6

Main 2

Sub 1

Sub 2

Sub 3

Sub 4

Sub 5

Sub 6

Main 3

Sub 1

Sub 2

Sub 3

Sub 4



Sub 5

Sub 6

Gii thch: Menu c to ra bi cc th . Trong mi th ny s cha tiu ca menu v mt menu con (sub menu). Mc nh menu con (sub menu) s trng thi n (display: none) ch khi no tr chut vo menu chnh th menu con (sub menu) cha trong n mi chuyn sang trng thi hin th. Sau khi to xong file menu.html. Bn save li v to mt file mi c tn style.css (t cng cp vi file menu.html. V on code cho file style.css ny s l: /*------------------MENU------------------------*/

ul{

margin: 0;

padding: 0;

}

div#mainNav {

width: 200px;

line-height: 100%;

z-index:99999999;

}

div#mainNav ul {

list-style: none;

z-index:99999;

border: 1px solid #333333;

border-bottom: 0 none;

display: block;

width: 200px;

}

div#mainNav ul li {

position: relative;

border-bottom: 1px solid #333333;

z-index:99999;

cursor: pointer;

}

div#mainNav ul li:hover{

background:#ffffff;

background-color: #99CCFF;

}

div#mainNav ul li a , div#mainNav ul li span{


font-weight:normal;

display: block;

color: #FF0033;

padding: 5px;

}

div#mainNav ul li a:hover, div#mainNav ul li span:hover{




color: #0000FF;

}

div#mainNav ul li ul li{

border-bottom: 1px solid #333333;

padding-left:8px;

}

div#mainNav ul li ul li a{

color: #FF0033;

font-weight:normal;

display: block;

}

div#mainNav ul li ul li a:hover{

color: #0000FF;


}

div#mainNav ul li:hover ul {

display: block;

width: 200px;

}

div#mainNav ul li ul

{

border: 1px solid #333333;

border-bottom: 0 none;

background:#ffffff ;

position: absolute;

top: -1px;

left: 202px;

display: none;

z-index:9999999;

}

Bi 14. Menu ngang v submenu ngang s dng Jquery (CSS)

Trong hu ht mi trng hp khi s l CSS bn u rt au u khi cn ie6 hiu bn. Cch

thc to menu subnav di y s dng css kt hp Jquery rt n gin tuy nhin hiu qu

tht m mn. Bn hon ton c th kt hp vi vic truy vn t DB

iu cn thit khi to sub menu l bn cn tch bit sub menu ra khi menu chnh bng th .

Tt nhin bn c th c la chn khc nh dng tip th ul .

Link

Link



Subnav Link |

Subnav Link |

Subnav Link

Link

Vi code html trn menu ca bn th hin nh sau:

Khng ging vi a s cc menu th xung (dropdown menu) khc, y submenu (menu

cp 2) c nm trn cng 1 dng.

Cc submenu c th t t tri qua phi, theo cc th dnh dng css ca bn.

nh dng cho CSS

ul#topnav {

margin: 0; padding: 0;

float: left;

width: 970px;

list-style: none;

position: relative; /*--thit lp v tr ca ul cha menu--*/

font-size: 1.2em;

background: url(topnav_stretch.gif) repeat-x;

}

ul#topnav li {

float: left;

margin: 0; padding: 0;

border-right: 1px solid #555; /*-- cc menu li --*/

}

ul#topnav li a {

padding: 10px 15px;

display: block;

color: #f0f0f0;


}

ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }

ul#topnav li span {

float: left;

padding: 15px 0;

position: absolute;

left: 0; top:35px;



display: none; /*-- mc nh menu cp 2 l n --*/

width: 970px;

background: #1376c9;

color: #fff;

/*--Bottom right rounded corner--*/

-moz-border-radius-bottomright: 5px;

-khtml-border-radius-bottomright: 5px;

-webkit-border-bottom-right-radius: 5px;

/*--Bottom left rounded corner--*/

-moz-border-radius-bottomleft: 5px;

-khtml-border-radius-bottomleft: 5px;

-webkit-border-bottom-left-radius: 5px;

}

ul#topnav li:hover span { display: block; } /*--hin th menu cp 2 khi a chut vo--*/

ul#topnav li span a { display: inline; } /*-- tt c cc menu cp 2 cng nm trn 1 dng--*/

ul#topnav li span a:hover {text-decoration: underline;}

Bn cn chn jquery vo bng cch download ri chn hoc chn trc tip t link:

Chn thm vo code java x l s kin khi di chut vo menu

$(document).ready(function() {

$("ul#topnav li").hover(function() { //s kin khi a chut vo menu

$(this).css({ background : #1376c9 url(topnav_active.gif) repeat-

x}); //Add background color and image on hovered list item

$(this).find("span").show(); //hin th menu cp 2

} , function() { //on hover out...

$(this).css({ background : none});

$(this).find("span").hide(); //n menu cp 2

});

});



Bi 15. To mt website c giao din theo mu

Website gm c 4 phn chnh l Header, Content, Sidebar v Footer c quy nh bi file

styles.css. Header lun nm trn cng, Content ngay di, Sidebar bn tay phi v Footer

di cng (khuyn khch lm thm TabMenu t trong header v v tr trn cng).

Trong phn Content c cha mt form nhp thng tin ng k thnh vin. Form ny c

kim tra khi submit bng javascript vi cc kim tra sau y:

Cc phn nhp tn, in thoi, email v cng vic hin ti phi khng c trng

Email v S in thoi phi chnh xc: email phi vit ng c php, in thoi phi l s

Hng dn:

V CSS: tm hiu cc thuc tnh sau lm

Tn thuc tnh ngha tng qut

float: left, right t v tr m nh hoc ch s xut hin trong phn t

khc

margin: top, right, bottom, left xc nh khong cch xung quanh phn t



width, height quy nh rng v cao ca mt khi

padding: top, right, bottom, left xc nh khong cch gia ng vin ca phn t vi

ni dung ca phn t

text-align: left, right, center cn l cho ch

Display quy nh hin th cho phn t

Background quy nh mt s thit lp c bn nh mu sc, v tr cho

phn t

Color quy nh mu ch

Font quy nh kiu ch

Gi s dng th chia HTML thnh cc vng khc nhau

V JavaScript:

S dng Regular Exception xc nh email v s in thoi chun (tm trn Google vi

nhng t kho gi )

Vit hm CheckForm() trong file JavaScript

function CheckForm()

{

//cc lnh;

}

Gi s dng s kin onsubmit = "return CheckForm()" t trong th form kim tra khi

form c submit, nu hm CheckForm tr v gi tr True th form c submit v ngc li.

(khuyn khch dng cc s kin khc nh onchange, onmouseover,...)

S dng i tng document trong HTML Dom nh sau:

document.tn_form.tn_i_tng.value document.getElementById(tn_i_tng).value

ly gi tr ca i tng trong form.



Bi 16. To menu ng 2 cp

Menu ng l menu c to ra bng CSS & HTML, menu ny lm vic vi CSDL, tc l

bn c th thm, xa, hay sa menu trong trang qun tr ca mnh m khng phi m code

HTML ra edit! V menu flash hay sa dng hiu ng jquery vn l menu tnh nu khng

c s tc ng vi PHP & MySQL!

u tin to 1 mu menu CSS v HTML ty mnh, y ti to ra 1 mu n gin nh

sau:

Trang ch

Gii thiu

t phng

Phng n

Phng i

Phng ba

Dch v

Tin tc

Lin h



M CSS

.content_menu ul{

padding-left:25px;

padding-right:25px;

}

.content_menu li{

line-height:35px;

border-bottom: 1px solid #dfdfdf;

}

.content_menu li a{

font-weight:bold;

color:#045992;

font-size:16px;

}

Nh vy l ta c 1 menu tnh 2 cp n gin ri! Bc tip theo ta chun b CSDL tin

hnh to menu ng. Nh cc bn bit 1 lin kt menu ca chng ta c dng:

Tn hin th

Bn to 1 trng menu gm cc thuc tnh sau:

Menu(idMenu,nameMenu,linkMenu,titleMenu,newPageMenu,isParent,parentId,order,isPu

blished)

+ idMenu: Tn nh danh menu

+ nameMenu: Tn hin th lin kt

+ linkMenu: Lin kt menu

+ titleMenu: tiu hin th

+ newPageMenu: "1" => m trang mi khi click vo menu, "0" => ngc li

+ isParent: "1" => l menu cha , "0" => l menu con

+ parentId: ID ca menu cha, nu l menu con l NULL

+ order: v tr sp xp

+ isPublished: "1" => cho php hin th "0" => ngc li

tit kim thi gian, ti to 1 mu menu bn di, cc bn vo PHPMyAdmin to database

mi xong vo tag SQL v paste on m bn di l ta c d liu c bn tin hnh

CREATE TABLE IF NOT EXISTS menu (

idMenu int(11) NOT NULL auto_increment,

nameMenu varchar(50) character set utf8 NOT NULL,

linkMenu varchar(50) character set utf8 NOT NULL,

titleMenu varchar(50) character set utf8 NOT NULL,

newPageMenu int(11) NOT NULL default 0,

isParent int(11) NOT NULL default 1,

parentId int(11) default 0,

order int(11),

isPublished int(11) NOT NULL default 1,

PRIMARY KEY (idMenu)



) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

- - Nhp d liu cho bng menu

INSERT INTO menu (idMenu, nameMenu, linkMenu, titleMenu, newPageMenu,

isParent, parentId,order, isPublished) VALUES

(1, Trang ch, index.php, Trang ch, 0, 1, 0, 1, 1),

(2, Gii thiu, index.php?page=gioithieu, Gii thiu, 0, 1, 0, 2, 1),

(3, Dch v, index.php?page=dichvu, Dch v, 0, 1, 0, 3, 1),

(4, Tin tc, index.php?page=tintuc, Tin tc, 0, 1, 0, 4, 1),

(5, Lin h, index.php?page=lienhe, Lin h, 0, 1, 0, 5, 1),

(6, Cng ti, index.php?page=gioithieu&about=congti, Cng ti, 0, 0, 2, 1, 1),

(7, Sn phm, index.php?page=gioithieu&about=sanpham, Sn phm, 0, 0, 2, 2, 1),

(8, Du lch, index.php?page=dichvu&pro=dulich, Du lch, 0, 0, 3, 1, 1),

(9, Nh hng, index.php?page=dichvu&pro=nhahang, Nh hng, 0, 0, 3, 2, 1);

By gi ta tin hnh to kt ni CSDL v lp menu ng

mysql_connect("localhost","root","") or die("Khng th kt ni!");

mysql_select_db("fusuhotel") or die ("Khng chn c db!");

mysql_query("set names utf8");

tng ca bi ton menu ng 2 cp l th ny:

+ Lp tt c menu cha (isParent == "1")

+ Mi ln lp menu cha , ta kim tra xem menu ny c menu con hay khng (parentId = =

idMenu cha)

Nh vy bc u tin ta: Lp tt c menu cha c isParent == "1" v cho php hin th



isPublished == "1"

V cu truy vn s l:

$queryParent = mysql_query("SELECT idMenu,nameMenu,linkMenu,titleMenu,newPageMe

nu FROM menu WHERE isPublished = 1 and isParent = 1 order by order ASC ");

M ngun nh sau:



?>



PHN 2. JAVASCRIPT

A. TO V X L CC TNG (LAYER)

MC TIU

Thay i thuc tnh ca mt phn t HTML khi c cc s kin chut v bn phm xy

ra.

nh ngha cc tng (Layer) trong IE v Netscape.

n, hin tng bng cc lnh JavaScript

To mt menu lin kt n cc trang khc s dng tng

TM TT L THUYT

1. Mt s s kin thng dng:

- S kin Click chut (onClick) c kch hot khi chut c click

- S kin di chuyn chut vo bn trong phn t (onMouseOver) c kch hot khi chut di

chuyn chut t ngoi vo trong phn t.

- S kin di chut ra ngoi (onMouseOut) c kch hot khi di chuyn chut t bn trong

phn t ra khi phn t.

- S kin nhn phm (onKeyUp) c kch hot khi ngi dng nhn mt phm.

2. Thay i thuc tnh ca cc phn t HTML

thay i thuc tnh ca mt phn t HTML no trong trang bng lnh JavaScript, bn

vit nh sau:

document.all..style. =

Trong :

chnh l gi tr m bn t cho thuc tnh ID, v d:

THAY I THUC TNH CA TH th

trong trng hp ny s l TieuDe.

l tn thuc tnh cn thay i. Bn c th tra trong ti liu c gio vin

pht: Danh sch cc thuc tnh. V d : text-align, font-size, color v.v

l nhng gi tr hp l cho thuc tnh cn thay i. (Bn cng tra trong ti liu

Danh sch cc thuc tnh).

* Lu : Nu bn mun thay i thuc tnh ca mt phn t th bt buc bn phi gn cho th

mt gi tr ID duy nht (Nh v d trn).

3. nh ngha tng trong IE v Netscape

a. nh ngha tng trong IE

nh ngha tng trong IE, bn ch cn t thuc tnh position cho style.

V d: Th H2 ny c t trn mt tng

Tuy nhin, vi cch nh ngha trn th mi tng ch cha c mt phn t. Nu bn mun

mt tng cha c nhiu hn mt phn t th bn nh ngha tng bng cp th hoc

nh sau:



Phn t ny nm trn tng 1

Trang ch ca bo E-Chip

Mi tng khi to ra, bn nn gn thuc tnh ID cho tng mt gi tr duy nht (Khng trng

vi ID ca bt k th no trong trang). Bn hon ton c th thc hin cc thao tc i vi

tng nh :

n tng, v d : document.all.Tang1.style.visibility = hidden

Hin tng, v d : document.all.Tang1.style.visibility = visible

Di chuyn tng sang tri 5 pixel, v d: document.all.Tang1.style.pixelLeft -= 5

Di chuyn tng sang phi 5 pixel, v d: document.all.Tang1.style.pixelLeft += 5

Di chuyn tng ln trn 5 pixel, v d: document.all.Tang1.style.pixelTop -= 5

Di chuyn tng xung di 5 pixel, v d: document.all.Tang1.style.pixelTop+=5

b. nh ngha tng trong Netscape

Trong Netscape, vic nh ngha (to ra) tng c phn d dng hn vi th LAYER :

Phn t ny nm trn tng 1

Trang cha nhiu mo vt v IT

n / hin tng c to bi th LAYER thng qua lnh JavaScript, bn vit :

document..visibility = 'hidden' ( n tng)

document..visibility = 'show' ( hin tng)

Trong : chnh l gi tr ca thuc tnh name.

*Lu : truy cp n mt tng, trong IE s dng gi tr ca thuc tnh ID, trong khi

Netscape s dng gi tr ca thuc tnh name.

V d : document.Tang1.visibility = 'hidden' n tng c tn l Tang1 to ra trn.

di chuyn tng bng JavaScript, bn vit:

document..left = (Di chuyn sang tri hoc phi)

document..top = (Di chuyn ln | xung)

Trong : m di chuyn li, gi tr dng di chuyn tin.

V d di chuyn tng ln trn thm 10 pixel

document.Tang1.top -= 10

V d di chuyn tng sang phi thm 10 pixel

document.Tang1.left += 10

V d, di chuyn tng n v tr cch mp trn ca s trnh duyt 100px, v cch mp tri 50

pixel.

document.Tang1.top = 100

document.Tang1.left = 50



BI TP P DNG

Bi 17. Minh ho s kin di chuyn chut vo phn t

Yu cu: To mt lin kt n trang http://www.w3schools.com bng th H2. C mu nn l

xanh, mu ch l trng. Khi chut di chuyn n th i mu nn thnh mu .

Hng dn: i mu nn thnh i vi th H2 (hoc th bt k) bn vit:

document.all.LienKet.style.backgroundColor = red

Trong LienKet l gi tr ca thuc tnh ID .

Cu lnh JavaScript ny t u ?

Theo nh yu cu u bi l : Khi chut di chuyn . Do vy cu lnh ny s c t

trong s kin di chuyn chut n (c tn l onMouseMove)

Minh ho:

Hiu ng di chuyn chut

Trang dy JavaScript http://www.w3schools.com

Nhc li: Cc thuc tnh trong bng tra cu danh sch thuc tnh nu c cha du gch

ni (v d : background-color) th khi vit trong JavaScript, bn phi chuyn k t ng ngay

sau du gch ni thnh ch hoa v b du gch ni i. (V d t background-color

backgroundColor)

Bi 18. Minh ho s kin di chuyn chut vo v ra khi mt phn t

Yu cu: Nh bi tp 17, v thm yu cu sau: Khi ngi dng di chuyn chut ra khi phn

t H2 th t li mu nn l mu xanh.

Hng dn: Vit lnh thay i mu nn thnh xanh trong s kin di chut ra ngoi.

Minh ho:

Hiu ng di chuyn chut Version 2




Bi 19. Minh ho to mt lin kt hon chnh n mt trang web

Yu cu: Nh bi s 18 nhng khi ngi dng click chut th m trang

http://www.w3schools.com. V chut c hnh bn tay.

Hng dn: m trang web bt k bn vit: window.open(a ch URL). Lnh m ny

c t trong s kin Click chut (V theo yu cu: khi ngi dng click chut th mi m).

Minh ho:

Hiu ng di chuyn chut Version 2


Bi 19a. To menu dc

Hy to mt menu t theo chiu dc gm 4 mc nh sau:

Gii thiu

Tin tc

Sn phm

Tr gip

Yu cu: 4 mc ny c mu nn l xanh, mu ch l vng (yellow). Khi ngi dng di chuyn

n mc no th mc c mu nn l mu . Khi di chuyn chut ra khi th mu nn tr

li mu xanh.

Khi ngi dng click vo th m ra trang tng ng l http://www.echip.com.vn,

http://www.manguon.com, http://www.w3schools.com v http://www.quantrimang.com.

Gi : Lm tng t nh bi tp mu, nhng to ra 4 th H2.

Bi 19b. To menu ngang

Hy to mt menu gm 4 mc nh trn nhng theo chiu ngang

Hng dn: Nu bn dng th H2, th mi mc s t ng c t ring trn mt dng.

c th t nhiu mc trn cng mt dng, bn c th to mt bng c mt hng v nhiu ct.



Mi mc by gi s c t trong mt th . thay i kch thc, mu nn, mu ch

v.v.. bn cng s dng STYLE:

Welcome to LAYER !

Bi 21. Minh ho vic n v hin tng bng cu lnh JavaScirpt

Yu cu: to mt dng ch Cc lin kt bng th H2, mu nn l tm (magenta), mu ch

trng (white). V to mt tng c ID = LienKet, Trong tng c mt bng gm 2 hng, 1 ct,

ni dung ca bng cha 2 lin kt (bn c th to bng th A HREF) n cc trang

http://www.vol.vnn.vn, v http://www.fateback.com, Ban u, tng ny n (visible :

Top=50

left=50

Width = 400px



hidden). Khi ngi dng dng di chuyn chut n th H2 th tng ny hin. Cn khi ngi

dng click vo mt trong 3 lin kt th tng ny n.

Hng dn: n hay hin tng bn vit:

document.all.LienKet.style.visibility = visible (hoc hidden)

Minh ho:

To tng trong IE Version 2

Cc lin kt

Trang ng k E-Mail

Website min ph



Bi 21a. To h thng menu

To mt h thng menu nh sau:

To Menu trong IE - S dng TNG v JavaScript

.MenuBar{background-color:blue; color:white; font-family:arial; font-

size:16pt;width:150px; cursor:hand}

.Menu { background-color: yellow; color: white; position: absolute; top : 40; visibility :

hidden}

function AnCacMenu() // Hm n cc Menu c tc dng lm n cc tng mi khi

c gi

{

document.all.Menu1.style.visibility = 'hidden';



}

Trang ng k E-Mail



ng k Website min ph

Trang dy JavaScript

Trang IT Ting vit

i hc Bch khoa H Ni

i hc cn th

i hc Quc gia

Cc lin kt

Tin tc

Cc hot ng

B. NI DUNG NG V NH V NG

MC TIU

- Thay i ni dung ca cc th trong trang web thng qua JavaScript

- S dng JavaScript di chuyn cc tng

- Vn dng kh nng nh v ng v ni dung ng vo thit k web

TM TT L THUYT

1. Ni dung ng: l kh nng cho php thay i ni dung ca trang web bng cc lnh

Script.

thay i ni dung ca mt phn t no trong IE, chng ta c th thay i mt trong 4

thuc tnh ca n :



innerText

innerHTML

outerText

outerHTML

C php dng thay i gi tr ca cc thuc tnh nh sau:

document.all.. =

Trong



Bi 23. Minh ho thay i thuc tnh innerHTML

Yu cu: To mt dng ch "Click here". Khi ngi dng click chut vo th dng ch

bin thnh nt c nhn l "Having fun"

Hng dn:

Bn c th s dng bt k th no hin th dng ch "Click here"

Trong s kin click chut (onMouseMove) bn vit lnh thay ni dung trong th bng ni

dung mi (Ni dung ny l th to nt).

Minh ho:

Click here

Bi 24. Minh ho thay th thuc tnh outerText

Yu cu: To mt nt c nhn l "Open". Khi ngi dng click vo nt ny th m trang

http://www.echip.com.vn, trong mt ca s mi v dng nt s thay bng dng ch "Trang

ny m".

Hng dn:

m mt trang web trong mt ca s mi, bn vit: window.open("a ch URL ca trang

cn m", "_Blank")

Thay th nt bng mt dng ch thng qua thay i thuc tnh outerText ca nt.

Minh ho:

function ThayDoi()

{

window.open("http://www.echip.com.vn","_blank");

document.all.Nut1.outerText='"Trang ny thm";

}



Bi 25. Minh ho thay i thuc tnh outerHTML

Yu cu: To mt dng ch "Click here" c mu xanh, kch c H1. Khi ngi dng click vo

dng ch ny th thay bng mt lin kt n trang http://www.vn.vn

Hng dn: Do y khi ngi dng click vo dng ch th thay th bng mt lin kt nn

thuc tnh cn thay i s l outerHTML. Cu lnh thay i s c t trong s kin Click

chut.

Minh ho:

function ChenLienKet()

{

document.all.LienKet.outerHTML='Trang

Aptech' ;

}

Click Here

Bi 26. Minh ha vic nh v ng trong IE

Yu cu: To mt nt c nhn l "Sign Up". Khi chut di chuyn trong nt ny th hin th

dng nhc l "ng k hm th mi" c mu nn l vng ti v tr ca con chut. Khi chut di

chuyn ra ngoi th dng nhc n i.

Hng dn: Bn to ra mt tng cha dng ch "ng k hm th mi" c mu nn l vng.

Khi chut di chuyn n (onMouseMove) th t thuc tnh visibility l 'visible' cho hin

tng v khi di chuyn chut ra ngoi (onMouseOut) th t li thuc tnh visibility l

'hidden' n tng. Lu , v tr ca chut c lu trong thuc tnh event.clientX v

event.clientY. Bn s gn v tr ny ca chut cho 2 thuc tnh pixelLeft v pixelTop nh

v tng.

Minh ho:

function HienThi()

{

document.all.Tang1.style.pixelLeft = event.clientX;

document.all.Tang1.style.pixelTop = event.clientY;

document.all.Tang1.style.visibility = 'visible';



}

function AnTang() // n Tng Tang1

{

document.all.Tang1.style.visibility = 'hidden';

}

ng k hm th mi

Kt qu khi chut di chuyn vo trong nt

Bi 27. Minh ho ni dung trong Netscape

Yu cu: To mt tng c tn l Tang1, mt nt nhn c nhn l "Np trang Web" v mt hp

text c tn l DiaChi. Khi ngi dng nhp a ch vo trong hp text v nhn nt "Np trang

web" th ni dung ca trang s c np vo tng Tang1.

Hng dn:

- Dng th LAYER to tng v t tn cho n l Tang1

- Vit trong s kin onCLick ca nt "Np trang web" cu lnh np ti liu vo tng. C php

np ti liu vo mt tng trong Netscape nh sau:

document..src = "a ch trang cn np"

Trong trng hp ny s l :

document.Tang1.src = document.form1.DiaChi.value

Minh ho:

Hin th tooltip



Tng ny dng hin th trang Web bn g trong hpText !

BI TP TNG HP PHN 2B

Bi s 1:

To mt tng c cha dng ch "Hello", kch thc H1. v mt nt nhn c nhn l "Thay

i". Khi ngi dng click vo nt ny th yu cu ngi dng nhp vo mt xu, sau thay

ni dung trong th H1 bng xu nhp vo ny (Theo 4 cch: thay thuc tnh innerText,

innerHTML, outerText, outerHTML).

Bi s 2:

To mt th H1, mu ch xanh dng hin th thi gian ca h thng (gm gi:pht:giy).

Gi : Vit hm CapNhat ly gi:pht:Giy trong my tnh sau gn cho thuc tnh

innerText ca th H1. S dng hm setInterval("CapNhat();", 1000) lin tc cp nht thi

gian theo tng giy.

Bi s 3: To 2 tng trong IE, mi tng cha mt bc nh. Tng th nht chy t tri sang

phi mn hnh, tng th hai chy t trn xung di mn hnh.

Gi : S dng 2 hm setInterval gi 2 hm di chuyn 2 tng.

Bi s 4: To mt tng cha 3 lin kt. Chut click ti v tr no th tng s c t ti v tr

. Gi : Vit lnh trong s kin onClick ca th BODY.

Bi s 5: To mt form ng k E-Mail tng t nh ca Yahoo (Bn ch cn to mt s

phn t, khng cn to ht). Mi khi ngi dng di chuyn chut n mt phn t no th

hin th mt li ch thch bng Ting vit. (Xem Bi s 5)

Bi s 6: To 3 tng (Trong Netscape), mi tng np mt trang tng ng nh sau:

http://www.vnn.vn, http://www.echip.com.vn v http://www.manguon.com.

Bi s 7: To mt tng cha mt bc nh, mt nt c nhn l "Di chuyn". Khi ngi dng

click vo nt ny th bc nh s di chuyn cho t gc trn bn phi xung gc di bn tri

ca mn hnh. Gi : Tng dn pixelTop, gim pixelLeft.

Bi s 8: Hy lm ht cc bi tp trong sch gio khoa ca cun gio trnh HTML, DHTML

& JavaScript.



C. KIM TRA TNH HP L CA D LIU

Bi 29. Kim tra d liu nhp vo form

Thit form nhp d liu nh hnh di y:

Hng dn:



Bi 30. Kim tra ng k hc tn ch

Xt mt trang web cha form nhp d liu cho php ng k tn ch c trnh by nh hnh

minh ha di :

1) Hy thit k trang web

2) Xy dng m ngun ca hm kt() khi ckick vo checkbox s :

- Cp nht tng s tn ch chn

- Kim tra s trng hc phn, trng tit

- Nu tha mn c 3 iu kin : tng tn ch >=12, khng trng mn, trng gi th cho php

submit d liu

Lu : + m ngun hm kt() ph thuc v tng thit k ca bn!

+

Bi 31. Kim tra ni dung n t hng

Xt mt trang web cha form nhp d liu trong lnh vc thng mi in t nh hnh minh

ha di :



1) Hy thit k trang web

2) Xy dng m ngun ca hm kt() khi thay i d liu trong textbox (s kin onChange)

- Cp nht tng s tin trong n hng

- S lng ch c nm trong gii hn [1,10], nu tha mn th cho submit d liu (nt lnh

ng )

Lu : + m ngun hm kt() ph thuc v tng thit k ca bn!

+



PHN 3. PHP

Bi 32. Thay i mu cho dng ca bng

a. Cc dng l ca table c mu v dng chn c mu vng

Hng dn:



Gii thch: ch th , ly s dng cng s ct nu l l th cho mu , chn th cho mu

vng.

Bi 33. To web site trc nghim trc tuyn dng tr li ng sai

Cc cu hi v p n c son sn v lu trong code (ko lu ra bn ngoi CSDL hay file)

theo th t tng ng, mi ln chy s random (ly ngu nhin) 1 cu hi, ngi dng tr li,

chng trnh s a ra p n ng.

Gi : To 2 mng, 1 mng lu cu hi dng nh sau :

V 1 mng lu cu tr li c key tng ng vi cu hi



q_ip: Xc nh ip ca ngi post cu hi.

4. Bng Choice, xc nh cc phng n tng ng vi cu hi trong bng Question:

c_id: int, auto increment, xc nh id ca phng n tr li

q_id: int, xc nh ID ca cu hi (tng ng trong bng Question)

c_title: varchar (255), xc nh tiu ca phng n tr li

value: int, = 0 nu nh phng n tr li xc nh l sai, = 1 nu phng n tr li ng.

V d, c mt cu hi nh sau:

Ai l admin ca phpvn.org?

a. xxx

b. hung5s

c. cmxq

d. qmxc

ID_MEMBER ca ti l 3, cu hi ny thuc level 3, khi d liu lu trong bng nh sau:

Bng Questions

q_id q_level q_title user_id date_post q_ip

100 3 "Ai l admin ca phpvn.org?" 3 12312321312312 "127.0.0.1"

Bng Choice nh sau:

c_id q_id c_title value

200 100 "xxx" 0

201 100 hung5s 0

202 100 cmxq 1

203 100 qmxc 0

Yu cu: Lp trnh xy dng form nhp cu hi trc nghim, ch cho php cc member c

ID_GROUP



Bc 3: Thit lp thuc tnh action ca form tr n file ketqua.php, trong file ny sau khi

nhn c d liu gi ln th:

Hin th thng bo:" nhn c d liu t my c a ch IP l . Cc

thng tin gi ln bao gm:", trong , l tn min m trnh duyt s dng

gi d liu ln, l a ch IP m my khch ang s dng.

Hin th tt c cc thng tin do ngi dng gi ln. Ch lc b tt c cc th HTML

Nu nh hai mt khu m NSD nhp khc nhau th phi thng bo li.

Nu tn truy cp c cha du cch th thng bo li tn truy cp khng c cha du cch.

Nu nh c li th phi hin th lin kt quay tr v trang trc nhp li d liu.

Bc 4 (nng cao): Nng cp file form.php, tch hp trnh son tho FCK Editor vo chng

trnh thay cho Textarea.

Bc 5 (nng cao): Nng cp h thng, b sung tnh nng hin th capchar chng flood.

Gi m ngun xem IP:

$res = 'IP Address: ' . $_SERVER['REMOTE_ADDR'];

echo $res;

Bi 37. Cc thao tc x l d liu c bn (hin th, thm, sa, xa)

Cho CSDL Hoso, c cc bng d liu Sach v Tacgia nh sau:

- Bng Sach:

- Bng Tacgia:

Thit k trang Hienthi.php c giao din nh hnh di y (ch : nu quyn sch no

c nm xut bn >= 2010 th dng tng ng c mu blue):



Khi nhn nt Them moi s gi n trang Them.php cho php nhp mi mt quyn sch,

c giao din nh sau:

Lu : Mc Tac gia c thng tin t bng Tacgia v hin th di dng Drop down box.

Khi nhn biu tng xa s cho php xa bn ghi tng ng. Trc khi xa hin

hp thoi xc nhn

Khi nhn biu tng sa s cho php sa bn ghi tng ng. Giao din trang sa

nh sau (mc m sch l ch c):



HNG DN

File Hienthi.php



if(isset($_POST['cmdthem'])){

header("location:them.php");

}

if(isset($_REQUEST['idxoa'])){

$conn=mysql_connect("localhost","root","root") or die("Khong ket noi duoc toi server");

$db=mysql_selectdb("hoso",$conn) or die("Khong ket noi duoc toi CSDL");

$sql="delete from sach where idsach='".$_REQUEST['idxoa']."'";

$result=mysql_query($sql) or die("Loi truy van");

mysql_close($conn);

header("location:hienthi.php");

}

?>

File Them.php

Ma sach

Ten sach

Tac gia

Nha xuat ban

Nam XB

Gia ban



File Xuly_them.php



Nha xuat ban



Bi 38. K thut hin th phn trang

Cho CSDL Hoso, c bng d liu Sanpham nh sau:

Yu cu: thit k trang web hin th danh sch cc sn phm c trong bng ch phn

trang.



Page of

TTMa SPTen SPHang SXDon giaMo

ta



echo("Next");

}else{

echo("Next");

}

?>

Bi 39. To trang ng k, ng nhp, ng xut, qun l bng PHP

&MySQL

1. To kt ni database: To file "mysql.php" c code nh sau:

Ch : phi thay i thng tin 3 bin $db_name, $db_username, $db_password cho ph hp

vi thng tin database ca bn.

2. To table "members" dng d cha thng tin thnh vin: Sau bn to file

"khoitao.php" c code nh sau:

Khoi tao CSDL (Huong Dan tao trang dang ki/Dang Nhap)



èmail` ,

ÙRLS` ,

`Name` ,

`Birthday` ,

àdmin`

)

VALUES (

NULL , 'admin', MD5( 'admin' ) , '[email protected]', 'http://sinhvienit.net', 'V Thanh La

i', '29/09/1990', '1'

);

");

if ($create)

print "Table \"members\" c to.";

else

print "Table \"members\" cha c to do li truy vn SQL.";

if ($add_admin)

print "TK Admin:User: adminPass:admin";

else

print "Ko th to ti khon admin v li SQL.";

echo 'Click vo y xem Demo';

?>

Tip tc chy file "khoitao.php" ny tin hnh to table "members" v tk admin, sau khi

to xong th xa file ny i. Bn cng c th s dng phpMyAdmin to table ny.

3. To trang ng k:

To file "register.php" c code nh sau:

Dang ky thanh vien (Huong dan xay dung trang Dang ky/dang Nhap)



$password = md5( addslashes( $_POST['password'] ) );

$verify_password = md5( addslashes( $_POST['verify_password'] ) );

$email = addslashes( $_POST['email'] );

$ten = addslashes( $_POST['name'] );

$sinhnhat = addslashes( $_POST['sn'] );

$url = addslashes( $_POST['url'] );

// Kim tra 7 thng tin, nu c bt k thng tin cha in th s bo li

if ( ! $username || ! $_POST['password'] || ! $_POST['verify_password'] || ! $email || ! $ten ||

! $sinhnhat || ! $ten)

{

print "Xin vui lng nhp y cc thng tin. Nhp vo y quay tr li";

exit;

}

// Kim tra username nay co nguoi dung chua

if ( mysql_num_rows(mysql_query("SELECT username FROM members WHERE userna

me='$username'"))>0)

{

print "Username ny c ngi dng, Bn vui lng chn username khc. Nhp vo y quay tr li";

exit;

}

// Kim tra email nay co hop le ko

if (!check_email($email))

{

print "Email ny ko hp l. Nhp vo y quay tr li";

exit;

}

if (!ereg("^[0-9]+/[0-9]+/[0-9]{2,4}",$sinhnhat))

{

print "Ngy thng nm sinh ko hp l. Nhp vo y quay tr li";

exit;

}

// Kim tra email nay co nguoi dung chua

if ( mysql_num_rows(mysql_query("SELECT email FROM members WHERE email='$em

ail'"))>0)

{

print "Email ny c ngi dng, Bn vui lng chn Email khc. Nhp vo y quay tr li";

exit;

}

// Kim tra mt khu, bt buc mt khu nhp lc u v mt khu lc sau phi trng nhau



if ( $password != $verify_password )

{

print "Mt khu khng ging nhau, bn hy nhp li mt khu. Nhp vo y quay tr li";

exit;

}

// Tin hnh to ti khon

@$a=mysql_query("INSERT INTO members (username, password, email,URLS,Name,Bi

rthday) VALUES ('{$username}', '{$password}', '{$email}', '{$url}', '{$ten}', '{$sinhnhat}')"

);

// Thng bo hon tt vic to ti khon

if ($a)

print "Ti khon {$username} c to. Nhp vo y ng n

hp";

else

print "C li trong qu trnh ng k, Vui lng lin h BQT";

}

else

{

// Form ng k

print



Tn:

Sinh nht (Ngy/Thng/Nm):

SinhVinIT.Net

EOF;

}

?>

4. To trang ng nhp:

To file "login.php" c code nh sau:



{

print "Nhp sai mt khu. Nhp vo y quay tr li";

exit;

}

// Khi ng phin lm vic (session)

$_SESSION['user_id'] = $member['id'];

$_SESSION['user_admin'] = $member['admin'];

// Thng bo ng nhp thnh cng

print "Bn ng nhp vi ti khon {$member['username']} thnh cng. Nhp vo y vo trang ch";

}

else

{

// Form ng nhp

print



if ($member['admin']=="1") echo "Trang qun tr";

echo "Thot ra";

}

?>

6. To trang admin:

To file "admin.php" vi code nh sau:



a>';

?>

8. To trang sa thng tin c nhn:

To file "suathongtin.php" vi code nh sau:



if ($_POST['pass']!="") {

$sqlx="UPDATE `members` SET `password` = '".$pass."' WHERE `id` = '$user_id' L

IMIT 1 ;";

$suapass=mysql_query($sqlx);

if ($suapass)

echo "( i pass) ";

else

echo "(Cha i pass) ";

}

}

else

echo"

Tn:

URL:

Sinh Nht:

Email:

Pass:

";

}

?>



Bi 40. Thit k gi hng online

u tin chng ta to 1 CSDL mu:

To 1 bng books

CREATE TABLE `books` (

`id` int(10) unsigned NOT NULL auto_increment,

`title` varchar(255) NOT NULL,

`author` varchar(100) NOT NULL,



`price` int(30) NOT NULL,

PRIMARY KEY (`id`)

);

Thm cc trng d liu mu vo bng

INSERT INTO `books` VALUES (1, 'PHP Can Ban', 'Kenny', 115);

INSERT INTO `books` VALUES (2, 'PHP Nang Cao', 'Kenny', 150);

INSERT INTO `books` VALUES (3, 'PHP Framework', 'Kenny', 300);

INSERT INTO `books` VALUES (4, 'Joomla Can Ban', 'Kenny', 100);

Sau chng ta thit k 1 giao din n gin vi mu CSS sau:

style.css

body{

font:12px verdana;

}

.pro{

border:1px solid #999999;

margin:5px;

padding:5px;

width:400px;

}

a{

color:#666666;

text-decoration:none;

font-weight:900;

}

#cart{

border:1px solid #999999;

margin:5px;

padding:5px;

width:400px;

text-align:center;

}

Sau khi hon tt vic chun b c s d liu v giao din, tip theo ta s xy dng trang

hin th cc mn hng trn website, cho php ngi s dng la chn sch khi truy cp.

lit k danh sch cc quyn sch ang c trong database, ta cn kt ni CSDL vi thao tc

code nh sau:

To 1 file mi l: index.php hin th tt c cc sn phm

u tin ta kt ni CSDL lm vic: CSDL tn l shopcart



Sau hin th tt c thng tin v sn phm

on code trn thc thi vic hin th sch nu trong CSDL t nht 1 record. V chng s lit

k tiu sch, tc gi, gi tin. y, ti s dng number_format() ly ra 3 s 000 cui,

ng vi n v tin t ca Vit Nam l VN.

Sau cng ti to mt lin kt cho php thm quyn sch vo gi hng nu ngi mua cm

thy ng . (addcart.php s l trang thm vo gi hng vi tham s l m ca quyn sch).

Ni n ng dng shopping cart th hin nay, trn th trng tn ti nhiu phng php code.

C th s dng chui lu gi hng, cng c th lu vo CSDL nhp gi hng ca ngi

dng v cng c th s dng mng v session lu thng tin gi hng. Trong khun kh bi

vit ny, ti s s dng session v mng lu thng tin gi hng.

Ti trang addcart.php ti cn khi to mt session v lu m quyn sch vo mt mng. C

th l: $_SESSION[giohang'][$id]. Vi $id l m quyn sch m ngi dng chn trang

xem hng ha (index.php). Mc ch chnh ca trang addcart ny l lu tr hoc tnh ton li

s lng sn phm khi m h la chn. (lu l s lng cc mn hng).

Mt vn t ra trong trang ny, l lm th no nhn bit mn hng ngi chn

hay cha. Chng hn. Ln u ti chn mua quyn A, sau ti quay li chn mua tip quyn

A. vy trong gi hng phi ghi nhn s lng quyn A ny l 2. Ch khng th ch lu l 1

c.

Vy, lc ny ta s kim tra xem. Quyn sch m ta va chn c tn ti trong gi hng hay

cha. Nu c, ta phi tin hng ly s lng ang c tng ln 1 n v. Cn nu khng, ta

phi gn s lng ca chng l 1.

Code x l hon chnh trang addcart ny nh sau:



$tongcong =0;

foreach($giohang as $id_sp => $sl)

{

// truy van lay thong tin san pham

$truyvan_gh = mysql_query("SELECT id,title,author,price FROM books WH

ERE id in ('$id_sp')");

$r = mysql_fetch_row($truyvan_gh);

?>

Ten sach:

Tac gia:

Gia: USD

So luong:



}

?>

V trang xa sn phm delcart.php

Documents

Giao Trinh Bai Tap Lap Trinh Mang