speciális form mezők, form validátor

start demo

adat tábla (adat böngésző)

start demo

Fa struktúra

start demo

 

Tulajdonságok

• AJAX kliens – szerver arhitektúra, MVC (adat model – viewer - controller) koncepció,

• popupMsg, pupuFrame,popupYesNo, popupNoYes dialóg ablakok,

• Dátum beviteli mező naptár poup -al,

• Pénznem beviteli mező (ezres elválasztó, két tizedere kerekítés), 

• Űrlap ellenőrzés (javascript alapú, AJAX szerver oldali adatlekéréssel kombinálható),

• Fastruktúra megjelenítés AJAX szerver oldali adatlekéréssel,

• Adat böngésző tábla AJAX szerver oldali lekéréssel,

• Többnyelvű felület kialakítása előkészítve (jelenleg csak magyar változat van készen),

• CSS fájlokkal image cserékkel testre szabható megjelenés,

• Biztonságos védett rendszer (a Javascript forrás programokat illetéktelen nem tudja közvetlenül elérni, a böngészőbe egy tömörített nagyon nehezen olvasható visszafejthető JS kód kerül letöltésre, ebben a kényes adatok egyszer használatos algoritmussal kódolt formában szerepelnek. Az AJAX kommunikáció egy formonként képzett egyszer használatos egyedi kulccsal védett.

• Továbbá rendelkezésre állnak a Jquery, jquery.ui alap szolgáltatásai is.

 

Licensz

Ez a szoftver és annak dokumentációja a GNU/GPL licenc szerint ingyenesen és szabadon felhasználható, másolható, továbbfejleszthető.

A GNU/GPL licenc magyar fordítása:

A GNU/GPL licenc jogilag hiteles eredeti angol nyelvű változata:

http://www.gnu.org/licenses/gpl.html

Felhasznált külső fejlesztésű erőforrások:

Jquery v1.7.2 http://jquery.com

Jquery.ui v1.8.21 http://jqueryui.com/about

Jjquery.ui.datapicker v1.8.21 http://jqueryui.com/about

jquery.formatCurrency http://www.gnu.org/licenses/

dTree 2.05 http://www.destroydrop.com/javascript/tree/

jquery.ingrid 0.9.3 kis mértékben átdolgozva, fejlesztve

     http://www.reconstrukt.com http://slu.sh

php http://www.php.net

mysql http://www.mysql.com

Köszönet a fejlesztőknek!

A felhasznált külső erőforrások licenszeit lásd a fejlesztők honlapjain!

Szerző

Fogler Tibor  Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát. 

WEB oldal: adatmagus.hu

Támogatás:

A felhasználói kérdéseket elsősorban ezen az oldalon a "Hozzászolások" részen várjuk és válaszoljuk meg, így a tapasztalatok válaszok egyuttal "közkinccsé" is válnak. Kérjük, hogy csak nagyon indokolt esetben irjon privát e-mail -t a  Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.  címre.

 

Ponzorálás:

Hálásan megköszönöm amennyiben bármilyen csekély összeggel támogatni tudja a további GNU/GPL licenszű szabadszoftverek fejlesztésére irányuló munkámat. Ebben az esetben utalja át a támogatást a

Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.  

fiókba és erről e-mail-ben is tjékoztasson!

A működés áttekintése

Szerver oldali könyvtár szerkezet:

 server_document_root/lib    a  keretrendszer JS és php fájljai
                     /css    a  keretrendszer stilus fájljai és
                             iamges könyvtárai
                     /projektName a projekt html és js.php fájljai
                     /projektName/models  a projekt adatmodeljei és
                                          a konfiguráció beállítás                                       
                                          (php fájlok)
        

Minden képernyőhöz minimum két fájl tartozik:

1. Javascript kód. Biztonsági okokból xxxxxxx.js.php fájlokban van tárolva (lásd lentebb), a Jquery koncepciónak megfelelően elkészítve.

2. html dokumentum. Ez egy komplett html dokumentum, tartalmazza a html headert, benne a stilus linkeket és a lib/xxxxxx.js javascript behivásokat is, valamint a képernyöhöz tartozó xxxxxx.js.php behívását.. A Jquery koncepciónak megfelelően ebben közvetlen JS kodok használata erősen ellenjavalt.

   Mindkét fájl a 'projektName/' könyvtárban található.

   A xxxx.js.php fájlok php includdal és egy kötelező php sorral egy „preprocesszort” futtatnak, ami a javascript kódot tömörítve és a legkényesebb adatokat egyszer használatos algoritmussal titkosítva küldi ki a böngészőnek. Továbbá egy formonként egyedileg képzett biztonsági kódot is elhelyez a javascript -ben amit az AJAX szerver hívásoknál ellenőrzésre használunk, ezzel is csökkentve az illetéktelen hozzáférések lehetőségét.

Amennyiben a form AJAX adatlekéréseket, adatmanipulációkat is végez akkor „adatmodell” is tartozik hozzá (egy adatmodelt több form is használhat). Az adatmodell php fájl a 'projekctName/models' könyvtárban. Ez egy 'dataModel' nevü osztályt definiál aminek különböző methodusai lehetnek amik az egyes adat lekérő, adat manipulációs akciókat szolgálják ki.

Az alábbi ábrán mindezt egy példa szemlélteti. A példában azt tételezem fel, hogy a program első képernyője (ami a projectName/index.html) a bejelentkező formot tartalmazza.

Programozói dokumentáció

A programokat Javascript és PHP nyelven írjuk. A javascript programokat a Jquery keretrendszer koncepciója szerint alakítjuk ki.

Értelemszerüen használható minden JQuery API funkció és minden JQuery.UI function

>

Általános konvenciók

Egy óldal képi megjelenését tartalmazó valami.html fájl:

Az oldalhoz tartozó Javascript kódot tartalmazó valami.js.php fájl:

<? php include '../lib/js.php'; ?> 
$( document).ready( 
     function() { 
…........
});
<? php jsOut(); ?> 

Adatmodel készítés, adat lekérés, adat manipuláció AJAX -al

A 'projectName/models' könyvtárba készitsünk egy config.php fájlt:

<? php
class amConfig {
  // if true send mysql errormsg into browser,
  // if false send only mysql errorNum and 'SQL ERROR' string
  var $resultSQLerrorMsg = false;
  // if true save sql into model\lastsql.sql file for 
  // development error find 
  var $saveSQL = false;
  // mysql connect info
  var $mysqlhost = 'localhost';
  var $mysqluser = 'yourMYSQLuserName';
  var $mysqlpassword = 'yourMYSQLpassword';
  var $mysqldatabase = 'yourMYSQLdtabaseName';
  var $prefix = '';
  ?>

Ugyanide készitsük el az adatmodelname.php fájlt vagy fájlokat:

<? php 
/*   adatmagus ajax data model */
global $records, $totalRecords, $errorNum, $errorMsg, $config;
include 'config.php';
$config = new amConfig();
mysql_connect($config->mysqlhost,$config->mysqluser,
    $config->mysqlpassword);
mysql_query('set names utf8');
mysql_select_db($config->mysqldatabase);
class dataModel {
   public function actionName1() { ….} 
   public function actionName2() { ….} 
   …....
}
?>

Az adatmodell methodusainak a $records globális változóba egy tömböt kell elhelyezniük, ahol a tömb elemei egy-egy rekordnak felelnek meg. Mindegyik tömb elem egy objektum ami „fieldname'=fieldValue propertyket tartalmaz.

JSON szintaxis szerint:

Az ingrid hivások POST paraméterben a következő adatokat küldhetik:

filter sql feltétel string urlencoded formában

sort rendezés, oszlopszám (a bal szélső oszlop száma:0

dir rendezési irány 'asc' vagy 'desc'

pagesize több lapos megjelenés esetén a jelenleg kért sorok száma

page több lapos megjelenés esetén az aktuális lapszám az első lap : 1

a (page-1)*pagesize sorral kell kezdeni a lekérést

Ezen adatok elérésére a Request('name') hívás is használható.

A $totalRecords globális változóban a 'pagesize' és 'page' adatot figyelmen kívül hagyva, de a 'filtert' figyelembe véve lekérdezett összes rekordszámot kell elhelyezni.

A $errorNum és $errorMsg globális változókba értelemszerűen a MYSQL hívás esetleges hibajelzéseit kell elhelyezni.

Lásd a dem_ingrid/konferenciak.php példát.

Adatmanipuláló sql futtatása a Javascript kódban:

$.ajax({'url':'..\lib\remote.php', 
  'type':'POST', 
  'data':{'model':@”..\projektName\modelName.php”@, 
        'action':@”actionName”@, 
        'paramName'.'paramValue'), 
         …...
       },
  'success':function() { …......} 
);

HTML include

A body részben használhatunk includeokat is:

<div class="include includeFileURL"></div>

modal popup dialogus ablakok

Egyszerü üzenet ablak „Rendben gombbal”

popupMsg(title,msgHtml);

Másik html oldal behívása modal popup dobouban

popupFrame(title,url,x,y,w,h);

Igen-nem kérdés, az Igen az alapértelmezett válasz

popupYesNo(title,msgHtl, 
    function() {yes click esemény kezelő },
    function() {no click esemény kezelő });

Igen-nem kérdés, a Nem az alapértelmezett válasz

popupNoYes(title,msgHtml,
    function() {yes click esemény kezelő },
    function() {no click esemény kezelő });

Üzenet ablak definiált gombokkal és funkciókkal,az első az alapértelmezett

popupMsg(title,msgHtml, {
  'gombFelirat':function() { gombClick eseménykezelő },
  'gombFelirat':function() { gombClick eseménykezelő }, ........
});

 

Speciális űrlap mezők

Dátum típusú ürlap mező:

Mindössze a HTML fájlban a class=”date” jelzést kell az input -tagbe beilleszteni.

Pénznem típusú ürlap mező:

Mindössze a HTML fájlban a class=”currency” jelzést kell az input -tagbe beilleszteni.

A nmező aktuális értékének lekérésére a $(#id).asNumber() szintaxis használandó.

Űrlap ellenőrzés, feldolgozás

A javascript kódban:

1. inicializálni kell a validátor rendszert

   $(#formId).formInit();

2. definiálni kell a mező ellenörző függvényeket

   $(#formId).setValidator(fieldId, function() {….})

   Az ellenörző függvények a

   $(#fieldId).setValid(fieldId, valid_status, validMsg)

   hívással kell az ellenőrzés eredményét visszaadnia. valid_status lehet:
   VALID_ERROR
   VALID_WARNING
   VALID_OK

   Az ellenorzó függvények szinkron vagy aszinkron AJAX hívásokat is tartalmazhatnak, ez esetben az AJAX 'success' eljárásban kell a 
   $(#formid).setValid(fieldid,valid_status,hibaüzenet); hívást elhelyezni.

   NAGYON FONTOS! A setValid hívás minden ellenorzó függvényben kerüljön végrehajtásra akár jó az adat akár nem!

3. A form „ Rendben ” gombjának működése:

   $("#formOK").button();
   $("#formOK").click(
        function() {    
            $('#formId').validator();
        }
   );  
     

4. A form sikeres ellenörzés után aktivizálodó feldolgozó eljárása:

   $('# formId').setOKfunction( 
      function() {
         …..........
      }
   ); 
     

   Lásd amform_demo.js.php

Fa struktúra megjelenítés

A HTML kódban helyezzünk el egy „konténer” DIV elemet, ahová a fa szerkezet kerülni fog.

A Javascript kódban:

   $('# konténerId').tree({
     'ajax':true,     
     'model':@"../tree_demo/models/treedata.php"@,     
     'action':@"getTreeData"@,
     'nodeClick':function(id) {
         alert('document click '+id);
     },     
     'loadFun':function(result) {}
   }); 

Lásd tree_demo/tree_demo.js.php

Adatböngésző táblázat megjelenítése

A HTML kódban helyezzünk el egy „konténer” TABLE elemet, ahová az adattábla kerülni fog.

A thead részben alakítsuk ki a táblázat fejlécet. A tbody lehet üres is, de feltétlenül létezzen!.

A Javascript kódban:

var mygrid1 =
$("#table1").ingrid({ 
        url: '../lib/remote.php',
    type:'POST',
    dataType:'json',
      height: 350,
    savedStateLoad: true,
    totalRecords:10,  //it is must! 
    recordsPerPage:10,
    sortedCol:0,
        extraParams:{
      'model':@"../ingrid_demo/models/konferenciak.php"@,        
      ' action':@"getRecords_table1"@,
      'pagesize':10,
      'skey':skey
    },
    onRowSelect: function(tr, selected){              
     $('tr.grid-row-even').removeClass('grid-selected');              
     $('tr.grid-row-add').removeClass('grid-selected');
     var str = selected ? 'SELECTED' : 'UNSELECTED';
     var tr_html = $(tr).html();
     $(tr).addClass('grid-selected'); 
     popupMsg('row click',str + '<code>' + tr_html + '</code>');
    } 
});
$( window).unload(     
  function() {
    $.ajax({url:'../lib/remote.php', 
            data:{'model':@"../ingrid_demo/models/konferenciak.php"@'},
                  'action':@"close_getRecords"@}    
            );
           }
    );
);    

lásd ingrid_demo/ingrid_demo.js.php

Biztonsági megfontolások

Mivel a JavaScript kód letöltődik a böngészőbe és ott illetéktelenek is hozzáférhetnek minimalizálni kell a JavaScript kódban lévő kényes adatok mennyiségét, továbbá meg kell akadályozni, hogy aaz AJAX szerver funkciókat illetéktelenek hívhassák.

Ennek érdekében ez a rendszer többszintű védelmet tartalmaz:

1. A böngészőkbe beépített alap AJAX védelmi rendszer megakadályozza, hogy AJAX hívásokat harmadik gépről küldjenek.

2. Ha esetleg ezt a védelmet valaki át tudja lépni akkor a rendszer saját védelmi rendszerébe ütközik. Ugyanis a Javascript preprocesszor minden letöltésekor generál egy egyedi kódot, amit SESSION-ban is tárol és kiküld a böngészőbe is. Az ajax szerverek csak akkor szolgálják ki a kérést ha ez a kód is érkezik a kéréssel. Továbbá a rendszer ellenőrzi, hogy a kérés AJAX által generált kérés-e?

3. A javascript preprocesszor a javascript kódban az 'adatmodel' neveket és 'action' neveket SESSIONban tárolja egy-egy minden alkalommal egyedileg képzett névhez rendelve, és a böngészőbe ezeket a session változó neveket küldi el. Így a kliens oldalon ezen adatok nem ismerhetőek meg, nem fejthetőek vissza.

4. A fejlesztők egyéb kényes adatainál is használhatja ezt a titkosítási eljárást.
   A javascript forrás programba ezeket kényes adatokat @”xxxxxxxx”@ formában helyezzék el.
   A preprocesszor ezeket „SAFE_#########” kóddal fogja helyettesíteni és ezen a néven SESSION -ban tárolja. Ezután a fejlesztő által írt adatmodel php program feladata a név alapján az adat kiolvasása a session változóból, és használat után a session változó törlése.

5. Így ha esetleg egy hacker minden védelmi rendszert kijátszva mégis aktivizálni tudna egy AJAX hívást, akkor sem tudja a kényes adatokat (pld. adat model név és akció kód) megadni mivel az egyszer használatos session nevet és a hozzá tartozó session változót a szerver gépen nem tudja előállítani.

Megjelenés testreszabása

Az oldalak megjelenése a „css” könyvtárban lévő css fájlok javításával és az ez alatt lévő

'xxxxxxx_img' könyvtárakban lévő képfájlok cseréjével módosítható.

Más nyelvű változat kialakítása

A l'ib' könyvtárban lévő 'xxxxxxxxx-hu.js' illetve 'xxxxxxxxx.hu-HU.js' fájlok lemásolásával és módosításával oldható meg. Természetesen ennek megfelelően módosítani kell a HTML oldalak head részét is.

Budapest 2012.08.01

Fogler Tibor