Category Archives: ajax

Inviare dati a una pagina web senza fare in refresh in ajax e jquery

Tutorial su come inviare dati a una pagina web senza fare in refresh in ajax e jquery

Sito web: http://nettuts.com/...-using-jquery/

Sistema di login con php e ajax per autenticazione utenti registrati

In questo articolo vedremo come sia possibile tramite ajax/php/mysql autenticare gli utenti registrati e farli accedere ad un'area riservata.
Il database
La prima cosa che vedremo il database mysql. La nostra tabella (users) del database riservata agli utenti costituita da 3 campi:

username, password, id

con ovvio significo degli stessi.

La pagina di login
La nostra pagina che effettua il login, avr due chiamate a due file javascript e due campi per l'inserimento dei valori username e password.

 
<html>
<head>
<title>AJAX Login System
<script src="md5.js" type="text/javascript">
</script><script type="text/javascript" src="ajaxpw.js">
</script></title></head>
<body>
<form action="post" onSubmit="return false" name="form1">
<div id="login">
<label for="username">Username: </label>
<input type="text" name="username" id="username" size=20/>  <br />
<label for="password">Password: </label>
<input type="password" name="password" id="password" size=20/>  <br /><br />
<input type="button" onclick="javascript:verifica(document.form1.username.value,document.form1.password.value);" value="Login"/>
</div>
<br /><div id="dati"></div>
</form>
</body>
</html>
 

Le chiamate alle funzioni javascript:

 
<script src="md5.js" type="text/javascript">
</script><script type="text/javascript" src="ajaxpw.js">
</script>

richiamano uno script javascript che si occupa di criptare tramite md5 i dati trasmessi dal modulo mentre il secondo contiene lo script che invia i dati tramite ajax alla pagina di login login.php.

La pagina login.php

 
< ?
$username=$_GET['username'];
$password=$_GET['password'];
 
 mysql_connect("localhost","user","pass")or die("non riesco a connettermi".mysql_error());
 mysql_select_db("db")or die("non riesco selezionare il database");
 $sql = "SELECT * FROM users WHERE username = '$username' and password='$password'";
 
 $dati=mysql_query($sql);
 $numero_righe=mysql_num_rows($dati);
if($numero_righe>0){
           while($array=mysql_fetch_array($dati)){
            if (md5($array[password]) == $password){
            echo"Loggato";
            $_SESSION['temput']=$username;
            $_SESSION['temppass']=$password;
            }
            else echo"Password non corrispondente";
           }
}else echo "Utente non trovato";
?>
 

Questa pagina nn fa altro che ricevere i dati e controllare che vi siano corrispondenze nel db. Se c' ne sono ritorna il messaggio "Loggato" altrimenti no.

Download files dell'articolo

Tutorial avanzati su tematiche web su nettuts.com

Ottimo sito dove poter trovare interessanti tutorial avanazati su programmazione web.

Sito web: http://nettuts.com/

20 tecniche per creare tabelle mediante Ajax e CSS

 

Abbiamo trovato una bella collezione di tecniche per creare tabelle mediante ajax e css. I design sono molto differenti ed ognuna delle tecniche impiegate possiede una qualità che le fa belle. Sicuramente questa collezione ti sarà realmente utile se stavi pensando di creare tabelle per mostrare qualche tipo di informazione o statistiche nel tuo posto.

Sito web: http://www.noupe.com/javascript/21-fresh-ajax-css-tables.html

Creare un news slider accessibile con JQuery ed il suo plugin News Slider Menu

Gli slider sono una soluzione molto utile per avere all'interno del vostro sito una sezione del layout a contenuto fisso, in cui possono apparire news (o banner, promozioni etc) scorrevoli (slider appunto), ossia che cambino da un elemento all'altro in maniera automatica (stabilendo un intervallo di tempo) o che reagiscano agli eventi della pagina (il click dell'utente per esempio).
La soluzione pero' la maggior parte delle volte, presupponendo javascript per le animazioni è difficilmente accessibile e quasi mai non intrusivo, ossia che in mancanza di javascript attivo, la visualizzazione della pagina non ne venga alterata in maniera rilevante.
Da una segnalazione di Alessandro Fulciniti ho analizzato questa:
Accessible News Slider Plugin v1.1 for JQuery.

Se avete Firefox con la developer bar potete tranquillamente disabilitare il Javascript per vedere che la visualizzazione è garantita (si allunga semplicemente l'altezza del layer).


Vediamo di analizzare in dettaglio come implementare lo script.
Inseriamo gli script utili per il funzionamento nel tag HEAD

1) INSERIMENTO SCRIPT E STYLE 

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.accessible-news-slider.js"></script> 

Sempre nel tag HEAD inseriamo un nuovo tag script per impostare le opzioni javascript dello script

2) PERSONALIZZAZIONE DELLO SCRIPT 

<script language="javascript" type="text/javascript">
$(function() {
    $(".top_stories").slideNews();
    /*
    var options = {
        headline: "Top Stories"  (String)          |  Each unique slider (id) or set of sliders (class) can receive a headline.
        newsWidth: 285,          (Integer)         |  The demo is 285. Modifying will require a modification to the CSS.
        newsSpeed: "normal"      (String/Integer)  |  "slow","normal","fast", or an integer, with 1 being the fastest animation.
    }
    $(".top_stories").slideNews(options);
    NOTE:
    The newsWidth is the width of each news item, including the photo, news callout,
    and a 10 pixel margin. The slideNews() method will slide 2x the newsWidth -- moving
    two news stories off the viewable stage with a click of the next/previous buttons.
    */
});
</script>

Come vedete lo stretto necessario è impostare quale sara' il layer che effettuera' lo slider.   

$(".top_stories").slideNews() 

ed eventualmente è possibile inviare allo script opzioni personalizzate attraverlo l'oggetto options

var options = {
headline: "Top Stories", // Stringa, l'intestazione dello slider (nella figura potete vederlo come "Top Stories [ $NUMEROELEMENTI$] [U]View All[/U]"
newsWidth: 285",  // un numero intero. Per modificare la larghezza dello slider, e deve conseguentemente modificato anche lo style
newsSpeed: "normal" // Puo' essere un numero oppure una stringa, valori permessi "slow" = lento, "normal" = velocita' normale, "fast" = veloce
// inserendo 1 si ottiene l'animazione più veloce e dipende dalla velocita' del processore
}
//a questo punto inizializzate la chiamata passando come parametro l'oggetto options
$(".top_stories").slideNews(options);
/* NOTA:
la variabile newsWidth rappresenta la larghezza di ogni singolo elemento news, incluso foto, lo spazio di richiamo della news e 10 pixel
di margine. Il metoto SlideNews() scorrera' di una misura pari a 2 volte la dimensione specificata nella variabile newsWidth -- muovendo quindi
2 elementi fuori dalla parte visibile secondo il click del bottone next/previsous (successivo/precedente) 

Per personalizzare lo stile di visualizzazione del layer che conterra' le slides, prima vediamo quale è la struttura dello slider:
3) L'HTML 

<div class="news_slider top_stories">
   <div class="messaging">
      MESSAGIO IN CASO IL JAVASCRIPT SIA DISABILITATO
   </div>
   <a href="" class="skip" title="In caso di javascript disabilitato non potrai saltare direttamente al contenuto.">Vai al contenuto della news.</a>
   <!-- immagine per passare alla news precedente -->
   <div class="prev">
      <a href="#"><img src="images/prev.gif" width="16" height="16" alt="Precedente" title="Precedente" env="images" /></a>
   </div>
   <!-- immagine per passare alla news successiva -->
   <div class="next">
      <a href="#"><img src="images/next.gif" width="16" height="16" alt="Successiva" title="Successiva" env="images" /></a>
   </div>
   <!-- sviluppo del contenuto dello slider -->
   <div class="news_items">
      <a name=""></a>
      <div class="container fl">
         <!-- 1a news -->
         <div class="item fl">
             <!-- 1a miniatura -->         
            <a href="/" title="Alternate del Primo link"><img src="1a IMMAGINE" width="75" height="75" alt="ALT Foto 1" class="fl" /></a>
            <!-- corpo 1a news -->
            <div class="fl">
               <a href="/" title="Alternate del link.">Link alla 1a news</a>
               <br />
               Descrizione 1a news
            </div>
         </div>
         <!-- 2a news -->
         <div class="item fl">
             <!-- 2a miniatura -->
            <a href="/" title="Alternate del Secondo link"><img src="2a IMMAGINE" width="75" height="75" alt="ALT Foto 2" class="fl" /></a>
            <!-- corpo 2a news -->
            <div class="fl">
               <a href="/" title="Alternate del link.">Link alla 2a news</a>
               <br />
               Descrizione 2a news
            </div>
         </div>
         <!-- .... 3a news etc etc a news -->
      </div>
   </div>
</div> 

come si vede viene usata la tecnica dell'attribuzione di + classi allo stesso elemento class="classe1 classe2"

4) PERSONALIZZAZIONE DEGLI STILI
Ora sappiamo quali elementi personalizzare nello style. Inseriamo lo style nel tag head o linkiamolo come style esterno (sempre nell'HEAD) 

/* Stili della pagina  generali  [ inizio ] */ body {font: normal 75% "Arial","Helvetica",sans-serif;}
a {color: #336699;}
img {border: 0; display: block;}
/* Stili della pagina  generali  [ fine ] */
/* stili specifici per lo slider [ inizio ] */
/* elementi float left utilizzati per le immagini e per i singoli elementi delle slider */
.fl {float: left; display: inline;}
/* personalizzazione del link per effettuare lo skip (saltare al contenuto della news)  */
.skip {position: absolute; left: -5000px;}
/* stili del contenitore globale dello slider */
.news_slider {position: relative; width: 600px; margin: 0 0 10px 0;}
/* stili del messaggio di errore in caso javascript disabilitato */
.news_slider .messaging {display: block; padding: 5px; margin: 0 20px 5px 20px; background: #ffffcc;}
/* stili degli elementi per scorrere avanti ed indietro la paginazione */
.news_slider .prev, .news_slider .next {position: absolute; top: 42%; display: none;}
.news_slider .next {right: 0;}
/* stile generale dei singoli elementi */
.news_slider .news_items {position: relative; width: 560px; left: 20px; overflow: hidden;}
/* stile generale del link per visualizzare tutti gli elementi bypassando lo scorrimento */
.news_slider .news_items .view_all {padding: 5px; margin: 0 0 2px 0; border-top: #eeeeed 1px solid; border-bottom: #eeeeed 1px solid; text-align: center;}
/* stile generale del contenitore di tutti gli elementi */
.news_slider .news_items .container {position: relative; top: 0; left: 0; width: 570px; background: #eeeeed;}
/* stili della singola voce [DA MODIFICARE IN BASE A QUALE VALORE SPECIFICATO nella variabile newsWidth */
.news_slider .news_items .container .item {width: 275px; margin: 0 10px 0 0;}
/* stile del layer di descrizione della news [tenete presente che il layer ha anche la classe fl, ossia float left */
.news_slider .news_items .container .item div {width: 170px; margin: 10px 0 10px 0;}
/* padding dell'immagine miniatura della news */
.news_slider .news_items .container .item img {padding: 10px;}

/* stili specifici per lo slider [ fine ] */ 


4) I FILE NECESSARI
Style.css
Jquery.js
Jquery.accessible-news-slider.js
L'esempio html
Le gif next.gif, prev.gif
Il post dell'autore
Sito ufficiale di jQuery: http://www.jquery.com

Fonte: http://forum.zeusnews.com/viewtopic.php?t=20961