Conception de mon premier site & premiers bugs !

Invité · 12/05/2021, 00h04

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 !!

Conception de mon premier site & premiers bugs !

Conception Web

Mode arborescent

Discussions similaires

Partager

Partager