科尔多瓦开发_科尔多瓦：与后端的连接

最新推荐文章于 2024-09-08 16:18:33 发布

cunfen6312

最新推荐文章于 2024-09-08 16:18:33 发布

阅读量222

点赞数

文章标签： mysql java python php 数据库

原文链接：https://www.studytonight.com/apache-cordova/connection-with-backened

版权

科尔多瓦开发

Now we will learn, How to connect our cordova based application with the backend to work dynamically with data.

现在，我们将学习如何将基于Cordova的应用程序与后端连接，以动态处理数据。

Backend Language → PHP

后端语言 →PHP

Database → MYSQL

数据库 →MYSQL

Have you ever thought, when you feed your username and password in some login form, what happens? How does it verifies your credentials? So, let's try to understand and implement credentials verfication.

您是否曾经想过，当您以某种登录形式输入用户名和密码时，会发生什么？如何验证您的凭据？因此，让我们尝试理解和实现凭据验证。

When you enter your username and password, the client (browser, in most cases or the app) sends your username, password and some header data to server (say PHP based server and MySQL based database). There Php receives your data and act accordingly. An SQL query is executed to fetch the data, which is then compared with the username and password submitted. And it send back the result through the same gateway, then client-side also responds as per the response received (like, server response is incorrect parameters, then client side will show you Username and password does not match. message).

输入用户名和密码时，客户端(大多数情况下是浏览器或应用程序)将客户端的用户名，密码和一些标头数据发送到服务器(例如，基于PHP的服务器和基于MySQL的数据库)。 Php会接收您的数据并采取相应措施。执行SQL查询以获取数据，然后将其与提交的用户名和密码进行比较。并通过同一网关将结果发送回去，然后客户端也将根据收到的响应进行响应(例如，服务器响应是错误的参数 ，然后客户端将显示“ 用户名和密码不匹配”消息)。

