Upload and Rename File

Overview In this tutorial create 2 files 1. upload_rename.php 2. upload_rename_ac.php Steps 1. Create file upload_rename.php. 2. Create file upload_rename_ac.php. 3. Create folder "upload" for store uploaded files. 4. CHMOD your upload folder to "777" by using your ftp software(change permission).

Create file upload_rename.php View in browser  ############### Code

Verifying email address

Overview In this tutorial create 4 files 2 databases 1. signup.php 2. signup_ac.php 3. confirmation.php 4. config.php We have to create 2 databases 1. temp_members_db 2. registered_members What to do1. When users sign up. Random a set of confirmation code. 2. Keep their informations and confirmation code in table "temp_members_db". This is temporary table, we have to move this informations to table "registered_members" after email address has been verified. 3. After sucessfully inserted data into table "temp_membes_db", send confirmation link to email that users used to sign up, if email is invalid they will not receive our email. 4. They have to click on confirmation link to activate their account. (move data from table "temp_member_db" to table "registered_members" and delete data from table "temp_members_db" in this step)

Create table "temp_members_db" and table "registered_members"

Encrypting Password using md5() function

Syntax $password="123456"; md5($password); Use md5(); to encrypts password to make it more secure

Overview Look at these two databases, it's the same person and same info, the first one we don't encrypt his password but the second one we encrypted his password

PHP Login script tutorial

Create table "members" CREATE TABLE `members` ( `id` int(4) NOT NULL auto_increment, `username` varchar(65) NOT NULL default '', `password` varchar(65) NOT NULL default '', PRIMARY KEY (`id`) ) TYPE=MyISAM AUTO_INCREMENT=2 ; -- -- Dumping data for table `members` -- INSERT INTO `members` VALUES (1, 'john', '1234');

Create file main_login.php View In Browser  ############### Code <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"> <tr> <form name="form1" method="post" action="checklogin.php"> <td> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td colspan="3"><strong>Member Login </strong></td> </tr>

Creating database, table and managing MySQL database using phpMyAdmin

Overview phpMyAdmin is a tool written in PHP intended to handle the administration of MySQL over the Web. Currently it can create and drop databases, create/drop/alter tables, delete/edit/add fields, execute any SQL statement, manage keys on fields, manage privileges,export data into various formats Dowload Here  Installation - Put phpMyAdmin folder where you keep php file phpMyAdmin

Create database using phpMyAdmin Create new database form  1. To create new database use this form, type database name then click "Create" button. In this example I create database name "test_create_DB".

Skitter – A jQuery Slideshow Plugin With Flexible Animations

Skitter is a jQuery plugin that enables us to convert unordered lists into slideshows with attractive animations.
The slideshow can display the list of slides as numbers or thumbnails and items can be browsed with the help of prev-next buttons as well.
It has many original animation types including cube (with various sub-types), tube, block and more.

There are several options offered for maximum customization like: velocity (for the animation particles), interval between each slide or label display on/off.
Another nice feature is the ability to mention the animation type for each slide as a class name which allows us to use multiple animation types inside one slideshow.

Requirements: jQuery
Compatibility: All Major Browsers

Agile Carousel: A Highly-Flexible jQuery Slideshow Plugin

Agile Carousel is a jQuery plugin that allows us to create flexible (both in function and design) slideshows.
The plugin uses JSON for the data format of the slides. So, they can easily be provided remotely and integration with any other system (like CMSs) will be easier.
You can select between "fade" or "slide" as the transition effect, duration of the transitions and intervals between each slide can all be defined.

Slides can be set to be displayed with an "infinite scrolling" interface, navigation can be accomplished by "numbered buttons", "prev-next buttons" or any custom control.
With a simple function, it is also possible to get the total number of slides and the "current" slide displayed which would be handy when customizing it.
P.S. The plugin was previously shared at WRD, however, this is a totally re-written version and the old URLs are no longer available.

Requirements: jQuery
Compatibility: All Modern Browsers

 

jQuery Event Calendar Plugin: jMonthCalendar

jMonthCalendar is a jQuery plugin for creating an event calendar which displays the calendar as a month-view.
Once the plugin is initialized & events array is mentioned, the calendar is ready. But jMonthCalendar offers extension points which makes it possible to interact with it like adding events, changing the month & more.

The calendar supports multi-day events & drag’n drops for updating event dates easily.
It can be browsed by months & years with the prev-next links. And, the plugin uses the beautiful DateJS library for date functions

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.bytecyclist.com/projects/jmonthcalendar/
Demo: http://www.bytecyclist.com/SourceCode/jMonthCalendar...
Download: http://code.google.com/p/jmonthcalendar/downloads/list

Drag’n Drop Calendar With jQuery: FullCalendar

FullCalendar is a jQuery plugin for creating a full-sized calendar with drag’n drop support that can fetch events via Ajax requests on-the-fly.
It can be easily configured to use your own feed format (an extension is provided for Google Calendar).

The plugin does not come bundled with features like "changing an event’s name or time" but has hooks for user-triggered events that makes it possible to add such features.
The calendar’s look/feel can be customized via CSS & it is well-documented.

Requirements: jQuery, jQuery UI
Compatibility: All Major Browsers
Website: http://arshaw.com/fullcalendar/
Download: http://arshaw.com/fullcalendar/download/

jQuery Table Drag’n Drop Plugin

jQuery Table Drag and Drop plugin simply adds drag’n drop functionality to tables.
Table drag’n dropping can’t be handled by standard drag’n dropping utilities as you need to move the whole row, not just the cell that receives the mouse events and re-parenting the row also requires specific code.

This drag and drop plugin:

• Allows the user to reorder rows within a table.
• Individual rows can be marked as non-draggable and/or non-droppable.
• Rows can have as many cells as necessary and the cells can contain form elements.

Standard usage is very simple:

$("#table-1").tableDnD();
After every drag’n drop event the new ordering values of the columns are returned as an array which you can send it as an Ajax query for updating the database.

Requirements: jQuery 1.2+
Compatibility: All Major Browsers
Website: http://www.isocra.com/2008/02/table-drag-and-drop-jq...

jQuery File Upload Plugin With Drag ‘n’ Drop Support

jQuery File Upload is a plugin for the popular JavaScript framework that helps handling file uploads.
The plugin is based on open standards like HTML5-JavaScript and doesn't use Flash. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution.

Multiple files can be selected, they can even be drag 'n' dropped from the desktop and the upload process can start automatically or with an event (like clicking the "upload" button).
A progress bar can display the status and uploads can be canceled anytime.
It is possible to use multiple instances of the plugin in the same page and jQuery File Upload is compatible with any server-side application platform.

Requirements: jQuery, jQuery UI
Compatibility: All Major Browsers
Website: http://aquantum-demo.appspot.com/file-upload
Download: https://github.com/blueimp/jQuery-File-Upload

Drag And Drop Everything With 30 Handy jQuery Plugins

Do you want to become drag and drop feature expert? Then look no further – this article is just for you! Mostly these plugins are written in jQuery,  and they are super easy to customize and implement in your own projects very fast. Why such plugins are so handy? You can give your visitors a lot more customization options, they can virtually personalize your website or tool to suit it better for their needs. And you must know – people love it, I love it myself!
Ready to drag and drop into this article?

1. Superfun

It creates a superior Lightbox that allows for AJAX injection, SWF content, iFrame content, and utilizes the new CSS3 transform property to mimick a Flash enviroment, while completely avoiding Flash.

55 Super Powerful jQuery Navigation and Menu Plugins

Navigation is one of the most important elements in web design. It has to be neat, usable and creative at the same time in order to not scare your visitors away. jQuery is one of the most powerful tools to enhance your navigation and make it stand out. With jQuery you can bring together both the creative and usable. This article will cover 55 fresh and superb jQuery plugins that will make your menus look awesome. Note that all of the listed plugins have been released in the last six months.

1. mb.verticalSlider

Spritley

Demo | Link
A fantastic plugin to create a truly inspiring sliding header, giving the illusion of flash, without flash itself!

