L'ouverture de l'esprit n'est pas une fracture du crâne: juin 2012

samedi 30 juin 2012

Menu deroulant horizontal css/html/javascript

Menu horizontal css

La partie html

<html><head><title>menu déroulant en css</title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">

<link type="text/css" rel="stylesheet" href="style_menu_deroulant_horizontal.css" />

</head>
<body>

<div id="monmenu">
<h2>menu à déploiement horizontal</h2>

<ul class=niveau1>
<li>Menu 1
    <ul class=niveau2>
        <li class=plus>
        <a href="#">
            Titre du menu 1
        </a>
            <ul class=niveau3>
      <li><a href="#"> Sous titre 1 du menu 1 </a> </li>
      <li><a href="#"> Sous titre 2 du menu 1 </a> </li>
    <li><a href="#"> Sous titre 3 du menu 1 </a> </li>
    <li><a href="#"> Sous titre 4 du menu 1 </a> </li>

    </ul>

    </li>
    <li>
    <a href="#">
    Titre du menu 2
    </a>

    <ul class=niveau3>

    <li><a href="#"> Sous titre 1 du menu 2 </a> </li>
      <li><a href="#"> Sous titre 2 du menu 2 </a> </li>
    <li><a href="#"> Sous titre 3 du menu 3 </a> </li>
    <li><a href="#"> Sous titre 4 du menu 4 </a> </li>

    </ul>

    </li>
    <li>

    <a href="#">

Titre du menu 3
    </a>

    <ul class=niveau3>

    <li><a href="#"> Sous titre 1 du menu 2 </a> </li>
      <li><a href="#"> Sous titre 2 du menu 2 </a> </li>
    <li><a href="#"> Sous titre 3 du menu 3 </a> </li>
    <li><a href="#"> Sous titre 4 du menu 4 </a> </li>

    </ul>

    </li>



    </ul></li></ul>


<ul class=niveau1>
<li>Menu 2
    <ul class=niveau2>
        <li class=plus>
        <a href="#">
            Titre du menu 2
        </a>
            <ul class=niveau3>
      <li><a href="#"> Sous titre 1 du menu 2 </a> </li>
      <li><a href="#"> Sous titre 2 du menu 2 </a> </li>
    <li><a href="#"> Sous titre 3 du menu 2 </a> </li>
    <li><a href="#"> Sous titre 4 du menu 2 </a> </li>

    </ul>

    </li>
    <li>
    <a href="#">
    Titre du menu 2
    </a>

    <ul class=niveau3>

    <li><a href="#"> Sous titre 1 du menu 2 </a> </li>
      <li><a href="#"> Sous titre 2 du menu 2 </a> </li>
    <li><a href="#"> Sous titre 3 du menu 3 </a> </li>
    <li><a href="#"> Sous titre 4 du menu 4 </a> </li>

    </ul>

    </li>
    <li>

    <a href="#">

Titre du menu 3
    </a>

    <ul class=niveau3>

    <li><a href="#"> Sous titre 1 du menu 2 </a> </li>
      <li><a href="#"> Sous titre 2 du menu 2 </a> </li>
    <li><a href="#"> Sous titre 3 du menu 3 </a> </li>
    <li><a href="#"> Sous titre 4 du menu 4 </a> </li>

    </ul>

    </li>



    </ul></li></ul>



    </div>

La partie css

#monmenu {
    font-weight: bold; font-size: 12px; font-family: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu ul ul {
    border-right: #b0b0b0 1px solid; padding-right: 0px; border-top: #b0b0b0 1px solid; display: none; padding-left: 0px; left: 164px; padding-bottom: 0px; margin: 0px; border-left: #b0b0b0 1px solid; padding-top: 0px; border-bottom: #b0b0b0 1px solid; position: absolute; top: -1px
}
#monmenu li {
    padding-right: 2px; padding-left: 2px; padding-bottom: 2px; margin: 0px; width: 160px; padding-top: 2px; list-style-type: none; position: relative; background-color: #e0e0e0
}
#monmenu li:hover {
    background-color: #ffff70
}
#monmenu li.sfhover {
    background-color: #ffff70
}
#monmenu li a {
    text-decoration: none
}
#monmenu li:hover ul.niveau2 {
    display: block
}
#monmenu li li:hover ul.niveau3 {
    display: block
}
#monmenu li.sfhover ul.niveau2 {
    display: block
}
#monmenu li li.sfhover ul.niveau3 {
    display: block
}
#monmenu li.plus {
    background-position: right 50%; border-bottom: #b0b0b0 1px solid; background-repeat: no-repeat
}

jeudi 7 juin 2012

Le trio HTML5/CSS3/Javascript pour la réalisation d'un popup

0. Rions un peu

