Web Coding & Development All-in-One for Dummies

Table of Contents
INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
About This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Foolish Assumptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
“I’ve never coded before!”………………………………3
“I have coded before!” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Icons Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Beyond the Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
BOOK 1: GETTING READY TO CODE FOR THE WEB . . . . . . . . . . 5
CHAPTER 1: How Web Coding and Development Work . . . . . . . . . . . 7
The Nuts and Bolts of Web Coding and Development . . . . . . . . . . . . . 8
How the web works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
How the web works, take two . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Understanding the Front End: HTML and CSS . . . . . . . . . . . . . . . . . . . 12
Adding structure: HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Adding style: CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Understanding the Back End: PHP and MySQL . . . . . . . . . . . . . . . . . . . 15
Storing data on the server: MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Accessing data on the server: PHP . . . . . . . . . . . . . . . . . . . . . . . . . . 16
How It All Fits Together: JavaScript and jQuery . . . . . . . . . . . . . . . . . . . 16
Front end, meet back end: JavaScript . . . . . . . . . . . . . . . . . . . . . . . . 16
Making your web coding life easier: jQuery . . . . . . . . . . . . . . . . . . 17
How Dynamic Web Pages Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
What Is a Web App? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
What Is a Mobile Web App? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
What’s the Difference between Web Coding
and Web Development? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
CHAPTER 2: Setting Up Your Web Development Home . . . . . . . . . . 21
What Is a Local Web Development Environment? . . . . . . . . . . . . . . . . 22
Do You Need a Local Web Development Environment? . . . . . . . . . . . 22
Setting Up the XAMPP for Windows Development Environment . . . . 23
Installing XAMPP for Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Running the XAMPP for Windows Control Panel . . . . . . . . . . . . . . 26
Accessing your local web server . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Setting Up the XAMPP for OS X Development Environment . . . . . . . . 29
Installing XAMPP for OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Running the XAMPP Application Manager . . . . . . . . . . . . . . . . . . . . 30
Accessing your local web server . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Choosing Your Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
CHAPTER 3: Finding and Setting Up a Web Host . . . . . . . . . . . . . . . . . . . 35
Understanding Web Hosting Providers . . . . . . . . . . . . . . . . . . . . . . . . . 36
Using your existing Internet provider . . . . . . . . . . . . . . . . . . . . . . . . 36
Finding a free hosting provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Signing up with a commercial hosting provider . . . . . . . . . . . . . . . 37
A Buyer’s Guide to Web Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Finding a Web Host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Finding Your Way around Your New Web Home . . . . . . . . . . . . . . . . . 41
Your directory and your web address . . . . . . . . . . . . . . . . . . . . . . . 42
Making your hard disk mirror your web home . . . . . . . . . . . . . . . . 42
Uploading your site files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Making changes to your web files . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
BOOK 2: CODING THE FRONT END, PART 1:
HTML & CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
CHAPTER 1: Structuring the Page with HTML . . . . . . . . . . . . . . . . . . . . . . 49
Getting the Hang of HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Understanding Tag Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Learning the Fundamental Structure of an HTML5 Web Page . . . . . . 53
Giving your page a title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Adding some text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Some Notes on Structure versus Style . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Applying the Basic Text Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Emphasizing text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Marking important text……………………………….59
Nesting tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Adding headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Adding quotations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Creating Links…………………………………………62
Linking basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Anchors aweigh: Internal links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Building Bulleted and Numbered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Making your point with bulleted lists . . . . . . . . . . . . . . . . . . . . . . . . 65
Numbered lists: Easy as one, two, three . . . . . . . . . . . . . . . . . . . . . 67
Inserting Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Inserting Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Carving Up the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
The <header> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
The <nav> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
The <main> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
The <article> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
The <section> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
The <aside> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

