Specification on tables display(ergonomics) in PhpPgAdmin 4.2.3

Size: px

Start display at page:

Download "Specification on tables display(ergonomics) in PhpPgAdmin 4.2.3"

Barnard Hood
6 years ago
Views:

1 Specification on tables display(ergonomics) in PhpPgAdmin Author: Didier SERVOZ Compagny: BULL SA France Manager: Thierry MISSILLY Date:21/06/10

2 Table of contents Table of contents Background Limitation of the actual display for big SQL tables Modification purpose Characteristics Feature 1: The columns choice Feature 2: Saving changes Source Code Notice...13

3 1 Background: The phppgadmin version allows to display the SQL table content in the following manner: The SQL table recorded in the data base, is displayed by a HTML table produced by PhpPgAdmin. The table fields are the columns and the data records are the HTML table lines. 2 Limitation of the actual display for big SQL tables : The user can t have the ability to choice the columns he wants to display on the screen (without making SQL query). For example, if the user is only interested by the data of the first and last column, phpphadmin displays all the fields of the table. And on large SQL table, it adds an horizontal scrolling which could be difficult to find the last column data as one part of the line record is not visible. From my point of view, this lack of visibility could make lost of time. 3 Modification purpose: My modification purpose is to allow the user to choose the table columns, he wants to display on the screen and save these modifications in his context. That involve a best visibility of data and a better effective data research on large tables. This functionality can be useful for non SQL people. In this way, all the selected data are in a single screen, giving to the user the ability to create a kind of dynamic SQL view on one table. 4 Characteristics : We propose a patch that allows the user to configure the fields he wants to see displayed on the screen and save the changes. These features are useful for users who regularly use the same table in the same Web browser session. This patch includes : The choice of columns. The save of changes. Language used: Javascript et Php. Change file: display.php 2 news file: 1 JavaScript file and 1 Php file. Test Environment: Firefox and phppgadmin Not tested on IE and other Web browsers.

4 1 Feature 1: The columns choice : How does it work: The table columns which are not useful for the user, are hidden by a click on a button bottom the column header.

4 4 1 Feature 1: The columns choice : How does it work: The table columns which are not useful for the user, are hidden by a click on a button bottom the column header. The hidden columns can be restore dynamically via a link.. Code: It plays on the properties of cells of the HTML table. Each HTML table cells have a unique id for each column. With the id (which determines an object), you can play on cell properties through javascript functions. Restore the hidden column Allow hidden the column The new features

5 4 2 Feature 2: Saving changes: How does it work: Saved hidden columns for each table. The switch on different tables preserve the customisation of each HTML tables. Each table session is unique. The session's name is : database's name + table's name. code : The Feature uses the PHP sessions and the Ajax Framework functionality. Each time that user hide a column, the column id is saved in the table session variable. Thus, each table session corresponds to a variable containing the entire hidden columns id. Client side You click on a column to hide Switch back on a previously modified a table Send id on the server via Ajax Recovery of the table session File Session Server side Backup Id in a table session variable Reading the requested table session Sends data of the table session contained Restore an hidden column Sends column id to remove from the table session variable Rewrite the session variable without id ask.

6 5 Source Code: Javascript Resize5.js // Allow hidden the column. function hidden(k){ var tableau =document.getelementbyid('tableau'); var i; var obj=document.getelementbyid('s'+k); var obj1=document.getelementbyid('dyn'); var lien=document.getelementbyid('val'+k).innerhtml; obj1.style.display=''; if(document.getelementbyid('cols'+k)==null) obj1.innerhtml = obj1.innerhtml +'a id=cols'+k+' href=javascript:; onclick=replay('+k+'); class=topba> '+lien+'/a>&nbsp'; else document.getelementbyid('cols'+k).style.display=''; obj.style.display='none'; document.getelementbyid('th'+k).style.display='none'; var k=k+1; for(i=6;i(tableau.rows.length)+5;i++) document.getelementbyid('td'+i+k).style.display='none'; // Restore the hidden column with a link. function replay(k){ var tableau =document.getelementbyid('tableau'); var i; var obj=document.getelementbyid('s'+k); document.getelementbyid('cols'+k).style.display='none'; document.getelementbyid('th'+k).style.display=''; obj.style.display=''; var k=k+1; for(i=6;i(tableau.rows.length)+5;i++){ document.getelementbyid('td'+i+k).style.display=''; document.getelementbyid('size'+i+k).style.display='';

7 submitform(k 1,3); //Framework Ajax ==> Compatibility Test of web browsers.. function checkbrowers(req){ if (window.xmlhttprequest){ // Objet de la fenêtre courant req = new XMLHttpRequest(); // Firefox, Safari,... else if (window.activexobject){ // Version Active req = new ActiveXObject('Microsoft.XMLHTTP'); // Internet Explorer return req; //Query result function prossess(req){ req.onreadystatechange = function(){ if(req.readystate == 4){ if(req.status == 200){ recup( req.responsetext); ;

8 //creation, reading and writing sessions function submitform(k,vale){ var req = null; var sess=document.getelementbyid('table').value; req=checkbrowers(req); switch(vale){ case 1: var content='indice='+sess+'&data='+k+'&val=1'; send(req,content); hidden(k); break; case 2: prossess(req); var content='indice='+sess+'&val=2' send(req,content); break; case 3: var content='indice='+sess+'&data='+k+'&val=3'; send(req,content); break; function send(req,content){ req.open('post', 'sessions.php', true); req.setrequestheader('content Type', 'application/x www form urlencoded'); req.send(content); //applies the contents of the session function recup(data){ var tab=data.split('/'); for(var i=1;itab.length;i++) hidden(parseint(tab[i]));

9 File update_global.php.patch 220,229d219 span.topb{ margin bottom:5px; background color: #E6E6CC; a.topba { background color: transparent; border: 2px solid #E6E6CC;

10 The file PHP:?php if (!ini_get('session.auto_start')) { session_name('ppa_id'); session_start(); $myarray=&$_post; $indice=$myarray['indice']; switch($myarray['val']){ case 1: $_SESSION[$indice]=$_SESSION[$indice].'/'.$myarray['data']; echo $_SESSION[$indice]; break; case 2: $indice=$_post['indice']; echo $_SESSION[$indice]; break; case 3: $chain=explode('/',$_session[$indice]); $count=count($chain); $chain2; for($i=1;$i$count;$i++){ if ($chain[$i]!=$myarray['data']) $chain2.="/".$chain[$i]; $_SESSION[$indice]=$chain2; break;?>

11 File update_display.php.patch 254,255d253 echo "script language='javascript' src='resize5.js'> /script>"; 341,348c339 echo"br/>"; echo "span class='topb'>rétablir:/span>span id='dyn'> /span>br/>br/>"; echo "table id='tableau'>\ntr>"; > echo "table>\ntr>"; 378,380c369 $test= $_REQUEST['database'].$_REQUEST['table']; echo" input type='hidden' id='table' value='",$test,"'>"; echo "th id='th",$j,"' class=\"data\">div id='s",$j,"' style=' overflow:hidden; '>a href=\"display.php?{$str&sortkey=", ($j + 1), "&sortdir="; > echo "th class=\"data\">a href=\"display.php?{$str&sortkey=", ($j + 1), "&sortdir="; 384,385c373,374 "&page=". urlencode($_request['page']), "\">div id='val",$j,"'>", $misc >printval($finfo >name), "/div>/a>br>a href='javascript:;' onclick='submitform(",

12 $j,",1);'>img src='images/themes/default/iconmin.gif' width='10px' height='10px'/>/a>div>/th>\n"; > "&page=". urlencode($_request['page']), "\">", > $misc >printval($finfo >name), "/a>/th>\n"; 391c380 $u=6; > 426,427c415,416 echo "td id='td",$u,$j,"' class=\"data{$id\" style=\"white space:nowrap;\">div id='size",$u, $j,"' style=' overflow:hidden; '>", $misc >printval($v, $finfo >type, array('null' => true, 'clip' => ($_REQUEST['strings']=='collapsed'))), "/div>/td>"; > echo "td style=\"white space:nowrap;\">", > $misc >printval($v, $finfo >type, array('null' => true, 'clip' => ($_REQUEST['strings']=='collapsed'))), "/td>"; 433d421 $u++; 435,437c423 echo "/table>\n";?> script> onload=submitform(null,2);/script>?php > echo "/table>\n";

13 6 Notice: 1: Patch the File display.php + global.css 2: Insert iconmin.gif in /usr/share/phppgadmin/images/themes/default/ 3: Insert the file resize5.js and session.php in /usr/share/phppgadmin/

A synchronous J avascript A nd X ml

A synchronous J avascript A nd X ml The problem AJAX solves: How to put data from the server onto a web page, without loading a new page or reloading the existing page. Ajax is the concept of combining