Blog of ChristoPHPe !

[JavaScript] Note à étoiles comme dans YouTube

29 octobre 2008 à 13:41, par Christophe

Bonjour !

Je me rappelle il y a pas mal de temps que je chercher un système de note à étoiles un peu comme YouTube par exemple… Et je n’ai jamais trouvé quelque chose de convenable et simple…

Eh oui, une note à 5 étoiles, voilà l’exemple ici…

Et voilà le code :

Voir le Code JAVASCRIPT

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Note &agrave; &eacute;toile</title>
<script language="javascript" type="text/javascript">
var comment = new Array('Bidon !', 'Nul !', 'Bof...', 'Pas mal !', 'Génial !');
function reset_stars(){
	for(i=1;i<=5;i++){
		document.getElementById('star'+i).src = './images/star.png';
	}
	document.getElementById('comment').innerHTML = '&nbsp;';
}
function reset_comments(){
	document.getElementById('comment').innerHTML = '&nbsp;';
}
 
function star(id){
	reset_stars()
	for(i=1;i<=id;i++){
		document.getElementById('star'+i).src = './images/star_on.png';
		document.getElementById('comment').innerHTML = comment[id-1];
	}
}
 
function rate(id){
	reset_comments();
	document.getElementById('stars').style.width = '130px';
	document.getElementById('stars').innerHTML = 'Merci d\'avoir noté !<br />';
	alert('Ici, vous envoyez une requête AJAX qui modifie la note de la chose en question...\nVous avez noté '+id+' !');
	// La note est la variable " id " transmise à cette fonction là...
}
</script>
</head>
 
<body>
<div id="stars" style="width:95px; height:20px;"><span onMouseOut="reset_stars();">
<img src="./images/star.png" alt="" onMouseOver="star(1);" id="star1" onClick="rate(1);" /><img src="./images/star.png" alt="" onMouseOver="star(2);" id="star2" onClick="rate(2);" /><img src="./images/star.png" alt="" onMouseOver="star(3);" id="star3" onClick="rate(3);" /><img src="./images/star.png" alt="" onMouseOver="star(4);" id="star4" onClick="rate(4);" /><img src="./images/star.png" alt="" onMouseOver="star(5);" id="star5" onClick="rate(5);" /></span>
</div>
<div id="comment">&nbsp;</div>
<div id="rate"></div>
 
</body>
</html>

Mais il y a 2 images :une étoile grise, et une étoile rouge lors du passage de la souris… (cliquez pour la télécharger) :

Et voilà !
Il ne vous reste plus qu’a créer une requête AJAX (il y a beaucoup beaucoup de tutos sur Internet sur ça ) en direction d’un fichier PHP qui modifie la moyenne de l’objet en question (Dans la fonction rate() de JavaScript, à la place de mon alert() que j’ai mis pour tester… )

Posté dans Javascript | 3 Commentaires »

[PHP] Simple Calendrier mensuel

24 octobre 2008 à 20:41, par Christophe

Bonsoir !

Voilà quelque chose de bien interressant, le code est assez simple à comprendre, mais… j’avoue pas très facile, servez-vous de ça !

Voilà l’aperçu en image :

(Cliquez sur l’image pour voir le calendrier marcher en réel !)

Ce calendrier est doté de deux langues : Français et Anglais !
Attention ! Il ne marche Exclusivement sous PHP5 !

Bon, maintenant, voilà le code complet est fonctionnel (sous PHP5 hein ^^) :

Voir le Code 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calendrier</title>
<style type="text/css">
.calendar tr, td { border:#4A4A4A 1px solid; text-align:center; }
.calendar td { width:25px; }
.calendar a img { border:0px; }
.calendar .caption,.navigation a:link,a:visited { font-weight:bold; }
.calendar .caption { border-left:0px; border-right:0px; }
.calendar .head .border_right { border-right:0px; }
.calendar .head .border_left { border-left:0px; }
.caption { text-align:center; }
.calendar .navigation a:link,a:visited { color:#333333; }
.calendar .head { background-color:#E1E1E1; }
.calendar .days_list { background-color:#EEEEEE; }
.calendar .days { background-color:#F9F9F9; }
</style>
</head>
 
<body>
<?php
// french ; english
$language_selection = 'french';
 
### French
$calendar_txt['french']['mois'] = array('', 'Janvier', 'F&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;cembre');
$calendar_txt['french']['jours'] = array('Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche');
$calendar_txt['french']['voc'] = array('Ann&eacute;e pr&eacute;c&eacute;dente', 'Mois pr&eacute;c&eacute;dent', 'Mois suivant', 'Ann&eacute;e suivante');
### English
$calendar_txt['english']['mois'] = array('', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October','November', 'December');
$calendar_txt['english']['jours'] = array('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
$calendar_txt['english']['voc'] = array('Last year', 'Last month', 'Next month', 'Next year');
 
 
// Récupére la date par GET ou date courante
$jourActuel = (int)( $_GET['jour'] ? $_GET['jour'] : date('d') );
$jourActuel = (int)( $jourActuel < 1902 ? date('d') : $jourActuel );
$jourActuel = (int)( $jourActuel > 2036 ? date('d') : $jourActuel );
$moisActuel = (int)( $_GET['mois'] ? $_GET['mois'] : date('m') );
$anneeActuelle = (int)( $_GET['annee'] ? $_GET['annee'] : date('Y') );
 
$nomMoisActuel = $calendar_txt[$language_selection]['mois'][$moisActuel];
$dateActuelle = strtotime( sprintf('%s-%s-%s', $anneeActuelle, $moisActuel, $jourActuel) );
 
// Récupére le nombre de jours dans le mois
$nbJoursMois = date('t', $dateActuelle);
 
// Menu de navigation annee/mois
$nextAnnee = date('Y', strtotime('+1 year', $dateActuelle) ); // Année suivante
$prevAnnee = date('Y', strtotime('-1 year', $dateActuelle) ); // Année précédente
$nextMois = date('m', strtotime('+1 month', $dateActuelle) ); // Mois suivant
$prevMois = date('m', strtotime('-1 month', $dateActuelle) ); // Mois précédent
 
// Affichage
$numJourSemaine = 1;
$jour = 1;
$base_jours = $calendar_txt[$language_selection]['jours'];
$base_mois = $calendar_txt[$language_selection]['mois'];
$base_voc = $calendar_txt[$language_selection]['voc'];
 
// Génération du tableau
echo '<table class="calendar" cellpadding="3" cellspacing="0">
<tr class="head"><td colspan="1" class="navigation border_right">
<a href="?annee='.$prevAnnee.'&amp;mois='.$moisActuel.'" title="'.$base_voc[0].'"><img src="./images/last_year.png" alt="&lt;&lt;"></a><br /> 
<a href="?annee='.$anneeActuelle.'&amp;mois='.$prevMois.'" title="'.$base_voc[1].'"><img src="./images/last_month.png" alt="&lt;"></a></td>
<td colspan="5" class="caption">'.$nomMoisActuel.'&nbsp;'.$anneeActuelle.'</td>
<td colspan="1" class="navigation border_left">
<a href="?annee='.$nextAnnee.'&amp;mois='.$moisActuel.'" title="'.$base_voc[3].'"><img src="./images/next_year.png" alt="&gt;&gt;"></a><br />
<a href="?annee='.$anneeActuelle.'&amp;mois='.$nextMois.'" title="'.$base_voc[2].'"><img src="./images/next_month.png" alt="&gt;"></a>
 
</td></tr>
<tr class="days_list"><td title="'.$base_jours[0].'">'.$base_jours[0][0].'</td><td title="'.$base_jours[1].'">'.$base_jours[1][0].'</td><td title="'.$base_jours[2].'">'.$base_jours[2][0].'</td><td title="'.$base_jours[3].'">'.$base_jours[3][0].'</td><td title="'.$base_jours[4].'">'.$base_jours[4][0].'</td><td title="'.$base_jours[5].'">'.$base_jours[5][0].'</td><td title="'.$base_jours[6].'">'.$base_jours[6][0].'</td></tr><tr class="days">';
 
// Affichage des jours
while( $jour <= $nbJoursMois ){
    // Date du jour traité
    $dateTraitee = sprintf("%d-%d-%d", $anneeActuelle, $moisActuel, $jour);
    $numJourSemaineDateTraitee = (int)date("N", strtotime($dateTraitee) );
    // Afficher le jour à son emplacement par rapport au jour de la semaine
    if( $numJourSemaineDateTraitee == $numJourSemaine ){
        // Couleur de fond du jour actuel
        if( $jour == $jourActuel && $moisActuel == date('m') && $anneeActuelle == date('Y') ){
			$couleurFond = ' background-color:yellow; font-weight:bold;';
		} else {
			$couleurFond = '';
		}
 
		if( $language_selection == 'french' ){
			$complete_date = $base_jours[$numJourSemaineDateTraitee-1].' '.$jour.' '.$base_mois[$moisActuel].' '.$anneeActuelle;
		} elseif( $language_selection == 'english' ){
			$complete_date = $base_jours[$numJourSemaineDateTraitee-1].', '.$base_mois[$moisActuel].' '.$jour.date('S', $jour).' '.$anneeActuelle;
		} else {
			$complete_date = $base_jours[$numJourSemaineDateTraitee-1].' '.$jour.' '.$base_mois[$moisActuel].' '.$anneeActuelle;
		}
 
        // Afficher le jour à son empalcement
        echo '<td style="'.$couleurFond.'" onclick="alert(\''.$complete_date.'\')" title="'.$complete_date.'">'.$jour.'</td>'; 
 
        $jour++; // Passer au jour suivant du mois
    } else {
		echo '<td>&nbsp;</td>'; // Emplacement vide
	}
    // Passer au jour suivant de la semaine
    $numJourSemaine++;
 
    if ( $numJourSemaine > 7 ) { // Au-delà de Dimanche 
        echo '</tr><tr class="days">';
        $numJourSemaine = 1; // Retour au Lundi
    }
}
 
// Complession des dernières cellules 
$fin_tableau = 7-($numJourSemaine-1);
if($fin_tableau < 7) for($i=1;$i<=$fin_tableau;$i++) echo '<td>&nbsp;</td>';
 
echo '</tr></table>'; 
?>
</body>
</html>