PHP代码在线测试运行工具

本例包含2个文件：提供PHP代码编写的前端页面index.html、接受PHP代码解析处理运行的do.php文件。

do.php提供了2种方法来处理PHP代码，一种方法是将处理过的PHP代码通过file_put_contents函数写入到另一个php文件，我们这里命名为了code.php，然后通过header函数跳转到code.php，code.php再将执行结果反馈给index.html。

第二种方法是通过eval函数执行PHP代码，然后将执行结果反馈给index.html。

文件代码如下：

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>PHP代码在线测试运行工具</title>
	<style type="text/css">
		* {
			margin: 0; padding: 0;
		}
		body {
			background-color: #FBF1D3
		}
		.header {
			width:100%; height:60px; text-align:center; font-size:24px; font-weight: bold
		}
		.header span {
			 line-height:60px; padding: 0 50px 6px 50px; border-bottom: 1px solid #666
		}
		.top {
			width:100%; height: 40px; color: red;
		}
		.top .left {
			width: calc(50% - 15px); margin-left:10px; padding-top:10px; text-align:left; float:left
		}
		.top .left  button{
			margin-left:20px; padding: 2px 10px
		}
		.top .right {
			width: calc(50% - 5px); padding-top:10px; text-align:left; float: right
		}
		.main {
			position: absolute; 	top: 100px; right: 0; bottom:0; left:0; padding: 0 10px
		}
		.main .left {
			width: calc(50% - 5px); height: 100%; box-sizing: border-box; border:1px solid #666; background: #fff; float: left; overflow: hidden
		}
		.main .left textarea {
			width: 100%; height: 100%; border: 0px solid #333; resize: none
		}
		.main .middle {
			width: 10px; height: 100%; float: left
		}
		.main .right {
			width: calc(50% - 5px); height: 100%; box-sizing: border-box; border:1px solid #666; background: #fff; float: left
		}
	</style>
</head>
<body>
	<div class="header"><span>PHP代码在线测试运行工具</span></div>
	<div class="top">
		<div class="left">PHP代码<button onclick=btnClick(1)>运行代码（方法1）</button><button onclick=btnClick(2)>运行代码（方法2）</button></div>
		<div class="right">运行结果</div>
	</div>
	<div class="main">
		<div class="left"><textarea>$a = 0;
$b= 12;
$c = $a * 2 + $b *4;
if ($a > 0 && $b > 0) echo $c;
else echo "a和b必须大于0";</textarea></div>
		<div class="middle"></div>
		<div class="right"></div>
	</div>
	<script type="text/javascript">
		function btnClick(tp) {
			var data = "type=" + tp + "&code=" + encodeURIComponent(document.querySelector("textarea").value); //
			var xhr = null;
			if (window.XMLHttpRequest) {
				xhr = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					console.log(xhr.response)
					document.querySelector('.main .right').innerHTML = xhr.response;
				}
			}
			xhr.open("POST", "do.php", true);
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xhr.send(data);
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>PHP代码在线测试运行工具</title>

* {

margin: 0; padding: 0;

}

body {

background-color: #FBF1D3

}

.header {

width:100%; height:60px; text-align:center; font-size:24px; font-weight: bold

}

.header span {

line-height:60px; padding: 0 50px 6px 50px; border-bottom: 1px solid #666

}

.top {

width:100%; height: 40px; color: red;

}

.top .left {

width: calc(50% - 15px); margin-left:10px; padding-top:10px; text-align:left; float:left

}

.top .left button{

margin-left:20px; padding: 2px 10px

}

.top .right {

width: calc(50% - 5px); padding-top:10px; text-align:left; float: right

}

.main {

position: absolute; top: 100px; right: 0; bottom:0; left:0; padding: 0 10px

}

.main .left {

width: calc(50% - 5px); height: 100%; box-sizing: border-box; border:1px solid #666; background: #fff; float: left; overflow: hidden

}

.main .left textarea {

width: 100%; height: 100%; border: 0px solid #333; resize: none

}

.main .middle {

width: 10px; height: 100%; float: left

}

