LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> Dynamické načítání dat z databáze pomocí jQuery a PHP

Načítání dat z databáze lze provést mnoha způsoby. U některých z nich ale proběhne vizuálně nepříjemné znovunačtění stránky (refresh), které může kazit dojem jinak pěkné webové prezentace. V tomto článku podrobně vysvětlím, jak se této vadě na kráse vyhnout.

6.3.2013 00:00 | Vladimír Macháček | Články autora | přečteno 15104×

Možnosti použití

Dynamické načítání se dá použít teoreticky všude. Ankety, chaty, komentáře k článkům, hry, aplikace na webu a samotné načítání obsahu jako např. článků, novinek a obrázků. Další možnost je třeba odesílání článků, emailů a úprava právě odeslaného komentáře, což je např. na Facebooku. Největší nevýhoda je asi ta, že pokud bude mít uživatel vypnutý javascript, tak většina aplikací, anket a dynamické načítání apod. používající tuto knihovnu, nebudou fungovat.

Kde začít

Nejdříve by bylo vhodné si ujasnit, jak budeme postupovat, jaká bude struktura stránky a co chceme za výsledek. V tomto návodu budeme načítat článek z databáze a budeme chtít vypsat nadpis, anotaci a samotný článek. Chceme tedy, aby se po kliknutí na odkaz v menu načetl článek bez přenačítání stránky a zobrazil se na určitém místě. Při načítání dat, pro lepší dojem a vzhled, přidáme loader (obrázek při načítání) nebo progressbar, který je zabudovaný v každém prohlížeči, který podporuje tagy HTML5. Nemusí tedy fungovat v každém prohlížeči! Progressbar je grafické zobrazení probíhajícího procesu. Je to taková ikona. Loader je animovaný obrázek ve formátu gif. Je ho možné vytvořit v jakémkoliv grafickém programu, ve kterém je možnost vytvářet animace. Tím nejznámějším je asi Photoshop, Corel a Gimp. Na internetu je mnoho stránek, kde se dá tento obrázek vytvořit bez větší námahy. Později v článku uvedu, jak zprovoznit obě možnosti zobrazení procesu.


Pro zobrazení ukázky je nutné mít povolený javascript a prohlížeč, který podporuje tagy HTML5!

První kroky

Když jsme si ujasnili úlohu, můžeme se pustit do samotného programování. Vytvoříme si 3 soubory (index.php, load.php a load.js). Potom si stáhneme knihovnu jQuery. Knihovnu lze také načítát přímo ze stránek vydavatele. Stačí pouze do atributu href zadat adresu souboru. U tohoto příkladu budu ale používat pouze staženou knihovnu.

Teď si vytvoříme strukturu v souboru index.php. Budeme mít nějaký odkaz na článek a div, do kterého se budou načítát data. Div, do kterého budeme načítat data, bude content. Struktura bude následující:


<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/load.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamické načítání dat</title>
</head>

<body>
	<div id="menu">
    	<a href="index.php?id-article=1">1.článek</a>
        <br />
        <a href="index.php?id-article=2">2.článek</a>
    </div>
	<div id="content">
    	<div id="article">
        	<?php 
            	include('php/load.php');//Načtení souboru load.php
            ?>
        </div>
    </div>
</body>
</html>

Load.php

Tento skript bude získávat data z databáze a vypisovat je. Skript funguje následovně:

  1. Nejdříve se provede připojení k databázi.
  2. Pokud se připojení podařilo, provede se získání a následný výpis dat z databáze. Pokud ne, skript se ukončí a vypíše se chybová hláška.

Nejdříve si vytvoříme všechny proměnné pro připojení a získání článku.


<?php 
$dblogin='root';//Uživatelské jméno
$dbpassword='password';//Uživatelské heslo
@$idarticle=$_GET['id-article'];//Id požadovaného článku
?>

Teď vytvoříme try-catch blok s připojením a chybovou hláškou.


<?php 
$dblogin='root';//Uživatelské jméno
$dbpassword='password';//Uživatelské heslo
@$idarticle=$_GET['id-article'];//Id požadovaného článku
//try-catch blok
try {
	$db = new PDO('mysql:host=localhost;dbname=test;charset=UTF-8', $dblogin, $dbpassword);//Připojení k databázi
    }
} catch (Exception $e) {//Pokud se připojení nepodařilo
    exit("Nelze se připojit k databázi ".$e->getMessage());//Vypiš chybovou hlášku a chybu
	}
?>

Jako další si připravíme dotaz, ošetříme jej proti SQL injection a provedeme jej.


<?php 
$dblogin='root';//Uživatelské jméno
$dbpassword='password';//Uživatelské heslo
@$idarticle=$_GET['id-article'];//Id požadovaného článku
//try-catch blok
try {
	$db = new PDO('mysql:host=localhost;dbname=test;charset=UTF-8', $dblogin, $dbpassword);//Připojení k databázi
	$stmt = $db->prepare("SELECT * FROM articles WHERE id=?");//Připravení dotazu
	$stmt ->bindParam(1, $idarticle, PDO::PARAM_INT);//Ošetření dotazu proti SQL injection
	$stmt->execute();//Provedení dotazu
	}
} catch (Exception $e) {//Pokud se připojení nepodařilo
    exit("Nelze se připojit k databázi ".$e->getMessage());//Vypiš chybovou hlášku a chybu
	}
?>

Nakonec vypíšeme všechna nalezená data. Protože očekáváme jen jeden článek = jeden řádek z databáze, tak použijeme metodu fetch(). Pokud by bylo řádků více, použijeme metodu fetchAll().


<?php 
$dblogin='root';//Uživatelské jméno
$dbpassword='password';//Uživatelské heslo
@$idarticle=$_GET['id-article'];//Id požadovaného článku
//try-catch blok
try {
	$db = new PDO('mysql:host=localhost;dbname=test;charset=UTF-8', $dblogin, $dbpassword);//Připojení k databázi
	$stmt = $db->prepare("SELECT * FROM articles WHERE id=?");//Připravení dotazu
	$stmt ->bindParam(1, $idarticle, PDO::PARAM_INT);//Ošetření dotazu proti SQL injection
	$stmt->execute();//Provedení dotazu
	while ($row = $stmt->fetch()) {//Vypsání dat
    	echo '<div class="article">'.$row['title'].'<thr /><br />'.$row['annotation'].'<hr /><br />'.$row['article'].'</div>';
	}
} catch (Exception $e) {//Pokud se připojení nepodařilo
    exit("Nelze se připojit k databázi ".$e->getMessage());//Vypiš chybovou hlášku a chybu
	}
?>

Load.js

Odesílání dat je prováděno metodou $_GET[]. Tento skript bude provádět následující operace:

  1. Nejdříve se zkontroluje, zda je dokument načtený a připravený.
  2. Pokud ano, začne se zaznamenávat klikání na odkazy v menu.
  3. Pokud bylo kliknuto na nějaký odkaz v menu, získá se jeho atribut href a k tomu se přičte div article.
  4. Obsah divu content se smaže a na jeho místo se vloží zobrazení procesu.
  5. Jakmile se získají data z databáze, smaže se zobrazení procesu a získaná data se vypíši do divu content.
Nejdříve zaznamenáme načtení dokumentu, kliknutí na odkaz a vytvoříme proměnou content, ve které bude uložen atribut odkazu a php skript obsažený v divu article.

// JavaScript Document
$(document).ready(function(){//Zaznamenání načtení dokumentu
	$('#menu a').click(function(){//Zaznamenání kliknutí na odkaz v menu
			var content = $(this).attr('href')+' #article';//Vytvoření proměnné content a získání atributu href;
		})
	})

Potom zobrazíme průběh procesu pomocí jedné z dříve jmenovaných možností.


// JavaScript Document
$(document).ready(function(){//Zaznamenání načtení dokumentu
	$('#menu a').click(function(){//Zaznamenání kliknutí na odkaz v menu
    		var content = $(this).attr('href')+' #article';//Vytvoření proměnné content a získání atributu href;
			$('#content').html('<img src="images/loader.gif" id="loader" />');//Zobrazení procesu
		})
	})

Pokud nechcete zobrazovat proces pomocí obrázku můžete použít progressbar. Stačí akorát zaměnit kód v závorce a to následovně.


$('#content').html('Načítám...<br /><progress></progress>')//Zobrazení procesu;

Nakonec načteme data a vypíšeme je v divu content.


// JavaScript Document
$(document).ready(function(){//Zaznamenání načtení dokumentu
	$('#menu a').click(function(){//Zaznamenání kliknutí na odkaz v menu
			var content = $(this).attr('href')+' #article'//Vytvoření proměnné content a získání atributu href;
			$('#content').html('Načítám...<br /><progress></progress>');
			$('#content').load(content),//Načtení obsahu z proměnné
				function(output) {
					$('#content').html(output);//Výpis obsahu na požadované místo
					}
			return false;
		})
	})

Závěrem

Jak je vidět již na první pohled, tak načítání dat pomocí knihovny jQuery a PHP není nic složitého. Dle mého názoru je to jednoduché a efektivní. Data se načítají rychleji a to bez zbytečného problikávání a skákání stránky. Pro uživatele je to určitě příjemnější.

Verze pro tisk

pridej.cz

 

DISKUZE

Dvě drobnosti k článku 6.3.2013 08:12 Martin Chudoba
JQuery? 6.3.2013 11:28 Matěj Andrle
  |- Re: JQuery? 6.3.2013 13:20 Vladimír Macháček
  L Re: JQuery? 6.3.2013 16:11 Martin Chudoba
    L Re: JQuery? 6.3.2013 17:06 Matěj Andrle
      L Re: JQuery? 7.3.2013 07:43 Martin Chudoba




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

13.9.2017 8:00 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

15.4.2017 15:20 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě IoT a radiokomunikace? Přijď na sraz spolku OpenAlt, který se bude konat ve středu 19. dubna od 18:30 v Šenkovně (Sokolská 60, Praha 2).
Přidat komentář

5.3.2017 19:12 /Redakce Linuxsoft.cz
PR: 23. března proběhne v Praze konferenci na téma Cloud computing v praxi. Hlavními tématy jsou: Nejžhavější trendy v oblasti cloudu a cloudových řešení, Moderní cloudové služby, Infrastruktura současných cloudů, Efektivní využití cloudu, Nástrahy cloudových řešení a jak se jim vyhnout.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze