Mostly dynamic websites are built on Web application frameworks. Nowadays, there are number of frameworks available today both paid and free. Let us take a over view of what is Web application frameworks.

What is a Web Framework

A web application framework is a software framework that is designed to support the development of dynamic websites, web applications and web services. The framework aims to alleviate the overhead associated with common activities performed in Web development. For example, many frameworks provide libraries for database access, templating frameworks and session management, and they often promote code reuse.

Functions of Framework

Web application frame works are made to cater wide range of needs of designers and developers.

Database: Nowadays, mostly Web development frame works are database driven because they provide support to multiple databases like My SQL, SQL ++, Oracle and others.

Web Templates: Dynamic website is divided in two parts static i.e. HTML and Dynamic Template i.e. code generation part for HTML. In a template we can insert variables without the knowledge coding.

User Management: One of the most important features of any framework is user management because it supports User Logins there roles and there limitations as a user.

URL Mapping: This make it possible for a framework to interpretate URL with ease and simplification for user. URL mapping  means URL simplification.  Nowadays, mostly Web development frame works are database driven because they provide support to multiple databases like My SQL, SQL ++, Oracle and others.

Web Templates: – Dynamic website is divided in two parts static i.e. HTML and Dynamic Template i.e. code generation part for HTML. In a template we can insert variables without the knowledge coding.

User Management: One of the most important features of any framework is user management because it supports User Logins there roles and there limitations as a user.

URL Mapping: This make it possible for a framework to interpretate URL with ease and simplification for user. URL mapping  means URL simplification.

Most Popular Frameworks

Zend Framework
Symfony
Codelgniter
CakePHP
Kohana

Currently, there are numbers of Web application frameworks available but among all, three are most popular once and they are CMS (Content Management System).

WordPress
Joomla
Drupal

I believe this topic will help you to get the basic understanding of frameworks.

Related posts:

1. Important Website Security Tips Website Security is a very important subject and always needs...
2. Memcached Server Installation and Access with PHP An exclusive tutorial about MEMCACHED Server, its simple installation method...
3. Country lookup with PHP via GeoIP How to get users location i.e. country, city etc using...

• mytest1.php: traditional: if(){do_smth;}else{do_smth;}
• mytest2.php: curly brackets: if()do_smth;else do_smth;
• mytest3.php: colon: if():do_smth;else: do_smth;endif;

mytest1.php

<?php
$time = microtime();
$time = explode(" ", $time);
$time = $time[1] + $time[0];
$start = $time;

for($i = 1; $i <= 1000000; $i++){

if($i % 2){
echo $i." is odd";
}else{
echo $i." is even";
}
}
$time = microtime();
$time = explode(" ", $time);
$time = $time[1] + $time[0];
$finish = $time;
$totaltime = ($finish - $start);
printf ("This page took %f seconds to load.", $totaltime);
?>

mytest2.php

<?php
$time = microtime();
$time = explode(" ", $time);
$time = $time[1] + $time[0];
$start = $time;

for($i = 1; $i <= 1000000; $i++){

if($i % 2)
echo $i." is odd";

else

echo $i." is even";
}
$time = microtime();
$time = explode(" ", $time);
$time = $time[1] + $time[0];
$finish = $time;
$totaltime = ($finish - $start);
printf ("This page took %f seconds to load.", $totaltime);
?>

mytest3.php

<?php
$time = microtime();
$time = explode(" ", $time);
$time = $time[1] + $time[0];
$start = $time;

for($i = 1; $i <= 1000000; $i++){

if($i % 2):
echo $i." is odd";

else:
echo $i." is even";

endif;
}
$time = microtime();
$time = explode(" ", $time);
$time = $time[1] + $time[0];
$finish = $time;
$totaltime = ($finish - $start);
printf ("This page took %f seconds to load.", $totaltime);
?>

Testing

Iam running each file 5 times and then I’ll count an average time for each one. We will see if there is any difference in load time.

I am running each file 5 times and then I’ll count an average time for each one. We will see if there is any difference in load time.

mytest1.php load times:

• 3.062667 s
• 2.915338 s
• 3.162933 s
• 3.161454 s
• 3.521963 s

Average: 3.164871 s

mytest2.php load times:

• 2.688994 s
• 3.250662 s
• 3.346098 s
• 3.001084 s
• 2.978943 s

Average:3.053156 s

mytest3.php load times:

• 2.747105 s
• 3.222176 s
• 3.197005 s
• 3.235344 s
• 3.391850 s

Average:3.158696 s

Conclusion

