Itek Developer

Programmare è arte

Generare un pdf in asp.net con iTextSharp

10 commenti Pubblicato da su 18 agosto 2011

Come saprete asp.net non supporta nativamente le classi necessarie per generare  un file pdf.  Per ottemperare a questa mancanza , alcuni sviluppatori di terze parti hanno creato delle librerie apposite.  Tra le tante , c’è la libreria iTextSharp , una libreria totalmente gratuita che offre ottime prestazioni ed è di facile utilizzo sia per quanto riguarda l’installazione ( occorre soltanto inserire nel  progetto una dll ) sia per quanto riguarda la programmazione.  Potete scaricare la libreria a questo indirizzo  .

Di seguito ho messo a disposizione il link per scaricare l’esempio che andremo ad analizzare. Se decidete di scaricare il codice di esempio , potrete evitare di scaricare la libreria in quanto essa è già contenuta nel progetto.

L’Esempio e il codice :

La prima cosa da fare è ovviamente quella di creare una nuova applicazione vuota asp.net con Visual Studio. Una volta creato il progetto , nella cartella del  progetto stesso , inserite nella cartella “bin” il file iTextSharp.dll .  Aggiungete al progetto un Reference alla libreria come fareste per una qualsiasi altra dll.  Ed è tutto , ora siamo pronti per generare il pdf.

Nell’esempio proposto andremo a prelevare i dati da un database MSSQL che contiene i dati di un’ipotetica lista dei monumenti più belli del Mondo ( ovviamente il db è molto semplificato in quanto lo scopo di questo tutorial non è quello di dimostrare le pontenzialità di MSSQL).  Di seguito riporto la struttura della tabella places del db places.mdf :

click image to enlarge

Struttura della tabella places da cui andremo a prelevare i dati

  • id = chiava primaria univoca
  • autore = autore dell’articolo
  • titolo = titolo dell’articolo
  • descrizione = descrizione dell’articolo
  • link = link che fa riferimento all’immagine per l’articolo
  • lat = latitudine della località
  • lng = longitudine della località
Per questo esempio lasceremo ad un valore predefinito ( zero ) i campi lat e lng.
Le immagini da visualizzare sono contenute in una cartella di nome “immagini” . Di seguito riporto la struttura del progetto da Solution Explorer di Visual Studio :
click image to enlarge
Struttura del progetto
Nell’immagine potete notare la cartella DBLogic al cui interno abbiamo il file DBPlacesLogic.cs. All’interno di esso troviamo due classi :
  • places
  • DBPlacesLogic
La prima servirà per mappare esattamente la struttura della tabella places e che utilizzeremo come struttura per contenere i dati recuperati dal db.
La classe DBPlacesLogic contiene tutte le funzioni necessarie per l’inizializzazione e il dialogo con il db.
Di seguito riporto il codice delle due classi
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

namespace pdfAndAspnet.DBLogic
{

    /* ----------------------------------------- */
    /* Classe places che mappa la tabella del DB */
    /* ----------------------------------------- */

    public class places
    {
        public int      id          { get; set; }
        public string   autore      { get; set; }
        public string   titolo      { get; set; }
        public string   descrizione { get; set; }
        public string   link        { get; set; }
        public float    lat         { get; set; }
        public float    lng         { get; set; }

        // Costruttore vuoto
        public places() { }

        // Costruttore parametrizzato
        public places(int _id, string _titolo, string _descrizione, string _link, float _lat, float _lng)
        {
            this.id             = _id;
            this.titolo         = _titolo;
            this.descrizione    = _descrizione;
            this.link           = _link;
            this.lat            = _lat;
            this.lng            = _lng;
        }
    }

    /* ----------------------------------- */
    /* Classe per l'interfacciamento al DB */
    /* ----------------------------------- */

    public class DBPlacesLogic
    {

        string connString   = string.Empty;
        SqlConnection conn  = new SqlConnection();

        //Recupera tutti i records dal database e restituisce una lista di oggetti palces
        //che verrà usata per popolare il DataGrid nella pagina principale ( Default.aspx )
        public List<places> GetAllPlaces()
        {
            List<places> tempPlaces = new List<places>();

            InitDBLogic();
            string sqlQueryString = "SELECT * FROM places";
            SqlCommand sqlCmd = new SqlCommand(sqlQueryString, conn);
            sqlCmd.CommandType = CommandType.Text;
            SqlDataReader sqlReader = sqlCmd.ExecuteReader();

            while (sqlReader.Read())
            {
                places result = new places();
                result.id = (int)sqlReader["id"];
                result.autore = (string)sqlReader["autore"];
                result.titolo = (string)sqlReader["titolo"];
                result.descrizione = (string)sqlReader["descrizione"];
                result.link = (string)sqlReader["link"];
                result.lat = Convert.ToSingle(sqlReader["lat"]);
                result.lng = Convert.ToSingle(sqlReader["lng"]);
                tempPlaces.Add(result);
            }
            sqlReader.Close();
            conn.Close();
            return tempPlaces;
        }

