http://lekkerlogic.com/2015/05/angularjs-and-bootstrap-mysql-shopping-list-tutorial/
Purpose: Build a shopping list web app working with AngularJS, MySQL and Bootstrap. See the working sample here. Download the project files here.
I am quickly trying to learn AngularJS for an upcoming project and I wanted to work with the framework to create something I can learn with. I chose to make a very quick and easy shopping list web app for my family to use building off another tutorial. This way we can all share in the creation of a shopping list no matter where we are or who ends up at the store.
Yes, there are many 3rd party apps and services that provide this same functionality, but none of those allow for me to learn Angular or offer the speed and convenience as this.
I wont go into heavy details here as there are many AngularJS tutorials on the web to get the basic info for creating the general structure of an Angular app (such as ng-app=”myApp”, ng-controller=”MyController”). Lets just jump right into the mix.
First, lets create the MySQL table. The sql file for this is located in the download link above. Use that to setup your tables.
For this tutorial I am first going to go through all the HTML and template pages then circle back to show the app.js controller potion and PHP that ties it all together. Hopefully that makes things a little clearer rather than jumping between.
Looking at the index.html file there are few things to note:
<html ng-app="shopApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/shop.css"/> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <!-- Favicon --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <title>Shopping List</title> </head> <body ng-controller="shopController"> <div class="navbar navbar-default" id="navbar"> <div class="container" id="navbar-container"> <div class="navbar-header navbar-brand"><i class="fa fa-check-square-o"></i> Shopping List
<!-- /.navbar-header --> <div class="pull-right"> <button class="btn btn-default btn-sm mt-10" ng-click="clearItem()"> Clear Completed Items </button>
<div class="container"> <div class="row"> <div class="col-lg-12 col-sm-12"> <div ng-include src="'templates/shop.html'"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script type="text/javascript" src="app/app.js"></script> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<html
ng-app
=
"shopApp"
>
<head>
<meta
charset
=
"utf-8"
>
<meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge,chrome=1"
>
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
<link
rel
=
"stylesheet"
href
=
"//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/shop.css"
/>
<link
href
=
'http://fonts.googleapis.com/css?family=Montserrat:400,700'
rel
=
'stylesheet'
type
=
'text/css'
>
<!-- Favicon -->
<link
rel
=
"shortcut icon"
href
=
"favicon.ico"
type
=
"image/x-icon"
>
<link
rel
=
"icon"
href
=
"favicon.ico"
type
=
"image/x-icon"
>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>
Shopping List
</title>
</head>
<body
ng-controller
=
"shopController"
>
<div
class
=
"navbar navbar-default"
id
=
"navbar"
>
<div
class
=
"container"
id
=
"navbar-container"
>
<div
class
=
"navbar-header navbar-brand"
>
<i
class
=
"fa fa-check-square-o"
>
</i>
Shopping List
<!-- /.navbar-header -->
<div
class
=
"pull-right"
>
<button
class
=
"btn btn-default btn-sm mt-10"
ng-click
=
"clearItem()"
>
Clear Completed Items
</button>
<div
class
=
"container"
>
<div
class
=
"row"
>
<div
class
=
"col-lg-12 col-sm-12"
>
<div ng
-include
src
=
"'templates/shop.html'"
>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</body>
</html>
|
Notice we are using ng-include src="'templates/shop.html'" to include a separate html file that contains the majority of our Angular items. The actual index.html is rather straight forward so wont I spend time on this. Don’t forget to declare your app <html ng-app="shopApp"> and controller <body ng-controller="shopController"> here and also include the Angular library as well as the path to your app.js file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script type="text/javascript" src="app/app.js"></script>
|
|
<script
src
=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
>
</script>
<script
type
=
"text/javascript"
src
=
"app/app.js"
>
</script>
|
Now lets take a look at our templates/shop.html that we use to display out items.
<form class="form-inline" name="shopList"> <div class="form-actions"> <div class="input-group"> <input type="text" class="form-control" ng-model="itemInput" placeholder="Add New Item" autofocus required /> <div class="input-group-btn"> <button class="btn btn-info" type="submit" ng-click="addItem(itemInput); itemInput = null" ng-disabled="shopList.$invalid"> <i class="fa fa-plus"></i> Add Item </button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
|
<form
class
=
"form-inline"
name
=
"shopList"
>
<div
class
=
"form-actions"
>
<div
class
=
"input-group"
>
<input
type
=
"text"
class
=
"form-control"
ng-model
=
"itemInput"
placeholder
=
"Add New Item"
autofocus
required
/>
<div
class
=
"input-group-btn"
>
<button
class
=
"btn btn-info"
type
=
"submit"
ng-click
=
"addItem(itemInput); itemInput = null"
ng-disabled
=
"shopList.$invalid"
>
<i
class
=
"fa fa-plus"
>
</i>
Add Item
</button>
</form>
|
First we have our form to add a new item to our list. This is a standard web form but we use some Angular directives to bind and trigger our insert statement. Using ng-model="itemInput" we can capture the data being typed in our input field and pass it to the click function in ng-click="addItem(itemInput); itemInput = null" that will eventually be inserted into our MySQL table using the addItem() function (more later on this).
To filter our results once they are loaded into the page we create another text input.
<div class="col-sm-3 hidden-xs"> <input type="text" ng-model="filterItem" class="form-control" placeholder="Filter Items" />
|
|
<
div
class
=
"col-sm-3 hidden-xs"
>
<
input
type
=
"text"
ng
-
model
=
"filterItem"
class
=
"form-control"
placeholder
=
"Filter Items"
/
>
<
/
div
>
|
Using the ng-model="filterItem" directive we can again capture the data and pass it along somewhere else in our program.
Finally, we need to output our list of items and make the associated triggers to show those items as complete or deleting them:
<fieldset class="items-list"> <label class="items-list-item" ng-repeat="item in items | filter : filterItem"> <input type="checkbox" value="{{item.STATUS}}" ng-checked="item.STATUS==2" ng-click="changeStatus(item.ID,item.STATUS,item.ITEM)" class="items-list-cb"/> <span class="items-list-mark"> <span class="items-list-desc" ng-class="{strike:item.STATUS==2}">{{item.ITEM}} <span class="date">[{{item.CREATED_AT | date:"MMM d"}}] <a ng-click="deleteItem(item.ID)" class="pull-right red"><i class="fa fa-minus-circle"></i> </label> </fieldset>
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<fieldset
class
=
"items-list"
>
<label
class
=
"items-list-item"
ng-repeat
=
"item in items | filter : filterItem"
>
<input
type
=
"checkbox"
value
=
"{{item.STATUS}}"
ng-checked
=
"item.STATUS==2"
ng-click
=
"changeStatus(item.ID,item.STATUS,item.ITEM)"
class
=
"items-list-cb"
/>
<span
class
=
"items-list-mark"
>
<span
class
=
"items-list-desc"
ng-class
=
"{strike:item.STATUS==2}"
>
{{item.ITEM}}
<span
class
=
"date"
>
[{{item.CREATED_AT | date:"MMM d"}}]
<a
ng-click
=
"deleteItem(item.ID)"
class
=
"pull-right red"
>
<i
class
=
"fa fa-minus-circle"
>
</i>
</label>
</fieldset>
|
Notice we are using the ng-repeat directive for ng-repeat="item in items | filter : filterItem" to show each item in the items data set. ng-repeat is a very powerful directive in Angular and is the heart of this particular web app. Here we also tie in our filterItem field so we can filter the results.
For the input we are setting the value to the status value from the data table using {{item.STATUS}} and when the item status is ==2 we set the input state as checked. To trigger this we use ng-click="changeStatus(item.ID,item.STATUS,item.ITEM) to update the entry in MySQL with the changeStatus() function found in our controller (more on that in a bit). We then output our results in a <span> with {{item.ITEM}} using ng-class="{strike:item.STATUS==2}" to set the CSS for a strike-thru as well as format the date field with [{{item.CREATED_AT | date:”MMM d”}}]. Last we have a delete function in place to remove items as needed calling on another function in our controller via ng-click="deleteItem(item.ID)"
OK, on to our controller found in app.js
//Define an angular module for our app var app = angular.module('shopApp', []); app.controller('shopController', function($scope, $http) {
|
|
//Define an angular module for our app
var
app
=
angular
.
module
(
'shopApp'
,
[
]
)
;
app
.
controller
(
'shopController'
,
function
(
$
scope
,
$
http
)
{
|
First we define our app ‘shopApp’ and our controller to use ‘shopController’. Remember these are linking the asscoatiated areas found within index.html using <html ng-app="shopApp"> and <body ng-controller="shopController">
Now we enter our functions to make our various MySQL requests for creating, reading, updating and deleting our items (CRUD).
getItem(); // Load all available items function getItem(){ $http.post("ajax/getItem.php").success(function(data){ $scope.items = data; }); }; $scope.addItem = function (item) { $http.post("ajax/addItem.php?item="+item).success(function(data){ getItem(); $scope.itemInput = ""; }); }; $scope.deleteItem = function (item) { if(confirm("Are you sure to delete this item?")){ $http.post("ajax/deleteItem.php?itemID="+item).success(function(data){ getItem(); }); } }; $scope.clearItem = function () { if(confirm("Delete all checked items?")){ $http.post("ajax/clearItem.php").success(function(data){ getItem(); }); } }; $scope.changeStatus = function(item, status, task) { if(status=='2'){status='0';}else{status='2';} $http.post("ajax/updateItem.php?itemID="+item+"&status="+status).success(function(data){ getItem(); }); };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
getItem
(
)
;
// Load all available items
function
getItem
(
)
{
$
http
.
post
(
"ajax/getItem.php"
)
.
success
(
function
(
data
)
{
$
scope
.
items
=
data
;
}
)
;
}
;
$
scope
.
addItem
=
function
(
item
)
{
$
http
.
post
(
"ajax/addItem.php?item="
+
item
)
.
success
(
function
(
data
)
{
getItem
(
)
;
$
scope
.
itemInput
=
""
;
}
)
;
}
;
$
scope
.
deleteItem
=
function
(
item
)
{
if
(
confirm
(
"Are you sure to delete this item?"
)
)
{
$
http
.
post
(
"ajax/deleteItem.php?itemID="
+
item
)
.
success
(
function
(
data
)
{
getItem
(
)
;
}
)
;
}
}
;
$
scope
.
clearItem
=
function
(
)
{
if
(
confirm
(
"Delete all checked items?"
)
)
{
$
http
.
post
(
"ajax/clearItem.php"
)
.
success
(
function
(
data
)
{
getItem
(
)
;
}
)
;
}
}
;
$
scope
.
changeStatus
=
function
(
item
,
status
,
task
)
{
if
(
status
==
'2'
)
{
status
=
'0'
;
}
else
{
status
=
'2'
;
}
$
http
.
post
(
"ajax/updateItem.php?itemID="
+
item
+
"&status="
+
status
)
.
success
(
function
(
data
)
{
getItem
(
)
;
}
)
;
}
;
|
getItem() is our main function that you will see called. This retrieves the data from our MySQL using the getItem.php file located in /ajax.
<?php require_once '../includes/db.php'; // The mysql database connection script $status = '%'; if(isset($_GET['status'])){ $status = $mysqli->real_escape_string($_GET['status']); } $query="SELECT ID, ITEM, STATUS, CREATED_AT from shop where status like '$status' order by status,id desc"; $result = $mysqli->query($query) or die($mysqli->error.__LINE__); $arr = array(); if($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $arr[] = $row; } } # JSON-encode the response echo $json_response = json_encode($arr); ?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?php
require_once
'../includes/db.php'
;
// The mysql database connection script
$status
=
'%'
;
if
(
isset
(
$_GET
[
'status'
]
)
)
{
$status
=
$mysqli
->
real_escape_string
(
$_GET
[
'status'
]
)
;
}
$query
=
"SELECT ID, ITEM, STATUS, CREATED_AT from shop where status like '$status' order by status,id desc"
;
$result
=
$mysqli
->
query
(
$query
)
or
die
(
$mysqli
->
error
.
__LINE__
)
;
$arr
=
array
(
)
;
if
(
$result
->
num_rows
>
0
)
{
while
(
$row
=
$result
->
fetch_assoc
(
)
)
{
$arr
[
]
=
$row
;
}
}
# JSON-encode the response
echo
$json_response
=
json_encode
(
$arr
)
;
?>
|
The remaining functions are all very similar once you understand the basic concepts. By using $_GET within PHP we can pass the data into the MySQL query to get what we need. By looking at addItem() we can see how this is done. We call this function using ng-click="addItem(itemInput)" where the itemInput is from our input field.
$scope.addItem = function (item) { $http.post("ajax/addItem.php?item="+item).success(function(data){ getItem(); $scope.itemInput = ""; }); };
|
|
$scope
.
addItem
=
function
(
item
)
{
$http
.
post
(
"ajax/addItem.php?item="
+
item
)
.
success
(
function
(
data
)
{
getItem
(
)
;
$scope
.
itemInput
=
""
;
}
)
;
}
;
|
Here we pass the item entered into our input field thru to MySQL to be inserted. The PHP looks like this:
<?php require_once '../includes/db.php'; // The mysql database connection script if(isset($_GET['item'])){ $item = $mysqli->real_escape_string($_GET['item']); $status = "0"; $created = date("Y-m-d", strtotime("now")); $query="INSERT INTO shop(item,status,created_at) VALUES ('$item', '$status', '$created')"; $result = $mysqli->query($query) or die($mysqli->error.__LINE__); $result = $mysqli->affected_rows; echo $json_response = json_encode($result); } ?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?php
require_once
'../includes/db.php'
;
// The mysql database connection script
if
(
isset
(
$_GET
[
'item'
]
)
)
{
$item
=
$mysqli
->
real_escape_string
(
$_GET
[
'item'
]
)
;
$status
=
"0"
;
$created
=
date
(
"Y-m-d"
,
strtotime
(
"now"
)
)
;
$query
=
"INSERT INTO shop(item,status,created_at) VALUES ('$item', '$status', '$created')"
;
$result
=
$mysqli
->
query
(
$query
)
or
die
(
$mysqli
->
error
.
__LINE__
)
;
$result
=
$mysqli
->
affected_rows
;
echo
$json_response
=
json_encode
(
$result
)
;
}
?>
|
Again we are saying $_GET[‘item’] from our form and set it as the $item variable to be inserted in the item column.
The only function that is slightly different is our toggleStatus() function. This triggers the item to be complete or not, by updating the status from 0 to 2.
$scope.changeStatus = function(item, status, task) { if(status=='2'){status='0';}else{status='2';} $http.post("ajax/updateItem.php?itemID="+item+"&status="+status).success(function(data){ getItem(); }); };
|
|
$
scope
.
changeStatus
=
function
(
item
,
status
,
task
)
{
if
(
status
==
'2'
)
{
status
=
'0'
;
}
else
{
status
=
'2'
;
}
$
http
.
post
(
"ajax/updateItem.php?itemID="
+
item
+
"&status="
+
status
)
.
success
(
function
(
data
)
{
getItem
(
)
;
}
)
;
}
;
|
<?php require_once '../includes/db.php'; // The mysql database connection script if(isset($_GET['itemID'])){ $status = $mysqli->real_escape_string($_GET['status']); $itemID = $mysqli->real_escape_string($_GET['itemID']); $query="UPDATE shop set status='$status' where id='$itemID'"; $result = $mysqli->query($query) or die($mysqli->error.__LINE__); $result = $mysqli->affected_rows; $json_response = json_encode($result); } ?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?php
require_once
'../includes/db.php'
;
// The mysql database connection script
if
(
isset
(
$_GET
[
'itemID'
]
)
)
{
$status
=
$mysqli
->
real_escape_string
(
$_GET
[
'status'
]
)
;
$itemID
=
$mysqli
->
real_escape_string
(
$_GET
[
'itemID'
]
)
;
$query
=
"UPDATE shop set status='$status' where id='$itemID'"
;
$result
=
$mysqli
->
query
(
$query
)
or
die
(
$mysqli
->
error
.
__LINE__
)
;
$result
=
$mysqli
->
affected_rows
;
$json_response
=
json_encode
(
$result
)
;
}
?>
|
As you can see Angular provides some pretty cool feature that help HTML become what it should have been when it was first released. Granted we had no idea back then what we would be doing with it now.
This proved a great way for me to learn some of the basic features of this framework and looking forward to doing more with it. Let me know how you might improve this in the comments below.
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
阅读(21) | 评论(0) | 转发(0) |
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
