Giáo trình thiết kế web

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP QUẢNG NINH BỘ CÔNG THƯƠNG KHOA CÔNG NGHỆ THÔNG TIN TRƯỜNG QUẢNG NINH BỘĐẠI MÔNHỌC MẠNGCƠNG & CƠNGNGHIỆP NGHỆ PHẦN MỀM GIÁO TRÌNH THIẾT KẾ WEB DÙNG CHO TRÌNH ĐỘ ĐẠI HỌC BÀI GIẢNG THIẾT KẾ WEB QUẢNG NINH - 2019 MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ ASP.NET VÀ C# 1.1 Sự đời NET .4 1.2 .NET FrameWork ? .4 1.3 Giới thiệu ASP.NET 1.4 Cài đặt Web Server IIS .7 1.5 Cài đặt Visual Studio 2010 Ultimate (trên Win 7) .12 1.6 Tạo ứng dụng Website 28 1.7 Phân loại tập tin ASP.NET 30 1.8 Trang ASP.NET 30 1.9 Điều khiển kiện trang ASP.NET 32 1.10 Cơ C# 32 CÂU HỎI ÔN TẬP CHƯƠNG 36 CHƯƠNG 2: ĐIỀU KHIỂN WEB SERVER CONTROL .37 2.1 Lý sử dụng điều khiển Web Server 37 2.2 Các điều khiển Standard Web Server 37 2.3 Điều khiển kiểm tra liệu Validation 42 2.4 Điều khiển FileUpload .54 CÂU HỎI ÔN TẬP CHƯƠNG 58 CHƯƠNG 3: TẠO VÀ SỬ DỤNG USER CUSTOM CONTROL (UCC) .61 3.1 Giới thiệu User Custom Control 61 3.2 Các bước tạo User Custom Control 61 3.3 Ví dụ minh họa tạo UCC 62 CÂU HỎI ÔN TẬP CHƯƠNG 66 CHƯƠNG 4: THIẾT KẾ WEBSITE VỚI MASTERPAGE 67 4.1 MasterPage gì? 67 4.2 Tạo MasterPage 67 CÂU HỎI ÔN TẬP CHƯƠNG 71 CHƯƠNG 5: ASP.NET VÀ CƠ SỞ DỮ LIỆU .72 5.1 Cơ sở liệu SQL Server 72 5.2 Các bước cần thực trước thao tác với sở liệu 78 5.3 Công nghệ ADO.NET 79 5.4 Các lớp thao tác với sở liệu SQL Server 2008 85 5.4.1 Lớp Connection 85 5.4.2 Lớp Command 88 5.4.3 Lớp DataReader 95 5.4.4 Lớp DataTable 98 5.4.5 Lớp DataSet 100 5.4.6 Lớp DataAdapter 100 5.5 Data Binding 103 5.5.1 Giới thiệu Data Binding 103 5.5.2 Dạng gắn kết liệu có lặp lại (Repeated Data Binding) 103 5.6 Các điều khiển Data Source 105 5.6.1 Giới thiệu Data Source Controls 105 5.6.2 Sử dụng SqlDataSource để chọn (select) liệu hiển thị thông qua điều khiển GridView 105 5.6.3 Sử dụng SqlDataSource để cập nhật, xóa liệu thông qua điều khiển GridView 108 5.7 Điều khiển GridView 112 5.7.1 Tổng quan GridView 112 5.7.2 Các mẫu hiển thị cho GridView 114 5.7.3 Tạo cột BoundField thủ công 115 5.8 Các điều khiển hỗ trợ Templates 117 5.8.1 Giới thiệu tổng quan 117 5.8.2 Ví dụ minh họa thiết kế Template cho GridView 118 BÀI TẬP CHƯƠNG 124 CHƯƠNG 6: XÂY DỰNG ỨNG DỤNG WEBSITE BẰNG ASP.NET 129 6.1 Giao diện phía trang chủ 129 6.2 Giao diện phía quản trị 129 6.3 Xây dựng trang đăng nhập 131 CHƯƠNG 1: TỔNG QUAN VỀ ASP.NET VÀ C# 1.1 Sự đời NET Trước ngày nay, lĩnh vực phát triển phần mềm có nhiều (hàng ngàn chí hàng vạn) ngơn ngữ lâp trình sử dụng để phát triển phần mềm (như Delphi, Ada, Cobol, Fortran, Basic, LISP, Prolog, Foxpro, Java, Pascal, C/C++, Visual Basic, VC++, C# ) Mỗi ngôn ngữ có ưu nhược điểm riêng, chẳng hạn Fortran lựa chọn số cho tính tốn khoa học; Prolog lựa chọn tốt để phát triển phần mềm thông minh (AI, Expert Systems…); Java có lợi phát triển ứng dụng mạng, ứng dụng Mobile độc lập hệ điều hành (Write One – Run Everywhere); Visual Basic tỏ dễ học dễ phát triển ứng dụng Winform; C# vượt trội kết hợp sức mạnh C++ dễ dàng Visual Basic… Những ưu điểm có tính đặc thù ngơn ngữ điều khẳng định Tuy nhiên, điều mà thấy rõ khó để tận dụng sức mạnh tất ngơn ngữ lập trình dự án phần mềm, chẳng hạn khó khăn để viết ứng dụng có sử dụng đồng thời ngôn ngữ Visual Basic Java hay Foxpro với Delphi v.v… Nói cách khác, việc “liên thông” ngôn ngữ gần Cũng khác biệt ngôn ngữ lập trình mà việc tiếp cận hay chuyển đổi sang ngơn ngữ lập trình tốn nhiều thời gian (tuy tư tưởng nguyên lý có tương tự nhau) Vì vậy, dự án sử dụng ngơn ngữ lập trình khác chi phí cho chuyển đổi/ học hỏi lớn, gây lãng phí thời gian khơng cần thiết chất lượng phần mềm chắn khơng cao Ngồi ra, với phát triển vũ bão Internet mơ hình phát triển ứng dụng khác xưa Các ứng dụng ngày không chạy riêng lẻ (stand-alone) máy tính PC mà cịn chạy môi trường mạng, cung cấp hay truy cập dịch vụ từ xa (ứng dụng phân tán) Vai trò phần mềm dần chuyển từ chỗ cung cấp chức (Funtional) cụ thể sang cung cấp dịch vụ (Services) Từ hạn chế trình phát triển phần mềm nêu, địi hỏi phải có cách tiếp cận cho tối ưu nhất, vừa đảm bảo tốn chi phí chuyển đổi vừa đảm bảo nhiều người tham gia dự án mà không thiết phải viết ngơn ngữ lập trình, đồng thời ứng dụng phải hoạt động tốt mơi trường mạng Internet Đó lý để Microsoft cho công nghệ phát triển phần mềm NET! Microsoft NET tảng (Platform) phát triển ứng dụng hoàn chỉnh từ trước tới Sự đời Microsoft.NET có tính cách mạng, đem đến cho nhà lập trình phong cách phát triển phần mềm đột phá, khắc phục hầu hết hạn chế trước ngơn ngữ lập trình Việc sử dụng NET khơng giúp phát triển ứng dụng đơn lẻ mà cịn phát triển ứng dụng phân tán qui mô lớn; NET làm giảm thiểu thời gian phát triển ứng dụng, nâng cao rõ rệt chất lượng sản phẩm phần mềm Phiên NET (v 1.0) Microsoft đưa thị trường vào năm 2001 1.2 .NET FrameWork ? NET Framework Microsoft tảng lập trình tập hợp thư viện lập trình cài thêm có sẵn hệ điều hành Windows Nó cung cấp giải pháp thiết yếu cho yêu cầu thơng thường chương trình điện tốn lập trình giao diện người dùng, truy cập liệu, kết nối sở liệu, ứng dụng web, giải thuật số học giao tiếp mạng Ngoài ra, NET Framework quản lý việc thực thi chương trình viết dựa NET Framework người dùng cần phải cài NET Framework để chạy chương trình viết NET Chẳng hạn, để thiết kế trị chơi đua xe, khơng có Framework chuyên dụng cho game, người lập trình game phải tự tạo ra: khung xe, bánh xe, người, đường đi, cây, biển báo tính đến chuyện “lắp ghép” chúng lại với để tạo không gian cho game; với dạng trò chơi này, dùng Framework có sẵn phát triển người lập trình viên cần viết lệnh để lấy chúng từ Framework ghép chúng lại Khơng phải ngơn ngữ lập trình khai thác Framework, muốn sử dụng “vật liệu” Framework, địi hỏi người lập trình viên phải dùng ngơn ngữ lập trình có hỗ trợ cơng nghệ NET VB.NET, C#.NET, ASP.NET Framework có thành phần là: Common Language Runtime (CLR) CLR thành phần kết nối phần khác NET Framework với hệ điều hành CLR chương trình viết NET, không biên dịch mã máy mà dịch ngơn ngữ trung gian Microsoft Intermediate Language (MSIL) Khi chạy chương trình, CLR dịch MSIL mã máy để thực thi tính năng, đảm bảo ứng dụng không chiếm dụng sử dụng tràn lan tài nguyên hệ thống Nó không cho phép lệnh nguy hiểm thi hành Các chức thực thi thành phần bên CLR Class loader, Just In Time compiler, Garbage collector, Exception handler, COM marshaller, Security engine, … Trong phiên hệ điều hành Windows XP.Net Windows 2003, CLR gắn kèm với hệ điều hành Điều đảm bảo ứng dụng viết máy tính bạn chạy máy tính khác mà khơng cần cài đặt NET Framework class library NET Framework class library cung cấp thư viện lập trình cho ứng dụng, sở liệu, dịch vụ web - Base class library – thư viện lớp sở Đây thư viện lớp nhất, dùng lập trình hay thân người xây dựng NET Framework phải dùng để xây dựng lớp cao Ví dụ lớp thư viện String, Interger, Exception, … - ADO.NET XLM Bộ thư viện gồm lớp dùng để xử lý liệu ADO.NET thay ADO để việc thao tác với liệu thông thường Các lớp đối tượng XML cung cấp để bạn xử lý liệu theo định dạng : XML Các ví dụ cho thư viện SqlDataAdapter, SqlCommand, DataSet, XMLReader, XMLWriter, … - ASP.NET Ứng dụng Web xây dựng ASP.NET tận dụng toàn khả NET Framework Bên cạnh phong cách lập trình mà Microsoft đặt cho tên gọi code behind Đây cách mà lập trình viên xây dựng ứng dụng Windows based thường sử dụng – giao diện lệnh tách tiêng Tuy nhiên, bạn quen với việc lập trình ứng dụng web, việc mà bạn giải phóng khỏi lệnh HTML Sự xuất ASP.NET làm cân xứng trình xây dựng ứng dụng Windows Web ASP.Net cung cấp Server Control để lập trình viên bắt kiện xử lý liệu ứng dụng làm việc với ứng dụng Windows Nó cho phép bạn chuyển ứng dụng trước viết chạy Windows thành ứng dụng Web dễ dàng Ví dụ cho lớp thư viện WebControl, HTML Control, … - Web services Web services dịch vụ cung cấp qua Web (hay Internet) Dịch vụ coi Web service không nhằm vào người dùng mà nhằm vào người xây dựng phần mềm Web services dùng để cung cấp liệu hay chức tính tốn - Windows form Bộ thư viện Windows form gồm lớp đối tượng dành cho việc xây dựng ứng dụng Windows based Việc xây dựng ứng dụng loại hỗ trợ tốt từ trước đến công cụ ngôn ngữ lập trình Microsoft Giờ đây, ứng dụng chạy Windows làm việc với ứng dụng Web dựa vào Web service Ví dụ lớp thư viện Form, UserControl, … 1.3 Giới thiệu ASP.NET ASP.NET công nghệ phát triển ứng dụng web, hệ ASP (Active Server Page – Trang web xử lý bên phía máy chủ) ASP.NET thành phần nội (có sẵn) NET Framework Vì tận dụng sức mạnh NET Framework ASP.NET có số ưu điểm chính: - Có thể sử dụng để phát triển ứng dụng web đủ kích cỡ, từ ứng dụng nhỏ ứng dụng toàn doanh nghiệp (Enterprise) - Ứng dụng viết ASP.NET dễ dàng tương thích với nhiều loại trình duyệt khác Nhà phát triển không cần phải quan tâm nhiều đến trình duyệt sử dụng để duyệt website, điều framework tự render mã tương ứng - Khi sử dụng IDE Visual Studio, cách thức lập trình giống hệt lập trình winform - Truy xuất liệu công nghệ ADO.NET có sẵn NET Framework - Chạy ứng dụng cực nhanh chế biên dịch Cached - Có thể tăng tốc ứng dụng cách Cache điều khiển, trang - Bảo mật vượt trội - Tốn dòng lệnh so với ASP/PHP/Perl thực cơng việc - Dễ dàng bảo trì dễ đọc Code Giao diện tách biệt Điều giúp cho tính chun biệt hóa cao (Một người lo code phần xử lý nghiệp vụ, người khác lo code phần giao diện v.v…) - ASP sử dụng ngơn ngữ lập trình VB.NET C# hai để phát triển ứng dụng * Môi trường phát triển ứng dụng ASP.NET - Mơi trường máy tính độc lập (một máy tính đóng vai trò Client đồng thời Server) Sinh viên sử dụng môi trường để phát triển ứng dụng ASP.NET - Môi trường mạng LAN - Môi trường mạng Internet * Phát triển ứng dụng ASP.NET cần cài đặt thành phần sau: - Bước 1: Cài đặt Web Server IIS (có sẵn HĐH Windows) - Bước 2: Cài đặt SQL Server 2008 Express (bản miễn phí) - Bước 3: Cài đặt Visual Studio 2010 (thông thường cài đặt Full cài Visual Studio 2010 có kèm theo cài đặt phần SQL Server 2008 Express, để sử dụng SQL Server 2008 Express cần tiến hành cài thêm SQL Server 2008 Express vào, không cần phải cài riêng bước 2) Các phần phía hướng dẫn thực Bước 1,3, Bước bao gồm Bước 1.4 Cài đặt Web Server IIS 1) Cài đặt IIS * Cài đặt Web Server IIS Windows 8.1 - Trên Charm chọn Search, gõ Programs and Features - Trong cửa sổ Programs and Features Click Turn Windows features on or off - Mở rộng Internet Information Service Trong có phần, bạn cần quan tâm Web Management Tools & World Wide Web Services Mở rộng nhánh tick chọn vào checkbox (Chú ý: nên chọn hết để sau khỏi công không chạy) - Nhấn OK chờ vài phút để hệ thống cập nhật lại Khởi động lại máy tính bạn cần 2) Kiểm tra kết cài đặt IIS - Bạn mở trình duyệt lên gõ: http://localhost http://127.0.0.1 Nếu trình duyệt xuất xin chúc mừng, bạn cài đặt thành cơng (Hình bên IIS 8.5 Windows 8.1, bạn khác chút) - Localhost địa máy cục mà bạn làm việc Nếu máy bạn kết nối vào mạng LAN có địa IP, bạn dùng địa thay cho localhost - Khi gõ //localhost, bạn thấy địa tự động đổi thành: http://localhost HTTP giao thức mặc định dùng Internet Vì HTTP giao thức thuộc TCP/IP, bạn cần có địa IP để máy tính khác mạng truy cập đến trang web bạn - Sau cài đặt Web Server, mặc định ổ đĩa C:\ có sẵn thư mục C:\inetpub\wwwroot Đây thư mục mà Web Server mặc định ánh xạ vào //localhost, đó, trang web đặt wwwroot truy cập máy tính khác 3) Cấu hình IIS Cấu hình IIS Windows 8.1 Mở Control Panel, chọn mục Administrative Tools, Click chọn Internet Information Services (IIS) Manager ==> Thêm trang khởi chạy cho ứng dụng Web, chẳng hạn ứng dụng ASP.NET thường có trang Default.aspx, muốn chạy ứng dụng Web trang chạy đầu tiên, tiến hành qua bước sau: - Click chọn tên Server hình server NGUYENNGOC - Click mục Default Document, cửa sổ Default Document, click chuột phải vào vùng trống, chọn Add 5.8.2 Ví dụ minh họa thiết kế Template cho GridView (Đối với điều khiển DataList thực điều khiển GridView) Ví dụ minh họa: Sử dụng điều khiển GridView thiết kế Template hiển thị tất sách với định dạng hình => Các bước thực - Tạo điều khiển SqlDataSource, kết nối điều khiển đến CSDL SachOnline, thực chọn tất liệu bảng Sach CSDL - Tạo điều khiển GridView, nguồn liệu cho GridView từ điều khiển SqlDataSource - Tiến hành thiết kế Template cho GridView sau: - Tạo điều khiển GridView Cho Witdh:100%, sau chọn Edit Columns , chọn TemplateField nhấn OK + Chọn tiếp Edit Templates + Được hình + Tạo bảng GridView hình + Thêm điều khiển ảnh Image + Chon Edit DataBindings… cho điều khiển ảnh + Buộc trường “TenFileAnh” cho điều khiển ảnh hình + Dịng cột thứ hai chứa tên sách Chèn HyperLink, lựa chọn Text gõ hình Tại mục NavigateUrl gõ hình + Thiết cho dịng + Tiếp theo: Lấy liệu từ bảng sách, sau cho nguồn liệu GridView liệu lấy Chú ý: DSSach ID điều khiển SqlDataSource + Kết hiển thị GridView + Kết chạy trình duyệt sau thiết kế BÀI TẬP CHƯƠNG Các tập chương sử dụng CSDL “SachOnline” tạo mục 5.1 Bài - Xây dựng ứng dụng “WebSach”, trang Default.aspx có giao diện hình - Nếu người dùng nhập vào tên sách cần tìm hộp văn bản, click nút ”Tìm sách” trang ”Defauld.aspx” thực số thao tác sau: + Nếu không nhập hiển thị tồn sách có CSDL sau: + Nếu nhập vào tên sách, sách khơng có sở liệu, trang ”Default.aspx” hiển thị sau: + Nhập xác tên sách, hiển thị sau + Nếu không nhớ tên sách xác, nhập vào phần tên sách, hiển thị sau: Bài - Xây dựng ứng dụng “WebSach”, trang Default.aspx có giao diện hình - Hộp văn Mã loại bị vơ hiệu hóa, GridView hiển thị tồn thể loại sách có bảng TheLoai - Khi gõ vào hộp văn “Tên loại” nhấn nút “Thêm”, kết hiển thị hình Bài - Xây dựng ứng dụng “WebSach”, trang Default.aspx có giao diện hình - Khi hiển thị: + TextBox: Mã loại, Tên loại bị vơ hiệu hóa + Một GridView hiển thị tất thể loại sách bảng TheLoai - Khi Click vào nút “Chọn”, mục chọn hiển thị hộp TextBox: Mã loại, Tên loại hình Bài - Xây dựng ứng dụng “WebSach”, trang Default.aspx có giao diện hình + Điều khiển DropDownList, hiển thị tất thể loại sách có bảng TheLoai Dòng DropDownList hiển thị dòng chữ “Chọn sách theo thể loại để xem”, dòng hiển thị tên thể loại bảng TheLoai + Điều khiển GridView hiển thị sách có CSDL - Khi chọn chủ đề Sách để xem hiển thị sau Bài - Xây dựng ứng dụng “WebSach”, trang Default.aspx có giao diện hình - Thực yêu cầu sau: + Hiển thị thông tin tất loại sách ứng dụng điều khiển GridView + Các TextBox bị vơ hiệu hóa + Button “Thêm mới” kích hoạt cho phép thêm thơng tin sách + Button “Lưu”, “Bỏ qua” bị vơ hiệu hóa - Khi Button “Thêm mới” nhấn + Các TextBox kích hoạt cho phép nhập thơng tin + Button “Lưu” kích hoạt cho phép lưu thơng tin + Button “Bỏ qua” kích hoạt cho phép bỏ qua thao tác Thêm + Button “Thêm mới” bị vô hiệu hóa - Khi Button “Lưu” nhấn: + Tất liệu nhập vào TextBox lưu vào bảng Sach CHƯƠNG 6: XÂY DỰNG ỨNG DỤNG WEBSITE BẰNG ASP.NET 6.1 Giao diện phía trang chủ Ứng dụng Website SachOnline có phần: phần giao diện phía trang chủ phần giao diện phía quản trị Xây dựng giao diện phía trang chủ hình sau: - Menu thể loại sách lấy từ bảng TheLoai CSDL SachOnline - Chọn thể loại sách “Tin học” hiển thị sách tương ứng với thể loại - Chọn thể loại sách “Ngoại ngữ” hiển thị sách tương ứng với thể loại - Chọn thể loại sách “Kinh tế” hiển thị sách tương ứng với thể loại - Chọn thể loại sách “Văn học” hiển thị sách tương ứng với thể loại 6.2 Giao diện phía quản trị Xây dựng giao diện phía quản trị hình sau: - Khi nhấn vào liên kết “Quản lý thể loại”, xuất trang sau cho phép quản trị thể loại: - Khi nhấn vào liên kết “Quản lý sách”, xuất trang sau cho phép quản trị sách: - Khi nhấn vào liên kết “Quản lý người dùng”, xuất trang sau cho phép quản trị người dùng: - Khi nhấn vào liên kết “Đăng xuất” điều hướng đến trang Default.aspx 6.3 Xây dựng trang đăng nhập Xây dựng trang đăng nhập hình Khi người dùng nhập tên đăng nhập mật có bảng NguoiDung CSDL SachOnline, cho đăng nhập vào trang quản trị ... System.Collections; using System .Web; using System .Web. Security; using System .Web. UI; using System .Web. UI.WebControls; using System .Web. UI.WebControls.WebParts; using System .Web. UI.HtmlControls; public... chạy Windows thành ứng dụng Web dễ dàng Ví dụ cho lớp thư viện WebControl, HTML Control, … - Web services Web services dịch vụ cung cấp qua Web (hay Internet) Dịch vụ coi Web service không nhằm vào... cầu giáo viên - Khởi động Visual studio, nhận biết số thành phần Visual studio 3) Tạo ứng dụng Website - Tạo thư mục theo đường dẫn sau: D:\WebASP\WebVD - Tạo ứng dụng Website lưu vào thư mục WebVD,