All 3 tests were close, but test #2 (curly brackets) was a bit faster than rest 2. I must say, that this if-else statement was executed 1 million times, so there is absolutely no difference in any actual project at load speed. Another thing I haven’t mentioned above is your code’s readability.

With traditional brackets code is much easier to read for humans, so I would still recommend you to stick with basic, old-fashioned if(){}elseif(){}else{} variant. Share with opinions by giving your comments.

Related posts:

1. Country lookup with PHP via GeoIP How to get users location i.e. country, city etc using...
2. Memcached Server Installation and Access with PHP An exclusive tutorial about MEMCACHED Server, its simple installation method...
3. Ajax Validation with Jquery This is a very informative tutorial for developers who want...

Improving the speed of website is necessary not only to users, but for search engine rankings as well. Last April, Google announced that they are now including website speed in their search ranking algorithms.

I am sharing some tips to improve the performance of web page loading time

1. Test the Speed of the Website

The first thing you should do is to analyze your current page speed. This allows to track your improvement and ensure that any changes you make, positively improves your page load times.

There are various free tools out there for checking how long it takes to load your website:

• Pingdom offers an easy-to-use site speed test that mimics that way a page is loaded in a web browser.
• Page Speed is an open source Firefox add-on that helps you assess the performance of your web pages. It also provides suggestions on how to fix performance issues.
• Web Page Test is another great tool that shows you the speed and performance of your website in different browsers.

Image Optimization

you should know that when to use the appropriate file format for your images. Changing to a different file format can dramatically decrease the file size of an image.

• GIF is ideal for images with few colors like logos.
• JPEG is great for images with lots of colors and details like photographs.
• PNG is the choice when you need high quality transparent images.

3. Do not Scale Down the Images

Avoid using a larger image than you need just because you can set the width and height attributes of <img> elements in HTML.

If you need a 100x100px image and you have a 700x700px image, use an image editor like Photoshop or one of these web-based image editors to resize the image to the needed dimensions. This lowers the file size of the image, thus helping to decrease page loading times.

4. Compress and Optimize Your Content

Compressing your website content can have a huge impact on reducing load times. When using HTTP compression, all of your web page data is sent in a single smaller file instead of a request that is full of many different files. For more information, see this Wikipedia article on HTTP Compression.

You can also optimize and compress your JavaScript and CSS files by combining them and minifying the source code.

5. Put Stylesheet References at the Top

Moving your stylesheet references to the <head> of your HTML document helps your pages feel like it is loading faster because doing so allows your pages to render the styles progressively. In addition, it doesn’t hurt that it’s the W3C standard.

6. Put Script References at the Bottom

Browsers can only download two components per hostname at the same time. If you add your scripts towards the top, it would block anything else below it on the initial loading of the page. This makes it feel like the page is loading slower.

To avoid this situation, place script references as far down the HTML document as possible, preferably right before the closing <body> tag.

7. To Place CSS & JavaScript in External Files

If your JavaScript and CSS are directly in your HTML document, they are downloaded every time an HTML document is requested. This, then, doesn’t take advantage of browser caching and increases the size of the HTML document.

Always place your CSS and JavaScript in external files; it’s a best practice and makes your site easier to maintain and update.

8. Minimise HTTP Requests

When visiting a new web page, most of the page-loading time is spent downloading components of that page (e.g. images, stylesheets, and scripts).

By minimizing the number of requests a web page needs to make, it will load faster. To reduce HTTP requests for images, one thing you can do is to use CSS sprites to combine multiple images.

If you have multiple stylesheets and JavaScript libraries, consider combining them to reduce the number of HTTP requests.

9. Cache the Web Pages

If you use a content management system that dynamically generates your web pages, you should statically cache your web pages and database queries so that you can decrease the strain on your server as well as speed up page rendering times.

When you cache your page, it saves a static version of it to be presented to the user instead of recreating it every time it’s requested.

For WordPress, check out WP Super Cache and W3 Total Cache (also read this WordPress codex entry on optimizing/caching WordPress). Drupal core has native caching.

10. Reduce 301 Redirects

Every time a 301 redirect is used, it forces the browser to a new URL which increases page-loading times. If possible, avoid using 301 redirects.

Conclusion

Web page speed should not be ignored if you are concerned about providing an optimal user experience.

If you want more information to improve your website’s page load times then read Google’s section on page speed, which provides tools, articles, and community feedback regarding website speed. Good luck and happy optimizing!

Finally, share your thoughts about this articles as well.

Related posts:

1. Traditional VS Bracketless if-else condition There is no denying the fact that some developers are...
2. Important Website Security Tips Website Security is a very important subject and always needs...
3. Ajax Validation with Jquery This is a very informative tutorial for developers who want...

There are no fancy javascript hacks needed either. Every User toggles between normal size and fullscreen with a just mouse click, which can toggle Stage["displayState"] from “normal” to “fullScreen”.

The parameter allow FullScreen should be set to true in the applet html, otherwise it will not work

<param name="allowFullScreen" value="true" />

The first thing to do is create a button and add the following code to it:

 on(press){
   toggleFullScreen();
 }



The code for the function toggleFullScreen and a resize listener are  placed on the main stage.

01  //Don't scale the movie when the stage size changes
02 Stage.scaleMode="noScale";
03 //Align the stage to the top left
04 Stage.align = "TL";
05 //Function to toggle between fullscreen and normal size
06 //the toggle fullscreen button calls this function when pressed
07 function toggleFullScreen(){
08   //if normal size, go to fullscreen, else go to normal size
09   if(Stage["displayState"]=="normal"){
10     Stage["displayState"]="fullScreen";
11   }else{
12     Stage["displayState"]="normal";
13   }
14 }
15 //Create a listener for each time the Stage is resized
16 var resizeListener:Object = new Object();
17 //Called each time the stage is resized
18 resizeListener.onResize = function () {
19   //Move the button to the center of the screen
20   toggleFullScreenButton._x=Stage.width/2;
21   toggleFullScreenButton._y=Stage.height/2;
22 }
22 //Add the listener to Stage
23 Stage.addListener(resizeListener);

Example XHTML used for this applet:

<object data="http://www.exclusivetutorials.com/wp-content/uploads/2010/09/flash-fullscreen.swf"  type="application/x-shockwave-flash" width="400" height="200" >
  <param name="movie" value="http://www.exclusivetutorials.com/wp-content/uploads/2010/09/flash-fullscreen.swf" />
  <param name="allowFullScreen" value="true" />
  </object>

The balls were added in to show that the stage extends to the borders of the screen, even when resized.

View Demo

Related posts:

1. Top 5 AJAX File Uploaders File Uploading is a basic part of any Blogging, CMS...
2. Designing a beautiful Contact Form I hope that this will be an interesting tutorial for...
3. Ajax Validation with Jquery This is a very informative tutorial for developers who want...

This AJAX Upload by Andrew Valmus allows to upload multiple files without refreshing the page and use any element to show file selection window. The best thing is that it works in all major browsers and doesn’t require any javascript library to run. AJAX Upload doesn’t pollute the global namespace, and is tested with jQuery, Prototypejs.

The official website of this plugin is Ajax Upload by Andrew Valums

2) Fancy Upload

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

The official website of this plugin is Fancy Upload

3) AJAX Multiple Upload File form using jQuery

Its another version of fileuploader from webdeveloperplus using the jQuery library and AJAX Upload by Andrew Valums. The official website of this uploader is webdeveloperplus

4) Uploadify

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

The official website of this plugin is Uploadify

5) LightLoader

LightLoader uses a similar method which is found in the GMail file upload, using a hidden IFRAME to post the file and AJAX to check the progress. There is also a tester script in the zip file for you to upload to your server to make sure that you have all the settings correct.

The official website of this plugin is LightLoader

I believe you people will like this post. Kindly share it on your social networks and do not forget to post your comments.

Related posts:

1. Ajax Validation with Jquery This is a very informative tutorial for developers who want...
2. HTML5 New Tags HTML 5 comes with variety of new tags which definitely...
3. Typography Solutions – Flir and sIFR I really not satisfied with the lack of support for...

ImageMagick is an open source software suite for displaying, converting, and editing raster image files. It can read and write more than 100 image file formats.

So lets start with its installation. I am going to explain 10 easy step to achieve this.

Step : 1

yum install php-gd

Step : 2

yum install glib

Step : 3

yum install glib2

Step : 4

yum install libpng

Step : 5

yum install libjpeg

Step : 6

yum install libtiff

Step : 7

yum install ghostscript

Step : 8

yum install freetype

Step : 9

yum install ImageMagick

Step : 10

yum install ImageMagick-perl

I believe that by implementing these steps, any one can install the ImageMagick and GD libraries on FEDORA SERVER

Related posts:

1. Memcached Server Installation and Access with PHP An exclusive tutorial about MEMCACHED Server, its simple installation method...
2. Setting Multiple Websites in Codeigniter Installation In this tutorial, I want to demonstrate that how to...
3. Typography Solutions – Flir and sIFR I really not satisfied with the lack of support for...

Step 1: Loading jQuery and its Plugins

To apply this validation, you have to include two javascript files. These files are related to jQuery. One file is the jQuery library file, while the other one is the plugin for main jQuery library. Now there are two ways to load the files.

