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

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

                <img style="border: solid 1px gray;" id="Img14" 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="Img15" src="images/winforms.png" runat="server" /></a><br />

            <br />

            <a style="margin-right: 9px; width: 150px;" href="http://winforms.ru/">

                <img style="border: solid 1px gray;" id="Img16" src="~/images/Снимок.JPG" runat="server" /></a><br />

            <br />

        </div>

    </div>

    <!-- центральный блок (для динамического контента)-->

    <div id="middle" class="midlClass">

        <div id="wraper">

            <ul id="navbar">

                <li><a href="Home.aspx" id="homepage" class="home">Home</a></li>

                <li><a href="Shop.aspx" class="shop">Shop</a></li>

                <li><a href="About.aspx" class="about">About</a></li>

                <li><a href="Articless.aspx" class="articless">Articless</a></li>

                <li><a href="Contact.aspx" class="contact">Contact</a></li>

                <li><a href="FAQ.aspx" class="faq">FAQ</a></li>

            </ul>

            <br />

        </div>

        <br />

        <br />

        <p style="margin-top: 2px;">

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

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

            </asp:ContentPlaceHolder>

        </p>

    </div>

    <!-- футер -->

    <div id="footer">

    </div>

    </form>

</body>

</html>

Створити майстер-сторінку не так вже й важко, якщо є вже заготовлені вирізані ескізи картинок, та накиданий шаблон в графічному редакторі. Все що залишається, це підключити в потрібні місця ці ескізи. Для перевірки проведеної роботи натиснемо клавішу f5 для того щоб запустити проект в режимі від лагодження, якщо виникнуть якісь помилки, компілятор видасть повідомлення про помилку. Якщо помилок не виникло сайт набуде вигляду:

Рис. 3.3. Сайт під час виконання

На даному етапі створено основу для такого рівня сайту, як користувацький інтерфейс. Спроектовано і реалізовано майстер-сторінку з спільними елементами керування і графікою, для всіх сторінок. На мою думку це велика перевага, стосовно випадку, якщо захочеться змінити дизайн повністю чи частково, не доведеться змінювати код всіх сторінок а лиш одної майстер-сторінки. Створено механізм навігації сайту, відображення меню. В наступному розділі перейдемо до більш серйозних питань, таких як створення бази даних та робота з даними на сторінках .aspx.

3.2. Створення бази даних та необхідних класів для роботи з нею

В цьому розділі будемо закладати фундамент для іншої частини сайту, створивши ряд базових класів для доступу до даних та виведення їх на сторінку. Також в цьому розділі буде використано декілька нових елементів керування, таких як GridView – для відображення товару в лінійній формі, елемент керування SqlDataSourse та інші.

Даний Web-сайт складається з декількох окремих модулів для керування даними, такими як реклами, автотовари. Однак за цим всім ховаються наступні завдання які потрібно вирішити:

• Виділити місце на сторінці, де будуть розміщені новини які зчитуються з бази даних.
• Створити сторінку для магазину (Shop.aspx).
• Спроектувати архітектуру бізнес-об’єктів, щоб представити дані в об’єктно-орієнтованому вигляді на рівні доступу до даних, в об’єктно-орієнтованому форматі.
• Відокремити код доступу до даних від коду бізнес-логіки і коду представлення даних, так щоб підвищити масштабність проекту. Це називається багаторівневим проектом.
• При додаванні даних в базу даних передбачити перевірку на коректність введення даних в поля вводу.

3.2.1. Створення бази даних в SQL Server 2005 Express Edition

Якщо два продукти від фірми Microsoft то між собою вони інтерпретуються дуже добре. Тому сміло створюємо базу даних на машині SQL Server 2005 Express Edition. Таблиця “Table_site” призначена для реклам, які будуть розміщені у лівому блоці а таблиця “Table_Dusku2” для титанових дисків.

Рис. 3.4. Графічне представлення таблиць Table_Dusku2 (автотовари) i Table_site (реклами сайтів)

3.2.2. Створення рівня доступу до даних

Оскільки в мові програмування C# робота поза класом не можлива, створимо клас Product, функцією якого буде створення об’єкту класу Product, а також метод який дає змогу записувати як прості текстові дані, так і двійкові дані (графічні зображення). Нижче наведено програмний код класу Product:

/// <summary>

/// клас ProductВ не

/// </summary>

public class Product

{

 

    private string firma;

    private string parameters;

    private string pictures;

    private string AltText;

    private string description;

    private string radius;

    private string myConnectionString;

    private int idprod;

 

    public string Firma

    {  get { return firma; } }

 

    public string Parameters

    {  get { return parameters; } }

 

    public string Pictures

    {  get { return pictures; } }

 

    public string _AltText

    {  get { return AltText; }  }

 

    public string Description

    {  get { return description; } }

 

    public string Radius

    {  get { return radius; }  }

 

    public int ProdID

    {  get { return idprod; }  }

 

 

    /// <summary>

    /// конструктор з параметрами

    /// </summary>

    /// <param name="firma">виробник</param>

    /// <param name="parameters">параметри диска</param>

    /// <param name="pictures">зображення</param>

    /// <param name="AltText">якийсь текст</param>

    /// <param name="description">опис, може містити багато тексту</param>

    /// <param name="radius">радіус диска</param>

    public Product(string firma, string parameters, string pictures, string

       AltText, string description, string radius,

            int IDprod)

    {

        this.firma = firma;

        this.parameters = parameters;

        this.pictures = pictures;

        this.AltText = AltText;

        this.description = description;

        this.radius = radius;

        this.idprod = IDprod;

    }

 

    /// <summary>

    /// метод який додає запис у таблицю Table_Dusku2

    /// </summary>

    public void InsertToShunu()

    {

 

        myConnectionString = WebConfigurationManager.ConnectionStrings

 ["aspnetdbConnectionString"].ConnectionString;

        SqlConnection connection = new SqlConnection(myConnectionString);

 

        SqlCommand cmd = new SqlCommand(

           "INSERT INTO Table_Dusku2 (ID, ImageByte, AltText, parameters, description, firma, radius)" +

           "VALUES (@ID, @ImageByte, @AltText, @parameters, @description, @firma, @radius)", connection);

 

 

        FileStream fStream = new FileStream(

                pictures, FileMode.Open, FileAccess.Read);

 

        Byte[] imageBytes = new byte[fStream.Length];

        fStream.Read(imageBytes, 0, imageBytes.Length);

 

        SqlParameter par = new SqlParameter(

            "@ID", SqlDbType.UniqueIdentifier);

        par.Value = Guid.NewGuid();

        par.Direction = ParameterDirection.Input;

        cmd.Parameters.Add(par);

 

        par = new SqlParameter("@ImageByte", SqlDbType.Image);

        par.Value = imageBytes;

        cmd.Parameters.Add(par);

 

        par = new SqlParameter("@AltText", SqlDbType.NVarChar);

        par.Value = AltText;

        cmd.Parameters.Add(par);

 

        par = new SqlParameter("@parameters", SqlDbType.NVarChar);

        par.Value = parameters;

        cmd.Parameters.Add(par);

 

        par = new SqlParameter("@description", SqlDbType.NVarChar);

        par.Value = description;

        cmd.Parameters.Add(par);

 

        par = new SqlParameter("@firma", SqlDbType.NVarChar);

        par.Value = firma;

        cmd.Parameters.Add(par);

 

        par = new SqlParameter("@radius", SqlDbType.NChar);

        par.Value = radius;

        cmd.Parameters.Add(par);

 

        par = new SqlParameter("@IDprod", SqlDbType.Int);

        par.Direction = ParameterDirection.Output;

        cmd.Parameters.Add(par);

 

        connection.Open();

        cmd.ExecuteNonQuery();

 

        connection.Dispose();

    }

}

Для доступу до даних та подальшого їх зчитування створимо ще один клас який міститиме статичний метод, і повертатиме колекцію об’єктів класу Product.  Нижче наведено програмний код класу BLL:

public class BLL

{

    public static List<Product> GetAllProduct()

    {

        using (SqlConnection cn =

            new SqlConnection(WebConfigurationManager.ConnectionStrings["aspnetdbConnectionString"].ConnectionString))

        {

 

            string query = @"SELECT ImageByte, AltText, parameters, description, firma, radius, IDprod  

                FROM [Table_Dusku2]";

            var cmd = new SqlCommand(query, cn);

 

            cn.Open();

 

            SqlDataReader reader = cmd.ExecuteReader();

            List<Product> product = new List<Product>();

            while (reader.Read())

            {

                Product prod = new Product(

                    reader["firma"].ToString(),

                    reader["parameters"].ToString(),

                    "",

                    reader["AltText"].ToString(),

                    reader["description"].ToString(),                  

                    reader["radius"].ToString(),

                    (int)reader["IDprod"]

                );

               

                product.Add(prod);

            }

            return product;

        }

}

Для зчитування даних можна б було просто обійтись простим запитом SQL а саме вибіркою даних за допомогою оператора Select, але цього недостатньо, оскільки, ми не зможемо відобразити графічні зображення, тому, що це двійкові дані. Тому для цього, додатково використаємо обробник HTTP і модуль HTTP.

Відомо що кожен запит в додатку ASP.NET обробляється спеціалізованим компонентом, відомим як обробник HTTP. Обробник HTTP є основою платформи обробки запитів ASP.NET. Всі обробники HTTP визначаються в розділі <httpHandlers> файлу web.config. Нижче показано фрагмент коду, де реєструюється обробник подій для відображення графічного зображення на сторінці:

<httpHandlers>

