MCS Advanced Database & Web Technology

 

MCS Advanced Database & Web Technology

Slip 1:

Write the HTML5 code for generating the form as shown below. Apply the internal CSS to the following form to change the font size of the heading to 6pt and change the color to red and also change the background color to yellow.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Management Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
        }

        form {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        h2 {
            font-size: 6pt;
            color: red;
            background-color: yellow;
            text-align: center;
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input,
        select {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            background-color: #4caf50;
            color: #fff;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>

    <form action="#" method="post">
        <h2>Project Management</h2>

        <label for="projectName">Project Name:</label>
        <input type="text" id="projectName" name="projectName" required>

        <label for="assignedTo">Assigned To:</label>
        <input type="text" id="assignedTo" name="assignedTo" required>

        <label for="startDate">Start Date:</label>
        <input type="date" id="startDate" name="startDate" required>

        <label for="endDate">End Date:</label>
        <input type="date" id="endDate" name="endDate" required>

        <label for="priority">Priority:</label>
        <select id="priority" name="priority" required>
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
        </select>

        <label for="description">Description:</label>
        <textarea id="description" name="description" rows="5" required></textarea>

        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </form>

</body>

</html>


1. Model the following Property system as a document database. Consider a set of Property, Owner. One owner can buy many properties. 2. Assume appropriate attributes and collections as per the query requirements. [3] 3. Insert at least 05 documents in each collection. [3] 4. Answer the following Queries a. Display area wise property details. [3] b. Display property owned by 'Mr.Patil' having minimum rate [3] c. Give the details of owner whose property is at “Nashik”. [4] d. Display area of property whose rate is less than 100000. [4]




To model the property system as a document database, we can use MongoDB as an example. MongoDB is a NoSQL database that works well with document-based data. Below is a high-level structure for the data model, insertion of sample data, and queries in MongoDB.

Data Model:
Collections:

Properties: Represents information about each property.
Owners: Represents information about each owner.
Attributes:

Properties Collection:

_id: Unique identifier for the property.
area: Area where the property is located.
rate: Price of the property.
ownerId: References the owner who owns the property.
Owners Collection:

_id: Unique identifier for the owner.
name: Owner's name.
Insert Sample Data:
javascript
Copy code
// Insert sample data into the Properties collection
db.properties.insertMany([
    { area: "Nashik", rate: 120000, ownerId: ObjectId("owner_id_1") },
    { area: "Mumbai", rate: 1500000, ownerId: ObjectId("owner_id_2") },
    // Add more property documents as needed
]);

// Insert sample data into the Owners collection
db.owners.insertMany([
    { name: "Mr. Patil", _id: ObjectId("owner_id_1") },
    { name: "Mr. Shah", _id: ObjectId("owner_id_2") },
    // Add more owner documents as needed
]);
Queries:
a. Display area-wise property details:

javascript
Copy code
db.properties.find({}, { area: 1, rate: 1, _id: 0 });
b. Display properties owned by 'Mr. Patil' having the minimum rate:

javascript
Copy code
const owner = db.owners.findOne({ name: "Mr. Patil" });
const minRateProperty = db.properties.find({ ownerId: owner._id }).sort({ rate: 1 }).limit(1);
minRateProperty;
c. Give the details of the owner whose property is at “Nashik”:

javascript
Copy code
const propertyInNashik = db.properties.findOne({ area: "Nashik" });
const ownerDetails = db.owners.findOne({ _id: propertyInNashik.ownerId });
ownerDetails;
d. Display the area of the property whose rate is less than 100000:

javascript
Copy code
db.properties.find({ rate: { $lt: 100000 } }, { area: 1, _id: 0 });




Slip2:

Create a container add row inside it and add 3 columns inside row using BootStrap

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Container with Rows and Columns</title>
</head>

<body>

    <div class="container">
        <h2>Bootstrap Container with Rows and Columns</h2>

        <!-- Row -->
        <div class="row">

            <!-- Column 1 -->
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Column 1</h5>
                        <p class="card-text">Some content for column 1.</p>
                    </div>
                </div>
            </div>

            <!-- Column 2 -->
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Column 2</h5>
                        <p class="card-text">Some content for column 2.</p>
                    </div>
                </div>
            </div>

            <!-- Column 3 -->
            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Column 3</h5>
                        <p class="card-text">Some content for column 3.</p>
                    </div>
                </div>
            </div>

        </div>
        <!-- End Row -->

    </div>

    <!-- Bootstrap JS and Popper.js -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</body>

</html>


1. Model the following system as a document database. Consider a database of newspaper, publisher, and city. Different publisher publishes various newspapers in different cities 2. Assume appropriate attributes and collections as per the query requirements. [3] 3. Insert at least 5 documents in each collection. [3] 4. Answer the following Queries. a. List all newspapers available “NASHIK” city [3] b. List all the newspaper of “Marathi” language [3] c. Count no. of publishers of “Gujrat” state [4] d. Write a cursor to show newspapers with highest sale in Maharashtra State [4] 


Insert Sample Data:
javascript
Copy code
// Insert sample data into the Newspapers collection
db.newspapers.insertMany([
    { name: "Times of Nashik", language: "English", cityId: ObjectId("nashik_city_id") },
    { name: "Marathi Manoos", language: "Marathi", cityId: ObjectId("pune_city_id") },
    // Add more newspaper documents as needed
]);

// Insert sample data into the Publishers collection
db.publishers.insertMany([
    { name: "ABC Publications", state: "Maharashtra" },
    { name: "XYZ Media", state: "Gujarat" },
    // Add more publisher documents as needed
]);

// Insert sample data into the Cities collection
db.cities.insertMany([
    { name: "Nashik", state: "Maharashtra", _id: ObjectId("nashik_city_id") },
    { name: "Pune", state: "Maharashtra", _id: ObjectId("pune_city_id") },
    // Add more city documents as needed
]);
Queries:
a. List all newspapers available in "Nashik" city:

javascript
Copy code
db.newspapers.find({ cityId: ObjectId("nashik_city_id") });
b. List all newspapers of "Marathi" language:

javascript
Copy code
db.newspapers.find({ language: "Marathi" });
c. Count the number of publishers in "Gujarat" state:

javascript
Copy code
db.publishers.count({ state: "Gujarat" });
d. Write a cursor to show newspapers with the highest sale in Maharashtra State:

javascript
Copy code
const cursor = db.newspapers.aggregate([
    {
        $lookup: {
            from: "cities",
            localField: "cityId",
            foreignField: "_id",
            as: "city"
        }
    },
    {
        $match: { "city.state": "Maharashtra" }
    },
    {
        $group: {
            _id: "$name",
            totalSale: { $sum: 1 }
        }
    },
    {
        $sort: { totalSale: -1 }
    }
]);

while (cursor.hasNext()) {
    const doc = cursor.next();
    print(`Newspaper: ${doc._id}, Total Sale: ${doc.totalSale}`);
}







Slip 6:

Create a web page being rendered in the browser consists of many things - logo, informative text, pictures, hyperlinks, navigational structure and table.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Web Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }

        nav {
            background-color: #444;
            color: white;
            padding: 10px;
        }

        nav a {
            color: white;
            text-decoration: none;
            padding: 10px;
            margin: 0 10px;
        }

        section {
            padding: 20px;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 15px;
            text-align: left;
        }

        th {
            background-color: #333;
            color: white;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>

    <header>
        <img src="https://th.bing.com/th?id=OIP.VDeMmrDyV7iiAEa5LdFASQHaHa&w=80&h=80&c=12&rs=1&qlt=90&o=6&pid=13.1" alt="Your Logo">
        <h1>LearnWithNil</h1>
    </header>

    <nav>
        <a href="http://myinterview.epizy.com">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </nav>

    <section>
        <h2>Welcome to Your Website</h2>
        <p>This is some informative text about your website. You can add more content here.</p>

        <img src="https://th.bing.com/th/id/OIP.iNHdY_zdIV0wquAhRQ_LGQHaLH?w=178&h=237&c=7&r=0&o=5&pid=1.7" alt="Description of the image">
        <img src="https://th.bing.com/th/id/OIP.sbh7yBDhKSIz7V44eqzhHwHaFj?w=250&h=188&c=7&r=0&o=5&pid=1.7" width="300" alt="Description of the image">

        <p>More text...</p>

        <table>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <!-- Add more rows as needed -->
        </table>
    </section>

    <footer>
        &copy; 2023 Your Website. All Rights Reserved.
    </footer>

</body>

</html>


OUTPUT:





Q2) 

1. Model the following information as a document database. A customer can take different policies and get the benefit. There are different types of policies provided by various companies 

2. Assume appropriate attributes and collections as per the query requirements. [3] 

3. Insert at least 5 documents in each collection. [3]

 4. Answer the following Queries. 

a. List the details of customers who have taken “Komal Jeevan” Policy [3]

 b. Display average premium amount [3]

 c. Increase the premium amount by 5% for policy type=”Monthly” [4] 

d. Count no. of customers who have taken policy type “half yearly”. 



To model the given information as a document database, we can use MongoDB as an example. MongoDB is a NoSQL database that works well with document-based data. We'll create two collections: one for customers and one for policies. Each customer document will contain information about the customer and the policies they have taken. Each policy document will contain details about the policy, including the premium amount.

  1. Collections and Attributes:


// Customers Collection
{
  "_id": ObjectId("customer_id"),
  "name": "John Doe",
  "email": "john.doe@example.com",
  "policies": [
    {
      "policy_name": "Komal Jeevan",
      "premium_amount": 1000,
      "policy_type": "Monthly"
    },
    // Add more policies as needed
  ]
}

// Policies Collection
{
  "_id": ObjectId("policy_id"),
  "policy_name": "Komal Jeevan",
  "premium_amount": 1200,
  "policy_type": "Monthly",
  "company": "ABC Insurance"
}




  1. Insert at least 5 documents in each collection:

You can use the MongoDB insertMany method to insert documents into the collections.


// Insert 5 customers
db.customers.insertMany([
  { "name": "John Doe", "email": "john.doe@example.com", "policies": [...] },
  // Add more customer documents as needed
]);

// Insert 5 policies
db.policies.insertMany([
  { "policy_name": "Komal Jeevan", "premium_amount": 1200, "policy_type": "Monthly", "company": "ABC Insurance" },
  // Add more policy documents as needed
]);



  1. Queries:

a. List the details of customers who have taken "Komal Jeevan" Policy:


db.customers.find({ "policies.policy_name": "Komal Jeevan" });


b. Display average premium amount:

db.policies.aggregate([
  {
    $group: {
      _id: null,
      averagePremium: { $avg: "$premium_amount" }
    }
  }
]);



c. Increase the premium amount by 5% for policy type="Monthly":


db.policies.updateMany(
  { "policy_type": "Monthly" },
  { $mul: { "premium_amount": 1.05 } }
);


d. Count the number of customers who have taken policy type "half yearly":

db.customers.count({ "policies.policy_type": "half yearly" });



Slip 16:

 Create Contact Form on Bootstrap


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Contact Us</title>
</head>

<body>

    <div class="container mt-5">
        <h2>Contact Us</h2>
        <form action="#" method="post">

            <!-- First Name Input -->
            <div class="form-group">
                <label for="firstName">First Name:</label>
                <input type="text" class="form-control" id="firstName" name="firstName" required>
            </div>

            <!-- Last Name Input -->
            <div class="form-group">
                <label for="lastName">Last Name:</label>
                <input type="text" class="form-control" id="lastName" name="lastName" required>
            </div>

            <!-- Email Input -->
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>

            <!-- Comment Textarea -->
            <div class="form-group">
                <label for="comment">Comment:</label>
                <textarea class="form-control" id="comment" name="comment" rows="5" required></textarea>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    <!-- Bootstrap JS and Popper.js -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</body>

</html>

 


Q.2]

Model the following food service industry information as a graph model, and answer the following queries using Cypher. Consider food service industries like ZOMATO, Swiggy around us. Popular restaurants are connected to these industries to increase sell. A person order food through this industry and get offers. A person give rate(1-5 stars) to company its facility/facilities. and can recommend this to his/her friends. 4. Identify the labels and relationships, along with their properties, and draw a high-level Graph model. [3] 5. Create nodes and relationships, along with their properties, and visualize your actual Graph model. [3] 6. Answer the Queries. a. Count no. of customers who place order on “1/1/2023” [3] b. List the names of customers whose name starts with S and place order using Swiggy [3] c. List the names of hotels with high rating (>=4).[4] d. List the most recommended hotels in……. area. [4]

----------------->


To model the food service industry information as a graph using Cypher, we need to define labels for nodes and relationships between them. Below is a high-level graph model, and then I'll provide Cypher queries for the specified questions:

High-Level Graph Model:

  • Labels:
    1. Person: Represents a person.
    2. Restaurant: Represents a restaurant or hotel.
    3. FoodService: Represents a food service industry like ZOMATO or Swiggy.
    4. Order: Represents an order placed by a person.
    5. Recommendation: Represents a recommendation made by a person.
  • Relationships:
    1. (Person)-[:PLACED]->(Order): Indicates a person placing an order.
    2. (Order)-[:FOR]->(Restaurant): Indicates the restaurant associated with the order.
    3. (Person)-[:RECOMMENDED]->(Restaurant): Indicates a person recommending a restaurant.
    4. (Person)-[:USED]->(FoodService): Indicates a person using a food service.
    5. (Person)-[:RATED]->(FoodService): Indicates a person rating a food service.

Cypher Queries:

a. Count no. of customers who placed an order on "1/1/2023":


MATCH (p:Person)-[:PLACED]->(o:Order)
WHERE o.orderDate = "1/1/2023"
RETURN COUNT(p) AS numberOfCustomers;


b.. List the names of customers whose name starts with S and placed an order using Swiggy:

MATCH (p:Person)-[:PLACED]->(o:Order)-[:FOR]->(r:Restaurant)-[:USED]->(fs:FoodService)
WHERE p.name STARTS WITH 'S' AND fs.name = 'Swiggy'
RETURN p.name AS customerName;



c. List the names of hotels with a high rating (>=4):

MATCH (r:Restaurant)
WHERE r.rating >= 4
RETURN r.name AS hotelName;



d. List the most recommended hotels in a specific area (replace '...') :

MATCH (r:Restaurant)-[:RECOMMENDED]->(p:Person)
WHERE r.area = '...'
RETURN r.name AS hotelName, COUNT(p) AS recommendations
ORDER BY recommendations DESC
LIMIT 5;


Visualization:

Visualizing the graph model would depend on the tool you are using (e.g., Neo4j Browser, Bloom, or any other graph visualization tool). Use the CREATE statements to create nodes and relationships, and then execute the queries to retrieve and visualize the data.




'Practical Slips HTML, CSS, BOOTSTRAP PROGRAMS:


2) Create a container add row inside it and add 3 columns inside row using BootStrap.

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Bootstrap Container Example</title>

 

    <!-- Bootstrap CSS -->

    <link href="path/to/bootstrap.min.css" rel="stylesheet">

