Tài liệu thực hành môn Lập trình Web - Lab 01
Khoa Khoa học và Kỹ thuật Máy tính- Đại học Bách Khoa Tp.HCM
Môn học: Lập trình Web
LAB 01
I.
Mục tiêu
•
•
Cài đặt Web server dùng Apache hỗ trợ ngôn ngữ PHP
Hiểu biết ngôn ngữ HTML (HyperText Markup Language) và cấu trúc cơ bản của một tài liệu
HTML.
•
•
Hiểu biết và sử dụng một số phần tử HTML/HTML5 cơ bản.
Xây dựng một trang web đơn giản theo mẫu sử dụng ngôn ngữ HTML5.
II. Các bước thực hiện
1. Giới thiệu chương trình XAMPP
-
XAMPP là chương trình tạo máy chủ Web (Web Server) được tích hợp sẵn Apache,
PHP, MySQL, FTP Server, và các công cụ như phpMyAdmin dùng để quản lý hệ
CSDL MySQL
-
XAMPP là tổng hợp viết tắt của nhiều từ:
o
X: cross-platform, chương trình XAMPP được thiết kế hỗ trợ trên nhiều loại hệ
điều hành khác nhau như Windows, Linux, Solaris...
A: Apache HTTP Server. Chương trình Web Server dùng để chạy các ứng
dụng Web.
o
o
o
M: MySQL. Hệ quản trị cơ sở dữ liệu miễn phí.
P: PHP. Ngôn ngữ lập trình phía server side thường được sử dụng để tạo ra các
ứng dụng Web.
o
P: Perl. Ngôn ngữ lập trình.
-
XAMPP version 7.1.32 bao gồm:
o
o
o
o
Apache 2.4.41
MariaDB 10.4.6
PHP 7.1.32
phpMyAdmin 4.9.0.1
…
2. Cài đặt XAMPP
-
Xem hướng dẫn cài đặt trong file How to Install XAMPP on Windows.pdf
3. Một số cấu hình cơ bản trong XAMPP
A. Thay đổi thư mục Web Root (Đường dẫn mặc định trong XAMPP:
C:\xampp\htdocs)
1. Tìm và mở file: httpd.conf trong thư mục cài đặt XAMPP (Mặc định:
C:\xampp\apache\conf)
2. Tìm dòng C:/xampp/htdocs, và sửa thành đường dẫn đến thư mục Web Root mới
3. Restart Apache
Khoa Khoa học và Kỹ thuật Máy tính- Đại học Bách Khoa Tp.HCM
B. Vô hiệu hoá Directory Listing
Theo mặc định khi Web server (Apache) không tìm thấy file index được định nghĩa sẵn
(ví dụ file index.php hoặc index.html) thì chương trình sẽ trả về một trang index mặc
định hiển thị nội dung của thư mục, trong đó có thể chứa thông tin quan trọng để kẻ gian
có thể tiến hành tấn công, nên chúng ta nên vô hiệu hoá tính năng mặc định này của web
server ngay khi cài đặt. Có 3 cách để vô hiệu hoá Directory Listing tuỳ vào từng điều
kiện cụ thể:
Ø Cách 1. Tạo index file (index.html, index.htm, index.php,...) trong mọi thư
mục có trong Web Root.
Ø Cách 2. Tạo file “.htaccess” (đặt trong thư mục Web Root) với nội dung:
Options -Indexes
Ø Cách 3. Mở file httpd.conf (mặc định: C:\xampp\apache\conf). Tìm dòng:
Options Indexes và sửa thành: Options -Indexes . Sau đó restart Apache.
4. HTML là gì
-
HTML là chữ viết tắt của Hypertext Markup Language, là ngôn ngữ được
sử dụng rộng rãi để viết các trang Web.
-
-
Ngôn ngữ HMTL mô tả cấu trúc của trang web sử dụng ngôn ngữ dạng markup.
Các trình duyệt web không hiển thị các thẻ HTML, nhưng dùng chúng như là
thông tin để diễn tả nội dung của trang web.
5. Cấu trúc cơ bản của một tài liệu HTML
-
Cấu trúc cơ bản của một tài liệu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
-
-
-
-
-
-
-
Khai báo <!DOCTYPE html> định nghĩa tài liệu HTML theo chuẩn HTML5.
Phần tử <html> là phần tử gốc (root) trong tài liệu HTML.
Phần tử <head> chứa thông tin về tài liệu HTML.
Phần tử <title> chứa thông tin tiêu đề của tài liệu.
Phần tử <body> chứa nội dung hiển thị của trang web.
Phần tử <h1> dùng để xác định nội dung chính (quan trọng) thường là tiêu đề.
Phần tử <p> dùng để xác định nội dung văn bản (paragraph).
6. Tham khảo chi tiết các phần tử HTML ở W3Schools
W3Schools.com là một trong những nguồn tài nguyên chuẩn mực và uy tín nhất trên
Internet ở lĩnh vực lập trình web.
Tham khảo chi tiết các phần tử HTML ở W3School, ví dụ:
Trang web hiển thị mọi thông tin liên quan đến phần tử img:
-
Cách thức sử dụng phần tử trong một tài liệu HTML và ví dụ minh hoạ.
Khoa Khoa học và Kỹ thuật Máy tính- Đại học Bách Khoa Tp.HCM
-
-
-
-
Định nghĩa và chức năng phần tử
Loại trình duyệt hỗ trợ, và từ version bao nhiêu
Danh sách các thuộc tính của phần tử và chức năng
Các thông tin liên quan khác
7. Các thẻ HTML5 cơ bản
-
Tham khảo cách khai báo các phần tử HTML cơ bản ở file: basic.html
-
Tham khảo cách khai báo các phần tử HTML5: các files trong thư mục
HTML5_Basic_Elements
III. Bài tập
A. Phần 1
-
Cài đặt Web Server sử dụng chương trình XAMPP theo hướng dẫn
B. Phần 2
-
Sử dụng ngôn ngữ HTML tạo ra một trang web có nội dung như trong file
page_screenshots.pdf và chạy file này trên Web Server đã cài đặt ở phần 1
(nếu có).
-
Ø Ghi chú:
•
•
Phần tử select chứa 2 lựa chọn là: “San Francisco” và “NewYork”.
Các link video được cho bên dưới:
o
o
o
o
IV. Cách thức nộp bài
•
Sinh viên nén phần bài làm của mình (bao gồm tất cả các file liên quan) vào một file zip, sau
trang môn học tương ứng.
•
•
Sinh viên theo dõi deadline nộp bài lab và nộp bài đúng hạn để được tính điểm, mọi trường
hợp nộp bài trễ hạn sẽ không được giải quyết.
Chỉ nhận bài nộp thông qua e-learning, không nhận bài nộp qua email hay các hình thức khác.
--HẾT--
3 trang
28020
Free
Bạn đang xem tài liệu "Tài liệu thực hành môn Lập trình Web - Lab 01", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- tai_lieu_thuc_hanh_mon_lap_trinh_web_lab_01.pdf
Lab01.rar- 1513804.rar
