Wednesday, October 20, 2010

Page Loading Screen/Image for all pages Simple HTML

Use this image or image of your own choice Try some animated gif's for rich UI experience



and this HTML

<!-- Display a loading image while the page is loading Author: Hariharan.C-->
<html>
<head>
<meta equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#loadingDiv img{ border: none; }
#loadingDiv{ opacity: 0.8;filter: alpha(opacity = 80); ZOOM: 1}
/** For IE6 enable this

* html #loadingDiv{
background-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");

}*/
</style>
</head>
<body onload="init()">
<div id="loadingDiv" style="position:absolute;width:100%;height:100%;background-color:#777777;display: block; top: 0pt; left: 0pt; "><div style="z-index: 90;position: absolute; z-index: 150; top: 248px; left: 610px;text-align:center"><img src="loading.gif" id="loadingImage" /><br />Loading Page...Please wait</div></div>
<script type="text/javascript">
var loadingDivObj=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
loadingDivObj=document.loadingDiv;
else if (ns6)
loadingDivObj=document.getElementById("loadingDiv").style;
else if (ie4)
loadingDivObj=document.all.loadingDiv.style;
function init()
{
if(ns4){loadingDivObj.visibility="hidden";}
else if (ns6||ie4) loadingDivObj.display="none";
}
</script>

<!-- Write your HTML Here -->
<!-- Sample HTML -->
<iframe src="http://www.google.com" style="width:auto;height:auto"></iframe>
</body>
</html>


Use this code to display a page loading screen/image. Place the code in the top of the page before loading css/javascript.

Tuesday, October 19, 2010

Learn how to Install Apache, PHP, MySQL and phpMyAdmin

Apache Logo PHP Logo MySQL Logo phpMyAdmin Logo

Learn how to Install Apache, PHP, MySQL and phpMyAdmin:

This tutorial will show you step-by-step how to install:
  • Apache 2
  • PHP 5
  • MySQL 5
  • phpMyAdmin
The Apache Server combined with the power of PHP, MySQL, and phpMyAdmin, creates one of the best possible development environments for a web programmer. Getting everything properly configured can take 20-30 minutes, so make sure you have enough time set aside before beginning the installation.

Don't be intimidated by the length of this page. I'll walk you step-by-step through each part of the installaton. All you need is a basic understanding of HTML and computers, and if any part of the installation isn't clear to you, just send me an email.

Start the Installation:

    Installing Apache:

    Today we will be installing Apache version 2.2.4. Follow the steps carefully.
    1. Go to www.apache.org and download "Win32 Binary (MSI Installer): apache_2.2.4-win32-x86-no_ssl.msi" to your desktop.

      Note: Make sure that you download Apache version 2.2.4 (Win32 Binary MSI Installer)! The rest of the tutorial is written using this version.

    2. Double click "apache_2.2.4-win32-x86-no_ssl.msi", and if prompted, click "run".

    3. An installation wizard will appear:

      Start the Apache Server Installation

      Click "Next".

    4. The next page contains the terms of agreement. Select "I accept", and click "Next".

    5. Read about the Apache Server, and click "Next"

    6. The next screen will ask you for specific server information. Enter the values seen below:

      Configure Apache

      Click "Next".

    7. On the next screen, select "Typical Installation" and click "Next".

    8. Click "Next".

    9. Click "Install".

    10. Open up Internet Explorer and type in "http://localhost". If you see a page that says "It works!" then the Apache server has been installed successfully.

      Apache Server Success Page

    A few notes on your Apache Server Configuration:
    • Apache is installed by default in your "C:\Program Files\Apache Software Foundation\Apache2.2" directory.
    • Inside that directory there is a folder called "htdocs" (the equivilant of your \www\ or \public_html\ directory). You can develop your applications inside this folder and access them by going to http://localhost/your_file_name.php
    • The Apache Configuration settings are defined in a file named "httpd.conf" located in the "conf" directory. Do not attempt to change these settings unless you know what you're doing. An error in this file will result in the Apache Server not functioning correctly!

    Installing PHP:

    Next we will be installing PHP version 5. Follow the steps carefully.
    1. Go to www.php.net and download the "PHP 5.2.0 zip package" to your desktop. (Be patient while it downloads, the ZIP file is over 9MB!)

      Note: Make sure that you download the PHP 5.2.0 zip package! The rest of the tutorial is written using this version.

    2. Create a new folder called "php" in your C Drive. Copy the "php-5.2.0-Win32.zip" file to there ("C:\php") and extract it using WinZIP or a similiar program.

    3. Your "C:\php" directory should now look like:

      PHP Directory

    4. Next copy the "php.ini-dist" file from "C:/php/" to "C:/WINDOWS" and rename it to "php.ini". This is your PHP configuration file. We'll come back to this later.

    5. Now it's time to tell Apache that PHP exists. Open up your Apache configuration file ("C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf") in notepad and add these four lines to the bottom of the "LoadModule" section:

      LoadModule php5_module "c:/php/php5apache2_2.dll"
      AddHandler application/x-httpd-php .php
      # configure the path to php.ini
      PHPIniDir "c:/windows"

    6. In your "htdocs" directory, create a file called "info.php". Open it in notepad and add this line of code to it:

      <?php phpinfo(); ?>

    7. Restart your Apache Server for the changes to take effect: Start > All Programs > Apache HTTP Server 4.2.4 > Control Apache Server > Restart

    8. Open up Internet Explorer and type in: http://localhost/info.php. If your browser takes you to a page that looks like this, then PHP has been installed successfully!

      PHP Info Page

    Modifying your PHP Configuration File:
    • Your PHP configuration (php.ini) file is located in "C:/WINDOWS/php.ini". You can modify it with notepad or a similiar text editor.
    • Open it up and find the line that says:

      extension_dir = "./"

      and change it to

      extension_dir = "C:\php\ext"

    • Find the line that says:

      ;session.save_path = "/tmp"

      and change it to

      session.save_path = "C:\WINDOWS\temp"


    Installing MYSQL:

    Next we will be installing MySQL version 5. Follow the steps carefully.
    1. Go to www.mysql.com and download the "Windows (x86) ZIP/Setup.EXE (version 5.0.27)" to your desktop. (To do this you'll need to register an account with MySQL.)

    2. Once "mysql-5.0.27-win32.zip" has finished downloading, you can extract it using WinZIP or a similiar program.

    3. Once extracted, double click on the "Setup.exe" file. An installation wizard will appear.

      Start the MySQL Server Installation

      Click "Next".

    4. Select "Typical" Installation and click "Next".

    5. Click "Install". (Be patient, this can take up to several minutes).

    6. The next screen will ask you to "Sign Up". Select "Skip Sign-Up" for now.

    7. The next screen will tell you that the installation wizard is complete. Make sure that the "Configure the MySQL Server now" field is checked before clicking "Finish".

      Create a MySQL Server Instance

    8. The MySQL Server Instance Configuration Wizard should appear. Click "Next".

    9. Select "Detailed Configuration" and click "Next".

    10. Select "Developer Machine" and click "Next".

    11. Select "Multifunctional Database" and click "Next".

    12. Click "Next".

    13. Select "Decision Support (DSS)/OLAP" and click "Next".

    14. Select "Multifunctional Database" and click "Next".

    15. Make sure "Enable TCP/IP Networking" is checked, the Port Number is set to "3306", and "Enable Strict Mode" is checked. Click "Next".

    16. Select "Standard Character Set" and click "Next".

    17. Check "Install As Windows Service", set the Service Name to "MySQL", and check "Launch the MySQL Server automatically". Make sure that the "Include Bin Directory in Windows Path" is NOT checked. Click "Next".

    18. On the next screen, check the box that says "Modify Security Settings". Enter a password for the default "root" account, and confirm the password in the box below. Do NOT check the boxes "Enable root access from remote machines" or "Create An Anonymous Account". Click "Next".

    19. Click "Execute". (This may take a few minutes. Be patient).

    20. Click "Finish".

    21. To test if MySQL was installed correct, go to: Start > All Programs > MySQL > MySQL Server 5.0 > MySQL Command Line Client. The MySQL Command Line Client will appear:

      MySQL Command Line

    22. It will ask you for a password. Enter the password you created in step 18. (If you enter an incorrect password MySQL will automatically close the command line)

    23. Next, type in the commands shown below: (shown in blue)

      Test MySQL

      If you don't get any errors, and it returns the information shown above, then MySQL has been successfully installed! Next we will need to configure PHP to work with MySQL.

    Configuring PHP to work with MySQL:

    Now that both PHP and MySQL are installed, we have to configure them to work together.
    1. Open up your php.ini file (C:/WINDOWS/php.ini) and find the line:

      ;extension=php_mysql.dll
      To enable the MySQL extension, delete the semi-colon at the beginning of that line.

    2. Next we must add the PHP directory to the Windows PATH. To do this, click: Start > My Computer > Properties > Advanced > Environment Variables. Under the second list (System Variables), there will be a variable called "Path". Select it and click "Edit". Add ";C:\php" to the very end of the string and click "OK".

    3. Restart your computer for the changes to take effect.

    4. Create a new file in your "htdocs" directory called "mysql_test.php".

    5. Copy the following code into "mysql_test.php" and click save. (Make sure to replace the MYSQL_PASS constant with the MySQL Password you specified during the MySQL installation).

      <?php

      # Define MySQL Settings
      define("MYSQL_HOST", "localhost");
      define("MYSQL_USER", "root");
      define("MYSQL_PASS", "password");
      define("MYSQL_DB", "test");

      $conn = mysql_connect("".MYSQL_HOST."", "".MYSQL_USER."", "".MYSQL_PASS."") or die(mysql_error());
      mysql_select_db("".MYSQL_DB."",$conn) or die(mysql_error());

      $sql = "SELECT * FROM test";
      $res = mysql_query($sql);

      while ($field = mysql_fetch_array($res))
      {
      $id = $field['id'];
      $name = $field['name'];

      echo 'ID: ' . $field['id'] . '<br />';
      echo 'Name: ' . $field['name'] . '<br /><br />';
      }

      ?>
    6. Open up Internet Explorer and type in "http://localhost/mysql_test.php". If the "mysql_test.php" page returns something similiar to:

      ID: 1
      Name: John

      Then PHP & MySQL have been successfully configured to work together. Congratulations! The next and final step is to install phpMyAdmin.


    Installing phpMyAdmin:

    Now that both Apache, PHP and MySQL are installed, we can install phpMyAdmin, a tool that allows you to easily manage your MySQL databases.
    1. Go to www.phpMyAdmin.net and download "english.zip" under the phpMyAdmin 2.9.2 section to your desktop (I assume that since you are reading this article that you understand English).

    2. Create a new folder called "phpmyadmin" in your "htdocs" directory. Extract the contents of the "phpMyAdmin-2.9.2-english.zip" ZIP file here. Your C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\phpmyadmin" directory should now look like:



    3. Create a new file in the "phpMyAdmin" directory (above) called "config.inc.php". Place this code inside it and be sure to replace "YOUR_PASSWORD_HERE" (in both places below) with your MySQL Password:

      <?php

      /* $Id: config.sample.inc.php 9675 2006-11-03 09:06:06Z nijel $ */
      // vim: expandtab sw=4 ts=4 sts=4:

      /**
      * phpMyAdmin sample configuration, you can use it as base for
      * manual configuration. For easier setup you can use scripts/setup.php
      *
      * All directives are explained in Documentation.html and on phpMyAdmin
      * wiki <http://wiki.cihar.com>.
      */

      /*
      * This is needed for cookie based authentication to encrypt password in
      * cookie
      */
      $cfg['blowfish_secret'] = ''; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */

      /*
      * Servers configuration
      */
      $i = 0;

      /*
      * First server
      */
      $i++;

      $cfg['Servers'][$i]['user'] = 'root';
      $cfg['Servers'][$i]['password'] = 'YOUR_PASSWORD_HERE'; // Your MySQL Password


      /* Authentication type */
      $cfg['Servers'][$i]['auth_type'] = 'config';
      /* Server parameters */
      $cfg['Servers'][$i]['host'] = 'localhost';
      $cfg['Servers'][$i]['connect_type'] = 'tcp';
      $cfg['Servers'][$i]['compress'] = false;
      /* Select mysqli if your server has it */
      $cfg['Servers'][$i]['extension'] = 'mysql';
      /* User for advanced features */
      $cfg['Servers'][$i]['controluser'] = 'root';
      $cfg['Servers'][$i]['controlpass'] = 'YOUR_PASSWORD_HERE'; // Your MySQL Password
      /* Advanced phpMyAdmin features */
      $cfg['Servers'][$i]['pmadb'] = 'phpmyadmin';
      $cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark';
      $cfg['Servers'][$i]['relation'] = 'pma_relation';
      $cfg['Servers'][$i]['table_info'] = 'pma_table_info';
      $cfg['Servers'][$i]['table_coords'] = 'pma_table_coords';
      $cfg['Servers'][$i]['pdf_pages'] = 'pma_pdf_pages';
      $cfg['Servers'][$i]['column_info'] = 'pma_column_info';
      $cfg['Servers'][$i]['history'] = 'pma_history';

      /*
      * End of servers configuration
      */

      /*
      * Directories for saving/loading files from server
      */
      $cfg['UploadDir'] = '';
      $cfg['SaveDir'] = '';

      ?>


    4. phpMyAdmin has now been successfully installed! To use it, open up Internet Explorer and type in "http://localhost/phpmyadmin". This will bring you to the main phpMyAdmin page. If you have any questions, refer to the phpMyAdmin website or the "Documentation.html" file in the /phpMyAdmin/ directory.
    5. Enjoy using Apache, PHP, MySQL, and phpMyAdmin!
     

    Followers