CMPT 165

Introduction to the Internet
and the World Wide Web

By Hassan S. Shavarani

Unit9: Dynamic HTML Programming

Topics

  1. Bits and Transmitting Information
  2. Server-side Programming

Bits and Transmitting Information

What Are Bits?

for any information to be transmitted over the network
(or stored in your computer's memory or on its disks,)
it must be encoded as a sequence of bits

What Are Bits?

  • Each bit can have one of two values,
    usually written as 0 and 1
  • it will be something like
    "an electrical pulse for 1 but none for 0"

What Are Bits?

All of the information we can been working with has been turned into bits by our software

e.g. PNG and JPEG formats specify (very different) ways to turn image data into a sequence of bits

Bits and Bytes

  • a bit is a single 0 or 1
  • A byte is a sequence of eight bits

Byte is often a more convenient unit to start with when talking about storing or transmitting information

What Are Bytes?

there are 28 = 256 possible bytes, usually taken to represent numbers 0–255

00000000 = 0
00000001 = 1
00000010 = 2
00000011 = 3
00000100 = 4
⋮
11111111 = 255

Bits and Bytes

2n is the number of unique values that can be represented by n bits

A kilobit and kilobyte(kb and kB) is 210= 1,024 bits and bytes
A megabit and megabyte (Mb and MB) are 220 = 1,048,576 bits and bytes
A gigabit and gigabyte (Gb and GB) are 230 = 1,073,741,824 bits and bytes

we have stored and transmitted characters frequently
HTML, CSS, and JavaScript are all just
characters stored in a text file

these have been sent from server to client for all of our pages

Encoding Characters

  • characters must be encoded as bits to be able to be sent through internet
  • client and server agree on this encoding
Obama Tweet * Image from http://www.hanselman.com/blog/content/binary/Windows-Live-Writer

Character Encoding

a way to encode the character numbers into bits
there are several character encodings for Unicode character set (about 120,000 characters)

for example, in Unicode “A” is character number 65, and “€” is 8364 (so you can produce € in HTML with €)

the choice for web pages is easy: use UTF-8

<meta charset="UTF-8" />

Server-side Programming

we have learned how to construct web pages,
make them look the way we want,
and give them behaviour

Job of Web-Server

the job of the web server is very simple

  • find the .html file which is put on the server
  • send the file out as-is to web browsers

Webpage Generation/Update Problem

can we modify the HTML code for adding every single piece of news on the news feed?

can we change the HTML code after each comment a user adds under a post?

can we have a prepared HTML file for every possible search keyword that could come to your mind to ask from Google?

How to modify the .html files

we have been able to modify the HTML page with code we have written, but that was all JavaScript code that runs in the web browser

there was never any change in the .html file sent from the server to the browser

Static vs. Dynamic Webpages

static web pages
webpages that come from .html files on the server
dynamic web pages
webpages that are created as they are requested

Client-side vs. Server-side Programming

client-side programming
the programming we have been doing in JavaScript
(the programs run in the user's web browser)
server-side programming
writing programs to create dynamic pages
(the programs run on the web server)

Server-side Programming

server-side programs are often written in
Python, Ruby, PHP, Java, or C#

JavaScript is also a common choice
since most web developers already know it

Server-Side JavaScript

there exists a long list of different libraries
to be used for server-side JavaScripting
[ you can check the list here]

Node.js is one of the most common server-side JavaScripting libraries

Server-Side JavaScript: Node.js Example

var http = require('http');
var server = http.createServer(function(req, res) {
    res.setHeader('Content-type', 'text/html');
    res.writeHead(200);
    res.write('<!DOCTYPE html>\n');
    res.write('<html><head><meta charset="UTF-8" />\n');
    res.write('<title>Node.js app</title></head><body>\n');
    res.write('<p>This is a page generated by Node.js.</p>\n');
    for ( i=1; i<=10; i+=1 ) {
        res.write('<p>Another paragraph. ' + i + '</p>\n');
    }
    res.write('</body></html>\n');
    res.end();
});
server.listen(8080);
you can try this example here!
You can start learning about Node.js library in here
Any Questions?