TRƯỜNG ĐẠI HỌC QUỐC TẾ MIỀN ĐÔNG

KHOA KỸ THUẬT

ĐỀ CƯƠNG CHI TIẾT MÔN HỌC

THÔNG TIN CHUNG VỀ MÔN HỌC

Tên môn học : Lập trình Web

: Web Programming
Mã môn học : CSE 307
Điều kiện đăng kí môn học : Học trước: CSE 102
: Tiên quyết: Không
Chương trình đào tạo : Kỹ Sư Kỹ Thuật Phần Mềm
Ngành đào tạo : Kỹ Thuật Phần Mềm
Số tín chỉ : 4 (3,1)
Số giờ : 60 giờ (30 giờ lý thuyết / 30 giờ thực hành) và 75 giờ tự học
Yêu cầu phục vụ cho môn học : Projector, Máy tính
Khoa/Bộ môn phụ trách giảng dạy : Khoa Kỹ thuật/Bộ môn Kỹ Thuật Phần Mềm

MÔ TẢ MÔN HỌC

Môn học Lập trình Web là môn học bắt buộc thuộc khối kiến thức chuyên ngành của chương
trình đào tạo kỹ sư ngành Kỹ thuật phần mềm và Mạng máy tính và truyền thông dữ liệu.
Môn học hướng dẫn sinh viên cách để xây dựng giao diện cho ứng dụng Web vừa chuẩn SEO
vừa hiển thị tốt trên mọi thiết bị, sử dụng HTML/HTML5, CSS/CSS3 kết hợp với các thư viện thông
dụng như Bootstrap, jQuery, Google Fonts, Font Awesome,... Sinh viên cũng được học cách tạo ra
những trang web có giao diện động với các hiệu ứngs sinh động, có khả năng xác thực và xử lý dữ liệu
phía client bằng ngôn ngữ Javascript/jQuery. Ngoài ra, môn học còn cung cấp kiến thức cơ bản cho việc
sử dụng công cụ Web Developer Tools để phân tích trang web, debug Javascript,...
Môn học trước của môn này là Nhập môn lập trình.

MỤC TIÊU MÔN HỌC

Sau khi học xong môn học, sinh viên phải đạt được các mục tiêu sau:
− Hiểu được các khái niệm, kỹ thuật, công nghệ về phát triển ứng dụng web.
− Hiểu và phân tích được cấu trúc và bố cục trang Web.
− Vận dụng được kiến thức về HTML/HTML5, CSS/CSS3 và kết hợp sử dụng thư viện
Bootstrap, jQuery, Google Fonts,... để thiết kế được trang Web chuẩn SEO và hiển thị tốt trên
mọi thiết bị.

1
 − Vận dụng được kiến thức về Javascript/jQuery để tạo ra các hiệu ứng sinh động cũng như xử
lý được xác thực, xử lý dữ liệu,... phía client trên giao diện Web.
− Sử dụng được các công cụ Web Developer Tools.
− Có tinh thần trách nhiệm với cá nhân và tập thể.

CHUẨN ĐẦU RA MÔN HỌC

1. Kiến thức Định hướng

thực hiện
CLO 1 Giải thích được các khái niệm, kỹ thuật, công nghệ về phát triển ứng dụng PLO 3.1
Web
CLO 2 Trình bày và vận dụng được kiến thức về SEO và các thành phần quan PLO 3.1
trọng để thiết kế bố cục đáp ứng yêu cầu SEO
CLO 3 Ghi nhớ và vận dụng được những thành phần HTML, thuộc tính CSS và PLO 3.1
hàm Javascritpt/jQuery thông dụng

2. Kỹ năng

CLO 4 Áp dụng được kiến thức về HTML/CSS kết hợp sử dụng các thư viện vào PLO 6.1
thiết kế trang web
CLO 5 Áp dụng được kiến thức về Javascript/jQuery để tạo hiệu ứng, xác thực và PLO 6.1
xử lý dữ liệu
CLO 6 Sử dụng được các công cụ Web Developer Tools PLO 6.1

3. Thái độ

CLO 7 Ý thức về tính chuyên nghiệp trong lập trình PLO 8.1,
10.1

HỌC LIỆU

Tài liệu dạy học

[1]. Mozilla Developer Network Web Docs (2019). An overview of HTTP. Link :
https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
[2]. Mozilla Developer Network Web Docs (2020). HTML: Hypertext Markup Language.
Link: https://developer.mozilla.org/en-US/docs/Web/HTML
[3]. Mozilla Developer Network Web Docs (2020). CSS: Cascading Style Sheets.
Link: https://developer.mozilla.org/en-US/docs/Web/CSS
[4]. Mozilla Developer Network Web Docs (2020). JavaScript.
Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript
[5]. jQuery (2020). jQuery API. Link: http://api.jquery.com/

