網路程式設計

存取MySQL資料庫

資料庫

資料庫連線

中文issue

新增 INSERT INTO

查詢 SELECT...FROM

修改 UPDATE

刪除 DELETE

資料庫

資料庫連線

中文issue

新增 INSERT INTO

查詢 SELECT...FROM

修改 UPDATE

刪除 DELETE

資料庫連線

<?php
    $link = mysql_connect($server, $username, $password);    // 連接伺服器
    if( !$link) {
        die('無法連接資料庫');
    ｝
    $db = mysql_selectdb($dbname, $link) ;        // 開啟資料庫
    if (!$db) {
        die('無法開啟資料庫');
    }
    mysql_close($link);    // 關閉資料庫連線
?>
  • 連接伺服器、開啟資料庫
<?php
    $server = 'localhost';    // 伺服器
    $username = 'project1';   // 帳號
    $password = 'xxxxxx';     // 密碼
    $dbname = 'project1';     // 資料庫名稱
?>
  • 基本資料

Practice #1

  • 練習將「處理表單」的程式加入下列程式碼：
    • 連接伺服器
    • 開啟資料庫
    • 關閉資料庫

 

10 minutes to go

資料庫連線

<?php
    $server = 'localhost';    // 伺服器
    $username = 'project1';   // 帳號
    $password = 'xxxxxx';     // 密碼
    $dbname = 'project1';     // 資料庫名稱

    $link = mysql_connect($server, $username, $password);    // 連接伺服器
    if( !$link) {
        die('無法連接資料庫');
    ｝
    $db = mysql_select_db($dbname, $link) ;        // 開啟資料庫
    if (!$db) {
        die('無法開啟資料庫');
    }
    /*
        資料庫存取：新增 修改 查詢 刪除
    */

    mysql_close($link);    // 關閉資料庫連線
?>
  • include_once()：解決重複程式碼

每個頁面重複

db.php

<?php
    include_once('db.php');
?>

資料庫連線

<?php
    $server = 'localhost';    // 伺服器
    $username = 'project1';   // 帳號
    $password = 'xxxxxx';     // 密碼
    $dbname = 'project1';     // 資料庫名稱

    $link = mysql_connect($server, $username, $password);    // 連接伺服器
    if( !$link) {
        die('無法連接資料庫');
    ｝
    $db = mysql_select_db($dbname, $link) ;        // 開啟資料庫
    if (!$db) {
        die('無法開啟資料庫');
    }
?>
  • 將連線部分搬到db.php

db.php

<?php
    include_once('db.php');    // 引入db.php
    /*
        資料庫存取：新增 修改 查詢 刪除
    */

    mysql_close($link);    // 關閉資料庫連線
?>
  • 原始檔案加上  include_once('db.php');

資料庫連線

db.php

page1.php

page2.php

重複使用

Practice #2

  • 重新整理程式碼
  • 將「資料庫連線」部分獨立成一個檔案
    • For example, db.php

 

10 minutes to go

資料庫

資料庫連線

中文issue

新增 INSERT INTO

查詢 SELECT...FROM

修改 UPDATE

刪除 DELETE

中文issue

<?php
    include_once('db.php');    // 引入db.php

    mysql_query("SET NAME 'utf8'");    //處理寫入資料庫時的編碼問題

    /*
        資料庫存取：新增 修改 查詢 刪除
    */

    mysql_close($link);    // 關閉資料庫連線
?>
  • 加入SET NAMES 'utf8'
  • 也可放在db.php檔內
<?php
    // ....[略]....
    $db = mysql_select_db($dbname, $link) ;        // 開啟資料庫
    if (!$db) {
        die('無法開啟資料庫');
    }
    mysql_query("SET NAME 'utf8'");    //處理寫入資料庫時的編碼問題

db.php

資料庫

資料庫連線

中文issue

新增 INSERT INTO

查詢 SELECT...FROM

修改 UPDATE

刪除 DELETE

新增範例

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form name="form1" method="post" action="confirm.php">
          <p>
            <label for="name"></label>
          姓名:  <input type="text" name="name" id="name">
          <br>
          電子郵件:
          <label for="mail"></label>
          <input type="text" name="mail" id="mail">
          </p>
          <p>
            <label>請勾選年紀:<br>
              <input type="radio" name="age" value="1" id="age_0">
              19歲以下</label>
            <br>
            <label>
              <input type="radio" name="age" value="2" id="age_1">
              20~29歲</label>
            <br>
            <label>
              <input type="radio" name="age" value="3" id="age_2">
              30~39歲</label>
            <br>
            <label>
              <input type="radio" name="age" value="4" id="age_3">
              40歲以上</label>
            <br>
          </p>
          <p>買的手機品牌:<br>
            <label>
              <input type="checkbox" name="brand[]" value="1" id="brand_0">
              Apple</label>
            <br>
            <label>
              <input type="checkbox" name="brand[]" value="2" id="brand_1">
              三星</label>
            <br>
            <label>
              <input type="checkbox" name="brand[]" value="3" id="brand_2">
              hTC</label>
            <br>
            <label>
              <input type="checkbox" name="brand[]" value="4" id="brand_3">
              SONY</label>
            <br>
          </p>
          <p>
            <input type="submit" name="button" id="button" value="送出">
            <input type="reset" name="button2" id="button2" value="重設">
          </p>
        </form>
    </body>
</html>
  • 新增表單index.html

新增範例

<?php
    include_once('db.php');    // 引入db.php
    mysql_query("SET NAME 'utf8'");    //處理寫入資料庫時的編碼問題

    $name = $_POST['name'];
    $mail = $_POST['mail'];
    if (isset($_POST['age'])) {
        $age = $_POST['age'];
    } else {
        $age = 0;
    }
    if (isset($_POST['brand'])) {
        $phone = $_POST['brand'];
        $phonestr = implode("|", $phone);
    }
    $sql = "INSERT INTO `project1`.`survey` "
            . "(`id`, `name`, `mail`, `age`, `brand`)"
            . " VALUES (NULL, '$name',"
            . " '$mail', "
            . "'$age',"
            . " '$phonestr');";

    mysql_close($link);    // 關閉資料庫連線
?>
  • INSERT INTO

Practice #3

  • 加入新增一筆資料的功能

 

20 minutes to go

資料庫

資料庫連線

中文issue

新增 INSERT INTO

查詢 SELECT...FROM

修改 UPDATE

刪除 DELETE

查詢

SELECT "欄位名" FROM "表格名";
  • 基本查詢

欄位名

表格名

查詢

SELECT ＊ FROM survey;
SELECT name, mail FROM survey;
  • SQL語法  
$sql = "SELECT * FROM survey";    // SQL字串
$result = mysql_query($sql);      // 查詢
  • 轉換成php
  • 查詢結果 $result 如何處理？
// 在while迴圈搭配使用
mysql_fetch_array($result, MYSQL_BOTH); // MYSQL_BOTH指可用0,1,2...或欄位名稱id, name, mail兩種方式
// 或者使用
mysql_fetch_assoc($result);    // 只能用欄位名稱

查詢範例

<?php
    include_once('db.php');             // 資料庫連線

    $agestr = array(0 => "沒有選", 1 => "19歲以下", 2 => "20~29歲", 3 => "30~39歲", 4 => "40歲以上");
    $brand = array(1 => 'Apple', 2 => '三星', 3 => 'hTC', 4 => 'Sony');

    mysql_query("SET NAMES 'utf8'");    // 處理中文
    $sql = "SELECT * FROM survey";      // SQL查詢指令
    $result = mysql_query($sql);        // 執行SQL，回傳查詢結果
    
    while ($row = mysql_fetch_array($result, MYSQL_BOTH)) {
        echo $row['id'] . ' ';      // 印出id欄位值
        echo $row['name'] . ' ';    // 印出姓名欄位值 
        echo $row['mail'] . ' ';    // 印出電子郵件欄位值
        echo $agestr[$row['age']] . ' ';      // 印出年齡欄位轉換後字串
            
        $phone = explode('|', $row['brand']);   // 將字串轉成陣列，如 1|3|4 轉成陣列
        foreach ($phone as $value) {
            echo $brand[$value] . ' ';
        }
        echo '<BR>';
    }
?>

Practice #4

  • 在新增一筆資料之後加入查詢功能
    • 查詢全部內容
    • 排序方式：最新加入在最前面

20 minutes to go

# 排序語法 ORDER BY
# ASC 由小到大
# DESC 由大到小
SELECT "欄位名" 
FROM "表格名" 
[WHERE "條件"]
ORDER BY "欄位名" [ASC, DESC];

＃以id欄位由大到小排列
SELECT ＊ FROM survey ORDER BY id DESC;

查詢範例-字串常數

<?php
# 定義常數, 將陣列序列化 (php 5.5版以下)
define ("FRUITS", serialize (array ("apple", "cherry", "banana")));

# 使用，反序列化
$my_fruits = unserialize (FRUITS);
  • $agestr, $brand為常數，應只定義一次
<?php
# 定義常數, 將陣列序列化
define('AGESTR', serialize(array(0 => "沒有選", 1 => "19歲以下", 2 => "20~29歲", 3 => "30~39歲", 4 => "40歲以上")));
define('BRAND', serialize(array(1 => 'Apple', 2 => '三星', 3 => 'hTC', 4 => 'Sony')));
  • 在另一個檔案定義$agestr, $brand
  • 其他檔案使用時，include_once，反序列化
<?php
    include_once 'constant.php';
    $agestr = unserialize(AGESTR);  // 使用前，反序列化
    $brand = unserialize(BRAND);    // 使用前，反序列化

constant.php

實際使用

index.php

查詢範例-修改後

<?php
    include_once('db.php');             // 資料庫連線
    include_once('constant.php');
    $agestr = unserialize(AGESTR);
    $brand = unserialize(BRAND);

    mysql_query("SET NAMES 'utf8'");    // 處理中文
    $sql = "SELECT * FROM survey";      // 查詢
    $result = mysql_query($sql);
    
    while ($row = mysql_fetch_array($result, MYSQL_BOTH)) {
        echo $row['id'] . ' ';
        echo $row['name'] . ' ';
        echo $row['mail'] . ' ';
        echo $agestr[$row['age']] . ' ';
            
        $phone = explode('|', $row['brand']);   // 將字串轉成陣列，如 1|3|4 轉成陣列
        foreach ($phone as $value) {
            echo $brand[$value] . ' ';
        }
        echo '<BR>';
    }
?>

Practice #5

  • 建立constant.php，將陣列常數搬移至此檔
  • 其他檔案使用時，建立變數使用之

 

10 minutes to go

<?php
# php 5.6以上版本可用 const直接定義，不需序列化
const DEFAULT_ROLES = array('guy', 'development team');

http://stackoverflow.com/questions/1290318/php-constants-containing-arrays

資料庫

資料庫連線

中文issue

新增 INSERT INTO

查詢 SELECT...FROM

修改 UPDATE

刪除 DELETE

修改

UPDATE "表格名"
SET "欄位1" = [新值]
WHERE "條件";
  • SQL語法  
$id = $_POST['id'];
$mail = $_POST['mail'];
// ...
$sql = "UPDATE survey SET mail='$mail' WHERE id='$id'";    // SQL字串
$result = mysql_query($sql);      // 修改
  • 轉換成php
UPDATE Store_Information
SET Sales = 500
WHERE Store_Name = 'Los Angeles' 
AND Txn_Date = 'Jan-08-1999';
  • 範例

500

修改表單

UPDATE "表格名"
SET "欄位1" = [新值]
WHERE "條件";
  • SQL語法  
$id = $_POST['id'];
$mail = $_POST['mail'];
// ...
$sql = "UPDATE survey SET mail='$mail' WHERE id='$id'";    // SQL字串
$result = mysql_query($sql);      // 修改
  • 轉換成php
UPDATE Store_Information
SET Sales = 500
WHERE Store_Name = 'Los Angeles' 
AND Txn_Date = 'Jan-08-1999';
  • 範例

500

Practice #6

  • 利用新增表單，建立修改表單

20 minutes to go

資料庫

資料庫連線

中文issue

新增 INSERT INTO

查詢 SELECT...FROM

修改 UPDATE

刪除 DELETE

刪除

DELETE FROM "表格名"
WHERE "條件";
  • SQL語法  
$id = $_POST['id'];
// ...
$sql = "DELETE FROM survey WHERE id='$id'";    // SQL字串
$result = mysql_query($sql);      // 刪除
  • 轉換成php
DELETE FROM Store_Information
WHERE Store_Name = 'Los Angeles';
  • 範例

Practice #7

  • 需求：將資料列表後，勾選某一項目即可進行刪除

10 minutes to go

開始寫程式之前...

規劃期 製作前期 製作期 上架期
規格書 Wireframe 後端 測試
UI flow 前端 上架
Mockup 設計 維運
Prototype

系統開發流程

 

 

 

 

 

 

程式開發

 

 

 

 

 

 

系統分析

 

 

 

 

 

 

測試維運

製作前期：Wireframe

http://cdn.teamddm.com/includes/files/assets/images/large/1328754582_01-1.jpg

http://inspirationfeed.com/wp-content/uploads/2011/02/34-sketched-ui-wireframe1-500x362.jpg

製作前期：UI flow

http://pandion.pbworks.com/f/1258329378/signin-flow.png

製作前期：UI-Flow

搭配系統草圖（wireframe）

查詢Select 

新增Insert into

刪除Delete

修改Update

製作前期：Mockup

http://ericterpstra.com/wp-content/uploads/cats.balsamiq.png

http://1.bp.blogspot.com/_Gkt_5XYdPUk/TPOU2hTNrqI/AAAAAAAABQ0/WdzH7TlAhqU/s1600/Iphone-wireframes-v1.gif

製作前期：Prototype

http://uiwireframes.com/assets/img/wireframe-examples/Mobile-App-5-Sharing-Settings.png

Practice #8

  • 練習製作ui-flow(搭配草圖wireframe)
  • 需求：手機使用意見調查
  1. 記錄基本資料：姓名、email、年齡
  2. 調查資料：手機使用廠牌
  3. 要能分頁列出所有調查資料
  4. 要能新增調查資料、一次一筆
  5. 要能修改調查資料
  6. 要能刪除調查資料

Hands-on

動手做吧

http://pmtips.net/wp-content/uploads/2012/06/hands-on-PM.jpg

Practice #9

 

  • 設計首頁：index.php
    • 三個按鈕：新增、修改、刪除
  • 設計新增、修改表單（共用）
  • 設計確認刪除
  • 新增、修改、刪除：回到首頁

如何讓HTML Form處理multiple actions

Multiple actions

<form action="dispatch.php" method="post">
    <input type="submit" value="刪除" name="delete">
    <input type="submit" value="修改" name="update">
</form>
  • 表單部分：指定submit按鈕的name
  • 用$_POST判斷
header("Location: http://example.com/myOtherPage.php");
// 或是
$action = 'delete.php';
header("Location: " . $action);
  • 用header()轉址（必須HTML輸出之前）
<?php
if ($_POST['delete']) {
    header('Location: ' . 'delete.php');
    die();
}
if ($_POST['update']) {
    header('Location: ' . 'update.php');
    die();
}

Multiple actions

<form action="dispatch.php" method="post">
    <input type="submit" value="刪除" name="delete">
    <input type="submit" value="修改" name="update">
</form>
  • 表單部分
  • Action部分
<?php
if ($_POST['delete']) {
    header('Location: ' . 'delete.php');
    die();
}
if ($_POST['update']) {
    header('Location: ' . 'update.php');
    die();
}
?>
<!DOCTYPE html>
...

Bootstrap 3 快速入門

參考資料：旅程開始· Bootstrap 3 中文手冊- KKBruce

格線系統(https://kkbruce.tw/bs3/CSS#grid)

安裝Bootstrap 3

<head>
<!-- 最新編譯和最佳化的 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- 選擇性佈景主題 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- 最新編譯和最佳化的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
  • 使用Bootstrap 3線上版

在需要BS 3的頁面<head></head>內加入下列三行

BS 3 格線系統

  • 提供CSS class設定
  • 由行(row, 橫向)，列(column, 直向)組成
    • 固定12列
  • 行列設定必須放在container內
<div class='container'>
    <div class='row'>
        <div class='col-xs-4'>第一行第一列</div>    <!-- col-*-* : 第一個*為解析度 -->
        <div class='col-xs-4'>第一行第一列</div>    <!-- 第二個*為數字，為該列所佔比例 -->
    </div>
</div>

格線系統

https://kkbruce.tw/bs3/CSS#grid-options

格線系統

格線系統