BBS 電子佈告欄 | 程式專案

{"id":93484,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody class=\\\"bg-black gray\\\"\u003e\\n    \\n    \u003c!-- 這個區塊是文章列表 --\u003e\\n    \u003cdiv id=\\\"listPage\\\"\u003e\\n        \u003cp class=\\\"bg-blue\\\"\u003e\\n            \u003cspan\u003e看版\u003c/span\u003e\\n            \u003cspan class=\\\"right link js-showFormPage\\\"\u003e發表文章\u003c/span\u003e\\n        \u003c/p\u003e\\n        \u003cdiv id=\\\"postList\\\"\u003e\\n            \u003c!-- 預先寫好的範例模板，用來複製修改\\n                 當專案完整完成後即可移除--\u003e\\n            \u003cp class=\\\"bg-dark link js-postItem\\\"\u003e\\n                \u003cspan\u003e[笑話]\u003c/span\u003e\\n                \u003cspan\u003e皮卡丘借錢\u003c/span\u003e\\n                \u003cspan\u003eEmeraldAZ\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2019-09-09\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp class=\\\"bg-dark link js-postItem\\\"\u003e\\n                \u003cspan\u003e[笑話]\u003c/span\u003e\\n                \u003cspan\u003e傻眼的人\u003c/span\u003e\\n                \u003cspan\u003esixB\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2019-09-09\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp class=\\\"bg-dark link js-postItem\\\"\u003e\\n                \u003cspan\u003e[猜謎]\u003c/span\u003e\\n                \u003cspan\u003e哪位棒球選手只會推竿\u003c/span\u003e\\n                \u003cspan\u003ekoala70136\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2019-09-08\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp class=\\\"bg-dark link js-postItem\\\"\u003e\\n                \u003cspan\u003e[新聞]\u003c/span\u003e\\n                \u003cspan\u003e高鐵撿到一卡皮箱裝300萬現金 失主竟是\u003c/span\u003e\\n                \u003cspan\u003eangellll\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2019-09-08\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp class=\\\"bg-dark link js-postItem\\\"\u003e\\n                \u003cspan\u003e[新聞]\u003c/span\u003e\\n                \u003cspan\u003e日照充足太陽能發威 電力貢獻一度超過核\u003c/span\u003e\\n                \u003cspan\u003eunclefucka\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2019-09-08\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp class=\\\"bg-dark link js-postItem\\\"\u003e\\n                \u003cspan\u003e[問卦]\u003c/span\u003e\\n                \u003cspan\u003e看微波爐微波食物要距離多遠才安全?\u003c/span\u003e\\n                \u003cspan\u003eunclefucka\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2019-09-07\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp class=\\\"bg-dark link js-postItem\\\"\u003e\\n                \u003cspan\u003e[問卦]\u003c/span\u003e\\n                \u003cspan\u003e史上第4高一注獨得！20億威力彩得主是吳\u003c/span\u003e\\n                \u003cspan\u003eTravelFar\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2019-09-07\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp class=\\\"bg-dark link js-postItem\\\"\u003e\\n                \u003cspan\u003e[問卦]\u003c/span\u003e\\n                \u003cspan\u003e阿肥說不想上班\u003c/span\u003e\\n                \u003cspan\u003egreenmiracle\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2019-09-07\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp class=\\\"bg-dark link js-postItem\\\"\u003e\\n                \u003cspan\u003e[問卦]\u003c/span\u003e\\n                \u003cspan\u003e認真問香港到底關台灣什麼事?\u003c/span\u003e\\n                \u003cspan\u003eXSR700\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2019-09-06\u003c/span\u003e\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n\\n    \u003c!-- 這個區塊是新增文章的表單 --\u003e\\n    \u003cdiv id=\\\"formPage\\\"\u003e\\n        \u003cselect class=\\\"bg-dark gray\\\"\u003e\\n            \u003coption value=\\\"問卦\\\"\u003e問卦\u003c/option\u003e\\n            \u003coption value=\\\"新聞\\\"\u003e新聞\u003c/option\u003e\\n            \u003coption value=\\\"星座\\\"\u003e星座\u003c/option\u003e\\n        \u003c/select\u003e\\n        \u003cinput class=\\\"bg-dark gray\\\" placeholder=\\\"標題\\\"\u003e\\n        \u003ctextarea class=\\\"bg-dark gray\\\" placeholder=\\\"內文\\\"\u003e\u003c/textarea\u003e\\n        \u003cp class=\\\"bg-gray\\\"\u003e\\n            \u003cspan class=\\\"dark link js-back js-createPost\\\"\u003e送出\u003c/span\u003e\\n            \u003cspan class=\\\"dark link js-back\\\"\u003e取消\u003c/span\u003e\\n        \u003c/p\u003e\\n    \u003c/div\u003e\\n\\n\\n    \u003c!-- 這個區塊是檢視文章內容和相關留言 --\u003e\\n    \u003cdiv id=\\\"postPage\\\"\u003e\\n        \u003cdiv class=\\\"bg-blue gray\\\"\u003e\\n            \u003cp\u003e\\n                \u003cspan class=\\\"blue bg-gray\\\"\u003e作者\u003c/span\u003e\\n                \u003cspan class=\\\"js-post-author\\\"\u003eEmeraldAZ\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan class=\\\"blue bg-gray\\\"\u003e標題\u003c/span\u003e\\n                \u003cspan class=\\\"js-post-title\\\"\u003e[笑話] 皮卡丘借錢\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan class=\\\"blue bg-gray\\\"\u003e時間\u003c/span\u003e\\n                \u003cspan class=\\\"js-post-date\\\"\u003e2017-05-02T13:28:54\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp class=\\\"content bg-black\\\"\u003e\\n                \u003cspan class=\\\"js-post-content\\\"\u003e\\n                    有一天皮卡丘跟傑尼龜借錢，皮卡丘: 皮卡皮卡皮卡(傑尼龜)，傑尼龜:不要\\n                \u003c/span\u003e\\n                \u003cbr/\u003e\u003cspan\u003e===\u003c/span\u003e\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n        \u003cdiv id=\\\"comments\\\"\u003e\\n            \u003c!-- 預先寫好的範例模板，用來複製修改\\n                 當專案完整完成後即可移除--\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003eilikeroc\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e推一個\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003eyd1143\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e太有梗了XD\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003easxu31\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e傑尼龜造反啦～\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003eTang5418\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e皮卡丘直接傻眼\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003eSaroten\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003eXDDDDDD\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003ejason00809\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e笑死了\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003ejoka1630\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e笑死XD\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003ee1q3z9c7\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e真的超爆笑\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003erexyi2009\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e呵呵\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003ea123457\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e哈哈哈啊哈哈\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003ehmcedamon\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e寧願說人話也不要借你借你～\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003elbowlbow\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e傑尼龜造反啦wwww\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003etotocc\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e好幽默 XDDD\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n            \u003cp\u003e\\n                \u003cspan\u003e推\u003c/span\u003e\\n                \u003cspan class=\\\"yellow\\\"\u003eDeaGoo\u003c/span\u003e\\n                \u003cspan class=\\\"gold\\\"\u003e傑尼你...\u003c/span\u003e\\n                \u003cspan class=\\\"right\\\"\u003e2017-05-02\u003c/span\u003e\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"bg-gray dark\\\"\u003e\\n            \u003cspan class=\\\"js-back\\\"\u003e返回列表\u003c/span\u003e\\n            \u003cspan class=\\\"js-createComment\\\"\u003e留言\u003c/span\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    font-weight: bold;\\n    padding: 10px;\\n}\\n\\n #postPage, #formPage {\\n    display: none;\\n}\\n\\n#formPage input, #formPage textarea, #formPage select {\\n    border: 0px;\\n    width: 100%;\\n    display: block;\\n    box-sizing: border-box;\\n    padding: 5px;\\n    font-weight: bold;\\n    margin: 5px 0;\\n    font-size: 1.2rem;\\n}\\n#postList p {\\n    padding: 3px;\\n    margin: 5px 0;\\n}\\n#postPage p {\\n    padding: 0;\\n    margin: 0;\\n}\\n#listPage span, #postPage span {\\n    padding: 0 3px;\\n}\\n\\n#postPage .content {\\n    padding: 15px 0px;\\n}\\n\\ntextarea {\\n    height: 250px;\\n}\\n\\n.right {\\n    float: right;\\n}\\n.link {\\n    color: #ddd;\\n    cursor: pointer;\\n}\\n.link:hover {\\n    color: #222;\\n    background: #ddd;\\n}\\n\\n.yellow {\\n    color: yellow;\\n}\\n.gold {\\n    color: gold;\\n}\\n.blue {\\n    color: blue;\\n}\\n.bg-blue {\\n    background-color: blue;\\n}\\n.gray {\\n    color: #ddd;\\n}\\n.bg-gray {\\n    background-color: #ddd;\\n}\\n.dark {\\n    color: #333;\\n}\\n.bg-dark {\\n    background-color: #333;\\n}\\n.black {\\n    color: #111;\\n}\\n.bg-black {\\n    background-color: #111;\\n}\\n\",\"js\":\"var postId;\\nvar post = DB.table('post');\\nvar comment = DB.table('comment');\\n\\n$('.js-showFormPage').click(function () {\\n    $('#listPage').hide();\\n    $('#formPage').show();\\n});\\n$('.js-back').click(function () {\\n    $('#listPage').show();\\n    $('#formPage').hide();\\n    $('#postPage').hide();\\n});\\n// 這種寫法與代辦事項遇到的問題一樣，需要再解釋一次，可以用「教室」例子解釋\\n$('#postList').on('click', '.js-postItem', function () {\\n    $('#listPage').hide();\\n    $('#postPage').show();\\n    \\n    // 第二週內容\\n    postId = $(this).data('id');\\n    showPost();\\n});\\n\\n$('.js-createPost').click(createPost);\\n$('.js-createComment').click(createComment);\\n\\n// 專案執行預設更新文章列表\\nupdatePostList();\\n\\n// 點擊「送出」時會執行這裡\\n// 讀取輸入框的內容並新增文章至資料庫，接著更文章新列表\\nfunction createPost () {\\n    var type = $('select').val();\\n    var title = $('input').val();\\n    var content = $('#formPage textarea').val();\\n    post.create({\\n        type: type,\\n        title: title,\\n        content: content,\\n        author: USER_NAME,\\n        date: new Date,\\n    });\\n    updatePostList();\\n}\\n\\n// 專案一開始執行/新增一篇文章就會執行這裡\\n// 移除文章列表原本內容並重新更新列表\\nfunction updatePostList () {\\n    $('#postList').empty();\\n    post.find({}, function (data) {\\n        for (var i=0; i\u003cdata.length; i++) {\\n            var d = data[i];\\n            var html = `\\n                \u003cp class=\\\"bg-dark link js-postItem\\\" data-id=\\\"${d.id}\\\"\u003e\\n                    \u003cspan\u003e[${d.type}]\u003c/span\u003e\\n                    \u003cspan\u003e${d.title}\u003c/span\u003e\\n                    \u003cspan\u003e${d.author}\u003c/span\u003e\\n                    \u003cspan class=\\\"right\\\"\u003e${d.date.slice(0, 10)}\u003c/span\u003e\\n                \u003c/p\u003e\\n            `\\n          $('#postList').append(html);\\n        } \\n    });\\n}\\n\\n// 點擊列表中的某個文章\\n// 根據文章 id 查詢內容並顯示，接著更新留言列表\\nfunction showPost () {\\n    var p = post.find({ id: postId }, function (data) {\\n        $('.js-post-title').text(data[0].title);\\n        $('.js-post-name').text(data[0].author);\\n        $('.js-post-date').text(data[0].date.slice(0, 10));\\n        $('.js-post-content').text(data[0].content);\\n    });\\n    updateComment();\\n}\\n\\n// 點擊留言會執行這裡\\n// 新增一筆留言到資料庫，並刷新留言列表\\nfunction createComment () {\\n    var type = prompt('推(Y) 一般(0) 噓(-1)');\\n    var content = prompt('留言內容');\\n    if (type == 1) type = '推';\\n    else if (type == -1) type = '噓';\\n    else type = '';\\n    comment.create({\\n        type: type,\\n        postId: postId,\\n        author: USER_NAME,\\n        content: content,\\n        date: new Date,\\n    });\\n    updateComment();\\n}\\n\\n// 當進入檢視文章/新增一筆留言就會執行\\n// 移除原本內容並重新刷新留言\\nfunction updateComment () {\\n    $('#comments').empty();\\n    comment.find({ postId: postId }, function (data) {\\n        for (var i=0; i\u003cdata.length; i++) {\\n            var d = data[i];\\n            var html = `\\n                \u003cp\u003e\\n                    \u003cspan\u003e${d.type}\u003c/span\u003e\\n                    \u003cspan class=\\\"yellow\\\"\u003e${d.author}\u003c/span\u003e\\n                    \u003cspan class=\\\"gold\\\"\u003e${d.content}\u003c/span\u003e\\n                    \u003cspan class=\\\"right\\\"\u003e${d.date.slice(0, 10)}\u003c/span\u003e\\n                \u003c/p\u003e\\n            `\\n            $('#comments').append(html);\\n        }\\n    });\\n}\\n\"}","created_at":"2019-09-02T18:00:21.912+08:00","updated_at":"2020-01-30T16:08:35.617+08:00","name":"BBS 電子佈告欄","language":"web","screenshot":{"url":"https://cdn0.koding.school/uploads/project/screenshot/93484/8598a1d2f89985c804f363688d10ac08.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":294,"hashid":"ej9sp2jy","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}