Thực hành Hệ thống thông tin - Kết nối dữ liệu SQL với Ứng dụng Web ASP.NET

Nội dung text: Thực hành Hệ thống thông tin - Kết nối dữ liệu SQL với Ứng dụng Web ASP.NET

1. Các kiến thức sinh viên đạt được • Ôn lại kiến thức SQL + Viết stored procedure • Có kiến thức cơ bản nhất về ASP.NET • Tạo được Web User Control • Có kiến thức về kết nối CSDL bằng Web Application • Gọi stored procedure từ Ứng dụng Web Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 2
2. 1. Chuẩn bị dữ liệu Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 4
3. 1. Chuẩn bị dữ liệu - sp_web_MSSV_DSPhongBan Tạo store lấy danh sách các phòng ban trong hệ thống. Thông tin xuất ra theo đúng thứ tự cột như hình dưới & được sắp thứ tự theo Mã phòng ban của công ty. • Tên Store: sp_web_MSSV_DSPhongBan • Tham số: (không có) Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 6
4. 1. Chuẩn bị dữ liệu - sp_web_MSSV_ThemPhongBanMoi Tạo store thêm 1 phòng ban mới từ tên phòng và mã trưởng phòng. Mã phòng được tạo theo nguyên tắc số thứ tự kế tiếp trong mã phòng, ngày nhân chức là ngày hiện hành của hệ thống • Tên Store: sp_web_MSSV_ThemPhongBanMoi • Tham số: @TenPhg, @MaTruongPhong Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 8
5. 2. Tạo project Web • Sử dụng Visual Studio (support Web ASP.NET) tạo project mới • Chọn loại Project: C# - ASP.NET Application – Empty Web Application • Đặt tên: Topic11-Web-MSSV-VSxxxx. (MSSV: Mã số sinh viên của sinh viên, xxxx phiên bản của Visual studio) Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 10
6. 3. Master page • Master Page là một công nghệ của ASP.NET nhằm tạo ra khung sườn chung cho các trang web trong 1 Website. Các trang Web được kế thừa từ Master Page thì sẽ có cấu trúc (layout) giống nhau, một số vùng giống nhau và một số vùng riêng. • Một Website thường có 2 hay 3-4 Master Page. • Từ phiên bản .NET Framework 4.0, còn có khái niệm Nested Master Page để tạo Master Page kế thừa từ 1 Master Page khác. Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 12
7. 3. Master page – Cấu trúc chung Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 14
8. 3. Master page – Layout Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 16
9. • Chuyển qua chế độ Source view Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 18
10. • Chuyển qua chế độ Design view Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 20
11. 4. Menu + WUC • Từ Project, thêm một item mới loại Site Map. Đặt tên: Web.Sitemap Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 22
12. 4. Menu + WUC • Mở lại Master Page (MainSite.Master) Chuyển qua chế độ Design view, kéo và thả Web User Control (WUC_MainMenu) vào vùng để hiện thị menu tương ứng. Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 24
13. 5. Phát sinh trang • Cần phát sinh các trang web ở các vị trị tương ứng với menu đã tạo • Tạo thư mục Admin ở thư mục gốc • Phát sinh trang: • default.aspx • aboutus.aspx • Admin / ManagePhongBan.aspx • Từ project, tạo item mới thuộc loại: Web Form With Master Page Chọn master page đã tạo ở bước trước. Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 26
14. 5. Phát sinh trang • Chỉnh sửa lại Master Page, chỉnh sửa: • Bỏ dòng chữ: Main Contain • Footer “© 2015 – MSSV Họ tên sinh viên – CNTN 2013 KHTN” (lưu ý, gõ ở chế độ Source view) • Bổ sung vào style .auto-style5LeftMenu, .auto-style6MainContain: vertical-align:top; (để dữ liệu hiện thị gióng theo Top) • Sinh viên có thể bổ sung hình logo (bằng cách kéo thả logo từ project vào hoặc sử dụng control Image) Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 28
15. 5. Phát sinh trang • Sinh viên bổ sung nội dung cho menu Trang chủ & Giới thiệu • Mở file: default.aspx | aboutus.aspx ở chế độ Design view, soạn thảo nội dung như soạn thảo trong MS Word, định dạng và lưu lại. Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 30
16. 6. WUC Quản lý PhongBan • Từ Project, tạo một Web User Control với tên WUC_QLPhongBan • Mở file ManagePhongBan.aspx trong chế độ Design view, kéo thả Web User Control vừa tạo vào trang này (ở vùng Main Contain) • Build & Run. Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 32
17. 6. WUC Quản lý PhongBan • Để tái sử dụng ConnectionString trong các kết nối đến CSDL, sử dụng thông số chung lưu trong file Web.config (nếu chưa có file này thì thêm một file mới thuộc loại: Web Config) • Trong file Web.config, dưới node , thêm một node con . Trong node con mới thêm vào, bổ sung một chuổi kết nối mới Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 34
18. 6. WUC Quản lý PhongBan • Build & Run • Test tính năng của trang Quản lý phòng ban Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 36
19. 6. WUC Quản lý PhongBan • Bắt sự kiện cho button Thêm mới • Sinh viên viết code C# gọi Store để thêm 1 phòng ban mới. • Lưu ý: Xem thêm lớp Parameter của đối tượng SqlCommand (Google !!!) Lương Vĩ Minh - lvminh@gmail.com 5/11/2015 38