Giáo trình Xây dựng Ứng dụng Web - Khoa CNTT Trường CĐ Kinh tế Kỹ thuật TP.HCM

Giáo trình xây dựng ứng dụng web cho hệ thống thông tin Cao đẳng. Bao gồm kiến thức nền tảng, kỹ thuật lập trình và quy trình phát triển phần mềm web.

• Tác giả: Nguyễn Gia Quang Đăng
• Trường học: Trường Cao đẳng Kinh tế Kỹ thuật Thành phố Hồ Chí Minh
• Chuyên ngành: Hệ thống thông tin
• Đề tài: Xây dựng ứng dụng web
• Loại tài liệu: Giáo trình
• Năm xuất bản: 2020
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan giáo trình xây dựng ứng dụng web ngành hệ thống thông tin

Giáo trình xây dựng ứng dụng web ngành hệ thống thông tin là tài liệu đào tạo chính thức của Trường Cao đẳng Kinh tế Kỹ thuật Thành phố Hồ Chí Minh. Giáo trình được biên soạn năm 2020, dành cho trình độ cao đẳng chuyên ngành Hệ thống thông tin thuộc Khoa Công nghệ thông tin. Nội dung cung cấp kiến thức nền tảng về ba ngôn ngữ lập trình cốt lõi: HTML, JavaScript và C#. HTML đóng vai trò là ngôn ngữ đánh dấu siêu văn bản, tạo cấu trúc cho mọi trang web. JavaScript xử lý logic phía trình duyệt, tạo tương tác động cho người dùng. C# đảm nhận vai trò lập trình phía máy chủ, truy xuất dữ liệu và xử lý nghiệp vụ. Giáo trình áp dụng phương pháp học đi đôi với hành. Sinh viên được thực hành trực tiếp trên môi trường web để nắm vững kỹ năng. Từ nền tảng này, người học có thể tự mở rộng kiến thức chuyên sâu hơn. Giáo trình cũng nhấn mạnh tính tương thích đa nền tảng của HTML. Mọi văn bản tuân thủ tiêu chuẩn HTML đều hiển thị được trên bất kỳ trình duyệt nào.

1.1. Mục tiêu đào tạo của giáo trình xây dựng ứng dụng web

Giáo trình đặt mục tiêu giúp sinh viên nắm vững kiến thức nền tảng về ngôn ngữ HTML, JavaScript và C#. Người học được trang bị kỹ năng viết ứng dụng web chạy trực tuyến trên mạng internet. Giáo trình hướng đến việc sinh viên vận dụng được các kỹ thuật phổ biến trong phát triển web. Ngoài ra, tài liệu khuyến khích khả năng tự học để tiếp cận kiến thức chuyên sâu hơn. Phương pháp lập trình trên ngôn ngữ C# truy xuất môi trường web được ưu tiên sử dụng. Qua đó, sinh viên nắm bắt kỹ năng thực hành cơ bản để áp dụng vào thực tiễn công việc.

1.2. Cấu trúc nội dung chính của giáo trình

Giáo trình được chia thành nhiều chương, mỗi chương tập trung vào một chủ đề cụ thể. Chương đầu tiên giới thiệu tổng quan về nền tảng web và ngôn ngữ HTML. Các chương tiếp theo trình bày cách định dạng trang web với CSS và lập trình JavaScript cơ bản. Nội dung CSS bao gồm ba loại style chính: Inline, External và Internal. Phần JavaScript giới thiệu cú pháp, hàm, biến và các hàm có sẵn như eval, parseInt, parseFloat. Giáo trình còn hướng dẫn cách sử dụng C# để xây dựng ứng dụng web động phía máy chủ.

II. Các vấn đề và thách thức trong xây dựng ứng dụng web hiện đại

Xây dựng ứng dụng web đối mặt với nhiều thách thức kỹ thuật trong quá trình phát triển. HTML ban đầu không được thiết kế để định dạng trang web. Ngôn ngữ này chỉ dùng để đánh dấu nội dung văn bản. Các thẻ định dạng như thẻ font trong HTML phiên bản 3.2 gây ra nhiều rắc rối cho lập trình viên. Website có nhiều font, màu nền và phong cách khác nhau khiến việc bảo trì mã nguồn trở nên phức tạp. Việc viết lại code cho toàn bộ trang web là quá trình dài và tốn nhiều công sức. Sự phát triển không ngừng của internet cũng tạo áp lực lên tiêu chuẩn HTML. Các phiên bản HTML liên tục ra đời để đáp ứng yêu cầu mới. Từ HTML 2, HTML 2+, HTML 3 đến HTML 5 với nhiều cải tiến vượt bậc. Việc quản lý样式 trên nhiều trang web cùng lúc cũng là bài toán nan giải. Nếu không có giải pháp phù hợp, thời gian tải trang sẽ tăng lên đáng kể. Người học cần hiểu rõ bản chất vấn đề trước khi tìm giải pháp.

