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

28 August 2014 เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee

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

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

ดูแล้ว 17,717 ครั้ง

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

เราเคยได้ทำการศึกษาเกี่ยวกับ การ เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs

มาแล้วในตอนที่ 3

เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs ตอนที่ 3

https://www.ninenik.com/content.php?arti_id=517 via @ninenik

แต่เนื้อหาดังกล่าวเป็นการบันทึกข้อมูลไปยัง 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

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)

<?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

<?php
include("../db/db_connect.php");
$mysqli = connect();
?>

4. ไฟล์ index.html

<!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

5. ไฟล์ app.js

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

<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

<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

<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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