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.
C N 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 số hành vi cho trang Web 3.2 ài tập thực hành ài tập Tạo trang Hello.html 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 hiển thị 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 đố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 Tạo trang Time.html cầu: Dùng JavaScript để hiển thị thời gian giờ:phút:giây 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" cặp thẻ head Dùng hàm thời gian để lấy ngày, tháng, năm, giờ, phút, giây, ngày 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 Thêm định dạng CSS vào file Style.css (đã tạo Chương 2) để định dạng cho phần calendar: calendar{ border:1px solid #206AB5; border-radius:4px; margin-bottom:10px; } calendar table{ width:100%; } calendar table tr td.monthyear{ background-color:#F60; text-align:center; font-size:16px; font-weight:bold; color:#FFF; border:1px solid #666; } calendar table tr.weektitle td{ text-align:center; font-weight:bold; border:1px solid #666; background-color:#CCF; } calendar table tr td.weekday{ 47 text-align:center; border:1px solid #666; } ài tập Tạo Slider chuyển hình cầu: Chèn mười hình có thư mục Images/Sach/ vào vùng slider Dùng css định dạng cho slider Sử dụng file javascript cung cấp 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 thẻ Tạo thẻ div thực chèn hình: « » Tạo file Slider.css chèn vào Trangchu.html thiết lập thuộc tính để định dạng slider: aside#slide{ margin-left:100px; width:89%; } 48 lbEmail.Text = dt.Rows[0][4].ToString(); } } if (Session["Giohang"] != null) { DataTable dt = new DataTable(); dt = (DataTable)Session["GioHang"]; System.Decimal tongThanhTien = 0; foreach (DataRow r in dt.Rows) { r["ThanhTien"] = Convert.ToInt32(r["SoLuong"]) * Convert.ToDecimal(r["DonGia"]); tongThanhTien += Convert.ToDecimal(r["ThanhTien"]); lbTongTien.Text = tongThanhTien.ToString(); } gvGioHang.DataSource = dt; gvGioHang.DataBind(); } if (!IsPostBack) { cldNgayGiaoHang.SelectedDate = DateTime.Today; } Sự kiện click nút Đồng ý (Lưu thông tin đơn hàng vào Table DonDatHang sản phẩm Table CTDatHang): int httt, htgh; string TenNguoiNhan, DiaChiNhan, DienThoaiNhan; TenNguoiNhan = txtTenNguoiNhan.Text; DiaChiNhan = txtDiaChiNhan.Text; DienThoaiNhan = txtDienThoaiNhan.Text; float tongThanhTien = float.Parse(lbTongTien.Text); httt = Convert.ToInt32(rblHinhThucThanhToan.SelectedItem.Value); htgh = Convert.ToInt32(rblHinhThucGiaoHang.SelectedItem.Value); try { SqlConnection = new SqlConnection(XLDL.strCon); con.Open(); SqlCommand cmd = new SqlCommand(); cmd.CommandType = CommandType.Text; cmd.Connection = con; 87 /* Lưu thông tin vào Table DONDATHANG */ cmd.CommandText = @"INSERT INTO DONDATHANG(MaKH,NgayDH,TriGia,NgayGiaoHang,TenNguoiNhan,DiaChiNhan, DienThoaiNhan,HTThanhToan,HTGiaoHang) Values(" + MaKH + ",@ngaydathang," + tongThanhTien + ",@ngaygiaohang,'" + TenNguoiNhan + "','" + DiaChiNhan + "','" + DienThoaiNhan + "'," + httt + "," + htgh + ")"; cmd.Parameters.Add("@ngaydathang", SqlDbType.SmallDateTime); cmd.Parameters["@ngaydathang"].Value = DateTime.Today; cmd.Parameters.Add("@ngaygiaohang", SqlDbType.SmallDateTime); cmd.Parameters["@ngaygiaohang"].Value = cldNgayGiaoHang.SelectedDate; cmd.ExecuteNonQuery(); con.Close(); /* Lấy mã đơn hàng vừa lưu vào Table DONDATHANG */ string s = "Select max(SoDH) from DONDATHANG Where MaKH=" + MaKH; int SoDonHang = int.Parse(XLDL.GetData(s).Rows[0][0].ToString()); DataTable dt = new DataTable(); dt = (DataTable)Session["Giohang"]; int MaSach, SoLuong; float DonGia; /* Lưu sản phẩm vào Table CTDATHANG */ for (int i = 0; i < dt.Rows.Count; i++) { MaSach = int.Parse(dt.Rows[i]["MaSach"].ToString()); SoLuong = int.Parse(dt.Rows[i]["SoLuong"].ToString()); DonGia = float.Parse(dt.Rows[i]["DonGia"].ToString()); s = "INSERT INTO CTDATHANG(SoDH,MaSach,SoLuong,DonGia) VALUES(" + SoDonHang + "," + MaSach + "," + SoLuong + "," + DonGia + ")"; XLDL.Execute(s); } /* Xóa giỏ hàng sau thực xong đặt hàng */ Session["Giohang"] = null; /* Sau đặt hàng chuyển tới trang Xác nhận đơn hàng*/ Response.Redirect("~/Xacnhandonhang.aspx"); } catch { lbThongBaoLoi.Text = "Lỗi trình cập nhật liệu!"; 88 } Trang Xacnhandonhang.aspx cầu: Xác nhận đơn đặt hàng đặt thành công kết thúc (liên kết Về trang chủ (Default.aspx)) Có kiểm tra chưa đăng nhập trang Dangnhap.aspx ướng dẫn: Tạo HyperLink để liên kết trang chủ (Default.aspx) Xử lý code kiện PageLoad: if (Session["TenDN"] == null) Response.Redirect("~/Dangnhap.aspx"); ài tập Xây dựng trang quản trị Tạo thư mục Admin (lưu trang phần quản trị), thư mục tạo thư mục UC (lưu user control), Style (lưu file css định dạng trang) Tạo user control ucAdminHeader.ascx Tạo user control ucAdminLeft.ascx 89 Tạo trang AdminMasterPage.master ucAdminHeader ContentPlaceHolder ucAdminLeft ucFooter Trang chủ Admin.aspx 90 cầu: Sử dụng giao diện trang AdminMasterPage.master Khi vào trang này, chưa đăng nhập với chức quản trị yêu cầu phải đăng nhập trước (chuyển qua trang DangnhapAdmin.aspx) Trang DangnhapAdmin.aspx cầu: Nếu đăng nhập thành cơng (thơng tin đăng nhập có table Admin) chuyển qua trang Admin.aspx Trang Nhaxuatban.aspx 91 cầu: Khi vào trang chưa đăng nhập với chức admin chuyển qua trang DangnhapAdmin.aspx Tạo liên kết đến trang thêm nhà xuất (Thêm (ThemNXB.aspx)) Tạo nút xóa cho hàng GridView để xóa thơng tin hàng tương ứng CSDL (có kiểm tra ràng buộc liệu) Tạo nút sửa để chuyển hàng tương ứng sang chế độ chỉnh sửa cho phép lưu thông tin vào CSDL Trạng thái hàng sau chọn nút sửa: ướng dẫn: Tạo trang Nhaxuatban.aspx kế thừa trang AdminMasterPage Một HyperLink liên kết tới trang ThemNXB.aspx Một GridView (gvNhaXuatBan) gồm cột: Bốn BoundField: Mã nhà xuất bản, tên nhà xuất bản, địa chỉ, điện thoại 92 Một ButtonField: Xóa (thuộc tính ButtonType="Image", sử dụng file hình Delete.jpg làm nền, thuộc tính CommandName="Xoa") Một CommandField: Sửa (thuộc tính: ButtonType="Link", CancelText="Hủy", EditText="Sửa", UpdateText="Lưu") Thuộc tính DataKeyNames: MaNXB Một Label: lbBaoLoi Xử lý code: Sử dụng phương thức GetData lớp XLDL để lấy liệu hiển thị lên lưới Nút Xóa GridView (lệnh cho kiện click nút Xóa viết kiện RowCommand GridView): if (e.CommandName == "Xoa") { try { int chiso = int.Parse(e.CommandArgument.ToString()); int ma = int.Parse(gvNhaXuatBan.Rows[chiso].Cells[0].Text); DataTable dt = XLDL.GetData("Select Masach FROM Sach WHERE MaNXB=" + ma + ""); if (dt.Rows.Count > 0) lbBaoLoi.Text = "Nhà xuất xuất sách nên xóa. Bạn cần xóa hết tất sách nhà xuất trƣớc!"; 93 else { string str = "DELETE from NHAXUATBAN where MaNXB=" + ma; XLDL.Execute(str); Response.Redirect("~/Admin/Nhaxuatban.aspx"); } } catch { lbBaoLoi.Text = "Thất bại!"; } } Nút Sửa GridView: Khi click nút Sửa hàng tương ứng chuyển sang trạng thái cho nhập thông tin, nút Sửa chuyển thành hai nút Lưu Hủy Viết lệnh cho nút tương ứng: Nút Sửa (RowEditing): gvNhaXuatBan.EditIndex = e.NewEditIndex; /*Chuyển hàng sang trạng thái cho sửa*/ CapNhatNXB(); /*Phương thức lấy liệu hiển thị lên lưới*/ Nút Lưu (RowUpdating): int MaNXB = int.Parse(gvNhaXuatBan.DataKeys[e.RowIndex].Value.ToString()); string TenNXB = (gvNhaXuatBan.Rows[e.RowIndex].Cells[1].Controls[0] as TextBox).Text; string DiaChi = (gvNhaXuatBan.Rows[e.RowIndex].Cells[2].Controls[0] as TextBox).Text; string DienThoai = (gvNhaXuatBan.Rows[e.RowIndex].Cells[3].Controls[0] as TextBox).Text; if (TenNXB == "") { Response.Write("alert('Tên không đƣợc rỗng')"); } else { XLDL.Execute(@"UPDATE NHAXUATBAN set TenNXB=N'" + TenNXB + "',DiaChi=N'" + DiaChi + "',DienThoai='" + DienThoai + "' WHERE MaNXB='" + MaNXB + "'"); 94 gvNhaXuatBan.EditIndex = -1; /*Chuyển hàng sang trạng thái thường*/ CapNhatNXB(); } Nút Hủy (RowCancelingEdit): gvNhaXuatBan.EditIndex = -1; CapNhatNXB(); Trang ThemNXB.aspx cầu: Cho phép lưu thơng tin vào table Nhaxuatban có kiểm tra thông tin nhập vào phải khác rỗng Trang Sach.aspx 95 cầu: Chọn thêm tới trang Themsach.aspx Thực phân trang GridView hiển thị 10 sách trang Cột Ngày cập nhật hiển thị ngày theo định dạng dd/mm/yyyy Click nút xóa xóa sách tương ứng Click nút sửa hiển thị thông tin sách tương ứng trang Suasach.aspx ướng dẫn: Tạo trang Sach.aspx kế thừa trang AdminMasterPage Quá trình thiết kế trang tương tự trang Nhaxuatban.aspx Ở cột Ngày cập nhật thiết lập thuộc tính định dạng DataFormatString= {0:dd/MM/yyyy} Cột Sửa sử dụng TemplateField, chèn vào Template HyperLink thiết lập thuộc tính NavigateUrl "~/Admin/Suasach.aspx?Ma="+Eval("MaSach") 96 Thiết lập thuộc tính cho phép phân trang với số lượng 10 item trang: AllowPaging=True, PageSize=10 kiện PageIndexChanging GridView sau: gvSach.PageIndex = e.NewPageIndex; gvSach.DataBind(); Viết code để hiển thị thông tin sách lên GridView nút Xóa Trang Themsach.aspx 97 cầu: Tạo Textbox cho phép nhập tên sách, đơn vị tính, đơn giá, số lượng, số lần xem Chèn ckEditor để nhập mơ tả sách FileUpload để chọn hình cho sách Hai DropDownList để hiển thị thông tin chủ đề sách nhà xuất Nút lưu để lưu thông tin vào CSDL ướng dẫn: Tạo trang Themsach.aspx kế thừa trang AdminMasterPage Chèn ckEditor để nhập mô tả sách (thực theo hướng dẫn file hướng dẫn sử dụng ckEditor (có tài nguyên thực hành)) Lấy liệu bảng Chude Nhaxuatban để hiển thị lên DropDownList: /*Lấy chủ đề*/ DataTable dt=XLDL.GetData("select MaCD, TenChuDe from Chude"); if (dt.Rows.Count>0) { for (int i = 0; i < dt.Rows.Count; i++) { ddlMaChuDe.Items.Add("i"); ddlMaChuDe.Items[i].Text = dt.Rows[i][0].ToString() + ": " + dt.Rows[i][1].ToString(); 98 ddlMaChuDe.Items[i].Value = dt.Rows[i][0].ToString(); } } /* Lấy nhà xuất (tương tự lấy chủ đề)*/ Xử lý code nút Lưu: Dùng câu lệnh Insert với tham số lấy giá trị từ control tương ứng để lưu vào table Sach Trang Suasach.aspx 99 cầu: Khi click nút Sửa trang Sach.aspx mở trang hiển thị thông tin sách tương ứng lên trang Click nút Lưu lưu thông tin sách sau sửa vào CSDL ướng dẫn: Tạo trang Suasach.aspx kế thừa trang AdminMasterPage Thiết kế trang tương tự trang Themsach.aspx Riêng hai DropDownList thay hai Textbox Lấy tham số truyền từ trang Sach.aspx thực truy vấn lấy sách có mã tương ứng hiển thị lên control Xử lý code nút Lưu: Dùng câu lệnh Update với tham số lấy giá trị từ control tương ứng để cập nhật vào table Sach (Sinh viên tự thiết kế chức tương ứng như: Cập nhật nhân viên, cập nhật nhà xuất bản, cập nhật tác giả, cập nhật khách hàng; Xử lý đơn hàng; …) 4.4 ài tập áp dụng Thiết kế CSDL cho chủ đề chọn phần 1.4 (Chương 1) Chuyển đổi trang tương ứng thiết kế phần Bài tập áp dụng (ở chương 1, 2, 3) sang ASP.NET hoàn thiện thành Website hoàn chỉnh (Phần tập áp dụng sinh viên hoàn thiện làm báo cáo để nộp làm đồ án môn học) 100 TÀI LIỆU T M K ẢO Tiếng Việt: [1] Nguyễn Quang Hải (2014), Nhập môn HTML CSS, NXB Giáo Dục [2] Trường Đại học FPT (sách dịch, 2015), HTML5 CSS3: Thiết kế trang Web thích ứng giàu tính năng, NXB Bách khoa Hà Nội [3] Trường Đại học FPT (sách dịch, 2015), JavaScript - Hướng dẫn học qua ví dụ, NXB Bách khoa Hà Nội Tiếng nh: [4] Paul Wilton, Jeremy McPeak (2010), Beginning JavaScript®Fourth Edition, Wrox [5] Alex Mackey (2010), Introducing NET 4.0 With Visual Studio 2010 [6] Bill Evjen, Scott HanSelman, Devin Rader (2010), Professional ASP.NET in C# and VB, Wrox [7] Paul Deitel, Harvey Deitel (2011), C# 2010 for programmers fourth edition [8] WallPearl Simple (2008), CSS Standard Edition, WallPearl’sBlog [9] Stephen Walther (2008), ASP.NET 3.5 Unleashed, Sams Publishing 101 ... lệ liệu Khi chọn nút Đồng ý thực cập nhật liệu vào table Khachhang Cập nhật thành công chuyển sang trang chủ (Default.aspx) Cập nhật không thành công thông báo lỗi ướng dẫn: Thiết kế. .. position:relative; } slide-control-prev { position: absolute; text-align: center; width: 25 px; height: 60px; background:#F90; line-height: 60px; color: #fff; cursor: pointer; top: 102px; left: -3 4px; z-index:1000;... slide-container { height: 25 5px; width: 92% ; overflow: hidden; position:relative; } slide-stage{ position: absolute; 49 } slide-image { float:left; width :20 0px; text-align:center; } slide-image