Facebookové fototagovanie - označovanie ľudí, vecí, objektov je pravdepodobne známe všetkým. V tomto článku si ukážeme, ako podobný systém vytvoriť a vysvetlíme si základný princíp fungovania.
Na začiatok je potrebné vytvoriť databázovú tabuľku:
Štruktúra MySQL tabuľky:
CREATE TABLE IF NOT EXISTS `tagged` (
`id` mediumint(9) NOT NULL auto_increment,
`photoID` mediumint(9) NOT NULL,
`tagCounter` mediumint(9) NOT NULL,
`tagValue` varchar(200) character set utf8 NOT NULL,
`targetX` smallint(6) NOT NULL,
`targetY` smallint(6) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;Tabuľka obsahuje pre nás dôležité stĺpce:
id - jedinečný identifikátor
tagValue - popis k vytvorenému tagu, resp. jeho názov
targetX - poloha tagu na X súradnici
targetY - poloha tagu na Y súradnici
photoID - identifikátor obrázka - každý obrázok má svoj jedinečný identifikátor.
Vytvorením tabuľky sa naša práca s databázou skončila, ďalej s ňou už nebudeme pracovať.
Na začiatku musíme definovať nasledujúce premenné:
<?php
// unikátne ID každej fotografie
$photoID = 1;
// najvyšší dočasný counter
$counter = mysql_fetch_array(mysql_query("SELECT MAX(tagCounter) FROM tagged WHERE photoID = $photoID"));
$tagCounter = (int) $counter[0];
$tagCounter += 1;
?>Samotný obrázok vkladáme do stránky nasledovne:
<div id="photoID" rel="<?php echo $photoID ?>"></div>
<img src="obrazok.jpg" style="width: 720px; height: 540px;">Obrázku predchádza div, ktorý ma definované id a parameter rel. Parameter rel je premenná photoID obrázku, ktoré sme definovali na začiatku.
Do samotného tela stránky potrebujeme načítať aj súbor kaskádových štýlov style.css, ktorý vyzerá nasledovne:
#tag-wrapper
{
-webkit-box-shadow: 0px 0px 10px #bbb;
-moz-box-shadow: 0px 0px 10px #bbb;
box-shadow: 0px 0px 10px #bbb;
border: 1px solid #ccc;
position: relative;
display: block;
padding: 10px;
}
#tag-target, #tag-wrapper img {
cursor: crosshair;
}
#tag-wrapper img {
position: absolute;
}
#tag-target
{
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
border: 4px solid #fff;
position: absolute;
display: none;
height: 100px;
width: 100px;
top: 0px;
left: 0px;
z-index: 2;
}
#tag-input
{
background: #fff;
display: none;
padding: 5px;
position: absolute;
top: 0px;
left: 0px;
width: 137px;
z-index: 2;
}
#tag-input label
{
display: block;
font-weight: bold;
}
#tag-input input
{
border: 1px solid #ccc;
color: #888;
display: block;
margin: 5px 0px;
outline: 0px;
padding: 3px;
width: 124px;
}
.hotspot
{
border-width: 0px;
box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
-moz-box-shadow: 0px 0px 0px #000;
height: 100px;
width: 100px;
position: absolute;
}
.hotspot:hover, .hotspothover
{
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
z-index: 1;
}
.hotspot span
{
display: none;
}
.hotspot:hover span, .hotspothover span
{
background: #fff;
display: block;
font-weight: bold;
padding: 3px 0px;
text-align: center;
}
.remove
{
color: #748950;
cursor: pointer;
text-decoration: underline;
}a súbory JQuerry pre korektné fungovanie aplikácie:
<script src="jquery.min.js" type="text/javascript"></script>Zobrazovanie tagov, prípadne ich vymazanie zabezpečíme nasledovne:
<?php
// možnosť ukážky + zmazanie tagu
$q = mysql_query("SELECT * FROM tagged WHERE photoID = $photoID");
if (mysql_num_rows($q))
{
while ($r = mysql_fetch_object($q))
{
?>
<p id="hotspot-item-<? echo $r->tagCounter ?>"><? echo $r->tagValue ?> <span onmouseout="hideTag(<? echo $r->tagCounter ?>)" onmouseover="showTag(<? echo $r->tagCounter ?>)" onclick="removeTag(<? echo $r->tagCounter ?>)" class="remove">(Vymazať)</span></p>
<?php
}
}
?>Ďalej si vysvetlíme štruktúru súborov zabezpečujúcich ukladanie pozícií tagov, ich zobrazenie, prípadne vymazanie.
Súbor connection.php
Základné pripojenie k databáze:
<?php
$server = 'localhost';
$user = 'root';
$pwd = 'heslo';
$db = 'databaza';
$link = mysql_connect($server, $user, $pwd);
$msdb = mysql_select_db($db);
?>Súbor ajaxAdd.php
Pridanie nového tagu do MySQL databázy
<?php
require 'connection.php';
$photoID = (int) $_GET["photoID"];
$tagCounter = (int) $_GET["tagCounter"];
$tagValue = $_GET["tagValue"];
$targetX = (int) $_GET["targetX"];
$targetY = (int) $_GET["targetY"];
mysql_query("INSERT INTO tagged SET
photoID = '$photoID',
tagCounter = '$tagCounter',
tagValue = '$tagValue',
targetX = '$targetX',
targetY = '$targetY'
");
?>Súbor del.php
Vymazanie tagu
<?php
require 'connection.php';
$photoID = (int) $_GET["photoID"];
$tagCounter = (int) $_GET["tagCounter"];
mysql_query("DELETE FROM tagged WHERE photoID = $photoID AND tagCounter = $tagCounter");
?>Súbor loadPosition.php
Simulácia a znázornenie tagov
<?php
require 'connection.php';
$photoID = (int) $_GET["photoID"];
$q = mysql_query("SELECT * FROM tagged WHERE photoID = $photoID");
if (mysql_num_rows($q))
{
while ($r = mysql_fetch_object($q))
{
?>
<div style="left: <?= $r->targetX ?>px; top: <?= $r->targetY ?>px;" class="hotspot" id="hotspot-<?= $r->tagCounter ?>"><span><?= $r->tagValue ?></span></div>
<?php
}
}
?>Ukážka aplikácie Photo Tag. Pri akomkoľvek probléme ma prosím kontaktujte, aplikácia je stále vo vývoji.
Aplikácia Photo Tag bola otestovaná a funguje v prehliadačoch: Opera, Mozilla, MSIE 7, MSIE 8, Google Chrome.
Kompletná ukážka v zip súbore: Stiahnuť Photo Tag
Pridať komentár k článku