báo cáo thực tập doanh nghiệp thiết kế giao diện website hỗ trợ giáo dục

Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tinCHƯƠNG 1GIỚI THIỆU CHUNG ĐƠN VỊ THỰC TẬP1.1 Thông tin đơn vị thực tập1.1.1 Thông tin sơ lược của đơn vịCÔNG TY TNHH THƯƠNG MẠI VÀ X

Trang 1

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC MỎ - ĐỊA CHẤT

NGUYỄN DƯƠNG HÙNG1921050286

BÁO CÁO THỰC TẬP DOANH NGHIỆP

NGÀNH CÔNG NGHỆ THÔNG TINCHUYÊN NGÀNH TIN HỌC KINH TẾ

THIẾT KẾ GIAO DIỆN WEBSITE HỖ TRỢ GIÁO

DỤC

HÀ NỘI 10/2023

Trang 2

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC MỎ - ĐỊA CHẤT

BÁO CÁO THỰC TẬP DOANH NGHIỆP

NGÀNH CÔNG NGHỆ THÔNG TIN

CHUYÊN NGÀNH TIN HỌC KINH TẾ

THIẾT KẾ GIAO DIỆN WEBSITE HỖ TRỢ GIÁO DỤC

Sinh viên thực tập : Nguyễn Dương Hùng

Mã sinh viên : 1921050286

Công ty thực tập : TNHH TM&XNK Khánh Ngọc Người phụ trách : Nguyễn Quế Anh

Giảng viên hướng dẫn: Phạm Thị Nguyệt

HÀ NỘI 10/2023

Trang 3

Báo cáo thực tập doanh nghiệp ngành Công nghệ thông tin

LỜI CẢM ƠN

Trước tiên, em muốn bày tỏ lòng biết ơn sâu sắc đến các Thầy Cô tận tâm củatrường Mỏ - Địa chất, vì đã chia sẻ với em những tri thức quý báu Đặc biệt, em rấtghi nhớ sự hướng dẫn và góp ý đắn đo của Cô Phạm Thị Nguyệt, giúp em hoànthiện bài báo cáo thực tập này

Ngoài ra, em cũng muốn bày tỏ lòng biết ơn đến Ban giám đốc và toàn thể cán

bộ công nhân viên của công ty, vì đã hỗ trợ và tạo điều kiện thuận lợi giúp em hoànthành tốt bài báo cáo này

Thời gian học tập tại trường cùng với kinh nghiệm thực tế tại công ty đã giúp

em tích luỹ kiến thức và học hỏi những bài học quý giá, từ đó, em có thêm sự vữngvàng trong lĩnh vực chuyên môn của mình cho những thử thách sắp tới

Cuối cùng, em xin kính chúc Cô sức khỏe dồi dào và tiếp tục đạt được nhiềuthành tựu mới trong sự nghiệp Cũng như chúc công ty ngày càng phát triển mạnh

mẽ hơn trong lĩnh vực kinh doanh

Trang 4

MỤC LỤC

LỜI CẢM ƠN 3

MỤC LỤC 4

DANH MỤC HÌNH VẼ 6

DANH MỤC BẢNG BIỂU 7

MỞ ĐẦU 8

CHƯƠNG 1 9

GIỚI THIỆU CHUNG ĐƠN VỊ THỰC TẬP 9

1.1 Thông tin đơn vị thực tập 9

1.1.1 Thông tin sơ lược của đơn vị 9

1.1.2 Tổ chức và các lĩnh vực hoạt động của đơn vị 10

1.1.3 Tổ chức quản lý sử dụng các nguồn lực của đơn vị 10

1.1.4 Cơ cấu tổ chức 12

1.1.5 Tình hình hoạt động kinh doanh của doanh nghiệp trong 3 năm 2020-2022 12

1.2 Thông tin vị trí sinh viên tham gia thực tập 13

1.2.1 Giới thiệu về vị trí thực tập 13

1.2.2 Các yếu tố, đặc điểm và yêu cầu cần thiết 13

1.3 Đề tài thực tập 15

1.4 Lịch làm việc 15

CHƯƠNG 2 18

BÁO CÁO NỘI DUNG THỰC TẬP 18

2.1 Tóm tắt công việc theo tiến độ (tuần) : 18

2.1.1 Tìm hiểu lập trình web, ngôn ngữ lập trình 18

2.1.2 Thiết lập môi trường làm việc 23

2.1.3 Công cụ quản lý dự án 27

2.1.4 Công cụ, kỹ thuật thiết kế giao diện 30

2.1.5 Thiết kế giao diện web 31

2.1.6 Nghiên cứu hệ thống CRM 34

Trang 5

2.1.7 Tiếp tục công việc, thu thập thông tin và hoàn thiện báo cáo 42

CHƯƠNG 3 43

NHẬN XÉT, ĐÁNH GIÁ QUÁ TRÌNH THỰC TẬP 43

3.1 Nhận xét, đánh giá thực trạng quá trình thực tập 43

3.2 Các kiến nghị 43

KẾT LUẬN 45

TÀI LIỆU THAM KHẢO 46

Trang 6

DANH MỤC HÌNH

Hình 1.1: Cơ cấu lao động theo trình độ chuyên môn 10

Hình 1.2: Sơ đồ tổ chức của công ty 12

Hình 2.1: Vs code và cài đặt 19

Hình 2.2: Cách PHP hoạt động 25

Hình 2.3: Dashboard Github 28

Hình 2.4: Redmine 29

Hình 2.5: Giao diện web giáo dục trẻ em 1 32

Hình 2.6: Giao diện web giáo dục trẻ em 2 32

Hình 2.7: Giao diện dashboard web giáo dục trẻ em 34

Hình 2.8: Hiệu quả của CRM vào doanh nghiệp 36

Hình 2.9: Giao diện login SuiteCRM 38

Hình 2.7: Giao diện dashboard web giáo dục trẻ em 34

Trang 7

DANH MỤC BẢNG BIỂU

Bảng 1.1: Cơ cấu lao động theo trình độ chuyên môn 10Bảng 1.2: Kết quả hoạt động kinh doanh trong 3 năm(2020-2022) 12

Trang 8

MỞ ĐẦU

Trong thời đại công nghiệp 4.0 ngày nay, sự hiện diện trực tuyến của doanh nghiệp

và khả năng quản lý mối quan hệ với khách hàng đang trở thành một yếu tố quantrọng không thể thiếu Đồng thời, việc tạo ra trải nghiệm người dùng xuất sắc trêntrang web cũng đóng vai trò quan trọng trong việc thu hút và giữ chân khách hàng

Trong giai đoạn thực tập vừa qua, em đã có cơ hội tiếp cận và nghiên cứu sâu vềlĩnh vực thiết kế giao diện trang web cũng như ứng dụng SuiteCRM - một nền tảngquản lý quan hệ khách hàng mở nguồn Báo cáo này sẽ trình bày những kinhnghiệm, kỹ năng và những điều học hỏi quý báu từ quá trình thực tập tại công tyTNHH TM &XNK Khánh Ngọc

Trong phần đầu tiên, em sẽ tập trung vào việc giới thiệu tổng quan về lĩnh vực thiết

kế giao diện trang web, đồng thời điểm qua những kiến thức và kỹ năng mà em đã

áp dụng vào dự án thực tế Tiếp theo, sẽ là phần giới thiệu về SuiteCRM, bao gồmcác tính năng và ứng dụng thực tế của nó trong quản lý mối quan hệ khách hàng

Trang 9

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

1.1 Thông tin đơn vị thực tập

1.1.1 Thông tin sơ lược của đơn vị

CÔNG TY TNHH THƯƠNG MẠI VÀ XUẤT NHẬP KHẨU KHÁNHNGỌC

(KOREA OCEAN CO., LTD)

Loại hình hoạt động: Công ty TNHH Một Thành Viên

