Tu souhaites adapter ton site pour l’iPad ? Il faut pouvoir l’identifier afin de charger les bonnes feuilles de styles, les bons templates et les bon JavaScript.

Plusieurs solutions s’offrent à toi faire la détection en PHP ou en JavaScript. Tout d’abord voyons le Javascript :

if( navigator.userAgent.match(/iPad/i) != null )
{
     // javascript à faire si l'iPad est détecté
}

Enfin pour le PHP :

if( strpos($_SERVER['HTTP_USER_AGENT'],'iPad') !== null )
{
     // PHP à faire si l'iPad est détecté
}

Photo

Pas encore de billet sur le même sujet !

Plusieurs mois après la mise en ligne de PHP fonctions, la bibliothèque de fonctions PHP, quelques fonctions PHP se dégagent par leur utilité et leur spécificité. Voici 3 fonctions choisies pour toi :

• get_last_tweets() par Adrian Gaudebert.

  Récupère les derniers statuts d’un compte Twitter. Parfait pour créer un mashup Twitter ou juste afficher ses derniers tweets sur son blog.

• getTinyUrl() (par moi-même)

  Permet de raccourcir une URL en utilisant l’API de Tinyurl. Très utile pour proposer des liens « partager sur Twitter » sans dépasser les 140 caractères !

• La Classe Miniature par PaHtP

  Cette classe (malheureusement en PHP 4, mais facilement adaptable à PHP 5) permet de créer la miniature d’une image avec un redimensionnement proportionnel.

Pas encore de billet sur le même sujet !

Pour le 100ème billet de ce blog (en 111 jours, la moyenne est pas mal, nan ? ), j’ai choisi de présenter quelques blogs que je suis pour certains depuis plusieurs mois et pour d’autres depuis quelques jours seulement.

5 blogs sur les 6 que je vais présenter sont des blogs techniques (dans le domaine du web of course) et un plutôt humoristique. J’ai essayé de ne pas sélectionner des blogs que tout le monde connaît, on ne retrouvera pas ici Presse-Citron, Korben, Blogmotion ou BienBienBien (oups, je les ai quand même cité… ).

Galanterie oblige, je vais commencer par le blog d’Émilie Navarro qui est une webmaster dans la région toulousaine. Son blog traite de ses différentes réalisations, de ses expériences (avec Twitter par exemple), de marketing et du web en général. Ses billets sont toujours bien documentés et ses illustrations sont toujours sympas !

Olybop est un blog qui parle surtout de deisgn et qui présente très régulièrement des illustrateurs. Ses découvertes sont souvent sympas et parfois surprenante. Tu pourras également le retrouver sur twitter.

Le Dator Blog est un blog qui parle de développement web principalement. On y retrouve pas mal de JQuery et régulièrement des présentations de plugins JQuery.

J’ai découvert le blog d’Adrian Gaudebert il y a peu. Son profil de jeune développeur web m’a rappelé un peu le mien. Ses billets parle du web en général et de ses projets. C’est lui qui a créé le prjet « blog libre de tout contrôle gouvernemental » en opposition à Hadopi et Loppsi2. Il a également fait un billet sympa sur PHP fonctions !

Raphaël Kueny est un développeur web PHP. Son blog parle donc de… développement web PHP ! Ses billets sur la communauté PHP, sur les news du PHP ou sa série de tutoriels sur « Comment créer un jeu web » sont toujours intéressants et bien documentés.

Pour finir en beauté, un blog pas technique, mais plutôt humouristique : La bande pas dessinée ! Un blog BD qui présente régulièrement des planches (souvent à trois cases) où le pas concept c’est d’avoir des pas personnages. On retrouve uniquement les bulles. Si tu as un peu de temps cet été sur la plage, je ne peux que te recommander de les lire tous depuis le début. Attention, il faut aimer le second degrès et l’humour noir !

Pas encore de billet sur le même sujet !

