Microsoft Word - PHP&DW_CS5.5_講義大綱.doc

Size: px

Start display at page:

Download "Microsoft Word - PHP&DW_CS5.5_講義大綱.doc"

巡严
6 years ago
Views:

1 臺中市 101 年度暑期教師資訊課程研習打造客制化網站 DreamweaverPHP 網頁程式設計承辦單位 : 臺中市神岡區岸裡國民小學講師 : 吳兆全老師日期 : 民國 101 年 7 月日臺中市 101 年暑期教師資訊課程研習第 1 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

2 壹環境的準備 1. AppServ 的安裝 (1-5) 2. 測試 AppServ 進入首頁 phpmyadmin phpinfo() 設定時區修改 php.ini:date.timezone = "Asia/Taipei" 另外一種方式使用 php function 在 php 內只要輸入 date_default_timezone_set("asia/taipei") 3. 安裝 Dreamweaver CS5.5 試用版貳 Dreamweaver 的操作環境 1. 定義一個新網站 (1-20) 2. CSS 美化網頁 3. 利用 DIV 客製化網頁的版面配置 (DIV 表格 ) 4. 製作 Spry 選單列與整合 theme_sample.php 5. Extension Manager( 命令管理擴充功能 ) 參 SQL 資料庫基本指令 (3-27 ~ 3-38) 1. select 資料 2. insert 資料 3. update 紀錄 4. delete 紀錄肆 PHP 基本語法 ( 第 2 章 ) 1. 變數符號與運算子 (2-10) 變數 (2-10) 好的變數命名, 可以增進閱讀程式的了解性, 如果你重頭到尾只是以 $a $i 變數命名, 看到後面可能就忘記了在 php 中大小寫有區別 $stud_year $stud_name 這樣的命名就比較清楚了如果你喜歡以大小寫來區分, 那 $StudYear $StudName 也是蠻合適的變數 $ 後的第一個字不可以是數字 session_start() $_GET[var] $_POST[var] $_SERVER[PHP_SELF] $_SESSION[VAR] 符號 (2-11) 臺中市 101 年暑期教師資訊課程研習第 2 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

3 敘述的結尾符號 (2-11) 註解符號 (2-12) 2. 流程控制 (2-18) if..elseif.else (2-18) switch..case.default (2-23) for (2-27) while (2-28) do.while (2-29) 3. 陣列 (2-30) 4. 函數 (2-38) date() substr() 伍網頁傳值與表單 1. 互動式表單的製作 2. 傳送與接收表單資料陸佈告欄公告系統製作 1. 使用 phpmyadmin 新增資料庫 (3-7,4-3) 認識資料庫型態 (3-7) 新增一個 mydatabase 的資料庫建立資料表 (board_new) 建立資料欄位 2. 使用 Dreamweaver 建立資料庫連線使用 Dreamweaver 加入動態資料與動態表格使用 Dreamweaver 加入新增頁面 CKeditor 編輯器擴充程式 (5-37) date() substr() 的函數運用自訂 utf8_substr() Html2Text() 函數修正使用 Dreamweaver 加入刪除頁面使用 Dreamweaver 加入修改頁面錯誤訊息設定柒 Spry 表單驗證工具集 (4-12) 1. 圖樣字符代表的資料意義的數字 X 大寫的英文字母與數字 A 大寫的英文字母 x 小寫的英文字母與數字 a 小寫的英文字母 Y 或 y 不區分大小寫的英文字母與數字 B 或 b 不區分大小寫的英文字母? 任何字元臺中市 101 年暑期教師資訊課程研習第 3 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

