Monday, February 26, 2024

Using table create a batchwise schedule using HTML and CSS. BCS053.

 

BCS053

Web Programming

IGNOU Assignment

Q1) Using tables, create a webpage displaying the batchwise schedule of the counselling sessions of the courses at Study Centre. This table should have proper headings. The columns of the table should display the batch number, course code, session time and the name of the counsellor taking the session. Create a second page using an ordered list showing the batch wise list of student’s enrolment number and names. You should use <div> tags, wherever needed; and create an internal CSS file, which formats the web pages as given below   The headings of the table must be in 14-point Bold and all other content should be in 12-point Arial font. The table heading should be in different shade. The data rows of the table should have alternatively light yellow and light green colour. The background of the table should be light pink.  The font of the unordered list should be "Arial" with font size of 12 points. The background colour of list should be light blue.

    Solutions :  First page with batchwise schedule of counsellers.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Batchwise Schedule</title>
    <style>
      /*internal CSS*/
      body {
        font-family: Arial, sans-serif;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        background-color: lightpink;
      }
      th {
        background-color: #ffc0cb; /* Light Pink */
        font-size: 14px;
        font-weight: bold;
      }
      th,
      td {
        padding: 10px;
        text-align: left;
        font-size: 12px;
      }
      .light-yellow {
        background-color: #ffffe0; /* Light Yellow */
      }
      .light-green {
        background-color: #90ee90; /* Light Green */
      }
      h1{
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Batchwise Schedule</h1>
      <table>
        <thead>
          <tr>
            <th>Batch Number</th>
            <th>Course Code</th>
            <th>Session Time</th>
            <th>Counsellor</th>
          </tr>
        </thead>
        <tbody>
          <tr class="light-yellow">
            <td>1</td>
            <td>CSE101</td>
            <td>10:00 AM</td>
            <td>Sir Chandrshekhar</td>
          </tr>
          <tr class="light-green">
            <td>2</td>
            <td>BCS202</td>
            <td>11:30 AM</td>
            <td>Sir Mahesh</td>
          </tr>
          <tr class="light-yellow">
            <td>3</td>
            <td>MCS104</td>
            <td>12:30 PM</td>
            <td>Sir Ravi</td>
          </tr>
          <tr class="light-green">
            <td>4</td>
            <td>CS204</td>
            <td>01:30 PM</td>
            <td>Sir Jagdish</td>
          </tr>
          <!-- Add more rows as needed -->
        </tbody>
      </table>
    </div>
  </body>
</html>
    Output:
    




        Second page with student name and enrollment number
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Batchwise Enrolment</title>
    <style>
      ol {
  background-color: lightblue;
  padding: 10px;
  list-style-type: none;
}
ol li {
  font-size: 12px;
}
h1{
  color: brown;
}
    </style>
</head>
<body>
    <div class="container">
        <h1>Batchwise Enrolment</h1>
        <ol>
            <li>101 - Satish</li>
            <li>102 - Ram</li>
            <li>103 - Sita</li>
            <li>104 - Sridhar</li>
            <!-- Add more list items as needed -->
        </ol>
    </div>
</body>
</html>

        Output:


on No comments:

Saturday, February 24, 2024

Create an online feedback form for a University using HTML, CSS and validate using Javascript. BCS053.

  Ignou Assignment BCS-053

Web Programming

1) Create an online feedback form for a University using HTML.  The form should ask for the following information:

  •  The StudentID of the Programme on which feedback is being given. 
  •  Programme code of the Programme Passed (Use a drop-down list for Programme code selection.)
  •  Name of the Student 
  •  Year of admission and year of passing the programme 
  •  Have you taken admission to another programme? Yes/No 
  •  Text area for giving the feedback

2) Create an external CSS file for this form. This CSS file should select the font size of 12 point bold for all the labels; font colour should be dark blue for the headings and green for normal text. The background colour of the form should be light yellow. 

3)   Write the code using JavaScript that validates if all the fields of the form are filled


Solution :    Step 1:  First create a folder like BCS53
                   Step 2:  Create 2 files in it like bcs53.html and styles.css
                   Step 3:  Add link of the styles.css file in HTML file bcs53.html
                   Step 4:  Write the following code in bcs53.html
                   Step 5: Write javascript code inside <script></script> tag in the head or 
                                at the end of the body

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Feedback Form</title>
<link rel="stylesheet" href="styles.css">

<script>
  function validateForm() {
    var studentID = document.getElementById("studentID").value;
    var programmeCode = document.getElementById("programmeCode").value;
    var studentName = document.getElementById("studentName").value;
    var yearAdmission = document.getElementById("yearAdmission").value;
    var yearPassing = document.getElementById("yearPassing").value;
    var admissionAnotherProgramme = document.querySelector('input[name="admissionAnotherProgramme"]:checked');
    var feedback = document.getElementById("feedback").value;

    if (studentID == "" || programmeCode == "" || studentName == ""
    || yearAdmission == "" || yearPassing == "" || !admissionAnotherProgramme
     || feedback == "") {
      alert("Please fill in all fields.");
      return false;
    }
    return true;
  }
</script>

</head>
<body>
<h2>University Feedback Form</h2>
<form action="#" method="POST" onsubmit="return validateForm()">
  <label for="studentID">Student ID:</label><br>
  <input type="text" id="studentID" name="studentID" ><br><br>
 
  <label for="programmeCode">Programme Code:</label><br>
  <select id="programmeCode" name="programmeCode">
    <option value="">Select Programme Code</option>
    <option value="001">Programme 1</option>
    <option value="002">Programme 2</option>
    <option value="003">Programme 3</option>
    <!-- Add more options as needed -->
  </select><br><br>
 
  <label for="studentName">Name:</label><br>
  <input type="text" id="studentName" name="studentName"><br><br>
 
  <label for="yearAdmission">Year of Admission:</label><br>
  <input type="text" id="yearAdmission" name="yearAdmission" ><br><br>
 
  <label for="yearPassing">Year of Passing:</label><br>
  <input type="text" id="yearPassing" name="yearPassing" ><br><br>
 
  <label for="admissionAnotherProgramme">Have you taken admission to another programme?</label><br>
  <input type="radio" id="yes" name="admissionAnotherProgramme" value="yes">
  <label for="yes">Yes</label><br>
  <input type="radio" id="no" name="admissionAnotherProgramme" value="no">
  <label for="no">No</label><br><br>
 
  <label for="feedback">Feedback:</label><br>
  <textarea id="feedback" name="feedback" rows="4" cols="50" ></textarea><br><br>
 
  <input type="submit" value="Submit">
</form>
</body>
</html>

                    Step 6: Write the following code in styles.css file.

body {
  font-family: Arial, sans-serif;
  background: lightyellow;
}

h2 {
  color: darkblue;
}

label {
  font-size: 12pt;
  font-weight: bold;
  color: green;
}

form {
  background-color: lightyellow;
}

Output

        



Output is displaying alert if you submit without filling the form

on No comments:
Labels: ,

Create an online feedback form for a University using HTML and CSS. Ignou Assignment BCS-053

 Ignou Assignment BCS-053

Web Programming

1) Create an online feedback form for a University using HTML.  The form should ask for the following information:

  •  The StudentID of the Programme on which feedback is being given. 
  •  Programme code of the Programme Passed (Use a drop-down list for Programme code selection.)
  •  Name of the Student 
  •  Year of admission and year of passing the programme 
  •  Have you taken admission to another programme? Yes/No 
  •  Text area for giving the feedback

2) ) Create an external CSS file for this form. This CSS file should select the font size of 12 point bold for all the labels; font colour should be dark blue for the headings and green for normal text. The background colour of the form should be light yellow. 


Solution :    Step 1:  First create a folder like BCS53
                   Step 2:  Create 2 files in it like bcs53.html and styles.css
                   Step 3:  Add link of the styles.css file in HTML file bcs53.html
                   Step 4:  Write the following code in bcs53.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Feedback Form</title>
<link rel="stylesheet" href="styles.css">

</head>
<body>
<h2>University Feedback Form</h2>
<form action="#" method="POST">
  <label for="studentID">Student ID:</label><br>
  <input type="text" id="studentID" name="studentID" required><br><br>
 
  <label for="programmeCode">Programme Code:</label><br>
  <select id="programmeCode" name="programmeCode" required>
    <option value="">Select Programme Code</option>
    <option value="001">Programme 1</option>
    <option value="002">Programme 2</option>
    <option value="003">Programme 3</option>
    <!-- Add more options as needed -->
  </select><br><br>
 
  <label for="studentName">Name:</label><br>
  <input type="text" id="studentName" name="studentName" required><br><br>
 
  <label for="yearAdmission">Year of Admission:</label><br>
  <input type="text" id="yearAdmission" name="yearAdmission" required><br><br>
 
  <label for="yearPassing">Year of Passing:</label><br>
  <input type="text" id="yearPassing" name="yearPassing" required><br><br>
 
  <label for="admissionAnotherProgramme">Have you taken admission to another programme?</label><br>
  <input type="radio" id="yes" name="admissionAnotherProgramme" value="yes">
  <label for="yes">Yes</label><br>
  <input type="radio" id="no" name="admissionAnotherProgramme" value="no">
  <label for="no">No</label><br><br>
 
  <label for="feedback">Feedback:</label><br>
  <textarea id="feedback" name="feedback" rows="4" cols="50" required></textarea><br><br>
 
  <input type="submit" value="Submit">
</form>
</body>
</html>

        

        Step 5: Write the following code in styles.css file



body {
  font-family: Arial, sans-serif;
  background: lightyellow;
}

h2 {
  color: darkblue;
}

label {
  font-size: 12pt;
  font-weight: bold;
  color: green;
}

form {
  background-color: lightyellow;
}


Output:

                

on No comments:

Create an online feedback form for a University using HTML. The form should ask for the following information: * The StudentID of the Programme on which feedback is being given. * Programme code of the Programme Passed (Use a drop-down list for Programme code selection.) * Name of the Student * Year of admission and year of passing the programme * Have you taken admission to another programme? Yes/No * Text area for giving the feedback


Ignou Assignment

BCS-053

Create an online feedback form for a University using HTML. The form should ask for the following information: 

  •  The StudentID of the Programme on which feedback is being given. 
  •  Programme code of the Programme Passed (Use a drop-down list for  Programme code selection.) 
  • Name of the Student 
  • Year of admission and year of passing the programme 
  •  Have you taken admission to another programme? Yes/No
  •  Text area for giving the feedback 


Solution :  First create a folder like BCS053

                In that create 2 files like bcs.html and styles.css

                Enter following code in bcs.html file


  <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Feedback Form</title>


</head>
<body>
<h2>University Feedback Form</h2>
<form action="#" method="POST">
  <label for="studentID">Student ID:</label><br>
  <input type="text" id="studentID" name="studentID" required><br><br>
 
  <label for="programmeCode">Programme Code:</label><br>
  <select id="programmeCode" name="programmeCode" required>
    <option value="">Select Programme Code</option>
    <option value="001">Programme 1</option>
    <option value="002">Programme 2</option>
    <option value="003">Programme 3</option>
    <!-- Add more options as needed -->
  </select><br><br>
 
  <label for="studentName">Name:</label><br>
  <input type="text" id="studentName" name="studentName" required><br><br>
 
  <label for="yearAdmission">Year of Admission:</label><br>
  <input type="text" id="yearAdmission" name="yearAdmission" required><br><br>
 
  <label for="yearPassing">Year of Passing:</label><br>
  <input type="text" id="yearPassing" name="yearPassing" required><br><br>
 
  <label for="admissionAnotherProgramme">Have you taken admission to another programme?</label><br>
  <input type="radio" id="yes" name="admissionAnotherProgramme" value="yes">
  <label for="yes">Yes</label><br>
  <input type="radio" id="no" name="admissionAnotherProgramme" value="no">
  <label for="no">No</label><br><br>
 
  <label for="feedback">Feedback:</label><br>
  <textarea id="feedback" name="feedback" rows="4" cols="50" required></textarea><br><br>
 
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output:









