Gestire richieste ajax in Laravel

Oggi vediamo come fare ad inviare delle richieste ajax nel framework Laravel. Essendo un argomento molto specifico darò per scontato alcune cose che già sai, come ad esempio il funzionamento di Laravel stesso ed, in generale del pattern MVC, oltre alla struttura di una generica richiesta Ajax.

Prerequisiti

  • Conoscenze del Framework Laravel e del pattern MVC
  • Sintassi JQuery
  • Richieste Ajax

La creazione delle Routes

Iniziamo dal definire le routes che ci serviranno per modellare la richiesta. Fondamentalmente abbiamo bisogno di 2 routes, una in GET mostrerà la view da cui effettuare la richiesta (e su cui stampare i risultati) ed una POST che invierà la richiesta. Le Routes sono le seguenti:

1
2
Route::get('ajax', 'HomeController@ajaxRequest');
Route::post('ajax', 'HomeController@ajaxResponse');

Il controller

A questo punto il nostro HomeController sarà costuito, tra le altre, da una funzione ajaxRequest() che mostra la view da cui effettuare la richiesta Ajax (come ad esempio una form di registrazione), e da una funzione ajaxResponse() che processa la richiesta e ritorna il risultato della stessa. Il nostro Homecontroller.php sarà così definito:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller

{

// ....

public function ajaxRequest()

{

return view('ajaxRequest');

}

public function ajaxRequestPost(Request $request)

{

$response = array(
'status' => 'success',
'msg' => $request->message,
);
return response()->json($response);

}

}

 

La view

Ultimo step, andiamo a creare la view che si interfaccia con l’utente, ajaxRequest.blade.php

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>

<html>

<head>

<title>Laravel Ajax Request</title>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

</head>

<body>

<div class="container">

<p> Bla Bla Bla.... </p>

<form action="" method="post">

<div class="form-group">

<label for="name">Name:</label>

<input type="text" name="name" id="name" class="form-control" placeholder="Nome" required="">

</div>

<div class="form-group">

<label for="password">Password:</label>

<input type="password" name="password" id="password" class="form-control" placeholder="Password" required="">

</div>

<div class="form-group">

<label for="email" >Email:</label>

<input type="email" name="email" id="email" class="form-control" placeholder="Email" required="">

</div>

<div class="form-group">

<button class="btn btn-success btn-submit">Invia</button>

</div>

</form>

</div>

</body>

<script type="text/javascript">

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$(".btn-submit").click(function(e){

e.preventDefault();

var name = $("input[name=name]").val();

var password = $("input[name=password]").val();

var email = $("input[name=email]").val();

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

$.ajax({

type:'POST',

url:'/ajaxRequest',

data:{ _token: CSRF_TOKEN, , name:name, password:password, email:email},

success:function(data){

console.log(data.success);

}

});

});

</script>

</html>

Ricordiamoci di caricare la libreria JQuery necessaria ad effettuare la richiesta ed il token di controllo CSRF_TOKENper l’invio dei dati tramite la form, in caso di successo la console.log() ci avvertirà con il messaggio definito all’interno del controller.

 

Lo hai trovato utile? Codividilo con i tuoi follower :)


JQuery: Script Multilingua, the easy way

Vi presento un Work-around molto semplice per eseguire i nostri Script a seconda della lingua visualizzata sulla pagina web. Se il nostro script deve fare cose diverse (o non fare nulla) a seconda della lingua che stiamo visualizzando sul browser, quello che possiamo fare è guardare quale è l’attributo LANG contenuto all’interno del tag html e utilizzarlo come selettore di JQuery, mi spiego meglio:

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag SCRIPT e la sua dichiarazione deve essere successiva a quella della libreria JQuery
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.
Nello snippet che segue abbiamo assunto di voler inserire un testo tradotto per l’elemento EL quindi abbiamo sfruttato il selettore di JQuery TAG[ATTRIBUTE] in questo modo:

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
/**
* Developer Corsaro.it - JQuery Translate String
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/


       jQuery('document').ready(function ($) {

           /*Assumendo ad esempio <html lang="en-US"> */
          $('html[lang="en-US"] #EL').text("eng TRANSLATED");

        });
    </script>

Utilizzi

Non è il modo migliore di farlo, ma è uno dei più furbi, con questo script possiamo andare ad esempio a tradurre alcuni elementi della pagina (ad esempio pulsanti, titoli, etc)