Công ty luôn đặt ra những chính sách kinh doanh đột phá trong các lĩnh vựcDịch vụ hỗ trợ giáo dục, buôn bán mỹ phẩm và thuốc, dụng cụ y tế.Chính sách giábán buôn đến tận tay người tiêu dùng và hỗ trợ nhiệt tình Điều này giúp công tyduy trì tốc độ tăng trưởng cao và bền vững hơn so với các đối thủ cùng lĩnh vực.Với sự năng động của Ban Giám đốc và đội ngũ nhân viên trẻ, công ty đã trởthành địa chỉ đáng tin cậy trong lĩnh vực công nghệ thông tin Điều này được minhchứng qua việc tham gia và hoàn thành hàng loạt dự án lớn từ các tổ chức chínhphủ, cơ quan Đảng và các đơn vị hành chính sự nghiệp

Công ty TNHH Thương mại và Xuất nhập khẩu Khánh Ngọc đã vượt qua mọithử thách, vững vàng phát triển và trở thành một đối tác đáng tin cậy Tiêu chí kinhdoanh không chỉ dừng lại ở việc đảm bảo sự hài lòng của khách hàng, mà còn liên

Trang 10

tục phát triển vượt bước Công ty đang tạo dựng mối quan hệ bền vững và đáng tincậy với nhiều đối tác cả trong lẫn ngoài nước

1.1.2 Tổ chức và các lĩnh vực hoạt động của đơn vị

Công ty Khánh Ngọc được thành lập tháng 11 năm 2016 theo giấy phép đăng

ký kinh doanh số 0107642867, với chức năng cung cấp các thiết bị y tế, bán mỹphẩm và đồ dùng, điện, điện tử, thiết bị công nghiệp, các khóa học online, hỗ trợgiáo dục,dịch vụ xây dựng và phát triển web giáo dục,tư vấn du học, liên kết đào tạotrong nước và quốc tế, tư vấn giáo dục, cung cấp giải pháp tổng thể cho khách hàng.Nhờ số lượng nhân viên có trình độ kỹ thuật cao, đầy nhiệt huyết và tinh thần phục

vụ tận tình hiệu quả, Khánh Ngọc đã thiết lập được cơ sở hạ tầng vững chắc để pháttriển

1.1.3 Tổ chức quản lý sử dụng các nguồn lực của đơn vị

Bảng 1.1: Cơ cấu lao động theo trình độ chuyên môn

(Đơn vị tính: Người)

Trình độ

Số lượng (người)

Tỷ lệ (%)

Trang 11

Hình 1.1: Cơ cấu lao động theo trình độ chuyên môn

Dựa vào bảng dữ liệu, có thể thấy rằng chất lượng lao động của công ty đã có

sự tăng cao qua từng năm Điều này phản ánh sự phát triển và cạnh tranh của công

ty trong thời điểm hiện tại Cụ thể:

Số lao động có trình độ Đại học tăng từ 8 người (chiếm 30,2%) vào năm 2020,lên thành 9 người (chiếm 33,8%) vào năm 2021 và tiếp tục tăng lên thành 11 người(chiếm 34,7%) vào năm 2022 Điều này cho thấy công ty ngày càng quan trọng việcnâng cao năng lực của đội ngũ lao động thông qua việc tuyển dụng nhân viên cótrình độ cao

Số lao động có trình độ Đại học cũng có sự gia tăng từ 6 người (chiếm 26,4%)vào năm 2020, lên thành 8 người (chiếm 27,9%) vào năm 2021 Tuy nhiên, tronghai năm 2021 và 2022, số lao động này giữ nguyên mức là 9 người (chiếm khoảng27,5%)

Số lao động có trình độ Cao đ—ng chiếm tỷ lệ lớn nhất, với 10 người (chiếm43,4%) vào năm 2020, tăng lên thành 11 người (chiếm 38,2%) vào năm 2021, vàtiếp tục tăng lên thành 12 người (chiếm 38,9%) vào năm 2022 Đa số các lao độngnày thường tập trung trong các bộ phận liên quan đến kế toán và kinh doanh.Tóm lại, qua các năm 2020, 2021 và 2022, chất lượng lao động của công ty đã

có sự tăng cao, đồng thời công ty cũng tiếp tục đầu tư và tuyển dụng nhân viên cótrình độ cao để nâng cao hiệu suất làm việc

Trang 12

1.1.4 Cơ cấu tổ chức

Hình 1.2: Sơ đồ tổ chức của công ty

1.1.5 Tình hình hoạt động kinh doanh của doanh nghiệp trong 3 năm 2020- 2022

Bảng 1.2: Kết quả hoạt động kinh doanh trong 3 năm(2020-2022)

Đơn vị: Triệu đồng

Năm 2020

Năm 2021

Năm 2022

2021/2020 2022/2021

Tổng doanh thu 14.284 13.552 15.363 -732 -5,1 1.811 13,4Tổng chi phí 13.836 13.331 14.846 -505 -3,6 1.515 11,4Lợi nhuận trước

Lợi nhuận sau

(Nguồn: Phòng kế toán)

Tình hoạt động kinh doanh của công ty trong 03 năm gần đây ta nhận thấy rằng:

- Về doanh thu: doanh thu của công ty không đều qua 3 năm Năm 2020 doanhthu đạt 14.284 triệu đồng, năm 2021 là 13.552 triệu đồnggiảm 732 triệu đồng tương

Kế toán

Bộ phận đào tạo

Trang 13

ứng giảm 5,12% ; năm 2022 doanh thu là 15.363 triệu đồng tăng 1.811 triệu đồngtương ứng tăng 13,36% so với năm 2021

- Về tổng chi phí: năm 2020 chi phí đạt 13.836 giảm 505 triệu đồng tương ứngvới ứng giảm 3,65% ; năm 2022 chi phí là 14.846 triệu đồng tăng 1.515 triệu đồngtương ứng tăng 11,38% so với năm 2021

- Lợi nhuận trước thuế: Năm 2020 đạt 448 triệu sang năm 2021 giảm 227 triệuđồng so với năm 2021; năm 2022 tăng 296 triệu đồng so với năm 2021

- Lợi nhuận sau thuế: năm 2020 lợi nhuận đạt 370 triệu đồng, năm 2021 là

166 triệu đồng, đến năm 2022 lợi nhuận 403 triệu đồng tương ứng tăng 237 triệuđồng so với năm 2021 Lợi nhuận tăng lên thì thu nhập của người lao động tăng lêntương ứng và khuyến khích người lao động thực viện công việc tốt hơn thêm gắng

bó và cố gắng vì công ty hơn, thu nhập tăng làm người lao động có được an tâm vàtạo động lực cho họ phát triển bản thân

Như vậy, qua phân tích trên ta thấy tình hình hoạt động kinh doanh của công

ty mặc dù có hiệu quả nhưng chưa đều, còn thất thường giữa các năm, chưa thựchiện được mục tiêu năm sau cao hơn năm trước Tuy nhiên áp lực việc tăng doanhthu hàng năm của công ty sẽ đặt ra thử thách cho lãnh đạo, nhân viên phải thay đổichính sách, chiến lược trong kinh doanh để có thể mở rộng quy mô, giới thiệu sảnphẩm của công ty đến khách hàng hiệu quả hơn

1.2 Thông tin vị trí sinh viên tham gia thực tập

Trang 14

2 Hiểu Đối Tượng Sử Dụng (User Personal):

- Định rõ đối tượng sử dụng trang web hoặc dashboard Điều này giúp bạn tạo ragiao diện phù hợp với người dùng cuối

3 Thiết Kế Đáp Ứng (Responsive Design):

- Đảm bảo giao diện có thể hiển thị tốt trên các thiết bị khác nhau, từ máy tính đểbàn đến điện thoại di động

4 Tối Giản Hóa (Simplicity):

- Thiết kế nên đơn giản và dễ sử dụng Tránh quá nhiều yếu tố phức tạp hoặcthông tin quá nhiều

5 Sắp Xếp Hợp Lý (Layout):

- Đảm bảo sắp xếp giao diện hợp lý, giúp người dùng dễ dàng tìm thấy thông tin

và chức năng

6 Màu Sắc và Thông Điệp (Color Scheme):

- Sử dụng màu sắc hài hòa và phù hợp với thương hiệu Đồng thời, màu sắc cũngnên hỗ trợ trong việc truyền đạt thông điệp

7 Font Chữ Rõ Ràng:

- Sử dụng font chữ dễ đọc và hợp lý Tránh sử dụng quá nhiều font chữ khácnhau

8 Hỗ Trợ Đa Ngôn Ngữ (Multi-language Support):

- Nếu có, hãy cung cấp khả năng chuyển đổi ngôn ngữ

9 Tương Tác Người Dùng (User Interaction):

- Thiết kế các phần tương tác người dùng một cách rõ ràng và dễ sử dụng

10 Thiết Kế Hướng Dẫn (User Guidance):

- Cung cấp hướng dẫn hoặc gợi ý cho người dùng để giúp họ sử dụng giao diệnmột cách hiệu quả

11 Tốc Độ Tải Trang (Page Load Speed):

- Đảm bảo giao diện tải nhanh, giảm thiểu thời gian chờ đợi của người dùng

12 Thử Nghiệm và Kiểm Tra (Testing and QA):

Trang 15

- Kiểm tra kỹ lưỡng trước khi triển khai để đảm bảo không có lỗi hoạt động

13 Tương Thích Trình Duyệt (Browser Compatibility):

- Đảm bảo giao diện hoạt động tốt trên các trình duyệt phổ biến (Chrome,Firefox, Safari, Edge, )

14 Bảo Mật (Security):

- Đảm bảo rằng trang web hoặc dashboard được bảo vệ khỏi các mối đe dọa bảomật

15 Cập Nhật Liên Tục (Continuous Updates):

- Theo dõi phản hồi của người dùng và cập nhật giao diện để cải thiện trảinghiệm người dùng

1.3 Đề tài thực tập

Thiết kế giao diện website hỗ trợ giáo dục :

Công việc bao gồm:

- Tạo ra các trang giao diện người dùng, các trang dashboard để phục vụ xâydựng website

- Xây dựng SuiteCRM mới từ SuiteCRM + SugarCRM

- Mirgate Database từ sever cũ sang server mới

- Phát triển và cải tiến sever mới

1.4 Lịch làm việc

Mức độ hoàn thành (SV tự đánh giá) Ghi chú

1 Tìm hiểu về công ty, làm quen sơ lược về công việc Nguyễn QuếAnh Hoàn tốt thành

Trang 16

Như React, Bootstrap, hoặc

Tìm hiểu tổng quan và chi

tiết các công cụ và kỹ thuật

thiết kế giao diện web

Nguyễn QuếAnh

Hoàn thánhtốt

7

Thực hiện tạo và chạy demo

các trang giao diện web, các

trang dashboard quản lý

Nguyễn QuếAnh Hoàn thánhtốt

Hoàn thánhtốt

9

Xây dựng 1 số ứng dụng,

tính năng, module, trên

SuiteCRM AnhNguyễn Quế Hoàn thánhtốt

Trang 17

10 Tiếp tục các công việc vàhoàn thiện báo cáo Nguyễn QuếAnh Hoàn thánhtốt

Trang 18

CHƯƠNG 2 BÁO CÁO NỘI DUNG THỰC TẬP

2.1 Tóm tắt công việc theo tiến độ (tuần) :

2.1.1 Tìm hiểu lập trình web, ngôn ngữ lập trình

HTML (Hypertext Markup Language):

HTML là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo cấu trúc chocác trang web Nó sử dụng các thẻ (tags) để xác định và bố cục các phần tử trêntrang web, như tiêu đề, đoạn văn bản, hình ảnh, liên kết, và nhiều phần khác

CSS (Cascading Style Sheets):

CSS là ngôn ngữ định kiểu, được sử dụng để cung cấp giao diện và trang trícho các trang web được viết bằng HTML Nó cho phép bạn điều chỉnh màu sắc,kích thước, khoảng cách, font chữ và nhiều thuộc tính khác của các phần tử HTML

JavaScript:

JavaScript là một ngôn ngữ lập trình phía client-side, nghĩa là nó chạy trựctiếp trên trình duyệt của người dùng JavaScript thường được sử dụng để thêm tínhnăng tương tác động, kiểm soát sự kiện và thay đổi nội dung trên trang web

Front-end Frameworks:

Front-end Frameworks là bộ công cụ và thư viện được thiết kế để giúp pháttriển giao diện người dùng (UI) của một ứng dụng web một cách nhanh chóng vàhiệu quả hơn Các framework giúp tối ưu hóa việc quản lý trạng thái ứng dụng,quản lý các thành phần UI, và tạo ra các ứng dụng có trải nghiệm người dùng mượtmà

