Smart Tutorials Demo Page
In this tutorial we are going to see how to make demo page like one in my blog. Having special demo page for all the post you had written, esp. helps your site users to see all your work in one place. That greatly improves your site users interest that inturn generates greater traffic to your site. Nearlye half of traffic to my site generated through my demo page.
This is very small php application that you can do it yourself, all you have to need is just follow this tutorial step by step. If you have felt any difficulty while implementing this leave your comment in the comment box.
Smart Tutorials Demo Page
Step 1:
Create a demo table with the following SQL query.
CREATE TABLE IF NOT EXISTS `demo` ( `id` int(11) NOT NULL AUTO_INCREMENT, `post_title` varchar(150) NOT NULL, `post_url` varchar(150) NOT NULL, `post_demo` varchar(100) NOT NULL, `download_link` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;
Step 2:
Now insert following sample data’s in the demo table.
INSERT INTO `demo` (`id`, `post_title`, `post_url`, `post_demo`, `download_link`) VALUES (1, 'Multi Stage HTML5 Form Using jQuery and CSS3', 'http://www.smarttutorials.net/multi-stage-html5-form-using-jquery-and-css3/', 'http://demo.smarttutorials.net/multi_form/', 'http://www.smarttutorials.net/subscribers.php?id=7'), (2, 'jQuery Script to Disable Right Click And Control Save on your Site', 'http://www.smarttutorials.net/jquery-script-to-disable-right-click-and-control-save-on-your-site/', 'http://demo.smarttutorials.net/jquery_preventer/sample.html', 'http://demo.smarttutorials.net/jquery_preventer/sample.html'), (3, 'Live Preview In jQuery', 'http://www.smarttutorials.net/live-preview-in-jquery/', 'http://smarttutorials.net/demo/live_preview.html', 'http://www.smarttutorials.net/subscribers.php?id=5'), (4, 'Google URL Shortener API Service PHP Script', 'http://www.smarttutorials.net/google-url-shortener-api-service-php-script/', 'http://www.smarttutorials.net/demo/google_url_shortener.php', 'http://www.smarttutorials.net/subscribers.php?id=4'), (5, 'Google Maps Reverse Geocoding API in PHP', 'http://www.smarttutorials.net/google-maps-reverse-geocoding-php/', 'http://www.smarttutorials.net/demo/reverse_geocode_api_google_maps.php', 'http://www.smarttutorials.net/subscribers.php?id=3'), (6, 'Google maps Geocoding API using PHP', 'http://www.smarttutorials.net/google-maps-geocoding-api-using-php/', 'http://smarttutorials.net/demo/geocode.php', 'http://www.smarttutorials.net/subscribers.php?id=1'), (7, 'Send Email with File Attachment (PDF, word files and images etc..) in PHP', 'http://www.smarttutorials.net/send-mail-with-file-attachemnt-php/', 'http://demo.smarttutorials.net/demo_mail/', 'http://www.smarttutorials.net/subscribers.php?id=6'), (8, 'Send an E-Mail with Attachment Using jQuery, Ajax and PHP without Refrshing a Page', 'http://www.smarttutorials.net/send-an-e-mail-with-attachment-using-jquery-ajax-and-php-without-refrshing-a-page/', 'http://demo.smarttutorials.net/demo_ajax_mail/', 'http://www.smarttutorials.net/subscribers.php?id=9'), (9, 'Multi Stage HTML5 Form Using jQuery, Ajax and CSS3 – PART 2', 'http://www.smarttutorials.net/multi-stage-html5-form-using-jquery-ajax-and-css3-part-2/', 'http://demo.smarttutorials.net/multi_form_part2/', 'http://www.smarttutorials.net/subscribers.php?id=8'), (10, 'Autocomplete Using jQuery, Ajax, PHP and MySQL', 'http://www.smarttutorials.net/autocomplete-using-jquery-ajax-php-and-mysql/', 'http://demo.smarttutorials.net/auto_complete/', 'http://www.smarttutorials.net/subscribers.php?id=10'), (11, 'Quiz application Using PHP, jQuery, Ajax, MySQL and HTML5', 'http://www.smarttutorials.net/quiz-application-using-php-jquery-ajax-mysql-and-html5/', 'http://demo.smarttutorials.net/Quiz/', 'http://www.smarttutorials.net/subscribers.php?id=12'), (12, 'Dynamically Add and Remove Textbox Using jQuery', 'http://www.smarttutorials.net/dynamically-add-and-remove-textbox-using-jquery/', 'http://demo.smarttutorials.net/dynamic_textbox/', 'http://www.smarttutorials.net/subscribers.php?id=13'), (13, 'Multi-Step SignUp Form Using jQuery, Ajax, PHP, HTML5 and CSS3', 'http://www.smarttutorials.net/multi-step-signup-form-using-jquery-ajax-php-html5-and-css3/', 'http://demo.smarttutorials.net/signup_form/', 'http://www.smarttutorials.net/subscribers.php?id=15'), (14, 'Unique jQuery Validation Success Message Using jQuery Validation Plugin', 'http://www.smarttutorials.net/unique-jquery-validation-success-message-using-jquery-validation-plugin/', 'http://demo.smarttutorials.net/unique_success/', 'http://www.smarttutorials.net/subscribers.php?id=16'), (15, 'Unique Email Validation Based on Checkbox Using jQuery Validation Plugin Custom Methods, Ajax and PHP', 'http://www.smarttutorials.net/unique-email-validation-based-on-checkbox-using-jquery-validation-plugin-custom-methods-ajax-and-php/', 'http://demo.smarttutorials.net/remote_validation/', 'http://www.smarttutorials.net/subscribers.php?id=17'), (16, 'Dynamically Add or Remove Table Row Using jQuery', 'http://www.smarttutorials.net/dynamically-add-or-remove-table-row-using-jquery/', 'http://demo.smarttutorials.net/table/', 'http://www.smarttutorials.net/subscribers.php?id=18');
Step 3:
Now create config.php file to keep database connection in a separate file, that prevents repetition of database connection codes.
<?php
/*
Author : muni, Smart tutorials
*/
define('DB_HOST', 'localhost');
define('DB_NAME', 'YOUR DB NAME');
define('DB_USER','YOUR DB USER NAME');
define('DB_PASSWORD','YOUR 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 4:
Now create post.php file, that gets your input data and stores in a database table. Create a form with the following fields.
<!DOCTYPE HTML>
<html>
<head>
<title>Post ADD</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js'></script>
</head>
<body>
<p>Post Add Page</p>
<div class='main'>
<div id='message'>
<img id='close' src='images/close.png'/>
<span>Data Updated Successfully!</span>
<br/>
<span>We will be in touch soon.</span>
<img id='checkmark' src='images/check.png'/>
</div>
<form id='post_add' method='post' action='post_add.php'>
<table>
<tr>
<td><textarea id="post_title" name="post_title" placeholder='Eneter Post Title Here' class='txt'></textarea></td>
<td class="status"></td>
</tr>
<tr>
<td><textarea id="post_url" name="post_url" placeholder='Eneter Post URL Here' class='txt'></textarea></td>
<td class="status"></td>
</tr>
<tr>
<td><textarea id="demo_url" name="demo_url" placeholder='Eneter Post Demo URL' class='txt'></textarea></td>
<td class="status"></td>
</tr>
<tr>
<td><textarea id="download_link" name="download_link" placeholder='Eneter Post Download link Here' class='txt'></textarea></td>
<td class="status"></td>
</tr>
<tr>
<td colspan='2'>
<input type='submit' name='submit' value='submit' id='submit_btn' class='but'/>
</td>
</tr>
</table>
</form>
</body>
</html>
Step 5:
Now add following css style and jQuery validation script to post.php file.
<style>
.error{color:red;}
.main{width:600px; margin:0px auto;}
table{margin-left:100px;}
@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:400px;height:100px;border:1px solid #00BB64;border-radius:3px;color:#999;margin-bottom:5px;}
p,span{font-family: Lobster;font-size:35px;text-align:center;}
.but{width:270px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;margin-left: 72px;}
em.error {background:url("unchecked.gif") no-repeat 0px 0px;padding-left: 16px;color: #ff0000;font-weight: bold;}
em.success {background:url("checked.gif") no-repeat 0px 0px;padding-left: 16px;color: #33ff55 !important;}
span{color:orange;}
.hide{display:none;}
#message{display:none;margin-top: 100px;color: #fff;width: 400px;height: 133px;border: 2px solid #00BB64;background-color:#00BB64;border-radius: 10px;position: relative;}
#message span{text-align: center;font-size:30px;color:#fff;padding-left:38px;}
#message #checkmark{margin-left: 170px;}
#close{position: absolute;right: -8px;top: -10px;}
</style>
jQuery Script :
<script>
(function($) {
$("#post_add").validate({
submitHandler: function(form) {
var dataString = $("form").serialize();
$.ajax({
type: "POST",
url: "show.php",
data: dataString,
success: function(msg) {
alert(msg);
$('#post_add').addClass('hide');
$("#message").show();
}
});
return false;
},
rules: {
post_title: {
required: true,
minlength : 10
},
post_url: {
required: true,
minlength : 10
},
demo_url: {
required: true,
minlength : 20
},
download_link: {
required: true,
minlength : 20
}
},
messages: {
post_title: {
required:"Please enter Post Title Here",
minlength: "Please enter a minimun 10 chars"
},
post_url: {
required:"Please enter Post URL Here",
minlength: "Please enter a minimun 10 chars"
},
demo_url: {
required:"Please enter Demo URL Here",
minlength: "Please enter a minimun 20 chars"
},
download_link: {
required:"Please enter Download Link Here",
minlength: "Please enter a minimun 20 chars"
}
},
debug: true,
errorElement: "em",
errorContainer: $("#warning, #summary"),
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
},
success: function(label) {
label.text("ok!").addClass("success");
}
});
$('#close').click(function(){
$('#message').hide();
$("#post_add").removeClass("hide");
$('textarea').val('');
location.reload();
});
})(jQuery);
</script>
Step 6:
Now create show.php file, which gets the posted data and updates the database table.
<?php
/*
Author : muni, Smart tutorials
*/
require_once 'config.php';
$post_title=$_POST['post_title'];
$post_url=$_POST['post_url'];
$demo_url=$_POST['demo_url'];
$download_link=$_POST['download_link'];
$query="INSERT INTO demo (post_title,post_url,post_demo,download_link)
VALUES ('$post_title','$post_url','$demo_url','$download_link')";
echo "$query";
$response=mysql_query($query);
echo $response;
?>
Step 7:
Finally front end development, now create index.php file with the following table structure.
<?php require_once 'config.php';?>
<!DOCTYPE html>
<html>
<head>
<title>Post Demo Page</title>
<meta charset='utf-8'>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<a href='http://www.smarttutorials.net/' id='home'>
<h2> Back Home !</h2>
</a>
<h1>Post Demo Page</h1>
<div class='outer'>
<table>
<tr>
<th>Post Title</th>
<th>Demo</th>
<th>Download Link</th>
</tr>
<?php $result=mysql_query('SELECT * FROM demo ORDER BY id DESC');
while($response=mysql_fetch_array($result)){
?>
<tr>
<td class='post align'><a href='<?php echo $response['post_url'];?>' target="_blank"><?php echo $response['post_title'];?></a></td>
<td class='post align1'><a href='<?php echo $response['post_demo'];?>' target="_blank">Demo</a></td>
<td class='post align1'><a href='<?php echo $response['download_link'];?>' target="_blank">Download Link</a></td>
</tr>
<?php } ?>
</table>
</div>
</body>
</html>
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] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
