PHP & Mysql/Mariadb 連線

 


今天我們來討論如何用原生的PHP與Mysql/Mariadb做連線 , 直接上程式碼~

<?php
	$server = "localhost";         # MySQL/MariaDB 伺服器
	$dbuser = "root";       # 使用者帳號
	$dbpassword = ""; # 使用者密碼
	$dbname = "test";    # 資料庫名稱

	# 連接 MySQL/MariaDB 資料庫
	$connection = new mysqli($server, $dbuser, $dbpassword, $dbname);

	# 檢查連線是否成功
	if ($connection->connect_error) {
	  die("連線失敗：" . $connection->connect_error);
	}

	# MySQL/MariaDB 指令
	$sqlQuery = "資料庫的程式碼打在這邊";

	# 執行 MySQL/MariaDB 指令
	if ($connection->query($sqlQuery) === TRUE) {
	  echo "成功建立資料表。";
	} else {
	  echo "執行失敗：" . $connection->error;
	}

	# 關閉 MySQL/MariaDB 連線
	$connection->close();
?>


一起來製作一個簡單的筆記本範例吧!

創建一個名叫 notes的資料表

<?php
	$server = "localhost";         # MySQL/MariaDB 伺服器
	$dbuser = "root";       # 使用者帳號
	$dbpassword = ""; # 使用者密碼
	$dbname = "test";    # 資料庫名稱

	# 連接 MySQL/MariaDB 資料庫
	$connection = new mysqli($server, $dbuser, $dbpassword, $dbname);

	# 檢查連線是否成功
	if ($connection->connect_error) {
	  die("連線失敗：" . $connection->connect_error);
	}

	# MySQL/MariaDB 指令
	$sqlQuery = "CREATE TABLE `notes` (
		`id` INT(11) NOT NULL AUTO_INCREMENT,
		`title` VARCHAR(100) NOT NULL COLLATE 'utf8mb4_unicode_ci',
		`content` TEXT NOT NULL COLLATE 'utf8mb4_unicode_ci',
		PRIMARY KEY (`id`)
	)";

	# 執行 MySQL/MariaDB 指令
	if ($connection->query($sqlQuery) === TRUE) {
	  echo "成功建立資料表。";
	} else {
	  echo "執行失敗：" . $connection->error;
	}

	# 關閉 MySQL/MariaDB 連線
	$connection->close();
?>



加入一些資料吧~

<?php
	$server = "localhost";         # MySQL/MariaDB 伺服器
	$dbuser = "root";       # 使用者帳號
	$dbpassword = ""; # 使用者密碼
	$dbname = "test";    # 資料庫名稱

	# 連接 MySQL/MariaDB 資料庫
	$connection = new mysqli($server, $dbuser, $dbpassword, $dbname);

	# 檢查連線是否成功
	if ($connection->connect_error) {
	  	die("連線失敗：" . $connection->connect_error);
	}

	# MySQL/MariaDB 指令
	$sqlQuery = "INSERT INTO notes (title,content) VALUES 
		('早上','打掃'),
		('中午','看書'),
		('晚上','打籃球');";

	# 執行 MySQL/MariaDB 指令
	if ($connection->query($sqlQuery) === TRUE) {
	  	echo "成功建立資料表。";
	} else {
		# 執行失敗並顯示錯誤訊息
	  	echo "執行失敗：" . $connection->error;
	}

	# 關閉 MySQL/MariaDB 連線
	$connection->close();
?>


是不是很簡單呢 ~ 但是這樣還不是一個完整的網站 , 應該要有一個畫面讓使用者直接新增吧 , 那我們繼續來實作~

加入畫面 , 並且使用 ajax 來完成新增資料

如果還不熟悉 ajax 可以看這篇 jquery & ajax教學

這邊我們有兩個檔案 , index.php(畫面) 和 insert.php(新增進資料庫)

index.php

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

        <title>Notes</title>
    </head>
    <body>
        <div class="container">
            <div class="row mt-5">
                <div class="col">
                    <h1 style="text-align: center;">筆記本</h1>
                    <!-- 以下為php從資料庫撈取資料並且輸出畫面的程式碼 -->
                    <?php
                        $server = "localhost";         # MySQL/MariaDB 伺服器
                        $dbuser = "root";       # 使用者帳號
                        $dbpassword = ""; # 使用者密碼
                        $dbname = "test";    # 資料庫名稱

                        $connection = new mysqli($server, $dbuser, $dbpassword, $dbname);

                        # 檢查連線是否成功
                        if ($connection->connect_error) {
                          die("連線失敗：" . $connection->connect_error);
                        }

                        # MySQL/MariaDB 指令
                        $sqlQuery = "SELECT title,content FROM notes";

                        # 執行 MySQL/MariaDB 指令
                        if ($result = $connection->query($sqlQuery)) {
                          # 取得結果
                            
                        // output data of each row
                        while($row = $result->fetch_assoc()) {
                            //輸出html畫面
                            echo "<h5 style='color: red;'>標題</h5>" . $row["title"].'<br>'. "<h5 style='color: red;'>內容</h5>" . $row["content"]."<hr>";
                        }

                          # 釋放資源
                          $result->close();
                        } else {
                          echo "執行失敗：" . $connection->error;
                        }

                        # 關閉 MySQL/MariaDB 連線
                        $connection->close();
                    ?>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col">
                    <div class="form-group">
                        <label for="title">標題</label>
                        <input type="email" class="form-control" id="title" placeholder="最多100字...">
                    </div>
                    <div class="form-group">
                        <label for="content">內容</label>
                        <textarea class="form-control" id="content" rows="3" placeholder="請填寫內容"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" id="enter">送出資料</button>
                </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </body>
</html>

<script type="text/javascript">
    // 等全部的DOM元素下載完後就會觸發,觸發時間較早 
    // 補充 : window.onload是等整個網站都下載完成才會跑,如果有100張圖 , 要等100張圖下載完才會執行 , 適合用在廣告的載入
    $(document).ready(function() {
        $("#enter").click(function() { //ID 為 submitExample 的按鈕被點擊時
            $.ajax({
                type: "POST", //傳送方式 , 常用的傳送方式有 post 和 get
                url: "insert.php", //傳送目的地
                dataType: "json", //資料格式 , 傳送文字訊息都用json , 圖片的話用formdata
                data: { //傳送資料
                    title: $("#title").val(), //表單欄位 ID title
                    content: $("#content").val() //表單欄位 ID content
                },
                success: function(data) {
                    if (data.result == 'success') { //如果後端回傳 json 是成功的話
                        //回傳正確資料的話 , 重新整理畫面
                        location.reload();
                    }
                    if (data.result == 'error') {
                        //彈跳視窗顯示錯誤訊息
                        alert(data.errorMsg);
                    }
                },
                error: function(jqXHR) {
                    alert('發生錯誤');
                }
            })
        })
    });
</script>

insert.php

<?php
    $title = $_POST["title"]; //取得 nickname POST 值
    $content = $_POST["content"]; //取得 gender POST 值
	
	if (empty($title)) {
        echo json_encode(array(
        	'result' => 'error',
            'errorMsg' => '請輸入標題 !'
        ));
        //因為資料錯誤所以強制停止程式碼
        exit();
	}
	if (empty($content)) {
        echo json_encode(array(
        	'result' => 'error',
            'errorMsg' => '請輸入內容 !'
        ));
        exit();
	}

	$server = "localhost";         # MySQL/MariaDB 伺服器
	$dbuser = "root";       # 使用者帳號
	$dbpassword = ""; # 使用者密碼
	$dbname = "test";    # 資料庫名稱

	# 連接 MySQL/MariaDB 資料庫
	$connection = new mysqli($server, $dbuser, $dbpassword, $dbname);

	# 檢查連線是否成功
	if ($connection->connect_error) {
	  	die("連線失敗：" . $connection->connect_error);
	}

	# MySQL/MariaDB 指令 , 使用 '' 來放PHP變數
	$sqlQuery = "INSERT INTO notes (title,content) VALUES ('$title','$content')";
		
	# 執行 MySQL/MariaDB 指令
	if ($connection->query($sqlQuery) === TRUE) {
        echo json_encode(array(
        	'result' => 'success'
        ));
	} else {
		# 執行失敗並顯示錯誤訊息
        echo json_encode(array(
        	'result' => 'error',
            'errorMsg' => '資料庫錯誤訊息 : '.$connection->error
        ));
	}

	# 關閉 MySQL/MariaDB 連線
	$connection->close();
?>

刪除文章

1. 我們先在index.php新增刪除按鈕 , 使用者才能點按鈕來刪除文章

2. 然後再增加一個delete.php的檔案來執行刪除資料

