Validation de présence en cliquant sur des photos
Bonjour à tous,
je cherche actuellement à mettre en place un système de validation de présence simplifié pour les utilisateurs.
Pour cela j'aimerai qu'à partir d'icones ou photos , l'utilisateur n'ai plus qu'à cliquer sur sa photo et valider pour dire qu'il sera présent.
Tout cela pour éviter un long formulaire
J'ai vaguement mis cela en place : http://www.cdbf.fr/ConvocationsU113.php
Mais je trouve pas ça très simple et beau.
Je ne sais pas trop comment le faire.
Quelq'un aurait-il une piste ?
Merci d'avance.
16 réponses
salut
ton URL n'est plus valide
si tu as une image ou une autre url qui pourrais nous montrer un aperçu ce serai bien
Okay
donc en gros que l'utilisateur n'est plus à cliquer sur le bouton " Présent " pour valider ça présence?
Oui voila, en gros si tu veux j'ai les photos en bleu, vert ou rouge.
J'ai envie que quand le joueur clique ça change de couleur et sa le reste quelque soit la personne qui va sur le site.
Après seul souci, j'ai peur que nimporte qui clique sur nimporte qu'elle photo et du coup les informations seraient éronné.
Mais en tout cas j'aimerai simplifié l'utilisation aux utilisateurs.
vu que tu utilises bootstrap je me dis que ce serait mieux que tu mettes ça dans un tableau
je fais des tests et je te balance ce que j'ai fait
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.users{
display: flex;
flex-direction: row;
align-content: space-between;
}
.users img{
margin: 0 5px;
}
</style>
</head>
<body>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-lg-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="center">Convocations U11 3</h2>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Joueurs</th>
<th>Date</th>
<th>Validation</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4>Nouchi35</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-danger">Absent</button>
<button type="button" class="btn btn-success">Présent</button>
</div>
</th>
</tr>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4>James R.</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-danger">Absent</button>
<button type="button" class="btn btn-success">Présent</button>
</div>
</th>
</tr>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4>Leonel M.</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-danger">Absent</button>
<button type="button" class="btn btn-success">Présent</button>
</div>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
tu me dis si c'est un peu plus simple comme ça et si ça te va.
Bon apres tu va devoir mettre de l'ajax ou ta requête PHP de validation pour que ça fonctionne en supprimant les 2 boutons et en remplaçant par celui dont l'utilisateur aura cliqué
Ah génial l'idée !
juste j'aimerai que quand l'utiisateur coche présent sa photo change en vert tout seul.
Parceque jusqu'a maintenant je le faisais manuellement :$
As-tu une idée ?
Merci d'avance.
Non enfaite si tu veux j'ai les 2 photos vert et bleu et je changeais la source de l'image quand ils confirmaient.
Mais du coup j'aimerai qu'au lieu que ce soit moi et bien dès qu'il clique sur présent et bient l'image "Nouchi-vert.jpg" remplace l'image "Nouchi-bleu.jpg" par exemple.
Un peu comme quand tu as sur des sites " célib - en couple" à cocher et lorsque tu coche ton statut change tout seul.
Tu vois ce que je veux dire ?
Enfaite par exemple sur youtube quand tu mets j'aime ça rajoute 1 j'aime.
Par exemple y'a 250 j'aime et tu clique sur j'aime ça met automatiquement 251.
Bah j'aimerai que ça face pareil avec les images.
Si tu mets présent l'image devient vert et si tu mets absent l'image devient rouge.
En gros ça remplace <img src="Nouchi bleu.jpg"> par <img src="Nouchi vert.jpg">.
Sa je le faisais manuellement mais j'aimerai que ça devienne automatique
Bonjour.
Enfaite par exemple sur youtube quand tu mets j'aime ça rajoute 1 j'aime.
Tu pourrais par exemple justement te baser sur Tutoriel Vidéo PHP » Like / Dislike.