1. Client-side Language and Server-side Language
1.1 Client-side Language
Ngôn ngữ phía người dùng cơ bản bao gồm html, css, javascript, …đi kèm với các FrameWork như Bootstrap, react, vue.
- Html, css đóng vai trò xây dựng lên khung trang web
- JS tạo sự tương tác giữa người dùng và web
1.2 Server-side Language
- Ngôn ngữ phía server có thể là: PHP, python, javascript, java, ruby, golang, … Tiếp nhận và sử lý các yêu cầu gửi lên từ client-side
- Các Framework tương ứng: Laravel, Django, Express Js, Springboot, …
2. Database
Database là nơi lưu lại mọi dữ liệu của trang web mà người lập trình viên muốn. Ví du như thông tin đăng nhập, thông tin các sản phẩm, …
Một cơ sở dữ liệu Database cho phép nhiều người dùng đồng thời truy cập trong cùng một thời gian.
Các Loại Database hiện nay:
- Cơ sở dữ liệu dạng File như mongodb, file text, dạng file ascii, ..
- Cơ sở dữ liệu dạng quan hệ như: MS SQL Server, Postgres, Oracle
- Database bán cấu trúc như: XML
3. Xampp/Lampp stack: install and configure
3.1 Xampp là gì?
Xampp là một phần mềm tích hợp nhiều loại server như apache, tomcat, … Các loại cơ sở dữ liệu như mysql.
- Chữ X đầu tiên là viết tắt của hệ điều hành mà nó hoạt động với: Linux, Windows và Mac OS X.
- Apache: Web Server mã nguồn mở Apache là máy chủ được sử dụng rộng rãi nhất trên toàn thế giới để phân phối nội dung Web. Ứng dụng được cung cấp dưới dạng phần mềm miễn phí bởi Apache Software Foundation.
- PHP: Ngôn ngữ lập trình phía máy chủ(server side), PHP cho phép người dùng tạo các trang Web hoặc ứng dụng động. PHP có thể được cài đặt trên tất cả các nền tảng và hỗ trợ một số hệ thống cơ sở dữ liệu đa dạng.
- MySQL / MariaDB: Trong MySQL, XAMPP chứa một trong những hệ quản trị cơ sở dữ liệu quan hệ phổ biến nhất trên thế giới. Kết hợp với Web Server Apache và ngôn ngữ lập trình PHP, MySQL cung cấp khả năng lưu trữ dữ liệu cho các dịch vụ Web. Các phiên bản XAMPP hiện tại đã thay thế MySQL bằng MariaDB (một nhánh của dự án MySQL do cộng đồng phát triển, được thực hiện bởi các nhà phát triển ban đầu).
3.2 Cài đặt và config Xampp
Có đủ các phiên bản để cài đặt cho window/linux/os. Tải xuống tại đây
Trên xampp, webserver mặc định sẽ nghe ở cổng 80, mysql sẽ nghe ở cổng 3306. Nếu như 1 trong 2 cổng bị chiếm bởi 1 dịch vụ nào đó đang chạy, thì cần config lại port ứng dụng bằng cách sau.
- Config cổng cho webserver (default: 80)
- B1: Tìm và chọn nút config của apache
- B2: Mở file httpd.conf, Nhấn tổ hợp phím Ctrl+F tìm tất cả cổng 80, và sửa lại thành 1 cổng nào đó (giả sử 81)
- B3: Đã hoàn thành, cổng mặc định đã thay đổi từ 80 sang 81.
- Config cổng cho mysql (default: 3306)
- B1: Chọn config của apache, mở file config.inc.php, tìm và thay thế tất cả cổng mặc định 3306 sang 3325
- B2: Chọn config của mysql, mở file my.ini, tìm và thay thế tất cả cổng mặc định 3306 sang 3325
- B3: Đã hoàn thành, cổng mặc định đã thay đổi từ 3306 sang 3325.
4. Web framework
Mô hình web framework được xây dựng trên mô hình MVC.
MVC gồm 3 thành phần là model, view, controller.
1. Controller
- Controller có nhiệm vụ nhận request từ router sau đó xử lý dữ liệu, gọi tới model nếu cần, và cuối cùng là trả về cho view.
2. View - Nhận chỉ thị của controller để render ra template.
3. Model - Liên kết tới database, lấy dữ liệu và trả về theo yêu cầu của controller.
5. Client and Server side rendering
5.1 Server side rendering
Server side rendering là cách thông thường cho việc render trang web ở trình duyệt. Cách truyền thống để rendering nội dung web như các bước dưới đây :
- Người dùng gửi một yêu cầu tới webserver
- Phía server kiểm tra và chuẩn bị nội dung HTML sau khi đã đi qua một lượt các script có trong trang web (bao gồm các link thư viện như cdn)
- Các đoạn HTML, css được gửi tới trình duyệt của người dùng cho việc render.
- Trình duyệt tải về HTML và render (render: là quá trình chuyển code thành giao diện, làm các trang có thể nhìn thấy với người dùng)
- Trình duyệt sau đó tải về Javasciprt(JS) và tiến hành thực thi JS, nó làm cho trang web có thể tương tác
- Việc sử dụng các thư viện cho FE được link bằng cdn, giúp server giảm bớt áp lực.
5.2 Client side rendering
Client side rendering là việc trình duyệt nhận file html, css ,js trả về và render ra giao diện và các hiệu ứng tương tác với website.
- Trình duyệt tải HTML và JS trong khi nhìn thấy một biểu tượng loading
- Render html và sau khi trình duyệt lấy JS về, nó sẽ tạo các yêu cầu API thông qua Ajax và lấy về các nội dung động và xử lí chúng để render ra nội dung cuối cùng.
- Nội dung cuối cùng sẽ được render, quá trình xử lí DOM trên trình duyệt người dùng.
6. ORM (Object Relational Mapping)
6.1 ORM là gì?
ORM là 1 kỹ thuật lập trình giúp ánh xạ các đối tượng được định nghĩa trong các class thành các bản ghi dữ liệu trong database.
6.2 Cơ chế hoạt động của ORM
- ORM là gói gọn CSDL trong 1 object
- Ví dụ trong laravel, sử dụng Eloquent ORM được thể hiện ở chỗ nó là 1 song ánh giữa 1 đối tượng trong code và 1 bảng trong db
7. REST and SOAP
7.1 REST
7.1.1 REST Là Gì?
REST là một dạng chuyển đổi cấu trúc dữ liệu. Nó sử dụng HTTP đơn giản để tạo cho giao tiếp giữa các máy. Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một URL để xử lý dữ liệu.
API (Application Programming Interface) là giao diện lập trình ứng dụng giúp tạo ra các phương thức kết nối với các thư viện và ứng dụng khác nhau.
REST API là một ứng dụng chuyển đổi cấu trúc dữ liệu có các phương thức để kết nối với các thư viện và ứng dụng khác. API có thể sẽ được trả về dữ liệu mà người dùng cần cho chính ứng dụng với những kiểu dữ liệu được dùng phổ biến như JSON hoặc XML.
7.1.2 Cấu Trúc Của REST API
REST thường hoạt động chủ yếu dựa vào những giao thức HTTP, các cơ sở hoạt động cơ bản nêu trên sẽ được sử dụng những phương thức HTTP riêng biệt:
1. GET: Trả về với một Resource hoặc có một danh sách Resource.
2. POST: Nó hỗ trợ tạo mới một Resource.
3. PUT: Thường hỗ trợ cho việc cập nhật các thông tin cho Resource.
4. DELETE: Xóa một Resource.
Đây là phương thức hoạt động được gọi là Crud tương ứng với một Create, Read, Update, Delete ý nghĩa theo thứ tự là: Tạo, đọc, sửa và xóa. Fomat cho API là JSON hoặc XML.
Ví dụ
- GET/users: có thể lấy danh sách của các người dùng.
- GET/users/123: sẽ lấy các thông tin của một người dùng có id=123
- GET/posts: lấy tất cả mọi bài post.
- GET/users/123/projects: Sẽ lấy toàn bộ các projects của user với id=123.