2.1. Hạn chế của HTML trong định dạng giao diện web

2.2. Thách thức về tương thích đa nền tảng và trình duyệt

III. Giải pháp và phương pháp xây dựng ứng dụng web hiệu quả

CSS ra đời năm 1996 do tổ chức W3C phát triển để giải quyết vấn đề định dạng web. CSS tách biệt phần nội dung HTML khỏi phần trình bày giao diện. Phương pháp này giúp lập trình viên dễ dàng quản lý và bảo trì code. Có ba loại CSS chính được giới thiệu trong giáo trình. Style External lưu trong file riêng biệt, áp dụng được cho nhiều trang web. Cách này cải thiện thời gian tải trang đáng kể vì trình duyệt chỉ cần tải file CSS một lần. Style Internal được tải mỗi khi trang web refresh, phù hợp cho trang riêng lẻ. Style Inline áp dụng trực tiếp lên từng phần tử HTML. JavaScript bổ sung khả năng xử lý logic phía client cho ứng dụng web. Hàm eval chuyển đổi chuỗi thành biểu thức số học. Các hàm parseInt và parseFloat xử lý chuyển đổi kiểu dữ liệu. C# đảm nhận xử lý phía server, kết nối cơ sở dữ liệu và sinh nội dung động.

3.1. Sử dụng CSS để quản lý giao diện ứng dụng web

3.2. Ứng dụng JavaScript và C trong phát triển web

IV. Kết luận và ứng dụng thực tế của giáo trình xây dựng web

Giáo trình xây dựng ứng dụng web ngành hệ thống thông tin cung cấp nền tảng kiến thức vững chắc. Sinh viên được trang bị đầy đủ kỹ năng từ HTML, CSS, JavaScript đến C#. Phương pháp học tập kết hợp lý thuyết và thực hành giúp người học tiếp thu hiệu quả. Giáo trình nhấn mạnh tính ứng dụng thực tế trong từng bài học. Sinh viên có thể xây dựng được ứng dụng web chạy trực tuyến ngay sau khi hoàn thành khóa học. Kiến thức nền tảng này mở ra cơ hội học tập chuyên sâu hơn về phát triển web. Các công nghệ như HTML 5, CSS 3 và framework JavaScript hiện đại đều xây dựng trên nền tảng này. Giáo trình cũng nhấn mạnh tầm quan trọng của tiêu chuẩn web quốc tế. Việc tuân thủ tiêu chuẩn đảm bảo website hoạt động tốt trên mọi nền tảng. Đây là tài liệu hữu ích cho sinh viên ngành hệ thống thông tin và người mới bắt đầu học lập trình web.

4.1. Ứng dụng thực tế của kiến thức xây dựng web

4.2. Hướng phát triển và mở rộng kiến thức web

Trích đoạn nội dung tài liệu

Chương 1: Giới thiệu chung dùng mà không cần tương tác với web server nữa. Các phần mềm tăng tốc HTTP trên cloud server có thể kể đến Varnish, Squid hay Nginx. Hình 1-3 Mô hình Accelertor Mô hình này rất hữu ích trong việc cải thiện hiệu suất các website có nội dung nặng hay có nhiều tài nguyên được truy cập thường xuyên, do cho phép giảm tải CPU trên web server thông qua bộ nhớ cache và nén. HTTP accelerator server có thể sử dụng như một load balancer server, và các phần mềm caching cũng được dùng để bảo vệ hệ thống chống lại các cuộc tấn công DDOS.

Hai điểm đáng chú ý khi sử dụng HTTP accelerator đó là cần điều chỉnh để có được hiệu suất tốt nhất, và nếu tỷ lệ tái sử dụng bộ nhớ cache thấp thì hiệu suất cloud server có thể bị suy giảm. Cấu hình Master-Slave Database Replication Nếu như hệ thống của bạn có số yêu cầu đọc thực hiện nhiều hơn số yêu cầu ghi (ví dụ như CMS) thì có thể cấu hình master-slave database replicate để cải thiện hiệu suất. Mô hình này đòi hỏi một master database và một hay nhiều slave database. Yêu cầu cập nhật dữ liệu sẽ được gửi cho master và các yêu cầu đọc dữ liệu sẽ được phân phối trên các slave.

KHOA CÔNG NGHỆ THÔNG TIN 16 Chương 1: Giới thiệu chung Hình 1-4 cấu hình master-slave database replicate Ưu điểm của mô hình này là cải thiện hiệu suất đọc dữ liệu từ database của ứng dụng. Tuy nhiên ứng dụng cần xác định nút database nào để ghi vào nút nào để đọc. Ngoài ra việc cập nhật dữ liệu cho các slave là không đồng bộ nên có khả năng dữ liệu ứng dụng đọc được không phải là mới nhất. Điểm yếu của mô hình này là không có phương án dự phòng cho trường hợp master bị lỗi, nếu như xảy ra điều này thì quá trình cập nhật dữ liệu sẽ bị gián đoạn cho đến khi master phục hồi.

KHOA CÔNG NGHỆ THÔNG TIN 17 Chương 2: Định dạng trang web với CSS CHƯƠNG 2: ĐỊNH DẠNG TRANG WEB VỚI CSS Giới thiệu: Làm quen với các lệnh trong CSS định dạng bố cục website. Mục tiêu: - Trình bày được các thành phần của mô hình 3 lớp trong thiết kế Web - Trình bày được các kiểu CSS - Sử dụng được CSS để thiết kế trang Web Nội dung chính: 2. Mô hình 3 lớp trong thiết kế Web 3-tiers là một kiến trúc kiểu client/server mà trong đó giao diện người dùng (UI-user interface), các quy tắc xử lý (BR-business rule hay BL-business logic), và việc lưu trữ dữ liệu được phát triển như những module độc lập, và hầu hết là được duy trì trên các nền tảng độc lập, và mô hình 3 tầng (3-tiers) được coi là một kiến trúc phần mềm và là một mẫu thiết kế. Đây là kiến trúc triển khai ứng dụng ở mức vật lý .Kiến trúc gồm 3 module chính và riêng biệt : • Tầng Presentation: hiển thị các thành phần giao diện để tương tác với người dùng như tiếp nhận thông tin, thông báo lỗi, … • Tầng Business Logic: thực hiện các hành động nghiệp vụ của phần mềm như tính toán, đánh giá tính hợp lệ của thông tin, … Tầng này còn di chuyển, xử lí thông tin giữa 2 tầng trên dưới.

• Tầng Data: nơi lưu trữ và trích xuất dữ liệu từ các hệ quản trị CSDL hay các file trong hệ thống. Cho phép tầng Business logic thực hiện các truy vấn dữ liệu. Mọi người vẫn hay nhầm lẫn giữa tier và layer vì cấu trúc phân chia giống nhau (presentation, bussiness , data). Tuy nhiên, thực tế chúng hoàn toàn khác nhau.

Nếu 3 tiers có tính vật lí thì 3 layer có tính logic. Nghĩa là ta phân chia ứng dụng thành các phần (các lớp) theo chức năng hoặc vai trò một cách logic. Các layer khác nhau được thực thi trong 1 phân vùng bộ nhớ của process. Vì thế nên một tier có thể có nhiều layer.

Ưu điểm • Việc phân chia thành từng lớp giúp cho code được tường minh hơn. Nhờ vào việc chia ra từng lớp đảm nhận các chức năng khác nhau và riêng biệt như giao diện, xử lý, truy vấn thay vì để tất cả lại một chỗ. Nhằm giảm sự kết dính. KHOA CÔNG NGHỆ THÔNG TIN 18 Chương 2: Định dạng trang web với CSS • Dễ bảo trì khi được phân chia, thì một thành phần của hệ thống sẽ dễ thay đổi.

Việc thay đổi này có thể được cô lập trong 1 lớp, hoặc ảnh hưởng đến lớp gần nhất mà không ảnh hưởng đến cả chương trình. • Dễ phát triển, tái sử dụng: khi chúng ta muốn thêm một chức năng nào đó thì việc lập trình theo một mô hình sẽ dễ dàng hơn vì chúng ta đã có chuẩn để tuân theo. Và việc sử dụng lại khi có sự thay đổi giữa hai môi trường ( Winform sang Webfrom ) thì chỉ việc thay đổi lại lớp GUI. • Dễ bàn giao.

Nếu mọi người đều theo một quy chuẩn đã được định sẵn, thì công việc bàn giao, tương tác với nhau sẽ dễ dàng hơn và tiết kiệm được nhiều thời gian. • Dễ phân phối khối lượng công việc. Mỗi một nhóm, một bộ phận sẽ nhận một nhiệm vụ trong mô hình 3 lớp. Việc phân chia rõ ràng như thế sẽ giúp các lập trình viên kiểm soát được khối lượng công việc của mình.

Các loại CSS CSS cho phép bạn định nghĩa kiểu, cách hiện thị cho các phần tử HTML. Giúp bạn phân tách giữa nội dung trang và cách trình bày trang. Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp nên. Khi sử dụng CSS thì các định đạng được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS.

