Write to UsOnline Photo-Album with ASP.NET
Online photo albums are everywhere these days. This tutorial is the ASP.NET version of the simple photo-album developed in PHP in a previous tutorial. Here you will learn how to use ASP.NET and SQL to create an album that will allow you to upload new pictures, delete old pictures, even update any information linked to them.
Just like in the PHP version of this tutorial, the first photo album will be a shadow version of the final result. It will be as simple as it can be, so you'll be able to understand what's going on.
The SQL Database
Creating a SQL database is easy using Microsoft's Enterprise Manager. Just click on Microsoft SQL Servers, followed by SQL Server Group, choose a server, and finally click on Databases. Right click on Databases and select New Database. The database window will pop up, and you will be able to give your database a name. For this tutorial, I chose landscapes.
The name of your database (landscapes) will appear in the database list. Select Tables. Rick click, and then select New Table. For this example, the table-name is pictures, and it has five columns:
Column Name |
Data Type |
Length |
Allow Nulls |
id |
int |
4 |
|
filename |
char |
50 |
|
name |
char |
50 |
|
width |
int |
4 |
* |
description |
varchar |
250 |
* |
Only description and width are allowed to have null values because our photo album can exist without them. Once your table has been created and saved, you need to add some values by right-clicking on that table and selecting open-table and then return-all-rows. For a good photo album, every picture should have a description, and a width that won't make the picture occupy the entire page. Notice that there is no height column in the table. This is because the browser can adjust the picture-size according to its proportions.
The ASP.NET Script
For this script, we'll use C-Sharp, which is clear at the start of the script. Two namespaces are imported: System.Data and System.Data.SqlClient. You can go to http://msdn2.microsoft.com/en-us/library/system.data(VS.71).aspx and learn more about these namespaces. Most of the classes in System.Data are used by ADO.NET, and they allow you to handle data from multiple sources. System.Data.SqlClient contains classes you can use to manipulate SQL data.
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Landscape Photoalbum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
We now get to the heart of the script. Page_Load function will be called each time the page is loaded (hence the name). Inside the function, you'll see the condition if (!Page.IsPostBack), meaning the function bindListControl() will get called only if the page hasn't been reloaded.
public void Page_Load(Object sender, EventArgs e)
{
// Initialize only the first time...
if (!Page.IsPostBack)
{
bindListControl();
}
}
The second function is bindListControl(). The first line inside the function invokes the SqlConnection object. If you want to interact with a SQL database, SqlConnection is the first thing you need. Once the connection is established, the rest of the ADO.NET code knows what database it is communicating with. The name of our connection is Photo_Connection. Notice that the name of our database is landscapes, our server is localhost, our UID is nat, and the password is now. Since not all databases have the same parameters, chances are you may need to replace localhost with server-name you are using, and the same thing goes to the UID, and the password.
Once a connection exists, we need to store the data. ADO.NET provides us with two objects we can use to do this: DataReader and DataSet. Each of them has its advantages and disadvantages. However DataReader can only move forward when reading data, which does not allow us to edit, filter, or manipulate it. Since we will be manipulating data from the Photo-Album in future tutorials, it'd be better to get used to using DataSet. Ours will be called DataSet_Photoalbum.
public void bindListControl()
{
SqlConnection Photo_Connection = new SqlConnection("DATABASE=landscapes;SERVER=localhost;UID=nat;PWD=now");
SqlDataAdapter Photoalbum_Adapter = new SqlDataAdapter("SELECT * FROM pictures", Photo_Connection);
DataSet Photoalbum_Dataset = new DataSet();
Photoalbum_Adapter.Fill(Photoalbum_Dataset, "Albums_Table");
Photo_Connection.Close();
DataList1.DataSource = Photoalbum_Dataset.Tables["Albums_Table"];
DataList1.DataBind();
}
</script>
<body>
<h1>Landscape Photoalbum:</h1>
<br />
<center>