Cách tắt báo lỗi và thực hiện lấy lại dữ liệu với Ajax DataTable

datatable ajax

1. Giới thiệu:

Sau khi tham gia một số dự án web sử dụng thư viện JavaScript DataTable mình đã biết đến Ajax DataTable với những chức năng tiện lợi cho một dữ liệu không quá lớn.

Ưu điểm: Thư viện giúp lấy dữ liệu nhanh, tự phân trang, tìm kiếm cơ bản mà không cần phải reload lại trang web khi sử dụng Ajax DataTable.

Khuyết điểm: JavaScript Datatable có một khuyết điểm là tải dữ liệu chậm nếu dữ liệu quá lớn vì nó không thật sự lấy theo số dòng dữ liệu mà bạn đặt ra. Bạn phải đưa toàn bộ bảng dữ liệu cho nó, nó sẽ tự phân trang lại theo cấu hình của bạn.

Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng Ajax DataTable và một số thủ thuật nhỏ như tắt báo lỗi khi lấy dữ liệu không thành công hay tự động lấy lại dữ liệu khi lấy dữ liệu thất bại.

2. Thủ thuật:

Ẩn thông báo lỗi: Để ẩn thông báo lỗi do lấy dữ liệu không được hoặc trong quá trình đỗ dữ liệu vào bị lỗi. Bạn chỉ cần thêm đoạn code sau vào phía trước hàm cấu hình Datatable.

$.fn.dataTable.ext.errMode = 'none';

Dưới đây là đoạn code sử dụng Ajax DataTabletự lấy lại dữ liệu nếu thất bại.

Trong đoạn code tôi có thêm đếm số lần lấy lại và giới hạn không quá 10 lần. Nếu trường hợp bạn đang kiểm thử có lỗi PHP thì sẽ ảnh hưởng tới việc Server tự ghi log lỗi PHP lại với dung lượng lớn vì hàm sẽ gọi lấy dữ liệu liên tục, điều này sẽ phiền bạn tìm kiếm file log để xóa nó đi.

Nếu bạn đang sử dụng Laravel Framework thì cần thêm csrf-token. Xem chi tiết tại đây.

<script type="text/javascript">	
	var countError = 0; //Tạo biến giới hạn reload ajax khi bị lỗi
	var DataList = $("#DataList").DataTable({
		"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tất cả"]], //Cấu hình số dòng lấy
		"iDisplayLength": 10, //Số dòng mặc định
		"processing": true, //Cấu hình hiển thị chờ lấy dữ liệu
		"searching": false, //Cấu hình hiển thị tìm kiếm
		"ajax": {
			"url": "<Đường dẫn lấy dữ liệu của bạn>",
			"type": "<Phương thức gửi>", //POST or GET
			"data": data, //Mảng dữ liệu truyền vào nếu có
			//Nếu lấy lỗi sẽ thực hiện lấy lại dữ liệu và không quá 10 lần				
			"error": function (){
				if(countError<9)
					DataList.ajax.reload( null, false );
				countError++;
			}
		},
		//Đỗ dữ liệu vào
		"columns": [
			{data: "<Tên trường dữ liệu>"},
			...
		],
		//Cấu hình cho ngôn ngữ tiếng việt với Bootstrap icon
		"language": {
			"sLengthMenu": "Hiển thị _MENU_ dòng mỗi trang",
			"oPaginate": {
				"sFirst": "",
				"sLast": "",
				"sNext": "",
				"sPrevious": ""
			},
			"sEmptyTable": "Không có dữ liệu",
			"sSearch": "Tìm kiếm:",
			"sZeroRecords": "Không có dữ liệu",
			"sInfo": "Hiển thị từ _START_ đến _END_ trong tổng số _TOTAL_ dòng được tìm thấy",
			"sInfoEmpty" : "Không tìm thấy",
			"sInfoFiltered": " (trong tổng số _MAX_ dòng)",
			"processing": "Đang tải dữ liệu!"
		},
		//Tạo tên class cho hoặc sẽ không sắp xếp cột
		"columnDefs": [ {
			"targets"  : 'no-sort',
			"orderable": false,
		}],
	});
</script>	

Cảm ơn các bạn đã đọc bài viết của mình. Hy vọng bài viết của mình có thể giúp ích cho các bạn đang dùng JavaScript DataTable.

Chúc các bạn thành công!

Chia sẻ: Ngụy Kim Hưng

Chia sẻ cách viết Ajax trong Laravel Framework

