Laravel (1): Web framework - Composer

 

1         Tổng quan

2         Web framework là gì?

Web framework (hay web application framework) là một “bộ khung phát triển phần mềm” (software framework), được sử dụng để  hỗ trợ quá trình tạo ra các ứng dụng web.

Web framework được tạo ra từ nhiều thành phần như web services, web resources, và web APIs.

Web framework cung cấp “cách thức chuẩn”, và tự động hóa một số công đoạn để phát triển và triển khai các ứng dụng web. Ví dụ, một web framework thường cung cấp sẵn các thư viện để truy cập cơ sở dữ liệu, các khuôn mẫu (templating framework), quản lý session và khuyến khích việc tái sử dụng các đoạn mã (code reuse).

Mọi người hay sử dụng web framework để tạo các các website động, tuy nhiên, cũng có thể sử dụng nó để tạo ra website tĩnh.

Một số web framework: ASP.NET core (C#), Django (Python), Laravel (PHP), Spring (Java), Ruby on Rails (Ruby), Express (JavaScript).

Hầu hết các web framework được xây dựng và làm việc theo mô hình/kiến trúc MVC.

3         Thiết lập môi trường phát triển

3.1       Yêu cầu hệ thống

Tùy theo phiên bản của Laravel, sẽ có các yêu cầu về hệ thống khác nhau. Ví dụ:

– PHP >= 7.1.3 cho Lavavel 5.6

– OpenSSL PHP extension

– PDO PHP extension

– Mbstring PHP extension

– Tokenizer PHP extension

– XML PHP extension (Laravel 5.5+)

– Ctype PHP extension (Laravel 5.6+)

– JSON PHP extension (Laravel 5.6+)

– BCMath PHP extension (Laravel 5.7+)

3.2        Composer

3.2.1       Tổng quan và cài đặt

Composer là công cụ dùng để quản lý các thư viện (dependency management) trong PHP. Bạn dùng composer để khai báo và quản lý các thư viện mà dự án có sử dụng; composer sẽ tự động thực hiện việc cài đặt và nâng cấp các thư viện.

Composer quản lý các thư viện trong mỗi dự án, nó sẽ cài đặt các thư viện vào một thư mục nhất định (ví dụ vendor) trong dự án. Composer hoạt động giống như npm của Node.

Giả sử:

– Bạn đang tạo một dự án mà nó có sử dụng một số thư viện (ví dụ thư viện Abc)

– Các thư viện Abc lại sử dụng tới các thư viện khác nữa (ví dụ thư viện Xyz)

Composer sẽ:

– Cho phép bạn khai báo các thư viện sẽ sử dụng trong dự án

– Tìm, tải về và cài đặt các thư viện (Abc và Xyz) vào trong dự án

– Bạn có thể cập nhật tất cả các thư viện bằng một lệnh  

Composer là phần mềm đa nền tảng (cross-platform); máy tính cần phải cài đặt PHP 5.3.2+ trước khi cài đặt composer.

Vào trang web https://getcomposer.org/download/ để tải composer về máy và tiến hành cài đặt.

Sau khi cài đặt xong, mở cửa sổ dòng lệnh (ví dụ cmd), gõ dòng lệnh composer –v, nếu có hiển thị thông tin về phiên bản của composer là việc cài đặt đã được.

3.2.2       Sử dụng composer

Để minh họa việc sử dụng composer, chúng ta sẽ dùng composer để quản lý thư viện monolog, đây là thư viện cho phép bạn dùng để ghi lại thông tin (logging) trong quá trình chạy của một dự án. Sử dụng monolog để theo dõi, tìm và sửa lỗi chương trình (debug).

Để bắt đầu sử dụng composer trong dự án, chúng ta chỉ cần có một tập tin, tên là composer.json. Tập tin này liệt kê các thư viện (dependencies) mà dự án sẽ sử dụng và các thông tin đi kèm khác. Nên để tập tin composer.json ở thư mục gốc của dự án (top-most directory).

Nội dung của tập tin composer.json được viết dưới dạng JSON (dạng văn bản và gồm các cặp name : value)

Từ khóa (name) đầu tiên (thường là duy nhất) trong tập tin composer.json là require, dùng để báo cho composer biết tên thư viện sẽ sử dụng.

Ví dụ:

{

    "require" : {

        "monolog/monolog" : "1.0.*"

    }

}

Trường value của từ khóa “require” là một cặp name:value khác ("monolog/monolog" : "1.0.*"), cho biết tên của thư viện (monolog/monolog) và phiên bản (1.0.*). Dựa vào thông tin này, composer sẽ tìm các thư viện trong kho chứa (repository) được chỉ định hoặc trong kho chứa mặc định.

– Kho chứa mặc định là Packagist (https://packagist.org/)

– Kho chứa được chỉ định là kho chứa được khai báo tường minh trong tập tin composer.json

Ở ví dụ trên, do trong tập tin composer.json không có khai báo kho chứa, nên composer sẽ ngầm định là thư viện được lưu tại Packagist.

Tên của thư viện

Tên của thư viện (package name) gồm hai phần: tên của tổ chức tạo ra thư viện (vendor) và tên cụ thể của thư viện. Tên cụ thể của thư viện có thể trùng nhau, ví dụ có thể hai tổ chức (ví dụ teo, ti) đều tạo ra thư viện json, khi đó sẽ có hai thư viện có tên là teo/json và ti/json.

Ràng buộc về phiên bản của thư viện

Ở ví dụ đang xét, chúng ta yêu cầu thư viện monolog phiên bản 1.0.*; nghĩa là chỉ chấp nhận các phiên bản >= 1.0 và < 1.1.

Composer tìm thư viện như thế nào

Khi tìm thư viện, composer ưu tiên tìm trong kho chứa được khai báo tường minh trong tập tin composer.json trước, nếu không có, nó sẽ tiếp tục tìm kiếm trong kho chứa mặc định (Packagist).

Cài đặt thư viện

Để cài đặt các thư viện đã được chỉ định trong composer.json, sử dụng lệnh install, cụ thể:

composer install

Khi chạy lệnh này sẽ có một trong hai tình huống xảy ra:

– Cài đặt khi không có tập tin composer.lock

– Cài đặt khi có tập tin composer.lock

Tập tin composer.lock được sử dụng để ghi tên và phiên bản của các thư viện thực sự đã được tải về dự án.

Cài đặt khi không có tập tin composer.lock

Nếu bạn chưa từng chạy lệnh intall, sẽ không có tập tin composer.lock trong dự án. Composer sẽ tải tất cả thư viện được khai báo trong composer.json vào thư mục vendor (theo quy ước, vendor là thư mục chứa tất cả các mã nguồn lấy từ bên ngoài vào (third-party). Ở ví dụ đang xét, các tập tin của thư viện monolog sẽ được chứa trong vendor/monolog/monolog/. Khi composer tải thư viện xong, nó sẽ ghi lại tên và phiên bản của các thư viện đã được tải về vào tập tin composer.lock. Bạn nên sử dụng phần mềm quản lý phiên bản (ví dụ Git) để khóa (commit) tập tin composer.lock lại, mục đích để mọi người trong dự án sẽ sử dụng thống nhất cùng một phiên bản của thư viện.

Cài đặt khi có tập tin composer.lock

Nếu trong thư mục dự án đã có tập tin composer.lock và cả tập tin composer.json, nghĩa là bạn hoặc thành viên nào đó trong nhóm đã chạy lệnh install trước đó rồi. Trong trường hợp này, composer sẽ tìm, tải và cài đặt các thư viện được liệt kê trong composer.json, tuy nhiên, nó sẽ tham chiếu tới tập tin composer.lock để tải đúng phiên bản đã được ghi lại trước đó (mặc dù thư viện đó đã có phiên bản mới hơn).

3.2.3       Thực hành sử dụng composer trên Windows

– Tạo thư mục dự án (ví dụ testcomposer)

– Trong thư mục testcomposer, tạo tập tin composer.json

– Trong tập tin composer.json, chỉ ra các thư viện cần cài đặt vào dự án, ví dụ:

[composer.json]

{

    "require" : {

        "monolog/monolog" : "1.0.*"

    }

}

Có thể vào trang https://packagist.org/ để tìm thêm các thư viện cần cài đặt

– Mở chương trình dòng lệnh bất kì, gõ lệnh composer install để thực hiện tải và cài đặt các thư viện từ trên mạng về dự án

– Quá trình cài đặt cũng sẽ tạo ra thư mục vendor để chứa các thư viện, tạo tập tin composer.lock. Mở thư mục testcomposer để kiểm tra

– Mở tập tin composer.lock để xem các thông tin đã được ghi lại

[Màn hình kết quả, sau khi chạy lệnh composer install]

Maxsys@DESKTOP-7LPDOL6 MINGW64 /e/testcomposer

$ composer install

No lock file found. Updating dependencies instead of installing from lock file. Use composer update over composer install if you do not have a lock file.

Loading composer repositories with package information

Updating dependencies

Lock file operations: 1 install, 0 updates, 0 removals

  - Locking monolog/monolog (1.0.2)

Writing lock file

Installing dependencies from lock file (including require-dev)

Package operations: 1 install, 0 updates, 0 removals

  - Downloading monolog/monolog (1.0.2)

  - Installing monolog/monolog (1.0.2): Extracting archive

Generating autoload files

3.2.4       Sử dụng composer để tạo dự án

Composer xem mỗi dự án là một package, ví dụ như thư mục testcomposer đã tạo ở phần trên là một dự án, cũng là một package.

Bạn có thể sử dụng composer để tạo mới một dự án từ dự án có sẵn (thường gọi là một package). Dự án có sẵn có thể là một framework (ví dụ Laravel), hoặc một dự án đang phát triển, bạn sẽ dựa trên đó để phát triển tiếp.

Tạo một dự án từ dự án có sẵn nó tương đương với việc bạn dùng phần mềm quản lý mã nguồn (ví dụ Git) để lấy một bản sao của dự án gốc về máy (clone), rồi chạy tiếp lệnh composer install.

Chức năng này của composer cho phép bạn thực hiện một số việc sau:

– Triển khai/chạy (deploy) các dự án

– Lấy một dự án có sẵn về và phát triển tiếp

– Khởi tạo dự án nền (khung) để các thành viên trong nhóm không mất thời gian thiết lập/cài đặt các thành phần căn bản

Để tạo dự án mới bằng composer, sử dụng lệnh create-project, chỉ ra tên của dự án gốc và tên của dự án mới, ngoài ra có thể có thêm các tham số khác.

Ví dụ để tạo dự án myshopping từ dự án gốc là framework laravel thì dùng lệnh sau:

composer create-project --prefer-dist laravel/laravel teoshopping "5.8.*"

­Trong đó, tham số --prefer-dist nghĩa là ưu tiên lấy bản gốc là bản phân phối (dist, distribution), 5.8.* là phiên bản của framework laravel.

-----

Cập nhật: [16/5/2021]

------

JSON (2) - JSON và AJAX

 Xem bài trước: JSON (1) - Làm quen với JSON

-----

1         JSON và AJAX

1.1       Tổng quan về AJAX

AJAX là viết tắt của Asynchronous Javascript And XML, là một phương pháp, sử dụng JavaScript để trao đổi dữ liệu giữa trình duyệt và máy chủ (web server).

Để trao đổi dữ liệu, AJAX sử dụng đối tượng XMLHttpRequest, đây là đối tượng có sẵn của JavaScript.

Vì XMLHttpRequest là một đối tượng của JavaScript, nên nó sẽ có sẵn các thuộc tính và phương thức đi kèm, nhằm thực hiện các chức năng cần thiết. Ví dụ, sử dụng XMLHttpRequest để gửi yêu cầu từ client tới server và nhận dữ liệu do server trả về.

1.2       Cấu hình phía Server

Phần này sẽ hướng dẫn các bước để đưa tập tin dữ liệu JSON lên web server:

Ví dụ: tạo tập tin dữ liệu JSON có tên là sinhVien.json

[sinhVien.json]

[

    { 

        "ten": "Tèo", 

        "tuoi": 20, 

        "Toan": 7, 

        "tiengAnh": 8, 

        "lapTrinh": 9, 

        "diemTB": null, 

        "totNghiep": null, 

        "lienLac": { "email": "teo@gmail.com", "phone": "0999.987.123" } 

    },

    { 

        "ten": "Tí", 

        "tuoi": 20, 

        "Toan": 7, 

        "tiengAnh": 7, 

        "lapTrinh": 5, 

        "diemTB": null, 

        "totNghiep": null, 

        "lienLac": { "email": "ti@gmail.com", "phone": "0999.987.123" } 

    },

    { 

        "ten": "Mùi", 

        "tuoi": 20, 

        "Toan": 6, 

        "tiengAnh": 8, 

        "lapTrinh": 8, 

        "diemTB": null, 

        "totNghiep": null, 

        "lienLac": { "email": "mui@gmail.com", "phone": "0999.987.123" } 

    }

]

Tạo tài khoản và đăng nhập vào trang github.com.

Tạo một repository có tên dạng một trang web, ví dụ legiacong.github.io.

Clone repository legiacong.github.io về máy cục bộ, có thể dùng lệnh:

E:\>git clone https://github.com/legiacong/legiacong.github.io.git

Cloning into 'legiacong.github.io'...

warning: You appear to have cloned an empty repository.

Chép tập tin sinhVien.json vào thư mục vừa clone về máy (legiacong.github.io)

Thực hiện add tập tin sinhVien.json và commit

E:\legiacong.github.io>git add sinhVien.json

 

E:\legiacong.github.io>git commit -m "them du lieu"

[master (root-commit) f08fcc7] them du lieu

 1 file changed, 32 insertions(+)

 create mode 100644 sinhVien.json

Đẩy repository (kho chứa) lên lại trang github.com

E:\legiacong.github.io>git push

Vậy là đã tạo được dữ liệu JSON trên web server, nhập đường dẫn để kiểm tra, ví dụ:

https://legiacong.github.io/sinhVien.json

Sẽ thấy dữ liệu JSON hiển thị trên trình duyệt.

1.3       Hoạt động của AJAX

Hoạt động của AJAX được minh họa trong hình sau (nguồn w3schools.com):

Bước 1: Trình duyệt hoặc người dùng kích hoạt một sự kiện để bắt đầu một phiên làm việc của AJAX (ví dụng người dùng sẽ bấm vào nút "Lấy thông tin sinh viên từ server").

<input type="button" id="btn" value="Lấy thông tin sinh viên từ server">

    <script>

        var btn = document.getElementById('btn');

        btn.addEventListener('click', function() {

 

        });

    </script>

Phiên làm việc này bắt đầu bằng cách tạo ra một đối tượng XMLHttpRequest:

var myRequest = new XMLHttpRequest();

Sử dụng phương thức open() của đối tượng XMLHttpRequest để cấu hình các thông tin cho một request, gồm kiểu của request là GET (lấy thông tin từ server), URL của server sẽ nhận request gửi đến.

myRequest.open('GET', 'https://legiacong.github.io/sinhVien.json');

Sử dụng sự kiện onload của JavaScript để thực hiện các xử lý khi việc gửi request lên server thành công và dữ liệu server trả về được đặt trong myRequest.responseText

myRequest.onload = function() {

                console.log(myRequest.responseText);

            };

Cuối cùng là gửi request lên server:

myRequest.send();

Bước 2: Server nhận được request, nó sẽ thực hiện các xử lý và gửi dữ liệu trả về cho trình duyệt. Ví dụ: server sẽ gửi dữ liệu trong tập tin sinhVien.json về trình duyệt.

Bước 3: Trình duyệt nhận được dữ liệu từ server, thực hiện xử lý và hiển thị dữ liệu lên giao diện bằng JavaScript. Không cần tải lại toàn bộ trang web.

Tham khảo toàn bộ đoạn mã của ba bước ở trên:

[testajax.html]

<body>

    <input type="button" id="btn" value="Lấy thông tin sinh viên từ server">

    <script>

        var btn = document.getElementById('btn');

        btn.addEventListener('click', function() {

            var myRequest = new XMLHttpRequest();

            myRequest.open('GET', 'https://legiacong.github.io/sinhVien.json');

            myRequest.onload = function() {

                console.log(myRequest.responseText);

            };

            myRequest.send();

        }); 

    </script>

</body>

1.4       Xử lý dữ liệu tại trình duyệt khi AJAX trả về

Trong phần hoạt động của AJAX, tại bước 3, dữ liệu server trả về thuộc dạng JSON (dạng text), do vậy cần chuyển dữ liệu JSON về dạng đối tượng của JavaScript. Sử dụng hàm JSON.parse() của JavaScript.

var myData = JSON.parse(myRequest.responseText);

Tạo phần tử HTML để hiển thị thông tin.

<div id="danh-sach-sv"></div>

Dùng JavaScript để hiển thị thông tin

var sinhVienContainer = document.getElementById('danh-sach-sv');

…

function renderHTML(data) {

            var htmlString = "";

            for (var i = 0; i < data.length; i++ ) {

                htmlString += "<p>" + data[i].ten + "</p>";

            }

            sinhVienContainer.insertAdjacentHTML('beforeend', htmlString);

        }

Tham khảo mã nguồn:

[testajax.html]

<body>

    <input type="button" id="btn" value="Lấy thông tin sinh viên từ server">

    <div id="danh-sach-sv"></div>

    <script>

        var sinhVienContainer = document.getElementById('danh-sach-sv');

        var btn = document.getElementById('btn');

        btn.addEventListener('click', function() {

            var myRequest = new XMLHttpRequest();

            myRequest.open('GET', 'https://legiacong.github.io/sinhVien.json');

            myRequest.onload = function() {

                if (myRequest.status >= 200 && myRequest.status < 400) {

                    var myData = JSON.parse(myRequest.responseText);

                    renderHTML(myData); 

                } else {

                    console.log("Da ket noi toi server, nhung server gui ve mot thong bao loi");

                }

            };

            // ham xu ly khi AJAX bi loi

            myRequest.onerror = function() {

                console.log("Loi ket noi");

            }

            myRequest.send();

        }); 

        function renderHTML(data) {

            var htmlString = "";

            for (var i = 0; i < data.length; i++ ) {

                htmlString += "<p>" + data[i].ten + "</p>";

            }

            sinhVienContainer.insertAdjacentHTML('beforeend', htmlString);

        }

    </script>

</body>

-----

Cập nhật [6/11/2020]