Full stack web developers are always in demand—do you have the skillset? Between these pages you’ll learn to design websites with CSS, structure them with HTML, and add interactivity with JavaScript. You’ll master the different web protocols, formats, and architectures and see how and when to use APIs, PHP, web services, and other tools and languages. With information on testing, deploying, securing, and optimizing web applications, you’ll get the full frontend and backend instructions you need!
Highlights include:
1) Frontend programming
2) Backend programming
3) HTML
4) CSS
5) JavaScript
6) APIs
7) Single-page applications
8) Web architecture
9) Testing
10) Deployment
11) Security
12) Optimization
Author(s): Philip Ackermann
Publisher: Rheinwerk Publishing Inc.
Year: 2023
Language: English
Pages: 800
Dear Reader
Notes on Usage
Table of Contents
Foreword
Preface
Intended Audience
Structure of the Book
How Should I Read This Book?
Acknowledgments
1 Understanding the Basics
1.1 Terminology
1.1.1 Client and Server
1.1.2 Relationship between URLs, Domains, and IP Addresses
1.2 Structure of Web Applications
1.2.1 Creating Web Pages Using HTML
1.2.2 Designing Web Pages with CSS
1.2.3 Making Web Pages Interactive with JavaScript
1.2.4 Making Web Pages Dynamic Using Server-Side Logic
1.3 Full Stack Development
1.3.1 What Are Software Stacks?
1.3.2 What Types of Stacks Exist?
1.3.3 What Is a Full Stack Developer?
1.3.4 Structure of This Book
1.4 Tools for Full Stack Developers
1.4.1 Editors
1.4.2 Development Environments
1.4.3 Browsers
1.5 Summary and Outlook
1.5.1 Key Points
1.5.2 Outlook
2 Structuring Web Pages with HTML
2.1 Introduction
2.1.1 Versions
2.1.2 Using Elements and Attributes
2.1.3 Saving Web Pages as HTML Documents
2.2 Using the Most Important Elements
2.2.1 Using Headings, Paragraphs, and Other Text Formatting
2.2.2 Creating Lists
2.2.3 Defining Links
2.2.4 Including Images
2.2.5 Structuring Data in Tables
2.2.6 Defining Forms
2.2.7 Further Information
2.3 Summary and Outlook
2.3.1 Key Points
2.3.2 Recommended Reading
2.3.3 Outlook
3 Designing Web Pages with CSS
3.1 Introduction
3.1.1 The Principle of CSS
3.1.2 Including CSS in HTML
3.1.3 Selectors
3.1.4 Cascading and Specificity
3.1.5 Inheritance
3.2 Applying Colors and Text Formatting
3.2.1 Defining the Text Color and Background Color
3.2.2 Designing Texts
3.3 Lists and Tables
3.3.1 Designing Lists
3.3.2 Designing Tables
3.4 Understanding the Different Layout Systems
3.4.1 Basic Principles of Positioning with CSS
3.4.2 Float Layout
3.4.3 Flexbox Layout
3.4.4 Grid Layout
3.5 Summary and Outlook
3.5.1 Key Points
3.5.2 Recommended Reading
3.5.3 Outlook
4 Making Web Pages Interactive with JavaScript
4.1 Introduction
4.1.1 Including JavaScript
4.1.2 Displaying Dialog Boxes
4.1.3 Using the Developer Console
4.1.4 Introduction to Programming
4.2 Variables, Constants, Data Types, and Operators
4.2.1 Defining Variables
4.2.2 Defining Constants
4.2.3 Using Data Types
4.2.4 Using Operators
4.3 Using Control Structures
4.3.1 Using Conditional Statements and Branching
4.3.2 Using Loops
4.4 Functions and Error Handling
4.4.1 Defining and Calling Functions
4.4.2 Passing and Analyzing Function Parameters
4.4.3 Defining Return Values
4.4.4 Responding to Errors
4.5 Objects and Arrays
4.5.1 Using Objects
4.5.2 Using Arrays
4.6 Summary and Outlook
4.6.1 Key Points
4.6.2 Recommended Reading
4.6.3 Outlook
5 Using Web Protocols
5.1 Hypertext Transfer Protocol
5.1.1 Requests and Responses
5.1.2 Structure of HTTP Requests
5.1.3 Structure of HTTP Responses
5.1.4 Header
5.1.5 Methods
5.1.6 Status Codes
5.1.7 MIME Types
5.1.8 Cookies
5.1.9 Executing HTTP from the Command Line
5.2 Bidirectional Communication
5.2.1 Polling and Long Polling
5.2.2 Server-Sent Events
5.2.3 WebSockets
5.3 Summary and Outlook
5.3.1 Key Points
5.3.2 Recommended Reading
5.3.3 Outlook
6 Using Web Formats
6.1 Data Formats
6.1.1 CSV
6.1.2 XML
6.1.3 JSON
6.2 Image Formats
6.2.1 Photographs in the JPG Format
6.2.2 Graphics and Animations in the GIF Format
6.2.3 Graphics in the PNG Format
6.2.4 Vector Graphics in the SVG Format
6.2.5 Everything Gets Better with the WebP Format
6.2.6 Comparing Image Formats
6.2.7 Programs for Image Processing
6.3 Video and Audio Formats
6.3.1 Video Formats
6.3.2 Audio Formats
6.4 Summary and Outlook
6.4.1 Key Points
6.4.2 Recommended Reading
6.4.3 Outlook
7 Using Web APIs
7.1 Changing Web Pages Dynamically Using the DOM API
7.1.1 The Document Object Model
7.1.2 The Different Types of Nodes
7.1.3 Selecting Elements
7.1.4 Modifying Elements
7.1.5 Creating, Adding, and Deleting Elements
7.1.6 Practical Example: Dynamic Creation of a Table
7.2 Loading Data Synchronously via Ajax and the Fetch API
7.2.1 Synchronous versus Asynchronous Communication
7.2.2 Loading Data via Ajax
7.2.3 Loading Data via the Fetch API
7.3 Other Web APIs
7.3.1 Overview of Web APIs
7.3.2 Browser Support for Web APIs
7.4 Summary and Outlook
7.4.1 Key Points
7.4.2 Recommended Reading
7.4.3 Outlook
8 Optimizing Websites for Accessibility
8.1 Introduction
8.1.1 Introduction to Accessibility
8.1.2 User Groups and Assistive Technologies
8.1.3 Web Content Accessibility Guidelines
8.2 Making Components of a Website Accessible
8.2.1 Structuring Web Pages Semantically
8.2.2 Using Headings Correctly
8.2.3 Making Forms Accessible
8.2.4 Making Tables Accessible
8.2.5 Making Images Accessible
8.2.6 Making Links Accessible
8.2.7 Accessible Rich Internet Applications
8.2.8 Miscellaneous
8.3 Testing Accessibility
8.3.1 Types of Tests
8.3.2 Tools for Testing
8.4 Summary and Outlook
8.4.1 Key Points
8.4.2 Recommended Reading
8.4.3 Outlook
9 Simplifying CSS with CSS Preprocessors
9.1 Introduction
9.1.1 How CSS Preprocessors Work
9.1.2 Features of CSS Preprocessors
9.1.3 Sass, Less, and Stylus
9.2 Using Sass
9.2.1 Installing Sass
9.2.2 Compiling Sass Files to CSS
9.2.3 Using Variables
9.2.4 Using Operators
9.2.5 Using Branches
9.2.6 Using Loops
9.2.7 Using Functions
9.2.8 Implementing Custom Functions
9.2.9 Nesting Rules
9.2.10 Using Inheritance and Mixins
9.3 Summary and Outlook
9.3.1 Key Points
9.3.2 Recommended Reading
9.3.3 Outlook
10 Implementing Single-Page Applications
10.1 Introduction
10.2 Setup
10.3 Components: The Building Blocks of a React Application
10.3.1 State: The Local State of a Component
10.3.2 The Lifecycle of a Component
10.4 Styling Components
10.4.1 Inline Styling
10.4.2 CSS Classes and External Stylesheets
10.4.3 Overview of Other Styling Options
10.5 Component Hierarchies
10.6 Forms
10.7 The Context API
10.8 Routing
10.9 Summary and Outlook
10.9.1 Key Points
10.9.2 Recommended Reading
10.9.3 Outlook
11 Implementing Mobile Applications
11.1 The Different Types of Mobile Applications
11.1.1 Native Applications
11.1.2 Mobile Web Applications
11.1.3 Hybrid Applications
11.1.4 Comparing the Different Approaches
11.2 Responsive Design
11.2.1 Introduction: What Is Responsive Design?
11.2.2 Viewports
11.2.3 Media Queries
11.2.4 Flexible Layouts
11.3 Cross-Platform Development with React Native
11.3.1 The Principle of React Native
11.3.2 Installation and Project Initialization
11.3.3 Starting the Application
11.3.4 The Basic Structure of a React Native Application
11.3.5 User Interface Components
11.3.6 Building and Publishing Applications
11.4 Summary and Outlook
11.4.1 Key Points
11.4.2 Recommended Reading
11.4.3 Outlook
12 Understanding and Using Web Architectures
12.1 Layered Architectures
12.1.1 Basic Structure of Layered Architectures
12.1.2 Client-Server Architecture (Two-Tier Architecture)
12.1.3 Multi-Tier Architecture
12.2 Monoliths and Distributed Architectures
12.2.1 Monolithic Architecture
12.2.2 Service-Oriented Architecture
12.2.3 Microservice Architecture
12.2.4 Component-Based Architecture
12.2.5 Microfrontends Architecture
12.2.6 Messaging Architecture
12.2.7 Web Service Architecture
12.3 MV* Architectures
12.3.1 Model-View-Controller
12.3.2 Model-View-Presenter
12.3.3 Model-View-Viewmodel
12.4 Summary and Outlook
12.4.1 Key Points
12.4.2 Recommended Reading
12.4.3 Outlook
13 Using Programming Languages on the Server Side
13.1 Types of Programming Languages
13.1.1 Programming Languages by Degree of Abstraction
13.1.2 Compiled and Interpreted Programming Languages
13.2 Programming Paradigms
13.2.1 Imperative and Declarative Programming
13.2.2 Object-Oriented Programming
13.2.3 Functional Programming
13.3 What Are the Programming Languages?
13.3.1 Rankings of Programming Languages
13.3.2 Which Programming Language Should You Learn?
13.3.3 But Seriously Now: Which Programming Language Should You Learn?
13.4 Summary and Outlook
13.4.1 Key Points
13.4.2 Recommended Reading
13.4.3 Outlook
14 Using JavaScript on the Server Side
14.1 JavaScript on Node.js
14.1.1 Node.js Architecture
14.1.2 A First Program
14.1.3 Package Management
14.2 Using the Integrated Modules
14.2.1 Reading Files
14.2.2 Writing Files
14.2.3 Deleting Files
14.3 Implementing a Web Server
14.3.1 Preparations
14.3.2 Providing Static Files
14.3.3 Using the Express.js Web Framework
14.3.4 Processing Form Data
14.4 Summary and Outlook
14.4.1 Key Points
14.4.2 Recommended Reading
14.4.3 Outlook
15 Using the PHP Language
15.1 Introduction to the PHP Language
15.2 Installing PHP and the Web Server Locally
15.3 Variables, Data Types, and Operators
15.3.1 Using Variables
15.3.2 Using Constants
15.3.3 Using Operators
15.4 Using Control Structures
15.4.1 Conditional Statements
15.4.2 Loops
15.5 Functions and Error Handling
15.5.1 Defining Functions
15.5.2 Function Parameters
15.5.3 Defining Return Values
15.5.4 Using Data Types
15.5.5 Anonymous Functions
15.5.6 Declaring Variable Functions
15.5.7 Arrow Functions
15.5.8 Responding to Errors
15.6 Using Classes and Objects
15.6.1 Writing Classes
15.6.2 Creating Objects
15.6.3 Class Constants
15.6.4 Visibility
15.6.5 Inheritance
15.6.6 Class Abstraction
15.6.7 More Features
15.7 Developing Dynamic Websites with PHP
15.7.1 Creating and Preparing a Form
15.7.2 Receiving Form Data
15.7.3 Verifying Form Data
15.8 Summary and Outlook
15.8.1 Key Points
15.8.2 Recommended Reading
15.8.3 Outlook
16 Implementing Web Services
16.1 Introduction
16.2 SOAP
16.2.1 The Workflow with SOAP
16.2.2 Description of Web Services with WSDL
16.2.3 Structure of SOAP Messages
16.2.4 Conclusion
16.3 REST
16.3.1 The Workflow with REST
16.3.2 The Principles of REST
16.3.3 Implementing a REST API
16.3.4 Calling a REST API
16.4 GraphQL
16.4.1 The Disadvantages of REST
16.4.2 The Workflow of GraphQL
16.5 Summary and Outlook
16.5.1 Key Points
16.5.2 Recommended Reading
16.5.3 Outlook
17 Storing Data in Databases
17.1 Relational Databases
17.1.1 The Functionality of Relational Databases
17.1.2 The SQL Language
17.1.3 Real-Life Example: Using Relational Databases in Node.js
17.1.4 Object-Relational Mappings
17.2 Non-Relational Databases
17.2.1 Relational versus Non-Relational Databases
17.2.2 The Functionality of Non-Relational Databases
17.2.3 Key-Value Databases
17.2.4 Document-Oriented Databases
17.2.5 Graph Databases
17.2.6 Column-Oriented Databases
17.3 Summary and Outlook
17.3.1 Key Points
17.3.2 Recommended Reading
17.3.3 Outlook
18 Testing Web Applications
18.1 Automated Tests
18.1.1 Introduction
18.1.2 Types of Tests
18.1.3 Test-Driven Development
18.1.4 Running Automated Tests in JavaScript
18.2 Test Coverage
18.2.1 Introduction
18.2.2 Determining Test Coverage in JavaScript
18.3 Test Doubles
18.3.1 The Problem with Dependencies
18.3.2 Replacing Dependencies with Test Doubles
18.3.3 Spies
18.3.4 Stubs
18.3.5 Mock Objects
18.4 Summary and Outlook
18.4.1 Key Points
18.4.2 Recommended Reading
18.4.3 Outlook
19 Deploying and Hosting Web Applications
19.1 Introduction
19.1.1 Building, Deploying, and Hosting
19.1.2 Types of Deployment
19.1.3 Types of Hosting
19.1.4 Requirements for Servers
19.2 Container Management
19.2.1 Docker
19.2.2 Real-Life Example: Packaging a Web Application using Docker
19.2.3 Number of Docker Images
19.2.4 Docker Compose
19.3 Summary and Outlook
19.3.1 Key Points
19.3.2 Recommended Reading
19.3.3 Outlook
20 Securing Web Applications
20.1 Vulnerabilities
20.1.1 Open Web Application Security Project
20.1.2 Injection
20.1.3 Broken Authentication
20.1.4 Sensitive Data Exposure
20.1.5 XML External Entities
20.1.6 Broken Access Control
20.1.7 Security Misconfiguration
20.1.8 Cross-Site Scripting
20.1.9 Insecure Deserialization
20.1.10 Using Components with Known Vulnerabilities
20.1.11 Insufficient Logging and Monitoring
20.1.12 Outlook
20.2 Encryption and Cryptography
20.2.1 Symmetric Cryptography
20.2.2 Asymmetric Cryptography
20.2.3 SSL, TLS, and HTTPS
20.3 Same-Origin Policies, Content Security Policies, and Cross-Origin Resource Sharing
20.3.1 Same Origin Policy
20.3.2 Cross-Origin Resource Sharing
20.3.3 Content Security Policy
20.4 Authentication
20.4.1 Basic Authentication
20.4.2 Session-Based Authentication
20.4.3 Token-Based Authentication
20.5 Summary and Outlook
20.5.1 Key Points
20.5.2 Recommended Reading
20.5.3 Outlook
21 Optimizing the Performance of Web Applications
21.1 Introduction
21.1.1 What Should Be Optimized and Why?
21.1.2 How Can Performance Be Measured?
21.1.3 Which Tools Are Available for Measuring Performance?
21.2 Options for Optimization
21.2.1 Optimizing Connection Times
21.2.2 Using a Server-Side Cache
21.2.3 Optimizing Images
21.2.4 Using a Client-Side Cache
21.2.5 Minifying the Code
21.2.6 Compressing Files
21.2.7 Lazy Loading: Loading Data Only When Needed
21.2.8 Preloading Data
21.3 Summary and Outlook
21.3.1 Key Points
21.3.2 Recommended Reading
21.3.3 Outlook
22 Organizing and Managing Web Projects
22.1 Types of Version Control Systems
22.1.1 Central Version Control Systems
22.1.2 Decentralized Version Control Systems
22.2 The Git Version Control System
22.2.1 How Git Stores Data
22.2.2 The Different Areas of Git
22.2.3 Installation
22.2.4 Creating a New Git Repository
22.2.5 Transferring Changes to the Staging Area
22.2.6 Committing Changes to the Local Repository
22.2.7 Committing Changes to the Remote Repository
22.2.8 Transferring Changes from the Remote Repository
22.2.9 Working in a New Branch
22.2.10 Transferring Changes from a Branch
22.3 Summary and Outlook
22.3.1 Key Points
22.3.2 Recommended Reading
22.3.3 Outlook
23 Managing Web Projects
23.1 Classic Project Management versus Agile Project Management
23.1.1 Classic Project Management
23.1.2 Agile Project Management
23.2 Agile Project Management Based on Scrum
23.2.1 The Scrum Workflow
23.2.2 The Roles of Scrum
23.2.3 Events in Scrum
23.2.4 Artifacts in Scrum
23.3 Summary and Outlook
23.3.1 Key Points
23.3.2 Recommended Reading
23.3.3 Outlook
A HTTP
A.1 HTTP Status Codes
A.1.1 Brief Overview
A.2 MIME Types
A.3 Headers
A.3.1 Request Headers
A.3.2 Response Headers
B HTML Elements
B.1 HTML and Metadata
B.2 Page Areas
B.3 Content Grouping
B.4 Text
B.5 Changes to the Document
B.6 Embedded Content
B.7 Tables
B.8 Forms
B.9 Scripts
C Tools and Command References
C.1 Node.js
C.1.1 Installation File on macOS
C.1.2 Installation File on Windows
C.1.3 Binary Package on macOS
C.1.4 Binary Package on Windows
C.1.5 Binary Package on Linux
C.1.6 Package Manager
C.2 Testing Tools
C.3 Git Command Reference
C.4 Docker Command Reference
C.5 Docker Compose Command Reference
D Conclusion
E The Author
Index
Service Pages
Legal Notes