Live html compiler using php and bootstrap

If you want to make the live html compiler similar to the w3schools.com try editor

What is live html compiler ?
you can see the exact output of the html code before save and run in the browser.

This is a simple technique to develop the live html code in the php.
Here we are going to use the textarea as a input of the html code and iframe as a output of the the input code.

in left textarea give the input of the html code and click the see results button then it renders the html code preview in the right iframe instantly.

index.html

 
 <title> Live html compiler using Php and bootstrap</title>  
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">  
 <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>  
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  
 <style type="text/css">  
 iframe { border: 1px silver solid; }  
 textarea { resize:none; }  
 .glyphicon{font-size: 25px;}  
 </style>  
 <div class="container" >  
 <div class="row">  
 <div class="col-md-6">  
 <h2><span class="glyphicon glyphicon-align-justify"></span> Html Code </h2>  
 <form id="htmlcomplier" name="htmlcomplier" action="result.php" target="view" method="post">  
 <div class="form-group">  
 <textarea class="form-control" required rows="24" id="code" Placeholder="Enter your code and Submit" name="code">  
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="container">  
  <div class="jumbotron">  
   <h1>Demo</h1>  
   <p>Demo tag line!</p>  
  </div>  
  <div class="row">  
   <div class="col-sm-4">  
    <h3>Column 1</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4">  
    <h3>Column 2</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4">  
    <h3>Column 3</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
  </div>  
 </div>  
 </body>  
 </html>  
 </textarea>   
 <br/>  
 <input class="btn btn-success pull-right" type="submit" value="See result" />  
 </div>  
 </form>  
 </div>  
 <div class="col-md-6">  
 <h2><span class="glyphicon glyphicon-list-alt"></span> Result </h2>  
 <div class="form-group">  
 <iframe width="100%" height="510px" frameborder="0" src="result.php" name="view" id="view"></iframe>  
 </div>  
 </div>  
 </div>  
 </div>

result.php

 
<?php  
$Getcode = @$_REQUEST["code"];  
print $Getcode ;  
?>

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

Share this