DEPARTMENT OF COMPUTER SCIENCE

ARYABHATTA COLLEGE
UNIVERSITY OF DELHI

WEB DESIGN AND DEVELOPMENT

Submitted To: Submitted By:

Mr. Rajeev Rai shivansh Bijalwan
Semester: 3
Roll no-CSC/21/7
Examination Roll no-21059570051

1
S.NO. TITLE PAGE NO.

(HTML)
1. Create an HTML Page showing information about your favorite movie in following
manner:
a. Name of the movie as the heading in center as well as title of page.
b. One paragraph stating the information about movie like release date,director,
budget etc.
c. At least two images of the posters of movie.
d. One paragraph describing the plot of the movie.
e. An unordered list stating the cast of the movie along with equal size photos.
f. An ordered list stating similar movies linking to corresponding Wikipedia
pages.
g. All segments must be separated by different levels of headings.
2. Create an HTML Page to display information about a dummy college in following
manner:
a. Page must be divided in divisions where the outcome is like
b. b. Header division must contain name and logo of the college.
c. c. Navigation division must display menu or links to various different
pages which might
d. store other relevant information.
e. d. Message division must contain image and name of the principal along
with the message.
f. e. Notice division must display different notices in an unordered list.
g. f. Gallery division must display images of past events or building of the
college.
h. g. Footer division must show contact information of the college.
3. Create an HTML Page showing the form asking information in following format:
a. Name of the student as text.
b. Roll no. of the student as text.
c. Email of the student as text.
d. Age of the student as number.
e. Gender of the student using radio buttons.
f. Societies he/she opted for using check boxes.
g. Name of the course from a drop down list.
h. Address of the student in a text area.
i. Photo as file.
j. j. Submit button to submit this data to report.php page using get method.

S.NO. TITLE PAGE NO.

(CSS)

2
1. Redesign page created in HTML practical 1 such that:
1. All images have a solid red border of 1px width.
2. All headings should be in dark blue color.
3. Text of paragraph must be of different font-family than the complete page.
4. d. Background color of the page should be aqua.
2. Redesign page created in HTML practical 2 such that:
a. All divisions have a solid border of 2px.
b. Header and Footer division have aquamarine and dark blue background
color
c. Respectively and same font-style which are larger than all other divisions.
d. Background color of the Navigation division should be aqua and links of the
page should appear in UPPERCASE.Background color of the message and
notices division should be light sky blue and text color should not be black.
Message text should be italic and notices should be bold.

3
S.NO TITLE PAGE.NO.
(JAVASCRIPT)
1. Write JavaScript to validate the form created by student in HTML practical 3
keeping in mind
a. following constraints:
b. No text box or text area should be left blank.
c. Validate whether the Roll no. and Email of the student are in proper format.
d. Age must be in the range 16-22.
e. Photo must be a file of type jpg/jpeg/png.
f. e. Data will be sent to report.php page only if all these constraints are
fulfilled otherwise display corresponding errors.
2. Write JavaScript to show the usage of setInterval function using which background
color of a division keeps on changing to a random color every 2 seconds. Also use
setTimeout function to show the content of a textbox as label of large size after 3
seconds.
3. Prompt user to enter his name and add it to cookies. If the user is new user then
show an alert box stating Welcome <user name> otherwise display Welcome again
<user name>. Cookies should get removed already after 24 hours.

4
S.NO TITTLE PAGE NO.
(PHP)

1. Write PHP script to construct the following pattern using nested for loop.
*******
*** ***
** **
* *
** **
*** ***
*******
2. Accept a number from an HTML page and send it to a PHP file. Validate that this
number is a positive integer in the range 2-100. PHP file should check whether this
number is prime or composite. If number is found prime then Fibonacci series till
that element is also printed otherwise factorial of that number is to be printed.

3. Write a PHP file colors.php which declares an array of ten colors names. Every 60
time this file is accessed a random color from this array should be chosen and same
is to be set as the background color of a division.

4. Create a login page asking for user name and password from. On submitting these
details, a welcome message should be displayed if the user already exists in the
database. Otherwise an error message is to be displayed.

5. Create a table student_details in MySql which is capable of storing the information

which is being passed in HTML practical 3. Write PHP code in a file named
report.php which validates all the data and then stores it in table and displays the
same. After insertion of the entries in the database, an alert box should be displayed
stating whether the insertion was successful or not.
6. Write PHP code in a file named db.php which fetches the data from student_details
table and displays the data in tabular way.

PRACTICAL 1
5
Create an HTML Page showing information about your favorite movie in following manner:
a. Name of the movie as the heading in center as well as title of page.
b. One paragraph stating the information about movie like release date,director, budget etc.
c. At least two images of the posters of movie.
d. One paragraph describing the plot of the movie.
e. An unordered list stating the cast of the movie along with equal size photos.
f. An ordered list stating similar movies linking to corresponding Wikipedia pages.
CODE :
<!DOCTYPE html>
<html lang="en">

<head>

<title>M.S Dhoni:The Untold Story</title>

</head>

<body>

<h1 style="text-align: center;"><i><u>M.S Dhoni:The Untold Story</u></i></h2>

<table border="1" width="100%">

<tr>
<td style="width:50%">

<ul>
<li><b>Directed by:</b> <i>Neeraj Pandey</i></li>
</ul>
<ul>
<li><b>Written by:</b> <i>Neeraj Pandey & Dilip Jha</i></li>
</ul>
<ul>
<li><b>Produced by:</b> <i>Arun Pandey & Fox Star Studios</i></li>
</ul>
<ul>
<li><b>Starring:</b>
<ul style="list-style-type:square;">
<li><i>Sushant Singh Rajput</i></li>
<li><i>Disha Patani</i></li>
<li><i>Kiara Advani</i></li>
<li><i>Anupam Kher</i></li>
<li><i>Bhumika Chawla</i></li>
<li><i>Kranti Prakash Jha</i></li>
<li><i>Alok Pandey</i></li>
</ul> </li>
</ul>
<ul>
<li><b>Release date:</b> <i>30 September 2016</i></li>
</ul>
<ul>

6
 <li><b>Country:</b> <i>India</i></li>
</ul>
<ul>
<li><b>Language:</b> <i>Hindi</i></li>
</ul>
<ul>
<li><b>Budget:</b> <i>US$15 million</i></li>
</ul>
<ul>
<li><b>Box office:</b> <i>US$30 million</i></li>
</ul>
</td>
<td style="width:40%">
<img src="C:\Users\Devashish Kumar\Downloads\firstimage.jpg" alt="poster" style="margin:
30px;"><br>
</tr>

</table>
<br><br>
<hr>

<h3 style="text-align: center;">Plot</h3>

<hr>
<p style="margin: 4%;">
In the pre-credits sequence there is a scene of the <b>2011 Cricket World Cup Final</b>. MS
Dhoni, India's
captain, walks out to bat after <b>Kohli's </b>wicket.<br>

