Please support us by disabling ad blocker for smarttutorials.net ...

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.

  • DShed

    This looks stunning – can’t wait to use it. Thank you for sharing 🙂

  • DShed

    Help! I’ve deployed this and it works flawlessly in firefox and chrome, but in IE 9 i see the following error in the console log

    Unable to get value of the property ‘sandbox’: object is null or undefined
    wysihtml5-0.3.0.min.js, line 260 character 364

    The WYSI field just keeps showing the loading wheel. Your page works fine in IE9, what can i do?

    Thank you

  • DShed

    Turns out I has IE in compatibility mode 😐

  • Justin

    This is fantastic – thank you!

    One problem: for the editable textarea, I get it to work fine. However, when I refresh the page with text I have already saved, it displays the text with a line space above the text.

    Is there any way to fix that? I’ve been looking at the CSS, but couldn’t find it.

    Thanks!

  • Saad

    Great work. Need small help. The comments textarea puts a lot of whitespaces before and after the value retrieved from the db. Same issue is on your sample page as well. Any tweak to avoid it?
    Thanks,
    Saad

  • jafran

    It’s showing an error like below
    NetworkError: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ‘file:///C:/xampp/htdocs/nawasmotors/application/views/templates/post.php
    what can I do ??

  • Ali

    Awesome, cant wait to use this in real practice

  • KasperskyHut

    The download link I get is for BS3 (inline.zip). Could you provide me link for BS2 please. Thanks.

Get Instant Script Download Access!