Jsonbin database - Revision history

Arjensuijker: /* What is a JSONbin? */

2023-11-24T14:46:42Z

What is a JSONbin?

← Older revision		Revision as of 14:46, 24 November 2023
Line 4:		Line 4:

	=== What is a JSONbin? ===		=== What is a JSONbin? ===
	A JSONbin is basically a ~~website~~ that allows you to save JSON files on ~~their~~ server. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to send data over the internet. For our purposes, it is most important that it allows you to send arrays, which are lists of texts, numbers or other info. We can just send our info to a JSONbin, and there it will be saved so that another user can retrieve it. For example, you can create a public message board this way, where everyone can send a new message and view the messages that other people have sent.		A JSONbin is basically a service that allows you to save JSON files on someone else's server, usually for free. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to store and send data over the internet. For our purposes, it is most important that it allows you to send and store arrays, which are lists of texts, numbers or other info. We can just send our info to a JSONbin, and there it will be saved so that another user can retrieve it. For example, you can create a public message board this way, where everyone can send a new message and view the messages that other people have sent.

	There's many JSONBIN ~~projects~~ out there, but at the moment of writing there is only one that allows you to add information without replacing the whole database. It can be found on jsonbin.org.		There's many different JSONBIN services out there, but at the moment of writing there is only one that allows you to add information without replacing the whole database. It can be found on [https://jsonbin.org/ jsonbin.org].

	=== Using JSONbin.org to create a message board ===		=== Using JSONbin.org to create a message board ===

Arjensuijker: /* Using JSONbin.org to create a message board */

2023-11-23T13:37:53Z

Using JSONbin.org to create a message board

@@ Line 9: / Line 9: @@
 === 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.
+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.
 '''1. Create an account'''
@@ Line 22: / Line 26: @@
 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]].
 '''3. Create an empty database'''
@@ Line 45: / Line 51: @@
        // the data we send is just []. This is an empty array
        data: "[]",
-       headers: { "authorization": "token apikey" }
+       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 apikey on line 14 with your API key (the huge string of numbers and letters also found on the jsonbin page).
+</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 [].
-. Enter messages
+'''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.
@@ Line 60: / Line 66: @@
 <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'''.'''
+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">

Arjensuijker: /* Using JSONbin.org to create a message board */

2023-11-23T08:29:24Z

Using JSONbin.org to create a message board

← Older revision		Revision as of 08:29, 23 November 2023
Line 19:		Line 19:
	'''2. Set up your files'''		'''2. Set up your files'''

	We will work in [[Visual Studio Code\|VS Code]], ~~because it has~~ a ~~convenient live server~~. ~~Follow the instructions~~ to ~~set up your website files there with~~ [[JQuery]].		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]].

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

Arjensuijker at 12:22, 17 November 2023

2023-11-17T12:22:13Z

← Older revision		Revision as of 12:22, 17 November 2023
Line 31:		Line 31:
	var url = "https://jsonbin.org/username";		var url = "https://jsonbin.org/username";

	//execute a function when the button is clicked		//wait until the document is ready
	$('~~button~~').click(function(){		$( document ).ready(function() {
	//make a POST ajax request, which sends data to the database		//execute a function when the button with the id empty is clicked
	$.ajax({		$('#empty').click(function(){
	method: "POST",		//make a POST ajax request, which sends data to the database
	url: url,		$.ajax({
	contentType:"application/json; charset=utf-8",		method: "POST",
	dataType: "json",		url: url,
	// the data we send is just []. This is an empty array		contentType:"application/json; charset=utf-8",
	data: "[]",		dataType: "json",
	headers: { "authorization": "token apikey" }		// the data we send is just []. This is an empty array
			data: "[]",
			headers: { "authorization": "token apikey" }
			});
	});		});

	})		})
	</syntaxhighlight>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 apikey on line 14 with your API key (the huge string of numbers and letters also found on the jsonbin page).		</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 apikey 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!		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. Enter 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'''.'''

Arjensuijker at 12:06, 16 November 2023

2023-11-16T12:06:51Z

@@ Line 21: / Line 21: @@
 We will work in [[Visual Studio Code|VS Code]], because it has a convenient live server. Follow the instructions to set up your website files there with [[JQuery]].
-. Create an empty database
+'''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:
@@ Line 27: / Line 27: @@
 <code><button id="empty">empty database</button></code>
-Next, we'll add the code that makes it
+Next, we'll add the JavaScript code that makes it work in our script.js file:<syntaxhighlight lang="javascript" line="1">

Arjensuijker: /* Using JSONbin */

2023-11-16T10:29:23Z

Using JSONbin

@@ Line 6: / Line 6: @@
 A JSONbin is basically a website that allows you to save JSON files on their server. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to send data over the internet. For our purposes, it is most important that it allows you to send arrays, which are lists of texts, numbers or other info. We can just send our info to a JSONbin, and there it will be saved so that another user can retrieve it. For example, you can create a public message board this way, where everyone can send a new message and view the messages that other people have sent.
-=== Using JSONbin ===
+There's many JSONBIN projects out there, but at the moment of writing there is only one that allows you to add information without replacing the whole database. It can be found on jsonbin.org.
-To create the message board you can start with the setup of your files, including jquery. You can follow the instructions [[Jquery|here]].

Arjensuijker at 14:16, 12 October 2023

2023-10-12T14:16:02Z

← Older revision		Revision as of 14:16, 12 October 2023
Line 5:		Line 5:
	=== What is a JSONbin? ===		=== What is a JSONbin? ===
	A JSONbin is basically a website that allows you to save JSON files on their server. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to send data over the internet. For our purposes, it is most important that it allows you to send arrays, which are lists of texts, numbers or other info. We can just send our info to a JSONbin, and there it will be saved so that another user can retrieve it. For example, you can create a public message board this way, where everyone can send a new message and view the messages that other people have sent.		A JSONbin is basically a website that allows you to save JSON files on their server. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to send data over the internet. For our purposes, it is most important that it allows you to send arrays, which are lists of texts, numbers or other info. We can just send our info to a JSONbin, and there it will be saved so that another user can retrieve it. For example, you can create a public message board this way, where everyone can send a new message and view the messages that other people have sent.

			=== Using JSONbin ===
			To create the message board you can start with the setup of your files, including jquery. You can follow the instructions [[Jquery\|here]].

Arjensuijker: new

2023-10-12T08:21:18Z

new

New page

If you want users to save and share information on a website that you build, you are going to have to use some kind of database. Tis kind of technology is the backbone of social media, Wordpress websites and basically any website that lets it's users interact with each other.

Making this happen can be pretty hard. Usually you need to rent some kind of server, and also learn to code a server-side language. However, there is an alternative: Use a JSON 'database' on someone else's server.

=== What is a JSONbin? ===
A JSONbin is basically a website that allows you to save JSON files on their server. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to send data over the internet. For our purposes, it is most important that it allows you to send arrays, which are lists of texts, numbers or other info. We can just send our info to a JSONbin, and there it will be saved so that another user can retrieve it. For example, you can create a public message board this way, where everyone can send a new message and view the messages that other people have sent.