Scribd
Upload
21 views

02 Web Basics

Uploaded by

kotten7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

02 Web Basics

Uploaded by

kotten7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

Fundamentals of web development

Backend development with Java Spring Boot


Gábor Imre
Agenda

> Web applications, HTTP basics

> Servlet, JSP

> Spring MVC fundamentals

> Handler methods

> Thymeleaf

> RESTful web services


Fundamentals of web development

Web applications, HTTP basics

Backend development with Java Spring Boot


Gábor Imre
Web applications

> General internet application:

Client machine Server machine


<< TCP / IP >>

<< service>>
Client Server

> Web application: when the communication over TCP follows the HTTP
protocol
HTTP basics

> Request-response, client-server

> Server listens on a given port (by default 80)

> Client opens a TCP connection to the server, and sends a request

> The server sends the response back over this connection

> The connection can remain open (since HTTP 1.1), and clients may send
further requests

> HTTP over TCP connection secured with TLS = HTTPS (default port: 443)

> Stateless: the protocol does not keep client-specific state between two
requests
HTTP basics

> Goal of a client request: access a server-side resource, identified with a


URL (Unified Resource Locator):

> Clients use the HTTP “verbs” to express their intent with the addressed
resource
HTTP verbs
> GET: read an existing resource, body of the request is empty

> POST: create a new resource that is described in the body of the request

> PUT: modify an existing resource, with the data sent in request body

> DELETE: delete an existing resource

> HEAD: similar to GET, but the client requests only the headers of the
response, without body (possible use case: check if a cached resource is
expired)

> TRACE: for diagnostics, the path of fhe request can be traced

> OPTIONS: query the features of the server (e.g. websocket)


HTTP basics

> Format of requests: headers, optional HTTP/1.1 200 OK


body Date: Mon, 23 May 2005 22:38:34 GMT
> Separated with double line break Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
(\r\n\r\n)
Content-Type: text/html; charset=UTF-8
Content-Length: 138
> Sample request: Connection: close
GET /index.html HTTP/1.1 <html>
Host: www.example.com <head>
> Response can be of any type <title>An Example Page</title>
(described in the Content-Type </head>
header) <body>
Hello World, this is a very simple HTML
document.
</body>
</html>
HTTP basics

> Static content: same response to same request (e.g. a picture stored at
the server)

> Dynamic content: a program code running at the server generates the
response  we can get different response to the same request depending
on e.g. time/user/data stored at the server
Fundamentals of web development

Servlet, JSP

Backend development with Java Spring Boot


Gábor Imre
Agenda

> Web applications, HTTP basics

> Servlet, JSP

> Spring MVC fundamentals

> Handler methods

> Thymeleaf

> RESTful web services


Java EE web components

> J2EE defined two basic technologies for web development


> Servlet
> A Java class implementing the server side of request-response based
protocols
> Web servlet is a special case of servlet, where the protocol is HTTP
> Runs in a web container that manages the lifecycle of the servlets, and
offers useful services to them
> A Java EE application servers have to contain a web container, but
standalone web containers can be used as well (e.g. Apache Tomcat,
Jetty)

> JSP – Java Server Pages


> “It is like PHP, ASP”
> HTML code, JSP code and Java code
> Can be extended with tag libraries
> “Servlet turned inside out”
> Runs in web container as well, it is compiled to servlet at the end of the day
Servlet and JSP sample
@WebServlet("/hello") <html>
public class HelloServlet extends HttpServlet {
<head>Sample JSP</head>
public void doGet(
HttpServletRequest request, HttpServletResponse <body>
response) throws ServletException, IOException { <h1>Hello ${param.userName}</h1>
String userName = </body>
request.getParameter("userName"); </html>
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><head>Sample
servlet</head><body>");
out.println("<h1>Hello " + userName +
"</h1>");
out.println("</body></html>");
}
}
Servlet and JSP
> Servlet > JSP
> HTML inside Java code > Java code inside HTML
> Mainly for processing data > Easier formatting, harder processing
> Hard to manage formatted output > Cannot render binary response, only text
> Can generate binary response as well > Code is compiled to servlet

> Usually used together (Model-View-Controller pattern)


> Servlet: controller
> JSP: view
> Or not use them at all directly  Web application framework
> They usually require a web container, because they are built on top of
the Servlet API
> JSP can be used, but often other view technologies are supported
> Typical features: ready GUI components, AJAX, event handling,
validation, navigation rules
> E.g.: Spring MVC, JavaServer Faces (part of Java EE), Struts, Tapestry,
Wicket, GWT, Vaadin
Packaging web applications

> What does a web application contain?


> Static resource files (e. g. pictures, css, JS files), HTML, JSP files
> In arbitrary directory structure
> Compiled Java classes (e.g. servlets)
> Location: WEB-INF/classes, or jar files under WEB-INF/lib
> Deployment descriptor
> Location: WEB-INF/web.xml

> Manifested as:


> Plain files in folder hierarchy OR
> These files compresses as a zip file (.war = Web ARchive)
Deployment

> The process during which the web application is installed to a web
container
> The web application is available after deployment

> Deployment can be done in multiple ways


> Command line tool
> Web based admin GUI
> Simply file copy

> Context – the environment of the web application, handled by the web
container
> Virtual directory, e.g. newapp.war  http://myserver.com/newapp/
> Separate class loader for each context (WEB-INF/classes, WEB-INF/lib)
Fundamentals of web development

Spring MVC fundamentals

Backend development with Java Spring Boot


Gábor Imre
Agenda

> Web applications, HTTP basics

> Servlet, JSP

> Spring MVC fundamentals

> Handler methods

> Thymeleaf

> RESTful web services


Spring MVC: overview

> Well separated responsibilities of objects (Model-View-Controller,


validators, etc.)
> Flexible configuration
> No mandatory interfaces, base classes
> Usage of annotations
> Customizable validation
> Supports several view technologies (JSP, Thymeleaf, Velocity, FreeMarker)
> No UI component model
Spring MVC: overview
Hello world example

> One parameter in the URL, and says hello to that person, e.g.:

http://localhost:8080/hello?user=Peter

> Result:

Hello Peter
HelloWorldController.java

> Requests are handled by a controller class

@Controller
public class HelloWorldController {
@GetMapping("/hello")
public String helloWorld(
@RequestParam("user") String user,
Map<String, Object> model) {
model.put("welcome", "Hello " + user);
return "index";
}
}
index.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Welcome</title>
</head>
<body>
<h1 th:text="${welcome}">Some welcome</h1>
</body>
</html>
Configuring Spring MVC

> Without Spring Boot, XML and/or JavaConfig would be necessary to


configure Spring MVC and Thymeleaf

> In case of Spring Boot configuring is automatic, just add


> 2 dependencies:
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
> and
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
> A usual @SpringBootApplication class
> Place of files
> Controller classes: : in the "root" package or any subpackage of it
> HTML files with Thymeleaf attributes: src\main\resources\templates
Running Spring Boot web applications

> The spring-boot-starter-web dependency brings an embedded web container


(Tomcat by default)  no need to install a standalone web container, the
“deploy” step is missing
> Tomcat can be replaced in favor of Jetty or Undertow by excluding the
spring-boot-starter-tomcat dependency, and adding the …-jetty or …-
undertow dependency
> The web application can be accessed at port 8080, under the root
context, e.g. http://localhost:8080/
> Overridable via properties: server.port, server.context-path
> Creating a runnable jar:
> <packaging>jar</packaging> in the pom.xml
> spring-boot plugin in the pom  will package the dependencies in the jar
file, and the spring boot loader that loads these dependencies
> mvn package  jar created in the target folder
> java –jar myapp-0.1.1-jar
> Instead of this, we can go the classic way: use war packaging, and deploy the
war to a standalone web container (a bit different pom and using a base
class with a method to override are needed)
Fundamentals of web development

Handler methods

Backend development with Java Spring Boot


Gábor Imre
Agenda

> Web applications, HTTP basics

> Servlet, JSP

> Spring MVC fundamentals

> Handler methods

> Thymeleaf

> RESTful web services


Controller class: URL mapping

> Controller classes can have any number of handler methods, handling
different requests

> The controller class can have a @RequestMaping annotation as well, URL
patterns on the handler methods are meant relative to this

> Sample URL patterns:


@RequestMapping(value="/owners/{ownerId}",
method=RequestMethod.GET)
public String findOwner(@PathVariable("ownerId") String
ownerId){...}
@RequestMapping(value="/owners/{ownerId}/pets/{petId}")
public String findPet(
@PathVariable String ownerId,
@PathVariable int petId) {...}
Controller class: URL mapping

@RequestMapping(value = "/pets/{petId}", params="myPar=myVal")


@RequestMapping(value = "/pets", headers="content-type=text/*")

> Other valid patterns: /myPath/*.do, /owners/*/pets/{petId}

> Since Spring MVC 4.3, @GetMapping, @PostMapping, … can be used instead of

@RequestMapping(method=GET/POST/…)
Controller class: handler methods

> Flexible argument list, e.g.:


> ServletRequest, ServletResponse, HttpSession
> @PathVariable, @RequestParam
> @RequestHeader, @CookieValue
> @RequestBody
> HttpMessageConverter needs to be registered
> HttpEntity<?> gives acces to both body and header
> Own model objects of any type (“command objects”), that encapsulate
the data of forms
> java.util.Map or ModelMap or Model, containing all model objects
> Individaul objects from the model annotated with @ModelAttribute
> Errors/BindingResults representing the conversion/validation errors
Controller class: handler methods

> Flexible return type, e.g.:


> String, meaning the name of the next View

> void: when a RequestToViewNameTranslator determines the next


view, or if we generate the response on our own, using a
> ServletResponse argument

> Any type, annotated with @ResponseBody (the returned object will be
serialized into the reponse body, using a HttpMessageConverter)

> HttpEntity<?>: encapsulates headers and body content

> ResponseEntity<?>: encapsulates headers, status code and body


content
HttpMessageConverter

> Capable of mapping between Java objects and HTTP request


or response body (@RequestBody, @ResponseBody
annotations, or HttpEntity<?>, ResponseEntity<?>)

> Built-in converters:


> ByteArrayHttpMessageConverter
> StringHttpMessageConverter
> FormHttpMessageConverter
> SourceHttpMessageConverter
> MarshallingHttpMessageConverter

> Important at RESTful web applications


Fundamentals of web development

Thymeleaf

Backend development with Java Spring Boot


Gábor Imre
Agenda

> Web applications, HTTP basics

> Servlet, JSP

> Spring MVC fundamentals

> Handler methods

> Thymeleaf

> RESTful web services


Thyemeleaf: general features

> Java library, for handling XML/HTML/HTML5 template files


> Extensible with custom dialects, e.g.
> Standard Dialect
> SpringStandard Dialect: uses Spring Expression Language (SpringEL) to
access objects
> Each Thymleaf template is a standard XML/HTML file, extended only with
attributes of the th: namespace (xmlns:th="http://www.thymeleaf.org") 
the template can be designed as a static prototype
> Developer and web designer can work on the same file
> The designer can use any HTML editor, no need to run a server/deploy
the application
> Internal details:
> Uses an own DOM implementation
> Caches the parsed template files
> spring-boot-starter-thymeleaf provides autoconfiguration
Variable expressions
> Between ${}, SpringEL expressions, mostly model objects
> E.g.: a handler method puts a Person object into the model, and navigates
to person.html:
public String findPerson(
@RequestParam("personId") long id,
Map model){
model.put("person", personService.findById(id));
return "person";
}
> In the person.html template, the name of the person can be displayed like
this:
<span th:text="${person.firstName}">Joe</span>
> Person should have a getter getFirstName
> When opening the static template in a browser/HTML editor: the name Joe
will be seen  suited for designer
> When the template is executed at the server, the static example text (Joe)
will be replaced with the dynamic value
Selection expressions

> Syntax: *{}

> Accessing properties relative to a root object, e.g.

<div th:object="${book}">
...
<span th:text="*{title}">...</span>
...
</div>
I18N expressions
> Syntax: #{}
> We can reference keys that have localized translations in properties files, e.g.
<h2 th:text="#{welcome}">Welcome</h2>
> We need to configure a MessageSource bean that will be used for the
translation:
@Bean
public MessageSource messageSource() {
ReloadableResourceBundleMessageSource messageSource =
new ReloadableResourceBundleMessageSource();
messageSource.setBasename("classpath:Messages");
return messageSource;
}
> Messages_en.properties on the classpath, containing
welcome=Hello
> Messages_hu.properties on the classpath, containing
welcome=Üdvözöljük
URL expressions

> Syntax: @{}


> Page relative: @{img/bg.png}  img/bg.png
> Context relative: @{/img/bg.png}  /myapp/img/bg.png
> Server relative: @{~/otherapp/index}  /otherapp/index
> Protocol relative: @{//code.jquery.com/jquery-2.0.1.min.js}
> Absolute: @{http://xy.com/index}
> Parameter values in (), comma-separated, e. g.
<a href="details.html"
th:href="@{/order/details(orderId=${o.id})}">View</a>
or
<a href="details.html"
th:href="@{/order/details/{orderId}(orderId=${o.id})}">
View</a>
Bindig form data to model objects

> th:action, th:object, th:field


<form action="saveCustomer.html" th:action="@{/saveCustomer}"
th:object="${customer}" method="post">
<input type="hidden" th:field="*{id}" />

<label for="firstName">First name:</label>


<input type="text" th:field="*{firstName}" value="John" />

<label for="lastName">Last name:</label>


<input type="text" th:field="*{lastName}" value="Wayne" />

<label for="balance">Balance (dollars):</label>


<input type="text" th:field="*{balance}" size="10" value="2500" />

<input type="submit" />


</form>
Iteration

> th:each
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
</tr>
<tr th:each="prod : ${prods}">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
</tr>
</table>
> Implicit variable for the status of the iteration: prodStat, provides access to:
> index (starting from 0), count (starting from 1), size,
> boolean properties: even, odd, first, last
Conditional expressions

> th:if
> When evaluates to false, the given tag is not rendered
<span th:if="${prod.price lt 100}“ class="offer">
Special offer!
</span>
> Negation:
> not or ! before the expression
> th:unless: not displayed if evaluated to true
> Simplifications:
> null means false
> considered true (truthy):
> Number or character differing from 0
> String, except: "false", "off", "no"
> Any other non-null object except for boolean, number, character,
String
Conditional expressions

> th:switch, th:case


<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>
> Other th attributes can use conditional expressions as well:
<tr th:class="${row.even}? 'even' : 'odd'">
> : can be omitted, resulting null in case of false
<tr th:class="${row.even}? 'alt'">
> Default expression (when original one evaluates to null) ?: (Elvis operator)
<p>Age: <span th:text="*{age}?:
'(no age specified)'">27</span>.</p>
> a shortcut for this:
<p>Age: <span th:text="*{age != null}? *{age} : '(no age
specified)'">27</span>.</p>
Fundamentals of web development

RESTful web services

Backend development with Java Spring Boot


Gábor Imre
Agenda

> Web applications, HTTP basics

> Servlet, JSP

> Spring MVC fundamentals

> Handler methods

> Thymeleaf

> RESTful web services


RESTful web services

> With Thymeleaf we generate full web pages at the server side
> Data mixed with presentation

> Different approach: server returns only data, client side (browser, mobile
application) is responsible for presenting them

> RESTful service (REST API): a service accessible through HTTP, addressed
with URIs, defined by
> URI of the service
> Data format supported by the service
> The HTTP methods (usually GET/POST/PUT/DELETE) supported by the
service

> Formal description of the interface: OpenAPI (Swagger)


A typical RESTful web service

> http://example.com/books/
> GET: returns the list of books (possibly read from a database)
> POST: inserts a new book in the list
> Data of the book are sent in the HTTP body
> Identifier is generated at the server
> DELETE: deletes the whole list
> PUT: replaces the whole list
> New data of the book are sent in the HTTP body
> http://example.com/books/xyz
> GET: returns one book, with identifier xyz
> POST: the element with identifier xyz is considered as a list, and adds a
new element to this list (e. g. adds a new chapter in the book)
> DELETE: deletes the book, with identifier xyz
> PUT: modifies the xyz book, or creates a new one with xyz identifier
JSON
{ "firstName": "John",
"lastName": "Smith",
> JavaScript Object Notation "age": 25,
> But can be uses not only in "address": {
"streetAddress": "21 2nd Street",
JavaScript "city": "New York",
> Text based format, briefer than "state": "NY",
XML "postalCode": "10021"
> Object: {} },
"phoneNumber": [
> Can be nested { "type": "home",
> Object properties: "number": "212 555-1234"
> “key”: value, },
> Array: [, , ,] { "type": "fax",
"number": "646 555-4567"
> Base types }
> string ("abc“) ]
> number (5.23) }
> boolean: true or false
> null
Developing REST APIs with Spring MVC

> Spring MVC is well suited to developing REST APIs


> @ResponseBody annotation on the handler method  the return value
of the method will be contained in the response body
> @RequestBody on the argument of a handler method  the body of
the request is injected as argument
> The (de)serialization of the body is performed by format-specific
HttpMessageConverters (ready for JSON, and XML)
> The format of the body can be defined via produces/consumes
parameter of the @Request/Get/Post…Mapping annotation. Default is
application/json

> Small simplification since Spring 4: @RestController  @ResponseBody


can be omitted
Summary

1. Basics of HTTP and web applications


2. Java EE web components: Servlet, JSP
3. Packaging of web applications
4. Spring MVC: introduction, handler methods
5. Thymeleaf: main syntax features, sample with simple form/listing
6. RESTful web services: base concepts, JSON, CRUD operations with Spring MVC
Homework

> Add the necessary dependencies to the pom file of the hr application to use
Spring MVC and Thymeleaf
> Develop a web page using Spring MVC and Thymeleaf which enables creating
an Employee, and listing all employees in a tabular form
> Use the existing Employee class
> The employees should be stored only in memory
> Write an EmployeeDto class in the dto subpackage, which contains the same
fields and getters/setters as the Employee class
> Implement a JSON based REST API with the /api/employees base URI, with
endpoints capable of
> Listing all employees
> Return on employee with a given id
> Adding a new employee
> Modifying an existing employee
> Deleting an existing employee
> Listing employees with salary higher than a given value passed as query
parameter
> The employees should be stored only in memory for the RESTS API as well
> Test this REST API with Postman

You might also like