我们应该感谢相遇,无论结局是喜是悲....
在线 PHP运行工具、数据库可控
  • 首页 > IT技术
  • 作者:起点终站
  • 2016年12月29日 17:28 星期四
  • 浏览:4398
  • 字号:
  • 评论:0
  • 摘要

    不知道大家有没有看到过这样的一个网站。名字是“菜鸟工具”,里面有很多的在线编辑,在线运行的小工具,实用也很方便。(嘻嘻,不是打广告哈,不过确实很实用)。

    菜鸟工具

    作为一个PHP菜鸟,如果能有一个好用的,随时随地练习语法的工具该有多好啊。很明显,上面的那个PHP在线工具,基本上已经可以满足正常的需求了。

    但是美中不足的是,不支持数据库以及其他高级特性。所以这就显得很尴尬了。不能练习数据库语句,那还学个毛啊。所以还是自己动手吧,写个能支持数据库的在线工具,自己用。

    实现思路

    对于PHP文件而言,浏览器向服务器发送url请求的时候,解释器就会自动的把文件翻译成了浏览器可以解析的部分了。所以访问url的过程就是获取php解释过的数据的过程。

    简要解释

    下面简要的做个解释。比方说咱们有这样的一个temp.php文件, 内容如下:


    <?php
    echo "Hello PHP";
    ?>


    浏览器访问的时候,得到的数据如下: 

    temp.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>
        <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在线编辑工具还是比较容易实现的(相较于其他编程语言而言)。




    本文转自CSDN博客http://blog.csdn.net/marksinoberg/article/details/53869637


      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: 在线 PHP运行工具、数据库可控
    本文地址:https://blog.hellozwh.com/?post=229
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2014-2017 起点终站   闽ICP备16011094号-1

    00:00 / 00:00
    顺序播放