Contents

  1. Fundamentals of Web Development
  2. Fundamentals of Web Development
  3. Brief Table of Contents
  4. Table of Contents
  5. Preface
    1. What Is Web Development?
    2. What’s New in the Third Edition?
    3. Features of the Book
    4. Organization of the Book
    5. Pathways through this Book
    6. For the Instructor
    7. For the Student
    8. Why This Book?
  6. Visual Walkthrough
  7. 1 Introduction to Web Development
    1. Chapter Objectives
    2. 1.1 A Complicated Ecosystem
    3. 1.2 Definitions and History
      1. 1.2.1 A Short History of the Internet
      2. 1.2.2 The Birth of the Web
      3. 1.2.3 Web Applications in Comparison to Desktop Applications
      4. 1.2.4 From Static to Dynamic (and Back to Static)
    4. 1.3 The Client-Server Model
      1. 1.3.1 The Client
      2. 1.3.2 The Server
      3. 1.3.3 Server Types
      4. 1.3.4 Real-World Server Installations
      5. 1.3.5 Cloud Servers
    5. 1.4 Where Is the Internet?
      1. 1.4.1 From the Computer to Outside the Home
      2. 1.4.2 From the Home to the Ocean’s Edge
      3. 1.4.3 How the Internet Is Organized Today
    6. 1.5 Working in Web Development
      1. 1.5.1 Roles and Skills
        1. Hardware Architect/Network Architect/Systems Engineer
        2. System Administrator
        3. Database Administrator/Data Architect
        4. Security Specialist/Consultant/Expert
        5. Developer/Programmer
        6. Front-End Developer/UX Developer
        7. Software Engineer
        8. UX Designer/UI Designer/Information Architect
        9. Tester/Quality Assurance
        10. SEO Specialist
        11. Content Strategists/Marketing Technologist
        12. Project Manager/Product Manager
        13. Business Analyst
        14. Nontechnical Roles
      2. 1.5.2 Types of Web Development Companies
        1. Hosting Companies
        2. Design Companies
        3. Website Solution Companies
        4. Vertically Integrated Companies
        5. Start-Up Companies
        6. Internal Web Development
    7. 1.6 Chapter Summary
      1. 1.6.1 Key Terms
      2. 1.6.2 Review Questions
      3. 1.6.3 References
  8. 2 How the Web Works
    1. Chapter Objectives
    2. 2.1 Internet Protocols
      1. 2.1.1 A Layered Architecture
      2. 2.1.2 Link Layer
      3. 2.1.3 Internet Layer
      4. 2.1.4 Transport Layer
      5. 2.1.5 Application Layer
    3. 2.2 Domain Name System
      1. 2.2.1 Name Levels
      2. 2.2.2 Name Registration
      3. 2.2.3 Address Resolution
    4. 2.3 Uniform Resource Locators
      1. 2.3.1 Protocol
      2. 2.3.2 Domain
      3. 2.3.3 Port
      4. 2.3.4 Path
      5. 2.3.5 Query String
      6. 2.3.6 Fragment
    5. 2.4 Hypertext Transfer Protocol
      1. 2.4.1 Headers
      2. 2.4.2 Request Methods
      3. 2.4.3 Response Codes
    6. 2.5 Web Browsers
      1. 2.5.1 Fetching a web page
      2. 2.5.2 Browser Rendering
      3. 2.5.3 Browser Caching
      4. 2.5.4 Browser features
      5. 2.5.5 Browser Extensions
    7. 2.6 Web Servers
      1. 2.6.1 Operating Systems
      2. 2.6.2 Web Server Software
      3. 2.6.3 Database Software
      4. 2.6.4 Scripting Software
    8. 2.7 Chapter Summary
      1. 2.7.1 Key Terms
      2. 2.7.2 Review Questions
      3. 2.7.3 References
  9. 3 Introduction
    1. Chapter Objectives
    2. 3.1 What Is HTML and Where Did It Come From?
      1. 3.1.1 XHTML
      2. 3.1.2 HTML5
    3. 3.2 HTML Syntax
      1. 3.2.1 Elements and Attributes
      2. 3.2.2 Nesting HTML Elements
    4. 3.3 Semantic Markup
    5. 3.4 Structure of HTML Documents
      1. 3.4.1 Doctype
      2. 3.4.2 Head and Body
    6. 3.5 Quick Tour of HTML Elements
      1. 3.5.1 Headings
      2. 3.5.2 Paragraphs and Divisions
      3. 3.5.3 Links
      4. 3.5.4 URL Relative Referencing
      5. 3.5.5 Inline Text Elements
      6. 3.5.6 Images
      7. 3.5.7 Character Entities
      8. 3.5.8 Lists
    7. 3.6 HTML5 Semantic Structure Elements
      1. 3.6.1 Header and Footer
      2. 3.6.2 Navigation
      3. 3.6.3 Main
      4. 3.6.4 Articles and Sections
      5. 3.6.5 Figure and Figure Captions
      6. 3.6.6 Aside
      7. 3.6.7 Details and Summary
      8. 3.6.8 Additional Semantic Elements
    8. 3.7 Chapter Summary
      1. 3.7.1 Key Terms
      2. 3.7.2 Review Questions
      3. 3.7.3 Hands-On Projects
        1. Project 1: Simple Single Page
          1. Difficulty Level: Beginner
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Using Semantic Elements
          1. Difficulty Level: Beginner
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3: HTML Site
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
  10. 4 CSS 1: Selectors and Basic Styling
    1. Chapter Objectives
    2. 4.1 What Is CSS?
      1. 4.1.1 Benefits of CSS
      2. 4.1.2 CSS Versions
      3. 4.1.3 Browser Adoption
    3. 4.2 CSS Syntax
      1. 4.2.1 Selectors
      2. 4.2.2 Properties
      3. 4.2.3 Values
    4. 4.3 Location of Styles
      1. 4.3.1 Inline Styles
      2. 4.3.2 Embedded Style Sheet
      3. 4.3.3 External Style Sheet
    5. 4.4 Selectors
      1. 4.4.1 Element Selectors
      2. 4.4.2 Class Selectors
      3. 4.4.3 Id Selectors
      4. 4.4.4 Attribute Selectors
      5. 4.4.5 Pseudo-Element and Pseudo-Class Selectors
      6. 4.4.6 Contextual Selectors
    6. 4.5 The Cascade: How Styles Interact
      1. 4.5.1 Inheritance
      2. 4.5.2 Specificity
      3. 4.5.3 Location
    7. 4.6 The Box Model
      1. 4.6.1 Block versus Inline Elements
      2. 4.6.2 Background
      3. 4.6.3 Borders and Box Shadow
      4. 4.6.4 Margins and Padding
      5. 4.6.5 Box Dimensions
    8. 4.7 CSS Text Styling
      1. 4.7.1 Font Family
      2. 4.7.2 Font Sizes
      3. 4.7.3 Font Weight
      4. 4.7.4 Paragraph Properties
    9. 4.8 CSS Frameworks and Variables
      1. 4.8.1 What is a CSS Framework?
      2. 4.8.2 CSS Variables
    10. 4.9 Chapter Summary
      1. 4.9.1 Key Terms
      2. 4.9.2 Review Questions
      3. 4.9.3 Hands-On Practice
        1. Project 1: Simple Styling
          1. Difficulty Level: Beginner
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Using Boxes
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3: Home Page Prototype
          1. Difficulty Level: Advanced
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 4.9.4 References
  11. 5 HTML 2: Tables and Forms
    1. Chapter Objectives
    2. 5.1 HTML Tables
      1. 5.1.1 Basic Table Structure
      2. 5.1.2 Spanning Rows and Columns
      3. 5.1.3 Additional Table Elements
      4. 5.1.4 Using Tables for Layout
    3. 5.2 Styling Tables
      1. 5.2.1 Table Borders
      2. 5.2.2 Boxes and Zebras
    4. 5.3 Introducing Forms
      1. 5.3.1 Form Structure
      2. 5.3.2 How Forms Work
      3. 5.3.3 Query Strings
      4. 5.3.4 The <form> Element
    5. 5.4 Form Control Elements
      1. 5.4.1 Text Input Controls
      2. 5.4.2 Choice Controls
        1. Select Lists
        2. Radio Buttons
        3. Checkboxes
      3. 5.4.3 Button Controls
      4. 5.4.4 Specialized Controls
        1. Number and Range
        2. Color
      5. 5.4.5 Date and Time Controls
    6. 5.5 Table and Form Accessibility
      1. 5.5.1 Accessible Tables
      2. 5.5.2 Accessible Forms
    7. 5.6 Styling and Designing Forms
      1. 5.6.1 Styling Form Elements
      2. 5.6.2 Form Design
    8. 5.7 Validating User Input
      1. 5.7.1 Types of Input Validation
      2. 5.7.2 Notifying the User
      3. 5.7.3 How to Reduce Validation Errors
      4. 5.7.4 Where to Perform Validation
    9. 5.8 Chapter Summary
      1. 5.8.1 Key Terms
      2. 5.8.2 Review Questions
      3. 5.8.3 Hands-On Practice
        1. Project 1: Book Rep Customer Relations Management
          1. difficulty level: Beginners
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Art Store
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3: Share Your Travel Photos
          1. Difficulty Level: Intermediate
            1. Overview
            2. Guidance and Testing
  12. 6 Web Media
    1. Chapter Objectives
    2. 6.1 Representing Digital Images
      1. 6.1.1 Image Types
      2. 6.1.2 Color Models
        1. RGB
        2. CMYK
        3. HSL
        4. Opacity
        5. Gradients
    3. 6.2 Image Concepts
      1. 6.2.1 Color Depth
      2. 6.2.2 Image Size
      3. 6.2.3 Display Resolution
    4. 6.3 File Formats
      1. 6.3.1 JPEG
      2. 6.3.2 GIF
        1. 8-Bit or Less Color
        2. Transparency
        3. Animation
      3. 6.3.3 PNG
      4. 6.3.4 SVG
      5. 6.3.5 Other Formats
    5. 6.4 Audio and Video
      1. 6.4.1 Media Concepts
      2. 6.4.2 Browser Video Support
      3. 6.4.3 Browser Audio Support
    6. 6.5 Working with Color
      1. 6.5.1 Picking Colors
        1. 6.5.2 Define Shades
    7. 6.6 Chapter Summary
      1. 6.6.1 Key Terms
      2. 6.6.2 Review Questions
      3. 6.6.3 Hands-On Practice
        1. Project 1: Resizing
          1. Difficulty Level: Basic
            1. Overview
            2. Instructions
            3. Testing
        2. Project 2: Art Store
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Testing
        3. Project 3: Share Your Travel Photos
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Testing
  13. 7 CSS 2: Layout
    1. Chapter Objectives
    2. 7.1 Older Approaches to CSS Layout
      1. 7.1.1 Floating Elements
      2. 7.1.2 Positioning Elements
      3. 7.1.3 Overlapping and Hiding Elements
    3. 7.2 Flexbox Layout
      1. 7.2.1 Flex Containers and Flex Items
      2. 7.2.2 Use Cases for Flexbox
    4. 7.3 Grid Layout
      1. 7.3.1 Specifying the Grid Structure
      2. 7.3.2 Explicit Grid Placement
      3. 7.3.3 Cell Properties
      4. 7.3.4 Nested Grids
      5. 7.3.5 Grid Areas
      6. 7.3.6 Grid and Flexbox Together
    5. 7.4 Responsive Design
      1. 7.4.1 Setting Viewports
      2. 7.4.2 Media Queries
      3. 7.4.3 Scaling Images
    6. 7.5 CSS Effects
      1. 7.5.1 Transforms
      2. 7.5.2 Filters
      3. 7.5.3 Transitions
      4. 7.5.4 Animations
    7. 7.6 CSS Preprocessors
      1. 7.6.1 The Basics of Sass
        1. Variables and Types
        2. Nesting
      2. 7.6.2 Mixins and Functions
      3. 7.6.3 Modules
    8. 7.7 Chapter Summary
      1. 7.7.1 Key Terms
      2. 7.7.2 Review Questions
      3. 7.7.3 Hands-On Practice
        1. Project 1: Book CRM
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Difficulty Level: Intermediate
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3: CSS Grid
          1. Difficulty Level: Advanced
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 7.7.4 References
  14. 8 JavaScript 1: Language Fundamentals
    1. Chapter Objectives
    2. 8.1 What Is JavaScript and What Can It Do?
      1. 8.1.1 Client-Side Scripting
      2. 8.1.2 JavaScript’s History
      3. 8.1.3 JavaScript and Web 2.0
      4. 8.1.4 JavaScript in Contemporary Software Development
    3. 8.2 Where Does JavaScript Go?
      1. 8.2.1 Inline JavaScript
      2. 8.2.2 Embedded JavaScript
      3. 8.2.3 External JavaScript
      4. 8.2.4 Users without JavaScript
        1. The <NoScript> Tag
    4. 8.3 Variables and Data Types
      1. 8.3.1 JavaScript Output
      2. 8.3.2 Data Types
      3. 8.3.3 Built-In Objects
      4. 8.3.4 Concatenation
    5. 8.4 Conditionals
      1. 8.4.1 Truthy and Falsy
    6. 8.5 Loops
      1. 8.5.1 While and do . . . while Loops
      2. 8.5.2 For Loops
    7. 8.6 Arrays
      1. 8.6.1 Iterating an array using for . . . of
      2. 8.6.2 Array Destructuring
    8. 8.7 Objects
      1. 8.7.1 Object Creation Using Object Literal Notation
      2. 8.7.2 Object Creation Using Object Constructor
      3. 8.7.3 Object Destructuring
        1. Spread Syntax and Object Destructuring
      4. 8.7.4 JSON
    9. 8.8 Functions
      1. 8.8.1 Function Declarations vs. Function Expressions
        1. Default Parameters
        2. Rest Parameters
      2. 8.8.2 Nested Functions
      3. 8.8.3 Hoisting in JavaScript
      4. 8.8.4 Callback Functions
      5. 8.8.5 Objects and Functions Together
      6. 8.8.6 Function Constructors
      7. 8.8.7 Arrow Syntax
        1. Should I Use Arrow Functions?
        2. Changes to “this” in Arrow Functions
    10. 8.9 Scope and Closures in JavaScript
      1. 8.9.1 Scope in JavaScript
        1. Block Scope
        2. Global Scope
        3. Function/Local Scope
        4. Globals by Mistake
      2. 8.9.2 Closures in JavaScript
    11. 8.10 Chapter Summary
      1. 8.10.1 Key Terms
      2. 8.10.2 Review Questions
      3. 8.10.3 Hands-On Practice
        1. Project 1: Art Store
          1. Difficulty Level: Beginner
            1. Overview
            2. Instructions
            3. Test
        2. Project 2: Photo Sharing Site
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Test
        3. Project 3: Stocks
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Test
      4. 8.10.4 References
  15. 9 JavaScript 2: Using JavaScript
    1. Chapter Objectives
    2. 9.1 The Document Object Model (DOM)
      1. 9.1.1 Nodes and NodeLists
      2. 9.1.2 Document Object
      3. 9.1.3 Selection Methods
      4. 9.1.4 Element Node Object
    3. 9.2 Modifying the DOM
      1. 9.2.1 Changing an Element’s Style
      2. 9.2.2 InnerHTML vs textContent vs DOM ­Manipulation
      3. 9.2.3 DOM Manipulation Methods
      4. 9.2.4 DOM Timing
    4. 9.3 Events
      1. 9.3.1 Implementing an Event Handler
      2. 9.3.2 Page Loading and the DOM
      3. 9.3.3 Event Object
      4. 9.3.4 Event Propagation
      5. 9.3.5 Event Delegation
      6. 9.3.6 Using the Dataset Property
    5. 9.4 Event Types
      1. 9.4.1 Mouse Events
      2. 9.4.2 Keyboard Events
      3. 9.4.3 Form Events
      4. 9.4.4 Media Events
      5. 9.4.5 Frame Events
    6. 9.5 Forms in JavaScript
      1. 9.5.1 Responding to Form Movement Events
      2. 9.5.2 Responding to Form Changes Events
      3. 9.5.3 Validating a Submitted Form
        1. Empty Field Validation
        2. Number Validation
      4. 9.5.4 Submitting Forms
    7. 9.6 Regular Expressions
      1. 9.6.1 Regular Expression Syntax
      2. 9.6.2 Extended Example
    8. 9.7 Chapter Summary
      1. 9.7.1 Key Terms
      2. 9.7.2 Review Questions
      3. 9.7.3 Hands-On Practice
        1. Project 1: Enhanced Media Player
          1. Difficulty Level: Beginner
            1. Overview
            2. Instructions
            3. Test
        2. Project 2: Painting Viewer
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Test
        3. Project 3: Stock Portfolio Dashboard
          1. Difficulty Level: Advanced
            1. Overview
            2. Instructions
            3. Test
      4. 9.7.4 References
  16. 10 JavaScript 3: Additional Features
    1. Chapter Objectives
    2. 10.1 Array Functions
      1. 10.1.1 forEach
      2. 10.1.2 Find, Filter, Map, and Reduce
        1. Find
        2. Filter
        3. Map
        4. Reduce
      3. 10.1.3 Sort
    3. 10.2 Prototypes, Classes, and Modules
      1. 10.2.1 Using Prototypes
        1. Using Prototypes to Extend Other Objects
      2. 10.2.2 Classes
        1. Extending a Class
      3. 10.2.3 Modules
    4. 10.3 Asynchronous Coding with JavaScript
      1. 10.3.1 Fetching Data from a Web API
        1. Checking for Errors
        2. Common Mistakes with Fetch
        3. Multiple Fetches
        4. Cross-Origin Resource Sharing
        5. Fetching Using Other HTTP Methods
        6. Adding a Loading Animation
      2. 10.3.2 Promises
        1. Creating a Promise
        2. Working with Multiple Promises
      3. 10.3.3 Async and Await
    5. 10.4 Using Browser APIs
      1. 10.4.1 Web Storage API
      2. 10.4.2 Web Speech API
      3. 10.4.3 GeoLocation
    6. 10.5 Using External APIs
      1. 10.5.1 Google Maps
      2. 10.5.2 Charting with Plotly.js
    7. 10.6 Chapter Summary
      1. 10.6.1 Key Terms
      2. 10.6.2 Review Questions
      3. 10.6.3 Hands-On Practice
        1. Project 1: Text Viewer
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Text Viewer
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3: Stock Dashboard
          1. Difficulty Level: Advanced
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 10.6.4 References
  17. 11 JavaScript 4: React
    1. Chapter Objectives
    2. 11.1 JavaScript Front-End Frameworks
      1. 11.1.1 Why Do We Need Frameworks?
      2. 11.1.2 React, Angular, and Vue
    3. 11.2 Introducing React
      1. 11.2.1 React Components
        1. Functional Components
        2. Class Components
    4. 11.3 Props, State, Behavior, and Forms
      1. 11.3.1 Props
        1. Passing Complex Objects via Props
      2. 11.3.2 State
      3. 11.3.3 Behaviors
        1. Event Handling in Class Components
        2. Passing Data to Event Handlers
        3. Event-Driven Conditional Rendering
        4. Using Hooks for State
      4. 11.3.4 Forms in React
        1. Controlled Form Components
        2. Uncontrolled Form Components
      5. 11.3.5 Component Data Flow
    5. 11.4 React Build Approach
      1. 11.4.1 Build Tools
      2. 11.4.2 Create React App
        1. Overview
      3. 11.4.3 Other React Build Approaches
    6. 11.5 React Lifecycle
      1. 11.5.1 Fetching Data
    7. 11.6 Extending React
      1. 11.6.1 Routing
      2. 11.6.2 CSS in React
      3. 11.6.3 Other Approaches to State
        1. Context Provider
        2. React Redux
    8. 11.7 Chapter Summary
      1. 11.7.1 Key Terms
      2. 11.7.2 Review Questions
      3. 11.7.3 Hands-On Practice
        1. Project 1: Editor
          1. Difficulty Level: Beginner
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Favorites List
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3: Stock Dashboard
          1. Difficulty Level: Advanced
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 11.7.4 References
  18. 12 Server-Side Development 1: PHP
    1. Chapter Objectives
    2. 12.1 What Is Server-Side Development?
      1. 12.1.1 Front End versus Back End
      2. 12.1.2 Common Server-Side Technologies
    3. 12.2 PHP Language Fundamentals
      1. 12.2.1 PHP Tags
        1. PHP Comments
      2. 12.2.2 Variables and Data Types
      3. 12.2.3 Writing to Output
      4. 12.2.4 Concatenation
        1. printf
    4. 12.3 Program Control
      1. 12.3.1 if . . . else
      2. 12.3.2 switch . . . case
      3. 12.3.3 while and do . . . while
      4. 12.3.4 for
      5. 12.3.5 Alternate Syntax for Control Structures
      6. 12.3.6 Include Files
        1. Scope within Include Files
    5. 12.4 Functions
      1. 12.4.1 Function Syntax
      2. 12.4.2 Invoking a Function
      3. 12.4.3 Parameters
        1. Parameter Default Values
        2. Passing Parameters by Reference
        3. Parameter-Type Declarations
      4. 12.4.4 Variable Scope within Functions
    6. 12.5 Arrays
      1. 12.5.1 Defining and Accessing an Array
      2. 12.5.2 Multidimensional Arrays
      3. 12.5.3 Iterating through an Array
      4. 12.5.4 Adding and Deleting Elements
        1. Checking if a Value Exists
    7. 12.6 Classes and Objects
      1. 12.6.1 Terminology
      2. 12.6.2 Defining Classes
      3. 12.6.3 Instantiating Objects
      4. 12.6.4 Properties
      5. 12.6.5 Constructors
      6. 12.6.6 Method
      7. 12.6.7 Visibility
      8. 12.6.8 Static Members
      9. 12.6.9 Inheritance
        1. Referencing Base Class Members
    8. 12.7 $_GET and $_POST Superglobal Arrays
      1. 12.7.1 Superglobal Arrays
      2. 12.7.2 Determining If Any Data Sent
      3. 12.7.3 Accessing Form Array Data
      4. 12.7.4 Using Query Strings in Hyperlinks
      5. 12.7.5 Sanitizing Query Strings
    9. 12.8 Working with the HTTP Header
      1. 12.8.1 Redirecting Using Location Header
      2. 12.8.2 Setting the Content-Type Header
        1. Returning JSON Data
        2. Outputting Custom Images
    10. 12.9 Chapter Summary
      1. 12.9.1 Key Terms
      2. 12.9.2 Review Questions
      3. 12.9.3 Hands on Practice
        1. Project 1: Arrays
          1. Difficulty Level: Beginner
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Form and Response
          1. Difficulty Level: Beginner
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3: Working with HTTP Headers
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 12.9.4 Reference
  19. 13 Server-Side Development 2: Node.js
    1. Chapter Objectives
    2. 13.1 Introducing Node.js
      1. 13.1.1 Node Advantages
        1. JavaScript Everywhere
        2. Push Architectures
        3. Nonblocking Architectures
        4. Rich Ecosystem of Tools and Code
        5. Broad Adoption
      2. 13.1.2 Node Disadvantages
    3. 13.2 First Steps with Node
      1. 13.2.1 Simple Node Application
      2. 13.2.2 Adding Express
      3. 13.2.3 Environment Variables
    4. 13.3 Creating an API in Node
      1. 13.3.1 Simple API
      2. 13.3.2 Adding Routes
      3. 13.3.3 Separating Functionality into Modules
    5. 13.4 Creating a CRUD API
      1. 13.4.1 Passing Data to an API
      2. 13.4.2 API Testing Tools
    6. 13.5 Working with Web Sockets
    7. 13.6 View Engines
    8. 13.7 Serverless Approaches
      1. 13.7.1 What Is Serverless?
      2. 13.7.2 Benefits of Serverless Computing
      3. 13.7.3 Serverless Technologies
        1. Databases-as-a-Service
        2. Platform-as-a-Service
        3. Functions-as-a-Service
    9. 13.8 Chapter Summary
      1. 13.8.1 Key Terms
      2. 13.8.2 Review Questions
      3. 13.8.3 Hands-On Practice
        1. Project 1
          1. Difficulty Level: Beginner
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 13.8.4 References
  20. 14 Working with Databases
    1. Chapter Objectives
    2. 14.1 Databases and Web Development
      1. 14.1.1 The Role of Databases in Web Development
    3. 14.2 Managing Databases
      1. 14.2.1 Command-Line Interface
      2. 14.2.2 phpMyAdmin
      3. 14.2.3 MySQL Workbench
      4. 14.2.4 SQLite Tools
      5. 14.2.5 MongoDB Tools
    4. 14.3 SQL
      1. 14.3.1 Database Design
      2. 14.3.2 SELECT Statement
      3. 14.3.3 INSERT, UPDATE, and DELETE Statements
      4. 14.3.4 Transactions
        1. Local Transactions
        2. Distributed Transactions
      5. 14.3.5 Data Definition Statements
      6. 14.3.6 Database Indexes and Efficiency
    5. 14.4 Working with SQL in PHP
      1. 14.4.1 Connecting to a Database
        1. Storing Connection Details
      2. 14.4.2 Handling Connection Errors
        1. PDO Exception Modes
      3. 14.4.3 Executing the Query
      4. 14.4.4 Processing the Query Results
        1. Fetching into an Object
      5. 14.4.5 Freeing Resources and Closing Connection
      6. 14.4.6 Working with Parameters
        1. Sanitizing User Data
        2. Prepared Statements
      7. 14.4.7 Using Transactions
      8. 14.4.8 Designing Data Access
    6. 14.5 NoSQL Databases
      1. 14.5.1 Why (and Why Not) Choose NoSQL?
      2. 14.5.2 Types of NoSQL Systems
        1. Key-Value Stores
        2. Document Stores
        3. Column Stores
        4. Graph Stores
    7. 14.6 Working with MongoDB in Node
      1. 14.6.1 MongoDB Features
      2. 14.6.2 MongoDB Data Model
      3. 14.6.3 Working with the MongoDB Shell
      4. 14.6.4 Accessing MongoDB Data in Node.js
    8. 14.7 Chapter Summary
      1. 14.7.1 Key Terms
      2. 14.7.2 Review Questions
      3. 14.7.3 Hands-On Practice
        1. Project 1: Share Your Travel Photos
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Test
        3. Project 3
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 14.7.4 References
  21. 15 Managing State
    1. Chapter Objectives
    2. 15.1 The Problem of State in Web Applications
    3. 15.2 Passing Information in HTTP
      1. 15.2.1 Passing Information via the URL
      2. 15.2.2 Passing Information via HTTP Header
    4. 15.3 Cookies
      1. 15.3.1 How Do Cookies Work?
      2. 15.3.2 Using Cookies in PHP
      3. 15.3.3 Using Cookies in Node and Express
      4. 15.3.4 Persistent Cookie Best Practices
    5. 15.4 Session State
      1. 15.4.1 How Does Session State Work?
      2. 15.4.2 Session Storage and Configuration
      3. 15.4.3 Session State in PHP
      4. 15.4.4 Session State in Node
    6. 15.5 Caching
      1. 15.5.1 Page Output Caching
      2. 15.5.2 Application Data Caching
      3. 15.5.3 Redis as Caching Service
    7. 15.6 Chapter Summary
      1. 15.6.1 Key Terms
      2. 15.6.2 Review Questions
      3. 15.6.3 Hands-On Practice
        1. Project 1: Cookies
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Art Store
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 15.6.4 References
  22. 16 Security
    1. Chapter Objectives
    2. 16.1 Security Principles
      1. 16.1.1 Information Security
        1. The CIA Triad
        2. Security Standards
      2. 16.1.2 Risk Assessment and Management
        1. Actors, Impacts, Threats, and Vulnerabilities
        2. Assessing Risk
      3. 16.1.3 Security Policy
      4. 16.1.4 Business Continuity
        1. Admin Password Management
        2. Backups and Redundancy
        3. Geographic Redundancy
        4. Stage Mock Events
        5. Auditing
      5. 16.1.5 Secure by Design
        1. Code Reviews
        2. Unit Testing
        3. Pair Programming
        4. Security Testing
        5. Secure by Default
      6. 16.1.6 Social Engineering
      7. 16.1.7 Authentication Factors
        1. Single versus Multifactor Authentication
    3. 16.2 Approaches to Web Authentication
      1. 16.2.1 Basic HTTP Authentication
      2. 16.2.2 Form-Based Authentication
      3. 16.2.3 HTTP Token Authentication
      4. 16.2.4 Third-Party Authentication
        1. OAuth
    4. 16.3 Cryptography
      1. 16.3.1 Substitution Ciphers
        1. Caesar
        2. Modern Block Ciphers
      2. 16.3.2 Public Key Cryptography
        1. Diffie-Hellman Key Exchange
        2. RSA
      3. 16.3.3 Digital Signatures
    5. 16.4 Hypertext Transfer Protocol Secure (HTTPS)
      1. 16.4.1 SSL/TLS Handshake
      2. 16.4.2 Certificates and Authorities
        1. Domain-Validated (DV) Certificates
        2. Organization-Validated (OV) Certificates
        3. Extended-Validation (EV) Certificates
      3. 16.4.3 Migrating to HTTPS
        1. Mixed Content
        2. Redirects from Old Site
        3. Preventing HTTP Access
    6. 16.5 Security Best Practices
      1. 16.5.1 Credential Storage
        1. Using a Hash Function
        2. Salting the Hash
        3. Using a Slow Hash Function
      2. 16.5.2 Monitor Your Systems
        1. System Monitors
        2. Access Monitors
        3. Automated Intrusion Blocking
      3. 16.5.3 Audit and Attack Thyself
    7. 16.6 Common Threat Vectors
      1. 16.6.1 Brute-Force Attacks
      2. 16.6.2 SQL Injection
        1. Sanitize Input
        2. Least Possible Privileges
      3. 16.6.3 Cross-Site Scripting (XSS)
        1. Reflected XSS
        2. Stored XSS
        3. Filtering User Input
        4. Escape Dangerous Content
      4. 16.6.4 Cross-Site Request Forgery (CSRF)
      5. 16.6.5 Insecure Direct Object Reference
      6. 16.6.6 Denial of Service
        1. Distributed DoS Attack (DDoS)
      7. 16.6.7 Security Misconfiguration
        1. Out-of-Date Software
        2. Open Mail Relays
        3. More Input Attacks
        4. Virtual Open Mail Relay
        5. Arbitrary Program Execution
    8. 16.7 Chapter Summary
      1. 16.7.1 Key Terms
      2. 16.7.2 Review Questions
      3. 16.7.3 Hands-On Practice
        1. Project 1: Exploit Testing and Repair
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: PHP Security
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3: Node Security
          1. Difficulty Level: Advanced
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 16.7.4 References
  23. 17 DevOps and Hosting
    1. Chapter Objectives
    2. 17.1 DevOps: Development and Operations
      1. 17.1.1 Continuous Integration, Delivery, and Deployment
      2. 17.1.2 Testing
      3. 17.1.3 Infrastructure as Code
      4. 17.1.4 Microservice architecture
    3. 17.2 Domain Name Administration
      1. 17.2.1 Registering a Domain Name
        1. WHOIS
        2. Private Registration
      2. 17.2.2 Updating the Name Servers
        1. Checking Name Servers
      3. 17.2.3 DNS Record Types
        1. Mapping Records
        2. Mail Records
        3. Authoritative Records
        4. Validation Records
      4. 17.2.4 Reverse DNS
    4. 17.3 Web Server Hosting Options
      1. 17.3.1 Shared Hosting
        1. Simple Shared Hosting
        2. Virtualized Shared Hosting
      2. 17.3.2 Dedicated Hosting
      3. 17.3.3 Collocated Hosting
        1. In-house Hosting
      4. 17.3.4 Cloud Hosting
    5. 17.4 Virtualization
      1. 17.4.1 Server Virtualization
        1. Containers
      2. 17.4.2 Cloud Virtualization
    6. 17.5 Linux and Web Server Configuration
      1. 17.5.1 Configuration
      2. 17.5.2 Starting and Stopping the Server
        1. Applying Configuration Changes
      3. 17.5.3 Connection Management
        1. Ports
      4. 17.5.4 Data Compression
      5. 17.5.5 Encryption and SSL
      6. 17.5.6 Managing File Ownership and Permissions
    7. 17.6 Request and Response Management
      1. 17.6.1 Managing Multiple Domains on One Web Server
      2. 17.6.2 Handling Directory Requests
      3. 17.6.3 Responding to File Requests
      4. 17.6.4 URL Redirection
        1. Public Redirection
        2. Internal Redirection
        3. Conditional URL Rewriting
      5. 17.6.5 Managing Access with .htaccess
      6. 17.6.6 Server Caching
    8. 17.7 Web Monitoring
      1. 17.7.1 Internal Monitoring
        1. Webserver Logging
        2. Log Rotation
      2. 17.7.2 External Monitoring
    9. 17.8 Chapter Summary
      1. 17.8.1 Key Terms
      2. 17.8.2 Review Questions
      3. 17.8.3 Hands-On Practice
        1. Project 1: Register a Domain and Setup Hosting
          1. Difficulty Level: Easy
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Configure DNS for a Mail Server
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 17.8.4 References
  24. 18 Tools and Traffic
    1. Chapter Objectives
    2. 18.1 The History and Anatomy of Search Engines
      1. 18.1.1 Search Engine Overview
    3. 18.2 Web Crawlers and Scrapers
      1. 18.2.1 Scrapers
        1. URL Scrapers
        2. Email Scrapers
        3. Vulnerablity Scrapers
        4. Word Scrapers
    4. 18.3 Indexing and Reverse Indexing
    5. 18.4 PageRank and Result Order
    6. 18.5 Search Engine Optimization
      1. 18.5.1 Title
      2. 18.5.2 Meta Tags
        1. Http-Equiv
        2. Description
        3. Robots
      3. 18.5.3 URLs
        1. Bad SEO URLs
        2. Descriptive Path Components
        3. Descriptive File Names or Folders
        4. Apache Redirection
      4. 18.5.4 Site Design
        1. Website Structure
      5. 18.5.5 Sitemaps
      6. 18.5.6 Anchor Text
      7. 18.5.7 Images
      8. 18.5.8 Content
      9. 18.5.9 Black-Hat SEO
        1. Keyword Stuffing
        2. Hidden Content
        3. Paid Links
        4. Doorway Pages
        5. Hidden Links
        6. Comment Spam
        7. Link Farms
        8. Link Pyramids
        9. Google Bombing
        10. Cloaking
        11. Duplicate Content
    7. 18.6 Social Networks
      1. 18.6.1 How Did We Get Here?
        1. Early Digital Networking
        2. The Evolution of Social Networks
    8. 18.7 Social Network Integration
      1. 18.7.1 Basic Social Media Presence
        1. Home Pages
        2. Links and Logos
        3. URL Shortening
      2. 18.7.2 Facebook’s Social Plugins
        1. Register and Plugin
        2. Like Button
        3. XFBML
        4. Follow Button
        5. Comment Stream
      3. 18.7.3 Open Graph
        1. Open Graph Meta Tags
      4. 18.7.4 Twitter’s Widgets
        1. Tweet This Button
        2. Follow Me Button
        3. Twitter Timeline
      5. 18.7.5 Advanced Social Network Integration
    9. 18.8 Content Management Systems
      1. 18.8.1 Components of a Managed Website
      2. 18.8.2 Types of CMS
    10. 18.9 WordPress Overview
      1. 18.9.1 Post and Page Management
      2. 18.9.2 WYSIWYG Editors
      3. 18.9.3 Template Management
      4. 18.9.4 Menu Control
      5. 18.9.5 User Management and Roles
      6. 18.9.6 User Roles
        1. Content Creator
        2. Content Publisher
        3. Site Manager
        4. Super Administrator
        5. WordPress Roles
      7. 18.9.7 Workflow and Version Control
      8. 18.9.8 Asset Management
      9. 18.9.9 Search
      10. 18.9.10 Upgrades and Updates
    11. 18.10 WordPress Technical Overview
      1. 18.10.1 Installation
      2. 18.10.2 File Structure
        1. Multiple Sites with One WordPress Installation
      3. 18.10.3 WordPress Nomenclature
        1. Plugins
      4. 18.10.4 WordPress Template Hierarchy
    12. 18.11 Modifying Themes
      1. 18.11.1 Changing Theme Files
        1. Tinkering with a Footer
    13. 18.12 Web Advertising Fundamentals
      1. 18.12.1 Web Advertising 101
        1. Ad Networks
        2. Ad Types
        3. Creating Ads
      2. 18.12.2 Web Advertising Economy
        1. Web Advertising Commodities
        2. Web Commodity Markets
    14. 18.13 Support Tools and Analytics
      1. 18.13.1 Search Engine Webmaster Tools
      2. 18.13.2 Analytics
        1. Metrics
        2. Internal Analytics
      3. 18.13.3 Third-Party Analytics
        1. Flow Analysis
      4. 18.13.4 Performance Tuning and Rating
        1. Performance (Speed)
        2. Accessibility
        3. Seo
        4. Best Practices
    15. 18.14 Chapter Summary
      1. 18.14.1 Key Terms
      2. 18.14.2 Review Questions
      3. 18.14.3 Hands-On Practice
        1. Project 1: Optimize the Art Store Site for Search Engines
          1. Difficulty Level: Easy
            1. Overview
            2. Instructions
            3. Guidance and Testing
        2. Project 2: Integrate with Social Widgets
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
        3. Project 3: Convert Your Project to WordPress
          1. Difficulty Level: Intermediate
            1. Overview
            2. Instructions
            3. Guidance and Testing
      4. 18.14.4 References
  25. Index
    1. A
    2. B
    3. C
    4. D
    5. E
    6. F
    7. G
    8. H
    9. I
    10. J
    11. K
    12. L
    13. M
    14. N
    15. O
    16. P
    17. Q
    18. R
    19. S
    20. T
    21. U
    22. V
    23. W
    24. X
    25. Z
  26. Credits

