Pobieranie danych z MySQL w tle

data publikacji: 01.01.2009
Pobieranie danych z MySQL w tle
kategoria: Skrypty client-side, Skrypty server-side, Tutoriale autor: majareq
Temat jak najbardziej na czasie dla każdego webmastera. Żyjemy w czasach kiedy Ajax jest chlebem powszednim dla każdego profesjonalnego twórcy stron WWW. Jednak rzadko kto umie wykorzystać techniki Ajaxa w praktyce. Ten artykuł obrał za cel przynajmniej w części to zmienić.

Całość artykułu i skryptu opierałem na rozwiązaniu Ajax'owym z W3School.

Więc do rzeczy! By zrobić to u siebie musisz wykonać następujące czynności:
1. Utworzyć odpowiednią tabelę w bazie danych.
2. Stworzyć kod HTML z listą w formularzu, odwołujący się do pliku Ajaxa.
3. Stworzyć kod Ajaxowy obsługujący drugi plik PHP.
4. Stworzyć plik PHP wywołujący dane z bazy.
Tabela SQL

Najpierw potrzebna nam w bazie danych tabela zawierające dane, które mamy dynamicznie pobierać.
U mnie jest to w formie:

id imie nazwisko miasto

1 Adam Kowalski Warszawa

2 Joanna Ogrodnik Kraków

3 Paweł Kostucha Gniezno

4 Marta Ługowska Elbląg

Zrzut bazy danych dostępny jest tutaj.

Pole id jest kluczem w tabeli i zawiera dodatkowy argument – auto_increment.
Oznacza to (auto_icrement), że nie musimy za każdym razem gdy dodajemy nową osobę do bazdy danych, wpisywać kolejnego id. Skrypt zrobi to za nas.
Ustawiając PRIMARY KEY (klucz główny) na id, spełniamy wymóg jaki narzuca nam działanie relacyjnych baz danych, identyfikujemy wiersze w tabeli.

Główny plik – ajax.php

Skoro już mamy tabelę w bazie możemy zapełnić ją rekordami. Dane wpisujcie dowolnie
Przystępujemy do drugiego kroku naszego tutoriala. Plik ajax.php:
Pierwsza i najważniejsza kwestia: połączenie z bazą danych. Robimy to w następujący sposób:

mysql_connect('host','użytkownik_bazy','hasło_użytkownika');
mysql_select_db('nazwa_bazy_danych') or die("Nie odnaleziono bazy danych");

Pierwszą wywoływaną funkcją jest mysql_connect() gdzie parametrami są kolejno: host, użytkownik i hasło. W 99% przypadków w miejsce hostu należy wpisać po prostu localhost.

Potem wywołujemy funkcję mysql_select_db() która oznacza, jak nie trudno jest się domyśleć, wybranie bazy danych. Dalsza część kodu zaczynająca się od or die zakończy działanie skryptu i wyświetli napis znajdujący się pomiędzy cydzysłowami jeśli za pomocą wcześniej podanych informacji na temat użytkownika i hostu nie można połączyć się z bazą dany MySQL.

Jeśli dobrze wypełniłeś ten fragment kodu możemy przejść dalej:

echo'<script src="ajax.js"></script>';

Tego chyba nie muszę tłumaczyć. Oznacza to odwołanie się do pliku ajax.js. Możemy iść dalej.
Zajmiemy się teraz instrukcją liczącą rekordy w tabeli i wyświetlający odpowiednie napisy:

$liczRekordy = mysql_num_rows(mysql_query("SELECT * FROM ajaxsql"));
if ($liczRekordy > 0) {
echo '<center><font size="3" color="#7dab1b">Mamy '.$liczRekordy.' osób w bazie.</font></center>';
} else {
echo '<center><font size="3" color="#df1080">Nie ma osób w bazie.</font></center>';
}

Co zrobiliśmy teraz?
1. Zmiennej o nazwie $liczRekordy nadaliśmy wartość ilości rekordów w tabeli o nazwie ajaxsql.
2. Sprawdziliśmy czy jest jakiś rekord w tej tabeli i wyświetliśmy napis pokazujący ile jest tych rekordów. W przeciwnym wypadku napisaliśmy napis „Nie ma osób w bazie.”.
Przyszła pora na listę wyboru oraz tak zwany placeholder czyli miejsce gdzie będą pokazywać się rekordy z bazy danych. Dokonujemy tego za pomoca następującego kodu:

echo'<form>Wybierz osobę:
<select name="users" onchange="showUser(this.value)"><option>wybierz zgloszenie</option>';
$sql2="SELECT * FROM ajaxsql ORDER by id ASC";
$result2 = mysql_query($sql2);
while($row2 = mysql_fetch_array($result2))
{
echo "<option value="" . $row2['id'] . "">(" . $row2['id'] . ") " . $row2['imie'] . " " . $row2['nazwisko'] . "</option>";
}
echo'</select></form><div id="txtHint"></div>';

Pora na krótką analizę:
Najpierw tworzymy formularz za pomocą <form>, potem tworzymy listę wyboru <select> nadajemu mu m.in parametr onchange wywołujący funkcję JS showUser która pokazuje aktualnie wybraną wartość. Potem wywołujemy wszystkie rekordy z tabeli 'ajaxsql' sortując rosnąco. Wyświetlania rekordów z bazy dokonujemy za pomocą pętli while. Następnie zamykamy listę i formularz oraz tworzymy placeholder, który niedługo zdefiniujemy w pliku ajax.js

No dobrze. Skończyliśmy pisać plik ajax.js . Twoja wersja tego pliku powinna wyglądać mniej więcej tak:

<?php
mysql_connect('host','użytkownik_bazy','hasło_użytkownika');
mysql_select_db('nazwa_bazy_danych') or die("Nie odnaleziono bazy danych");
echo'<script src="ajax.js"></script>';
$liczRekordy = mysql_num_rows(mysql_query("SELECT * FROM ajaxsql"));
if ($liczRekordy > 0) {
echo '<center><font size="3" color="#7dab1b">Mamy '.$liczRekordy.' osób w bazie.</font></center>';
} else {
echo '<center><font size="3" color="#df1080">Nie ma osób w bazie.</font></center>';
}
echo'<form>Wybierz osobę:
<select name="users" onchange="showUser(this.value)"><option>wybierz zgloszenie</option>';
$sql2="SELECT * FROM ajaxsql ORDER by id ASC";
$result2 = mysql_query($sql2);
while($row2 = mysql_fetch_array($result2))
{
echo "<option value="" . $row2['id'] . "">(" . $row2['id'] . ") " . $row2['imie'] . " " . $row2['nazwisko'] . "</option>";
}
echo'</select></form><div id="txtHint"></div>';
?>

Plik Ajaxa – ajax.js

Plik ajax.js oparłem na rozwiązaniu W3School więc od razu zaznaczam, że nie ja jestem jego autorem. Lecz postaram się w miarę moich skromnych możliwości skutecznie go objaśnić. Nie będę teraz pokazywał poszczególnych cześci kodu, ponieważ śmiało możecie go pobrać z tego adresu.

Plik ten zawiera 3 funkcje. Pierwsza z nich to wspominana już funkcja showUser.
Sprawdza ona najpierw czy Twoja przeglądarka obsługuje HTTP Reguest, jeśli nie to wyświetli po prostu komunikat „Browser does not support HTTP Request”. Używa także ostatniej w pliku funkcji czyli GetXmlHttpObject(), której działanie opisuje następne zdanie.

Jeśli przeglądarka nie obsługuje XMLHttpRequest (a obługują przeglądarki na Gecko) to używa ona ActiveXObject obsługiwanego przez popularnie nazywane badzIEwie czyli Internet Explorer.

Potem definiuję zmienną url, która będzie odwoływać się do pliku omówionego w następnym kroku – getajax.php
Obsługuje ona też dalsze parametry adresu url definiując tablicę $_GET['q'].

Kolejna funkcja - stateChanged() definuje nasz opisany już placeholder.

To koniec pliku ajax.js Pora na następny krok.

Plik obsługiwany przez Ajax – getajax.php

Tutaj godne podkreślenia jest to że należy osobno łączyć się z bazą danych. Nie można używać żadnych z tych funkcji: include(), require(), require_once(), include_once(). Zatem... PHP czas zacząć!

$q=$_GET["q"];
$con = mysql_connect('host', 'user', 'hasło');
if (!$con)
{
die('Nie mogę się połączyć. Error: ' . mysql_error());
}

Tym kodem zrobiliśmy następujące rzeczy: przekazaliśmy do zmiennej $q dane z tablicy $_GET['q'] czyli parametry url'a. Potem wywołaliśmy instrukcję łączenia się z bazą danych. W przypadku nie powodzenia skrypt wyświetli nam błąd o treść: „Nie mogę się połączyć. Error: szczegóły_błędu”. A oto co wykonujemy potem:

header("Content-type: text/html; charset=iso-8859-2");
mysql_select_db("baza", $con);
$sql="SELECT * FROM ajaxsql WHERE id = '".$q."'";
$result = mysql_query($sql);

Najpierw wyslaliśmy MIME informujący, że kod pobierany przez Ajax w przeglądarce będzie typu HTML, a kodowanie tekstu będzie w iso-8859-2. Następnie połączyliśmy się z bazą danych, wybraliśmy rekordy z tabeli i zapisaliśmy do zmiennej $result. Co robimy dalej?

while($row = mysql_fetch_array($result))
{
echo "(" . $row['id'] . ") ";
echo "" . $row['imie'] . " " . $row['nazwisko'] . "
";
echo "<strong>Miasto: </strong>" . $row['miasto'] . "";
}
mysql_close($con);

Ponownie używamy pętli while do wyświetlenia pobranych rekordów z tabeli. Tym razem w instrukcji while ładnie wyświetlamy wszystkie informacje na temat osoby znajdującej się w stworzonej już przez nas tabeli 'ajaxsql'. Potem zamykamy połączenie z bazą danych.

Całość tego pliku przedstawiam poniżej:

<?php
$q=$_GET["q"];
$con = mysql_connect('host', 'user', 'hasło');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
header("Content-type: text/html; charset=iso-8859-2");
mysql_select_db("baza", $con);
$sql="SELECT * FROM ajaxsql WHERE id = '".$q."'";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
{
echo "(" . $row['id'] . ") ";
echo "" . $row['imie'] . " " . $row['nazwisko'] . "
";
echo "<strong>Miasto: </strong>" . $row['miasto'] . "";
}

mysql_close($con);
?>

To już koniec naszego tutoriala. Przedstawiłem Wam metodę dynamicznego pobierania informacji z tabeli w bazie danych MySQL. Można to dowolnie dostosowywac do swoich projektów.
Wersję do pobrania znajdziecie tutaj.

MajareQ
Udostępnij ten artykuł:
Tagi:AJAX, baza danych, MySQL, PHP, SQL, łączenie z bazą
Zobacz podobne wpisy:

None Found
33818 ResponsesPobieranie+danych+z+MySQL+w+tle2009-01-01+11%3A47%3A39majareqhttp%3A%2F%2Fvivee.info%2F%3Fp%3D338 to “Pobieranie danych z MySQL w tle”
1. tomeks pisze:
  
  2 01 2009 o 11:17
  
  HTML: Jak się robi tutorial, to niech on uczy dobrych nawyków. A co to ma być “”? , są od dawna nie zalecane do użycia.
  
  PHP: Inną kwestią jest sam kod php, który jest wymieszany, do tego ta masa ‘echo’… utwalamy złe nawyki
  
  JS: Nie polecałbym tego ‘frejmłorka’ JS który został użyty – ręcznie trzeba przekazywać parametry z formularza… nie lepiej mootoolsem (ew. jquery) użyć do wysłania całego formularza? Będzie jedna funkcja do wysyłania wszystkich formularzy na stronie, teraz do każdego buzeru na stronie trzeba nową funkcje js pisać… a nie o to chodzi.
  
  Podsumowanie: MajareQ powinien raczej samemu się podszkolić, a następnie pisać tutoriale. Trzeba uczyć rozwiązań uniwersalnych a nie szytych na miarę, bo później jest lament an forach ‘dlaczego mi to nie działa’…
  
  Odpowiedz
2. tomeks pisze:
  
  2 01 2009 o 11:18
  
  W pierwszym akapicie była mowa o znacznikach [center] i [font].
  
  Odpowiedz
3. MajareQ pisze:
  
  2 01 2009 o 11:30
  
  Panie tomeks
  Mam prośbę. Nie ucz Pan ojca dzieci robić.
  
  1. Kto nie zaleca użycia font i color? Ktoś mi broni tego używać? Ja np. używam tego w Panelu Admina bo tam nikt nie będzie walidować strony.
  Jestem starej szkoły HTML i pewne nawyki wciąż są dobre. Są dobre chociażby wtedy kiedy span jest blokowany przez CSS’a.
  
  2. Dla Pana złe nawyki, dla innego dobre. Skoro jest Pan wielkim zwolennikiem obiektówki to po kie licho czyta Pan ten tekst?
  
  3. Żaden to framework. to tylko zwykły kod Ajaxa. Wzięty i lekko przerobiony z W3School. A jeśli mi Pan powie, że W3School nie znają się na rzeczy i kończymy rozmowę.
  
  “Podsumowanie: MajareQ powinien raczej samemu się podszkolić, a następnie pisać tutoriale.”
  
  A już myślałem, że mówi Pan to bezpodstawnie. Że nie zna Pan moich umiejętności. Jednak najwyraźniej zna mnie Pan na wylot.
  
  Pozdrawiam
  i życzę Panu jakiegoś odstresowania, bo najwidoczniej potrzebuje Pan sobie ulżyć gdzieś.
  
  Odpowiedz
4. Gremlin pisze:
  
  2 01 2009 o 11:46
  
  Pomysł na tutorial ciekawy, zwłaszcza teraz gdy ajax rośnie w siłę, warto być na czasie. Dziękuję i pozdrawiam.
  
  Odpowiedz
5. tomeks pisze:
  
  2 01 2009 o 13:05
  
  @MajareQ:
  
  Po drugiej linijce nie czytam dalej komentarza. Rzeczowo wytknąłem błędy w tutorialu, a tu od razu foch jak u 5-cio letniej dziewczynki. Gratuluję.
  
  Odpowiedz
6. MajareQ pisze:
  
  2 01 2009 o 13:14
  
  No to proponuję doczytać.
  Skoro Pan tak to odbiera to i ja gratuluję.
  
  Pozdrawiam ciepło.
  
  Odpowiedz
7. Asd pisze:
  
  2 01 2009 o 14:23
  
  Witam, chciałbym się dowiedzieć jak coś takiego zastosować do wykonania zadania w bazie danych.
  
  Np wpisac imie, nazwisko i miasto poprzez inputy a poźniej ajaxem to wysłać do bazy danych i napisać ze dane zostały poprawnie dodane, bez przeładowania strony.
  
  Odpowiedz
8. MajareQ pisze:
  
  2 01 2009 o 16:55
  
  Właściwie to sam sobie odpowiedziałeś
  podpowiem Ci jedynie funkcję save:
  
  function save(id) {
  $.post(“update.php”,{id: $(“#id”).text(), pole: id, wartosc: $(“#”+id+”_edit”).val()}, function(data) {
  $(“#”+data).text($(“#”+data+”_edit”).val()).show();
  $(“#”+data+”_edit”).remove();
  $(“#”+data+”_save”).remove();
  });
  }
  
  Odpowiedz
9. m1chu pisze:
  
  2 01 2009 o 19:07
  
  Asd: dla jQuery zainteresuj się metodami $.ajax lub $.post/$.get. Zasada ich działania jest taka (uproszczona, przykładowa):
  
  $.ajax ( {
  type: "POST", // dane przesyłane jako POST
  url: "plik.php", // plik docelowy, mogą być użyte także słowo kluczowe this odnoszące się do aktualnie obsługiwanego obiektu
  data: "nazwa=Adam&id=123", // dane przesyłane POST’em
  success: function(msg){
  $(‘#message-container’).text(msg); // to co zwróci Ci plik plik.php zostanie wypisane do elementu o id message-container
  }
  });
  
  <?php
  $nazwa = addslashes(strip_tags($_POST[‘nazwa’]));
  $id = (int) $_POST[‘id’];
  print ‘Witaj <strong>’ . $nazwa . ‘</strong>, jesteś <strong>’ . $id . ‘</strong> na liście ;]’;?>
  
  W skrócie to tak wygląda :]
  
  W Mootoolsie możesz szukać za obiektem Request, podobnie jak w prototype, z tymże tam na obiekcie Ajax (dokładnie Ajax.Request).
  
  W przypadku czystego Ajaxa przykład masz podany w artykule (XMLHttpRequest / ActiveXObject dla IE).
  
  Ogólnie to jest temat (komunikacji pomiędzy frameworkami JS/AJAX, a PHP) na oddzielny artykuł, więc jeżeli Ci się nie śpieszy to postaram się coś konkretniejszego, także dla Vivee napisać.
  
  Pozdrawiam.
  
  Odpowiedz
10. prz-emo pisze:
  
  3 01 2009 o 21:47
  
  Cały tutorial bardzo przydatny.
  
  Mam pytanie do autora – czy istnieje możliwość, aby po odświeżeniu strony, wybrane przez nas dane(przed odświeżeniem) nadal były wyświetlane? Chodzi mi, czy po odświeżeniu ajax wraca do strony głównej czy można jakoś zachować wczytaną treść.
  
  Odpowiedz
11. palmiak pisze:
  
  3 01 2009 o 22:11
  
  Wydaje mi się, że byś musiał zapamiętać ID w cookie, a pierwszą rzeczą jaką skrypt robi to na początku sprawdzać czy coś jest w ciastku. Jeżeli tak to by pokazywał rekord o odpowiednim ID, a jak nie to pustą stronę.
  
  Odpowiedz
12. MajareQ pisze:
  
  4 01 2009 o 13:40
  
  Dokładnie tak jak to palmiak napisał. Można też w sesji pamiętać co jest zaznaczone. Wtedy wystarczy dać instrukcję warunkową i w odpowiednim miejscu dać
  Za chwilkę spróbuję przedstawić przerobiony plik ajax.php
  
  Odpowiedz
13. majareq pisze:
  
  4 01 2009 o 14:18
  
  http://kezarth.net/ajax.zip
  
  od razu mówię, ze nie sprawdzałem czy działa.
  w ajax.js do funkcji showUser trzebabyło też dodać wysyłanie ciastka
  
  Odpowiedz
14. prz-emo pisze:
  
  4 01 2009 o 14:57
  
  Rozumiem, dzięki : )
  
  Odpowiedz
15. MajareQ pisze:
  
  4 01 2009 o 19:31
  
  Właśnie sprawdziłem – działa.
  Demo tutaj >> http://majareq.viawww.pl/demos/ajaxsql/ajax.php
  
  Odpowiedz
16. joo pisze:
  
  28 02 2010 o 21:52
  
  Super z tym że linki padły, i samego pliku js nie można nawet zobaczyć. Ktoś posiada ten plik i mógłby go dać w komentarzach?
  
  Odpowiedz
17. MajareQ pisze:
  
  24 04 2010 o 01:01
  
  Plik ajax.js:http://wklej.org/id/321737/
  Przepraszam za niedogodność.
  
  Odpowiedz
18. jack pisze:
  
  10 01 2012 o 17:04
  
  super – szkoda że brak przykładów i dema ;/
  
  Odpowiedz
Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Powiadom mnie o nowym komentarzu do tego artykułu.

id	imie	nazwisko	miasto
1	Adam	Kowalski	Warszawa
2	Joanna	Ogrodnik	Kraków
3	Paweł	Kostucha	Gniezno
4	Marta	Ługowska	Elbląg

Top 10

CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
Skrypty client-side
Skrypty server-side
Tutoriale
Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
Wieczór z Open Source
Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej

Polecane strony

No bookmarks avaliable.

Artykuły: