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.
nice ,its also working for php
ReplyDeleteim confusd....need help
ReplyDeletewhy are you confused. Need help on what?
Deleteneed help m8..in oda words...its 3 files.....a html file, nd 2 php files right?....bt giv me da names that i shud save da files as
ReplyDeleteThe file that is used to store your code and is displayed in the iframe is named try_it.php it is created when you click the submit button. The entire code package is included in a single file so you can name that file anything you want.
DeleteI don't know how many file in your Try editor? And what's name of them?
Deletenot working for php
ReplyDeleteExcellent Script. But may I suggest following 3 suggestions.
ReplyDelete1> When you execute php for first time, it give file not found error in output window.
2> when any code is written in " " or ' ', it convert it into \" " and \' ', and that word or ID is ignored and it not giving desired output.
3> After clicking on "Click to Execute" button on top, it is compressing whole code into single statement in one line, whole formatting is change.
If you could resolve then I will be greatly thankful.
Samir (India)