Kattintás naplózása jQuery, PHP5, SQLite alapokon
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
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.
- 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.
<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>
A JS kód:
(function($){
$.fn.clickHeat = function(options){
var settings = jQuery.extend({
phpFile: "./clickheat.php",
rectX: 10,
rectY: 10,
rectStroke: 10,
rectColor: "red",
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);
PHP kód:
<?php
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=<<<SQL_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));
break;
//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;
break;
//kattintáskor letároljuk a koordinátákat
case "click":
$query=sprintf($qTPL,$type,$x,$y,$timeStamp);
break;
default:
return;
break;
}
//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:
<?php
//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:
$.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
});
});
});
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.
Cikkhez tartozó letöltés(ek):
jquery.clickheat.zip- Kattintás naplózás és megjelenítés grafikus formában, jQuery, PHP5, SQLite alapokon.
32899 Byte
application/download
Bejegyzés küldése
További kapcsolódó oldalak
- jQuery.validity kliensoldali adat ellenőrzés
- jQuery Loader V2
- Többlépcsős HTML form-ok jQuery-vel
- jQuery-Accessible-RIA
- Több fájl feltöltése egyidőben
- HTML tartalmak betöltése Jquery-vel
- Saját jQuery függvény készítés
- JQuery és AJAX
- jQuery eseménykezelés és effektek
- jQuery-attribútumok és értékek kezelése
- jQuery kijelölők-selectors
- JQuery alapozó
- JQuery felhasználói interfész teszt
- JQuery és a LightBox klónok támadása
- JQuery nagyon Link
- Hasznos JQuery Pluginek
- JQuery puska
Blogmarkok
jQuery drawer
jQuery alapú navigációt készíthetünk vele, egy kijelölt tartalmat jelenít meg, vagy zár be effektel.
jQuery Flickr Plugin
Flickr képtáradból pillanatok alatt galériát varázsolhatsz a jQuery plugin segítségével.
ChromePHP
PHP-bõl adatokat küldhetünk Chrome böngészõ konzoljára, hasonlóan mint a FireBug.
Webug PHP debugging tool for Google Chrome
PHP Chrome FirePHP. Colsole-ba logokat küldhetünk vele, hasonlóan mint a FirePHP-val.
ELRTE wysiwyg
Webes szövegszerkesztõ jQuery és jQueryUI alapokon. Tetszik a felülete és a fájlkezelõ is ígéretes.
Honlap analizis
SEO fórumon található weboldal elemzõ szolgáltatás.
Free map marker icons
Ingyenes ikonok google Maps fejlesztéshez. Számokat tartalmaz a készlet 1-99-ig.
Blogmark felhő
- Új, jquery, php, plugin, css, gfx, seo, tools, javascript, online, menu, tipp, ui, mysql, google, class, framework, lib, html, flash, firefox, ajax, gallery, web-design, js, pdf, form, speedup, oop, template, codeigniter, joomla, linux, maps, table, upload, security, color, mvc, book, cheatsheet, font, web, api, fejlesztes, gimp, zend framework, php5, editor, generator, design, wordpress, input, slider, ubuntu, lightbox, effekt, css3, free, test, sql, netbeans, leiras, tanulas, python, drupal, snippet, zf, tooltip, twitter, newsletter, db, html5, grafikon, open source, wysiwyg, graph, browser, ide, memcache, tarhely, gyujtes, smarty, cms, theme, jqueryui, photos, file, firebug, json, canvas, pattern, gyujtemeny, xhtml, link, xml, player, tutorial, rss, code, image, scroll, url, icons, gui, grid, foto, ftp, kereso, php oop, programozas, domain, website, video, apache, basic, docs, orm, gd, regexp, select
Top5 webes fájlmenedzser
A gyűjtésben szereplő elemek weben keresztül valósítanak meg fájlkezelést. A kiválasztásnál kiemelt szempont volt az egyszerű deszktop jellegű szoftverektől megszokott kényelem, a biztonság és a többfelhasználós beállítási lehetőség, egyszerű integrálhatóság és a felhasználhatósági (licenc) szempontok.
2009-5 kedvenc jQuery pluginje
2009-ben is vannak kedvenc jQuery plugin-jeim. Ezt szeretném veletek megosztani.
Úgy érzem kicsit változtam, a plugin választás a funkcionalitáson túl egy picit a parasztvakítás is bejátszik.
(Parasztvakítás (PW): olyan effektek aminek a gyakorlatban szinte semmi haszna nincs, de szemet gyönyörködtető)
Nem..
10 hasznos FireBug kiterjesztés
Hasznos FireBug képességeit kiterjesztő pluginek. Bár a FireBug önmagába is egy rendkívül jól használható Firefox kiterjesztés. De elérhető hozzá néhány nagyon profi kütyü, ami sokszor önálló funkciót valósít meg, de az esetek nagyobb részében a FirBug képességeit combosítják ki.
Ha még nem ismernéd a
50 Hasznos Firefox kiterjesztés Linuxra
Kedvenc Linuxon is működö Firefox kiterjesztések, mindennapos felhasználásra és webfejlesztőknek.
A addon-ok működnek Windows-os rendszereken is, de a cikk kifejezetten a Linuxra elérhető és hasznos Firefox kiterjesztésekből szemezget.
A Firefox 3.0 megjelenésekor már volt egy
350 hasznos Gimp effekt, Plugin, Script-Fu
Hasznos pluginek, Script-fu-k, effektekkel, technikai megoldások gyűjteménye Gimp 2.6.X verziójához.
A cikknek célja az, hogy egyszerű megoldást adjon Gimp-hez, pluginek beszerzésére.
Szerencsére vannak olyan önzetlen projektek ahol összegyűjtik számunkra ezeket a nélkülözhetetlen eszközöket. Így sikerült összehozni 5 bejegyzésben..
Szoftverek
ArtH2O Blog tartalmából:
10 hasznos új Codeigniter lib
Több okból is szeretem a Codeigniter keretrendszert. Az egyik oka, hogy ezt választottam keretrendszerül az nem más mint az egyszerűség. A másik az, hogy nem kell feltalálni a kereket, mert szinte minden tud, amire nekem egy alap alkalmazásnál szükségem lehet. Biztonságos, gyors és egyszerűen tanulható, jól dokumentált, szerethető rendszer. De a bejegyzés nem erről szól, hanem néhány 2010-es hasznos Codeigniter Lib-ről.
Stílusos űrlap elemek
Nem egy
szerű minden űrlap elemnek stílust adni. Gyakorlatilag checkbox, select, radio, file elemeknek nagyon nem is lehet, vagy csak részben. Erre találtak ki egy érdekes technikát, ami a működés közben az eredeti HTML elemet elfedi és azt egy grafikai elemmel helyettesíti. pl.: Egy checkbox, vagy radio esetében 2 állapota van bekapcsolt és kikapcsolt. Ha lehet kerüljük ezeket a technikákat, mert nagyon böngészőfüggő a működésük. Ha lehet maradjunk az eredeti űrlap elemeknél és azt csinosítsuk.
Térképes cég-és weblapkatalógus
Már régóta szerettem volna egy olyan oldalt, ami weblapkatalógusként működik, de kicsit másképpen közelíti meg a dolgokat, mint a jelenleg piacion lévő katalógusok. Egy ilyen újszerű kezdeményezésem volt a szintén Codeigniter alapú Twitt.hu, ami egyben linkrövidítő szolgáltatás is. De a sok jó tulajdonsága mellet, még mindig hiányoltam benne valamit. Ezt a plusz dolgot sikerült beleplántálnom a RegionalisBank.info cég-és weblapkatalógusba.
Kép átméretezés és cache
Van néhány hasznos Smarty plugin, ilyen a Thumb nevű bővítmény is. Nagyon sokáig nem fejlesztették, már azt gondoltam kihalt alóla a fejlesztés, de 2010-ben egy újabb változat jelent meg belőle. Smarty 2.6.X és PHP 5.X.Y verzióhoz.A bővítménnyel a sablonon tudunk képméreteket legyártani és gyorsítótárazni.
Pozíció ellenőrzés keresőkben
Több online szolgáltatással van lehetőségünk megnézni azt, hogy a weblapunk adott kulcsszóra hányadik a Google kereső találati listájában.Ez hasznos akkor, ha elkezdünk egy oldalt adott kulcsszóra erősíteni, vagy a meglévő helyezésünket szeretnénk megtudni. Netán az adott kulcsszóra szeretnénk comobsítani és az első helyezetteket keressük.
Archívum:
Letöltések:
Hasznos holmik: