Programme Name: BCS(Hons.

Course Code: (CSC 2514)

Course Name: WEB SYSTEM AND TECHNOLOGIES

Internal Exam

Date of Submission: 20th July 2021

Submitted By: Submitted To:

Student Name: Rubin Timilsina Faculty Name: PRAKASH CHANDRA

IUKL ID: Department: LMS Semester:

1. Highly intuitive structure

Highly intuitive structure and should be simple to understand so that users would not
have to think which way to go. It must be self-explanatory in an obvious kind of way. This helps to
increase the usability of the website and also makes it much more engaging. The structure must be
free from lots of cognitive load so that visitors don’t have to wonder how to move from point A to
point B.

2. Visual hierarchy

Visual hierarchy is the order or sequence in which our eye moves and perceives the things it sees.
When it comes to a web page, the visual hierarchy can be referred to the sequence in which our eye
moves from one topic/content/block to another. When designing a web page, a designer first need
to identify the order of importance of the various topics and then place them in such a way that the
visitors first view what is most important and then move onto the others in a hierarchical manner.

Size hierarchy – which the most important content or image is of the largest size on a webpage,
followed by the second most important content or image in the second largest size and so on. The
distinction in sizes should be such that a visitor would view the items in the order of importance, and
the pecking order of things is obvious.

Content hierarchy – creating a hierarchy of content. You can place content in such a way that the
human eye first travels to the content that is most important, for example, the business’s objective
or purpose and then moves to the less important content blocks in a hierarchical order

3. Accessibility

• When a visitor enters the website, he/she must be able to access each bit of information in
the easiest manner. This means that the text must be legible, the colors must not be harsh
on the eyes and the background must not overpower the content, etc.

• Typefaces –We must select a font type and font size which is readable to all and is not too
fancy for some to access or understand. For example, Fonts like Verdana, Times New Roman,
Arial, etc. are simple fonts that almost everyone can easily read online. Similarly, the font
size that works the best is 16 px but you can be a little flexible with it.

• Colors- As far as the user experience is concerned, our color scheme and contrast must be
well thought of and should be able to create visual harmony and balance. It is always better
to choose contrasting colors for the background and written content so that it can be easily
read. Choose a darker text color and a lighter background shade so that the result is easy to
the eyes. Extra bright colors must be used sparingly

• Images – Do you know that the human mind perceives and processes images a lot faster
than text? Well, it is thus a good idea to choose and place the right images on your web
pages to communicate with the audiences in a better way. Make sure they are high-quality
images and are suitable for your purpose
 4. Communication and content

• Everyone who visits your website is looking for some or the other kind of information or
content, and thus it is very important for you to communicate with them clearly and in an
engaging manner. Your information must be compelling, easy to read and easy to process.
Communication is not just about providing written information but also about offering
images, infographics and another form of media such as videos and audio pieces. Web
design takes into consideration a concept called ‘Visible language’.

5. White space and simple design

• A simple design is an effective design. White space not only helps to take the cognitive load
off the website but also makes it easier for users to perceive the information provided on
the website. White space helps to divide the web page into several distinct parts or areas
which makes it simpler to process information. It is always better to have a whitespace
solution to the problem of complex hierarchical structures

Q.No.2 Answer>>>>>>>>>>

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<?php

if($_SERVER['REQUEST_METHOD']=='POST')

$num = $_POST['num'];
 echo "<h3> Result obtained: </h3>";

if($num>=70){

echo"DISTINCTION";

elseif($num>=60 && $num<=69){

echo "First Division";

elseif($num>=50 && $num <=59){

echo "second divaision";

else{

echo"fail";

?>

<form action="<?php htmlspecialchars($_SERVER['PHP_SELF']);?>" method="POST">

<p>Enter percentage of marks obtain:</p>

<input type="number" name="num">

<input type="submit">

</form>

</body>

</html>
Output:

Q.No.3 Answer>>>>>

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>

Form

</title>

<style>

th,

td {

text-align: left;
 font-size: 23px;

font-family: 'Times New Roman', Times, serif;

padding-bottom: 10px;

td input,

td select {

font-size: 20px;

</style>

<body>

<?php

$_target_dir = 'uploads/';

if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_POST['submit'])) {

$name = $_POST['name'];

$price = $_POST['price'];

$target_file = $_target_dir . basename($_FILES['fileToUpload']['name']);

$server = "localhost";

$username = "root";

$password = "";

$db = "exam";

$conn = new mysqli($server, $username, $password, $db);

if ($conn->connect_error) {

die("connection cannot be established");

} else {

$sql = "INSERT INTO PRODUCT(name,price,path)values('$name',$price,'$target_file')";

if ($conn->query($sql) == True)

echo "New record inserted";

else {

echo "Error" . $sql . "<br>" . $conn->error;

?>

<form action="<?php htmlspecialchars($_SERVER['PHP_SELF']) ?>"

<table>
<tr>

<th>

<label>Product Name : </label>

</th>

<td>

<input type="text" name="name" size="25">

</td>

</tr>

<tr>

<th>

<label>

Product Price :

</label>

<td>

<input type="number" name="price" step='1' min='0' max='10000'>

</td>

</th>

</tr>

<tr>

<th>

<label>
 Photo :

</label>

<td>

<input type="file" name='fileToUpload' value="fileToUpload">

</td>

</th>

</tr>

<tr>

<th>

</th>

<td>

<input type="submit" name="submit" >

</td>

</tr>

<?php

?>

</body>

</head>
<!DOCTYPE html>
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>

Form

</title>

<style>

table, th,

td {

text-align: left;

font-size: 23px;

font-family: 'Times New Roman', Times, serif;

padding-bottom: 10px;

border: 1px solid black;

border-collapse: collapse;

td input,

td select {

font-size: 20px;

</style>
<body>

<?php

$server = "localhost";

$username = "root";

$password = "";

$db = "exam";

$conn = new mysqli($server, $username, $password, $db);

if ($conn->connect_error) {

die("connection aborted");

} else

// echo "connection established<br>";

$sql1 = " SELECT * FROM PRODUCT";

$result = $conn->query($sql1);

if ($result->num_rows > 0) {

echo "

<h3>Detailed information of product id: </h3>

<tr>

<th>

photo

</th>

<th>Name

</th>

<th>

Price

</th>

</tr>

";

while ($rows = $result->fetch_assoc()) {

echo "<tr>";

echo "<td>" . $rows['name'] . "</td>";

echo "<td>" . $rows['price'] . "</td>";

echo "<td><img src='" . $rows['path'] . "' height=150px width=150px</td>";

echo "</tr>";
 }

echo " </table> <br>";

}
}

?>