Đề tài thiết kế web công ty web hitime

BỘ LAO ĐỘNG THƯƠNG BINH VÀ XÃ HỘI
TRƯỜNG CAO ĐẲNG KINH TẾ - CƠNG NGHỆ TP. HỒ CHÍ MINH

---------oOo---------

BÁO CÁO THỰC TẬP TỐT NGHIỆP
XÂY DỰNG PHÁT TRIỂN GIAO DIỆN WEBSITE
DỰA TRÊN BẢN THIẾT KẾ
Giảng viên hướng dẫn: Th.S
Sinh viên thực hiện:
Lớp: C15CTT1
Ngành: Công nghệ thông tin
Chuyên ngành: Công nghệ thông tin

TP. Hồ Chí Minh, tháng 06

năm


LỜI CẢM ƠN
Đầu tiên cho em xin trân trọng gửi lời cảm ơn chân thành và sự kính trọng tới
các Thầy và Cô ngành Công nghệ thông tin trường Cao Đẳng Kinh Tế - Công Nghệ
TP.HCM, và đặc biệt là giáo viên hướng dẫn Thầy đã tận tình hướng dẫn, chỉ bảo em
trong suốt quá trình thực hiện luận văn này.
Do kiến thức cịn hạn hẹp nên khơng tránh khỏi những thiếu sót trong cách
hiểu, lỗi trình bày. Em rất mong nhận được sự đóng góp ý kiến của quý thầy cô và ban
lãnh đạo, các anh chị trong công ty để báo cáo tốt nghiệp đạt được kết quả tốt hơn.
Em xin chân thành cảm ơn!
TP.HCM, ngày tháng 06 năm

LỜI CAM ĐOAN
Nhóm báo cáo thực tập tốt nghiệp xin cam đoan đây là cơng trình nghiên cứu
riêng của nhóm, khơng sao chép bất kì một đồ án nào hết. Các số liệu, kết quả trong
đồ án này là trung thực và chưa từng được ai công bố trong bất kỳ cơng trình nghiên
cứu nào khác.

Người thực hiện


TRƯỜNG CAO ĐẲNG KT-CN TPHCM
KHOA KT-CN

-----------



-----------

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

-----------



-----------

NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN
ĐỀ TÀI: XÂY DỰNG PHÁT TRIỂN GIAO DIỆN WEBSITE

DỰA TRÊN BẢN THIẾT KẾ
Sinh viên thực hiện: Nhận xét của giáo viên: ...................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
..........................................................................................................................
Điểm bằng số: .............................................
Điểm bằng chữ: ..........................................

TP.HCM, ngày

tháng

năm

Giảng viên
(Ký và ghi rõ họ tên)


LỜI NĨI ĐẦU
Những năm gần đây, vai trị của các hệ thống thông tin trong doanh nghiệp đã ngày
càng lớn mạnh. Từ chỗ chỉ đƣợc sử dụng để hỗ trợ một số hoạt động trong văn phịng,
hệ thống thơng tin đã trở nên có vai trị chiến lƣợc trong doanh nghiệp. Đặc biệt
những thành tựu trong công nghệ thông tin (CNTT) đã khiến doanh nghiệp ngày càng
chú ý hơn tới việc áp dụng những nó để gia tăng ưu thế cạnh tranh và tạo cơ hội cho

mình. Hiện nay, trào lƣu ứng dụng thành tựu CNTT không chỉ giới hạn trong các
doanh nghiệp lớn, tầm cỡ đa quốc gia mà còn lan rộng trong tất cả các doanh nghiệp,
kể cả những doanh nghiệp vừa và nhỏ ở những nước đang phát triển.
Qua thời gian tìm hiểu và được học tập thực tế tại Công Ty Thiết Kế Web HiTime, với
nhu cầu của khách hàng mong muốn cty xây dựng phát triển website bán hàng dựa trên
bản thiết kế của khách hàng. Nhờ sự cần cù siêng năng trong công việc , nên được Trưởng
phòng bộ phẫn kĩ thuật giao cho công việc là: Phát triển Web Front-end chuyển đổi dữ
liệu sang giao diện đồ họa , để người dùng có thể xem và tương tác với dữ liệu đó và Phối
hợp với back-end developer và web designer để cải thiện tính khả dụng.

