kashif: November 2015

Monday, 30 November 2015

Reading and printing a (.txt) file on web page in PHP & Save the data to Database

<?php
$myfile = fopen("time.txt", "r") or die("Unable to open file!");
while(!feof($myfile)) {
$x = fgets($myfile);
echo $x;
echo "<br>"; //save it to DB

$A = mysql_connect("LocalHost","root","") or die("Error in MYSQL Connection");
mysql_select_db("payroldb",$A) or die("Error in Data Base");
mysql_query("insert into tbltime values('','".$x."','".$x."')",$A) or die("Error in insert query!");
mysql_close($A);
}
fclose ($myfile);
?>

Confirm Message at Delete button

HTML Code:

PHP Code:

<?php
if(isset($_GET['A']))
{
$P = $_GET['A'];
$A = mysql_connect("localhost","root","") or die ("error in sql connection");
mysql_select_db("payroldb",$A) or die ("error in database");
mysql_query("delete from tblemp Where ID=$P",$A) or die ("error in query");
mysql_close($A);
}

?>

Thursday, 26 November 2015

File upload and move to folder

Index Page/Main Page/Form:

<html>

<head>

<title>Upload File</title>

</head>

<body>

<tr>

<legend>Upload File</legend>

</form></fieldset>

</td></tr>

<tr>

</tr>

</table>

</body>

</html>

Description Page with PHP code:

<html>

<head>

<title>Description</title>

</head>

<body>

<?php

if (isset($_POST['btnSave'])){

if(!file_exists("upload"))

{

mkdir("upload");

}

if($_FILES["file"]["error"] > 0)

{

$er="ERROR Return Code:".$_FILES["file"]["error"]."<br>";

}

else

{

echo "Upload: " . $_FILES["file"]["name"] . "<br>";

echo "Type: " . $_FILES["file"]["type"] . "<br>";

echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br>";

echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

$file = $_FILES["file"]["name"];

move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$_FILES["file"]["name"]);

echo "Stored in" , " upload/" , $_FILES["file"]["name"];

}

<br>

<?php

//echo $er;

</td></tr>

</table>

</body>

</html>

Captcha

<html>
<head>
<title>Captcha Validation</title>

<script type="text/javascript">
function DrawCaptcha()
{
var a = Math.ceil(Math.random() * 10)+ '';
var b = Math.ceil(Math.random() * 10)+ '';
var c = Math.ceil(Math.random() * 10)+ '';
var d = Math.ceil(Math.random() * 10)+ '';
var e = Math.ceil(Math.random() * 10)+ '';
var f = Math.ceil(Math.random() * 10)+ '';
var g = Math.ceil(Math.random() * 10)+ '';
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.getElementById("txtCaptcha").value = code
}
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2) return true;
return false;
}

function removeSpaces(string)
{
return string.split(' ').join('');
}
</script>

</head>
<body onload="DrawCaptcha();">
<div class="align">
Welcome To Captcha<br />
<input id="txtCaptcha" type="text" readonly="" class="input_img">
<input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" /><br>
<input type="text" id="txtInput"/>
<input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
</div>
<p style="color:#F36">- See more at: http://codingresolved.com/discussion/540/how-to-make-captcha-in-javascript/p1#sthash.3nlKLUxl.dpuf</p>
</body>
</html>

Tuesday, 17 November 2015

Search Box code in PHP

HTML Tags:

</form>

<th>First Name</th>

<th>Image</th>

<th>Father Name</th>

<th>Phone Number</th>

<th>Address</th>

<th>Date Of Birth</th>

<th>Gender</th>

<th>Joining Date</th>

<th>Religion</th>

<th>Designation</th>

<th>Department</th>

<th>Working Status</th>

</tr>

</table>

PHP Code:

<?php

if (isset($_GET['name']))

{

$letter = $_GET['name'];

$A = mysql_connect("LocalHost","root","") or die("Error in MYSQL Connection!");

mysql_select_db("payroldb",$A) or die("Error in DataBase!");

$B = mysql_query("Select * from tblemp where FirstName like '%".$letter."%'",$A) or die("Error in Insert Query.");

$num_rows = mysql_num_rows($B);

if($num_rows == 1){

echo "<h2> $num_rows Employee </h2>";

}

else

echo "<h2> $num_rows Employees </h2>";

for($a=0; $a<$num_rows; $a++)

{

$rec = mysql_fetch_array($B);

echo "<tr>";

echo "<td>$rec[0]</td>";//EID

echo "<td>$rec[1]</a></td>";//First Name

echo "<td>$rec[2]</td>";//Last Name

echo "<td><img src='images/$rec[3]' width=50 height=50 border=5 Title='$rec[1]'></td>";//Image

echo "<td>$rec[4]</td>";//Father Name

echo "<td>$rec[5]</td>";//NIC

echo "<td>$rec[6]</td>";//Ph.No

echo "<td>$rec[7]</td>";//Address

echo "<td>$rec[8]</td>";//DOB

echo "<td>$rec[9]</td>";//Gender

echo "<td>$rec[10]</td>";//Joining Date

echo "<td>$rec[11]</td>";//Religion

echo "<td>$rec[12]</td>";//Designation

echo "<td>$rec[13]</td>";//Department

echo "<td>$rec[14]</td>";//Working Status

echo "<td>$rec[15]</td>";//Reg No

echo "</tr>";

}

mysql_close($A);

}

Thursday, 12 November 2015

Easy code for radio button

Data Base:

CREATE TABLE

`data`.`tb` (`name` VARCHAR( 25 ) NOT NULL ,

`color` VARCHAR( 5 ) NOT NULL)

ENGINE = INNODB;

PHP & HTML:

<html>
<body>
<?php
if(isset($_POST['submit']))
{
$name=$_POST['name'];
$color=$_POST['color'];
if($name!="" && $color!="")
{
$query=mysql_query("insert into tb values('$name','$color')");
if($query)
{
echo "Updated successfully!";
}
else
{
echo "there is a problem in Databse";
}
}
else
{
echo "Please fill all details";
}

}
else
{
?>
Which Color your like most?
<br />
<form method="post" action="index.php">
Name:<input type="text" name="name" /><br />
<input type="radio" name="color" value="Red" />Red
<input type="radio" name="color" value="Green" />Green
<input type="radio" name="color" value="Black" />Black
<input type="radio" name="color" value="White" />White
<input type="submit" name="submit" />
</form>
<?php
}
?>
</body>
</html>

<html>
<body>
<?php
if(isset($_POST['submit']))
{
$name=$_POST['name'];
$color=$_POST['color'];
if($name!="" && $color!="")
{
$query=mysql_query("insert into tb values('$name','$color')");
if($query)
{
echo "Updated successfully!";
}
else
{
echo "there is a problem in Databse";
}
}
else
{
echo "Please fill all details";
}

}
else
{
?>
Which Color your like most?
<br />
<form method="post" action="index.php">
Name:<input type="text" name="name" /><br />
<input type="radio" name="color" value="Red" />Red
<input type="radio" name="color" value="Green" />Green
<input type="radio" name="color" value="Black" />Black
<input type="radio" name="color" value="White" />White
<input type="submit" name="submit" />
</form>
<?php
}
?>
</body>
</html>

Code for Radio Button

<?PHP

$selected_radio = $_POST['gender'];
print $selected_radio;

if (isset($_POST['Submit1'])) {

$selected_radio = $_POST['gender'];
print $selected_radio;

}

The PHP code:

<?PHP

$male_status = 'unchecked';
$female_status = 'unchecked';

if (isset($_POST['Submit1'])) {

$selected_radio = $_POST['gender'];

if ($selected_radio = = 'male') {

$male_status = 'checked';

}
else if ($selected_radio = = 'female') {

$female_status = 'checked';

}

The HTML FORM code:

<Input type = 'Radio' Name ='gender' value= 'male'
<?PHP print $male_status; ?>
>Male

<Input type = 'Radio' Name ='gender' value= 'female'
<?PHP print $female_status; ?>
>Female

</FORM>

Wednesday, 11 November 2015

Image Uploading in a Form Table

Button's Code:

<?php

if(isset($_POST['btnSave']))

{

$UN = $_POST['txtName'];

$PH = $_POST['txtPhone'];

$EM = $_POST['txtEmail'];

$FN = $_FILES['UFile']['name'];

$FT = $_FILES['UFile']['type'];

$TN = $_FILES['UFile']['tmp_name'];

echo "Temp Name: $TN<br>";

if($FT =="image/jpeg" || $FT == "image/gif" || $FT=="image/png")

{

move_uploaded_file($TN,"Data/$FN");

$A = mysql_connect("LocalHost","root","") or die("Error in MYSQL Connection!");

mysql_select_db("BahriaDB",$A) or die("Error in DataBase!");

mysql_query("Insert into tblRegister values ('','$UN','$PH','$EM','$FN')",$A) or die("Error in Insert Query.");

mysql_close($A);

}

else

{ echo "Error: Select jpg | gif | png image."; }

}

Form's Code:

<html>

<body>

<tr>

</tr>

<tr>

<td>Phone</td>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td>Select Image</td>

</tr>

<tr>

</tr>

</table>

</form>

Table's View:

<tr BGColor=Aqua> <th>RID</th> <th>Name</th> <th>Phone</th> <th>E-Mail</th> <th>Image</th> </tr>

<?php

$A = mysql_connect("LocalHost","root","") or die("Error in MYSQL Connection!");

mysql_select_db("BahriaDB",$A) or die("Error in DataBase!");

$B = mysql_query("Select * from tblRegister",$A) or die("Error in Insert Query.");

$T = mysql_num_rows($B);

echo "Total Records: $T<br>";

for($a=0; $a<$T; $a++)

{

$R = mysql_fetch_array($B);

echo "<tr>";

echo "<td>$R[0]</td>";//RID

echo "<td><a href='Detail.php?A=$R[0]'>$R[1]</a></td>";//Name

echo "<td>$R[2]</td>";//PHone

echo "<td>$R[3]</td>";//Email

echo "<td><img src='Data/$R[4]' width=100 height=100 border=5 Title='$R[1]'></td>";

echo "</tr>";

}

mysql_close($A);

</table>

</html>

Registration Code

Button's Code In PHP:

<?php

if(isset($_POST['btnReg']))

{

$NM = $_POST['txtName'];

$EM = $_POST['txtEmail'];

$PD = $_POST['txtPwd'];

$PH = $_POST['txtPhno'];

$AD = $_POST['txtAdd'];

$OC = $_POST['txtOcc'];

$A = mysql_connect("LocalHost","root","") or die("Error in MYSQL Connection");

mysql_select_db("asd",$A) or die("Error in Data Base");

mysql_query("Insert into tbluser values ('','$NM','$EM','$PD','$PH','$AD','$OC')", $A) or die("Error in Insert Query");

mysql_close($A);

echo '<script language="javascript">';

echo 'alert("Registered Successfuly...!")';

echo '</script>';

}

Form's Code in HTML:

<h1 align="center">Registration Form</h1>

<tr>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td>Passward</td>

</tr>

<tr>

<td>Phone.No</td>

</tr>

<tr>

<td>Address</td>

</tr>

<tr>

<td>Occupation</td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

Wednesday, 4 November 2015

GO to next page after LOGIN

<?php

if(isset($_POST['name_of_login_button']))
{
$A = mysql_connect("LocalHost","root","") or die("Error in MYSQL Connection");
mysql_select_db("name_of_database",$A) or die("Error in Data Base");
$NM = $_POST['name_of_first_textfield']; // that may be 'txtName'
$PD = $_POST['name_of_second_textfield']; // that may be 'txtPwd'
$query = mysql_query("SELECT * FROM name_of_table where column_name_for_Name='".$NM."' AND column_name_for_Passward='".$PD."'", $A) or die("Error in Select Query");
$row = mysql_fetch_array($query);
if($row["column_name_for_Name"]==$NM && $row["column_name_for_Passward"]==$PD)
{
echo "<script> window.location.assign('name_of_page.php'); </script>";
}
else
{
echo"Your password is wrong";
}
mysql_close($A);
}
?>

Insertion & Selection of data in PHP

Insertion:

<?php

if(isset($_POST['btnSave']))

{

$MN = $_POST['txtA'];

$RD = $_POST['txtB'];

$RT = $_POST['Rating'];

$A = mysql_connect("LocalHost","root","") or die("Error in MySQL Connection"); //Step-1: Open Connection

mysql_select_db("MovieDB",$A) or die ("Error in Data Base"); //Step-2: Select Data Base.

mysql_query("Insert into tblMovies values ('','$MN','$RD','$RT')",$A) or die ("Error in Insert Query"); //Step-3: Run Query

mysql_close($A); //Step-4: Close DataBase.

echo "Data Saved.";

}

Selection:

<?php

$A = mysql_connect("LocalHost","root","") or die("Error in MySQL Connection"); //Step-1: Open Connection

mysql_select_db("MovieDB",$A) or die ("Error in Data Base"); //Step-2: Select Data Base.

$B = mysql_query("Select * from tblMovies",$A) or die ("Error in Insert Query"); //Step-3: Run Query

$T = mysql_num_rows($B);

echo "Total Rows: $T <br>";

for($a=0; $a<$T; $a++)

{

$R = mysql_fetch_array($B);

echo "<tr>";

echo "<td>$R[0]</td>"; //MID

echo "<td>$R[1]</td>"; //MovieName

echo "<td>$R[2]</td>"; //ReleaseDate

echo "<td>$R[3]</td>"; //Rating

echo "<td align=center><font color=Blue><img src='Movies/$R[0].jpg' width=70 height=70 title='$R[1]' border=5></font></td>"; //Images

echo "</tr>";

}

mysql_close($A); //Step-4: Close DataBase.

Form:

<h2><strong>Fill Movie Information</strong></h2>

<tr>

</tr>

<tr>

</tr>

<tr>

<option>Select Rating</option>

</Select></td>

</tr>

<tr>

</tr>

</table>

</Form>

Hotel Management System in PHP

Registration & Login:

<?php

session_start();

$_SESSION['UN'] = "";

if(isset($_POST['btnSave']))

{

$UN = $_POST['txtUName'];

$PW = $_POST['txtPass'];

$SQ = $_POST['Secret'];

$AN = $_POST['txtAns'];

$BD = $_POST['BDay'];

$A = mysql_connect("localhost","root","") or die ("error in sql connection");

mysql_select_db("HotelDB",$A) or die ("error in database");

mysql_query("insert into tblUsers values('$UN','$PW','$SQ','$AN','$BD')",$A) or die ("error in insert query");

mysql_close($A);

echo "<meta http-equiv='Refresh'; content='0; URL=Index.php';>";

}

<?php

if(isset($_POST['btnLogin']))

{

$UN = $_POST['txtUName'];

$PW = $_POST['txtPass'];

$A = mysql_connect("localhost","root","") or die ("error in sql connection");

mysql_select_db("HotelDB",$A) or die ("error in database");

$B = mysql_query("Select UserName from tblUsers Where UserName='$UN' and UPassword='$PW'",$A) or die ("Error in Select query");

if(mysql_num_rows($B) > 0 )

{

$_SESSION['UN'] = $UN;

echo "<meta http-equiv='Refresh'; content='0; URL=Hotel.php';>";

}

else

{ echo "<h3 Style=Color:Red>Error: UserName or Password is Wrong!</h3>"; }

mysql_close($A);

}

<html>

<head>

<Title>:: Login Please ... </title>

</head>

<body>

<h3 align=right Style=Color:Blue>Login Please ...</h3>

<tr>

<td>UserName</td>

</tr>

<tr>

<td>Password</td>

</tr>

<tr>

</tr>

</table>

</form>

<hr>

<h3 align=right Style=Color:Blue>Signup Please ...</h3>

<tr>

<td>UserName</td>

</tr>

<tr>

<td>Password</td>

</tr>

<tr>

<td> Secret Question </td>

<option>Favourite Book</option>

<option>Your Birth Place</option>

<option>First School</option>

<option>First Lover name</option>

</select></td>

</tr>

<tr>

<td>Answer</td>

</tr>

<tr>

<td>Birth Date</td>

<td><?php

require_once('calendar/classes/tc_calendar.php');

$myCalendar = new tc_calendar("BDay", true, false);

$myCalendar->setIcon("calendar/images/iconCalendar.gif");

$myCalendar->setDate(date('d'), date('m'), date('Y'));

$myCalendar->setPath("calendar/");

$myCalendar->setYearInterval(1970, 2015);

//$myCalendar->dateAllow('2008-05-13', '2015-03-01');

$myCalendar->setDateFormat('j F Y');

$myCalendar->setHeight(350);

$myCalendar->autoSubmit(true, "form1");

$myCalendar->setAlignment('left', 'bottom');

$myCalendar->writeScript();

?></td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

Hotel Registration & Searching:

<?php

session_start();

if($_SESSION['UN'] == "")

{ echo "<meta http-equiv='Refresh'; content='0; URL=Index.php';>"; }

else

{

$P = $_SESSION['UN'];

echo "<table border=1 cellspacing=5 cellpadding=5 align=Right>";

echo "<tr>";

echo "<td><img src='Users/$P.jpg' width=50 height=50></td>";

echo "</td> <td>Welcome to $P</td>";

echo "</td> <td><a href='Index.php'>Logout</a></td>";

echo "</tr>";

echo "</table>";

}

<?php

if(isset($_GET['A']))

{

$P = $_GET['A'];

$A = mysql_connect("localhost","root","") or die ("error in sql connection");

mysql_select_db("HotelDB",$A) or die ("error in database");

mysql_query("Update tblHotel Set ACTION='False' Where HID=$P",$A) or die ("error in insert query");

mysql_close($A);

}

<?php

if(isset($_POST['btnSave']))

{

$HN = $_POST['Hotel'];

$PH = $_POST['txtPhone'];

$RN = $_POST['Room'];

$RR = $_POST['txtHRent'];

$BD = $_POST['txtBDate'];

$EM = $_POST['txtEmail'];

$A = mysql_connect("localhost","root","") or die ("error in sql connection");

mysql_select_db("HotelDB",$A) or die ("error in database");

mysql_query("insert into tblHotel values('','$HN','$PH','$RN','$RR','$BD','$EM','True')",$A) or die ("error in insert query");

mysql_close($A);

echo "<meta http-equiv='Refresh'; content='0; URL=Hotel.php';>";

}

<tr>

<td> Hotel Name </td>

<option> Sheraton </option>

<option> Marriot </option>

<option> Perl Continental </option>

<option> Charpai Hotel </option>

</select></td>

</tr>

<tr>

<td> Phone </td>

</tr>

<tr>

<td> Room Number </td>

<option> Business Class </option>

<option> Superem Class</option>

<option> Delux Class </option>

<option> Economy Class</option>

<option> Normal Class </option>

</select></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td> Email Adres</td>

</tr>

<tr>

</tr>

</table>

</form>

<tr>

<td>Search by Name</td>

</tr>

</table>

</Form>

<tr bgcolor=aqua> <th>HID</th> <th>HotelName</th> <th>PHONE</th> <th>Room</th> <th>Rent</th> <th>Booking</th> <th>EMAIL</th> <th>DELETE</th> <th>UPDATE</th> </tr>

<?php

$A = mysql_connect("localhost","root","") or die ("error in sql connection");

mysql_select_db("HotelDB",$A) or die ("error in database");

if(isset($_POST['btnSearch']))

{

$SR = $_POST['txtSearch'];

$B = mysql_query("select * from tblHotel where action ='true' and HotelName like '%$SR%'",$A) or die ("error in select query");

}

else

{

$B = mysql_query("select * from tblHotel where action ='true'",$A) or die ("error in select query");

}

$T = mysql_num_rows($B);

for($a=0; $a<$T; $a++)

{

$R = mysql_fetch_array($B);

echo "<tr>";

echo "<td> $R[0] </td>";

echo "<td> $R[1] </td>";

echo "<td> $R[2] </td>";

echo "<td> $R[3] </td>";

echo "<td> $R[4] </td>";

echo "<td> $R[5] </td>";

echo "<td> $R[6] </td>";

echo "<td><a href='hotel.php?A=$R[0]'><img src='abcd.jpg' width=50 height=50 Title='Delete'></a></td>";

echo "<td><a class='various3' href='hotel.php?hd=$R[0]&N=$R[1]&C=$R[2]&D=$R[3]'&E=$R[4]&F=$R[5]'&H=$R[6]'>Update</a></td>";

echo "</tr>";

}

mysql_close($A);

</body>

</html>

Updation of Hotel Registration:

<?php

if(isset($_POST['btnUpdate']))

{

$N = $_POST['txtHName'];

$C = $_POST['txtPhone'];

$D = $_POST['txtRNumber'];

$E = $_POST['txtHRent'];

$F = $_POST['txtBDate'];

$H = $_POST['txtEmail'];

$A = mysql_connect("LocalHost","root","") or die ("Error in MySQL Connection");

mysql_select_db("hotel",$A) or die("Error in DataBase");

mysql_query("Update Farm set HName='$N',Phone='$C',RNumber='$D',HRent='$E',BDate='$F',Email='$H' Where ID='$HID'",$A) or die ("Error in Update Query");

mysql_close($A);

echo "Data updated";

}

<html>

<body>

<h3 align=center>Update Hotel Information </h3>

<tr>

<td><input Type=Text name=txtID Value="<?php echo $_GET['A']; ?>" readonly></td>

</tr>

<tr>

<td>HName</td>

</tr>

<tr>

<td>Phone</td>

</tr>

<tr>

<td>RNumber</td>

</tr>

<tr>

<td>HRent</td>

</tr>

<tr>

<td>BDate</td>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

</tr>

</table>

</Form>

</body>

</html>

JScript Funtions

<!DOCTYPE html>
<html>
<head>
<title>Fazool</title>
<script>
function change(){
document.getElementById('para').innerHTML = "Paragraph Changed";
}
</script>
</head>
<body>
<script>
window.alert("Success");
document.write(6*5);
</script>

<h1>JS can change the style of the content...!</h1>

<button type="button" onClick="change_style()">Click Me to change the style of the content</button>
<script>
function change_style(){
var x = document.getElementById('demo');
x.style.color = "white";
x.style.background = "blue";
}
</script>
<p id="demo">This content should be change on button click...!</p>

<h1>java script can check the input validation</h1>
<p>Enter the no b/w 1-10</p>
<input id="no" type="number">
<button type="button" onClick="validation()">Check</button>
<p id="line"></p>
<script>
function validation(){
var y,z;
y = document.getElementById('no').value;
if (y < 1 || y > 10)
{z = "Input is not OK";}
else
{z = "Input is OK";}
document.getElementById('line').innerHTML = z
}
</script>

<p id="para">A paragraph</p>
<button type="button" onClick="change()">Click</button>

<h1>Change Image...!</h1>
<p>Click on the image to change it...!</p>
<img id="img" src="1.JPG" onClick="image()" height="200" width="300">
<script>
function image(){
var i;
i = document.getElementById('img');
if (i.src.match("2.JPG"))
{i.src = "1.JPG"}
else
{i.src = "2.JPG"}
}
</script>

</body>
</html>

Some JScript functions

<html>
<head><title>JavScript</title>
<script>
window.alert("Success");
document.write(6*5);
</script>
</head>
<style>
button{
background:#C6F;
color:#000;
}
h1{
text-decoration:underline;
}
p{
background:#C06;
color:#CF9;
font-family:Georgia, "Times New Roman", Times, serif;
}
</style>
<body>

<h1>My First JavaScript...!</h1>

<button type="button" onClick="document.getElementById('demo').innerHTML='This is my first Script'">
Click me to display the content.</button>

<p id="demo"></p>

<h1>Script can change the images...!</h1>
<img id="myimage" onClick="change_image()" src="off.png" height="350" width="200">
<p>Click the image to on/off the bulb.</p>
<script>
function change_image(){
var image = document.getElementById('myimage');
if (image.src.match("on.png")) {
image.src = "off.png";
} else {
image.src = "on.png";
}
}

</script>

<h1>JS can change the style of the content...!</h1>

<button type="button" onClick="change_style()">Click Me to change the style of the content</button>
<script>
function change_style(){
var x = document.getElementById('free_trial');
x.style.color = "white";
x.style.background = "blue";
}
</script>
<p id="free_trial">This content should be change on button click...!</p>

<h1>JScript Can Validate Input...!</h1>
<p>Please enter any number b/w 1-10.</p>
<input id="num" type="number">
<button type="button" onClick="input_validation()">Check</button>
<p id="validation"></p>
<script>
function input_validation(){
var a,b;
a = document.getElementById('num').value;
if (a < 1 || a > 10)
{b = "Input is not Valid";}
else
{b = "Input is Correct";}
document.getElementById('validation').innerHTML = b;
}
</script>

<h1>Nothing Special</h1>
<button type="button" onClick="document.write(6+54)">Danger</button>

</body>
</html>

Basic use of div

<!DOCTYPE html>
<html>
<head>
<title>Layout</title>

<style>
p{
text-indent:10px;
text-align:justify;
}
.header {
background-color:#0F0;
color:#09F;
text-align:center;
padding:5px;
}
marquee{
border:solid;
background-color:#F00;
color:#00F;
height:60px;
padding:0px;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#menu ul li {
float: left;
display: inline;
}

#menu ul li a {
display: block;
width: 139px;
height: 33px;
border: 1px solid;
text-align: center;
line-height: 28px;
text-decoration:underline;
background-color:#CCC;
color:#000;
}

