Skip to content

Commit 1b6af47

Browse files
aszx87410aszx87410
committed
更新12周作業
1 parent 12d5474 commit 1b6af47

File tree

4 files changed

+247
-0
lines changed

4 files changed

+247
-0
lines changed

‎examples/week12/hw1/api_add_comments.php

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<?php
2+
require_once('conn.php');
3+
header('Content-type:application/json;charset=utf-8');
4+
header('Access-Control-Allow-Origin: *');
5+
if (
6+
empty($_POST['content']) ||
7+
empty($_POST['nickname']) ||
8+
empty($_POST['site_key'])
9+
) {
10+
$json = array(
11+
"ok" => false,
12+
"message" => "Please input missing fields"
13+
);
14+
15+
$response = json_encode($json);
16+
echo $response;
17+
die();
18+
}
19+
20+
$nickname = $_POST['nickname'];
21+
$site_key = $_POST['site_key'];
22+
$content = $_POST['content'];
23+
24+
$sql = "insert into discussions(site_key, nickname, content) values (?, ?, ?)";
25+
$stmt = $conn->prepare($sql);
26+
$stmt->bind_param('sss', $site_key, $nickname, $content);
27+
$result = $stmt->execute();
28+
29+
if (!$result) {
30+
$json = array(
31+
"ok" => false,
32+
"message" => $conn->error
33+
);
34+
$response = json_encode($json);
35+
echo $response;
36+
die();
37+
}
38+
39+
$json = array(
40+
"ok" => true,
41+
"message" => "success"
42+
);
43+
44+
$response = json_encode($json);
45+
echo $response;
46+
?>
47+

‎examples/week12/hw1/api_comments.php

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<?php
2+
require_once('conn.php');
3+
header('Content-type:application/json;charset=utf-8');
4+
header('Access-Control-Allow-Origin: *');
5+
if (
6+
empty($_GET['site_key'])
7+
) {
8+
$json = array(
9+
"ok" => false,
10+
"message" => "Please add site_key in url"
11+
);
12+
13+
$response = json_encode($json);
14+
echo $response;
15+
die();
16+
}
17+
18+
$site_key = $_GET['site_key'];
19+
20+
$sql =
21+
"select id, nickname, content, created_at from discussions where site_key = ? " .
22+
(empty($_GET['before']) ? "" : "and id < ?") .
23+
" order by id desc limit 5 ";
24+
$stmt = $conn->prepare($sql);
25+
if (empty($_GET['before'])) {
26+
$stmt->bind_param('s', $site_key);
27+
} else {
28+
$stmt->bind_param('si', $site_key, $_GET['before']);
29+
}
30+
31+
$result = $stmt->execute();
32+
33+
if (!$result) {
34+
$json = array(
35+
"ok" => false,
36+
"message" => $conn->error
37+
);
38+
$response = json_encode($json);
39+
echo $response;
40+
die();
41+
}
42+
43+
$result = $stmt->get_result();
44+
$discussions = array();
45+
while($row = $result->fetch_assoc()) {
46+
array_push($discussions, array(
47+
"id" => $row["id"],
48+
"nickname" => $row["nickname"],
49+
"content" => $row["content"],
50+
"created_at" => $row["created_at"]
51+
));
52+
}
53+
54+
$json = array(
55+
"ok" => true,
56+
"discussions" => $discussions
57+
);
58+
59+
$response = json_encode($json);
60+
echo $response;
61+
?>
62+

‎examples/week12/hw1/index.html

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<meta charset="utf-8">
6+
7+
<title>Week12 留言板</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
11+
<style>
12+
.card {
13+
margin-top: 12px;
14+
}
15+
</style>
16+
<script>
17+
function escape(toOutput){
18+
return toOutput.replace(/\&/g, '&amp;')
19+
.replace(/\</g, '&lt;')
20+
.replace(/\>/g, '&gt;')
21+
.replace(/\"/g, '&quot;')
22+
.replace(/\'/g, '&#x27')
23+
.replace(/\//g, '&#x2F');
24+
}
25+
26+
function appendCommentToDOM(container, comment, isPrepend) {
27+
const html = `
28+
<div class="card">
29+
<div class="card-body">
30+
<h5 class="card-title">${comment.id} ${escape(comment.nickname)}</h5>
31+
<p class="card-text">${escape(comment.content)}</p>
32+
</div>
33+
</div>
34+
`
35+
if (isPrepend) {
36+
container.prepend(html)
37+
} else {
38+
container.append(html)
39+
}
40+
}
41+
42+
function getCommentsAPI(siteKey, before, cb) {
43+
let url = `http://localhost:8080/huli/be101/board-api/api_comments.php?site_key=${siteKey}`
44+
if (before) {
45+
url += '&before=' + before
46+
}
47+
$.ajax({
48+
url,
49+
}).done(function(data) {
50+
cb(data)
51+
});
52+
}
53+
54+
const siteKey = 'huli'
55+
const loadMoreButtonHTML = '<button class="load-more btn btn-primary">載入更多</button>'
56+
let lastId = null
57+
let isEnd = false
58+
59+
$(document).ready(() => {
60+
const commentDOM = $('.comments')
61+
getComments()
62+
63+
$('.comments').on('click', '.load-more', () => {
64+
getComments()
65+
})
66+
67+
$('.add-comment-form').submit(e => {
68+
e.preventDefault();
69+
const newCommentData = {
70+
site_key: 'huli',
71+
nickname: $('input[name=nickname]').val(),
72+
content: $('textarea[name=content]').val()
73+
}
74+
$.ajax({
75+
type: 'POST',
76+
url: 'http://localhost:8080/huli/be101/board-api/api_add_comments.php',
77+
data: newCommentData
78+
}).done(function(data) {
79+
if (!data.ok) {
80+
alert(data.message)
81+
return
82+
}
83+
$('input[name=nickname]').val('')
84+
$('textarea[name=content]').val('')
85+
appendCommentToDOM(commentDOM, newCommentData, true)
86+
});
87+
})
88+
})
89+
90+
function getComments() {
91+
const commentDOM = $('.comments')
92+
$('.load-more').hide()
93+
if (isEnd) {
94+
return
95+
}
96+
getCommentsAPI(siteKey, lastId, data => {
97+
if (!data.ok) {
98+
alert(data.message)
99+
return
100+
}
101+
102+
const comments = data.discussions;
103+
for (let comment of comments) {
104+
appendCommentToDOM(commentDOM, comment)
105+
}
106+
let length = comments.length
107+
if (length === 0) {
108+
isEnd = true
109+
$('.load-more').hide()
110+
} else {
111+
lastId = comments[length - 1].id
112+
$('.comments').append(loadMoreButtonHTML)
113+
}
114+
115+
})
116+
}
117+
</script>
118+
</head>
119+
120+
<body>
121+
<div class="container">
122+
<form class="add-comment-form">
123+
<div class="form-group">
124+
<label for="form-nickname">暱稱</label>
125+
<input name="nickname" type="text" class="form-control" id="form-nickname" >
126+
</div>
127+
<div class="form-group">
128+
<label for="content-textarea">留言內容</label>
129+
<textarea name='content' class="form-control" id="content-textarea" rows="3"></textarea>
130+
</div>
131+
<button type="submit" class="btn btn-primary">送出</button>
132+
</form>
133+
<div class="comments">
134+
</div>
135+
</div>
136+
137+
</body>
138+
</html>

‎homeworks/week12/comments.png

43.8 KB
Loading

0 commit comments

Comments
 (0)