Cách thức thực thi một trang web động

Cách thức thực thi trang web động Cách thức thực thi trang web động Bởi: Khoa CNTT ĐHSP KT Hưng Yên Thực thi bên phía máy chủ với ASP.NET Đối với trang ASP.NET, chế xử lý giống mô tả trên, tức theo mơ hình xử lý bên phía server Nhưng có bổ sung thêm tính Compile and Cache: Giải thích chế xử lý trên: 1/13 Cách thức thực thi trang web động - Bước 1: Người lập trình phải tạo trang ASPX (giả sử tên trang abc.aspx) đặt vào thư mục web web server (có tên www.server.com) Trên địa trình duyệt, người dùng nhập trang www.server.com/Default.aspx - Bước 2: Trình duyệt gửi yêu cầu tới server với nội dung: ”Làmơngửichotơitrang abc.aspxthìtốt!” - Bước 3: web server biên dịch code trang aspx (bao gồm mã code vb.net/ c# - gọi code behind hay code file) thành class - Bước 4: Lớp sau biên dịch thực thi - Bước 5: trả kết cho trình duyệt Riêng với ASP.NET việc biên dịch thực sau: Môi trường xây dựng Một điều thật tuyệt vời Visual Studio sử dụng trình IDE chung cho tồn ngơn ngữ lập trình (ASP.NET, VB.NET, C#,…) Điều đảm bảo tính qn cho ngơn ngữ NET, giúp bạn cần “Học lần áp dụng nơi” Tr o n g đó: C ửa s ổ giao d i ện c ủ a mô i t r ờng phá t tr i ể n tích h ợ p Tab Design: để hiển thị trang web chế độ Design, tức cho phép sửa chữa nội dung trang web trực quan 2/13 Cách thức thực thi trang web động M trang c hế độ Design • Tab Source: Mở trang chế độ mã nguồn HTML Tại người dùng soạn thảo trực tiếp thẻ HTML M trang c hế độ Source Tab Split: Cho phép xem trang web đồng thời hai chế độ 3/13 Cách thức thực thi trang web động M trang c hế độ kết h ợp, v ừa xem code HTML v a xem Design M c ửa s ổ s oạn Code (C#, VB.NET Ngồi thao tác trực tiếp thơng qua hệ thống menu, nút lệnh, người dùng cịn sử dụng tổ hợp phím tắt (Mở menu bar xem tổ hợp phím tắt bên cạnh) Ví dụ: Shift+F7 để xem chế độ Design, F7 xem chế độ Code, F4 Focus tới Properties… 4/13 Cách thức thực thi trang web động Giao d iệ n c h ệ th ố ng IDE Cách thức xây dựng trang web động đơn giản Để tạo trang web động đơn giản cần tối thiểu sở liệu Access sql server file database… Sau việc ta kết nối website với Database để thực chức cập nhật sửa xóa thơng tin Chúng ta bắt đầu xây dựng trang web động đơn giản với ASP.NET Ví dụ: Ta có sở liệu Nhanxet tập hợp tất lời nhận xét q trình học mơn cơng nghệ web thực Chương trình hiển thị tất lời nhận xét hộp thoại cho phép người dùng thêm nhận xét Cơ sở liệu xây dựng nên visual studio 2008 gồm database có tên nhanxet.mdf gồm table NX(manhanxet (numberic),noidungnhanxet (nvachar(500))) Các bước thực hiện: 5/13 Cách thức thực thi trang web động Bước 1: Tạo ứng dụng web Mở Visual studio 2008 chọn File/New/Web site… Sau bạn chọn Language C#, chọn ứng dụng ASP.NET web site đặt tên ứng dụng nhanxet Bước 2: Tạo sở liệu • Chọn Add new item • Chọn SQL server database đặt tên cho sở liệu nhanxet chọn Add sau chọn yes • Click phải vào table data connection cửa số server explorer chọn add new table • Tạo bảng nhanxet cho trường manhanxet tự động tăng đơn vị ta thêm liệu vào bảng: 6/13 Cách thức thực thi trang web động • Để hiển thị nội dung nhận xét kéo thẳng bảng nhận xét vào phần Design trang Default.aspx sau tiến hành tơ điểm cho Gridview • Tiến hành chỉnh sửa Gridview phần Header: 7/13 Cách thức thực thi trang web động • Sau tiến hành chỉnh sửa ta thêm vào điêu khiển TextBox nút Button hình vẽ sau: 8/13 Cách thức thực thi trang web động • Tồn việc thiết kế hồn tất thêm điều khiển vào Gridview chỉnh sửa thơng tin xóa thông tin: 9/13 Cách thức thực thi trang web động • Chúng ta tiến hành viết code ta click kép vào hình viết kiện Page load (khi vào trang web) nội dung sau: using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; public partial class _Default : System.Web.UI.Page 10/13 Cách thức thực thi trang web động { protected void Page_Load(object sender, EventArgs e) { GridView1.DataBind(); } } • Tiếp theo viết thêm kiện thêm thông tin: using System; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Data.Sql; using System.Data.SqlClient; public partial class _Default : System.Web.UI.Page { 11/13 Cách thức thực thi trang web động protected void Page_Load(object sender, EventArgs e) { GridView1.DataBind(); } protected void Button1_Click(object sender, EventArgs e) { string = ConfigurationManager.ConnectionStrings[ "nhanxetConnectionString1"].ConnectionString; SqlConnection cn = new SqlConnection(con); cn.Open(); SqlCommand cmd = new SqlCommand( "insert into nhanxet(noidungnhanxet) values('" + TextBox1.Text + "')", cn); cmd.ExecuteNonQuery(); cmd.Dispose(); cn.Close(); GridView1.DataBind(); } } • Chúng ta hồn thành xong trang web tập hợp nhận xét học viên tham gia môn cơng nghệ web khởi động website phím F5 nhấn vào nút start 12/13 Cách thức thực thi trang web động 13/13 ... Focus tới Properties… 4/13 Cách thức thực thi trang web động Giao d iệ n c h ệ th ố ng IDE Cách thức xây dựng trang web động đơn giản Để tạo trang web động đơn giản cần tối thi? ??u sở liệu Access sql... Header: 7/13 Cách thức thực thi trang web động • Sau tiến hành chỉnh sửa ta thêm vào điêu khiển TextBox nút Button hình vẽ sau: 8/13 Cách thức thực thi trang web động • Tồn việc thi? ??t kế hồn... Design: để hiển thị trang web chế độ Design, tức cho phép sửa chữa nội dung trang web trực quan 2/13 Cách thức thực thi trang web động M trang c hế độ Design • Tab Source: Mở trang chế độ mã nguồn