PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

28 August 2014 By


เราเคยได้ทำการศึกษาเกี่ยวกับ การ เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs
มาแล้วในตอนที่ 3 
 
เพิ่ม ลบ แก้ไข รายการ ด้วย angularjs ตอนที่ 3 
http://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 
    <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
 
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>
 
 
ตัวอย่างผลลัพธ์ ไฟล์ ตัวนี้เป้นแค่ ตัวทดสอบ ยังเป็นข้อมูลหลอก ยังไม่ได้เขียนโค้ดแบบเต็ม
 
 

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



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



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

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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