File Under: APIs, Web Apps

Build a Simple Bookmark Manager With Ning

When I was a nipper with a Commodore 64, there was a brief mania for things like Pinball Construction Set, Adventure Construction Set, and Garry Kitchen’s GameMaker, which allowed patient amateurs to piece together their own clumsy game creations without having to learn a word of assembly or even BASIC. In those days, we had plenty of free time, since the web hadn’t been booted up yet (although I ran a BBS on dial-up, with an average uptime of three hours per day).

Nowadays, of course, we spend all our waking hours in massively multiplayer virtual interactions, commenting on each other’s profiles and collaboratively filtering each other’s kitten photos. And naturally, a new set of construction sets has arisen to correspond with the latest hobbies. Ning was co-founded by Marc Andreessen (is he still a household name in the Web 2.x era?) in secrecy and dramatically unveiled a few months ago. It’s a meta-application that lets would-be webpreneurs make their own social web apps.

Have you ever admired Craigslist but just wished that the ads were collaboratively filtered a la Digg? Or thought OKCupid just needs mapping, video, and live searching to be truly great? Now’s your chance to put your brilliant ideas in front of a web-hungry world without the bother of looking for investors, designing shoddy classes and whatever else typically goes into making a hot-shot social web application.

In practice, Ning handles a lot of the aspects of web apps that are tedious to code oneself — user authentication and data structures, for example. This leaves you, the creative genius, free to plunge right into what you do best. Is it an idea the world’s been waiting for? Let’s take a look at how to get started Ninging it up.


Contents

  1. Rhythm-a-Ning
  2. Mark Those Books
  3. A query, sir

Rhythm-a-Ning

Step one is to download and install the — wait, no! I’m too used to typing that by reflex after a million of these articles. In Ning’s brave new world, the first step is to go to Ning.com and create an account, which involves both a CAPTCHA and waiting 30 minutes or so for e-mail confirmation. (Ning is faintly beta in several ways, not least its slow servers: When the welcome e-mail arrives, it’s from ""Ning"".) Once you’re signed up and logged in, go to the Developers tab and give a click where it says “Click here to change your profile to Developer Settings and get direct access to more of the things you care about.” That switches the interface to a less beginner-friendly, more developer-friendly version of the site.

As with any good DIY project, you can start making your new social Web app by copying what someone else has already done. Ning allows you to clone an existing app to use as a starting point for your own. Depending on how ambitious you are, at this point you could just slap a new graphic on and call it yours, or completely rework it bit by bit. Ning also lets you view anybody’s app source code (all PHP for now; Ruby is promised as an alternative soon), unless they’ve paid to become a premium member, among the perks of which is code concealment. So it’s not too hard to dive in and start tweaking an app you like. We’re going to create our own from near-scratch.

The Ning gnomes provide a number of custom PHP classes, both for interacting with the database and for quickly adding sprinkles of Ajax, web services, and other treats to an application. There’s a lot there, and plumbing all of Ning’s continually growing possibilities is a big job, but here’s a run-through a very basic app; say a bookmark manager. We’ll get some information from the user, store it and show it to them when they return.

Mark Those Books

We create a new app using the “Create a New App” button, give it a name and a myfabulousapp.ning.com URL, along with optional classification tags, and we are rolling. Like a newly created adventurer setting out from the Guild, each brand-new app has a couple of items in its pack: a magical logo GIF, a global header, some default CSS for the road, and, of course, its trusty index.php. This comes from the factory with some preset code to display a greeting to any wayward user who comes across it:




<?php

 $viewer = XN_Profile::current();

 $name = ($viewer->isLoggedIn() ? $viewer->screenName : 'Stranger');

 ...

 <h3>Hello, <?php echo $name; ?>!</h3>



     <?php if ($viewer->isOwner()) { ?>

         Come on in, the code's nice and warm...

     <?php } else { ?>

         This App is still under development.  Please check back later.



     <?php } ?>



 

The first lines do some initializing. XN_Profile::current(); returns an object with information about the user who’s viewing the page (or an empty object if it’s not a logged-in user), including the properties interrogated in the second line: the isLoggedIn() method and the screenName constant. Then, below, the $name variable is used to greet the user by name, and the isOwner() method tests for the special circumstance in which the user is the app’s creator.

