在线 PHP运行工具、数据库可控
这篇文章介绍了如何创建一个PHP在线编辑工具“菜鸟工具”，该工具能够提供基本的语法测试功能但不支持复杂的高级功能如数据库操作。为了满足对数据库操作的描述了实现过程中的技术细节，并展示了成功发布的网页界面及使用示例图片。最终完成了这个在线PHP环境，并考虑未来扩展到Python的可能性。（完）
-
-
摘要
-
实现思路
- 简要解释
- 工具原理
-
制作
- mainphp
- 上传源码
- ajax
-
上传源码
-
获取运行结果
-
触发时机
-
演示
- 首页
- 点击PHP代码给出提示
- 常规代码
- 操作数据库
-
总结
-
摘要
不知道大家是否曾了解过这样一个网站呢？其名称为"菜鸟工具"，它提供了一系列在线编辑器和运行的小工具组合包。这些小功能不仅丰富而且操作简便——使用起来也非常方便，并且这些小工具非常实用。
作为一个PHP初学者来说，在线学习资源对于掌握语法非常关键。如果能有一个功能强大的在线工具来随时练习掌握语法该多好啊！实际上，在线学习平台已经完全足够使用了。
缺点在于...在线工具目前无法兼容主流数据库及其它高级功能...这让使用体验大打折扣。难以直接操作数据库语句...在线工具有现成的功能满足需求的话...不如尝试开发一个支持主流数据库功能的在线工具实际应用中使用会更加便捷
实现思路
当访问一个包含PHP文件的网页时，在服务器端会解析这些文件，并将其转换为网页客户端能够正确显示的内容。因此，在浏览器中访问URL的过程中实际上获取的是经过解析后的数据。
简要解释
下面简要的做个解释。比方说咱们有这样的一个temp.php文件， 内容如下：
<?php
echo "Hello PHP";浏览器访问的时候，得到的数据如下：
工具原理
鉴于此temp.php文件具有这样的功能如果我们预先将需要运行的程序代码包含于该脚本之中并将其直接输出到终端则可以直接获得所需的结果
而事实上，我就是这么干的，结果也证明，顺序得当的话，还是挺不错的。
我的想法就是：
创建一个按钮控件，在用户点击该按钮时会执行以下步骤：首先将源代码提交至服务器进行处理，并随后将发起一个AJAX请求数以获取运行后的源代码结果。最终的结果将会显示在控制台中。
制作
下面将介绍具体的实现流程。
main.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我自己的PHP工具</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-ico" />
<style>
.container {
width: 1356px;
height: 640px;
position: absolute;
background: #CCC;
}
.left {
width: 50%;
height: 100%;
background: lightgray;
position: relative;
float: left;
}
.header {
width: auto;
height: 61px;
}
input {
width: 180px;
height: 60px;
position: relative;
background: lightgreen;
float: right;
margin-right: 12px;
margin-top: 6px;
border-radius: 25px;
box-shadow: 1px 1px 1px #6e6e6e;
}
.panel {
width: 90%;
height: 540px;
align: center;
}
textarea {
font-size: 28px;
}
.right {
width: 50%;
height: 100%;
background: deepskyblue;
position: relative;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="header">
<label><font size="5">在下面写上您的PHP代码.</font>如： echo "Hello 郭璞";</label>
<input id="btn_run" type="submit" value="点击运行"></input>
</div>
<hr>
<div class="panel">
<textarea id="source" style="width: 645px; height: 540px;"
name="source" placeholder="echo 'Hello World!';">
</textarea>
<!-- <textarea type="hidden" id="hidden" hidden></textarea> -->
</div>
</div>
<div class="right">
<h2>下面将显示出您的代码的执行结果</h2>
<hr>
<div class="panel">
<textarea id="result" style="width: 645px; height: 540px;">
</textarea>
</div>
</div>
</div>
<!-- 编写提交脚本，并获取返回结果 -->
<script src="./js/jquery-2.2.4.min.js"></script>
<script>
// 请求运行结果
function getResult() {
$.ajax({
type : "GET",
url : "./temp.php",
success : function(data) {
document.getElementById("result").value = data;
},
error : function(err) {
document.getElementById("result").value = err;
}
});
}
// 将源代码上传到服务器上
function uploadSource() {
var source = document.getElementById("source").value;
$.ajax({
type: "POST",
url: "./main.php",
data: {
"source": source
},
success: function(){
console.log("代码上传成功！");
},
error: function(err){
console.log("代码上传失败！");
alert(err);
}
});
}
// 使用ajax来 获取执行的结果
$(document).ready(function() {
document.getElementById("result").value = "正在获取运行结果··· ···";
$("#btn_run").click(function(){
// 先上传代码
uploadSource();
// 请求代码运行后的结果
getResult();
});
});
</script>
<!-- 编写php脚本，获取提交信息 -->
<?php
$source = $_POST ['source'];
$source = "<?php " . $source;
file_put_contents ( "./temp.php", $source );
?>
</body>
</html>上传源码
<!-- 编写php脚本，获取提交信息 -->
<?php
$source = $_POST ['source'];
$source = "<?php " . $source;
file_put_contents ( "./temp.php", $source );
?>运行这段代码后可以直接将编辑好的源码上传至服务器指定的temp.php文件中，并使整个流程随之完成。
ajax
这里ajax起到了两方面的作用：
- 一个是上传源代码
- 一个是获取代码运行结果
上传源码
// 将源代码上传到服务器上
function uploadSource() {
var source = document.getElementById("source").value;
$.ajax({
type: "POST",
url: "./main.php",
data: {
"source": source
},
success: function(){
console.log("代码上传成功！");
},
error: function(err){
console.log("代码上传失败！");
alert(err);
}
});
}获取运行结果
// 请求运行结果
function getResult() {
$.ajax({
type : "GET",
url : "./temp.php",
success : function(data) {
document.getElementById("result").value = data;
},
error : function(err) {
document.getElementById("result").value = err;
}
});
}触发时机
根据需求设定，在用户点击运行按钮时才会触发上传和下载流程。因此只需在按钮上绑定一个点击事件就可完成操作。
$(document).ready(function() {
document.getElementById("result").value = "正在获取运行结果··· ···";
$("#btn_run").click(function(){
// 先上传代码
uploadSource();
// 请求代码运行后的结果
getResult();
});
});演示
配置了一台阿里云服务器后, 将其放置上去。这样也算作随时可用的一个在线PHP环境。
首页
点击“PHP代码”，给出提示
常规代码
操作数据库
总结
最后进行了总结回顾。本文主要讲述了如何实现一个在线PHP编辑工具，并满足了自己对于操作数据库的需求。
另一个需要注意的关键点是：我们选择不直接在表单中上传源代码的原因在于，在这种情况下会丢失原有的字段数据。具体来说，在这种情况下当通过表单提交时原有字段的数据会被清除。这对后续的调试与修改带来了不便。相比之下，在采用Ajax方式进行数据提交时则避免了许多这些问题，并且使得系统设计更加灵活。
基本上就是这个样子的。相比而言，PHP在线编辑工具还是比较容易实现的。
或许我会着手实现一个Python的在线工具，谁知道呢。╭(╯^╰)╮