在線 PHP運行工具允睹、數(shù)據(jù)庫可控

摘要

不知道大家有沒有看到過這樣的一個網(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訪問結(jié)果

工具原理

既然上面的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ī)代碼

運行常規(guī)代碼

操作數(shù)據(jù)庫

操作數(shù)據(jù)庫

總結(jié)

最后來回顧一下溉奕,本文主要是介紹了如何實現(xiàn)一個在線PHP編輯工具褂傀。滿足了自己對于操作數(shù)據(jù)庫的需求。

另外比較重要的一點就是加勤,之所以沒有使用表單的凡是提交/上傳 源代碼仙辟。就是因為使用表單的話,一旦提交的話鳄梅,原來的表單內(nèi)字段上的信息就全部消失了叠国,這不利于后續(xù)的代碼調(diào)試和修改。而采用ajax方式提交的話就沒有這么多的限制了戴尸,反而能夠更加自由的進行設(shè)計粟焊。

大致就是這么多了。PHP在線編輯工具還是比較容易實現(xiàn)的(相較于其他編程語言而言)。

或許我會著手實現(xiàn)一個Python的在線工具项棠,誰知道呢悲雳。╭(╯^╰)╮

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市香追,隨后出現(xiàn)的幾起案子合瓢,更是在濱河造成了極大的恐慌,老刑警劉巖透典,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件晴楔,死亡現(xiàn)場離奇詭異,居然都是意外死亡峭咒,警方通過查閱死者的電腦和手機税弃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凑队,“玉大人钙皮,你說我怎么就攤上這事⊥缇觯” “怎么了短条?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長才菠。 經(jīng)常有香客問我茸时,道長,這世上最難降的妖魔是什么赋访? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任可都,我火速辦了婚禮,結(jié)果婚禮上蚓耽,老公的妹妹穿的比我還像新娘渠牲。我一直安慰自己,他們只是感情好步悠,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布签杈。 她就那樣靜靜地躺著,像睡著了一般鼎兽。 火紅的嫁衣襯著肌膚如雪答姥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天谚咬,我揣著相機與錄音鹦付,去河邊找鬼。 笑死择卦,一個胖子當(dāng)著我的面吹牛敲长,可吹牛的內(nèi)容都是我干的郎嫁。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼祈噪,長吁一口氣:“原來是場噩夢啊……” “哼行剂!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起钳降,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎腌巾,沒想到半個月后遂填,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡澈蝙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年吓坚,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灯荧。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡礁击,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出逗载,到底是詐尸還是另有隱情哆窿,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布厉斟,位于F島的核電站挚躯,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏擦秽。R本人自食惡果不足惜码荔,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望感挥。 院中可真熱鬧缩搅,春花似錦、人聲如沸触幼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽置谦。三九已至巨双,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間霉祸,已是汗流浹背筑累。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留丝蹭,地道東北人慢宗。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親镜沽。 傳聞我的和親對象是個殘疾皇子敏晤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容