Pour le développement d’un site que j’ai en cours, j’ai dû intégrer directement les Gravatars aux membres postant des commentaires. J’ai été tout bonnement étonné de la simplicité à mettre en place en PHP. Tout ça est en complément de tous les plugins et intégration native sur les CMS et plateformes de blog (Drupal, Joomla, Dotclear ou WordPress).

Pour rappel, un Gravatar (Globally Recognized Avatar) est une image qui vous suit sur tous les sites qui proposent leur intégration. Par exemple sur le blogs WordPress, quand un commentaire est laché, l’adresse email est demandé et à partir de cet adresse email, Gravatar retourne l’avatar de l’utilisateur. C’est aussi simple que ça.

C’est parfaitement intégrable sur tous les sites. Aucune inscription n’est nécessaire !

Voici comment le mettre en place en PHP :

1
2
3
4
5
6

$email = "arnaud-k@machin.com"; // l'adresse email de l'utilisateur
$default = "http://www.machin.com/avatar-par-defaut.jpg"; // l'url de l'image à afficher par défaut si l'utilisateur n'a pas de Gravatar
$size = 40; // la taille pour l'affichage du gravatar (celui-ci sera carré)
 
// on construit ensuite l'url du Gravatar
$gravatar = "http://www.gravatar.com/avatar.php?gravatar_id=".md5( strtolower($email) )."&default=".urlencode($default)."&size=".$size;

Il n’y a plus qu’à afficher le Gravatar en html :

<img src="<?php echo $gravatar ?/>" alt="nom du membre" />

Pas encore de billet sur le même sujet !

J’ai eu très récemment l’occasion de travailler sur l’API de Youtube. Cette API, évidemment fourni par Google, est très complète et peut permettre beaucoup d’interactions avec Youtube (recherche et visionnage de vidéos, upload, login, …). La documentation fourni par Google est, comment dire, un peu fouilli et pas très claire.

Je vais néanmoins te partager mes découvertes en proposant un tutorial pour rechercher des vidéos sur Youtube, afficher les résultats (sous forme de miniature) et lire les vidéos.

Demo Api Youtube

Comme d’hab, j’ai préparé une démo de ce tutorial (démo hébergée chez mon employeur car mon hébergement 1&1 n’est pas PHP 5). Comme c’est du PHP, j’ai également prévu le téléchargement des sources de la démo.

Tout d’abord il est absolument nécessaire d’avoir un serveur PHP 5.2 au minimum. Il faut également télécharger un standalone du framework PHP zend, GData qui contient les fichiers nécessaires au fonctionnement de l’API. Enfin pour juste effectuer des recherches et afficher des vidéos, il n’est pas nécessaire d’avoir une key pour l’API Youtube.

Dans le .zip de GData, il y a un dossier « librairy » dans lequel on retrouve un dossier « Zend », c’est celui-là qu’il faut uploader à la racine de ton site.

Jetons maintenant un oeil au code :

Le principe est le suivant : on fait une requête (en utlisant les objets mis à disposition par l’API) et on récupère et on traite les informations à partir du flux XML retourné (voir la liste des infos disponible).

1
2
3
4
5
6
7
8
9
10
11
12
13
14

require_once 'Zend/Gdata/YouTube.php'; // on charge la librairie YouTube
 
$yt = new Zend_Gdata_YouTube(); // on initialise l'objet Youtube
$yt->setMajorProtocolVersion(2);
$query = $yt->newVideoQuery();
$query->setOrderBy('relevance'); // les vidéos sont classées par pertinence
$query->setTime('all_time'); // on souhaite afficher les vidéos qui ont été ajoutées n'importe quand
$query->setVideoQuery("fat freddy's drop"); // on définit la recherche
 
// on récupère un flux XML avec la liste des vidéos
$flux = $yt->getVideoFeed($query->getQueryUrl(2));
 
// on affiche les miniatures 
get_results($flux);

