J-Notify(message d'erreur)

Résolu
TatsuSheva Messages postés 21 Date d'inscription   Statut Membre Dernière intervention   -  
TatsuSheva Messages postés 21 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je suis un etudiant en informatique et je suis sur un projet. Je voudrai afficher un message d'erreur apres une tentative de connexion echoué ( faux username ou faux password). Et apres mes recherches j'a trouve que je peux utiliser J-Notify pour afficher un message d'erreur convivial. Mais je ne sais pas comment l'introduire dans mes fichiers HTML. J'ai essaye mais il ne s'affiche pas.

Voici les resultats de mon projet:


Et voici mes codes:

INDEX.PHP


<?php
session_start();
include ('election.php');?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>

<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jnotify.js"></script>


</head>

<body>
<?php if(isset($_SESSION['errors'])): ?>
<?=implode($_SESSION['errors']); ?>
<?php endif; ?>
<nav><a href="#" class="focus">Log In</a> | <a href="register.html">Register</a></nav>
<form name="form1" method="post" action="validation.php">
<h2>Log In</h2>
<input name="log" type="text" class="text-field" placeholder="Username" id="login" />
<input name="password" type="password" class="text-field" id="passwd" placeholder="Password" />
<div class="styled-select">
<select name="type" id="type">
<option>Faites votre choix</option>
<option value="administrateur">administrateur</option>
<option value="Etudiant">Etudiant</option>
<option value="Enseignant">Enseignant</option>
</select>
</div>
<input name="btn" type="submit" class="button" id="btn" value="Log In" />

</form>
<?php unset($_SESSION['errors']); ?>

</body>
</html>

VALIDATION.PHP


<?php include ('election.php');
$heure=date("H:i");
$heuredep="08:00";
$heuredest="19:00";
$login=$_POST['log'];
$mdp=$_POST['password'];
$type=$_POST['type'];?>
<link type="text/css" href="css/jquery.jnotify.css" rel="stylesheet" media="all" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jnotify.js"></script>
<?php
if(empty($login) OR empty($mdp)){header('location:index.php');}else{

$requete="SELECT * FROM utilisateur WHERE Matricule_User='$login' AND Password_User='$mdp' AND Type_User='$type'";
$resultat=mysql_query($requete);
$trouver=mysql_num_rows($resultat);
if($trouver>0)
{

?>

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url();
background-color: #0033FF;
}
body,td,th {
color: #FFFFFF;
}
.style1 {color: #FFFFFF}
-->
</style></head>
<javasc
<body>
<?php
if($type=='administrateur')
{
header('location:admin.php');
}

elseif($type=='Faites votre choix')
{
header('location:index.php');
}

elseif($type=='Etudiant')
{
?>
<form id="form1" name="form1" method="post" action="">
<table width="400" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td><a href="vote.php?login=<?php echo $login; ?>" class="style1">Vote</a><a href="result.php" class="style1">
<input name="login" type="hidden" id="login" value="<?php echo $login; ?>" />
<label></label>
</a></td>
</tr>
<tr>
<td><a href="result.php" class="style1">Résultat

</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
<?php

}
elseif($type=='Enseignant')
{
?>
<form id="form1" name="form1" method="post" action="">
<table width="400" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td><a href="vote.php?login=<?php echo $login; ?>" class="style1">Vote</a><a href="result.php" class="style1">
<input name="login" type="hidden" id="login" value="<?php echo $login; ?>" />
<label></label>
</a></td>
</tr>
<tr>
<td><a href="result.php" class="style1">Résultat

</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
<?php

}

?>

</body>
</html>
<?php }


else
{
session_start();
header('location:index.php');
$errors=[];
$errors['j']=$notify.click(function () {
$.jnotify("hello World");
});
$_SESSION['errors']=$errors;
$_SESSION['inputs']=$_POST;
}
}
?>


Ou dois-je mettre mes codes pour le message d'erreur, je suis vraiment bloqué ...

Merci.
A voir également:

3 réponses

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Je pense que le mieux serait de passer par de l' AJAX pour valider ta connexion plutôt que de le faire en SUBMIT.
Cela te permettrait donc, de faire apparaitre via Javascript, le message d'erreur en cas d'erreur de connexion.

NB: Pour faire de l'ajax je t'invite à utiliser JQUERY.

Par exemple :


<link type="text/css" href="css/jquery.jnotify.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jnotify.js"></script>


<div id="zone_afichage">
	<form name="form1" method="post" action="validation.php">
		<h2>Log In</h2>
		<input name="log" type="text" class="text-field" placeholder="Username" id="login" />
		<input name="password" type="password" class="text-field" id="passwd" placeholder="Password" />
		<div class="styled-select">
			<select name="type" id="type">
				<option>Faites votre choix</option>
				<option value="administrateur">administrateur</option>
				<option value="Etudiant">Etudiant</option>
				<option value="Enseignant">Enseignant</option>
			</select>
		</div>
		<input name="btn" type="submit" class="button" id="btn" value="Log In" />
	 
	</form>
</div>
<script type="text/javascript">

function connexion(){
 //chemin vers ton script PHP ajax
 var urlAjx = "ajax_validation.php";

 // récupération des infos saisies dans tes champs input :
 var user = $("#login").val();
 var password = $("#passwd").val();
 var type = $("#type").val();

 // Si tous les champs sont renseignés
 if(typeof(type)!='undefined' && type!='' && user!='' && password!=''){

 // appel via ajax de ton code d'authentification:
  $.ajax({ 
      type: "POST",
      url:urlAjx,
      data: {user:user,password:password,type:type},
      async: true,
      dataType: "json",
      success: function(reponse){
        // ici tu traites le retour de ton code php
         if(reponse.error ==true){
					 var msg = reponse.error_message;
					  jNotify( msg,
                     {
                      autoHide : true, // added in v2.0
                      TimeShown : 3000,
                      HorizontalPosition : 'center',
                      onCompleted : function(){ // added in v2.0
                        alert('jNofity is completed !');
                       }
                     }
                   ); // close jNotify
				 }else{
					 // Si pas d'erreur....
					  var redirection = reponse.redirection;
            if(redirection !=false){
              window.location = redirection;
            }else{
             //pas de redirection.. on affiche le contenu de reponse.resultat
                var resultat = reponse.resultat;
								// par exemple dans la zone d'affichage à la place du formulaire de connexion
								 $("#zone_afichage").html(resultat);
            }						
				 }
        
       },
      error:function(jqXHR, textStatus){
        var error = formatErrorMessage(jqXHR, textStatus);
          alert('error :' + error);
        }
     }); 

 }    
 


}
 
 //Format le message d'erreur ajax :
 function formatErrorMessage(jqXHR, exception) {
    if (jqXHR.status === 0) {
        return ('Not connected.\nPlease verify your network connection.');
    } else if (jqXHR.status == 404) {
        return ('The requested page not found. [404]');
    } else if (jqXHR.status == 500) {
        return ('Internal Server Error [500].');
    } else if (exception === 'parsererror') {
        return ('Requested JSON parse failed.');
    } else if (exception === 'timeout') {
        return ('Time out error.');
    } else if (exception === 'abort') {
        return ('Ajax request aborted.');
    } else {
        return ('Uncaught Error.\n' + jqXHR.responseText);
    }
}


</script>


Maintenant la partie PHP :
<?php

// variable qui sera retournée par le script :
$retour = array();

//récupération des variables envoyées par le script :
$login = !empty($_POST['user']) ? $_POST['user'] : NULL;
$mdp = !empty($_POST['password']) ? $_POST['password'] : NULL;
$type = !empty($_POST['type']) ? $_POST['type'] : NULL
//Autres variables :
$heure=date("H:i");
$heuredep="08:00";
$heuredest="19:00";

// Traitement :
if($user && $password){

$requete="SELECT * 
             FROM utilisateur 
	     WHERE Matricule_User='$login' 
             AND Password_User='$mdp' 
             AND Type_User='$type'";
$resultat=mysql_query($requete) or die("Erreur dans la requête !");
$trouver=mysql_num_rows($resultat);

if($trouver>0){
	$retour['redirection'] = false;
	$retour['error'] = false;
	$retour['resultat'] = "";
	switch($type){
	  case "administrateur":
		$retour['redirection'] = "admin.php";
	   break;
	  case "Etudiant":
	   $retour['resultat'] = "<form id='form1' name='form1' method='post' action=''>
		                          <table width='400' border='0'>
					   <tr><td> </td></tr><tr>
					<td><a href='vote.php?login=<?php echo $login; ?>' class='style1'>Vote</a><a href='result.php' class='style1'>
					<input name='login' type='hidden' id='login' value='<?php echo $login; ?>' />
                               <label></label>
                                </a></td>	</tr>	<tr>
				<td><a href='result.php' class='style1'>Résultat
                                 </a></td></tr><tr>
                                 <td> </td></tr></table></form>";
		break;
		case "Enseignant":
		 // je te laisse faire les suivants...
		break;
	}
	
}else{
	$retour['error'] = true;
	$retour['error_msg'] = "Utilisateur inconnu ou identifiants incorects";
}

}else{
 $retour['error'] = true;
 $retour['error_msg'] = "Merci de remplir tous les champs";
}

// On renvoie le resultat en format JSON
echo json_encode($retour);

?>




NB : Je n'ai pas testé le code (je l'ai écrit à la vollée...). Il se peut donc qu'il y ait quelques erreurs.. mais ça devrait être assez facile à corriger.
En attendant ça te donne tout de même la "méthodologie" à utiliser.

