Glieunou, le web facile: février 2012

vendredi 24 février 2012

Faire un diaporama photo avec Jquery et le plugin nivo-slider

Bonsoir,

Déjà bon début de weekend à tous. Aujourd'hui, je compte aborder avec vous la mise en place d'un diaporama photo dans votre site web. Faudrait déjà savoir que plusieurs outils dont Jquery permet de mettre en place très facilement et très aisément un diaporama sur son site.

Jquery c'est quoi : Et bien c'est tout simplement la bibliothèque JavaScript la plus populaire du moment. Et comme vous le savez javascript c'est ce langage qui permet de dynamiser les sites web côté client. Dans des prochains articles, nous reviendrons en profondeur sur Jquery et JavaScript.

Comme dit plus haut, nous allons voir comment réaliser un diaporama photo avec jquery, l'on utilisera pour cela le plugin Jquery nivo-slider. Ce plugin n'est qu'un parmi des centaines permettant de faire un diaporama photo avec Jquery, mais de tout ceux que j'ai pu côtoyer, il me semble être le meilleur.

Voici le résultat que l'on compte avoir :

Vous pouvez également consulter ce site : www.associationhac.org pour voir de plus près cette animation et les transitions qui y sont apportées.

Bien maintenant que l'on sait ce que l'on veut, passons à la réalisation. Déjà télécharger le fichier suivant : cliquez ici pour télécharger. c'est tout simplement le plugin Jquery qui nous servira.

Télécharger, puis copiez le dossier nivo-slider dans un répertoire de votre site internet. Regroupé toutes les images de votre diaporama dans un dossier; img sera le nom utilisé dans cet exemple.

A présent, voici la procédure de réalisation :

Dans la page ou sera exécuté votre diaporama (ici cette page est dans le même repertoire que les repertoires img et nivo-slider2.7), copiez y entre les balises head le code ci-dessous :

$(window).load(function() {

$('#slider').nivoSlider();

});

</script>

Après cela, rechargez votre page sur votre navigateur. Si vous avez un fichier de style pour votre site, vous pourrez constaté que l'affichage a été complètement modifié, en gros il est quelques peu différent pourtant vous avez juste ajoutez les éléments cités plus haut.

Cela est en effet dû au fichier de style de nivo-slider, il faut donc le modifier de manière à garder votre style originale. Ouvrez le fichier style.css dans le répertoire suivant : nivo-slider2.7/nivo-slider/demo/style.css, supprimé son contenu et collez y le contenu suivant :

blockquote:before, blockquote:after,

q:before, q:after {

content:"";

}

blockquote, q {

quotes:"" "";

}

/* HTML5 tags */

header, section, footer,

aside, nav, article, figure {

display: block;

}

.theme-default #slider {

margin:3px 0 0 3px;

width:650px; /* longeur maximale de vos images */

height:300px; /* largeur maximale de vos images */

}

.theme-pascal.slider-wrapper,

.theme-orman.slider-wrapper {

margin-top:150px;

}

/*====================*/

/*=== Other Styles ===*/

/*====================*/

.clear {

clear:both;

}

Après cela tout devrait rentrer dans l'ordre. Rafraichissez votre page sur votre navigateur.

Rmq : dans le code css que je viens de donner, vous constater que j'ai définit deux variables width et height et comme dit en commentaire elles représentent la longueur et la largeur maximale qu'ont vos images. Donc modifié les si vous voulez montrer des images plus grandes ou plus petites.

Bien, dans le code de votre page, à l'endroit ou doive défiler les images, collez y le code suivant :

/* Debut de la partie modifiable, nos images sont insérés ici */

/* Fin de la partie modifiable */

</div>

Dans la partie réservée à la zone modifiable, sont inséré nos images. Ici j'en ai mis 4, mais pouvez en mettre plus si vous le souhaitez.

Explications : comme vous l'avez remarqué, les définitions des images sont différents. En effet pour chaque image on lui applique un effet d'apparition et de disparation différent (c'est l'une des choses qui ma le plus séduit sur le plugins nivo-slider)

Vous pourrez ainsi pour chaque image choisir l'effet que vous souhaitez, en clair si j'ai une cinquième image, je peux choisir de l'ajouter de la manière suivante :

<img src="img/DEF5.jpg" alt="" /> ou

<a href="#"><img src="img/DEF5.jpg" alt="" title="" /></a> ou

<img src="img/DEF5.jpg" alt="" data-transition="slideInLeft" /> ou

Ainsi de suite jusqu'à l'affichage de toutes les photos de votre galerie.

Ainsi ce termine notre article, j'espère que cet article vous intéressera, je vous invites et je vous invites à poser des questions si vous avez des préoccupations.

Bonne lecture !

jeudi 23 février 2012

Mettre en place une vidéo sur son site web

Bonjour,

Nous allons abordé ce jour une notion qui pour moi vaut la peine d'être connue, la mise en place d'une vidéo sur son site internet. En effet de plus en plus dans les sites web, l'on retrouve des fonctionnalités multimédia (vidéos, audio, animations, … )

Beaucoup se demandent donc comment procéder, et bien cet article est un élément de réponse. Avant de commencer, quelques petites explications s'imposent :

Il existe plusieurs format de vidéos sur internet ( flv, wmp, …), le format flv est cependant le plus utilisé.
Il existe plusieurs lecteurs vidéos sur internet que vous pouvez téléchargez et mettre sur votre site
Pour les vidéos flash, il est impératif d'installer flash player sinon vous ne pourrez pas lire des vidéos ou animations flash, de même pour les vidéos wmp il faut installer un plugin spécifique.

Pour faire simple, voici le code à insérer (texte en rouge) pour afficher une vidéo flv sur son site . j'expliques au fur et à mesure

Pour la première ligne, changez juste les attributs width et height, remplacez les par les valeurs correspondant à la longueur et à la largeur de votre vidéo

Ne rien changer sur les lignes ci-dessus, elles indiquent le lecteur flash que nous utilisons

Sur cette ligne, faut juste changer la ligne suivante : video/test.flv , remplacé la par le chemin relatif pour accéder à votre vidéo depuis la page ou exécutée la vidéo.

</object>

Etant donné que l'on utilise un lecteur flash spécifique, il est important de télécharger les deux fichiers ci-dessous et de les mettre dans le même répertoire que la page ou la vidéo est lue.

Cliquez ici pour télécharger le zip, après dé-zippé et traiter les fichiers comme dit plus haut.

Voila, après cela si vous exécuté votre page, vous devez voir votre vidéo s'afficher sur le lecteur.

j'espère que ce tuto vous a aidé, je vous invites à réagir si vous avez des suggestions ou propositions !

dimanche 19 février 2012

Faire un panier d'achat en PHP : partie 2

Bonjour, aujourd'hui, nous abordons la suite de notre article sur la mise en place d'une boutique en ligne.

Faudra m'excuser pour cette si longue attente, c'est pas facile de jongler avec le boulot afin d'avoir du temps de libre pour écrire. Je promets néanmoins de mieux m'organiser afin de publier au moins 1 article par semaine.

Notre base de données étant déjà crée, l'on va aborder la suite. Principalement il s'agira de :

Créer une page pour la sélection des produits

Créer une page pour la gestion de son panier

Créer une page pour la validation de son panier

Chacune de ses pages sera en inter-action avec un script php pour l'exécution d'une fonction de notre système.

Avant toutes chose, il est nécessaire de créer la connexion avec notre base de donnée. Nous allons donc créer un premier fichier pour cela.

Ouvré votre éditeur de texte favoris, crée un fichier et enregistré le sous le nom de connexion.php dans le repertoire test que nous avons crée précédement.

Dans votre fichier connexion, saisissez le contenu suivant :

<?php

mysql_connet('localhost','root',''); // ligne de connexion à notre serveur de base de données

mysql_select_db('panier') ; // ligne de connexion à notre base de donées

RMQ : les paramètres de connexion peuvent être différent chez vous, mais si vous êtes en local et que vous n'avez rien changé dans vos paramètres par défaut, cela devrait aller.

Maintenant que notre fichier de connexion est ok, passons au second fichier. Le fichier liste_pdt.php

Ce fichier affichera tout les produits de notre base de donnée. Comme précédement, ouvré votre éditeur et crée un fichier liste_pdt.php toujours dans le dossier test.

Dans ce fichier, saisissez le contenu suivant :

<?php

require("connexion.php"); // on fait appel à notre fichier de connexion

$req="select * from produit order by nom asc"; // requête de selection

$res=mysql_query($req); // exécution de la requête

// ouverture de la table qui servira de conteneur pour l'affichage de nos produits

echo'<table>';

// remplissage de la table crée, chaque ligne de notre table servira de ligne du tableau

while($ligne=mysql_fetch_array($res)) {

echo'<tr><td align="center"><img src="pdt/'.$ligne['image'].' " width="150" height="75" title="'.$ligne['description'].'" /> <td> ';

echo'<td>'.$ligne['nom'].' </td>';

echo'<td align="center">'.number_format($ligne['prix'],0,'',' ').' FCFA</td> ';

echo'<td align="center"><a href="panier.php?id='.$ligne['id'].' " >Ajouter au panier</a></td></tr> ';

}

// ferméture du tableau

echo'</table>';

Si vous remarquez bien le code ci-dessus, vous remarquerez que les liens sur les produits pointent vers la page panier, c'est elle que nous allons maintenant créer.

Ouvré votre éditeur de texte et crée un nouveau fichier panier.php, enregistré le toujours dans le repertoire test.

Copiez et collez y le contenu suivant :

<?php

// ouverture d'une session car le contenu du panier sera stocké dans un tableau session

Session_start();

$id=$_GET['id']; // récupération de l'id du produit

// fonction d'ajout du produit dans le panier, elle initialise la variable $_SESSION['panier']

function add($code,$qt) {

$_SESSION['achats'][] = array ("id1" => $code,"statut"=> 0,"qte"=>$qt);

}

// on teste si la variable $_SESSION['achat'][] existe

