jQuery AJAX Tutorial Pt2

Heres Part 2 of the jQuery AJAX login tutorial. If you haven’t already, i suggest you read part 1 located here.

We are going to start writing the PHP code to process the form. This is fairly basic stuff, using $_POST to get the values from the form, then checking them against pre-assigned values, if they match, then echo approved, if they don’t then echo denied.

So at the end of this stage, you will have an HTML form set up and this PHP file. You can enter the username Panzer and the password of query7 into the form and it will return Logged in.

Next tutorial, the fun part, the AJAX!

jQuery AJAX Login Series Pt1

Heyo. This is going to be the first of 4 tutorials on making a jQuery powered AJAX login system with a PHP backend. The series of tutorials will go like so.

1. Plan, code the form (This tutorial)
2. Code the PHP backend, make it work
3. Code the AJAX, implement it.
4. Tidy it up, make it look snazzy

Ok then. So we will have a forum with 2 inputs; username and password. The user will enter the details and we’ll use PHP to authenticate them. If its true, we can set a cookie or echo some text. We will then implement jQuery’s AJAX and make the whole thing seemless. Some nice little fades will be added at the end.

So, the form. Its a plain and simple HTML form. Nothing special about it.

Username:
Password:

Thats all for now. Next lesson we will code the PHP and “make it work“.

PHP-GTK 2

Im a big Fan of PHP and one day i wanted to make a desktop application that could pull down posts and private messages from one of my forums. I didn’t want to learn a whole new language, just code the small application so i dismissed C, and looked at Python. I saw there was PyGTK, saw i wondered if there were PHP-GTK, which indeed there is.

I bought Scott Mattock’s PHP-GTK 2 book (Only to learn later that it was based on one of the early alphas) and dove straight in. Installation wasn’t hard, and i could get started straight away. I learned the hello world example first, and here it is..

                        
Continue Reading
                    
                    

Manipulation in jQuery

So far you should have read/watched:

• Basics of jQuery and Slides
• Using Selectors to Select HTML Elements in jQuery

So you know the very basics of jQuery, and multiple ways to select the HTML element that you want to manipulate. In this tutorial i’ll show you how to manipulate that element after you have selected it; changing the contents, changing the HTML and getting values. I won’t be showing you slides/effects , that’ll be in a tutorial coming up.

I will be using the HTML example from the selectors tutorial, and ill only be calling on cells by using their id - im focusing on the manipulation rather than the selecting. Anywho, lets get into it. First the HTML code we’ll be manipulating.

One
Two
Three
Four
Five

Ok, say we want to change the text value of a column. We can do this using text() . Take note that text does not parse HTML, it keeps it as plain text.

$("#3").text("wowow");

This changes the value of the #3 td to wowow

What if we wanted to put some HTML in their, mayby make some text bold? We use the html function, very much alike the text function except that it parses the HTML. So the text “cool this is bold” is bolded.

$("#2").html("cool this is bold");

Lets say we…

Selectors in jQuery

In this tutorial i’ll go over some of the frequently used Selectors and show you how to use them. Most of jQuery’s manipulations revolve around selectors, so it’s a vital skill to know.

One
Two
Three
Four
Five

So.. we want to select the first td. We do this by first selecting all the td tags and then use :first to select the first td. Using jQuery’s great chaining ability, we change the text.

  $("td:first").text("This is the altered first box");

jQuery also has :odd and :even selectors. This will select the odd or even id’s. In this next example. We are selecting all of the odd td’s , and then select the first one of them. Again , we use jQuery’s chainability.

 $("td:odd:first").text("We changed this using odd and first");

You need to be aware that selecting the odds/evens does not use the element ids. It just counts them. It starts from 0 and starts counting, not from 1. This is why it changes the second cell using the method above.

Now, lets match the next one by specific text. We can do this using the :contains selector. We look in all td elements, then in them we look for the word Three , if we find it we replace the text.

$("td:contains('Three')").text("we matched the text, then changed it.");

We can…

Tune Into Shoutcasts With VLC

Heres a quick tutorial on how to stream internet radio, in particular shoutcast, through VLC media player. Most people stream through Windows Media Player or Winamp, but if you like Open Source applications like me, heres how you do it.

File -> Open Network Stream

Select the HTTP/HTTPS/FTP/MMS box and in the form, enter the URL of the shoutcast server, with the port. In my case its enaxi.com:8000 . Then click OK.

And tadah.. It works!

Basics, Slides in jQuery - Video Tutorial

Heres a quick video tutorial i made, you’ll learn the basics of jQuery such as selecting elements as well as usage of the slide effect. Feel free to ask any questions