Bon courage.


0
TatsuSheva Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
En gros voici ce que je veux afficher comme message d'erreur sur la page de connexion.

https://jsfiddle.net/g15ntemg/3/

mais comment l'integrer ? voici le probleme
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Ben si tu souhaites à tout pris utiliser Jnotify ... il suffit de mettre dans la variable
$retour['error_msg'] du code que je t'ai donné..... le code HTML du lien que tu viens de nous passer.....
0
TatsuSheva Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
c'est possible de mettre du html dans une variable ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
oui... du html ... c'est du texte....
0
TatsuSheva Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
 $retour['error_msg'] = "<div class="alert alert-error">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Username ou Password incorrect!</strong> Veuillez réessayer à nouveau
</div>

";
c'est correct comme ca sachant que la balise php est ouverte ?

EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Merci d'y penser dans tes prochains messages.
.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > TatsuSheva Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
Il faut juste que tu remplaces les DOUBLES-QUOTES qui sont DANS ta chaine par des SIMPLES QUOTES.

 $retour['error_msg']="<div class='alert alert-error'>
  <a class='close' data-dismiss='alert'>×</a>
  <strong>Username ou Password incorrect!</strong> Veuillez réessayer à nouveau
</div>";



PS: A l'avenir.. merci d'indiquer le LANGAGE DANS les balises de code.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

