當資料庫和資料表建立好後，再來就是讓網頁和資料庫做連線，這樣才能透過網頁將資料寫到資料庫或是從網頁查看資料庫資料。

我們用php來製作與資料庫連線用的檔案，透過php連線去取得或寫入資料庫內的資料。之後再用ajax從php那邊將資料抓到html網頁。

我們用php做資料庫連線時要先知道幾個會用到的程式。

1. 與mysql連線方法:

   $db = mysqli_connect("localhost", "資料庫使用者", "使用者密碼", "資料庫名稱");
   

2. 對mysql下指令:

   $result = $db -> query("SELECT * FROM user;");
   

   • 紅字部分是要對資料庫下的SQL指令。select...、 insert...、delete...等等。
   • $db 變數就是上面那段與mysql連線的程式。
3. 列出資料表有幾筆資料:

   $num = $result->num_rows;
   

4. 抓出每一筆資料和對應的欄位名稱:

   $ARAW = $result -> fetch_assoc();
   

5. 將每一筆資料寫入陣列:

   $output[] = $ARAW; ---記得陣列的變數要在後面加上[]喔
   

6. 將陣列編譯成json格式:

   print(json_encode($output, JSON_UNESCAPED_UNICODE));
   

(以上藍色字體的部分皆可自己定義變數，但要注意的是這幾行程式變數是有相通的，要注意)

上面提到的程式，再搭配之前講過的php的程式，就可以跟資料庫連線。

用php將資料庫內的資料抓下來，並編譯成JSON格式:

1. 確認資料表裡已有資料 (可以先直接在phpmyadmin裡insert進去)
   
   
2. 建立一個名叫db.php的檔案
3. 新增與mysql連線的程式，變數名稱就叫 db 。
4. 新增要對mysql下的指令程式，變數名稱叫 result 。
5. 新增一個變數叫 num，這個變數是總共有幾筆資料。
6. 用迴圈的方式將每一筆資料和欄位名稱寫入到output[]的陣列中。(fetch_assoc)
7. 將output[]這個陣列的內容編譯成JSON格式。
8. 將編譯完成的JSON格式印出來。

完成後會像這樣:

可以看到資料表內的每一筆資料都抓出來，並且欄位名稱也都會一起出現。

現在已經將資料庫連結檔做好了，php那邊也已經取得資料表的資料，再來就是要讓這些資料在html網頁上顯示，這個時候就是要用到ajax了。

什麼是Ajax ??

Ajax 的全名是『 Ajax: Asynchronous Javascript And XML 』，意思是『非同步 JavaScript 與 XML』的意思，所以，跟資料的『非同步運作』， 透過 JavaScript 與 XML 格式有點關係的資料。

一般來說，如果你的網頁資料非常豐富，因此有影片資料、圖片資料、文字資料、JavaScript 程式碼資料等等，其中影片與圖片資料可能有非常多， 因此，要下載你的這個網頁 (onload) 時，就得要將所有的元件通通下載完畢之後，才能夠開始正常的顯示你的頁面。 在用戶端要求了 URL 之後，用戶端得要等伺服器將『所有的元件』傳輸到用戶端系統後，瀏覽器才開始正常顯示頁面。 這樣傳統的全部資料載入才顯示的方法，對伺服器的 loading 來說相當消耗頻寬。

• 更新網頁的資料並不需要全部網頁重新載入 (without reloading)
• 可以在網頁載入完畢後，在該網頁內部向 server 要求資料
• 可以在網頁載入完畢後，在該網頁內部取得 server 回傳的資料來更新自己頁面
• 在背景環境中，傳送資料到伺服器端，不會變動網頁畫面。

var xhr_db = new XMLHttpRequest();  --> 建立一個Ajax物件
xhr_db.open("POST","db.php",true);  --> 向伺服器說明，需要哪個檔案、程式碼或資料
xhr_db.send();			    --> 將上述的需求送出。
xhr_db.onload = function(){ 	    --> 當上面的需求完成時就執行這個function
	var data = JSON.parse(this.responseText); --> 將抓過來的資料轉成JSON格式
	console.log(data); 	    --> 資料取得成功後可以在console中看到抓取到的資料
}

建立Ajax取得資料庫資料

• 建立一個名叫db.html的網頁。
• 在body裡面建立一個div，id就取名叫db。
• 在body裡面下一個onload讓網頁啟動後就執行init的函數。
• 在script中建立init函數，當執行這個函數時會執行其他函數。
• 新增一個叫db的函數。
• 在db函數中新增Ajax物件取得資料庫資料。
• 資料取得後，再用 html 和 js 的程式將資料顯示在網頁上。

完成後會像這樣: 可以看到我們資料庫的資料顯示在網頁上。

上一章講到的是讓網頁抓去資料庫資料，這一部分要提到的是從網頁上傳資料到資料庫，這一部份不會用到Ajax，而是會用到之前提到的form、input的方式再加上前面提到的資料庫連線檔(php)，將資料寫入資料庫。

製作資料上傳的功能

• 在db.html中新增form、input的元素。
• form的上傳位置為 upload.php，上傳方式就用post
• 建立一個input，類型用text，取名為 name
• 再建立一個input，類型用password，取名為 pwd
• 新增一個上傳按鈕

• 新增一個名為 upload.php的檔案
• 新增兩個變數分別叫做name、pwd，將剛才db.html的兩個input的值定義到這兩個變數。
• 建立mysql連線設定(mysqli_connect)
• 搭配前兩個變數(name,pwd)對mysql下新增資料指令(insert into)
• 以上動作完成後會出現彈出式視窗顯示上傳成功或失敗，並跳回db.html的頁面(alert、location.href)。

完成後會像這樣: 上傳後會有彈出式視窗 上傳成功後資料表會多一筆資料 從phpmyadmin看也會出現新的資料

刪除資料的做法跟上面的上傳資料是一樣的做法，把SQL的指令改成delete就好，但要注意的是，刪除資料要把被刪除的那筆資料寫清楚，否則有可能會刪錯或多刪除資料，要特別注意喔。

刪除的方式跟上面資料上傳不一樣，資料上傳需要透過輸入框填寫我們要上傳的資料，刪除則是只要透過按鈕按下後就會進行動作，所以當我們按下刪除按鈕後會同時把要刪除的資料一起傳到php檔做動作。

我們可以用兩種方式當按下按鈕時同時傳送資料

• 用form和input做上傳，這種方式input的類型要用隱藏(hidden)，我們直接把input要上傳的值(value)寫成固定的值，也就是要刪除的那筆資料，但這個方式會寫比較多的input，會比較亂一點。
• 用 a 和 href再配合php的變數直接上傳
  <a href="del.php?變數名稱=值&變數名稱=值">
  也可以用這種方式上傳值，這個方式是要寫比較長的<a>。

製作刪除資料功能

• 先在每一筆資料旁邊都新增一個刪除按鈕。
• 用<a href>的方式做上傳要刪除資料值。
• 新增一個叫 del.php的檔案，我們要用<a>將要刪除的值傳到這個php檔做SQL的刪除動作。
• 當按下刪除的按鈕會先跳出彈出式視窗詢問是否確定要刪除。
• 在del.php中做資料取得和與資料庫連線。
• SQL的指令用刪除的指令(delete ..)。
• 因為要刪除的資料只有一筆，所以在SQL指令中用where做判斷。
• 以上動作做完後會出現彈出式視窗顯示刪除成功或失敗，並跳回db.html的頁面。

完成後會像這樣:
按下刪除鈕後會先出現確認框詢問。 刪除成功後會出現告知。 會跳回到原本的網頁，而且少一筆資料。