◀

Web application

  • Web Application consists of a series of web Pages

  • Web Page consists of a series of Resources

  • Resource has:
    • URL x URI (URN) (location vs. identifier)
    • Content (anything including nothing)
    • Content Type (MIME type)
      • text/html, image/png, video/mp4, ~900 more …

HTTP Protocol

  • Stateless text protocol
  • It can retrieve a Resource
    • Client sends an HTTP Request
    • Server responds with an HTTP Response
  • Single page is composed of multiple resources
    • It is a good idea to minimize the number of resources

HTTP Request + Response

  • Example of simple HTTP request and response

      GET / HTTP/1.1⏎
  Host: mendelu.cz⏎
  ⏎

/ represents path from URL and mendelu.cz is hostname

HTTP Transaction - Single Transfer

  • Request:
    • URL, Method, Headers, (Body)
  • Response:
    • Status code, Headers, Body
  • Method
    • GET, POST, PUT, DELETE, PATCH, …

Single-page Application

  • Application executed on client
  • Application code downloaded on first request (single page)
  • Data are exchanged using HTTP:
    • API (REST)
    • Resources + Methods
    • JSON (XML) Response and Request format

Web app Implementation

  • Goal: Receive Request, Produce Response
  • Any programming language can do it.
  • But there are some more useful to handle that:
    • Php, Python, Ruby, Javascript, C#, Java …
  • Interpreted languages run inside a web server

PHP - Simplistic Approach

GET /welcome.php?name=John HTTP/1.1⏎
Host: domain.tld⏎
⏎

welcome.php:

<?php 
echo "<!DOCTYPE HTML><html>";
echo "<body><h1>Hello" . $_GET['name'] . "</h1></body>";
echo "</html>";

PHP - Processing the request

POST /login.php?l=en HTTP/1.1⏎
Host: domain.tld⏎
Content-Type: application/x-www-form-urlencoded⏎
Content-Length: 48⏎
⏎
username=John&password=NotTooSecret&action=login

welcome.php:

<?php 
echo "<!DOCTYPE HTML><html><body>";
if (($_POST['username'] == 'John') && 
	($_POST['password'] == 'NotTooSecret')) {
  if ($_GET['l'] == 'en') {
    echo "<h1>Hello " . $_POST['username'] . "</h1>";
  } else {
    echo "<h1>Ciao " . $_POST['username'] . "</h1>";
  }
}
echo "</body></html>";

Simplistic Approach

  • advantages:
    • simple
    • quick for really simple stuff
    • fast learning
  • disadvantages
    • security
    • chaos
    • bad extensibility
    • no organization (remember engineering)

Example

Templates

  • Protect from XSS (Cross-site scripting)
  • Separation of concerns
    • Separate HTML generation logic
    • Multiple jobs
  • Allow easy sharing of HTML fragments
  • Clear definition of application outputs

Example

<?php
$tpl = new Latte\Engine();
if (($_POST['username'] == 'John') && 
	($_POST['password'] == 'NotTooSecret')) {
  $tpl->render("welcome.latte", ['username' => $_POST['username'], 'language' => $_GET['l']]);
} else {
  $tpl->render("login.latte", 'language' => $_GET['l']);
}

Example

<?php
$tpl = new Latte\Engine();
if (($_POST['username'] == 'John') && 
	($_POST['password'] == 'NotTooSecret')) {
  $tplVars = [
    'username' => $_POST['username'], 
    'language' => $_GET['l']
  ];
  $tpl->render("welcome.latte", $tplVars);
} else {
  $tplVars = ['language' => $_GET['l']];
  $tpl->render("login.latte", $tplVars);
}

Example

welcome.latte

<!DOCTYPE html>
<html>
  <head></head>
  <body>
  {if $language == 'en'}
    <h1>Hi {$username}</h1>
  {else}
    <h1>Ciao {$username}</h1>
  {/if}
  </body>
</html>

Sharing HTML Code

welcome.latte

{extends 'layout.latte'}
{block content}
  {if $language == 'en'}
    <h1>Hi {$username}</h1>
  {else}
    <h1>Ciao {$username}</h1>
  {/if}
{/block}

Sharing HTML Code

layout.latte

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    {include content}
  </body>
</html>

Real layout is slightly bigger!

Framework

  • Enforces separation of concerns (responsibilities)
  • Provides a unified wrapper around HTTP
  • Promotes unified approach to applications
  • Enforces code organization
  • Prevents silly security errors
  • Easier access to templates
  • Unified approach to routing

Routing

  • Mapping between HTTP requests and application code
  • Route takes URI + Method and executes as Handler

HTTP request:

    GET /welcome?name=John HTTP/1.1⏎
    Host: domain.tld⏎
    ⏎

Requeste handler:

$app->get('/welcome', function (Request $request, Response $response) {
  $tplVars = ['username' => $request->getQueryParam('name')];
  return $this->view->render($response, 'welcome.latte', $tplVars);
);

Processing Request

  • Mapping between HTTP requests and application code
  • Route takes URI + Method and executes as Handler
$app->get('/welcome', function (Request $request, Response $response) {
  $data = $request->getParsedBody();
  if (($data['username'] == 'JohnDoe') && 
      ($data['password'] == 'NotSoSecret')) {
    $tplVars = [
      'username' => $data['username'], 
      'language' => $request->getQueryParam('l'),
    ];
    return $this->view->render($response, 'welcome.latte', $tplVars);
  } else {
    $tplVars = [
      'language' = $request->getQueryParam('l')
    ];
    return $this->view->render($response, 'login.latte', $tplVars);		
  }
);

Which?

  • Which framework?
    • Slim
      • very simple and slim
      • also usable for SPA
    • Laravel, Symfony, Nette, Yii
  • Which Template system?
    • Latte, Smarty, Blade
  • Boilerplate code
    • The code that you need to write (or copy) before actually coding your own application.
    • Pays off in long term.

HTTP Requests on previous slided

  • Parameters:
    • Request URL or Request body? - Body = Data
      • URL = Options
  • Method usage:
    • GET = Read
    • POST = Action (changes something)

Implementation

  • PHP and Slim is specific
  • Template language is specific
  • Concepts are general
    • HTTP (methods, headers + body)
    • Routes (method + URI)
    • Templates (not just in PHP)

Checkpoint

  • URL VS URI VS URN?
  • Is response body same as “data”?
  • Can request made with POST method have body? Is the body mandatory? Can we also pass URL parameters with POST request?
  • Does every HTTP response have a body?
  • How much boilerplate code are you willing to accept?
  • Are all templating engines “the same”?
  • Does every framework come with templating engine?