4 捌 RSS 製作 1. 安裝 MyRSS extention 2. htmlspecialchars 與 strip_tags 去除 html 與 php 標記符號玖會員管理網站實作 1. 使用 phpmyadmin 新增資料庫 (3-7,4-3) 2. 建立資料表資料表名稱 :memberdata 欄位型態校對屬性 Null 預設值附加編號 memid int(12) 否 auto_increment 帳號 memlogin_id varchar(20) utf8_unicode_ci 否密碼 mempsw varchar(32) utf8_unicode_ci 否姓名 memname varchar(10) utf8_unicode_ci 是 NULL 會員等級 memlevel varchar(50) utf8_unicode_ci 否 user MySQL 裡 utf8_general_ci 跟 utf8_unicode_ci 連線校對的差異參考網站 : 3. 新增會員 4. 刪除會員刪除確認 Extension(confirmlinks.mxp) 5. 修改會員 6. login.php 登入頁面製作 7. 頁面權限設定, 登入登出限制存取 (4-28) 8. 明碼加密傳送 MD5 加密 (4-20,4-23) 9. 參考資料 : php document: Mysql document: Appserv: 臺中市 101 年暑期教師資訊課程研習第 4 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

5 AppServ 的安裝 (1-5) 臺中市 101 年暑期教師資訊課程研習第 5 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

$1. 預設安裝的目錄為 C:\Appserv 2.$ student.tw/db/showthread.php?

6 1. 預設安裝的目錄為 C:\Appserv 2. MyISAM 與 InnoDB 的差別 A 參考網站 : i. 臺中市 101 年暑期教師資訊課程研習第 6 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

7 ii. B 更改資料表引擎語法 :ALTER TABLE table_name ENGINE = InnoDB 定義一個新網站一點選網站新增網站或是點選右方 1 檔案(F8) 2 管理網站臺中市 101 年暑期教師資訊課程研習第 7 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

$選取本機網站資料夾在 D 槽建立 D:\PHP_Dreamweaver 研習 _20120705\myphp_Appserv 的本機資料夾臺中市 101 年暑期教師資訊課程研習$

8 二點選 1 網站 A. 輸入網站名稱 B. 選取本機網站資料夾在 D 槽建立 D:\PHP_Dreamweaver 研習 _ \myphp_Appserv 的本機資料夾臺中市 101 年暑期教師資訊課程研習第 8 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

$三點選 2 伺服器基本輸入伺服器名稱 :127.0.0.1 選擇本機 / 網路伺服器資料夾 :(AppServ 安裝的網頁根目錄位置 )(C:\AppServ\www\myphp) Web URL :http://127.0.0.1/myphp/ 完成後按 2 次儲存按鈕 CSS 美化網頁外部連接套用這是大部份的使用者最常用的方法, 所有的 CSS 樣式宣告都是設定在副檔名.$

9 三點選 2 伺服器基本輸入伺服器名稱 : 選擇本機 / 網路伺服器資料夾 :(AppServ 安裝的網頁根目錄位置 )(C:\AppServ\www\myphp) Web URL : 完成後按 2 次儲存按鈕 CSS 美化網頁外部連接套用這是大部份的使用者最常用的方法, 所有的 CSS 樣式宣告都是設定在副檔名.css 的檔案中, 使用方法 : <head> <link href="css 路徑檔名 " rel="stylesheet" type="text/css" /> </head> 臺中市 101 年暑期教師資訊課程研習第 9 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

匯入套用外部的 CSS 樣式也可以被匯入進 HTML 文件, 匯入的做法為利用 @import 這個語法使用方法 : <head> <style type="text/css"> <!

10 匯入套用外部的 CSS 樣式也可以被匯入進 HTML 文件, 這個語法使用方法 : <head> <style type="text/css"> url(css 路徑檔名 ); --> </style> </head> 內嵌套用 CSS 樣式可以直接寫入於 HTML 文件的 <head>...</head> 之中 <head> <style type="text/css"> div { color:red; } </style> </head> 臺中市 101 年暑期教師資訊課程研習第 10 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

行內套用顧名思義, 就是在 HTML 的該行敘述內直接宣告樣式不過語法就有點不太一樣了, 舉例來說 : <p style="color:blue;"> 此段落會呈現為藍色 </p> 就是直接在 HTML 標籤的屬性內直接加上 style 即可, 不過缺點就是都是用這種方法來撰寫的話,CSS 語法散佈於各個 HTML 標籤內, 以後不好管理

11 行內套用顧名思義, 就是在 HTML 的該行敘述內直接宣告樣式不過語法就有點不太一樣了, 舉例來說 : <p style="color:blue;"> 此段落會呈現為藍色 </p> 就是直接在 HTML 標籤的屬性內直接加上 style 即可, 不過缺點就是都是用這種方法來撰寫的話,CSS 語法散佈於各個 HTML 標籤內, 以後不好管理優先順序大部份的使用者都是使用外部連結的方式來套用, 把 CSS 及 HTML 分開來管理, 但是頁面不多的情況下, 有時為了方便也會使用內嵌或行內方式來套用, 但是如果您在設計網頁的時候應用到兩個以上的套用方式, 而且樣式定義有衝突的時候怎麼辦? 您一定要記住樣式的優先順序, 當樣式定義有衝突時, 先後順序如下 : 行內內嵌匯入外部連結瀏覽器預設也就是愈小的範圍愈優先啦! 使用 DW 編修 CSS 串接樣式表臺中市 101 年暑期教師資訊課程研習第 11 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

12 臺中市 101 年暑期教師資訊課程研習第 12 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

13 臺中市 101 年暑期教師資訊課程研習第 13 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

14 DW 中 CSS 串接樣式表中英文對照圖 1. 字型臺中市 101 年暑期教師資訊課程研習第 14 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

15 2. 背景臺中市 101 年暑期教師資訊課程研習第 15 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

16 3. 區塊臺中市 101 年暑期教師資訊課程研習第 16 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

17 4. 方框臺中市 101 年暑期教師資訊課程研習第 17 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

18 5 邊框 6. 清單臺中市 101 年暑期教師資訊課程研習第 18 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

19 7. 定位臺中市 101 年暑期教師資訊課程研習第 19 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

$8. 擴充功能利用 DIV 客製化網頁的版面配置 (DIV 表格 ) 一這裡使用外部連接套用的方式以方便管理 css, 步驟如下 : 1. 在 C:\AppServ\www\myphp 下建立 css 資料夾, 利用檔案開新檔案, 建立一個 reset.css 儲存至 css 的資料夾 reset.$

