Create a Simple BSP - Simple BSP to display text and call section BSP page using HTML
Step 1 - Create new BSP Application
Using SE80 create BSP Application (I.e. ZTESTBSP).
Step 2 - Create new page (index.htm)
Right click on the BSP object name and select create->page (with flow logic).
Step 3 - Populate 'Layout' tab
Insert the following code into index.htm layout section, Now Save and activate the page and bsp object.
<%@page language="abap"%>
<%@extension name="htmlb"
prefix="htmlb"%>
<html>
<head>
<link rel="stylesheet" href="../../sap/public/bc/bsp/styles/sapbsp.css">
<title> start page of bsp
</title>
</head>
<body>
<h1>Welcome to the</h1>
<h2>SAP Web Application Server</h2>
<p>
<font size="...">Example text</font>
<% do 5 times. %>
<font size="<%=sy-index%>">
Example text
</font>
<% enddo. %>
<form action=start.htm>
<input type="submit"
value="push" name="Push">
</body>
</html>
Step 4 - Create new page (Start.htm)
Right click on BSP object name and select create->page (with flow logic).
Step 5 - Populate 'Layout' tab
Insert the following code into start.htm layout section.
<%@page language="abap"%>
<%@extension name="htmlb"
prefix="htmlb"%>
<html>
<head>
<link rel="stylesheet" href="../../sap/public/bc/bsp/styles/sapbsp.css">
<title> page 2 of bsp
</title>
</head>
<body>
<h2> list of airlines </h2>
<table border="1">
<tr>
<th>
No. </th>
<th>
Airline </th>
<th>
ID </th>
<th>
URL </th>
</tr>
<% LOOP AT it_flight INTO wa_flight. %>
<tr>
<td> <%=SY-TABIX
%> </td>
<td> <%=wa_flight-carrid %> </td>
<td> <%=wa_flight-connid %> </td>
<td> <%=wa_flight-fldate %> </td>
</tr>
<% ENDLOOP. %>
</table>
</body>
</html>
Step 6 - Setup 'Page Attributes' (Data declarations)
it_flight
wa_flight
FLIGHTTAB
SFLIGHT
Step 7 - Insert data retrieval code (Event Handler)
Insert code to populate internal table with data from flight table. Place in the OnInitialization event within the 'Event Handler' tab.
SELECT CARRID CONNID FLDATE
UP TO 10 ROWS
FROM sflight
INTO CORRESPONDING FIELDS OF TABLE it_flight.
Step 8 - Activate and test
Save everything and press the activate button, if all is ok return the the initial.htm page and press the test button, this should open up a browser window and display your newly created BSP.
Click on the html button to go to the second page (start.htm)
See here for more information and examples of BSP development