Scribd
Upload
16 views

ASSIGNMENT1 (1) Web Programming Nono

Web programming

Uploaded by

Ngonidzashe Dzeka
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

ASSIGNMENT1 (1) Web Programming Nono

Web programming

Uploaded by

Ngonidzashe Dzeka
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

ZQMS-ARC-REC-002

ASSIGNMENT COVER

REGION: _HARARE
_______________________________________________________________

PROGRAMME: ____SOFTWARE
ENGINEERING____________________________________________ INTAKE: _8__

FULL NAME OF STUDENT:


NONHLANHLA___MTETWA______________________________ PIN: __ P1956143R__

MAILING ADDRESS:
[email protected]________________________________________
_______

CONTACT TELEPHONE/CELL: ___ +263 77 700 5446_________________ ID. 84-


048367v19 __________
COURSE NAME: FUNDAMENTALS OF WEB
DESIGN____________________________ COURSE CODE: ____BSEH 261_

ASSIGNMENT NO. e.g. 1 or 2: __1_________________________ DUE DATE: _15/04/2024


___________

SUBMISSION DATE:26/03/2024

ASSIGNMENT TITLE: _ FUNDAMENTALS OF WEB DESIGN ASSIGNMENT 1

__________________________________________________________________________
_

__________________________________________________________________________
____ MARKER’S COMMENTS:
______________________________________________________
___________________________________________________________________________
___

___________________________________________________________________________
___
___________________________________________________________________________
___
___________________________________________________________________________
___
___________________________________________________________________________
___

___________________________________________________________________________
______
___________________________________________________________________________
______
___________________________________________________________________________
______
___________________________________________________________________________
______
_________________________________________________________________

OVERALL MARK: _____________ MARKER’S NAME: ________________________

MARKER’S SIGNATURE: _______________________________ DATE: ___________

Fundamental of Web Design Examination Assignment 1


Question 1

a) It is the standard markup language used for creating and structuring the content of web
pages and applications on the World Wide Web. HTML provides a set of tags or elements
that define the structure and presentation of web documents, including text, images, links,
multimedia, and interactive elements.
b) HTML is a markup language used for structuring and presenting web content, while HTTP
is a protocol that governs the communication between clients and servers.
c) <html>:
<head>:
<body>:
<h1> to <h6>:

d)
<!DOCTYPE html>
<html>
<head>
<title>TwoColumn Layout</title>
<style>
#left {
float: left;
width: 30%;
height: 100vh;
background-color: #f1f1f1;
}

#right {
float: left;
width: 70%;
height: 100vh;
}
</style>
</head>
<body>
<frameset cols="30%, 70%">
<frame name="leftFrame" src="left.html">
<frame name="rightFrame" src="welcome.html">
</frameset>
<head>
<title>Left Frame</title>
</head>
<body>
<h2>Categories</h2>
<ul>
<li><a href="books.html" target="rightFrame">Books</a></li>
<li><a href="pens.html" target="rightFrame">Pens</a></li>
<li><a href="watches.html" target="rightFrame">Watches</a></li>
<li><a href="bags.html" target="rightFrame">Bags</a></li>
<li><a href="shoes.html" target="rightFrame">Shoes</a></li>
</ul>
</body>
<head>
<title>Welcome</title>
</head>
<body>
<h2>Welcome to Nono Website</h2>
<p>Please click on a product category on the left to view the details.</p>
</body>
<head>
<title>Books</title>
</head>
<body>
<h2>Books</h2>
<img src="bookcover.jpg" alt="Book Cover">
<p>Publisher: Nono Book Publications</p>
<p>Price: $29.99</p>
<button>Add to cart</button>
</body>
</body>
</html>

Question 2

a) It is a style sheet language used to describe the presentation and formatting of a document
written in HTML (Hypertext Markup Language).
b) HTML focuses on structuring and defining the content of a web page, while CSS is
responsible for defining the presentation and visual styling of that content. HTML provides
the building blocks and semantic structure, while CSS adds the visual enhancements and
customization to create an appealing and well-designed web page.
c)
• Inline CSS: Inline CSS involves placing CSS rules directly within the HTML elements
using the style attribute.
• .Internal CSS: Internal CSS involves embedding CSS rules within the <style> tags in
the <head> section of an HTML document. The styles defined within the <style> tags
apply to the entire document
d)
<!DOCTYPE html>
<html>
<head>
<title>Nono Personal Details</title>
<style>
body {
background-image: url('nono.jpg');
background-position: top right;
background-repeat: no-repeat;
}

#container {
max-width: 700px;
margin: 0 auto;
padding: 30px;
}

h1 {
text-align: center;
}

table {
width: 100%;
border-collapse: collapse;
border: 1px dashed grey;
}

thead {
background-color: red;
color: white;
}

tbody td {
padding: 10px;
}

tbody .bold {
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<h1>Nono Personal Details</h1>
<button>Nonhlanhla </button> <button>Mtetwa</button>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Father’s Name</th>
<th>Mobile No</th>
<th>Address</th>
<th>Branch</th>
<th>Email</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nonhlanhla Mtetwa</td>
<td>36</td>
<td>Terrence Mtetwa</td>
<td>0777005446</td>
<td>96 First St, Harare</td>
<td>Software Engineering</td>
<td class="bold">[email protected]</td>
<td>Female</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Question 3

a) JavaScript is a high-level, interpreted programming language primarily used for building


dynamic and interactive web applications. It is one of the core technologies of the web, along
with HTML and CSS.
b) HTML provides the structure and content of a web page, while JavaScript adds interactivity,
dynamic behavior, and enhanced functionality to the HTML structure. HTML defines the
static elements of a page, and JavaScript enables dynamic manipulation and response to user
actions
c) Variables are used to store and manipulate data, while functions define reusable blocks of
code that can be executed multiple times. Variables hold values, whereas functions contain
instructions. Variables have different scopes, while functions have their own scope as well.
Both variables and functions are essential elements of JavaScript programming and work
together to create dynamic and modular code.

d)
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<script>
function validateForm() {
// Retrieve the values entered by the user
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

// Check if the username and password are empty


if (username === "" || password === "") {
alert("Please enter both username and password.");
return false;
}

// Perform additional validation if needed


// ...

// If all validations pass, allow form submission


return true;
}
</script>
</head>
<body>
<h2>Login Form</h2>
<button>Nonhlanhla</button><button>Mtetwa</button>
<form onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>

<input type="submit" value="Login">


</form>
</body>
</html>

Question 4

a) PHP is a server-side scripting language primarily used for web development. It is a popular
choice for building dynamic web pages and applications.
b) Easy to Learn and Use: PHP has a relatively simple and intuitive syntax, making it easy for
beginners to grasp and start coding quickly. It has a low learning curve compared to other
programming languages, allowing developers to build websites efficiently.

Wide Community and Extensive Documentation: PHP has a vast and active community of
developers worldwide. This means there are numerous online resources, tutorials, forums,
and documentation available to help developers troubleshoot issues, learn new techniques,
and stay updated with the latest trends and best practices.

Cross-Platform Compatibility: PHP is a server-side scripting language, which means it can


run on various operating systems such as Windows, Linux, macOS, and others. This cross-
platform compatibility allows developers to deploy PHP applications on different web
servers without significant modifications.

Integration with Web Servers and Databases: PHP has excellent integration capabilities with
popular web servers like Apache and Nginx. It also provides built-in support for various
databases, including MySQL, PostgreSQL, SQLite, and more. This makes it seamless to
connect and interact with databases, enabling dynamic data-driven websites and web
applications.

Rapid Development: PHP offers a wide range of pre-built functions, frameworks, and
libraries that simplify and accelerate web development.

c)
<?php

$hostname = 'hostname';
$username = 'username';
$password = 'password';
$database = 'database';
$conn = mysqli_connect($hostname, $username, $password, $database);

if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

$sql = "INSERT INTO books (name, author, description, price, image_url) VALUES (?, ?, ?,
?, ?)";

$stmt = mysqli_prepare($conn, $sql);

$name = "Book name";


$author = "Book author";
$description = "Book description";
$price = 19.99;
$imageUrl = "nono.jpg";

mysqli_stmt_bind_param($stmt, "sssd", $name, $author, $description, $price, $imageUrl);

if (mysqli_stmt_execute($stmt)) {
echo "Book details inserted successfully.";
} else {
echo "Error inserting book details: " . mysqli_error($conn);
}
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>
Question 5

a)
<?php
function checkNumber($number) {
if ($number > 0) {
echo "The number $number is positive.";
} elseif ($number < 0) {
echo "The number $number is negative.";
} else {
echo "The number is zero.";
}
}

checkNumber(5);
checkNumber(-3);
checkNumber(0);
?>
b)
i) $_POST
The $_POST method in PHP is used to retrieve data sent to the server using the HTTP POST
method. It is commonly used in forms where sensitive or large amounts of data need to be
submitted. The data is sent in the body of the HTTP request, making it more secure and
suitable for handling sensitive information.
<form method="post" action="process.php">
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<input type="submit" value="Submit">
</form>
ii) $_GET
The $_GET method in PHP is used to retrieve data sent to the server using the HTTP GET
method. It appends the data as query parameters in the URL, making it visible and less secure
compared to $_POST. The GET method is commonly used for retrieving data or performing
simple operations that do not involve sensitive information.
<a href="process.php?name=John&age=25">Click here</a>
c)
1.Variable names must start with a dollar sign ($) and a setter or underscore
2. Use descriptive and meaningful names:
Question 6:
(a)
<!DOCTYPE html>
<html>
<head>
<title>Personal Information</title>
<style>
/* Add border line to indicate tag pairing */
.tag {
border: 1px solid black;
padding: 5px;
margin-bottom: 10px;
}
</style>
Personal Information
</head>
<body>
<button>Nonhlanhla </button><button>Mtetwa</button>
<form method="post" action="process.php">
<!-- Form tag -->
<div class="tag">
<!-- Opening tag for the form -->
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName" required><br>

<label for="lastName">Last Name:</label>


<input type="text" name="lastName" id="lastName" required><br>

<input type="submit" value="Submit">


</div> <!-- Closing tag for the form -->
</form>
</body>
</html>

(b) Write code for process.php if this script gets form data above and persists it to a
mysql database table called student. Assume the following,
Database name : examDB
Table schema : student (id, firstname, lastname)
NB It means the database has a single table called student with id as primary key,
first and last name fields
[10]

<?php

// Database connection details

$hostname = 'hostname';

$username = 'username';

$password = 'password';

$database = 'examDB';

// Connect to the database

$conn = mysqli_connect($hostname, $username, $password, $database);

// Check the connection

if (!$conn) {

die("Connection failed: " . mysqli_connect_error());

// Check if form data is submitted

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

// Retrieve form data

$firstName = $_POST['firstName'];

$lastName = $_POST['lastName'];
// Prepare the SQL statement

$sql = "INSERT INTO student (firstname, lastname) VALUES (?, ?)";

// Prepare the statement

$stmt = mysqli_prepare($conn, $sql);

// Bind the values to the statement

mysqli_stmt_bind_param($stmt, "ss", $firstName, $lastName);

// Execute the statement

if (mysqli_stmt_execute($stmt)) {

echo "Data inserted successfully.";

} else {

echo "Error inserting data: " . mysqli_error($conn);

// Close the statement

mysqli_stmt_close($stmt);

// Close the connection

mysqli_close($conn);
?>

You might also like