ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH

THÀNH ĐOÀN THÀNH PHỐ HỒ CHÍ MINH

HỘI THI "HỌC SINH, SINH VIÊN GIỎI NGHỀ" NĂM 2020



ĐỀ THI | NGÀNH:
THIẾT KẾ WEBSITE

Đề thi gồm 2 phần

Thời gian thực hiện: 4 giờ

Tháng 09 năm 2020

 I. GIỚI THIỆU

Ngày 06/08/2020, Bộ Y tế phát động chiến dịch truyền thông lan tỏa thông điệp “Niềm tin chiến
thắng” kêu gọi cộng đồng phòng, chống dịch bệnh COVID-19 trong trạng thái bình thường mới.
Chiến dịch truyền thông nhằm kêu gọi mọi tầng lớp người dân cùng thực hiện đầy đủ các biện
phòng, chống dịch bệnh và xây dựng lối sống phù hợp, tạo thói quen có lợi sức khỏe để chung
sống với dịch, thiết lập cuộc sống bình thường trong trạng thái mới, vừa chống dịch hiệu quả,
vừa khôi phục và phát triển kinh tế. Hưởng ứng chiến dịch của Bộ Y tế, Thành Đoàn Tp.HCM
muốn thành một chuyên trang với chủ đề “Vững tin Việt Nam” nhằm:

- Đăng tải các bài viết về hoạt động của tuổi trẻ thành phố trong công tác phòng, chống dịch
bệnh, cũng như lan tỏa tinh thành chống dịch của tuổi trẻ thành phố đến mọi tầng lớp
người dân.
- Phổ biến kiến thức phòng, chống dịch bệnh, chủ trương của thành phố về dịch bệnh đến
với người dân.

II. MÔ TẢ NHIỆM VỤ

Đề thi bao gồm 2 phần: hiện thực giao diện và hiện thực chức năng. Các thí sinh phải hoàn thành
bài thi trong vòng 04 giờ. Nếu thí sinh hoàn thành trước thời gian quy định thì có thể tiếp tục
thực hiện phần sau.

Yêu cầu chi tiết các phần:

| Trang 1/6 |


 PHẦN 1
(120 phút) HIỆN THỰC GIAO DIỆN | 35 điểm

Sử dụng các tài nguyên và thư viện, framework được cung cấp sẵn, xây dựng giao diện cho
website với HTML, CSS theo các yêu cầu sau:

Trang intro (HTML, CSS, Bootstrap, không dùng JavaScript) | 15 điểm

Yêu cầu:

- Sử dụng tài nguyên được cung cấp, hiện thực hóa giao diện đúng theo mẫu:

- Màu background gradient từ vàng tới đỏ. Mã màu vàng và đỏ được lấy từ logo.
- Khi click vào “Xem chi tiết” sẽ chuyển đến trang chủ.
- Chỉ sử dụng HTML và CSS, tạo chuyển động trôi từ dưới lên trên của 20 trái tim với các
kích thước khác nhau.
- Các trái tim chuyển động xoay vòng trong quá trình trôi.
- Chỉ sử dụng HTML và CSS, tạo chuyển động cho logo, khi hover chuột vào logo thì lá cờ
Việt Nam chuyển động theo mẫu như sau:
o Nền cờ di chuyển từ dưới lên.
o Ngôi sao di chuyển từ dưới lên sau khi nền cờ bắt đầu chuyển động 1 khoảng thời gian
nhất định.
- Trang intro phải có tính responsive, giao diện khi hiển thị trên điện thoại:

| Trang 2/6 |


Trang chủ (HTML, CSS, Bootstrap, JavaScript) | 15 điểm