if(isset($_SESSION['achats'])){

// les lignes de code ci-dessous servent à incrémenter la quantité du produit dans le panier, ainsi chaque fois que l'on choisit d'ajouter un produit, un test est fait pour savoir s'il existe déjà dans le panier ou pas.

$count1 = count($_SESSION['achats']); $tab=array(); $tab1=array();

for($i=0;$i<$count1;$i++)

{ $tab[$i]=$_SESSION['achats'][$i]['id1']; $tab1[$i]=$_SESSION['achats'][$i]['statut']; }

if(!in_array($id,$tab)){ add($id,'1'); }

else {

for($j=0;$j<$count1;$j++) {

if($id==$tab[$j]) {

if($_SESSION['achats'][$j]['statut']==0) { $q=$_SESSION['achats'][$j]['qte']; $q++; $_SESSION['achats'][$j]['qte']=$q; }

else { add($id,'1'); }

}

// si la variable n'existe, on l'initialise

else {add($id,'1'); }

$nbre=0;

$count = count($_SESSION['achats']);

// calcul du nombre de produit dans le panier

for($i=0;$i<$count;$i++)

{

if($_SESSION['achats'][$i]['statut']=='0') { $nbre+=$_SESSION['achats'][$i]['qte']; } }

// stockage du nombre de produit dans une variable session

$_SESSION['nbre']=$nbre;

// redirection après insertion dans le panier

echo"<script language='javascript'>

document.location.href='mon_panier.php';

</script>

Comme vous l'avez une fois de plus encore remarquée, à la fin de l'opération l'on est redirigé vers la page mon_panier.php

c'est cette page qui nous servira pour la gestion de notre panier. De la, on pourra modifier ou supprimer les produits de notre panier.

Comme vous en avez pris l'habitude, ouvrez votre éditeur de texte préféré, créez un nouveau fichier mon_panier.php

Remplissez y le contenu suivant :

<?php

Session_start();

// petit test pour voir si le panier existe

if(!isset($_SESSION['achats'])) { echo"<script language='javascript'>

document.location.href='liste_pdt.php';

</script>

"; }

// script javascript pour le dynamisme de notre page

function fin(){

if(confirm("Voulez vous vraiment annuler votre commande ?")){

document.location.href="fin_achat.php"; }

}

function effacer(val){

if(confirm("Voulez vous vraiment effacer ce produit de votre panier ?")) { document.location.href="effacer.php?id="+val; }

}

function payer(){

if(confirm("Voulez vous vraiment valider cette commande ?")){

document.location.href="validation.php"; }

}

</script>

<?php

$total=0; $count=count($_SESSION['achats']); $tot=0;

if($count==0){ }

else{

// le code suivant liste le contenu du panier et nous donne la possibilité de supprimer ou de modifier les quantités des produits du panier

<?php

for($i=0;$i<$count;$i++){

// on parcourt notre tableau session et on ne considère que les lignes encore active

if($_SESSION['achats'][$i]['statut']==0) {

$id=$_SESSION['achats'][$i]['id1']; // on recupère l'id

$qte=$_SESSION['achats'][$i]['qte']; // de même que la quantité

$req3="select nom,prix from produit where id='$id $res3=mysql_query($req3);

$lig3=mysql_fetch_array($res3); $prix=number_format($lig3['prix'],0,'',' ');

echo"<tr>

<td align='center' class='lie zone'><a href='#' onclick='effacer($id)' class='lie41'>Effacer</a></td>

</tr>";

// on incrémente le total

$tot=$lig3['prix']*$qte;

$total+=$tot;

}

$prix1=number_format($total,0,'',' ');

<tr><td> </td><td bgcolor="#0099CC" class="zone lie4 style7 style4">Prix Total : </td><td class='lie42 zone' align="center"><?php echo $prix1 ?> FCFA</td><td> </td>

</tr>

</div></td><td><div align="center">

</div></td><td><div align="center">

</div></td>

</tr>

</table>

</form>

<?php

}

Dans le code ci-dessus, on fait appel a calcul.php, validation .php, fin_achat.php et effacer.php ce sont les trois derniers fichiers de notre tuto.

Reprennez votre éditeur de texte et crée ces 4 fichiers, voici le contenu que vous devez y mettre :

- pour le fichier effacer.php

<?php

// lorsque l'on efface un produit, il est physiquement toujours présent dans notre tableau session, mais n'est plus visible à l'utilisateur

session_start();

if(!isset($_SESSION['achats'])) { echo"<script language='javascript'>

document.location.href='liste_pdt.php';

</script>

"; return; }

$id=$_GET['id'];

$count=count($_SESSION['achats']);

for($i=0;$i<$count;$i++){

if($_SESSION['achats'][$i]['id1']==$id){

$_SESSION['achats'][$i]['statut']='1';

}

$nbre=0;

for($i=0;$i<$count;$i++)

{

if($_SESSION['achats'][$i]['statut']=='0') { $nbre+=$_SESSION['achats'][$i]['qte']; } }

$_SESSION['nbre']=$nbre;

echo"<script language='javascript'>

document.location.href='mon_panier.php';

</script>

Calcul.php

<?php

session_start();

if(!isset($_SESSION['achats'])) { echo"<script language='javascript'>

document.location.href='liste_pdt.php';

</script>

"; return; }

$count=count($_SESSION['achats']);

// on parcourt notre tableau session, si un produit a été mis à jour, on le modifie

for($i=0;$i<$count;$i++){

if(isset($_POST[$i])) {

if(empty($_POST[$i])) $val=0;

else $val=$_POST[$i];

$_SESSION['achats'][$i]['qte']=$val;

}

$nbre=0;

for($i=0;$i<$count;$i++)

{

if($_SESSION['achats'][$i]['statut']=='0') { $nbre+=$_SESSION['achats'][$i]['qte']; } }

$_SESSION['nbre']=$nbre;

echo"<script language='javascript'>

document.location.href='mon_panier.php';

</script>

Fin_achat.php

<?php

session_start();

// On détruit les variables de notre session

unset($_SESSION['achats']);

// On détruit notre session

//session_destroy ();

// On redirige le visiteur vers la page d'accueil

echo "<script language='Javascript'>

<!--

document.location.href='liste_pdt.php';

// -->

</script>

Le fichier validation.php est assez long, le réecrire ici ne ferait qu'alourdi cet article déjà assez long je trouve. Pour résumé disons qu'il contient le même contenu que celui de mon_panier.php

A la seule différence que les quantités ne sont plus dans des zone de textes, mais écrit en dur, donc non modifiable. La possibilité est toujours donné à l'utilisateur de tout abandonner.

Afin de mieux comprendre cele, je vous invite à aller sur ce site : www.technoelec-sarl.com et de tester le panier d'achat, soyez attentif a la derniière étape. c'est elle que j'ai pas expliqué ici.

Si quelqu'un d'entre vous à des diffilcultés ou souhaites un éclaircissement, il peut me contacter à tout moment.

Merci et bonne lecture !