Báo các thực tập doanh nghiệp đề tài lập trình website

TRƯỜNG ĐẠI HỌC MỎ - ĐỊA CHẤT
KHOA CÔNG NGHỆ THÔNG TIN

KẾ HOẠCH VÀ NỘI DUNG THỰC TẬP
DOANH NGHIỆP
Công Ty Cổ Phần Giải Pháp Ngọn Sóng Mới
NEWWAVE SOLUTIONS

Giáo Viên Hướng Dẫn:

Sinh Viên Thực Hiện:

TS: Lê Hồng Anh

Đặng Thạch Sơn
( 1821050566)

Hà Nội – 2022



MỤC LỤC
DANH MỤC CÁC HÌNH ẢNH....................................................................................3
DANH MỤC BẢNG BIỂU...........................................................................................3
LỜI MỞ ĐẦU...............................................................................................................1
CHƯƠNG 1: GIỚI THIỆU VỀ CƠNG TY VÀ VỊ TRÍ THỰC TẬP............................1
1.1 Giới Thiệu Về Công Ty........................................................................................1
1.1.1 Sinh Viên Thực Hiện......................................................................................1
1.2 Giảng Viên Hướng Dẫn.....................................................................................2
1.3 Lịch Sử Hình Thành Và Phát Triển...................................................................2
1.4 Cơ Sở Hạ Tầng..................................................................................................3

1.5 Các Hoạt Động Chuyên Ngành Và Mơi Trường Làm Việc...............................3
1.6 Tổ Chức Hành Chính Nhân Sự.........................................................................8
1.2 Vị Trí Thực Tập..................................................................................................10
1.3 Đề Tài Thực Tập.................................................................................................10
1.4 Lịch Làm Việc....................................................................................................10
CHƯƠNG 2 NỘI DUNG THỰC TẬP........................................................................12
2.1 Mục Tiêu Thực Tập Doanh Nghiệp....................................................................12
2.2 Báo Cáo Nội Dung Thực Tập............................................................................13
2.3 Nội Dung Các Công Việc Đã Thực Hiện............................................................13
2.3.1 Nội Dung Tuần 1:.........................................................................................13
2.3.2 Nội Dung Tuần 2:.........................................................................................22
2.3.3 Nội Dung Tuần 3:.........................................................................................25
2.3.4 Nội Dung Tuần 4:.........................................................................................26
2.3.5 Nội Dung Tuần 5:.........................................................................................27
2.3.6 Nội Dung Tuần 6:.........................................................................................27
2.3.7 Nội Dung Tuần 7:.........................................................................................28
2.3.8 Nội Dung Tuần 8:.........................................................................................29
2.3.9 Nội Dung Tuần 9:.........................................................................................29
2.3.10 Nội Dung Tuần 10:.....................................................................................30
2.4 Phương Pháp Thực Hiện.....................................................................................31
CHƯƠNG 3 ĐÁNH GIÁ KẾT QUẢ VÀ ĐỊNH HƯỚNG PHÁT TRIỂN..................31
3.1 Đánh Giá Kết Quả Thực Tập..............................................................................32


3.1.1 Tình Thần Ý Thức Và Thái Độ Trong Quá Trình Thực Tập........................32
3.1.2 Tinh thần chuẩn bị mọi mặt của bản thân cho đợt thực tập..........................32
3.1.3 Ý thức thái độ trong thời gian thực tập tại Cơng Ty NEWWAVE
SOLUTIONS........................................................................................................32
3.1.4 Khó Khăn.....................................................................................................32
3.2 Kết Luận Và Định Hướng Phát Triển Của Đề Tài..............................................32

3.2.1 Kết Luận.......................................................................................................32
3.2.2 Hướng phát triển của đề tài..........................................................................32
TÀI LIỆU THAM KHẢO...........................................................................................32
Tài Liệu Tiếng Việt...................................................................................................32
Tài Liệu Internet.......................................................................................................32

DANH MỤC CÁC HÌNH ẢNH
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình
Hình

1: Logo Của Cơng Ty........................................................................................... 1
2: Hình Ảnh Sự Kiện Tại Cơng Ty......................................................................5
3 :Hình ảnh sự kiện tại cơng ty............................................................................6
4 : Hình ảnh Du Lịch Ngoại Khóa Của Cơng Ty.................................................6
5 : Hình Ảnh Sản Phẩm Dự Án BULLET..........................................................22
6 : Hình Ảnh Dự Án Website Cơng Ty...............................................................24
7 : Hình Ảnh Dự Án Website Cơng Ty...............................................................24

8: Hình Ảnh Dự Án Website Cơng Ty................................................................26
9: Hình Ảnh Dự Án Website Cơng Ty................................................................26
10: Hình Ảnh Dự Án Website Cơng Ty..............................................................27
11: Hình Ảnh Dự Án Website Cơng Ty..............................................................28
12: Hình Ảnh Dự Án Cơng Ty Ihouzz Teach.....................................................28
13: Hình Ảnh Dự Án Cơng Ty Ihouzz Teach.....................................................29
14: Hình Ảnh Dự Án RidgmontFarm.................................................................29
15 : Hình Ảnh Dự Án RidgmontFarm................................................................30

DANH MỤC BẢNG BIỂU
Biểu Đồ 1 : Biểu Đồ Phát Triển Nhân Sự......................................................................7
Biểu Đồ 2: Sơ Đồ Cơ Cấu Tổ Chức...............................................................................8
Biểu Đồ 3: Bảng Kế Hoạch Thực Tập.........................................................................11


LỜI MỞ ĐẦU
Công Nghệ thông tin trong giai đoạn hiện nay đang có những bước phát triển
như vũ bão trên mọi lĩnh vực hoạt động ở khắp nới trên thế giới , điều xảy ra trong
vòng vài năm vừa qua ở Việt Nam là sự đầu tư ồ ạt vào công nghệ. Tin học đã và đang
là một trong những vấn đề không thể thiếu đối với bất kỳ tổ chức , công ty nào . Đặc
biệt tin học ngày càng có vai trị quan trọng trong vấn đề quản lý tại các cơ quan , tổ
chức nhất là trong lĩnh vực thu thập thông tin . Đối với Việt Nam , tuy công nghệ
thông tin mới chỉ phát triển trong vòng vài năm trở lại đây và đang đi từng bước phát
triển nhưng những bước phát triển đó đã cho thấy Việt Nam là nước có tiềm năng về
lĩnh vực công nghệ thông tin đang là thế mạnh của đất nước . Hệ thống thông tin giúp
cho công việc quản lý được dễ dàng hơn, nâng cao hiệu quả sản xuất , tiết kiệm được
thời gian và công sức.
Qua thời gian tìm hiểu thực tế để xác định chuyên ngành và công ty để thực tập . Em
đã quyết định chọn cơng ty newwave solution . Cơng ty có nhiều kinh nghiệm trong
lĩnh vực công nghệ thông tin và phát triển phần mềm.

Để có được sự thành cơng đó em xin gửi lời cản ơn chân thành nhất đến với thầy cô
trong trường Đại học Mỏ Địa chất đã tận tình truyền đạt kiến thức cũng như kinh
nghiệm quý báu cho em trong suốt quá trình học tập tại trường. Đặc biệt dưới sự
hướng dẫn tận tình của thầy giáo Tiến sĩ Lê Hồng Anh trong đợt thực tập vừa qua, đã
giúp em củng cố, nắm vững kiến thức để áp dụng và công việc thực tế tốt hơn.
Đồng thời, em cũng xin cảm cảm tới ban lãnh đạo cùng các anh chị trong đơn vị thực
tập là Công ty Cổ Phần Giải Pháp Ngọn Sóng Mới – NEWWAVE SOLUTIONS đã
cho em có được một mơi trường thực tập làm việc hoà đồng, thân thiện giúp em hoàn
thành tốt đợt thực tập.
Do còn nhiều bỡ ngỡ khi lần đầu được tiếp xúc với hoạt động thực tế ở Công ty cũng
như kiến thức chun mơn cịn hạn chế, nên bài báo cáo thực tập không thể tránh khỏi
những thiếu sót. Vì vậy, em mong nhận được sự đống góp từ đại diện Công ty và thầy
cô trong Trường Đại học Mỏ Địa chất để bài báo cáo thực tập được hồn thiện hơn.

CHƯƠNG 1: GIỚI THIỆU VỀ CƠNG TY VÀ VỊ TRÍ THỰC TẬP
1.1 Giới Thiệu Về Cơng Ty
1.1.1 Sinh Viên Thực Hiện
-

Họ Và Tên : Đặng Thạch Sơn
1

Đặng Thạch Sơn – DCCTKH63B


-

Mã Sinh Viên : 1821050566
Lớp : Khoa Học Máy Tính K63B
Chun Ngành : Khoa học máy Tính

Khoa: Cơng Nghệ Thơng Tin

1.2 Giảng Viên Hướng Dẫn
-

Họ Và Tên : Th.s Lê Hồng Anh
Đơn Vị : Khoa Công Nghệ Thông Tin

1.3 Lịch Sử Hình Thành Và Phát Triển
-

Tên Tiếng Việt: Cơng Ty Cổ Phần Giải Pháp Ngọn Sóng Mới
Tên Tiếng Anh: NEWWAVE SOLUTIONS JOINT STOCK COMPANY
Tên Viết Tắt: NEWWAVE SOLUTIONS
Logo Của Công Ty:

Hình 1: Logo Của Cơng Ty
-

Địa Chỉ Chính : Tầng 4, tầng 7 và tầng 10, Tịa Mitec, Lơ E2 Khu Đơ thị mới
Cầu Giấy, n Hịa, Hà Nội

-

Văn Phịng Chi Nhánh: E1-chome-11-8 Yushima, Thành phố Bunkyo, Tokyo
113-0034, Nhật Bản

-

Website : />: />

-

Số điện Thoại : 02466635848

-

Email:

Newwave Solutions là một trong những công ty hàng đầu cung cấp các phần mềm
dạng dịch vụ với 10+ năm kinh nghiệm và 500+ nhân viên.

2

Đặng Thạch Sơn – DCCTKH63B


Đươc thành lập từ năm 2011, đội ngũ nhân viên giàu kinh viên trong độ tuổi 20 trở lên
đang học và tốt nghiệp các trường đại học tại HÀ Nội .Những ngày đầu thành lập
,công ty hoạt động chủ yếu ở thị trường Nhật Bản đầy tiềm năng ,hiện nay hoạt động
của công ty đã được mở rộng ra với các khách hàng trong và ngồi nước ,khơng chỉ
dừng lại ở thị trường Nhật Bản ,cơng ty đã kí hợp đồng với các khách hàng châu
Âu ,Mỹ và châu Phi .
Với Đội ngũ cán bộ nhân viên của Công Ty có chất lượng và cách tổ chức quản lý ,
Cơng Ty đã đưa đến cho người dùng sự tin cậy , an tồn , bảo hành máy móc hay lắp
đặt bảo dưỡng phần mềm cho khách hàng sự tin nghệm và an tồn khi làm việc với
Cơng Ty . Ngồi ra Cơng Ty cịn bảo trì nâng cấp phát triển các phần mềm cho khách
hàng .
Ngồi ra Cơng Ty đã đào tạo và dạy cho nhiều sinh viên xin đến thực tập để sau này ra
trường có thêm kinh nghiệm hơn khi vào tiếp xúc với các công ty và các dự án lớn
thực tế . Công Ty cũng đã nhận nhiều bạn sinh viên sau khi ra trường đã có hiểu biết

và một chút kinh nghiệm về phần mềm và các cơng nghệ lập trình , nhằm tạo thêm
động lực và cơ hội cho các bạn sinh viên sau khi ra trường.
Cùng với sự phát triển mạnh mẽ của CNTT Công Ty không ngừng đổi mới để đáp
ứng với thị trường ngày càng cao và vận dụng các kiến thức có được để ngày càng
phát triển đi lên .
1.4 Cơ Sở Hạ Tầng
- Với trang thiết bị hiện đại và đổi mới từng ngày Công Ty luôn cung cấp các thiết bị
máy móc làm việc hiện đại có cấu hình mạnh mẽ giúp nhân viên có một mơi trường
làm việc tốt nhất .Các trang thiết bị như máy in , màn hình , máy fax hỗ đáp ứng đầy
đủ nhu cầu làm việc của nhân viên . Ngoài ra Cơng Ty cịn hỗ trợ nâng cấp phần cứng
và hỗ trợ cài đặt phần phầm cho các nhân viên có nhu cầu nâng cấp máy tính giúp tăng
hiệu suất làm việc .
- Công Ty sử dụng các phần mềm mới nhất để giúp nhân viên trao đổi công việc và tạo
cho nhân viên một mỗi trường làm việc năng động như Mattermost , Jira
- Hỗ Trợ nhân viên làm việc remote và chấm công trên phần mềm , support tận tình
như làm việc offfline tại Cơng Ty để đảm bảo tình hình dịch bệnh COVID 19 .
1.5 Các Hoạt Động Chuyên Ngành Và Môi Trường Làm Việc
1.5.1 Các Hoạt Động Chuyên Ngành
 Phát triển ứng dụng trên điện thoại di động và website (Mobile Apps
Development)
Newwave Solutions đến hàng loạt các ứng dụng di động trong nhiều lĩnh vực
như bất động sản, y tế, spa và làm đẹp, thương mại điện tử...Các ngơn ngữ lập
trình phổ biến bao gồm:
- Android: React Native, Ionic, Flutter, Xamarin, Xcode ...
- IOS: Java, Python, Kotlin, C# ...
3

Đặng Thạch Sơn – DCCTKH63B

 Phát triền phần mềm (Software Development)
­

Newwave Solutions mang đến nhiều giải pháp thiết kế và sản xuất sản phẩm
phần mềm cho cá nhân và doanh nghiệp như phần mềm tích hợp, phần mềm
tùy chỉnh, phần mềm quản lý dữ liệu, ... Các phần mềm này được ứng dụng
đa dạng trong các ngành nghề và lĩnh vực khác nhau như: Bất động sản,
Chăm sóc sức khoẻ, Giáo dục, Thương mại điện tử ...

 Kiểm thử phần mềm (QA & Testing)
­

Newwave Solutions vị kiểm thử phần mềm được nhiều khách hàng lớn tin
tưởng và chọn lựa. Bằng việc sử dụng các cơng cụ phù hợp nhằm phân tích
và xác định các lỗi phát sinh trong quá trình vận hành phần mềm, chúng tôi
luôn đưa ra các phương án giải quyết vấn đề một cách kịp thời nhất cho
khách
hàng.
Newwave Solutions cam kết mang đến chất lượng dịch vụ tốt nhất với chi
phí hiệu quả. Đồng thời, ngăn ngừa tối đa các rủi ro liên quan đến bảo mật
và mang đến sự hài lịng cho khách hàng.

 Bảo trì phần mềm (Software Maintenance)
­

Bảo trì phần mềm là một trong số những điểm mạnh của Newwave
Solutions, cung cấp dịch vụ điều chỉnh các lỗi mà chưa được phát hiện trong
các giai đoạn trước của chu kỳ sống của một phần mềm, nâng cấp tính năng
sử dụng và an toàn vận hành của phần mềm. Nhờ đó, đảm bảo chất lượng và
kéo dài tuổi thọ sử dụng của phần mềm.

 UI & UX
­

Newwave Solutions cung cấp dịch vụ thiết kế giao diện và trải nghiệm
người dùng theo yêu cầu với tính thẩm mỹ cao và tạo sự thoải mái cho
người dùng. Công việc bắt đầu từ giai đoạn phân tích yêu cầu, nghiên cứu
thiết kế cho tới khi xây dựng sản phẩm và hoàn thiện sản phẩm.

 Nghiên cứu & phát triển sản phẩm (R&D).
­

Nghiên cứu và phát triển sản phẩm là một trong những mảng dịch vụ mà
không nhiều công ty CNTT tại Việt Nam có thể cung cấp. Tại Newwave
Solutions được trang bị đầy đủ nguồn lực và cơ sở vật chất để mang đến cho
khách hàng những công nghệ tiên tiến nhất như AI, Blockchain, IoT ...

 Phát triển sản phẩm Game (Game Development)
- Newwave Solutions có một đội ngũ giàu kinh nghiệm và đầy sáng tạo chuyên
cung cấp các giải pháp:
-

Thiết kế giao diện game

-

Lập trình game 2D hoặc 3D

-

Xây dựng nhân vật game

-

Phát triển hệ thống
4

Đặng Thạch Sơn – DCCTKH63B


-

Bảo trì game

Các sản phẩm phố biến mà chúng tơi phát triển bao gồm Mobile Games,
Web Games (HTML5), AI Games
Tầm nhìn: Cung cấp những giải pháp tích hợp hệ thống cơng nghệ thơng tin để tối ưu
hố quy trình sản xuất, kinh doanh của các công ty, doanh nghiệp trên tồn thế
giới với chi phí hợp lý và hiệu quả cao.
1.5.2 Mơi Trường Làm Việc:
+ Chính Sách Phát Triển Nhân Lực
Nguồn nhân lực chất lượng cao là mục tiêu ưu tiên hàng đầu tại Newwave Solutions.
Do đó, chúng tơi ln khơng ngừng xây dựng và hồn thiện những chính sách để thu
hút, bồi dưỡng và đãi ngộ xứng đáng đối với nhân tài như:
- Thường xuyên tổ chức các khoá đào tạo nội bộ hoặc gửi nhân sự đi đào tạo tại các
cơ sở uy tín để nâng cao năng lực chun mơn.
- Có quy chế đảm bảo phúc lợi và quyền lợi cho nhân viên nhằm tăng sự gắn kết của
nhân viên với công ty, tạo điều kiện cho nhân viên tập trung làm việc và cống hiến
- Cơ chế lương thưởng rõ ràng, đảm bảo tính minh bạch và cơng bằng
- Định kì tổ chức các sự kiện chăm sóc đời sống vật chất lẫn tinh thần của nhân

viên vào các dịp lễ, Tết hoặc sự kiện quan trọng (sinh nhật công ty, teambuilding, du
lịch hè ...)
+ Cơ Hội Thăng Tiến
Đến với Newwave Solutions, ứng viên có cơ hội được:
- Làm việc trong môi trường trẻ, năng động, cơ hội thăng tiến rõ ràng
- Được tạo điều kiện tối đa để phát triển năng lực cá nhân, tập thể và năng suất làm
việc
- Review đánh giá công việc hàng năm và có cơ chế đãi ngộ, khen thưởng nhằm ghi
nhận kịp thời hiệu quả làm việc của nhân viên
+ Lương, thưởng, lợi nhuận
- Lương thưởng cạnh tranh, đầy đủ các chế độ theo Luật lao động hiện hành
- Thưởng lương tháng 13, thưởng kinh doanh, thưởng giới thiệu ứng viên, thưởng dự
án, thưởng theo năng lực cá nhân, signing bonus ...
- Các hoạt động tri ân, chăm lo đời sống tinh thần CBNV và người thân...
- Chăm sóc sức khỏe định kì hàng năm
- Tham gia đầy đủ bảo hiểm xã hội và gói bảo hiểm PTI
- Được cấp laptop, máy tính làm việc (nếu cần)
- Quà Tết, Quà sinh nhật công ty, Quà chào mừng nhân viên mới ...
5