.main .right {

width: calc(50% - 5px); height: 100%; box-sizing: border-box; border:1px solid #666; background: #fff; float: left

}

</style>

</head>

<body>

<div class="header"><span>PHP代码在线测试运行工具</span></div>

<div class="left">PHP代码<button onclick=btnClick(1)>运行代码（方法1）</button><button onclick=btnClick(2)>运行代码（方法2）</button></div>

</div>

<div class="left"><textarea>$a = 0;

$b= 12;

$c = $a * 2 + $b *4;

if ($a > 0 && $b > 0) echo $c;

else echo "a和b必须大于0";</textarea></div>

</div>

function btnClick(tp) {

var data = "type=" + tp + "&code=" + encodeURIComponent(document.querySelector("textarea").value); //

var xhr = null;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else if (window.ActiveXObject) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

console.log(xhr.response)

document.querySelector('.main .right').innerHTML = xhr.response;

}

xhr.open("POST", "do.php", true);

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send(data);

}

</script>

</body>

</html>

do.php

<?php
if (isset($_POST["type"])) {
	$tp = ($_POST["type"] == 1) ? 1: 2;
} else {
	exit("type参数未设置！");
}
if(!empty($_POST["code"])) {
	$code = '<?php' . PHP_EOL . trim($_POST['code'], '<?php' . PHP_EOL);
} else {
	exit("你好像没有输入代码！");
}

if ($tp == 1) {
	file_put_contents('code.php', $code); //要有写入权限
	header('Location: code.php');
} else {
	function handle_error($error_level, $error_message, $error_file, $error_line, $error_context) {
		ob_end_clean();
		echo "[第" . $error_line . "行] " . "发生错误：" . $error_message;
		die();
	}

	function handle_exception($exception) {
		ob_end_clean();
		echo "[第" . $exception -> getLine() . "行] " . "发生错误：" . $exception -> getMessage();
		die();
	}

	function shutdown_function() {
		$error = error_get_last();
		if(!empty($error)) {
			ob_end_clean();
			echo "[第" . $error['line'] . "行] " . "发生错误：" . $error['message'];
			die();
		}
	}

	ini_set('xdebug.overload_var_dump', '1');
	error_reporting(E_ALL);
	set_error_handler('handle_error');
	set_exception_handler('handle_exception');
	register_shutdown_function('shutdown_function');

	$code = trim($code, '<?php');
	$code = trim($code, PHP_EOL);
	ob_start();
	eval($code);
	$output = ob_get_contents();
	ob_end_clean();
	echo $output;
}

<?php

if (isset($_POST["type"])) {

$tp = ($_POST["type"] == 1) ? 1: 2;

} else {

exit("type参数未设置！");

}

if(!empty($_POST["code"])) {

$code = '<?php' . PHP_EOL . trim($_POST['code'], '<?php' . PHP_EOL);

} else {

exit("你好像没有输入代码！");

}

if ($tp == 1) {

file_put_contents('code.php', $code); //要有写入权限

header('Location: code.php');

} else {

function handle_error($error_level, $error_message, $error_file, $error_line, $error_context) {

ob_end_clean();

echo "[第" . $error_line . "行] " . "发生错误：" . $error_message;

die();

}

function handle_exception($exception) {

ob_end_clean();

echo "[第" . $exception -> getLine() . "行] " . "发生错误：" . $exception -> getMessage();

die();

}

function shutdown_function() {

$error = error_get_last();

if(!empty($error)) {

ob_end_clean();

echo "[第" . $error['line'] . "行] " . "发生错误：" . $error['message'];

die();

}

ini_set('xdebug.overload_var_dump', '1');

error_reporting(E_ALL);

set_error_handler('handle_error');

set_exception_handler('handle_exception');

register_shutdown_function('shutdown_function');

$code = trim($code, '<?php');

$code = trim($code, PHP_EOL);

ob_start();

eval($code);

$output = ob_get_contents();

ob_end_clean();

echo $output;

}

PHP代码在线测试运行工具

5xue