# 資料庫程式設計
僑光科技大學 資訊科技系
2018/09/17 ~ 2019/01/14
授課老師：高吉隆
電子信箱：[kevinkao888@gmail.com](mailto://kevinkao888@gmail.com)
---
## 課程大綱
* 資料庫的程式設計
* 資料庫的函數使用
* 資料庫的自訂函數
* 資料庫的子查詢
* 資料庫的JOIN查詢
* 資料庫的專題實作
----
### 每週上課目標
* 前 9 週上課目標（觀念講解、上課練習）
* 後 9 週上課目標（分組練習、專題報告）
----
| 週| 上課日期 | 前 9 週上課目標 | 備註
|:-:|:---------:|------------|:--:
| 1 | 107/09/17 |課程設計與簡介|
| 2 | 107/09/24 |中秋節放假一天|
| 3 | 107/10/01 |資料庫之安裝與建立|
| 4 | 107/10/08 |動態網頁程式(PHP)|
| 5 | 107/10/15 |資料庫的查詢|小考一
| 6 | 107/10/22 |資料庫的函數使用|
| 7 | 107/10/29 |資料庫的自訂函數|
| 8 | 107/11/05 |資料庫網頁之實作|小考二
| 9 | 107/11/12 |期中考|30%
----
| 週 | 上課日期 | 後 9 週上課目標 | 備註
|:--:|:----------:| --------------- |:--:
| 10 | 107/11/19 | 分組討論與題目訂定 |
| 11 | 107/11/26 | 資料庫規畫、分析 |
| 12 | 107/12/03 | 資料庫建置與測試資料 |
| 13 | 107/12/10 | 資料庫實作之問題討論 |
| 14 | 107/12/17 | 資料庫實作之問題解決 |
| 15 | 107/12/24 | 分組報告之書面資料 |作業
| 16 | 108/12/31 | 專題實作：上機操作 |
| 17 | 108/01/07 | 期末專題成果展示 |
| 18 | 108/01/14 | 期末專題成果展示 |30%
----
### 課程評分方式
* 平時成績：30% (上課互動+二次小考)
* 上課互動：10%
* 第一次小考：10% (107/10/15) PHP
* 第二次小考：10% (107/10/29) MYSQL
* 期中成績：30% (上機測驗)
* 考試範圍：PHP、MYSQL
* 期末成績：40% (期末報告)
* 第一次作業：10% (108/01/14) 書面報告
* 專題製作：30% (108/01/14)上台報告、PPT簡報
----
### 使用教科書
* 書名：最新PHP+MYSQL+AJAX網頁程式設計
* 出版社：旗標
* 作者：施威銘研究室
----
### 網路資源
* 網站：W3Schools
* 網址：[https://www.w3schools.com/](https://www.w3schools.com/)
* 主題：PHP、MYSQL
---
### XAMPP安裝
* 主要包括以下套件
* Apache、PHP、MySQL
* https://www.apachefriends.org/zh_tw/index.html
* 打開xampp控制台(Apache, MySQL->Start)
---
### 編輯PHP與測試
* 開啟Apache：按(Start)
* 編輯PHP程式：安裝NotePad++([下載](https://notepad-plus-plus.org/repository/7.x/7.5.8/npp.7.5.8.Installer.x64.exe))
* 儲存PHP程式：於(C:\xampp\htdocs\index.php)
* 執行PHP程式：按(Admin)
----
### 案例演練
* 以下參考教學網站：[http://www.twhappy.com/](http://www.twhappy.com/)
* 請將每個範例存成 ex01.php ~ exXX.php
* 練習1：PHP基本語法([範冽2](http://www.twhappy.com/index.php?action=show&no=100))
* 練習2：PHP註解語法([範冽3](http://www.twhappy.com/index.php?action=show&no=101))
* 練習3：變數的使用([範冽4](http://www.twhappy.com/index.php?action=show&no=102))
* 練習4：字串和數字運算子([範冽5](http://www.twhappy.com/index.php?action=show&no=103))
* 練習5：比較和邏輯運算子([範冽6](http://www.twhappy.com/index.php?action=show&no=104))
* 範例6：判斷控制結構([範冽7-9](http://www.twhappy.com/index.php?action=show&no=105))
----
### 第一次小考成績
* 最高分：99，最低分：30
* 平均分：64，全加分：5，其中有1題修正：±3
----
### 第二次小考成績
* 平均：60，加分：8
----
### 期中考成績
* 平均：78
---
### 隨堂練習：建立資料表(Student)
* 進入test資料庫，手動建立Student資料表
* 設定編碼：utf8mb4_unicode_ci
* 建立StudentNo欄位：varchar(10)
* 建立StudentName欄位：varchar(10)
* 建立Height欄位：int
* 建立Weight欄位：int
* 執行SQL指令：快速建立方式
```javscript=
CREATE TABLE Student (
StudentNo varchar(10) NOT NULL,
StudentName varchar(10) NOT NULL,
Height int NOT NULL,
Weight int NOT NULL
) CHARSET=utf8mb4 COLLATE utf8mb4_unicode_ci;
```
----
### 隨堂練習：匯入資料
* 手動新增資料
* 匯入CSV文字檔
* 開啟test.xlsx檔：[下載](https://my.ocu.tw/db/test.xlsx)
* 另存新檔：選擇csv檔案格式(Student.csv)
* NotePad++：轉換至UTF-8格式並存檔([下載](https://my.ocu.tw/db/test.csv))
* 資料表匯入
* 選擇檔案
* 欄位名稱：StudentNo,StudentName
* 執行
----
### 隨堂練習：函數使用
* 產生亂數身高：150 ~ 180
* 產生亂數體重：50 ~ 80
* 使用內建函數
* round()：四捨五入
* rand()：0~1間產生亂數
```sql=
Update Student set Height = 150 + round(rand() * 30);
Update Student set Weight = 50 + round(rand() * 30);
```
----
#### 建立預存程序BMI
* 定義：體重/(身高/100)/(身高/100)
* 手動建立：
* 預存程序名稱：BMI
* 型態：FUNCTION
* 參數：Height(int)、Weight(int)
* 回傳值類型：int
* 定義：RETURN Weight / Power(Height/100, 2)
* 執行SQL指令：
```sql=
CREATE FUNCTION BMI(Height INT, Weight INT)
RETURNS int(11)
RETURN Weight / Power(Height/100, 2);
```
----
----
### 隨堂練習：函數使用
* 建立函數BMI_TEXT(Function)
* 輸入參數：BMI
* 回傳：過重/超過25
* 回傳過輕：低於18
* 回傳標準：其他
* 回傳字串：varchar(10)
```sql=
RETURN
CASE
WHEN BMI > 25 THEN '過重'
WHEN BMI < 18 THEN '過輕'
ELSE '標準'
END;
```
----
#### 隨堂練習：函數回傳
* 執行SQL指令
```sql=
CREATE FUNCTION BMI_TEXT(BMI int)
RETURNS VARCHAR(10) CHARSET utf8mb4
RETURN
CASE
WHEN BMI > 25 THEN '過重'
WHEN BMI < 18 THEN '過輕'
ELSE '標準'
END;
```
----
----
* 檢驗結果
#### 隨堂練習：函數使用
```javascript=
SELECT *, BMI(Height, Weight) as BMI, BMI_TEXT(BMI(Height, Weight)) as BMI_TEXT from student
```
---
### 隨堂練習：MySQL vs MySQLi
||MySQL|MySQLi
|-|:-:|:-:|
|PHP版本支援|5.5以前|5以後
|預存程序Stored Procedure|不支援|支援
|預備指令Prepared Statements|不支援|支援
|多行指令Multiple Statements|不支援|支援
|物件導向Object Oriented|不支援|支援
|交易操作Transactions|不支援|支援
----
#### 隨堂練習：新增紀錄(PHP+MYSQL)
* 以下隨堂練習：PHP原始碼([下載](https://my.ocu.tw/db/student.zip))
* 新增PHP檔至：C:\xampp\htdocs\insert.php
* 貼上以下原始碼：新增一筆紀錄
```php=
<?php
$DB = new mysqli("localhost", "root", "", "test");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$sql = "insert into Student values ('12345678', '測試', 170, 70)";
$DB->query($sql);
echo "已新增！";
?>
```
* 執行以下網址測試：[http://localhost/insert.php](http://localhost/insert.php)
----
#### 隨堂練習：刪除紀錄(PHP+MYSQL)
* 新增PHP檔至：C:\xampp\htdocs\delete.php
* 貼上以下原始碼：刪除紀錄
```php=
<?php
$DB = new mysqli("localhost", "root", "", "test");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$sql = "delete from Student where StudentNo = '12345678'";
$DB->query($sql);
echo "已刪除！";
?>
```
* 執行以下網址測試：[http://localhost/delete.php](http://localhost/delete.php)
----
#### 隨堂練習：修改紀錄(PHP+MYSQL)
* 新增PHP檔至：C:\xampp\htdocs\update.php
* 貼上以下原始碼：修改紀錄
```php=
<?php
$DB = new mysqli("localhost", "root", "", "test");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$sql = "Update Student set Height = 140 + round(rand() * 50);";
$DB->query($sql);
echo "已修改！";
?>
```
* 執行以下網址測試：[http://localhost/update.php](http://localhost/update.php)
----
#### 隨堂練習：回傳值(PHP+MYSQL)
* 新增PHP檔至：C:\xampp\htdocs\count.php
* 貼上以下原始碼：回傳一欄值
```php=
<?php
$DB = new mysqli("localhost", "root", "", "test");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$sql = "select count(*) as No from Student";
$object = $DB->query($sql)->fetch_object();
echo $object->No."<br>";
$row = $DB->query($sql)->fetch_row();
echo $row[0]."<br>";
$assoc = $DB->query($sql)->fetch_assoc();
echo $assoc[No]."<br>";
$array = $DB->query($sql)->fetch_array();
echo $array[0]."<br>";
echo $array[No]."<br>";
?>
```
* 執行以下網址測試：[http://localhost/count.php](http://localhost/count.php)
----
#### 隨堂練習：回傳所有紀錄(PHP+MYSQL)
* 新增PHP檔至：C:\xampp\htdocs\list.php
* 貼上以下原始碼：回傳紀錄值
```php=
<?php
$DB = new mysqli("localhost", "root", "", "test");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$Data = $DB->query("select * from Student");
while ($myrow = $Data->fetch_assoc()) {
echo $myrow["StudentNo"];
echo " ".$myrow["StudentName"]."<br>";
}
?>
```
* 執行以下網址測試：[http://localhost/list.php](http://localhost/list.php)
----
#### 隨堂練習：回傳紀錄套用表格(PHP+MYSQL)
* 新增PHP檔至：C:\xampp\htdocs\table.php
* 參考以下原始碼：([連結](https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_table_striped&stacked=h))
```htmlmixed=
<table class="table table-striped">
<thead>
<tr>
<th>學號</th>
<th>姓名</th>
<th>身高</th>
<th>體重</th>
<th>ＢＭＩ</th>
<th>標準</th>
</tr>
</thead>
<tbody>
<?php
$DB = new mysqli("localhost", "root", "", "test");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$Data = $DB->query("select *, BMI(Height, Weight) as BMI, BMI_TEXT(BMI(Height, Weight)) as BMI_TEXT from Student");
while ($myrow = $Data->fetch_object()) {
echo "<tr>";
echo "<td>$myrow->StudentNo</td>";
echo "<td>$myrow->StudentName</td>";
echo "<td>$myrow->Height</td>";
echo "<td>$myrow->Weight</td>";
echo "<td>$myrow->BMI</td>";
echo "<td>$myrow->BMI_TEXT</td>";
echo "</tr>";
}
?>
</tbody>
</table>
```
* 執行以下網址測試：[http://localhost/table.php](http://localhost/table.php)
---
### 期末報告進行方式
* 分組：2-4人一組
* 題目：僑光資科系網站
* 資料：舊網站、老師收集
* 工具：Joomla(CMS)/Mobirize
|主題內容|主題內容|主題內容|主題內容|
|:-:|:-:|:-:|:-:|
|首頁編排|佈景製作|認識資科|師資陣容|
|課程資訊|專業教室|實驗室|榮譽榜|
|法規流程|表單下載|資訊志工|學生輔導|
|充電站|產學合作|
---
### Joomla 製作方式
* 參考網站：[產業人才培育平台](http://hr.ocu.tw/index.php/home)
* 下載：XAMPP(Apache、MySQL、PHP)[下載](https://www.apachefriends.org/zh_tw/index.html)
* 於php.ini中修改
* max_execution_time = 3000
* upload_max_filesize = 10M
* 啓動Apache、啓動MySQL
* Joomla：[原廠連結](https://downloads.joomla.org/)
* 解壓縮後複製至 c:\xampp\htdocs\ 中
* 執行安裝程式：[http://localhost/](http://localhost/)
----
#### 執行安裝程式：[http://localhost/](http://localhost/)
----
#### 設定資料庫
----
#### 預覽網站
----
#### 安裝多國語言套件
----
#### 選擇 Chinese Traditional
----
#### 前台和後台都選擇繁體中文
----
#### 移除安裝資料夾
----
#### 前台預覽：[http://localhost/](http://localhost/)
----
#### 後台登入：[http://localhost/administrator/](http://localhost/administrator/)
----
#### 後台預覽
---
### 安裝Jumi模組
* 下載Jumi模組：[下載](https://my.ocu.tw/db/student.zip)
----
#### 執行Jumi模組
----
#### 新增Jumi應用程式
* 新增Jumi
----
#### 新增選單項目
* 選單->Main Menu->新增選單項目
* 選擇類型->Jumi Application，標題輸入：Hello
* Jumi Application：選擇hello
----
#### 修改為學生資料表
* 開啟Jumi Application：Hello
* 編輯Custom Script內容：修改資料庫名稱
* 複製以下內容，並貼上
```javascript=
<table class="table table-striped table-hover">
<thead>
<tr>
<th>學號</th>
<th>姓名</th>
<th>身高</th>
<th>體重</th>
<th>ＢＭＩ</th>
<th>標準</th>
</tr>
</thead>
<tbody>
<?php
$DB = new mysqli("localhost", "root", "", "myweb");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$Data = $DB->query("select *, BMI(Height, Weight) as BMI, BMI_TEXT(BMI(Height, Weight)) as BMI_TEXT from Student");
while ($myrow = $Data->fetch_object()) {
echo "<tr>";
echo "<td>$myrow->StudentNo</td>";
echo "<td>$myrow->StudentName</td>";
echo "<td>$myrow->Height</td>";
echo "<td>$myrow->Weight</td>";
echo "<td>$myrow->BMI</td>";
echo "<td>$myrow->BMI_TEXT</td>";
echo "</tr>";
}
?>
</tbody>
</table>
```
---
### 使用Joomla免費樣板工具
* Joomla Demo Site：[連結](https://demo.ocu.tw/)
* Joomla Demo Administrator：[連結](https://demo.ocu.tw/administrator/)
* 帳號：demo，密碼：demo
* Helix Ultimate：[連結](https://www.joomshaper.com/downloads/template/helixultimate)
* Template Download：[下載](https://www.joomshaper.com/downloads/template/helixultimate/download/2-template)
* Quickstart Pack Download：[下載](https://www.joomshaper.com/downloads/template/helixultimate/download/1-quickstart-pack)
* Quickstart Pack Demo：[連結](http://demo.ocu.tw/web/)
* Quickstart Pack Administrator：[連結](http://demo.ocu.tw/web/administrator/)
* 帳號：demo，密碼：demo
----
#### Helix Ultimate功能說明-1
* Basic Setting：
* Logo：Image/Text
* Header：Sticky Header Switch
* Body：Boxed/Full Width
* Footer：Copyright Setting
* Social Icons：FB/Google+/LinkIn/IG/Youtube
* Contact Info：Phone/Mobile/EMail/Opening Hours
----
#### Helix Ultimate功能說明-2
* Layout Builder：
* Header Type：Header Switch
* Layout：Move Position
* Grid：Width Setting
* Row：Fluid Width/Padding/Margin
* Navigation：
* Mega Menu：Menu Type/Off-Canvas Position
----
### 使用Joomla免費Source Code工具
* Sourcerer：[連結](https://extensions.joomla.org/extension/sourcerer/)
* 文章->新增文章：輸入標題TEST1->內容如下
```javascript=
TEST
{source}
<h1>TEST1</h1>
<?php
echo "現在時間是：".date("Y-m-d H:i:s");
?>
{/source}
```
* 選單->Main Menu新增選單項目：輸入標題->選單類型(文章->單一文章->選擇文章TEST1)
----
### Sourcerer範例說明
* 下載資料庫檔案：[下載](http://demo.ocu.tw/download/Teacher.zip)
* 進入phpMyAdmin：選擇資料庫->匯入
* ->選擇Teacher.sql->執行
* 修改文章TEST1：內容如下：
```javascript=
{source}
<div class="container-fluid">
<div class="row">
<?php
$DB = new mysqli('localhost', 'root', '', 'test');
if ($DB->connect_errno) exit();
$DB->set_charset('utf8');
$Data = $DB->query("Select TeacherName, WorkName from Teacher where WorkType = '專任' order by SeqNo");
while ($object = $Data->fetch_object()) {
?>
<div class="col-sm-6 col-md-4 col-lg-3" style="background-color:lavender;">
<div class="card" style="width:100%">
<img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
<div class="card-body">
<h3 class="card-title"><?php echo $object->TeacherName ?></h4>
<h6 class="card-text"><?php echo $object->WorkName ?></p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
{/source}
```
----
### 使用Joomla免費Smart Slider 3工具
* SP Builder Lite：[連結](https://www.joomshaper.com/downloads/extension/sp-page-builder-free)
* SP Builder Lite Download：Login to download
* SP Builder Lite Download：[下載](http://my.ocu.tw/db/com_sppagebuilder_lite_v3.2.9.zip)
* SP Builder Try it Free：[連結](https://try.sppagebuilder.com/index.php/1-home/edit)* Smart Slider 3：[連結](https://smartslider3.com/)
* Smart Slider 3 Download：[下載](https://smartslider3.com/free-joomla-slider/)
{"metaMigratedAt":"2023-06-14T18:16:27.772Z","metaMigratedFrom":"Content","title":"資料庫程式設計","breaks":true,"contributors":"[{\"id\":\"9eed60a5-6546-4dfd-8445-07f81bcfde52\",\"add\":20135,\"del\":6657}]"}