BÁO CÁO THỰC TẬP LẬP TRÌNH FRONTEND HTML CSS VÀ REACTJS

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

LẬP TRÌNH FRONTEND
HTML CSS VÀ REACTJS

Cơng ty thực tập:

New Ocean

Người phụ trách:

Đào Minh Sáng

Thực tập sinh:

Huỳnh Ngọc Pháp

1


TP. Hồ Chí Minh, tháng 5 năm 2022

LỜI MỞ ĐẦU
Ngày này chúng ta đang được sống trong kỷ nguyên của tin học nhờ sự vượt bậc,
sự bùng nổ mạnh mẽ của công nghệ thông tin. Công nghệ thông tin không chỉ dừng lại ở
mục đích phục vụ cho khoa học kỹ thuật mà đi sâu vào đời sống, chính trị, kinh tế, xã
hội, trở nên thân thiện , gần gũi, mang lại nhiều lợi ích cho con người. Cơng nghệ thơng
tin ngày càng khẳng định được tính hữu dụng và sức mạnh trong mọi phương diện, mọi

ngành nghề của cuộc sống, nhất là trong thời đại kinh tế thị trường như bây giờ.
Đi kèm theo đó, các hệ thống website cũng phát triển không ngừng với đủ các lĩnh
vực: văn hóa, thời sự, khoa học cơng nghệ, làm đẹp, nấu ăn, thể thao, … Tuy nhiên để tạo
một trang web có sức sống bền lâu thì bản thân nó phải mang lại lợi ích cho nhiều người.
Giao diện bắt mắt là yếu tố quan trọng để giữ chân người xem lại trang web của mình. Và
Reactjs là frontend framework giúp chúng ta thiết kế web một cách dễ dàng và chuyên
nghiệp hơn.

2


LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty New Ocean Automation System đã tạo điều
kiện cho em có cơ hội được thực tập tại công ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer,
em đã tiếp thu được những kiến thức, học hỏi nhiều kĩ năng quan trọng để có thể tự xây
dựng trang được giao diện cho trang web công ty bằng html css và reactjs. Chân thành
cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiều thời gian,cơng sức để hướng dẫn
em hồn thành đợt thực tập này.
Đặc biệt cảm ơn anh Sáng đã training front-end, hướng dẫn, giúp đỡ cho em tận
tình cả những khó khăn trong công việc, và những vấn đề gặp phải khi làm thực tế.
Cũng xin cảm ơn thầy cô trong khoa Cơng nghệ phần mềm đã nhiệt tình hỗ trợ,
tạo điều kiện em làm bài báo cáo này.
Huỳnh Ngọc Pháp
Thành phố HCM, 5/2022

3


NHẬN XÉT CỦA KHOA

………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
…………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….

………………………………………………………………………………………………………………
4


……………………………..……………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
…………………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….
………………………………………………………………………………………………………………
…………………………………………………………….
………………………………………………………………………………………………………………
………………………………………………….……………………………

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP.....................................................6
1.Giới thiệu công ty New Ocean Automation System.................................................6
2.Sản phẩm- giải pháp của cơng ty..............................................................................6
CHƯƠNG 2: NỘI DUNG THỰC TẬP...........................................................................8
1. Tìm hiểu cơng ty và các kỹ năng cơ bản..................................................................8
2. Nghiên cứu kỹ thuật..................................................................................................8
- Cơng cụ làm việc.....................................................................................................8
-Tìm hiểu về Html Css , JavaScript, Bootstrap5.....................................................8
-Tìm hiểu về Reactjs..................................................................................................9
-Nghiệp vụ cơng ty...................................................................................................10
3. Lịch làm việc...........................................................................................................10

5


CHƯƠNG 3: XÂY DỰNG WEBSITE..........................................................................12
1. Project HTML CSS.................................................................................................12
2. Project Reactjs........................................................................................................13
CHƯƠNG 4 :TÀI LIỆU THAM KHẢO......................................................................16

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP

1.Giới thiệu công ty New Ocean Automation System
Công ty được thành lập vào năm 2002 và đã có những phát triển không ngừng. Năm
2002 New Ocean CDC được thành lập, năm 2004 đổi tên thành New Ocean ICDC, năm
2010 New Ocean IS(Information System) được thành lập, năm 2011 New Ocean AS
(Automation System) được thành lập, năm 2022 New Ocean Group được thành lập .Công
ty được thành lập bởi anh Trần Đăng Ninh.
Với gần 20 năm kinh nghiệm Công ty TNHH Hệ thống Tự động Đại Dương Mới (New
Ocean Automation System) đã và đang là một trong những nhà cung cấp giải pháp tự
động hóa hàng đầu cho các nhà máy, đơn vị chế tạo máy và nhà thầu phụ tại Việt Nam
cùng khu vực Đông Nam Á.
Các giải pháp tư vấn - lắp đặt mà công ty cung cấp hướng đến việc giải quyết các vấn đề
phát sinh, tối ưu hóa quy trình sản xuất, quản lí kho hàng hiệu quả, sử dụng các nguồn
lực hợp lí và nâng cao chất lượng thành phẩm. Từ đó, các nhà máy, đơn vị chế tạo máy và
nhà thầu phụ có thể từng bước nâng cao năng suất, đồng thời phát triển mục tiêu kinh
doanh dài hạn!.
Tầm nhìn: Trở thành sự lựa chọn hàng đầu cho các khách hàng, đối tác và kĩ sư trong thị
trường ứng dụng tự động hóa và công nghệ thông tin sản xuất.
6

Sứ mệnh: Công ty chọn lựa sản phẩm tốt nhất từ các nhà sản xuất hàng đầu trên toàn thế
giới để cung cấp cho khách hàng các giải pháp với hiệu suất cao nhất. Công ty tuyển
dụng những cá nhân xuất sắc và cung cấp môi trường làm việc tốt nhất, đào tạo phát triển
thành các nhân viên chuyên nghiệp, nhằm cung cấp các giải pháp với độ tin cậy cao, cùng
dịch vụ khách hàng chu đáo và trách nhiệm.
Giá trị cốt lỗi: Tôn trọng & Khiêm tốn, Trung thành & Trung thực, Thấu hiểu & Tin cậy,
Đổi mới & Sáng tạo.
2.Sản phẩm- giải pháp của công ty
-Ngành dược phẩm:
+ Hệ thống OCR & OCV ( OCR&OCV System ), Hệ thống quản lý sản xuất (MES), hệ
thống truy suất nguồn gốc (Track & trace system),hệ thống xử lý nước thải (Water
treatmet).
-Ngành Điện tử:
+ Hệ thống kiểm tra và đọc mã vạch trên linh kiện điện tử (Barcode Reader & Barcode
Verifier), hệ thống kiểm tra kích thước đúng sai của sản phẩm gia công, hệ thống robot
hàn, hệ thống điều khiển tốc độ sản xuất (Motion Control).
-Ngành hàng tiêu dung:
+ Hệ thống in &dán nhãn thùng (Print and Apply label), hệ thống làm sạch CIP(Cleaning
In Place), hệ thống phối trộn (Batch control system),hệ thống quản lý sản xuất MES
(Manufacturing Execution System), hệ thống robot gắp thả (Pick & Place robotic)…
-Ngành hóa chất:
+Hệ thống quản lý năng lượng (Energy Management System)…
-Ngành dịch vụ hậu cần:
+Hệ thống an toàn (Safety system), hệ thống kiểm tra khối lượng hàng hóa
( Preweight) ,hệ thống quản lý kho (Warehouse Management), hệ thống quản lý bằng mã
vạch (Barcode Server), hệ thống xe tự hành (AGV-Automated guided vehicle)…
-Ngành thực phẩm và đồ uống :
+ Hệ thống kiểm tra nhãn dán (Label inspection),hệ thống kiểm tra nắp chai (Cap
inspection)….

7


CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Lập trình Web với Bootrap 5 và ReactJs” nhằm mục đích giúp
sinh viên thực tập học tập, làm quen với các công nghệ để làm web application, đồng thời
rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp. Tại cơng ty,
sinh viên có cơ hội được học tập cơng nghệ như ReactJs. Ngồi ra, thực tập sinh được
trực tiếp hướng dẫn bởi các anh giàu kinh nghiệm. Bên cạnh đó, sinh viên được khám
phá và làm việc trong một môi trường phát triển phần mềm chun nghiệp, tích lũy
những kiến thức giá trị
1. Tìm hiểu công ty và các kỹ năng cơ bản
Thời gian : 1 ngày
Nội dung : Giới thiệu về công ty, cách tổ chức của công ty
Được nghe người phụ trách giới thiệu về cơng ty, q trình thành lập và phát triên, quy
trình làm việc từ cao xuống thấp, cách thức tổ chức của cơng ty .
Ngồi ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời
gian đi làm, các quy định cần phải tuân thủ, cách sử dụng outlook ,Microsoft teams ,
azure devops để làm việc.
Kết quả : Hiểu thêm về công ty, q trình thành lập và phát triển. Có thêm các kỹ năng về
việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn
2. Nghiên cứu kỹ thuật
- Công cụ làm việc
Thời gian : 3 ngày
Nội dung : Tìm hiểu và cài đặt các cơng cụ cần thiết cho q trình làm việc.
Trong thời gian này, cài đặt các công cụ phục vụ cho công việc như : Visual studio code,
git, Microsoft Team …
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Lập trình sử dụng các cơng cụ miễn phí, giúp dễ dàng kết hợp các cơng cụ với
nhau.

