chippak
RAT Controller
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 2
900 XP
Getting Started
I've used CDN for Bootstrap and Angular JS so you need internet connection for them to work.
Creating our Database
First, we are going to create our database and insert sample data.
1. Open phpMyAdmin.
2. Click databases, create a database and name it as angular.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
index.html
This is our index which contains our table.
angular.js
This contains our angular js script.
fetch.php
This is our PHP api that fetches data from our MySQL Database.
save.php
Lastly, this is our PHP code/api in saving the changes we made to our table.
That ends this tutorial. Happy Coding :)
Download
I've used CDN for Bootstrap and Angular JS so you need internet connection for them to work.
Creating our Database
First, we are going to create our database and insert sample data.
1. Open phpMyAdmin.
2. Click databases, create a database and name it as angular.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
- CREATE
TABLE
`members`
(
- `memid`
int
(
11
)
NOT
NULL
AUTO_INCREMENT
,
- `firstname`
varchar
(
30
)
NOT
NULL
,
- `lastname`
varchar
(
30
)
NOT
NULL
,
- `address`
text
NOT
NULL
,
- PRIMARY KEY
(
`memid`
)
- )
ENGINE
=
InnoDB
DEFAULT
CHARSET
=
latin1;
- INSERT
INTO
`members`
(
`memid`
,
`firstname`
,
`lastname`
,
`address`
)
VALUES
- (
1
,
'Neovic'
,
'Devierte'
,
'Silay'
)
,
- (
2
,
'Julyn'
,
'Divinagracia'
,
'E.B.'
)
,
- (
3
,
'Gemalyn'
,
'Cepe'
,
'Bohol'
)
,
- (
4
,
'Matet'
,
'Devierte'
,
'Silay City'
)
,
- (
5
,
'Tintin'
,
'Devierte'
,
'Silay City'
)
,
- (
6
,
'Bien'
,
'Devierte'
,
'Cebu City'
)
,
- (
9
,
'Janna '
,
'Atienza'
,
'Talisay City'
)
,
- (
10
,
'Desire'
,
'Osorio'
,
'Bacolod City'
)
;
index.html
This is our index which contains our table.
- <!DOCTYPE html>
- <html
lang
=
"en"
ng-app=
"app"
>
- <head
>
- <meta
charset
=
"utf-8"
>
- <title
>
AngularJS Inline Edit using PHP/MySQLi</
title
>
- <link
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel
=
"stylesheet"
>
- <script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"
></
script
>
- </
head
>
- <body
ng-controller=
"memberdata"
ng-init=
"fetch()"
>
- <div
class
=
"container"
>
- <h1
class
=
"page-header text-center"
>
AngularJS Inline Edit using PHP/MySQLi</
h1
>
- <div
class
=
"row"
>
- <div
class
=
"col-md-10 col-md-offset-1"
>
- <div
class
=
"alert alert-success text-center"
ng-show=
"success"
>
- <button
type
=
"button"
class
=
"close"
ng-click=
"clearMessage()"
><span
aria-hidden=
"true"
>
×
</
span
></
button
>
- <i
class
=
"fa fa-check"
></
i
>
{{ message }}
- </
div
>
- <div
class
=
"alert alert-danger text-center"
ng-show=
"error"
>
- <button
type
=
"button"
class
=
"close"
ng-click=
"clearMessage()"
><span
aria-hidden=
"true"
>
×
</
span
></
button
>
- <i
class
=
"fa fa-warning"
></
i
>
{{ message }}
- </
div
>
- <table
class
=
"table table-bordered table-striped"
style
=
"margin-top:10px;"
>
- <thead
>
- <tr
>
- <th
>
First Name</
th
>
- <th
>
Last Name</
th
>
- <th
>
Address</
th
>
- <th
>
Action</
th
>
- </
tr
>
- </
thead
>
- <tbody
>
- <tr
ng-repeat=
"member in members"
ng-include=
"getTemplate(member)"
>
- </
tr
>
- </
tbody
>
- </
table
>
- <script
type
=
"text/ng-template"
id
=
"normal"
>
- <td
>
{{member.firstname}}</
td
>
- <td
>
{{member.lastname}}</
td
>
- <td
>
{{member.address}}</
td
>
- <td
><button
type
=
"button"
ng-click=
"edit(member)"
class
=
"btn btn-success"
><span
class
=
"glyphicon glyphicon-pencil"
></
span
>
Edit</
button
></
td
>
- </
script
>
- <script
type
=
"text/ng-template"
id
=
"edit"
>
- <td
><input
type
=
"text"
class
=
"form-control"
ng-model=
"editmember.firstname"
></
td
>
- <td
><input
type
=
"text"
class
=
"form-control"
ng-model=
"editmember.lastname"
></
td
>
- <td
><input
type
=
"text"
class
=
"form-control"
ng-model=
"editmember.address"
></
td
>
- <td
>
- <button
type
=
"button"
ng-click=
"save(editmember)"
class
=
"btn btn-primary"
><span
class
=
"glyphicon glyphicon-floppy-disk"
></
span
>
Save</
button
>
- <button
type
=
"button"
ng-click=
"reset()"
class
=
"btn btn-default"
><span
class
=
"glyphicon glyphicon-remove"
></
span
>
Cancel</
button
>
- </
td
>
- </
script
>
- </
div
>
- </
div
>
- </
div
>
- <script
src
=
"angular.js"
></
script
>
- </
body
>
- </
html
>
angular.js
This contains our angular js script.
- var
app =
angular.module
(
'app'
,
[
]
)
;
- app.controller
(
'memberdata'
,
function
(
$scope,
$http)
{
- $scope.success
=
false
;
- $scope.error
=
false
;
- $scope.editMode
=
false
;
- $scope.editmember
=
{
}
;
- $scope.getTemplate
=
function
(
member)
{
- if
(
member.memid
===
$scope.editmember
.memid
)
return
'edit'
;
- else
return
'normal'
;
- }
;
- $scope.fetch
=
function
(
)
{
- $http.get
(
'fetch.php'
)
.success
(
function
(
data)
{
- $scope.members
=
data;
- }
)
;
- }
- $scope.edit
=
function
(
member)
{
- $scope.editmember
=
angular.copy
(
member)
;
- }
- $scope.save
=
function
(
editmember)
{
- $http.post
(
'save.php'
,
editmember)
- .success
(
function
(
data)
{
- console.log
(
data)
;
- if
(
data.error
)
{
- $scope.error
=
true
;
- $scope.success
=
false
;
- $scope.message
=
data.message
;
- }
- else
{
- $scope.fetch
(
)
;
- $scope.reset
(
)
;
- $scope.success
=
true
;
- $scope.error
=
false
;
- $scope.message
=
data.message
;
- }
- }
)
;
- }
- $scope.reset
=
function
(
)
{
- $scope.editmember
=
{
}
;
- }
;
- $scope.clearMessage
=
function
(
)
{
- $scope.success
=
false
;
- $scope.error
=
false
;
- }
- }
)
;
fetch.php
This is our PHP api that fetches data from our MySQL Database.
- <?php
- $conn
=
new
mysqli(
'localhost'
,
'root'
,
''
,
'angular'
)
;
- $output
=
array
(
)
;
- $sql
=
"SELECT * FROM members"
;
- $query
=
$conn
->
query
(
$sql
)
;
- while
(
$row
=
$query
->
fetch_array
(
)
)
{
- $output
[
]
=
$row
;
- }
- echo
json_encode
(
$output
)
;
- ?>
save.php
Lastly, this is our PHP code/api in saving the changes we made to our table.
- <?php
- $conn
=
new
mysqli(
'localhost'
,
'root'
,
''
,
'angular'
)
;
- $data
=
json_decode
(
file_get_contents
(
"php://input"
)
)
;
- $out
=
array
(
'error'
=>
false
)
;
- $memid
=
$data
->
memid
;
- $firstname
=
$data
->
firstname
;
- $lastname
=
$data
->
lastname
;
- $address
=
$data
->
address
;
- $sql
=
"UPDATE members SET firstname = '$firstname
', lastname = '$lastname
', address = '$address
' WHERE memid = '$memid
'"
;
- $query
=
$conn
->
query
(
$sql
)
;
- if
(
$query
)
{
- $out
[
'message'
]
=
"Member updated Successfully"
;
- }
- else
{
- $out
[
'error'
]
=
true
;
- $out
[
'message'
]
=
"Cannot update Member"
;
- }
- echo
json_encode
(
$out
)
;
- ?>
That ends this tutorial. Happy Coding :)
Download
You must upgrade your account or reply in the thread to view the hidden content.