Experimenting with Pastebin.com’s API

Posted on July 18, 2010 by abhishek

(Pastebin.com has recently updated it’s API. An application tutorial that communicates with Pastebin.com using the new API is being built & will soon be posted on APIGuides. Stay tuned!)

According to Wikipedia, a pastebin is a web application which allows its users/visitors to upload snippets of text, usually samples of source code, for public viewing. Pastebin.com is one of those earliest and the most used pastebin service available to users since 2002. Pastebin.com also boasts of a clean, sleek, attractive and a beautiful user-interface bundled up with various standalone desktop applications, browser plugins & a “simple” API.

Today, we’ll play with the API that Pastebin.com provides us with to make a simple yet powerful API which lets you post snippets of text or code to Pastebin’s website {database} and in return it gives us the URL of our snippet!

We’ll be using simple HTML & simple Javascript + JQuery to build & beautify our application so we will just have a small number of files.

LAYING THE HTML FRAMEWORK


PasteBin.com API | APIGuides | TutorialsWalk
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></pre>
<h1>Experimenting with PasteBin.com's API</h1>
<pre>

<!--End Form-->

The above markup includes a CSS stylesheet and also the JQuery library on Google’s CDN in the head. Then we have an application heading being displayed on using the h1 tag. We also have a div named form and almost all of our application’s ingredients will go into that div.

ADDING OUR FORM

Now add the following code to the form div:

</pre>
<div id="form"><!--Start Form-->
<form action="http://pastebin.com/api_public.php" method="post" name="paste_form">Paste Text: <em>(REQUIRED!)</em>
 <textarea name="paste_code" rows="5" cols="50"></textarea>
 Syntax highlighting: <em>(optional)</em>

<select name="paste_format"> <option value="bash">Bash</option> <option value="c">C</option> <option value="cpp">C++</option> <option value="css">CSS</option> <option value="html4strict">HTML</option> <option value="java">Java</option> <option value="javascript">JavaScript</option> <option value="lua">Lua</option> <option selected="selected" value="text">None</option> <option value="perl">Perl</option> <option value="php">PHP</option> <option value="python">Python</option> <option value="rails">Rails</option> <option value="0">----------------------------</option> <option value="abap">ABAP</option> <option value="actionscript">ActionScript</option> <option value="ada">Ada</option> <option value="apache">Apache Log File</option> <option value="applescript">AppleScript</option> <option value="asm">ASM (NASM based)</option> <option value="asp">ASP</option> <option value="autoit">AutoIt</option> <option value="bash">Bash</option> <option value="blitzbasic">Blitz Basic</option> <option value="bnf">BNF</option> <option value="c">C</option> <option value="c_mac">C for Macs</option> <option value="csharp">C#</option> <option value="cpp">C++</option> <option value="caddcl">CAD DCL</option> <option value="cadlisp">CAD Lisp</option> <option value="cfm">ColdFusion</option> <option value="css">CSS</option> <option value="d">D</option> <option value="delphi">Delphi</option> <option value="dff">Diff</option> <option value="dos">DOS</option> <option value="eiffel">Eiffel</option> <option value="erlang">Erlang</option> <option value="fortran">Fortran</option> <option value="freebasic">FreeBasic</option> <option value="gml">Game Maker</option> <option value="genero">Genero</option> <option value="groovy">Groovy</option> <option value="haskell">Haskell</option> <option value="html4strict">HTML</option> <option value="ini">INI file</option> <option value="inno">Inno Script</option> <option value="java">Java</option> <option value="javascript">JavaScript</option> <option value="latex">Latex</option> <option value="lsl2">Linden Scripting Language</option> <option value="lisp">Lisp</option> <option value="lua">Lua</option> <option value="m68k">M68000 Assembler</option> <option value="matlab">MatLab</option> <option value="matlab">MatLab</option> <option value="mirc">mIRC</option> <option value="mpasm">MPASM</option> <option value="mysql">MySQL</option> <option value="text">None</option> <option value="nsis">NullSoft Installer</option> <option value="objc">Objective C</option> <option value="ocaml">OCaml</option> <option value="oobas">Openoffice.org BASIC</option> <option value="oracle8">Oracle 8</option> <option value="pascal">Pascal</option> <option value="perl">Perl</option> <option value="php">PHP</option> <option value="plswl">PL/SQL</option> <option value="python">Python</option> <option value="qbasic">QBasic/QuickBASIC</option> <option value="rails">Rails</option> <option value="robots">Robots</option> <option value="ruby">Ruby</option> <option value="scheme">Scheme</option> <option value="smalltalk">Smalltalk</option> <option value="smarty">Smarty</option> <option value="sql">SQL</option> <option value="tcl">TCL</option> <option value="tcl">TCL</option> <option value="unreal">unrealScript</option> <option value="vbnet">VB.NET</option> <option value="vb">VisualBasic</option> <option value="visualfoxpro">VisualFoxPro</option> <option value="xml">XML</option> <option value="z80">Z80 Assembler</option> </select> 

