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 - Rake Utility
• Ruby on Rails - The Scripts
• Ruby on Rails - The Plugins
  

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
1	pure-form Represents a compact inline form.
2	pure-form-stacked Represents a stacked form with input elements below the labels. To be used with pure-form.
3	pure-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
1	pure-button Represents a standard button. Can be used to style a link and button as well.
2	pure-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
1	pure-table Represents a basic table with any a default padding, border and an emphasized header.
2	pure-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
1	pure-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.

---

Prototype - Overview

What is Prototype ?

Prototype is a JavaScript Framework that aims to ease the development of dynamic web applications. Prototype was developed by Sam Stephenson.
Prototype is a JavaScript library, which enables you to manipulate DOM in a very easy and fun way that is also safe (cross-browser).

Prototype - Useful Features

Let's now look at what Prototype can do specifically for us to develop a Dynamic Web Application.

Cross Browser Support

While doing JavaScript programming, it is required to handle different Web Browsers differently. Prototype Library has been written in such a way that it takes care of all the compatibility issues and you can do cross browser programming without any hassle.

Prototype - Utility Methods

The Prototype library comes with lot of predefined objects and utility functions. You can use those functions and objects directly in your JavaScript programming.
These methods are one of the cornerstones of efficient Prototype-based JavaScript coding. Spend some time to study them to become comfortable with the methods.

Prototype - Element Object

The Element object provides various utility functions for manipulating elements in the DOM.
Here is the list of all the utility functions with examples. All the methods defined here are automatically added to any element accessed using the $() function.
So, writing Element.show('firstDiv'); is the same as writing $('firstDiv').show();

Prototype - Number Processing

Prototype extends native JavaScript numbers in order to provide −

• ObjectRange compatibility, through Number#succ.
• Ruby-like numerical loops with Number#times.
• Simple utility methods such as Number#toColorPart and Number#toPaddedString.
  

Prototype - String Processing

Prototype enhances the String object with a series of useful methods ranging from the trivial to the complex.
Here is the list of all the functions with examples dealing with String.

Prototype String Methods

NOTE − Make sure you have the prototype.js version of 1.6.

Prototype - Array Processing

Prototype extends all the native JavaScript arrays with quite a few powerful methods.
This is done in two ways −

• It mixes in the Enumerable module, which brings a ton of methods in already.
• It adds quite a few extra methods, which are documented in this section.
  

Prototype - Hash Processing

Hash can be thought of as an associative array binding unique keys to values. Only difference is that you can use any string as an index instead of just using a number as index.

Prototype - Basic Object

Object is used by Prototype as a namespace and to call related function using Object object. This is used in the following two ways −

• If you are a simple developer, then you can use the existing functions like inspect or clone.
• If you are one who wishes to create their own objects like Prototype does, or explore objects as if they were hashes, will turn to extend, keys and values.
  

Prototype - Templating

Templates are used for formatting group of similar objects and to produce formatted output for these objects.
Prototype provides a Template class, which has two methods −

• Template() − This is a constructor method, which is used to create a template object and call evaluate() method to apply template.
• evaluate() − This method is used to apply a template to format an object.
  

Prototype - Enumerating

Enumerable class provides a large set of useful methods for enumerations. Enumerations are objects that act as collection of values.
Enumeration methods are mostly used to enumerate arrays and hashes. There are other objects as well like ObjectRange and various DOM- or AJAX-related objects where you can use enumeration methods.

Prototype - Event Handling

Event management is one of the biggest challenges to achieve cross-browser scripting. Every browser has different approaches to handle key strokes.
Prototype Framework handles all cross browser compatibility issues and keeps you free from all trouble related to event management.

Prototype - Form Management

Prototype provides an easy way to manage HTML forms. Prototype's Form is a namespace and a module for all things form-related, packed with form manipulation and serialization goodness.
While it holds methods dealing with forms as a whole, its sub module Form.Element deals with specific form controls.

Prototype and JSON Tutorial

Introduction to JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format.

• JSON is easy for humans to read and write.
• JSON is easy for machines to parse and generate.
• JSON is based on a subset of the JavaScript Programming Language.
  

Prototype and AJAX Tutorial

Introduction to AJAX

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.
For a complete understanding on AJAX, please go through our simple AJAX Tutorial.

Prototype - Expressing Range

Prototype Ranges represent an interval of values. The preferred way to obtain a range is to use the $R utility function.
You can create a big range of values using a simple syntax as follows −

$R(1, 10).inspect();

$R('a', 'e').inspect();

This will produce the following result −

Prototype - Periodical Execution

Many times it is required to execute a function many times after a certain period of time. For example, you may want to refresh your screen after a given time. Prototype provides a simple mechanism to implement it using PeriodicalExecuter object.
The advantage provided by PeriodicalExecuter is that it shields you against multiple parallel executions of the callback function.

Prototype - Quick Guide

Prototype - Overview

What is Prototype ?

Prototype is a JavaScript Framework that aims to ease the development of dynamic web applications. Prototype was developed by Sam Stephenson.
Prototype is a JavaScript library, which enables you to manipulate DOM in a very easy and fun way that is also safe (cross-browser).

Prototype - Useful Resources

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

Discuss Prototype

This tutorial gives a complete understanding on Prototype. Prototype is distributed as a single file called prototype.js. Prototype is an object in javascript from which other objects inherit properties.

Phalcon - Overview

Phalcon is introduced as one of the recent frameworks of PHP, developed by a group of enthusiastic developers. Phalcon is a loosely coupled framework, which means it allows its objects to be treated like glue components, based on the needs of application.

Phalcon - Environmental Setup

Prerequisites − We need WAMP/LAMP/MAMP or XAMPP stack for this framework.
Following are the steps for the installation process of Phalcon framework in Windows.
Step 1 − Phalcon installation is completely dependent on dll file. DLL (Dynamic Link Library) creates the required package and plugins for Phalcon.

Phalcon - Application Structure

In this chapter, we will discuss the Application Structure of Phalcon. Following is the complete directory structure of a Phalcon project.

Phalcon - Functionality

Model View Controller (MVC) is a software design and structural pattern for developing webbased applications. This software architectural separates the representation of information from the user's interaction with it.

Phalcon - Configuration

The config folder of the web application includes the following files −

• config.php
• loader.php
• services.php

Phalcon - Controllers

In MVC framework, “C” stands for the Controller which refers to the switchboards of the web application. The actions undertaken by the controller, helps to pass parameters to the view so that it can display and respond to the user input accordingly.

Phalcon - Models

Model in MVC architecture includes the logic of application. Model is the core interaction with the database. It should be able to manage updating, deleting, inserting, and fetching of records as per the user’s request.
For understanding the model interaction in Phalcon PHP framework, following steps should be followed.
Step 1 − Creation of database.

Phalcon - Views

Views are information being presented to the end user. A view can be considered as a web page with the appropriate response to be displayed. The response is received through the controller which interacts with the model.

Phalcon - Routing

The router component allows to define routes that are mapped to the controllers or handlers that should receive the request. A router parses a URI as per the information received.
Every router in the web application has two modes −

Phalcon - Database Connectivity

In this chapter, we will discuss the database connectivity related to Phalcon.

Creation of Database and Design

We will focus on creating a database for blogs which maintains posts along with the categories as per the entries of users.
Database Name: blog-tutorial
Query used for creating the database −

Phalcon - Switching Databases

We have used a MySQL database in our application. If we wanted to change the database software midstream, it would not be too hard, as long as we have the same data structure in our new database.

Phalcon - Scaffolding Application

Scaffolding usually refers to a type of code generation where we point it to a web application database, which results in creating a basic CRUD (Create, Read, Update, Delete) application.
Before designing a CRUD application, it is important to design database tables as per the need of the application.

Phalcon - Query Language

Phalcon Query Language (PHQL) also called as PhalconQL is a high-level SQL dialect which standardizes SQL queries for the database systems supported by Phalcon.
It includes a parser, written in C, which translates the syntax in target RDBMS.
Here is a list of some of the prominent features of Phalcon query language −

Phalcon - Database Migration

Database migration is important for the following reasons −

• Database migration helps in transferring data between the specified storage types.
• Database migration refers to the context of web-based applications migrating from one platform to another.
• This process usually takes place to keep a track of data which is being outdated.
  

Phalcon - Cookie Management

Cookies also known as browser cookies are small text files stored in the browser. It saves all the information related to user identity. This information is used to validate the users once they browse through different pages.
There are two different types of Cookies −

Phalcon - Session Management

Sessions are server-side information storage which helps in user interaction with the website or web application. Each session is uniquely defined with a session ID, which is passed to the web server whenever the browser makes an HTTP request. The session ID is paired every time with the internal database such that all stored variables are retrieved.

Phalcon - Multi-Lingual Support

Phalcon includes a component Phalcon\Translate which provides multi-lingual support and it is very helpful to create web pages, which gets translated in multiple languages.
It includes an adapter which helps in binding arrays and assists in reading translation messages.

Phalcon - Asset Management

Assets are all about the additional components apart from the existing framework in Phalcon. Phalcon has an asset manager which helps to manage all the asset components like CSS or JS files.
The common methods used are −

Phalcon - Working with Forms

Forms are used in all web applications to accept inputs from the user as request. The data is accepted as an input, then manipulated and saved in the database or any other operation is being performed.
Phalcon includes a component named Phalcon\Forms which helps in the creation and maintenance of forms.
Consider the example of Blog-tutorial, which we created in the previous chapters. It includes a form which is used to create a new category.

Phalcon - Object Document Mapper

Before starting with the concepts of Object Relational Mapper (ORM) and Object Document Mapper (ODM), it is important to understand the difference between SQL and NoSQL databases.
The following table highlights the differences between SQL and NoSQL −

Phalcon - Security Features

Phalcon provides security features with the help of Security component, which helps in performing certain tasks like password hashing and Cross-Site Request Forgery (CSRF).

Hashing Password

Hashing can be defined as the process of converting a fixed length bit string into a specified length in such a way that it cannot be reversed. Any change in the input string will change the value of hashed data.

Phalcon - Quick Guide

Phalcon - Overview

Phalcon is introduced as one of the recent frameworks of PHP, developed by a group of enthusiastic developers. Phalcon is a loosely coupled framework, which means it allows its objects to be treated like glue components, based on the needs of application.

Phalcon - Useful Resources

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

Discuss Phalcon

Phalcon is an open source framework quite popular among developers. It is a combination of PHP and C language. Phalcon is developed by Andres Gutierrez and his group of collaborators. This tutorial provides an overall idea on Phalcon PHP framework and how you can use it.

---

MVC Framework - Introduction

What is MVC?

The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application. MVC is one of the most frequently used industry-standard web development framework to create scalable and extensible projects.

MVC Framework - Architecture

In the last chapter, we studied the high-level architecture flow of MVC Framework. Now let us have a look at how the execution of an MVC application takes place when certain request comes from the client. The diagram below shows the flow:

MVC Framework - ASP.NET Forms

MVC and ASP.NET Web Forms are inter-related but different models of development depending on the requirement of the application and other factors. At a high level, you can consider that MVC is a more advanced and sophisticated web application framework designed with separation of concerns and testability in mind.

MVC Framework - First Application

Let us jump in and create our first MVC application using Views and Controllers. Once we have a small hands-on experience on how a basic MVC application works, we will learn all the individual components and concepts in coming chapters.

MVC Framework - Folders

Now that we have already created a sample MVC application, let us understand the folder structure of an MVC project. We will create new MVC project to learn this.
In your visual studio, open File->New->Project and select ASP.NET MVC Application. Name it as MVCFolderDemo.

MVC Framework - Models

The model is responsible for managing the data of the application. It responds to the request from the view and it also responds to instructions from the controller to update itself.
Model classes can either be created manually or generated from database entities. We are going to see a lot of examples for manually creating Models in coming chapters.

MVC Framework - Controllers

Asp.net MVC Controllers are responsible for controlling the flow of the application execution. When you make a request (means request a page) to MVC applications, a controller is responsible for returning the response to that request. A controller can have one or more actions. A controller action can return different types of action results to a particular request.

MVC Framework - Views

As seen in the initial introductory chapters, Views are the components involved with application's User Interface. These Views are generally bind from the model data and have extensions like html, aspx, cshtml, vbhtml, etc. In our First MVC Application, we had used Views with Controller to display data to the final user. For rendering these static and dynamic content to the browser, MVC Framework utilizes View Engines. View Engines are basically markup syntax implementation which are responsible for rendering the final HTML to the browser.

MVC Framework - Layouts

Steps to create MVC Layouts

Layouts are used in MVC to provide consistent look and feel on all the pages of our application. It is same as defining the Master Pages but MVC gives some more functionalities
Step 1: Create a sample MVC application with Internet application as Template and create a Content folder in the root directory of the web application.

MVC Framework - Routing Engine

Introduction to Routing

ASP.NET MVC Routing enables use of URLs that are descriptive of the user actions and are more easily understood by the users. At the same time, Routing can be used to hide data which is not intended to be shown to the final user. For example, in an application that does not uses routing, user would be shown the URL as http://myapplication/Users.aspx?id=1 which would correspond to the file Users.aspx inside

MVC Framework - Action Filters

In ASP.NET MVC, controllers define action methods and these action methods generally have a one-to-one relationship with UI controls such as clicking a button or a link, etc. For example in one of our previous examples, the UserController class contained methods UserAdd, UserDelete, etc.

MVC Framework - Advanced Example

In the First MVC Tutorialchapter, we learnt how Controllers and Views interact in MVC. In this tutorial, we are going to take a step forward and learn how to use Models and create an advanced application to create, edit, delete and view list of users in our application.

MVC Framework - Ajax Support

Introduction

As you might be knowing, Ajax is a shorthand for Asynchronous JavaScript and XML. The MVC Framework contains built-in support for unobtrusive Ajax by which you can use the helper methods to define your Ajax features without adding code throughout all the views. This feature in MVC is based on the jQuery features.

MVC Framework - Bundling

Bundling and Minification are two performance improvement techniques that improves the request load time of the application. Most of the current major browsers limit the number of simultaneous connections per hostname to six. It means that at a time, all the additional requests will be queued by the browser.

MVC Framework - Exception Handling

In ASP.NET, error handling is done using the standard try catch approach or using application events. ASP.NET MVC comes with built-in support for exception handling using a feature known as exception filters. We are going to learn two approaches here: one with overriding the onException method and another by defining the HandleError filters.

MVC Framework Questions and Answers

MVC Framework 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.

MVC Framework - Resources

The following resources contain additional information on MVC Framework. Please use them to get more in-depth knowledge on this.

Discuss MVC Framework

As per the official definition, Model-view-controller (MVC) is a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user.

MooTools - Introduction

MooTools is an object-oriented, lightweight JavaScript framework. The full form of MooTools is My Object-Oriented Tools. It is released under the free, open-source MIT License. It is one of most popular JavaScript libraries.

MooTools - Installation

MooTools is a powerful, JavaScript library to design DOM objects using object-oriented paradigm. This chapter explains how to install and use MooTools library along with JavaScript.
To install MooTools library, follow the steps given below −

MooTools - Program Structure

MooTools is a tool which can be used to design object-oriented models. Let us discuss in this chapter a simple example of MooTools library.

Example

Here we will design a model named Rectangle using Class. For this, we need to declare the properties — Width and Height.
Take a look at the following code, and save it into sample.html.

<html>

MooTools - Selectors

Selectors are used to select HTML elements. Whenever you want to make interactive web pages, you need to select some data or an action from that web page. Selectors help us receive data through HTML request from elements.

MooTools - Using Arrays

MooTools is a lightweight JavaScript library which helps to create dynamic web pages. While managing DOM element, we need to select all DOM elements of a web page. This collection can be handled using arrays.
This chapter explains about how to use arrays to manage DOM elements.

MooTools - Functions

Functions in MooTools is a concept from JavaScript. We already know how to use functions in JavaScript. Generally, it is better to keep the function outside the page body in the script tag. In MooTools, we follow the same pattern. Here, you can design your own function according to the requirement. We now have to call all the user-defined functions in the domready function.

MooTools - Event Handling

Like Selectors, Event Handling is also an essential concept of MooTools. This concept is used to create events and actions for events. We also need to have a grasp of the actions and their effects. Let us try a few events in this chapter.

MooTools - DOM Manipulations

We already know that every HTML page is designed using DOM elements. Using MooTools you can manipulate DOM elements which means you can create, remove and change the style of DOM elements.

MooTools - Style Properties

MooTools provides some Special methods to set and get style property values for DOM elements. We use different style properties such as width, height, background color, font weight, font color, border, etc. By setting and getting different values to these style properties, we can present HTML elements in different styles.

MooTools - Input Filtering

MooTools can filter the user input and it can easily recognize the type of input. The basic input types are Number and String.

Number Functions

Let us discuss a few methods that will check if an input value is a number or not. These methods will also help you manipulate the number input.

MooTools - Drag and Drop

MooTools provides a tremendous feature that helps you add drag and drop drag functionalities to your web page elements. We can do this by creating our own new Drag.Move object. Using this object, you can define your options and events. Drag and Drag.Move classes are from the MooTools More library.
Let us discuss the options and events of Drag.Move object.

MooTools - Regular Expression

MooTools provides a way to create and use Regular Expression (regex). This tutorial will explain the basics and extreme uses of regexes.
Let us discuss a few methods of the regular expressions.

MooTools - Periodicals

MooTools provides an option that supports periodicals. With this, it can call a function periodically with same level time frequency. Let us discuss the methods and features of periodicals.

MooTools - Sliders

Slider is a functionality that reflects an action while sliding the knob or any button. You can create your own slider while defining elements, the handler, options, and call back events. Let us discuss more about slider.

MooTools - Sortables

Sortables is an advanced feature in web development and can really open up the options with your user interface designs. It also includes a great function called "serialize" that manages a list of element ids and is useful for server side scripting.

MooTools - Accordion

Accordion is the most popular plugin that MooTools provides. It helps in hiding and revealing the data. Let us discuss more about it.

Creating new accordion

The basic elements that an accordion requires are pairs of toggles and their contents. Let us create pairs of headings and contents of the html.

<h3 class = "togglers">Toggle 1</h3>

MooTools - Tooltips

MooTools provides different tooltips to design custom styles and effects. In this chapter, we will learn the various options and events of tooltips, as well as a few tools that will help you add or remove tooltips from elements.

MooTools - Tabbed Content

Tabbed content means the content that is present in the tabbed area and that content is related to the list items. Whenever we apply any actions like hover or click to the list item, the immediate reaction will create an effect on the tabbed content.
Let us discuss more about tabs.

MooTools - Classes

MooTools contains classes of different APIs. Look at the basics of creating and using classes with MooTools. A class is a container for a collection of variables and functions which operate on those variables to perform specific tasks.
Let us discuss the variables, methods, and options in detail.

MooTools - Fx.Element

Fx.Element allows you to add the Fx functionality to multiple dom elements on a single page. Actually Fx.Element is an extension of the Fx.Morph plugin. The only difference between Fx.Element and Fx.Morph is the syntax. In this syntax, the start({}) method is used to create an effect and the .set({}) method is used to set some styles.
Take a look at the following syntax for Fx.Element.

MooTools - Fx.Slide

Fx.Slides is an option that lets you display the content by sliding into view. It is very simple but enhances the look of your UI.
Let us discuss about creating and initializing an Fx.Slide, its options, and methods.
First, we will initialize the Fx.Slide class with a user-defined instance. For that, we have to create and select an HTML element. After that, we will apply CSS to these elements. Finally, we will initiate a new instance of Fx.Slide with our element variable.

MooTools - Fx.Tween

MooTools provides different FX.Tween shortcuts for different transitions such as flashy effects which translate to smooth animated transitions. Let us discuss a few methods from the Tween shortcuts.

MooTools - Fx.Morph

Fx.Morph is a function provided by MooTools. It is used to create new tween for transitions between style properties. While morphing, we have to select the element with an object and then we can apply different functions to it. We also need to bind the element with a newly created tween.

MooTools - Fx.Options

MooTools provides different Fx.Options which will help to Fx.Tween and Fx.Morph. These options will give you a control over the effects.
Let us discuss a few options that MooTools provide. Before we proceed, take a look at the following syntax for setting up options.

MooTools - Fx.Events

Fx.Events provides some options to raise some codes at different levels throughout the animation effect. It provides you the control over your tweens and morphs. The option that Fx.Events provides −

• onStart − It will raise the code to execute when the Fx starts.
• onCancel − It will raise the code to execute when the Fx is cancelled.
• onComplete − It will raise the code to execute when the Fx is completed.
• onChainComplete − will raise the code to execute when the chained Fx completes.
  

MooTools - Quick Guide

MooTools - Introduction

MooTools is an object-oriented, lightweight JavaScript framework. The full form of MooTools is My Object-Oriented Tools. It is released under the free, open-source MIT License. It is one of most popular JavaScript libraries.

MooTools - Useful Resources

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

Useful Links on MooTools

• MooTools Official Website − Official Site for MooTools
• MooTools Wiki − Wikipedia Reference for MooTools
  

Discuss MooTools

The full form of MooTools is My Object-Oriented Tools. It is an object-oriented, lightweight JavaScript framework. It is released under the free, open-source MIT License. It is one of the most popular JavaScript libraries. In this tutorial, we will walk through MooTools and its features.

Materialize - Overview

What is Materialize?

Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize reusable UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.

Materialize - Environment Setup

How to Use Materialize?

There are two ways to use Materialize:

• Local Installation - You can download the materialize.min.css and materialize.min.js files on your local machine and include it in your HTML code.
• CDN Based Version - You can include the materialize.min.css and materialize.min.js files into your HTML code directly from the Content Delivery Network (CDN).
  

Materialize - Colors

Materialize supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.

• red
• pink
• purple
• deep-purple
• indigo
  

Materialize - Grids

Materialize provides a 12 column fluid responsive grid.
It uses the row and col style classes to define rows and columns respectively.

S.N.	Class Name & Description
1	row Specifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive.

Materialize - Helpers

Materialize has several utility classes which are very useful for day-to-day designing needs.

• Color utility classes - Examples: .red, .green, .grey and so on
• Alignment utility classes - Examples: .valign-wrapper, .left-align, .right-align, .center-align, .left, .right
  

Materialize - Media

Materialize has several classes to make images and video responsive to different sizes.

• responsive-img - It makes an image to resize itself based on screen size.
• video-container - For responsive container having embedded videos
• responsive-video - To make HTML5 videos responsive.
  

Materialize - Shadows

Materialize has several special classes to display containers as paper-like cards with shadow.

S.N.	Class Name & Description
1	z-depth-0 Remove the shadow of elements having z-depth by default.
2	z-depth-1 Styles a container for any HTML content with 1px bordered shadow. Adds z-depth of 1.

Materialize - Tables

Materialize can be used to display different types of tables using various styles over table.

S.N.	Class Name & Description
1	None Represents a basic table without any border.
2	stripped Displays a stripped table.
3	bordered

Materialize - Typography

Materialize uses Roboto 2.0 as standard font. It can be overriden using following CSS style:

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

Following are the examples of headings, blockquotes and free-flow but responsive text.

Example

materialize_typography.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Typography Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
   </head>
   <body class="container"> 
      <h2>Typography Demo</h2>
   <hr/>
   <h3>Headings</h3>
      <div class="card-panel">
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
         <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h5>Heading 5</h5>
         <h6>Heading 6</h6>
      </div>
   <h3>Block Quotes</h3>
      <div class="card-panel">
         <blockquote>
          The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </blockquote>
      </div>
   <h3>Responsive free-flow text</h3>
      <div class="card-panel">
          <p class="flow-text">
          The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </p>
      </div>    
   </body>
</html>

Result

Verify the result.

Typography Demo

---

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Quotes

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

Responsive free-flow text

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

Materialize - Badges

An Materialize badge component is a onscreen notification which can be a number or icon. It is generally used to emphasize the number of items.

S.N.	Class Name & Description
1	badge Identifies element as an MDL badge component. Required for span element.
2	new Adding a "new" class to a badge component gives it a background.

Following are the examples of using badges in different ways.

Materialize - Buttons

The Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to the buttons. The below table mentions the available classes and their effects.

Materialize - BreadCrumb

The Materialize provides various CSS classes to create a nice breadcrumb in easy way. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	nav-wrapper Set the nav component as breadcrumb/nav bar wrapper.

Materialize - Cards

The Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of cards. The below table mentions the available classes and their effects.

Materialize - Chips

The Materialize provides a special component called Chip which can be used to represent small set of information for example, a contact, tags etc.

S.N.	Class Name & Description
1	chip Set the div container as chip.

Materialize - Collections

The Materialize provides a special classes to represent various types of collections where a collection represents group of related information items.

