Giáo trình Hướng dẫn thiết kế Web PHP và MySQL (Phần 1)

Các khái niệm về cơ sở dữ liệu

1. Dữ liệu

Là các thông tin cần lưu trữ để sử dụng lại

1. Cơ sở dữ liệu (database)

Là các dữ liệu được lưu trữ có tổ chức

2. Hệ quản trị cơ sở dữ liệu:

Là các chương trình giúp quản lý và tổ chức cơ sở dữ liệu. Ví dụ: MySQL, MSSQL,

3. Table:

Mỗi database chứa nhiều table. Mỗi table là 1 bảng dữ liệu, chứa một mảng thông tin nào đó.

Mỗi table có 1 tên, gồm nhiều cột nhiều hàng.

Mỗi dòng của table là 1 đơn vị dữ liệu cần lưu trữ, ví dụ như 1 tin, 1 câu hỏi bình chọn, 1 user.

Mổi dòng gọi là 1 record hay mẫu tin.

Mỗi cột của table gọi là 1 field hay trường. Dữ liệu trong 1 cột thuộc 1 kiểu xác định nào đó.

4. Khoá chính

Là cột đặc biệt trong table, chứa thông tin để phân biệt từng record với nhau trong table.

Khoá chính có thể gồm nhiều field nhưng thường là 1 field.

Field làm khoá chínnh nên có kiểu số, tăng tự động.

5. Khoá ngoại

Là cột trong 1 table mà dữ liệu trong nó là tham khảo đến khoá chính ở bảng khác. Trong 1

table có thể có nhiều khoá ngoại, mỗi khoá ngoại.

6. Quan hệ giữa hai bảng

Hai bảng có quan hệ với nhau khi dữ liệu trong chúng là bổ sung cho nhau. Có ba loại quan hệ

thường gặp:

Quan hệ 1-1: 1 record bên bảng A có quan hệ với 1 record bên bảng B và ngược lại.

Quan hệ 1-nhiều: 1 record bên bảng A có quan hệ với nhiều record bên bảng B.

Quan hệ nhiều-nhiều:1 record ở bảng A có quan hệ với nhiều record bên bảng B & ngược lại.

Download

Trang 1

Trang 2

Trang 3

Trang 4

Trang 5

Trang 6

Trang 7

Trang 8

Trang 9

Trang 10

Tải về để xem bản đầy đủ

148 trang duykhanh 2980

Download

Bạn đang xem 10 trang mẫu của tài liệu "Giáo trình Hướng dẫn thiết kế Web PHP và MySQL (Phần 1)", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

Tóm tắt nội dung tài liệu: Giáo trình Hướng dẫn thiết kế Web PHP và MySQL (Phần 1)

px; background-color:#999933; float:left}
 #info{ float:left; width:485px; height:30px; background-color:#996600; 
 margin-left:5px; margin-bottom:3px;}
 #info #info_1{ float:left; color:#00FFCC; width:300px;padding-left:10px; padding-
 top:5px; }
 #info #info_2{ float:left; width:80px; }
 #info #info_3{ color:#CCFF33; text-align:right; padding-top:5px; }
 #content2 {height:307px; width:280px; background-color:#99CC66; float:left; 
 margin-left:5px;}
 #content3{ background-color:#003366; min-height:1000px; float:right; 
 width:200px; }
 #quangcao{ height:90px; width:785px; background-color:#990000; clear:left; 
 margin-top:3px; float:left; margin-bottom:3px}
 #content4 {background-color: #999966; float: left; min-height: 600px;width: 
 785px;}
 #footer { background-color:#996633;clear: both;height: 150px;}
 165. Tạo trang chủ website 
Save as trang layout (home.html) thành trang home.php, khởi tạo session, class, biến lang:
 <?php session_start();
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 128
 require_once "classTin.php";
 $t = new tin;
 $lang='vi';
