Bonjour je suis actuellement en train de developper mon site qui s'appel eco ride pour l'ecf de ma formation de dev. J'ai déjà coder le front end en html et. css, page d'accueil, index, page de login et page d'inscription. J'ai organiser la navigation comme vue dans un projet pratique en formation c'est a dire en utilisant un système de routage coder en JS. Je suis actuellement en train de me pencher sur l'inscription des utilisateur avec l'utilisation de la PDO coté back-end. J'ai un gros souci sur l'inscription. j'ai teste plusieurs fois le code et il marche, la connexion à la bdd Sqlite est réussie et l'insertion dans la bdd est un succès SEULEMENT cela marche que avec cette url http://localhost:4000/pages/register.php et cela ne marche pas avec l'url fourni grâce au routage http://localhost:4000/register sachant que la route est bien configurer dans allroutes.js !! la page /register s'affiche bien, seulement la requete ne s'envoie pas je n'ai aucun message d'erreur et je n'arrive pas a trouver des indices d'erreur qui pourrai me guider vers le debug. je met quelque morceau de code pour comprendre ma situation.
fichier allroute.js
import Route from "./route.js";
//Définir ici vos routes
export const allRoutes = [
new Route("/", "Accueil", "/pages/home.php"),
new Route("/covoiturage", "co-voiturage", "/pages/covoiturage.html"),
new Route("/login", "Connexion", "/pages/login.php"),
new Route("/register", "Inscription", "/pages/register.php"),
new Route("/account", "Mon compte", "/pages/account.html"),
new Route("/utilisateur", "Espace employe", "/employe/Liste_utilisateur.php"),]
//Le titre s'affiche comme ceci : Route.titre - websitename
export const websiteName = "Eco Ride";
fichier router.js
import Route from "./route.js";
import { allRoutes, websiteName } from "./allroute.js";
// Création d'une route pour la page 404 (page introuvable)
const route404 = new Route("404", "Page introuvable", "../pages/404.html");
// Fonction pour récupérer la route correspondant à une URL donnée
const getRouteByUrl = (url) => {
let currentRoute = null;
// Parcours de toutes les routes pour trouver la correspondance
allRoutes.forEach((element) => {
if (element.url == url) {
currentRoute = element;
}
});
// Si aucune correspondance n'est trouvée, on retourne la route 404
if (currentRoute != null) {
return currentRoute;
} else {
return route404;
}
};
// Fonction pour charger le contenu de la page
const LoadContentPage = async () => {
const path = window.location.pathname;
// Récupération de l'URL actuelle
const actualRoute = getRouteByUrl(path);
// Récupération du contenu HTML de la route
const html = await fetch(actualRoute.pathHtml).then((data) => data.text());
// Ajout du contenu HTML à l'élément avec l'ID "main-page"
document.getElementById("main-page").innerHTML = html;
// Ajout du contenu JavaScript
if (actualRoute.pathJS != "") {
// Création d'une balise script
var scriptTag = document.createElement("script");
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("src", actualRoute.pathJS);
// Ajout de la balise script au corps du document
document.querySelector("body").appendChild(scriptTag);
}
// Changement du titre de la page
document.title = actualRoute.title + " - " + websiteName;
};
// Fonction pour gérer les événements de routage (clic sur les liens)
const routeEvent = (event) => {
event = event || window.event;
event.preventDefault();
// Mise à jour de l'URL dans l'historique du navigateur
window.history.pushState({}, "", event.target.href);
// Chargement du contenu de la nouvelle page
LoadContentPage();
};
// Gestion de l'événement de retour en arrière dans l'historique du navigateur
window.onpopstate = LoadContentPage;
// Assignation de la fonction routeEvent à la propriété route de la fenêtre
window.route = routeEvent;
// Chargement du contenu de la page au chargement initial
LoadContentPage();
fichier route.js
export default class Route {
constructor(url, title, pathHtml, pathJS = "") {
this.url = url;
this.title = title;
this.pathHtml = pathHtml;
this.pathJS = pathJS;
}
}
fichier /pages/register.php
<?php
$pdo = new PDO("sqlite:/Users/macosdev/Documents/GitHub/ecoRide-DrissBenkirane/ecorideDatabase.db");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$error = null;
try {
$stmt = $pdo->prepare("INSERT INTO utilisateurs (nom, prenom, date_naissance, email, password, telephone, adresse)
VALUES (:nom, :prenom, :date_naissance, :email, :password, :telephone, :adresse)");
if (isset($_POST['submit'])) {
$nom = $_POST['nom'];
$prenom = $_POST['prenom'];
$dateNaissance = $_POST['date_naissance'];
$email = $_POST['email'];
$password = $_POST['password'];
$telephone = $_POST['telephone'];
$adresse = $_POST['adresse'];
$hashedPassword = password_hash($password, PASSWORD_BCRYPT);
$stmt->execute([
'nom' => $nom,
'prenom' => $prenom,
'date_naissance' => $dateNaissance,
'email' => $email,
'password' => $hashedPassword,
'telephone' => $telephone,
'adresse' => $adresse
]);
}
} catch (PDOException $e) {
echo $e->getMessage();
}
?>
<h3>Formulaire d'inscription</h3>
<form action="" method="post">
//suite du code
Voila en gros, un formulaire marche et l'autre non alors qu'ils ont tout les deux le meme code source, il y a juste l'url qui diffère. je suppose que cela doit être une mauvaise config dans le système de routage pour permettre la récupération de donné depuis une page injecter mais je ne sais pas comment faire si c'est sa le problème..Je précise que quand je change l'action du formulaire a action="/pages/register.php" l'insertion est un succès depuis http://localhost:4000/register seulement cela me redirige vers la page http://localhost:4000/pages/register.php
J'ai volontairement supprimer le code du formulaire, trop de caractere.
PS: Pareil avec le login, meme probleme.
Merci beaucoup de votre aide,
Cordialement,
DRISS
Hello, J'espère que tu as pu régler ton problème depuis, mais au cas ou.
Alors tout d'abord, je pense que ta formation c'est Study, non ? :) Je le vois car j'ai déjà aidé et rencontrer ce code du routeur.
Donc pour ton soucis, est-ce que tu connais la différence entre GET et POST ?
Si tu arrives à l'expliquer, est-ce que tu peux m'expliquer comment fonctionne le routeur ?
Est-ce qu'il effectue une requête GET ou POST quand il trouve une route avec le code fournis ?
Un indice, on demande la page grâce à la ligne fetch(actualRoute.pathHtml)
dans le code du routeur.
Tu peux voir comment fonctionne la fonction fetch
sur ce lien MDN.
Tu peux t'assurer de ce que tu auras vu en regardant la réponse de la requête dans l'onglet "Réseau" de ton navigateur.
Tu peux aussi debug en ajoutant un var_dump($_POST);
juste avant ton if
pour voir si tu as bien des données dans le tableau $_POST
.
Je te laisse faire ces tests et me dire ce que tu trouves. Si tu as des questions, n'hésite pas à les poser.