Post expiration: <em>(optional)</em>

<select name="paste_expire_date"> <option value="N">Never</option> <option value="10M">10 Minutes</option> <option value="1H">1 Hour</option> <option value="1D">1 Day</option> <option value="1M">1 Month</option> </select> 

Post exposure: <em>(optional)</em>

<select name="paste_private"><option value="0">Public</option><option value="1">Private</option></select> 

Name / Title: <em>(optional)</em>
 <input type="text" name="paste_name" value="" size="20" />
Email: <em>(optional)</em>
<!--Email--> <input type="text" name="paste_email" value="" size="20" /> 

 <input type="submit" name="submit" value="submit" /></form></div>
<pre>
<!--End Form-->

Here our form action is http://pastebin.com/api_public.php as this is the only way we connect to Pastebin.com‘s API. All the details we fill in the form are sent to the api_public.php file on Pastebin‘s server and after that we never return back to our native application as we’ll be provided with the our snippet URL on the API file itself, that’s why Pastebin.com’s API is so simple! Also we name our form as paste_form as we’ll be using that property for form validation! In the code snippet above, we are showing a textbox (which is required as it has our text/code snippet) named paste_code. Then for displaying the languages for syntax highlightion we are using a dropdown list named paste_format. After that we have options for Post Exposure (how much time the snippet should exist for), then personal information such as your name and email. I guess all that’s self-explanatory! :P

ADDING FORM VALIDATION USING JAVASCRIPT

Remember that the only required thing in our form is the textbox as it includes the snippet. All other things such syntax highlightion, email, name, snippet age etc. just act as options add-ons.We’ll use a simple Javascript Function to validate our form. To do so add the following code to your documents head:

<script type="text/javascript">// <![CDATA[
function validateForm(paste_form)
{

if(""==document.forms.paste_form.paste_code.value)
{
alert("Come on!, Enter something in the codebox!!");
return false;
}
}
// ]]></script>

We start of by naming our function as validateForm and also tell the application that the form we’ll validate is named paste_form. Then using the snippet below:


if(""==document.forms.paste_form.paste_code.value)

we check if something has been entered into the codebox or not. If nothing has been entered into the textbox, then we display a messagebox informing the user of the problem. And if something is added then it just ignores the alert!!

Now to get this working we finally need to add the onSubmit property to our form so that it validates before submission. Just replace the line that has your form properties with the one below:

</pre>
<form id="main-form" action="http://pastebin.com/api_public.php" method="post" name="paste_form" onsubmit="return validateForm(paste_form);">

Now whenever the user clicks submit, the onSubmit property we added here will check the form for code before submitting it to PasteBin’s API. I copy-pasted that entire line to avoid any confusions here!! :P

ADDING THE ELASTIC EFFECT TO OUR TEXTBOX

We’ll be adding a cool elastic effect to our textbox (which consists of our code). We do this to replace an ugly-looking textbox which has a scroll bar with a sliding text-box which grows bigger as you type in it. This is just to enhance user experience.

We have already imported the JQuery library hosted on Google’s CDN in our application’s head. Now we’ll be using this exciting plugin by Jan Jarfalk to add the elastic effect to our application! For that download the plugin files here. And then place then in a folder named js. Now call the file named jquery.elastic.js in your HTML application’s head like this:

<script charset="utf-8" type="text/javascript" src="js/jquery.elastic.js"></script>

After that add the following code snippet too to your application’s head:

<script type="text/javascript">// <![CDATA[
  $(document).ready(function(){  $('textarea').elastic();
// ]]></script>

Finally your application should look something like below:


PasteBin.com API | APIGuides | TutorialsWalk
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
  $(document).ready(function(){  $('textarea').elastic(); // ]]>
<pre>function validateForm(paste_form)
{

if(""==document.forms.paste_form.paste_code.value)
{
alert("Come on!, Enter something in the codebox!!");
return false;
}
}</pre>

// ]]></script></pre>
<h1>Experimenting with PasteBin.com's API</h1>
<div id="form">
<!--Start Form-->
<form action="http://pastebin.com/api_public.php" method="post" name="paste_form">Paste Text: <em>(REQUIRED!)</em>
 <textarea name="paste_code" rows="5" cols="50"></textarea>
 Syntax highlighting: <em>(optional)</em>

<select name="paste_format"> <option value="bash">Bash</option> <option value="c">C</option> <option value="cpp">C++</option> <option value="css">CSS</option> <option value="html4strict">HTML</option> <option value="java">Java</option> <option value="javascript">JavaScript</option> <option value="lua">Lua</option> <option selected="selected" value="text">None</option> <option value="perl">Perl</option> <option value="php">PHP</option> <option value="python">Python</option> <option value="rails">Rails</option> <option value="0">----------------------------</option> <option value="abap">ABAP</option> <option value="actionscript">ActionScript</option> <option value="ada">Ada</option> <option value="apache">Apache Log File</option> <option value="applescript">AppleScript</option> <option value="asm">ASM (NASM based)</option> <option value="asp">ASP</option> <option value="autoit">AutoIt</option> <option value="bash">Bash</option> <option value="blitzbasic">Blitz Basic</option> <option value="bnf">BNF</option> <option value="c">C</option> <option value="c_mac">C for Macs</option> <option value="csharp">C#</option> <option value="cpp">C++</option> <option value="caddcl">CAD DCL</option> <option value="cadlisp">CAD Lisp</option> <option value="cfm">ColdFusion</option> <option value="css">CSS</option> <option value="d">D</option> <option value="delphi">Delphi</option> <option value="dff">Diff</option> <option value="dos">DOS</option> <option value="eiffel">Eiffel</option> <option value="erlang">Erlang</option> <option value="fortran">Fortran</option> <option value="freebasic">FreeBasic</option> <option value="gml">Game Maker</option> <option value="genero">Genero</option> <option value="groovy">Groovy</option> <option value="haskell">Haskell</option> <option value="html4strict">HTML</option> <option value="ini">INI file</option> <option value="inno">Inno Script</option> <option value="java">Java</option> <option value="javascript">JavaScript</option> <option value="latex">Latex</option> <option value="lsl2">Linden Scripting Language</option> <option value="lisp">Lisp</option> <option value="lua">Lua</option> <option value="m68k">M68000 Assembler</option> <option value="matlab">MatLab</option> <option value="matlab">MatLab</option> <option value="mirc">mIRC</option> <option value="mpasm">MPASM</option> <option value="mysql">MySQL</option> <option value="text">None</option> <option value="nsis">NullSoft Installer</option> <option value="objc">Objective C</option> <option value="ocaml">OCaml</option> <option value="oobas">Openoffice.org BASIC</option> <option value="oracle8">Oracle 8</option> <option value="pascal">Pascal</option> <option value="perl">Perl</option> <option value="php">PHP</option> <option value="plswl">PL/SQL</option> <option value="python">Python</option> <option value="qbasic">QBasic/QuickBASIC</option> <option value="rails">Rails</option> <option value="robots">Robots</option> <option value="ruby">Ruby</option> <option value="scheme">Scheme</option> <option value="smalltalk">Smalltalk</option> <option value="smarty">Smarty</option> <option value="sql">SQL</option> <option value="tcl">TCL</option> <option value="tcl">TCL</option> <option value="unreal">unrealScript</option> <option value="vbnet">VB.NET</option> <option value="vb">VisualBasic</option> <option value="visualfoxpro">VisualFoxPro</option> <option value="xml">XML</option> <option value="z80">Z80 Assembler</option> </select>

Post expiration: <em>(optional)</em>

<select name="paste_expire_date"> <option value="N">Never</option> <option value="10M">10 Minutes</option> <option value="1H">1 Hour</option> <option value="1D">1 Day</option> <option value="1M">1 Month</option> </select>

Post exposure: <em>(optional)</em>

<select name="paste_private"><option value="0">Public</option><option value="1">Private</option></select>

Name / Title: <em>(optional)</em>
 <input type="text" name="paste_name" value="" size="20" />
Email: <em>(optional)</em>
<!--Email--> <input type="text" name="paste_email" value="" size="20" />

 <input type="submit" name="submit" value="submit" /></form></div>
<pre>
<!--End Form-->

The entire application files we made today are available for DEMO & DOWNLOAD.

If you have any suggestions or comments on this then feel free to use the Comment Form below :)

This entry was posted in pastebin. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>