18 February 2022

Live HTML Compiler using PHP like W3schools tryit editor

Live Html compiler using Php similar like w3schools tryit editor, it is very simple one, we are going to run the textarea code in the iframe, that's it. so let me tell you how w3schools made it, but they are used asp.net. but here I'm going to tell you in PHP with iframe. lets see the coding.

DOWNLOAD LIVE DEMO

Visitors are need to edit their code for their need, and they want to check it lively, before they take their code, so we we have option to that, live editor and check output instantly, so here we have two files for this operation.

Index.html
Output.php

INDEX.HTML

 <div class="container" >
<div class="row">
<div class="col-md-6">
<h2> Input </h2>
<form id="htmlcomplier" name="htmlcomplier" action="output.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>
<head>
<style>
body {
    background-color: #d0e4fe;
}
h1 {
    color: orange;
    text-align: center;
}
p {
    font-family: "Times New Roman";
    font-size: 20px;
}
</style>
</head>
<body>
<h1>Demo</h1>
<p>This is a paragraph.</p>
</body>
</html>
</textarea> 
<input class="btn btn-primary pull-right"  type="submit" value="Submit" />
</div>
</form>
</div>
<div class="col-md-6">
<h2> Output </h2>
<div class="form-group">
<iframe width="100%" height="490px" frameborder="0" 
            src="output.php" name="view" id="view"></iframe>
</div>
</div>
</div>
</div>

They above code is in one side or index page content, and the action will performs in output.php page. there we have to put php code to get the code and respond in iframe. and in the iframe we are getting the src of output.php file. so when we submitted the index page content. that will go to output page, output page get the index form contents and shows the output.

OUTPUT.PHP

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

We are getting the REQUEST from the form textarea name="code" . That's all. Simple one like w3schools tryit editor. click on the above live demo to check my editor. i hope u really like this. Thank you.