La prima parte dell'articolo ha spiegato come funziona una pagina Web lato client.
Ora vediamo cosa succede lato server.

Parte II

Lato server: modulistica e database

1. Moduli

Finora abbiamo parlato solo del recupero dei dati dal server. E per l'invio dei dati? I moduli sono l'altra faccia dell'HTML: ci permettono di inviare informazioni al server. Potremmo utilizzare i moduli per aggiornare le informazioni esistenti o per aggiungere nuove informazioni.
I metodi più comunemente usati nei moduli HTML sono GET et POST.

Dai un'occhiata al codice sopra :
Abbiamo due campi di input (ingresso) dove l'utente può inserire i dati e un pulsante di invio (inviare).
Dopo che l'utente ha fatto clic su questo pulsante, il browser invia i valori dei dati inseriti nei due campi a uno script PHP chiamato createprodotto.php.
Nel nostro esempio, è PHP, ma potrebbe essere JSP, Python o qualsiasi altro linguaggio di scripting lato server. Lo script lato server può leggere i valori inviati dal browser tramite il metodo POST, quindi elaborarli o archiviarli in un file o in un database. In poche parole, è il modo in cui i dati vengono inviati al server prima di essere archiviati.

Cos'è PHP?

PHP per Preprocessore Ipertestuale, è un linguaggio di scripting lato server per la creazione di siti Web e applicazioni dinamici. In altre parole: è un linguaggio che permette di accedere e leggere un database per poi trascriverne le informazioni all'interno di una pagina HTML.
Nota: Supponiamo di voler aggiungere delle convalide prima di inviare i dati, ad esempio il nome del prodotto deve contenere almeno 5 caratteri, oppure il campo "SKU" non deve essere vuoto. Potremmo utilizzare JavaScript per queste convalide. Dovremo quindi reagire all'evento clic del pulsante di invio e verificare se gli elementi web hanno i dati che desideriamo. Se manca qualcosa, possiamo visualizzare un messaggio di errore e interrompere l'invio di dati al server.

2. Banche dati

Non appena la quantità di informazioni inizia a crescere, recuperarle dai file può diventare davvero complicato oltre che molto lento. Ad esempio, prendiamo il file del listino prezzi, supponiamo che l'azienda abbia migliaia di prodotti e vogliamo conoscere le informazioni dell'ultimo prodotto nel listino, il che significa che dobbiamo leggere tutti i prodotti fino a quello che troviamo quello che siamo cercando. Questo non è un modo ottimale per recuperare informazioni. È per risolvere questo problema che sono stati creati i database.
In un database (DB), memorizziamo i dati in tabelle (un insieme strutturato di dati). Pertanto, possiamo facilmente eseguire una ricerca, ordinare i dati o eseguire qualsiasi altra operazione.

3. Linguaggi e framework di scripting lato server

Abbiamo bisogno di linguaggi di scripting lato server per :

memorizzare e leggere le informazioni da un database o da un file;
ottenere (GET) informazioni da un server eseguendo determinate operazioni;
leggere le informazioni inviate dal cliente (POST) e conservarli o distribuirli effettuando determinate operazioni di trattamento.

Tipici linguaggi di programmazione come C e Java possono leggere e scrivere su database, ma non possono essere eseguiti direttamente sul browser web (client). Ciò ha dato origine a linguaggi di scripting lato server.
I linguaggi di scripting lato server possono eseguire tutta la normale elaborazione dei dati, comunicare con i database ed essere eseguiti su un server Web. I linguaggi di scripting lato server più comuni sono PHP, Perl, JSP, Ruby on Rails, ecc.
Gli sviluppatori hanno iniziato a utilizzare questi linguaggi e si sono presto resi conto che stavano scrivendo lo stesso codice standard per tutti i progetti, il che ha portato allo sviluppo di quadri che facilitano e accelerano lo sviluppo di applicazioni web.
Alcuni framework conosciuti :

PHP: Zend, YII, Symfony, CakePHP, Laravel;
CMS PHP (usato anche come framework): Drupal, Joomla, SugarCRM, WordPress;
Java : J2EE, Ibernazione, Struts, Primavera;
JavaScript : Node.js.

4. Architettura e sessioni MVC

L'architettura MVC ci aiuta a dividere il codice in più file e ci permette di separare la logica aziendale dalla presentazione, in modo da facilitarne la successiva modifica.
Prendendo l'esempio di una piattaforma di blogging, torneremo su tutti gli argomenti spiegati in precedenza per vedere come possiamo codificare usando l'architettura MVC.
Una piattaforma di blogging gestisce contenuti dinamici e potrebbe contenere diversi moduli come :

Utenti (utenti);
Articoli (post del blog);
Parole chiave/tag (tag);
Categorie (Sostenibili).

Prima di parlare di altre funzionalità, immaginiamo il design del database per la tabella di Articoli (tbl_blog_post). Campi importanti sarebbero :

Come puoi vedere, memorizziamo le informazioni utente duplicate: nome (Nome) e cognome (Cognome) ripetere il contenuto del campo Creato da. Se abbiamo 10 post del blog, memorizzeremo queste informazioni utente duplicate in ciascuno dei 000 post. E potrebbero esserci altre informazioni sull'utente da salvare, come il suo ruolo, la sua ultima data di accesso, ecc.
L'alternativa, come avrai già intuito, è memorizzare queste informazioni sull'utente in un'altra tabella utente (utente_tbl) e collegarlo a quello degli articoli (tbl_blog_post) da un ID come di seguito :

Questa separazione dei dati in più tabelle è uno dei tanti principi di normalizzazione dei dati.
La prossima parte importante è consentire all'utente di inserire dati in queste tabelle tramite un modulo HTML. Ricorda che descriviamo in dettaglio questi passaggi per comprendere i concetti: questo non è affatto un tutorial di programmazione completo.

Creazione di un nuovo post sul blog da parte di un utente autenticato

Per questo abbiamo bisogno di un modulo HTML con due campi di input (Titolo, contenuto) mediante il quale l'utente può creare un articolo.
Una volta che l'utente inserisce le informazioni e fa clic sul pulsante di invio, "Crea articolo", i valori del modulo vengono inviati al server web tramite il metodo POST. I valori inviati POST può essere letto da qualsiasi linguaggio di scripting lato server. Lo script del server (PHP, Ruby on Rails, Python, ecc.) legge il valore dal form e lo passa al database.
Lo script può anche elaborare informazioni, che possono essere recuperare la data e l'ora dal server o fare determinati calcoli in base a valori estratti da un'altra tabella nel database o da un altro servizio web.
Un altro punto da notare: lo script può anche eseguire convalide, dette anche convalide lato server, per garantire che i dati siano validi. Solo se i dati sono validi vengono salvati nella tabella tbl_blog_post. In caso contrario, viene inviato un messaggio di errore al client per inserire le informazioni mancanti.
Visivamente, il modulo per recuperare i dati dalla nostra tabella tbl_blog_post potrebbe sembrare un'interfaccia per la creazione di post di WordPress :

C'è un campo per inserire il titolo (Titolo), quindi una casella di input per il contenuto (Contenuti).
La data di creazione (Creato), dal canto suo, viene recuperato dinamicamente dal linguaggio di scripting (qui, PHP) e corrisponderà all'esatto momento di creazione dell'articolo (anno, mese, giorno, ora, minuti e anche secondi).
Altri dati non necessari per l'inserimento: l'identificativo dell'articolo (ID). Viene generato automaticamente dal database che garantisce che sia univoco all'interno della stessa tabella.
Nella nostra tavola tbl_blog_post, oltre al titolo e al contenuto, abbiamo anche un campo chiamato creato da.
Come otteniamo il valore per popolare questo campo?

Utente connesso/autenticato

In genere, la maggior parte delle applicazioni Web dispone della funzionalità di accesso. Ogni volta che un utente si autentica correttamente, le informazioni di quell'utente vengono archiviate in sessioni in modo che le informazioni possano essere riutilizzate in seguito.

Che cos'è una sessione?

HTTP è un protocollo stateless, il che significa che nessuna richiesta GET ou POST inviato dal client al server web non viene tracciato. Se il client (il browser) effettua due richieste, il server web non sa se provengono dallo stesso utente. Questo significa anche che, ad esempio, se sei connesso a un sito di e-commerce e aggiungi prodotti al carrello, il server non sa che sono per lo stesso utente.
Per superare questa mancanza di stato, i client devono inviare informazioni aggiuntive in ciascuna delle loro richieste per conservare le informazioni sulla sessione per la durata di più richieste. Queste informazioni aggiuntive vengono memorizzate sul lato client nei cookie e sul lato server nelle sessioni.
Una sessione è un array di variabili, in cui le informazioni sono memorizzate per essere utilizzate su più pagine. Le sessioni sono identificate da un ID univoco il cui nome dipende dalla lingua — in PHP si chiama “ID sessione PHP”. Questo stesso ID di sessione deve essere memorizzato in un cookie sul browser per essere associato all'utente.

Mostra un singolo elemento

Il passaggio successivo consiste nel visualizzare i post del blog individualmente. Abbiamo bisogno di leggere i dati dal database in base al post id (ID) dell'articolo richiesto, quindi visualizzare i valori dei campi Titolo (Titolo) e Contenuto (Contenuti).
Ecco lo pseudocodice per visualizzare un singolo post :

Leggere i dati del database associati all'ID articolo.
Inserisci questi dati in una pagina HTML contenente CSS e JS.