on No comments:

Friday, February 23, 2024

Write short notes on Entity Relationship Diagram. BCS051/Assignment

 Ignou Assignment BCS051

Write short notes on Entity Relationship Diagram.

Entity Relationship Diagram (ERD) is a visual representation of underlying data model in the database. It depicts various entities along with its attributes and relationships with other entities and helps visualize the structure of database objects.

Elements of ERD

Entity: All nouns such as person, place, object, eventqualifies as an entity in the ERD. An entity usually has attributes which define its properties. . Examples of entities include Address Details, Person Details, Vehicle details, Student details etc. An entity is depicted by following symbol:

    



Entities are termed as "weak entities" if they depend on other entity for its existence. For instance, an entity such as "Item" which depends on another entity "ItemDetail" is a weak entity. They are denoted by following symbol: 



Attributes describe the properties of an entity. For instance, a Student Entity has attributes such as Studentld, Studentlvame, StudentAddress and StudentPhone. It is denoted by the following symbol:



Key attributes are the ones which uniquely identify the entity. In the above example, StudentId is the key attribute 



Attributes can also be multi-valued if they contain multiple values such as names of countries



Relationship depicts the relationship between two entities and how the data is shared across two entities. Cardinality depicts the number of instances of one entity related to instance of another entity. It can be one-to-one or oneto-many or many-to-many





on No comments:

Saturday, February 17, 2024

Design a form for creating a new account for a customer for on-line banking system by the administrator. It should have input fields for creating all the details of a customer including the PAN. After submitting the detail through the Submit button the administrator can view the details of all the customers by clicking Show button and also modify it by clicking Modify button.

 


INTERNET CONCEPTS AND WEB DESIGN MCSL016


    Design a form for creating a new account for a customer for on-line banking system by the administrator. It should have input fields for creating all the details of a customer including the PAN. After submitting the detail through the Submit button the administrator can view the details of all the customers by clicking Show button and also modify it by clicking Modify button.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create New Account</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    .container {
        width: 400px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input[type="text"], input[type="password"], input[type="submit"] {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    input[type="submit"]:hover {
        background-color: #45a049;
    }
    button {
        padding: 8px 20px;
        background-color: #ff6600;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background-color: #e65c00;
    }
</style>
</head>
<body>

<div class="container">
    <h2>Create New Account</h2>
    <form id="createAccountForm" action="submit_account_details.php" method="post">
        <label for="fullName">Full Name:</label>
        <input type="text" id="fullName" name="fullName" required><br>
        <label for="email">Email Address:</label>
        <input type="text" id="email" name="email" required><br>
        <label for="pan">PAN:</label>
        <input type="text" id="pan" name="pan" required><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br>
        <input type="submit" value="Submit">
    </form>
    <button onclick="showCustomerDetails()">Show Customer Details</button>
    <button onclick="modifyCustomerDetails()">Modify Customer Details</button>
</div>

<script>
    function showCustomerDetails() {
        // Redirect to the page to show customer details
        window.location.href = "customer_details.php";
    }

    function modifyCustomerDetails() {
        // Redirect to the page to modify customer details
        window.location.href = "modify_customer_details.php";
    }
</script>

</body>
</html>
on No comments:
Subscribe to: Posts (Atom)