Javascript et php

Version imprimable

Voir 40 message(s) de cette discussion en une page

05/08/2013, 15h59
Madusa

Javascript et php

Bonjour,

Est il préférable de mettre du javascript dans du php ou inversement?
05/08/2013, 16h04
SpaceFrog

heu ...

Il faut réfléchir à la chronologie ...

Considère que php est une machine à ecrire qui génère ton code html/javascript
le serveur n'interpète pas le js
le navigateur n'interprète pas le php

Donc chronologiquement
php rédige le code html js sur le serveur et l'envoie vers le navigateur
le navigateur ne doit recevoir que du html /js toute ligne de php reçue par le navigateur ne sera pas interprétée ...
05/08/2013, 16h47
SpaceFrog

ajax permet de retourner chercher des informations sur le serveur sans recharger la page.
ajax est du js ...
ajax pointe sur une page sur le serveur (page php par exemple) qui s'execute coté serveur et retourne du string au navigateur
05/08/2013, 17h08
Invité

Citation:

Envoyé par SpaceFrog

... et retourne du string au navigateur

Vamos a la playa ! 8-)
05/08/2013, 17h16
SylvainPV

La meilleure réponse est ni l'un ni l'autre. Si tu en viens à te poser la question, c'est que tu penses mettre du Javascript directement dans tes pages PHP. Ce qui fait trois langages mélangés : PHP, HTML et Javascript. Autrement dit un gros bazar imbitable. Pour gagner en lisibilité, il faut tout faire pour les séparer.

Les développeurs imprégnés de la culture PHP ont l'habitude de mélanger PHP et HTML pour la génération de leurs vues sans que ça ne les dérange trop. Personnellement je déteste ça, et par voie de conséquence je n'aime pas beaucoup le PHP même si j'ai fait pas mal de projets avec.

J'utilise énormément le Javascript pour la génération de mes vues (templating côté client) et j'essaie au maximum de séparer la couche vue (le HTML) et de la couche data (web services me retournant mes données en JSON). Tous mes Javascript sont dans des fichiers externes chargés via l'attribut src des balises script (ou un script loader pour les besoins plus sophistiqués).

Pour les fans de l'éléphant, j'imagine que la bonne pratique est de ne pas mettre de Javascript en inline dans la page (même si ça se voit très souvent sur ces forums et source d'innombrables bugs)

Ici tu as une adaptation de ton schéma de donnée qui proviendra de ta requête doit être modélisé et affecté a une variable et bien entendu converti en json c'est la modélisation de tes données php pour js sorte de "dataset".

Ton schéma doit a tout prix ressemble a celui là :
Code:

1 2 3 4 5 6 7 8 9 10 { columns: [ { field: "date" }, { field: "name" }, { field: "desc" }, { field: "location" } ], }
Tu pourrait faire un truc du genre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $data_set = 0; ... $data_set = "{/n"; while($rows_pro=mysql_fetch_assoc($res_pro){ $data_set .= "columns: [/n"; $data_set .= "field: " . $rows_pro['date'] . "},/n"; $data_set .= "field: " . $rows_pro['desc'] . "},/n"; $data_set .= "field: " . $rows_pro['location'] . "},/n"; $data_set .= "],/n"; } $data_set .= "}";
Et ensuite tu utilise ta variable $data_set directement dans ton script js comme ceci :
Code:

1 2 3 4 var data_set = <?php echo $data_set; ?> console.log(data_set.columns[0].field[0] //date); console.log(data_set.columns[0].field[1] //desc);
J'ai pas testé mais la logique et là, on aurait pu passé par un array_push et un json_encode mais c'était pour bien voir la logique.

05/08/2013, 22h34
headmax
Le deuxième bloc de code c'est pour affecté a ton js donc :
Code:

1 2 3 <script> $("#grid").kendoGrid(<?php echo $data_set; ?>);
Il s'agit du shéma de donnée que dois avoir ton js pour fonctionner.
05/08/2013, 22h40
headmax

Le mélange est malheureusement obligatoire, mais il ne s'agit qu'une affectation et pas un gros traitement des données.

Le traitement des données pour obtenir le schéma js et fait en php sans mélange, par contre pour affecter le schéma de donnée provenant de PHP doit a un moment ou un autre être affecté au DOM par le biais du variable js, tu ne peux pas faire autrement.
05/08/2013, 22h48
headmax
Au niveau PHP
Fait un echo et un var_dump de $data_set vérifie que ton schéma de donnée et bien le même que celui du js.

Au niveau JS
Fait un
Code:

1 2 3 console.log(<?php echo $data_set; ?>); console.log(typeOf(<?php echo $data_set; ?>));
Dit moi ce que tu obtiens?

je suis complètement perdu et ne sait quoi écrire dans mon code...:cry:Je suis au niveau de :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
<?php include("menu.php"); ?>
 
<?php include("connexionbdd.php"); // query for the definition, type of this problem
?>
<?php 
 
$sql_pb="SELECT * from problem where id_Pb=1";
$res_pb=mysql_query($sql_pb);
$rows_pb=mysql_fetch_assoc($res_pb);
 
 
?></br></br></br></br>Definition:   <?php echo $rows_pb['def_Pb'];
$var=$rows_pb['id_Pb_Type']
 
 ?> </br></br>
 <script src="people.js"></script>
 
        <div id="example" class="k-content">
            <div id="clientsDb">
 
                <div id="grid" style="height:580px"></div>
 
            </div>
 
            <style scoped>
                #clientsDb {
                    width: 892px;
 
                    margin: 40px auto;
                    padding:2px 4px 0 4px;
 
                }
            </style>
            <div id="grid"></div>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { width:100, field: "date" },
    { field: "name" },
	{ field: "desc" },
	{ field: "location" }
  ],
 groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
}
);

