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