
lOMoARcPSD| 23136115
Lab Session #9
Problem 9.1: Advanced HTML components
• lab9.html photo.png htdocs
<html>
<head><tle>HTML exercises</tle></head>
<body>
<img src="photo.png" alt="my photo" width="128" height="128">
</body>
</html> •
...
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> ...
•
...
<ul>
<li>Coee</li>
<li>Tea</li>
<li>Milk</li>
</ul> ...

lOMoARcPSD| 23136115
•
...
<ol>
<li>Coee</li>
<li>Tea</li>
<li>Milk</li>
</ol> ...
•
<html>
<head>
<style>
.city { background-color:
tomato; color: white; border:
2px solid black; margin:
20px; padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div> ...
</body>
</html> •
...
<h1>My First JavaScript</h1> <buon
type="buon"
onclick="document.getElementById(’demo’).innerHTML = Date()">
Click me to display Date and Time.</buon> <p
id="demo"></p> ...
• hp://www.w3schools.com/html/default.asp
Problem 9.2: HTML and PHP assignment
update.html
<html>
<body>
<h2>Update Instructor</h2>
<br>
<form acon="./update.php" method="post">

lOMoARcPSD| 23136115
<table>
<tr>
<td>ID:</td>
<td><input type=’text’ name=’id’></td>
<tr>
<td>Name:</td>
<td><input type=’text’ name=name’></td>
</tr>
<tr>
<td>Department:</td>
<td><select name=’deptname’>
<opon value=’Comp. Sci.’>Comp. Sci.</opon>
<opon value=’Finance’>Finance</opon> <opon
value=’Music’>Music</opon>
<opon value=’History’>History</opon>
<opon value=’Physics’>Physics</opon>
<opon value=’Biology’>Biology</opon>
<opon value=’Elec. Eng.’>Elec. Eng.</opon>
</select></td>
</tr>
<tr>
<td>Salary:</td>
<td><input type=’text’ name=’salary’></td>
</tr>
</table>
<input type=’submit’ name=’Submit’>
</form>
result.php
<?php
//get input value
$id = $_POST["..."]; $name =
$_POST["..."]; ...
$sql = ...
// connect to server ...
// use database ... //
execute SQL query ...
// output to table ... //
close connecon ...
?>
Bấm Tải xuống để xem toàn bộ.