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

• 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

ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH  GIÁO TRÌNH MÔN HỌC: XÂY DỰNG ỨNG DỤNG WEB NGHỀ: HỆ THỐNG THÔNG TIN TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số: /QĐ-CĐKTKT ngày tháng năm 2020 của Hiệu trưởng Trường Cao đẳng Kinh tế - Kỹ thuật Thành phố Hồ Chí Minh) Thành phố Hồ Chí Minh, năm 2020 ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH  GIÁO TRÌNH MÔN HỌC: XÂY DỰNG ỨNG DỤNG WEB NGHỀ: HỆ THỐNG THÔNG TIN TRÌNH ĐỘ: CAO ĐẲNG THÔNG TIN CHỦ NHIỆM ĐỀ TÀI Họ tên: Nguyễn Gia Quang Đăng Học vị: Thạc sỹ Đơn vị: Khoa Công nghệ thông tin Email: [e-mail] TRƯỞNG KHOA TỔ TRƯỞNG CHỦ NHIỆM BỘ MÔN ĐỀ TÀI Lê Như Dzi Võ Đào Thị Hồng Tuyết Nguyễn Gia Quang Đăng HIỆU TRƯỞNG DUYỆT Tháng 10 năm 2020 TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. LỜI GIỚI THIỆU Giáo trình này được biên soạn dựa trên chương trình chi tiết môn học bậc cao đẳng chuyên ngành Hệ thống thông tin Khoa Công nghệ thông tin của Trường Cao đẳng Kinh tế Kỹ thuật Thành Phố Hồ Chí Minh. Ngày nay, do sự phát triển không ngừng của mạng internet toàn cầu, HTML cũng ngày càng trở nên phức tạp và hoàn thiện hơn để đáp ứng được những yêu cầu mới nảy sinh trong quá trình phát triển đó (như âm thanh, hình ảnh động, v. Người ta gọi đó là những phiên bản của HTML và đánh số để biểu thị. HTML 2, HTML 2+, HTML 3, HTML 5,… là để chỉ những phiên bản sau này. Một trong những điểm mạnh của HTML là một văn bản bất kỳ nếu tuân thủ tiêu chuẩn HTML đều có thể hiện lên màn hình hay in ra, tóm lại là hiểu được, bởi bất kỳ loại phần mềm hay máy tính nào mà người đọc có, không phân biệt trình duyệt nào (NetScape trên Windows hay Lynx trên UNIX, thậm chí cho người khiếm thị bằng phần mềm đặc biệt). Đây là quyển giáo trình được biên soạn lần thứ nhất cho môn học này tại khoa Công nghệ thông tin của nhà trường. Nhằm cung cấp kiến thức nền tảng về ngôn ngữ HTML, Javascript, C#, giúp học sinh sinh viên nắm vững và vận dụng các kỹ thuật phổ biến viết ứng dụng trên web chạy trực tuyến trên mạng. Từ đó, sinh viên có thể tự học các kiến thức chuyên sâu hơn. Trong tài liệu này tác giả sử dụng phương pháp lập trình trên ngôn ngữ C# truy xuất trên môi trường web. Qua đó, giúp sinh viên nắm bắt kiến thức và kỹ năng thực hành cơ bản để vận dụng viết được các ứng dụng trong thực tiễn. Trong quá trình biên soạn chắc chắn giáo trình sẽ còn nhiều thiếu sót và hạn chế. Rất mong nhận được sự đóng góp ý kiến quý báu của học sinh sinh viên và các bạn đọc để giáo trình ngày một hoàn thiện hơn. Thành phố Hồ Chí Minh, ngày……tháng 10 năm 2020 Tác giả biên soạn Nguyễn Gia Quang Đăng KHOA CÔNG NGHỆ THÔNG TIN 1 MỤC LỤC LỜI GIỚI THIỆU . 1 GIÁO TRÌNH MÔN HỌC. 6 Chương 1: Giới thiệu chung. Nền tảng của Web ngôn ngữ HTML . Cơ bản về ngôn ngữ HTML . Định dạng Text . Liên kết các trang web (Link) . Các giao thức sử dụng cho Web . Các mô hình ứng dụng Web . Tất cả trong một Server . Tách riêng Database Server . Sử dụng Load Balancer (Reverse Proxy) . Dùng HTTP Accelerator (Caching Reverse Proxy) . Cấu hình Master-Slave Database Replication . 16 Chương 2: Định dạng trang web với CSS . Mô hình 3 lớp trong thiết kế Web . CSS In-line, out-line . Các thành phần CSS . Nhóm nhiều đối tượng . Thuộc tính Class . Thuộc tính ID. Ghi chú trong CSS . Sử dụng CSS trong trang HTML . Bài tập áp dụng . 28 Chương 3: Ngôn ngữ JavaScript . Giới thiệu về JavaScript . Sử dụng JavaScript trong trang HTML . Cú pháp cơ bản của lệnh . 31 KHOA CÔNG NGHỆ THÔNG TIN 2 3. Hiển thị một dòng văn bản . Hiển thị hộp thoại thông báo –Lệnh alert() . Giao tiếp với người sử dụng – Lệnh prompt() . Hỏi đáp người sử dụng – Lệnh confirm() . Biến, kiểu dữ liệu, biểu thức, toán tử . Kiểu dữ liệu . Lệnh, khối lệnh trong JavaScript . Toán tử & Biểu thức trong JavaScript . Câu lệnh điều kiện, lệnh lặp for. Cấu trúc lập trình rẽ nhánh (Điều Kiện) . Cấu trúc lặp . Câu lệnh while, switch, break, continue . Biến mảng, hàm . Khái niệm sự kiện và xử lý sự kiện . Một số sự kiện trong JavaScript . Các sự kiện có sẵn của một số đối tượng . Bài tập áp dụng . 59 Chương 4: Kịch bản trình chủ . Giới thiệu về ngôn ngữ lập trình Web động. Cài đặt cấu hình Web Server IIS . Giới thiệu Visual Studio . Tìm hiểu về ASP. Những ưu điểm của ASP. Quá trình xử lý tập tin ASPX . Tạo ứng dụng Web trên Visual Studio . Khởi động ASP. Phân loại tập tin trong ASP. 73 KHOA CÔNG NGHỆ THÔNG TIN 3 4. Các thành phần giao diện VS . Server Controls - Các điều khiển chuẩn .Net Web Control . Điều khiển GridView . Các thao tác định dạng lưới . Xử lý sắp xếp . Xử lý phân trang . Tùy biến các cột . Cập nhật dữ liệu trực tiếp trên lưới . Điều khiển DataList . Sử dụng DataList để hiển thị dữ liệu . Cập nhật dữ liệu với DataList. Điều khiển Repeater . Bài tập áp dụng . 125 Chương 5: Xây dựng và quản lý ứng dụng . Đối tượng Request . Đối tượng Response . Đối tượng Response . Ví dụ xử lý cho phép người dùng download file . Thuộc tính & Phương thức . Sử dụng biến toàn cục với Session . Sử dụng biến Application . Duyệt qua tập hợp biến chứa trong Application. Làm việc với Cookies . Cấu trúc tập tin Global. Các sự kiện trong tập tin Global. 135 KHOA CÔNG NGHỆ THÔNG TIN 4 5.1 Cấu trúc tập tin web. Các cấu hình mặc định . Bài tập áp dụng . 141 Chương 6: Xây dựng các thành phần truy xuất dữ liệu . Tìm hiểu về ADO. Kiến trúc ADO. Minh họa tạo kết nối cơ sở dữ liệu . Các đối tượng trong ADO. Đối tượng Connection . Đối tượng Command. Đối tượng DataReader . Đối tượng DataAdapter . Đối tượng DataSet . Đối tượng DataTable. 160 Chương 7: Web Services . Tìm hiểu về Web services . Xây dựng Web services . Tạo Web Services trong Visual studio . Kiểm tra Web Service . Sử dụng Web services . Sử dụng Web Services do người dùng xây dựng . Sử dụng Web Services được cung cấp miễn phí trên mạng. Xây dựng Web services truy xuất dữ liệu . 171 TÀI LIỆU THAM KHẢO . 172 DANH MỤC HÌNH ẢNH . 173 DANH MỤC BẢNG BIỂU . 175 KHOA CÔNG NGHỆ THÔNG TIN 5 GIÁO TRÌNH MÔN HỌC Tên môn học: Xây dựng ứng dụng web Mã môn học: MH3101346 Vị trí, tính chất, ý nghĩa và vai trò của môn học: - Vị trí: là môn học chuyên ngành, được bố trí sau môn học Thiết kế Web, học kỳ 4. - Tính chất: là môn học bắt buộc - Ý nghĩa và vai trò của môn học: giúp cho người học trang bị được kiến thức về lập trình trên môi trường ứng dụng web. Mục tiêu của môn học: Về kiến thức: - Trình bày được các mô hình lập trình Web - Trình bày được các giao thức của công nghệ Web - Trình bày được các thành phần của ngôn ngữ JavaScript - Trình bày được các chức năng của Web Server Control - Trình bày được các kiến trúc của cộng nghệ ADO.NET - Trình bày được qui trình kết nối dữ liệu Về kỹ năng: - Vận dụng được ngôn ngữ JavaScript để viết các kịch bản - Vận dụng được ngôn ngữ lập trình trong xử lý dữ liệu. - Vận dụng được Hệ quản trị CSDL SQL Server tương tác với Web. - Sử dụng và đánh giá được các phương pháp truy vấn dữ liệu. - Sử dụng được các đối tượng của ADO.NET - Xây dựng được ứng dụng Web có sử dụng cơ sở dữ liệu Về năng lực tự chủ và trách nhiệm: - Cẩn thận, nghiêm túc trong nghiên cứu - Có khả năng xem các tài liệu hướng dẫn, đọc sách - Cẩn thận và chính xác khi làm việc với cơ sở dữ liệu - Có khả năng vận dụng môn học lập trình ứng dụng trên Web để giải quyết vấn đề trong thực tế. Nội dung của môn học: KHOA CÔNG NGHỆ THÔNG TIN 6 Chương 1: Giới thiệu chung CHƯƠNG 1: GIỚI THIỆU CHUNG Giới thiệu: Khái niệm tổng quan về cấu trúc ngôn ngữ web HTML Mục tiêu: - Trình bày được các khái niệm về mô hình ứng dụng Web - Trình bày được các giao thức sử dụng cho Web - Sử dụng được ngôn ngữ HTML để thiết kế trang Web Nội dung chính: 1. Nền tảng của Web ngôn ngữ HTML 1. Cơ bản về ngôn ngữ HTML * Cấu trúc HTML bao gồm 3 thẻ để xác định cấu trúc của trang web bao gồm: <htm></html> <head></head> <body></body> * Thẻ dạng văn bản Mặc dù có rất nhiều thẻ để định dạng văn bản, những thẻ sau đây là những thẻ cơ bản nhất mà gần như bất cứ một trang web nào cũng phải sử dụng: <p>: bắt đầu một đoạn văn bản mới <br>: xuống dòng <h1></h1>, <h2></h2>,…: đặt dòng văn bản nằm trong cặp thẻ là tiêu đề (heading). * Thẻ ghi chú Cũng như các ngôn ngữ lập trình, để cho phép người viết trang web đặt những ghi chú dành riêng cho mình vào trong trang web, HTML cung cấp thẻ ghi chú. Đây là thẻ đặc biệt so với những thẻ khác: <!-- nội dung ghi chú --> KHOA CÔNG NGHỆ THÔNG TIN 7 Chương 1: Giới thiệu chung Ghi nhớ thẻ qua ý nghĩa HTML 4.0 có tương đối nhiều thẻ, để nhớ được nhiều, người viết thường phải hiểu được ý nghĩa tên của mỗi thẻ. Các thẻ trong HTML thường là viết tắt của những từ gợi nhớ như: Paragraph, BReack,… 1. Định dạng Text * Định dạng kiểu chữ Trong các tài liệu, văn bản chúng ta thường sử dụng các kiểu chữ đậm, nghiêng, gạch dưới,…ví dụ sau minh hoạ các thẻ được dùng định dạng kiểu chữ: <html> <body> <b>In đậm</b> <br> <strong>In rất đậm </strong><br> <font size="4">c</font><big>hữ lớn </big><br> <em>nhấn mạnh</em><br> <i>in nghiêng </i><br> <small>chữ nhỏ</small><br> Công thức hoá học của nước: H<sub>2</sub>O<br> X bình phương: X<sup> 2 </sup> </body> </html> Để xem code HTML của một trang web đã có từ IE, trên menu View, chọn mục Source.