Luận văn tốt nghiệp - Xây dựng website thương mại điện tử

TRƢỜNG ĐẠI HỌC KIÊN GIANG
KHOA THÔNG TIN - TRUYỀN THÔNG

TRẦN VĂN THỊNH

XÂY DỰNG WEBSITE
THƢƠNG MẠI ĐIỆN TỬ

ĐỒ ÁN TỐT NGHIỆP
Ngành: Công Nghệ Thông Tin
Mã số ngành: 7480201

Kiên Giang – Năm 2019


TRƢỜNG ĐẠI HỌC KIÊN GIANG
KHOA THÔNG TIN - TRUYỀN THÔNG

TRẦN VĂN THỊNH
MSSV: 1501206099

XÂY DỰNG WEBSITE
THƢƠNG MẠI ĐIỆN TỬ
ĐỒ ÁN TỐT NGHIỆP
Ngành: Công Nghệ Thông Tin
Mã số ngành: 7480201

GIẢNG VIÊN HƢỚNG DẪN
Ths. NGUYỄN MINH ĐỨC

Kiên Giang – Năm 2019

LỜI CẢM ƠN
Em xin chân thành cảm ơn Ban giám hiệu Trƣờng Đại học Kiên Giang,
khoa Thông Tin & Truyền Thông đã cố gắng tạo môi trƣờng học tập và làm
việc tốt đẹp nhất để em có thể đủ kiến thức và kỉ năng cho công việc sau
này.
Em chân thành cảm ơn thầy – Ths.Nguyễn Minh Đức, ngƣời đã hƣớng
dẫn cho em trong suốt thời gian làm Khóa Luận Tốt Nghiệp. Mặc dù thầy
bận nhiều công việc nhƣng không ngần ngại chỉ dẫn em, định hƣớng đi cho
em, để em hoàn thành tốt nhiệm vụ. Một lần nữa em chân thành cảm ơn thầy
và chúc thầy dồi dào sức khoẻ.
Tuy nhiên vì kiến thức chuyên môn còn hạn chế và bản thân còn thiếu
nhiều kinh nghiệm thực tế nên nội dung của báo cáo không tránh khỏi những
thiếu xót, em rất mong nhận sự góp ý, chỉ bảo thêm của quý thầy cô để báo
cáo này đƣợc hoàn thiện hơn.
Một lần nữa xin gửi đến Ban giám hiệu Trƣờng Đại học Kiên Giang và
thầy cô khoa Thông Tin & Truyền Thông lời cảm ơn chân thành và tốt đẹp
nhất!
Châu Thành, ngày.... tháng .... năm 2019
Sinh viên thực hiện

Trần Văn Thịnh

i


LỜI CAM ĐOAN
Tôi cam đoan rằng luận văn này là do chính tôi thực hiện, các thông tin
về số liệu, hình ảnh, kết quả đã đƣợc trình bày trong luận văn này là trung

thực và đề tài không trùng với bất kỳ đề tài nghiên cứu khoa học nào.
Châu Thành, ngày.... tháng .... năm 2019
Sinh viên thực hiện

Trần Văn Thịnh

ii


NHẬN XÉT CỦA NGƢỜI HƢỚNG DẪN
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
.....................................................................................................................
Châu Thành, ngày.... tháng .... năm 2019

Ngƣời hƣớng dẩn

iii


BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƢỜNG ĐẠI HỌC KIÊN GIANG

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập-Tự do-Hạnh phúc

PHIẾU ĐÁNH GIÁ ĐỀ TÀI TỐT NGHIỆP
Họ và tên ngƣời đánh giá: ……………………………………………………...
Trách nhiệm trong hội đồng: …………………………………………………...
Họ và tên sinh viên: ………………………………… MSSV: ………………...
Tên đề tài: ………………………………………………………………………
…………………………………………………………………………………..
…………………………………………………………………………………..
Ý KIẾN NHẬN XÉT
1. Đánh giá về chất lượng đề tài tốt nghiệp:
………………………………………………………………………………………
……………………………………………………………………………………….
………………………………………………………………………………………
………………………………………………………………………………………
2. Đánh giá về trình độ, kiến thức của sinh viên (trình bày và trả lời câu hỏi trƣớc
hội đồng)
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………

3. Điểm số (theo thang điểm 10; số lẻ 0,5): ……………………………………….
4. Ý kiến đề nghị
………………………………………………………………………………………
………………………………………………………………………………………

Châu Thành, ngày.... tháng .... năm 2019
Ngƣời đánh giá
iv


MỤC LỤC
LỜI NÓI ĐẦU ..................................................................................................... 1
CHƢƠNG 1: TỔNG QUAN VỀ ĐỀ ................................................................... 2
1.1. TỔNG QUAN VỀ ĐỀ TÀI ............................................................................ 2
1.1.1. Lý do chọn đề tài ........................................................................................ 2
1.1.2. Mục đích..................................................................................................... 3
CHƢƠNG 2: TÌM HIỂU VỀ THƢƠNG MẠI ĐIỆN TỬ.................................. 4
2.1. THƢƠNG MẠI ĐIỆN TỬ LÀ GÌ? ................................................................. 4
2.2. LỢI ÍCH CỦA THƢƠNG MẠI ĐIỆN TỬ. .................................................... 4
2.3. ỨNG DỤNG CỦA THƢƠNG MẠI ĐIỆN TỬ. .............................................. 5
CHƢƠNG 3: TÌM HIỂU VỀ NGÔN NGỮ LẬP TRÌNH VÀ CÔNG CỤ HỔ
TRỢ...................................................................................................................... 6
3.1. NGÔN NGỮ LẬP TRÌNH. ............................................................................ 6
3.1.1. Ngôn ngữ HTML. ........................................................................................ 6
3.1.2. Ngôn ngữ CSS ............................................................................................ 6
3.1.3. Ngôn ngữ JQUERY ..................................................................................... 8
3.1.4. Ngôn ngữ PHP ............................................................................................ 9
3.2. CÔNG CỤ HỔ TRỢ..................................................................................... 10
3.2.1. Công cụ Xampp. ........................................................................................ 10
3.2.2. Công cụ Sublime Text 3............................................................................. 11

3.2.3. Công cụ google chrome. ............................................................................ 11
3.2.4. Adobe Photoshop. ...................................................................................... 12
CHƢƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ............................... 13
4.1. PHÂN TÍCH YÊU CẦU ĐỀ TÀI. ................................................................ 13
4.1.1. Phân tích yêu cầu ngƣời dùng. ................................................................... 13

v


4.1.2. Yêu cầu của ngƣời quản trị ........................................................................ 14
4.2. THIẾT KẾ HỆ THỐNG ............................................................................... 17
4.2.1. Mô tả về trang web ................................................................................... 17
4.2.2. Sơ đồ phân cấp chức năng.......................................................................... 18
4.2.3. Sơ đồ thực thể liên kết. .............................................................................. 20
4.2.4. Sơ đồ CDM ............................................................................................... 21
4.2.5. Xác định các thực thể................................................................................. 22
CHƢƠNG 5: PHÂN TÍCH VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU ...................... 23
5.1. PHÂN TÍCH CƠ SỞ DỮ LIỆU .................................................................... 23
5.1.1. Mô tả chi tiết các thực thể. ......................................................................... 23
5.2. THIẾT KẾ CƠ SỞ DỬ LIỆU TRÊN PHPMYADMIN. ................................ 27
5.2.1. Mô tả chi tiết các thực thể trên Phpmyadmin. ............................................ 27
CHƢƠNG 6: THIẾT KẾ WEBSITE ............................................................... 32
6.1. GIAO DIỆN NGƢỜI DÙNG........................................................................ 32
6.1.1. Giao diện trang chủ .................................................................................... 32
6.1.2. Giao diện trang liên hệ ............................................................................... 34
6.1.3. Giao diện trang giới thiệu .......................................................................... 34
6.1.4. Giao diện trang blog .................................................................................. 35
6.1.5. Giao diện trang danh mục sản phẩm .......................................................... 36
6.1.6. Giao diện chi tiết sản phẩm ........................................................................ 37
6.1.7. Giao diện giỏ hàng ..................................................................................... 38

6.1.8. Giao diện trang thanh toán ......................................................................... 39
6.1.9. Giao diện đặt hàng thành công và nhận mail tự động từ hệ thống............... 40
6.2. GIAO DIỆN ADMIN ................................................................................... 41
6.2.1. Giao diện trang đăng nhập ......................................................................... 41

vi


6.2.2. Giao diện trang xem thành viên ................................................................. 41
6.2.3. Giao diện trang chỉnh sửa thông tin thành viên .......................................... 42
6.2.4. Giao diện trang đổi mật khẩu thành viên .................................................... 42
6.2.5. Giao diện trang xóa thành viên .................................................................. 43
6.2.6. Giao diện trang đăng ký thành viên ............................................................ 44
6.2.7. Giao diện trang quản lý bài viết ................................................................. 44
6.2.8. Giao diện trang blog tin tức ....................................................................... 46
6.2.9. Giao diện quản lý danh mục sản phẩm ....................................................... 49
6.2.10. Giao diện quản lý danh sách khách hàng đặt hàng.................................... 55
6.2.11. Giao diện danh sách đơn hàng.................................................................. 58
6.2.12. Giao diện thống kê ................................................................................... 60
CHƢƠNG 7: KẾT LUẬN VÀ HƢỚNG PHÁT TRIỂN .................................. 63
7.1. KẾT LUẬN .................................................................................................. 63
7.2. HƢỚNG PHÁT TRIỂN ................................................................................ 63
TÀI LIỆU THAM KHẢO ................................................................................. 64

vii


