renseignement sur le principe du drag&drop

**gtraxx** · 11/01/2009, 23h56

Bonsoir à tous, j'ai une question qui me turlupine depuis un moment.
J'ai une liste de news que l'ont peux previsualiser, modifier, etc ..
Seulement mes clients souhaite pouvoir modifier l'ordre de celle-ci ce qui étais prévu au programme pour plus de faciliter

Cependant, je n'arrive pas à me faire à l'idée de comment s'y prendre...
Je vois bien le code jQuery avec le plugin UI sortable suivi d'une requête ajax mais ce que je ne pige pas c'est comment modifier cet ordre ???
Je veux dire par la que le principe de la requête m'échappe, dois je mettre à jour tous les ID des news pour modifier l'ordre ?
Je ne vois que sa pour que l'ordre ne change
exemple :

news ID 2
news ID 3
news ID 1

Je souhaite avoir :

Code :

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

1
2
3
news ID 3
news ID 1
news ID 2

Dois je faire à ce moment une requête de type update sur toutes la table et changer l'id de tout ??
Bref j'ai besoin de comprendre comment réaliser cela sans partir dans des délire comme j'ai l'habitude de faire ces temps-ci

**clemphenix** · 12/01/2009, 01h51

Le plugin de jquery ne change rien à tes données, il change juste des div de place chez le client. Par contre des événements Javascript peuvent être récupérés lors des changements. Si tu as besoin de synchroniser tes bases avec le nouvel ordre, tu peux lancer des requêtes ajax à partir de ces événements.

**gtraxx** · 12/01/2009, 09h38

Je sais bien que le plugin ne change en rien les données ce n'est que visuel chez le client.
Ce que je me demandais c'est justement quoi mettre à jour, bon logiquement c'est l'id mais dois on modifier tous les ID pour que cela corresponde, comment exécuter une tel requête sachant que pour l'instant quelque news sont intégrer mais sachant que je devrai procéder de la même façon pour un catalogue qui peut contenir des milliers d'ID.
Bref je me prend certainement la tête pour rien

mais c'est toujours bon de se renseigner correctement

**marcha** · 12/01/2009, 12h57

salut,

je pense que renuméroter les ids des news n'est pas une bonne approche.
L'id est censé identifier une news, je ne l'utiliserai pas pour du tri. Si par la suite
tu dois référencer des news depuis ailleurs ça t'obligerait à faire pas mal de
changements. Tu pourrais ajouter une colonne pour l'ordre. Mais ça ne t'aide
en rien au niveau de l'algo de renumérotation.

