Bài tập lập trình asp.net 5.0

BÀI TẬP LẬP TRÌNH ỨNG DỤNG WEB VỚI ASP.NET VÀ C MỤC LỤC BÀI 1: CÁC ĐIỀU KHIỂN DỮLIỆU . 1 1.1. Tạo thêm các thành phần trong project . 1 1.2. Tạo trang Album các loài hoa. 2 1.3. Tạo trang Xem danh sách Sách theo chủ đề. 2 1.4. Tạo trang Phiếu ý kiến người tiêu dùng. 3 1.5. Tạo trang Danh sách khách hàng. 4 1.6. Tạo trang Danh sách Sách. 4 1.7. Tạo trang Danh sách khách hàng với cột tùy biến. 5 1.8. Tạo trang Thông tin chi tiết sách. 6 1.9. Tạo trang Tổng hợp với cột tùy biến(bài làm thêm) . 7 1.10. Tạo trang Xem danh sách quảng cáo (bài làm thêm). 9 1.11. Tạo trang Cập nhật thông tin Nhà xuất bản. 10 1.12. Tạo trang Giới thiệu sách. 11 1.13. Tạo trang Liệt kê chi tiết sách (bài làm thêm) . 12 1.14. Tạo trang Cập nhật thông tin sách. 13 1.15. Tạo trang Liệt kê sách mới (bài làm thêm). 13 1.16. Tạo trang Xem sách theo chủ đề (bài làm thêm). 14 1.17. Tạo trang Xem thông tin khách hàng. 15 1.18. Tạo trang Xem và cập nhật thông tin nhà xuất bản. 16 1.19. Tạo trangXem chi tiết sách được chọn. 17 1.20. Tạo trang Xem thông tin khách hàng. 18 1.21. Tạo trang Cập nhật khách hàng (bài làm thêm) . 18 BÀI 2: XÂY DỰNG CÁC USER CONTROLS. 21 2.1. Tạo User Control đầu trang TH_HEADER . 22 2.2. Tạo User Control cuối trang TH_FOOTER . 22 2.3. Tạo User Control thực đơn TH_THUCDON . 22 2.4. Tạo User Control chủ đềsách TH_CHUDE . 22 2.5. Tạo User Control sách mới TH_SACHMOI . 23 2.6. Tạo User Control quảng cáo giữa trang TH_QC_BODY . 23 2.7. Tạo User Control danh sách Sách TH_DS_SACH . 24 2.8. Tạo User Control thông tin giỏhàng TH_THONGTIN_GH. 25 2.9. Tạo User Control quảng cáo bên phải trang TH_QC_PHAI . 25 2.10. Tạo User Control sách bán chạy TH_SACH_BANCHAY . 26 BÀI 3: QUẢN LÝ ỨNG DỤNG WEB . 27 3.1. Các xửlý trong trang Default.aspx của bài 2. 27 3.2. Tạo trang Giỏhàng. 28 3.3. Các xửlý tiếp theo trong bài 6.1 . 29 BÀI 4: WEB SERVICES. 31 4.1. Tạo Web Services Ws_Chude. 31 BÀI 5: XÂY DỰNG HOÀN CHỈNH ỨNG DỤNG WEB. 32 5.1. Tạo trang MasterPage.mastercó dạng sau: . 32 5.2. Tạo trang Default02.aspx. 32 Bài tập Lập trình ứng dụng Web với ASP.Net và C Trang 4949 5.3. Tạo trang Hệthống bài tập HP4 LT Web2. 33 5.4. Tạo trang Thay đổi định dạng. 36 BÀI 6: TRIỂN KHAI ỨNG DỤNG WEB. 38 6.1. Tạo ứng dụng web trên IIS: . 38 6.2. Triển khai ứng dụng web:. 38 BÀI 7: BẢO MẬT WEBSITE. 39 7.1. Tạo User và Role: . 39 7.2. Tạo trang Login.aspx: . 40 7.3. Tạo trang Default.aspx. 40 7.4. Tạo trang ChangePass.aspx. 41 7.5. Tạo trang Capnhat_Profile.aspx. 41 BÀI 8: GIỚI THIỆU VÀ SỬDỤNG AJAX . 43 8.1. Tạo trang Pheptinh.aspx. 43 8.2. Tạo trang Monhoc.aspx. 43 8.3. Tạo trang TimKiem_hocvien.aspx. 44 8.4. Tạo trang Nhaxuatban.aspx. 45 8.5. Tạo trang Capnhat_NXB.aspx. 46

Trang 1

227 Nguyễn Văn Cừ - Quận 5- Tp.Hồ Chí Minh

Tel: 38351056 – Fax 38324466 – Email: ttth@t3h.hcmus.edu.vn

BÀI TẬP

CHUYÊN ĐỀ

- XÂY DỰNG ỨNG DỤNG WEB VỚI

ASP.NET 5.0

Trang 2

BÀI 1: Tổng quan về lập trình web

Mục tiêu chính:

 Làm quen với môi trường làm việc với ASP.Net

 Tạo ứng dụng đơn giản

Quy ước viết tắt các điều khiển - prefix (chung):

1.1 Quan át t web ite

- Y u c u Quan át t web ite c l client v erver

Trang 3

BÀI 2: Chọn ôi trường l việc v công

nghệ ây dựng web

Mục tiêu chính:

 Xây dựng một ứng dụng web đơn giản bằng Asp.Net

 Phân biệt và hiểu rõ ý nghĩa các loại đối tượng, thư mục trong một website

Trang 4

 Service References: lưu trữ các service mà Website sẽ thao tác

 Admin: lưu trữ các Web Form của vai trò Admin

 Images: thư mục chứa hình ảnh cho Website

 Jquery: chứa tất cả những file Jquery được sử dụng

 Model: lưu trữ những class định nghĩa model (tương đương với lớp BLL trong Winform)

 Obj:

 Pages: chứa những trang WebForm được sử dụng

 Scripts: nơi lưu trữ JavaScript

 UC: lưu những UserControl được sử dụng

- Thuật giải

 hông c

- Hướng dẫn

 hông c

Trang 5

2.2 Xây dựng Template PhimSite.Master

- Y u c u T trang Master Page ch gia diện ad in: AdminSite.Master

- Hướng dẫn d ng

 Ở trang chủ, người dùng c thể thao tác như sau:

 Đăng nhập/đăng xuất : Click vào menu đăng nhập ở trên cùng

 Đặt mua vé: Chọn phim -> chọn ngày -> chọn giờ (ở cột bên trái)

 Xem thông tin chi tiết của một phim: nội dung chính ở bên phải website

- T tắt y u c u

 Thiết kế gia diện người dùng

Trang 6

 header: tag header

 cphMain: ContentPlaceHolder – dùng để chứa nội dung chính cho các trang con sau này

 footer: tag footer

 hông c

 Học viên liên kết các query và css c n thiết để giúp giao diện đẹp hơn

 Xây dựng nội dung web bằng html và css

2.3 Xây dựng Te plate Ad inSite.Ma ter

- Y u c u T Ma ter Page ch người dùng AdminSite.Master

 hi vào website, người dùng đăng nhập với quyền admin, hệ thống sẽ tự động chuyển sang giao diện quản lý

 Trong giao diện quản lý, admin c thể quản lý phim, quản lý ca chiếu, quản lý người dùng

 Trong từng mục, admin c thể click vào Edit để chỉnh sửa thông tin hoặc Delete để x a thông tin

 Header: tag header HTML

 cphMain: ContentPlaceHolder – dùng để chứa nội dung chính cho các trang con sau này

 Footer: tag footer

 hông c

 Liên kết các query và css c n thiết

 Xây dựng nội dung web bằng html và css

Trang 7

BÀI 3: Thiết kế v l web F r

Mục tiêu chính:

 Sử dụng một số control trong Asp.net

 Sử lý code behind cho các control

3.1 T trang Đ ng k

- Y u c u t trang DangKyTaiKh an.a p

 Nhập thông tin tên tài khoản, email, mật khẩu và xác nhận mật khẩu

 Người dùng click button Đăng ký để đăng ký tài khoản

 Người dùng nhận thông báo về kết quả của việc đăng ký tài khoản

Trang 8

 iểm tra giá trị các ô textbox(không được b trống, mật khẩu và xác nhận mật khẩu phải giống nhau…), nếu hợp lệ thì thực hiện:

 Đăng ký tài khoản

 Xuất thông báo kết quả đăng ký

 Xử lý sự kiện code behind của btnDang y

 Học viên thực hiện trước việc lấy dữ liệu người dùng từ giao diện, ph n xét quyền đăng nhập sẽ

n i rõ hơn vào bài

 iểm tra giá trị các ô textbox(không được b trống…), nếu hợp lệ thì thực hiên:

 Đăng nhập tài khoản

 Xuất thông báo kết quả đăng nhập

 Xử lý sự kiện code behind của btnDangNhap

Trang 9

 Học viên thực hiện trước việc lấy dữ liệu người dùng từ giao diện, ph n Đăng Nhập sẽ n i rõ hơn vào bài

3.3 T trang Thêm mới phim cho Admin

- Y u c u t trang ThemMoiPhim.aspx

 Nhập thông tin về phim muốn thêm

 Thêm hình ảnh của phim

 Click Thêm Phim để lưu vào hệ thống

 Sau đ người dùng sẽ nhận được thông báo kết quả của việc thêm người dùng

Trang 10

 Thông báo kết quả

 iểm tra tính hợp lệ của các điều khiển, nếu hợp lệ thực hiện các việc sau:

 Lưu phim xuống CSDL

 Xuất thông báo kết quả

 Xử lý sự kiện code behind của btnThemPhim

//lấy tên file hình ảnh

var fileName = imgPoster.Src.Split('/').LastOrDefault();

//lấy hình trong fileupload

if (Page.IsValid && FUPoster.HasFile)

{

fileName = "/Images/Phim/Posters/" + FUPoster.FileName;

string filePath = Server.MapPath("~" + fileName);

FUPoster.SaveAs(filePath);

imgPoster.Src = fileName;

}

//thêm phim bằng cách gọi Service

var kq = _phimClient.Them(new Phim()

Trang 11

BÀI 4: T điều khiển dùng chung - Kiể

tra tính hợp lệ của trang web

Mục tiêu chính:

 Hiểu được lợi ích của việc sử dụng User Control

 Biết kiểm tra tính hợp lệ bằng các phương pháp: sử dụng control trong ASP.Net, HTML5…

 Tạo các User Control tương ứng cho các trang đã tạo trước đ Ví dụ: UCDangNhap,

 Tạo l n lượt các User Control và chuyển code giao diện từ trang aspx sang User Control

 Chèn các User Control tương ứng vào các trang



Trang 12

 Không có

 Tạo User Control

 Chọn Web Forms User Control -> đặt tên cho UC và click Add

 Sau khi thực hiện việc chuyển code giao diện, ta chèn UserControl vào trang tương ứng

Kéo – thả

Trang 13

4.2 Kiể tra tính hợp lệ của trang

- Y u c u thực hiện việc kiểm tra tính hợp lệ (validate) của các trang

 hi người dùng b trống các điều khiển, hoặc nhập email không hợp lệ… Form sẽ tự thông báo lỗi cho người dùng

- Tóm tắt y u c u

 Trong các User Control, kéo thả thêm các Control Validate:

Trang 14

-

BÀI 5: Xây dựng trang web c kết n i CSDL

Mục tiêu chính:

 Biết cách kết nối với CSDL

 Thực hiện được nhũng thao tác cơ bản (CRUD) với CSDL

5.1 T trang Default.a p ch người dùng

- Y u c u hiển thị dữ liệu, l ad những phi đang chiếu lên trang chủ

 hi người dùng vào website, trang chủ sẽ tự động load

 Tạo trang Default.aspx trong thư mục Pages sử dụng PhimSite.Master

 Tạo UCDanhSachPhim.ascx: chứa ListView (Danh Sách Sản Phẩm)

 Nhập:

 Không có



Trang 15

 Tạo control ListView và “map” dữ liệu

<asp:ListView ID="lsvDanhSachPhimMoi" DataKeyNames="ID"

< href="<%#: GetUrl( Item.Id) %>" runat="server">

<img width="250" height="150" src="<%#: Item.PosterURL %>"> </a

 </div>

<asp:Label runat="server" ID="lblTenPhim" Text="<%#: Item.Ten

 Code behind để gọi service và load dữ liệu

public IQueryable<PhimModel> DanhSachPhimDangChieu()

{

var dsPhim = _phimClient.DocTheoDangChieu();

var distinctdsPhim = dsPhim.GroupBy(x => x.Ten).Select(y => y.First()); return

distinctdsPhim.Select(TransferHelper.TransferFromPhimToPhimModel).AsQueryable();

}

Trang 16

 Tiếp theo, chèn control dataPager thể thực hiện việc phân trang

<asp:DataPager ID="DataPager1"

PagedControlID="lsvDanhSachPhimMoi" PageSize="4" runat="server"> <Fields>

<asp:NextPreviousPagerField ShowPreviousPageButton="False"

NextPageText=">>" ButtonCssClass="page-filmn"

 Người dùng click vào một phim bất kì trong danh sách phim đang chiếu trong trang

Default.aspx, chi tiết phim sẽ được load và hiển thị cho các phim tương ứng

 Tạo trang ChiTietPhim.aspx trong thư mục Page, sử dụng PhimSite.Master

 Tạo UCChiTietPhim.ascx: chứa FormView (Chi Tiết Sản Phẩm)

 Nhập:

 Mã (Id) của phim cụ thể

 Xuất:

Trang 17

 Nội dung chi tiết của phim tương ứng

 Tương tự, học viên c thể tự tạo giao diện tùy ý cho ph n nội dung bên phải

 Để load được danh sách ca chiếu, chúng ta sử dụng một Control trong ASP.Net - Repeater

<asp:Repeater runat="server" ID="repDanhSachNgay"

SelectMethod="DanhSachNgayTheoPhimChiTietPhim"

ItemType="QLPhim.Model.StringNameClass">

<asp:HiddenField runat="server"

ID="ItemNgay" Value="<%# Item.Value %>" />

<%# Item.GioBatDau %>:00

ID="hdfIdXuatChieu" Value="<%# Item.Id %>" />

ID="hdfGioChieu" Value="<%# Item.GioBatDau %>" />

Trang 18

ID="hdfNgayChieu" Value="<%# Item.Ngay %>" />

<asp:LinkButton ID="lbnDatVe"

runat="server" OnClick="lbDatVe_Click"><img src="/images/seat.png"

alt=""></asp:LinkButton>

 Tạo trang DatVe.aspx trong thư mục Pages sử dụng PhimSite.Master

 Tạo UCDatVe.ascx: chứa Repeater (danh sách ghế)

 Các control:

 Button

 Repeater

 Hidden Field

Trang 19

 Tạo Class DatVeModel chứa thông tin vé đã chọn

public class DatVeModel

{

public int IdPhim { get; set; }

public int IdXuatChieu { get; set; }

public string TenPhim { get; set; }

public string Poster { get; set; }

public string PosterUrl { get; set; }

public int GioChieu { get; set; }

public decimal GiaVe { get; set; }

public string Ngay { get; set; }

}

 Tạo FormView để hiển thị thông tin vé đã chọn ( làm tương tự như FormView của trang

ChiTietPhim.aspx

 Tạo Repeater load danh sách ghế

Trang 20

<asp:HiddenField runat="server" ID="ItemIdGhe" Value="<%#Item.Value %>" />

<asp:Repeater runat="server" ID="repDanhSacGhe"

SelectMethod="DanhSachGhe"

ItemType="QLPhim.Model.GheModel">

<td data-sid="A1" data-type="0" id="seat-A1"

class="seat unavailable ">

 Admin dùng trang này để quản lý phim của rạp

 Bên trái là menu điều hướng, admin c thể quản lý phim, quản lý ca chiếu hoặc quản lý người dùng

 Ở mỗi mục, admin c thể chỉnh sửa hoặc x a thông tin

 Tạo trang Default.aspx trong thư mục Admin sử dụng AminSite.Master

 Tạo UCDanhSachPhim.ascx: chứa GridView (Danh Sách Phim)

Trang 21

 Tạo giao diện GridView

<asp:GridView ID="GridView1" runat="server"

DataKeyNames="Id"

ItemType="QLPhim.Model.PhimModel"

DeleteMethod="XoaPhim"

SelectMethod="DanhSachPhim"

AllowPaging="True" PageSize="5"

AutoGenerateColumns="False" CssClass="table table-hover table-striped table-admin"

CellPadding="4" ForeColor="#333333" GridLines="None">

<asp:BoundField DataField="Id" HeaderText="ID" SortExpression="Id" />

<asp:BoundField DataField="Ten" HeaderText="Tên phim">

</asp:BoundField>

<asp:ImageField DataImageUrlField="PosterUrl" HeaderText="Poster">

</asp:ImageField>

<asp:BoundField DataField="TheLoai" HeaderText hể lo i

</asp:BoundField>

<asp:BoundField DataField="DaoDien" HeaderText o di n

</asp:BoundField>

<asp:BoundField DataField="GioiThieu" HeaderText i i thi u

</asp:BoundField>

<asp:HyperLinkField DataNavigateUrlFields="Id"

DataNavigateUrlFormatString="/Admin/CapNhatPhim.aspx?id={0}"

DataTextFormatString="Edit" HeaderText="Edit" Text="Edit">

</asp:HyperLinkField>

<asp:CommandField HeaderText="Delete" ShowDeleteButton="True">

</asp:CommandField>

</Columns>

<PagerStyle BackColor="#2461BF" CssClass="page-filmn-gird" ForeColor="White"

Trang 22

HorizontalAlign="Center" VerticalAlign="Middle" Width="30px" />

</asp:GridView>

 Code behind để load danh sách phim

public IQueryable<PhimModel> DanhSachPhim()

{

var dsPhim = _phimClient.DocTatCa();

foreach (var item in dsPhim)

 Nhấn sửa để chuyển trạng thái sửa dữ liệu

 Nhấn cập nhật để cập nhật thông tin mới

 Nhấn không để hủy trạng thái cập nhật

 Tạo trang QuanLyCaChieu.aspx trong thư mục Admin sử dụng AdminSite.Master

 Tạo UCDanhSachCaChieu.ascx: chứa GridView (Danh Sách Ca Chiếu)

 Nhập:

Trang 23

 Tạo control GridVew

 Thực hiện Code behind để load danh sách ca chiếu, gọi các service để thực hiện việc Insert, Update, Delete

Trang 24

BÀI 6: Quản l ng d ng Web

Mục tiêu chính:

 Hiểu được cách sử dụng của các file Global.asax, Web.config

 Hiểu được cách truyền biến, liên kết giữa các trang

6.1 T li n kết giữa trang chủ v trang chi tiết phi

- Y u c u Truyền tham số để liên kết giữa trang Default.aspx (trang chủ) với trang chi tiết phim

 Ta tùy chỉnh lại thẻ <a>, gọi hàm GetURL()

<a href="<%#: GetUrl( Item.Id) %>" runat="server">

 B sung code behind

public string GetUrl(int id)

Định dạng
Số trang	33
Dung lượng	1,15 MB