Nhúng CSS vào HTML CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language. Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản. HTML không được thiết kế để gắn thẻ để giúp định dạng trang web. Bạn chỉ có thể dùng nó để “đánh dấu” lên site. Những thẻ như <font> được ra mắt trong HTML phiên bản 3.2, nó gây rất nhiều rắc rối cho lập trình viên.

Vì website có nhiều font khác nhau, màu nền và phong cách khác nhau. Để viết lại code cho trang web là cả một quá trình dài, cực nhọc. Vì vậy, CSS được tạo bởi W3C là để giải quyết vấn đề này. KHOA CÔNG NGHỆ THÔNG TIN 19 Chương 2: Định dạng trang web với CSS Mối tương quan giữa HTML và CSS rất mật thiết.

HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời. CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ là một trang chứa văn bản mà không có gì khác. Chúng có 3 loại là Inline, External và Internal: Style CSS Internal là style được tải lên mỗi khi trang web được refresh. Vì vậy nó tăng thời gian tải trang.

Ngoài ra, bạn sẽ không dùng một style CSS cho nhiều trang vì nó chỉ áp dụng cho từng trang một. Tuy nhiên, lợi ích của style CSS Internal là khi mọi thứ đã đặt trong một trang thì nó dễ chia sẽ trang để xem trước hơn. Phương pháp dùng Style External là thuận tiên nhất. Mọi thứ được lưu trong file.

Có nghĩa là bạn có thể tạo phong cách ở file khác áp dụng CSS vào trang bạn muốn. External style sẽ cải thiện thời gian tải trang rất nhiều. Cuối cùng, chúng ta sẽ nói về style CSS Inline. Inline hoạt động với một yếu tố nhất định có thẻ <style>.

Mỗi thành phần đều cần được tạo phong cách riêng, vì vậy đây không hẵn là cách tốt nhất và dễ nhất để xử lý CSS. Nhưng có thể khá tiện lợi, vì nếu bạn muốn thay đổi chỉ một yếu tố, nhanh chóng xem trước thay đổi, bạn không cần truy cập trực tiếp vào file CSS để chỉnh sửa mà sử dụng Inline CSS. CSS In-line, out-line Để áp dụng CSS tác dụng vào các phần HTML có ba cách nhúng CSS: Inline , Internal và External • Inline: mã CSS viết tại thuộc tính style của phần tử HTML • Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ <style> • External: mã CSS ở một file riêng biệt sau đó nạp vào HTML bằng phần tử <link> 2. Các thành phần CSS Cú pháp của CSS gồm 3 phần: đối tượng, thuộc tính và giá trị: Đối tượng {thuộc tính: giá trị} Đối tượng thường là các thẻ HTML mà bạn muốn định nghĩa cách hiển thị.

Thuộc tính là thuộc tính hiển thị của đối tượng đó. Giá trị là cách mà bạn muốn một thuộc tính hiển thị như thế nào. Cặp {thuộc tính: giá trị} được đặt trong dấu {}. KHOA CÔNG NGHỆ THÔNG TIN 20 Chương 2: Định dạng trang web với CSS Body {color: black} Nếu giá trị gồm nhiều từ, đặt chúng trong dấu nháy đôi: p {font-family: "sans serif"} Nếu bạn muốn định nghĩa nhiều thuộc tính của một đối tượng, phân cách các cặp thuộc tính: giá trị bằng dấu (;).

p {text-align: center; color: red} Để định nghĩa Style được dễ đọc hơn: P{ text-align: center; color: black; font-family: arial } 2. Nhóm nhiều đối tượng Bạn có thể định nghĩa một Style cho nhiều đối tượng cùng một lúc: h1, h2, h3, h4, h5, h6 { color: green } 2. Thuộc tính Class Với thuộc tính Class, bạn có thể định nghĩa nhiều Style khác nhau cho cùng một đối tượng. Ví dụ, bạn muốn có hai Style cho cùng một thẻ <P>, nếu thẻ <P> nào có class=right sẽ canh lề bên phải, class=center sẽ canh giữa: p.right {text-align: right} p.center {text-align: center} Trong trang HTML: <p class="right"> Đoạn này sẽ được canh phải.

</p> <p class="center"> Đoạn này sẽ được canh giữa. </p> KHOA CÔNG NGHỆ THÔNG TIN 21 Chương 2: Định dạng trang web với CSS Bạn cũng có thể bỏ qua tên đối tượng để định nghĩa kiểu Style cho tất cả các thành phần có Class mà bạn định nghĩa.center { text-align: center; color: red } Trong trang HTML sau, cả H1 và đoạn văn bản đều được canh giữa: <h1 class="center"> Tiêu đề này sẽ được canh giữa. </h1> <p class="center"> Đoạn này sẽ được canh giữa.