week12 HW 留言板

JS 串接與 PHP 輸出最大差異 : 內容誰產生

這個留言板不需登入

希望不同網站可以有自己的留言板 => 若 site_key 相同就在同一個網站底下。

後端

一、 conn.php

二、新增評論的 api

1. 處理輸出格式讓瀏覽器可以看懂是 json type
2. 錯誤處理
3. 拿資料再寫入，寫入又分成資料新增成功/失敗兩類
4. 利用 postman 進行 api 測試

三、拿 comments 的 api

1. 處理輸出格式讓瀏覽器可以看懂是 json type
2. 確認是 site_key 才給值，因為我們用 site_key 區分不同留言板
3. 用 get 拿 site_key，將後端符合資料拿入

新增 comments 拿 comments 的 api 完成就可以用前端串接。

前端

一、刻 UI

1. 使用 bootstrap，將其 css 引入
2. 製作 class container，裡面放入表單
3. 留言內容 textera /提交按鈕 submit/ 

二、事件監聽

1. 引入 jQuery
2. 串顯示留言的 api => 看 ajax 的部份要怎麼拿
3. 加上 escape funct 處理 xss
4. 補齊前端新增留言，將新增的留言放到 done 上去/再 query 一次 api 將新的內容放上去

目前代碼長相

$(document).ready(() => {
  const commentToDom = $('.comments__list')
  $.ajax({
  url: "http://localhost/angela/%e7%95%99%e8%a8%80%e6%9d%bf/TEST/week12/hw1/api_comments.php?site_key=angela",
  }).done(function(data) {
    if (!data.ok) {
      alert(data.msg)
      return
    }
    const comments = data.comments
    for (let comment of comments) {
      appendCommentToDom(commentToDom, comment)
    }
  })
  $('.add-comment-form').submit( (e) => {
    e.preventDefault()
    const datas = {
      'site_key': 'angela',
      'nickname' : $('input[name=nickname]').val(),
      'content' : $('textarea[name=content]').val(),
    }
    $.ajax({
      type: 'POST',
      url: 'http://localhost/angela/%e7%95%99%e8%a8%80%e6%9d%bf/TEST/week12/hw1/api_add_comments.php',
      data: datas
    }).done(function(data) {
      if (!data.ok) {
        alert(data.msg)
        return
      }
      $('input[name=nickname]').val(''),
      $('textarea[name=content]').val('')
      appendCommentToDom(commentToDom, datas, true)
    })
  })
})

function escape(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

function appendCommentToDom(container, comment, isPrepend) {
  const html = `
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">${escape(comment.nickname)}</h5>
      <p class="card-text">${escape(comment.content)}</p>
    </div>
  </div>
  `
  if (isPrepend) {
    container.prepend(html)
  } else {
    container.append(html)
  }
}