Friday, 8 November 2019

responsive Login form in html code


 Responsive Login form in html  code


Index.html 



<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Login Form</title>



      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <body>
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Login</h1>
</div>

<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" id="login-name">
<label class="login-field-icon fui-user" for="login-name"></label>
</div>

<div class="control-group">
<input type="password" class="login-field" value="" placeholder="password" id="login-pass">
<label class="login-field-icon fui-lock" for="login-pass"></label>
</div>

<a class="btn btn-primary btn-large btn-block" href="#">login</a>
<a class="login-link" href="#">Lost your password?</a>
</div>
</div>
</div>
</body>


</body>
</html>




style.css



* {
box-sizing: border-box;
}

*:focus {
outline: none;
}
body {
font-family: Arial;
background-color: #3498DB;
padding: 50px;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
background-color: #FFF;
padding: 20px;
border-radius: 5px
}

.app-title {
text-align: center;
color: #777;
}

.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}


input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}

input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}

.btn {
  border: 2px solid transparent;
  background: #3498DB;
  color: #ffffff;
  font-size: 16px;
  line-height: 25px;
  padding: 10px 0;
  text-decoration: none;
  text-shadow: none;
  border-radius: 3px;
  box-shadow: none;
  transition: 0.25s;
  display: block;
  width: 250px;
  margin: 0 auto;
}

.btn:hover {
  background-color: #2980B9;
}

.login-link {
  font-size: 12px;
  color: #444;
  display: block;
margin-top: 12px;
}

sliding form development sample


sliding form development sample

slider.html




<html>
<head>

<meta name="robots" content="noindex, nofollow">

<!-- include css file here-->
<link rel="stylesheet" href="css/style.css"/>

    <!-- below line is used for google font-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>

<script src="js/slider.js"></script>
</head>

<body>

<!-- advertising div -->
<div class="formget">


<!-- Sliding div starts here -->
<div id="slider" style="right:-342px;">
<div id="sidebar" onclick="open_panel()">
<img src="images/contact.png"/>
</div>
<div id="header">

<h2>Contact Form</h2>
<input type="text" name="dname" value="Your Name"/>
<input type="text" name="demail" value="Your Email"/>
<h4>Query type</h4>
<select>
        <option>General</option>
<option>Presales</option>
<option>Technical</option>
<option>Others</option>
</select>

<textarea type="text" value="message">Message</textarea><br/>
<button>Send Message</button>

</div>
</div>
<!-- Sliding div ends here -->
</body>

</html>


style.css




body{
overflow:hidden;
width:960px;
margin:10px auto;
}

p{
border-bottom: 1px dotted #d8d8d8;
padding-bottom: 15px;
font-size:17px;
}

#slider{
width:500px;
top:100px;
position:absolute;
}
 
#header{
width:260px;
height:520px;
position:absolute;
right:0px;
border:1px solid #d8d8d8;
margin-left:40px;
padding:20px 40px;
border-radius:3px;
box-shadow: 0 0 8px gray;
}


#sidebar{
position:absolute;
top:180px;
left:113px;
box-shadow: 0 0 8px gray;
}

#sidebar1{

position:absolute;
top:180px;
left:113px;
box-shadow: 0 0 8px gray;
}


h3{
font-family: 'Roboto Slab', serif;
}

input[type=text]{
margin-top: 10px;
padding:6px;
width:100%;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1;
}

h4{
font-size:15px;
}
div#title{
position:absolute;
top:300px;
left:650px;
}

select{
padding:6px;
width:100%;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1;
}

textarea{
padding:6px;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1;
margin-top: 10px;
height:80px;
width:100%;
}

button{
background:#2bc1f2;
border: none;
color: #fff;
width: 100%;
font-size: 22px;
font-weight: bolder;
padding: 8px 0 8px 0;
border-radius: 3px;
cursor: pointer;
margin-top:25px;
}

slider.js



function open_panel()
{
slideIt();
var a=document.getElementById("sidebar");
a.setAttribute("id","sidebar1");
a.setAttribute("onclick","close_panel()");
}

function slideIt()
{
var slidingDiv = document.getElementById("slider");
var stopPosition = 0;

if (parseInt(slidingDiv.style.right) < stopPosition )
{
slidingDiv.style.right = parseInt(slidingDiv.style.right) + 2 + "px";
setTimeout(slideIt, 1);
}
}

function close_panel(){
slideIn();
a=document.getElementById("sidebar1");
a.setAttribute("id","sidebar");
a.setAttribute("onclick","open_panel()");
}

function slideIn()
{
var slidingDiv = document.getElementById("slider");
var stopPosition = -342;

if (parseInt(slidingDiv.style.right) > stopPosition )
{
slidingDiv.style.right = parseInt(slidingDiv.style.right) - 2 + "px";
setTimeout(slideIn, 1);
}


}


send email contact form detail in php

send email contact form detail

index.php




<?php
//index.php

$count = 0;
$error = '';
if(isset($_POST['submit']))
{
$name = '';
$phone = '';
$email = '';
$address = '';
if(empty($_POST['name']))
{
$error .= '<p class="text-danger">Name is Required</p>';
}
else
{
if(!preg_match("/^[a-zA-Z ]*$/",$_POST["name"]))
{
$error .= '<p class="text-danger">Only Alphabet allowed in Name</p>';
}
else
{
$name = $_POST['name'];
}
}

if(empty($_POST["email"]))
{
$error .= '<p class="text-danger">Email Address is Required</p>';
}
else
{
if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL))
{
$error .= '<p class="text-danger">Invalid email format</p>';
}
else
{
$email = $_POST["email"];
}
}

if(empty($_POST["phone"]))
{
$error .= '<p class="text-danger">Phone Number is Required</p>';
}
else
{
if(!preg_match("/^[0-9]*$/",$_POST["phone"]))
{
$error .= '<p class="text-danger">Only Numbers allowed in Phone</p>';
}
else
{
$phone = $_POST["phone"];
}
}

if(empty($_POST["address"]))
{
$error .= '<p class="text-danger">Address is Required</p>';
}
else
{
$address = $_POST["address"];
}

if($error == '')
{
$count = $count + 1;
$error = '<label class="text-success">Form Data Submitted</label>';
}


}

?>
<!DOCTYPE html>
<html>
<head>
<title>How to Restore Form Data using Jquery with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="savy.js"></script>
</head>
<body>
<br />
<h2 align="center"><a href="#">How to Restore Form Data using Jquery with PHP</a></h2>
<br />
<div class="container">
<div class="row">
<div class="col-lg-6" style="margin:0 auto; float:none;">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">User Form</h3>
</div>
<div class="panel-body">
<form method="post">
<span class="text-danger"><?php echo $error; ?></span>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" id="email" class="form-control" />
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" name="phone" id="phone" class="form-control" />
</div>
<div class="form-group">
<label>Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
</div>
<div class="form-group">
<label>Gender</label>
<select name="gender" id="gender" class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label>Programming Languages</label><br />
<div class="checkbox-inline">
<label><input type="checkbox" name="languages[]" id="php_language" value="PHP">PHP</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="languages[]" id="java_language" value="Java">Java</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="languages[]" id="net_language" value=".Net">.Net</label>
</div>
</div>
<div class="form-group" align="center">
<input type="submit" name="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<script>
$(document).ready(function(){

<?php
if($count == 0)
{
?>
$('#name').savy('load');
$('#email').savy('load');
$('#phone').savy('load');
$('#address').savy('load');
$('#gender').savy('load');
$('#php_language').savy('load');
$('#java_language').savy('load');
$('#net_language').savy('load');
<?php
}
else
{
?>
$('#name').savy('destroy');
$('#email').savy('destroy');
$('#phone').savy('destroy');
$('#address').savy('destroy');
$('#gender').savy('destroy');
$('.languages').savy('destroy');
$('#php_language').savy('destroy');
$('#java_language').savy('destroy');
$('#net_language').savy('destroy');
<?php
}
?>

});

</script>



mail.html


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;

    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
</style>
</head>
<body>

<h3>Contact Form</h3>

<div class="container">
  <form action="www.bhagyawebtechnologies.in/sendmail.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    <label for="lname">email</label>
    <input type="text" id="email" name="email" placeholder="Your last name..">
