Dans ce tuto AJAX en vidéo, vous apprendrez à réaliser un système de vote à la manière du site Youtube.

Nous créerons d'abord une base de données afin de stocker du contenu, notamment des liens vers des vidéos (pour l'exemple), ainsi que les votes des visiteurs.

Nous verrons comment afficher la vidéo demandée par l'utilisateur et nous créerons un système de vote façon Youtube "j'aime" ou "j'aime pas".

Nous afficherons ensuite les résultats au dessous de la vidéo avec deux barres de pourcentage de votes, pour cela nous ferons un calcul de maths très savant (niveau CM2) et nous afficherons également le nombre total de votes "pour" et "contre".

Nous ferons bien sur fonctionner l'application d'abord en PHP, avec rechargement de la page, et nous verrons ensuite comment permettre à l'application de fonctionner en AJAX avec Jquery, et comment récupérer des variables du PHP au Javascript grâce au format JSON. L'avantage de l'AJAX est que l'utilisateur pourra continuer de regarder la vidéo tout en votant sans qu'il y ait de coupure de la vidéo. Nous implémenterons également quelques petits effets Jquery sympathiques pour le confort de l'utilisateur.

Bon tuto!

Jetez un oeil à ces autres tuto Php, jQuery, Ajax

Réaliser un panier d'achat de A à ZRéaliser un panier d'achat…
Dans ce tuto PHP, en vidéo, vous allez apprendre à réaliser…

Afficher la différence entre 2 dates en PHPAfficher la différence entre…
Dans ce tuto PHP en vidéo, vous apprendrez à afficher la différence…

Création d'un formulaire web 2.0Création d'un formulaire…
Dans ce tuto jQuery nous allons apprendre à nous servir de…

PHP: envoyer des emails avec SwiftmailerPHP: envoyer des emails avec…
Dans ce tuto PHP en vidéo, nous verrons comment se servir de…

Espace membre en PHP/MySQLEspace membre en PHP/MySQL
Dans ce tuto PHP/MySQL en vidéo, nous verrons comment implémenter…

PHP POO cas pratique pour débutant, formulaire de contactPHP POO cas pratique pour…
Dans ce tuto PHP en vidéo pour débutants en POO, nous verrons…

Upload et galerie d'images avec PHP et MySQLUpload et galerie d'images…
Dans ce tuto PHP en vidéo, vous apprendrez à réaliser un…

Transmission de données Flash vers une base MySQL via PHPTransmission de données Flash…
Dans ce tuto Flash PHP, vous allez apprendre à transmettre…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Php, jQuery, Ajax de 47 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

simpledev , formateur certifié



En savoir plus sur simpledev


Témoignage des clients de simpledev

Très bon formateur et surtout une incroyable diversité de tuto dans le domaine du développement de site web. J'ai commencé par les tutos concernant le html 5 et CSS3. Ces derniers proposent des sujets très utiles pour dynamiser mon site

Excellents tutos, très bien expliqués. Les tutos de Simpledev sont très utiles. L'une des choses qui fait la richesses des tutos est le "mélange des langages de programmation". On peut ainsi réaliser des systèmes complexes, avec plusieurs langages !

Bref j'ai pas besoin de préciser très bon formateur :)

Excellent Formateur, 5/5 tout y-est: application, contenu, bon son, pédagogie, bonne image, j'ai beaucoup appris en 2 jours de tuto. Parmi les quelques tutoriels que j'ai vu c'est celui qui se démarque. Simpledev. Bravo à lui j'en redemande.

Quoi dire d'autre ? merci pour tout ;).

Lire les autres témoignages

 

D'autres tuto de simpledev

Système de commentaire en AJAX avec PHP et JquerySystème de commentaire en AJAX avec PHP et Jquery
Dans ce tuto AJAX en vidéo, nous verrons comment réaliser un système de commentaire…

Vérifier la disponibilité d'un pseudo en AJAXVérifier la disponibilité d'un pseudo en AJAX
Dans ce tuto AJAX en vidéo, nous verrons comment vérifier la disponibilité d'un pseudo…

Formulaire de contact AJAX avec PHP et JqueryFormulaire de contact AJAX avec PHP et Jquery
Dans ce tuto AJAX en vidéo, nous réaliserons un formulaire de contact. Dans un premier…

Effacer des données grâce à AJAX et JqueryEffacer des données grâce à AJAX et Jquery
Dans ce tuto Codeigniter en vidéo, nous verrons comment effacer des données issues…

voir tous les tuto de simpledev

Notes attribuées par les utilisateurs (1 vote)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (11)

