You are on page 1of 13

Web Engineering Assignment P a g e |1

Assignment on PHP and JavaScript

Problem 1: Design a registration form and validate its field by using JavaScript.
Solution 1:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style type="text/css">
.container {
width:400px;
margin: 0 auto;
background-color: lightgray;
padding: 50px;
}
.header {
text-align: center;
}
.footer{
padding-top: 10px;
text-align: center;
}
.footer a{
text-decoration: none;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border: 2px solid gray;
border-radius: 5px;
}
input[type=submit] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
Web Engineering Assignment P a g e |2

background-color: gray;
border: 2px solid gray;
border-radius: 5px;
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container" >
<div class="header" >
<h1>Registration Form</h1>
</div>
<div class="body" >
<form name="chkform" onsubmit="return validation()">
<label for="Username">USERNAME</label>
<input type="text" id="username" name="username">
<label for="Password">PASSWORD</label>
<input type="password" id="password" name="password">
<label for="Email">EMAIL</label>
<input type="text" id="email" name="email">
<label for="Email">DIU ID NUMBER</label>
<input type="text" id="diuid" name="diuid">
<input type="submit" name="submit" value="SAVE" >
</form>
</div>
<div class="footer" >
<a target="blank" href=""> bigOpoint </a>
</div>
<p id="output" ></p>
</div>
<script type="text/javascript">
function validation() {
var username = document.chkform.username.value;
var password = document.chkform.password.value;
var email = document.chkform.email.value;
var diuid = document.chkform.diuid.value;
if (username == "" || password == "" || email == "" ||
diuid == "" ) {
window.alert("field must not be emplty !");
} else if (password.length != 8) {
window.alert("Password must have 8 character !");
Web Engineering Assignment P a g e |3

} else if (email.includes("@") == false) {


window.alert("Email must contain @ !");
} else if (diuid.includes("-") == false) {
window.alert("DIU id must contain (-) like 000-00-0000 !");
}
username = username.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
email = email.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
diuid = diuid.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
window.alert("Username = " + username + ";Password = " +
password + ";Email = " + email + ";Diu ID = " + diuid);
}
</script>
</body>
</html>

Problem 2: Write a PHP Script to


a. transform a string all uppercase letters
b. transform a string all lowercase letters
c. make a strings first character uppercase
d. make a strings first character of all the words uppercase
Solution 2:
<!DOCTYPE html>
<html>
<head>
<title>String Transformation</title>
<style type="text/css">
.container{
width: 400px;
margin: 0 auto;
background-color: lightgray;
padding: 50px;
}

.header h1,h4{
text-align: center;
}

input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border: 2px solid gray;
Web Engineering Assignment P a g e |4

border-radius: 5px;
}
input[type=submit] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
background-color: gray;
border: 2px solid gray;
border-radius: 5px;
color: white;
font-weight: bold;
cursor: pointer;
}

.footer{
padding-top: 10px;
text-align: center;
}

.footer a{
text-decoration: none;
}

.res{
height: 50px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box; width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
background-color: lightgray;
border: 2px solid gray;
border-radius: 5px;
color: green;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="container" >
<div class="header" >
<h1>String Transformation</h1>
<h4>Using PHP</h4>
Web Engineering Assignment P a g e |5

</div>
<div class="body" >
<form accept="" method="post" >
<label for="exp">Enter the string</label>
<input type="text" name="input" >
<input type="radio" name="choice" value="up">
All uppercase <br>
<input type="radio" name="choice" value="lo">
All lowercase <br>
<input type="radio" name="choice" value="fu">
First character uppercase <br>
<input type="radio" name="choice" value="fl">
First character of all the words uppercase
<input value="See Result" type="submit" >
</form>
</div>

<div class="res" >


<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$input = $_POST['input'];
$choice = $_POST['choice'];
if ($choice == "up") {
echo strtoupper($input);
}else if ($choice == "lo") {
echo strtolower($input);
}else if ($choice == "fu") {
echo ucfirst($input);
}else if ($choice == "fl") {
echo ucwords($input);
}
}
?>
</div>

<div class="footer" >


<a target="blank" href=" "> bigOpoint </a>
</div>
</div>
</body>
</html>
Web Engineering Assignment P a g e |6

Problem 3: Write the appropriate HTML code for the following table and also add
CSS (if needed)

1 2 and 3 4
5, 9 and 13 6 7 8
10 11 12
14, 15 and 16

Solution 3:
<!DOCTYPE html>
<html>
<head>
<title>Testing Table</title>
</head>
<body>
<table border height="300px" width="60%" style="text-align: center;">
<tr>
<td>1</td>
<td colspan="2">2 and 3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="3">5,9 and 13</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td colspan="3">14,15 and 16</td>
</tr>
</table>
</body>
</html>
Web Engineering Assignment P a g e |7

Problem 4: Create a simple calculator using JS

Enter a Javascript Mathematical Expression (2+3) * 4 Calculate


The result of the expression 20

Solution 4:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style type="text/css">
.container{
width: 400px;
margin: 0 auto;
background-color: lightgray;
padding: 50px;
}

.header h1,h4{
text-align: center;
}

input[type=text],input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border: 2px solid gray;
border-radius: 5px;
}

input[type=button] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
background-color: gray;
border: 2px solid gray;
border-radius: 5px;
color: white;
font-weight: bold;
cursor: pointer;
}
Web Engineering Assignment P a g e |8

.footer {
padding-top: 10px;
text-align: center;
}

.footer a{
text-decoration: none;
}

