Реалізація ASP.NET сторінок каталогу автотоварів

Рис. 1.2. модель постачальників ADO.NET.

 

  Розділ 2. Створення проекту ASP.NET

2.1. Засоби розробки Visual Studio

2.1.1. Створення проекту в Visual Studio

При першому запуску IDE-середовища відображається початкова сторінка. На ній доступні різні користувацькі опції, а також посилання на он-лайн-інформацію, таку як останні статті MSDN, які постійно оновлюються та поповнюються. Для створення нового додатку ASP.NET потрібно обрати File (Файл) => команду New (Новий ) => New Website (Новий Web – сайт). Visual Studio відобразить діалогове вікно New Web Site (Новий Web – сайт), як показано на рис. 2.1.

рис. 2.1. створення Web-сайту в Visual Studio

У вікні New Web Site можна вказати наступне:

• Шаблон. Визначає файли, з яких буде починатись Web-сайт. Visual Studio підтримує два типи базових додатків: ASP.NET-додаток Web-сайтів і Web-служб. Ці додатки скомпільовані і виконані аналогічним чином. Фактично можна додавати Web-сторінки в додаток Web-служб, а також Web-служби в звичайний Web-додаток. Єдина відмінність в файлах, створених в Visual Studio по замовчуванню. В Web-додатку ви починаєте роботу з зразка Web-сторінки а в Web-службі із зразка Web-служби. Ще Visual Studio містить більш складні шаблони типів сайту, і можна створювати свої шаблони для визначених типів сайтів, чи завантажувати їх із мережі від різних постачальників.
• Місце положення. Визначає місце положення зберігання файлів Web-сайту. Зазвичай вибирається File System (Файлова система) і потім вказуєте папку на локальному комп’ютері або шлях. Проте також можна редагувати Web-сайт безпосередньо по HTTP або FTP (File Transfer Protocol – протокол передачі файлів). Це корисно при виконанні редагування Web-сайту на віддаленому Web-сервері. З іншого боку, це також тягне за собою додаткові непродуктивні витрати. Звичайно, не слід редагувати безпосередньо виробничий Web-сервер, оскільки зміни є автоматичними і повернення в попередній стан непередбачено.
• Мова. Визначає мову програмування .NET, яка використовується для кодування Web-сайту. Вибирана мова є мовою по замовчуванням для проекту. Це означає, що можна явно додавати Web-сторінки, написанні на Visual Basic, до Web-сайту на С# і навпаки (властивість, не доступна в попередніх версіях Visual Studio).

Замість введення місця розташування вручну, можна клацнути на кнопці Browse (Огляд), після чого Visual Studio відобразить діалогове вікно Choose Location (Вибір місця розташування). Вздовж лівої сторони діалогового вікна Choose Location є чотири кнопки, що дозволяють з’єднуватися з різними типами місць розташувань:

• File System (Файлова система). Це найпростіший вибір – необхідно лише проглянути дерево дисків і каталогів або ж спільно використаних ресурсів, що надаються іншими комп’ютерами мережі. Якщо потрібно створити новий каталог для власного застосування, просто клікаєм на піктограмі Create New Folder (Створити нову папку) над верхнім правим кутом дерева каталогів. (Також можна створити в Visual Studio каталог, додавши ім’я нового каталогу в кінці шляху.)
• Local IIS (Локальний сервер). Цей вибір дозволяє проглянути віртуальні каталоги, доступні за допомогою програмного забезпечення Web-хостінгу HS, яке функціонує на поточному комп’ютері.
• FTP Site (FТР-сайт). Ця опція не так зручна, як пошук каталогу – перед підключенням необхідно буде ввести всю інформацію про з’єднання, включаючи FTP-сайт, порт, каталог, ім’я користувача і пароль.
• Remote Web Server (Віддалений Web-сервер). Ця опція – доступ до Web-сайту по визначеному URL (Unified Resource Locator – уніфікований вказівник інформаційного ресурсу) з використанням HTTP. На рис. 2.2. показані всі перераховані типи місць розташувань:

рис. 2.2. Типи місць розташувань

Після того, як зроблено вибір клікаєм Open (відкрити), Visual Studio повернеться до діалогового вікна створення Web – сайту.

Розділ 3. Реалізація ASP.NET сторінок каталогу автотоварів

3.1. Створення дизайну на основі шаблону

Першим кроком при створенні сайту є розробка візуального дизайну, а саме, схеми сайту і використання графіки. Ця візуальна архітектура визначає “зовнішній вигляд і поведінку” сайту з точки зору користувача. Спочатку потрібно вирішити, яке враження хочеться побачити в користувачів про сайт, а потім приступати до написання коду. Одною із основних деталей, є меню та можливість навігації, зображення і організація елементів на сторінці. Меню має бути інтуїтивно зрозуміле і підтримуватись навігацією, тобто користувач має бачити на якій сторінці він знаходиться. Перш ніж приступати до написання коду, слід ознайомитись із спеціальними засобами які доступні в ASP.NET, щоб мати можливість скористатись результатами роботи, зробленої розробниками фірми Microsoft. Добре продумана з технічної точки зору архітектура підвищує ймовірність повторного використання коду і робить це зручним в плані обслуговування. Тепер розглянемо функціональні можливості майстер сторінки (master pages). Ці сторінки застосовуються для поєднання функціональних можливостей в шаблони, які надають загальні елементи для використання їх на декількох сторінках.

Багато розробників починають писати код, не звертаючи увагу на головне завдання сайту: дизайн сайту та зрозумілий і зручний інтерфейс для користування та його обслуговування. Користувацький інтерфейс – це перше що бачить кінцевий користувач. Тому якщо йому не сподобається інтерфейс чи зручність використання, скоріш за все сайт на хорошу та стабільну відвідуваність не претендує. Процес написання рівня користувацького інтерфейсу не означає тільки написання HTML коду для сторінки. Після того як буде розроблена домашня сторінка сайту, розробка інших не займе багато часу, тому що домашня сторінка визначає схему (layout) і елементи навігації, які я застосую для всього сайту.

На практиці будуть реалізовані наступні кроки:

• Привабливий графічний шаблон (схему), виглядаючи однаково як в браузері Internet Explorer, так і в Firefox та інших браузерах.
• Спосіб, який дозволить застосувати даний шаблон для всіх інших сторінок сайту, не копіюючи і не вставляючи весь код в кожну сторінку фізично.
• Навігаційну систему.
• Спосіб, дозволяючи не лише застосовувати для всіх сторінок сайту загальний дизайн, а й загальну поведінку.
• Технологію CSS-sprites, яка надасть красивий вигляд меню.

3.1.1. Проектування схеми сайту

Коли створюється дизайн сайту, зазвичай створюється модель при допомозі якого-небудь графічного редактору, наприклад Adobe Photoshop, щоб подивитись як може виглядати сайт в кінцевому результаті, перш ніж приступати до створення визначеної схеми чи коду HTML. Створивши таку модель, можна показати її потенційним користувачам, спеціалістам по тестуванню і керівництву, щоб отримати більш детальну інформацію. Це може бути простий малюнок, такий як на рис. 3.1., на якому зображені блоки, в яких будуть розміщуватись різні частини сторінки.

Рис. 3.1. Графічне представлення схеми сайту

ASP.NET 2.0 пропонує нову функціональну можливість, яка називається майстер-сторінка (master-page), за допомогою якої можна визначати загальні області, які будуть присутні на кожні сторінці, яка наслідує цю майстер-сторінку, подібно до верхніх, нижніх колонтитулів. Майстер-сторінка дозволяє розміщувати код загальної схеми в один файл і змушувати його візуально унаслідуватись на всі сторінки. Майстер-сторінка містить загальну схему сайту. Сторінки можуть унаслідуватись від майстер-сторінки і розміщувати свої власні дані в тих місцях, де на майстер-сторінці знаходиться елемент керування Content Placeholder. Майстер-сторінка має розширення “.master” і в принципі подібна на користувацький елемент керування. Проста сторінка містить на початку директиву “@ Page” а майстер-сторінки “@ Master”:

<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”MasterPage.master.cs” Inherits=”MasterPage” %>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head runat=”server”>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252” />

<title>Автотовари</title>

</head>

<body>

<form id=”Main” runat=”server”>

<asp:ContentPlaceHolder ID=”MyContent” runat=”server”>

</asp:ContentPlaceHolder>

</form>

</body>

</html>

Ця сторінка подібна на стандартну, за виключенням того, що на початку директива @Master, а на місці, де в .aspx-сторінок додається їх власне вмістище, в неї оголошуються ContentPlaceHolder. Під час виконання ,Майстер-сторінка і сторінка вмістимого будуть поєднані, а це означає, що оскільки майстер-сторінка визначає дескриптори <html>, <head>, <body>, <forms>, сторінкам вмістимого цього робити не потрібно.

<%@ Page Language=”C#” MasterPageFile=”~/MasterPage.master” AutoEventWireup=”true”

CodeFile=”AboutUs.aspx.cs” Inherits=”AboutUs” Title=”…” %>

<asp:Content ID=”Content1” ContentPlaceHolderID=”MyContent” Runat=”Server”>

</asp:Content>

Першим головним моментом тут є те, що в директиві @Page встановлюється значення для атрибуту MasterPageFile. Це значення – це віртуальний шлях до майстер-сторінки, котра повинна використовуватись. Дані які містить сторінка розміщуються в елемент керування Content, значення ContentPlaceHolderID повинно відповідати ідентифікатору одного з елементів ContentPlaceHolder майстер-сторінки. На сторінці вмістимого крім Content розміщувати нічого не можна.