20 8. 擴充功能利用 DIV 客製化網頁的版面配置 (DIV 表格 ) 一這裡使用外部連接套用的方式以方便管理 css, 步驟如下 : 1. 在 C:\AppServ\www\myphp 下建立 css 資料夾, 利用檔案開新檔案, 建立一個 reset.css 儲存至 css 的資料夾 reset.css 的檔案內容 : body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; } table { border-collapse:collapse; 臺中市 101 年暑期教師資訊課程研習第 20 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

21 border-spacing:0; } fieldset, img { border:0; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } ol, ul { list-style:none; } caption, th { text-align:left; } /*h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }*/ q:before, q:after { content:''; } abbr, acronym { border:0; } 接著在建立一個 default.css 儲存至 css 的資料夾 default.css 的檔案內容 "utf-8"; /* CSS Document url("reset.css"); body { background-color: #CCC; } #HEADER { width:1020px; height:207px; background-color:#ccffff; 臺中市 101 年暑期教師資訊課程研習第 21 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

22 background-image: url(../images/theme/title.jpg); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #WRAPPER_top { margin:0 auto; width:1020px; background-color:#ffffff; padding-top:0px; padding-bottom:0px; background-image: url(../images/theme/content.jpg); } #BOX_top { width:1020; height:30px; text-align: right; margin-right: 12px; margin-left: 12px; display:block; background-color: #CFF; } #WRAPPER { margin:0 auto; width:1020px; overflow:hidden; background-color:#ffffff; padding-top:0px; padding-bottom:0px; background-image: url(../images/theme/content.jpg); }.BOX_center_content { width:656px; float:left; background-color:#ffffff; display:inline; } 臺中市 101 年暑期教師資訊課程研習第 22 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

23 .BOX_left { width:170px; float:left; background-color:#ffffff; margin-left:12px; display:inline; }.BOX_right { width:170px; float:right; background-color:#ffffff; margin-right:12px; display:inline; }.BOX_CLEAR { clear: both; } #FOOTER { clear:both; width:1020px; height:108px; background-color:#ffffff; background-image: url(../images/theme/foot.jpg); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #FOOTER.box_foot { display:block; color:#ffffff; line-height:12px; text-align:right; font-size: 10px; font-weight: normal; padding-right: 12px; padding-left: 12px; } 臺中市 101 年暑期教師資訊課程研習第 23 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

$.mytest { font-size:12px; line-height:20px; letter-spacing:1px; padding:8px 15px; } 2. 開啟一個 theme_sample.$

24 .mytest { font-size:12px; line-height:20px; letter-spacing:1px; padding:8px 15px; } 2. 開啟一個 theme_sample.php 的新網頁, 儲存至網站的 theme 目錄下, 利用外部連結套用的方式連結 default.css 檔案臺中市 101 年暑期教師資訊課程研習第 24 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

25 在 theme_sample.php 的 <head></head> 中出現 ccs link 的外部連結語法臺中市 101 年暑期教師資訊課程研習第 25 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

id="box_top"> id "BOX_top" 的內容 </div> </div> <div id="wrapper"> <div class="box_left"> id "BOX_left" 的內容 </div>

26 二開啟編輯 theme_sample.php, 利用 DIV 製作表格製作出如下圖的表格程式碼如下 : <div id="header"> id "HEADER" 的內容 </div> <div id="wrapper_top"> <div id="box_top"> id "BOX_top" 的內容 </div> </div> <div id="wrapper"> <div class="box_left"> id "BOX_left" 的內容 </div> <div class="box_center_content"> class "content" 的內容 </div> <div class="box_right"> id "BOX_right" 的內容 </div> <div class="box_clear"></div> 臺中市 101 年暑期教師資訊課程研習第 26 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

27 </div> <div id="footer"> id "FOOTER" 的內容 </div> 製作 Spry 選單列與整合 theme_sample.php 一開啟二個 menu_right.php 與 menu_top.php 的新網頁, 儲存至網站的 menu 目錄下臺中市 101 年暑期教師資訊課程研習第 27 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

28 二開啟編輯 menu_right.php, 利用 DW 製作垂直選單列臺中市 101 年暑期教師資訊課程研習第 28 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

29 完成如下圖三開啟編輯 menu_top.php, 利用 DW 依樣畫葫蘆製作水平選單列四利用 php 的 include() 函數將 menu_right.php 與 menu_top.php 引入 theme_sample.php 佈景樣板中語法 : <?php include('../menu/menu_top.php');?> <?php include('../menu/menu_right.php');?> 臺中市 101 年暑期教師資訊課程研習第 29 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

30 theme_sample.php 成果圖 : 臺中市 101 年暑期教師資訊課程研習第 30 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

使用 phpmyadmin 新增資料庫一建立佈告欄資料表利用 phpmyadmin 建立 mydatabase 的資料庫, 依據下表建立資料表 (board_new) 與資料欄位欄位型態校對屬性 Null 預設值附加編號 b_id int(8) 否 auto_increment 類型 b_type varchar(20) utf8_unicode_ci 否主題

31 使用 phpmyadmin 新增資料庫一建立佈告欄資料表利用 phpmyadmin 建立 mydatabase 的資料庫, 依據下表建立資料表 (board_new) 與資料欄位欄位型態校對屬性 Null 預設值附加編號 b_id int(8) 否 auto_increment 類型 b_type varchar(20) utf8_unicode_ci 否主題 b_title varchar(100) utf8_unicode_ci 否內容 b_content mediumtext utf8_unicode_ci 否發佈日期 b_postdate date 否發佈天數 b_day smallint(6) 否發佈者 b_user varchar(10) utf8_unicode_ci 否 MySQL 裡 utf8_general_ci 跟 utf8_unicode_ci 連線校對的差異參考網站 : 1 建立 mydatabase 資料庫 MySQL 語法 :CREATE DATABASE `mydatabase` DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci; 2 建立 board_new 資料表臺中市 101 年暑期教師資訊課程研習第 31 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

32 3 建立 b_id b_type b_title b_content b_postdate b_day b_user 7 個資料欄位臺中市 101 年暑期教師資訊課程研習第 32 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

33 使用 Dreamweaver 建立資料庫連線 ( 建立動態資料與動態表格 ) 一先建立 board_new 資料夾二使用 DW 建立一個 board_show.php 的檔案三開啟 board_show.php 建立資料庫連線臺中市 101 年暑期教師資訊課程研習第 33 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

34 臺中市 101 年暑期教師資訊課程研習第 34 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

35 完成後, 會在資料庫看到 MY_DB_connect 的資料庫連線, 而且系統會自動建立一個 Connections 的資料夾, 並自動產生 MY_DB_connect.php 的資料庫設定檔四建立資料集 ( 查詢 ) 臺中市 101 年暑期教師資訊課程研習第 35 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

36 完成後的畫面, 在繫結裡會出現資料集 (Rec_b_show) 五使用動態資料動態表格建立動態網頁臺中市 101 年暑期教師資訊課程研習第 36 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

37 完成後的畫面出現剛剛加入的動態表格和右方的伺服器行為, 刪除不需要的資料, 修改標題名稱點選伺服器行為資料集 (Rec_b_show) 在 where 後加入條件判斷 to_days(b_postdate)+ b_day > to_days(curdate()), 只 select 未超過到期日的資料臺中市 101 年暑期教師資訊課程研習第 37 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

38 六使用 substr() 函數修飾公告內容的顯示數字,substr() 函數用法請利用網站查詢, 顯示有問題? 提供 2 個解決問題的自訂函數 Html2Text() utf8_substr() 臺中市 101 年暑期教師資訊課程研習第 38 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

39 使用 Dreamweaver 加入新增頁面一使用 DW 建立一個 board_add.php 的檔案二開啟 board_add.php 資料紀錄插入表單精靈完成後畫面, 自動產生 form 的 post 表單, 伺服器行為出現插入紀錄動態清單 / 選單, 瀏覽 board_add.php 測試新增功能是否正常臺中市 101 年暑期教師資訊課程研習第 39 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

$5-37) 1. 將 ckeditor_3.3.1.zip 解壓縮到網站目錄下 D:\PHP_Dreamweaver 研習 _20120705\myphp_Appserv 2.$ 開啟 board_add.php 檔案, 將 <script src="../ckeditor/ckeditor.

將原來的公告內容的文字輸入區域語法加入 <script type="text/javascript"> CKEDITOR.

40 三安裝使用 ckeditor_3.3.1(5-37) 1. 將 ckeditor_3.3.1.zip 解壓縮到網站目錄下 D:\PHP_Dreamweaver 研習 _ \myphp_Appserv 2. 開啟 board_add.php 檔案, 將 <script src="../ckeditor/ckeditor.js" type="text/javascript"></script> 加在 <head></head> 間 3. 將原來的公告內容的文字輸入區域語法加入 <script type="text/javascript"> CKEDITOR.replace('b_content');</script> 如下圖未加入語法前改成臺中市 101 年暑期教師資訊課程研習第 40 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

$四使用 Date() 函數修改公告日期欄位, 並加入 javascript 的功能 4. 將 calendar.zip 解壓縮到網站目錄下 D:\PHP_Dreamweaver 研習 _20120705\myphp_Appserv 5. 開啟 board_add.php 檔案, 將 <script src="../calendar/calendar.$ css" rel="stylesheet" type="text/css" /> 加在 <head></head> 間 6. 將原來的公告日期的文字方塊語法改成 <input name="b_postdate" type="text" id="b_postdate" value="<?php echo date('y-m-d');?

css" rel="stylesheet" type="text/css" /> 加在 <head></head> 間 6. 將原來的公告日期的文字方塊語法改成 <input name="b_postdate" type="text" id="b_postdate" value="<?php echo date('y-m-d');?

41 四使用 Date() 函數修改公告日期欄位, 並加入 javascript 的功能 4. 將 calendar.zip 解壓縮到網站目錄下 D:\PHP_Dreamweaver 研習 _ \myphp_Appserv 5. 開啟 board_add.php 檔案, 將 <script src="../calendar/calendar.js"></script> <script src="../calendar/calendar-setup.js"></script> <script src="../calendar/calendar-tw.js"></script> <link href="../calendar/calendar-blue.css" rel="stylesheet" type="text/css" /> 加在 <head></head> 間 6. 將原來的公告日期的文字方塊語法改成 <input name="b_postdate" type="text" id="b_postdate" value="<?php echo date('y-m-d');?>" size="32" readonly="readonly" /> <button id="java_b_postdate" title=" 公告日期 ">...</button> <script> Calendar.setup({"inputField":"b_postdate","button":"java_b_postdate","singleClick":false}); </script> 如下圖未加入語法前改成臺中市 101 年暑期教師資訊課程研習第 41 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

42 使用 Dreamweaver 加入刪除頁面一使用 DW 建立一個 board_del.php 的檔案二先開啟 board_show.php 這個檔案, 建立刪除的連結完成如下圖, 多了 <a href="board_del.php?b_id=<?php echo $row_rec_b_show['b_id'];?>"> 刪除 </a> 的語法臺中市 101 年暑期教師資訊課程研習第 42 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

43 三開啟編輯 board_del.php 加入刪除記錄點選資料刪除記錄按鈕, 如下圖, 輸入相關資料按確定完成畫面如下圖, 在伺服器行為自動加入刪除記錄的行為四利用 confirmlinks.mxp 的擴充程式, 加入刪除時加以確認的訊息, 以避免誤刪 1. 安裝 confirmlinks.mxp 的擴充程式, 直接在檔案上雙點左鍵進行安裝臺中市 101 年暑期教師資訊課程研習第 43 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

44 2. 開啟 board_show.php 這個檔案, 修正刪除的連結臺中市 101 年暑期教師資訊課程研習第 44 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

45 完成如下圖, 測試看看是否會出現確定要刪除嗎? 的訊息使用 Dreamweaver 加入修改頁面一使用 DW 建立一個 board_edit.php 的檔案二開啟 board_show.php 這個檔案, 建立修改的連結 ( 方法同建立刪除的連結 ) 三開啟編輯 board_edit.php 加入資料集 ( 查詢 ) 臺中市 101 年暑期教師資訊課程研習第 45 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

46 編輯 board_edit.php 加入更新紀錄點選資料紀錄更新表單精靈按鈕, 如下圖, 輸入相關資料按確定臺中市 101 年暑期教師資訊課程研習第 46 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

3.1 修改公告日期欄位加入 javascript 的功能方法請參考使用 Dreamweaver 加入新增頁面臺中市

47 完成後畫面, 自動產生 form 的 post 更新表單,, 伺服器行為出現更新紀錄動態清單 / 選單動態文字欄位等行為, 測試修改功能是否正常四細部修改 : 公告內容使用 ckeditor_3.3.1 修改公告日期欄位加入 javascript 的功能方法請參考使用 Dreamweaver 加入新增頁面臺中市 101 年暑期教師資訊課程研習第 47 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

48 恭喜你! 到此佈告欄公告系統終於有一個完整功能 ( 新增編輯刪除 ) 的雛形, 接著就要將佈告欄公告系統與 theme_sample.php 佈景整合, 美化整個網站囉啊! 好像缺了點什麼? 認證管理啦不然, 沒有認證管理, 阿貓阿狗都可以任意新增刪除編輯, 不就成了癟腳的佈告欄公告系統, 咱們繼續努力囉, 接下來的管理認證請參考課本第 4 章 (P 4-21 P 4-28 P 4-34) 臺中市 101 年暑期教師資訊課程研習第 48 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日地點 : 岸裡 4F 電腦教室

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05