La fonction get_results() est une fonction permettant de parcourir le flux XML des résultats pour le traitement des informations. Cette fonction appelle elle-même la fonction afficheMiniature() qui permet d’afficher les miniatures des vidéos. Ici, je stoppe le listing des résultats à 6, mais on peut en afficher jusqu’à 25.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/******** FONCTIONS POUR L'API YOUTUBE ********/
// On recupère l'url du player flash et une miniature de la video (format 120*90)
// et on affiche la miniature en mettant l'url du player en id (pour le récupérer avec JQuery après)
function afficheMiniature($video)
{
	$miniature = $video->getVideoThumbnails();
	echo '<img class="videoThumb" id="'. $video-/>getFlashPlayerUrl() .'" src="' . $miniature[0]['url'].'" alt="" />';
}
 
// fonction permettant de parcourir les vidéos provenant d'un flux
function get_results($videos)
{
	    $count = 1;
	    foreach ($videos as $video) {
		afficheMiniature($video);
		if($count==6)
			break;
		$count++;
	    }
}

Enfin, j’ai ajouté un petit code JQuery pour permettre l’affichage d’un seul player flash (s’il y en a plusieurs sur une page, celle-ci peut galérer un peu) et de changer la vidéo lorsque l’on clique sur une miniature. Par défaut (au chargement de la page) on affiche la première vidéo.

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready( function () {
	/* ##########
		AFFICHAGE DYNAMIQUE DES VIDEOS
	########## */
	if($("#lectureVideo")) // afficher une video au chargement de la page si le div ayant pour id lectureVideo
	{
		var urlVideo = $("img.videoThumb:first").attr("id");
		$("#lectureVideo").html('<object width="360" height="300"><param name="movie" value="'+urlVideo+'&color1=0x2193bd&color2=0x2193bd"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+urlVideo+'&color1=0x2193bd&color2=0x2193bd" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="300"></embed></object>');
	}
	$("img.videoThumb").click( function() { // si on clique sur une miniature on affiche la vidéo dans le bloc ayant pour id "lectureVideo"
		$("#lectureVideo").html('<object width="360" height="300"><param name="movie" value="'+$(this).attr("id")+'&color1=0x2193bd&color2=0x2193bd"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+$(this).attr("id")+'&color1=0x2193bd&color2=0x2193bd" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="300"></embed></object>');
	});
});

Pour voir la structure HTML que j’ai utilisé, je t’invite à regarder le code de la démo (CTRL+U sous firefox). C’est à toi de jouer maintenant !

Toute la code officielle est disponible ici.

Pas encore de billet sur le même sujet !

Dans l’admin de WordPress (qui utilise JQuery), il y des légers effets de couleurs, d’apparition. Je trouve qu’ils ont un rendu qui fait assez classe.

Je te propose donc un tutorial pour faire plus ou moins le même effet. Pour l’effet de transition de couleur il est nécessaire d’avoir le plugin JQuery.color (dispo ici) et le plugin JQuery.delay pour une meilleure fluidité (au moment de l’appel en Ajax, dispo ici)

Voir la démo

Comme d’habitude, on commence par inporter la librairie JQuery et les plugins nécessaires :

1
2
3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript" src="jquery.delay.js"></script>

Ensuite on prépare la structure HTML des éléments à supprimer. J’ai choisi des paragraphes (balises <p>) pour que ce soit le plus simple possible, mais libre à vous de le changer et par conséquent de changer les sélecteurs JQuery.

1
2
3
4
5
6
7
8
9
10

<p>Premier élément <a href="#" class="supprimer" rel="1">Supprimer</a></p><!-- on place dans l'attribut rel l'id de l'element à supprimer -->
<p>Deuxième élément <a href="#" class="supprimer" rel="2">Supprimer</a></p>
<p>Troisième élément <a href="#" class="supprimer" rel="3">Supprimer</a></p>
<p>Quatrième élément <a href="#" class="supprimer" rel="4">Supprimer</a></p>
<p>Cinquième élément <a href="#" class="supprimer" rel="5">Supprimer</a></p>
<p>Sixième élément <a href="#" class="supprimer" rel="6">Supprimer</a></p>
<p>Septième élément <a href="#" class="supprimer" rel="7">Supprimer</a></p>
<p>Huitième élément <a href="#" class="supprimer" rel="8">Supprimer</a></p>
<p>Neuvième élément <a href="#" class="supprimer" rel="9">Supprimer</a></p>
<p>Dixième élément <a href="#" class="supprimer" rel="10">Supprimer</a></p>

Enfin, la plus grosse partie : le code JQuery. Les commentaires sont directement dans le code (ils sont également dans le code de la page de démo).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(document).ready( function () {
	$('a.supprimer').click(function(e) { // quand on clique sur un lien supprimer
		e.preventDefault(); // annule l'effet du lien pour pas recharger la page
		var id = $(this).attr("rel"); // on recupere l'id de l'element a supprimer (qui est dans l'attribut rel du lien)
		if(confirm('Supprimer cet élément ?')) { // on demande une confirmation
			var parent = $(this).parents("p"); // on recupere le paragraphe parent du lien (qui contient l'element a supprimer)
			$.ajax({ 
				type: "POST", // les variables seront passées en POST (comme d'hab pour les recuperer en php $_POST[id] par exemple)
				url: "suppr.php", // on appelle le fichier php suppr.php qui supprimer l'element de la base de donnees (dans mon cas, ce fichier est vide)
				data: "id="+id+"&act=suppr", // variable que l'on passe au fichier php
				beforeSend: function() {
					parent.animate({'backgroundColor':'#FF3F47'},300); // animation a faire avant l'envoi (on change le fond avec un fondu jusqu'à la couleur #FF3F47)
				},
				success: function(msg){ // en cas de succes
					$(this).delay(1200,function(){ // on attend 1.2 secondes
							parent.slideUp(500,function() { // et on fait disparaitre l'element en l'enroulant
							});
						});
				}
			});
		}
	});
});

Pas encore de billet sur le même sujet !

Voilà, ça fait maintenant une semaine que j’ai mis en ligne phpfonctions (pour rappel phpfonctions est une bibliothèque de fonctions php). Le premier bilan que je peux en tirer est plutôt positif. Tout d’abord en terme de fonctions ajoutées : on peut en compter aujourd’hui une bonne quarantaine. Mais c’est surtout leur variété qui me plaît bien.

Ensuite, en terme de visites, lundi a été une journée record avec plus de 900 visites ! Ca redescend tout doucement pour arriver à un total d’environs 300 visiteurs hier. Au total ce sont 2 224 visiteurs au total qui sont venus lors de la première semaine (avec plus de 10 000 pages vues )

Ce qui a fait la différence, c’est surtout les articles sur divers blogs et portails, avec tout d’abord Adrien (fidèle lecteur ) et son blog Tilàcica qui a été le premier sur le coup, puis des articles sur FreeTools, Jarodxxx, Nexen, rkueny, dominique-girolt, phpfacile, et enfin neosting-press. Je les remercie bien entendu tous !

Niveau référencement, Google a l’air d’apprécier phpfonctions, en effet sur la requête fonctions php, il sort sur la première page en 7-8ème position. Pour ça, il me reste plus qu’à attendre un peu pour éventuellement recadrer les mots-clés.

Enfin, diverses fonctionnalités ont déjà été ajoutées comme la navigation par catégorie ou la possibilité de rechercher une fonction php. J’ai également eu (en plus des articles cités ci-dessus) quelques propositions ou suggestions intéressantes de la part de @neiths (avec son blog sympa), @dryzer, Cydelic et Mazzu (directement sur le blog). Je pense que tout bientôt seront disponibles les flux RSS des commentaires, un petit encart fonctions php similaires, et pourquoi pas une API permettant à divers sites de reprendre le contenu. Pour certaines propositions (comme l’insertion des classes ou de tutoriels) il faut encore que je réfléchisse, car je voulais garder ce site le plus simple possible sans que ça devienne un portail ou une usine à gaz.

Pas encore de billet sur le même sujet !

J’ai le plaisir, l’honneur de vous annoncer en exclusivité la mise en ligne du site php fonctions

J’ai pu finir les dernières fonctionnalités nécessaires au bon fonctionnement de base du site : le flux RSS des dernières fonctions, les commentaires des fonctions (avec la possibilité d’ajouter du code dans les commentaires), le footer et deux trois petites choses pour optimiser le référencement.

J’ai entièrement créé et développé ce site. Il est basé sur un projet interne à Awelty (la boîte pour laquelle je bosse). En effet, le premier jour j’ai dû développer une mini-bibliothèque de fonctions (php et javascript) pour l’usage exclusif de l’équipe des développeurs d’awelty (qui compte… 2 membres). Il faut donc rendre à @tonySamson ce qui appartient à Tony.

J’ai prévu d’ajouter d’autres fonctionnalités telles la navigation par catégorie, un formulaire de recherche de fonction, d’autres flux RSS (par catégorie et les dernières fonctions ayant une certaine note)… Bref, les idées ne manquent pas. D’ailleurs si tu as des suggestions ou si tu vois des bugs (mais ça j’y crois pas trop ) n’hésite pas à laisser un petit commentaire ici !

Pas encore de billet sur le même sujet !

J’avais un peu étudié les différentes solutions d’API de géolocalisation d’adresse IP il y a quelques temps. J’étais sur cette solution tout simple : iplocationtools.

Iplocationtools est une API que l’on peut appeler directement en PHP (voir le code ci-dessous). Cela crée un fichier XML contenant toutes les infos nécessaires à la géolocalisation (pays, region, ville, latitude et longitude principalement). Il ne reste plus qu’à le parser.

Code à intégrer pour appeler l’API :

function locateIp($ip){
    $d = file_get_contents("http://www.iplocationtools.com/ip_query.php?ip=$ip&output=xml"); // on charge l'api
 
    if (!$d)
        return false; // Failed to open connection
 
    $answer = new SimpleXMLElement($d);
 
    if ($answer->Status != 'OK')
        return false; // Invalid status code
 
        $country_code = $answer->CountryCode;
        $country_name = $answer->CountryName;
        $region_name = $answer->RegionName;
        $city = $answer->City;
        $zippostalcode = $answer->ZipPostalCode;
        $latitude = $answer->Latitude;
        $longitude = $answer->Longitude;
 
        //Return the data as an array
    return array('latitude' => $latitude, 'longitude' => $longitude, 'zippostalcode' => $zippostalcode, 'city' => $city, 'region_name' => $region_name, 'country_name' => $country_name, 'country_code' => $country_code, 'ip' => $ip);
}

A toi de jouer maintenant !

Pas encore de billet sur le même sujet !

Le développement de php fonctions avance à grands pas ! La sortie intergalactique du site devrait se faire dans la nuit de jeudi à vendredi. Le coeur du site fonctionne déjà (ajout de fonctions, parcours des fonctions et visionner une fonction).

Viendront aussi la possibilité de noter une fonction, de commenter les fonctions (avec ajout de code dans les commentaires) et les divers flux RSS (leurs nombres n’est pas encore arrêté). Enfin un petit coup d’url rewriting et ce sera bouclé .

A bientôt donc !

Pas encore de billet sur le même sujet !

J’ai commencé en début de semaine, la création du site phpfonctions. Mon objectif est de créer une bibliothèque de fonctions php en ligne. Bien sûr cela sera un site collaboratif, ouvert à tous les web développeurs . Il n’y aura (normalement) aucune inscription nécessaire pour participer. Un simple système de notation et de tags permettra de trier et de mieux naviguer parmi les fonctions.

Lancement d’une première version de test (sans bugs ) dans le courant de la semaine prochaine (normalement) !

Pas encore de billet sur le même sujet !

J’ai découvert il y a peu, cette solution d’import de contact via des webmail ou des réseau sociaux. OpenInviter permet donc de proposer un système d’invitation sur n’importe quel site. Beaucoup de webmails et de réseau sociaux sont disponibles : GMail, Hotmail, Yahoo Mail, Twitter, MySpace, Skyblog … (en ce moment, ça ne fonctionne pas avec Facebook).

Pour mettre en place cet outil, il faut s’inscrire sur le site d’OpenInviter et téléchager tous les fichiers nécessaires. Un exemple est même fourni avec, il ne reste plus qu’à l’adapter à ton site ! Des connaissances en PHP sont quand même nécessaires pour comprendre la logique de l’outil.

Je suis en train de le mettre en place sur un premier site (Coconews) et d’autres installations devrait suivre !

Pas encore de billet sur le même sujet !

Lorsque l’on a l’habitude de coder en php avec ses multiples fonctions natives (avec ses fonctions de date, sur les tableaux, les chaînes de caractère…), on a parfois du mal à s’y retrouver en JavaScript.

C’est de ce constat qu’est parti le projet PHP-JS. PHP-JS permet l’utilisation des fonctions natives de php en JavaScript ! Pour le moment 386 fonctions sont disponibles. Pour créer cela, ils ont simplement re-coder les fonctions php en JavaScript. On retrouve toute sorte de fonctions de l’include() (qui ajoute les balises script) à date() en passant par in_array() (pour savoir si un élément est dans un tableau).

Le pack complet de fonction est disponible en téléchargement sur le site, mais je vous recommande d’utiliser l’outil qui permet de générer un fichier js contenant uniquement les  fonctions qui seront nécessaires.

Pas encore de billet sur le même sujet !

Pour ce deuxième tutoriel sur l’ajax, je te propose un formulaire avec auto-complétion. Simplement afficher des suggestions quand l’utilisateur commence à taper dans un champ de texte. Les suggestions sont affichées grâce à Ajax qui permet d’effectuer des requêtes SQL en « arrière-plan » de la page. Toute la partie JavaScript sera faite grâce au framework JQuery.

Comme d’hab, j’ai préparé une page de démo du script : disponible ici. Et il est également possible de télécharger les fichiers sources de cette démo. Et bien sûr, tout le code présenté ici est dépouillé de toute mise en forme (libre à toi de le personnaliser après !).

Jquery : auto-complétion

Donc, pour commencer, on va préparer le code HTML nécessaire : le champ de texte sur lequel les suggestions vont être appliqué et le bloc (caché au début de la page) qui va éventuellement contenir les suggestions :

1
2
3
4
5
6
7
8
9
10
11
12

<div>
		Rechercher un pays :
		<br />
		<input type="text" size="30" value="" id="inputString" /><!--  champ texte à analyser pour les suggestions -->
</div>
 
<div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
		<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <!-- image de la fleche vers le haut -->
		<div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->
			&nbsp;
		</div>
</div>

Ensuite, dans le code javascript, on retrouve les deux fonctions nécessaires : lookup qui permet de faire l’appel ajax et fill qui permet, comme son nom l’indique, de remplir le champ avec la valeur suggerée. Après avoir défini les deux fonctions, on ajoute les « écouteurs » (qui permettent de surveiller si un événement est effectué) avec keyup (quand on appuie sur le clavier, à la remontée de la touche) et blur (quand le champ texte perd le focus).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function lookup(inputString) {
		if(inputString.length == 0) { // si le champs txte est vide
			$('#suggestions').hide(); // on cache les suggestions
		} else { // sinon
			$.post("ajax.php", {queryString: ""+inputString+""}, function(data){ // on envoit la valeur du champ texte dans la variable post queryString au fichier ajax.php
				if(data.length >0) {
					$('#suggestions').show(); // si il y a un retour, on affiche la liste
					$('#autoSuggestionsList').html(data); // et on remplit la liste des données
				}
			});
		}
}
 
function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
	$('#inputString').val(thisValue);
	setTimeout("$('#suggestions').hide();", 200);
}
 
$(document).ready( function () { // lorsque la page est entierement chargée
	$("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
		lookup($(this).val()) 
	});
 
	$("input#inputString").blur( function() { // si le champs texte perd le focus
		fill() 
	});
});

Enfin, il ne reste plus qu’à développer le php qui sera exécuté grâce à l’appel ajax. Dans ce script, on  récupère la valeur passée (ce qui est saisi dans le champ texte) et il n’y a plus qu’à faire une requête SQL dans la base de données et d’afficher les résultats sous forme de liste (avec en prime un petit onClick=fill() sur chaque élément de liste permettant de remplir le champ texte.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

< ?php	
 
	$link = mysql_connect("hote de la base", "login", "pass") or die("Impossible de se connecter : " . mysql_error());
	mysql_select_db("db278690514");
 
		// si une variable queryString a été posté
               if(isset($_POST['queryString'])) {
 
			// si la longueur du contenu de la variable est superieur à 0			
			if(strlen($queryString) >0) {
 
				// requete sql à personnaliser pour correspondre à votre base de données
				$result = mysql_query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");
				if($result) {
 
					// on parcourt les resultats
					while ($pays = mysql_fetch_object($result)) {
						// on affiche les resultats dans un element de liste en ajoutant 
                                                // la fonction fill sur l'evenenement onClick
		         			echo '<li onClick="fill(\''.$pays->value.'\');">'.$pays->value.'</li>';
	         		        }
				} else {
					echo 'Il y a une probleme avec la requete sql.';
				}
			} 
		} else {
			echo 'Il ne devrait pas avoir un accès direct à ce script !!!';
		}
?>

Tutoriel basé sur celui du blog nodstrum : http://nodstrum.com/2007/09/19/autocompleter/

Pas encore de billet sur le même sujet !

Pour commencer la semaine, une belle liste de mementos pour tout ce qui concerne la création de site internet :

• Les couleurs web
  
• Aide-mémoire html
  
  
• Mémento CSS
  
  
• Aide-mémoire PHP
  
• Aide-mémoire en JQuery (que j’ai personnellement imprimé et scotché à mon bureau )
  

Il y a là de quoi bien redécorer son bureau, il y en a de toutes les couleurs !

Pas encore de billet sur le même sujet !

Pour ce premier tutorial AJAX, je propose un simple formulaire de connexion sans rafraichissement de la page. Ca permettra également d’introduire un peu de php sur le blog.

Il est possible d’essayer une démo (login : test, mot de passe : ajax) ou de télécharger la source de cette démo (fichier php et mise en forme css inclus). Tout le code affiché ici sera du code dépouillé de tout mise en forme.

Pour commencer, on va préparer le formulaire HTML servant à la connexion. Deux champs sont nécessaires : nom d’utilsateur et mot de passe. Il ne faut pas oublier de donner un id (ici « connexionForm ») au formulaire pour la gestion des évènements avec JQuery. J’ai également ajouté un span vide qui contiendra éventuellement un message d’erreur si le login ou le mot de passe n’est pas bon.

1
2
3
4
5
6
7
8
9
10
11

<form name="connexionForm" id="connexionForm" action="#"><!-- début du formulaire de connexion -->   
	<span id="erreur"></span><!-- span qui contiendra les éventuels messages d'erreur -->
 
	<label for="login">Nom d'utilisateur :</label>
        <input type="text" name="login" id="login" /><!-- champ pour le login -->
 
	<label for="pass">Mot de passe :</label>
	<input type="password" name="pass" id="pass" /><!-- champ pour le mot de passe -->
 
        <input type="submit" value="Je me connecte" class="bouton" /><!-- bouton de connexion -->
</form><!-- fin du formulaire -->

On passe ensuite à la partie JQuery. On commence par charger le framework dans le fichier html (entre les balises <head> et </head>).

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

A nous de jouer maintenant. L’appel en Ajax ne se fera qu’à la soumission du formulaire (avec l’événement « submit() », ligne 2).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready( function () { 
	$("#connexionForm").submit( function() {	// à la soumission du formulaire						 
		$.ajax({ // fonction permettant de faire de l'ajax
		   type: "POST", // methode de transmission des données au fichier php
		   url: "login.php", // url du fichier php
		   data: "login="+$("#login").val()+"&pass="+$("#pass").val(), // données à transmettre
		   success: function(msg){ // si l'appel a bien fonctionné
				if(msg==1) // si la connexion en php a fonctionnée
				{
					$("div#connexion").html("<span id=\"confirmMsg\">Vous &ecirc;tes maintenant connect&eacute;.</span>");
					// on désactive l'affichage du formulaire et on affiche un message de bienvenue à la place
				}
				else // si la connexion en php n'a pas fonctionnée
				{
					$("span#erreur").html("<img src=\"bomb.png\" style=\"float:left;\" />&nbsp;Erreur lors de la connexion, veuillez v&eacute;rifier votre login et votre mot de passe.");
					// on affiche un message d'erreur dans le span prévu à cet effet
				}
		   }
		});
		return false; // permet de rester sur la même page à la soumission du formulaire
	});
});

Enfin, il ne reste plus qu’à créer le fichier php (login.php) permettant de tester les paramètres de connexion en testant dans la base de données des membres, si le login et le mot de passe correspondent (ce code est ultra-simplifié, il n’est pas forcément très sécurisé ). Si la connexion est validée, on créé un cookie (que l’on pourra tester par la suite avec la fonction « isset($_COOKIE[id]) » ).
Contenu du fichier login.php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// connexion avec la base de données
$link = mysql_connect("localhost", "root", "") or die("Impossible de se connecter : " . mysql_error());
mysql_select_db("nomDeMaBase");
 
// on exécute maintenant la requete sql pour tester si les parametres de connexion sont ok
$result = mysql_query("SELECT login, pass, id FROM membres WHERE login = '$_POST[login]' AND pass = '$_POST[pass]'");
$membre = mysql_fetch_assoc($result);
 
if(($_POST[login]==$membre[login])&&($_POST[pass]==$membre[pass]))
{
	setcookie("id",$membre[id]); // genere un cookie contenant l'id du membre
	setcookie("login",$membre[login]); // genere un cookie contenant le login du membre		
	echo "1"; // on 'retourne' la valeur 1 au javascript si la connexion est bonne
}
else 
{
	echo "0"; // on 'retourne' la valeur 0 au javascript si la connexion n'est pas bonne
}

C’est tout pour le premier tutorial AJAX/JQuery/PHP. Cela permet un premier contact avec AJAX qui peut être facilement mis en place grâce à JQuery (on économise beaucoup de lignes de codes par rapport au « JavaScript normal »…).

Pas encore de billet sur le même sujet !

Dans les tuyaux depuis deux semaines, la création d’un site permettant de gérer sa filmothèque en ligne. Sur phpMyMovies (nom totalement provisoire, je suis pas super fan de ce nom…) tu pourras créer ta filmothèque, ajouter des films simplement (avec les champs pré-remplis grâce à une belle base de données de films), gérer ta filmothèque (options de classements et tris), partager ta filmthèque avec la création d’une page publique pour chaque membre et voir les suggestions en fonction de tes gouts!

Tout ça n’en est qu’au tout début, j’ai fait une première maquette (dont tu as un aperçu ci-dessus) et commencé parallèlement le développement (connexion, ajout de film, auto-complétion). J’espère pouvoir proposer une première version (de test) en ligne bientôt.

Pas encore de billet sur le même sujet !