Tuesday, June 19, 2012

Writing Classes with PHP

Classes allow for the creation of objects that can contain multiple properties. The properties can then be pulled from the class using methods for a specific object. I recently wanted to create an array of objects, so I created an index.php page that looked similar to this.

<?php
include("class_lib.php");

for ($i=0; $i < 10; $i++){
// Use data pulled from a database or post data
   $array[$i] = new person ($name,$age,$address);
}
var_dump($array);
?>

I first include the class I am going to use to create the objects and then I create a new person for each instance of the array. I suggested that you get the data from post data or from a database.

The class will then look something like this.

<?php
class person{
  private $name;
  private $age;
  private $address;
  public function __construct($persons_name, $persons_age, $persons_address){
     $this->name = $persons_name;
     $this->age = $persons_age;
     $this->address = $persons_address;
  }

  // You can create set methods like

  public function set_name($new_name) {
     $this->name = $new_name;
  }

  //Or you can create get mehthods like

  public function get_name(){
     return $this->name;
  }

}
?>

If you still have questions, then a good resource is to go to killerphp.com

Thursday, June 14, 2012

jQuery Mobile Select Menu

Had a bit of a headache today trying to figure out how to dynamically load a select menu using ajax with jQuery Mobile. The select menu would load fine, but I was losing all of the styling. Thanks to a post from kadaj's musing I realized that I needed to initialize the select menu before I tried to refresh it.

$('#selectMenu').selectmenu();
$('#selectMenu').selectmenu('refresh', true);

This method helped me avoid the "Uncaught cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh'" error I was getting.

Wednesday, June 13, 2012

Responsive Web Design

I have recently been working with jQuery Mobile and learned something pretty awesome about CSS. I was trying to think how I could make my web page look different on a phone and a tablet. That is when I looked into what jQuery Mobile was doing on their docs page. You can target a device by running a query through CSS to check for the devices width. Here is the example.

@media all and (min-width: 650px){
      /*Do css styling here for devices with a width of 650px or greater */
}
@media all and (min-width: 750px){
      /*Do css styling here for devices with a width of 750px or greater */
}
@media all and (min-width: 1200px){
      /*Do css styling here for devices with a width of 1200px or greater */
}

This also works great in a desktop environment. As you re-size the browser window the different styles will come into play overwriting the previous styles. The above example is using the min-width property, but the max-width property can also be used to effect devices that are the same or smaller than the max-width.

All about Colors

As a web developer/designer one is often trying to find the right color combination. I am more of a developer than a designer so I often struggle in this area. I have found some useful tools to help me in this area.

For windows I like to use ColorPic. It allows me to find a site that I really like the color scheme on and find the hex codes, if I can't figure it out in firebug first of course. Linux also has a nice tool for this called Gpick.

I also recently found the site colorcombos.com. It shows a lot of promise in being a valuable resource. Colorlayout.com also shows some potential.

Tuesday, June 12, 2012

Error Reporting with PHP

I often find myself needing to display the errors and warnings for my php scripts. A quick and easy way of doing this is adding the following lines of code to the top of your php page.

error_reporting(E_ALL);
ini_set('display_errors', '1');

Thursday, June 7, 2012

All About HTML Forms

The two things you must have when it comes to using the form tag is one the action attribute and second the method attribute. I also often use the enctype attribute when doing file uploads.

<form action="get-data.html" method="post" enctype="multipart/form-data"> </form>

The method attribute takes 'get' or 'post'. Get will send the data in plain text in the URL (not secure for more sensitive information) while post sends data as a http post transaction (more secure).

The enctype attribute specifies how the form data is encoded when submitting it to the server. I generally use enctype="multipart/form-data" when uploading a file. No characters are encoded, but it is necessary for file transactions.