Ứng dụng wordpress trong xây dựng website thương mại điện tử cho công ty cổ phần digitech – hà nội

LỜI CẢM ƠN
Em xin chân thành cảm ơn trường Đại học công nghệ thông tin và truyền
thông - Đại học Thái Nguyên đã tạo điều kiện cho em thực hiện Đồ án tốt nghiệp
này. Em xin chân thành cảm ơn cô Lê Thu Trang đã tận tình hướng dẫn, chỉ bảo
em trong suốt thời gian thực hiện đề tài. Em cũng xin chân thành cảm ơn các thầy
cô giáo trong khoa đã tận tình giảng dạy, trang bị cho chúng em những kiến thức
cần thiết trong suốt quá trình học tập tại trường đã giúp đỡ và động viên trong
suốt quá trình thực hiện Đồ án tốt nghiệp này.
Mặc dù đã cố gắng hoàn thành Đồ án tốt nghiệp với tất cả những nỗ lực
của bản thân, song không tránh khỏi những thiếu sót nhất định, kính mong sự
cảm thông và tận tình chỉ bảo của các thầy cô giáo, sự góp ý của các bạn để bài
Đồ án tốt nghiệp của em được hoàn thiện hơn.
Em xin chân thành cảm ơn!
Thái nguyên, tháng 6 năm 2016
Sinh viên thực hiện

Trần Văn Thượng

1


LỜI CAM ĐOAN
Em cam đoan các kết quả nghiên cứu đưa ra trong đồ án này dựa trên các
kết quả thu được trong quá trình nghiên cứu của riêng em, không sao chép bất kỳ
kết quả nghiên cứu nào của các tác giả khác. Nội dung của đồ án có tham khảo
và sử dụng một số thông tin, tài liệu từ các nguồn sách, tạp chí được liệt kê trong
danh mục các tài liệu tham khảo.
Thái nguyên, tháng 6 năm 2016
Sinh viên thực hiện

Trần Văn Thượng

2


MỤC LỤC
LỜI CẢM ƠN....................................................................................................................................1
LỜI CAM ĐOAN.............................................................................................................................2
MỤC LỤC .........................................................................................................................................3
DANH MỤC HÌNH ẢNH ...................................................................................5
LỜI NÓI ĐẦU...................................................................................................................................7
Chương 1: CƠ SỞ LÝ THUYẾT...................................................................................................8
1.1 Phân tích thiết kế hướng đối tượng với UML ............................................8
1.1.1 Tìm hiểu về phân tích và thiết kế hướng đối tượng ......................................... 8
1.1.2 Giới thiệu ngôn ngữ mô hình hóa thống nhất UML ........................................ 9
1.2 Thương mại điện tử.................................................................................11
1.2.1 Khái niệm thương mại điện tử........................................................................ 11
1.2.2 Các đặc trưng của thương mại điện tử ........................................................... 11
1.2.3 Các đặc trưng cơ bản của sàn giao dịch TMĐT............................................. 12
1.2.4 Lợi ích kinh doanh qua sàn giao dịch TMĐT................................................ 13
1.3 Cơ bản về JavaScript...............................................................................13
1.3.1 Javascript là gì?............................................................................................... 13
1.3.2 Javascript được sử dụng để làm gì?................................................................ 14
1.3.3 Cách sử dụng Javascript................................................................................. 15
1.4 Cơ bản về CSS........................................................................................15
1.4.1 CSS là gì? ....................................................................................................... 15
1.4.2 Sử dụng CSS trong trang web........................................................................ 16
1.5 Cơ bản về HTML .....................................................................................19
1.5.1 Khái niệm cơ sở.............................................................................................. 19
1.5.2. Danh sách và bảng trong HTML................................................................... 21
1.5.3. Đưa hình ảnh vào tài liệu HTML.................................................................. 22

1.6 Cơ bản về mã nguồn mở WordPress.........................................................24
1.6.1. WordPress là gì?............................................................................................ 24
1.6.2. Một vài nét nổi bật của WordPress ............................................................... 24
1.6.3. Tại sao nên thiết kế website bằng WordPress ............................................... 26

3


1.6.4. Cấu trúc của một Theme WordPress............................................................. 27
Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG ........30
2.1. Khảo sát hệ thống....................................................................................30
2.1.1. Giới thiệu về Công ty cổ phần Digitech........................................................ 30
2.1.2. Năng lực kỹ thuật, kinh nghiệm của Digitech............................................... 35
2.1.3. Nhược điểm của hệ thống hiện tại và yêu cầu phát triển hệ thống mới ........ 38
2.2. Phân tích hệ thống ...................................................................................40
2.2.1 Biểu đồ Usecase của hệ thống:....................................................................... 40
2.2.2 Biểu đồ hoạt động: ......................................................................................... 42
2.2.3 Biểu đồ trình tự:.............................................................................................. 45
2.2.4 Biểu đồ lớp: .................................................................................................... 49
2.3. Thiết kế hệ thống.....................................................................................51
2.3.1. Thiết kế giao diện trang chủ .......................................................................... 51
2.3.2. Thiết kế hệ thống giao diện trang cửa hàng .................................................. 53
2.3.3. Thiết kế giao diện trang chi tiết sản phẩm..................................................... 54
Chương 3: XÂY DỰNG WEBSITE............................................................................................55
3.1. Giao diện trang chủ: ................................................................................55
3.2. Giao diện trang cửa hàng:........................................................................56
3.3. Giao diện trang chi tiết sản phẩm: ...........................................................57
3.4. Giao diện Form hỗ trợ trực tuyến: ...........................................................58
3.5. Giao diện trang quản trị Admin: ..............................................................58
3.6. Giao diện trang phpMyAdmin:................................................................59

3.7. Giao diện trang đăng nhập Admin: ..........................................................60
KẾT LUẬN......................................................................................................................................61
TÀI LIỆU THAM KHẢO.............................................................................................................62

4


