Tạo Web Service bằng PHP và MYSQL cho ứng dụng di động – Part 1

Trong bài viết này mình sẽ hướng dẫn các bạn tạo Web Service bằng PHP và MYSQL đơn giản, cơ bản cho những bạn mới bắt đầu tìm hiểu về web service và PHP, cụ thể là web service trong android và hướng dẫn parse json bằng thư viện retrofit với web service đã tạo. Bạn đã từng nghe về web service chưa, web service là gì và cách hoạt động của nó như thế?

Tạo Web Service bằng PHP và MYSQL cho ứng dụng di động - Part 1
Tạo Web Service bằng PHP và MYSQL cho ứng dụng di động – Part 1

Web services là gì ?

Web service là một tập các phương thức được gọi thực hiện từ xa thông qua một địa chỉ http url. Kết quả trả về của web service thường dưới dạng json hoặc xml. Web service thường được sử dụng để tạo các ứng dụng phân tán.

Web service cho phép bạn giao tiếp qua mạng, không phải P2P. Nó cung cấp API cho phép bạn sử dụng nó để tương tác với service hoặc bạn có thể tự tạo web service bằng PHP và MYSQL như trong bài viết này.
Ví dụ bạn dùng một ứng dụng di động, ứng dụng desktop, web. Thì các ứng dụng đó gửi thông tin lên webservice rồi webservice xử lý dữ liệu bạn gửi từ app đến sever và sever xử lý xong nó sẽ trả về các dữ liệu cho bạn bằng json hay xml, để xử lý dữ liệu ở app bạn sẽ phải parse json hay parse xml.

Đặc điểm của web service

  • Chi phí thấp, dễ bảo trì
  • Có thể được được truy cập từ bất kỳ ứng dụng nào
  • Không phụ thuộc vào ngôn ngữ lập trình: PHP, JAVA, .NET,…
  • Hỗ trợ thao tác giữa các thành phần không đồng nhất

Tạo web service bằng PHP và MYSQL

Trước tiên để tạo web service bằng php và mysql thì bạn cần phải có server hỗ trợ ngôn ngữ php và mysql. Nếu bạn nào có chưa có hosting thì có thể tạo localhost với Xampp  hoặc WampServer , các bạn không nên sử dụng hosting free vì những hosting free thường có chứa quảng cáo, khi bạn code trả về Json nó thường kèm theo các quảng cáo này gây khó khăn cho chúng ta trong việc xử lý. Trong hướng dẫn này mình dùng WampServer.

B1: Tạo một database là students_manager và bảng là students bao gồm các trường : id, name, age, nclass.

Sau khi cài wampserver thành công bạn vào đường dẫn http://localhost/phpmyadmin , userroot, pass để trống, chọn tab SQL  và pase vào đoạn code sau.

#Create database
CREATE DATABASE students_manager;


#Create Table students
CREATE TABLE students_manager.students(
  `id` INT(10) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(50) NOT NULL,
  `age` INT(5) NOT NULL,
  `nclass` VARCHAR(10) NOT NULL,
  PRIMARY KEY(`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 AUTO_INCREMENT = 1;


#Insert data
INSERT INTO  students_manager.students(`id`, `name`, `age`, `nclass`) VALUES
(1, 'Nguyễn Văn A', '20', 'KT10'),
(2, 'Nguyễn Văn B', '21', 'DT5'),
(3, 'Nguyễn Văn C', '20', 'KT10'),
(4, 'Nguyễn Văn D', '21', 'DT5'),
(5, 'Nguyễn Văn E', '21', 'CK2')

B2: Tạo file php đặt tên là api.php để file này trong thư mục www của WampServer C:wamp64wwwstudent_managerapi.php

  • Để lấy tất cả danh sách students và trả về Json.
<?php
DEFINE('DB_USER', 'root');
DEFINE('DB_PASSWORD', '');
DEFINE('DB_HOST', '127.0.0.1');
DEFINE('DB_NAME', 'students_manager');
$mysqli = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) OR die('Could not connect to MySQL');
@mysql_select_db(DB_NAME) OR die('Could not select the database');
mysql_query("SET NAMES 'utf8'");

$query = "SELECT * FROM students";
$resouter = mysql_query($query);

$temparray = array();
$total_records = mysql_num_rows($resouter);

if ($total_records >= 1) {
	while ($row = mysql_fetch_assoc($resouter)) {
        $temparray[] = $row;
    } 
}   
echo json_encode($temparray);

?>

Bạn vào đường dẫn sau để xem kết quả: http://localhost/student_manager/api.php . Hoặc các bạn có thể cài ứng dụng Postman này trên chrome để có thể tùy biến xem kết quả dễ hơn, link trên trình duyệt chỉ có thể sử dụng được phương thức GET nhưng trên app này có thể sử dụng được nhiều phương thức khác nữa: GET, POST, PUT, PATCH, DELETE… rất hữu ích.

Xin lỗi các bạn vì có thể bạn thấy trong hình có trường class, nhưng trong sql thì không có, lý do là mình vừa sửa lại database 1 chút thành nclass :D.

Xem kết quả trả về Json
Xem kết quả trả về Json
Xem kết quả ở định dạng Json trong Postman
Xem kết quả ở định dạng Json trong Postman
  • Lấy student theo ID và trả về Json

Bạn chỉnh sửa thêm trong file api.php cho giống như dưới

<?php
DEFINE('DB_USER', 'root');
DEFINE('DB_PASSWORD', '');
DEFINE('DB_HOST', '127.0.0.1');
DEFINE('DB_NAME', 'students_manager');
$mysqli = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) OR die('Could not connect to MySQL');
@mysql_select_db(DB_NAME) OR die('Could not select the database');
mysql_query("SET NAMES 'utf8'");

if (isset($_GET["id"])) {
    if ($_GET["id"] == "" ) {
        echo ("Vui lòng nhập id");
		goto end;
    } else {
		$query = "SELECT * FROM students WHERE id='" . $_GET["id"] . "'";
		$resouter = mysql_query($query);
	}
} else {
    $query = "SELECT * FROM students";
    $resouter = mysql_query($query);
}

$temparray = array();
$total_records = mysql_num_rows($resouter);

if ($total_records >= 1) {
	while ($row = mysql_fetch_assoc($resouter)) {
        $temparray[] = $row;
    } 
}   
echo json_encode($temparray);
end:
?>

Để xem kết quả bạn chỉ cần thêm ?id= vào sau link lúc nãy http://localhost/student_manager/api.php?id=1 . Nếu bạn để id trống http://localhost/student_manager/api.php?id= nó sẽ trả về Vui lòng nhập id.

Sau khi đã có Json bạn có thể parse json bằng retrofit trong android mình đã nói ở bài trước.

Json parsing with Retrofit

Json parsing with Retrofit
Json parsing with Retrofit

B1Mở Android studio và tạo một project mới đặt tên WebService

B2Thêm thư viện retrofit vào dependencies (Module: app)

dependencies {
... 
   // Retrofit
    compile 'com.squareup.retrofit2:retrofit:2.2.0'

    // JSON Parsing
    compile 'com.google.code.gson:gson:2.8.0'
    compile 'com.squareup.retrofit2:converter-gson:2.2.0'
...
}

B3: Thêm quyền truy cập INTERNET vào AndroidManifest.xml

    <uses-permission android:name="android.permission.INTERNET" />

B4: Tạo layout cho activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.dev4u.ntc.webservice.MainActivity">

    <Button
        android:id="@+id/btnGetStudent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Get student by ID" />

    <Button
        android:id="@+id/btnGetStudents"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Get all students" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <TextView
            android:id="@+id/tvResult"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="Hello World!" />
    </ScrollView>

</LinearLayout>


B5: Tạo Object class đặt tên Student và để trong package models

Các thuộc tính của class Student giống y chang như các trường của database, cái hạn chế của parse json bằng Retrofit nó nằm ở đấy, tổ chức cấu trúc của Json như thế nào thì trong đối tượng trong  Android phải y như thế đấy. Mình mới nghiên cứu cái thư viện này thấy như thế, không biết là có pro nào làm việc nhiều với thư viện này có cách xử lý khác không rất mong được chỉ giáo, xin cảm ơn rất nhiều.

Cũng vì lý do này nên mình mới sửa class –> nclass, do lúc đầu mình tạo database là class nên đối tượng trong android cũng phải đặt theo class. Mà đặt tên thuộc tính của đối tượng là class trong android là không được phép, sẽ thông báo lỗi ngay, mà chỉ sửa class –> nclass trong android thì sẽ không parse được trường class trên webservice.  Nên chỉ sửa 1 chút trên database với trong android là ok.

package com.dev4u.ntc.webservice.models;

/**
 * IDE: Android Studio
 * Created by Nguyen Trong Cong  - NTCDE.COM
 * Name packge: com.dev4u.ntc.webservice.models
 * Name project: WebService
 * Date: 3/24/2017
 * Time: 17:47
 */

public class Student {
    private int id;
    private String name;
    private int age;
    private String nclass;

    public Student(int id, String name, int age, String nclass) {
        this.id = id;
        this.name = name;
        this.age = age;
        this.nclass = nclass;
    }

    @Override
    public String toString() {
        return "Student{" +
                "id=" + id +
                ", name='" + name + ''' +
                ", age=" + age +
                ", nclass='" +  + ''' +
                '}';
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getNclass() {
        return nclass;
    }

    public void setNclass(String nclass) {
        this.nclass = nclass;
    }
}

B6: Tạo class RetrofitClient

Để sử dụng các yêu cầu mạng đến một RESTful API bằng Retrofit, chúng ta cần tạo ra một đối tượng bằng cách sử dụng lớp Retrofit Builder và cấu hình nó với một URL cơ sở.

package com.dev4u.ntc.webservice.webservice;

import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

/**
 * IDE: Android Studio
 * Created by Nguyen Trong Cong  - NTCDE.COM
 * Name packge: com.dev4u.ntc.webservice
 * Name project: WebService
 * Date: 3/24/2017
 * Time: 17:52
 */

public class RetrofitClient {
    private static Retrofit retrofit = null;

    public static Retrofit getClient(String baseUrl) {
        if (retrofit == null) {
            retrofit = new Retrofit.Builder()
                    .baseUrl(baseUrl)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build();
        }
        return retrofit;
    }
}

B7: Tạo API Interface

Tạo API Interface đặt tên là APIService. Interface này dùng để chứa các phương thức mà chúng ta sẽ sử dụng để gọi các yêu cầu truy vấn HTTP chẳng hạn như GET, POST, PUT, và DELETE.

Ở APIService Interface này, chỗ getStudent(@Query(“id”) String id) sẽ dùng phương thức @Query của thư viện Retrofit để truy vấn dữ liệu ở ?id=.. theo như link trên browser là http://localhost/student_manager/api.php?id=.., ví dụ bạn muốn lấy student theo id và lớp chẳng hạn, bạn sẽ viết thành getStudent(@Query(“id”) String id, @Query(“nclass”) String nclass) , link trên browser sẽ là http://localhost/student_manager/api.php?id=…?nclass=…

Ở đây còn một vấn đề nữa, Call<List<Student>> getStudent(@Query(“id”) String id); chỉ lấy một Student theo id mà tại sao lại cần dùng List<Student>. Lý do là lúc mình code service trả về Json là một Json Array mà 1 array thì sẽ có nhiều object nên Retrofit nó sẽ hiểu và trong android bắt buộc phải để Call<List<Student>> mặc dù trong Json Array đó chỉ có 1 Object. Nếu bạn muốn chỉ gọi Call<Student> thì lúc Service trả về Json phải là 1 Json Object.

package com.dev4u.ntc.webservice.webservice;

import com.dev4u.ntc.webservice.models.Student;

import java.util.List;

import retrofit2.Call;
import retrofit2.http.GET;
import retrofit2.http.Query;

/**
 * IDE: Android Studio
 * Created by Nguyen Trong Cong  - NTCDE.COM
 * Name packge: com.dev4u.ntc.webservice.models
 * Name project: WebService
 * Date: 3/24/2017
 * Time: 17:52
 */

public interface APIService {
    // GET students from server
    // Server return json array
    @GET("/student_manager/api.php")
    Call<List<Student>> getStudents();

    // GET student by id student from server
    // Server return json object
    @GET("/student_manager/api.php")
    Call<List<Student>> getStudent(@Query("id") String id);
}

B8: Tạo class ApiUtils

Class ApiUtils  dùng để khởi tạo Retrofit trong MainActivity và gọi các phương thức trong Interface APIService.

Ở đây mình chạy trên Emulator nên url mình để là http://10.0.2.2 còn nếu bạn chạy trên Genymotion sẽ đổi thành http://10.0.2.3

package com.dev4u.ntc.webservice.webservice;

/**
 * IDE: Android Studio
 * Created by Nguyen Trong Cong  - NTCDE.COM
 * Name packge: com.dev4u.ntc.webservice
 * Name project: WebService
 * Date: 3/24/2017
 * Time: 17:54
 */

public class ApiUtils {
    public static final String BASE_URL = "http://10.0.2.2";

    private ApiUtils() {
    }

    public static APIService getAPIService() {

        return RetrofitClient.getClient(BASE_URL).create(APIService.class);
    }
}

B8: Khởi tạo layout và Retrofit trong MainActivity

    private Button btnGetStudent;
    private Button btnGetStudents;
    private TextView tvResult;

    private APIService mAPIService;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        btnGetStudent = (Button) findViewById(R.id.btnGetStudent);
        btnGetStudents = (Button) findViewById(R.id.btnGetStudents);
        tvResult = (TextView) findViewById(R.id.tvResult);
        mAPIService = ApiUtils.getAPIService();

        btnGetStudent.setOnClickListener(this);
        btnGetStudents.setOnClickListener(this);
    }

B9: Set sự kiện OnClick cho 2 Button

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btnGetStudent:
                getStudentById();
                break;
            case R.id.btnGetStudents:
                getAllStudents();
                break;
        }
    }

    private void getAllStudents() {
        mAPIService.getStudents().enqueue(new Callback<List<Student>>() {
            @Override
            public void onResponse(Call<List<Student>> call, Response<List<Student>> response) {
                try {
                    String result = "";
                    for (int i = 0; i < response.body().size(); i++) {
                        result += "ID: " + response.body().get(i).getId()
                                + "nName: " + response.body().get(i).getName()
                                + "nAge: " + response.body().get(i).getAge()
                                + "nClass: " + response.body().get(i).getNclass() + "nn";
                    }
                    tvResult.setText(result);
                } catch (Exception e) {
                    Log.d("onResponse", "Error");
                    e.printStackTrace();
                }
            }

            @Override
            public void onFailure(Call<List<Student>> call, Throwable t) {
                Log.d("onFailure", t.toString());
            }
        });
    }

    private void getStudentById() {
        mAPIService.getStudent("1").enqueue(new Callback<List<Student>>() {
            @Override
            public void onResponse(Call<List<Student>> call, Response<List<Student>> response) {
                try {
                    tvResult.setText("ID: " + response.body().get(0).getId()
                            + "nName: " + response.body().get(0).getName()
                            + "nAge: " + response.body().get(0).getAge()
                            + "nClass: " + response.body().get(0).getNclass());
                } catch (Exception e) {
                    Log.d("onResponse", "Error");
                    e.printStackTrace();
                }
            }

            @Override
            public void onFailure(Call<List<Student>> call, Throwable t) {
                Log.d("onFailure", t.toString());
            }
        });
    }

Code file MainActivity

package com.dev4u.ntc.webservice;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.dev4u.ntc.webservice.models.Student;
import com.dev4u.ntc.webservice.webservice.APIService;
import com.dev4u.ntc.webservice.webservice.ApiUtils;

import java.util.List;

import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btnGetStudent;
    private Button btnGetStudents;
    private TextView tvResult;

    private APIService mAPIService;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        btnGetStudent = (Button) findViewById(R.id.btnGetStudent);
        btnGetStudents = (Button) findViewById(R.id.btnGetStudents);
        tvResult = (TextView) findViewById(R.id.tvResult);
        mAPIService = ApiUtils.getAPIService();

        btnGetStudent.setOnClickListener(this);
        btnGetStudents.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btnGetStudent:
                getStudentById();
                break;
            case R.id.btnGetStudents:
                getAllStudents();
                break;
        }
    }

    private void getAllStudents() {
        mAPIService.getStudents().enqueue(new Callback<List<Student>>() {
            @Override
            public void onResponse(Call<List<Student>> call, Response<List<Student>> response) {
                try {
                    String result = "";
                    for (int i = 0; i < response.body().size(); i++) {
                        result += "ID: " + response.body().get(i).getId()
                                + "nName: " + response.body().get(i).getName()
                                + "nAge: " + response.body().get(i).getAge()
                                + "nClass: " + response.body().get(i).getNclass() + "nn";
                    }
                    tvResult.setText(result);
                } catch (Exception e) {
                    Log.d("onResponse", "Error");
                    e.printStackTrace();
                }
            }

            @Override
            public void onFailure(Call<List<Student>> call, Throwable t) {
                Log.d("onFailure", t.toString());
            }
        });
    }

    private void getStudentById() {
        mAPIService.getStudent("1").enqueue(new Callback<List<Student>>() {
            @Override
            public void onResponse(Call<List<Student>> call, Response<List<Student>> response) {
                try {
                    tvResult.setText("ID: " + response.body().get(0).getId()
                            + "nName: " + response.body().get(0).getName()
                            + "nAge: " + response.body().get(0).getAge()
                            + "nClass: " + response.body().get(0).getNclass());
                } catch (Exception e) {
                    Log.d("onResponse", "Error");
                    e.printStackTrace();
                }
            }

            @Override
            public void onFailure(Call<List<Student>> call, Throwable t) {
                Log.d("onFailure", t.toString());
            }
        });
    }
}

Xem hướng dẫn Tạo Web Service bằng PHP và MYSQL cho ứng dụng di động – Part 2

Project on Github: https://github.com/trongcong/WebServiceAndroid

Gom Marker trong Android với Google Maps Android API – Google Maps Android Marker Clustering Utility Sử dụng SwipeRefreshLayout trong ứng dụng Android Hướng dẫn tạo Material Dialog Bottom Sheet Android Tạo context menu trong Android – ActionBar ActionMode.CallBack Example Retrofit và Volley thư viện nào tốt hơn Hướng dẫn sử dụng thư viện Volley trong Android Tạo Web Service bằng PHP và MYSQL cho ứng dụng di động – Part 2 Hàm chuyển đổi Timestamp thành Datetime trong Android và JavaScript Design Patterns là gì? Tạo Project Android theo mẫu Design Patterns(Part 2) Design Patterns là gì? Tạo Project Android theo mẫu Design Patterns(Part 1)

7 thoughts on “Tạo Web Service bằng PHP và MYSQL cho ứng dụng di động – Part 1

  1. ủa ad cho mình hỏi cái BASE_URL đó nếu mình chạy máy thật mà vậy host ip nó là gì vs sever mình làm vẫn là phpadmin làm mãi vẫn ko chạy

    1. Nếu bạn chạy localhost thì thử change chỗ BASE_URL thành ip của máy tính xem sao, đt và máy tính bắt cùng wifi (khúc này lâu quá k đụng android nên k nhớ nữa).
      Còn nếu bạn dùng api host thật thì bỏ link của api vào thôi (vd: link api là example.com/student_manager/api.php – thì base_url ở đây là example.com)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.