Hello New Programmer..

So you are interested in learning PHP & MySQL !. Well I have some good news for you, I’ll try to place here a series of tutorials, where you start from scratch, even if you had never did any web application programming before; you would be able to just start and get some results soon.

Some of the information over here took me a long time to get, especially that when I first started learning PHP; I did by try and error, and by reading stuff from here and there.

Ok, get ready for now, and the most important thing, is to believe that you can do it!! And believe me; yes you can.

Before We Start

You might be wondering right now if you will have to pay any amount as a requirement to build your webpage!. You probably would be thinking that you should buy a domain on the internet! Well the good news is that you can do it all for free!!.

PHP and MySQL are open sources, that means they are free!. The first thing we would do now, is to install on your PC what is required to get started.

The first time I tried to install PHP and MySQL (and Apache Server ~we will discuss this) turned out to be a nightmare (actually they were nightmares!!) Finally I found one magical solution that made my life much easier. That was a free software called WAMP which would install everything and get you ready into programming in less than 5 minutes!.

This software will install Apache server on your PC, this Apache is the application that will turn you PC into a web server (literally).

For now, go to the below link, download this program and just install it on your PC. (And trust me, nothing wrong will happen)

http://www.wampserver.com/en/download.php

After installation is completed, you will see a small a new white icon in your system Tray. This icon should turn completely white (Not yellow, nor red).

Having this icon white means that you are ready to Rock & Roll!

What is all about?

Before we dig into the subject, it’s good to know what type of different web pages you usually face while browsing the net. There are mainly two types of web pages, static and dynamic.

Static Pages are just as their name indicates, they are static!! This means there is no interaction between the user and those pages, their display is usually fixed, and fields to enter any information, (Such as name, email, etc…). Beside that their contents will change only if the person who made them opened those files and updated them.

Such kind of web pages are fine if you were planning to have fixed contents on your website. Such as making a site to display one story and that’s it.

The website will be made using HTML script. To make such a page you don’t really need to learn the HTML script. An easy way to do it, is to use Microsoft Word, crate whatever document you like, and then finally save it as HTML. This saved file can be used as website file.

Well, for today we are going to try create a static web page, and we will use our newly installed WAMP server to demonstrate how it’s going to be used later on.

Open Microsoft Office

On a new file type down:

Hello World !!

Use any font and size you like.

Then FileàSave AsàWeb Page (*.html, *.htm) name the file as index.html

Save the file on the desktop for now. (Note: You might get a warning letter, just click yes).

Copy the index.html file that you had just created, and copy it to the below folder on your PC.

C:\wamp\www

Well, as you guessed, this folder is inside the newly magical installed program, and www folder would represent your web server root folder! (Cool right!).

Now, go to your web browser (Internet Explorer or FireFox) and write down the below address:

http://localhost/

And voila!!

Fine below some answers for the questions that you had been thinking about:

 

Why http://localhost/	Well the server is installed on you PC, and the default address for it would be localhost (Local Host).
Why index.html	Notice that you had typed the address as http://localhost/only without specifying the file name. Well files with index are the default files to be displayed when you enter the web address name. This means when you visit a website let us say www.antcircuits.comthe first web page to be displayed has the name index. (More details about this later).

 

As an exercise for you now, try to make another web page, and call it test.html

You should place it in the same folder i.e. C:\wamp\www

And then to access it through your web browser, you will need to type the below address:

http://localhost/test.html

I believe this is enough for today, next tutorial we will start little bit with PHP.

Keep the good work, and don’t forget to brush your teeth before you sleep!. And if you have idiots at your work place, just try as much as possible to ignore them!.

The first Article of this series was called Part 0.5 since that it didn’t discuss PHP. And somehow it was catchyJ.

In this article we will start little bit with PHP coding, but before that we need to discuss something very important. Please follow the below to the end, and later on you will get the full image. (Just be patient, and try to follow things step by step).

In the last article you had created one file called index.hml. Get that page loaded again by using your browser, and going to http://localhost/ . (Note: Make Sure that WAMP is running!).

In the Internet Explorer Page, right click and then click “View Source”.

There you would see the HTML codes of the page.

<html><head> <meta http-equiv=Content-Type content=”text/html; charset=windows-1252″> <meta name=Generator content=”Microsoft Word 14 (filtered)”> <p class=MsoNormal>Hello World !!</p> </body> </html>

Note: If you applied any formatting on the Hello World, you will see more codes over there. The common thing is that you would see Hello World!!.

Where That Came From?

Well, Microsoft Office Took care of generating that code for you. You can see that somewhere within those codes, you Hello World!! Does exist.

 

Fine, I need you to do one more thing, which is opening the index.html using note pad. You will find that the same HTML codes are over there.

PHP way!

Now, open Notepad (StartàProgramsàAccessoriesàNotepad)

Write the below over there:

<html><head> <body> <?php echo(“Hello World!!”); ?> </body> </html>

Save the file as index.php, and copy that file to c:\wamp\www directory.

Note: Delete index.html please!

 

Now, using Internet Explorer; go again to http://localhost/

Again, right click, and View Source. Below HTML code will be shown:

<html> <head> <body> Hello World!! </body> </html>

 

Remember now, you wrote something in your php file saying echo, right?

But here you cannot see it!! Where has that gone! Well, your server had translated that into HTML !.

Now, remember the below; since this will remain with you for the rest of your life as a PHP programmer!

PHP script is inserted between thestart up tag <?php and the closing tag ?> Ex: <?php echo(“Hello World”); ?>

You web page should include at least the following HTML codes (It can work without them, but results are not guaranteed!).<html> <head> <body> </body> </html> Contents of the webpage will be placed between <body> and </body> tags.

 

<? Can be used instead of <?php as a short form. (But this will require some modification which we will carry on in the next tutorial (Well, I need to keep you excited for the next one, right?)

 

echo is the first PHP function that you had used. It’s used to print out whatever entered between the parenthesis. Example: echo(“I am an PHP Programmer”); à will display è I am an PHP Programmer

 

Don’t forget the semi colon at the end of every PHP command.

 

What Had Happened!

Please read the below carefully, and it’s ok to read it twice or trice! The below is really important to grasp at this stage, thus things will be clear forever. (Ok not everything will be clear, we are just talking about PHP and coding; don’t expect this to make behavior of crazy and psycho people you meet in life clear!).

When you entered http://localhost/ in you browser and Enter was hit, your browser sent a request to fetch the index page located in the localhost server. (Which is your PC that is running Apache server!)

(Note: If you don’t know what Server means, please do some googling, that’s what google was made for!)

Apache server will find that the index page is in PHP format (remember; you saved the file as index.php)

The server will not pass the index file as it is this time (Not like what happened when we had index.html). The server will process the php file, and generate the HTML codes based on the PHP codes existing in your PHP file. (In this case, the output of <?php echo(“Hello World!!”); ?> was Hello World!!

The HTML codes will be sent to your browser.

FIN!.

 

Ok, I hope that you were not expecting to have a webpage similar to google.com from the second tutorial; the journey is still long, and a lot of hard work to be carried out! Wait for the next tutorials, and please feel free to contact me if you have any questions or suggestions.