Thiết kế giao diện website “cổng thông tin của công ty cổ phần giải pháp tps”

LỜI CẢM ƠN Trước tiên, em xin gửi lời cảm ơn đến Ban lãnh đạo và các anh chị tại đơn vị thực tập Công Ty Cổ Phần Giải Pháp TPs đã tiếp nhận, hỗ trợ nhiệt tình, truyền đạt những kinh ngh

TRƯỜNG ĐẠI HỌC KINH TẾ

KHOA THỐNG KÊ – TIN HỌC

BÁO CÁO THỰC TẬP NGHỀ NGHIỆP

NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ

CHUYÊN NGÀNH TIN HỌC QUẢN LÝ

THIẾT KẾ GIAO DIỆN WEBSITE “CỔNG THÔNG TIN CỦA

CÔNG TY CỔ PHẦN GIẢI PHÁP TPs”

Đơn vị thực tập : Công Ty Cổ Phần Giải Pháp TPs

Giảng viên hướng dẫn : ThS Nguyễn Thành Thủy

LỜI CẢM ƠN

Trước tiên, em xin gửi lời cảm ơn đến Ban lãnh đạo và các anh chị tại đơn vị thực

tập Công Ty Cổ Phần Giải Pháp TPs đã tiếp nhận, hỗ trợ nhiệt tình, truyền đạt những kinh

nghiệm quý báu và tạo mọi điều kiện để em được tiếp cận với công việc thực tế và những

kiến thức chuyên môn Đặc biệt, em xin chân thành gửi lời cảm ơn đến anh Nguyễn Viết

Long – người trực tiếp hướng dẫn em trong suốt kỳ thực tập tại công ty đã định hướng, hỗ

trợ nhiệt tình, cung cấp tài liệu và tạo mọi điều kiện thuận lợi để em có thể hoàn thành tốt

bài báo cáo thực tập nghề nghiệp

Tiếp theo, em xin gửi lời cảm ơn đến Ban lãnh đạo, Ban giám hiệu và quý thầy, cô

khoa Thống kê – Tin học trường Đại học Kinh tế - Đại học Đà Nẵng đã giúp cho chúng

em có cơ hội được thực tập để học hỏi thêm được nhiều kinh nghiệm và chuẩn bị cho công

việc ra trường sau này Đặc biệt, em xin gửi đến thầy ThS Nguyễn Thành Thủy, người đã

hướng dẫn và giúp đỡ em trong suốt quá trình thực tập vừa qua một lời cảm ơn sâu sắc

nhất

Mặc dù em đã có nhiều cố gắng nhưng do thời gian có hạn và kiến thức còn hạn chế

nên trong suốt quá trình thực tập không thể tránh khỏi những thiếu sót Em rất mong nhận

được những ý kiến đóng góp của Công ty và quý thầy, cô để em rút kinh nghiệm, khắc

phục những sai sót và hoàn thiện tốt hơn

Em xin chân thành cảm ơn!

LỜI CAM ĐOAN

Em xin cam đoan đề tài “Thiết kế giao diện website Cổng thông tin của Công Ty

Cổ Phần Giải Pháp TPs” dưới đây là bài báo cáo thực tập nghề nghiệp được nghiên cứu hoạt động độc lập dựa trên sự nỗ lực của bản thân với sự hướng dẫn, giúp đỡ tận tình của Mentor Nguyễn Viết Long và giảng viên hướng dẫn ThS Nguyễn Thành Thủy

Nội dung nghiên cứu và kết quả triển khai là hoàn toàn trung thực không có bất cứ

sự sao chép của người khác Nếu có bất kỳ điều không chính xác, em xin hoàn toàn chịu trách nhiệm về bài báo cáo của mình

MỤC LỤC

3.2.3 Màn hình sơ bộ “Trang Dịch vụ MS (Dịch vụ con của TPs MobileX)” 8 3.2.4 Màn hình sơ bộ “Trang Dịch vụ MC (Dịch vụ con của TPs MobileX)” 8 3.2.5 Màn hình sơ bộ “Trang Dịchvụ MA (Dịch vụ con của TPs MobileX)” 9 3.2.6 Màn hình sơ bộ “Trang Dịchvụ MH (Dịch vụ con của TPs MobileX)” 9

