giáo trình lập trình web nâng cao nghề tin học ứng dụng cao đẳng

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.. Về kỹ năng:

ĀY BAN NHÂN DÂN THÀNH PHà Hâ CHÍ MINH

TR¯âNG CAO ĐÀNG BÁCH KHOA NAM SÀI GÒN

GIÁO TRÌNH MÔN HàC/MÔ ĐUN: L¾P TRÌNH WEB NÂNG CAO

NGÀNH/NGHÀ: TIN HàC ĀNG DĀNG

TRÌNH ĐÞ: CAO ĐÀNG

Ban hành kèm theo Quy ết định số: 459/QĐ-NSG, ngày 31 tháng 08 năm 2022

c ủa Hiệu trưởng Trường Cao Đẳng Bách Khoa Nam Sài Gòn

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

M ĀC LĀC

LâI GIàI THIàU 5

Bài 1: Kết hợp PHP vái MySQL 6

1 Mÿc tiêu: 6

2 Nßi dung bài: 6

2.1 Thiết kế Layout sử dÿng HTML, CSS, Bootstrap 6

2.1.1 Ôn tÁp HTML, CSS 6

2.1.2 Sử dÿng Bootstrap trong thiết kế Layoutweb 13

2.1.3 Hoàn thành giao dián web 13

2.2 Kết nái CSDL 13

2.2.1 T¿o c¢ så dữ liáu 13

2.2.2 Các thao tác xử lý trên c¢ så dữ liáu 21

2.3.1 Truy vấn lọc dữ liáu 21

2.3.2 Truy vấn thêm, sửa, xóa, cÁp nhÁt dữ liáu 25

2.3 Hißn thị, tìm kiếm dữ liáu lên website 28

2.3.1 Hißn thị dữ liáu từ c¢ så dữ liáu lên giao dián 28

2.3.2 Tìm kiếm dữ liáu trên website 28

2.4 QuÁn trị dữ liáu trên website 28

2.4.1 Hißn thị dữ liáu lên trang quÁn trị 28

2.4.3 Thao tác sửa dữ liáu 30

2.4.4 Thao tác xóa dữ liáu 30

Bài tÁp: 30

Bài 2: Hoàn chỉnh Website 32

1 Mÿc tiêu: 32

2 Nßi dung bài: 33

2.1 Website tin tức 33

2.1.1 Thiết kế giao dián 33

2.1.2 Thiết kế c¢ så dữ liáu 36

2.1.4 Hißn thị dữ liáu lên giao dián 44

2.2 Website th°¢ng m¿i 45

2.2.1 Thiết kế giao dián 45

2.2.2 Thiết kế c¢ så dữ liáu 47

2.2.3 QuÁn trị dữ liáu 53

2.3 Xuất bÁn Website 54

2.3.1 Đăng ký host, tên miền 54

Bài tÁp: 65

TÀI LIàU THAM KHÀO: 68

LâI GIàI THIàU

Môn học này thußc khái kiến thức chuyên môn nghề trong ch°¢ng trình đào t¿o ngành tin học ứng dÿng há cao đẳng LÁp trình web nâng cao là môn học bắt bußc trong ch°¢ng trình ngành Tin học ứng dÿng trình đß cao đẳng

Nßi dung giáo trình gãm 2 bài:

- Bài 1: Kết hợp PHP vái MySQL

- Bài 2: Hoàn chỉnh Website

Trong quá trình biên so¿n chúng tôi đã kết hợp kinh nghiám giÁng d¿y trong nhiều năm cāa nhóm tác giÁ vái mong muán có thß giúp cho học sinh – sinh viên dß dàng nắm bắt đ°ợc nßi dung cāa môn học Mặc dù, rất cá gắng trong quá trình biên so¿n, nh°ng chắc chắn không thß tránh khßi những thiếu sót, vì vÁy, nhóm tác giÁ chúng tôi rất mong nhÁn đ°ợc ý kiến đóng góp cāa b¿n đọc đß giáo trình ngày mßt hoàn thián h¢n

Tp HCM, ngày 31 tháng 08 năm 2022 Tham gia biên so¿n

1 Chā biên: ThS Lê Thị Thùy Trang

2 &&&&

3 &&&&

GIÁO TRÌNH MÔN HàC/MÔ ĐUN Tên môn hác/mô đun: LÀP TRÌNH WEB NÂNG CAO

Mã môn hác/mô đun: MH22

Vß trí, tính chất, ý nghĩa và vai trò cÿa môn hác/mô đun:

