orum4479
Anime Culture Researcher
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
200 XP
Getting Started
I've used CDN for Bootstrap and Angular JS in this tutorial so you need internet connection for them to work.
Creating our Database
First, we are going to create our database.
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
Next, this is our index that contains out add form.
angular.js
This contains our angular js scripts.
fetch.php
This is our PHP api/code that fetches data from our MySQL database.
add.php
Lastly, this is our PHP api/code in adding one or multiple rows into our database.
That ends this tutorial. Happy Coding :)
Download
I've used CDN for Bootstrap and Angular JS in this tutorial so you need internet connection for them to work.
Creating our Database
First, we are going to create our database.
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;
index.html
Next, this is our index that contains out add form.
- <!DOCTYPE html>
- <html
lang
=
"en"
ng-app=
"app"
>
- <head
>
- <meta
charset
=
"utf-8"
>
- <title
>
AngularJS Adding Form Fields Dynamically with 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 Adding Form Fields Dynamically with PHP/MySQLi</
h1
>
- <div
class
=
"row"
>
- <div
class
=
"col-md-8 col-md-offset-2"
>
- <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
>
{{ successMessage }}
- </
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
>
{{ errorMessage }}
- </
div
>
- <form
name
=
"addForm"
novalidate>
- <fieldset
ng-repeat=
"memberfield in memberfields"
>
- <div
class
=
"panel panel-default"
>
- <div
class
=
"panel-body"
>
- <div
class
=
"row"
>
- <div
class
=
"col-md-3"
>
- <input
type
=
"text"
placeholder=
"Firstname"
class
=
"form-control"
ng-model=
"memberfield.firstname"
required>
- </
div
>
- <div
class
=
"col-md-3"
>
- <input
type
=
"text"
placeholder=
"Lastname"
class
=
"form-control"
ng-model=
"memberfield.lastname"
required>
- </
div
>
- <div
class
=
"col-md-5"
>
- <input
type
=
"text"
placeholder=
"Address"
class
=
"form-control"
ng-model=
"memberfield.address"
required>
- </
div
>
- <button
class
=
"btn btn-danger btn-sm"
ng-show=
"$last"
ng-click=
"removeField()"
><span
class
=
"glyphicon glyphicon-remove"
></
span
></
button
>
- </
div
>
- </
div
>
- </
div
>
- </
fieldset
>
- <button
type
=
"button"
class
=
"btn btn-primary"
ng-click=
"newfield()"
><span
class
=
"glyphicon glyphicon-plus"
></
span
>
Add</
button
>
- <button
type
=
"button"
class
=
"btn btn-primary"
ng-disabled
=
"addForm.$invalid"
ng-click=
"submitForm()"
><span
class
=
"glyphicon glyphicon-floppy-disk"
></
span
>
Save</
button
>
- </
form
>
- <table
class
=
"table table-bordered table-striped"
style
=
"margin-top:10px;"
>
- <thead
>
- <tr
>
- <th
>
First Name</
th
>
- <th
>
Last Name</
th
>
- <th
>
Address</
th
>
- </
tr
>
- </
thead
>
- <tbody
>
- <tr
ng-repeat=
"member in members"
>
- <td
>
{{ member.firstname }}</
td
>
- <td
>
{{ member.lastname }}</
td
>
- <td
>
{{ member.address }}</
td
>
- </
tr
>
- </
tbody
>
- </
table
>
- </
div
>
- </
div
>
- </
div
>
- <script
src
=
"angular.js"
></
script
>
- </
body
>
- </
html
>
angular.js
This contains our angular js scripts.
- var
app =
angular.module
(
'app'
,
[
]
)
;
- app.controller
(
'memberdata'
,
function
(
$scope,
$http)
{
- $scope.success
=
false
;
- $scope.error
=
false
;
- $scope.fetch
=
function
(
)
{
- $http.get
(
"fetch.php"
)
.success
(
function
(
data)
{
- $scope.members
=
data;
- }
)
;
- }
- $scope.memberfields
=
[
{
id:
'field1'
}
]
;
- $scope.newfield
=
function
(
)
{
- var
newItem =
$scope.memberfields
.length
+
1
;
- $scope.memberfields
.push
(
{
'id'
:
'field'
+
newItem}
)
;
- }
- $scope.submitForm
=
function
(
)
{
- $http.post
(
'add.php'
,
$scope.memberfields
)
- .success
(
function
(
data)
{
- if
(
data.error
)
{
- $scope.error
=
true
;
- $scope.success
=
false
;
- $scope.errorMessage
=
data.message
;
- }
- else
{
- $scope.error
=
false
;
- $scope.success
=
true
;
- $scope.successMessage
=
data.message
;
- $scope.fetch
(
)
;
- $scope.memberfields
=
[
{
id:
'field1'
}
]
;
- }
- }
)
;
- }
- $scope.removeField
=
function
(
)
{
- var
lastItem =
$scope.memberfields
.length
-
1
;
- $scope.memberfields
.splice
(
lastItem)
;
- }
;
- $scope.clearMessage
=
function
(
)
{
- $scope.success
=
false
;
- $scope.error
=
false
;
- }
- }
)
;
fetch.php
This is our PHP api/code 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
)
;
- ?>
add.php
Lastly, this is our PHP api/code in adding one or multiple rows into our database.
- <?php
- $conn
=
new
mysqli(
'localhost'
,
'root'
,
''
,
'angular'
)
;
- $data
=
json_decode
(
file_get_contents
(
"php://input"
)
)
;
- $count
=
count
(
$data
)
;
- $out
=
array
(
'error'
=>
false
)
;
- foreach
(
$data
as
$key
=>
$value
)
{
- $firstname
=
$value
->
firstname
;
- $lastname
=
$value
->
lastname
;
- $address
=
$value
->
address
;
- $sql
=
"INSERT INTO members (firstname, lastname, address) VALUES ('$firstname
', '$lastname
', '$address
')"
;
- $query
=
$conn
->
query
(
$sql
)
;
- }
- if
(
$query
)
{
- $out
[
'message'
]
=
"($count
) Member/s added successfully"
;
- }
- else
{
- $out
[
'error'
]
=
true
;
- $out
[
'message'
]
=
"Cannot add Member(s)"
;
- }
- echo
json_encode
(
$out
)
;
- ?>
That ends this tutorial. Happy Coding :)
Download
You must upgrade your account or reply in the thread to view hidden text.