# 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網頁設計範例教本
* 出版社：旗標出版
* 作者：陳會安
----
## 參考用書
* 書本名稱：動畫圖解資料庫系統理論－使用MariaDB、PHP、AppInventor 2實作
* 出版社：全華圖書
* 作者：李春雄
----
## 評分標準
* 平時成績：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分，累計至其他小考成績
----
### 第二次小考成績統計
* 原始平均：52，最高分：90，最低分：16
* 全班加20，平均：67，不及格：15人
* 滿分：2人，超過100分，累計至其他小考成績
----
### 期中考成績統計
* 原始平均：41，最高分：76，最低分：22
* 全班加24，平均：63，不及格：24人
* 滿分：2人，超過100分，累計至其他小考成績
----
### 期末報告成績統計
* 原始平均：73.5，最高分：88，最低分：50
----
### 學期成績統計
* 原始平均：70.9，最高分：97，最低分：35
---
## PHP主機帳號資訊
* FTP連線資訊：
* 主機：php.ocu.tw
* 登入型式：一般
* 使用者：學號@php.ocu.tw
* 密碼：學號phpocutw
* 網頁連結：[https://php.ocu.tw/學號/](https://php.ocu.tw/學號/)
----
## MYSQL主機帳號資訊
* MYSQL連線資訊：
* 管理網址：[https://php.ocu.tw/mysql/](https://php.ocu.tw/mysql/)
* 使用者名稱：phpocutw_學號
* 密碼：學號phpocutw
----
### 老師資料表
```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)
* 發佈設定：選擇文件夾，按[瀏覽]鈕
----
## 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)
* 設定防火牆：選擇允許存取
----
## XAMPP 環境安裝二
* 安裝後執行控制台：啟用 Apache
* 點選 Start 按鈕
----
## XAMPP 環境安裝三
* 控制台：啟用 MySQL
* 點選 Start 按鈕
* 設定防火牆：選擇允許存取
----
## 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)
----
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頁面結構
----
### 第一次小考測驗 10%
* 2018/10/11 上課第2節課測驗
* 範圍：HTML
---
## CSS的語法介紹
* 選擇器(Selector)：設定符合以下樣式之條件
* 大括弧({})：包括所有屬性之設定區塊
* 分號(;)：分隔二個屬性之間的分隔符號
* 冒號(:)：同一個屬性分隔屬性名稱和屬性值
* 屬性(Property)：定義該屬性之名稱
* 屬性值(Value)：定義該屬性之值
----
### 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)
----
### 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>
```
----
### 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 選擇器：基本型範例 
```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 選擇器：綜合型範例 
```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 選擇器：進階型範例
```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：選擇器範例圖示
----
### 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}]"}