Update README.md

README.md

@@ -3,9 +3,10 @@
 欄位 | 內容
 -----|--------
 學期 | 111 學年上學期
-學生 |  xxx
-學號末兩碼 | xx
+學生 |  黃柏鈞
+學號末兩碼 | 20
 教師 | [陳鍾誠](https://www.nqu.edu.tw/educsie/index.php?act=blog&code=list&ids=4)
 學校科系 | [金門大學資訊工程系](https://www.nqu.edu.tw/educsie/index.php)
 課程教材 | https://gitlab.com/cccnqu111/ws
 
+# 本網頁是複製老師的專案並修改

ws111a/README.md

@@ -0,0 +1,11 @@
+# 課程：網站設計進階 -- 筆記、習題與報告
+
+欄位 | 內容
+-----|--------
+學期 | 111 學年上學期
+學生 |  xxx
+學號末兩碼 | xx
+教師 | [陳鍾誠](https://www.nqu.edu.tw/educsie/index.php?act=blog&code=list&ids=4)
+學校科系 | [金門大學資訊工程系](https://www.nqu.edu.tw/educsie/index.php)
+課程教材 | https://gitlab.com/cccnqu111/ws
+

ws111a/app.js

@@ -0,0 +1,60 @@
+import * as db from './db.js'
+import {Server, sendJson, bodyParams, sendStatus, Status} from './server.js'
+
+db.open()
+
+const server = new Server()
+server.public("/public")
+
+server.router.get('/', home)
+.post('/login', login)
+.post('/signup', signup)
+.post('/rank', rank)
+
+
+async function home(ctx) {
+    ctx.response.redirect("/public/#home")
+}
+
+async function signup(ctx) {
+  const params = await bodyParams(ctx)
+  console.log('params=', params)
+  let user = await db.userGet(params.user)
+  if (user == null) { // user name available
+    console.log('signup:params=', params)
+    await db.userAdd({user:params.user, pass:params.password, email:params.email})
+    sendStatus(ctx, Status.OK)
+  }
+  else
+    sendStatus(ctx, Status.Fail)
+}
+
+async function login(ctx) {
+  const params = await bodyParams(ctx)
+  let user = await db.userGet(params.user)
+  console.log('login:user=', user)
+  if (user != null && user.pass == params.password) {
+    await ctx.state.session.set('user', user)
+    sendStatus(ctx, Status.OK)
+  } else
+    sendStatus(ctx, Status.Fail)
+}
+
+async function rank(ctx){
+  let user = await ctx.state.session.get('user')
+  console.log('user=',user.user)
+  const params = await bodyParams(ctx)
+  let user1 = params.user
+  console.log('user1=',user1)
+  let click = params.c
+  console.log('click=',click)
+  let player = {user:user, click:click}
+  if(user.user == user1){
+    console.log("error")
+    await db.rankAdd(player)
+    sendStatus(ctx, Status.OK)
+  }
+  else{sendStatus(ctx, Status.Fail)}
+}
+
+await server.listen(8000)

ws111a/db.js

@@ -0,0 +1,142 @@
+import { DB } from "https://deno.land/x/sqlite/mod.ts";
+
+let db = null
+const NLIMIT = 100
+
+export async function open() {
+  db = new DB("web.db");
+  db.query(`CREATE TABLE IF NOT EXISTS users 
+              (uid INTEGER PRIMARY KEY AUTOINCREMENT, 
+               user TEXT, pass TEXT, email TEXT)`)
+  // https://www.sqlitetutorial.net/sqlite-full-text-search/
+  // db.query(`CREATE VIRTUAL TABLE posts USING FTS5(title, body)`)
+  db.query(`CREATE TABLE IF NOT EXISTS rank(user TEXT, click INTEGER NOT NULL)`)
+}
+
+export async function clear() {
+  db.query(`DELETE FROM users`)
+}
+
+export async function close() {
+  db.close()
+}
+
+export async function rankAdd(user){
+  db.query(`INSERT INTO rank (user, click) VALUES (?,?)`, 
+                        [user.user, user.click])
+}
+
+export async function userAdd(user) {
+  db.query(`INSERT INTO users (user, pass, email) VALUES (?,?,?)`, 
+                        [user.user, user.pass, user.email])
+}
+
+export async function userGet(user1) {
+  let q = db.query(`SELECT uid, user, pass, email FROM users 
+                    WHERE user=?`, [user1])
+  console.log(`userGet(${user1})=${q}`)
+  if (q.length <=0) return null
+  let [uid, user, pass, email] = q[0]
+  return {uid, user, pass, email}
+}
+
+export async function userList() {
+  let q = db.query(`SELECT user FROM users`, [])
+  let users = []
+  for (let [user] of q) {
+    users.push(user)
+  }
+  return users
+}
+
+export async function replyAdd(reply) {
+  let time = reply.time || Date.now()
+  db.query('INSERT INTO replys (mid, msg, user, time) VALUES (?,?,?,?)',
+          [reply.mid, reply.msg, reply.user, time])
+}
+
+export async function msgAdd(msg) {
+  let time=msg.time || Date.now()
+  let r = db.query(`INSERT INTO msgs (msg, ufrom, uto, time) VALUES (?,?,?,?)`, 
+    [msg.msg, msg.ufrom, msg.uto, time])
+  r = db.query('SELECT last_insert_rowid()')
+  let mid = r[0][0]
+  let replys = msg.replys || []
+  for (let reply of replys) {
+    reply.mid = mid
+    replyAdd(reply)
+    // r = db.query('INSERT INTO replys (mid, msg, user, time) VALUES (?,?,?,?)',
+    //  [mid, reply.msg, reply.user, time])
+  }
+  return mid
+}
+
+export async function msgGet(mid) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time
+                    FROM msgs WHERE mid=?`, [mid])
+  if (q.length <=0) return null
+  let [_mid, msg, ufrom, uto, time] = q[0]
+  q = db.query(`SELECT msg, user, time FROM replys WHERE mid=? ORDER BY time DESC`, [mid])
+  let replys = []
+  for (let [msg, user, time] of q) {
+    replys.push({msg, user, time})
+  }
+  return {mid, msg, ufrom, uto, time, replys}
+}
+
+export function queryToMsgs(q) {
+  let msgs = []
+  for (let [mid, msg, ufrom, uto, time] of q) {
+    msgs.push({mid, msg, ufrom, uto, time})
+  }
+  return msgs
+}
+
+export async function msgTo(user) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time
+                    FROM msgs WHERE uto=? and uto!=ufrom 
+                    ORDER BY time DESC LIMIT ${NLIMIT}`, [user])
+  return queryToMsgs(q)
+}
+
+export async function msgBy(user) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time
+            FROM msgs WHERE ufrom=? ORDER BY time DESC LIMIT ${NLIMIT}`, [user])
+  return queryToMsgs(q)
+}
+
+export async function msgFollow(follower) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time FROM vFollowMsg 
+                    WHERE follower=? ORDER BY time DESC LIMIT ${NLIMIT}`, [follower])
+  return queryToMsgs(q)
+}
+
+export async function msgKey(key) {
+  let q = db.query(`SELECT mid, msg, ufrom, uto, time FROM msgs 
+                    WHERE LOWER(msg) LIKE '%${key.toLowerCase()}%'
+                    ORDER BY time DESC LIMIT ${NLIMIT}`, [])
+  return queryToMsgs(q)
+}
+
+export function followAdd(follower, user) {
+  db.query(`INSERT INTO follows (follower, user) VALUES (?,?)`, 
+                                [follower, user])
+}
+
+export async function followTo(user) {
+  let q = db.query(`SELECT user FROM follows WHERE follower=?`, [user])
+  let follows = []
+  for (let [follow] of q) {
+    follows.push(follow)
+  }
+  return follows
+}
+
+export async function followBy(user) {
+  let q = db.query(`SELECT follower FROM follows WHERE user=?`, [user])
+  let followers = []
+  for (let [follower] of q) {
+    followers.push(follower)
+  }
+  return followers
+}

ws111a/hello1.js

@@ -0,0 +1 @@
+console.log('hello 你好!')

ws111a/public/Myweb.css

@@ -0,0 +1,109 @@
+body{
+    text-align: center;
+    background-color: rgb(246, 243, 239);
+}
+
+ul{
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+ul a, .dropbtn {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+ul a:hover, .dropdown:hover .dropbtn {
+    background-color: red;
+}
+
+ul.dropdown{
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1;}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+#container {
+    width: 400px;
+    height: 200px;
+    position: relative;
+    background: white;
+    margin: auto;
+}
+#animate {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    background-color: red;
+    margin: auto;
+}
+div.legends {
+    margin: 5px;
+    border: 1px solid #ccc;
+    width: 180px;
+    float: left;
+}
+
+div.legends:hover {
+    border: 1px solid rgb(243, 9, 9);
+}
+
+div.legends img {
+    width: 100%;
+    height: auto;
+}
+
+div.legends desc{
+    padding: 15px;
+    text-align: center;
+}
+div.seasons {
+    margin: 5px;
+    border: 1px solid #ccc;
+    display: block;
+    margin: auto;
+    width: 180px;
+}
+
+div.seasons:hover {
+    border: 1px solid rgb(243, 9, 9);
+}
+
+div.seasons img {
+    width: 100%;
+    height: auto;
+}
+
+div.seasons desc{
+    padding: 15px;
+    text-align: center;
+}
+
+/* games */