        // Dato uno specifico id recupera  il record dal database e restituisce un oggetto places
        public places GetPlaceByID(int id)
        {
            InitDBLogic();
            string sqlQueryString = "SELECT * FROM places WHERE id='" + id.ToString() + "'";
            SqlCommand sqlCmd = new SqlCommand(sqlQueryString , conn);
            sqlCmd.CommandType = CommandType.Text;
            SqlDataReader sqlReader = sqlCmd.ExecuteReader();
            places result = new places();
            while (sqlReader.Read())
            {
                result.id = (int) sqlReader["id"];
                result.autore = (string) sqlReader["autore"];
                result.titolo = (string) sqlReader["titolo"];
                result.descrizione = (string) sqlReader["descrizione"];
                result.link = (string) sqlReader["link"];
                result.lat = Convert.ToSingle(sqlReader["lat"]);
                result.lng = Convert.ToSingle(sqlReader["lng"]);
            }
            sqlReader.Close();
            conn.Close();
            return result;
        }

        // Recupera la ConnectionString dal web.config e inizializza la connessione al database
        private void InitDBLogic()
        {
            connString = ConfigurationManager.ConnectionStrings["placesConnectionString"].ToString();
            conn.ConnectionString = connString;
            conn.Open();
        }

    }
}
Non staremo a spiegare come accedere ed utilizzare un database MSSQL in quanto non è lo scopo di questo tutorial. Andiamo invece a vedere meglio la parte che riguarda la libreria iTexSharp e la creazione del pdf. Come vedete dalla struttura del progetto ( immagine in alto ) abbiamo due pagine aspx :
  • Default.aspx
  • GeneraPdf.aspx
Nella prima , che è la home page del nostro sito , verrà visualizzata una GridView  con tutti i record presenti nel nostro db. Ad essa ho aggiunto una colonna per il “select” di none “Genera il PDF”. Quindi per ogni record avremo la possibilità di selezionare il record. Selezionando uno specifico record , verrà generata una chiamata alla pagina GeneraPdf.aspx con un parametro di nome id. In sostanza facciamo una chiamata alla pagina GeneraPdf.aspx con il supporto di una query string con il solo parametro id che rappresenta il campo id del record selezionato nella GridView.
click image to enlarge

Screenshot della GridView nella pagina Default.aspx

Vediamo il code behind per la pagina Default.aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.IO;
using pdfAndAspnet.DBLogic;

namespace pdfAndAspnet
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DBPlacesLogic dbLogic = new DBPlacesLogic();
            DBGridView.DataSource = dbLogic.GetAllPlaces();
            DBGridView.DataBind();
        }

        protected void DBGridView_SelectedIndexChanged(object sender, EventArgs e)
        {
            string queryParameter = DBGridView.Rows[DBGridView.SelectedIndex].Cells[1].Text;
            string queryString = "~/GeneraPdf.aspx?id=" + queryParameter;
            Response.Redirect(queryString);
        }

    }
}
Appena avviate l’applicazione viene caricata la pagina Default.aspx che a sua volta richiamerà l’evento Page_Load. Come potete vedere, all’interno della funzione che intercetta tale evento , creiamo un oggetto di tipo DBPlacesLogic di nome dbLogic che ci permetterà di accedere al db. A questo punto richiamiamo la funzione GetAllPlaces() che ci restituisce tutti i records presenti nel db in una lista di oggetti places che assegniamo come datasource per la nostra GriedView per poi essere visualizzata come mostrato in figura. Quando andremo a selezionare un record , premendo sul link select “Genera il PDF” , viene generato l’evento SelectedIndexChanged. Tale evento viene intercettato dalla funzione DBGridView_SelectedIndexChanged(). All’interno di essa inseriamo nella variabile queryParameter il valore del campo “id” del record selezionato , creiamo la query string alla pagina GeneraPdf.aspx inserendo come parametro id proprio il valore di id memorizzato nella variabile queryParameter. A questo punto, con Response.Redirect(queryString), richiamiamo  la pagina che genererà il nostro pdf.

GeneraPdf.aspx

Ed eccoci finalmente alla parte saliente , la generazione del pdf :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.IO;
using iTextSharp.text;
using iTextSharp.text.pdf;
using pdfAndAspnet.DBLogic;

namespace pdfAndAspnet
{
    public partial class GeneraPdf : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            // Istanza dell'oggetto DBPlacesLogic per il recupero dei dati dal database
            DBPlacesLogic dbLogic = new DBPlacesLogic();
            // Recuperiamo i dati dal db andando a caricare nell'oggetto queryResult i dati
            // del record con id uguale al parametro id nella query string
            places queryResult = dbLogic.GetPlaceByID(Convert.ToInt32(Request.QueryString["id"]));

            string id = queryResult.id.ToString();
            string autore = queryResult.autore;
            string titolo = queryResult.titolo;
            string descrizione = queryResult.descrizione;
            string link = queryResult.link;

            // Creiamo il documento PDF istanziando l'oggetto Document messo a disposzione
            // dalla libreria iTextSharp
            var document = new Document(PageSize.A4, 100, 100, 25, 25);

            // Creiamo un oggetto MemoryStream che conterrà in memoria il file pdf che andremo
            // via via creando con i passi successivi
            var output = new MemoryStream();
            var writer = PdfWriter.GetInstance(document, output);

            // Aprimao il docmento
            document.Open();

            // Creiamo i vari fonts che utilizzeremo nel nostro pdf
            //( per maggiori dettagli: http://www.mikesdotnetting.com/Article/81/iTextSharp-Working-with-Fonts )
            var titleFont = FontFactory.GetFont("Arial", 20, Font.BOLD);
            var subTitleFont = FontFactory.GetFont("Arial", 14, Font.BOLD);
            var boldTableFont = FontFactory.GetFont("Arial", 12, Font.BOLD);
            var endingMessageFont = FontFactory.GetFont("Arial", 10, Font.ITALIC);
            var bodyFont = FontFactory.GetFont("Arial", 12, Font.NORMAL);

