introduction to web applications apis l.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to Web Applications & APIs PowerPoint Presentation
Download Presentation
Introduction to Web Applications & APIs

Loading in 2 Seconds...

play fullscreen
1 / 42

Introduction to Web Applications & APIs - PowerPoint PPT Presentation

  • Uploaded on

Introduction to Web Applications & APIs. Agenda. Architecture of Web Applications Three layer architecture Web Server (Tomcat) Installation Data structure Web Application Database ODBC Libraries Demo. Xml Rules of XMLs XML APIs APIs Amazon API Flicker API YouTube API.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Introduction to Web Applications & APIs' - noe

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
  • Architecture of Web Applications
    • Three layer architecture
  • Web Server (Tomcat)
    • Installation
    • Data structure
  • Web Application
  • Database
    • ODBC Libraries
    • Demo
  • Xml
    • Rules of XMLs
    • XML APIs
  • APIs
    • Amazon API
    • Flicker API
    • YouTube API
architecture of web applications4


Architecture of Web Applications
  • Three layer architecture
  • Client Application
    • Client application provides interfaces to interact with users. For web applications, client applications are browsers.
    • The contents displayed on the client application are obtained from the application server.
    • After receiving inputs from users, the client application submits the user inputs to the application server.
architecture of web applications5
Architecture of Web Applications
  • Application Server
    • Application server is a container which allow server applications to run within it.
    • Application server handles the requests from the client application and pass them to the server application.
    • These requests are generally sent through HTTP (Hypertext Transfer Protocol), which specifies a set of methods and headers that allow clients and servers to interact and exchangeinformation.
    • Server application then processes the requests and sends the responses back to the client application.
    • Server application can also accesses database via JDBC, if database manipulations are needed.
  • Database
    • Many software can be used to store and manage data (e.g., MS SQL, Oracle, and MySql)
web server7
Web Server
  • To build a web application, we need a server which is able to deal with
    • Http requests
    • Server applications
  • Therefore, web server is chosen based on the programming languages by which the server application is coded.
  • Apache Tomcat
    • Apache Tomcat is an open source software implementation of the Java Servlet and JavaServer Pages (JSP) technologies.
      • Windows Service Installer (6.0.20)
    • Prerequisite – JDK 1.6
      • JDK 6 Update 17 with Java EE
      • (
  • IIS – for ASP .Net
apache tomcat
Apache Tomcat
  • Installation
    • Setup the connection port, user name and password
  • Installation complete
apache tomcat9
Apache Tomcat
  • Test
apache tomcat10
Apache Tomcat
  • File Structure
    • TomcatRoot
      • C:\Program Files\Apache Software Foundation\Tomcat 6.0 (default)
    • TomcatRoot/bin
      • Executable files
        • Tomcat6.exe – command line mode; Tomcat6w.exe – service mode
    • TomcatRoot/conf - Configuration files of Tomcat
    • TomcatRoot/lib
      • Libraries/APIs required to run Tomcat
    • TomcatRoot/logs - Log files
    • TomcatRoot/webapps (http://localhost:8080/)
      • Application root – Put your web applications under this folder
    • TomcatRoot/work
      • Used to store compiled JSP files (cache).
web application

Web Application

Using eclipse as an example

create a web application project
Create A Web Application Project
  • Create A Web Application
    • Eclipse -> File -> New -> Dynamic Web Project
    • Put in the project name (ex. WebApp1) -> Next
      • http://localhost:8080/WebApp1/
create a web application project13
Create A Web Application Project
  • src
    • The source code folder
  • build\classes
    • The folder for compiled class files
  • Click Next
web application project file structure
Web Application Project – File Structure
  • Deployment Description
    • Summarizes current status and setting of the project
  • Java Resource: src
    • The folder for java source codes (such as .java files)
  • JavaScript Resources
    • Built-in JavaScript libraries
  • Build
    • The fold of compiled class files (*.class) and imported APIs
  • WebContent (Root Folder of the application)
    • http://localhost:8080/WebAppName/
    • All application contents should be put under this folder.
    • WEB-INF (the system folder of a web application) contains
      • Configuration files (WEB-INF/web.xml)
      • Complied java codes (WEB-INF/classes)
      • Third-party libraries/APIs (WEB-INF/lib)
deploy a web application project
Deploy A Web Application Project
  • To deploy a web application, we first package the web application into a WAR file.
  • Deploy
    • Right-click on the project -> Export
    • Choose “WAR file” -> click next
deploy a web application project17
Deploy A Web Application Project
  • Specify the output location and click finish.
  • Deploy
    • Copy the “WAR file” to the AppRoot of the TomCat Server
      • C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps by default
    • Delete the existing project folder
    • Restart Tomcat
  • A database is an organized collection of data.
  • There are many different strategies for organizingdata to facilitate easy access and manipulation.
  • A database management system(DBMS) provides mechanisms for storing, organizing, retrieving and modifying data formany users.
jdbc java database connectivity
JDBC (Java Database Connectivity)
  • Java programs communicate with databases and manipulate their data using theJDBC API.
  • A JDBC driver enables Java applications to connect to a database in a particularDBMS and allows you to manipulate that database using the JDBC API.
  • Using the JDBC API enables developers to change the underlying DBMS without modifying theJava code that accesses the database.
  • Most popular database management systems now provide JDBC drivers. There arealso many third-party JDBC drivers available.
jdbc api
  • Java APIs
    • Java APIs are jar files which can be unzipped by compression software.
    • Java API jar files contain compiled java codes (.class) organized by following their packaged names.
    • Some Java APIs also contain source codes.
  • jTDS (
    • jTDS is an open source 100% pure Java (type 4) JDBC 3.0 driver for Microsoft SQL Server (6.5, 7, 2000, 2005 and 2008) and Sybase (10, 11, 12, 15).
    • Connection String
      • jdbc:jtds:<server_type>://<server>[:<port>][/<database>][;<property>=<value>[;...]]
    • jtds-1.2.2.jar
import apis into a web application
Import APIs Into A Web Application
  • To use third-party APIs, we have to import these APIs into our project.
    • Put third-party APIs under the lib folder
      • Copy your API (jar) files into the folder WEB-INF/lib
      • If “Referenced Libraries” contains APIs just copied, we are all set. Otherwise, go to step 2.
    • Import APIs into your project
      • Right click on the project -> “properties”
      • In the properties window, choose “Java Build Path” -> “Libraries” tab
      • Click “Add JARs” -> select the APIs you want to import in the pop-up window -> Click “OK”
      • Now, we can see the selected APIs displayed in the properties window. Click “OK” on the properties window.
      • “Referenced Libraries” should contains APIs imported.
sample code
Sample Code
  • Showing how to connect to a database, retrieve data based on a given SQL, and display the results on a JSP.
  • http://localhost:8080/MIS510Demo/
command types
Command Types
  • boolean execute()Executes the SQL statement in this PreparedStatement object, which may be any kind of SQL statement.
  • ResultSet executeQuery()Executes the SQL query in this PreparedStatement object and returns the ResultSet object generated by the query.
  • int executeUpdate()Executes the SQL statement in this PreparedStatement object, which must be an SQL INSERT, UPDATE or DELETE statement; or an SQL statement that returns nothing, such as a DDL statement.



  • What is XML
    • XML stands for EXtensible Markup Language
    • XML is a markup language much like HTML
    • XML was designed to carry data, not to display data
    • XML tags are not predefined. You must define your own tags
    • XML is designed to be self-descriptive
    • XML is a W3C Recommendation
      • The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web
  • XML is Everywhere
    • RSS are XMLs
    • We have been participating in XML development since its creation. It has been amazing to see how quickly the XML standard has developed, and how quickly a large number of software vendors has adopted the standard.
    • XML is now as important for the Web as HTML was to the foundation of the Web.
    • XML is everywhere. It is the most common tool for data transmissions between all sorts of applications, and is becoming more and more popular in the area of storing and describing information.
xml tree
XML Tree

<bookstore>  <book category="COOKING">    <title lang="en">Everyday Italian</title>    <author>Giada De Laurentiis</author>    <year>2005</year>    <price>30.00</price>  </book>  <book category="CHILDREN">    <title lang="en">Harry Potter</title>    <author>J K. Rowling</author>    <year>2005</year>    <price>29.99</price>  </book>  <book category="WEB">    <title lang="en">Learning XML</title>    <author>Erik T. Ray</author>    <year>2003</year>    <price>39.95</price>  </book></bookstore>

xml rules
XML Rules
  • XML documents must contain one and only one root element. This element is "the parent" of all other elements.
  • All XML Elements Must Have a Closing Tag
  • XML Tags are Case Sensitive
  • XML Elements Must be Properly Nested
  • XML Attribute Values Must be Quoted
xml elements
XML Elements
  • What is an XML Element?
    • An XML element is everything from (including) the element's start tag to (including) the element's end tag.
    • An element can contain other elements, simple text or a mixture of both. Elements can also have attributes.
    • In the example, <bookstore> and <book> have element contents, because they contain other elements. <author> has text content because it contains text.
    • “XPath” can be used to identify elements.
      • From the “bookstore” element, “book/title” can be used to identify “title” elements.

<bookstore>  <book category="CHILDREN">    <title>Harry Potter</title>    <author>J K. Rowling</author>    <year>2005</year>    <price>29.99</price>  </book>  <book category="WEB">    <title>Learning XML</title>    <author>Erik T. Ray</author>    <year>2003</year>    <price>39.95</price>  </book></bookstore>

xml apis
  • jdom:
    • Unzip
      • “jdom.jar” under the “build” folder
      • “jaxen.jar” and “Saxpath.jar” under the “lib” folder





flicker api
Flicker API
  • General Info
    • Main page of flicker API
    • Description of the flicker search function
    • Flicker search API explorer
    • Apply API key
    • Query example
flicker api38
Flicker API
  • Steps to search Flicker
    • Apply for a API key
    • Send a search request to Flicker server
    • Receive the query result (XML format)
    • Parse the result and display photos on a jsp
youtube api
YouTube API
  • General Info
    • Main page of YouTube API
    • Apply API Key
    • Description of the YouTube video search function
    • Query parameter definition
    • Query example
youtube api40
YouTube API
  • Steps to search YouTube
    • Apply for a API key
    • Send a search request to YouTube server
    • Receive the query result (XML format)
    • Parse the result and display videos on a jsp
      • Have to handle namespace issue
amazon api
Amazon API
  • General Info
    • Main page of Amazon Product Advertising API
    • Java Developer Center
    • API Key
    • Commons Codec Download
amazon api42
Amazon API
  • Import commons-codec-1.4.jar
  • Steps to search Amazon
    • Apply for a API key
    • Generate search conditions
    • Generate a parameter string
    • Generate a string to sign
    • Generate a signature
    • Generate a query URL
    • Send a search request to Amazon server
    • Receive the query result (XML format)
    • Parse the result and display products on a jsp
      • Have to handle namespace issue