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.
<?php
if($_POST[’submit’]){
$username = $_POST[‘username’];
$password = $_POST[‘password’];
// Here you would put your validation, checking existing database records.
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!
These icons link to social bookmarking sites where readers can share and discover new web pages.
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.
Plan, code the form (This tutorial)
Code the PHP backend, make it work
Code the AJAX, implement it.
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.
Hey guys, just thought i’d post a little interim post (as such). Im in the process of making a 4 part tutorial series on using jQuery’s AJAX. Its a “case study” where i/we will make a basic login form with a PHP backend and then use jQuery to make the login seemless. Eg. you put your username/password in the form and click the login button the page doesn’t reload but it will tell you whether its the correct user/pass , in which case a cookie is set, or if its bad info.
It might take a little while to finish up so i might not be posting much over the next week (sorry) but it will be worth it in the end.
These icons link to social bookmarking sites where readers can share and discover new web pages.
Someone emailed me asking if the menu could truely slide in , vertically, not how it is now with the slide on a slight angle ( using jquery’s show / hide ). Its very easy to alter the existing code to make it truely slide.
Instead of using jQuery’s show and hide functions, we just use slideDown and slideUp in replace of them. So the jQuery looks like this..
This video tutorial shows how to make a basic slide in/drop down menu using jQuery. The menu itself stylishly slides in and has transparencies so you can view data behind it.
Sorry for the low sound, i was trying something different with my microphone.
