Posts Tagged ‘clojure’
Introduction to Clojure Web Development using Ring, Compojure and Sandbar
I gave an introduction to clojure web development presentation to bay area clojure user group. As my slides do not have much information, I am writing this blog so everyone can follow and get started with a sample clojure web application using compojure.
Setting Up:
lein new address_book
Add Compojure to Project:
Edit project.clj
(defproject address_book "1.0.0-SNAPSHOT"
:description "Runnering log"
:dependencies [[org.clojure/clojure "1.2.0"]
[org.clojure/clojure-contrib "1.2.0"]
[ring/ring-jetty-adapter "0.2.5"]
[compojure "0.4.1"]
[hiccup "0.2.6"]
[sandbar "0.3.0-SNAPSHOT"]
[clj-json "0.3.1"]]
:dev-dependencies [[swank-clojure "1.3.0-SNAPSHOT"]])
Run
lein deps
Test whether our setup works:
Edit src/address_book/core.clj
(ns address-book.core
(:use [compojure.core]
[ring.adapter.jetty])
(:require [compojure.route :as route]))
(defroutes rts
(GET "/" [] "Address Book!!")
(route/not-found "Page not found"))
(def application-routes
rts)
(defn start []
(run-jetty application-routes {:port 8080
:join? false}))
Goto http://localhost:8080 and you should see “Address Book”
Interactive Development:
In core.clj, change start function to
(defn start []
(run-jetty application-routes {:port 8080
:join? false}))
Add Static Folders:
mkdir -p public/{css,js}
Create public/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My Address book</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body id="main">
<p> My Address Book </p>
<body>
</html>
Try to access http://localhost:8080/index.html. This will fail, as we never told compojure how to handle static files.
Edit core.clj and replace rts
(defroutes rts (GET "/" [] "Address Book!!") (route/files "/") (route/not-found "Page not found"))
Now when you access http://localhost:8080/index.html, it should display correctly.
Ring:
Three components
1) Handlers:
Handlers are main functions that process a request. We define handlers using defroutes macro.
2) Middleware:
Middleware are functions that could be chained together to process a request. Middleware functions can take any number of arguments, but the spec stats that first argument should be an handler and function should return an handler. An example for middleware is logging all requests that comes to your webserver. Ring and compojure comes with some standard middleware. We will see in next part how to create our own middleware.
3) Adapters:
Adapters are functions could adapt our handler to a web server. We are using jetty adapter to tie our handler to jetty server.
Lets create our Middleware:
Create src/address_book/middleware.clj
(ns address-book.middleware)
(defn- log [msg & vals]
(let [line (apply format msg vals)]
(locking System/out (println line))))
(defn wrap-request-logging [handler]
(fn [{:keys [request-method uri] :as req}]
(let [resp (handler req)]
(log "Processing %s %s" request-method uri)
resp)))
Edit core.clj ns form
(ns address-book.core
(:use [compojure.core]
[ring.adapter.jetty])
(:require [compojure.route :as route]
[address-book.middleware :as mdw]))
Edit core.clj application-routes def
(def application-routes
(-> rts
mdw/wrap-request-logging))
Now when you access your server, you should see request log messages.
Main sourcecode:
Create address_book/address.clj
(ns address-book.address
(:import [java.util Date])
(:refer-clojure :exclude (find create)))
(def STORE (atom {:1 {:id :1 :name "Siva Jagadeesan" :street1 "88 7th" :street2 "#203" :city "Cupertino" :country "USA" :zipsourcecode 98802}}))
(defn to-keyword [num]
(if-not (keyword? num)
(keyword (str num))
num))
(defn random-number []
(to-keyword (.getTime (Date.))))
(defn create [attrs]
(let [id (random-number)
new-attrs (merge {:id id} attrs)]
(swap! STORE merge {id new-attrs})
new-attrs))
(defn find-all []
(vals @STORE))
(defn find [id]
((to-keyword id) @STORE))
(defn update [id attrs]
(let [updated-attrs (merge (find id) attrs)]
(swap! STORE assoc id updated-attrs)
updated-attrs))
(defn delete [id]
(let [old-attrs (find id)]
(swap! STORE dissoc id)
old-attrs))
Edit core.clj ns form
(ns address-book.core
(:use [compojure.core]
[ring.adapter.jetty])
(:require [compojure.route :as route]
[address-book.middleware :as mdw]
[address-book.address :as address]
[clj-json.core :as json]))
Add this function to core.clj
(defn json-response [data & [status]]
{:status (or status 200)
:headers {"Content-Type" "application/json"}
:body (json/generate-string data)})
Add these routes to core.clj
(GET "/addresses" [] (json-response (address/find-all)))
(GET "/addresses/:id" [id] (json-response (address/find id)))
(POST "/addresses" {params :params} (json-response (address/create params)))
Replace your public folder with https://files.me.com/sivajag/sh35fq
This folder has needed css and js files.
Now go to http://localhost:8080/index.html and you should see a address book webapp. You can add and view addresses.
Authentication:
Create src/address_book/auth.clj
(ns address-book.auth
(:use [sandbar.form-authentication ]
[sandbar.validation]))
(defrecord AuthAdapter []
FormAuthAdapter
(load-user [this username password]
(cond (= username "example")
{:username "example" :password "password" :roles #{:user}}))
(validate-password [this]
(fn [m]
(if (= (:password m) "password")
m
(add-validation-error m "Unable to authenticate user.")))))
(defn form-authentication-adapter []
(merge
(AuthAdapter.)
{:username "Username"
:password "Password"
:username-validation-error "You must supply a valid username."
:password-validation-error "You must supply a password."
:logout-page "/"}))
Edit core.clj ns form
(ns address-book.core
(:use [compojure.core]
[ring.adapter.jetty]
[sandbar.auth]
[sandbar.form-authentication ]
[sandbar.validation ])
(:require [compojure.route :as route]
[address-book.middleware :as mdw]
[address-book.address :as address]
[address-book.auth :as auth]
[clj-json.core :as json]))
Add this def to core.clj
(def security-policy
[#".*\.(css|js|png|jpg|gif|ico)$" :any
#"/login.*" :any
#"/logout.*" :any
#"/permission-denied.*" :any
#"/addresses" :user
#"/index.html" :user
#"/" #{:user}])
Add this route to core.clj
(form-authentication-routes (fn [_ c] (html c)) (auth/form-authentication-adapter))
Change application routes function in core.clj
(def application-routes
(-> rts
(with-security security-policy form-authentication)
wrap-stateful-session
mdw/wrap-request-logging))
Now when you access http://localhost:8080/index.html it will take you to login page. You can login using “example” and “password”.
That is it folks. A simple web app using clojure.
I am sure this blog could be improved a lot. Please leave comments I will update this blog with your feedback.
Clojure – good coding guidelines
Naming :
- only lower case letters separated by hyphens except types and protocols should be named in camelcase
- predicates ends with ?
- destructive functions ends with !
- variables that are meant for be re-binding should have earmuffs
- use “_” for names that will be ignored by the code
Code Structure :
- when there is only “then” clause in a conditional statement use “when” instead of “if”
- put all trailing parenthesis in one line
- for dependency use “:only” for “use” and “require”
- use two spaces for indentation
- destructure arg list only when you want to explain the structure of arg to caller otherwise destructure in first let binding
Coding Style:
- try to solve a problem by using function before trying with macro
- be lazy when possible
- use keywords as keys for map entries
- use keyword-first syntax to access properties on objects
- prefer sequence library functions instead of loop/recurr
- only use anonymous functions for short function definitions that fit comfortably on a single line. Otherwise create a private, named function.
- short functions
Clojure defrecord deftype
There are different ways to create a struct in clojure.
1) Using Clojure built in data structures
user> (def lotr {:title "Book title"
:author {
:first-name "first"
:last-name "last"}})
#'user/lotr
keyword-access
user> (:title lotr) "Book title"
nested-access
user> (-> lotr :author :first-name) "first"
2) Using defrecord
user> (defrecord Book [title author])
user.Book
user> (defrecord Person [first-name last-name])
user.Person
user> (def lotr (Book. "Book Title"
(Person. "first" "last")))
#'user/lotr
keyword-access
user> (:title lotr) "Book title"
nested-access
user> (-> lotr :author :first-name) "first"
As you can see, accessing map and defrecord is very similar. defrecord provides implementation of a persistent map.
3) Using deftype
PS: bad example ( I will explain why later )
user> (deftype Book [title author])
user.Book
user> (deftype Person [first-name last-name])
user.Person
user> (def lotr (Book. "Book Title"
(Person. "first" "last")))
#'user/lotr
Unlike defrecord, deftype does not provide implementation of a persistent map. So when you try to keyword-access , it won’t work
keyword-access
user> (:title lotr) nil
It provides field access only
user> (.title lotr) "Book Title"
I mentioned the above example for deftype is a bad example. Let me explain why. In OO, we have two set of classes. One set that defines language constructs like String and other that defines domain like Book. As defrecord provides implementation of a persistent map, it is better to use defrecord for realizing domain. Use deftype for realizing programming constructs.
Testing Clojure Code – Awesome “are”
test-is a great library for testing clojure. Thanks to Philippe, I recently discover “are” in test-is. This is most underrated/underused macro in test-is library.
Lets take an example, where I want to test a function given a date, it will return end of month.
Without are,
(deftest test-end-of-month
(is (= "2010-01-31 23:59" (end-of-month "2010-01-03 01:12")))
(is (= "2010-01-31 23:59" (end-of-month "2010-01-03 21:59")))
(is (= "2010-02-28 23:59" (end-of-month "2011-02-03 13:01")))
(is (= "2016-02-29 23:59" (end-of-month "2016-02-03 03:01")))
(is (= "2011-04-30 23:59" (end-of-month "2011-04-03 00:02"))))
With are,
(deftest test-end-of-month
(are [expected ts] (= expected (end-of-month ts))
"2010-01-31 23:59" "2010-01-03 01:12"
"2010-01-31 23:59" "2010-01-03 21:59"
"2011-02-28 23:59" "2011-02-03 13:01"
"2016-02-29 23:59" "2016-02-03 03:01"
"2011-04-30 23:59" "2011-04-03 00:02"))
The version without “are” has, so many duplications. It is difficult to read as it is cluttered. The version with “are” is easy to read, and it is so easy to add more test cases without much duplication.
Thanks Philippe for introducing me to wonders of “are”.
Calling java from Clojure
Importing Java Class
In repl, when you want to import one Java class you can do
(import 'java.util.Date)
When you want to import more Java classes from a same package you can do
(import [java.util Date HashMap])
(ns com.techbehindtech.java
(:import [java.util Date HashMap]))
Creating Instances
(import 'java.util.Date) (def today (new Date)) ;; or (def today (Date.))
Calling Java instance methods
user> (import 'java.util.Date)
java.util.Date
user> (let [today (Date.)]
(.getTime today))
1286749020847
Calling Java static methods
user> (System/currentTimeMillis) 1286847946813
Sugar sytax:
Doto:
You want to write a function that will return UTC Java Calendar object set at a specific time.
user> (import [java.util Calendar TimeZone Date])
user> (defn utc-time [d]
(let [cal (Calendar/getInstance)]
(.setTimeZone cal (TimeZone/getTimeZone "UTC"))
(.setTime cal d)
cal))
#'user/utc-time
The let block is ugly. We could use doto to make this code better.
user> (import [java.util Calendar TimeZone Date])
user> (defn utc-time [d]
(doto (Calendar/getInstance)
(.setTimeZone (TimeZone/getTimeZone "UTC"))
(.setTime d)))
#'user/utc-time
Dot Dot:
Sometimes in java you want to make calls in chain
Bad way
user> (.length (.getProperty (System/getProperties) "user.country")) 2
Better way
user> (. (. (System/getProperties) getProperty "user.country") length) 2
Even Better
user> (..
(System/getProperties)
(getProperty "user.country")
(length))
2
Avoiding Reflection
By default jvm will be using reflection to identify type. Reflection is slow. But we can give type hints that way jvm does not have to use reflection. For example we can rewrite utc-time with type-hints like this
user> (set! *warn-on-reflection* true) true user> (defn str-length [s] (.length s)) Reflection warning, NO_SOURCE_FILE:1 - reference to field length can't be resolved. #'user/str-length user> (defn str-length [#^String s] (.length s)) #'user/str-length
Implementing interfaces and extending classes
Let us implement Java Runnable interface
user> (proxy [Runnable] []
(run []
(println "running ...")))
#<Object$Runnable$36fc6471 user.proxy$java.lang.Object$Runnable$36fc6471@6dd33544>
In clojure 1.2, you could use reify macro to implement. In fact it is better than using proxy.
user> (reify Runnable
(run [this]
(println "running ...")))
#<user$eval1664$reify__1665 user$eval1664$reify__1665@574f7121>
Clojure Macros Simplified
One of the powerful features of clojure ( or any other LISP) is macros. Macros are so powerful that will allow you do things that you can never do in any other language. There is a classic example of implementing “unless” functionality using macros. I am not going to talk about why we need macros and when to use them. There is so much literature out there discussing about Macros. Also checkout Clojure in Action book for in depth look on Macros. I have read both Joy of Clojure and Clojure in Action, when it comes to Macros I will recommend Clojure in Action. The idea behind this blog to simplify macros as much as possible.
As you know in Clojure code is data and data is code. Our code is a clojure List. So we can programmatically create a list and execute it.
user> (def my-code '(println "techbehindtech")) #'user/my-code user> my-code (println "techbehindtech") user> (eval my-code) techbehindtech
In above example, we created a list my-code. This list could be created dynamically. And using eval function we could execute that list as a clojure code.
So to create code in clojure, all we have to do is create a clojure list. In clojure, before a code is evaluated we have hook to introduce our own code using Macros system.
In Macros we are basically creating a list of code similar to my-code. Lets create a simple macro that will allow us to write functions with some log message.
(defmacro def-logged-fn [fn-name args & body]
`(defn ~fn-name ~args
(println "Calling ...")
~@body))
user> (def-logged-fn say[name]
(println (str "hello " name)))
#'user/say
user> (say "siva")
Calling ...
hello siva
nil
macroexpand and macroexpand-1:
macroexpand and macroexpand-1 are useful functions to know about when using
writing macros. These functions expand our macro forms.
user> (macroexpand-1 '(def-logged-fn say[name]
(println (str "hello " name))))
(clojure.core/defn
say
[name]
(clojure.core/println "Calling ...")
(println (str "hello " name)))
You can see that our macro created a fn called “say” that calls println first before the original body. That is pretty cool huh.
The difference between macroexpand-1 and macroexpand is macroexpand-1
will expand only one level of macros and macroexpand calls macroexpand-1
until all macro forms are expanded.
The same macro expanded with macroexpand will look like
(macroexpand '(def-logged-fn say[name]
(println (str "hello " name))))
(def
say
(clojure.core/fn
([name]
(clojure.core/println "Calling ...")
(println (str "hello " name)))))
As you can see macroexpand expanded defn macro also.
Coming back to our macro, there are 3 reader macros that we have used
- Backtick `
- Tilda ~
- Tilda Ampersand ~@
Backtick ` (syntax-quote):
This is called as syntax-quote. This quotes the whole expression that way you do not have to quote each one of them
Tilda ~ (unquote):
This is called as unquote. This unquotes (substitutes) the value. For
instance, we wanted to replace fn-name with its value, so we tilda
before fn-name.
Tilda Ampersand ~@ (unquote-splicing):
It is easy to show with an example. Lets take our macro that we wrote and change unquote-splicing to unquote before body and let us what happens.
user> (defmacro def-logged-fn [fn-name args & body]
`(defn ~fn-name ~args
(println "Calling ...")
~body))
#'user/def-logged-fn
user> (macroexpand-1 '(def-logged-fn say[name]
(println (str "hello " name))))
(clojure.core/defn
say
[name]
(clojure.core/println "Calling ...")
((println (str "hello " name))))
You can see the last line looks wierd. It is trying to call output of
println as a function. This will obiviously fail.
user> (def-logged-fn say[name]
(println (str "hello " name)))
#'user/say
user> (say "techbehindtech")
Calling ...
hello techbehindtech
; Evaluation aborted.
No message.
[Thrown class java.lang.NullPointerException]
As body is a list ( we are using varible args) when we just unquote it
is putting body inside a single list. To avoid that we have to
unquote-splicing.
Auto-gensym
Inside a macro, sometimes you want to create unqualified symbol to use
in a let block. We can do this easily by appending # in end of symbol.
Compojure Demystified with an example – Part 6
In this part we will start implementing edit and delete functionalities.
We are going to build these services,
Edit address – PUT – http://localhost:8080/addresses/:id
Delete address – DELETE – http://localhost:8080/addresses/:id
1) Adding PUT and DELETE route
Edit routes.clj
(ns address_book.routes
(:use [compojure.core])
(:require [address-book.address :as address]
[address-book.middleware :as mdw]
[compojure.route :as route]
[clj-json.core :as json]))
(defn json-response [data & [status]]
{:status (or status 200)
:headers {"Content-Type" "application/json"}
:body (json/generate-string data)})
(defroutes handler
(GET "/addresses" [] (json-response (address/find-all)))
(GET "/addresses/:id" [id] (json-response (address/find id)))
(POST "/addresses" {params :params} (json-response (address/create params)))
(PUT "/addresses/:id" {params :params} (json-response (address/update (params "id") params)))
(DELETE "/addresses/:id" [id] (json-response (address/delete id )))
(route/files "/" {:root "public"})
(route/not-found "Page not found"))
(def address-book
(-> handler
mdw/wrap-request-logging))
As you can see it is pretty straight forward to add PUT and DELETE route.
What is up with params?
In previous version of Compojure there were some magic variables, like params, session etc. From version 0.4 there are no more magic variables. Instead Compojure provides a map “params”. “params” map will contain all request information. For some reason, params map have a key :params which contains request parameters. That is why we have do {params :params}. I wish they will rename “params” to something else.
Instead of doing {params :params}, the compojure document states that we could do [params id] and when compojure detects a vector, instead of a map it will assign the parameters to each value of the vector. But for some reason, I was not able to make it work.
Front End code
Checkout from github for front end code. Warning: front end code is bad, do not take this as an example.
In next part we will see how to send flash messages.
Source code is now available at github. Created branches for each part.
Next part is posted.
MQL – A Clojure library for querying Nested Maps
I was working on a feature that needed me to query nested map structure. I wanted to do it in a generic way. Amit pointed me to rql, a library for dealing with collections of records in clojure. I thought it will be helpful if I have something similar to rql for querying map, so I created mql.
Given a map
(def m
{:cid
{
:visits {
:id-1 {
:last-ts "1284166000040"
:first-ts "1274166000000"
:duration "40"}
:id-2 {
:last-ts "1274166000040"
:first-ts "1274166000000"
:duration "40"}
:id-3 {
:last-ts "1264166000040"
:first-ts "1274166000000"
:duration "40"}}
:promo{
:id-1 {:promo "p2"}
:id-2 {:promo "p1"}}
:purchase {
:id-1
{:order-id "order-id-1"
:total-dollars "970.00"
:purchase? "true",
:merchant-total-dollars "1000.00"}
:id-3
{:order-id "order-id-2"
:total-dollars "1000.00"
:purchase? ""
:merchant-total-dollars "1000.00"}}}})
Select: simple select
mql.core> (select [:cid :promo] m)
{:id-1 {:promo "p2"}, :id-2 {:promo "p1"}}
Select: with filtering
mql.core> (select [:cid :purchase] (where [* :total-dollars] :gt 980) m)
([:id-3 {:order-id "order-id-2", :total-dollars "1000.00", :purchase? "", :merchant-total-dollars "1000.00"}])
You can currently use :gt,:ge,:lt,:le and :eq as logical operators in where clause. In where clause for key-seq you can use * if a key is dynamic. The last key in where clause key-seq should not be *.
Limitations:
- There could be only one * in Where Clause
- Select clause cannot have * now
This is an early version of this library. It is doing what I need for now. So if you have any requirements/idea, you can send me a patch or let me know, I will hack when I get some free time.
Please feel free to send me your feedback on syntax, code style … etc
Compojure Demystified with an example – Part 5
In this part lets write our own middleware.
From part4 you will remember,
“Middleware are functions that could be chained together to process a request. Middleware functions can take any number of arguments, but the spec stats that first argument should be a handler and function should return a handler. An example for middleware is logging all requests that comes to your webserver.”
1) Create a namespace for middleware
Create src/address_book/middleware.clj
(ns address-book.middleware)
(defn- log [msg & vals]
(let [line (apply format msg vals)]
(locking System/out (println line))))
(defn wrap-request-logging [handler]
(fn [{:keys [request-method uri] :as req}]
(let [resp (handler req)]
(log "Processing %s %s" request-method uri)
resp)))
Our wrap-request-logging is a middleware which takes a handler and returns an handler.
2) Add our middleware to our chain of handlers
Edit routes.clj
(ns address_book.routes
(:use [compojure.core])
(:require [address-book.address :as address]
[address-book.middleware :as mdw]
[compojure.route :as route]
[clj-json.core :as json]))
(defn json-response [data & [status]]
{:status (or status 200)
:headers {"Content-Type" "application/json"}
:body (json/generate-string data)})
(defroutes handler
(GET "/addresses" [] (json-response (address/find-all)))
(GET "/addresses/:id" [id] (json-response (address/find id)))
(POST "/addresses" {params :params} (json-response (address/create params)))
(route/files "/" {:root "public"})
(route/not-found "Page not found"))
(def address-book
(-> handler
mdw/wrap-request-logging))
3) Test our middleware
Now start your server and you can see all requests are getting logged. This is very powerful feature. We can do security etc using middleware. Ring and Compojure comes with some useful middleware. Check them out.
In next part we will implement edit and delete functionalities.
Source code is now available at github. Created branches for each part.
Compojure Demystified with an example – Part 4
In this part we will start implementing Add, View and View all functionalities.
The services we are going to build are
View All Addresses – GET – http://localhost:8080/addresses
View single address – GET – http://localhost:8080/addresses/:id
Add Address – POST – http://localhost:8080/addresses
Interactive Development using slime
I mentioned in last part that after every change to our code we need to restart our server for our changes to be reflected. This is a pain and against clojure (lisp) philosophy . It would be great if we could eval our modified buffers in emacs and those changes reflected immediately in our jetty server. Thankfully there is very easy way to do this.
In core.clj we are starting jetty adapter. We can start this jetty server in background using future and reload the namespace that we changed. This way we can do interactive development without restarting our server.
PS: Make sure you have emacs setup with slime. I feel emacs is the best IDE for clojure. Again this is my opinion. There are lot of information on how to do this.
I talked about jetty adapter. It is time for us to look at some what little deeper in Compojure.
Compojure
Compojure is based on a library called Ring. In fact most of clojure web frameworks are based on Ring. So to understand Compojure, it is important to understand Ring.
Ring has three components.
1) Handlers:
Handlers are main functions that process a request. We define handlers using defroutes macro.
2) Middleware:
Middleware are functions that could be chained together to process a request. Middleware functions can take any number of arguments, but the spec stats that first argument should be an handler and function should return an handler. An example for middleware is logging all requests that comes to your webserver. Ring and compojure comes with some standard middleware. We will see in next part how to create our own middleware.
3) Adapters:
Adapters are functions could adapt our handler to a web server. We are using jetty adapter to tie our handler to jetty server.
Refactor code to make it easy for interactive development
Edit core.clj
(ns address_book.core
(:use [compojure.core]
[ring.adapter.jetty])
(:require [compojure.route :as route]))
(defroutes example
(GET "/" [] "<h1>My Address Book!</h1>")
(route/files "/" {:root "public"})
(route/not-found "Page not found"))
(future (run-jetty (var address-book) {:port 8080}))
1) Add swank-clojure to our project
swank-clojure comes with lein plugin which will allow us to start a swank server and from emacs you can connect using slime. There are lot of documentation about swank-clojure and slime. Let me know if you need more information. If I see enough interest, I could blog about it or at least point to some good resources.
Edit project.clj
(defproject address_book "1.0.0-SNAPSHOT"
:description "Address Book"
:dependencies [[org.clojure/clojure "1.2.0"]
[org.clojure/clojure-contrib "1.2.0"]
[compojure "0.4.1"]
[ring/ring-jetty-adapter "0.2.3"]]
:dev-dependencies [[swank-clojure "1.2.1"]])
and run
lein deps
Now you should be able to start swank server using
lein swank
2) Break core.clj into different namespaces
Current core.clj is doing two things. Setting up routes and starting jetty server. Lets break it into web_server.clj and routes.clj
rm src/address_book/core.clj
create src/address_book/routes.clj
(ns address_book.routes
(:use [compojure.core])
(:require [compojure.route :as route]))
(defroutes address-book
(GET "/" [] "<h1>My Address Book!</h1>")
(route/files "/" {:root "public"})
(route/not-found "Page not found"))
create src/address_book/webserver.clj
(ns address_book.webserver
(:use [compojure.core]
[ring.adapter.jetty]
[address_book.routes :as routes]))
(future (run-jetty (var address-book) {:port 8080}))
3) At last lets create our Address namespace
In this code, I am going to use atoms for persistence. In future I will probably show how we can persist in mysql db using clj-records.
create src/address_book/address.clj
(ns address-book.address
(:use [address-book.utils number])
(:refer-clojure :exclude (find create)))
(def STORE (atom {:1 {:id :1 :name "Siva Jagadeesan" :street1 "88 7th" :street2 "#203" :city "Cupertino" :country "USA" :zipcode 98802}}))
(defn create [attrs]
(let [id (random-number)
new-attrs (merge {:id id} attrs)]
(swap! STORE merge {id new-attrs})
new-attrs))
(defn find-all []
(vals @STORE))
(defn find [id]
((to-keyword id) @STORE))
(defn update [id attrs]
(let [updated-attrs (merge (find id) attrs)]
(swap! STORE assoc id updated-attrs)
updated-attrs))
(defn delete [id]
(let [old-attrs (find id)]
(swap! STORE dissoc id)
old-attrs))
Create utils/number.clj
(ns address-book.utils.number
(:import [java.util Date]))
(defn to-keyword [num]
(if-not (keyword? num)
(keyword (str num))
num))
(defn random-number []
(to-keyword (.getTime (Date.))))
PS: I am not writing tests to keep this blog short. But I would advice everyone to write tests.
4) Lets update routes for add, view and view all functionalities
</span>
<pre>(ns address_book.routes
(:use [compojure.core])
(:require [address-book.address :as address]
[compojure.route :as route]
[clj-json.core :as json]))
(defn json-response [data & [status]]
{:status (or status 200)
:headers {"Content-Type" "application/json"}
:body (json/generate-string data)})
(defroutes handler
(GET "/addresses" [] (json-response (address/find-all)))
(GET "/addresses/:id" [id] (json-response (address/find id)))
(POST "/addresses" {params :params} (json-response (address/create params)))
(route/files "/" {:root "public"})
(route/not-found "Page not found"))
(def address-book
handler)
Compojure comes with GET, POST, PUT, DELETE, HEAD and ANY macro to define routes. These macros are self explanatory. Currently we have used GET and POST to define our routes.
Parsing Parameters
Compojure binds request parameters to params.
To get all parameters from request you can destructure map like we did in
POST "/addresses" {params :params} (json-response (address/create params)))
To get particular parameters from request you can use Compojure sugar syntax like we did in
[sourceode](GET “/addresses/:id” [id] (json-response (address/find id)))[/sourcecode]
5) Lets build our front end
PS: front end code is a hack. Please don’t follow these codes as a good practice.
Edit public/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Address Book</title>
<link href="/css/address.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="/js/jquery.form.js" type="text/javascript"></script>
<script src="/js/address_book.js" type="text/javascript"></script>
<script src="/js/address_list.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<div id="header"><h1>My Address Book</h1></div>
<div id="main">
<table id="address">
<tr><td>Name</td><td id="name"/></tr>
<tr><td>Street1</td><td id="street1"/></tr>
<tr><td>Street2</td><td id="street2"/></tr>
<tr><td>City</td><td id="city"/></tr>
<tr><td>Country</td><td id="country"/></tr>
<tr><td>ZipCode</td><td id="zipcode"/></tr>
</table>
<table id="address-list" border="1" width="100%" rules="rows" align="center">
<tr>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td >row 1, cell 1</td>
<td align="center">row 1, cell 2</td>
</tr>
</table>
</div>
<div id="sidebar">
<form id="address-form" class="formular" method="post" action="/addresses">
<fieldset class="login">
<legend>New Address</legend>
<div>
<label for="name">Name</label> <input type="text" id="name" name="name">
</div>
<div>
<label for="street1">Street1</label> <input type="text" id="street1" name="street1">
</div>
<div>
<label for="street2">Street2</label> <input type="text" id="street2" name="street2">
</div>
<div>
<label for="city">City</label> <input type="text" id="city" name="city">
</div>
<div>
<label for="country">Country</label> <input type="text" id="country" name="country">
</div>
<div>
<label for="zipcode">ZipCode</label> <input type="text" id="zipcode" name="zipcode">
</div>
<input class="submit" type="submit" value="Create"/>
</fieldset>
</form>
</div>
<div id="footer">
<p><a href="TechbehindTech.com">TechBehindTech</a> -- Siva Jagadeesan</p>
</div>
</div>
</body>
</html>
Create public/css/address.css
body,html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrap {
width:970px;
margin:0 auto;
background: #fffeff;
}
#header {
padding:5px 10px;
background: #054477;
text-align: right;
color: #fffeff;
}
h1 {
margin:0;
}
#main {
float:left;
width:580px;
padding:10px;
background-color: #fffeff;
}
h2 {
margin:0 0 1em;
background-color: #fffeff;
}
#sidebar {
float:right;
width:350px;
padding:10px;
background-color: #fffeff;
}
#footer {
clear:both;
padding:5px 10px;
background: #fed47f;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
form * {margin:0;padding:0;} /* Standard margin and padding reset, normally done on the body */
legend {
color:#000; /* IE styles legends with blue text by default */
*margin-left:-7px;
font-weight: bold;
font-size: 20px;
}
fieldset {
border:1px solid #dedede; /* Default fieldset borders vary cross browser, so make them the same */
}
fieldset div {
overflow:hidden; /* Contain the floating elements */
display:inline-block;
padding: 10px;
}
fieldset div {display:block;} /* Reset element back to block leaving layout in ie */
label {
float:left; /* Take out of flow so the input starts at the same height */
width:8em; /* Set a width so the inputs line up */
}
Create public/js/address_book.js
$(document).ready(function() {
$("#address").hide();
$("#address-list").showAddressList();
$(".address-link").live("click",function(e){
$.getJSON($(this).attr("href"), function(json) {
$("#address").showAddress(json);
});
e.preventDefault();
});
$('#address-form').submit(function(event){
event.preventDefault();
var $this = $(this);
var url = $this.attr('action');
var dataToSend = $this.serialize();
var callback = function(data){
$("#address-list").addAddress(data);
};
var options = {
success: callback,
url: url,
type: "POST",
dataType: "json",
clearForm: true
};
$(this).ajaxSubmit(options);
});
});
Create public/js/address_list.js
function action_links(data){
var link = "<a href=\"\">edit</a> ";
link += " | <a href=\"\">delete</a>";
return "edit | delete";
}
$.fn.showAddressList = function(){
return this.each(function(){
var that = this;
$.getJSON("addresses", function(json) {
$(that).html(" <tr> <th>Name</th> <th>Action</th> </tr>");
$.each(json,function(i,data) {
$(that).append("<tr id=\"address-"+ data.id +" \"><td><a class=\"address-link\" href=\"addresses/" + data.id +"\">" + data.name + "</a></td><td align='center'>" + action_links(data) + "</td></tr>");
});
});
});
};
$.fn.addAddress = function(json){
var data = json;
var that = this;
return this.each(function(){
var that = this;
$(that).append("<tr id=\"address-"+ data.id +" \"><td><a class=\"address-link\" href=\"addresses/" + data.id +"\">" + data.name + "</a></td><td align='center'>" + action_links(data) + "</td></tr>");
});
};
$.fn.showAddress = function(json){
var data = json;
var that = this;
return this.each(function(){
$(that).slideDown('slow');
$(that).find("#name").html(data.name);
$(that).find("#street1").html(data.street1);
$(that).find("#street2").html(data.street2);
$(that).find("#city").html(data.city);
$(that).find("#country").html(data.country);
$(that).find("#zipcode").html(data.zipcode);
});
};
Download jquery-1.4.2.min.js, jquery-ui-1.8.1.custom.min.js and jquery.form.js to public/js folder.
6) Start the web server
[/sourcecode]lein repl src/address_book/webserver.clj [/sourceode]
Wow that was lot of stuff. We will look more into writing our own middlewares in next part.
Source code is now available at github. Created branches for each part.
Part 5 is posted.
