Inline Editing using PHP, MySQL, jQuery and Twitter Bootstrap

Posted by & filed under Ajax, CSS, HTML5, JAVASCRIPT, JQUERY, MYSQL, PHP.

In some appliaction user want to keep everything (add, edit and delete pages as one page) in one place, where user can add, edit and delete content they want using inline editing features. Have look at two type inline editing styles in the demo page.

Please refer my latest tutorial on Inline edit ( Inline edit using jQuery and PHP, MySQL and Bootstrap 3 )

 

Popup style – Inline editing :

 

 

Inline style – Inline Editing :

 

 

Inline Editing using PHP, MySQL, jQuery and Twitter Bootstrap

Inline Editing using PHP, MySQL, jQuery and Twitter Bootstrap

Step 1:

I have created sample table to implement this, use following sql query to create sample table for demo purpose.

CREATE TABLE IF NOT EXISTS `sample` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(75) NOT NULL,
  `comments` text NOT NULL,
  `country_name` varchar(100) NOT NULL,
  `dob` date NOT NULL,
  `appt` datetime NOT NULL,
  `combo_appt` date NOT NULL,
  `email` varchar(100) NOT NULL,
  `options` varchar(150) NOT NULL,
  `wy_text` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

Insert some sample data’s in it, using following sql queries if you need it.

INSERT INTO `sample` (`id`, `username`, `comments`, `country_name`, `dob`, `appt`, `combo_appt`, `email`, `options`, `wy_text`) VALUES
(1, 'muni', 'HI\nmuni', 'USA', '2013-08-17', '2013-08-22 10:50:00', '2014-09-22', 'muni@smmarttutorials.com', 'Array', '<h2>awesome</h2> comment!<br><br>Thank you,<br><br><br>Muni.');

 

 

Step 2:

Create config.php file to keep database CONNECTIONS at one place.

<?php
/*
 * Site : http:www.smarttutorials.net
 * Author :muni
 * 
 */

define('BASE_PATH','http://localhost/new_quiz/');
define('DB_HOST', 'localhost');
define('DB_NAME', 'inline');
define('DB_USER','root');
define('DB_PASSWORD','');

$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());

?>

Step 3:

Create index.php file and add following css and jquery files to implement simple textbox inline editing.

<link href="css/jquery-ui.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-editable.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-editable.min.js"></script>

Now  I am populating the textbox with data from the database.

<?php
require_once 'config.php';
$results = mysql_query("SELECT * FROM sample") or die(mysql_error());
$result = mysql_fetch_row($results);
?>

Now add following a tag and define type following properties data-type, data-pk, data=url and data-title.

<a href="#" id="username" data-type="text" data-pk="1" data-url="post.php" data-title="Enter username">
<?php
    if (!empty($result[1])) {
         echo $result[1];
    } else {  
         echo "muni";
    }
?></a>

Now define inline editing style with following jQuery script as well defining above textbox as an editable one.

<script type="text/javascript">
$.fn.editable.defaults.mode = "popup";                       
$('#username').editable();          
</script>

Now when user clicks on above a tag text, editable textbox will open where they can enter there name and submit to save.

where data-type=’text’ when user clicks on it, it will generate textbox.

data-url=’post.php’ — it says where to post submitted data.

data-pk=’1′ — Assign unique primary key of the data.

Textarea :

<a data-url="post.php" data-original-title="Enter comments" data-placeholder="Your comments here..." data-pk="1" data-type="textarea" id="comments" href="#">
<?php
   if (!empty($result[2])) { echo $result[2];
        } else {
               echo "Enter your comments here";
    }
    ?> 
<script type="text/javascript">
   $('#comments').editable();          
</script>

Email :

<a href="#" id="email" data-type="email" data-pk="1">
					    <?php
                        if (!empty($result[7])) { echo $result[7];
                        } else { echo "Enter your email!";
                        }
                    ?> 
					</a>
					<script>
						$(function() {
							$('#email').editable({
								url : 'post.php',
								title : 'Enter email'
							});
						});
					</script>

Dropdown Box :

<a data-url="post.php" data-type='select' data-original-title="Select your country" data-pk="1" id="country">
					   <?php
                    if (!empty($result[3])) { echo $result[3];
                    } else { echo "Select your country";
                    }
                    ?> 

					</a>

					<script>
						$(function() {
							$('#country').editable({
								source : [{
									value : '',
									text : 'Select your country'
								}, {
									value : 'India',
									text : 'India'
								}, {
									value : 'USA',
									text : 'USA'
								}, {
									value : 'Singapore',
									text : 'Singapore'
								}]
							});
						});
					</script>

To implement editable datapicker you need to add following datapicker css and jquery files.

<link href="css/datepicker.css" rel="stylesheet" media="screen">
<script src="js/bootstrap-datepicker.js"></script>

Datepicker :

<a data-url="post.php" href="#" data-type='date' id='dob' data-original-title="Select your dob" data-pk="1">
					    <?php
                        if (!empty($result[4])) { echo $result[4];
                        } else { echo "Select your dob";
                        }
                    ?> 
					</a>
					<script>
						$(function() {
							$('#dob').editable({
								format : 'yyyy-mm-dd',
								viewformat : 'dd/mm/yyyy',
								datepicker : {
									weekStart : 1
								}
							});
						});
					</script>

To implement datatimepicker to add following css and js files.

<link href="css/datetimepicker.css" rel="stylesheet" media="screen">
<script src="js/bootstrap-datetimepicker.js"></script>

Datetimepicker :

<a data-url="post.php" href="#" data-type='datetime' id='appt' data-original-title="Select your appiontment date and time" data-pk="1">
					    <?php
                        if (!empty($result[5])) { echo $result[5];
                        } else { echo "Select your appiontment date and time";
                        }
                    ?> 
				    </a>
					<script>
						$(function() {
							$('#appt').editable({
								format : 'yyyy-mm-dd hh:ii',
								viewformat : 'dd/mm/yyyy hh:ii',
								datetimepicker : {
									weekStart : 1
								}
							});
						});
					</script>

Combo Datapicker :

To implement this datapicker you to add following css and js files.

<script src="js/combodate.js"></script>
		<script src="js/moment.min.1.7.2.js"></script>

 

<a data-url="post.php" href="#" data-type='combodate' id='combo' data-pk="1" data-value="1984-05-15" data-original-title="Select date">
					    <?php
                        if (!empty($result[6])) { echo $result[6];
                        } else { echo "Select your dob";
                        }
                    ?> 
					</a>
					<script>
						$(function() {
							$('#combo').editable({
								format : 'YYYY-MM-DD',
								viewformat : 'DD.MM.YYYY',
								template : 'D / MMMM / YYYY',
								combodate : {
									minYear : 2000,
									maxYear : 2015,
									minuteStep : 1
								}
							});
						});
					</script>

Please refer following Combodate documentation, if you have any doubts.

 wysiwyg text editor :

To implement this add following css and js files.

<link href="css/bootstrap-wysihtml5.css" rel="stylesheet" media="screen">
<link href="css/prettify.css" rel="stylesheet" media="screen">
<script src="js/wysihtml5-0.3.0.min.js"></script>
<script src="js/wysihtml5.js"></script>
<script src="js/bootstrap-wysihtml5.js"></script>

 

<div id="wy" data-type="wysihtml5" data-pk="1">
						<?php
                        if (!empty($result[9])) { echo htmlspecialchars_decode($result[9]);
                        } else { echo "Write your story";
                        }
                    ?>
					</div>
					<script>
						$(function() {
							$('#wy').editable({
								url : 'post.php',
								title : 'Enter comments'
							});
						});
					</script>

Please refer following Bootstrap inline editing Documentation

Step 5:

Finally create post.php file, which take care of submitted data through inline editing and updates the database table fields.

<?php
require_once 'config.php';

/*
 * Site : http:www.smarttutorials.net
 * Author :muni
 * 
 */

if($_POST['name']=='username'){
    $id=$_POST['pk'];
    $username=$_POST['value'];
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,username) VALUES('".$id."','".$username."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET username='".$username."' WHERE id=$id") or die(mysql_error()); 
    }

}
if($_POST['name']=='comments'){
    $id=$_POST['pk'];
    $comments=$_POST['value'];
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,comments) VALUES('".$id."','".$comments."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET comments='".$comments."' WHERE id=$id") or die(mysql_error()); 
    }

}

if($_POST['name']=='country'){
    $id=$_POST['pk'];
    $country=$_POST['value'];
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,country_name) VALUES('".$id."','".$country."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET country_name='".$country."' WHERE id=$id") or die(mysql_error()); 
    }

}

if($_POST['name']=='dob'){
    $id=$_POST['pk'];
    $dob=$_POST['value'];
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,dob) VALUES('".$id."','".$dob."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET dob='".$dob."' WHERE id=$id") or die(mysql_error()); 
    }

}
if($_POST['name']=='appt'){
    $id=$_POST['pk'];
    $appt=$_POST['value'];
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,appt) VALUES('".$id."','".$appt."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET appt='".$appt."' WHERE id=$id") or die(mysql_error()); 
    }

}
if($_POST['name']=='combo'){
    $id=$_POST['pk'];
    $combo=$_POST['value'];
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,combo_appt) VALUES('".$id."','".$combo."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET combo_appt='".$combo."' WHERE id=$id") or die(mysql_error()); 
    }

}
if($_POST['name']=='email'){
    $id=$_POST['pk'];
    $email=$_POST['value'];
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,email) VALUES('".$id."','".$email."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET email='".$email."' WHERE id=$id") or die(mysql_error()); 
    }

}
if($_POST['name']=='options'){
    $id=$_POST['pk'];
    $options=$_POST['value'];
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,options) VALUES('".$id."','".$options."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET options='".$options."' WHERE id=$id") or die(mysql_error()); 
    }

}
if($_POST['name']=='wy'){
    $id=$_POST['pk'];
    $text=htmlspecialchars($_POST['value']);
    $result=mysql_query("SELECT COUNT(*) as count FROM sample WHERE id=$id") or die(mysql_error());
    $count= mysql_fetch_row($result);
    if($count[0]==0){
       mysql_query("INSERT INTO sample(id,wy_text) VALUES('".$id."','".$text."')") or die(mysql_error()); 
    }else{
       mysql_query("UPDATE sample SET wy_text='".$text."' WHERE id=$id") or die(mysql_error()); 
    }

}

?>

 .

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!