Technotip.com | Programming Video Tutorials

Education and Schooling: Albert Einstein

“Education is what remains after one has forgotten what he had learnt in his schooling.”
– Albert Einstein.

DO GOOD ANYWAY: Mother Teresa

“If you do good, people may accuse you of selfish motives. Do good anyway.”
– Mother Teresa. ( DO GOOD ANYWAY….. )

In this PHP program we will not be generating pages, but creating the illusion of dynamic page creation!
i.e., we will have a bunch of files inside a directory. We will fetch the contents of these files and display on a single file(index.php).

Advantages:
1. Eliminating duplicate coding: Since, we will display the contents on single page, all the common content will be written in that single page.
2. Common user will not be able to track the exact location of the individual files.
3. We can track, if the user is trying to access a file that does not exist, and then we can show appropriate messages: This will be user friendly and also helps in Search Engine Optimization(SEO), as we can specially design our 404 pages.

Note: Even though this dynamic page creation may not be something you are looking for right now, I am sure, you will encounter a situation in your project development where this technique will come handy. So nevertheless, have it in your tool box!

[youtube https://www.youtube.com/watch?v=RrSRO248NOQ]

YouTube Link: https://www.youtube.com/watch?v=RrSRO248NOQ [Watch the Video In Full Screen.]

PHP Program with CSS implemented:

(index.php)

<html>
 <head><title> Dynamic Pages </title>
 
<style type="text/css">
 
* {
font-family: Verdana;
font-size: 24pt;
 
}
#menu {
position: absolute;
top: 50px;
left: 200px;
 
padding: 10px;
margin:  10px;
 
background-color: pink;
 
}
 
#content {
position: absolute;
top: 50px;
left: 450px;
 
padding: 10px;
margin:  10px;
 
background-color: yellow;
color: red;
 
}
 
 
</style>
 </head>
 <body>
 
  <div id="menu">
 
<a href="index.php">Home</a><br />
<a href="index.php?page=js">Javascript</a><br />
<a href="index.php?page=cSharp">C Sharp</a><br />
<a href="index.php?page=css">CSS</a><br />
 
  </div>
 
 <div id="content">
 
<?php
 $p = $_GET['page'];
 
$page = "sub/".$p.".php";
 
if(file_exists($page))
include($page);
elseif($p=="")
echo "This is Home Page";
else
echo "what are you looking for! ?";
 
?>
  </div>
 
 
 </body>
</html>

In the menu div, we are having some anchor tags, using which we are passing the file names to the variable page. Which we receive in the php code(same page) and add the exact file location and check whether the file exists in the specified location or not.

Based on the file name passed, we will include the corresponding file content in the content div section. If nothing is passed, then its home page. If some irrelevant file names are passed, then we will show some messages: Here we can design a 404 error message page and show it – each time someone tries to access a page that does not exists.

File Structure:

file-structure
Save all these below files ( js.php, cSharp.php, css.php and index.php ) as shown in above image.

js.php Content:

This is Javascript File...

cSharp.php Content:

This is C Sharp....

css.php Content:

This is Cascading StyleSheet...

[ Above files are kept simple in-order to save time and to keep the program explanation simple. You can use your web designing skills to make the pages as you like. ]

PHP Code Explanation:

$p = $_GET['page'];

This line of code accepts the parameter sent by the anchor tags and stores it in a variable by name p.

       $page = "sub/".$p.".php";

sub is the folder name, inside which we have our js.php, cSharp.php and css.php files.

Ex:
If the link corresponding to cSharp is clicked. Then variable p will have the string cSharp in it.
So, variable page will have sub/cSharp.php in it.

if-elseif-else Statement:

       if(file_exists($page))
            include($page);
        elseif($p=="")
            echo "This is Home Page";
        else
            echo "what are you looking for! ?";

file_exists is a built-in php function, which checks if the specified page/file exists or not.
If it exists, then we will include that page. i.e., the content of the page will be displayed.
If variable p has nothing in it, then the clicked link is home page.
If some non-existing page is passed, then we display the message “What are you looking for! ?”.

Moving Image Inside HTML page: Javascript ( A Small Fun Application )

Write a xHTML program to take input from the user and move the image to the corresponding location(position), using Javascript.

Note: ( CSS – Cascading StyleSheet )
Static Positioning does not have top and left properties, so an image which is positioned as Static can’t be moved.
Absolute positioning: The image moves to the new location according to the values of top and left.
Relative positioning: Here the image moves relative to its original position. From its original position, it applies the new top and left value and moves accordingly.

Video Explaining The Code:

YouTube Link: https://www.youtube.com/watch?v=cJtMtd2QmMM [Watch the Video In Full Screen.]

