Douglas on Web Applications

Word Wrap with Ellipses in PHP

Word wrap with ellipses:

 
function prepareDescription($text,$maximum) {
    $trim_numb=$maximum-3; //for ellipses
    $text = html_entity_decode($text, ENT_QUOTES);
    if (strlen($text) > $trim_numb) {
   $text = substr($text, 0, $trim_numb);
   $text = substr($text,0,strrpos($text," "));
   //This strips the full stop:
  if ((substr($text, -1)) == ".") {
   $text = substr($text,0,(strrpos($text,".")));
  }
  $etc = "...";
  $text = $text.$etc;
    }
    $text = htmlentities($text, ENT_QUOTES);
$wrapdesc=wordwrap($text, $maximum/2, "\n", false); //true will cut word
    return $wrapdesc; //wrapped and truncated
}
 

Query MySQL by Date Range Using Timestamp

Using MySQL TIMESTAMP, as opposed to DATETIME,  only requires a slight modification to our code in order to retreive records that fall within a specific date range (column_name becomes DATE_FORMAT(column_name,'%Y-%m-%d')).

Example usage:

• Today = " AND DATE_FORMAT(date_added,'%Y-%m-%d') = curdate() "
• Tomorrow= " AND DATE_FORMAT(date_added,'%Y-%m-%d') = date_sub(curdate(),INTERVAL 1 DAY) "
• This Week= " AND year(DATE_FORMAT(date_added,'%Y-%m-%d'))=year(curdate()) "
• Last Week= " AND year(DATE_FORMAT(date_added,'%Y-%m-%d'))=year(date_sub(curdate(),INTERVAL 7 DAY)) and week(DATE_FORMAT(date_added,'%Y-%m-%d'))=week(date_sub(curdate(),INTERVAL 7 DAY))) "
• This Month= " AND year(DATE_FORMAT(date_added,'%Y-%m-%d'))=year(curdate()) and month(DATE_FORMAT(date_added,'%Y-%m-%d'))=month(curdate()) "
• Last Month= " AND year(DATE_FORMAT(date_added,'%Y-%m-%d'))=year(date_sub(curdate(),INTERVAL 1 MONTH)) and month(DATE_FORMAT(date_added,'%Y-%m-%d'))=month(date_sub(curdate(),INTERVAL 1 MONTH)) "

Remove Slashes with PHP

 
if (get_magic_quotes_gpc()){
    function stripslashes_deep($value){
        $value = is_array($value) ? array_map('stripslashes_deep', $value) : stripslashes($value);
        return $value;
    }
    $_POST = stripslashes_deep($_POST);
    $_GET = stripslashes_deep($_GET);
    $_COOKIE = stripslashes_deep($_COOKIE);
    $_REQUEST = stripslashes_deep($_REQUEST);
}
 

Linked Remote Comboboxes with EXTJS

To created linked combo boxes with EXTJS it requires 3 steps:

1. 1. create server-side code
2. 2. create component
3. 3. link combo boxes

For the server-side code I use PHP and return the data in JSON format (important: I use a specific db access wrapper found at Ultimate MySql). Of course, you will need one for each combo.Here is an example query:

 
public function displayProductsForSpecificVendor($vid) {
    if(!$vid) return false;
        $sql = "SELECT p.product_id AS id,
                  CONCAT(p.product_name,' (',p.product_code,')
                  Price: $',p.product_price,' Size: ',p.product_size) AS productNames
                  FROM product AS p
	     LEFT JOIN product_to_vendor AS ptv USING(product_id)
	     LEFT JOIN vendor AS v USING(vendor_id)
	     WHERE ptv.vendor_id = ".$vid."
	         AND p.active = 1
	         AND v.active = 1
	     ORDER BY productNames  ASC";
        if(!$this->Query($sql)){
            unset($objs);
            $objs[]=$this->Error();
            echo '{"Products":'.json_encode($objs).'}';
        }else{ //we have results
            if($this->RowCount()) {
                $this->MoveFirst();
	    while (! $this->EndOfSeek()) {
	    $row = $this->Row();
	    $arr[] = $row;
            }
            echo '{"Products":'.json_encode($arr).'}';
        }
    }
}
 

Once you have to have the EXTJS build installed, proper includes and form created, you construct the two combo box components:

 
//vendor choices start
Ext.ux.vendorsCombo = Ext.extend(Ext.form.ComboBox, {
    initComponent:function() {
        // call parent initComponent
        Ext.ux.vendorsCombo .superclass.initComponent.call(this);
    } // end of function initComponent
});
Ext.reg('vendorscombo', Ext.ux.vendorsCombo);
//vendor choices eo
 
//product choices start
Ext.ux.productsCombo = Ext.extend(Ext.form.ComboBox, {
    initComponent:function() {
        // call parent initComponent
        Ext.ux.productsCombo.superclass.initComponent.call(this);
    } // end of function initComponent
});
Ext.reg(productscombo, Ext.ux.productsCombo);
//product choices eo
 

Next, insert the components into the form using their xtypes:

 
...form code here
xtype:'fieldset',
checkboxToggle:false,
title: 'Vendor & Products',
autoHeight:true,
items:[{
    xtype:'vendorscombo',
    fieldLabel:'Available Vendors',
    name: "vendor_id",
    hiddenName: "vendor_id",
    valueField: "vid",
    displayField: "vendorName",
    triggerAction: "all",
    typeAhead: true,
    anchor:'98%',
    allowBlank: false,
    store: new Ext.data.Store({
        autoLoad:true,
        proxy: new Ext.data.HttpProxy({url: 'formManager.php?type=load_vendors'}),
        reader: new Ext.data.JsonReader({root: 'Vendors'},
            [{name: 'vid'}, {name: 'vendorName'}])
        }),
        emptyText:'Select a vendor...',
        selectOnFocus: true,
        forceSelection: true,
        tabIndex: 1,
        mode: 'remote'
...form code...
    xtype:'productscombo',
    id: "productcombo",
    fieldLabel:'Available Products',
    name: "product_id",
    hiddenName: "product_id",
    valueField: "id",
    displayField: "productNames",
    triggerAction: "all",
    typeAhead: false,
    anchor: "98%",
    allowBlank: false,
    store: new Ext.data.Store({
        autoLoad:true,
        proxy: new Ext.data.HttpProxy({url: '/formManager.php?type=load_products'}),
        baseParams:{vid: 0},//this parameter's passed for HTTP request
        reader: new Ext.data.JsonReader({root: 'Products'},
            [{name: 'id'},{name: 'productName'}])
        }),
        emptyText:'Select a Product...',
        selectOnFocus: true,
        forceSelection: false,
        tabIndex: 2,
        mode: 'remote',
        editable:false
   }]
 
form code continues...
 

Disabling a Form with Prototype

 
var form = $('form_id');
[form.disabled ? 'enable' : 'disable']();
form.disabled = !form.disabled;
 

Simple Autocomplete with Scriptaculous

There may be times when you prefer to use a local autocomplete field rather than dropdown (or remote AJAX call). The simplest way is by using Scriptaculous Autocompleter.Local. The basic syntax is as follows:

 
new Autocompleter.Local(field_id,target_div_id,array_of_strings,options);

The first paremeter is the text field id and second is the div id of the autocomplete menu. The third parameter is the data array you are searching. Finally, the fourth are the various options which are as follows:

• choices - how many results to return (default: 10)
• partialSearch -If false, will match entered text only beginning of strings. If true, will match text at the beginning of any word in the strings. To search anywhere in the string, also set the option fullSearch to true (default: true)
• fullSearch - Search anywhere in array.
• partialChars - Number of characters to enter before searching begins (default: 2)
• ignoreCase - self-explanatory (default: true)

The following is an example of it's usage:

HTML:

<label for="my_contact_list">List of contacts:</label>
<input id="my_contact_list" size="32" type="text" />
 
<!--div to display results-->
<div class="autocomplete" id="customer_list" style="display:none"></div>
 

Javascript:

 
var contacts = [ 'Atwood, Frank',
'Brower, Karen',
'Drake, Francis',
'Guthry, William',
'Jackson, Mary',
'Lively, Lori',
'Whitley, Marta',
'Zemlicka, Chase'];
new Autocompleter.Local('my_contact_list', 'contact_list', contacts, { });
 

CSS:

div.autocomplete {
  margin:0px;
  padding:0px;
  width:250px;
  background:#fff;
  border:1px solid #888;
  position:absolute;
}
 
div.autocomplete ul {
  margin:0px;
  padding:0px;
  list-style-type:none;
}
 
div.autocomplete ul li.selected {
  background-color:#ffb;
}
 
div.autocomplete ul li {
  margin:0;
  padding:2px;
  height:32px;
  display:block;
  list-style-type:none;
  cursor:pointer;
}

Autoload Classes with PHP

The following represents a useful function for autoloading classes. This example assumes all class files are named "something.class.php"

 
function __autoload ($class_name) {
  $file = 'path-to-file' . $class_name . '.class.php';
  if (!file_exists ($file)) {
      //do something
   echo 'File '.$class_name. ' does not exists';
   die;
  }
  require_once ($file);
}
 

AutoComplete Like “Facebook To:”

Extended Scriptaculous Autocomplete.Local to simulate Facebook's autocomplete address field:

• View Demo
• Download Zip

Semi Unobtrusive Rollovers with Prototype

This is in progress...

 
/*
 * Unobtrusive image rollover with Prototype library, v6.x
 *
 * Author Douglas Gintz
 * Copyright (c) 2008 ArtBuilders <www.artbuilders.com>
 *
 * This script is freely distributable under the terms of an MIT-style license.
/*------------------------------------------------------------------------------*/
var Rollover= Class.create();
    initialize: function() {
	   var scope = this;
        $$('img').each(function(item) {
			scope.addRollover(item,item.identify());
        });
    },
    addRollover: function(img,newURL) {
		if(typeof img=="string"){
			var id=img;
			img=null;
			//look up image by id
			if (document.getElementById) img = document.getElementById(id);
			else if (document.all) img=document.all[id];
			//if not found then look up by name
			if (!img) img=document.images[id];
			//else follow silently
			if (!img) return;
		}
		//if element found is not an img tag, fail
		if (img.tagName.toLowerCase() != "img") return;
		//keep track of original url
		var sourceURL = img.src;
		//preload rollover image
		(new Image()).src = newURL;
		img.onmouseover = function() { img.src = newURL; }
		img.onmouseout = function() { img.src = sourceURL; }
    }
}
Event.observe(window, 'load', function() {
    new Rollover();
});
 

Usage:

 
<!--uses ID to pass second URL-->
<img src="images/icon_plus.gif" width="29" height="23" id="images/icon_minus.gif">
 

Semi Unobtrusive Rollovers

 
//add to images
function addRollover(img,newURL){
    if(typeof img=="string"){
        var id=img;
        img=null;
        //look up image by id
        if (document.getElementById) img = document.getElementById(id);
        else if (document.all) img=document.all[id];
        //if not found then look up by name
        if (!img) img=document.images[id];
        //else follow silently
        if (!img) return;
    }
    //if element found is not an img tag, fail
    if (img.tagName.toLowerCase() != "img") return;
    //keep track of original url
    var sourceURL = img.src;
    //preload rollover image
    (new Image()).src = newURL;
    img.onmouseover = function() { img.src = newURL; }
    img.onmouseout = function() { img.src = sourceURL; }
}
 
//init
function initRollovers(){
    var images = document.getElementsByTagName("img");
    for(var i=0; i < images.length; i++){
        var image = images[i];
        var newURL = image.getAttribute("rollover");
        if(newURL) addRollover(image,newURL);
    }
}
 
//establish onload event
if(window.addEventListener)
    window.addEventListener("load",initRollovers,false);
else if (window.attachEvent)
    window.attachEvent("onload", initRollovers);
 

Apply to element using fake tag:

 
<img src="firstimage.gif" rollover="secondimage.gif">