<label for="lname">telephone</label>
    <input type="text" id="telephone" name="telephone" placeholder="Your last name..">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="comments">Subject</label>
    <textarea id="comments" name="comments" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>



sendmail.php




<?php
if(isset($_POST['email'])) {
    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "abc@gmail.com";
    $email_subject = "Meet Now";
   function died($error) {
        // your error code can go here
        echo "but there were error found with the form you submitted. ";

        echo $error."<br /><br />";
        echo "Please go back and fix these errors.<br /><br />";
        die();
    }
    // validation expected data exists
    if(!isset($_POST['fname]) ||
        !isset($_POST['lname']) ||
        !isset($_POST['email']) ||
        !isset($_POST['telephone']) ||
        !isset($_POST['country']) ||
    
        !isset($_POST['comments'])) {
        died('We are sorry, but there appears to be a problem with the form you submitted.');       
    }
     
    $fname = $_POST['fname']; // required
    $lname = $_POST['lname']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['telephone']; // not required
        $country = $_POST['country']; // not required
         
    $comments = $_POST['comments']; // required
    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }
    $string_exp = "/^[A-Za-z .'-]+$/";
  if(!preg_match($string_exp,$fname)) {
    $error_message .= 'The First Name you entered does not appear to be valid.<br />';
  }
  if(!preg_match($string_exp,$lname)) {
    $error_message .= 'The Last Name you entered does not appear to be valid.<br />';
  }
  if(strlen($comments) < 0) {
    $error_message .= 'The Comments you entered do not appear to be valid.<br />';
  }
  if(strlen($error_message) > 0) {
    died($error_message);
  }
    $email_message = "Meet Now details below.\n\n";
     
    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }
     
    $email_message .= "Name: ".clean_string($fname)."\n";
    $email_message .= "city: ".clean_string($lname)."\n";
    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Mobile: ".clean_string($telephone)."\n";
    $email_message .= "Date: ".clean_string($country)."\n";
   
        
    $email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
?>
 <!-- include your own success html here -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Welcome to Shaadiclubs.com -Wedding serv</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
background-color: white;  
  text color: #EC2B2E;
    }
li:hover {background: #E72E5B;}
  
  
  body {
      position: relative; 
  height: 100%;
  }

  #Why{padding-top:50px;height:500px;color: #fff; background-color: ;}
  #Service {padding-top:50px;height:500px;color: #fff; background-color: ;}
  #Vendor {padding-top:50px;height:900px;color: #fff; background-color: ;}
  #Testimoinal {padding-top:50px;height:500px;color: #fff; background-color: ;}
    
    /* Add a gray background color and some padding to the footer */
    footer {
      background-color: #f2f2f2;
      padding:32px;
    }
    
  .carousel-inner img {
      width: 100%; /* Set width to 100% */
      margin: auto;
      min-height:200px;
  }

  /* Hide the carousel text when the screen is less than 600 pixels wide */
  @media (max-width: 600px) {
    .carousel-caption {
      display: none; 
    }
  }
  footer {
      background-color: #E72E5B;
      color: #f5f5f5;
      padding: 20px;
  }
  footer a {
      color: #f5f5f5;
  }
  footer a:hover {
      color: #777;
      text-decoration: none;
  }  
input[type=text]:focus, input[type=password]:focus {
    background-color: #161515;
    outline: none;
}
a {
    color: #EF2D30;
}
  
/* Set a style for the submit button */
.btn {
    background-color: #F1AE34;
    color: white;
    padding: 8px 10px;
    border: none;
    cursor: pointer;
    width: 25%;
    opacity: 0.9;
}
  
  </style>
</head>
<body>
<?php include('includes/header.php');?>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<b><font size="5">
Thank you for contacting us. We will be in touch with you very soon.</b></font>
<?php
}
?>


  </div>
    </div>
  </div>
</div>

    </div>
  </div>


</div>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<?php include('includes/footer.php');?>


  

  
</body>
</html>


Captions, Table Headers, and Table Data use in html

To round out your tables, you have the other basic tags to examine. You've already successfully used <CAPTION><TH>, and <TD>, but each has its own attributes and abilities that you need to know about.

<CAPTION>

The <CAPTION> tag is a container for reasons that may be obvious-it allows you to nest other HTML tags within the description. For instance:

<CAPTION><B>Table 3.1 from the book <I>Life in El Salvador</I></B></CAPTION>
Just about any sort of markup tags are possible inside the <CAPTION> tags, although some-like list tags-wouldn't make much sense.
The <CAPTION> tag has one attribute, ALIGNALIGN="TOP" and ALIGN="BOTTOM" are encouraged. By default, text is also aligned to center (horizontally). By TOP and BOTTOM, I'm referring to the entire table; the caption will default to the top of the table if not otherwise specified. To align the caption to BOTTOM, for instance, enter the following:
<CAPTION ALIGN="BOTTOM">Table of Common Foods</CAPTION>
The <CAPTION> tag is commonly the first tag just inside the <TABLE> tag (although this placement is not required). Regardless of where you place the <CAPTION> tag, however, you must use ALIGN to force it to the bottom of the table. Otherwise, it will appear at the top, according to its default.
Let's create an entire table and use the ALIGN attribute to the <CAPTION> tag to force the caption to the bottom, like this:

<BODY><H3>Favorite Ice Cream Flavors</H2><TABLE BORDER><CAPTION ALIGN="BOTTOM">Data from the <I>New Jersey Times</I></CAPTION><TR><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</TH> <TR><TH>1970</TH><TD>50%</TD><TD>50%</TD> <TR><TH>1980</TH><TD>76%</TD><TD>24%</TD> <TR><TH>1990</TH><TD>40%</TD><TD>60%</TD> </TABLE></BODY>

When the browser interprets this table, it should place the caption at the bottom of the table, centered horizontally



Table Rows




Table rows (<TR>) can accept one attribute you should concern yourself with-ALIGN. The ALIGN attribute is used to determine how text will appear (horizontally) in each of the rows data cells. For example:

<TR ALIGN="CENTER"><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</TH> <TR ALIGN="CENTER"><TH>1970</TH><TD>50%</TD><TD>50%</TD> <TR ALIGN="CENTER"><TH>1980</TH><TD>76%</TD><TD>24%</TD> <TR ALIGN="CENTER"><TH>1990</TH><TD>40%</TD><TD>60%</TD>



Table Data and Rows



Aside from accepting nearly any type of HTML markup tags within them, both tags can accept four attributes (in most HTML versions). These are ALIGNVALIGNCOLSPAN, and ROWSPAN. If you were to add all of these attributes, a typical <TH> (or <TD>) tag would be formatted like the following:
<TH ALIGN="direction" VALIGN="direction" COLSPAN="number" ROWSPAN="italics">
ALIGN is used to align the data within the cell horizontally, accepting values of LEFTRIGHT, and CENTER. Note that ALIGN is redundant when used with the ALIGN attribute of <TR>, unless it is used to override the <TR ALIGN=> setting.
VALIGN is used to align the data vertically within cells. Possible values are TOPBOTTOM, and CENTERCOLSPAN and ROWSPAN are used to force a cell to span more than one column or row, respectively. An example of this might be:

<TABLE BORDER><TR><TH>Student</TH><TH>Test 1</TH><TH>Test 2</TH><TH>Average</TH><TR><TH>Mike M.</TH><TD>100</TD><TD>75</TD><TD ROWSPAN="3">N/A</TD><TR><TH>Susan T.</TH><TD>80</TD><TD>95</TD> <TR><TH>Bill Y.</TH><TD COLSPAN="2">Dropped Course</TD></TABLE>

current time display by java script code

current time display by java script code



<html>

<head>
<title>JS 2</title>
<script language="javascript">
function starttime()
{
var total=new Date();
var h=total.getHours();
var m=total.getMinutes();
var s=total.getSeconds();
m=checktime(m);
s=checktime(s);
document.getElementById("txt1").value=h+":"+m+":"+s;
var t1=setTimeout('starttime()',50);
}
function checktime(i)
{
if(i<10)
{
i="0"+i;
}
return i;
}

