0
09383027965

قسمت نوزدهم آموزش فریم ورک لاراول

قسمت نوزدهم آموزش فریم ورک لاراولReviewed by هاشم قنبری فرد on Dec 6Rating: 5.0قسمت نوزدهم آموزش فریم ورک لاراولبه کار با Ajax می پردازیم.Ajax یک امکان ویژه به صفحات سایت شما می دهدتا بدون این که صفحه رفرش شود نتیجه کار شما رو نشان می دهد Ajax یه امکان فوق العاده می باشد.

به نام و یاد خدا

سلام عرض می کنم خدمت کاربران سایت دانشجویان کامپیوتر امیدوارم سربلند و پیروز باشید.

 

 

این فریم ورک در سال های 2014 و همچنین 2013 به عنوان محبوب ترین فریم ورک php مورد استفاده قرار گرفته است. همچنین طبق آمار این فریم ورک در سال 2015 هم به عنوان برترین فریم ورک بین فریم ورک های php معرفی گردیده است. همچنین در سال 2016 آمار نشان می دهد که این فریم ورک جای خوبی در بین فریم ورک های php پیدا کرده است. و با اختلاف فاحشی از مابقی فریم ورک ها فاصله گرفته است.

خوب دیگه وقت آن رسیده که دلیل اصلی که این فریم ورک به این شهرت و محبوبیت رسیده را بیان کنم. راستش این فریم ورک سن بالایی دارد و خیلی زمان زیادی از پیدایش آن گذشته است. در سال های ابتدایی که این فریم ورک معرفی و منتشر شد استفاده از composer در دستور کارآن قرار نداشت و هیچ خبری از composer نبود و زیاد مورد توجه قرار نگرفت تا این که بعد از گذشت مدتی با اضافه کردن composer به فریم ورک لاراول این فریم ورک پیشرفت به سزایی کرد و به یکباره در صدر فریم ورک های php قرار گرفت. Composer با قدرتی که به فریم ورک لاراول داد کنار قدرت بالای کد نویسی و سرعت بالایی که داشت به تمام نیاز کاربران خود جواب داد و به این محبوبیت و شهرت رسید.

قدرت بی نظر لاراول و استفاده زیاد از این فریم ورک این فریم ورک را خیلی خیلی سرتر از دیگر فریم ورک های php کرده است.

نکته قابل توجه استفاده از این فریم ورک در ایران می باشد. طبق بررسی های انجام شده پرکاربرد ترین فریم ورک در بین فریم ورک های php در ایران هم همین فریم ورک لاراول می باشد. و در ایران نیز از جای خوبی برخوردار می باشد.

 

کار با ajax در لاراول
کار با ajax در لاراول

 

نوزدهمین قسمت از آموزش فریم ورک لاراول:

 

در این قسمت از آموزش فریم ورک لاراول به کار با Ajax می پردازیم. Ajax یک امکان ویژه به صفحات سایت شما می دهد تا بدون این که صفحه رفرش شود نتیجه کار شما رو نشان می دهد. Ajax یکی از کاربردی ترین امکاناتی می باشد که می توان به یک صفحه اینترنتی اعمال کرد.

بریم سروقت آموزش این قسمت :

 

ابتدا دو آدرس برای این آموزش ایجاد می کنیم.

Route::get(‘/ajaxv’,’TestController@ajaxv’);

Route::post(‘/ajaxf’,’TestController@ajaxf’);

سپس تابع آدرس با متد get که فقط قراره یک صفحه را برایمان باز کند پیاده سازی می کنیم.

 

public function ajaxv()

    {

        return View(‘test.ajax’);

    }

حالا باید بریم سروقت ایجاد و مدیریت فایل ajax که داخل پوشه test ایجاد کردیم و قراره که باز بشه و یک فرم به همراه یک دکمه باید قرار دهیم. که در هر دو صورت بررسی برای Ajax را انجام می دهیم.

 

<!DOCTYPE html>

<html lang=”en”>

<head>

                <meta charset=”UTF-8″>

                {!! Html::style(‘dist/css/bootstrap.min.css’) !!}

                <title>AJAX Example</title>

</head>

<body>

                <form action=”{{ url(‘/ajaxf’) }}” method=”post” id=”form1″>

                                <input type=”hidden” name=”_token” value=”{{ csrf_token() }}”>

                                Your Name:<input type=”text” name=”name”>

                                Your Email:<input type=”text” name=”email”>

                                Your Website:<input type=”text” name=”website”>

                                <input type=”submit” value=”Submit”>

                </form>

                <div id=”results” style=”color:green;”></div>

                <span class=”btn btn-success” style=”margin-top:80px;”> Test Ajax </span>

                <script src=”/dist/js/jquery-1.8.3.min.js”></script>

</body>

</html>

ما یک صفحه html ساده ایجاد کردیم که فایل css بوت استرپ و یک فایل Jquery هم به صفحه بارگذاری شده است. برای این که از Ajax استفاده کنیم نیاز داریم که یک فایل جی کوئری به صفحه اضافه کنیم.

 

ابتدا برای یک دکمه ساده Ajax را پیاده سازی می کنیم.

<span class=”btn btn-success” style=”margin-top:80px;”> Test Ajax </span>

حالا تابع Ajax را برای این دکمه قرار می دهیم.

 

<?php $url = Url(‘/ajaxf’); ?>

<script type=”text/javascript”>

                testAjax = function( name )

                                {

                                                $.ajaxSetup({

                                                                headers:{

                                                                                ‘X-CSRF-TOKEN’ :$(‘meta[name=”csrf-token”]’).attr(‘content’)

                                                                }

                                                });

                                                $.ajax({

                                                                url : ‘<?= $url ?>’,

                                                                type : ‘POST’,

                                                                data : ‘name=’ + name,

                                                                success : function ( data )

                                                                {

                                                                                $(“div#results”).html( data );

                                                                }

                                                });

                                }

</script>

این تابع تعریف شده را برای رویداد کلیک دکمه قرار می دهیم.

<span class=”btn btn-success” onclick=”testAjax(‘pcstudent’)” style=”margin-top:80px;”> Test Ajax </span>

 

برای این که برنامه خطای CSRF_TOKEN را از ما نگیرد مجبوریم این کد امنیتی را همون طور که در تابع گفته شده در header صفحه قرار دهیم.

<meta name=”csrf-token” content=”{{ csrf_token() }}”>

 

فقط دقت کنید که در این مثال یک مقدار هم ارسال میشه که اینجا اسم متغیر را ما name قرار داده ایم.

یک تابع می نویسیم داخل آدرس با متد POST که این مقداری که ارسال کرده ایم را برگرداند یا دریافت کند. چون درخواست داخل Ajax هم با متد POST ارسال شده است.

 

public function ajaxf( Request $request )

    {

        Return $request->name;

    }

این از یک دکمه ساده که درخواست Ajax ما رو انجام داد.

حال برای فرمی که طراحی کردیم می خوایم از Ajax استفاده کنیم و اطلاعات فرم را با استفاده از Ajax به تابع یا آدرس دلخواه ارسال و مدیریت کنیم.

 

برای این کار برای submit فرم مورد نظر یک تابع باید بنویسیم.

<script type=”text/javascript”>

                                $(document).ready( function(){

                                                $(“#form1”).submit( function ( event ){

                                                                event.preventDefault();

                                                                var $this = $(this);

                                                                var url = $this.attr(‘action’);

                                                                $.ajax({

                                                                                url : url,

                                                                                type : ‘POST’,

                                                                                datatype : ‘JSON’,

                                                                                data : $this.serialize(),

                                                                })

                                                                .done( function( response ){

                                                                                $(“div#results”).empty();

                                                                                $.each( response , function( index , val ){

                                                                                                switch( index )

                                                                                                {

                                                                                                                case “success” :

                                   $(“div#results”).html(val);

                                                                                                                                break;

                                                                                                }

                                                                                });

                                                                })

                                                                .fail( function(){

                                                                               console.log(‘error’);

                                                                });

                                                });

                                });

                </script>

 

 

بعد تعریف این تابع میریم سروقت مدیریت دریافت و پاسخ به این درخواست ارسال شده از طرف Ajax در ضمن این نکته را در نظر داشته باشید که اطلاعات فرم به شکل یک رشته JSON ارسال می شوند.

 

public function ajaxf( Request $request )

    {

        if ( $request->ajax() ) {

            # code…

            $html = ‘<p>Your Name:’.$request->input(‘name’).'</p>’;

            $html .= ‘<p>Your Email:’.$request->input(’email’).'</p>’;

            $html .= ‘<p>Your Website:’.$request->input(‘website’).'</p>’;

            return Response::json([‘success’=>$html]);

        }

    }

 

این قسمت از آموزش هم به پایان رسید و برای این که این اطلاعات را بهتر درک کنید فیلم آموزش این قسمت را هم مشاهده کنید.

ویدئو این قسمت را می توانید به صورت آنلاین مشاهده نمایید یا ویدئو را با کیفیت اصلی دانلود کنید.

 

 

دانلود
دانلود

 

مجموعه کامل آموزش پروژه محور لاراول

 

 

برای پیگیری قسمت های دیگر آموزش از لینک های زیر استفاده کنید:

 

 

اگه می خواهید این فریم ورک را خوب یاد بگیرید این دوره را از دست ندهید چون قراره از پایه این دوره آموزش داده بشه و از سطح مقدماتی شروع  و تا سطح پیشرفته پیش خواهیم رفت.

امیدوارم این آموزش ها رو از دست ندید.

موفق و پیروز باشید.

 

 

دیدگاه کاربران
ارسال دیدگاه

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

هشت − شش =

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.