Appeler un controleur PHP en jQuery ou Ajax

Salut,

Oui, c'est possible et ça s'appelle l'AJAX : https://www.grafikart.fr/formations/debuter-javascript/ajax | https://www.grafikart.fr/tutoriels/jquery/ajax-jquery-520

Après avoir regarder la vidéo Ajax avec jQuery cela me dit toujours pas comment faire pour appeler une méthode d'une classe en PHP

window.location.assign('http://monsite/seconnecter.php')
revient à la même chose que de cliquer une balise <a> dont le href pointe sur 'seconnecter.php'
l'ajax c'est seulement si tu veux rester sur la même page sans en recharger une nouvelle, mais est-ce utile pour une page de login ?

Tu ne peux pas directement appeler un méthode d'une classe PHP depuis du code JavaScript.

Mais, en utilisant ajax tu peux demander au navigateur d'envoyer une requête à une URL précise (p. ex. www.mon-site.com/connexion). Ton application web doit avoir une méthode d'un controlleur liée à cette URL et cette méthode doit renvoyer une vue.

Dans ton code JavaScript, après avoir envoyer la requête ajax, tu dois récupérer la réponse sous forme "text/html" et ajouter ce contenu dans ton document HTML à l'endroit souhaité.

Mon URL pour activer mon contrôleur est /login pour se connecter

Ce n'est pas une page où il y a beaucoup de contenu donc une page dédiée pour cela ce n'est pas terrible je trouve

Je suppose que l'idée de base c'est de renvoyer le même formulaire que l'utilisateur a rempli, mais en indiquant que le mot de passe ou le nom d'utilisateur est incorrect. C'est bien ça ?

Concrètement comment je peux faire car l'ajax je connaît très peu ?

Mon contrôleur renvoie la vue et fait les vérifications. C'est la vue qui affiche les messages d'erreurs

du coup la page peut être appeler autant en get qu'en Post aussi

En faite je crois que tu te poses un faux problème. Je te montre dans ce post dands 5 min

C'est peut être le cas je n'ai pas assez de connaissances en Ajax ^^

En faite je crois que tu te poses un faux problème. Dans la méthode de ton controlleur qui affiche la vue (et le formulaire) tu devrais avoir une condition qui vérifie que le formulaire a été soumis (c'est à dire que des données en posts sont reçues) et ensuite agire en conséquence:

// PHP

public function login()
{
    // On verifie que le formulaire a été soumis
    if($_SERVER['REQUEST_METHOD'] == 'POST')
    {
        // On effectue une requête pour vérifier les données avec ceux dans la base.

        // Si les données sont juste
        if(test)
        {
            //On redirige l'utilisateur
            header('location: www.mon-site.com/page-apres-connexion');
            exit;
        }
        // Sinon on fait rien et la même vue (avec le même formulaire) sera affiché.
    }
    // Retourne la vue (et son formulaire)
}

L'idée générale c'est ça, après le code peut différé légérment si tu utilises un framework tel que Symfony, CakePHP, Laravel.

En gros c'est mon code mais il faut bien afficher le formulaire aussi si il n'y aucune données en POST.
C'est un framework perso que je développe au fur et a mesure du temps.
Mais au clic sur le bouton "Se connecter" il faut qu'il m'affiche mon formulaire centrer en plein milieu de ma page en assombrisant le reste comme par exemple le site http://www.dofus.com/fr pour se connecter

Ou j'ai mal compris ta demande. Et ton soucis n'est pas d'indiquer que les données saisies par l'utilisateur pour se connecter sont erronées, mais plutôt de récupérer un formulaire pour l'inclure dans ton document HTML.

Mais alors je te repose la question, pourquoi le formulaire n'est pas de base déjà présent dans le document et pourquoi aurais-tu besoin de le récupérer après que la page soit chargée?

Pour séparer mes fichiers je travaille en MVC , c'est beaucoup plus logique un controlleur UserController qui va avoir une méthode login et logout que l'intégrer dans mes pages. C'est une question d'organisation.

Ce que tu veux faire, je le fais en appelant une boite modale
concrètement c'est une div cachée qui n'apparait que quand on l'appelle
avec Twitter bootstrap tu fais ça facilement

OK, je pense avoir compris. Ton formulaire devrait avoir le code suivant:

<form method="post">
    <input type="text" name="username" value="<?= $_POST['username']; ?>">
    <input type="password" name="password">
</form>

Le problème c'est que si tu appelles le formulaire tel quel, le serveur PHP va planter et t'indiquer que $_POST['username'] n'existe pas.

Donc dans ton controlleur, juste avant de renvoyer la vue, tu dois initialiser ta variable:

// Pour PHP 5
$_POST['username'] = !empty($_POST['username']) ? $_POST['username'] : '';
// Pour PHP 7
$_POST['username'] = $_POST['username'] ?? : '';

Redis-moi si c'est bien ça ton problème, sinon il faut que tu me réexplique le tout, parce que j'ai pas du te comprendre depuis le début.

J'ai déjà pensé à le faire mais le problème c'est que je ne veux pas tout mélanger et cela veut dire qu'il faudrait que je mette mon formulaire dans mon template ce n'est pas l'idéal de l'appeler à chaque fois qu'une page est demandée.

Le formulaire n'est pas rempli par default, il faut envoyer les données avant qu'il fasse la vérification des données et si ce n'est pas correct il affiche un message d'erreur sinon il redirige vers l'accueil si c'est un simple utilisateur ou vers l'administration si c'est un administrateur

Au clic sur un bouton "Se connecter" par exemple il me doit m'afficher un formulaire vide de connexion sur la même page en assombrisant le corps de la page.
Il faut bien sûr le remplir, si les identifiants sont correct il va soit vers la page d'accueil soit vers l'administration si c'est un administrateur.
Si il y a des erreurs, un message d'erreur va apparaître.

En faite tu devrais avoir ton formulaire dans un fichier propre à lui et l'inclure dans ton template avec un require. Mais pour la partie controlle de donner et initialisation des variables, tu n'y coupes pas.

Même avec les framework pro c'est comme cela que ça se passe. Les formulaires sont créer soit en PHP soit en dur dans un fichier unique et son appelé au fur et à mesure de leur besoin dans la vue ou dans le controlleur en fonction de ce que l'on souhaite réaliser.

Un exemple avec Symfony 2 / 3:

http://www.lafermeduweb.net/tutorial/les-formulaires-dans-symfony2-p100.html

Vers le bas de la page.

Pour expliquer mieux j'ai une vue login.php où il y a juste un formulaire générer en PHP via ma classe CustomForm.php.
Et j'ai un contrôlleur UserController qui a une méthode login et logout.

Lorsque je clique sur "Se connecter", en gros je veux qu'il m'appelle UserController avec la méthode login.
Cette méthode est appelée actuellement via mon système de routeur au chemin suivant : monsite.fr/login

Le contrôleur s'occupe du traitement s'il y a des données en POST et renvoi la vue bien sur login.php dans le dossier views

Je ne sais pas si je suis plus clair ?

Ce qu'on a du mal à cerner, c'est que tu nous dis que tu développes un framework avec un système de routeur et de l'autre côté tu nous demande comment on appelle une url ???

Je ne demande pas comment appeler une URL je demande d'afficher une vue dans une autre vue sur la même page

Même d'appeler en quelque sorte 2 contrôleurs dans une même page qui affiche une vue chacun

Je veux appeler un contrôleur avec une méthode qui fait un traitement et renvoie une vue depuis un simple bouton sur une page

Mon architecture entre le contrôleur et la vue est la suivante :

app
    -> Controller
        -> UserController.php
src
    -> templates
    -> views
        -> users
            ->login.php

Donc si je résume de chez résume:

1. Tu as un controller UserController avec les méthodes login et logout
2. la méthode login est mapper sur l'URL /login
3. Tu as une vue login.php qui contient un formulaire généré par la classe CustomForm

Et tout ce que tu veux faire c'est lorsque tu clique sur le bouton "envoyer" de ton formulaire, c'est d'arriver sur /login. Donc tout ce qu'il te reste à faire, c'est d'ajouter action="/login" dans ton formulaire:

<form method="post" name="connexion" action="/login">

Mais ça me paraît si bête que je me demande vraiment si c'est tout ce que tu souhaites faire. Redonne des nouvelles asap

Tu a tout bon sauf pour la fin.
Je suis sur n'importe quel page de mon site sauf l'administration et j'ai un bouton "se connecter" et sa m'envoie le formulaire depuis la page où je suis.
C'est cela que je veux faire si je clique sur le bouton "envoyer" du formulaire, la redirection est déjà faites selon ses droits d'accès.

Je veux afficher le formulaire de connexion en cliquant sur un bouton quelle que soit la page du site excepté l'administration.
Le formulaire va apparaître comme une pop-up en gros mais les pop-up sont directement bloqués par le navigateur.

Je veux juste faire une animation qui va afficher le formulaire mais pour cela il faut appeler un second Contrôleur dans la page pour faire le traitement et afficher la seconde vue.

Exactement comme le site http://www.dofus.com/fr pour se connecter (Le bouton "CONNEXION" en haut à droite)

Comme ceci :

Cette fois je t'ai compris et c'est encore plus bête que ça. Donc ce n'est pas un problème de routing, c'est juste que tu veux afficher, ou plutôt animer, l'apparition d'un formulaire déjà présent dans la page. En JavaScript pur je suis un peu rouillé, mais si tu importes la librairie jQuery il te suffit de faire:

<!-- Importation de jQuery -->
<script type="application/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="application/javascript">
// Après chargement du document, exécute le code suivant:
$(document).ready(function(){
    // Anime l'apparition d'un fond (à placer de sorte qu'il se retrouve derrière le formulaire)
    $(".background").fadeIn();
    // Anime l'apparition du formulaire
    $("form#login").fadeIn();
});
</script>

Euh non ce n'est pas l'animation qui me dérange, c'est d'afficher le formulaire depuis un autre contrôleur.
En gros il faut appeler 2 contrôleur sur la même page et et donc 2 vues.

Je pense qu'en récupérant la vue par un appel ajax et en l'injectant dans une modale ça devrait marcher
regarde déjà ça http://getbootstrap.com/2.3.2/javascript.html#modals

C'est mon contrôleur qui fait le traitement aussi la vérification des identifiants et les droits

Tu n'as qu'a mettre un form dans la modale qui refait un appel ajax pour valider les identifiants

Je t'avoue que je n'ai pas tout suivi, le truc c'est que je voudrais conserver mon contrôleur pour une question d'organisation sinon cela ne sert a rien de travailler en MVC

Alors effectivement, qu'une solution c'est une requête ajax pour récupérer le formulaire, et l'ajouter dans le document. Toujours avec jQuery (v. 3):

 $.ajax({
    url: "/login",
    async: false,
    type: "GET",
    dataType: "html"
}).done(function( html ) {
    // 'append' pour ajouter à la fin, 'prepend' pour ajouter au début.
    $("#conteneur").append(html);
});

En me basant sur la doc officielle (http://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings). Personnellement, je n'ai pas eu l'occasion d'essayer la version 3. Donc ça passe ou ça casse.

Après, sans juger ton travail de façon négative, je pense qu'il doit y avoir un problème de conception ou de comprehénsion. Mais je te rassure, on passe tous par là.

Ba mon framework le système vue controleur et modèle marche comme les framework comme Symfony Laravel CakePHP c'est le même système, mais je les trouve bien trop compliquer à mon goût

Et ton système en Ajax va m'afficher ma vue de mon contrôleur ?
La première fois il sera afficher en GET mais si l'utilisateur n'a pas les bon identifiants il doit renvoyer la vue en POST

Mon framework, je l'ai créer en suivant la formation sur le site "La POO en PHP" que j'ai améliorer au fur et à mesure

Non l'idée d'ajax était de retourner que le formulaire.

Même si j'imagine ce que tu veux faire. Je ne peux pas te conseiller mieux sans avoir du code sous les yeux pour voir ce qui est déjà fait. C'est trop abstrait dans l'état actuel des choses.

Comment je peux-faire cela en code car l'Ajax n'est pas trop ma tasse de thé ^^

Quelqu'un a t'il une solution à mon problème ?

Bonjour.

Comment je peux-faire cela en code car l'Ajax n'est pas trop ma tasse de thé ^^
Quelqu'un a t'il une solution à mon problème ?

Je t'ai proposé une marche à suivre, nous n'allons pas te donner un code tout prêt, regardes les tutoriels sur le site concernant l'ajax, tu y trouvera les réponses.

Ba sa ne m'aide pas trop vu mes connaissances limitées en Ajax

Tes connaissances sont limitées en AJAX + il y a des tutos sur le site = tu as ta solution : apprendre.

Cela ne m'avance en rien mais bon ce n'est pas grave je ferme le sujet, merci pour vos renseignements et votre réactivité.

Les tutos n'explique en rien comment appeler un contrôleur PHP en Ajax

Les tutos n'explique en rien comment appeler un contrôleur PHP en Ajax

Tu devrais également regarder la formation sur la POO.

Tu fais une fixation sur les controleurs !!!
tu payes pas le bus ? :-)

La formation POO, je l'ai suivi en entier justement pour créer mon framework perso

J'ai aussi créé mon framework perso pour le fun
j'ai juste divergé au jour 2 pour faire un truc à ma sauce (I18N et tokens de sécurité)

La formation POO, je l'ai suivi en entier justement pour créer mon framework perso

Dans ce cas là, comment fais-tu pour ne pas comprendre comment fonctionne une application avec une structure MVC ?

Ba ja comprend très bien le modèle MVC et c'est le controller qui gère la relation entre la bdd et la vue.
C'est pour cela que je veux appeler un contrôleur et non un truc pas propre du tout, ce n'est pas du tout professionnel

Dans ton controller :

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    // ce que tu souhaite renvoyer à ta vue ici
    echo $data;
    die();
}

JS (copier/coller du tuto de @Grafikart https://www.grafikart.fr/formations/debuter-javascript/ajax) :

var getHttpRequest = function () {
  var httpRequest = false;

  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    httpRequest = new XMLHttpRequest();
    if (httpRequest.overrideMimeType) {
      httpRequest.overrideMimeType('text/xml');
    }
  }
  else if (window.ActiveXObject) { // IE
    try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      try {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {}
    }
  }

  if (!httpRequest) {
    alert('Abandon :( Impossible de créer une instance XMLHTTP');
    return false;
  }

  return httpRequest
}

var xhr = getHttpRequest()
xhr.open('GET', 'http://localhost/demo', true) //url vers ton controller
// On envoit un header pour indiquer au serveur que la page est appellée en Ajax
xhr.setRequestHeader('X-Requested-With', 'xmlhttprequest')
// On lance la requête
xhr.send()

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
        xhr.responseText // contient le résultat de la page
    } else {
        // Le serveur a renvoyé un status d'erreur
    }
  }
}

Les paramètres à envoyer à ma vue il est nécessaire de l'envoyer via Ajax ?
Car normalement c'est mon controller qui envoie les paramètres à la vue concernée.