index.php

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

        <title>Notes</title>
    </head>
    <body>
        <div class="container">
            <div class="row mt-5">
                <div class="col">
                    <h1 style="text-align: center;">筆記本</h1>
                    <!-- 以下為php從資料庫撈取資料並且輸出畫面的程式碼 -->
                    <?php
                        $server = "localhost";         # MySQL/MariaDB 伺服器
                        $dbuser = "root";       # 使用者帳號
                        $dbpassword = ""; # 使用者密碼
                        $dbname = "test";    # 資料庫名稱

                        $connection = new mysqli($server, $dbuser, $dbpassword, $dbname);

                        # 檢查連線是否成功
                        if ($connection->connect_error) {
                          die("連線失敗：" . $connection->connect_error);
                        }

                        # MySQL/MariaDB 指令
                        $sqlQuery = "SELECT id,title,content FROM notes";

                        # 執行 MySQL/MariaDB 指令
                        if ($result = $connection->query($sqlQuery)) {
                          # 取得結果
                            
                        // output data of each row
                        while($row = $result->fetch_assoc()) {
                            //輸出html畫面
                            echo "<div class='col-12 text-right'><button type='button' class='btn btn-danger' onclick=deleteArticle('".$row["id"]."')>刪除</button></div>"."<h5 style='color: red;'>標題</h5>" . $row["title"].'<br>'. "<h5 style='color: red;'>內容</h5>" . $row["content"]."<hr>";
                        }

                          # 釋放資源
                          $result->close();
                        } else {
                          echo "執行失敗：" . $connection->error;
                        }

                        # 關閉 MySQL/MariaDB 連線
                        $connection->close();
                    ?>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col">
                    <div class="form-group">
                        <label for="title">標題</label>
                        <input type="email" class="form-control" id="title" placeholder="最多100字...">
                    </div>
                    <div class="form-group">
                        <label for="content">內容</label>
                        <textarea class="form-control" id="content" rows="3" placeholder="請填寫內容"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" id="enter">送出資料</button>
                </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </body>
</html>

<script type="text/javascript">
    // 等全部的DOM元素下載完後就會觸發,觸發時間較早 
    // 補充 : window.onload是等整個網站都下載完成才會跑,如果有100張圖 , 要等100張圖下載完才會執行 , 適合用在廣告的載入
    $(document).ready(function() {
        $("#enter").click(function() { //ID 為 submitExample 的按鈕被點擊時
            $.ajax({
                type: "POST", //傳送方式 , 常用的傳送方式有 post 和 get
                url: "insert.php", //傳送目的地
                dataType: "json", //資料格式 , 傳送文字訊息都用json , 圖片的話用formdata
                data: { //傳送資料
                    title: $("#title").val(), //表單欄位 ID title
                    content: $("#content").val() //表單欄位 ID content
                },
                success: function(data) {
                    if (data.result == 'success') { //如果後端回傳 json 是成功的話
                        //回傳正確資料的話 , 重新整理畫面
                        location.reload();
                    }
                    if (data.result == 'error') {
                        //彈跳視窗顯示錯誤訊息
                        alert(data.errorMsg);
                    }
                },
                error: function(jqXHR) {
                    alert('發生錯誤');
                }
            })
        })
    });

    function deleteArticle(id) {
        $.ajax({
            type: "POST",
            url: "delete.php",
            dataType: "json",
            data: {
                id: id,
            },
            success: function(data) {
                if (data.result == 'success') {
                    location.reload();
                }
                if (data.result == 'error') {
                    //彈跳視窗顯示錯誤訊息
                    alert(data.errorMsg);
                }
            },
            error: function(jqXHR) {
                alert('發生錯誤');
            }
        })
    }
</script>

delete.php

<?php
    $id = $_POST["id"]; //取得 nickname POST 值
	
	if (empty($id)) {
        echo json_encode(array(
        	'result' => 'error',
            'errorMsg' => '請輸入標題 !'
        ));
        //因為資料錯誤所以強制停止程式碼
        exit();
	}

	$server = "localhost";         # MySQL/MariaDB 伺服器
	$dbuser = "root";       # 使用者帳號
	$dbpassword = ""; # 使用者密碼
	$dbname = "test";    # 資料庫名稱

	# 連接 MySQL/MariaDB 資料庫
	$connection = new mysqli($server, $dbuser, $dbpassword, $dbname);

	# 檢查連線是否成功
	if ($connection->connect_error) {
	  	die("連線失敗：" . $connection->connect_error);
	}

	# MySQL/MariaDB 指令 , 使用 '' 來放PHP變數
	$sqlQuery = "DELETE FROM notes WHERE id = '$id'";
		
	# 執行 MySQL/MariaDB 指令
	if ($connection->query($sqlQuery) === TRUE) {
        echo json_encode(array(
        	'result' => 'success'
        ));
	} else {
		# 執行失敗並顯示錯誤訊息
        echo json_encode(array(
        	'result' => 'error',
            'errorMsg' => '資料庫錯誤訊息 : '.$connection->error
        ));
	}

	# 關閉 MySQL/MariaDB 連線
	$connection->close();
?>


終於做出一個簡單的網站了~ 💯 💯 💯

但是您會發現 , 程式碼是不是有點亂呢 , 如果是一個大型的專案 , 每個開發者都依照自己的開發模式 , 開了一堆的檔案 , 又不寫註解 , 最後程式碼會變得非常地難維護.....

所以PHP出現了非常多的框架(framework) ,在開發的時候 , 大家都照著這個框架的開發模式去開發 , 維護和開發上就會變得非常的有效率 , 現在最有名的應該就是 laravel 了吧 ~

