Many tutorials sites now a days provide try it yourself editors for there users.
This very useful feature for trying out the examples provided for users to tryout the examples online.
It provides a good learning experince for your users. Creating try it yourself editor is very simple task.
I have created a simple try it yourself editor using PHP.
1. For creating the Try it yourself editor, create a simple page with textarea,input(text), iframe and submit button,form.
We need to textarea for users can write their code. iframe is needed to show the output to the users.
<html>
<head>
<script type="text/javascript">
function data_submit()
{
document.form1.txt_data.value= document.form1.txt_html.value;
}
</script>
<title>Try It yourself Online Editor</title>
</head>
<body>
<form name="form1" id="form1" method="post" action="" >
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr >
<td>
<input type="submit" name="bt_submit" value="Click to Execute " align="top" onClick="data_submit();"/>
</td>
<td align="center">Output</td>
</tr>
<tr>
<td width="50%" >
<input type="text" name="txt_data" value="" style="visibility:hidden;" />
<textarea rows="35" width="90px" height="550px" cols="77" name="txt_html">
</textarea>
</td>
<td width="50%" style="border-width:10px;border-style:none;">
<iframe height="550px" width="100%" src="try_it.php" name="iframe_a"></iframe>
</td>
</table>
</form>
</body>
</html>
Now code written by the user need to be displayed in the iframe so we need to store the code in a file.
Write PHP code to create a file. following is the code create a file.
if(isset($_POST['bt_submit']))
{
$file = "try_it.php";
$fp = fopen($file, 'w');
//Following code will store the content in textarea in a variable which will create a file.
$content = $_POST['txt_data'];
fwrite($fp, $content);
fclose($fp);
}
?>
Following php code is written to display a default output and changed output after submit button is clicked by the user.
<?php
if(isset($_POST['bt_submit']))
{
echo trim($content);
}
else
{
echo "<html>\n";
echo "<body>\n";
echo "<h1>Hello World!!!</h1>\n";
echo "</body>\n";
echo "</html>\n";
} ?>
Following is the entire code package :
<?php
if(isset($_POST['bt_submit']))
{
$file = "try_it.php";
$fp = fopen($file, 'w');
$content = $_POST['txt_data'];
fwrite($fp, $content);
fclose($fp);
}
?>
<html>
<head>
<script type="text/javascript">
function data_submit()
{
document.form1.txt_data.value = document.form1.txt_html.value;
}
</script>
<title>Try It yourself Online Editor</title>
</head>
<body>
<form name="form1" id="form1" method="post" action="" >
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr >
<td> <input type="submit" name="bt_submit" value="Click to Execute " align="top" onClick="data_submit();"/></td>
<td align="center">Output</td>
</tr>
<tr>
<td width="50%" >
<input type="text" name="txt_data" value="" style="visibility:hidden;" />
<textarea rows="35" width="90px" height="550px" cols="77" name="txt_html"><?php
if(isset($_POST['bt_submit']))
{
echo trim($content);
}
else
{
echo "<html>\n";
echo "<body>\n";
echo "<h1>Hello World!!!</h1>\n";
echo "</body>\n";
echo "</html>\n";
} ?>
</textarea>
</td>
<td width="50%" style="border-width:10px;border-style:none;">
<iframe height="550px" width="100%" src="try_it.php" name="iframe_a"></iframe>
</td>
</table>
</form>
</body>
</html>
Note : Above code is tested on IE,Firfox and Chrome. This try it yourself editor is only for html, css and javascript.