?>
NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 129
TIN NỔI BẬT & TIN XEM NHIỀU
I. Tạo file noibat_xemnhieu.php
 1. Code html
 Tin nổi bật
 Tin xem nhiều
 166. Định dạng css
 #nb_xn #tabs a{ color:#CCFF33; text-decoration:none; float:right;
 background-color:#006699; width:100px; display:block; margin-
 left:2px;
 padding-top:3px; padding-bottom:3px; text-align:center}
 #nb_xn #tabs a:hover{ color:#003366;}
 167. Code jquery
 $("#txn").click(function(){
 $("#contenttab").load("tinxemnhieu.php"); return false;
 })
 $("#tnb").click(function(){
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 130
 $("#contenttab").load("tinnoibat.php"); return false;
 })
 $("#content1").corner("5px");
 $("#tabs a").corner("5px");
 $("#tinnoibat #top3 div").corner("5px");
 168. Include file noibat_xemnhieu.php vào trang chủ, trong content1
XLV. Tin xem nhiều
 1. Định nghĩa hàm TinXemNhieu
 function TinXemNhieu($lang = 'vi', $sotin = 10){
 $sql="SELECT idTin, TieuDe, TomTat, urlHinh, Ngay, SoLanXem
 FROM tin WHERE AnHien = 1 and ( lang = '$lang' or '$lang' = '' ) 
 ORDER BY SoLanXem DESC LIMIT 0,$sotin";
 $kq = mysql_query($sql) or die (mysql_error());
 return $kq;
 }
 169. Tạo file tinxemnhieu.php
 <?php 
 require_once "classTin.php";
 if (isset($t)==false) $t = new tin;
 $tinxemnhieu = $t -> TinXemNhieu($lang,10); 
 ?>
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 131
 (Xem: - <?=date('d/m/
 Y',strtotime($row_txn['Ngay']));?>) 
 170. Định dạng CSS
 #tinxemnhieu { width:500px} 
 #tinxemnhieu p{ margin-top:0px; margin-bottom:10px; background-
 image:url(hinh/icons/foward.gif); background-repeat:no-repeat; padding-
 left:20px; background-position: 2px 3px;}
 #tinxemnhieu a{ color:#66FFFF; text-decoration:none}
 #tinxemnhieu a:hover{ color:#003399; }
 #tinxemnhieu span{ font-style:italic; color:#99CC00; font-size:12px}
XLVI. Tin nổi bật
 1. Định nghĩa hàm TinNoiBat
 function TinNoiBat($lang ='vi', $sotin = 10){
 $sql="SELECT idTin, TieuDe, TomTat, urlHinh, Ngay, SoLanXem FROM tin 
 WHERE AnHien = 1 AND TinNoiBat=1 AND ( lang ='{$lang}' or '{$lang}'='' 
 )
 ORDER BY idTin DESC LIMIT 0,$sotin";
 $kq = mysql_query($sql) or die(mysql_error());
 return $kq;
 }
 171. Tạo file tinnoibat.php
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 132
 <?php require_once "classTin.php";
 if (isset($t)==false) $t = new tin;
 $tinnoibat = $t->TinNoiBat($lang,4);
 $row_tinnoibat = mysql_fetch_assoc($tinnoibat);
 ?>
 "/
 >
 " width="140" height="90" />
172. Định dạng CSS
 #tinnoibat { width:500px}
 #tinnoibat #top1 p{ margin:0}
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 133
#tinnoibat #top1 a{ color:#006699; font-size:18px; text-decoration:none}
#tinnoibat #top1 { text-align:justify; color:#000033}
#tinnoibat #top3 { margin-top:5px} 
#tinnoibat #top3 div { float:left; width:32%; text-align:center; border:dotted 
1px #CCFF00; height:150px; overflow:hidden; padding-top:5px; margin-left:3px;}
#tinnoibat #top3 a{ text-decoration:none; color:#006699}
NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 134
TIN MỚI TRONG TỪNG THỂ LOẠI
I. Định nghĩa hàm TinMoiTrongTheLoai
 function TinMoiTrongTheLoai($idTL,$startRow, $count){
 $sql="SELECT idTin, TieuDe,TomTat,urlHinh 
 FROM tin WHERE AnHien =1 AND idTL = $idTL 
 ORDER BY idTin DESC LIMIT $startRow , $count";
 $kq = mysql_query($sql) or die (mysql_error());
 return $kq; }
XLVII. Tạo file tinmoi.php
 <?php require_once "classTin.php"; if (isset($t)==false) $t = new tin;
 $theloai= $t -> TheLoai($lang, 1);?>
 <?php $idTL = $row_theloai['idTL'];
 $tinmoinhat = $t ->TinMoiTrongTheLoai($idTL, 0,1);
 $row = mysql_fetch_assoc($tinmoinhat);
 ?>
 " width="70" height="70" 
 align="left" />
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 135
 TinMoiTrongTheLoai($idTL, 1,3);?>
XLVIII. Định dạng CSS
 #tinmoi{ width:785px; background-color:#669999; }
 #tinmoi .rows { width:385px; float:left; margin-bottom:5px; 
 margin-left:5px; margin-top:5px; }
 #tinmoi #theloai{ background-color:#333333; color:#FFF; 
 padding-top:5px; padding-bottom:5px }
 #tinmoi #tinmoinhat {color:#399;background-
 color:#033;height:150px;overflow:hidden}
 #tinmoi #tinmoinhat p{ text-align:justify; 
 margin-right:5px; margin-left:5px; margin-bottom:0px}
 #tinmoi #tinmoinhat img { margin-right:5px}
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 136
 #tinmoi #tinmoinhat a {text-decoration:none; color:#FFFF00;font-weight:bold} 
 #tinmoi #tinmoinhat a:hover{ text-decoration:underline; color:#C09}
 #tinmoi #tinmoitieptheo { background-color:#CCCC99 }
 #tinmoi #tinmoitieptheo p { margin-top:0px; margin-bottom:0px; 
 padding-left:20px; padding-top:5px; padding-bottom:5px; 
 background-image:url(icons/foward.gif); 
 background-repeat:no-repeat; background-position: 0px 8px;}
 #tinmoi #tinmoitieptheo a{ text-decoration:none; color:#036}
 #tinmoi #tinmoitieptheo a:hover{text-decoration:underline; color:#C09}
XLIX. Nhúng vào trang chủ 
 Nhúng tinmoi.php vào div có tên content4
L. Bổ sung
 Code jquery để giãn độ rộng của thể loại cuối (nếu số thể loại là số lẻ)
 var sotheloai= $(".rows").length;
 if (sotheloai%2==1) $('.rows:last').css('width','775px');
 $('#tinmoi').corner("5px"); $('.rows #theloai').corner('5px top');
 $('.rows #tinmoitieptheo').corner('5px bottom');
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 137
BÌNH CHỌN
I. Định nghĩa các hàm
 function LayBinhChonNgauNhien(){
 $sql="SELECT idBC, MoTa FROM binhchon ORDER BY rand() LIMIT 0,1";
 $kq = mysql_query($sql) or die (mysql_error());
 return $kq; }
 function CacPhuongAnTrongCauHoi($idBC){
 settype($idBC,"int");
 $sql = "SELECT idPA, MoTa,SoLanChon FROM phuongan WHERE idBC=$idBC";
 $kq = mysql_query($sql) or die (mysql_error());
 return $kq; }
 function CapNhatSoLanChonPA($idPA){
 settype($idPA,"int");
 $sql="UPDATE phuongan SET SoLanChon=SoLanChon+1 where idPA=$idPA";
 mysql_query($sql) or die (mysql_error()); }
 function TongSoLanChon($idBC){
 $sql="SELECT sum(SoLanChon) FROM phuongan WHERE idBC=$idBC";
 $kq = mysql_query($sql) or die (mysql_error());
 $row_kq = mysql_fetch_row($kq);
 return $row_kq[0]; }
 function LayCauHoi($idBC){
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 138
 $sql="SELECT idBC, MoTa FROM binhchon WHERE idBC=$idBC";
 $kq = mysql_query($sql) or die (mysql_error());
 return $kq; }
