Tài liệu hướng dẫn thực hành Thiết kế và lập trình web: Phần 2 - Trường ĐH Thủ Dầu Một

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:63

Thêm vào BST

Báo xấu

63
lượt xem 25
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tài liệu hướng dẫn thực hành Thiết kế và lập trình web được phân bố làm 4 chương, cụ thể như sau: Ngôn ngữ HTML; Ngôn ngữ CSS; Ngôn ngữ JAVASCRIPT; Ngôn ngữ ASP.NET. Mời các bạn cùng tham khảo nội dung phần 2 tài liệu dưới đây.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Tài liệu hướng dẫn thực hành Thiết kế và lập trình web: Phần 2 - Trường ĐH Thủ Dầu Một

C N 3. N ÔN N Ữ JAVASCRIPT 3.1. Mục tiêu Biết sử dụng ngôn ngữ JavaScript vào để thiết lập một số hành vi cho trang Web. 3.2. ài tập thực hành ài tập 1. Tạo trang Hello.html êu cầu:  Sử dụng JavaScript để hiển thị hộp thoại cho phép nhập tên người dùng.  Khi click OK sẽ hiển thị một lời chào có chứa tên người dùng đã nhập vào. ướng dẫn:  Sử dụng phương thức prompt của đối tượng window để hiển thị hộp thoại cho phép nhập thông tin.  Sử dụng phương thức write để hiển thị thông tin lên trang. var name=window.prompt("Xin chào!Bạn tên gì?",""); document.write("Xin chào bạn " + name + " ! Chúc bạn học tốt JavaScript "); 39
ài tập 2. Tạo trang Time.html êu cầu:  Dùng JavaScript để hiển thị thời gian giờ:phút:giây và Thứ, ngày tháng năm lên trang. ướng dẫn:  Khai báo thẻ script với thuộc tính Language="JavaScript" trong cặp thẻ head.  Dùng các hàm về thời gian để lấy ngày, tháng, năm, giờ, phút, giây, ngày trong tuần: d = new Date(); thu = d.getDay() ; ngay= d.getDate(); ngay= ((ngay< 10) ? '0' : '') + ngay; thang= d.getMonth()+1; thang= ((thang< 10) ? '0' : '') + thang; nam= 1900+d.getYear(); gio = d.getHours(); gio=((gio
 Trong thẻ body, dùng phương thức write để hiển thị thông tin lên trang: document.write("" +"Bây giờ là: " + gio + ":" + phut + ":" + giay +"" ) ; document.write(" Hôm nay là:" + thu + ", ngày " + ngay + " tháng " + thang + " năm " + nam + ""); ài tập 3. Kiểm tra thông tin trên trang Dangky.html êu cầu:  Xây dựng hàm hàm để kiểm tra tính hợp lệ của các thông tin nhập vào:  Họ và tên: Không được để rỗng  Năm sinh: Không được rỗng và phải là số  Email: Không được rỗng và phải đúng định dạng email.  Tên đăng nhập: Không được rỗng.  Mật khẩu: Không được rỗng.  Nhập lại mật khẩu: Không được rỗng và phải trùng với mật khẩu. 41
 Khi click nút đăng ký, nếu thông tin không hợp lệ sẽ hiện thông báo lỗi. ướng dẫn:  Từ trang Dangky.html đã định dạng ở Bài tập 5 (Chương 2)  Tạo thẻ … trong thẻ head.  Trong thẻ script, xây dựng hàm KiemTraThongTin() để kiểm tra các thông tin theo các yêu cầu trên. Đưa ra thông báo lỗi dạng alert nếu người dùng nhập sai, thứ tự kiểm tra từ trên xuống. Nếu gặp bất kỳ thẻ input nào không thõa điều kiện thì hàm sẽ đưa ra thông báo và thoát khỏi hàm. Nếu tất cả thông tin đều thõa mãn, hàm sẽ thông báo “Đăng ký thành công! Xin chúc mừng.”. function KiemTraThongTin(){ ... /*Thông báo khi thông tin hợp lệ*/ alert("Đăng ký thành công! Xin chúc mừng."); return true; }  Thêm id cho các thẻ:  Dùng phương thức document.getElementById("id") để truy cập tới đối tượng cần xử lý (dựa vào id) hoặc window.document.dangky.txtTenDangNhap để truy cập (dựa vào name).  Một số thao tác xử lý kiểm tra:  Kiểm tra Họ tên: ... var hoTen=document.getElementById("hoten"); if (hoTen.value==""){ alert("Vui lòng nhập Họ tên."); hoTen.focus(); 42
return false; } ...  Kiểm tra năm sinh: ... var nam=document.getElementById("nam"); if (nam.value==""){ alert("Hãy điền Năm sinh."); nam.focus(); return false; } if (isNaN(nam.value)==true){ alert("Năm sinh phải là số."); nam.value=""; nam.focus(); return false; } ...  Kiểm tra email: ... var email=window.document.dangky.txtEmail; re=/\w+@\w+\.\w+/; if (email.value==""){ alert("Bạn chưa nhập Email.") ; email.focus(); return false; } else if(re.test(email.value)==false){ alert("Email không đúng định dạng!"); email.focus(); return false; } ...  Tương tự cho các thao tác khác.  Gọi hàm khi sự kiện submit form xảy ra: 43
Có thể gọi hàm ở sự kiện click lên nút submit: ài tập 4. Tạo calendar êu cầu:  Tạo calendar vào vùng Left của Trangchu.html (Bài tập 10 – Chương 1).  Hiển thị tháng và năm ở hàng trên cùng.  Lịch được hiển thị theo thứ tự cột: Chủ nhật, Thứ 2, …, Thứ 7.  Định dạng theo mẫu, ngày hiện tại được in đậm, chữ màu đỏ. ướng dẫn:  Tạo thêm thẻ div trong phần sau nội dung đã có. ... 44
 Thêm thẻ script vào trong thẻ div và viết lệnh để hiển thị lịch vào trong thẻ này:
while (startspaces > 7) startspaces-=7; startspaces = thisday - startspaces + 1; if (startspaces < 0) startspaces+=7; document.write(""); document.write(""+ monthnames[thismonth] + " " + thisyear+ ""); document.write(""); document.write("Sun"); document.write("Mon"); document.write("Tus"); document.write("Wed"); document.write("Thu"); document.write("Fri"); document.write("Sat"); document.write(""); document.write(""); for (s=0;s
if (count==thisdate) { document.write(""); }if (linktrue) document.write(""); document.write(""); count++; } document.write(""); document.write(""); startspaces=0; } document.write("");
text-align:center; border:1px solid #666; } ài tập 5. Tạo Slider chuyển hình êu cầu:  Chèn mười hình đã có trong thư mục Images/Sach/ vào vùng slider.  Dùng css định dạng cho slider  Sử dụng các file javascript đã được cung cấp trong thư mục js (theo đường link ở Chương 1) chèn vào Trangchu.html (Bài tập 10 – Chương 1) để tạo hiệu ứng chuyển hình cho slider. ướng dẫn:  Từ file Trangchu.html thay hình Slider.jpg bằng thẻ .  Tạo các thẻ div và thực hiện chèn hình: « » ...  Tạo file Slider.css chèn vào Trangchu.html và thiết lập các thuộc tính để định dạng slider: aside#slide{ margin-left:100px; width:89%; } 48
.slide-pager{ position:relative; } .slide-control-prev { position: absolute; text-align: center; width: 25px; height: 60px; background:#F90; line-height: 60px; color: #fff; cursor: pointer; top: 102px; left: -34px; z-index:1000; } .slide-control-next{ position: absolute; text-align: center; width: 25px; height: 60px; background:#F90; line-height: 60px; color: #fff; cursor: pointer; right: 34px; top: 102px; z-index:1000; } .slide-container { height: 255px; width: 92%; overflow: hidden; position:relative; } .slide-stage{ position: absolute; 49
} .slide-image { float:left; width:200px; text-align:center; } .slide-image img{ width:170px; height:250px; margin:0 auto; }  Chèn các file jquery-1.9.1.min.js và Slider.js vào Trangchu.html: 3.3. ài tập áp dụng Sử dụng ngôn ngữ JavaScript viết các hàm kiểm tra thông tin người dùng nhập vào tại các trang (liên hệ, đăng ký, đăng nhập) có hợp lệ không cho website đã tạo ở mục 1.4 (Chương 1). 50
C N 4. N ÔN N Ữ ASP.NET 4.1. Mục tiêu Sử dụng tổng cả các điều khiển để xây dựng hoàn chỉnh một Website. Hình thành kỹ năng xây dựng các ứng dụng Web trên nền tảng ASP.NET. 4.2. Tài nguyên sử dụng Các tài nguyên sử dụng cho việc xây dựng Website trong chương này đã được cung cấp theo đường link ở Chương 1. Bao gồm:  File QLBanSach.sql chứa CSDL (cơ sở dữ liệu) QLBanSach gồm các bảng và một số dữ liệu mẫu:  Mối quan hệ giữa các bảng trong CSDL QLBanSach: 51
 Mô tả chi tiết các bảng: Bảng Chủ đề: CHUDE Field Name Data Type Field Size MaCD Int Identity(1,1) TenChuDe Nvarchar 50, Not Null Bảng Nhà xuất bản: NHAXUATBAN Field Name Data Type Field Size MaNXB Int Identity(1,1) TenNXB Nvarchar 100, Not Null DiaChi Nvarchar 150 DienThoai Nvarchar 15 Bảng Sách: SACH Field Name Data Type Field Size MaSach Int Identity(1,1) TenSach Nvarchar 100, Not Null DonViTinh Nvarchar 50 DonGia Money Check (DonGia>0) MoTa Ntext HinhMinHoa Nvarchar 50, Lưu tên hình MaCD Int MaNXB Int NgayCapNhat Date SoLuongBan Int Check (SoLuongBan>0) SoLanXem Int Default 0 Bảng Tác giả: TACGIA Field Name Data Type Field Size 52
MaTG Int Identity(1,1) TenTG Nvarchar 50, Not Null DiaChiTG Nvarchar 100 DienThoaiTG Nvarchar 15 Bảng Viết sách: VIETSACH Field Name Data Type Field Size MaTG Int MaSach Int VaiTro Nvarchar 30 Bảng Khách hàng: KHACHHANG Field Name Data Type Field Size MaKH Int Identity(1,1) HoTenKH Nvarchar 50 DiaChiKH Nvarchar 50 DienThoaiKH Nvarchar 10 TenDN Nvarchar 15 MatKhau Nvarchar 15 NgaySinh Date GioiTinh Bit Default 0 Email Nvarchar 50 DaDuyet Bit Default 0 Bảng Đơn đặt hàng: DONDATHANG Field Name Data Type Field Size SoDH Int Identity(1,1) MaKH Int NgayDH Date 53
TriGia Money Check (TriGia>0) DaGiao Bit Default 0 NgayGiaoHang Date TenNguoiNhan Nvarchar 50 DiaChiNhan Nvarchar 50 DienThoaiNhan Varchar 15 HHThanhToan Bit Default 0 HHGiaoHang Bit Default 0 Bảng Chi tiết đặt hàng: CTDATHANG Field Name Data Type Field Size SoDH Int MaSach Int SoLuong Int Check (SoLuong>0) DonGia Money Check (DonGia>0) Bảng Thăm dò: THAMDO Field Name Data Type Field Size MaCH Int Identity(1,1) NgayDang Date NoiDungThamDo Nvarchar 255, Not Null TongSoBinhChon Int Default 0 Bảng Chi tiết thăm dò: CTTHAMDO Field Name Data Type Field Size MaCH Int STT Int NoiDungTraLoi Nvarchar 255, Not Null SoLanBinhChon Int Default 0 54
Bảng Quản trị: ADMIN Field Name Data Type Field Size MaAdmin Int Identity(1,1) HoTenAdmin Nvarchar 50 DiaChiAdmin Nvarchar 50 DienThoaiAdmin Varchar 10 TenDNAdmin Varchar 15 MatKhauAdmin Varchar 15 NgaySinhAdmin Date GioiTinhAdmin Bit Default 0 EmailAdmin Varchar 50 QuyenAdmin Int Default 1 Giải thích: Các trường gạch chân là khóa chính của bảng  Thư mục Images chứa các hình ảnh  File hướng dẫn sử dụng ckEditor 4.3. ài tập thực hành ài tập 1. Tạo Website và xây dựng lớp xử lý dữ liệu êu cầu:  Tạo Website để chứa toàn bộ tài nguyên  Tạo CSDL QLBanSach vào SQLServer  Thực hiện kết nối và xây dựng các phương thức để truy cập dữ liệu ướng dẫn:  Tạo Website:  Tạo một website với tên là Quanlybansach.  Trong website Quanlybansach tạo các thư mục App_Code, App_Data, Scripts, UC, Images. Trong thư mục Scripts tạo hai thư mục con là JS và CSS. 55
 Tải file QLBanSach.sql trong thư mục App_Data ở địa chỉ phần 4.2 và lưu vào thư mục App_Data của Website.  Tải các hình ảnh trong thư mục Images ở địa chỉ phần 4.2 và lưu vào thư mục Images của Website.  Xây dựng lớp xử lý dữ liệu: Để các thao tác với CSDL thuận lợi. Ta nên xây dựng lớp xử lý dữ liệu đảm nhận việc kết nối CSDL và các thủ tục xử lý.  Chạy file QLBanSach.sql để tạo CSDL QLBanSach vào SQL Server.  Cấu hình chuỗi kết nối CSDL trong tập tin Web.config  Xây dựng lớp XLDL với các phương thức để hiển thị và cập nhật dữ liệu:  Tạo file XLDL.cs trong thưc mục App_Code.  Khai báo các thư viện: Thư viện để sử dụng các đối tượng truy cập dữ liệu: using System.Data; using System.Data.SqlClient; Thư viện để sử dụng câu lệnh lấy chuỗi kết nối ở file Web.config: using System.Configuration;  Lấy giá trị chuỗi kết nối khai báo trong file Web.config 56
public static string strCon = ConfigurationManager.ConnectionStrings["conn"].ConnectionString .ToString(); Chú ý: Nếu không cấu hình chuỗi kết nối trong tập tin Web.config, bạn có thể sử dụng câu lệnh sau để kết nối tới CSDL public static string strCon = "data source=.\\;Integrated Security=true;Database=QLBanSach";  Xây dựng các phương thức để truy vấn hiển thị và cập nhật dữ liệu trong class XLDL. GetData(string lenhSQL): Nhằm thực hiện câu lệnh truy vấn SQL để trả về dữ liệu là một DataTable public static DataTable GetData(string lenhSQL) { SqlConnection sqlCon = new SqlConnection(strCon); try { SqlDataAdapter sqlDa = new SqlDataAdapter(lenhSQL, sqlCon); DataTable dt = new DataTable(); sqlDa.Fill(dt); return dt; } catch (Exception ex) { throw ex; } } Execute(string lenhSQL): Nhằm thực hiện câu lệnh Insert, Update, Delete để cập nhật dữ liệu cho CSDL. public static void Execute(string lenhSQL) { using (SqlConnection sqlCon = new SqlConnection(strCon)) { sqlCon.Open(); SqlCommand sqlCmd = new SqlCommand(lenhSQL, sqlCon); sqlCmd.ExecuteNonQuery(); sqlCon.Close(); } } 57
GetValue(string lenhSQL): Nhằm thực hiện câu lệnh truy vấn SQL trả về dữ liệu là một giá trị đơn. public static string GetValue(string lenhSQL) { using (SqlConnection sqlCon = new SqlConnection(strCon)) { sqlCon.Open(); SqlCommand sqlCmd = new SqlCommand(lenhSQL, sqlCon); string value = sqlCmd.ExecuteScalar().ToString(); sqlCon.Close(); return (value); } } ài tập 2. Tạo các User Control và MasterPage êu cầu:  Tạo các user control để bố cục các phần chung trên các trang của Website  Tạo trang MasterPage để tập hợp các user control và thiết kết giao diện chính cho các trang web.  Các user control sẽ được tạo trong thư mục UC. ướng dẫn: User control Header  Tạo user control có tên là ucHeader.ascx  Tạo file Header.css trong thư mục CSS để định dạng cho ucHeader. Chèn file này vào ucHeader.ascx  Chép source ở Bài tập 1 và Bài tập 2 (Chương 2) để thiết kế ucHeader  Trong ucHeader này, những nơi có thẻ liên kết , hãy thay các trang cần liên kết tới từ .html sang .aspx  Chép định dạng phần thẻ header và nav từ file Style.css ở Chương 2 vào file Header.css để định dạng cho ucHeader 58