Scripts

Generic table edit

Met dit script kun je een willekeurige tabel editen in bijvoorbeeld een CMS. In een kolom aan de linkerkant van je pagina heb je titels van je records. In het rechterdeel heb je een div met de details per record. Via een multi-array in config.php kun je aangeven welke velden je wilt zien. De positie in de linkerkolom wordt onthouden dmv een combi van JavaScript en PHP. Het script maak gebruik van de mootools lib. Voor de interactie met de database gebruik ik class.core.php en class.database.php. Voor de overzichtelijkheid heb ik die hier weggelaten. Enjoy, en tips zijn natuurlijk welkom. Groeten, Jan Koehoorn

generic-table-edit
[b]config.php[/b]
[code]
<?php
	$config = array (
		'title' => 'Jan Koehoorn | TableEdit',
		'table' => 'table_edit',
		'list_field' => 'naam',
		'edit_fields' => array (
						'id' => 'hidden',
						'naam' => 'text',
						'adres' => 'text',
						'woonplaats' => 'text',
						'beschrijving' => 'textarea'
						)
		);
	$db = new database ();
?>
[/code]

[b]business_logic.php[/b]
[code]
<?php
	ini_set ('display_errors', 1);
	error_reporting (E_ALL);
	$fields = array_keys ($config['edit_fields']);
	$scrolltop = (isset ($_GET['scrolltop'])) ? ($_GET['scrolltop']) : (0);
	$id = 0;
	if (isset ($_GET['id']) && ctype_digit ($_GET['id'])) {
			$id = $_GET['id'];
	}
		
	if ($_SERVER['REQUEST_METHOD'] == 'POST') {
		if (isset ($_POST['id'])) {
			$sql_update = "
				UPDATE " . $config['table'] . "
				SET
				";
			foreach ($fields as $field) {
				if ($field != 'id') {
					$sql_update .= PHP_EOL;
					$sql_update .= $field . ' = \'' . mysql_real_escape_string ($_POST[$field]) . '\',';
				}
			}
			$sql_update = substr ($sql_update, 0, -1);
			$sql_update .= PHP_EOL . 'WHERE id = ' . $_POST['id'];
			if ($db->query ($sql_update)) {
				if ($db->get_affected_rows () == 1) {
					$db->set_msg ('<p>Record opgeslagen</p>');
				}
			}
		}
		else {
			$sql_insert = "
				INSERT INTO " . $config['table'] . "
				(" . implode (', ', array_keys ($_POST)) . ")
				VALUES
				(
				";
			foreach ($fields as $field) {
				if ($field != 'id') {
					$sql_insert .= PHP_EOL;
					$sql_insert .= '\'' . mysql_real_escape_string ($_POST[$field]) . '\',';
				}
			}
			$sql_insert = substr ($sql_insert, 0, -1);
			$sql_insert .= ')';
			if ($db->query ($sql_insert)) {
				if ($db->get_affected_rows () == 1) {
					$db->set_msg ('<p>Record opgeslagen</p>');
				}
			}
		}
	}
	$nav_html = '';
	$nav_html .= '<ul>';
	$nav_html .= '<li><a href="?action=new">nieuw</a></li>';
	if ($id) {
		$nav_html .= '<li><a id="delete" href="?action=delete&amp;id=' . $id . '">wissen</a></li>';
	}
	$nav_html .= '</ul>';
	if ($id) {
		if (isset ($_GET['action'])) {
			switch ($_GET['action']) {
				case 'new':
					break;
				case 'delete':
					$sql_delete = "
						DELETE FROM " . $config['table'] . "
						WHERE id = " . $id . "
						LIMIT 1
						";
					if ($db->query ($sql_delete)) {
						if ($db->get_affected_rows () == 1) {
							$db->set_msg ('<p>Record gewist</p>');
						}
					}
					break;
			}
		}
	}
	
	$list_html = '';
	$sql_select = "
		SELECT id, " . $config['list_field'] . "
		FROM " . $config['table'] . "
		ORDER BY " . $config['list_field'] . " ASC
		";
	if ($db->query ($sql_select)) {
		$list_html .= PHP_EOL . '<ul>';
		while ($row = $db->fetch ()) {
			$current = ($row['id'] == $id) ? (' class="current"') : ('');
			$list_html .= '<li><a' . $current . ' href="?action=edit&amp;id=' . $row['id'] . '">' . $row[$config['list_field']] . '</a></li>';
		}
		$list_html .= PHP_EOL . '</ul>';
	}
	$edit_html = '';
	if ($id) {
		$sql_edit = "
			SELECT " . implode (', ', $fields) . "
			FROM " . $config['table'] . "
			WHERE id = " . $id . "
			LIMIT 1
			";
		if ($db->query ($sql_edit)) {
			if ($row = $db->fetch ()) {
				$edit_html .= '<form method="post" action="' . $_SERVER['REQUEST_URI'] . '">';
				$edit_html .= '<p>';
				$edit_html .= '<input type="submit" value="opslaan" />';
				$edit_html .= '</p>';
				foreach ($fields as $field) {
					$edit_html .= '<p>';
					switch ($config['edit_fields'][$field]) {
						case 'hidden':
							$edit_html .= '<input id="' . $field . '" name="' . $field . '" type="hidden" value="' . $row[$field] . '">';
							break;
						case 'text':
							$edit_html .= '<label class="floated" for="' . $field . '">' . $field . ':</label>';
							$edit_html .= '<input class="medium" id="' . $field . '" name="' . $field . '" type="text" value="' . $row[$field] . '">';
							break;
						case 'textarea':
							$edit_html .= '<label class="floated" for="' . $field . '">' . $field . ':</label>';
							$edit_html .= '<textarea class="medium" id="' . $field . '" name="' . $field . '">' . $row[$field] . '</textarea>';
							break;
					}
					$edit_html .= '</p>';
				}
				$edit_html .= '</form>';
			}
		}
	}
	else {
		$edit_html .= '<form method="post" action="' . $_SERVER['REQUEST_URI'] . '">';
		$edit_html .= '<p>';
		$edit_html .= '<input type="submit" value="opslaan" />';
		$edit_html .= '</p>';
		foreach ($fields as $field) {
			$edit_html .= '<p>';
			switch ($config['edit_fields'][$field]) {
				case 'text':
					$edit_html .= '<label class="floated" for="' . $field . '">' . $field . ':</label>';
					$edit_html .= '<input class="medium" id="' . $field . '" name="' . $field . '" type="text" value="' . $row[$field] . '">';
					break;
				case 'textarea':
					$edit_html .= '<label class="floated" for="' . $field . '">' . $field . ':</label>';
					$edit_html .= '<textarea class="medium" id="' . $field . '" name="' . $field . '">' . $row[$field] . '</textarea>';
					break;
			}
			$edit_html .= '</p>';
		}
		$edit_html .= '</form>';
	}
?>
[/code]

[b]index.php[/b]
[code]
<?php
	ini_set ('display_errors', 1);
	error_reporting (E_ALL);
	require '../classes/class.core.php';
	require '../classes/class.database.php';
	require 'config.php';
	require 'business_logic.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title><?php echo $config['title']; ?></title>
	
	<script type="text/javascript" src="../mootools/mootools.js"></script>
	<script type="text/javascript" src="table_edit.js"></script>
	<script type="text/javascript">
		window.addEvent ('domready', function () {
			$('list').scrollTop = <?php echo $scrolltop; ?>;
		});
	</script>
	
	<link rel="stylesheet" type="text/css" media="screen" href="reset.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="table_edit.css" />
</head>

<body>
	<div id="container">
		<div id="header">
			<?php echo '<h1>Tabel: ' . $config['table'] . '</h1>'; ?>
		</div>
		<div id="nav">
			<?php echo $nav_html; ?>
		</div>
		<?php
			echo $db->get_msgs_html ();
			echo $db->get_errs_html ();
		?>
		<div id="content-container">
			<div id="list">
			<?php echo $list_html; ?>
			</div>
			<div id="record">
			<?php echo $edit_html; ?>
			</div>
		</div>
	</div>
</body>
</html>
[/code]

[b]reset.css[/b]
[code]
	
	html								{ font-size: 100%; }
	body								{ font: 62.5%/1em Verdana, Geneva, Arial, Helvetica, sans-serif; }

	html, body, div,
	dl, dt, dd, ul, ol, li,
	h1, h2, h3, h4, h5, h6, pre,
	form, fieldset, input, select, option, textarea,
	p, blockquote, th, td				{ margin: 0; padding: 0; }
	table								{ border-collapse: collapse; border-spacing: 0; }
	fieldset, img						{ border: 0; }
	address, caption, cite, code,
	dfn, em, strong, th, var			{ font-style: normal; font-weight: normal; }
	ol, ul								{ list-style: none; }
	caption, th							{ text-align: left; }
	h1, h2, h3, h4, h5, h6				{ font-weight: normal; }
	q:before, q:after					{ content: '"'; }
	abbr, acronym						{ border: 0; }
	:focus								{ outline: 0; }
	
[/code]

[b]table_edit.css[/b]
[code]

	div#container					{width: 800px; margin: 0 auto; border: 1px solid #ccc; font: 1.2em Verdana, Arial, Helvetica, sans-serif;}

	div#header						{height: 50px; padding: 10px;}
	div#header h1					{font: bold 2em Arial, Helvetica, sans-serif; color: #900; margin-left: 200px;}
	div#nav							{height: 20px; background: #ccc;}
	div#nav ul						{overflow: hidden; width: 300px; margin-left: 200px;}
	div#nav ul li					{float: left;}
	div#nav ul li a					{text-decoration: none; display: block; padding: 3px 10px; color: #000;}
	div#nav ul li a:link,
	div#nav ul li a:visited			{}
	div#nav ul li a:hover,
	div#nav ul li a:active			{background: #ff0;}
		
	div#content-container			{overflow: hidden; width: 100%;}
	div#list						{overflow: auto; float: left; width: 200px; height: 400px;}
	div#list ul						{}
	div#list ul li					{}
	div#list ul li a				{color: #000; text-decoration: none; display: block; padding: 5px;}
	div#list ul li a.current		{color: #fff; background: #900;}
	div#list ul li a:link,
	div#list ul li a:visited		{}
	div#list ul li a:hover,
	div#list ul li a:active			{color: #000; background: #ff0;}
	
	div#record						{margin: 0 0 0 200px;}
	
	form p							{margin: 10px;}
	label.floated					{float: left; width: 180px;}
	.medium							{width: 380px;}
	input, textarea					{font: 12px Verdana, Arial, Helvetica, sans-serif;}
	
	div.errs			{ background: #fcc url(bull_exclamation.gif) 5px 5px no-repeat; border: 2px solid #f99; margin: 10px; padding: 20px;}
	div.msgs			{ background: #ccf url(bull_msg.gif) 5px 5px no-repeat; border: 2px solid #99f; margin: 10px; padding: 20px; }
[/code]

[b]table_edit.js[/b]
[code]
	window.addEvent ('domready', function () {
		$$('#list a').each (function (item) {
			item.addEvent ('click', function (e) {
				e =new Event (e).preventDefault ();
				window.location = this.href + '&scrolltop=' + $('list').scrollTop;
			});
		});
		$('delete').addEvent ('click', function (e) {
			if (!confirm ('Record wissen. Zeker weten?')) {
				e =new Event (e).preventDefault ();
			}
		});
	});
[/code]

Tot slot nog een link naar de plaatjes:

[img]http://www.jankoehoorn.nl/table_edit/bull_exclamation.gif[/img]
[img]http://www.jankoehoorn.nl/table_edit/bull_msg.gif[/img]

Reacties

0
Nog geen reacties.