Sally Kyvernitis

Web Development

• HTML Pages (contain HTML, CSS, JavaScript)

• IDE for Web Development

• Browser Caching

• Internet (and the TCP/IP Suite of Protocols)

• Publishing and Serving Up HTML Pages

• Web Server

• Database

• Summary

Web Development - Outline

Web Developers • Write programs for the client side (HTML pages that include

CSS for styling and JavaScript for browser functionality).

– Web pages are intentionally limited (cannot write to client machines

except for cookies, cannot directly access a network or shared

database).

• Write programs for the server side – we’ll use Java/JSP, but

other options include python, C# (.NET), PHP, and ruby.

– Server programs don’t have the above limitations.

– Server “pages” used to include user interface, but now they primarily

just provide data (called Web APIs).

• Publish their programs.

HTML Pages • HTML pages contain

– HTML: content and structure of content.

• HTML stands for HyperText Markup Language.

• HyperText is really just linked text and other content (e.g.,

images, video).

– CSS: styling (Cascading Style Sheets)

– JavaScript: browser functionality

• HTML pages can make Web API calls to server side

programs that can access a database. We’ll use

Java/JSP pages for our Web APIs.

Simplest Web Development IDE

• IDE stands for Interactive Development Environment

• The Simplest IDE for Client Side Web Development:

– You could use Notepad, save a web page with a .html extension, then

double click on the file to see the page rendered in a browser.

– The browser would show the URL as the full path and file name of the

file. It would not show “localhost” as domain name. No web server

software serves up the page.

• The only problem with this is that notepad would not provide

any context sensitive error messages, nor would it provide lists

of valid language components.

• Also, you would not be able to write/run any server side

programs.

Better Web Development IDE

• We prefer the NetBeans Bundle because it offers

• a context sensitive editor with help and error messages for

HTML, CSS, and JavaScript (and more).

• Lets you “View” a HTML page (launches it to a browser).

• In addition to the NetBeans editor/compiler, the NetBeans

Bundle also includes this server software (pre-configured

to work together – must “Run” not View the page.

– Apache Web Server (needed to make AJAX calls)

– Glassfish JSP application server (needed once we start

writing Java/JSP Web APIs)

AJAX • Years ago, every link on a web page would cause a

whole new page to be downloaded (from a web server). When filling out a form, after clicking “submit”, you’d get a whole new page (looked like the old one) with possible validation errors.

• Now, we use something called AJAX which is a technique whereby JavaScript code makes an HTTP request for data (not for a whole page, no user interface). When data arrives, the JS code incorporates that data into the web page.

• The format of the data is typically JSON which is easy to use in JavaScript.

Client Side Debugging

• To debug HTML pages (HTML, CSS, or

JavaScript), press F12 from in Chrome to open

up the debugger.

• Click on Elements if you want to see the CSS

style rules that are being applied to any HTML

element on your page).

• Click on Console if you want to see JavaScript

error messages or debug output.

Browser Caching

• Browsers perform “caching” of artifacts (like style

sheets or images) in order to speed up the viewing

experience. This is great for users but can be

problematic for web developers:

– When testing a page, the browser might be using a previous

version of your style sheet.

– Suppose your page references a huge image file (1-2

megabytes). Because the image is cached by your browser,

you do not realize that first time visitors to your page would

experience a very slow page load.

How to Stop Browser Caching

• To stop Browser Caching while developing (when you would

normally have the F12 Chrome developer tool open), click on

Network (from Chrome’s developer tool), then select “Disable

Cache”.

• This will disable the cache but only when the Chrome

developer tool is open (F12).

The Internet

• The internet is a group of connected networks.

• A network is a group of connected computers/devices.

• A device that’s on more than one network is called a router.

• Messages pass from one router to the next until they reach the destination network and computer (see next slide).

• The internet is not hierarchical. There are many paths from one computer to another. So, if one path is not available, there are many other ways to get to the destination.

• Each computer on the internet gets a (unique) IP address. – Every IP address can be converted to a domain name and vice versa.

http://computer.howstuffworks.com/internet/basics/internet-infrastructure.htm 12

High level diagram - shows only routers (not all the devices of the internet).

Red line shows a possible route from source computer to destination.

TCP/IP Suite

The internet is governed by the TCP/IP suite of protocols:

• A protocol is a set of rules for communication between devices.

• HTTP: Hyper Text Transfer Protocol (web pages requested by browsers like

Chrome and provided by web server software like Apache)

• FTP: File Transfer Protocol transmits files between computers.

• SSL: Secure Sockets Layer adds a layer of encryption to most of the other

protocols, e.g.,https (secure http), SFTP (secure file transfer protocol).

Other protocols in TCP/IP

• TELNET: Terminal emulation protocol (provides remote logon)

• LDAP: Like a file server available from the internet.

• DNS: Domain Name System (resolves domain names to IP addresses)

• And much more…

Publishing HTML Pages • After testing your web pages from your local IDE, you’ll publish your

files to a web server.

• To publish your web site, you copy your HTML (and related) files from

your local machine to your web server (cis-linux2.temple.edu) using

WinSCP (PC) or CyberDuck (MAC).

• Both of these programs implement SFTP (Secure File Transfer Protocol).

• Note that cis-linux2.temple.edu is just a domain name that translates to

this IP address: 129.32.95.123

• Just for fun, type this into the address bar of your browser:

129.32.95.123/~sallyk

You’ll find it shows you the same page as if you had typed

cis-linux2.temple.edu/~sallyk

How Apache Serves Up HTML Pages

• A user types in the URL for a page they wish to see.

– The domain of our web sites will be cis-linux2.temple.edu.

• cis-linux2.temple.edu constantly runs web server software

(Apache) that waits for HTTP requests. The requests include:

• What page is being requested (domain name/folder/page name)

• The return address (IP address of the requesting browser).

• Apache finds the page and sends it (along with any other

reference items like images or style sheets) back to the

requester (this is called the HTTP response).

• On unix servers, Apache is the commonly used web server. On

windows servers, it is IIS (Internet Information Server).

Serving Up HTML Pages

Databases

• Every student’s web application will access a MySQL

database (that will be created for them by the CIS

Dept).

• Rather than telneting into the database server and

typing in raw SQL commands, you’ll install MySQL

Workbench on your development machine. MySQL

Workbench provides a Graphical User Interface (GUI)

that lets you design and populate your database.

Web APIs

• We’ll write our server side programs in Java/JSP.

Java/JSP has an advantage over other server side

languages (php, ruby, python) in that it is compiled

and strongly typed – so we don’t have to spend extra

effort checking to ensure we have the data type we

expect.

• Our Web APIs can access the database and can be

invoked by the client side (JavaScript code using the

AJAX technique).

AJAX Call (to a JSP page that’s a Web API)

Web Host Computer

Client PC

Internet

Web Server SW (eg, IIS or Apache)

JSP App Server (tomcat or glassfish) runs JSP

page

Browser (JS code)

1.Request for JSP

Web API

File Server

3. JSP Page

5. Page output

(JSON)

2.Request for

JSP Web API

6. JSON

DB Server

4. DB Access?

Summary (1 of 3) • Write web pages that include HTML (content/structure), CSS

(styling), and JavaScript (functionality).

• Design and populate a database using MySQL Workbench (which

we installed on our development machines). This provides a GUI

that connects to the MySQL Database Management System

running on a Temple server.

• Type in some data in the JSON web data format.

• Write JavaScript code that invokes the JSON file using a technique

called AJAX.

• Write Java/JSP server side Web APIs that access databases and

output data in JSON web data format.

• Write JavaScript code that invokes the Web APIs using AJAX.

Summary (2 of 3) • To write web sites, we install the NetBeans bundle on our

development machines. It includes this software, nicely pre-

configured to work together:

– NetBeans editor/compiler helps identify syntax errors in HTML, CSS,

JavaScript, JSON, JSP, and java. It also compiles our Java code.

– Apache, web server software. Once our pages start making AJAX calls, we

must Run and not View our web pages because AJAX makes an HTTP

request and we need Apache involved to respond to the HTTP request.

– Glassfish, JSP application server software. Once we start writing Web APIs

in Java/JSP, we need Glassfish to compile and run our JSP pages.

Summary (3 of 3) • The internet is governed by the TCP/IP suite of protocols

which includes:

• HTTP (HyperText Transfer Protocol) which governs browser requests of

web pages and server responses to such requests.

• FTP (File Transfer Protocol) which we use to publish our web pages.

• SSL (Secure Sockets Layer) which is used to add encryption to the

other protocols (HTTPS, SFTP), making the internet more secure.

• As web developers, we don’t have to be too concerned about

most of the “magic” that makes the internet work, but we

should know what things run where (might explain why some

things run slowly or not at all). And it provides us with

context for the environment in which our web sites run.