Un ORM JavaScript di accesso a MySQL
Attraverso pochi semplici step, potrai creare un pratico ORM JavaScript utilizzando gli attributi "data-" dei TAG HTML.
di Antonio Lamorgese
In questo tutorial, ti guiderò attraverso pochi semplici Step nella creazione di un semplice ORM JavaScript utilizzando gli attributi “data-” dei TAG HTML, per salvare dati in un database utilizzando chiamate AJAX in JavaScript. Questo approccio rende il codice altamente personalizzabile, consentendoti di adattarlo facilmente alle tue esigenze specifiche senza doverlo modificare di volta in volta. Prima di procedere è necessario spendere qualche parola sull’utilità degli attributi “data-” in HTML.
Gli attributi “data-” in HTML forniscono un modo per memorizzare informazioni personalizzate direttamente negli elementi HTML. Questi attributi non influenzano il comportamento predefinito degli elementi, ma forniscono un mezzo per associare dati aggiuntivi che possono essere utilizzati per varie operazioni JavaScript, CSS o di altro tipo. Infatti, Angular fa un uso intensivo degli attributi “data-” per due motivi principali: la personalizzazione del comportamento degli elementi HTML e il passaggio di dati tra il MarkUp HTML e il codice JavaScript.
Sappi che potrai creare attributi “data-” da associare a qualsiasi TAG HTML semplicemente accodando al prefisso “data-” un nome di tua fantasia. Nello stesso momento potrai anche impostare un valore per ogni attributo “data-” creato. Nel prossimo paragrafo potrai vedere come associare a dei TAG HTML INPUT informazioni legate a campi di una tabella SQL.
Per mettere in piedi il tuo ORM in JavaScript, hai bisogno di 3 file:
– Il primo è un file HTML che dovrà contenere i TAG HTML richiesti e sarà l’unico file che dovrai personalizzare.
– Il secondo è un file JavaScript che dovrà contenere le informazioni riportate al 2° paragrafo di questa guida e che farà da interfaccia tra l’HTML e PHP. Ti basterà copiare e incollare le istruzioni riportate in questo paragrafo senza mai modificarle.
РIl terzo ̬ un file in PHP che ̬ deputato al salvataggio e recupero delle informazioni dal database richieste in AJAX. Anche questo file non dovrai mai modificarlo.
Ora passiamo ai fatti e iniziamo a vedere un classico file HTML con i TAG associati, a oggetti del nostro database, sfruttando gli attributi “data-“.
Indice del Post...
1. Aggiungi attributi “data-” ai TAG HTML
Quindi, crea un file HTML e aggiungi dei TAG associandoli a campi di un ipotetico database utilizzando gli attributi “data-“. Questi attributi sono necessari per associare i vari nomi dei campi, il nome della tabella, il nome del database e il percorso al file PHP, che gestirà le operazioni sul database, così come riportato nel codice seguente:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="inputValue1" data-fieldname="fieldname1"
data-tablename="table1"
data-databasename="database1"
data-source="database_connection.php"
placeholder="Inserisci il valore 1">
<input type="text" id="inputValue2" data-fieldname="fieldname2"
data-tablename="table2"
data-databasename="database2"
data-source="database_connection.php"
placeholder="Inserisci il valore 2">
<button data-target="fieldname1,fieldname2">Salva</button>
</body>
</html>Come puoi vedere non abbiamo fatto altro che, definire due TAG HTML di tipo INPUT TEXT a cui sono stati associati una serie di attributi “data-“, con i rispettivi valori, i quali verranno passati a JavaScript per una loro successiva interpretazione.
2. Scrivi il codice per il tuo ORM JavaScript
E’ il momento di passare la palla a JavaScript. Utilizzeremo jQuery per associare l’evento “OnClick” al pulsante, deputato al salvataggio dei dati, dove verranno recuperati i valori dei TAG INPUT relazionati tra loro tramite l’attributo “data-target“. Utilizzeremo chiamate AJAX per inviare e ricevere dati da e verso il server web. Il codice seguente mostra come deve lavorare il tuo script in JavaScript. Quindi crea il tuo file JavaScript, copia e incolla le seguenti righe, è il gioco è fatto.
$(document).ready(function() {
// Recupera i valori degli attributi "data-*" dai tag input al caricamento della pagina
$('input[data-fieldname][data-tablename][data-databasename][data-source]').each(function() {
var fieldName = $(this).data('fieldname');
var tableName = $(this).data('tablename');
var databaseName = $(this).data('databasename');
var phpFile = $(this).data('source');
// Effettua una chiamata AJAX per recuperare i valori salvati dal database
$.ajax({
type: 'POST',
url: phpFile,
data: {
action: 'retrieve',
tablename: tableName,
databasename: databaseName,
fieldname: fieldName
},
success: function(response) {
// Imposta il valore dell'input con quello recuperato dal database
$('#inputValue' + fieldName.slice(-1)).val(response);
},
error: function(xhr, status, error) {
console.error('Errore durante il recupero dei dati: ' + error);
}
});
});
// Associare l'evento di clic al pulsante di salvataggio
$('button[data-target]').click(function() {
// Recupera i nomi dei tag input associati al pulsante
var targetInputs = $(this).data('target').split(',');
// Per ogni tag input associato al pulsante
targetInputs.forEach(function(fieldName) {
// Trova l'elemento input corrispondente
var $input = $('input[data-fieldname="' + fieldName + '"]');
var valueToSave = $input.val();
var tableName = $input.data('tablename');
var databaseName = $input.data('databasename');
var phpFile = $input.data('source');
// Effettua una chiamata AJAX per salvare il dato nel database
$.ajax({
type: 'POST',
url: phpFile,
data: {
action: 'save',
tablename: tableName,
databasename: databaseName,
fieldname: fieldName,
value: valueToSave
},
success: function(response) {
console.log('Dati salvati con successo: ' + response);
},
error: function(xhr, status, error) {
console.error('Errore durante il salvataggio dei dati: ' + error);
}
});
});
});
});Questo codice non fa altro che recuperare il valore di tutti i TAG HTML associati al pulsante con attributo “data-target” che, come puoi notare, punta ai due TAG HTML INPUT. In fase di caricamento della pagina vengono recuperati i contenuti dal database e, quando clicchi sul pulsante, i valori vengono salvati sul database. Questo script non va mai modificato non devi fare altro che utilizzarlo così com’è.
3. Metti in azione il tuo ORM JavaScript
Per salvare i dati sul database hai necessariamente bisogno di eseguire del codice lato server. PHP fa al caso nostro. Quindi crea un file con estensione “PHP”, questo file PHP riceverà i dati provenienti dalle richieste AJAX, si connetterà al database utilizzando le informazioni fornite negli attributi “data-target” ed eseguirà le operazioni di recupero e salvataggio dei dati. Il codice seguente contiene tutte le istruzioni necessarie per eseguire questa operazione.
Anche questo codice non deve essere mai toccato. Ricorda che l’unico file che devi personalizzare è il file HTML.
<?php
// Connessione al database
$servername = "localhost";
$username = "username";
$password = "password";
// Verifica se sono stati inviati dati tramite POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$action = $_POST['action'];
// Recupera i nomi delle tabelle e del database
$tableName = $_POST['tablename'];
$databaseName = $_POST['databasename'];
// Connessione al database specificato
$conn = new mysqli($servername, $username, $password, $databaseName);
// Verifica la connessione
if ($conn->connect_error) {
die("Connessione fallita: " . $conn->connect_error);
}
if ($action == 'retrieve') {
// Recupera il nome del campo e il valore associato
$fieldName = $_POST['fieldname'];
// Query SQL per recuperare il valore dal database
// Modifica "id" con il campo corretto per identificare il record
$sql = "SELECT $fieldName FROM $tableName WHERE id = 1";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Ritorna il valore recuperato
$row = $result->fetch_assoc();
echo $row[$fieldName];
} else {
echo "0 risultati";
}
} elseif ($action == 'save') {
// Recupera il nome del campo e il valore da salvare
$fieldName = $_POST['fieldname'];
$value = $_POST['value'];
// Query SQL per aggiornare il valore nel database
// Modifica "id" con il campo corretto per identificare il record
$sql = "UPDATE $tableName SET $fieldName = '$value' WHERE id = 1";
if ($conn->query($sql) === TRUE) {
echo "Dati aggiornati con successo nel database.";
} else {
echo "Errore durante il salvataggio dei dati: " . $conn->error;
}
}
// Chiudi la connessione al database
$conn->close();
}
?>
4. Personalizza il codice
L’unica personalizzazione richiesta riguarda la modifica degli attributi “data-” degli elementi HTML per adattare il codice alle tue esigenze specifiche. Puoi modificare il nome del campo, il nome della tabella, il nome del database e il percorso e il nome del file PHP senza dover modificare ne il codice JavaScript ne il codice PHP. Devi concentrarti esclusivamente sulla personalizzazione dei valori degli attributi “data-“.
Leggi anche: Creare oggetti JavaScript da comandi SQL
5. Conclusioni
Come hai potuto osservare, utilizzando gli attributi “data-“, è possibile creare un ORM JavaScript flessibile per il salvataggio di dati in un database. Questo approccio semplifica la gestione del codice e consente una maggiore velocità nella stesura dei tuoi progetti senza apportare complesse modifiche al tuo codice sorgente.
Desideri acquisire nuove competenze?
l'opportunità di acquisire nuove competenze e di
migliorare il tuo curriculum professionale.
Clicca qui per seguire le prime lezioni gratuite online