下次有機會在介紹給大家 ~

留言

張貼留言

這個網誌中的熱門文章

網頁入門教材目錄

  0.網頁運作原理 網頁運作原理與專業名詞 1.程式編輯器sublime 3 介紹 sublime 3 使用介紹 2. PHP開發環境介紹  Xampp介紹 3. 認識HTML HTML介紹 4. 認識CSS CSS基礎篇 CSS基礎語法 5.認識 Javascript Javascript基礎 6. 認識 Jquery Jquery與ajax介紹 7. Bootstrap 4 基礎介紹 Bootstrap 4 介紹 Bootstrap 4 範例製作 8. 資料庫入門 MariaDB入門教學 9. PHP介紹 PHP基礎用法 - 1 PHP基礎用法 - 2 PHP物件導向 PHP與資料庫連線 10. Laravel框架入門 Laravel 基礎概念 Laravel下載安裝、MVC流程編寫、資料庫設定 Laravel 新增資料與顯示資料 Laravel 資料修改與刪除 Laravel 完整筆記本範例
閱讀完整內容

什麼是HTML?

圖片
  1. HTML 是什麼呢 ? html介紹 HTML 的英文原文是 HyperText Markup Language ，中文譯為「超文字標示語言」。為什麼要說「 超文字 」呢？如果你曾經用過 Windows 上的「記事本」打過字，你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而 超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能 。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法，讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此，再簡單的說， HTML 就是可以讓你將您所想要呈現給別人看的資料，儘可能以較豐富的方式去呈現。 我可以用什麼工具編寫 HTML 網頁？ 很簡單，用 Windows 內建的「記事本」小軟體，就可以拿來練習編寫網頁了。但如果可以的話，真心推薦您使用以下其中一套「免費的進階版記事本」小軟體：  Notepad++  、  sublime ，因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔，讓您更方便閱讀 HTML 內容，並且也可以及早讓您發現可能的編寫錯誤，讓您的學習之路更為順暢。 我要如何瀏覽及測試我的 HTML 網頁呢？ 當您使用前述的「記事本」工具編寫完內容後， 可以將檔案儲存成 test.html 這樣的檔名 ， test 即是您網頁的主檔名，而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」，您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案，例如前述的 test.html 檔，然後用 滑鼠在 test.html 檔案上按左鍵快速點選兩下 ，則電腦即會自動以您系統預設的  網頁瀏覽器  開啟這個練習的網頁 2. HTML 基本語法 基本的HTML文件格式 < HTML > 　 < HEAD > 　　 < TITLE > 網頁主題 </ TITLE > 　　 < Meta > 　 </ HEAD > 　 < BODY > 　　網頁內容的主要呈現部分 　 </ BODY > </ H...
閱讀完整內容

網頁是怎麼運作的呢?

圖片
  短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。 網頁know-how : 用戶端與伺服器端 用戶端 是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。 伺服器端 是放著網頁、網站、或著 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。 IP位址 為Internet Protocol Address的縮寫，中文被稱為網際協議位址。 是一種在Internet上的給主機編址的方式。  IP位址可以說是網頁伺服器的門牌 讓系統可以透過這個號碼找到正確的網頁伺服器在哪裡。 DNS Domain Name System的縮寫，中文又稱領域名稱解析系統。 是網際網路的一項的服務，是個可將網址和IP位址相互對應的資料庫，能夠使人更方便的存取網際網路。( 不用記長長一串的數字啦！ ) 伺服器 伺服器作為硬體來說，通常是指那些具有較高計算能力，能夠提供給多個使用者使用的電腦。伺服器與PC機的不同點太多了，例如PC機在一個時刻通常只為一個使用者服務。伺服器與主機不同，主機是透過終端給使用者使用的，伺服器是透過網路給用戶端使用者使用的。 而近期 雲端伺服器 越來越盛行,常見的雲端服務有 AWS , GCP , AZURE 等.... , 雲端伺服器擁有非常多的服務, 可以節省開發時間 , 直接使用服務(但通常都不便宜...) 、擁有高擴展的硬體資源, 隨時調整你的硬體資源、安全性高等等.... , 想必之後會成為伺服器的主流 網頁伺服器 又叫做 Web Server 。 Apache是接洽的服務員負責將網頁畫面傳遞給瀏覽器，只要網頁中有需要資料的部分Apache就會向DB索取資料後一起交給瀏覽器。 DB(Data Base)就是存放資料的地方。 web server 的種類有： apache、nginx、iis apache 和nginx的差別在於nginx可能速度會比較快，用的資源少。 iis是微軟做的，如果是寫 asp.net  就可用這套iis但環境就是要在window server上。 瀏覽器輸入網址的流程 :...
閱讀完整內容