Play Video

How to Upload Data to Hostinger Server Using FileZilla Tutorial E01 – Understanding JSON

A two episode tutorial on how to upload data to the server ( and then display it in the app using Android Studio 2.3.

Next episode will be out soon. Make sure you like and subscribe to receive updates!

Filezilla Link:
Notepad Link:

Sample JSON File:

hello guys welcome to Professor DK and today we will be covering an interesting topic which you know some of you have asked Oh in the comments so how can we you know host data on the server and then later display it on earth so today we are going to see how we can do that let’s move on to our session place so the topics for the day today will be you know to create a server so we’ll be creating our server on hosting er which is a free web
hosting service and later we’ll be hosting data on the server which will be in the form of Jason so and then after that we’ll retrieve the data and then display that data on our app so firstly to host any data on the server we need to understand the JSON format so for that let’s move on to what is Jason so this and basically the full form is JavaScript object notation so you know it seems like a complicated term but it is simply a mere collection
of objects and arrays so I will show you examples which use from which you can understand the concept better and it is used to you know transmit data from the server to the web and it is a simple structured and readable data so this Jason is actually an advanced version of XML XML was the older version and now nowadays everything uses Jason because it’s as I said it’s very simple and readable so let’s move on to some examples of how we can write
JSON code so as you can see here the this thing the the curly braces basically refers to our object and the square braces refers to the array so basically when we have to or you know more objects so we need to you know specify the you know the object name so this is the object name so under this I will named it as laptop so basically this object label covers all the objects of the name laptop so all this laptop all these objects that you can see
curly braces will be embedded in an array so basically this is an object the main main object covering the objects class which is basically in the form of an array with different objects of different laptops so as you can see here I have in the main class laptops I have my laptop and this is represented in the form of a key value pair what is key value pair is basically now if if I want the value of you know the first object in the array so
basically after you know come into this array and if I you know refer to the ID laptop then it will return the value HP so this is something called as key value pair you are you always search for the key and the jsonparser will retrieve the value so this is how it is represented and a much more simpler you know JSON format will be you know this way so this is me you haven’t when you don’t have you know different objects you can simply start with
an array in which you have a lot of objects so since we are only dealing with one set of objects or books so we’ll be calling them you know book and then you know you’ll have all the key value pairs and each of these objects you know they are separated by a comma and the end as you can see does not have a comma so this marks the end of the you know end of the array so now if I have to you know references I’d simply call the name and in the array
after you know this is indexed this object is of index 0 so firstly I need to come into this array if I want Harry Potter I need to come into this array and provide index R 0 and search for the key book and the value Harry Potter II returned will so let’s let us want to you know more advanced version of how a jason you know data might look like so for that let’s open notepad clusters so so let me just magnify it so you have my magnifier here
because simply zooming in the video editing software you know it removed quality so I better just zoom in okay so as you can see here okay the quality isn’t so good but anyway as you can see you have the object so it starts with the object and as I told you you know if you have you know different set of you know classes so then you need to you know start with an object and then inside this object you know you can have object levels so everything
which talks about a laptop can be grouped under the label laptops this is the object label and this object label basically is an array which will have different objects in this case three objects each separated by a comma and the last one does not have a comma and suppose I want another object so basically I call it with the label accessories and then again an array and you know the three values given here separated by commas so each of these you
know is a key value pair and you need to you know put all of these in double inverted commas so this is how you you know represent a simple JSON data it’s that simple and let’s move on to how we can code this in Android studio and before that before we can retrieve any data we need to see how we can upload this data on our server so for that sake let’s go to the browser and I just need you to go to this website called as hosting gadot in hosting
ER is a free web hosting service so just go ahead and create an account so go to a member area so once are in hosting the just create your new account so so after entering all your details just create a new hosting account so hosting account is basically you know so it is redirected to your dashboard I guess so after this so just click on home I guess that will give us the dashboard okay yeah so you can see that we have our dashboard here okay so
confirmed so next what you need to do is just go to your mail and click on their confirmation link so once you’ve confirmed your mail you can see that you will be redirected to this website so here they say that you know your your email has been verified and after that you can set up your new audit so let’s just go to setup so we want a free sub domain so you know you can call it whatever you like so I’m just going to go ahead and call it
Professor DK and you can see that it is appended with the custom string dot es y dot es just choose server is in Europe and there you go you have successfully set up your server on hosting so so once you refresh you have our listing our hosting account so we need to go to our dashboard and under our dashboard you can see that there is a column for files so let’s just click on file manager and here it says that you know it gives us the details of
the FTP which is file transfer protocol our you know the hostname username and password so to access our you know files or to upload files onto our server you should you know use a third party client called as FileZilla but before that let’s just check if our website is running so as we had seen before the website name was Professor DK dot es Phi dot es which was the you know URL which got appended to us now the name that we are typed so as you
can see that our website is up and running it shows that account has been created so let’s just go and upload something on a server not something actually we will be uploading as Jason files so for that let you know open FileZilla I’ll provide the link of this software in the description below or you can also you know click on the link which they are provided in the website as well to download the software so once I downloaded the software it’s
pretty simple you just need to enter all the details and connect to this server so okay let’s just paid for FileZilla to open okay so here we have our FileZilla open so in this in FileZilla what we need to do is open file go to site manager and create new site we call it we call it jason demo so here what we need to do next is just go ahead and copy our username host name and password so copy the host name first paste it port number is 21 by
default and change this to use plain FTP in the drop down menu change it to normal because it does have a password and swap anonymous just in the user name to whatever is given here so just simple copy-paste and then the password whatever you are do not type the when you created the server so go ahead and you know click on connect and as you can see it it has successfully you know your credentials have been you know verified then it will give you
the directory listing so this is the public the HTML underscore HTML that you see and the default PHP files which I had seen earlier on the server so now what I’m going to do is I have this sample JSON file in my desktop so I’m just going to drag and drop onto this pane so in this pane you need that you know the transfers have been finished so all files have been successfully transferred so what this basically says is this sample dot JSON file
has been uploaded on server so if you are asking about this JSON file was so this is basically what I shown you you know previously so it has you know two object labels laptops and accessories and you know the key value pairs so let’s just check if you have the same data on a server as well and if running perfectly so go to the browser and refresh the file should have been uploaded yeah so as you can see here you know you have our file and it
also gives the size and also the timestamp so just click on this and you should you know it said as there is no error you should see that it works properly you have some error so basically what it’s saying is okay we missed you know a comma so since are you these are different object labels so I guess you need to provide a comma so let’s just give that and then once this is done again you need to you know upload the file so just overwrite that
file so all right oh you know work now so there you have it so you may not be you know able to see the file in this way because I have an extension called adjacent view so this basically provides our JSON format in a proper structured way in a very readable format so so basically this has run without any error so this is how you can you know host data on the server so in the next tutorial we will see how we can retrieve this file and them and
display it on the app so thank you for watching make sure that you like and subscribe so let’s meet in the next video thank you for