angularjs เพิ่ม ลบ แก้ไข แสดง รายการ กับฐานข้อมูล mysql ตอนที่ 9

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
mysql เพิ่ม ลบ แก้ไข ฐานข้อมูล angularjs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ mysql เพิ่ม ลบ แก้ไข ฐานข้อมูล angularjs

ดูแล้ว 16,897 ครั้ง




เราเคยได้ทำการศึกษาเกี่ยวกับ การ เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs
มาแล้วในตอนที่ 3 
 
เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs ตอนที่ 3 
 
แต่เนื้อหาดังกล่าวเป็นการบันทึกข้อมูลไปยัง server firebase ซึ่งเป็นการ
ทดสอบตามตัวอย่าง ของเว็บไซต์ https://www.angularjs.org
 
ทีนี้เรามาดูการบันทึกข้อมูลลงฐานข้อมูล mysql กันบ้าง 
โดยตอนแรกของเนื้อหานี้ จะเป็นการวางโครงฐานข้อมูล และหน้าตาการแสดงผล
เบื้องต้น ที่จะใช้งาน ก่อน
 
สิ่งที่จะทำคือ เก็บข้อมูลเพื่อนไว้ในฐานข้อมูล โดยสามารถ เพิ่ม ลบ แก้ไข 
แสดงลิสรายการ และแสดงเป็นแต่ละรายการ รวมทั้ง เรียงการแสดงผล และค้น
หาข้อมูลจากตารางได้
 
โครงสร้างไฟล์ทั้งหมดที่จะใช้งาน
 
\boostrap โฟลเดอร์ css ของ bootstrap อ่านวิธีโหลดได้ที่ ตอนที่ 3 ตอนด้านบน
\data\model.php  โฟลเดอร์ data และไฟล์ medel.php สำหรับจัดการกับฐานข้อมูล
\db\db_connect.php  โฟลเดอร์ db และไฟล์ db_connect.php สำหรับเชื่อมต่อฐานข้อมูล
\tpl โฟลเดอร์สำหรับเก็บ ไฟล์ templates หน้าต่างๆ โดยมี 3 ไฟล์ด้านล่างอยู่ด้านใน
-- list.html ไฟล์ template list.html สำหรับหน้าแสดงรายการ หน้าหลัก
-- detail.html ไฟล์ template detail.html สำหรับหน้า เพิ่มและแก้ไข ข้อมูล
-- view.html ไฟล์ template view.html สำหรับ
app.js ไฟล์ javasciprt สำหรับโปรแกรม
index.html ไฟล์เริ่มต้น สำหรับทดสอบ
 
สำหรับไฟล์ angularsjs เราจะเรียกใช้ผ่าน server ของ google ซึ่งจะแทรกไว้ใน index.html
 
1. กำหนดรายละเอียด ฐานข้อมูล
ตารางชื่อ tbl_myfriend ประกอบด้วย id,name,tel,address
 
1
2
3
4
5
6
CREATE TABLE  `tbl_myfriend` (
 `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
 `name` VARCHAR( 100 ) NOT NULL ,
 `tel` VARCHAR( 10 ) NOT NULL ,
 `address` VARCHAR( 255 ) NOT NULL
) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_unicode_ci;
 
 
2. กำหนดการเชื่อมต่อกับฐานข้อมูล ในไฟล์ db_connect.php (ใช้คำสั่ง mysqli แทน mysql)
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<?php
// ฟังก์ชันสำหรับเชื่อมต่อกับฐานข้อมูล
function connect()
{
  // เริ่มต้นส่วนกำหนดการเชิ่อมต่อฐานข้อมูล // 
     $db_config=array(
        "host"=>"localhost",  // กำหนด host
        "user"=>"root", // กำหนดชื่อ user
        "pass"=>"",   // กำหนดรหัสผ่าน
        "dbname"=>"test",  // กำหนดชื่อฐานข้อมูล
        "charset"=>"utf8"  // กำหนด charset
    );
  // สิ้นสุุดส่วนกำหนดการเชิ่อมต่อฐานข้อมูล // 
    $mysqli = @new mysqli($db_config["host"], $db_config["user"], $db_config["pass"], $db_config["dbname"]);
    if(mysqli_connect_error()) {
        die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error());
        exit;
    }
    if(!$mysqli->set_charset($db_config["charset"])) { // เปลี่ยน charset เป้น utf8 พร้อมตรวจสอบการเปลี่ยน
    //    printf("Error loading character set utf8: %sn", $mysqli->error);  // ถ้าเปลี่ยนไม่ได้
    }else{
    //    printf("Current character set: %sn", $mysqli->character_set_name()); // ถ้าเปลี่ยนได้
    }
    return $mysqli;
    //echo $mysqli->character_set_name();  // แสดง charset เอา comment ออก
    //echo 'Success... ' . $mysqli->host_info . "n";
    //$mysqli->close(); 
}
//    ฟังก์ชันสำหรับคิวรี่คำสั่ง sql
function query($sql)
{
    global $mysqli;
    if($mysqli->query($sql)) { return true; }
    else { die("SQL Error: <br>".$sql."<br>".$mysqli->error); return false; }
}
//    ฟังก์ชัน select ข้อมูลในฐานข้อมูลมาแสดง
function select($sql)
{
    global $mysqli;
    $result=array();
    $res = $mysqli->query($sql) or die("SQL Error: <br>".$sql."<br>".$mysqli->error);
    while($data= $res->fetch_assoc()) {
        $result[]=$data;
    }
    return $result;
}
//    ฟังก์ชันสำหรับการ insert ข้อมูล
function insert($table,$data)
{
    global $mysqli;    
    $fields=""; $values="";
    $i=1;
    foreach($data as $key=>$val)
    {
        if($i!=1) { $fields.=", "; $values.=", "; }
        $fields.="$key";
        $values.="'$val'";
        $i++;
    }
    $sql = "INSERT INTO $table ($fields) VALUES ($values)";
    if($mysqli->query($sql)) { return true; }
    else { die("SQL Error: <br>".$sql."<br>".$mysqli->error); return false; }
}
//    ฟังก์ชันสำหรับการ update ข้อมูล
function update($table,$data,$where)
{
    global $mysqli;        
    $modifs="";
    $i=1;
    foreach($data as $key=>$val)
    {
        if($i!=1){ $modifs.=", "; }
        if(is_numeric($val)) { $modifs.=$key.'='.$val; }
        else { $modifs.=$key.' = "'.$val.'"'; }
        $i++;
    }
    $sql = ("UPDATE $table SET $modifs WHERE $where");
    if($mysqli->query($sql)) { return true; }
    else { die("SQL Error: <br>".$sql."<br>".$mysqli->error); return false; }
}
//    ฟังก์ชันสำหรับการ delete ข้อมูล
function delete($table, $where)
{
    global $mysqli;        
    $sql = "DELETE FROM $table WHERE $where";
    if($mysqli->query($sql)) { return true; }
    else { die("SQL Error: <br>".$sql."<br>".$mysqli->error); return false; }
}
//    ฟังก์ชันสำหรับแสดงรายการฟิลด์ในตาราง
function listfield($table)
{
    global $mysqli;        
    $sql="SELECT * FROM $table LIMIT 1 ";
    $row_title="$data=array(<br/>";
    $res = $mysqli->query($sql) or die("SQL Error: <br>".$sql."<br>".$mysqli->error);
    $i=1;
    while($data= $res->fetch_field()) {
        $var=$data->name;
        $row_title.='"$var"=>"value$i",<br/>';
        $i++;
    }  
    $row_title.=");<br/>";
    echo $row_title;
}
?>
 
3. ไฟล์ model.php
 
1
2
3
4
<?php
include("../db/db_connect.php");
$mysqli = connect();
?>
 
4. ไฟล์ index.html
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-resource.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-route.min.js"></script>      
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <script src="app.js"></script>
    <title>My Learn AngularJs 7</title>
    <style type="text/css">
 
    </style>
</head>
<body ng-controller="appController">
 
    <br>
    <div class="container">
    <h4>My Friends</h4> 
    <div ng-view></div> 
    
 
    </div>
 
 
 
</body>
</html>
 
สังเกตว่า จะมีการเรียกใช้งาน module resource และก็ route จาก angularjs 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-resource.min.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-route.min.js"></script>      
 
 
5. ไฟล์ app.js
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
angular.module("app",["ngRoute"])
.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      controller:'ListCtrl',
      templateUrl:'tpl/list.html'
    })
    .when('/view/:Id', {
      controller:'ViewCtrl',
      templateUrl:'tpl/view.html'
    }) 
    .when('/edit/:Id', {
      controller:'EditCtrl',
      templateUrl:'tpl/detail.html'
    })
    .when('/new', {
      controller:'CreateCtrl',
      templateUrl:'tpl/detail.html'
    })
    .otherwise({
      redirectTo:'/'
    });
})
.controller("appController",["$scope",function($scope){
 
}]);
 
6. ไฟล์ list.html
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<input type="text" class="form-control " placeholder="Search">
<br>
<table class="table table-striped">
  <thead>
  <tr>
   <th>#</th>
    <th>Name</th>
    <th>Tel</th>
    <th>
     
    </th>
    <th class="text-center">
    <a href="#/new"><i class="glyphicon glyphicon-plus"></i></a>           
    </th>
  </tr>
  </thead>
  <tbody>
  <tr>
   <td>1</td>
    <td><a href="#/view/:1">demo1</a></td>
    <td>0800000000</td>
    <td class="text-center">
      <a href="#/edit/:1"><i class="glyphicon glyphicon-pencil"></i></a>
    </td>
    <td class="text-center">
       <a ng-href="#/"><i class="glyphicon glyphicon-remove"></i></a>
    </td>
  </tr>
  </tbody>
</table>
 
7. ไฟล์ detail.html
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form role="form" name="myForm">
  <div class="control-group" ng-class="{'has-error': myForm.name.$invalid && !myForm.name.$pristine}">
    <label class="control-label">Name</label>
    <input type="text" class="form-control" name="name" ng-model="data.name" required>
    <span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="text-danger">
    Required
    </span>
  </div>
  <div class="control-group" ng-class="{'has-error': myForm.tel.$invalid && !myForm.tel.$pristine}">
    <label class="control-label">Tel</label>
    <input type="text" class="form-control" name="tel" ng-model="data.tel" number required>
    <span ng-show="myForm.tel.$error.required && !myForm.tel.$pristine" class="text-danger">
    Required
    </span>
  </div> 
  <div class="control-group">
  <label>Address</label>
  <textarea name="address" class="form-control" rows="3"
        ng-model="data.address"></textarea>
 </div>
  <br>
  <a href="#/" class="btn btn-default">Cancel</a>
  <button ng-disabled="myForm.$invalid"  class="btn btn-primary">Save</button>
  <button class="btn btn-danger">Delete</button>
</form>
 
8. ไฟล์ view.html
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table class="table">
    <tr class="active">
        <th colspan="2">Friend Detail</th>
    </tr>
    <tr>
        <td width="100px" class="warning text-right">Name: </td>
        <td>demo1</td>
    </tr>
    <tr>
        <td width="100px" class="warning text-right">Tel: </td>
        <td>080000000</td>
    </tr>
    <tr>
        <td width="100px" class="warning text-right">Address: </td>
        <td>thiis is a simple text</td>
    </tr>
</table>
<br>
<a href="#/" class="btn btn-default">Back</a>
 
 
ตัวอย่างผลลัพธ์ ไฟล์ ตัวนี้เป้นแค่ ตัวทดสอบ ยังเป็นข้อมูลหลอก ยังไม่ได้เขียนโค้ดแบบเต็ม
 
 

โปรดติดตามตอนต่อไป....
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: ฐานข้อมูล mysql เพิ่ม ลบ แก้ไข angularjs







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