1) Load the files locally within your site
2) Reference the files online through google API libraries

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js" type="text/javascript"></script>

I am loading the minified version of the javascript to reduce the file size

Step 2: HTML Form

Now let’s start the HTML form.  Now you  see a form with fields i.e.  name, email and two password fields.

<form id="ajaxform" action="#" method="post">
<fieldset><label for="name">Name:</label>
<input name="name" type="text" /><label for="email">Email:</label>
<input name="email" type="text" /><label for="password">Password:</label>
<input id="password" name="password" type="password" /><label for="password_again">Re-enter Password:</label>
<input id="password_again" name="password_again" type="password" /> <input name="submit" type="submit" value="Submit" /></fieldset>
</form>

Step 3: Initialize jQuery and its Plugin

Initialize the jQuery library and its plugin

<script type="text/javascript">// <![CDATA[
         $(document).ready(function(){
         $("#ajaxform").validate();     });
// ]]></script>

This code says that when the document(DOM) is ready, just  run a function. That function is to validate the form with the ID of “ajaxform”. You have now successfully initialized the plugin. Although the plugin is now listening on your requirements, it will not act until you tell it what to look for. In the next step we will do just that!

Step 4: Validation
There are two ways to apply conditions and requirements. Let me tell you the  easy way first and then the more complex way but much more customizable. Firstly,  we want to simply make sure the “name” field and “email” field is filled in. We don’t want any blank inputs there. The easiest way to do this is simply add a class of “required” to each inputs that you would like for the plugin to check.

<label for="name">Name:</label>
<input class="required" name="name" type="text" /> <label for="email">Email:</label>
<input class="required email" name="email" type="text" />
 

The important thing is to note that I added the class “required” to both input fields and the email input field has “email” as a class as well. The reason for this is we are telling the plugin to make sure this field is required and also conforms to a valid email address format.

Step 5: Customization

You can easily notice that how easy it was to validate the name and email fields with jQuery validation, let’s take a look at the password fields. What we want here is to make both password fields required but also match a certain length of characters. Furthermore, the second password input needs to match the first one. See this

In the same section where you added the initialization of the jQuery inside the head section of the HTML, add the following lines.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
       $(document).ready(function(){
       $("#ajaxform").validate({ 	rules: { 	password: {required: true, minlength: 6}, 	password_again: {required: true, equalTo: "#password"} 	} 		});  });
// ]]></script>

Now rules have added with password being required set to true and it needs a minlength of 6 and the second condition is for password_again set to required true and it has to “equalTo” the input field with id of password. With these conditions set, we are able to achieve what we are wanting. Do not forget to check the demo of the post to see how it works. For more documentation and resource on this plugin visit jQuery Validation Plugin

I believe that this tutorial has very helpful and you will put it to good use.

Finally, checkout the demo at this link. You can also download the files from here.

Related posts:

1. Top 5 AJAX File Uploaders File Uploading is a basic part of any Blogging, CMS...
2. Designing a beautiful Contact Form I hope that this will be an interesting tutorial for...
3. 3 simple steps for automatic database backup This is a short tutorial that demonstrates that to take...

1. article

<article></article>

The <article> tag defines external content.

The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.

2. audio

<audio></audio>

The <audio> tag defines sound, such as music or other audio streams.

3. canvas

<canvas></canvas>

The <canvas> tag is used to display graphics.The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.

4. footer

<footer></footer>

The <footer> tag defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information.

5. header

<header></header>

The <header> tag defines an introduction to the document.

6. hgroup

<hgroup></hgroup>

The tag defines the heading of a section or a document. The hgroup element is used to group headers, <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings.

7. keygen

<keygen></keygen>

The <keygen> tag defines a generated key.

8. mark

<mark></mark>

The <mark> tag defines marked text. Use the <mark> tag if you want to highlight parts of your text

9. nav

<nav></nav>

The <nav> tag defines a section of navigation.

10. output

<output></output>

The <output> tag defines different types of output, such as output written by a script.

11. progress

<progress></progress>

The <progress> tag defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript.

12. rp

<rp></rp>

The <rp> tag is used in ruby annotations, to define what to show browsers that do not support the ruby element. A ruby annotation is Chinese notes or characters. Used in East Asia, to show the pronunciation of East Asian characters. Use together with the <ruby> and the <rt> tags: The ruby element consists of one or more characters (that needs an explanation/pronunciation), and a rt element that gives that information, and optionally a rp element that defines what to show browsers that do not support the “ruby” tag.

13. rt

<rt></rt>

The <rt> tag defines an explanation or pronunciation of characters (Chinese notes or characters). Used in East Asia, to show the pronunciation of East Asian characters.

Use together with the <ruby> and the <rp> tags: The ruby element consists of one or more characters (that needs an explanation/pronunciation), and a rt element that gives that information, and optionally a rp element that defines what to show browsers that do not support the “ruby” tag.

14. ruby

<ruby></ruby>

The <ruby> tag defines a ruby annotation (Chinese notes or characters). Used in East Asia, to show the pronunciation of East Asian characters. Use together with the <rt> and/or the <rp> tags: The ruby element consists of one or more characters (that needs an explanation/pronunciation), and a rt element that gives that information, and optionally a rp element that defines what to show browsers that do not support the “ruby” tag.

15. section

<section></section>

The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

Related posts:

1. Ajax Validation with Jquery This is a very informative tutorial for developers who want...
2. Benefits of Output Buffering If you are not using PHP Output Buffering, you have...
3. Designing a beautiful Contact Form I hope that this will be an interesting tutorial for...

Step 1: Setup backup folder on a server

mkdir /var/lib/mysqlbackup
cd /var/lib/mysqlbackup

Step 2: Write backup script

vi dbbackup.sh

Paste the content as below and change the username, password and dbname as required

#!/bin/sh
# Username to access the MySQL server
USERNAME="username"
# Username to access the MySQL server
PASSWORD="password"
# List of DBNAMES for Backup
DBNAME="dbname"
#date timestamp for log message
DATE=`/bin/date +%Y-%m-%d_%Hh%Mm`
#output file
OUTDIR="/var/lib/mysqlbackup/"
OUTFILE="ip_bindass".$DATE."sql.gz"
#working directory
DIR="/var/lib/mysqlbackup/"
#cd $DIR
# MySQL Backup
/usr/bin/mysqldump --database $DBNAME --opt --single-transaction -u$USERNAME -p$PASSWORD | /usr/bin/gzip -9 > $OUTDIR$OUTFILE

Finally change the permission of the  script to make it executable

chmod +x dbbackup.sh

Step3: To Schedule script in crontab file

crontab -e

Add below like to take backup everyday at 3.20 pm

20 15 * * * /var/lib/mysqlbackup/dbbackup.sh

Related posts:

1. How To Secure WordPress Blog There are various reasons that why it is important to...
2. Important Website Security Tips Website Security is a very important subject and always needs...
3. Ajax Validation with Jquery This is a very informative tutorial for developers who want...

What is Memcached?

Free & open source, high-performance, distributed memory object caching system, generic in nature, but intended for use in speeding up dynamic web applications by alleviating database load.

Memcached is an in-memory key-value store for small chunks of arbitrary data (strings, objects) from results of database calls, API calls, or page rendering.

Memcached is simple yet powerful. Its simple design promotes quick deployment, ease of development, and solves many problems facing large data caches.

In 10 simple steps you can learn that how to install and access Memcached Server with your PHP application.

Step1: Install libevent ,libmemcached and libmemcached devel (dependency)

yum install libevent
yum install libmemcached libmemcached-devel

Step 2: Install Memcached Server

yum install memcached

Step 3: Start Memcached server

memcached -d -m 512 -l 127.0.0.1 -p 11211 -u nobody

(d = daemon, m = memory, u = user, l = IP to listen to, p = port)

Step 4: Check your memcached server is running successfully

ps -eaf | grep memcached

Step 5: Connect Memcached server via telnet

telnet 127.0.0.1 11211

Step 6: Check current status of Memcached Server on telnet prompt

stats

Step 7: Exit telnet

quit

Step 8: Install PHP client to access Memcached Server

pecl install memcache

It will make “memcache.so”, you have to just put it on your /etc/php.ini file.

Step 9: Restart your apache server

service httpd restart

Step 10: Open your favorite editor to type below code and execute it, it will cache your data into Memcached server and access it back for you

<?php
$memcache = new Memcache;
$memcache->connect('127.0.0.1', 11211) or <a href="http://www.php.net/die">die</a> ("Could not connect"); //connect to memcached server

$mydata = "i want to cache this line"; //your cacheble data

$memcache->set('key', $mydata, false, 100); //add it to memcached server

$get_result = $memcache->get('key'); //retrieve your data

<a href="http://www.php.net/var_dump">var_dump</a>($get_result); //show it
?>

Related posts:

1. Image Magick and GD library installation on FEDORA server If you are dealing with the images in PHP then...
2. Setting Multiple Websites in Codeigniter Installation In this tutorial, I want to demonstrate that how to...
3. 3 simple steps for automatic database backup This is a short tutorial that demonstrates that to take...