DANH MỤC HÌNH ẢNH
Hình 2.1: Đội ngũ chuyên gia của Digitech .......................................................31
Hình 2.2: Sơ đồ tổ chức công ty Digitech .........................................................32
Hình 2.3: Giải Sao Khuê 2006 ...........................................................................35
Hình 2.4: Trung tâm dịch vụ bảo hành...............................................................36
Hình 2.5: Biểu đồ usecase tổng quát ..................................................................40
Hình 2.6: Biểu đồ usecase khách hàng...............................................................41
Hình 2.7: Biểu đồ usecase quản trị viên .............................................................41
Hình 2.8: Biểu đồ hoạt động đăng nhập hệ thống...............................................42
Hình 2.9: Biểu đồ hoạt động quản lý sản phẩm..................................................42
Hình 2.10: Biểu đồ hoạt động xem chi tiết sản phẩm .........................................43
Hình 2.11: Biểu đồ hoạt động xem giỏ hàng ......................................................43
Hình 2.12: Biểu đồ hoạt động xem tin tức .........................................................44
Hình 2.13: Biểu đồ hoạt động đăng ký thành viên .............................................44
Hình 2.14: Biểu đồ hoạt động tìm kiếm sản phẩm .............................................45
Hình 2.15: Biểu đồ trình tự đăng nhập cho admin..............................................45
Hình 2.16: Biểu đồ trình tự thêm sản phẩm cho admin ......................................46
Hình 2.17: Biểu đồ trình tự sửa sản phẩm cho admin.........................................46
Hình 2.18: Biểu đồ trình tự xóa sản phẩm cho admin ........................................47
Hình 2.19: Biểu đồ trình tự xem chi tiết sản phẩm .............................................47
Hình 2.20: Biểu đồ trình tự đăng ký thành viên .................................................48
Hình 2.21: Biểu đồ trình tự thanh toán...............................................................48
Hình 2.22: Biểu đồ lớp quản lý sản phẩm ..........................................................49

Hình 2.23: Biểu đồ lớp quản lý tin tức ...............................................................49
Hình 2.24: Mô hình thực thể liên kết .................................................................50
Hình 2.25: Mô hình thiết kế tổng quan ..............................................................51
Hình 2.26: Mô hình thiết kế trang chủ ...............................................................52
Hình 2.27: Thiết kế giao diện trang cửa hàng.....................................................53
Hình 2.28: Thiết kế giao diện trang chi tiết sản phẩm ........................................54
Hình 3.1. Giao diện trang chủ............................................................................55

5


Hình 3.2. Giao diện trang cửa hàng ...................................................................56
Hình 3.3. Giao diện trang chi tiết sản phẩm .......................................................57
Hình 3.4. Giao diện Form hỗ trợ trực tuyến .......................................................58
Hình 3.5. Giao diện trang quản trị Admin..........................................................58
Hình 3.6. Giao diện trang phpMyAdmin............................................................59
Hình 3.7. Giao diện trang đăng nhập Admin......................................................60

6


LỜI NÓI ĐẦU
Với sự phát triển nhảy vọt của công nghệ thông tin hiện nay, Internet ngày
càng giữ vai trò quan trọng trong các lĩnh vực khoa học kĩ thuật và đời sống.
Internet là một tập hợp máy tính nối kết với nhau, là một mạng máy tính toàn cầu
mà bất kì ai cũng có thể kết nối bằng máy PC của họ. Với mạng Internet, tin học
thật sự tạo nên một cuộc cách mạng trao đổi thông tin trong mọi lĩnh vực văn
hóa, xã hội, chính trị, kinh tế...
Với công nghệ Word Wide Web, hay còn gọi là Web sẽ giúp đưa những
thông tin mong muốn của mình lên mạng Internet cho mọi người cùng xem một

cách dễ dàng với các công cụ và những ngôn ngữ lập trình khác nhau. Sự ra đời
của phần mềm nguồn mở WordPress cho phép xây dựng các trang Web đáp ứng
được các yêu cầu của người sử dụng. Mã nguồn mở WordPress được xây dựng
bằng ngôn ngữ PHP và hệ quản trị cơ sở dữ liệu MySQL là một sự kết hợp tuyệt
vời. Với nhiều ưu điểm nổi bật mà phần mềm nguồn mở WordPress được rất nhiều
người sử dụng.
Với lí do đó, được sự hướng dẫn và giúp đỡ của cô Ths.Lê Thu Trang, em
đã chọn đề tài: ”Ứng dụng WordPress trong xây dựng Website thương mại
điện tử cho Công ty cổ phần Digitech – Hà Nội” . Đề tài gồm các nội dung:
- Cơ sở lý thuyết
- Khảo sát hiện trạng Công ty cổ phần Digitech – Hà Nội
- Phân tích và thiết kế hệ thống
- Xây dựng website
Trong quá trình thực hiện đề tài này em đã nhận được sự giúp đỡ chỉ bảo
tận tình của cô Ths. Lê Thu Trang, giáo viên đã hướng dẫn trong quá trình làm
đề tài. Em cũng xin gửi lời cảm ơn chân thành đến tất cả các Thầy Cô khoa Công
Nghệ Thông Tin – trường Đại Học Công Nghệ Thông Tin và Truyền Thông đã
giảng dậy em trong suốt thời gian qua.
Tuy nhiên, do thời gian hạn hẹp, mặc dù đã nỗ lực hết sức mình nhưng
chắc rằng đề tài khó tránh khỏi thiếu sót. Em rất mong nhận được sự thông cảm,
những lời góp ý và chỉ bảo tận tình của thầy, cô và các bạn.

7


Chương 1:
CƠ SỞ LÝ THUYẾT
1.1 Phân tích thiết kế hướng đối tượng với UML
1.1.1 Tìm hiểu về phân tích và thiết kế hướng đối tượng
a, Hướng đối tượng

Hướng đối tượng là thuật ngữ thông dụng hiện thời của ngành công
nghiệp phần mềm. Lối tiếp cận hướng đối tượng là một lối tư duy về vấn đề theo
lối ánh xạ các thành phần trong bài toán vào các đối tượng ngoài đời thực. Với
lối tiếp cận này, chúng ta chia ứng dụng thành các phần nhỏ, gọi là các đối
tượng, chúng tương đối độc lập với nhau.
b, Phân tích hướng đối tượng
Phân tích hướng đối tượng (Object Oriented Analysis - OOA) là giai đoạn
phát triển một mô hình chính xác và súc tích của vấn đề, có thành phần là các đối
tượng và khái niệm đời thực, dễ hiểu đối với người sử dụng. Trong giai đoạn
OOA, vấn đề được trình bày bằng các thuật ngữ tương ứng với các đối tượng có
thực. Thêm vào đó, hệ thống cần phải được định nghĩa sao cho người không
chuyên tin học có thể dễ dàng hiểu được.
Dựa trên một vấn đề có sẵn, nhà phân tích cần ánh xạ các đối tượng hay
thực thể có thực như khách hàng, ô tô, người bán hàng,.. vào thiết kế để tạo ra
được bản thiết kế gần cận với tình huống thực. Mô hình thiết kế sẽ chứa các thực
thể trong một vấn đề có thực và giữ nguyên các mẫu hình về cấu trúc, quan hệ
cũng như hành vi của chúng. Theo một cách khác, sử dụng phương phát hướng
đối tượng chúng a có thể mô hình hóa các thực thể thuộc một vấn đề có thực mà
vẫn giữ được cấu trúc, quan hệ cũng như hành vi của chúng.
c, Thiết kế hướng đối tượng
Thiết kế hướng đối tượng (Object Oriented Programming - OOP) là giai
đoạn xây dựng ứng dụng có thể được thực hiện sử dụng kỹ thuật lập trình hướng
đối tượng. Đây là phương thức thực hiện thiết kế hướng đối tượng qua việc sử
dụng một ngôn ngữ lập trình có hỗ trợ các tính năng hướng đối tượng. Một vài
ngôn ngữ hướng đối tượng thường được nhắc tới là C++ và Java, trong Đồ án tốt
8


nghiệp này chúng ta sẽ chủ yếu nhắc đến ngôn ngữ lập trình web PHP. Kết quả cuối
cùng của giai đoạn thiết kế hướng đối tượng là một loạt các code chạy được, nó chỉ

được đưa vào sử dụng sau khi đã trải qua nhiều vòng quay của nhiều bước thử
nghiệm khác nhau.
1.1.2 Giới thiệu ngôn ngữ mô hình hóa thống nhất UML
UML là ngôn ngữ mô hình hợp nhất, nó được hiểu như một ngôn ngữ
thống nhất những xu hướng và hình thái của cuộc các mạng tri thức trong lĩnh
vực công nghệ thông tin. Nó là một phương tiện giúp cho các tổ chức có thể nhận
thức một cách tốt nhất lợi thế cạnh tranh thông qua việc nắm bắt, truyền đạt, trao
đổi và nâng cao tri thức trong lĩnh vực công nghệ phần mềm. Chính xác hơn
UML là ngôn ngữ mô hình hóa chuẩn để thiết kế phần mềm hướng đối tượng,
được dùng để đặc tả, trực quan hóa, xây dựng và làm tài liệu cho các hệ thống
phần mềm. UML là ngôn ngữ đồ họa với các tập quy tắc và ngữ nghĩa. Các quy
tắc và ngữ nghĩa của một mô hình được thể hiện bằng tiếng Anh gọi là Ngôn ngữ
ràng buộc đối tượng (OLC – Object Constraint Language). OCL là ngôn ngữ đặc
tả sử dụng logic đơn giản để đặc tả các đặc tính của hệ thống.
a, Mục đích của UML
 Mô hình hóa các hệ thống và sử dụng các khái niệm hướng đối tượng
một cách thống nhất.
 Cho phép đặc tả, hỗ trợ đặc tả tường minh mối quan hệ giữa các khái
niệm trong hệ thống, đồng thời mô tả được mọi trạng thái hoạt động (tĩnh và
động) của hệ thống.
 Hỗ trợ khả năng sử dụng lại và kế thừa ở phạm vi rộng để xây dựng những
hệ thống phức tạp và nhạy cảm như: hệ thống tự động, hệ thống thời gian thực.
 Tạo ra ngôn ngữ mô hình hóa sử dụng được cho cả người và máy tính.
b, Công dụng của UML
 UML là ngôn ngữ chuẩn để viết kế hoạch chi tiết phần mềm.
 Vạch ra cho hệ thống những chức năng chính của nó sử dụng các mô
hình tình huống sử dụng và các tác nhân.

9

 Minh họa các Usecase bằng bằng các biểu đồ tương tác ( Interaction
Diagram)
 Mô tả cấu trúc tĩnh của một hệ thống sử dụng các biểu đồ lớp (Class
Diagram)
 Mô hình hóa trạng thái của đối tượng bằng các biểu đồ chuyển tiếp
trạng thái.
 Minh họa cấu trúc thi hành vật lý bằng các biểu đồ thành phần và triển khai
c, Các đặc trưng và khả năng của UML
 UML là ngôn ngữ mô hình đồ họa
Ngôn ngữ cung cấp bảng từ vựng và tập các quy tắc để kết hợp các từ trong
bảng từ vựng để giao tiếp. Ngôn ngữ mô hình là ngôn ngữ có từ vựng và quy tắc
tập trung vào các biểu diễn về mặt vật lý và khái niệm của hệ thống. UML là
ngôn ngữ chuẩn công nghiệp để lập kế hoạch chi tiết phần mềm.
Ngôn ngữ phải cho phép biểu diễn nhiều khung nhìn (views) khác nhau của
kiến trúc hệ thống trong suốt quá trình phát triển phần mềm. Từ vựng và quy tắc
ngôn ngữ UML cho ta cách thức xây dựng mô hình và đọc mô hình nhưng không
cho biết mô hình nào cần phải được lập và khi nào lập chúng mà phải dựa vào
quy trình phát triển phần mềm. Các biểu diễn mô hình trong UML là các biểu
diễn bằng đồ họa.
 UML là ngôn ngữ đặc tả có cấu trúc
Đặc tả là xây dựng mô hình chính xác, rõ ràng, không nhập nhằng, hoàn
thiện và đầy đủ những điểm mấu chốt của vấn đề. UML hướng tới đặc tả thiết kế,
phân tích và quyết định cài đặt trong quá trình phát triển và triển khai hệ thống
phần mềm.
 UML là ngôn ngữ trực quan
Bằng hệ thống các ký hiệu đồ họa và các biểu đồ với các chú giải đi kèm, UML
cho ta hình dung được hệ thống đang cần xây dựng từ nhiều góc độ khác nhau.

10

 UML là ngôn ngữ làm tài liệu
UML hướng tới làm tài liệu kiến trúc hẹ thống và các chi tiết của nó. UML
cho khả năng biểu diễn yêu cầu, thử nghiệm, mô hình hóa các hoạt động lập kế
hoạch và quản lý sản phẩm.
- Thông qua Usecase biểu đồ trường hợp sử dụng, tác nhân để biết giới hạn
và các chức năng chính của hệ thống.
- Trong UML Usecase được miêu tả bằng biểu đồ logic. Sử dụng biểu đồ
Usecase, tác nhân (Actor) có thể chia dự án thành các dự án nhỏ có thể quản lý
được. Nhìn vào biểu đồ đó và các loại tài liệu mô tả, người phân tích có thể biết
hệ thống có khả năng làm gì.
- Biểu diễn cấu trúc tĩnh của hệ thống bằng biểu đồ lớp. Sử dụng biểu đồ
trình tự và cộng tác để thấy được trình tự và logic toàn bộ hệ thống và các thông
báo giữa các đối tượng.
- Mô hình hóa các hành vi đối tượng bằng biểu đồ chuyển trạng thái.
- Phản ánh kiến trúc cài đặt vật lý bằng biểu đồ thành phần và biểu đồ triển khai
- Mở rộng chức năng bằng stereotypes
1.2 Thương mại điện tử
1.2.1 Khái niệm thương mại điện tử
Thương mại điện tử, hay còn gọi là e-commerce, e-comm hay EC, là sự
mua bán sản phẩm hay dịch vụ trên các hệ thống điện tử như Internet và
các mạng máy tính. Thương mại điện tử dựa trên một số công nghệ như chuyển
tiền điện tử, quản lý chuỗi dây chuyền cung ứng, tiếp thị Internet, quá trình giao
dịch trực tuyến, trao đổi dữ liệu điện tử (EDI), các hệ thống quản lý hàng tồn
kho, và các hệ thống tự động thu thập dữ liệu. Thương mại điện tử hiện đại
thường sử dụng mạng World Wide Web là một điểm ít nhất phải có trong chu
trình giao dịch, mặc dù nó có thể bao gồm một phạm vi lớn hơn về mặt công
nghệ như email, các thiết bị di động cũng như điện thoại.
1.2.2 Các đặc trưng của thương mại điện tử

-Các bên tiến hành giao dịch trong thương mại điện tử không tiếp xúc trực
tiếp với nhau và không đòi hỏi phải biết nhau từ trước.

11


-Trong hoạt động giao dịch thương mại điện tử đều có sự tham ra của ít
nhất ba chủ thể, trong đó có một bên không thể thiếu được là người cung cấp
dịch vụ mạng, các cơ quan chứng thực
-Các giao dịch thương mại truyền thống được thực hiện với sự tồn tại của
khái niệm biên giới quốc gia, còn thương mại điện tử được thực hiện trong một
thị trường không có biên giới (thị trường thống nhất toàn cầu). Thương mại điện
tử trực tiếp tác động tới môi trường cạnh tranh toàn cầu.
-Đối với thương mại truyền thống thì mạng lưới thông tin chỉ là phương
tiện để trao đổi dữ liệu, còn đối với thương mại điện tử thì mạng lưới thông tin
chính là thị trường
1.2.3 Các đặc trưng cơ bản của sàn giao dịch TMĐT
- Sàn giao dịch TMĐT là một tổ chức kinh doanh, đóng vai trò là người môi giới.
- Các phương thức giao dịch tại các sàn TMĐT rất phong phú, bao gồm cả
những phương thức mua bán thực và giao dịch không.
- Thiết lập các quy tắc cho thành viên của mình và có thể áp dụng các hình
thức thưởng phạt đối với những thành viên vi phạm.
- Số lượng người mua, người bán, nhà cung cấp tham gia rất lớn.
- Những người tham gia vừa có thể là người mua, vừa là người bán hoặc cả hai.
- Thể hiện quan hệ cung cầu hàng hóa của thị trường. Giá hình thành trên
sàn giao dịch là giá chung cho sản phẩm trên thị trường.
- Tất cả các quy trình bán, mua, giao dịch, đàm phán, thương lượng, thanh
toán đều được thực hiện trực tiếp trên mạng internet.
- Người mua, bán đều có thể tham gia các giao dịch mua bán tại sàn giao
dịch vào bất cứ lúc nào và bất cứ nơi đâu.

- Chủng loại hàng hóa và dịch vụ mua bán rất đa dạng và phong phú, bao
gồm hữu hình lẫn vô hình.
- Thực hiện thông tin và kết nối khách hàng.
- Các thành viên tham gia sàn giao dịch được quyền khai thác thông tin về
thị trường, sản phẩm, chính sách,...

12


1.2.4 Lợi ích kinh doanh qua sàn giao dịch TMĐT
 Đối với doanh nghiệp
 Tăng doanh thu
- Mở rộng hệ thống khách hàng và tăng khả năng tiếp cận với thị trường thế giới.
- Tăng doanh số bán hàng từ những khách hàng hiện tại.
- Tăng doanh số bán hàng từ các dịch vụ tạo ra giá trị khác.
 Tiết kiệm chi phí
- Tiết kiệm chi phí sản xuất kinh doanh.
- Tiết kiệm chi phí bán hàng.
- Tiết kiệm chi phí giao dịch.
 Có được thông tin phong phú
- Tạo điều kiện thuận lợi về không gianvà thời gian trong việt thiết lập và
củng cố các mối quan hệ kinh doanh.
- Tạo điều kiện để doanh nghiệp có thể truyền bá, phổ biến hình ảnh, nhãn
hiệu sản phẩm doanh nghiệp với các bạn hàng quốc tế.
- Nâng cao chất lượng dịch vụ khách hàng.
 Đối với khách hàng
 Sàn giao dịch TMĐT mang đến cho khách hàngmột phong cách mua hàng mới,
phong cách mua hàng trực tiếp qua mạng, tiết kiệm được thời gian, chi phí đi lại,..
 Khách hàng có phạm vi lựa chọn mặt hàng rộng rãi và phong phú hơn.
 Khách hàng có thể giao dịch trực tiếp với nhà sản xuất, bỏ qua khâu

trung gian nên có thể mua hàng với giá rẻ hơn và nhanh hơn.
1.3 Cơ bản về JavaScript
1.3.1 Javascript là gì?
a, Về phương diện thực thi ngôn ngữ
Hiện nay khi phát triển các trang web động, có 2 phương thức rất phổ biến
đó là Server-Sidevà Client-Side.
Client-Side: là phương thức sẽ xử lý các mã lệnh bởi mỗi browser riêng
biệt tại máy người dùng, sau đó gửi kết quả lên cho Server.

13


Server-Side: thì lại gửi các mã lệnh cho server xử lý trước, sau đó server
gửi kết quả lại cho browser.
JavaScript là một ngôn ngữ lập trình kịch bản Client-Side (Client-Side
Script Language), và dĩ nhiên nó được thực thi tại máy người dùng. Và vì
javascript là 1 Client-Side Script Language nên nó ko có khả năng kết nối và thao
tác với CSDL trên Server.
b, Về phương diện phong cách ngôn ngữ lập trình
Các tài liệu cũ trước đây nói Javascript là ngôn ngữ lập trình dựa vào đối
tượng (Object-based language). Nhưng từ lúc Ajax ra đời, Javascript trở nên
hướng đối tượng hơn rất nhiều. Nên mình sẽ coi Javascript là 1 ngôn ngữ lập trình
hướng đối tượng (Object-Oriented programming). Về cú pháp, Javascript cũng
tương tự như C, Perl và Java…ví dụ mệnh đề lặp if, while, for, tương tự nhau.
c, Khái quát chung:
Javascript là 1 ngôn ngữ lập trình:
 Kịch bản Client-Side (Client-Side Script Language).
 Hướng đối tượng (Object-Oriented programming).
1.3.2 Javascript được sử dụng để làm gì?
- JavaScript được sử dụng nhằm bổ sung sự tương tác cho các trang HTML.

- JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả
năng này cho phép JavaScript trở thành một ngôn ngữ script động.
- JavaScript có thể được sử dụng để xác nhận dữ liệu người dùng nhập vào
trước khi nó được chuyển đến server.
- Sử dụng Javascript có thể giúp website của bạn tương tác với người dùng
1 cách uyển chuyển hơn.
- Tùy biến trình duyệt.
*Ưu điểm của Javascript:
Hoàn toàn miễn phí và dễ học.
JavaScript được thiết kế độc lập với hệ điều hành. Nó có thể chạy trên bất
kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript.
Dễ dàng tương tác, điều khiển và tránh bớt việc xử lý từ phía server

14


Nắm vững kiến thức JavaScript bây giờ rất hữu dụng cho các bạn sau này
để có thê tiếp thu những công nghệ mới mà nó được gói gọn vào những ngôn ngữ
như : Ajax , Atlas ….
*Nhược điểm của Javascript
Javascript không có trình biên dịch riêng mà được diễn dịch và chạy bởi
trình duyệt hỗ trợ nó. Chính vì thế, nếu trình duyệt không hỗ trợ, hoặc không bật
JS, nó sẽ không chạy được.
JS có thể làm ứng dụng web của bạn trở nên nặng nề hơn.
Bảo mật kém. Không có khả năng giấu mã.
1.3.3 Cách sử dụng Javascript
Có hai cách sử dụng Javascript trong website:
Cách 1: Nhúng trực tiếp mã JavaScript vào trong tập tin HTML
Ta có thể viết mã JS trực tiếp trong file HTML với cú pháp như sau:
<script language="javascript">

Mã chương trình Javascript
..........................
</script>
Cách 2: Sử dụng tập tin JS (*.js) bên ngoài
Ngoài ra, chúng ta có thể viết mã javascript vào 1 file bên ngoài và lưu lại
với đuôi *.js sau đó triệu gọi nó vào file HTML với đoạn mã như sau:
<script language="javascript" src="tenfile.js"></script>
1.4 Cơ bản về CSS
1.4.1 CSS là gì?
a, Khái niệm
CSS (Cascading Style Sheets mà Pearl tạm dịch là tờ mẫu theo Style
Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng
HTML, XHTML, XML, SVG, hay UML,…
b, Vai trò của CSS và ứng dụng
CSS ra đời đã giải quyết được một vấn đề lớn, khi các thẻ như thẻ <font>
và các thuộc tính màu được thêm vào HTML 3.2, đã bắt đầu nảy sinh vấn đề cho
15


các nhà phát triển web. Khi phát triển mở rộng các website các thẻ <font> và
thuộc tính color được thêm vào trong mọi trang web đơn, điều đó dẫn đến tiến
trình xử lý lâu hơn và tốn kém hơn. Để giải quyết vấn đề này W3C (World Wide
Web Consortium) đã tạo ra CSS. Bắt đầu từ HTML 4.0 tất cả các định dạng có
thể được tách ra khỏi file html và lưu vào một file .CSS riêng biệt. Ngày nay tất
cả các trình duyệt đều hỗ trợ css.
1.4.2 Sử dụng CSS trong trang web
a, Cách đưa mã CSS vào trang web
CSS như thế nào: Khi một trình duyệt đọc 1 file css, nó sẽ định dạng tài
liệu liên quan đến file css này. Có 3 cách để style cho các thành phần html, đó là:
- Inline style (style trực tiếp trên thẻ)

- Internal style sheet (style trong nội bộ trang)
- External style sheet (style được lưu riêng sang 1 trang khác)
Inline style: thực chất là style trực tiếp trên thành phần thẻ của html, sử dụng
thuộc tính style có trong các thẻ. Cách style này không tận dụng được ưu điểm của css.
Internal style sheet: Sử dụng cách style trong bản thân trang web chỉ khi
nào trang web đó có ít các thành phần thẻ cần được style. Cách style này sử dụng
cặp thẻ <style></style>.
External style sheet: Sử dụng cách style này được áp dụng cho nhiều
trang khác nhau. Tất cả style cho các thành phần thẻ của html được lưu trên 1 file
.css. Khi có bất kỳ thay đổi nào trong style, chỉ cần sửa nó trong file .css, mọi hiệu
ứng sẽ được áp dụng cho các trang web.Sử dụng thẻ <link> cho loại style này.
<head>
<linktype="text/css" rel="stylesheet"href="mystyle.css" />
</head>
</head>
b, Cú pháp của CSS
Cú pháp của CSS:
Selector { property:value; }
Trong đó:

16


+ Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó
là các tag HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở bài học sau).
Ví dụ: body, h2, p, img, #title, #content, .username,…
+ Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ:
background-color, font-family, color, padding, margin,…
Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một
thuộc tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để

phân cách các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt
trong một cặp ngoặc nhọn sau selector.
+ Value: Giá trị của thuộc tính. Ví dụ: như ví dụ trên value chính là #FFF
dùng để định màu trắng cho nền trang.
Đối với một giá trị có khoảng trắng, bạn nên đặt tất cả trong một dấu
ngoặc kép.
Ví dụ: font-family:”Times New Roman”
Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo
với đơn vị của nó. Ví dụ: width:100 px. Nó sẽ làm CSS của bạn bị vô hiệu trên
Mozilla/Firefox hay Netscape.
+ Chú thích: trong CSS sử dụng cặp thẻ /* và */
 Cách định dạng font chữ
- font-family là dùng để khai báo kiểu loại font sử dụng
- font-style: là dùng để khai báo kiểu chữ dùng trong style, bình thường
hay nghiêng
- font-weight và font-variant: là dùng để trang trí kiểu font đang dùng
như là sáng (light), đậm (bold)
- text-align: là vị trí nằm của font trong trang web, có 3 kiểu là nằm sang
trái (left), phải (right) và ở giữa là (center)
- text-decoration: là dùng để trang trí kiểu font như là italic, blink...
- text-indent: dùng để xác định size (kích cỡ) đang dùng, thông thường
dùng là

và

và khai báo đơn vị là in, cm, pixel
- word-spacing: dùng để khoảng cách giữa các từ.

17


- letter-spacing: dùng để khoảng cách giữa các chữ
- color: dùng để hiển thị màu cho kiểu chữ
 Margin/Background

- margin-left: đoạn canh lề bên trái
- margin-right: đoạn canh lề bên phải
- margin-top: đoạn canh lền trên cùng
Ví dụ chúng ta có thể dùng như sau:
- margin: có thể khai báo chúng một lúc cho top, right và left
- line-height: là khoảng cách giữa các dòng chữ
- background-color: là dùng để hiển thị màu nền của trang web
- background-image: có thể dùng một tấm hình để làm background cho
trang web
- background-repeat: là dùng để lập lại hình nền theo trục tọa độ x và y.
- background-attachment: là dùng để gán hình, hình ảnh nền của trang web.
 Position và Division
- Position:dùng để định vị một ví trí xác định nào đó
<IMG STYLE="position:absolute" src="joe.jpg">
- Left: là dùng để hình ảnh nằm về vị trí bên trái bao nhiêu
<IMG STYLE="position:absolute; LEFT: 20px;" src="joe.jpg">
- Right:dùng để hình ảnh nằm về vị trí bên phải bao nhiêu
<IMG STYLE="position:absolute; RIGHT: 20px;" src="joe.jpg">
- Top: dùng để định vị trí trên top của screen

STYLE="position:absolute;

LEFT:

20px;

TOP:

200pt"

src="joe.jpg">
- Width:dùng để xác định chiều ngang của tấm hình là bao nhiêu

- Height:dùng để xác định chiều cao của tấm hình


18


- Overflow: là khi tấm hình của bạn quá kích cỡ cho phép thì nó có thể
dùng những chức năng sau hidden, visible, scroll

1.5 Cơ bản về HTML
1.5.1 Khái niệm cơ sở
a, HTML là gì?
HTML viết tắt của “HyperText Markup Language” tức “Ngôn ngữ Đánh
dấu Siêu văn bản” là một ngôn ngữ đánh dấu được thiết kế ra để tạo ra các trang
web với các mẩu thông tin được trình bày trên nền tảng World Wide Web.
HTML được định nghĩa như là một ứng dụng đơn giản của SGML
(Standard Generalized Markup Language) và được sử dụng trong các tổ chức cần
đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn Internet do tổ
chức World Wide Web Consortium (W3C) duy trì.
b, Các thẻ HTML
HTML bao gồm các thẻ (TAG), mỗi thẻ đều có một thuộc tính riêng.
Những thuộc tính này cung cấp thông tin về thành phần của trang web
Các dạng thẻ HTML:

 Thẻ HTML dùng để viết lên những thành tố HTML
 Thẻ HTML được bao quanh bởi hai dấu < và >
 Những thẻ HTML thường có một cặp giống như <b> và </b> trong đó
thẻ thứ nhất <b> là thẻ mở đầu và thẻ thứ hai </b> là thẻ kết thúc.
 Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung.
 Những thẻ HTML không phân biệt in hoa và viết thường, ví dụ: <b> và
<B> đều như nhau.
Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng
</html>. Nhờ có cặp TAG này mà Browser biết được đó là HTML - Document
để duyệt. Những chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được
những gì viết giữa cặp TAG <body> và </body>.

19


c, Cấu trúc của một tài liệu HTML
HTML đều có khung cấu trúc như sau:
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
</BODY>
</HTML>
Giữa cặp thẻ tiêu đề <TITLE>... </TITLE> là dòng chữ sẽ hiện lên trên
thanh tiêu đề của cửa sổ khi trình duyệt đọc tài liệu. Nếu bỏ trống thì trình duyệt
sẽ cho hiện tên tệp thay vào đó.
Toàn bộ nội dung của tài liệu nằm giữa hai thẻ xác định thân của trang
<BODY>... </BODY>. Các dòng văn bản, hình ảnh, âm thanh, video, các mối
liên kết... tạo nên trang Web đều phải nằm ở đây.
Không giống như khi lập trình, nếu mắc lỗi cú pháp HTLM sẽ không có
một thông báo lỗi nào báo cho biết mà trình duyệt sẽ hiểu lầm và trình bày trang

Web không như ý muốn mà thôi.
Những thẻ HTML cơ bản:
Thẻ (TAG)

Mô tả

<html>

Xác định một văn bản dạng HMTL

<body>

Xác định phần thân của tài liệu

...

Xác định Headings từ 1 đến 6

Xác định 1 đoạn văn bản




Chèn 1 dòng trắng

<hr>

Xác định 1 đường thẳng

<!-->

Xác định vùng chú thích

20


1.5.2. Danh sách và bảng trong HTML
a, Các kiểu danh sách
Việc liệt kê danh sách sẽ làm cho văn bản trở nên sáng sủa và dễ theo dõi.
Trong HTML có một số kiểu danh sách như danh sách đánh số thứ tự, danh sách
không đánh số thứ tự, danh sách định nghĩa, danh sách kiểu bảng chọn và danh
sách kiểu thư mục.
HTML hỗ trợ những dạng danh sách theo thứ tự, không theo thứ tự và
định nghĩa.
Những thẻ danh sách cơ bản:
Tag

Mô Tả

<ol>

Danh sách theo thứ tự

<ul>

Danh sách không theo thứ tự

<li>

1 phần tử trong danh sách

<dl>,<dt>,<dd>

Kiểu danh sách

<dir>

Hết hỗ trợ. Dùng<ul> thay thế

<menu>

Hết hỗ trợ. Dùng<ul> thay thế

Một số trình duyệt không hỗ trợ danh sách kiểu bảng chọn và danh sách
kiểu thư mục.
 Danh sách không theo thứ tự
Danh sách không theo thứ tự là một danh sách các mục. Danh sách của
các mục sẽ được đánh dấu bởi những bullet (dạng như gạch đầu dòng nhưng là
một vòng tròn màu đen).
Danh sách không theo thứ tự bắt đầu với thẻ <ul>. Mỗi một mục được bắt
đầu với một thẻ <li>.
 Danh sách theo thứ tự
Danh sách theo thứ tự cũng là một dạng danh sách của các mục. Nhưng
những mục trong đó được đánh dấu bởi số. Một danh sách theo thứ tự bắt đầu với
thẻ <ol>. Mỗi mục được bắt đầu với thẻ <li>.

21

b, Bảng biểu
 Khung cấu trúc
Bảng được định dạng bởi thẻ <table>. Một bảng được chia ra làm nhiều
hàng với thẻ <tr>, môi hàng được chia ra làm nhiều cột dữ liệu với thẻ <td>.
Chữ td là chữ viết tắt của "table data", là nội dung của cột dữ liệu. Một cột dữ
liệu có thể bao gồm chữ, hình ảnh, danh sách, đoạn vắn, form và bảng v.v.
Các thẻ cơ bản trong bảng:
Tag

Mô Tả

<table>

Vẽ bảng

<th>

Hàng đầu của bảng

<tr>

Hàng trong bảng

<td>

Ô trong hàng

<caption>

Nhãn của bảng

<colgroup>

Nhóm các cột

<col>

Định các thuộc tính của cột

<thead>

Hàng Đầu bảng

<tbody>

Thân của bảng

<tfoot>

Hàng cuối bảng

1.5.3. Đưa hình ảnh vào tài liệu HTML
a, Hình ảnh tĩnh
 Tệp ảnh
Mỗi ảnh được lưu giữ trong máy tính thành một tệp riêng biệt. Tệp ảnh có
nhiều định dạng khác nhau, thể hiện qua phần mở rộng (đuôi) của tên tệp: *.bmp,
*.gif, *.jpeg, *.jpg,…
Tuy nhiên các trình duyệt chỉ có thể “hiểu” được các tệp ảnh dưới dạng
GIF hay JPEG. Hình ảnh dạng GIF được sử dụng rộng rãi nhất trên Internet, sau
đó là đến các ảnh dạng JPEG.

 Thẻ <IMG…>
Cú pháp chèn ảnh vào trang Web: <IMG SRC=”URL”>

22


IMG (Image), thuộc tính SRC (Source) là đường dẫn đến nơi lấy tệp ảnh.
Giá trị của thuộc tính SRC được gán bằng URL là một địa chỉ trên máy tính địa
phương hay trên Internet. Nó chỉ ra nơi lưu trữ tệp ảnh cần chèn vào.
Địa chỉ URL báo cho trình duyệt biết cần lấy tệp ảnh ở đâu.
Nếu tệp ảnh nằm ngay trên máy tính địa phương thì cần ghi rõ đường dẫn
Nếu tệp ảnh lấy từ một nơi khác trên Internet thì phải ghi đầy đủ địa chỉ URL
b, Các thuộc tính của thẻ chèn hình ảnh
Trong thẻ IMG còn có một số thuộc tính khác như: ALT, WIDTH,
HEIGHT, ALIGN, VSPACE, HSPACE, BORDER
 Thuộc tính ALT
Thuộc tính ALT – ALTernat4e cho phép ta chèn một đoạn chữ thay thế
vào chỗ có hình và hiện lên xâu chú thích khi đưa trỏ chuột vào ảnh. Thuộc tính
này dùng trong trường hợp trình duyệt không hiển thị được hình ảnh thì sẽ hiện
dòng văn bản thay thế. Làm như vậy để những người sử dụng trình duyệt không
có khả năng đọc ảnh hay đã tắt chức năng đọc ảnh để tăng tốc độ có thể biết được
đó là hình ảnh gì và họ có thể chọn xem sau nếu có thời gian.
Nên luôn sử dụng thuộc tính này khi đưa hình ảnh vào trang Web vì nhiều
người muốn có tốc độ cao, lướt nhanh qua các thông tin là chính đã tắt chức năng
đọc ảnh của trình duyệt vẫn có thể biết được ảnh đó mang nội dung gì.
Nếu không sử dụng thuộc tính ALT thì tại chỗ có hình sẽ hiện từ IMAGE
hoặc biểu tượng ảnh bị khuyết.
 Thuộc tính WIDTH và HEIGHT
Thuộc tính WIDTH và HEIGHT dùng để xác định chiều rộng và chiều
cao của ảnh. Giá trị này có thể tính theo phần trăm (%) hoặc pixel.

 Thuộc tính ALIGN
Thuộc tính ALIGN cho phép chỉnh lại vị trí của ảnh theo cả hai chiều
ngang và chiều dọc.
Theo chiều dọc:ALIGN=MIDDLE, ALIGN=TOP, ALIGN=BOTTOM
Theo chiều ngang:ALIGN=LEFT, ALIGN=RIGHT

23


Nếu như không có thuộc tính này thì mặc định ảnh được đặt tại đúng nơi
đặt thẻ IMG dóng trên cùng dòng chữ, theo cạnh dưới của khung nhìn.
1.6 Cơ bản về mã nguồn mở WordPress
1.6.1. WordPress là gì?
WordPress là một phần mềm nguồn mở (Open Source Software) được viết
bằng ngôn ngữ lập trình website PHP (Hypertext Preprocessor) và sử dụng hệ
quản trị cơ sở dữ liệu MySQL. WordPress được ra mắt lần đầu tiên vào ngày
27/5/2003 bởi tác giả Matt Mullenweg và Mike Little. Hiện nay WordPress được
sở hữu và phát triển bởi công ty Automattic có trụ sở tại San Francisco,
California thuộc hợp chủng quốc Hoa Kỳ.
WordPress là một mã nguồn mở bằng ngôn ngữ PHP để hỗ trợ tạo blog cá
nhân, và nó được rất nhiều người sử dụng ủng hộ về tính dễ sử dụng, nhiều tính
năng hữu ích. Qua thời gian, số lượng người sử dụng tăng lên, các cộng tác viên
là những lập trình viên cũng tham gia đông đảo để phát triển mã nguồn
WordPress có thêm những tính năng tuyệt vời. Hiện nay, WordPress đã được
xem như là một hệ quản trị nội dung (CMS – Content Management System) vượt
trội để hỗ trợ người dùng tạo ra nhiều thể loại website khác nhau như blog,
website tin tức/tạp chí, giới thiệu doanh nghiệp, bán hàng – thương mại điện tử,
thậm chí với các loại website có độ phức tạp cao như đặt phòng khách sạn, thuê
xe, đăng dự án bất động sản,… Hầu như mọi hình thức website từ quy mô nhỏ
đến lớn đều có thể triển khai trên nền tảng WordPress.

1.6.2. Một vài nét nổi bật của WordPress
- Hệ thống Plugin phong phú và không ngừng cập nhật, ngoài ra người
dùng có thể viết Plugin hoặc tích hợp code vào Wordpress.
- Được phát triển bằng nhiều ngôn ngữ (hỗ trợ tiếng việt).
- Cập nhật phiên bản liên tục, cộng đồng hỗ trợ lớn.
- Có hệ thống Theme đồ sộ, nhiều theme chuyên nghiệp có khả năng SEO tốt.
- Việc quản lý blog, quản lý các bài viết rất thuận tiện giống như các phần
mềm thiết kế website chuyên nghiệp.

24


- Thể hiện các tệp PDF, DOC, Powerpoint ngay trên nội dung bài viết. Đặc
biệt tích hợp sẵn Latex - công cụ soạn thảo công thức toán học, giúp người sử
dụng có thể viết công thức toán học ngay trên blog.
- WordPress có 23 Widget (ứng dụng tạo thêm) như Thống kê số truy nhập
blog, Các bài mới nhất, Các bài viết nổi bật nhất, Các comment mới nhất, Liệt kê
các chuyên mục, Liệt kê các Trang, Danh sách các liên kết, Liệt kê số bài viết
trong từng tháng... Có 79 theme để người dùng lựa chọn.
- Ngoài việc được áp dụng để xây dựng các Website dạng trang tin tức và
Blog, WordPress còn được sử dụng để xây dựng nên các Website thương mại
điện tử với mục đích chính là bán hàng Online. Tuy nhiên nếu xét trên phương
diện này thì WordPress không thực sự nổi trội.
- Ngoài thống kê số truy nhập của từng ngày cho blog, Wordpress còn
thống kê số truy nhập của từng ngày đối với mỗi bài viết của blog. Trên cơ sở đó
quản trị website sẽ có định hướng nên viết vấn đề gì tiếp theo.
- Các comment có thể duyệt rồi mới cho đăng, comment nào có nội dung
không phù hợp có thể xóa, nếu cho là spam thì sau này IP đó không có thể gửi
comment vào blog được nữa.
- Admin (Quản trị website) có thể cho 35 cộng tác viên gửi bài vào blog, có

thể phân quyền cho các cộng tác viên theo các cấp độ khác nhau. Lưu giữ danh
sách thành viên đã ghé thăm trang blog. Admin cũng có thể cho bất kỳ ai đăng
bài qua email vào blog miễn là admin cho họ một địa chỉ email bí mật của blog
(địa chỉ này có thể thay đổi bất kỳ lúc nào).
- Sao lưu dữ liệu nhằm khôi phục nội dung blog một cách dễ dàng nếu
chẳng may blog bị hack, và cung cấp công cụ chuyển nhà từ các blog khác sang
blog WordPress.
- WordPress hỗ trợ 3 GB để lưu trữ các tệp hình ảnh và văn bản.
- Hàng ngày WordPress có thống kê 100 bài trên các blog tiếng Việt của
WordPress được nhiều người đọc nhất trong vòng 48 tiếng. Nhờ đó bạn biết
được các thông tin quan trọng nhất đang diễn ra.

25