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.0
      Host: mendelu.cz
    

HTTP Transaction - Single Transfer

  • Request:
    • URL, Method, Headers, (Body)
  • Response:
    • 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

welcome.php:

<?php 
echo "<!DOCTYPE HTML><html>";
echo "<body><h1>Hello</h1></body>";
echo "</html>"

PHP - Processing the REQUEST

POST /login.php?l=en

username=John&password=NotTooSecret&action=login

welcome.php:

<?php 
echo "<!DOCTYPE HTML><html><body>";
if (($_REQUEST['username'] == 'John') && 
	($_REQUEST['password'] == 'NotTooSecret')) {
  if ($_REQUEST['l'] == 'en') {
    echo "<h1>Hello " . $_REQUEST['username'] . "</h1>";
  } else {
    echo "<h1>Ciao " . $_REQUEST['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 (($_REQUEST['username'] == 'John') && 
	($_REQUEST['password'] == 'NotTooSecret')) {
  $tpl->render("welcome.latte", ['username' => $_REQUEST['username'], 'language' => $_REQUEST['l']]);
} else {
  $tpl->render("login.latte", 'language' => $_REQUEST['l']);
}

Example

<?php
$tpl = new Latte\Engine();
if (($_REQUEST['username'] == 'John') && 
	($_REQUEST['password'] == 'NotTooSecret')) {
  tplVars = [
    'username' => $_REQUEST['username'], 
    'language' => $_REQUEST['l']
  ];
  $tpl->render("welcome.latte", $tplVars);
} else {
  $tplVars = ['language' => $_REQUEST['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>
    {extends 'layout.latte'}
    {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
$app->get('/welcome', function (Request $request, Response $response) {
  return $this->view->render($response, 'welcome.latte', $tplVars);
);

HTTP request:

    GET /welcome

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

HTTP Requests

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

Implementation

  • PHP and Slim is specific
  • Template language is specific
  • Concepts are general
    • HTTP
    • Routes
    • Templates