Author Archive
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);
?>
Advantages of Tableless Designs
by Sagar Awasthi on Jul.13, 2009, under Advantages of Tableless Designs
Designing a website with tables is now an old technique. Now a days it’s time to introduce tableless web design, which is very flexible as well as web development friendly. Table restricts development with many complications and disadvantages. I will try to elaborate the vital advantages of tableless for web development and web designs.
Quick loading
The most important feature of tableless desinging, helps in reducing the size of a HTML page. It is true that tables take time to load and therefore a website made with tables generally loads slowly. Slow loading means slow visual apearance, may leads to losing visitors. Reason behind is that tables come with clutter of codes which increases the loading time. As you know table is structured with number of open-close tags(i.e thead, tr, td.) that makes the entire table structure heavy. At the same time if you have used tableless, it basically reduces the code and shed up 70% of unnessasary elements.
Simple and Clear Code
If you are developing website without tables, it will clear the code with lots of stuff. It reduce unwanted tags and make it more clean which helps a developer to make changes comfortably. Developer will not have to labor hard while making any changes in the codes. Infact a clumsy apearance make it difficult for a coder to find out errors. Tableless make your code very simple and clear, without any complication one can integrate or develop some new features in the same design.
Flexibility in Presentation
With the help of CSS one can change style, graphic or font very easily. You don’t need to look whole code for a small style change. By editing CSS file, you can change the complete look and feel of design. Furthermore, Developer will update the CSS file only of a website, he will not need to update all the pages.
Search Engine Optimization
Conceptually, websites with fewer codes are always search engine friendly and can be easily read by all the search engine crawler.
Use of Standard Code
Tableless layout uses professional and very standard layout for designing a web page. Use of standard tags make designing effortless and one could make changes easily without putting lot of hard work.
Printer Friendly
Usually user surf net for the content, and takes print when they find some useful content for them. But in the tablebased layout, there are many limitations as one can’t take print of the nessasary part, it comes with the whole page(i.e header, footer, Links, and other extra advertisments) but in tablesless you can customize the need and make a layout printer friendly.
Cost Effective
Yes! It is true that Tableless web desinging requires sound knowledge on div tags and CSS. However, editing CSS files of div tags is not a complex task. Therefore, a web developer will take less working hours. This is the reason why it is considered highly cost effective.
