دریافت id آخرین رکورد درج شده در جدول در لاراول 5.8
دریافت id آخرین رکورد درج شده در جدول در لاراول 5.8
1398-02-19
لودینگ هنگام‌ لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView
لودینگ هنگام‌ لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView
1398-02-21
عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول

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

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

  1. ایجاد پروژه فایربیس
  2. ایجاد پروژه لاراول
  3. ایجاد Route
  4. افزودن فایل Blade
  5. اجرا و تست پروژه

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

ابتدا یک پروژه 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) برای مشاهده فرم پروژه خود استفاده کنید.شما می توانید با اضافه کردن داده ، پروژه خود را تست کنید.

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

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *