Source Code : Creating the Android Application to Interact with our Remote Database!

Creating the Android Application to Interact with our Remote Database!

In this Android Remote Databases mini series we’ll create our Android application to parse the JSON data that our PHP scripts output. Our Android application will be able post data to our PHP scripts to register a new user, sign in, add a comment, or display all of the current comments
Setting up our Android Project

The time has finally come! We have everything setup for us to be able to interact with our MySQL remote database from within an Android application. So, let’s create it! In this tutorial we will develop the login and register features of our app.

**You should be familiar with the basics of setting up an Android projects and the structure of an Android project. If at any time you are confused, you can check out our Android Basics Course.
Step 1: Creating a New Android Project

Even though Android Studios just came out, I’m going to use Eclipse to setup my new Android Project. I gave it the following credentials:

  Application Name: MySQLTest
  Project Name: MySQLTest
  Package Name: com.example.mysqltest

Step 2: Setting Up Classes and Layouts

Create the following Java classes and xml layouts:
Java files

  Login.java
  Register.java
  AddComment.java
  ReadComments.java
  JSONParser.java

Android XML Layouts

  login.xml
  register.xml
  add_comment.xml
  read_comments.xml
  single_comment.xml

Step 3: Set up the Permissions and the Manifest

In order for use to interact with our PHP scripts and our remote MySQL database, we will need to make sure our Android application has the internet permission. Since we are modifying our manifest, we might as well add all of the activities we are going to have in our application as well.

AndroidManifest.xml


3package="com.example.mysqltest"

4android:versionCode="1"

5android:versionName="1.0" >


8android:minSdkVersion="8"

9android:targetSdkVersion="17" />


13android:allowBackup="true"

14android:icon="@drawable/ic_launcher"

15android:label="@string/app_name"

16android:theme="@style/AppTheme" >

17

18android:name="com.example.mysqltest.Login"

19android:label="@string/app_name" >



26android:name="com.example.mysqltest.Register"

27android:label="@string/app_name"  >



30android:name="com.example.mysqltest.AddComment"

31android:label="@string/app_name"  >


34android:name="com.example.mysqltest.ReadComments"

35android:label="@string/app_name"  >



Step 4: Creating Simple Login And Register Layouts

I’m not the best when it comes to designing xml layouts. Especially, when I’m creating tutorials, so please bare with me here, these are going to be some ugly layouts for now.

Here is the image I’m using. Right-click on this bad boy, choose “Save as..�, and save the image within your Android project’s drawable folder as “arrowstars.png�. (I have no idea why I have our logo labeled as arrowstars, but meh, it works!)

login.xml

view source print?

1

2xmlns:tools="http://schemas.android.com/tools"

3android:layout_width="match_parent"

4android:layout_height="match_parent"

5>

6

7

8android:id="@+id/register"

9android:layout_width="wrap_content"

10android:layout_height="wrap_content"

11android:layout_alignLeft="@+id/login"

12android:layout_alignParentBottom="true"

13android:layout_alignRight="@+id/login"

14android:layout_marginBottom="25dp"

15android:text="Register" />

16

17

18android:id="@+id/login"

19android:layout_width="wrap_content"

20android:layout_height="wrap_content"

21android:layout_above="@+id/register"

22android:layout_alignLeft="@+id/password"

23android:layout_alignRight="@+id/password"

24android:text="Login" />

25

26

27android:id="@+id/password"

28android:layout_width="wrap_content"

29android:layout_height="wrap_content"

30android:layout_above="@+id/login"

31android:layout_centerHorizontal="true"

32android:ems="10"

33android:inputType="textPassword" >

34

35

36

37

38

39android:id="@+id/textView2"

40android:layout_width="wrap_content"

41android:layout_height="wrap_content"

42android:layout_alignParentTop="true"

43android:layout_centerHorizontal="true"

44android:layout_marginTop="17dp"

45android:gravity="center"

46android:text="Android Remote Server Tutorial"

47android:textAppearance="?android:attr/textAppearanceLarge"

48android:textStyle="bold" />

49

50

51android:id="@+id/imageView1"

52android:layout_width="wrap_content"

53android:layout_height="wrap_content"

54android:layout_below="@+id/textView2"

55android:layout_centerHorizontal="true"

56android:src="@drawable/arrowstars" />

57

58

59android:id="@+id/TextView01"

60android:layout_width="wrap_content"

61android:layout_height="wrap_content"

62android:layout_above="@+id/password"

63android:layout_alignLeft="@+id/password"

64android:layout_marginLeft="22dp"

65android:text="Password" />

66

67

68android:id="@+id/username"

69android:layout_width="wrap_content"

70android:layout_height="wrap_content"

71android:layout_above="@+id/TextView01"

72android:layout_centerHorizontal="true"

73android:ems="10" />

74

75

76android:id="@+id/textView1"

77android:layout_width="wrap_content"

78android:layout_height="wrap_content"

79android:layout_alignRight="@+id/TextView01"

80android:layout_centerVertical="true"

81android:text="Username" />

82

83

register.xml

view source print?

1

2xmlns:tools="http://schemas.android.com/tools"

3android:layout_width="match_parent"

4android:layout_height="match_parent"

5>

6

7

8android:id="@+id/imageView1"

9android:layout_width="wrap_content"

10android:layout_height="wrap_content"

11android:layout_below="@+id/textView2"

12android:layout_centerHorizontal="true"

13android:src="@drawable/arrowstars" />

14

15

16android:id="@+id/textView1"

17android:layout_width="wrap_content"

18android:layout_height="wrap_content"

19android:layout_alignLeft="@+id/password"

20android:layout_centerVertical="true"

21android:text="Username" />

22

23

24android:id="@+id/username"

25android:layout_width="wrap_content"

26android:layout_height="wrap_content"

27android:layout_alignLeft="@+id/textView1"

28android:layout_below="@+id/textView1"

29android:ems="10" />

30

31

32android:id="@+id/TextView01"

33android:layout_width="wrap_content"

34android:layout_height="wrap_content"

35android:layout_alignLeft="@+id/username"

36android:layout_below="@+id/username"

37android:text="Password" />

38

39

40android:id="@+id/textView2"

41android:layout_width="wrap_content"

42android:layout_height="wrap_content"

43android:layout_alignParentLeft="true"

44android:layout_alignParentTop="true"

45android:layout_marginTop="16dp"

46android:gravity="center"

47android:text="Android Remote Server Tutorial"

48android:textAppearance="?android:attr/textAppearanceLarge"

49android:textStyle="bold" />

50

51

52android:id="@+id/password"

53android:layout_width="wrap_content"

54android:layout_height="wrap_content"

55android:layout_below="@+id/TextView01"

56android:layout_centerHorizontal="true"

57android:ems="10"

58android:inputType="textPassword" />

59

60

61android:id="@+id/register"

62android:layout_width="wrap_content"

63android:layout_height="wrap_content"

64android:layout_alignRight="@+id/password"

65android:layout_below="@+id/password"

66android:text="Register" />

67

68

I know I’m not using the standard string references for my text values, but don’t worry about that, we can fix everything later.

Step 5: Creating Our Login And Register Activities.

Now, the fun begins, we need to test our login system. First, let create a simple success page for our ReadComments.java and read_comments.xml

read_comments.xml

view source print?

1

2

3android:layout_width="match_parent"

4android:layout_height="match_parent"

5android:background="#fff" >

6

7

8android:id="@+id/textView1"

9android:layout_width="wrap_content"

10android:layout_height="wrap_content"

11android:text="Success!"

12android:textAppearance="?android:attr/textAppearanceLarge" />

13

14

ReadComments.java

view source print?

1package com.example.mysqltest;

2

3import android.app.Activity;

4import android.os.Bundle;

5

6public class ReadComments extends Activity{

7

8@Override

9protected void onCreate(Bundle savedInstanceState) {

10// TODO Auto-generated method stub

11super.onCreate(savedInstanceState);

12setContentView(R.layout.read_comments);

13}

14}

That was simple enough! Now, we need to create a class that will help us parse some JSON information. There are a lot of JSON parsing classes for Android on the internet you can use, or you could create your own. To save time, I’m going to use one I found on the internet, and modify it to our needs.

view source print?

1package com.example.mysqltest;

2

3import java.io.BufferedReader;

4import java.io.IOException;

5import java.io.InputStream;

6import java.io.InputStreamReader;

7import java.io.UnsupportedEncodingException;

8

9import org.apache.http.HttpEntity;

10import org.apache.http.HttpResponse;

11import org.apache.http.client.ClientProtocolException;

12import org.apache.http.client.methods.HttpPost;

13import org.apache.http.impl.client.DefaultHttpClient;

14import org.json.JSONException;

15import org.json.JSONObject;

16

17import android.util.Log;

18

19public class JSONParser {

20

21static InputStream is = null;

22static JSONObject jObj = null;

23static String json = "";

24

25// constructor

26public JSONParser() {

27

28}

29

30public JSONObject getJSONFromUrl(String url) {

31

32// Making HTTP request

33try {

34// defaultHttpClient

35DefaultHttpClient httpClient = new DefaultHttpClient();

36HttpPost httpPost = new HttpPost(url);

37

38HttpResponse httpResponse = httpClient.execute(httpPost);

39HttpEntity httpEntity = httpResponse.getEntity();

40is = httpEntity.getContent();

41

42} catch (UnsupportedEncodingException e) {

43e.printStackTrace();

44} catch (ClientProtocolException e) {

45e.printStackTrace();

46} catch (IOException e) {

47e.printStackTrace();

48}

49

50try {

51BufferedReader reader = new BufferedReader(new InputStreamReader(

52is, "iso-8859-1"), 8);

53StringBuilder sb = new StringBuilder();

54String line = null;

55while ((line = reader.readLine()) != null) {

56sb.append(line + "\n");

57}

58is.close();

59json = sb.toString();

60} catch (Exception e) {

61Log.e("Buffer Error", "Error converting result " + e.toString());

62}

63

64// try parse the string to a JSON object

65try {

66jObj = new JSONObject(json);

67} catch (JSONException e) {

68Log.e("JSON Parser", "Error parsing data " + e.toString());

69}

70

71// return JSON String

72return jObj;

73

74}

75}

This JSONParser.java class may look like a bunch of baloney to you right now, but this is the class that allows us to interpret the JSON data our php web service spits out. With this class we will be able to read whether or not a login was successful (with either a 0 or 1). We will also be able to list out all of our posts in an orderly fashion using this JSON parser. We will go over the details later. As for now lets setup our Login Activity:

Login.java v0.1 – Basics

view source print?

1package com.example.mysqltest;

2

3import android.app.Activity;

4import android.app.ProgressDialog;

5import android.content.Intent;

6import android.os.AsyncTask;

7import android.os.Bundle;

8import android.view.View;

9import android.view.View.OnClickListener;

10import android.widget.Button;

11import android.widget.EditText;

12

13public class Login extends Activity implements OnClickListener{

14

15private EditText user, pass;

16private Button mSubmit, mRegister;

17

18// Progress Dialog

19private ProgressDialog pDialog;

20

21// JSON parser class

22JSONParser jsonParser = new JSONParser();

23

24//php login script location:

25

26//localhost :

27//testing on your device

28//put your local ip instead,  on windows, run CMD > ipconfig

29//or in mac's terminal type ifconfig and look for the ip under en0 or en1

30// private static final String LOGIN_URL = "http://xxx.xxx.x.x:1234/webservice/login.php";

31

32//testing on Emulator:

33private static final String LOGIN_URL = "http://10.0.2.2:1234/webservice/login.php";

34

35//testing from a real server:

36//private static final String LOGIN_URL = "http://www.yourdomain.com/webservice/login.php";

37

38//JSON element ids from repsonse of php script:

39private static final String TAG_SUCCESS = "success";

40private static final String TAG_MESSAGE = "message";

41

42@Override

43protected void onCreate(Bundle savedInstanceState) {

44// TODO Auto-generated method stub

45super.onCreate(savedInstanceState);

46setContentView(R.layout.login);

47

48//setup input fields

49user = (EditText)findViewById(R.id.username);

50pass = (EditText)findViewById(R.id.password);

51

52//setup buttons

53mSubmit = (Button)findViewById(R.id.login);

54mRegister = (Button)findViewById(R.id.register);

55

56//register listeners

57mSubmit.setOnClickListener(this);

58mRegister.setOnClickListener(this);

59

60}

61

62@Override

63public void onClick(View v) {

64// determine which button was pressed:

65switch (v.getId()) {

66case R.id.login:

67new AttemptLogin().execute();

68break;

69case R.id.register:

70Intent i = new Intent(this, Register.class);

71startActivity(i);

72break;

73

74default:

75break;

76}

77}

78

79//AsyncTask is a seperate thread than the thread that runs the GUI

80//Any type of networking should be done with asynctask.

81class AttemptLogin extends AsyncTask {

82

83//three methods get called, first preExecture, then do in background, and once do

84//in back ground is completed, the onPost execture method will be called.

85

86@Override

87protected void onPreExecute() {

88super.onPreExecute();

89

90}

91

92@Override

93protected String doInBackground(String... args) {

94

95return null;

96

97}

98

99protected void onPostExecute(String file_url) {

100

101}

102

103}

104

105}

This java file looks pretty basic so far. The important part is that we are using AsyncTask because connecting our php scripts may take some time, and therefore we don’t want to use the same thread that runs the GUI of our application. If we did, it would really slow things down, freeze usability for our user, and maybe even crash our application. AsyncTask will create another thread to execute the tasks we want completed.

You also want to note where your PHP scripts are located. If you are using Xampp as a local server, make sure you uncomment the appropriate LOGIN_URL. If your scripts are on a shared server somewhere, use your domain name as the LOGIN_URL.

Here is the break down of what we want our login java class to do:

If the register button is clicked, open the register activity.

If the login button is clicked, create a dialog that pops up before trying to connect to the scripts.

Once the dialog is displayed, get the inputs from our “username� and “password� EditTexts.

POST that data to our URL that handles logging in.

Retrieve the JSON response from our server.

Interpret the response.

If the response element “success� is 1, finish the Login Activity, and open the ReadComments Activity.

If the response element “success� is 0, do nothing.

In either case, we will close our dialog.

Lastly, we will display the JSON response for the element “message� as a toast.

Awesome, let’s make it happen.

Login.java v0.1 – Basics

view source print?

1package com.example.mysqltest;

2

3import java.util.ArrayList;

4import java.util.List;

5

6import org.apache.http.NameValuePair;

7import org.apache.http.message.BasicNameValuePair;

8import org.json.JSONException;

9import org.json.JSONObject;

10

11import android.app.Activity;

12import android.app.ProgressDialog;

13import android.content.Intent;

14import android.os.AsyncTask;

15import android.os.Bundle;

16import android.util.Log;

17import android.view.View;

18import android.view.View.OnClickListener;

19import android.widget.Button;

20import android.widget.EditText;

21import android.widget.Toast;

22

23public class Login extends Activity implements OnClickListener{

24

25private EditText user, pass;

26private Button mSubmit, mRegister;

27

28// Progress Dialog

29private ProgressDialog pDialog;

30

31// JSON parser class

32JSONParser jsonParser = new JSONParser();