新增伺服器行為

Report
網頁設計乙級技術士技能檢定術科
大綱
測驗簡介
網站架構及版型製作
建立資料庫及連線
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 phpinfo();?>
說明:php 程式需包含在 <?php
12
?> 之中
安裝成功畫面
 打開瀏灠器,輸入本機網址 localhost,安裝成功則會顯示 如下圖。
13
Dreamweaver 建立伺服器網站
14
Dreamweaver 伺服器設定
15
Dreamweaver 伺服器設定
16
網站前置作業
網站資料夾下新增子目錄
 css
 js
 images
複製版型檔案底下
 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
29
NAMES UTF8");
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 src="counter.php" width="250px" height="300px"
frameborder="0" scrolling="no"></iframe>
iframe 語法:
<iframe src="嵌入目標" width="寬度" height="高度"
frameborder="邊框參數" scrolling="卷軸參數"></iframe>
37
使用者登入
38
建立 user 資料表
39
新增登入錯誤頁面
新增 login_err.php
header("Refresh: 0; url=login.php")
40
建立表單
插入→表單
新增「伺服器行為」
41
伺服器行為設定
登入使用者
42
管理者登出及限制存取頁面
01P03.dwt.php 選管理登出 button
 新增伺服器行為→管理者登出
• 注意:看程式碼有沒有在 <head></head>中間
 新增伺服器行為→限制存取頁面
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
 <form method="post" action="title_update.php">
 如果有 target= back 要拿掉
新增title_update.php
 新增伺服器行為→資料集
55
取得 Radio 的值
56
取得 CheckBox 的值
57
最新消息
58
最新消息樣式
開新檔案→使用樣版:01P03.dwt.php
複製 01P02.htm 的最新消息區程式碼
59
最新消息區樣式
使用方式
60

similar documents