Môn Lập Trình WebBáo cáo Lập Trình Website

TRƯỜNG ĐH SƯ PHẠM TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
----------&&&&----------

MÔN LẬP TRÌNH WEB


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

LỜI NÓI ĐẦU

C

ùng với sự phát triển của Internet, thương mại điện tử ngày càng trở nên phổ biến trên toàn
thế giới, song song đó là sự ra đời và phát triển của các ngôn ngữ lập trình cho phép chúng
ta thiết kế và xây dựng các ứng dụng thương mại điện tử dưới nhiều hình thức khác nhau.
Và một trong những ngôn ngữ lập trình website thông dụng nhất hiện nay là HTML và PHP
Lập trình web là môn học thú vị, giúp sinh viên có cơ hội làm quen với vai trò là người lập trình
và quản trị website với những mô hình bài toán quản lý và xử lý dữ liệu tốt nhất, qua đó nâng cao
khả năng áp dụng vào trong thực tiễn cuộc sống.
Trang web quản lý bán sản phẩm tivi, là mô hình em chọn làm đề tài cho bộ môn này
Trong quá trình làm đề tài, em đã cố gắng học tập, tìm tài liệu, lắng nghe sự chỉ bảo tận tình của
thầy trong các buổi học. Do sự hiểu biết kiến thức chưa sâu về bộ môn lẫn kỹ thuật lập trình. Đề
tài hoàn thành nhưng vẫn còn nhiều thiết sót.
Xin thầy xem xét lượng thứ, và đóng góp ý kiến để em ý thức hơn và rút kinh nghiệm cho các đề
tài sau này.
Cuối cùng, em chân thành cám ơn thầy đã tạo cơ hội cho em hiện đề tài.

K 33103244

2

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin
NHẬN XÉT CỦA GIÁO VIÊN BỘ MÔN

.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................

.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................

.............................................................................................................................................................................
.............................................................................................................................................................................
.............................................................................................................................................................................

K 33103244

3

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

MỤC LỤC
CHƯƠNG 1 : TIN HỌC HÓA QUẢN LÝ THÔNG TIN
I. Vai trò của Tin Học trong quản lý .............................................................................5
II. Nhu cầu và lợi ích thực tiễn.......................................................................................5

CHƯƠNG 2 :GIẢI PHÁP CHO TRANG WEB
I.
II.
III.
IV.
V.

Định hướng chung.....................................................................................................6

Các mục chức năng của website ..............................................................................6
Yêu cầu chức năng trang web....................................................................................6
Giao diện mẫu............................................................................................................7
Môi trường cài đặt lập trình.......................................................................................7

CHƯƠNG 3 : CỤ THỂ HÓA HOẠT ĐỘNG TRANG WEB
I. Phân tích yêu cầu hệ thống ......................................................................................8
1. Định nghĩa dữ liệu mô tả Use Case .......................................................................8
2. Chi tiết hóa chức năng của website .......................................................................8
3. Sơ đồ Use Case ......................................................................................................9
4. Sơ đồ dòng dữ liệu (DFD)......................................................................................10
II. Thiết kế cơ sở dữ liệu “ quản lý bán tivi” bằng phpmyadmin ..................................11
1. Cấu trúc các bảng ..................................................................................................11
2. Quan hệ giữa các bảng...........................................................................................13

CHƯƠNG 4 : PHÂN TÍCH CODE TẠO TRANG WEB
I.
II.
III.
IV.
V.
VI.
VII.
VIII.
IX.
X.

Lược đồ lưu trữ - ý nghĩa code xử lý dữ liệu ............................................................14
Xử lý giao diện ..........................................................................................................15
Xử lý định dạng.........................................................................................................16

Xử lý file cài đặt cơ sở dữ liệu tự động – kết nối cơ sở dữ liệu.................................16
Xử lý truy vấn Table TIVI ( XEM + THÊM + XÓA + SỬA )..................................17
Xử lý truy vấn Table KHÁCH HÀNG ( XEM + THÊM + XÓA + SỬA )................21
Xử lý truy vấn Table HÓA ĐƠN ( XEM + THÊM + XÓA + SỬA )........................26
Xử lý truy vấn Table ĐẶT HÀNG ( XEM + THÊM + XÓA + SỬA )......................26
Xử lý truy vấn Tìm kiếm............................................................................................27
Xử lý hệ thống ĐĂNG NHẬP ..................................................................................28

CHƯƠNG 5 : HƯỚNG DẪN – DEMO TRANG WEB
I.
II.
III.
IV.

Hướng dẫn cài đặt ...................................................................................................29
Demo trang web.........................................................................................................30
Đường link trang web được upload trên mạng..........................................................34
Tài liệu tham khảo ....................................................................................................34

K 33103244

4

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM

Khoa Công Nghệ Thông Tin

CHƯƠNG 1 : TIN HỌC HÓA QUẢN LÝ THÔNG TIN
I. Vai trò của tin học trong quản lý
Thông tin từ lâu đã được đánh giá có vai trò quan trọng trong quản lý kinh tế ngày nay . Việc nhận
định “ Ai nắm được thông tin, người đó sẽ chiến thắng” lại trở nên chính xác. Chính từ việc tin
học hóa thông tin với sự trợ giúp của Computer và Phần mềm đã đưa đến những khái niệm mới
như Kỹ Nguyên của kỹ thuật số, Nền kinh tế trí thức…
Việc tin học hóa vào quản lý hoạt động sản xuất kinh doanh sẽ giúp cho các doanh nghiệp có khả
năng cạnh tranh trong một nền kinh tế thị trường, đồng thời cạnh tranh với các doanh nghiệp nước
ngoài được đánh giá qua các đặc điểm sau :
•

Tính nhanh chóng : Bất kỳ lúc nào cũng có thể trả lời các thông tin một cách chính xác.

•

Tính thích ứng : Giúp người quản lý điều hành trôi chảy các hoạt động của đơn vị và có thể
tính toán được công việc của mình đã điều hành trong từng giai đoạn và qua đó vạch ra
phương hướng hoạt động trong tương lai. Điều hành được tình hình tài chính của doanh
nghiệp.

•

Tính an toàn : Bảo đảm sự an toàn dữ liệu của doanh nghiệp.

II. Nhu cầu và lợi ích thực tiễn
Internet và website đã không còn là thuật ngữ tin học quá xa lạ với chúng ta. Với tốc độ phát triển
như hiện nay, website đã chứng tỏ nó không thể thiếu trong cuộc sống hiện đại, con người càng có
nhiều cơ hội phát triển về mọi mặt.

Nhiều hoạt động sống của con người đã, đang và sẽ ngày càng gắn liền với internet website. Nó
cung cấp cho bạn cơ hội giao thương, gặp gỡ các đối tác, đặc biệt là đối tác nước ngoài một cách
thuận lợi.
Internet website mang những thông tin quảng bá, khuyến mãi đến người sử dụng vô cùng nhanh
chóng. Website giúp bạn tiếp tục điều hành các công việc và giữ liên lạc mật thiết với những người
bạn khi khoảng cách là một trở ngại lớn …
Hàng ngày, Internet website không chỉ mang đến cho chúng ta những thông tin nóng bỏng nhất,
những lợi ích kinh doanh tốt nhất, những hình thức giải trí mới lạ, đa dạng phong phú mà nó còn
cung cấp cho chúng ta một cách thức học tập nâng cao trình độ rất tiện lợi thú vị, độc đáo với
những website sinh động đặc sắc với các biểu mẫu, đồ họa , âm thanh , ảnh động …

K 33103244

5

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

CHƯƠNG 2 : GIẢI PHÁP CHO TRANG WEB
I. Định hướng chung để xây dựng trang web
1. Nhu cầu thiết kế
-

Thiết lập tạo cơ hội tiếp xúc với khách hàng ở khắp mọi nơi.

Giới thiệu các sản phẩm dịch vụ một cách sinh động và mang tính tương tác cao .
Tạo cơ hội để bán sản phẩm hàng hóa một cách chuyên nghiệp mà không tốn nhiều
chi phí
Cơ hội phục vụ khách hàng tốt hơn , đạt sự hoạt động lớn từ khách hàng
Tạo một hình ảnh chuyên nghiệp trước công chúng, công cụ hiệu quả để thực hiện các
chiến lược PR và maketing.

2. Yêu cầu về trang web
-

Website phải được thiết kế đồng nhất về thẩm mỹ, dùng thống nhất vài gam màu nhất
định, font chữ, cỡ chữ thống nhất trên các trang .
Website phải có logo đặc trưng của công ty.
Hình ảnh sản phẩm tiêu biểu nhất.
Thông tin ngắn gọn, súc tích đầy đủ.
Phải có cơ sở dữ liệu mới khi cần thiết.
Có công cụ cập nhật thông tin cho khách hàng một cách nhanh chóng và dễ dàng n

II. Chức năng của website
-

Trang chủ
Giới thiệu
Sản phẩm
Xem hàng
Tìm kiếm
Đặt hàng
Quản trị

III. Yêu cầu về chức năng

-

Tính tiện dụng : giao diện thân thiện, dễ sử dụng đối người dùng và quản trị .
Tính hiệu quả : Đảm bảo việc truy xuất nhanh đến các trang và khả năng kiểm soát lỗi
tốt.
Tính tương thích : Hỗ trợ tốt trên các trình duyệt IE, Firefox…
Tính tiến hóa.

K 33103244

6

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

IV. Giao diện chính

V. Môi trường cài đặt lập trình
-

Xây dựng cơ sở dữ liệu trên PHPMYADMIN
Quản trị bằng ngôn ngữ PHP

-

Macromedia Dreamweaver 8.0
Xampp Control Panel

K 33103244

7

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

CHƯƠNG 3 : CỤ THỂ HÓA HOẠT ĐỘNG TRANG WEB
I. Phân tích yêu cầu hệ thống
1. Định nghĩa dữ liệu mô tả USE CASE
•

Admin - Người quản trị hệ thống
Amin là người quản trị hệ thống website, chịu trách nhiệm quản lý tất cả các thông
tin người dùng thuộc các đối tượng khác nhau . Ngoài ra nhiệm vụ quan trọng của
phía quản trị trang web là cầu nối liên hệ tương tác với khách hàng ( khách viếng
thăm ).

•

Vistors – Khách viếng thăm
Khách viếng là đối tượng phục vụ chủ yếu của hệ thống, là người có nhu cầu sử
dụng các dịch vụ.

•

Exchange Info - Trao đổi thông tin
Trao đổi thông tin là việc của người quản trị website có nhu cầu gửi thông báo đến
cho đối tượng khác và ngược lại.

•

Login – Đăng nhập
Hệ thống này phục vụ cho admin + vistors… có nhu cầu đăng nhập tùy theo mức độ
khác nhau.

•

Register services – Đăng ký dịch vụ
Đây là quá trình khách viếng thăm đăng ký sử dụng chức năng của hệ thống.

•

Search – Tìm kiếm
Đây là một chúc năng mà người sử dụng tìm kiếm dịch vụ hay theo một tiêu chí.

2. Chi tiết hóa chức năng của trang Website Digital Q.NAM-TIVI
 Đối với KHÁCH HÀNG
 Xem thông tin giới thiệu về công ty.
 Xem các sản phẩm tivi của công ty.

 Chi tiết thông tin chi tiết từng sản phẩm
 Tìm kiếm các sản phẩm theo nhu cầu
 Đặt hàng trực tuyến.
 Đối với người QUẢN TRỊ
 Mật khẩu đăng nhập.
 Cập nhật thông tin.
 Thêm – Xóa – Sửa dữ liệu gốc.
 Tương tác với khách hàng
K 33103244

8

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

3. Sơ đồ USE - CASE

K 33103244

9

Tin 4C - BT

Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

4. Sơ đồ dòng dữ liệu (DFD)

II. Thiết kế dữ liệu “quản lý bán tivi” bằng PHPMYADMIN
K 33103244

10

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

Quản lý bán TIVI

1. Cấu trúc Bảng (Các Field được gạch dưới và in đậm là khóa chính )

K 33103244

11

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

K 33103244

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

12

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

2. Quan hệ giữa các bảng

K 33103244

13

Tin 4C - BT

Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

CHƯƠNG 4 : PHÂN TÍCH CODE TẠO TRANG WEB
I. Lược đồ lưu trữ - ý nghĩa code xử lý dữ liệu

K 33103244

14

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

II. Xử lý giao diện
-

Viết ngôn ngữ lập trình html, sao đó chuyển qua php cho đồng nhất dễ quản lý .
Sử dụng kỹ thuật template, Framset gồm 3 khung (Trái, trên, phải )
Kỹ thuật Swap – Image, pop – up menu,….
Kết nối nút chức năng đến code xử lý dữ liệu.

Minh họa :

Index.php

Quantri.php

K 33103244

15

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

III. Xử lý định dạng ( dinhdang.css , phongchu.php)
-

Giúp cho quá trình định dạng toàn bộ trang web đồng nhất.

IV. Xử lý cài đặt và kết nối cơ sở dữ liệu.
1. Install.php
- Tạo cơ sở database “ Quản lý bán tivi” .
- Tạo 8 bảng mẫu như trên có dữ liệu một cách tự động.
2. mysql.php

-

Nhiệm vụ kết nối đến cơ sở dữ liệu trong PHPMYADMIN
Sẽ được gọi lại trong các trang xử lý dữ liệu.

V. Xử lý truy vấn TABLE TIVI ( XEM + THÊM SP)
1. XEM ( SELECT … FROM…)
II.1
-

Mục đích

Kết nối đến CSDL
Cách hiển thị dữ liệu dưới dạng list cột, có link qua trang chi tiết và hiển thị thông tin
chi tiết tương ứng với link đã chọn.
1.1 Yêu cầu

-

K 33103244

Tạo 2 trang, trong đó
Trang đầu hiển thị thông tin các sản phẩm tivi dưới dạng list và có link như hình sau

16

Tin 4C - BT


Lập trình website

Nguyễn Đỗ Quỳnh Nam

-

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

Trang sau hiển thị chi tiết của sàn phẩm tivi đã được họn trang trước

1.2 Thực hiện
Trang listcotlink2.php
- Khởi động chế độ kết nối dữ liệu

-

Để đọc bảng dùng câu truy vấn

-

Đếm số lượng mẩu tin

-

Duyệt mẫu tin có được dùng hàm

-

Khai báo một biến
và tăng dần theo các mẫu tin được duyệt
Đối với mỗi mẫu tin được duyệt, kiểm tra xem $stt có chia hết cho 2 hay không, nếu

có thì in dòng mới, nếu không thì xuất tiếp các cột trong cùng một dòng.
Trong mỗi cột ( mỗi mẫu tin), xuất ra table có 3 dòng, dòng đầu tiên là tên tivi dạng
link có kèm theo mã tivi dòng thứ hai là kích cỡ và giá bán được định dạng bằng hàm
, dòng thứ 3 là hình ảnh của nguồn được lấy từ cột hình trong CSDL

-

K 33103244

17

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

List_chi_tiet_sp.php
-

Khởi động chế độ kết nối dữ liệu

-

Lấy giá trị mã tivi mà người sử dụng chọn bằng hàm

-

Đọc bảng vời điều kiện lọc là mã tivi trong bảng bằng với mã tivi được chọn

-

K 33103244

Đếm số lượng mẩu tin
Duyệt mẫu tin có được dùng hàm
Đối với mẫu tin thỏa, xuất một table có 3 dòng
- Dòng 1 : Tên tivi
- Dòng 2 : có hai cột
 Cột 1 : Hình ảnh
 Cột 2 : Thông tin
18

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam
-

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

Dòng 3 : Các link liên kết quay về và đặt hàng .

2. THÊM SẢN PHẨM TIVI ( INSERT INTO … )
II.2

Mục đích
- Kết nối đến CSDL
- Cập nhật cơ sở dữ liệu sản phẩm cho trang web.
II.3
Yêu cầu
- Tạo trang với giao diện

II.4
Thực hiện
- From
• Đặt tên from
• Thiết lập phương thức cho from là post
• Và action của From là tên của trang
- Điều khiển
• Sử dụng điểu khiển TextField, List/memu, Buton
• Trong đó đọc các loại Tivi trong bảng loại tivi và gán cho list/menu loai
Tivi

K 33103244

19

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

•

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

Đọc các hãng Tivi và gán cho list/menu hãng Tivi

-

Khởi động chế độ kết nối dữ liệu

-

Lấy giá trị trên from gán cho các biến tương ứng

-

Kiểm tra giá trị nhập vào với câu lệnh

K 33103244

20

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

-

ĐH.Sư phạm TP.HCM

Khoa Công Nghệ Thông Tin

Thông báo kết quả thêm mới
Xuất thông tin sản phẩm tivi được thêm vào theo định dạng tương tự như trang
chi_tiet_sp.php

VI. Xử lý truy vấn TABLE KHÁCH HÀNG ( XEM + THÊM + XÓA + SỬA)
1. XEM ( SELECT … FROM…)
1.1 Mục đích
- Kết nối đến CSDL
- Hiển thị dữ liệu có định dạng
1.2 Yêu cầu

1.3 Thực hiện
- Khởi động chế độ kết nối dữ liệu

-

Để đọc bảng dùng câu truy vấn

-

Đếm số lượng mẩu tin

-

Duyệt mẫu tin có được dùng hàm

K 33103244

21

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

-

Đặt một biến để đếm từng dòng bắt đầu từ 0, và tăng dần theo dòng.
Nếu biến đếm chia hết cho 2 ( dòng chẵn ) thì xuất ra một dòng có màu nền khác
màu so với dòng lẻ

-

Link liên kết đến trang Xóa – Sửa

2. THÊM KHÁCH HÀNG MỚI ( INSERT INTO….)
-

Tương tự như quá trình thêm Sản Phẩm Tivi
Giao diện

-

Thực hiện

3. SỬA KHÁCH HÀNG ( UPDATE…. SET….)
II.1 Mục đích
K 33103244

22

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam
-

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

Kết nối đến CSDL
Cập nhật cơ sở dữ liệu table khách hàng trong PHPMYADMIN

II.2 Yêu cầu

II.3 Thực hiện

-

K 33103244

From

•
•
•

Đặt tên from
Thiết lập phương thức cho from là post
Và action của From là tên của trang
23

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam
-

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

Điều khiển
•
•

Sử dụng điểu khiển TextField, Radio Gruop, Buton
Trong đó mã khách hàng không cho người dùng cập nhật

-

Lấy mã khách hàng được chọn thông qua biến $_REQUEST

-

Đọc bảng dùng mysql_query(...) với điều kiện lọc mã khách hàng bằng với mã
khách hàng trong bảng khach_hang.

-

Lấy các giá trị đọc được ở mẩu tin thỏa điều kiện và gán vào cho các điều khiển
tương ứng.

-

Lấy các giá trị mới (khi cập nhật)

-

Cập nhật lại thông tin của khách hàng vào bảng bằng lệnh mysql_query("update …
set …").

-

Tạo link liên kết

4. XÓA KHÁCH HÀNG ( DELETE…FROM)
-

a. Mục đích
Kết nối đến CSDL
Xóa cơ sở dữ liệu table khách hàng trong PHPMYADMIN
b. Yêu cầu

K 33103244

24

Tin 4C - BT


Lập trình website
Nguyễn Đỗ Quỳnh Nam

ĐH.Sư phạm TP.HCM
Khoa Công Nghệ Thông Tin

c. Thực hiện

K 33103244

25

Tin 4C - BT