Giáo trình "Lập trình web nâng cao (Nghề: Tin học ứng dụng - Cao đẳng)" được biên soạn nhằm giúp sinh viên trình bày được quá trình trao đổi dữ liệu giữa server và client; nắm được cú pháp lệnh nhúng mã PHP; hiểu được trình tự các bước kết hợp bootstrap, CSS, HTML; trình bày đúng cú pháp câu lệnh MySQL. Mời các bạn cùng tham khảo!
AMBIENT/
Chủ đề:
Nội dung Text: Giáo trình Lập trình web nâng cao (Nghề: Tin học ứng dụng - Cao đẳng) - Trường Cao đẳng Bách khoa Nam Sài Gòn (2023)
- Ủ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ố: 451/QĐ-NSG, ngày 08 tháng 08 năm 2023
của Hiệu trưởng Trường Cao Đẳng Bách Khoa Nam Sài Gòn
Tp. Hồ Chí Minh, năm 2023
- Giáo trình Lập trình web nâng cao
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.
Trang 2/68
- Giáo trình Lập trình web nâng cao
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.3. Quản trị dữ liệu ...............................................................................................42
Trang 3/68
- Giáo trình Lập trình web nâng cao
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
Trang 4/68
- Giáo trình Lập trình web nâng cao
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. ………….
Trang 5/68
- Giáo trình Lập trình web nâng cao
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:
1. Về kiến thức:
− Trình bày được quá trình trao đổi dữ liệu giữa server và client;
− Trình bày được cú pháp lệnh nhúng mã PHP;
− Trình bày được trình tự các bước kết hợp bootstrap, CSS, HTML;
− Trình bày đúng cú pháp câu lệnh MySQL.
2. Về kỹ năng:
− 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
Trang 6/68
- Giáo trình Lập trình web nâng cao
Trang 7/68
- Giáo trình Lập trình web nâng cao
Thiết kế trang hỗ trợ - Support
Trang 8/68
- Giáo trình Lập trình web nâng cao
Thiết kế trang Blog
Trang 9/68
- Giáo trình Lập trình web nâng cao
Thiết kết trang giới thiệu – About Us
Trang 10/68
- Giáo trình Lập trình web nâng cao
Trang 11/68
- Giáo trình Lập trình web nâng cao
Thiết kế trang liên hệ - Contact Us
Trang 12/68
- Giáo trình Lập trình web nâng cao
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/
Giải nén thư mục
Chép tập tin cần sử dụng
2.1.3. Hoàn thành giao diện web
2.2. Kết nối CSDL
2.2.1. Tạo cơ sở dữ liệu
- Start Apache và MySQL
- Vào Databases trên thanh menu hoặc kích vào New
Trang 13/68
- Giáo trình Lập trình web nâng cao
- 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
Trang 14/68
- Giáo trình Lập trình web nâng cao
- 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ự.
Trang 15/68
- Giáo trình Lập trình web nâng cao
- 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:
Trang 16/68
- Giáo trình Lập trình web nâng cao
- 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ả.
Trang 17/68
- Giáo trình Lập trình web nâng cao
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.
Trang 18/68
- Giáo trình Lập trình web nâng cao
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.
Trang 19/68
- Giáo trình Lập trình web nâng cao
- Click chọn tab Browser để xem dữ liệu được insert.
Trang 20/68
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
