Untitled

Demonstrate applying CSS properties to HTML pages with the following examples: 1. Sign in Page
<!DOCTYPE HTML>
<html>
<style>
html{
background-color:#002F5C;
} input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
} input[type=submit] {
width: 50%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button {
width: 40%;
background-color:#002F5C;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.t{
background-color: #0E0E7B;
padding: 20px;
}
.t{
margin: 0 auto;
width: 500px
}
</style>
<body>
<div>
<form>
<font color="white" /font>
<fieldset class='t'>
<h3 align="center"> SIGN IN </h3>
<input type="text" id="Name" name="Name" placeholder="User Name or Email"><br>
<br>
<input type="text" id="Password" name="Password" placeholder="User Password"><br>
<br>
<input type="submit" value="LOGIN" name="log"><br>
<br>
<input type="checkbox"><align="left">Remember me</align>
<align="right">Forgot password?<br></align>
<br>
<button>Login with Facebook</button>
<button>Login with Twitter</button>
<br>
<br>
Need new account?
<input type="submit" value="Sign up">
</fieldset>
</form>
</div>
</body>
</html>

1.Create a User Registration form with First Name, Last name, address, City, State, Country, Pincode, Username and Password fields for a General login webpage and satisfy the following criteria. Create a validate ( ) function that does the following:
(a) Checks that the First Name, Last Name, City, Country, Username, and Password1 fields are filled out.
(b) Checks that the Pincodeis exactly 6 numeric’s.
(c) Checks that the state is exactly two characters.
(d) Checks that the email is a valid email address.
• false if email has fewer than 6 characters
• false if email does not contain an @ symbol
• false if email does not contain a period (.)
• true otherwise
Solution:
HTML Code:
<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="UserRegistration" onsubmit="return(validate());">
<center><font size=4><b>User Registration Form</b></font></center>
<center><font size=3><b>first name</b></font>
<input type="text" name="fname" id="fname" size="30"><br>
<b>Last Name</b>
<input type="text" name="lname" id="lname" size="30"><br>
<b>address</b>
<input type="text" name="address" id="address" size="30"><br>
<b>City</b>
<input type="text" name="city" id="city" size="30"><br>
<b>state</b>
<input type="text" name="state" id="state" size="30"><br>
<b>Country</b>
<select name="country">
<option value="-1" selected>select..</option>
<option value="India">India</option>
<option value="US">US</option>
<option value="England">England</option>
<option value="China">China</option>
</select><br>
<b>PinCode</b>
<input type="text" name="pincode" id="pincode" size="30"><br>
<b>username</b>
<input type="text" name="username" id="username" size="30"><br>
<b>Password</b>
<input type="password" name="password" id="password" size="30"><br>
<b>EmailId/</b>
<input type="text" name="emailid" id="emailid" size="30"><br>
<input type="reset">
<input type="submit" value="Submit Form" /></center>
</form>
</body>
</html>

JaVaSCRIPT CODE:
function validate()
{
if( document.UserRegistration.fname.value == "" )
{
alert( "Please provide your First Name!" );
document.UserRegistration.fname.focus() ;
return false;
}
if( document.UserRegistration.lname.value == "" )
{
alert( "Please provide your Last Name!" );
document.UserRegistration.lname.focus() ;
return false;
}
if( document.UserRegistration.address.value == "" )
{
alert( "Please provide your address!" );
document.UserRegistration.address.focus() ;
return false;
}
if( document.UserRegistration.city.value == "" )
{
alert( "Please provide your city!" );
document.UserRegistration.city.focus() ;
return false;
}
if( document.UserRegistration.state.value == "" || document.UserRegistration.state.value.length != 2)
{
alert( "Please provide your State correct !" );
document.UserRegistration.state.focus() ;
return false;
}
if( document.UserRegistration.country.value == "-1" )
{
alert( "Please provide your country!" );
document.UserRegistration.country.focus() ;
return false;
}
if( document.UserRegistration.pincode.value == "" || isNaN( document.UserRegistration.pincode.value) || document.UserRegistration.pincode.value.length != 6 )
{
alert( "Please provide a pincode in the format ######." );
document.UserRegistration.pincode.focus() ;
return false;
}
if( document.UserRegistration.username.value == "" )
{
alert( "Please provide your User Name!" );
document.UserRegistration.username.focus() ;
return false;
}
if( document.UserRegistration.password.value == "" )
{
alert( "Please provide your Password!" );
document.UserRegistration.password.focus() ;
return false;
}
var email = document.UserRegistration.emailid.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (email == "" || email.length <6 || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.UserRegistration.emailid.focus() ;
return false;
}
return( true );

2. Create a page with JavaScript to do the following. These can all be on one page.
(a) Prompt the user for their name.
(b) Use a pop-up box to welcome the user by name.
(c) Display the current date on the page in the following format: April 30, 2018. Do not display the time. Do not "hard code" the date;
(d) Display the last modified date of the document.
(e) Put some useful advice, on any subject, in the status line of the browser.
Solution:
Code:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
window.status="hi users feel free to contact us";
var person = prompt("Please enter your name");
if (person != null) {
document.getElementById("demo").innerHTML =
alert("Hello " + person + "! How are you today?");
}
document.write("Current Date ")
var d = new Date()
var month=new array("jan","feb","mar","apr","may","june","jul","aug","sep","oct","nov","dec")
document.write(month[d.getMonth()])
document.write(" ")
document.write(d.getDate())
document.write(",")
document.write(" ")
document.write(d.getFullYear())
var x = document.lastModified;
document.getElementById("demo").innerHTML = "Last Modified " + x;
window.status="heyy just updated status";
</script>
</body>
</html>

1. VIT University has organized campus recruitment from Google. After the interview only 10 students got placed in Google. Consider their register number for processing. Check whether a particular register number is in the placed list or not and display the same. Write a PHP program for the above scenario.
CODE:
<!DOCTYPE html>
<html>
<body>
<?php
$student = array("16BCE0001", "16BCE0002", "16BCE0003", "16BCE0004", "16BCE0005",
"16BCE0006", "16BCE0007", "16BCE0008", "16BCE0009","16BCE0010");
$length= count(student);
$input = $_POST("register");
for($x=0; $x<length; $x++)
{
if($input==$student[$x])
{
echo "You are shortlisted";
} else
{
echo "You are not shortlisted";
}
} ?>
<form action="hello.php" method="get">
Register number: <input type="text" name="number" value="number">
<input type="submit" value="submit">
</form>
</body>
</html>

Create a PHP script that will output a form containing 2 fields: username and
password. Upon submission of the form, the code should check against the database, to see whether the username and password pair was correct. If so, display a welcome message. If not, display the message “Invalid username or password” followed by the same login form.

Code:
HTML:
<html>
<head>
<title> Login Form</title>
</head>
<body>
<form method="post" action="validate_login.php" >
<table border="1" >
<tr>
<td><label for="user_id">userid</label></td>
<td><input type="text"
name="user_id" id="user_id"></td>
</tr>
<tr>
<td><label for="users_pass">Password</label></td>
<td><input name="users_pass"
type="password" id="users_pass"></input></td>
</tr>
<tr>
<td><input type="submit" value="Submit"/>
<td><input type="reset" value="Reset"/>
</tr>
</table>
</form>
</body>
</html>

PHP:
<?php
$servername = "localhost";
$username = "scse";
$password = "scse";
$dbname = "login";
$user_id = $_POST["user_id"];
$pass = $_POST["users_pass"];
$con = mysql_connect($servername, $username, $password, $dbname);
if(! $con)
{
die('Connection Failed'.mysql_error());
}
mysql_select_db("login",$con);
$result = mysql_query("SELECT user_id, users_pass FROM users WHERE user_id = $user_id");
$row = mysql_fetch_array($result);
if($row["user_id"]==$user_id && $row["users_pass"]==$pass)
echo"welcome message";
else
echo"invalid username or password";
?>

Getting an appointment with Proctor Create a dashboard with following 3 tasks (3 different pages)
Task a) Create a form for student which should ask the following details
Regd. No (validation have to be tested us  ing JavaScript - regular expression)
 Name of the student (validation – no digits must be there)
 Reason to meet proctor (Text area Max limit = 100 words)
<!DOCTYPE html>
<html>
<head>
<title> Student meeting request </title>
</head>
<body>
<h1>Student meeting form :</h1>
<form action="studcheck.php" method="post"
onsubmit="return validateForm()" >
<label for="regno">Reg no:</label>
<input type="text" name="regno" class="form-control" id="regno"
pattern="[0-9]{2}[A-Za-z]{3}[0-9]{4}"> </br>
<label for="name">name:</label>
<input type="text" name="name" class="form-control" id="name"
pattern="[A-Za-z ]*"> </br>
<label for="Reason">Reason:</label>
<input type="text" name="reason" class="form-control" id="reason">
<button type="submit" class="btn btn-default"
name="subd">Submit</button> </br>
</form>
<script>
function validateForm() {
var x=document.getElementById("name");
var y=document.getElementById("regno");
if (x.value.match("\^[0-9]{2}[A-Za-z]{3}[0-9]{4}\")) {
alert("not valid");
return false;
}
if (y.value.match("\^[A-Za-z ]*\")) {
alert("not valid");
return false;
}
}
</script>
</body>
</html>
Task b) Create a login with the user name faculty and allow the faculty to use the password “technology@123” to login to the system. After successful login to the system, the proctor must
 be able to see all the requests
 The proctor can mention the particular time for each student
<html>
<head>
<h3>Proctor login form</h3>
</head>
<body>
<form action="studcheck.php" method="post" onsubmit="return validateForm()">
Username <input type="text" name="username" value="username" ></br>
Password <input type="password" name="password" value="password"></br>
<input type = "submit" name="submit" value="submit">
</form>
<script>
function validateForm() {
var x=document.getElementById("username");
var y=document.getElementById("password");
if ((x != ("faculty")) || (y != ("technology@123"))) {
alert("not valid");
return false;
}
}
</script>
</body>
</html>

Task c)When the appointment is fixed by the proctor, all the appointments should be visible in this page (only Registration number of the student and time should be visible to everyone)
<?php
$servername = "localhost";
$username = "scse";
$password = "scse";
$conn = mysqli_connect($servername, $username, $password, "scse");
$name = $regno = $reason = "";
$sql = "INSERT INTO proctor (reg_no, name, reason) VALUES ('16BCB0054', 'Khushi', 'lEAVE RELATED')";
if(isset($_POST["subd"])){
$name = $_POST["name"];
$regno = $_POST["regno"];
$reason = $_POST["reason"];
$sql = "INSERT INTO proctor (regno, name, reason) VALUES ( '$regno','$name', '$reason')";
mysqli_query($conn,$sql);}
?>