Chapter 1 Introduction to Web Development

How web applications work ●

● ● ●

A web application consists of clients, a web server, and a network. The clients use web browsers to request web pages from the web server. The web server returns the pages that are requested to the browser. A local area network (LAN, sometimes intranet) directly connects computers that are near each other. A wide area network (WAN) is two or more LANs connected by routers. The Internet consists of many WANs that have been connected at Internet exchange points (IXP). There are several dozen of these worldwide.

●

An Internet service provider (ISP) owns a WAN and leases access to its network, It connects its WAN to the rest of the Internet at one or more IXPs.

Static versus dynamic web pages ●

●

A static web page is a page that displays the same content, regardless of the user viewing it ○ Pre-made: an HTML page ○ The focus of this class A dynamic web page can display different content to different viewers ○ Constructed on-the-fly by a web program ○ You will learn about/create these in CS320 ■ Requires knowledge of a programming language, often created using web frameworks

What happens when you browse a static web page? ●

The browser sends an HTTP request to the web server that includes the name of the file requested ○

●

The server retrieves the HTML code for that page and sends it back to the browser as an HTTP response ○

●

HTTP (Hypertext Transfer Protocol) is a web protocol: a structured way to exchange information

HTML (HyperText Markup Language) is used to code information about the page to be viewed.

The browser reads the HTML code and renders a web page on the screen for the user to view

What happens when you browse a dynamic web page ● ●

● ●

The web server receives a request and looks up the extension of the requested file to find out which application server to pass it to The application server runs a script that uses information sent in the request to get appropriate data from the database server and creates the HTML for a web page The application server sends the HTML to the web server which sends a response to your browser The browser displays the HTML

Some browsers ● ● ● ● ●

Internet Explorer Firefox Chrome Safari Opera

Some popular server-side languages and frameworks ● ● ● ● ●

PHP (CakePHP, Laravel, Symphony2 frameworks) ASP.NET (.NET framework) Ruby (Rails framework) Python (Django framework) Java (JavaEE, Spring MVC frameworks)

●

Some Servers ○ ○

Apache Microsoft IIS

One level higher: content management systems (CMS) These allow non-programmers to add/edit/manage site content. Setting them up does typically require programming knowledge, however. ● ● ●

Wordpress Joomla Drupal

Client-side JavaScript ● ● ●

JavaScript: a client-side programming(scripting) language Executed by the browser’s JavaScript engine Used for image swaps and rollovers, slide shows and carosels, input validation, dropdown menus, and much more! ○

● ● ●

www.disney.com

JavaScript code is sent from server along with the HTML Used with both dynamic and static web pages jQuery is a helpful JavaScript library

An introduction to HTML(HyperText Markup Language) ● ●

Used to define structure and content of a web page An HTML page is called an HTML document ○ Starts with a DOCTYPE declaration ○ The rest of the document consists of tags that identify the elements within the document ○ Tags start with an opening < , element name, some optional attributes and a closing >. They end with a closing . They can have content between the opening and closing tags. ○ The basic structure consists of an opening html tag, a head tag, and a body tag, and other tags nested within these tags. The head and body tags are nested within the html tag.

CSS: Cascading Style Sheets ● ● ●

Allows separating style from content Determines the fonts, colors, borders, spacing, and layout of pages Comprised of rules like the one below

body{ width: 100px; height: 200px; }

URLs

Text Editors ● ● ●

Windows: Notepad++ Mac: TextWrangler All: Atom, Sublime (not free)

●

Browser tools:

Chrome, Firefox: view element, view source

Uploading your web pages ● You will deploy your web pages to cs1, our student web server for CS120 ● The whole world can see your work!!