            // Aggiungiamo un paragrafo per la visualizzazione del titolo
            document.Add(new Paragraph("World Places", titleFont));
            // Aggiungiamo un ulteriroe paragafro per il sottotitolo
            document.Add(new Paragraph("Foto e Info dei più belli monumenti del Mondo", bodyFont));
            // Aggiungiamo una linea vuota e andiamo a capo
            document.Add(Chunk.NEWLINE);

            // Aggiungiamo un paragrafo che contiene il titolo della risorsa
            string strInfo = "Informazioni riassuntive su : " + titolo;
            document.Add(new Paragraph(strInfo, subTitleFont));

            // Creiamo una tabella per visualizzare le informazioni recuperate dal database
            //( Per maggiori info su come creare una tabela con iTextSharp : http://www.mikesdotnetting.com/Article/86/iTextSharp-Introducing-Tables )
            var infoTable = new PdfPTable(2);
            infoTable.HorizontalAlignment = 0;
            infoTable.SpacingBefore = 10;
            infoTable.SpacingAfter = 10;
            infoTable.DefaultCell.Border = 0;

            infoTable.SetWidths(new int[] { 2, 4 });
            infoTable.AddCell(new Phrase("Id:", boldTableFont));
            infoTable.AddCell(id);
            infoTable.AddCell(new Phrase("Autore:", boldTableFont));
            infoTable.AddCell(autore);
            infoTable.AddCell(new Phrase("Descrizione:", boldTableFont));
            infoTable.AddCell(descrizione);
            infoTable.AddCell(new Phrase("Link:", boldTableFont));
            infoTable.AddCell(link);
            document.Add(infoTable);

            // Creiamo un ogetto immagine iTextSharp
            var logo = iTextSharp.text.Image.GetInstance(System.Web.HttpContext.Current.Server.MapPath(link));
            // Definiamo le propietà dell'immagine
            logo.ScaleToFit(150f, 150f);
            logo.Alignment = iTextSharp.text.Image.ALIGN_LEFT;
            logo.IndentationLeft = 9f;
            logo.SpacingAfter = 9f;
            logo.Border = Rectangle.BOX;
            logo.BorderColor = Color.BLACK;
            logo.BorderWidth = 5f;
            document.Add(logo);

            // Aggiungiamo due linee vuote
            document.Add(Chunk.NEWLINE);
            document.Add(Chunk.NEWLINE);

            // Aggiungiamo un paragrafo per il messaggio di chiusura
            var endingMessage = new Paragraph("Questo PDF è stato generato grazie all'utilizzo della libreria iTextSharp", endingMessageFont);
            endingMessage.SetAlignment("Center");
            document.Add(endingMessage);

            // Chiudiamo il documento PDF
            document.Close();

            // Settiamo l'http header in modo che la risposta del server sia del tipo pdf
            // ( passaggio fondamentale )
            Response.ContentType = "application/pdf";
            // Ed infine mandiamo in output il nostro stream che contiene appunto i dati del nostro pdf
            Response.BinaryWrite(output.GetBuffer());
        }
    }
}
Per poter utilizzare la libreria iTextSharp all’interno di una pagina aspx occorre prima di tutto inserire le direttive
  • using iTextSharp.text;
  • using iTextSharp.text.pdf;
Quando viene fatta la richiesta alla pagina GeneraPdf.aspx , per prima cosa viene eseguito il metodo Page_Load(). Ed è all’interno di esso che creiamo il nostro pdf. Per iniziare creiamo un oggetto di tipo DBPlacesLogic per accedere al db ( riga 21 del codice ).  Alla riga 24 , creiamo un oggetto di tipo places che conterrà i dati del record che ha come id il valore fornito dalla query string che avevamo precedentemente creato nella pagina Default.aspx quando selezioniamo un record dalla GridView : GetPlaceByID(Convert.ToInt32(Request.QueryString[“id”])).
Il resto dei commenti che trovate nel  codice qui sopra vi spiega il resto dei passaggi.
Ecco uno screenshot del pdf creato dal nostro codice :

Screenshot del pdf creato con iTextSharp

asp.net, Programmazione ,

Come fare una chiamata ajax ad un metodo di una pagina aspx con jquery

3 commenti Pubblicato da su 14 giugno 2011

In questo articolo vi mostrerò come effettuare una chiamata ajax ad un metodo di una pagina aspx in modo tale da evitare il fastidioso refresh dovuto al postback.

Video Tutorial

asp.net, jquery, Programmazione , , ,

Play youtube videos con jquery colorbox plugin

10 commenti Pubblicato da su 9 aprile 2011

In questo articolo vi mostrerò come utilizzare il plugin jquery colorbox. E’ un plugin che offre la possibilità di visualizzare all’interno di un browser immagini , codice html , video all’interno di una modal box. Il tutto con una grafica bella e professionale.  Le potenzialità di questo plugin sono molteplici ,  ma in questo articolo ci soffermeremo nell’analizzare come visualizzare video yuotube.   Per ulteriori informazioni su colorbox andate sul sito ufficiale  http://colorpowered.com/colorbox/. Qui troverete il link per scaricare il plugin e una serie di esempi che illustrano le potenzialità del plugin stesso.

Se decidete di fare il  download  del codice di esempio che ho creato potete evitare di scaricare il plugin dal sito in quanto è già contenuto nel progetto.

Video Tutorial

jquery, Programmazione , ,

Wcf RSS ATOM RESTFul Service

Lascia un commento Pubblicato da su 30 marzo 2011

In questo articolo vi mosterò come creare un servizio rest in grado di generare  un canale feed nei formati rss e atom.

Ecco il Video Articolo :

Vi consiglio di guardare il video almeno a 480p. Se avete una buona conessione internet potete anche guardarlo a 720p HD. Lo streaming dovrebbe risultare fluido in quanto ho usato un algoritmo di compressione leggero e di buona qualità.

N.B. Mi scuso per i numerosi errori di battitura ma per evitare di rendere il video di dimensioni troppo elevate scrivo velocemente.

asp.net, Programmazione

Wcf RESTFul JSON Service : Il DataContract

1 Commento Pubblicato da su 20 marzo 2011

In questo tutorial vi mostrerò come creare un servizio RESTFul che opera su tipi di dati definiti dall’utente. A tale scopo occorre creare una o più classi definite come DataContract per il nostro servizio REST. In questo modo indichiamo al Web Service come devono essere serializzati i membri della classe al fine di permettere ai metodi del nostro servizio di poterne elaborare il contenuto.

Il Video Tutorial :

Vi consiglio di guardare il video almeno a 480p e preferibilmente a 720p. Ho usato un buon algoritmo di compressione video quindi lo streaming dovrebbe risultare fluido anche in HD.

asp.net, Programmazione , ,

html5 e css3

1 Commento Pubblicato da su 11 marzo 2011

Il prossimo futuro dei browser :   HTML5  e  CSS3

In questo articolo vorrei mostrarvi le potenzialità che verranno introdotte da HTML5 e CSS3. La standardizzazione di questi è ancora in  fase di definizione e ci vorrà ancora del tempo prima che venga definitivamente rilasciato. Nonostante ciò , i più importanti browser supportano già buona parte delle nuove funzioni che il nuovo standard metterà a disposizione. Vediamo quali :

  • Firefox 3.7 (disponibile in versione alpha) – Le versioni precedenti supportano il CSS3 ma non i transitional dinamico –
  • Google Chrome 4.0+ – attulamente il browser che implementa nel migliore dei modi HTM5 e CSS 3 –
  • Safari 3.1+ – buon supporto a HTML5 e CSS3  –
  • Opera 10.5+ – supporta il CSS3 statico e il transitional dinamico pur mostrando qualche bug –
  • Internet Explorer 9 – supporta il CSS3 statico  ma non supporta il transitional  dinamico –
  • Internet Explore v.6/v.7/v.8 – nesun supporto all ‘ HTML5  e CSS3 –

Se quindi volete cominciare a comprendere il funzionamento del futuro standard e , se usate windows , vi consiglio vivamente di installare Google Chrome che,  oltretutto , a mio avviso ,  è anche il miglior browser da tutti i punti di vista.

Ora , se siete pronti , vorrei mostrarvi le caratteristiche più avanzate del CSS3 e cioè il transitional dinamico senza l’utilizzo di javascript. Nei vostri fogli di stile potrete inserire le istruzioni per far si che quando l’utente scatena un evento ( per esempio  si posiziona su un elemento <div> o su un’immagine <img> ) viene avviato un effetto grafico che si prolunga nel tempo secondo determinate regole. Si può scegliere quali sono i parametri dei vostri elementi che verranno “animati”  e  la durata della transizione per ognuno di essi. Vediamo un esempio :

Video Articolo :

IL CSS :

.ul_menu li

{

/* Parametri di partenza */

width: 150px;

height: 30px;

color: #954A00;/* impostiamo un bordo arrotondato /

-o-border-radius: 8px; /* opera */

-moz-border-radius: 8px; /* firefox */

-webkit-border-radius: 8px; /* crhome , safari */

border-radius: 8px; /* standard , per ie9 */

/* abilitiamo la transizione per tutti i parametri css :

all -> la transizione verrà applicata a tutti i parametri css ,

.6s -> la transizione durerà 1 secondo ,

ease-in-out -> la ransizione avverrà con l’effetto ease sia quando l’evento viene scatenato “in”

sia quando l’evento viene “rilasciato” “out” */

-o-transition: all 1s ease-in-out; /* opera */

-webkit-transition: all 1s ease-in-out; /* firefox */

-moz-transition: all 1s ease-in-out; /* crhome , safari */

transition: all 1s ease-in-out; /* standard , per ie9 */

}
.ul_menu li:hover

{

/* Quano andremo con il mouse sopra un elemento <li> comincerà la transizione dei parametri css

che subiscono una variazione rispetto allo stato precedente */

/* prima il border radisu era di 8px , ora 15px , quindi vedremo una strasizione da 8 a 15 */

-o-border-radius: 15px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

/* il cole di background prima era none , cioe trsparente , ora è #F4FEFF e qundi vedremo una

transizione anche sul background */

background: #F4FEFF;

/* prima il bordo non era impostato : la transizione avverrà anche sui parametri che non erano

stati impostati esplicitamente nello stato precedente e cioè si trovano nello stato di default

nel caso del border lo stato e niente bordi */

border: 1px solid #0F7799;

}

L’ HTML :

<div id=“menu”>

<ul class=“ul_menu”>

<li>Home Page</li>

<li>Blog</li>

<li>Download</li>

</ul>

</div>

Vediamo un ‘ altro esempio :

Ora prendiamo in considerazione un esempio un p0′ più articolato. Questa volta andremo a definire le porpietà transitional una alla volta impostando quali parametri saranno soggetti all’animazione e per ogni ognuno di essi imposteremo la durata dell’animazione e il  tempo di delay .

IL CSS :

p

{

height:100px;

width:100px;

margin-left:50px;

border:1px solid #ccc;

/* standard */

transition-timing-function: ease;

transition-property: background-color, width, height , margin-left;

transition-duration: 0.5s, 1s, 1s , 2s;

transition-delay: 0s, 0s, 1s , 1s;

/* crhome , safari */

-webkit-transition-timing-function: ease;

-webkit-transition-property: background-color, width, height , margin-left;

-webkit-transition-duration: 0.5s, 1s, 1s , 2s;

-webkit-transition-delay: 0s, 0s, 1s , 1s;

/* Mozzila Firefox */

-moz-transition-timing-function: ease;

-moz-transition-property: background-color, width, height , margin-left;

-moz-transition-duration: 0.5s, 1s, 1s , 2s;

-moz-transition-delay: 0s, 0s, 1s , 1s;

/* Opera */

-o-transition-timing-function: ease;

-o-transition-property: background-color, width, height , margin-left;

-o-transition-duration: 0.5s, 1s, 1s , 2s;

-o-transition-delay: 0s, 0s, 1s , 1s;

}p:hover

{

height:300px;

width:400px;

background:red;

margin-left:200px;

}

L ‘ HTML :

<p>Paragrafo di esempio</p>
HTML & CSS, Programmazione , ,

php secure login

Lascia un commento Pubblicato da su 10 marzo 2011

In questo articolo vi mostro come memorizzare i dati di login in modo sicuro. Ovviamente prendiamo in considerazione il fatto che le informazioni vengano salvate su database ( in questo esempio su mysql ). Certo non andremo a criptare tutti i dati , ma solo la password di ogni utente. Per fare ciò viene usato l’algoritmo di criptazione SHA1 con l’aggiunta di “salt” e cioè  una serie di caratteri che verranno aggiunti a quelli che formano la password originaria in modo da renderne la decodifica praticamente impossibile.  Il video che segue non è un vero e propio tutorial nel senso che vi mostra come funziona il codice in esecuzione e spiega brevemente come viene codificata la password. Va  detto inoltre che in questo esempio , la password viene inviata al server in chiaro.  In un ambiente di produzione è ovvio che per comunicare con il server è consigliabile ( direi obbligatorio ) usare la connessione sicura  https . Detto ciò ,  gli utenti più esperti  che masticano un po’ di jquery e di php ,  potranno scaricare il codice e analizzaarlo tranquillamente.

Per chi ha delle difficolta nella creazione i un database mysql può consultare un mio precedente articolo che spiega come approcciarsi nella creazione e lettura di un semplice database :

Per scaricare il codice cliccate php-login.zip oppure potete scaricarlo dal FlashWidget che trovate qui nella barra laterale ( Area Download ) nella cartella PHP.

All’interno della cartella scaricata troverete tutti i files necessari al funzionameneto del programma più un file di testo “mysql_create.txt” che contiene la query per creare il database senza doverlo progettare da zero.

Ecco il video del programma in esecuzione più una breve spiegazione di come viene criptata  password :

Vi consiglio di guardare il video almeno a 480p e preferibilmente a 720p. Lo streaming non è pesante in quanto ho usato un buon algoritmo di  compressione. 🙂

php, Programmazione

jquery twitter

2 commenti Pubblicato da su 3 marzo 2011

In questo articolo vi mostro come leggere i tweet del vostro  o di qualsiasi altro utente twitter con la libreria  jquery tweet .

Per scaricare il codice clicca jquery-twitter-tutorial.zip oppure scaricalo dal FlashWidget andando qui a fianco nella barra laterale ( Area Download ) nella cartella jquery.

Video tutorial :


jquery, Programmazione ,

wcf restful web service

3 commenti Pubblicato da su 2 marzo 2011

In questo articolo vi mostro come creare un servizio  wcf restful  con Microsoft Visual Studio 2010. Il servizio di esempio è molto semplice. In un prossimo articolo vi mostrerò come usare il data contract per usare il servizio restful che restituisce dati da un database sql.

Video Tutorial :


asp.net, Programmazione , , ,

jquery data link

Lascia un commento Pubblicato da su 24 febbraio 2011

In questo tutorial vi mostro molto semplicemente come potete utilizzare la libreria jquery data link per fare il binding bidirezionale tra variabili javasrcript e html elements di tipo <input type”text”>. Inoltre nell’esempio viene riportato un ulteriore esempio sull’utilizzo della libreria jquery templates. Per maggiori dettagli su jquery template guarda gli altri articoli :

Per maggiori in formazioni su jquery data link andate a questo link.

  • Per scaricare il codice di esempio  e le relative librerie cliccate   jquery-DataLink-Templates.zip o andate andate  nel FlashWidget nella barra laterale ( Area Dowload ) sotto la cartella jquery
  • Per vedere una demo funzionante del codice clicca : DEMO
  • Guarda il video in HD su Vimeo : http://vimeo.com/20333331

___________________________________________________________________________

ECCO IL VIDEO TUTORIAL :


jquery, Programmazione

Leggere dati da database mysql con php

Lascia un commento Pubblicato da su 22 febbraio 2011

In questo articolo vi mostrerò come creare un database mysql e come visualizzare i dati contenuti nelle sue tabelle su una pagina web utilizzando php.

Per scaricare il codice cliccate : php-mysql.zip oppure potete scaricarlo dal FlashWidget qui a lato nella barra laterale  ( Area Download ) sotto la cartella php.  Una volta decompattato il file php-mysql.zip , nella cartella omonima troverete anche il file “mysql-create.txt” . In questo file trovate la query per creare il database usato nell’esempio. Vi basta copiarlo ed eseguirlo con phpmyadmin come viene mostrato nel video articolo.

N.B. Nel file login.php ricordate di inserire  username e  password della propia installazione mysql. Generalmente appena viene installato , mysql imposta  username = root ,  password = ( vuota ) cioè senza password.  Se durante l’istallazione fornite username e password ricordate di annotarli da qualche parte.

Ecco il video articolo :

php, Programmazione ,

Leggere dati da file xml con jquery

15 commenti Pubblicato da su 17 febbraio 2011

In questo articolo vi mostrerò come leggere i dati da un file XML con l’utilizzo della libreria jquery. In questo modo vi basterà caricare nel vostro progetto la sola libreria jquery e non avrete quindi bisogno di una usare nessun tipo di linguaggio di programmazione lato server ( php , asp.net , java , ecc.. ).

Per scaricare il codice cliccate : jquery-xml.zip o scaricatelo dal FlashWidget qui a lato nella barra latera ( Area Download ) sotto la cartella jquery.

Ecco il Video tutorial :

( part – 1 )

( part – 2 )


jquery, Programmazione ,

jquery templates ( uso di tmplItem )

Lascia un commento Pubblicato da su 11 febbraio 2011

jquery templates e gli items

In questo secondo articolo dedicato alla libreria jquery templates vi voglio mostrare un modo diverso per creare i templates ( tramite tags <script>) e come utilizzare la funzione tmplItem. Guarda i video articoli che seguono. Guarda anche il mio articolo di introduzione alla libreria jquery templates

Per scaricare il codice clicca : jquerytemplate-items.html o scarica il file dal FlashWidget che trovi qui nella barra laterale ( Area Download ) sotto la cartella jquery.

——————–

Video Tutorial :

Invece di (part 1)  e (part 2) ho messo (part 3) e (part 4) per dare un seguito all’artiocolo precedente di introduzione alla libreria jquery templates.  I due video qui di seguito comunque compongono un tutorial completo.

( parte 3 )


( parte 4)


jquery, Programmazione ,

jquery templates

2 commenti Pubblicato da su 6 febbraio 2011

La libreria jquery templates

Binding di dati utilizzando la libreria jquery templates

Jquery Templates  è un’utilissima libreria che permette di fare il binding di una variabile javascript all’interno di codice html in modo molto semplice ma molto efficace. La libreria in oggetto è un’estensione dell’ormai famosissima e utilizzatissima libreria jquery. Quest’ultima è ormai diventata di fatto uno standard grazie al fatto che rende la programmazione lato client facile e potente con poche linee di codice. Per utilizzare la libreria jquery template in un nostro progetto dobbiamo includere i files .js relativi alle due librerie ( jquery e jquery-template). A tale scopo possiamo usare due metodi :

  1. scaricare i files dal sito jquery.com
  2. inserire i files scaricandoli direttamente all’interno della nostra pagina dai server CDN ( Content Delivery Network ) di Google o Miscrosoft.

Il secondo metodo è preferibile in quanto evita al server che ospita il nostro sito di dover fornire agli utenti che vi accedono anche i files .js in questione. Nelle’esempio che sto per mostrare in questo articolo utilizzeremo il secondo metodo.

Potete scaricare il codice dell’esempio a questo link : jqueryTemplate.html o dal FlashWidget che trovate qui a lato nella barra laterale ( Area Download ) sotto la cartella jquery.

Esempio e analisi del codice ( Video Tutorial )

( parte 1 )

( parte 2 )


jquery, Programmazione ,

Visualizzare video YouTube con jquery e fancybox

Lascia un commento Pubblicato da su 1 dicembre 2010

Il plug-in fancybox

Fancybox è un utilissimo plug-in basato sulla libreria  jquery  che permette di visualizzare in una dialog box immagini , testo , codice html e file swf.  Come avrete intuito,  in questo articolo vi mostrerò come usare il plug-in per visualizzare all’interno  di un’ applicazione web i video di yuotube. Seguiranno altri articoli dedicati ad esplorare tutte le potenzialità di fancybox ( creare foto slider , visualizzare il  risultat di una richiesta ajax ecc..). Per  scaricare il plug-in andate al sito http://fancybox.net/ . Il pacchetto di downlaod conterrà la cartella fancybox all’interno della quale troverete tutti i files .js , il file css e le immagini necessarie al funzionamento  del plug-in.

Inserire in plug-in nel nostro progetto

Vediamo il primo passo da fare per raggiungere lo scopo. Creiamo un’applicazione vuota ( per questo esempio io ho utilizzato un’applicazione ASP.NET con Visual Studio ma potete utilizzare tranquillamente anche un progetto PHP o Java).  Una volta creato il progetto copiamo al suo interno l’intera cartella fancybox. Successivamente creiamo una pagina aspx ( per chi usa ASP.NET ) o una pagina PHP ( per chi usa il PHP ).  Con usa serie di tag <script> includiamo nella pagina appena creata tutti i file .js  e con il tag <link> il file css della cartella fancybox. Infine includiamo con un ulteriore tag <script> la libreria jquery. Vediamo questa prima parte di codice :

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head runat="server">
  3     <title>YouTube Slider</title>
  4     <link href="fancybox/jquery.fancybox-1.3.2.css" rel="stylesheet" type="text/css" />
  5     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
  6     <script src="fancybox/jquery.fancybox-1.3.2.js" type="text/javascript"></script>
  7     <script src="fancybox/jquery.fancybox-1.3.2.pack.js" type="text/javascript"></script>
  8     <script src="fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
  9     <script src="fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
 10 </head>
 11 <body>

A questo punto abbiamo tutto il necessario per creare il nostro “YouTube  Slider”. Per capire come procedere occorre fare una premessa. Fancybox utilizza gli elementi anchor ( <a></a> ) come elementi base al quale applicare le funzionalità del plug-in stesso. Per capire meglio guardiamo la parte di codice relativa a quanto appena descritto :

  1 <div>
  2     <a href="http://www.youtube.com/watch?v=7FaKYHfwUkM" class="video">
  3         <img src="http://i4.ytimg.com/vi/7FaKYHfwUkM/default.jpg" height="80" width="80" alt="#"/>
  4     </a>
  5     <a href="http://www.youtube.com/watch?v=XhhDY0GeBI4" class="video">
  6         <img src="http://i1.ytimg.com/vi/XhhDY0GeBI4/default.jpg" height="80" width="80" alt="#"/>
  7     </a>
  8 </div>

Come potete vedere all’interno di un <div> abbiamo due elementi anchor ( <a></a> ) e all’interno di ognuno di essi un tag <img>.  Ogni elemento <a> rappresenta un video. Di fatti,  potete facilmente notare che l’attributo href fa riferimento propio al link di un video di youtube. Ogni immagine contenuta all’interno dell’anchor ( riga 3  – riga  6 )  è la miniatura relativa la video tesso. L’attributo src è l’indirizzo di tale immagine. In questo esempio , per semplicità , ho inserito soltanto due video. Va da se che potete inserire tutti quelli che volete. Per rendere la vostra applicazione il più flessibile possibile potreste ,  per esempio ,  creare un file xml contenente i link dei video che volete visualizzare. Oppure potete usare le Google API per inserirli dinamicamente  ( per esempio i video più cliccati della giornata ecc …) . Continuiamo per ora con il nostro semplice esempio. In seguito pubblicherò altri articoli con  esempi più  completi.

Adesso passiamo alla parte più interessante del codice. Andiamo ad applicare le funzioni del plug-in fancybox  ai nostri elementi anchor. A tale scopo creiamo un blocco javascript in fondo alla nostra pagina :

  1 <script type="text/javascript">
  2         $("a.video").click(function () {
  3             $.fancybox({
  4                 'padding': 0,
  5                 'autoScale': false,
  6                 'transitionIn': 'none',
  7                 'transitionOut': 'none',
  8                 'title': this.title,
  9                 'width': 680,
 10                 'height': 495,
 11                 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
 12                 'type': 'swf',
 13                 'swf': { 'allowfullscreen': 'true'}
 14             });
 15             return false;
 16
 17         });
 18 </script>

Alla riga 2 usiamo il selettore jquery per recuperare tutti gli elementi anchor che hanno l’attributo class = video ( notare che ogni elemento <a> ha l’attributo class=”video” in modo tale da differenziarli da altri possibili elementi <a> che non fanno riferimento ad un video. Ovviamente potete usare un qualsiasi nome come parametro per l’attributo class. Io ho usato “video” per rendere più comprensibile il codice). Ogni volta che si clicca su un elemento <a> applichiamo la funzione $.fancybox all’elemento cliccato. All’interno della funzione trovate una serie di parametri per adattare alle vostre esigenze la il modo in cui i vari video verranno visualizzati.
Di seguito potete vedere il codice completo della pagina aspx :

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="YoutubeSlider.Default" %>
  2
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title>YouTube Slider</title>
  8     <link href="fancybox/jquery.fancybox-1.3.2.css" rel="stylesheet" type="text/css" />
  9     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
 10     <script src="fancybox/jquery.fancybox-1.3.2.js" type="text/javascript"></script>
 11     <script src="fancybox/jquery.fancybox-1.3.2.pack.js" type="text/javascript"></script>
 12     <script src="fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
 13     <script src="fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
 14 </head>
 15 <body>
 16     <form id="form1" runat="server">
 17     <h2 style="color:#45d; border-bottom:1px solid #ddd"><i>YouTube Slider</i></h2>
 18     <div>
 19         <a href="http://www.youtube.com/watch?v=7FaKYHfwUkM" class="video">
 20             <img src="http://i4.ytimg.com/vi/7FaKYHfwUkM/default.jpg" height="80" width="80" alt="#"/>
 21         </a>
 22         <a href="http://www.youtube.com/watch?v=XhhDY0GeBI4" class="video">
 23             <img src="http://i1.ytimg.com/vi/XhhDY0GeBI4/default.jpg" height="80" width="80" alt="#"/>
 24         </a>
 25     </div>
 26     </form>
 27     <script type="text/javascript">
 28         $("a.video").click(function () {
 29             $.fancybox({
 30                 'padding': 0,
 31                 'autoScale': false,
 32                 'transitionIn': 'none',
 33                 'transitionOut': 'none',
 34                 'title': this.title,
 35                 'width': 680,
 36                 'height': 495,
 37                 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
 38                 'type': 'swf',
 39                 'swf': { 'allowfullscreen': 'true'}
 40             });
 41             return false;
 42
 43         });
 44     </script>
 45 </body>
 46 </html>

