Quck Way to Connect Android with PHP, MySQL (Part 1)-JSON Parser, ListView,Picasso,Uni Image Loader - Hello friends Android tutorial and tips trik, The article you are reading this time with the title Quck Way to Connect Android with PHP, MySQL (Part 1)-JSON Parser, ListView,Picasso,Uni Image Loader, we have prepared this article for you to read and download the information therein. hopefully fill posts article (Part, article 1)-JSON, article android, article Connect, article image, article ListView, article Loader, article MySQL), article parser, article PHP, article Picasso, article Quck, article TO, article Tutorial, article Uni, article Way, article with, we can write this you understand. Well, happy reading.

Title : Quck Way to Connect Android with PHP, MySQL (Part 1)-JSON Parser, ListView,Picasso,Uni Image Loader
link : Quck Way to Connect Android with PHP, MySQL (Part 1)-JSON Parser, ListView,Picasso,Uni Image Loader

Quck Way to Connect Android with PHP, MySQL (Part 1)-JSON Parser, ListView,Picasso,Uni Image Loader

Hello everyone, my name is Oum Saokosal.

Today I'm going to talk about how to connectandroid with PHP and MySQL and after that, I will show you how to read the JSON fromthe PHP and convert it to an object in Android and use that object for the custom ListViewand I will show you also how to read image from the URL.

I will create three activities Login Activitywhich I will show you how to do Login from Android and send the data to PHP and testit whether it is true or not in the database.

If it is true then I will send an intent openlist activity which retrieve all the data from the record from the database and thenpass into a costume ListView and if you click on the ListView, you will be able to moveto the detail page and you can find me on YouTube user Oum Saokosal.

You obviously you see the video right nowand you can see I had a video actually a while ago, I created a video about this as wellbut a lot of things changed in Android, so I decided to do it again and you can alsofind me on Google+, Twitter, and Facebook page and if you like this video, please subscribefor more video and of course share to your friends and if you have any comment, pleasedrop down below.

Ok, so first you need Android Studio of courseand I recommend you to download the latest version of Android Studio and you want touse an emulator.

I use Genymotion, which is very fast.

You can use other as well ______ people thesedays.

They like to play game like Clash of Clans,so you can have BlueStacks on your machine already, so you can use it as well, but forthe Genymotion, it is free as well and also you can have multiple screen at the same timeand to install Genymotion, you need VirtualBox from Oracle which is free so you need VirtualBoxand Genymotion, Android Studio.

So, first let's create a project.

I will call it AndroidPHPmySQL.

Choose a blank activity and just choose mainactivity, and I want to point out also that in my description of any video you can finda link to the source code ok.

Let me show you the version of this AndroidStudio, it's 1.

5.

1.

If you use the older version of Android Studio,you might find this version a little bit strange, because you will have activity main and contentmain altogether.

So for now, if you click on the activity mainyou can see the layout of component here, it's different from before because actuallyit is different and you can see this button as well and if you click on the text, youcan see the source code here, you can see the include here which means that this isthe main activity but then the content, I mean all the pattern that you used to workin the activity_main before is not stored in activity_main, it is stored in content_mainok, this is the new thing.

The activity_main here is just like a layeron Photoshop, you know, like you have a layer on a layer upon a layer.

So this is like a lower layer and then youcan have like content_main ok, and then if you want to drop a button you will use thecontent_main ok and now it appear as well but if you try to drop here, it will not allowyou to do that and the only thing that it has here is a floating pattern, ok, you cansee, because of the new design of the Google apps especially, you will see a pattern here,a play button or maybe add new button, you will have this button all in android app,so the Google introduced this idea to the Android as well okay.

From the main activity here you will see theseadditional lines of code because it for the floating button yeah, okay.

The content_main still use the activity_mainand then activity_main as you can see that will include the content_main for the content_mainfrom here, we'll go to activity_main and this one we will call the activity_main.

So first, we have the test our application.

Now i use Genymotion, so if you don't seethis, There should be a link here that needs youto sign in and you have to sign up from the website.

You go to Genymotion and sign in from theinternet, from the website, and then after that you can sign in here.