05/08/2013, 22h51
headmax

Désolé pour le

Code:

$data_set = 0;

c'est pour initialiser la variable en PHP tu peux ne pas la mettre si tu set déjà ta donnée au préalable oubli cette ligne.
05/08/2013, 22h56
headmax
Désolé mais j'ai pas eu notion du code
Code:

1 2 var dataSource = new kendo.data.DataSource({
Peut tu montrer tout ce code lors de la création de ton objet DataSource.
05/08/2013, 23h05
headmax

Ok peut tu me faire un screenshot des champs de ta db pour les tables car il me semble que tu peux faire tout en une seule requête avec des jointures et la tu utilise une requête par champs ce qui ne faut surtout pas faire.

Ou énumérer les champs des tables et leur relation car il faut que tu optimise ta requête à un accès au lieux de plusieurs.
05/08/2013, 23h26
Madusa

1 pièce(s) jointe(s)

Voici les screenshots :D

PHP

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php 
$sql_inc="SELECT id_Inc,id_Pb,name_Inc,desc_Inc,date_Inc,id_Loc FROM incident LEFT JOIN location ON incident.id_Loc = location.id_Loc where id_Pb=1 ORDER BY date_Inc DESC LIMIT 5 ";
$res_inc=mysql_query($sql_inc);
 
while($rows_inc=mysql_fetch_assoc($res_inc)){
$data_set .= "{/n";
$data_set .=  "data: [/n";
$data_set .=   "{/n";
$data_set .=     "date:'"     . $rows_inc['date_Inc'] . "',/n";
$data_set .=     "name:'"     . $rows_inc['name_Inc'] . "',/n";
$data_set .=     "desc:'"     . $rows_inc['desc_Inc'] . "',/n";
$data_set .=     "location:'" . $rows_inc['id_Loc']   . "'/n";
$data_set .=   "}/n";
$data_set .=         "]/n";
$data_set .= "}";
}
?>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "date" },
    { field: "name" },
	{ field: "desc" },
	{ field: "location" }
  ],
 groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
});
 
var dataSource = new kendo.data.DataSource(<?php echo $data_set; ?>);
 
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
</script>

Merci pour le SS j'ai fait une jointure pour faire en une seule requête l'accès en DB.
Après j'ai pas testé mais voici le principe.

05/08/2013, 23h43
headmax

Le /n est un saut de ligne peut être qu'il est a l'envers j'ai fait ça sous nopad même pas le ++ donc j'ai pas la coloration syntaxique sur mon éditeur.

Pour l'erreur de la requête peu tu me la donner l'erreur?

Essaye :
Code:

1 2 $sql_inc="SELECT tb_i.id_Inc,tb_i.id_Pb,tb_i.name_Inc,tb_i.desc_Inc,tb_i.date_Inc,tb_i.id_Loc FROM incident tb_i LEFT JOIN location tb_l ON tb_i.id_Loc = tb_l.id_Loc where tb_i.id_Pb=1 ORDER BY tb_i.date_Inc DESC LIMIT 5 ";
J'ai mit deux Alias dans la requête tb_i pour la table incident et tb_l pour la table location.

Essaye d'executer dans ton PHPmyadmin du SS cette requête directement.

Code:

1
2
 
SELECT tb_i.id_Inc,tb_i.id_Pb,tb_i.name_Inc,tb_i.desc_Inc,tb_i.date_Inc,tb_i.id_Loc FROM incident tb_i LEFT JOIN location tb_l  ON tb_i.id_Loc = tb_l.id_Loc where tb_i.id_Pb=1 ORDER BY tb_i.date_Inc DESC LIMIT 5

05/08/2013, 23h54
Madusa
J'ai maintenant plus de problème avec la requete mais l'erreure suivante:
Undefined variable: data_set à la deuxième ligne:
Code:

1 2 while($rows_inc=mysql_fetch_assoc($res_inc)){ $data_set .= "{/n";
05/08/2013, 23h56
headmax

Supprime tout les /n du code et retest.
05/08/2013, 23h58
Madusa

tu es sur?parce-que il reconnait pas les premier data_set...
06/08/2013, 00h01
headmax
Sinon avant de déclarer ton $data_set tu sette ta variable avant :
Code:

1 2 $data_set = 0;
06/08/2013, 00h02
Madusa

J'ai mis daata_set=0; au début.Il n'y a plus d'erreur mais ça n'affiche rien... je vais voir le nombre de résultat dans ma requete

J'ai vu mon erreur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php 
$sql_inc="SELECT id_Inc,id_Pb,name_Inc,desc_Inc,date_Inc,id_Loc FROM incident LEFT JOIN location ON incident.id_Loc = location.id_Loc where id_Pb=1 ORDER BY date_Inc DESC LIMIT 5 ";
$res_inc=mysql_query($sql_inc);
 
while($rows_inc=mysql_fetch_assoc($res_inc)){
$data_set = "{/n";
$data_set .=  "data: [/n";
$data_set .=   "{/n";
$data_set .=     "date:'"     . $rows_inc['date_Inc'] . "',/n";
$data_set .=     "name:'"     . $rows_inc['name_Inc'] . "',/n";
$data_set .=     "desc:'"     . $rows_inc['desc_Inc'] . "',/n";
$data_set .=     "location:'" . $rows_inc['id_Loc']   . "'/n";
$data_set .=   "}/n";
$data_set .=         "]/n";
$data_set .= "}";
}
?>

Le premier $data_set ne doit pas être concaténé soit = et pas .=

06/08/2013, 00h06
Madusa

J'ai des questions à te poser
mais là ça n'affiche rien je vais voir le nombre de ligne de ma requete avec sql nbr rows
06/08/2013, 00h08
Madusa

Il me dit bien 4
mais pourquoi il n'ya pas l'affichage de mon tableau ? bizarre

Fait un var_dump beaucoup plus explicite:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php 
$sql_inc="SELECT id_Inc,id_Pb,name_Inc,desc_Inc,date_Inc,id_Loc FROM incident LEFT JOIN location ON incident.id_Loc = location.id_Loc where id_Pb=1 ORDER BY date_Inc DESC LIMIT 5 ";
$res_inc=mysql_query($sql_inc);
 
while($rows_inc=mysql_fetch_assoc($res_inc)){
$data_set = "{/n";
$data_set .=  "data: [/n";
$data_set .=   "{/n";
$data_set .=     "date:'"     . $rows_inc['date_Inc'] . "',/n";
$data_set .=     "name:'"     . $rows_inc['name_Inc'] . "',/n";
$data_set .=     "desc:'"     . $rows_inc['desc_Inc'] . "',/n";
$data_set .=     "location:'" . $rows_inc['id_Loc']   . "'/n";
$data_set .=   "}/n";
$data_set .=         "]/n";
$data_set .= "}";
var_dump($rows_inc);
}
?>

Fait aussi un var_dump de $data_set comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php 
$sql_inc="SELECT id_Inc,id_Pb,name_Inc,desc_Inc,date_Inc,id_Loc FROM incident LEFT JOIN location ON incident.id_Loc = location.id_Loc where id_Pb=1 ORDER BY date_Inc DESC LIMIT 5 ";
$res_inc=mysql_query($sql_inc);
 
while($rows_inc=mysql_fetch_assoc($res_inc)){
$data_set = "{/n";
$data_set .=  "data: [/n";
$data_set .=   "{/n";
$data_set .=     "date:'"     . $rows_inc['date_Inc'] . "',/n";
$data_set .=     "name:'"     . $rows_inc['name_Inc'] . "',/n";
$data_set .=     "desc:'"     . $rows_inc['desc_Inc'] . "',/n";
$data_set .=     "location:'" . $rows_inc['id_Loc']   . "'/n";
$data_set .=   "}/n";
$data_set .=         "]/n";
$data_set .= "}";
}
var_dump($data_set);
?>

06/08/2013, 00h11
headmax

Tu peux faire aussi un echo $data_set en dehors de la boucle pour vérifier et contrôler le schéma attendu celui du js.
06/08/2013, 00h13
headmax

Si il y a de la data et que le schéma correspond, c'est maintenant que tu contrôle tes données JS donc avoir l'extension firebug et plus que nécéssaire, il faut contrôler que le schéma js est bien un object json.
06/08/2013, 00h21
Madusa

Voici ce que cela me donne:
array (size=6)
'id_Inc' => string '4' (length=1)
'id_Pb' => string '1' (length=1)
'name_Inc' => string 'Skimming ' (length=9)
'desc_Inc' => string 'moiiii' (length=1
'date_Inc' => string '2013-07-22' (length=10)
'id_Loc' => string '4' (length=1)
array (size=6)
'id_Inc' => string '1' (length=1)
'id_Pb' => string '1' (length=1)
'name_Inc' => string 'Skimming incident' (length=17)
'desc_Inc' => string '
hiiiiiiiiiiiiiiiiiiiiiiiiii(length=1)
'date_Inc' => string '2013-05-11' (length=10)
'id_Loc' => string '1' (length=1)
array (size=6)
'id_Inc' => string '3' (length=1)
'id_Pb' => string '1' (length=1)
'name_Inc' => string 'Skimming dealers' (length=16)
'desc_Inc' => string '. We.' (length=1)
'date_Inc' => string '2012-11-12' (length=10)
'id_Loc' => string '165' (length=3)
array (size=6)
'id_Inc' => string '2' (length=1)
'id_Pb' => string '1' (length=1)
'name_Inc' => string 'Skimming problem' (length=16)
'desc_Inc' => string 'theeee' (length=1)
'date_Inc' => string '2011-08-11' (length=10)
'id_Loc' => string '165' (length=3)
06/08/2013, 00h23
headmax

Donne moi aussi le echo de $data_set il doit conforme au schéma.
Et vérifie les erreurs js que tu as dans firebug svp.
06/08/2013, 00h34
Madusa

comment vérifier le firebug?
06/08/2013, 00h38
Madusa

Attends voici le écho en dehors de la boucle:
{/ndata: [/n{/ndate:'2011-08-11',/nname:'important problem',/ndesc:'I used the card',/nlocation:'165'/n}/n]/n}

Investigation du code JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
 
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "date" },
    { field: "name" },
	{ field: "desc" },
	{ field: "location" }
  ],
 groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
});
 