</head>

<body>

 

    <div class="container mt-5">

        <!-- Container with margin-top (mt-5) -->

 

        <div class="row">

            <!-- Row inside the container -->

 

            <div class="col-md-4">

                <!-- First Column (col-md-4) -->

                <div class="card">

                    <div class="card-body">

                        <h5 class="card-title">Column 1</h5>

                        <p class="card-text">Content for column 1.</p>

                    </div>

                </div>

            </div>

 

            <div class="col-md-4">

                <!-- Second Column (col-md-4) -->

                <div class="card">

                    <div class="card-body">

                        <h5 class="card-title">Column 2</h5>

                        <p class="card-text">Content for column 2.</p>

                    </div>

                </div>

            </div>

 

            <div class="col-md-4">

                <!-- Third Column (col-md-4) -->

                <div class="card">

                    <div class="card-body">

                        <h5 class="card-title">Column 3</h5>

                        <p class="card-text">Content for column 3.</p>

                    </div>

                </div>

            </div>

 

        </div>

        <!-- End of Row -->

 

    </div>

    <!-- End of Container -->

 

    <!-- Bootstrap JS (Optional, for certain components) -->

    <script src="path/to/bootstrap.bundle.min.js"></script>

</body>

</html>

 

 

 3) Write a bootstrap application to display thumbnails of the images.

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Bootstrap Image Thumbnails</title>

 

    <!-- Bootstrap CSS -->

    <link href="path/to/bootstrap.min.css" rel="stylesheet">

</head>

<body>

 

    <div class="container mt-5">

        <!-- Container with margin-top (mt-5) -->

 

        <h2 class="mb-4">Image Thumbnails</h2>

 

        <div class="row">

            <!-- Row for Image Thumbnails -->

 

            <div class="col-md-4 mb-4">

                <!-- First Image Thumbnail (col-md-4) -->

                <div class="card">

                    <img src="path/to/image1.jpg" class="card-img-top" alt="Image 1">

                    <div class="card-body">

                        <p class="card-text">Description for Image 1.</p>

                    </div>

                </div>

            </div>

 

            <div class="col-md-4 mb-4">

                <!-- Second Image Thumbnail (col-md-4) -->

                <div class="card">

                    <img src="path/to/image2.jpg" class="card-img-top" alt="Image 2">

                    <div class="card-body">

                        <p class="card-text">Description for Image 2.</p>

                    </div>

                </div>

            </div>

 

            <div class="col-md-4 mb-4">

                <!-- Third Image Thumbnail (col-md-4) -->

                <div class="card">

                    <img src="path/to/image3.jpg" class="card-img-top" alt="Image 3">

                    <div class="card-body">

                        <p class="card-text">Description for Image 3.</p>

                    </div>

                </div>

            </div>

 

            <!-- Add more columns as needed for additional images -->

 

        </div>

        <!-- End of Row -->

 

    </div>

    <!-- End of Container -->

 

    <!-- Bootstrap JS (Optional, for certain components) -->

    <script src="path/to/bootstrap.bundle.min.js"></script>

</body>

</html>

 

 

 

6) Create a web page being rendered in the browser consists of many things - logo, informative text, pictures, hyperlinks, navigational structure and table

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Your Web Page</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 20px;

        }

 

        header {

            text-align: center;

            padding: 20px;

            background-color: #f2f2f2;

        }

 

        nav {

            margin-top: 20px;

        }

 

        nav ul {

            list-style-type: none;

            margin: 0;

            padding: 0;

            overflow: hidden;

            background-color: #333;

        }

 

        nav li {

            float: left;

        }

 

        nav li a {

            display: block;

            color: white;

            text-align: center;

            padding: 14px 16px;

            text-decoration: none;

        }

 

        nav li a:hover {

            background-color: #ddd;

            color: black;

        }

 

        section {

            margin-top: 20px;

        }

 

        img {

            max-width: 100%;

            height: auto;

        }

 

        table {

            width: 100%;

            border-collapse: collapse;

            margin-top: 20px;

        }

 

        table, th, td {

            border: 1px solid #ddd;

        }

 

        th, td {

            padding: 10px;

            text-align: left;

        }

 

        th {

            background-color: #f2f2f2;

        }

    </style>

</head>

<body>

 

    <header>

        <h1>Your Website</h1>

        <img src="your-logo.png" alt="Your Logo">

    </header>

 

    <nav>

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">About</a></li>

            <li><a href="#">Services</a></li>

            <li><a href="#">Contact</a></li>

        </ul>

    </nav>

 

    <section>

        <h2>Welcome to Our Website</h2>

        <p>This is a simple web page with various elements.</p>

        <img src="your-image.jpg" alt="Description of the image">

    </section>

 

    <section>

        <h2>Table Example</h2>

        <table>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Age</th>

                    <th>Location</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>John Doe</td>

                    <td>25</td>

                    <td>New York</td>

                </tr>

                <tr>

                    <td>Jane Smith</td>

                    <td>30</td>

                    <td>London</td>

                </tr>

            </tbody>

        </table>

    </section>

 

</body>

</html>

 

4) Write a bootstrap program for the following

“The .table class adds basic styling (light padding and only horizontal dividers) to a table” The table can have the first name, last name, and email id as columns

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Bootstrap Table Example</title>

 

    <!-- Bootstrap CSS -->

    <link href="path/to/bootstrap.min.css" rel="stylesheet">

</head>

<body>

 

    <div class="container mt-5">

        <!-- Container with margin-top (mt-5) -->

 

        <h2 class="mb-4">User Information Table</h2>

 

        <table class="table">

            <!-- Bootstrap Table -->

 

            <thead>

                <!-- Table Header -->

                <tr>

                    <th scope="col">First Name</th>

                    <th scope="col">Last Name</th>

                    <th scope="col">Email ID</th>

                </tr>

            </thead>

 

            <tbody>

                <!-- Table Body -->

                <tr>

                    <td>John</td>

                    <td>Doe</td>

                    <td>john.doe@example.com</td>

                </tr>

                <tr>

                    <td>Jane</td>

                    <td>Smith</td>

                    <td>jane.smith@example.com</td>

                </tr>

                <!-- Add more rows as needed -->

            </tbody>

 

        </table>

        <!-- End of Bootstrap Table -->

 

    </div>

    <!-- End of Container -->

 

    <!-- Bootstrap JS (Optional, for certain components) -->

    <script src="path/to/bootstrap.bundle.min.js"></script>

</body>

</html>

 

7)Create a 3D text, apply appropriate font, style, color. Use : Hover in the style selector so that the 3D effects appear only when you hover over the text

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>3D Text Effect</title>

 

    <style>

        body {

            font-family: 'Arial', sans-serif;

            background-color: #f0f0f0;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

        }

 

        .three-d-text {

            font-size: 3em;

            font-weight: bold;

            color: #3498db;

            text-shadow: 4px 4px 0 #2980b9, 7px 7px 0 #2c3e50;

            transition: transform 0.3s ease-in-out;

        }

 

        .three-d-text:hover {

            transform: translate(3px, 3px);

        }

    </style>

</head>

<body>

 

    <div class="three-d-text">Hover me!</div>

 

</body>

</html>

 

8) Create a button with different style (Secondary, Primary, Success, Error, Info, Warning, Danger) using BootStrap

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Bootstrap Button Styles</title>

 

    <!-- Bootstrap CSS -->

    <link href="path/to/bootstrap.min.css" rel="stylesheet">

</head>

<body>

 

    <div class="container mt-5">

        <!-- Container with margin-top (mt-5) -->

 

        <h2 class="mb-4">Bootstrap Button Styles</h2>

 

        <!-- Button Styles -->

        <button type="button" class="btn btn-secondary mr-2">Secondary</button>

        <button type="button" class="btn btn-primary mr-2">Primary</button>

        <button type="button" class="btn btn-success mr-2">Success</button>

        <button type="button" class="btn btn-danger mr-2">Danger</button>

        <button type="button" class="btn btn-info mr-2">Info</button>

        <button type="button" class="btn btn-warning mr-2">Warning</button>

        <button type="button" class="btn btn-error">Error</button>

        <!-- End of Button Styles -->

 

    </div>

    <!-- End of Container -->

 

    <!-- Bootstrap JS (Optional, for certain components) -->

    <script src="path/to/bootstrap.bundle.min.js"></script>

</body>

</html>

 

9)Write an HTML 5 program for student registration form for college admission. Use input type like search, email, date etc

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Student Registration Form</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            margin: 20px;

        }

 

        form {

            max-width: 600px;

            margin: 0 auto;

            background-color: #fff;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

 

        label {

            display: block;

            margin-bottom: 8px;

            font-weight: bold;

        }

 

        input, select {

            width: 100%;

            padding: 10px;

            margin-bottom: 16px;

            border: 1px solid #ccc;

            border-radius: 4px;

            box-sizing: border-box;

        }

 

        input[type="submit"] {

            background-color: #4caf50;

            color: #fff;

            cursor: pointer;

        }

 

        input[type="submit"]:hover {

            background-color: #45a049;

        }

    </style>

</head>

<body>

 

    <form action="#" method="post">

        <h2>Student Registration Form</h2>

 

        <label for="fullName">Full Name:</label>

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

 

        <label for="email">Email:</label>

        <input type="email" id="email" name="email" required>

 

        <label for="dateOfBirth">Date of Birth:</label>

        <input type="date" id="dateOfBirth" name="dateOfBirth" required>

 

        <label for="gender">Gender:</label>

        <select id="gender" name="gender" required>

            <option value="male">Male</option>

            <option value="female">Female</option>

            <option value="other">Other</option>

        </select>

 

        <label for="course">Select Course:</label>

        <select id="course" name="course" required>

            <option value="computerScience">Computer Science</option>

            <option value="engineering">Engineering</option>

            <option value="biology">Biology</option>

            <!-- Add more options as needed -->

        </select>

 

        <label for="searchCollege">Search for College:</label>

        <input type="search" id="searchCollege" name="searchCollege">

 

        <label for="comments">Additional Comments:</label>

        <textarea id="comments" name="comments" rows="4"></textarea>

 

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

    </form>

 

</body>

</html>

 

10)Create a web page that shows use of transition properties, transition delay and duration effect.

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>CSS Transition Example</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

            background-color: #f4f4f4;

        }

 

        button {

            padding: 10px 20px;

            font-size: 16px;

            border: none;

            cursor: pointer;

            background-color: #4caf50;

            color: #fff;

            border-radius: 4px;

            transition-property: background-color, color;

            transition-duration: 0.3s;

            transition-delay: 0.1s;

        }

 

        button:hover {

            background-color: #45a049;

            color: #e0e0e0;

        }

    </style>

</head>

<body>

 

    <button>Hover Me</button>

 

</body>

</html>

 

11)Write a HTML code which will divide web page in three frames. First frame should consists of company name as heading. Second frame should consists of name of departments with hyperlink. Once click on any department, it should display information of that department in third frame.

 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <style>

    body {

      margin: 0;

      padding: 0;

      font-family: Arial, sans-serif;

      display: flex;

      flex-direction: column;

      height: 100vh;

    }

 

    header {

      background-color: #333;

      color: #fff;

      text-align: center;

      padding: 10px;

    }

 

    main {

      display: flex;

      flex: 1;

    }

 

    nav {

      width: 200px;

      background-color: #f0f0f0;

      padding: 10px;

      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

    }

 

    nav a {

      display: block;

      margin-bottom: 10px;

      text-decoration: none;

      color: #333;

    }

 

    article {

      flex: 1;

      padding: 20px;

    }

  </style>

</head>

<body>

 

  <header>

    <h1>Company Name</h1>

  </header>

 

  <main>

    <nav>

      <a href="#" onclick="showDepartment('department1')">Department 1</a>

      <a href="#" onclick="showDepartment('department2')">Department 2</a>

      <a href="#" onclick="showDepartment('department3')">Department 3</a>

      <!-- Add more departments as needed -->

    </nav>

 

    <article id="department-info">

      <!-- Department information will be displayed here -->

    </article>

  </main>

 

  <script>

    function showDepartment(department) {

      // You can replace the following line with an AJAX request to fetch department information from the server

      const departmentInfo = getDepartmentInfo(department);

 

      // Display department information in the third frame (article)

      document.getElementById('department-info').innerHTML = departmentInfo;

    }

 

    function getDepartmentInfo(department) {

      // Simulated department information, replace this with actual data

      const departmentData = {

        department1: 'Information for Department 1',

        department2: 'Information for Department 2',

        department3: 'Information for Department 3',

        // Add more departments as needed

      };

 

      return departmentData[department] || 'Department information not available.';

    }

  </script>

 

</body>

</html>

 

12) Design an appropriate HTML form for customer registration visiting a departmental store. Form should consist of fields such as name, contact no, gender, preferred days of purchasing, favorite item (to be selected from a list of items), suggestions etc. You should provide button to submit as well as reset the form contents.

 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>Customer Registration Form</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background-color: #f4f4f4;

      margin: 0;

      padding: 20px;

    }

 

    form {

      max-width: 600px;

      margin: auto;

      background-color: #fff;

      padding: 20px;

      border-radius: 8px;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    }

 

    label {

      display: block;

      margin-bottom: 8px;

      font-weight: bold;

    }

 

    input, select, textarea {

      width: 100%;

      padding: 8px;

      margin-bottom: 16px;

      box-sizing: border-box;

      border: 1px solid #ccc;

      border-radius: 4px;

    }

 

    textarea {

      resize: vertical;

      height: 100px;

    }

 

    button {

      background-color: #4caf50;

      color: #fff;

      padding: 10px 15px;

      border: none;

      border-radius: 4px;

      cursor: pointer;

    }

 

    button[type="reset"] {

      background-color: #f44336;

    }

  </style>

</head>

<body>

 

  <form id="customerRegistrationForm">

    <label for="name">Name:</label>

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

 

    <label for="contactNo">Contact Number:</label>

    <input type="tel" id="contactNo" name="contactNo" pattern="[0-9]{10}" required>

    <small>Enter a 10-digit phone number.</small>

 

    <label for="gender">Gender:</label>

    <select id="gender" name="gender" required>

      <option value="male">Male</option>

      <option value="female">Female</option>

      <option value="other">Other</option>

    </select>

 

    <label for="preferredDays">Preferred Days of Purchasing:</label>

    <input type="text" id="preferredDays" name="preferredDays">

 

    <label for="favoriteItem">Favorite Item:</label>

    <select id="favoriteItem" name="favoriteItem">

      <option value="clothing">Clothing</option>

      <option value="electronics">Electronics</option>

      <option value="homeAppliances">Home Appliances</option>

      <option value="groceries">Groceries</option>

    </select>

 

    <label for="suggestions">Suggestions:</label>

    <textarea id="suggestions" name="suggestions"></textarea>

 

    <button type="submit">Submit</button>

    <button type="reset">Reset</button>

  </form>

 

</body>

</html>

 

13) Create a useful web with the following information and structure using HTML5 tags like:<header> , <footer>, <nav>, <aside>, <section>

 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>Fictional Tech Product</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      margin: 0;

      padding: 0;

      background-color: #f4f4f4;

    }

 

    header {

      background-color: #333;

      color: #fff;

      text-align: center;

      padding: 10px;

    }

 

    nav {

      background-color: #555;

      color: #fff;

      padding: 10px;

    }

 

    nav a {

      text-decoration: none;

      color: #fff;

      margin: 0 15px;

    }

 

    section {

      max-width: 800px;

      margin: 20px auto;

      padding: 20px;

      background-color: #fff;

      border-radius: 8px;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    }

 

    aside {

      float: right;

      width: 30%;

      padding: 20px;

      background-color: #ddd;

      border-radius: 8px;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    }

 

    footer {

      background-color: #333;

      color: #fff;

      text-align: center;

      padding: 10px;

      position: absolute;

      bottom: 0;

      width: 100%;

    }

  </style>

</head>

<body>

 

  <header>

    <h1>Fictional Tech Product</h1>

  </header>

 

  <nav>

    <a href="#features">Features</a>

    <a href="#specs">Specifications</a>

    <a href="#buy">Buy Now</a>

  </nav>

 

  <section id="features">

    <h2>Features</h2>

    <p>This fictional tech product comes with amazing features to enhance your experience.</p>

    <ul>

      <li>Wireless Connectivity</li>

      <li>Long Battery Life</li>

      <li>High-Resolution Display</li>

      <li>Advanced Security</li>

    </ul>

  </section>

 

  <section id="specs">

    <h2>Specifications</h2>

    <p>Check out the technical specifications of our product:</p>

    <ul>

      <li>Processor: Quad-core, 2.0 GHz</li>

      <li>Memory: 8 GB RAM</li>

      <li>Storage: 256 GB SSD</li>

      <li>Operating System: TechOS</li>

    </ul>

  </section>

 

  <aside>

    <h2>Special Offer</h2>

    <p>For a limited time, get a 20% discount on your purchase. Use code: TECH20.</p>

  </aside>

 

  <footer>

    <p>&copy; 2023 Fictional Tech Company | Contact us at info@fictionaltech.com</p>

  </footer>

 

</body>

</html>

 

14)Design an HTML form to take the information of a customer for booking a travel plan consisting of fields such as name, address, contact no., gender, preferred season(Checkboxes), location type(to be selected from a list) etc. You should provide button to submit as well as reset the form contents

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Travel Plan Booking Form</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 20px;

        }

        form {

            max-width: 400px;

            margin: auto;

        }

        label {

            display: block;

            margin-bottom: 8px;

        }

        input, select {

            width: 100%;

            padding: 8px;

            margin-bottom: 12px;

            box-sizing: border-box;

        }

        input[type="checkbox"] {

            width: auto;

            margin-right: 5px;

        }

        button {

            background-color: #4CAF50;

            color: white;

            padding: 10px 15px;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }

        button[type="reset"] {

            background-color: #f44336;

        }

    </style>

</head>

<body>

 

    <form id="travelForm">

        <label for="name">Name:</label>

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

 

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

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

 

        <label for="contact">Contact No.:</label>

        <input type="tel" id="contact" name="contact" required>

 

        <label>Gender:</label>

        <input type="radio" id="male" name="gender" value="male" required>

        <label for="male">Male</label>

        <input type="radio" id="female" name="gender" value="female" required>

        <label for="female">Female</label>

 

        <label for="season">Preferred Season:</label>

        <input type="checkbox" id="spring" name="season" value="spring">

        <label for="spring">Spring</label>

        <input type="checkbox" id="summer" name="season" value="summer">

        <label for="summer">Summer</label>

        <input type="checkbox" id="autumn" name="season" value="autumn">

        <label for="autumn">Autumn</label>

        <input type="checkbox" id="winter" name="season" value="winter">

        <label for="winter">Winter</label>

 

        <label for="locationType">Location Type:</label>

        <select id="locationType" name="locationType" required>

            <option value="" disabled selected>Select Location Type</option>

            <option value="beach">Beach</option>

            <option value="mountain">Mountain</option>

            <option value="city">City</option>

            <option value="countryside">Countryside</option>

        </select>

 

        <button type="submit">Submit</button>

        <button type="reset">Reset</button>

    </form>

 

    <script>

        document.getElementById('travelForm').addEventListener('submit', function (e) {

            e.preventDefault(); // Prevent the default form submission

            // You can add code here to handle the form submission, e.g., sending data to a server

        });

    </script>

 

</body>

</html>

 

18)Create a web page, place an image in center and apply 2d transformation on it. (rotation, scaling, translation)

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>2D Transformation Example</title>

    <style>

        body {

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100vh;

            margin: 0;

        }

        img {

            transform-origin: center center;

            transition: transform 0.5s ease-in-out;

        }

    </style>

</head>

<body>

 

    <img id="transformImage" src="your-image-url.jpg" alt="Transformed Image" width="200">

 

    <script>

        const transformImage = document.getElementById('transformImage');

 

        // Rotate the image

        transformImage.style.transform = 'rotate(45deg)';

 

        // Scale the image

        setTimeout(() => {

            transformImage.style.transform = 'scale(1.5)';

        }, 1000);

 

        // Translate the image

        setTimeout(() => {

            transformImage.style.transform = 'translate(50px, 50px)';

        }, 2000);

    </script>

 

</body>

</html>

 

19)Create a web page in which show a button with a text “start download” , when click in start download a progress bar must be initialized with value 0 then increase by 10 in each second, change the color of progress bar after every three seconds..

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Download Page</title>

    <style>

        body {

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100vh;

            margin: 0;

        }

        #progressBar {

            width: 300px;

            height: 20px;

            background-color: #ddd;

            border-radius: 5px;

            overflow: hidden;

        }

        #progress {

            height: 100%;

            width: 0;

            background-color: #4CAF50;

            transition: width 0.3s ease;

        }

    </style>

</head>

<body>

 

    <button onclick="startDownload()">Start Download</button>

 

    <div id="progressBar">

        <div id="progress"></div>

    </div>

 

    <script>

        function startDownload() {

            const progressBar = document.getElementById('progress');

            let progressValue = 0;

            let intervalId;

 

            const changeColor = () => {

                const colors = ['#4CAF50', '#2196F3', '#FF9800'];

                const randomColor = colors[Math.floor(Math.random() * colors.length)];

                progressBar.style.backgroundColor = randomColor;

            };

 

            intervalId = setInterval(() => {

                progressValue += 10;

                progressBar.style.width = progressValue + '%';

 

                if (progressValue >= 100) {

                    clearInterval(intervalId);

                }

 

                if (progressValue % 30 === 0) {

                    changeColor();

                }

            }, 1000);

        }

    </script>

 

</body>

</html>

 

21)Write a css3 script for the student registration form with appropriate message display also high light compulsory fields in a different color

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Student Registration Form</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            margin: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100vh;

        }

        form {

            background-color: #fff;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

        label {

            display: block;

            margin-bottom: 8px;

            font-weight: bold;

        }

        input {

            width: 100%;

            padding: 8px;

            margin-bottom: 12px;

            box-sizing: border-box;

        }

        input[type="submit"] {

            background-color: #4CAF50;

            color: white;

            padding: 10px 15px;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }

        input[type="reset"] {

            background-color: #f44336;

            color: white;

            padding: 10px 15px;

            border: none;

            border-radius: 4px;

            cursor: pointer;

            margin-left: 10px;

        }

        .required {

            color: red;

        }

        .message {

            margin-top: 10px;

            padding: 10px;

            background-color: #e7f3fe;

            border: 1px solid #4e7dcb;

            border-radius: 4px;

            display: none;

        }

    </style>

</head>

<body>

 

    <form id="registrationForm">

        <label for="firstName">First Name<span class="required">*</span>:</label>

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

 

        <label for="lastName">Last Name<span class="required">*</span>:</label>

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

 

        <label for="email">Email<span class="required">*</span>:</label>

        <input type="email" id="email" name="email" required>

 

        <label for="password">Password<span class="required">*</span>:</label>

        <input type="password" id="password" name="password" required>

 

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

        <input type="reset" value="Reset">

 

        <div class="message" id="successMessage">Registration Successful!</div>

        <div class="message" id="errorMessage">Error submitting the form. Please try again.</div>

    </form>

 

    <script>

        const registrationForm = document.getElementById('registrationForm');

        const successMessage = document.getElementById('successMessage');

        const errorMessage = document.getElementById('errorMessage');

 

        registrationForm.addEventListener('submit', function (e) {

            e.preventDefault(); // Prevent the default form submission

            // You can add code here to handle the form submission, e.g., sending data to a server

 

            // For demonstration purposes, show a success message

            successMessage.style.display = 'block';

 

            // Clear the form after a delay (in a real scenario, this may be replaced with appropriate logic)

            setTimeout(() => {

                registrationForm.reset();

                successMessage.style.display = 'none';

            }, 3000);

        });

 

        registrationForm.addEventListener('reset', function () {

            // Reset the success message on form reset

            successMessage.style.display = 'none';

        });

    </script>

 

</body>

</html>

 

22)Create a web page to create 3D text. Apply all text effects like text shadow, text overflow, wordwrap etc

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>3D Text Effects</title>

    <style>

        body {

            font-family: 'Arial', sans-serif;

            background-color: #f0f0f0;

            margin: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100vh;

        }

 

        .container {

            text-align: center;

        }

 

        h1 {

            font-size: 48px;

            color: #333;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

            margin-bottom: 20px;

        }

 

        p {

            font-size: 18px;

            line-height: 1.6;

            color: #555;

            margin-bottom: 30px;

        }

 

        .overflow-text {

            overflow: hidden;

            white-space: nowrap;

            text-overflow: ellipsis;

            max-width: 300px;

            margin: 0 auto;

        }

 

        .word-wrap-text {

            word-wrap: break-word;

            max-width: 300px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

 

    <div class="container">

        <h1>3D Text Effects</h1>

        <p>Explore various text effects like text shadow, text overflow, word wrap, etc.</p>

 

        <div class="overflow-text">

            <h2>Overflow Text: This is a long text that overflows the container and is truncated with ellipsis.</h2>

        </div>

 

        <div class="word-wrap-text">

            <h2>Word Wrap Text: This is a long text that wraps onto the next line when it reaches the container's width limit.</h2>

        </div>

    </div>

 

</body>

</html>

 

23)Create a web page to display image on screen Apply the following

a.Display image in tiles

b.Rotate image in clockwise and anticlockwise direction

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Image Display with Rotation</title>

    <style>

        body {

            margin: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100vh;

            background-color: #f0f0f0;

        }

 

        #imageContainer {

            display: flex;

            flex-wrap: wrap;

        }

 

        .imageTile {

            width: 150px;

            height: 150px;

            overflow: hidden;

            border: 1px solid #ddd;

            margin: 5px;

        }

 

        img {

            max-width: 100%;

            max-height: 100%;

            transform-origin: center center;

            transition: transform 0.3s ease;

        }

 

        button {

            margin-top: 20px;

            padding: 10px;

            font-size: 16px;

            cursor: pointer;

        }

    </style>

</head>

<body>

 

    <div id="imageContainer">

        <!-- Replace "your-image-url.jpg" with the actual URL or path of your image -->

        <div class="imageTile">

            <img src="your-image-url.jpg" alt="Image Tile 1" id="imageTile1">

        </div>

        <div class="imageTile">

            <img src="your-image-url.jpg" alt="Image Tile 2" id="imageTile2">

        </div>

        <div class="imageTile">

            <img src="your-image-url.jpg" alt="Image Tile 3" id="imageTile3">

        </div>

        <!-- Add more image tiles as needed -->

    </div>

 

    <button onclick="rotateClockwise()">Rotate Clockwise</button>

    <button onclick="rotateAntiClockwise()">Rotate Anti-clockwise</button>

 

    <script>

        function rotateClockwise() {

            rotateImage("imageContainer", 90);

        }

 

        function rotateAntiClockwise() {

            rotateImage("imageContainer", -90);

        }

 

        function rotateImage(containerId, angle) {

            const container = document.getElementById(containerId);

            const imageTiles = container.querySelectorAll('.imageTile img');

 

            imageTiles.forEach(img => {

                img.style.transform = `rotate(${angle}deg)`;

            });

        }

    </script>

 

</body>

</html>








'Some Shortcut Practical Slips:








HTML,CSS,Bootstrap Questions(10 marks)

=====================================================================================================

1)Write the HTML5 code for generating the form as shown below. Apply the internal CSS to the following form to change the font size of the heading to 6pt and change the color to red and also change the background color to yellow.

 

 

 

 

Answer:

 

 

 

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

5)Write a HTML code, which generate the following output [ Apply border, border radius tags ]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

6) Create a web page being rendered in the browser consists of many things - logo, informative text, pictures, hyperlinks, navigational structure and table.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2) Create a container add row inside it and add 3 columns inside row using BootStrap.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

3) Write a bootstrap application to display thumbnails of the images.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

4) Write a bootstrap program for the following

“The .table class adds basic styling (light padding and only horizontal dividers) to a table” The table can have the first name, last name, and email id as columns

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

7)Create a 3D text, apply appropriate font, style, color. Use : Hover in the style selector so that the 3D effects appear only when you hover over the text

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

8) Create a button with different style (Secondary, Primary, Success, Error, Info, Warning, Danger) using BootStrap

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

9)Write an HTML 5 program for student registration form for college admission. Use input type like search, email, date etc

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

10)Create a web page that shows use of transition properties, transition delay and duration effect.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

11)Write a HTML code which will divide web page in three frames. First frame should consists of company name as heading. Second frame should consists of name of departments with hyperlink. Once click on any department, it should display information of that department in third frame.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

12)Design an appropriate HTML form for customer registration visiting a departmental store. Form should consist of fields such as name, contact no, gender, preferred days of purchasing, favorite item (to be selected from a list of items), suggestions etc. You should provide button to submit as well as reset the form contents.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

13)Create a useful web with the following information and structure using HTML5 tags like:<header> , <footer>, <nav>, <aside>, <section>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

14)Design an HTML form to take the information of a customer for booking a travel plan consisting of fields such as name, address, contact no., gender, preferred season(Checkboxes), location type(to be selected from a list) etc. You should provide button to submit as well as reset the form contents

15)Create HTML web-page using Bootstrap as shown below

16)Create Contact Form on Bootstrap

 

17) Design HTML 5 Page Using CSS which display the following Box ( use Box Model Property in CSS)

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

18)Create a web page, place an image in center and apply 2d transformation on it. (rotation, scaling, translation)

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

19)Create a web page in which show a button with a text “start download” , when click in start download a progress bar must be initialized with value 0 then increase by 10 in each second, change the color of progress bar after every three seconds..

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

20)Create a web page , show a button with a text “start download” , when click in start download a progress bar must be initialized with value 0 then increase by 5 in each second then at the end of downloading process alert the message “Download completed”

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

21)Write a css3 script for the student registration form with appropriate message display also high light compulsory fields in a different color

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

22)Create a web page to create 3D text. Apply all text effects like text shadow, text overflow, wordwrap etc

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

23)Create a web page to display image on screen Apply the following

a.Display image in tiles

b.Rotate image in clockwise and anticlockwise direction

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------24)Create an html page named as “calendar.html”. Use necessary input types and get following output

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

25)Write the HTML5 code for generating the form as shown below. Apply the internal CSS to the following form to set the font size, font color, heading , background color etc.

 

============================================================================================================================================================================================================

 

 

 

 

 

 

 

 

 

 

 

 

 

MongoDb,Neo4J Questions(20 marks)

 

 

Q1)

1.Model the following Property system as a document database. Consider a set of Property, Owner. One owner can buy many properties.

2.Assume appropriate attributes and collections as per the query requirements.

3.Insert at least 05 documents in each collection.        

4.Answer the following Queries

                a.Display area wise property details.              

A.    Answer :

// MongoDB Query

db.Property.find({}, { area: 1, rate: 1, _id: 0 })

 

                b.Display property owned by 'Mr.Patil' having minimum rate

B.    Answer:

// MongoDB Query

db.Property.find({ ownerId: db.Owner.findOne({ name: "Mr. Patil" })._id }).sort({ rate: 1 }).limit(1)

 

 

                c.Give the details of owner whose property is at “Nashik”.          

                Display area of property whose rate is less than 100000.

C Answer:

// MongoDB Query

db.Owner.findOne({ "propertiesOwned": { $in: [db.Property.findOne({ area: "Nashik" })._id] } })

db.Property.find({ rate: { $lt: 100000 } }, { area: 1, _id: 0 })

 

 

 

 

Json Format:Property collection

[

  {

    "_id": 1,

    "area": "Mumbai",

    "rate": 150000,

    "ownerId": 101

  },

  {

    "_id": 2,

    "area": "Pune",

    "rate": 120000,

    "ownerId": 102

  },

  {

    "_id": 3,

    "area": "Nashik",

    "rate": 90000,

    "ownerId": 103

  },

  // Add more property documents

]

 

 

----//-----------------------//------------------//-

Json format : Owner collection

[

  {

    "_id": 101,

    "name": "Mr. Patil",

    "propertiesOwned": [1, 4]  // Property IDs owned by Mr. Patil

  },

  {

    "_id": 102,

    "name": "Mrs. Shah",

    "propertiesOwned": [2, 5]

  },

  {

    "_id": 103,

    "name": "Mr. Deshmukh",

    "propertiesOwned": [3]

  },

  // Add more owner documents

]

 

 

 

 

------------------------------------------------------------------------------------------------------------------------------

Q2)

1.Model the following system as a document database. Consider a database of newspaper, publisher, and city.

Different publisher publishes various newspapers in different cities

2.Assume appropriate attributes and collections as per the query requirements.  

3.Insert at least 5 documents in each collection.          

4.Answer the following Queries.

a. List all newspapers available “NASHIK” city              

Answer:

// MongoDB Query

db.Newspaper.find({ city: "Nashik" })

 

b. List all the newspaper of “Marathi” language

Answer:

// MongoDB Query

db.Newspaper.find({ language: "Marathi" })

               

c. Count no. of publishers of “Gujrat” state

Answer:

// MongoDB Query

db.Publisher.count({ state: "Gujarat" })

 

d. Write a cursor to show newspapers with highest sale in Maharashtra State

Answer:

// MongoDB Query

var cursor = db.Newspaper.find({}).sort({ sales: -1 }).limit(1);

while (cursor.hasNext()) {

  printjson(cursor.next());

}

 

Json Formatt: Newspaper collection

 

[

  {

    "_id": 1,

    "name": "Times of India",

    "language": "English",

    "city": "Mumbai",

    "publisherId": 101,

    "sales": 15000

  },

  {

    "_id": 2,

    "name": "Lokmat",

    "language": "Marathi",

    "city": "Pune",

    "publisherId": 102,

    "sales": 12000

  },

  {

    "_id": 3,

    "name": "Gujarat Samachar",

    "language": "Gujarati",

    "city": "Ahmedabad",

    "publisherId": 103,

    "sales": 8000

  },

  // Add more newspaper documents

]

------------//-----------------------//-------------//------------------------//---------           

Json format : Publisher collection

[

  {

    "_id": 101,

    "name": "Times Group",

    "state": "Maharashtra"

  },

  {

    "_id": 102,

    "name": "Lokmat Group",

    "state": "Maharashtra"

  },

  {

    "_id": 103,

    "name": "Gujarat Print Media",

    "state": "Gujarat"

  },

  // Add more publisher documents

]

-----------------//---------------//-----------------//----------

Json format  : City collection:

[

  {

    "_id": 1,

    "name": "Mumbai"

  },

  {

    "_id": 2,

    "name": "Pune"

  },

  {

    "_id": 3,

    "name": "Ahmedabad"

  },

  // Add more city documents

]

------------------------------------------------------------------------------------------------------------------------------

Q3)

1.Model the following system as a document database. Consider employee and department’s information.

2.Assume appropriate attributes and collections as per the query requirements.  

3.Insert at least 5 documents in each collection.          

4.Answer the following Queries.

                a.Display name of employee who has highest salary

               

Answer: // MongoDB Query

db.Employee.find().sort({ salary: -1 }).limit(1, { name: 1 })

                b.Display biggest department with max. no. of employees

Answer: // MongoDB Query

db.Department.aggregate([

  {

    $project: {

      name: 1,

      numEmployees: { $size: "$employees" }

    }

  },

  {

    $sort: { numEmployees: -1 }

  },

  {

    $limit: 1

  }

])            

                c.Write a cursor which shows department wise employee information    

Answer:

// MongoDB Query

var cursor = db.Department.find();

while (cursor.hasNext()) {

  var department = cursor.next();

  var employees = db.Employee.find({ _id: { $in: department.employees } });

  print("Department: " + department.name);

  while (employees.hasNext()) {

    printjson(employees.next());

  }

  print("\n");

}

                d.List all the employees who work in Sales dept and salary > 50000

 

Answer : // MongoDB Query

db.Employee.find({ departmentId: 103, salary: { $gt: 50000 } })

 

 

Json : Employee collection

 

[

  {

    "_id": 1,

    "name": "John Doe",

    "salary": 60000,

    "departmentId": 101

  },

  {

    "_id": 2,

    "name": "Jane Smith",

    "salary": 70000,

    "departmentId": 102

  },

  {

    "_id": 3,

    "name": "Bob Johnson",

    "salary": 55000,

    "departmentId": 103

  },

  // Add more employee documents

]

--------///------------------////-----------------///---

Json: Department Collection

 

[

  {

    "_id": 101,

    "name": "IT",

    "employees": [1, 4, 5]  // Employee IDs in the IT department

  },

  {

    "_id": 102,

    "name": "Finance",

    "employees": [2, 6]

  },

  {

    "_id": 103,

    "name": "Sales",

    "employees": [3, 7]

  },

  // Add more department documents

]

------------------------------------------------------------------------------------------------------------------------------

Q4)

1.Model the following information system as a document database. Consider hospitals around Nashik. Each hospital may have one or more specializations like Pediatric, Gynaec, Orthopedic, etc. A person can recommend/provide review for a hospital. A doctor can give service to one or more hospitals.

2.Assume appropriate attributes and collections as per the query requirements.                                                                                                  

3.Insert at least 10 documents in each collection.        

4.Answer the following Queries

                a. List the names of hospitals with………… specialization.

Answer: // MongoDB Query

db.Hospital.find({ specializations: "Pediatric" }, { name: 1, _id: 0 })  

 

                b. List the Names  of all hospital located in ……. city   

// MongoDB Query

db.Hospital.find({ city: "Nashik" }, { name: 1, _id: 0 })

 

                c. List the  names  of hospitals where Dr. Deshmukh visits

// MongoDB Query

var hospitalsVisited = db.Doctor.findOne({ name: "Dr. Deshmukh" }).hospitalsVisited;

db.Hospital.find({ _id: { $in: hospitalsVisited } }, { name: 1, _id: 0 })

 

                d. List the names of hospitals whose rating >=4

// MongoDB Query

db.Hospital.find({ rating: { $gte: 4 } }, { name: 1, _id: 0 })

 

 

Json format : Hospital collection

 

[

  {

    "_id": 1,

    "name": "City Hospital",

    "city": "Nashik",

    "specializations": ["Pediatric", "Orthopedic"],

    "rating": 4.5

  },

  {

    "_id": 2,

    "name": "Grace Maternity",

    "city": "Nashik",

    "specializations": ["Gynaec", "Pediatric"],

    "rating": 3.8

  },

  // Add more hospital documents

]

-------------------------//-----///-

Json Format : person review collection

[

  {

    "_id": 1,

    "personName": "John Doe",

    "hospitalId": 1,

    "review": "Great service, highly recommended.",

    "rating": 5

  },

  {

    "_id": 2,

    "personName": "Jane Smith",

    "hospitalId": 2,

    "review": "Average experience, room for improvement.",

    "rating": 3

  },

  // Add more person review documents

]

 

Json format : Doctor collection

[

  {

    "_id": 1,

    "name": "Dr. Deshmukh",

    "hospitalsVisited": [1, 3]

  },

  {

    "_id": 2,

    "name": "Dr. Patel",

    "hospitalsVisited": [2, 3]

  },

  // Add more doctor documents

]

 

 

------------------------------------------------------------------------------------------------------------------------------

Q5)

1.Model the following database. Many employees working on one project. A company has various ongoing projects.

2.Assume appropriate attributes and collections as per the query requirements.                                                                                                  

3.Insert at least 5 documents in each collection.          

4.Answer the following Queries

a. List all names of projects where Project_type =…..  

Answer : // MongoDB Query

db.Project.find({ projectType: "Web Development" }, { name: 1, _id: 0 })

 

b. List all the projects with duration greater than 3 months

Answer: // MongoDB Query

db.Project.find({ durationMonths: { $gt: 3 } }, { name: 1, _id: 0 })

               

c. Count no. of employees working on ……..project    

Answer: // MongoDB Query

db.Project.findOne({ name: "Project A" }).employees.length

 

d. List the names of projects on which Mr. Patil is working

Answer: // MongoDB Query

db.Employee.findOne({ name: "Mr. Patil" }).projects.map(projectId => db.Project.findOne({ _id: projectId }).name)

 

 

Json format : project collection

[

  {

    "_id": 1,

    "name": "Project A",

    "projectType": "Web Development",

    "durationMonths": 5,

    "employees": [101, 102, 103]

  },

  {

    "_id": 2,

    "name": "Project B",

    "projectType": "Mobile App Development",

    "durationMonths": 2,

    "employees": [104, 105]

  },

  // Add more project documents

]

 

----------------------------//-----//-------//---

Json format : Employee collection

 

[

  {

    "_id": 101,

    "name": "Mr. Patil",

    "projects": [1, 3]

  },

  {

    "_id": 102,

    "name": "Mrs. Deshmukh",

    "projects": [1, 2]

  },

  // Add more employee documents

]

 

 

-----------------------------------------------------------------------------------------------------------------------

Q6)

1.Model the following information as a document database.

A customer can take different policies and get the benefit. There are different types of policies provided by various companies

2.Assume appropriate attributes and collections as per the query requirements.  

3.Insert at least 5 documents in each collection.

4.Answer the following Queries.

a. List the details of customers who have taken “Komal Jeevan” Policy

Answer : // MongoDB Query

db.Customer.find({ "policies.policyType": "Komal Jeevan" })

 

b. Display average premium amount

Answer: // MongoDB Query

db.Customer.aggregate([

  {

    $unwind: "$policies"

  },

  {

    $group: {

      _id: null,

      averagePremium: { $avg: "$policies.premiumAmount" }

    }

  }

])

               

c. Increase the premium amount by 5% for policy type=”Monthly”

Answer: // MongoDB Query

db.Customer.updateMany({ "policies.policyType": "Monthly" }, { $mul: { "policies.$.premiumAmount": 1.05 } })

 

d. Count no. of customers who have taken policy type “half yearly”.

Answer: // MongoDB Query

db.Customer.count({ "policies.policyType": "Half Yearly" })

 

 

 

Json format : customer collection

[

  {

    "_id": 1,

    "name": "John Doe",

    "policies": [

      {

        "policyType": "Komal Jeevan",

        "premiumAmount": 5000

      },

      {

        "policyType": "Life Protector",

        "premiumAmount": 7000

      }

    ]

  },

  {

    "_id": 2,

    "name": "Jane Smith",

    "policies": [

      {

        "policyType": "Komal Jeevan",

        "premiumAmount": 4500

      },

      {

        "policyType": "Health Guard",

        "premiumAmount": 8000

      }

    ]

  },

  // Add more customer documents

]              

 

Json format : policy collection

 

[

  {

    "_id": 1,

    "policyType": "Komal Jeevan",

    "company": "ABC Insurance"

  },

  {

    "_id": 2,

    "policyType": "Life Protector",

    "company": "XYZ Insurance"

  },

  // Add more policy documents

]

 

--------------------------------------------------------------------------------------------------------------------

 

Q7)

1.Model the following information as a document database.

A customer operates his bank account, does various transactions and get the banking services

2.Assume appropriate attributes and collections as      per          the          query requirements.                                                                                                                           

3.Insert at least 5 documents in each collection.

4.Answer the following Queries.

a. List names of all customers whose first name starts with a “S”

Answer : // MongoDB Query

db.Customer.find({ "firstName": /^S/i })     

 

b. List all customers who has open an account on 1/1/2020 in   branch

Answer: // MongoDB Query

db.Customer.find({ "account.openDate": ISODate("2020-01-01T00:00:00Z"), "account.branch": "Main Street" })

 

c. List the names customers where acctype=”Saving”

Answer: // MongoDB Query

db.Customer.find({ "account.accountType": "Saving" })

 

d. Count total no. of loan account holder of …….branch

Answer: // MongoDB Query

db.Customer.count({ "account.accountType": "Loan", "account.branch": "Main Street" })

 

Json format : customer collection

[

  {

    "_id": 1,

    "firstName": "John",

    "lastName": "Doe",

    "account": {

      "accountType": "Saving",

      "branch": "Main Street",

      "openDate": ISODate("2020-01-01T00:00:00Z"),

      "transactions": [

        {"type": "Deposit", "amount": 1000},

        {"type": "Withdrawal", "amount": 500}

      ]

    }

  },

  {

    "_id": 2,

    "firstName": "Sara",

    "lastName": "Smith",

    "account": {

      "accountType": "Current",

      "branch": "City Center",

      "openDate": ISODate("2020-01-01T00:00:00Z"),

      "transactions": [

        {"type": "Deposit", "amount": 2000},

        {"type": "Transfer", "amount": 1000}

      ]

    }

  },

  // Add more customer documents

]              

--------------------------------------------------------------------------------------------------------------------

Q8)

1.Model the following inventory information as a document database.

The inventory keeps track of various items. The items are tagged in various categories. Items may be kept in various warehouses and each warehouse keeps track of the quantity of the item.

2.Assume appropriate attributes and collections           as per the query requirements         

3.Insert at least 5 documents in each collection.

4.Answer the following Queries.

a. List all the items qty is greater than 300     

Ansswer : // MongoDB Query

db.Warehouse.find({ "inventory.quantity": { $gt: 300 } })

 

b. List all items which have tags less than 5  

Answer: // MongoDB Query

db.Item.find({ "tags": { $size: { $lt: 5 } } })

 

c .List all items having status equal to “B” or having quantity less than 50  and height of the product should be greater than 8               

Answer: // MongoDB Query

db.Item.find({

  $or: [

    { "status": "B" },

    { $and: [

        { "inventory.quantity": { $lt: 50 } },

        { "height": { $gt: 8 } }

      ]

    }

  ]

})

d. Find  all  warehouse  that  keeps  item “Planner” and having in stock quantity less than 20

Answer: // MongoDB Query

db.Warehouse.find({ "inventory": { $elemMatch: { "itemId": 2, "quantity": { $lt: 20 } } } })

 

Json format : Item collection

 

[

  {

    "_id": 1,

    "itemName": "Laptop",

    "tags": ["Electronics", "Gadgets"],

    "status": "A",

    "height": 10

  },

  {

    "_id": 2,

    "itemName": "Planner",

    "tags": ["Stationery", "Office Supplies"],

    "status": "B",

    "height": 6

  },

  // Add more item documents

]

 

Json format : warehouse collection

 

[

  {

    "_id": 1,

    "warehouseName": "Main Warehouse",

    "inventory": [

      { "itemId": 1, "quantity": 400 },

      { "itemId": 2, "quantity": 15 }

    ]

  },

  {

    "_id": 2,

    "warehouseName": "Secondary Warehouse",

    "inventory": [

      { "itemId": 2, "quantity": 25 }

    ]

  },

  // Add more warehouse documents

]

 

--------------------------------------------------------------------------------------------------------------------

Q9)

1.Model the following Customer Loan information as a document database. Consider Customer Loan information system where the customer can take many types of loans.

2.Assume appropriate attributes and collections as per the query requirements   

3.Insert at least 10 documents in each collection.

4.Answer the following Queries.

a.List all customers whose name starts with 'D' character

Answer: // MongoDB Query

db.Customer.find({ "name": /^D/i })

b.List the names of customer in descending order who has taken a loan from Pimpri city.

Answer: // MongoDB Query

db.Customer.find({ "address": /Pimpri/i }).sort({ "name": -1 })

c.Display customer details having maximum loan amount.

Answer: // MongoDB Query

db.Customer.aggregate([

  { $unwind: "$loans" },

  { $sort: { "loans.loanAmount": -1 } },

  { $limit: 1 }

])

 

d.Update the address of customer whose name is “Mr. Patil” and loan_amt is greater than 100000.

Answer: // MongoDB Query

db.Customer.updateMany(

  { "name": "Mr. Patil", "loans.loanAmount": { $gt: 100000 } },

  { $set: { "address": "New Address" } }

)

               

Json format : customer collection

[

  {

    "_id": 1,

    "name": "John Doe",

    "address": "123 Main Street",

    "loans": [

      {"loanType": "Home Loan", "loanAmount": 150000},

      {"loanType": "Car Loan", "loanAmount": 80000}

    ]

  },

  {

    "_id": 2,

    "name": "Jane Smith",

    "address": "456 Oak Avenue",

    "loans": [

      {"loanType": "Personal Loan", "loanAmount": 50000},

      {"loanType": "Home Loan", "loanAmount": 120000}

    ]

  },

  // Add more customer documents

]

 

 

--------------------------------------------------------------------------------------------------------------------

Q10)

1.Model the following Online shopping information as a document database. Consider online shopping where the customer can get different products from different brands. Customers can rate the brands and products

2.Assume appropriate attributes and collections as per the query requirements [3]

3.Insert at least 5 documents in each collection. [3]

4.Answer the following Queries.

a. List the names of product whose warranty period is one year  [3 ]

Answer: // MongoDB Query

db.Product.find({ "warrantyPeriod": "1 year" }, { "name": 1, "_id": 0 })

 

b. List the customers has done purchase on “15/08/2023”.          [3 ]

Answer: // MongoDB Query

db.Customer.find({ "purchases.date": ISODate("2023-08-15T00:00:00Z") })

 

c. Display the names of products with brand which have highest rating. [4]

Answer: // MongoDB Query

var highestRatedBrand = db.Product.find().sort({ "ratings": -1 }).limit(1).next().brand;

db.Product.find({ "brand": highestRatedBrand }, { "name": 1, "brand": 1, "_id": 0 })

 

d. Display customers who stay in …… city and billamt >50000 .[4]

Answer: // MongoDB Query

db.Customer.find({ "city": "New York", "purchases.billAmount": { $gt: 50000 } })

 

 

Json format : production collection

[

  {

    "_id": 1,

    "name": "Smartphone",

    "brand": "Samsung",

    "warrantyPeriod": "1 year",

    "ratings": 4.2

  },

  {

    "_id": 2,

    "name": "Laptop",

    "brand": "Dell",

    "warrantyPeriod": "2 years",

    "ratings": 4.5

  },

  // Add more product documents

]

Json format : customer collection

[

  {

    "_id": 1,

    "name": "John Doe",

    "city": "New York",

    "purchases": [

      {"date": ISODate("2023-08-15T00:00:00Z"), "billAmount": 60000}

    ]

  },

  {

    "_id": 2,

    "name": "Jane Smith",

    "city": "Los Angeles",

    "purchases": [

      {"date": ISODate("2023-08-15T00:00:00Z"), "billAmount": 75000}

    ]

  },

  // Add more customer documents

]

--------------------------------------------------------------------------------------------------------------------

Q11)

1.Model the following sales system as a document database. Consider a set of products, customers, orders and invoices. An invoice is generated when an order is processed.

2.Assume appropriate attributes and collections as per the query requirements.[3]

3.Insert at least 5 documents in each collection.

4.Answer the following Queries.

a.List all products in the inventory.

Answer: // MongoDB Query

db.Product.find({})

b.List the details of orders with a value >20000.

Answer: // MongoDB Query

db.Order.find({ "orderValue": { $gt: 20000 } })

c.List all the orders which has not been processed (invoice not generated)

Answer: // MongoDB Query

db.Order.find({ "processed": false })

d.List all the orders along with their invoice for “Mr. Rajiv”.

Answer: // MongoDB Query

 

 

Json format : product collection

[

  {

    "_id": 1,

    "name": "Laptop",

    "price": 800,

    "quantityInStock": 10

  },

  {

    "_id": 2,

    "name": "Smartphone",

    "price": 500,

    "quantityInStock": 20

  },

  // Add more product documents

]

 

Json format : customer collection

 

[

  {

    "_id": 1,

    "name": "Mr. Rajiv",

    "email": "rajiv@example.com"

  },

  {

    "_id": 2,

    "name": "Ms. Priya",

    "email": "priya@example.com"

  },

  // Add more customer documents

]

Json format : Order collection

[

  {

    "_id": 1,

    "customer": 1,

    "products": [

      {"productId": 1, "quantity": 2},

      {"productId": 2, "quantity": 1}

    ],

    "orderValue": 2100,

    "processed": true

  },

  {

    "_id": 2,

    "customer": 2,

    "products": [

      {"productId": 2, "quantity": 3}

    ],

    "orderValue": 1500,

    "processed": false

  },

  // Add more order documents

]

Json format : invoice collection

[

  {

    "_id": 1,

    "order": 1,

    "amountPaid": 2100,

    "paymentDate": ISODate("2023-01-10T00:00:00Z")

  },

  // Add more invoice documents

]

--------------------------------------------------------------------------------------------------------------------

Q12)

1.Model the following online movie information as a document database. Consider online movie information where the each actor has acted in one or more movie. Each producer has produced many movies but each movie can be produced by more than one producers. Each movie has one or more actors actin in it, in different roles.

2.Assume appropriate attributes and collections as per the query requirements

3.Insert at least 05 documents in each collection.

4.Answer the following Queries.

a. List the names of movies with the highest budget.

Answer: db.movies.find().sort({ "budget": -1 }).limit(1).project({ "_id": 0, "title": 1 })

 

b. Display the details of producer who have produced more than one movie in a year.        

Answer: db.producers.aggregate([

  {

    $unwind: "$moviesProduced"

  },

  {

    $group: {

      _id: { name: "$name", year: "$moviesProduced.year" },

      count: { $sum: 1 }

    }

  },

  {

    $match: { count: { $gt: 1 } }

  }

])

c. List the names of actors who have acted in at least one movie, in which ‘Akshay’ has acted.

Answer: const akshayMovies = db.actors.find({ name: "Akshay" }).toArray()[0].moviesActed.map(movie => movie.title);

db.actors.find({ moviesActed: { $elemMatch: { title: { $in: akshayMovies } } } }, { "_id": 0, "name": 1 })

d. List the names of movies, produced by more than one produce.

db.movies.aggregate([

  {

    $unwind: "$producers"

  },

  {

    $group: {

      _id: "$title",

      producerCount: { $sum: 1 }

    }

  },

  {

    $match: { producerCount: { $gt: 1 } }

  },

  {

    $project: { "_id": 0, "title": "$_id" }

  }

])

 

 

Json format  : movie collection

// Movies Collection

[

  {

    "_id": 1,

    "title": "Inception",

    "budget": 160000000,

    "actors": [

      {"name": "Leonardo DiCaprio", "role": "Cobb"},

      {"name": "Joseph Gordon-Levitt", "role": "Arthur"},

      {"name": "Ellen Page", "role": "Ariadne"}

    ],

    "producers": [

      {"name": "Christopher Nolan", "year": 2010}

    ]

  },

  {

    "_id": 2,

    "title": "The Dark Knight",

    "budget": 185000000,

    "actors": [

      {"name": "Christian Bale", "role": "Bruce Wayne/Batman"},

      {"name": "Heath Ledger", "role": "Joker"}

    ],

    "producers": [

      {"name": "Christopher Nolan", "year": 2008},

      {"name": "Emma Thomas", "year": 2008}

    ]

  },

  // Add more movie documents

 

]

 

// Producers Collection

[

  {

    "_id": 1,

    "name": "Christopher Nolan",

    "moviesProduced": [

      {"title": "Inception", "year": 2010},

      {"title": "The Dark Knight", "year": 2008}

    ]

  },

  {

    "_id": 2,

    "name": "Emma Thomas",

    "moviesProduced": [

      {"title": "The Dark Knight", "year": 2008}

    ]

  },

  // Add more producer documents

 

]

 

// Actors Collection

[

  {

    "_id": 1,

    "name": "Leonardo DiCaprio",

    "moviesActed": [

      {"title": "Inception", "role": "Cobb"}

    ]

  },

  {

    "_id": 2,

    "name": "Joseph Gordon-Levitt",

    "moviesActed": [

      {"title": "Inception", "role": "Arthur"}

    ]

  },

  {

    "_id": 3,

    "name": "Christian Bale",

    "moviesActed": [

      {"title": "The Dark Knight", "role": "Bruce Wayne/Batman"}

    ]

  },

  // Add more actor documents

 

]

 

--------------------------------------------------------------------------------------------------------------------

 

Q13)

1.Model the following Student Competition information as a document database. Consider Student competition information where the student can participate in many competitions.

2.Assume appropriate attributes and collections as per the query requirements   

3.Insert at least 10 documents in each collection.        

4.Answer the following Queries.

a.Display average no. of students participating in each competition.

Answer: db.competitions.aggregate([

  {

    $project: {

      _id: 1,

      name: 1,

      averageParticipants: { $avg: "$averageParticipants" }

    }

  }

])

b.Find the number of student for programming competition.

Answer: db.competitions.findOne({ name: "Programming" }, { _id: 0, averageParticipants: 1 })

 

c.Display the names of first three winners of each competition.

Answer: db.competitions.aggregate([

  {

    $project: {

      _id: 0,

      name: 1,

      winners: { $slice: ["$winners", 3] }

    }

  }

])

d.Display students from class 'FY’ and participated in 'E-Rangoli ' Competition.    

Answer: db.students.find({ class: "FY", "participations.competition": "E-Rangoli" }, { _id: 0, name: 1 })

 

 

Json format : student collection

// Students Collection

[

  {

    "_id": 1,

    "name": "John Doe",

    "class": "FY",

    "participations": [

      {"competition": "Programming", "position": 2},

      {"competition": "E-Rangoli", "position": 1}

    ]

  },

  {

    "_id": 2,

    "name": "Jane Smith",

    "class": "SY",

    "participations": [

      {"competition": "Math Olympiad", "position": 3},

      {"competition": "E-Rangoli", "position": 2}

    ]

  },

  // Add more student documents

]

 

// Competitions Collection

[

  {

    "_id": 1,

    "name": "Programming",

    "averageParticipants": 15,

    "winners": [

      {"position": 1, "studentId": 3},

      {"position": 2, "studentId": 1},

      {"position": 3, "studentId": 5}

    ]

  },

  {

    "_id": 2,

    "name": "E-Rangoli",

    "averageParticipants": 20,

    "winners": [

      {"position": 1, "studentId": 6},

      {"position": 2, "studentId": 2},

      {"position": 3, "studentId": 4}

    ]

  },

  // Add more competition documents

]

--------------------------------------------------------------------------------------------------------------------

Q14

Model the following system as a graph model, and answer the queries using Cypher.

Government provides various scholarships for students. A students apply for scholarship. Student can get benefits of more than one scholarship if satisfies the criteria. Student can recommend it for his friends or other family members

 

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the following Queries in Cypher:

a.List the names of scholarship for OBC category.

b.Count no. of students who are benefited by scholarship in year 2020-2021

c.Update the income limit for scholarship.

d.List the most popular scholarship.

--------------------------------------------------------------------------------------------------------------------

Q15)

Model the following movie system as a Graph database.

Consider a information about of movie and actors. One movie can have more than one actor

 

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the Queries:

a. Find movie which made highest business.

b. Display details of movie along with actors.

c. List all the movie of “Shahrukh Khan”.        

d. Display all movie having more than 2 awards received

--------------------------------------------------------------------------------------------------------------------

Q16)

Model the following food service industry information as a graph model, and answer the following queries using Cypher.

Consider food service industries like ZOMATO, Swiggy around us. Popular restaurants are connected to these industries to increase sell. A person order food through this industry and get offers. A person give rate(1-5 stars) to company its facility/facilities. and can recommend this to his/her friends.

 

4.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

5.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

6.Answer the Queries.

a.Count no. of customers who place order on “1/1/2023”

b.List the names of customers whose name starts with S and place order using Swiggy

c.List the names of hotels with high rating (>=4).

d.List the most recommended hotels in……. area.

--------------------------------------------------------------------------------------------------------------------

Q17)      

Model the following Books and Publisher information as a graph model, and answer the following queries using Cypher.

Author wrote various types of books which is published by publishers. A reader reads a books according to his linking and can recommend/provide review for it.

 

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the Queries

a. List the names of authors who wrote “Comics”.        

b. Count no. of readers of   book published by “Sage”.

c. List all the publisher whose name starts with “N” [4]

d. List the names of people who have given a rating of (>=3) for book     

--------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

Q18)

Model the following Doctor’s information system as a graph model, and answer the following queries using Cypher.

Consider the doctors in and around Pune. Each Doctor is specialized in some stream like Pediatric, Gynaec, Heart Specialist, Cancer Specialist, ENT, etc. A doctor may be a visiting doctor across many hospitals or he may own a clinic. A person can provide a review/can recommend a doctor.

 

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the Queries

a. List the Orthopedic doctors in ……. Area.

b .List the doctors who has specialization in  

c. List the most recommended Pediatrics in Seren Medows.

d. List all the who visits more than 2 hospitals

--------------------------------------------------------------------------------------------------------------------

Q19)

Model the following Laptop manufacturing information system as a graph model, and answer the following queries using Cypher.

Consider an Laptop manufacturing industries which produces different types of laptops. A customer can buy a laptop, recommend or rate a the product.

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the Queries

a. List the characteristics of               laptop.

b. List the name of customers who bought a “DELL” company laptop

c. List the customers who purchase a device on “26/01/2023”

d. List the most recommended device.

--------------------------------------------------------------------------------------------------------------------

Q20)

Model the following nursery management information as a graph model, and answer the following queries using Cypher.

Nursery content various types of plants, fertilizers and required products. Customer visit the nursery or use an app , purchase the plants and necessary products also rate and recommend the app

 

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the following queries using Cypher:

a.List the types of plants from your graph model

b.List the popular flowering plants.

c.List the names of plants sold plant where qty>500 in last 2 days

d.List the names of suppliers in decreasing order who supplies “Creepers”.

--------------------------------------------------------------------------------------------------------------------

Q21)

Model the following Medical information as a graph model, and answer the following queries using Cypher.

There are various brands of medicine like Dr. Reddy, Cipla, SunPharma etc. Their uses vary across different states in India. The uses of medicine is measured as %, with a high use defined as >=90%, Medium Use between 50 to 90%, and Low Use<50%. Each medicine manufactures various types of medicine products like Tablet, Syrup, and Powder etc.

 

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the following queries using Cypher:

a. List the names of different medicines considered in your graph

b .List the medicine that are highly Used in Rajasthan.

c. List the highly used tablet in Gujarat.

d. List the medicine names manufacturing “Powder”   

--------------------------------------------------------------------------------------------------------------------

Q22)

Model the following Car Showroom information as a graph model,and answer the queries using Cypher. Consider a car showroom with different models of cars like sofas Honda city, Skoda, Creta, Swift, Ertiga etc. Showroom is divided into different sections, onesection for each car model; each section is handled by a sales staff. A sales staff can handle one or more sections.

Customer may enquire about car. An enquiry may result in a purchase by the customer.

 

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.           

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the following queries:

a. List the types of cars available in the showroom.     

b. List the sections handled by Mr. Narayan. 

c. List the names of customers who have done only enquiry but not made any purchase.

d. List the highly sale car model.

--------------------------------------------------------------------------------------------------------------------

 

 

Q23)

Model the following Automobile information system as a graph model,and answer the following queries using Cypher.

Consider an Automobile industry manufacturing different types of vehicles like Two- Wheeler, Four-Wheeler, etc. A customer can buy one or more types of vehicle. A person can recommend or rate a vehicle type.

 

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the following Queries:

a. List the characteristics of four wheeler types.

b. List the name of customers who bought a two wheeler vehicle.

c. List the customers who bought more than one type of vehicle.

d. List the most recommended vehicle type.

--------------------------------------------------------------------------------------------------------------------

Q24)

Model the following Library information system as a graph model,and answer the following queries using Cypher.

Consider a library information system having different types of books like text, reference, bibliography etc. A student can buy one or more types of book. A student can recommend or rate a book according to its type.

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the following Queries :

a. List the books of type “text”

b. List the name of student who bought a text and reference types books.

c. List the most recommended book type.

d. List the student who buy the more than one type of book.

--------------------------------------------------------------------------------------------------------------------

Q25)

Model the following University information system as a graph model, and answer the following queries using Cypher.

University has various departments like Physics, Geography, Computer etc. Each department conducts various courses and a course may be conducted by multiple departments. Every course may have recommendations provided by people.

 

1.Identify the labels and relationships, along with their properties, and draw a high-level Graph model.

2.Create nodes and relationships, along with their properties, and visualize your actual Graph model.

3.Answer the following Queries :

a. List the details of all the departments in the university.

b. List  the  names of the  courses provided  by Physics department.

c.List the most recommended course in Geography department.

d.List the names of common courses across Mathematics and computer department.

 

=====================================================================================================

 









s











s

















s

















s









































s


















s


Comments

Popular posts from this blog

Practical slips programs : Machine Learning

Full Stack Developement Practical Slips Programs

Android App Developement Practicals Programs