Basics Blog: 2012

Saturday, March 10, 2012

How to Grow space when content grows in a web page

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test CSS</title>
<style type="text/css">
.wrapper
{
position:relative;
top:0;
left:auto;
right:auto;
bottom:0;
background-color:#CCFFFF;
width:960px;
padding: 50px 50px 50px 50px;
}
.text
{
position:relative;
margin-left:0px;
margin-top:0px;
margin-bottom:auto;
background-color:#FF0000;
}

</style>
</head>

<body>
<div id="wrapper" class="wrapper">
<div id="text" class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</div>
<div id="text2" class="text2">
</div>
</div>
</body>
</html>

Wednesday, March 7, 2012

Rich Text Editor

addNews.php

<body onLoad="Init()">

<div class="row">
<div class="wrapper">

<div class="grid2">

<br/><br/>
<div class="boxcontainer2">
<center><h3>ADD NEWS! </h3></center>
<form name="addNews" action="../controller/submit_controller.php" method = 'post' onsubmit="return validate_addNews()" enctype="multipart/form-data">
<div class="box">
<input name="controller_type" type="hidden" value="news_controller" />
<h4>Title : </h4><input type = 'text' name = 'title' class='tb7' value="<?php echo $news['title_nws'];?>"/><br/><br/>
<table id="tblCtrls" width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td class="tdClass">
<img alt="Bold" class="butClass" src="images/bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()">
<img alt="Italic" class="butClass" src="images/italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()">
<img alt="Underline" class="butClass" src="images/underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()">

<img alt="Left" class="butClass" src="images/left.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLeft()">
<img alt="Center" class="butClass" src="images/center.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doCenter()">
<img alt="Right" class="butClass" src="images/right.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRight()">

<img alt="Ordered List" class="butClass" src="images/ordlist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doOrdList()">
<img alt="Bulleted List" class="butClass" src="images/bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()">

<img alt="Text Color" class="butClass" src="images/forecol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doForeCol()">
<img alt="Background Color" class="butClass" src="images/bgcol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBackCol()">

<img alt="Hyperlink" class="butClass" src="images/link.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLink()">
<img alt="Image" class="butClass" src="images/image.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doImage()">
<img alt="Horizontal Rule" class="butClass" src="images/rule.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRule()">

</td>
</tr>
</table>

<iframe id="iView" name="iView" style="width: 415px; height:205px" onMouseOut="content.value=iView.document.body.innerHTML ;">
</iframe>
<input type="hidden" id="content" name="content"></textarea>
<table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td class="tdClass" colspan="1" width="80%">
<select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)">
<option value="">-- Font --</option>
<option value="Arial">Arial</option>
<option value="Courier">Courier</option>
<option value="Sans Serif">Sans Serif</option>
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
</select>
<select name="selSize" onChange="doSize(this.options[this.selectedIndex].value)">
<option value="">-- Size --</option>
<option value="1">Very Small</option>
<option value="2">Small</option>
<option value="3">Medium</option>
<option value="4">Large</option>
<option value="5">Larger</option>
<option value="6">Very Large</option>
</select>
<select name="selHeading" onChange="doHead(this.options[this.selectedIndex].value)">
<option value="">-- Heading --</option>
<option value="Heading 1">H1</option>
<option value="Heading 2">H2</option>
<option value="Heading 3">H3</option>
<option value="Heading 4">H4</option>
<option value="Heading 5">H5</option>
<option value="Heading 6">H6</option>
</select>
</td>
<td class="tdClass" colspan="1" width="20%" align="right">

   
</td>
</tr>
</table>

<?php //echo $news['content_nws'];?><br/><br/>

<input type = 'submit' value = 'ADD!' name='submit'/>

</div>
</form>

</div>

</div>

</div>
</div>

</body>

editor.js

var viewMode = 1; // WYSIWYG

function Init()
{
iView.document.designMode = 'On';
}

function selOn(ctrl)
{
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor = '#B5BED6';
ctrl.style.cursor = 'hand';
}

function selOff(ctrl)
{
ctrl.style.borderColor = '#D6D3CE';
ctrl.style.backgroundColor = '#D6D3CE';
}

function selDown(ctrl)
{
ctrl.style.backgroundColor = '#8492B5';
}

function selUp(ctrl)
{
ctrl.style.backgroundColor = '#B5BED6';
}

function doBold()
{
iView.document.execCommand('bold', false, null);
}

function doItalic()
{
iView.document.execCommand('italic', false, null);
}

function doUnderline()
{
iView.document.execCommand('underline', false, null);
}

function doLeft()
{
iView.document.execCommand('justifyleft', false, null);
}

function doCenter()
{
iView.document.execCommand('justifycenter', false, null);
}

function doRight()
{
iView.document.execCommand('justifyright', false, null);
}

function doOrdList()
{
iView.document.execCommand('insertorderedlist', false, null);
}

function doBulList()
{
iView.document.execCommand('insertunorderedlist', false, null);
}

function doForeCol()
{
var fCol = prompt('Enter foreground color', '');

if(fCol != null)
iView.document.execCommand('forecolor', false, fCol);
}

function doBackCol()
{
var bCol = prompt('Enter background color', '');

if(bCol != null)
iView.document.execCommand('backcolor', false, bCol);
}

function doLink()
{
iView.document.execCommand('createlink');
}

function doImage()
{
var imgSrc = prompt('Enter image location', '');

if(imgSrc != null)
iView.document.execCommand('insertimage', false, imgSrc);
}

function doRule()
{
iView.document.execCommand('inserthorizontalrule', false, null);
}

function doFont(fName)
{
if(fName != '')
iView.document.execCommand('fontname', false, fName);
}

function doSize(fSize)
{
if(fSize != '')
iView.document.execCommand('fontsize', false, fSize);
}

function doHead(hType)
{
if(hType != '')
{
iView.document.execCommand('formatblock', false, hType);
doFont(selFont.options[selFont.selectedIndex].value);
}
}

function doToggleView()
{
if(viewMode == 1)
{
iHTML = iView.document.body.innerHTML;
iView.document.body.innerText = iHTML;

// Hide all controls
tblCtrls.style.display = 'none';
selFont.style.display = 'none';
selSize.style.display = 'none';
selHeading.style.display = 'none';
iView.focus();

viewMode = 2; // Code
}
else
{
iText = iView.document.body.innerText;
iView.document.body.innerHTML = iText;

// Show all controls
tblCtrls.style.display = 'inline';
selFont.style.display = 'inline';
selSize.style.display = 'inline';
selHeading.style.display = 'inline';
iView.focus();

viewMode = 1; // WYSIWYG
}
}

Average of multiple columns

Table name: `boss_bos`

rate1_bos	rate2_bos	rate3_bos	rate4_bos	rate5_bos
2	4	6	8	10
0	0	3	0	0

To take average

SELECT *,(
`rate1_bos` + `rate2_bos` + `rate3_bos` + `rate4_bos` + `rate5_bos`
) /5 AS Average
FROM `boss_bos`
ORDER BY Average DESC;

Friday, February 24, 2012

Transform XML documents into XHTML with XSLT files

test.html

<form action = 'xml.php' method = 'post'>
    <h4>Search : </h4><input type = 'text' name = 'search' class='tb7'/><br/><br/>

               <input type = 'submit' value = 'Search' name='submit'/>

    </form>

xml.php

<?php
header('Content-type: text/xml');
include_once('config.php');

    if(isset($_POST['submit']))
    {
        $search=$_POST['search'];
        $query = "SELECT * FROM `member_details` where `Keywords` LIKE '%$search%'";
        $result = mysql_query($query);
        if(!$result )
        {
            die('Could not get data: ' . mysql_error());
        }
        $xml_output = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?> \n";
        $xml_output .= "<?xml-stylesheet type=\"text/xsl\" href=\"xslt1.xsl\"?>";
        $xml_output .= "<dataset>\n";
        for($x = 0 ; $x < mysql_num_rows($result) ; $x++){
        $row = mysql_fetch_assoc($result);
        $xml_output .= "<entry>\n";
        $xml_output .= "<id>".$row['Id']."</id>\n";
        $xml_output .= "<name>".$row['Name']."</name>\n";
        $xml_output .= "<address>".$row['Address']."</address>\n";
        $xml_output .= "<postcode>".$row['Postcode']."</postcode>\n";
        $xml_output .= "<telephone>".$row['Telephone']."</telephone>\n";
        $xml_output .= "<opentime>".$row['OpenTime']."</opentime>\n";
        $xml_output .= "<restauranttype>".$row['ResType']."</restauranttype>\n";
        $xml_output .= "<licence>".$row['Licence']."</licence>\n";
        $xml_output .= "<keywords>".$row['Keywords']."</keywords>\n";
        $xml_output .= "<cuisine>".$row['Cuisine']."</cuisine>\n";
        $xml_output .= "</entry>\n";

        }
        $xml_output .= "</dataset>\n";
        echo $xml_output;

    }

?>

xslt1.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
       <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

       <xsl:template match="/">
       <html>
       <body>

           <table border="0">
           <tr bgcolor="#9acd32">
               <th>Ref No.</th>
               <th>Name</th>
               <th>Telephone</th>
               <th>Full Details</th>
           </tr>
           <xsl:for-each select="dataset/entry">
           <tr>
               <td><xsl:value-of select="id"/></td>
               <td><xsl:value-of select="name"/></td>
               <td><xsl:value-of select="telephone"/></td>
               <td><xsl:variable name="vid" select="id"/><a href="fullviewXML.php?id={$vid}">full view</a></td>

           </tr>
           </xsl:for-each>
           </table>
       </body>
       </html>
       </xsl:template>
       </xsl:stylesheet>

Friday, February 10, 2012

Inline background image change script for image

Thursday, February 9, 2012

MySQLi

MySQLi is referred to MySQL improved. It is an extension for PHP . This is released together with PHP5 and allows to use MySQL version 4.1.3 or newer.

It is object oriented

Supports to run more than one query at a time

More Secure

Connecting to MySQLi in Object Oriented way is as follow

<?php
$sql = new mysqli('hostname','username','password','databasename');
?>

Procedural way of connecting to database with MySQLi
<?php
$link = mysqli_connect('hostname','username','password','databasename');
?>

Wednesday, February 8, 2012

Sending Variables in URL

"page_a.php" or "page_a.html"

 // Send the variables name="ishara" and age=27 to the page_b.php
 <a href="page_b.php?name=ishara&age=27">Send variables</a>

"page_b.php"

 <?php
  // Retrieve the URL variables (using PHP).
  $name = $_GET['name'];
  $age = $_GET['age'];

                // Display Values
  echo "Name: ".$name."  Age: ".$age;
 ?>

Output

Name: ishara Age: 27

File Uploading with PHP

index.html

applyForJob.php

<?php

    $target = "cv/";
    $target = $target . time(). basename($_FILES['uploaded']['name']);

     if (move_uploaded_file($_FILES['uploaded']['tmp_name'], $target))
    {
        echo "The file " . basename($_FILES['uploaded']['name']) . " has been uploaded";

    }
    else
    {
        if(isset($_POST['Submit']))
        echo "Sorry, there was a problem uploading your file.";
    }
?>

Monday, February 6, 2012

Database Naming Conventions

All names used throughout the database should be in lowercase.
Name parts are separated by underline not by a space. As underline is an alphanumeric character, database will be platform independent. Because sometimes space is not allowed.
Numbers should not use for names
(.) should not be used for names as separator, because (.) is used as field name in queries. Ex: tablename.columnname
Must not use reserved words
Should keep the names simple. Must not use long , complex names
Database name should contain projectname
Prefix should be company name or owner's name
Ex: cmpn_invoice

Table Names

Should contain name of entity followed by 3 letter acronym. Acronym is created with table name. Ex: manufacturer_prd
Also we can use prefix for table names same as database prefix for all the tables in that specific database Ex: cecb_manufacturer_prd
Should not use prefix like tbl_
Should use simple short clear names for tables. Should not use doubtful names
Should use singular names
Group tables with same prefix as master table Eg: user_type, user_status
Field Names
For the primary key columns we can use id as name. For product_prd table id_prd is the primay key field name
Foreign key can be named as idctg_prd. Here this foreign key belongs to product table product_prd. And it reffers to category table category_ctg
Each column name should include 3 letters acronym of table name, Ex: name_prd
date_ prefix shold use for date columns and is_ prefix should use for boolean type columns. Eg: date_expire, is_confirmed

Basics Blog

Total Pageviews