Now in this tutorial, we will create an app which will communicate with the backend. For this we require XAMPP(https://www.apachefriends.org/index.html) application. Follow the link and download XAMPP and install it. XAMPP is a local server, which runs Apache, Php and MySQL for developing and testing websites and apps on your local machine. It replicates a LAMP web server locally on your laptop/computer.

现在，在本教程中，我们将创建一个与后端通信的应用程序。为此，我们需要XAMPP ( https://www.apachefriends.org/index.html )应用程序。按照链接下载XAMPP并安装它。 XAMPP是本地服务器，运行Apache，Php和MySQL，用于在本地计算机上开发和测试网站和应用程序。它在笔记本电脑/计算机上本地复制LAMP Web服务器。

After installing, open XAMPP server and click on Start corresponding to Apache and MySQL.

安装后，打开XAMPP服务器，然后单击与Apache和MySQL对应的“ Start 。

NOTE: Default port for the server is 80.

注：服务器的默认端口为80。
Now write some code in Php and place it in the htdocs folder inside the XAMPP folder.

现在，在Php中编写一些代码，并将其放在XAMPP文件夹内的htdocs文件夹中。

index.php
index.php
```
<?php
    echo "hello world!;
?>
```
Open the browser and type in the address bar: http://localhost or http://127.0.0.1, it should show hello world! on the screen.

打开浏览器并在地址栏中输入： http：// localhost或http://127.0.0.1 ，它应该显示问候世界！ 屏幕上。

This means our XAMPP server is running successfully. Now we are ready to develop a dynamic mobile app. Client-side script (HTML, CSS, Javascript and jQuery, just like in previous tutorials). Keep the jquery.js file with index.html (or both in same folder)

这意味着我们的XAMPP服务器正在成功运行。现在，我们准备开发动态移动应用程序。客户端脚本(HTML，CSS，Javascript和jQuery，就像以前的教程一样)。将jquery.js文件与index.html保持在一起(或两者都放在同一文件夹中)

Here is the index.html file.

这是index.html文件。

<html>
    <head>
        <script type=”text/javascript” src=”jquery.js”></script>
        <script type=”text/javascript”>
            $(document).ready(function(){
                $(“#sub”).click(function(){
                var firstname = $(“#firstname”).val();
                var lastname = $(“#lastname”).val();
                if($.trim(firstname).length >0 & $.trim(lastname).length >0) {
                    $.ajax({
                        type:”POST”,  //Request type
                        url: “http://localhost/firstname.php”,   
                        data:{firstname:firstname, lastname:lastname},
                        cache:false,
                        success:function(data) {
                            alert(data);
                        }
                    })
                } 
                else {
                    alert(‘Input fields are empty’);
                }
            })
        })
        </script>
    </head>
    <body>
        <input type=”text” placeholder=”write your first name” id=”firstname”>
        <input type=”text” placeholder=”write your last name” id=”lastname”>
        <button id=”sub”>Submit result</button>
    </body>
</html>

and the firstname.php

和firstname.php

<?php
    $firstname = $_POST[‘firstname’];
    $lastname = $_POST[‘lastname’];
    echo $firstname.”  “.$lastname;
?>

Now place this PHP file and the HTML file in the htdocs folder. And make sure your XAMPP server is running. Run the index.html in browser and feed input and check output.

现在，将此PHP文件和HTML文件放在htdocs文件夹中。并确保您的XAMPP服务器正在运行。在浏览器中运行index.html并输入输入并检查输出。

科尔多瓦：将代码迁移到Android应用 (Cordova: Migrating the Code to Android App)

Now we will run this code in mobile, so first connect your laptop and mobile (In which you will test your app) with the same hotspot. Then once connection is setup, open cmd in your laptop/computer, type ipconfig and press enter. It will show the IP addresses, if your computer is connected with WIFI router then copy the IP of wireless LAN adapter adapter wifi, else copy the LAN IP address. Replace the localhost (url attribute inside $.ajax function in index.html) with this IP address.

现在，我们将在移动设备中运行此代码，因此首先将笔记本电脑和移动设备(将在其中测试应用程序)连接到同一热点。然后，一旦建立连接，请在笔记本电脑/计算机中打开cmd ，键入ipconfig并按Enter。它将显示IP地址，如果您的计算机连接了WIFI路由器，则复制无线LAN适配器适配器wifi的IP，否则复制LAN IP地址。用此IP地址替换localhost ( index.html中 $.ajax函数内的url属性)。

We only need the index.html file in the App, firstname.php file will remain in the htdocs folder of XAMPP directory.

我们只需要App中的index.html文件， firstname.php文件将保留在XAMPP目录的htdocs文件夹中。

Now generate the apk. Copy it to your device and check whether it is working or not.

现在生成apk 。将其复制到您的设备，然后检查其是否正常运行。

In case it is not working, make sure your server is running or not? Whether both the devices are connected to same wifi hotspot network or not? If connected to same wifi network, check the IP address. Next, we will save user's input into our MySQL database.

如果无法正常工作，请确保您的服务器正在运行？这两台设备是否都连接到相同的wifi热点网络？如果连接到相同的wifi网络，请检查IP地址。接下来，我们将用户输入保存到我们MySQL数据库中。

For this, first we will have to create MySQL database.

为此，首先我们必须创建MySQL数据库。

Open http://localhost/phpmyadmin in the browser.

在浏览器中打开http：// localhost / phpmyadmin 。
Click on SQL
点击SQL
Type the following command in the textarea and click on Go.

在textarea中键入以下命令，然后单击Go。
```
CREATE DATABASE mydb;
```
This command will create database mydb if it does not exist already.

如果该命令尚不存在，它将创建数据库mydb 。
Now open the mydb database, by clicking on it in the sidebar and once again click on SQL. Then create table using the following command.

现在，通过在侧栏中单击mydb数据库，然后再次单击SQL来打开它。然后使用以下命令创建表。
```
CREATE TABLE my_table (
    id int AUTO_INCREMENT,
    firstname varchar(200),
    lastname varchar(200)
)
```
It will create a table with name, my_table in mydb database.

它将在mydb数据库中创建一个名为my_table的表。

Client side code i.e. index.html file, will remain the same but the Php side code will change.

客户端代码(即index.html文件)将保持不变，但Php端代码将更改。

firstname.php

<?php
    /*
        localhost is the location where the server is located
        root is the global username of server
        ' ' this root has no password protection, hence empty
        my_db is db with which we want to connect
    */
    $con = mysqli_connect(‘localhost’,’root’,’’,’my_db) or die (‘unable to connect’);

    $firstname = $_POST[‘firstname’];
    $lastname = $_POST[‘lastname’];
    $sql = “INSERT INTO `my_table`(`firstname`,`lastname`) VALUES(‘$firstname’,’$lastname’);
    $result = mysqli_query($con,$sql);
    if($result) {
        echo $firstname.” “.$lastname;
    } 
    else {
        echo “unable to insert data”;
    }	
?>

Now try it or refresh phpmyadmin page and check whether the data is inserted or not.

现在尝试一下或刷新phpmyadmin页面，并检查是否插入了数据。

翻译自: https://www.studytonight.com/apache-cordova/connection-with-backened

科尔多瓦开发

cunfen6312

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
科尔多瓦开发_科尔多瓦：与后端的连接

科尔多瓦开发科尔多瓦：与后端的连接 (Cordova: Connection with the Backend)Now we will learn, How to connect our cordova based application with the backend to work dynamically with data. 现在，我们将学习如何将基于Cordova的应用程序与后端...
复制链接

扫一扫