BÁO cáo THỰC tập tốt NGHIỆP lập TRÌNH WEB FRONT END

Các element là các chỉ định xác định cấu trúc và nội dung của các đối tượng trong một trang.. Các element được xác định bằng cách sử dụng dấu ngoặc nhỏ hơn và lớn hơn < > bao quanh tên

BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC GIA ĐỊNH KHOA CÔNG NGHỆ THÔNG TIN

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

LẬP TRÌNH WEB FRONT END

Giảng viên hướng dẫn: TỪ LÃNG PHIÊU

Sinh viên thực hiện: LÊ THỊ HỒNG THỦY

MSSV: 1911080022

Lớp: K13DCPM01 Khóa: 13

Thành phố Hồ Chí Minh, tháng 08 năm 2022

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn công ty HT Software đã 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ủaanh chị trong team Em đã tiếp thu được những kiến thức quan trọng để cóhiểu được cách vận hành của một trang web Chân thành cảm ơn các anhchị trong nhóm đã bỏ ra nhiều thời gian, công sức để hướng dẫn em hoànthành đợt thực tập này

Đặc biệt cảm ơn anh Trần Ngọc Hiếu đã hướng dẫn, giúp đỡ chochúng em tận tình cả những khó khăn trong công việc, đến những khókhăn việc làm quen với môi trường mới và viết trang web Chỉ em cáchsửa những lỗi thường gặp

Cũng xin cảm ơn thầy/cô trong khoa công nghệ phần mềm đã nhiệttình hỗ trợ, tạo điều kiện em làm bài báo cáo này

ĐÁNH GIÁ CỦA ĐƠN VỊ THỰC TẬP

1 Thái độ tác phong trong thời gian thực tập:

5 Đánh giá chung kết quả̉ thực tập:

………, ngày ……… tháng ……… năm …………

TM Đơn vị thực tập

(Ký tên, đóng dấu)

ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN

1 Thái độ tác phong trong thời gian thực tập:

3 Nhận thức thực tế:

5 Đánh giá chung kết quả̉ thực tập:

………, ngày ……… tháng ……… năm …………

Giả̉ng viên hướng dẫn

(Ký tên, ghi rõ họ tên)

MỤC LỤC

MỞ ĐẦU

Việt Nam hiện nay với nền kinh tế đã và đang phát triển, vàngành Công nghệ thông tin cũng đã trở thành ngành mũi nhọn để nước tasớm hoàn thành mục tiêu công nghiệp hóa- hiện đại hóa trong tất cả cácngành và lĩnh vực Và ngành làm web đã giúp các doanh nghiệp quảng básản phẩm thương hiệu của họ cho khách hang, cho đối tác hiệu quả hơn sovới các cách làm truyền thống như báo, ấn phẩm, đài tiếng nối truyền hình.Web giúp ta dễ dàng tiếp cận , chăm sóc khách hàng tốt hơn Web giúp choviệc kinh doanh của các doanh nghiệp lớn hay nhỏ lẻ, hộ gia đình hoạtđộng 24/7 Web làm giảm tải gánh nặng chi phí vận hành doanh nghiệp,giảm nhân công, tăng hiệu suất và nhiều lợi ích tuyết i vời khác mà trangweb mang lại cho cuộc sống con người hiện tại

Việc lướt web để nắm bắt thông tin, phục vụ cho việc thư giãn, giảitrí đã trở thành một phần không thể thiếu trong mỗi chúng ta Đặc biệt làthế hệ trẻ cần phải truy cập internet để tự mở mang trau dồi kiến thức chobản thân

Sau khoảng thời gian ra sức học tập và tham gia cuộc thi học thuậttrên trường, với mục đích mở rộng vốn kiến thức lập trình còn non nớt củabản thân Em đã đi thực tập và nơi em chọn là công ty HT Software– mộtmôi trường năng động, chuyên nghiệp – là nơi sẽ giúp em thực hiện được

kế hoạch của bản thân

Chương 1: GIỚI THIỆU VỀ ĐƠN VỊ THỰC TẬP

1 Giới thiệu công ty HT Software

Công ty TNHH HT SOFEWARE hoạt động chính trong những lĩnh vựcphát triển phần mềm, tư vấn giải pháp công nghệ thông tin và huấn luyện nguồn nhân lực cho doanh nghiệp Chúng tôi luôn cố gắng hành động để thành công; thành công của khách hàng là thành công của chúng tôi