This is my username and then this emulatorwill allow you to download like a hardware, you know, but it's just like an emulator butyou can use Note 2, or Sony, or you know, for now I use Note 2 which is the old one,it makes our emulator run faster and the screen is smaller so i started already here.

So test our application first.

Ok, the first time that you run from the androidemulator, it should be very long because it's the first lunch.

Ok, now we see the application, it's goodto go.

So now we want to access to the website, sofirst you need to ask android for permission, so you go to AndroidManifest in manifest folder.

You cannot see this because maybe you arein the project perspective, so you need to switch to Android and you can see the AndroidManifesthear.

What you have to do is add a line and usethese permissions, android permission internet.

So, it should be outside the manifest ok andoutside the application.

It must be here and then you want to accessthrough the internet.

You can use another library, now these daysthey use Volley, but for me I want to use my library, I call it a ______ which i useaction task obviously.

You can go to Github.

Com/kosalgeek, you cansee generic action task version 2.

You should not use version 1, you should useversion 2.

What you have to do is download this and thenyou only need the GenAsync1.

2.

Jar.

Okay, so I already downloaded it.

This is the library, you can copy this fileand go to Android Studio and you go to project and you see the app and you go to libs andright-click and you paste in the libs folder.

You can rename it if you want but just okif you do not want to change, and right click it and Add As Library.

So, this is the way that you want to add anew library in a jar file library to Android Studio.

And you can check it, you go to Android andyou go to Gradle script, there are two builds, but you have to go to build.

Gradle (ModuleApp).

Then you can see the compile files.

It means you added to the project successfully.

And you can test it and if you don't knowhow to use that you can refer to the readme in Github ok.

There is a lot of documentation here.

To use that you call PostResponseAsyncTaskand you can call a task maybe task1 like this and create a class like this.

The first argument is the contact, it meanswhich activity you are on, and so I am now on main_activity.

The second one you can pass Async Responsewhich is the interface and this is the result.

It means you will retrieve the data from thepage that you want to and the second one you can disable the show loading message, justput it as a full.

You can post the data as well as HashMap andalso post the data, but then you don't want to show the loading and as well the loadingmessage and the last one, the HashMap and then the loading like you want to say or readingdata, something like that, and then you call the AsyncResponse.

So, for now you want to call only the AsyncResponse,so I say new AsyncResponse, so there should be a JSON, double click on the JSON.

So, here is the place that you can retrievethe data, so for now, I just use toast.

So, this one is in the anonymous class AsyncResponse,so you cannot call this, you have to say main_activity like this, you have to refer to the name andthen you can call as the result and they say Length_Long.

Lastly, you have a call execute and whichone, so let's say I want to call to local host, so let's call this one.

So normally, on browser you can call localhostlike this but this emulator has localhost as well, so you have to change to the hostlocalhost.

So, there is an IP for that, so if you usethe Android emulator, you call 10.

0.

2.

2, but I call it from the Genymotion, I had to changeto number 3, so this number is the alias which is like 127.

0.

0.

1 in the computer okay.

So, let's test it.

Okay, now you can see all the HTML is in theresult.

I want to point out also that if you use anotherport, for example now i use port 80 which is the default port, but if you change tolike 8080, something like this, then you have to change to like 8080 in here as well, butfor now I use port 80, so cancel it.

So I can just omit the port.

Ok, now let's create a project so if you usexampp, you can just go to xampp, and for now I use xampp.

So, you go to htdocs and I create a foldercalled customer and when you create a folder on Mac especially, you have to give the permission.

You go to get info, for windows, it doesn'tmatter, you don't have to give permission like this, but on Mac you had to do.

So you have to give permission to everyone,read only and you have to give a password and you click here.

You have to apply to and close items.

Otherwise, user cannot access your file likeimage or PHP at all.

So click apply, ok and then close it.

Then we can give your user permission to readyour files here, so to speed up our project, I have already created all the file necessaryfor that, so the first one is maybe Login, you want to post data to the login, so likeuse the index as default page or drag to brackets.

If you do not know brackets, bracket is theopen source text editor by Adobe, so I prefer open source, so let's give it a try if youwant to.

So the code here is very simple, like youhave html here and you have input the username for the text and input password for the password,I call it txtPassword here and when you click a pattern Login which is the submit button,you will go up because I use the Async here.

This is like a recursive calling page, sowe look here and I have to use the if the data is not supplied, it will skip this codeand go to the html, but if you supply the txtUsername and txtPassword, you will readthe data from the post and then assign to the username and password and select the datafrom the database.

You have to use a single quote because itis the string, password is also a string and here I use mysqli, so you give the connection.

I have the connection as well, so localhost,root, and password is blank and the database is customer.

So let's go to the database, so this is thedatabase, I have a product and table username ok.

So now we you talk about the username, souid username and password, so I have abc, 123, kosal and kosal.

So if you give the username kosal and passwordkosal, so there should be a record, so it must be greater than zero.

It mean it's successful, so I call exit herebecause I want to exit from the HTML here.

So let's test it outside, so I call usernamekosal and password kosal like this okay.

So there will be a message success and ifI type this wrong, so will say wrong password ok.

Then you can use this data for the Android,so we call the customer because this is the project and this is the index page, so justcall like this, it is fine.

Run it.

Ok now you can see the data here, it is likehtml here because in our webpage that is in html here, something like that.

So now you can read data from here and I wantto point out as well if you don't want to show the data in the post, but then you wantto test the data you can just call Log.

I and you can give the final string here.

If you want to show the data in the log, youcan just call Log.

D for debug and you can declare constant as the final string and youjust say Log like this and you can say anything you want to that mostly people just put theclass name in here, it's easy to find and then the string that you want to test andthis way you don't have to show the message in toast, as you know the toast will showthe message to the user but the log here will not.

So if you test again, so in here you willsee the text.

Okay, as you can see here the main activitybut you can just go to debug, as you can see when you choose debug and you type main_activity,you should see the data that you retrieved from the HTML page.

Ok so this way you can do the debug betterand then you want to test the data, so to test the data you can just do this class again,but what you have to do next is to provide the data, so you call the HashMap here andthen it should be the strings and if you don't want to specify the data type, it is fineand it just call force data.

You need two data.

It is a P and value, so what is this? So when you go to the PHP page, there is apost here, so you need to pass the data from the Android through the post data here, soyou copy this and pass in here and then you give the data from here, okay.

So, let's test the data, let's say I callkosal here and you need to put the password as well and the text here must be the sameand because we know that the password is also kosal, so we can just give it as the raw datahere, so if you change the name here like this username like this, you have to changethe username as well, so it doesn't matter that the HTML would change, but the code inthe PHP has to be the same to the android.

So what you have to do is that you have toprovide the second argument as the post data.

The 3rd one is the Asynctask.

Okay, after you run you can see when you givethat the text here, it is different from this one, there should be a raw message becausethe user here only takes the txtUsername and we provide from android as the username, soit's wrong.

So you have to make it exactly the same.

Now you can see that the text that you getback from the webpage is success.

Now you want to test the data that you getback from the PHP, you just call but the problem with theequal is that it must exactly success without space in the ______.

Sometimes you get the text back, it containsome space, so I suggest you to use contain, but you have to make sure that in PHP pageyou have to have exit because you don't want to let the PHP run after this, so exit willstop from here and exit the page.

So after I get the word success and it reallysuccess, then you can call a toast and you just say successful login.

So now we want to say that okay if it is successthen you want to open another page, which is the main page.

Ok, so first let's rename it as the loginpage, ok because this is not our main page, it is the login page, so to do that, you goto java file and refactor and rename and I say Login activity, do refactor but thereis something that is not changed that is the xml file, so you have to rename as well, soI rename it to activity login, so it is the style that android use that the java filehas the name in front but the ______, so I have to change the content_main as well andI want to have a text box that let user provide a username and password, I go to content loginand if you see something like this you can just click the refresh, it should disappear,but if you don't, might be a problem with the ide, you might want to update the latestone, so I need an email maybe or maybe just a pain text.

Second one is the password and the last oneis the button.

You double-click it and you can just givethe text like login and if you want to give a hint you just go to the property and youwill find the word hint, you say enter username, hint again, enter password.

Now you go to login activity and then youcall it by using.

Then you click a button.

I don't use the anonymous class, just useuser class.

So click on the red light and choose make Loginactivity implement onclicklistener and click ok, then you will see a new method here onclick,so I will copy this text and pass it in here.

Now you want to provide the text.

So you change here, so what you have to do,maybe first you have to change the string, so I call username.

So now you can provide the username and passwordfrom the login page.

Ok, now let's test it with the correct password.

Okay, successfully logged in.

What if the wrong one, nothing because wedon't have any else so you want to provide else like this, so now try again.

So in my last video, I got a lot of feedbackon this because mostly people are not sure about the PHP, so i would like you to consultwith PHP if you want to work with this because this material is not for PHP, it is aboutandroid, so I assume that you know the basic of PHP, so maybe you want to check it outsideif it test correctly before you go to the android, and one more thing, if you cannotlogin here I suggest you go to home and you go to browser and you type http//10.

0.

3.

2and if you have a port you have to provide the port.

If you don�t just type like this.

If you can see this page, it means you canconnect to the host website.

If you cannot, you can check the permissionin xampp.

You can go to configuration and you can goto config file and you can consolidate with add website about this, how to open the permission,there might be a Problem of that, so you have to make surethat you could connect it from here for someone who has no problem with that, so let�s continuewith me.

Now you can get the data like that and thenyou want to open another page so first you need to create another page.

You go to new activity and then you chooseblank activity, so now is the main page but I will call it lists activity.

There is a new feature here, you can chooseits parents, let's say which parent you want to give a back button to, you can you canjust use the brown and go to click ok.

Let's say you if you want to go to anotherpage, you call intent class like this and the source page, so this is login, so now type the correct password.

As you can see now, we are in the list activity.

What I was talking about is this button, itis a back button, but actually it is called app navigation, so as you can see when youcreate a class and then you choose the hierarchy so that is the default configuration for you.

You can just go to the app activity, that'swhy we call app navigation, so let me show you what is the code that they added for you.

So if you go to list activity, you can seethis line, it means that it is a port already that you can go back to the app page and ifyou go to AndroidManifest here, if you go down the list activity here, you can see thisline.

And also these two linea also added, so thesetwo lines is very important to support the lower version from 4.

0 below.

If you delete these two-line it only supportfrom 4.

1 up, so if you want to change, let's say you click back and you go to another page,so you have to go to AndroidManifest and change this and also changes this as well.

So you go to list activity and then you wantto add a list, so go to content list here.

You drag the ListView down here and then you drag to the full screen like this.

If you want it to make a like a full-screenyou just click on relative and go down and then choose padding and maybe just click hereand then delete it, then the ListView will be up to the full screen.

So now you want to read the data and thenconvert it into the object and pass it into the item.

So to do that you need a custom layer, youneed a layout.

You go to new and you go to xml and you goto layout and you give a name, so I will call it layout list, so the layout should be thedata from the database so you will have data from table product, PID, name but you don'thave to provide ID because it is the auto increment and it is also the primary key,you need only the name, quality, prize, and the URL and you want to see the structure,the in auto increment primary key and string here and integer and float.

So you need 4.

So you need a plain text.

Maybe just plain text here.

And then an image.

the image usually has a problem because it'snot visible, to make it visible you have to go to text and maybe you need to give thesource name in source.

You provide the drawable which is the imagethat already in the android library.

If you don't like it, maybe you just use thebig one.

Okay, I will show you how to do that correctlybecause relative one object is related to another, so first you have to make sure thattext must be related to the screen not to another object as you can see the arrow onthe left on the top left to the screen and then maybe you can just drag down like this,does not matter and then the image you want to like led to the screen and into the textabove like this and this text must be to the screen and to the image and this one to theline of the image.

It is a little bit complicated at first butif you work with it for a while you will know how easy it is, so just change the text.

So you need another library to take a datafrom JSON and then convert to the object which is my own library, I call it KGJasonConverter.

What you have to do is download it and youneed the KGJasonConverter.

Jar.

For now, I already downloaded, just copy thisand go back to project and you go to libs again and paste it here.

Right click and then add as library and thenyou need another library from Google, it is called GSON and you can go to Google and typeGSON and you should find this grepcode.

Com and if you see the page like this, it is rightand then you go to here and then click download GSON 2.

2.

4.

Now I already downloaded, so copy this andthen pass it here again.

Right click and add as library and you haveto make sure that the Gradle added correctly, ok now its already added.

So you need the data, so you have to use thepost action task again here, so go down and then call PostResponseAsyncTask And I call it taskRead And then you provide the context But don't cofnuse with the library ListActivity Actually you call it another name.

It's better, if you want to.

And then new AsyncResponse you can read the data from the page, so whichpage, so you have to go to PHP and create a page to read the data, I call it product,to read data and convert the JSON is very easy in PHP.

First you need to select the data and youcan just order by this one, mean the last one at the first and then mysqli query andthen here is very important.

You will create an array and then read allthe data from the result and then you call the JSON encode, so this one magic line willcreate all the data into JSON and you want to test it in PHP, you go up here and youwill see the JSON text here, so you need to read the data from there.

Now you can see you already retrieved theJSON text.

Next, you want to convert the JSON text.

In here, you call my class, but you need anotherclass to wrap all the object from the JSON, so you need a Java class actually, new andI call it product.

That product has to have the property exactlythe same to the field of the table and GSON needs you to declare as public.

If you are familiar with java, java has asetter and getter, but for the GSON file, GSON does not need a setter and getter, soyou have to declare the public, okay.

So as you can see now the annotation is fromGSON and you have to name exactly to the field, like this and after that right here, you can call mylibrary.

If you don't know my library name, you justgo to the project and go to GSON you can see the class called JSON converter here and ifyou want to see the documentaries, you go to my github and then you can see here howto call it.

There are two option, one is ArrayList andone is the List, so if you want to take it, just copy this and then pass it in here.

Okay, so the model class should change toproduct and so the JASON string is the s and the product, so it will create an ArrayListfor you, but because it is in the anonymous class, it is a little bit difficult to callthe user list, so I want to do it in the regular class.

To make a custom ListView, you need another library from amigos called fundater, to do that youneed a Gradle, but I don't recommend you to use this line because there is a bug in here,you go down and then the reason I add a line here, it means the older version.

There is a bug in there, but I will show youhow to fix that, and you go to project and change to android, go to Gradle and then addthe line below.

So to solve this problem, you go to AndroidManifest and then you add another line here, so thisshould solve the problem.

As you can see now there is no bug anymore.

This library is very useful, but except thebug, so you go back to list activity.

So in this document you can see how to dothat, as you can see now you have to have a class which is similar to mine.

You go down here, you call a BindDictionary.

What it does, it will insert the data thatyou get from the JSON into the layout list over here.

If you don't use his library you have to createa costume class which is a private class and then you call the getview and then you haveto have the ViewHolder, you know this kind of thing has happened again and again, that'swhy I either use this library, the BindDictionary will help you.

I will show you, over here you call answeringand what you have to do is that you provide, the ID of the item in the layout of exampleTV name and then you call tvName here.

So as you can see now, the product will go to here, you will understand the feel that you createhere, you have to supply that which one will go to tvName, so you just return the item.

If you want to change the product, maybe it is better.

The reason that it has narrowed because itis a string, so you just add a string like this and then just copy and paste here andchange to tvQuantity and quantity.

The last one is �.

Okay, but for the imageyou know that it needs a lot of data from the website, so for the image you cannot justcall at string field like this, you call it as different way, you call add dynamic imagefield and IV image and they you call new string extractor again.

So 1st it will read the data as a string andreturn it to hear and then this method will get a data from the return and pass it intothe URL and view is the image okay, so it's very flexible.

You can change, you can add to any field youwant.

It is similar to the array adapter.

1st you need to provide the context whichis listActivity like this and then as you can see it needs an ArrayList of product.

So declare it here.

So, now we cannot see the result, might besome problem.

Okay, maybe because we called it outside.

I just copied this one and paste it insidehere, okay, paste it again.

Click create passwords.

Now you can see the data, so we have to putthe code inside the process finish.

So one more thing, we have to load the image,so there is a library you can use universal image loader.

You can just go to Google and type universalimage loader and Picasso is a good one as well, so let me try Picasso.

Picasso is a simple one.

1st you need to add the Gradle, okay, syncnow.

So to get the picture is very easy for Picasso,this one.

You go over here, so what is the context,so the context is list activity like this, and the URL is correct and the view is theImageView.

As you can see now, you have the image, ok,so you can just use the simple line of Picasso like this, but if you want to cross the line,for example like the size, you can just make a resize like this.

If you want to transform the image to somethinglike circle or crop square like this, then you need this code.

There is an error, if there is something wrong,for example like the image is not loaded, then you can follow placeholder, so you needthis line of code okay.

Of course, we do not have any image, we canuse Android library image by start the android.

Org then you can have a lot of image.

As you can see, this is an image that if theyare downloading, then you can see the star, if something error, maybe that is the exclamationimage.

So there is also Picasso, if you want to crossthe mime more, you might need to read more documentation about this and i will show youas well how to use the universal image loader, which is a very popular one.

What you have to do if you go to quick setupand then you can add the Gradle over here.

You go to Gradle and add a line here and ______but for universal image loader, you need another permission called write external storage.

It means that if the image was already downloadedthen it will cache, for it needs the permission to write to the external one.

You go to AndroidManifest and then add thisline.

So first you go to java file and I want tocreate a file for that with the java, and create a class called UIL config and createmessage called config and the return type must be image loader configuration and passa code inside that.

Okay, some of the code you may not need to,just these four lines.

There is a line here; you need to initializethis line before you can use the image loader.

You have to add this code and you can find this in my blog kasolgeekand you can just go to the image loader using the universal image loader and to the bottomyou will see it okay and also because you want to add the display often you have tocall this method as well before displaying the image options.

There are a lot of configuration you mightnot understand but this is like a default code for the universal image loader for ifyou want to do it correctly you may consult with the github itself, so a little bit confusedfor the first user but then that is the way it goes, okay.

So it is the same thing you can prefer Picassoif you want to, but if you want to config more then you can use the universal imageloader.

Lastly, I want to send the data to anotherpage, I want to call it the detail page, so blank activity, detail page and the hierarchyis list.

Okay, so you go to content detail and yougo to design and then you can have a edit text for the name, for the quantity, for theprice, and then the image and for the image we can have a text to edit as well and alsowe can view the image by using the ImageView.

So again, we have to make sure it has someimage inside, so go to over here.

Then when you click on that you move to anotherpage, so it a position of the item that you click, this is the position, then you need a product So Product selectedProduct And then the list of that.

So the list of that must be productList get(position) And then you call Intent in = new Intent(ListActivity.

This, DetailActivity.

Class); And then usually you start this but this time I want to send some data.

Inside there, you call in.

PutExtra() I call product like this and I set selectedProduct There is some error inside there.

We need to cast it to Seriazable.

In the DetailActivity, you call Intent like this getIntent().

GetSeriazableExtra("") and put the product Now the product you want to get, you cast it to Product.

OK This is EditText.

Then you need to declare EditText outside.

Also ImageView First you declare the EditText outside and get the EditText like this.

And then you pass the product into this one.

But first you need to check it if it's null or not.

Sometimes u did not send it.

So it might have some problem.

And then you are good to go.

Then u can setText And then you call Product name like this.

The same to others.

And then you call Picasso or ImageLoader for that.

Let's call ImageLoader because we already used it that.

So you need this one line.

Maybe u declare it over here.

And change the name of the class.

And lastly you copy this code.

Paste it inside here.

the URL is the image url, e.

G.

product.

Image_url And the ImageView is ivImage So login again And click on it, maybe your first one.

The problem here maybe the name of the image.

Oh.

I named it as tvImage.

So I have to change to ivImage.

Run it again.

OK click it again.

There you go.

OK that's it for today.

In the next video, I will show how to update the data.

How to delete it from the ListView.

And how to add new data.

For now I wanna say Goodbye.

I will see you in the next video.

Thank you.

Thus Article Quck Way to Connect Android with PHP, MySQL (Part 1)-JSON Parser, ListView,Picasso,Uni Image Loader

That article Quck Way to Connect Android with PHP, MySQL (Part 1)-JSON Parser, ListView,Picasso,Uni Image Loader This time, hopefully we can give you all of the benefits. Well, I'll see you in another article post.

You now read the article Quck Way to Connect Android with PHP, MySQL (Part 1)-JSON Parser, ListView,Picasso,Uni Image Loader the link address https://svedda79.blogspot.com/2016/10/quck-way-to-connect-android-with-php.html