Đặng Thạch Sơn – DCCTKH63B


1.5.3 Văn Hóa Con Người
- Newwave Solution coi con người là giá trị cốt lõi , mong muốn các thành viên được
thể hiện tốt nhất năng lực và giá trị của bản thân. Công ty xây dựng một môi trường
làm việc cởi mở với các chính sách minh bạch . Đặc biệt tại Newwave Solutions , các
thành viên sẽ được hưởng chế độ lương không giới hạn mức lương tùy thuộc vò năng
lực từng người . Đi kèm là những phúc lợi hấp dẫn bao gồm :
 Thử việc hưởng 100% lương

 Hưởng đầy đủ các chế độ bảo hiểm và được cơng ty hỗ trợ hồn tồn chi phí
gói bảo hiểm sức khỏa.
 Thưởng lễ tết, thưởng mềm , thưởng dự án…
 Các hoạt động vui chơi được công ty tổ chức thường xuyên : du lịch, nghỉ
dưỡng , party sự kiện…
-Công Ty xây dựng môi trường làm việc năng động anh chị leader hay comtor luôn hỗ
trợ nhiệt tình với các bạn nhân viên mới và hướng dẫn chu đáo các cơng việc của cơng
ty .

Hình 2: Hình Ảnh Sự Kiện Tại Công Ty

6

Đặng Thạch Sơn – DCCTKH63B


Hình 3 :Hình ảnh sự kiện tại cơng ty

Hình 4 : Hình ảnh Du Lịch Ngoại Khóa Của Cơng Ty
7

Đặng Thạch Sơn – DCCTKH63B


1.6 Tổ Chức Hành Chính Nhân Sự
1.6.1 Q Trình phát triển nhân sự
Newwave Solutions là một trong những công ty hàng đầu cung cấp các phần mềm
dạng dịch vụ. Được Thành Lập từ năm 2011 với 10 nhân viên sau hơn 10 năm nhân
lực lên đến hơn 500 người và đang ngày một phát triển.

Biểu Đồ Số Lượng Nhân Sự Qua Các Năm
600

550

500

467
400

400

350
300

300
240

260

200
100

100
0

10
2011

30

2012

120

50
2013

2014

2015

2016

2017

2018

2019

2020

2021

2022

Biểu Đồ 1 : Biểu Đồ Phát Triển Nhân Sự

1.6.2 Cơ Cấu Tổ Chức
8

Đặng Thạch Sơn – DCCTKH63B


Giám Đốc

Phó Tổng Giám Đốc

Phịng Kỹ Thuật

Bảo Trì

Hỗ Trợ Kỹ Thuật

Phịng Quản Lý Dự
Án

Phịng Nhân Sự

Phịng Kế Tốn

Nhận Dự Án
outsource

Quản Lý Nhân
sự

Kế Toán

Quản Lý và
Phân phối Dự

Án

Tuyển Dụng
Nhân Viên

Thủ Quỹ

Hỗ Trợ và Triển
Khai

Lưu Trữ Hồ Sơ
Thông Tin

Biểu Đồ 2: Sơ Đồ Cơ Cấu Tổ Chức

1.2 Vị Trí Thực Tập
Do niềm đam mê từ lâu cũng như xác định được năng lực bản thân ,trong
khi thực tập tại công ty ,em được làm việc tại vị trí một Front End Developer .

9

Đặng Thạch Sơn – DCCTKH63B


1.3 Đề Tài Thực Tập
-

Lập Trình Front End Developer , Lập Trình giao diện các dự án vừa vả nhỏ
của công ty và các dự án Outsource.

1.4 Lịch Làm Việc
Tuần

Tuần
1

Tuần
2

Tuần
3

Tuần
4

Mức Độ Hồn
Người
Thành
Ghi
Cơng Việc
Hướng Dẫn
( SV Tự Đánh Chú
Giá)
Tìm Hiểu :
Phạm Nguyễn -100%
- GitHub, GitLab : Tìm hiểu cài đặt Phương Linh
tool hỗ trợ đồng bộ hóa code với
các thành viên trong team
- Photoshop: Cài đặt công cụ hỗ trợ
chuyển đổi design của khách hàng

về trang web
- Figma : Sử dụng figma chuyển đổi
design của khách hàng về trang web
- Bootstrap : Thư viện hỗ trợ lập
trình frontend
- SCSS : Cài đặt extention SCSS ,
Thực hành viết SCSS thay cho CSS
Thực Hiện Dự Án Bullet Phạm Nguyễn -20%
( Website Giới Thiệu Sản Phẩm Phương Linh
Thương Mại Điện Tử )
+ Xây dựng template trang chủ
website Bullet
+ Reponsive website tích hợp đa
màn hình cho người sử dụng
- Thực Hiện Dự Án Bullet ( Website Phạm Nguyễn
Giới Thiệu Sản Phẩm Thương Mại Phương Linh
Điện Tử Thị Trường Nhật Bản )
+ Xây dựng template trang chủ
website Bullet
- 60%
- Tham Gia Phát Triển Dự Án
Website Của Công Ty ( Website
Tuyển Dụng Của Công Ty , Website
Giới Thiệu Công Ty … )
+ Xây dựng template các trang
about, service, đăng ký tuyển dụng ,
-20%
các page giới thiệu công ty
- Thực Hiện Dự Án Bullet ( Website Phạm Nguyễn
Giới Thiệu Sản Phẩm Thương Mại Phương Linh

Điện Tử Thị Trường Nhật Bản )
+ Xây dựng template trang chủ
website Bullet
-100%
10

Đặng Thạch Sơn – DCCTKH63B


Tuần
5

Tuần
6

Tuần
7

Tuần
8

- Tham Gia Phát Triển Dự Án
Website Của Công Ty ( Website
Tuyển Dụng Của Công Ty , Website
Giới Thiệu Công Ty … )
+ Xây dựng template các trang
about, service, đăng ký tuyển dụng,
các page giới thiệu công ty
- Tham Gia Phát Triển Dự Án
Website Của Công Ty ( Website

Tuyển Dụng Của Công Ty , Website
Giới Thiệu Công Ty … )
+ Xây dựng template các trang
about, service, đăng ký tuyển dụng,
các page giới thiệu công ty
- Tham Gia Phát Triển Dự Án
Website Của Công Ty ( Website
Tuyển Dụng Của Công Ty , Website
Giới Thiệu Công Ty … )
+ Xây dựng template các trang
about, service, đăng ký tuyển dụng,
các page giới thiệu công ty ( 80%)
- Tham Gia Phát Triển Dự Án
Website Của Công Ty ( Website
Tuyển Dụng Của Công Ty , Website
Giới Thiệu Công Ty … )
+ Xây dựng template các trang
about, service, đăng ký tuyển dụng,
các page giới thiệu công ty
+ Sử dụng github đồng bộ hóa code
cùng các thành viên trong team.
- Tham Gia Phát Triển Dự Án
Website Tuyển Dụng Công Ty
Ihouzz Teach
+ Xây dựng page tin tức , page blog
website công ty Ihouzz Teach

-40%
Phạm Nguyễn
Phương Linh

-60%
Phạm Nguyễn
Phương Linh
-80%
Phạm Nguyễn
Phương Linh

-100%

-20%

- Tham Gia Phát Triển Dự Án Phạm Nguyễn
Website Tuyển Dụng Công Ty Phương Linh
Ihouzz Teach
+ Xây dựng page tin tức , page blog
-40%
website công ty Ihouzz Teach
( 40 %)

11

Đặng Thạch Sơn – DCCTKH63B


Tuần
9

Tuần
10

- Tham Gia Phát Triển Dự Án
Website Tuyển Dụng Công Ty
Ihouzz
Teach
+ Xây dựng page tin tức , page blog
website công ty Ihouzz Teach
( 80 %)
- Tham Gia Phát Triển Dự Án
Website RidgmontFarm
+ Xây dựng page trang chủ website
RidgmontFarm ( 50%)
- Tham Gia Phát Triển Dự Án
Website Tuyển Dụng Công Ty
Ihouzz
Teach
+ Xây dựng page tin tức , page blog
website công ty Ihouzz Teach
( 100 %)
- Tham Gia Phát Triển Dự Án
Website RidgmontFarm
+ Xây dựng page trang chủ website
RidgmontFarm ( 100%)
- Đồng bộ hóa và gửi code cho
leader

Phạm Nguyễn
Phương Linh,
Nguyễn
Quang Lân
-80%

-50%
Phạm Nguyễn
Phương Linh,
Nguyễn
Quang Lân
-100%

-100%

Biểu Đồ 3: Bảng Kế Hoạch Thực Tập
CHƯƠNG 2 NỘI DUNG THỰC TẬP
2.1 Mục Tiêu Thực Tập Doanh Nghiệp
- Thực tập là cơ hội để sinh viên có dịp quan sát, tiếp cận và tìm hiểu thực tế hoạt
động, sản xuất, kinh doanh, ứng dụng công nghệ thông tin của các Cơ quan, Doanh
nghiệp. Qua đó, sinh viên có thể tham gia vào các nhiệm vụ thực tế, các chương trình
huấn luyện của doanh nghiệp; vận dụng tổng hợp các kiến thức đã học vào công việc
thực tế nhằm giải quyết các vấn đề cụ thể. Sau kỳ thực tập, sinh viên có thể ứng tuyển
để trở thành nhân viên tập sự hoặc làm việc chính thức cho doanh nghiệp nếu phù hợp.
- Kỳ thực tập giúp sinh viên học hỏi, rèn luyện phong cách làm việc và ứng xử trong
các mối quan hệ cơng tác. Sinh viên có dịp học hỏi và trao dồi thêm các kỹ năng mềm
cần thiết cho mục tiêu nghề nghiệp tương lai sau khi tốt nghiệp ra trường.
2.2 Báo Cáo Nội Dung Thực Tập
- Tại đây em được đào tạo để trở thành một Front End Developer.Em được làm việc
với một số công nghệ như :
 HTML , CSS, JAVASCRIPT..
12

Đặng Thạch Sơn – DCCTKH63B

- Các FrameWork được sử dụng như :
 SCSS , Bootstrap , Jquery, ReactJS , Angular ..
-Các tool hỗ trợ làm việc như :
 Github , Gitlab , Visual Studio Code , phpstorm , Photoshop , figma , Jira ,
Mattermost , Slack …
2.3 Nội Dung Các Công Việc Đã Thực Hiện
2.3.1 Nội Dung Tuần 1:
Tìm Hiều Các Cơng Nghệ Và Công Cụ Hỗ Trợ Cho Công Việc
3.1.1 HTML
HTML là từ viết tắt của HyperText Markup Language, ý nghĩa là ngôn ngữ
đánh dấu siêu văn bản.
Ngôn ngữ đánh dấu siêu văn bản (html) chỉ rõ một trang Web sẽ được hiển thị như
thế nào trong một trình duyệt. Sử dụng các thẻ và các phần tử html, bạn có thể:
 Điều khiển hình thức và nội dung của trang
 Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử
dụng các liên kết được chèn vào tài liệu html
 Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các
giao dịch .....
 Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX, Flash
và các Java Applet vào tài liệu html
Tài liệu html tạo thành mã nguồn của trang Web. Khi được xem trên trình soạn thảo,
tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định trang web hiển thị
như thế nào. Trình duyệt đọc các file có đi .htm hay .html và hiển thị trang web đó
theo các lệnh có trong đó. HTML là kiến thức cơ bản mà bất cứ ai muốn học lập trình
web hoặc học thiết kế web đều phải biết. Tất cả các trang web dù xử lý phức tạp đến
đâu đều phải trả về dưới dạng mã nguồn HTML để trình duyệt có thể hiểu và hiển thị
lên được

Cấu trúc của một tài liệu html

Một tài liệu html gồm 3 phần cơ bản:
Phần html: Mọi tài liệu html phải bắt đầu bằng thẻ mở html <html> và kết thúc bằng
thẻ đóng html </html>
<html> …. </html>
Thẻ html báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu html
13

Đặng Thạch Sơn – DCCTKH63B


Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>. Phần
này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web. Tiêu đề nằm
trong thẻ title, bắt đầu bằng thẻ <title> và kết thúc là thẻ </title>.
Tiêu đề là phần khá quan trọng. Khi người dùng tìm kiếm thơng tin, tiêu đề của trang
Web cung cấp từ khóa chính yếu cho việc tìm kiếm.
Phần thân: phần này nằm sau phần tiêu đề. Phầầ̀n thân bao gồm văn bản, hình ảnh và
các liên kết mà bạn muốn hiển thị trên trang web của mình. Phần thân bắt đầu bằng thẻ
<body> và kết thúc bằng thẻ </body>
Ví dụ:
1
2
3
4
5
6
7
8

