---
# System prepended metadata

title: 網頁程式設計與應用

---

# 網頁程式設計與應用
國立台東大學 資訊工程系
授課老師: 范揚興
電子信箱:[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.登入**
![](https://i.imgur.com/2ximY6u.png)

**2.進入MySQL**
輸入自己的帳號，例如:s66，輸入密碼不會顯示
:::info
$ mysql -u sXX -p
:::
![](https://i.imgur.com/wYZZs9p.png)

**3.查詢Database並進入**
:::info
show databases; 
:::
![](https://i.imgur.com/udIuNfK.png)
:::info
use sXX 
:::
![](https://i.imgur.com/xYMUF4M.png)

:::info
show tables;S
:::
![](https://i.imgur.com/nJUbgJB.png)

**4.建立一個資料表**
:::warning
老師給的word有錯誤，所以跟著打會失敗

AUTO_INCREMENT是寫在資料限制的位置，代表他是資料限制的指令，AUTO_INCREMENT的意思是自動累加
:::
:::info
create table member (
            uid int auto_increment primary key,
            username char(20)
            );
:::
![](https://i.imgur.com/MWXjIIw.png)ㄋ

**5.查詢是否有建立成功**

:::info
show tables;
:::
![](https://i.imgur.com/gz2KCc1.png)

:::info
show columns from member;
:::
![](https://i.imgur.com/IVMjmVR.png)

**6.新增資料並查詢**
:::info
insert into member(username) values(‘dog’);
insert into member(username) values(‘cat’);
insert into member(username) values(‘cow’);
:::
![](https://i.imgur.com/MEFqEyJ.png)

:::info
select * from member;
:::
![](https://i.imgur.com/te2HDl3.png)

**6.修改&刪除**
:::info
update member set username='cat' where uid=1;
:::
![](https://i.imgur.com/P47pJx3.png)

刪除資料一個資料
:::info
delete from member where uid=3;
:::
![](https://i.imgur.com/E2ax61S.png)

刪除資料表資料
:::info
delete from member;
:::
![](https://i.imgur.com/cOdWncY.png)






## Form.htm
