Come creare un software gestionale gratis con SQL Server e NodeJS
In questa guida ti spiegherò come creare un software gestionale gratis con SQL Server e NodeJS.
di Antonio Lamorgese
Dopo averti presentato la mia guida su Come sviluppare web app CodeLess con WordPress, PHP e MySQL oggi ti spiegherò come creare un software gestionale gratis con SQL Server Express, JavaScript e NodeJS.
Le nuove regole sulla programmazione di applicazioni web, stanno sempre di più spostando il codice lato client e lasciando sul server il solo codice di accesso e modifica della banca dati.
Grazie a sistemi e framework innovativi, che vedremo più avanti nella guida, oggi è possibile progettare applicativi web senza l’ausilio di un server web, come ad esempio, Apache, IIS ecc… Parlo di applicazioni ServerLess scritte interamente in Javascript.
Indice del Post...
1. Javascript per accedere a Microsoft SQL Server
Non esiste una libreria di funzioni, standard, per connettersi a database SQL Server con JavaScript. Infatti, ogni browser ha una sua API proprietaria e delle librerie studiate ad hoc per connettersi a SQL Server. Ad esempio, in Windows, il browser Internet Explorer ha una sua classe di nome ActiveXObject che viene utilizzata per creare istanze di oggetti OLE per la connessione a database remoti creati su SQL Server.
Nello script che segue, è riportato un tipico esempio di connessione al database adventureworks presente in tutte le installazioni di SQL Server. Non devi fare altro che creare un file, con estensione html, copiare e incollare il seguente codice nel file.
<html>
<head>
<title>Connessione a SQL Server</title>
</head>
<body>
<script>
var objConnection = new ActiveXObject("adodb.connection");
var strConn = "driver={sql server};
server=<nome_server>;
database=adventureworks;
uid=sa;
password=12345";
objConnection.Open(strConn);
var rs = new ActiveXObject("ADODB.Recordset");
var strQuery = "SELECT * FROM Person.Address";
rs.Open(strQuery, objConnection);
rs.MoveFirst();
while (!rs.EOF) {
document.write(rs.fields(0) + " ");
document.write(rs.fields(1) + " ");
document.write(rs.fields(2) + " ");
document.write(rs.fields(3) + " ");
document.write(rs.fields(4) + "<br/>");
rs.movenext();
}
</script>
</body>
</html>
Questo tipo di approccio, però, ha delle grosse controindicazioni. Specificare username e password all’interno di una pagina html non è assolutamente consigliabile.
Cioè, non rientra tra gli usi convenzionali utilizzare codice di questo tipo per accedere a un database SQL Server. Infatti, basta aprire la console degli strumenti per gli sviluppatori, integrata in tutti i più diffusi browser, per vedere in chiaro tutti i parametri di accesso al database, password comprese.
In figura è raffigurato un tipico esempio di pagina html con codice di accesso a SQL Server in cui figurano in chiaro username e password.
Più avanti scopriremo come, Node.js, ci fornisce il sistema ideale per eseguire codice JavaScript lato server offrendo enormi vantaggi legati alla sicurezza e alla scalabilità.
Innanzitutto scarichiamo e installiamo SQL Server Express e NodeJs sulla macchina locale o server, nel caso in cui avessimo uno a disposizione.
2. Download Microsoft SQL Server Express
Microsoft SQL Server è un sistema di gestione di database relazionali sviluppato dalla Microsoft. Essendo un server di database, è un prodotto software con la funzione principale di archiviare e recuperare dati come richiesto dalle applicazioni software a lui connesse. Tieni in considerazione che, SQL Server Express può essere eseguito sullo stesso computer o su un altro computer in rete.
Microsoft SQL Server è presente in varie versioni, quasi tutte a pagamento tranne la versione Express, che è libera ma che ha anche delle limitazioni che comunque consentono un uso del software a livello di piccole e medie applicazioni.
A questo link, è possibile scaricare SQL Server Express e installarlo. Seguendo questo video tutorial puoi vedere come installare SQL Server Express in pochi semplici passaggi.
Terminata l’installazione di SQL Server Express nel paragrafo seguente vedremo come installare l’ultimo componente che caratterizza tutto il progetto, NodeJS.
3. Download NodeJs
Node.js è un ambiente runtime JavaScript multipiattaforma open source che esegue codice JavaScript questa volta però non all’interno di un browser web. NodeJs esegue codice javascript autonomamente, inoltre, ti permette di creare applicazioni web ServerLess, cioè, senza la necessità di installare un server web per l’elaborazione di script lato server, come ad esempio, PHP, Java, c#, ecc…
In questa guida, stiamo trattando l’argomento circa la connessione a database MS SQL Server utilizzando JavaScript in ambiente Node.js. Quindi, per iniziare con il piede giusto, dobbiamo installare oltre a MS SQL Server anche Node.js sul computer. A questo link, è possibile scaricare NodeJs e installarlo.
Inoltre, seguendo questo video tutorial potrai vedere, passo-passo, come installare velocemente NodeJs sul tuo computer.
Da qui in avanti, nella guida, utilizzeremo lo strumento a riga di comando (CLI) come il Terminale di Linux o CMD di Windows per eseguire i comandi e le query che seguiranno.
LEGGI ANCHE: Come diventare Full Stack Developer con Node Js ed Express Js
4. Creare su SQL Server database di prova
Come anticipato precedentemente, a questo punto, MS SQL Server deve essere installato sul computer locale. Ora, apri il prompt dei comandi di Windows e digita il seguente codice per connetterti a SQL Server.
sqlcmd -S localhost -U SA -P "<password>"
Ora, abbiamo bisogno di creare un database che utilizzeremo per le nostre prove, pertanto, digita i seguenti comandi per creare un database di nome “test”.
CREATE DATABASE test; GO
Una volta creato il database, devi istruire SQL Server a inoltrare i comandi verso il database appena creato, quindi, digita il comando seguente per rendere il database test il database corrente.
Use test; GO
Adesso è necessario creare una tabella all’interno del database test, digitando i comandi seguenti creerai la tabella studenti contenente i campi: id, nome e cognome.
CREATE TABLE studenti (id INT, nome NVARCHAR(30), cognome NVARCHAR(30)); GO
Tanto per rendere le cose ancora più interessanti e reali è meglio riempire la tabella studenti con alcuni records. I seguenti comandi aggiungono 3 studenti all’interno della tabella “studenti”.
INSERT INTO studenti VALUES (1, 'Stephen', 'Hawking'); INSERT INTO studenti VALUES (2, 'Isaac', 'Newton'); INSERT INTO studenti VALUES (3, 'Leonardo', 'da Vinci'); GO
Verifichiamo se i comandi precedenti hanno inserito effettivamente i 3 records nella tabella studenti:
SELECT * FROM studenti; GO
5. Crea il tuo primo script con npm NodeJs
Prima di iniziare Node.js dovrebbe essere installato nel sistema locale. Come primo step è necessario inizializzare l’ambiente Node.js digitando il seguente comando nella console o nel terminale di sistema.
npm init
A questo punto è necessario installare Express Js che ci consentirà di creare un middleware per rispondere al tutte le richieste HTTP. Quindi, digita il seguente comando:
npm install express --save
Come ultimo step installiamo Il client Microsoft SQL Server che ci consentirà di connetterci con il server SQL e di impartire, a quest’ultimo, i comandi necessari per le nostre richieste http. Pertanto, digita il seguente comando:
npm install mssql --save
A questo punto siamo pronti per iniziare a scrivere il codice, con Nodejs ed ExpressJs, per reperire dati dal nostro server SQL. Innanzitutto dobbiamo creare un file, in una cartella del nostro computer locale, cioè dove è installato sql server e nodejs, con estensione “.js” e, che per nostra comodità, possiamo rinominare in server.js. Infine, copia e incolla, in server.js, questo codice:
// --------------------------
// Importa i moduli richiesti
// --------------------------
const express = require('express');
const app = express();
const mssql = require('mssql');
// --------------------------
// Get request GetAllStudents
// --------------------------
app.get('/GetAllStudents', function (req, res) {
// Parametri di connessione al database
const config = {
user: 'SA',
password: 'Your_Password',
server: 'localhost',
database: 'test'
};
// Connessione al database
mssql.connect(config, function (err) {
var request = new mssql.Request();
// Esegue Query SQL Server
request.query('select * from studenti',
function (err, records) {
if (err) console.log(err)
// Invia i records al browser
res.send(records);
});
});
});
// -------------------------------
// Fine Get request GetAllStudents
// -------------------------------
// --------------------------------------
// Server web in ascolto sulla porta 5000
// --------------------------------------
var server = app.listen(5000, function () {
console.log('Il Server è in ascolto sulla porta 5000...');
});
Esegui il file server.js usando il seguente comando:
node server.js
Dopo aver eseguito il comando precedente, vedrai il seguente output visualizzato nella tua console dei comandi:
Il server è in ascolto sulla porta 5000...
Questo significa, che nel file server.js è compreso non solo il codice per eseguire la Get Request GetAllStudents, cioè il codice per eseguire una query su SQL Server, ma anche il codice per creare e avviare il nostro server web.
Infatti, le ultime 3 righe di codice in server.js è tutto quello che serve per creare un vero e proprio server web. Ecco perché questo tipo di applicazioni sono chiamate ServerLess, cioè, applicazioni web che per essere eseguite non hanno bisogno di un server web installato come, ad esempio, Apache.
Ora, non ci resta che richiamare la http Get Request “GetAllStudents”. Per fare questo apri il browser web e digita l’URL http://localhost:5000/GetAllStudents/ nella barra degli indirizzi del browser stesso, premi invio e dovresti vedere qualcosa del genere:
{
“studenti”: [
{
“id“ : 1,
“nome“ : “Stephen“,
“cognome“ : “Hawking“
},
{
“id“ : 2,
“nome“ : “Isaac“,
“cognome“ : “Newton“
},
{
“id“ : 3,
“nome“ : “Leonardo“,
“cognome“ : “da Vinci“
}
]
}
6. Come invocare una http Get Request in NodeJS con Javascript
Una volta definite tutte le http Get Request nel file server.js rimane il problema di come invocare da client la richiesta, e di come recuperare i dati, forniti da SQL Server, in una pagina html.
Innanzitutto, sempre nella stessa cartella creata per contenere il file server.js, crea anche il file index.html, copia e incolla il codice seguente in index.html:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Get request da NodeJs e SQL Server</title>
<!-- Font-awesome and Google APIs CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?display=swap&family=Roboto|Varela+Round" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- JQuery CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<link rel="stylesheet" href='https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css' />
<link rel="stylesheet" href='https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css' />
<link rel="stylesheet" href='https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css' />
<link rel="stylesheet" href='https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css' />
<!-- Datatables Buttons CSS -->
<link rel="stylesheet" href='https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css' />
<!-- Bootstrap Multiselect CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<!-- JQuery JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
<!-- Bootstrap Multiselect JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<!-- Datatables Buttons JS -->
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
</head>
<body>
<div class="table-responsive">
<table id="user_data" class="table table-bordered">
<thead class="header-table">
<tr>
<th>ID</th>
<th>NOME</th>
<th>COGNOME</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var dataTable;
fetch_data();
function fetch_data() {
dataTable = $('#user_data').DataTable({
dom: 'lrfBtip',
retrieve : true,
autoWidth : true,
responsive: true,
fixedColumns: false,
processing : true,
serverSide : true,
select: true,
select: {style: 'single'},
paging: true,
PagingType: 'simple',
pageLength: 10,
order : [],
ajax : {
url: 'http://localhost:5000/GetAllStudents/',
type:"GET"
}
});
</script>
</body>
</html>
Il codice presente all’interno del file index.html è suddiviso in 3 sezioni:
a) Nella prima sezione, e cioè, tutto il codice racchiuso tra i tag <head> e </head>, troviamo i comandi di inclusione di tutte le librerie javascript necessarie e recuperate dai loro rispettivi siti internet certificati. Per questo motivo il PC che eseguirà index.html dovrà essere necessariamente connesso a Internet.
b) Nella seconda sezione, e cioè, tutto il codice racchiuso tra i tag <div class=”table-responsive”> eilsuo tag </div> di chiusura, troviamo il codice html di creazione della tabella html che riceverà i dati richiesti a SQL Server tramite l’invocazione della Get Request GetAllStudents.
c) Nella terza sezione, e cioè, tutto il codice racchiuso tra i tag <script type=”text/javascript” language=”javascript”> eilsuo tag </script> di chiusura, troviamo il codice javascript che invoca la http Get Request GetAllStudents e sfrutta i dati richiesti a SQL Server per popolare la tabella HTML.
Una volta copiato e incollato questo codice, all’interno del file index.html, non ci resta che aprire questo file, con un browser qualsiasi, e al caricamento della pagina vedrai la tabella html popolarsi con i dati forniti dalla query SQL invocata da GetAllStudents.
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
