Embed Size (px)
Citation preview
Web Engineering(CC 552)
Introduction
Dr. Mohamed [email protected]
Room 405 (CCIT)
Web Engineering(CC 552)
Introduction
Dr. Mohamed [email protected]
Room 405 (CCIT)
Course GoalsCourse Goalsn A general understanding of the fundamentals of
the Internet programming
n Knowledge and experience with the major web technologies and techniques for developing Web-based applications
n Develop a working knowledge of HTML, CSS, JavaScript, and PHP as languages for developing Web applications
n Insight into what constitutes a well designed, usable web application
n Presenting an introduction to XML
n A general understanding of the fundamentals of the Internet programming
n Knowledge and experience with the major web technologies and techniques for developing Web-based applications
n Develop a working knowledge of HTML, CSS, JavaScript, and PHP as languages for developing Web applications
n Insight into what constitutes a well designed, usable web application
n Presenting an introduction to XML
Text BookText Book
Robert W. Sebesta, Programming the World Wide Web, 6th edition, Pearson Addison Wesley, 2012
Course ContentsCourse ContentsLectures Topic
1Introduction to Internet Infrastructure and
Internet Programming
1 XHTML
1 Cascading Style Sheets (CSS)
1 HTML 5 & CSS3
2 JavaScript + DHTML
4 PHP + MySQL +Sessions
1 AJAX
1 XML
1 AJAX & JSON Objects
1 JQuery
The Internet and the WWWThe Internet and the WWWn The WWW is one of the services running over
the Internet
n Before the WWW– The Internet was used by scientists, researchers,
large (usually governmental) organizations, and amateur enthusiasts
– Commerce on the Internet was almost unknown
n The WWW is now the major conduct to the Internet and the major vehicle for e-commerce
n The WWW is one of the services running over the Internet
n Before the WWW– The Internet was used by scientists, researchers,
large (usually governmental) organizations, and amateur enthusiasts
– Commerce on the Internet was almost unknown
n The WWW is now the major conduct to the Internet and the major vehicle for e-commerce
The WWWThe WWW
n Allows a user anywhere on the Internet to search for and retrieve documents
n 1989 WWW proposal by group led by Tim Berners-Lee at CERN
n Late 1990 prototype implemented
n 1991 WWW released to the rest of the world
n Allows a user anywhere on the Internet to search for and retrieve documents
n 1989 WWW proposal by group led by Tim Berners-Lee at CERN
n Late 1990 prototype implemented
n 1991 WWW released to the rest of the world
Basic WWW SystemsBasic WWW SystemsWeb Server
(e.g. Apache, IIS)Hosting web pages
Web ClientBrowser
Web Authoring Systemcreate web pagesPublish
web pages
Retrieving web pagesusing HTTP
protocol
Internet
Web page: document written in XHTML, JavaScript, PHP, ASP
Scanner
Video capture
Sound card
Web Programmer’s ToolboxWeb Programmer’s Toolbox
n HTMLn CSSn JavaScriptn PHP
n HTMLn CSSn JavaScriptn PHP
HTMLHTMLn Describes the general form and layout of
documentsn An HTML document is a mix of content and
controls– Controls are tags and their attributes– Tags often delimit content and specify something
about how the content should be arranged in the document
– Attributes provide additional information about the content of a tag
n Describes the general form and layout of documents
n An HTML document is a mix of content and controls– Controls are tags and their attributes– Tags often delimit content and specify something
about how the content should be arranged in the document
– Attributes provide additional information about the content of a tag
Tools for creating HTML documentsTools for creating HTML documents
n HTML editors – make document creation easier – Shortcuts to typing tag names, spell-checker,
etc.
n WYSIWYG HTML editors– Need not know HTML to create HTML
documents
n HTML editors – make document creation easier – Shortcuts to typing tag names, spell-checker,
etc.
n WYSIWYG HTML editors– Need not know HTML to create HTML
documents
CSSCSS
n A language for defining style sheets that was developed for HTML
n Provide the means to control and change presentation of HTML documents
n Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents
n A language for defining style sheets that was developed for HTML
n Provide the means to control and change presentation of HTML documents
n Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents
JavaScriptJavaScriptn A client-side HTML-embedded scripting
languagen Only related to Java through syntaxn Dynamically typed and not object-orientedn Provides a way to access elements of
HTML documents and dynamically change them
n A client-side HTML-embedded scripting language
n Only related to Java through syntaxn Dynamically typed and not object-orientedn Provides a way to access elements of
HTML documents and dynamically change them
AjaxAjaxn Asynchronous JavaScript + XML
– No new technologies or languagesn Much faster for Web applications that
have extensive user/server interactionsn Uses asynchronous requests to the servern Requests and receives small parts of
documents, resulting in much faster responses
n Asynchronous JavaScript + XML– No new technologies or languages
n Much faster for Web applications that have extensive user/server interactions
n Uses asynchronous requests to the servern Requests and receives small parts of
documents, resulting in much faster responses
PHPPHPn An open source server-side scripting
languagen PHP code is embedded in XHTML
documentsn Similar to JavaScriptn Great for form processing and database
access through the Webn The most widely used
n An open source server-side scripting language
n PHP code is embedded in XHTML documents
n Similar to JavaScriptn Great for form processing and database
access through the Webn The most widely used
Server-side vs. Client-side Programming
Server-side vs. Client-side Programming
n In Server-side, instead of downloading the program and executing on the client,
– have the client make a request– execute the program on the server– download the results to the client
n In Server-side, instead of downloading the program and executing on the client,
– have the client make a request– execute the program on the server– download the results to the client
Server-side vs. Client-side Programming
Server-side vs. Client-side Programming
n Advantages of Server-side programming– cross-platform support:
browser variations yield differences with JavaScript. With server-side, only have to test & optimize program for server platform
– more options for applications:server-side program not limited for security reasons, can access files & databases
– increased power:server machines tend to be more powerful, better tools
– code integrity:do not have to give client access to source code or data in order to execute
n Advantages of Server-side programming– cross-platform support:
browser variations yield differences with JavaScript. With server-side, only have to test & optimize program for server platform
– more options for applications:server-side program not limited for security reasons, can access files & databases
– increased power:server machines tend to be more powerful, better tools
– code integrity:do not have to give client access to source code or data in order to execute
World Wide WebWorld Wide Web
Software on Server
ClientHTTP
HTML data
HTTP Server
World Wide WebWorld Wide Web
Database
Software on Server
ClientHTTP
HTML data
HTTP Server
Purpose of Server-Side ScriptingPurpose of Server-Side Scriptingn search engines
– must maintain a large database of links & documents
– must be able to index, sort data, perform complex searches
– requires lots of storage, optimum performance
n search engines– must maintain a large database of links &
documents– must be able to index, sort data, perform
complex searches– requires lots of storage, optimum
performance
Purpose of Server-Side ScriptingPurpose of Server-Side Scriptingn database access
– Web page can serve as front-end to a database
– make requests from browser, passed on to Web server, calls a program to access the database, sends the results back to the browser
n database access– Web page can serve as front-end to a
database– make requests from browser, passed on to
Web server, calls a program to access the database, sends the results back to the browser
Purpose of Server-Side ScriptingPurpose of Server-Side Scriptingn Chat and bulletin board services
– user enters messages in a Web interface, passed on to server
– chat: a program distributes messages to all connected users
– bulletin board: a program adds to accessible database of messages
n Chat and bulletin board services– user enters messages in a Web interface,
passed on to server– chat: a program distributes messages to all
connected users– bulletin board: a program adds to accessible
database of messages
Purpose of Server-Side ScriptingPurpose of Server-Side Scripting
n Other applications such as– User registration/administration/profiles– Transactions– E-commerce– Social Networks Services
n Other applications such as– User registration/administration/profiles– Transactions– E-commerce– Social Networks Services
Major Server-Side TechnologiesMajor Server-Side Technologiesn Major Server-Side Technologies
– Server-Side Includes – CGI
§ Perl – Java Servlets– ASP.NET– PHP (Embedded Scripts)
n Major Server-Side Technologies – Server-Side Includes – CGI
§ Perl – Java Servlets– ASP.NET– PHP (Embedded Scripts)
Internet InfrastructureInternet Infrastructure
When Computers CommunicateWhen Computers Communicaten When two or more computers communicate,
they must have a common way in which to communicate.
n To do this computers use protocolsn A protocol is an agreement by which two or
more computers can communicate.n Transfer Control Protocol/Internet Protocol
(TCP/IP) is the underlying protocol for the Internet.
n The WWW protocol is HTTP.
n When two or more computers communicate, they must have a common way in which to communicate.
n To do this computers use protocolsn A protocol is an agreement by which two or
more computers can communicate.n Transfer Control Protocol/Internet Protocol
(TCP/IP) is the underlying protocol for the Internet.
n The WWW protocol is HTTP.
How TCP/IP WorksHow TCP/IP Works1) Transfer Control
Protocol (TCP) breaks data into small pieces of no bigger than 1500 characters each. These “pieces” are called packets.
1) Transfer Control Protocol (TCP) breaks data into small pieces of no bigger than 1500 characters each. These “pieces” are called packets.
101010101001101010011010011010210101010101011010111101010111011101110110110000101110110101010101001110101001010111101000
101010101001101010011010011
101010101001101010011010011
101010101001101010011010011
How TCP/IP WorksHow TCP/IP Works2) Each packet is inserted
into different Internet Protocol (IP) “envelopes.” Each contains the address of the intended recipient and has the exact same header as all other envelopes.
2) Each packet is inserted into different Internet Protocol (IP) “envelopes.” Each contains the address of the intended recipient and has the exact same header as all other envelopes.
101010101001101010011010011
101010101001101010011010011
101010101001101010011010011
Total Length in bytes (16)
Time to Live (8)
Options (if any)
Bit 0 Bit 31Version
(4)Hdr Len
(4) TOS (8)
Identification (16 bits) Flags (3) Fragment Offset (13)
Source IP Address (32)
Destination IP Address (32)
Header Checksum (16)Protocol (8)
Data (variable length)
Head
erHe
ader
Dat
a
Field length in bits
IP Packet Format (v4)IP Packet Format (v4)
How TCP/IP WorksHow TCP/IP Worksn A router receives the packets and then
determines the most efficient way to send the packets to the recipient.
n A router receives the packets and then determines the most efficient way to send the packets to the recipient.
How TCP/IP WorksHow TCP/IP Worksn After traveling along a series of routers,
the packets arrive at their destination.
n Upon arrival at their destination, TCP checks the data for corruption against the header included in each packet. If TCP finds a bad packet, it sends a request that the packet be re-transmitted.
n After traveling along a series of routers, the packets arrive at their destination.
n Upon arrival at their destination, TCP checks the data for corruption against the header included in each packet. If TCP finds a bad packet, it sends a request that the packet be re-transmitted.
IP AddressesIP Addressesn Since computers process numbers more
efficiently and quickly than characters, each machine directly connected to the Internet is given an IP Address
n An IP address is a 32-bit address comprised of four 8-bit numbers separated by periods. Each of the four numbers has a value between 0 and 255
n Since computers process numbers more efficiently and quickly than characters, each machine directly connected to the Internet is given an IP Address
n An IP address is a 32-bit address comprised of four 8-bit numbers separated by periods. Each of the four numbers has a value between 0 and 255
IPv4 AddressesIPv4 Addresses
n Example of an IP Address:n Example of an IP Address:
128.123.64.147The IP Address of the
Computer Science Department’s Web Server at NMSU
www.cs.nmsu.edu
IPv6 Addresses IPv6 Addresses
n New addressing system developed in 1995n The IP version 4 address space is rapidly
nearing exhaustion of available address blocks
n New addressing system developed in 1995n The IP version 4 address space is rapidly
nearing exhaustion of available address blocks
l Uses 128 bits for the address• provides the potential for a
maximum of 2128, or about 3.403×1038 unique addresses
• Hexadecimal notation
Special IP NumbersSpecial IP Numbers
n Some IP numbers have special meanings, and so are not normally assigned to individual hosts
n Broadcast Address – 255 – Listened to by all machines on the
networkn Loopback Network – 127
– 127.0.0.1 - loopback address (localhost)
n Some IP numbers have special meanings, and so are not normally assigned to individual hosts
n Broadcast Address – 255 – Listened to by all machines on the
networkn Loopback Network – 127
– 127.0.0.1 - loopback address (localhost)
DNSDNSn While numeric IP addresses work very well for
computers, most humans find it difficult to remember long patterns of numbers.
n Instead, humans identify computers using Uniform Resource Locators (URLs), a.k.a. “Web Addresses”.
n A domain name server (DNS) is a machine that keeps a table of names and corresponding IP addresses
n While numeric IP addresses work very well for computers, most humans find it difficult to remember long patterns of numbers.
n Instead, humans identify computers using Uniform Resource Locators (URLs), a.k.a. “Web Addresses”.
n A domain name server (DNS) is a machine that keeps a table of names and corresponding IP addresses
DNSDNSn When a human types a URL into a browser, the
request is sent to a Domain Name Server (DNS), which then translates the URL to an IP address understood by computers.
n The DNS acts like a phonebook.
n When a human types a URL into a browser, the request is sent to a Domain Name Server (DNS), which then translates the URL to an IP address understood by computers.
n The DNS acts like a phonebook.
DNSDNS
– A command to find host name of an IP address and vice versa.
– Type nslookup at the DOS prompt and then hit enter.
n There are 13 DNS root servers in the world (mirrored)
n when an application specifies a host name,§ go to local domain name server and try lookup§ if not stored there, then local DNS requests address from a
root server§ root server determines appropriate name server & forwards
request
n nslookup:– A command to find host name of an IP address and
vice versa.– Type nslookup at the DOS prompt and then hit enter.
Anatomy of a URLAnatomy of a URL
http://www.cs.nmsu.edu/index.htm
file name
domainname
sub-subdomain
service name subdomain
protocol
What about Email Addresses?What about Email Addresses?
[email protected]@cs.nmsu.edu
usernameusername sub-domainsub-domain
domain namedomain namesub-sub domainsub-sub domain
Top Level Domain NamesTop Level Domain Names
.edu Educational Institution
.gov Governmental Agency
.mil Military Entity
.com Commercial Entity
.net Internet Service Provider
.org Non-Profit Organization
.edu Educational Institution
.gov Governmental Agency
.mil Military Entity
.com Commercial Entity
.net Internet Service Provider
.org Non-Profit Organization
Internet ProtocolsInternet Protocols
http:// World Wide Webmailto: E-mail addressftp:// File Transfer Protocoltelnet: Telnet
http:// World Wide Webmailto: E-mail addressftp:// File Transfer Protocoltelnet: Telnet
HTTPHTTPn HTTP is the protocol used by the WWWn When a user clicks on a hyperlink in their web
browser, this sends an HTTP command to the Web server.
n This command is called “GET” and it is used to get the contents of the web page and return them to the user’s browser.
n It is a very simple protocol– It relies on the TCP/IP functionality
n HTTP is the protocol used by the WWWn When a user clicks on a hyperlink in their web
browser, this sends an HTTP command to the Web server.
n This command is called “GET” and it is used to get the contents of the web page and return them to the user’s browser.
n It is a very simple protocol– It relies on the TCP/IP functionality
CachingCachingn browsers cache pages to save downloading
– maintain temporary storage (cache) for recent pages– when a page is requested, check to see if already in cache– if not in the cache, issue GET request
§ when response message arrives, display page and store in cache .– if already stored in the cache, send GET request with If-
Modified-Since header set to the data of the cached page§ when response message arrives,
– if status code 200, then display and store in cache– if status code 304, then display cached version instead
n browsers cache pages to save downloading
– maintain temporary storage (cache) for recent pages– when a page is requested, check to see if already in cache– if not in the cache, issue GET request
§ when response message arrives, display page and store in cache .– if already stored in the cache, send GET request with If-
Modified-Since header set to the data of the cached page§ when response message arrives,
– if status code 200, then display and store in cache– if status code 304, then display cached version instead
CookiesCookiesn A cookie is a collection of information about the
usern Web server can download a cookie to the client’s
machine in a response messagen When the user returns to URL on the same web
server, the browser returns the cookie data as part of its request
n A cookie is a collection of information about the user
n Web server can download a cookie to the client’s machine in a response message
n When the user returns to URL on the same web server, the browser returns the cookie data as part of its request
n Many e-commerce applications require persistent memory of customer interactions
– e.g., amazon.com§ remembers your name, credit card, past purchases, interests
Intranets and ExtranetsIntranets and Extranetsn Intranet:
– A network based on TCP/IP protocols belonging to an organization, usually a corporation, accessible only by the organization's members, employees, or others with authorization.
– Like the Internet itself, intranets are used to share information. Secure intranets are now the fastest-growing segment of the Internet because they are much less expensive to build and manage.
n Intranet:– A network based on TCP/IP protocols belonging to an
organization, usually a corporation, accessible only by the organization's members, employees, or others with authorization.
– Like the Internet itself, intranets are used to share information. Secure intranets are now the fastest-growing segment of the Internet because they are much less expensive to build and manage.
Intranets and ExtranetsIntranets and Extranetsn Extranets:
– An organization network that allows access to outside networks such as the Internet.
– It allows users outside a company to communicate with its employees over the Internet.
– An extranet may be viewed as an intermediate network between the Internet and an intranet.
n Extranets:– An organization network that allows access to outside
networks such as the Internet.
– It allows users outside a company to communicate with its employees over the Internet.
– An extranet may be viewed as an intermediate network between the Internet and an intranet.
FirewallFirewalln A system designed to prevent unauthorized access to or
from a private network. Firewalls can be implemented in both hardware and software, or a combination of both.
n Firewalls are frequently used to prevent unauthorized Internet users from accessing private networks connected to the Internet, especially intranets.
n All messages entering or leaving the intranet pass through the firewall, which examines each message and blocks those that do not meet the specified security criteria.
n A system designed to prevent unauthorized access to or from a private network. Firewalls can be implemented in both hardware and software, or a combination of both.
n Firewalls are frequently used to prevent unauthorized Internet users from accessing private networks connected to the Internet, especially intranets.
n All messages entering or leaving the intranet pass through the firewall, which examines each message and blocks those that do not meet the specified security criteria.
Thank YouQuestions ??Thank You
Questions ??
