Bài Tập Thực Hành Lập Trình Web

Lab 2: Sử dụng ASP.NET Web control Mục tiêu - Sử dụng thành phần web server control - Sử dụng lớp StreamReader StreamWriter để đọc ghi file dạng text - Các thao tác xử lý chuỗi, chia chuỗi, thay chuỗi Yêu cầu - Đã làm quen với server control bản, - Đã học qua lớp xử lý nhật xuất file C# Kịch - Các trang web thường có phần GuestBook, cho phép user lưu lại comment cho chủ nhân trang web Trong tạo form minh họa dạng GuestBook, cho user nhập vào thông tin: o Tiêu đề o Họ tên o Địa email o Nội dung comment - Các thông tin lưu lại server (thông qua file text) - Những entry user trước post lên hiển thị trang - Hình minh họa form GuestBook CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình 1: Giao diện form GuestBook thực Hướng dẫn - Phần thiết kế form Guestbook.aspx sau: CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình 2: Phần thiết kế form - Chi tiết control form trình bày bảng Tên control Kiểu Thuộc tính Ý nghĩa txtTieuDe TextBox TextMode = SingleLine Nhập tiêu đề comment txtHoTen TextBox TextMode = SingleLine Nhập họ tên txtEmail TextBox TextMode = SingleLine Địa email txtNoiDung TextBox TextMode = MultiLine Nhập nội dung comment Rows = Btn_GoiND Button Thực thi hành động post comment lên server Trình xử lý kiện thêm CuuDuongThanCong.com https://fb.com/tailieudientucntt entry vào file EntryComment Span Runat = server Chứa toàn entry (HTML comment lấy từ server file server control) Bảng 1: Mô tả chi tiết control web form - Phần xử lý code behind bao gồm có phần o Phần 1: Xử lý thêm entry vào file lưu server, phần xử lý đặt trình xử lý kiện click button Btn_GoiND Toàn phần xử lý button liệt kê bên code Code 1: Trình xử lý kiện click button Btn_GoiND Lưu ý: đoạn code lưu entry file text server cuối entry có ký tự nhận dạng kết thúc “#END”, mục đích để sau ta nhanh chóng lọc entry hiển thị bước sau File chứa nội dung comment “data.txt” đường dẫn với page chứa thơng tin dạng text sau: CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình 3: Minh họa file chứa nội dung comment o Phần 2: Phần hiển thị toàn entry comment lên form Phần xử lý phương thức ReadComment(), gọi kiện Page_Load Web form Code 2: Gọi hàm hiển thị comment kiện Page_Load CuuDuongThanCong.com https://fb.com/tailieudientucntt Code 3: Đọc file “data.txt” chứa nội dung comment - Trong phần xử lý đọc ta làm theo bước sau o Đọc toàn nội dung file comment o Chia entry vào chuỗi o Với chuỗi chứa entry, tat hay ký tự xuống dòng tab break để hiển thị trình duyệt o Cuối định dạng nội dung comment vào tag đưa vào thuộc tính InnerHTML span có tên EntryComment Tóm lại: có nhiều cách hiển thị nội dung comment form, sinh viên tùy ý chọn thức thích hợp theo quan điểm cá nhân Code tham khảo, sinh viên nên dựa vào mà viết lại hoàn chỉnh Phần mở rộng: - Sinh viên bổ sung thêm trường thông tin o Ngày tháng năm viết comment hiển thị thông tin lên với entry comment CuuDuongThanCong.com https://fb.com/tailieudientucntt o Thử không sử dụng tag span EntryComment mà dùng Web control Table để hiển thị comment Tìm hiểu lớp Table, TableRow TableCell… o Design lại form GuestBook cho hợp lý =oOo= CuuDuongThanCong.com https://fb.com/tailieudientucntt Lab 3: Sử dụng Web control & Validation Controls Mục tiêu - Sử dụng web control trang ASP.NET o TextBox, Button, DropDownList - Sử dụng input validation controls trang ASP.NET o RequiredFieldValidator o CompareValidator o RegularExpressionValidator o ValidationSummary - Hiển thị thông báo lỗi nhập liệu không hợp lệ Yêu cầu - Đã làm quen với server control - Biết xử lý kiện ASP.NET web control Kịch - Xây dựng trang web đăng ký phòng cho hội thảo khoa học Các nhà khoa học phải đăng ký online trước, tạo cho account sau đăng ký xong thì, họ đăng nhập vào trang web hội nghị để đăng ký phòng, xem tiện ích khác, dịch vụ mà suốt trình lưu trú user dùng Trong lab xây dựng trang Register_room, yêu cầu user phải nhập thông tin sau o Họ tên, đơn vị công tác, địa email (làm username đăng nhập), mật để đăng nhập, ngày check in số ngày ở, chọn loại phòng - Trang web phải có đầy đủ chức validate liệu user nhập vào Sau tất liệu hợp lệ việc đăng ký thành cơng! Hướng dẫn - Xây dựng trang web có dạng sau: CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình 1: Mơ tả control web page - Bảng mô tả web control form Bảng 1: Mô tả control thiết kế web page Tên Kiểu Thuộc tính Giá trị txtHoTen TextBox txtCoQuan TextBox txtEmail TextBox txtMatKhau TextBox TextMode Password txtNLMatKhau TextBox TextMode Password Items {“Phòng đơn”, txtCheckin TextBox txtSoNgay TextBox cbxLoaiPhong DropDownList “Phòng đơi”,”Phòng VIP đơn”, CuuDuongThanCong.com https://fb.com/tailieudientucntt “Phòng VIP đôi”} btnDangKy Button lblThongBao Label rfvHoTen RequiredFieldValidator rfvCoQuan revEmail ControlToValidate txtHoTen ErrorMessage “Nhập họ tên” ControlToValidate txtCoQuan ErrorMessage “Nhập quan” RegularExpressionValidato ControlToValidate txtEmail r ErrorMessage “Nhập địa ValidationExpressio email” n Internet email RequiredFieldValidator address rfvMatKhau RequiredFieldValidator ControlToValidate txtMatKhau ErrorMessage “Nhập mật khẩu” rfvNLMatKha RequiredFieldValidator u ControlToValidate txtNLMatKhau ErrorMessage “Nhập mật lần 2” cmvMatKhau CompareValidator ControlToValidate txtNLMatKhau ErrorMessage “Mật không khớp” cmvCheckin CompareValidator ControlToCompare txtMatKhau ControlToValidate txtCheckin ErrorMessage “Nhập ngày Type checkin” Operator Date DataTypeChec k cmvSoNgay CompareValidator ControlToValidate txtSoNgay ErrorMessage “Nhập số CuuDuongThanCong.com https://fb.com/tailieudientucntt 34 35 datagrid 36 37 38 39 } } // hiển thị kết danh sách hát dgSongs.DataSource = dt.DefaultView; dgSongs.DataBind(); Khai báo trình xử lý kiện click button btnSearch protected void btnSearch_Click(object sender, EventArgs e) { FillDataGrid(); // thực tìm kiếm hiển thị ds hát } Thiết kế lại DataGrid để hiển thị danh sách tên hát Trong datagrid ta hiển thị cột, cột tên hát, cột lại chức “chọn”, Chọn chức Property Builder… cho datagrid, chọn tab Columns Thêm Bound Column kết buộc với field SongNam tên hát 10 CuuDuongThanCong.com https://fb.com/tailieudientucntt Thêm button kểu Select cho chức chọn, khai báo thuộc tính “Command Name” SelectSong 11 CuuDuongThanCong.com https://fb.com/tailieudientucntt Chức “chọn” hát vào danh sách để tạo album, chức chọn user kích vào datagrid liệt kê danh sách hát giao diện Do hát chứa dòng datagrid nên kích chọn vào ta phải biết id hát đó, để làm điều ta thiết lập thuộc tính DataKeyField cho datagrid dgSong với id hát Trong hình thiết kế form ta chọn dgSong thiết lập thuộc tính DataKeyField SongID hình minh họa 12 CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình: Khai báo thuộc tính DataKeyField SongID Ta chứa danh sách ID hát chọn biến đối tượng Session[“SelectedSongs”], dạng ArrayList - Khai báo trình xử lý kiện ItemCommand cho DataGrid, kiện gọi cột dạng button kích 13 CuuDuongThanCong.com https://fb.com/tailieudientucntt Nội dung hàm xử lý kiện ItemCommand DataGrid protected void dgSongs_ItemCommand(object source, DataGridCommandEventArgs e) { // lấy id hát dòng chọn int SongID = Convert.ToInt32(dgSongs.DataKeys[e.Item.ItemIndex]); // xử lý button Select chọn if (e.CommandName == "SelectSong") { // kiểm tra xem có id hát chọn hay không if (Session["SelectedSongs"] != null) { ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"]; 14 CuuDuongThanCong.com https://fb.com/tailieudientucntt if (!SelectedSongs.Contains(SongID)) // chưa có -> thêm SelectedSongs.Add(SongID); } else // khởi tạo session chưa có { ArrayList SelectedSongs = new ArrayList(); SelectedSongs.Add(SongID); Session["SelectedSongs"] = SelectedSongs; } } // hiển thị thông tin số hát chọn lblStatus.Text = "Số hát chọn: " + ((ArrayList)Session["SelectedSongs"]).Count; } Khai báo xử lý user kích vào button “Tạo Album”, button cho phép chuyển user sang trang Album.aspx để thêm album Để gọi chuyển ta dùng: // chuyển hướng sang trang quản lý album Response.Redirect("album.aspx"); Tạo trang Album.aspx có layout sau: Các control page 15 CuuDuongThanCong.com https://fb.com/tailieudientucntt Tên Kiểu Thuộc tính Diễn giải txtAlbumName TextBox Nhập tên album btnCreateAlbum Button Chức tạo album rfvAlbumName RequiredFieldValidator ControlToValidate = txtAlbumName Xác nhận xem user có nhập tên album hay khơng, khơng nhập khơng tạo ErrorMessage=”Phải nhập tên Album” dgSongs DataGrid lblStatus Label DataKeyField = SongID Hiển thị hát chọn trang SongManaging.aspx Hiển thi thông tin: lỗi hồn tất… Khai báo DataGrid dgSongs có cột, cột đầu là: tên hát, tên tác giả, thể loại dạng Bound Column, cột cuối dạng Button Column 16 CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình: khai báo cột tên hát, hiển thị field SongName 17 CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình: khai báo tên tác giả, hiển thị trường ArtisName 18 CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình: Khai báo cột thể loại hiển thị trường GenreName 19 CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình: khai báo cột Xóa, có Command name RemoveSong 10 Tạo hàm FillDataGrid: lấy hát chọn hiển thị lên datagrid protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { FillDataGrid(); } } private void FillDataGrid() { 10 // kiểm tra xem session có tạo chưa 11 if (Session["SelectedSongs"] == null) 12 { 13 lblStatus.Text = "Chưa chọn hát"; 20 CuuDuongThanCong.com https://fb.com/tailieudientucntt 14 15 16 17 18 btnCreateAlbum.Enabled = false; return; } ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"]; 19 // kiểm tra số item chọn 20 if (SelectedSongs.Count < 1) 21 { 22 lblStatus.Text = "Chưa chọn hát"; 23 btnCreateAlbum.Enabled = false; 24 return; 25 } 26 27 // có chọn hát 28 // tạo danh sách id hát 29 string SongIDs=""; 30 foreach (int id in SelectedSongs) 31 SongIDs += id + ", "; 32 // xóa dấu ', cuối 33 SongIDs = SongIDs.Remove(SongIDs.Length - 2, 2); 34 // tạo đối tượng comand, connection, adapter 35 string scnn = ConfigurationManager.AppSettings["ConnectionString"].ToString(); 36 SqlConnection cnn = new SqlConnection(scnn); 37 SqlCommand cmd = new SqlCommand(); 38 cmd.Connection = cnn; 39 cmd.CommandText = "SELECT songid,songname, artistName, genrename FROM songs, artists, genres where songs.artistid = artists.artistid and songs.genreid = genres.genreid and songid in ("+SongIDs+")"; 40 41 SqlDataAdapter da = new SqlDataAdapter(cmd); 42 // tạo bảng lưu liệu 43 DataTable dt = new DataTable(); 44 da.Fill(dt); 45 // fill vào datagrid 46 dgSongs.DataSource = dt.DefaultView; 47 dgSongs.DataBind(); 48 } 11 Khai báo trình xử lý kiện ItemCommand datagrid, chức cho phép user xóa hát danh sách chọn protected void dgSongs_ItemCommand(object source, DataGridCommandEventArgs e) 21 CuuDuongThanCong.com https://fb.com/tailieudientucntt { // chọn cột xóa if (e.CommandName == "RemoveSong" && Session["SelectedSongs"] != null) { ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"]; //lấy id hát int SongID = Convert.ToInt32(dgSongs.DataKeys[e.Item.ItemIndex]); 10 11 12 13 SelectedSongs; 14 15 16 17 } if (SelectedSongs.Contains(SongID)) { SelectedSongs.Remove(SongID); Session["SelectedSongs"] = FillDataGrid(); } } 12 Khai báo trình xử lý kiện click button: “Tạo album” Hàm xử lý sau protected void btnCreateAlbum_Click(object sender, EventArgs e) { if (!IsValid) return; // nế u chứa validation xong // lấy tên album string AlbumName = txtAlbumName.Text.Trim(); // lưu AlbumID int AlbumID=0; // thực thao tác thêm album string scnn = ConfigurationManager.AppSettings["ConnectionString"]; SqlConnection cnn = new SqlConnection(scnn); SqlCommand cmd = new SqlCommand(); cmd.Connection = cnn; cmd.CommandText = "Insert into Albums values(@albumname,@createDate); select MAX(AlbumID) from albums"; // tạo tên album cmd.Parameters.Add("@albumname", SqlDbType.VarChar); cmd.Parameters["@albumname"].Value = AlbumName; // ngày tạo album cmd.Parameters.Add("@createDate", SqlDbType.SmallDateTime); 22 CuuDuongThanCong.com https://fb.com/tailieudientucntt cmd.Parameters["@createDate"].Value = DateTime.Now.ToString(); try { cnn.Open(); AlbumID = Convert.ToInt32(cmd.ExecuteScalar());// thực thi if (AlbumID > 0) // thêm thành công lblStatus.Text = "Thêm album thành công!"; } catch (SqlException ex) { Response.Write(ex.Message); } finally { cnn.Close(); } // thêm thông tin vào bảng AlbumSong cmd.CommandText = "INSERT INTO AlbumSong values(@AlbumID,@SongID)"; cmd.Parameters.Add("@AlbumID", SqlDbType.Int); cmd.Parameters["@AlbumID"].Value = AlbumID; cmd.Parameters.Add("@SongID", SqlDbType.Int); ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"]; try { cnn.Open(); foreach (int id in SelectedSongs) { cmd.Parameters["@SongID"].Value = id; cmd.ExecuteNonQuery(); } } catch (SqlException ex) { Response.Write(ex.Message); } finally { cnn.Close(); } // xóa tất chọn SelectedSongs.Clear(); Session["SelectedSongs"] = SelectedSongs; 23 CuuDuongThanCong.com https://fb.com/tailieudientucntt // cập nhật lại giao diện dgSongs.DataSource = null; dgSongs.DataBind(); FillDataGrid() } Bài 5.2: - Sinh viên bổ sung thêm trang thêm hát, thêm nghệ sỹ, thêm thể loại thêm hát - Xây dựng trang chính, chứa menu o Quản lý hát – Album: gọi trang SongManaging.aspx o Thêm hát o Thêm nghệ sỹ o Thêm thể loại =oOo= 24 CuuDuongThanCong.com https://fb.com/tailieudientucntt ... báo trình xử lý kiện button btnDangKy o Kích đúp vào button “btnDangKy” form => trình xử lý kiện o Hàm thực thi yêu cầu sau: § Kiểm tra xem toàn việc validation liệu thành cơng chưa § Nếu thành... thành bước đăng ký) § - Ngược lại hiển thị lỗi cho user xem Chạy thử web page (F5 Ctrl + F5) o Web page chờ user đăng ký CuuDuongThanCong.com https://fb.com/tailieudientucntt Hình 2: Trang web. .. submit Hình 3: Trang web sau submit có lỗi nhập liệu CuuDuongThanCong.com https://fb.com/tailieudientucntt o Trường hợp submit thành cơng Hình 4: Trang web submit đăng ký thành công Phần mở rộng: