Javascript et php

**Madusa** · 05/08/2013, 15h59

Bonjour,

Est il préférable de mettre du javascript dans du php ou inversement?

**SpaceFrog** · 05/08/2013, 16h04

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 ...

**SpaceFrog** · 05/08/2013, 16h47

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

Invité · 05/08/2013, 17h08

Envoyé par SpaceFrog

... et retourne du string au navigateur

Vamos a la playa !

**SylvainPV** · 05/08/2013, 17h16

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)

**headmax** · 05/08/2013, 22h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**headmax** · 05/08/2013, 22h34

Le deuxième bloc de code c'est pour affecté a ton js donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**headmax** · 05/08/2013, 22h40

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.

**headmax** · 05/08/2013, 22h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
console.log(<?php echo $data_set; ?>);
console.log(typeOf(<?php echo $data_set; ?>));

Dit moi ce que tu obtiens?

**Madusa** · 05/08/2013, 22h51

je suis complètement perdu et ne sait quoi écrire dans mon code...

Je suis au niveau de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
                        },
}
);

**headmax** · 05/08/2013, 22h51

Désolé pour le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$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.

**headmax** · 05/08/2013, 22h56

Désolé mais j'ai pas eu notion du code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var dataSource = new kendo.data.DataSource({

Peut tu montrer tout ce code lors de la création de ton objet DataSource.

**headmax** · 05/08/2013, 23h05

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.

**Madusa** · 05/08/2013, 23h26

Voici les screenshots

**headmax** · 05/08/2013, 23h35

PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 .= "}";
}
?>

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**headmax** · 05/08/2013, 23h43

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?

**headmax** · 05/08/2013, 23h48

Essaye :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**headmax** · 05/08/2013, 23h54

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Madusa** · 05/08/2013, 23h54

J'ai maintenant plus de problème avec la requete mais l'erreure suivante:
Undefined variable: data_set à la deuxième ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
while($rows_inc=mysql_fetch_assoc($res_inc)){
$data_set .= "{/n";

**headmax** · 05/08/2013, 23h56

Supprime tout les /n du code et retest.

Javascript et php

JavaScript

Discussions similaires

Partager

Partager