Các front-end frameworks phổ biến :

• React là một thư viện JavaScript phát triển bởi Facebook Nó tập

trung vào việc xây dựng giao diện người dùng dễ bảo trì và tái sửdụng React sử dụng mô hình component để cấu trúc ứng dụng

• Angular là một framework phát triển bởi Google Nó cung cấp một

cách tiếp cận toàn diện để xây dựng ứng dụng web động với nhiều

Trang 19

tính năng mạnh mẽ như quản lý trạng thái ứng dụng, routing, và nhiềutính năng khác

• Vue.js là một framework linh hoạt, dễ học và dễ triển khai Nó cung

cấp một cách tiếp cận tương đối dễ dùng để xây dựng các ứng dụngweb động

• Bootstrap là một framework CSS phổ biến giúp thiết kế và xây dựng

các trang web đáp ứng nhanh chóng Nó cung cấp các class CSSchuẩn hóa giúp cải thiện việc thiết kế trang web

Visual Studio Code

Hình 2.1: Vs code và cài đặt

Visual Studio Code là mô §t trình mã biên tâ §p được phát triển bởi Microsoft Và

được viết tắt là VS Code Mô §t số chức năng tiêu biểu của VS Code mà chúng ta cóthể kể đến như: Git, Debug, Syntax Highlighting, Snippets

Tải cài đặt Visual Studio Code trên Window

Để tài và cài đă §t VS Code trên Window, bạn phải truy câ §p vào đường link sau đây:code.visualstudio.com

Trang 20

Sau khi tải VS Code, bạn cài đă §t phần mềm theo những bước sau đây:

Bước 1: Chọn vào file cài đă §t để bắt đầu cài đă §t phần mềm Code

Bước 2: Chọn I Agree để đồng ý các điều khoản của Visual Studio Code.

Trang 21

Bước 3: Tích chọn những ô trong Other (hình minh họa)

Bước 4: Chọn Next lần lượt ở những bước tiếp theo.

Trang 22

Ch6n Next trong nh9ng bước tiếp theo.

Bước 5: Kiểm tra Add to PATH và chọn Install.

Ch6n Install.

Bước 6: Phần mềm VS Code 2023 sẽ được cài đă §t Chọn Finish để kết thúc.

Trang 23

Chọn Finish để kết thúc cài đă §t phần mềm

2.1.2 Thiết lập môi trường làm việc

Mô hình MVC

Mô hình MVC (Model-View-Controller) là một mẫu thiết kế được sử dụngtrong phát triển phần mềm để tách biệt và quản lý logic dữ liệu, giao diện ngườidùng và điều khiển (control) trong ứng dụng

Mô hình MVC được sử dụng rộng rãi trong phát triển chương trình với cácngôn ngữ lập trình như PHP, Java, C#, C và C ++

Mô hình mô hình MVC bao gồm ba thành phần chính hoặc các đối tượngđược sử dụng trong phát triển phần mềm:

• Model : Model đại diện cho dữ liệu và logic cơ bản của ứng dụng Nó chứa

thông tin về cách thức lưu trữ, truy xuất và xử lý dữ liệu

o Chức năng: Model là nơi xử lý tất cả các hoạt động liên quan đến dữ

liệu Nó thực hiện các tác vụ như truy vấn cơ sở dữ liệu, xử lý dữ liệuđầu vào, cập nhật dữ liệu, và truyền tải dữ liệu cho Controller hoặcView

• View : View là thành phần chịu trách nhiệm hiển thị giao diện người dùng

và tương tác với người dùng Nó biểu diễn dữ liệu từ Model và cung cấp giaodiện để người dùng có thể tương tác với ứng dụng

Tiêu đề	Thiết Kế Giao Diện Website Hỗ Trợ Giáo Dục
Tác giả	Nguyễn Dương Hùng
Người hướng dẫn	Phạm Thị Nguyệt
Trường học	Trường Đại Học Mỏ - Địa Chất
Chuyên ngành	Công nghệ thông tin
Thể loại	Báo cáo thực tập doanh nghiệp
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	46
Dung lượng	8,7 MB