.
0
TatsuSheva Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
Ok ! Merci a toi! voici le resultat:
il y a ces points d'interrogations qui me genent et il y a le "x" qui n'apparait pas.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
C'est un souci d'encodage en UTF-8 sur ta page.
0
TatsuSheva Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
oui il est en UTF-8
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Tu peux nous montrer l'intégralité du code de ta page HTML ?

De plus... les fichiers ... sont ils bien encodés en UTF-8 (sans BOM) ? (tu peux le voir en utilisant un éditeur comme Notepad++ par exemple).
0
TatsuSheva Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 

<?php
session_start();
include ('election.php');?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style2.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jnotify.js"></script>


</head>

<body>
<?php if(isset($_SESSION['errors'])): ?>
<?=implode($_SESSION['errors']); ?>
<?php endif; ?>
<nav><a href="#" class="focus">Log In</a> | <a href="register.html">Register</a></nav>
<form name="form1" method="post" action="validation.php">
<h2>Log In</h2>
<input name="log" type="text" class="text-field" placeholder="Username" id="login" />
<input name="password" type="password" class="text-field" id="passwd" placeholder="Password" />
<div class="styled-select">
<select name="type" id="type">
<option>Faites votre choix</option>
<option value="administrateur">administrateur</option>
<option value="Etudiant">Etudiant</option>
<option value="Enseignant">Enseignant</option>
</select>
</div>
<input name="btn" type="submit" class="button" id="btn" value="Log In" />

</form>
<?php unset($_SESSION['errors']); ?>

</body>
</html>

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
oK
Et pour ce qui est de l'encodage des fichiers ?
0