- Vị trí: Môn học này thußc khái kiến thức chuyên môn nghề trong ch°¢ng trình đào t¿o ngành tin học ứng dÿng há cao đẳng

- Tính chất: LÁp trình web nâng cao là môn học bắt bußc trong ch°¢ng trình ngành Tin học ứng dÿng trình đß cao đẳng

Māc tiêu cÿa môn hác/mô đun:

− Thiết kế đ°ợc giao dián website bằng boottrap, CSS, HTML;

− Sử dÿng đ°ợc câu lánh MySQL kết hợp vái ngôn ngữ lÁp trình PHP đß hißn thị dữ liáu lên trang web;

− QuÁn trị đ°ợc c¢ så dữ liáu website

3 Về năng lực tự chā và trách nhiám:

− Rèn luyán lòng yêu nghề, t° thế tác phong công nghiáp, tính kiên trì, sáng t¿o trong công viác

Nßi dung cÿa môn hác/mô đun:

Bài 1: K¿t hÿp PHP vái MySQL

1 Māc tiêu:

− Sử dÿng đ°ợc các láp cāa bootstrap;

− Kết hợp đ°ợc ngôn ngữ PHP vái MySQL đß hißn thị dữ liáu;

− Thực hián đ°ợc trang quÁn trị dữ liáu

2 Nßi dung bài:

2.1 Thi¿t k¿ Layout sử dāng HTML, CSS, Bootstrap

2.1.1 Ôn t¿p HTML, CSS

Thiết kế trang chā - Home

Thiết kế trang hỗ trợ - Support

Thiết kế trang Blog

Thiết kết trang giái thiáu – About Us

Thiết kế trang liên há - Contact Us

Nguãn: https://www.free-css.com/free-css-templates/

2.1.2 Sử dāng Bootstrap trong thi¿t k¿ Layoutweb

TÁi ứng dÿng bootstrap: https://getbootstrap.com/

- Start Apache và MySQL

- Vào Databases trên thanh menu hoặc kích vào New

- Database name: điền tên database cần t¿o, ví dÿ: tintuc

- Collation: chọn d¿ng ngôn ngữ hißn thị, b¿n có thß chọn utf8_general_ci

- Click Create đß t¿o database

- T¿o table – phpMyAdmin

- Click vào database tintuc å danh sách bên trái, click chọn tab Structure

- ä phần Create table điền tên table (ví dÿ: tin_xahoi) và sá cßt (ví dÿ: 5 cßt)

Click vào button Go đß sang b°ác điền thông tin cho từng cßt

- id: Sá thứ tự cho mỗi hàng dữ liáu (record), sá này sẽ cho tăng tự đßng (auto increment) và th°ãng chọn là khóa chính (primary key), chọn dữ liáu là sá (INT), vái chiều dài 10 ký tự (t°¢ng ứng vái thứ tự lên tái 10 sá tự nhiên)

- title: tiêu đề cho tin tức, do tiêu đề th°ãng ngắn, ta chọn dữ liáu là TEXT vái chiều dài 100 ký tự

- date: ngày viết tin tức, chọn dữ liáu là DATE

- description: dòng mô tÁ ngắn cho tin tức, chọn dữ liáu là TEXT vái chiều dài

200 ký tự

- content: Nßi dung cho tin tức, đây là nßi dung dài, nên chọn kißu dữ liáu là LONGTEXT vái chiều dài 1000 ký tự

- Click button Save bên d°ái đß kết thúc viác t¿o table

- Table vừa t¿o sẽ có d¿ng nh° sau:

- Chỉnh AUTO INCREMENT cho id

- Viác này cần thiết, vì mỗi khi thêm mßt hàng dữ liáu thì mÿc id sẽ tự đßng đ°ợc tăng thêm 1

- T¿i hàng id, cßt Action, Click chọn Change

- ä màn hình điều chỉnh, tìm và click chọn checkbox å vị trí A_I

- Click Save đß thay đổi điều chỉnh và xem kết quÁ

Chỉnh KHÓA CHÍNH cho id:

Mỗi table chỉ có mßt khóa chính, khóa chính có tác dÿng xác định tính duy nhất cāa mỗi hàng dữ liáu trong table, ngoài ra đ°ợc dùng đß t¿o mái liên há 1-n tham chiếu đến các table khác

T¿i hàng id, cßt Action, Click chọn Primary, khi đó sẽ có màn hình confirm xuất hián, click Ok đß xác nhÁn

Tạo 1 record dữ liệu:

- Chọn table tin_xahoi  click chọn tab Insert

- ä màn hình chèn record, điền dữ liáu t°¢ng tự nh° hình bên d°ái:

- id: không cần điền, dữ liáu sẽ tự tăng

- Các vị trí khác chỉ quan tâm đến tr°ãng Value

- Click Go đß insert dữ liáu, nếu tất cÁ đúng sẽ xuất hián câu thông báo <rows inserted=, nếu báo lỗi thì xem thông báo lỗi đß chỉnh cho phù hợp

- Click chọn tab Browser đß xem dữ liáu đ°ợc insert

2.2.2 Các thao tác xử lý trên c¡ sở dữ liáu

2.3.1 Truy vấn lác dữ liáu

Lệnh SELECT trong MySQL:

Lánh SELECT có nhiám vÿ lấy danh sách dữ liáu cāa mßt hoặc nhiều bÁng trong database, tuy nhiên ph¿m vi cāa bài này chúng ta chỉ đề cÁp đến SELECT mßt table, trong bài học về JOIN chúng ta sẽ tìm hißu SELECT nhiều table

Cú pháp cāa lánh SELECT nh° sau:

Trong đó:

- SELECT field1, field2, field3, là danh sách các fields cần lấy

- FROM table_name tên table cần lấy

- WHERE <dieu_kien_loc> là các điều kián đß lấy các dòng dữ liáu

- ORDER BY field_name, ASC|DESC: là cách sắp xếp cho field_name theo kißu ASC (tăng dần) hoặc DESC (giÁm dần)

- LIMIT start, limit là lấy limit records kß từ record thứ start trong kết quÁ

Ví dÿ: Lấy danh sách sinh viên gãm các thông tin sv_id, sv_name,

BÁng các toán tử quan há thông dÿng:

Các toán tử quan há chính là các toán tử thß hián mái quan há giữa hai vế (vế phÁi và vế trái)

Ví dÿ 1: Lấy danh sách sinh viên có sv_id lán h¢n 2

Ví dÿ 2: Lấy danh sách sinh viên có tên không phÁi là Mr Cuong

Ví dÿ 3: Lấy danh sách sinh viên có sv_id bé h¢n 3

BÁng các toán t° luÁn lý thông dÿng:

Toán tử luÁn lý dùng đß thß hián suy luÁn giữa hai mánh đề (mánh đề trái, mánh đề phÁi) và từ đó trÁ về kết quÁ đúng hoặc sai

Ví dÿ 1: Lấy danh sách sinh viên có sv_id > 1 và có tên là Mr Cuong

Ví dÿ 2: Lấy danh sách sinh viên có id = 2 hoặc có tên là Mr Kinh

Lệnh SELECT có ORDER BY:

ORDER dùng đß sắp xếp kết quÁ trÁ về cāa câu truy vấn, nó có hai tham sá

là tên field và kißu sắp xếp Sau đây là cách dùng cāa cÁ hai tr°ãng hợp

Sắp xếp tăng dần:

Sắp xếp giÁm dần:

Lênh SELECT có LIMIT:

LIMIT dùng đß giái h¿n hết quÁ trÁ về và rất th°ãng hay sử dÿng kết hợp vái thuÁt toán phân trang đß tác đß website ch¿y nhanh h¢n Nó có hai tham sá đó là vị trí record cần lấy (start) và lấy bao nhiêu record (limit)

Ví dÿ: Lấy mßt sinh viên đầu tiên trong kết quÁ

Ví dÿ: Lấy hai sinh viên bắt đầu từ sinh viên thứ 2 trong kết quÁ

2.3.2 Truy vấn thêm, sửa, xóa, c¿p nh¿t dữ liáu

L ệnh INSERT trong MySQL:

Cú pháp 1: Khai báo rõ tên column

Khi sử dÿng cú pháp này thì các field å vị trí nào sẽ t°¢ng ứng vái vị trí cāa

nó å VALUES, và å phần khai báo có bao nhiêu column thì å phần value sẽ có bấy nhiêu value t°¢ng ứng

Insert có khóa ngo ại:

- Khi thêm vào bÁng LOP thì thêm bình th°ãng

- Khi thêm vào bÁng SINHVIEN thì bắt bußc giá trị cāa lop_id phÁi tãn t¿i trong bÁng LOP, nếu không sẽ bị báo lỗi ngay

Câu l ệnh UPDATE trong MySQL:

2.3 Hiển thß, tìm ki¿m dữ liáu lên website

2.3.1 Hiển thß dữ liáu từ c¡ sở dữ liáu lên giao dián

2.3.2 Tìm ki¿m dữ liáu trên website