Tiền thân là công ty cổ phần R2S, Đến tháng 06/2022 thì tách ra, mụcđích chính để phát triển sản phẩm riêng và quảng bá sản phẩm

2 Lĩnh vực huấn luyện:

Tạo ra một môi trường để những bạn sinh viên mới ra trường hoặc chuẩn bị ra trường chưa có kinh nghiệm thực tế được trải nghiệm từ đó có thể làm việc được tại doanh nghiệp mà không cần phải đào tạo thêm hoặc nếu có thì chỉ đào tạo phần đặc thù của từng doanh nghiệp Về lâu dài Công

ty TNHH HT SOFEWARE hướng đến việc nhận yêu cầu từ doanh nghiệp

và huấn luyện theo đơn đặt hàng Đồng thời xây dựng thương hiệu cho việcgiám định và cung cấp nguồn nhân lực có chất lượng phù hợp với nhu cầu doanh nghiệp Hiện tại, Công ty TNHH HT SOFEWARE có hai loại huấn luyện Đào tạo lập trình viên ngay tại doanh nghiệp Triển khai học kỳ dự án/học kỳ doanh nghiệp tại các trường đại học, cao đẳng, dạy nghề

3 Phát triển phần mềm:

Công ty TNHH HT SOFEWARE nhận phát triển phần mềm theo đơn đặt hàng từ khách hàng cá nhân, doanh nghiệp trong và ngoài nước Với những dự án này, học viên thử việc có thể được nhận lương ngay trongthời gian thử việc; Và hơn hết các bạn có thể sẽ trở thành đội ngũ phát triểnphần mềm của công ty

4 Tư vấn giải pháp công nghệ thông tin:

Công ty TNHH HT SOFEWARE cung cấp các dịch vụ tư vấn giải pháp và triển khai các giải pháp công nghệ thông tin Cung cấp nguồn nhânlực hoặc hợp tác triển khai dự án Ngoài ra Công ty TNHH HT

SOFEWARE còn hỗ trợ các doanh nghiệp vừa và nhỏ triển bộ phận công nghệ thông tin

5 Sản phẩm trang web của công ty:

Công ty TNHH HT SOFEWARE thiết kế các trang web mua sắm hàng trực tuyến, hỗ trợ nông dân làm nông nghiệp buôn bán các sản phẩmthô trực tuyến chạy trên đa nền tảng Android, Iphone, laptop, mobile web

Chương 2: NỘI DUNG THỰC TẬP

1 Tìm hiều về HTML,CSS, CSS3

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 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 đó.

Các thuật ngữ HTML phổ biến:

Các element là các chỉ định xác định cấu trúc và nội dung của các đối tượng trong một trang Một số yếu tố được sử dụng thường xuyên hơn bao gồm nhiều cấp độ tiêu đề (được xác định là <h1> đến <h6>) và đoạn văn (được xác định

là <p>); danh sách tiếp tục bao gồm <a>, <div>, <span>, <strong>, và <em>, và nhiều hơn nữa nhiều.

Các element được xác định bằng cách sử dụng dấu ngoặc nhỏ hơn và lớn hơn <

> bao quanh tên element.

Tags:

Việc sử dụng các dấu ngoặc nhỏ hơn và lớn hơn bao quanh một element sẽ tạo

ra cái được gọi là thẻ Thẻ thường xảy ra nhất trong các cặp thẻ mở và đóng.

Một thẻ mở đánh dấu sự bắt đầu của một element Nó bao gồm một dấu nhỏ hơn

theo sau là tên của một element và sau đó kết thúc bằng dấu lớn hơn; ví dụ,

<div>.

Một thẻ đóng đánh dấu vào cuối của một element Nó bao gồm một dấu nhỏ hơn

đến dấu gạch chéo và tên của element và sau đó kết thúc bằng dấu lớn hơn; ví

dụ, </div>.

Nội dung nằm giữa thẻ mở và thẻ đóng là nội dung của element đó Ví dụ, một liên kết anchor sẽ có thẻ mở <a>và thẻ đóng </a> Những gì rơi vào giữa hai thẻ này sẽ là nội dung của liên kết anchor đó.

Attributes:

Các attribute là các thuộc tính được sử dụng để cung cấp thông tin bổ sung về

một element Các thuộc tính phổ biến nhất bao gồm thuộc tính id, xác định một element; các thuộc tính class, phân loại một element; thuộc tính src, trong đó xác định một nguồn cho nội dung nhúng; và thuộc tính href, cung cấp một tham chiếu hyperlink đến một tài nguyên được liên kết.

Các thuộc tính được xác định trong thẻ mở, sau tên của một thành phần Nói chung các thuộc tính bao gồm tên và giá trị Định dạng cho các thuộc tính này bao gồm tên thuộc tính theo sau là dấu bằng và sau đó là giá trị thuộc tính được trích dẫn Ví dụ: một element <a> bao gồm một thuộc tính href sẽ trông như sau:

<a href=”http://shayhowe.com/”>Shay Howe</a>

Các thuật ngữ CSS phổ biến:

Các selector thường nhắm mục tiêu một giá trị thuộc tính, chẳng hạn như một id hoặc class hoặc nhắm mục tiêu loại phần tử, chẳng hạn như <h1> hoặc <p>.

Trong CSS, các selector được theo sau với dấu ngoặc nhọn, {}, bao gồm các kiểu được áp dụng cho phần tử được chọn Selector ở đây đang nhắm mục tiêu tất cả các <p>.

Properties:

Khi một phần tử được chọn, một thuộc tính sẽ xác định các kiểu sẽ được áp dụng cho phần tử đó Tên thuộc tính nằm sau selector, trong dấu ngoặc nhọn {} và ngay trước dấu hai chấm, : Có rất nhiều thuộc tính chúng ta có thể sử dụng, chẳng hạn như background, color, font-size, height, và width, và các thuộc tính

mới thường được thêm vào Trong đoạn code sau, chúng tôi đang xác

định các thuộc tính color và font-size được áp dụng cho tất cả các <p> :

CSS3 là phiên bản nâng cấp mới nhất của thuộc tính CSS Nó là thành phần hỗ

trợ làm nền cho website 1 cách toàn diện nhất CSS3 ko cần sử dụng đến sự bổ trợ của các yếu tố bên ngoài như Javascript, Jquery, Flash…

CSS3 hoàn toàn kế thừa các tính năng và thuộc tính của những phiên bản CSS

trước đó Đồng thời phát triển thêm nhiều những tính năng và thuộc tính mới Nó giúp việc định dạng trang web tốt hơn, chuyên nghiệp hơn Sự thay đổi giữa CSS

và CSS3

Thay đổi lớn nhất hiện đang được lên kế hoạch cho CSS cấp 3 là việc giới thiệu các mô-đun Ưu điểm của các mô-đun là nó cho phép đặc tả được hoàn thành Nó phê duyệt nhanh hơn vì các phân đoạn sẽ được hoàn thành và được phê duyệt theo từng khối Điều này cũng cho phép các nhà sản xuất trình duyệt và tác nhân người dùng hỗ trợ các phần của đặc tả nhưng giữ cho mã của họ phình to ở mức tối thiểu bằng cách chỉ hỗ trợ các mô-đun có ý nghĩa Ví dụ, một trình đọc văn bản sẽ không cần bao gồm các mô-đun chỉ xác định cách một phần tử sẽ hiển thị trực quan Nhưng ngay cả khi nó chỉ bao gồm các mô-đun âm thanh, nó vẫn sẽ là một công cụ CSS 3 tuân thủ tiêu chuẩn.

Tính ngăn mới của CSS3

Selectors(bộ trọn): Các bộ chọn trong CSS3 khá đặc biệt Nó cho phép nhà thiết

kế nhà thiết kế/nhà phát truyển lựa trọn cấp độ cụ thể hơn của tài liệu Một trong những điều thú vị hơn về mô-đun này là nhiều trình duyệt đã bắt đầu hỗ trợ các

bộ chọn CSS 3 nâng cao Vì vậy bạn có thể bắt đầu dùng thử ngay bây giờ.

Hiệu ứng văn bả̉n và bố cục: Thay đổi dấu gạch nối, khoảng trắng và

chứng minh văn bản trong tài liệu.

Paged Media and Generated Content: CSS 3 bây giờ sẽ hỗ trợ nhiều tùy

chọn hơn trong phương tiện phân trang Chẳng hạn như chạy tiêu đề và chân trang và số trang Ngoài ra, sẽ có các thuộc tính nâng cao để in nội dung được tạo, bao gồm các thuộc tính cho chú thích và tham chiếu chéo.

Bố cục nhiều cột: Hiện tại, dự thảo làm việc bố trí nhiều cột cung cấp thuộc

tính Nó cho phép các nhà thiết kế hiển thị nội dung của họ trong nhiều cột

Cụ thể với các định nghĩa như khoảng cách cột, đếm cột và chiều rộng cột.

Chú thích: CSS bây giờ sẽ hỗ trợ khả năng thêm các chú thích nhỏ trên đầu

hoặc bên cạnh các từ Và thường được sử dụng nhất trong tiếng Trung và tiếng Nhật Chúng thường được sử dụng để đưa ra cách phát âm hoặc ý nghĩa của các chữ tượng hình khó.

2 Tìm hiểu về boostrap, JavaScript

2 1 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

Ưu điểm:

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.

2.2 JavaScript

Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa Javascript được sử dụng rộng rãi trong các ứng dụng Website Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, trên máy tính lẫn điện thoại.

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt Nó

có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS

và các thẻ HTML một cách dễ dàng Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend Javascript Framework:

Angular: 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.

ReactJS: Một thư viện viết ứng dụng mobie.

Và còn nhiều thư viện khác.

Ưu điểm:

Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa các client.

Ví dụ 2 người đang truy cập vào 2 trình duyệt khác nhau thì cả hai đều có những phiên xử lý Javascript khác nhau, không ảnh hưởng lẫn nhau.

Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho đến các hệ điều hành trên mobile.

Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài đặt quá nhiều phần mềm.

Cách thức hoạt động:

GIT là một VCS Tuy nhiên, so với các VCS thông thường, GIT cũng có một số điểm khác biệt Trong đó, điểm khác biệt nổi bật nhất của GIT đó là cách đọc và lưu trữ dữ liệu của phần mềm này.

Về mặt khái niệm, hầu hết các hệ thống lưu trữ thông tin bằng cách thay đổi dựa trên file và lưu trữ thông tin dưới dạng danh sách Hệ thống này sẽ tổng hợp và cập nhật thông tin, sau đó lưu trữ dưới dạng một tập hợp danh sách Các file có thể thay đổi theo thời gian.

Tuy nhiên, cách hoạt động và lưu trữ thông tin của GIT lại hoàn toàn khác

Để lưu trữ thông tin, GIT sẽ coi các thông tin là một tập hơn snapshot Đây

là tập hợp toàn bộ ảnh chụp các nội dung của file thông tin tại thời điểm Khi bạn đưa ra các lệnh, git sẽ chụp lại thông tin ở thời điểm đó và tạo ra một snapshot Để nâng cao tính hiệu quả, GIT sẽ không lưu trữ file nếu các tệp không có sự thay đổi Thay vào đó, phần mềm sẽ liên kết dữ liệu tới một tệp giống với file đã được lưu trữ trước đó.

Nhờ vào điểm khác biệt với các VCS này, Git sẽ không tốn nhiều thời gian xem xét các thông tin, các bản giải mã của phiên bản/hệ thống trước THay vào đó, Git nghĩ về dữ liệu khác đi, giúp việc lưu trữ dễ dàng hơn Với cách lưu trữ thông minh này, Git giống như một hệ thống gồm nhiều tệp nhỏ khác nhau.

3.2 Tìm hiểu về ES6

ES6 là chữ viết tắt của ECMAScript 6, là phiên bản mới nhất của chuẩn ECMAScript ECMAScript do hiệp hội các nhà sản xuất máy tính Châu Âu

đề xuất làm tiêu chuẩn của ngôn ngữ Javascript.

ES6 ra đời vào năm 2015 nên cái tên ES2015 được lấy làm tên chính thức với nhiều tính năng mới học hỏi các ngôn ngữ cấp cao khác, hy vọng dần theo thời gian Javascript trở thành một ngôn ngữ lập trình hướng đối tượng.

Chức năng:

 Arrow function:

Arrow là một dạng viết tắt của các function sử dụng dấu =>, tương

tự như trong C#, Java 8,…

Cú pháp căn bản nhất của arrow function như sau: