A jquery.clickheat egy jquery plugin, ami lekezeli a kattintásokat a kijelölt tartományban. jquery.clickheat



Hasonló dokumentumok
WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK

A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram.

SQL*Plus. Felhasználók: SYS: rendszergazda SCOTT: demonstrációs adatbázis, táblái: EMP (dolgozó), DEPT (osztály) "közönséges" felhasználók

Egészítsük ki a Drupal-t. Drupal modul fejlesztés

Java és web programozás

Smarty AJAX. Miért jó ez? Ha utálsz gépelni, akkor tudod. Milyen műveletet tudunk elvégezni velük:

Miért jó ez: A Xampp csomag előnyös tulajdonságai: rendkívül jól felszerelt naprakész telepíteni-és frissíteni gyerekjáték.

Kedvenc Linkek a témakörben: MySQL mindenkinek Vizuális adatbázis tervezés

Java és web programozás

Az SQL*Plus használata

Adatbázis Rendszerek II. 5. PLSQL Csomagok 16/1B IT MAN

Az Educatio weboldalain elhelyezhető hirdetések technikai paraméterei

Útmutató az OKM 2007 FIT-jelentés telepítéséhez

Adatbázis Rendszerek II. 8. Gyakorló környezet

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.

12.óra jquery Framework #1. Gyimesi Ákos

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.

Tranzakciókezelés PL/SQL-ben

Adatbázis Rendszerek I. 10. SQL alapok (DML esettanulmány)

Memória játék. Felhasználói dokumentáció

OO PDO. Tehát PDO használatával, könnyen átállhatunk egy másik adatbáziskezelőre, anélkül hogy a kódot teljes egészében újraírnánk.

A relációs adatbáziskezelés szabványos nyelve Két fő csoportba sorolhatók az utasításai

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović

Választó lekérdezés létrehozása

Kedvenc Ingyenes editorok avagy milyen a programozó jobbkeze? PSPAD editor DEVPHP IDE

ANDROID ALKALMAZÁSFEJLESZTÉS

Flash és PHP kommunikáció. Web Konferencia 2007 Ferencz Tamás Jasmin Media Group Kft

Bevezetés: az SQL-be

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

A Zotero hivatkozáskezelő program bemutatása. Mátyás Melinda

Tisztelt Felhasználó!

Adatbázis. AMP! (Apache + MySql + PHP) XAMPP, LAMP, MAMP, WAMP et cetera

Adatbázis rendszerek SQL nyomkövetés

LBRA6i integrált rendszer

Kilencedik témakör: Lazarus-Firebird. Készítette: Dr. Kotsis Domokos

PHP-MySQL. Adatbázisok gyakorlat

Készítette: Szabóné Nacsa Rozália

Valimed API. REST API a magyarországi orvos pecsétszámok validálására

Adatbázisok. 8. gyakorlat. SQL: CREATE TABLE, aktualizálás (INSERT, UPDATE, DELETE), SELECT október október 26. Adatbázisok 1 / 17

A gyakorlat során MySQL adatbázis szerver és a böngészőben futó phpmyadmin használata javasolt. A gyakorlat során a következőket fogjuk gyakorolni:

Adatbázis Rendszerek II. 2. Gyakorló környezet

Miért érdemes váltani, mikor ezeket más szoftverek is tudják?

Objektumorientált programozás

Adatbázis Rendszerek II. 2. Ea: Gyakorló környezet

Tudás Reflektor. Copyright 2011; Kodácsy Tamás;

"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell

Sakk-játék. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

Oracle Spatial. Térbeli adatot tartalmazó tábla: Geometry table Legalább 2 oszlopa van: Elsődleges kulcs, SDO_GEOMETRY típusú oszlop.

ADATBÁZIS VERZIÓKÖVETÉSE: LIQUIBASE

Thermo1 Graph. Felhasználói segédlet

Tartalomjegyzék. Tartalomjegyzék 1. Az SQL nyelv 1 Az SQL DDL alapjai 2

SQL ALAPOK. Bevezetés A MYSQL szintaxisa Táblák, adatok kezelésének alapjai

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

SQL haladó. Külső összekapcsolások, Csoportosítás/Összesítés, Beszúrás/Törlés/Módosítás, Táblák létrehozása/kulcs megszorítások

Bevezetés Működési elv AJAX keretrendszerek AJAX

SQL DDL-1: táblák és megszorítások

Web-fejlesztés NGM_IN002_1

SQLServer. Particionálás

Apró Windows Explorer trükkök

Gyakorlati vizsgatevékenység A

5-ös lottó játék. Felhasználói dokumentáció

Vizuális programozás gyakorlat

Dr. Pál László, Sapientia EMTE, Csíkszereda WEB PROGRAMOZÁS 4.ELŐADÁS. Adatbázis alapú alkalmazások készítése PHP-ben

Jquery. Konstantinusz Kft.

Mobil SEO Kell-e külön foglalkozni a mobil jelenlétünk kereső optimalizálásával? Adam Lunczner Digital Director

Hasznos gyűjtemények:

F-Spot Fotókezelő Gthumb képmegjelenítő ImgSeek Gimp

COMET webalkalmazás fejlesztés. Tóth Ádám Jasmin Media Group

Adattípusok. Max. 2GByte

Telepítési útmutató. 1.1 lépés : Telepítés típusa - ablak :

B I T M A N B I v: T M A N

Adattípusok. Max. 2GByte

Tartalomjegyzék 2. RENDSZER FELÉPÍTÉSE... 3

Gyakorlás: Hozzunk létre egy Alkalmazottak táblát AZO szám, Részleg szöveg, Munkakör szöveg és BelépésDátuma dátum típussal.

Válltáska Ubuntu 8.04 Hardy Heron. A Hardy Heron jelentését feszegető téma:

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.

Egyetemi könyvtári nyilvántartó rendszer

Weblap készítése. Fapados módszer

Bevezetés az SQL-be. Tankönyv: Ullman-Widom: Adatbázisrendszerek Alapvetés Második, átdolgozott kiadás, Panem, 2009

Adatbázis-lekérdezés. Az SQL nyelv. Makány György

Adatbázis rendszerek 7. előadás Térinformatikai adatbázisok. Molnár Bence

RBLDNS DNS-based blocklists management felhasználói kézikönyv

Excel ODBC-ADO API. Tevékenységpontok: - DBMS telepítés. - ODBC driver telepítése. - DSN létrehozatala. -Excel-ben ADO bevonása

SQL PÉLDATÁR. készült a PTE TTK Iskolai informatika III. kurzus teljesítésére

Adatbázisok elleni fenyegetések rendszerezése. Fleiner Rita BMF/NIK Robothadviselés 2009

Téradatbázisok használata QGIS-ből A DB kezelő modul 2.2 verzió

WordPress segédlet. Bevezető. Letöltés. Telepítés

Webfejlesztés 4. alkalom

PHP alapjai, bevezetés. Vincze Dávid Miskolci Egyetem, IIT

Az indexelés újdonságai Oracle Database 12c R1 és 12c R2

Internet TV Broadcaster kézikönyv

MS ACCESS 2010 ADATBÁZIS-KEZELÉS ELMÉLET SZE INFORMATIKAI KÉPZÉS 1

DAT adatcserefájl AutoCAD MAP DWG mapobject konvertáló program dokumentáció

Felhasználói kézikönyv a WEB EDInet rendszer használatához

Elemi alkalmazások fejlesztése IV.

Web programoz as

KlausenMobi. Követelmény dokumentáció. Verzió: 1.0. Dátum: Státusz: Released

Adatbáziskezelı-szerver SQL. Relációs adatbázis-kezelık. Relációs adatszerkezet. Házi feladat

Internet programozása. 1. előadás

K&H token tanúsítvány megújítás

Átírás:

A jquery.clickheat egy jquery plugin, ami lekezeli a kattintásokat a kijelölt tartományban. jquery.clickheat Egy kijelölt terültet vagy az egész dokumentumon lekezeli a kattintásokat, majd egy AJAX (GET) kéréssel elküldi a feldolgozó PHP5 fájlnak, ami letárolja az egér koordinátákat. A program futtatásához PHP5-kel, SQLite(2) kiterjesztések (sqlite_open). JavaScript Draw A megjelenítéshez egy javascript rajzoló plugint jquery.draw.js használ. A rajzoló osztály egyébként nagyon hasznos és érdekes módon valósítja meg a megjelenítést. A konkrét példában a kockákat pl.: CSS-el, XHTML-el oldja meg. de rengeteg műveletet támogat (drawrect, drawpolyline, drawellipse, drawbezier, fillrect, fillpolygon, fillellipse, fillarc,fillbezier). A megjelenítést böngésző függetlenül teszi. A publikus verzióban a kattintások nincsenek URL-hez vagy böngésző típushoz kötve, tehát bármelyik oldalon kattintanak azt egyként kezeli. Teszteltem Firefox-ban, Chormium-ban, IE6-7-8-ban. Van belöle egy teszt verzió amit ide kattintva megtekinthetsz. De egy a Generátorunkkal készült Site a WebKungFu.hu ahol valós körülmények között is megtekintheted a működését. Az oldalon egyébiránt online játszható ingyenes Flash játékokat gyűjtöttek kategóriákba. Mire jó ez? Feltérképezheted a honlapodon, melyek azok a forró területek ahol a felhasználók sokat kattintanak. Ennek a hasznát nem ecsetelném. Megláthatod vele, mik azok a területek ahol kattintanak (a gyengébb felhasználók), de igazából nincs is Link a terülten. Szövegek, címek amiket hivatkozásnak vélnek Hasznos ötleteket ad UI átgondoláshoz

Hasznos ötleteket ad UI átgondoláshoz Működés, Hasznos beállítások: G Billentyű lenyomására megjeleníti az eredményeket DB törlés: clickheat.php?type=dbreset, de mivel ezt átállítod írd be azt, vagy töröld le az adatbázis fájlt, a script ha nincs meg létrehozza. PHP oldalon: A clickheat.php fájlt meghívhatod külön is, így megnézheted hogy a rendelkezésre állnak-e a szükséges függvények, és egyben megnézheted az SQLite adatbázis létrejöttét, vagy törölheted azt. case dbreset : -et érdemes átírni, mert bárki törölheti az adatbázisod clickheat.php?type=dbreset Adatbázis neve és elhelyezkedése. Ezt is érdemes megváltoztatni. Ha nem akarod megjeleníteni az adatokat ezt is nevezd át: case clickheat : Telepítés: A #[#/body#]# elem elé vagy a #[#head#]##[#/head#]# elem közé illeszd bele az alábbi kódot, persze módosítsd az útvonalakat ha kell. ##[##pre class="csspre" ##]## #[#script src="./js/jquery-1.3.2.min.js" type="text/javascript"#]##[#/script#]# #[#script src="./js/jquery.draw.min.js" type="text/javascript"#]##[#/script#]# #[#script src="./js/jquery.clickheat.min.js" type="text/javascript"#]##[#/script#]# #[#script type="text/javascript"#]# #[#!-- $(document).ready(function() { //teljes dokumentumra $('html').clickheat(); //csak adott elemre //$('div#lorem').clickheat(); //paraméterekkel var options={ phpfile: "./clickheat.php", rectx: 20, recty: 20, rectstroke: 20, rectcolor: "orange", rectalpha:.5, keycode: 71 ; //$('html').clickheat(options); //--#]# #[#/script#]# ##[##/pre##]## A JS kód: ##[##pre class="csspre" ##]## (function($){ $.fn.clickheat = function(options){ var settings = jquery.extend({ phpfile:./clickheat.php, rectx: 10, recty: 10, rectstroke: 10, rectcolor: red, rectalpha:.2,

rectalpha:.2, keycode: 71, options); $( body ).prepend( ); //kattintáskor letároljuk a koordinátákat //PHP hívás, SQLite letárolás $(this).click(function(e){ var xcoord=e.pagex; var ycoord=e.pagey; //alert( X: + xcoord + Y: + ycoord); $.get(settings.phpfile, { type: click, x: xcoord, y: ycoord //Megjelenítés billentyűzet lenyomásra Alt Gr + g //JSON eredményt várunk a PHP-fájltól (x,y) koordinátákat //és kockáztatunk $(document).keydown(function(e){ //alert(e.which); //altgr+g if(e.keycode!=settings.keycode){ return; //kirakott elemek eltávolítása $(.clickheatdiv ).remove(); $.getjson(settings.phpfile, { type: clickheat,function (json) { //JSON válasz feldolgozása $.each(json, function(i,item){ $( #clickheat ).drawrect(item.x, item.y, settings.rectx, settings.recty, { color: settings.rectcolor, stroke: settings.rectstroke, alpha: settings.rectalpha )(jquery); ##[##/pre##]## PHP kód: error_reporting(0); /** * A működéshez szükség van az SQLite2 PHP támogatásra */ //függvény teszt if(!function_exists( sqlite_query )){ die( SQLite függvények hiányoznak! ); //sql tábla és Index $scheme=<<create TABLE clickheat (