J'ai tenté plusieurs fois de réaliser une fenêtre popup juste pour lire les détails concernant un article et sans quitter la page la page en cours. N'ayant pas réussit à le faire je me suis proposé de faire autre chose.
Quelques jours après une mélancolie

(longue histoire ...je vous expliquerai un jour ... ), je voulais faire autre chose pour me changer d'idée. Ainsi je suis parvenu à réaliser dans moins de 10 lignes de codes ce que je n'ai pas pu faire.

1. Procédure et utilité

a. Un pop-up (de l'anglais pop-up window qui serait traduit en fancais : une fenêtre surgissante ou fenêtre qui apparait brusquement ) est une fenêtre secondaire qui s'affiche, parfois sans avoir été sollicitée par l'utilisateur devant la fenêtre de navigation principale lorsqu'on navigue sur Internet. (Voir Wikipedia)

Elle est tres utilisée dans des cas de publicités ou la lecture des détails concernant un article sur le web par exemple.

b. Comme dit ton un exemple bien fait vaux mieux que 10 tuto bien exepliqué : je réalise deux pages html : page_web.html et page_popup.html . En cliquant un liens dans page_web.html, une fenetre popup contenant page_popup.html s'ouvre avec les détails suivants :

largeur : 532px,

hauteur :320px

menubar=no --> C'est à dire que le popup n'a pas de barre de menu,

scrollbars=no --> C'est à dire qu'il n y a pas de barre de deffillement

Notons que le script java contient les définitions concernant la position de la page dans l'écran

page_web.html

<html>
<head>
<script language="javascript">
    function PopupCentrer(page,largeur,hauteur,options)
    {
        var top=(screen.height-hauteur)/2;
        var left=(screen.width-largeur)/2;
        window.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
    }
</script>

<meta http-equiv="Content-Language" content="en-us">
        <title>Page web simple avec popup</title>
</head>

<body>

<a href="javascript:PopupCentrer('popup.html',532,320,'menubar=no,scrollbars=no,statusbar=no')"> Cliquer ici pour acceder à la page popup</a>

</body>
</html>

page_popup.html

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title> Popup page</title>
</head>

<body>
<div style="background-color:#CCCCCC; height:200px;">
Je suis un popup
</div>
</body>
</html>

Vous pouvez télécharger les codes sources ici

Voila c'est tout. Si l'aticle vous semble interressant ou si vous avez des commentaires n'oublier pas à nous le faire savoir : monsar04(at)gmail.com / 00243997647154

samedi 2 juin 2012

Comment faire un navigateur web en C#

Bouton de confirmation en Javascript

1. Contexte

Parfois il nous arrive de demande à l'utilisateur final à confirmer l'action avant son exécution. Cela arrive souvent lorsque par exemple on veux que l'utilisateur final confirme la suppression d'un enregistrement dans une base des données. Il existe plusieurs solutions pour y arriver mais dans les lignes qui suivent , nous avons pu experimenté cela avec quelques lignes de code en utilisant une petite fontion javascript.

Dans l’exemple suivant , le bouton crée demande à l'utilisateur final de confirmer l'execution de l'action, cette action n'est autre que la redirection vers un site web quelconque , on peux mettre autre chose à la place de la redirection , comme executer un script sql dans la bdd, suppression au création d'un autre fichier , connexion reseau , ....

2. Un tuto vaux mieux que un long discours ....

<html> <head> <script language=javascript>
   function ConfirmMessage() {
       if (confirm("Etes vous certain de vouloir executer l'action ?"))
       { //Placer ici l'action a executer par java script (ici je demande à javascrit de faire une redirection)
           window.location = "http://monsar.blogspot.com.ar/"
       }
   }
</script>
        <meta http-equiv="Content-Language" content="en-us">
        <title>Confirmation JavaScript</title>
</head>
<body>
<input type="button" value="Executer action" onClick="ConfirmMessage()">
</body>
</html>

Et voila , si l'article vous a plus ou si vous avez un commentaire , n'oubliez pas de nous le faire savoir :

monsar04atgmail.com / 00243997647154

vendredi 1 juin 2012

Lire les données d'une feuille Excel avec asp.net

Il est possible de lire les données d'une feuille Excel avec asp.net et meme plus d'effectuer une recherche à l'intérieur d'une feuille excel de la meme facon qu'on le ferait dans une base des données. La différence entre la lecture dans une feuille excele et dans une base des données est que la base des données offre beacup de souplesse , de rapidité , beaucoup de fonctions de manipulations, de calculs dans un temps très reduit avant même l'affichage devant l'écran de l'utilisateur final.

Voici comment je me suis battu pour parvenir a lire les données d'une feuille excel

0. Name space à ajouter :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Xml;
using System.Text;
using System.Data.OleDb;
using System.Configuration;
using System.Data;

1. Partie HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<style type="text/css">
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
font-family:Trebuchet MS;
    font-size:10px;
}
tr.sectiontableentry1 td {
    padding: 8px 5px;
    background: url(hline.gif) repeat-x bottom;
    font-family:Trebuchet MS;
    font-size:10px;
}
tr.sectiontableentry2 td {
    padding: 8px 5px;
    background: url(hline.gif) repeat-x bottom #F2F2F2;
    font-family:Trebuchet MS;
    font-size:10px;
}
</style>

    <title></title>