LI. Tạo form hiện câu hỏi và phương án 
 1. Tạo file formbinhchon.php & code
 <?php require_once "classtin.php"; $t = new tin;
 $bc = $t->LayBinhChonNgauNhien(); $row_bc = mysql_fetch_assoc($bc);
 $idBC = $row_bc['idBC']; $phuongan = $t -> CacPhuongAnTrongCauHoi($idBC);
 ?>
 BÌNH CHỌN
 > 
 " />
 </
 p>
 173. Định dạng CSS
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 139
 174. Viết code jquery gọi trang xử lý 
 $("#btnbinhchon").click(function(){
 var idBC=$("#idBC").val();
 var idPA=-1; 
 $("[name='idPA']").each(function(){if (this.checked==true)idPA=this.value }
 );
 if (idPA==-1) { alert("Bạn chưa chọn phương án nào"); return}
 var data = "idBC=" + idBC + "&idPA=" + idPA; //alert(data);
 $("#divbinhchon").load("ketquabinhchon.php",data).hide().slideDown();
 });
 175. Đưa form vào trang chủ, trong content3 và xem thử
LII. Tạo trang hiện kết quả bình chọn
 1. Tạo file ketquabinhchon.php
 require_once "classtin.php";
 $t = new tin;
 $idBC=$_GET['idBC']; settype($idBC,"int");
 $idPA=$_GET['idPA']; settype($idPA,"int");
 $bc= $t->LayCauHoi($idBC);
 $t->CapNhatSoLanChonPA($idPA); //C p nh t s l n ch n ph ng án
 $pa = $t->CacPhuongAnTrongCauHoi($idBC); //L y các ph ng án trong câu h i
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 140
 $row_bc = mysql_fetch_assoc($bc);
 $MotaBC = $row_bc["MoTa"];
 $TongSoLan=$t->TongSoLanChon($idBC); //Đ m t ng s l n ch n các ph ng án
 // hi n câu h i,ph ng án,% t ng ph ng án
 echo "BÌNH CHỌN";
 echo " $MotaBC ";
 while ($row_pa = mysql_fetch_assoc($pa)) {
 $id = $row_pa['idPA']; 
 $SoLanChon = $row_pa['SoLanChon']; 
 $MoTa = $row_pa['MoTa'];
 $percent = round(($SoLanChon/$TongSoLan)*100,2);
 echo " $MoTa : $SoLanChon ($percent %)";
 }
 echo "<input id='btnkhac' onclick='napbckhac()' type=button value='Câu 
 khác'>";
176. Định nghĩa hàm javascript nạp câu hỏi bình chọn khác
 function napbckhac(){
 $.ajax({
 type:"GET", url:"formbinhchon.php", cache:false,
 success: function (data){ $("#divbinhchon").html(data); }
 });
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 141
}
NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 142
FORM TÌM, VIDEO, QUẢNG CÁO
I. Form tìm kiếm
 1. Tạo file formtim.php
 Tìm kiếm nâng cao
 177. Định dạng
 #divtim { height:55px; text-align:center }
 #divtim #formtim{ background-color:#999966; margin: 0px; 
 border: outset 2px #999966; padding-top: 5px; padding-bottom: 5px; } 
 #formtim #btntim{ width:60px; background-color:#003366; color:#99FF00; 
 border: outset 2px #FFA806;}
 #formtim #tukhoa { width:190px; height:16px; text-align:center; 
 margin-left:10px; border: outset 2px #FFA806;}
 #formtim a { text-decoration:none; color:#CCFF00}
 #formtim a:hover{ font-weight:bold}
 178. Đưa vào trang chủ: 
 Trong content2, include file formtim.php
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 143
LIII. Video
 - Tạo file video_show.php và gõ code html:
 Video 
 - Sau tag p, chèn file video/KseniyaSimonova.flv
 - Chọn Flash video mới chèn, chỉnh skin là corona Skin 3, W=280, H=222
 - Định dạng css
 - Include vào div content2 của trang chủ, sau lệnh include formtim.php
LIV. div Info
 - Trong div info_1, gõ chữ Hôm nay rồi chèn file HienNgayHomNay.js
 - Trong div info_2, chèn 2 hình co/vi.jpg , en.jpg
 - Trong div info_3, chèn 3 hình hinh/icons/c1.jpg , hinh/icons/c1.jpg , hinh/icons/c1.jpg và gõ 
 chữ RSS  
 - Định dạng:
 #info #info_1{float:left; color:#00FFCC;padding-left:10px;padding-top:5px; 
 width:300px;}
 #info #info_2{ float:left; width:80px; }
 #info #info_2 img{ margin-right:10px; margin-top:5px;}
 #info #info_3{ color:#CCFF33; text-align:right; padding-top:5px; }
LV. Quảng cáo
 - Trong div quangcao, chèn 2 hình quangcao/qc3.jpg và quangcao/qc5.jpg
 - Chỉnh qc3 có W=580 H=90, qc5 có W=205 H=90. 
 - Chỉnh cả 2 hình có align=left
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 144
LVI. Form tìm nâng cao
 1. Tạo file formtimnangcao.php
 <? require_once "classTin.php";
 if (isset($t) ==false) $t = new tin;
 $lang = 'vi';
 ?>
 Tìm tin theo từ khoá và thời gian 
 <input type="text" name="tukhoa" id="tukhoa" 
 value="Từ ngày" class="tk" 
 onFocus="this.value=''" 
 onBlur="if (this.value=='') this.value='Từ ngày'"/>
 Chọn loại tin
 LoaiTin($lang, 1) ?>
 " > 
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 145
 <input type="text" name="tungay" id="tungay" value="Từ ngày"
 class="tk" onFocus="this.value=''" 
 onBlur="if (this.value=='') this.value='Từ ngày'"/>
 <input type="text" name="denngay" id="denngay" value="Đến ngày" 
 onFocus="this.value=''" class="tk"
 onBlur="if (this.value=='') this.value='Đến ngày'"/>
 Xem tin theo ngày
 Chọn ngày
 "> 
 Chọn tháng
 "> 
NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 146
 Chọn năm
 "> 
 Trở lại 
179. Định dạng CSS
 #divtimkiem { height:280px; width:780px; margin-top:10px;}
 #divtimkiem .caption { color:#CCFF00; margin:0; padding-top:5px; padding-
 bottom:5px; padding-left:5px;}
 #divtimkiem #divtimkiem_1{ float:left; width:385px; height:280px; 
 margin-left:5px; border:dotted 1px #99FF33; }
 #divtimkiem #divtimkiem_2{ float:left; width:380px; height:130px; 
 margin-left:5px; border:dotted 1px #99FF33; }
 #divtimkiem #divtimkiem_3{ float:left; width:380px; height:144px; 
 margin-left:5px; border:dotted 1px #99FF33; margin-top:5px;}
 #divtimkiem form{ margin:0px}
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 147
 #divtimkiem #divtrolai{ clear:left; float:left; width:780px; text-
 align:center; 
 margin-left:5px; margin-top:10px; }
 #divtimkiem #divtrolai a{ color:#FFFF00; font-weight:bold; text-
 decoration:none}
180. Code jquery nạp formtimnangcao.php
 $("#timnangcao").click(function(){
 $("#content1").load("formtimnangcao.php");
 $("#info").hide(); $("#content2").hide();
 $("#content1").css("width","785px");
 return false;
 });
181. Code jquery (formtimnangcao.php)
 $("#linktrolai").click(function(){
 $("#content1").load("noibat_xemnhieu.php");
 $("#info").show();
 $("#content2").show();
 $("#content1").css("width","500px");
 return false;
 });
 $('#divtimkiem_1').corner("5px");
 $('#divtimkiem_2').corner("5px");
 $('#divtimkiem_3').corner("5px");
 $('#divtrolai').corner("5px");
 NHẤT NGHỆ – NƠI DUY NHẤT CHẤT LƯỢNG ĐÀO TẠO ĐƯỢC ĐẢM BẢO BẰNG NHỮNG CAM KẾT CỤ THỂ 148

File đính kèm:

giao_trinh_huong_dan_thiet_ke_web_php_va_mysql_phan_1.pdf