laravel ajax

Mình đang tham gia một dự án phần mềm viết bằng Laravel Framework. Trong quá trình tìm hiểu và thực hiện một chức năng cần thiết phải sử dụng JavaScript Ajax để không cần load lại trang để lấy dữ liệu hiển thị. Hôm nay mình sẽ chia sẻ cho các bạn một cách tạo một Ajax lấy dữ liệu trong Laravel Framework mong là sẽ giúp ích cho những bạn đã đọc bài chia sẻ này của mình.

Như các bạn đã biết Laravel Framework luôn yêu cầu một _token đối với URL phương thức POST vì thế việc cần làm trước tiên để Ajax của bạn có thể chạy với phương thức POST và gửi Request là khai báo cho một token. Các bạn thực hiện:

- Thêm thẻ <meta> vào <head> như sau: 

 <meta name="csrf-token" content="{{ csrf_token() }}">

- Tiếp theo trước đoạn code Ajax bạn thêm đoạn code Setup để gửi token trong Ajax:

$.ajaxSetup({
	headers: {
	'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	}
});
$.ajax({
	type: "POST",
	cache: false,
	url: "URL_POST",
	data: {DATA_REQUEST},
	dataType: "json",
	success: function(data){
	//Code của bạn
	},
	error: function(error){
	//Code của bạn
	}
});

Đây là cách để một Ajax chạy trong laravel. Những bài sau mình sẽ hướng dẫn cách xử lý dữ liệu data kiểu json trả về cho những bạn nào chưa biết.

Chúc các bạn thành công!

Chia sẻ: Ngụy Kim Hưng

Cách xóa bộ nhớ cache cho tên miền (Domain) trên Google

Trong quá trình khắc phục xử lý lỗi website tôi tình cờ phát hiện một trường hợp khiến nhà cung cấp dịch vụ website sẽ bị khách hàng phản ánh mà không rõ nguyên nhân lỗi. Đó chính là trường hợp khách hàng tìm kiếm từ khóa trang web của mình trên google nhưng thông tin hiển thị là sai về nội dung và khai click vào link web. Nguyên nhân là DNS tên miền website bị thay đổi do gia hạn trể hoặc chuyển sang một host khác chưa ổn định dẫn đến Google chưa cập nhật DNS website của bạn.

xoa cache cho domain

Để khắc phục vấn đề trên bạn cần yêu cầu Google xóa bộ nhớ cache và cập nhật lại DNS hiện tại của tên miền bằng cách click vào đây.

Sau khi đã gửi yêu cầu thì sau 5 hoặc 10 phút bạn hãy xóa dữ liệu duyệt web trên máy tính gặp vấn đề này rồi vào lại.

Mong bài viết này sẽ giúp ích cho bạn!

Chia sẻ: Ngụy Kim Hưng

Chia sẻ cách sử dụng một module Laravel API (Laravel API Key Auth)

laravel api

Hướng dẫn các bước cài đặt

Trước tiên chạy lệnh cmd sau:

composer require ejarnutowski/laravel-api-key

Thêm đoạn code khai báo trong mảng providers trong file config/app.php

'providers' => [
    ...
    Ejarnutowski\LaravelApiKey\Providers\ApiKeyServiceProvider::class,
],

 Chép các file trong migration vào database/migrations với lệnh sau:

$ php artisan vendor:publish

Chạy lệnh thực thi các file tạo bảng dữ liệu:

$ php artisan migrate

Sau khi thực thi lệnh sẽ tạo 3 bảng sau:

api_keys
api_key_access_events
api_key_admin_events

Chạy lệnh tạo một Key ngẫu nhiên:

php artisan apikey:generate {name}

 Ví dụ: Tạo một key với tên là app1 (Lưu ý: Tên không được có ký tự đặt biệt)

$ php artisan apikey:generate app1
  
// API key created
// Name: app1
// Key: 0ZdNlr7LrQocaqz74k6usQsOsqhqSIaUarSTf8mxnHuQVh9CvKAfpUy94VvBmFMq

 Cách thay đổi trạng thái sử dụng cho key.

Vô hiệu hóa key vớí lệnh cmd sau:

$ php artisan apikey:deactivate app1
  
// Deactivated key: app1

 

Kích hoạt key với lệnh cmd sau:

$ php artisan apikey:activate app1
  
// Activated key: app1

 

Cách xóa một key với lệnh cmd sau:

$ php artisan apikey:delete app1
  
// Are you sure you want to delete API key 'app1'? (yes/no) [no]:
// > yes
  
// Deleted key: app1

 

Cách hiển thị danh sách các key với dòng lệnh cmd hoặc có thể vào cơ sở dư liệu xem bảng dữ liệu "api_keys".

$ php artisan apikey:list -D
 
// +----------+----+-------------+---------------------+------------------------------------------------------------------+
// | Name     | ID | Status      | Status Date         | Key                                                              |
// +----------+----+-------------+---------------------+------------------------------------------------------------------+
// | app1     | 5  | deleted     | 2017-11-03 13:54:51 | 0ZdNlr7LrQocaqz74k6usQsOsqhqSIaUarSTf8mxnHuQVh9CvKAfpUy94VvBmFMq |
// | app2     | 1  | deleted     | 2017-11-02 22:34:28 | KuKMQbgZPv0PRC6GqCMlDQ7fgdamsVY75FrQvHfoIbw4gBaG5UX0wfk6dugKxrtW |
// | app3     | 3  | deactivated | 2017-11-02 23:12:34 | IrDlc7rSCvUzpZpW8jfhWaH235vJAqFwyzVWpoD0SLGzOimA6hcwqMvy4Nz6Hntn |
// | app4     | 2  | active      | 2017-11-02 22:48:13 | KZEl4Y2HMuL013xvg6Teaa7zHPJhGy1TDhr2zWzlQCqTxqTzyPTcOV6fIQZVTIU3 |
// +----------+----+-------------+---------------------+------------------------------------------------------------------+

 

Cách sử dụng:

Yêu cầu khai báo khóa API: có 2 cách

Cách yêu cầu khai báo tại Route.

Route::get('api/user/1', function () {
    //
})->middleware('auth.apikey');

 

Cách yêu cầu khai báo tại Controller.

class UserController extends Controller
{
    /**
     * Instantiate a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth.apikey');
    }
}

 

Đường dẫn chỉ cho phép truy cập với khai báo header "X-Authorization" có giá trị là khóa đã kích hoạt.

X-Authorization: KuKMQbgZPv0PRC6GqCMlDQ7fgdamsVY75FrQvHfoIbw4gBaG5UX0wfk6dugKxrtW

 

Trường hợp với khóa chưa được khai báo hoặc khóa chưa được kích hoạt sẽ trả về giá trị như sau:

{
    "errors": [
        {
            "message": "Unauthorized"
        }
    ]
}

 

Nhật ký được lưu lại:

Mỗi yêu cầu khóa API vượt qua thành công sẽ được ghi lại trong bảng api_key_access_events với thông tin sau: api_key_id, ip_address, url, created_at, updated_at

Bất cứ khi nào một khóa API được tạo, kích hoạt, hủy kích hoạt hoặc xóa, một bản ghi sẽ được ghi vào bảng api_key_admin_events. Mỗi bản ghi chứa các thông tin sau: api_key_id, ip_address, event, created_at, updated_at

Đoạn code PHP thực thi link API và hiển thị kết quả trả về:

<?php
     $get_url = '{put_url_here}';
$ch = curl_init($get_url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('X-Authorization: {key}'));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
curl_close($ch);
var_dump($result);
?>

 

Chia sẻ: Ngụy Kim Hưng

Tham khảo link nguồn: Authorize requests to your Laravel application with API keys 

Tự thiết kế giao diện Wordpress, trang con Wordpress nhanh chóng bằng plugin Brizy.

Tự thiết kế giao diện Wordpress, trang con Wordpress nhanh chóng bằng plugin Brizy.

Bước 1: Vào link: https://wordpress.org/plugins/brizy để download plugin Brizy và cài đặt plugin vào Wordpress.

Bước 2: Sau khi cài đặt thành công vào Wordpress, ta bắt đầu tiền hành thiết kế giao diện trang web.

W1

Activate Brizy For: Plugin Brizy có hiển thi trong trang nào. Mặc định Plugin sẽ hiển thị trên trang và trong bài viết.

Bước 3: Tại giao diện templates, chọn Add new để tạo theme mới.

W2

Bước 4: Đặt tên cho Template và chọn Edit with để tới với giao diện thiết kế.

W3

Bước 5: Tai giao diện Brizy, thiết kế và cài đăt giao diện như mong muốn.

W4

Đây là giao diện mẫu được thiết kế từ plugin Brizy.

W5

Chúc các bạn thành công.

Người chia sẽ: Nguyễn Duy.

Chat với Agitech