1

http://liveweave.com/xfOKga

I'm trying to figure out how to save code similar to Liveweave.

Basically whatever you code you click the save button and it generates a hash after the url. When you go to this url you can see the saved code. (I been trying to learn this, I just keep having trouble finding the right sources. My search results end up with references completely unrelated to what I'm looking for, example )

I spent the past two days researching into this and I've gotten no where.

Can anyone can help direct me to a tutorial or article that explains this type of save event thoroughly?

Michael Schwartz
  • 8,153
  • 14
  • 81
  • 144
  • 1
    [This might be of some help](http://stackoverflow.com/a/8737675/2518525) – Darren Jul 31 '14 at 01:59
  • 1
    Couldn't you just have your script create a temp directory on the server with the hash name and save the file as index.php in it? So when users enter the address followed by the hash they will see the file they created – ksealey Jul 31 '14 at 02:08

1 Answers1

2

To understand the functionality, it is best to try and identify everything that is happening. Dissect this feature according to the technology that would typically be used for each distinguishable component. That dissected overview will then make it easier to see how the underlying technologies work together. I suspect you may lack the experience or nomenclature to see at a glance how a site like liveweave works or how to search for the individual pieces, so I will break it down for you. It will be up to you to research the individual components that I will name. Knowing this, here are the keys you need to research:

Note that without being the actual developer of liveweave, knowing all the backend technology is not possible, but intelligent guesses will suffice. The practice is all the same. This is a cursory breakdown.

1) A marked up page, with HTML, CSS, and JavaScript. This is the user-facing part of the application, where content can be typed, and how the user interacts with the application.

2) JavaScript to asynchronously (AJAX) submit the page's form to the backend for processing.

3) A backend programming/scripting language to process the incoming form. In the case of liveweave, the form is POSTed. It is also using PHP to process the form.

4) A database table with a column for each language (liveweave has HTML, CSS, and JavaScript). This database will insert the current data from each textarea submitted in the form and processed by PHP as a new row. Each row will generate a new hash and store it alongside the data just inserted. A popular database is MySQL.

5) When the database insert is complete, the scripting language takes over again, and send its response back to the marked up page (1). That page is waiting for a response from the backend. JavaScript handles the response. In the case of liveweave, the response is the latest hash to be used in the URL.

6) The URL magic happens with JavaScript. You want to look up JavaScript's latest History API, where methods like pushState will be used to update the URL in the browser without actually refreshing the page.

When a URL with a given hash is navigated to, the scripting language processes the request, grabs the hash, searches for the hash in the database table, finds a matching row, and populates the page's textareas with the data just found.

Throughout all this, there should be checks to avoid duplication and a multitude of exploits. This is also up to you to research.

It should be noted that currently there are two comments for your question. Darren's link will indeed allow the URL to change, but it is a redirect, and not what you want. ksealey's answer is not wrong; that is one way of doing it, but it is not the most robust or scalable, and would not be the recommended approach for solving this.

danemacmillan
  • 1,202
  • 12
  • 13