Web. The Framework Binding Page Elements To Database Directly, And How To Involve In Web Site Development. Masayuki Nii 1. Web

Size: px

Start display at page:

Download "Web. The Framework Binding Page Elements To Database Directly, And How To Involve In Web Site Development. Masayuki Nii 1. Web"

Mark Randall
5 years ago
Views:

1 1. Web 1 Web INTER-Mediator HTML INTER-Mediator DOM The Framework Binding Page Elements To Database Directly, And How To Involve In Web Site Development Masayuki Nii 1 In this paper, I introduce the framework INTER-Mediator for Web application development. It could be applied to small scale development. Although general web application frameworks are working as the HTML generator with string operations on server, INTER-Mediator is working on client se with operating DOM nodes. By supplying the information of tables and columns to elements of the HTML page, these elements automatically synchronize with database. Each element will be duplicated with multiplying alone with records. It can be added on any programs to both server and client se, so it could develop with complex demands. Web MVC 1) JavaServer Pages 1 Model 2 Web 2) 3) HTML MVC Model 2 File- Maker 2 Microsoft Access 3 Web Microsoft Windows Web Visual Studio LightSwitch UnitBase Web INTER-Mediator 6 1 nii@msyk.net c 2011 Information Processing Society of Japan

4) HTML class DOM HTML5 PHP PDO 1 FileMaker Server Apache Web PHP IIS Windows Server 2

1 The Postal Code Search Page by INTER-Mediator. 2.

2 4) HTML class DOM HTML5 PHP PDO 1 FileMaker Server Apache Web PHP IIS Windows Server INTER-Mediator INTER-Mediator 1 MySQL 10 1 PHP Data Objects PHP 1 INTER-Mediator Fig. 1 The Postal Code Search Page by INTER-Mediator CREATE table postalcode ( 2 INT AUTO_INCREMENT PRIMARY KEY, 3 f3 VARCHAR (20), # 4 f7 VARCHAR (20), # 5 f8 VARCHAR (20), # 6 f9 VARCHAR (20)); # 2 Fig. 2 The Schema of postalcode Table PHP Web postalcode f IM Entry INTER-Mediator 2.3 HTML Web 4 script 4 1 tbody 1 2 c 2011 Information Processing Society of Japan

3 1 <? php 2 require_once (../ INTER - Mediator / INTER - Mediator.php ); // INTER - Mediator 3 4 IM_Entry ( array ( array ( 5 name => postalcode, // 6 records => 10, //1 7 paging => true, // 8 sort => array ( array ( field => f3, direction => ASC ),),),), // 9 null, // 10 array ( 11 db - class => PDO, // 12 dsn => mysql : unix_socket =/ tmp / unix. sock ; dbname = test_db ), // P D O 13 false ); // 14?> Fig. 3 3 include MySQL.php The Definition File Named include MySQL.php class IM[...] td postalcode f3 3 script INTERMediator.construct(true); 10 IM[...] body onload INTER- Mediator.construct(true); IM NAVIGATOR DIV INTER-Mediator 3.1 HTML class IM[...] class 1 <html > 2 <head > 3 : <! -- --> 4 < script type ="text / javascript " src =" include_mysql.php "></ script > 5 < script type ="text / javascript "> 6 function dosearchfromzipcode () { 7 var param = { field : f3, operator : LIKE, value : document. getelementbyid ( zipcode ). value + % }; 8 INTERMediator. additionalcondition [" postalcode "] = param ; 9 INTERMediator. startfrom = 0; 10 INTERMediator. construct (true ); 11 } 12 </ script > 13 </ head > 14 <body > 15 <div > ( Zipcode ): 16 <input type ="text " =" zipcode " value ="123 " 17 onkeydown="if( event. keycode ==13){ dosearchfromzipcode ()} " /> 18 < button onclick =" dosearchfromzipcode ()">search </ button > 19 </ div > 20 <div =" IM_NAVIGATOR ">Navigation Controls by INTER - Mediator</div> 21 <table border ="1"> 22 <thead ><tr > 23 <th > </th ><th > </th ><th > </th ><th > </th > 24 </tr ></ thead > 25 <tbody > 26 <tr > 27 <td ><div class ="IM[ postalcode@f3 ]"></div ></td > 28 <td ><div class ="IM[ postalcode@f7 ]"></div ></td > 29 <td ><div class ="IM[ postalcode@f8 ]"></div ></td > 30 <td ><div class ="IM[ postalcode@f9 ]"></div ></td > 31 </tr > 32 </ tbody > 33 </ table > 34 </ body > 35 </ html > 4 HTML Fig. 4 The Page File Described by HTML IM[...] IM input select textarea 3 c 2011 Information Processing Society of Japan

4 style. innerhtml # 3.2 construct div tbody 1 TR postalcode Detecting Enclosure/Repeater E1 R1 L1 E2 R2 L2 2. Delete and Store the Repeater R1 E1 En: Enclosure, Rn: Repeater, Ln: Linked Node 3. Database Access 4. Duplicate Repeater with Each Record E1 R1-1 L1-1 E2-1 E1 R1-1 L1-1 E2-1 Fig. 5 R1-2 L1-2 E Duplicate the Repeater Again with Data from #3 5. Expand Included Expander/Repeater R2-1 L2-1 R R The Process of Node Duplication. L2-1-1 L tbody TR tr table Table 1 Acceptable Enclosures and Repeaters Linked Node Type of Component Enclosure [class] Repeater [class] Repeater Enclosed Table tbody tr - OK Generic div [ im enclosure] div [ im repeater] OK OK Number List ol li OK OK Item List ul li OK OK Popup Menu, List select option OK - 4 c 2011 Information Processing Society of Japan

Web Page HTML INTER-Mediator Database Adapter Download Server Se INTER-Mediator Inherited Data Access Class Database Adapter Interactive Processing Data Access Class PHP Data Converter Class PHP

5 Web Page HTML INTER-Mediator Database Adapter Download Server Se INTER-Mediator Inherited Data Access Class Database Adapter Interactive Processing Data Access Class PHP Data Converter Class PHP Alternative Data Converter Class 6 Fig. 6 The Example of Enclosures and Repeaters. INPUT 3.4 INTER-Mediator 2 7 INTER- Mediator HTML5 Database Extensible Components 7 INTER-Mediator Fig. 7 Extensible Components of INTER-Mediator. CRUD Create, Read/Retrieve, Update, Delete 4 INTER-Mediator Web 1 2 INTER-Mediator 5 c 2011 Information Processing Society of Japan

INTER-Mediator class Web FileMaker Access INTER-Mediator 4. Web UML INTER-Mediator UML 8 4.1 MDO 5) MVC O-R Web 8 1 Web 1 End-user requirement To: Mr.