Write a xhtml program, and use the form input tags and accept two values from the user. Using document.getElementById, get those user entered values and assign it to two variables.
Similarly, using the div tags id, change the style information and assign the user entered values to div tags top and left position whenever user hits the “move” button.

Source Code: (move.html)

 
<html>
 <head><title> Move Image </title>
 
 <style type="text/css">
  #kids { position: relative; top: 200px; left: 400px; }
 </style>
 
 <script type="text/javascript">
 
  function moveIt()
 {
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
 
var kids = document.getElementById("kids").style;
 
kids.top = x + "px";
kids.left = y  + "px";
 
 }
 
 </script>
 </head>
 <body>
 
<form>
X axis: <input type="text" id="x"><br />
Y axis: <input type="text" id="y"><br />
<input type="button" value=" Move " onclick="moveIt()" >
</form>
 
<div id="kids">
  <img 
  src="http://technotip.org/wp-content/themes/NewsDen/images/logo.gif" 
  width="220" height="42">
</div>
 
 </body>
</html>

Fun Application Code:
We have made some minor changes to the above code to get the x and y co-ordinates from the cursor position automatically.

Here, we do not accept input directly from the user. We have removed the html form using html comments(

<!--  Comments -->

) and invoke the javascript function moveIt when the user moves his mouse on the html document.
When there is onmousemove event, most browsers automatically throw some objects and we accept it in our function(as parameter) and make use of it. Some browsers like Microsoft’s Internet Explorer do not throw the event object automatically, so we assign it manually using the below code

   if( !evnt )
evnt = window.event;

Explanation of above two lines of code:
If evnt does not exist, then assign the event to evnt variable.

Also Make Sure To Watch This Video: Event Object: Javascript

Now using the clientX and clientY or screenX and screenY property of the event object, we track the x and y co-ordinates of the cursor and assign that value to the top and left position of the image(div tag which wraps the image tag).

 
<html>
 <head><title> Move Image </title>
 
 <style type="text/css">
  #kids { position: relative; top: 200px; left: 400px; }
#x, #y { font-size: 24pt; color: red; }
 </style>
 
 <script type="text/javascript">
 
document.onmousemove = moveIt;
 
  function moveIt(evnt)
 {
if( !evnt )
evnt = window.event;
 
var x = evnt.clientX;
var y = evnt.clientY;
 
var kids = document.getElementById("kids").style;
 
kids.top = x + "px";
kids.left = y  + "px";
 
document.getElementById("x").innerHTML = x;
document.getElementById("y").innerHTML = y;
 
 
 }
 
 </script>
 </head>
 <body>
X:<span id="x"></span><br />
Y:<span id="y"></span>
<!--
<form>
X axis: <input type="text" id="x"><br />
Y axis: <input type="text" id="y"><br />
<input type="button" value=" Move " onclick="moveIt()" >
</form>
-->
<div id="kids">
 <img 
 src="http://technotip.org/wp-content/themes/NewsDen/images/logo.gif" 
 width="220" height="42">
</div>
 
 </body>
</html>

Hence, whenever the user move his mouse pointer over the html document the image starts moving according to the new value generated for the each move.

Event Object: Javascript

“Browser throws object automatically whenever an event occurs.” This is true with most browsers, except Microsoft’s Internet Explorer.
To solve the browser incompatibility and to make our programs work the same way in all major browsers(including Internet Explorer – IE ), we need to write the coding with little smartness!

What does this program do?
Here we will track the users cursor movement and display the X and Y axis of the cursor position in the browser window.
We will make use of onmousemove event and clientX and clientX properties.

We will also show how to catch the event objects and make proper use of them and how to handle a situation when the event object is not passed automatically.

YouTube Link: https://www.youtube.com/watch?v=UPqPooGsAHs [Watch the Video In Full Screen.]

HTML Code:
Here we have taken a form with two empty input tags. Latter with the help of javascript program we will fill the value of these empty input html tags.

 
<html>
 <head>
  <title> Events In Javascript </title>
  <script type="text/javascript" src="event.js"></script>
 </head>
 <body>
 
  <form>
X axis: <input type="text" id="x"><br />
Y axis: <input type="text" id="y">
 
  </form>
 
 </body>
</html>

To link our html and the javascript files, we need to write this code in the head tag of html file:

   <script type="text/javascript" src="event.js"></script>

Javascript code:

 
document.onmousemove = call;
 
function call(evnt) {
 
if( !evnt )
evnt = window.event;
 
document.getElementById("x").value = evnt.clientX;
document.getElementById("y").value = evnt.clientY;
 
}

Here, when we move our mouse over the html document, call() function is invoked.
If the event object is not automatically passed by the browser i.e., if the browser is internet explorer, then we manually assign the event to evnt object using below code:

 
if( !evnt )
evnt = window.event;

With clientX and clientY property of the event object, we will assign the x axis and y axis value to the empty input tags using its id.