Editing Jsonbin database (section)

=== Using JSONbin.org to create a message board ===
As an example project, we'll create a very basic message board. People can post messages and see all messages from others. We will use one HTML file and one JavaScript. In the end we will have code to empty the database, code to add an item to the database and code to load everything from the database into our page. 

An example of what we will build and an overview of all the code can be found here: 

https://codepen.io/arjensuijker/pen/wvNjjWe?editors=1010 

'''1. Create an account'''

To use jsonbin.org, you need a Github account, you can do that by clicking the 'sign in' link here https://jsonbin.org/.

Once you are logged in, the page on https://jsonbin.org/ should show your account data, including an '''API key'''. This API key is the key that allows you to change your database. In the example that we are building, we are using the API key directly in our code. This is very insecure, because anybody can find this key in your code and change or remove the database. However, doing it the secure way is to hard for this first project.

'''2. Set up your files'''

We will work in Visual Studio Code. It works really well for this project, because it has a convenient live server. Instructions for setting up VS code can be found here: [[Visual Studio Code|VS Code]]. 

In VS Code, you need to setup a basic HTML file that incudes Jquery and a JavaScript file. The process to do this is described here: [[JQuery]]. 

Making it in CodePen.io instead of VS Code will work too. Just make sure to include Jquery. 

'''3. Create an empty database'''

By default, your JSONbin is already filled with some stuff that we don't need. Therefore we will first write a script that replaces the current database with an empty array. We will use an array because that's basically a list of things/values, which is perfect to hold our list of messages. To do this, we first need a button in our HTML, we can add that in the body like this:

<code><button id="empty">empty database</button></code>

Next, we'll add the JavaScript code that makes it work in our script.js file:<syntaxhighlight lang="javascript" line="1">
//the url to access your database. replace username with your username
var url = "https://jsonbin.org/username";

//wait until the document is ready
$( document ).ready(function() {
  //execute a function when the button with the id empty is clicked
  $('#empty').click(function(){
    //make a POST ajax request, which sends data to the database
    $.ajax({
      method: "POST",
      url: url,
      contentType:"application/json; charset=utf-8",
      dataType: "json",
      // the data we send is just []. This is an empty array
      data: "[]",
      headers: { "authorization": "token your_api_key_here" }
    });
  });
  
})
</syntaxhighlight>Please carefully read the comments to know what the code does. You need to replace username on line 2 with your own username (as found on https://jsonbin.org/ after logging in). You also need to replace your_api_key_here on line 14 with your API key (the huge string of numbers and letters also found on the jsonbin page).

When you click the button now, it should create the database, ready for you to fill! You can check this by being logged in on jsonbin.org and visiting https://jsonbin.org/username (replace username with your username) in your browser. It should only show [].

'''4. Add messages'''

We will add an input field to the same page that allows you to send a message to the database. We'll start by adding the input field to the html file.

<code><input id="message"></code>

Next, we'll add the JavaScript code that selects the input field, takes its input and sends it to the database. The code needs to be added '''inside the document ready function''' underneath the button click function'''.'''<syntaxhighlight lang="javascript">
  //execute a function when the text inside the message is changed (press enter send message)
  $('#message').change(function(){
    //make a PATCH ajax request, which adds data to the database
    $.ajax({
      method: "PATCH",
      url: url,
      contentType:"application/json; charset=utf-8",
      dataType: "json",
      // the data we send is the value of the field that is changed, made into a JSON string
      data: JSON.stringify($(this).val()),
      headers: { "authorization": "token your_api_key_here" }
    });
  });
</syntaxhighlight>Again, make sure to replace your_api_key_here. If you enter a message into the input field now and press enter, it will be saved into the database.

'''5. Load messages'''

The next step is to make it possible to load the messages from the database. Again, we first add a button in the HTML.

<code><button id="load">load messages</button></code>

Next, we add the code to make it work. Add it somewhere after the previous message change function, but before the closing tags of the document ready function.<syntaxhighlight lang="javascript">
  $('#load').click(function(){
    //make a GET ajax request, which GETs data from the database
    $.ajax({
      method: "GET",
      url: url,
      contentType:"application/json; charset=utf-8",
      dataType: "json",
      headers: { "authorization": "token your_api_key_here" }
    // execute a function when the request is done
    }).done(function(result){
      //empty the message list div
      $('#message-list').html('');
      // for each value in the database, execute a function 
      $.each( result, function( number, value ) {
        //add a paragraph element containing the value to the message list
        $('#message-list').append("<p>"+value+"</p>");
      });
    });
  });
</syntaxhighlight>You should now have all the code you need!