How to create a HTML and PHP "Try it yourself" Editor

-

How to Build a “Try it Yourself” HTML & PHP Editor

Creating an interactive "Try it Yourself" editor can be a fun and educational way to let users experiment with HTML and PHP code directly in the browser. In this tutorial, we’ll build a simple web-based editor that executes user-written HTML and PHP code safely and displays the output instantly.

Prerequisites

Before we start, make sure you have the following:

  • A web server with PHP support (e.g., Apache or Nginx)

  • Basic knowledge of HTML, PHP, and JavaScript

  • A code editor to write your project files

Step 1: Set Up the Project Structure

Create a folder for your project with the following structure:

your_project/
│
├── index.php
├── execute.php
└── assets/
    ├── scripts.js
    └── styles.css

Step 2: Create the HTML Interface (index.php)

The main HTML page will contain a textarea for code input and an iframe to display results.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try it Yourself Editor</title>
    <link rel="stylesheet" href="assets/styles.css">
</head>
<body>
    <header>
        <h1>Try it Yourself Editor</h1>
    </header>

    <div class="editor-container">
        <div class="editor">
            <textarea id="code" placeholder="Write your HTML and PHP code here"></textarea>
            <button id="run-button">Run</button>
        </div>
        <iframe id="output" frameborder="0"></iframe>
    </div>

    <script src="assets/scripts.js"></script>
</body>
</html>

Step 3: Add JavaScript for Code Execution (assets/scripts.js)

This script captures the user’s code, sends it to the server, and displays the output in the iframe.

document.addEventListener('DOMContentLoaded', function () {
    const codeTextarea = document.getElementById('code');
    const runButton = document.getElementById('run-button');
    const outputFrame = document.getElementById('output');

    runButton.addEventListener('click', function () {
        const code = codeTextarea.value;
        const encodedCode = encodeURIComponent(code);

        // Send code to the server for execution
        fetch('execute.php', {
            method: 'POST',
            body: `code=${encodedCode}`,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        })
        .then(response => response.text())
        .then(result => {
            outputFrame.srcdoc = result;
        });
    });
});

Step 4: Create the PHP Execution Script (execute.php)

This PHP script receives the code from the client, executes it, and returns the output.

⚠️ Security Note: Executing arbitrary PHP code on your server is risky. This example is for learning purposes and should not be used in production without proper sandboxing.

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $code = $_POST['code'];

    // Create a temporary file to hold the code
    $tempFileName = tempnam(sys_get_temp_dir(), 'try_it_yourself_');
    file_put_contents($tempFileName, $code);

    // Execute the code using PHP and capture the output
    $output = shell_exec("php $tempFileName");

    // Clean up the temporary file
    unlink($tempFileName);

    // Return the result
    echo $output;
}
?>

Step 5: Style the Editor (assets/styles.css)

Add basic styling for a clean and user-friendly interface.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.editor-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.editor {
    width: 45%;
}

textarea {
    width: 100%;
    height: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    resize: none;
}

button {
    display: block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

iframe {
    width: 50%;
    height: 400px;
    border: 1px solid #ccc;
}

Step 6: Run Your Editor

  1. Upload your project folder to your web server.

  2. Open index.php in your browser.

  3. Start writing HTML and PHP code in the textarea, then click Run.

  4. The output will be displayed in the iframe instantly.


Comments

Post a Comment

Popular posts from this blog

5 Mini HTML Projects for Beginners

-
Image
5 Mini HTML Projects for Beginners (Build Your Skills Step-by-Step) If you have learned the basics of HTML tags, headings, images, forms, and links, then the best way to improve your skills is by building small projects . Many beginners struggle because they: ❌ only watch tutorials ❌ only copy notes ❌ never practice real HTML projects As your teacher, I will guide you through 5 Mini HTML Projects that are: ✅ Easy to build ✅ Beginner-friendly ✅ Useful for portfolio ✅ Work in any browser ✅ Help you learn by doing By the end of this article, you will be able to create: ✔ A profile card ✔ A webpage layout ✔ A registration form ✔ A product page ✔ A personal portfolio homepage Let’s start building! Why Mini HTML Projects Are Important? Learning HTML theory is good, but building projects helps you: Understand real-world usage Improve confidence Practice tags and structure Prepare for web development Create portfolio samples for jobs These projects will...
Read more

What is HTML? Complete Beginner’s Guide (with Examples)

-
Image
What is HTML? Complete Beginner’s Guide (with Examples) Are you new to web development and want to learn how websites are built? Then, understanding HTML is the first step. In this guide, we will explain HTML in simple terms, provide examples, and show you how to start creating your own web pages. Table of Contents What is HTML? Why is HTML Important? Basic Structure of an HTML Document HTML Tags and Elements Examples of HTML Code How to Create Your First Web Page Tips for Learning HTML Conclusion 1. What is HTML? HTML (HyperText Markup Language) is the standard language used to create web pages. It is not a programming language—it’s a markup language that tells web browsers how to display content. With HTML, you can: Add text, headings, and paragraphs Insert images, videos, and links Create tables, lists, and forms Build structured websites 2. Why is HTML Important? HTML is the backbone of every website. Without HTML, the internet as ...
Read more

HTML Forms — Input, Label, Button & Validation (Explained Like a Teacher With Examples)

-
Image
HTML Forms — Input, Label, Button & Validation  When you browse any website, you often fill forms — login forms, search forms, payment forms, enquiry forms, registration forms, and many more. All these are created using HTML Forms . As your teacher, I will help you understand this topic in the simplest way. By the end of this lesson, you will be able to: Create forms Use labels, inputs, and buttons Add validation Build a clean and professional form Let’s learn step-by-step. What is an HTML Form?  An HTML form is like a digital notebook page where we ask the user to write information. If we need the user’s: Name Email Age Password Message …then a form helps us collect that information. HTML form uses the <form> tag: <form action="submit.php" method="POST"> <!-- form fields --> </form> Important attributes action → Where the data will go method → How the data will be sent POST → Sa...
Read more