Couchdb part 3, the script

Today we will look at the script.I will put these files on the web somewhere and link at the bottom of this page.

Start a file named recordedit.js
Here is the top of it

This is what is happening in the first 28 lines

line 1 connect to the database named courses
lines 2-28 is a function called update courses.

div #courses is emptied
and the view named byname is called, this was built in the last episode. The file will be attached below.
We then have some data, the function itterates through the rows of data, looking for the client name and title.  If there is no data, as there will be the first time this is run, nothing will happen. But with data, we will get a line with the client name and course name. This is followed by links to Edit the course or Remove the course. The remove the course will show up on line 179 of the script and the edit will start on 211, but we have a bit more to do until then.

The next step will build the dataform, it will be blank if the new course from the html page is clicked or populated if the update course button is clicked above.

the setup for this

lines 30-40 are the naming of the form, then we build the form. line 40 says the form will be a table. Then we write some repdative code for each line of data we want.
Looking at lines 44-48, we make the form with the first cell having the text Client, the second cell is the input form for the id client. Line 47 looks odd at first, but what it is asking is if we are editing, then fill in the form with the data from the document we are editing. then we close the line of the table, and so on. This is where you are building  your JSON object, name these what you want, you can change the names later, this form has many lines....
Find all of the lines attached... but

here is the bottom of the table and the submit function.

Now we will either append the JSON file or build a new file. The lines starting in 144 just take the data from the form and put them into the doc. These match up with the form lines in the previous section. This is where errors can occur, make sure the input names match in both sections!

lines 160 and 161 are the last of the building of the doc lines. 161 will be used later as things get more complex, but it shows you can throw anything in there if you wish to help identify the data.
163 and 164 we finish up with the making the document.

166 starts the fun things that happen after the page is loaded--hence the document ready function.
From before, remember that the data has an Edit button and a Remove button next to it. The add new was part of the index file, so within the div # courses, we can either edit or remove. The clicking of one of these will start the events on 170. It takes the document id on 174 and gets ready to do something. If edit is chosen, it opens the document and populates it up in line 30.
181 starts the delete function, if Remove Course is chosen. By the way this was made in lines 20-23.

When delete is called, it gives a chance to cancel the command. Always a good idea. The user is given the option of Delete or Cancel. If cancel is chosen, line 203 happens and we go back to where we were. If delete is chosen, line 190 is called and the database removes the document with the id chosen earlier.

now the end..
Here we add to the database. in 217 it is checking to see if the document has an id, if it does, then we just rewrite the document in the database, then clear the update form. Otherwise, if there is no id, that is it is a new set of data, the database will assign it an id.
then back to where it was.

When making this version, I realized if I wanted the system to be really searchable, some pulldown menus would need to be created, to keep the data uniform.

So, you have a workable form now. Next steps will be to improve the form with pulldowns. And the pulldowns will be populated from the database!!

Link to documents

Couchdb part 2

CYBERPOWERPC Gamer Xtreme GXi440 Gaming Computer (Google Affiliate Ad)

If you need help loading and starting Couchdb onto your server please go to one of these resources:

Couchdb the definitive guide http://guide.couchdb.org/
 Apache CouchDB http://couchdb.apache.org/
 and for
 Couchapp http://couchapp.org/page/index

 There are many more out there, but I have found these most useful.

 As stated in my earlier post, my programming skills are a bit rusty, and at times I need someone to walk me bit by bit into the processes. I will, hopefully do that walk through here. I don’t really use forums such as stackoverflow, as I feel like an idiot when some answers are given to me. If you have questions, please ask, I hope I will not talk down or up to you.

 Couchdb, with JQuery and Javascript should be easy to use, and most of what you read tells you how easy it is, and once you cross the first hurdle it is. Crossing that hurdle took me several hours of work. Many more than it should have.

 Enough whining Let’s get started.

You need to have Couchdb and Couchapp installed, and if you are a normal computer person, I would assume you messed around a bit with both. You will be using the command line and the Couchdb web interface for most of this work. You will also need a text editing program. I use either notepad ++ or Komodo.

 These examples are done on a Linux Ubuntu box, not that it really makes too much of a difference.

 If you go to your web interface (http://127.0.0.1/_utils) and make a new database, for this example call it ‘courses’ as this project is a catalog of training courses.
 Or you can use the curl command in the command line $ curl -X PUT http://127.0.0.1:5984/courses 

If you messed with the security settings of couchdb, you may need to modify this command, something along the lines of: 

After that step, it is time to start making our application.

 Using the command line, change to a directory will want to work out of, I usually use the documents, or a subdirectory in documents, but have used others, just whatever you feel best using and does not get you confused.

This will be one of commands you will use over and over again, so learn to love it!
 $ couchapp generate app courses
What this does is makes a folder named courses.
The folder is full of many wonderful confusing things, most of which we will not deal with. There should be a few documents on the top level, couchappignore, couchapprc, README.md, _id, couchapp.json, language. Not doing much with these for this tutorial. The folders in the directory should be _attachments, evently, lists, shows, updates, vendor, views.

 We will be dealing with the _attachements and views folders, the others are useful to poke around in, and will be useful for future projects.

 If you did not know already, Couchdb stores its data as JSON documents, which means that each piece of data can be searched by itself, and each set of data is its own document, no mucking about with too many key and making sure everything is set before starting. You can change you search and fields at anytime. If you need help understanding what JSON is there are many articles out there to help you.

 INDEX.html 
We will start in the _attachments folder, specifically with the index.html file. As with most web applications, the index file is opened by default by a web browser. Right now the file is fairly boring, but we will change it. In a later part of this tutorial we will replace this index file with another, rename this file something else, and make a few similar copies of this index file. I am sure smarter people could get by with one index file, but I am not one. I am more of a code basher, than a finesse person. finesse is good. Bashing works for me

 This is what the index.html file should be changed to.

Now let us break this down to its parts. The header:

 Gives us the title , the css file location and loads up some scripts. As you can see there is a loader script named loader.js which loads most things, the recordedit.js script will be written by you soon, and I threw in a link to a general jquery library, as things were not working quite right before doing that.

 Now to the body:

 From the .css file we have a div named account. The title on the page will be “Course Data” The next line will make a link with the term Add Courses, to a form to add courses to our database. The next two divs will make a list of the current data or make a form to edit or add data to the database. The last two lines are used to maneuver between forms we will make later, feel free to leave them off for the time being. Ta-da one of three documents finished .

 The second document is even simpler. Making a view Views are how we, well, view the data. Please hang with me for a bit, as this may be a tiny bit confusing, hopefully not. When we make our database, we of course will have many named fields, the view allows us to search the JSON documents for that particular field, or a value in one of the fields. This file will go into the application in the views folder, in a folder named “byname” and name the file map.js, or using the command line, $couchapp generate view courses byname you will still need to edit the map file in the application as follows

 That is it What this looks for is a JSON document with the field named title, it will then ,gather this document for use. The web interface of Couchdb is an easier way to make views, we will use these the next time.

With that cliffhanger, I will quit. Next time, making the recordedit.js file, the heart of the application.

CouchDB success

It has been a year from my last post, goodness, not a good year, that may be part of it. I have been working with a learning development company for a few months as an interactive developer. Pretty much write code for html courses and work on articulate courses. I was hired to do a MediaWiki site for a major international company. I do some of their web pages too. The other week, I was given an opportunity to develop a site for another company which lists all of their training and is searchable. Simple database, no? No. So my meager MySQL skills were of no use. The programming lingua fraca here are javascript and JQuery, the other developer wanted the output to be a JSON object, and have the database small enough to live anywhere. Soooooo... I did some research and found Couchdb, it is not new and some are moving away from it, but thought I would give it a whirl. What I wanted was a simple input, edit save interface, and the ability to get different readouts of data. Again, nothing too difficult with MySQL, and one would hope not to hard with Couchdb. It turns out to be not too difficult, but getting useful information from most couchdb sites for this project was not easy. The part that was lacking, was how to make an input form. Almost all of the sites wanted you to bulk upload JSON objects to the database. Not going to happen. Most of the examples found were using a command line interface for doing work with the data, not what I wanted. What I will do over a few blog posts is to give simple instructions on how to build this interface and make it work. There are thousands of tutorials on how to install couchdb, so I won't go into that. Before the next post, download and install couchdb and couchapps.