Outline

• Finish CSS
• Intro to PHP
• Quiz
• General Syntax of PHP

Box Model

• On Wednesday, we finished talking about alignment and positioning of text within a block level element: text-indent, text-align, etc. properties.
• Today, we start by looking at the different properties of a block element used to decide how to draw the element in a browser.
• Each element in XHTML/HTML has properties which control its border and the amount of white space around it.
• This is called the box model:
  
• This model is also used when you use CSS with other kinds of XML documents.

More on the Box Model

• Controlling the border:

  border-style:

  This can be none, solid, dotted, dashed, double

  border-width:

  This can be a length in pixels or thin, medium, or thick. You can more finely control each side of the border by using the properties: border-top-width, border-bottom-width, border-left-width, bottom-right-width border-color: This sets the color of the border. This can also be more finely controlled with border-top-color, border-bottom-color, border-left-color, and border-right-color.

• Controlling margins and padding: These can be controlled using the properties: margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom.
• For block elements like the table tag, we use the margin property if we want to center them within a container -- you can't do this with text-align. To do this, set the left and right margin to have value auto and then define the table's width.

Background Images

• The background-image property is used to place an image in the background of an element:

  body {background-image: url(background.jpg);}
  

• The way this image is displayed can be further controlled using the properties:

  background-repeat:

  this may have values: no-repeat, repeat-x, repeat-y

  background-position:

  this may have values which are space separated combinations of top, center, bottom, left, and right. You can also give an x and y value for the image offset in each direction. This is useful for sprites.

Position and Display Properties

• The position property can have the value static (default), relative (says to place element relative to the last element), absolute (says to place element at some offset from top left of display), fixed (keep at that location even if scroll bar used).
• For example,

  <style type="text/css"> 
     p.first {position: absolute; top:1in; left:2in;}
     p.second {position: relative; left:-1in;}
  </style> 
  <p class="first">displays one inch down 
  two inches from left of top of screen</p>
  <p class="second">displays 1inch to the left 
  of where the first paragraph finished</p>
  

• The display property can take values block, inline, inline-block or none. block causes the box model to be used, inline makes the element data flow like text, and none does not render the element. You can also set the property "visibility: hidden" which renders the element in the background color
• Other useful properties are width and height which set and control respectively the width and height of an element.

Keyboard Shortcuts

• We are now done talking about CSS.
• As a brief interlude before beginning our next major topic -- which is PHP-- I thought I would point out a useful way to make web pages more accessible.
• This is to use the accesskey attribute of an element within the web page:

  <input type="text" name="fname" accesskey="f" />
  

• Now when ALT-f (maybe CTRL-f on a Mac) is typed the focus will go directly to this element.

Introducing PHP

• PHP was developed by Rasmus Lerdorf around 1994-1995.
• PHP originally stood for Personal Home Page, later PHP became an acronym for PHP: Hypertext Processor.
• It is one of the most common server-side programming languages.
• According to Tiobe, it is ranked seventh in overall popularity amongst all languages for any use.
• The Wikipedia article on PHP says over 20 million domains are hosted on servers with PHP enabled.
• Sites such as Yahoo, Facebook, Wikipedia, Digg are written in a flavor of PHP. Yahoo is transitioning to Node.js. Wordpress, Drupal, Joomla, vBulletin, phpBB, Laravel, Symfony, MantisBT, Roundcube etc are written in PHP.
• Here is a list of what popular websites use.
• The most recent version of PHP is PHP 7. The big advantage of PHP 7 over its predecessor is that its interpreter is almost twice as fast.
• If you believe in language benchmarks... PHP tends to be faster than Python (more than twice as fast on most benchmarks).
• One oft-touted advantage of PHP is its shared nothing architecture: Each PHP request is distinct and does not directly share memory/data with other requests. Shared data is stored in filesystem/memory cache/database/etc.
• This can make PHP easier to debug and easier to scale.

Overview

• The web site for PHP is http://www.php.net/ and its manual is at http://php.net/manual/en/index.php.
• Facebook's hhvm is an alternative implementation to PHP that runs at speeds comparable to PHP 7. It also interprets the Hack language -- a typed variant of PHP. hhvm is used by Facebook and Wikipedia.
• The web server determines that a page is PHP usually by looking for one of the extensions .php, .php3, .phtml
• When called from the web server on a PHP page, the PHP processor takes a PHP document and starts processing in one of two modes.
• When it sees XHTML it simply copies it to the output. (Copy mode).
• When it sees PHP code it executes the code and writes the result to the output.(Interpretive mode)
• PHP is typically interpreted but it also can be precompiled.
• The syntax of PHP is closely related to Perl and Javascript.

Configuring PHP

• PHP should be installed and running on your machines as of HW1.
• PHP can be run either using the Apache module, from the command line, or using the built-in web-server that comes with PHP (> 5.4.4).
• From the command line:
  

  php name_of_script.php #runs name_of_script.php
  php -a # run in enter interactive mode. will get a prompt...
  php > echo "hello world";
  hello world
  php > quit
  cd ~/public_html 
  php -S localhost:8000 #starts built-in web server on port 8000
      # using current dir as document root
  

• You can fine-tune how PHP runs by editing the file php.ini
• A ';' is used to indicate a comment in this file.
• The most common thing for people to change is to have a line:

  short_open_tag = On
  

  so that you can escape to a PHP script using <? rather than <?php
• Unfortunately, using the short open tag can mean your script is not as portable so for this class we will leave this off.
• Xampp sets things this way by default so for today we will not worry about this. -- Many open source projects prefer long tags for compatibility.
• Another common thing to change is the amount of error reporting PHP gives.
• By default, it is assumed we are in a production environment so none is given.
• For today, we want error-reporting. So find the line:

  ;error_reporting = E_ALL & ~E_NOTICE
  

  and uncomment it, restart Apache

Quiz

Which of the following statements is true?

1. The align attribute is used in HTML 5 to control the vertical centering of text within a td tags.
2. To make a table data tag, a td tag, span several columns one could use the colspan attribute.
3. To associate styles with tags having a particular class attribute one can use an ID selector in CSS.

Quiz

Which of the following statements is true?

1. To make a table header tag, a th tag, span several rows one could use the rowspan attribute.
2. The valign attribute is used in HTML 5 to force the centering of text on a line within td tags.
3. To associate styles with tags of a particular ID one can use a class selector in CSS.

General Syntax

• Recall a section of PHP code is delimited with <?php ... code here ...?>
• The command include("filename.php"); can be used to include one document in another.
• If the filename.php can't be found the script continues. To cause the script to fail in this case, you could use require("filename.php");
• To prevent multiple inclusions of the same file you could use include_once, or require_once.
• All variables in PHP begin with a $ sign. Names of variables are otherwise alphanumeric and underscore strings beginning with a dollar sign: $my_var, $fooFOO1999, etc. The first character after the $ is not allowed to be numeric.
• PHP can use either Perl, C++, or C comments: #, //, /* ... */
• PHPDoc is a common source code documentor for PHP.
• The PHP Framework Interoperability Group publishes many useful standard for PHP code. Two useful one are: PSR-1: Basic Coding Standard and PSR-2: Coding Style Guide.