Website được viết bằng HTML ,CSS , JavaScript và thư viện React, chạy trên nền
Visual Studio Code , giúp chúng ta xây dựng giao diện website dễ dàng , phân chia
các components dễ dàng gọn ràng hiệu quả.
Là sinh viên của trường chúng em luôn luôn mong muốn được học hỏi và áp dụng
những kiến thức mà chúng em đã được các thầy cô dạy trong thời gian qua. Đồ án này
giúp chúng em tổng kết lại những điều đã học được và phát triển khả năng tư duy, tính
sang tạo trong cơng việc để sau này chúng em có thể vững bước trên con đường mà
chúng em đã chọn.
Xin chân thành cảm ơn các thầy cô đã nhiệt tình dạy chúng em trong suốt những
năm học qua và để chúng em có đủ các kiến thức làm được một đồ án hoàn chỉnh và
là bước khởi đầu cho những dự án trong tương lai.


MỤC LỤC
CHƯƠNG I: GIỚI THIỆU ĐƠN VỊ THỰC TẬP................................................. 1
1.1 Giới Thiệu Chung............................................................................................ 1
1.2 Đội Ngũ Lãnh Đạo.......................................................................................... 1
1.3 Tầm Nhìn - Sứ Mệnh ………………………………………………………..1
CHƯƠNG 2: NỘI DUNG NHIỆM VỤ CHÍNH ĐƯỢC GIAO............................2
2.1.Vị trí................................................................................................................ 2

2.2. Các nhiệm vụ được phân cơng.......................................................................2
CHƯƠNG 3: NỘI DUNG CÁC CƠNG VIỆC VÀ KẾT QUẢ ĐẠT ĐƯỢC.......3
3.1. Tuần 1: Ôn tập lại kiến thức cũ......................................................................3
3.2. Tuần 2: Thực hiện giao diện dựa trên file psd................................................4
3.2.1. Tạo giao diện đơn giản theo mẫu sau:...................................................... 4
3.2.2. Sử dụng HTML và CSS để tạo giao diện:................................................ 4
3.2.3. Phân bổ thư mục theo cấu trúc................................................................. 4
3.3. Tuần 3: Thực hiện và hoàn thành bài mẫu chi tiết..........................................5
3.3.1. Viết định dạng theo SCSS và cài đặt grunt để tạo file .min......................5
3.3.2. Tạo dự án và phân chia components trên Visual Studio Code..................5
3.3.3. Kết quả đạt được...................................................................................... 6
3.4. Tuần 4: Responsive cho web..........................................................................9
3.4.1.Tổng quát: ………………………………………………………………..9
3.4.2. Kết quả: ……………………………………………………………………9
3.5. Tuần 5........................................................................................................... 11
3.5.1.Trao đổi, phân tích với team và nhận dự án xây dựng giao diện website 11
3.5.2. Tiến hành tạo dự án và phân chia component trên Visual Studio Code .. 13

Public :............................................................................................... 14
Trang index.html............................................................................ 14
Src :…………………………………………………………………..14
File Assets : Là file chứa những hình ảnh Image........................... 14


File App.css : File chứa đoạn code Css......................................... 14
App.js : Thư viện gọi Components................................................ 14
File Components: Giúp phân chia các UI...................................... 14
Hình 3.1………………………………………………………14
CSS : Là file chứa những Css của components.................................14
Hình 3.2………………………………………………………14

