عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول
دریافت id آخرین رکورد درج شده در جدول در لاراول 5.8
19 اردیبهشت 1398
لودینگ هنگام لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView
21 اردیبهشت 1398
عملیات Real Time CRUD با استفاده از فایربیس گوگل (Google Firebase) در لاراول ، در این پست از تجاری اپ قصد داریم به شما عملیات Real Time CRUD با استفاده از فایربیس گوگل آموزش دهیم.با ما همراه باشید و مراحل زیر را دنبال کنید:
همچنین بخوانید: نحوه لاگین کردن در سایت با اکانت گوگل در لاراول
ایجاد پروژه فایربیس
ابتدا یک پروژه firebase ایجاد کنید و اطلاعات لازم را وارد کنید. برای ایجاد یک پروژه فایربیس به آدرس https://firebase.google.com/ بروید.
بعد از کلیک بر روی Add Project یک پنجره پاپ آپ مانند تصویر زیر را مشاهده خواهید کرد:
نام پروژه فایربیس را وارد کنید ، تیک مربوط به پذیرفتن شرایط و قوانین را بزنید و سپس بر روی دکمه Create project کلیک کنید.
همانطور که در بالا مشاهده می کنید پروژه ما ایجاد شد.حالا بر روی دکمه Continue کلیک کنید.صفحه مربوط به مرور اجمالی پروژه شما باید مانند تصویر بالا باشد.
بعد کلیک بر روی دکمه Continue شما وارد صفحه داشبورد خود خواهید شد ، در این صفحه Web را انتخاب کنید.سپس یک صفحه دیگر برای شما باز می شود که بعد از وارد کردن اطلاعات خواسته شده یک صفحه شامل پیکربندی وب فایربیس برای شما باز خواهد شد.
ما با موفقیت یک پروژه فایربیس را ایجاد کردیم و اطلاعات لازم (apiKey ، authDomain ، database URL) را دریافت کردیم.
ایجاد پروژه لاراول برای عملیات Real Time CRUD
برای ایجاد یک پروژه لاراول از طریق CMD به دایرکتوری پروژه خود بروید و دستور زیر را اجرا کنید:
composer create-project --prefer-dist laravel/laravel laravelproject
بعد از ایجاد پروژه لاراول خود فایل config\Service.php را باز کنید و کدهای زیر را به ان اضافه کنید:
'firebase' => [
'api_key' => 'api_key', // used for JS integration
'auth_domain' => 'auth_domain', // used for JS integration
'database_url' => 'https://database_url.com/',
'secret' => 'secret',
'storage_bucket' => '', // used for JS integration
],
ایجاد Route
به فایل routes >> web.php بروید و route زیر را به آن اضافه کنید:
<?php
Route::view('customers', 'customers');
افزودن فایل Blade
به مسیر resources >> views بروید و یک فایل Blade با نام customers.blade.php ایجاد کنید.سپس فایلی که ایجاد کردید را باز کنید و کدهای زیر را در ان وارد کنید:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول</title>
<style>
body{
direction: rtl;
text-align: right;
}
.modal-header .close {
margin: -1rem auto -1rem -1rem;
}
.modal-footer>:not(:last-child) {
margin-left: .25rem;
}
.modal-footer>:not(:first-child) {
margin-right: .25rem;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<h4 class="text-center">عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول</h4><br>
<h5># افزودن مشتری</h5>
<div class="card card-default">
<div class="card-body">
<form id="addCustomer" class="form-inline" method="POST" action="">
<div class="form-group mb-2">
<label for="name" class="sr-only">نام</label>
<input id="name" type="text" class="form-control" name="name" placeholder="نام"
required autofocus>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="email" class="sr-only">ایمیل</label>
<input id="email" type="email" class="form-control" name="email" placeholder="ایمیل"
required autofocus>
</div>
<button id="submitCustomer" type="button" class="btn btn-primary mb-2">ارسال</button>
</form>
</div>
</div>
<br>
<h5># مشتریان</h5>
<table class="table table-bordered">
<tr>
<th>نام</th>
<th>ایمیل</th>
<th width="200" class="text-center">عملیات</th>
</tr>
<tbody id="tbody">
</tbody>
</table>
</div>
<!-- Update Modal -->
<form action="" method="POST" class="users-update-record-model form-horizontal">
<div id="update-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="width:55%;">
<div class="modal-content" style="overflow: hidden;">
<div class="modal-header">
<h4 class="modal-title" id="custom-width-modalLabel">بروز رسانی</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
</div>
<div class="modal-body" id="updateBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">بستن
</button>
<button type="button" class="btn btn-success updateCustomer">بروز رسانی
</button>
</div>
</div>
</div>
</div>
</form>
<!-- Delete Modal -->
<form action="" method="POST" class="users-remove-record-model">
<div id="remove-modal" data-backdrop="static" data-keyboard="false" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel"
aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered" style="width:55%;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="custom-width-modalLabel">حذف</h4>
<button type="button" class="close remove-data-from-delete-form" data-dismiss="modal"
aria-hidden="true">×
</button>
</div>
<div class="modal-body">
<p>میخواهید این رکورد را حذف کنید؟</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect remove-data-from-delete-form"
data-dismiss="modal">بستن
</button>
<button type="button" class="btn btn-danger waves-effect waves-light deleteRecord">حذف
</button>
</div>
</div>
</div>
</div>
</form>
{{--Firebase Tasks--}}
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-database.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "{{ config('services.firebase.api_key') }}",
authDomain: "{{ config('services.firebase.auth_domain') }}",
databaseURL: "{{ config('services.firebase.database_url') }}",
storageBucket: "{{ config('services.firebase.storage_bucket') }}",
};
firebase.initializeApp(config);
var database = firebase.database();
var lastIndex = 0;
// Get Data
firebase.database().ref('customers/').on('value', function (snapshot) {
var value = snapshot.val();
var htmls = [];
$.each(value, function (index, value) {
if (value) {
htmls.push('<tr>\
<td>' + value.name + '</td>\
<td>' + value.email + '</td>\
<td><button data-toggle="modal" data-target="#update-modal" class="btn btn-info updateData" data-id="' + index + '">بروز رسانی</button>\
<button data-toggle="modal" data-target="#remove-modal" class="btn btn-danger removeData" data-id="' + index + '">حذف</button></td>\
</tr>');
}
lastIndex = index;
});
$('#tbody').html(htmls);
$("#submitUser").removeClass('desabled');
});
// Add Data
$('#submitCustomer').on('click', function () {
var values = $("#addCustomer").serializeArray();
var name = values[0].value;
var email = values[1].value;
var userID = lastIndex + 1;
console.log(values);
firebase.database().ref('customers/' + userID).set({
name: name,
email: email,
});
// Reassign lastID value
lastIndex = userID;
$("#addCustomer input").val("");
});
// Update Data
var updateID = 0;
$('body').on('click', '.updateData', function () {
updateID = $(this).attr('data-id');
firebase.database().ref('customers/' + updateID).on('value', function (snapshot) {
var values = snapshot.val();
var updateData = '<div class="form-group">\
<label for="first_name" class="col-md-12 col-form-label">نام</label>\
<div class="col-md-12">\
<input id="first_name" type="text" class="form-control" name="name" value="' + values.name + '" required autofocus>\
</div>\
</div>\
<div class="form-group">\
<label for="last_name" class="col-md-12 col-form-label">ایمیل</label>\
<div class="col-md-12">\
<input id="last_name" type="text" class="form-control" name="email" value="' + values.email + '" required autofocus>\
</div>\
</div>';
$('#updateBody').html(updateData);
});
});
$('.updateCustomer').on('click', function () {
var values = $(".users-update-record-model").serializeArray();
var postData = {
name: values[0].value,
email: values[1].value,
};
var updates = {};
updates['/customers/' + updateID] = postData;
firebase.database().ref().update(updates);
$("#update-modal").modal('hide');
});
// Remove Data
$("body").on('click', '.removeData', function () {
var id = $(this).attr('data-id');
$('body').find('.users-remove-record-model').append('<input name="id" type="hidden" value="' + id + '">');
});
$('.deleteRecord').on('click', function () {
var values = $(".users-remove-record-model").serializeArray();
var id = values[0].value;
firebase.database().ref('customers/' + id).remove();
$('body').find('.users-remove-record-model').find("input").remove();
$("#remove-modal").modal('hide');
});
$('.remove-data-from-delete-form').click(function () {
$('body').find('.users-remove-record-model').find("input").remove();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
در این فایل ما یک فرم CRUD ساده با استفاده از Bootstrap 4 ایجاد کرده ایم و در انتهای فایل کدهای جاوا اسکریپت برای انجام عمل Real Time CRUD را آورده ایم.
اجرا و تست پروژه عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول
برای اجرای پروژه دستور زیر را در ترمینال خود اجرا کنید:
php artisan serve
اکنون از آدرس (http://localhost:8000/customers) برای مشاهده فرم پروژه خود استفاده کنید.شما می توانید با اضافه کردن داده ، پروژه خود را تست کنید.
همچنین بخوانید: آموزش دیتاتیبل (datatables) در لاراول 5.8
در زیر تصویری از database فایربیس را مشاهده می کنید:
ما با موفقیت پروژه عملیات Real Time CRUD با Google Firebase در لاراول را ایجاد و آزمایش کردیم.امیدوارم این آموزش به شما کمک کرده باشد.
