網頁後端設計講義 TS-PHP-handout

認識 PHP 資料傳遞接收的方式

新增檔案「test008_1.php」儲存到「ref」資料夾, 練習以下...
新增檔案「test008_2.php」儲存到「ref」資料夾, 練習以下...
新增檔案「test008_3.php」儲存到「ref」資料夾, 練習以下...

安排「test008_1.php」檔案的 HTML, 設計導覽按鈕及表單

<nav>
  <a href="test008_1.php" class="active">第1頁 表單</a>
  <a href="test008_2.php">第2頁 結果</a>
  <a href="test008_3.php">第3頁 其他</a>
</nav>
 
<h1>【負責送出資料】</h1>
 
<h2>===== get 送出的表單 =====</h2>
 
<form name="inputForm1" method="get" action="test008_2.php">
  <!-- form表單中的欄位: input, textarea, select  -->
  <input type="text" name="TSname" required placeholder="請輸入姓名....">
  <input type="text" name="TSlove" required placeholder="請輸入喜歡....">
  <input type="submit" value="送出">
</form>
 
<h2>===== post 送出的表單 =====</h2>
 
<form name="inputForm2" method="post" action="test008_2.php">
  <!-- form表單中的欄位: input, textarea, select  -->
  <input type="text" name="TSname" required placeholder="請輸入姓名....">
  <input type="text" name="TSlove" required placeholder="請輸入喜歡....">
  <input type="submit" value="送出">
</form>  
 
<h2>===== 登入表單 =====</h2>
 
<form name="loginForm" method="post" action="">
  <input type="text" name="login_name" required placeholder="請輸入帳號....">
  <input type="password" id="login_pwd" name="login_pwd" required placeholder="請輸入密碼....">
 
  <input type="button" id="showBtn" value="顯示密碼">
  <input type="reset" value="清除重填">
  <input type="submit" value="登入">
</form>
 
<link rel="stylesheet" href="test008.css">

安排「test008_2.php」檔案的 HTML, 設計導覽按鈕及標題、連結

<nav>
  <a href="test008_1.php">第1頁 表單</a>
  <a href="test008_2.php" class="active">第2頁 結果</a>
  <a href="test008_3.php">第3頁 其他</a>
</nav>
 
<h1>【負責接收資料】</h1>
 
<br>
<a href="test008_3.php">前往下一頁test008_3</a>
 
<link rel="stylesheet" href="test008.css">

安排「test008_3.php」檔案的 HTML, 設計導覽按鈕及標題、連結

<nav>
  <a href="test008_1.php">第1頁 表單</a>
  <a href="test008_2.php">第2頁 結果</a>
  <a href="test008_3.php" class="active">第3頁 其他</a>
</nav>
 
<h1>【負責接收第2頁的下一頁，也代表了其他任何頁面】</h1>
 
<link rel="stylesheet" href="test008.css">

安排「test008.css」檔案

  .login-info { float: right; padding: 20px; font-size: 20px; color: red; }
  nav { margin-bottom: 30px; }
  nav a { display: inline-block; padding: 5px 20px; 
    font-size: 18px; font-weight: bold; text-decoration: none; 
    background-color: lightyellow; border: 2px solid #000; color: #000; }
  nav a:hover { background-color: #ffff8a; }
  nav a.active { background-color: #164e1a; border: 2px solid #000; color: yellow; }
  h2 { background-color: #c1edff; }
  form { margin-left: 50px }

「test008_1.php」檔案中顯示密碼的方式

當按住「顯示密碼」(網上通常設計成眼睛圖示)按鈕時, 顯示出密碼輸入的文字

<!-- 下載並載入 jQuery Library 程式 -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
  $('#showBtn').mousedown(function(){
    $('#login_pwd').attr('type','text');
  });
  $('#showBtn').mouseup(function(){
    $('#login_pwd').attr('type','password');
  });
</script>

「test008_2.php」檔案中接收顯示資料的處理

在 body 中顯示資料的地方, 處理以下工作..........

<?php
  $TSname = $_GET['TSname'];
  $TSlove = $_GET['TSlove'];
  echo $TSname.'說:喜歡'.$TSlove;
 
  $TSname = $_POST['TSname'];
  $TSlove = $_POST['TSlove'];
  echo $TSname.'說:喜歡'.$TSlove;
?>

以上, 二個表單如果分別存在沒有問題, 但同時存在則有問題, 第一個GET送出的表單無法接收, 修改如下.......

<?php
//isset()函數負責判斷：是不是被設定了? 是不是存在?
//假如有收到get送出的TSname
if( isset($_GET['TSname']) ){
  $TSname = $_GET['TSname'];
  $TSlove = $_GET['TSlove'];
  echo $TSname.'說:喜歡'.$TSlove;
}
 
//假如有收到post送出的TSname
if( isset($_POST['TSname']) ){
  $TSname = $_POST['TSname'];
  $TSlove = $_POST['TSlove'];
  echo $TSname.'說:喜歡'.$TSlove;
}
?>

前往到下一頁的連結，預想：

<a href="test008_3.php?n=xxx&v=xxx">前往下一頁test008_3</a>

前往到下一頁的連結，更新後：

<a href="test008_3.php?n=<?php echo $TSname ?>&v=<?php echo $TSlove ?>">前往下一頁test008_3</a>

「test008_3.php」檔案中接收顯示資料的處理

在 body 中顯示資料的地方, 處理以下工作..........

<?php
//假如有收到連結帶參數 get 送出的 v1
if( isset($_GET['n']) ){
  $TSname = $_GET['n'];
  $TSlove = $_GET['v'];
  echo $TSname.'說:喜歡'.$TSlove;
}
?>

「test008_1.php」檔案中登入表單帳密送出=>接收=>存放在$_SESSION系統變數

在檔案最上方, 處理以下工作........

<?php  
//啟動 session 功能, 只要使用到 $_SESSION 系統變數, 就需要啟動 session 功能
session_start(); 
//假如有收到登入表單送出的帳號
if( isset( $_POST['login_name'] ) ){
  //將收到的帳號資料存放在$_SESSION系統變數中
  $_SESSION['login_name'] = $_POST['login_name'];
}
?>

三個檔案中都需要的：接收顯示資料的處理

<body>
<?php
if( isset($_SESSION['login_name']) ){
  echo '<div class="login-info">歡迎 '.$_SESSION['login_name'].' 登入</div>';
}
?>

PHP 相關系統變數的介紹參考 (建議有空多逛逛多看看)

$_GET 【英文版 w3schools 的介紹】【中文簡體 runoob 的介紹】
$_POST 【英文版 w3schools 的介紹】【中文簡體 runoob 的介紹】
$_SESSION 【英文版 w3schools 的介紹】【中文簡體 runoob 的介紹】
$_SERVER 【英文版 w3schools 的介紹】【中文簡體 runoob 超级全局变量的介紹】

1-11. 資料的傳遞與接收