討論版 | Programming Project | OrangeApple Learning Platform

{"id":17990,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\\n    \u003cdiv id=\\\"postsBox\\\"\u003e\\n        \u003ch2\u003e文章列表\u003c/h2\u003e\\n        \u003ctable\u003e\\n            \u003cthead\u003e\\n                \u003ctr\u003e\\n                    \u003cth\u003e日期\u003c/th\u003e\\n                    \u003cth\u003e作者\u003c/th\u003e\\n                    \u003cth\u003e標題\u003c/th\u003e\\n                \u003c/tr\u003e\\n            \u003c/thead\u003e\\n            \u003ctbody id=\\\"postTable\\\"\u003e\u003c/tbody\u003e\\n        \u003c/table\u003e\\n        \u003cbutton id=\\\"createPostBtn\\\"\u003e新增文章\u003c/button\u003e\\n    \u003c/div\u003e\\n\\n    \u003cdiv id=\\\"contentBox\\\"\u003e\\n        \u003ch2\u003e\u003c/h2\u003e\\n        \u003chr/\u003e\\n        \u003cp\u003e\u003c/p\u003e\\n        \u003ch3\u003e留言\u003c/h3\u003e\\n        \u003chr\u003e\\n        \u003ctable \u003e\\n            \u003cthead\u003e\\n                \u003ctr\u003e\\n                    \u003cth\u003e作者\u003c/th\u003e\\n                    \u003cth\u003e留言\u003c/th\u003e\\n                    \u003cth\u003e日期\u003c/th\u003e\\n                \u003c/tr\u003e\\n            \u003c/thead\u003e\\n            \u003ctbody id=\\\"commentTable\\\"\u003e\u003c/tbody\u003e\\n        \u003c/table\u003e\\n        \u003cinput id=\\\"text\\\" /\u003e\\n        \u003cbutton id=\\\"createCommentBtn\\\"\u003e留言\u003c/button\u003e\\n        \u003cbutton class=\\\"backBtn\\\"\u003e返回\u003c/button\u003e\\n    \u003c/div\u003e\\n\\n    \u003cdiv id=\\\"formBox\\\"\u003e\\n        \u003ch3\u003e標題\u003c/h3\u003e\\n        \u003cinput id=\\\"title\\\"\u003e\\n        \u003ch3\u003e內文\u003c/h3\u003e\\n        \u003ctextarea id=\\\"textarea\\\"\u003e\u003c/textarea\u003e\\n        \u003cbutton class=\\\"backBtn\\\"\u003e取消\u003c/button\u003e\\n        \u003cbutton id=\\\"submitBtn\\\"\u003e送出\u003c/button\u003e\\n    \u003c/div\u003e\\n\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    padding: 45px;\\n    background-image: url('dust.png');\\n}\\n\\nh2, h3 {\\n    margin-bottom: 5px;\\n}\\n\\n#postsBox, #contentBox, #formBox {\\n    border: 1px solid #ccc;\\n    padding: 30px;\\n    margin: auto;\\n    border-radius: 5px;\\n    background-color: #fff;\\n}\\n#contentBox, #formBox {\\n    display: none;\\n}\\n\\n/* 表格樣式 */\\ntable {\\n    border-collapse: collapse;\\n    width: 100%;\\n}\\ntable, th, td {\\n  border: 1px solid #efefef;\\n}\\n\\ntable th {\\n    text-align: left;\\n}\\n#commentTable tr td:last-child {\\n    text-align: right;\\n}\\ntr:hover {\\n    background-color: #eee;\\n    cursor: pointer;\\n}\\n\\n/* 輸入框樣式 */\\ntextarea, input {\\n    width: 100%;\\n    font-size: 20px;\\n    padding: 5px 0px;\\n    border: 1px solid #ccc;\\n    border-radius: 5px;\\n}\\ntextarea {\\n    height: 200px;\\n}\\n\\n/* 按鈕樣式 */\\nbutton {\\n    padding: 5px 10px;\\n    border-width: 0px;\\n    border-radius: 5px;\\n    margin: 10px 0px;\\n    font-size: 16px;\\n    color: #fff;\\n    background-color: #dc3545;\\n    cursor: pointer;\\n}\\nbutton:hover {\\n    background-color: #bc1525;\\n}\",\"js\":\"var name = USER_NAME;\\nvar comments = DB.table(\\\"comments\\\");\\nvar posts = DB.table(\\\"posts\\\");\\n\\n// 初始更新\\nposts.find({}, updatePostTable);\\n\\n//「返回」按鈕被按下時\\n$('.backBtn').click(function () {\\n    $('#postsBox').show();\\n    $('#contentBox').hide();\\n    $('#formBox').hide();\\n});\\n\\n//「新增文章」按鈕被按下時\\n$('#createPostBtn').click(function () {\\n    $('#postsBox').hide();\\n    $('#contentBox').hide();\\n    $('#formBox').show();\\n});\\n\\n//「進入」按鈕被按下時\\n$('#postTable').on('click', 'tr', function () {\\n    $('#postsBox').hide();\\n    $('#contentBox').show();\\n    $('#formBox').hide();\\n    \\n    // 第二週內容\\n    postId = $(this).data('id');\\n    showPost(postId);\\n});\\n\\n//「新增文章」按鈕被按下時\\n$('#submitBtn').click(createPost);\\n\\n//「新增留言」按鈕被按下時\\n$('#createCommentBtn').click(createComment);\\n\\nfunction showPost (postId) {\\n    posts.find({id: postId}, updatePost);\\n    comments.find({postId: postId}, updateCommentTable);\\n}\\n\\n// 新增一篇文章\\nfunction createPost () {\\n    var title = $('#title').val();\\n    var content = $('#textarea').val();\\n    $('#title').val('');\\n    $('#textarea').val('');\\n    posts.insert({\\n        author: name,\\n        title: title,\\n        content: content,\\n    });\\n    posts.find({}, updatePostTable);\\n    $('.backBtn').click(); // 程式觸發按鈕點擊\\n}\\n\\n// 新增一則留言\\nfunction createComment () {\\n    var content = $('#text').val();\\n    $('#text').val('');\\n    comments.insert({\\n        author: name,\\n        content: content,\\n        postId: postId\\n    });\\n    comments.find({postId: postId}, updateCommentTable);\\n}\\n\\n// 顯示刷新文章內容\\nfunction updatePost (data) {\\n    var post = data[0];\\n    $('#contentBox h2').text(post.title);\\n    $('#contentBox p').text(post.content);\\n};\\n\\n// 顯示刷新文章列表\\nfunction updatePostTable (data) {\\n    $('#postTable').html('');\\n    data.forEach(function (post) {\\n        var date = new Date(post.createdAt);\\n        var html = `\\n            \u003ctr data-id=\\\"${post.id}\\\"\u003e\\n                \u003ctd\u003e${date.toLocaleDateString()}\u003c/td\u003e\\n                \u003ctd\u003e${post.author}\u003c/td\u003e\\n                \u003ctd\u003e${post.title}\u003c/td\u003e\\n            \u003c/tr\u003e\\n        `\\n        $('#postTable').append(html);\\n    });\\n}\\n\\n// 顯示刷新留言列表\\nfunction updateCommentTable (data) {\\n    $('#commentTable').html('');\\n    data.forEach(function (comment) {\\n        var date = new Date(comment.createdAt);\\n        var html = `\\n            \u003ctr\u003e\\n                \u003ctd\u003e${comment.author}\u003c/td\u003e\\n                \u003ctd\u003e${comment.content}\u003c/td\u003e\\n                \u003ctd\u003e${date.toLocaleDateString()}\u003c/td\u003e\\n            \u003c/tr\u003e\\n        `\\n        $('#commentTable').append(html);\\n    });\\n}\"}","created_at":"2017-12-16T18:05:27.334+08:00","updated_at":"2019-11-10T15:10:08.330+08:00","name":"討論版","language":"web","screenshot":{"url":"/uploads/project/screenshot/17990/f3fcdbddfb62831e5461279723692268.jpg"},"parent_id":null,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":652,"hashid":"d5msv5ep","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}