6 INTER-Mediator class Web FileMaker Access INTER-Mediator 4. Web UML INTER-Mediator UML MDO 5) MVC O-R Web 8 1 Web 1 End-user requirement To: Mr. Nii INVOICE Date: Nov 30, 2011 Core i7 $250 2 $500 4GB Memory $150 4 $600 invoice recipient issued_date invoice_ item invoice_ product_ quantity product_ product name unit_price Amount: $ Analyze Data Model Database Schema 7. Popup menu of products shows all products Definition File array( name => products, records => 10000, key => ) 1. Create Object Diagram item_products <<VIEW>> item. nvoice_ product_ product_name unit_price quantity total=quantity * unit_price Object Diagram 2nd_of_34005 : Item Invoice_: Product: 4GB Memory Unit_Price: $150 Quantity: 4 Total: $ Integrating the popup menu with the Repeater of Invoice_to_MrNii : Invoice : To: Mr. Nii Date: Nov 30, 2011 Amount: $1100 Invoice_ = st_of_34005 : Item Invoice_: Product: Core i7 Unit_Price: $250 Quantity: 2 Total: $ Show multiplerecords inse the table. Adding the Repeater of item_products 3. Invoice is invoice. So it can show one record of invoice array( name => invoice, records => 1, key => ) 4. Same data on both diagrams as: Invoice.To = invoice.recipient Placing one element within Repeater of invoice <table><tbody> Page File <tr> <td class="im[invoice@recipiant]> </td> </tr> </tbody></table> 5. Items in an Invoice is relevant to one-to-many relation of invoice - item_products. The Repeater of item_products could be set inse the Repeater invoice. <table><tbody> <tr><td class="im[invoice.recipiant]></td></tr> <tr> <table><tbody><tr> <td class="im[item@product_name]></td> <td class="im[item@unit_price]></td> <td class="im[item@quantity]></td> <td class="im[item@total]></td> </tr></tbody></table> </tr> </tbody></table> item_products : Page File <table><tbody> <tr> <td> <select class="im[item@product_]> <option class="im[product@@value product@name@innerhtml]" /> </select> </td> <td class="im[item@unit_price]></td> : 8 INTER-Mediator Fig. 8 How to build a web page with INTER-Mediator Definition File array( Definition File name => item, view => item_products, records => 10000, key =>, foreign-key => invoice_, join-field => ) Page File 6 c 2011 Information Processing Society of Japan

7 Invoice invoice Item item invoice name invoice records 1 key 8 3 Invoice invoice Invoice To invoice recipient invoice recipient 8 4 Invoice Date invoice issued date <td class= IM[invoice@issued date] ></td> Invoice Item invoice item item Item 1 item products invoice item products 1 2 PHP 8 5 item products name item view item products item products item Invoice Item 1 Item Invoice item invoice invoice item item products invoice foreign-key invoice invoice join-field records invoice name item table table tr table table 8 6 name itemname invoice invoice name item invoice product name unit price quantity total item products name item item@quantity item@unit price item item@unit price item unit price td 7 c 2011 Information Processing Society of Japan

8 Invoice 1 invoice product invoice item products item product name product div 4.5 product product 8 7 select select select option select 8 8 option 1 product option option product name VALUE 1 option item product body onload INTERMediator.conctruct(true); invoice 5. DOM Web INTER-Mediator HTML Web Web Web 1) Krasner, G.E. and Pope, S.T.: A cookbook for using the model-view controller user interface paradigm in Smalltalk-80, J. Object Oriented Program., Vol.1, pp (1988). 2) :. KBSE, Vol.107, No.331, pp ( ). 3) Web Web API NSTIPSJ SIG Notes, Vol.2008, No.54, pp ( ). 4) Tatsubori, M. and Suzumura, T.: HTML templates that fly: a template engine approach to automated offloading from server to client, Proceedings of the 18th international conference on World we web, WWW 09, New York, NY, USA, ACM, pp (online), DOI: (2009). 5) Xudong, L., Xiaofei, X., Dechen, Z. and Limin, Q.: An Adaptive Development Framework for Web-Based Enterprise Information System, Proceedings of the 2008 International Symposium on Computer Science and Computational Technology - Volume 02, Washington, DC, USA, IEEE Computer Society, pp (online), DOI: /ISCSCT (2008). 8 c 2011 Information Processing Society of Japan

COMP519 Web Programming Lecture 16: JavaScript (Part 7) Handouts

COMP519 Web Programming Lecture 16: JavaScript (Part 7) Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University of Liverpool