Структура сайта
Структура сайта представлена на рисунке 2.1. В ней присутствуют меню, состоящее из трёх пунктов: «Добавить модель», «Добавить марку», «О сайте». Также на сайте имеется поиск по моделям автомобилей.
Программная реализация web-сайта
Разработка подсистемы просмотра контента
Asp.net обладает элементами управления, которые позволяют представлять информацию в необходимом пользователю виде. В нашем случае, необходимо показывать информацию в виде таблицы. Существует элемент управления GridView, который позволяет представлять информацию в виде таблицы, сортировать её по столбцам и если данные берутся из базы данных, реализовывать функционал по удалению или обновлению записей в базе данных. Готовая реализация контрола (элемента управления) показана на рисунке 3.1.
Рисунок 3.1 – Элемент управления GridView
В данном случае, данные берутся посредством inner join-запроса в базу данных. В GridView поступают все строки из таблицы Cars, а также берётся поле Name из таблицы Brands. При клике на заголовок таблицы (на один из столбцов) происходит сортировка данных по этому столбцу. Возьмём в качестве примера другой GridView, в котором имеется возможность изменять и удалять данные (рисунок 3.2).
Рисунок 3.2 – GridView с возможностью изменения контента
При клике на ссылку Edit происходит следующее (рисунок 3.3).
Рисунок 3.3 – Изменение записей в базе данных
Данный способ редактирования очень удобен, так как он является динамическим редактирование (не происходит даже перезагрузки страницы). Чтобы применить изменение, пользователь должен нажать Update. Если хочет отменить изменения – нажать Cancel.
Разработка подсистемы поиска
Поиск информации на сайте – необходимый атрибут для практически любого web-сайта. Поиск, реализованный в курсовом проекте, представлен на рисунке 3.4.
Рисунок 3.4 – Реализация функции поиска
Данный поиск позволяет искать данные из таблицы Cars по цвету автомобиля, объёму двигателя, марке, и модели (все эти критерии выбираются в выпадающем списке). Найденные результаты добавляются в виде ссылки под самим поиском. При клике на ссылку открывается страница Details, на которой отображается вся информация о найденной записи (рисунок 3.5).
Рисунок 3.5 – Страница Details
Заключение
В данном курсовом проекте был создан пример динамического web-сайта. В курсовом проекте были использованы технологии ASP.NET и базы данных. Содержание курсовой работы:
структура сайта;
наполнение сайта информационным контентом;
разработка подсистемы просмотра контента;
разработка подсистемы поиска и сортировки.
Список используемых источников
Microsoft ASP.NET 3.5 с примерами на c# 2008 для профессионалов / Мэтью Мак-Дональд. – СПб, 2008. – 1424 с.
Приложения
ПРИЛОЖЕНИЕ А
Исходный код страницы Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Курсовой._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Каталог автомобилей</title>
<link rel="Stylesheet" href="Styles/styles.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="header">
<a href="Default.aspx"><h1>Каталог автомобилей</h1></a>
</div>
<div class="nav">
<ul id="nav">
<li><a href="AddBrand.aspx">Добавить марку</a></li>
<li><a href="AddModel.aspx">Добавить модель</a></li>
<li><a href="About.aspx">О сайте</a></li>
</ul>
</div>
<div class="main">
<div class="leftPanel">
<p>Здесь вы можете посмотреть информацию по различным автомобилям
<img src="Images/cars.jpg" width="300" height="300" />
</p>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" EnableModelValidation="True">
<Columns>
<asp:BoundField DataField="name" HeaderText="Марка" SortExpression="name" />
<asp:BoundField DataField="Model" HeaderText="Модель" SortExpression="Model" />
<asp:BoundField DataField="Color" HeaderText="Цвет" SortExpression="Color" />
<asp:BoundField DataField="Volume" HeaderText="Объём" SortExpression="Volume" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM [Brands] WHERE [Id] = @Id" SelectCommand="SELECT b.name, c.Model, c.Color, c.Volume FROM Brands AS b INNER JOIN Cars AS c ON b.Id = c.Brand" UpdateCommand="UPDATE [Brands] SET [name] = @name WHERE [Id] = @Id">
<DeleteParameters>
<asp:Parameter Name="Id" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="name" Type="String" />
<asp:Parameter Name="Id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
</div>
<div class="rightPanel">
Поиск:<br />
<asp:DropDownList ID="SearchParamDropDownList" runat="server" Width="120px">
<asp:ListItem Value="Model">По модели</asp:ListItem>
<asp:ListItem Value="Color">По цвету</asp:ListItem>
<asp:ListItem Value="Volume">По объёму двигателя</asp:ListItem>
<asp:ListItem Value="Brand">По марке</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="SearchTextBox" runat="server" Width="148px"></asp:TextBox>
<br />
<asp:Button ID="SearchButton" runat="server" Height="55px" OnClick="SearchButton_Click" Text="Найти" Width="291px" />
<br />
<div id="searchResults" runat="server"></div>
</div>
</div>
<div class="clear"></div>
<div class="footer">Minsk, BSTU 2014-2015</div>
</form>
</body>
</html>