<html>
<head>

<title>Welcome to the world of html</title>
</head>
<body>
<P>This is going to be real fun</P>
</body>
</html>

3.1.2 CSS
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ được sử dụng
để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như
HTML). Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trị định dạng các phần tử
trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp
chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu
sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều.
Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể
là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng
các thuộc tính cần thay đổi lên vùng chọn đó.
Cấu trúc một đoạn CSS
Một đoạn CSS bao gồm 4 phần như thế này:
01
02
03
04
05

vùng chọn {
thuộc tính : giá trị;
thuộc tính: giá trị;
.....
}

Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ nằm
bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ ln có một giá trị riêng, giá trị có
14

Đặng Thạch Sơn – DCCTKH63B


thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS. Phần giá trị và
thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dịng khai báo thuộc
tính sẽ ln có dấu chấm phẩy ở cuối. Một vùng chọn có thể sử dụng khơng giới hạn
thuộc tính.
3.1.3 JavaScript
JavaScript là một ngơn ngữ lập trình đa nền tảng (cross-platform), ngơn ngữ lập trình
kịch bản, hướng đối tượng. JavaScript là một ngôn ngữ nhỏ và nhẹ (small and
lightweight). Khi nằm bên trong một môi trường (host environment), JavaScript có thể
kết nối tới các Object của mơi trường đó và cung cấp các cách quản lý chúng (Object).
JavaScript chứa các thư viện tiêu chuẩn cho các Object, ví dụ như: Array, Date,
và Math, và các yếu tố cốt lõi của ngơn ngữ lập trình như: toán tử (operators), cấu trúc
điều khiển (control structures), và câu lệnh. JavaScript có thể được mở rộng cho nhiều
mục đích bằng việc bổ sung thêm các Object; ví dụ:
Client-side JavaScript - JavaScript phía máy khách, JavaScript được mở rộng bằng
cách cung cấp các Object để quản lý trình duyệt và Document Object Model (DOM)
của nó. Ví dụ, phần mở rộng phía máy khách cho phép một ứng dụng tác động tới các
yếu tố trên một trang HTML và phản hồi giống các tác động của người dùng như click
chuột, nhập form, và chuyển trang.
Server-side JavaScript - JavaScript phía Server, JavaScript được mở rộng bằng cách
cung cấp thêm các đối tượng cần thiết để để chạy JavaScript trên máy chủ. Ví dụ, phần
mở rộng phía server này cho phép ứng dụng kết nối với cơ sở dữ liệu (database), cung
cấp thông tin một cách liên tục từ một yêu cầu tới phần khác của ứng dụng, hoặc thực

hiện thao tác với các tập tin trên máy chủ.
Một số thư viên,framework JavaScript nổi tiếng hiện nay :
 AngularJS: Một thư viện dùng để xây dựng ứng dụng Single Page
 NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng
realtime
 Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile
 ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications)
 jQuery: Một thư viện rất mạnh về hiểu ứng

3.1.4 SCSS
SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor). Nó
giúp bạn viết CSS theo cách của một ngơn ngữ lập trình, có cấu trúc rõ
ràng, rành mạch, dễ phát triển và bảo trì code hơn. Ngồi ra nó có rất nhiều
15

Đặng Thạch Sơn – DCCTKH63B


các thư viện hỗ trợ kèm theo giúp bạn viết code CSS một cách dễ dàng vào
đơn giản hơn. Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS,
Stylus hay LESS.
SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau ở
cách viết
Sass là chữ viết tắt của Syntactically Awesome Style Sheets, chương
trình tiền xử lý bằng ngôn ngữ kịch bản (Preprocessor Scripting Language ),
sẽ được biên dịch thành CSS. Nghĩa là, mình sẽ làm style bằng SASS, rồi
SASS sẽ render việc mình làm thành file CSS.
SASS bản thân có hai kiểu viết khác nhau, một kiểu như là HAML,
Pug – Sử dụng indent (cách thụt đầu dòng) để phân tách các khối code , sử
dụng xuống dịng để phân biệt rules , có phần mở rộng là .sass.

+ Các tính năng cơ bản của SCSS
Xếp chồng – Nested Rules







Biến – variable
Quy tắc Mixin
Kế thừa – Extends
Import
Vịng lặp
Như những gì mình vừa trình bày ở phía trên, các bạn cũng đã có thể thấy
những sức mạnh mà SASS/SCSS mang lại trong việc viết CSS, nó biến việc
làm việc với SCSS như làm việc với một ngôn ngữ lập trình thực sự. Ngồi ra,
với việc phải biên dịch từ SCSS ra CSS cũng cho phép chúng ta có thể sử dụng
1 số các tính năng như: tự động thêm prefix vào các thuộc tính CSS3, định
dạng lại các tệp tin CSS (nén hoặc ko nén).

3.1.5 Framework Bootstrap
Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ dàng
thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các thiết bị cầm
tay như mobile, ipad, tablet,...
Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons, tables,
navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm nhiều
Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ dàng, thuận tiện
và nhanh chóng hơn.
Lịch sử ra đời của Bootstrap

Bootstrap được Mark Otto và Jacob Thornton cùng nhau phát triển lên tại Twitter.
Ban đầu, Bootstrap được sử dụng như một Framework với mục đích duy nhất là hỗ trợ
cho công việc nội bộ của Twitter. Trước khi Bootstrap được phát triển, có rất nhiều
Framework khác nhau được đưa vào sử dụng với mục đích phát triển giao diện, nhưng
16

Đặng Thạch Sơn – DCCTKH63B


nó dễ dẫn đến mâu thuẫn và sung đột. Chính vì thế, khi Bootstrap được tạo ra nó đã
giải quyết được những yếu tố này, cũng như góp phần thúc đẩy cơng việc của những
nhà phát triển và lập trình được nhanh hơn, tiện lợi và đồng bộ hơn.
Bắt đầu từ phiên bản 2.0 trở đi, Bootstrap cho thấy sự hỗ trợ Responsive Web Design
mạnh mẽ với những thiết kế và bố cục của website tự động điều chỉnh với mọi thiết bị
( Laptop, PC, SmartPhone,….). Ngồi ra, nó cịn có độ tương thích cao với mọi phiên
bản mới nhất của những trình duyệt nổi tiếng như Chrome, Firefox, IE, Opera…..

