Conception de mon premier site ... premiers bugs !

HTML CSS JS PHP

Sujet résolu

11 mai 2021 à 23:58:25

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 !

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

<?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)

$(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)

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

-
Edité par (...) 11 mai 2021 à 23:59:03

PookieTreePop

12 mai 2021 à 10:14:18

Salut, j'ai pas du tout vérifié le reste mais dans l'attribut "action" de ton form tu n'appelles rien, hors il faut que tu l'envoie à ta page de traitement (contact.php)

(Attention, tu ne peux pas appeler tes 2 pages contact.php. Je te conseille de quand même mettre la page du formulaire en php, tu pourrais avoir besoin d'y inclure des morceaux de php plus tard, mais dans ce cas donne un autre nom à ta page de traitement...)

Autre remarque : Si tu travailles en local tu auras des réglages à faire sur wamp/mamp pour qu'il traite ton envoie.

Bon courage !

(...)

13 mai 2021 à 15:40:02

PookieTreePop a écrit:

Salut, j'ai pas du tout vérifié le reste mais dans l'attribut "action" de ton form tu n'appelles rien, hors il faut que tu l'envoie à ta page de traitement (contact.php)

(Attention, tu ne peux pas appeler tes 2 pages contact.php. Je te conseille de quand même mettre la page du formulaire en php, tu pourrais avoir besoin d'y inclure des morceaux de php plus tard, mais dans ce cas donne un autre nom à ta page de traitement...)

Autre remarque : Si tu travailles en local tu auras des réglages à faire sur wamp/mamp pour qu'il traite ton envoie.

Bon courage !

Merci pour ton aide. J'ai ainsi pu modifier le nom du fichier PHP en index.php et le modifier comme ceci dans le formulaire
<form id="contact-form" method="post"
				action="php/index.php"  role="form">
J'ai aussi corrigé une erreur sur mon fichier Js et là, les messages d'erreurs que doit renvoyer mon formulaire s'il n'est pas correctement rempli apparaissent comme avant, youpi !!

Oui, je travaille en local, d'où ma volonté de l'héberger via Git et ensuite Netlify.

J'ai trouvé ce lien d'ailleurs pour effectuer l'hébergement (https://www.blackcreeper.com/hosting/creer-heberger-et-maintenir-un-site-statique-gratuitement/).

PookieTreePop

13 mai 2021 à 16:52:25

Super si ça marche ! Par contre, vérifie que l'appeler "index.php" ne pose pas de problème, parce que normalement "index" c'est la page d'accueil de ton site, faudrait pas que t'aies des bugs à cause de ça !

Bonne continuation

(...)

14 mai 2021 à 9:02:00

PookieTreePop a écrit:

Super si ça marche ! Par contre, vérifie que l'appeler "index.php" ne pose pas de problème, parce que normalement "index" c'est la page d'accueil de ton site, faudrait pas que t'aies des bugs à cause de ça !

Bonne continuation

Pas faux ... Et bien ce sera renvoi_formulaire.php !!

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

'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.

Je suis passé via ce lien (https://grafikart.fr/tutoriels/maildev-tester-emails-595).

-
Edité par (...) 14 mai 2021 à 9:56:11

(...)

15 mai 2021 à 15:51:23

PookieTreePop a écrit:

Super si ça marche ! Par contre, vérifie que l'appeler "index.php" ne pose pas de problème, parce que normalement "index" c'est la page d'accueil de ton site, faudrait pas que t'aies des bugs à cause de ça !

Bonne continuation

Rien de nouveau ? Car j'aimerais finaliser mon site ce week-end pour un hébergement via Netlify et Git dans la foulée.

N'hésite pas à me dire si ça te convient.

Je viens de tester un envoi de mails, le formulaire semble répondre avec succès mais il faut que je trouve une autre solution que celle trouvée plus haut (car c'est avec Cake PHP et ça ne semble pas fonctionner avec mon PHP / Xampp).

EDIT : j'ai testé avec PHPMailer et un nouveau fichier PHPMailer.php, crée et placé dans le dossier du projet , sans succès ... Rien n'arrive dans mes mails personnels (et bien sûr, dans les spams non plus !).

Sauf le message d'envoi du mail ('Votre message a bien été envoyé. Merci de m'avoir contacté :') !!

<?php
require 'PHPMailer/PHPMailer.php';
require 'PHPMailer/SMTP.php';
$mail = new PHPMailer;
$mail->isSMTP();
$mail->SMTPSecure = 'ssl';
$mail->SMTPAuth = true;
$mail->Host = 'smtp.gmail.com';
$mail->Port = 1025;
$mail->Username = '';
$mail->Password = null;
$mail->setFrom('');
$mail->addAddress('MON ADRESSE MAIL');
$mail->Subject = 'Hello from PHPMailer!';
$mail->Body = 'This is a test.';
//send the message, check for errors
if (!$mail->send()) {
    echo "ERROR: " . $mail->ErrorInfo;
} else {
    echo "SUCCESS";
}
?>

Et la modif dans le fichier php.ini

[mail function]
; For Win32 only.
; http://php.net/smtp
SMTP=localhost
; http://php.net/smtp-port
smtp_port = 1025

Par ailleurs, est-ce un problème si je dépose ce site via Git et Netlify sans être sûr du résultat quant à l'envoi du mail (seule ombre au tableau de mon site), vu que je dois fournir dans 2 jours ce lien aux entreprises et écoles dans lesquelles je candidate (alternance) ?

-
Edité par (...) 15 mai 2021 à 17:25:52

PookieTreePop

15 mai 2021 à 17:23:52

Salut, désolée je saurais pas t'aider là... Perso je test rarement ça en local parce que ça me gonfle en général haha

Si c'était moi je l'hebergerais avant tout... De toutes façons y a toujours des modifs à faire après hébergement, en plus t'auras les les logs pour résoudre t'es problèmes !

(...)

16 mai 2021 à 9:57:10

PookieTreePop a écrit:

Salut, désolée je saurais pas t'aider là... Perso je test rarement ça en local parce que ça me gonfle en général haha
Si c'était moi je l'hebergerais avant tout... De toutes façons y a toujours des modifs à faire après hébergement, en plus t'auras les les logs pour résoudre t'es problèmes !

Merci pour ton aide !

(...)

17 mai 2021 à 16:12:19

Dernière chose : vu que mon site se constitue de PHP, HTML, CSS et JS, quel site (gratuit) me permet d'héberger en passant via GitHub ?

Heroku ? Netlify ? Autre ?

Quelles étapes vais-je devoir suivre ?