DANH MỤC HÌNH
Hình 1: Sơ đồ phân cấp chức năng khách hàng .................................................... 18
Hình 2: Sơ đồ phân cấp chức năng ngƣời quản trị................................................ 19

Hình 3: Sơ đồ thực thể liên kết ............................................................................ 20
Hình 3: Sơ đồ CDM ............................................................................................ 20
Hình 5.1: Bảng tbl_user trên Phpmyadmin .......................................................... 27
Hình 5.2: Bảng tbl_cat_product trên Phpmyadmin ............................................. 27
Hình 5.3: Bảng tbl_product trên Phpmyadmin ..................................................... 28
Hình 5.4: Bảng tbl_product_image_rel trên Phpmyadmin ................................... 28
Hình 5.5: Bảng tbl_customer trên Phpmyadmin .................................................. 29
Hình 5.6: Bảng tbl_order trên Phpmyadmin ........................................................ 29
Hình 5.8: Bảng tbl_post trên Phpmyadmin .......................................................... 30
Hình 5.9: Bảng tbl_blog trên Phpmyadmin .......................................................... 31
Hình 6.1: Giao diện trang chủ .............................................................................. 33
Hình 6.2: Giao diện trang liên hệ ......................................................................... 34
Hình 6.3: Giao diện trang giới thiệu..................................................................... 34
Hình 6.4: Giao diện nội dung chính của trang blog .............................................. 35
Hình 6.5: Giao diện nội dung chi tiết của blog ..................................................... 35
Hình 6.5: Giao diện danh mục điện thoại ............................................................. 36
Hình 6.6: Giao diện danh mục laptop .................................................................. 36
Hình 6.7: Thông tin chi tiết và hình ảnh sản phẩm ............................................... 37
Hình 6.8: Mô tả chi tiết về sản phẩm ................................................................... 37
Hình 6.9: Giao diện bình luận và sản phẩm liên quan .......................................... 38
Hình 6.10: Giao diện trang giỏ hàng .................................................................... 39
Hình 6.11: Giao diện thanh toán .......................................................................... 39
Hình 6.12: Giao diện đặt hàng thành công và nhận mail tự động từ hệ thống ....... 40
viii


Hình 6.13: Giao diện trang đăng nhập ................................................................. 41
Hình 6.14: Giao diện trang thông tin thành viên .................................................. 41
Hình 6.15: Hình ảnh trang chỉnh sửa thông tin thành viên ................................... 42
Hình 6.16: Giao diện trang đổi mật khẩu ............................................................. 43

Hình 6.17: Giao diện xóa thành viên.................................................................... 43
Hình 6.18: Giao diện trang đăng ký thành viên .................................................... 44
Hình 6.19: Giao diện trang danh sách thành viên ................................................. 44
Hình 6.20: Giao diện trang thêm bài viết ............................................................. 45
Hình 6.21: Giao diện trang sửa bài viết ................................................................ 45
Hình 6.22: Giao diện trang xóa bài viết ............................................................... 46
Hình 6.23: Giao diện trang blog tin tức ................................................................ 46
Hình 6.24: Giao diện trang thêm blog tin tức ....................................................... 47
Hình 6.25: Giao diện sửa blog tin tức .................................................................. 48
Hình 6.26: Giao diện xóa blog tin tức .................................................................. 49
Hình 6.27: Giao diện danh sách danh mục sản phẩm ........................................... 49
Hình 6.28: Giao diện trang thêm danh mục sản phẩm .......................................... 50
Hình 6.29: Giao diện sửa danh mục sản phẩm ..................................................... 50
Hình 6.30: Giao diện xóa danh mục sản phẩm ..................................................... 50
Hình 6.31: Giao diện danh sách sản phẩm ........................................................... 51
Hình 6.32: Giao diện trang thêm sản phẩm .......................................................... 52
Hình 6.33: Giao diện trang sửa sản phẩm ............................................................ 53
Hình 6.34: Thêm hình ảnh liên quan .................................................................... 54
Hình 6.35: Giao diện xóa hình ảnh liên quan ....................................................... 54
Hình 6.36: Giao diện xóa sản phẩm ..................................................................... 55
Hình 6.37: Giao diện danh sách khách hàng ........................................................ 56
Hình 6.38 Giao diện xác nhận đơn hàng .............................................................. 57
Hình 6.39 Giao diện xác nhận đơn hàng .............................................................. 58
Hình 6.39: Giao diện xóa thông tin khách hàng ................................................... 58
Hình 6.40: Giao diện danh sách thông tin đơn hàng ............................................. 59

ix


Hình 6.41: Giao diện xác nhận đơn hàng ............................................................ 59

Hình 6.41: Giao diện in hóa đơn .......................................................................... 60
Hình 6.42: Giao diện xóa danh sách đơn hàng ..................................................... 60
Hình 6.43: Giao diện danh sách thống kê từng sản phẩm theo ngày ..................... 61
Hình 6.44: Giao diện tổng các sản phẩm bán theo ngày ....................................... 61
Hình 6.45: Giao diện tổng doanh thu theo ngày ................................................... 62

x


DANH MỤC BẢNG
Bảng 4.1: Bảng danh sách các thực thể ................................................................ 22
Bảng 5.1: Mô tả chi tiết bảng tbl_users ................................................................ 23
Bảng 5.2 Mô tả chi tiết bảng tbl_cat_product....................................................... 23
Bảng 5.3 Mô tả chi tiết bảng tbl_product ............................................................. 24
Bảng 5.4: Mô tả chi tiết tbl_product_image_rel ................................................... 24
Bảng 5.5: Mô tả chi tiết tbl_customer .................................................................. 25
Bảng 5.6: Mô tả chi tiết tbl_order ........................................................................ 25
Bảng 5.7: Mô tả chi tiết tbl_statistics ................................................................... 26
Bảng 5.8: Mô tả chi tiết tbl_post .......................................................................... 26
Bảng 5.9: Mô tả chi tiết tbl_blog ......................................................................... 26

xi


LỜI NÓI ĐẦU
Ngày nay, Internet với sự phát triển vƣợt bậc đã đem lại cho đời sống chúng
ta rất nhiều tiện ích thiết thực. Đáp ứng những nhu cầu của cuộc sống hiện đại
ngày nay việc mua bán qua mạng Internet ngày càng trở lên thông dụng và thiết
thực hơn đối với những trang Web thƣơng mại điện tử .
Những hình thức mua bán, trao đổi trực tiếp bằng tiền mặt, vừa tốn thời

gian vừa khó khăn trong việc đi lại, mà những chủ doanh nghiệp, cửa hàng,
v.v…, khó quản lí, không cập nhật đƣợc thông tin thƣờng xuyên .
Website thƣơng mại điện tử là nơi mua bán, trao đổi các sản phẩm thông
qua thƣơng mại điện tử. Công nghệ thƣơng mại điện tử đã hình thành nền kinh tế
Internet và không ngừng thay đổi những tiện ích và dần hoàn thiện để giúp đỡ
các nhà doanh nghiệp kinh doanh theo phƣơng pháp Nhanh-gọn và hiệu quả.
Chính vì vậy em chọn đề tài “Xây dựng website thƣơng mại điện tử” với các

mặt hàng là điện thoại và laptop đề tài làm tốt nghiệp khoá học.
Trong quá trình thực hiện, do thời gian và trình độ có hạn với điều kiện
nghiên cứu chƣa nhiều nên còn nhiều hạn chế và khóa luận không thể tránh khỏi
những sai sót do đó chƣơng trình Demo còn nhiều tính năng chƣa hoàn chỉnh
nhƣ mong muốn. Vậy kính mong Thầy, Cô cho những ý kiến chỉ bảo và góp ý để
chƣơng trình thiện hơn, với những khả năng ứng dụng rộng rãi và hữu ích hơn.
Em xin chân thành cảm ơn!

1


CHƢƠNG 1:
TỔNG QUAN VỀ ĐỀ
1.1. TỔNG QUAN VỀ ĐỀ TÀI
1.1.1. Lý do chọn đề tài
Ngày nay, Thƣơng mại điện tử đã trở thành một công cụ phổ biến không
những ở trên thế giới mà còn ở Việt Nam. Ở Việt Nam điển hình có một số trang
nhƣ: /> đang có tình hình
phát triển rất tốt, Tuy nhiên, để hình thành lên một trang Thƣơng mại điện tử khá
nối tiếng đó là cả một quá trình và mất rất nhiều thời gian , tiền bạc, công sức.
Với sự phát triển mạnh mẽ của công nghệ thông tin và những ứng dụng của
nó trong đời sống. Máy tính điện tử không còn là một thứ phƣơng tiện lạ lẫm đối

với mọi ngƣời mà nó dần trở thành một công cụ làm việc và giải trí thông dụng
và hữu ích của chúng ta, không chỉ ở công sở mà còn ngay cả trong gia đình.
Trong nền kinh tế hiện nay, với xu thế toàn cầu hoá nền kinh tế thế giới,
mọi mặt của đời sống xã hội ngày càng đƣợc nâng cao, đặc biệt là nhu cầu trao
đổi hàng hoá của con ngƣời ngày càng tăng cả về số lƣợng và chất lƣợng. Hiện
nay các công ty tin học hàng đầu thế giới không ngừng đầu tƣ và cải thiện các
giải pháp cũng nhƣ các sản phẩm nhằm cho phép tiến hành thƣơng mại hóa trên
Internet. Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra
tầm quan trọng và tính tất yếu của thƣơng mại điện tử. Với những thao tác đơn
giản trên máy có nối mạng Internet bạn sẽ có tận tay những gì mình cần mà
không phải mất nhiều thời gian. Bạn chỉ cần vào các trang dịch vụ thƣơng mại
điện tử, làm theo hƣớng dẫn và click vào những gì bạn cần. Các nhà dịch vụ sẽ
mang đến tận nhà cho bạn.
Để tiếp cận và góp phần đẩy mạnh sự phổ biến của thƣơng mại điện tử ở
Việt Nam, Em đã tìm hiểu, xây dựng “Website thƣơng mại điện tử” với mặt hàng
là: Điện thoại di động và laptop.

2


1.1.2. Mục đích
Nhằm tổng hộp những kiến thức đã học trong suốt quá trình học tập tại
trƣờng cũng nhƣ những kiến thức mà em tìm hiểu đƣợc trên internet và trong
sách báo để:
 Tìm hiểu rõ hơn, sâu hơn và làm rỏ hơn các khái niệm về TMĐT.
 Khả năng phân tích cho một hệ thống.
 Tiếp cận công cụ lập trình.
 Kỷ thuật lập trình trên internet.
 Thời gian triển khai dự án lên internet nhanh chóng và chi phi
thấp.

 Chi phí duy trì và bảo trì hệ thống thấp.
 An toàn, ổn đinh và bảo mật dử liệu.

3


CHƢƠNG 2:
TÌM HIỂU VỀ THƢƠNG MẠI ĐIỆN TỬ
2.1. THƢƠNG MẠI ĐIỆN TỬ LÀ GÌ?
Thƣơng mại điện tử (Còn gọi là E-commerce hay E-Business) là quy trình
mua bán hàng hóa và dịch vụ thông qua các phƣơng tiện điện tử và mạng viễn
thông, đặc biệt là qua máy tính và mạng Internet.
Ngày nay ngƣời ta hiểu khái niệm thƣơng mại điện tử thông thƣờng là tất cả
các phƣơng pháp tiến hành kinh doanh và các quy trình quản trị thông qua các
kênh điện tử mà trong đó Internet hay ít nhất là các kỹ thuật và giao thức đƣợc sử
dụng trong Internet đóng một vai trò cơ bản và công nghệ thông tin đƣợc coi là
điều kiện tiên quyết. Một khía cạnh quan trọng khác là không còn phải thay đổi
phƣơng tiện truyền thông, một đặc trƣng cho việc tiến hành kinh doanh truyền
thống. Thêm vào đó là tác động của con ngƣời vào quy trình kinh doanh đƣợc
giảm xuống đến mức tối thiểu. Trong trƣờng hợp này ngƣời ta gọi đó là Thẳng
đến gia công (Straight Through Processing). Để làm đƣợc điều này đòi hỏi phải
tích hợp rộng lớn các các tính năng kinh doanh.
2.2. LỢI ÍCH CỦA THƢƠNG MẠI ĐIỆN TỬ.
Lợi ích lớn nhất mà Thƣơng mại điện tử mang lại đó chính là tiết kiệm
đƣợc chi phí lớn tạo thuận lợi cho các bên giao dịch. Giao dịch bằng phƣơng tiện
điện tử nhanh hơn là giao dịch bằng truyền thông, ví dụ gửi fax hay thƣ điện tử
thì nội dung thông tin sẽ đến ngƣời nhận nhanh hơn là gửi thƣ. Các giao dịch qua
internet có chi phí rất rẻ, một doanh nghiệp có thể gửi thƣ tiếp thị, chào hàng đến
hàng loạt khách hàng chỉ với chi phí giống nhƣ gửi cho một khách hàng. Với
Thƣơng mại điện tử, các bên có thể tiến hành giao dịch khi ở cách xa nhau, giữa

thành phố với nông thôn, từ nƣớc này sang nƣớc khác hay nói cách khác là
không bị giới hạn bởi không gian địa lý. Điều này cho phép các doanh nghiệp tiết
kiệm chi phí đi lại, thời gian gặp mặt trong khi mua bán. Với ngƣời tiêu dùng họ
có thể ngồi tại nhà để đặt hàng, mua sắm nhiều loại hàng hóa dịch vụ thật nhanh
chóng.

4


Những lợi ích nhƣ trên chỉ có đƣợc với những doanh nghiệp thực sự nhận
thức đƣợc tầm quan trọng của Thƣơng mại điện tử. Vì vậy, Thƣơng mại điện tử
góp phần thúc đẩy sự cạnh tranh giữa các doanh nghiệp để thu đƣợc nhiều lợi ích
nhất. Điều này đặc biệt quan trọng trong bối cảnh hội nhập kinh tế quốc tế hiện
nay. Khi các doanh nghiệp trong nƣớc phải cạnh tranh một cách bình đẳng với
các doanh nghiệp nƣớc ngoài.
2.3. ỨNG DỤNG CỦA THƢƠNG MẠI ĐIỆN TỬ.
Một số ứng dụng chung nhất của Thƣơng mại điện tử đƣợc liệt kê dƣới đây:
 Tài liệu tự động hóa ở chuỗi cung ứng và hậu cần
 Hệ thống thanh toán trong nƣớc và quốc tế
 Quản lý nội dung doanh nghiệp
 Nhóm mua
 Trợ lý tự động trực tuyến
 IM(Instant Messaging)
 Nhóm tin
 Mua sắm trực tuyếnvà theo dõi đặt hàng
 Ngân hàng điện tử
 Văn phòng trực tuyến
 Phần mềm giỏ hàng
 Hội thảo truyền thông trực tuyến
 Vé điện tử

5


CHƢƠNG 3:
TÌM HIỂU VỀ NGÔN NGỮ LẬP TRÌNH VÀ CÔNG CỤ HỔ TRỢ
3.1. NGÔN NGỮ LẬP TRÌNH.
3.1.1. Ngôn ngữ HTML.
3.1.1.1. HTML là gì?
HTML: là chữ viết tắt của Hypertext Markup Language- ngôn ngữ siêu
văn bản. Nó giúp ngƣời dùng tạo và cấu trúc các thành phần trong trang web
hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, v.v…
Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags
và attributes) để đánh dấu lên trang web. Ví dụ, chúng ta có thể tạo một đoạn văn
bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản

và

3.1.1.2. Cách thức hoạt động của HTML
HTML documents là files kết thúc với đuôi .html hay .htm. Bạn có thể xem
chúng bằng cách sử dụng bất kỳ trình duyệt web nào (nhƣ Google Chrome,
Safari, hay Mozilla Firefox). Trình duyệt đọc các files HTML này và xuất bản
nội dung lên internet sao cho ngƣời đọc có thể xem đƣợc nó.
Thông thƣờng, trung bình một web chứa nhiều trang web HTML, ví dụ
nhƣ: trang chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng.
Mỗi trang HTML chứa một bộ các tag (cũng đƣợc gọi là elements), bạn có
thể xem nhƣ là việc xây dựng từng khối của một trang web. Nó tạo thành cấu
trúc cây thƣ mục bao gồm section, paragraph, heading, và những khối nội dung
khác.
Hầu hết các HTML elements đều có tag mở và tag đóng với cấu trúc
nhƣ <tag></tag>.
3.1.2. Ngôn ngữ CSS
3.1.2.1. CSS là gì?

CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet
language. Nó dùng để tạo phong cách và định kiểu cho những yếu tố đƣợc viết

6


dƣới dạng ngôn ngữ đánh dấu, nhƣ là HTML. Nó có thể điều khiển định dạng
của nhiều trang web cùng lúc để tiết kiệm công sức cho ngƣời viết web. Nó phân
biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều
khiển bố cục, màu sắc, và font chữ.
CSS đƣợc phát triển bởi W3C (World Wide Web Consortium) vào năm
1996, vì một lý do đơn giản. HTML không đƣợc thiết kế để gắn tag để giúp định
dạng trang web. Bạn chỉ có thể dùng nó để “đánh dấu” lên site.
Những tag nhƣ <font> đƣợc ra mắt trong HTML phiên bản 3.2, nó gây rất
nhiều rắc rối cho lập trình viên. Vì website có nhiều font khác nhau, màu nền và
phong cách khác nhau. Để viết lại code cho trang web là cả một quá trình dài,
cực nhọc. Vì vậy, CSS đƣợc tạo bởi W3C là để giải quyết vấn đề này.
Mối tƣơng quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ
markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên
giao diện website), chúng là không thể tách rời.
CSS về lý thuyết không có cũng đƣợc, nhƣng khi đó website sẽ không chỉ
là một trang chứa văn bản mà không có gì khác.
3.1.2.2. Cách thức hoạt động của CSS
CSS sử dụng cấu trúc tiếng Anh đơn giản để tạo ra một bộ các quy tắc bạn
có thể tận dụng. Nhƣ đã nói ở trên, HTML không đƣợc dùng để tạo phong cách
cho các yếu tố, nó chỉ đánh dấu từng phần để biết đƣợc yếu tố đó là gì thôi. Ví
dụ:

Đây là văn bản.

.
Còn làm thế nào để tạo ra phong cách cho văn bản đó? Syntax của CSS rất
đơn giản. Nó có phần block chọn và block khai báo. Bạn chọn một yếu tố và khai
báo làm gì với nó. Rất đơn giản phải không?

Tuy nhiên, cũng có nhiều quy tắc cần ghi nhớ.
Selector sẽ trỏ về yếu tố HTML bạn cần muốn tạo phong cách. Block khai
báo sẽ bao gồm một hay nhiều khai báo cách nhau bởi dấu chấm phẩy.
Mỗi khai báo bao gồm một tên CSS và giá trị, cách nhấu bởi dấu 2 chấm.
Khai báo CSS luôn kết thúc bằng dấu chấm phẩn, và block khai báo đƣợc đặt
trong dấu ngoặc nhọn.

7


3.1.3. Ngôn ngữ JQUERY
3.1.3.1. Jquery là gì?
JQuery là một thƣ viện kiểu mới nhanh, nhỏ, đa nền tảng và giàu tính năng
đƣợc viết từ JavaScript. Nó đƣợc thiết kế để đơn giản hóa các kịch bản phía máy
khách của HTML. JQuery cung cấp các API giúp việc duyệt tài liệu HTML, thao
tác, hoạt ảnh, xử lý sự kiện, và theo tác AJAX đơn giản hơn. JQuery hoạt động
tốt trên nhiều loại trình duyệt khác nhau.
 Nó rất nhanh và có khả năng mở rộng.
 Nó tạo điều kiện cho ngƣời dùng viết các mã chức năng liên quan
đến giao diện ngƣời dùng bằng các dòng tối thiểu.
 Cải thiện hiệu suất.
 Các ứng dụng web tƣơng thích của trình duyệt có thể đƣợc phát
triển.
 Nó sử dụng hầu hết các tính năng mới của các trình duyệt mới.
3.1.3.2. Lịch sử phát triển.
JQuery đƣợc phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp
NYC. Nó hiện đang đƣợc duy trì và phát triển bởi một nhóm các nhà phát triển
của Google đứng đầu là Timmy Wilson.
Ngày nay, jQuery đƣợc sử dụng khá rộng rãi. Hầu hết các trang web đang
sử dụng jQuery.

3.1.3.3. Cách sử dụng Jquery.
Có hai cách để sử dụng jQuery:
Cài đặt cục bộ − Bạn có thể tải jQuery Library trên máy của bạn và đƣa nó
vào trong code HTML.
Sử dụng từ CDN (CDN Based Version) − Bạn có thể đƣa thƣ viện jQuery
vào trong code HTML một cách trực tiếp từ Content Delivery Network (CDN).

8


3.1.4. Ngôn ngữ PHP
3.1.4.1. Ngôn ngữ PHP là gì?
PHP là một ngôn ngữ thƣờng dùng trong thiết kế web. Khi bạn truy cập vào
một trang bất kì, bạn có thể xác định xem trang đó có đƣợc viết bằng ngôn ngữ
PHP hay không thông qua đƣờng link trên thanh địa chỉ của nó. Nếu ở cuối link
bạn thấy phần tử. PHP nghĩa là web đó đƣợc lập trình, thiết kế dựa trên ngôn ngữ
PHP.
Theo nghĩa chuyên môn, PHP (viết tắt của Personal Home Page) là một
ngôn ngữ lập trình script (một nhánh của ngôn ngữ lập trình) hay một loại mã
lệnh chủ yếu đƣợc dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn
mở, dùng cho mục đích tổng quát.
PHP là ngôn ngữ lập trình sử dụng mã nguồn mở. Điều này có nghĩa là bạn
có thể sử dụng PHP hoàn toàn miễn phí cho việc thực hiện website của
mình. Ngôn ngữ PHP có thể chạy đƣợc trên nhiều nền tảng hệ điều hành khác
nhau nhƣ Windows, Mac OS và Linux.
3.1.4.2. Những điểm mạnh của php
PHP hoạt động với tốc độ rất nhanh và hiệu quả. Một server bình thƣờng có
thể đáp ứng đƣợc hàng triệu truy cập / ngày.
PHP hỗ trợ kết nối đến hàng triệu hệ quản trị cơ sở dữ liệu khác nhau.
PHP cung cấp một hệ thống dữ liệu phong phú. Do từ đầu, PHP đƣợc xây

dựng để xây dựng và phát triển các ứng dụng trên web nên nó cung cấp rất nhiều
hàm xây dựng sẵn giúp dễ dàng thực hiện các công việc nhƣ: Gửi, nhận mail,
làm việc với Cookie…PHP là ngôn ngữ đơn giản, dễ sử dụng cho nhiều ngƣời
mới bắt đầu nhập môn lập trình web.
PHP có thể sử dụng đƣợc trên nhiều hệ điều hành. Thậm chí, các lập trình
viên có thể đem mã PHP này chạy trên các hệ điều hành khác mà không phải sửa
đổi lại mã.
PHP sử dụng mã nguồn mở, mang lại sự linh hoạt cho các lập trình viên
trong quá trình chỉnh sửa, sáng tạo riêng của mình.

9


Một lợi thế rất lớn của ngôn ngữ PHP là tính cộng đồng. PHP đƣợc phát
triển và tối ƣu liên tục từ các nhà phát triển trên toàn thế giới khiến cho nó vô
cùng thân thiện với mọi ngƣời và ngày càng hoàn thiện hơn.
3.1.4.3. Cách thức hoạt động của PHP.
Khi ngƣời sử dụng gọi trang PHP, Web Server sẽ triệu gọi PHP Engine để
thông dịch dịch trang PHP và trả kết quả cho ngƣời dùng nhƣ hình bên dƣới.

3.2. CÔNG CỤ HỔ TRỢ.
3.2.1. Công cụ Xampp.
Phần mềm XAMPP là một loại ứng dụng phần mềm khá phổ biến và
thƣờng hay đƣợc các lập trình viên sử dụng để xây dựng và phát triển các dựa án
website theo ngôn ngữ PHP. XAMPP thƣờng đƣợc dùng để tạo máy chủ web
(web server) đƣợc tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server
và các công cụ nhƣ phpMyAdmin.
Đặc biệt, Xampp có giao diện quản lý khá tiện lợi, cho phép ngƣời dùng
chủ động bật tắt hoặc khởi động lại các dịch vụ máy chủ bất kỳ lúc nào. Phần
mềm này cũng đƣợc thiết lập và phát triển dựa trên mã nguồn mở.

Nhìn chung XAMPP đƣợc xem là một bộ công cụ hoàn chỉnh dành cho lập
trình viên PHP trong việc thiết lập và phát triển các website, nó tích hợp các
thành phần quan trọng và tƣơng thích lẫn nhau nhƣ:
 Apache
10


 PHP (tạo môi trƣờng chạy các tập tin script*.php)
 MySQL (hệ quản trị cơ sở dử liệu mysql).
MySQL là một chƣơng trình dùng để quản lý hệ thống cơ sở dữ liệu. Cơ sở
dữ liệu là một hệ thống lƣu trữ thông tin. Điều quan trọng là cơ sở dữ liệu của
MySQL là một hệ thống đƣợc sắp xếp, phân lớp rõ ràng ngăn nắp những thông
tin mà mình lƣu trữ.
3.2.2. Công cụ Sublime Text 3.
Sublime Text là một text editor đƣợc viết bằng ngôn ngữ lập trình Python
và có thể đƣợc sử dụng trên nhiều nền tảng hệ điều hành khác nhau nhau
Windows, Mac, Linux. Sublime Text hỗ trợ nhiều ngôn ngữ lập trình và là một
phần mềm có thể đƣợc sử dụng miễn phí tuy nhiên cũng có phiên bản trả phí của
Sublime Text.
Sublime Text khác với các IDE khác ở đặc điểm nhẹ, linh hoạt trong tùy
biến và cung cấp nhiều tính năng rất tiện lợi khi lập trình.
Với các IDE khác thì thông thƣờng bạn sẽ cần phải chờ một khoảng thời
gian vào khoảng 10 giây khi khởi động. Với Sublime Text bạn chỉ phải đợi
khoảng từ 1 tới 2 giây.
3.2.3. Công cụ google chrome.
Google Chrome là một trình duyệt web miễn phí, đƣợc phát triển bởi
Google, sử dụng nền tảng V8 engine. Dự án mã nguồn mở đứng sau Google
Chrome đƣợc biết với tên gọi Chromium.
Phiên bản beta chạy trên Microsoft Windows đu ợc phát hành ngày 2 tháng
9 năm 2008 với 43 ngôn ngữ. Với sự ra đời của phiên bản ổn định chính thức

1.0.154.36 vào ngày 11 tháng 12, đã kết thúc giai đoạn thử nghiệm này. Đến
tháng 6 năm 2011, trình duyệt này đã trở thành trình duyệt thông dụng thứ ba
trên toàn cầu. Chỉ sau Firefox và Internet Explorer và chiếm khoảng 16,5% thị
phần trình duyệt web thế giới. Phiên bản Chrome cho hệ điều hành Mac OS X và
Linux đƣợc phát hành vào tháng 6 năm 2009.

11


3.2.4. Adobe Photoshop.
Adobe Photoshop (thƣờng đƣợc gọi là Photoshop) là một phần mềm chỉnh
sửa đồ họa đƣợc phát triển và phát hành bởi hãng Adobe Systems ra đời vào năm
1988 trên hệ máy Macintosh. Photoshop đƣợc đánh giá là phần mềm dẫn đầu thị
trƣờng về sửa ảnh bitmap và đƣợc coi là chuẩn cho các ngành liên quan tới chỉnh
sửa ảnh. Từ phiên bản Photoshop 7.0 ra đời năm 2002, Photoshop đã làm lên một
cuộc cách mạng về ảnh bitmap. Phiên bản mới nhất hiện nay là Adobe Photoshop
CC.
Ngoài khả năng chính là chỉnh sửa ảnh cho các ấn phẩm, Photoshop còn
đƣợc sử dụng trong các hoạt động nhƣ thiết kế trang web, vẽ các loại tranh
(matte painting và nhiều thể loại khác), vẽ texture cho các chƣơng trình 3D... gần
nhƣ là mọi hoạt động liên quan đến ảnh bitmap.
Adobe Photoshop có khả năng tƣơng thích với hầu hết các chƣơng trình đồ
họa khác của Adobe nhƣ Adobe Illustrator, Adobe Premiere, After After
Effectsvà Adobe Encore.

12