Scribd
Upload
101 views31 pages

Print Ready

The document contains code for an HTML page with navigation links, article content, aside menu, footer, and embedded media like video, audio, images and objects. It uses various HTML5 elements like header, nav, article, aside, section, video, audio and object. The document contains code for an HTML page template with CSS styling. It has sections for header, navigation, article content and footer. CSS is used for layout, styling and responsive design. The document contains code for an HTML page with JavaScript form validation on login. It has fields for username and password, and uses JavaScript to validate on submit and restrict attempts. Styling is done with CSS. The document contains code snippets

Uploaded by

kishoremj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
101 views31 pages

Print Ready

The document contains code for an HTML page with navigation links, article content, aside menu, footer, and embedded media like video, audio, images and objects. It uses various HTML5 elements like header, nav, article, aside, section, video, audio and object. The document contains code for an HTML page template with CSS styling. It has sections for header, navigation, article content and footer. CSS is used for layout, styling and responsive design. The document contains code for an HTML page with JavaScript form validation on login. It has fields for username and password, and uses JavaScript to validate on submit and restrict attempts. Styling is done with CSS. The document contains code snippets

Uploaded by

kishoremj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Code: Exercise 1

<html>
<body>
<section>
<header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Blog</a> |
<a href="#">Contact</a>
</nav>
</header>
<article>
<h1>This is an article element</h1>
<p>Article section specifies independent, self-contained content.</p>
<img src="pic.jpg" alt="Picture">
<figcaption>Image caption</figcaption>
</figure>

</article>

</section>
<aside>
<h4>A side Menu</h4>
<p>This will contain the aside menu content</p>
</aside>
<!--The <footer> element specifies a footer for a document or section.-->
<footer>
<p>Contact information</p>
<p>Mail at: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>
</body>
</html>

RA1611003020392
Output: Exercise 1

RA1611003020392
Code: Exercise 2

<html>
<body>
<section>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<object width="400" height="50" data="bookmark.swf"></object>

<object width="100%" height="500px" data="snippet.html"></object>


<object data="audi.jpeg"></object>
</section>

</body>
</html>

RA1611003020392
Output: Exercise 2

RA1611003020392
Code: Exercise 3

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}

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

header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}

nav {
float: left;
width: 30%;
height: 300px background: #ccc;
padding: 20px;
}

nav ul {
list-style-type: none;
padding: 0;
}

article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px
}

section:after {
content: "";

RA1611003020392
display: table;
clear: both;
}

footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}

@media (max-width: 600px) {


nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>

<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>

RA1611003020392
Output: Exercise 3

RA1611003020392
Code: Exercise 4

<html>
<head>
<title>Javascript Login Form Validation</title>
var attempt = 3;
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

if ( username == "Formget" && password == "formget#123"){


alert ("Login successfull");
window.location = "success.html"; //redirecting to other page
return false;
}
else{
attempt --;
alert("You have left "+attempt+" attempt;");

//Disabling fields after 3 attempts


if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
</script>
<style>

h2{
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}

hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}

RA1611003020392
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
div.main{
width: 300px;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:50px;
}
input[type=text],input[type=password]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}

center{
font-size:32px;
}
.note{
color:red;
}
.valid{
color:green;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
RA1611003020392
color: black;
}
input[type=button]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}

input[type=button]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

</style>
</head>
<body>
<div class="container">
<div class="main">
<h2>Javascript Login Form Validation</h2><hr/>

<form id="form_id" method="post" name="myform">


<label>User Name :</label></br>
<input type="text" name="username" id="username"/></br>

<label>Password :</label></br>
<input type="password" name="password" id="password"/></br>

<input type="button" value="Login" id="submit" onclick="validate()"/>


</form>
<span><b class="note">Note : </b>For this demo use following username and
password. <br/><b class="valid">User Name : Formget<br/>Password :
formget#123</b></span>
</div>

</div>
</body>
</html>

RA1611003020392
Output: Exercise 4

RA1611003020392
Code: Exercise 5

Login page:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MY LOGIN PAGE</title>
</head>
<body>

<form method="get" action="check">


UserName:<input type="text" name="username"><br>
Password:<input type="text" name="password"><br> <input
type="submit" value="login">
</form>
</body>
</html>

Welcome page:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"


pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MY LOGIN PAGE</title>
</head>
<body>
<p>Welcome You Are Logged In<p>
</body>
</html>

Error Page:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MY LOGIN PAGE</title>
</head>

RA1611003020392
<body>
Sorry,Unsuccessful Login
</body>
</html>

Servlet Page:

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/check")
public class check extends HttpServlet {
private static final long serialVersionUID = 1L;
public check() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
String uname = request.getParameter("username");
String pwd= request.getParameter("password");
if(uname.equals("bhaskar")&&
pwd.equals("chowdhury")) {
response.sendRedirect("member1.jsp");
}
else
{
response.sendRedirect("error1.jsp");
}
}
}

RA1611003020392
Output: Exercise 5

RA1611003020392
RA1611003020392
Code: Exercise 6

AJAX Servlet Code:

package com.journaldev.servlets;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/GetUserServlet")
public class GetUserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws


ServletException, IOException {

String userName = request.getParameter("userName").trim();


if(userName == null || "".equals(userName)){
userName = "Guest";
}
String greetings = "Hello " + userName;
response.setContentType("text/plain");
response.getWriter().write(greetings);
}

Index.jsp code:

<%@ page language="java" contentType="text/html; charset=UTF-8"


pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery, Ajax and Servlet/JSP integration example</title>

<script src="//code.jquery.com/jquery-1.10.2.js"
type="text/javascript"></script>
<script src="js/app-ajax.js" type="text/javascript"></script>
</head>

RA1611003020392
<body>

<form>
Enter Your Name: <input type="text" id="userName" />
</form>
<br>
<br>

<strong>Ajax Response</strong>:
<div id="ajaxGetUserServletResponse"></div>
</body>
</html>

app-ajax.js code:

$(document).ready(function() {
$('#userName').blur(function() {
$.ajax({
url : 'GetUserServlet',
data : {
userName : $('#userName').val()
},
success : function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
}
});
});
});

RA1611003020392
Output: Exercise 6

RA1611003020392
Code: Exercise 7

1. index.php
<?php include "database.php"; ?>
<?php
//Get the total questions
$query="select * from questions";
//Get Results
$results = $mysqli->query($query) or die ($mysqli->error. LINE );
$total = $results->num_rows;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PHP Quizzer!</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="container">
<header>
<div class="container">
<h1>PHP Quizzer</h1>
</div>
</header>
<main>
<div class="container">
<h2>Test your PHP Knowledge</h2>
<p>This is a multiple choice quize to test your knowledge about something</p>
<ul>
<li><strong>Number of Questions: </strong><?php echo $total; ?></ul>
<li><strong>Type: </strong>Multiple Choice</ul>
<li><strong>Estimatd Time: </strong><?php echo $total*0.5; ?>
minutes</ul>
</ul>

<a href="question.php?n=1" class="start">Start Quiz</a>


</div>
</div>
</main>
<footer>
<div class="container">
Copyright &copy; 2018, CSE 4C
</div>
</footer>
</body>
</html>

RA1611003020392
2. database.php
<?php

/**
* @file
* Connect to mysql
*/

//Create connection credentials


$db_host = 'localhost';
$db_name = 'quizzer';
$db_user = 'root';
$db_pass = '';

//Create mysqli object


$mysqli = new mysqli($db_host,$db_user,$db_pass,$db_name);

//Error handler
if($mysqli->connect_error){
printf("Connect failed: %s\n",$mysqli->connect_error);
exit;
}

?>

3. add.php
<?php include "database.php"; ?>

<?php
if (isset($_POST['submit'])){
//Get Post variables
$question_number = $_POST['question_number'];
$question_text = $_POST['question_text'];
$correct_choice = $_POST['correct_choice'];
$choices = array();
$choices[1] = $_POST['choice1'];
$choices[2] = $_POST['choice2'];
$choices[3] = $_POST['choice3'];
$choices[4] = $_POST['choice4'];
$choices[5] = $_POST['choice5'];

//Question query
$query="insert into questions (question_number, question)
values('$question_number','$question_text')";
$insert_row=$mysqli->query($query) or die ($mysqli->error. LINE );

RA1611003020392
if($insert_row){
foreach($choices as $choice => $value){
if($value != ''){
if($correct_choice == $choice){
$is_correct = 1;
} else {
$is_correct = 0;
}
$query="insert into choices (question_number,is_correct,choice)
values('$question_number','$is_correct','$value')";
$insert_row=$mysqli->query($query) or die ($mysqli->error. LINE );
if($insert_row){
continue;
}else {
die("Error: (".$mysqli->errno.") ".$mysqli->eerror);
}
}
}
$msg="Question has been added";
}
}
//get total questions
$query = "select * from questions";
$questions = $mysqli->query($query) or die ($mysqli->error. LINE );
$total=$questions->num_rows;
$next=$total+1;
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PHP Quizzer!</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="container">
<header>
<div class="container">
<h1>PHP Quizzer</h1>
</div>
</header>
<main>
<div class="container">
<h2>Add A question</h2>
<?php
if(isset($msg)) {

RA1611003020392
echo "<p>".$msg."</p>";
}
?>
<form method="post" action="add.php">
<p>
<label>Question Number</label>
<input type="number" value="<?php echo $next; ?>"
name="question_number" />
</p>
<p>
<label>Question</label>
<input type="text" name="question_text" />
</p>
<p>
<label>Choice #1: </label>
<input type="text" name="choice1" />
</p>
<p>
<label>Choice #2: </label>
<input type="text" name="choice2" />
</p>
<p>
<label>Choice #3: </label>
<input type="text" name="choice3" />
</p>
<p>
<label>Choice #4: </label>
<input type="text" name="choice4" />
</p>
<p>
<label>Choice #5: </label>
<input type="text" name="choice5" />
</p>
<p>
<label>Correct choice number </label>
<input type="number" name="correct_choice" />
</p>
<p>
<input type="submit" name="submit" value="Submit" />
</p>
</form>
</div>
</main>

