Generating Data Browsing Ajax Page by SuperSQL

Result (index2.html)(in Japanese)

DB Schema

car(id, name, price, layout, door_num, length, width, height, wheelbase, capacity, weight, engine, gear, company, type)
primary key : id
foreign key : engine company type

car_image(car_id, image)
primary key : car_id, image
foreign key : none

cartype(id, name)
primary key : id
foreign key : none

company(id, name, country, head_office, yearly_turnover)
primary key : id
foreign key : country

country(id, name)
primary key : id
foreign key : none

engine(id, company, name, cylinder_type, cylinder_num, type, displacement, diameter, stroke, max_output_ps, max_output_rpm, max_torque_kgm, max_torque_rpm)
primary key : id
foreign key : company



queries
index2.sql

GENERATE HTML
{ 
  {
    { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/header.html")
           @{class=header,divid=header} }!
    {
      { 
        { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/welcome.html")
               @{class=welcome} 
        }!
        { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/searchindex.sql",where="co.id>=",att=co.id)
               @{class=searchindexdiv} 
        }		
      },
      { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/carlist.html")
               @{class=carlistdiv} 
      },
      {
        { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/cardata.html")
               @{class=cardatadiv,droppable=yes,divid=cardata} 
        }!
        { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/cardata.html")
               @{class=cardatadiv,droppable=yes,divid=cardata2} 
        }
      },
      {
        { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/form.html")
               @{class=form,divid=form} 
        }!
        { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/cardata.sql")
               @{class=searchdiv,tab=yes,divid=searchdiv,status=hidden} 
        }
       }
    }!
    { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/footer.html")@{class=footerer,divid=footer} 
    }	
  }@{tableborder=0}
}@{cssfile=demo.css}
FROM company co;
searchindex.sql

GENERATE HTML
{
  { sinvoke("車種から探す"@{class=searchindex},file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/typelist.sql",att=co.id)
       @{dispdiv=type_list,in=blind,out=blind} 
  }!
  { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/typelist.sql")
       @{class=bytype,divid=type_list,status=hidden} 
  } !
  { sinvoke("メーカーから探す"@{class=searchindex},file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/countrylist.sql",att=co.id)
       @{dispdiv=country_list,in=blind,out=blind} 
  }!
  { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/countrylist.sql")
       @{class=bytype,divid=country_list,status=hidden} 
  } 
}@{cssfile=demo.css}
FROM company co;
typelist.sql

GENERATE HTML
{
{
  [ sinvoke(ct.name@{class=typename},file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/carlist.sql",att=ct.id)
        @{dispdiv=carlist} 
  ]!
}@{tableborder=0}
}@{cssfile=demo.css}
FROM cartype ct;
country_list.sql

GENERATE HTML
{
{
  [ 
    { sinvoke(cou.name@{class=countryname},file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/companylist.sql",att=cou.id)
          @{dispdiv=companylist+att,in=blind,out=blind} 
    }!
    { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/companylist.sql",where="cou.id=",att=cou.id)
          @{class=bytype,divid=companylist+att,status=hidden} 
    } 
  ]!
}@{tableborder=0}
}@{cssfile=demo.css}
FROM country cou;
companylist.sql

GENERATE HTML
{
{
  [ sinvoke(co.name@{class=companyname},file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/carlist.sql",att=co.id)
          @{dispdiv=carlist} 
  ]!
}@{tableborder=0}
}@{cssfile=demo.css}
FROM company co, country cou
WHERE co.country = cou.id
carlist.sql

GENERATE HTML
{
{
  [ sinvoke(ca.name@{class=carname},file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/cardata.sql",att=ca.id)
           @{dragto=cardata+cardata2} 
  ]!
}@{tableborder=0}
}@{cssfile=demo.css}
FROM car ca, country cou, company co, cartype ct
WHERE ca.type = ct.id AND
ca.company = co.id AND
co.country = cou.id 
cardata.sql

GENERATE HTML
{  
   { ca.name@{class=name}, 
     sinvoke("詳細データ",file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/cardatadetail.sql",att=ca.id)@{panel=yes} 
   }!
   { imagefile(ca.id+".jpg",path="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/pic")@{class=image,lightbox=thumb} }!
   { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/image.sql",where="ca.id=",att=ca.id) }!
   {"製造者"@{class=datatitle},          co.name@{class=data} }!
   {"値段"@{class=datatitle},            ca.price@{class=data}   }!
   {"乗車可能人数"@{class=datatitle},    ca.capacity@{class=data} }
}@{cssfile=demo.css}
FROM car ca, company co
WHERE ca.company=co.id;

cardatadetail.sql

GENERATE HTML
{
{  
   { ca.name@{class=name}}!
   imagefile(ca.id+".jpg",path="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/pic")@{class=image,lightbox=root}!
   { embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/image.sql",where="ca.id=",att=ca.id) }!
   {"製造者"@{class=datatitle},	 co.name@{class=data} }!
   {"値段"@{class=datatitle},	 ca.price@{class=data}   }!
   {"乗車可能人数"@{class=datatitle},	 ca.capacity@{class=data} }!
   {
       { {"レイアウト"@{class=datatitle2}, ca.layout@{class=data2} }, 
         {"ドア数"@{class=datatitle2},	 ca.door_num@{class=data2} } 
       }!
       { {"全長"@{class=datatitle2},	 ca.length@{class=data2}  }, 
         {"全幅"@{class=datatitle2},	 ca.width@{class=data2}   } 
       }!	
       { {"全高"@{class=datatitle2},	 ca.height@{class=data2}  },
         {"ホイールベース"@{class=datatitle2},	 ca.wheelbase@{class=data2}} 
       }!	
       { {"重量"@{class=datatitle2},	 ca.weight@{class=data2} },
         {"ギア"@{class=datatitle2},	 ca.gear@{class=data2}   } 
       }
    }
},
{ 
   embed(file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/engine.sql",where="e.id=",att=ca.engine)

}
}@{cssfile=demo.css}
FROM car ca, company co
WHERE ca.company=co.id;

engine.sql

GENERATE HTML
{
{  
   {e.name@{class=name} }!
   {"製造者"@{class=datatitle},              c.name@{class=data} }!
   {"シリンダータイプ"@{class=datatitle},    e.cylinder_type@{class=data}   }!	
   {"シリンダー数"@{class=datatitle},        e.cylinder_num@{class=data}  }!	
   {"タイプ"@{class=datatitle},              e.type@{class=data}}!	
   {"排気量[l]"@{class=datatitle},           e.displacement@{class=data}  }!	
   {"ボア径[mm]"@{class=datatitle},          e.diameter@{class=data}   }!	
   {"ストローク"@{class=datatitle},          e.stroke@{class=data}  }!	
   {"最大馬力[ps]"@{class=datatitle},        e.max_output_ps@{class=data} }!	
   {"最大馬力[rpm]"@{class=datatitle},       e.max_output_rpm@{class=data} }!	
   {"最大トルク[kg]"@{class=datatitle},      e.max_torque_kgm@{class=data} }!
   {"最大トルク[rpm]"@{class=datatitle},     e.max_torque_rpm@{class=data} }
	
}@{tablealign=center}
}@{cssfile=demo.css,outborder=no}
FROM engine e,company c,car ca
WHERE e.company = c.id 
AND ca.engine = e.id
image.sql

GENERATE HTML
{
   [imagefile(ci.image,path="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/pic")@{lightbox=thumb,class=thumb}],
}@{tableborder=0}
FROM car ca, carimage ci
WHERE ca.id = ci.car_id
form_price.sql

GENERATE HTML
{
{
  {"車種名 / 製造者名"@{class=form2} }!
  [sinvoke("・ "+ca.name@{class=formresult2},
           file="http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/cardata.sql",
           att=ca.id)@{dragto=cardata+cardata2},
    " / "+co.name 
   ]! 
}@{cssfile=http://www.db.ics.keio.ac.jp/~tk/ajaxdemo/demo.css}
}@{tableborder=0}
FROM car ca, company co, engine e
WHERE co.id = ca.company AND e.id=ca.engine AND 
ca.name like '% $name %' AND ca.price >= $lower AND ca.price <= $upper AND
e.max_output_ps >= $pslower AND e.max_output_ps <= $psupper AND 
ca.capacity >= $caplower AND ca.capacity <= $capupper

header.html
header.html
welcome.html
welcome.html
carlist.html
carlist.html
cardata.html
cardata.html
form.html
form.html
footer.html
footer.html


Takehiko Kobayashi <tk@db.ics.keio.ac.jp>
Department of Information and Computer Science
Keio University, Japan