Section : File chứa components......................................................... 15
Hình 3.3………………………………………………………15
Svg: File chứa image có đuổi .svg (giỏ hàng, u thích, load)..........15
Hình 3.4………………………………………………...........15
3.5.3: Giao diện trang chủ……………………………………………………..15
Hình 3.5……………………………………………………………………...16
Hình 3.6……………………………………………………………………...16
3.6. Tuần 6 : Hồn thành trang sản phẩm............................................................ 17
3.6.1 : Fake IPA sản phẩm................................................................................ 17
Hình 3.9......................................................................................................... 18
3.6.2 : Giao diện sản phẩm............................................................................... 18
Hình 4.0......................................................................................................... 18
Hình 4.1......................................................................................................... 19
3.7. Tuần 7 : Hồn trang chi tiết sản phẩm ......................................................... 19
3.7.1 : Chi tiết sản phẩm................................................................................... 19
Hình 4.2......................................................................................................... 19
3.7.2 : Giỏ hàng................................................................................................ 20
Hình 4.3......................................................................................................... 20


3.7.3: Xóa sản phẩm , trùng sản phẩm.............................................................. 20
Hình 4.4......................................................................................................... 20
3.7.4: Thanh tốn.............................................................................................. 21
Hình 4.5......................................................................................................... 21
Hình 4.6......................................................................................................... 21
3.8. Tuần 8 : Hồn thành giao diện trên mobile................................................... 22
Hình 4.7......................................................................................................... 22
Hình 4.8......................................................................................................... 22
Hình 4.9......................................................................................................... 23
Hình 5............................................................................................................ 23

CHƯƠNG 4: KẾT QUẢ QUA ĐỢT THỰC TẬP.............................................. 24
4.1 Nhận thức của bản than sau thời gian tìm hiểu và tham gia thực tập.............24
4.2. Mối quan hệ giữa các đồng nghiệp trong tổ hay bộ phận nơi thực tập.........24
4.3. Học hỏi từ các quy định nơi thực tập............................................................ 25
4.3.1. Nội quy lao động, học tập, nghỉ ngơi và an tồn lao động...................25
4.3.2.Quy định về Phịng cháy chữa cháy, Vệ sinh và môi trường.................25
4.4. Đánh giá mối liên hệ giữa lý thuyết và thực tiễn.......................................... 26
CHƯƠNG 5: KẾT LUẬN.................................................................................. 27
5.1. Kết luận........................................................................................................ 27
5.2 Hướng phát triển trong tương lai................................................................... 27
TÀI LIỆU THAM KHẢO................................................................................... 28


CHƯƠNG I: GIỚI THIỆU ĐƠN VỊ THỰC TẬP
1.1.

Giới Thiệu Chung
Thành lập năm 2017, công ty HITIME đã trở thành công ty dịch vụ CNTT
chuyên về thiết kế website đang phát triển tại Việt Nam. Được thúc đẩy bởi niềm
đam mê và làm việc chăm chỉ, công ty giúp khách hàng của họ xây dựng các doanh
nghiệp mạnh hơn, nhanh nhẹn và sáng tạo hơn.
Là một tổ chức được xây dựng trên các nền tảng có sẵn, HiTime mang cơng nghệ
tới gần với phương châm đơn giản hóa cho khách hàng sử dụng, với giải pháp là
làm sao để mang lại cho khách hàng có kết quả cơng việc Kinh doanh.

1.2.

Đội Ngũ lãnh Đạo
Founder – CEO : Nguyễn Hoàng Chương
Lead Designer : Vũ Thị Kim Oanh

Lead Developer : Nguyễn Công Vũ

1.3.

Tầm nhìn - Sứ Mệnh
a)

TẦM NHÌN:
Bằng khát vọng tiên phong cùng chiến lược phát triển bền vững, HiTime luôn
phấn đấu trở thành cơng ty Cơng nghệ hàng đầu Việt Nam, có uy tìn và vị thế trên
bảng đồ kinh tế Thế giới, xây dựng lên các dịch vụ và giải pháp Công nghệ nhằm
hỗ trợ cộng đồng Doanh nghiệp Việt Nam phát triển mạnh mẽ ra thị trường Thế
giới.

b)