Tại sao chúng ta nên sử dụng Bootstrap?
Bootstrap là một trong những framework được sử dụng nhiều nhất trên thế giới để
xây dựng nên một website. Bootstrap đã xây dựng nên 1 chuẩn riêng và rất được người
dùng ưa chuộng. Chính vì thế, chúng ta hay nghe tới một cụm từ rất thông dụng "Thiết
kế theo chuẩn Bootstrap".
Từ cái "chuẩn mực" này, chúng ta có thể thấy rõ được những điểm thuận lợi khi sử
dụng Bootstrap.
Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript
chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt.
Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bị Iphones,
tablets, và desktops. Tính năng này khiến cho người dùng tiết kiệm được rất
nhiều thời gian trong việc tạo ra một website thân thiện với các thiết bị điện tử,
thiết bị cầm tay.

Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome,
Firefox, Internet Explorer, Safari, and Opera). Tuy nhiên, với IE browser,
Bootstrap chỉ hỗ trợ từ IE9 trở lên. Điều này vơ cùng dễ hiểu vì IE8 không
support HTML5 và CSS3.
3.1.6 Jquery
Với sự phát triển rất mau lẹ của Internet, người dùng ngày càng quan tâm hơn đến hình
thức của một trang web. Trước đây một trang web chỉ cần có banner, nội dung và ít
footer hời hợt là đã được cho là một trang web hồn chỉnh. Nhưng bây giờ trang web
đó phải có banner bắt mắt, nội dung hay và còn nhiều hiệu ứng lạ mắt khác nữa thì
mới có thể thu hút được người đọc.
Chính vì thế những web designer bắt đầu chú ý đến các thư viện JavaScript mở như
jQuery để tạo ra các hiệu ứng có thể tương tác trực tiếp với người đọc một cách nhanh
chóng và dễ dàng hơn rất nhiều là sử dụng thuần JavaScript.
17

Đặng Thạch Sơn – DCCTKH63B


Nhưng nếu bạn là người mới làm quen với jQuery bạn sẽ thấy khơng biết phải bắt
đầu từ đâu vì jQuery cũng giống như bất cứ thư viện nào khác cũng có rất nhiều
functions. Cho dù bạn có đọc phần tài liệu hướng dẫn sử dụng của jQuery thì bạn vẫn
thấy rất phức tạp và khó hiểu. Nhưng bạn yên tâm một điều là jQuery có cấu trúc rất
mạch lạc và theo hệ thống. Cách viết code của jQuery được vay mượn từ các nguồn
mà các web designer đa phần đã biết như HTML và CSS. Nếu từ trước đến nay bạn
chỉ là Designer chứ không phải coder, bạn cũng có thể dễ dàng học jQuery vì kiến thức
về CSS giúp bạn rất nhiều khi bắt đầu với jQuery.

JQuery có thể làm được những gì ?
Hướng tới các thành phần trong tài liệu HTML.
Nếu không sử dụng thư viện JavaScript này, bạn phải viết rất nhiều dịng code mới

có thể đạt được mục tiêu là di chuyển trong cấu trúc cây (hay còn gọi là DOM =
Document Object Model) của một tài liệu HTML và chọn ra các thành phần liên quan.
Jquery cho phép bạn chọn bất cứ thành phần nào của tài liệu để “vọc” một cách dễ
dàng như sử dụng CSS.
Thay đổi giao diện của một trang web.
CSS là công cụ rất mạnh để định dạng một trang web nhưng nó có một nhược điểm
là khơng phải tất cả các trình duyệt đều hiển thị giống nhau. Cho nên jQuery ra đời để
lấp chỗ trống này, vì vậy các bạn có thể sử dụng nó để giúp trang web có thể hiển thị
tốt trên hầu hết các trình duyệt. Hơn nữa jQuery cũng có thể thay đổi class hoặc những
định dạng CSS đã được áp dụng lên bất cứ thành phần nào của tài liệu HTML ngay cả
khi trang web đó đã được trình duyệt load thành cơng. Thay đổi nội dung của tài liệu.
Jquery không phải chỉ có thể thay đổi bề ngồi của trang web, nó cũng có thể thay đổi
nội dung của chính tài liệu đó chỉ với vài dịng code. Nó có thể thêm hoặc bớt nội dung
trên trang, hình ảnh có thể được thêm vào hoặc đổi sang hình khác, danh sách có thể
được sắp xếp lại hoặc thậm chí cả cấu trúc HTML của một trang web cũng có thể được
viết lại và mở rộng. Tất cả những điều này bạn hoàn tồn có thể làm được nhờ sự giúp
đỡ của API (Application Programming Interface = Giao diện lập trình ứng dụng).
Tương tác với người dùng.
Cho dù cơng cụ bạn dùng có mạnh mẽ đến mấy, nhưng nếu bạn khơng có quyền quyết
định khi nào nó được sử dụng thì cơng cụ đó cũng coi như bỏ. Với thư viện javaScript
như jQuery, nó cho bạn nhiều cách để tương tác với người dùng ví dụ như khi người
dùng nhấp chuột vào đường link thì sẽ có gì xảy ra. Nhưng cái hay của nó là khơng
làm cho code HTML của bạn rối tung lên chính là nhờ các Event Handlers. Hơn nữa
18

Đặng Thạch Sơn – DCCTKH63B


Event Handler API sẽ bảo đảm rằng trang web của bạn tương thích hầu hết với các
trình duyệt, điều này đã và đang làm đau đầu rất nhiều các web designer.

Tạo hiệu ứng động cho những thay đổi của tài liệu.
Để tương tác tốt với người dùng, các web designer phải cho người dùng thấy được
hiệu ứng gì sẽ xảy ra khi họ làm một tác vụ nào đó. Jquery cho phép bạn sử dụng rất
nhiều hiệu ứng động như mờ dần, chạy dọc chạy ngang v.v.. và nếu vẫn chưa đủ, nó
cịn cho phép bạn tự tạo ra các hiệu ứng của riêng mình.
Lấy thơng tin từ server mà khơng cần tải lại trang web.
Đây chính là cơng nghệ ngày càng trở nên phổ biến Asynchronous JavaScript And
XML (AJAX), nó giúp người thiết kế web tạo ra những trang web tương tác cực tốt và
nhiều tính năng. Thư viện jQuery loại bỏ sự phức tạp của trình duyệt trong q trình
này và cho phép người phát triển web có thể tập trung vào các tính năng đầu cuối. Đơn
giản hố các tác vụ javaScript. Ngồi những tính năng như đã nêu ở trên, jQuery còn
cho phép bạn viết code javaScript đơn giản hơn nhiều so với cách truyền thống như là
các vòng lặp và điều khiển mảng.

Tại sao jQuery làm việc tốt ?
Người dùng ngày càng quan tâm hơn đến Dynamic HTML, đó cũng là nền móng
cho sự ra đời của những javaScript Frameworks. Có frameworks thì chỉ tập trung vào
một vài tính năng vừa nêu ở trên, có cái thì ráng bao gồm tất cả những hiệu ứng, tập
tính và nhồi nhét vào một package. Để đảm bảo là một thư viện “nhanh gọn nhẹ”
nhưng vẫn “ngon bổ rẻ” với các tính năng đã nêu ở trên, jQuery sử dụng những chiến
lược sau:
Tận dụng kiến thức về CSS.
Các jQuery Selector hoạt động y chang như CSS Selector với cùng cấu trúc và cú
pháp. Chính vì thế thư viện jQuery là cửa ngõ cho các web designer muốn thêm nhiều
tính năng hơn nữa cho trang web của mình. Bởi vì điều kiện tiên quyết để trở thành
một web designer chuyên nghiệp là khả năng sử dụng CSS thuần thục. Với kiến thức
có sẵn về CSS, bạn sẽ có sự khởi đầu thuận lợi với jQuery.
Hỗ trợ Plugin.
19

Đặng Thạch Sơn – DCCTKH63B


Để tránh bị rơi vào trạng thái quá tải tính năng, jQuery cho phép người dùng tạo và
sử dụng Plugin nếu cần. Cách tạo một plugin mới cũng khá đơn giản và được hướng
dẫn cụ thể, chính vì thế cộng đồng sử dụng jQuery đã tạo ra một loạt những plugin đầy
tính sáng tạo và hữu dụng.
Xố nhồ sự khác biệt giữa trình duyệt.
Một thức tế tồn tại là mỗi một hệ thống trình duyệt lại có một kiểu riêng để đọc trang
web. Dẫn đến một điều làm đau đầu các web designer là làm thế nào để cho trang web
có thể hiển thị tốt trên mọi trình duyệt. Cho nên đôi khi người ta phải làm hẳn một
phần code phức tạp để đảm bảo rằng trang web của họ được hiển thị gần như tương
đồng ở các trình duyệt phổ biến. Jquery giúp bạn thêm một lớp bảo vệ cho sự khác biệt
của trình duyệt và giúp quá trình này diễn ra dễ dàng hơn rất nhiều.
Luôn làm việc với Set.
Ví dụ khi chúng ta u cầu jQuery tìm tất cả các thành phần có class là delete và ẩn
chúng đi. Chúng ta không cần phải loop qua từng thành phần được trả về. Thay vào
đó, những phương pháp như là hide() được thiết kế ra để làm việc với set thay vì từng
thành phần đơn lẻ. Kỹ thuật này được gọi là vịng lặp ẩn, điều đó có nghĩa là chúng ta
không phải tự viết code để loop nữa mà nó vẫn được thực thi, chính vì thế code của
chúng ta sẽ ngăn hơn rất nhiều.
Cho phép nhiều tác vụ diễn ra trên cùng một dòng.
Để tránh phải sử dụng những biến tạm hoặc các tác vụ lặp tốn thời gian, jQuery cho
phép bạn sử dụng kiểu lập trình được gọi là Chaining cho hầu hết các method của nó.
Điều đó có nghĩa là kết quả của các tác vụ được tiến hành trên một thành phần chính là
thành phần đó, nó sẵn sàng cho tác vụ tiếp theo được áp dụng lên nó. Những chiến
lược được nêu ở trên giúp kích thước của jQuery rất nhỏ bé chỉ khoảng trên dưới 20Kb
dạng nén. Nhưng vẫn đảm bảo cung cấp cho chúng ta những kỹ thuật để giúp code
trên trang nhỏ gọn và mạch lạc. Jquery sở dĩ trở nên phổ biến là do cách sử dụng đơn

giản và bên cạnh đó cịn có một cộng đồng sử dụng mạnh mẽ vẫn ngày ngày phát triển
thêm Plugin và hồn thiện những tính năng trọng tâm của jQuery. Cho dù thực tế là
vậy, nhưng jQuery lại là thư viện javaScript hồn tồn miễn phí cho mọi người sử
dụng. Tất nhiên nó được bảo vệ bởi luật GNU Public License và MIT License, nhưng
bạn cứ yên tâm là bạn có thể sử dụng nó trong hầu hết các trường hợp kể cả thương
mại lẫn cá nhân.

20

Đặng Thạch Sơn – DCCTKH63B


3.1.7 ReactJS
ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm
2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các
tương tác với các thành phần trên website. Một trong những điểm nổi bật
nhất của ReactJS đó là việc render dữ liệu khơng chỉ thực hiện được trên
tầng Server mà cịn ở dưới Client nữa.
Tại sao các JavaScript developer lại sử dụng ReactJS?
ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây
dựng giao diện người dùng hay UI. Trong lập trình ứng dụng front-end, lập
trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý
tương tác của người dùng. UI là tập hợp những thành phần mà bạn nhìn
thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể đến bao gồm:
menu, thanh tìm kiếm, những nút nhấn, card,… Giả sử bạn đang lập trình
một website thương mại điện tử, sau khi người dùng chọn được sản phẩm
ưng ý rồi và nhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn
phải làm đó là thêm sản phẩm được chọn vào giỏ hàng và hiển thị lại sản
phẩm đó khi user vào xem => xử lý tương tác.

Trước khi có ReactJS, lập trình viên thường gặp rất nhiều khó khăn
trong việc sử dụng “vanilla JavaScript”(JavaScript thuần) và JQuery để xây
dựng UI. Điều đó đồng nghĩa với việc quá trình phát triển ứng dụng sẽ lâu
hơn và xuất hiện nhiều bug, rủi ro hơn. Vì vậy vào năm 2011, Jordan Walke
– một nhân viên của Facebook đã khởi tạo ReactJS với mục đích chính là
cải thiện q trình phát triển UI.

Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có
thể xảy ra trong khi coding, React còn cung cấp cho chúng ta khả năng
Reusable Code (tái sử dụng code) bằng cách đưa ra 2 khái niệm quan trọng
bao gồm:

JSX.
Virtual DOM.
Để hiểu rõ hơn về ReactJS và tại sao bạn nên sử dụng nó, chúng ta cùng
nhau tìm hiểu 2 khái niệm trên để xem chúng thực sự làm việc như thế nào.
21

Đặng Thạch Sơn – DCCTKH63B