Video dell’applicazione in esecuzione

Download del codice completo ( ASP.NET Framework 3.5 )

Nota : Se scaricate il codice potete evitare di fare il download del  plug-in fancybox in quanto è già incluso nel progetto.

asp.net, jquery, Programmazione ,

JQueryUI e ASP.NET

Lascia un commento Pubblicato da su 22 novembre 2010

Come installare JQuery UI in un’applicazone ASP.NET

JQuery UI è una sorta di framework che estende la  famosissima e potentissima libreria JQuery. Di fatti per potere utilizzare JQuery UI occorre caricare la libreria JQuery. Ci sono sostanzianzialmente due metodi per installare queste librerie javascript  in una nostra applicazione web :

  1. Scaricare i vari files javascript (.js) e metterli sul server nel quale risiede la nostra applicazione.
  2. Caricare i files javascript da Google CDN o Microsoft CDN.

Metodo .1

Scarichiamo la libreria dal sito jquery.com e carichiamo i file necessari nel nostro progetto

Video Parte – 1

Video Parte – 2

Metodo .2

Implementiamo la libreria jqeryUI caricandola dai server esterni Microsoft CDN

Video

asp.net, jquery, Programmazione , ,

Visualizzare RSS Feeds con asp.net utilizzando XmlDocument

Lascia un commento Pubblicato da su 15 novembre 2010
Visualizzare i Feeds utilizzando gli oggetti WebRequest e XmlDoucment

In un precedente articolo avevo descritto come visualizzare i Feeds RSS utilizzando l’oggetto DataSet del framework.NET .  Ora vorrei mostrarvi come fare utilizzando gli oggetti WebRequest e XmlDocument.  Il concetto di base è quello di accedere al file RSS tramite l’oggetto WebRequest per poi leggerne il contenuto tramite l’oggetto XmlDocument . Quest’ultimo mette a disposizione tutte le funzioni per leggere e manipolare nodi , attributi e dati contenuti all’interno di un file xml.  Il codice è molto semplice. Utilizziamo una singola pagina aspx ( Default.aspx ) . Vediamo il code.behind :

Leggi il resto dell’articolo

asp.net, Programmazione , ,

Visuallizzare RSS Feed con asp.net e jqueryUI

Lascia un commento Pubblicato da su 12 novembre 2010
Visualizzare i Feeds usando l’oggetto DataSet

Ci sono vari metodi per visualizzare gli RSS Feeds. Quello preso in esame in questo articolo si basa sull ‘ utilizzo dell’oggetto DataSet del .NET Framework. Questo metodo permette di leggere il contenuto del feed in modo molto semplice con poche linee di codice.

Come molti di voi sapranno , l’oggetto DataSet è una classe in grado di contenere in memoria tabelle provenienti dai database ed implementa i vari metodi per gestirne i dati. Un file RSS , che non è altro che un file xml opportunamente formattato , può essere tranquillamente convertito e  memorizzato come una tabella. L’oggetto DataSet  mette a disposizione due funzioni membro DataSet.ReadXml(string url-path) e DataSet.ReadXmlSchema(string file.xsd) che permettono di mappare un file xml all’interno del DataSet esattamente come avviene per le tabelle di un database. Per fare ciò è necessario che il DataSet conosca la stuttura del file file xml. E’ possibile definire la struttura di un qualsiasi file xml tramite un file .xsd ( Xml Schema). Vediamo uu semplice esempo di un file xml e il relativo schema xsd :

Leggi il resto dell’articolo

asp.net, jquery, Programmazione , , ,

Introduzione di asp.net

Lascia un commento Pubblicato da su 21 ottobre 2010

Che cos’ é asp.net

L’  active server page ( asp.net ) è l’infrastruttura del Framework.Net per la realizzazione e l’esecuzione delle applicazioni web.

asp.net, Programmazione

Visualizzare Feeds RSS 2.0 utilizzando PHP

1 Commento Pubblicato da su 7 ottobre 2010
rss icon DOMDocument e feeds RSS 2.0

In questo articolo vedrete come è possibile visualizzare in una  pagina web i feeds provenienti da un sito , da un  blog o dal risultato proveniente da un motore di ricerca.   Come molti sapranno i feeds RSS sono dei file XML con una struttura standardizzata che permette ai vari browser  di poterli leggere senza nessun problema di compatibilità. Per visualizzarne il contenuto ovviamente bisogna leggere il file XML , estrarre le informazioni e formattarle in modo che possano essere  visualizzate nel browser. Il PHP fornisce l’oggetto DOMDocument che è in grado di caricare i file XML ,  trasformali in una struttura ad albero , simile a quello utilizzato per memorizzare file e cartelle ,  e di  fornire potenti funzioni per leggerne il contenuto. L’immagine che segue mostra uno schema logico di come un file RSS viene salvato e strutturato nell’oggetto DOMDocument:

Schema logico di un file RSS in un DOMDocument

Schema logico di un file RSS in un DOMDocument

Leggi il resto dell’articolo

php, Programmazione ,