TTDN Lan2

ĐẠI HỌC QUỐC GIA TP HCM
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN


BÁO CÁO THỰC TẬP

Môn học: Thực tập doanh nghiệp
Giảng viên hướng dẫn: ThS. Đỗ Thị Minh Phụng

Lớp: Thực tập doanh nghiệp – IS502.L11.HTCL
Sinh viên
Nguyễn Minh Nhựt - 17520867
TP Hồ Chí Minh tháng 11 năm 2020

MỤC LỤC
LỜI CẢM ƠN............................................................................................................1
CHƯƠNG 1. GIỚI THIỆU VỀ CÔNG TY..............................................................2
1. GIỚI THIỆU VỀ CÔNG TY.................................................................................2
2. CÔNG NGHỆ SỬ DỤNG.....................................................................................3
3. TUYỂN DỤNG.....................................................................................................3
CHƯƠNG 2. KẾ HOẠCH THỰC TẬP TỪNG TUẦN...........................................5
CHƯƠNG 3. NỘI DUNG THỰC TẬP CÔNG TY..................................................6
1. PHP CORE............................................................................................................6
a. Lambda...............................................................................................................6
b. Clorsure...............................................................................................................7
c. Trait.....................................................................................................................9
2. DESIGN PATTERN............................................................................................12
a. Factory Pattern..................................................................................................12
b. Singleton Pattern...............................................................................................15
c. Prototype Pattern...............................................................................................17
d. Abstract Factory Pattern...................................................................................20
e. Builder Pattern..................................................................................................22
3. LARAVEL...........................................................................................................23
a. Xác thực trong Laravel (Authentication)..........................................................23
b. Phân quyền trong Laravel (Authorization).......................................................24
c. Session trong Laravel........................................................................................24

d. Relationship Eloquent ORM trong Laravel......................................................25
e. Middleware.......................................................................................................25
4. VUEJS.................................................................................................................27
a. Cách cài đặt VueJS...........................................................................................27
b. Cách xử lý giao diện data và method................................................................27
c. Các Directive thông dụng.................................................................................29
d. Phân biệt computed và methods.......................................................................30
e. Component........................................................................................................31
f. Truyền dữ liệu giữa các component..................................................................33
5. VIẾT ỨNG DỤNG API LARAVEL...................................................................36
6. SỬ DỤNG API LARAVEL BẰNG VUEJS.......................................................43
a. Case 1 gợi ý email.............................................................................................43
b. Case 2. Tìm kiếm email bằng ký tự nhập từ bàn phím.....................................46
CHƯƠNG 4. KINH NGHIỆM ĐÁNH GIA BẢN THÂN......................................51

Báo cáo thực tập 15/11/20
LỜI CẢM ƠN
Sau hai tháng em thực tập tại công ty, mọi người trong công ty đã giúp đỡ em rất nhiều, em
cũng học hỏi được khá nhiều kinh nghiệm trong lĩnh vực phát triển ứng dụng web mà lúc trước em
chưa bao giờ biết tới, mở mang khai sáng cho em thêm nhiều kiến thức. Cảm ơn team anh Đôn và các
anh chị đã giúp đỡ em trong thời gian thực tập, đặc biệt là trainer thầy Phan Thanh Nhuần đã giúp em
trong thời gian thực tập rất nhiều, thầy bám sát tiến độ thực tập tiến độ của em, chỉ ra những điểm em
còn thiếu sót trong quá trình thực tập. Thực sự qua kì thực tập em cảm thấy mình trưởng thành nhiều
hơn, và có nhiều kinh nghiệm. Em cảm ơn quý công ty rất nhiều!
Em xin cảm ơn cô Đỗ Thị Minh Phụng – giảng viên đã hướng dẫn em viết báo cáo thực tập
trong thời gian vừa qua.
Xin chân thành cảm ơn cô, thầy cùng quý anh chị trong công ty!
Nguyễn Minh Nhựt
Thực tập doanh nghiệp

Giáo viên hướng dẫn: ThS. Đỗ Thị Minh Phụng Trang | 1
CHƯƠNG 1. GIỚI THIỆU VỀ CÔNG TY

1. GIỚI THIỆU VỀ CÔNG TY
 Địa chỉ website của công ty: https://lampart-vn.com/vi/
Hình 1.1 Hình ảnh website công ty

 Địa chỉ công ty: Tầng 12, tòa nhà An Phú 117 – 119 Lý Chính Thắng, phường 7, quận 3,
TP.HCM.
Hình 1.2 Google map địa điểm doanh nghiệp

 Điện thoại: (+84 0) 28-3990-3296 hoặc (+84 0) 28-3990-3297
 Fax: (+84 0) 28-3620-1378

 Thời gian làm việc: Thứ 2 đến thứ 6 (8:00 đến 17:00)
 Ngày thành lập công ty: 26/11/2012
 Đối tác chính: Wakka Inc Co.,Ltd.
2. CÔNG NGHỆ SỬ DỤNG
 Một số công nghệ mà công ty sử dụng
Hình 1.3 Các công nghệ mà công ty sử dụng trong dự án

 Tiêu chuẩn tuyển dụng của công ty: Nhìn chung, lợi điểm của việc outsource là giảm chi phí
sản xuất. Tuy nhiên, điều đó có trở ngại là chất lượng sản phẩm bị giảm sút, chủ yếu là do
hai nguyên nhân:Nhân sự thiếu năng lực và rào cản ngôn ngữ làm giảm tốc độ, từ khâu đọc
hiểu tài liệu đến khâu phát triển.
Để cải thiện nhược điểm đó, phía công ty chúng tôi đang áp dụng các tiêu chuẩn tuyển dụng
như sau:
Tuyển dụng kỹ sư cầu nối BSE không chỉ dựa vào trình độ tiếng Nhật mà còn đánh giá vào
kinh nghiệm làm việc tại Nhật và kinh nghiệm thực tế tham gia phát triển hệ thống.
Chúng tôi chỉ tuyển dụng những kỹ sư lập trình ưu tú có năng lực kỹ thuật đã qua được bài
test nghiêm ngặt và vòng phỏng vấn trực tiếp.
 Ngoài ra công ty còn sử dụng một số công nghệ mới như: Laravel, VueJS, AgularJS, ReactJS
3. TUYỂN DỤNG
 Công ty đang tuyển dụng rất nhiều vị trí
 Đường dẫn đến trang web tuyển dụng: https://lampart-vn.com/vi/recruit/

Hình 1.4 Tất cả vị trí công ty đang tuyển dụng

CHƯƠNG 2. KẾ HOẠCH THỰC TẬP TỪNG TUẦN

Tuần Kế hoạch thực tập từng tuần
1  Sinh hoạt giới thiệu về công ty
7/9/2020 – 13/9/2020  Sinh hoạt setup môi trường làm việc
 PHP Syntax
 PHP OOP
 PHP Exceptions
2  PHP Lambda
14/9/2020 – 20/9/2020  PHP Trait
 PHP Clorsue
 PHP Unit Test (K6.io)
 PHP package
3  Design Pattern (Nhóm khởi tạo)
21/9/2020 – 27/9/2020  Design Pattern (Nhóm cấu trúc)
4  Design Pattern (Nhóm hành vi)
28/9/2020 – 4/10/2020  Cài đặt Laravel
5  Tìm hiểu về Eloquent ORM trong Laravel
5/10/2020 – 11/10/2020
6  Tìm hiểu về Eloquent ORM trong Laravel
12/10/2020 – 18/10/2020  Database
 Migration
 Seeding
7  Phân quyền xác thực trong Laravel
19/10/2020 – 25/10/2020  Viết API đăng nhập
8  Tìm hiểu framework VueJS
26/10/2020 – 1/11/2020
9  Tìm hiểu frame VueJS
2/11/2020 – 7/11/2020  Demo cuối kì thực tập

CHƯƠNG 3. NỘI DUNG THỰC TẬP CÔNG TY

1. PHP CORE
a. Lambda
 Các hàm lambda là các hàm ẩn danh (anonymous function), sử dụng một lần, có thể
được định nghĩa vào bất cứ lúc nào, và thường gắn với một biến hoặc gán vào 1 hàm
khác như một tham số . Các hàm này chỉ tồn tại trong phạm vi của biến mà nó được
định nghĩa, vì vậy khi biến đó vượt ra ngoài phạm vi, thì hàm này cũng không còn
nữa.
 Hàm Lamda là một hàm không có tên và ẩn danh
 Ví dụ về một hàm lamda
// Hàm thường
function helloWorld()
{
return "Hello world";
}
// Hàm Lambda
function ()
{
}
 Sử dụng hàm lamda: Bởi vì các hàm này không có tên, chúng ta không thể gọi nó
như một chức năng thường xuyên. Thay vào đó ta phải gán nó vào một biến hoặc cho
vào 1 hàm khác khác như là một tham số.
 Cách sử dụng
// Hàm bình thường

echo helloWorld();
// "Hello world"
// Hàm ẩn danh
// gán cho 1 biến
$hello = function () {
}
// gọi hàm ẩn danh

echo $hello();
// "Hello world"

 Tại sao sử dụng lamda: Lambdas rất hữu dụng, bởi vì chúng ta không cần phải tạo
hẳn 1 hàm cho 1 lần sử dụng duy nhất.
 Thông thường, chúng ta sẽ cần một hàm để làm một công việc, nhưng nó không có
nghĩa là chúng ta sẽ dùng nó trong phạm vi global. Thay vì có một hàm sử dụng một
lần và sau đó bỏ đi để nó ở đó, chúng ta có thể sử dụng một Lambda để thay thế.
 Tất nhiên, chúng ta có thể sử dụng chức năng create_function trong PHP. Điều
này về cơ bản là giống nhau:
 Create_function trong PHP
b. Clorsure
 Closure là một class sử dụng anonymous function, nói cách khác Closure về cơ
bản giống hàm nặc danh, ngoài ra nó có thể truy cập các biến bên ngoài phạm
vi mà nó tạo ra. Closure đóng gói phạm vi của nó, nó không có quyền truy
nhập vạo phạm vi mà nó được định nghĩa hoặc thực hiện. Nó có thể kế thừa
các biến từ phạm vi cha (nơi closure được định nghĩa) vào closure với từ khóa
use.
 Ví dụ minh họa:
Hình 3.1 Hàm Lambda

 Nếu chúng ta thay đổi biến $user ban đầu trong Closure, nó sẽ không ảnh
hưởng đến các biến ban đầu. Để cập nhật các biến ban đầu, chúng ta có thể
thêm một

dấu &. Một dấu & trước một biến có nghĩa đây là một reference và vì vậy các
biến ban đầu cũng được cập nhật.
Hình 3.2 Hàm Lambda sử dụng use = Clorsure

 Closure cũng rất hữu ích khi sử dụng các hàm PHP mà chấp nhận hàm call
back như array_map, array_filter, array_reduce hoặc array_walk.
Hình 3.3 Hàm array_walk() trong clorsure

 Ứng dụng trong framework laravel
Hình 3.4 Ứng dụng trong framework laravel để viết Route

c. Trait
 PHP hay Ruby đều là những ngôn ngữ hướng đối tượng chỉ hỗ trợ single
inheritance(đơn kế thừa). Để khắc phục những giới hạn của đơn kế thừa trong
việc sử dụng lại source code, từ PHP 5.4 trở đi PHP hỗ trợ Traits là cơ chế
giúp cho lập trình viên có thể sử dụng lại các phương thức từ các class khác
nhau một cách dễ dàng hơn. Một trait tương tự như là 1 class nhưng chỉ nhằm
mục đích nhóm chức năng lại. Và trait không thể khởi tạo giống class và trait
sinh ra để bổ sung cho kế thừa truyền thống. Thay vì phải kế thừa 1 class hay
interface để sử dụng lại 1 nhóm chức năng, thì với trait bạn không cần phải kế
thừa vẫn có thể sử dụng được
 Đọc xong khái niệm chắc còn mơ hồ lắm đúng không nào. Ok, chúng ta tìm
hiểu cách sử dụng Trait qua các ví dụ sau đây nhé:
 Giả sử có ví dụ minh họa sau đây:
Hình 3.5 Ví dụ minh họa trường hợp Trait

 Nếu ta muốn sử dụng lại method listUsers trong class Database cho class Users hoặc
class Report thì làm thế nào ? Trong trường hợp này thì chắc chắn các bạn sẽ nghĩ
đến từ khóa extends đúng không? Và sẽ viết như thế này:
 Dùng trait để tối ưu code trong lớp

 Qua ví dụ này chúng ta thấy không cần extends nhưng chúng ta vẫn sử dụng được
các method listUsers() ở các class như : Users, Report
 Sử dụng nhiều trait cùng một lúc
 Xử lý trường hợp 2 trait có chung tên hàm

2. DESIGN PATTERN
 Trang web tham khảo 34 Design Pattern và học design nổi tiếng:
https://refactoring.guru/design-patterns
 Tại sao phải chọn Design Pattern: Mục tiêu chính của việc chọn design Pattern là tối
ưu hóa code và có tính tái sử dụng.
a. Factory Pattern
 Định nghĩa: Factory Pattern thuộc nhóm khởi tạo (Creational Pattern)
 Nhiệm vụ chính: của Factory Pattern là quản lý và trả về các đối tượng theo
yêu cầu, giúp cho việc khởi tạo đổi tượng một cách linh hoạt hơn.
 Giải quyết vấn đề tạo một đối tượng mà không cần thiết chỉ ra một cách
chính xác lớp nào sẽ được tạo.
 Sử dụng Factory Pattern trong trường hợp nào?
o 1. Tạo ra một cách mới trong việc khởi tạo các object thông qua một
interface chung
o 2. Bao gói được quá trình khởi tạo object, giấu đi được xử lý logic
của việc khởi tạo
o 3. Giảm sự phụ thuộc giữa các module, logic với các class cụ thể mà
chỉ phụ thuộc với interface hoặc abstract class.
Hình 3.6 Hình minh họa Factory Pattern

Hình 3.7 Mô hình UML Factory Pattern

 Chương trình minh họa
o <interface> Shape
o Lớp Circle
o Lớp Square

o Lớp Rectangle
o Lớp ShapeFactory đóng vai trò như một nhà máy để tạo ra các Shape
 Hàm main()

 Kết quả chương trình
b. Singleton Pattern
 Đôi khi, trong quá trình phân tích thiết kế một hệ thống, chúng ta mong muốn
có những đối tượng cần tồn tại duy nhất và có thể truy xuất mọi lúc mọi nơi.
Làm thế nào để hiện thực được một đối tượng như thế khi xây dựng mã nguồn?
Chúng ta có thể nghĩ tới việc sử dụng một biến toàn cục (global variable :
public static final). Tuy nhiên, việc sử dụng biến toàn cục nó phá vỡ quy tắc của
OOP (encapsulation). Để giải bài toán trên, người ta hướng đến một giải pháp
là sử dụng Singleton pattern.
 Singleton Pattern thuộc nhóm mẫu thiết kế khởi tạo. Mẫu thiết kế phần mềm để