#menu ul li a:hover {
background-color:#000;
color:#FFF;
}

#container {
width:1270px;
margin:10 auto;
}

#section {
width:826px;
height:735px;
float:left;
padding:10px;
background-color:#0FF;
}

#section1 {
background-color:#F9C;
height:735px;
padding:10px;
}

#footer {
background-color:#CC0;
color:black;
clear:both;
text-align:center;
padding:5px;
}

</style>
</head>

<body>

<div id="container">

<div class="header">
<h1>Header</h1>
</div>

<div id="menu">
<ul>
<li><a href="layout.html">HOME</a></li>
<li><a href="layout.html">HTML</a></li>
<li><a href="layout.html">CSS</a></li>
<li><a href="layout.html">PHP</a></li>
<li><a href="layout.html">JQUERY</a></li>
<li><a href="layout.html">JAVA SCRIPT</a></li>
<li><a href="layout.html">AJAX</a></li>
<li><a href="layout.html">About Us</a></li>
<li><a href="layout.html">Contact Us</a></li>
</ul>
</div>
<marquee><h2>BUKC will remain close till monday.</h2></marquee>
<div id="section">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 millioninhabitants.</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>

<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the Île-de-France region, also known as the région parisienne.</p>
<p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>

<div id="section1">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>

</div>

<div id="footer">
Copyright é ComSouls.com
</div>
</body>
</html>