Web Applications

Lab 05

special thanks to Jan Michelfeit & Martin Kruliš

Agenda

  • CGI
  • PHP

Possible server-side languages

  • PHP
  • JavaScript (Node.js)
  • Python
  • JVM-based languages (Java, Scala)
  • ASP.NET
  • Ruby
  • ...

Common Gateway Interface

  • Executes external program for every HTTP request.
  • HTTP request parameters are passed as environmental variables.
  • Request body, if any, is passed to stdin.
  • Stdout is taken as the dynamically created content, including HTTP headers!

Exercise 1

Common Gateway Interface

Create a simple page using a CGI script in Python so that:

  • When user navigate to the page there is a form.
  • In the form user can fill in name and submit the form.
  • Upon submit a hello {user} page is returned.
  • Upload file to webik:
    • Host name: webik.ms.mff.cuni.cz
    • Port: 42222
    • Username/password: unique for each user

PHP

  • Web server interprets .php files.
  • Code within <?php … ?> blocks interpreted and executed.
  • Documentation online

PHP Syntax

  • variables start with $
  • string concatenation with .
  • strings in single quotes uninterpreted: 'a $b \n'
  • strings in double quotes interpreted: "a $b \n"
  • <?php … ?> blocks can be arbitrarily interleaved with HTML

PHP Control structures


if (cond) stmt; elseif (cond2) stmt2; else ...
while (cond) stmt;   do stmt; while (cond);
for (init; cond; inc) stmt;
foreach (array as [ $key => ] $value) stmt;
...

Code Fragment


<!DOCTYPE html>
<body>
<?php
    $user = $_GET['user'];
    echo 'Hello ' . $user;
?>
</body>

Setting up Development Environment

Exercise 2

Hello World

  • Create an index.php page
  • Insert PHP code printing "Hello world" and the current time
  • [optional] Upload file to webik:
    • Host name: webik.ms.mff.cuni.cz
    • Port: 42222
    • Username/password: unique for each user
    • public_html
    • https://webik.ms.mff.cuni.cz/~{user-name}/

User & Environment Input

Via " superglobal " arrays

  • $_GET - URL query parameters
  • $_POST - form data from request body
  • $_FILES - records about uploaded files
  • $_COOKIE
  • $_SERVER - request details (e.g., headers)
  • ...

Debugging

Exercise 3

PHP

Create a simple page using PHP so that:

  • When user navigate to the page there is a form with POST method.
  • In the form user can fill in a name and submit the form.
  • Upon submit a Hello {user} page is shown.
  • [optional] Upload file to webik.

Exercise 4

Static PHP Website

Download archive with initial HTML pages and use PHP to get rid of code duplication.

  • Split pages into several .php files with header HTML code in a single file only and footer in a single file only.
  • Use require to assemble the page back together.
  • Make sure hyperlinks still work
  • Ensure each page has the same title as in the original HTML
  • [optional] Upload files to webik.

Exercise 5

Dynamic PHP Website

  • Download CSV files with catalog of products
  • Write function loadCsv($filePath) that loads a given CSV file into a two-dimensional associative array where:
    • key is the product ID (first field in CSV)
    • value is an array of values from the corresponding CSV line
    
[ // example of an output of the function
  "978-0441172719" => [ "978-0441172719", "Dune", "Frank Herbert", "18.68" ],
  "978-0316438988" => [ "978-0316438988", "Blood of Elves", "Andrzej Sapkowski", "12.79" ],
// ...
]
  • Hint: Use fgetcsv() to read the CSV file
  • Modify the code from previous exercises so that catalog is dynamicaly generated using the loadCsv($filePath) function.
  • [optional] Upload files to webik.

Common Pitfalls

Never trust user input

Common Pitfalls

  • Use standard library functions, do not reinvent the wheel.
  • Reasonable level of (de)duplication, use good abstractions.
  • ...

The end…

Questions?

Feedback