jQuery #6 – System CRUD połączony z PHP

Jakiś czas temu Czytelnicy zaproponowali mi, abym napisał kilka słów o tworzeniu systemu CRUD przy użyciu jQuery. Rozwinięcie skrótu CRUD to Create, Read, Update, Delete. Inaczej rzecz ujmując CRUD jest dynamicznym panelem zarządzania treścią (panelem admina), za pomocą którego zmiany w bazie danych dokonywane są bez wysyłania HTML’owego formularza, dzięki zapytaniom AJAX.

Jak to ma wyglądać?

W trakcie tej części kursu omówię wszystkie 4 funkcje systemu CRUD na przykładzie prostego skryptu newsów. Z poziomu panelu zarządzania treścią będziemy mieli możliwość dodawania nowych aktualności, edytowania ich, przeglądania oraz, kiedy zajdzie taka potrzeba – do usuwania. Zalecam przypomnieć sobie część trzecią kursu o zapytaniach AJAX oraz drugą część o zdarzeniach na stronie.

Przygotowanie bazy danych

Na początku musimy utworzyć nową tabelę w bazie danych, aby mieć do czego zapisywać informacje. Będzie to prosta tabela z koulmną ID oraz drugą na treść.

CREATE TABLE IF NOT EXISTS `newsy` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `tresc` text COLLATE utf8_polish_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci AUTO_INCREMENT=1 ;

Zawartość pliku conf.php, będzie potrzebny w każdym przykładzie:

<?php
mysql_connect('localhost', 'root', 'haslo');
mysql_select_db('test');
?>

Dodawanie newsa (Create)

Formularz służący do dodawania newsów tworzymy w identyczny sposób, co ten tradycyjny, który wysyła dane do skryptu PHP POSTem. Nic nie stoi także na przeszkodzie, aby przerobić tego typu formularz na dynamiczny. Przy większych projektach dobrą praktyką jest najpierw stworzenie i oskryptowanie zwykłego formularza, a następnie przy pomocy JavaScriptu przerobienie go na dynamiczny. Dzięki temu, wszystkie funkcje na stronie będą działać prawidłowo dla osób z włączoną i wyłączoną obsługą JS.

Z przyczyn technicznych i obawy o serwer nie mogę zamieścić przykładów w postaci plików demonstracyjnych.

Poniższy kod (plik dodawanie.php) to najprostszy formularz wraz z skryptem PHP, który odpowiada za dodawanie informacji do bazy danych.

<?php
include 'conf.php';
 
if(isset($_POST['dodawanie'])) {
	$tresc = addslashes(mysql_escape_string($_POST['tresc']));
	mysql_set_charset("utf8");
	mysql_query("INSERT INTO `newsy` (`tresc`) VALUES ('$tresc');");
}
?>
<!DOCTYPE html>
<html>
<head>
	<title>Kurs jQuery #6 example 1</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
 
<form action="" method="post" id="form_dodawanie">
	<textarea name="tresc" rows="10" cols="35"></textarea><br /><br />
	<input type="submit" name="dodawanie" value="Dodaj newsa" />
</form>
 
</body>
</html>

Przepisanie powyższego formularza na taki, który wysyła dane bez przeładowania strony ogranicza się do kilku kroków.

  1. Przechwytujemy zdarzenie przy pomocy jQuery $(’form’).submit(), zwracając przy tym wartość false (aby formularz nie został wysłany tradycyjną metodą).
  2. Wysyłamy wartość pola z treścią do pliku ajax.php, który odpowiada za dodanie wpisu do bazy.
  3. Informujemy użytkownika, że proces przebiegł prawidłowo, lub w przypadku błędu, wypisujemy go.
<?php
include 'conf.php';
 
if(isset($_POST['dodawanie'])) {
	$tresc = addslashes(mysql_escape_string($_POST['tresc']));
	mysql_set_charset("utf8");
	mysql_query("INSERT INTO `newsy` (`tresc`) VALUES ('$tresc');");
}
?>
<!DOCTYPE html>
<html>
<head>
	<title>Kurs jQuery #6 example 1</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("#form_dodawanie").submit(function() {
			var tresc = $('textarea[name="tresc"]').val();
			//alert(tresc);
			$.ajax({
				url: "ajax.php",
				type: "POST",
				data: "tresc="+tresc+"&akcja=dodawanie",
				success: function(msg) {
					$("#wynik").text(msg);
				},
				error: function() {
					$("#wynik").text("Wystąpił błąd podczas komunikacji AJAX");
				}
			});
			return false;
		});
	});
	</script>
</head>
 
<form action="" method="post" id="form_dodawanie">
	<textarea name="tresc" rows="10" cols="35"></textarea><br /><br />
	<input type="submit" name="dodawanie" value="Dodaj newsa" /> <span id="wynik"></span>
</form>
 
</body>
</html>

Zawartość pliku ajax.php:

<?php
include 'conf.php';
 
$akcja = $_POST['akcja'];
switch($akcja) {
	case "dodawanie":
		$tresc = addslashes(mysql_escape_string($_POST['tresc']));
		mysql_set_charset("utf8");
		mysql_query("INSERT INTO `newsy` (`tresc`) VALUES ('$tresc');");
 
		echo "News dodany prawidłowo";
	break;
}
?>

Jak można zauważyć, zawartość takiego pliku nie różni się od zwykłego skryptu. Warto go oczywiście uzupełnić o kontrolę błędów.

Wyświetlanie aktualności (Read)

Pobieranie danych, które następnie wykorzystamy do ich edycji nie powinno stanowić problemu. Ja wykorzystam do tego celu standardowe mechanizmy dostępne w PHP.

Zawartość pliku wyswietlanie.php:

<!DOCTYPE html>
<html>
<head>
	<title>Kurs jQuery #6 example 2</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
 
<?php
include 'conf.php';
 
$zapytanie = mysql_query("SELECT * FROM `newsy` ORDER BY `id` DESC");
while($zapytanie && $rekord = mysql_fetch_assoc($zapytanie)) {
	$id = $rekord['id'];
	$tresc = stripslashes(htmlspecialchars($rekord['tresc']));
	echo'
		News #'.$id.' <a href="edytuj.php?id='.$id.'" class="edytuj" id="edytuj_'.$id.'">Edytuj</a> <a href="usun.php?id='.$id.'" class="usun" id="usun_'.$id.'">Usuń</a> <span id="wynik_'.$id.'"><br /><i>'.$tresc.'</i><hr />
	';
	}
?>
 
</body>
</html>

Ten sam plik wykorzystamy w dwóch następnych przykładach. Odnośniki, które prowadzą do plików edytuj.php oraz usun.php pominę, gdyż ich tworzenie nie jest istotą tego wpisu.

Edycja danych (Update)

Podobnie, jak przy dodawaniu wpisów przechwytywaliśmy zdarzenie submit(), tak teraz musimy wychwycić zdarzenie click() na link z klasą .edycja. Następnie pobierzemy treść wpisu poprzez zapytanie AJAX do formularza, który po wysłaniu prześle w tle zmodyfikowaną treść do skryptu ajax.php.

Na początku dodajmy dwa warunki do pliku ajax.php odpowiedzialne za pobieranie treści i edycję newsów:

<?php
include 'conf.php';
 
$akcja = $_POST['akcja'];
switch($akcja) {
	case "dodawanie":
		$tresc = addslashes(mysql_escape_string($_POST['tresc']));
		mysql_set_charset("utf8");
		mysql_query("INSERT INTO `newsy` (`tresc`) VALUES ('$tresc');");
 
		echo "News dodany prawidłowo";
	break;
 
	case "pobierz_tresc":
		$id = addslashes(mysql_escape_string($_POST['id']));
		$zapytanie = mysql_query("SELECT `tresc` FROM `newsy` WHERE `id` = $id;");
		while($zapytanie && $rekord = mysql_fetch_assoc($zapytanie)) {
			$tresc = $rekord['tresc'];
		}
 
		echo $tresc;
	break;
 
	case "edycja":
		$id = addslashes(mysql_escape_string($_POST['id']));
		$tresc = addslashes(mysql_escape_string($_POST['tresc']));
		$zapytanie = mysql_query("UPDATE `newsy` SET `tresc` =  '$tresc' WHERE `id` = $id;");
 
		echo "Edycja zakończona pomyślnie";
	break;
}
?>

Pełny kod HTML oraz JS, odpowiedzialny za pracę:

<!DOCTYPE html>
<html>
<head>
	<title>Kurs jQuery #6 example 2</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('.edytuj').click(function() {
			var id = $(this).attr('id').split("_");
			id = id[1];
			//alert(id);
 
			$.ajax({
				url: "ajax.php",
				type: "POST",
				data: "id="+id+"&akcja=pobierz_tresc",
				success: function(msg) {
					$("#form_edycja").show();
					$("#form_edycja textarea").text(msg);
					$('input[name="id"]').attr('value', id);
				},
				error: function() {
					$("#wynik_"+id).text("Wystąpił błąd podczas komunikacji AJAX");
				}
			});
 
			return false;
		});
 
		$('#form_edycja').submit(function() {
			var id = $('input[name="id"]').val();
			var tresc = $('textarea[name="tresc"]').val();
			//alert(id);
			//alert(tresc);
 
			$.ajax({
				url: "ajax.php",
				type: "POST",
				data: "id="+id+"&tresc="+tresc+"&akcja=edycja",
				success: function(msg) {
					$("#form_edycja").hide();
					$("#wynik_"+id).text(msg);
				},
				error: function() {
					$("#wynik").text("Wystąpił błąd podczas komunikacji AJAX");
				}
			});
 
			return false;
		});
	});
	</script>
</head>
 
<?php
include 'conf.php';
 
$zapytanie = mysql_query("SELECT * FROM `newsy` ORDER BY `id` DESC");
while($zapytanie && $rekord = mysql_fetch_assoc($zapytanie)) {
	$id = $rekord['id'];
	$tresc = stripslashes(htmlspecialchars($rekord['tresc']));
	echo'
		News #'.$id.' <a href="edytuj.php?id='.$id.'" class="edytuj" id="edytuj_'.$id.'">Edytuj</a> <a href="usun.php?id='.$id.'" class="usun" id="usun_'.$id.'">Usuń</a> <span id="wynik_'.$id.'"></span><br /><i>'.$tresc.'</i><hr />
	';
	}
?>
 
<form action="" method="post" id="form_edycja" style="display:none;">
	<h2>Edycja:</h2>
	<input type="hidden" name="id" value="" />
	<textarea name="tresc" rows="10" cols="35"></textarea><br /><br />
	<input type="submit" name="edycja" value="Edytuj newsa" /> <span id="wynik"></span>
</form>
 
</body>
</html>

Usuwanie rekordów (Delete)

Myślę, że każdy powinien być już w stanie samodzielnie napisać kod odpowiedzialny za usuwanie rekordów z bazy. Najpierw do pliku ajax.php dodajmy jeden warunek.

case "usuwanie":
		$id = addslashes(mysql_escape_string($_POST['id']));
		$zapytanie = mysql_query("DELETE FROM `newsy` WHERE `id` = $id;");
 
		echo "Wpis został usunięty";
	break;

Kod w JavaScript będzie równie prosty:

$('.usun').click(function() {
	var id = $(this).attr('id').split("_");
	id = id[1];
	//alert(id);
 
	$.ajax({
		url: "ajax.php",
		type: "POST",
		data: "id="+id+"&akcja=usuwanie",
		success: function(msg) {
			$("#wynik_"+id).text(msg);
		},
		error: function() {
			$("#wynik_"+id).text("Wystąpił błąd podczas komunikacji AJAX");
		}
	});
 
	return false;
});

Podsumowanie

Tworzenie dynamicznego panelu zarządzania treścią (CRUD) nie jest rzeczą trudną. Przy pomocy jQuery możemy w prosty sposób przerobić formularze statyczne na dynamiczne. Należy przy tym pamiętać, że zwrócenie false w kodzie spowoduje wykonanie kodu JS bez wysłania żądania do serwera poprzez przeładowanie strony. Nic nie stoi oczywiści na przeszkodzie, aby pliki dodawanie.php oraz wyswietlanie.php połączyć w jeden, większy i dodać do akcji przyjemną dla oka animację.

Paczka *.zip do pobrania z powyższymi przykładami.

3 thoughts on “jQuery #6 – System CRUD połączony z PHP

  1. kliknąłem ze względu na profesjonalną nazwę, o której wcześniej nie słyszałem, a tu piszesz ACP w ajaxie 😛

  2. Mam pytanie dlaczego dla zmiennych numerycznych nie jest używane intval()? moim zdaniem to najlepsze najprostsze rozwiązanie?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *