Ch09 在網頁之間傳遞資訊 網頁程式設計.

Slides:



Advertisements
Similar presentations
Java Web 开发 授课人:张鸽. 第三讲 JSP 内置对象  JSP 有以下九种内置对象,包括:  ·request ,请求对象  ·response ,响应对象  ·pageContext ,页面上下文对象  ·session ,会话对象  ·application ,应用程序对象.
Advertisements

《计算机网络技术》 动态网页制作技术 常用HTML控件课程积件 杨 姝.
第六章 网页设计与制作基础.
动态Web开发技术--JSP.
第 4 章 PHP 基本語法.
第五章 JSP内置对象 第4章学习了页面组成元素和使用方法。本章学习JSP内置对象的使用。使用JSP内置对象,可以方便操作页面,访问页面环境,实现页面内、页面间、页面与环境之间的通讯。 学习目标 熟悉主要内置对象的概念 理解主要内置对象的作用域和生命期 理解主要内置对象的作用和关系 熟悉主要内置对象的使用方法.
基于JSP搭建Web应用程序.
第5章 HTML 標籤介紹.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
Web Programming 網際網路程式設計
第五单元课1-3 层叠样式表.
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
第4章 JavaScript脚本语言基础 4.1 JavaScript简介 4.2 JavaScript语法基础
第3章 JavaScript语言基础.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
認證與檔案上傳 學習目標 基本原理 資料庫連線與選擇 執行查詢 取回答案 SQL Injection.
第六章 操作浏览器窗口.
HTML.
Ch07 PHP程式基礎 網頁程式設計.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
Google 自訂搜尋 淡江大學資訊中心 專案發展組 朱家璁 2009/10/6.
PHP+MySQL互動式網頁程式設計班 PHP進階語法 講師:林業峻 CSIE, NTU 6/ 19, 2010.
Hello World 體驗實作第一個JSP程式.
Ch01 HTML 5 資料格式 網頁程式設計.
第 2 章 必備的 HTML 與 CSS 重點.
第四章 網頁表單與資料傳遞.
留言版 1.先Create一個留言板的table
JQuery Mobile简介 唐瑶 Write less, do more.
Introduction to PHP part3
PHP +MySQL快速入門 Lesson 4.
XSS & SQL Injection理論 2014/7/29 許子謙.
专题4:JSP脚本和指令.
PHP 5 入門基礎 第一個PHP 程式 PHP 資料型態.
利用PHP將資料存入MySQL PHP 5 Tutorial 範例:
在 Web 应用中,导航是非常重要的。ASP
HTML 钟晖云 QQ:
JSP自定义标签技术的分析与应用 ----Custom Tag 的分析与应用
Ch.13 HTML網頁實作.
電子商務網站建制技術與實習(II) 助教:江宜政 吳昇洋.
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
進階 WWW 程式設計 -- PHP Regular Expression 靜宜大學資訊管理學系 蔡奇偉副教授 2004
PHP5與MySQL5 入門學習指南 凱文瑞克 著 第 18 章 Cookie和 Session.
第六讲 JSP中的文件操作(2) 教学目的 本讲继续讲述JSP中使用Java输入、输出流实现文件的读写操作 。 1 文件上传 2 文件下载
PHP+MySQL互動式網頁程式設計班 檔案上傳程式設計 講師:林業峻 CSIE, NTU 7 / 3, 2010.
檔案上傳 所謂檔案上傳,就是將檔案由客戶端的主機,藉 由瀏覽器傳送到伺服器的資料夾上。
JavaScript 靜宜大學 資管系 楊子青.
PHP 程式流程控制結構.
張智星 台大資工系 多媒體檢索實驗室 第九章 小餅乾(Cookies) 張智星 台大資工系 多媒體檢索實驗室.
网 站 设 计 与 建 设 Website design and developments
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
PHP 變數、常數與運算子 變數 常數 運算子
网站设计 前端 选择器(复习),表单.
架站實做—AppServ
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
HTML 103 互動式網頁.
JQuery Mobile简介 唐瑶 Write less, do more.
Ajax编程技术 第六章 调试与错误处理.
JavaScript 语言2 学习网站: 第 4 章 JavaScript 语言2 学习网站:
HTTP 1.1 Method OPTIONS GET HEAD POST PUT DELETE TRACE CONNECT
HTML 103 互動式網頁 助教:黃毓瑩.
利用PHP將資料存入MySQL PHP 5 Tutorial 範例:
第6章 PHP的数据采集.
Unity回傳統計資訊程式說明: 填寫回傳資訊網址(theUrl)。
PHP程式設計 五、程式流程控制結構 建國科技大學 資訊管理學系 饒瑞佶.
網頁設計實務- PHP 與資料庫整合.
HTML表单 JSP借由标签所构成的表单区块中,取得用户在其中特定字段输入的数据內容 。 JSP 动态网页新技术.
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
Presentation transcript:

Ch09 在網頁之間傳遞資訊 網頁程式設計

大綱 蒐集網頁上的資料 HTTP Header Coolie Session 2019/4/16

蒐集網頁上的資訊 建立表單:表單的建立包含下列兩個部分: 1. 使用 <form> 和 <input> 元素撰寫表單的介面,例如單行文字方塊、選擇鈕、核取方塊等。 2. 撰寫表單的處理程式,也就是表單的後端處理,例如將表單資料傳送到電子郵件地址、寫入檔案、寫入資料庫或進行查詢等。 2019/4/16

form_home2.html <form action="showanswer.php" method="post" name="form1"> <div> <label><span class="largefont">姓名:</span> <input class="answerfont" type="text" name="stdname" size="20"> </label> </div> <label><span class="largefont">年級:</span></label> <input type="radio" name="stdgrade" value="1" checked> <label class="answerfont">一年級</label> <input type="radio" name="stdgrade" value="2">二年級 2019/4/16

<input type="radio" name="stdgrade" value="3">三年級 </div> <label><span class="largefont">可以參加輔導時段:</span></label>     <div> <input type="checkbox" name="timetable[]" value="Mon" checked> <label class="answerfont">星期一</label>     </div> <input type="checkbox" name="timetable[]" value="Tue"> <label class="answerfont">星期二</label> 2019/4/16

</div> <div> <input type="checkbox" name="timetable[]" value="Wed"><label class="answerfont">星期三</label>     </div> <input type="checkbox" name="timetable[]" value="Thu"><label class="answerfont">星期四</label> <input type="checkbox" name="timetable[]" value="Fri"><label class="answerfont">星期五</label>    </div> <div> <label><span class="largefont">輔導老師希望是:</span></label> 2019/4/16

<select name="wantedteacher[]" size="1"> <option value="wang">原授課老師 <option value="newteacher">業界老師 <option value="TA">助教 <option value="學長姐">學長姐 <option value="同學">同學      </select> </div> <div> <label><span class="largefont">我還有話要說:</span></label> <textarea name="talking" cols="40" rows="3">我沒有意見</textarea> 2019/4/16

<input type="submit" value="傳送"> <div> <input type="submit" value="傳送"> <input type="reset" value="重新輸入"> </div> </form> 2019/4/16

表單的後端處理 將表單資訊以E-mail 形式傳送給指定的收件人 若要將表單資訊以 E-mail 形式傳送給指定的收件人,可以使用 <form>...</form> 標籤的 action 屬性設定收件人的電子郵件地址,例如: 讀取表單資訊並製作成確認網頁 為了讓瀏覽者知道其所輸入的表單資訊已經成功傳回Web伺服器,我們通常會在瀏覽者點取 [提交] 按鈕後顯示確認網頁,例如: <form method="post" action="mailto:jean@hotmail.com"> <form method="post" action="confirm.php"> 2019/4/16

showanswer.php <!doctype html> <html> <head>  <meta charset="utf-8"> <title>確認頁 </title> </head> <body> <?php $stdname = $_POST["stdname"]; echo $stdname . "你好,<br>"; 2019/4/16

switch($_POST["stdgrade"]) { case 1: echo "一年級<br>"; break; } 2019/4/16

foreach($_POST["timetable"] as $Value) $str = "可以參加輔導的時間是:"; foreach($_POST["timetable"] as $Value) $str = $str . $Value . "&nbsp,"; echo $str . "<br>"; $str = "希望的輔導老師:"; foreach($_POST["wantedteacher"] as $Value) $str = $str . $Value . " "; echo "其他意見:" . $_POST["talking"] . "<br>"; ?> </body> </html> 2019/4/16

HTTP Header 我們可以使用PHP內建的函式header() 傳送自訂的HTTP Header,常見的應用有網頁重新導向、使用者與密碼認證等,其語法如下: 下面是一個例子 header(string string [, bool replace [, int http_response_code]]) <?php header('WWW-Authenticate: Negotiate'); header('WWW-Authenticate: NTLM', FALSE); ?> 2019/4/16

