摘要
不知道大家有沒有看到過這樣的一個網(wǎng)站运准。名字是“菜鳥工具”幌氮，里面有很多的在線編輯，在線運行的小工具胁澳，實用也很方便该互。（嘻嘻，不是打廣告哈听哭，不過確實很實用）慢洋。
作為一個PHP菜鳥，如果能有一個好用的陆盘，隨時隨地練習(xí)語法的工具該有多好啊普筹。很明顯，上面的那個PHP在線工具隘马，基本上已經(jīng)可以滿足正常的需求了太防。
但是美中不足的是，不支持?jǐn)?shù)據(jù)庫以及其他高級特性酸员。所以這就顯得很尷尬了蜒车。不能練習(xí)數(shù)據(jù)庫語句，那還學(xué)個毛啊幔嗦。所以還是自己動手吧酿愧，寫個能支持?jǐn)?shù)據(jù)庫的在線工具，自己用邀泉。
實現(xiàn)思路
對于PHP文件而言嬉挡，瀏覽器向服務(wù)器發(fā)送url請求的時候，解釋器就會自動的把文件翻譯成了瀏覽器可以解析的部分了汇恤。所以訪問url的過程就是獲取php解釋過的數(shù)據(jù)的過程庞钢。
簡要解釋
下面簡要的做個解釋。比方說咱們有這樣的一個temp.php文件因谎， 內(nèi)容如下：
<?php
echo "Hello PHP";
瀏覽器訪問的時候基括，得到的數(shù)據(jù)如下：
工具原理
既然上面的temp.php文件可以這樣工作，那么試想一下财岔，如果我們事先把想運行的文件放到temp.php文件里面风皿，然后在訪問這個temp.php文件，這樣豈不是就可以得到我們想要的結(jié)果啦匠璧。
而事實上桐款，我就是這么干的，結(jié)果也證明患朱，順序得當(dāng)?shù)脑捖沉牛€是挺不錯的炊苫。
我的想法就是：
給個按鈕裁厅，點擊按鈕的時候首先會把源代碼發(fā)送到服務(wù)器上冰沙，接下來調(diào)用一個ajax請求，把源代碼的運行結(jié)果取出來执虹，顯示到“控制臺”上拓挥。
制作
下面將介紹具體的實現(xiàn)流程。
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>下面將顯示出您的代碼的執(zhí)行結(jié)果</h2>
<hr>
<div class="panel">
<textarea id="result" style="width: 645px; height: 540px;">
</textarea>
</div>
</div>
</div>
<!-- 編寫提交腳本袋励，并獲取返回結(jié)果 -->
<script src="./js/jquery-2.2.4.min.js"></script>
<script>
// 請求運行結(jié)果
function getResult() {
$.ajax({
type : "GET",
url : "./temp.php",
success : function(data) {
document.getElementById("result").value = data;
},
error : function(err) {
document.getElementById("result").value = err;
}
});
}
// 將源代碼上傳到服務(wù)器上
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來 獲取執(zhí)行的結(jié)果
$(document).ready(function() {
document.getElementById("result").value = "正在獲取運行結(jié)果··· ···";
$("#btn_run").click(function(){
// 先上傳代碼
uploadSource();
// 請求代碼運行后的結(jié)果
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 );
?>
經(jīng)過這段代碼磺芭，就可以將編輯好的源碼上傳到服務(wù)器上指定的temp.php上了赁炎，然后準(zhǔn)備過程就結(jié)束了。
ajax
這里ajax起到了兩方面的作用：
- 一個是上傳源代碼
- 一個是獲取代碼運行結(jié)果
上傳源碼
// 將源代碼上傳到服務(wù)器上
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);
}
});
}
獲取運行結(jié)果
// 請求運行結(jié)果
function getResult() {
$.ajax({
type : "GET",
url : "./temp.php",
success : function(data) {
document.getElementById("result").value = data;
},
error : function(err) {
document.getElementById("result").value = err;
}
});
}
觸發(fā)時機
按照需求放棒，只有在點擊運行按鈕的時候姻报，才會執(zhí)行上傳，下載流程间螟。所以只需要為按鈕添加一個點擊事件就可以啦吴旋。
$(document).ready(function() {
document.getElementById("result").value = "正在獲取運行結(jié)果··· ···";
$("#btn_run").click(function(){
// 先上傳代碼
uploadSource();
// 請求代碼運行后的結(jié)果
getResult();
});
});
演示
剛好有一個阿里云服務(wù)器，那么就放上去吧寒亥。這樣也算是能夠隨時隨地?fù)碛幸粋€可以正常使用的在線PHP環(huán)境了邮府。
首頁
點擊“PHP代碼”，給出提示
常規(guī)代碼
操作數(shù)據(jù)庫
總結(jié)
最后來回顧一下溉奕，本文主要是介紹了如何實現(xiàn)一個在線PHP編輯工具褂傀。滿足了自己對于操作數(shù)據(jù)庫的需求。
另外比較重要的一點就是加勤，之所以沒有使用表單的凡是提交/上傳 源代碼仙辟。就是因為使用表單的話，一旦提交的話鳄梅，原來的表單內(nèi)字段上的信息就全部消失了叠国，這不利于后續(xù)的代碼調(diào)試和修改。而采用ajax方式提交的話就沒有這么多的限制了戴尸，反而能夠更加自由的進行設(shè)計粟焊。
大致就是這么多了。PHP在線編輯工具還是比較容易實現(xiàn)的（相較于其他編程語言而言）。
或許我會著手實現(xiàn)一個Python的在線工具项棠，誰知道呢悲雳。╭(╯^╰)╮
