I have asked the developers of the above stated site and they have referred me to ExtJS, now my question is, how can I submit from a form on a javascript page and search a mysql database?
login.<acronym title="JavaScript">js</acronym>
PHP Code:
Ext.onReady(function(){
Ext.QuickTips.init();
// Create a variable to hold our EXT Form Panel.
// Assign various config options as seen.
var login = new Ext.FormPanel({
labelWidth:80,
url:'login.php',
frame:true,
title:'Please Login',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Username',
name:'loginUsername',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}],
// All the magic happens after the user clicks the button
buttons:[{
text:'Login',
formBind: true,
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
// Functions that fire (success or failure) when the server responds.
// The one that executes is determined by the
// response that comes from login.asp as seen below. The server would
// actually respond with valid JSON,
// something like: response.write "{ success: true}" or
// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
// depending on the logic contained within your server script.
// If a success occurs, the user is notified with an alert messagebox,
// and when they click "OK", they are redirected to whatever page
// you define as redirect.
success:function(){
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
if (btn == 'ok'){
var redirect = './';
window.location = redirect;
}
});
},
// Failure function, see comment above re: success and failure.
// You can see here, if login fails, it throws a messagebox
// at the user telling him / her as much.
// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
layout:'fit',
width:300,
height:150,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});
login.php
PHP Code:
<?PHP
defined('__SNMS') or die(); //If not set kill session.
include("../common.php");
$loginUsername = $_POST["loginUsername"];
$loginPassword = $_POST["loginPassword"];
$fi=$loginUsername[0]; // Selecting the first letter of the username for $fi.
$fi=ucwords($fi); // CAPSING the $fi.
$ln=substr($loginUsername, 1); // Selecting the last name out of the username.
$ln=ucwords(strtolower($ln)); // CAPSING the first letter of the last name.
//echo "{success: false, errors: { reason: 'Login failed. Try again. Ref: Pass.' }}";
I like a lot of the js frameworks out there, but for the 'quick and dirty' (and clean) UI widget dance, I'd recommend: script.aculo.us. Dojo's also good, Some of the stuff built on top of jQuery's great, but as stated, for pure simplicity script.aculo.us is probably the best. It has a lot of nice features that Thomas Fuchs put in.
Caveat... If you're already using jQuery you'll have to be very careful as script.aculo.us extends 'prototype' and there can be namespace collisions.
Fortunately, jQuery has a "no conflict" mode. (noConflict())
JQuery
Linear Mode