The <footer> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Handling non-semantic content with <div> . . . . . . . . . . . . . . . . . . . 76
Handling words and characters with <span> . . . . . . . . . . . . . . . . . 77
CHAPTER 2: Styling the Page with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Figuring Out Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Styles: Bundles of formatting options . . . . . . . . . . . . . . . . . . . . . . . 80
Sheets: Collections of styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Cascading: How styles propagate . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Getting the Hang of CSS Rules and Declarations . . . . . . . . . . . . . . . . . 81
Adding Styles to a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Inserting inline styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Embedding an internal style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Linking to an external style sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Styling Page Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Setting the type size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Getting comfy with CSS measurement units . . . . . . . . . . . . . . . . . . 88
Applying a font family . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Making text bold . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Styling text with italics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Styling links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Aligning paragraph text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Indenting a paragraph’s first line . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Working with Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Specifying a color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Coloring text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Coloring the background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Getting to Know the Web Page Family . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Using CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
The class selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
The id selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
The descendant selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
The child selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Revisiting the Cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
CHAPTER 3: Sizing and Positioning Page Elements . . . . . . . . . . . . . 103
Learning about the CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Styling Sizes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Adding Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Building Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Making Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Resetting the padding and margin . . . . . . . . . . . . . . . . . . . . . . . . . 111
Collapsing margins ahead! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Getting a Grip on Page Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Floating Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Clearing your floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Collapsing containers ahead! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Positioning Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Using relative positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Giving absolute positioning a whirl . . . . . . . . . . . . . . . . . . . . . . . . . 122
Trying out fixed positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
CHAPTER 4: Creating the Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
What Is Page Layout? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Laying Out Page Elements with Floats . . . . . . . . . . . . . . . . . . . . . . . . . 128
Laying Out Page Elements with Inline Blocks . . . . . . . . . . . . . . . . . . . 132
Making Flexible Layouts with Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . 136
Setting up the flex container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Aligning flex items along the primary axis . . . . . . . . . . . . . . . . . . . 139
Aligning flex items along the secondary axis . . . . . . . . . . . . . . . . . 140
Centering an element horizontally and vertically . . . . . . . . . . . . . 141
Laying out a navigation bar with flexbox . . . . . . . . . . . . . . . . . . . . 143
Allowing flex items to grow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Allowing flex items to shrink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Laying out content columns with flexbox . . . . . . . . . . . . . . . . . . . 149
Flexbox browser support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Shaping the Overall Page Layout with CSS Grid . . . . . . . . . . . . . . . . . 153
Setting up the grid container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Specifying the grid rows and columns . . . . . . . . . . . . . . . . . . . . . . 154
Creating grid gaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Assigning grid items to rows and columns . . . . . . . . . . . . . . . . . . 157
Aligning grid items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Laying out content columns with Grid . . . . . . . . . . . . . . . . . . . . . . 161
Grid browser support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Providing Fallbacks for Page Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . 164
BOOK 3: CODING THE FRONT END, PART 2:
JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
CHAPTER 1: An Overview of JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
JavaScript: Controlling the Machine . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
What Is a Programming Language? . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Is JavaScript Hard to Learn? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
What Can You Do with JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
What Can’t You Do with JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
What Do You Need to Get Started? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Basic Script Construction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
The <script> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Handling browsers with JavaScript turned off . . . . . . . . . . . . . . . . 176
Where do you put the <script> tag? . . . . . . . . . . . . . . . . . . . . . . . . 176
Example #1: Displaying a message to the user . . . . . . . . . . . . . . . 177
Example #2: Writing text to the page . . . . . . . . . . . . . . . . . . . . . . . 179
Adding Comments to Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Creating External JavaScript Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
CHAPTER 2: Understanding Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
What Is a Variable? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Declaring a variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Storing a value in a variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Using variables in statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Naming Variables: Rules and Best Practices . . . . . . . . . . . . . . . . . . . . 187
Rules for naming variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Ideas for good variable names . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Understanding Literal Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Working with numeric literals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Working with string literals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Working with Boolean literals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
JavaScript Reserved Words . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
JavaScript Keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
CHAPTER 3: Building Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Understanding Expression Structure . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Building Numeric Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
A quick look at the arithmetic operators . . . . . . . . . . . . . . . . . . . . 199
Using the addition (+) operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Using the increment (++) operator . . . . . . . . . . . . . . . . . . . . . . . . . 200
Using the subtraction and negation (-) operators . . . . . . . . . . . . 201
Using the decrement (–) operator . . . . . . . . . . . . . . . . . . . . . . . . . 202
Using the multiplication (*) operator . . . . . . . . . . . . . . . . . . . . . . . 202
Using the division (/) operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Using the modulus (%) operator . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Using the arithmetic assignment operators . . . . . . . . . . . . . . . . . 204
Building String Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Building Comparison Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
The comparison operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Using the equal (==) operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Using the not equal (!=) operator . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Using the greater than (>) operator . . . . . . . . . . . . . . . . . . . . . . . . 209
Using the less than (<) operator . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Using the greater than or equal (>=) operator . . . . . . . . . . . . . . . 210
Using the less than or equal (<=) operator . . . . . . . . . . . . . . . . . . 210
The comparison operators and data conversion . . . . . . . . . . . . . 211
Using the identity (===) operator . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Using the non-identity (!==) operator . . . . . . . . . . . . . . . . . . . . . . . 212
Using strings in comparison expressions . . . . . . . . . . . . . . . . . . . 213
Using the ternary (?:) operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Building Logical Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
The logical operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Using the AND (&&) operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Using the OR (, ) operator……………………………216
Using the NOT (!) Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Advanced notes on the && and, operators . . . . . . . . . . . . . . . . 217
Understanding Operator Precedence . . . . . . . . . . . . . . . . . . . . . . . . . 219
The order of precedence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Controlling the order of precedence . . . . . . . . . . . . . . . . . . . . . . . 221
CHAPTER 4: Controlling the Flow of JavaScript . . . . . . . . . . . . . . . . . . 225
Understanding JavaScript’s Control Structures . . . . . . . . . . . . . . . . . . 226
Making True/False Decisions with if() Statements . . . . . . . . . . . . . . . 226
Branching with if(). . .else Statements . . . . . . . . . . . . . . . . . . . . . . . . . 228
Making Multiple Decisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Using the AND (??) and OR (, ) operators . . . . . . . . . . . . . . . . . . . 230
Nesting multiple if() statements . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Using the switch() statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Understanding Code Looping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Using while() Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Using for() Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Using do. . .while() Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Controlling Loop Execution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Exiting a loop using the break statement . . . . . . . . . . . . . . . . . . . 243
Bypassing loop statements using the continue statement . . . . . 245
Avoiding Infinite Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
CHAPTER 5: Harnessing the Power of Functions . . . . . . . . . . . . . . . . 249
What Is a Function? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
The Structure of a Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Where Do You Put a Function? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Calling a Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Calling a function when the <script> tag is parsed . . . . . . . . . . . . 252
Calling a function after the page is loaded . . . . . . . . . . . . . . . . . . 253
Calling a function in response to an event . . . . . . . . . . . . . . . . . . 254
Passing Values to Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Passing a single value to a function . . . . . . . . . . . . . . . . . . . . . . . . 256
Passing multiple values to a function . . . . . . . . . . . . . . . . . . . . . . . 257
Returning a Value from a Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Understanding Local versus Global Variables . . . . . . . . . . . . . . . . . . . 259
Working with local scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Working with global scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Using Recursive Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
CHAPTER 6: Working with Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
What Is an Object? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
The JavaScript Object Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Manipulating Object Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Referencing a property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Some objects are properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Changing the value of a property . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Working with Object Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Playing Around with the window Object . . . . . . . . . . . . . . . . . . . . . . . 275
Referencing the window object . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Some window object properties you should know . . . . . . . . . . . 275
Working with JavaScript timeouts and intervals . . . . . . . . . . . . . . 276
Interacting with the user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Programming the document Object . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Specifying an element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Working with elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
CHAPTER 7: Working with Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
What Is an Array? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Declaring an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Populating an Array with Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Declaring and populating an array at the same time . . . . . . . . . . 295
Using a loop to populate an array………………………296
Using a loop to work with array data . . . . . . . . . . . . . . . . . . . . . . . 297
Creating Multidimensional Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Using the Array Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
The length property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Concatenating to create a new array: concat() . . . . . . . . . . . . . . . 301
Creating a string from an array’s elements: join()…………..302
Removing an array’s last element: pop() . . . . . . . . . . . . . . . . . . . . 303
Adding elements to the end of an array: push() . . . . . . . . . . . . . . 303
Reversing the order of an array’s elements: reverse() . . . . . . . . . 304
Removing an array’s first element: shift() . . . . . . . . . . . . . . . . . . . 305
Returning a subset of an array: slice() . . . . . . . . . . . . . . . . . . . . . . 305
Ordering array elements: sort() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Removing, replacing, and inserting elements: splice() . . . . . . . . . 308
Inserting elements at the beginning of an array: unshift() . . . . . 310
CHAPTER 8: Manipulating Strings, Dates, and Numbers . . . . . . 311
Manipulating Text with the String Object . . . . . . . . . . . . . . . . . . . . . . 311
Determining the length of a string . . . . . . . . . . . . . . . . . . . . . . . . . 312
Finding substrings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Methods that extract substrings . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Dealing with Dates and Times . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Arguments used with the Date object . . . . . . . . . . . . . . . . . . . . . . 324
Working with the Date object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Extracting information about a date…………………….325
Setting the date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Performing date calculations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Working with Numbers: The Math Object . . . . . . . . . . . . . . . . . . . . . . 335
Converting between strings and numbers . . . . . . . . . . . . . . . . . . 336
The Math object’s properties and methods……………….338
CHAPTER 9: Debugging Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Understanding JavaScript’s Error Types . . . . . . . . . . . . . . . . . . . . . . . . 342
Syntax errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Runtime errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Logic errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Getting to Know Your Debugging Tools . . . . . . . . . . . . . . . . . . . . . . . . 344
Debugging with the Console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Displaying the console in various browsers . . . . . . . . . . . . . . . . . 346
Logging data to the Console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Executing code in the Console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Pausing Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Entering break mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Exiting break mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Stepping through Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Stepping into some code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Stepping over some code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Stepping out of some code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Monitoring Script Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Viewing a single variable value . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Viewing all variable values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Adding a watch expression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
More Debugging Strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Top Ten Most Common JavaScript Errors . . . . . . . . . . . . . . . . . . . . . . 356
Top Ten Most Common JavaScript Error Messages . . . . . . . . . . . . . . 359
BOOK 4: CODING THE FRONT END, PART 3: jQUERY . . . . 363
CHAPTER 1: Developing Pages Faster with jQuery . . . . . . . . . . . . . . 365
Getting Started with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
How to include jQuery in your web page . . . . . . . . . . . . . . . . . . . . 366
Understanding the $ function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Where to put jQuery code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Selecting Elements with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Using the basic selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Working with jQuery sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Manipulating Page Elements with jQuery . . . . . . . . . . . . . . . . . . . . . . 373
Adding an element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Replacing an element’s HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Replacing an element’s text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Removing an element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Modifying CSS with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Working with CSS properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Manipulating classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Tweaking HTML Attributes with jQuery . . . . . . . . . . . . . . . . . . . . . . . . 385
Reading an attribute value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Setting an attribute value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Removing an attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
CHAPTER 2: Livening Up Your Page with Events
and Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Building Reactive Pages with Events . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
What’s an event? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Understanding the event types . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Setting up an event handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Using jQuery’s shortcut event handlers . . . . . . . . . . . . . . . . . . . . . 391
Getting data about the event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Preventing the default event action . . . . . . . . . . . . . . . . . . . . . . . . 394
Getting your head around event delegation . . . . . . . . . . . . . . . . . 396
Turning off an event handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Building Lively Pages with Animation . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Hiding and showing elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Fading elements out and in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Sliding elements……………………………………401
Controlling the animation duration and pace . . . . . . . . . . . . . . . . 402
Example: Creating a web page accordion . . . . . . . . . . . . . . . . . . . 403
Animating CSS properties…………………………….406
Running code when an animation ends………………….408
CHAPTER 3: Getting to Know jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
What’s the Deal with jQuery UI? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Getting Started with jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Working with the jQuery UI Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Dividing content into tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Creating a navigation menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Displaying a message in a dialog……………………….420
Hiding and showing content with an accordion . . . . . . . . . . . . . . 422
Introducing jQuery UI Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Applying an effect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Checking out the effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
Taking a Look at jQuery UI Interactions . . . . . . . . . . . . . . . . . . . . . . . . 428
Applying an interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Trying out the interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
BOOK 5: CODING THE BACK END:
PHP AND MYSQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
CHAPTER 1: Learning PHP Coding Basics . . . . . . . . . . . . . . . . . . . . . . . . . 435
Understanding How PHP Scripts Work . . . . . . . . . . . . . . . . . . . . . . . . 436
Learning the Basic Syntax of PHP Scripts . . . . . . . . . . . . . . . . . . . . . . 436
Declaring PHP Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Building PHP Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Outputting Text and Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439
Adding line breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Mixing and escaping quotation marks . . . . . . . . . . . . . . . . . . . . . . 441
Outputting variables in strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442
Outputting long strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Outputting really long strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
Working with PHP Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
Declaring arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
Giving associative arrays a look . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446
Outputting array values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
Sorting arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Looping through array values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Creating multidimensional arrays . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Controlling the Flow of Your PHP Code . . . . . . . . . . . . . . . . . . . . . . . . 451
Making decisions with if() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Making decisions with switch() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
Looping with while() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Looping with for() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
Looping with do. . .while()…………………………….456
Working with PHP Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
Passing values to functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Returning a value from a function . . . . . . . . . . . . . . . . . . . . . . . . . 458
Working with PHP Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
Rolling your own objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
Creating an object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
Working with object properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
Working with object methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Debugging PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Configuring php.ini for debugging . . . . . . . . . . . . . . . . . . . . . . . . . 463
Accessing the PHP error log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
Debugging with echo statements . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Debugging with var_dump() statements . . . . . . . . . . . . . . . . . . . . 466
CHAPTER 2: Building and Querying MySQL Databases . . . . . . . . . 467
What Is MySQL? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Tables: Containers for your data . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Queries: Asking questions of your data . . . . . . . . . . . . . . . . . . . . . 469
Introducing phpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Importing data into MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Backing up MySQL data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Creating a MySQL Database and Its Tables . . . . . . . . . . . . . . . . . . . . . 473
Creating a MySQL database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Designing your table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
Creating a MySQL table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Adding data to a table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
Creating a primary key . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
Querying MySQL Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
What Is SQL? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Creating a SELECT query . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
Understanding query criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Querying multiple tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485
Adding table data with an INSERT query . . . . . . . . . . . . . . . . . . . . 490
Modifying table data with an UPDATE query………………491
Removing table data with a DELETE query . . . . . . . . . . . . . . . . . . 492
CHAPTER 3: Using PHP to Access MySQL Data . . . . . . . . . . . . . . . . . . . 493
Understanding the Role of PHP and MySQL in Your Web App . . . . . 494
Using PHP to Access MySQL Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Parsing the query string . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Connecting to the MySQL database . . . . . . . . . . . . . . . . . . . . . . . . 497
Creating and running the SELECT query . . . . . . . . . . . . . . . . . . . . 499
Storing the query results in an array . . . . . . . . . . . . . . . . . . . . . . . 500
Looping through the query results . . . . . . . . . . . . . . . . . . . . . . . . . 501
Incorporating query string values in the query . . . . . . . . . . . . . . . 501
Creating and Running Insert, Update, and Delete Queries . . . . . . . . 504
Separating Your MySQL Login Credentials . . . . . . . . . . . . . . . . . . . . . 505
BOOK 6: CODING DYNAMIC WEB PAGES . . . . . . . . . . . . . . . . . . 507
CHAPTER 1: Melding PHP and JavaScript with
Ajax and JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
What Is Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Making Ajax Calls with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511
Learning more about GET and POST requests . . . . . . . . . . . . . . . 511
Handling POST requests in PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . 513
Using .load() to update an element with server data . . . . . . . . . . 514
Using .get() or .post() to communicate with the server . . . . . . . . 523
Introducing JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
Learning the JSON syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
Declaring and using JSON variables . . . . . . . . . . . . . . . . . . . . . . . . 527
Returning Ajax Data as JSON Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
Converting server data to the JSON format . . . . . . . . . . . . . . . . . . 528
Handling JSON data returned by the server . . . . . . . . . . . . . . . . . 530
CHAPTER 2: Building and Processing Web Forms . . . . . . . . . . . . . . . 533
What Is a Web Form? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534
Understanding How Web Forms Work . . . . . . . . . . . . . . . . . . . . . . . . . 535
Building an HTML5 Web Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
Setting up the form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
Adding a form button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 537
Working with text fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538
Coding checkboxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
Working with radio buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548
Adding selection lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Programming pickers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
Handling and Triggering Form Events . . . . . . . . . . . . . . . . . . . . . . . . . 557
Setting the focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558
Monitoring the focus event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
Blurring an element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
Monitoring the blur event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Listening for element changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Submitting the Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561
Triggering the submit event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
Preventing the default form submission . . . . . . . . . . . . . . . . . . . . 562
Preparing the data for submission . . . . . . . . . . . . . . . . . . . . . . . . . 563
Submitting the form data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563
CHAPTER 3: Validating Form Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Validating Form Data in the Browser . . . . . . . . . . . . . . . . . . . . . . . . . . 566
Making a form field mandatory . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
Restricting the length of a text field . . . . . . . . . . . . . . . . . . . . . . . . 567
Setting maximum and minimum values on a numeric field . . . . 568
Validating email fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
Making field values conform to a pattern . . . . . . . . . . . . . . . . . . . 570
Styling invalid fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Validating Form Data on the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . 574
Checking for required fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Validating text data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578
Validating a field based on the data type . . . . . . . . . . . . . . . . . . . . 580
Validating against a pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
Regular Expressions Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
BOOK 7: CODING WEB APPS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
CHAPTER 1: Planning a Web App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593
What Is a Web App? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Planning Your Web App: The Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
What is my app’s functionality? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
What are my app’s data requirements? . . . . . . . . . . . . . . . . . . . . . 596
How will my app work? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597
How many pages will my app require?…………………..597
What will my app’s pages look like? . . . . . . . . . . . . . . . . . . . . . . . . 598
Planning Your Web App: Responsiveness . . . . . . . . . . . . . . . . . . . . . . 599
Planning Your Web App: Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . 605
Planning Your Web App: Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
Understanding the dangers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609
Defending your web app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612
CHAPTER 2: Laying the Foundation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619
Setting Up the Directory Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620
Setting up the public subdirectory . . . . . . . . . . . . . . . . . . . . . . . . . 621
Setting up the private subdirectory . . . . . . . . . . . . . . . . . . . . . . . . 623
Creating the Database and Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624
Getting Some Back-End Code Ready . . . . . . . . . . . . . . . . . . . . . . . . . . 626
Defining PHP constants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626
Understanding PHP sessions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
Securing a PHP session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 628
Including code from another PHP file . . . . . . . . . . . . . . . . . . . . . . 629
Creating the App Startup Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630
Creating the back-end initialization file . . . . . . . . . . . . . . . . . . . . . 631
Creating the front-end common files . . . . . . . . . . . . . . . . . . . . . . . 633
Building the app home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635
CHAPTER 3: Managing Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637
Handling Data the CRUD Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638
Starting the web app’s data class . . . . . . . . . . . . . . . . . . . . . . . . . . 639
Creating a data handler script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 640
Creating New Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643
Building the form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643
Sending the form data to the server . . . . . . . . . . . . . . . . . . . . . . . 648
Adding the data item………………………………..649
Reading and Displaying Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652
Getting the home page ready for data . . . . . . . . . . . . . . . . . . . . . . 652
Making an Ajax request for the data . . . . . . . . . . . . . . . . . . . . . . . 654
Reading the data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655
Displaying the data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656
Filtering the data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 657
Updating and Editing Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661
Deleting Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 668
CHAPTER 4: Managing App Users . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673
Configuring the Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
Setting Up the Back End to Handle Users . . . . . . . . . . . . . . . . . . . . . . 677
Starting the web app’s user class . . . . . . . . . . . . . . . . . . . . . . . . . . 678
Creating a user handler script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 679
Signing Up a New User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682
Building the form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683
Sending the data to the server . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685
Sending a verification email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688
Adding the user to the database . . . . . . . . . . . . . . . . . . . . . . . . . . . 689
Verifying the user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690
Signing a User In and Out……………………………….696
Checking for a signed-in user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696
Adding the form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 697
Checking the user’s credentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . 700
Signing out a user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704
Resetting a Forgotten Password . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704
Deleting a User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714
BOOK 8: CODING MOBILE WEB APPS . . . . . . . . . . . . . . . . . . . . . . 721
CHAPTER 1: Exploring Mobile-First Web Development………. 723
What Is Mobile-First Web Development? . . . . . . . . . . . . . . . . . . . . . . . 724
Learning the Principles of Mobile-First Development . . . . . . . . . . . . 725
Mobile first means content first . . . . . . . . . . . . . . . . . . . . . . . . . . . 725
Pick a testing width that makes sense for your site . . . . . . . . . . . 726
Get your content to scale with the device . . . . . . . . . . . . . . . . . . . 726
Build your CSS the mobile-first way . . . . . . . . . . . . . . . . . . . . . . . . 727
Pick a “non-mobile” breakpoint that makes sense
for your content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727
Going Mobile Faster with jQuery Mobile . . . . . . . . . . . . . . . . . . . . . . . 729
What is jQuery Mobile? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729
Adding jQuery Mobile to your web app . . . . . . . . . . . . . . . . . . . . . 730
Working with Images in a Mobile App . . . . . . . . . . . . . . . . . . . . . . . . . 731
Making images responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731
Delivering images responsively . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732
Storing User Data in the Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 734
Understanding web storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735
Adding data to storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735
Getting data from web storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 736
Removing data from web storage . . . . . . . . . . . . . . . . . . . . . . . . . . 737
CHAPTER 2: Building a Mobile Web App . . . . . . . . . . . . . . . . . . . . . . . . . . 739
Building the Button Builder App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 740
Getting Some Help from the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741
Building the App: HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741
Setting up the home page skeleton . . . . . . . . . . . . . . . . . . . . . . . . 741
Configuring the header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744
Creating the app menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745
Adding the app’s controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745
Building the App: CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 754
Building the App: JavaScript and jQuery . . . . . . . . . . . . . . . . . . . . . . . 757
Setting up the app data structures . . . . . . . . . . . . . . . . . . . . . . . . . 757
Setting the app’s control values . . . . . . . . . . . . . . . . . . . . . . . . . . . 758
Getting the app’s control values . . . . . . . . . . . . . . . . . . . . . . . . . . . 761
Writing the custom CSS code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 763
Running the code…………………………………..765
Saving the custom CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765
Copying the custom CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 766
Resetting the CSS to the default . . . . . . . . . . . . . . . . . . . . . . . . . . . 767
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769