Let’s delete that starter code though and move on to our app. We’ll need a form in which the user can input his or her favorite bookmarks.

<form name="bookmarker" method="POST" action="index.php">



 Name: <input type="text" name="name"> <br/>

 URL: <input type="text" name="URL"> <br/>



 Description: <input type="text" name="description"> <br/>



 <input type="submit" name="submit" value="Bookmark!">

 </form>



 

Meanwhile (actually, let’s put this next part at the top of the page), we add the submitted bookmark to the database:


<?php

 if (isset($_POST['submit'])) {



 $bookmark = XN_Content::create('Bookmark')

      ->my->add('name',$_POST['name'])

      ->my->add('url',$_POST['URL'])

      ->my->add('desc',$_POST['description'])

       ->save();

 }?>



  


Let’s look at that. The first line is familiar PHP: Since the form submits to index.php, the same page it’s on, we want to run our post-submission code only if something’s been submitted, not every time the page loads. That’s line one. The next part uses the create method of Ning’s built-in XN_Content class to create a new bookmark object. The my->add syntax adds attributes that are localized to this particular object, necessary since there are doubtless other Bookmark objects in the Ning-wide data store. Finally save() places the info in the database.

Get used to that chaining syntax, since Ning likes to do things that way.

A query, sir

A similar approach is used to extract and display the bookmarks the user has stored.


$marks = XN_Query::create("Content")

 	->filter('owner')

 	->filter('contributor','=',XN_Profile::current())

 	->execute();



  


We construct a query with the XN_Query class. We apply two filters to the query. The first one, by owner, limits our results to content created by this application. The second one compares the contributor, aka the user, to XN_Profile::current(), which as you recall from above is the object representing the logged-in user. Hence, each user only sees his or her own bookmarks. Hey, delete that line and you’ve got del.icio.us!

Finally execute() executes our query and stores the resulting array in $marks. We’ll then do a loop through $marks and display each bookmark in a nice classy HTML table. For that, we chain again: $mark->my->htmlentities(name) runs the htmlentities() method on the my->name attribute of $mark, thereby making it display nicely.

The code for the whole page is thus:


<?php

 if (isset($_POST['submit'])) {

 	$bookmark = XN_Content::create('Bookmark')

 		->my->add('name',$_POST['name'])

 		->my->add('url',$_POST['URL'])

 		->my->add('desc',$_POST['description'])

 		->save();

 }

 ?>

 <h3>Your Bookmarks</h3>



 <table>



 <tr><th align="left">Name</th>

 <th align="left">URL</th>

 <th align="left">Description</th></tr>



 <?php

 $marks = XN_Query::create("Content")

 	->filter('owner')

 	->filter('contributor','=',XN_Profile::current())

 	->execute();

 foreach ($marks as $mark) {

 echo "<tr><td>";

 echo $mark->my->htmlentities(name);

 echo "</td><td>";

 echo '<a href="' . $mark->my->htmlentities(url) . '">' . $mark->my->htmlentities(url) . '</a>';

 echo "</td><td>";

 echo $mark->my->htmlentities(desc);

 echo "</td></tr>";

 }

 ?>



 </table>



 <form name="bookmarker" method="POST" action="index.php">

 Name: <input type="text" name="name"> <br/>

 URL: <input type="text" name="URL"> <br/>



 Description: <input type="text" name="description"> <br/>



 <input type="submit" name="submit" value="Bookmark!">

 </form>



  

You can paste that into a Ning app of your own and play around with it.

That’s just a scratch of Ning’s surface. There’s a lot to work with, and the documentation is skimpy at times, so using a pre-existing app as a springboard for yours is not a bad idea.

In addition to PHP and the forthcoming Ruby, you can use something called XNHTML, which is Ning’s own sort of templating-tag pre-processed way of doing things. Or, if you don’t like coding at all, there’s Zoho Creator, a newer, simpler meta-application that supports cloning too, or lets one create a whole mouseovery, tag-cloudy, Ajaxy app just by pointing and clicking.

Have fun!