Hlavní menu
Kategorie
Přihlásit
Anketa
Podporujeme
Přispějte na provoz
V tutoriále AJAX znovunačtení obsahu stránky jsme si vytvořili 3 soubory: index.php, functions.php xmlhttpreq.js. Tyto soubory budeme v následujícím tutoriále potřebovat, protože je pouze rozšíříme o další funkci. Tyto soubory můžete stáhnout ZDE
Otevřeme soubor functions.php a vytvoříme funkci getTuts() s jedním argumentem jménem page. V této funkci nejprve zjistíme počet tutoriálů. Podmíníme přístup – „kdyby náhodou“. Vytvoříme stránkovací string s odkazy na javascriptové funkce. A vybereme z databáze příslušné tutoriály pro danou stránku a nakonec je necháme vypsat.
<?php
mysqlConnect();
if($_POST['sender'] ==
"sendRequest")
{
if($_POST['type'] == "new_tuts")
getNewTuts();
}
function
mysqlConnect()
{
mysql_connect("HOST", "USER", "PASS");
mysql_select_db("DB");
mysql_query("SET NAMES
UTF8");
}
function getNewTuts()
{
$q = mysql_query("SELECT * FROM
new_tuts ORDER BY RAND() LIMIT 4");
while($res = mysql_fetch_assoc($q))
{
echo '
<div class="cla-nahled">
<img src="'.$res['thumb'].'" border="0" alt="'.$res['title'].'" align="left" class="nahled">
<h2><strong>'.$res['title'].'</strong></h2>
'.$res['desc'].'<br>
<div class="cla-info">
<span class="datum">'.date("d.m.y", $res['time']).'</span>
</div>
</div>
';
}
}
function getTuts($page)
{
$tmp = mysql_fetch_assoc(mysql_query("SELECT count(id) FROM
new_tuts"));
$count = $tmp['count(id)'];
if($page >
0 && ($page - 1) <= (int)($count /
4))
{
if($page !=
1)
echo '<a
href="javascript:getTuts('.($page - 1).')">«
Zpět</a> ';
for($i = 0; $i <=
(int)($count /
4); $i++)
echo '<a
href="javascript:getTuts('.($i+1).')">'.($page ==
($i+1) ? '<strong>'.($i+1).'</strong>' : ($i+1)).'</a>
';
if($page <=
(int)($count /
4))
echo '<a
href="javascript:getTuts('.($page + 1).')">Další
»</a> ';
$q = mysql_query("SELECT * FROM
new_tuts ORDER BY title LIMIT " . (($page - 1) * 4) . ",4");
while($res = mysql_fetch_assoc($q))
echo '
<div class="cla-nahled">
<img src="'.$res['thumb'].'" border="0" alt="'.$res['title'].'" align="left" class="nahled">
<h2><strong>'.$res['title'].'</strong></h2>
'.$res['desc'].'<br>
<div class="cla-info">
<span class="datum">'.date("d.m.y", $res['time']).'</span>
</div>
</div>
';
}
}
?>
Nyní příjde na řadu náš xmlhttpreq.js soubor. Vytvoříme funkci jménem getTuts() opět s jedním argumentem jménem page, která bude vykreslovat tutoriály do našeho obsahu stránky, ale tentokrát použijeme identifikátor my_content_p – musíme tedy upravit index.php.
var xmlHttpReq;
if(typeof XMLHttpRequest != 'undefined')
{
try
{
xmlHttpReq = new
XMLHttpRequest();
}
catch(e)
{
try {
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlHttpReq = false;
}
}
}
}
else
{
try {
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlHttpReq = false;
}
}
}
var data =
sendRequest("POST", "functions.php", "sender=sendRequest&type=new_tuts");
function
reloadNewTuts()
{
document.all['my_content'].innerHTML =
data;
data = sendRequest("POST", "functions.php", "sender=sendRequest&type=new_tuts");
}
function getTuts(page)
{
document.all['my_content_p'].innerHTML =
sendRequest("POST", "functions.php", "sender=sendRequest&type=tuts&page=" +
page);
}
function
sendRequest(getOrPost, page, params)
{
var strResult;
if(getOrPost.toUpperCase() == "POST")
{
xmlHttpReq.open("POST", page,
false);
xmlHttpReq.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlHttpReq.send(params);
}
else
{
xmlHttpReq.open("GET", page +
"?" + params, false);
xmlHttpReq.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlHttpReq.send(null);
}
strResult = xmlHttpReq.responseText;
return strResult;
}
index.php
<?php
require_once "functions.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<meta name="author"
content="Marek
Čapla - marek.capla@centrum.cz">
<meta name="keywords" content="tutoriály,
photoshop, tvorba webu, php, html, java script, css, ps, ps cs, ps cs2, corel,
corel draw, corel rawe, tut, tuty, české, české tutoriály, tutorialy,
tutorialy.com, com, download, brushe, paterny, rendery, příručka, návod,
výuka, image ready, sig, speciální efekty, textové efekty, tvorba sigů,
úprava fotek, webdesign, design, web, základy, programování, pagerank,
google pagerank, validátor, rss, články, 3D Studio Max, Adobe Illustrator,
Flash, adobe, adobe pohotoshop, Sony Vegas, video, zpracování videa, seo, seo
optimaliztace, minitutorialy, diskuzní fórum, ISSN 0322-9289">
<meta name="description" content="Tutorialy.com - Portál s tutoriály Adobe Photoshop,
tvorby webu, 3D a 2D grafiky a hudby v Sony Vegas.">
<meta name="DC.Identifier" content="(SCHEME=ISSN) 0322-9289">
<meta http-equiv="Content-language" content="cs">
<meta name="robots"
content="all">
<script type="text/javascript" src="xmlhttpreq.js"></script>
<link rel="shortcut
icon" href="http://tutorialy.com/templates/ikonky/favicon.gif">
<link rel="stylesheet" type="text/css" href="http://tutorialy.com/templates/rating.css">
<title>Tutorialy.com
| internetový časopis o grafice a tvorbě webu</title>
<link rel="stylesheet" href="http://tutorialy.com/templates/style.css">
</head>
<body>
<iframe src="http://www.eclan.cz/lista/lista.php?from=Tutorialy.com&style=tutorialy.css"
name="lista" width="100%"
height="18" scrolling="no"
frameborder="0"></iframe>
<div align="center">
<div id="line">
<div id="header">
<h1>Tutorialy.com
- internetový časopis o grafice a tvorbě webu</h1>
<div id="logo">
<a href="http://www.tutorialy.com/"> </a>
</div>
</div>
</div>
<div id="main">
<div id="obsah">
<div class="blok">
<div class="lista2">
<a href="javascript:reloadNewTuts()">Nové
tutoriály</a>
</div>
<div class="text"
id="my_content"> <!-- Zde bude náš měnící se
obsah stránky -->
<?php
getNewTuts();
?>
</div>
</div>
</div>
<!-- Stránkování
-->
<div id="obsah">
<div class="blok">
<div class="lista2">
Stránkování
</div>
<div class="text"
id="my_content_p"> <!-- Zde bude náš měnící se
obsah stránky -->
<?php
getTuts(1); // Vykreslí
první stránku
?>
</div>
</div>
</div>
<!-- /Stránkování
-->
</div>
</div>
</body>
</html>
A teď konečná fáze – podmínky do scriptu functions.php. V minulém tutoriále jsme přidali podmínky, které kontrolovali poslání POST proměnných. Totéž uděláme i teď, ale s výjimkou. My jsme poslali pomocí JS funkce sendRequest proměnnou type = tuts a page = NAŠE_STRÁNKA. Proto musíme napsat podmínku, která bude kontrolovat hodnotu proměnné type.
<?php
mysqlConnect();
if($_POST['sender'] ==
"sendRequest")
{
if($_POST['type'] == "new_tuts")
getNewTuts();
elseif($_POST['type'] == "tuts")
getTuts($_POST['page']);
}
function
mysqlConnect()
{
mysql_connect("HOST", "USER", "PASS");
mysql_select_db("DB");
mysql_query("SET NAMES
UTF8");
}
function getNewTuts()
{
$q = mysql_query("SELECT * FROM
new_tuts ORDER BY RAND() LIMIT 4");
while($res = mysql_fetch_assoc($q))
{
echo '
<div class="cla-nahled">
<img src="'.$res['thumb'].'" border="0" alt="'.$res['title'].'" align="left" class="nahled">
<h2><strong>'.$res['title'].'</strong></h2>
'.$res['desc'].'<br>
<div class="cla-info">
<span class="datum">'.date("d.m.y", $res['time']).'</span>
</div>
</div>
';
}
}
function getTuts($page)
{
$tmp = mysql_fetch_assoc(mysql_query("SELECT count(id) FROM
new_tuts"));
$count = $tmp['count(id)'];
if($page >
0 && ($page - 1) <= (int)($count /
4))
{
if($page !=
1)
echo '<a
href="javascript:getTuts('.($page - 1).')">«
Zpět</a> ';
for($i = 0; $i <=
(int)($count /
4); $i++)
echo '<a
href="javascript:getTuts('.($i+1).')">'.($page ==
($i+1) ? '<strong>'.($i+1).'</strong>' : ($i+1)).'</a>
';
if($page <=
(int)($count /
4))
echo '<a
href="javascript:getTuts('.($page + 1).')">Další
»</a> ';
$q = mysql_query("SELECT * FROM
new_tuts ORDER BY title LIMIT " . (($page - 1) * 4) . ",4");
while($res = mysql_fetch_assoc($q))
echo '
<div class="cla-nahled">
<img src="'.$res['thumb'].'" border="0" alt="'.$res['title'].'" align="left" class="nahled">
<h2><strong>'.$res['title'].'</strong></h2>
'.$res['desc'].'<br>
<div class="cla-info">
<span class="datum">'.date("d.m.y", $res['time']).'</span>
</div>
</div>
';
}
}
?>
Tak a máme hotovo.
Zdrojový kód k dispozici ZDE
Měl bych problém s tímto druhem stránkování. Jeví se mi jako velmi dobrý nápad, ovšem po zabudování na můj web mi nefungovalo. Dlouho jsem hledal chybu až sem ji našel. Nevím proč, ale při nastavení indexové stránky s parametrem vaše stránkování funguje, ovšem při vložení už stránkování nereaguje na volanou stránku ( první stránka se načte, ovšem po kliku např. na str. 2 se nic nevykoná). Prosil bych o radu jestli by nešel váš kód nějak upravit, neboť mám celý web ve skoro validním XHTML a nechce si mi předělávat na HTML.
Děkuji za odpověď.
....nastavení indexové stránky s parametrem (DOCTYPE HTML PUBLIC ... DTD HTML 4.01 Transitional//EN) vase stránkování funguje, ovšem při vložení (DOCTYPE html PUBLIC ... //W3C//DTD XHTML 1.0 Transitional//EN) už stránkování nereagovalo...