CSC3530 Software Technology

CSC3530 Software Technology Tutorial One Assignment overview & HTML basics

Information • e-mail: csc3530@cse.cuhk.edu.hk • newsgroup: cuhk.cse.csc3530 • homepage: http://www.cse.cuhk.edu.hk/~kwchiu/csc3530/ • Prof. Chiu, Dickson (SHB Rm. 912) • e-mail: kwchiu@cse.cuhk.edu.hk • TA e-mail: kcsia@cse.cuhk.edu.hk (SHB Rm. 913)scng@cse.cuhk.edu.hk (SHB Rm. 1013)

Overview of assignment • Individual project/assignment • Web-based ordering & inventory system • listing of data from database • accept order from HTML form • Requires • HTML • Perl (especially CGI & DB connectivity) • SQL (insert, delete, update,…) • Java (servlet & JDBC) • XML

Homepage authoring • assume using a CSE account • create a directory www under your home directorymkdir ~/www mkdir ~/www/cgi-bin • change permission to world readablechmod 711 ~/www 1 – able to read 2 – able to write 4 – able to execute • use ls –l to view the permission setting • For CGI application under cgi-bin directory, should be executable

Uploading HTML Connect to cugw.cse.cuhk.edu.hk Username should be acct_name@sparcxx Disable the passive mode

HTML basics • HyperText Markup Language • consist of tags and attributes • e.g. <HTML>……</HTML> • Structure of a HTML file • <HTML> • <HEAD> • <TITLE>Title of the html file</TITLE> • </HEAD> • <BODY> • <H1>Hello World!</H1> • <P>Do you think it is boring?</P> •  • </BODY> • </HTML>

Basic Tags • <Hn>…</Hn> level n headings • <BR> line break • <HR> horizontal rule • <P>…</P> start of paragraph • <PRE>…</PRE> preformatted text (use for display codes) • <A HREF=“…”>…</A> defines a hyperlink • <IMG SRC=“xxx.jpg”> load a image • SRC and HREF are attribute of tags <IMG> (image) and <A> (anchor) respectively • Other tags consists of attribute too, e.g. align is an attribute of <P>

Background music • <HEAD> • <BGSOUND SRC=“{URL of midi file}” LOOP=1> • </HEAD> • Add this tag in the HEAD part • <BODY> • <EMBED SRC=“{URL of midi file}” AUTOSTART=FALSE • LOOP=FALSE WIDTH=145 HEIGHT=55></EMBED> • </BODY> • Add this tag in the BODY part • This tag will show a control in the webpage. • .wav file also works • Try the difference, if you have a poor sound card! • Embed will invoke a plug-in

Frame • <HTML><HEAD> • <TITLE>First Frame Page</TITLE> • <FRAMESET COLS="50%,50%“ FRAMEBORDER=“0”><FRAME SRC=“left.html“ NAME=“LEFT”><FRAME SRC=“right.html“ NAME=“RIGHT”></FRAMESET> </HEAD> • </HTML> • Do not place <FRAMESET> tag in the body part • FRAMEBORDER is an attribute, setting 0 will make the border line between frames disappear • NAME is essential e.g. in the left.html, you have a hyperlink <A HREF=“http://www.google.com” TARGET=“RIGHT”>google</A> We can change web-page of frame on the right side

Inline frame • HTML 4.0 standard • supported by Internet Explorer only • <!–- anywhere in your BODY part of HTML --> • <IFRAME SRC=“URL of that page”> • No need to put all things in one page • Usually use as a notice board • Not the same as TEXTAREA tag in FORM • Demo

Ordered/unordered list • <UL> • <LI>list item 1</LI> • <LI>list item 2</LI> • <LI>list item 3 • <UL> • <LI>list item 3.1</LI> • <LI>list item 3.2</LI> • </UL> • </LI> • <UL> • Useful for displaying structured data • Print a tree structure in HTML page • Organizing key points • list item 1 • list item 2 • list item 3 • list item 3.1 • list item 3.2

Table • <TABLE border="4" cellspacing="4" cellpadding="4“ width=“200”> • <CAPTION>This is a table</CAPTION><TR><TH> H1 </TH><TH> H2 </TH> <TH> H3 </TH></TR> <TR><TD> A1 </TD><TD> A2 </TD><TD> A3 </TD></TR><TR><TD> B1 </TD><TD> B2 </TD><TD> B3 </TD></TR> • </TABLE> • Useful for displaying data in database • For loop to display each row • Good for flexible design when using border=“0” • width attribute defines the dimension of the table, can be in percentage

Table (More) • rowspan and colspan attribute like you use merge cell in Frontpage • <tr> • <td width="119" colspan="3">colspan</td> • <td width="44"></td> • </tr> • <tr> • <td width="44"></td> • <td width="44"></td> • <td width="44"></td> • <td width="44" rowspan="3">rowspan</td> • </tr> • <tr> • <td width="44"></td> • <td width="44" rowspan="2">rowspan</td> • <td width="44"></td> • </tr> • <tr> • <td width="44"></td> • <td width="44"></td> • </tr>

Form • Use in CGI application • Make HTML interactive • <form method="POST" action=“../cgi-bin/getvalue.cgi"> • <p>One line text field<br> • <input type="text" name="T1" size="20"><br> • Multiple line text field<br> • <textarea rows="2" name="S1" cols="20"></textarea><br> • Checkbox<input type="checkbox" checked name="C1" value="ON"> • <input type="checkbox" name="C2" value="ON"><br> • Radio button<input type="radio" value="V1" checked name="R1"> • <input type="radio" name="R1" value="V2"><br> • Drop down menu<select size="1" name="D1"> • <option>First</option> • <option>Second</option> • <option>Third</option> • </select><br> • <input type="submit"> • <input type="reset"></p> • </form>

Form • each fields use input tag, with the type attribute different from each other • except TEXTAREA and SELECT • name attribute is important, better make it resonable • <option selected>xxx</option> is to indicate the selected option, it will make the form more user-friendly if probably used

Form and CGI • <form method="POST" action=“../cgi-bin/getvalue.cgi"> • Method, either GET or POST • GET will append the query string in URL • ../cgi-bin/getvalue.cgi?t1=what&s1=matter… • GET may introduce some security problem • Better use POST • Action, the URL of the CGI program (may be perl, c program, servlet, ASP) • Try action=“mailto:{your e-mail address} • you will get a e-mail from the form • Try analyse the string

Useful links • HTML goodieshttp://www.htmlgoodies.com • Daves HTML Guidehttp://www.davesite.com/webstation/html/ • HTML Primerhttp://www.htmlprimer.com/ • Any web page use view  source • Use Frontpage/ dreamweaver view the source generated

Next week • PERL • variables, array • flow of control • functions • input, output

CSC3530 Software Technology