iT邦幫忙

4

趣味前後端-PHP原來不是我想像中的萬能 (更)

內容說明

php 作用在伺服器端,javascript 作用在客戶端

由於 php 是執行在伺服器端的程式語言

因此當使用者從其他電腦,連到這個伺服器上的php網頁時
會先在伺服器端執行並渲染php網頁上的php程式碼。
接著將執行與渲染php之後的網頁,從伺服器傳回客戶端。

https://ithelp.ithome.com.tw/upload/images/20201229/20120331wiKvt68SYN.png

而執行並渲染完php程式碼後的網頁內容如下:

<html>
    <head>
      <meta charset="UTF-8">
      <title>趣味前後端</title>
    </head>
    <body>
        <form action="#" method="post">
        <div>
            <label>標籤:</label>
            <input type="text" value="value01">
        </div>
        <div>
            <button onclick="clickMe(event)">按下我</button>
        </div>
        </form>
    </body>
    <script>
        function clickMe (event) {
            event.preventDefault();
            console.log(value01);
        }
    </script>
</html>

所以看到,第一個問題
當你在輸入欄位輸入1qaz@WSX
按下按鈕時,會執行console.log(value01)
瀏覽器的console會出現以下錯誤訊息:

Uncaught ReferenceError: value01 is not defined

等等?他不是存在 php 的 $value['field01'] 變數嗎??為什麼不是字串「"value01"」或「"1qaz@WSX"」?

網頁傳到客戶端之後,php 程式碼已經不存在
javascript 作用在客戶端,並不會知道 value01 在伺服器端是 php 的$value['field01'] 字串變數,也不會知道 value01 在 php 當中是一個字串,在客戶端瀏覽的網頁上,很單純的是一個「value01」

另一方面看到,這邊把 php 混在 javascript 是沒有意義的
php 作用在伺服器端,並不會知道使用者在客戶端的網頁上,目前欄位值是多少
即使在輸入欄位的值是1qaz@WSX,在網頁的程式碼仍然是console.log(value01)

能知道欄位上的目前輸入值,是客戶端的 javascript,應該由 javascript 處理
所以針對第一題的需求,改成如下,把 javascript 當中的php程式碼拿掉,透過javascript從DOM取得欄位值

<?php
    $value = [
        'field01' => 'value01',
        'field02' => 'value02',
    ];
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>趣味前後端</title>
</head>
<body>
    <form action="#" method="post">
    <div>
        <label>標籤:</label>
        <input id="my_input" type="text" value="<?php echo $value['field01'] ?>">
    </div>
    <div>
        <button onclick="clickMe(event)">按下我</button>
    </div>
    </form>
    
</body>

<script>
    function clickMe (event) {
        event.preventDefault();
        
        let value01 = document.getElementById('my_input').value
        console.log(value01);
    }
</script>
</html>

針對第二題的需求
只要將$value['field02']存到前端任何可以被 javascript 存取到的地方,都可以實現

<?php
    $value = [
        'field01' => 'value01',
        'field02' => 'value02',
    ];
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>趣味前後端</title>
</head>
<body>
    <form action="#" method="post">
    <div>
        <label>標籤:</label>
        <input id="my_input" type="text" value="<?php echo $value['field01'] ?>">
        <input id="my_input2" hidden type="text" value="<?php echo $value['field02'] ?>">
    </div>
    <div>
        <button onclick="clickMe(event)">按下我</button>
    </div>
    </form>
    
</body>

<script>
    function clickMe (event) {
        event.preventDefault();
        
        let json = {
            field01: document.getElementById('my_input').value,
            field02: document.getElementById('my_input2').value,
        };

        console.log(json);
    }
</script>
</html>

總結

當使用者連到此 php 網頁,php的程式碼會先在伺服器端,執行php程式碼與渲染內容到網頁上,接著將網頁回傳到客戶端,執行javascript。

以這個例子來說,php 作用在伺服器端,管不到使用者前端的 DOM 內容變化 與 事件偵聽,也不會去干涉載入到客戶端之後,javascript 會做什麼事情。

相對的,javascript 在此例作用在客戶端,如果需要後端的動態資料,則必須透過 Http Request 向後端請求取得資料,或者與伺服器端建立連線(如 WebSocket)

以上是透過範例,簡單演示 php 和 javascript 在前後端的執行時間與順序。

也感謝大家在下方的討論,如果有任何疏漏或錯誤的地方也歡迎提出與指正。


原問題

在版上蠻常看到有人詢問關於「網頁某個功能該怎麼用PHP實現的問題。」
所以在工作之餘整理這個趣味問題,希望讓剛開始使用php開發網頁的人,釐清和思考網頁前後端語言的角色觀念,也是我個人覺得一開始學網頁很重要的基礎。

程式碼情境

今天有一個人寫了一個PHP網頁,他希望一般使用者進入此網頁後,將 $value['field01'] 顯示在網頁的欄位上面,當作欄位的顯示預設值。

當使用者進入此網頁後,若使用者將輸入欄位的值修改為1qaz@WSX,按下按下我按鈕後,可以用JSON的格式,在瀏覽器console顯示 1qaz@WSX

而他目前寫出來的php程式碼結果如下:

<?php
    $value = [
        'field01' => 'value01',
        'field02' => 'value02',
    ];
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>趣味前後端</title>
</head>
<body>
    <form action="#" method="post">
        <div>
            <label>標籤:</label>
            <input type="text" value="<?php echo $value['field01'] ?>">
        </div>
        <div>
            <button onclick="clickMe(event)">按下我</button>
        </div>
    </form>
</body>

<script>
    function clickMe (event) {
        event.preventDefault();
        console.log(<?php echo $value['field01']; ?>);
    }
</script>
</html>

若網頁不含PHP的程式碼,則預期的輸出畫面如下:
https://ithelp.ithome.com.tw/upload/images/20201228/201203316LvkHmYlZh.png

需求與問題

假設伺服器設定皆正確無誤,伺服器已安裝最新的PHP,使用者可透過其他電腦連到此PHP網頁,根據目前的PHP網頁:

  1. 當使用者在輸入欄位文字1qaz@WSX,接著按下按下我按鈕之後,瀏覽器console會輸出什麼字串或結果?為什麼?該怎麼修改才能達到他期望需求?

  2. 當使用者在輸入欄位文字1qaz@WSX,希望瀏覽器console能以JSON的格式輸出如下結果:

https://ithelp.ithome.com.tw/upload/images/20201228/20120331KgCbJCKN0s.png

接著,在不重新整理網頁的情況下,若使用者將輸入欄位的值修改成 '1234QWER',瀏覽器console能以JSON的格式輸出如下結果:
https://ithelp.ithome.com.tw/upload/images/20201228/201203316nMlrBSXIg.png

該怎麼修改程式碼才能達到這個需求?

看更多先前的討論...收起先前的討論...
ckp6250 iT邦好手 1 級 ‧ 2020-12-28 22:06:11 檢舉
我初學PHP時,也曾犯下此類迷思,
把所有精神都放在PHP上頭,碰到問題,都是想【PHP程式碼該怎麼寫?】
一直忽略很多『效果』,都是依賴HTML5和JavaScript和CSS才辦得到,
PHP真的不是萬能。

學越久 ,才越發現,寫網頁程式真的不簡單,最少最少得學會五項
PHP
HTML5
JAVASCRIPT
CSS
SQL

這五項是最基本的,還缺什麼呢?幫我補一下。
我覺得,發這篇其實會讓人家誤解。

不要前端語言跟後端語言一起談。
前端有前端能做的事。後端有後端能做的事。

原本這些語言都有各自的分工。本來就不該混在一起談。

要求後端去辦到前端的事??還是要求前端去辦到後端的事?
這已經算是在惡搞了。
這種問題,一點也沒趣味。
froce iT邦大師 1 級 ‧ 2020-12-29 08:22:56 檢舉
我連code都還沒看就在想這是不是前後端的觀念混搖了...
wrxue iT邦研究生 4 級 ‧ 2020-12-29 08:37:43 檢舉
把php放到js裡面讓人無言
通靈亡 iT邦研究生 2 級 ‧ 2020-12-29 08:45:32 檢舉
@浩瀚星空 @force @wrxue
你們都點到問題的核心重點了。
感謝星空大前後善意的提醒。
PPTaiwan iT邦新手 3 級 ‧ 2020-12-29 09:22:32 檢舉
後端 >> 我是滿好奇的,你提到的後端到底是什麼叫後端??

後端的應用有 WinForm、WebAPI、DB 或是透過 Winform 與其他主機進行相關的溝通等等...

ps. javascript 裡面放任何的 HTML 更是令人無言,javascript 都可以透過 AJAX 方式來取得 json了,為何還要寫一堆 HTML 的內容,只為了置換並用 DIV 的方式顯示出來
> javascript 裡面放任何的 HTML 更是令人無言
React 表示:
其實,題外話一下。除非版主有修改過文章我沒看到。
不過....我好像沒看到他的程式跟內容中。有說到或寫到 js 內用 html 。
不知道為何突然有此一說???給人家莫須有?

