備忘錄_20160105(定位)

備忘錄_20160105(定位) 修改回首頁

程式　2025-02-09　09:02:29　1739062949　100
簡易SQL使用者界面 / simple sql ui

簡易SQL使用者界面 / simple sql ui

這邊是純粹功能性頁面，若要佈署，要加上安全性管控，避免客戶端可以隨意執行SQL。

●simpleSQLUI_doSQL.php

<?php
  
  $strJson=file_get_contents('php://input'); // 讀入 json 資料
  $oInpData=json_decode($strJson);

  require_once 'lib_mariadb.php'; // 請參考常用類別
  
  $oMySQL=new CMySQL();
  
  if($oInpData->strMethod=='indupddel')
  {
    $oR=$oMySQL->insUpdDel("default", $oInpData->strSQL);
  }
  else if($oInpData->strMethod=='bigquery')
  {
    $oR=$oMySQL->bigQuery("default", $oInpData->strSQL);
  }
  else
  {
    $oR=["strError"=>"wrong method!"];
  }
  
  echo json_encode($oR, JSON_UNESCAPED_UNICODE); // 輸出 json 資料
  
?>

●simpleSQLUI.php

<!doctype html>
<html lang="zh-Hant-TW">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Simple SQL UI</title>
    <style>

textarea
{
  width: calc( 100vw - 2em );
  height: 6em;
  border-radius: 1em;
}

#taInput
{
  background-color: #efbcad;
}

#taOutput
{
  background-color: #ffbbcc;
}

    </style>
  </head>
  <body>
    <div>SQL語法</div>
    <div>
      <textarea id="taInput" placeholder="select * from tb1;"></textarea>
    </div>
    <br>
    <div>
      <button type="button" onclick="doInsUpdDel();">執行insUpdDel</button>
      <button type="button" onclick="doBigQuery();">執行bigQuery</button>
    </div>
    <br>
    <div>回傳結果</div>
    <div>
      <textarea id="taOutput"></textarea>
    </div>
    <div id="divResult"></div>
    <script>

function gebi(strId)
{
  return document.getElementById(strId);
}

function getStrToInnerHTML(str1)
{
  str1=String(str1);
  return str1.split("&").join("&amp;").split("<").join("&lt;").split(">").join("&gt;").split(" ").join("&nbsp;").split("'").join("&#039;").split('"').join("&quot;");
}

async function doInsUpdDel()
{
  gebi('taOutput').value="";
  gebi('divResult').innerHTML="";
  
  var oR=await getOFetchSync(strUrl='simpleSQLUI_doSQL.php', oInputData={strMethod: "indupddel", strSQL: gebi("taInput").value});
  
  gebi('taOutput').value=JSON.stringify(oR);
  
  var straHtml=[];
  while(true)
  {
    if(oR.booSuccess==false)
    {
      straHtml.push("失敗1,"+getStrToInnerHTML(oR.oError)+"<br>");
      straHtml.push("responsetext:"+getStrToInnerHTML(oR.strResponseText)+"<br>");
      break;
    }
    
    if(oR.oOutputData.booSuccess==false)
    {
      straHtml.push("失敗2,"+getStrToInnerHTML(oR.oOutputData.strErrorMessage)+"<br>");
      break;
    }
    
    straHtml.push("異動筆數:"+String(oR.oOutputData.iAffectedRows));
    
    break;
  }
  gebi('divResult').innerHTML=straHtml.join("\r\n");
  
}

async function doBigQuery()
{
  gebi('taOutput').value="";
  gebi('divResult').innerHTML="";
  
  var oR=await getOFetchSync(strUrl='simpleSQLUI_doSQL.php', oInputData={strMethod: "bigquery", strSQL: gebi("taInput").value});
  
  gebi('taOutput').value=JSON.stringify(oR);
  
  var straHtml=[];
  while(true)
  {
    if(oR.booSuccess==false)
    {
      straHtml.push("失敗1,"+getStrToInnerHTML(oR.oError)+"<br>");
      straHtml.push("responsetext:"+getStrToInnerHTML(oR.strResponseText)+"<br>");
      break;
    }
    
    if(oR.oOutputData.booSuccess==false)
    {
      straHtml.push("失敗2,"+getStrToInnerHTML(oR.oOutputData.strErrorMessage)+"<br>");
      break;
    }
    
    if(oR.oOutputData.iResultAmount<1)
    {
      straHtml.push("失敗3,無資料集可用。<br>");
    }
    
    for(var iR=0; iR<oR.oOutputData.iResultAmount; iR++)
    {
      var oResult=oR.oOutputData.aryResult[iR];
      
      straHtml.push("<table>");
      
      // 標題
      straHtml.push("<tr>");
      for(var iCol=0; iCol<oResult.straFieldName; iCol++)
      {
        straHtml.push("<th>"+getStrToInnerHTML(oResult.straFieldName[iCol])+"</th>");
      }
      straHtml.push("</tr>");
      
      // 內容
      for(var iRow=0; iRow<oResult.iRows; iRow++)
      {
        straHtml.push("<tr>");
        for(var iCol=0; iCol<oResult.iCols; iCol++)
        {
          straHtml.push("<td>"+getStrToInnerHTML(oResult.aryRawData[iRow][iCol])+"</td>");
        }
        straHtml.push("</tr>");
      }
      
      straHtml.push("</table>");
    }
    
    break;
  }
  gebi('divResult').innerHTML=straHtml.join("\r\n");
}

async function getOFetchSync(strUrl='', oInputData={})
{
  // 使用範例
  //
  // var oFetchResult=await getOFetchSync(strUrl, oInputData);
  //
  // oFetchResult.booSuccess (true/false)
  // oFetchResult.oError 
  // oFetchResult.strResponseText
  // oFetchResult.oOutputData
  //
  // PHP 部分範例參考
  //
  // <?php
  //   
  //   $strJson=file_get_contents('php://input'); // 讀入 json 資料
  //   $oInpData=json_decode($strJson);
  //   
  //   $oOutData=array("words"=>"hello, world!");
  //   echo json_encode($oOutData, true); // 輸出 json 資料
  //   
  // ?>
  
  try
  {
    var oResponse=await fetch(
      strUrl,
      {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(oInputData)
      }
    );
  }
  catch(oError)
  {
    return { booSuccess: false, oError: oError, strResponseText: "", oOutputData: {} };
  }
  
  try
  {
    var strText=await oResponse.text();
    var oOutputData=JSON.parse(strText);
  }
  catch(oError)
  {
    return { booSuccess: false, oError: oError, strResponseText: strText, oOutputData: {} };
  }
  
  return { booSuccess: true, oError: {}, strResponseText: strText, oOutputData: oOutputData };
}

    </script>
  </body>
</html>