bogdan_constantinescu

În ultimul post am realizat un mic tooltip cu ajutorul jQuery, caruia îi vom aduce nişte modificări în tutorialul de azi.

În unul din comentarii Brayn sugera ca tooltip-ul să funcţioneze în felul următor:

• textul din alt să fie înlocuit cu un id
• tooltip-ul va afişa în final textul dinamic (în cazul nostru îl vom scoate dintr-o bază de date MySQL)

În consecinţă am aflat că avem nevoie de câteva lucruri...

• o bază de date MySQL
• un fişier care interacţionează cu serverul MySQL
• o funcţie Javascript care face cererea către acest fişier

1. Baza de date

Bun, haideţi să facem o bază de date nouă şi s-o populăm cu nişte informaţii (textele pe care le vom afişa mai apoi în tooltip).

 CREATE DATABASE `tooltip` ;

Acum vom face şi o tabelă pe care eu am numit-o definition. Pe scurt este vorba de 2 câmpuri: uid - "unique id" (în care se va afla id-ul pe care noi îl vom citi din proprietatea alt a imaginii) şi text - "informaţia ce se va afişa în tooltip".

 CREATE TABLE `tooltip`.`definition` (
`uid` INT NOT NULL AUTO_INCREMENT ,
`text` TEXT NOT NULL ,
PRIMARY KEY ( `uid` )
) ENGINE = MYISAM

Dacă aveţi vreo nelamurire despre SQL puteţi consulta nişte manuale online. OK, acum mai trebuie să populăm baza de date proaspăt creată...

INSERT INTO `definition` (`uid`, `text`) VALUES
(1, 'First tooltip information coming from a mysql database.'),
(2, 'We also have a second database entry
for showing you the text you were looking for!'),
(3, 'And some more information. You like it, huh? <img src='http://www.bogdanconstantinescu.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> '),
(4, 'Showing possible thanks to jQuery ajax httprequest <img src='http://www.bogdanconstantinescu.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ');

Acestea fiind făcute nu ne rămâne decât să trecem la urmatorul pas, realizarea fişierului care va face legătura cu serverul MySQL.

2. Scriptul server-side

Această etapă o puteţi face utilizând orice limbaj de programare server-side care vă place. Personal o să aleg php pentru că pe el îl stăpânesc cel mai bine. Pe scurt ceea ce trebuie să realizăm va arăta cam aşa:

• aşteptăm sa fie transmis un parametru la chemarea fişierului
• ne conectăm la serverul MySQL
• facem interogarea şi afişăm rezultatul.

Treabă simplă. În consecinţă ajungem la un rezultat asemănător cu cel de mai jos.

/* ne conectam la serverul mysql si
selectam baza de date pe care vom lucra */
$dbh = mysql_connect("localhost", "user", "parola");
mysql_select_db("tooltip");
 
/* verificam sa fie curat inputul si ii
scoatem spatiile goale din jurul sau */
$request = strip_tags(trim($_POST['uid']));
 
/* facem select-ul in functie de ID */
$qry = mysql_query("
		SELECT
			text
		FROM
			`definition`
		WHERE
			uid='". $request ."'");
 
/* afisam textul pentru tooltip aferent ID-ului cerut;
daca ID-ul cerut nu exista ii spunem acest lucru*/
if(mysql_num_rows($qry) != 0)
	echo mysql_result($qry, 0);
else
	echo "Sorry, that does not exist!";
 
/* si in final inchidem conexiunea la server */
mysql_close($dbh);

Fişierul în cauză eu l-am denumit tooltip.php (ne va fi de folos în ultimul pas)

3. Let's do some Javascript magic

Bun, deci avem baza de date, avem fişierul care face output în funcţie de parametrul care îi este trimis (în cazul nostru metoda este POST) şi ne rămâne de făcut doar o funcţie nouă în script şi nişte mici modificări.

function request(id)
{
	/* realizam pachetul de optiuni pentru functie */
	var data = {
			type: "POST",
			url: "tooltip.php",
			data: "uid="+id,
			async: false
		}
 
	/* chemam functia si ii preluam raspunsul */
	var response = $.ajax(data).responseText;
 
	/* si il intoarcem */
	return response;
}

Ne mai rămâne ca în funcţia din eventul mouseover să schimbăm valoarea variabilei text cu urmatoarea secvenţă.

var text = request(parseInt(this.alt));

În principu dacă am ajuns aici totul ar trebui să fie în regulă. Pentru a vă demonstra ceea ce tocmai am realizat puteţi vedea un exemplu sau puteţi downloada scriptul Javascript si scriptul php.

Pentru orice nelămurire, sugestie sau "reclamaţie" foloseşte formularul de mai jos!