<% ASP на блюдечке %>. Часть 13

Формализация подхода разработки Web-интерфейсов к базам данных

Рубен Садоян

Введение

Из чего состоит Web-интерфейс

Полезные советы, или Прежде чем приступать

Правила компоновки (написания) функционального модуля

Проверка правильности заполнения полей формы

Обработка введенных значений

Заключение

Введение

Рассмотренные нами в предыдущих частях настоящей статьи множественные примеры, по сути, в той или иной степени представляли разнообразные интерфейсы к базам данных. Однако ни разу нами не была предпринята попытка формализации подхода к созданию произвольных Web-интерфейсов. В настоящей статье мы попробуем это сделать, рассмотрев наиболее полный набор логических компонентов, составляющих Web-интерфейс, с функциональной точки зрения и определив последовательность шагов, ведущих к скорейшему и оптимальному способу разработки Web-интерфейса к базе данных.

Целью настоящей статьи является формализация подхода к созданию наиболее типичного и полнофункционального Web-интерфейса к базам данных. Согласитесь, что задача весьма актуальна, тем более, что она требует знаний в самых различных областях Web-программирования. Статья будет крайне полезна начинающим Web-программистам, а также тем, кто уже свободно ориентируется в программировании баз данных, но хотел бы упорядочить свое представление о порядке решения задач по разработке Web-интерфейсов и ознакомиться с приемами, значительно облегчающими и ускоряющими этот процесс.

В начало В начало

Из чего состоит Web-интерфейс

Разумеется, речь идет о наиболее типичном Web-интерфейсе. Прежде всего это, как правило, система идентификации пользователей, призванная недопустить несанкционированный доступ к данным. Понятно, что само приложение должно содержать некую главную часть, предоставляющую пользователям доступ к данным с целью их просмотра и содержащую ссылки на остальной функционал системы. Под остальным функционалом подразумеваются система добавления и редактирования записей в базе данных, система удаления данных, система сортировки данных и поисковая система. Согласитесь, что данный функционал по работе с базами данных, пожалуй, нельзя назвать неполным.

Давайте теперь остановимся на функциональном элементе поподробнее, приведем экземпляр кода, реализующего наиболее типичную его форму, и рассмотрим последовательность выполняемых действий. При этом мы не будем подробно останавливаться на самом коде и на всех компонентах Web-интерфейса, а попробуем описать порядок его разработки, компоновки и взаимодействия отдельных его частей.

В начало В начало

Полезные советы, или Прежде чем приступать

Практически идеальным решением, ведущим к скорейшей реализации проекта, является соблюдение следующих правил при разработке Web-интерфейсов:

  1. Называйте поля базы данных, строго придерживаясь определенной нотации, например поля-счетчики можно называть IDPackage или IDFirm, поля, содержащие логические переменные, — IsChecked, поля с целочисленными значениями — PackageNum или PackageQuant. Это необходимо, чтобы и вы сами, и программисты, которые впоследствии будут работать с проектом, сумели разобраться что к чему. То же самое относится и к правилам определения заглавий таблиц, хранимых процедур и других объектов баз данных.
  2. Разбейте проектируемое приложение на логические модули, максимально отвечающие функциональным компонентам поставленной задачи. Например, если необходимо решить задачу проектирования компонентов добавления записей в базу данных и задачу поиска записей в базе данных, то рекомендуется разбить приложение на два модуля и назвать их add.asp и search.asp соответственно.
  3. Выведите все основные переменные и функции, служащие для манипуляций с данными, в отдельный файл и озаглавьте его соответствующим образом, например так:
    <%
        option explicit
        response.buffer=true
        response.write "<meta charset='visual'>" 
     dim line
        line = "<img src='images/line.gif' width=600 height=1><br><br>"
       
        Sub Header()
          Response.Write "<head><meta http-equiv='Content-Type'    content='text/html; charset=ISO-8859-1'>"
          Response.Write "</HEAD><body bgcolor='#D7D5C0' text='#000000'    link='#000000' vlink='#FFFFFF' alink='#FFFFFF'>"
          Response.Write "<table border=0 cellpadding=0 cellspacing=0>"
        End Sub
       
        Response.Buffer = true
       
        dim dsn,conn,rs,sql
       dsn = "DSN=WBOMS; UID=sa;PWD=;database=WBOMS"
       
        Sub Connect()
         set conn = server.createobject("adodb.connection")
         set rs = server.createobject("adodb.recordset")
         conn.open dsn
        End Sub
        Sub Close()
          rs.close
          set rs = nothing
          conn.close
          set conn = nothing
        End Sub
       
        Sub Footer()
         Response.Write "<tr><td><br>"
         Response.Write "</body></html>"
        End Sub
       
        Sub maxRec()
         set rs_maxid=server.createobject("adodb.recordset")
         sql_maxid = "select max(id) as maxid from MessagesTable"
         Set rs_maxid = Conn.Execute(sql_maxid)
         maxid = rs_maxid("maxid")'new id
         rs_maxid.close
         set rs_maxid=nothing
        End Sub
       
        Function changeColor()
         If flag = 0 Then
          flag = 1
          color = "#FCFBE8"
         Else
          flag = 0
          color = "#C1C0AB"
         End if
        End Function
       
        Sub secure_general()
         If session("status") <> "admin" Then
         Response.Redirect "error.htm"
         End If
        End Sub
       %> 
  4. Далее следуйте основным правилам компоновки модуля Web-приложения (см. ниже).

На первый взгляд некоторые из этих советов могут показаться очевидными, однако, как показывает практика, далеко не все разработчики и не всегда придерживаются этих правил.

В начало В начало

Правила компоновки (написания) функционального модуля

Прежде чем приступать к созданию того или иного модуля, решающего конкретную задачу в пределах Web-приложения, настоятельно рекомендую ознакомиться с материалом настоящего параграфа.

Для начала составьте все необходимые активные компоненты интерфейсной части с помощью одного из HTML-редакторов (рекомендуется использовать не Microsoft Frontpage, а Macromedia Dreamweaver). Набросав все формы, назовите все их компоненты именно так, как называются соответствующие им поля базы данных. Это позволит избежать путаницы при проектировании больших приложений с множественными наборами данных или приложений, в которых осуществляется обработка больших форм (с большим количеством полей), как, к примеру: 

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Placing the order</title>
 </head>
 
   
<body bgcolor="#D7D5C0" text="#000000" link="#000000" vlink="#000000" alink="#FFFFFF">
 <p Style="font: 12pt 'Verdana';"><b>Placing the order:</b></p>
 
 <table border=2 width=700>
 <tr>
 <td Style="font: 10pt 'Verdana';" colspan=2>To place new order, enter the order details/information:</td>
 </tr>
 
 <form name="AddEditForm" action="add.asp?action=add" method="post" onSubmit="return checkMe();">
 
 <tr Style="font: 10pt 'Verdana';"  align=left>
 <td>Customer Salutation: (*)</td>
 <td>
 
 <select id="CustomerSalutation" name="CustomerSalutation" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 150px">
 <option value="Mr." Selected>Mr.</option>
 <option value="Mrs.">Mrs.</option>
 <option value="Ms.">Ms.</option>
 <option value="Dr.">Dr.</option>
 </select>
 </td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';"  align=left>
 <td>Customer First Name: (*)</td>
 <td><input type="text" name="CustomerFirstName" size="40" maxlength="50" Style="font: 10pt 'Verdana';background-color: #FCFBE8;"></td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';"  align=left>
 <td>Customer Last Name: (*)</td>
 <td><input type="text" name="CustomerLastName" size="40" maxlength="50" Style="font: 10pt 'Verdana';background-color: #FCFBE8;"></td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Quantity, Product title and  pages info: (*)</td>
 <td>
 <input type="text" value="1" name="ProdQuantity" size="4" maxlength="5" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 &nbsp;
 <select id="ProductID" name="ProductID" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 150px;">
 </select>
 
 <input type="text" value="" name="OtherProduct" size="30" maxlength="31" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 
 <select id="PagesNum" name="PagesNum" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 150px;">
 <option value="1" Selected>1 page</option>
 <option value="2">2 pages</option>
 <option value="4">4 pages</option>
 </select>
 </td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Payment method:</td>
 <td>
 <select id="PaymentMethod" name="PaymentMethod" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 150px">
 <option value="Visa" Selected>Visa</option>
 <option value="Master Card">Master Card</option>
 <option value="American Express">American Express</option>
 </select>
 </td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>CardHolder Name (First, MI, Last):</td>
 <td>
 <input type="text" name="CardHolderFName" size="15" maxlength="15" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 <input type="text" name="CardHolderMI" size="3" maxlength="4" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 <input type="text" name="CardHolderLName" size="20" maxlength="20" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Card Number:</td>
 <td><input type="text" name="CardNum" size="40" maxlength="40" Style="font: 10pt 'Verdana';background-color: #FCFBE8;"></td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Card Expiration Date: (D:M:Y)</td>
 <td>
 
 <input type="text" name="CardExpDate" size="1" maxlength="2" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 
 <select id="CardExpMonth" name="CardExpMonth" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 42px">
 <option value="1" Selected>1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 </select>  
<select id="CardExpYear" name="CardExpYear" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 55px">
 <option value="2001" Selected>2001</option>
 <option value="2002">2002</option>
 <option value="2003">2003</option>
 <option value="2004">2004</option>
 <option value="2005">2005</option>
 <option value="2006">2006</option>
 <option value="2007">2007</option>
 </select>
 </td>
 </tr>
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td valign="top">Billing Address:</td>
 <td>
 1:<input type="text" name="BillingAdr1" size="40" maxlength="40" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 2:<input type="text" name="BillingAdr2" size="40" maxlength="40" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 <table Style="font: 10pt 'Verdana';">
 <tr>
 <td>Type:</td>
 <td>
 <select id="BillingAdrType" name="BillingAdrType" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 55px">
 <option value="Apt." Selected>Apt.</option>
 <option value="Ste.">Ste.</option>
 <option value="Flr.">Flr.</option>
 </select>
 
 &nbsp;#:
 
 <input type="text" name="BillingAdrNum" size="3" maxlength="4" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 &nbsp;
 Gift: <input type="checkbox" Style="font: 10pt 'Verdana';" name="IsGift" value="off">
 </td>
 </tr>
 <tr>
 
 <td>City:</td>
 <td>
 <input type="text" name="BillingCity" size="20" maxlength="20" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr>
 <td>State:</td>
 <td>
 <input type="text" name="BillingState" size="20" maxlength="20" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr>
 <td>Zip Code:</td>
 <td>
 <input type="text" name="BillingZip5" size="4" maxlength="5" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">-
 <input type="text" name="BillingZip4" size="3" maxlength="4" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr>
 <td>Country:</td>
 <td>
 <input type="text" name="BillingCountry" size="20" maxlength="20" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 <input Style="Width: 200px; font: 10pt 'Verdana';" type="button" name="CopyToSAdr" value="Copy to Shipping Address"></td>
 </tr>
 
 </table>
 
 </td>
 </tr>
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td valign="top">Shipping Address:</td>
 <td>
 1:<input type="text" name="ShipAdr1" size="40" maxlength="40" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 2:<input type="text" name="ShipAdr2" size="40" maxlength="40" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 <table Style="font: 10pt 'Verdana';">
 <tr>
 <td>Type:</td>
 <td>
 <select id="ShipAdrType" name="ShipAdrType" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 55px">
 <option value="Apt." Selected>Apt.</option>
 <option value="Ste.">Ste.</option>
 <option value="Flr.">Flr.</option>
 </select>
 &nbsp;#:
 <input type="text" name="ShipAdrNum" size="3" maxlength="4" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr>
 <td>City:</td>
 <td>
 <input type="text" name="ShipCity" size="20" maxlength="20" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr>
 <td>State:</td>
 <td>
 <input type="text" name="ShipState" size="20" maxlength="20" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr>
 <td>Zip Code:</td>
 <td>
 <input type="text" name="ShipZip5" size="4" maxlength="5" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">-
 <input type="text" name="ShipZip4" size="3" maxlength="4" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr>
 <td>Country:</td>
 <td>
 <input type="text" name="ShipCountry" size="20" maxlength="20" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 <input Style="Width: 200px; font: 10pt 'Verdana';" type="button" name="CopyToBAdr" value="Copy to Billing Address"></td>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Gift Recipient Name:</td>
 <td>
 First:
 <input type="text" name="GRFirstName" size="20" maxlength="20" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 &nbsp;
 Last:
 <input type="text" name="GRLastName" size="20" maxlength="20" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Phone: (*)</td>
 <td>
 Area Code:(<input type="text" name="PhoneAC" size="2" maxlength="3" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">)
 &nbsp;
 Number:<input type="text" name="Phone" size="7" maxlength="7" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Fax:</td>
 <td>
 Area Code:(<input type="text" name="FaxAC" size="2" maxlength="3" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">)
 
 &nbsp;
 Number:<input type="text" name="Fax" size="7" maxlength="7" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>E-mail:</td>
 <td><input type="text" name="Email" size="40" maxlength="40" Style="font: 10pt 'Verdana';background-color: #FCFBE8;"></td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Payment status: (*)</td>
 <td>
 <select id="PaymentStatus" name="PaymentStatus" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 150px">
 <option value="Pending" Selected>Pending</option>
 <option value="Paid">Paid</option>
 </select>
 </td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Shipment status: (*)</td>
 <td>
 <select id="ShipStatus" name="ShipStatus" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 150px">
 <option value="Pending" Selected>Pending</option>
 <option value="Shipped">Shipped</option>
 </select>
 </td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Tracking Number: (*)</td>
 <td>
 <input type="text" name="TrackNum" size="40" maxlength="40" Style="font: 10pt 'Verdana';background-color: #FCFBE8;">
 </td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Rush Charge(USD):</td>
 <td>$<input type="text" name="RushCharge" size="6" maxlength="7" Style="font: 10pt 'Verdana';background-color: #FCFBE8;"></td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Sub-total(USD):</td>
 <td>$<input type="text" name="Cost" size="6" maxlength="7" Style="font: 10pt 'Verdana';background-color: #FCFBE8;"></td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Sales Tax(USD):</td>
 <td>$<input type="text" name="SalesTax" size="6" maxlength="7" Style="font: 10pt 'Verdana';background-color: #FCFBE8;"></td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td>Total(USD):</td>
 <td>$<input type="text" name="Total" size="6" maxlength="7" Style="font: 10pt 'Verdana';background-color: #FCFBE8;"></td>
 </tr>
 
 <tr Style="font: 10pt 'Verdana';" align=left>
 <td colspan=2 align=center>
 <input type="submit" name="submit" value="Place the order" Style="font: 10pt 'Verdana';">&nbsp;
 <input type="Reset" value="Reset form" Style="font: 10pt 'Verdana';">
 </td>
 </tr>
 </form>
 </table>
 
 <br>
 
 <a Style="font: 10pt 'Verdana';" href="main.asp">Back to Order Manager</a>
 </body>
 </html>  

Как видите, разобраться во всех компонентах такой формы, не придерживаясь вышеупомянутых нотаций по ее составлению, будет крайне затруднительно.

В ряде случаев для реализации некоторых элементов формы придется извлекать данные из базы данных, формируя соответствующие тэги HTML. Наиболее типичен случай представления полей списка выбора (ComboBox-а) записями базы данных, например:

<select id="ShipType" name="ShipType" Style="font: 10pt 'Verdana';background-color: #FCFBE8;WIDTH: 150px">
 <%
 Call Connect()
  Sql = "Select * From ShipType Order By ShipType"
  rs.open Sql, conn
  Do While NOT rs.EOF
   Response.Write "<option value=" & rs("ID") & ">" & rs("ShipType") & "</option>"
   rs.MoveNext
  Loop
  Call Close()
 %>
 </select>  

Далее следует замкнуть форму на себе, то есть определить в качестве обработчика формы сам модуль формы и определить скрипт-функцию проверки корректности заполнения полей формы, например:

<form name="AddEditForm" action="add.asp?action=add" method="post" onSubmit="return checkMe();">  

В данном случае страничкой (модулем), инициирующей при приеме данных из текущей формы (модуля Add.asp), является сам модуль Add.asp, которому в качестве параметра передается код выполняемого действия (в данном случае — add). Функцией же обработки правильности введенных значений является функция, вызываемая по событию OnSubmit, которое отрабатывает в пределах окна браузера и до момента передачи данных непосредственно на сервер, а следовательно, предотвращает посылку на сервер некорректной информации и таким образом сокращает количество возможных неудачных попыток передачи данных вследствие опечаток или некорректных действий оператора. Иногда применяется проверка правильности введенных значений и на стороне сервера, в этом случае скрипт-функция в объявлении формы отсутствует и вся проверка осуществляется на соответствующей страничке (если придерживаться данной нами нотации, то на той же самой страничке) проектируемого приложения.

После этого можно приступать к написанию самой составляющей обработки введенных значений и их последующей посылки в базу данных.


Наш канал на Youtube

1999 1 2 3 4 5 6 7 8 9 10 11 12
2000 1 2 3 4 5 6 7 8 9 10 11 12
2001 1 2 3 4 5 6 7 8 9 10 11 12
2002 1 2 3 4 5 6 7 8 9 10 11 12
2003 1 2 3 4 5 6 7 8 9 10 11 12
2004 1 2 3 4 5 6 7 8 9 10 11 12
2005 1 2 3 4 5 6 7 8 9 10 11 12
2006 1 2 3 4 5 6 7 8 9 10 11 12
2007 1 2 3 4 5 6 7 8 9 10 11 12
2008 1 2 3 4 5 6 7 8 9 10 11 12
2009 1 2 3 4 5 6 7 8 9 10 11 12
2010 1 2 3 4 5 6 7 8 9 10 11 12
2011 1 2 3 4 5 6 7 8 9 10 11 12
2012 1 2 3 4 5 6 7 8 9 10 11 12
2013 1 2 3 4 5 6 7 8 9 10 11 12
Популярные статьи
КомпьютерПресс использует