Web Programming Solved
Web Programming Solved
1. Define WWW. List any two examples of web server & web browser.
Differentiate between URL and a domain?
WWW stands for World Wide Web, which is a system of interlinked, hypertext
documents accessed via the Internet.
A domain is the part of a URL that specifies the Internet address of a website. In
the example above, "example.com" is the domain. A domain name is the
human-friendly form of an IP address and is used to identify a website.
2. Write the syntax of the URL? Rewrite the default URL of your
university website by adding a subdomain named 'Research' and a web
page named 'FAQ.html'. Also link this URL through the logo of
'kturesearch.png' placed in a web page. The FAQ page should be opened in
a new window.
To add a subdomain named 'Research' and a web page named 'FAQ.html' to the
default URL of the university website, it would be written as follows:
https://research.ktu.edu.in/FAQ.html
To link the above URL through the logo of 'kturesearch.png' placed in a web
page, the following HTML code could be used:
<a href="https://research.exampleuniversity.edu/FAQ.html"
target="_blank">
<img src="kturesearch.png" alt="Ktu Research">
</a>
Here the 'target="_blank"' attribute tells the browser to open the link in a new
window.
External .js
function greeting() {
alert("Welcome to our website!");
}
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="greeting.js"></script>
</head>
<body>
<button onclick="greeting()">Click me</button>
</body>
</html>
4. What are different ways of adjusting spacing in a text with suitable
example.
Line spacing: This refers to the space between lines of text. It can be adjusted
using the CSS property "line-height".
p {
line-height: 1.5;
}
In this example, the line height of all text within a "p" element will be set to 1.5,
resulting in a space that is 1.5 times the size of the font.
Letter spacing: This refers to the space between characters of text. It can be
adjusted using the CSS property "letter-spacing".
h1 {
letter-spacing: 2px;
}
In this example, the letter spacing of all text within an "h1" element will be
increased by 2 pixels.
Word spacing: This refers to the space between words. It can be adjusted using
the CSS property "word-spacing".
span {
word-spacing: 20px;
}
In this example, the word spacing of all text within a "span" element will be
increased by 20 pixels.
5. Discuss the various CSS style sheet levels with suitable examples. How
are
conflicts resolved when multiple style rules apply to a single web page
element?
Inline styles: These styles are applied directly to an HTML element using the
"style" attribute. For example: <p style="color: red;">This is a red
paragraph.</p>
Internal styles: These styles are included within the <head> section of an HTML
document using the <style> tag. For example:
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is a red paragraph.</p>
</body>
External styles: These styles are stored in a separate CSS file, which is linked to
an HTML document using the <link> tag. For example:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a red paragraph.</p>
</body>
CSS styles are applied to elements based on specificity, which means that the
browser follows a set of rules to determine which style should be applied to an
element when multiple styles apply to it. Specificity is calculated by assigning a
weight to each selector, and the style with the highest weight is applied to the
element.
For example, if an element has two conflicting styles, one with an ID selector
(#example) and one with a class selector (.example), the ID selector will have a
higher specificity and its styles will be applied to the element.
When two styles have the same specificity, the one that appears later in the CSS
file will take precedence.
In PHP, the data from the form can be retrieved using the $_POST or $_GET
superglobal arrays. The $_POST array is used for data submitted via the HTTP
POST method, while the $_GET array is used for data submitted via the HTTP
GET method. The method is specified in the form tag.
$name = $_POST['name'];
$email = $_POST['email'];
You can also use a function filter_input() to retrieve the form data, which
provides an extra layer of security by validating and sanitizing the input.
This way you can retrieve the form data, process it and store it in a database or
use it to generate a response to the user, such as sending an email or displaying
a message on the page.
<?php
function checkPrime($num) {
if ($num == 1) {
return false;
}
for ($i = 2; $i <= sqrt($num); $i++) {
if ($num % $i == 0) {
return false;
}
}
return true;
}
$num = 7;
if (checkPrime($num)) {
echo $num . " is a prime number.";
} else {
echo $num . " is not a prime number.";
}
?>
A JSON document schema is a blueprint that defines the structure and format of
a JSON document. It includes information about the data types, fields, and
validation rules for the data within the document.
Example:
{
"type": "object",
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "integer"
},
"address": {
"type": "object",
"properties": {
"street": {
"type": "string"
},
"city": {
"type": "string"
},
"state": {
"type": "string"
}
},
"required": [
"street",
"city",
"state"
]
}
},
"required": [
"name",
"age",
"address"
]
}
This schema defines a JSON document with an object that has a "name" field of
type string, an "age" field of type integer, and an "address" field that is also an
object. The "address" object has three fields: "street", "city", and "state" all of
which are of type string. Additionally, it specifies that the "name", "age", and
"address" fields are required in the document.
The main difference between radio buttons and checkboxes when implemented
using HTML is that radio buttons are used to select one option from multiple
options, whereas checkboxes are used to select multiple options from multiple
options.
Here is an example of how you might implement a form that has the elements
you described using HTML:
<form action="http://www.mysite.com/reg.php"
method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name"
maxlength="25">
<br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender"
value="other">
<label for="other">Other</label>
<br>
<label for="hobbies">Hobbies:</label>
<input type="checkbox" id="reading" name="hobbies[]"
value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="travelling" name="hobbies[]"
value="travelling">
<label for="travelling">Travelling</label>
<input type="checkbox" id="sports" name="hobbies[]"
value="sports">
<label for="sports">Sports</label>
<br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="other">Other</option>
</select>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
OUTPUT :
12. (a) Write the equivalent HTML code to implement the following in a
web page:
(i) An image titled "birds.jpg" with a height of 100 pixels and width of 200
pixels. If the image cannot be accessed, a message "No image available"
should be displayed
<!DOCTYPE html>
<html>
<body>
<img src="birds.jpg" alt="No image available"
height="100" width="200">
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<a href="http://www.mysite.com/birds.jpg">Click
Here</a>
</body>
</html>
(b) Create a static HTML document for your portfolio, which includes the
following contents: your name, address, Mobile Number and email address.
Also add the details about your college, university, your major and the
batch of study. Include a picture of yourself and at least one other image
(friend/pet/role model) to the document with a short description about that.
Add three paragraphs about your personal history, with links to your social
media profile. Also create an ordered list for describing your Skill Set & an
unordered list showing your Strengths & Weaknesses.
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>My Portfolio</h1>
<div>
<img src="image1.jpg" alt="My Picture">
<h2>Personal Information</h2>
<p>Name: John Doe</p>
<p>Address: 123 Main St, Anytown USA</p>
<p>Mobile Number: 555-555-5555</p>
<p>Email: johndoe@email.com</p>
<h2>Education</h2>
<p>College: XYZ University</p>
<p>Major: Computer Science</p>
<p>Batch: 2012-2016</p>
</div>
<div>
<img src="image2.jpg" alt="My friend/pet/role model">
<h2>About the image</h2>
<p>This is a picture of my friend, who has always
been a source of inspiration for me. He is a successful
entrepreneur and has taught me a lot about perseverance
and hard work.</p>
</div>
<div>
<h2>Personal History</h2>
<p>I was born and raised in Anytown USA. I have
always had a passion for technology and coding. I studied
Computer Science in college and have been working as a
software engineer for the past 5 years. You can find more
information about me on my social media profiles:</p>
<ul>
<li><a
href="https://www.linkedin.com/in/johndoe">LinkedIn</a></
li>
<li><a
href="https://www.facebook.com/johndoe">Facebook</a></li>
<li><a
href="https://twitter.com/johndoe">Twitter</a></li>
</ul>
<h2>Skills</h2>
<ol>
<li>JavaScript</li>
<li>ReactJS</li>
<li>Node.js</li>
<li>Python</li>
<li>SQL</li>
</ol>
<h2>Strengths and Weaknesses</h2>
<ul>
<li>Strengths:</li>
<ul>
<li> Strong problem solving skills</li>
<li> Good at working under pressure</li>
<li> Strong attention to detail</li>
</ul>
<li>Weaknesses:</li>
<ul>
<li> Tendency to be a perfectionist</li>
<li> Poor time management</li>
<li> Tendency to procrastinate</li>
</ul>
</ul>
</div>
</body>
</html>
13. (a) Illustrate the usage of JavaScript DOM in event handling and
explain any
three methods With example.
document.getElementById("myButton").addEventListener("cli
ck", function(){
alert("Button was clicked!");
});
This is a short way of doing the same thing as the first example, but the function
is defined directly on the element rather than being added as an event listener.
(b) Write CSS and the corresponding HTML code for the following:
● Set the background color for the hover and active link states to "green"
● Set the list style for unordered lists to "square".
● Set "Flower.png as the background image Of the page and set 3%
● margin for the pages
● Set dashed border for left and right and double border for top & bottom
● of a table with 2 rows.
HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="styles.css">
</head>
<body>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<table>
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td>
<td>Table cell 4</td>
</tr>
</table>
</body>
</html>
CSS :
a:hover, a:active {
background-color: green;
}
ul {
list-style-type: square;
}
body {
background-image: url("Flower.png");
margin: 3%;
}
table {
border-left: dashed;
border-right: dashed;
border-top: double;
border-bottom: double;
}
14. (a) List the order of precedence of style levels. Organize a sample web
page for
providing *KTU BTech Honours Regulation 19' for KTU and use
embedded
Style sheet to apply minimum 5 styles for list, tables and pages.
The order of precedence of style levels is as follows:
<!DOCTYPE html>
<html>
<head>
<title>KTU BTech Honours Regulation 19</title>
<style>
/* Embedded styles */
h1 {
font-size: 24px;
}
ul {
list-style-type: square;
}
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
/* Additional styles */
.highlight {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>KTU BTech Honours Regulation 19</h1>
<ul>
<li>Eligibility for admission</li>
<li>Curriculum and syllabus</li>
<li>Examination and evaluation</li>
</ul>
<table>
<tr>
<th>Semester</th>
<th>Subjects</th>
</tr>
<tr class="highlight">
<td>1</td>
<td>Mathematics, Physics, Chemistry</td>
</tr>
<tr>
<td>2</td>
<td>Computer Programming, Electrical Engineering,
Mechanics</td>
</tr>
</table>
</body>
</html>
join() method is used to join all the elements of an array into a string. The
elements are separated by a specified separator.
Example:
slice() method is used to extract a section of an array and return a new array.
This method takes two arguments: the starting index and the ending index (not
included). If the ending index is not provided, the slice will include all the
elements from the starting index to the end of the array.
Example:
1. strlen() - This function returns the length of a string. For example, if we have a
string "Hello World!", the strlen() function would return 12.
2. strpos() - This function searches for a specific text within a string and returns
its position. If the text is not found, it returns false.
4. substr() - This function returns a portion of a string. You can specify the
starting position and the length of the substring.
(b) How does a PHP array differ from an array in C? List the different
ways to create an array in PHP with an example, Explain any 4 functions
that deals
with a PHP array.
PHP arrays and C arrays are similar in that they both allow for the storage of
multiple values in a single variable. However, there are a few key differences
between the two:
PHP arrays are dynamic in size, meaning that their size can be changed at
runtime, whereas C arrays have a fixed size that is determined at compile-time.
PHP arrays can store values of different data types, whereas C arrays can only
store values of a single data type.
PHP arrays use associative keys to access elements, whereas C arrays use
integer indices.
$my_array = [
"apple",
"banana",
"orange"
];
array_search() - This function searches for a value in an array and returns its
key if found, and false otherwise.
16. (a) During the process of fetching a web page from a web server to a
client
browser, at what point does an embedded PHP script get executed. What
are
the two modes that the PHP processor operates in? Explain
During the process of fetching a web page from a web server to a client
browser, an embedded PHP script gets executed on the server side before the
web page is sent to the client browser.
When a client browser requests a web page, the web server receives the request
and checks if the requested page contains any PHP code. If it does, the web
server passes the PHP code to the PHP processor for execution. The PHP
processor then executes the code and generates the HTML, CSS, and JavaScript
that make up the web page. This output is then sent back to the web server,
which in turn sends it to the client browser as a response to the original request.
1. The first mode is called the "Web Server mode". In this mode, the PHP
code is executed as a part of a web server process. The PHP code is
executed on the server side and the output is sent to the client browser as
HTML, CSS, and JavaScript. This mode is typically used to generate
dynamic web pages that are tailored to the specific needs of each user.
2. The second mode is called the "Command Line mode". In this mode, the
PHP code is executed as a command-line script, rather than as part of a
web server process. This mode is typically used for running automated
scripts and tasks, such as sending emails or generating reports. The output
is not sent to a web browser, instead it can be sent to a file or to the
command line interface.
In the web server mode, PHP code is executed by the PHP engine, which is built
into the web server. The PHP code is parsed, executed, and the output is
returned to the web server, which in turn sends it to the client browser.
In the command line mode, PHP code is executed by the PHP command-line
interpreter, which runs independently of the web server. The PHP code is parsed
and executed, and the output is returned to the command-line interface.
The implode() function in PHP is used to join an array of strings into a single
string, using a specified delimiter. For example, consider the following array:
We can use the implode() function to join this array into a single string, with the
delimiter being a comma:
$string = implode(",", $array);
On the other hand, the explode() function in PHP is used to split a string into an
array, using a specified delimiter. For example, consider the following string:
$string = "apple,banana,orange";
We can use the explode() function to split this string into an array, with the
delimiter being a comma:
In summary, the implode() function is used to join an array into a single string,
while the explode() function is used to split a string into an array. Both functions
use a specified delimiter to determine where to split or join the elements in the
array or string.
17. (a) Write equivalent PHP statements corresponding to the following:
● Declare an associative array named "ages" to store the key-value pairs
("Alice", 30), ("Bob", 30), ("Harry", 35), ("Mary", 32).
● Modify the value associated With the key "Mary" to 28.
● Sort the array according to values maintaining the key-value relationships
and print the sorted key-value pairs.
● The entry identified b the k "Bob"
(b) What are the uses Of cookies in web pages? Describe syntax for setting
cookies in PHP. How can you access and delete the cookie using setcookie()
function?
Cookies are small text files that are stored on a user's computer by a website.
They are used to remember information about the user, such as their preferences
or login credentials. Some common uses of cookies include:
In PHP, cookies are set using the setcookie() function. The syntax for the
setcookie() function is as follows:
setcookie(name, value, expire, path, domain, secure,
httponly);
To access a cookie, you can use the $_COOKIE superglobal variable. For
example, to access the value of a cookie named "username", you would use
$_COOKIE['username'].
To delete a cookie, you can use the setcookie() function and set the expiration
time to a past date. For example, to delete a cookie named "username", you
would use the following code:
This will set the expiration time of the cookie to one hour ago, effectively
deleting it from the user's computer.
18. (a) Write a PHP form handling program to perform the user
registration of any website with a minimum of 5 different fields and insert
the data into a
MySQL table after establishing necessary connections with the DB,
<?php
// Connect to MySQL
$con = mysqli_connect("hostname", "username", "password",
"database_name");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// Form handling code
if (isset($_POST['submit'])) {
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
$password = $_POST['password'];
$age = $_POST['age'];
if (!mysqli_query($con, $sql)) {
die('Error: ' . mysqli_error($con));
}
echo "1 record added";
}
mysqli_close($con);
?>
(b) Design the HTML page which enters a given number and embed the
PHP code to display a message indicating, whether the number is odd or
even,
when clicking on the 'CHECK NUMBER' button.
<!DOCTYPE html>
<html>
<body>
<h1>Odd or Even Checker</h1>
<form action="" method="post">
<label for="number">Enter a number:</label>
<input type="text" id="number" name="number">
<input type="submit" value="CHECK NUMBER" name="submit">
</form>
<?php
if(isset($_POST['submit'])) {
$number = $_POST['number'];
if($number % 2 == 0) {
echo "<p>The number is even.</p>";
} else {
echo "<p>The number is odd.</p>";
}
}
?>
</body>
</html>
19. (a) With a neat diagram, explain about Laravel MVC Framework.
Laravel is a well-known PHP web application framework that gives developers
access to a variety of tools and functionality for the creation of websites. Taylor
Otwell was the one who initially developed it in 2011, and since then it has
grown to become one of the most popular PHP frameworks for developing web
applications.
It is much simpler for programmers to create and maintain applications that
make use of Laravel's elegant syntax and clean codebase, which is one of the
framework's most distinguishing characteristics. It uses the
Model-View-Controller (MVC) architectural pattern, which helps to isolate the
presentation layer from the business logic, making it simpler to design and
manage large-scale systems. This pattern also helps to ensure that the
the presentation layer is always up to date.
In addition, Laravel incorporates a variety of capabilities that are necessary for
the building of modern websites. These include database migrations, routing,
authentication, and a robust job scheduler. Other features include: In addition to
that, it comes with an object-relational mapper (ORM), which makes it possible
for developers to deal with databases in a more effective manner and eliminates
the need for them to write difficult SQL queries.
Laravel offers a robust ecosystem of third-party packages and libraries that can
be easily added into projects, in addition to these fundamental functionalities.
These core features can be found here. Because of this, it will not be difficult for
you to incorporate functionality into your application, such as payment
gateways, email services, and real-time communication.
Because of its high level of extensibility, Laravel makes it simple for developers
to modify and expand the framework so that it better serves their individual
requirements. It comes with a comprehensive collection of testing tools, some of
which are known as PHPUnit and Dusk, which makes it simple to check
whether or not your application is functioning appropriately and whether or not
It is prepared for production.
In general, Laravel is a robust and user-friendly framework that has quickly
become a favorite option among web developers all around the world. Because
of its streamlined syntax, extensive feature set, and active user community, it is
an excellent choice for developing contemporary online apps.
Route::get('/', function () {
return 'Hello World';
});
This route would respond to a GET request to the root URL of the application
and return the string "Hello World".
In addition to basic routes, Laravel also supports route parameters. These allow
you can capture values from the URI and pass them to your route's action. For
example, you might define a route like this:
This route would match any GET request to the /users/{id} URI, where {id} is a
placeholder for a value that will be passed to the route's action. For example, a
request to /users/123 would return the string "User 123".
In addition to basic routes and route parameters, Laravel also supports named
routes. These allow you to give your routes a unique name, which can be used
to generate URLs or redirects to the route. This is useful if you need to change
the URI of a route, as you can simply update the name of the route rather than
updating every place in your application where the route is used.
20. (a) Enumerate the data types in JSON. Illustrate the document
definition of a Student document using JSON Schema.
● String
● Number
● Object
● Array
● Boolean
● Null
{
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "Student",
"type": "object",
"properties": {
"name": {
"type": "string",
"minLength": 1
},
"age": {
"type": "integer",
"minimum": 0
},
"gender": {
"type": "string",
"enum": [ "male", "female" ]
},
"gpa": {
"type": "number",
"minimum": 0,
"maximum": 4
},
"courses": {
"type": "array",
"items": {
"type": "string"
}
}
},
"required": [ "name", "age", "gender", "gpa", "courses"
]
}
(b) Discuss the following in Laravel Views
● Creating & Rendering Views
● Passing Data to Views
● Sharing Data with All Views
Laravel views are used to display the user interface of a web application. They
are typically stored in the "resources/views" directory of a Laravel project.
Creating and rendering views in Laravel is done using the "view" helper
function. The function takes the name of the view as its first argument, and an
array of data as its second argument. For example, to render a view called
"welcome" and pass an array of data to it, you would use the following code:
View::share('key', 'value');
You can then access the variable in any view using blade syntax, for example: