Lec 01 Introduction.pptx

1

CS428 Web Engineering

Lecture 01

Overview

COURSE OBJECTIVE

• _{To produce dynamic, animated, interactive, database driven}

websites.

• _{Familiarize students with WEB application development}

tools and environment.

• Teach the concepts, principles and methods of web engineering.

• _{Students will also learn MVC based Laravel PHP Framework}

to create dynamic web applications.

LEARNING OUTCOMES

• _{Identify candidate tools and technologies for} developing web applications.

• _{Develop responsive design interfaces for web}

applications.

• _{To produce dynamic web applications using}

Laravel PHP Framework.

COURSE OVERVIEW

• _{The course will consist of:}

Ϟ 30-32 Lectures (1 hour each) Ϟ 15-16 Labs (2 hour each)

Ϟ 2 Assignments Ϟ 1 Project

Ϟ 2 Quizzes

Ϟ 2 Exams (Midterm and Final)

• _{Work Load:}

Evaluation Criteria

• _{Assignment/Quiz (5 %)}

• _{Lab (15 %)}

• _{Project (20 %)}

• _{Midterm Exam (20 %)}

– _{During the 8}th _week.

– _{Duration: 1.5 hour.}

– _{Will cover all material covered during the first seven weeks.}

• _{Final Exam (40 %)}

– _{During the 16}th _week.

– _{Will cover whole of the course with a slight emphasis on}

the material cover after the midterm exam.

BOOKS

Web Engineering: A Practitioner’s Approach by Roger Pressman and David Lowe,

McGraw-Hill, 2009

• _{Lab Text Book}

• _{Web 2.0 Architectures: What Entrepreneurs}

Grading Scale

Grade Marks GPA

A 85 – 100 4.0

A- 80 – 84 3.7 – 3.9

B+ 75 – 79 3.5 – 3.7

B 70 – 74 3.0 – 3.4

C+ 65 – 69 2.5 – 2.9

C 60 – 64 2.0 – 2.4

D+ 55 – 59 1.5 – 1.9

D 50 – 54 1.0 – 1.4

SOFTWARES

• _{Database (MySQL)}

• _{Framework (Laravel)}

• _{Text Editor (Notepad ++, PhpStorm)}

http://notepad-plus-plus.org/

Programming Languages

• _CSS3

• _JavaScript

• _jQuery

• _AJAX

Framework

• _{Bootstrap (CSS framework)}

• _{Angular JS (Client side framework)}

Instructor Introduction

• _{Course Instructor:}

Yasir Naeem Sherwani

• _{Email Address:}

[email protected]

• Contact Hours:

• _{Tue, Wed, Thu, Sat (12pm – 4pm)} • _{Friday (10am – 12pm)}

(Room # CS-102)

• _{Course web page:}

Web Programming vs Web Engineering

• _{Web Programming:}

 _{More focus on programming of HTML, CSS, JavaScript}

and PHP only.

• _{Web Engineering}

 _{It is advanced course.}

 _{Web Programming is prerequisite of web}

engineering.

 _{More concentration on currently available web}

application development tools and framework.

• _{Today’s computer are more useful and the}

reason behind it is Internet.

• _{Internet is huge network of computers, who}

can talk to each other 24 hours a day.

• _{ARPANET was born in 1969.}

• _{Develop for US Department of Defense} Advanced Research Projects Agency.

• _{The main purpose to combine all small}

isolated networks in USA means to form a

network of networks.

• _{ARPANET make possible 60,000 computers}

• _{A number of other networks were developed}

during the late 70s and 80s, BITNET and CSNET. For variety of reasons, neither BITNET nor

CSNET became a dominant national network.

• _{A new national network, NSFnet was created in}

• _{By 1990, NSFnet had replaced ARPAnet for}

most non-military uses.

• _{By 1992, NSFnet connected more than 1}

million computers around the world.

• _{Internet is network of networks.}

• _{A large number of networks, interconnected} physically

• _{Capable of communicating and sharing data with} each other

• _{From the user’s point view, Internet – a collection} of interconnected networks – looks like a single, unified network

19

Packet (1)

• _{The smallest unit of data transmitted over a}

computer network

• _{A message to be transferred over the network is}

broken up into small packets by the sending computer

• _{Each packet contains the following info:} – _{Sender's address}

– _{Destination address}

– _Data

20

Packet (2)

• _{All packets travel independently}

• _{When all packets are received by the destination}

computer, it reassembles them to form the

21

Protocols

• _{Networks use protocols, or rules, to exchange info}

through shared channels

• _{Protocols prevent collisions of packets caused by} simultaneous transmission between two or more computers

• _{Several protocols are available for various types of}

22

Internet Networking Protocols

Communications on the Internet is controlled by a set of two protocols:

23

TCP/IP (1)

Transmission Control Protocol/Internet Protocol

• _{Networking protocol used by all computers and}

networks on the Internet

• _{Originally developed by the US DoD for Unix, but}

24

TCP/IP (2)

Transmission Control Protocol/Internet Protocol

• _{TCP breaks down the message to be sent over the}

Internet into packets

• _{IP routes these packets through the Internet to}

get them to their destination

• _{When the packets reach the destination}

WORLD WIDE WEB - 1989

• _{Tim Berners Lee, British Physicist at the CERN}

in Geneva started an idea there.

• _{He somehow wanted to make it simple for his}

colleagues to share there documents.

• _{World wide web is a way of accessing information}

over the internet. The web uses HTTP protocol.

• _{The documents are formatted in a markup}

language called HTML that supports links to other documents, as well as graphics, audio, and video files.

• _{Web Browser like “Netscape Navigator” and}

27

28

Internet Services

There are many, but we will look at only the following:

• _FTP

• _Telnet • _Web • _eMail

CLIENT AND SERVER ARCHITECTURE

• _{Internet is based on client server architecture.}

• _{On internet we have two types of computers}

some are called client and some are called server.

• _{Server computer is those who serves or}

• _{Client is user’s computer.}

• _{Example: your personal desktop pc is client,}

and the websites (www.yahoo.com) which is resided on computer is server computer.

CLIENT-SERVER MODEL

Client A

Internet

Server X

Client C Client

DEKTOP SOFTWARE & WEB BASED

SOFTWARE

• _{SOFTWARE is group of components, which are}

written in any programming language.

• _{These components/modules together solved a} purpose or task.

– _{Desktop Software}

• _{Desktop Software: They reside at your local} computer and execute only at your local

computer e.g. Any program developed through

MS Excel, MS Word

• _{Web-based Software: they reside on a server}

machine.

• _{There are different programming languages}

present through which we can create software.

• _{Some programming languages are designed to} develop only desktop software and some are designed to develop web-based apps only.

WHAT IS A WEBSITE?

• _{A collection of related documents/pages available on}

the Web

• _{The first portion of the URLs in the Web pages of a}

Web site is the same e.g.

– _{http://www.uol.edu.pk/} – _{http://www.uol.edu.pk/cs}

– _{http://www.uol.edu.pk/cs1010}

What is a URL?

• _{Uniform Resource Locator}

• _{The unique address assigned to each unique}

URL

• _{URL stands for Uniform Resource Locator.}

• _{Is a way of specifying the location of resource}

on internet.

• _{Resource can be a web page, image, file of}

some kind.

URL

• _{URL looks like this:}

http://www.bw.org:80/object?query#location

• _{Scheme: specifies the protocol being used most}

URL for web pages will be either http or https.

• _{Host: is the IP address of the host server.}

Scheme Host Port Path Query

• _{Port: is the TCP port number, default port number is 80} for http scheme, normally emit port number and colon before it.

• _{Path: field is the path of the object that specify, typically} it look likes a unix file path. and it always begin with /

• _{Query String: is we passed on the software running on} the server, its typically used CGI, PHP queries.

• _{Fragment Identifier: is used to jump to location within a} page or other resource.

EXAMPLE

This URL specifies a host name and path is

single slash (/) indicating the root directory. It is often default if you emit path.

• _{http://www.bw.org/contact/}

Relative URL

• _{Filename.html}

• _{This is called relative URL. In this case web}

42

IP Address (1)

• _{A unique identifier for a computer on a TCP/IP}

network

• _{Format: four 8-bit numbers separated by periods.}

Each 8-bit number can be 0 to 255

• _Example:

43

IP Address (2)

• _{Networks using TCP/IP route messages based on}

the IP address of the destination

• _{Any IP addresses (as long as they are unique) can}

be assigned within a Private Network

• _{However, connecting a Private Network to the}

45

Domain Names

• _{IP addresses are fine for computers, but difficult}

to recognize and remember for humans

• _{A domain name is a meaningful,}

easy-to-remember ‘label’ for an IP address

• _Examples:

180.150.151.104 www.uol.edu.pk

• _{A fully qualified domain name can be made up of a} top level domain (TLD), second level domain (SLD).

• _{Seven popular Top Level Domains are:}

.com, .edu, .org, .gov, .net, .countryname, .int

• _{SLDs represent the name of a company/institution/}

entity

• _{Subdomains represents the functional unit of a}

cs . uol . edu . pk

Sub

COMPONENTS OF A WEBSITE

48

index.html page1.html page2.html page3.html

BROWSER AND WEB SERVER

access web pages.

• _Examples:

Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Netscape Navigator etc…

• _{Web server is a software that facilitate the user’s} request for a webpage.

• _Examples:

50

CLIENT COMPUTER

Web Browser (IE, Opera, Mozilla, Google Chrome…)

SERVER COMPUTER

Web Server (IIS, Apache…)

Website 1 Website 2 Website 3

Web pages Web pages Web pages

requ est

SERVER SIDE PROGRAMMING

• _{Server side programming means the program}

we write to build back end of a website.

• _{Server side programming languages are those}

languages which fulfill the request of client after performing some action.

CLIENT SIDE PROGRAMMING

which we write to build front end of a website.

• _{Client side programming languages are those}

languages which execute on client machine.

• _{Examples: JavaScript, HTML, CSS}

What is an HTML File?

• _{HTML stands for Hyper Text Markup Language.}

• _{An HTML file is a text file containing small markup tags}

• _{The markup tags tell the Web browser how to display}

page.

• _{An HTML file must have an .htm or .html file}

extension.

• _{An HTML file can be created using a simple text editor .}

• _{An HTML tags are case-insensitive}

Note: If you want to follow the latest web standards, you should always use lowercase tags.

• _{HTML is originally based on SGML (Standard}

Generalized Markup Language).

• _{Hyperlinks are fundamental capability of}

HTML, this is what makes the web go round.

Versions of HTML

• _{There are several versions of HTML available.}

Good news all the browsers support all the versions.

• _{HTML 2.0 (1995) first standardized version}

• _{HTML 3.2 (1997)Approved by www consortium}

• _{HTML 4.01 (1998) clear the issues in previous}

version

HTML5

• _{WHATWG – The Web Hypertext Application}

Technology Working Group

• _{W3C favored XHTML 2.0}

• _{HTML5 is actually group of related}

technologies, which HTML is part, these technologies including DOM, working with