<footer>
<div class="container">
RA1611003020392
Copyright &copy; 2018, CSE 4C
</div>
</footer>
</body>
</html>

4. final.php
<?php include "database.php"; ?>
<?php session_start(); ?>
<?php
//Create Select Query
$query="select * from shouts order by time desc limit 100";
$shouts = mysqli_query($con,$query);

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PHP Quizzer!</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="container">
<header>
<div class="container">
<h1>PHP Quizzer</h1>
</div>
</header>

<main>
<div class="container">
<h2>You are Done!</h2>
<p>Congrats! You have completed the test</p>
<p>Final socre: <?php echo $_SESSION['score']; ?></p>
<a href="question.php?n=1" class="start">Take Test Again</a>
<?php session_destroy(); ?>
</div>
</main>

<footer>
<div class="container">
Copyright &copy; 2018, CSE 4C
</div>
</footer>

RA1611003020392
</body>
</html>

5. process.php

<?php include 'database.php'; ?>


<?php session_start(); ?>
<?php

//Check to see if score is set_error_handler


if (!isset($_SESSION['score'])){
$_SESSION['score'] = 0;
}

//Check if form was submitted


if($_POST){
$number = $_POST['number'];
$selected_choice = $_POST['choice'];
$next=$number+1;
$total=4;

//Get total number of questions


$query="SELECT * FROM `questions`";
$results = $mysqli->query($query) or die($mysqli->error. LINE );
$total=$results->num_rows;

//Get correct choice


$q = "select * from `choices` where question_number = $number and is_correct=1";
$result = $mysqli->query($q) or die($mysqli->error. LINE );
$row = $result->fetch_assoc();
$correct_choice=$row['id'];

//compare answer with result


if($correct_choice == $selected_choice){
$_SESSION['score']++;
}

if($number == $total){
header("Location: final.php");
exit();
} else {
header("Location: question.php?n=".$next."&score=".$_SESSION['score']);
}
}
?>

RA1611003020392
6. question.php

<?php include "database.php"; ?>


<?php session_start(); ?>
<?php
//Set question number
$number = (int) $_GET['n'];

//Get total number of questions


$query = "select * from questions";
$results = $mysqli->query($query) or die($mysqli->error. LINE );
$total=$results->num_rows;

// Get Question
$query = "select * from `questions` where question_number = $number";

//Get result
$result = $mysqli->query($query) or die($mysqli->error. LINE );
$question = $result->fetch_assoc();

// Get Choices
$query = "select * from `choices` where question_number = $number";

//Get results
$choices = $mysqli->query($query) or die($mysqli->error. LINE );

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PHP Quizzer!</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="container">
<header>
<div class="container">
<h1>PHP Quizzer</h1>
</div>
</header>

RA1611003020392
<main>
<div class="container">
<div class="current">Question <?php echo $number; ?> of <?php echo $total; ?></div>
<p class="question">
<?php echo $question['question'] ?>
</p>
<form method="post" action="process.php">
<ul class="choices">
<?php while($row=$choices->fetch_assoc()): ?>
<li><input name="choice" type="radio" value="<?php echo $row['id']; ?>" />
<?php echo $row['choice']; ?>
</li>
<?php endwhile; ?>
</ul>
<input type="submit" value="submit" />
<input type="hidden" name="number" value="<?php echo $number; ?>" />
</form>
</div>
</div>
</main>

<footer>
<div class="container">
Copyright &copy; 2018, CSE 4C
</div>
</footer>
</body>
</html>

RA1611003020392
Output: Exercise 7

RA1611003020392
RA1611003020392
RA1611003020392
Code: Exercise 8

<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp);
}
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>

RA1611003020392
Output: Exercise 8

RA1611003020392

You might also like