- Header chứa:
o Logo liên kết tới trang chủ.
o Navigation: hiển thị các chuyên mục bài viết.
- Vùng bài viết: Hiển thị 5 bài mới nhất (không cần lọc theo chuyên mục).
o Thông tin cho mỗi bài viết gồm:
o Tiêu đề
o Ngày đăng
o Hình bài viết
o 150 ký tự đầu tiên của nội dung bài viết
o Icon thích và số lượt thích của bài viết
- Có nút “Tải thêm” ở cuối danh sách bài viết, dùng để tải các bài viết cũ hơn.
- Footer: chứa logo Thành Đoàn TP.HCM, thông tin bản quyền Thành Đoàn TP.HCM, thông
tin liên hệ Thành Đoàn TP.HCM:
Địa chỉ: Số 1 Phạm Ngọc Thạch, Quận 1, TP HCM
Email: thanhdoan@tphcm.gov.vn
- Trang chủ phải có tính responsive.

Kết thúc phần này, tất cả các trang web phải được tạo ra (định dạng file .html, .css, …) và lưu
trong thư mục: D:\SoBaoDanh_HoTen_SoMay\Phan_01. Các file phải được lưu trữ và tổ chức
theo các thư mục chuyên biệt, file .html của trang chủ và trang intro được đặt tại thư mục gốc.

Lưu ý:

- Layout của website phải được dựng với các thẻ layout (VD: header, footer, nav, section,
v.v…) và được định dạng trong file CSS.
- Không được dùng table để xây dựng layout.
- Tất cả các thành phần trên trang web phải được dựng bằng HTML và CSS. Chỉ dùng hình
ảnh với logo, trái tim ở trang intro và hình bài viết.
- Title chung cho trang chủ và trang intro là “Họ Tên – Số báo danh”.
- Các file .html và .css được tạo ra phải có comment và được định dạng phân cấp rõ ràng.

| Trang 3/6 |


 PHẦN 2
(120 phút) HIỆN THỰC CHỨC NĂNG | 45 điểm

Sử dụng giao diện đã xây dựng ở phần 2, trong phần 3 thí sinh lập trình thao tác với cơ sở dữ
liệu. Thí sinh tự xây dựng cơ sở dữ liệu cho mình dựa trên hình ảnh, dữ liệu cho trước. Cơ sở dữ
liệu đảm bảo được ít nhất 2 bảng dữ liệu và chứa được các thông tin dữ liệu cho trước.

Dữ liệu hiển thị lên website như chuyên mục bài viết, danh sách bài viết, chi tiết bài viết đều
được lập trình lấy từ cơ sở dữ liệu.

Các chức năng theo hướng đối tượng.

Có thể sử dụng PHP5 hoặc PHP7

Yêu cầu cụ thể:

- Lấy từ cơ sở dữ liệu 5 bài viết mới nhất và hiển thị ở trang chủ.
- Sử dụng AJAX cho chức năng “Tải thêm”. Khi click vào nút “Tải thêm” ở cuối danh sách,
website sẽ hiển thị thêm 5 bài viết cũ hơn. Nếu không còn bài viết để tải thêm, nút “Tải
thêm” phải được ẩn hoặc bất hoạt để người dùng biết không còn bài viết nào. Trong quá
trình tải, phải dùng hiệu ứng hoặc text để người dùng biết website đang tải.
- Sử dụng AJAX cho chức năng lọc bài viết theo chuyên mục. Khi người dùng chọn chuyên
mục, danh sách bài viết sẽ lọc từ cơ sở dữ liệu và hiển thị các bài viết thuộc về chuyên mục
đang chọn. Người dùng có thể chọn nhiều chuyên mục, website phải thể hiện cho biết
người dùng đang chọn chuyên mục nào. Nếu các chuyên mục được chọn có nhiều bài viết,
chỉ hiển thị 5 bài viết mới nhất và người dùng có thể dùng nút “Tải thêm” như mô tả ở trên
để xem các bài viết cũ hơn. Khi tải thêm vẫn phải tải đúng các bài viết thuộc về chuyên
mục được chọn.
- Sử dụng AJAX cho chức năng hiển thị chi tiết bài viết. Khi người dùng click vào tiêu đề hoặc
hình bài viết, trang web sẽ hiển thị chi tiết bài viết theo kiểu modal của Bootstrap (không
được chuyển trang), đồng thời, địa chỉ hiển thị trên thanh địa chỉ thay đổi theo kiểu /tieu-
de-bai-viet-id và title của trang web thay đổi bằng tên bài viết. Khi tắt modal thì địa chỉ và
title quay lại như cũ.