S.N.	Class Name & Description
1	collection Set the div or ul container as collection.
2	collection-item

Materialize - Footer

The Materialize provides a special classes to represent various types of collections where a collection represents group of related information items.

S.N.	Class Name & Description
1	page-footer Set the div container as footer.
2	footer-copyright Set the div container as footer-copyright container.

Materialize - Form

Materialize has a very beautiful and responsive CSS for form designing. The following CSS are used:

S.N.	Class Name & Description
1	input-field Set the div container as input field container. Required.
2	validate Adds validation styles to an input field.

Materialize - Icons

Materialize supports the following popular icon libraries:

• Font Awesome Icons
• Google Material Icons
• Bootstrap Icons

Materialize - Navbar

The Materialize provides various CSS classes to create a nice navigation bar in easy way. The below table mentions the available classes and their effects.

Materialize - Pagination

The Materialize provides various CSS classes to create a nice pagination bar in easy way. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	pagination Set the ul element as pagination component.

Materialize - Preloader

The Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of preloaders or progress bars. The below table mentions the available classes and their effects.

Materialize - Collapsible

The Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of accordions. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	collapsible Identifies element as an materialize collapsible component. Required for ul element.
2	collapsible-header Sets div as section header.
3	collapsible-body Sets div as section content container.
4	popout Creates a popout collapsible.
5	active Opens a section.
6	expandable Marks a collapsible component as expandable.
7	accordion Marks a collapsible component as accordion.

Following are the examples of using accordions in different ways.

Example

materialize_collapsible.htm

<html>
   <head>
      <title>The Materialize Collapsible Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container"> 
      <h4>Simple Accordion</h4>
      <ul class="collapsible" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      <h4>Popout Accordion</h4>
      <ul class="collapsible popout" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      <h4>Accordion with Preselected Section</h4>
      <ul class="collapsible" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header active"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>     
      <h4>Expandables</h4>
      <ul class="collapsible" data-collapsible="expandable">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
            <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
            <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
            <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>       
   </body>  
</html>

Result

Verify the result.

Materialize - Dialogs

The Materialize provides various special methods to show unobtrusive alerts to the users. Materialize provides a term toast for them. Following is the syntax to show a dialog as toast.

Materialize.toast(message, displayLength, className, completeCallback);

Where

Materialize - Dropdowns

The Materialize provides dropdown CSS class to make a ul element as a dropdown and add the id of the ul element to the data-activates attribute of the button or anchor element.The below table mentions the available classes and their effects.

Materialize - Tabs

The Materialize provides tabs CSS class to make a ul element as a tabs. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	tabs Identifies ul as an materialize tab component. Required for ul element.
2	active Make a tab active.

Following are the examples of using a tab.

Materialize - Waves

The Materialize uses Waves, an external library to create ink effect outlined in Material Design. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	waves-effect Put the wave effect on the control.
2	waves-light Put the wave effect as white colored.
3	waves-red Put the wave effect as red colored.
4	waves-green Put the wave effect as green colored.
5	waves-yellow Put the wave effect as yellow colored.
6	waves-orange Put the wave effect as orange colored.
7	waves-purple Put the wave effect as purple colored.
8	waves-teal Put the wave effect as teal colored.

Following are the examples of using a wave effects on buttons.

Example

materialize_waves.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Waves Effects Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
   </head>
   <body class="container"> 
   <h3>Waves Effects Demo</h3>
      <div class="collection waves-color-demo">
         <div class="collection-item">
      <code class=" language-markup">Default</code>
            <a href="#!" class="waves-effect btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-light</code>
            <a href="#!" class="waves-effect waves-light btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-red</code>
            <a href="#!" class="waves-effect waves-red btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-yellow</code>
            <a href="#!" class="waves-effect waves-yellow btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-orange</code>
            <a href="#!" class="waves-effect waves-orange btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-purple</code>
            <a href="#!" class="waves-effect waves-purple btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-green</code>
            <a href="#!" class="waves-effect waves-green btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-teal</code>
            <a href="#!" class="waves-effect waves-teal btn secondary-content">Click Me!</a>
         </div>
      </div>
   </body>
</html>

Result

Verify the result.

Waves Effects Demo

Default

waves-light waves-red waves-yellow waves-orange waves-purple waves-green waves-teal

---