Internal Examiner: Dr. Moayad Al-Adami

PhiladelphiaUniversity

Lecturer:Dr. Samer Hanna

Coordinator: Dr. Samer Hanna

Software Engineering of Web Systems

(0721422) Section1 Final Exam’s Key Second Semester of 2014/2015

Date: Monday, June15th, 2015------Time: 2 hours

Q1) (6 marks)

Discuss the following in details:

The Hyper Text Transfer Protocol (HTTP), what it is? And why it is used? (2 marks)

Short forHyperTextTransferProtocol, HTTP is the underlyingprotocolused by theWorld Wide Web. HTTP defines how messages are formatted and transmitted, and what actionsWeb serversandbrowsersshould take in response to various commands. For example, when you enter aURLin your browser, this actually sends an HTTP command to the Web server directing it to fetch and transmit the requestedWeb page.

The Model View Controller (MVC), how it is related to Web development and what are its advantages over Web forms. (2 marks)

Abbreviated as MVC,Model-View-Controlleris the term used to describe asoftwareparadigm that separates objects into one of three categories:

models for maintaining data

views for displaying all or a portion of the data

controllers for handling events that affect the model or views.

In this separation, the view and controller depend on the model. However, the model does not depend on either of the two making it so the model can be built and tested independent of the visual presentation.

Uses of Extensible Markup Language (XML) with example. (2 marks)

Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML. Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere.

Example:

<breakfast_menu>

<food>

<name>Belgian Waffles</name>

Two of our famous Belgian Waffles with plenty of real maple syrup

</description>

</food>

<food>

<name>Strawberry Belgian Waffles</name>

Light Belgian waffles covered with strawberries and whipped cream

</description>

</food>

</breakfast_menu>

Q2) (8 marks)

Suppose that you work as a Web developer at Philadelphia University and that you are asked to create a Web page to map the following design.

Figure 1

This Web page allow an academic staff at Philadelphia to insert his/her: name, id, department and phone number and then press OK to enable this information to be stored in a database.

The Web page should have a column to the right (see Figure) that contains links to some Jordanian Universities.

Write the needed HTML to map the above requirement and design. (4 marks)
Write the needed CSS code. (2 marks)
Add the required asp.net validation to make sure that the academic staff id is between 1 and 2000. (2 marks)

Olution:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Q2.aspx.cs"Inherits="Q2"%>

<!DOCTYPEhtml

htmlxmlns="

headrunat="server">

titlePhiladelphia phone Numbers</title

</head

body

formid="form1"runat="server">

divid="wrapper">

header

h3class="auto-style1">Philadelphia Universitybr/>Academic Staff Information</h3

</header

divid="content">

strongStaff Name: </strongbr/>

asp:TextBoxID="txtName"runat="server"Width="382px"</asp:TextBox

br/>

strongStaff Id:</strong

br/>

asp:TextBoxID="txtId"runat="server"Width="107px"</asp:TextBox

br/>

strongDepartment:</strong

br/>

asp:DropDownListID="ddlDept"runat="server">

asp:ListItemValue="-1">Choose Faculty</asp:ListItem

asp:ListItemValue="1">IT</asp:ListItem

asp:ListItemValue="2">Engineering</asp:ListItem

asp:ListItemValue="3">Pharmacy</asp:ListItem

asp:ListItemValue="4">Low</asp:ListItem

asp:ListItem</asp:ListItem

</asp:DropDownList

br/>

strongPhone Number:

</strong

br/>

asp:TextBoxID="txtPhone"runat="server"Width="102px"</asp:TextBox

br/>

asp:ButtonID="btnOk"runat="server"Text="OK"style="font-weight: 700"Width="67px"/>

br/>

</div

aside

h3class="auto-style1">روابطالجامعاتالاردنية</h3

liclass="auto-style2"<ahref=" target="_blank">جامعةالعلوموالتكنولوجيا</a</li

liclass="auto-style2"<ahref="

</ul

</aside

footerclass="auto-style1">

</footer

</div

</form

</body

</html

styletype="text/css">

body {

margin:0;

}

#wrapper

{

background-color: lightgray;

width: 600px;

margin: auto;

}

#content

{

width: 450px;

float: left;

}

aside

{

border-left: 2pxsolidblue;

border-right: 2pxsolidblue;

border-top: 2pxsolidblue;

border-bottom: 2pxsolidblue;

float: right;

width:133px;

height: 262px;

}

header

{

padding: 0px;

width:600px;

height: 85px;

background-repeat: no-repeat;

}

.auto-style1

{

text-align: center;

float:none;

}

.auto-style2

{

text-align: left;

}

</style

asp:RangeValidatorID="RangeValidator1"runat="server"ErrorMessage="invalid id"

ControlToValidate="txtId"MinimumValue="1"MaximumValue="2000"Type="Integer"</asp:RangeValidator

Q3) (6 marks)

For the same Web page in Question 2 (Figure 1); accomplish the following:

Create an SQL server database (call itDoctorsDB). (1 mark)

Go to SQL Object Explorer  right click on SQL Server  Add SQL Server  write (localdb)\v11.0  OK  right click on Databases  Add New Database  insert Database Name (DoctorsDB).