SỨ MỆNH:
Cung cấp các giải pháp công nghệ nâng cao hiệu quả hoạt động kinh doanh
cho các Doanh nghiệp Việt.

c)

GIÁ TRỊ CỐT LỖI:
Trung thực – Nhiệt Huyết – Sáng Tạo – Hiệu Quả”

d)

VĂN HÓA NGƯỜI HITIME:
1

Yêu nước, Kỷ luật, Văn minh
HiTime là nơi tập hợp những con người có lý tưởng, có năng lực, có bản lĩnh
ln chủ động tìm hướng đi riêng và khao khát chung tay tạo ra những giải pháp
và dịch vụ hiệu quả để đóng góp cho sự phát triển các Doanh nghiệp Việt. Môi
trường làm việc HiTime là sáng tạo, hiệu quả; Văn hóa của HiTime là đề cao tinh
thần trách nhiệm, tôn trọng kỷ luật, coi trọng công bằng và văn minh.
SLOGAN:

e)

"Tầm Nhìn Tiên Phong"

CHƯƠNG 2: NỘI DUNG NHIỆM VỤ CHÍNH ĐƯỢC GIAO
2.1. Vị trí
-

Phịng kĩ thuật

-

Thực tập ở vị trí lập trình viên (frontend)

-

Làm việc cùng các anh chị tại công ty

-

Được các anh chị đi trước hướng dẫn

-

Làm việc cùng các bạn thực tập sinh khác

2.2. Các nhiệm vụ được phân công
-

Tự học và thực hành dựa trên tài liệu

-

Báo cáo thực hành

-

Làm bố cục giao diện chung

-

Làm giao diện chi tiết

-

Hiệu ứng cho web

-

Sử dụng javascript để tạo popup và thay đổi cần thiết cho web

-

Sử dụng thư viện React, giúp phân chia components dễ dàng , có thể tái sử dụng

-

Responsive cho web
2


-

Hoàn thành giao diện web của khách hàng đưa ra

CHƯƠNG 3: NỘI DUNG CÁC CÔNG VIỆC VÀ KẾT
QUẢ ĐẠT ĐƯỢC
3.1. Tuần 1: Ôn tập lại kiến thức cũ
-

Thực hành và hiểu được chức năng của các thẻ cơ bản trong html

Hình 1
-

Thực hành và hiểu được chức năng của các thẻ cơ bản trong css

Hình 1.1
-

Sử dụng các lệnh cơ bản trong photoshop

+

Sử dụng và thao tác với file .psd

+

Hiển thị / ẩn các layout đã có
3


+

Phân chia bố cục web

+

Cắt hình ảnh từ file psd

+

Giảm kích thước ảnh nhằm giảm dung lượng.

3.2. Tuần 2: Thực hiện giao diện dựa trên file psd
3.2.1. Tạo giao diện đơn giản theo mẫu sau:

Hình 1.2

3.2.2. Sử dụng HTML và CSS để tạo giao diện:

-

-

Phân chia 3 phần : header, main, footer.

-

Main gồm nhiều section và các section được chia thành nhiều phần nhỏ

Nhóm các chi tiết trùng lập lại từng phần chung và riêng để có thể sử dụng lại
những phần cần thiết.
3.2.3. Phân bổ thư mục theo cấu trúc

-

Phân chia các têp theo từng thư mục riêng bao gồm các thư mục hình ảnh, định
dạng, fonts, chức năng, ….
4


-

Các đường dẫn trong khi lập trình phải là các đường dẫn tương đối

3.3. Tuần 3: Thực hiện và hoàn thành bài mẫu chi tiết
3.3.1. Viết định dạng theo SCSS và cài đặt grunt để tạo file .min
-

Thực hiện theo cách này thì khi ctrl + s sẽ được tự động biên dịch file

.scss thành css và nén nó thành file .min.css
3.3.2. Tạo dự án và phân chia components trên Visual Studio Code

Hình 1.3

5


3.3.3. Kết quả đạt được

Hình 1.4

