Tài liệu hướng dẫn thực hành Thiết kế và lập trình web

102 1 0
Tài liệu hướng dẫn thực hành Thiết kế và lập trình web

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Ủ NN TR ỜN TÀI LIỆU N N TỈN ĐẠI ỌC T Ủ ẦU MỘT ỚN N ẪN T ỰC T IẾT KẾ VÀ LẬP TR N N U ỄN N ÀN WE ỮU VĨN VÕ QUỐC L NĂM 2017 N Ủ NN TR ỜN TÀI LIỆU N N TỈN ĐẠI ỌC T Ủ ẦU MỘT ỚN N ẪN T ỰC T IẾT KẾ VÀ LẬP TR N N U ỄN N ÀN WE ỮU VĨN VÕ QUỐC L NĂM 2017 N MỤC LỤC IỚI T IỆU C N N ÔN N Ữ TML 1.1 Mục tiêu 1.2 Yêu cầu chung 1.3 Bài tập thực hành Bài tập Thiết kế trang Gioithieu.html Bài tập Thiết kế trang Left.html 10 Bài tập Thiết kế trang Sanpham.html 11 Bài tập Thiết kế trang Chitietsanpham.html 12 Bài tập Thiết kế trang Dangnhap.html 13 Bài tập Thiết kế trang Dangky.html 15 Bài tập Thiết kế trang Right.html 17 Bài tập Thiết kế trang Header.html 19 Bài tập Thiết kế trang Nav.html 20 Bài tập 10 Thiết kế trang Trangchu.html 20 1.4 Bài tập áp dụng 24 C N N ÔN N Ữ CSS 25 2.1 Mục tiêu 25 2.2 Bài tập thực hành 25 Bài tập Định dạng phần Header 26 Bài tập Định dạng phần Nav 27 Bài tập Định dạng phần Body 30 Bài tập Định dạng phần Footer 37 Bài tập Định dạng trang Dangky.html 37 2.3 Bài tập áp dụng 38 C N N ÔN N Ữ J V SCRIPT 39 3.1 Mục tiêu 39 3.2 Bài tập thực hành 39 Bài tập Tạo trang Hello.html 39 Bài tập Tạo trang Time.html 40 Bài tập Kiểm tra thông tin trang Dangky.html 41 Bài tập Tạo calendar 44 Bài tập Tạo Slider chuyển hình 48 3.3 Bài tập áp dụng 50 C N N ÔN N Ữ SP.NET 51 4.1 Mục tiêu 51 4.2 Tài nguyên sử dụng 51 4.3 Bài tập thực hành 55 Bài tập Tạo Website xây dựng lớp xử lý liệu 55 Bài tập Tạo User Control MasterPage 58 Bài tập Xây dựng trang hiển thị thông tin sách 65 Bài tập Xây dựng trang Đăng nhập, Đổi mật khẩu, Đăng ký 69 Bài tập Xây dựng trang xử lý giao dịch mua hàng 77 Bài tập Xây dựng trang quản trị 89 4.4 Bài tập áp dụng 100 TÀI LIỆU T M K ẢO 101 IỚI T IỆU Chúng biên soạn tài liệu hướng dẫn thực hành học phần Thiết kế Lập trình Web với mục đích:  Cung cấp nguồn tài liệu hỗ trợ giảng viên việc giảng dạy học phần  Hỗ trợ sinh viên học tập học phần cách hiệu Tài liệu phân bố làm chương: Chương - Ngôn ngữ HTML (HyperText Markup Language): Trình bày dạng tập để sinh viên hình thành kỹ thiết kết trang Web với thẻ HTML Các tập theo cấu trúc Website để sinh viên có nhìn tổng quan trình thiết kế Website Chương - Ngôn ngữ CSS (Cascading Style Sheets): Áp dụng ngôn ngữ CSS vào việc định dạng tập Chương Giúp sinh viên sử dụng ngôn ngữ CSS để định dạng trang Web Chương - Ngôn ngữ JAVASCRIPT: Trình bày số tập có sử dụng ngôn ngữ Javascript để điều khiển số hành vi trang Chương - Ngôn ngữ ASP.NET: Hệ thống tập tổng hợp trang trình thiết kế HTML chuyển qua ASP.NET phát triển thêm số trang để hoàn thiện website Mỗi phần tập theo trình tự từ thiết kế trang tổng thể tới trang chi tiết Giúp sinh viên nắm quy trình thiết kế lập trình Website ngơn ngữ ASP.NET Trong phạm vi hạn hẹp tài liệu đề cập tất vấn đề lĩnh vực Thiết kế Lập trình Web địi hỏi Nhóm tác giả mong muốn nhận góp ý độc giả để tài liệu hoàn thiện tốt Mùa thu 2017 Nhóm tác giả C N N ÔN N Ữ TML 1.1 Mục tiêu Thiết kế giao diện trang Web với thẻ HTML 1.2 cầu chung  Tạo cấu trúc thư mục lưu trữ Web sau:  Mỗi thư mục lưu định dạng file tương ứng  Hình ảnh sử dụng để làm tập cung cấp sẵn địa https://tinyurl.com/TKvaLTWeb  Sử dụng phần mềm thiết kế Website (Notepad, Dreamweaver, Sublime text, Atom, …)  Các tập lưu vào thư mục BaitapHTML 1.3 ài tập thực hành Bài tập phần kết hợp với định dạng CSS (phần hướng dẫn Chương 2) để thực trang:  Trangchu.html: Được tách thành phần riêng (mỗi phần tập chương này) kết hợp lại Bài tập 10 Header (Bài tập 8) Nav (Bài tập 9) Left (Bài tập 2) Right (Bài tập 7) Sanpham (Bài tập 3) Footer (Bài tập 10)  Gioithieu.html, Dangky.html, Dangnhap.html, Chitietsanpham.html: Tương ứng tập 1, 4, 5, Các trang hoàn thiện hiển thị vùng Sanpham (Hình trên) để tạo thành Website với trang có bố cục thống ài tập Thiết kế trang Gioithieu.html Ý nghĩa sử dụng: Là trang giới thiệu công ty chủ quản Website cầu:  Đoạn văn 1: Size 6, in đậm, canh lề  Khi click chuột vào www.abc.com liên kết đến trang chủ website này, click chuột vào hotro@abc.com liên kết cho gửi email tới địa này, click chuột vào Liên hệ liên kết tới trang liên hệ (Lienhe.html)  Đoạn văn “Nguyên tắc hoạt động”: Size 5, in đậm, màu đỏ  Đoạn văn “Định hướng kinh doanh: Size 5, in đậm, màu xanh  Dùng thẻ ul, ol để tạo danh sách có thứ tự khơng có thứ tự cho nội dung văn ướng dẫn:  Tạo file lưu với tên Gioithieu.html  Tạo cặp thẻ quy định phần trang web: Nhà sách ABC  Tạo nội dung cho trang (trong cặp thẻ body):  Dùng thẻ h2 với thuộc tính align="center" (hoặc thẻ p kết hợp với thẻ font với thuộc tính size (quy định cỡ chữ) thẻ b (in đậm)) cho đoạn văn 1: GIỚI THIỆU CÔNG TY CỔ PHẦN THƢƠNG MẠI VÀ DỊCH VỤ SÁCH ABC  Dùng thẻ p kết hợp thẻ b thẻ a để định dạng tạo liên kết cho đoạn 2:

Cty Cổ phần Thƣơng Mại Dịch vụ sách ABC số cơng ty Thƣơng mại điện tử Việt Nam bắt đầu với Website www.abc.com từ tháng 12/2005.

 Tương tự dùng thẻ p kết hợp thẻ b font với thuộc tính color để tạo đoạn “Nguyên tắc hoạt động” “Định hướng kinh doanh:

NGUYÊN TẮC HOẠT ĐỘNG

ĐỊNH HƢỚNG KINH DOANH

 Dùng thẻ ul ol để tạo danh sách:
  • Tuyệt đối tôn trọng quyền luật xuất bản
  • Cam kết tạo sách có chất lƣợng, có giá trị, ln bắt kịp xu thời đại
  • Lấy độc giả làm trung tâm
  • Gia tăng lợi ích cho đối tác
  • Khơi dậy phát huy khả sáng tạo cá nhân
  1. Mua quyền, dịch xuất ấn phẩm từ tiếng nƣớc tiếng Việt ngƣợc lại với tủ sách:
    • V- Biz: Những sách cung cấp cách tƣ duy, kinh nghiệm, kĩ mang tính ứng dụng cao cho nhà lãnh đạo, ngƣời hoạt động lĩnh vực kinh doanh, nhân viên công sở,…
    • V-Buddism: Tủ sách Phật pháp ứng dụng Thaihabooks nhận đƣợc quan tâm, tin tƣởng Phật tử bạn đọc Các sách mang lại triết lý sâu sắc nhà Phật nhƣng gắn liên với sống hàng ngày, giúp ngƣời sống hạnh phúc có ý nghĩa hơn.
    • V-Parents: Những sách giúp bậc cha mẹ nuôi dạy tốt hơn, thấu hiểu dựa tƣ vấn chuyên gia hàng đầu Việt Nam giới.
    • V-Teen: Những sách giúp tháo gỡ vƣớng mắc, khơi dậy tiềm năng, định hƣớng nghề nghiệp cho tuổi lớn.
    • V-Smile: Bao gồm sách chủ đề văn hoá, văn học, giáo dục, lịch sử, du ký… làm phong phú thêm đời sống tinh thần, bổ sung kiến thức chuyên sâu nhiều lĩnh vực sống cho bạn đọc
  2. Cung cấp dịch vụ liên quan đến quyền xuất bản
  3. 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 khơng thể 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 ... dụng 100 TÀI LIỆU T M K ẢO 101 IỚI T IỆU Chúng biên soạn tài liệu hướng dẫn thực hành học phần Thiết kế Lập trình Web với mục đích:  Cung cấp nguồn tài liệu hỗ trợ giảng... theo trình tự từ thiết kế trang tổng thể tới trang chi tiết Giúp sinh viên nắm quy trình thiết kế lập trình Website ngơn ngữ ASP.NET Trong phạm vi hạn hẹp tài liệu đề cập tất vấn đề lĩnh vực Thiết. .. 1.3 Bài tập thực hành Bài tập Thiết kế trang Gioithieu.html Bài tập Thiết kế trang Left.html 10 Bài tập Thiết kế trang Sanpham.html 11 Bài tập Thiết kế trang

Ngày đăng: 11/02/2023, 12:33