Download as pdf or txt
Download as pdf or txt
You are on page 1of 56

INDRAPRASTHA COLLEGE FOR WOMEN

WEB DEVELOPMENT

PRACTICAL FILE

SUBMITTED BY: SIMRAN VISHISHT


SUBMITTED TO:
ROLL NO: 21/CS/48
SEMESTER: III
HTML
1. Create an HTML Page showing information about your favourite 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,
genre, 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.
ANSWER:
<!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>QUESTION1</title>
</head>
<body>
<center><h1>Dear Zindagi</h1>

<img src="https://m.media-amazon.com/images/I/81JGFBE8ZaL._SL1500_.jpg" alt="picture


of dear zindagi" height="400"/>

<p>Dear Zindagi (transl. Dear life) is a 2016 Indian Hindi-language coming-of-age


drama film written and directed by Gauri Shinde. It was produced by Gauri Khan, Karan
Johar, and Shinde under the banners of Red Chillies Entertainment, Dharma Productions, and
Hope Productions respectively. The film stars Alia Bhatt in the lead role with Shah Rukh
Khan, Ira Dubey, Kunal Kapoor, Angad Bedi, Ali Zafar, Yashaswini Dayama and Rohit Suresh
Saraf in supporting roles. The plot centres on a budding cinematographer who is
discontented with her life and meets a free-spirited psychologist who helps her to gain a
new perspective on her life.</p>
<img src="https://upload.wikimedia.org/wikipedia/en/9/9e/Dear_Zindagi_poster.jpg"
alt="picture of dear zindagi" height="400"/>

<p>Development of the film began in 2015, when Shinde signed Bhatt and Khan for a film
to be made under her banner. Principal photography took place in Goa and Mumbai, in the
period from 21 January to 20 May 2016. The film features a score composed by Amit Trivedi
and lyrics written mostly by Kausar Munir.Development of the film began in 2015, when
Shinde signed Bhatt and Khan for a film to be made under her banner. Principal photography
took place in Goa and Mumbai, in the period from 21 January to 20 May 2016. The film
features a score composed by Amit Trivedi and lyrics written mostly by Kausar Munir.
</p>
<br>
<h2><b><u>Plot</u></b></h2></center>
<p >Based in Mumbai and Goa, Kaira is a promising cinematographer who dreams of
directing her own films. Blunt and cynical, she is most comfortable when with her three
best friends, Fatima, Jackie and Ganju. Kaira's life takes a downturn when she sleeps with
Raghuvendra, a film producer and then breaks up with her childhood sweetheart Sid, a
restobar owner. Raghu then gets engaged to his ex. Her landlord then evicts her out of her
apartment because the building association wants to rent apartments to married couples and
families only. All this, plus dissatisfaction with her prospects at work serves as a
catalyst for Kaira's shift to Goa, where she now has to grudgingly live with her parents
with whom she has some issues. She ends up spending many sleepless nights in unhappiness
and uncertainty.

While in Goa, Kaira seeks out Dr. Jehangir "Jug" Khan, a psychologist, for her
insomnia after inadvertently having heard him talk at a Mental Health Awareness
Conference. She warms to Jug's unconventional methods, trying to use them to understand
herself. Meanwhile, she meets a musician, Rumi, and falls in love with him, but they break
up before anything serious can happen when she realises they may not be the right fit for
each other. During this time, Kaira reunites with her younger brother, Kiddo, who is the
only other person besides her best friends that she is closest to. Matters with her family
come to a head when Kaira has an outburst at a family get-together where she confronts her
parents about them abandoning her for years at her grandparents' house.

Kaira finally narrates the story of her abandonment to Jug, who tells her that she
fears abandonment so much that she does not allow herself to commit in relationships,
leaving before they can leave her. He convinces her that she does not need to forgive her
parents for abandoning her in her childhood but as an adult, have the maturity to see them
as two regular people who are capable of making mistakes, like everyone else. After this,
Kaira makes an effort to reconcile with her parents and also works to finish her short
film.

At their last session, Kaira admits to Jug that she has grown to like and love
him. Jug responds that it is normal for a patient to feel this way about their therapist
and while he likes her platonically, a relationship would not be possible between them.
The two share a hug before Kaira leaves.

Kaira finally completes her short film, which she had been working on for years.
At the premiere, her friends, family, and exes are present to cheer her on. This is where
Kaira meets a furniture designer, and strikes a conversation with him.</p>

<center><h2><b><u>Cast</u></b></h2>
<h4>1.ALIA BHATT</h4><br>
<img src="https://img.staticmb.com/mbcontent//images/uploads/2022/8/alia-bhatt-
house.jpg" alt="picture of alia bhat" height="200"/><br>
<p>Alia Bhatt as Kaira, who is also referred to as "Sirat". During her interview
with Bombay Times, Bhatt spoke about her role. She said that playing the role of Kaira was
altogether a very different experience.</p>
<h4>2.SHAH RUKH KHAN</h4><br>
<img
src="https://filmfare.wwmindia.com/content/2020/jul/shahrukhkhan41596116759.jpg"
alt="picture of srk" height="200"/><br>
<p>
Shah Rukh Khan as Dr. Jehangir "Jug" Khan, a psychologist who helps Kaira find
answers to her life's problems. He describes his role by saying, "I am a support in the
film, more like an extended cameo. I am very glad to be in this film. I have never played
such a role in my entire career."
</p>
<h4>3.KUNAL KAPOOR</h4><br>
<img
src="https://images.yourstory.com/cs/7/3fb20ae02dc911e9af58c17e6cc3d915/Kunal-Kapoor---2-
1596778487175.png?fm=png&auto=format" alt="picture of srk" height="200"/><br>
<p>
Kunal Kapoor as Raghuvendra, a film producer, one of Kaira's former
boyfriends
</p>

<h4>4.ANGAD BEDI</h4><br>
<img src="https://wikibio.in/wp-content/uploads/2019/01/Angad-Bedi-
Image.jpg" alt="picture of angad bedi" height="200"/>
<p>
Angad Bedi as Sid, a restobar owner, one of Kaira's former boyfriends

</p>
<h4>5.ALI ZAFAR</h4><br>
<img src="https://sm.mashable.com/t/mashable_me/photo/default/33-
26_bepj.1248.jpg" alt="picture of ali zafar" height="200"/><br>
<p>
Ali Zafar as Rumi, a musician and singer-songwriter, who is one of
Kaira's former boyfriend
</p>
<h4>6.IRA DUBEY</h4><br>
<img src="http://starsunfolded.com/wp-content/uploads/2016/11/Ira-
Dubey.jpg" alt="picture of ira dubey" height="200"/><br>

<p>Ira Dubey as Fatima, Kaira's friend, who is also referred to as


"Fatty"
Rohit Suresh Saraf as Kiddo, Kaira's younger brother</p>

<h4>7.ROHIT SURESH</h4><br>
<img src="https://wikibio.in/wp-content/uploads/2019/10/Rohit-
Saraf-Image.jpg" alt="picture of rohit suresh" height="200"/><br>

<p>
Rohit Suresh Saraf as Kiddo, Kaira's younger brother
</p>

<h4>8.YASHASWINI DAYAMA</h4><br>
<img src="https://failurebeforesuccess.com/wp-
content/uploads/2021/10/yashaswini-dayama-2.jpg" alt="picture of Yashaswini Dayama"
height="200"/><br>
<p>Yashaswini Dayama as Jackie, Kaira's friend</p>

<br>
<h2><u>Similar Movies</u></h2>

<p>1. KARTHIK CALLING KARTHIK:


<a href="https://en.wikipedia.org/wiki/Karthik_Calling_Karthik"
target="_main">movie description on wikipedia</a>
</p>
<p>2. 2. BARFI:
<a href="https://en.wikipedia.org/wiki/Barfi!" target="_main">movie
description on wikipedia</a>
</p>
<p>3.Taare Zameen Par:
<a href="https://en.wikipedia.org/wiki/Taare_Zameen_Par"
target="_main">movie description on wikipedia</a>
</p>
<p>4. PHOBIA
<a href="https://en.wikipedia.org/wiki/Phobia" target="_main">movie
description on wikipedia</a>
</p>
<p>5. JUDGEMENTALL HAI KYA
<a href="https://en.wikipedia.org/wiki/Judgementall_Hai_Kya"
target="_main">movie description on wikipedia</a>
</p></center>

</body>
</html>

OUTPUT:
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 store other relevant information.
d. Message division must contain image and name of the principal along
with the message.
e. Notice division must display different notices in an unordered list.
f. Gallery division must display images of past events or building of the
college.
g. Footer division must show contact information of the college.
ANSWER:
<!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>Question2</title>

<frameset rows="11%,6%,50%,26%,7%" >


<frame src="Header.html" name="Header" scrolling ="no">
<frame src="Navigation.html" name="Navigation">

<frameset cols="50%,50%">
<frame src="Message.html" name="Message" scrolling="no"></frame>
<frame src="Notice.html" name="Notice"></frame>
</frameset>

<frame src="Gallery.html" name="Gallery"></frame>


<frame src="Footer.html" name="Footer"></frame>
</frameset>
</head>
</html>

Header.html
<!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>Document</title>
</head>
<body>
<img align="left" src="https://storage.googleapis.com/ezap-
prod/colleges/5648/indraprastha-college-for-women-new-delhi-logo.jpg" height="60">
<center><p><b><big>Indraprastha College for Women</big>
<br> <br>University of Delhi
</b></p>
</center>
</body>
</html>

Navigation.html
<!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>Document</title>
</head>
<body>
<a href="academics" target="_main"> Academics
</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a
href="http://www.ipcollege.ac.in/Datafiles/cms/file/Admission/Prospectus/IP%20HOSTEL%20PRR
OSPECTUS%202022-23.pdf"
target="_main">Hostel</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="http://www.ipcollege.ac.in/Viewtopics.aspx?MenuId=14382_Examination"
target="_main">Examination</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbs
p; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="report" target="_main">Student
Report</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a
href="http://www.ipcollege.ac.in/Datafiles/cms/file/Admission/Prospectus/IP%20HOSTEL%20PRR
OSPECTUS%202022-23.pdf"
target="_main">Hostel</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="http://www.ipcollege.ac.in/Viewtopics.aspx?MenuId=14382_Examination"
target="_main">Examination</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbs
p; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="report" target="_main">Student Report</a>
</body>
</html>

Message.html
<!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>Document</title>
</head>
<body>
<p><b>Principal's Desk</b></p>
<center><img src="http://www.ipcollege.ac.in/DataFiles/Content/39_Dr.Rekha%20Sethi.jp
g" height="90">

<p><small><b>Prof. Rekha Sethi<br>


M.Phil (Hindi), Ph.D. (Hindi)</b><br> Welcome to Indraprastha College for Women.
You have just embarked on a journey of discovery and revelation, a journey that is as much
about you as it is about the larger world that you inhabit. Here in IP, embraced by its
natural beauty, nurtured by its ideals of women’s emancipation and empowerment, you will
find the space where you can explore, express, and realize yourself.<br>

The College with its infrastructure and facilities is at your disposal to help you
grow and develop, to enable yourselves and become independent and confident young women
who can take on the world on their terms. <br>
IP College is about you. You are at the center of its vision: a vision which
upholds the values of equality and harmony, while it continues to mainstream the
marginalized, even as it pursues the goals of academic excellence.Come, let us walk that
exciting path together.

</p>
</center>
</span>

</body>
</html>

Notice.html
<!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>Document</title>
</head>
<body> <b>NOTICES:</b>
<ul>ADMISSION 22-23
<li><a
href="http://www.ipcollege.ac.in/ViewpagePAnel.aspx?MenuId=UG_Admissions_14378"
target="_main">UG Admissions</a></li>
<li><a
href="http://www.ipcollege.ac.in/ViewpagePAnel.aspx?MenuId=14382_Hostel_Admissions"
target="_main">Hostel Admissions</a></li>
</ul>
<ul>DEPARTMENTS:
<li><a href="https://sites.google.com/view/ananta-thesciencesociety/?pli=1"
target="_main">Science Society</a></li>
<li><a href="https://sites.google.com/ip.du.ac.in/environmental-studies/faculty-
profile/research-publications" target="_main">Environmental-studies</a></li>
<li><a href="https://sites.google.com/a/ip.du.ac.in/english/faculty-
profile_1/research-and-publications"target="_main">English</a></li>
<li><a href="https://sites.google.com/ip.du.ac.in/economics/faculty-
profile/research-and-publications" target="_main">Economics</a></li>
<li><a href="https://sites.google.com/ip.du.ac.in/computerscience/faculty-
profile/research-and-publications" target="_main">Computer Science</a></li>
<li><a href="https://sites.google.com/ip.du.ac.in/commerce/faculty-
profile/research-publications" target="_main">Commerce</a></li>

</ul>

<ul>AWRDS & HONORS:


<li><a
href="http://www.ipcollege.ac.in/ViewpagePAnel.aspx?MenuId=Final_Report_of_Major_Research_
Project_1908" target="_main">Final report of Major research project</a></li>
<li><a
href="http://www.ipcollege.ac.in/ViewpagePAnel.aspx?MenuId=Research_awards_and_recognition
_received_by_faculty_477" target="_main">Research awards and recognition received by
faculty</a></li>
<li><a
href="http://www.ipcollege.ac.in/ViewpagePAnel.aspx?MenuId=National_and_State_level__award
s_received_by_faculty_516" target="_main">National and State level awards received by
faculty</a></li>
</ul>
</body>
</html>

Gallery.html
<!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>Document</title>
</head>
<body>
<figure align="center"><figcaption><p style="text decoration:underline;font-
weight: bolder; text-align: center; font size: 25px;">Gallery</p></figcaption>

<img
src="https://static.zollege.in/public/college_data/images/appImage/16478544121444125990IPC
GNEW.jpg?tr=h-250,w-400,c-force" style="width: 300px;height: 110px;">
<img src="https://www.universitytimes.in/wp-content/uploads/2022/04/ipcw.jpg"
style="width: 300px;height: 110px;">
<img
src="https://cache.careers360.mobi/media/colleges/reviews/2021/3/29/150534/942CE0BF-20C5-
4698-BD86-567C17B59ADB.jpeg"style="width: 300px;height: 110px;" >
<img
src="https://cache.careers360.mobi/media/colleges/reviews/20160909_113631.jpg"style="width
: 300px;height: 110px;">

</body>
</html>

Footer.html
<!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>Document</title>
</head>
<body>
<b>Contact Number:</b>011 2396 2009 &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &n
bsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
<b>Email Address:
</b>ipcw@ip.du.ac.in &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbs
p;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;
<b>Postal address:</b>31, Sham Nath Marg, Civil Lines, Delhi, 110054<br></small>
</body>
</html>

OUTPUT:

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.
ANSWER:
<!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>Question_3</title>
</head>
<body>
<center><h1><u><b>Student Identity</b></u></h1><br> <br>
<form method="get" action="report.php">
STUDENT NAME: <input type="text" placeholder="enter your name"
id="fname"/><br><br><br>
LAST NAME: <input type="text" placeholder="enter your last name"
id="l_name"/><br><br><br>

ROLL NUMBER: <input type="text" placeholder="enter your roll no."


id="roll"/><br><br><br>

STUDENT'S EMAIL ID: <input type="text" placeholder="enter your email id."


id="main"/><br><br><br>

STUDENTS AGE: <input type="number" placeholder="enter your age"/


id="age"><br><br><br>

GENDER: <input type="radio" name="gender" value="male"id="gender"/>Male

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

<input type="radio" name="gender" value="others" id="gender"/>Others


<br><br><br>

SOCITIES (Student wish to join): <input type="checkbox" name="societies"


value="Dancing" id="societies"/> Dancing
<input type="checkbox" name="societies" value="Singing" id="societies"/> Singing
<input type="checkbox" name="societies" value="DRAMA" id="societies"/> Drama
<input type="checkbox" name="societies" value="Science" id="societies"/>
Science</label>
<input type="checkbox" name="societies" value="Art" id="societies"/> Art
<br><br><br>

SELECT COURSE: <select name="course">


<option value="choose">choose</option>
<option value="B.Sc(Hons)Computer Science">B.Sc(Hons)Computer Science</option>
<option value="B.Sc(Hons)MATHEMATICS">B.Sc(Hons)MATHEMATICS</option>
<option value="B.Sc(Hons)CHEMISTRY">B.Sc(Hons) CHEMISTRY</option>
<option value="B.Sc(Hons)Physics">B.Sc(Hons)Physics</option>
<option value="B.A.(Hons)History">B.A.(Hons)History </option>
</select><br><br><br>

ADDRESS OF THE STUDENT: <br><textarea name="address" placeholder="Enter your


address" col=66 rows=6></textarea><br><br><br>

UPLOAD STUDENT'S PHOTO: <input type="file" name="PHOTOFILE"/><br><br><br>


<input type="submit" value="Submit" onclick="alert('THANKYOU')"/>

</form>
</center>
</body>
</html>

OUTPUT:

CSS
1. 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.
ANSWER:
<!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>Document</title>
<style>
body{
background-color: aqua;
}
#firstHeading{
font-family: Calisto MT;
font-size: 52px;
font-style: italic;
color: darkblue;
text-align: center;
}

p{
font-family: Garamond;
text-align: center;
}
h2{
font-family: Papyrus;
color: darkblue;
font-size: 33px;
}
#yes{
font-family: Garamond;
text-align: left;
}
img{
border: 1px solid red;
}
</style>
</head>

<body>
<h1 id="firstHeading">Dear Zindagi</h1>

<center><img src="https://m.media-amazon.com/images/I/81JGFBE8ZaL._SL1500_.jpg"
alt="picture of dear zindagi" height="400"/></center>

<p>Dear Zindagi (transl. Dear life) is a 2016 Indian Hindi-language coming-of-age


drama film written and directed by Gauri Shinde. It was produced by Gauri Khan, Karan
Johar, and Shinde under the banners of Red Chillies Entertainment, Dharma Productions, and
Hope Productions respectively. The film stars Alia Bhatt in the lead role with Shah Rukh
Khan, Ira Dubey, Kunal Kapoor, Angad Bedi, Ali Zafar, Yashaswini Dayama and Rohit Suresh
Saraf in supporting roles. The plot centres on a budding cinematographer who is
discontented with her life and meets a free-spirited psychologist who helps her to gain a
new perspective on her life.</p>

<p>Development of the film began in 2015, when Shinde signed Bhatt and Khan for a film
to be made under her banner. Principal photography took place in Goa and Mumbai, in the
period from 21 January to 20 May 2016. The film features a score composed by Amit Trivedi
and lyrics written mostly by Kausar Munir.Development of the film began in 2015, when
Shinde signed Bhatt and Khan for a film to be made under her banner. Principal photography
took place in Goa and Mumbai, in the period from 21 January to 20 May 2016. The film
features a score composed by Amit Trivedi and lyrics written mostly by Kausar Munir.
</p>
<br>
<center><h2><b><u>Plot</u></b></h2></center>

<p id="yes">Based in Mumbai and Goa, Kaira is a promising cinematographer who dreams
of directing her own films. Blunt and cynical, she is most comfortable when with her three
best friends, Fatima, Jackie and Ganju. Kaira's life takes a downturn when she sleeps with
Raghuvendra, a film producer and then breaks up with her childhood sweetheart Sid, a
restobar owner. Raghu then gets engaged to his ex. Her landlord then evicts her out of her
apartment because the building association wants to rent apartments to married couples and
families only. All this, plus dissatisfaction with her prospects at work serves as a
catalyst for Kaira's shift to Goa, where she now has to grudgingly live with her parents
with whom she has some issues. She ends up spending many sleepless nights in unhappiness
and uncertainty.

While in Goa, Kaira seeks out Dr. Jehangir "Jug" Khan, a psychologist, for her
insomnia after inadvertently having heard him talk at a Mental Health Awareness
Conference. She warms to Jug's unconventional methods, trying to use them to understand
herself. Meanwhile, she meets a musician, Rumi, and falls in love with him, but they break
up before anything serious can happen when she realises they may not be the right fit for
each other. During this time, Kaira reunites with her younger brother, Kiddo, who is the
only other person besides her best friends that she is closest to. Matters with her family
come to a head when Kaira has an outburst at a family get-together where she confronts her
parents about them abandoning her for years at her grandparents' house.

Kaira finally narrates the story of her abandonment to Jug, who tells her that she
fears abandonment so much that she does not allow herself to commit in relationships,
leaving before they can leave her. He convinces her that she does not need to forgive her
parents for abandoning her in her childhood but as an adult, have the maturity to see them
as two regular people who are capable of making mistakes, like everyone else. After this,
Kaira makes an effort to reconcile with her parents and also works to finish her short
film.

At their last session, Kaira admits to Jug that she has grown to like and love
him. Jug responds that it is normal for a patient to feel this way about their therapist
and while he likes her platonically, a relationship would not be possible between them.
The two share a hug before Kaira leaves.

Kaira finally completes her short film, which she had been working on for years.
At the premiere, her friends, family, and exes are present to cheer her on. This is where
Kaira meets a furniture designer, and strikes a conversation with him.</p>

<center><h2><b><u>Cast</u></b></h2>
<h6>1.ALIA BHATT</h6>
<img src="https://img.staticmb.com/mbcontent//images/uploads/2022/8/alia-bhatt-
house.jpg" alt="picture of alia bhat" height="200"/></center>
<p>Alia Bhatt as Kaira, who is also referred to as "Sirat". During her interview
with Bombay Times, Bhatt spoke about her role. She said that playing the role of Kaira was
altogether a very different experience.</p>
<center><h6>2.SHAH RUKH KHAN</h6>
<img
src="https://filmfare.wwmindia.com/content/2020/jul/shahrukhkhan41596116759.jpg"
alt="picture of srk" height="200"/></center>
<p>
Shah Rukh Khan as Dr. Jehangir "Jug" Khan, a psychologist who helps Kaira find
answers to her life's problems. He describes his role by saying, "I am a support in the
film, more like an extended cameo. I am very glad to be in this film. I have never played
such a role in my entire career."
</p>
<center><h6>3.KUNAL KAPOOR</h6>
<img
src="https://images.yourstory.com/cs/7/3fb20ae02dc911e9af58c17e6cc3d915/Kunal-Kapoor---2-
1596778487175.png?fm=png&auto=format" alt="picture of srk" height="200"/></center>
<p>
Kunal Kapoor as Raghuvendra, a film producer, one of Kaira's former
boyfriends
</p>

<center><h6>4.ANGAD BEDI</h6>
<img src="https://wikibio.in/wp-content/uploads/2019/01/Angad-Bedi-
Image.jpg" alt="picture of angad bedi" height="200"/></center>
<p>
Angad Bedi as Sid, a restobar owner, one of Kaira's former boyfriends

</p>
<center><h6>5.ALI ZAFAR</h6>
<img src="https://sm.mashable.com/t/mashable_me/photo/default/33-
26_bepj.1248.jpg" alt="picture of ali zafar" height="200"/></center>
<p>
Ali Zafar as Rumi, a musician and singer-songwriter, who is one of
Kaira's former boyfriend
</p>
<center><h6>6.IRA DUBEY</h6>
<img src="http://starsunfolded.com/wp-content/uploads/2016/11/Ira-
Dubey.jpg" alt="picture of ira dubey" height="200"/></center>

<p>Ira Dubey as Fatima, Kaira's friend, who is also referred to as


"Fatty"
Rohit Suresh Saraf as Kiddo, Kaira's younger brother</p>

<center><h6>7.ROHIT SURESH</h6>
<img src="https://wikibio.in/wp-content/uploads/2019/10/Rohit-
Saraf-Image.jpg" alt="picture of rohit suresh" height="200"/></center>

<p>
Rohit Suresh Saraf as Kiddo, Kaira's younger brother
</p>
<center><h6>8.YASHASWINI DAYAMA</h6>
<img src="https://failurebeforesuccess.com/wp-
content/uploads/2021/10/yashaswini-dayama-2.jpg" alt="picture of Yashaswini Dayama"
height="200"/></center>
<p>Yashaswini Dayama as Jackie, Kaira's friend</p>

</body>

</html>

OUTPUT:
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.
ANSWER:
<!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>Question2</title>
<Style>
frameset{
border-style: solid;
border-width: 2px;
}

</Style>
<frameset rows="11%,6%,50%,26%,7%" >
<frame src="Header.html" name="Header" scrolling ="no">
<frame src="Navigation.html" name="Navigation">
<frameset cols="50%,50%">
<frame src="Message.html" name="Message" scrolling="no"></frame>
<frame src="Notice.html" name="Notice"></frame>
</frameset>

<frame src="Gallery.html" name="Gallery"></frame>


<frame src="Footer.html" name="Footer"></frame>
</frameset>

</head>
</html>

Header.html
<!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>Document</title>
<style>
body{
background-color: aquamarine;
font-size: large;
font-family: Lucida Bright;
}
</style>
</head>
<body>
<img align="left" src="https://storage.googleapis.com/ezap-
prod/colleges/5648/indraprastha-college-for-women-new-delhi-logo.jpg" height="60">
<center><p><b><big>Indraprastha College for Women</big>
<br> University of Delhi
</b></p>
</center>
</body>
</html>

Footer.html
<!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>Document</title>
<style>
body{
background-color: darkblue;
font-size: large;
font-family: Lucida Bright;
color: rgb(66, 59, 59);
}
</style>
</head>
<body>

<b>Contact Number:</b>011 2396 2009 &nbsp;


&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;
<b>Email Address:
</b>ipcw@ip.du.ac.in &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

<b>Postal address:</b>31,Sham Nath Marg, Civil Lines,Delhi, 110054<br></small>

</body>
</html>

Navigation.html
<!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>Document</title>
</head>
<body>
<figure align="center"><figcaption><p style="text decoration:underline;font-
weight: bolder; text-align: center; font size: 25px;">Gallery</p></figcaption>

<img
src="https://static.zollege.in/public/college_data/images/appImage/16478544121444125990IPC
GNEW.jpg?tr=h-250,w-400,c-force" style="width: 300px;height: 110px;">
<img src="https://www.universitytimes.in/wp-content/uploads/2022/04/ipcw.jpg"
style="width: 300px;height: 110px;">
<img
src="https://cache.careers360.mobi/media/colleges/reviews/2021/3/29/150534/942CE0BF-20C5-
4698-BD86-567C17B59ADB.jpeg"style="width: 300px;height: 110px;" >
<img
src="https://cache.careers360.mobi/media/colleges/reviews/20160909_113631.jpg"style="width
: 300px;height: 110px;">

</body>
</html>

Gallery.html
<!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>Document</title>
</head>
<body>
<figure align="center"><figcaption><p style="text decoration:underline;font-
weight: bolder; text-align: center; font size: 25px;">Gallery</p></figcaption>

<img
src="https://static.zollege.in/public/college_data/images/appImage/16478544121444125990IPC
GNEW.jpg?tr=h-250,w-400,c-force" style="width: 300px;height: 110px;">
<img src="https://www.universitytimes.in/wp-content/uploads/2022/04/ipcw.jpg"
style="width: 300px;height: 110px;">
<img
src="https://cache.careers360.mobi/media/colleges/reviews/2021/3/29/150534/942CE0BF-20C5-
4698-BD86-567C17B59ADB.jpeg"style="width: 300px;height: 110px;" >
<img
src="https://cache.careers360.mobi/media/colleges/reviews/20160909_113631.jpg"style="width
: 300px;height: 110px;">

</body>
</html>

Message.html
<!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>Document</title>
<style>
body{
background-color: lightblue;
color: brown;
font-style: italic;
}
</style>
</head>
<body>
<p><b>Principal's Desk</b></p>
<center><img src="http://www.ipcollege.ac.in/DataFiles/Content/39_Dr.Rekha%20Sethi.jp
g" height="90">

<p><small><b>Prof. Rekha Sethi<br>


M.Phil (Hindi), Ph.D. (Hindi)</b><br> Welcome to Indraprastha College for Women.
You have just embarked on a journey of discovery and revelation, a journey that is as much
about you as it is about the larger world that you inhabit. Here in IP, embraced by its
natural beauty, nurtured by its ideals of women’s emancipation and empowerment, you will
find the space where you can explore, express, and realize yourself.<br>
The College with its infrastructure and facilities is at your disposal to help you
grow and develop, to enable yourselves and become independent and confident young women
who can take on the world on their terms. <br>

IP College is about you. You are at the center of its vision: a vision which
upholds the values of equality and harmony, while it continues to mainstream the
marginalized, even as it pursues the goals of academic excellence.Come, let us walk that
exciting path together.

</p>
</center>
</span>

</body>
</html>

Notice.html
<!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>Document</title>
<style>
body{
background-color: lightblue;
color: brown;
font-style: italic;
}
</style>
</head>
<body>
<p><b>Principal's Desk</b></p>
<center><img src="http://www.ipcollege.ac.in/DataFiles/Content/39_Dr.Rekha%20Sethi.jp
g" height="90">

<p><small><b>Prof. Rekha Sethi<br>


M.Phil (Hindi), Ph.D. (Hindi)</b><br> Welcome to Indraprastha College for Women.
You have just embarked on a journey of discovery and revelation, a journey that is as much
about you as it is about the larger world that you inhabit. Here in IP, embraced by its
natural beauty, nurtured by its ideals of women’s emancipation and empowerment, you will
find the space where you can explore, express, and realize yourself.<br>

The College with its infrastructure and facilities is at your disposal to help you
grow and develop, to enable yourselves and become independent and confident young women
who can take on the world on their terms. <br>
IP College is about you. You are at the center of its vision: a vision which
upholds the values of equality and harmony, while it continues to mainstream the
marginalized, even as it pursues the goals of academic excellence.Come, let us walk that
exciting path together.

</p>
</center>
</span>

</body>
</html>

OUTPUT:

JAVASCRIPT

1. Write JAVASCRIPT script to Join the array.


ANSWER:
<html>
<head>
<title> Join Array </title>
</head>
<body bgcolor="lightpink">
<p><b>The elements of the array Folwers are:</b></p>
<script language="JavaScript">
Flowers = new Array(6);
Flowers[0]="Rose";
Flowers[1]="Lily";
Flowers[2]="Lotus";
Flowers[3]="Sunflower";
Flowers[4]="Tulip";
Flowers[5]="daffodil";

var arr="";
for(var i=0; i<Flowers.length; i++)
{
arr+=Flowers[i]+"<br>";
}
document.write(arr);
document.write("<br><br>");
document.write("<b>The elements of the array Flower as string are:</b>");
document.write("<br>");

let text = Flowers.join();

document.write(text);

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

OUTPUT:

2. Write JAVASCRIPT script to Reverse the array.


ANSWER:
<html>
<head>
<title> Reverse of the Array </title>
</head>
<body>
<script language="JavaScript">
Planets=new Array(8);
Planets[0]="Mercury";
Planets[1]="Venus";
Planets[2]="Earth";
Planets[3]="Mars";
Planets[4]="Jupiter";
Planets[5]="Saturn";
Planets[6]="Uranus";
Planets[7]="Neptune";

let text="";
for(let i=0; i<Planets.length; i++)
{
text+=Planets[i]+"<br>";
}
document.write("<b>The original array is:</b><br>");
document.write(text);
document.write("<br><br> <b>The Reverse of the array is:</b><br>");
reverse_array=Planets.reverse();
document.write(reverse_array);
</script>
</body>
</html>
OUTPUT:

3. Write JAVASCRIPT script to show Function.


ANSWER:
<html>
<head>
<title> Functions </title>
<script language="JavaScript">
var name="";
function hello()
{
name=prompt('Enter Your Name:', 'Name');
alert('Greetings '+name+', Welcome to my page!');
}
function goodbye()
{
alert('Goodbye '+name+', Sorry to see you go!');
}
</script>
</head>
<body onload="hello();" onunload="goodbye();">
<center><img src="https://i.pinimg.com/736x/3d/96/eb/3d96eba59a324ac1570e174fd5bb5e94.jpg"
height="400" ></center>
</body>
</html>

OUTPUT:

+
4. Write JAVASCRIPT script to show Alert box.
ANSWER:
<html>
<head> <title> Alert </title> </head>
<body>
<script language="JavaScript">
alert("Welcome to my Webpage!");
document.write('<center/>');
document.write('<img src="https://www.shutterstock.com/image-vector/welcome-poster-
spectrum-brush-strokes-260nw-1146069941.jpg" height="600">');
</script>
</body>
</html>

OUTPUT:
5. Write JAVASCRIPT script to show Prompt box
ANSWER:
<html>
<head> <title> Prompt </title> </head>
<body>
<script language="JavaScript">
document.write('<img src="https://www.shutterstock.com/image-vector/welcome-poster-
spectrum-brush-strokes-260nw-1146069941.jpg" height=200/>');
document.write('<h1>Greetings</h1>');
document.write(prompt("Enter Your Name:","Name"));
document.write("&nbsp;Welcome to my HomePage!");
</script>
</body>
</html>
OUTPUT:

6. Write JAVASCRIPT script to show Confirm box


ANSWER:
<html>
<head> <title> Confirm </title> </head>
<script language="JavaScript">
var question="What is 10+10?";
var answer=20;
var correct='<center/><img
src="https://i.pinimg.com/736x/3d/96/eb/3d96eba59a324ac1570e174fd5bb5e94.jpg" width=200
height=200>';
var incorrect='<center/><img src="https://www.shutterstock.com/image-vector/welcome-
poster-spectrum-brush-strokes-260nw-1146069941.jpg" width=200 height=200>';
var response=prompt(question,"0");

for(count=0;count<2;count++)
{
if(response!=answer)
{
confirm("Wrong, Press OK for another chance");
response=prompt(question,"0");
if(count==1)
{
alert("Better Luck Next Time");
}
}
else
{
alert("Great!! You are right");
count=3;
}
}
var output=(response==answer)?correct:incorrect;
document.write(output);
</script>
</head>
</body></body>
</html>

OUTPUT:
PHP
1. Write PHP script to construct the following pattern using nested for loop.

Answer
<!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>PHP Pattern</title>
</head>
<body>
<?php
$n=4;
$i=0;
$j=0;
//Condition for upper half pattern
for($i=0; $i<$n; $i++)
{
for($j=0;$j<2*$n-1;$j++)
{
//Condition for *
if(($i+$j)<$n || ($i+$j)>=$n+2*$i-1) print"*";
//Condition for " "
else echo "&nbsp;&nbsp;";
}
echo "<br>";
}
//Condition for lower half pattern
for($i=1; $i<$n; $i++)
{
for($j=0;$j<2*$n-1;$j++)
{
//Condition for *
if($j<=$i || ($i+$j)>=$n+($n/2)) print"*";
//Condition for " "
else echo "&nbsp;&nbsp;";
}
echo "<br>";
}
?>
</body>
</html>

OUTPUT:

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.
ANWSER:
<?php

$num1 = $_POST['num'];
echo " The number is $num1 <BR> <BR>";
checkRange($num1); // calling of checkRange() function for checking range
// calling of primeCheck() function for checking prime number if true it
//returns fibonacci series;
//otherwise factorial is been calculated
function checkRange($num1){
if ($num1 > 2 && $num1 < 100) {
echo" $num1 is in the range 2-100";
primeCheck($num1);
}
else{
echo" $num1 Number is not in a range(2-100)";
}
}
function primeCheck($num1){
$count=0;
for ( $i=1; $i<=$num1; $i++) {
if (($num1%$i)==0) {
$count++; }
}
if ($count<3) {
echo "<BR><BR>$num1 is a prime number.";
echo "<BR> Fibonacci series of $num1 is ";
Fibonacci($num1);
}
else{
echo "<BR><BR>$num1 is a composite number.";
$fact = Factorial($num1);
echo "<BR>Factorial of $num1 = $fact";
}
}
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($number){
if($number <= 1){
return 1;
}
else{
return $number * Factorial($number - 1);
}
}
?>
OUTPUT:

3. 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.
ANSWER:
<?php
$background_colors = array('blue', 'black', 'yellow', 'green',
'orange','red','white','#f0f0f0','whitesmoke',"#F2FD8E");
$count = count($background_colors) - 1;
$i = rand(0, $count);
$rand_background = $background_colors[$i];
?>
<style>
.color{
margin-left:150px;
margin-top:80px;
width:80%;
height:80vh;
text-align:center;
}
</style>
<html>
<body>
<section class="color" style="background: <?php echo $rand_background; ?>;">
<h1>This is a php code that shows random color from array.</h1>
</section>
</body>
</html>

OUTPUT:
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.
ANWSER:

login.php
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Login</h2>
</div>

<form method="post" action="login.php">


<?php include('errors.php'); ?>
<div class="input-group">
<label>Username</label>
<input type="text" name="username" >
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password">
</div>
<div class="input-group">
<button type="submit" class="btn" name="login_user">Login</button>
</div>
<p>
Not yet a member? <a href="register.php">Sign up</a>
</p>
</form>
</body>
</html>

product.php
<!DOCTYPE html>
<html>
<body>

<?php
session_start();

// initializing variables
$username = "";
$email = "";
$errors = array();

// connect to the database


$db = mysqli_connect('localhost', 'root', '', 'project');

if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}

$sql = "SELECT id, username, email, img FROM users";


$result = $db->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
print "<br> id: ". $row["id"]. "<br> - Name: ". $row["username"]. "<br> - Email: "
. $row["email"] . "<br>";
print "<img src=\"".$row["img"]."\">";

}
} else {
print "0 results";
}

$db->close();
?>

</body>
</html>

register.php
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Register</h2>
</div>

<form method="post" action="register.php">


<?php include('errors.php'); ?>
<div class="input-group">
<label>Username</label>
<input type="text" name="username" value="<?php echo $username; ?>">
</div>
<div class="input-group">
<label>Email</label>
<input type="email" name="email" value="<?php echo $email; ?>">
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password_1">
</div>
<div class="input-group">
<label>Confirm password</label>
<input type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn" name="reg_user">Register</button>
</div>
<p>
Already a member? <a href="login.php">Sign in</a>
</p>
</form>
</body>
</html>

server.php
<?php
session_start();

// initializing variables
$username = "";
$email = "";
$errors = array();

// connect to the database


$db = mysqli_connect('localhost', 'root', '', 'project');

// REGISTER USER
if (isset($_POST['reg_user'])) {
// receive all input values from the form
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);

// form validation: ensure that the form is correctly filled ...


// by adding (array_push()) corresponding error unto $errors array
if (empty($username)) { array_push($errors, "Username is required"); }
if (empty($email)) { array_push($errors, "Email is required"); }
if (empty($password_1)) { array_push($errors, "Password is required"); }
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}

// first check the database to make sure


// a user does not already exist with the same username and/or email
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email'
LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);

if ($user) { // if user exists


if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}

if ($user['email'] === $email) {


array_push($errors, "email already exists");
}
}

// Finally, register user if there are no errors in the form


if (count($errors) == 0) {
$password = md5($password_1);//encrypt the password before saving in the database

$query = "INSERT INTO users (username, email, password)


VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}
}

// LOGIN USER
if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);

if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}

if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
}
}
}

?>

errors.php
<?php if (count($errors) > 0) : ?>
<div class="error">
<?php foreach ($errors as $error) : ?>
<p><?php echo $error ?></p>
<?php endforeach ?>
</div>
<?php endif ?>

style.css
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: #F8F8FF;
}

.header {
width: 30%;
margin: 50px auto 0px;
color: white;
background: #5F9EA0;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
background: white;
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;

index.php
<?php
session_start();

if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
<h2>Home Page</h2>
</div>
Welcome to my project page
<div class="content">
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>

<!-- logged in user information -->


<?php if (isset($_SESSION['username'])) : ?>
<p>Welcome <strong><?php echo $_SESSION['username']; ?></strong></p>
<p> <a href="index.php?logout='1'" style="color: red;">logout</a> </p>
<?php endif ?>
</div>

</body>
</html>

OUTPUT:
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.
ANSWER:
<!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>Question_3</title>
</head>
<body>
<center><h1><u><b>Student Identity</b></u></h1><br> <br>
<form method="get" action="report.php">
FIRST NAME: <input type="text" placeholder="enter your name"
id="f_name"/><br><br><br>

ROLL NUMBER: <input type="text" placeholder="enter your roll no."


id="roll"/><br><br><br>

STUDENT'S EMAIL ID: <input type="text" placeholder="enter your email id."


id="email"/><br><br><br>

STUDENTS AGE: <input type="number" placeholder="enter your age"/


id="age"><br><br><br>

GENDER: <input type="radio" name="gender" value="male"id="gender"/>Male

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

<input type="radio" name="gender" value="others" id="gender"/>Others


<br><br><br>

SOCITIES (Student wish to join): <input type="checkbox" name="societies"


value="Dancing" id="societies"/> Dancing
<input type="checkbox" name="societies" value="Singing" id="societies"/> Singing
<input type="checkbox" name="societies" value="DRAMA" id="societies"/> Drama
<input type="checkbox" name="societies" value="Science" id="societies"/>
Science</label>
<input type="checkbox" name="societies" value="Art" id="societies"/> Art
<br><br><br>

SELECT COURSE: <select name="course">


<option value="choose">choose</option>
<option value="B.Sc(Hons)Computer Science">B.Sc(Hons)Computer Science</option>
<option value="B.Sc(Hons)MATHEMATICS">B.Sc(Hons)MATHEMATICS</option>
<option value="B.Sc(Hons)CHEMISTRY">B.Sc(Hons) CHEMISTRY</option>
<option value="B.Sc(Hons)Physics">B.Sc(Hons)Physics</option>
<option value="B.A.(Hons)History">B.A.(Hons)History </option>
</select><br><br><br>

ADDRESS OF THE STUDENT: <br><textarea name="address" placeholder="Enter your


address" id="add" col=66 rows=6></textarea><br><br><br>

UPLOAD STUDENT'S PHOTO: <input type="file" name="PHOTOFILE"/><br><br><br>


<input type="submit" value="Submit" onclick="alert ('THANKYOU')" id="photo"/>

</form>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<center>
<?php
$conn = mysqli_connect("localhost", "root", "", "formspage");
// Check connection
if($conn === false){
die("ERROR: Could not connect. ". mysqli_connect_error());
}
$first_name = $_REQUEST['first_name'];
$last_name = $_REQUEST['last_name'];
$address = $_REQUEST['address'];
$email = $_REQUEST['email'];
$rollnum=$_REQUEST['rollnum'];
$age=$_REQUEST['age'];
$gender=$_REQUEST['gender'];
$sql = "INSERT INTO login_details
VALUES('$first_name','$last_name','$address','$email','$rollnum','$age','$gender' )";
if(mysqli_query($conn, $sql)){
echo "<script language='javascript'>";
echo "alert('INFORMATION ENTERED')";
echo "</script>";
}
else{
echo "<script language='javascript'>";
echo "alert('WRONG INFORMATION')";
echo "</script>";
}
// Close connection
mysqli_close($conn);
?>
</center>
</body>
</html>

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.
ANSWER:
<!DOCTYPE html>
<html>
<head>
<title>Table with database</title>
<style>
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
}
th,td {
font-weight: bold;
border:1px solid black;
padding: 10px;
text-align: center;
color: black;
}

</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Email</th>
<th>Roll Number</th>
<th>Age</th>
<?php
$conn = mysqli_connect("localhost", "root", "", "formpage");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql="SELECT first_name ,last_name, address, email, rollnum, age FROM student_details";
$result = $conn->query($sql);
echo "<h3><center>Data stored in a database successfully.". "<br>
<i>Data stored is retrieved and displayed in a
tablebelow</i></center></h3>";
if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["first_name"]. "</td><td>" . $row["last_name"]."</td><td>" .
$row["address"]. "</td><td>". $row["email"].
"</td><td>". $row["rollnum"] . "</td><td>" . $row["age"];
}
echo "</table>";
}
else {
echo "0 results";
}
$conn->close();
?>
</table>
</body>
</html>

<!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>Question_3</title>
</head>
<body>
<center><h1><u><b>Student Identity</b></u></h1><br> <br>
<form method="get" action="report.php">
STUDENT NAME: <input type="text" placeholder="enter your name"
id="fname"/><br><br><br>
LAST NAME: <input type="text" placeholder="enter your last name"
id="l_name"/><br><br><br>

ROLL NUMBER: <input type="text" placeholder="enter your roll no."


id="roll"/><br><br><br>

STUDENT'S EMAIL ID: <input type="text" placeholder="enter your email id."


id="main"/><br><br><br>

STUDENTS AGE: <input type="number" placeholder="enter your age"/


id="age"><br><br><br>

GENDER: <input type="radio" name="gender" value="male"id="gender"/>Male

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

<input type="radio" name="gender" value="others" id="gender"/>Others


<br><br><br>

SOCITIES (Student wish to join): <input type="checkbox" name="societies"


value="Dancing" id="societies"/> Dancing
<input type="checkbox" name="societies" value="Singing" id="societies"/> Singing
<input type="checkbox" name="societies" value="DRAMA" id="societies"/> Drama
<input type="checkbox" name="societies" value="Science" id="societies"/>
Science</label>
<input type="checkbox" name="societies" value="Art" id="societies"/> Art
<br><br><br>

SELECT COURSE: <select name="course">


<option value="choose">choose</option>
<option value="B.Sc(Hons)Computer Science">B.Sc(Hons)Computer Science</option>
<option value="B.Sc(Hons)MATHEMATICS">B.Sc(Hons)MATHEMATICS</option>
<option value="B.Sc(Hons)CHEMISTRY">B.Sc(Hons) CHEMISTRY</option>
<option value="B.Sc(Hons)Physics">B.Sc(Hons)Physics</option>
<option value="B.A.(Hons)History">B.A.(Hons)History </option>
</select><br><br><br>

ADDRESS OF THE STUDENT: <br><textarea name="address" placeholder="Enter your


address" col=66 rows=6></textarea><br><br><br>

UPLOAD STUDENT'S PHOTO: <input type="file" name="PHOTOFILE"/><br><br><br>


<input type="submit" value="Submit" onclick="alert('THANKYOU')"/>

</form>
</center>
</body>
</html>

You might also like