PHP File Upload
by Sagar Awasthi on Jan.14, 2010, under PHP File Upload
Below is the script for uploading file from the HTML FORM via PHP
HTML File:
<html>
<head>
<title>::PHP file Uploader -E-Vigilant.com::</title>
</head>
<body><form action=”upload.php” method=”post” enctype=”multipart/form-data”>
<label for=”file”>Filename:</label>
<input type=”file” name=”file” id=”file” />
<br />
<input type=”submit” name=”submit” value=”Submit” />
</form></body>
</html>
PHP Script, save the script below in a file name; “upload.php”
<?php
if ((($_FILES["file"]["type"] == “image/gif”) || ($_FILES["file"]["type"] == “image/jpeg”) || ($_FILES["file"]["type"] == “image/pjpeg”)) && ($_FILES["file"]["size"] < 100000)){
if ($_FILES["file"]["error"] > 0)
{
echo “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 />”;if (file_exists(”upload/” . $_FILES["file"]["name"]))
{
echo $_FILES["file"]["name"] . ” already exists. “;
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"], “upload/” . $_FILES["file"]["name"]);
echo “Stored in: ” . “upload/” . $_FILES["file"]["name"];
}
}
}
else
{
echo “Invalid file”;
}
?>
CSS pseudo-classes and elements
by Sagar Awasthi on Oct.22, 2009, under CSS pseudo-classes and elements
CSS pseudo-classes and CSS pseudo-elements are used to add special effects to some selectors.
CSS pseudo-class syntax:
selector:pseudo-class {property:value}
CSS pseudo-elements syntax:
selector:pseudo-element {property:value}
Few pseudo-classes and elements are explained below:
1. Anchor Pseudo-classes
Most of you guys know about these classes, those are basically for the link tag i.e. Anchor tag “<a>”. See below for some examples
a:link {color:#00ff00} /* unvisited link */
a:visited {color:#00ff00} /* visited link */
a:hover {color:#ffff00} /* mouse over link */
a:active {color:#0000ff} /* selected link */
Pseudo-classes could be pooled with CSS classes:
a.blue:link {color:#0000FF}
at above I have made a “blue” class for Anchor tag “<a>”, combined with pseudo class “:link”. In HTML we will only call class in the anchor tag
<a href=”mygod.html”>My God</a>
2. The :first-child Pseudo-class
The :first-child pseudo-class matches a particular element that is actualy the first child of another element. E.g if we use this with <p> tag it will change the style of first ever <p> tag on the page.
Note: <!DOCTYPE> must be declared, if you want “:first-child” to work in IE
<html>
<head>
<style type=”text/css”>
p > i:first-child{ font-weight:bold; color: #ff0000; }
</style>
</head><body>
<p>Hello, text is in <i>strong</i> format.</p>
<p>Hello, text is in <i>strong</i> format.</p>
</body>
</html>
3. “:first-letter” pseudo-element :-
It will add a style or define a style to the first character of a text/content.
Note: The below are the properties which apply to the “first-line” pseudo-element:
font, color, background property, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear
p:first-letter
{
color:#00EEEE;
font-weight:bold;}
4. “:first-line” pseudo-element :-
It will add a style or define a style to the first line of a text/content.
p:first-line
{
color:#00EEEE;
font-weight:bold;}
Note: The below are the properties which apply to the “first-letter” pseudo- element
font, color, background, margin, padding, border,text-decoration, vertical-align when “float” is “none”, text-transform, line-height, float, clear
Note: Both the “first-letter” and “first-line” pseudo-element will only be used with block-level elements.
5. “:after “ pseudo-element :-
it is basically used to add the content after any element. It insert some content after the element. E.g. in the example below I have added an image after H1 tag
h1:after {content:url(image.gif); }
6. :before pseudo-element :-
it is basically used to add the content before any element. It insert some content after the element. E.g. in the example below I have added an image before the text of H4 tag
H4:before{content:url(image.gif); }
7. The :lang Pseudo-class
The :lang pseudo-class allow you to define special sets or policies for different languages.
Note: This tag is only supported by IE 8 (and higher)or define a <!DOCTYPE>
e.g
<html>
<head>
<style type=”text/css”> q:lang(no) {quotes: “#” “#”}
</style>
</head><body> <p>Some text <q lang=”no”>A hash in a paragraph</q> Again Some text.</p> </body>
</html>
Passing JavaScript variables to PHP
by Sagar Awasthi on Oct.16, 2009, under Passing JavaScript variables to PHP
JavaScript is a client side scripting language, while PHP is a server side technology. Unlike other programming language i.e. Java or ASP.Net, PHP doesn’t have any plugin/tools to help it to work at client side. Byut we can combine Javascript and PHP to develp a High tech web applications.
Let’s take example of defining visitor’s screen resolution. We will be JavaScript to get screen resolution and then pass the same data to PHP. We’ll have two files then one is HTML JavaScript file(screen.html) and other for PHP(screen-res.php).
Here we go:
<!– screen.html–>
<HTML>:
<header>
<title>Passing Variables</title>
<script type=”text/javascript”>var scrwidth = screen.width;
var scrheight = screen.height;if (scrwidth > 0 && scrheight >0)
{
window.location.href = “http://localhost/prj/screen-res.php?scrwidth=” + scrwidth + “& scrheight=” + scrheight;
} else
exit();</script>
</header>
<body>
Processing….
</body>
</HTML>
Save the above code as in HTML file(screen.html) then open the page in your browser. When this code has executed, it will redirect the page to a PHP page(screen-res.php) where screen resolutions are displayed. The ‘screen-res.php’ page will have the below code:
<!— screen-res.php –>
<?php
print “<h1>My Screen Resolution!</h1>”;
print “Screen Width : “.$_GET['scrwidth'].”<br/>”;
print “Screen Height : “.$_GET['scrheight'].”<br/>”;
?>
I hope I made myself clear with passing variables from JavaScript to PHP using POST method. Passing JavaScript variables in PHP is very much similar to sending any HTML form’s data using GET method.
PHP/MySQL-Open and Close Connection
by Sagar Awasthi on Oct.06, 2009, under PHP/MySQL-Open and Close Connection
Just in brief I would like to introduce what is MySQL;
MySQL is a database and used to manage data i.e. save, delete, insert etc. The Data in MySQL is stored in database objects is called tables. A table has a collection of related data entries which is present in various coloumns and rows.
We use queries as a questioning to Database. We may say a query as a question or a request.
SELECT LastName FROM Persons
Above query object is asking for ‘lastname’ columns of table ‘Persons’.
Create a Connection to a MySQL Database
While connecting to PHP we need to connect PHP page with the database and for that we use
mysql_connect(‘[servername]’, ‘[username]’, ‘[password]’);
To Close a connection
mysql_close();
In the following example we store the mysql connection in a variable i.e $con. In if statement if connection is failed then ‘die’ will display message with an error.
Code:
<?php
$servername = ‘localhost’;
$username = ‘root’;
$password = ”;$con = mysql_connect($servername, $username, $password);
if(!$con)
{
die(’not connected…’.mysql_error());
}else{
echo(’Connected….’);
}mysql_close($con);
?>
Random Image Display
by admin on Sep.23, 2009, under JavaScript, Random Image Display
Here I would like to share about “How could we display images randomly with the use of simple JavaScript“. I assume that you have basic knowledge of Jscript and know about the Arrays and Mathematical functions.
Here is the code of randomImage.js file,
function ev_random_img()
{
var myimages=new Array()
myimages[1]=”adv1.gif”
myimages[2]=”adv2.gif”
myimages[3]=”adv3.gif”
myimages[4]=”adv4.gif”
myimages[5]=”adv5.gif”var ry=Math.floor(Math.random()*myimages.length)
if(ry==0){ry=1;}
var imgpath = “images/” + myimages[ry];
document.getElementById(’imgadv’).src = imgpath;}
In the Above code I have defined an Array myimages and put the image name there, in second step I used Math.random to generate random numeric value and Math.floor fuction to round the value.
In Variable ‘imgpath’ I stored the complete path, as my images will be placed under ‘images’ folder that is why I made this string.
Finally by using getElementById method, I get the reference of the ‘image’ object with the specified ID. I have used ‘.src ‘ property to change the source path of image with the randomly generated path.
On the HTML page, just place
<script src=”script/ randomImage.js ” ></script>
At the head and put an image holder with ID ‘imgadv’.
<img src=”../” alt=”#” width=”348″ height=”203″ hspace=”10″ />
similarly If you want to change background style then follow all that same just a small change at the last
var bgpath = “url(images/adv/splats/” + bgimages[ry] + “)”;
document.getElementById(’splats’).style.backgroundImage = bgpath;
where ’splats’ is the ID given to the table or DIV at the HTML page. Variable ‘bgpath’ will have the complete string of path.
In Addition to above, add the lines below for random background image:
var bgimages = new Array()
bgimages[1] = “yellow-splats.gif”;
bgimages[2] = “aqua-splats.gif”;
bgimages[3] = “green-splats.gif”;
bgimages[4] = “blue-splats.gif”;
bgimages[5] = “purple-splats.gif”;
bgimages[6] = “pink-splats.gif”;var bgpath = “url(images/adv/splats/” + bgimages[ry] + “)”;
//document.getElementById(’splats’).style.backgroundImage = ‘url(images/adv/adv2.gif)’;
document.getElementById(’splats’).style.backgroundImage = bgpath;