# 前後端整合 - 學習 jQuery 與 Bootstrap

###### tags: `Tag(jQuery 與 Bootstrap)`

## 什麼是 SPA
Single Page Application 想增進使用者體驗，而出現的一種==在前端利用 Ajax 達成不換頁的方法==。
##### `優點`

* 後端只負責輸出資料，前端來負責抓資料跟渲染畫面。
* 後端變成了一個單純的 API，可以給不同的前端做調用。
* 把前後端完完全全的切開，就算後端壞掉，前端還是看得到畫面
* 前端壞掉，後端還是能安穩的輸出資料供其他服務使用。

##### `缺點`

* 檢視 SPA 頁面的原始碼，會發現沒有畫面上看到的內容的程式碼，
  這是因為畫面的渲染是由 JavaScript 動態產生的，這樣會使網站的 SEO 表現很差
* 如果從伺服器抓取的資料比較多的話，第一次載入頁面的速度可能會比較慢。

## 怎麼樣用 PHP 自己寫出 API

##### `範例：作業`
###### `拿儲存到資料庫的todolist的 API`

<?php
  require_once('conn.php');
  // 輸出jason資料
  header('Content-type:application/json;charset=utf-8');
  header('Access-Control-Allow-Origin: *');
  // 錯誤處理 - 如果前端的資料是空的
  if (empty($_GET['id'])) {
    $json = array(
      'ok' => false,
      'message' => 'Please provide a list ID'
    );
    // 把資料變成jason的格式
    $response = json_encode($json);
    echo $response;
    die();
  }
  // 錯誤處理完之後可以拿資料
  $id = intval($_GET['id']);
  //拿完資料後可以新增到資料庫裡面
  $sql = "SELECT * FROM ruofan_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"]
    )
  );
  // 把物件用json_encode這個function變成json的字串後輸出，這樣client就可以接收到
  $response = json_encode($json);
  echo $response;
?>

###### `把前端todolist的資料存到資料庫的 API`

<?php
  require_once('conn.php');
  // 輸出jason資料
  header('Content-type:application/json;charset=utf-8');
  header('Access-Control-Allow-Origin: *');
  // 錯誤處理 - 如果前端post的資料是空的
  if (empty($_POST['todo'])){
    $json = array(
      'ok' => false, 
      'message' => 'no todos.'
      );
    $response = json_encode($json);
    echo $response;
    die();
  } 
    // 錯誤處理完之後可以拿資料
    $todo = $_POST['todo'];
    //拿完資料後可以新增到資料庫裡面
    $sql = "INSERT INTO ruofan_todos(todo) VALUES (?)";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param('s', $todo);
    $result = $stmt->execute();
    //執行完之後可以根據內容來看有沒有成功 - 如果沒有資料
    if(!$result){
      $json = array(
      'ok' => false, 
      'message' => 'no todos.'
      );
      // 把資料變成jason的格式
      $response = json_encode($json);
      echo $response;
      die();
    }
  // 如果成功有資料 產生一個陣列
  $json = array( 
      "ok" => true, 
      "message" => "success",
      "id" => $conn->insert_id
    );
    // 把物件用json_encode這個function變成json的字串後輸出，這樣client就可以接收到
    $response = json_encode($json);
    echo $response;
  

?>

## 如何在前端與自己開的 API 串接

##### `範例：作業`

###### `把資料存到資料庫`

// 儲存功能
$('.save').click(() => {
// 先從UI拿到要存到資料庫的內容
let todos = [];
$('.card').each((i, element) => {
  const check = $(element).find('.check-btn')
  const content = $(element).find('.content')
  // 把拿到的資料放到todos這個陣列裡
  todos.push({
    id: check.attr('id').replace('todo-', ''),
    content: content.text(),
    done: check.hasClass('checked')
  })
})
  // 把陣列轉成JSON格式的字串
  const data = JSON.stringify(todos)
  // 把todo的資料存到資料庫
  $.ajax({
    type: 'POST',
    url: `http://localhost:8080/ruofan_php/to-do-list/save_lists.php`,
    data: {
      todo: data
    },
    success: function (res) {
      const resId = res.id 
      window.location = 'http://localhost:8080/ruofan_php/to-do-list/todolist.html?id=' + resId
      alert('儲存成功')
    },
    error: function () {
    alert('尚未成功')
    }
  })
})

###### `帶入id載入之前存在資料庫的資料`