當然啦,如果是有改過文章的就當我沒說過了。
現在 js 放 html 或 template 也ok啦,反正用 ` 包起來,視覺上舒服多了。

這篇讓我想起我的第一份工作 口_口||
Nick iT邦新手 5 級 ‧ 2020-12-29 10:30:21 檢舉
有事嗎?
很明顯你對程式邏輯與編排不了解,正常現在都不會這樣把php html javascript全部塞在同一隻檔案裡面,很明顯是你自己能力不足見識不夠多 廣,現在只有學生會這樣寫檔案,這樣的寫法可以說是明碼程式碼了,我只要chrome按下f12在重整一下,然後就可以看到你的程式了,請好好研究一下你要做什麼,然後再研究這個現在都怎樣作用,如果你是學生 那你就學好基礎,因為 外長高樓平地起 ,如果你是在工作上的需求,這樣的程式如果有牽涉到金錢或是相關重要的資訊及人事時地物的話,這叫做找死,駭客輕而易舉的破解,然後損失就好笑了…
拉回正題,標題:PHP原來不是我想像中的萬能
看來你對php的基礎了解根本沒有,再練練吧,這裡很多高手很多知識可以再往上提升,我在這個論壇裡 只能算是 初階新手呢
gameboxer iT邦新手 4 級 ‧ 2020-12-29 12:39:27 檢舉
感覺下這標題來釣魚的...
版主應該是看到某則硬要(只想?執意?)用PHP解決網頁而發的問題(?)吧(?
人家標題都先打上「趣味前後端」了……
看下來我都不知道該說什麼好了。
如果對發這題的人不甚了解,何不看看他的問答文章呢?

真的是人家能力不足,還是人家只是單純嗑瓜子聊天?
雖然是我先開砲的。但我的本質是指這樣的題目不好。
容易被人誤解。
用這種題目當趣味題。反而容易發生更多的問題。

這與我們一些人玩的sql趣味題的性質有點不同。
畢竟容易被誤會且誤解。

所以這樣的題目,我並不太敢回答怎麼處理。
畢竟標是是php(後端語言)。但用html+js(前端語言)來做答。
在本質上來說。容易被牽引誤會。

只是我不知道怎麼後來被扯出了js帶html的事?(有嘛??)
然後指「教」一些有的沒有的......這....
然後一堆人也不明所已的一直跟風。

讓我不得不出來替開板主抱一下不平啦!!
(謎:可是,是你先開砲的耶!!!)
(我:我我我我我.....旁邊畫圈圈去)

ps:我可以用我的帳號被盜了來乎巄過去嘛??
通靈亡 iT邦研究生 2 級 ‧ 2020-12-30 11:55:26 檢舉
> 畢竟標是是php(後端語言)。但用html+js(前端語言)來做答。
在本質上來說。容易被牽引誤會。

@浩瀚星空
我想問一個疑惑是,究竟是哪一句話會讓人有這個誤會,需要修飾?

因為原題目的第一個問題,其實有包括「輸出什麼字串或結果」、「為什麼」、「該怎麼修改」
原問題的前言第一段,有寫到:釐清和思考網頁「前後端語言」的角色觀念
Tag 上有標上:「趣味前後端」、「php」、「javascript」
問題預設跟這兩個語言都有關係,沒有預設一定是用 php 語言還是 javascript 語言回答。

而一開始你提到惡搞的部分,單純是為了演示,兩個語言混用時,php程式碼和 javascript 實際執行的順序,與產生的後果。確實有可能一般人不會想到這麼多,才會說感謝你善意的提醒。

如同archer大說的,有些人會誤會php可以處理並控制前端的部分,想要拿來當作前端語言使用。當然如果是前後端分離的網頁開發就不用管這個,不過還是有些網站不是採前後端分離的開發方式。
淺水員 iT邦研究生 1 級 ‧ 2020-12-30 12:25:26 檢舉
這串比較尷尬的地方是
已經懂的人,會覺得應該留給還不懂的人思考
而還不會的,點進來看的機率應該是不高...
當然剛好有有緣人從這篇學到東西也是好事一件
@通靈亡

這可能帶有些我自已的看法。
你的問題,容易將php導引成像是前端語言而造成誤會。

也的確有些多人將php當前端語言運行,而問題一堆但不自知。
我們懂的前後端。當然可以明白你這個題目的用意。

可是你得思考一下不懂的人。看到這樣的東西,是否會造成誤會。
不要去造成無謂非自已本意的教法。

你的開題本意是好的,但出題內容太過於潦草,造成誤解的用法。
雖然是想讓人家了解前後端的不同。
可是這樣的題目方式,反而容易給人往錯誤的思考方向。

就如你後面更新的程式碼。其實也只是單純html跟js的應用。跟php完全無關。
雖然有php的參數應用。但其實你的$value也是可以直接在js宣告處理。
並不一定需要php的變數值來定義值。
如果你有說明$value是後端可能資料庫產生的值也就算了。

所以指引及導引的方向並不太明確。
這就是我所謂的誤導方向。
>而還不會的,點進來看的機率應該是不高...

正解XD
不過不會的就算點進來看,沒有更新後的說明可能也看不懂

不確定是不是同一篇
我是剛好想到那篇發問 ( 那個不透過ajax、js 只想用php"即時"顯示 )
再加上可樂大提到的
感覺應該沒有表面想的那麼簡單
其實,可以明白 通靈亡 的用意。只是感覺不好。
這如果是叔叔的話。我想我又會跟他在私下吵起來了。

不過我也說了,其實這帶有點我的自有感覺。
或許通靈亡真的別有用意,或是故意這樣。
(畢竟我也很常幹這樣的事)

所以其實我後來想想,好像我有點破壞本意了。
不該用我自已的看法來看待這樣的問題。

在這邊先誠心給通靈亡一個道歉。
通靈亡 iT邦研究生 2 級 ‧ 2020-12-30 14:28:36 檢舉
> 如果你有說明$value是後端可能資料庫產生的值也就算了。
確實是類似這個前提沒錯,在網頁還沒帶入客戶端以前,PHP先在後端查詢並處理得到的資料,渲染到網頁上之後,再將網頁內容傳到客戶端。(當然後端的程式架構有分好的話,也不會直接在網頁最上面寫php程式碼,純粹示意用)

> 雖然有php的參數應用。但其實你的$value也是可以直接在js宣告處理。
所以如果我沒理解錯,你說的第一直覺的看法,應該是以前後端分離的網頁作法切入
當使用者瀏覽網頁之後,網頁先載入到客戶端,接著透過前端JS向後端PHP存取資料,將資料宣告在JS當中。

這樣我能理解這個問題,第一時間可能會產生什麼想法。
只是見解不一樣而已
就我看法
懂得人如同上面的前輩們會覺得很奇怪( 莫名其妙? )
coding的人根本沒有去了解js、html 及 php各自的功能(職位?)
這個需求本來就無法利用php來去辦到

而通靈大則是透過這則發問(?)
來去講解 及 演示 php、js 和 html的功能
以及為甚麼這則需求無法透過php來辦到
>以如果我沒理解錯,你說的第一直覺的看法.....

這樣說明倒也不是。
不過這個前提是指值不需要經由後端語言php提供的情況下。
可以直接在

<script>
let value = {field01: 'value01',field02: 'value02'};
</script>

來達到同樣的效果。
而不需要在包個<?php?>來處理。

這是在本質上可能會發生的錯覺。
不理解的人,
懂的人會覺得這是在亂教。
不懂的人,可能會產生「原來要這樣做」的錯覺。

懂的人本身知道也就算了。
怕的是不懂的人,誤以為是這樣就不好了。

我倒也不會想那麼深到前後端分離。ajax請求值的分布這樣的想法出來。
畢竟我考量的角度是在初學者的身上。而不是我們已經懂的人的身上。

畢竟你換位思考一下。真正懂得用ajax的人。其實你這樣的東西對他們來說其實已經是沒什麼了。
且我也相信你的題目本意在於給與初學者的身上。
所以在定位思考模式,不該在已明白其定義架構的人身上。
而是得將其定義在對這些還不懂的人身上才行。
通靈亡 iT邦研究生 2 級 ‧ 2020-12-30 15:48:45 檢舉
>不過這個前提是指值不需要經由後端語言php提供的情況下。...

或者這樣回答:
「你就直接把值寫死在<input>的value,全部讓JS處理就好啦,幹嘛還要這麼麻煩寫PHP」

不過在更新之前,第一題問的輸出和原因,看下來好像直接被略過就是了 XDD
或許真的有些人會這樣想喔!!
要不然像某位突然說js寫html的情況。也是有的。

其實如果你沒補後來的更新,原來的題目確實會霧殺殺的。
所以只有我是一開始就看到真相的真………叔叔嗎?
通靈亡 iT邦研究生 2 級 ‧ 2020-12-31 11:25:40 檢舉
應該像前面淺水大說的
一開始有看到的人,大多可能都是會的,想讓不會的人思考所以沒回答
不會的人,點進來的機會不高。

後來就出現如上方Nick,這位疑似精通PHP的人來驅趕亡靈 XDD
Terry L. iT邦新手 5 級 ‧ 2021-01-04 01:52:15 檢舉
第一眼看到陣列 ` ]` 後面沒 `;` 就看不下去了。還有你的表單沒 name 是要傳什麼鬼到 PHP 裡。
通靈亡 iT邦研究生 2 級 ‧ 2021-01-04 13:04:37 檢舉
>第一眼看到陣列 ` ]` 後面沒 `;` 就看不下去了。
謝謝提醒有補上去了

>還有你的表單沒 name 是要傳什麼鬼到 PHP 裡。

對,因為這邊沒有要提到 form 要送出表單到php的部分,所以欄位沒有加上name屬性。如果form的欄位資料要送到別隻後端php裡面,每個欄位要定義name屬性。
steve1234 iT邦新手 5 級 ‧ 2021-01-13 09:40:20 檢舉
先說雖然我沒有看完你的內容,可是我很肯定你的內容寫得很差勁.
被我誤會你可不能怪我啊.我已經說我沒看完內容,跟我解釋我也不會想要看.
總之你不是大神就別學大神玩趣味題.

尚未有邦友回答

立即登入回答