Computer Yard: April 2011

Saturday 9 April 2011

Learn JQuery, Joomla , Asp.net 4.0 Ajax and Jquery

Introduction to JQuery

In its short history, jQuery has revolutionized front-end web development, making it faster, easier, and more rewarding to write javascript – allowing easier selection and manipulation of HTML elements, and ensuring that scripts work across the ever increasing landscape of browsers and operating systems. jQuery is now the most popular javascript library on the web, powering over 27% of the 10,000 most popular sites.

This video walks the viewer through the essential concepts and syntaxes needed start writing simple-yet-powerful javascript using jQuery. Nate Haug and Jeff Robbins show many hands-on examples demonstrating how to use jQuery's simple syntax to choose and manipulate HTML elements, traverse the document object model (DOM), and to attach event handlers which can react to user interaction with the page. They also walk through how to construct an AJAX request to pull in data from external HTML, XML, or JSON sources as well as how to create a simple jQuery plug-in.

Learn how liberating and fun jQuery development can be. Give us 3 hours and we'll get you excited to create clearer, easier-to-use, and more whiz-bangy websites.

Full chapter listing:

1. Introduction
2. What is jQuery?
3. Introduction to Firebug
4. Overview of jQuery Concepts
5. Using jQuery Selectors
6. jQuery Effects & Animations
7. jQuery Events
8. Adding jQuery Scripts
9. DOM Manipulation with jQuery
10. DOM Traversing with jQuery
11. Implementing AJAX with jQuery
12. Using jQuery Plugins
13. Conclusionhttp://www.wupload.com/file/62425196

http://www.wupload.com/file/62425197

http://www.wupload.com/file/62425198

http://www.wupload.com/file/62425199
http://www.wupload.com/file/62425200
http://www.wupload.com/file/62425201
http://www.wupload.com/file/62425202

http://www.wupload.com/file/62425203

Joomla 1.5 Beginner Course

Joomla 1.5 Beginner Course
Video: AVC (.flv) H264 840*524 30fps | Audio: AAC Stereo 432kbps 44.1KHz | 711MB
Genre: eLearning | Language: English

Every day people are building great websites with Joomla. With Open Source Training they have access to online classes and support from the best teachers in the Joomla world... Our professional teachers have created videos and tutorials for you that walk you step-by-step through everything you'll need to build wonderful Joomla websites. These are the same lessons we use to help clients like Apple Sun IBM Hewlett-Packard and NASA.

CONTENTS:

Introduction

* Session 1: Introduction to the Course
* Session 2: How to get the most out of the Course
* Session 3: What is Joomla / What is a Content Management System?
* Session 4: Resources you'll need for the course
* Session 5: DON'T skip this video!

The Basics

* Session 6: One Click Installs
* Session 7: Installing Joomla to work on your Mac
* Session 8: Installing Joomla to work on your PC

* Session 9: Navigating the Joomla Interface

The Site Menu

* Session 10: The Menu

* Session 11: User Manager
* Session 12: Global Configuration
* Session 13: Changing the "Site Offline" Logo

* Session 14: Site Activities

The "Menus" Menu

* Session 15: Menu Manager

* Session 16: Linking to a Article
* Session 17: Linking to a Blog

* Session 18: Site Activities

The Articles Menu
* Session 19: The Joomla Workflow
* Session 20: Article Management
* Bonus Session: Installing JCE
* Session 21: Global Parameters

* Session 22: Creating an Article

* Session 23: Inserting and Formatting Text
* Session 24: Inserting and Formatting Images and Multimedia
* Session 25: Advanced Parameters
* Session 26: Site Activities

* Session 27: Helpful Extensions for Article Management

Extensions
* Session 28: Overview and Definitions

* Session 29: Finding the Right Extensions

* Session 30: Site Activities

Components Menu

* Session 31: Banners

* Session 32: Contacts
* Session 33: Newsfeeds
* Session 34: Polls

* Session 35: Search

* Session 36: Weblinks

The Extensions Menu

* Session 37: Extensions Manager

* Session 38: The Module Manager
* Session 39: Built-in Modules
* Session 40: Adding a New Module

* Session 41: Site Activities

Plugins

* Session 42: Introduction / Overview

Templates

* Session 43: What is a Template?

* Session 44: Installing Templates
* Session 45: Modifying Your Template

* Session 46: Site Activities

The Tools Menu

* Session 47: Tools

Joomla Security

* Session 48: Keeping Your Site Secure

Wrap Up

* Session 49: Site Activities

* Session 50: Wrap Up

Download

http://www.filesonic.com/file/1398088694/Beginning_Joomla_Tutorials.part1.rar

http://www.filesonic.com/file/1398088564/Beginning_Joomla_Tutorials.part2.rar

-------------------------------------------------------------------------------------------------------------------------

ASP.NET 4.0 AJAX and jQuery Using Visual C Sharp 2010

AJAX has brought a rich inactive content to web pages and web applications. The newest vision of Visual Studio, Visual Studio 2010 brings many plus to creating AJAX web content. This course covers some of the basics for using AJAX, dealing with server aide and client AJAX controls. Creating content rich AJAX applications will show how to use the UpdatePanel controls, page methods and other items. The AJAX Control Toolkit section will explain the controls, extenders, and script manager.

The next part of the course explores the jQuery Library, which Microsoft has fully embraced as its client-side javascript library. You'll learn about the library and how to put it to use, including how to write effective selectors to create matched sets of elements. Then you'll learn how to bring a page alive with jQuery, using features like changing page content, animating elements on the page, and using the jQuery UI Library for even more effects. One of the original motivations for jQuery was to support AJAX, and the library includes rich support for asynchronous calls to the server. You’ll also learn how to make use of various other jQuery extensions and see how to build your own plugin.

Prerequisites: This course assumes that you are familiar and experienced with Microsoft's .NET Framework and ASP.NET development tools. You should be familiar with Web development and understand how HTTP and HTML work to produce Web pages for the user. You should have experience writing applications with ASP.NET 3.5, 4.0, or later Web forms, and be familiar with how ASP.NET processes page requests, and have strong experience with .NET Framework 3.5, 4.0, or later programming. You should have experience with Visual Studio 2008, 2010, or later for building Web application projects. Experience with building database applications using these tools will be helpful, although not strictly necessary. You should also have some experience with writing javascript.

AJAX Fundamentals

Introducing AJAX

Essential javascript
Server and Client-Side AJAX

Server-Side AJAX: UpdatePanel and Related Controls

Partial Page Rendering

The ScriptManager Control
The UpdatePanel Control
Other Server-Side AJAX Controls

Creating Rich AJAX Applications

Using Multiple UpdatePanel Controls

Using Page Methods

AJAX History and the Browser Back Button

ASP.NET AJAX Control Toolkit

Introduction to the AJAX Control Toolkit

Toolkit Controls and Extenders
ToolkitScriptManager Control

The jQuery Library

jQuery for the ASP.NET Developer

Using jQuery

Selectors, Wrapped Sets and Chains

Bring a Web Page Alive with jQuery

Work with Page Elements

Use Animations and Effects
The jQuery User Interface Library

Using jQuery's AJAX Features

AJAX Made Simple with jQuery

GETs, POSTs and Data Formats
Taking Full Control with the AJAX Method

jQuery Extensions

jQuery Extensions in Microsoft's World

Building Your Own Extensions

Download

Please comment on my post whether is helpful or not. If you want more tutorials then mail me matsmatss@gmail.com

Thursday 7 April 2011

AJAX - Amazing Technology

Ajax and php: Ajax for chat

Develop Chat Application

Logging in

The first step in chatting is to have an identity. That requires a rudimentary login page, such as the one shown in Listing 1.

Listing 1. index.html

<html>
<head><title>Chat Login</title></head>
<body>
<form action="chat.php" method="post">
Username: <input type="text" name="username">
<input type="submit" value="Login">
</form>
</body>
</html>

A basic chat system

A chat system is really just a table of strings in which each string is attributed to an individual. The most basic version of the schema is shown in Listing 2.

Listing 2. chat.sql

DROP TABLE IF EXISTS messages;
CREATE TABLE messages (
message_id INTEGER NOT NULL AUTO_INCREMENT,
username VARCHAR(255) NOT NULL,
message TEXT,
PRIMARY KEY ( message_id )
);

The script contains an auto-incrementing message ID, the user name, and the message. If you think it's important, you can also add a timestamp to each message to track when it was sent.

If you want to manage multiple conversations on different topics, you must have another table to track the topics and include a related topic_id in the messages table. I wanted to keep this example simple, so I used the simplest possible schema.

The basic user interface (UI) of the chat is shown in Listing 3.

Listing 3. chat.php

<?php
if ( array_key_exists( 'username', $_POST ) ) {
$_SESSION['user'] = $_POST['username'];
}
$user = $_SESSION['user'];
?>

