1. Copyright © Steven W. Johnson
SE 370: Programming Web Services
Week 11: JSON & RESTful
Copyright © Steven W. Johnson
February 1, 2013

2. Today:
asdf

3. JSON:
REST uses JSON to transmit data

4. JSON: JavaScript Object Notation Douglas Crockford (2002)
JSON: text-based, open data interchange system

5. JSON: Purpose: data interchange (kavşak) format
serialize data for network transmission
passes objects as strings from server to client
Intention: a light-weight alternative to XML
Incorporated into ISO
Part of ECMAScript, RFC 4627

6. JSON:
M. C. Escher: (1898 – 1972)

7. JSON: Basic format of JSON: all data held in square brackets
each record held in curly brackets
field is made up of:
field name in quotes
value written appropriate to its data type
name/value pairs delimited by commas [
{“name”: value, “name”: “value”},
{“name”: value, “name”: “value”} ]

8. JSON: JSON formatting options: Ajax format for JSON employees = [
{"firstName":"John", "lastName":"Doe", "age":"18"},
{"firstName":"Peter", "lastName":"Jones", "age":"21"} ];

9. JSON: REST: each record in curly brackets
all records in square brackets
array = [{0, 1, 2, 3}, {4, 5, 6, 7}, {8, 9, 10, 11}]; 1 2 3
[0,0]
[0,1]
[0,2]
[0,3]
[1,0]
[1,1]
[1,2]
[1,3]
[2,0]
[2,1]
[2,2]
[2,3]
array[2][1]; //9
array[1][3]; //7

10. JSON: Each represents the same data; “records”
Effectively a database table
students = [
{“name”:“Ali”, “age”:”20”, “bolum”:“MBBF” },
{“name”:“Bahar”, “age”:”21”, “bolum”:“ITF” } ];
Students
Name
Age
Bolum
Gender
Ali 20
MBBF
Erkek
Bahar 21
ITF
Hanim
students[1].age //21

11. JSON: An array of arrays or a database with 2 tables
‘Company’ is DB, tables ‘employees’, ‘managers’
var company =
{“employees”: [
{ "firstName":"John" , "lastName":"Doe" , "age":"18"},
{ "firstName":"Anna" , "lastName":"Smith" , "age":"20"},
{ "firstName":"Peter" , "lastName":"Jones" , "age":"21"} ],
“managers”: [
{ "firstName":"Alice" , "lastName":“Williams" , "age":"19"},
{ "firstName":"Carla" , "lastName":“Walker" , "age":"23"},
{ "firstName":"Joe" , "lastName":“Evans" , "age":"22"} ] }
document.write(company.employees[2].firstName); //Peter
document.write(company.managers[1].age); //23

12. JSON: Update table values also var company = {“employees”: [
{ "firstName":"John" , "lastName":"Doe" , "age":"18"},
{ "firstName":"Anna" , "lastName":"Smith" , "age":"20"},
{ "firstName":"Peter" , "lastName":"Jones" , "age":"21"} ],
“managers”: [
{ "firstName":“Alice" , "lastName":“Williams" , "age":"19"},
{ "firstName":“Carla" , "lastName":“Walker" , "age":"23"},
{ "firstName":“Joe" , "lastName":“Evans" , "age":"22"} ] }
company.employees[2].firstName= “Steve”;

13. JSON: x-dimensional array saved as ‘employees’ objname[i]fieldname:
{ "firstName":"John" , "lastName":"Doe" , "age":18},
{ "firstName":"Anna" , "lastName":"Smith" , "age":20},
{ "firstName":"Peter" , "lastName":"Jones" , "age":21} ];
document.write(employees[1].age); //20

14. JSON: JSON supports UTF-8; Notepad doesn’t
Must save UTF-8 files using UTF-8, not ANSI

15. JSON: Derived from JavaScript to represent objects:
simple data structures
associative arrays
parsers available for many languages

16. JSON: JSON versus XML: “students”= [
{“name”: “Ali”, “age”: “20”, “bolum”: “MBBF”},
{“name”: “Bahar”, “age”: “21”, “bolum”: “ITF”} ]
<?xml version=“1.0” encoding=“utf-8”?>
<students>
<student>
<name>Ali</name>
<age>20</age>
<bolum>MBBF</bolum>
<gender>Erkek</gender>
</student>
<name>Bahar</name>
<age>21</age>
<bolum>ITF</bolum>
<gender>Hanim</gender>
</students>

17. {“firstname”: “Canan”}
JSON:
MIME type: application/json
Extension: .json
Basic form: uses name/value pairs
JSON can be stored in either .json and .txt
data.txt
{“firstname”: “Canan”}
firstname = “Canan”;
data.json 17 17

18. JSON advantages: JSON is JavaScript
‘XML’ with anorexia; faster to parse*
Easier to write, lightweight, less verbose
True data format, not a meta language
<name>Steve</name>
“name”: “Steve”,

19. JSON similarities: True for both XML and JSON: language independent
cross-platform
self-describing
human readable
hierarchical (data in data, values describing values)

20. JSON disadvantages: JSON is JavaScript
Requires use of ‘eval’ function*
Reserved JavaScript keywords can’t be used as
element names
XML is more familiar, more like HTML
XML more precise due to specific DTD
XML has better support

21. JSON: Data types of JSON: (just like JavaScript)
number (JavaScript has no ‘float’ and ‘integer’)
string
Boolean
array
object
null

22. JSON versus XML: Both describe objects as strings
Both are suitable for use in web services
Both enjoy broad support, libraries, etc
Tools exist to convert
Data conversion can easily be done manually
<name>Steve</name>
“name”: “Steve”,

23. JSON: <name>Ali</name> Convert XML to JSON:
b=indexOf(">")
c=lastIndexOf("<")
a=indexOf("<")
d=lastIndexOf("<")
<name>Ali</name>
"name"=substr(a+1,b-1)
"Ali"=substring(b+1,c)
"</"+name+">"
String.substr (start, # of characters);
String.substring(start, finish);

24. JSON: <name>Ali</name> Convert XML to JSON:
b=indexOf(">")
c=lastIndexOf("<")
a=indexOf("<")
d=lastIndexOf("<")
<name>Ali</name>
"name"=substr(a+1,b-1)
"Ali"=substring(b+1,c)
document.write(name, value);

25. JSON: Convert XML to JSON: <firstname>Ali</firstname>
<lastname>Zeybek</lastname>
<age>23</age>
for (i=0; i<length; i++) {
name = String[i].substr(a+1,b-1)
value = String[i].substring(b+1,c)
document.write("\""+name+"\": \""+value+"\", "); }
for (i=0; i<length; i++) {
name = String.substr(a+1,b-1)
value = String.substring(b+1,c)
document.write(name, value); }

26. Lab: JSON Parser Convert XML to name/value pairs
Output: “CustomerNumber”: “3568”,
Assume data held in single string ‘data’
<Cust>123</Cust> <First>Ali</First>
Data= “<CustomerNumber>7458</CustomerNumber> <FirstName>Elif</FirstName>
<Surname>Bardukoglu</Surname> <Discount>5</Discount>”;
<CustomerNumber>7458</CustomerNumber>
<FirstName>Elif</FirstName>
<Surname>Bardukoglu</Surname>
<Discount>5</Discount>

27. Lab: JSON Parser <script>
data = "<CustomerNumber>7458</CustomerNumber> <FirstName>Elif</FirstName> <Surname>Bardukoglu</Surname> <Discount>5</Discount>";
var rawdata = data.split(" ");
count = rawdata.length;
for (i=0; i<count; i++) {
namestart = rawdata[i].indexOf("<");
nameend = rawdata[i].indexOf(">");
nametext = rawdata[i].substring(namestart + 1, nameend);
valuestart = nameend;
valueend = rawdata[i].lastIndexOf("<");
valuetext = rawdata[i].substring(valuestart + 1, valueend);
document.write("\""+nametext+"\": \""+valuetext+"\"");
if (i < count-1) document.write(", "); }
</script>

28. Break

29. Lab: JSON Parser Convert JSON to XML: <students> <student>
<name>Ali</name>
<age>20</age>
<bolum>MBBF</bolum>
</student>
<name>Bahar</name>
<age>21</age>
<bolum>ITF</bolum>
</students>
student=[
{"name":"Ali","age":"20","bolum":"MBBF"},
{"name":"Bahar","age":"21","bolum":"ITF"} ];

30. Lab: JSON Parser Convert JSON to XML:
Root element is ‘students’ (not considered)
‘Students’ is root element
Text before “=” is like record name
Rows are like records; holds field names, values
student=[
{"name":"Ali","age":"20","bolum":"MBBF"},
{"name":"Bahar","age":"21","bolum":"ITF"} ];

31. Lab: JSON Parser Convert JSON to XML: (format is different)
Assume no spaces in the ‘data’
student=[{"name":"Ali","age":"20","bolum":"MBBF"},{"name":"Bahar","age":"21","bolum":"ITF"}];
<students>
<student>
<name>Ali</name>
<age>20</age>
<bolum>MBBF</bolum>
</student>
<name>Bahar</name>
<age>21</age>
<bolum>ITF</bolum>
</students>

32. Lab: JSON Parser Convert JSON to XML: (format is different)
replace(“\“:\””, “ “)
indexOf(“\””)
lastIndexOf(“\””)
split(“ ”)
replace(“\”,\””, “ “)
student=[{"name":"Ali","age":"20","bolum":"MBBF"},{"name":"Bahar","age":"21","bolum":"ITF"}];
name Ali age 20 bolum MBBF"},
{"name Bahar age 21 bolum ITF

33. Quiz: 1. What is the address of the value 24? [2, 1] 12 16 17 5 8 3 2433 33

34. Quiz: 2. Place this array in the table:
[[1, 2, 3], [4, 5, 6], [7, 8, 9]] 1 2 3 4 5 6 7 8 9 34 34

35. Quiz: 3. What XML tag is most like a record? <bbb>
<aaa> <bbb> <ccc>data</ccc> <ccc>data</ccc> <ccc>data</ccc> </bbb> </aaa> 35 35

36. Quiz: 4. From <aaa>, the address of <bbb>?
5. Child nodes of <ccc>
6. What is the root node?
<aaa>[0].childNodes[0]
<aaa>
<aaa> <bbb> <ccc>11</ccc> <ccc>22</ccc> <ccc>33</ccc> </bbb> </aaa> 36 36

37. Quiz: 7. Children of <aaa>? 1
8. Value of <bbb>[0].childNodes[1].childNodes[0].nodeValue 1 22
<aaa> <bbb> <ccc>11</ccc> <ccc>22</ccc> <ccc>33</ccc> </bbb> </aaa> 37 37

38. Quiz: 9. JSON array of 3 names: friends = [
{“name”:”Ali”, “name”:”Bahar”, “name”:”Canan”} ]; 38 38

39. Quiz: 10. What is the value of company.employees[1].age? 20
var company =
{“employees”: [
{ "firstName":"John" , "lastName":"Doe" , "age":18},
{ "firstName":"Anna" , "lastName":"Smith" , "age":20},
{ "firstName":"Peter" , "lastName":"Jones" , "age":21} ],
“managers”: [
{ "firstName":“Alice" , "lastName":“Williams" , "age":19},
{ "firstName":“Carla" , "lastName":“Walker" , "age":23},
{ "firstName":“Joe" , "lastName":“Evans" , "age":22} ] } 39 39

40. Copyright © Steven W. Johnson
SE 370: Programming Web Services
Week 12: JSON
Copyright © Steven W. Johnson
February 1, 2013

41. Today:
asd

42. Week 2:
Labs:
Assignment:

43. Course textbook:
asd

44. Break

45. Week 2:
Labs:
Assignment:

46. Lab: Hello RESTful Webapps
Deploy (rt. Click on project – Deploy)

47. REST: GET/POST/PUT/DELETE methods of HTTP Requires tomcat
Made in maven
RESTEasy
NetBeans 47

48. Lab: Web Service using REST
Customers in table:
@Stateless
@Path("customerdb.customer")
public class CustomerFacadeREST extends AbstractFacade<Customer> {
@PersistenceContext(unitName = "CustomerDBPU")
private EntityManager em;
public CustomerFacadeREST() {
super(Customer.class); }
@POST
@Override
@Consumes({"application/xml", "application/json"})
public void create(Customer entity) {
super.create(entity);
@PUT
public void edit(Customer entity) {
super.edit(entity);
@DELETE
@Path("{id}")
public void Integer id) {
super.remove(super.find(id));
@GET
@Produces({"application/xml", "application/json"})
public Customer Integer id) {
return super.find(id);
public List<Customer> findAll() {
return super.findAll();
@Path("{from}/{to}")
public List<Customer> Integer Integer to) {
return super.findRange(new int[]{from, to});
@Path("count")
@Produces("text/plain")
public String countREST() {
return String.valueOf(super.count());
protected EntityManager getEntityManager() {
return em;

49. Lab: Web Service using REST
Customers in table:
@Stateless
@Path("customerdb.customer")
public class CustomerFacadeREST extends AbstractFacade<Customer> {
@PersistenceContext(unitName = "CustomerDBPU")
private EntityManager em;
public CustomerFacadeREST() {
super(Customer.class); }
@POST
@Override
@Consumes({"application/xml", "application/json"})
public void create(Customer entity) {
super.create(entity);
@PUT
public void edit(Customer entity) {
super.edit(entity);
@DELETE
@Path("{id}")
public void Integer id) {
super.remove(super.find(id));
@GET
@Produces({"application/xml", "application/json"})
public Customer Integer id) {
return super.find(id);
public List<Customer> findAll() {
return super.findAll();
@Path("{from}/{to}")
public List<Customer> Integer Integer to) {
return super.findRange(new int[]{from, to});
@Path("count")
@Produces("text/plain")
public String countREST() {
return String.valueOf(super.count());
protected EntityManager getEntityManager() {
return em;

50. Lab: Web Service using REST
Create record 14 as yourself
{"discountCode":"H","rate":16.00,"customerCollection":[{"customerId":36,"name":"Bob Hosting Corp.","addressline1":"65653 Lake Road","addressline2":"Suite 2323","city":"San Mateo","state":"CA","phone":" ","fax":" "," ":"
<?xml version="1.0" encoding="UTF-8"?>    <customers>        <customer>            <addressline1>111 E. Las Olivas Blvd</addressline1>            <addressline2>Suite 51</addressline2>            <city>Fort Lauderdale</city>            <creditLimit>100000</creditLimit>            <customerId>1</customerId>            <discountCode>                <discountCode>78</discountCode>                <rate>0.00</rate>            </discountCode>                      <fax> </fax>            <name>Jumbo Eagle Corp</name>            <phone> </phone>            <state>FL</state>        </customer>
<?xml version="1.0" encoding="UTF-8"?>    <customers>        <customer>            <addressline1>6482 Sokak #33/1</addressline1>            <addressline2>Suite 51</addressline2>            <city>Fort Lauderdale</city>            <creditLimit>100000</creditLimit>            <customerId>14</customerId>            <discountCode>                <discountCode>75</discountCode>                <rate>0.00</rate>            </discountCode>                      <fax> </fax>            <name>Jumbo Eagle Corp</name>            <phone> </phone>            <state>FL</state>        </customer>

51. Lab: Web Service using REST
Create the client application:
File – New Project

52. Lab: Web Service using REST
Uncheck ‘Create Main Class’ – Finish

53. Lab: Web Service using REST
Rt. Click Project – New – Entity Classes from Database

54. Lab: Web Service using REST
Add package name - Finish

55. Lab: Web Service using REST
Rt. Click on client project
New – Other… - Web Services – RESTful Java Client

56. Lab: Web Service using REST
Create the client application:
File – New Project

57. Copyright © Steven W. Johnson
SE 370: Programming Web Services
Week 12: JSON
Copyright © Steven W. Johnson
February 1, 2013

58. Lab: CRONentry Use CRON to run the client page
Asadmin in glassfish – bin
rs.next();
int id=921;
String customernumber = "ABCD";
String sku = rs.getString("sku");
int qtyordered = rs.getInt("maxstock") - rs.getInt("onhand");

59. Lab: CRONentry
Open ‘Projects’ tab – File – New Project - Java

60. Lab: CRONentry Name: OrderWS (all server side is ‘order’)
Main Class: DBConnect

61. Lab: CRONentry Gives a class DBConnect /*
* To change this template, choose Tools | Templates
* and open the template in the editor. */
package orderws;
/** *
Steve
public class DBConnect {
args the command line arguments
public static void main(String[] args) {
// TODO code application logic here }

62. Lab: CRONentry Connection to DB requires imports:
unused import (will be used later)
package orderws;
import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException;
public class DBConnect {
/**
args the command line arguments */
public static void main(String[] args) {
// TODO code application logic here }

63. Lab: CRONentry Set up the connection string:
Error: ‘unreported exception’ (add try/catch: coming)
package orderws;
import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException;
public class DBConnect {
/**
args the command line arguments */
public static void main(String[] args) {
String host = “jdbc:derby://localhost:1527/order”;
String user = “stevej”
String pass = “izmir”
Connection con = DriverManager.getConnection(host, user, pass); }

64. Lab: CRONentry Add try/catch framework:
public static void main(String[] args) {
try {
String host = “jdbc:derby://localhost:1527/order”;
String user = “stevej”
String pass = “izmir”
Connection con = DriverManager.getConnection(host, user, pass); }
catch (SQLException err) {
System.out.println(err.getMessage());

65. Lab: CRONentry Add two imports to top
These are used to create the query and recordset
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
//import java.sql.ResultSet;

66. Lab: CRONentry Create INSERT query
As written, works on single INSERT only
Dummy data added to test format
Statement stmt = con.createStatement();
int id = 12;
String customernumber = "Server";
String sku = " ";
int qtyordered = 9;
String SQL = "INSERT INTO orderentry VALUES
("+id+", '"+customernumber+"', '"+sku+"', "+qtyordered+")";
stmt.executeUpdate(SQL);
System.out.println("Successful Execution");

67. Today: http://www.vogella.com/articles/REST/article.html

68. Implementations of REST
Jersey
Restlet
JBoss RESTEasy
Apache CXF
Triaxrs
Apache Wink
eXo

69. Lab: Web Service using REST
Create the client application:
File – New Project

70. Lab: Web Service using REST
Create the client application:
File – New Project

71. Lab: Web Service using REST
Create the client application:
File – New Project

72. Lab: Web Service using REST
Create the client application:
File – New Project

73. REST:
REST architecture describes six constraints: client/server model; separation of concerns
Stateless: no memory of prior communications
Cacheable
Layered system: may use intermediary servers
Code on demand (optional)
Uniform interface (wikipedia) 73

74. Lab: Client side of REST
DiscountCode.java

75. Lab: Client side of REST
DiscountCode.java

76. Today:

77. Today:
RESTful PHP Web Services’,

78. Today:
.html
RESTEasy installed
PHP

79. Today:
asd