jQuery Spritely

jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It's a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.

You can use it on any html web page, and any part of the page can interact with a sprite (click anywhere on this page and wait and you'll see what we mean).

Spritely has the following great advantages

• it works well on iPhone/iPod Touch/iPad - check out this page on an iPhone.
• It has been tested successfully on all the major browsers - even Internet Explorer 6
• it's a great alternative to Flash if your desired platform does not support it.
• it's light-weight so you can do fill the whole window with movement without draining bandwidth.
• animated objects can also fly above the text of a web page, or you could animate a background, without affecting other elements on the page.
• you should be able to make fully accessible web pages in pure html and javascript without any problem

Quickflip

Demo | Link
With this plugin, you can mimic the effect of cooly flipping over an element such as an image, or lets say for example, a business card.

What’s new in QuickFlip 2?

QuickFlip 2 is now even easier to implement. The new script pulls in and applies the necessary styling, so there is no need to include a QuickFlip stylesheet or to define the dimensions of the panel you’re flipping.
Additionally, QuickFlip’s new version makes triggering the flip effect much simpler due to a new flip function that can be attached to any jQuery selector. Although you can still automatically load the QuickFlip, this new function makes it much easier to attach the flip to click and hover events. Furthermore, the original quickFlip() function can now be chained through any jQuery selector.
Finally, the QuickFlip plugin has been performance-tuned and is running pretty quickly (example here) and namespacing issues with other Javascript libraries and a conflict between IE8 and jQuery 1.3.2 have been resolved.
Download QuickFlip 2

QuickFlip Examples

Basic QuickFlip example
A ton of QuickFlips with a hover effect

Sliding Image Puzzle

Since I have been getting into jQuery a lot lately, what with reading the books and playing around with code, I felt I should try a more complicated type of plug-in. As such, I have created this jQuery demo plug-in which creates sliding-image puzzles based on containers that have images. Running the demo page we get this output:



Demo | Link



Airport Text Effect

Demo | Link
You know those flickering messages you see on boards at airports and train stations? That effect is now at your fingertips with this plugin.

5 Must-Reads on JavaScript Inheritance

Do you know inheritance in JavaScript? Do you truly understand how it works? Are you aware that JavaScript uses a prototypal inheritance scheme that is often disfavored or disliked? Have you used a script on the web to adapt this scheme to classical inheritance?

In these past few days, I’ve been writing a jQuery slider plugin with various transition effects. To make the code succinct, I decided to use a base Transition object that other objects, which define a specific type of transition, inherit from. This led me to the question of JavaScript inheritance.
Inheritance in JavaScript has been a controversial subject. Should a standard be set to use classical inheritance or should the base prototypal system be favored? Both paths have their own advantages and disadvantages. The readings listed below will hopefully give you enough information to choose which method you want to use.

1. Private Members in JavaScript

This reading isn’t really about inheritance, but it’s an important primer on object-oriented programming in JavaScript which will help give you a deeper understand of what is to come.

10 Excellent Tutorials On Creating jQuery Navigation Menu

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
In this post I’ve selected 10 jQuery navigation menu tutorials for implementing your own jQuery based navigation and have some great effects. Before getting stared you may be interested in looking my post about making navigation menu using CSS and Adobe Photoshop.

Animated Drop Down menu with JQuery

A DropDrown menu is often a good choice when you have many items to display. In such cases, what about animating it?

Download

200 JQuery plugins collection

After prototype JQuery is the second follower and excellent Javascript framework.  Its purpose is to - write less code and do more things. It is lightweight js library (compressed only 21k), which is less than the other js library, and it is compatible CSS3, also compatible with various browsers (IE 6.0 +, FF 1.5 +, Safari 2.0 +, Opera 9.0 +).  jQuery is a fast, simple javaScript library, allowing users to more easily deal with HTML documents, events, achieve animation effects, and to provide easy AJAX for interactive web site.  jQuery also has a relatively large advantage is that it's documentation is full, and various applications are very detailed, along with many mature plug-ins available.  jQuery's html page that allows users to maintain separate code and html content, that is no longer inserted inside a bunch of js in the html to call the commands, you can just define id. I found an article in Kollermedia about JQuery plug-in list of articles, especially recommended as follows.



File upload
Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.

Form Validation

JavaScript Fade Effect without Libraries

Using JavaScript libraries like jQuery and Mootools does simplify your code, but this comes with the price of an added footprint. Often times, the same effects can be accomplished in raw JavaScript with little to no hassle. Indeed, this tutorial will explain how to create the classic fade effect without resorting to jQuery or Mootools.

The fade effect, as its name denotes, is an animation used to fade an element off of a page. You can find a demo of it in the jQuery documentation.

To begin, let’s create a fade function that accepts a DOM element and a time as parameters:

function fade( elem, time )

To achieve the fade effect, we can use the CSS opacity property, which determines the transparency of an element. Setting the opacity to 1 means the object is fully visible. As the value lowers, so too does the transparency. Consequently, 0 represents a completely invisible element.
Our logic will roughly abide by the following outline:

1. Find the starting opacity of elem, the given element. This is the value we have to reduce to 0 in time, the given number of milliseconds.
2. Begin an asynchronous recursion loop that runs every 100 milliseconds.
3. In the loop, decrement the opacity by the correct fraction to ensure that in time milliseconds, elem has an opacity of 0.

The correct fraction noted in step 3 will be equal to the starting opacity divided by time / 100. This is because the loop will go through time / 100 iterations in time milliseconds. In each iteration, the opacity must be decremented by the starting opacity / ( time / 100 ) to ensure that it will end up as 0 (the total decrement will equal the starting opacity) after the loop finishes its execution.
Let’s write some preliminary code based off this outline:

function fade( elem, time )
{
 var startOpacity = elem.style.opacity || 1;
 elem.style.opacity = startOpacity;

 (function go() {
  elem.style.opacity -= startOpacity / ( time / 100 );
  setTimeout( go, 100 );
 })();
}

Note that startOpacity is assigned to 1 if elem.style.opacity is not explicitly set. This explains why we have to set elem.style.opacity in the following line, as it may not be defined.
After finding the opacity, the go function is recursively called as per our specifications. In the code’s current state, however, it does not stop. To determine when it should finish executing, we have to check whether the element has faded. This can be done by monitoring its opacity in relation to the target value, or 0:

if( elem.style.opacity > 0 )
 setTimeout( go, 100 );
else
 elem.style.display = 'none';

Not only do we stop calling go when we’re done, but we also set the display to none so that other elements are repositioned; elem should not continue to take up page space after it has faded. This is the typical functionality of JavaScript libraries and applies to our code as well.
To ice our cake by making the code compatible with IE, we can use the filter property:

elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

The final code is included below:

function fade( elem, time )
{
 var startOpacity = elem.style.opacity || 1;
 elem.style.opacity = startOpacity;

 (function go() {
  elem.style.opacity -= startOpacity / ( time / 100 );

  // for IE
  elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

  if( elem.style.opacity > 0 )
   setTimeout( go, 100 );
  else
   elem.style.display = 'none';
 })();
}

And that’s it! See you next time.

20 Useful PHP + jQuery Components & Tuts for Everyday Project

http://www.lateralcode.com/directory-trees-with-php-and-jquery/Web applications have made huge leaps and bounds in improving user experience thanks to a lot of recently developed Ajax technology. When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty neat effects. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move.
The post below is made up of the best 20 PHP + jQuery Components and Tutorials that you will likely need in many of your projects, they are all of the highest quality and more or less easy to configure. Give them a try.

1. Directory Trees With PHP And jQuery

A simple way to keep track of many files is to use a directory tree. A directory tree lists out files and directories so that it’s easy to find what you’re looking for. In this tutorial, you will learn how to create a directory tree using PHP and jQuery.

Check out the Demo Here

2. Create a Photo Admin Site Using PHP and jQuery

A sceencast tutorial for creating a photo site using PHP, jQuery, and AJAX. You will learn how to retrieve images from a database, create a simple login form with authentication, and then allow for the database to be asynchronously updated.

3. Asynchronous Comments with PHP, jQuery, and JSON

In this article, learn how to create a simple but effective means of capturing and displaying visitor comments using a blend of jQuery, PHP and JSON. In the public forum that is the blogosphere, the ability to capture and display visitor comments on your blogs can give you instant feedback and opinions from the people that matter most – those that read your blog.

Check out the Demo Here

4. PHP ajax login form using Jquery

Create a new PHP ajax login functionality using Jquery. You can easliy switch the data source between database and PHP array, login authentication can be using username or email, or even both of ‘em by changing the config, automattic redirection could be done within the javascript config.

Check out the Demo Here

5. PHP + jQuery Todo List Part 1, part2

This is part 1 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX and manipulation capabilities.

Check out the Demo Here

6. Newsletter module

A PHP, jQuery and AJAX module, which should be great for any newsletter management needs. You just need to copy one file onto your site, and you’re ready to send and archive all newsletters, manage e-mail addresses and categories, and configure a template for your e-mails. Also have an ability of optional password protection. All options can be easily configured at the top of included .php file.

Check out the Demo Here

7. From PHP to XML to jQuery and Ajax

This tutorial will focus on getting data from a database using PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems complex, but is in fact, very easy.

Check out the Demo Here

8. How to Validate Forms in both sides using PHP and jQuery

We are going to learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.

Check out the Demo Here

9. Create a shoutbox using PHP and AJAX

We will learn how to create a dynamic ajax based shoutbox with jQuery from scratch. It will be very interesting to know how to use the ajax function of jQuery and how it can be used to insert and recover data from a MySQL database via PHP in a way asynchronous.

Check out the Demo Here

10. HOWTO: PHP and jQuery upload progress bar

With the controllable jQuery Progress Bar, writing a form upload progress bar seems like a piece of cake now. Hypothetically, all we need is to create the bar, poll for the progress of the file upload, drive the new progress bar value (in percentage) and set it using PHP.

Check out the Demo Here

11. Auto-Complete Field with jQuery, JSON & PHP

Using jQuery with PHP to create auto complete field, beside the auto-complete code we need the jQuery library along with its Dimensions plug-in.

12. A fancy Apple.com-style search suggestion

Learn how to recreate the effect from Apple website by creating a fancy apple.com-style search suggestion. This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request.

Check out the Demo Here

13. PHP & jQuery image upload and crop v1.2

Create a PHP and jQuery image upload and crop tool using PHP, jQuery, PHP GD Library and Image Area Select.

Check out the Demo Here

14. FlickrScrollr

FlickrScrollr is a combination of PHP and jQuery that parses a Flickr RSS feed and creates an animated thumbnail display.

Check out the Demo Here

15. Reddit-style Voting With PHP, MySQL And jQuery

If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.

Check out the Demo Here

16. SMTP Feedback Mail class with jQuery Slide Effect

This post is about feedback mail with nice slide effect using php SMTP class and jQuery. It’s very useful to add contact/feedback page to your php websites.

Check out the Demo Here

17. Ajax Add a Record with Button Status Change using jQuery

If you like Facebook and Twitter API method of clicking follow, add a friend button. Where you click the button, the button status changed to ‘You following’ and ‘Remove’ at the same time request inserted into database. This tutorial will show you how to do it.

Check out the Demo Here

18. Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax

Now lets say that you a web page that has a big Block of “something” and inside this “something” you would like to have some information change at a set time interval. Well with Jquery, some PHP and a sprinkle of Ajax, you can get this done quick fast and in a hurry.
Check out the Demo Here

19. CakePHP Ajax “Quick Save” with jQuery

When you are in an administration panel, sometimes you want a “quick save” feature that allows you to save without leaving the page. Here is how to accomplish this with CakePHP and jQuery.

20. PHP / jQuery Image Replacement

This is a tiny plugin that, in combination with a separate server-side script, dynamically replaces the text of an element with an image, generated using fonts you specify. This allows you to use beautiful text in headings without having to manually produce images in Photoshop, GIMP, or similar.

Check out examples here