Create a table (call it Doctors) that have all the information in Figure 1. (1 mark)

Write click on Tables  Add New Table  insert the following

CREATETABLE [dbo].[Doctors]

(

[DoctorId] INTNOTNULLPRIMARYKEY,

[DoctorName] NVARCHAR(50)NOTNULL,

[Department] NVARCHAR(50)NULL,

[Phone] NUMERICNULL

)

Create aGridView (call itGridView1) that is filled with all the information in the Doctors table with the help of Visual Studio to make the connection. (2 marks)

Drag a GridView from toolbox to the form  Go to design view  Click on the DataGridView arrow  select Add project Data Sourse  <New Data Source>  SQL Database  Specify an id for the data source  OK  New Connection  Server Name  (localdb)\v11.0  Select or enter a database Name CoursesDB  OK  Next  Tick Do you want to save the connection in the application configuration file  Choose a name for the connection string (or leave it as it is CoursesDBConnectionString)  Next  Next  Finish

asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="False"DataKeyNames="DoctorId"DataSourceID="SqlDataSource1">

Columns

asp:BoundFieldDataField="DoctorId"HeaderText="DoctorId"ReadOnly="True"SortExpression="DoctorId"/>

asp:BoundFieldDataField="DoctorName"HeaderText="DoctorName"SortExpression="DoctorName"/>

asp:BoundFieldDataField="Department"HeaderText="Department"SortExpression="Department"/>

asp:BoundFieldDataField="Phone"HeaderText="Phone"SortExpression="Phone"/>

</Columns

</asp:GridView

asp:SqlDataSourceID="SqlDataSource1"runat="server"ConnectionString="<%$ ConnectionStrings:DoctorsConnectionString %>"SelectCommand="SELECT * FROM [Doctors]"</asp:SqlDataSource

Create another GridView(call it GridView2) that is filled with the Doctors table information using ADO.NET. (2 marks)

string connectionString = WebConfigurationManager.ConnectionStrings["DoctorsConnectionString"].ConnectionString;

string selectSQL = "SELECT* FROM Accounts";

SqlConnection con = newSqlConnection(connectionString);

SqlCommand cmd = newSqlCommand(selectSQL, con);

SqlDataAdapter adapter = newSqlDataAdapter(cmd);

DataSet ds = newDataSet();

adapter.Fill(ds, "Accounts");

GridView2.DataSource = ds;

GridView2.DataBind();

Q4) (6 marks)

Write the needed activities and code to map the design in question 2 using Model View Controller (MVC).

Write the code of the controller, model and also the view.

Controller

namespace Q4.Controllers

{

publicclassHomeController : Controller

{

// GET: /Home/

publicActionResult Index()

{

Doctor d1 = newDoctor()

{

Name = "Samer Hanna",

Id = 618,

Dept = "SE",

Phone = "0795771406"

};

return View(d1);

}

Model

namespace Q4.Models

{

publicclassDoctor

{

publicstring Name { get; set; }

publicint Id { get; set; }

publicstring Dept { get; set; }

publicstring Phone { get; set; }

}

View

@model Q4.Models.Doctor

Layout = null;

}

<!DOCTYPEhtml

html

head

metaname="viewport"content="width=device-width"/>

titleIndex</title

</head

body

div

tableborder="1">

thDoctor Name</th

</td

</tr

thDoctor Id</th

</td

</tr

thDepartment</th

</td

</tr

thPhone</th

e</td

</tr

</table

</div

</body

</html

Q5) (8 marks)

Write the JavaScript code to map the following requirement related to the Web page in Question2 (Figure 1):

Declare an object about certain information inserted in Figure 1. The object should also contain a function to print the object’s information. (2 mark)

var doctor = {

id: 600,

name: "Samer",

department: "SE",

phone: "0795771406",

display: function () {

alert("Name is : " + doctor.name + " id is : " + doctor.id);

}

};

Declare an array that contains the object in branch 1 and an integer that represent the number of experience years. (1 mark)

var info = [doctor, 7];

Display the academic staff name of in an alert box together with a proper welcome. (1 mark)

var name = document.getElementById("txtName");

alert('Welcome to the web site ' + name.value);

Change the color of the right column to red. (1 mark)

var side = document.getElementById('col');

side.style.backgroundColor = "red";

Store the academic staffid in the application cookie. (1 mark)

var id = document.getElementById("txtId");

document.cookie = id.value;

Validation to make sure that the academic staff id is between 1 and 2000. (2 mark)

function validate() {

var id = document.getElementById("txtId");

if ((id.value < 0) || (id.value > 2000))

alert("Invalid id " + id.value);

}

Q6) (6 marks)

Write the PHP code to map the following requirement related to the Web page in Question2:

Declare a class (called Doctor) with same information in Figure 1. The class should also contain also: get and set functions for the id property and a constructor. (3 marks)

Declare another class called User that has only two properties {user name and password}. (1 marks)

class User

{

public $name, $password;

}

Change the code of the Doctor class to make it inherit from the User class in 2. (2 marks)