[OpenR8 解決方案] CGI (介面程式讓你的網頁跟 www server 溝通達到跟使用者互動的效果)

一、CGI 介紹

 

CGI 是一種網路通訊的技術,透過網頁瀏覽器向伺服端請求資料,做特定 CGI 程式後,回傳顯示在瀏覽器上,如‌圖 1

 

圖 1.流程 .png

圖 1.流程 。

 

※執行 CGI 程式會需要安裝 apache,請自行安裝並設定相關路徑、參數。

 

 

二、CGI 資料夾介紹

 

CGI 位於 OpenR8 的 solution 資料夾內,如圖 2,內有七個 flow 檔案、五個 html,如圖 2,七個解決方案的功能會在第三章~第九章作介紹。

 

※CURL_GetPostFile.flow 與 CURL_GetPostFile.html 不在這次 CGI 的介紹範圍,請看 CURL 文件。

 

圖 2.CGI 位置 .png

圖 2.CGI 位置 。

 

圖 3.CGI 資料夾 .png

圖 3.CGI 資料夾 。

 

 

三、CGI_GetEnvString.flow — 取得指定的環境變數

 

請點選【檔案】=>【開啟】=>【進入到 OpenR8 底下的 solution 資料夾】=>【選擇 CGI 資料夾】=>【選擇 CGI_GetEnvString.flow 開啟】,如圖 4圖 5

 

圖 4.選擇 CGI_GetEnvString.flow .png

圖 4.選擇 CGI_GetEnvString.flow 。

 

圖 5.開啟 CGI_GetEnvString.flow .png

圖 5.開啟 CGI_GetEnvString.flow 。

 

選擇想取得的環境變數,以 CGI_GetEnvString.flow 為例,想取得 SERVER_NAME 的內容就填入 SERVER_NAME,如圖 6

 

※如果只是想看結果,可以跳過不設定。

 

圖 6.填入想取得的環境變數 .png

圖 6.填入想取得的環境變數 。

 

由於會呼叫到 CGI_GetEnvString.flow,所以要修改網頁的內容,對 CGI_GetEnvString.html 按右鍵用記事本或 notepad++ 開啟,將 r6 修改成 flow 後儲存,如圖 7圖 8

 

圖 7.r6 更改成 flow .png

圖 7.r6 更改成 flow 。

 

圖 8.更改成 flow 後儲存 .png

圖 8.更改成 flow 後儲存 。

 

然後開啟瀏覽器,在網址欄輸入 http://localhost/CGI_GetEnvString.html,進到網頁中,如圖 9。

 

圖 9.開啟 CGI_GetEnvString.html .png

圖 9.開啟 CGI_GetEnvString.html 。

 

按下 Submit 後,就能看到回傳 SERVER_NAME 之結果,如圖 10

 

圖 10.取得 SERVER_NAME .png

圖 10.取得 SERVER_NAME 。

 

 

四、CGI_GetGetString.flow — 取得 string 內容

 

請點選【檔案】=>【開啟】=>【進入到 OpenR8 底下的 solution 資料夾】=>【選擇 CGI 資料夾】=>【選擇 CGI_GetGetString.flow 開啟】,如圖 11圖 12。

 

圖 11.選擇 CGI_GetGetString.flow .png

圖 11.選擇 CGI_GetGetString.flow 。

 

圖 12.開啟 CGI_GetGetString.flow .png

圖 12.開啟 CGI_GetGetString.flow 。

 

由於會呼叫到 CGI_GetGetString.flow,所以要修改網頁的內容,對 CGI_GetGetString.html 按右鍵用記事本或 notepad++ 開啟,將 r6 修改成 flow 後儲存,如圖 13圖 14

 

圖 13.r6 更改成 flow .png

圖 13.r6 更改成 flow 。

 

圖 14.更改成 flow 後儲存 .png

圖 14.更改成 flow 後儲存 。

 

然後開啟瀏覽器,在網址欄輸入 http://localhost/CGI_GetGetString.html,進到網頁中,如圖 15。

 

圖 15.開啟 CGI_GetGetString.html .png

圖 15.開啟 CGI_GetGetString.html 。

 

按下 Submit 後,就能看到發送字串的結果,如圖 16

 

圖 16.取得字串內容 .png

圖 16.取得字串內容 。

 

 

五、CGI_GetPostFile.flow — 取得 Post 檔案

 

請點選【檔案】=>【開啟】=>【進入到 OpenR8 底下的 solution 資料夾】=>【選擇 CGI 資料夾】=>【選擇 CGI_GetPostFile.flow 開啟】,如圖 17圖 18

 

圖 17.選擇 CGI_GetPostFile.flow .png

圖 17.選擇 CGI_GetPostFile.flow 。

 

圖 18.開啟 CGI_GetPostFile.flow .png

圖 18.開啟 CGI_GetPostFile.flow 。

 

由於會呼叫到 CGI_GetPostFile.flow,所以要修改網頁的內容,對 CGI_GetPostFile.html 按右鍵用記事本或 notepad++ 開啟,將 r6 修改成 flow 後儲存,如圖 19圖 20

 

圖 19.r6 更改成 flow .png

圖 19.r6 更改成 flow 。

 

圖 20.更改成 flow 後儲存 .png

圖 20.更改成 flow 後儲存 。

 

然後開啟瀏覽器,在網址欄輸入 http://localhost/CGI_GetPostFile.html,進到網頁中,如圖 21。

 

圖 21.開啟 CGI_GetPostString.html .png

圖 21.開啟 CGI_GetPostString.html 。

 

在 file1 與 file2 欄位選擇檔案後,按下 Submit 後,在 CGI 的資料夾內可以看到“saveBinary.bin”與“saveBinary2.bin”兩個二元檔,如圖 22

 

圖 22.將Post得到的檔案存下來 .png

圖 22.將Post得到的檔案存下來 。

 

 

 

 

 

六、CGI_GetPostString.flow — 取得 Post 的 string

 

請點選【檔案】=>【開啟】=>【進入到 OpenR8 底下的 solution 資料夾】=>【選擇 CGI 資料夾】=>【選擇 CGI_GetPostString.flow 開啟】,如圖 23圖 24

 

圖 23.選擇 CGI_GetPostString.flow .png

圖 23.選擇 CGI_GetPostString.flow 。

 

圖 24.開啟 CGI_GetPostString.flow .png

圖 24.開啟 CGI_GetPostString.flow 。

 

由於會呼叫到 CGI_GetPostString.flow,所以要修改網頁的內容,對 CGI_GetPostString.html 按右鍵用記事本或 notepad++ 開啟,將 r6 修改成 flow 後儲存,如圖 25圖 26

 

圖 25.r6 更改成 flow .png

圖 25.r6 更改成 flow 。

 

圖 26.更改成 flow 後儲存 .png

圖 26.更改成 flow 後儲存 。

 

然後開啟瀏覽器,在網址欄輸入 http://localhost/CGI_GetPostString.html,進到網頁中,如圖 27。

 

圖 27.開啟 CGI_GetPostString.html .png

圖 27.開啟 CGI_GetPostString.html 。

 

在 file1 與 file2 欄位選擇檔案後,按下 Submit 後,會印出 Post 到的 string 內容,如圖 28

 

圖 28.顯示 Post 的字串 .png

圖 28.顯示 Post 的字串 。

 

 

七、CGI_ParseRequest.flow — 取得環境變數

 

請點選【檔案】=>【開啟】=>【進入到 OpenR8 底下的 solution 資料夾】=>【選擇 CGI 資料夾】=>【選擇 CGI_ParseRequest.flow 開啟】,如圖 29圖 30

 

圖 29.選擇 CGI_ParseRequest.flow .png

圖 29.選擇 CGI_ParseRequest.flow 。

 

圖 30.開啟 CGI_ParseRequest.flow .png

