Course Code MCSL-016

Course Title Internet Concepts and Web Design (Lab Course) Assignment Number

Maximum Marks 100

Weightage 25%
Last Dates for Submission 31st October, 2023 (For July Session)
30th April, 2024 (For January Session)

There are two questions in this assignment carrying a total of 80 marks. Rest 20 marks
are for viva voce. You may use illustrations and diagrams to enhance the explanations.
Please go through the guidelines regarding assignments given in the Programme Guide
for the format of presentation. Submit the screenshots along with the coding and
documentation.

QI. (70)

An e-Commerce website maintains the list of its products and sellers. The website displays the list of the
items, the seller who sells those items and the price of the items. In addition, it also displays a form for
seller registration and a form for the customer for feedback about the website. Design and create four web
pages for the e-Commerce company namely, Home, Items, Seller_Registration Form and Feedback,
having the following features:

For consistency, every webpage of website should consist of three basic divisions

Header— This division should be the same for all four web pages and should display the name and
logo of the e-commerce company. This division should be in different background
colour.

PageList - This division should be the same for every web page. It should contain links to all the web
pages, viz. Home, Items, Seller_Registration Form and Feedback form.

Content - This division should display the basic information as given below. The web pages that you
are designing should differ in this Division only.

The Content division of the different pages should be as under:

The Home page should include a message from the e-commerce company, welcoming all
the customers to the website.

The Item page should display information about all the items being sold. It should include
the item name, specification, item price etc. You should display this information by using
a table.

The Seller_Registration page should contain a form, which should have fields — Seller
name, phone number, address and a Submit button. You should write JavaScript code to
 11
verify that all the fields are filled with some data. This code should be run when the
Submit button is pressed.

The Feedback page should display another form that has three input fields — The name
of the customer, the reason for feedback and a text area for giving the feedback. In
addition, this form should have a Submit button.

Q2. (10)

List one of the ways of using CSS along with an HTML file. List the features of Angular Framework.
12
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
Course Code: MCSL-016
Course Title: Internet Concepts and Web Design (Lab Course)
Assignment Number: BCA (IV)/ L-016/Assignment/2023-24
Disclaimer/Special Note: These are just the sample ofthe Answers/SoIutions to some of the Questions given in the Assignments. These
Sample Answers/Solutions are prepared by Private TeacherfTutors/Authors for the help and guidance of the student to get an idea ofhow
he/she can answer the Questions given the Assignments. We do not claim 100% accuracy ofthese sample answers as these are based on the
knowledge and capability ofPrivate Teacher/Tutor. Sample answers may be seen as the Guide/Help for the reference to prepare the answers
of the questions given in the assignment. As these solutions and answers are prepared by the private Teachernutor so the chances oferror or
mistake cannot be denied. Any Omission or Error is highly regretted though every care has been taken while preparing these Sample
Answers/ Solutions. Please consult your own Teachernutor before you prepare a particular Answer andfor up-to-date and exact
information, data and solution. Student should must read and refer the official study material provided by the university.

There are two questions in this assignment carrying a total of 80 marks. Rest 20
marks are for viva voce. You may use illustrations and diagrams to enhance the
explanations. Please go through the guidelines regarding assignments given in
the Programme Guide for the format of presentation. Submit the screenshots
along with the coding and documentation.
QI. An e-Commerce website maintains the list of its products and sellers. The
website displaysThe list of the items, the seller who sells those items and the
price of the itemsan addition, it also displays a form for seller registration and a
form for the customerfor feedback about the website. Design and create four
web pages for Phe e-Commerce company namely, Home, Items,
Seller_Registration Form and Feedback, having the following features:

For consistency, every webpage of website.should consist of thre asic division

Header — This division should be the same for all four web pages and should
display the name and logo of the e-commerce company. This division should be
in different background colour.
PageList - This division should be the same for every web page. It should
contain links to all the web pages, viz. Home, Items, Seller_Registration Form
and Feedback form.
Content - This division should display the basic information as given below.
The web pages that you are designing should differ in this Division only.
The Content division of the different pages should be as under:
The Home page should include a message from the e-commerce
company, welcoming all the customers to the website.
The Item page should display information about all the items being sold.
It should include the item name, specification, item price etc. You should
display this information by using a table.
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
The Seller_Registration page should contain a form, which should have
fields — Seller name, phone number, address and a Submit button. You
should write JavaScript code to verify that all the fields are filled with
some data. This code should be run when the Submit button is pressed.
The Feedback page should display another form that has three input fields
— The name of the customer, the reason for feedback and a text area for
giving the feedback. In addition, this form should have a Submit button.
Ans:
To design and create the four web pages for the e-commerce company, we will follow
the given instructions and create Home, Items, Seller_Registration Form, and
Feedback pages. We will use HTML, CSS, and JavaScript to implement the required
features. Below are the code snippets for each page:
1. Home Page (index.html):

FUBll
Cf\
TIû'il
US:- 8006184581

background-color:
#007bff; color: white; text-
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
align: center; padding:
I()px;

/* Add CSS styles for the PageList

nav { background-color: #f2f2f2;
padding: I()px;
nav a
{ padding:
5px;

/* Add CSS styles for the Content */

main { padding: 20px;

<main>
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
<p>Welcome to our e-commerce website! Explore our wide range of products and
enjoy a seamless shopping experience.

</body>

2. Items Page (items.html):

< !DOCTYPE html>

Page</title>

/* Add CSS styles for the header, PageList, and Content

/* ... (Same as in the Home Page) ... */ table { border-collapse: collapse;

width: 100%;
background-color: #f2f2f2;

</style>
</head>
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
<body>

< !-- Same header and navigation as in the Home Page -->
. (Same as in the Home Page)

<main>
<table>

Name</th>

Price</th>

< Example table data (replace with actual data)

<td>Specification 1

</html>

3. Seller Registration Form Page (seller_registration.html):

Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
< !DOCTYPE html>
<html>

<head>

Registration

/* Add CSS styles for the header, PageList, and Content */

/* ... (Same as in the Home Page) ... */
form { margin: 20px;

label { display:
block; margin-
bottom: 5px;

color: white; padding: 8px 16px; border: none; cursor: pointer;

</style>

<script>
// JavaScript function to validate the seller registration form function
validateForm() { const sellerName =
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
document.getElementById('sellerName').value; const phoneNumber =
document.getElementById('phoneNumber').value; const address =
document.getElementById('address').value;

if (!sellerName Il !phoneNumber I l !
address) { alert('Please fill in all the
fields.'); return false;

<input type="text" id="phoneNumber" name="phoneNumber" required>

<label for=" address ">Address: </label>

<input type="text" id="address" name="address" required>

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

</form>
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
</main>
4. Feedback Page (feedback.html):

< !DOCTYPE html>

Page</title>

/* Add CSS styles for the header, PageList, and Content */

/*
... (Same as in the Home Page) .
input[type="text"], textarea
{ width: 100%; padding:
5px; margin-bottom: I()px;

input[type="submit"]
{ background-color:
#007bff; color: white;
padding: 8px 16px; border:
none; cursor: pointer;
< Same header and navigation as in the Home Page -->
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
. (Same as in the Home Page)

required

<input type="submit"

</body>

Make sure to replace "company_logo.png" in the Home Page with the actual path to
the company's logo image. Also, replace the example table data in the Items Page with
the actual product information.
With these web pages, the e-commerce website will have consistent headers,
navigation links, and different content for each page as specified in the instructions.

Q2. List one of the ways of using CSS along with an HTML file. List the
features of Angular Framework.
Using CSS with an HTML file: One of the common ways of using CSS along with
an HTML file is by using the <link> element in the HTML <head> section. The
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
<link> element is used to link an external CSS file to the HTML document, allowing
you to apply styles defined in the CSS file to the HTML content.
Here's an example of how you can use CSS with an HTML file:
1. Create an external CSS file (e.g., styles.css) with the desired styles:
styles.css:

index.html:

With this setup, the styles defined in styles.css will be applied to the elements in the
HTML file.

Features of Angular Framework:

Angular is a popular front-end development framework maintained by Google.
It provides a set of powerful tools and features to build dynamic, single-page
web applications. Some of the key features of Angular are:
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
1. Components: Angular applications are built using components, which are
selfcontained units of UI that can be reused and nested within other
components. Each component has its HTML template, CSS styles, and
TypeScript code.

2. Two-way data binding: Angular allows for two-way data binding between the
data model (component) and the view (template). Changes in the model are
automatically reflected in the view, and vice versa, making it easy to keep the
UI in sync with e underlying data.

3. Directives: Angular provides built-in and custom directives that allow you to
extend the functionality of HTML elements Directives can be used to
manipulate the DOM, apply styles conditionally, and add event listeners.
1
4,. Services and Dependency Injection: Angular uses dependencyinjection to

services they need. Services are used for t\sks iuch as data retnevaÎl jogging,

authentication, etœ

5. Routing: Angular includes a powerful router that enables navigation and

routing within the application, allowing users to move between different views
and components seamlessly.
6. Forms: Angular provides robust support for working with forms, including
template-driven forms and reactive forms. This makes it easy to manage user
input and perform form validation.

7. HTTP Client: Angular's built-in HTTP client module simplifies making HTTP
requests to APIs and handling responses in a clean and consistent manner.

8. RxJS: Angular leverages RxJS (Reactive Extensions for JavaScript) to handle

asynchronous operations, event handling, and managing streams of data,
making it easier to handle complex data flows in applications.
9. Ahead-of-Time (AOT) Compilation: Angular offers AOT compilation, which
precompiles the application's code before deployment, leading to faster loading
times and better performance.

10.Testing: Angular provides robust testing capabilities, including unit testing and
end-to-end testing, using tools like Jasmine and Protractor.
Copyright with Kunj Publication only Not for resale Ph. 8006184581 (Call Us)
These features, among others, make Angular a powerful and widely-used framework
for building modern web applications.