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

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

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

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ỉ


 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

-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.

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.

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ẻ)

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


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:

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


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




<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.

 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.

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

---