// 當輸入html標籤時，會印出標籤
function escapeHtml (todo) {
  return todo
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

const template = `
<div class="card d-flex">
        <div class="card-body">
          <div class="add-todo">
           <div class="check-btn {todoClass}" id="todo-{id}">⬜</div>
            <div for="todo-{id}" id="{id}" class="content">{content}</div>
          </div>
          <div class="edit-todo">
            <i class="far fa-trash-alt delete"></i>
            <i class="fas fa-pencil-alt edit" data-toggle="modal" data-target="#edit-content"></i>
          </div>
        </div>
      </div>
`

// 載入資料的功能
var searchParams = new URLSearchParams(window.location.search);
const todoId = searchParams.get('id')
// 載入 id對應的資料
if (todoId){
  $.getJSON('http://localhost:8080/ruofan_php/to-do-list/get_lists.php?id=' + todoId, function(data){
    const todos = JSON.parse(data.data.todo)
    restoreTodos(todos)
  })
}

function restoreTodos(todos){
  console.log(todos) // 可以印出todos 看一下資料長什麼樣子
  for(let i=0; i<todos.length; i++){
    const todo = todos[i]
    $('.comments').prepend(
      template
        .replace('{content}', escapeHtml(todo.content))
        .replace(/{id}/g, todo.id)
        .replace('{todoClass}', todo.done ? 'checked' : '')
    )
    if (todo.done) {
      $('#todo-' + todo.id).prop('checked', true)
      $('#todo-' + todo.id).html('✔️')
      $('#todo-' + todo.id).next().toggleClass('line-through')
    }
   
  }
}

## 在 server 與在 client render 的差別
>[React | 用實作了解 Server-Side Rendering 的運作原理](https://medium.com/starbugs/react-%E7%94%A8%E5%AF%A6%E4%BD%9C%E4%BA%86%E8%A7%A3-server-side-rendering-%E7%9A%84%E9%81%8B%E4%BD%9C%E5%8E%9F%E7%90%86-c6133d9fb30d)

#### `client side render`
在執行期間「動態」去跟後端伺服器拿資料，當前端拿到資料以後，才用 JavaScript 動態的把那些內容填到網頁上面。

  前端透過 ajax 去跟後端的 API 互動，後端判斷資料是否正確，並把存到資料庫中，
  並透過 API 把成功或失敗的 response 回傳給前端，而前端拿到的 response 後，
  再由 JavaScript 來決定要渲染什麼畫面，所渲染的畫面是透過 JavaScript 
  操控 DOM 元素而動態產生的

#### `server side render`

Server 會用 URL 的 path 來決定要 Render 什麼畫面，然後顯示在前端頁面上

###### `優點`

* SEO
  SSR 在第一次載入時就會有內容在了，搜尋引擎表示非常滿意。
  
* 效能更好:
  第一次 Render 的所有事情（包含 call API）都是 Server 做的，
  Client 端就比較沒有負擔。

###### `缺點`

- 所有內容都在伺服器端處理、組裝完成後才將完整的HTML/CSS/JavaScript 檔案
  回傳給客戶端。也因為 HTML 檔（包含資料）是在伺服器上組裝完成才回傳給瀏覽器，
  所以每次載入新資料的時候都需要換頁。

###### `範例`

 當想要訪問文章列表這個頁面的時候，瀏覽器會送 request 到 server
 ，然後經過 controller 與 model，最後把資料帶給 view。

 view 再回傳一份完整的 HTML 檔案（這個動作就叫做 render）
 ，而瀏覽器拿到之後，只要顯示出來就好。因為 render 在 server side

## jQuery 是做什麼的 ? 與 vanilla js 的差別 ?
>[淺談 JQuery](https://ithelp.ithome.com.tw/articles/10092592)

>[jQuery 簡單介紹](https://jw310.github.io/2020/01/16/jQuery-base/#%E4%BD%BF%E7%94%A8-jQuery)

是一個 JavaScript 函式庫 (Javascipt Framework)，加速網頁程式開發速度的工具，可以==解決跨瀏覽器的問題，也可以簡化語法==
###### `範例` `讀取網頁中的單選按鈕「radio Button」`

 1 找出所有 input 元素 
 2 當元素是 radio button 且屬於某個 group 
 3 確認某個選項已經被勾選了 
 4 將勾選的值指派給 checkValue 變數

###### `JavaScript`

var checkValue;
var elements = document.getElementsByTagName(‘input’);
for (var n = 0; n < elements.length; n++){
if (elements[n].type == ‘radio’ && elements[n].name == ‘RadioGroup’ && elements[n].checked){
checkedValue = elements[n].value;
}

###### `jQuery`

var checkValue = $('[name="radioGroup"]:checked').val();

##### `使用 jQuery`

// 選取元素

$("div") // 選取所有 <div> 元素

$("#menu") // 選取 id 為 menu 的元素

$(".content") // 選取 class 為 content 的元素

$("div#body") // 選取 id 為 body 的 <div>

$('ul').children.eq(3).text(); // 取得第index個子節點: eq(index) 取得第三個子節點

-------------------------------------------------------------------

// 操作元素

// 讀取和修改一個元素的HTML內容: html()

$("p").html(); // 讀取 <p> 元素的內容

$("p").html("Hello <b>world</b>!"); // 修改 <p> 元素的內容

// 讀取和修改一個元素的純文本內容: text()

$("Element").text(); // 讀取 Element 的文本內容

$("Element").text("Hello <b>world</b>!"); // 修改 Element 的文本內容，Element 的 content 是 Hello <b>world</b>! 是文字格式，不是標籤元素

-------------------------------------------------------------------

// 讀取和修改一個表單元素的 value 值: val()
// 若是多個元素，只能讀取第一個元素的內容。要使用 for 或 each 來讀取多個。
//  讀取每一個被 checked 的值
$('input:checkbox[name=size]:checked').each(function()
  {
   alert($(this).val());
  });
  
$("Element").val(value); // 修改

-------------------------------------------------------------------
// 元素節點末端加入純文字或 HTML 語法(增加元素): append

$("a[target]").append("(Opens in New Window)"); // 選取所有有 target 屬性的 `<a>`，並且在其節點下加入一段文字。

$(div).prepend("first"); // 元素節點前端加上純文字或 HTML 語法(增加元素): prepend()

$("#test").addClass("aaa"); // class的新增: addClass()

class的移除: removeClass() // $("#test").removeClass("aaa");

-------------------------------------------------------------------
// 事件 點選元素: click
// //當 user 點選 id 為 open 的連結時，顯示 id 為 menu 的區塊，並回傳 false 避免瀏覽器真的換頁。
$("a#open").click(function() {  
  $("#menu").show();  
  return false;  
});

-------------------------------------------------------------------
// 切換: toggle()
// 按下 Hello 元素第一次會文字會是綠，第二次會是藍色
$('#mydiv').toggle(
	function(){
	  $(this).css({"color": "green"});
	},
	function(){
	  $(this).css({"color": "blue"});
	},
);

-------------------------------------------------------------------
// ajax
$.ajax({
type: "GET", //指定method
 url: 'ajax/test.html',
 success: function(data) {
  $('.result').html(data);
  alert('Load was performed.');
  }
});


// 取得 HTML: load()
$("#htmDoc").load("test.html");


// 取得 JSON 格式的資料: getJSON()
$.getJSON("test.json", function(data){  
  for (var idx in data)  
    $("#menu").append("<li>" + data[idx] + "</li>");  
});  


// document ready 事件
// 網頁下載完成後立即執行 alert()
$(document).ready(function() {  
  alert('Hello');  
});

## 什麼是 Bootstrap ? 原理及如何應用?
>[Bootstrap 初學介紹 ](https://medium.com/@weilihmen/bootstrap-%E5%88%9D%E5%AD%B8%E4%BB%8B%E7%B4%B9-%E9%9D%9C%E6%85%8B%E7%AF%87-f20500235b33)

>[Bootstrap](https://jw310.github.io/2019/12/14/bootstrap-base/)

>[淺談Bootstrap](http://yenchic-blog.logdown.com/posts/257912-a-brief-talk-on-bootstrap)

前端框架，含HTML、CSS及JS等內容的框架，可以快速開發出一個網頁版型(包含響應式網頁)。
:::warning

:::
###### `navbar 範例`
:::warning
:::

###### `alert 範例`
:::warning
:::

###### `調整alert的寬度`

<div class="row mt-4"> <!--這邊的mt-4 是margin-top：4px;的縮寫 -->
      <div class="col-12"> <!--這邊的col-12 是指直接讓alert滿格 -->
        <div class="alert alert-primary" role="alert">
          這是我的 todo 小作品！
        </div>
      </div>
    </div>

###### `form 範例`
:::warning

:::

###### `調整 form的寬度`

 <div class="row">
      <div class="col-12 col-md-8"> 
        <div class="form-group">
          <input type="text" placeholder="請輸入待辦事項" class="form-control" id="exampleInputPassword1">
        </div>
      </div>
      <div class="col-12 col-md-4">
        <button class="btn btn-primary btn-block">新增</button> <!--這邊的btn-block 讓button寬度可以滿格  -->
      </div>
    </div>

###### `card 範例`
:::warning

:::
###### `調整 card的寬度`

 <div class="card"> <!--原本的 style="width: 18rem; 刪掉，card的寬度就可以滿格  -->
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

###### `Badges 範例`
:::warning

:::

###### `bootswatch - 提供不同主題顏色`
:::warning

:::
###### `套用方式 - 在header加上連結`
:::warning

:::