The film begins in <b>Ranchi</b>, 7 July 1981. At the hospital maternity unit, Paan Singh Dhoni
(<b>Anupam
Kher</b>) is confused whether he has got a girl or boy. He later names his baby boy Mahendra
'Mahi'
Singh Dhoni.Fourteen years later, Mahi is spotted by a cricket coach (Rajesh Sharma) while
goalkeeping in a
football game. He invites him to try out for the school cricket team as a wicketkeeper and selects
him after
being impressed. Mahi improves his batting and becomes a regular member of the team.<br><br>

Three years later, A Grown Up Mahi (<b>Sushant Singh Rajput</b>) helps win an inter-school
cricket match.
After achieving much fame, Mahi is selected for the Ranji Trophy but his draft notice is held up
due to
which he is late in reaching Kolkata despite his friends' help. But Mahi does not give up and, to
please his
father, he joins the Kharagpur Station as a ticket collector.<br><br>

After some time, Mahi is depressed with his job. With the insistence of his manager, Mahi decides
to play
cricket alongside his work, and after his day-shifts he goes to practice cricket. He participates in
different tournaments and as a result he gets selected for the Railways.<br><br>
In the 2007 Cricket World Cup. As captain of the national side, he wins the <b>T-20 World
Cup</b>, and leads
India to the number one ranking in Test matches.<br><br>

In 2010, Mahi arrives at a hotel. Sakshi Singh Rawat (<b>Kiara Advani</b>), a hotel official fails to

7
 recognize him and later apologizes to him. They soon start dating and Mahi eventually proposes
marriage to
her.They marry and Mahi begins training for the <b>2011 World Cup</b>. He eventually develops
the team with
new players. The film returns to the final where Mahi eases the pressure with a crucial innings.
With 4 runs
required, Mahi hits a six and India wins the final. His family, friends and coaches watching the
match cry
happy tears.<br>

After the credits, the real MS Dhoni walks by the boundaries.<br>

</p>
<hr>
<fieldset>
<legend align="center" style="font-size: 15px;">
<font size="5"><b>
Cast
</b></font>
</legend><br>
<table border="1" width="100%">
<tr>
<td style="width:70%">
<ul>
<li><b>Sushant Singh Rajput</b> as <i>Mahi</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/SSR.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>
<li><b>Kiara Advani</b> as <i>Sakshi Singh Rawat,Mahi's wife</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/KA.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>
<li><b>Disha Patani</b> as <i>Priyanka Jha</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/DP.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>

<li><b>Anupam Kher</b> as <i>Paan Singh Dhoni,Mahi's father</i></li>

8
 </ul>
</td>
<td style="width:30%">
<img src="img/AN.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>
<li><b>Bhumika Chawla</b> as <i>Jayanti Gupta,Mahi's sister</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/BH_C.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>

<li><b>Kranti Prakash Jha</b> as Santosh Lalas</li>

</ul>
</td>
<td style="width:30%">
<img src="img/KPJ.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>
<li><b>Alok Pandey</b> as <i>Chittu,Dhoni's best friend</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/AP.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>

</table>
</fieldset>
</main>
</div>
<hr>
<h3 style="text-align: center;">Similar Movies, Must watch</h3>
<hr>
<ol style="margin-left: 10%;">
<li>
<h4><a href="https://en.wikipedia.org/wiki/Sultan_(2016_film)">Sultan</a></h4>
</li>
<li>
<h4><a href="https://en.wikipedia.org/wiki/Mary_Kom_(film)">Mary Kom</a></h4>
</li>
<li>
<h4><a href="https://en.wikipedia.org/wiki/Bhaag_Milkha_Bhaag">Bhaag Milkha
Bhaag</a></h4>

9
 </li>
<li>
<h4><a href="https://en.wikipedia.org/wiki/Chak_De!_India">Chak De! India</a></h4>
</li>
<li>
<h4><a href="https://en.wikipedia.org/wiki/Gold_(2018_film)">Gold</a></h4>
</li>

<h4><a href="https://en.wikipedia.org/wiki/Soorma_(film)">Soorma</a></h4>
</li>
<li>
<h4><a href="https://en.wikipedia.org/wiki/Lagaan">Lagaan</a></h4>
</li>
</ol><br>

</body>

</html>

OUTPUT :

10
 PRACTICAL 2
Create an HTML Page to display information about a dummy college in following manner:
a. Page must be divided in divisions where the outcome is like
b. Header division must contain name and logo of the college.
c. Navigation division must display menu or links to various different pages which might

d. store other relevant information.

e. Message division must contain image and name of the principal along with the message.
f. Notice division must display different notices in an unordered list.
g. Gallery division must display images of past events or building of the college.
h.
i. Footer division must show contact information of the college.
CODE :
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header</title>
<style>
*{

11
 margin: 0;
padding: 0;
box-sizing: border-box;
}

.nav {
height: 30px;
width: 100%;
border-width: 1px;
border: double 3px black;
margin-top: 15px;
padding-top: 10px;
padding-bottom: 30px;

background-color: rgb(195, 196, 218);

}

.nav li {
color: white;
text-decoration: none;
list-style: none;
margin-left: 20px;
margin-right: 20px;
float: left;
}

.nav a:hover {
color: rgb(0, 13, 255);
background-color: white;
}

