# 網頁程式設計與應用
國立台東大學 資訊工程系
授課老師: 范揚興
電子信箱:[yhfan@nttu.edu.tw](mailto://yhfan@nttu.edu.tw)
---
助教: 賴呈哲
助教電子信箱:[10711175@gm.nttu.edu.tw](mailto://10711175@gm.nttu.edu.tw)
---
[TOC]
---
# 教學目標
* 學會建立網頁伺服器開發環境
* 學會網頁表單設計與資料傳遞
* 學會日期處理與自訂函數程式設計
* 學會資料庫設計與權限設定
* 學會資料庫連結與系統程式設計
---
|週| 上課日期 | 課程主題與內容 | 備註
|:-:|:----------:| --------------- |:--:
| 1 | 2022/02/24 | 網頁程式設計與應用簡介 |
| 2 | 2022/03/03 | 網頁編碼與首頁設計 |
| 3 | 2022/03/10 | 網頁表單設計 |
| 4 | 2022/03/17 | 資料傳遞 |
| 5 | 2022/03/24 | 條件判斷式、廻圈、陣列-交網頁主題名稱 |
| 6 | 2022/03/31 | 日期處理與自訂函數程式設計 |
| 7 | 2022/04/07 | 火車票訂票表單程式設計 |
| 8 | 2022/04/14 | PHP檔案引用與header函數 |
| 9 | 2022/04/21 | 資料庫帳號設定與管理 |
| 10 | 2022/04/28 | 期中專題報告 | 30%
| 11 | 2022/05/05 | 資料庫設計與權限設定 |
| 12 | 2022/05/12 | SQL查詢語法 |
| 13 | 2022/05/19 | 資料庫函數應用 |
| 14 | 2022/05/26 | 火車票訂票系統程式設計-新增 |
| 15 | 2022/06/02 | 火車票訂票系統程式設計--查詢 |
| 16 | 2022/06/09 | 火車票訂票系統程式設計--修改 |
| 17 | 2022/06/16 | 火車票訂票系統程式設計--刪除 |
| 18 | 2022/06/23 | 期末專題報告 |
---
## 課程評分方式
* 課堂練習：10%
* 出席點名：20%
1. 缺課一節扣總分2分
2. 病假一週不扣分，第二次以後每節扣1.5分
3. 公假一週不扣分，第二次以後每節扣1分
4. 喪假不扣分
5. 事假1節扣1分
6. 遟到10分鐘內不扣分，超過以缺課扣分
7. 行動不便遟到20分鐘內不扣分，超過以缺課扣分
* 作業繳交：10%
* 期中成績：30% (期中報告)
* 專題製作：上台報告、PPT簡報
* 期末成績：30% (期末報告)
* 專題製作：上台報告、PPT簡報
---
# 程式下載
* Putty : https://www.putty.org/
* WinSCP : https://winscp.net/eng/download.php
* Notepad++ : https://notepad-plus-plus.org/downloads/
---
# Week 2 (2022/03/03)
## 介紹使用程式語言
1. HTML：HyperText Markup Language
2. CSS：Cascading Style Sheets
3. 使用者端Script：JavaScript、Python
4. 伺服器端Script：PHP、ASP/ASP.Net、JSP、CGI
----
## 撰寫 index.htm
* HTML包含DOCTYPE、Html、head、body
``` HTML=
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/myimg.js"></script>
</head>
<body onload="playimg();">
<center><h1>資工四甲賴呈哲</h1></center>
<div id="mydiv" ></div>
</body>
</html>
```
----
1. body onload : onload 事件在頁面載入完成後出現。
2. html：網頁樹枝狀結構的根元素是
3. head：標示網頁的標頭
4. meta：標示網頁的編碼方式
5. title：瀏覽器的標籤文字
6. body：標示網頁的主體
7. h1：網頁內容的標題格式其中的1種
----
## 撰寫 myimg.js
* 照片輪放程式碼，檔案需存 xxx.js
```javascript=
var jsimg = new Array("images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg");
var imgLen = jsimg.length;
var i = 0;
setInterval("playimg()", 5000);
function playimg() {
document.getElementById("mydiv").innerHTML = "<center><img height='65%'src='" + jsimg[i] + "'></center>";
i++;
if (i >= imgLen) i = 0;
}
```
----
# Week 3 (2022/03/10)
## 手動切換照片
## 撰寫切換Index首頁
``` HTML=
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/myimg.js"></script>
<title>資工四甲賴呈哲</title>
<style>
#box{
width: 720px;
height: 600px;
margin: 0 auto;
position: relative;
border: 5px solid black;
margin-top: 10px;
}
img{
width: 100%;
height: 100%;
}
#left{
position: absolute;
top:290px;
left:0px;
}
#right{
position: absolute;
top: 290px;
right:0px;
}
button{
margin: 5px;
}
</style>
</head>
<body onload="playimg();">
<center><h1>資工四甲賴呈哲</h1></center>
<div id="box">
<div id="mydiv" ></div>
<div id="left" onclick="left()">
<button>前一張</button>
</div>
<div id="right" onclick="right()">
<button>下一張</button>
</div>
<center><a href="form.htm">會員申請</a></center>
</div>
</body>
</html>
```
----
## 撰寫Javascript
* 照片輪放切換程式碼，檔案需存 xxx.js
```javascript=
var jsimg = new Array("images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg");
var imgLen = jsimg.length;
var i = 0;
setInterval("playimg()", 5000);
function playimg() {
document.getElementById("mydiv").innerHTML = "<center><img src='" + jsimg[i] + "'></center>";
i++;
if (i >= imgLen) i = 0;
}
//左
function left() {
i--;
if (i < 0) i = imgLen - 1;
document.getElementById("mydiv").innerHTML = "<center><img src='" + jsimg[i] + "' </center>";
}
//右
function right() {
document.getElementById("mydiv").innerHTML = "<center><img src='" + jsimg[i] + "' </center>";
i++;
if (i >= imgLen) i = 0;
}
```
----
# Week 4 (2022/03/17)
## 表單
## Form.htm
``` HTML=
<html>
<head>
<meta charset="utf-8">
<title>表單</title>
<script type="text/javascript" src="js/myimg.js"></script>
</head>
<body>
<form action="form.php" method="post">
"帳號:"
<input type="text" name="uid"><br>
"密碼:"
<input type="password" name="pw"><br>
"性別:"
<input type="radio" name="gender" value = "1">男
<input type="radio" name="gender" value = "0">女
<br>
"縣市:"
<select name="city">
<option value="02">台北市
<option value="04">台中市
<option value="07">高雄市
</select>
<br>
<input type="date" name="mydate">
"留言:"
<textarea cols="10" rows="5" name="gossip">
</textarea>
<br>
<input type="submit" value="送出">
</form>
</body>
</html>
```
----
## Form.php
``` HTML=
<?php
$uid = $_POST['uid'];
$pw = $_POST['pw'];
$gender = $_POST['gender'];
$city = $_POST['city'];
$mydate = $_POST['mydate'];
$gossip = $_POST['gossip'];
//echo "帳號: " . $uid . "<br>";
//echo "密碼: " . $pw . "<br>";
function gen($gender){
if($gender == 1){
return "男";
}
else
return "女";
}
function tcity($city){
switch($city){
case "02":
return "台北市";
case "04":
return "台中市";
case "07":
return "高雄市";
default;
}
}
if($uid == "123456"){
if($pw == "30678"){
echo "login successful <br>";
echo "性別: " . gen($gender) . "<br>";
echo "縣市: " . tcity($city) . "<br>";
echo "日期: " . $mydate . "<br>";
echo "留言: " . $gossip . "<br>";
}
else
echo "login password fail";
}
else
echo "帳號密碼錯誤";
?>
```
---
# Week 5 (2022/03/24)
## 資料庫指令
**使用 Putty連線
IP: web.nttu.edu.tw**
---
**1.登入**
**2.進入MySQL**
輸入自己的帳號，例如:s66，輸入密碼不會顯示
:::info
$ mysql -u sXX -p
:::
**3.查詢Database並進入**
:::info
show databases;
:::
:::info
use sXX
:::
:::info
show tables;S
:::
**4.建立一個資料表**
:::warning
老師給的word有錯誤，所以跟著打會失敗
AUTO_INCREMENT是寫在資料限制的位置，代表他是資料限制的指令，AUTO_INCREMENT的意思是自動累加
:::
:::info
create table member (
uid int auto_increment primary key,
username char(20)
);
:::
ㄋ
**5.查詢是否有建立成功**
:::info
show tables;
:::
:::info
show columns from member;
:::
**6.新增資料並查詢**
:::info
insert into member(username) values(‘dog’);
insert into member(username) values(‘cat’);
insert into member(username) values(‘cow’);
:::
:::info
select * from member;
:::
**6.修改&刪除**
:::info
update member set username='cat' where uid=1;
:::
刪除資料一個資料
:::info
delete from member where uid=3;
:::
刪除資料表資料
:::info
delete from member;
:::
## Form.htm
Sign in with Wallet
Connect another wallet