List of Figures

  1. The figure shows two pages from a textbook, with detailed descriptions.
  2. The figure shows two pages from a textbook, with detailed descriptions.
  3. The figure shows three pages from a textbook, with detailed descriptions.
  4. The figure shows two pages from a textbook with detailed description.
  5. Figure 1.1: The web development ecosystem
  6. Figure 1.2: The web as a subset of the Internet
  7. Figure 1.3: Telephone network as example of circuit switching
  8. Figure 1.4: Internet network as example of packet switching
  9. Figure 1.5: Intranet versus Internet
  10. Figure 1.6: Static website (first generation)
  11. Figure 1.7: Dynamic Server-Side website
  12. Figure 1.8: Why are programs needed
  13. Figure 1.9: Dynamic websites today
  14. Figure 1.10: Static websites today
  15. Figure 1.11: Evolving complexity in web applications
  16. Figure 1.12: Peer-to-peer model
  17. Figure 1.13: Different types of server
  18. Figure 1.14: Server farm
  19. Figure 1.15: Sample server rack
  20. Figure 1.16: Hypothetical data center
  21. Figure 1.17: Benefits of Content Delivery Networks
  22. Figure 1.18: Cloud servers
  23. Figure 1.19: Internet hardware from the home computer to the local Internet provider
  24. Figure 1.20: Cable types
  25. Figure 1.21: From the home to the ocean’s edge
  26. Figure 1.22: The figure describes global network infrastructure.
  27. Figure 1.23: The figure illustrates a relationship between networks.
  28. Figure 1.24: Sample ISP peering
  29. Figure 1.25: Web development roles and skills
  30. Figure 1.26: Web development companies
  31. Figure 1.27: The Github website
  32. Figure 2.1: Four-layer network model
  33. Figure 2.2: IPv4 and IPv6 comparison
  34. Figure 2.3: Port address translation
  35. Figure 2.4: TCP packets
  36. Figure 2.5: Different approaches to uploading files
  37. Figure 2.6: DNS overview
  38. Figure 2.7: Domain levels
  39. Figure 2.8: Domain name registration process
  40. Figure 2.9: Domain name address resolution process
  41. Figure 2.10: URL components
  42. Figure 2.11: Query string components
  43. Figure 2.12: HTTP illustrated
  44. Figure 2.13: User-Agent components
  45. Figure 2.14: GET versus POST requests
  46. Figure 2.15: Browser parsing HTML and making subsequent requests
  47. Figure 2.16: Visualizing the key events in the rendering timeline for a website
  48. Figure 2.17: Illustration of browser caching, using cached resources
  49. Figure 3.1 : HTML timeline
  50. Figure 3.2 : Sample ad-hoc markup languages
  51. Figure 3.3 : W3C markup validation service
  52. Figure 3.4 : The parts of an HTML element
  53. Figure 3.5 : HTML document outline
  54. Figure 3.6 : Correct and incorrect ways of nesting HTML elements
  55. Figure 3.7 : Visualizing structure
  56. Figure 3.8 : One of the simplest possible HTML5 documents
  57. Figure 3.9 : Structure elements of an HTML5 document
  58. Figure 3.10 : Sample HTML5 document
  59. Figure 3.11 : Figure 3.10 in the browser
  60. Figure 3.12 : Example document outlines
  61. Figure 3.13 : Alternate CSS stylings of the same heading
  62. Figure 3.14 : Two parts of a link
  63. Figure 3.15 : Different link destinations
  64. Figure 3.16 : Using <div> elements to create a complex layout
  65. Figure 3.17 : Example site directory tree
  66. Figure 3.18 : The <img> element
  67. Figure 3.19 : List elements and their default rendering
  68. Figure 3.20 : Completed Test Your Knowledge #1
  69. Figure 3.21 : Sample <div>-based XHTML layout (with HTML5 equivalents)
  70. Figure 3.22 : Visualizing semantic structure
  71. Figure 3.23 : Sample layout using new HTML5 semantic structure elements
  72. Figure 3.24 : Articles and sections
  73. Figure 3.25 : The figure and figcaption elements in the browser
  74. Figure 3.26 : The details and summary elements
  75. Figure 3.27 : A WYSIWYG editor [Adobe Dreamweaver]
  76. Figure 3.28 : A Code Editor [Sublime Text]
  77. Figure 3.29 : A full IDE [Eclipse]
  78. Figure 3.30 : Cloud-Based Environment [CodeAnywhere]
  79. Figure 3.31 : Code Playground [CodePen]
  80. Figure 3.32 : Completed Project 1
  81. Figure 3.33 : Completed Project 2
  82. Figure 3.34 : Completed Project 3
  83. Figure 4.1: CSS-based responsive design
  84. Figure 4.2: CSS syntax
  85. Figure 4.3: Document outline/tree
  86. Figure 4.4: Id and class selector example
  87. Figure 4.5: Attribute selector example
  88. Figure 4.6: Styling a link using pseudo-class selectors
  89. Figure 4.7: Syntax of a descendant selection
  90. Figure 4.8: Contextual selectors in action
  91. Figure 4.9: Browser DevTools
  92. Figure 4.10: Completed Test Your Knowledge #1
  93. Figure 4.11: Inheritance
  94. Figure 4.12: More inheritance
  95. Figure 4.13: Using the inherit value
  96. Figure 4.14: Specificity
  97. Figure 4.15: Specificity algorithm
  98. Figure 4.16: Location
  99. Figure 4.17: CSS box model
  100. Figure 4.18: Block-level elements
  101. Figure 4.19: Inline elements
  102. Figure 4.20: Block and inline elements together
  103. Set 1: Image contains 1 line of code. Set 2: Image contains 4 lines of code.
  104. Figure 4.21: Background image properties
  105. Set 1: Image contains 4 lines of code. Set 2: Image contains 7 lines of code.
  106. Figure 4.22: Border and shadow properties
  107. Figure 4.23: Borders, margins, and padding provide element spacing and differentiation
  108. Set 1: Image contains 1 line of code. Set 2: Image contains 4 lines of code
  109. Figure 4.24: Collapsing vertical margins
  110. Figure 4.25: CSS TRBL (Trouble) shortcut
  111. Figure 4.26: Calculating an element’s true size
  112. Figure 4.27: Limitations of height property
  113. Figure 4.28: Overflow property
  114. Image contains 6 lines of code
  115. Figure 4.29: Box sizing via percents
  116. Figure 4.30: Completed Test Your Knowledge #2
  117. Figure 4.31: Specifying the font family
  118. Figure 4.32: The different font families
  119. Figure 4.33: Using percents and em units for font sizes
  120. Figure 4.34: Complications in calculating percents and em units
  121. Figure 4.35: Using rem units
  122. Figure 4.36: Using Google Fonts
  123. Figure 4.37: Sample text properties
  124. Set 1: Image contains 3 lines of code. Set 2: Image contains 6 lines of code.
  125. Set 1: Image contains 4 lines of code. Set 2: Image contains 5 lines of code.
  126. Figure 4.38: Completed Test Your Knowledge #3 competent
  127. Figure 4.39: Examples using only Materialize and Bootstrap classes
  128. Figure 4.40: Using a grid in print design
  129. Figure 4.41: Completed Project 1
  130. Figure 4.42: Completed Project 2
  131. Figure 4.43: Completed Project 3
  132. Figure 5.1: Examples of tables
  133. Figure 5.2: Basic table structure
  134. Figure 5.3: Adding table headings
  135. Figure 5.4: Spanning columns
  136. Figure 5.5: Spanning rows
  137. Figure 5.6: Additional table elements
  138. Figure 5.7: Styling table borders
  139. Figure 5.8: An example boxed table
  140. Figure 5.9: Hover effect and zebra stripes
  141. Image contains 6 lines of code and its output.
  142. Figure 5.10 Completed Test Your Knowledge #1 Figure 5.10 Full Alternative TextBackThe browser window has a tab titled Lab 5. The address bar reads, 127 dot 0 dot 0 dot 1 colon 5500 forward slash lab 05 hyphen test 01 dot h t m l. The table consists of 10 columns and 4 rows. The headings of the columns are as follows: hash, TEAMS, P, W, D, L, F, “A”, G D, and P t s. The headings tab is highlighted grey. The row entries are as follows. First row: Hash column, 1. TEAMS column, Liverpool. P column, 8. W column, 6. D column, 2. L column, 0. F column, 22. “A” column, 8. G D column, 14. P t s column, 20. Next row: Hash column, 2. TEAMS column, Manchester City. P column, 8. W column, 5. D column, 1. L column, 2. F column, 20. “A” column, 10. G D column, 10. P t s column, 16. Next row: Hash column, 3. TEAMS column, West Ham United. P column, 8. W column, 4. D column, 3. L column, 1. F column, 7. “A” column, 4. G D column, 3. P t s column, 15. Last row: Hash column, 4. TEAMS column, Arsenal. P column, 8. W column, 4. D column, 2. L column, 2. F column, 15. “A” column, 10. G D column, 5. P t s column, 14. The values in all the columns are aligned to the center of the columns, except for the TEAMS column, where the values are aligned to the left. The columns are equally spaced on either sides. An arrow labeled padding hyphen left colon 24 p x points to the left of the Hash column. The C S S code that corresponds to the headings tab is as follows: Line 1: background hyphen color colon hash E D E D E D semicolon Line 2: Padding colon 12 p x 0 semicolon height colon 40 p x. The C S S code that corresponds to the bottom of the table is as follows: Line 1: border hyphen bottom colon solid 2 p x hash E D E D E D semicolon. Line 2: border hyphen collapse colon collapse semicolon.Back
  143. Figure 5.11: Sample HTML form
  144. Figure 5.12: How forms work
  145. Figure 5.13: Query string data and its connection to the form elements
  146. Figure 5.14: URL encoding
  147. Figure 5.15: GET versus POST
  148. Figure 5.16: Text input controls
  149. Figure 5.17: Using the pattern attribute
  150. Figure 5.18: Using the <datalist> element
  151. Figure 5.19: Using the <select> element
  152. Figure 5.20: The value attribute
  153. Figure 5.21: Radio buttons
  154. Figure 5.22: Checkbox buttons
  155. Figure 5.23: Example button elements
  156. Figure 5.24: File upload control (in Chrome)
  157. Figure 5.25: Number and range input controls
  158. Figure 5.26: Displaying numbers using the <meter> and <progress> elements
  159. Figure 5.27: Color input control
  160. Figure 5.28: Date and time controls
  161. Figure 5.29: Completed Test Your Knowledge #2
  162. Figure 5.30: Associating labels and input elements
  163. Figure 5.31: Styling text and buttons controls
  164. Figure 5.32: Working with labels
  165. Figure 5.33: Form design guidelines
  166. Figure 5.34: Displaying error messages
  167. Figure 5.35: Indicating where an error is located
  168. Figure 5.36: Providing textual hints
  169. Figure 5.37: Using tool tips
  170. Figure 5.38: Using input masks
  171. Figure 5.39: HTML5 browser validation
  172. Figure 5.40: Visualizing levels of validation
  173. Figure 5.41: Version control software
  174. Figure 5.42: Git workflow
  175. Figure 5.43: Completed Project 1
  176. Figure 5.44: Completed Project 2
  177. Figure 5.45: Completed Project 3
  178. Figure 6.1: Pixels versus halftones
  179. Figure 6.2: Raster images
  180. Figure 6.3: Raster editors
  181. Figure 6.4: Vector images
  182. Figure 6.5: Resizing raster images versus vector images
  183. Figure 6.6: (A) RGB color model (B) CMYK color model
  184. Figure 6.7: Picking RGB colors
  185. Figure 6.8: Color gamut
  186. Figure 6.9: HSL color model
  187. Figure 6.10: Opacity settings
  188. Figure 6.11: Specifying the opacities shown in Figure 6.10 using CSS
  189. Figure 6.12: Example CSS gradients
  190. Figure 6.13: Visualizing image color depth
  191. Figure 6.14: Dithering
  192. Figure 6.15: Interpolating
  193. Figure 6.16: Enlarging versus reduction
  194. Figure 6.17: Resizing artwork in the browser versus resizing originals
  195. Figure 6.18: Interpolation algorithms
  196. Figure 6.19: Effect of display resolution versus monitor size
  197. Figure 6.20: Pixels in high-density displays
  198. Figure 6.21: JPEG file format
  199. Figure 6.22: JPEG artifacts
  200. Figure 6.23: JPEG and art work
  201. Figure 6.24: GIF file format
  202. Figure 6.25: Run-length compression
  203. Figure 6.26: Color palette
  204. Figure 6.27: Optimizing GIF images
  205. Figure 6.28: GIF transparency
  206. Figure 6.29: GIF transparency and anti-aliasing
  207. Figure 6.30: PNG transparency
  208. Figure 6.31: SVG example
  209. Figure 6.32: Cloud-Based Image Service (Cloudinary)
  210. Figure 6.33: Media encoding and containers
  211. Figure 6.34: Using the <video> element
  212. Figure 6.35: Using the <audio> element
  213. Figure 6.36: Practical color in web interfaces
  214. Figure 6.37: Example starting color palette
  215. Figure 6.38: Using HSL
  216. Figure 6.39: Completed Project 1
  217. Figure 6.40: Completed Project 2
  218. Figure 6.41: Completed Project 3
  219. Figure 7.1: Layout columns
  220. Figure 7.2: Floating an element
  221. Figure 7.3: Relative positioning
  222. Figure 7.4: Absolute positioning
  223. Figure 7.5: Absolute position is relative to nearest positioned ancestor container
  224. Figure 7.6: Using relative and absolute positioning
  225. Figure 7.7: Using the display property
  226. Figure 7.8: Comparing display to visibility
  227. Figure 7.9: Using hover with display
  228. Figure 7.10: Comparing flex and grid layout
  229. Figure 7.11: Using flexbox to simplify layout
  230. Figure 7.12: Flex containers and items
  231. Figure 7.13: The flexbox container (parent) properties
  232. Figure 7.14: The flexbox item (child) properties
  233. Set 1: Image contains 3 lines of code. Set 2: Image contains 4 lines of code. Set 3: Image contains 3 lines of code. Set 4: Image contains 3 lines of code.
  234. Set 1: Image contains 8 lines of code. Set 2: Image contains 4 lines of code. Set 3: Image contains 3 lines of code. Set 4: Image contains 3 lines of code.
  235. Figure 7.15: Implementing a card layout using flexbox
  236. Figure 7.16 Completed Test Your Knowledge #1 Figure 7.16 Full Alternative TextBackThe browser window has a tab titled Chapter 7. The address bar reads, 127 dot 0 dot 0 dot 1 colon 5501 forward slash lab 07 hyphen test 01 dot h t m l. The browser has an image spread across the background of the browser window and shows a text at the top left corner that reads, Site Title. The top right corner shows three small lines placed one below representing a button. The textbox labeled Find Your Dream is placed at the center of the background image. A button labeled GO is placed at the right end of the textbox.Back
  237. Figure 7.17: Introducing grid display
  238. Figure 7.18: Specifying column widths
  239. Figure 7.19: Using explicit grid item placement
  240. Figure 7.20: Aligning content within grid cell
  241. Figure 7.21: Aligning content within grid container
  242. Figure 7.22: Nested grids
  243. Figure 7.23: Using grid areas
  244. Figure 7.24: Using grid and flex together
  245. Figure 7.25: Completed Test Your Knowledge #2
  246. Figure 7.26: Responsive layouts
  247. Figure 7.27: Flexible layout adapting to browser widths
  248. Figure 7.28: Mobile scaling (without viewport)
  249. Figure 7.29: Setting the viewport
  250. Figure 7.30: Sample media query
  251. Figure 7.31: Media queries in action
  252. Figure 7.32: Responsive design patterns
  253. Figure 7.33: The <picture> element and responsive design
  254. Figure 7.34 Completed Test Your Knowledge #3 Figure 7.34 Full Alternative TextBackBrowser Window 1 appears on the top right of the figure. It has a user form data that has 2 blocks placed side-by-side, each occupying fifty percent of window.Block 1 has a dialog box appearing in the middle of the page placed over a background image. The dialog box has a level-1 heading that reads, Plan Type. Three textboxes are placed one below the other below the heading. Each of the textboxes has a text aligned to the left and a radio button aligned to the right. The text reads from top to bottom as follows: Free, Student, Professional.Block 2 has a level-1 heading that reads, Sign Up and is followed by a line of text. Three textboxes are placed one below the other below the heading. The textboxes are labeled as follows: Email, Password, Request Password. A button labeled Sign Up is placed below the third textbox. There is an additional text and 3 icons placed side-by-side at the bottom of the block.Note: Starting form looks good at desktop widths, but requires customization in media query for it to work at mobile widths.Browser Windows 2 appears at the bottom left of the Browser Window 1. It has a user form data that has 2 blocks placed one below other.Block 1 shows the dialog box that appears in block 1 of browser window 1 without the background image.Block 2 shows the 50 percent of the contents of block 2 in browser window 1. A vertical scrollbar at the right side of the browser window helps to see the rest of the content of the block.The contents of the blocks in browser window 2 appears larger than the contents in browser window 1. Note: Your media query needs to change the grid layout, remove the background image, change the base font size, and fine-tune some margins and padding.Back
  255. Figure 7.35: CSS transforms
  256. Figure 7.36: CSS3 perspective
  257. Figure 7.37: CSS filters in action
  258. Figure 7.38: A simple background-color transition on a button
  259. Figure 7.39: A sliding menu transition
  260. Figure 7.40: Transitioning several properties
  261. Figure 7.41: Transitions versus animations
  262. Figure 7.42: Animation example
  263. Figure 7.43: How Sass works
  264. Figure 7.44: Using mixins
  265. Figure 7.45: Blocks, elements, and modifiers
  266. Figure 7.46: Sample style guides
  267. Figure 7.47: Completed Project 1
  268. Figure 7.48: Completed Project 2
  269. Figure 7.49: Completed Project 3
  270. Figure 8.1: Downloading and executing a client-side JavaScript script
  271. Figure 8.2: Contemporary JavaScript coding
  272. Figure 8.3: Contemporary JavaScript coding
  273. Figure 8.4: Adding JavaScript to a page
  274. Figure 8.5: Variable declaration and assignment
  275. Figure 8.6: JavaScript output options
  276. Figure 8.7: Chrome JavaScript console
  277. Figure 8.8: Primitive types versus reference types
  278. Figure 8.9: let versus const
  279. Figure 8.10: The conditional (ternary) operator
  280. Figure 8.11: For loop
  281. Figure 8.12: JavaScript array with indexes and values illustrated
  282. Figure 8.13 Output from finished Test Your Knowledge #3 Figure 8.13 Full Alternative TextBackThe browser window titled Lab 8. The address text box reads: lab08 forward slash lab08 forward slash test03 dot h t m l.The browser contains two level-1 heading, and one paragraph. The browser starts with a level 1 heading that reads “Test Your Knowledge hash 3".Next is a level 1 heading that reads Output will be in the console.Next is a paragraph that reads “For bill of dollar 50 the tip should be $10. lab08 hyphen test03 dot j s colon 39 colon 5.For bill of dollar 150 the tip should be dollar 15. lab08 hyphen test03 dot j s colon 39 colon 5.For bill of dollar 20 the tip should be dollar 6. lab08 hyphen test03 dot j s colon 39 colon 5.For bill of dollar 500 the tip should be $50. lab08 hyphen test03 dot j s colon 39 colon 5.Back
  283. Figure 8.14: Objects containing other content
  284. Figure 8.15: JSON in contemporary web development
  285. Figure 8.16: Function hoisting in JavaScript
  286. Figure 8.17: Using a callback function
  287. Figure 8.18: Passing a function definition to another function
  288. Figure 8.19: Contextual meaning of the this keyword
  289. Figure 8.20: What happens with a constructor call of a function
  290. Figure 8.21: Array syntax overview
  291. Figure 8.22: The "this" keyword in arrow and non-arrow functions
  292. Figure 8.23: Global versus block scope
  293. Figure 8.24: Function versus global scope
  294. Figure 8.25: Visualizing scope
  295. Figure 8.26: Visualizing the problem
  296. Figure 8.27: Visualizing scope again
  297. Figure 8.28: Scope illustrated in the debugger
  298. Figure 8.29: Closures maintain lexical (design-time) scope
  299. Figure 8.30: Completed Project 1
  300. Figure 8.31: Completed Project 2
  301. Figure 8.32: Completed Project 3
  302. Figure 9.1: DOM tree
  303. Figure 9.2: DOM nodes
  304. Figure 9.3: Using the getElement selection methods
  305. Figure 9.4: Using querySelector and querySelectorAll selection methods
  306. Figure 9.5: Finished Test Your Knowledge #1
  307. Figure 9.6: Manipulating the CSS classes of an element
  308. Figure 9.7: DOM family relations
  309. Figure 9.8: Visualizing the DOM modification
  310. Figure 9.9: Finished Test Your Knowledge #2
  311. Figure 9.10: JavaScript event handling
  312. Figure 9.11: Event handling with NodeList arrays
  313. Figure 9.12: Using the Event object
  314. Figure 9.13: Event capture and bubbling
  315. Figure 9.14: Problems with event propagation
  316. Figure 9.15: Event delegation
  317. Figure 9.16: Finished Test Your Knowledge #3
  318. Figure 9.17: Lazy loading via frame events
  319. The figure consists of 4 browser windows that illustrate the transition of a webpage when a user interacts with the browser.
  320. The figure consists of a C S S code and an H T M L code.
  321. The figure consists of a JavaScript code.
  322. Figure 9.18: Responding to the focus and blur events
  323. Figure 9.19: Responding to the change events
  324. Figure 9.20: Properties of a select list
  325. Figure 9.21: Finished Test Your Knowledge #4
  326. Figure 9.22: Debugging within the FireFox browser
  327. Figure 9.23: Evaluating JavaScript performance in the Chrome browser
  328. Figure 9.24: JavaScript linters
  329. Figure 9.25 : Finished project 1
  330. Figure 9.26 : Finished project 2
  331. Figure 9.27 : Finished project 3
  332. Figure 10.1: How forEach() works
  333. Figure 10.2: Using the map() function
  334. Figure 10.3: The memory impact of functions in objects
  335. Figure 10.4: Using the prototype property
  336. Figure 10.5: Name conflicts in JavaScript
  337. Figure 10.6: Modules in JavaScript
  338. Figure 10.7: Finished Test Your Knowledge #2
  339. Figure 10.8: Web API versus web page
  340. Figure 10.9: Normal HTTP request–response loop
  341. Figure 10.10: Asynchronous data requests
  342. Figure 10.11: Illustration of a list being updated asynchronously
  343. Figure 10.12: Illustration of fetch behavior in the browser console
  344. Figure 10.13: Example of asynchronous request using fetch
  345. Figure 10.14: Common fetch mistake
  346. Figure 10.15: Process flow for fetching via POST example
  347. Figure 10.16: Adding a loading animation
  348. Figure 10.17: Test Your Knowledge #3
  349. Figure 10.18: Promises in real life and in JavaScript
  350. Figure 10.19: Example problem solved using promises
  351. Figure 10.20: Executing multiple Promises in parallel
  352. Figure 10.21: Potential performance benefits of parallel invocations of fetch
  353. Figure 10.22 : Common problems when using async . . . await
  354. Figure 10.23 : Completed Test Your Knowledge # 4
  355. Figure 10.24: Google Maps at work
  356. Figure 10.25: Finished extended example
  357. Figure 10.26: Transforming data for the chart
  358. Figure 10.27: Completed Project 1
  359. Figure 10.28: Completed Project 2
  360. Figure 10.29: Completed Project 3
  361. Figure 11.1: Virtual versus real DOM manipulations
  362. Figure 11.2: SPA using a framework
  363. Figure 11.3: Simple React example
  364. Figure 11.4: JSX to JavaScript conversion
  365. Figure 11.5: Composing an interface with React components
  366. Figure 11.6: Using props
  367. Figure 11.7: React state within a class component
  368. Figure 11.8: Conditional rendering of Listing 11.5
  369. Figure 11.10: Sharing data between components
  370. Figure 11.11: Data communication between components
  371. Figure 11.12: Implementing data flow between components
  372. Image contains 11 lines of code
  373. Figure 11.13: React via runtime conversion versus design-time conversion
  374. Figure 11.14: Problem of dependencies between JavaScript files
  375. Figure 11.15: Create React App
  376. Figure 11.16: React routing in action
  377. Figure 12.1: Front-end versus back-end
  378. Figure 12.2: Hosting a web server locally
  379. Figure 12.3: Running PHP server from the command line
  380. Figure 12.4: Using XAMPP
  381. Figure 12.5: Online PHP development environments
  382. Figure 12.6: More complicated concatenation examples explained
  383. Figure 12.7: Illustration of components in a printf statement and output
  384. Figure 12.8: Completed Test Your Knowledge #1
  385. Figure 12.9: The include files
  386. The figure consists of a block of code and its result in a browser.
  387. Figure 12.10: Pass by value versus pass by reference
  388. Figure 12.11: Completed Test Your Knowledge #2
  389. Figure 12.12: Visualization of a key-value array
  390. Figure 12.13: Explicitly assigning keys to array elements
  391. Figure 12.14: Array with strings as keys and integers as values
  392. Figure 12.15: Visualizing multidimensional arrays
  393. Set 1: Image contains 5 lines of code. Set 2: Image contains 7 lines of code. Set 3: Image contains 5 lines of code
  394. Image contains 12 lines of code
  395. Figure 12.16: Completed Test Your Knowledge #3
  396. Figure 12.17: Relationship between a class and its objects
  397. Figure 12.18: Sample ways to diagram a class using UML
  398. Figure 12.19: Visibility of class members
  399. Figure 12.20: A static property
  400. Figure 12.21: UML class diagrams showing inheritance
  401. Figure 12.22: Illustration of flow from HTML, to request, to PHP’s $_GET array
  402. Figure 12.23: Data flow from HTML form through HTTP request to PHP’s $_POST array
  403. Figure 12.24: URL encoding and decoding
  404. Figure 12.25: Form display and processing by the same PHP page
  405. Figure 12.26: Inefficient approach to displaying individual items
  406. Figure 12.27: Sensible approach to displaying individual items using query strings
  407. The image consists of 2 browser windows and a P H P code.
  408. The figure consists of a P H P code and an H T M L code.
  409. Figure 12.28: PHP Redirect using the Location header
  410. Figure 12.29: PHP creating a custom image
  411. Figure 12.30: Completed Project 1
  412. Figure 12.31: Completed Project 2
  413. Figure 12.32: Completed Project 3
  414. Figure 13.1: Example of a push web application
  415. Figure 13.2 : Blocking thread-based architecture
  416. Figure 13.3: Nonblocking thread-based architecture
  417. Figure 13.4: Handling high volume data changes in Node
  418. Figure 13.5: Running the Hello World example
  419. Figure 13.6: Static file server
  420. Figure 13.7: Middleware functions in Express
  421. Figure 13.8: Sending data to an API
  422. Figure 13.9: API testing tools
  423. Figure 13.10: Message flow using Socket.io
  424. Figure 13.11: Chat in the browser
  425. Figure 13.12: View Engines and Node
  426. Figure 13.13: Serverless computing analogy
  427. Figure 13.14: Functions-as-a-Service
  428. Figure 13.15: Completed Project #3
  429. Figure 14.1: Separating content from data
  430. Figure 14.2: How websites use databases
  431. Figure 14.3: Multiple ways to access MySQL are available
  432. Figure 14.4: MySQL command-line interface
  433. Figure 14.5: phpMyAdmin
  434. Figure 14.7: MySQL Workbench
  435. Figure 14.8: SQLite Tools
  436. Figure 14.9: A database table
  437. Figure 14.10: Diagramming a table
  438. Figure 14.11: Foreign keys link tables
  439. Figure 14.12: Diagramming a one-to-many relationship
  440. Figure 14.13: Implementing a many-to-many relationship
  441. Figure 14.14: SQL SELECT from a single table
  442. Figure 14.15: Using the WHERE clause
  443. Figure 14.16: SQL SELECT from multiple tables using an INNER JOIN
  444. Figure 14.17: Using GROUP BY with aggregate functions
  445. Figure 14.18: SQL INSERT, UPDATE, and DELETE
  446. Figure 14.19: Distributed transaction processing
  447. Figure 14.20: Visualization of a database index for our Books table
  448. Figure 14.21: Basic database connection algorithm
  449. Figure 14.22: Fetching from a result set
  450. Figure 14.23: Integrating user input data into a query
  451. The figure shows some code lines.
  452. Figure 14.24 Test Your Knowledge #1Figure 14.24 Full Alternative TextBackA browser window is shown here. The browser window has a tab titled Lab 14. The address bar reads, localhost forward slash lab 14 forward slash lab 14 hyphen test 01 dot p h p question mark museum equals 30. The browser window consists of two level-1 headings, one level-2 heading, a level-3 heading and four paragraphs. The browser window consists of two divisions that are placed side-by-side. Division 1 shows a level-2 heading that reads, "Filters.” The level-3 heading that reads, Museum” is placed below the level-2 heading. A textbox with a dropdown list that contains the value Rijksmuseum is placed below the level-3 heading. A button labeled Filter is placed below the textbox. Division 2 shows a level-1 heading that reads, "Paintings.” Four images of the paintings available in the museum labeled Rijksmuseum are placed one below the other along with their descriptions and the price amount in division 2 below the Paintings heading.Back
  453. Figure 14.25: Data in a key/value store
  454. Figure 14.26: Relational data versus document store data
  455. Figure 14.27: Contrast between row- and column-wise stores
  456. Figure 14.28: Relationships in a graph database
  457. Figure 14.29: Comparing relational databases to the MongoDB data model
  458. Figure 14.30: Running the MongoDB Shell
  459. Figure 14.31: Comparing a MongoDB query to an SQL query
  460. Figure 14.32: Problem of consistency in multiple data server environments
  461. Figure 14.33: Single master replication
  462. Figure 14.34: Failover clustering on master
  463. Figure 14.35: Multiple master replication
  464. Figure 14.36: Database sharding
  465. Figure 14.37: Completed Project 1
  466. Figure 14.38: Completed Project 3
  467. Figure 15.1: Illustrating the problem of state in web applications
  468. Figure 15.2: Desktop applications versus web applications
  469. Figure 15.3: What the web server sees
  470. Figure 15.4: Two approaches for passing data in a URL
  471. Figure 15.5: Recap of GET versus POST
  472. Figure 15.6: Uploading files
  473. Figure 15.7: Cookies at work
  474. Figure 15.8: Session state
  475. Figure 15.9: Session IDs
  476. Figure 15.10: Requests spread across multiple servers
  477. Figure 15.11: Shared session provider
  478. Image contains 17 lines of code
  479. Figure 15.12: Page output caching
  480. Figure 15.13: Use case for caching
  481. Figure 15.14: Caching in action
  482. Figure 15.15: Redis use cases
  483. Figure 15.16: Inconsistent cached data within a two-core CPU
  484. Figure 15.17: Write-through vs. write-back caching in web context
  485. Figure 15.18: Completed Project 1
  486. Figure 15.19: Completed Project 2
  487. Figure 16.1: The CIA triad: confidentiality, integrity, and availability
  488. Figure 16.2: Some examples of security input into the SDLC
  489. Figure 16.3: Basic HTTP Authentication
  490. Figure 16.4: The form authentication process
  491. Figure 16.5: Managing login status
  492. Figure 16.6: Stateless authentication using tokens
  493. Figure 16.7: JWT structure
  494. Figure 16.8: The steps required to register and authenticate a user using OAuth
  495. Figure 16.9: Alice transmitting to Bob with Eve intercepting the message
  496. Figure 16.10: Alice and Bob using symmetric encryption to transmit messages
  497. Figure 16.11: Caesar cipher for shift value of 3. HELLO becomes KHOOR
  498. Figure 16.12: Letter frequency in the English alphabet using Oxford English Dictionary summary9
  499. Figure 16.13: High-level illustration of the DES cipher
  500. Figure 16.14: Illustration of a simple Diffie-Hellman Key Exchange for g=2 and p=11
  501. Figure 16.15: Illustration of a digital signature flow
  502. Figure 16.16: Screenshot from Google’s Gmail service, using HTTPS
  503. Figure 16.17: SSL/TLS handshake
  504. Figure 16.18: The contents of a self-signed certificate for funwebdev.com
  505. Figure 16.19: The Firefox Certificate Authority Management interface
  506. Figure 16.20: Certificates in the browser
  507. Figure 16.21: Firefox warning that arises from a self-signed certificate
  508. Figure 16.22: HTTPS downgrade attack.
  509. Figure 16.23: Hashing and digests
  510. Figure 16.24: Rainbow tables
  511. Figure 16.25: Salting a password
  512. Figure 16.26: Remembering a user logon
  513. Figure 16.27: Screenshot of the Nagios web interface (green means OK)
  514. Figure 16.28: Illustration of a SQL injection attack (right) and intended usage (left)
  515. Figure 16.29: Illustration of a Reflection XSS attack
  516. Figure 16.30: Illustration of a stored XSS attack in action
  517. Figure 16.31: Cross-site request forgery attack
  518. Figure 16.32: Illustration of a Denial of Service (DoS) and a Distributed Denial of Service (DDoS) attack
  519. Figure 16.33: Illustrated virtual open relay exploit
  520. Figure 16.34: Illustrated exploit of a command-line pass-through of user input
  521. Figure 17.1: Continuous integration and deployment
  522. Figure 17.2: Workflow and architecture of the Selenium testing system
  523. Figure 17.3: Monolithic architecture
  524. Figure 17.4: Microservice architecture
  525. Figure 17.5: Illustration of the registrant information available to anyone in the WHOIS system
  526. Figure 17.6: Illustration of a private registration through a third party
  527. Figure 17.7: Annotated usage of the dig command
  528. Figure 17.8: Illustration of a zone file with A, AAAA, CName, MX, SOA, and SPF DNS records
  529. Figure 17.9: Annotated SPF string for funwebdev.com
  530. Figure 17.10: Simple shared hosting, with users having their own home folder
  531. Figure 17.11: Virtualized shared host, where each user has a virtual server of their own
  532. Figure 17.12: Multiple servers versus a virtualized server
  533. Figure 17.13: Type 1 and Type 2 hypervisors compared
  534. Figure 17.14: Vagrant
  535. Figure 17.15: Working with Vagrant
  536. Figure 17.16: Container-based virtualization
  537. Figure 17.17: Web server popularity
  538. Figure 17.18: Illustration of a reused connection in Apache
  539. Figure 17.19: Permission bits and the corresponding octal number
  540. Figure 17.20: How three sites are hosted on one IP address with VirtualHosts
  541. Figure 17.21: The ways of responding to a folder request
  542. Figure 17.22: Apache server using a redirect on a request
  543. Figure 17.23: Illustration of the RewriteRule syntax
  544. Figure 17.24: Internal URL rewriting rules as seen by the client
  545. Figure 17.25: Illustration of the RewriteCond directive matching an IP address
  546. Figure 17.26: Prompt for authentication from an .htaccess file
  547. Figure 18.1: Major components of a search engine
  548. Figure 18.2: Visualization of indexes on database tables
  549. Figure 18.3: Reverse index illustration
  550. Figure 18.4: Webpages A, B, C, and D and their links
  551. Figure 18.5: Illustration of two iterations of PageRank
  552. Figure 18.6: Iterations of PageRank with a rank sink (A)
  553. Figure 18.7: Sample search engine output
  554. Figure 18.8: A five-site link farm with rank equally distributed
  555. Figure 18.9: PageRank distribution in a link pyramid after two iterations
  556. Figure 18.10: Illustration of canonical URLs and relationships
  557. Figure 18.11: Illustration of email social networks
  558. Figure 18.12: Social network connection via multiple media, categories, and public broadcasts
  559. Figure 18.13: Screenshot of Facebook pages for this textbook
  560. Figure 18.14: Illustration of a URL shortening service
  561. Figure 18.15: Relationship between a plugin on your page and the resulting Facebook newsfeed items
  562. Figure 18.16: Screenshot of the Facebook Like social plugin
  563. Figure 18.17: Screenshot of story on a Facebook newsfeed, generated in response to clicking Like
  564. Figure 18.18: Illustration of Open Graph’s actors, apps, actions, and objects
  565. Figure 18.19: Output of the Facebook Open Graph Debugger and best guesses it will make
  566. Figure 18.20: Annotated relationship between some Open Graph tags and the story that appears in the Facebook newsfeed in response to liking a page
  567. Figure 18.21: The Tweet button
  568. Figure 18.22: Twitter Follow button
  569. Figure 18.23: Screenshot of the Twitter Widget code generator
  570. Figure 18.24: Illustration of an integrated Facebook web game
  571. Figure 18.25: The challenge of managing a WWW site without hosting considerations and the benefit of a web content management system
  572. Figure 18.26: Screenshot of the post editor in WordPress
  573. Figure 18.27: Screenshot of the TinyMCE WYSIWYG editor included with WordPress
  574. Figure 18.28: The HTML view of a WYSIWYG editor
  575. Figure 18.29: TinyMCE with a style dropdown box using the styles from a predefined CSS stylesheet
  576. Figure 18.30: Multiple templates and their relationship to content
  577. Figure 18.31: Typical roles and responsibilities in a web CMS
  578. Figure 18.32: Multiple dashboard menus for the five default roles in WordPress
  579. Figure 18.33: Illustration of multiple people working in a workflow
  580. Figure 18.34: Media management portal in WordPress
  581. Figure 18.35: Screenshot of the WordPress directory structure
  582. Figure 18.36: Difference in installation between a single and multisite
  583. Figure 18.37: Illustration of WordPress components used to generate HTML output
  584. Figure 18.38: A simplified illustration of the default template selection hierarchy in WordPress
  585. Figure 18.39: Relationship between the parties in web advertising
  586. Figure 18.40: Real-time auctions and ad placements in an advertising network
  587. Figure 18.41: Screenshot from Bing’s webmaster tools showing a range of stats
  588. Figure 18.42: Screenshot of the top of the AWStats analytics report
  589. Figure 18.43: A dashboard from the Google Analytics tool
  590. Figure 18.44: Showing where users flow through and leave a website.
  591. Figure 18.45: The Lighthouse tool showing an initial analysis for funwebdev.com
  592. Figure 18.46: Thumbnails sequences generated by Lighthouse while analyzing the ­loading time of funwebdev.com
  593. Figure 18.47: The Lighthouse tool showing the final analysis for funwebdev.com
  594. Figure 18.48: Hadoop big data processing
  595. Figure 18.49: Portion of the Art Store with Facebook Like, and Tweet This widgets
  596. Figure 18.50: Illustration of eventual end goal of Project 18.1

List of Tables

  1. Table 14.2 Approximate MongoDB equivalences to RDMS

Landmarks

  1. Brief Table of Contents
  2. Front Matter
  3. Start of Content
  4. Back Matter
  5. List of Figures
  6. List of Tables

Page List

  1. i
  2. ii
  3. iii
  4. iv
  5. v
  6. vi
  7. vii
  8. viii
  9. ix
  10. x
  11. xi
  12. xii
  13. xiii
  14. xiv
  15. xv
  16. xvi
  17. xvii
  18. xviii
  19. xix
  20. xx
  21. xxi
  22. xxii
  23. xxiii
  24. xxiv
  25. xxv
  26. xxvi
  27. xxvii
  28. xxviii
  29. xxix
  30. xxx
  31. xxxi
  32. xxxii
  33. xxxiii
  34. xxxiv
  35. xxxv
  36. xxxvi
  37. xxxvii
  38. xxxviii
  39. xxxix
  40. xl
  41. 1
  42. 2
  43. 3
  44. 4
  45. 5
  46. 6
  47. 7
  48. 8
  49. 9
  50. 10
  51. 11
  52. 12
  53. 13
  54. 14
  55. 15
  56. 16
  57. 17
  58. 18
  59. 19
  60. 20
  61. 21
  62. 22
  63. 23
  64. 24
  65. 25
  66. 26
  67. 27
  68. 28
  69. 29
  70. 30
  71. 31
  72. 32
  73. 33
  74. 34
  75. 35
  76. 36
  77. 37
  78. 38
  79. 39
  80. 40
  81. 41
  82. 42
  83. 43
  84. 44
  85. 45
  86. 46
  87. 47
  88. 48
  89. 49
  90. 50
  91. 51
  92. 52
  93. 53
  94. 54
  95. 55
  96. 56
  97. 57
  98. 58
  99. 59
  100. 60
  101. 61
  102. 62
  103. 63
  104. 64
  105. 65
  106. 66
  107. 67
  108. 68
  109. 69
  110. 70
  111. 71
  112. 72
  113. 73
  114. 74
  115. 75
  116. 76
  117. 77
  118. 78
  119. 79
  120. 80
  121. 81
  122. 82
  123. 83
  124. 84
  125. 85
  126. 86
  127. 87
  128. 88
  129. 89
  130. 90
  131. 91
  132. 92
  133. 93
  134. 94
  135. 95
  136. 96
  137. 97
  138. 98
  139. 99
  140. 100
  141. 101
  142. 102
  143. 103
  144. 104
  145. 105
  146. 106
  147. 107
  148. 108
  149. 109
  150. 110
  151. 111
  152. 112
  153. 113
  154. 114
  155. 115
  156. 116
  157. 117
  158. 118
  159. 119
  160. 120
  161. 121
  162. 122
  163. 123
  164. 124
  165. 125
  166. 126
  167. 127
  168. 128
  169. 129
  170. 130
  171. 131
  172. 132
  173. 133
  174. 134
  175. 135
  176. 136
  177. 137
  178. 138
  179. 139
  180. 140
  181. 141
  182. 142
  183. 143
  184. 144
  185. 145
  186. 146
  187. 147
  188. 148
  189. 149
  190. 150
  191. 151
  192. 152
  193. 153
  194. 154
  195. 155
  196. 156
  197. 157
  198. 158
  199. 159
  200. 160
  201. 161
  202. 162
  203. 163
  204. 164
  205. 165
  206. 166
  207. 167
  208. 168
  209. 169
  210. 170
  211. 171
  212. 172
  213. 173
  214. 174
  215. 175
  216. 176
  217. 177
  218. 178
  219. 179
  220. 180
  221. 181
  222. 182
  223. 183
  224. 184
  225. 185
  226. 186
  227. 187
  228. 188
  229. 189
  230. 190
  231. 191
  232. 192
  233. 193
  234. 194
  235. 195
  236. 196
  237. 197
  238. 198
  239. 199
  240. 200
  241. 201
  242. 202
  243. 203
  244. 204
  245. 205
  246. 206
  247. 207
  248. 208
  249. 209
  250. 210
  251. 211
  252. 212
  253. 213
  254. 214
  255. 215
  256. 216
  257. 217
  258. 218
  259. 219
  260. 220
  261. 221
  262. 222
  263. 223
  264. 224
  265. 225
  266. 226
  267. 227
  268. 228
  269. 229
  270. 230
  271. 231
  272. 232
  273. 233
  274. 234
  275. 235
  276. 236
  277. 237
  278. 238
  279. 239
  280. 240
  281. 241
  282. 242
  283. 243
  284. 244
  285. 245
  286. 246
  287. 247
  288. 248
  289. 249
  290. 250
  291. 251
  292. 252
  293. 253
  294. 254
  295. 255
  296. 256
  297. 257
  298. 258
  299. 259
  300. 260
  301. 261
  302. 262
  303. 263
  304. 264
  305. 265
  306. 266
  307. 267
  308. 268
  309. 269
  310. 270
  311. 271
  312. 272
  313. 273
  314. 274
  315. 275
  316. 276
  317. 277
  318. 278
  319. 279
  320. 280
  321. 281
  322. 282
  323. 283
  324. 284
  325. 285
  326. 286
  327. 287
  328. 288
  329. 289
  330. 290
  331. 291
  332. 292
  333. 293
  334. 294
  335. 295
  336. 296
  337. 297
  338. 298
  339. 299
  340. 300
  341. 301
  342. 302
  343. 303
  344. 304
  345. 305
  346. 306
  347. 307
  348. 308
  349. 309
  350. 310
  351. 311
  352. 312
  353. 313
  354. 314
  355. 315
  356. 316
  357. 317
  358. 318
  359. 319
  360. 320
  361. 321
  362. 322
  363. 323
  364. 324
  365. 325
  366. 326
  367. 327
  368. 328
  369. 329
  370. 330
  371. 331
  372. 332
  373. 333
  374. 334
  375. 335
  376. 336
  377. 337
  378. 338
  379. 339
  380. 340
  381. 341
  382. 342
  383. 343
  384. 344
  385. 345
  386. 346
  387. 347
  388. 348
  389. 349
  390. 350
  391. 351
  392. 352
  393. 353
  394. 354
  395. 355
  396. 356
  397. 357
  398. 358
  399. 359
  400. 360
  401. 361
  402. 362
  403. 363
  404. 364
  405. 365
  406. 366
  407. 367
  408. 368
  409. 369
  410. 370
  411. 371
  412. 372
  413. 373
  414. 374
  415. 375
  416. 376
  417. 377
  418. 378
  419. 379
  420. 380
  421. 381
  422. 382
  423. 383
  424. 384
  425. 385
  426. 386
  427. 387
  428. 388
  429. 389
  430. 390
  431. 391
  432. 392
  433. 393
  434. 394
  435. 395
  436. 396
  437. 397
  438. 398
  439. 399
  440. 400
  441. 401
  442. 402
  443. 403
  444. 404
  445. 405
  446. 406
  447. 407
  448. 408
  449. 409
  450. 410
  451. 411
  452. 412
  453. 413
  454. 414
  455. 415
  456. 416
  457. 417
  458. 418
  459. 419
  460. 420
  461. 421
  462. 422
  463. 423
  464. 424
  465. 425
  466. 426
  467. 427
  468. 428
  469. 429
  470. 430
  471. 431
  472. 432
  473. 433
  474. 434
  475. 435
  476. 436
  477. 437
  478. 438
  479. 439
  480. 440
  481. 441
  482. 442
  483. 443
  484. 444
  485. 445
  486. 446
  487. 447
  488. 448
  489. 449
  490. 450
  491. 451
  492. 452
  493. 453
  494. 454
  495. 455
  496. 456
  497. 457
  498. 458
  499. 459
  500. 460
  501. 461
  502. 462
  503. 463
  504. 464
  505. 465
  506. 466
  507. 467
  508. 468
  509. 469
  510. 470
  511. 471
  512. 472
  513. 473
  514. 474
  515. 475
  516. 476
  517. 477
  518. 478
  519. 479
  520. 480
  521. 481
  522. 482
  523. 483
  524. 484
  525. 485
  526. 486
  527. 487
  528. 488
  529. 489
  530. 490
  531. 491
  532. 492
  533. 493
  534. 494
  535. 495
  536. 496
  537. 497
  538. 498
  539. 499
  540. 500
  541. 501
  542. 502
  543. 503
  544. 504
  545. 505
  546. 506
  547. 507
  548. 508
  549. 509
  550. 510
  551. 511
  552. 512
  553. 513
  554. 514
  555. 515
  556. 516
  557. 517
  558. 518
  559. 519
  560. 520
  561. 521
  562. 522
  563. 523
  564. 524
  565. 525
  566. 526
  567. 527
  568. 528
  569. 529
  570. 530
  571. 531
  572. 532
  573. 533
  574. 534
  575. 535
  576. 536
  577. 537
  578. 538
  579. 539
  580. 540
  581. 541
  582. 542
  583. 543
  584. 544
  585. 545
  586. 546
  587. 547
  588. 548
  589. 549
  590. 550
  591. 551
  592. 552
  593. 553
  594. 554
  595. 555
  596. 556
  597. 557
  598. 558
  599. 559
  600. 560
  601. 561
  602. 562
  603. 563
  604. 564
  605. 565
  606. 566
  607. 567
  608. 568
  609. 569
  610. 570
  611. 571
  612. 572
  613. 573
  614. 574
  615. 575
  616. 576
  617. 577
  618. 578
  619. 579
  620. 580
  621. 581
  622. 582
  623. 583
  624. 584
  625. 585
  626. 586
  627. 587
  628. 588
  629. 589
  630. 590
  631. 591
  632. 592
  633. 593
  634. 594
  635. 595
  636. 596
  637. 597
  638. 598
  639. 599
  640. 600
  641. 601
  642. 602
  643. 603
  644. 604
  645. 605
  646. 606
  647. 607
  648. 608
  649. 609
  650. 610
  651. 611
  652. 612
  653. 613
  654. 614
  655. 615
  656. 616
  657. 617
  658. 618
  659. 619
  660. 620
  661. 621
  662. 622
  663. 623
  664. 624
  665. 625
  666. 626
  667. 627
  668. 628
  669. 629
  670. 630
  671. 631
  672. 632
  673. 633
  674. 634
  675. 635
  676. 636
  677. 637
  678. 638
  679. 639
  680. 640
  681. 641
  682. 642
  683. 643
  684. 644
  685. 645
  686. 646
  687. 647
  688. 648
  689. 649
  690. 650
  691. 651
  692. 652
  693. 653
  694. 654
  695. 655
  696. 656
  697. 657
  698. 658
  699. 659
  700. 660
  701. 661
  702. 662
  703. 663
  704. 664
  705. 665
  706. 666
  707. 667
  708. 668
  709. 669
  710. 670
  711. 671
  712. 672
  713. 673
  714. 674
  715. 675
  716. 676
  717. 677
  718. 678
  719. 679
  720. 680
  721. 681
  722. 682
  723. 683
  724. 684
  725. 685
  726. 686
  727. 687
  728. 688
  729. 689
  730. 690
  731. 691
  732. 692
  733. 693
  734. 694
  735. 695
  736. 696
  737. 697
  738. 698
  739. 699
  740. 700
  741. 701
  742. 702
  743. 703
  744. 704
  745. 705
  746. 706
  747. 707
  748. 708
  749. 709
  750. 710
  751. 711
  752. 712
  753. 713
  754. 714
  755. 715
  756. 716
  757. 717
  758. 718
  759. 719
  760. 720
  761. 721
  762. 722
  763. 723
  764. 724
  765. 725
  766. 726
  767. 727
  768. 728
  769. 729
  770. 730
  771. 731
  772. 732
  773. 733
  774. 734
  775. 735
  776. 736
  777. 737
  778. 738
  779. 739
  780. 740
  781. 741
  782. 742
  783. 743
  784. 744
  785. 745
  786. 746
  787. 747
  788. 748
  789. 749
  790. 750
  791. 751
  792. 752
  793. 753
  794. 754
  795. 755
  796. 756
  797. 757
  798. 758
  799. 759
  800. 760
  801. 761
  802. 762
  803. 763
  804. 764
  805. 765
  806. 766
  807. 767
  808. 768
  809. 769
  810. 770
  811. 771
  812. 772
  813. 773
  814. 774
  815. 775
  816. 776
  817. 777
  818. 778
  819. 779
  820. 780
  821. 781
  822. 782
  823. 783
  824. 784
  825. 785
  826. 786
  827. 787
  828. 788
  829. 789
  830. 790
  831. 791
  832. 792
  833. 793
  834. 794
  835. 795
  836. 796
  837. 797
  838. 798
  839. 799
  840. 800
  841. 801
  842. 802
  843. 803
  844. 804
  845. 805
  846. 806
  847. 807
  848. 808
  849. 809
  850. 810
  851. 811
  852. 812
  853. 813
  854. 814
  855. 815
  856. 816
  857. 817
  858. 818
  859. 819
  860. 820
  861. 821
  862. 822
  863. 823
  864. 824
  865. 825
  866. 826
  867. 827
  868. 828
  869. 829
  870. 830
  871. 831
  872. 832
  873. 833
  874. 834
  875. 835
  876. 836
  877. 837
  878. 838
  879. 839
  880. 840
  881. 841
  882. 842
  883. 843
  884. 844
  885. 845
  886. 846
  887. 847
  888. 848
  889. 849
  890. 850
  891. 851
  892. 852
  893. 853
  894. 854
  895. 855
  896. 856
  897. 857
  898. 858
  899. 859
  900. 860
  901. 861
  902. 862
  903. 863
  904. 864
  905. 865
  906. 866
  907. 867
  908. 868
  909. 869
  910. 870
  911. 871
  912. 872
  913. 873
  914. 874
  915. 875
  916. 876
  917. 877
  918. 878
  919. 879
  920. 880
  921. 881
  922. 882
  923. 883
  924. 884
  925. 885
  926. 886
  927. 887
  928. 888
  929. 889
  930. 890
  931. 891
  932. 892
  933. 893
  934. 894
  935. 895
  936. 896
  937. 897
  938. 898
  939. 899
  940. 900
  941. 901
  942. 902
  943. 903
  944. 904
  945. 905
  946. 906
  947. 907
  948. 908
  949. 909
  950. 910
  951. 911
  952. 912
  953. 913
  954. 914
  955. 915
  956. 916
  957. 917
  958. 918
  959. 919
  960. 920
  961. 921
  962. 922
  963. 923
  964. 924
  965. 925
  966. 926
  967. 927
  968. 928
  969. 929
  970. 930
  971. 931
  972. 932
  973. 933
  974. 934
  975. 935
  976. 936
  977. 937
  978. 938
  979. 939
  980. 940
  981. 941
  982. 942
  983. 943
  984. 944
  985. 945
  986. 946
  987. 947
  988. 948
  989. 949
  990. 950
  991. 951
  992. 952
  993. 953
  994. 954
  995. 955
  996. 956
  997. 957
  998. 958
  999. 959
  1000. 960
  1001. 961
  1002. 962
  1003. 963
  1004. 964
  1005. 965
  1006. 966
  1007. 967
  1008. 968
  1009. 969
  1010. 970
  1011. 971
  1012. 972
  1013. 973
  1014. 974
  1015. 975
  1016. 976
  1017. 977
  1018. 978
  1019. 979
  1020. 980
  1021. 981
  1022. 982
  1023. 983
  1024. 984
  1025. 985
  1026. 986
  1027. 987
  1028. 988
  1029. 989
  1030. 990
  1031. 991
  1032. 992
  1033. 993
  1034. 994
  1035. 995
  1036. 996
  1037. 997
  1038. 998
  1039. 999
  1040. 1000
  1041. 1001
  1042. 1002
  1043. 1003
  1044. 1004
  1045. 1005
  1046. 1006
  1047. 1007
  1048. 1008
  1049. 1009
  1050. 1010
  1051. 1011
  1052. 1012
  1053. 1013
  1054. 1014
  1055. 1015
  1056. 1016
  1057. 1017
  1058. 1018
  1059. 1019
  1060. 1020
  1061. 1021
  1062. 1022
  1063. 1023
  1064. 1024
  1065. 1025
  1066. 1026
  1067. 1027
  1068. 1028
  1069. 1029
  1070. 1030
  1071. 1031
  1072. 1032
  1073. 1033
  1074. 1034
  1075. 1035
  1076. 1036
  1077. 1037
  1078. 1038
  1079. 1039
  1080. 1040