Category:I702 Web Application Programming: Difference between revisions

From ICO wiki
Jump to navigationJump to search
← Older editNewer edit →
Lvosandi (talk | contribs)
1,257 edits
No edit summary
Lvosandi (talk | contribs)
1,257 edits
Line 426: Line 426:
</source>
</source>


Add many to many relationship between order and products:
<source lang="sql">
CREATE TABLE IF NOT EXISTS `lauri_order_products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `order_id` INT NOT NULL,
  `product_id` INT NOT NULL,
  `count` INT NOT NULL,
  `unit_price` INT NOT NULL,
  PRIMARY KEY (`id`)
)
</source>


==Extra: real-time communications with nchan==
==Extra: real-time communications with nchan==

Revision as of 16:21, 16 March 2016


Intro

This course is 5 ECTS and it's mandatory for CSE students. Other ITC students may also attend and CSE students who comprehend Estonian can follow the I244 lectures.

The main point of this course is to get to know the software stack that is used to build modern web applications and by the end of the course being able to write a web application and if we'll have enough time - to deploy it on a (virtual) server and defend it. Deduplicate your work and combine the work of this course with Python and Research Project courses.


  • Progress visible in Git from day one
  • Possible scenarios to pass the course:
    • classic: Build a simple mobile-frindly webshop with shopping cart using PHP, MySQL, Apache, Ubuntu.
    • Substitute a component (see below) you don't like and do the same
    • Scratch your own itch, develop something that largely makes use of following technologies and it is relevant to you
    • Extend WordPress, Joomla etc to build a website for your customer, eg. when you're working already
    • Pick a project idea from Python course page, there are several ideas which more or less constitute as web apps.
    • Find an interesting web application that's participating on Google Summer of Code, get to know the community, prepare for participation on GSoC and successfully finish the GSoC.
  • If this is your first experience with this sort of stuff make sure you go HTML & CSS, JavaScript and jQuery tracks on CodeAcademy and start with simply creating your homepage :)
  • For page layouts check Twitter Bootstrap


Lecture/lab #1

Lecture recording #1, lecture recording #2

Use following as barebone for your PHP application: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="description" content="Introduction to this guy's website">
    <title>This goes into the titlebar</title>
    <link rel="css/style.css" type="text/css"/>
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body>
    <p>
      <?php echo "This, is hellõu from PHP!"; ?>
    </p>
  </body>
</html>

Listing items from MySQL database can be implemented with mysqli: 

<ul>
  <?php

    $conn = new mysqli("localhost", "test", "t3st3r123", "test");
    $results = $conn->query(
      "SELECT id,name,price FROM lauri_products;");

    while ($row = $results->fetch_assoc()) {
      ?>
        <li>
          <a href="description.php?id=<?=$row['id']?>">
            <?=$row["name"]?></a>
            <?=$row["price"]?>EUR
        </li>
      <?php
    }

    $conn->close();

  ?>
</ul>

Description page: 

<a href="index.php">Back to product listing</a>

<?php
$conn = new mysqli("localhost", "test", "t3st3r123", "test");
$statement = $conn->prepare(
  "SELECT `name`, `description`, `price` FROM" .
  " `lauri_products` WHERE `id` = ?");
$statement->bind_param("i", $_GET["id"]);
$statement->execute();
$results = $statement->get_result();
$row = $results->fetch_assoc();
?>

<span style="float:right;"><?=$row["price"];?>EUR</span>
<h1><?=$row["name"];?></h1>

<p>
  <?=$row["description"];?>
</p>

Occasionally you might want to get all rows from a table, this can be achieved with fetch_all method: 

<ul>
  <?php
 
    $conn = new mysqli("localhost", "test", "t3st3r123", "test");
    $results = $conn->query(
      "SELECT id,name,price FROM lauri_products;");
    $rows = $results->fetch_all(MYSQLI_ASSOC); // Pull ALL results
    $conn->close();
     
    foreach ($rows as $row) {
      ?>
        <li>
          <a href="description.php?id=<?=$row['id']?>">
            <?=$row["name"]?></a>
            <?=$row["price"]?>EUR
        </li>
      <?php
    }
  ?>
</ul>


Lecture/lab #2

Place the header and footer in different files header.php and footer.php and include them like this: 

<?php
require_once "config.php";
include "header.php";
$conn = new mysqli(DB_SERVER, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error)
  die("Connection to database failed:" .
    $conn->connect_error);
$conn->query("set names utf8"); // Support umlaut characters
?>
<!-- Page specific stuff goes here -->
<? include "footer.php" ?>

Make sure session is started in header.php: 

<?php
session_start();
if (!array_key_exists("cart", $_SESSION)) {
    $_SESSION["cart"] = array();
}
?>

Also create config.php, DO NOT commit this to the Git repository below: 

<?php
// This is site specific configuration! Do not commit this to Git!
define("DB_SERVER", "localhost");
define("DB_USER",   "test");
define("DB_PASS",   "t3st3r123");
define("DB_NAME",   "test");
?>

In the product description page place "Add to cart" button: 

<form method="post" action="cart.php">
  <input type="hidden" name="id" value="<?=$_GET["id"];?>"/>
  <input type="submit" value="Add to cart"/>
</form>

Create cart.php for adding items to the cart and displaying the shopping cart contents: 

$product_id = intval($_POST["id"]);
if (array_key_exists($product_id, $_SESSION["cart"])) {
    $_SESSION["cart"][$product_id] += 1;
} else {
    $_SESSION["cart"][$product_id] = 1;
}
var_dump($_SESSION["cart"]);

Set up your Git, you'll have to do this again if you change computer: 

git config --global user.name "$(getent passwd $USER | cut -d ":" -f 5)"
git config --global user.email $USER@itcollege.ee
git config --global core.editor "gedit -w -s"

Create a repository at Github and in your source code tree: 

git init
git remote add origin git@github.com:user-name/repo-name.git
git add *.php js/*.js css/*.css
git commit -m "Initial commit"
git push -u origin master

Add .gitignore, README.md files. Check out if it looks more or less like this.


Lecture/lab #3

This time we improved our shopping cart code and applied some styling to the website.

Exercises:

  • When adding items to cart, make it possible to select count of items using a combobox.
  • Add grand total calculation for the shopping cart.
  • Split your CSS files to three: common design, design for displays and design for printers, check out page source of this


Lecture/lab #4

Set up database table for user accounts: 

CREATE TABLE IF NOT EXISTS `lauri_users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(64) NOT NULL,
  `password` varchar(256) NOT NULL,
  `first_name` varchar(64) NOT NULL,
  `last_name` varchar(64) NOT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `dob` date NOT NULL,
  `salutation` varchar(5) DEFAULT NULL,
  `vatin` varchar(12) DEFAULT NULL,
  `company` varchar(64) DEFAULT NULL,
  `country` char(2) NOT NULL,
  `address` varchar(256) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`)
)


Form for entering the data: 

<form method="post" action="regsubmit.php">
  <div>
    <label for="email">E-mail</label>
    <input type="email" name="email" required/>
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" name="password" required/>
  </div>
  <div>
    <select name="country">
      <option value="ee">Estonia</option>
      <option value="lt">Latvia</option>
      <option value="lv">Lithuania</option>
    </select>
  </div>
  <div>
    <label for="phone">Telephone number</label>
    <input type="tel"/>
  </div>
  <div>
    <label for="vatin">VAT indication number</label>
    <input type="text" pattern="([A-Z0-9]{4,14})?$"/>
  </div>
  <div>
    <label for="dob">Date of birth</label>
    <input type="date" name="dob" placeholder="dd/mm/yyyy" required/>
  </div>
  <div>
    <label for="first_name">First name</label>
    <input type="text" name="first_name" required/>
  </div>
  <div>
    <label for="last_name">Last name</label>
    <input type="text" name="last_name" required/>
  </div>
  <div>
    <input type="submit"/>
  </div>
</form>

PHP code for processing submission: 

require_once "config.php";
include "header.php";
$conn = new mysqli(DB_SERVER, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error)
  die("Connection to database failed:" .
    $conn->connect_error);
$conn->query("set names utf8");

$statement = $conn->prepare(
"INSERT INTO `lauri_users` (
    `email`,
    `password`,
    `first_name`,
    `last_name`,
    `phone`,
    `dob`,
    `salutation`,
    `vatin`,
    `company`,
    `country`,
    `address`)
VALUES (?, PASSWORD(?), ?, ?, ?, ?, ?, ?, ?, ?, ?)");

# whenever you get "call to a member function ... on a non-object" this means something
# is failing **before** that line so you have to manually check for errors like this:
if (!$statement) die("Prepare failed: (" . $conn->errno . ") " . $conn->error);

$statement->bind_param("sssssssssss",
    $_POST["email"],
    $_POST["password"],
    $_POST["first_name"],
    $_POST["last_name"],
    $_POST["phone"],
    $_POST["dob"],
    $_POST["salutation"],
    $_POST["vatin"],
    $_POST["company"],
    $_POST["country"],
    $_POST["address"]);

if ($statement->execute()) {
    echo "Registration was successful! <a href=\"index.php\">Back to main page</a>";
} else {
    if ($statement->errno == 1062) {
       // This will result in 200 OK
       echo "This e-mail is already registered";
    } else {
       // This will result in 500 Internal server error
       die("Execute failed: (" .
           $statement->errno . ") " . $statement->error);
    }
}

Lecture/lab #5

Login form for our web shop: 

<form action="login.php">
  <input type="text" name="user"/>
  <input type="password" name="password"/>
  <input type="submit" value="Log in!"/>
</form>


Create login.php: 

// This is login.php, here we check if user provided proper credentials
var_dump($_POST); // This is just to check that the data gets to server
include "config.php";

// This is copy-paste from description.php!
$conn = new mysqli(DB_SERVER, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error)
  die("Connection to database failed:" .
    $conn->connect_error);

$conn->query("set names utf8");

$statement = $conn->prepare(
"SELECT * FROM lauri_users 
WHERE email = ? AND password = PASSWORD(?)"); // I PROMISE I WILL NEVER USE THIS IN PRODUCTION

$statement->bind_param("ss", $_POST["user"], $_POST["password"]);
$statement->execute();
$results = $statement->get_result();
$row = $results->fetch_assoc();

if($row) {
    echo "Login successful, hello " . $row["first_name"];
    $_SESSION["user"] = $row["id"]; // This just stores user row number!
} else {
    echo "Login failed";
}

Note that in production you should follow guidelines on storing passwords in safe manner, such as PBKDF2!

In index.php navigation bar: 

if (array_key_exists("user", $_SESSION)) {
   echo "Hello" . $_SESSION["user"];
   // Put link to logout.php here
} else {
   // Show the login form above
}

For logging out create another file logout.php: 

session_start();
unset($_SESSION["user"]);
header("Location: index.php");


Lecture/lab #6

CREATE TABLE IF NOT EXISTS `lauri_orders` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` INT NOT NULL,
  `shipping_address` TEXT NULL,
  `shipped` TIMESTAMP NULL,
  `paid` TIMESTAMP NULL,
  `created` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
)

Add many to many relationship between order and products: 

CREATE TABLE IF NOT EXISTS `lauri_order_products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `order_id` INT NOT NULL,
  `product_id` INT NOT NULL,
  `count` INT NOT NULL,
  `unit_price` INT NOT NULL,
  PRIMARY KEY (`id`)
)

Extra: real-time communications with nchan

This time we did some connection juggling with nchan, see demo here. Feel free to integrate it to your web shop customer support :)

Chatroom HTML: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>This goes into the titlebar</title>
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body>
    <h1>Chatroom</h1>
    <div>Messages go here</div>
    <input id="name" type="text" placeholder="Nick goes here"/>
    <input id="msg" type="text" placeholder="Your msg goes here"/>
    <button onClick="sendMessage();">Go!</button>
  </body>
</html>

Chatroom JavaScript: 

// EventSource is sort of like a class
var source = new EventSource("http://push.koodur.com/ev/chatroom");

// Here we associate a function with the event of message coming in
source.onmessage = function(event) {
  console.log("Received server-sent event:", event.data);
  document.querySelector("div").innerHTML +=
      "<br/>" + event.data;
 
}

function sendMessage() {
  var request = new XMLHttpRequest();
  request.open('POST', 'http://push.koodur.com/pub?id=chatroom', true);
  var data = document.querySelector("#name").value + ": " +
	document.querySelector("#msg").value;
  console.info("About to send:", data);
  request.send(data);
}


Python client example: 

import requests
# requests is performing HTTP request
r = requests.get("http://push.koodur.com/ev/chatroom",
	headers={"Accept": "text/event-stream"}, stream=True)

for line in r.iter_lines():
    print "Got line:", line

If you want to set up nchan server yourself the configuration in /etc/nginx/sites-enabled/blah 

server {
    listen 80;
    listen 443 ssl;
    server_name push.koodur.com;

    location /pub {
        nchan_publisher http;
        #allow 185.94.112.76; # Whitelist this IP address for publishing
        nchan_channel_id $arg_id;
        add_header Access-Control-Allow-Origin http://enos.itcollege.ee;
    }

    location ~ "^/lp/(.*)" {
        nchan_subscriber longpoll;
        nchan_channel_id $1;
    }

    location ~ "^/ev/(.*)" {
        nchan_subscriber eventsource;
        nchan_channel_id $1;
    }
}

Requirements

Following are the requirements for the traditional+modern web application:

  • It doesn't look terrible a'la jurandi kodukas.
  • Makes use of WebFonts
  • Makes use of HTML5 input types
  • Makes use of CSS3 styling
  • Makes use of JavaScript additional user input validation.
  • Makes use of server side programming language (eg PHP, node.js, Python, Ruby)
  • Makes use of a database eg (MySQL, Postgres or NoSQL) in a safe manner, avoids SQL injections.
  • Mobile friendly, same web application has to work comfortably on desktop, phones and tablets as well.
  • Makes use of cookies for sessions.
  • Conforms to standards, use W3C Validation Service to check.
  • Can be used by visually impaired people, this usually means the web application has to be usable from a text-based web browser such as links, lynx or w3m.



Optional features

  • Estonian ID-card login
  • Social network login buttons
  • Use nchan or node.js etc for implementing real-time communication between the server and web browser using EventSource or WebSockets.


Deployment on school infrastructure

Traditional PHP+MySQL can be deployed on enos.itcollege.ee:

  • if you're using Windows computers at school simply place the PHP files under H:\public_html
  • if you're using Ubuntu computers at school simply place the PHP files under ~/Documents/public_html
  • if you're using Windows remotely use PuTTY, WinSCP or Swish to connect to enos.itcollege.ee with your school credentials
  • if you're using Ubuntu remotely, press Ctrl-L in file browser and enter sftp://user@enos.itcollege.ee/home/user/public_html

Use phpMyAdmin on http://enos.itcollege.ee/phpmyadmin to administer the database, the username is test and password is t3st3r123


Deployment on personal Ubuntu machine

You can use any Ubuntu/Debian based machine and simply do: 

sudo apt-get install apache2 libapache2-mod-php5 php5-mysqlnd

After that you can simply place files under /var/www/html and point your web browser to the IP address of the machine, which in case of your laptop is http://localhost

The easiest way to set up and manage a MySQL database is by installing phpMyAdmin: 

sudo apt-get install phpmyadmin mysql-server

Password for the root database user is asked, remember to save this for later! Open up http://localhost/phpmyadmin and log in with username root and the same password. Remember that MySQL root user is distinct from the operating system user root!

Katrin will show you how to install and manage Ubuntu in Operating systems course.

This category currently contains no pages or media.

Retrieved from "https://wiki.itcollege.ee/index.php?title=Category:I702_Web_Application_Programming&oldid=101832"