Print Ready

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>

<footer>
<p>Contact information</p>
<p>Mail at: <a href="mailto:someone@example.com">
someone@example.com</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:

<head>
</head>
<body>
<p>Welcome You Are Logged In<p>
</body>
</html>
Error Page:
<head>
</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"%>
"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>
<h1>PHP Quizzer</h1>
</div>
</header>
<main>
<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>
Copyright © 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
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'];
//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>
</head>
<body>
<header>
</div>
</header>
<main>
<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>
</p>
<p>
</p>
<p>
</p>
<p>
</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>
RA1611003020392
</div>
</footer>
</body>
</html>
4. final.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>
</head>
<body>
<header>
</div>
</header>
<main>
<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>
</footer>
RA1611003020392
</body>
</html>
5. process.php
<?php include 'database.php'; ?>

<?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
//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>
</head>
<body>
<header>
</div>
</header>
RA1611003020392
<main>
<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>
</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

Print Ready

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Print Ready

Загружено:

Авторское право:

Доступные форматы

Code: Exercise 1

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

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

@media (max-width: 600px) {

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

//Disabling fields after 3 attempts

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

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

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

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

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

AJAX Servlet Code:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws

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

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

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

//Create connection credentials

//Create mysqli object

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

//Check to see if score is set_error_handler

//Check if form was submitted

//Get total number of questions

//Get correct choice

//compare answer with result

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

//Get total number of questions

Вам также может понравиться