| Trang 4/6 |


- Sử dụng AJAX cho chức năng thích bài viết. Khi người dùng click vào icon thích, lượt thích
sẽ được tăng lên 1 đơn vị. Mỗi thiết bị chỉ được thích bài viết 1 lần (không tính tab ẩn danh
– private – incognito). Nếu người dùng đã thích rồi thì icon thích sẽ bị bất hoạt và đổi màu
khác.

Kết thúc phần này, tất cả các file được tạo ra (định dạng file .php, .js, …) và lưu trong thư mục:
D:\SoBaoDanh_HoTen_SoMay\Phan_02. Các file phải được lưu trữ và tổ chức theo các thư mục
chuyên biệt.

III. YÊU CẦU CHUNG

Mỹ thuật: Sản phẩm phải đảm bảo yếu tố mỹ thuật, kết cấu và bố cục hài hòa, hiện đại, thân
thiện, dễ sử dụng.

Kỹ thuật:

- Sử dụng các tiêu đề phân biệt

- Website thân thiện và dễ sử dụng.
- Website tương thích trên các trình duyệt Firefox, Chrome.
- Kiểm tra CSS sử dụng W3C validator với Profile là CSS level 3+SVG, Medium là all, Warning
là normal report và Vendor Extensions là default. (chỉ kiểm tra ở trang chủ)
- Kiểm tra sử dụng W3C validator với Character Encoding là utf-8 và Document Type là
HTML5 (chỉ kiểm tra ở trang chủ)
- Không sử dụng thẻ <table></table> cho định dạng bố cục.
- Sử dụng khoảng trắng hợp lý để tăng hiệu quả hiển thị của Website.
- Giữ được tính ổn định về việc chuyển hướng trong Website.
- Có chú thích HTML, CSS, JavaScript và PHP
- Sử dụng AJAX
- Sử dụng PHP để lập trình kết nối cơ sở dữ liệu MySQL

IV. QUY ĐỊNH NỘP BÀI

Cấu trúc thư mục bài thi gồm:

ü Thư mục gốc: SoBaoDanh_ HoTen _SoMay.

ü Thư mục con:
+ Phan_01: chứa nội dung của phần 1 (các tập tin .html, .css, … với cấu trúc hợp lý)

| Trang 5/6 |


 + Phan_02: chứa nội dung của phần 2 (các tập tin .php, .js, … với cấu trúc hợp lý)

V. PHẦN MỀM SỬ DỤNG

- Windows 7
- MS Office 2016
- Adobe Photoshop CS6
- Adobe Illustrator CS6
- Adobe Dreamweaver CS6
- CorelDRAW X7
- Sublime Text 3 (kèm plugin Emmet, Bootstrap 4 snippets, Bootstrap 4 Autocomplete,
AutoFilename)
- Notepad++ 7.6.4
- Visual Code 1.32.3 (kèm các Extension: Font Awesome, CSS Peek, Bootstrap 4, Font
Awesome 4, Font Awesome 5, Pro snippets)
- Wampserver 3.1.7 64 bit x64 – Apache 2.4.37 – PHP 5.6.40, 7.0.33, 7.1.26, 72.14, 7.3.1 –
MySQL 5.7.24 – MariaDB 10.3.12 – PhpMyAdmin 4.8.4 – Adminer 4.7.0 – PhpSysInfo
3.2.10
- Internet Explorer 11
- Mozilla Firefox 65.0
- Google Chrome 72.0

| Trang 6/6 |