1. DATA BINDING
Session 15

2. Objectives
 Data binding architecture.
 Sorting and filtering data.

3. Database
 A database is an organized collection of related data, which
allows easy access and manipulation of data. The data
from a database can be accessed using three different
types of architectures:
 Single-tier architecture: works with databases that reside on
a single machine. This manipulates the data within the database
immediately.
 Two-tier architecture: stores and maintains database
information on a centralized server. Thus, the client accesses the
database by connecting to the database server. The kind of
architecture is also referred as client/server.
 Three-tier architecture: is a multi-tier client/server
architecture that consists of three parts namely client
machine, application logic, and the database. The client connects to
one or more application servers, which in turn connects to the
database server.

4. Data binding
 Data binding is a process of associating data from the database with
appropriate HTML elements. It helps to display the data from the
database in HTML elements and controls.
 Data binding allows to retrieve data from the database. There are
some features:
 On-demand content management: allows retrieving data from the
DB on demand.
 Platform-independent access: allows accessing, updating, and
retrieving data, irrespective of the browser version or the type of DB.
 Asynchronous processing: performing multiple tasks at the same
time. While requesting or updating data from the DB, can continue
interacting with the web page to perform another task.
 Sorting and filtering data: allows to access and retrieve data
by reordering the data in the database. In addition, filtering of data
allows to retrieve only the data that meet the specified criteria.

5. Architecture of data binding
 Data binding helps you to link data from the database with the
elements of a web page using its various built-in components.
 Data binding architecture consists of four main components:
 Data source object(DSO): acts as an intermediary between
HTML elements and DB. The DSO establishes a connection with the
DB, fetches the data from the DB, and allows HTML elements to
display the fetched data.
 Data consumers: are the elements of an HTML page that display
data provides by DSO.
 Binding agent: determines the DSOs and data consumers from
the elements contained within the web page. After this, the binding
agent checks the synchronization of data transmitted from the DSO
to the consumer.
 Table repetition agent: generally deals with an HTML table
for data repetition. It displays the data supplied by DSO in a table.

6. Data source object
 You can display the data provided by DSOs
by binding the HTML elements to DSOs. To
implement the DSO, you need to consider
certain points such as:
 Determining the means of data transmission
to an HTML page. To transmit the data, DSO
can use different protocols such as the
Hypertext Transfer Protocol (HTTP).
 Checking whether the transmission of data is
synchronous or asynchronous.
 Verifying whether updates are allowed.
 Specifying the data by using a Structured
Query Language (SQL) statement or simple
Uniform Resource Locator (URL).

7. Tabular Data Control
 The tabular data control (TDC) is a data
source object that allows you to display data
accessing the delimited text files. A delimited
text file is a simple file that contains records
of data separated by commas, tabs, …
 The benefits of TDC:
 Display data of simple types.
 Access and retrieve data offline. This can be
done since the delimited file transmitted by
TDC can be stored in your system that
enables you to read data online.
 Avoid access to DB system. This can be done
by writing server side scripts to fetch the data
from the DB into a delimited text file.

8. “.CSV” File
 Delimited text files that are separated by commas are also
known as .csv files (comma separated values or variables).
 The size of a .csv file is very small. The largest .csv file is about
100Kb. These files are widely accessed by another applications.
This is because the overall format of a .csv file is same as it
stores the data as text.

9. Creating a “.CSV” File
 Steps to create a .csv file:
1. Open the spreadsheet application.
2. Define at least three fields that are separated by
commas and placed within double quotes. These
fields are mandatory and case-sensitive.
3. Declare additional fields besides these fields as per
your requirements.
4. Save the file with a proper name followed by .csv file
type.

10. Data binding
 Data binding allows you to link data over
the Internet or Intranet. The steps involved
in the process of data binding are:
1. Adding a data source object on an HTML
page. This allows you to transmit the data
over the internet.
2. Binding HTML elements to the data source
object. This allows you to either display one
record at a time or multiple records in a
tabular format.
3. Writing scripts to enable user interactivity.
This allows you to
navigate, add, update, sort, and filter
records. This step is optional.

11. Properties of TDC
1. AppendData: determines whether the data is appended or the current
data is replaced. Returned type is true or false.
2. CaseSensitive: determines whether the casing should be avoided
while comparing the data.
3. CharSet: recognizes the character set of the data within a text file.
4. DataURL: describes the file location.
5. EOF: determines whether the end of file is reached.
6. EscapeChar: describes a character that specifies the end of data fields.
7. Filter: specifies the way the data is filtered.
8. Language: describes the language of data within the file such as eng-us.
9. recordset: refers to the text file in TDC to fetch data.
10.RowDelim: describes a character that specifies the end of each row.
11.sort: describes the columns to be sorted and the sorting order.
12.UseHeader: determines the file contains the header information.

12. Methods of TDC
1. moveFirst(): moves to the first data in the
data field.
2. moveNext(): moves to the next data from
the current position.
3. moveLast(): moves to the last data in the
data field.
4. Reset(): filters or sorts the data as per the
specified condition.

13. Binding HTML elements
 The different HTML elements that support data
binding are text boxes, frames, tables, lists, and
so on. There are certain attributes that allows
you to bind to your HTML elements.
 Some attributes to bind data:
 DATAFLD: specifies the field of s DSO that should be
bound to an HTML element.
 DATAFORMATAS: specifies the format of data in an
HTML page.
 DATASRC: specifies the source of data for binding an
HTML page.

14. Data binding - Demo
Demo: S15_DataBinding.html

15. Sorting data with TDC
 The TDC implements the mechanism of sorting by providing the
Sort property. The value of this property is the column name
based on which the sorting task will take place.
 Steps to sort the data:
1. The TDC control is embedded in the web page and is linked to
Students.csv file.
2. The table is linked with the TDC and each table column is bound to the
appropriate column in the Students.csv file.
3. A button is created, and when the user click on button the sort() function
is invoked.
4. The sort() function takes the column name parameter that is the key to
sort.
5. The Sort property of TDC is set to the column name passed as the
parameter to the function.
6. The Reset() method of TDC displays the sorted data of the Students.csv file.

16. Sorting - Demo
Demo: S15_SortData.html

17. datapagesize attribute
 A .csv file might contain huge of records, which might not fit
in a table when it loads in the browser. Therefore, you might
want to display only a specific number of records at a time in a
web page to improve readability. This is done by using the
datapagesize attribute in DHTML.
 Steps to use datapagesize attribute :
1. The TDC control is embedded in the web page and is linked to
Students.csv file.
2. The table is linked with the TDC and the datapagesize attribute is set as
10. This means that the details of only 5 records will be displayed in the
browser.
3. A button is created whose value is set to previous. When the user clicks it
the previousPage() of TDC is invoked that displays the previous 10
records.
4. A button is created whose value is set to next. When the user clicks it the
nextPage() of TDC is invoked that displays the previous 5 records.

18. datapagesize - Demo
Demo: S15_PageSize.html

19. Data filtering using TDC
 Data filtering is the means by which you can block or
restrict the display of the data to the users. Data
filtering allows viewing only selected data based on a
criterion.
 Some operators you can use to filter the data:
 =: denotes the equal to operator.
 >: denotes the greater than operator.
 >=: denotes the greater than or equal to operator.
 <: denotes the less than operator.
 <=: denotes the less than or equal to operator.
 <>: denotes the not equal to operator.
 & (AND): denotes whether both the conditions are true.
 | (OR): denotes whether at least one of the conditions is
true.

20. Data filtering using TDC
 Steps to specify the criteria to filter:
1. The TDC control is embedded in the web page and is linked to
Students.csv file.
2. The table is linked with the TDC and is bound to appropriate
columnf of the Students.csv file.
3. A button is created, and when the user clicks on it the
showAll() is invoked to display the records satisfied the
criteria.
4. The Filter property is assigned the value as “StuID > 12”.
This means that the program will filter all records have the ID
greater 12.

21. Filter - Demo
Demo: S15_FilterData.html

22. Summary
 Data binding refers to accessing the text file and
database to fetch and display data from them
dynamically.
 The data binding architecture allows access any
database from any browser, irrespective of the
software and hardware platform.
 Can sort data and filter it to view only limited
data.

23. Summary…
 There are some of features:
 On-demand content Management
 Platform - Independence access
 Asynchronuos Processing
 Sorting and filtering data
 Data binding architecture consists of four main
components:
 Data Source Object (DSO)
 Data consumer
 Binding Agents
 Table repetition Agents