Alterner les couleurs des lignes d’un tableau en CSS

Bonjour à tous

je viens de découvrir une façon on ne peut plus simple d’alterner les couleurs d’une ligne en CSS, il suffit du code suivant :

table tr:nth-child(2n+2)
{
    background-color: #e7d8c3;
}

On ne peut pas plus simple ;)

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

Ajouter x jours à une date en PHP

Bonjour

aujourd’hui, je cherchais comment ajouter x jours à une date en PHP. La fonction date() n’étant pas une fonction que je maitrise, à part de la base, j’ai trouvé cette solution:

//Nombre jours à ajouter
$DateFin=7;
$DateDebut = date("Y-m-d");
$DateFin = date('Y-m-d', strtotime($DateDebut.' +'.$DateFin.' days'));
echo $DateFin;
//cela donnera la date que vous avez choisi à laquelle auront été ajoutés les x jours choisis
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

PHP et la fonction is_int

Vous connaissez certainement la fonction is_int() de PHP qui permet de vérifier qu’une variable est un nombre entier
Ainsi, le code suivant :

$MaVariable=255;
     if (is_int($MaVariable){
     echo 'bon';
     }
    else{
    echo 'pas bon';
    }

//Le resultat retourné : bon

Il se pose le problème lors de la vérification d’un champ après l’envoi d’un formulaire.
Ainsi, le code suivant:

$MaVariable=htmlspecialchars($_POST['Valeur']);
//On part du principe que la valeur tapée dans le champ de formulaire est 255
     if (is_int($MaVariable){
     echo 'bon';
     }
    else{
    echo 'pas bon';
    }

//Le resultat retourné : pas bon

Pourquoi cette différence? Parce que les données récupérés d’un formulaire sont des chaînes de caractères, le méthode is_int ne permet pas de tester qu’une chaîne de caractères est un entier. Il existe néanmoins une astuce toute simple pour contourner le problème, il suffit simplement de retransformer cette chaine de caractère en nombre en ajoutant 0 à cette chaine de caractères comme dans l’exemple suivant

$MaVariable=htmlspecialchars($_POST['Valeur'])+0;
//On part du principe que la valeur tapée dans le champ de formulaire est 255
     if (is_int($MaVariable){
     echo 'bon';
     }
    else{
    echo 'pas bon';
    }

//Le resultat retourné :  bon

Et voilà, c’est tout simple non?

VN:F [1.9.17_1161]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

Verifier le format d’une date en PHP

Hello

voici une petite fonction que j’ai réalisée pour vérifier le format d’une date en PHP. Il y a certainement beaucoup plus simple, mais en tout cas, celle la, elle marche

$Date=$_POST['DateNaissance'];
    if (preg_match('`^\d{1,2}/\d{1,2}/\d{4}$`',$Date)){
    //C'est bon, on vérifie maintenant que les nombre correspondent
    $Date=explode("/", $Date);
	if ($Date[0]<1 || $Date[0]>31){
            echo 'Le jour est incorrect';
	}
	else if ($Date[1]<1 || $Date[1]>12){
	    echo 'Le mois est incorrect';
	}
	else if ($Date[2]<1900 || $Date[2]>2012){
	    echo 'L\'année est incorrecte';
	}
	else{
	    echo 'La date est bonne';
	}
    }
    else{
	echo 'Le format de la date doit être jj/mm/aaaa';
    }
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

Savoir si un nombre est un multiple d’un autre (PHP)

Allez, une petite fonction en passant que je viens de découvrir. Cela vous permet de savoir si un nombre x est un multiple de y.

if($a % $b == 0){
    echo $a.'est un multiple de '.$b.'';
}
else{
    echo $a.'n\'est pas un multiple de '.$b.'';
}
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

Jquery ContextMenu. Un menu perso lors du clic droit!

Jquery ContextMenu est un plugin jquery puissant de gestion du clic droit de votre souris. Il permet assez facilement de créer un menu contextuel personnalisé, et ainsi d’améliorer grandement l’accessibilité de votre site internet.

Une documentation très complète est fournie concernant l’utilisation du menu. Malheureusement, comme beaucoup de plugins, l’aide est uniquement en Anglais, ce qui est dommage.

Voici le lien pour la démo et le téléchargement:

Démo et téléchargement

VN:F [1.9.17_1161]
Rating: 8.0/10 (3 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

Jeditable, un plugin jquery bien utile!

Jeditable est un plugin javascript qui vous permettra de modifier un mot, un groupe de mot, un paragraphe directement depuis la page.

Le principe est simple: vous choisissez ce qui peut être modifié dans votre page et le mode de modification (Au clic, au double clic, au passage de souris).

Par exemple, si vous avez choisi que le paragraphe X peut être modifié au clic, lorsque vous cliquez dessus, le paragraphe est modifié et s’affiche en textarea! Vous faites les modifications à faire, vous cliquez sur ok et le paragraphe s’affichera de nouveau, les modifications ont été prises en compte. Cela peut être bien utile lorsque vous soumettez un projet à quelqu’un. ce dernier pourra modifier directement le projet. Pas besoin de zone dédiée donc!

Mais plutôt que des mots, je vous propose la…. démo :

Démo et téléchargement

C’est un des plugins les plus utiles qu’il m’ait été donné de tester!

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

Créer un espace membre en PHP (partie 2)

Aujourd’hui, dans le cadre de la création de l’espace membre, je vais vous présenter la table SQL du script d’espace membre. Cette table comprend 9 champs. Je vous met le code SQL de la création de table ci dessous. Je le commenterais ensuite.

CREATE TABLE IF NOT EXISTS `membres` (
  `IdMembre` int(10) NOT NULL AUTO_INCREMENT,
  `IdAleatoire` char(20) CHARACTER SET latin1 NOT NULL,
  `Pseudo` varchar(20) CHARACTER SET latin1 NOT NULL,
  `Passe` char(32) CHARACTER SET latin1 NOT NULL,
  `Email` varchar(255) CHARACTER SET latin1 NOT NULL,
  `DateInscription` date NOT NULL,
  `Valide` smallint(1) NOT NULL DEFAULT '1',
  PRIMARY KEY (`IdMembre`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Détail des champs:

  • Id Membre est un champ autoincrement PRIMARY KEY. Ce champ s’auto incrémentera donc automatiquement à chaque nouvel inscription. Il sera principalement utilisé lors des recherches de membres. Il est classé en int(10).
  • IdAleatoire est un IdAleatoire est une variable aléatoire créée lors de l’inscription. Il est utilisé pour lier plusieurs tables ensemble. Il sert également lorsque qu’une variable est transmise via l’URL concernant un membre, pour plus de sécurité. Il faire 20 caractères d’où le CHAR(20)
  • Pseudo est comme son nom l’indique le pseudo du membre. Il peut faire 20 caractères maximum, mais la taille n’est pas imposée d’où le VARCHAR(20)
  • Passe est le mot de passe. Le mot de passe est crypté dans la base de données en MD5. Il fait donc toujours 32 caractères une fois crypté, d’où son classement en CHAR(32)
  • Le champ email est classé en VARCHAR(255) car bien sûr, la taille d’un email n’est pas fixe.
  • Le champ DateInscription utilise le classement DATE en SQL. C’est donc automatique à l’inscription via CURDATE(). La date est inscrite en format anglais (AAAA-MM-JJ).
  • Le champ valide est un chiffre unique (d’où le INT(1) qui peut être 0 ou 1 selon le compte soit activé ou non.

D’autres tables SQL pourront être créées plus tard, je les commenterais alors à ce moment.

Concernant les réquêtes SQL, elles seront toutes faites via PDO à la place de Mysql. C’est un choix fait par sécurité et facilité. Cela requiert que votre serveur soit en PHP5 (Encore que, y’a t il encore des serveurs exclusivement PHP4??).

Par defaut, PDO est activé sur les serveurs PHP5. Néanmoins, sur certains serveurs, PDO est déactivé. Vous trouverez donc ci dessous une adresse pour activer PDO, mais aussi pour en expliquer les avantages…. et les inconvénients!

Voilà pour la fin de cette deuxième partie. La troisième partie sera consacrée au formulaire HTML. La quatrième partie sera elle consacrée au contrôle du formulaire avec Jquery, Ajax et PHP.

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

Jquery favicon plugin

Allez, au passage un petit plugin jquery bien utile je trouve. Il s’agit d’un plugin qui modifie en direct le favicon de votre site, vous savez, cette petite icône à gauche de l’adresse du site internet. Cela peut être utile pour marquer la réussite ou l’échec d’une action à votre visiteur.

Il suffit juste d’inclure dans votre site un lien vers le plugin puis d’insérer ce code:

jQuery.favicon('mail_icon_32_active.png');

Bien sûr, cela n’est que le minimum de ce que plugin peut faire. Vous pouvez même, si le navigateur de votre visiteur accepte le HTML5 dessiner sur le favicon via la fonction canevas!

Plus d’exemples et le lien du téléchargement du plugin à cette adresse:

Démo et téléchargement

VN:F [1.9.17_1161]
Rating: 7.3/10 (4 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 2 votes)

Onglets en Jquery

J’ai cherché dernièrement comment faire des onglets en Jquery sans pour autant utiliser JqueryUi que je trouve trop lourd. J’ai trouvé ce code qui marche bien et qui est facile à mettre en oeuvre et à modifier.

Je vous copie le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple jQuery Tabs</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery( function($) {
	$('.simple-tabs').each( function() {
		var container = $(this);
		container.find('> ul li a').click( function () {
			$(this).parent().addClass( 'selected-tab' ).siblings().removeClass( 'selected-tab' );
			container.find('.tab-panel').hide().filter(this.hash).show();
			return false;
		}).eq(0).click();
	});
});
</script>
<style type="text/css">
  .simple-tabs ul {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
    float: left; position: relative; border-right: 1px solid #ddd; bottom: -1px;
  }
  .simple-tabs li {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
    float: left; border: 1px solid #ddd; border-right: none;
  }
  .simple-tabs li a {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
    float: left; text-decoration: none; padding: .5em 1.7em; color: #555555; background: #e6e6e6;
  }
  .simple-tabs li a:hover { background: #dadada; color: #212121; }
  .simple-tabs li.selected-tab { border-bottom-color: #fff; }
  .simple-tabs li.selected-tab a, .simple-tabs li.selected-tab a:hover { background: #fff; }
  .tab-panel { clear:left; border: 1px solid #d3d3d3; background: #ffffff; color: #222222; padding: 1.5em 1.7em;	}
</style>
</head>
<body>
  <h1>Simple Tabs with jQuery (not jQuery UI)</h1>
  <div id="tab-set-1" class="simple-tabs">
    <ul>
      <li><a href="#tab-1-1" title="">Tab 1</a></li>
      <li><a href="#tab-1-2" title="">Tab 2</a></li>
    </ul>
    <div id="tab-1-1" class="tab-panel">
      <h2>Tab 1 panel</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="tab-1-2" class="tab-panel">
      <h2>Tab 2 panel</h2>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
  </div>
  <div id="tab-set-2" class="simple-tabs">
    <ul>
      <li><a href="#tab-2-a" title="">Tab A</a></li>
      <li><a href="#tab-2-b" title="">Tab B</a></li>
      <li><a href="#tab-2-c" title="">Tab C</a></li>
    </ul>
    <div id="tab-2-a" class="tab-panel">
      <h2>Tab A panel</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="tab-2-b" class="tab-panel">
      <h2>Tab B panel</h2>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
    <div id="tab-2-c" class="tab-panel">
      <h2>Tab C panel</h2>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
    </div>
  </div>
</body>
</html>

J’ai trouvé ce code sur ce site :
Snipplr

Vous pouvez voir un exemple à cette page:
Démo

Il ne vous reste plus qu’à modifier le CSS pour adapter le menu à votre goût!!

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)