Saturday, March 11, 2017

Ruby on Rails 2.1 - Preliminary

Before we ride on Rails, let's understand a little about Ruby Programming Language which is the base of Rails.

What is Ruby?

Ruby is a interpreted programming language developed by Yukihiro Matsumoto in 1995 and today Ruby is the fastest growing language.
Ruby is the successful combination of −

Ruby on Rails 2.1 - Introduction

Pre-Requisite

Before you start Ruby on Rails please make sure you have basic understanding on the following subjects −
  • Basic Ruby syntax and language constructs such as blocks.
  • Basic understanding of relational databases and SQL.
  • Basic understanding of HTML documents and CSS.

Ruby on Rails 2.1 - Installation

To develop a web application using Ruby on Rails Framework, you would need to install the following software −
  • Ruby
  • The Rails framework
  • A Web Server
  • A Database System

Ruby on Rails 2.1 - Framework

A framework is a program, set of programs, and/or code library that writes most of your application for you. When you use a framework, your job is to write the parts of the application that make it do the specific things you want.
When you set out to write a Rails application, leaving aside configuration and other housekeeping chores you have to perform three primary tasks −

Ruby on Rails 2.1 - Dir Structure

When you use the rails' helper script to create your application, it creates the entire directory structure for your application. Rails knows where to find things it needs within this structure, so you don't have to tell it explicitly.

Ruby on Rails 2.1 - Examples

Subsequent chapters are based on the example taken in this chapter. In this example we will create something simple but operational online library system for holding and managing the books.
Now you have to be patient till you go through next few chapters. I'm sure after completing this tutorial you will have complete understanding on Rails.

Ruby on Rails 2.1 - Database Setup

Before starting with this chapter, make sure your database server is setup and running well. Ruby on Rails recommends to create three databases. A database for each development, testing and production environment. According to convention their names should be −

Ruby on Rails 2.1 - Active Records Models

Rails Active Record is the Object/Relational Mapping (ORM) layer supplied with Rails. It closely follows the standard ORM model, which is as follows −
  • tables map to classes
  • rows map to objects of those classes
  • columns map to object attributes

Ruby on Rails 2.1 - Migrations

Rails Migration allows you to use Ruby to define changes to your database schema, making it possible to use a version control system to keep things synchronized with the actual code.
This has many uses, including −

Ruby on Rails 2.1 - Controllers

The Rails controller is the logical center of your application. It coordinates the interaction between the user, the views, and the model. The controller is also a home to a number of important ancillary services.
  • It is responsible for routing external requests to internal actions. It handles people-friendly URLs extremely well.

Ruby on Rails 2.1 - Views

A Rails View is an ERb program that shares data with controllers through mutually accessible variables.
If you look in the app/views directory of the library application, you will see one subdirectory for each of the controllers we have created (book). Each of these subdirectories was created automatically when the same-named controller was created with the generate script.

Ruby on Rails 2.1 - Layouts

A layout defines the surroundings of an HTML page. It's the place to define common look and feel of your final output. Layout files reside in app/views/layouts subdirectory.
The process involves defining a layout template and then letting the controller know that it exists and to use it. First, let's create the template.

Ruby on Rails 2.1 - Scaffolding

While you're developing Rails applications, especially those which are mainly providing you with a simple interface to data in a database, it can often be useful to use the scaffold method.
Scaffolding provides more than cheap demo thrills. Here are some benefits −

AJAX on Rails 2.1

Ajax stands for Asynchronous JavaScript and XML. Ajax is not a single technology; it is a suite of several technologies. Ajax incorporates the following −
  • XHTML for the markup of web pages
  • CSS for the styling
  • Dynamic display and interaction using the DOM
  • Data manipulation and interchange using XML
  • Data retrieval using XMLHttpRequest
  • JavaScript as the glue that meshes all this together

Ruby on Rails 2.1 - Uploads Files

You may have a requirement in which you want your site visitors to upload a file on your server. Rails makes it very easy to handle this requirement. Now we will proceed with a simple and small Rails project.
As usual, let's start off with a new Rails application called upload. So let's create basic structure of the application by using simple rails command.

Ruby on Rails 2.1 - Sends Emails

Action Mailer is the Rails component that enables applications to send and receive e-mail. In this chapter we will see how to send an email using Rails.
So lets start with creating an emails project using following command.
C:\ruby> rails -d mysql emails

Ruby on Rails 2.1 - RMagick Guide

Rails provide a bindings to ImageMagick and GraphicsMagick which are popular and stable C libraries. The RMagick library provides the same interface against ImageMagick and GraphicsMagick, so it does not matter which one you use.

Ruby on Rails 2.1 - Basic HTTP Auth

Rails provide various ways of implementing authentication and authorization. But the simplest one is a new module which has been added in Rails 2.0. This module turned out to be a great way to do API authentication over SSL.
To use this authentication you will need to use SSL for traffic transportation. In out tutorial we are going to test it without a SSL.

Ruby on Rails 2.1 - Exception Handling

The execution and the exception always go together. If you are opening a file which does not exist then if you did not handle this situation properly then your program is considered to be of bad quality.
The program stops if an exception occurs. So exceptions are used to handle various type of errors which may occur during a program execution and take appropriate action instead of halting program completely.

Ruby on Rails 2.1 - Routes System

Rails parses the URL to determine the controller, action, and parameters for the request. With Rails routing, parts of the URL can specify additional parameters, and the entire routing process is under your control. Routing rules work the same on any web server.

Ruby on Rails 2.1 - Unit Testing

Introduction

Before proceeding let's have a quick look of few definitions −
  • The Tests − They are test applications that produce consistent result and prove that a Rails application does what it is expected to do. Tests are developed concurrently with the actual application.

Ruby on Rails 2.1 - Tips and Tricks

I'm in process of building a list of good Tips and Tricks received from different Rails Developers. Till the date I could recive only few which I'm going to list down here.

Ruby on Rails 2.1 - Quick Guide Reference

Here we have listed out all the important functions, scripts, validations etc.You can book mark this page for easy access.

Ruby on Rails 2.1 - Resources

The following resources contain additional information on Ruby on Rails 2.1. Please use them to get more in-depth knowledge on this topic.

Discuss Ruby on Rails 2.1

Ruby on Rails is an extremely productive web application framework written in Ruby by David Heinemeier Hansson. This is a open source Ruby framework for developing database-backed web applications. This tutorial will give you a complete understanding on Ruby on Rails 2.1.

RESTful Web Services - Introduction

What is REST?

REST stands for REpresentational State Transfer. REST is a web standards based architecture and uses HTTP Protocol for data communication. It revolves around resources where every component is a resource and a resource is accessed by a common interface using HTTP standard methods. REST was first introduced by Roy Fielding in year 2000.

RESTful Web Services - Environment Setup

This tutorial will guide you on how to prepare a development environment to start your work with Jersey Framework to create RESTful Web Services. Jersey framework implements JAX-RS 2.0 API, which is a standard specification to create RESTful Web Services. This tutorial will also teach you how to setup JDK, Tomcat and Eclipse on your machine before you the Jersey Framework is setup.

RESTful Web Services - First Application

Let us start writing the actual RESTful web services with Jersey Framework. Before you start writing your first example using the Jersey Framework, you have to make sure that you have setup your Jersey environment properly as explained in the RESTful Web Services - Environment Setup chapter. Here, I am also assuming that you have a little working knowledge of Eclipse IDE.

RESTful Web Services - Resources

What is a Resource?

REST architecture treats every content as a resource. These resources can be Text Files, Html Pages, Images, Videos or Dynamic Business Data. REST Server simply provides access to resources and REST client accesses and modifies the resources.

RESTful Web Services - Messages

RESTful Web Services make use of HTTP protocols as a medium of communication between client and server. A client sends a message in form of a HTTP Request and the server responds in the form of an HTTP Response. This technique is termed as Messaging. These messages contain message data and metadata i.e. information about message itself. Let us have a look on the HTTP Request and HTTP Response messages for HTTP 1.1.

RESTful Web Services - Addressing

Addressing refers to locating a resource or multiple resources lying on the server. It is analogous to locate a postal address of a person.
Each resource in REST architecture is identified by its URI (Uniform Resource Identifier). A URI is of the following format −

RESTful Web Services - Methods

As we have discussed in the earlier chapters that RESTful Web Service uses a lot of HTTP verbs to determine the operation to be carried out on the specified resource(s). The following table states the examples of the most commonly used HTTP Verbs.

RESTful Web Services - Statelessness

As per the REST architecture, a RESTful Web Service should not keep a client state on the server. This restriction is called Statelessness. It is the responsibility of the client to pass its context to the server and then the server can store this context to process the client's further request. For example, session maintained by server is identified by session identifier passed by the client.

RESTful Web Services - Caching

Caching refers to storing the server response in the client itself, so that a client need not make a server request for the same resource again and again. A server response should have information about how caching is to be done, so that a client caches the response for a time-period or never caches the server response.

RESTful Web Services - Security

As RESTful Web Services work with HTTP URL Paths, it is very important to safeguard a RESTful Web Service in the same manner as a website is secured.
Following are the best practices to be adhered to while designing a RESTful Web Service −

RESTful Web Services - Java (JAX-RS)

JAX-RS stands for JAVA API for RESTful Web Services. JAX-RS is a JAVA based programming language API and specification to provide support for created RESTful Web Services. Its 2.0 version was released on the 24th May 2013. JAX-RS uses annotations available from Java SE 5 to simplify the development of JAVA based web services creation and deployment. It also provides supports for creating clients for RESTful Web Services.

RESTful Questions and Answers

RESTful Questions and Answers has been designed with a special intention of helping students and professionals preparing for various Certification Exams and Job Interviews. This section provides a useful collection of sample Interview Questions and Multiple Choice Questions (MCQs) and their answers with appropriate explanations.

RESTful Web Services - Quick Guide

RESTful Web Services - Introduction

What is REST?

REST stands for REpresentational State Transfer. REST is a web standards based architecture and uses HTTP Protocol for data communication. It revolves around resources where every component is a resource and a resource is accessed by a common interface using HTTP standard methods. REST was first introduced by Roy Fielding in year 2000.

RESTful Web Services - Useful Resources

The following resources contain additional information on RESTful Web Services. Please use them to get more in-depth knowledge on this.

Discuss RESTful Web Services

RESTful Web Services are basically REST Architecture based Web Services. In REST Architecture everything is a resource. RESTful web services are light weight, highly scalable and maintainable and are very commonly used to create APIs for web-based applications. This tutorial will teach you the basics of RESTful Web Services and contains chapters discussing all the basic components of RESTful Web Services with suitable examples.

ReactJS - Overview

We already stated that ReactJS is JavaScript library used for building reusable UI components. Definition can be found on React official documentation −
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time. Lots of people use React as the V in MVC.

ReactJS - Environment Setup

In this tutorial we will show you how to set up environment for successful React development. Notice that there are many steps involved but this will help you to speed up development process later. We will need NodeJS so if you don't have it installed, check the link from the table below.

ReactJS - JSX

React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, but there are some pros that comes with it.
  • JSX is faster because it performs optimization while compiling code to JavaScript.
  • It is also type-safe and most of the errors can be caught during compilation.
  • JSX makes it easier and faster to write templates if you are familiar with HTML.

ReactJS - Components

In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and change your components without affecting the rest of the page.

ReactJS - State

State is the place where the data comes from. You should always try to make your state as simple as possible and minimize number of stateful components. If you have, for example, ten components that need data from the state, you should create one container component that will keep the state for all of them.

ReactJS - Props Overview

The main difference between state and props is that props are immutable. This is why container component should define state that can be updated and changed, while the child components should only pass data from the state using props.

ReactJS - Props Validation

Properties validation is useful way to force correct usage of your components. This will help you during development to avoid future bugs and problems once your app become larger. It also makes code more readable since you can see how each component should be used.

ReactJS - Component API

In this tutorial we will explain React component API. We will show you three methods: setState(), forceUpdate and ReactDOM.findDOMNode(). In new ES6 classes we have to manually bind this. You will see in examples below that we are using this.method.bind(this).

ReactJS - Component Life Cycle

In this tutorial we will go through component lifecycle methods.

Lifecycle Methods

  • componentWillMount is executed before rendering, on both server and client side.
  • componentDidMount is executed after first render only on the client side. This is where AJAX requests and DOM or state updates should occur. This method is also used for integration with other JavaScript frameworks and any functions with delayed execution like setTimeout or setInterval. We are using it to update the state so we can trigger the other lifecycle methods.

ReactJS - Forms

In this chapter we will explain how to use forms in React.

Simple Example

In example below we are setting input form with value = {this.state.data}. This allow us to update state whenever input value changes. We are using onChange event that will watch input changes and update state accordingly.

ReactJS - Events

In this chapter we will show you how to use events.

Simple Example

This is simple example where we only use one component. We are just adding onClick event that will trigger updateState function once the button is clicked.

ReactJS - Refs

The ref is used to return a reference to your element. Refs should be avoided in most cases but they can be useful when you need DOM measurements or to add methods to your components.

Using Refs

Our example shows how to use refs to clear the input field. clearInput function is searching for element with ref = "myInput" value, resets the state and adds focus to it after the button is clicked.

ReactJS - Keys

React keys are useful when working with dynamically created components or when your lists are altered by users. Setting the key value will keep your components uniquely identified after the change.

ReactJS - Router

In this chapter we will show you how to set up routing for your app.

Step 1 - Install React Router

Simple way to install react-router is to run the following code snippet in command prompt window.
C:\Users\username\Desktop\reactApp>npm install react-router

ReactJS - Flux Concept

Flux is programming concept where the data is uni-directional. This data enters the app and flows through it in one direction until it is rendered on screen.

Flux Elements

This is simple explanation of the flux concept. In our next tutorial we will explain how to implement this into your app.

ReactJS - Using Flux

In this tutorial we will show you how to implement flux pattern in React applications. We will use Redux framework. The goal of the article is to present you the simplest example of every piece needed for connecting Redux and React.

ReactJS - Animations

In this chapter we will show you how to animate elements using React.

Step 1 - Install React CSS Transitions Group

This is React add-on used for creating basic CSS transitions and animations. We will install it from command prompt window −
C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

ReactJS - Higher Order Components

Higher order components are JavaScript functions which are used for adding additional functionality to existing component. These functions are pure which means they are receiving data and returning values according to that data. If data changes, higher order functions is re-run again with different data input. If we want to update our returning component, we don't have to change our HOC. All we need to do is change the data that our function is using.

ReactJS - Best Practices

In this chapter we will list React best practices, methods and techniques that will help you stay consistent during the app development.
  • STATE − The state should be avoided as much as possible. It is good practice to centralize the state and pass it down the component tree as props. Whenever you have group of components that needs the same data, you should set container element around them that will hold the state. Flux pattern is a nice way of handling the state in React apps.

Pure.CSS Overview

What is Pure?

Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites.
Some of its salient features are as follows:
  • In-built responsive designing
  • Standard CSS with minimal footprint
  • Set of small, responsive CSS modules
  • Free to use

Pure.CSS Environment Setup

How to Use PURE.CSS?

There are two ways to use Pure:
  • Local Installation - You can download the pure.css file on your local machine and include it in your HTML code.
  • CDN Based Version - You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN).

Pure.CSS Responsive Design

PURE.CSS has several special classes to create a responsive design.
S.N.Class Name & Description
1.pure-u-*
Sets the container to occupy required space on any device.
2.pure-u-sm-*
Sets the container to occupy required space on a devices with width ≥ 568px.
3.pure-u-md-*

Pure.CSS Grids

PURE.CSS provides concept of Pure Grid with two types of classes, pure-g, a grid class and unit classes, pure-u-*. Following are the rules to use Pure Grids.
  1. Widths of Units are in fractions. For example, pure-u-1-2 represents 1/2 or 50% width, pure-u-2-5 represents 2/5 or 40% width and so on.

Pure.CSS Forms

PURE.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used:
S.N.Class Name & Description
1pure-form
Represents a compact inline form.
2pure-form-stacked
Represents a stacked form with input elements below the labels. To be used with pure-form.
3pure-form-aligned

Pure.CSS Buttons

PURE.CSS has a very beautiful and responsive CSS for customizing the look of a button. The following CSS are used:
S.N.Class Name & Description
1pure-button
Represents a standard button. Can be used to style a link and button as well.
2pure-button-disabled

Pure.CSS Tables

PURE.CSS can be used to display different types of tables using various styles over pure-table.
S.N.Class Name & Description
1pure-table
Represents a basic table with any a default padding, border and an emphasized header.
2pure-table-bordered
Draws a table with a border across rows.

Pure.CSS Images

Pure.CSS provides options to display images in responsive way using pure-image as the main class.
S.N.Class Name & Description
1pure-img
Represents a basic styled image without any border. Image grows and shrinks with the content maintaining the correct ratio

Pure.CSS Icons

PURE.CSS supports the following popular icon libraries:
  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

Usage

To use an icon, put the name of the icon in the class of an HTML <i> element.

Pure.CSS Quick Guide

Pure.CSS Overview

What is Pure?

Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites.
Some of its salient features are as follows:
  • In-built responsive designing
  • Standard CSS with minimal footprint
  • Set of small, responsive CSS modules
  • Free to use

Pure.CSS Useful Resources

If you want to list down your website, book or any other resource on this page then please contact at webmaster@tutorialspoint.com

Websites on Pure.CSS

  • Pure.CSS - Pure.CSS official home page

Discuss Pure.CSS

Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites. It is very space savvy and is very tiny in size comparable to 4 KB.