На рис. 3.2. функціональна можливість майстер-сторінки показана в графічному вигляді.

Рис. 3.2. Майстер-сторінка під час проектування і під час виконання

До цього моменту з’ясовано, що потрібно створити і що як робиться, тому нижче представлено повний фрагмент коду майстер сторінки для всього сайту:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

 

<!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>Untitled Page</title>

    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

    <link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" />

</head>

<body>

    <form id="form1" runat="server">

    <!-- шапка -->

    <div id="header">

        <div id="loginBox">

            <div style="right: 0px; top: 0px; padding: 3px 3px 3px 3px">

                <asp:LoginView ID="LoginView1" runat="server">

                    <AnonymousTemplate>

                        <a href="RegisterPage.aspx">зареєструватись</a><br />

                        <a href="LoginPage.aspx">"Залогінитись"</a><br />

                    </AnonymousTemplate>

                    <LoggedInTemplate>

                        <asp:LoginName ID="LoginName1" FormatString="Hello {0}" runat="server" />

                        <asp:LoginStatus ID="LoginStatus1" runat="server" />

                        <br />

                        <a href="EditProfile.aspx">"Редагувати профіль"</a><br />

                        <a href="Adminka.aspx">Адмін</a>

                    </LoggedInTemplate>

                </asp:LoginView>

            </div>

        </div>

        <div id="im">

        </div>

        <hr style="color: Red; margin-bottom: 0px;" />

    </div>

    <!-- левый вертикальный -->

    <div id="left">

        <asp:ObjectDataSource ID="Urldata" runat="server" SelectMethod="GetAllSite" TypeName="BLL_leftCol">

        </asp:ObjectDataSource>

        <div>

            <img id="Img17" style="position: fixed; float: left; padding-left: 0px;" src="images/vertex2.png"

                runat="server" />

            <img src="images/leftCollMenu2.png" style="margin-right: 0px;" runat="server" />

            <a href="http://skillcoding.com/">

                <img style="border: solid 1px gray;" id="Img1" src="images/skillcoding.png" runat="server" /></a><br />

            <br />

            <a href="http://www.techdays.ru/">

                <img style="border: solid 1px gray;" id="Img2" src="images/techdays.png" runat="server" /></a><br />

            <br />

            <a href="http://www.intuit.ru/">

                <img style="border: solid 1px gray;" id="Img3" src="images/intuit.png" runat="server" /></a><br />

            <br />

            <a href="http://www.templatemonster.com/">

                <img style="border: solid 1px gray;" id="Img4" src="images/template.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://www.football.ua/">

                <img style="border: solid 1px gray;" id="Img5" src="images/football.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://coding-plus.com/">

                <img style="border: solid 1px gray;" id="Img6" src="images/codingplus.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://winforms.ru/">

                <img style="border: solid 1px gray;" id="Img7" src="images/winforms.png" runat="server" /></a><br />

            <br />

        </div>

        <div style="border: solid 1px gray;" class="diwersion">

            <asp:Repeater runat="server" ID="Repeater1" DataSourceID="Urldata">

                <HeaderTemplate>

                    <div style="width: 185px; margin: 0 auto;">

                        <img src="images/leftCollMenu.png" runat="server" />

                    </div>

                </HeaderTemplate>

                <ItemTemplate>

                    <div style="width: 185px; padding-bottom: 5px; margin: 0 auto;">

                        <a style="font-size: medium; padding-left: 8px;" href="<%# Eval("Url")%>">

                            <%# Eval("Description")%></a>

                    </div>

                </ItemTemplate>

            </asp:Repeater>

        </div>

    </div>

    <!-- правый вертикальный -->

    <div id="right" style="padding: 2px 2px 2px 2px;">

        <div>

            <img id="Img8" src="images/leftCollMenu2.png" runat="server" />

            <a style="margin-right: 5px;" href="http://auto-tuning.in.ua/index.php?cPath=449">

                <img style="border: solid 1px gray;" id="Img9" src="images/sesija.png" runat="server" /></a><br />

            <br />

            <a href="http://www.techdays.ru/">

                <img style="border: solid 1px gray;" id="Img10" src="images/techdays.png" runat="server" /></a><br />

            <br />

            <a href="http://www.intuit.ru/">

                <img style="border: solid 1px gray;" id="Img11" src="images/intuit.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://www.templatemonster.com/">

                <img style="border: solid 1px gray;" id="Img12" src="images/template.png" runat="server" /></a><br />

            <br />

            <a style="margin-left: 5px;" href="http://www.football.ua/">

                <img style="border: solid 1px gray;" id="Img13" src="images/football.png" runat="server" /></a><br />

            <br />