Home

Κώδικας ένωσης ExtJS φόρμας με MySQL και PHP

by apanag | Tue, 05/20/2008 - 11:27

To άρθρο μας μπορείτε να το διαβάσετε εδώ, ενώ ενδεικτικό demo της σελίδας μας μπορείτε βρείτε εδώ.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Login Form</title>
                <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
                <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
                <script type="text/javascript" src="ext-all.js"></script>
                <script type="text/javascript" src="form.js"></script>
        </head>
        <body>
               
        </body>
</html>

form.js

 Ext.onReady(function(){

    Ext.QuickTips.init();

    Ext.form.Field.prototype.msgTarget = 'side';
   
    //buttons
    var submit = new Ext.Button({
      text: 'Submit',
      type: 'submit',
      handler: function(){
        if(isFormValid()){
                form.getForm().submit({
                        success: function(action){
                                Ext.MessageBox.alert('Success','A new user has been registered');
                        },
                        failure:function(form, action){
                                obj = Ext.util.JSON.decode(action.response.responseText);
                                Ext.Msg.alert('Error', obj.message );
                }
                })
        }
      }
    });
   
    var reset = new Ext.Button({
      text: 'Reset',
      handler: function(){
        form.getForm().reset()
      }
    });
   
    //fields
    var username = new Ext.form.TextField({
      id: 'username',
      fieldLabel: 'Username',
      maxLength: 20,
      allowBlank: false
    });
   
    var name = new Ext.form.TextField({
      id: 'name',
      fieldLabel: 'Name',
      maxLength: 20,
      allowBlank: false
    });
   
    var phone = new Ext.form.NumberField({
      id: 'phone',
      fieldLabel: 'Phone',
      maxLength: 10,
      allowBlank: false
    });
   
    var surname = new Ext.form.TextField({
      id: 'surname',
      fieldLabel: 'Surname',
      maxLength: 20,
      allowBlank: false
    });
 
    var email = new Ext.form.TextField({
      id: 'email',
      fieldLabel: 'E-mail',
      maxLength: 20,
      allowBlank: false,
      vtype: 'email'
    });
   
    var password = new Ext.form.TextField({
      id: 'pass',
      fieldLabel: 'Password',
      maxLength: 20,
      allowBlank: false,
      inputType: 'password'
    });
   
    // check if the form is valid
    function isFormValid(){
      return(username.isValid() && name.isValid() && surname.isValid()
      && email.isValid() && password.isValid() && phone.isValid());
    }


    var form = new Ext.FormPanel({
      labelWidth: 75,
      frame: true,
      method: 'POST',
      url: 'form.php',
      title: 'Register Form',
      bodyStyle:'padding:5px 5px 0',
      width: 350,
      defaults: {width: 230},
      defaultType: 'textfield',
      items: [username,password,name,surname,email,phone],
      buttons: [ submit,reset]        
    });

    form.render(document.body);

});

SQL

CREATE DATABASE `extsjs`;

CREATE TABLE `extjs`.`users` (
    `uid` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
    `username` VARCHAR( 20 ) NOT NULL ,
    `password` VARCHAR( 20 ) NOT NULL ,
    `name` VARCHAR( 20 ) NOT NULL ,
    `surname` VARCHAR( 20 ) NOT NULL ,
    `phone` INT NOT NULL ,
    `email` VARCHAR( 20 ) NOT NULL ,
      PRIMARY KEY ( `uid` ) ,
      UNIQUE ( `username` ,`email`)
) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci

form.php

<?php
        $server = "localhost";
        $username = "username";
        $password = "password";
        $database = "extjs";
        $link = mysql_connect($server, $username, $password);
       
        if (!$link){
                $return = '{"success":false,"message":"'.mysql_errno($link).":".mysql_error($link).'"}';
        }
        else {
                $db = mysql_select_db($database);
                if (!$db){
                        $return = '{"success":false,"message":"'.mysql_errno($link).":".mysql_error($link).'"}';
                }
                else {
                        $query = mysql_query('INSERT INTO users VALUES (NULL,"'.$_POST['username'].'","'.$_POST['pass'].'","'.$_POST['name'].'","'.$_POST['surname'].'","'.$_POST['phone'].'","'.$_POST['email'].'")');
                        if(!$query){
                                $return = '{"success":false,"message":"'.mysql_errno($link).":".mysql_error($link).'"}';
                        }
                        else {
                                $return = "{success:true}";
                        }              
                }
        }
        echo $return;
       
        mysql_close($link);
?>