week12(2021/6/28~2021/7/4)

日期：110年6月29日20:30~22:30
今日進度：[BE101] 用 PHP 與 MySQL 學習後端基礎：真正的實戰：留言板 - API 篇

課程筆記：

一、實作無會員機制的留言板 API：列出所有文章

新增api-comments.php


<?php
$comments = array();
array_push($comments, array(
"id"=> 1,
"username"=> "aaa",
"content"=> "123"
));
array_push($comments,array(
"id"=> 2,
"username"=> "bbb",
"content"=> "456"
));

$json = array(
"comments" => $comments
);

$response = json_encode($json);
header('Content-type:application/json;charset=utf-8');
echo $response;

加上```header('Content-type:application/json;charset=utf-8');```，讓瀏覽器知道要取得json格式的物件  
json格式如下：  
```{"comments":[{"id":1,"username":"aaa","content":"123"},{"id":2,"username":"bbb","content":"456"}]}```  

* 自index.php取得query部分語法，不同的是把comments的結果放在陣列裡，裡面再建立陣列，產出json格式的物件，設置header得到comments的API，便可以用前端串接起來

<?php require_once("conn.php");

$page = 1; if (!empty($_GET['page'])) { $page = intval($_GET['page']); } $items_per_page = 5; $offset = ($page - 1) * $items_per_page;

$stmt = $conn->prepare( 'select '. 'C.id as id, C.content as content, '. 'C.created_at as created_at, U.nickname as nickname, U.username as username '. 'from comments as C ' . 'left join users as U on C.username = U.username '. 'where C.is_deleted IS NULL '. 'order by C.id desc '. 'limit ? offset ? ' ); $stmt->bind_param('ii', $items_per_page, $offset); $result = $stmt->execute(); if (!$result) { die('Error:' . $conn->error); }

$result = $stmt->get_result();

$comments = array(); while($row = $result->fetch_assoc()) { array_push($comments, array( "id"=> $row['id'], "username"=> $row['username'], "nickname"=> $row['nickname'], "content"=> $row['content'], "created_at"=>$row['created_at'] )); }

$json = array( "comments" => $comments );

$response = json_encode($json); header('Content-type:application/json;charset=utf-8'); echo $response;


二、實作 API：新增文章  
* 利用handle_add_comment.php新增api_add_comment.php

if ( empty($_POST['content']) ) { $json = array( "ok" => false, "message"=> "Please input content" );

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

}

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

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

}

$json = array( "ok" => true, "message"=> "Success!" );


在之前如果要顯示錯誤訊息，是導向到另外一個顯示錯誤的頁面，但API是直接交換錯誤或正確訊息  
```{"ok":false,"message":"Please input content"}```

日期：110年6月30~7月4日
進度：[FE201] 前端中階：那些前端會用到的工具們 - jQuery

課程筆記：

一、jQuery 基礎示範
要實現jQuery功能，首先在html中設定script來源為jQuery

<!DOCTYPE HTML>

<html>
  <head>
    <meta charset="utf-8" />
    <title>表單</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.jquery.com/jquery-3.6.0.js">
    </script>

試做按鈕點擊事件

原生版

<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
document.querySelector('.btn').addEventListener('click', function() {
  alert('click!')
})
})
</script>

jQuery版

<script src="https://code.jquery.com/jquery-3.6.0.js">
</script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
var element = jQuery('.btn')
element.click(function(e) {
  alert('click jq!')
})
})
</script>

註：jQuery可以代換成$，所以可改寫如下：

<script>
$(document).ready(function() {
$('.btn').click(function(e) {
  alert('click jq!')
})
})
</script>

再幫按鈕加上點擊事件

<script>
  var isHide = false
  $(document).ready(function() {
    $('.btn').click(function(e) {
      if (isHide) {
        $('.box').show()
      } else {
        $('.box').hide()
      }
      isHide = !isHide
    })
  })
</script>
<style>
    .box {
      width: 200px;
      height: 200px;
      background: grey;
    }
</style>
</head>
<body>
<button class="btn">I am a button</button>
<div class="box">box</div>
</div>
</body>

二、試做簡易Todo-List

<script>
  var isHide = false
  $(document).ready(function() {
    $('.btn').click(function(e) {
    $('.todo-input').val()
    })
  })

</script>
<style>
</style>
</head>
<body>
<input class="todo-input"/>
<button class="btn">Add todo</button>
<div class="todos">
</div>

jQuery的特別之處：
$('.todo-input').val()的value如果沒有值，是GET的功能，如果value有值就是SET。
如果要將輸入的值顯示出來，程式碼如下：

<script>
  var isHide = false
  $(document).ready(function() {
    $('.btn').click(function(e) {
      const value = $('.todo-input').val()
      $('.todo-list').css('color', 'red') // jQuery可直接設定css效果，為輸入的值加上顏色  
      $('.todo-list').val('') // 取值
      $('.todos').append(`<div class="todo">${value}</div>`) // 將取出的值合併
    })
  })

jQuery常用功能：addClass、removeClass、toggleClass...等，可在jQuery API查詢。

三、實作Todo-List

新增標記完成、刪除按鈕

<script>
  var isHide = false
  $(document).ready(function() {
    $('.btn').click(function(e) {
      const value = $('.todo-input').val()
      $('.todo-list').css('color', 'red')
      $('.todo-list').val('')
      $('.todos').append(`
      <div class="todo">
        ${value}
        <button class="btn-mark">標記完成</button>
        <button class="btn-delete">刪除</button>
      </div>`
      )
    })

因標記完成、刪除按鈕是隨著輸入值動態新增，所以需要事件代理。以下為刪除按鈕：

$('.todos').on('click', '.btn-delete', function(e) {
$(e.target).parent().remove()
})

將事件設定為todos，條件為click，代理事件為btn-delete

標記完成

$('.todos').on('click', '.btn-mark', function(e) {
const todo = $(e.target).parent();
todo.css('color', 'green')
todo.addClass('complete')
$(e.target).text('標記未完成')
})

點選標記完成按鈕後，輸入值會變成綠色，按鈕名稱變成標記未完成。如果要把完成狀態改回未完成：

$('.todos').on('click', '.btn-mark', function(e) {
const todo = $(e.target).parent();
// 變成未完成
if (todo.hasClass('complete')) {
todo.css('color', 'black')
todo.removeClass('complete')
$(e.target).text('標記完成')
} else {
todo.css('color', 'green')
todo.addClass('complete')
$(e.target).text('標記未完成')
}
})

把原本已完成的狀態，字體顏色從綠色改為黑色，按鈕從標記未完成改為標記完成

新增移除所有todos按鈕

<body>
<input class="todo-input"/>
<button class="btn">Add todo</button>
<button class="btn-remove-all">Remove all todos</button>
<div class="todos">
</div>
</body>

設定按鈕事件

$('.btn-remove-all').click(() => {
$('.todos').empty();
})

注意這裡要用empty而不是remove，因為remove會把整個div刪除，如果要再新增todos就會出錯。

四、 jQuery 與 Ajax
Ajax可以讓瀏覽器向Server請求資料而不需費時等待。當瀏覽器接收到response之後，新的內容就會即時地添入原本網頁，無須整個頁面重新整理。

取得結果

$.ajax({
method: 'GET',
url: 'https://restcountries.eu/rest/v2/taiwan'
}).done(function(data) {
console.log(data)
})

可參考You might not need jQuery

錯誤存取

$.ajax({
method: 'GET',
url: 'https://restcountries.eu/rest/v2/taiwan'
}).done(function(data) {
console.log(data)
}).fail(function(err) {
console.log('err', err)
})

五、Bootstrap

提供很多CSS + JS，可以幫助開發者設計網頁時有一些可以立即套用的功能
- Bootstrap
- 引用如下：
```
<link href="css/bootstrap.min.css" rel="stylesheet">
```

六、Bootstrap 的網格系統
Bootstrap 透過其網格系統 (grid system) 架構, 讓前端設計師開發在各種裝置 (手機, 平板, 桌機) 均可方便瀏覽的網頁, 即所謂自適應 (responsive) 網頁設計, 不需要來回拉動卷軸。常見為12欄位(手機版面)。

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="box">box1</div>
      </div>
      <div class="col-12">
        <div class="box">box2</div>
      </div>
      <div class="col-12">
        <div class="box">box3</div>
      </div>
    </div>
  </div>

設定平板版面：<div class="col-12 col-md-4">
網格系統可以在不同解析度裡設定要多少網格，並且任意安排位置。

Lu-yeom / mentor-program-5th-self-learning

week12(2021/6/28~2021/7/4) #11