In a Rails application, incoming requests are processed as follows:
- Incoming request is sent to a router.
- The request is divided into parts by the router (parsed) to identify a particular method (action) somewhere in the controller code.
- The router takes the first part as a controller name
- The router takes the second part as a method name (action).
- The action might look at data in the request itself or interact with the model or may invoke another action. Eventually, the action prepares information for the view.
- the view renders something to the user.
In 1979, Trygve Reenskuage created a new architecture for developing interactive applications. In this architecture, applications are broken into three types of components:
- Models.
- Views.
- Controllers
The Model
The model is respoinsible for maintaining the state of the application. However, it’s not just some data, it also contains the rules which enforce all the business rules that apply on that data.
Example
If a discount shouldn’t be applied on orders of less than $20, the model should contain and apply that constraint.
So, including all rules in the model ensure that nothing else in the application can make the data invalid. i.e. the model is acting as a gatekeeper and a data store.
The View
The view is responsible for generating the user interface based on data in the model.
Example
The online store has a list of products to be displayed on a catalog screen. This list will be accessible via the model. However, the view will access the data, format it to be displayed to the user.
It should be noted that the view doesn’t manipulate the incoming data, the view only works on displaying the data.
There may be many views that access the same model data for different purposes.
Example
In the online store, there will be a view that displayes product information on a catalog page and another views to add and edit products. Both views access the same data.
The Controller
The controller controls the overall application. Controllers receive events from the outside world, interact with the model and display the view to the user.
[TECH NOTES] Learn Ruby (Part 1)
May 5, 2008
Introduction
Ruby is a simple language !!
Ruby is Object Oriented
Everything is Ruby is Object-Oriented code, which reflects a real model from real world.
Example
In an online store, u may find many categories, so we define a class to represent each category
Class
- A class is a combination of state and methods that use that state.
- Once class is defined, we can create instances of it which represent a real object.
Object
- Objects are created by calling constructor. A constructor is a special method associated with a class. The standard constructor is called
new.
Example
line_item_one = LineItem.new <– This creates instance line_item_one of class LineItem
Methods
- Within we can define instance methods, each method represents a chunk of functionality that may be called from within the class and from outside the class.
- Methods are invoked by sending messages to an object. the message contains method’s name with parameters the instance need.
Ruby Names
- Local variables, method parameters, and method names should all start with a lowercase letter or underscore
Examples
- order
- line_item
- xr2000
- Instance variables begin with @
- For multiword name, Ruby uses convension to separate each word with underscore (_)
- Class names, module names and constants must start with an uppercase letter.
How to Write Methods
here is an example of method:
def say_goodnight(name)
result = "Good night, " + name
return result
end
to use it:
puts say_goodnight("Ahmed")
Notes:
- No need to semicolon at the end of the statement as each statement is on a separate line.
- comments start with #
There are many howto’s on this subject out there, but since I ended up blending a few of them to get exactly the environment I wanted setup (and took notes so I could repeat this), I thought I’d blog it for future reference, and hopefully this info is useful to others.
So, what exactly do I want: a development and deployment machine with the following specifications:
- A recent Ubuntu Linux, in this case 7.10 (Gutsy Gibbon) [update: I also installed on 8.04, hardy heron beta, with good success]
- Web-App server comprised of apache2, mongrel, ruby on rails, mysql5
- Development environment comprised of Aptana RadRails (based on eclipse), for both Java and Ruby on Rails development (I use Java for other projects, but also plan to do some JRuby work), and since eclipse rocks, I use it for everything I can, even rails. If you don’t want java development, you can use the pure Aptana IDE, but then you also loose out on CVS support, so I don’t remecomend it).
- Some additional libraries for graphics and charting support in the rails apps.
The quickest setup procedure that worked for me, on three very different computers, a Dell Precision 380 desktop, an Acer Aspire 3100 laptop and most recently a Packard Bell quad core workstation, was:
- Install ubuntu. I simply did a standard install from the live cd (downloaded from www.ubuntu.com)
- Update all packages. I usually just click the update icon on the top right of the screen, but you can use synaptic (‘mark all updates’ and then ‘apply’), or apt-get with the following commands:
- sudo apt-get update
- sudo apt-get upgrade
- Install packages required for this setup. I used synaptic, but you could just as easily use ’sudo apt-get install …’:
- sun-java6-jdk (includes a number of other required packages)
- sun-java6-source (optional)
- joe (ok, just my preferred old text editor, you choose what you like)
- flashplugin-nonfree (since I will need that for some sites I view/develop)
- ruby-full (bundles a bunch of ruby packages, including irb, rdoc and ri, but not rake and rubygems, see later for those – do not install them as ubuntu packages now)
- apache2 (provides version 2.2)
- mysql-server (provides version 5.0)
- libsqlite3-dev (required for the gem install of sqlite3-ruby, if you need that)
- build-essential (provides a c/c++ development environment required by some ruby gems which build on install)
- libmysqlclient15-dev (required by the mysql ruby library)
- eclipse (for 3.2 support in ubuntu 7.10 and 8.04) – to get eclipse 3.3 you need to download it from www.eclipse.org.
- Install rubygems from source. This is a contested point, as ubuntu provides rubygems as a package also, but since it is a package management facility itself, it can conflict with the debian package management provided by ubuntu, so it is easiest to keep it completely separate:
- wget http://rubyforge.org/frs/download.php/29548/rubygems-1.0.1.tgz
- tar xzvf rubygems-1.0.1.tgz
- cd rubygems-1.0.1
- sudo ruby setup.rb
- sudo ln -s /usr/bin/gem1.8 /usr/bin/gem # This was not required for rubygems 0.9.4, but is required now on ubuntu with rubygems 1.0.1
- sudo gem update –system # With 0.9.4 I needed to repeat this as the first time gave an error, but with 1.0.1 it worked first time
- Use rubygems to install rails and some other useful gems using the command ’sudo gem install X’ where X is any number of the following (I did all):
- rails # this includes dependencies like rake
- mongrel # for the deployment server
- mongrel_cluster # if you want to try out clustering
- capistrano # if you want to do the easy deployment as described in the ‘agile’ book
- mysql # for mysql database access from ruby
- termios # well, this was mentioned in several blogs and the agile book, so I just did it
- sqlite3-ruby (sqlite3 is now the default database in rails2, so you might need this)
- Add the Aptana Radrails plugins to the eclipse IDE:
- Start eclipse from the applications menu
- Go to menu ‘Help->Software Updates->Find and Install’
- Select ‘Search for new features to install’ and click ‘Next’
- Click ‘New Remote Site’
- Enter name as ‘Apatana’ and URL ‘http://update.aptana.com/install/3.2′ and click OK
- Click ‘New Remote Site’ again
- Enter name as ‘Apatana Radrails’ and URL ‘http://update.aptana.com/install/rails/3.2′ and click OK
- Click ‘finish’ to start the search for updates
- Once the search is complete, you should check both ‘aptana’ and ‘aptana radrails’ and click ‘next’ to install
- Accept the license agreement and click ‘next’ and then ‘finish’ to start the actual download
- When prompted click ‘install all’ to finish the install
- Restart eclipse
- Modify Eclipse to use Java6 (based on http://help.ubuntu.com/community/EclipseIDE). For Ubuntu 8.04, this was not necessary, but I did it for Ubuntu 7.10 and earlier.
- edit /etc/eclipse/java_home and move java6 up in the list so that eclipse uses java6 for running itself (which is faster)
- To get projects inside eclipse to use java6, open eclipse and go to the menu ‘Window->Preferences->Java->JREs’ and select the Java6 JRE.
- Add some extra libraries to rails (optional, depends on your apps):
- I wanted ImageMagick for photo uploads and resizing in my rails apps, so I installed the ubuntu package for ImageMagick using synaptic, and then installed the rubygem ‘mini-magick’. I had tried ‘RMagick’, but the gem did not install, and online help indicates that you need to re-install ImageMagick from source to get RMagick to work, so I opted for the simpler mini-magick.
- For charting support inmy web apps, the popular approach of using ‘gruff’ wrapping ImageMagick seemed to generate a lot of help requests, so I went for the lighter approach of using client side flash as described in the following blog.
- For nicer color control, I installed pdf-writer to get the color-tools gem (and in case I needed pdf-writer itself for future development).
- Once you have created a rails app, using the usual ‘rails myapp’, you should consider adding a number of cool rails plugins. There are a huge number out there. Currently I’m using attachment_fu, will_paginate, acts_as_state_machine, restful_authentication and ext_scaffold. See some of my more recent blogs for some more info on these.
- Miscellaneous. I also changed my ubuntu font sizes down to 9pt on ’system->preferences->appearance’ to get a bit more screen real-estate on the laptop. Windows uses smaller fonts so it looks better (to me), especially when developing in an IDE like eclipse where it is nice to have many panels open together. And for some reason the Ubuntu install had visual effects disabled (Composite extension not available), so I needed to edit /etc/X11/xorg.conf and change the “0″ to a “1″ on the Composite line near the end of the file. And I changed the theme to ‘glossy’ but with ‘human’ icons and darker colors. Looks cool now!
Well, quiet a few steps, but most of the time the computer is downloading packages, updates, plugins and gems from the internet, so you can just lounge around with a good latte
And of course the required screenshot, this one is of the Acer laptop with firefox showing this page and eclipse with a Ruby on Rails application in production.
Next steps – there are lots of blogs out there on setting up production deployments for rails, and here’s one I just read: http://www.urbanpuddle.com/articles/2008/01/09/install-r
[Thanks to Craig
[TECH NOTES] Introduction to Web Development
May 5, 2008
- The internet:
- A connection of computer networks using the internet protocol (IP).
- IP is a simple protocol for attempting to send data between two computers.
- IP address consists of 4 numbers, each of 8 bits.
- An example to IP address is: 192.168.1.5
- TCP adds both multiplexing and guaranteed message delivery on top of IP.
- Multiplexing allows programs to use the same IP address. This can be achieved by introducing ports.
- Port: is a number given to each program or service.
- Programs access network connections using both IP address and port number.
- UDP is another protocol used by some programs like games and streaming media programs.
- DNS is a set of servers that map written names into IP addresses.
- Some operating systems maintain local cache file called hosts file.
- W3C: World Wide Web Consortium, which develop web standards.
- IETF: Internet Engineer Task Force, which develops internet standards.
- ICANN: Internet Corporation for Assigned Names and Number, which decides top-level domain names.
- Web server is a program running on a computer and listens for web page request on TCP port 80.
- Some popular web server software are: Apache and IIS.
- Web browser is a software application that displays web pages.
- Some popular web browser software are: Internet Explorer and Firefox.
- It’s a set of commands understood by a web server and sent from a browser.
- Some HTTP commands are:
- GET filename: for downloading file.
- POST filename: send a web form response.
- PUT filename: to upload file.
- Web servers may return a special “error code” number to the browser and possibly followed by an HTML document.
- Some common error codes are:
- 200: OK
- 301-303: Page moved (permanently or temporarily).
- 403: Forbidden to access this page.
- 404: Page not found.
- 500: Internal server error.
- URL is an identifier for the location of a document on a web site.
- URL consists of:
- Protocol: http://
- Host: www.microsoft.com/
- Path: index.html
- After entering the URL into browser, the browser will:
- Ask DNS for IP address corresponding to the host of the URL.
- Connect to that IP on port 80.
- Ask the server to GET index.html
- Display the resulting page on the screen.
- Anchors: it’s a parameter added to the URL that identifies a given section of a web page.
- Port: it’s a parameter added to the URL that identifies another pot other than the default port 80.
- Query string: It’s a set of parameters passed to a web program. For example, query is sent to search program to perform search and return results.
- Hypertext Markup Language (HTML): It’s a markup language used for writing web pages.
- XHTML: A newer, more rigidly standardized specification of HTML.
- Cascading Style Sheets (CSS): It supplies stylistic information to web pages.
- Javascript: It allows interactive and programmable we pages.
- Asynchronous Javascript and XML (AJAX): It allows fetching web pages in the background for enhanced web interaction.
- PHP Hypertext Processing (PHP): It allows the web server to create pages dynamically.
- Structured Query Language (SQL): Interaction with databases.
What is Internet Protocol?
Transmission Control Protocol (TCP)
What is Multiplexing?
UDP Protocol
Domain Name System (DNS)
Organizations
Web Server
Web Browser
Hypertext Transport Protocol (HTTP)
Uniform Source Locator (URL)
Web Programming Technologies
[TECH NOTES] Hypertext Markup Language (HTML)
May 5, 2008
- HTML describes the content and structure of information on a web page.
- The HTML language is not the same as the presentation (which appears on the screen).
- HTML surrounds text content with opening and closing. (Tags)
- Each tag’s name is called an element.
- Most white space is insignificant in HTML.
- <element>content </element>
- Some tags can contain additonal information called attributes.
- <element attribute=”value” attribute=”value”> content </element>
- Some tags don’t contain contents, so can be written as following:
- <element attribute=”value” attribute=”value” />
- Ex:<img src=”bunny.jpg” />
- Ex: <hr />
Structure of HTML Page
<html>
<head>
Information about the page
</head>
<body>
Page contents
</body>
</html>
- A header describes the page and a body contains the page’s contents
- An HTML page is saved info a file .html
- A newer version of HTML, standardized in 2000, and uses a markup format called XML. Hence (XML + HTML = XHTML).
- Why use XHTML and web standards?
- More rigid and structured language.
- More interoperable across web browsers.
- More likely that our pages will display correctly in the future.
Structure of XHTML page
<!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“>
<head>
information about the page
</head>
<body>
page contents
</body>
</html>
- Page Title: <title>
- Placed within the head of the page.
- Displayed in the browser’s title bar and when bookmarking the page.
- Example: <title>CSE 190 M: HTML</title>
- Block-level and inline elements
- Block-Level:
- An element contain an entire large region of text.
- Examples: paragraphs, lists, table cells.
- The browser places a margin of whitespace between block-level elements for separation.
- Inline:
- An element affect a small amount of text and must be nested inside a block-level element
- Examples: bold text, code fragments, images.
- The browser allows many inline elements to appear on the same line or within the same block-level element.
- Block-Level:
- Paragraph: <p>
- Paragraph of text (block-level)
- Example: <p>You’re not your job.
You’re not how much money you have in the bank.
You’re not the car you drive. You’re not the contents
of your wallet. You’re not your khakis. You’re
the all-singing, all-dancing crap of the world.</p>
- Headings: <h1>, <h2>, … , <h6>
- Headings to separate major areas of the page (block-level)
- Examples: <h1>University of Whoville</h1>
<h2>Department of Computer Science</h2>
<h3>Sponsored by Micro$oft</h3>
- Anchors: <a>
- Anchors denote links to other pages (inline)
- Examples:
- <p>Search
<a href=”http://www.google.com/”>Google</a> now!</p> - Use the href attribute to specify the distination URL.
- Anchors are inline elements, so they must be placed inside a block-level element such a <p> or <h1>
- <p>Search
- Types of URLs that can appear in anchors
- Absolute: to another web site.
- <p>Search <a href=”http://www.google.com/”>Google</a> now!</p>
- Relative: to another page on this website.
- Absolute: to another web site.
<p><a href=”1-internet.html”>Lecture Notes 1</a></p>
- A tooltip can be specified with the title attribute.
- Nesting Tags:
- Tags must be correctly nested.
- The Closing tag must match the most recently opened tag.
- Line Break: <br>
- Line break forces a line break in the middle of a block-level element.
- It’s considered as inline component.
- Example: <p>Teddy said it was a hat, <br />So I put it on. </p>
- <br /> should be immidiatly closed with /
- Horizontal Line: <hr>
- A horizontal line to visually separate sections of a page.
- It’s a block-level component.
- Example:
<p>First Paragraph</p>
<hr />
<p>Second Paragraph</p>
<hr />
- Hr should also be closed with /
- Images: <img>
- Inserts a graphical image into the page.
- It’s an inline component.
- The src attribute specified the image URL.
- XHTML also requires alt attribute describing the image.
- To make an image as a link, place it inside an anchor
- Example:
<p><a href=”http://theonering.net/“>
<img src=”gandalf.jpg” alt=”Gandalf from LOTR”
title=”You shall not pass!” /></a></p>
- The title attribute specifies an optional tooltip
- Comments: <!–…–>
- Comments to document HTML file or “comment out” text
- Unordered list: <ul>, <li>
- Ul represents a bulleted list of items (block-level)
- Li represents a single item within the list (block-level)
- Example:
<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
</ul>
- List of lists:
<ul>
<li>Simpsons:
<ul>
<li>Bart</li>
<li>Lisa</li>
</ul>
</li>
<li>Family Guy:
<ul>
<li>Peter</li>
<li>Lois</li>
</ul>
</li>
</ul>
- Ordered List: <ol>
- Ol represents a numbered list of items (block-level).
- Example:
<p>RIAA business model:</p>
<ol>
<li>Sell music on easily copyable discs</li>
<li>Sue customers for copying music</li>
<li>???</li><li>Profit!</li></ol>