      <add verb="*" path="ImageFromDB.ashx" type="ImageFromDB" />

</httpHandlers>

Як тільки обробник зареєстровано в файлі конфігурації проекту, можна створити спеціальний обробник HTTP, реалізуючий інтерфейс IHttpHandler. Даний файл має розширення .ashx. В цьому файлі напишемо наступний код:

<%@ WebHandler Language="C#" Class="ImageFromDB" %>

де, вказано в якому класі буде реалізовано саму обробку події. Нижче наведено програмний код класу ImageFromDB:

public class ImageFromDB : IHttpHandler

{

 

    public void ProcessRequest(HttpContext context)

    {

        string connectionString =  

System.Web.Configuration.WebConfigurationManager.ConnectionStrings["aspnetdbConnectionString"].ConnectionString;

        long IDprod = Convert.ToInt32(context.Request.QueryString["IDprod"]);

 

        using (var conn = new SqlConnection(connectionString))

        using (var command = new SqlCommand(

            "SELECT ImageByte FROM Table_Dusku2 WHERE IDprod = @IDprod", conn))

        {

            command.Parameters.Add("@IDprod", SqlDbType.Int).Value = IDprod;

            conn.Open();

 

            context.Response.ContentType = "image/gif";

            context.Response.BinaryWrite((byte[])command.ExecuteScalar());

            conn.Close();

        }

    }

 

    public bool IsReusable

    {

        get { return true; }

    }

}

В даний обробник подій буде передаватись ID номер запису з бази даних, для якого обробник подій поверне у графічному форматі зображення на сторінку .aspx, а саме на ту сторінку з якої й буде звертання.

3.3. Адміністративна сторона

На стороні клієнта на сторінці Shop.aspx відображаються товари які потрібно оновлювати, доповнювати, редагувати і т.д. Тому, спочатку реалізуємо сторону адміністратора. Головна сторінка адміністратора “Adminka.aspx” має наступний вигляд:

Рис. 3.4. Сторінка Adminka.aspx

 

Дана сторінка містить посилання на інші сторінки які дають змогу працювати з даними а також зробити експорт даних з бази даних в XML-файл.

3.3.1. Сторінка адміністрування AdminProduct.aspx

Рис. 3.5. Сторінка EditProduct.aspx

Для додавання даних спочатку потрібно заповнити всі поля, оскільки прикріплено валідатори до всіх текстових полів. Даний валідатор перевіряє чи заповнені поля. При натисненні на кнопці “ok” відбудеться завантаження картинки на сервер і додадуться дані в базу даних. На кнопці “ok” міститься наступний код:

protected void LoadToDataBase_Click(object sender, EventArgs e)

    {

        string strTodabase = "D:\\WebSite2\\Upload\\ImageProduct\\";

        //перевіримо факт відправки файла

        if (Foto.PostedFile.ContentLength != 0)

        {

            try

            {              

                // стрічка яку передамо в базу даних, тобто шлях до картинки

                // на сервері, оскільки картинка буде завантажуватись з

                // каталогу який є на сервері

               

 

                // отримати шлях фізичного каталогу до підкаталогу Upload

                string destDir = Server.MapPath("./Upload/ImageProduct");

 

                // зчитати ім'я з повноого шляху вихідного файла

                string fileName = Path.GetFileName(Foto.PostedFile.FileName);

 

                // приєднаємо назву файла

                strTodabase += fileName;

                // зкомбінувати цільовий каталог з іменем файлу

                string destPath = Path.Combine(destDir, fileName);

 

                // зберегти файл на сервер

                Foto.PostedFile.SaveAs(destPath);

                Label1.Text = "Все добре. файл успішно збережено на сервері" +

strTodabase.ToString();               

            }

            catch (Exception err)

            {

                Label1.Text = err.Message;

            }

        }

 

        Product prod = new Product(Vurobnuk.Text, Parametru.Text,

strTodabase.ToString(),

                                    DateTime.Now.Day.ToString() + "." +

DateTime.Now.Month.ToString() + "." + DateTime.Now.Year.ToString(),

                                    Dani.InnerText.ToString(), Radius.Text,0);

        prod.InsertToShunu();

         strTodabase = "";

}

3.3.2. Сторінка адміністрування EditProduct.aspx

Рис. 3.6. Сторінка ProductAdd.aspx

Для того що б модифікувати дані, обирається певний рядок і вносяться зміни, після чого потрібно натиснути кнопку оновити. Нижче наведено необхідний код який містить сама сторінка “EditProduct.aspx”: