Phát triển ứng dụng web

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Lê Đình Thanh, Nguyễn Việt Anh Giáo trình PHÁT TRIỂN ỨNG DỤNG WEB Hà Nội, 2018 MỤC LỤC BẢNG CÁC THUẬT NGỮ VÀ TỪ VIẾT TẮT x LỜI NÓI ĐẦU xiv CHƢƠNG KIẾN TRÚC ỨNG DỤNG WEB 1.1 ỨNG DỤNG WEB CÙNG CÁC THÀNH PHẦN LIÊN QUAN 1.2 TRÌNH KHÁCH WEB 1.3 TRÌNH PHỤC VỤ WEB 1.4 TRÌNH PHỤC VỤ ỨNG DỤNG 1.5 HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU 1.6 KHUNG NHÌN CHUNG 1.7 ĐỊNH DANH ỨNG DỤNG WEB 1.8 ĐỊNH VỊ TÀI NGUYÊN WEB 1.9 HTTP Lê Đình Thanh, Nguyễn Việt Anh WebAppDev 1.9.1 Yêu cầu HTTP 1.9.2 Đ{p ứng HTTP 1.9.3 Phƣơng thức HTTP 1.9.4 Tiêu đề HTTP 10 1.9.5 Mã trạng thái 11 1.9.6 Kết nối liên tục v| chế dẫn ống 11 1.10 KIỂU MINE 12 1.11 WEB TĨNH VÀ WEB ĐỘNG 12 1.12 WEB PROXY 13 1.13 LỊCH SỬ PHÁT TRIỂN WEB 14 B|i tập 15 Đọc thêm 15 CHƢƠNG XÂY DỰNG TRANG WEB BẰNG HTML 16 2.1 MÃ NGUỒN TRANG WEB, ĐỐI TƢỢNG TÀI LIỆU 16 i 2.2 THẺ 16 2.3 CHÚ THÍCH 17 2.4 CẤU TRÚC TÀI LIỆU HTML 18 2.5 DOCTYPE 18 2.6 TIÊU ĐỀ TRANG 18 2.7 THÔNG TIN VỀ TRANG 19 2.8 LIÊN KẾT TÀI NGUYÊN 19 2.9 KỊCH BẢN 20 2.10 KIỂU TRÌNH DIỄN 20 2.11 NỘI DUNG VĂN BẢN 21 2.11.1 Đầu mục 21 Lê Đình Thanh, Nguyễn Việt Anh WebAppDev 2.11.2 Văn thƣờng 21 2.11.3 Trích dẫn 21 2.11.4 Đoạn văn 22 2.11.5 Bài viết 22 2.11.6 Ph}n đoạn tài liệu 22 2.11.7 Ngắt chủ đề 22 2.11.8 Tham chiếu ký tự 23 2.11.9 Sử dụng bảng mã 23 2.12 SIÊU LIÊN KẾT, ĐIỂM ĐÁNH DẤU 23 2.13 DANH SÁCH, BẢNG BIỂU 24 2.13.1 Danh sách có thứ tự 24 2.13.2 Danh sách khơng có thứ tự 25 2.13.3 Danh sách mô tả 25 2.13.4 Bảng biểu 25 2.14 NỘI DUNG NHÚNG 27 2.14.1 Đối tƣợng nhúng 27 2.14.2 Hình ảnh 28 2.14.3 Âm thanh, phim 29 ii 2.14.4 Khung nội tuyến 29 2.15 TRÌNH BÀY, NHĨM GỘP 30 2.15.1 Ngắt dòng hiển thị 30 2.15.2 Nhóm gộp 30 2.16 NHẬP LIỆU 30 2.16.1 Dữ liệu văn 31 2.16.2 Dữ liệu kiểu liệt kê 31 2.16.3 Dữ liệu tùy biến 32 2.16.4 Đệ trình liệu 32 2.16.5 Hỗ trợ nhập liệu 33 2.17 CẬP NHẬT KIẾN THỨC VỀ HTML 34 Lê Đình Thanh, Nguyễn Việt Anh WebAppDev B|i tập 34 Đọc thêm 35 CHƢƠNG ĐỊNH KIỂU TRÌNH DIỄN TRANG WEB BẰNG CSS 36 3.1 BẢNG ĐỊNH DẠNG 36 3.2 BỘ CHỌN 36 3.2.1 Bộ chọn theo phần tử 36 3.2.2 Bộ chọn theo thuộc tính 37 3.2.3 Bộ chọn theo định danh 37 3.2.4 Bộ chọn theo lớp 38 3.2.5 Bộ chọn nội tuyến 38 3.2.6 Bộ chọn tất 39 3.2.7 Lớp giả, phần tử giả 39 3.2.8 Kết hợp nhiều chọn 40 3.2.9 Viết gộp nhiều chọn 41 3.3 KHAI BÁO CSS 41 3.4 CHÚ THÍCH TRONG CSS 42 3.5 BẢNG ĐỊNH DẠNG KẾ THỪA VÀ MẶC ĐỊNH 42 3.6 THỨ TỰ ƢU TIÊN CÁC BẢNG ĐỊNH DẠNG 42 iii 3.7 MÔ HÌNH TRÌNH DIỄN ĐỐI TƢỢNG TÀI LIỆU 44 3.8 HIỂN THỊ THEO DÒNG VÀ THEO KHỐI 46 3.9 VỊ TRÍ TRÌNH DIỄN ĐỐI TƢỢNG TÀI LIỆU 47 3.9.1 Vị trí tĩnh 47 3.9.2 Vị trí tƣơng đối 48 3.9.3 Vị trí tuyệt đối 49 3.9.4 Vị trí cố định 50 3.9.5 Trôi 51 3.9.6 Cao độ 52 3.10 CSS CÓ ĐIỀU KIỆN 52 3.11 MỘT VÀI ĐỊNH DẠNG PHỔ BIẾN 54 Lê Đình Thanh, Nguyễn Việt Anh WebAppDev 3.11.1 Dàn trang 54 3.11.2 Giá trị màu 55 3.11.3 Định dạng văn bản, phông chữ 55 3.11.4 Định dạng 56 3.11.5 Định dạng viền 56 3.11.6 Biến đổi 2D, 3D 56 3.12 CẬP NHẬT KIẾN THỨC VỀ CSS 56 B|i tập 57 Đọc thêm 57 CHƢƠNG QUẢN LÝ TRANG WEB BẰNG JAVASCRIPT 58 4.1 CƠ BẢN VỀ JAVASCRIPT 58 4.1.1 Định kiểu không tƣờng minh 58 4.1.2 Biến, hàm 59 4.1.3 Mảng 59 4.1.4 Đối tƣợng kế thừa 60 4.1.5 Xâu ký tự 63 4.2 MƠ HÌNH ĐỐI TƢỢNG TÀI LIỆU 64 4.3 MƠ HÌNH ĐỐI TƢỢNG TRÌNH DUYỆT 66 iv 4.4 QUẢN LÝ TRANG WEB 68 4.4.1 Lấy tham chiếu c{c đối tƣợng tài liệu 68 4.4.2 Đọc v| thay đổi giá trị thuộc tính đối tƣợng tài liệu 69 4.4.3 Thay đổi kiểu trình diễn đối tƣợng tài liệu 69 4.4.4 Xử lý kiện đối tƣợng tài liệu 70 4.4.5 Thêm mới, loại bỏ đối tƣợng tài liệu 73 4.4.6 Mở cửa sổ v| tƣơng t{c c{c đối tƣợng cửa sổ khác 74 4.4.7 Hộp thoại, in ấn 76 4.5 AJAX 77 4.6 JSON 80 4.7 VẤN ĐỀ CỦA TRÌNH DUYỆT 82 Lê Đình Thanh, Nguyễn Việt Anh WebAppDev 4.8 CẬP NHẬT KIẾN THỨC VỀ JAVASCRIPT 83 B|i tập 83 Đọc thêm 83 CHƢƠNG THƢ VIỆN PHÁT TRIỂN MẶT TRƢỚC 85 5.1 GIỚI THIỆU 85 5.2 JQUERY 86 5.2.1 Bao hàm jQuery 86 5.2.2 Cú pháp 86 5.2.3 Đọc v| thay đổi giá trị thuộc tính đối tƣợng tài liệu 87 5.2.4 Thay đổi kiểu trình diễn đối tƣợng tài liệu 88 5.2.5 Thêm mới, loại bỏ đối tƣợng tài liệu 89 5.2.6 Duyệt DOM 90 5.2.7 Xử lý kiện đối tƣợng tài liệu 93 5.2.8 Hiệu ứng 93 5.2.9 jQuery AJAX 95 5.3 BOOTSTRAP 97 5.3.1 Bao hàm Bootstrap 97 5.3.2 Hệ thống kiểu trình diễn CSS 98 v 5.3.3 Hệ thống lƣới 101 5.3.4 Các thành phần giao diện 103 5.3.5 JavaScript API 107 5.4 REACT 108 5.4.1 Thành phần phần tử React 108 5.4.2 Cập nhật giao diện xử lý kiện 109 5.4.3 Buộc liệu một-chiều trên-xuống 111 5.4.4 Chuyển liệu ngƣợc lên hàm gọi lại 112 5.4.5 JSX 116 5.4.6 Thiết lập môi trƣờng React 117 5.5 CẬP NHẬT KIẾN THỨC VỀ PHÁT TRIỂN MẶT TRƢỚC 118 Lê Đình Thanh, Nguyễn Việt Anh WebAppDev B|i tập 118 Đọc thêm 118 CHƢƠNG CÔNG NGHỆ WEB ĐỘNG 119 6.1 NHIỆM VỤ BÊN PHỤC VỤ 119 6.1.1 Tiếp nhận phân tích yêu cầu HTTP 119 6.1.2 Xử lý nghiệp vụ tạo đ{p ứng HTTP 120 6.1.3 Lƣu v| sử dụng trạng thái làm việc 121 6.1.4 Lƣu liệu bền vững 121 6.1.5 Đảm bảo an ninh 121 6.2 NGƠN NGỮ LẬP TRÌNH PHP 121 6.2.1 Tệp/trang PHP 122 6.2.2 Kiểu liệu, biến, hàm 123 6.2.3 Phép toán, biểu thức 125 6.2.4 Cấu trúc điều khiển 126 6.2.5 Xâu 129 6.2.6 Mảng 130 6.2.7 Lớp v| đối tƣợng 132 6.2.8 Giao diện 133 vi 6.2.9 Không gian tên 133 6.2.10 Xử lý ngoại lệ 135 6.3 PHÁT TRIỂN ỨNG DỤNG WEB VỚI PHP 136 6.4 MẪU THIẾT KẾ MVC 138 6.5 GIAO DIỆN CẤU PHẦN 142 6.6 WEB API 143 B|i tập 145 Đọc thêm 145 CHƢƠNG THAO TÁC CƠ SỞ DỮ LIỆU 146 7.1 TỔNG QUAN 146 7.2 MYSQLi 147 Lê Đình Thanh, Nguyễn Việt Anh WebAppDev 7.2.1 C|i đặt cấu hình 147 7.2.2 Mở v| đóng kết nối sở liệu 147 7.2.3 Cập nhật sở liệu 148 7.2.4 Truy vấn xử lý kết 148 7.2.5 Câu lệnh chuẩn bị trƣớc 149 7.2.6 Thực thi giao tác 151 7.3 PDO 152 7.3.1 Giao diện thao t{c sở liệu 152 7.3.2 C|i đặt cấu hình 153 7.3.3 Mở v| đóng kết nối sở liệu 153 7.3.4 Cập nhật sở liệu 154 7.3.5 Truy vấn xử lý kết 155 7.3.6 Câu lệnh chuẩn bị trƣớc 155 7.3.7 Thực thi giao tác 157 7.4 ÁNH XẠ THỰC THỂ ĐỐI TƢỢNG 158 B|i tập 160 Đọc thêm 160 CHƢƠNG LƢU TRẠNG THÁI VÀ ĐẢM BẢO AN NINH 161 vii 8.1 LƢU THÔNG TIN TRẠNG THÁI 161 8.1.1 Cookie 161 8.1.2 Phiên 164 8.2 ĐẢM BẢO AN NINH 166 8.2.1 Xử lý liệu vào 166 8.2.2 Quản lý truy cập 172 8.2.3 Đối phó với cơng 176 8.2.4 Bảo vệ liệu mật mã học 177 8.2.5 Một số rủi ro an ninh ứng dụng web 178 B|i tập 178 Đọc thêm 178 Lê Đình Thanh, Nguyễn Việt Anh WebAppDev CHƢƠNG VIẾT LẠI VÀ ĐỊNH TUYẾN URL 179 9.1 GIỚI THIỆU 179 9.2 VIẾT LẠI URL 180 9.2.1 Tổng quan 180 9.2.2 Viết lại với mod_rewite Apache 180 9.2.3 Một vài ví dụ thực tế 184 9.3 ĐỊNH TUYẾN URL 184 9.3.1 Tổng quan 184 9.3.2 C|i đặt đơn giản 186 9.3.3 C|i đặt theo MVC 186 9.4 RESTFUL URL, REST API 189 B|i tập 192 Đọc thêm 192 CHƢƠNG 10 KHUNG PHÁT TRIỂN MẶT SAU 193 10.1 GIỚI THIỆU 193 10.2 LARAVEL 193 10.2.1 Cấu trúc ứng dụng, nguyên lý hoạt động 193 10.2.2 Tạo ứng dụng 194 viii 10.2.3 Thiết lập thông tin định tuyến URL 194 10.2.4 Xây dựng lớp điều khiển 196 10.2.5 Xây dựng lớp mô hình 199 10.2.6 Thiết lập quan hệ mô hình 202 10.2.7 Xây dựng lớp giao diện 206 B|i tập 208 Đọc thêm 208 Lê Đình Thanh, Nguyễn Việt Anh WebAppDev ix Route::get('posts/{postId}/comments/{commentId}', function($pid, $cid) { 10 return 'Bạn đọc bình luận '.$cid.' viết'.$pid; }); 10.2.4 Xây dựng lớp điều khiển Tất lớp điều khiển đƣợc đặt thƣ mục app/Http/Controllers Việc đặt tên lớp điều khiển tạo tệp cài đặt lớp điều khiển phải tu}n theo nguyên tắc nhƣ sau:  Tất c{c lớp điều khiển phải đƣợc kế thừa từ lớp Controller Laravel Nếu muốn kế thừa từ lớp điều khiển khác lớp phải kế thừa từ lớp Controller Laravel  Tên lớp điều khiển phải trùng với tên tệp cài đặt lớp Ví dụ, muốn tạo lớp điều khiển có tên UserController tệp cài đặt phải có tên UserController.php Lê Đình Thanh, Nguyễn Việt Anh Có hai c{ch tạo lớp điều khiển Laravel C{ch thứ tạo thủ công nhƣ sau: WebAppDev  Tạo tệp c|i đặt lớp thƣ mục app/Http/Controllers  Đặt tên lớp l| tên tệp kế thừa Controller Laravel C{ch thứ hai để tạo lớp điều khiển sử dụng kịch artisian theo cú pháp: php artisan make:controller Ví dụ, câu lệnh php artisan make:controller BookController tạo lớp điều khiển có tên BookController với tệp c|i đặt app/Http/Controllers/BookController.php Khi lớp điều khiển đƣợc tạo, cơng việc định nghĩa thuộc tính phƣơng thức cho Mỗi phƣơng thức lớp điều khiển đƣợc gọi hành động (action) Mã nguồn ví dụ sau đ}y định nghĩa hành động show() cho lớp điều khiển BookController