FonfonBlog, CMS Blog - version 1.0 Alpha

ViPHP
ViPHP | 3607 Messages

20 oct. 2010, 09:55

Yep,

tu mélanges plusieurs choses il me semble le code devrait donner ceci:

Code : Tout sélectionner

$.post( "test.php", { "arg1": "val1" , "arg2": "val2" , "arg3": "val3" }, function(data){ alert(data.name); // John console.log(data.time); // 2pm }, "json" );
Donc il y a le passage de valeurs avant l'envoie de la requête (arg1,arg2, etc...) qui ici est un objet javascript...
Et il y a le retour du script serveur, qui ici est considéré comme du json (utilisable comme objet javascript directement)
Donc c'est sur le script serveur qui faut savoir ce que tu renvoies:
<?php

echo json_encode(
    array('status'=>'success')
);

C'est plus clair ou pas?

Eléphant du PHP | 398 Messages

20 oct. 2010, 10:27

Yep,

tu mélanges plusieurs choses il me semble le code devrait donner ceci:

Code : Tout sélectionner

$.post( "test.php", { "arg1": "val1" , "arg2": "val2" , "arg3": "val3" }, function(data){ alert(data.name); // John console.log(data.time); // 2pm }, "json" );
Donc il y a le passage de valeurs avant l'envoie de la requête (arg1,arg2, etc...) qui ici est un objet javascript...
Et il y a le retour du script serveur, qui ici est considéré comme du json (utilisable comme objet javascript directement)
Donc c'est sur le script serveur qui faut savoir ce que tu renvoies:
<?php

echo json_encode(
    array('status'=>'success')
);

C'est plus clair ou pas?
Oké...finalement je vais plutot rester sur ma première méthode classic avec le $.post.
L'exemple concret qui m'a amené à me poser cette question concerne le dernier point que je développe : la modification d'un fichier CSS par un administrateur.

Donc, l'admin selectionne le fichier CSS qu'il veut modifier et affiche son contenu dans une textarea. La modification je la fait passer par JQuery mais envoyer le code css modifié sous forme de JSON me semblait plus "sécurisé" que de l'envoyer avec $.post et recupéré côté php avec $_POST comme je fais...
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

Eléphant du PHP | 398 Messages

22 oct. 2010, 08:56

J'ai UP hier soir sur sourceforge une version 0.12 :).

Il reste un bug dont j'avais completement, oublié : la verification du type MIME des fichiers CSS qui peut planter sur certains serveurs (comme OVH...).
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

Eléphant du PHP | 398 Messages

27 oct. 2010, 12:08

Je reviens à mes messages un poil plus haut, jcar je penses qu'on s'est pas compris ^^.
Le mieux serait de partir d'un exemple concret, exemple : insertion d'un article pour le blog.
Envoie des parameters suivant : titre, article, id_user, id_theme, tags
A l'heure actuelle j'utilise cette solution là :

Code : Tout sélectionner

function insertArticle(){ //Declaration des variables var zUrlAddArticle = '<?php echo BASEURL . DS ?>administration/ajout/article.html'; var titreArticle = htmlentities($("#titreArticle").val()); var themeArticle = $("#categorieArticle").val(); var article = htmlentities($("#champTexteNouveauArticle_editbox").val()); var tagsArticle = htmlentities($("#tagArticle").val()); //alert(themeArticle); //Si titre et article ok $.post(zUrlAddArticle, { titreAticlePost : titreArticle, themeArticlePost: themeArticle, articlePost : article, tagsArticlePost : tagsArticle }, function(data){ if(data){ $('#newData').html(data); $('#imageAddUser').hide(); var retour = $('#msg_retour').val(); //blabla affichage message si ok ou pas } }); }
et récupéré comme ça (version ultra simplifié mais c'est l'idée:
$oArticle = new article();
$oArticle->add():
//et dans ma methode je récupère comme ça :
$this->titre 			= urldecode($_POST['titreAticlePost']);
$this->themeArticle 	= (int)$_POST['themeArticlePost'];
$this->article 			= urldecode($_POST['articlePost']);
$this->tags				= urldecode($_POST['tagsArticlePost']);
L'autre solution que j'avais, était d'utiliser $.ajax en envoyant un JSON, de cette façon :

Code : Tout sélectionner

var tabPost = {"article" : { "titre" : titreArticle, "theme" : themeArticle, "article" : article, "tags" : tagsArticle } }; strjson = JSON.stringify(tabPost); $.ajax({ type: "POST", //dataType: "json", //processData: false, url: zUrlAddArticle, data: {"contenu": strjson}, error: function(data){ $('#msgInf').html(data); }, success: function(data){ //affiche le contenu du fichier dans le conteneur dédié $('#msgInf').html(data); //blabla affichage message si ok ou pas } } );
et la récupération se fait comme ça :
$jsonTab = stripslashes(urldecode($_POST['contenu']));	
$tab = json_decode($jsonTab, true);

//Instance de ma classe
//Appel de la methode ajout avec envoie du tableau en parametre, un truc genre $oArticle->add($tab)
La récupération coté PHP n'est pas un soucis, mais quelle est la meilleure méthode entre $.post et $.ajax ? Y'en at'il une mieux que l'autre ? Si oui pourquoi ?

Merci :)
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

ViPHP
ViPHP | 5462 Messages

27 oct. 2010, 13:15

$.post c'est $.ajax avec l'option post non ?

Eléphant du PHP | 398 Messages

27 oct. 2010, 13:21

$.post c'est $.ajax avec l'option post non ?
Bah je ne vois pas trop de différence...à part que je dois appliquer un json_decode pour récupérer les données.
Donc ça fait la même chose mais de 2 façons différentes. Et y'en a vraiment pas une mieux que l'autre (sur n'importe quel point) ?
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

ViPHP
ViPHP | 5462 Messages

27 oct. 2010, 13:23

$.post c'est $.ajax avec l'option post non ?
Bah je ne vois pas trop de différence...à part que je dois appliquer un json_decode pour récupérer les données.
Donc ça fait la même chose mais de 2 façons différentes. Et y'en a vraiment pas une mieux que l'autre (sur n'importe quel point) ?
les 2 c'est de l'ajax, c'est juste que $.post c'est un raccourcis pour $.ajax avec l'option post

Eléphant du PHP | 398 Messages

27 oct. 2010, 14:10

Bon bah j'ai juste à laisser comme tel quoi :D . Le systeme avec $.ajax, je l'ai appliqué uniquement pour la modification des CSS, mais je ne sais plus trop pourquoi...

Thx

EDIT :
voila une liste de bug que j'ai trouvé et que je vais corriger dans les prochains jours :

- [CORRIGE] Si on modifie le titre d'un article en y méttant des caractères spéciaux, le renommage n'est pas pris en compte (il doit être uniquement pour l'ajout d'articles)
- [CORRIGE]Gestion des thêmes/catégories : le bouton "Desactiver" ne fonctionne pas et la ligne "ajouter" doit prendre 3 cases et non 2
- [CORRIGE]Gestion sites amis : je vais ajouter mon site par défaut dans la table
- [CORRIGE]Gestion des emails : je vais cocher par défaut le bouton radio indiquant quel systeme est utilisé par defaut
- [CORRIGE]Le backup de la BD n'est toujours pas opérationnel
- [CORRIGE]Modification des CSS : le bouton "Afficher" n'apparait pas sous Google Chrome alors que Firefox OK. IE et Safari pas testé.

TODO :
- [CORRIGE]Modification de l affichage de la liste des articles. Un tableau c est bien quand y'en a pas beaucoup mais si y a 3000 articles bof :/
Donc je vais proposer une liste déroulante des articles et quand l admin en sélectionne 1, les données de l'article sélectionné apparaîtront.
Si c est OK, je fais de même chez les utilisateurs
- [CORRIGE]Appliquer des labels dans les formulaires
- [CORRIGE]Modification du background : proposer le dossier de choix du CSS et modifier l envoie de l'image dans le dossier CSS selectionné
Modifié en dernier par BaLiSTiK le 16 nov. 2010, 21:35, modifié 1 fois.
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

Eléphant du PHP | 398 Messages

16 nov. 2010, 16:36

En essayant d'améliorer l'accessibilité, je viens de me rendre compte d'une chose : si le javascript est désactivé sur le navigateur, bah plus rien ne fonctionne vu que l'ajout/modification/suppression se fait en passant par JQuery :| . Donc je ne sais pas comment contourner ce problème à part indiquer un message "Le javascript est désactivé sur votre navigateur, veuillez l'activer afin de pouvoir utiliser les fonctionnalités du site".

Pour la connexion utilisateur et le menu JQuery, je pensais contourner en faisant quelque chose comme ça :
<script type="text/javascript">
	<?php echo $_SESSION['js'] = true; ?>
</script>
<noscript>
	<?php echo $_SESSION['js'] = false; ?>
</noscript>
<?php
	if(isset($_SESSION['js'])){
		$lienConnexion= ""; //Lien ou code html avec ouverture en lightbox
		$pageMenu = 'menu_jquery.php';
	}else{
		$lienConnexion= ""; //Lien ou code html avec ouverture dans la page
		$pageMenu = 'menu_classique_sans_js.php';
	}
?>
/** 
blablablaaa...
**/
echo 'lien1 | lien 2 | ' . $lienConnexion;
//Blabla...
include_once($pageMenu);
Je ne trouve pas ça vraiment très propre mais si il existe une meilleure solution s'intégrant facilement dans tout mon code déjà fait, je suis preneur :D
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

ViPHP
ViPHP | 3607 Messages

16 nov. 2010, 16:49

Il faudrait développer le tout en pensant "amélioration progressive" (http://www.pompage.net/pompe/degradatio ... ogressive/)
En gros, tu permet l'utilisation du site sans javascript, et tu ajoutes du confort via javascript...

Pour un exemple simplet:
<a href="addEntry.php?arg1=foo&arg2=bar" onclick="addEntry('foo','bar');return false;">Ajouter une entrée</a>
Donc si pas de javascript, ton script addEntry.php fait ce qu'il faut et redirige sur la bonne page, si javascript, ça se fait côté client avec un appel ajax pour l'enregistrement des données.
Voilà c'est pas encore la panacée, il faudrait programmer de façon "non-intrusive" (http://www.pompage.net/pompe/javascript ... hapitre-1/)
Voilà mes quelque pistes
On a jamais finit :)

Eléphant du PHP | 398 Messages

16 nov. 2010, 17:14

Le deuxième lien est très intéressant, merci beaucoup. J'ai testé à la va-vite ton exemple de code et ça à l'air de fonctionner sans aucun soucis.
Par contre, je sens que je vais avoir énormément de taf pour l'accessibilité dans le cas de javascript désactivé...je pense que je vais surtout le concentrer sur les sections accessibles aux utilisateurs...la section administration sera traitée ultérieurement...ça me fait donc traité l'ajout de commentaire, l'inscription des utilisateurs, la gestion de son compte d'un utilisateur et la page contact.
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

Eléphant du PHP | 398 Messages

16 nov. 2010, 23:44

Je pense que je devrais pouvoir ENFIN furnir une version présentable à la fin ed la semaine :D :D . Je dois encore un peu travailler sur l'accessibilité et notamment prévoir l alternative si le JS est désactivé.
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

ViPHP
ViPHP | 5462 Messages

17 nov. 2010, 10:48

Je pense que je devrais pouvoir ENFIN furnir une version présentable à la fin ed la semaine :D :D . Je dois encore un peu travailler sur l'accessibilité et notamment prévoir l alternative si le JS est désactivé.
cool, ça avance bien :wink:

Eléphant du PHP | 398 Messages

17 nov. 2010, 18:26

Dernier gros point à modifier : l'accessibilité de formulaires accessibles à tous.
Passant par ajax pour tout ce qui est ajout/suppression/modification, ces formulaires se révelent innaccessible si le JS est désactivé...logique :D . Donc, ma question est comment rendre accessible mes formulaires dans ces deux cas :
- Javascript désactivé : fonctionne "normal" d'un formulaire
- Javascript non-désactivé : passage par AJAX avec JQuery.

Je pense que ça doit donner un truc comme ça :
<!-- Script JS se trouvant dans un fichier.js -->
<script type="text/javascript">
	function sendMail(){
		
		$('#imageSendMail').show();
		var zUrl = '<?php echo BASEURL . DS; ?>administration/ajout/mail.html';
		var mailSend 	= $('#email').val(); 
		var sujetMail 	= htmlentities($('#subject').val());
		var textMail 	= htmlentities($('#champTexteMail_editbox').val());
		
		$.post(zUrl, {
				mailsend : mailSend,
				subject : sujetMail,
				contenumail : textMail
		},function(data){
			if(data){
				// Blabla retour indiquant si OK ou pas
			}
		});
	}
</script>

<?php
	/**
	* Script PHP executé si Javascript desactivé
	*TODO : mettre une condition genre if($activationJs == false){... ? avec $activationJs  une variable prenant true ou false selon JS activé. Initalisée par exemple dans un <noscript>
	**/
	$mail = new appControl();
	$message 	= urldecode($_POST['contenumail']); 
	$verifExp 	= $mail->verifSyntaxeMail($_POST['mailsend']);
	if($verifExp == true){
		$exp = $_POST['mailsend'];
		$dest 		= MAIL_ADMIN;
		$subject 	= urldecode($_POST['subject']);

		if($mail->gestionmail($message, $exp, $dest, $subject)){
			//Blabla OK								
		}else{
			//blabla pas OK						
		}
	}else{
		//blabla pas ok						
	}
?>

<form method="post" action="contact.html" onsubmit="return sendMail();">
	<p><label for="email">Votre adresse email</label><br />
	<input type="text" name="email" id="email" size="40" />
	</p>
	
	<p><label for="subject">Sujet</label> :<br />
	<input type="text" name="subject" id="subject" size="40" />
	</p>
	
	<p><label for="champTexteMail">Message</label> <br />
	<textarea id="champTexteMail" name="champTexteMail" cols="" rows=""></textarea> 
	</p>
	
	<p>
	<input type="submit" value="Envoyer" />
<!-- input type="submit" ou input type="button" ?-->
	</p>
</form>	
On a notre formulaire classique. Et sur le submit, si le JS est desactivé, ça passe par la fonction sendMail(), sinon on fait le traitement par PHP.
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

ViPHP
ViPHP | 3607 Messages

17 nov. 2010, 18:59

Bonjour,

voici comment je ferais personnellement:
<!-- Fichier de traitement (sendmail.php) -->

<?php
        
        // si tout les champs sont OK
        
			// Alors action!
			
			// Si $_POST['method'] == 'ajax'
				
				echo 'OK';
				exit();
				
			// Sinon
			
				header('Location: urldeconfirmation');
				exit();
        
        // Sinon
			
			// Si $_POST['method'] == 'ajax'
				
				echo 'KO';
				exit();
				
			// Sinon
			
				header('Location: urlderreur');
				exit();
?>

<!-- Script JS se trouvant dans un fichier.js -->

<script type="text/javascript">

		// on ajoute l'évenement onsubmit depuis le fichier js (unobstrusive javascript)
		$(document).ready(fucntion(){
		
			
			$('#formulaire_email').submit(function(e){
				
				// on annule le traitement par défaut (ici la soumission du formulaire)
				e.preventDefault();
			
				sendMail();
			});
		});

        function sendMail(){
               
                $('#imageSendMail').show();
                var zUrl = '<?php echo BASEURL . DS; ?>administration/ajout/mail.html';
                var mailSend    = $('#email').val();
                var sujetMail   = htmlentities($('#subject').val());
                var textMail    = htmlentities($('#champTexteMail_editbox').val());
               
                $.post(zUrl, {
                                mailsend : mailSend,
                                subject : sujetMail,
                                contenumail : textMail,
                                // j'ajoute ici la methode
                                method : 'ajax'
                },function(data){
                        if(data){
                                // Blabla retour indiquant si OK ou pas
                        }
                });
        }
</script>

<!-- formulaire -->

<form id="formulaire_email" method="post" action="contact.html">
        <p><label for="email">Votre adresse email</label><br />
        <input type="text" name="email" id="email" size="40" />
        </p>
       
        <p><label for="subject">Sujet</label> :<br />
        <input type="text" name="subject" id="subject" size="40" />
        </p>
       
        <p><label for="champTexteMail">Message</label> <br />
        <textarea id="champTexteMail" name="champTexteMail" cols="" rows=""></textarea>
        </p>
       
        <p>
        <input type="submit" value="Envoyer" />
<!-- input type="submit" pour l'accessibilité, c'est obligatoire!-->
        </p>
</form>
 
Dis moi si les commentaires ne sont pas assez clairs ?
Si tu as des doutes, des questions! (sachant que j'ai fait ça de tête et qu'il y a surement encore mieux :) )