Web Application Development

Assorted Exercises

Setting up the web server

Concepts of web sites

  • Client-side (in your browser) vs server-side (on another machine somewhere else)
  • Structural & semantic (what the document is and what it means), presentational (how it appears or sounds), behavioural (what it does & interaction)
  • What happens between the two (next week)
  • Useful web development resources:

Structural & Semantic

Presentational

Behavioural

Server-side Programming

  • PHP
    • You will need to use the web server we set up earlier in the week!
    • <?php echo "Hello, $name!" ?>
    • Escaping from HTML
    • Strings (including interpolation)
      • "abc $x" : $x is replaced with the value of that variable
      • 'abc $x' : literally the string with the $x intact
    • echo / print
    • Control structures:
      if ($x == 2) { ...; } elseif ($x < 0) { ...; } else { print "other"; }
      and
      while ($x > 0) { $x--; }
      and
      for ($i = 0; $i < 10; $i++) { ...; }
      and (soon)
      foreach ($array as $x) { echo $x; }
      and
      foreach ($hashmap as $key => $val) { print "$key is $val"; }
    • $_REQUEST['form-field-name']
    • Arrays
    • nl2br (newline to <br />)
    • Loading other files into your page - as though you wrote the file's contents in that spot after a ?>
      • include "file.php";
      • require_once "file.php";
    • Function declarations:
      function greeting($name) { return "hello $name"; }
    • File uploads:
      • move_uploaded_file
      • input type="file"
      • A complete form:
        <form method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>" enctype="multipart/form-data">
            <input type="file" name="the_file">
            <input type="submit" value="Upload file" />
        </form>
    • session_start
    • file_get_contents / file_put_contents
    • json_encode and json_decode

  • Databases
    • MySQL (instructions to set up the MySQL server are in the web server instructions)
      • $conn = mysqli_connect("localhost", "DBusername", "DBpassword", "DBname");
        • or $conn = new mysqli("localhost", ...);
      • $result = mysqli_query($conn, "SELECT * FROM posts;");
        • or $result = $conn->query("SELECT * FROM posts;");
      • foreach ($result as $row) { echo $row['title']; }
      • For queries with user-provided data, best to use mysqli_prepare/$conn->prepare to protect against SQL injection: $q = mysqli_prepare("SELECT * FROM posts WHERE author = ?"); mysqli_stmt_bind_param($q, "s", $_REQUEST['author']); mysqli_stmt_execute($q); ("s" means to treat the author name as a string)
      • Exercise using MySQL and PHP (for those who are interested): replicate some of the Team Management project using PHP and an SQL database. You can use the starter file netball.php below, and import a pre-filled SQL database with all the data with curl https://ecs.wgtn.ac.nz/foswiki/pub/Courses/SWEN504_2020T3/WebApps/mydb.sql | mysql -u DBusername -pDBpassword DBname in the terminal. You may also like to look at that SQL file to see the structure of the database and its tables.
    • Postgres (can use the ECS database server or another)
      • $conn = pg_connect("connection string...");
      • $result = pg_query($conn, "SELECT * FROM posts;");
      • while ($row = pg_fetch_row($result)) { echo $row['title']; }
      • For queries with user-provided data, best to use pg_prepare to protect against SQL injection: pg_prepare($conn, "name_you_choose", 'SELECT * FROM posts WHERE author = $1'); $result = pg_execute($conn, "name_you_choose", array($_REQUEST['author']));
      • The object-oriented version of Postgres connections is here, and works differently to the mysqli one above (and needs to be installed).

HTTP, web concepts, and JSON

  • JSON
  • HTTP
    • See request.php(.txt) below

Frameworks and libraries

A couple of common frameworks/libraries in use for the languages we have covered. You do not need to use any of these, but you may if you like.
Topic attachments
I Attachment Action Size Date Who Comment
fred.jsjs fred.js manage 1 K 25 Nov 2020 - 14:34 Main.mwh  
index.htmlhtml index.html manage 1 K 23 Nov 2020 - 15:21 Main.mwh  
index.php.txttxt index.php.txt manage 2 K 30 Nov 2020 - 11:48 Main.mwh  
mydb.sqlsql mydb.sql manage 38 K 26 Nov 2020 - 12:44 Main.mwh  
netball-json.php.txttxt netball-json.php.txt manage 2 K 30 Nov 2020 - 12:40 Main.mwh  
netball.jsjs netball.js manage 887 bytes 30 Nov 2020 - 12:40 Main.mwh  
netball.php.txt.txttxt netball.php.txt.txt manage 2 K 26 Nov 2020 - 12:44 Main.mwh  
request.php.txttxt request.php.txt manage 582 bytes 30 Nov 2020 - 11:48 Main.mwh  
second.htmlhtml second.html manage 3 K 30 Nov 2020 - 11:48 Main.mwh  
style.csscss style.css manage 2 K 24 Nov 2020 - 13:27 Main.mwh