-
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
-
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
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
-
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
PHN 1. HTML CSS
Bi 1. Vit m HTML thit k giao din trang web ng k thng tin c
nhn
-
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
Bi 2. Vit m HTML thit k giao din trang web ngg k thng tin c
nhn
-
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
Bi 3. Vit m HTML thit k giao din trang web tm kim thng tin
-
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
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;
}
-
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
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 . . . . .
-
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
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;
border: 1px solid #EBDDBC;
background-color: #F1EFD8;
}
.tablelist td {
margin: 0;
padding: 4px;
border: 1px solid #EBDDBC;
}
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
-
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
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;
-
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
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{
-
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
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?
-
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
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:
-
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
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;
}
-
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
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
-
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
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
-
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
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{
text-decoration: none;
font-weight:normal;
display: block;
color: #FF0033;
padding: 5px;
}
div#mainNav ul li a:hover, div#mainNav ul li span:hover{
-
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
text-decoration: none;
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;
text-decoration: none;
}
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
-
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
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;
text-decoration: none;
}
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;
-
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
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
});
});
-
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
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
-
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
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.
-
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
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
-
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
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)
-
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
) 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
-
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
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:
-
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
?>
-
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
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:
-
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
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
-
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
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
-
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
Trang dy JavaScript http://www.w3schools.com
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
Trang dy JavaScript http://www.w3schools.com
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.
-
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
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
-
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
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
-
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
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';
document.all.Menu2.style.visibility = 'hidden';
document.all.Menu3.style.visibility = 'hidden';
}
Trang ng k E-Mail
-
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
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 :
-
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
innerText
innerHTML
outerText
outerHTML
C php dng thay i gi tr ca cc thuc tnh nh sau:
document.all.. =
Trong
-
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
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";
}
-
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
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';
-
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
}
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
-
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
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.
-
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
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:
-
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
-
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
-
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
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 :
-
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
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!
+
-
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
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:
-
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
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
-
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
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
-
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
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):
-
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
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):
-
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
HNG DN
File Hienthi.php
-
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
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
-
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
File Xuly_them.php
-
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
Nha xuat ban
-
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
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.
-
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
Page of
TTMa SPTen SPHang SXDon giaMo
ta
-
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
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)
-
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
`email` ,
`URLS` ,
`Name` ,
`Birthday` ,
`admin`
)
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)
-
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
$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
-
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
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
-
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
Tn:
Sinh nht (Ngy/Thng/Nm):
SinhVinIT.Net
EOF;
}
?>
4. To trang ng nhp:
To file "login.php" c code nh sau:
-
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
{
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
-
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
if ($member['admin']=="1") echo "Trang qun tr";
echo "Thot ra";
}
?>
6. To trang admin:
To file "admin.php" vi code nh sau:
-
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
a>';
?>
8. To trang sa thng tin c nhn:
To file "suathongtin.php" vi code nh sau:
-
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
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:
";
}
?>
-
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
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,
-
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
`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
-
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
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:
-
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
-
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
-
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
$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:
-
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
}
?>
V trang xa sn phm delcart.php