PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

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

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



เราเคยได้ทำการศึกษาเกี่ยวกับ การ เพิ่ม ลบ แก้ไข รายการ ด้วย 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




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

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



หริอ สมัครสมาชิก และล็อกอิน ด้วย Facebook



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


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