Try it Editor is amazing way for learning the codes like HTML, CSS, PHP and all. Major websites like W3School have their own Try it Editor where users learn the codes in a practical way. If you have a website where you explain basic coding and all you need to make a Try it Editor for your website where your users can learn the codes. Let’s see how to make you own Try it Editor.
Demo: Try it Editor – GetHow
For this tutorial you need to create two separate files in a single folder one is index.php file and another is result.php file and keep those all files in a single folder. Simultaneously paste the following given codes in their own files and save it.
The two files you have to create is index.php and result.php within a single place or folder, so that they can interlink with each other just like a dynamic form.
Paste following code in index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Try it Editor - GetHow</title>
<style type="text/css">
table { margin: 0 auto; }
textarea, iframe { width: 500px; height: 500px; }
.link { font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 12px; color: #008000; }
.h1 { color: #008000; }
</style>
</head>
<body>
<center><h1>TRY IT EDITOR - GETHOW</h1></center><center>
<form id="tryitform" name="tryitform" action="result.php" target="view" method="post">
<table border="1">
<tr>
<td> <input type="submit" value="Submit" /> </td>
<td> <strong> Preview</strong> </td>
</tr>
<tr>
<td>
<textarea id="code" name="code">
Start Editing on Try it Editor...
</textarea>
</td>
<td>
<iframe width="100%" height="400px" frameborder="0" src="result.php" name="view" id="view"> </iframe>
</td>
</tr>
</table>
</form>
<tr><td>
<center><br />
<span class="link">All Rights Reserved - Tryit Editor from <a href="https://www.gethow.org" target="_blank" title="GetHow" rel="dofollow" style="text-decoration: none; color: #008000;">www.GetHow.org</a></span></center></td></tr>
</center></body>
</html>
Save the file.
Paste following code in result.php
<?php $myCode = @$_REQUEST["code"]; print $myCode ; ?>
Save the file.
Now you are ready to test just navigate your folder location in browser or if you made this all under a domain then use that domain to use the Try it Editor. If you navigate this Try it Editor through domain then it will take some time to get live.
By this way you can create your own Try it Editor page.
Leave a Reply