You are previewing Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition.

Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

Cover of Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition by Robin Nixon Published by O'Reilly Media, Inc.
  1. Learning PHP, MySQL, JavaScript, and CSS
  2. Dedication
  3. Preface
    1. Audience
    2. Assumptions This Book Makes
    3. Organization of This Book
    4. Supporting Books
    5. Conventions Used in This Book
    6. Using Code Examples
    7. Safari® Books Online
    8. How to Contact Us
    9. Acknowledgments
  4. 1. Introduction to Dynamic Web Content
    1. HTTP and HTML: Berners-Lee’s Basics
      1. The Request/Response Procedure
    2. The Benefits of PHP, MySQL, JavaScript, and CSS
      1. Using PHP
      2. Using MySQL
      3. Using JavaScript
      4. Using CSS
    3. The Apache Web Server
    4. About Open Source
    5. Bringing It All Together
    6. Test Your Knowledge
  5. 2. Setting Up a Development Server
    1. What Is a WAMP, MAMP, or LAMP?
    2. Installing a WAMP on Windows
      1. Testing the Installation
      2. Alternative WAMPs
    3. Installing a MAMP on OS X
      1. Configuring MySQL
      2. Testing the Installation
    4. Installing a LAMP on Linux
    5. Working Remotely
      1. Logging In
      2. Using FTP
    6. Using a Program Editor
    7. Using an IDE
    8. Test Your Knowledge
  6. 3. Introduction to PHP
    1. Incorporating PHP Within HTML
      1. Calling the PHP Parser
    2. This Book’s Examples
    3. The Structure of PHP
      1. Using Comments
      2. Basic Syntax
      3. Understanding Variables
      4. Operators
      5. Variable Assignment
      6. Multiple-Line Commands
      7. Variable Typing
      8. Constants
      9. The Difference Between the echo and print Commands
      10. Functions
      11. Variable Scope
    4. Test Your Knowledge
  7. 4. Expressions and Control Flow in PHP
    1. Expressions
      1. Literals and Variables
    2. Operators
      1. Operator Precedence
      2. Associativity
      3. Relational Operators
    3. Conditionals
      1. The if Statement
      2. The else Statement
      3. The elseif Statement
      4. The switch Statement
      5. The ? Operator
    4. Looping
      1. while Loops
      2. do…while Loops
      3. for Loops
      4. Breaking Out of a Loop
      5. The continue Statement
    5. Implicit and Explicit Casting
    6. PHP Dynamic Linking
      1. Dynamic Linking in Action
    7. Test Your Knowledge
  8. 5. PHP Functions and Objects
    1. PHP Functions
      1. Defining a Function
      2. Returning a Value
      3. Returning an Array
      4. Passing by Reference
      5. Returning Global Variables
      6. Recap of Variable Scope
    2. Including and Requiring Files
      1. The include Statement
      2. Using include_once
      3. Using require and require_once
    3. PHP Version Compatibility
    4. PHP Objects
      1. Terminology
      2. Declaring a Class
      3. Creating an Object
      4. Accessing Objects
      5. Constructors
      6. Writing Methods
      7. Declaring Properties
      8. Declaring Constants
      9. Property and Method Scope in PHP 5
      10. Inheritance
    5. Test Your Knowledge
  9. 6. PHP Arrays
    1. Basic Access
      1. Numerically Indexed Arrays
      2. Associative Arrays
      3. Assignment Using the array Keyword
    2. The Loop
    3. Multidimensional Arrays
    4. Using Array Functions
      1. is_array
      2. count
      3. sort
      4. shuffle
      5. explode
      6. extract
      7. compact
      8. reset
      9. end
    5. Test Your Knowledge
  10. 7. Practical PHP
    1. Using printf
      1. Precision Setting
      2. String Padding
      3. Using sprintf
    2. Date and Time Functions
      1. Date Constants
      2. Using checkdate
    3. File Handling
      1. Checking Whether a File Exists
      2. Creating a File
      3. Reading from Files
      4. Copying Files
      5. Moving a File
      6. Deleting a File
      7. Updating Files
      8. Locking Files for Multiple Accesses
      9. Reading an Entire File
      10. Uploading Files
    4. System Calls
    5. XHTML
      1. The Benefits of XHTML
      2. XHTML Versions
      3. What’s Different?
      4. HTML 4.01 Document Types
      5. The HTML5 Document Type
      6. XHTML 1.0 Document Types
      7. XHTML Validation
    6. Test Your Knowledge
  11. 8. Introduction to MySQL
    1. MySQL Basics
    2. Summary of Database Terms
    3. Accessing MySQL via the Command Line
      1. Starting the Command-Line Interface
      2. Using the Command-Line Interface
      3. MySQL Commands
      4. Data Types
    4. Indexes
      1. Creating an Index
      2. Querying a MySQL Database
      3. Joining Tables Together
      4. Using Logical Operators
    5. MySQL Functions
    6. Accessing MySQL via phpMyAdmin
      1. Windows Users
      2. OS X Users
      3. Linux Users
      4. Using phpMyAdmin
    7. Test Your Knowledge
  12. 9. Mastering MySQL
    1. Database Design
      1. Primary Keys: The Keys to Relational Databases
    2. Normalization
      1. First Normal Form
      2. Second Normal Form
      3. Third Normal Form
      4. When Not to Use Normalization
    3. Relationships
      1. One-to-One
      2. One-to-Many
      3. Many-to-Many
      4. Databases and Anonymity
    4. Transactions
      1. Transaction Storage Engines
      2. Using BEGIN
      3. Using COMMIT
      4. Using ROLLBACK
    5. Using EXPLAIN
    6. Backing Up and Restoring
      1. Using mysqldump
      2. Creating a Backup File
      3. Restoring from a Backup File
      4. Dumping Data in CSV Format
      5. Planning Your Backups
    7. Test Your Knowledge
  13. 10. Accessing MySQL Using PHP
    1. Querying a MySQL Database with PHP
      1. The Process
      2. Creating a Login File
      3. Connecting to MySQL
    2. A Practical Example
      1. The $_POST Array
      2. Deleting a Record
      3. Displaying the Form
      4. Querying the Database
      5. Running the Program
    3. Practical MySQL
      1. Creating a Table
      2. Describing a Table
      3. Dropping a Table
      4. Adding Data
      5. Retrieving Data
      6. Updating Data
      7. Deleting Data
      8. Using AUTO_INCREMENT
      9. Performing Additional Queries
      10. Preventing SQL Injection
      11. Preventing HTML Injection
    4. Test Your Knowledge
  14. 11. Form Handling
    1. Building Forms
    2. Retrieving Submitted Data
      1. register_globals: An Old Solution Hangs On
      2. Default Values
      3. Input Types
      4. Sanitizing Input
    3. An Example Program
    4. Test Your Knowledge
  15. 12. Cookies, Sessions, and Authentication
    1. Using Cookies in PHP
      1. Setting a Cookie
      2. Accessing a Cookie
      3. Destroying a Cookie
    2. HTTP Authentication
      1. Storing Usernames and Passwords
      2. Salting
    3. Using Sessions
      1. Starting a Session
      2. Ending a Session
      3. Session Security
    4. Test Your Knowledge
  16. 13. Exploring JavaScript
    1. JavaScript and HTML Text
      1. Using Scripts Within a Document Head
      2. Older and Nonstandard Browsers
      3. Including JavaScript Files
      4. Debugging JavaScript Errors
    2. Using Comments
    3. Semicolons
    4. Variables
      1. String Variables
      2. Numeric Variables
      3. Arrays
    5. Operators
      1. Arithmetic Operators
      2. Assignment Operators
      3. Comparison Operators
      4. Logical Operators
      5. Variable Incrementing and Decrementing
      6. String Concatenation
      7. Escaping Characters
    6. Variable Typing
    7. Functions
    8. Global Variables
      1. Local Variables
    9. The Document Object Model (DOM)
      1. But It’s Not That Simple
      2. Using the DOM
    10. Test Your Knowledge
  17. 14. Expressions and Control Flow in JavaScript
    1. Expressions
      1. Literals and Variables
    2. Operators
      1. Operator Precedence
      2. Associativity
      3. Relational Operators
    3. The with Statement
    4. Using onerror
    5. Using try...catch
    6. Conditionals
      1. The if Statement
      2. The switch statement
      3. The ? Operator
    7. Looping
      1. while Loops
      2. do…while Loops
      3. for Loops
      4. Breaking Out of a Loop
      5. The continue Statement
    8. Explicit Casting
    9. Test Your Knowledge
  18. 15. JavaScript Functions, Objects, and Arrays
    1. JavaScript Functions
      1. Defining a Function
      2. Returning a Value
      3. Returning an Array
    2. JavaScript Objects
      1. Declaring a Class
      2. Creating an Object
      3. Accessing Objects
      4. The prototype Keyword
    3. JavaScript Arrays
      1. Numeric Arrays
      2. Associative Arrays
      3. Multidimensional Arrays
      4. Using Array Methods
    4. Test Your Knowledge
  19. 16. JavaScript and PHP Validation and Error Handling
    1. Validating User Input with JavaScript
      1. The validate.html Document (Part One)
      2. The validate.html Document (Part Two)
    2. Regular Expressions
      1. Matching Through Metacharacters
      2. Fuzzy Character Matching
      3. Grouping Through Parentheses
      4. Character Classes
      5. Some More Complicated Examples
      6. Summary of Metacharacters
      7. General Modifiers
      8. Using Regular Expressions in JavaScript
      9. Using Regular Expressions in PHP
    3. Redisplaying a Form After PHP Validation
    4. Test Your Knowledge
  20. 17. Using Ajax
    1. What Is Ajax?
    2. Using XMLHttpRequest
    3. Implementing Ajax via POST Requests
      1. The readyState Property
      2. The Server Half of the Ajax Process
    4. Using GET Instead of POST
    5. Sending XML Requests
      1. About XML
      2. Why Use XML?
    6. Using Frameworks for Ajax
    7. Test Your Knowledge
  21. 18. Introduction to CSS
    1. Importing a Style Sheet
      1. Importing a Style Sheet from Within HTML
    2. Embedded Style Settings
      1. Using IDs
      2. Using Classes
    3. CSS Rules
      1. Using Semicolons
      2. Multiple Assignments
      3. Using Comments
    4. Style Types
      1. Default Styles
      2. User Styles
      3. External Style Sheets
      4. Internal Styles
      5. Inline Styles
    5. CSS Selectors
      1. The Type Selector
      2. The Descendant Selector
      3. The Child Selector
      4. The Adjacent Sibling Selector
      5. The ID Selector
      6. The Class Selector
      7. The Attribute Selector
      8. The Universal Selector
      9. Selecting by Group
    6. The CSS Cascade
      1. Style Sheet Creators
      2. Style Sheet Methods
      3. Style Sheet Selectors
    7. The Difference Between <div> and <span>
    8. Measurements
    9. Fonts and Typography
      1. font-family
      2. font-style
      3. font-size
      4. font-weight
    10. Managing Text Styles
      1. Decoration
      2. Spacing
      3. Alignment
      4. Transformation
      5. Indenting
    11. CSS Colors
      1. Short Color Strings
      2. Gradients
    12. Positioning Elements
      1. Absolute Positioning
      2. Relative Positioning
      3. Fixed Positioning
      4. Comparing Positioning Types
    13. Pseudoclasses
    14. Pseudoelements
    15. Shorthand Rules
    16. The Box Model and Layout
      1. Setting Margins
      2. Applying Borders
      3. Adjusting Padding
      4. Object Contents
    17. Test Your Knowledge
  22. 19. Advanced CSS with CSS3
    1. Attribute Selectors
      1. Matching Parts of Strings
    2. The box-sizing Property
    3. CSS3 Backgrounds
      1. The background-clip Property
      2. The background-origin Property
      3. The background-size Property
      4. Multiple Backgrounds
    4. CSS3 Borders
      1. The border-color Property
      2. The border-radius Property
    5. Box Shadows
    6. Element Overflow
    7. Multicolumn Layout
    8. Colors and Opacity
      1. HSL Colors
      2. HSLA Colors
      3. RGB Colors
      4. RGBA Colors
      5. The opacity Property
    9. Text Effects
      1. The text-shadow Property
      2. The text-overflow Property
      3. The word-wrap Property
    10. Web Fonts
      1. Google Web Fonts
    11. Transformations
    12. Transitions
      1. Properties to Transition
      2. Transition Duration
      3. Transition Delay
      4. Transition Timing
      5. Shorthand Syntax
    13. Test Your Knowledge
  23. 20. Accessing CSS from JavaScript
    1. Revisiting the getElementById Function
      1. The O Function
      2. The S Function
      3. The C Function
      4. Including the Functions
    2. Accessing CSS Properties from JavaScript
      1. Some Common Properties
      2. Other Properties
    3. Inline JavaScript
      1. The this Keyword
      2. Attaching Events to Objects in a Script
      3. Attaching to Other Events
    4. Adding New Elements
      1. Removing Elements
      2. Alternatives to Adding and Removing Elements
    5. Using Interrupts
      1. Using setTimeout
      2. Canceling a Timeout
      3. Using setInterval
      4. Using Interrupts for Animation
    6. Test Your Knowledge
  24. 21. Bringing It All Together
    1. Designing a Social Networking Site
    2. On the Website
    3. functions.php
      1. The Functions
    4. header.php
    5. setup.php
    6. index.php
    7. signup.php
      1. Checking for Username Availability
    8. checkuser.php
    9. login.php
    10. profile.php
      1. Adding the “About Me” Text
      2. Adding a Profile Image
      3. Processing the Image
      4. Displaying the Current Profile
    11. members.php
      1. Viewing a User’s Profile
      2. Adding and Dropping Friends
      3. Listing All Members
    12. friends.php
    13. messages.php
    14. logout.php
    15. styles.css
  25. A. Solutions to the Chapter Questions
    1. Chapter 1 Answers
    2. Chapter 2 Answers
    3. Chapter 3 Answers
    4. Chapter 4 Answers
    5. Chapter 5 Answers
    6. Chapter 6 Answers
    7. Chapter 7 Answers
    8. Chapter 8 Answers
    9. Chapter 9 Answers
    10. Chapter 10 Answers
    11. Chapter 11 Answers
    12. Chapter 12 Answers
    13. Chapter 13 Answers
    14. Chapter 14 Answers
    15. Chapter 15 Answers
    16. Chapter 16 Answers
    17. Chapter 17 Answers
    18. Chapter 18 Answers
    19. Chapter 19 Answers
    20. Chapter 20 Answers
  26. B. Online Resources
    1. PHP Resource Sites
    2. MySQL Resource Sites
    3. JavaScript Resource Sites
    4. Ajax Resource Sites
    5. Miscellaneous Resource Sites
    6. O’Reilly Resource Sites
  27. C. MySQL’s FULLTEXT Stopwords
  28. D. MySQL Functions
    1. String Functions
      1. CONCAT()
      2. CONCAT_WS()
      3. LEFT()
      4. RIGHT()
      5. MID()
      6. LENGTH()
      7. LPAD()
      8. RPAD
      9. LOCATE()
      10. LOWER()
      11. UPPER()
      12. QUOTE()
      13. REPEAT()
      14. REPLACE()
      15. TRIM()
      16. LTRIM() and RTRIM()
    2. Date Functions
      1. CURDATE()
      2. DATE()
      3. DATE_ADD()
      4. DATE_FORMAT()
      5. DAY()
      6. DAYNAME()
      7. DAYOFWEEK()
      8. DAYOFYEAR()
      9. LAST_DAY()
      10. MAKEDATE()
      11. MONTH()
      12. MONTHNAME()
      13. SYSDATE()
      14. YEAR()
      15. WEEK()
      16. WEEKDAY()
    3. Time Functions
      1. CURTIME()
      2. HOUR()
      3. MINUTE()
      4. SECOND()
      5. MAKETIME()
      6. TIMEDIFF()
      8. FROM_UNIXTIME()
  29. Index
  30. About the Author
  31. Colophon
  32. Copyright
O'Reilly logo

The Benefits of PHP, MySQL, JavaScript, and CSS

At the start of this chapter, I introduced the world of Web 1.0, but it wasn’t long before the rush was on to create Web 1.1, with the development of such browser enhancements as Java, JavaScript, JScript (Microsoft’s slight variant of JavaScript), and ActiveX. On the server side, progress was being made on the Common Gateway Interface (CGI) using scripting languages such as Perl (an alternative to the PHP language) and server-side scripting (dynamically inserting the contents of one file—or the output of a system call—into another one).

Once the dust had settled, three main technologies stood head and shoulders above the others. Although Perl was still a popular scripting language with a strong following, PHP’s simplicity and built-in links to the MySQL database program had earned it more than double the number of users. And JavaScript, which had become an essential part of the equation for dynamically manipulating CSS (Cascading Style Sheets), now took on the even more muscular task of handling the client side of the Ajax process. Under Ajax (described in Using JavaScript), web pages perform data handling and send requests to web servers in the background—without the web user being aware that this is going on.

No doubt the symbiotic nature of PHP and MySQL helped propel them both forward, but what attracted developers to them in the first place? The simple answer has to be the ease with which you can use these technologies to quickly create dynamic elements on websites. MySQL is a fast and powerful yet easy-to-use database system that offers just about anything a website might need in order to find and serve up data to browsers. When PHP allies with MySQL to store and retrieve this data, you have the fundamental parts required for the development of social networking sites and the beginnings of Web 2.0.

And when you bring JavaScript and CSS into the mix too, you have a recipe for building highly dynamic and interactive websites.

Using PHP

With PHP, it’s a simple matter to embed dynamic activity in web pages. When you give pages the .php extension, they have instant access to the scripting language. From a developer’s point of view, all you have to do is write code such as the following:

  echo "Hello World. Today is ".date("l").". ";

How are you?

The opening <?php tells the web server to allow the PHP program to interpret all the following code up to the ?> command. Outside of this construct, everything is sent to the client as direct HTML. So, the text “How are you?” is simply output to the browser; within the PHP tags, the built-in date function displays the current day of the week according to the server’s system time.

The final output of the two parts looks like this:

Hello World. Today is Wednesday. How are you?

PHP is a flexible language, and some people prefer to place the PHP construct directly next to PHP code, like this:

Hello World. Today is <?php echo date("l"); ?>. How are you?

There are also other ways of formatting and outputting information, which I’ll explain in the chapters on PHP. The point is that with PHP, web developers have a scripting language that, although not as fast as compiling your code in C or a similar language, is incredibly speedy and that also integrates seamlessly with HTML code.


If you intend to type in the PHP examples in this book to work along with me, you must remember to add <?php in front and ?> after them to ensure that the PHP interpreter processes them. To facilitate this, you may wish to prepare a file called example.php with those tags in place.

Using PHP, you have unlimited control over your web server. Whether you need to modify HTML on the fly, process a credit card, add user details to a database, or fetch information from a third-party website, you can do it all from within the same PHP files in which the HTML itself resides.

Using MySQL

Of course, there’s not a lot of point to being able to change HTML output dynamically unless you also have a means to track the changes that users make as they use your website. In the early days of the Web, many sites used “flat” text files to store data such as usernames and passwords. But this approach could cause problems if the file wasn’t correctly locked against corruption from multiple simultaneous accesses. Also, a flat file can get only so big before it becomes unwieldy to manage—not to mention the difficulty of trying to merge files and perform complex searches in any kind of reasonable time.

That’s where relational databases with structured querying become essential. And MySQL, being free to use and installed on vast numbers of Internet web servers, rises superbly to the occasion. It is a robust and exceptionally fast database management system that uses English-like commands.

The highest level of MySQL structure is a database, within which you can have one or more tables that contain your data. For example, let’s suppose you are working on a table called users, within which you have created columns for surname, firstname, and email, and you now wish to add another user. One command that you might use to do this is:

INSERT INTO users VALUES('Smith', 'John', '');

Of course, as mentioned earlier, you will have issued other commands to create the database and table and to set up all the correct fields, but the INSERT command here shows how simple it can be to add new data to a database. The INSERT command is an example of SQL (which stands for Structured Query Language), a language designed in the early 1970s and reminiscent of one of the oldest programming languages, COBOL. It is well suited, however, to database queries, which is why it is still in use after all this time.

It’s equally easy to look up data. Let’s assume that you have an email address for a user and you need to look up that person’s name. To do this, you could issue a MySQL query such as:

SELECT surname,firstname FROM users WHERE email='';

MySQL will then return Smith, John and any other pairs of names that may be associated with that email address in the database.

As you’d expect, there’s quite a bit more that you can do with MySQL than just simple INSERT and SELECT commands. For example, you can join multiple tables according to various criteria, ask for results in a variety of different orders, make partial matches when you know only part of the string that you are searching for, return only the nth result, and a lot more.

Using PHP, you can make all these calls directly to MySQL without having to run the MySQL program yourself or use its command-line interface. This means you can save the results in arrays for processing and perform multiple lookups, each dependent on the results returned from earlier ones, to drill right down to the item of data you need.

For even more power, as you’ll see later, there are additional functions built right into MySQL that you can call up for common operations and extra speed.

Using JavaScript

The oldest of the core technologies described in this book, JavaScript, was created to enable scripting access to all the elements of an HTML document. In other words, it provides a means for dynamic user interaction such as checking email address validity in input forms, displaying prompts such as “Did you really mean that?” and so on (although it cannot be relied upon for security, which should always be performed on the web server).

Combined with CSS (see the following section), JavaScript is the power behind dynamic web pages that change in front of your eyes rather than when the server returns a new page.

However, JavaScript can also be tricky to use, due to some major differences between the ways different browser designers have chosen to implement it. This mainly came about when some manufacturers tried to put additional functionality into their browsers at the expense of compatibility with their rivals.

Thankfully, the developers have mostly now come to their senses and have realized the need for full compatibility between their products, so web developers don’t have to write multiexception code. But there remain millions of legacy browsers that will be in use for a good many years to come. Luckily, there are solutions for the incompatibility problems, and later in this book we’ll look at techniques that enable you to safely ignore these differences.

For now, let’s take a quick look at how you can use basic JavaScript, accepted by all browsers:

<script type="text/javascript">
  document.write("Hello World. Today is " + Date() );

This code snippet tells the web browser to interpret everything within the script tags as JavaScript, which the browser then interprets by writing the text “Hello World. Today is ” to the current document, along with the date, by using the JavaScript function Date. The result will look something like this:

Hello World. Today is Thu Jan 01 2015 01:23:45


It’s worth knowing that unless you need to specify an exact version of JavaScript, you can normally omit the type="text/javascript" and just use <script> to start the interpretation of the JavaScript.

As previously mentioned, JavaScript was originally developed to offer dynamic control over the various elements within an HTML document, and that is still its main use. But more and more, JavaScript is being used for Ajax. This is a term for the process of accessing the web server in the background. (It originally meant “Asynchronous JavaScript and XML,” but that phrase is already a bit outdated.)

Ajax is the main process behind what is now known as Web 2.0 (a term popularized by Tim O’Reilly, the founder and CEO of this book’s publishing company), in which web pages have started to resemble standalone programs, because they don’t have to be reloaded in their entirety. Instead, a quick Ajax call can pull in and update a single element on a web page, such as changing your photograph on a social networking site or replacing a button that you click with the answer to a question. This subject is fully covered in Chapter 17.

Using CSS

With the emergence of the CSS3 standard in recent years, CSS now offers a level of dynamic interactivity previously supported only by JavaScript. For example, not only can you style any HTML element to change its dimensions, colors, borders, spacing, and so on, but now you can also add animated transitions and transformations to your web pages, using only a few lines of CSS.

Using CSS can be as simple as inserting a few rules between <style> and </style> tags in the head of a web page, like this:


These rules will change the default justification of the <p> tag so that paragraphs contained in it will be fully justified and will use the Helvetica font.

As you’ll learn in Chapter 18, there are many different ways you can lay out CSS rules, and you can also include them directly within tags or save a set of rules to an external file to be loaded in separately. This flexibility lets you do more than style your HTML precisely; you will also see how it can (for example) provide built-in hover functionality to animate objects as the mouse pointer passes over them. You will also learn how to access all of an element’s CSS properties from JavaScript as well as HTML.

The best content for your career. Discover unlimited learning on demand for around $1/day.