2.4 QuÁn trß dữ liáu trên website

2.4.1 Hiển thß dữ liáu lên trang quÁn trß

2.4.2 Thêm dữ liáu vào c¢ så dữ liáu

2.4.3 Thao tác sửa dữ liáu

2.4.4 Thao tác xóa dữ liáu

Hoàn chỉnh web site

Bài 2: Hoàn chỉnh Website

1 Māc tiêu:

− Hoàn thành website th°¢ng m¿i;

− Hoàn thành website tin tức;

− Upload website lên host

2 Nßi dung bài:

2.1 Website tin tāc

2.1.1 Thi¿t k¿ giao dián

Nguãn: https://www.free-css.com/free-css-templates/

2.1.2 Thi¿t k¿ c¡ sở dữ liáu

- Database name: điền tên database cần t¿o, ví dÿ: tintuc

- Collation: chọn d¿ng ngôn ngữ hißn thị, b¿n có thß chọn utf8_general_ci

- Click Create đß t¿o database

- T¿o table – phpMyAdmin

- Click vào database tintuc å danh sách bên trái, click chọn tab Structure

- Click button Save bên d°ái đß kết thúc viác t¿o table

- Table vừa t¿o sẽ có d¿ng nh° sau:

- Chỉnh AUTO INCREMENT cho id

- Viác này cần thiết, vì mỗi khi thêm mßt hàng dữ liáu thì mÿc id sẽ tự đßng đ°ợc tăng thêm 1

- T¿i hàng id, cßt Action, Click chọn Change

- ä màn hình điều chỉnh, tìm và click chọn checkbox å vị trí A_I

Tạo 1 record dữ liệu:

- Chọn table tin_xahoi  click chọn tab Insert

- Click chọn tab Browser đß xem dữ liáu đ°ợc insert

2.1.3 QuÁn trß dữ liáu

Thêm d ữ liáu vào c¡ sở dữ liáu

Thao tác s ửa dữ liáu

Thao tác xóa dữ liáu

2.1.4 Hiển thß dữ liáu lên giao dián

2.2 Website th°¡ng m¿i

2.2.1 Thi¿t k¿ giao dián

2.2.2 Thi¿t k¿ c¡ sở dữ liáu

- Database name: điền tên database cần t¿o, ví dÿ: tintuc

- Collation: chọn d¿ng ngôn ngữ hißn thị, b¿n có thß chọn utf8_general_ci

- Click Create đß t¿o database

- T¿o table – phpMyAdmin

- Click vào database tintuc å danh sách bên trái, click chọn tab Structure

- ä phần Create table điền tên table (ví dÿ: tin_xahoi) và sá cßt (ví dÿ: 5 cßt)

Click vào button Go đß sang b°ác điền thông tin cho từng cßt

- Click button Save bên d°ái đß kết thúc viác t¿o table

- Table vừa t¿o sẽ có d¿ng nh° sau:

Tạo 1 record dữ liệu:

- ä màn hình chèn record, điền dữ liáu t°¢ng tự nh° hình bên d°ái:

- id: không cần điền, dữ liáu sẽ tự tăng

- Các vị trí khác chỉ quan tâm đến tr°ãng Value

- Click Go đß insert dữ liáu, nếu tất cÁ đúng sẽ xuất hián câu thông báo <rows inserted=, nếu báo lỗi thì xem thông báo lỗi đß chỉnh cho phù hợp

- Click chọn tab Browser đß xem dữ liáu đ°ợc insert

2.2.3 QuÁn trß dữ liáu

Thêm d ữ liáu vào c¡ sở dữ liáu

Thao tác s ửa dữ liáu

Thao tác xóa dữ liáu

2.3 Xuất bÁn Website

2.3.1 Đăng ký host, tên miÁn

T¿o mái 1 Host mißn phí

- B°ác 1: Đăng ký hosting cāa 000webhost Free

Truy cÁp link: https://vn.000webhost.com/

Click Free Sign Up đß đăng ký tài khoÁn

- B°ác 2: B¿n điền thông tin đăng ký

- B°ác 3: Há tháng sẽ gửi cho b¿n mßt email, b¿n må email đó ra rãi nhấp vào Verify email đß xác nhÁn

Q uÁn lý Host b¿ng File Manager:

File manager là tính năng quÁn lý file cho phép chỉnh sửa, liát kê file trong các th° mÿc, quÁn lý file hiáu quÁ Ngoài các tính năng c¢ bÁn trên File manager trên cho phép thực hián nén và giÁi nén các file trên hosting

Truy cÁp vào File Manager trên Cpanel

1 Chỉnh sửa File

- B°ác 1: Tìm đến file cần chỉnh sửa Chọn Edit

- B°ác 2: Các thông sá đß mặc định, Chọn Edit

- B°ác 3: Sửa nßi dung văn bÁn Khi đã thao tác xong chọn Save đß l°u nßi dung chỉnh sửa

2 Thay đổi tên file hoặc th° mÿc

- B°ác 1: Tìm file hoặc th° mÿc cần đổi tên Chọn Rename

- B°ác 2: NhÁp tên muán đổi Chọn Rename File đß l°u tên mái đổi

3 Copy file hoặc th° mÿc

- B°ác 1: Tìm file hoặc th° mÿc cần Copy Chọn Copy

L°u ý: Có thß chọn nhiều file hoặc nhiều th° mÿc đß copy cùng lúc Bấm tổ hợp phím Crtl + chußt trái

- B°ác 2: Chọn đ°ãng d¿n muán copy Chọn Copy File đß copy

4 Nén file hoặc th° mÿc

- B°ác 1: Chọn file hoặc th° mÿc cần nén Chọn Compress

- B°ác 2: Chọn định d¿ng nén Chọn Compress File đß nén

5 Phân quyền cho file hoặc th° mÿc

- B°ác 1: Chọn file hoặc th° mÿc cần phân quyền Click chußt phÁi > Chọn Change Permissions

- B°ác 2: Tích vào ô vuông đß set quyền Chọn Change Permissions đß thay đổi quyền

HOSTVN khuyến cáo b¿n nên đß các thông sá vái th° mÿc là 755 và file là 644

L°u ý:

Thao tác thay đổi quyền:

– <Read= (Đọc): đ°ợc bißu dißn bằng sá 4

– <Write= (Ghi / Chỉnh sửa): đ°ợc bißu dißn bằng sá 2

– <Execute= (Thực thi): đ°ợc bißu dißn bằng sá 1

Thay đổi quyền h¿n trên các file/th° mÿc vái các đái t°ợng:

– <User= – chā så hữu cāa file/th° mÿc

– <Group= – Nhóm mà User là thành viên

– <Word=: những ng°ãi còn l¿i

Up dữ liáu lên Host:

B°ác 1: Đß upload file, chọn Upload

B°ác 2: Chọn Select File đß tÁi file từ máy tính b¿n lên Cpanel

B°ác 3: Đợi quá trình tÁi lên hoàn tất

L°u ý: Kích th°ác táp tÁi lên tái đa: 1GB

T¿o Ftp Account:

FTP viết tắt từ File Transfer Protocol, mßt giao thức truyền tÁi tÁp tin từ mßt máy tính đến máy tính khác thông qua mßt m¿ng TCP hoặc qua m¿ng Internet Thông qua giao thức FTP, ng°ãi dùng có thß tÁi dữ liáu nh° hình Ánh, văn bÁn, các tÁp tin media (nh¿c, video)& từ máy tính cāa mình lên máy chā đang đặt å mßt n¢i khác hoặc tÁi các tÁp tin có trên máy chā về máy tính cá nhân T¿i FTP, b¿n sẽ có quyền quÁn lý toàn bß các dữ liáu d¿ng tÁp tin và th° mÿc có trên host ngo¿i trừ database Tất cÁ các gói host b¿n mua có hỗ trợ control panel cPanel, DirectAdmin,&đều hỗ trợ sẵn FTP qua cổng kết nái 21

Giao thức FTP đ°ợc sử dÿng nhiều nhất vào mÿc đích truyền tÁi dữ liáu Khi

sử dÿng FTP, b¿n có thß gửi các tÁp tin có dung l°ợng vài trăm MB mßt cách dß dàng, không cần phÁi lo lắng về viác ng°ãi nhÁn không nhÁn đ°ợc file H¢n nữa, b¿n có thß cùng lúc tÁi (upload/ download) nhiều tÁp tin cùng mßt lúc đß tiết kiám thãi gian Tuy nhiên, yếu tá tác đß đ°ãng truyền cũng đóng vai trò quan trọng trong viác truyền tÁi dữ liáu qua FTP

Cách t¿o tài khoÁn FTP trên Hosting

- B°ác 1: trên giao dián DirectAdmin tìm <Your Account= -> <FTP Managerment=

Click <Create FTP account=

- B°ác 2: Điền thông tin cho user FTP -> Click <Create= t¿o user

FTP Username : User FTP

Enter Password : MÁt khẩu user

Re-Enter Password : Xác nhÁn mÁt khẩu user