Ez egy AJAX, php,mysql Jquery, jquery.ingrid, jquery.ui, jquery.ui.datapicker, jtree, jquery.currencyFormat -ra épülő biztonságos és kényelmesen használható GNU/GPL licenc szerint szabadon felhasználható Javascript – PHP keretrendszer.
speciális form mezők, form validátor
adat tábla (adat böngésző)
Fa struktúra
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
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:
-
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.
-
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:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ingrid. the jQuery Datagrid</title>
….....
<link type="text/css" href="/jm/../css/ui-lightness/jquery-ui-custom.css" rel="stylesheet" />
<link rel="StyleSheet" href="/jm/../css/amform.css" type="text/css" />
<script type="text/javascript" src="/jm/../lib/jquery.min.js"></script>
<script type="text/javascript" src="/jm/../lib/jquery.cookie.js"></script>
<script type="text/javascript" src="/jm/../lib/jquery.ui.custom.js"></script>
<script type="text/javascript" src="/jm/../lib/jquery.amform.js"></script>
<script type="text/javascript" src="/jm/../lib/jquery.amform-hu.js"></script>
<!--- szükség szerint elhagyható elemek -->
<script type="text/javascript" src="/jm/../lib/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="/jm/../lib/jquery.ui.datepicker-hu.js"></script>
<script type="text/javascript" src="/jm/../lib/jquery.formatCurrency.js"></script>
<script type="text/javascript" src="/jm/../lib/jquery.formatCurrency.hu-HU.js"></script>
<script type="text/javascript" src="/jm/../lib/jquery.ingrid.js">
</script><script type="text/javascript" src="/jm/../lib/jquery.ingrid-hu.js"></script>
<link rel="StyleSheet" href="/jm/../css/ingrid.css" type="text/css" />
<script type=”text/javascript” src=”lib/jquery.tree.js”></script>
<link rel="StyleSheet" href="/jm/../css/dtree.css" type="text/css" />
<!-- kötelezö, fontos elem -->
< script type="text/javascript" src="/jm/valami.js.php"></script>
</head>
<body>
…......
</body>
</html>
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:
[{'fieldname':'fieldValue', 'fieldname':'fieldValue'....},
{'fieldname':'fieldValue', 'fieldname':'fieldValue'....}
…......
]
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:
- inicializálni kell a validátor rendszert
$(#formId).formInit();
- 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_OKAz 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!
- A form „ Rendben ” gombjának működése:
$("#formOK").button(); $("#formOK").click( function() { $('#formId').validator(); } );
-
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:
-
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.
-
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?
-
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.
-
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. - Í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