iframe {
margin-top: 10px;
margin-left: 25px;
margin-bottom: 25px;
border-color: black;
border: 3px double rgb(32, 31, 31);

footer {
border: 2px solid black;
width: 100%;
}

tr {
padding-bottom: 30px;
}

12
 img {
border: 3px double rgb(32, 31, 31);
}

.f {
height: 200px;
width: 100%;
margin-top: 0px;

border-width: 1px;
border-style: solid;

box-sizing: border-box;
}
</style>
</head>

<body>
<header>
<center><img src="https://aryabhattacollege.ac.in/images/logo.png" width="100%" alt="logo"
border=" 3px double black"></center>

</header>
<nav class="nav">
<ul>
<li><a href="https://aryabhattacollege.ac.in/" target="_top"><b>HOME</a></li>
<li><a href="https://aryabhattacollege.ac.in/AddOnCourse.aspx?id=7"
target="_top"><b>COURSES</a></li>
<li><a href="https://aryabhattacollege.ac.in/Department.aspx"
target="_top"><b>DEPARTMENTS</a>
</li>
<li><a href="https://aryabhattacollege.ac.in/Department.aspx#"
target="_top"><b>FACULTY</a></li>
<li><a href="https://aryabhattacollege.ac.in/" target="_top"><b>ADMISSIONS</a></li>
<li><a href="https://aryabhattacollege.ac.in/facilities.aspx?
id=22&&subname=1031&&name=Reading%20Room"
target="_top"><b>STUDENT
SOCITIES</a></li>
<li><a href="https://aryabhattacollege.ac.in/extention_page.aspx?id=2063&&name=NSS"
target="_top"><b>NSS</a>
</li>
<li><a href="http://du.ac.in/" target="_top"><b>DU WEBSITE</a></li>
</ul>
</nav>
<iframe src="msg.html" style="height:600px;width:625px;" title="Message"></iframe>
<iframe src="notice.html" style="height:600px;width:625px;" title="notices"></iframe>
<iframe src="g.html" style="height:300px;width:98%" title="Galary"></iframe>

13
 <footer>
<div class="f">
<center><b>
<p style="margin:20px">Contact Us:<br><br>
EMAIL - admin@aryabhattacollege.ac.in<br><br>
Tel. No.- 01124110490</p>
</b>
<a href="https://twitter.com/aryabhatta059" target="_blank"><img
src="https://aryabhattacollege.ac.in/images/s1.png" alt="error" style="margin-left: 20px;">
</a>
<a href="https://www.facebook.com/aryabhattacollegeofficial" target="_blank"><img
src="https://aryabhattacollege.ac.in/images/fb.png" alt="error" style="margin-
left:20px ;"></a>
</center>
</div>
</footer>

</html>

OUTPUT :

14
15
 PRACTICAL 3
3. Create an HTML Page showing the form asking information in following format:
a. Name of the student as text.
b. Roll no. of the student as text.
c. Email of the student as text.
d. Age of the student as number.
e. Gender of the student using radio buttons.
f. Societies he/she opted for using check boxes.
g. Name of the course from a drop down list.
h. Address of the student in a text area.
i. Photo as file.
j. Submit button to submit this data to report.php page using get method.

CODE :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Student Details</title>
<style type="text/css">
body{
background-image: url(img/bg.jpg);
background-size: cover;
}
fieldset{
border: 1px solid grey;
background-color: aquamarine;
border-radius: 6px;
margin-left: 60px;
margin-right: 60px;
}
h1{
background-color: black;
color: white;
padding: 10px;
border-color: lightblue;
border-radius: 6px;
}
select,input,textarea{
padding: 10px;
border: solid black;

16
 border-radius: 5px;
}
</style>
</head>
<body>
<center><h1>Student Details</h1></center>
<form action="#home.php" method="get">
<fieldset>
<legend align="center" style="font-size: 15px;" >
<font size="5"><b>
Enter students details
</b></font>
</legend><br>
<label for="fname">Student Name*</label>
<input type="text" name="First Name" id="fname" placeholder="First Name"
required style="margin-right: 5.7em;margin-left: 0.4em;">
<input type="text" name="Last Name" id="lname" placeholder="Last Name"
style="margin-left: 4em;"><br><br>
<label for="roll">Roll Number*</label>
<input type="text" name="roll" id="roll" style="margin-left:1.2em"
placeholder="Roll Number" required><br><br>
<label for="email" style="margin-right: 0.1em;">Email Address*</label>
<input type="text" name="Email" id="email" required
style="width:13.1em"placeholder="xyz@example.com">
<label for="age" style="margin-left: 7.2em">Age*</label>
<input type="number" name="age" id="age" required><br><br>
<label for="Gender" style="margin-right: 2.8em;">Gender*</label>

<input type="radio" value="Male" name="Gender" id="male">

<label for="male">Male</label>

<input type="radio" value="Female" name="Gender" id="female">

<label for="female">Female</label>

<input type="radio" value="Other" name="Gender" id="other">

<label for="other">Other</label><br><br>

<label for="mno">Mobile number*</label>

<input type="text" name="Mobile Number" id="mno" minlength="10"
maxlength="10" required><br><br>

<label style="margin-right: 0.3em;">Societies Opted</label>

<input type="checkbox" name="society" value="Blitz" id="blitz">
<label for="blitz">Blitz</label>
<input type="checkbox" name="society" value="Advaitaa" id="advaitaa">
<label for="advaitaa">Advaitaa</label>
<input type="checkbox" name="society" value="Anhad" id="anhad">
<label for="anhad">Anhad</label>

17
 <input type="checkbox" name="society" value="Illuminati" id="illuminati">
<label for="illuminati">Illuminati</label>
<input type="checkbox" name="society" value="Maniera" id="maniera">
<label for="maniera">Maniera</label>
<input type="checkbox" name="society" value="Naksh" id="naksh">
<label for="naksh">Naksh</label>
<input type="checkbox" name="society" value="Nrityaang" id="nrityaang">
<label for="nrityaang">Nrityaang</label>
<input type="checkbox" name="society" value="Shades" id="shades">
<label for="shades">Shades</label>
<br><br>
<label for="course" style="margin-right:3.9em">Course*</label>
<select name="course" required>
<option></option>
<option>B.A. (Hons) Applied Psychology</option>
<option>B.A. (Hons) Arabic</option>
<option>B.A. (Hons) Bengali</option>
<option>B.A. (Hons) Business Economics (BBE)</option>
<option>B.A. (Hons) Economics</option>
<option>B.A. (Hons) English</option>
<option>B.A. (Hons) French</option>
<option>B.A. (Hons) Geography</option>
<option>B.A. (Hons) German</option>
<option>B.A. (Hons) Hindi</option>
<option>B.A. (Hons) History</option>
<option>B.A. (Hons) Patrakarita Evam Jansanchar</option>
<option>B.A. (Hons) Italian</option>
<option>B.A. (Hons) Journalism</option>
<option>B.A. (Hons) Music</option>
<option>B.A. (Hons) Persian</option>
<option>B.A. (Hons) Philosophy</option>
<option>B.A. (Hons) Political Science</option>
<option>B.A. (Hons) Psychology</option>
<option>B.A. (Hons) Punjabi</option>
<option>B.A. (Hons) Sanskrit</option>
<option>B.A. (Hons) Social Work</option>
<option>B.A. (Hons) Sociology</option>
<option>B.A. (Hons) Spanish</option>
<option>B.A. (Hons) Urdu</option>
<option>B.A. (Hons.) Hindi Journalism and Mass
Communication</option>
<option>B.A. Functional Hindi</option>
<option>B.A. Vocational Studies</option>
<option>B.Ed.</option>
<option>B.Ed. Home Science</option>
<option>B.Sc. (Genl) Mathematical Science</option>
<option>B.Sc. (Hons.) Instrumentation</option>
<option>B.Sc. (Hons) Anthropology</option>
<option>B.Sc. (Hons) Bio-Chemistry</option>

18
 <option>B.Sc. (Hons) Biomedical Science</option>
<option>B.Sc. (Hons) Chemistry</option>
<option>B.Sc. (Hons) Botany</option>
<option>B.Sc. (Hons) Computer Science</option>
<option>B.Sc. (Hons) Electronics</option>
<option>B.Sc. (Hons) Food Technology</option>
<option>B.Sc. (Hons) Geology</option>
<option>B.Sc. (Hons) Home Science</option>
<option>B.Sc. (Hons) Mathematics</option>
<option>B.Sc. (Hons) Microbiology</option>
<option>B.Sc. (Hons) Physics</option>
<option>B.Sc. (Hons) Polymer Science</option>
<option>B.Sc. Applied Life Sciences with Agro-Chemical & Pest
Management</option>
<option>B.Sc. (Hons) Statistics</option>
<option>B.Sc. (Hons) Zoology</option>
<option>B.Sc. Applied Life Sciences</option>
<option>B.Sc. (Hons.) Biological Sciences</option>
<option>B.Sc. (MT) Radiography</option>
<option>B.Sc. Applied Science</option>
</select><br><br>
<label for="address" style="margin-right: 3em;">Address*</label>
<textarea name="address" id="address" required style="width:55%;height:
80px;resize: none;vertical-align: middle;"></textarea><br><br>
<label for="photo" style="margin-right:0.5em">Upload Image*</label>
<input type="file" name="photo" id="photo" required>

<center><input type="submit" name="Submit" value="Submit" style="margin-right: 2em;

background-color: white;color: black;margin-top: 2em;cursor: pointer;">
<input type="reset" name="Reset" value="Reset" style="margin-left: 2em;
background-color: white;color: black;margin-top: 2em;cursor: pointer;"></center><br><br>
</fieldset>
</form>
</body>
</html>

OUTPUT :

19
 PRACTICAL 1
(CSS)
Redesign page created in HTML practical 1 such that:
a. All images have a solid red border of 1px width.
b. All headings should be in dark blue color.
c. Text of paragraph must be of different font-family than the complete
page.
d. Background color of the page should be aqua.

CODE :
<html lang="en">
<head>

<title>M.S Dhoni:The Untold Story</title>

<style type="text/css">
*{
box-sizing: border-box;
}

/* Style the body */

20
 body {
font-family: Arial;
margin-left: 10px;
background-color: aqua;
background-size: cover;

/* Header/logo Title */
header {
display: flex;
padding: 10px;
padding-left: 500px;
color: white;
border-radius: 50px;
margin-bottom: 5px;
background-image: url(img/blog-bg.0dc2e3.png);
background-size: cover;
background-position: right;
}
header h1{

box-sizing: border-box;
background-color: #f5f5f5;
padding: 5px 5px;
color: #0d0086;
border-start-end-radius: 30px;
text-align: right;

/* Column container */
.row {
display: flex;
flex-wrap: wrap;

/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */
aside {
flex: 25%;
background-color: #ffd3d3;
padding: 20px;

border-top-left-radius: 50px;
border-bottom-right-radius: 50px;

21
 }

/* Main column */
main {
flex: 75%;
background-color: white;
padding: 20px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.image{
border: solid red 1px;

/* Footer */
footer {
padding: 20px;
text-align: center;
background: black;
color: white;
}
</style>
</head>
<body>
<header class="heade">
<h1><i>M.S Dhoni:The Untold Story</i></h2>
</header>
<div class="row">
<aside>
<div class="image" >
<img src="C:\Users\Devashish Kumar\Downloads\firstimage.jpg" alt="poster" width="210"
height="300" style="margin-left: 30px;"><br><br>

</div>
<table style="text-align: left;">
<tr>
<th>Directed by:</th>
<td>Neeraj Pandey</td>
</tr>
<tr>
<th>Written by:</th>
<td>Neeraj Pandey & Dilip Jha</td>
</tr>
<tr>
<th>Produced by:</th>

22
 <td>Arun Pandey & Fox Star Studios</td>
</tr>
<tr>
<th>Starring:</th>
<td>Sushant Singh Rajput</td>
</tr>
<tr>
<th></th>
<td>Disha Patani</td>
</tr>
<tr>
<th></th>
<td>Kiara Advani</td>
</tr>
<tr>
<th></th>
<td>Anupam Kher</td>
</tr>
<tr>
<th></th>
<td>Bhumika Chawla</td>
</tr>
<tr>
<th></th>
<td>Kranti Prakash Jha</td>
</tr>
<tr>
<th></th>
<td>Alok Pandey</td>
</tr>
<tr>
<th>Release date:</th>
<td>30 September 2016</td>
</tr>
<tr>
<th>Country:</th>
<td>India</td>
</tr>
<tr>
<th>Language:</th>
<td>Hindi</td>
</tr>
<tr>
<th>Budget:</th>
<td>US$15 million</td>
</tr>
<tr>
<th>Box office:</th>
<td>US$30 million</td>

23
 </tr>
</table>
<br><br>
<hr>
<h3>Similar Movies, Must watch</h3>
<ol>
<li><h4><a href="https://en.wikipedia.org/wiki/Sultan_(2016_film)">Sultan</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Mary_Kom_(film)">Mary Kom</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Bhaag_Milkha_Bhaag">Bhaag Milkha
Bhaag</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Chak_De!_India">Chak De! India</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Gold_(2018_film)">Gold</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Saand_Ki_Aankh">Saand ki Aankh</a></h4></li>

<li><h4><a href="https://en.wikipedia.org/wiki/Chhalaang">Chhalaang</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Panga_(film)">Panga</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Toofaan">Toofan</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Saina_(film)">Saina</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Soorma_(film)">Soorma</a></h4></li>
<li><h4><a href="https://en.wikipedia.org/wiki/Lagaan">Lagaan</a></h4></li>
</ol>
</aside>
<main>
<h3>Plot</h3>
<hr>
<p>
In the pre-credits sequence there is a scene of the <b>2011 Cricket World Cup Final</b>. MS
Dhoni, India's captain, walks out to bat after <b>Kohli's </b>wicket.<br>

The film begins in <b>Ranchi</b>, 7 July 1981. At the hospital maternity unit, Paan Singh Dhoni
(<b>Anupam Kher</b>) is confused whether he has got a girl or boy. He later names his baby boy
Mahendra 'Mahi' Singh Dhoni.Fourteen years later, Mahi is spotted by a cricket coach (Rajesh Sharma)
while goalkeeping in a football game. He invites him to try out for the school cricket team as a
wicketkeeper and selects him after being impressed. Mahi improves his batting and becomes a regular
member of the team.<br><br>

Three years later, A Grown Up Mahi (<b>Sushant Singh Rajput</b>) helps win an inter-school cricket
match. After achieving much fame, Mahi is selected for the Ranji Trophy but his draft notice is held up
due to which he is late in reaching Kolkata despite his friends' help. But Mahi does not give up and, to
please his father, he joins the Kharagpur Station as a ticket collector.<br><br>

After some time, Mahi is depressed with his job. With the insistence of his manager, Mahi decides to play
cricket alongside his work, and after his day-shifts he goes to practice cricket. He participates in different
tournaments and as a result he gets selected for the Railways.<br><br>
In the 2007 Cricket World Cup. As captain of the national side, he wins the <b>T-20 World Cup</b>, and
leads India to the number one ranking in Test matches.<br><br>

In 2010, Mahi arrives at a hotel. Sakshi Singh Rawat (<b>Kiara Advani</b>), a hotel official fails to
recognize him and later apologizes to him. They soon start dating and Mahi eventually proposes marriage

24
to her.They marry and Mahi begins training for the <b>2011 World Cup</b>. He eventually develops the
team with new players. The film returns to the final where Mahi eases the pressure with a crucial innings.
With 4 runs required, Mahi hits a six and India wins the final. His family, friends and coaches watching the
match cry happy tears.<br>

After the credits, the real MS Dhoni walks by the boundaries.<br>

</p>
<hr>
<fieldset>
<legend ><h3>Cast</h3></legend>
<table border="1" width="100%">
<tr>
<td style="width:70%">
<ul>
<li><b>Sushant Singh Rajput</b> as <i>Mahi</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/SSR.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>
<li><b>Kiara Advani</b> as <i>Sakshi Singh Rawat,Mahi's wife</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/KA.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>
<li><b>Disha Patani</b> as <i>Priyanka Jha</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/DP.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>

<li><b>Anupam Kher</b> as <i>Paan Singh Dhoni,Mahi's father</i></li>

</ul>

25
 </td>
<td style="width:30%">
<img src="img/AN.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>
<li><b>Bhumika Chawla</b> as <i>Jayanti Gupta,Mahi's sister</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/BH_C.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>

<li><b>Kranti Prakash Jha</b> as Santosh Lalas</li>

</ul>
</td>
<td style="width:30%">
<img src="img/KPJ.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>
<tr>
<td style="width:70%">
<ul>
<li><b>Alok Pandey</b> as <i>Chittu,Dhoni's best friend</i></li>
</ul>
</td>
<td style="width:30%">
<img src="img/AP.png" style="width: 2in;height: 2in;"><br>
</td>
</tr>

</table>
</fieldset>
</main>

</body>
</html>

OUTPUT :
26
 PRACTICAL 2
(CSS)
2. Redesign page created in HTML practical 2 such that:
a. All divisions have a solid border of 2px.
b. Header and Footer division have aquamarine and dark blue
background color respectively and same font-style which are larger
than all other divisions.
c. Background color of the Navigation division should be aqua and
links of the pages should appear in UPPERCASE.
d. Background color of the message and notices division should be
light sky blue and text color should not be black. Message text
should be italic and notices should be bold.

CODE :
header{
background-color: aquamarine;
}

27
footer{
background-color: darkblue;
font-size: 20px;
font-family: cursive;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

div{
border:solid 2px black;
}
.nav {
height: 30px;
width: 100%;
border-width: 1px;
border: double 3px black;
margin-top: 15px;
padding-top: 10px;
padding-bottom: 30px;
background-color:aqua;
}

.nav li {
color: white;
text-decoration: none;
list-style: none;
margin-left: 20px;
margin-right: 20px;
float: left;
}

.nav a:hover {
color: rgb(0, 13, 255);
background-color: white;
}

iframe {
margin-top: 10px;
margin-left: 25px;
margin-bottom: 25px;
border-color: black;
border: 3px double rgb(32, 31, 31);
}

footer {

28
 border: 2px solid black;
width: 100%;
color: white;
font-size: 20px;
font-family: cursive;
}

tr {
padding-bottom: 30px;
}

img {
border: 3px double rgb(32, 31, 31);
}

.f {
height: 300px;
width: 100%;
margin-top: 0px;

border-width: 1px;
border-style: solid;

box-sizing: border-box;
}

OUTPUT :

29
30
31
 PRACTICAL 1
(JAVASCRIPT)
Write JavaScript to validate the form created by student in HTML practical 3
keeping in mind following constraints:
1) No text box or text area should be left blank.
2) Validate whether the Roll no. and Email of the student are in proper format.
3) Age must be in the range 16-22.
4) Photo must be a file of type jpg/jpeg/png.
5) Data will be sent to report.php page only if all these constraints are fulfilled
otherwise display corresponding errors.

CODE :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Student Details</title>
<style type="text/css">
fieldset{
border: 1px solid grey;
border-radius: 6px;
}
h1{

32
 background-color: lightblue;
color: white;
padding: 10px;
border-color: lightblue;
border-radius: 6px;
font-size: 45px;
}
select,input,textarea{
padding: 10px;
border: solid grey;
border-radius: 5px;
}
label{
font-size: 20px;
}
</style>
</head>
<body>
<center><h1>Student Details</h1></center>
<form action="report.php" method="get" onsubmit="return validate()">
<fieldset>
<legend><h2>Personal Details</h2></legend>
<label for="fname">Student Name*</label>
<input type="text" name="First Name" id="fname" placeholder="First Name"
required style="margin-left: 0.65em;width: 13.1em;">
<input type="text" name="Middle Name" id="mname" placeholder="Middle
Name" style="margin-left: 7.5em;width: 13.1em;">
<input type="text" name="Last Name" id="lname" placeholder="Last Name"
style="margin-left: 7.5em;width: 13.1em;"><br><br>
<label for="roll">Roll Number*</label>
<input type="number" name="roll" id="roll" style="margin-left:1.35em;width:
13.1em" placeholder="Roll Number" required><br><br>
<label for="email" style="margin-right: 0.35em;">Email Address*</label>
<input type="text" name="Email" id="email" required
style="width:13.1em"placeholder="abc@keshav.du.ac.in">
<label for="age" style="margin-left: 17.8em">Age*</label>
<input type="number" name="age" id="age" required
style="width:13.1em;"><br><br>
<label for="Gender" style="margin-right: 2.97em;">Gender*</label>

<input type="radio" value="Male" name="Gender" id="male">

<label for="male">Male</label>

<input type="radio" value="Female" name="Gender" id="female">

<label for="female">Female</label>

<input type="radio" value="Other" name="Gender" id="other">

<label for="other">Other</label><br><br>

<label for="mno">Mobile number*</label>

<input type="number" name="Mobile Number" id="mno" min="1000000000"
max="9999999999" required style="width: 13.1em"><br><br>

<label style="margin-right: 0.3em;">Societies Opted</label>

<input type="checkbox" name="society" value="Blitz" id="blitz">

33
 <label for="blitz">Blitz</label>
<input type="checkbox" name="society" value="Advaitaa" id="advaitaa">
<label for="advaitaa">Advaitaa</label>
<input type="checkbox" name="society" value="Anhad" id="anhad">
<label for="anhad">Anhad</label>
<input type="checkbox" name="society" value="Illuminati" id="illuminati">
<label for="illuminati">Illuminati</label>
<input type="checkbox" name="society" value="Maniera" id="maniera">
<label for="maniera">Maniera</label>
<input type="checkbox" name="society" value="Naksh" id="naksh">
<label for="naksh">Naksh</label>
<input type="checkbox" name="society" value="Nrityaang" id="nrityaang">
<label for="nrityaang">Nrityaang</label>
<input type="checkbox" name="society" value="Shades" id="shades">
<label for="shades">Shades</label>
<input type="checkbox" name="society" value="Spic-Macay" id="spic-macay">
<label for="spic-macay">Spic-Macay</label>
<input type="checkbox" name="society" value="Vagmita" id="vagmita">
<label for="vagmita">Vagmita</label>
<input type="checkbox" name="society" value="Debsoc" id="debsoc">
<label for="debsoc">Debsoc</label><br><br>
<label for="course" style="margin-right:3.35em">Course*</label>
<select name="course" required>
<option></option>
<option>B.A. (Hons) Applied Psychology</option>
<option>B.A. (Hons) Arabic</option>
<option>B.A. (Hons) Bengali</option>
<option>B.A. (Hons) Business Economics (BBE)</option>
<option>B.A. (Hons) Economics</option>
<option>B.A. (Hons) English</option>
<option>B.A. (Hons) French</option>
<option>B.A. (Hons) Geography</option>
<option>B.A. (Hons) German</option>
<option>B.A. (Hons) Hindi</option>
<option>B.A. (Hons) History</option>
<option>B.A. (Hons) Patrakarita Evam Jansanchar</option>
<option>B.A. (Hons) Italian</option>
<option>B.A. (Hons) Journalism</option>
<option>B.A. (Hons) Music</option>
<option>B.A. (Hons) Persian</option>
<option>B.A. (Hons) Philosophy</option>
<option>B.A. (Hons) Political Science</option>
<option>B.A. (Hons) Psychology</option>
<option>B.A. (Hons) Punjabi</option>
<option>B.A. (Hons) Sanskrit</option>
<option>B.A. (Hons) Social Work</option>
<option>B.A. (Hons) Sociology</option>
<option>B.A. (Hons) Spanish</option>
<option>B.A. (Hons) Urdu</option>
<option>B.A. (Hons.) Hindi Journalism and Mass
Communication</option>
<option>B.A. Functional Hindi</option>
<option>B.A. Vocational Studies</option>
<option>B.Ed.</option>
<option>B.Ed. Home Science</option>
<option>B.Sc. (Genl) Mathematical Science</option>

34
 <option>B.Sc. (Hons.) Instrumentation</option>
<option>B.Sc. (Hons) Anthropology</option>
<option>B.Sc. (Hons) Bio-Chemistry</option>
<option>B.Sc. (Hons) Biomedical Science</option>
<option>B.Sc. (Hons) Chemistry</option>
<option>B.Sc. (Hons) Botany</option>
<option>B.Sc. (Hons) Computer Science</option>
<option>B.Sc. (Hons) Electronics</option>
<option>B.Sc. (Hons) Food Technology</option>
<option>B.Sc. (Hons) Geology</option>
<option>B.Sc. (Hons) Home Science</option>
<option>B.Sc. (Hons) Mathematics</option>
<option>B.Sc. (Hons) Microbiology</option>
<option>B.Sc. (Hons) Physics</option>
<option>B.Sc. (Hons) Polymer Science</option>
<option>B.Sc. Applied Life Sciences with Agro-Chemical & Pest
Management</option>
<option>B.Sc. (Hons) Statistics</option>
<option>B.Sc. (Hons) Zoology</option>
<option>B.Sc. Applied Life Sciences</option>
<option>B.Sc. (Hons.) Biological Sciences</option>
<option>B.Sc. (MT) Radiography</option>
<option>B.Sc. Applied Science</option>
</select><br><br>
<label for="address" style="margin-right: 2.9em;">Address*</label>
<textarea name="address" id="address" required style="width:55%;height:
80px;resize: none;vertical-align: middle;"></textarea><br><br>
<label for="photo" style="margin-right:0.5em">Upload Image*</label>
<input type="file" name="photo" id="photo" required accept="image/*">
</fieldset>
<center><input type="submit" name="Submit" value="Submit" style="margin-right: 2em;
background-color: lightblue;color: grey;margin-top: 2em;cursor: pointer;">
<input type="reset" name="Reset" value="Reset" style="margin-left: 2em;
background-color: lightblue;color: grey;margin-top: 2em;cursor: pointer;"></center>
</form>
<script>
function validate() {
let inputs=document.querySelectorAll("input");
const gen=[],soc=[];
let temp=0,temp1=0;
for(let i=0;i<inputs.length;i++)
{
if(inputs[i].value=="")
{
alert("Please fill all fields.");
return false;
}
if(inputs[i].type=="radio")
gen[temp++]=inputs[i];
if(inputs[i].type=="checkbox")
soc[temp1++]=inputs[i];
}
if(gen[0].checked||gen[1].checked||gen[2].checked)
{
if(soc[0].checked||soc[1].checked||soc[2].checked||soc[3].checked||soc[4].checked||
soc[5].checked||soc[6].checked||soc[7].checked||soc[8].checked||soc[9].checked||soc[10].checked)

35
 {
let roll=document.getElementById('roll').value;
if(roll.length!=4)
{
alert("Enter valid Roll number of 4 digits");
return false;
}
let email=document.getElementById('email').value;
let temp_email=email.split("@");
if(temp_email.length!=2)
{
alert("Enter valid Keshav email id");
return false;
}
if(temp_email[1]!="keshav.du.ac.in")
{
alert("Enter valid Keshav email id");
return false;
}
let age=document.getElementById('age').value;
if(age<16||age>22)
{
alert("Enter valid Age between 16-22");
return false;
}
let photo=document.getElementById('photo').value;
let ext=photo.split(".");
ext=ext[ext.length-1];
if(ext=="jpg"||ext=="jpeg"||ext=="png")
{
alert("All entries valid");
return true;
}
else
{
alert("Upload valid image type i.e jpg/jpeg/png");
return false;
}
}
else{
alert("Select atleast one society");
return false;
}
}
else{
alert("Select Gender");
return false;
}
}
</script>
</body>
</html>

36
 OUTPUT

PRACTICAL 2
(JAVASCRIPT)

37
Write JavaScript to show the usage of setInterval function using which background
color of a division keeps on changing to a random color every 2 seconds. Also use
setTimeout function to show the content of a textbox as label of large size after 3
seconds.

CODE :
<!DOCTYPE html>
<head>
<title>
Practiacl_que3_javascript
</title>
<style>
#div{
height:150px;
width: 100%;
border-width: 2px;
border-color: black;
border-style: double;
background-color:aqua;
font-size: 45px;
padding-top: 50px;
}
</style>
</head>
<body>
<CENTER><h3>
NAME : JAMES BOND<br>
ROLL NO.: 007
</h3></CENTER>
<center><div id="div">COLOR CHANGE IN 2 SECONDS</div></center><br><br><br>
<input type="text" id="text" name="text" value="Will changeSize in 3 seconds">
<script>
var i=0;
var colors=["red", "blue", "yellow", "navy", "orange", "green", "aqua","coral"];

function changeColor(){
document.getElementById('div').style.backgroundColor=colors[i];
i++;
}
setInterval(changeColor,2000);

function changeSize(){
document.getElementById('text').style.fontSize= "28px";
}
setTimeout(changeSize,3000);

</script>
</body>

38
</html>

OUTPUT

PRACTICAL 3
(JAVASCRIPT)
39
Prompt user to enter his name and add it to cookies. If the user is new user then
show an alert box stating Welcome otherwise display Welcome again . Cookies
should get removed already after 24 hours.

CODE :
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookies</title>
</head>

<body style="background-color: rgb(60, 122, 146);">

<input type="button" name="ForgetButton" value="FORGET ME!" onclick="forgetMe()">
<script>
//FUNCTION FOR GETTING THE NAME OF LAST USER
function getCookie(cookieName) {
let cookieValue = "";
if (document.cookie) {
let cookies_string = document.cookie;
let cookieArr = cookies_string.split(';');
for (let i = 0; i < cookieArr.length; i++) {
let cookie = cookieArr[i].trim();
if (cookie.startsWith(cookieName)) {
let position = cookie.indexOf("=");
cookieValue = cookie.slice(position + 1);
}
}
}
return cookieValue;
}
//FUNCTION FOR SETTING THE COOKIE
function setCookie(cname, cvalue, exdays) {
const day = new Date();
day.setTime(day.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires=" + day.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function forgetMe() {
delCookie("lastuser");
}
let currentUser = prompt("ENTER YOUR NAME : ");
let lastuser = getCookie("lastuser");
if (lastuser == currentUser)
alert("WELCOME AGAIN " + currentUser)

40
else {
alert("WELCOME " + currentUser);
setCookie("lastuser", currentUser);
}

</script>
</body>
</html>

OUTPUT :

41
 PRACTICAL 1
(PHP)
Write PHP script to construct the following pattern using nested for loop.
*******
*** ***
** **
* *
** **
*** ***
*******

CODE :
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookies</title>
</head>

<body style="background-color: rgb(60, 122, 146);">

<input type="button" name="ForgetButton" value="FORGET ME!" onclick="forgetMe()">
<script>
//FUNCTION FOR GETTING THE NAME OF LAST USER
function getCookie(cookieName) {
let cookieValue = "";
if (document.cookie) {
let cookies_string = document.cookie;
let cookieArr = cookies_string.split(';');
for (let i = 0; i < cookieArr.length; i++) {
let cookie = cookieArr[i].trim();
if (cookie.startsWith(cookieName)) {
let position = cookie.indexOf("=");
cookieValue = cookie.slice(position + 1);
}
}
}
return cookieValue;
}

42
//FUNCTION FOR SETTING THE COOKIE
function setCookie(cname, cvalue, exdays) {
const day = new Date();
day.setTime(day.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires=" + day.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function forgetMe() {
delCookie("lastuser");
}
let currentUser = prompt("ENTER YOUR NAME : ");
let lastuser = getCookie("lastuser");
if (lastuser == currentUser)
alert("WELCOME AGAIN " + currentUser)
else {
alert("WELCOME " + currentUser);
setCookie("lastuser", currentUser);
}

</script>
</body>
</html>

OUTPUT :

43
 PRACTICAL 2
(PHP)
Accept a number from an HTML page and send it to a PHP file. Validate that this
number is a positive integer in the range 2-100. PHP file should check whether this
number is prime or composite. If number is found prime then Fibonacci series till
that element is also printed otherwise factorial of that number is to be printed.
CODE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

44
 <title>PRACTICAL 2</title>
<style>
*{
padding: 3px;
margin: 10px;
box-sizing: border-box;
}

div {
max-width: 800%;
margin: auto;
background-color: rgb(222, 200, 243);
}
</style>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<div>

ENTER NUMBER : <input type="text" name="num">

<br>
<center><input type="submit" value="submit"></center>
</div>
</form>
<?php
function Fibonacci($n){
$num1 = 0;
$num2 = 1;

$counter = 0;
while ($counter < $n){
echo ' '.$num1;
$num3 = $num2 + $num1;
$num1 = $num2;
$num2 = $num3;
$counter = $counter + 1;
}
}
function Factorial(int $num)
{
$fact = 1;
if ($num == 0) {
return 1;
} else {
for ($i = 1; $i <= $num; $i++) {
$fact = $fact * $i;
}
return $fact;
}
}

$flag =true;
if($_SERVER["REQUEST_METHOD"]=="POST"){
$number = $_POST['num'];
if($number>=2 && $number<=100){

45
 for($i=2;$i<=sqrt($number);$i++){
if($number%$i==0){
$flag=false;
}
}
if($flag==false){
echo "FACTORIAL OF ".$number ." IS : ";
echo Factorial($number);
}
else{
echo "FIBPNACCI TILL ".$number." is : ";
Fibonacci($number);
}

}
else if($number<0){
echo "PLEASE ENTER A POSITIVE NUMBER";
}
else{
echo "RANGE IS 2-200";
}
}

?>
</body>
</html>

OUTPUT :

46
 PRACTICAL 3
(PHP)

Write a PHP file colors.php which declares an array of ten colors names. Every time this file is
accessed a random color from this array should be chosen and same is to be set as the
background color of a division.

CODE :

<?php
$background_colors = array('yellow','orange','brown','pink','violet','purple','red', 'blue','black', 'green');
$rand_background = $background_colors[array_rand($background_colors,1)];
?>
<html>
<head>

</head>
<body>
<div style="background: <?php echo $rand_background; ?>;">
<center><h1>BACKGROUND WILL CHANGE <h1></center>
</div>
</body>
</html>

OUTPUT:

47
 PRACTICAL 4
(PHP)

Create a login page asking for user name and password from. On
submitting these details, a welcome message should be displayed if the
user already exists in the database. Otherwise an error message is to be
displayed.

Connecting to database:
CODE :
<?php
$servername = "localhost";
$username = "root";
$password = "";
// $database = "PRACT4";

$con = new mysqli($servername,$username,$password);

48
 if($con->connect_error){
die("connection failed " . $con->connect_error);
}
else{
echo "Successfully Connected ";
echo "<br/>";
}

$sql= "CREATE DATABASE PRACT4";

if($con->query($sql)==true){
echo "DATABASE CREATED SUCESSFULLY";
}
else{
echo "ERROR IN CREATING : " . $conn->error;
}
?>

$servername = "localhost";
$username = "root";
$password = "";
$database = "PRACT4";

$con = new mysqli($servername,$username,$password,$database);

$sql = "CREATE TABLE users (

user varchar(100) NOT NULL
)";
if ($con->query($sql) === TRUE) {
echo "TABLE CREATED SUCESSFULLY";
}
else{
echo "ERROR IN CREATING : " . $con->error;
}
?>

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "PRACT4";

$con = new mysqli($servername,$username,$password,$database);

$sql = "INSERT INTO users VALUES(

'PINKI'),('KAJAL'),('PRERNA'),('SHITAL');";
if($con->query($sql)==true){
echo "values are inserted ";
}

49
 else{
echo "error inserting values " . $con->error;
}
?>

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "PRACT4";

$con = new mysqli($servername,$username,$password,$database);

$sql = "ALTER TABLE users

ADD password varchar(255);
";
if($con->query($sql)==true){
echo "VALUE ADDED. ";
}
else{
echo "ERROR IN ADDING . " . $con->error;
}

$sql = "INSERT INTO users(password)

VALUES('no_energy'),('best'),('perfect'),('loving');";

if($con->query($sql)==true){
echo "PASSWORD IS ADDED";
}
else{
echo "ERROR IN ADDING PASSWORD " . $con->error;
}
?>

<html>
<head>
<style>
*{
padding: 3px;
margin: 10px;
box-sizing: border-box;
}

div {
max-width: 800%;
margin: auto;
background-color: rgb(222, 200, 243);
}
</style>
</head>
<body>
<br>

50
 <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
<div><label for="">USERNAME : </label>
<input type="text" name="username">
<br>
<br>
<label for="">PASSWORD : </label>
<input type="password" name="password">
<br><br>
<input type="submit" value="SUBMIT">
</div>
</form>

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "PRACT4";

$con = new mysqli($servername,$username,$password,$database);

if($_SERVER["REQUEST_METHOD"]=="GET"){
$name = $_GET["username"];
$pass= $_GET['password'];

$query = "SELECT user FROM users WHERE password = '$pass'";

$result = $con->query($query);

if ($result) {
if (mysqli_num_rows($result) > 0) {
echo 'WELCOME : ' . $name;
}
else {
echo 'NOT RESGISTERED';
}
}
else {
echo 'Error' . mysqli_error();
}
}

?>

</body>
</html>

OUTPUT :

51
 PRACTICAL 5
(PHP)
Create a table student_details in MySql which is capable of storing the information
which is being passed in HTML practical 3. Write PHP code in a file named
report.php which validates all the data and then stores it in table and displays the

52
same. After insertion of the entries in the database, an alert box should be
displayed stating whether the insertion was successful or not.

CODE :

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>

<title>College Form</title>
<style>
*{
padding: 3px;
margin: 10px;
box-sizing: border-box;
}

.form{
max-width: 90%;
margin: auto;
background-color: rgb(222, 200, 243);
margin: 20px;
}

h1 {
margin: none;
text-align: center;
padding: none;
}
input {
margin-left: 30px;
}
button {
background-color:burlywood;
}
button:hover {
background-color:brown;
color: whitesmoke;
}
.form_error {
color: red;
}
</style>

</head>
<body>

<div class="form">
<form name="collegeform" onsubmit="return validateForm()" action="/phpass/report2.php"
method="post">
<h1>College Form</h1>

53
 <hr>
<?php

/*$sql= "CREATE DATABASE collegeform";

if($con->query($sql)==true){
echo "database created successfully";
}
else{
echo "Error creating database: " . $conn->error;
}*/

/*$sql = "CREATE TABLE info (

field varchar(150) NOT NULL,
Value varchar(500) NOT NULL
)";
if ($con->query($sql) === TRUE) {
echo "Table users created successfully";
}
else {
echo "Error creating table: " . $con->error;
}*/

if($_SERVER["REQUEST_METHOD"]=="POST"){
echo '<script>alert("successfully inserted")</script>';
$servername = "localhost";
$username = "root";
$password = "";
$database = "collegeform";

$con = new mysqli($servername,$username,$password,$database);

if($con->connect_error){
die("connection failed " . $con->connect_error);
}
else{
echo "successfully connected " . "<br/>";
}
$name = $_POST["name"];
$roll= $_POST["roll_num"];
$email = $_POST["email"];
$age=$_POST["age"];
$gender = $_POST["gender"];
$society=$_POST["societies"];
$course =$_POST["course"];
$address= $_POST["address"];
$image=$_POST["img"];

$sql = "INSERT INTO info(field,Value) VALUES

('name','$name'),('roll no.','$roll'),('email','$email'),('age','$age'),('gender','$gender'),
('societies','$society'),('course','$course'),('address','$address'),('file','$image');";

$flag =false;

54
 if($con->query($sql)==true){
echo "values are inserted ";
$flag=true;

}
else{
echo "error inserting values " . $con->error;
}
if($flag==true){
$result = "SELECT field,Value FROM info";
$output=$con->query($result);
if ($output->num_rows > 0) {
// output data of each row
?>
<style>

tr,td {
border: 1px solid black;
width: 50%;

}
</style>

<?php
while($row = $output->fetch_assoc()) {

?>
<html>
<table style="width:50%">
<tr>
<td>
<?php echo $row["field"];?>
</td>
<td>
<?php echo $row["Value"];?>
</td>
</tr>
</table>
</html>
<?php }
}
else{
echo "0 result found";
}
}

}
?>

<CENTER><h3>
NAME : PINKI KUMARI<br>
ROLL NO.: CSC/21/25
</h3></CENTER>
<p><strong>Required values are followed by * </strong></p>

55
<div>
<label for="your_name">Name: * </label>
<input type="text" id="your_name" name="name">
</div>
<br>
<div>
<label for="roll">Roll number: * </label>
<input type="text" id="roll" name="roll_num"> <span class="form_error"></span>

</div>
<br>
<div >
<label for="email">Email: * </label>
<input type="text" id="email" name="email"><span class="form_error"></span>
</div>
<br>
<div>
<label for="age">Age: * </label>
<input type="number" name="age" id="age"><span class="form_error"></span>
</div>
<br>
<div>
<h3>Gender</h3>

<input type="radio" name="gender" id="female" value="female">

<label for="female">Female</label>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="other" value="other">
<label for="other">other</label>

</div>
<br>
<div>
<h3>Societies</h3>
<input type="checkbox" name="societies" id="Techpioneers">
<label for="Techpioneers">Techpioneers</label>
<br>
<input type="checkbox" name="societies" id="enactus">
<label for="enactus">Enactus</label>
<br>
<input type="checkbox" name="societies" id="FIC">
<label for="FIC">FIC</label>
<br>
<input type="checkbox" name="societies" id="Startup">
<label for="startup">Startup</label>
<br>
<input type="checkbox" name="societies" id="nss">
<label for="nss">NSS</label>

</div>
<br>
<div>
<label for="course">Choose your course : </label>

56
 <select name="course" id="course">
<option value="Computer Science (H)">Computer Science(H)</option>
<option value="B Com (prog.)">B Com (program)</option>
<option value="B Com (H)">B Com (H)</option>
<option value="Eco (H)">Eco (H)</option>
<option value="BMS">BMS</option>
<option value="Maths (H)">Maths (H)</option>
</select>

</div>
<br>
<div>
<p><label for="address">Permanent address: *</label></p>
<textarea type="textarea" name="address" id="address" rows="3" cols="70"></textarea>

</div>
<br>
<div>
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/png, image/jpeg,image/jpg">
</div>
<br>
<div>
<button type="submit" value="Submit">Submit</button>
</div>

</form>
</div>
<script src="prac5.js"></script>

</body>
</html>

PRACTICAL 6
(PHP)

Write PHP code in a file named db.php which fetches the data from student_details
table and displays the data in tabular way.

57
CODE :
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "db";

$con = new mysqli($servername,$username,$password,$database);

if($con->connect_error){
die("connection failed " . $con->connect_error);
}
else{
echo "successfully connected " . "<br/>";
}

echo "Reading from table student_details <br/>";

$sql = "SELECT student_name,student_id,course FROM stU";
$result = $con->query($sql);

if ($result->num_rows > 0) {

?>
<style>

th,tr,td {
border: 1px solid black;
width: 20%;
padding: 20px;

}
table {
width:60%;
padding: 20px;
}
</style>
<html>
<table>
<tr>
<th>student_name</th>
<th>student_id</th>
<th>course</th>
</tr>

<?php
while($row = $result->fetch_assoc()) {

?>

<tr>
<td>
<?php echo $row["student_name"];?>
</td>
<td>

58
 <?php echo $row["student_id"];?>
</td>
<td>
<?php echo $row["course"];?>
</td>
</tr>

<?php }

}
else{
echo "0 result found";
}
?>
</table>
</html>

59