Monthly Archives: January 2015

category-css-

CSS Layout

before further working. You can make few alterations at later stages but the basic structure should remain same. So it is very important that you must decide the basic structure before going into detail designs. You can use one of two popular techniques 1-Table Based Layout Table

Read more

web-based-applications-

An application which is accessed via web browser over a network is called web application or web based application. All the websites are examples of web applications.

Web applications are quickly replacing traditional client server softwares. Client-Server computing requires separate software to be installed on the client machine. Any update in server software may also require update at client end. This means that client needed some preparation before software can be run. On the other hand a web application works without any installation at client end. The output of web application is usually HTML / XHTML which is rendered by a web browser.

Structure of web application

Web application is written in a server side scripting language like PHP. It resides on a web server which is accessible by simply typing URL in address bar of web browser. When user types address of website for example www.programming-web.com, browser transmits request to the web server which hosts the required site. On web server, web server software like apache receives this request and processes it. Processing may involve complex process such as database operations. After processing, web sever provides output which is then passed to requesting client. The output generated by web server includes only those scripts which can be rendered by web browser. So no special software is need at client end. Web browser receives this response which is rendered by browser and displayed to user. Above process repeats when user perfumes an action which requires communication with server such as submitting entry form or viewing another page.

classes-in-cascading-style-sheets-css-

Classes are power mechanism available in CSS to control the layout and formatting of the page. Class allows us to combine elements into group. CSS rules are applied to a class. All the elements grouped in that class are effect by applied rules.

We can define as many classes  per page as we need.

Class can be applied to an element by using class=”name” attribute just after the opening tag within the element.

<p>This paragraph has red text.</p>
<p>This paragraph has dark gray text.</p>
<p>This paragraph also has dark gray text.</p>
Here identifiers are classes which can be used more than once. So one paragraph has been identified by “red” and rest by “default”.
The corresponding CSS uses a full stop (.) to define rules for a class.
.red {
color:#F00;
}
.default {
color:#333;
}
Classes can be used in a number of ways to enhance control. For example

Example 1.

<p>This paragraph has red text.</p>
<p>This paragraph has light gray text.</p>
CSS for above HTML
p {
color:#F00;
font-size:12px;
}
.bleached {
color:#CCC;
}
This stated that by default all paragraphs shall be red but for class .bleached it will be light gray.

Example 2.

<p>This paragraph has red text.</p>
<p>This paragraph has light gray text.</p>
<h3>Another Bleached class</h3>
Now look at following CSS rules
p {
color:#F00;
font-size:12px;
}
.bleached {
color:#CCC;
}
H3.bleached {
color:# #F4A460;
}
Notice last rule which stated that if H3 has .bleached class, its color should be Sandy Brown.

create-html-form-to-insert-data-into-mysql-database-using-php-

This article explains data insertion in MySql using HTML Form. You must have seen contact/feedback Forms in many websites. These Forms are designed using standard HTML Form elements. On the back end, SQL queries are used to perform DML operation using information provided by user. Any server side scripting language can be used to insert data in database. Following steps explain this process using PHP and MySql.

1-     First of all create a table in MySql database using following command. This command can be executed in any MySql query browser like phpMyAdmin.

CREATE TABLE contact (
msg_id int(11) not null auto_increment,
name varchar(255) NOT NULL ,
email varchar(255),
msg varchar(2000) NOT NULL,
PRIMARY KEY (msg_id))
2-     Now open notepad, copy and paste following HTML and save your file as “contact.html”

<HTML>
<Head>
<title>Contact form</title>
<style type=”text/css”>
table{
border:1;
border-collapse:collapse;
font: normal 12px ‘Lucida Grande’,Verdana,sans-serif;
}
td{
color:#663333;font-family:verdana;
border-bottom: 1px solid #666;
padding-left:10px;
background-color:#F0F8FF;
}
#sub{ text-align:center;}
</style>
</Head>
<body>
<h2> FeedBack/Contact Form</h2>
<form action=”contact_insert.php” method=”POST” id=”insert”>
<table>
<tr>
<td >Name*</td>
<td  ><input type=”text” size=40 name=”name”></td>
</tr>
<tr>
<td >Email</td>
<td  ><input type=”text” size=40 name=”email”></td>
</tr>
<tr>
<td >Comments/Suggestions*</td>
<td  ><textarea  name=”msg” cols=40 rows=7></textarea> </td>
</tr>
<tr>
<td colspan=2 id=”sub”><input type=”submit” name=”submit” value=”submit” ></td>
</tr>
</Table>
</form>
</BODY>
</Html>
3-     Open a new notepad window and copy following PHP source code. Save the file as “contact_insert.php”.

<?php
// contact to database
$connect = mysql_connect(“localhost”, “root”, “pass”) or die (“Error , check your server connection.”);
mysql_select_db(“test”);

//Get data in local variable
$v_name=$_POST[‘name’];
$v_email=$_POST[’email’];
$v_msg=$_POST[‘msg’];

// check for null values
if ($v_name==””  or $v_msg==””)
echo “All fields must be entered, hit back button and re-enter information”;
else{
$query=”insert into contact(name,email,msg) values(‘$v_name’,’$v_email’,’$v_msg’)”;
mysql_query($query)  or die(mysql_error());
echo “Your message has been received”;
}

?>
4-     Now open “contact.html” in your web browser, fill the form and press submit button  as shown in the figure below
contact_a

When you press submit button, information in Form elements is passed to “contact_insert.php” file. This file checks the input for NULL values , inserts data in database and displays message as shown in figure below

contact_b

 

ids-in-cascading-style-sheets-css-

CSS allow us to redefine properties of HTML elements. By redefining properties we can create attractive look and feel for web pages. More importantly its usage is simple and straight forward. For example consider following rule.

P
{
color: #F00 ;
}

In above rule “P” is a basic CSS selector which can be used to change any property of Paragraph.

CSS also allow us to make custom selector called ID and Class. ID and Class are strong mechanism to control the layout of web page. IDs is one the popular and frequently used CSS selector .

An ID can only be used once in a page and it uniquely identifies and HTML element. ID can be applied to an element by using id=”name” attribute just after the opening tag within the element.

Example:

<p id=”red”> This paragraph is red</p>
<p id=”grey”>This paragraph is grey</p>
In CSS we use hash (#) character to identify an ID

#red{
color:#F00;
}
#grey{
color:#333;
}
IDs can be combined with Selector to add further control.

Example:

<p id=”red”> This paragraph is red</p>
<p>This paragraph is plain</p>
In CSS rule

p#red{
color:#F00;
}
Above CSS rule states to turn a paragraph to red if it has and ID “RED”.

configure-php-on-iis-

Configuration of PHP on IIS includes following steps. This guide provides configuration about IIS 5.1 shipped with Window XP sp2.

1- Download latest version of PHP from http://www.php.net/downloads.php. Note you should download installer version not the zip version. Installer version automatically performs all necessary configurations. If we use zip version, Environmental variables must be modified manually

2- Run the setup and choose installation directory for example C:PHP

3- On next screen choose your version of web server, here choose IIS ISAPI and click next.

4- On next screen in the extension portion choose extensions to be installed on local hard drive and click Install. You may add and remove extension later.

To test your PHP installation,

Now open your favorite text editor and type following

<?php
phpinfo();
?>
Save this file as “first.php” in C:Inetpubwwwroot ( assuming windows directory is C:) . Now open browser and type

Http://localhost/fist.php.

If page show PHP configuration, it means your installation is successful.

Remember PHP installer has added path of C:php in “PATH” Environmental variable and has also added .PHP extension in IIS configuration.

To view it GO to Control Panel–Administrative Tools and open “Internet Information Services”

And explore this as shown in figure

a

Now Right clik on Website and clik Properties. A screen like below appear

b

Here clink on Home Directory tab and clink on Configuration Button,it will open configuration as under

c

Note .PHP extension here.

how-to-apply-css-to-web-documents-

CSS applies styles to individual HTML elements. We can apply CSS to HTML elements in following four ways

•    Inline Style
•    Embedded Style
•    External Style
•    Importing Style
Inline Style

Inline style makes use of style attribute which can be applied to any HTML element.

Example:

<HTML>
<Head>
<Title>Inline Style</title>
</Head>
<Body>
<P style=”color:F00″> This Paragraph implements in line Style </p>
</Body>
</Html>
In above example paragraph tag <P> has been applied CSS to turn its color to red.

Embedded Style

In embedded style method all style are grouped together in head of document.

Example:

<HTML>
<Head>
<Title>Embedded Style</title>
<Style type=”text/css”> p {color:F00}</style>
</Head>
<Body>
<P> This Paragraph implements in Embedded Method </p>
</Body>
</Html>

In above example paragraph tag <P> has been applied CSS in <head > section of the page to turn its color to red.

In above examples CSS has been written as a part of the web document. This is good if you need only few styles but for large documents it is not recommended. For complex documents CSS should be kept separate from actual document. Following methods explains this.

External Style

In this method CSS is kept in separate file and referenced by the web document.

Example:

File1:

P{ color:F00;}
Copy and paste above in file and save it as “/files/includes/external.css”;
Now in the same folder create a file named “external.html” with following text.

File:2

<HTML>
<Head>
<Title>Embedded Style</title>
<link rel=”stylesheet” type=”text/css” href=”//files/includes/external.css” />
</Head>
<Body>
<P> This Paragraph implements in Embedded Method </p>
</Body>
</Html>
In above example paragraph tag <P> has been applied CSS in external CSS file.

Importing Style

In this method external CSS files are imported in web document either by using Embedded method or by using External method.
In Embedded it done by adding following line after title tag.

<style type=”text/css”>@import url(/files/includes/external.css);</style>

In External method the CSS file itself imports external file.
@import url(/files/includes/external.css); is used to import an external CSS file.

In both ways we can add more CSS after importing CSS file.

.

css-menu-using-unordered-list-

In web programming beauty in design has become an essential requirement. Technically you may have built a great site but it if does not look good, you do not get deserved appreciation and reward. so in addition to learning great web programming tricks you should also spend some time to create beautiful designs. You must have seen fancy looking menus in websites. These menu can be designed and programmed in JavaScript, DHTML and HTML.

Some tools are also available to create eye-catching menu on the fly. Whatever method is used, CSS is core requirement to all these.Without CSS things would have been complex. In web programming CSS is used in a number of ways to create standard navigation menus for web applications. List markups are one way of doing this. Unordered List element is the correct choice in this sense, with each destination link is defined by an individual list item. This approach provides great flexibility allowing navigation menu either vertical or horizontal.

This article provides basic guide on css menu.Menu which are designed using power of CSS are known as CSS Menu. To create a verticle navigation CSS menu, let’s start with a simple unordered list. Throughout this article this HTML will be used to design the CSS menu.

<ul>
<li><a href=’#’>Home<a/></li>
<li><a href=’#’>Company Profile</a></li>
<li><a href=’#’>Departments<a/></li>
<li><a href=’#’>Services<a/></li>
<li><a href=’#’>Future Plan<a/></li>
<li><a href=’#’>About Us<a/></li>
</ul>
Corresponding CSS is defined as
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
padding:0;
}
This CSS ensures that we are working with blank canvas. No default spacing, padding or margin which creates confusion. At this stage our menu will look like under

css_menu_a

Now next step is to convert these list items into buttons. This done by following CSS, also padding is now adjusted to allow some space around the text. Add the lines in bold to previous CSS rules.

ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
background: #DDD;
margin: 0;
padding: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #666;
border-bottom: 1px solid #aaa;
}

After applying above CSS our menu gets some shape and loos like under.
css_menu_b

Next Step is to define the width of buttons. As list item have been converted into buttons so width is adjusted with the help of UL selector. Add line in bold to earlier CSS rules.

ul {
list-style-type:none;
margin:0;
padding:0;
width:160px;
}

After this step our CSS menu is complete and look like under, You customize it by adding more css to refine the text styles or font size.
css_menu_c

In some sites when you place your mouse at menu it changes its color, this can be done by using a:hover in CSS.

retrieving-data-from-mysql-into-html-table-using-php-

In last article I explained how to make a connection to MySql server and how to create a MySql database using PHP. This article is continuation of last article.
Use following link to visit that article

Connecting To MySql Server Using PHP
In this article I will populate an HTML table by retrieving data from “student” table created in last article.

Insert Data into MySql Table

Data can be inserted in to table using standard query language(SQL). This process is simple and easy to understand. PHP provides standard mechanism for all DML operations. For example we use Mysql_query() function to make an insertion, updation or deletion. We will examine this with following example

First we will insert data into “student” table.

Following code inserts 3 row into table.

<?php
$connect = mysql_connect(“localhost”, “root”, “password”) or
die (“Error, check your server connection.”);
mysql_select_db(“school”);
$insert=”insert into student values (1,’Jones’,’8th’),(2,’Raymon’,’8th’),(3,’Michle’,’8th’)”;
$results=mysql_query($insert) or die(mysql_error());
echo “Data Inserted Successfully”;
?>
In above code first we wrote a query to insert three rows and stored it in $insert variables. In next line mysql_query() function executed the query and inserted rows into database.

Populating HTML Table

To retrieve data from MySql server we use mysql_fetch_array(). This function takes a query as parameter and retrieves a result set in the form of an array. We can use loop to traverse through the array.

<?php
$connect = mysql_connect(“localhost”, “root”, “password”) or
die (“Hey loser, check your server connection.”);
mysql_select_db(“school”);
$quey1=”select * from student”;
$result=mysql_query($quey1) or die(mysql_error());
?>
<table border=1 style=”background-color:#F0F8FF;” >
<caption><EM>Student Record</EM></caption>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Class</th>
</tr>
<?php
while($row=mysql_fetch_array($result)){
echo “</td><td>”;
echo $row[‘stud_id’];
echo “</td><td>”;
echo $row[‘stud_name’];
echo “</td><td>”;
echo $row[‘stud_class’];
echo “</td></tr>”;
}
echo “</table>”;
?>
In above example While loop traverse through result set and on each iteration of loop we used HTML table tags to create a HTML table.

 

connecting-to-mysql-server-using-php-

PHP provides several functions to perform DML operation on MySql database. These functions allow to establish connection, retrieve data and update existing data. Some of the most commonly used functions are

•    mysql_connect (“hostname”, “user”, “pass”): Connects to the MySQL server.
•    mysql_select_db(“database name”): Equivalent to the MySQL command USE; makes the selected database the active one.
•    mysql_query(“query”): Used to send any type of MySQL command to the server.
•    mysql_fetch_rows(“results variable from query”): Used to return a row of the entire results of a database query.
•    mysql_fetch_array(“results variable from query”): Used to return several rows of the entire results of a database query.
•    mysql_error(): Shows the error message that has been returned directly from the MySQL server.
In following example we will look at first three functions.
This example creates a Mysql database using PHP.

<?php
//connect to MySQL; note we’ve used our own parameters- you should use
//your own for hostname, user, and password
$connect = mysql_connect(“localhost”, “root”, “pass”) or
die (“Error , check your server connection.”);
//create the main database if it doesn’t already exist
$create = mysql_query(“CREATE DATABASE IF NOT EXISTS SCHOOL”)
or die(mysql_error());
//make sure our recently created database is the active one
mysql_select_db(“school”);
//create “student” table
$stud = “CREATE TABLE student (
stud_id int(11) NOT NULL auto_increment,
stud_name varchar(255) NOT NULL,
stud_class varchar(255) NOT NULL,
PRIMARY KEY (stud_id))”;
$results = mysql_query($stud) or die (mysql_error());
echo “School Database successfully created!”;
?>
How it works
Firstly we used following command to establish connection with Mysql Server
$connect = mysql_connect(“localhost”, “root”, “pass”) or
die (“Error, check your server connection.”);
this function uses three parameters
First parameters represent Hostname

Host name: In our case, it’s the local host because i have installed everything locally. You will need to change this to whatever host is acting as your MySQL server.

Second and third parameters are for user name and password

Username and password: I have used root user for connections you may use either root or any other user.

Following function call create database if not exists.
$create = mysql_query(“CREATE DATABASE IF NOT EXISTS SCHOOL”)
or die(mysql_error());
mysql_query() function execute query on the database.
After creating a database we must use following command to select it
in order to use
mysql_select_db(“school”);
Then again used mysql_query() to create a table name “student”;
In next article we well see how to retrieve data from this database.
NOTE
While executing this script if you encounter following error

Fatal error : Call to undefined function mysql connect() …..

This means that you have not configured PHP to work with Mysql.

If you have installed PHP from installation package then you missed the Mysql extension installation.

If you have downloaded zipped version of PHP then make sure to uncomment following extension in PHP.INI file.

extension=php_mysql.dll3

to uncomment an extension simply remove leading semi colon (;).
You may find following article helpful

installation-of-apache-php-and-mysql-