如何在Server端的PHP第一次執行時就讓JS依照PHP的不同數值而產生不同的介面

老觀念再度重複，HTML是網頁的基本主體，CSS用來述說這些主體的長相（長、寬、高、顏色等等），Javascript則功能很多：
1.可以用來讓HTML主體中可以有一些邏輯判斷，來動態的控制長相，或是產生不同的HTML主體。
2.可以作資料的判斷控制，讓資料傳送到SERVER之前，能被判斷過，有效的才會傳送到SERVER，以免浪費網路跟使用者時間。
3.還有更多的可以


這裡介紹一種前端Javascript取得後端PHP變數的用法（其實這時候沒有前後端，而是都還在後端，讓你可以在網頁第一次被載入的時候，就依照PHP的某個值（也許來自資料庫，也許經過某些邏輯判斷），來決定你的排版。


有三個程式檔（點我下載），Example-TestPhpTransParas-Main.php, Example-TestPhpTransParas.js, Example-TestPhpTransParas.css組合起來就可以讓後端的PHP的變數傳遞到Javascript檔案中，進而可以控制.css，來讓排版不同，比方某些HTML主體不顯示、顯示、變顏色、改長寬。底下的重點就在於紅色的部分，他透過PHP語法，把參數用ECHO方式吐到HTML的JavaScript片段裡然後讓JavaScript變數承接這個吐出的數值就行。

（這個範例需要RUN在Web Server上，否則沒法看到PHP的執行效果），而實際應用上，前端的JAVA跟後端的PHP的資料傳遞是透過POST跟GET的，而後期，這技術更演變成網頁上很強又很知名的技術：AJAX。相關文章在這裡。


----------------------Example-TestPhpTransParas-Main.php-----------------------------


<script language='JavaScript' type='text/JavaScript'>
isShowLabel = <?php echo $DB_Data ?>;
</script>





----------------------Example-TestPhpTransParas.js-----------------------------

$(document).ready(function ()
{
if ( 1 == isShowLabel )
{
$('.Lbl_PHP_Show').css("visibility", "visible");
}
});

----------------------Example-TestPhpTransParas.css-----------------------------
無需特別注意之處

改用比較好的架構來切割後端PHP與前端HTML

我在前幾天的兩篇文章中，提到一些關於網頁前端後端開發上的架構問題，

如何透過前端的Javascript得到Server端的PHP的變數數值

如何撰寫好看又好維護的PHP？

其實目的是為了引出這篇，我真正想要探究，想要知道的是一套好用、通用、實用或者大部分人怎麼用的架構，最近看了很多網路資訊、也請教了朋友之後，之後，覺得或許我找到了好的用法跟寫法，在此跟大家分享一下。

為了讓後端的資料能在前端因為資料不同而呈現不同的資訊、甚至是需要不同的UI編排，就會需要把PHP寫成多種分支。當某種資料時，則產生某種UI元件組合，當另外一種，則產生另外一種UI元件組合，如果資料型態有很多種，那這個PHP不就寫的又臭又難維護？尤其如果是採用 如何撰寫好看又好維護的PHP？ 文章中第二種寫法的話，那個PHP會醜到讓維護的人想要殺人，所以第一個改進的方向，就是從第二種寫法，先改為第一種寫法，這是把UI跟邏輯資料分開的第一步，分開除了讓程式乾淨，之後不論是修改UI，或是PHP要換ASP也會容易些。

再來，可以把PHP更純化，只負責資料處理，而前端則是單純的HTML，透過JS來控制UI長相，但怎麼從JS拿到PHP的數值呢？之前會用 如何透過前端的Javascript得到Server端的PHP的變數數值 來達到，但是，更好一點的作法，是可以在JS透過Ajax的方式，向Server取得資訊，然後即時對前端的HTML產生變化。而其中的CSS除了美化UI之外，更可以方便透過跟JQuery的整合應用，來增加UI元件的Class屬性，比方：

$('#item').addClass('selected') 或 $('#item').removeClass('selected')。

一方面可達到顏色或外觀的控制，另一方面則是可以因此決定出哪些UI元件具備了什麼Class，然後用

$('#target').children( '.selected' )  或  $('.init_state:has(.selected)') 

來選到這些物件作一些控制，或是傳資訊到後端。如此一來，甚至有機會不用把HTML跟PHP寫在一起，可以分成不同檔案了呢。

架構上，大概就是朝這個方向去改，去設計，就對了。

參考資料：

從 PHP + HTML 架構，擴展至 PHP + JSON + JQuery + JS Event + HTML 之筆記

如何撰寫好看又好維護的PHP？

工作這幾個月來，看同事的程式碼，慢慢對網頁程式有些瞭解了，前端用HTML拼湊我要呈現的東西，用CSS來讓畫面更有型，更美觀，用JavaScript讓網頁可以動態、根據不同狀況來產生不同網頁物件，或捕捉事件來控制網頁物件。而PHP用來在後端跟Server互動，比方根資料庫互動，或是跟檔案互動。而PHP最終目的也是要呈現資料給使用者看，所以PHP除了當純提供function，提供變數之外，本身也可以是個HTML，只是，他的副檔名必須是.PHP，這個概念，跟ASP差不多。

而程式跟HTML怎麼結合呢，目前看同事的寫法有兩種，一種是以HTML為主體，然後PHP是個區段，第二種，是PHP為主體，而HTML則透過ECHO方式吐出來，而前同事似乎比較喜歡第二種寫法（沒有批評的意思，只是從結果論）。

我個人喜歡第一種風格，原因是

1.以HTML為主體，可以直接把個PHP檔在Dreamwave開啟，看到確切的排版，如果以PHP為主體，你只能看到一片空白。

2.在瀏覽器進入Debug模式之後（通常按F12），如果用HTML為主體，則可以正常的單步看每行HTML的TAG有沒有寫錯，或是Script有沒有寫錯，或PHP有無正確（某些瀏覽器會直接看到PHP執行過後的數值而已），但是如果以PHP為主體，那麼ECHO所吐出的會變成一大行，根本就無法單步Debug了。



----------------方法一：HTML為主體----------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<?php
$user=$_GET['session'];
$session_path="/root/config/webaccess/httpd/".$user;
session_save_path($session_path);
session_start();
?>


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="style/manage-style.css"/>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <title>我的網頁</title>
</head>

<body>
    
    <div class="DivContent">    
        <label class="Lbl_Title">測試<?php  echo $session ?></label>
    </div>

</body>
</html>






----------------方法二：PHP為主體----------------

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">'


$user=$_GET['session'];
$session_path="/root/config/webaccess/httpd/".$user;
session_save_path($session_path);
session_start();



echo '<head>';
echo '<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>';
echo '<link rel="stylesheet" type="text/css" href="style/manage-style.css"/>';
echo '<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>';
echo '<title>我的網頁</title>';
echo '</head>';

echo '<body>';    
echo '    <div class="DivContent">';
echo '        <label class="Lbl_Title">測試 $session</label>';
echo '    </div>';

echo '</body>';
echo '</html>';

我不是很明白，會有人喜歡第二種嗎？或是有什麼理由要寫成第二種呢？目前只覺得，除非為了省時間，偷懶XD