詳細介紹線上PHP運作工具、資料庫可控的實例程式碼-php教程-PHP中文網

首頁

後端開發

php教程

詳細介紹線上PHP運作工具、資料庫可控的實例程式碼

黄舟

Mar 11, 2017 am 10:07 AM

身為PHP菜鳥，如果能有個好用的，隨時隨地練習文法的工具該有多好啊。很明顯，上面的那個PHP線上工具，基本上已經可以滿足正常的需求了。

但是美中不足的是，不支援資料庫以及其他高階特性。所以這就顯得很尷尬了。不能練習資料庫語句，那還學個毛啊。所以還是自己動手吧，寫個能支援資料庫的線上工具，自己用。

實現想法

對於PHP檔案而言，瀏覽器向伺服器發送url請求的時候，解釋器就會自動的把檔案翻譯成了瀏覽器可以解析的部分了。所以訪問url的過程就是取得php解釋過的資料的過程。

簡單解釋

下面簡單的做個解釋。比方說咱們有這樣的一個temp.php文件，內容如下：

<?php
echo "Hello PHP";

瀏覽器存取的時候，得到的資料如下：
詳細介紹線上PHP運作工具、資料庫可控的實例程式碼

工具原則

既然上面的temp.php檔案可以這樣運作，那麼試想一下，如果我們事先把想運行的檔案放到temp.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>
    <p class="container">
        <p class="left">
            <p class="header">
                <label><font size="5">在下面写上您的PHP代码.</font>如： echo "Hello 郭璞";</label>
                <input id="btn_run" type="submit" value="点击运行"></input>
            </p>
            <hr>
            <p class="panel">
                <textarea id="source" style="width: 645px; height: 540px;"
                    name="source" placeholder="echo &#39;Hello World!&#39;;">
                    </textarea>
                <!-- <textarea type="hidden" id="hidden" hidden></textarea> -->
            </p>
        </p>
        <p class="right">
            <h2 id="下面将显示出您的代码的执行结果">下面将显示出您的代码的执行结果</h2>
            <hr>
            <p class="panel">
                <textarea id="result" style="width: 645px; height: 540px;">

                </textarea>
            </p>
        </p>
    </p>

    <!-- 编写提交脚本，并获取返回结果 -->
    <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 [&#39;source&#39;];    $source = "<?php  " . $source;
    file_put_contents ( "./temp.php", $source );    ?></body></html>

上傳原始碼

<!-- 编写php脚本，获取提交信息 -->
    <?php
    $source = $_POST [&#39;source&#39;];    
    $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程式碼”，給提示

詳細介紹線上PHP運作工具、資料庫可控的實例程式碼

常規程式碼

詳細介紹線上PHP運作工具、資料庫可控的實例程式碼

操作資料庫

詳細介紹線上PHP運作工具、資料庫可控的實例程式碼

總結

最後來回顧一下，本文主要介紹如何實作一個線上PHP編輯工具。滿足了自己對於操作資料庫的需求。

另外比較重要的一點就是，之所以沒有使用表單的凡是提交/上傳原始碼。就是因為使用表單的話，一旦提交的話，原來的表單內欄位上的資訊就全部消失了，這不利於後續的程式碼偵錯和修改。而採用ajax方式提交的話就沒有這麼多的限制了，反而能夠更加自由的進行設計。

以上是詳細介紹線上PHP運作工具、資料庫可控的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

PHP的當前狀態：查看網絡開發趨勢Apr 13, 2025 am 12:20 AM

PHP在現代Web開發中仍然重要，尤其在內容管理和電子商務平台。 1)PHP擁有豐富的生態系統和強大框架支持，如Laravel和Symfony。 2)性能優化可通過OPcache和Nginx實現。 3)PHP8.0引入JIT編譯器，提升性能。 4)雲原生應用通過Docker和Kubernetes部署，提高靈活性和可擴展性。

PHP與其他語言：比較Apr 13, 2025 am 12:19 AM

PHP適合web開發，特別是在快速開發和處理動態內容方面表現出色，但不擅長數據科學和企業級應用。與Python相比，PHP在web開發中更具優勢，但在數據科學領域不如Python；與Java相比，PHP在企業級應用中表現較差，但在web開發中更靈活；與JavaScript相比，PHP在後端開發中更簡潔，但在前端開發中不如JavaScript。

PHP與Python：核心功能Apr 13, 2025 am 12:16 AM

PHP和Python各有優勢，適合不同場景。 1.PHP適用於web開發，提供內置web服務器和豐富函數庫。 2.Python適合數據科學和機器學習，語法簡潔且有強大標準庫。選擇時應根據項目需求決定。

PHP：網絡開發的關鍵語言Apr 13, 2025 am 12:08 AM

PHP是一種廣泛應用於服務器端的腳本語言，特別適合web開發。 1.PHP可以嵌入HTML，處理HTTP請求和響應，支持多種數據庫。 2.PHP用於生成動態網頁內容，處理表單數據，訪問數據庫等，具有強大的社區支持和開源資源。 3.PHP是解釋型語言，執行過程包括詞法分析、語法分析、編譯和執行。 4.PHP可以與MySQL結合用於用戶註冊系統等高級應用。 5.調試PHP時，可使用error_reporting()和var_dump()等函數。 6.優化PHP代碼可通過緩存機制、優化數據庫查詢和使用內置函數。 7

PHP：許多網站的基礎Apr 13, 2025 am 12:07 AM

PHP成為許多網站首選技術棧的原因包括其易用性、強大社區支持和廣泛應用。 1)易於學習和使用，適合初學者。 2)擁有龐大的開發者社區，資源豐富。 3)廣泛應用於WordPress、Drupal等平台。 4)與Web服務器緊密集成，簡化開發部署。

超越炒作：評估當今PHP的角色Apr 12, 2025 am 12:17 AM

PHP在現代編程中仍然是一個強大且廣泛使用的工具，尤其在web開發領域。 1)PHP易用且與數據庫集成無縫，是許多開發者的首選。 2)它支持動態內容生成和麵向對象編程，適合快速創建和維護網站。 3)PHP的性能可以通過緩存和優化數據庫查詢來提升，其廣泛的社區和豐富生態系統使其在當今技術棧中仍具重要地位。