</head>
<body>
    <form id="form1" runat="server">

    <div>

          <table style="padding: 5px; font-size: 11px;">

                <tbody>

                <tr>

                    <td>

                        <strong>Veuillez selectionner un fichier excel.</strong>
                    </td>
                </tr>
                    <tr>
                        <td>
                        <div style="background: url(hline.gif) repeat-x bottom #F2F2F2;padding: 8px 5px;border-bottom: 1px solid #ccc;">
                            <asp:FileUpload ID="txtFilePath" runat="server"></asp:FileUpload>  <asp:Button
                                ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" />
                            <br />
                            <asp:Label ID="lblMessage" runat="server" Visible="False" Font-Bold="True"
                                ForeColor="#009933"></asp:Label>
                        </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <asp:GridView ID="grvExcelData" runat="server">
                        <RowStyle CssClass="sectiontableentry2" />
                        <AlternatingRowStyle CssClass="sectiontableentry1" />
                        </asp:GridView>
                        </td>
                    </tr>
                </tbody>
            </table>


    </div>

    </form>
</body>
</html>

2. Partie Code

protected void btnUpload_Click(object sender, EventArgs e)
        {

            try
            {
                if ((txtFilePath.HasFile))
                {

                    OleDbConnection conn = new OleDbConnection();
                    OleDbCommand cmd = new OleDbCommand();
                    OleDbDataAdapter da = new OleDbDataAdapter();
                    DataSet ds = new DataSet();
                    string query = null;
                    string connString = "";
                    string strFileName = DateTime.Now.ToString("dd-MM-yyyy-HH-mm-ss");
                    string strFileType = System.IO.Path.GetExtension(txtFilePath.FileName).ToString().ToLower();

                    //Verifions le type de fichier ( excel 1997-2003 ou Excel 2010 ?)
                    if (strFileType == ".xls" || strFileType == ".xlsx")
                    {
                        txtFilePath.SaveAs(Server.MapPath("~/UploadedExcel/" + strFileName + strFileType));
                    }
                    else
                    {
                        lblMessage.Text = "Seulement les fichiers excels sont permis";
                        lblMessage.ForeColor = System.Drawing.Color.Red;
                        lblMessage.Visible = true;
                        return;
                    }

                    string strNewPath = Server.MapPath("~/UploadedExcel/" + strFileName + strFileType);

                    //Etablissons la Connection String Excel
                    if (strFileType.Trim() == ".xls")
                    {
                        connString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + strNewPath + ";Extended Properties=\"Excel 8.0;HDR=Yes;IMEX=2\"";
                    }
                    else if (strFileType.Trim() == ".xlsx")
                    {
                        connString = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + strNewPath + ";Extended Properties=\"Excel 12.0;HDR=Yes;IMEX=2\"";
                    }

                    query = "SELECT * FROM [Sheet1$]";

                    //Creons l'objet de connexion
                    conn = new OleDbConnection(connString);
                    //Open connection
                    if (conn.State == ConnectionState.Closed) conn.Open();
                    //Creons l'objet command
                    cmd = new OleDbCommand(query, conn);
                    da = new OleDbDataAdapter(cmd);
                    ds = new DataSet();
                    da.Fill(ds);

                    grvExcelData.DataSource = ds.Tables[0];
                    grvExcelData.DataBind();

                    lblMessage.Text = "Fichier chargé avec succès ! Total d'enregistrement:" + ds.Tables[0].Rows.Count;
                    lblMessage.ForeColor = System.Drawing.Color.Green;
                    lblMessage.Visible = true;

                    da.Dispose();
                    conn.Close();
                    conn.Dispose();
                }
                else
                {
                    lblMessage.Text = "Vous devez d'abord selectionner un fichier Excel";
                    lblMessage.ForeColor = System.Drawing.Color.Red;
                    lblMessage.Visible = true;
                }

            }

            catch (Exception Except)
            {

                throw;
            }

        }

Si l'article vous semble utile ou si vous avez des commentaires à faire ou si vous avez des difficultés n'hésitez pas à me contatcter : monsar04atgmail.com / 00243997647154

L'ouverture de l'esprit n'est pas une fracture du crâne