W12_作業二實作記錄 [ MTR05 ] 實作之四

6. 實作 todo list_W12_hw2

MTR05第十二週（06/28 ~ 07/04）：前後端整合 Todo list 參考範例 Part1：前端功能

流程：

新增(點擊按鈕新增 + enter 新增) -> 刪除 ->

1. 按 enter 可以新增 todo 10':00"

$('.new-todo').keydown(e => {
  if (e.key === 'Enter') {
    addNewTodo()
  }
})

27'40" filter

遇到的困難：

1. 刪除時，未完成的東西被多算進去一次了，所以最後未完成事項變成負數

7. 把資料從 UI 裡面拿出來_W12_hw2

MTR05第十二週（06/28 ~ 07/04）：前後端整合 Todo list 參考範例 Part3：從 UI 拿出資料

目標是把每一個 todo 的資料轉換成 JSON 格式，然後送到 server 端存起來。

主要要拿 'id'、'content'、'completed'(是否完成) 這三樣東西

流程：

1. 監聽儲存按鈕

2. 設一個變數存資料

3. 把每一個 todo 的內容都拿出來 each(i, el)

4. 找出需要的資料

5. 把資料放到陣列裡面

6. 把資料轉成 JSON 格式

8. 實作 todo API_W12_hw2

MTR05第十二週（06/28 ~ 07/04）：前後端整合 Todo list 參考範例 Part4：實作與串接後端 API

承 7，實作API

流程：

1. 複製之前留言板的 API 檔案，有分 api_get_todo / api_add_todo

2. 建資料庫 todos，分別有兩個欄位，id / todo；todo 包含了三個資料：id, content, checked(有無完成)

3. 要特別注意的是，應該要拿到最後完成的 id
   老師搜尋關鍵字：'php get last id' $conn->insert_id

• api_get_todo

<?php  
  require_once('conn.php');
  header('Content-type: application/json;charset=utf-8');
  header('Access-Control-Allow-Origin: *');
  if (
    empty($_GET['id'])
  ) {
    $json = array(
      'ok' => false,
      'message' => 'Please add id in url'
    );

    $response = json_encode($json);
    echo $response;
    die();
  }

  $id = intval($_GET['id']);

  $sql = 'select id, todo from todos where id = ?';
  $stmt = $conn->prepare($sql);
  $stmt->bind_param('i', $id);

  $result = $stmt->execute();

  if (!$result) {
    $json = array(
      'ok' =>  false,
      'message' => $conn->error
    );

    $response = json_encode($json);
    echo $response;
    die(); 
  }

  $result = $stmt->get_result();
  $row = $result->fetch_assoc();
  $json = array(
    'ok' => true,
    'data' => array(
      'id' => $row['id'],
      'todo' => $row['todo']
    )
  );

  $response = json_encode($json);
  echo $response;
  die();
?>

• api_add_todo

<?php  
  require_once('conn.php');
  header('Content-type: application/json;charset=utf-8');
  header('Access-Control-Allow-Origin: *');
  if (empty($_POST['todo'])) {
    $json = array(
      "ok" => false,
      "message" => "Please input missing fields"
    );

    $response = json_encode($json);
    echo $response;
    die();
  }

  $todo = $_POST['todo'];

  $sql = "insert into todos(todo) values(?)";
  $stmt = $conn->prepare($sql);
  $stmt->bind_param('s', $todo);
  $result = $stmt->execute();

  if (!$result) {
    $json = array(
      "ok" =>  false,
      "message" => $conn->error
    );

    $response = json_encode($json);
    echo $response;
    die();
  }

  $json = array(
    "ok" => true,
    "message" => "success",
    "id" => $conn->insert_id
  );

  $response = json_encode($json);
  echo $response;
?>

9. 串接 todo API_W12_hw2

MTR05第十二週（06/28 ~ 07/04）：前後端整合 Todo list 參考範例 Part4：實作與串接後端 API 06':00"

流程：

1. 在監聽儲存按鈕裡面繼續寫，用 $.ajax()

$('.btn-save').click(() => {
  let todos = []
  $('.todo').each((i, element) => {
    const isChecked = $(element).find('.mark')
    const content = $(element).find('.todo-content')
    todos.push({
      id: isChecked.attr('id'),
      content: content.text(),
      isDone: $(element).hasClass('completed')
    })
  })
  const data = JSON.stringify(todos)
  $.ajax({
    type: 'POST',
    url: 'http://localhost:8080/christy/w12/todo/api_add_todo.php',
    data: {
      todo: data
    },
    success: function(res) {
      console.log('res', res)
    },
    error: function() {
      alert('err', error)
    }
  })
})