IS221 Semester 1 2023 Finals

1. Write code for txtCusPhone Textbox in asp.net.

_____________________________________________________________________
Solution: <asp:TextBox ID="txtCusPhone" runat="server"">
2. Write code for ddlCarType DropDownList in asp.net with 2 ListItems (Sedan and SUV) in the
list.
Solution:
<asp:DropDownList ID="ddlCarType" runat="server" >
<asp:ListItem>Sedan</asp:ListItem>
<asp:ListItem>SUV</asp:ListItem>
</asp:DropDownList>

3. Drop-off Location option has a dropdown list (ddlDropoffLocation). The following are the
options in ddlDropoffLocation: Ba, Lami, Lautoka, Nadi, and Navua. This list uses
Locations.xml as a data source. However, Locations.xml is empty. Write XML code that will
go inside Locations.xml.
Solution:
<?xml version="1.0" encoding="utf-8" ?>
<locations>
<location name="Ba" />
<location name="Lami" />
<location name="Lautoka" />
<location name="Nadi" />
<location name="Navua" />
< locations>
4. The following is the structure of RentalCar table in Microsoft Access. What control will be
used to connect web form to table in Microsoft Access?
 ____________________________________________________________________________
Solution: AccessDataSource
5. Write code to extract value from the following:

ddlCarType: _____________________________________________

Solution: ddlCarType.SelectedValue

txtDropoffDateTime:______________________________________________

Solution: txtDropoffDateTime.Text

6. Customer phone number should only accept numeric values and have 10 digits.
a. What control should be used to validate txtCusPhone?
_______________________________________________________
Solution: RegularExpressionValidator
b. Write down the validation expression to make sure user does not input any invalid
phone number. ___________________________________________
Solution: [0-9]{10}
c. What control should be used to force the customer to enter phone number before
submitting the form?
__________________________________________________________
Solution: RequiredFieldValidator
7. Upon clicking on “Request for Booking” (btnRequestBooking) button, the user information
will be inserted into the database. Write VB code that will handle btnRequestBooking click
event.

Solution:

Protected Sub btnRequestBooking_Click(sender As Object, e As System.EventArgs) Handles

btnRequestBooking.Click
adsCarRental.InsertParameters("Type").DefaultValue = ddlCarType.SelectedValue
 adsCarRental.InsertParameters("Pickup_Location").DefaultValue =
ddlPickupLocation.SelectedValue
adsCarRental.InsertParameters("Pickup_DateTime").DefaultValue = txtPickupDateTime.Text
adsCarRental.InsertParameters("Dropoff_Location").DefaultValue =
ddlDropoffLocation.SelectedValue
adsCarRental.InsertParameters("Dropoff_DateTime").DefaultValue = txtDropoffDateTime.Text
adsCarRental.InsertParameters("Cus_Phone").DefaultValue = txtCusPhone.Text
adsCarRental.InsertParameters("Cus_Name").DefaultValue = txtCusName.Text
adsCarRental.Insert()

lblMessage.Text = "Thank you for choosing us. <br/> We will check the availability and get back
to you soon."
End Sub

8. Masoori Rento has a printer friendly website. It has print.css that will render beautifully
when webpage is printed or viewed in print preview mode.
a. However, there seems something wrong. The following is rendering in browser
rather than in print preview mode. How can you fix this?
_______________________________________________________________

Solution:
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
b. Write CSS to hide everything that is inside header tag.
_________________________________________________________________
_________________________________________________________________
_________________________________________________________________
c. Solution:
header{
display: none;
}
9. Masoori Rento is your best friend and wants to make the website mobile friendly (540px and
below) and approaches you for help. Write media query that can be used to write css for
mobile.
___________________________________________________________________________
___________________________________________________________________________
_________________________________________________________________

Solution:
@media only screen and (max-width: 540px) {...}
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Connect</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

nav {
border: 1px solid #333;
width: 50%;
margin: 1rem auto;
background-color: #eee;
}

nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
padding: 0.5rem 1rem;
background-color: #f0c808;
}
nav a {
color: #00bff3;
text-decoration: none;
font-size: 1.5rem;
}
Q1

a) One design principle you can follow is to make your design portable. What
does it mean by making your design portable?
[2 Marks]

Users with different browsers, operating systems, and computer platform can easily
access your Web site.

b) Another design principle is to design for the screen. Your computer monitor,
the destination for your Web pages, is different from print-based media.
Identify three differences between your computer monitor and print-based
media that you must take into account when planning your Web site.
[3 Marks]

• Consider the shape of a computer screen. Paper-based media are portrait oriented,
the computer screen is landscape oriented.

• While a piece of paper reflects light, a computer screen has light passing through it
from behind. This affects your choices of colors and contrasts.

• Computer screens use much lower resolution than printed page.

Q2

1. Protocol

The first part of the URL "http://" refers to the Internet protocol that is to be used. In
the above example the protcol that is used is HTTP.

2. Domain Name

The second part of the URL "www.elearn.usp.ac.fj" refers to server where the
document will be stored. The domain is further broken down into a number of parts.
The 'www' refers to the World Wide Web. The 'ac' and 'fj' are known as domain
suffixes which identifies the type of website it is. In this case, 'ac' means that the
server represents an academic institute and 'fj' represents a country (Fiji).

3. Path Name

The third part of the URL "courses/" represents the path name which specifies the
directory on the server where the file is stored.

4. File Name

The last part of the URL "IS221_Homepage.html" is the actual file name of the file
you are viewing. The filename is in two parts where you have the filename and then
the file extension which determines the type of file e.g. .html, .pdf, .doc, etc...

The illustration shows the four parts of an URL.

Q3

List four human factors to consider when building a Web site.

[2 Marks]
• How users will interact with the content
• How users will view the Web pages
• Reading patterns
• Tasks users want to accomplish
• How easily users can navigate the site
 • Amount of information to provide
• Accessibility

Q4

• Browser compatibility
• Connection speed differences
• Browser cache and download time
• User computing devices, including monitors
• User operating system

Q5

The rules for the document language so the browser knows how to interpret the HTML
code

Q6
Q7

Two-tier system: a system consisting of a client and a server

Client (front-end):
Handles the presentation of the interface to the user
Receives, formats, and presents the results returned from the server
Server (back-end): performs the heavy processing such as calculation

Three-tier (multitier) client/server system: contains three distinct pieces:

Client tier: the Web browser
Processing tier: handles the interaction between the Web browser client and the data storage tier
Data storage tier: stores data in a database and handles requests from the processing tier
 Q8

Crafting the look and feel (2 mark)

Grid structure, uniform use of blue and white color scheme and clearly labelled sections etc. afforded
a very professional look that is intuitively easy to use.

Design portability (2 mark)

Coding to standards and the use of different stylesheets etc. enable Facebook’s site to be accessible
on any platform. They also have a mobile version of the main site.

Easy access to your information (2 mark)

Facebook used a great information design that is based on what the users are expected to be able to
do and as such structured the main links accordingly hence maintaining the 3-click rule of accessing
information.

Planning for Clear presentation of information (2 mark)

Use of the grid structure once again and active use of white space that partitions the various sections
of FB with clear headings and icons that are representative of the various activities e.g. mail icon for
messaging, etc.

Design for low bandwidth (2 mark)

Minimalistic use of graphics and strategic reusing of universally understood icons.

Q9

Hypertext Transfer Protocol (HTTP) to serve HTML files to web browser clients.
Unless your company or organization has a web server and hosts its own content, you
must use the services of a web hosting provider. After you choose a server to host your
files, you need to select file transfer software and upload the web site files from your
development machine to the web server.

Q10

• Add Viewport to head section of pages

• Determine breakpoints which should be driven by content of the web pages
• @ media queries to specify the breakpoints for the mobile phone screen size
• Create stylesheets for the different breakpoints
• Use flexible/relative measurements in CSS
• Stack and remove columns
• Minimise choices yet maintain functionalities
Use drop down menus, slide shows etc.
Q11

Requirements specification
Activities
 Determine how the customer wants to use the site e.g. will there be credit card
payments etc. Will there be a catalogue for customers to view and select the kava
packs they want. How about delivery, will you customers need to provide their
delivery address etc.

Type of website in this case will be an e-commerce website therefore think of
common elements that an e-commerce website should have.
Since it’s going to be an e-commerce website you will need to think of an
appropriate domain name e.g. renting online a .com domain would be most
appropriate.

Confirm requirements and specifications with client.

Artefacts
• Registered domain name (www.uniroomsforrent.com.fj)
• Requirements specifications document which will consist of: o Technical
specifications e.g. online searchable catalogue, form to enter customer’s details etc
and a database to store catalogue details and if need be customers’ details.
o Design requirements e.g. colour scheme or a theme to be used for the
website that is in line with the Uni rooms for rent concept
o Page layout sketches e.g. a sketch of what the site may look like o
Audience definition e.g. who your potential customers are, will they be just
local customers or international customers
Project/website specifications report

Information design and taxonomy creation

` Activities
• Sorting out the web pages the customer wants for instance what content to have
on what page and how to structure content and hyperlinks etc. Think in terms of the
layouts discussed in readings, customer might want to have a featured product/rental
specials or something
• Sketch of what the pages and the website may look like and navigation between
pages etc.
Artefacts
Information design
• A sketch of the various web pages and how they should be interlinked based on
their content