15. session 15 data binding

Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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 TDC1. 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 TDC1. 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 - DemoDemo: 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 - DemoDemo: 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 - DemoDemo: 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 - DemoDemo: 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