.res{
height: 50px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
background-color: lightgray;
border: 2px solid gray;
border-radius: 5px;
color: white;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="container" >
<div class="header" >
<h1>Simple Calculator</h1>
<h4>Using JavaScript</h4>
</div>
<div class="body" >
<label for="exp">Enter Mathematical Expression</label>
<input type="text" id="exp" >
<input value="See Result" type="button" onclick =
"calculation()" >
</div>
<div class="res" >
<span id="demo" ></span>
</div>
<div class="footer" >
<a target="blank" href=" "> bigOpoint </a>
</div>
</div>

<script type="text/javascript">
function calculation() {
Web Engineering Assignment P a g e |9

var exp = document.getElementById("exp").value;


var result = eval(exp);
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>

Problem 5: Write a JS program that calculate the following exam result

Solution 5:
<!DOCTYPE html>
<html>
<head>
<title>Exam Result</title>
<style type="text/css">
.container{
width: 700px;
margin: 0 auto;
background-color: lightgray;
padding: 50px;
}

.header h1,h4{
text-align: center;
}

input[type=text],input[type=password] {
Web Engineering Assignment P a g e | 10

width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border: 2px solid gray;
border-radius: 5px;
}

input[type=submit] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
background-color: gray;
border: 2px solid gray;
border-radius: 5px;
color: white;
font-weight: bold;
cursor: pointer;
}

.footer{
padding-top: 10px;
text-align: center;
}

.footer a{
text-decoration: none;
}

.msg{
color: red;
font-weight: bold;
}

.correct{
color: green;
font-weight: bold;
}

.finalresult{
color: blue;
font-weight: bold;
}
</style>
</head>
Web Engineering Assignment P a g e | 11

<body>
<div class="container" >
<div class="header" >
<h1>Exam Result</h1>
<h4>Using JavaScript</h4>
<p class="finalresult" id="score" ></p>
</div>
<div class="body" >
<form name="chkform" >
<h3>1. Which is platform independent language <span
class="msg" id="res_one" ></span></h3>
<input type="radio" name="choice1" value="jav"> JAVA
<input type="radio" name="choice1" value="c"> C
<input type="radio" name="choice1" value="cpl"> C++
<input type="radio" name="choice1" value="bas"> BASIC
<p class="correct" id="crr_one" ></p>
<h3>2. Which is class of all class in java <span
class="msg" id="res_two" ></span></h3>
<input type="radio" name="choice2" value="obj"> OBJECT
<input type="radio" name="choice2" value="mat"> MATH
<input type="radio" name="choice2" value="sys"> SYSTEM
<input type="radio" name="choice2" value="gra"> GRAPHIC
<p class="correct" id="crr_two" ></p>
<h3>3. Frame package is in which package <span
class="msg" id="res_three" ></span></h3>
<input type="radio" name="choice3" value="awt"> AWT
<input type="radio" name="choice3" value="app"> APPLET
<input type="radio" name="choice3" value="lan"> LANG
<input type="radio" name="choice3" value="swi"> SWING
<p class="correct" id="crr_three" ></p>
<h3>4. Java does not support <span class="msg"
id="res_four" ></span></h3>
<input type="radio" name="choice4" value="inh"> INHERITANCE
<input type="radio" name="choice4" value="mul"> MULTIPLE
INHERITANCE
<input type="radio" name="choice4" value="poly"> POLYMORPHISM
<input type="radio" name="choice4" value="enc"> ENCRYPTION
<p class="correct" id="crr_four" ></p>
<br>
<br>
Web Engineering Assignment P a g e | 12

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


<input type="button" value="See Result"
onclick="checkResult()" >
</form>
</div>
<div class="footer" >
<a target="blank" href=" "> bigOpoint </a>
</div>
</div>

<script type="text/javascript">
function checkResult() {
var countresult = 0;
var choice1 = document.chkform.choice1.value;
var choice2 = document.chkform.choice2.value;
var choice3 = document.chkform.choice3.value;
var choice4 = document.chkform.choice4.value;
if (choice1 != "jav" ) {
document.getElementById("res_one").innerHTML = " - Wrong
answer" ;
document.getElementById("crr_one").innerHTML = "Correct
answer - JAVA" ;
}
else{
document.getElementById("crr_one").innerHTML = "Right
answer" ;
countresult++;
}

if (choice2 != "obj") {
document.getElementById("res_two").innerHTML = " - Wrong
answer" ;
document.getElementById("crr_two").innerHTML = "Correct
answer - OBJECT" ;
}
else{
document.getElementById("crr_two").innerHTML = "Right
answer" ;
countresult++;
}

if (choice3 != "app") {
document.getElementById("res_three").innerHTML = " -
Wrong answer" ;
document.getElementById("crr_three").innerHTML =
"Correct answer - APPLET" ;
}
Web Engineering Assignment P a g e | 13

else{
document.getElementById("crr_three").innerHTML = "Right
answer" ;
countresult++;
}

if (choice4 != "mul") {
document.getElementById("res_four").innerHTML = " -
Wrong answer" ;
document.getElementById("crr_four").innerHTML = "Correct
answer - MULTIPLE INHERITANCE" ;
}
else{
document.getElementById("crr_four").innerHTML = "Right
answer" ;
countresult++;
}
document.getElementById("score").innerHTML = "Score = " +
countresult + " out of 4" ;
}
</script>
</body>
</html>

Problem Given By Submitted By


Mr. Md. Azizul Hakim (MAH) Md. Saidur Rahman Kohinoor
Lecturer 142-15-3669
Department of CSE Undergraduate Student
Daffodil International University Daffodil International University

<< The End >>