Notifiche Web Api
25 Gennaio 2019
Grazie alle Notifications API siamo in grado di inviare delle notifiche sfruttando il sistema operativo che sta usando il nostro utente.
Il primo passo è il rilevamento della funzionalità di base, e quindi si passa al codice di creazione della notifica:
<script type="text/javascript">
function showNotification() {
if(window.Notification) {
Notification.requestPermission(function(status) { // lo stato è "granted", se accettato dall'utente
console.log('Status: ', status);
var n = new Notification('Titolo', {
body: 'corpo del messaggio',
icon: '/pwa_icons/icon.png' //optional
});
});
}
else {
alert('Il tuo browser non supporta le notifiche.');
}
}
</script>
Dopo aver confermato che l’API di notifica è supportata, è necessario richiedere l’accesso alla notifica da parte dell’utente. Se lo stato ritorna come “granted”, puoi creare una nuova notifica con un titolo e un corpo del testo.
Di seguito il codice html per richiamare la funzione.
<body onload="showNotification()">
Qui puoi trovare una demo e il codice.
Upload multiplo di immagini con anteprima
18 Ottobre 2018
Vediamo come realizzare un upload multiplo, in un unico file php ad esempio upload.php, con le anteprime delle immagini prima di essere caricate sul server. Di seguito lo script:
Codice html
<form name="uploadform" enctype="multipart/form-data" action="" method="post"> <input id="files" name="file[]" type="file" multiple="multiple" accept="image/*" /> <input type="submit" name="invio" value="Invia"> <div id="selectedFiles"></div> </form>
Codice javascript per la visualizzazione delle anteprime delle immagini da inserire dopo la chiusura del tag </form>
<script type="text/javascript">
var selDiv = "";
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document.querySelector('#files').addEventListener('change', handleFileSelect, false);
selDiv = document.querySelector("#selectedFiles");
}
function handleFileSelect(e) {
if(!e.target.files || !window.FileReader) return;
selDiv.innerHTML = "";
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {
if(!f.type.match("image.*")) {
return;
}
var reader = new FileReader();
reader.onload = function (e) {
var html = "<img src=\"" + e.target.result + "\"><br>" + f.name + "<br>";
selDiv.innerHTML += html;
}
reader.readAsDataURL(f);
});
}
</script>
Codice php per l’invio dei file da inserire prima dell’apertura del tag <form>
<?php
$maxSize = 3000; //massima dimensione dei file in kilobyte
$acceptType = array( //tipi di file accettati, in questo caso solo immagini
'png' => 'image/png',
'jpe' => 'image/jpeg',
'jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'gif' => 'image/gif',
'bmp' => 'image/bmp',
'ico' => 'image/vnd.microsoft.icon',
);
$cartella = "uploads/"; //cartella dove vengono caricati i file nel server
for($i=0;$i<count ($_FILES['file']['name']);$i++)
echo "Risultato file ".($i+1).": ".multipleUpload($i, $cartella, $maxSize, $acceptType)."<br>";
function multipleUpload($i, $cartella, $maxSize, $acceptType) {
if(@$_FILES['file']['name'][$i] != "") {
$destinazione = $cartella.basename( $_FILES['file']['name'][$i]);
if($_FILES['file']['size'][$i] <= $maxSize*1024) {
if(in_array($_FILES['file']['type'][$i], $acceptType)) {
if(@move_uploaded_file($_FILES['file']['tmp_name'][$i], $destinazione))
return "File caricato con successo!";
else
return "Errore nell'upload del file";
}else
return "Tipo di file non accettato!";
}else
return "Dimensione del file troppo grande, massima dimensione accettata: ".$maxSize." kilobyte";
}elseif(isset($_POST['invio']))
return "Nessun file inserito!";
}
?>
Qui puoi trovare la demo senza la parte lato server php
Upload di immagini con anteprima
16 Ottobre 2018
Questo script si occupa di visualizzare in anteprima un’immagine prima che venga caricata sul server. Questo si può ottenere utilizzando la funzione URL.createObjectURL() sul tag <input file>. Questo url viene passato a <img> per dire al browser di caricare l’immagine. Di seguito il codice javascript:
<script language="Javascript">
var caricaFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
Questo è invece il codice html
<input name="file" type="file" accept="image/*" onchange="caricaFile(event)"> <img src="default.gif" border="0" id="output">
Proteggere una pagina con password
20 Settembre 2018
Con javascript puoi scegliere diversi metodi per proteggere una pagina con una password. Molti sono addirittura a prova di hacker. Tuttavia, esistono soluzioni sofisticate non basate su html o javascript per garantire la massima protezione.
Lo script mostra come utilizzare javascript per proteggere una parte di un sito o una semplice pagina web ricorrendo a una password. Quest’ultima viene mostrata in una finestra di dialogo per dimostrare il modo in cui javascript interagisce con il browser:
|| leggi tutto »
Come installare SyntaxHighlighter
13 Marzo 2018
1. Scarico l’ultima versione del software
2. Estraggo i file in un archivio temporaneo e carico le directory Scripts and Styles
3. Per attivare, ad esempio, l’evidenziazione della sintassi per il codice php e xml, inserire nella <head> </head> della pagina da evidenziare il seguente codice:
<link rel="stylesheet" type="text/css" href="Styles/SyntaxHighlighter.css"></link> <script type="text/javascript" src="Scripts/shCore.js"></script> <script type="text/javascript" src="Scripts/shBrushPhp.js"></script> <script type="text/javascript" src="Scripts/shBrushXml.js"></script> <script type="text/javascript" src="Scripts/shBrushCss.js"></script> <script type="text/javascript" src="Scripts/shBrushJScript.js"></script>
4. Inserire questo codice prima del tag di chiusura del </body> nella pagina da evidenziare:
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'Scripts /clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Per visualizzare il testo correttamente evidenziato, seguire le seguenti procedure:
1. Inserisci il codice da evidenziare tra i due tag <pre></pre>.
2. Impostare il nome dell’attributo su “Code” e la classe attribute su una delle lingue disponibili (php, XML, ecc.), come nel seguente codice:
<pre name="code" class="php"> ... qui va inserito il codice ... </pre>