Saturday, April 16, 2011

Your First PHP Program

A PHP program is just a text file, like any other Web page. Most HTML editors don’t know about PHP, though, so it’s best to use one that does. That way, the editor will automatically alert you if it notices you’ve made an error in the code that you’re typing.
Thankfully, PSPad, which we used for creating our Javascript code, also knows about PHP. Hundreds of thousands of people across the world use PSPad as their PHP editor, so that’s what we’ll use too.
While Javascript files tend to have a .html or .htm extension, just like standard web pages, PHP files tend to end with .php instead. This isn’t a hard and fast rule. Some web servers will allow php code to exist within .html files, but many insist on you ending all your files with a .php extension. So, to keep things simple and consistent, we’ll stick to a rule of always using a .php extension on any file that contains PHP code.

Right, the time has come to write a PHP program. If you haven’t already installed PSPad, you’ll need to follow the instructions on page 180 and do so. With PSPad installed, launch the program. Click the FTP tab on the left hand side of the screen, then click the Connect FTP icon in the row below it, and choose your site name from the list that appears. Then double-click on the public_html folder, or whatever your host uses to store your web accessible files.
In the white space below the list of files and folders on the left hand side, right-click and choose New File. In the box where you’re asked to choose a file name, type demo.php and click the OK button. You should see your new file appear in the list in the left-hand panel.
Now double-click your demo.php file to open it for editing. Look at the blue title bar at the top of the screen, the text of which should end with demo.php rather than new1.txt to indicate that you’re editing the correct file. If not, double-click it again.
You can now start typing your first PHP program. Enter the following:

<?php
echo "<HTML>";
echo "<body>";
echo "This is some PHP";
echo "</body>";
echo "</HTML>";
?>
The screen should now look like this:


Save the file to the server (remember PSPad has built-in FTP so there’s no need to upload anything manually) by choosing Save from the File menu. After a couple of seconds, when the file is saved, you can close PSPad.
Remember that, unlike Javascript, PHP code gets run by the web server, so you can’t write and test PHP programs unless you’re connected to a Web server. Hence the need to upload our program.



Excellent. It worked. The web server recognised and ran our program. If you get an error message about syntax errors, go back and edit the file, and check your typing carefully. If you just see the PHP code itself, check that your web server really does support PHP and that it is enabled on your hosting account. It’s possible that you have to specifically request it, though this is unusual.
Although this is a very simple PHP program, it does demonstrate a number of key points about the language.
First, you’ll notice that the code starts with <?php and ends with ?>. These special markers tell the web server where PHP code starts and ends, rather like the <script> tag that marks the start of some Javascript. Earlier versions of PHP allowed simply <? at the start of a script, but later versions insist on the full <?php instead. So even if you see web-based tutorials or books that tell you it’s OK to use the shorter <? at the start, it’s not. Get into the habit of using the full version and you’ll be better off.

Next, notice the "echo" command. This is rather like document.write in Javascript, in that it creates content which is sent to the visitor’s web browser to display. In this case, we’ve created an entire HTML page consisting of <HTML> tags, <body> tags, and some text. Wehave, in web developer terminology, created a dynamic web page. There is no .html file on the server that contains this page. Instead, it has been dynamically created "on the fly", and sent to the visitor’s browser.
Not particularly impressive, sure, but I’ll show you some more powerful examples shortly.
Note that you don’t have to stick to pure PHP code within a php file. You can mix HTML and PHP code within the same file. For example, we could just as easily have written our program like this:

<HTML>
<body>
<?php
echo "This is some PHP";
?>
</body>
</HTML>
Here, we stay in HTML mode to create the first two tags. Then we switch to PHP mode to generate the text, and then back into HTML mode to generate the two closing tags. As you start to write longer PHP programs, deciding on which way to work is important.
There’s no right or wrong way – just do as you prefer. Some people don’t like the idea of flipping in and out of PHP mode 20 or 30 times within a complex file, whereas others prefer to stick in HTML mode and only use PHP mode where it matters. You’ll see more about this later, but for the moment you need to bear in mind that there are two ways of doing things.

There’s one more vital thing you need to understand about PHP, and indeed every serverside programming language. Assuming your web browser is still open, hit the View Source menu option and look at the HTML source code of the page. It looks like this:


Note how you can see the output of the PHP program, and not the PHP program code itself. The program was on the Web server, and the "echo" commands forced the HTML tags and other text to be sent to your browser. At no time does the PHP code itself leave the server, and at no time is it visible to the site visitor.
This is crucial to understand. It’s the difference between server-side and client-side programming. And it means that you can safely use PHP to implement security-related features, because no one can tamper with the code.
If we’d written this program in Javascript, as a series of document.write statements, using the View Source option on our browser would have displayed the Javascript program code.
But in this case, the browser never gets to see the code because it has already been run by the server.
One final point. Why are there no blank lines between each of the HTML tags, and before/after the text? Shouldn’t the dynamically-generated HTML code look more like this, rather than being all in one line?:
<HTML>
<body>
This is some PHP
</body>
</HTML>
The reason that there are no "carriage return" characters in our dynamically-generated HTML, is because our PHP program never created any. Sure, we put each line of PHP code on its own line, but that won’t cause carriage return characters to be sent to the browser.
It doesn’t actually matter. Browsers don’t insist on HTML code being neatly arranged in lines – it’s only done for the benefit of humans who might want to read the code. But if you did want to generate neat, line-spaced HTML, you’d have to adjust your PHP code accordingly.

Needless to say, there’s much more to PHP than the "echo" command. Like JavaScript, PHP is a hugely complex and capable language, which provides all of the tools you need to write sites such as eBay or Amazon. Perhaps the greatest benefit of knowing how to do server-side programming is being able to interact with a MySQL database, and we’ll come to this soon.
For now, though, the following chapter looks at some of the other things that PHP can do.
If you want to dive straight into PHP and experiment some more, the best resource is the official www.php.net site on the Web. Although the site can be confusing, it does contain everything you’ll ever need to know. Perhaps its best feature is that anyone can add their own comments and example to the online manual.

Friday, April 15, 2011

Zowit Community

Welcome to the new site! feel free to participate in our community!

Just click on Zowit Community or menu link above...

Friday, April 8, 2011

Web Design tutorial part 5

6-1 Introduction
We started our study on tables in previous lesson and We will continue our study in this lesson. As I told you in previous lesson, tables are very important in professional web design. You will need them for holding pictures, buttons, text etc.
In this lesson we will cover more options about table cells, cell padding, cell spacing and finally we will learn how to link different parts of an image to different locations on the web.

6-2 Cell Width (Column Width)
In previous lesson we learned how we can determine width and height of a table.
<HTML>
<HEAD>
<TITLE>Table: Column widths not specified</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In above table we have not determined sizes for two cells in first row. In this way you will not be able to say how will these cells display in different browsers and different screen modes.
You can determine width of each column in your table by specifying width of cells in first row. Just be careful
about correctness of sizes you specify. For example if your table width is 200 pixels sum of cell widths must be exactly 200.

<HTML>
<HEAD>
<TITLE>Example 6-1a</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
You can also determine cell widths in percent. Sum of cell width percentages must be 100%.

<HTML>
<HEAD>
<TITLE>Example 6-1b</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=35%>TOP LEFT</TD>
<TD WIDTH=65%>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
When you determine sizes of first row cells you will not need to determine widths for second row cells.
If you want a cell to be empty, you cannot omit definition for that cell. Insert cell definition, and enter a &nbsp; between <TD></TD> tags .As we told in later lessons this means a space character. You must enter at least a space in this form if you need an empty cell.Otherwise area of that cell will not apear like an empty cell.

<HTML>
<HEAD>
<TITLE>Example 6-2</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In above example we have two empty cells but as we have specified both table and cell sizes, table will not lose it's shape. If we remove sizes, we cannot guarantee how it will be displayed on different browsers and screen modes. For the above reason we suggest you to determine table sizes in every table you use. Using fixed sizes is not a good idea. Use percent sizes instead of fixed sizes.

6-3 Cell padding
You can specify two other important size parameters for a table. Cell padding is the space between cell borders and table contents such as text, image etc.

<HTML>
<HEAD>
<TITLE>Example 6-3</TITLE>
</HEAD>
<BODY>
Cell padding effect : <BR><BR>
<TABLE BORDER=3 CELLPADDING=20>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Default value for this option is 1. It means that contents of a cell will have a distance of one pixel with borders. If you don't want any space between object inside the cells and its borders you can determine the value of 0 for this option.

6-4 Cell spacing

Cell spacing parameter determines the space between inner and outer parts of a table. In fact a table is constructed form two borders . A border area and a cell area. There is a space between cell area and outer border. We call this "cell spacing". If you increase this value you will have a thick border. Default value for this property is 2. If you specify 0 for it, you will have a very thin border.

<HTML>
<HEAD>
<TITLE>Example 6-4</TITLE>
</HEAD>
<BODY>
Cell spacing effect : <BR><BR>
<TABLE BORDER=3 CELLSPACING=10>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
You can also mix cell spacing and cell padding options to make specific tables that you need.

6-5 Tables and images

Sometimes you need an image that when users clicks on different parts of it they go to different pages. In previous lessons you learned how to use an image as a link to another address or page. In this special case you will need to cut your picture into as many parts as you need and insert them in a table that holds image parts beside each other. Then you will link each image part to a different page.
You will also need to set both cell spacing and cell padding to the value of 0 to prevent the table to be seen between image parts. In this way users will see a single image but when they click on different parts of image they will go to different addresses.

6-6 Working with graphic editing programs
As a web designer you need a graphics manipulation program.There are many professional programs in the market. Photoshop is a very professional and powerful program but it is an expensive program. You can
use PaintShop Pro instead. This is another professional but easy program. You can even download limited versions of this program from many download sites.
These programs will enable you to cut pictures into parts, add many effects on your graphics, decrease graphics size etc.

7-1 Table background color
We can use background colors for tables in new browsers. You can specify background color options inside <TABLE> tag.

<HTML>
<HEAD>
<TITLE>Example 7-1</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BGCOLOR="#66CCFF">
<TR>
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In above example entire table will change to new color even table borders. You can also determine background color for each row of your table. If you want to do this, you must use BGCOLOR option inside <TR> tag of the desired row.
This second method will only change colors of cells in specified row.

<HTML>
<HEAD>
<TITLE>Example 7-2</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1>
<TR BGCOLOR="#66CCFF">
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR BGCOLOR="#CCFFFF">
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
You can even change color of individual cells by using BGCOLOR option in <TD> </TD> cell tags.
You can mix all above options to create your desired table.
In next example we will change color of first row to "#336699". Then we will change color of two cells in second row to "#66CCFF" and "#CCFFFF" respectively.

<HTML>
<HEAD>
<TITLE>Example 7-3</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1>
<TR BGCOLOR="#336699">
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%" BGCOLOR="#66CCFF">C</TD>
<TD width="50%" BGCOLOR="#CCFFFF">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

7-2 Column Span

Sometimes you need to join two cells in a row to each other. For example in a 2*3 table we may want to join two cells with each other . In this way we will have two cells in first row and three cells in second row. Enter this html code in a file and browse it in your browser to see what is column span.

<HTML>
<HEAD>
<TITLE>Example 7-4</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Just be careful that when you have for example 2 cells in first row and first one uses column span parameter COLSPAN=2 it means that it is equal to two cells. Therefore you must have three cells in next row (three <TR> tags) or you may use COLSPAN to create cells that when you add them, it will be equal to previous row or 3 in this example.

7-3 Row Span
This time we want to join two cells in a column (from different rows). This is the same as previous section with the difference that we will join cells from different rows rather than cells in different columns. This time we must use ROWSPAN instead of COLSPAN.

<HTML>
<HEAD>
<TITLE>Example 7-5</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="200">
<TR>
<TD ROWSPAN="2">A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Again you must be careful that when you have for example a cell in first column that you have joined two cells to create it using the option ROWSPAN=2 then your table must have two rows and you must take this in mind in next parts of your table. In above example we only entered two cells in second row (started from second <TR> ) as first cell of first row has occupied first cell of this row too and we have only two cells left of 3 cells. Enter this example and browse it to see the results.
You may want to mix these tags to create your custom tables however this is a complicated task and you must work hard to gain needed experience with these tables.

7-4 Nested Tables
Yes we can nest tables in each other. If you are going to design complicated web pages you will always do this. For example you need a table with border size of 3 in a specific part of a web page. To fix position of that table in your desired place you will need a table with border size of 0. In this case first table can be seen as its border size is 2 but second one will not be seen as you used it just for positioning of first table.
Anyway, writing a nested table code is easy.

<HTML>
<HEAD>
<TITLE>Example 7-6</TITLE>
</HEAD>
<BODY>
<TABLE border="0" width="750">
<TR>
<TD width="25%">&nbsp;</TD>
<TD width="25%">&nbsp;</TD>
<TD width="25%">
<TABLE border="2" width="100%">
<TR>
<TD width="50%">1-</TD>
<TD width="50%">HTML</TD>
</TR>
<TR>
<TD width="50%">2-</TD>
<TD width="50%">C Prog.</TD>
</TR>
<TR>
<TD width="50%">3-</TD>
<TD width="50%">JScript</TD>
</TR>
</TABLE>
</TD>
<TD width="25%">&nbsp;</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In this example we have a 1*4 table. We want to hold our main table inside this table in its third column so that our main table will be shown in right side of the center of the screen. Main table has a border size of 1 while first table is hidden.

That's it and hope you could learn the basic essence of web design :) !

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Grants For Single Moms