5秒後,轉向新網頁 header('Refresh: 5; URL=http://localhost/test_redir_p3.php'); <meta http-equiv="refresh" content="5;url=http://jsfiddle.net/"> 2019/4/16

倒數?秒後,轉向新網頁(Javascript) <form name="redirect" id="redirect"> You Will Be Redirected To Next Page After <input size="1" name="redirect2“ id="counter"></input>Seconds. </form> <script type="text/javascript"> var countdownfrom=5 var currentsecond=document.redirect.redirect2.value=countdownfrom+1 function countredirect(){ if (currentsecond!=0){ currentsecond-=1 document.redirect.redirect2.value=currentsecond } else{ showIt() return } setTimeout("countredirect()",1000) } countredirect() function showIt() { window.location.href = "http://localhost/w9/test_redir_p3.php"; } </script> 2019/4/16

Cookie 寫入Cookie:使用PHP內建的函式setcookie() 寫入Cookie,其語法如下 下面是一個例子: setcookie(string name[, string value[, int expire[, string path[, string domain[, bool secure]]]]]) <?php header(“Content-type: text/html; charset=utf-8”); //指定網頁編碼方式為UTF-8 setcookie("UserName", "小丸子", time() + 60 * 60 * 24); setcookie("UserAge", 10, time() + 60 * 60 * 24); ?> 2019/4/16

Cookie 讀取Cookie:透過 $_COOKIE變數讀取Cookie,例如: setcookie("UserName", "Mary"); echo $_COOKIE["UserName"]; 先開啟瀏覽器執行這個程式,然後重新整理網頁,就會出現此結果。 2019/4/16

Session Session的用途是記錄用戶端的資訊,而且每個用戶端擁有各自的Session,如下圖: 2019/4/16

Session 存取Session:PHP支援的Session包含下列兩個部分: Session ID (SID) Session變數 網頁上顯示的次數取決於您在本瀏覽器載入此網頁的次數,比方說,您只要重複點取 [重新整理] 按鈕,次數就會逐一遞增。 2019/4/16

Session相關函式 PHP內建數個Session相關函式,比較重要的如下: session_start() session_unset() session_destroy() session_id([string id]) session_name([string name]) session_regenerate_id() session_encode() session_decode(string data) session_write_close() session_save_path([string path]) session_set_cookie_params(int lifetime [, string path [, string domain [, bool secure]]]) session_get_cookie_params(): 2019/4/16

test_redir_p1.php <!doctype html> <html> <head> <meta charset='utf-8'> <title>網頁轉向測試第一頁</title> </head> <body> 這是第一頁<br> <form method="post" action="test_redir_p2.php"> 姓名: <input type="text" name="username" size="10" required> <input type="submit" value="提交"> </form> </body> </html> 2019/4/16

test_redir_p2.php <?php session_start(); ?> <!doctype html> <html> <head> <meta charset='utf-8'> <title>網頁轉向測試第二頁</title> </head> <body> 這是第二頁<br> <?php $username=$_POST["username"]; echo $username . "Hi!"; setcookie("user1", $username , time()+60*60); $_SESSION['qq'] = $username; echo $_COOKIE["user1"]; //header('Refresh: 5; URL=http://localhost/w9/test_redir_p3.php'); //<meta http-equiv="refresh" content="5;url=http://localhost/w9/test_redir/p3.php"> ?> 2019/4/16

2019/4/16 <form name="redirect" id="redirect"> You Will Be Redirected To Next Page After <input size="1" name="redirect2" id="counter"></input>Seconds. </form> <script type="text/javascript"> var countdownfrom=5 var currentsecond=document.redirect.redirect2.value=countdownfrom+1 function countredirect(){ if (currentsecond!=0){ currentsecond-=1 document.redirect.redirect2.value=currentsecond } else{ showIt() return } setTimeout("countredirect()",1000) } countredirect() function showIt() { window.location.href = "http://localhost/w9/test_redir_p3.php";} </script> </body> </html> 2019/4/16

test_redir_p3.php <?php session_start(); ?> <!doctype html> <html> <head> <meta charset='utf-8'> <title>網頁轉向測試第三頁</title> </head> <body> 這是第三頁<br> <?php echo $_SESSION['qq']; echo $_COOKIE['user1']; ?> </body> </html> 2019/4/16