Costruire un blog con JSON

Una delle cose più interessanti che si possono fare con JavaScript è la gestione di dati esterni provenienti da file, dati che, se ben strutturati, permettono di costruire pagine web da zero con poche linee di codice in maniera dinamica. Immaginiamo un giornale online, o un blog. Sostanzialmente, al netto dei menu, dei loghi, degli ads, questo genere di pagina web è composto da uno scheletro contenente una struttura ripetitiva con tanti elementi uguali quanti sono gli articoli o i post mostrati. Normalmente questi articoli o post son salvati in un database, e richiamati tramite uno script che agisce lato back-end ma integrato nella nostra pagina. Esiste da sempre una alternativa: utilizzare files di testo residenti sul server contenenti i vari articoli o post, leggere il contenuto di questi files di testo, e visualizzarlo nella pagina web in qualche modo; questo metodo però è sempre stato assai limitante in termini di formattazione, contenuti multimediali, e reattività.

Lo sviluppo e la diffusione delle tecnologie AJAX e JSON ha permesso, negli ultimi anni, di estendere di molto le possibilità della tecnica dei files esterni: unendo una chiamata AJAX ad un file JSON contenente i dati di ogni articolo, compresa la sua URL, ed incorporando in un IFRAME o come OBJECT il file HTML dell’ articolo, possiamo costruire veri e propri giornali online e blog correttamente formattati e con tutte le potenzialità di HTML e CSS, compresa la possibilità di incorporare eventi, inserire immagini, link, e altro.

In questo articolo, quindi, mostreremo come costruire una pagina di questo tipo, utilizzando semplicemente 3 files:

- Un file HTML contenitore in cui inserire gli script necessari, che sostanzialmente può essere una normale pagina del nostro sito;

- Un file esterno JSON contenente la struttura oggetti con l’ elenco degli articoli da caricare;

- Un file HTML ‘improprio’ che contiene un articolo di esempio.

Con ‘improprio’ intendiamo un file con estensione e con formattazione HTML ma privo di alcuni tags fondamentali: HTML, HEAD e BODY. E’ necessario evitare la presenza di questi tag nel file da incorporare perché questi causerebbero la rottura della struttura di incorporamento come oggetto.

Iniziamo dunque il nostro esperimento.

IL FILE CONTENITORE

Chiamiamolo semplicemente INDEX.HTML, questo dovrà contenere 3 sezioni fondamentali:

- La chiamata AJAX al file di dati JSON esterno per ciclarne i contenuti,

- La definizione del template HTML dell’ articolo,

- Un DIV da popolare con il risultato della chiamata.

Qui di seguito è riportato il codice completo da inserire nella pagina, con tanto di commenti. Il lettore potrà salvare questa struttura per tutti gli utilizzi simili, infatti questa struttura si presta ad ogni genere di lettura da file JSON, lasciando allo sviluppatore solo il compito di modificare il template HTML a piacimento qualora volesse costruire strutture diverse.


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Semplice blog con JSON</title>
<style>
<!-- inserire qui eventuali stilizzazioni addizionali -->
</style>
<script>
function ajax_get_json(){
// identifico il div destinazione
var results = document.getElementById("results");
// effetuo la chiamata AJAX e accedo al file JSON
var hr = new XMLHttpRequest();
hr.open("GET", "articoli.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function(){
if(hr.readyState == 4 && hr.status == 200){
// salvo i dati del file JSON in una variabile
var data = JSON.parse(hr.responseText);
var articlecard = "";
// ciclo il contenuto del file identificando ogni oggetto: 1 oggetto = 1 articolo, e definisco il template HTML
for(var obj in data){
articlecard += "<div class=box><h2 class=title>" + data[obj].title + "</h2><p class=articledata><b> Autore:</b> "
+ data[obj].author + "<br><b>Data:</b> " + data[obj].wdate + "<br></p><hr> <br> <div class=article>
 <object type=\"text/txt\" width=100% height=200 data=" + data[obj].url + "></object></div></div>";
}
// mostro il risultato nel div destinazione
results.innerHTML = articlecard;
}
}
hr.send(null);
results.innerHTML = "requesting...";
}
</script>
</head>

<body>
<center>
<h1>Lista Articoli</h1>
<!-- with JSON dynamic blog -->
<div id="results"></div>
</center>
<script>ajax_get_json();</script>
</body>
</html>

IL FILE DI DEFINIZIONE

Chiamiamolo ARTICOLI.JSON, questo conterrà la lista di definizione per i singoli articoli secondo la sintassi JSON. Per brevità e praticità inseriamo solo 2 definizioni con valori diversi ma che rimandano allo stesso file esterno. Ogni volta che verrà scritto un nuovo articolo basterà inserire una nuova definizione e correggere il percorso del file da linkare. Lo sviluppatore si dovrà ricordare che nell’ ultima riga di definizione la virgola finale andrà omessa.

{ 
"u1":{"title":"Creare un blog con JSON", "author":"A. Demontis", "wdate":"25 Agosto 2022", "url":"jsonblog.html"},
"u2":{"title":"Immagini responsive con SRCSET", "author":"L. Pala", "wdate":"22 Agosto 2022", "url":"jsonblog.html"}
 }

IL FILE DELL’ARTICOLO

In questo caso si chiamerà JSONBLOG.HTML. Come anticipato, questo file conterrà il nostro articolo in formato HTML, ma privo dei tags HTML,HEAD e BODY. Il file dovrà contenere il tag STYLE per la stilizzazione del suo contenuto, o un LINK REL al file .CSS relativo. La stilizzazione ulteriore si rende necessaria perché il file di stile globale del blog non può agire su contenuti caricati da un file esterno tramite l’ utilizzo del tag OBJECT. In questo file vanno anche inseriti i link, le immagini, e tutti i contenuti relativi all’ articolo, ricordandosi che eventuali richiami alle pagine esterne all’ articolo dovranno essere indirizzati ad un TARGET=”_BLANK”. In questo codice di esempio é stato usato del semplice testo segnaposto.

<style>
.testo {
font-size: 1rem;
text-align: justify;
margin: 5px;
}
</style>
<div class="testo">
<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit. Sed lobortis dui quis urna tristique, et convallis odio vestibulum.  
Pellentesque ac efficitur risus. In hac habitasse platea dictumst. <i>Etiam maximus</i> scelerisque
 nulla et <a href="#">bibendum</a>.
<div>
<div style="float: left; margin-right: 10px;">
<img src="javascript.png" width=100>
</div>
<div>
<p>Morbi vitae odio vitae libero malesuada egestas. Integer molestie ex vel ante fringilla, vitae auctor sem suscipit. Sed consectetur vulputate lectus eget tempus. Donec tempor lectus vitae pellentesque lacinia. Vestibulum in auctor metus et Integer molestie ex vel ante fringilla, vitae auctor sem suscipit. 
Celerisque nulla et ex vel ante fringilla, sed em, quousque latinorum retae tenologie proante liberam ubi libere molestie involvant. Quo sentiem?!
</p>
</div>
</div>
<p>[<a href="#" target="_blank">Read more...</a>]</p>
</div>

COMMUNITY OPEN BLOG

Costruire un blog con JSON