Business Server Pages:
BSP is an object-oriented, repository-based development environment using ABAP and/or JavaScript. It supports the complete development and lifecycle of enterprise applications, and allows a user to develop new kind of enterprise web applications known as BSP applications. The core parts of these applications are the Business Server Pages (BSP) and MIME (Multipurpose Internet Mail Extensions) objects.
The structure of a BSP application involves:
1. Business Server Pages.
2. MIME objects.
3. Theme.
4. Application Class.
5. Controllers.
6. The Navigating Structure.
Let us see the above mentioned points in detail -
Business Server Pages:
It is a set of pages that represent a user interface (layout and page flow definition). The layout part of a page normally contains ABAP or JavaScript code which is inserted into the HTML structure. They can contain server-side scripting code in either JavaScript or ABAP. BSP applications use all the conventional ABAP technologies, such as Open SQL and internal tables, allowing developers to create Web pages quickly. This enables existing SAP logic, data structures, and interfaces to be directly used in Web applications.
MIME Objects:
In the SAP System, all MIME objects represent graphics, style sheets or audio and video files that are managed in a central database called the MIME Repository. For every new BSP application, an identically named directory in a repository is created, where you can store all application-specific MIME objects.
Theme:
It is a container for MIME objects that are used to adjust the appearance of BSP applications. You can replace each MIME object in your application with another object from the file system. Themes are created as individual development objects in the Web Application Builder and can be assigned to a BSP application to overwrite preset styles and MIME objects on the pages of that BSP application.
Application Class:
The application class allows you to store business logic in a global class, with which you can access business data, for example using BAPI calls. The application class must exist in the same system and cannot be addressed with a Remote Function Call.
Controllers:
It comprises business logic and application data. Controllers assess the data of an incoming request based on a model and then select a suitable view for rendering the response to the user.
These are usually wriiten as :
Example : 'main.do' when you create a controller.
The Navigation Structure:
It determines which navigation request is used to direct the navigation process from a particular page to the subsequent one.
A BSP page contain the following:
Pages with flow logic:
The pages with flow logic are thiose pages whose process flow is controlled by event handlers.A page with flow logic implements the flow logic via the event handlers and has page attributes and the type definitions
Page fragments:
Page fragments are created in the same way as normal BSP pages, but are reffered to as page fragments.They differ from normal pages only in that thay donot have separate event handling, no type definition and no separate attributes.These pages can be introduced inside the Pages with flow logic by simply dragging that page into the page with flow logic's layout.
View:
Views are used to vizualise data that is made available as part of the MVC_(Model View Controller).
Now lets us go with an example for creating the BSP application pages in detail.
Defining BSP application:
1. Open the Object Navigator and launch transaction SE80.
2. Select BSP Application category in the object type dropdown
3. Enter the name of new BSP application Zapplication.(see figure)
4. Click Enter key to confirm your entry. The system checks to see whether or not a BSP application with that name already exists in the R/3 System. If there is none, the Create Object dialog box appears.
5. The dialog box titled " Web Application Builder: Create BSP Application" is displayed. Choose "Yes" to create the BSP application.
6. In the subsequent dialog box provide a meaningful Short Description of the BSP application and press the Enter key.
7. As a last step, assign the package to the service.
In order to create the first page, right-click on the ZAPPLICATION node and select create->page.
A pop-up window appears asking for page name and its description with the page type.The three types are explained earlier.
Now, the system will open the page in the editor frame of the "Layout" tab with some default HTML code
Lets us consider the sample requirement of what we have to achive.
Our output page should have an image,some text and a button which helps us to move to the next page.
We can get a clear idea of what our requirement is from the figure below:
The second page with two button 'Back' and 'Close the window'.
The different tabs in the frame are as below-
Layout tab
This is where the layout of each page is developed, using a combination of HTML and ABAP you are able to define what the screen looks like and how data is displayed.
Event handler
Define events such as OnCreate, OnInitialization etc. (I.e. OnInitialization could load an internal table) with data.
Page attributes
Define data types used on page (i.e. internal table, work area).
Type definition-Data declarations.
Event handlers in detail explains as-
ONCREATE - This handler is called when the page is first opened.The handler is always called when a BSP class is generated.
ONREQUEST - This handler is called at each access(request) to page.It is used to restore internal data structures from a request.
example : when we call a F4 help in a page at that time we can explicitly call a page and program the action in the 'ONRQUEST'.
ONINITIALIZATION - This handler is used for data retrieval.Ideally this data is saved in page attributes and is then also available in the layout.This handler is triggered after the onrequest handler.
ONMANIPULATION - This event handler permits the subsequent manipulation of the http data flow.It is processed once the layout elements of the page have been generated.This handler is rarely used.
ONINPUTPROCESSING - The task of this handler is to manage user inputs,input checks, and navigation(on the same page or subsequent changes). Certain requirements need to be met for this handler to be triggered.
ONDESTROY - This handler is called immediately before deleting a page instance.It is the opposite to the oncreate handler.
In the layout tab delete the default code and write the following code for our requirement.
In the above code,besides the basic HTML structure, the page directive is pre-generated:
<%@ page language="abap" %> or <%@ page language="javascript" %>
The page directive determines the script language. The script languages supported are currently ABAP and JavaScript.
The image source can be inserted with the help of MIME.In the left side of the menu right click on the BSP application name create->MIME object->import.The following screen appears when import starts.
Select the required image and fill the description and the image name.The image name is given in the HTML code.
The textboxes,button,etc. are defines in HTML under <form></form> tags.In our code we have defined a button as 'Next' with the name as 'onInputProcessing(next)'.This button role is to navigate to the next page and hence the use of event handler 'onInputProcessing(next).
Now go to Event handler tab and select the appropriate handler from the drop down menu.In our case its the 'onInputProcessing'.
Now write the follwing codes under event handler 'onInputprocessing'
In the above code event_id is an object in 'onInputProcessing' and this used with the case statement.Since we have only one Button we have only one case statement which clearly shows the page to navigate to the second page i.e, the next page.
Now create the second page as explained earlier and name it as 'second.htm'.We are going to get the default code as earlier.Remove the default code and write the following code. 
From the above code we can see that we have created two buttons one is back and the other is for closing the window.Both the events are user interface and hence they come under 'OnInputProcessing' event handler.You can observe the second button above stating the extra function 'Onclick'.This is a predefined function in javascript which helps in closing the window by confirming with the pop up window.
Repeat the process in the event handler for the second page as done to the first page.A small change in the code is "navigation->net_page( 'tofirst' )."
After writing all the code save and activate the BSP page.
Now in the Navigation tab we need to define the start page,navigation request and end page i.e, the target page.(see figure) 
Save all the pages and BSP application and activate.
Execute the application.
The output opens in a new window and asks for a userID and password.
Give SAP user-name and password and the press 'OK'.
And here is the output.