CSC 3530 Software Technology Tutorial One Assignment overview

Information • e-mail: csc 3530@cse. cuhk. edu. hk • newsgroup: cuhk. cse. csc 3530

Overview of assignment • Individual project/assignment • Web-based ordering & inventory system • listing

Homepage authoring • assume using a CSE account • create a directory www under

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

HTML basics • Hyper. Text Markup Language • consist of tags and attributes •

Basic Tags • <Hn>…</Hn> level n headings • <BR> line break • <HR> horizontal

Background music <HEAD> <BGSOUND SRC=“{URL of midi file}” LOOP=1> </HEAD> • Add this tag

Frame <HTML><HEAD> <TITLE>First Frame Page</TITLE> <FRAMESET COLS="50%, 50%“ FRAMEBORDER=“ 0”> <FRAME SRC=“left. html“ NAME=“LEFT”>

Inline frame • HTML 4. 0 standard • supported by Internet Explorer only <!–-

Ordered/unordered list <UL> <LI>list item 1</LI> <LI>list item 2</LI> <LI>list item 3 <UL> <LI>list

Table <TABLE border="4" cellspacing="4" cellpadding="4“ width=“ 200”> <CAPTION>This is a table</CAPTION> <TR> <TH> H

Table (More) • rowspan and colspan attribute like you use merge cell in Frontpage

Form • Use in CGI application • Make HTML interactive <form method="POST" action=“. .

Form • each fields use input tag, with the type attribute different from each

Form and CGI <form method="POST" action=“. . /cgi-bin/getvalue. cgi"> • Method, either GET or

Useful links • HTML goodies http: //www. htmlgoodies. com • Daves HTML Guide http:

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

Slides: 18

Download presentation

CSC 3530 Software Technology Tutorial One Assignment overview & HTML basics

Information • e-mail: csc 3530@cse. cuhk. edu. hk • newsgroup: cuhk. cse. csc 3530 • homepage: http: //www. cse. cuhk. edu. hk/~kwchiu/csc 3530/ • 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 directory mkdir ~/www/cgi-bin • change permission to world readable chmod 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 • Hyper. Text 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> <H 1>Hello World!</H 1> <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> • list item 1 • list item 2 • list item 3. 1 • list item 3. 2 • Useful for displaying structured data • Print a tree structure in HTML page • Organizing key points

Table <TABLE border="4" cellspacing="4" cellpadding="4“ width=“ 200”> <CAPTION>This is a table</CAPTION> <TR> <TH> H 1 </TH><TH> H 2 </TH> <TH> H 3 </TH> </TR> <TD> A 1 </TD><TD> A 2 </TD><TD> A 3 </TD> </TR> <TD> B 1 </TD><TD> B 2 </TD><TD> B 3 </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> <td width="44">　</td> <td width="44" rowspan="3">rowspan</td> </tr> <td width="44">　</td> <td width="44" rowspan="2">rowspan</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 <input type="text" name="T 1" size="20"> Multiple line text field <textarea rows="2" name="S 1" cols="20"></textarea> Checkbox<input type="checkbox" checked name="C 1" value="ON"> <input type="checkbox" name="C 2" value="ON"> Radio button<input type="radio" value="V 1" checked name="R 1"> <input type="radio" name="R 1" value="V 2"> Drop down menu<select size="1" name="D 1"> <option>First</option> <option>Second</option> <option>Third</option> </select> <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 userfriendly 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? t 1=what&s 1=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 goodies http: //www. htmlgoodies. com • Daves HTML Guide http: //www. davesite. com/webstation/html/ • HTML Primer http: //www. htmlprimer. com/ • Any web page use view source • Use Frontpage/ dreamweaver view the source generated

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