Transcript 新增伺服器行為
網頁設計乙級技術士技能檢定術科
大綱
測驗簡介 網站架構及版型製作 建立資料庫及連線 Session 網站人數計數器 使用者登入 建置網站標題區 圖片上傳及縮圖 最新消息
2
測驗簡介
3
題組一
主題：17300-102201「卓越科技大學校園資訊 系統」網站 測驗時間：240分鐘 重點技巧： 速度→熟練步驟、資料表、流程 善用資源→題組內原有的程式碼、樣版
4
實作環境及工具
伺服器端 (Server)： XAMAPP • PHP • MySQL • Apache 客戶端 (Client)： JavaScript CSS HTML 網頁編輯器 Dreamweaver
5
網站架構及版型製作
6
網站架構
網站功能 網站標題區 動態文字廣告區 動畫圖片輪播區 校園映像區 進站總人數區 頁尾版權區 最新消息區 管理登入按鈕功能 管理者帳號管理功能 選單管理功能
7
版型規劃-前台 8
版型規劃-前台 9
設定網站根目錄
打開 XAMAPP→選擇Apache的Config→httpd.conf
10
Apache 設定檔
在記事開啟 編輯\尋找 對話框中輸入「DocumentRoot 」。 將1及2的路徑改為「D:/webXX」，重新啟動 Apache (stop→start)
11
測試伺服器是否安裝成功
在D底下建立一個webXX的資料夾，新增 index.php
建入以下程式碼 說明：php 程式需包含在
12 ?>
之中
安裝成功畫面
打開瀏灠器，輸入本機網址 localhost，安裝成功則會顯示 如下圖。
13
Dreamweaver 建立伺服器網站 14
Dreamweaver 伺服器設定 15
Dreamweaver 伺服器設定 16
網站前置作業
網站資料夾下新增子目錄 js images 複製版型檔案底下 css 01P01.htm
及 網站目錄。 01P03.htm
至 Administrator Login_files 下檔案至相對位置。 底
17
建立樣版 (Tamplate)-前台 18
修改嵌入檔案之路徑 19
可編輯區域
網頁中不固定的區域
20
製作範本
插入→範本物件→可編輯區域 存檔
21
建立樣版 (Tamplate)-後台 22
建立資料庫及連線
23
新增資料庫 24
phpMyAdmin 新增資料庫
資料庫名稱：webXX 編碼選擇：utf8_unicode_ci
25
MySQL資料欄位型態(1/2) 26
MySQL資料欄位型態(2/2) 27
建立資料庫連線
資料庫→ + → MySQL 連線
28
建立資料庫連線
網站資料夾/Connections/connTest.php
中文設定 • $ result = mysql_query("SET NAMES UTF8");
29
SESSION 網站人數計數器
30
計數器資料表
建立資料表 Counter
31
Session 網站人數計數器
建立一個新檔案 counter.php，並建立資料繫結 RecordsetCounter
32
Session 網站人數計數器
顯示進站總人數 在 counter.php
頁面程式碼表頭加上 session
33
啟用 Session
if (!isset($_SESSION)) { session_start(); }
34
更新人數計數資料表
新增程式碼：若Session為空則將進站人數加1
35
網站人數計數器結果
顯示結果 (重新整理進站總人數不會增加)
36
嵌入網站人數計數器
將計數器嵌入至頁面中 在01P01.dwt.php中插入
iframe
語法：
37
使用者登入
38
建立 user 資料表 39
新增登入錯誤頁面
新增 login_err.php
header("Refresh: 0; url=login.php")
40
插入→表單
建立表單
新增「伺服器行為」
41
登入使用者
伺服器行為設定 42
管理者登出及限制存取頁面
01P03.dwt.php 選管理登出 button 新增伺服器行為→管理者登出 • 注意：看程式碼有沒有在
中間 新增伺服器行為→限制存取頁面43
建置網站標題區
44
新增資料表及樣版使用
建立 title 資料表 開新檔案，使用樣版：01P03.dwt.php
複製原使檔 01P03.htm的中間區域
45
圖片上傳及縮圖
46
插入表單 檔案欄位 文字欄位 按鈕
新增表單 47
插入記錄
新增伺服器行為 48
PHP 檔案上傳相關語法
$_FILES['file']['name']：上傳檔案的原始名稱。 $_FILES['file']['type']：上傳的檔案類型。 $_FILES['file']['size']：上傳的檔案原始大小。 $_FILES['file']['tmp_name']：上傳檔案後的暫存資料夾位置。 $_FILES ['file'][' error '] ：若檔案上傳有錯誤，則顯示錯誤代碼。
49
錯誤處理及檔名寫入資料庫
修改程式碼，將檔案的名稱寫入資料庫
if($_FILES['file']['error']>0){ exit("
檔案上傳失敗！
");//
如果出現錯誤則停止程式
} $_FILES['file']['name'] 50
設定路徑及複製檔案
在寫入資料之前檢查檔案是否上傳成功
$path = "file/title/" move_uploaded_file($_FILES['file']['tmp_name'],$path.$_FI LES['file']['name']);//
複製檔案 move_uploaded_file( 來源 , 目的地 );
51
產生縮圖及存檔
長寬及儲放位置依題目調整
52
設定導頁
header("Location:c.php" ) 頁面在執行B.php之後就會馬上導到C.php
header("Refresh: 0; url=c.php") 瀏覽器會在B.php停頓，然後在導到C.php
53
資料呈現
新增伺服器行為 重覆區域 插入影像預留位置 資料集 設定資料來源 插入→表單的「核取方塊」enable、「選項按鈕」 delete
54
更新資料
title_mang.php
如果有 target= back 要拿掉 新增title_update.php