Hình 1.5
6


Hình 1.6

Hình 1.7

Hình 1.8
7


Hình 1.9

Hình 2

Hình 2.1

8


3.4. Tuần 4: Responsive cho web
3.4.1. Tổng quát
-

Chức năng của Responsive là để cho web có thể hiển thị trên tất cả các thiết vị
nhưng vẫn có thể giữ đúng nội dung và giao diện dễ sử dụng
-

Sử dụng flexbox, grid, các giá trị tương đối, các thẻ sẵn có trong css để

responsive cho web
-

Phân chia từng kích cỡ màn hình để có thể điều chỉnh cho đúng
3.4.2. Kết quả:

Hình 2.2

9


Hình 2.3

Hình 2.4

10

Hình 2.5

3.5. Tuần 5
3.5.1. Trao đổi, phân tích với team và nhận dự án xây dựng giao diện
website ( Website bán giày Annanas )
Giao diện trang web được viết bằng HTML/CSS/Javascript/React trên ứng

-

dụng Visual Studio Code
+

Visual Studio Code là gì ? Visual Studio Code là một trình biên tập mã được
phát triển bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức
năng debug, đi kèm với Git, có syntax highlighting, tự hồn thành mã thơng
minh, snippets, và cải tiến mã nguồn.

+

HTML/CSS là gì ? HTML, HyperText Markup Language, cung cấp cấu trúc
nội dung và ý nghĩa bằng cách xác định nội dung đó, ví dụ như tiêu đề, đoạn
11


văn hoặc hình ảnh. CSS, hay Cascading Style Sheets, là ngơn ngữ trình bày
được dùng để tạo kiểu cho sự xuất hiện của nội dung sử dụng, ví dụ như phông
chữ hoặc màu sắc.
Hai ngôn ngữ HTML và CSS độc lập với nhau và vẫn giữ nguyên như
vậy. CSS không nên được viết bên trong một tài liệu HTML và ngược lại. Theo

quy định, HTML sẽ luôn đại diện cho nội dung và CSS sẽ luôn thể hiện sự xuất
hiện của nội dung đó.

Hình 2.6
+

JavaScript là gì ?
JavaScript là một ngơn ngữ lập trình của HTML và WEB. Nó là nhẹ và
được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi
hành của chúng cho phép Client-Side script tương tác với người sử dụng và
tạo các trang web động. Nó là một ngơn ngữ chương trình thơng dịch với các
khả năng hướng đối tượng.

12


Hình 2.7

JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript,
nhưng cơng ty Netscape đã đổi tên của nó thành JavaScript, bởi vì sự phổ biến
+

React là gì ?
Là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng
(UI). Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng
phương pháp mới để render trang web.
Components của công cụ này được phát triển bởi Facebook. Nó được ra
mắt như một công cụ JavaScript mã nguồn mở vào năm 2013. Hiện tại, nó đã đi
trước các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán
chạy nhất thời bấy giờ.

Hình 2.8

3.5.2. Tiến hành tạo dự án và phân chia component trên Visual Studio Code

13


Hình 2.9
-

Public :
+

-

Trang index.html

Src :
+

File Assets : Là file chứa những hình ảnh Image

Hình 3
+

File App.css : File chứa đoạn code Css

+

App.js : Thư viện gọi Components

+

File Components: Giúp phân chia các UI (giao diện người dùng) thành
các phân nhỏ để dễ dàng quản lý và tái sử dụng

Hình 3.1
•

CSS : Là file chứa những Css của components

Hình 3.2
14


•

Section : File chứa components

Hình 3.3
•

Svg: File chứa image có đuổi .svg (giỏ hàng, u thích, load)

Hình 3.4

3.5.3. Giao diện trang chủ

15

Hình 3.5

Hình 3.6

16


Hình 3.7

Hình 3.8

3.6. Tuần 6 : Hồn thành trang sản phẩm
3.6.1 : Fake IPA sản phẩm

Hình 3.8
17