$scheme=<<create TABLE clickheat ( id INTEGER PRIMARY KEY DEFAULT NULL, tipus varchar(10) DEFAULT NULL, x INTEGER DEFAULT NULL, y INTEGER DEFAULT NULL, datum timestamp DEFAULT NULL ); CREATE INDEX index_clickheat ON clickheat (tipus, x, y, datum); SQL_SCHEME; // ezt érdemes áthelyezni védett helyre, vagy a nevét megváltoztani! // /var/www/db/ $dbpath= dirname( FILE ). /db/ ; // fájl neve, változtasd meg! $dbname= clickheat.sqlite ; // /var/www/fajl.sqlite $dbfile= $dbpath.$dbname; $error_message=false; $link=false; //unlink($dbfile); if(!file_exists($dbfile)){ //adatbázis és táblák létrehozása $link=sqlite_open($dbfile, 0666, &$error_message); $sorok=array_map( trim,explode( ;, $scheme)); foreach($sorok as $query){ if(!empty($query)){ sqlite_query($link,$query, &$error_message); //kapcsolódás if(!$link){ $link=sqlite_open($dbfile, 0666, &$error_message); $type=trim(strip_tags($_get["type"])); $x=(int)$_get["x"]; $y=(int)$_get["y"]; $timestamp=time(); $qtpl= INSERT INTO clickheat (id,tipus,x,y,datum) VALUES(null, %s,'%s,'%s,'%s ) ; $query=false; switch($type){ //ennél a metódusnál visszadjuk JSON formátumban az adatokat case clickheat : $query= SELECT x,y FROM clickheat ; $result=sqlite_query($link, $query); $rows=sqlite_fetch_all($result, SQLITE_ASSOC); die(json_encode($rows)); //adatbázis fajl törlése //eszt is cseréld ki case akarmi : mert bárki meghívhatja kivülről //clickheat.php?type=dbreset és már törli is! case dbreset : unlink($dbfile); exit;

//kattintáskor letároljuk a koordinátákat case click : $query=sprintf($qtpl,$type,$x,$y,$timestamp); default: return; //végrehajtjuk a letárolást if(is_resource($link) && $query){ sqlite_query($link,$query, &$error_message); return;?> Érdekes részletek, JSON elkészítése PHP oldalon és JS feldolgozása: //az SQL kérésből a feldolgozott adatok a rows-ban $rows=array( sql eredemények feldolgozva! ); //AJAX kérésnek kírjük és kilépünk a futásból die(json_encode($rows));?> JQuery AJAX kérés és feldolgozás aminek a válaszát JSON formátumban kapjuk: ##[##pre class="csspre" ##]## $.getjson(settings.phpfile, { type: clickheat,function (json) { //JSON válasz feldolgozása $.each(json, function(i,item){ $( #clickheat ).drawrect(item.x, item.y, settings.rectx, settings.recty, { color: settings.rectcolor, stroke: settings.rectstroke, alpha: settings.rectalpha ##[##/pre##]## Megjegyzések: Van egy ingyenes nyílt forráskódú PHP GD alapú projekt amit érdemes meglátogatni a témakörben. A letöltött források a külsős Lib-ek licenének a figyelembevételével használhatók. A billentyűzet kódok kezelésében valami fantasztikus káosz uralkodik, még jó hogy vannak oldalak ahol ezek szerepelnek. hasonló bejegyzés: 1. jquery topmenu plugin animate funkciókkal 2. JQuery és AJAX 3. JQuery alapozó 4. SQLite jegyzet 5. jquery-attribútumok és értékek kezelése Téma: Webalkalmazás fejlesztés Forrás: http://opendir.hu Szerző: ArtH2O

Szerző: ArtH2O Erdeti URL: http://opendir.hu/webalkalmazas/jquery/364-clickheat-jquery-php5-sqlite-ajax/