Lo hai trovato utile? Codividilo con i tuoi follower :)


JQuery: azioni con i Cookie

Pensate per un attimo a questo scenario: volete creare un pop-up di iscrizione alla newsletter da mettere in home page del vostro sito web: mostrarlo ad ogni refresh diventa davvero troppo invaso e fastidioso per i nostri utenti, tant’è che il più probabile risultato è che nessuno si iscriverà alla nostra lista, o che se ne andrà infastidito verso qualche altro sito web. La cosa migliore da fare questi casi è mostrare il pop-up solo una volta per sessione, e per fare questo ci viene in aiuto la librearia di JQuery: JQuery Cookie. Questa libreria ci fornisce tutte le funzionalità necessarie per creare un cookie in Javascript e di manipolarlo.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag SCRIPT e la sua dichiarazione deve essere successiva a quella della libreria JQuery (in questo caso abbiamo linkato in prima riga JQuery Cookie da remoto, ma potete facilmente includerlo nel progetto).
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.

Viene effettuato un controllo su ‘cookie-name’ per vedere se il nostro cookie è già stato creato in precedenza, ciò vorrebbe dire che abbiamo già eseguito questa azione e che quindi non deve essere ripetuta. Se NON esiste il cookie allora vado libero con la mia esecuzione (in questo esempio mostriamo una modale Bootstrap ma potete inserire una qualsiasi funzione). Finita l’esecuzione dei comandi viene creato il cookie e gli viene settata anche una durata (7 giorni in questo caso), in questo modo al prossimo refresh non sarà di nuovo eseguita nessuna istruzione finchè questo resta valido.

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
/**
* Developer Corsaro.it - JQuery Cookie Check
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/


              jQuery('document').ready(function ($) {

            if ($.cookie('cookie-name') == null) {
                setTimeout(function() {
                $('#modal-shop').modal('show');
                // doStuff
                }, 10000);
                $.cookie('cookie-name', '7');
            }
        });
    </script>

Utilizzi

Script estremamente versatile, può essere incluso in qualsiasi punto del DOM, per effettuare i test basterà eliminare i cookie dal browser svuotando la cronologia.

Lo hai trovato utile? Codividilo con i tuoi follower :)


Uno Smooth Scroll in JQuery

Oggi vi lascio uno snippet per implementare uno smooth scroll verticale sulle vostre pagine web. L’idea di base è far scorrere la pagina fino ad un determinato punto una volta cliccato su un pulsante, utile ad esempio se abbiamo una copertina che occupa il 100% dello schermo e vogliamo far scorrere la pagina all’utente semplicemente cliccando su una freccia o un link qualsiasi.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag <script></script> e la sua dichiarazione deve essere successiva a quella della libreria JQuery.
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.

Andiamo a triggerare l’evento click sull’anchor che vogliamo utilizzare $(‘anchor‘).click(). All’interno dell’evento click appena scritto inseriamo la funzione di callback che eseguirà l’animazione vera e propria ( mediante animate() di JQuery ).  Nello snippet poi abbiamo indicato un ipotetico elemento con id #target-anchor per indicare alla funzione fin dove far scorrere la pagina  ($(“#target-anchor”).offset().top).  Infine, il valore 800 rappresenta la durata dell’animazione ( in millisecondi), per cui sentitevi liberi di impostare quella che più si adatta alle vostre esigenze

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* Developer Corsaro.it - JQuery Smooth Scroll
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/


$(document).ready(function() {
$('anchor').click(function(event){
$('html, body').animate({
scrollTop: $("#target-anchor").offset().top
}, 800);
event.preventDefault();
});
});

Utilizzi

Come ho detto in precedenza questo Snippet può essere utlizzato in un sacco di tipologie diverse di progetto, ad esempio possiamo includerlo nel footer del tema WordPress attivo.
Domande?  🙂

 

 

Lo hai trovato utile? Codividilo con i tuoi follower :)


WordPress: Output di uno shortcode contenente HTML

Vi è mai capitato di creare uno shortcode per WordPress contenente un blocco di HTML e che, al momento di eseguire l’output dell’HTML,  il blocco viene stamapato in un punto sbagliato della pagina?
Ad esempio:

1
2
3
4
add_shortcode('my_shortcode', 'myFunct');
function myFunct(){ ?>
<h1>Hello Ladies!</h1>
<?php }

Soluzione corretta

La soluzione assolutamente corretta è quella di utilizzare la funzione di return(); piuttosto che utilizzare echo() o immergere il codice HTML direttamente dentro allo shortcode di WordPress, è anche vero che per blocchi html molto grandi questa operazione può essere scomoda, per cui esiste un work-around ottimo in questi casi, utilizzare la funzione ob_start() di PHP.

Soluzione smart

come si può vedere dallo snippet subito dopo la dichiarazione della funzione viene chiamata ob_start(). Questa funzione PHP permette di bloccare il normale output della funzione e di salvarlo temporameamente in un buffer (memoria volatile), l’HTML non sarà quindi stampato normalmente ma verrà salvato in questo buffer. Al termine della funzione utilizziamo return ob_get_clean() che non fa altro che restituire il buffer salvato finora ed elimina il buffer stesso. Ecco lo snippet finale

LO Snippet

ecco lo snippet pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
/**
* Developer Corsaro.it - Shortcode HTML Output
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/

add_shortcode('my_shortcode', 'myFunct');
function my_shortcode() {
    ob_start();
    ?> <HTML> <here> ... <?php
    return ob_get_clean();
}

Lo hai trovato utile? Codividilo con i tuoi follower :)


WordPress: Filtrare i risultati di Ricerca in base al Post Type

Chiudiamo la settimana con WordPress e con la funzione di ricerca dei post, andiamo a definire insieme un filtro basato sul post_type per i post recuperati.

Il Trigger ‘pre_get_posts’

Iniziamo richiamando la nostra funzione sull’action hook  pre_get_posts, questo hook ci permette di manipolare l’oogetto query contenente i post che stiamo recuperando,  inoltre essendo passato l’oggetto $query come referenza, non è necessario effuttuare una return dei valori nella nostra funziona, viene direttamente manipolato l’oggetto.

Il controllo dei risultati

L’oggetto $query è estremamente versatile e ci permette di controllare liberamente i risultati in base a tantissime condizioni (lascio una lista di possibili applicazioni dopo lo snippet), in questo caso mediante il controllo $query->is_search && !is_admin()  ci assicuriamo che:

  1.  Sia una pagina di ricerca
  2.  Non ci troviamo all’interno dell’amministrazione del sito Web

Fatto questo andiamo a definire le nostre condizioni tramite la funzione set() che modifica i parametri della ricerca, in questo caso vogliamo includere  il custom post type “book” alla normale ricerca di WordPress, e lo facciamo tramite $query->set(‘post_type’, array( ‘post’, ‘book’ ) )

(N.B. abbiamo incluso il tipo “post” all’array per non limitare la ricerca al solo tipo “book” )

 

LO SNIPPET

Ecco lo snippet, pronto per il copia e incolla nel nostro file functions.php del tema corrente  🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* Developer Corsaro.it - Filter Search
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/

add_action('pre_get_posts','dcSearchBook');

function dcSearchBook($query) {
if ( !is_admin() &amp;&amp; $query-&gt;is_search ) {
if ($query-&gt;is_search) {
$query-&gt;set('post_type', array( 'post', 'book' ) );
}
}
}

POSSIBILI UTILIZZI

Come dicevamo prima utilizzando bene la funzione set() possiamo modificare il flusso dei dati a nostro piacimento, ad esempio possiamo:

  • Limitare la ricerca ai soli articoli:   $query->set(‘post_type’, ‘post’);
  • Limitare il numero dei risultati:  $query->set( ‘posts_per_page’, 10 );
  • Limitare i risulati ad una o più categorie: $query->set( ‘cat’, ‘123, 456, 7’ );

Etc… con un po’ di codice aggiuntivo possiamo davvero stravolgere il tipo ed il numero di post risultati dalla Query di WordPress, sicuramente riprenderemo in mano questa funzione per fare altre cose 🙂

 

Lo hai trovato utile? Codividilo con i tuoi follower :)


Serializzare una form ed inviarla via Ajax

Questo snippet JS agisce lato front-end su una form, permettendo di inviare i dati via Ajax, in maniera asincrona quindi e senza ricaricare la pagina. Può quindi essere inclusa in varie tipologie di progetti, anche su un sito WordPress, a patto che sia incluso correttamente nel DOM del sito web e che sia richiamato correttamente JQuery in precenza, al quale lo script si appoggia.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag <script></script> e la sua dichiarazione deve essere successiva a quella della libreria JQuery.

Grazie a $(‘#FORM_ID‘).submit() La funzione scatta al momento della submit della form con l’id che abbiamo inserito, in questo caso #FORM_ID, ma qui ci possiamo inserire un qualsiasi selettore del DOM.

Invio dei Dati

Viene bloccato il normale invio di informazioni con e.preventDefault() (e quindi il refresh della pagina),mentre i dati della form sono serializzati con la funzione serialize(), ovvero convertiti in  stringa e salvati all’interno della variabile data. Tramite il campo url indichiamo allo script dove effettuare la chiamata Ajax econ il parametro type invece il metodo (POST / GET).

Ricezione dei Dati

Bypassiamo la ricezione lato server ma potete immaginare di avere uno script PHP che riceve tutti i dati della form all’interno della variabile $_POST[‘name’]. Dopo la chiamata Ajax, se tutto è andato bene, riceveremo il risultato delle operazioni lato server all’interno della variabile data definita dentro Successe potranno essere utilizzati come meglio credete.

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* Developer Corsaro.it - Send post data through ajax
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/


$(document).ready(function() {
$('#FORM_ID').submit(function(e) {
e.preventDefault();
var $element = $(this);
var data = $element.serialize();
$.ajax({
url: "URL",
type: "POST",
data: data,
success: function(data) {
//dosomething
}
});
});
});

Utilizzi

Come ho detto in precedenza questo Snippet può essere utlizzato in un sacco di tipologie diverse di progetto, ad esempio possiamo includerlo nel footer del tema WordPress attivo.

 

 

Lo hai trovato utile? Codividilo con i tuoi follower :)


Creare un Utente da functions.php

In questo articolo vi mostro uno snippet che mi ha salvato la vita diverse volte, ovvero come creare un utente direttamente dal file functions.php del tema.

Soprattutto nell’ambito del restyle di vecchi siti web capita che i nostri clienti non si ricordino i dati di accesso e che l’unico in loro possesso siano le credenziali dell’hosting, oppure non riusciamo più ad accedere al DB. Lo snippet è molto semplice e fa quello che promette: basta includerlo all’interno del file functions.php del tema attivo per creare un nuovo utente attivo all’interno del sito web. Vediamo come funziona:

Creazione dell’utente

Innanzi tutto impostiamo i 3 parametri fondamentali per definire un nuovo utente: username, password ed e-mail, mentre il ruolo può essere assegnato in un secondo momento. Assegnati questi 3 valori la funzione esegue un controllo affinchè non esista già un utente con quello stesso username e con la stessa mail, per evitare sovrapposizioni.

Infatti se è già presente  lo stesso nome o la stessa mail all’interno dell’anagrafica del sito web, la funzione  wp_create_user()  invece di crearne uno nuovo,restituirà l’oggetto WP_ERROR contenente l’errore  “Sorry, that username already exists!“, optiamo quindi per un nome utente ed una mail non utilizzati.

Assegnazione del ruolo all’utente

Fatto questo resta da stabilire quale ruolo utente vogliamo assegnare, se abbiamo bisogno di recuperare (o meglio resettare) alcuni dati di accesso, ovviamente il tipo di utente che ci serve è un amministratore, impostiamo tramite la funzione  set_role() il ruolo ‘administrator’ .

Action Hook

Infine triggeriamo la funzione tramite add_action(‘init’,’dc_createAccount’) in questo modo WordPress eseguirà la funzione prima di disegnare la pagina del sito web.

Di seguito riportiamo lo snippet, pronto per il copia-incolla 🙂

 

LO SNIPPET

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* Developer Corsaro.it - Create User from functions.php
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/


function dc_createAccount(){
$user_name = 'admin';
$password= 'admin';
$email = 'admin@website.it';

// verifico che l'utente non sia già esistente
if ( !username_exists( $user_name ) &amp;&amp; !email_exists( $email ) ) {
$user_id = wp_create_user( $user_name, $password, $email );
$user = new WP_User( $user_id );

// dopo aver creato l'utente assegno il ruolo che voglio,
//in questo caso Administrator
$user-&gt;set_role( 'administrator' );
}

}
add_action('init','dc_createAccount');

Ok abbiamo fatto!

Se tutto è andato bene andando nella pagina di login ed inserendo le credenziali, dovremmo poter accedere di nuovo all’amministrazione del sito.

Non dimentichiamoci di togliere il codice da functions.php e di cambiare le credenziali una volta effettuato l’accesso  🙂

Lo hai trovato utile? Codividilo con i tuoi follower :)