How to use PHP and ExtJS to implement powerful web application functions

With the continuous development and popularity of Web applications, more and more companies and individuals are beginning to use PHP and ExtJS to build powerful Web applications. As a popular server-side scripting language, PHP is cross-platform and easy to learn, while ExtJS is a popular front-end framework that can help developers quickly build interactive web application interfaces. This article will introduce how to use PHP and ExtJS to implement powerful web application functions.

1. Establishing a connection between PHP and MySQL databases

When building a web application using PHP and MySQL, you first need to establish a connection between PHP and MySQL databases. Database connection can be easily achieved using the mysqli_connect() function provided by PHP. The following is a sample code to establish a database connection:

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {

die("连接失败: " . mysqli_connect_error());

}
echo "Connection successful";
mysqli_close($conn);
?>

2. Create PHP backend code handler

In order to use To implement powerful web application functionality with ExtJS, it is necessary to create a PHP backend code handler. This handler will be responsible for receiving requests from the front-end application and writing them to the MySQL database. Here is a simple PHP handler example:

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = mysqli_connect($servername, $username, $password, $dbname);

if (!$conn) {

die("连接失败: " . mysqli_connect_error());

}

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$sql = "INSERT INTO messages (name, email, message) VALUES ('$name', '$email', '$message')";

if (mysqli_query($conn, $sql)) {
    echo "记录已添加";
} else {
    echo "Error: " . $sql . "" . mysqli_error($conn);
}
mysqli_close($conn);

}
?>

3. Build using ExtJS Front-End Application

In order to achieve powerful web application functionality, interactive front-end applications must be built using ExtJS. Using ExtJS, you can easily create components such as tables, windows, controls, and toolbars with rich functionality and interactivity.

The following is an example of building a front-end application using ExtJS:

var grid = Ext.create('Ext.grid.Panel', {

renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'message'],
    proxy: {
        type: 'ajax',
        reader: 'json',
        url: 'messages.php'
    }
}),
columns: [{
    text: 'Name',
    dataIndex: 'name',
    flex: 1
}, {
    text: 'Email',
    dataIndex: 'email',
    flex: 1
}, {
    text: 'Message',
    dataIndex: 'message',
    flex: 2
}],
dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        name: 'name'
    }, {
        xtype: 'textfield',
        fieldLabel: 'Email',
        name: 'email'
    }, {
        xtype: 'textfield',
        fieldLabel: 'Message',
        name: 'message'
    }, {
        xtype: 'button',
        text: 'Add',
        handler: function() {
            var form = this.up('toolbar').down('form').getForm();
            form.submit({
                url: 'add_message.php',
                success: function() {
                    grid.getStore().load();
                    form.reset();
                }
            });
        }
    }]
}]

});

The above code creates a sortable and filterable grid expression containing three columns, in which Name and Email are both displayed as a flex=1 column, and Message is displayed as a flex=2 column. List. At the top of the page, a toolbar contains three text boxes and an Add button. The add button's handler submits the values ​​of the three text boxes to the add_message.php page, which inserts the values ​​into the MySQL database. After successful insertion, the table will refresh and clear all text boxes.

Summary

Using PHP and ExtJS, you can easily build powerful web applications and rich user interfaces. This article explains how to create database connections, back-end code handlers, and front-end applications using PHP and ExtJS. Understanding these basic concepts allows developers to create complex web applications more efficiently.

The above is the detailed content of How to use PHP and ExtJS to implement powerful web application functions. For more information, please follow other related articles on the PHP Chinese website!