圖 30.開啟 CGI_ParseRequest.flow 。

 

 

八、    CGI_PrintBinary.flow — 印出 binary 檔

 

請點選【檔案】=>【開啟】=>【進入到 OpenR8 底下的 solution 資料夾】=>【選擇 CGI 資料夾】=>【選擇 CGI_PrintBinary.flow 開啟】,如圖 31圖 32

 

圖 31.選擇 CGI_PrintBinary.flow .png

圖 31.選擇 CGI_PrintBinary.flow 。

 

圖 32.開啟 CGI_PrintBinary.flow .png

圖 32.開啟 CGI_PrintBinary.flow 。

 

由於會呼叫到 CGI_PrintBinary.flow,所以要修改網頁的內容,對 CGI_PrintBinary.html 按右鍵用記事本或 notepad++ 開啟,將 r6 修改成 flow 後儲存,如圖 33圖 34

 

圖 33.r6 更改成 flow .png

圖 33.r6 更改成 flow 。

 

圖 34.更改成 flow 後儲存 .png

圖 34.更改成 flow 後儲存 。

 

然後開啟瀏覽器,在網址欄輸入 http://localhost/CGI_PrintBinary.html,進到網頁中,如圖 35。

 

圖 35.開啟 CGI_PrintBinary.html .png

圖 35.開啟 CGI_PrintBinary.html 。

 

在 file1 欄位選擇檔案後,按下 Submit 後,會印出 Post 到的 binary 內容,如圖 36

 

圖 36.顯示 Post binary 內容 .png

圖 36.顯示 Post binary 內容 。

 

 

九、CGI_PrintInfo.flow — 印出所有環境變數內容

 

請點選【檔案】=>【開啟】=>【進入到 OpenR8 底下的 solution 資料夾】=>【選擇 CGI 資料夾】=>【選擇 CGI_PrintInfo.flow 開啟】,如圖 37圖 38

 

圖 37.選擇 CGI_PrintInfo.flow .png

圖 37.選擇 CGI_PrintInfo.flow 。

 

圖 38.開啟 CGI_PrintInfo.flow .png

圖 38.開啟 CGI_PrintInfo.flow 。

 

如果直接執行,會印出電腦裡的環境變數,如圖 39;如果透過網頁執行,則會印出網頁的環境變數。

 

圖 39.印出電腦的環境變數 .png

圖 39.印出電腦的環境變數 。

 

 

十、CGI 函式功能介紹

 

  1. 【CGI_ParseRequest】:取得環境變數。
  2. 【CGI_GetPostFile】:取得 POST模式的檔案。
  3. 【CGI_GetEnvString】:取得指定的環境變數,先決條件:流程前面要有【CGI_ParseRequest】存在。
  4. 【CGI_GetGetString】:取得 GET模式的字串。
  5. 【CGI_GetPostString】:取得 POST模式的字串。
  6. 【CGI_Print】:列印字串在網頁上。
  7. 【CGI_Println】:列印字串在網頁上,同【CGI_Print】。
  8. 【CGI_PrintBinary】:印出 binary 檔。
  9. 【CGI_PrintInfo】:印出所有環境變數內容。
標籤:

延伸閱讀

1.
OpenR8 社群版 - 人人都會用的 AI 軟體 (免費下載)

[CP 值最好的 AI 人工智慧電腦熱賣中]
硬體採用最新最快的 Titan RTX, RTX-2080Ti-11G, 及 TESLA V100!
視窗圖控介面,易學易用。
硬體優勢:針對深度學習最佳化設計,且經過客戶端 24H 運作驗證。
軟體優勢:事先安裝人工智慧軟體及優化設定,每週提供最新 AI 演算法下載。
公司優勢:專業人工智慧機器人設計公司,資本額一億。
歡迎企業、學校、及公家機關大量採購。
可租用,歡迎來信或來電洽詢。
詳細資料請參閱以下網址: https://tw.openrobot.club/ai_computer