hạn chế sự khởi tạo của lớp đối tượng
 Đặc điểm của Singleton Pattern
1. Hàm constructor của SingletonObject PHẢI là Private
2. Giá trị biến static instance PHẢI là Private

3. Chỉ có một phương thức public static để return instance được khởi tạo ở
trên.
 Sử dụng khi nào?
o Vì class dùng Singleton chỉ tồn tại 1 Instance (thể hiện) nên nó
thường được dùng cho các trường hợp giải quyết các bài toán cần
truy cập vào các ứng dụng như: Shared resource, Logger,
Configuration, Caching,
Thread pool, …
o Một số design pattern khác cũng sử dụng Singleton để triển khai:
Abstract Factory, Builder, Prototype, Facade,…
o Đã được sử dụng trong một số class của core java như:
java.lang.Runtime, java.awt.Desktop.
 Chương trình minh họa:
o Lớp Single Object
o Hàm Main

 Kết quả chạy chương trình
c. Prototype Pattern
 Khi tạo một đối tượng mới các thuộc tính của đối tượng chưa được khởi tạo,
ngoại trừ trường hợp default hoặc được khởi tạo trong trong constructor. Tuy
nhiên chúng ta có một cách tha vì tạo một đối tượng mới thi ta muốn sao chép
một đối tượng đã tồn tại chúng ta có thể làm được điều này khi implements
theo Proptotype Pattern.
 Pattern này cung cấp một trong những cách tốt nhất để tạo ra một đối tượng
thay vì tạo ra Object bằng từ khóa new, Prototype pattern sử dụng việc cloning
(copy nguyên mẫu của Object).
o Khi việc tạo một object tốn nhiều chi phí và thời gian trong khi bạn đã có một
object tương tự tồn tại.
o Khi copy từ object ban đầu sang object mới và thay đổi giá trị một số thuộc
tính nếu cần
 Hình minh họa

 Chương trình minh họa

o HTMLBookPrototype

o PHPBookPrototype
o SQLBookPrototype
o BookPrototype

o Kết quả chạy chương trình
d. Abstract Factory Pattern

 Abstract Factory là một mẫu thiết kế thuộc nhóm khởi tạo cho phép tạo ra họ
các đối tượng liên quan mà không cần chỉ định các lớp cụ thể của chúng.
 Nó là phương pháp tạo ra một Super-factory dùng để tạo ra các Factory khác.
Điều này có nghĩa là một nhà máy lớn tạo ra các nhà máy con và mỗi nhà máy
con tạo ra một object con
 Trong Abstract Factory một interface có nhiệm vụ tạo ra một Factory của các
object liên quan tới nhau mà không cần tạo trực tiếp các class của Object đó.
Mỗi Factory được tạo ra có thể tạo ra các object bằng phương pháp GIỐNG
NHƯ Factory Pattern.
 Vấn đề
 Giả lập một của hàng nội thất gồm những lớp sau đây:
o Danh sách những sản phẩm nội thất là các class: Chair, Sofa, CoffeeTable
o Mỗi loại nội thất có các biến thể khác nhau như
là: Mordern, Victorian, ArtDeco

 Vấn đề ở đây là làm sao: có cách để tạo ra các đồ vật nội thất riêng lẻ để
chúng phù hợp với các đồ vật khác trong cùng một gia đình.
 Hơn nửa bạn không muốn thay đổi code hiện tại khi thêm một sản phẩm
mới trong chương trình, hoặc là các nhà cung cập nội thất không muốn
thay đổi core code xảy ra nhiều lần

e. Builder Pattern
 Builder Pattern là một mẫu thiết kế thuộc nhóm khởi tạo. Mẫu thiết kế này cho
phép lập trình viên tạo ra những đối tượng phức tạp nhưng chỉ cần thông qua
các câu lệnh đơn giản để tác động nên các thuộc tính của nó
 Các hàm constructor trong một class có thể lấy các tham số truyền vào param
vấn đề đối tượng có rất là nhiều param giả sử đến hàng chục param
1. Một số tham số là tùy chọn và một số tham số là bắt buộc
2. Chúng ta có thể viết nhiều constructor theo từng trường hợp những trường
không bắt buộc thì gán NULL. Tuy nhiên việc này khó đọc, nhiều constructor
nếu tham số lớn, khó đọc, khó bảo trì, chương trình chạy chậm,
 Vì vậy, người ta mong muốn giao công việc này cho một đối tượng chịu trách
nhiêm khởi tạo và chia việc khởi tạo đối tượng riêng lẽ, từng bước, để có thể
tiến hành khởi tạo riêng biệt ở các hoàn cảnh khác nhau. Và giải pháp được đưa
ra là sử dụng Builder Pattern như một người xây dựng.

Muốn thay đổi thiết kế cho việc lồng nhau của các hàm khởi tạo (Telescoping
Constructor Pattern). Vấn đề này phát sinh khi lập trình viên làm việc với một
lớp mà có chứa rất nhiều các thuộc tính và cần phải tạo ra nhiều hàm khởi tạo
với số lượng các thuộc tính tăng dần.
Khi cần tạo ra một đối tượng phức tạp, một đối tượng mà thuật toán để tạo tạo
lập các thuộc tính là độc lập đối với các thuộc tính khác.
3. LARAVEL
a. Xác thực trong Laravel (Authentication)
 Thư mục chứa Authentication: Thư mục config/auth.php

 Authentication: Là một cơ chế xác thực người dùng mà laravel cài đặt
 Trong Authentication có hai loại chính: Guard và Provieder và được định
nghĩa như bên hình
 Phân loại nhóm Authentication

 Một số hàm trong Authentication
o $user = Auth::user();
o$id = Auth::id();
o$check = Auth::check();
o Ham Logout ví dụ minh họa
 $taikhoan = Auth::check(); //TRUE
 $taikhoan = Auth::logout();
 $taikhoan = Auth::check(); // FALSE
b. Phân quyền trong Laravel (Authorization)
 Authorization là cơ chế phân quyền người dùng trong laravel
 Laravel cung cấp hai cách cơ bản cho việc phân quyền người dùng: Gate và Policy
c. Session trong Laravel
 Khi đăng nhập tài khoản sẽ được lưu tự động vào SESSION_DRIVER mà ta tùy
chọn ở đây SESSION_DRIVER có thể là ['file','database','redis',. ]
 Mặc định set biến môi trường của SESSIONS nằm trong file .env
 Mặc định Session trong laravel sẽ được lưu trong file

o Các cài đặt cho session sẽ được cài trong config/session.php

o Session của người dùng đăng nhập sẽ lưu trong storage/framework/sessions
 Ví dụ: a:3:
{s:6:"_token";s:40:"l9XoKsT4SNc6HNW18E8kfdXn1ZMKuhfKxiO8Xrs4";s:6:
"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}s:9:"_previous";a:1:{s:3:"url";s:44:"ht
tp://laravel-7x.local/Project7x_new/public";}}
 Ngoài ra còn có thể lưu SESSION trong database hoặc Redis
d. Relationship Eloquent ORM trong Laravel
e. Middleware
 Middleware là giải pháp lọc HTTP Request, Middle định nghĩa request được chấp
nhận hay không.
 Trong Laravel có rất nhiều middle ware được định nghĩa sẵn như là: Tất cả các
Middleware được dựng trong thư mục app/HTTP/middleware.

 Tạo mới một Middleware:

php artisan make:middleware <Tên Middleware>
 Viết Logic Laravel
o Bước 1: Để viết logic một middleware ta vào app/HTTP/middleware
o Bước 2: Viết Logic trong hàm handle của middleware đó
o Bước 3: Đăng kí Middleware trong app/HTTP/kernel.php
 Sử dụng Logic Middleware
Bằng cách sử dụng Route:

Route::[Put/GET/.....]('<tên route>',function(){})->middleware(['tên
middleware1','tên middleware2',.. . .,'tên middlewareN'])
Bằng cách viết trong Controller
4. VUEJS
 VueJS là một framework dùng để xây dựng giao diện người dùng
 Trang gốc vuejs: https://vuejs.org/
 VueJS được thiết kế để cho phép người dùng thiết kế từng bước
o Xây dựng <template>
o Xây dựng <script>
o Xây dựng <style>
 Dễ học, dễ sử dụng, cấu trúc quá phức tạp
 Tích hợp nhiều thư viện có sẵn và kèm theo
a. Cách cài đặt VueJS
 Cài đặt VueJS bằng CDN bằng các câu lệnh sau đây
<script
src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
 Cài đặt bằng npm
# latest stable
$ npm install vue
 Cài đặt bằng CLI

Bước 1: npm install -g @vue/cli
Bước 2: vue create my-project
b. Cách xử lý giao diện data và method
Cấu trúc một đoạn xử lý vuejs

 Data là nơi chứa dữ liệu, biến để xử lý

 Methods và computed là nơi dùng để viết hàm xử lý trên giao diện
Ví dụ 1: Về data và method
 File JS sử dụng vue
 File HTML sử dụng data trả về
 Kết quả chạy

c. Các Directive thông dụng
• Trong VueJS thường sử dụng những directive hay còn gọi là các thành phần trong
VueJS những thành phần này bắt đầu bằng v-
• Tiếp theo sao là những thuộc tính cài đặt sẵn
 Ví dụ v-bind:href
 Ví dụ v-bind:style
• Các thành phần hậu tố Regex
• Directive v-bind
 Cú pháp mustache không dùng được bên trong các thuộc tính HTML. Thay
vào đó, bạn hãy dùng directive v-bind:
 Ví dụ <a href={{link}}> </a>  ERROR
 Để hỗ trợ được công việc đó trong VueJS hỗ trợ Directive v-bind
 Cách sử dụng đúng <a v-bind:href= “link“></a>
 Một số v-bind thông dụng:
 Thuộc tính v-bind:href cho phép ta thêm đường dẫn URL
 Thuộc tính v-bind:style Cho phép ta định dạng style bằng VueJS
 Thuộc tính v-bind:id cho phép sử dụng thuộc tính id trong VueJS
 Tác dụng của việc sử dụng của những thẻ này cho phép ta sử
dụng thuộc tính dynamic (thuộc tính động)
 Directive v-bind:<Atrr> có thể viết tắt là :<Attr>
• Directive v-if, v-else
 Directive v-if là Dùng để kiểm tra điều kiện của một câu lệnh
 Syntax v-if

• Directive v-for
 Dùng để render danh sách, một số tài tiếng anh gọi là map danh sách.
 Directive v-for mapping danh sách dựa trên một mảng
 Cú pháp duyệt mảng v-for như sau item in items
• Directive v-on
 Thể hiện bậc một sự kiện
 Syntax
<tag v-on:<Event> = “func"></tag>
d. Phân biệt computed và methods
• Computed
• Methods
 Bảng so sánh computed và methods

 Ví dụ minh họa về sự khác biệt của hai cách tiếp cận này là:
Ví dụ cho hai số a + b thực phép toán cộng trước rồi hai số a và b thuộc một lớp Vue
chung với Computed và Methods, giả sử ta nhập số c thì kết quả phép tính cộng a + b +
c bằng computed sẽ dùng kết quả đã tính a + b bên trên để đưa ra kết quả là 11 số lần
chạy là 1, còn cách tiếp cận methods sẽ tính lại 3 + 2 rồi mới tiếp cộng số c điều này sẽ
xảy ra 2 lần chạy.
e. Component
 Component được xem như là một phần mạnh mẽ nhất của VueJS.
 Component giúp chúng ta gom code HTML thành một để tái sử dụng. Ở một mức độ
cao thì component là một thành phần được Vue.js biên dịch để xử lý các hành vi

 Cách khai báo một component

o Cách tiếp cận CDN được viết trong một file .js
o Cách tiếp cận CLI bằng một file .vue

<template></template>
<script></script>
<style></style>
 Ví dụ về component
File JS

File HTML
f. Truyền dữ liệu giữa các component

 Truyền dữ liệu từ cha sang con
Trình tự truyền dữ liệu từ thành phần cha sang thành phần con. Đầu tiên nhập mã và
nhập chuỗi lưu vào v-model với data là mamau và text. Dữ liệu nhập vào sẽ lưu vào
v-model mamau và text

Mỗi lần mã màu thay đổi thì được gán theo dạng CSS color màu vào biến styleapp.
Ví dụ người dùng nhập 999fff thì hàm getMau: _.debounce() có chức năng xử lý biến
this.styleapp = “color:” + “#” + this.mamau. Sau khi câu lệnh này thực hiện xong
styleapp sẽ được kết quả “color:#999fff”
Component được định nghĩa style bằng biến stylemin, và dữ liệu hiển thị ra viết dưới
biến {{dataheader}}
Component <lp-header> định nghĩa mapping biến text vào thuộc tính “dataheader” và
biến styleapp vào thuộc tính “stylemin”.
Kết quả như hình minh họa

 Truyền dữ liệu từ con sang cha

Một component cho trước tên là blog-post
Đối tượng Vue Object

Nút phong to gửi sự kiện bằng $emit() vào một biến enlarge-text. Sau mỗi lần nhấn nút
phóng to thì postFontSize thuộc tính tăng lên 0.1 và sẽ truyền lên thuộc tính fontSize.
5. VIẾT ỨNG DỤNG API LARAVEL
 Mô tả vấn đề: CSDL chứa danh sách một loạt các email có đuôi domain là
@gmail.com, @yahoo.co.jp @yahoo.com @lampart-vn.com.
 Danh sách domain được lưu vào CSDL
 Lược đồ CSDL đơn giản như sau:
EMAIL (ID, EMAIL)
DOMAIN (ID, DOMAIN)
 Cài đặt CSDL bằng Laravel bằng chức năng Migration mà laravel dựng sẵn như
sau:
Migration bảng Domain
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class Domains extends Migration

{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('domains', function (Blueprint $table) {
$table->increments('id');
$table->string('domain')->unique();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('domains');
}
}
Migration bảng Email
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;
class Email extends Migration

{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('email', function (Blueprint $table) {
$table->increments('id');
$table->string('email')->unique();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('email');
}
}
Tạo dữ liệu bảng Domain gồm 4 loại domain
<?php

use Illuminate\Database\Seeder;
use App\Domain;
class DomainSeeder extends Seeder

{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
Domain::insert([
['domain' => '@gmail.com'],
['domain' => '@yahoo.co.jp'],
['domain' => '@yahoo.jp'],
['domain' => '@lampart-vn.com'],
]);
}
}
Tạo Factory Pattern Email
<?php
/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Email;
use Faker\Generator as Faker;
$factory->define(Email::class, function (Faker $faker) {

$domains = array("@gmail.com", "@lampart-vn.com", "@yahoo.jp", "@yahoo.co.jp");
$randomDomain = rand(0, count($domains)-1);
return [
'email' => preg_replace('/@example\..*/', $domains[$randomDomain], $faker->unique()-
>safeEmail),
];
});
Tạo 90 Email bằng Factory vừa tạo
<?php
use Illuminate\Database\Seeder;
class EmailSeeder extends Seeder

{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
factory(App\Email::class)->times(90)->create();
}
}
Tạo route API để ứng dụng bên ngoài có thể nhận được:

<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
/*
|
| API Routes
|
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::middleware('auth:api')->get('/user', function (Request $request)

{ return $request->user();
});
Route::get('getdomain','Api\DomainController@getDomain')->name('domain.getdomain');
Route::get('getemail/{nameMail?}','Api\DomainController@getEmail')->name('mail.getemail');
Viết Controller Domain để xử lý từng route
<?php
namespace App\Http\Controllers\Api;
use App\Domain;
use App\Email;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class DomainController extends Controller

{
/*
* getDomain() get All Domain from Database
* return domain_collection
*/
public function getDomain()
{
$domainCollection = Domain::all()->pluck('domain');
return $domainCollection;
}
/*
* getEmail() get All Email from Database
* return emailCollection
*/
public function getEmail($nameMail= null)
{
if(empty($nameMail))
{
$emailCollection = Email::all()->pluck('email');
}
else{
$emailCollection = Email::where('email', 'like',$nameMail.'%')->get()->pluck('email');
}
return $emailCollection;
}
}

6. SỬ DỤNG API LARAVEL BẰNG VUEJS

a. Case 1 gợi ý email
 Viết giao diện VueJS để lấy API từ laravel về
 Giao diện đơn giản khi người dùng nhập abc combobox sẽ gọi API lấy các
domain có sẵn trong database bằng việc gợi ý những domain có sẵn:
 Source code giao diện xử lý

<template>
<v-card>
<v-container fluid>
<h2>Demo Email/Domain</h2>
<v-row align="center">
<v-col cols="4">
<v-autocomplete
v-model="valueCase3"
:items="items"
:search-input.sync="search"

@blur="getAutocomplete()"
outlined
dense
hide-no-data
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script>
import _ from "lodash";
import axios from "axios";
export default {
name: "HelloWorld",
data: () => ({
post: [],
valueCase3: null,
answer: "",
search: null,
items: []
}),
watch:
{ search(
){
if (this.search != null) {
this.getEmail();
}
}
},
mounted() {
this.getData();
},
methods: {
getData: function()
{ var vm = this;
axios
.get("http://127.0.0.1:8000/api/getdomain")
.then(function(response)
{ response.data.forEach(element => {
vm.post.push(element);
});
})
.catch(function(error) {
vm.answer = "ERROR. " + error;

});
},
getAutocomplete: function()
{ this.valueCase3 = this.search;
this.items.push(this.valueCase3);
},
getEmail:
_.debounce( function()
{
if (this.search.indexOf("@") !== -1) {

if (this.search.substr(-1) === "@")
{ this.items = [];
this.post.forEach(element => {
this.items.push(this.search + element.slice(1));
});
}
} else
{ this.items =
[];
}
},
// Đây là thời gian (đơn vị mili giây) chúng ta đợi người dùng dừng gõ.
500
)
}
};
</script>
b. Case 2. Tìm kiếm email bằng ký tự nhập từ bàn phím
 Giao diện đơn giản khi người dùng nhập a combobox sẽ gọi API lấy các
email bằng chữ a có sẵn trong database bằng việc gợi ý những domain có sẵn:
 Source code

<template>
<v-card>
<v-container fluid>
<v-row
align="center"
>
<v-col cols="12">
<v-autocomplete
v-model="value"
:items="emailArray"
dense
filled
label="email"
:search-input.sync="search"
></v-autocomplete>
</v-col>
<v-col cols="12">
<v-autocomplete
v-model="value_domain"
:items="email_domainArray"
dense
filled
label="domain"
:search-input.sync="search_domain"
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-card>
</template>

<script>
import _ from 'lodash'
import axios from 'axios'
export default {
name:
'HelloWorld', data:
() =>
({ emailArray: [],
value:'',
search:null,
value_domain:'',
search_domain:null,
email_domainArray:[],
domainArray:[],
}),
watch:{ search()
{
this.debouncedGetEmail();
},
search_domain(){
if (this.search_domain.indexOf('@') !== -1) {
if(this.search_domain.substr(-1)==='@')
{ this.email_domainArray = [];
this.domainArray.forEach(element => {
this.email_domainArray.push(this.search_domain + element.domain.slice(1));
});
}
}
else {
this.email_domainArray=[];
}
}
},
created: function () {
this.debouncedGetEmail = _.debounce(this.getEmail, 100);
this.getDomain();
},
methods: {
getEmail: function ()
{ const self = this;
axios.get('http://127.0.0.1:8000/api/getemail/'+this.search)
.then(function (response) {//self.emailArray=[];-->
response.data.forEach(element => {
self.emailArray.push(element);
});
}).catch(function (error) {
console.log(error);
})
},
getDomain:function ()
{ const self = this
axios.get('http://127.0.0.1:8000/api/getdomain')
.then(function (response)
{ self.domainArray = response.data;
})
.catch(function (error) {

console.log(error);
})
}
}
}
</script>

CHƯƠNG 4. KẾT QUẢ, KINH NGHIỆM ĐÁNH GIA BẢN THÂN

Kết quả đạt được sau kì thực tập:
 Kết quả lý thuyết: Có vốn lý thuyết mở mang hơn về framework laravel và vuejs,
có kho tài liệu lý thuyết, có kiến thức cơ bản về luồng chạy của laravel và biết cách
kiểm soát code, rule code trong công ty, thực hành hỗ trợ công ty tùy biến các chức
năng.
 Kết quả thực hành: Viết một trang web lý thuyết demo hướng dẫn chi tiết về
framework VueJS, điều chỉnh chức năng mà công ty yêu cầu, tự đưa ra test case mà
chức năng mình viết.
 Kết quả về kỹ năng: Hiểu hơn về framework, cách thức hoạt động của trang web, kỹ
năng giao tiếp ứng xử, thuyết trình, kỹ năng học hỏi và sẵn sàng đưa ra ý kiến cá
nhân phục vụ cho công ty, rèn luyện thêm kỹ năng đọc hiểu tài liệu tiếng anh, kỹ
năng tìm kiếm tài liệu.
Những kinh nghiệm, đánh giá bản thân đạt được trong thực tập doanh nghiệp mang lại:
 Vững hơn kiến thức chuyên môn, kiến thức phục vụ cho nghành.
 Có khả năng giao tiếp, thuyết trình.
 Được tiếp xúc với dự án thực tế, những task khó thử thách bản thân.
 Có khả năng quản lý công việc, quản lý thời gian đúng hạn.
 Tiếp xúc thực tế với môi trường công ty, doanh nghiệp.
 Học hỏi được cách làm việc của các anh chị đi trước để rút kinh nghiệm cho bản
 Trưởng thành hơn trong công việc, ý tưởng, suy nghĩ



TTDN Lan2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TTDN Lan2

Uploaded by

Copyright:

Available Formats

ĐẠI HỌC QUỐC GIA TP HCM

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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

Giảng viên hướng dẫn: ThS. Đỗ Thị Minh Phụng

TP Hồ Chí Minh tháng 11 năm 2020

CHƯƠNG 1. GIỚI THIỆU VỀ CÔNG TY..............................................................2

1. GIỚI THIỆU VỀ CÔNG TY.................................................................................2

2. CÔNG NGHỆ SỬ DỤNG.....................................................................................3

CHƯƠNG 2. KẾ HOẠCH THỰC TẬP TỪNG TUẦN...........................................5

CHƯƠNG 3. NỘI DUNG THỰC TẬP CÔNG TY..................................................6

d. Abstract Factory Pattern...................................................................................20

a. Xác thực trong Laravel (Authentication)..........................................................23

b. Phân quyền trong Laravel (Authorization).......................................................24

c. Session trong Laravel........................................................................................24

a. Cách cài đặt VueJS...........................................................................................27

b. Cách xử lý giao diện data và method................................................................27

c. Các Directive thông dụng.................................................................................29

d. Phân biệt computed và methods.......................................................................30

f. Truyền dữ liệu giữa các component..................................................................33

5. VIẾT ỨNG DỤNG API LARAVEL...................................................................36

6. SỬ DỤNG API LARAVEL BẰNG VUEJS.......................................................43

a. Case 1 gợi ý email.............................................................................................43

b. Case 2. Tìm kiếm email bằng ký tự nhập từ bàn phím.....................................46

CHƯƠNG 4. KINH NGHIỆM ĐÁNH GIA BẢN THÂN......................................51

Nguyễn Minh Nhựt

Thực tập doanh nghiệp

CHƯƠNG 1. GIỚI THIỆU VỀ CÔNG TY

Hình 1.1 Hình ảnh website công ty

Hình 1.2 Google map địa điểm doanh nghiệp

Thực tập doanh nghiệp

Hình 1.3 Các công nghệ mà công ty sử dụng trong dự án

Thực tập doanh nghiệp

Hình 1.4 Tất cả vị trí công ty đang tuyển dụng

Thực tập doanh nghiệp

CHƯƠNG 2. KẾ HOẠCH THỰC TẬP TỪNG TUẦN

Thực tập doanh nghiệp

CHƯƠNG 3. NỘI DUNG THỰC TẬP CÔNG TY

// Hàm bình thường

// gọi hàm ẩn danh

Thực tập doanh nghiệp

Hình 3.1 Hàm Lambda

Thực tập doanh nghiệp

Hình 3.2 Hàm Lambda sử dụng use = Clorsure

Hình 3.3 Hàm array_walk() trong clorsure

Hình 3.4 Ứng dụng trong framework laravel để viết Route

Hình 3.5 Ví dụ minh họa trường hợp Trait

Thực tập doanh nghiệp

 Dùng trait để tối ưu code trong lớp

Thực tập doanh nghiệp

 Xử lý trường hợp 2 trait có chung tên hàm

Thực tập doanh nghiệp

Hình 3.6 Hình minh họa Factory Pattern

Thực tập doanh nghiệp

Hình 3.7 Mô hình UML Factory Pattern

Thực tập doanh nghiệp

Thực tập doanh nghiệp

 Kết quả chương trình

Thực tập doanh nghiệp

Thực tập doanh nghiệp

 Kết quả chạy chương trình

Thực tập doanh nghiệp

 Chương trình minh họa

Thực tập doanh nghiệp