Tu pourrais ajouter une colonne avec une référence sur l'ID de la news suivante,
(principe d'une liste chainée). Cela n'est pas non plus très simple a gérer et il faut
plusieurs requêtes pour la mise à jour et l'affichage.

Peux être y a-t-il, ou y aura-t-il une notion de groupe de news. Dans ce cas:

Tu pourrais créer une table groupe de news avec un champs texte assez long
qui contient les IDs des news dans l'ordre d'affichage séparé par des virgules.

Cette méthode a l'avantage de manipuler une liste d'IDs, c'est très facile pour
la mise à jour, il suffit de reprendre les IDs dans ta page web et d'envoyer la
nouvelle chaine.

Et il y a encore surement plein d'autre idées

Mais c'est pas un problème
trivial, et le choix de la solution doit tenir compte de l'usage. Privilégier une
solution rapide à l'affichage si la charge est importante par ex.

J'espère que ça te donne des idées.

**gtraxx** · 12/01/2009, 21h17

Ben ma table news par exemple est assez simpliste et je récupére les enregistrement avec PDO et smarty (pour l'affichage).
Voici ma table des news :

Code :

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

1
2
3
4
5
6
7
CREATE TABLE `db_news` (
  `id_news` int(11) NOT NULL auto_increment,
  `sujet` varchar(255) NOT NULL,
  `texte` text NOT NULL,
  `news_date` date NOT NULL,
  PRIMARY KEY  (`id_news`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Comme vous pouvez constater elle est très simple (je dirai même trop lol) mais pour l'instant elle me suffit amplement mais un remaniement suivant votre idée peut bien entendu m'aider grandement.
Seulement je ne vois pas très bien, Faut dire mes requêtes sont de nature simple et je suppose que votre idée est de lié cette table à celle qui contiendrai une liste pour l'ordre du moins si j'ai bien compris.
Comme l'ordre des news sera personnalisable dans l'admin, voici la requête select pour l'affichage.

Code :

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

SELECT * FROM db_news WHERE id_news ORDER BY id_news DESC

si je comprend le principe pour construire les requêtes sql et php pour modifier l'ordre (tout d'abord dans sql avec la bonne modif sur la table) je pourrai ainsi construire la requête ajax sans probléme.
Mon cms repose uniquement sur jQuery mais il manque le drag & drop

**marcha** · 13/01/2009, 09h21

Si tu choisis l'option qui consiste à sauver une liste d'id, par ex: 12,4,7,8

Alors pour l'affichage tu auras un code dans ce goût là:

Code :

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

1
2
3
4
5
6
7
8
 
$liste = ... extraire depuis un groupe de news par exemple ...
$ids = explode(',', $liste);
foreach($ids as $id) {
  // SELECT * FROM db_news WHERE id_news=$id;
  $html = buildNews(...);
  echo $html;
}

Cette manière de faire facilite l'édition des positions, mais à l'affichage il
y a une requête par news, à toi de voir si c'est bon dans ton cas.

Coté Javascript, après le drag&drop tu parcours les news dans le DOM et
tu range les ID dans un tableau javascript (par ex: liste) ensuite tu fais
une requête Ajax avec un url du genre: "update-order.php?ids=" + liste.join(',');

Je pense que quelque soit ton approche du problème il faut passer la liste
des ID par ajax sous forme d'une chaine, ça me semble plus simple.

Ensuite coté PHP tu utilise cette liste soit tel quel, soit tu l'utilise pour renuméroter une colonne de la table db_news (ou id_news si tu y tiens)

**le_chomeur** · 13/01/2009, 09h26

je suis assez daccord avec marcha sauf pour un point : on ne touche jamais aux ID il faut donc créer une colonne permettant de gérer l'ordre ...

après moi ce que j'en dis

**franculo_caoulene** · 13/01/2009, 10h26

Envoyé par marcha

Code :

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

1
2
3
4
5
6
7
8
 
$liste = ... extraire depuis un groupe de news par exemple ...
$ids = explode(',', $liste);
foreach($ids as $id) {
  // SELECT * FROM db_news WHERE id_news=$id;
  $html = buildNews(...);
  echo $html;
}

Cette manière de faire facilite l'édition des positions, mais à l'affichage il
y a une requête par news, à toi de voir si c'est bon dans ton cas.

Tu peux utiliser in dans la requête sql.
Enfin avec la méthode proposées.

Des news arrivent au fil du temps je ne comprends pas le fait de les classer. Je n'arrive pas à visualiser.

Je pense que ton problème est en effet un pur problème sql, au final.

**marcha** · 13/01/2009, 10h50

oui avec "in" on a une seule requête mais on a plus l'ordre voulu.

**franculo_caoulene** · 13/01/2009, 10h57

C'est vrai, au temps pour moi je retire ma bêtise. Bizarre que j'ai pu écrire ça en pensant à extraire un ordre justement! Manque de concentration...

**lougne** · 14/01/2009, 09h43

En fait il y a plusieurs façons d'y arriver, Dans le livre Learning JQUERY l'auteur s'attaque au problème sur un tableau de plusieurs lignes et colonnes (CHAP 7)

avec même une pagination très effective à lire un MUST. Le principe est adaptable à tout genre. Voici la demo

c'est assez long mais au combien je te le conseille, il y a même un plugin basée dessus: Table sorter

**gtraxx** · 14/01/2009, 13h31

lougne c'est très gentil de votre part mais j'ai déjà construit mes tableaux avec jQuery justement sur base de ce livre.
Ce que je cherche a comprendre c'est le drag & drop dans son ensemble avec aussi bien le sql que l'ajax.

merci marcha, Je prend note de tout sa, mais vous voulez dire que l'ont passe la liste des id dans l'url lors de l'update ?
Mais au niveau du frontend, il faut alors que je récupère la liste d'id.
On va dire pour l'instant je récupère les news comme ceci :

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
class DbLoadData{
	/**
	 * 
	 *
	 * @var string
	 */
	public $id_news;
	/**
	 * function construct class
	 *
	 */
	function __construct(){
		if (isset($_GET['id_news'])) {
			$this->id_news = $_GET['id_news'];
		}
	}
	/**
	 * function loaData
	 *
	 * @param string
     * @return array
	 */
	function loadData(){
		global $****,$********,$*******;
			$dbh = new PDO($*****, $*****, $*****);
			$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
			$stmt = $dbh->prepare("SELECT * FROM db_news WHERE id_news ORDER BY ID_NEWS DESC LIMIT 10");
			if ($this->id_news) {
				$stmt = $dbh->prepare("SELECT * FROM db_news WHERE id_news = :id");
			    $stmt->bindParam(':id',$this->id_news, PDO::PARAM_INT);
			}
 
			$stmt->setFetchMode(PDO::FETCH_ASSOC);
			$stmt->execute();
			$result = $stmt->fetchAll();
			$stmt->closeCursor();
			$stmt = null;
		return $result;
	}
}

Du coté de smarty je fais comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
{foreach from=$result key=attr item=i}
			    <div class="day-date">{$i.news_date|date_format:"%A, %e %B, %Y"}</div>
			    <div class="post-title"><span>{$i.sujet}</span></div>
			   {if $smarty.get.id_news}
					   	 {$i.texte}
				{else}
				{$i.texte|truncate:300}...
				<p><a href="/news-{$i.id_news}.html" rel="news" title="{$i.sujet}">Lire tout</a></p>
			    <hr/>
				{/if}
		    {/foreach}

Comme sa je comprendrai le principe des listes, je pourrai alors reconstruire cette partie du cms.
Le fais d'une réadaptation de mes requêtes me permet de créer le cahier des charges pour l'intégration du drag & drop pour mes listes de news, ....

**marcha** · 15/01/2009, 14h37

Pourrais tu donner le code HTML généré de quelques news stp

**gtraxx** · 16/01/2009, 06h36

oui biensur cela donne ceci :

Code :

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

1
2
3
4
5
6
7
8
 
<div class="day-date">Thursday, 15 May, 2008</div>
<div class="post-title"><span>nouvelle galerie</span></div>
<p> 
  <p>Ajout de nouvelle galerie* :</p>
  <ul><li>toitures</li><li>électricité</li><li>renovations</li><li>epdm</li></ul>...
  <p><a href="http://www.sergelec.be/news-2" rel="facebox" title="nouvelle galerie">Lire tout</a></p>
</p>

C'est ce que cela donne

**marcha** · 16/01/2009, 07h44

Salut,

On ne voit pas trace de l'id de la news dans ton HTML généré,
c'est un oubli de ta part ou il n'y en a effectivement pas ?

Attention aussi à ton code HTML, il y a un <p> qui englobe
la liste et un autre <p> c'est pas conforme et risque de poser
des problèmes

**gtraxx** · 18/01/2009, 00h04

oui je ais bien que le code d'exemple n'étais pas valide w3c, c'est un de mes anciens CMS.
Il à évoluer depuis cela donne ceci coté frontend public :

Code :

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

1
2
3
4
5
6
7
<div style="font-size:170%;text-align: center;text-decoration:underline;margin-bottom:5px;">News</div>
										    <div class="day-date">mardi, 23 décembre, 2008</div>
			    <div class="post-title"><span>sortie de la version 1.2.1 de magix cms</span></div>
			    <p> 
				    					   	 <p>Pour fêter l'ouverture du site une mise à jour de magix cms viens de voir le jour.</p><p>Avec les modifications suivante :</p><ul class="listClass"><li> Correction du bug avec les iframes de nyroModal sous safari</li><li>Ajout de la modification d'une catégorie dans le "plugin Page"</li><li>Upgrade de tinyMce vers la version 3.2.1.1</li><li>Modification de la configuration de tinyMce dans l'ajout d'une nouvelle page</li><li>Modification des en-têtes des fichiers html</li><li>Changement de la réécriture des urls de la galerie (optimisation au référencement)</li><li>Modification du script pour générer des sitemaps</li><li>Compression de tous les fichiers javascript et images dans l'administration.</li><li>Upgrade de la base de donnée pour l'optimisation des performances.</li></ul><p>Je vous souhaite un joyeux noël</p>
 
					   	 			    </p>

L'id n'apparais pas du tout ici car en faites c'est la partie publique, et je gére tout avec de l'ajax donc rien n'est visible dans les URL.
Par contre dans l'administration les ID sont bien visible afin de pouvoir éditer les news ce qui est logique.
La requête que je vous ai donné est bien sur pour cette partie qu'est publique.
Pour ce qui est de ses news j'ai la démo sur mon site clashdesign.be en page d'accueil

**marcha** · 18/01/2009, 20h10

Salut,

Ben ça serait bien que tu donnes le code HTML généré dans la partie
admin stp (avec les IDs) si tu veux de l'aide pour une fonctions qui
permet d'extraire l'ordre des news pour la mise à jour dans la db.

**gtraxx** · 20/01/2009, 13h48

oui désolé lol,

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
<div id="add_news">
 
			<h3>Ajouter une news</h3>
			<div id="AjaxOff">
				<form action="" method="post" class="globalForm" id="uForms">
					<fieldset>
					<p><input type="hidden" name="id_news" value="" /></p>
						<p><label for="news_date" class="inlinelabel">Date :</label>
							<input type="text" name="news_date" id="news_date" value="" readonly="readonly" />
						</p>
 
						<p><label for="sujet" class="inlinelabel">Sujet :</label>
							<input type="text" name="sujet" id="sujet" value="" />
						</p>
						<p><label for="texte" class="inlinelabel">Description:</label>
							<textarea name="texte" id="texte" rows="" cols=""></textarea>
						</p>
							<input type="submit" class="wymupdate" value="Send" />
 
					</fieldset>
				</form>
				</div>
		 <div class="resloading"><img id="AjaxOn" src="/framework/img/ajax-loader.gif" alt="Traitement en cours ..." /></div>
							</div>
			<table id="listNews" class="tablesorter">
				<thead>
				<tr>
					<th>ID</th>
 
					<th>DATE</th>
					<th>SUJET</th>
					<th>DESCRIPTION</th>
					<th>EDITER</th>
					<th>SUPPRIMER</th>
				</tr>
 
				</thead>
				<tbody>
														    <tr>
					    	<td>5</td>
						    <td>01/05/09</td>
						    <td>Prix cassés sur spas d'expo</td>
						    <td><p>Venez voir et essayer nos spas...</td>
 
						    <td class="delete_news"><a href="/admin/news?updatenews=5"><img src="/framework/img/edit.png" alt="edit" width="22px" height="22px" /></a></td>
						    <td class="delete_news"><a class="delete" title="5" href="#"><img src="h/framework/img/delete.png" alt="delete" width="22px" height="22px" /></a></td>
					    </tr>
							    					    <tr>
					    	<td>4</td>
						    <td>01/06/09</td>
						    <td>PORTES OUVERTES MARS 2009</td>
 
						    <td>Portes ouvertes les 21 et 22 mars...</td>
						    <td class="delete_news"><a href="/admin/news?updatenews=4"><img src="/framework/img/edit.png" alt="edit" width="22px" height="22px" /></a></td>
						    <td class="delete_news"><a class="delete" title="4" href="#"><img src="/framework/img/delete.png" alt="delete" width="22px" height="22px" /></a></td>
					    </tr>
							    					 				</tbody>
			</table>

Désolé de ma réponse tardive, internet non dispo depuis mercredi

**marcha** · 20/01/2009, 14h39

Salut,

Alors après un déplacement de tes news, tu peux récupérer l'ordre
avec le code suivant:

Code :

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

1
2
3
4
 
	var ids = [];
	$('#listNews tr td:first-child').each( function() { ids.push($(this).text()); });
	alert(ids.join(','));

Reste à envoyer une requête au serveur avec l'ordre en paramètre.

**gtraxx** · 21/01/2009, 23h03

il ne me reste qu'a modifier la table des news en ajoutant une colonne pour gérer l'ordre.
Donc l'id ne me servirai que pour l'insertion mais la colonne pour gérer l'ordre servirai alors de triage c'est bien sa ?

Code :

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

ORDER BY ID_NEWS DESC LIMIT 10

Ce code ne me sert plus à rien pour le triage alors je me pose la question comment ajouter l'ordre des triage pour avoir quelque chose de propre étant donné que ma table est :

Code :

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

1
2
3
4
5
6
7
CREATE TABLE `db_news` (
  `id_news` int(11) NOT NULL auto_increment,
  `sujet` varchar(255) NOT NULL,
  `texte` text NOT NULL,
  `news_date` date NOT NULL,
  PRIMARY KEY  (`id_news`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Il faut alors créer une table annexe avec un seul champs afin de lister l'ordre qui ne sera que les id de l'autre table c'est bien sa ????
Je suppose qu'il faut alors faire une requête pour afficher l'ordre depuis celle-ci.
Quel requête faire pour afficher les news suivant la table "order" avec ensuite l'interaction avec le code proposé qui effectuera la requête via ajax

renseignement sur le principe du drag&drop

jQuery

Discussions similaires

Partager

Partager