Show toolbar

2014年5月2日 星期五

A Message Board Homework

標題：留言板作業
PHP (index.php)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
/**************************************************
File：index.php
Name：首頁
Explain：首頁功能
****************************************By QQBoxy*/
require('session.php');
require('database.php');
require('common.php');
$output = "";
$p = !empty($_GET['p']) ? $_GET['p'] : 'signin';
$main = new main();
$output .= $main->htmlHeader();
switch($p) {
case 'install': //安裝，第一次可以把註解拿掉用來安裝，之後請把註解補回去。
//$output .= $main->install();
break;
case 'signin': //登入
$output .= $main->signin();
break;
case 'signin_jump': //登入跳轉
$output .= $main->signin_jump();
break;
case 'signup': //註冊
$output .= $main->signup();
break;
case 'signup_jump': //註冊跳轉
$output .= $main->signup_jump();
break;
case 'logout': //登出跳轉
$output .= $main->logout_jump();
break;
case 'chatroom': //聊天室
$output .= $main->chatroom();
break;
case 'profile': //聊天室
$output .= $main->profile();
break;
default:
$output .= $main->signin();
break;
}
$output .= $main->htmlFooter();
echo $output;
?>

PHP (common.php)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<?php
/**************************************************
File：common.php
Name：功能函式
Explain：實現功能函式
****************************************By QQBoxy*/
class main {
//安裝
public function install() {
$sql = new sql();
$sql->create();
return "Done.";
}
//登入表單
public function signin() {
$output = <<< EOT
<section>
<div class="msgbox">
<h1>Sign in</h1>
or <a href="index.php?p=signup">create account</a><br />
<form action="index.php?p=signin_jump" method="post">
<input class="inputbox" type="text" name="name" placeholder="Name" /><br />
<input class="inputbox" type="password" name="password" placeholder="Password" /><br />
<input class="button" type="submit" value="Sign in" />
</form>
</div>
</section>
EOT;
return $output;
}
//登入跳轉
public function signin_jump() {
$output = <<< EOT
<section>
<div class="msgbox">
EOT;
$name = !empty($_POST['name']) ? $_POST['name'] : null;
$password = !empty($_POST['password']) ? $_POST['password'] : null;
if($name && $password) {
$sql = new sql();
$result = $sql->signin($name);
if($password == $result['password']) { //登入成功
$session = new session();
$session->login();
$_SESSION['uid'] = $result['uid'];
$_SESSION['name'] = $result['name'];
$user = $sql->getuser($result['uid']); //取得使用者資料
$_SESSION['email'] = $user['email'];
$output .= <<< EOT
<h1>Successful</h1>
<span class="welldone">
Done.
</span>
<br />
<a href="index.php?p=chatroom"><button class="button">Enter chatroom</button></a>
EOT;
} else { //登入失敗 - 密碼錯誤
$output .= <<< EOT
<h1>Error</h1>
<span class="warning">
Fail connection, your password is incorrect.
</span>
<br />
<a href="index.php?p=signin"><button class="button">Back to sign in</button></a>
EOT;
}
} else { //登入失敗 - 資訊不足
$output .= <<< EOT
<h1>Error</h1>
<span class="warning">
Fail connection, your account or password is invalid.
</span>
<br />
<a href="index.php?p=signin"><button class="button">Back to sign in</button></a>
EOT;
}
$output .= <<< EOT
</div>
</section>
EOT;
return $output;
}
//註冊表單
public function signup() {
$output = <<< EOT
<section>
<div class="msgbox">
<h1>Create account</h1>
or <a href="index.php?p=signin">sign in</a><br />
<form action="index.php?p=signup_jump" method="post">
<input class="inputbox" type="text" name="name" placeholder="Name" /><br />
<input class="inputbox" type="password" name="password" placeholder="Password" /><br />
<input class="inputbox" type="text" name="email" placeholder="Email address" /><br />
<input class="button" type="submit" value="Create account" />
</form>
</div>
</section>
EOT;
return $output;
}
//註冊跳轉
public function signup_jump() {
$output = <<< EOT
<section>
<div class="msgbox">
EOT;
$name = !empty($_POST['name']) ? $_POST['name'] : null;
$password = !empty($_POST['password']) ? $_POST['password'] : null;
$email = !empty($_POST['email']) ? $_POST['email'] : null;
if($name && $password && $email) { //註冊成功
$sql = new sql();
$sql->signup($name, $password, $email);
$output .= <<< EOT
<h1>Successful</h1>
<span class="welldone">Well Done.</span>
<br />
<a href="index.php?p=signin"><button class="button">Back to sign in</button></a>
EOT;
} else { //註冊失敗 - 資訊不足
$output .= <<< EOT
<h1>Error</h1>
<span class="warning">
Information incorrect, your account, password or email is not allowed.
</span>
<br />
<a href="index.php?p=signup"><button class="button">Back to create account</button></a>
EOT;
}
$output .= <<< EOT
</div>
</section>
EOT;
return $output;
}
//登出跳轉
public function logout_jump() {
$session = new session();
$session->logout();
$output = <<< EOT
<section>
<div class="msgbox">
<h1>Logout</h1>
<span class="welldone">
You have been logged out successfully.
</span>
<br />
<a href="index.php?p=signin"><button class="button">Back to sign in</button></a>
</div>
</section>
EOT;
return $output;
}
//文章處理
protected function postContent($content) {
$content = str_replace("<", "<", $content);
$content = str_replace(">", ">", $content);
$content = str_replace("\r\n", "<br />", $content);
return $content;
}
//聊天室檢視
public function chatroom() {
$output = "";
$session = new session();
if(!$session->check()) { //檢查聊天室權限
$output .= <<< EOT
<section>
<div class="msgbox">
<h1>Error</h1>
<span class="warning">
You don’t have permission to access on this page.
</span>
<br />
<a href="index.php?p=signin"><button class="button">Back to sign in</button></a>
</div>
</section>
EOT;
return $output;
}
//聊天室方法
$sql = new sql();
$m = !empty($_POST['m']) ? $_POST['m'] : null; //方法
$content = !empty($_POST['content']) ? $_POST['content'] : null;
switch($m) {
case 'newpost':
$sql->newpost($_SESSION['uid'], false, $content);
break;
case 'reply':
$pid = !empty($_POST['pid']) ? $_POST['pid'] : null;
$sql->newpost($_SESSION['uid'], $pid, $content);
break;
case 'like':
$pid = !empty($_POST['pid']) ? $_POST['pid'] : null;
if(!$sql->getlike($_SESSION['uid'], $pid)) { //檢查是否已 Like
$sql->newlike($_SESSION['uid'], $pid);
}
break;
case 'profile':
$name = !empty($_POST['name']) ? $_POST['name'] : null;
$password = !empty($_POST['password']) ? $_POST['password'] : null;
$email = !empty($_POST['email']) ? $_POST['email'] : null;
if($password && $email) {
$sql->userupdate($_SESSION['name'], $password, $email);
}
break;
default:
break;
}
$output .= <<< EOT
<nav>
<div class="rightbar">
<a href="index.php?p=profile">{$_SESSION['name']}</a> | <a href="index.php?p=logout">Logout</a>
</div>
<div>Posts</div>
</nav>
<section>
<form action="index.php?p=chatroom" method="post">
<input type="hidden" name="m" value="newpost" />
<textarea class="postarea" name="content" cols="40" rows="2" placeholder="Write something..."></textarea>
<input class="button" type="submit" value="Post!" />
</form>
EOT;
//文章模式
$posts = $sql->getposts(false); //取得發文資料
foreach($posts as $post) {
$user = $sql->getuser($post['uid']); //取得發文者的資訊
$dis = ($sql->getlike($_SESSION['uid'], $post['pid']))?" disabled=\"disabled\"":""; //禁用 Like
$output .= <<< EOT
<div class="postheading">{$user['name']}</div>
<div class="postgroup">
<div class="post level1">
<div class="postcontent">{$this->postContent($post['content'])}</div>
</div>
<div class="postlike">
<form action="index.php?p=chatroom" method="post">
<input type="hidden" name="m" value="like" />
<input type="hidden" name="pid" value="{$post['pid']}" />
<span class="postinfo"> – </span>
<input type="submit" value="like {$sql->getlikesnum($post['pid'])}"{$dis} />
</form>
</div>
EOT;
//回覆模式
$replies = $sql->getposts($post['pid']); //取得回覆資料
foreach($replies as $reply) {
$user = $sql->getuser($reply['uid']); //取得回覆者的資訊
$dis = ($sql->getlike($_SESSION['uid'], $reply['pid']))?" disabled=\"disabled\"":""; //禁用 Like
$output .= <<< EOT
<div class="post level2">
<div class="postcontent">{$this->postContent($reply['content'])}</div>
<div class="postlike">
<form action="index.php?p=chatroom" method="post">
<input type="hidden" name="m" value="like" />
<input type="hidden" name="pid" value="{$reply['pid']}" />
<span class="postinfo"> – {$user['name']}</span>
<input type="submit" value="like {$sql->getlikesnum($reply['pid'])}"{$dis} />
</form>
</div>
</div>
EOT;
}
//回覆模式 END
$output .= <<< EOT
<div>
<form action="index.php?p=chatroom" method="post">
<input type="hidden" name="m" value="reply" />
<input type="hidden" name="pid" value="{$post['pid']}" />
<input class="comment" name="content" />
<input class="commentbutton" type="submit" value="comment" />
</form>
</div>
</div>
EOT;
}
$output .= <<< EOT
</section>
EOT;
return $output;
}
//個人資料表單
public function profile() {
$session = new session();
if(!$session->check()) { //檢查權限
$output .= <<< EOT
<section>
<div class="msgbox">
<h1>Error</h1>
<span class="warning">
You don’t have permission to access on this page.
</span>
<br />
<a href="index.php?p=signin"><button class="button">Back to sign in</button></a>
</div>
</section>
EOT;
}
$output = <<< EOT
<section>
<div class="msgbox">
<h1>Profile</h1>
or <a href="index.php?p=signin">sign in</a><br />
<form action="index.php?p=chatroom" method="post">
<input type="hidden" name="m" value="profile" />
<input class="inputbox" type="text" name="name" value="{$_SESSION['name']}" disabled="disabled" /><br />
<input class="inputbox" type="password" name="password" placeholder="Password" /><br />
<input class="inputbox" type="text" name="email" value="{$_SESSION['email']}" /><br />
<input class="button" type="submit" value="Update" />
<input class="cancelbutton" type="button" onclick="javascript:location.href='index.php?p=chatroom'" value="Cancel" />
</form>
</div>
</section>
EOT;
return $output;
}
//HTML頁標頭
public function htmlHeader() {
$output = <<< EOT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHPChatBoxy</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<article>
EOT;
return $output;
}
//HTML頁尾
public function htmlFooter() {
$output = <<< EOT
</article>
</body>
</html>
EOT;
return $output;
}
}
?>

PHP (database.php)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<?php
/**************************************************
File：database.php
Name：資料庫
Explain：資料庫CRUD功能
****************************************By QQBoxy*/
class sql {
protected $con;
//連接SQL
protected function connect() {
$account = 'YOUR_ACCOUNT'; //資料庫帳號
$password = 'YOUR_PASSWORD'; //資料庫密碼
$database = 'YOUR_DATABASE'; //資料庫名稱
$this->con = mysqli_connect('localhost', $account, $password, $database, 3306);
if(!$this->con) {
die('SQL connect error: '.mysqli_connect_error());
}
mysqli_query($this->con, 'SET NAMES utf8');
}
//斷開SQL
protected function close() {
mysqli_close($this->con);
}
//建立資料表
public function create() {
$this->connect();
//使用者
mysqli_query($this->con,
"CREATE TABLE persons (
uid INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(30) NOT NULL,
password VARCHAR(30) NOT NULL,
email VARCHAR(50) NOT NULL,
PRIMARY KEY (uid),
UNIQUE KEY (name, email)
)"
);
//文章
mysqli_query($this->con,
"CREATE TABLE posts (
pid INT(11) NOT NULL AUTO_INCREMENT,
uid INT(11) NOT NULL,
quote INT(11),
content TEXT,
PRIMARY KEY (pid)
)"
);
//喜歡
mysqli_query($this->con,
"CREATE TABLE likes (
lid INT(11) NOT NULL AUTO_INCREMENT,
uid INT(11) NOT NULL,
pid INT(11) NOT NULL,
PRIMARY KEY (lid)
)"
);
$this->close();
}
//使用者登入
public function signin($name) {
$this->connect();
$result = mysqli_query($this->con, "SELECT * FROM persons WHERE name='{$name}'");
$row = mysqli_fetch_array($result);
$this->close();
return $row;
}
//使用者註冊
public function signup($name, $password, $email) {
$this->connect();
mysqli_query($this->con, "INSERT INTO persons (name, password, email) VALUES ('{$name}', '{$password}', '{$email}')");
$this->close();
}
//使用者更新
public function userupdate($name, $password, $email) {
$this->connect();
mysqli_query($this->con, "UPDATE persons SET password='{$password}', email='{$email}' WHERE name='{$name}'");
$this->close();
}
//查詢使用者
public function getuser($uid) {
$this->connect();
$result = mysqli_query($this->con, "SELECT * FROM persons WHERE uid='{$uid}'");
$row = mysqli_fetch_array($result);
$this->close();
return $row;
}
//新文章
public function newpost($uid, $quote, $content) {
$this->connect();
if($quote) { //已引用，回覆模式
mysqli_query($this->con, "INSERT INTO posts (uid, quote, content) VALUES ('{$uid}', '{$quote}', '{$content}')");
} else { //未引用，文章模式
mysqli_query($this->con, "INSERT INTO posts (uid, content) VALUES ('{$uid}', '{$content}')");
}
$this->close();
}
//查詢文章
public function getposts($quote) {
$arr = array();
$this->connect();
if($quote) { //已引用，回覆模式
//$result = mysqli_query($this->con, "SELECT * FROM posts WHERE quote='{$quote}' ORDER BY pid DESC LIMIT 0, 10");
$result = mysqli_query($this->con, "SELECT * FROM posts WHERE quote='{$quote}' ORDER BY pid DESC");
} else { //未引用，文章模式
//$result = mysqli_query($this->con, "SELECT * FROM posts WHERE quote IS NULL ORDER BY pid DESC LIMIT 0, 10");
$result = mysqli_query($this->con, "SELECT * FROM posts WHERE quote IS NULL ORDER BY pid DESC");
}
while($row = mysqli_fetch_array($result)) {
array_push($arr, $row);
}
$this->close();
return $arr;
}
//新喜歡
public function newlike($uid, $pid) {
$this->connect();
mysqli_query($this->con, "INSERT INTO likes (uid, pid) VALUES ('{$uid}', '{$pid}')");
$this->close();
}
//查詢喜歡數
public function getlikesnum($pid) {
$num = 0;
$this->connect();
$result = mysqli_query($this->con, "SELECT * FROM likes WHERE pid='{$pid}'");
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
$num += 1;
}
$this->close();
return $num;
}
//查詢喜歡
public function getlike($uid, $pid) {
$islike = true; //已 Like，不能再 Like
$this->connect();
$result = mysqli_query($this->con, "SELECT * FROM likes WHERE uid='{$uid}' AND pid='{$pid}'");
if(mysqli_fetch_array($result, MYSQLI_ASSOC)) {
$islike = true;
} else {
$islike = false;
}
$this->close();
return $islike;
}
}
?>

