Faculty of Engineering and Technology

Ramaiah University of Applied Sciences

Computer Science and

Department Programme B. Tech
Engineering
Semester/Batch 06/2021
Web Architecture and
Course Code CSC314A Course Title
Application development
Course Leader Dr. A. Abdul Rasheed

Assignment
Name of the D M SAMYAM
Register No. 21ETCS002081
Student GOWDA
Marks
Part Section Marking Scheme
Max. First Examiner Moderator

1.1 Use-Case diagram 5

Sequence diagram and class
Part-1 1.2 5
diagram
2. HTML form 15

TOTAL 25

Course Marks Tabulation

First Second
Component- CET
Examine Remarks Examine Remarks
B Assignment
r r
1

Total Marks
 Signature of First Examiner
Signature of Second Examiner
Please note:
1. Documental evidence for all the components/parts of the assessment such as the
reports, photographs, laboratory exam / tool tests are required to be attached to the
assignment report in a proper order.
2. The First Examiner is required to mark the comments in RED ink and the Second
Examiner’s comments should be in GREEN ink.
3. The marks for all the questions of the assignment have to be written only in the
Component – CET B: Assignment table.
4. If the variation between the marks awarded by the first examiner and the second
examiner lies within +/- 3 marks, then the marks allotted by the first examiner is
considered to be final. If the variation is more than +/- 3 marks then both the
examiners should resolve the issue in consultation with the Chairman BoE.

Assignment Instructions
to students:
1. The assignment consists of 2 questions.
2. Maximum marks is 25.
3. The assignment has to be neatly word processed as per the prescribed format.
4. The maximum number of pages should be restricted to 9.
5. The printed assignment must be submitted to the course leader.
6. Submission Date: 15-07-2024
7. Submission after the due date is not permitted.
8. IMPORTANT: It is essential that all the sources used in preparation of the
assignment must be suitably referenced in the text.
 9. Marks will be awarded only to the sections and subsections clearly indicated as per
the problem statement/exercise/question

Preamble:
The course on web architecture and application development is aimed at preparing the
students to design, develop and test web applications by applying different programming
techniques. The students are taught the overview of software architecture and
architectural styles. They apply different web technologies to design and develop web
applications. They also analyze different software architectures, their benefits and
shortcomings. This assignment assesses how well a student can analyze the scenario,
design a well-defined user interface for the web application and implement the same. The
first part of the assignment is aimed at assessing the student’s ability to design a web
application. The second part of the assignment is aimed at assessing the student’s ability
to implement an efficient web application.

Scenario: (25 Marks) Musify is an online music and

entertainment company, would like to adopt the web technology. This would instantly
becoming the world’s most popular music streaming service. With more than 400+ million
active users and 182 million paid users, Musify would like to be topped the music
streaming industry’s charts and is one of the most preferred and popular platforms for
accessing all kinds of music quickly and seamlessly. Musify is to be available across the
globe, hosts millions of songs of different genre, and is open to users in free and premium
mode, with revenues generated from advertisements and paid subscriptions. The Musify
web application should have the functionalities includes: user registration, selecting the
songs by year, selecting the songs by singer name, and listing of songs based on
selection. The user can subscribe either for free or premium mode.
You are asked to prepare the following:
 1.1 Draw the use-case diagram for the above scenario. (5 Marks)
1.2 Draw the sequence diagram and class diagram. (5 Marks)
Design a HTML form for the registration of user. The form should
collect the basic information about the user including the
2. subscription mode. (15 Marks)

❧❧❧

Solution :

1.1 Draw the use-case diagram for the above scenario.

1.2 Draw the sequence diagram and class diagram.

Sequence diagram:
Class diagram. :

1.3 Design a HTML form for the registration of user. The form should collect the basic
information about the user including the subscription mode.
SCRIPT[HTML]:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Musify User Registration</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>

<div class="container">
<h1>Register for Musify</h1>
<form action="/submit_registration" method="POST">
<div class="logo">
<img src="/logo.jpeg" alt="Musify Logo">
</div>
<div class="form-group">
<label for="first-name">FIRST NAME:</label>
<input type="text" id="first-name" name="first-name" required>
</div>
<div class="form-group">
<label for="last-name">LAST NAME:</label>
<input type="text" id="last-name" name="last-name" required>
</div>
<div class="form-group">
<label for="dob">DATE OF BIRTH:</label>
<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="email">EMAIL:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">PASSWORD:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="password"> CONFIRM PASSWORD:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
 <label for="subscription">SUBSCRIPTION MODE:</label>
<select id="subscription" name="subscription">
<option class="new" value="free">Free</option>
<option class="new" value="premium">Premium</option>
</select>
</div>
<div class="form-group">
<button type="submit">REGISTER</button>
</div>
</form>
</div>

</body>
</html>

CSS:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input,
.form-group select {
width: 100%;
 padding: 8px;
box-sizing: border-box;
}
.form-group button {
padding: 10px 15px;
background-color: #f6fb5e;
border: none;
font-weight: 600;
cursor: pointer;
padding-left: 25px;
padding-right: 25px;
margin-left: 250px;
border-radius: 15px;
}
.form-group button:hover {
background-color: #97950e;
}
img{
width: 100px;
height: 100px;
border-radius: 50px;
margin-left: 250px;
}

body {
margin: 0;
height: 100vh;
background: linear-gradient(to bottom, #96efff, #cff652);
/* You can change the direction (to right, to left, to top, to
bottom) and colors as needed */
}
.container:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: scale(1.05);

}
.container {
background: linear-gradient(to right, #ef8a76,#f4f44c);
background-color: white;
padding: 20px;
border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s, transform 0.2s;
 /* border: solid black 2px; */
}
.form-group label{
font-weight: 550;
}
.form-group input {
border-radius: 5px;
}
#subscription{
border-radius: 5px;
}
.new{
font-weight: 600;
}

Output: