عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول

دریافت id آخرین رکورد درج شده در جدول در لاراول 5.8

لودینگ هنگام‌ لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView

منتشر شده توسط مدیر سایت در 21 اردیبهشت 1398

عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول

عملیات Real Time CRUD با استفاده از فایربیس گوگل (Google Firebase) در لاراول ، در این پست از تجاری اپ قصد داریم به شما عملیات Real Time CRUD با استفاده از فایربیس گوگل آموزش دهیم.با ما همراه باشید و مراحل زیر را دنبال کنید:

همچنین بخوانید: نحوه لاگین کردن در سایت با اکانت گوگل در لاراول

ایجاد پروژه فایربیس
ایجاد پروژه لاراول
ایجاد Route
افزودن فایل Blade
اجرا و تست پروژه

ایجاد پروژه فایربیس

ابتدا یک پروژه 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

عملیات Real Time CRUD با استفاده از Google Firebase در لاراول

در زیر تصویری از database فایربیس را مشاهده می کنید:

ما با موفقیت پروژه عملیات Real Time CRUD با Google Firebase در لاراول را ایجاد و آزمایش کردیم.امیدوارم این آموزش به شما کمک کرده باشد.

عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول

دریافت id آخرین رکورد درج شده در جدول در لاراول 5.8

لودینگ هنگام‌ لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView

ایجاد پروژه فایربیس

ایجاد پروژه لاراول برای عملیات Real Time CRUD

ایجاد Route

افزودن فایل Blade

اجرا و تست پروژه عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول

پست های مرتبط

طراحی رابط کاربری یا UI های جذاب و 7 قانون مهم – قسمت سوم

طراحی UI های جذاب و 7 قانون مهم – قسمت دوم

پیاده سازی UI های جذاب و 7 قانون مهم – قسمت اول

دیدگاهتان را بنویسید لغو پاسخ