<html>
<head><title><?php echo( $user ) ?> - Chatting</title>
<script src="prototype.js"></script>
</head>
<body>
<div id="chat" style="height:400px;overflow:auto;">
</div>
<script>

function addmessage()
{
new Ajax.Updater( 'chat', 'add.php',
{
     method: 'post',
     parameters: $('chatmessage').serialize(),
     onSuccess: function() {
       $('messagetext').value = '';
     }
} );
}
</script>

<form id="chatmessage">
<textarea name="message" id="messagetext">
</textarea>
</form>

<button onclick="addmessage()">Add</button>
<script>

function getMessages()
{
new Ajax.Updater( 'chat', 'messages.php', {
onSuccess: function() { window.setTimeout( getMessages, 1000 ); }
} );
}
getMessages();
</script>

</body>
</html>

At the top of the script, you get the user name from the posted arguments of the login page and store it in the session. The page then continues to load the invaluable Prototype.js JavaScript library, which will handle all the Ajax work for you.

After that, the page has a spot in which the chat messages go. This area is populated by the getMessages() JavaScript function located at the bottom of the file.

Below the messages area is a form and a textarea in which users type their message text. You also have a button labeled Add that adds the message to the chat.

Careful inspection of the getMessages() function shows that the page is indeed polling the server every 1,000 milliseconds (1 second) to check for new messages and put the output of the call into the messages area at the top of the page. I talk more about polling later in the article, but for the moment, I want to finish the basic implementation of the chat by showing the messages.php page, which returns the current set of messages. This page is shown in Listing 4.

Listing 4. messages.php

<table>

<?php

// Install the DB module using 'pear install DB'

require_once("DB.php");
$db =& DB::Connect( 'mysql://root@localhost/chat', array() );
if (PEAR::isError($db)) { die($db->getMessage()); }
$res = $db->query('SELECT * FROM messages' );

while( $res->fetchInto( $row ) )
{
?>
<tr><td><?php echo($row[1]) ?></td>
<td><?php echo($row[2]) ?></td></tr>
<?php
}
?>
</table>

At the top of the script, I connect to the database with the DB library, which is available from PEAR . If you haven't installed that library already, you can do so with the following command:

"% pear install DB"

With PEAR installed, the script can query the current messages, fetch each row, and output the user name and the comment text.

The final script is the add.php script, which is called from the Prototype.js Ajax code in the addmessage() function on the page. This script takes the message text and the user name from the session and inserts a new row into the messages table. This code is shown in Listing 5.

Listing 5. add.php

<?php

// Install the DB module using 'pear install DB'

require_once("DB.php");

$db =& DB::Connect( 'mysql://root@localhost/chat', array() );

if (PEAR::isError($db)) { die($db->getMessage()); }

$sth = $db->prepare( 'INSERT INTO messages VALUES ( null, ?, ? )' );

$db->execute( $sth, array( $_SESSION['user'], $_POST['message'] ) );
?>
<table>

<?php
$res = $db->query('SELECT * FROM messages' );
while( $res->fetchInto( $row ) )
{
?>
<tr><td><?php echo($row[1]) ?></td>
<td><?php echo($row[2]) ?></td></tr>
<?php
}
?>
</table>

The add.php script also returns the current list of messages, because the Ajax code on the original page updates chat messages from the returned HTML code. This behavior gives users immediate feedback that they added a comment to the conversation.

These are the basics of the chat system. The next section covers how to make the polling a bit more efficient.

Making a better chat

With the original chat system, the page requests all the chat messages for the conversation every second. While not too bad for a short conversation, for something longer, it will be a real performance problem. Thankfully, there's a fairly easy solution. A message_id is associated with each message, and that number increases incrementally. So, if you know that you have messages to a certain ID, then you simply ask for any messages that occur after that ID. That keeps the message traffic down in a big way. For most requests, you're likely get no new messages, which is a very small packet.

Changing this setup to the more efficient design requires a few changes to the chat.php page, as shown in Listing 6.

Listing 6. chat.php (revised)

<?php

if ( array_key_exists( 'username', $_POST ) ) {

$_SESSION['user'] = $_POST['username'];

}
$user = $_SESSION['user'];

?>
<html>

<head><title><?php echo( $user ) ?> - Chatting</title>

<script src="prototype.js"></script>

</head>

<body>
<div style="height:400px;overflow:auto;">
<table id="chat">
</table>
</div>
<script>

function addmessage()
{
new Ajax.Request( 'add.php', {
method: 'post',
parameters: $('chatmessage').serialize(),
onSuccess: function( transport ) {
$('messagetext').value = '';
}
} );
}
</script>
<form id="chatmessage">
<textarea name="message" id="messagetext">
</textarea>
</form>
<button onclick="addmessage()">Add</button>
<script>
var lastid = 0;

function getMessages()
{
new Ajax.Request( 'messages.php?id='+lastid, {
onSuccess: function( transport ) {
var messages = transport.responseXML.getElementsByTagName( 'message' );
for( var i = 0; i < messages.length; i++ )
{
var message = messages[i].firstChild.nodeValue;
var user = messages[i].getAttribute('user');
var id = parseInt( messages[i].getAttribute('id') );
        if ( id > lastid )
       {
           var elTR = $('chat').insertRow( -1 );
           var elTD1 = elTR.insertCell( -1 );
           elTD1.appendChild( document.createTextNode( user ) );
           var elTD2 = elTR.insertCell( -1 );
           elTD2.appendChild( document.createTextNode( message ) );
         lastid = id;
       }
}
window.setTimeout( getMessages, 1000 );
}
} );
}
getMessages();
</script>
</body>
</html>

Instead of a "chat" <div> tag that held all the messages, you now have a <table> tag; you add rows to that tag dynamically for each new message as it comes in. You can see the change in the getMessages() function, which has gained a little weight since its first version.

This new version of getMessages() expects the results of the messages.php page to be an XML block with the new messages. The messages.php page now also takes a parameter called id, which is the message_id of the last message the page has seen. The first time out, this ID is 0, so that the messages.php page returns everything it has. After that, it's sent the ID of the last message seen so far.

The XML response is broken up by the onSuccess handler, and each element is added to the table using standard DHTML document object model (DOM) functions such as insertRow(), insertCell(), and appendChild().

The upgraded version of the messages.php file that returns XML instead of HTML is shown in Listing 7.

Listing 7. messages.php

<?php

// Install the DB module using 'pear install DB'

require_once("DB.php");

header( 'Content-type: text/xml' );

$id = 0;
if ( array_key_exists( 'id', $_GET ) ) { $id = $_GET['id']; }

$db =& DB::Connect( 'mysql://root@localhost/chat', array() );
if (PEAR::isError($db)) { die($db->getMessage()); }
?>
<messages>

<?php
$res = $db->query( 'SELECT * FROM messages WHERE message_id > ?', $id );
while( $res->fetchInto( $row ) )
{
?>

<message id="<?php echo($row[0]) ?>" user="<?php echo($row[1]) ?>">
<?php echo($row[2]) ?>
</message>
<?php
}
?>
</messages>

Moving on from here

Hopefully, what I have given you here is a good starting point for your own implementation of a chat system within your application. Here are some ideas about where to go next:

Track users: Put a list of the people actively engaged in the conversation alongside the chat. Doing so lets people know who is at the party and when they come and go.
Allow multiple conversations: Allow multiple conversations on different topics to go on simultaneously.
Allow emoticons: Translate character groupings such as :-) into the appropriate image of a smiley face.
Use URL parsing: Use regular expressions in the client-side JavaScript code to find URLs and turn them into hyperlinks.
Handle the Enter key: Instead of having an Add button, watch for users pressing the Enter or Return key by hooking onto the onkeydown event in the textarea.
Show when a user is typing: Alert the server when a user has started to type, so that other participants can see that a reply is pending. This lessens the perception that the conversation has died off to a minimum if you have slow typists.
Limit the size of a posted message: Another way to keep the conversation going is to keep messages small. Limit the maximum number of characters in the textarea —again by trapping onkeydown —to help speed up conversations.

Conclusion

I admit that I'm really not much of a chatter. I never have my chat client up. I only use text messages once in a long while. My chat handle is idratheryouemail. Seriously. But I have found that contextual chat, such as what is shown in this article, is actually compelling. Why? Because it's focused on the subject matter that the site addresses, which keeps distracting talk about the most recent "TomKat" news to a minimum.

Give this example code a try in your Web application. See whether you can engage your readers and customers in a real-time conversation, and let me know how it goes on the developerWorks Ajax forum site. I hope you will be pleasantly surprised.

useful links

http://www.dl4all.com/
http://www.filecrop.com/

Other Technology Stuff

http://www.techpark.net/

http://www.thinkdigit.com/