2
NỘI DUNG MÔN HỌC
Số giờ
(LT/TH)
Chương 1. TỔNG QUAN VỀ WEB 4/0
1. Web sites và Web Applications
2. Web Browsers
3. Web Servers
4. Client-Server Architecture
5. Http/Https
Chương 2. HTML 4/4
1. HTML/HTML5
2. Cấu trúc trang Web
3. Thành phần HTML
4. Ngữ nghĩa của các thành phần trong HTML5
Chương 3. CSS 8/12
1. Tổng quan CSS/CSS3
2. CSS Selector
3. Presentation
4. Layout
5. Kết hợp với thư viện Bootstrap, Google Fonts,…
6. Các công cụ Web Developer Tools
Chương 4. JAVASCRIPT 8/8
1. Tổng quan về JavaScript
2. Công cụ phát triển
3. Tổng quan về DOM
4. Các đối tượng có sẵn
5. Hướng đối tượng với Javascript
6. Biểu thức chính quy
Chương 5. JQUERY 6/6
1. Tổng quan về Jquery
2. Selector
3. Api
4. Effect
5. Event

ĐÁNH GIÁ

Phương
Loại hình Nội dung đánh giá CLO Trọng số
pháp/Công cụ
(1) Chuyên cần Điểm danh 7 10%

3
Đánh (2) Áp dụng kiến thức tổng hợp về Thực hiện đồ án 2-6 30%
giá quá HTML/CSS, Javascript để thiết kế trang thiết kế giao diện
trình web trang web và nộp
vào tuần 7
Đánh giá − Trình bày, giải thích những khái niệm, Kiểm tra viết kết 1-6 60%
tổng kết kỹ thuật,… trong lập trình web hợp thực hành
− Áp dụng kiến thức tổng hợp về trên máy tính, thời
HTML/CSS kết hợp các thư viện để gian 120 phút
thiết kế, kiến thức về JavaScript và
jQurery để xử lý dữ liệu, hiệu ứng trên
trang web
Tổng: 100%

KẾ HOẠCH DẠY HỌC

Số giờ Đánh
TUẦN NỘI DUNG
(LT/TH) giá
1 Chương 1. TỔNG QUAN VỀ WEB 4/0 (1)
1. Web sites và Web Applications
2. Web Browsers
3. Web Servers
4. Client-Server Architecture
5. Http/Https
2 Chương 2. HTML 4/4 (1)
1. HTML/HTML5
2. Cấu trúc trang Web
3. Thành phần HTML
4. Ngữ nghĩa của các thành phần trong HTML5
3 Chương 3. CSS 4/4 (1)
1. Tổng quan CSS/CSS3
2. CSS Selector
3. Presentation
4 Chương 3. CSS 4/8 (1)
4. Layout
5. Kết hợp với thư viện Bootstrap, Google Fonts,…
6. Các công cụ Web Developer Tools
5 Chương 4. JAVASCRIPT 4/4 (1)
1. Tổng quan về JavaScript
2. Công cụ phát triển
3. Tổng quan về DOM
4. Các đối tượng có sẵn

4
 6 Chương 4. JAVASCRIPT 4/4 (1)
5. Hướng đối tượng với Javascript
6. Biểu thức chính quy
7 Chương 5. JQUERY 4/4 (1)
1. Tổng quan về Jquery
2. Selector
3. Api
8 Chương 5. JQUERY 2/4 (1)
4. Effect
5. Event
9 Chương 5. JQUERY 0/2 (1)
Kiểm tra cuối kỳ Tổng
kết

TUẦN 1
Định hướng thực hiện CLO 1
Đánh giá quá trình (1)
HOẠT ĐỘNG HỌC TẬP CLO
➢ Đọc
1. Chương 1 1
➢ Thảo luận
1. Sự khác nhau giữa trang báo (VnExpress, Tinh tế,...) với Google Doc, Google 1
Sheet,...
2. Cách hoạt động của các trình duyệt (FireFox, Chrome,...) và các phần mềm Xampp, 1
Microsoft IIS
3. Tại sao trên thanh địa chỉ trình duyệt lúc có biểu tượng ổ khóa, lúc thì bị gạch 1
chéo?

TUẦN 2
Định hướng thực hiện CLO 1-4
Đánh giá quá trình (1)
HOẠT ĐỘNG HỌC TẬP CLO
➢ Đọc
1. Chương 2 1-3
➢ Thảo luận
1. Nhìn trang web và phân tích bố cục như có những khu vực nào, những khu vực 1-3
nào được giữ cố định khi di chuyển sang trang web khác cùng tên miền
2. Nhận xét kết quả trả về khi tìm cụm từ khóa bằng công cụ tìm kiếm Google, 1-3
3. Chỉ ra những thành phần trên form đăng nhập, đăng ký hay tìm kiếm,... của trang
web
➢ Thực hành
5
 1. Làm bài tập trên: https://github.com/TelerikAcademy/HTML 2-4

TUẦN 3
Định hướng thực hiện CLO 1-4
Đánh giá quá trình (1)
HOẠT ĐỘNG HỌC TẬP CLO
➢ Đọc
1. Chương 3 1-3
➢ Thảo luận và bài tập
1. Nhận xét trang web khi mới hoàn thành bằng HTML 1-3
2. Áp dụng những thuộc tính vừa học để hoàn thành những ví dụ 1-4
➢ Thực hành
1. Làm bài tập trên: https://github.com/TelerikAcademy/CSS 2-4

TUẦN 4
Định hướng thực hiện CLO 1, 2, 3, 4, 6
Đánh giá quá trình (1)
HOẠT ĐỘNG HỌC TẬP CLO
➢ Đọc
1. Chương 3 1, 2, 3,
6
➢ Thảo luận và bài tập
1. Nhắc lại những thuộc tính CSS ở phần trước 1, 2, 3
2. Áp dụng những kiến thức vừa học để hoàn thành những ví dụ 1, 2, 3,
4, 6
➢ Thực hành
1. Làm bài tập trên: https://github.com/TelerikAcademy/CSS 2, 3, 4,
6

TUẦN 5
Định hướng thực hiện CLO 1-6
Đánh giá quá trình (1)
HOẠT ĐỘNG HỌC TẬP CLO
➢ Đọc
1. Chương 4 1-5
➢ Thảo luận và bài tập
1. Xem ví dụ và cho biết những hiệu ứng nào có thể thực hiện bằng HTML, CSS. 1-3
Trình bày ngắn gọn cách tạo hiệu ứng.
2. Áp dụng những kiến thức vừa học để hoàn thành những ví dụ 1-6
➢ Thực hành
1. Làm bài tập trên: https://github.com/TelerikAcademy/JavaScript-Fundamentals 2-6

6
TUẦN 6
Định hướng thực hiện CLO 1-6
Đánh giá quá trình (1)
HOẠT ĐỘNG HỌC TẬP CLO
➢ Đọc
1. Chương 4 1-5
➢ Thảo luận và bài tập
1. Ưu điểm của lập trình hướng đối tượng 1-3
2. Làm thế nào để thay thế tất cả cụm ngày tháng năm (dạng: 03-03-2019) trong chuỗi 1-3
văn bản thành chuỗi “DD/MM/YY”
3. Áp dụng những kiến thức vừa học để hoàn thành những ví dụ 1-6
➢ Thực hành
1. Làm bài tập trên: https://github.com/TelerikAcademy/JavaScript-Fundamentals 2-6

TUẦN 7
Định hướng thực hiện CLO 1-6
Đánh giá quá trình (1), (2)
HOẠT ĐỘNG HỌC TẬP CLO
➢ Đọc
1. Chương 5 1-5
➢ Thảo luận và bài tập
1. Nhận xét cách viết của Javascript, có phải rất khó nhớ? 1-3
2. Nhắc lại cách sử dụng selector của CSS 1, 3
3. Áp dụng những kiến thức vừa học để hoàn thành những ví dụ 1-6
➢ Thực hành
1. Làm bài tập trên: https://goo.gl/ELqAer 2-6
➢ Nộp bài đánh giá quá trình (2)

TUẦN 8
Định hướng thực hiện CLO 1-6
Đánh giá quá trình (1)
HOẠT ĐỘNG HỌC TẬP CLO
➢ Đọc
1. Chương 5 1-5
➢ Thảo luận và bài tập
1. Cho một vài ví dụ về event và cho biết event là gì? 1-3
2. Áp dụng những kiến thức vừa học để hoàn thành những ví dụ 1, 6
➢ Thực hành
1. Làm bài tập trên: https://goo.gl/ELqAer 2-6

TUẦN 9
Định hướng thực hiện CLO 2-6
7
 Đánh giá quá trình (1)
HOẠT ĐỘNG HỌC TẬP CLO
➢ Thực hành
1. Làm bài tập trên: https://goo.gl/ELqAer 2-6

CHÍNH SÁCH CỦA MÔN HỌC

− Vắng trên 20% số buổi: Sinh viên bị cấm thi

− Điểm chuyên cần = 100 * (số buổi có mặt) / (tổng số buổi học)
− Sinh viên nộp bài đúng hạn, không chấp nhận nộp bài tập trễ

THÔNG TIN VỀ GIẢNG VIÊN XÂY DỰNG ĐỀ CƯƠNG

Giảng viên
Họ và tên: Ung Văn Giàu
Học hàm, học vị: Thạc sĩ
Đơn vị công tác: Khoa Kỹ thuật – Đại học Quốc Tế Miền Đông
Email: giau.ung@eiu.edu.vn
Hướng nghiên cứu chính:
− Kỹ Thuật Phần Mềm

Bình Dương, ngày …. tháng …. năm 20….

Trưởng Khoa Trưởng Bộ môn Giảng viên

Ung Văn Giàu

8
 PHỤ LỤC
PHỤ LỤC 1. RUBRIC ĐÁNH GIÁ

1. RUBRIC ĐÁNH GIÁ

Sử dụng để thực hiện hoạt động đánh giá quá trình số 2
YẾU TRUNG BÌNH KHÁ GIỎI ĐIỂM
TIÊU CHÍ
( 10% điểm tối đa) ( 50% điểm tối đa) ( 80% điểm tối đa) ( 100% điểm tối đa) TỐI ĐA
Giao diện trang web khi Chỉ tạo ra giao diện đơn Giao diện với khoảng 75% Giao diện đầy đủ nội dung Giao diện đẩy đủ nội 60
hiển thị trên màn hình giản, chưa đầy đủ nội dung nội dung hiển thị theo yêu nhưng vẫn còn vài lỗi nhỏ dung, hiển thị cân đối,
laptop theo yêu cầu. cầu. về canh chỉnh, độ tương màu sắc hài hòa, hình ảnh
phản màu sắc, tỉ lệ hình nét với tỉ lệ phù hợp,…
ảnh,…
Giao diện trang web khi Không hiển thị tốt trên di Giao diện có thể hiện thị Giao diện có thể hiện thị Hiển thị tốt trên thiết bị 20
hiển thị trên thiết bị di động hoặc hiển thị như trên di động nhưng còn tốt trên thiết bị di động di động
động giao diện với tỉ lệ tương tự nhiều lỗi (khoảng 50% nội nhưng vẫn còn vài lỗi về
khi hiển thị trên laptop dung yêu cầu) cảnh chỉnh, khoảng cách,
độ co giãn của hình ảnh,
văn bản,…
Giao diện có hiệu ứng Không có bất kỳ slider, Có 50% chức năng yêu cầu Có đủ các chức năng yêu Hiệu ứng chuyển động 20
động, xử lý và xác thực hiệu ứng khác,… hay tính được thực hiện chính xác cầu nhưng còn lỗi nhỏ khi tốt, xử lý và xác thực dữ
dữ liệu năng xác thực, xử lý dữ chạy hoặc thiếu trường liệu không có lỗi,…
liệu,… hợp xử lý,...
Tổng: 100

9
 PHỤ LỤC 2. MA TRẬN ĐỀ KIỂM TRA VÀ THANG ĐIỂM ĐÁNH GIÁ
1. KIỂM TRA CUỐI KỲ
Sử dụng để thực hiện hoạt động đánh giá tổng kết
MA TRẬN ĐỀ KIỂM TRA

Nội dung kiểm tra CLO Biết Hiểu Vận dụng Phân tích Đánh giá Sáng tạo Tổng số câu Điểm
Giải thích ngắn ngọn các khái niệm, kỹ thuật, 1-3 1 1 1 1 20
công nghệ về phát triển ứng dụng Web
Thiết kế Webpage bằng HTML và CSS kết hợp 2-6 1 1 1 1 40-50
sử dụng các thư viện Bootstrap, Google Fonts,…
Xử lý dữ liệu, tạo hiệu ứng,… với Javascript và 2-6 1 1 1 1 40-30
jQuery
Tổng 100

THANG ĐIỂM ĐÁNH GIÁ

Điểm
Câu hỏi 1: Trình bày các khái niệm, kỹ thuật, công nghệ về phát triển ứng dụng Web
Định hướng trả lời
Sinh viên trình bày được khái niệm 20

Câu hỏi 2: Thiết kế trang web bằng HTML và CSS

Định hướng trả lời
Webpage hiển thị đúng yêu cầu về Layout và Presentation 40-50

Câu hỏi 3: Xử lý dữ liệu, tạo hiệu ứng,… với Javascript và jQuery

Định hướng trả lời
Các chức năng chạy đúng yêu cầu 40-30
Tổng 100

10