Data1700 – Web Programming

Lecture 1: Introduction
Akif Q. Khan
About me
• Position: Assistant Professor • Specializations:
• Software Development
• Office: PS240
• Big Data Analysis
• Email: akif.quddus.khan@oslomet.no
• Cloud Computing
• Experience: Over 14 years in web application • Research Interests:
development
• Cloud Cost Optimization
• Education:
• Big Data Pipelines
• Ph.D. in Computer Science from NTNU (Norwegian
University of Science and Technology)
• Data placement in Hybrid-cloud environments

• Master's in Applied Computer Science from NTNU

• Programming Languages: PHP, Java, Python,
C++, C#
• Bachelor's in Computer Science from FAST – National
University Faisalabad • Frameworks: Yii, CodeIgniter, Laravel, NodeJS
About the course
• Course title: Data1700 - Web Programming

• Credit: 10

• Teaching language: English

• Exam language: English & Norwegian

• Lecturers: Akif Q. Khan, Tom Glover

• Teaching assistants: Jon Petter, Herman, Fabian, Sacir, Nezar, Julian

About the course (2)
• Exam date: 22.05.2025

• Obligatory assignments: 2 assignments, TBA

• Course page: https://student.oslomet.no/en/studier/-

/studieinfo/emne/DATA1700/2024/H%C3%98ST
• Course schedule: https://student.oslomet.no/en/timeplan/-
/timeplan/emne/DATA1700/2025/V%C3%85R
 Lecture 1 – Introduction

Lecture 2 – Basic JavaScript

Lecture 3 – Advance JavaScript

Lecture 4 – Advance JavaScript 2

Lecture 5 – JQuery

Lecture 6 – Introduction to Client/Server Java Spring

Lecture 7 – HTTP Communication

About the Lecture 8 – Bootstrap

course (3) Lecture 9 – Data Structure and Recursion

Lecture 10 - Data Structure and Recursion 2

Lecture 11 – Generic Datatypes

Lecture 12 – Databases 1

Lecture 13 – Databases 2

Lecture 14 – Input Validation/Sessions

Lecture 15 – Web Security

Lecture 16 – Frontend Frameworks

The Web: Web and Internet

• Internet: Global network of interconnected computers

established through telecommunication and optical networks.

• Web (World Wide Web): System of interconnected documents

and resources and works on Internet.
The Web: Hypertext and Hypermedia

• Hypertext: text which contains links to other texts.

• Hypermedia: an extension of the term hypertext; a nonlinear

medium of connected information that includes graphics, audio,
video, plain text.
The Web: Basic concepts
• Webpage: is a single document viewed on web browser using a unique
address (URL).

• Website: is a collection of related webpages all connected under a

single address (domain name).

• Hyperlink: is a word, phrase, or image that is linked to another

resource (e.g., document or website).

• Web server: software and hardware that responds to client/user

requests over the Web.
The Web: Basic concepts (2)
• Uniform Resource Locator (URLs): a human readable address for a resource
on the Web (e.g., webpage).

• Uniform Resource Identifier (URI): an address (superset of URLs) that can

be used to identify any type of resource, (i.e., not necessarily on the Internet).

• Internet Protocol address (IP) address: an identifying numerical label

associated assigned to a computer or computer network.

• Domain Name System: a naming system for computers and other resources
on the Internet; translates domain names, i.e., the unique and human-
readable address of a website, to the numerical IP addresses.
The Web: Basic concepts (3)
• Internet protocols: a set of rules governing the communication and
exchange of data over the Internet.

• HyperText Transfer Protocol (HTTP): protocol for transmitting

hypermedia documents, such as HTML.

• Hypertext Transfer Protocol Secure (HTTPS): extension of the HTTP

protocol; uses encryption for secure communication.

• Other protocols: TCP/IP(Transmission Control Protocol/ Internet

Protocol), SMTP(Simple Mail Transfer Protocol), FTP (File Transfer
Protocol) etc.
The Web: URL & URI

uri

urn:isbn:0451450523

The 1968 book The Last Unicorn, identified by its International

Standard Book Number.
The Web: URL & URI (2)
url

https://www.example.com/test/
protocol domain name path to a specific page

192.0.2.1
IP address
The Web: What is it?

Hypertext and non- Information stored in Nodes interlinked by URI/URL – the addressing Hypermedia: not only
sequential writing nodes associative links scheme making the web text, but also graphics,
"world wide" speech and audio
The Web: History of Hypertext

Jorge Luis Borges "The Garden of

Forking Paths” The Xanadu project (Ted Nelson) Hypercard (Apple)

1941 1945 1965 1968 1987 1990

The Memex (Vannevar Bush, “As We NLS (Douglas Engelbart) World Wide Web (Tim Berners-Lee @
May Think”) CERN)
The Web: How
does it work?

source: https://ruslanspivak.com/lsbaws-part1/
The Web: How does it work? (2)

DNS server
URL of the requested page
www.example.com

IP address of the requested page

124.45.56.67

Internet

IP address Web server

124.45.56.67
Clients

content
The Web: Application architecture
Frontend Backend

Client Server
Request

URL

interact
Response
Web Server Application
HTML file
User JSON/XML application logic
PHP, Python, JavaScript, Java,
C#…
HTML, CSS, JavaScript

File system Database

HTML, CSS, Images… MySQL, MongoDB…
Fundamental
standards
Fundamental Standards: HTTP

HyperText Transfer Protocol

Request-response protocol (client-server model): HTTP Request and HTTP

Response

Originally a stateless protocol: each request-response cycles are completely

independent

States may be maintained using cookies (e.g., session cookies)

Fundamental
Standards:
HTML
• HTML - HyperText
Markup Language

• HTML describes the

structure of Web pages
using markup

• HTML tags label pieces

of content with tags
Fundamental Standards: HTML DOM
HTML DOM - HTML Document Object Model

High-level API: Cross-platform and language independent

DOM tree - HTML elements are represented as nodes in a tree structure

Convention for representing, traversing and interacting with HTML objects

Tools: DOM inspector in Chrome, Firefox etc.

Fundamental
Standards:
HTML DOM (2)

source: https://www.w3schools.com/js/js_htmldom.asp
Fundamental
Standards: CSS
• CSS - Cascading Style Sheets

• CSS describes how HTML

elements are to be displayed

• It can control the layout of

multiple web pages all at once

• External stylesheets are stored

in CSS files
Fundamental
Standards:
JavaScript
• A scripting language that can manipulate
DOM; standardized as ECMAScript

• Primarily for client-side (now increasingly also

for server side using Node.js)

• Dynamic: dynamic typing and object-based

• First class functions: functions are objects

themselves and have properties and methods

• Prototype-based: prototypes for inheritance,

functions as object constructors etc...
Fundemental standards: How?
• The Web is based on industry standards.

• World Wide Web Consortium (W3C) is the main international

standards organization for WWW-related technologies (e.g., HTML).

• The Internet Engineering Task Force (IETF) develops and promotes

voluntary Internet standards, in particular the standards that comprise
the Internet protocol suite (TCP/IP).

• Ecma is a standards organization for information and communication

systems (e.g., JavaScript, JSON etc.).
Fundamental standards: History
• HTTP/1.1 (1997) as IETF and HTTP 2 (2015) …

• HTML 2.0 was published as IETF (1995),(…) HTML 5.1 as W3C

(2016), HTML 5.2 (2017) …

• CSS is divided into levels; Level 1 (1996), Level 2 (1998), Level 3

(1999), CSS4/level 4 modules …

• ECMAScript 1.0 (1997), ECMA 8-12 (2017-21), ES.Next (to come)

…
Full stack
Full stack: What is it?
• All phases of web development:

• “program a browser (e.g., using

JavaScript, jQuery, Angular, or Vue)
• program a server (e.g., using PHP,
.NET, Java Spring, Python, Node.js)
• program a database (e.g., using
SQL, PostgreSQL, SQLite, or
MongoDB)
• …”

source: https://www.w3schools.com/whatis/whatis_fullstack.asp
source (img): https://www.cybercoders.com/insights/what-hiring-
managers-look-for-in-a-full-stack-developer/
Full stack: Simple example

• Accessing a page at the URL http://test.com/home.php?id=123

• The browser resolves the server name of the URL (test.com) into
an Internet Protocol address using the DNS.

• This lookup returns an IP address such as 203.0.113.4

Full stack: Simple example (2)
• The browser then requests the resource by sending
an HTTP request across the Internet with a parameter/input (id).

• It requests service from a specific TCP port number (80).

• Port 80 is well known for the HTTP service so that the receiving
host can distinguish an HTTP request from other network
protocols it may be servicing.
Full stack: Simple example (3)
Request:
GET /home.php HTTP/1.1
Host: test.com
id=123

Response
Response is followed by the
HTTP/1.1 200 OK content of the requested
page.
Content-Type: text/html; charset=UTF-8
Full stack: Simple example (4)
• Database

ID Name Surname City Country

123 Ahmet Soylu Oslo Norway
124 Akif Khan Gjøvik Norway
125 John White London UK
 Full stack: Simple example (5)
static
• Server (backend),
executed on the server
home.php

static

executed on the server

executed on the browser

static

executed on the server

static
Full stack: Simple example (6)
• Returned HTML document (response)
Full stack: Simple example (7)
• Browser
Web security: Key concepts
• Authentication: Verification of identity

• Authorization: Allowed actions

• Confidentiality: Keep information secret from particular users

• Data integrity: Keep data uncorrupted

• Nonrepudiation: Digital signatures to protect trust

• Endorsement: Statement from a known participant

Questions?