-Tìm hiểu về Html Css , JavaScript, Bootstrap5
Thời gian : 4 tuần
Nội dung : Được hướng dẫn về các kĩ thuật html css javascript cơ bản và nâng cao,
những kiến thức quan trọng cho việc chia layout responsive cho trang web.

8


Html : cấu trúc và các thành phần trong trang web và ứng dụng, phân chia các đoạn văn,
heading, links,…
Css : Tạo phong cách và kiểu cho trang web nhu tạo bố cục các layout, color, khoảng
cách, reponsive,…
Tìm hiểu về JS/Jquery
Tìm hiểu bootstrap 5.
Tìm hiểu về firebase
Tìm hiểu khái niệm và cách tạo tài khoản firebase
Tìm hiểu các tính năng chính của firebase
Tìm hiểu cách deloy ứng dụng lên firebase
…
Thực hiện :
Tham gia đầy đủ các buổi làm và training của công ty.
Làm các bài thực hành ở mỗi kiến thức đã học.
Ứng dụng làm demo.
Kết quả :
Nâng cao kỹ năng lập trình web.
Hệ thống lại được những kiến thức đã được học trước đó.
Biết thêm một số quy tắc trong việc viết code, làm thế nào để code clean hơn.
Đã tự tạo cho mình được ứng dụng demo viết bằng html css bootstrap 5.
-Tìm hiểu về Reactjs
Thời gian : 4 tuần

Nội dung : Tìm hiểu về ReactJs
- Tìm hiểu JSX
- Tìm hiểu props và state
- Tìm hiểu React routing
- Tìm hiểu React Hooks
- Tìm hiểu Reactstrap
9


- Tìm hiểu react-c3js
Thực hiện :
Tham gia đầy đủ các buổi làm và training của công ty.
Làm các bài thực hành ở mỗi kiến thức đã học.
Ứng dụng làm demo.
Kết quả :
Hiểu và nắm được những kiến thức cơ bản về những thành phần cần có để xây dựng
website .
Xây dựng được ứng dụng demo.
-Nghiệp vụ công ty
Thời gian : 1 ngày
Nội dung : Tìm hiểu quản lý dự án với Azure devOps, thao tác với git
Kết quả :
Hiểu rõ quy trình làm việc cơng ty.
Nắm được cách quản lý và deloy code với firebase.
Thực hiện Project
Sau hơn 4 tuần được training và thực hành thì đã nắm được kiên thức cơ bản và một số
kiến thức cần thiết. Để chuẩn bị bước vào xây dựng ứng dụng thực tế là website landingpage và website- reactjs
3. Lịch làm việc
Tuần Công việc

1

Tìm hiểu về cơng ty, cách tổ
chức của cơng ty.
Làm quen với các công cụ làm
việc trong công ty.

Người
hướng dẫn

Nhận xét của
Mức độ hồn
người hướng
thành
dẫn

Anh Sáng

100%

Nắm rõ quy
định của cơng
ty

Làm quen với Azure devOps,
setup môi trường để làm việc
10


với dự án

Quy trình làm việc.
Tìm hiểu về html,
css,javascript,bootstrap5

Anh Sáng

100%

Hồn thành
project

Anh Sáng

70%

Chưa hoàn
thiện sản phẩm

2-3-4
Áp dụng kiến thức vừa học để
xây dựng website landing-page
Tìm hiểu Reactjs
- Tìm hiểu JSX
- Tìm hiểu props và state
- Tìm hiểu React routing
5-67-8

- Tìm hiểu React Hooks
-tìm hiểu Reactstrap
- tìm hiểu react-c3js

- xây dựng website sử dụng
reactjs

11


CHƯƠNG 3: XÂY DỰNG WEBSITE
1. Project HTML CSS
Project landing-page-mobile
Để nâng cao tư duy và kĩ năng về html, css, javascript bootstrap 5 bắt đầu dự án thực hiện
thiết kế website landing page chỉ sử dụng html css bootstrap 5.
Một số hình ảnh của project:
Desktop:

Tablet:

Mobile:

12


Deploy project lên firebase:
Tên miền: landing-mobile.web.app
2. Project Reactjs
Project Website -Reactjs:
Để nâng cao tư duy và kĩ năng về Reactjs , reactstrap bắt đầu dự án thực hiện thiết kế
website chỉ sử dụng Reactjs .
Một số hình ảnh của project:
Trang đăng nhập và đăng ký

13


Trang Dashboard:

14


Sản phẩm chỉ hoàn thành được 70%.

15


CHƯƠNG 4 :TÀI LIỆU THAM KHẢO
Html css javascript: W3Schools Online Web Tutorials
Bootstrap 5: Introduction · Bootstrap v5.0 (getbootstrap.com)
ReactJs: Introducing JSX – React (reactjs.org)

16