tejariapp-new-logotejariapp-new-logotejariapp-new-logotejariapp-new-logo
  • صفحه اصلی
  • پروژه ها
    • پروژه طراحی سایت
    • پروژه های اندروید
    • پروژه های تحت ویندوز
    • UI & UX
    • ربات تلگرام
  • سفارش پروژه
    • انجام پروژه اندروید (Android)
    • طراحی و ساخت اپلیکیشن موبایل
    • انجام پروژه طراحی سایت با php
    • انجام پروژه طراحی سایت با Asp.net
    • انجام پروژه سی شارپ
    • فرم سفارش پروژه
  • مدرسه ی تجاری اپ
    • طراحی سایت
    • اندروید
    • سی شارپ
    • آموزش پایگاه داده
    • برنامه های کاربردی
  • لینک های مفید
    • پرداخت آنلاین
    • درباره تجاری اپ
    • تماس با ما
استخدام برنامه نویس متلب
سفارش پروژه
✕
            هیچ نتیجه ای یافت نشدمشاهده همه نتایج

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

            • صفحه نخست
            • مدرسه ی تجاری اپ آموزش طراحی سایت
            • عملیات Real Time CRUD با استفاده از فایربیس گوگل در لاراول
            دریافت id آخرین رکورد درج شده در جدول در لاراول 5.8
            دریافت id آخرین رکورد درج شده در جدول در لاراول 5.8
            19 اردیبهشت 1398
            لودینگ هنگام‌ لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView
            لودینگ هنگام‌ لود شدن وب ویو + حذف اسکرول افقی اضافی از WebView
            21 اردیبهشت 1398
            منتشر شده توسط مدیر سایت
            عملیات 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) برای مشاهده فرم پروژه خود استفاده کنید.شما می توانید با اضافه کردن داده ، پروژه خود را تست کنید.

            همچنین بخوانید: آموزش دیتاتیبل (datatables) در لاراول 5.8

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

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

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

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

            اشتراک گذاری

            پست های مرتبط

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            30 بهمن 1400

            دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            30 بهمن 1400

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            توابع در زبان برنامه نویسی دارت (Dart)

            توابع در زبان برنامه نویسی دارت (Dart)

            27 بهمن 1400

            توابع در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب

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

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

            ساخت اپلیکیشن های موبایل

            • ساخت اپلیکیشن فروشگاهی
            • ساخت اپلیکشن ابزاری و خدماتی
            • ساخت اپلیکیشن آموزشی
            • و هزاران موضوع دیگر

             
            کلیک کنید

            آخرین دیدگاه ها

            • 7 خرداد 1401

              داودی نظر در آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

            • 6 فروردین 1401

              yasaman نظر در راست چین کردن متن در فیگما Figma

            • 3 فروردین 1401

              رضا نظر در مفاهیم Observable و Observer در RxJava

            تجاری اپ در شبکه های اجتماعی

            لوگوی تایید پرداخت آنلاین

            2015-2022 © تمامي حقوق مادي و معنوي اين وب سايت نزد تجاری اپ محفوظ بوده و هر گونه کپي برداري از مطالب پيگرد قانوني به همراه دارد! | طراح سایت : ProgRun
            سفارش پروژه
                      هیچ نتیجه ای یافت نشدمشاهده همه نتایج