Tutto il codice sopra può essere scritto in un unico file. In realtà è così che è stato fatto all'inizio, ma la comunità di sviluppo ha capito che non era ottimale. Infatti, per ogni nuova funzionalità da aggiungere, era necessario modificare l'intero codice e non era facile lavorare in un ambiente multi-sviluppatore.
Ciò ha indotto gli sviluppatori web ad adottare l'architettura MVC, che essenzialmente suddivide il codice in tre componenti :

Le Modele : Questa è la logica aziendale, indipendente dall'interfaccia utente. Nel nostro esempio, questo è il codice che recupera gli articoli dal database.
La Vue : Una vista una rappresentazione visiva dei dati. Nel nostro esempio, è il codice HTML che visualizza gli articoli. Quindi i dati provengono dal modello e l'HTML è la vista.
Il controllore : Si richiama cliccando sul link “Vedi articolo”. Il Titolare recupera i dati dal database utilizzando il Modello e li visualizza nella Vista.

Diamo un'occhiata a un URL tipico per un'applicazione che utilizza l'architettura MVC.
http://www.abc.com/blogpost/id/1
Qua, post sul blog è il nome del controller e la vista è un'azione (metodo) di questo controller. id è l'identificatore dell'oggetto. Se inseriamo questo URL in un browser, la richiesta andrà all'azione "Visualizza" del controller "BlogPost" e chiamerà lì il modello per ottenere il contenuto dell'articolo con ID "1", sotto forma di "un oggetto. Questo oggetto viene quindi passato alla "Vista" per essere visualizzato.
Più concretamente: il seguente URL https://www.ux-republic.com/blog/page/2 visualizza la seconda pagina dell'elenco di tutti i post del blog di UX-Republic.
Scomponendo l'URL, abbiamo :

blog, il controllore
pagina, l'identificatore che designa il numero di pagina
2, il numero di pagina

Ogni volta che si fa clic sulla paginazione, è lo stesso metodo del controller blog che viene eseguito e che è responsabile del recupero del contenuto corrispondente al pagina selezionato.

Ajax e app a pagina singola (SPA)

Se sei nato nell'ultimo millennio, devi ricordare i provider di webmail Hotmail e Yahoo!, che erano molto popolari negli anni '1990 e 2000. Quando hai cliccato sulla casella di posta o su un'e-mail, l'intera pagina veniva aggiornata. Intorno al 2004, Gmail è arrivato con una caratteristica importante: Ajax. Con Ajax, l'intera pagina non viene aggiornata, lo sono solo le parti che ne hanno bisogno. Quindi, se ricevi una nuova email, la vedrai semplicemente apparire nella parte superiore della pagina, senza doverla ricaricare. Ciò ha contribuito a offrire agli utenti una migliore esperienza di navigazione e Ajax è diventato un modo molto popolare per creare app.

Cos'è l'Ajax?

Il termine Ajax rappresenta un ampio gruppo di tecnologie web che possono essere implementate in un'applicazione che comunica con un server in background, senza interferire con lo stato corrente della pagina.
Con l'Ajax, invii una richiesta tramite GET al server, e il server invia la sua risposta senza bloccare la pagina web, il che significa che l'utente può continuare la navigazione senza alcuna interruzione. La risposta dal server viene inserita o aggiunta alla pagina web corrente.
Sui siti che non utilizzano Ajax, ogni azione dell'utente richiede un ricaricamento completo della pagina dal server. Questo processo è inefficiente e crea un'esperienza utente negativa perché tutto il contenuto della pagina scompare prima di riapparire.
Ajax è una delle tecniche utilizzate per creare applicazioni a pagina singola (App a pagina singola ou SPA). Come suggerisce il nome, l'intera app si adatta a una singola pagina e tutto il suo contenuto viene caricato dinamicamente. Framework JavaScript come Angular, React e Backbone.js possono essere utilizzati per creare SPA.

Server e browser web

I browser sono gli interpreti del web. Richiedono dati dai server web, che elaborano la richiesta e inviano una risposta al browser in HTML (con CSS, JS, immagini, ecc.), e questa risposta viene quindi visualizzata.
Una richiesta al server web può essere effettuata utilizzando uno dei tre metodi importanti :

GET : ottenere la risorsa richiesta come risposta;
TESTA : uguale a GET, ma la risorsa viene recuperata nell'intestazione della risposta;
POST : invia i dati al server.

Ad esempio, quando si digita “google.com” nel browser, quest'ultimo invia in background questo comando al server google.com:
OTTIENI: http://google.com
Il server web di Google esaminerà quindi il suo file principale (indice) e restituirà la sua risposta al client. Di solito invia contenuto HTML e file CSS insieme a qualsiasi altro file multimediale.

# Traduzione dell'articolo Comprendi lo sviluppo web in meno di 1 oraDa Shaik Ismail

Comprendi lo sviluppo web in meno di un'ora [parte 2]