3.3.2 Màn hình chi tiết “Trang Dịch vụ TPs MobileX” 12 3.3.3 Màn hình chi tiết “Trang Dịch vụ IT Services” 13

3.3.8 Màn hình chi tiết “Trang Giới thiệu” 18

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 29

CHECK LIST CU ̉ A BA ́ O CA ́ O 30

DANH MỤC HÌNH ẢNH

Hình 2: Màn hình sơ bộ "Trang Dịch vụ TPs MobileX" 7 Hình 3: Màn hình sơ bộ :Trang Dịch vụ IT Services" 7

Hình 11: Màn hình chi tiết “Trang Dịch vụ TPs MobileX" 12

DANH MỤC BẢNG BIỂU

Không tìm thấy mục nào của mục lục.(không có bảng)

DANH MỤC CÁC TỪ VIẾT TẮT Không có

LỜI MỞ ĐẦU

1 Mục tiêu của đề tài

- Thiết kế ra giao diện Website Cổng thông tin của Công Ty Cổ Phần Giải Pháp TPs thân thiện, dễ sử dụng và có tính thẩm mỹ cho người dùng

- Áp dụng kiến thức, kỹ năng đã học để giải quyết vấn đề đặt ra và học hỏi thêm được nhiều kinh nghiệm

2 Đối tượng và phạm vi nghiên cứu

- Front-end của một website

- Phạm vi nghiên cứu:

• Sử dụng các ngôn ngữ: HTML, CSS và JAVASCRIPT

• Thời gian thực hiện đề tài: 04/07/2023 – 23/08/2023

3 Kết cấu của đề tài

Đề tài được tổ chức gồm phần mở đầu, 4 chương nội dung và phần kết luận

CHƯƠNG 1 TỔNG QUAN VỀ ĐƠN VỊ THỰC TẬP

1.1 Giới thiệu tổng quát về Công Ty Cổ Phần Giải Pháp TPs

TPS nằm trong chuỗi 3 công ty thành viên của Công ty Cổ phần Công nghệ Tiên Phát - TPCOMS (TPcoms, TPtech và TPS) TPCOMS được thành lập bởi các thành viên có nhiều năm kinh nghiệm trên thị trường viễn thông Việt Nam Là nhà cung cấp các dịch vụ viễn thông và CNTT chuyên nghiệp, cam kết mang lại chất lượng dịch vụ tốt nhất cho khách hàng

Tên công ty: Công Ty Cổ Phần Giải Pháp TPs

Địa chỉ: 49 Lê Quý Đôn, Phường Bình Thuận, Quận Hải Châu, TP Đà Nẵng

TPs được thành lập bởi các thành viên có nhiều năm kinh nghiệm trên thị viễn thông Việt Nam Được thành lập năm 2018 Sau 5 năm hoạt động và phát triển, Công Ty Cổ Phần Giải Pháp TPs là nhà cung cấp các dịch vụ viễn thông và CNTT chuyên nghiệp, cam kết mang lại chất lượng dịch vụ tốt nhất cho khách hàng

1.2 Tổng quan về vị trí việc làm

Phòng ban thực tập: Phòng Kỹ thuật

Mảng thực tập: Front-end

CHƯƠNG 2 LÝ THUYẾT

2.1 HTML

HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu cơ bản sử dụng trong phát triển web Nó được sử dụng để tạo cấu trúc và định dạng nội dung của trang web HTML cho phép bạn xác định các phần tử trên trang web, chẳng hạn như tiêu đề, đoạn văn bản, hình ảnh, liên kết, biểu mẫu, và nhiều phần tử khác, và định nghĩa cách chúng nên được hiển thị và tương tác trên trình duyệt web

Một số điểm quan trọng về HTML bao gồm:

➢ Cấu trúc cơ bản: HTML dựa trên một cấu trúc cơ bản với các thẻ mở <tag> và thẻ đóng </tag> Thẻ mở định nghĩa một phần của trang, trong khi thẻ đóng kết thúc phần

đó Ví dụ: <html> </html>, <head> </head>, và <body> </body>

➢ Thẻ văn bản: HTML có các thẻ để định dạng và hiển thị văn bản, chẳng hạn như <h1> đến <h6> cho tiêu đề, <p> cho đoạn văn, và <strong> hoặc <em> cho in đậm và in

nghiêng

➢ Liên kết và hình ảnh: Bạn có thể chèn liên kết (<a>) để kết nối các trang web và hình

ảnh (<img>) để hiển thị đồ họa Thuộc tính href của thẻ <a> xác định đích đến của liên kết

➢ Biểu mẫu và nhập liệu: HTML cho phép bạn tạo các biểu mẫu (<form>) để thu thập

thông tin từ người dùng, với các phần tử nhập liệu như ô văn bản, hộp kiểm, và nút gửi

➢ HTML5 và tính năng mới: HTML5 là phiên bản mới nhất của HTML và mang lại nhiều cải tiến, bao gồm hỗ trợ video và audio tích hợp (<video> và <audio>), định nghĩa các loại nội dung (<article>, <section>) và nhiều tiện ích khác

2.2 CSS

CSS (Cascading Style Sheets) là một ngôn ngữ sử dụng để định dạng và trình bày nội dung của các trang web và tài liệu HTML CSS cho phép bạn kiểm soát cách mà các phần tử HTML hiển thị trên trang, bao gồm màu sắc, kích thước, khoảng cách, phông chữ

và nhiều thuộc tính khác

Một số điểm quan trọng về HTML bao gồm:

➢ Cách Kết nối với HTML: Để sử dụng CSS, bạn cần kết nối nó với tài liệu HTML.Có

ba cách chính để làm điều này:

− CSS Nội tuyến (Inline CSS): Sử dụng thuộc tính style trực tiếp trong thẻ HTML để

định dạng một phần tử cụ thể

− CSS Ngoại tuyến (External CSS): Tạo một tệp CSS riêng biệt với phần mở rộng

.css, sau đó kết nối nó với tài liệu HTML bằng thẻ <link>

− CSS Trong Tài liệu (Internal CSS): Sử dụng thẻ <style> để định nghĩa CSS trong

cùng tài liệu HTML

➢ CSS selectors: Trong CSS, CSS selectors là các cách chúng ta sử dụng để chọn ra các

phần tử (elements) mà chúng ta muốn “style” cho chúng Có 2 cách CSS selectors thân thuộc với chúng ta nhất là id và class

➢ Các đơn vị hay dùng trong CSS

− px: cố định, không thay đổi khi những yếu tố khác tác động lên

− %: phụ thuộc vào thẻ chứa nó, kích thước không cố định, sẽ bị thay đổi kích thước khi đối tượng mà nó phụ thuộc thay đổi

− rem: phụ thuộc vào thẻ html

− em: phụ thuộc vào thẻ gần nhất chứa nó

− vw: tỷ lệ theo chiều ngang của trình duyệt

− vh: tỷ lệ theo chiều dọc của trình duyệt

➢ Một số hàm cơ bản trong CSS

− var(): Hàm var() được sử dụng để chèn giá trị của một biến CSS

− rgb(): Hàm rgb () xác định màu sắc bằng cách sử dụng mô hình red – green – blue (RGB)

− rgba(): Hàm rgba() xác định màu bằng mô hình red – green – blue – alpha (RGBA) Giá trị màu RGBA là phần mở rộng của các giá trị màu RGB với giá trị alpha - chỉ định độ mờ của màu

− calc(): Hàm calc () dùng để thực hiện một phép tính

➢ Thuộc tính padding, border, margin

− padding: được sử dụng để tạo khoảng trống xung quanh nội dung của phần tử, bên trong bất kỳ đường viền xác định nào

− border: chỉ định kiểu, chiều rộng và màu sắc đường viền của một phần tử

− margin: được sử dụng để tạo không gian xung quanh các phần tử, bên ngoài bất kỳ đường viền xác định nào

➢ Ngoài ra: CSS còn hỗ trợ Pseudo Classes (ví dụ:<:hover> được sử dụng để chọn các

phần tử khi di chuột vào,…và nhiều chức năng khác

2.3 JAVASCRIPT

JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và

nhúng vào HTML giúp website trở nên sống động hơn JavaScript giúp tăng tính tương tác

trên website

➢ Nhúng JavaScript vào HTML

− Nhúng JavaScript kiểu internal: có thể hiểu là chèn code JavaScript vào một cụm

nào đó trong tập tin HTML

− Nhúng JavaScript kiểu inline: chèn ngay vị trí bất kỳ của một dòng code HTML

− Nhúng JavaScript kiểu external: viết mã lệnh JavaScript vào một file và lưu lại với

định dạng js

➢ Cách hiển thị dữ liệu ra màn hình trong JavaScript

− Sử dụng alert(): nội dung muốn hiển thị sẽ được hiển thị bên trong một hộp thoại thông

báo

− Sử dụng document.write(): khi sử dụng document.write(), nội dung muốn hiển thị sẽ

được hiển thị ngay đúng vị trí mà nó được đặt trong trang web

− Sử dụng document.getElementById().innerHTML: Khi sử dụng, nội dung muốn hiển

thị bên trong một phần tử xác định

➢ Một vài sự kiện trong JavaScript:

− onclick: sự kiện xảy ra khi người dùng click chuột vào phần tử

− ondblclick: sự kiện xảy ra khi người dùng click kép chuột vào phần tử

− onmouseenter: sự kiện xảy ra khi người dùng di chuyển con trỏ vào phần tử

− onmouseleave: sự kiện xảy ra khi người dùng di chuyển con trỏ ra khỏi phần tử

− onkeydown: sự kiện xảy ra khi người dùng đang nhấn một phím

− onkeyup: sự kiện xảy ra khi người dùng nhả phím ra

− oncopy: sự kiện xảy ra khi người dùng sao chép nội dung của phần tử

− oncut: sự kiện xảy ra khi người dùng cắt nội dung của phần tử

− onpaste: sự kiện xảy ra khi người dùng dán nội dung vào phần tử

− onchange: sự kiện xảy ra khi người dùng thay đổi giá trị của phần tử

CHƯƠNG 3 TRIỂN KHAI ĐỀ TÀI

3.1 Môi trường triển khai

Đề tài được thực hiện trên nền tảng:

Ngôn ngữ lập trình: HTML, CSS và JAVASCRIPT

Công cụ: Visual Studio Code

Trình duyệt: Google Chrome, Microsoft Edge

3.2 Thiết kế sơ bộ

3.2.1 Màn hình sơ bộ “Trang chủ”

Hình 1: Màn hình sơ bộ "Trang chủ"

3.2.2 Màn hình sơ bộ “Trang Dịch vụ TPs MobileX”

Hình 2: Màn hình sơ bộ "Trang Dịch vụ TPs MobileX"

3.2.3 Màn hình sơ bộ “Trang Dịch vụ IT Services”

Hình 3: Màn hình sơ bộ :Trang Dịch vụ IT Services"

3.2.3 Màn hình sơ bộ “Trang Dịch vụ MS (Dịch vụ con của TPs MobileX)”

Hình 4: Màn hình sơ bộ "Trang Dịch vụ MS"

3.2.4 Màn hình sơ bộ “Trang Dịch vụ MC (Dịch vụ con của TPs MobileX)”

Hình 5: Màn hình sơ bộ "Trang Dịch vụ MC"

3.2.5 Màn hình sơ bộ “Trang Dịchvụ MA (Dịch vụ con của TPs MobileX)”

Hình 6: Màn hình sơ bộ "Trang dịch vụ MA"

3.2.6 Màn hình sơ bộ “Trang Dịchvụ MH (Dịch vụ con của TPs MobileX)”

Hình 7: Màn hình sơ bộ "Trang dịch vụ MH"

3.2.7 Màn hình sơ bộ “Trang Giới thiệu”

Hình 8: Màn hình sơ bộ "Trang Giới thiệu"

3.2.8 Màn hình sơ bộ “Trang Liên hệ”

Hình 9: Màn hình sơ bộ "Trang Liên hệ"

3.3 Thiết kế chi tiết

3.3.1 Màn hình chi tiết “Trang chủ”

Hình 10: Màn hình chi tiết "Trang chủ"

3.3.2 Màn hình chi tiết “Trang Dịch vụ TPs MobileX”

Hình 11: Màn hình chi tiết “Trang Dịch vụ TPs MobileX"

3.3.3 Màn hình chi tiết “Trang Dịch vụ IT Services”

Hình 12: Màn hình chi tiết “Trang Dịch vụ IT Services

3.3.4 Màn hình chi tiết “Trang Dịch vụ MS”

Hình 13: Màn hình chi tiết “Trang Dịch vụ MS"

3.3.5 Màn hình chi tiết “Trang Dịch vụ MC”

Hình 14: Màn hình chi tiết “Trang Dịch vụ MC"

3.3.6 Màn hình chi tiết “Trang Dịch vụ MA”

Hình 15: Màn hình chi tiết “Trang Dịch vụ MA"

3.3.7 Màn hình chi tiết “Trang Dịch vụ MH”

Hình 16: Màn hình chi tiết “Trang Dịch vụ MH"

3.3.8 Màn hình chi tiết “Trang Giới thiệu”

Hình 17: Màn hình chi tiết “Trang Giới thiệu"

3.3.9 Màn hình chi tiết “Trang Liên hệ”

Hình 18: Màn hình chi tiết “Trang Liên hệ"

CHƯƠNG 4 KẾT QUẢ 4.1 Trang chủ

Hình 19: Màn hình "Trang chủ"

4.2 Trang Dịch vụ TPs MobileX

Hình 20: Màn hình "Trang Dịch vụ TPs MobileX"

4.3 Trang Dịch vụ IT Services

Hình 21: Màn hình "Trang Dịch vụ IT Services"

4.4 Trang Dịch vụ MS

Hình 22: Màn hình "Trang Dịch vụ MS"

4.5 Trang Dịch vụ MC

Hình 23: Màn hình "Trang Dịch vụ MC"

4.6 Trang Dịch vụ MA

Hình 24: Màn hình "Trang dịch vụ MA"

4.7 Trang Dịch vụ MH

Hình 25: Màn hình "Trang Dịch vụ MH"

4.8 Trang Giới thiệu

Hình 26: Màn hình "Trang Giới thiệu"

4.9 Trang Liên hệ

Hình 27: Màn hình "Trang Liên hệ"

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

● Đạt được:

- Sinh viên cần chỉ ra các kiến thức, kỹ năng mình đã đạt sau thời gian thực tập;

- Đã học được các kỹ năng mềm, cách ứng xử trong Công ty, ngôn ngữ lập trình HTML, CSS, Javascript

- Đã làm được một trang website cho Công ty

● Hạn chế:

- Sinh viên cần chỉ ra các mặt hạn chế của bản thân, những mục tiêu mà mình chưa

đạt được so với yêu cầu của doanh nghiệp/GVHD,…;

- Vẫn chưa thành thạo về Javascript và vẫn còn đang tìm hiểu ở mức sơ khai cần tìm

hiểu sâu rộng hơn

● Hướng phát triển:

- Sinh viên đưa ra các kế hoạch dự kiến để hoàn thiện năng lực của bản thân,…;

- Dựa trên những gì đã học tại Công ty sẽ là bàn đạp để em tìm hiểu thêm những kiến thức sâu hơn, khó hơn về Front-end Em cần học thêm về các thư viện có sẵn của CSS cũng như là cách xử lý API,…để có thể có 1 lượng kiến thức lớn cho kỳ thực tập tốt nghiệp

TÀI LIỆU THAM KHẢO

- Tài liệu tham khảo về ngôn ngữ HTML, CSS và JAVASCRIPT

https://youtu.be/3t2H8aqOkeQ?si=uf2jez5hLpXt5pLZ

CHECK LIST CỦA BÁO CÁO STT Nội dung công việc Có Không Ghi chú

1 Báo cáo được trình bày (định

dạng) đúng với yêu cầu x

2 Báo cáo có số lượng trang đáp

ứng đúng yêu cầu (30-50 trang) x

3

Báo cáo trình bày được phần mở

đầu bao gồm: Mục tiêu, Phạm vi

và đối tượng, kết cấu …

x

4

Báo cáo trình bày về công ty, vị

trí việc làm (công việc đó làm gì,

kiến thức và kỹ năng cần thiết là

gì, con đường phát triển sự

nghiệp (career path)), cơ sở lý

thuyết phù hợp với nội dung của

đề tài (Tối đa 10-12 trang)

6 Báo cáo có phần kết luận và

hướng phát triển của đề tài x