Learning PHP, MySQL & JavaScript
Build interactive, data-driven websites with the potent combination of open-source technologies and web standards, even if you have only basic HTML knowledge. With this popular hands-on guide, you’ll tackle dynamic web programming with the help of today’s core technologies: PHP, MySQL, JavaScript, jQuery, CSS, and HTML5.
Explore each technology separately, learn how to use them together, and pick up valuable web programming practices along the way. At the end of the book, you’ll put everything together to build a fully functional social networking site, using XAMPP or any development stack you choose.
■■ Learn PHP in-depth, along with the basics of object-oriented programming
■■ Explore MySQL, from database structure to complex queries
■■ Use the MySQLi Extension, PHP’s improved MySQL interface
■■ Create dynamic PHP web pages that tailor themselves to the user
■■ Manage cookies and sessions, and maintain a high level of security
■■ Master the JavaScript language—and enhance it with jQuery
■■ Use Ajax calls for background browser/server communication
■■ Acquire CSS2 & CSS3 skills for professionally styling your web pages
■■ Implement all of the new HTML5 features, including geolocation, audio, video, and the canvas
Robin Nixon, an IT journalist who has written hundreds of articles and several books on computing, has developed numerous websites using open source tools, specializing in the technologies featured in this book. Robin has worked with and written about computers since the early 1980s.
Table of Contents
1. Introduction to Dynamic Web Content 1
HTTP and HTML: Berners-Lee’s Basics 2
The Request/Response Procedure 2
The Benefits of PHP, MySQL, JavaScript, CSS, and HTML5 5
Using PHP 6
Using MySQL 7
Using JavaScript 8
Using CSS 9
And Then There’s HTML5 10
The Apache Web Server 11
About Open Source 12
Bringing It All Together 12
Questions 14
2. Setting Up a Development Server 15
What Is a WAMP, MAMP, or LAMP? 16
Installing XAMPP on Windows 16
Testing the Installation 24
Installing XAMPP on Mac OS X 27
Accessing the Document Root 27
Installing a LAMP on Linux 28
Working Remotely 28
Logging In 28
Using FTP 29
Using a Program Editor 30
Using an IDE 31
Incorporating PHP Within HTML 35
This Book’s Examples 37
The Structure of PHP 38
Using Comments 38
Basic Syntax 39
Variables 40
Operators 45
Variable Assignment 48
Multiple-Line Commands 50
Variable Typing 52
Constants 53
Predefined Constants 54
The Difference Between the echo and print Commands 55
Functions 55
Variable Scope 56
Questions 62
Expressions 63
TRUE or FALSE? 63
Literals and Variables 65
Operators 66
Operator Precedence 67
Associativity 69
Relational Operators 70
Conditionals 74
The if Statement 75
The else Statement 76
The elseif Statement 78
The switch Statement 79
The ? Operator 82
Looping 83
while Loops 84
do...while Loops 86
for Loops 86
Breaking Out of a Loop 88
The continue Statement 89
Implicit and Explicit Casting 90
PHP Dynamic Linking 91
Dynamic Linking in Action 92
Questions 93
PHP Functions 96
Defining a Function 98
Returning a Value 98
Returning an Array 100
Do Not Pass Arguments by Reference 100
Returning Global Variables 102
Recap of Variable Scope 103
Including and Requiring Files 103
The include Statement 104
Using include_once 104
Using require and require_once 105
PHP Version Compatibility 105
PHP Objects 106
Terminology 106
Declaring a Class 107
Creating an Object 108
Accessing Objects 109
Cloning Objects 110
Constructors 111
PHP 5 Destructors 112
Writing Methods 112
Static Methods in PHP 5 113
Declaring Properties 114
Declaring Constants 115
Property and Method Scope in PHP 5 115
Static Properties and Methods 116
Inheritance 118
Questions 121
Basic Access 123
Numerically Indexed Arrays 123
Associative Arrays 125
Assignment Using the array Keyword 126
The foreach...as Loop 127
Multidimensional Arrays 129
Using Array Functions 132
is_array 132
count 132
sort 133
shuffle 133
explode 133
extract 134
compact 135
reset 136
end 136
Questions 137
7. Practical PHP 139
Using printf 139
Precision Setting 140
String Padding 142
Using sprintf 143
Date and Time Functions 143
Date Constants 146
Using checkdate 146
File Handling 147
Checking Whether a File Exists 147
Creating a File 147
Reading from Files 149
Copying Files 150
Moving a File 150
Deleting a File 151
Updating Files 151
Locking Files for Multiple Accesses 152
Reading an Entire File 154
Uploading Files 155
System Calls 160
XHTML or HTML5? 162
Questions 162
MySQL Basics 165
Summary of Database Terms 166
Accessing MySQL via the Command Line 166
Starting the Command-Line Interface 167
Using the Command-Line Interface 171
MySQL Commands 172
Data Types 177
Indexes 186
Creating an Index 186
Querying a MySQL Database 192
Joining Tables Together 202
Using Logical Operators 204
MySQL Functions 204
Accessing MySQL via phpMyAdmin 205
Questions 206
Database Design 209
Primary Keys: The Keys to Relational Databases 210
Normalization 211
First Normal Form 212
Second Normal Form 214
Third Normal Form 217
When Not to Use Normalization 219
Relationships 219
One-to-One 219
One-to-Many 220
Many-to-Many 221
Databases and Anonymity 222
Transactions 223
Transaction Storage Engines 223
Using BEGIN 224
Using COMMIT 225
Using ROLLBACK 225
Using EXPLAIN 226
Backing Up and Restoring 227
Using mysqldump 227
Creating a Backup File 229
Restoring from a Backup File 231
Dumping Data in CSV Format 231
Planning Your Backups 232
Questions 232
Querying a MySQL Database with PHP 233
The Process 233
Creating a Login File 234
Connecting to a MySQL Database 235
A Practical Example 240
The $_POST Array 243
Deleting a Record 244
Displaying the Form 245
Querying the Database 246
Running the Program 247
Practical MySQL 248
Creating a Table 248
Describing a Table 249
Dropping a Table 250
Adding Data 250
Retrieving Data 251
Updating Data 251
Deleting Data 252
Using AUTO_INCREMENT 252
Performing Additional Queries 254
Preventing Hacking Attempts 255
Steps You Can Take 256
Using Placeholders 257
Preventing HTML Injection 259
Using mysqli Procedurally 261
Questions 263
11. Form Handling 265
Building Forms 265
Retrieving Submitted Data 267
register_globals: An Old Solution Hangs On 268
Default Values 269
Input Types 270
Sanitizing Input 277
An Example Program 279
What’s New in HTML5? 281
The autocomplete Attribute 282
The autofocus Attribute 282
The placeholder Attribute 282
The required Attribute 282
Override Attributes 283
The width and height Attributes 283
Features Awaiting Full Implementation 283
The form Attribute 283
The list Attribute 284
The min and max Attributes 284
The step Attribute 284
The color Input Type 285
The number and range Input Types 285
Date and Time Pickers 285
Questions 285
12. Cookies, Sessions, and Authentication 287
Using Cookies in PHP 287
Setting a Cookie 289
Accessing a Cookie 290
Destroying a Cookie 290
HTTP Authentication 290
Storing Usernames and Passwords 294
Salting 294
Using Sessions 298
Starting a Session 299
Ending a Session 302
Setting a Time-Out 303
Session Security 303
Questions 307
JavaScript and HTML Text 310
Using Scripts Within a Document Head 311
Older and Nonstandard Browsers 311
Including JavaScript Files 312
Debugging JavaScript Errors 313
Using Comments 315
Semicolons 315
Variables 316
String Variables 316
Numeric Variables 317
Arrays 317
Operators 318
Arithmetic Operators 318
Assignment Operators 318
Comparison Operators 319
Logical Operators 319
Variable Incrementing and Decrementing 320
String Concatenation 320
Escaping Characters 320
Variable Typing 321
Functions 322
Global Variables 322
Local Variables 323
The Document Object Model 324
But It’s Not That Simple 326
Using the DOM 327
About document.write 328
Using console.log 328
Using alert 328
Writing into Elements 329
Using document.write 329
Questions 329
14. Expressions and Control Flow in JavaScript 331
Expressions 331
Literals and Variables 332
Operators 333
Operator Precedence 334
Associativity 334
Relational Operators 335
The with Statement 338
Using onerror 339
Using try...catch 340
Conditionals 341
The if Statement 341
The else Statement 341
The switch Statement 342
The ? Operator 344
Looping 344
while Loops 344
do...while Loops 345
for Loops 346
Breaking Out of a Loop 346
The continue Statement 347
Explicit Casting 348
Questions 348
15. JavaScript Functions, Objects, and Arrays 351
JavaScript Functions 351
Defining a Function 351
Returning a Value 353
Returning an Array 355
JavaScript Objects 356
Declaring a Class 356
Creating an Object 357
Accessing Objects 358
The prototype Keyword 358
JavaScript Arrays 361
Numeric Arrays 361
Associative Arrays 362
Multidimensional Arrays 363
Using Array Methods 364
Questions 369
16. JavaScript and PHP Validation and Error Handling 371
Validating User Input with JavaScript 371
The validate.html Document (Part 1) 372
The validate.html Document (Part 2) 374
Regular Expressions 377
Matching Through Metacharacters 378
Fuzzy Character Matching 378
Grouping Through Parentheses 379
Character Classes 380
Indicating a Range 380
Negation 380
Some More-Complicated Examples 381
Summary of Metacharacters 383
General Modifiers 385
Using Regular Expressions in JavaScript 386
Using Regular Expressions in PHP 386
Redisplaying a Form After PHP Validation 387
Questions 393
17. Using Ajax 395
What Is Ajax? 395
Using XMLHttpRequest 396
Your First Ajax Program 398
Using Get Instead of Post 403
Sending XML Requests 406
Using Frameworks for Ajax 411
Questions 411
18. Introduction to CSS 413
Importing a Style Sheet 414
Importing CSS from Within HTML 414
Embedded Style Settings 415
Using IDs 415
Using Classes 415
Using Semicolons 416
CSS Rules 416
Multiple Assignments 416
Using Comments 417
Style Types 418
Default Styles 418
User Styles 418
External Style Sheets 419
Internal Styles 419
Inline Styles 420
CSS Selectors 420
The Type Selector 420
The Descendant Selector 420
The Child Selector 421
The ID Selector 422
The Class Selector 423
The Attribute Selector 423
The Universal Selector 424
Selecting by Group 425
The CSS Cascade 425
Style Sheet Creators 426
Style Sheet Methods 426
Style Sheet Selectors 426
Calculating Specificity 427
The Difference Between Div and Span Elements 429
Measurements 431
Fonts and Typography 432
font-family 433
font-style 433
font-size 434
font-weight 434
Managing Text Styles 435
Decoration 435
Spacing 435
Alignment 436
Transformation 436
Indenting 436
CSS Colors 437
Short Color Strings 438
Gradients 438
Positioning Elements 439
Absolute Positioning 440
Relative Positioning 440
Fixed Positioning 440
Pseudoclasses 442
Shorthand Rules 444
The Box Model and Layout 445
Setting Margins 445
Applying Borders 447
Adjusting Padding 448
Object Contents 450
Questions 450
Attribute Selectors 451
Matching Parts of Strings 452
The box-sizing Property 453
CSS3 Backgrounds 453
The background-clip Property 454
The background-origin Property 456
The background-size Property 456
Using the auto Value 457
Multiple Backgrounds 457
CSS3 Borders 459
The border-color Property 459
The border-radius Property 459
Box Shadows 462
Element Overflow 463
Multicolumn Layout 463
Colors and Opacity 465
HSL Colors 465
HSLA Colors 466
RGB Colors 466
RGBA Colors 467
The opacity Property 467
Text Effects 467
The text-shadow Property 467
The text-overflow Property 468
The word-wrap Property 469
Web Fonts 469
Google Web Fonts 470
Transformations 472
3D Transformations 473
Transitions 474
Properties to Transition 474
Transition Duration 475
Transition Delay 475
Transition Timing 475
Shorthand Syntax 476
Questions 477
Revisiting the getElementById Function 479
The O function 479
The S Function 480
The C Function 481
Including the Functions 482
Accessing CSS Properties from JavaScript 482
Some Common Properties 483
Other Properties 484
Inline JavaScript 486
The this Keyword 486
Attaching Events to Objects in a Script 487
Attaching to Other Events 488
Adding New Elements 489
Removing Elements 490
Alternatives to Adding and Removing Elements 491
Using Interrupts 492
Using setTimeout 492
Cancelling a Time-Out 493
Using setInterval 493
Using Interrupts for Animation 495
Questions 497
Why jQuery? 500
Including jQuery 500
Choosing the Right Version 500
Downloading 501
Using a Content Delivery Network 502
Always Using the Latest Version 503
Customizing jQuery 503
jQuery Syntax 503
A Simple Example 504
Avoiding Library Conflict 505
Selectors 505
The css Method 506
The Element Selector 506
The ID Selector 507
The Class Selector 507
Combining Selectors 507
Handling Events 508
Waiting Until the Document Is Ready 509
Event Functions and Properties 510
The blur and focus Events 511
The this Keyword 512
The click and dblclick Events 512
The keypress Event 513
Considerate Programming 515
The mousemove Event 515
Other Mouse Events 518
Alternative Mouse Methods 519
The submit Event 520
Special Effects 521
Hiding and Showing 522
The toggle Method 523
Fading In and Out 524
Sliding Elements Up and Down 525
Animations 526
Stopping Animations 529
Manipulating the DOM 530
The Difference Between The text and html Methods 531
The val and attr Methods 531
Adding and Removing Elements 533
Dynamically Applying Classes 535
Modifying Dimensions 535
The width and height Methods 536
The innerWidth and innerHeight Methods 538
The outerWidth and OuterHeight Methods 538
DOM Traversal 539
Parent Elements 539
Child Elements 543
Sibling Elements 543
Selecting the Next and Previous Elements 545
Traversing jQuery Selections 546
The is Method 548
Using jQuery Without Selectors 549
The $.each Method 550
The $.map Method 551
Using Ajax 551
Using the Post Method 551
Using the Get Method 552
Plug-Ins 553
The jQuery User Interface 553
Other Plug-Ins 553
jQuery Mobile 554
Questions 555
The Canvas 558
Geolocation 559
Audio and Video 561
Forms 562
Local Storage 563
Web Workers 563
Web Applications 563
Microdata 564
Summary 564
Questions 564
Creating and Accessing a Canvas 565
The toDataURL Function 567
Specifying an Image Type 569
The fillRect Method 569
The clearRect Method 569
The strokeRect Method 570
Combining These Commands 570
The createLinearGradient Method 571
The addColorStop Method in Detail 573
The createRadialGradient Method 574
Using Patterns for Fills 576
Writing Text to the Canvas 578
The strokeText Method 578
The textBaseLine Property 579
The font Property 579
The textAlign Property 579
The fillText Method 580
The measureText Method 581
Drawing Lines 581
The lineWidth Property 581
The lineCap and lineJoin Properties 581
The miterLimit Property 584
Using Paths 584
The moveTo and LineTo Methods 584
The stroke Method 585
The rect Method 585
Filling Areas 586
The clip Method 587
The isPointInPath Method 590
Working with Curves 591
The arc Method 591
The arcTo Method 594
The quadraticCurveTo Method 595
The bezierCurveTo Method 596
Manipulating Images 597
The drawImage Method 597
Resizing an Image 598
Selecting an Image Area 598
Copying from a Canvas 600
Adding Shadows 600
Editing at the Pixel Level 602
The getImageData Method 602
The data Array 603
The putImageData Method 605
The createImageData Method 605
Advanced Graphical Effects 606
The globalCompositeOperation Property 606
The globalAlpha Property 609
Transformations 609
The scale Method 609
The save and restore Methods 610
The rotate Method 611
The translate Method 612
The transform Method 613
The setTransform Method 615
Summary 615
Questions 616
About Codecs 618
The <audio> Element 619
Supporting Non-HTML5 Browsers 621
The <video> Element 623
The Video Codecs 623
Supporting Older Browsers 627
Summary 629
Questions 629
25. Other HTML5 Features 631
Geolocation and the GPS Service 631
Other Location Methods 632
Geolocation and HTML5 632
Local Storage 636
Using Local Storage 637
The localStorage Object 637
Web Workers 639
Offline Web Applications 641
Drag and Drop 643
Cross-Document Messaging 645
Microdata 648
Other HTML5 Tags 651
Summary 652
Questions 652
26. Bringing It All Together 653
Designing a Social Networking Site 653
On the Website 654
functions.php 654
The Functions 654
header.php 656
setup.php 658
index.php 660
signup.php 661
Checking for Username Availability 661
Logging In 662
checkuser.php 665
login.php 665
profile.php 667
Adding the “About Me” Text 668
Adding a Profile Image 668
Processing the Image 668
Displaying the Current Profile 669
members.php 672
Viewing a User’s Profile 672
Adding and Dropping Friends 672
Listing All Members 672
friends.php 675
messages.php 678
logout.php 681
styles.css 682
javascript.js 685
A. Solutions to the Chapter Questions 687
B. Online Resources 707
C. MySQL’s FULLTEXT Stopwords 711
D. MySQL Functions 715
E. jQuery Selectors, Objects, and Methods 725
Index 747
Preface
The combination of PHP and MySQL is the most convenient approach to dynamic, database-driven web design, holding its own in the face of challenges from integrated frameworks—such as Ruby on Rails—that are harder to learn. Due to its open source roots (unlike the competing Microsoft .NET Framework), it is free to implement and is therefore an extremely popular option for web development.
Any would-be developer on a Unix/Linux or even a Windows/Apache platform will need to master these technologies. And, combined with the partner technologies of JavaScript, jQuery, CSS, and HTML5, you will be able to create websites of the caliber of industry standards like Facebook, Twitter, and Gmail.
Audience
This book is for people who wish to learn how to create effective and dynamic websites. This may include webmasters or graphic designers who are already creating static websites but wish to take their skills to the next level, as well as high school and college students, recent graduates, and self-taught individuals.
In fact, anyone ready to learn the fundamentals behind the Web 2.0 technology known as Ajax will obtain a thorough grounding in all of these core technologies:
PHP, MySQL, JavaScript, CSS, and HTML5, and learn the basics of the jQuery library too.
Assumptions This Book Makes
This book assumes that you have a basic understanding of HTML and can at least put together a simple, static website, but does not assume that you have any prior knowledge of PHP, MySQL, JavaScript, CSS, or HTML5—although if you do, your progress through the book will be even quicker.
Organization of This Book
The chapters in this book are written in a specific order, first introducing all of the core technologies it covers and then walking you through their installation on a web development server so that you will be ready to work through the examples.
In the first section, you will gain a grounding in the PHP programming language, covering the basics of syntax, arrays, functions, and object-oriented programming.
Then, with PHP under your belt, you will move on to an introduction to the MySQL database system, where you will learn everything from how MySQL databases are structured to how to generate complex queries.
After that, you will learn how you can combine PHP and MySQL to start creating your own dynamic web pages by integrating forms and other HTML features. Following that, you will get down to the nitty-gritty practical aspects of PHP and MySQL development by learning a variety of useful functions and how to manage cookies and sessions, as well as how to maintain a high level of security.
In the next few chapters, you will gain a thorough grounding in JavaScript, from simple functions and event handling to accessing the Document Object Model and in browser validation and error handling, plus a comprehensive primer on using the popular jQuery library for JavaScript.
With an understanding of all three of these core technologies, you will then learn how to make behind-the-scenes Ajax calls and turn your websites into highly dynamic environments.
Next, you’ll spend two chapters learning all about using CSS to style and lay out your web pages, before moving on to the final section on the new features built into HTML5, including geolocation, audio, video, and the canvas. After this, you’ll put together everything you’ve learned in a complete set of programs that together constitute a fully functional social networking website.
Along the way, you’ll find plenty of advice on good programming practices and tips that could help you find and solve hard-to-detect programming errors. There are also plenty of links to websites containing further details on the topics covered.
Supporting Books
Once you have learned to develop using PHP, MySQL, JavaScript, CSS, and HTML5, you will be ready to take your skills to the next level using the following O’Reilly reference books. To learn more about any of these titles, simply enter the ISBN shown next to it into the search box at oreilly.com or at any good online book seller’s website.
• Dynamic HTML: The Definitive Reference (9780596527402) by Danny Goodman
• PHP in a Nutshell (9780596100674) by Paul Hudson
• MySQL in a Nutshell (9780596514334) by Russell Dyer
• JavaScript: The Definitive Guide (9780596805524) by David Flanagan
• CSS: The Definitive Guide (9780596527334) by Eric A. Myer
• HTML5: The Missing Manual (9781449363260) by Matthew MacDonald
Introduction to Dynamic Web Content
The World Wide Web is a constantly evolving network that has already traveled far beyond its conception in the early 1990s, when it was created to solve a specific problem. State-of-the-art experiments at CERN (the European Laboratory for Particle Physics—now best known as the operator of the Large Hadron Collider) were producing incredible amounts of data—so much that the data was proving unwieldy to distribute to the participating scientists who were spread out across the world.
At this time, the Internet was already in place, with several hundred thousand computers connected to it, so Tim Berners-Lee (a CERN fellow) devised a method of navigating between them using a hyperlinking framework, which came to be known as Hypertext Transfer Protocol, or HTTP. He also created a markup language called Hypertext Markup Language, or HTML. To bring these together, he wrote the first web browser and web server, tools that we now take for granted.
But back then, the concept was revolutionary. The most connectivity so far experienced by at-home modem users was dialing up and connecting to a bulletin board that was hosted by a single computer, where you could communicate and swap data only with other users of that service. Consequently, you needed to be a member of many bulletin board systems in order to effectively communicate electronically with your colleagues and friends.
But Berners-Lee changed all that in one fell swoop, and by the mid-1990s, there were three major graphical web browsers competing for the attention of 5 million users. It soon became obvious, though, that something was missing. Yes, pages of text and graphics with hyperlinks to take you to other pages was a brilliant concept, but the results didn’t reflect the instantaneous potential of computers and the Internet to meet the particular needs of each user with dynamically changing content. Using the Web was a very dry and plain experience, even if we did now have scrolling text and animated GIFs!
Shopping carts, search engines, and social networks have clearly altered how we use the Web. In this chapter, we’ll take a brief look at the various components that make up the Web, and the software that helps make it a rich and dynamic experience.
HTTP and HTML: Berners-Lee’s Basics
HTTP is a communication standard governing the requests and responses that take place between the browser running on the end user’s computer and the web server.
The server’s job is to accept a request from the client and attempt to reply to it in a meaningful way, usually by serving up a requested web page—that’s why the term server is used. The natural counterpart to a server is a client, so that term is applied both to the web browser and the computer on which it’s running.
Between the client and the server there can be several other devices, such as routers, proxies, gateways, and so on. They serve different roles in ensuring that the requests and responses are correctly transferred between the client and server. Typically, they use the Internet to send this information.
A web server can usually handle multiple simultaneous connections and—when not communicating with a client—spends its time listening for an incoming connection. When one arrives, the server sends back a response to confirm its receipt.