PHP (session.php)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
/**************************************************
File：session.php
Name：Session
Explain：用於實現SESSION功能
****************************************By QQBoxy*/
session_start();
class session {
function refresh() { //刷新登入狀態
$_SESSION['start'] = time();
$_SESSION['expire'] = $_SESSION['start'] + 30 * 60; //設定30分鐘
//$_SESSION['expire'] = time() + 5; //Test
}
function login() {
$this->refresh();
}
function check() { //檢查登入狀態
$now = time();
if(!empty($_SESSION['start']) && $_SESSION['expire'] > $now) { //登入狀態未過期
$this->refresh();
return true;
} else if(!empty($_SESSION['start'])) { //登入狀態已過期
session_destroy();
}
return false;
}
function logout() {
session_destroy();
}
}
?>

CSS (style.css)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
body {
margin: 0 auto 0px;
}
h1 {
font-weight: bold;
}
a {
color: #4096ee;
}
nav {
margin: 0 auto 0px;
padding: 3px 10px;
box-shadow: 0px 10px 10px -10px gray;
}
nav div.rightbar {
float: right;
}
section {
margin: 0 auto 0px;
padding: 10px 10px;
}
.msgbox {
position: absolute;
left: 50%;
top: 20%;
width: 300px;
margin-left: -170px;
padding: 20px;
float: left;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px gray;
}
.inputbox {
margin: 7px 1px;
padding-left: 5px;
width: 200px;
height: 25px;
}
.button {
margin: 7px 0;
padding: 10px;
color: #fff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYmNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzYwYWJmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDk2ZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
border-width: 1px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.warning {
color: #ff5c5c;
}
.welldone {
color: #a5c956;
}
.postgroup {
margin: 0px;
border-left: 5px solid #eee;
}
.postheading {
margin-top: 30px;
font-weight: bold;
}
.postarea {
margin: 0 0 -15px 0;
}
.post {
margin-top: 10px;
padding: 5px 10px;
position: relative;
overflow: hidden;
}
.level1 {
background-color: #f5f5f5;
margin-left: 20px;
}
.level2 {
border-left: 5px solid #eee;
margin-left: 20px;
}
.postlike {
margin-left: 20px;
}
.postlike input {
border: 1px solid gray;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.postinfo {
color: gray;
}
.comment {
margin: 0px 0px 0px 20px;
width: 250px;
height: 22px;
border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
}
.commentbutton {
margin: 10px 0px 0px -5px;
padding: 5px;
height: 28px;
color: #fff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYmNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzYwYWJmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDk2ZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
border-width: 1px;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
}
.cancelbutton {
margin: 7px 0;
padding: 10px;
color: gray;
background-color: #fff;
border-width: 1px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

說明：
就只是一份學校作業，沒有太多的安全性設計，希望各位不要拿來實戰阿!!!
Posted by QQBoxy
Tag - , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)