# Php動態網頁程式實作
僑光科技大學 資訊科技系
2020/02/25 ~ 2020/06/29
授課老師:高吉隆
電子信箱:[kevinkao888@gmail.com](mailto://kevinkao888@gmail.com)
---
# 課程介紹
* 課程大綱
* 每週目標
* 成績計算
* 期末報告:[連結](https://hackmd.io/J2bh06xESoaNBBULfCw_PQ?both)
----
## 課程大綱
* 完整 PHP 背景技術和語法說明
* 使用 XAMPP 整合安裝套件來安裝 Apache+PHP+MySQL 執行與測試環境
* 使用 MySQL 擴充程式 ext/mysqli 與 PDO
* 結合 MySQL 資料庫和 AJAX 技術,可輕易打造各種動態網頁效果
----
## 每週目標
* 前 9 週上課目標 (上課講解、作業繳交、測驗)
* 後 9 週上課目標 (分組討論、專題報告)
----
|日期| 前 9 週上課目標 | 備註 |
|:-:| --------------- |:--:|
| 03/02 | (1)開發環境建立PHP
| 03/09 | (2)HTML5和CSS3
| 03/16 | (3)變數型態和運算 |
| 03/23 | (4)流程控制 | (1-2)週作業、小考
| 03/30 | (5)函數與錯誤處理 |
| 04/06 | (6)陣列與字串 | (3-4)週作業、小考
| 04/13 | (7)PHP的狀態管理 |
| 04/20 | (8)伺服端檔案和郵件 |
| 04/27 | 期中考(5-6)週 | (5-6)週作業
----
| 日期 | 後 9 週上課目標 | 備註 |
|:--:| --------------- |:--:|
| 05/04 | MYSQL資料庫系統 |
| 05/11 | 建立網頁資料庫 |
| 05/18 | 資料庫分析與實作 |
| 05/25 | 分組與題目訂定 |
| 06/01 | 分組討論與分析 | 規劃報告
| 06/08 | 分組報告準備 |
| 06/15 | 分組成果報告 | 成果報告
| 06/22 | 期末彈性調整 | 04/27 06/15補課
| 06/29 | 因畢業典禮放假 | 05/27,06/03補課
----
## Php動態網頁程式實作補課公告
* 開課班級:107孝班,每週一下午13:10~16:00
* 原18週06/29(一)課程,調整至畢業典禮06/21(日)上課
* 為了讓大家星期日好安排行程,因此調整至平日時間補課
* 預訂分別在以下時間補課,原課程3小時
* 05/27(三):班會時間14:10~15:00(1小時)
* 06/03(三):班會時間13:10~15:00(2小時)
* 上課教室:圖資9樓8907
----
## 教學用書
* 書本名稱:新觀念PHP7+MySQL+AJAX網頁設計範例教本
* 出版社:旗標出版
* 作者:陳會安
![](https://im2.book.com.tw/image/getImage?i=https://www.books.com.tw/img/001/071/29/0010712911_bc_01.jpg&v=570f7f55&w=655&h=609 =350x350)
----
## 參考用書
* 書本名稱:動畫圖解資料庫系統理論-使用MariaDB、PHP、AppInventor 2實作
* 出版社:全華圖書
* 作者:李春雄
![](https://im1.book.com.tw/image/getImage?i=https://www.books.com.tw/img/001/072/85/0010728594.jpg&v=57ce4651&w=250&h=250 =350x350)
----
## 評分標準
* 平時成績:50%
* 上課互動:10% (出席狀況)
* 作業繳交:20% (第3、5、7、9週)
* 小考:20% (第4、6週)
* 期中成績:10%
* 期中考 (第9週)
* 期末成績:40%
* 規劃報告:10% (第15週)
* 期末報告:30% (第18週)
---
### 第一次小考成績統計
* 原始平均:51,最高分:90,最低分:22
* 全班加20,平均:64,不及格:21人
* 滿分:2人,超過100分,累計至其他小考成績
![](https://i.imgur.com/JXSwWaQ.png =800x430)
----
### 第二次小考成績統計
* 原始平均:52,最高分:90,最低分:16
* 全班加20,平均:67,不及格:15人
* 滿分:2人,超過100分,累計至其他小考成績
![](https://i.imgur.com/eYEBeuB.png =800x430)
----
### 期中考成績統計
* 原始平均:41,最高分:76,最低分:22
* 全班加24,平均:63,不及格:24人
* 滿分:2人,超過100分,累計至其他小考成績
![](https://i.imgur.com/eYEBeuB.png =800x430)
----
### 期末報告成績統計
* 原始平均:73.5,最高分:88,最低分:50
![](https://i.imgur.com/qIVMK41.png)
----
### 學期成績統計
* 原始平均:70.9,最高分:97,最低分:35
![](https://i.imgur.com/mdyPrDR.png)
---
## PHP主機帳號資訊
* FTP連線資訊:
* 主機:php.ocu.tw
* 登入型式:一般
* 使用者:學號@php.ocu.tw
* 密碼:學號phpocutw
![](https://i.imgur.com/FfBaFXa.png =400x230)
* 網頁連結:[https://php.ocu.tw/學號/](https://php.ocu.tw/學號/)
----
## MYSQL主機帳號資訊
* MYSQL連線資訊:
* 管理網址:[https://php.ocu.tw/mysql/](https://php.ocu.tw/mysql/)
* 使用者名稱:phpocutw_學號
* 密碼:學號phpocutw
![](https://i.imgur.com/xD20xjc.png)
----
### 老師資料表
```sql=
CREATE TABLE 老師資料表(
老師編號 varchar(5),
老師姓名 varchar(8),
研究領域 varchar(100),
PRIMARY KEY (老師編號)
)
INSERT INTO 老師資料表 VALUES
('T0001', '張三', '數位學習')
, ('T0002', '李四', '資料探勘')
, ('T0003', '王五', '知識管理')
, ('T0004', '李安', N'軟體測試')
```
----
## PHP Sample1
```php=
<?php
$DB = new mysqli("localhost", "phpocutw_10715101", "10715101phpocutw", "phpocutw_10715101");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$sql = "select 老師姓名 from 老師資料表 where 老師編號 = 'T0001'";
$data = $DB->query($sql);
if ($data->num_rows > 0) {
$obj = $data->fetch_object();
echo $obj->老師姓名."<br>";
}
?>
```
----
## PHP Sample2
```php=
<?php
$DB = new mysqli("localhost", "phpocutw_10715101", "10715101phpocutw", "phpocutw_10715101");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$sql = "select * from 老師資料表 order by 老師編號";
$data = $DB->query($sql);
while ($obj = $data->fetch_object()) {
echo $obj->老師編號.$obj->老師姓名.$obj->研究領域."<br>";
}
?>
```
----
## 網頁編輯軟體
* 下載網址:[下載](http://php.ocu.tw/download/MobiriseSetup.exe)
* 發佈設定:選擇文件夾,按[瀏覽]鈕
![](https://i.imgur.com/2bxMaJZ.png)
----
## XAMPP 環境安裝一
* XAMPP網址:[連結](https://www.apachefriends.org/zh_tw/index.html)
* 下載後安裝:[下載](https://downloadsapachefriends.global.ssl.fastly.net/7.4.2/xampp-windows-x64-7.4.2-0-VC15-installer.exe?from_af=true)
* 設定防火牆:選擇允許存取
![](https://i.imgur.com/rZrmNs0.png)
----
## XAMPP 環境安裝二
* 安裝後執行控制台:啟用 Apache
* 點選 Start 按鈕
![](https://i.imgur.com/sAc9zAj.png)
----
## XAMPP 環境安裝三
* 控制台:啟用 MySQL
* 點選 Start 按鈕
* 設定防火牆:選擇允許存取
![](https://i.imgur.com/oNk5eo0.png)
----
## XAMPP 環境測試
* 測試網址:[連結](http://localhost/)或點選 Admin
* 變更網頁:
* 使用Notepad++編輯以下網頁,儲存至以下路徑:C:\xampp\htdocs\index.php
```php=
<!DOCTYPE html>
<html>
<body>
<?php
echo "My first PHP script!";
?>
</body>
</html>
```
----
## 更換PHP程式範本
### 參考 W3Schools:[連結](https://www.w3schools.com/php)
```php=
<!DOCTYPE html>
<html>
<body>
<?php
$NowTime = "My DateTime:".date("Y-m-d H:i:s");
echo $NowTime;
?>
</body>
</html>
```
---
#### 開始撰寫HTML網頁
* 儲存至以下路徑:C:\xampp\htdocs\test.html
* 測試連結:[連結](http://localhost/test.html)
* HTML包含DOCTYPE、HTML、HEAD、BODY
``` HTML=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一個 HTML 網頁</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
```
----
#### HTML的組成
* 元素(Element)
* 標籤(Tag):Start tag / End tag
* 屬性(Attribute)
* 值(Value)
* 內容(Content)
![](https://i0.wp.com/tutoriallab.net/wp-content/uploads/2016/01/2000px-HTML_element_structure.svg_.png?fit=600%2C300&ssl=1)
----
1. DOCTYPE:HTML5規定網頁第一行必須是<!DOCTYPE html>
2. html:網頁樹枝狀結構的根元素是<html>
3. head:標示網頁的標頭
4. meta:標示網頁的編碼方式
5. title:瀏覽器的標籤文字
6. body:標示網頁的主體
7. h1:網頁內容的標題格式其中的1種
----
#### 網頁UI(User Interface)的設計原則
* 頁首:Logo、Sitemap、Menu、Icon Link
* 導覽列:Menu
* 內容區:網頁主要呈現內容的地方
* 主視覺宣傳區:Carousel(輪流播放)
* 內容區:2-4欄式呈現
* 頁尾:SiteName、Contact、Coryright、Sitemap、Icon Link
----
#### 網頁設計的風格
* 長型式風格(One-Page):[Top-Menu](https://blackrockdigital.github.io/startbootstrap-resume/)、[Left-Menu](https://blackrockdigital.github.io/startbootstrap-resume/)
* 色塊式風格:[Blockly Style](https://www.npm.gov.tw/)
* 磚牆式風格:[Blockly Style](https://carriecousins.contently.com/)
* 全版面風格
---
## HTML5 語法與常用元素
* 請參考線上教學網站:[W3Schools : www.w3schools.com](https://www.w3schools.com/)
* HTML:HTML5 / XML
* CSS:CSS3 / W3.CSS
* BOOTSTRAP:BS3 / BS4
* Client Side Script:JavaScript / JQuery
* Server Side Script:PHP / ASP / SQL / Node.js
* SQL:My SQL / MangoDB / SQL Server
* GRAPHICS / ICONS
----
### W3Schools學習重點
* 運用現成的On-Line Bible做全盤瀏覽的學習
* 需要整理好的Reference做隨時查詢的工具
* 使用上面的練習題目來熟練重點概念
* 實作線上的考題來驗證對概念的記憶程度
----
### HTML頁面結構
![](https://i.imgur.com/G2zDD7j.png)
----
### 第一次小考測驗 10%
* 2018/10/11 上課第2節課測驗
* 範圍:HTML
---
## CSS的語法介紹
* 選擇器(Selector):設定符合以下樣式之條件
* 大括弧({}):包括所有屬性之設定區塊
* 分號(;):分隔二個屬性之間的分隔符號
* 冒號(:):同一個屬性分隔屬性名稱和屬性值
* 屬性(Property):定義該屬性之名稱
* 屬性值(Value):定義該屬性之值
![](https://i.imgur.com/zi4KKun.png)
----
### Content Colors
* 使用顏色名稱:如red,HTML支援[140種](https://www.w3schools.com/colors/colors_names.asp)
* 使用RGB值:如rgb(255,0,0),[(紅、綠、藍)](https://www.w3schools.com/colors/colors_rgb.asp)
* 使用HEX值:如#ff0000,[(紅、綠、藍)](https://www.w3schools.com/colors/colors_hexadecimal.asp)
* 使用HSL值:如hsl(0,1,0.5)[(色調、飽合、亮度)](https://www.w3schools.com/colors/colors_hsl.asp)
* 使用RGBA值:如rgba(255,0,0,0.5),A為透明度
* 使用HSLA值:如hsl(0,100%,50%,50%)
* 選定顏色請參考:[W3Schools Color Picker](https://www.w3schools.com/colors/colors_picker.asp)
----
### Content Borders
* border-style:solid, dashed, dotted, double, etc
* border-width:5px, 1em, thin, medium, thick, etc
* border(Individual Sides):(順時針)
* four values:top, right, bottom, and left
* three values:top, left-right and bottom
* two values:top-bottom and left-right
* one value:all-sides
* border-radius:5px(圓角半徑)
* 案例請參考:[W3Schools CSS Borders](https://www.w3schools.com/css/css_border.asp)
----
### Box Model
* 內容(Content):放置文字或圖片的區塊
* 間隔(Padding):內容外圍與框線之間
* 框線(Border):環繞在內容之外圍
* 邊界(Margin):框線之外,與其他元件的間隔
* 範例請參考:[W3Schools Box Model](https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel)
![](https://i.imgur.com/Vp6X6nG.png =500x300)
----
### Text Styles:文字排版控制
* text-align(對齊):center, left, right and justify
* text-decoration(去除底線):none, underline, etc
* text-transform(大小寫轉換):uppercase, capitalize
* text-indent(縮排大小):50px, 2em, etc
* letter-spacing(字母間隔):3px and -3px
* word-spacing(單字間隔):50px, 2em, etc
* line-height(列高):1.0 and 1.8
* text-shadow(字陰影):3px 2px red
* 案例請參考:[W3Schools CSS Text](https://www.w3schools.com/css/css_text.asp)
----
### Text Fonts:文字字型控制
* font-family(字型):"Times New Roman", Times
* font-style(樣式):normal, italic
* font-size(字大小):
* px(像素):8px, 16px, 24px
* em(16px的倍率):0.5em, 1em, 1.5em
* %(body字大小的倍率):50%, 100%, 150%
* vw(相對於設備大小):10vw, 20vw
* font-weight(粗細):normal, bold
* font-variant:small-caps(轉換成大寫)
* 案例請參考:[W3Schools CSS Fonts](https://www.w3schools.com/css/css_font.asp)
----
### Font Awesome:請參考 [W3Schools FA](https://www.w3schools.com/icons/fontawesome_icons_intro.asp)
```xml
<i class="fa fa-car fa-2x" sytle="color:red">
```
* fa-種類:fa-car, refresh, fa-spinner, etc
* fa-倍率:fa-2x, fa-3x, fa-4x, fa-lg
* fa-spin(旋轉):fa-spinner fa-spin
* fa-pulse(8角度轉換):fa-spinner fa-pulse
* fa-rotate-旋轉角度:fa-rotate-90
* fa-flip-翻轉方向:fa-flip-horizontal
* fa-stack(多個重疊):如將二個重疊
```xml
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
```
![](https://i.imgur.com/2YDPJaQ.png)
----
### Hyper Links:網址連結設定
* 可依目前狀態,設定不同樣式
* a:link:一般正常,未瀏覽過的連結
* a:visited:已瀏覽過的連結
* a:hover:當滑鼠移至上面的連結
* a:active:當此連結正在被按下的狀態
* 請參考:[W3Schools CSS Link](https://www.w3schools.com/css/tryit.asp?filename=trycss_link)
----
### List Items:列表項目設定
* list-style-type(符號種類)
* 無編號清單ul:circle, square
* 有編號清單ol:upper-roman, lower-alpha
* list-style-image(自訂圖像):url('filename.gif')
* list-style-position(符號位置):inside, outside
* list-style(簡易合併寫法):square,inside, url('filename.gif')
* 請參考:[W3Schools CSS List](https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style)
----
### Element Display:元素顯示控制
* display: none(隱藏):不顯示
* display: inline:在同一行顯示,維持原高度
* display: block:此元素單獨一段落顯示
* display: inline-bock:在同一行顯示,可增加高度
* 請參考:[W3Schools CSS Display](https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display)
----
### Element Position:元素位置控制
* position: static:不受top/bottom/left/right作用
* position: relative:接受top/bottom/left/right作用
* position: fixed:以顯示區為基準設定固定位置
* position: absolute:以上層元件為基準設定固定位置
* 請參考:[http://zh-tw.learnlayout.com/](http://zh-tw.learnlayout.com/position.html)
----
### Element Float:元素漂浮作用
* 元去漂浮時本身不佔據空間,像是漂在空中浮在其他元素上面
* float: right:靠右漂浮
* float: left:靠左漂浮
* float: none:無漂浮作用
* clear: right:清除靠右之漂浮作用
* clear: left:清除靠左之漂浮作用
* clear: both:清除靠左靠右之漂浮作用
* 解除漂浮後的問題,可用以下程式修正
```xml
.clearfix {
overflow: auto;
}
```
----
### CSS Selectors:CSS選擇器
* 基本型:
* 元素(Element):元素名稱,如 [tag -> <tag>](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element)
* 編號(ID):#編號名稱,如 [#tel -> id="tel"](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id)
* 類別(Class):.類別名稱,如 [.no -> class="no"](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class)
* 請參考以下範例
----
CSS 選擇器:基本型範例 ![](https://i.imgur.com/nysGex2.png)
```html=
<head>
<style>
body {color: red;}
#top {color: blue;}
.intro {color: green;}
</style>
</head>
<body>
<div id="top">
<p>My name is Donald.</p>
<p class="intro">I live in Disney Park.</p>
<p class="intro">I born in 1934.</p>
</div>
<p>Nice to meet you.</p>
</body>
```
----
* 綜合型:
* 元素.類別:如 tag.no -> [<tag class="no">](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class)
* 多個類別:如 [.no1 .no2 -> class="no1 no2"](https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class2)
* 多個組合:如 [tag, .no -> <tag calss="no">](https://www.w3schools.com/css/tryit.asp?filename=trycss_grouping)
----
CSS 選擇器:綜合型範例 ![](https://i.imgur.com/YeGRU2p.png)
```html=
<head>
<style>
h1, p {color: red;}
p.title {color: blue;}
.live {color: green;}
.born {font-size: 30px;}
</style>
</head>
<body>
<h1 class="title">My Family</h1>
<div>
<p class="title">My name is Donald.</p>
<p class="live">I live in Disney Park.</p>
<p class="live born">I born in 1934.</p>
<p>Nice to meet you.</p>
</div>
</body>
```
----
### CSS Other Selectors:CSS進階型選擇器
* descendant selector(空格)
* 該下面多層所有元素皆有作用
* child selector(>)
* 該僅下面第一層元素有作用
* Adjacent Sibling Selector(+)
* 僅同層後面相鄰有作用
* General Sibling Selector(~)
* 同層後面所有元素有作用
----
CSS 選擇器:進階型範例![](https://i.imgur.com/OBtEHgJ.png)
```html=
<head>
<style>
div p {color: red;}
div > p {color: blue;}
div ~ p {color: green;}
div + p {font-size: 25px;}
</style>
</head>
<body>
<div>
<span><p class="title">My name is Donald.</p></span>
<p>I live in Disney Park.</p>
</div>
<p>I born in 1934.</p>
<p>Nice to meet you.</p>
</body>
```
----
### Selector Examples:選擇器範例圖示
![](https://www.csssolid.com/images/css-selectors-cheat-sheet.png =800x600)
----
### CSS的位置種類
* 外部(External):另存css檔案放入head->link中
```css=
<link rel="stylesheet" type="text/css" href="mystyle.css">
```
* 內部(Internal):直接寫在head->style中
```css=
<style>
</style>
```
* 元素(Inline):直接寫在tag->style中
```css=
<h1 style="color:blue;">This is a heading</h1>
```
* 多重位置優先順序:元素->內部->外部->瀏覽器預設值
---
{"metaMigratedAt":"2023-06-15T04:47:42.800Z","metaMigratedFrom":"Content","title":"Php動態網頁程式實作","breaks":"true","contributors":"[{\"id\":\"9eed60a5-6546-4dfd-8445-07f81bcfde52\",\"add\":14505,\"del\":1025}]"}