</script>
</head>
<body onload="starttime()">
Current System Time : <input type=text id=txt1>
</body>
</html>

Saturday, 2 November 2019

simple pagination coding in php with mysql


container.php


</head>
<body class="">
<div role="navigation" class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="http://www.phpzag.com" class="navbar-brand">PHPZAG.COM</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="http://www.phpzag.com">Home</a></li>
          
          </ul>
        
        </div><!--/.nav-collapse -->
      </div>
    </div>
   
    <div class="container" style="min-height:500px;">
    <div class=''>
    </div>


db_connect.php


<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "phpzag_demos";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>





footer.php

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



header.php

 





<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- jQuery -->


index.php

<?php
include('header.php');
?>
<title>phpzag.com : Demo Create Simple Pagination with PHP and MySQL</title>
<?php include('container.php');?>
<div class="container">
    <h2>Simple Pagination with PHP and MySQL</h2>       
    <?php
    include_once("db_connect.php");
    $showRecordPerPage = 5;
    if(isset($_GET['page']) && !empty($_GET['page'])){
        $currentPage = $_GET['page'];
    }else{
        $currentPage = 1;
    }
    $startFrom = ($currentPage * $showRecordPerPage) - $showRecordPerPage;
    $totalEmpSQL = "SELECT * FROM employee";
    $allEmpResult = mysqli_query($conn, $totalEmpSQL);
    $totalEmployee = mysqli_num_rows($allEmpResult);
    $lastPage = ceil($totalEmployee/$showRecordPerPage);
    $firstPage = 1;
    $nextPage = $currentPage + 1;
    $previousPage = $currentPage - 1;
    $empSQL = "SELECT id,employee_name, employee_salary
    FROM `employee` LIMIT $startFrom, $showRecordPerPage";
    $empResult = mysqli_query($conn, $empSQL);       
    ?>   
    <table class="table ">
    <thead>
        <tr>
            <th>EmpID</th>
            <th>Name</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <?php
        while($emp = mysqli_fetch_assoc($empResult)){
        ?>
            <tr>
                <th scope="row"><?php echo $emp['id']; ?></th>
                <td><?php echo $emp['employee_name']; ?></td>
                <td><?php echo $emp['employee_salary']; ?></td>
            </tr>
        <?php } ?>
    </tbody>
    </table>
    <nav aria-label="Page navigation">
      <ul class="pagination">
      <?php if($currentPage != $firstPage) { ?>
        <li class="page-item">
          <a class="page-link" href="?page=<?php echo $firstPage ?>" tabindex="-1" aria-label="Previous">
            <span aria-hidden="true">First</span>           
          </a>
        </li>
        <?php } ?>
        <?php if($currentPage >= 2) { ?>
            <li class="page-item"><a class="page-link" href="?page=<?php echo $previousPage ?>"><?php echo $previousPage ?></a></li>
        <?php } ?>
        <li class="page-item active"><a class="page-link" href="?page=<?php echo $currentPage ?>"><?php echo $currentPage ?></a></li>
        <?php if($currentPage != $lastPage) { ?>
            <li class="page-item"><a class="page-link" href="?page=<?php echo $nextPage ?>"><?php echo $nextPage ?></a></li>
            <li class="page-item">
              <a class="page-link" href="?page=<?php echo $lastPage ?>" aria-label="Next">
                <span aria-hidden="true">Last</span>
              </a>
            </li>
        <?php } ?>
      </ul>
    </nav>
   
    <div style="margin:50px 0px 0px 0px;">
        <a class="btn btn-default read-more" style="background:#3399ff;color:white" href="http://www.phpzag.com/simple-code-for-pagination-in-php/">Back to Tutorial</a>       
    </div>
</div>
<?php include('footer.php');?>

simple contact form coding in php

 simple contact form coding in php
 contact-view.php



<html>
<head>
<title>Contact Us Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="form-container">
        <form name="frmContact" id="" frmContact"" method="post"
            action="" enctype="multipart/form-data"
            onsubmit="return validateContactForm()">

            <div class="input-row">
                <label style="padding-top: 20px;">Name</label> <span
                    id="userName-info" class="info"></span><br /> <input
                    type="text" class="input-field" name="userName"
                    id="userName" />
            </div>
            <div class="input-row">
                <label>Email</label> <span id="userEmail-info"
                    class="info"></span><br /> <input type="text"
                    class="input-field" name="userEmail" id="userEmail" />
            </div>
            <div class="input-row">
                <label>Subject</label> <span id="subject-info"
                    class="info"></span><br /> <input type="text"
                    class="input-field" name="subject" id="subject" />
            </div>
            <div class="input-row">
                <label>Message</label> <span id="userMessage-info"
                    class="info"></span><br />
                <textarea name="content" id="content"
                    class="input-field" cols="60" rows="6"></textarea>
            </div>
            <div>
                <input type="submit" name="send" class="btn-submit"
                    value="Send" />

                <div id="statusMessage">
                        <?php
                        if (! empty($message)) {
                            ?>
                            <p class='<?php echo $type; ?>Message'><?php echo $message; ?></p>
                        <?php
                        }
                        ?>
                    </div>
            </div>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        function validateContactForm() {
            var valid = true;

            $(".info").html("");
            $(".input-field").css('border', '#e0dfdf 1px solid');
            var userName = $("#userName").val();
            var userEmail = $("#userEmail").val();
            var subject = $("#subject").val();
            var content = $("#content").val();
           
            if (userName == "") {
                $("#userName-info").html("Required.");
                $("#userName").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (userEmail == "") {
                $("#userEmail-info").html("Required.");
                $("#userEmail").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
            {
                $("#userEmail-info").html("Invalid Email Address.");
                $("#userEmail").css('border', '#e66262 1px solid');
                valid = false;
            }

            if (subject == "") {
                $("#subject-info").html("Required.");
                $("#subject").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (content == "") {
                $("#userMessage-info").html("Required.");
                $("#content").css('border', '#e66262 1px solid');
                valid = false;
            }
            return valid;
        }
</script>
</body>
</html>


index.php


<?php
if(!empty($_POST["send"])) {
    $name = $_POST["userName"];
    $email = $_POST["userEmail"];
    $subject = $_POST["subject"];
    $content = $_POST["content"];

    $conn = mysqli_connect("localhost", "root", "test", "blog") or die("Connection Error: " . mysqli_error($conn));
    mysqli_query($conn, "INSERT INTO tblcontact (user_name, user_email,subject,content) VALUES ('" . $name. "', '" . $email. "','" . $subject. "','" . $content. "')");
    $insert_id = mysqli_insert_id($conn);
    //if(!empty($insert_id)) {
       $message = "Your contact information is saved successfully.";
       $type = "success";
    //}
}
require_once "contact-view.php";
?>



STYLE.CSS




body {
    font-family: Arial;
    width: 600px;
}

.form-container {
    background: #f1ecdf;
    border: #e2ddd2 1px solid;
    padding: 20px;
    border-radius: 2px;
}

.input-row {
    margin-bottom: 20px;
}

.input-row label {
    color: #75726c;
}

.input-field {
    width: 100%;
    border-radius: 2px;
    padding: 10px;
    border: #e0dfdf 1px solid;
    box-sizing: border-box;
    margin-top: 2px;
}

.span-field {
    font: Arial;
    font-size: small;
    text-decoration: none;
}

.btn-submit {
    padding: 10px 60px;
    background: #9e9a91;
    border: #8c8880 1px solid;
    color: #ffffff;
    font-size: 0.9em;
    border-radius: 2px;
    cursor: pointer;
}

.errorMessage {
    background-color: #e66262;
    border: #AA4502 1px solid;
    padding: 5px 10px;
    color: #FFFFFF;
    border-radius: 3px;
}

.successMessage {
    background-color: #9fd2a1;
    border: #91bf93 1px solid;
    padding: 5px 10px;
    color: #3d503d;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.info {
    font-size: .8em;
    color: #e66262;
    letter-spacing: 2px;
    padding-left: 5px;
}


send_contact_mail.php


<?php
if(!empty($_POST["send"])) {
    $name = $_POST["userName"];
    $email = $_POST["userEmail"];
    $subject = $_POST["subject"];
    $content = $_POST["content"];

    $toEmail = "admin@phppot_samples.com";
    $mailHeaders = "From: " . $name . "<". $email .">\r\n";
    if(mail($toEmail, $subject, $content, $mailHeaders)) {
        $message = "Your contact information is received successfully.";
        $type = "success";
    }
}
require_once "contact-view.php";
?>

Php codeing for category and sub-category additing

 Php codeing for category_sub-category


<?php
include('include/connect.php');


/*Adding Category Program*/
if(isset($_POST['addcat']))
    {
    $category=$_POST['catname'];
  
    if(empty($category))
        {
        echo "<script>window.alert('Field is empty');</script>";
        }
    else
    {
    $sql="select max(id) from maincategory";
    $result=mysql_query($sql);
    $max=mysql_result($result,0,0);
    $max=$max+1;
  
  
$sql="INSERT INTO maincategory values('$max','$category')";
$result=mysql_query($sql);
    echo "<script>window.alert('$category added successfully'); window.location='addproduct.php';</script>";
    }
  

    }/*ADDING CATEGORY PROGRAM ENDS HERE*/
  
/*ADDING SUB-CATEGORY PROGRAM STARTS HERE*/
if(isset($_POST['subcategory']))
{
    $cat=$_POST['category'];
    $subcat=$_POST['subcatname'];
  
    if(empty($subcat))
        {
        echo "<script>window.alert('Field is empty')</script>";
        }
    else
        {
        $sql="select max(id) from subcategory";
        $result=mysql_query($sql);
        $max=mysql_result($result,0,0);
        $max=$max+1;
  
    $sql="insert into subcategory values('$max','$subcat','$cat')";
    $result=mysql_query($sql);
    echo "<script>window.alert('$subcat added successfully');window.location='addproduct.php';</script>";
        }
}


/*ADDING SUB-CATEGORY PROGRAM ENDS HERE*/


/*ADDING PRODUCT PROGRAM STARTS HERE*/
if(isset($_POST['submit']))
    {
    $pname=$_POST['pname'];
    $cat=$_POST['pcategory'];
    $subcat=$_POST['subcat'];
    $desc=$_POST['description'];
            if(empty($pname))
                {
                echo "<script>window.alert('Product Name is empty');</script>";
                }
            if($cat=="select_category")
                {
                echo "<script>window.alert('Category is not selected');</script>";
                }
            if($sub="select_subcategory")
                {
                echo "<script>window.alert('Sub-Category is not selected');</script>";
                }
          
            else
            {
      

$sql="select max(id) from product";
$result=mysql_query($sql);
$max=mysql_result($result,0,0);
$max=$max+1;

$sql="insert into product values('$max','$pname','$subcat','$desc')";
mysql_query($sql);
            }
  
    }
/*ADDING PRODUCT PROGRAM ENDS HERE*/
?>
<style>
label
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
span
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:maroon;
font-size:10px;
cursor:pointer;
}
span a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#CCCCCC;
font-size:9px;
text-decoration:none;
}
span a:hover
{
color:#666666;
}
#frame
{
height:100%;
width:100%;
background-color:#000000;
position:absolute;
top:0px;
left:0px;
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
z-index:1001;

}
#addcat
{
background-color:white;
position:absolute;
top:70px;
left:70px;
display:none;
z-index:1002;
}
#addsubcat
{
top:70px;
left:70px;
background-color:white;
position:absolute;
display:none;
z-index:1003;
}
</style>
<div id="frame" style="display:none;">
</div>
<form name="addproducnt" method="post" enctype="multipart/form-data">
<table border="1" cellspacing="0">
<tr>
    <td><label for="name">Name:</label></td>
    <td><input type="text" name="pname" id="name"/></td>
</tr>

<tr>
    <td><label for="description">Description</label></td>
    <td><input type="text" name="description" id="description"/></td>
</tr>

<tr>
    <td><label for="category">Select Category</label>  </td>
    <td>
    <select name="pcategory">
     
        <?php

        $sql="select * from maincategory";
        $result=mysql_query($sql);
        while($rec=mysql_fetch_array($result))
            {
          
            $catid=$rec['id'];
            $cat=$rec['name'];
          
              
            echo "<option value='$catid' onChange='subcat()'>$cat</option>";

            }
        ?>
      
    </select>
    <span><a href="#" onClick="javascript:document.getElementById('addcat').style.display='block'; document.getElementById('frame').style.display='block';">add category</a></span>
    </td>
</tr>

<tr>
    <td><label for="subcat">Select Sub Category</label></td>
    <td>
    <select name="subcat">
  
        <?php
      
      
        $sql="select * from subcategory where cat_id='$catid'";
        $result=mysql_query($sql);
            while($rec=mysql_fetch_array($result))
                {
              
                $id=$rec['id'];
                $name=$rec['name'];
                $cat_id=$rec['cat_id'];
              
                if($id==$catid)
                    {
                    $sel="selected";
                    }
                else
                    {
                    $sel="";
                    }
                echo "<option value=$id>$name</option>";
                  

                }
        ?>
    </select>
    <span><a href="#" onClick="javascript:document.getElementById('addsubcat').style.display='block';document.getElementById('frame').style.display='block';">add sub-category</a></span>
  
    </td>
</tr>

<tr>
  
</tr>

<tr>
    <td colspan="2" align="center"><input type="submit" name="submit" value="Add Product"/></td>
</tr>
</table>
<br><br>
<!--ADDING SUB-CATEGORY END-->
<div id="addcat">

<table border="1" cellspacing="0">
<tr>
    <th colspan="2" align="center">Add Category</th></tr>
    <td><label for="catname">Category Name:</label></td>
    <td><input type="text" name="catname" id="catname"/></td>
</tr>

<tr>
    <td colspan="2" align="center">
    <input type="submit" name="addcat" value="Add Category"/>
            <span onClick="javascript:document.getElementById('addcat').style.display='none';document.getElementById('frame').style.display='none';">Cancel</span>

    </td>
</tr>
</table>


</div>
<!--ADDING SUB-CATEGORY END-->


<!--ADDING SUB-CATEGORY START-->
<div id="addsubcat">
        <table border="1" cellspacing="0">
            <tr><th colspan="2">Sub Category</th></tr>
            <tr>
                <td>
                <label for="cat">Salect Category</label>
                </td>
                <td>
                <select name="category">
                    <?php
                    $sql="select * from maincategory";
                    $result=mysql_query($sql);
                        while($rec=mysql_fetch_array($result))
                            {
                            $id=$rec['id'];
                            $cat=$rec['name'];
                          
                            echo "<option value='$id'>$cat</option>";
                            }
                    ?>
                </select>
                </td>
            </tr>
          
          
            <tr>
                <td><label for="subcat">Add Sub Category</label></td>
                <td><input type="text" name="subcatname" id="subcat"></td>
            </tr>
          
            <tr>
            <td colspan="2" align="center"> <input type="submit" name="subcategory" value="Add Sub Category" /><span onClick="javascript:document.getElementById('frame').style.display='none';document.getElementById('addsubcat').style.display='none';">Cancel</span></td>
            </tr>
        </table>
    </div>
<!--ADDING SUB-CATEGORY END-->
</form>






 database  script




-- phpMyAdmin SQL Dump

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `project`
--

-- --------------------------------------------------------

--
-- Table structure for table `maincategory`
--

CREATE TABLE IF NOT EXISTS `maincategory` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `maincategory`
--

INSERT INTO `maincategory` (`id`, `name`) VALUES
(1, 'category_1'),
(2, 'category_2'),
(3, 'category_3'),
(4, 'category_4');

-- --------------------------------------------------------

--
-- Table structure for table `product`
--

CREATE TABLE IF NOT EXISTS `product` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `sub_cat` int(11) NOT NULL,
  `description` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `product`
--


-- --------------------------------------------------------

--
-- Table structure for table `subcategory`
--

CREATE TABLE IF NOT EXISTS `subcategory` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `cat_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `subcategory`
--

INSERT INTO `subcategory` (`id`, `name`, `cat_id`) VALUES
(1, 's_cat_1', 1),
(2, 's_cat_1-cat_2', 2),
(3, 'subCat', 4),
(4, '4thSubCat', 4);