Внесување и бришење на податоци со jQuery и PHP

vnesuvanje brisenje

Во овој туторијал ќе ви објаснам како да внесувате и бришете коментари/податоци во база без да се вчита страната по ново, нешто слично како Facebook. За да го постигнеме ова ќе користиме PHP, jQuery, малку SQL и CSS за изгледот.

Крајниот резултат можете да го погледнете тука или пак да го преземете.

SQL

sql1

Најпрво во базата треба да креираме табела со име komentari во која ќе се зачувуваат коментарите.

CREATE TABLE IF NOT EXISTS `komentari` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `komentar` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

index.html

index.html содржи линк до jQuery библиотеката, листа со 3 коментари како пример, мал формулар со поле за текст и копче за испраќање.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Внесување и бришење на податоци со jQuery и PHP - list.mk</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript"> // jQuery </script>
</head>

<body>
<div id="main">
<h3>Што правиш/планираш?</h3>

<form method="post" name="form">
<textarea name="komentar" id="komentar"></textarea>
<input type="submit" id="submit" name="submit" value="Update" />
</form>

<ol id="timeline">
<li class="k-1">
Нацртај векторски Таблет-уред со Inkscape
<span class="del"><a href="#" title="Избриши" id="1" class="delete">X</a></span>
</li>

<li class="k-2">
PHP класа за работење со mySQL
<span class="del"><a href="#" title="Избриши" id="2" class="delete">X</a></span>
</li>

<li class="k-3">Колекција на бесплатни темплејти на маици
<span class="del"><a href="#" title="Избриши" id="3" class="delete">X</a></span>
</li>
</ol>

</div>
</body>
</html>

jQuery

$(function() {
	$("#submit").click(function() { // Доколку се кликне копчето за испраќање

		// Променливата kval ја зема вредноста од полето за текст
		var kval = $("#komentar").val();

		if (kval == '') { // Доколку полето за текст е празно
			// Се обојува полето за текст со црвена линија
			// и се фокусира на него
			$("#komentar").css("border-color", "#C33").focus();
		} else {

			$.ajax({
				type: "POST",
				url: "update.php",
				data: 'komentar='+ kval,
				cache: false,
				success: function(html) { // Доколку е се како што треба

					// Се прикачуваат добиените податоци од update.php
					$("#timeline").prepend(html);
					$("#timeline li:first").hide().slideDown();
					$("#komentar").val('').css("border-color", "#BBB");
				}
		});
		}
		return false;
	});

	// Доколку се кликне копчето за бришење
	$('.delete').live("click", function() {
		// Променливата id ја зема вредноста од id-то на копчето
		var id = $(this).attr("id");

		$.ajax({
			type: "POST",
			url: "update.php",
			data: 'id=' + id,
			cache: false,
			success: function(html){
				$(".k-" + id).slideUp(function() { $(this).remove(); });
			}
		});
		return false;
	});

});

update.php

Во update.php се вклучува класата за работење со mySQL за која напишав туторијал пред некој ден. Се проверува дали е внесен коментар, доколку е внесен се заменуваат некои карактери во HTML и се внесува во базата.

<?php

require_once('db.class.php' ); // Се прикачува класата за работење со mySQL
// Се активира класата со наведените податоци
$db = new DB('delicon.dev', 'user', 'password', 'tests');

if (isset($_POST['komentar'])) { // Доколку е внесен коментар

	// Се заменуваат некои карактери во HTML
	$komentar = htmlentities($_POST['komentar'], ENT_QUOTES, 'UTF-8');
	$komentar = stripslashes($komentar); // Се отстрануваат косите црти
	// Доколку има нова линија во коментарот се заменува со <br /> таг
	$komentar = nl2br($komentar);

	// Се внесува коментарот во базата на податоци
	$db->execute("INSERT INTO komentari SET komentar = '$komentar'");

	// Се избира коментарот и неговото id од базата
	// и се подредуваат по id опаќачки
	$query = $db->query("SELECT id, komentar FROM komentari ORDER BY id DESC");
	$row = $db->fetchObject($query);
?>
	<li class="k-<?php echo $row->id; ?>">
	<span class="komentar"><?php echo $row->komentar; ?></span>
	<span class="del"><a href="#" title="Избриши" id="<?php echo $row->id; ?>" class="delete">X</a></span>
	</li>
<?php
}

if ($_POST['id']) { // Доколку е наведен id
	$id = (int)($_POST['id']); // Се претвара во број
	// Се брише од базата
	$db->execute("DELETE FROM komentari WHERE id = $id LIMIT 1");
}

?>

CSS

* {
	margin:0;
	padding:0 }

a {
	text-decoration:none;
	color:#c33 }

a:hover { text-decoration:underline }

body {
	font:0.8125em/1.5 Tahoma, Geneva, sans-serif;
	color:#444;
	background:#FFF }

#main {
	width:500px;
	margin:30px auto 0;
	background:#EEE;
	padding:30px;
	border:1px solid #DDD;
	-moz-border-radius:8px;
	-khtml-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px }

.delete { float:right }

#timeline {
	clear:both;
	list-style:none;
	margin-top:30px }

#timeline li {
	padding:10px;
	border-bottom:1px solid #DDD;
	background:#FFF }

#timeline li:first-child { border-top:1px solid #DDD }

#timeline li:hover { background:#fffde5 }

form { overflow:hidden }

textarea {
	width:490px;
	font:1em/1.5 Tahoma, Geneva, sans-serif;
	padding:4px;
	border:1px solid #BBB;
	margin:10px 0 }

#submit {
	color:#FFF;
	background:#0cabce;
	border:1px solid #0688a5;
	padding:5px 15px;
	font-weight:bold;
	float:right;
	cursor:pointer }

textarea, #submit {
	-moz-border-radius:4px;
	-khtml-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px }

На крај целиот index.html треба да изгледа нешто како ова:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Внесување и бришење на податоци со jQuery и PHP - list.mk</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
	$("#submit").click(function() {

		var kval = $("#komentar").val();

		if (kval == '') {
			$("#komentar").css("border-color", "#C33").focus();
		} else {

			$.ajax({
				type: "POST",
				url: "update.php",
				data: 'komentar='+ kval,
				cache: false,
				success: function(html) {

					$("#timeline").prepend(html);
					$("#timeline li:first").hide().slideDown();
					$("#komentar").val('').css("border-color", "#BBB");
				}
		});
		}
		return false;
	});

	$('.delete').live("click", function() {
		var id = $(this).attr("id");

		$.ajax({
			type: "POST",
			url: "update.php",
			data: 'id=' + id,
			cache: false,
			success: function(html){
				$(".k-" + id).slideUp(function() { $(this).remove(); });
			}
		});
		return false;
	});

});
</script>

<style type="text/css">
* {
	margin:0;
	padding:0 }

a {
	text-decoration:none;
	color:#c33 }

a:hover { text-decoration:underline }

body {
	font:0.8125em/1.5 Tahoma, Geneva, sans-serif;
	color:#444;
	background:#FFF }

#main {
	width:500px;
	margin:30px auto 0;
	background:#EEE;
	padding:30px;
	border:1px solid #DDD;
	-moz-border-radius:8px;
	-khtml-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px }

.delete { float:right }

#timeline {
	clear:both;
	list-style:none;
	margin-top:30px }

#timeline li {
	padding:10px;
	border-bottom:1px solid #DDD;
	background:#FFF }

#timeline li:first-child { border-top:1px solid #DDD }

#timeline li:hover { background:#fffde5 }

form { overflow:hidden }

textarea {
	width:490px;
	font:1em/1.5 Tahoma, Geneva, sans-serif;
	padding:4px;
	border:1px solid #BBB;
	margin:10px 0 }

#submit {
	color:#FFF;
	background:#0cabce;
	border:1px solid #0688a5;
	padding:5px 15px;
	font-weight:bold;
	float:right;
	cursor:pointer }

textarea, #submit {
	-moz-border-radius:4px;
	-khtml-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px }
</style>
</head>

<body>
<div id="main">
<h3>Што правиш/планираш?</h3>

<form method="post" name="form">
<textarea name="komentar" id="komentar"></textarea>
<input type="submit" id="submit" name="submit" value="Update" />
</form>

<ol id="timeline">
<li class="k-1">
Нацртај векторски Таблет-уред со Inkscape
<span class="del"><a href="#" title="Избриши" id="1" class="delete">X</a></span>
</li>

<li class="k-2">
PHP класа за работење со mySQL
<span class="del"><a href="#" title="Избриши" id="2" class="delete">X</a></span>
</li>

<li class="k-3">
Колекција на бесплатни темплејти на маици
<span class="del"><a href="#" title="Избриши" id="3" class="delete">X</a></span>
</li>
</ol>

</div>
</body>
</html>
gravatar
Автор: Даниел Брзанов
За авторот: Здраво! Јас сум Даниел a.k.a. Delicon, се занимавам со веб дизајн и програмирање повеќе од 10 години и сакам да го споделам своето знаење со сите што се заинтересирани за тоа.

Comments are closed.