Produrre il massimo danno con il minimo sforzo e vincere la guerra usando solo 4 tecnologie-cannone: come inserire dati in un DB senza ricaricare la pagina

I 4 cannoni sono 4 tecnologie che quando lavorano all’ unisono a pieno regime fanno danni non indifferenti: Codeigniter MVC, bootstrap, ajax e jquery. Quando parliamo di minimo sforzo facciamo riferimento al fatto che impiegando i soliti tre file MVC usando dal framework di sviluppo, siamo in grado di compilare un modulo e inserire i dati in una tabella presente nel nostro database SENZA RICARICARE TUTTA LA PAGINA. Questa magia la si può fare solo grazie ad Ajax un oggetto integrato in tutti i browserche non fa altro che eseguire i compiti mentre le richieste fanno altro. Come ben si sa quando AJAX non c’era funzionava che la palla veniva spedita oltre la rete e che finché non ti veniva rispetdita indietro mai e poi mai avresti mai potuto magari fumare un sigaro, bere un whisky o tentare di leggere fake news su FB. Questo significa molto in termini di velocità e di prestazioni, perchè questa flessibilità migliora l’esperienza utente e ottimizza anche le performances dei nostri processi. Quindi come inserire dati utilizzando jQuery Ajax in Codeigniter e abbellire il vestito con il framework responsive Bootstrap? Ovviamente siamo i massimi esperti condominiali di codeigniter quindi SAPPIAMO BENE CHE LA PRIMA COSA DA FARE IN ASSOLUTO QUANDO SI SCARICA IL PACCHETTO IN LOCALE é quello di andare a configurare il nostro CONFIG.PHP che sappiamo trovarsi dentro le cartelle di lavoro APPLICATION e CONFIG, in questi termini:

$config['base_url'] = 'http://localhost/project_ajax_o_nome_tuo_a_piacere/';

Se non si fa questa semplice operazione anche i reindirizzamenti sarebbero difettosi e magari quando mandiamo in esecuzione l’applicazione ci comparirà un messaggio di errore del tipo DATI NON SALVATI perché magari dopo il salvataggio la pagina di atterraggio non si trova e non sapremmo mai se i dati sono stati caricati comunque. Codeigniter è un framework MVC che ha una propria funzionalità per inserire una forma di dati nella tabella del database MySQL, quindi ha bisogno di un CERVELLO o CONTROLLER, prima ancora di un parte LOGICA che é il MODELLO e infine la parte visiva per l’utente che é la VIEW. Esiste un metodo in AJAX definito come POST che farà sicuramente al caso nostro! Ovviamente sulla VISTA per ottimizzare la nostra WEB APP inseriamo i CDN (content delivery network, in sintesi un modo semplificato e agevole di agganciare risorse esterne) delle tecnologie sopra citate o cannoni, ossia quello di JQuery e del framework. La domanda a questo punto sorge spontanea ma il CDN del CANNONE AJAX non lo fai? Abbiamo detto che è già presente come OGGETTO all’ interno del browser quindi basterà richiamare solo i metodi che ci servono tramite JQuery che sappiamo essere sintetico ed essenziale rispetto al suo fratello più vecchio javascript. Con i POST DATA di AJAX popolare un DB è diventata una operazione veloce e la convalida dei dati avviene repentinamente lato client senza aspettare la risposta del server. Dopo aver configurato il parametro base_url dobbiamo tassativamente configurare il nostro database per collegare la nostra tabellina tramite i 4 parametri localhost, admin, pwd e db che si trovano all’ interno della stessa cartella CONFIG citata sopra nel file DATABASE:PHP:

'hostname' => 'localhost',
'username' => 'root',
'password' => 'root',
'database' => 'tuonomedidatabase',

A questo punto per FINIRE CON LE OPERAZIONI PRELIMINARI dobbiamo andare sul file AUTOLOAD:PHP presente dentro la stessa cartella CONFIG che dobbiamo considerare come una sorta di santo Graal e SETTARE i parametri database e gli helper, ossia le funzioni utili per gestire URL e MODULI:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('form', 'url');

Ora abbiamo una tabellina di nome STUDENT con tre campi da riempire NOME, EMAIL e CORSO, si tratta di simulare quindi una situazione dove un potenziale studente vuole chiedere informazioni di contatto compilando tre campi. Quindi sappiamo di avere bisogno di SOLI tre file, partiamo dal modello, creo un file chiamato AjaxModel.php dentro la cartella MODEL. Questo file impone che se l’inserimento va a buon fine mi ritorni VERO altrimenti mi dai ZERO (FALSO):

class AjaxModel extends CI_Model
{
public function saveData($data)
{
if($this->db->insert('student',$data))
{
return 1;
}
else
{
return 0;
}
}
}

dopodiché abbiamo bisogno di una CLASSE o CONTROLLER, il famoso DRONE che fa il direttore dei lavori dall’ alto, un file creato dentro la cartella controllers di nome AjaxController.php. Intanto richiamo la homepage o la vista tramite la funzione index. Poi costruisco un oggetto pieno di dati dove dentro tre chiavi (name, email, course) di cui andremo a catturare il VALORE tramite INPUT, dopodiche carichiamo il modello e ci andiamo a salvare i dati sempre con la logica che se l’operazione va a buon fine mi restituisce VERO o 1 altrimenti rilascia un bel FALSO o 0.

class AjaxController extends CI_Controller
  {
	
	public function index()
	   {
		   $this->load->view('Ajaxform');
	   }	   
	
   public function savedata()
   {
      
	$data = array(
	'name' => $this->input->post('name'),
	'email'=>$this->input->post('email'),
	'course'=>$this->input->post('course')
		);
		
		$this->load->model('AjaxModel');
		$result=$this->AjaxModel->saveData($data);
		if($result)
		{
		echo  1;	
		}
		else
		{
		echo  0;	
		}
    }
  }

e infine di una vista in un file Ajaxform.php creato appositamente dentro la cartella view con una funzione specifica AJAX che fa tutto il lavoro sporco. Si noti nella funzione l’uso della funzione base_url(‘/index.php/AjaxController/savedata’); da qui capiamo anche l’importanza l’importanza di essere andati a configurare il path come operazione preliminare nel file config.php, ovviamente senza la mossa 1 a questo punto la funzione ajax fa il suo lavoro, ossia ci verrà a dire che qualcosa é andato storto, ma non é il nostro caso, la funzione ajax va inserita nel body del documento:

<script type="text/javascript">

// Ajax post
$(document).ready(function()
{
$("#butsave").click(function()
{
var name = $('#name').val();
var email = $('#email').val();
var course = $('#course').val();

	if(name!="" && email!="" && course!="")
	{
		jQuery.ajax({
		type: "POST",
		url: "<?php echo base_url('/index.php/AjaxController/savedata'); ?>",
		dataType: 'html',
		data: {name: name, email: email,course:course},
		success: function(res)
		{
			if(res==1)
			{
			alert('Data saved successfully');
			}
			else
			{
			alert('Data not saved');
			}

		},
		error:function()
		{
		alert('data not saved');
		}
		});
	}
	else
	{
	alert("pls fill all fields first");
	}

});
});
</script>

mentre nell’ head della pagina statica metteremo:

<head>
<title>save data using Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

A questo punto non possiamo fare altro che ammirare il risultato finale con quattro cannoni che sparano bordate spaventose contro la povera tabellina che fortunatamente regge agli urti e si riempe di dati andando all’ indirizzo: http://localhost/nomedellatuacartella/index.php/ajaxcontroller

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...