Sử dụng ajax kết hợp với Laravel trong PHP

Ajax trong Javascript là một trong những kĩ thuật phổ biến nhất hiện nay. Việc sử dụng ajax cho trang web làm tăng trải nghiệm của người dùng, trang web sẽ không cần load lại mà vẫn thay đổi dữ liệu. Ajax chính là chức năng tốt nhất trong việc xây dựng giỏ hàng bằng PHP. Vậy làm thế nào để có thể kết hợp Ajax trong Jquery và Laravel trong PHP. Hãy cũng chúng tôi tìm hiểu kỹ thuật này nhé

Tải laravel với composer

– Composer là công cụ dùng để quản lý các thư viện trong PHP. Nó giúp chúng ta tiết kiệm khá nhiều thời gian với các thư viện cần thiết mà dự án của mình cần sử dụng. Với composer, chúng ta chỉ cần khai báo tên và version của thư viện mà bạn cần sử dụng, tất cả mọi việc composer sẽ xử lý cho bạn 1 cách đơn giản nhất.

– Sau khi cài đặt composer, bạn chỉ cần bật CMD ở nơi bạn muốn cài đặt laravel và chạy câu lệnh: composer create-project laravel/laravel lar-53 –prefer-dist

Chạy laravel trên localhost

– Bạn có thể sử dụng phần mềm xampp để có thể dễ dàng tạo server riêng cho mình để làm việc trên máy tính cá nhân của mình

Phần mềm Xampp tạo server
Phần mềm Xampp tạo server

– Để có thể chạy được laravel trên xampp, bạn cần vào cmd của thư mục và gõ lệnh: artisan serve

trang chủ laravel
Trang chủ laravel

Xây dựng cơ sở dữ liệu để tiền hành làm việc với ajax trong jquery

– Bước chuẩn bị đã xong, bây giờ chúng ta có thể tiến hành kết hợp giữa ajax và laravel để tạo nên 1 chức năng tốt hơn cho trang web của mình

B1: Tạo 1 table users với các trường: id, hoten, email

Sau khi tạo thành công table users trên phần mềm Xampp với tên csdl là ajax

Trong file .ENV trong laravel, hãy kết nối với cơ sở dữ liệu.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ajax
DB_USERNAME=root
DB_PASSWORD=

Tạo model cho bảng travels bằng terminal

php artisan make:model Users

Trong file App\Users.php chúng ta sửa model như sau

<?php

namespace App\Model;

use Illuminate\Database\Eloquent\Model;

class Users extends Model
{
public $timestamps = false;
public $fillable = [‘hoten’, ’email’];

}

Đây là cơ sở dữ liệu của tôi, nếu các bạn đặt tên khác thì có thể custom lại. Như vậy là chúng ta đã xong bước đầu, tạo csdl và kết nối laravel với csdl.

B2: Tạo giao diện cho form

<div class=”mt-5 mx-auto my-auto” id=”review”>

<form class=”form-comment ratings pt-2 ” action=”{{ route(‘index’) }}” method=”POST” id=”myForm”>
{{ csrf_field() }}
<div class=”row “>
<div class=”col-md-6 col-12 text-center”>
<label for=”inputname2″>Họ và tên</label>
<input type=”text” id=”inputname2″ class=”form-control mb-3″ placeholder=”Your name” name=”name”>
</div>
<div class=”col-md-6 col-12 text-center”>
<label for=”inputemail2″>Địa chỉ email</label>
<input type=”text” class=”form-control” id=”inputemail2″ placeholder=”Johndoe@gmail.com” name=”email”>
</div>
</div>

<div class=”row”>
<div class=”col-lg-6 offset-lg-3 col-12″>
<button type=”submit” class=”btn col-sm-12 my-2 btn-primary mb-lg-0 mb-4″ id=”myBtn”>Lưu</button>
</div>
</div>
</form>

// Javascript

<script type=”text/javascript”>
$(‘#myForm’).submit(function (e) {
e.preventDefault();

$.ajax({
type: ‘POST’,
cache: false,
url: “{{ route(‘ajax’) }}”,
data: {
“_token”: ‘{{ csrf_token() }}’,
“name”: $(“#inputname2”).val(),
“email”: $(“#inputemail2”).val(),
},
success: function (data) {
$(‘#review’).html(data);
console.log(‘Submission was successful.’);
},
error: function (data) {
console.log(‘An error occurred.’);
console.log(data);
},
});
});
</script>

<div>

Tại đây chúng ta sử dụng method post nên tôi sẽ truyền _token vào data để server có thể hiểu method post

B3: Tạo route và xử lý

Đầu tiên chúng ta sẽ tạo controller bằng terminal

php artisan make:controller IndexController

Trong route/web.php tạo 2 route:

Route::get(”, [
‘uses’ => ‘IndexController@index’,
‘as’ => ‘index’
]);

Route::post(‘ajax’, [
‘uses’ => ‘IndexController@ajax’,
‘as’ => ‘ajax’
]);

Tiếp theo chúng ta sẽ xử lý controller để hiển thị và để xử lý

Hiển thị form:

<?php

namespace App\Http\Controllers\Ajax;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Users;

class IndexController extends Controller
{

public function index()

{

return view(‘index’);

}

public function ajax(Request $request){

$name = $request->name;

$email = $request->email;

$user = new Users();

$user->hoten = $name;

$user->email = $email;

$user->save();

//Sau khi lưu vào cơ sở dữ liệu chúng ta sẽ trả về: Lưu thành công

return ‘<div>Lưu dữ liệu thành công</div>’

}

}

Như vậy là chúng ta vừa tạo 1 form thêm người dùng sử dụng ajax trong laravel, hy vọng sau bài viết này các bạn có thể áp dụng nó ở nhiều chức năng khác trên website của mình. Với việc kết hợp công nghệ ajax vào trang web để ngăn việc load lại trang web nhiều lần, trang web cũng bạn cũng sẽ mang lại trải nghiệp tốt hợp cho người dùng. Hãy cũng chúng tôi xây dựng những chức năng hay để phát triển website của mình phát triển một cách tốt nhất nhé.