Quelques plugins jQuery utiles

Voici trois plugin jQuery que j'utilise relativement souvent :

- Time ago



Permet de modifier un timestamp en : "Il y a 4 minutes" ou "Il y a 8 jours", "Il y a un mois" comme ce qu'on peut voir dans les timeline de Twitter ou Facebook.

- jQuery Validation



Permet la validation des champs d'un formulaire avant d'être envoyé.

- jCrop



Permet de retailler une image sur un site internet. J'avais fait ce genre de code en javascript + php (sur le site de Live9 pour l'envoi des pochettes) avant de trouver ce plugin jQuery.

N'hésitez pas a partager vous aussi les différents plugins que vous utilisez régulièrement.

Envoi de mail avec CodeIgniter plain/text [edit ET text/html]

Nous allons aujourd'hui envoyer un mail grâce à CodeIgniter.

Pour cela il faut créer un fichier email.php dans le répertoire application/config/
Dans ce fichier plusieurs méthodes pour envoyer un mail soit via "mail", "sendmail" ou via "smtp".
Nous allons utiliser un compte mail donc le SMTP.

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

$config['protocol'] = 'smtp';
$config['smtp_host'] = 'smtp.domaine.com';
$config['smtp_port'] = 25;
$config['smtp_user'] = 'mail@domaine.com';
$config['smtp_pass'] = 'motdepasseducomptemail';

Créer ensuite un contrôleur par exemple controllers/home.php
Dans votre home vous allez créer la méthode "send" qui permet l'envoi du mail.

<?php
class Home extends Controller {

	function Home()
	{
            parent::Controller();
	}

	function index()
	{
            // On charge la vue index
            $this->load->view('index');
	}

	function mail()
	{
            $this->load->library('email');
            $this->email->set_newline("\r\n");
            $this->email->from('email@domaine.com', 'Prénom NOM');
            $this->email->to('destinataire@domaine.com');
            $this->email->subject('Titre du mail');
            $this->email->message('Contenu du mail.');

            if($this->email->send()) {
                echo 'E-mail envoyé !';
            } else {
                echo 'Oup\'s ! Il y a eu un soucis lors de l\'envoi !';
            }
	}
}

Ce code fonctionne parfaitement en "plain/text".

Pour envoyer un mail au format html modifier votre fichier config/email.php :

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

// Ajout du format html (mail en html)
$config['mailtype'] = 'html';
// Ajout de l'encodage du mail
$config['charset']  = 'iso-8859-1';

$config['protocol'] = 'smtp';
$config['smtp_host'] = 'smtp.domaine.com';
$config['smtp_port'] = 25;
$config['smtp_user'] = 'mail@domaine.com';
$config['smtp_pass'] = 'motdepasseducomptemail';

Et dans votre contrôleur modifier le contenu du message par un contenu avec des balises html comme ceci par exemple :

$this->email->message('<p>Contenu du mail <b>en gras</b>.</p>');

Impossible pour nous d'envoyer un mail au format HTML avec CodeIgniter pour l'instant !
J'ai laissé un message sur le forum de Code Igniter pour voir si ça vient pas du framework directement ou moi qui ai mal compris un truc

Edit : Il fallait ajouter le type d'encodage du mail pour pouvoir envoyer au format HTML

Nouveautés 2010 !

Cette année quelques choses changeront :
Le support d'IE6 ne sera plus pris en compte quel que soit le projet. Internet Explorer 7 et 8 étant en place depuis déjà pas mal de temps.
Dates de sortie :
- Le 18 Octobre 2006 pour Internet Explorer 7 (soit 3ans et 3mois)
- Le 11 Juin 2009 pour Internet Explorer 8 (soit 6mois)
Il est donc temps je pense d'abandonner Internet Explorer 6 qui a eu 8ans en Octobre dernier !

Sur le blog faire de plus en plus d'articles techniques sur des frameworks tel que : jQuery et CodeIgniter et des tips sur CSS3...

Et d'autres points sur lesquels nous travaillons : le développement d'applications (pc, mac, mobile), d'interfaces et de site web, l'hébergement, l'infogérance, la téléphonie et les cours également (les cours de développement d'application Twitter, Facebook, jQuery etc...).
Dans les cartons pour le début de l'année la sortie d'un Scheduler Radio !

N'hésitez pas a prendre contact avec nous si vous avez des questions ou besoin d'informations.
Meilleurs Vœux pour l'année 2010 !

jQuery + CodeIgniter + Référencement

Sur un site j'utilise CodeIgniter et un plug in jQuery pour la navigation (sans recharger tout le contenu).

La navigation comme ça c'est bien mais ça ne fonctionne pas partout et pour le référencement c'est pas terrible.

Donc je vais vous expliquer les différentes modifications que j'ai fait dans mon code source de base pour pouvoir référencer correctement le site avec la navigation en "AJAX".

Dans un premier temps j'ai utiliser le Framework PHP CodeIgniter : http://www.codeigniter.com

Ensuite j'ai téléchargé la librairie jQuery : http://www.jQuery.com ainsi que le plugin jQuery.History disponible ici : http://www.mikage.to/jquery/jquery_history.html

Par défaut les adresses de Code Igniter sont du genre : /index.php/class/méthode etc... ce qui est vraiment pas optimum pour le référencement j'ai donc décidé de supprimer le "index.php/" pour cela j'utilise un fichier .htaccess avec les paramètres suivants :

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php?/$1 [L]

Ce qui me permet d'avoir : /accueil/login à la place de : /index.php/accueil/login
Ou d'avoir /accueil à la place de : /index.php/accueil

J'ai créer dans /application/controllers un contrôleur que j'ai nommé "page". Ce contrôleur appellera la page demandé avec un header et un footer.

class Page extends Controller {

	function Page()
	{
		parent::Controller();
	}

	function index()
	{
		// Charge la page : /application/views/accueil.php
		$data['main_content'] = 'accueil';
		$this->load->view('includes/template', $data);
	}

	function contact()
	{
		// Charge la page : /application/views/contact.php
		$data['main_content'] = 'contact';
		$this->load->view('includes/template', $data);
	}

}

Ensuite dans le dossier /application/views j'ai un dossier "includes" qui contient :
header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>

template.php

// Header du site
<?php $this->load->view('includes/header'); ?>
// Vue chargé par la variable $main_content
<?php $this->load->view($main_content); ?>
// Footer du site
<?php $this->load->view('includes/footer'); ?>

footer.php

</body>
</html>

Ajouter dans votre htaccess une ligne par page que vous voulez créer à noté on appel toujours "page" qui est notre contrôleur et "accueil" qui est notre méthode

RewriteRule ^accueil$ /index.php/page/accueil/ [L]
RewriteRule ^contact$ /index.php/page/contact/ [L]

Donc on peut créer un menu dans /application/views/includes/header.php

<div id="navigation">
  <ul>
    <li><a href="/accueil">Accueil</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

Ce menu fonctionnera parfaitement avec tous les navigateurs par contre il rechargera a chaque fois tous les éléments : header.php template.php et footer.php

Pour ne pas recharger a chaque fois tous les éléments on peut utilise le plugin jQuery.History. Ce plug in fonctionne avec des liens avec l'attribut rel="history" et avec des ancres donc des liens avec des #page etc...

J'ai donc fait un petit code en jQuery qui modifie le menu précédent par le code :

<div id="navigation">
  <ul>
    <li><a rel="history" href="#accueil">Accueil</a></li>
    <li><a rel="history" href="#contact">Contact</a></li>
  </ul>
</div>

Le script jQuery qui permet de modifier le menu a la volée est le suivant :

    $(document).ready(function() {
        /* Pour chaque element a qui se trouve dans un li dans un ul dans un element id="navigation" */
        $("#navigation ul li a").each(function(){
            /* On recupere le href et on coupe le slash */
            var ancre = $(this).attr("href").split('/');
            /* On ajoute l'attribut rel avec la valeur history */
            $(this).attr("rel","history");
            /* On modifie l'attribut href par le nouveau avec le # a la place du slash */
            $(this).attr("href","#" + ancre[1]);
        });
    });

Si le navigateur accepte jQuery et le Javascript alors les liens seront de la forme #lien et chargé grâce au plugin jQuery History sinon les liens seront de la forme /lien

A l'an prochain bon réveillon

CodeIgniter

Depuis quelques temps je me suis mis à utiliser CodeIgniter, un framework PHP.

Pour utiliser CodeIgniter vous devez avoir :
- PHP version 4.3.2 ou supérieur.
- Une base de donnée (optionnel) mais utile lors de la création d'applications ou de sites web tel que : MySQL 4.1 ou supérieur, MySQLi, MS SQL, Postgres, Oracle, SQLite, ou ODBC.

Pour utiliser CodeIgniter télécharger la dernière version sur le site officiel. (Actuellement c'est la version : 1.7.2)
Ensuite décompressez les fichiers et placez les dans le répertoire de votre serveur web. Puis ouvrir le fichier de configuration qui se trouve dans application/config/config.php avec un éditeur de texte pour définir l'url de base de votre site. Vous pouvez également définir votre clé de chiffrement pour vos sessions.
Si vous voulez utiliser les bases de données éditer également le fichier application/config/database.php et définir les différents paramètres de connexion à votre base.

CodeIgniter utilise le modèle MVC "Model View Controler" et il est sous licence BSD.
Je vous invite a voir les différents Cheasheets qui vous permettrons de vous y retrouver au début, ainsi que d'utiliser la documentation disponible en ligne.

Pour commencer également n'hésitez pas a faire un tour dans la rubrique "VideoTutorial" pour voir des tutoriels (dont un qui permet la création d'un blog).

N'hésitez pas a ajouter des commentaires si vous avez des questions ou nous contacter via twitter @point2zero à bientôt !

Have fun with jQuery animate()

La fonction animate() de jQuery en inspire plus d'un !

Voilà deux blog ou vous pourrez voir divers utilisations de cette fonction :

http://www.viget.com/inspire/fun-with-jquerys-animation-function/

Pour les amateurs de bacon :
http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon (la démo)

Et pour finir un script que j'ai utilisé dans un projet qui permet d'attribuer un classement avec des étoiles :
http://www.m3nt0r.de/devel/raterDemo/

jQuery - Cookie plugin

Créer, modifier, supprimer vos cookies grâce à ce plugin jQuery !

http://plugins.jquery.com/project/Cookie

Il est plutôt simple d'utilisation j'avais fait il y a 2ans un script pour gerer les cookies avec Javascript et il était bien plus complexe que ce plugin.Pour créer un cookie :

$.cookie("nom_du_cookie", "valeur");

Création d'un cookie valide pendant 30 jours :

$.cookie("nom_du_cookie", "nom_du_cookie", { expires: 30 });

Afficher la valeur du cookie :

alert( $.cookie("nom_du_cookie") );

Supprimer le cookie il suffit de modifier la valeur par null (ou de mettre une expiration a 0) :

$.cookie("nom_du_cookie", null);

Nouveaux liens !

Une semaine déjà sans faire un billet c'est long je sais...
Voilà donc des nouveaux liens sur la gauche (l'autre gauche ? la droite ! ) qui vous permettrons de découvrir pas mal de sites en jQuery ou d'autres technologies.

- Function est un site Anglais plutôt bien fait avec pas mal de design de boutons (avec certains à vendre) et quelques articles qui m'intéressent.
- Nettuts+ est un blog avec pas mal d'articles et de tutoriaux (certains payant également) mais pas mal de contenu est gratuit c'est également un très bon site. N'hésitez pas a voir les sites de la même famille (PSDtuts, Audiotuts etc...).
- Six Revisions je le connais beaucoup moins mais il y a des bons articles également.

Bonnes ressources pour débuter avec jQuery

Voilà quelques liens sur les différents selecteurs que vous pouvez utiliser avec jQuery :

via codylindley.com

via sawmac.com

via jQuery.com

Egalement une selection des 30 meilleurs plugin jQuery pour le mois de Mai 2009, avec parmis ces plugins le jplayer qui permet la lecture d'un mp3 grâce à jQuery.

via ajaxline.com

Plugin jQuery : "Sparks" le plugin qui fait des étincelles !

Aujourd'hui je vous présente le plugin jQuery "Sparks" qui signifie "étincelles".

Ce plugin est trés graphique et plutôt sympa au premier coup d'oeil j'ai cru a du flash...

Le site http://redflex.co.uk/ utilise ce plugin vous pouvez donc vous rendre là bas pour voir une démonstration.

On peut modifier le nombre d'étincelles a notre guise avec différentes images... Comme l'explique son auteur sur le site officiel du plugin.

Voir la démonstration

Voir le site officiel