HTML to ASP (Active Server Pages) refers to the process of integrating server-side logic with HTML content using ASP (also known as Classic ASP or ASP Classic), a scripting environment developed by Microsoft. ASP allows you to dynamically generate HTML content on the server before it is sent to the client's browser.
In ASP, HTML is often embedded within the script, and server-side code (usually written in VBScript or JScript) is used to manipulate the content dynamically, process form data, interact with databases, and more.
Why Convert HTML to ASP?
Dynamic Content: ASP allows you to generate dynamic HTML content based on user input, database queries, or other server-side processes.
Server-Side Logic: Unlike static HTML, ASP enables server-side scripting, making it easier to handle things like form submissions, user authentication, and database interaction.
Database Integration: ASP is commonly used to interact with databases like Microsoft SQL Server, allowing you to generate content based on data stored in databases.
Separation of Concerns: With ASP, HTML content can be separated from business logic, making the code easier to maintain and update.
Steps to Convert HTML to ASP
To convert a static HTML page into an ASP page, you typically add server-side logic and scripting between or inside your HTML structure. Below is a guide with some examples on how to convert static HTML to ASP.
1. Embedding Server-Side Code in HTML
ASP allows you to embed server-side code into your HTML using special <% %> delimiters. This enables dynamic content generation.
Example 1: Static HTML Page Converted to ASP
HTML (Static Content):
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Today is a great day!</p>
</body>
</html>
Converted to ASP (Dynamic Content):
asp
<%@ Language="VBScript" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
<%
' Server-side code to get the current date
Response.Write "Today is " & Date
%>
</p>
</body>
</html>
Explanation:
The ASP page includes a block of server-side code inside <% %>.
The Date function is used to dynamically generate the current date, and the Response.Write method outputs it to the HTML content.
2. Handling Form Submissions with ASP
ASP can handle form submissions, process the data, and display results without needing to reload the page.
Example 2: HTML Form to ASP for Form Handling
HTML Form (Static Content):
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="process_form.asp" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
ASP Page (process_form.asp):
asp
<%@ Language="VBScript" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submission</title>
</head>
<body>
<h1>Thank you for contacting us!</h1>
<p>
<%
' Retrieve form data from POST request
Dim name, email
name = Request.Form("name")
email = Request.Form("email")
' Display the submitted information
Response.Write "Hello, " & name & ". We have received your email: " & email
%>
</p>
</body>
</html>
Explanation:
The form in the HTML sends data to process_form.asp using the POST method.
The Request.Form object is used to capture the form data (name and email).
The server-side ASP script processes this data and dynamically displays it in the response.
3. Accessing Databases with ASP
One of the key advantages of using ASP is the ability to interact with databases like Microsoft SQL Server or Access to fetch data dynamically.
Example 3: Displaying Data from a Database
ASP Page to Fetch Data from a Database (database.asp):
asp
<%@ Language="VBScript" %>
<%
' Connect to the database
Dim conn, rs, connString, sqlQuery
connString = "Provider=SQLOLEDB;Data Source=localhost;Initial Catalog=mydb;User ID=myuser;Password=mypassword"
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open connString
' Query to fetch data from the database
sqlQuery = "SELECT Name, Email FROM Users"
Set rs = conn.Execute(sqlQuery)
' Display data in an HTML table
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Users List</title>
</head>
<body>
<h1>Users List</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<%
' Loop through the database results and display in the table
Do While Not rs.EOF
Response.Write "<tr><td>" & rs("Name") & "</td><td>" & rs("Email") & "</td></tr>"
rs.MoveNext
Loop
%>
</table>
</body>
</html>
<%
' Close the database connection
rs.Close
Set rs = Nothing
conn.Close
Set conn = Nothing
%>
Explanation:
The ASP page connects to a SQL Server database using ADODB.Connection.
It runs a query to fetch users' names and emails from the Users table.
The data is displayed dynamically inside an HTML table using a Do While loop.
The Response.Write method outputs the database results to the HTML.
4. Using Include Files for Reusability
ASP allows you to reuse code by including external files. This is useful for adding common sections (like headers, footers, or navigation menus) to multiple pages.
Example 4: Using #include in ASP
header.asp (Reusable Header):
asp
<div>
<h1>My Website</h1>
<nav>
<a href="index.asp">Home</a> |
<a href="about.asp">About</a> |
<a href="contact.asp">Contact</a>
</nav>
</div>
index.asp (Main Page with Included Header):
asp
<%@ Language="VBScript" %>
<%@ Include file="header.asp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
</head>
<body>
<h2>Welcome to My Website</h2>
<p>This is the homepage of my dynamic website!</p>
</body>
</html>
Explanation:
The header.asp file contains reusable HTML for the header and navigation.
The index.asp page includes the header.asp file, which makes it easy to reuse the header across multiple pages.
Any updates to the header can be made in header.asp and will be reflected on all pages that include it.