Petite question: Une box animée?

Par Alex, il y a 10 ans

PHP

Bonjour,

j'ai une petite question, je voudrais savoir comment faire (si c'est possible), de faire une box comme une console (Donc ça c'est du design), qui intéragit avec l'utilisateur, genre au début ça demande quelque chose l'utilisateur répond, et ça continue, sans rechargement de page, comme si c'était un programme .bat ?

Merci de vos futurs réponses.
Et si c'est possible, je voudrais savoir comment.

33 réponses

cyyynthia, il y a 10 ans

Ce serait possible en faisant un code qui ressemblerait à ceci :

<!-- Tu peux bien évidemment adapter ce code a ta console :) .console : Ta console .msg-user : Message de l'utilisateur .msg-core : Message généré dynamiquement .msg-params : Paramètres envoyés à ton traitement php --> <style> /* CSS de base */ .msg-user:before { content: ">>> "; } .msg-user input { border: none; } .hide { display: none; } </style> <div class="console"> <div class="msg-params hide"></div> <div class="msg-core">Message de base</div> <div class="msg-user"><input type="text"></div> </div>

Après quand l'utilisateur fait 'enter' envoyer une requête post à console.php par exemple avec les paramètres,ce que l'utilisateur à écrit qui effectuerait un traitement en fonction des paramètres et de ce que l'utilisateur a saisi et retournerai un json avec les paramètres et le retour que tu peux ensuite afficher (En js)

Après tu peux améliorer mais voilà la base :)

Alex, il y a 10 ans

Une requête en POST ? Mais je ne veux pas un formulaire....

Et comment faire avec le JS s'il te plaît, car je ne m'y connais pas vraiment...

cyyynthia, il y a 10 ans

Ce code dépend de jQuery :

jQuery(document).ready (function($) { var $console = $('.console'); $('input', $console).keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == '13'){ var $params = $('.msg-params', $console); var $msg = $('.msg-user'); var $input = $('input', $msg); var params = $params.text(); var command = $input.val(); $msg.remove(); $console.append('<div class="msg-core">'+command+'</div>'); $.post('console.php', { params:params, command:command }).done(function(data){ $console.append('<div class="msg-core">'+data.return+'</div>'); $params.text(data.params); $console.append('<div class="msg-user"><input type="text"></div>'); }).fail(function(){ alert ('Erreur.'); } } }); });

Côté php ça doit retourner un json contenant :

{ "returns":"Retour dans la console", "params":"Paramètres pour traiter la prochaine commande" }

Je suis pas sur de mon code, il est probablement buggé il te faudra le modifier ;)

Alex, il y a 10 ans

J'ai tout d'abord essayé de comprendre ton code, se que je n'ai pas vraiment réussis, et de plus après je l'ai essayer pour voir dans la volé, mais ça ne marche pas...
PS: J'ai bien évidemment link JQuery

Lartak, il y a 10 ans

Une requête en POST ? Mais je ne veux pas un formulaire....

genre au début ça demande quelque chose l'utilisateur répond

Comment veux-tu interagir avec l'utilisateur alors ?
Pour que l'utilisateur saisisse des données et qu'elles soient soumises à ton application, à part via un formulaire, je ne vois pas comment tu pourrais faire.

Si tu ne veux pas que ça ressemble à un formulaire et donc à des inputs, il te suffit tout simplement de passer par le CSS.

Alex, il y a 10 ans

Oui, j'avais oublié de modifier le post, après lecture du code Jquery, j'ai compris que le formulaire se fait par Jquery, et donc ne recharge pas la page, comme le ferait un bon vieux HTML.
Edit: Après rreevue du code, le code ne veut pas marcher, voici le code: http://hastebin.com/eyoxihorey.xml

cyyynthia, il y a 10 ans

Essaye de remplacer la ligne jQuery ready machin par $(function() {

cyyynthia, il y a 10 ans

En fait j'pense qu'il faut charger jQuery avant le script

Alex, il y a 10 ans

C'est fait si tu as vue le hastebin.

cyyynthia, il y a 10 ans

Ah ouais j'avais pas fait gaffe... t'as des erreurs dans ta console développer ?

Alex, il y a 10 ans

Aucunes, elle est vierge.

cyyynthia, il y a 10 ans

Essaye de faire un coup de debugger au tout début de ton script et vois ce que ça donne

Alex, il y a 10 ans

Ah, c'est bon j'ai trouvé l'érreur, une ")" qui n'était pas mise :D
Mais maintenant, je me pose la question suivante:
A quoi servent ces lignes ? :

$.post('console.php', { params:params, command:command }).done(function(data){ $console.append('<div class="msg-core">'+data.return+'</div>'); $params.text(data.params); $console.append('<div class="msg-user"><input type="text"></div>'); }).fail(function(){ alert ('Erreur.'); });

Car ça retourne "Erreur' (Alerte)
EDIT:
J'ai créé le fichier console.php, mais maintenant je comprends pas pour les conditions, et retourner "data"

cyyynthia, il y a 10 ans

Ces lignes envoyent une requête POST à console.php qui va s'occuper du traitement En fonction de params $_POST ['params'] et de command $_POST ['command'] et faire un retour json comme j'ai montré.

le .done va afficher le retour et proposer de faire une nouvelle requête si la requête POST s'est bien passée.

Le .fail affiche une alert Erreur si la requête à échoué.

cyyynthia, il y a 10 ans

Et data contient le retour de console.php

Alex, il y a 10 ans

Voici un code PHP de test:

if(isset($_POST['params']) || isset($_POST['command'])) { return 'lol'; }

Mais ça me retourne "Undefined", et aussi, donc "commands" = le premier mot ? Et params les arguments? Genre tous d'un coup ? Ou sous un tableau?

cyyynthia, il y a 10 ans

params = paramètres de traitement
command = la commande

Code de test :

$r = array( 'return' => 'Vous avez tapé '. $_POST['command'], 'params' => ' Params de traitement' ); return json_encode($r);
Alex, il y a 10 ans

Heu.... Le retour reste le même... "undefined"

cyyynthia, il y a 10 ans

fais un console.log (data) pour tester et dis ce que ça te retourne

Alex, il y a 10 ans

C'est pareil, undefined.

cyyynthia, il y a 10 ans

Ah mais non faut pas mettre return mais echo en fait

Alex, il y a 10 ans

C'est pareil, undefined.

cyyynthia, il y a 10 ans

Dans l'onglet Network ton post il y a quoi comme retour ?

Alex, il y a 10 ans

Data est vide.

Alex, il y a 10 ans

Je vois, mais dans Console.php, donc je met quoi pour faire le retour?

cyyynthia, il y a 10 ans
// Traitement machin chose... // Sortie JSON (Array php) $r['return'] = 'Commande tapée : '. $_POST['command']; $r['params'] = 'blabla de params pour des actions poussées'; // Retour (JSON) de l'array $r echo json_encode($r);

Normalement avec ça ça devrait marcher :)

Alex, il y a 10 ans

ça marche toujours pas....

cyyynthia, il y a 10 ans

Essaye de mettre un

header('content-type: application/json');

au début de console.php

Alex, il y a 10 ans

ça marche, super merci!

Alex, il y a 10 ans

Nouvelle question:
Lorsque le texte est tapé (Commande tapée...), je peux mettre du text, mais si je fais entrer ça fait plus rien?
PS: Désolé de poser autant de question mais je suis pas très doué en JS....

cyyynthia, il y a 10 ans

Au pire tu prends tous le js du JSFiddle et ça devrait remarcher : j'ai bougé les sélecteurs jquery pour ce bug