Conception de mon premier site & premiers bugs !

Invité · 12/05/2021, 01h04

Bonjour (ou bonsoir) à toutes et à tous !

Dans le but de ma recherche d'alternance et d'un point de vue personnel, j'ai décidé de créer mon site regroupant mes principales activités effectuées durant mes deux premières années d'études (avec HTML, CSS, PHP et JS). Je suis familier des trois premiers, moins de Javascript.

Le hic, c'est qu'au moment de cliquer sur le bouton "Envoyer" du formulaire de contact, aucun message n'apparaît, contrairement à ce qui est prévu : messages d'erreur si champs vides ou message de confirmation si champs correctement remplis.

Voici les codes pour mieux illustrer mon problème.

Contact.php (page affichée sur l'écran de l'utilisateur) : PHP ou HTML ... j'ai un doute !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
 
<html>
 
<head>
    <meta charset="utf-8">
    <!--font-family: 'Ubuntu', sans-serif;-->
    <title>Contactez-moi</title>
    <link href="img/photo.ico" rel="shortcut icon" >
 
    <!-- CSS -->
    <link rel="stylesheet" type ="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
 
 
    <!-- JS -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
<body>
 
 
 
<!--  CONTACT -->
 
<div class="container">
    <div class="divider"></div>
        <div class="heading">
            <h2>Contactez-moi</h2>
        </div>
 
            <div class="row">
                <div class="col-lg 10 col-lg offset-1">
            <!-- 10 unités dans la largeur du container / 1 unité à droite -->
                <form id="contact-form" method="post"
                action=""  role="form">
                    <div class="rowContact">
                        <div class="col-md 6">
                            <label for="firstname">Prénom<span class="blue">*</span></label>
                            <input type="text" id="firstname" name="firstname"  class="form-control" placeholder="Votre prénom" value="">
                            <p class = "comments"></p>
                        </div>
 
                        <div class="col-md 6">
                            <label for="name">Nom<span class="blue">*</span></label>
                            <input type ="text" id="name" name="name" class="form-control" placeholder="Votre nom" value="">
                            <p class = "comments"></p>
                        </div>
 
                        <div class="col-md 6">
                            <label for="email">Email<span class="blue">*</span></label>
                            <input type ="email" id="email" name="email" class="form-control" placeholder="Votre email" value="">
                            <p class = "comments"></p>
                        </div>
 
                        <div class="col-md 6">
                            <label for="phone">Téléphone</span></label>
                            <input type ="tel" id="phone" name="phone" class="form-control" placeholder="Votre téléphone" value="">
                            <p class = "comments"></p>
                        </div>
 
                        <div class="col-md 17"> <!--plus large pour le message -->
                            <label for="message">Message<span class="blue">*</span></label>
                            <textarea id="message" name="message" class="form-control-message" placeholder="Votre message" rows="4"></textarea>
                            <p class = "comments"></p>
                        </div>
 
                        <div class="col-md 12"> <!--plus large pour le message -->
                            <p class="blue"><strong>Ces informations sont requises.</strong></p>
                        </div>
 
                        <div class="col-md 12"> <!--plus large pour le message -->
                            <input type="submit" class="button1" value="Envoyer"name="Envoyer">
                        </div>
 
                    </div>
 
 
                </form>
            </div>   
    </div>
</div>
 
<!-- FIN CONTACT -->
 
</body>
</html>

Contact.php (se situe dans le dossier php - formulaire de renvoi des informations)

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<?php
 
// AJAX ne va passer qu'un seul objet, à savoir CET ARRAY !
$array= array("firstname" => "",
    "name" => "",
    "email" => "",
    "phone" => "",
    "message" => "",
    "firstnameError" => "",
    "nameError" => "",
    "emailError" => "",
    "phoneError" => "",
    "messageError" => "",
    "isSuccess" => false);
 
$emailTo = "#";
 
 
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
    //verifyInput protège les variables instanciées
    $array["firstname"] = verifyInput($_POST['firstname']);
    $array["name"] = verifyInput($_POST['name']);
    $array["email"] = verifyInput($_POST['email']);
    $array["phone"] = verifyInput($_POST['phone']);
    $array["message"] = verifyInput($_POST['message']);
    $array["isSuccess"] = true;
    $emailText = "";
 
 
    if(empty($array["firstname"]))
        // si le champ de firstname est vide, affichage du message
    {
        $array["firstnameError"] = "Je veux juste connaître votre prénom.";
        // le formulaire n'étant pas correctement rempli, isSuccess devient false
        $isSuccess = false;
    }
    else
    {
        $emailText .= "firstname : {$array["firstname"]}\n";
        /*
        -* => concaténation
        j'ajoute à l'email ce qui renseigné au sein du prénom
        */
    }
 
    if(empty($array["name"]))
    {
        $array["nameError"] = "Ainsi que votre nom.";
        $array["isSuccess"] = false;
    }
    else
    {
        $emailText .= "name : {$array["name"]}\n";
    }
 
    if(!isEmail($array["email"]))
        // si ça n'est pas un mail
    {
        // affichage du message d'erreur
        $array["emailError"] = "Ceci n'est pas une adresse mail valide.";
        $array["isSuccess"] = false;
    }
    else
    {
        $emailText .= "email : {$array["email"]}\n";
    }
 
    if(!isPhone($array["phone"]))
        // si ça n'est pas un téléphone
    {
        $array["phoneError"] = "Il ne se compose que de chiffres et d'espaces.";
        $array["isSuccess"] = false;
    }
    else
    {
        $emailText .= "phone : {$array["phone"]}\n";
    }
 
    if(empty($array["message"]))
    {
        $array["messageError"] = "Que souhaitez-vous me dire ?";
        $array["isSuccess"] = false;
    }
    else
    {
        $emailText .= "message : {$array["message"]}\n";
    }
 
    if($array["isSuccess"])
    {
        // Envoi de l'email
        $headers = "From: {$array["firstname"]} {$array["name"]} <{$array["email"]}>\r\nReply-To: {$array["email"]}";
        // avec cette-fonction-là, on envvoie notre email
        mail($emailTo, "Un message de votre site", $emailText, $headers);
        // paramétrage de ce que nous allons recevoir
    }
 
 
    // Demande au json d'encoder l'intégralité de l'objet array
    echo json_encode($array);
 
 
}
 
function isEmail($var)
{
    // filter_var = filtrer ce qui est mail ou pas : @, ., com/net/:fr ...
    return filter_var($var, FILTER_VALIDATE_EMAIL);
    // nous renvoie true ou false
}
 
function isPhone($var)
{
    // doit nous renvoyer true ou false
    return preg_match("/^[0-9]*$/", $var);
    /* preg_match = REGEX
    /^ = commence avec un slash et le chapeau
    [0-9] = demande que ça soit entre 0 et 9 OU les espaces
    * = permet au champ d'être vide et de répéter autant de caractères possibles
    */
}
 
function verifyInput($var)
{
 
    /* nettoyer formulaire avec ces trois actions : trim / stripslashes / htmlspecialchars
    */
    $var = trim($var);
    // stripslashes => enlever tous les antislashs
    $var = stripslashes($var);
    $var = htmlspecialchars($var);
 
    return $var;
}
 
?>

script.js (liste des requêtes Ajax)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
$(function(){
 
	// L'événement sur lequel je veux que le script réagisse
	$('#contact-form').submit(function(e){
		// Ce code est exécuté lorsque je soumets le formulaire => SUBMIT
		e..preventDefault();
		//enlever le comportement par défau d'un formulaire
		$('comments').empty();
		// tous les événements comments sont remis à zéro
		var postdata = $('#contact-form').serialize();
		/* mettre les informations contenues dans le formulaire
		à l'intérieur d'une variable post-data
		*/
 
		// AJAX !
 
		$.ajax({
 
			type:'POST',
			// on poste les informations
			url:'php/contact.php',
			// dans le fichier contact.php
			data: postdata,
			// la variable postdata
			datatype: 'json',
			// c'est un json
			success: function(result){
				// si succès de l'envoi
				if(result.isSuccess){
					// ajouter le formulaire de contact
					$("#contact-form").append("<p class= 'thank-you'>Votre message a bien été envoyé. Merci de m'avoir contacté.</p>");
					// remettre le formulaire de contact à zéro
					$('#contact-form')[0].reset();
				}
				else{
					// si échec de l'envoi
					$("#firstname + .comments").html(result.firstnameError);
					//renvoi du message d'erreur lié à la variable firstName.
					$("#name + .comments").html(result.nameError);
					$("#email + .comments").html(result.emailError);
					$("#phone + .comments").html(result.phoneError);
					$("#message + .comments").html(result.messageError);
				}
			}
		});
 
	});
 
})

style.css (Code du contact UNIQUEMENT)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* 4 - LE CONTACT */
 
.divider{
    width: 100px;
    height: 2px;
    background: #ffa500;
    margin: 0 auto;
}
 
.heading{
    text-align: center;
    margin-bottom: 60px;
    background-color: #035373;
}
 
.heading h2{
    text-transform: uppercase;
    font-weight: bold;
    color: white;
}
 
#contact-form{
    font-size: 20px;
    background: white;
    padding: 40px;
    border-radius: 10px;
}
 
.blue{
    color: #035373;
}
 
.form-control{
    height: 50px;
    font-size: 18px;
}
 
.form-control-message{
    height: 150px;
    font-size: 18px;
    width: 100%;
}
 
.comments{
    font-style: italic;
    font-size: 18px;
    color: #d82c2e;
    height: 25px;
}
 
#contact-form input[type=submit]{
    margin: 40px auto 0px;
    /*
    40 px vers le haut
    auto à gauche et à droite
    0 px vers le bas
    */
    display: block;
}
 
.button1{
    border: 1px solid #ddd;
    background: #ffa500;
    color: #fff;
    width: 100%;       
    font-weight: bold;
    text-transform: uppercase;
    padding: 18px;
    border-radius: 5px;
    transition: all 0.3s ease-in 0s;
}
 
.button1:hover{
    background: #333;
    border-color: #ffa500;
}
 
.thank-you{
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    font-size: 22px;
}

Merci d'avance pour votre aide afin que je me lance enfin dans l'export de mon site via Git et puisse envoyer à mes futurs recruteurs !!

**NoSmoking** · 12/05/2021, 11h52

Bonjour,

• Rien qu'à la lecture de ton code HTML, on cherche l'attribut required sur les champs obligatoires, ne pas oublier les tests côté serveur !

• Dans ton code JavaScript, tu écris

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

e..preventDefault();

... il y a un point de trop, cela fait planter ton script et boum c'est envoyer avec rechargement.

• ...

Invité · 13/05/2021, 16h29

J'ai corrigé l'erreur du JavaScript et les messages d'erreur apparaissent comme avant.

Par contre, je ne comprends pas ce que tu veux dire avec les attributs required : cela signifie-t-il que je dois placer chaque champ en required, d'où l'astérisque ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<textarea id="message" name="message" class="form-control-message" placeholder="Votre message" rows="4" required="required"></textarea>

Comme ceci ?

J'ai aussi changé mon nom de fichier contact.php par renvoi_formulaire.php et fait les changements nécessaires dans les fichiers.

Par ailleurs, sais-tu où je dois placer ceci ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
'EmailTransport' => (
        'default' => (
            'className' => 'Smtp',
            'host' => 'localhost',
            'port' => 1025,
            'timeout' => 30,
            'username' => null,
            'password' => null,
            'client' => null,
            'tls' => null,
        )
    );

En haut ou en bas du formulaire PHP, cela revient au point de départ, à savoir le non-affichage des erreurs et l'absence d'envoi.

Oui, j'ai bien paramétré l'envoi des mails via nodeJS et maildev avec ce port.

**ABCIWEB** · 14/05/2021, 16h54

Envoyé par (.....)

Par contre, je ne comprends pas ce que tu veux dire avec les attributs required : cela signifie-t-il que je dois placer chaque champ en required, d'où l'astérisque ?

On fait normalement deux contrôles, un côté client en html avec les required et éventuellement avec du javascript pour compléter si besoin, et un côté php car les contrôles de sécurité doivent se faire impérativement côté serveur. Le contrôle côté client sert à éviter que la totalité du script soit envoyé avant d'avoir un retour d'erreur, c'est plus pratique et plus rapide pour le visiteur. Mais on doit refaire un contrôle côté serveur car les données reçues en provenance du formulaire peuvent être volontairement corrompues.

Envoyé par (.....)

Par ailleurs, sais-tu où je dois placer ceci ?
...
En haut ou en bas du formulaire PHP, cela revient au point de départ, à savoir le non-affichage des erreurs et l'absence d'envoi.

Oui, j'ai bien paramétré l'envoi des mails via nodeJS et maildev avec ce port.

Si tu utilises php la classe recommandée pour l'envoi de mail est phpmailer. On installe pas node.js juste pour envoyer un mail, ça n'a pas de sens.

Invité · 14/05/2021, 19h28

Je dois donc ajouter les attributs required dans le HTML en plus de mes paramètres d'affichage de message d'erreur si le champ n'est pas rempli correctement ?

Non, je ne suis pas passé par nodeJS pour le mail : je l'ai simplement installé afin d'utiliser mailDev et configuré xampp pour l'uitiliser conjointement, d'où ma question précédente car lorsque je place le code précédent, le renvoi des messages d'erreur ne fonctionne pas ...

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
'EmailTransport' => (
  'default' => (
    'className' => 'Smtp',
    'host' => 'localhost',
    'port' => 1025,
    'timeout' => 30,
    'username' => null,
    'password' => null,
    'client' => null,
    'tls' => null,
  )
);

**ABCIWEB** · 14/05/2021, 20h59

Envoyé par (.....)

Je dois donc ajouter les attributs required dans le HTML en plus de mes paramètres d'affichage de message d'erreur si le champ n'est pas rempli correctement ?

Non pas forcément, tu fais comme tu veux mais pour les contrôles simples un required est souvent suffisant et cela évite d'avoir à faire le contrôle en javascript. Comme déjà dit le contrôle côté client est un confort pour l'utilisateur, mais le vrai contrôle doit se faire côté php.

Envoyé par (.....)

Non, je ne suis pas passé par nodeJS pour le mail : je l'ai simplement installé afin d'utiliser mailDev et configuré xampp pour l'uitiliser conjointement, d'où ma question précédente car lorsque je place le code précédent, le renvoi des messages d'erreur ne fonctionne pas ...

Le code qui est donné en exemple est pour cakephp. Si tu n'utilises pas cakephp, utilises phpmailer et configures-le pour envoyer des mails en smtp avec ces valeurs. Mais je ne pourrai pas t'en dire plus étant donné que je n'utilise ni phpmailer (je me contente de la fonction mail de php), ni mailDev. Pour configurer phpmailer tu auras plus de réponses dans le forum php.

Conception de mon premier site & premiers bugs !

Conception Web

Vue hybride

Discussions similaires

Partager

Partager