Tìm hiểu angularjs framework và xây dựng single page site ( website bán điện thoại trực tuyến)

Khái niệm Angular là một Javascript Framework có cấu trúc cho các ứng dụng web động dynamic web app, nó thường được sử dụng để tạo ra các ứng dụng một trang Single Page Application - SP

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

TÌM HIỂU ANGULARJS FRAMEWORK VÀ XÂY DỰNG SINGLE PAGE SITE ( WEBSITE BÁN

ĐIỆN THOẠI TRỰC TUYẾN)

GVHD: TRƯƠNG THỊ NGỌC PHƯỢNG SVTH: ĐOÀN XUÂN HÙNG

MSSV: 15110219 SVTH: PHẠM MINH KẾ MSSV: 15110226

SKL 0 0 5 7 5 8

- -

Đề Tài:

TÌM HIỂU ANGULARJS FRAMEWORK VÀ XÂY DỰNG

SINGLE PAGE SITE

(WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN)

KHÓA LUẬN CHUYÊN NGÀNH KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

KHÓA 2015 - 2019

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

ThS TRƯƠNG THỊ NGỌC PHƯỢNG ĐOÀN XUÂN HÙNG: 15110219 PHẠM MINH KẾ: 15110226

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

- -

ĐOÀN XUÂN HÙNG: 15110219

PHẠM MINH KẾ: 15110226

Đề Tài:

TÌM HIỂU ANGULARJS FRAMEWORK VÀ XÂY DỰNG

SINGLE PAGE SITE

(WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN)

KHÓA LUẬN CHUYÊN NGÀNH KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN ThS TRƯƠNG THỊ NGỌC PHƯỢNG

KHÓA 2015 - 2019

Tp Hồ Chí Minh, ngày 15 tháng 7 năm 2019

Giáo viên hướng dẫn

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

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Đoàn Xuân Hùng MSSV 1: 15110219

Họ và tên Sinh viên 2: Phạm Minh Kế MSSV 2: 15110226

Ngành: Công Nghệ Thông Tin

Tên đề tài: Tìm hiểu Angularjs framework và xây dựng Single Page Site (Website bán điện thoại trực tuyến)

Họ và tên Giáo viên hướng dẫn: Trương Thị Ngọc Phượng

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện

 Lý thuyết: tìm hiểu Angularjs Framework và Single Page Site

 Cài đặt: xây dựng website bán điện thoại trực tuyến

2 Ưu điểm

 Thực hiện đầy đủ các chức năng của đề tài

 Có khả năng tự nghiên cứu cao, chủ động hoàn thành các công việc được giao

 Báo cáo viết đầy đủ, rõ ràng và khoa học

Tp Hồ Chí Minh, ngày tháng năm 20

Giáo viên phản biện

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Đoàn Xuân Hùng MSSV 1: 15110219

Họ và tên Sinh viên 2: Phạm Minh Kế MSSV 2: 15110226

Ngành: Công Nghệ Thông Tin

Tên đề tài: Tìm hiểu Angularjs framework và xây dựng Single Page Site (Website bán điện thoại trực tuyến)

Họ và tên Giáo viên phản biện: Lê Thị Minh Châu

LỜI CẢM ƠN

Nhóm em xin chân thành cám ơn khoa Công Nghệ Thông Tin, Bộ Môn Công Nghệ Phần Mềm, trường Đại học Sư Phạm Kỹ Thuật Tp.HCM đã tạo điều kiện thuận lợi cho chúng em thực hiện đề tài này

Chúng em cũng xin được gửi lời cảm ơn chân thành nhất đến cô Trương Thị Ngọc Phượng, người đã tận tình chỉ bảo và hướng dẫn nhóm em thực hiện đề tài này

Bên cạnh đó, chúng em xin gửi lời cảm ơn đến các thầy cô giảng viên của trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM nói chung cũng như các thầy cô giảng viên khoa Công Nghệ Thông Tin nói riêng, những người đã giảng dạy, tạo điều kiện cho em tích lũy được những kiến thức quý báu trong những năm học qua

Dù đã cố gắng hoàn thành đề tài khóa luận đúng yêu cầu, nhưng do thời gian hạn hẹp và khả năng còn hạn chế nên chắc chắn sẽ không tránh khỏi thiếu sót Chúng em mong nhận được sự thông cảm và tận tình chỉ bảo của các thầy cô và các bạn

Nhóm em xin chân thành cảm ơn

Trường ĐH Sư Phạm Kỹ Thuật TP.HCM

Khoa: CNTT

ĐỀ CƯƠNG CHI TIẾT

Họ và tên Sinh viên 1: Đoàn Xuân Hùng MSSV 1: 15110219

Họ và tên Sinh viên 2: Phạm Minh Kế MSSV 2: 15110226

Thời gian làm luận văn: Từ : 15/03/2019 Đến : 15/07/2019

Chuyên ngành: Công Nghệ Phần Mềm

Tên luận văn: Tìm hiểu Angularjs framework và xây dựng Single Page Site (Website bán điện thoại trực tuyến)

GV hướng dẫn: Trương Thị Ngọc Phượng

Nhiệm Vụ Của Luận Văn:

1 Tìm hiểu lý thuyết Angularjs Framework

2 Xác định yêu cầu Website bán điện thoại trực tuyến

3 Mô hình hóa yêu cầu, thiết kế cơ sở dữ liệu

4 Thiết kế giao diện

5 Viết code xử lý

6 Kiểm thử, sửa lổi

7 Viết báo cáo

Tp Hồ Chí Minh, ngày 15 tháng 07 năm 2019

Người viết đề cương

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

Ý kiến của Giáo viên hướng dẫn

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

Cài đặt, Cấu trúc API, Route, Controller, Model, Schema, View Query, Middleware, …

- Yêu cầu chức năng

- Yêu cầu phi chức năng

MỤC LỤC

DANH SÁCH HÌNH ẢNH 1

DANH SÁCH BẢNG BIỂU 3

Phần 1: MỞ ĐẦU 5

1 Tính cấp thiết của đề tài 5

2 Mục đích của đề tài 5

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

4 Kết quả dự kiến đạt được 6

Phần 2: NỘI DUNG 7

Chương 1: GIỚI THIỆU ANGULAR 7

1.1 Khái niệm 7

1.2 Lịch sử phát triển của Angular Framework 7

1.3 Ưu nhược điểm của Angular Framework 8

1.4 Tại sao chúng ta nên sử dụng Angular Framework 9

1.5 Cấu trúc của thư mục Angular Framework 9

Chương 2: CÀI ĐẶT ANGULAR FRAMEWORK 12

2.1 Cài đặt Nodejs 12

2.2 Cài đặt NPM 12

2.3 Cài đặt Angular CLI và tạo project Angular 12

Chương 3: CÁC TÍNH NĂNG CHÍNH CỦA ANGULAR FRAMEWORK 13

3.1 Data-binding 13

3.1.1 Data-binding trong Angular là gì? 13

3.1.2 Cách thức hoạt động của Data-binding trong Angular. 13

3.2 Scope 14

3.3 Router 15

3.3.1 Router Outlet 15

3.3.2 Cài đặt Route cho ứng dụng Angular 15

3.3.3 Child Routes 16

3.3.4 Params 17

3.4 Components 17

3.5 ngModule 18

3.6 Services 19

3.7 Directives 20

3.7.1 Ng-if… else 21

3.7.2 Ng-Template 21

3.7.3 Ng-Container 22

3.8 Xử lý Event Frontend 22

3.8.1 Xử lý thao tác của người dùng 22

3.8.2 Xử lý thao tác của người dùng cách 2 23

3.9 Sử dụng ngModel và form fields 23

Chương 4: TÌM HIỂU SINGLE PAGE SITE 25

4.1 Single page site là gì? 25

4.2 Single page khác gì với web truyền thống 25

4.3 Các tính năng của Single Page Site 26

4.4 Ưu điểm và nhược điểm 27

Chương 5: VÌ SAO CHỌN LARAVEL FRAMEWORK XÂY DỰNG API 29

5.1 Tại sao chọn ngôn ngữ PHP 29

5.2 Vậy tại sao lại chọn Laravel Framework? 30

5.3 Cách xây dựng Restful API với Laravel 32

5.3.1 Đầu tiên tạo dự án laravel 32

5.3.2 Kết nối cơ sở dữ liệu 32

5.3.3 Viết API tương tác với cơ sở dữ liệu 33

Chương 6: WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN 39

6.1 Khảo sát hiện trạng 39

6.2 Xác định yêu cầu 39

6.2.1 Yêu cầu chức năng nghiệp vụ 39

6.2.2 Yêu cầu phi chức năng 45

6.2.3 Phân tích và mô hình hóa yêu cầu 46

6.3 Phân tích thiết kế cơ sở dữ liệu 61

6.3.1 Lược đồ Use Case 61

6.3.2 Cơ sở dữ liệu 62

6.3.3 Lược đồ Diagram 69

6.4 Thiết kế giao diện 69

6.4.1 Giao diện menu và slide 69

6.4.2 Giao diện trang sản phẩm giảm giá 70

6.4.3 Giao diện trang tìm kiếm điện thoại theo hãng 71

6.4.4 Giao diện trang thông tin chi tiết loại điện thoại 72

6.4.5 Giao diện phần review điện thoại 74

6.4.6 Giao diện trang giỏ hàng 75

6.4.7 Giao diện trang checkout 76

6.4.8 Giao diện trang contact 78

6.4.9 Giao diện trang quản lý đơn hàng 79

6.4.10 Giao diện trang chi tiết đơn hàng 80

6.4.11 Giao diện trang thống kê số lượng 81

6.4.12 Giao diện trang đăng nhập 82

6.4.13 Giao diện trang xem thông tin cá nhân 83

6.4.14 Giao diện trang chỉnh sửa thông tin 84

6.4.15 Giao diện trang quản lý hãng điện thoại 85

6.4.16 Giao diện trang quản lý loại điện thoại 86

6.4.17 Giao diện trang quản lý điện thoại theo loại điện thoại 87

6.4.18 Giao diện trang quản lý employees 88

6.4.19 Giao diện trang tạo tài khoản employees 90

6.4.20 Giao diện trang đổi mật khẩu 91

6.4.21 Giao diện trang thống kê kế toán 91

6.5 Kiểm thử phần mềm 92

Phần 3: KẾT LUẬN 96

1 Kết quả kiểm thử 96

1.1 Tóm tắt kiểm thử 96

1.2 Biểu đồ biểu diễn kiểm thử 96

2 Những kết quả đạt được 96

3 Những khó khăn khi thực hiện đề tài 97

4 Ưu điểm 97

5 Hạn chế 97

6 Hướng phát triển trong tương lai 97

TÀI LIỆU THAM KHẢO 98

DANH SÁCH HÌNH ẢNH

Hình 1.5 1 Thư mục Angular Framework 9

Hình 1.5 2 Chức năng của các thư mục chính Angular 10

Hình 1.5 3 Thư mục src 10

Hình 1.5 4 Chức năng cụ thể của các thư mục con trong src 11

Hình 3.1.2 1 Sơ đồ Two-Way Data Binding 13

Hình 4.1 1 Sơ đồ hoạt động của website Single page site 25

Hình 4.2 1 So sánh giữa single page với website regular 26

Hình 5.2 1 Route API 30

Hình 5.2 2 Mô hình MVC của Laravel 31

Hình 5.2 3 Kế thừa trong Laravel 32

Hình 5.3.3 1 Test Postman lấy toàn bộ data 35

Hình 5.3.3 2 Test Postman lấy một data 36

Hình 5.3.3 3 Test Postman tạo một data mới 37

Hình 5.3.3 4 Kiểm tra database 37

Hình 5.3.3 5 Test Postman cập nhật data 38

Hình 6.2.3 1 Sơ đồ luồng nghiệp vụ quản lý danh mục sản phẩm 46

Hình 6.2.3 2 Sơ đồ luồng nghiệp vụ quản lý sản phẩm 47

Hình 6.2.3 3 Sơ đồ luồng nghiệp vụ quản lý tin tức 49

Hình 6.2.3 4 Sơ đồ luồng nghiệp vụ quản lý employees 50

Hình 6.2.3 5 Sơ đồ luồng nghiệp vụ đổi mật khẩu 52

Hình 6.2.3 6 Sơ đồ luồng nghiệp vụ quản lý thông tin cá nhân 53

Hình 6.2.3 7 Sơ đồ luồng nghiệp vụ xác nhận đơn hàng 55

Hình 6.2.3 8 Sơ đồ luồng nghiệp vụ đăng xuất 56

Hình 6.2.3 9 Sơ đồ luồng nghiệp vụ xem đơn đặt hàng 56

Hình 6.2.3 10 Sơ đồ luồng nghiệp vụ tìm kiếm sản phẩm 57

Hình 6.2.3 11 Sơ đồ luồng nghiệp vụ xem tin tức 58

Hình 6.2.3 12 Sơ đồ luồng nghiệp vụ quản lý giỏ hàng 59

Hình 6.2.3 13 Sơ đồ luồng nghiệp vụ đặt hàng 60

Hình 6.2.3 14 Sơ đồ luồng nghiệp vụ xem thông tin sản phẩm 61

Hình 6.3.1 1 Lược đồ use-case 62

Hình 6.3.3 1 Lược đồ Diagram 69

Hình 6.4.1 1 Giao diện menu và slide 70

Hình 6.4.2 1 Giao diện trang sản phẩm giảm giá 71

Hình 6.4.3 1 Giao diện trang tìm kiếm điện thoại theo hãng 72

Hình 6.4.4 1 Giao diện trang thông tin chi tiết loại điện thoại 73

Hình 6.4.5 1 Giao diện phần review điện thoại 74

Hình 6.4.6 1 Giao diện trang giỏ hàng 75

Hình 6.4.7 1 Giao diện trang chechout 77

Hình 6.4.8 1 Giao diện trang contact 78

Hình 6.4.9 1 Giao diện trang quản lý đơn hàng 79

Hình 6.4.10 1 Giao diện trang chi tiết đơn hàng 80

Hình 6.4.11 1 Giao diện trang thống kê số lượng 1 81

Hình 6.4.11 2 Giao diện trang thống kê số lượng 2 81

Hình 6.4.12 1 Giao diện trang đăng nhập 83

Hình 6.4.13 1 Giao diện trang xem thông tin cá nhân 84

Hình 6.4.14 1 Giao diện trang chỉnh sửa thông tin 85

Hình 6.4.15 1 Giao diện trang quản lý hãng điện thoại 86

Hình 6.4.16 1 Giao diện trang quản lý loại điện thoại 87

Hình 6.4.17 1 Giao diện trang quản lý điện thoại theo loại điện thoại 88

Hình 6.4.18 1 Giao diện trang quản lý employees 89

Hình 6.4.19 1 Giao diện trang tạo tài khoản employees 90

Hình 6.4.20 1 Giao diện trang đổi mật khẩu 91

Hình 6.4.21 1 Giao diện trang thống kê kế toán 92

Hình 6.5 1 Biểu đồ biểu diễn tỷ lệ kiểm thử 96

DANH SÁCH BẢNG BIỂU

Bảng 1.3 1 Ưu nhược điểm của Angular Framework 8

Bảng 4.4 1 Ưu và nhược điểm Single Page 27

Bảng 6.2.1 1 Chức năng nghiệp vụ 39

Bảng 6.2.1 2 Bộ phận chức năng Admin 40

Bảng 6.2.1 3 Quy định chức năng Admin 40

Bảng 6.2.1 4 Bộ phận chức năng Employees 41

Bảng 6.2.1 5 Quy định chức năng Employees 42

Bảng 6.2.1 6 Bộ phận chức năng Customer 43

Bảng 6.2.1 7 Quy định chức năng Customer 43

Bảng 6.2.2 1 Yêu cầu phi chức năng 45

Bảng 6.3.2 1 dbo.Bill 62

Bảng 6.3.2 2 dbo.BillDetail 63

Bảng 6.3.2 3 dbo.Contact 63

Bảng 6.3.2 4 dbo.InfoOrder 64

Bảng 6.3.2 5 dbo.Phone 64

Bảng 6.3.2 6 dbo.PhoneCompany 65

Bảng 6.3.2 7 dbo.ReviewPhone 65

Bảng 6.3.2 8 dbo.TypePhone 66

Bảng 6.3.2 9 dbo.News 67

Bảng 6.3.2 10 dbo.Roles 68

Bảng 6.3.2 11 dbo.Users 68

Bảng 6.4.1 1 Xử lý giao diện menu slide 70

Bảng 6.4.2 1 Xử lý giao diện trang sản phẩm giảm giá 71

Bảng 6.4.3 1 Xử lý giao diện trang tìm kiếm điện thoại theo hãng 72

Bảng 6.4.4 1 Xử lý giao diện trang thông tin chi tiết loại điện thoại 73

Bảng 6.4.5 1 Xử lý giao diện trang review điện thoại 74

Bảng 6.4.6 1 Xử lý giao diện trang giỏ hàng 75

Bảng 6.4.7 1 Xử lý giao diện trang checkout 77

Bảng 6.4.8 1 Xử lý giao diện trang contact 78

Bảng 6.4.9 1 Xử lý giao diện trang quản lý đơn hàng 79

Bảng 6.4.10 1 Xử lý giao diện trang chi tiết đơn hàng 80

Bảng 6.4.11 1 Xử lý giao diện trang thống kê số lượng 1 82

Bảng 6.4.11 2 Xử lý giao diện trang thống kê số lượng 2 82

Bảng 6.4.12 1 Xử lý giao diện trang đăng nhập 83

Bảng 6.4.13 1 Xử lý giao diện trang xem thông tin cá nhân 84

Bảng 6.4.14 1 Xử lý giao diện trang chỉnh sửa thông tin 85

Bảng 6.4.15 1 Xử lý giao diện trang quản lý hãng điện thoại 86

Bảng 6.4.16 1 Xử lý giao diện trang quản lý loại điện thoại 87

Bảng 6.4.17 1 Xử lý giao diện trang quản lý điện thoại theo loại điện thoại 88

Bảng 6.4.18 1 Xử lý giao diện trang quản lý employees 89

Bảng 6.4.19 1 Xử lý giao diện trang tạo tài khoản employees 90

Bảng 6.4.20 1 Xử lý giao diện trang đổi mật khẩu 91

Bảng 6.4.21 1 Xử lý giao diện trang thống kê kế toán 92

Bảng 6.5 1 Bảng danh sách kiểm thử 92

Phần 1: MỞ ĐẦU

1 Tính cấp thiết của đề tài

Ngày nay, với sự phát triển mạnh mẽ của công nghệ thông tin và những ứng dụng của nó trong đời sống Máy tính điện tử không còn là một thứ phương tiện lạ lẫm đối với mọi người mà nó dần trở thành một công cụ làm việc và giải trí thông dụng và hữu ích của chúng ta, không chỉ ở công sở mà còn ngay cả trong gia đình Trong nền kinh tế hiện nay, với xu thế toàn cầu hoá nền kinh tế thế giới, mọi mặt của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu trao

đổi hàng hoá của con người ngày càng tăng cả về số lượng và chất lượng

Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện các giải pháp cũng như các sản phẩm nhằm cho phép tiến hành thương mại hóa trên Internet Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu của thương mại điện tử Với những thao tác đơn giản trên máy có nối mạng Internet bạn sẽ có tận tay những gì mình cần

mà không phải mất nhiều thời gian Bạn chỉ cần vào các trang dịch vụ thương mại điện tử, làm theo hướng dẫn và click vào những gì bạn cần Các nhà dịch vụ

sẽ mang đến tận nhà cho bạn

Qua khảo sát thực tế, ở Việt Nam thì hình thức bán hàng qua mạng này

vẫn chưa được hoàn chỉnh bởi hình thức thanh toán quá phức tạp

=> Nhận biết điều đó, nhóm chúng em sẻ sử dụng Angular Framework để

thực hiện việc xây dựng một website Single page site bán điện thoại trực tuyến

2 Mục đích của đề tài

- Tìm hiểu về Angular Framework và Web Single Page Site

- Xây dựng website demo dựa trên framework đó

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

- Các công cụ lập trình ngôn ngữ JavaScript Angular Framework, Website Single

Page và PHP Laravel Framework

- Các công cụ, framework, ngôn ngữ thiết kế giao diện và xây dựng website:

JavaScript, Bootstrap, HTML, CSS

- Nghiên cứu các chức năng của Website bán điện thoại trực tuyến

4 Kết quả dự kiến đạt được

- Nắm vững được kiến thức Angular Framework và vận dụng nó

- Hiểu rõ cơ chế hoạt động của web single page site

- Xây dựng thành công Website bán điện thoại trực tuyến

Phần 2: NỘI DUNG

Chương 1: GIỚI THIỆU ANGULAR

1.1 Khái niệm

Angular là một Javascript Framework có cấu trúc cho các ứng dụng web động

(dynamic web app), nó thường được sử dụng để tạo ra các ứng dụng một trang (Single Page Application - SPA) Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và

cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích Hai tính năng cốt lõi: Data binding và Dependency injection của Angular loại bỏ phần lớn code mà bạn thường phải viết Nó xảy ra trong tất cả các trình duyệt, làm cho nó trở thành đối tác lý tưởng của bất kỳ công nghệ Server nào Angular là một nền tảng miễn phí và được hàng ngàn lập trình viên trên thế giới ưa chuộng

1.2 Lịch sử phát triển của Angular Framework

AngularJS được bắt đầu từ năm 2009, do lập trình viên Misko Hevery tại Google viết ra như là một dự án kiểu “viết cho vui” Misko và nhóm lúc này đang tham gia vào

1 dự án của Google tên là Google Feedback Với AngularJS, Misko đã rút ngắn số dòng code front-end từ 17000 dòng còn chỉ khoảng 1500 Với sự thành công đó, đội ngũ của

dự án Google Feedback quyết định phát triển AngularJS theo hướng mã nguồn mở Theo thông số từ Github, hiện tại dự án AngularJS đang có gần 11000 người theo dõi và hơn

2000 lượt fork

Hình 1.2 1 Lịch sử phát triển Angular 1.3 Ưu nhược điểm của Angular Framework

Bảng 1.3 1 Ưu nhược điểm của Angular Framework

- Cung cấp khả năng tạo ra các Single Page

Aplication dễ dàng

- Cung cấp khả năng data binding tới HTML,

khiến cho người dùng cảm giác linh hoạt,

thân thiện

- Dễ dàng Unit test

- Dễ dàng tái sử dụng component

- Giúp lập trình viên viết code ít hơn với

nhiều chức năng hơn

- Chạy được trên các loại trình duyệt, trên cả

PC lẫn mobile

- Không an toàn: được phát triển từ javascript cho nên ứng dụng được viết bởi Angular không an toàn Nên có sự bảo mật và xác thực phía server sẽ giúp ứng dụng trở nên an toàn

hơn

- Nếu người sử dụng ứng dụng của vô hiệu hóa JavaScript thì sẽ chỉ nhìn thấy trang cơ

bản

1.4 Tại sao chúng ta nên sử dụng Angular Framework

Hình 1.4 1 Tạo sao chúng ta nên sử dụng angular 1.5 Cấu trúc của thư mục Angular Framework

Một dự án web viết fronteng bằng Angular có cấu trúc thư mục như sau:

Hình 1.5 1 Thư mục Angular Framework

Ở thư mục root của Angular project, các bạn sẽ thấy nhiều thư mục và tập tin,

Hình 1.5 2 Chức năng của các thư mục chính Angular

Trong các tập tin, thư mục được liệt kê ở trên thì thư mục src là thư mục quan trọng, là nơi để chúng ta có thể thêm code, modify code để phát triển ứng dụng Angular của mình Nội dung của thư mục này như sau:

Hình 1.5 3 Thư mục src

Mục đích của từng thư mục, tập tin trong thư mục src này mình có thể liệt kê như sau:

Hình 1.5 4 Chức năng cụ thể của các thư mục con trong src

Chương 2: CÀI ĐẶT ANGULAR FRAMEWORK

2.1 Cài đặt Nodejs

Để cài đặt Nodejs, đến đường dẫn

2.2 Cài đặt NPM

Trong quá trình cài đặt Nodejs, NPM được tích hợp cài đặt sẳn

Để tìm hiểu đến đường dẫn: nodejs-tren-windows

https://o7planning.org/vi/11921/huong-dan-cai-dat-2.3 Cài đặt Angular CLI và tạo project Angular

Bản thân Angular chỉ là một thư viện Javascript mở rộng dành cho Node.js chứ không phải một ứng dụng hoàn toàn, tuy nhiên nhóm phát triển Angular đã viết thêm

gói Angular CLI là một chương trình dòng lệnh để hỗ trợ chúng ta tạo project, thêm file,

xóa file, khởi động project… một cách dễ dàng

Để cài đặt và tạo project, vào đường dẫn:

Chương 3: CÁC TÍNH NĂNG CHÍNH CỦA ANGULAR FRAMEWORK

3.1 Data-binding

3.1.1 Data-binding trong Angular là gì?

Data Binding trong AngularJs chính là các thức tự động đồng bộ (synchronization) dữ liệu giữa Model và View trong AngularJs Data Binding cho phép bạn tạo sự liên kết, ràng buộc giữa Model và Template thông qua một ứng dụng AngularJs (ng-app) Khi có bất kỳ sự thay đổi nào ở model, dữ liệu sẽ

được phản ánh ngay tức thì ra Template và ngược lại

3.1.2 Cách thức hoạt động của Data-binding trong Angular

Hình 3.1.2 1 Sơ đồ Two-Way Data Binding

Đầu tiên AngularJS compile Template ra ngoài View cho người dùng thấy được (chẳng hạn như là 1 ô textbox) Khi có bất kì thày đổi trên View này, chẳng hạn như trong ô textbox mình sẽ nhập là abc Thì tự động dữ liệu abc này sẽ ngay lập tự được đồng bộ vào bên trong Model Và tiếp theo bên trong Model nếu có bất kỳ sự thay đổi nào sẽ ngay lập tức được đồng bộ ngược lại ra View Vì thế

dữ liệu được trung chuyển từ Model sang View hay từ View sang Model là một thể thống nhất

Angular có cách code Binding (kết nối giữa html và data) dữ liệu theo kiểu 2 chiều, nghĩa là html input thay đổi thì biến javascript sẽ ngay lập tức nhận

được giá trị trả về và ngược lại, giá trị trong js thay đổi thì ngay lập tức màn hình html thay đổi theo Chúng ta không cần đi nhặt nhạnh từng giá trị của các ô input

như thời dùng jQuery nữa Để bind một chuỗi ra ngoài màn hình html thì rất đơn giản sử dụng 2 dấu ngoặc nhọn {{TenBien}} Ví dụ chúng ta có một Component

đơn giản như sau:

Đó là hiển thị chuỗi string Nhưng nếu muốn hiển thị giá trị đã có ra một ô input text, thì phải viết 2 dấu ngoặc vuông [] như sau:

Chú ý một chút, trong ví dụ này thì value là một từ khóa html chứ không phải tên biến, title mới là tên biến dùng để truyền vào cho [value] nhưng chúng ta không đóng khung title mà đóng khung value Điều này cho phép chúng ta linh hoạt để gán giá trị cho bất cứ thuộc tính html nào cũng được

3.2 Scope

Scope là một object (đối tượng) có nhiệm vụ giao tiếp dữ liệu giữa controller và view của ứng dụng Nó sẽ thực hiện dưới dạng biểu thức, nghĩa là ở model sẽ được khai báo đúng với quy cách thì đối tượng scope sẽ truyền hành động (function) hoặc dữ liệu tương ứng và ta có thể truyền các sự kiện thông qua đối tượng này

Scopes cung cấp các biểu thức giống như các template engine hiện nay, ví dụ để hiển thị username thì ta sẽ khai báo là {{username}} và ở controller chúng ta chỉ việc

gán $scope.username = 'something' thì đối tượng này sẽ lấy key có tên là username gán

vào view {{username}}

3.3 Router

Khi sử dụng Router, chúng ta sẽ có thể dựng nên một trang web SPA (Single Page Application) Khi viết một route template, các components sẽ được map tương ứng với các URL cố định Và khi click vào link, url sẽ load component mà không cần load lại cả trang Dẫn đến hiệu ứng là trang web chạy trong 1 tab và các màn hình được load động Cách hoạt động này khác với MPA (Multiple Page Application) thường thì mỗi màn hình

sẽ có url tương ứng và phải bật một tab riêng trên trình duyệt

Router cũng có cache, tức là component đã load một lần thì sẽ được load lại không cần tải toàn bộ về từ server nữa

Để bắt đầu sử dụng Router thì sau khi tạo project bằng Angular CLI, chúng ta chạy dòng lệnh sau đây:

ng g module my-router-module –routing

3.3.1 Router Outlet

Mỗi một Router sẽ có một URL để load component Và để biết được là component sẽ render ra chỗ nào thì chúng ta viết đoạn code sau vào khung html cần chèn:

<router-outlet></router-outlet>

3.3.2 Cài đặt Route cho ứng dụng Angular

Để cài đặt toàn bộ Router cho một ứng dụng Angular thì chúng ta cần tạo

ra một đối tượng JSON chứa các thuộc tính như sau:

- path: Đường dẫn URL của component hiện tại

- component: Ứng với đường dẫn bên trên thì load component nào

- redirectTo: Chuyển hướng đến URL này nếu URL ở path không trùng

Ví dụ, khi người dùng gõ URL linh tinh, chúng ta muốn chuyển hướng và load trang Home hoặc trang báo lỗi 404 thì cần ghi rõ URL trang Home hoặc 404 vào redirectTo

- pathMatch: Cài đặt xem chế độ kiểm tra url là như thế nào khi giá trị

là full thì nghĩa là toàn bộ url từ đầu đến cuối sẽ phải chính xác như trong

bộ JSON Router Còn khi giá trị là prefix thì chuỗi đầu tiên của url (dấu sược đầu tiên) sẽ được kiểm tra Mặc định nếu không nói gì thì prefix sẽ được chọn

 Ví dụ

3.3.3 Child Routes

Khi chúng ta muốn một trang có các trang con bên trong nó Ví dụ trang Grid data sẽ chứa trang Thêm, Sửa, Xóa tương ứng Lúc này chúng ta viết thêm thuộc tính child cho Route cha Child là một object JSON giống object Route cha

Cách viết như sau:

Để component con được hiển thị lên ở component cha?

Như vậy là các component nếu dùng Route để định nghĩa lồng nhau thì chúng ta sẽ dùng lại biến <router-outlet></router-outlet> để render con của nó

3.3.4 Params

Data hoàn toàn có thể được truyền từ màn hình này sang màn hình kia bằng cách vứt giá trị vào trong url để gọi (hay còn gọi là cách gọi hàm bằng truyền params URL)

Các bước để làm được việc này như sau:

- Định nghĩa giá trị cần lấy trong định nghĩa route: Ví dụ bên dưới sẽ cho ta thấy cách định nghĩa param cần lấy trong url

- Đọc data từ URL truyền tới: Chúng ta cần dùng đến biến ActivedRoute của bộ @angular/router

thể to lớn như là cả 1 màn hình chứa nhiều control hoặc một nhóm nhiều màn hình Tức

là là một component cũng có thể chứa và gọi được nhiều component khác nối vào Như vậy Angular 4 rất linh hoạt trong việc chia nhỏ code ra các component

Từ Angular 4 chúng ta khai báo một Component với cấu trúc như sau:

Từ khóa @Component sẽ giúp định nghĩa ra một bộ khung html cho nó Và bên dưới là một class HelloWorld dùng để viết code logic Trong định nghĩa bộ khung html, chúng ta có một số thuộc tính cần chú ý sau đây:

- selector: Là tên được đặt để gọi một component trong code html Ở ví dụ vừa rồi,

từ khóa hello-ng-world được đặt tên cho component này Khi cần gọi component này ra ở màn hình html cha, ta sẽ gọi bằng html tag <hello-ng-world></hello-ng-world> Gọi như vậy thì component con sẽ được render ra component cha

- template: Là tự định nghĩa khung html cho component dạng string ở trong file

này luôn Ví dụ ở trên chỉ định nghĩa một thẻ html h1 đơn giản Cách này chỉ dùng cho component đơn giản

- templateUrl: Là đường dẫn url tới file html bên ngoài để load file đó vào làm

khung html cho component này Đây là cách code hay được dùng vì cho phép tách riêng khung html ra khỏi code logic, người làm design sẽ sửa file html riêng, độc lập với người làm code

- styles: Là viết style css luôn vào file component này Cách này chỉ dùng cho

component đơn giản

- styleUrls: Là đường dẫn url đến file style css độc lập cho component này Cách

này khuyên dùng vì file css nên để dành riêng cho người designer đụng vào

3.5 ngModule

Module là một khái niệm rộng nhất của Angular Một module có thể bao gồm chứa các components, directives, pipes, v.v

Module có thể được biên dịch (compile) dưới dạng ahead-of-time (AoT) Nghĩa

là biên dịch ra mã thực thi để hiện ra luôn trên trình duyệt không cần vẽ vời gì từ đầu Hãy tưởng tượng component có html và js viết riêng, khi load trang thì 2 thứ này mới nhào nặn chung để hiển thị html+data lên màn hình AoT là thứ html+data đã nhào sẵn

Module cũng có thể gọi module con và bắt tay được với các module khác Ví dụ

về module chúng ta có thể bắt gặp ngay ở trong app.module.ts

Như vậy thì bản thân một app Angular chính là một module khổng lồ, trong đó cài cắm nhiều module con Các thuộc tính của module được định nghĩa như sau:

- imports: Định nghĩa sự phụ thuộc (Dependency) của module này, module phụ

thuộc sẽ được load trước rồi module này mới load

- declarations: Định nghĩa tất cả các component sẽ được dùng trong module này

Nếu chưa định nghĩa thì các component trong module sẽ không thể gọi nhau vì không tìm thấy nhao

- bootstrap: Mỗi ứng dụng Angular đều cần một module gốc, module này sẽ có

một component gốc chứa layout gốc sẽ được render ra ở file index.html

3.6 Services

Một service là một đoạn code trong ứng dụng Angular mà phục vụ cho tác vụ gì

đó, xử lý code logic gì đó Ví dụ handle (xử lý) data gửi nhận từ/đến một API, hoặc cung cấp hàm authenticate Tất nhiên là service thì chỉ có code không hề có giao diện

Để tạo service, ta chạy câu lệnh sau trên màn hình command line

ng g service myservice

Để sử dụng myservice service, chúng ta cần khai báo trong app.module.ts

Để sử dụng service, ta cần thực hiện 2 bước:

- Bước 1: Thay đổi constructor - thêm service vào component bằng cách khai báo

như parameter

Trong constructor ta khai báo private myservice: MyserviceService

- Bước 2: Gọi service trong hàm tạo

Trong hàm khởi tạo ngOnInit, ta gọi service qua lời gọi

this.myservice.getTodayDate() sau đó gán dữ liệu vào biến todaydate

3.7 Directives

Directives có thể hiểu như là các đoạn mã typescript (hoặc javascript) kèm theo

cả html và khi gọi thì gọi như là html luôn, ví dụ:

Từ Angular 2 trở đi, directives được chia làm các loại sau đây:

- Components: Không có nghi ngờ gì khi gọi component là directive cũng

được, vì rõ ràng là component cho phép định nghĩa selector và gọi ra như một thẻ html tag (<component-name></component-name>)

- Structural directives: Là directive cấu trúc, dùng để vẽ html, hiển thị data lên giao diện html Ví dụ ngFor, ngIf

- Attribute directives: Thêm các thuộc tính động cho element html, ví

dụ ngStyle

3.7.1 Ng-if… else

Đây là một Structural directives, có tác dụng kiểm tra điều kiện ngay ở html Ví dụ:

Code ở trên, khi biến title có giá trị, thì chuỗi Time:[value] được show ra

Và cục #noTitle template bị ẩn đi, ngược lại thì điều kiện else được chạy và

#noTitle được hiện ra

Như ta thấy dùng cái directive ngIf else này rất tiện lợi khi có thể ẩn hiện html dễ dàng

3.7.2 Ng-Template

Đây cũng là một Structural directives Nó giúp gom cục html cần ẩn hiện

3.7.4 NgSwitch and NgSwitchCase

Có thể sử dụng câu lệnh điều kiện switch case trong Angular y như switch case trong Javascript vậy

Cách viết như sau:

Trong trường hợp muốn dùng switch case default (nếu toàn bộ case k thỏa màn thì vào default) thì chúng ta viết như sau:

3.8.1 Xử lý thao tác của người dùng

Sự kiện thì có nhiều loại Nếu sự kiện click thì đơn giản là khi nhấn xong

trong lúc người dùng đang thao tác Ví dụ người dùng gõ phím trên input text, người dùng chọn một option trong dropdownList, giá trị đang được chọn phải phản ánh ngay sang một control khác chẳng hạn

Lúc này chúng ta cần dùng đến biến events Đoạn code ví dụ sau đây, ngay khi người dùng gõ phím vào textbox, giá trị của textbox sẽ được lưu lại vào một biến label:

3.8.2 Xử lý thao tác của người dùng cách 2

Cách viết code ở ví dụ 3.8.1 hoàn toàn chạy ngon và không ai bắt bẻ gì Nhưng vấn đề là biến events nó chứa rất nhiều function/component con bên trong (nó chứa toàn bộ các hàm xử lý hàng trăm loại event khác nhau của một component, một control) Do đó sẽ là không khôn ngoan khi gửi và nhận cả một cục to như vậy đưa sang javascript trong khi cái chúng ta cần chỉ là giá trị đang được nhập của textbox

Hãy viết lại đoạn code vừa rồi như sau:

Như chúng ta thấy, hàm updateValue() lúc này nhận truyền vào là một biến label1 (biến này được gọi mỹ miều là template reference variable) và label1.value

sẽ chứa giá trị được bind với textbox hiện tại

3.9 Sử dụng ngModel và form fields

Từ khóa ngModel như ta thấy bên trên, có thể dùng để bind 2 chiều Hiện đại hơn, biến này còn chứa cả các class CSS được gắn với biến model thể hiện tính hợp lệ của data đang được nhập vào form control

Biến vm trong component chứa 2 thuộc tính là fname và lname Chúng ta bind nó

ra 2 input html để nhập giá trị cho nó Tuy nhiên cần validate giá trị nhập vào Nên ta kiểm tra bằng cách gọi {{fname.className}} để xem class của input textbox hiện tại đang là cái gì

Chúng ta sẽ có các class tự động sinh ra ở input type="text" như sau:

- ng-untouched - Class CSS này nghĩa là page đã load xong và input chưa được

đụng đũa vào

- ng-touched - Người dùng đã sờ vào control, ví dụ dí chuột hoặc nhấn chuột vào

nó

- ng-dirty - Giá trị bên trong đã bị sửa đổi, người dùng đã chọc ngoáy vào

- ng-valid - Người dùng nhập giá trị hợp lệ

- ng-invalid - Người dùng nhập giá trị dữ liệu không hợp lệ Ví dụ bỏ trống một

input required

Các class sẽ tự động sinh ra và gắn vào input mỗi khi có sự thay đổi dữ liệu trên form Và nhiệm vụ của bạn là định nghĩa css style tương ứng với các thay đổi đó

Chương 4: TÌM HIỂU SINGLE PAGE SITE

4.1 Single page site là gì?

Single-Page Application là xu hướng mới trong lập trình Web Trong một thế giới mà công nghệ đang vô cùng phát triển, việc sử dụng Single-page Application (SPA)

sẽ rất hiệu quả và tiết kiệm về băng thông, cũng như cho trải nghiệm người dùng tốt hơn

Hình 4.1 1 Sơ đồ hoạt động của website Single page site

Single page Application là một ứng dụng web giúp nâng cao trải nghiệm người dùng bằng cách sử dụng HTML5 và AJAX Đầu tiên khi tải một trang web bất kỳ, SPA

sẽ tải một trang HTML đơn, sau đó dựa trên request của người dùng, SPA sẽ tiếp tục tải các HTML khác trong cùng một trang đó, SPA có thể sử dụng một vài thư viện JavaScript như AngularJS, Backbone.js, Durandal

Hiểu một cách đơn giản, thì toàn bộ resource của web bao gồm các file CSS, Javascript, master layout hay cấu trúc web page sẽ được load lần đầu tiên khi chúng ta bắt đầu duyệt một website A nào đó Ở những lần sau, khi chuyển trang khác, client sẽ gửi những ajax request để get dữ liệu cần thiết (thường là phần nội dung) Việc này mang đến trải nghiệm cho người dùng web tốt hơn, giảm thời gian phải load lại toàn bộ trang web cồng kềnh, tiết kiệm băng thông cũng như thời gian chờ đợi Việc này là trái ngược hoàn toàn với trang web truyền thống khi toàn bộ trang web phải load lại mỗi khi

chuyển trang

4.2 Single page khác gì với web truyền thống

Hình 4.2 1 So sánh giữa single page với website regular

Với một trang web truyền thống, khi người dùng yêu cầu một trang web, thì server sẽ tính toán và trả về trang web đó cho người dùng toàn bộ trang web dưới dạng

mã html Hầu như không có bất kỳ sự liên kết nào giữa 2 yêu cầu gần nhau Do đó khi

có nhiều yêu cầu được diễn ra thì sẽ làm quá trình tính toán diễn ra lâu hơn, bởi hệ thống phải tính toán nhiều thành phần trước khi trả về một trang web hoàn chỉnh

Với SPA lại khác, ở lần request đầu tiên, hệ thống sẽ trả về tất cả code xử lý cũng như code hiển thị của toàn bộ trang web, ở những yêu cầu tiếp theo client chỉ phải request những phần nào mình cần, và server sẽ trả về dữ liệu dưới dạng thô, giúp rút ngắn thời gian truyền tải, giúp nâng cao trải nghiệm của người dùng hơn

Một ví dụ đơn cử dễ hiểu là trang Facebook Nếu bạn đang lướt News feed, hãy thử load lại Bạn thấy đó, tất cả những gì thay đổi chỉ là bảng tin mới nhất được update Bạn sẽ cảm giác đang trượt tuyết trên một làn băng duy nhất, và không phải mất công chuyển làn băng khác

Tương tự với trang Google, khi bạn nhập những gì muốn tìm kiếm, tất cả những thay đổi chỉ là những kết quả được xuất ra, riêng khung Google bên trên vẫn đứng yên

dù bạn có chuyển sang trang 2, 3 v.v…

4.3 Các tính năng của Single Page Site

- Single page thường sẽ cho trải nghiệm mobile tốt hơn

Với SPA, việc thiết kế phiên bản mobile cho ns sẽ dễ dàng hơn nhiều và người

Hơn nữa, single page sẽ giúp cho web load nhanh hơn, khiến nó trở thành lợi thế lớn khi phục vụ cho những người dùng thiếu sự kiên nhẫn Nhiều người dùng cảm thấy khó khăn khi phải thực hiện các thao tác bấm trên thiết bị có màn hình nhỏ, như điện thoại di động, và Single page trong trường hợp này sẽ thích hợp hơn cho họ

- Single page sẽ khiến cho việc target tới một đối tượng cụ thể dễ dàng hơn

Với Single page, tất cả mọi thông tin người dùng có thể tìm thấy đều đặt tại một trang duy nhất Đối với SEO, đây là một cách làm tốt, bởi lẽ nó chỉ nhắm tới một hoặc một bộ từ khóa mà thôi

Tuy nhiên, người dùng sẽ phải cuộn toàn bộ trang web để tìm thấy những thứ mà

họ mong muốn, do đó họ có thể sẽ đi khỏi trang của bạn nếu như những nội dung ở phần đầu không đủ giá trị Hãy đảm bảo rằng mọi thứ bạn đặt trên site đều có mục đích của

nó và bạn đã suy tính kỹ lưỡng trước khi đặt chúng ở đó

- Single page sẽ giúp bạn có độ tin cậy cao hơn

Link là một trong những yếu tố lớn quyết định một website sẽ được xếp hạng như thế nào Đây chính là lợi thế của việc chỉ có một trang vì mọi link trỏ tới đều trỏ về trang chủ của bạn

- Content của single page site không có độ chi tiết cao

Một trong những điểm bất lợi của site một trang đó là content sẽ không thể nào

cụ thể và chi tiết được như site có nhiều trang Ví dụ như trang Facabook, trên New Feeds của bạn chỉ có thể hiển thị nội dung giới hạn của một bài viết, và cũng như facebook không hỗ trợ bạn việc tạo format cho một bài viết dài, có bullet, heading Vì mục đích chính của FB là trang mạng xã hội dùng để chia sẻ cá nhân mà thôi Việc lấp đầy content của Multiple pages trên Single page là không thể Điều mà bạn có thể làm

là chia nhỏ các mục của content ra Mỗi mục này sẽ tương ứng với một trang riêng biệt nếu bạn làm site có nhiều trang

4.4 Ưu điểm và nhược điểm

Bảng 4.4 1 Ưu và nhược điểm Single Page

- Việc render html ở server là một điều đáng

quan tâm nếu trang web của bạn có nhiều

người dùng, cực kì tốn tài nguyên hệ thống

Với SPA, điều này chỉ xảy ra lần đầu tiên khi

người dùng truy cập trang chủ, còn sau đó

việc render sẽ do client đảm nhiệm Thử

tưởng tượng xem 1 server phải render html

cho 1000 request từ client, với SPA thì chúng

ta để 1000 máy của client làm việc đấy

- SPA tách biệt phần front-end và back-end

ra, SPA giao tiếp với server chủ yếu qua

JSON Rest API giúp cho dữ liệu gửi và trả

giữa client và server được giảm đến mức tối

thiểu Việc phát triển, kiểm thử cũng có thể

độc lập giữa front-end và back-end

- SPA rất nhanh, vì các tài nguyên tĩnh (static

resources) như HTML, CSS, Script chỉ được

tải 1 lần duy nhất Trong suốt quá trình sử

dụng, chỉ có dữ liệu là được chuyển giao qua

lại giữa client với server -> giảm thiểu băng

thông cho server

- Tăng trải nghiệm người dùng

- Người dùng phải cho phép Javascript hoạt động trên trình duyệt Nếu không SPA sẽ không hoạt động

- Trình duyệt sẽ phải xử lý rất nhiều, nên vấn

đề hiệu năng trên điện thoại tầm trung trở xuống là điều bạn cần quan tâm

- Phức tạp: Việc phát triển SPA sẽ phức tạp hơn rất nhiều so với ứng dụng web truyền thống Back-end developer cần phải biết Javascript cũng như biết cách sử dụng một trong những framework dùng để phát triển SPA (AngularJS, React, EmberJS…)

- Và việc viết unit test cho Javascript cũng có

nhiều khó khăn hơn, tuy nhiên hiện nay cũng

có rất nhiều framework support việc này

Chương 5: VÌ SAO CHỌN LARAVEL FRAMEWORK XÂY DỰNG API

Ngày nay với sự phát triển của mobile application, lập trình viên luôn phải có những sự thay đổi cũng như cập nhật kiến thức hàng ngày để có thể đâp ứng được những

yêu cầu khắt khe của khách hàng cũng như cung cấp cho khách hàng những application chất lượng với giá cả cạnh tranh Vì những lý do đó việc lập trình server (backend) cho

web application luôn phải thỏa mãn những tiêu chí sau:

- Giá thành thấp

- Lập trình code chất lượng

- Deploy dễ dàng

- Hỗ trợ kết nối đến nhiều database

- Hỗ trợ giao tiếp dễ dàng giữa client và server

- Bảo mật api call giữa client và server

Dựa trên những tiêu chí liệt kê trên, ngôn ngữ php có thể là 1 trong những lựa chọn hàng đầu cho những lập trình viên

5.1 Tại sao chọn ngôn ngữ PHP

PHP là ngôn ngữ Server Side Scripting tương thích với tất cả các hệ điều hành được biết đến như Windows, Linux Ngày nay, PHP frameworks đang được các lập trình viên sử dụng rộng rãi để xử lý issued nhanh hơn và dễ dàng hơn Việc lập trình với PHP sẽ dễ dàng hơn với những plug-ins và các mẫu tiêu chuẩn và hiệu quả có thể được tăng lên mạnh mẽ bằng cách sử dụng PHP Frameworks

Những điểm mạnh mà PHP frameworks có thể hỗ trợ cho lập trình viên:

- PHP framework được xây dựng với các chức năng mạnh mẽ: PHP frameworks cung cấp miễn phí và hỗ trợ các tính năng mạnh mẽ, giúp cho các việc lập trình