//on declare une variable et on affecte le code PHP
var data_set = <?php echo $data_set; ?>;
//on controle le schéma js
console.log(data_set);
//on verifie le type de donnée js
console.log(typeOf(data_set));
 
var dataSource = new kendo.data.DataSource(data_set);
 
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
</script>

06/08/2013, 00h40
headmax

Ok dans ce cas supprime les /n du code PHP ils sont coupables du problème JS.
06/08/2013, 00h42
Madusa

ça me donne ceci:
{data: [{date:'2011-08-11',name:important problem',desc:'I used the card',location:'165'}]}

Le schéma présente une erreur il manque une quote
Code:

1 2 {data: [{date:'2011-08-11',name:'important problem',desc:'I used the card',location:'165'}]}

06/08/2013, 00h49
Madusa

j'avais mal copié coller :oops:
le schéma est bon
mais pourquoi ça n'affiche pas de tableau?

Pour éviter les erreurs de simple ou double quote provenant des data mysql fait un :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
<?php 
$sql_inc="SELECT id_Inc,id_Pb,name_Inc,desc_Inc,date_Inc,id_Loc FROM incident LEFT JOIN location ON incident.id_Loc = location.id_Loc where id_Pb=1 ORDER BY date_Inc DESC LIMIT 5 ";
$res_inc=mysql_query($sql_inc);
 
while($rows_inc=mysql_fetch_assoc($res_inc)){
$data_set .= "{/n";
$data_set .=  "data: [/n";
$data_set .=   "{/n";
$data_set .=     "date:'"     . $rows_inc['date_Inc'] . "',/n";
$data_set .=     "name:'"     . utf8_encode($rows_inc['name_Inc']) . "',/n";
$data_set .=     "desc:'"     . utf8_encode($rows_inc['desc_Inc']) . "',/n";
$data_set .=     "location:'" . $rows_inc['id_Loc']   . "'/n";
$data_set .=   "}/n";
$data_set .=         "]/n";
$data_set .= "}";
}
?>

Voir 40 message(s) de cette discussion en une page

Fuseau horaire GMT +2. Il est actuellement 00h31.