The Power of Separating Data, Business Logic and Presentation in Web Application Design

1. The Power of Separating Data, Business Logic and Presentationin Web Application Design C. Daniel ChaseThe University of Tennessee at Chattanooga

2. In the beginning… way back in ’93 or so… • Web pages were built by hand • Contained lots of text and little graphics • Did not change—i.e., were Static • Updates were manual • Initially used as a reference resource for information that did not change (much)

3. Early Dynamic Pages • It was realized that web pages did not have to be Static • They could be driven by Applications or Database content • Tools & languages were created and optimized for this capability—for example Perl, PHP & MySQL • But, pages were built with the Application Logic and Presentation and sometimes Data embedded in ONE monolithic ‘web page’

4. Along Comes XML & Friends • With the introduction of XML (eXtensible Markup Language) data exchange formats began to have a common format • XSL (eXtensible Stylesheet Language) for Structure • XPath for selection of XML for use • The use of XML allows you to repurpose data into any format desired

5. CSS for Presentation • Two parts of a web design • Content • Presentation • Content provided by Application & Data • Presentation or ‘Look’ controlled by CSS

6. Pulling it all together…Begin with the End in Mind • Visualize what your end goal is visually • Break it down, what parts are : • Presentation • Static content or Structure • Dynamic Data • How do you need to obtain the Data?

7. Go Forward… One Step at a Time • Write Applications to deliver pure XML output containing the Data to be presented • Convert the raw XML to XHTML for browsers to display with XSLT • Finally, add some ‘Style’ with CSS

8. The UTC Search Engine • Multiple Sources of Data • People – LDAP Query to Novell eDirectory • Departments – MySQL Database • Experts – LDAP Query • Web Sites – MySQL Database • Web Pages – UT’s Ultraseek Search Engine • Each Data source output in XML by Application

9. The Tools • LAMP Server • Linux host – Red Hat Enterprise Linux AS v3 • Apache web server – version 2.0.52 • MySQL – version 3.23 • PHP – version 5.03 • PHPMyAdmin • Easy management of MySQL databases • Demo • EXSLT – Enhanced XSL Template functions • ISO 8601 into RFC 822 date format conversion

10. The Application – Multisearch • PHP 5 Application • Takes advantage of improved XML/XSLT handling in PHP 5 • DOM XML functions • DomDocument() • loadXML() • file_get_contents() • xsltprocessor() • importStyleSheet() • transformToXML()

11. The Application – Multisearch • LDAP Functions to access eDirectory stored information • Example function: get_results() • Function outputs LDAP results in XML • MySQL Functions to access databases of Departments, Web Sites • Example function: get_departments2() • MySQL output as XML • XML RPC call to Ultraseek for web pages • Example function: get_ultraseek() • Output of request is already XML

12. Let’s take a closer look… • Putting our own look to UT’s Search Engine Results • In the beginning, there was raw XML from the Search Engine as Data • XML Example(local) • Then there was the conversion to XHTML for Structure and static content • XSL Example(local) • Applied to the Results(local) • Finally the Presentation was controlled by CSS • CSS Example(Local) • The Final Result • Finished page

13. The Results • How does this benefit you? • Changes in ‘design’ do not effect Application Data handling: You can modify the Presentation or Structure without touching the Application itself • Changes in Data only Indirectly effect Presentation: If you Add additional fields, they are ignored until XSL modified to display them; You must be aware of Data removal or restructuring • You can rearrange the page using XSL and display the Same DATA in different ways: Rearrange display and turn-off unneeded graphics for a PDA, or use a smaller portion of the data embedded in another page