par exootia
(n'a pas acheté ce tuto - 06 octobre 2011)

" @simpledev
ok thanks =)
En fait c'est pour intégrer ça sur un template WordPress que je fais, je pense que ca devrait le faire mais peut-être que jte dirais si j'ai un petit soucis :P
M'enfin c'est pas pour toute de suite, pas trop le temps pour les projets perso en ce moment ^^ "

par simpledev
(auteur de ce tuto - 05 octobre 2011)

" @exootia
Si jamais y'a un souci pour faire ce que tu souhaites, tu peux toujours me contacter, c'est vraiment pas ce qu'il y'a de plus compliqué à mettre en oeuvre:) "

par exootia
(n'a pas acheté ce tuto - 05 octobre 2011)

" @simpledev :
ok merci ! Ca devrait fonctionner pour ce que je veux alors :) "

par simpledev
(auteur de ce tuto - 05 octobre 2011)

" @exootia
Bonjour,
En fait on peut faire sur une seul page un vote pour le nombre d'élément que l'on veut.
Je montre dans ce tutoriel comment voter pour un élément en fonction de son id récupérer en base de donnée. De là il est possible de récupérer l'id d'un deuxième élément afin de voter pour celui-ci, et si jamais vous voulez interdire le vote pour le second élément si l'utilisateur a déjà voté pour le premier, il suffit de faire une simple vérification en base de données.
Voilà, j'espère avoir répondu à votre question:) "

par exootia
(n'a pas acheté ce tuto - 05 octobre 2011)

" Hello!
En fait j'ai besoin de faire un systeme de vote, du coup j'aurais une petite question afin de savoir si ce tuto correspond à ce dont j'ai besoin.

J'aurais sur une page deux éléments, et l'utilisateur vote pour l'un ou l'autre. C'est possible avec ce tuto ou il limite le vote a un élément par page ? (comme sur youtube...) "

par simpledev
(auteur de ce tuto - 27 mars 2011)

" @osirisliberal

Salut,

Ben si tu veux autoriser le vote uniquement si le membre n'a pas encore voté, il suffit de vérifier si le membre en question a déjà voté ou non.
Pour cela tu rajoutes un champ membre_id dans ta table de vote qui prendra la valeur de l'id du membre qui a voté. Ensuite tu fais les vérifications avant d'afficher ton système de vote et si le membre n'a pas encore voté, tu l'affiches, sinon tu l'affiche pas.

Voilà a+ "

par osirisliberal
(a acheté ce tuto - 25 mars 2011)

" Bonjour :) Clarté et fluidité au top :)
Je pense me jeter sur celui avec l'effet de reflet CSS3 des la semaine prochaine !

J'aimerai solliciter votre bienveillance pour vous demander comment il est possible de disposer d'un système de vote unique en suivant la même trame, avec un affichage sur l'index uniquement si la video en question n'a pas été voté, sachant que le système de vote est intégré à une zone profil membre codée grâce à vos conseils avisés :)
J'espère ne pas trop en demander :/


Merci encore pour la qualité de vos tutos a très bientot
"

par simpledev
(auteur de ce tuto - 12 janvier 2011)

" Pour laisser uniquement les membres connectés poster un message, c'est simple, tu vérifie si la variable de session existe et si oui tu affiches le formulaire, sinon tu affiche un message pour dire qu'il faut être connecté avec un lien vers la page de connexion.
Voilà a+ "

par playjessà voté :
(a acheté ce tuto - 12 janvier 2011)

" Déjà une réponse ^^ Salut simpledev oui je l'avais déjà vu mais comme j'ai suivi votre Tuto Créé un espace membre , je vois que sur celui la il y a pas besoin d'être connecté pour poster un commentaire donc mon espace membre me sert a rien j'imagine vu qu'il y a pas besoin de s'inscrire pour poster ^^ a moins que j'arrive a le modifié mais comme je débute plus facile a dire qu'a faire ^^
"

par simpledev
(auteur de ce tuto - 12 janvier 2011)

" Salut,
Merci pour ta bonne note, si tu veux un tuto sur un système de commentaire en AJAX, j'avais fais celui-là : http://fr.tuto.com/ajax_jquery/systeme-de-commentaire-en-ajax-avec-php-et-jquery-ajax-jquery,15172.html#tab_description
A bientôt pour d'autres tutos :) "

par playjessà voté :
(a acheté ce tuto - 12 janvier 2011)

" Merci pour le Tuto le système de vote sans recharger la page est excellent , le tout bien sur expliqué très clairement , a quand un système de commentaire a la youtube ^^
En tout cas deuxième Tuto que j'achète chez vous et encore une fois pas déçus.
A + sur un prochain Tuto peut-être ;) "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Php, jQuery, Ajax d’une durée de 47 minutes a été acheté 88 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 1 décembre 2010 par simpledev, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,4/5 pour l’ensemble de ses vidéos.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !