Final Project File Adh
Final Project File Adh
THREE MONTH
INDUSTRIAL TRAINING PROJECT REPORT
ON
SUBMITTED
TO
DEPARTMENT OF SOFTWARE DEVELOPMENT AND E-
GOVERNANCE
Acknowledgement
It gives me immense pleasure in submitting the project report on “Alumni Website” for the
partial fulfillment of the requirements for the degree of B.Voc(SD& eG) at Deen Dayal
Upadhyay Kaushal Kendra.
I wish to place on my record my deep sense of gratitude and dedicate the whole project to
my project guide, ma’am Dr. Amitabha Yadav for her constant motivation and valuable help
through the project work. I also want to extend my thanks to other faculties for their
cooperation during my course.
I have completed the project at the UPTEC Computer Consultancy Limited. I would like to
thank our instructor Sir Anshumaan and our project coordinator Leenu Jain ma’am for their
help and support throughout the completion of the project.
Finally I would like to thank my friends and my team for their cooperation to complete this
project, who not only encouraged me but also helped me in the process of making this
project.
Thanking All
Mansi Yadav
718660
1
2
Certificate
3
TABLE OF CONTENTS
4
List of Tables
5
1. INTRODUCTION
The information system for communication with alumni embodies one of many ways how university can
keep tracking with its graduates. Except for communication between university and its graduates, the
information system should allow communication between graduates themselves and their personal
presentation in public. The system also should collect actual information about working experience of
graduates, which can improve faculty credits and teaching process. The presented information system
includes all these points and focuses on usability and comfortable user interface.
The aim of this project is to build an Alumni of National P.G College online dashboard; it is intended to
manage with their respective fields. The project manages the fresh as well as old graduate students with
their respective information in actively participating in making registering, searching, managing the alumni
information for sharing their expertise, network, jobs opportunities and resources. This participation has
evolved into multiple dimensions; and is now eager to formally enter into the domain of mentorship to
students through a regular program. Alumni registration management system (Alumni Dashboard) is a step
towards this, creating multidimensional interactions between current and past students of National P.G
College.
Alumni serve many valuable roles, such as helping to build and grow an institution’s brand through
word-of-mouth marketing.
Colleges also rely on alumni to provide mentoring, internships, and career opportunities to
students.
Talented alumni will likely have a wealth of experience and skills to share with current students via
talks and newsletters.
The alumni website is the portal where you can showcase important institutional announcements,
various activities planned, reunions planned, etc. It’s always beneficial to analyze our alumni to get
the knowledge of what is most appealing to them as an alumni website.
In effect, colleges and universities need to view students as lifelong commitments that do not end
at graduation. Alumni are resources that can provide meaningful and mutually beneficial
relationships over time.
The scope of the project is get all the alumni of our college under one roof so they all can connect
with the college while improving their relationships with batch mates and the college.
They can also take part in the various activities going on in their college.
6
2. Problem Formulation
The college had no means to connect with their pass out students. On the other hand , the alumni of the
college had no means to remain updated with the events and other sources of the college.
Well we can say that it is the dream of a student to remain connected with the college and to be
acknowledged with their future achievements by their college. Colleges also rely on alumni to provide
mentoring, internships, and career opportunities to students.
Thus we have decided to gather our alumni to connect with the college and taking part in the ongoing
events of the college.
The scope of the project is get all the alumni of our college under one roof so they all can
connect with the college while improving their relationships with batch mates and the college.
They can also take part in the various activities going on in their college.
The alumni website is the portal where you can showcase important institutional
announcements, various activities planned, reunions planned, etc. It’s always beneficial to
analyze our alumni to get the knowledge of what is most appealing to them as an alumni
website.
In effect, colleges and universities need to view students as lifelong commitments that do not
end at graduation. Alumni are resources that can provide meaningful and mutually beneficial
relationships over time.
Talented alumni will likely have a wealth of experience and skills to share with current students
via talks and newsletters.
7
4. Objective of the study
The objective of the project can be determined as follows:
MODULES
There are following modules for this system
Home:
In this module alumni can have a over view of the website. It shows the options to go to any modules.
Registration:
In this module new alumni can register himself or herself on this website by filling some criteria i.e., Name,
Contact Number Date of birth, E-mail, Address, Date of joining of college, City, State, Course which he or
she had pursued by him/her Roll Number, Profile Photo, User ID, Password.
Log In:
In this module, alumni who have registered themselves on website can log in into their profile by simply
entering User ID and Password.
In case if user forget their password there is a forget password option which helps them to recover their
password.
Event:
In this module, alumni can see upcoming events, photos or previous events, date of upcoming events.
Visit Us:
In this module, alumni can see the photos of college, and photos of the facility provided by the college
administration.
About Us:
In this module, alumni can see the history of college, and know about the college in appropriate manner.
8
5. SYSTEM REQUIREMENT SPECIFICATION
1. ADMIN
2. ALUMNI
ADMIN
Admin can login into the system with his user name and password.
Admin can add a new admin.
Admin can change password.
Admin can add a course.
Admin can update the upcoming events according to the situation.
Admin can give response on the feedback given by alumni.
Admin can maintain information and details of the alumina. Only Admin can manage their
record.
He can manage all the details of the website.
ALUMINA
9
5.1 FEASIBILITY REPORT
Feasibility study is the high level capsule version of the entire requirement analysis process. The objective of
feasibility study is to determine whether the proposed system can be developed with available resources. Different
kinds of feasibilities for “ALUMNI WEBSITE” are as follows:
It is concerned with hardware and software feasibility. In this study , one has to test whether the proposed
system can be developed using existing technology or not ,
If new technology is required, what is the likely hood that its can be developed ? The organization for which the
system to be developed does not provides Online Services . Hence there is a requirement of new hardware and
software technology for the deployment of proposed system.
Website is being developed with the popularity and advancements of the web technology. “Alumni Website” is
being developed on Google webserver using Python IDLE and MySQL. Therefore we can say that his project is
Technically Feasible and is adaptive to the modern advancements and provides ease of use.
As per requirements the system to be developed should have speed response because of fast change info,
programming productivity, reliability, security, scalability, integration and availability. To meet this I as a developer
found MYSQL as a right choice because of its features platform independence, modularity and reusability.
Operational Feasibility is all about problems that may arise during operations. Operational Feasibility
determines whether the proposed system satisfies the user objectives and can fitted into current system operation.
The proposed system “Alumni Website” can be justified as operationally feasible basing on the following :
The methods of processing and presentation are completely acceptable by the users because they
completely meet all the user and admin requirements.
The users have been involved during the preparation of requirement analysis and design process.
The system will certainly certify the user objectives and it will also enhance their capability.
The system can be best fitted into current operation and requires little training to both administrator and
user.
Application will be able to provide adequate, timely, accurate help, documentation, useful and required
information to all the levels and categories of users.
It will be fast enough to response the query because of using efficient search methodology in the system.
Security measures will be taken to stop unauthorized access of the files, information and data in the
application.
This includes an evaluation of all incremental costs and benefits expected if proposed system is implemented
costs-benefits analysis which is to be performed during economical feasibility delineates costs for project
development and weighs them against benefits of system. In this the proposed system replaces the manual process
of receiving orders which benefits the organization to get more orders and good response. So developing this system
is economically feasible.
The economic feasibility of the system looks upon the financial aspects of the system. The estimate of the
project “Alumni Website” will be calculated using COCOMO Model.
10
COCOMO is a regression model based on LOC i.e. Number of lines of code. It is a procedural cost estimate model for
software projects and often used as a process of reliability predicting the various parameters associated with making
a project such as size, effort, cost, time and quality.
In this type of feasibility study, we determine that whether the whether the proposed project can be completed
in the specified time frame or not.
In our case, the Project “ALUMNI WEBSITE” can be finished in the targeted time-frame.
This feasibility evaluates whether my project breaks any law or not. According to our analysis, our website
“Alumni Website” does not break any law.
11
5.2 SPECIFIC REQUIREMENT
5.2.1 EXTERNAL INTERFACE REQUIREMENT
Home screen: This screen welcomes the user and he can visit various interfaces from here.
Registration screen: This screen asks the user to register him on the website.
Login screen: Authenticating Registered Users. This screen should accept user id and password and
authenticate against corporate authentication system.
Event screen: This screen tells gives information about the ongoing, upcoming and previous events of the
college.
View screen: Alumni can see the photos of college, and photos of the facility provided by the college
administration.
About screen: Alumni can see the history of college, and know about the college in appropriate manner.
Reliability: “Alumni Website” should provide reliable and relevant search result 100% of times. The logout
operation should end reliably within 5 to 9 seconds.
1. Login operation should be performed using transport layer security (HTTPS) All input fields should
be validated for SQL injection scenarios and HTML reserved words scenarios.
2. There should be well-defined password policy covering password change frequency, invalid
attempts allowed, etc.
2. “Alumni Website” should adopt standards based integration for extensibility and scalability.
12
5.2.4 HARDWARE AND SOFTWARE REQUIREMENTS
SERVER SIDE:
SOFTWARE REQUIREMENTS
SERVER SIDE:
CLIENT SIDE:
13
5.3 Design
The major functionality is divided in 2 parts:
ADMIN
ALUMNI
MODULES
Home:
The home module is a kind of a first expression of the whole website. In this module alumni can have an over view of
the website. It shows the various options to go to any modules. It paves the way for both alumni and admin to go to
various options.
Registration:
The important part to use a website is to get register yourself on the website. In this module new alumni can register
himself or herself on this website by filling all the important criteria i.e., Name, Contact Number Date of birth, E-
mail, Address, Date of joining of college, City, State, Course which he or she had pursued, his/her Roll Number,
Profile Photo, User ID, Password.
Here, the most important part is to recognize the member which is done by searching his/her roll no in the database.
If the roll no gets matched it, his registration is successful. So only the alumni of the college can register him/her on
the website.
Log in:
After registering himself on the website, he can approach the site easily with his user ID and password and can visit
the site according to his will. The login option saves lot of time for the frequent users. In this module alumni who
have registered themselves on website can log in into their profile by simply entering User ID and Password.
14
Sometimes people can forget their credentials like password so in case if user forgets the password there is a forget
password option which helps them to recover their password.
Event:
The event modules establishes the main connection between the alumni and college as the events make the alumni
under a roof if they participate in these events. In this module alumni can see upcoming events, photos or previous
events, date of upcoming events.
Visit Us:
In this module alumni can see the photos of college, and photos of the facility provided by the college
administration. The photos and videos of the college and the facilities share a lot of emotions with its alumni where
they spent 3 years and have achieved great experiences and knowledge in their respective fields. The visit us page
contains these memories of the alumni.
The visit us page contains feedback option also which can be used by the alumni to provide the feedback to the
college. The feedback is an important part for the college as well as for the website so it can improve the regarding
areas of the website.
About Us:
The about us module tells about the college, its history, and what it had achieved throughout these years. It helps
to us know more about the college in every perspective.
15
Entity Relationship Diagram
message
ADMIN feedback
manage
address
contact
view event
visit us
title photos
name views
Alumni
date
has
name
send
roll no
title title
events
college profile
16
DATA FLOW DIAGRAM
Zero Level Flow Diagram
This is the zero level DFD of Alumni Website, where we have elaborated the high level process of Alumni.
It’s a basic overview of the whole Alumni website or process being analyzed or modeled.
FEEDBACK
MANAGEMENT
ALUMNI COLLEGE
MANAGEMENT MANAGEMENT
ALUMNI WEBSITE
EVENT ADMIN
MANAGEMENT MANAGEMENT
First Level DFD of Alumni Website shows how the system is divided into sub-systems (processes), each of which
deals with one or more of the data flows to or from an external agent, and which together provide all of the
functionality of the project as a whole.
17
Alumni Generate alumni
Management details
College Generate
Management feedback
DFD level-2 then goes one step deeper into parts of Level 1 of project. It may require more functionality of Alumni to
reach the necessary level of detail about the Alumni functioning.
18
ADMIN Login into Check roles
system of access
Manage alumni details
ALUMNI
check Manage
credentials modules
Manage event details
Forget
Visit
password Manage role of user
moduless
Change
password
Manage system admins
Send feedback
19
6. SCREENSHOTS OF THE PROJECT
Homescreen:
Login page:
20
Sign-up page:
21
View page:
22
About us page:
23
Events page:
24
ADMIN END SCREENSHOTS
Admin login:
Admin signup:
26
7. CODING
Front End
28
text-decoration: none;
transition:0.5s;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
@media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
29
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
@media(max-width: 700px)
{
.text-box h1{
font-size:20px;
}
.nav-links ul li
{
display:block;
}
.nav-links
{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right: -200px;
text-align:left;
z-index:2;
transition:1s;
}
nav .fa
{
display:block;
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
}
.nav-links ul
{
padding:30px;
}
}
.steps{
width:80%;
margin:auto;
text-align:center;
padding-top:100px;
}
h1{
font-size:40px;
font-weight:600;
color:orange;
}
p{
color:#777;
font-size:14px;
30
font-weight:300;
line-height:22px;
padding:10px;
}
.row{
margin-top:5%;
display:flex;
justify-content: space-between;
}
.steps-col {
flex-basis:31%;
background:#fff3f3;
border-radius:10px;
margin-bottom:5%;
padding:20px 12px;
box-sizing:border-box;
transition:0.5s;
}
h3{
text-align:center;
font-weight:600;
margin:10px 0;
}
.steps-col:hover
{
box-shadow:0 0 20px 0px rgba(0,0,0,0.2);
}
@media(max-width:700px)
{
.row{
flex-direction:column;
}
}
footer{
background-color:black;
text-align:center;
width:100%;
}
</style>
</head>
<body>
<section class="header">
<nav>
<input id="nav-toggle" type="checkbox">
<div class="logo"><img src="/static/logo.png" alt="Image not found" width="250px">
</div>
<ul class="links">
<li><a href="../login">Log In</a></li>
<li><a href="../adminweb">Admin Log In</a></li>
<li><a href="../grid">View College</a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
31
</nav>
<div class="text-box">
<h1>Welcome to the National Post Graduate College
<br>Alumni Website</h1>
<h2>The Motto of the college is Maritum ethics i.e. merit with ethics.</h2>
<p>Be a part of a network comprosing of Alumni of National P.G College.
<br> Sign up now and be a part of An Autonomous,CPE
<br> And NAAC Grade 'A'</p>
<a href="" class="hero-btn">Visit Us To Know More</a>
</div>
</section>
<!----steps---->
<section class="steps">
<h1>Major Working</h1>
<p>Alumni and college is the utmost priorty</p>
<div class="row">
<div class="steps-col">
<img src="/static/o.jpg" width="100%" height="50%">
<h3> STEP 1</h3>
<p>Sign-Up now by going to the Alumni Sign-Up page.
Fill in your details</p>
</div>
<div class="steps-col">
<img src="/static/oo.png" width="100%" height="50%">
<h3> STEP 2</h3>
<p>Complete your profile details. Add your work,photo.
bio for easy verification from the college</p>
</div>
<div class="steps-col">
<img src="/static/ooo.jpg" width="100%" height="50%" >
<h3> STEP 3</h3>
<p>Monitor your college and participate in events<br>
conducted by your college.</p>
</div>
</section>
<!----javascript for toggle menu---->
<script>
var navLinks= document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right= "-200px";
}
</script>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#" target="_blank">National P.G
College</a></p></<footer>
</body
</html>
32
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/fec5e8fa5e.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Registration Form</title>
<style>
.heading{
background-color:white;
color:white;
}
.card{
margin-top:15px;
background-color:rgb(184, 227, 195);
}
body{
background-color:rgb(124, 226, 230)
}
img.rounded-corners{
border-radius:50px;
}
footer{
background-color:black;
text-align:center;
width:100%;
}
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: 'Montserrat', sans-serif;
padding: 0 5%;
height: 100px;
background-color:powderblue;
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
33
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
transition:0.5s;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
@media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
34
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
@media(max-width: 700px) {
.text-box h1{
font-size:20px;
}
.nav-links ul li{
display:block;
}
.nav-links{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align:left;
z-index:2;
transition:1s;
}
nav .fa{
display:block;
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
}
.nav-links ul{
padding:30px;
}
}
</style>
</head>
<body>
<div class=heading><img src="/static/CollegeLogo.png" alt="Image not found" ></div>
<nav>
<a href="home.html"></a>
<input id="nav-toggle" type="checkbox">
<div class="logo"><img src="/static/logo.png" alt="Image not found" width="250px"></div>
</div>
</nav>
35
<!----javascript for toggle menu---->
<script>
var navLinks= document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right= "-200px";
}
</script>
<div class="container">
<div class="row">
<div class="col-sm-8 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img src="/static/generaluser.png" width="50"/>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h4>Alumni SignUp</h4>
</center>
</div>
</div>
<div class="row">
<div class="col">
<hr>
</div>
</div>
<div id="ui">
<form class="form-group" method="post" action="/regaction/" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken"
value="LCTnWDskgr00xFFQjrKSeXAX3oN61hWyVaFDc2ftT4Peb8udO8M6U8raAdNXFZ81">
<div class="row">
<div class="col-sm-6">
<label>Name:</label>
<input type="text" name="name" class="form-control" required placeholder="Full name"
>
</div>
<div class="col-sm-6">
<label>Contact:</label>
<input type="phone" name="contact" class="form-control" required placeholder="Contact Number">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Date of Birth:</label>
<input type="date" name="dob" class="form-control" required placeholder="Date of Birth">
</div>
<div class="col-sm-6">
<label>Email:</label>
<input type="Email" name="email" class="form-control" required placeholder="Email">
36
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label>Address:</label>
<input type="text area" name="address" class="form-control" required placeholder="Address" row="3">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Date of Joining:</label>
<input type="date" name="doj" class="form-control" required placeholder="Date of Join">
</div>
<div class="col-sm-6">
<label>City:</label>
<input type="text" name="city" class="form-control" required placeholder="city">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label style="display:block">State:</label>
<select class="form-select" aria-label="State" name="state">
<option selected>State</option>
<option value="1">Andhra Pradesh</option>
<option value="2">Arunachal Pradesh</option>
<option value="3">Assam</option>
<option value="4">Bihar</option>
<option value="5">Chhattisgarh</option>
<option value="6">Rajasthan</option>
<option value="7">Goa</option>
<option value="8">Gujarat</option>
<option value="9">Haryana</option>
<option value="10">himachal Pradesh</option>
<option value="11">Jharkhand</option>
<option value="12">Karanataka</option>
<option value="13">Kerala</option>
<option value="14">Madhya Pradesh</option>
<option value="15">Maharashtra</option>
<option value="16">Manipur</option>
<option value="17">Meghalaya</option>
<option value="18">Mizoram</option>
<option value="19">Nagaland</option>
<option value="20">Odisha</option>
<option value="21">Punjab</option>
<option value="22">Sikkim</option>
<option value="23">Tamil Nadu</option>
<option value="24">Telangana</option>
<option value="25">Tripura</option>
<option value="26">Uttar Pradesh</option>
<option value="27">Uttarakhand</option>
<option value="28">West Bengal</option>
</select>
</div>
<div class="col-sm-6">
<label>Course:</label>
<input type="text" name="course" class="form-control" required placeholder="Course">
37
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Roll no:</label>
<input type="Number" name="rollno" class="form-control" required placeholder="Roll No.">
</div>
<div class="col-sm-6">
<label>Profile Photo:</label>
<input type="file" name="ppic" class="form-control" required placeholder="profile photo">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>User ID:</label>
<input type="text" name="userid" class="form-control" required placeholder="UserID">
</div>
<div class="col-sm-6">
<label>Password:</label>
<input type="password" name="passwd" class="form-control" required placeholder="Password">
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block">Sign In</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div style="width:100%;height:100%;background:red"></div>
<a href="../homestart"><b>Back to Homepage</b></a>
</div>
</div>
</div>
</div>
<br>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#" target="_blank">National P.G
College</a></p></footer>
</body>
</html>
3.Login Page(login.html)
<!DOCTYPE html >
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/fec5e8fa5e.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
38
<title>Login Form</title>
<style>
.heading{
background-color:white;
color:white;
transition: 1s;
}
.card{
margin-top:35px;
background-color:rgb(184, 227, 195);
}
body{
background-color:rgb(124, 226, 230)
}
img.rounded-corners{
border-radius:50px;
}
footer{
background-color:black;
margin-top: 40px;
text-align:center;
width:100%;
}
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: 'Montserrat', sans-serif;
padding: 0 5%;
height: 100px;
background-color:powderblue;
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
39
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
transition:0.5s;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
@media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
40
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
@media(max-width: 700px) {
.text-box h1{
font-size:20px;
}
.nav-links ul li{
display:block;
}
.nav-links{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align:left;
z-index:2;
transition:1s;
}
41
nav .fa{
display:block;
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
}
.nav-links ul{
padding:30px;
}
}
</style>
</head>
<body>
<div class="heading"><img src="/static/CollegeLogo.png" alt="Image not found"></div>
<nav>
<a href="home.html"></a>
<input id="nav-toggle" type="checkbox">
<div class="logo"><img src="/static/logo.png" alt="Image not found" width="250px"></div>
</div>
</nav>
<!----javascript for toggle menu---->
<script>
var navLinks= document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right= "-200px";
}
</script>
<div class="container">
<div class="row">
<div class="col-sm-8 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img src="/static/generaluser.png" width="50"/>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h4>Login Form<br><div style="background:red;position:absolute;top:40px;z-
index:0;left:40%"></div></h4>
42
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form method="post" action="/loginaction/"><input type="hidden" name="csrfmiddlewaretoken"
value="eqpNhIGuKETz95WXzGZCZktlCJ7oquH5oYb3x7tDnhINNyLk4n1QFvky9y7f4cTy">
<center><label><b>User ID</b></label></center>
<div class="form-group">
<input type="text" name="userid" class="form-control" required placeholder="Member Id">
</div>
<center><label><b>Password</b></label></center>
<div class="form-group">
<input type="Password" name="pass" class="form-control" required placeholder="Password">
</div>
</div>
</div>
<div class=row>
<div class=col-sm-6>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block btn-lg" id="Btn1">LOG IN</button>
</div>
</div>
<div class=col-sm-6>
<div class="form-group">
<a class="btn btn-primary btn-block btn-lg" href="../reg" role="button">Sign Up</a>
</form>
</div>
</div>
</div>
<center><a href="../forget"><b>Forget Password</b></a></center>
<a href="../homestart"><b>Back to Home</b></a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#"
target="_blank">National P.G College</a></p></footer>
</body>
43
</html>
4.Forget(forget.html)
<html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<style>
.heading{
background-color:white;
color:white;
transition: 1s;
.card{
margin-top:35px;
body{
img.rounded-corners{
border-radius:50px;
footer{
background-color:black;
44
45
46
47
48
49
50
51
52
.heading{
background-color:white;
color:white;
transition: 1s;
}
.card{
margin-top:35px;
background-color:rgb(184, 227, 195);
}
body{
background-color:rgb(124, 226, 230)
}
img.rounded-corners{
border-radius:50px;
}
footer{
background-color:black;
margin-top: 40px;
text-align:center;
width:100%;
}
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: 'Montserrat', sans-serif;
padding: 0 5%;
height: 100px;
background-color:powderblue;
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
53
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
transition:0.5s;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
@media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
54
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
@media(max-width: 700px) {
.text-box h1{
font-size:20px;
}
.nav-links ul li{
display:block;
}
.nav-links{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align:left;
z-index:2;
transition:1s;
}
nav .fa{
display:block;
55
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
}
.nav-links ul{
padding:30px;
}
}
</style>
</head>
<body>
<div class="heading"><img src="/static/CollegeLogo.png" alt="Image not found"></div>
<nav>
<a href="home.html"></a>
<input id="nav-toggle" type="checkbox">
<div class="logo"><img src="/static/logo.png" alt="Image not found" width="250px"></div>
</div>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<!----javascript for toggle menu---->
<script>
var navLinks= document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right= "-200px";
}
</script>
<div class="container">
<div class="row">
<div class="col-sm-8 mx-auto">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<img src="/static/admin.png" width="50"/>
</center>
</div>
</div>
<div class="row">
<div class="col">
56
<center>
<h4>Admin Login</h4>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<form method='POST' action='/adminwebaction/'>
<input type="hidden" name="csrfmiddlewaretoken"
value="SgXRZXmdKIfgnVEh9Ie7iny68TDjXZse2OJ7fm9mnl4u1otEEpglYypjFIDaBHEH">
<div class="row">
<div class="col-sm-12">
<center><label><b>Email</b></label></center>
<div class="form-group">
<input type="email" name="email" class="form-control" required placeholder="email">
</div>
<center><label><b>Password</b></label></center>
<div class="form-group">
<input type="password" name="passwd" class="form-control" required placeholder="Password">
</div>
</div>
</div>
<div class=row>
<div class=col-sm-12>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block btn-lg" id="Btn1">LOG IN</button>
</div>
</div>
</div>
<center><a href=../adminforget><b>Forget Password</b></a></center>
<a href=../homestart><b>Back to Home</b></a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#"
target="_blank">National P.G College</a></p></footer>
</body>
</html>
57
6.Admin forget Password(adminforget.html)
<html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<style>
.heading{
background-color:white;
color:white;
transition: 1s;
.card{
margin-top:35px;
body{
img.rounded-corners{
58
border-radius:50px;
footer{
background-color:black;
margin-top: 40px;
text-align:center;
width:100%;
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color:powderblue;
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
59
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
nav .links li {
list-style: none;
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
transition:0.5s;
#nav-toggle {
position: absolute;
top: -100px;
nav .icon-burger {
60
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
nav .logo {
float: none;
width: auto;
justify-content: center;
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
61
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
nav .links a {
font-size: 20px;
bottom: 0;
nav .icon-burger {
display: block;
opacity: 0;
62
@media(max-width: 700px) {
.text-box h1{
font-size:20px;
.nav-links ul li{
display:block;
.nav-links{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align:left;
z-index:2;
transition:1s;
nav .fa{
display:block;
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
.nav-links ul{
63
padding:30px;
</style>
</head>
<body>
<nav>
<a href="home.html"></a>
</div>
</nav>
<script>
function showMenu(){
navLinks.style.right = "0";
function hideMenu(){
navLinks.style.right= "-200px";
</script>
<div class="container">
64
<div class="row">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h4> Admin Forget Password<br><div style="background:red;position:absolute;top:40px;z-
index:0;left:40%"></div></h4>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form method="post" action="/adminforgetaction/"><input type="hidden" name="csrfmiddlewaretoken"
value="im0niwHVdaQ8FRPjPoKjZBXLQnQtoc5GFkCbncPFWBw9PZyyAn3vZi55uIaY100H">
<center><label><b>Eamil ID</b></label></center>
65
<div class="form-group">
</div>
<center><label><b>Contact</b></label></center>
<div class="form-group">
<input type="number max="10" min="10"" name="num" class="form-control" required
placeholder="Contact no." >
</div>
<center><label><b>Date of Birth</b></label></center>
<div class="form-group">
</div>
<center><label><b>Password</b></label></center>
<div class="form-group">
</div>
<center><label><b>Confirmed Password</b></label></center>
<div class="form-group">
</div>
</div>
</div>
<div class=row>
<div class=col-sm-12>
<div class="form-group">
<button type="submit" class="btn btn-warning btn-block btn-lg" id="Btn1">CHANGE
PASSWORD</button>
</div>
</div>
66
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#"
target="_blank">National P.G College</a></p></footer>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
67
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.heading{
background-color:white;
color:white;
.card{
margin-top:15px;
body{
img.rounded-corners{
border-radius:50px;
footer{
background-color:black;
text-align:center;
width:100%;
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
68
padding: 0 5%;
height: 100px;
background-color:powderblue;
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
nav .links li {
list-style: none;
nav .links a {
display: block;
padding: 1em;
69
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
transition:0.5s;
#nav-toggle {
position: absolute;
top: -100px;
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
nav .logo {
float: none;
width: auto;
70
justify-content: center;
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
nav .links a {
font-size: 20px;
bottom: 0;
nav .icon-burger {
display: block;
71
transform: translateY(10px) rotate(225deg);
opacity: 0;
}
@media(max-width: 700px) {
.text-box h1{
font-size:20px;
.nav-links ul li{
display:block;
.nav-links{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align:left;
z-index:2;
transition:1s;
nav .fa{
display:block;
72
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
.nav-links ul{
padding:30px;
</style>
</head>
<body>
<nav>
<a href="home.html"></a>
</div>
<ul class="links">
<li><a href="../feedback">Feedback</a></li>
<li><a href="../course">Course</a></li>
</ul>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
73
</nav>
<!----javascript for toggle menu---->
<script>
function showMenu(){
navLinks.style.right = "0";
function hideMenu(){
navLinks.style.right= "-200px";
</script>
<div class="container">
<div class="row">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h4>Admin SignUp</h4>
</center>
</div>
74
</div>
<div class="row">
<div class="col">
<hr>
</div>
</div>
<div id="ui">
<div class="col-sm-12">
<center>
<label><b>First Name:</b></label><center>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<center>
<label><b>Email:</b></label></center>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<center>
<label><b>Date of birth:</b></label></center>
</div>
75
</div>
<div class="row">
<div class="col-sm-12"><center>
<label><b>Contact:</b></label></center>
<input type="phone number" name="contact" class="form-control" required placeholder="Contact
number">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<center> <label><b>Password:</b></label></center>
</div>
</div>
<div class="row">
<div class="col-sm-12">
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="form-group">
</div>
</div>
</div>
<div class="row">
<div class="col">
76
<div class="form-group">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div style="color:white;background:red;"></div>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#"
target="_blank">National P.G College</a></p></footer>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
77
<script src="https://kit.fontawesome.com/fec5e8fa5e.js" crossorigin="anonymous"></script>
<title>EventUpdate Page</title>
<style>
.heading{
background-color:white;
color:white;
.card{
margin-top:15px;
body{
img.rounded-corners{
border-radius:50px;
footer{
background-color:black;
text-align:center;
width:100%;
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
78
font-family: 'Montserrat', sans-serif;
padding: 0 5%;
height: 100px;
background-color:powderblue;
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
nav .links li {
list-style: none;
nav .links a {
display: block;
79
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
transition:0.5s;
#nav-toggle {
position: absolute;
top: -100px;
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
nav .logo {
float: none;
80
width: auto;
justify-content: center;
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
nav .links a {
font-size: 20px;
bottom: 0;
nav .icon-burger {
display: block;
81
nav :checked ~ .icon-burger .line:nth-child(1) {
opacity: 0;
}
@media(max-width: 700px) {
.text-box h1{
font-size:20px;
.nav-links ul li{
display:block;
.nav-links{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align:left;
z-index:2;
transition:1s;
nav .fa{
82
display:block;
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
.nav-links ul{
padding:30px;
</style>
</head>
<body>
<nav>
<a href="home.html"></a>
</div>
<ul class="links">
<li><a href="../feedback">Feedback</a></li>
<li><a href="../course">Course</a></li>
</ul>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
83
</label>
</nav>
<script>
function showMenu(){
navLinks.style.right = "0";
function hideMenu(){
navLinks.style.right= "-200px";
</script>
<div class="container">
<div class="row">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h4>Alumni Meeting</h4>
</center>
84
<div style="background:red;color:white;text-align:center;"></div>
</div>
</div>
<div class="row">
<div class="col">
<hr>
</div>
</div>
<div id="ui">
<form method="post" action="/meetaction/" class="form-group"><input type="hidden"
name="csrfmiddlewaretoken"
value="i6M7Uu8kQ4LKajMo8PJ8Wl6UWvasdnVYF4oVZag4zvrLkrvDTO2kW2eeAQuXQbQZ">
<div class="row">
<div class="col-sm-12">
<center><label><b>Event Title:</b></label></center>
>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<center><label><b>Location:</b></label></center>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<center><label><b>Event Date:<b></label></center>
</div>
</div>
85
<div class="row">
<div class="col-sm-12">
<center><label><b>Event Timing</b></label></center>
</div>
</div>
<div class="row">
<div class="col">
<label style="display:block">Status:</label>
<option selected>State</option>
<option value="1">Active</option>
<option value="2">deactive</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<center><label><b>Description<b></label></center>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="form-group">
</div>
</div>
86
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#"
target="_blank">National P.G College</a></p></footer>
</body>
</html>
10.Update(update.html)
<html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<title>Update</title>
<style>
.heading{
background-color:white;
color:white;
87
transition: 1s;
.card{
margin-top:35px;
body{
img.rounded-corners{
border-radius:50px;
footer{
background-color:black;
margin-top: 40px;
text-align:center;
width:100%;
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color:powderblue;
88
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
nav .links li {
list-style: none;
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
89
transition:0.5s;
#nav-toggle {
position: absolute;
top: -100px;
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
nav .logo {
float: none;
width: auto;
justify-content: center;
nav .links {
float: none;
90
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
nav .links a {
font-size: 20px;
bottom: 0;
nav .icon-burger {
display: block;
91
}
opacity: 0;
}
@media(max-width: 700px) {
.text-box h1{
font-size:20px;
.nav-links ul li{
display:block;
.nav-links{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align:left;
z-index:2;
transition:1s;
nav .fa{
display:block;
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
92
}
.nav-links ul{
padding:30px;
</style>
</head>
<body>
<nav>
<a href="home.html"></a>
</div>
<ul class="links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<script>
93
var navLinks= document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
function hideMenu(){
navLinks.style.right= "-200px";
</script>
<div class="container">
<div class="row">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
</center>
</div>
</div>
<div class="row">
<div class="col">
94
<center>
<hr>
</center>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<center><label><b>EVENT</b></label></center>
</div>
<div class="col-sm-6">
<option selected>EVENT</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<center><label><b>EVENT PHOTOS</b></label></center>
</div>
<div class="col-sm-6">
<form action="/action_page.php">
</form>
</div>
</div>
</div>
<div class=row>
<div class=col-sm-6>
<div class="form-group">
95
<center> <button type="submit" class="btn btn-success btn-lg " id="Btn1">UPLOAD</button></center>
</div>
</div>
<div class=col-sm-6>
<div class="form-group">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#"
target="_blank">National P.G College</a></p></footer>
</body>
</html>
11.Event Calendar(Event.html)
<!DOCTYPE html>
<html>
<head>
<title>Event Calendar</title>
<style>
nav {
position: fixed;
96
z-index: 10;
left: 0;
right: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color:powderblue;
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
nav .links li {
97
list-style: none;
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
transition:0.5s;
#nav-toggle {
position: absolute;
top: -100px;
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
98
}
nav .logo {
float: none;
width: auto;
justify-content: center;
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
nav .links a {
font-size: 20px;
bottom: 0;
99
}
nav .icon-burger {
display: block;
opacity: 0;
@media(max-width: 700px)
.text-box h1{
font-size:20px;
.nav-links ul li
display:block;
.nav-links
position:absolute;
background:#f44336;
height:100vh;
width:200px;
100
top:0;
right: -200px;
text-align:left;
z-index:2;
transition:1s;
nav .fa
display:block;
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
.nav-links ul
padding:30px;
.event-container {
max-width: 800px;
margin: 0 auto;
.event-container h3.year {
font-size: 40px;
text-align: center;
101
.event-container .event {
display: flex;
border-radius: 8px;
margin: 32px 0;
.event .event-left {
background: #222;
min-width: 82px;
display: flex;
align-items: center;
justify-content: center;
color: #eee;
font-weight: bold;
text-align: center;
font-size: 56px;
font-size: 16px;
font-weight: normal;
.event .event-right {
display: flex;
flex-direction: column;
justify-content: center;
102
padding: 0 24px;
font-size: 24px;
color: #218bbb;
text-transform: uppercase;
background: #fff8ba;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
padding: 8px;
border-radius: 16px;
margin: 24px 0;
font-size: 14px;
height: 20px;
padding-right: 8px;
.event {
flex-direction: column;
.event .event-left {
padding: 0;
103
border-radius: 8px 8px 0 0;
display: inline-block;
font-size: 24px;
padding: 10px 0;
footer{
background-color:black;
text-align:center;
width:100%;
</style>
</head>
<body>
<section class="header">
<nav>
</div>
<ul class="links">
<li><a href="../home">Home</a></li>
104
</ul>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<br><br><br><br>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#"
target="_blank">National P.G College</a></p></<footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin-left:10%;
margin-right:10%;
margin:0;
padding:0;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
.header{
min-height:100vh;
105
width:100%;
animation:ani 5s;
animation-iteration-count:infinite;
background-position:center;
background-size:cover;
position:relative;
@keyframes
ani{
0%{background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("/static/p4.jpg");}
25%{background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("/static/p2.jpg");}
50%{background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("/static/p3.jpg");}
100%{background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url("/static/p6.jpg");}
.text-box{
width:90%;
color:#fff;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
.text-box h1{
font-size:50px;
.text-box h2{
font-size:20px;
106
.text-box p{
margin:10px 0 40px;
font-size:14px;
color:white;
.hero-btn {
display:inline-block;
color:white;
text-decoration:none;
padding:12px 34px;
font-size:13px;
background:transparent;
position:relative;
cursor:pointer;
.hero-btn:hover
background:#f44336;
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
padding: 0 5%;
107
height: 100px;
background-color:powderblue;
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
nav .links li {
list-style: none;
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
108
font-weight: bold;
color: #fff;
text-decoration: none;
transition:0.5s;
#nav-toggle {
position: absolute;
top: -100px;
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
nav .logo {
float: none;
width: auto;
justify-content: center;
109
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
nav .links a {
font-size: 20px;
bottom: 0;
nav .icon-burger {
display: block;
110
}
opacity: 0;
@media(max-width: 700px)
.text-box h1{
font-size:20px;
.nav-links ul li
display:block;
.nav-links
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right: -200px;
text-align:left;
z-index:2;
transition:1s;
111
nav .fa
display:block;
color:#fff;
margin:10px;
font-size:22px;
cursor:pointer;
.nav-links ul
padding:30px;
.steps{
width:80%;
margin:auto;
text-align:center;
padding-top:100px;
h1{
font-size:40px;
font-weight:600;
color:orange;
p{
color:#777;
font-size:14px;
font-weight:300;
line-height:22px;
112
padding:10px;
.row{
margin-top:5%;
display:flex;
justify-content: space-between;
.steps-col {
flex-basis:31%;
background:#fff3f3;
border-radius:10px;
margin-bottom:5%;
padding:20px 12px;
box-sizing:border-box;
transition:0.5s;
h3{
text-align:center;
font-weight:600;
margin:10px 0;
.steps-col:hover
@media(max-width:700px)
.row{
flex-direction:column;
113
}
footer{
background-color:black;
text-align:center;
width:100%;
</style>
</head>
<body>
<section class="header">
<nav>
</div>
<ul class="links">
<li><a href="../event">Events</a></li>
</ul>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<div class="text-box">
114
<br>Alumni Website</h1>
<h2>The Motto of the college is Maritum ethics i.e. merit with ethics.</h2>
</div>
</section>
<!----steps---->
<section class="steps">
<h1>Major Working</h1>
<p>Alumni and college is the utmost priorty</p>
<div class="row">
<div class="steps-col">
</div>
<div class="steps-col">
</div>
<div class="steps-col">
</section>
<script>
navLinks.style.right = "0";
function hideMenu(){
navLinks.style.right= "-200px";
</script>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#"
target="_blank">National P.G College</a></p></<footer>
</body
</html>
13. Feedback(feedback.html)
<html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<title>1Feedback </title>
<style>
.heading{
background-color:white;
116
color:white;
transition: 1s;
.card{
margin-top:35px;
body{
img.rounded-corners{
border-radius:50px;
footer{
background-color:black;
margin-top: 40px;
text-align:center;
width:100%;
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color:powderblue;
117
}
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
nav .links li {
list-style: none;
nav .links a {
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #fff;
118
text-decoration: none;
transition:0.5s;
#nav-toggle {
position: absolute;
top: -100px;
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
nav .logo {
float: none;
width: auto;
justify-content: center;
nav .links {
119
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
nav .links a {
font-size: 20px;
bottom: 0;
nav .icon-burger {
display: block;
120
transform: translateY(-10px) rotate(-225deg);
opacity: 0;
}
@media(max-width: 700px) {
.text-box h1{
font-size:20px;
.nav-links ul li{
display:block;
.nav-links{
position:absolute;
background:#f44336;
height:100vh;
width:200px;
top:0;
right:-200px;
text-align:left;
z-index:2;
transition:1s;
nav .fa{
display:block;
color:#fff;
margin:10px;
font-size:22px;
121
cursor:pointer;
.nav-links ul{
padding:30px;
</style>
</head>
<body>
<nav>
<a href="home.html"></a>
</div>
<ul class="links">
<li><a href="../course">Course</a></li>
</ul>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
122
<script>
function showMenu(){
navLinks.style.right = "0";
function hideMenu(){
navLinks.style.right= "-200px";
</script>
<div class="container">
<div class="row">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<h4>Alumin Feedback</h4>
</center>
</div>
</div>
<div class="row">
123
<div class="col">
<center>
<hr>
</center>
</div>
</div>
<th>Name</th>
<th>Email </th>
<th>Message</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<footer> <p style="color:whitesmoke">© All Right Reversed.<a class="footerlinks" href="#"
target="_blank">National P.G College</a></p></footer>
</body>
</html>
14.View College(grid.html)
<!DOCTYPE html>
<html>
<head>
124
<meta charset="utf-8">
<!--
Highway Template
https://templatemo.com/tm-520-highway
-->
</head>
<body>
<nav>
<div class="logo">
<a href="home.html">view<em>college</em></a>
</div>
<div class="menu-icon">
<span></span>
</div>
</nav>
<div id="video-container">
<div class="video-overlay"></div>
125
<div class="video-content">
<div class="inner">
<h1>VIEW COLLEGE</h1>
<div class="scroll-icon">
</div>
</div>
</div>
</video>
</div>
<div class="container">
<div class="row">
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
<p> pg</p>
</div>
</div></a>
<div class="image">
<img src="/static/1.jpg">
</div>
</div>
126
</div>
</div>
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
</div>
</div></a>
<div class="image">
<img src="/static/2.jpg">
</div>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
</div>
</div></a>
<div class="image">
<img src="/static/3.jpg">
</div>
127
</div>
</div>
</div>
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
<h1>LIBERARY<em>book issuing</em></h1>
</div>
</div></a>
<div class="image">
<img src="/static/4.jpg">
</div>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
<h1>freegan <em>aesthetic</em></h1>
</div>
</div></a>
<div class="image">
<img src="/static/5.jpg">
128
</div>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
<h1>Conference Hall<em></em></h1>
</div>
</div></a>
<div class="image">
<img src="/static/6.jpg">
</div>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
<h1>Thundercats <em>santo</em></h1>
</div>
</div></a>
<div class="image">
129
<img src="/static/7.jpg">
</div>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
<h1>wayfarers <em>yuccie</em></h1>
</div>
</div></a>
<div class="image">
<img src="/static/8.jpg">
</div>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
<h1>disrupt <em>street</em></h1>
</div>
</div></a>
130
<div class="image">
<img src="/static/9.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-item">
<div class="thumb">
<div class="hover-content">
<h1>disrupt <em>street</em></h1>
</div>
</div></a>
<div class="image">
<img src="/static/10.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
</div>
</div>
131
</div>
</div>
</div>
<div style="color:white;background:red;"></div>
<footer>
<div class="container-fluid">
<div class="col-md-12">
<p>national pg</p>
</div>
</div>
</footer>
<div class="popup-icon">
</div>
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
132
<div class="row">
<div class="col-md-12">
<fieldset>
<input name="name" type="text" class="form-control" id="name" placeholder="Your name..."
required="">
</fieldset>
</div>
<div class="col-md-12">
<fieldset>
<input name="email" type="email" class="form-control" id="email" placeholder="Your email..."
required="">
</fieldset>
</div>
<div class="col-md-12">
<fieldset>
<textarea name="message" rows="6" class="form-control" id="message" placeholder="Your message..."
required=""></textarea>
</fieldset>
</div>
<div class="col-md-12">
<fieldset>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<section class="overlay-menu">
<div class="container">
133
<div class="row">
<div class="main-menu">
<center>
<ul>
<li>
<a href="../home">Home</a>
</li>
<li>
<a href="../event">Events</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</center>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/static/bootstrap.min.js"></script>
<script src="/static/plugins.js"></script>
134
<script src="/static/main.js"></script>
</body>
</html>
<head>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<meta charset="UTF-8">
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be
inlined if they are on local disk! */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
*{
border: 0;
padding: 0;
margin: 0;
html, body {
height: 100%;
}
135
body {
font-size: 1.1em;
color: #333333;
h1 {
text-align: center;
font-weight: 300;
font-size: 2em;
margin-bottom: 1em;
a{
text-decoration: none;
color: #ef2c34;
a:hover {
color: #333333;
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
136
padding: 0 5%;
height: 100px;
background-color:powderblue;
nav .logo {
float: left;
width: 40%;
height: 100%;
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
nav .links li {
list-style: none;
nav .links a {
display: block;
padding: 1em;
137
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
transition:0.5s;
#nav-toggle {
position: absolute;
top: -100px;
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
nav .logo {
float: none;
width: auto;
138
justify-content: center;
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
nav .links a {
font-size: 20px;
bottom: 0;
nav .icon-burger {
display: block;
139
transform: translateY(10px) rotate(225deg);
opacity: 0;
.wrapper {
position: relative;
.wrapper section {
position: relative;
background: white;
width: 50%;
margin: 0 auto;
padding: 2em 0;
margin-bottom: 1em;
margin-bottom: 0;
.wrapper section:after {
140
content: "";
display: block;
position: relative;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 30em;
width: 100%;
.wrapper section:nth-child(1):after {
background-image: url("/static/2.jpg");
.wrapper section:nth-child(2):after {
background-image: url("/static/19.jpg");
width: 80%;
.wrapper section:after {
height: 15em;
.firstBar{
display:flex;
flex-direction: row;
.linkBar{
141
display:flex;
flex-direction: row;
.link{
width:50px;
height: 50px;
.link1{
width:50px;
height: 50px;
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<nav>
</div>
<ul class="links">
<li><a href="../home">Home</a></li>
<li><a href="../event">Event</a></li>
</ul>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
142
</label>
</nav>
<div class="wrapper">
<section id="maincode">
<article>
</article>
</section>
<section id="whatis">
<article>
</section>
</div>
143
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="/static/js/index.js"></script>
</body>
</html>
Backend Coding
Models.py
from django.db import models
class Meet(models.Model):
title=models.CharField(max_length=50)
loc=models.CharField(max_length=50)
date=models.CharField(max_length=50)
time=models.CharField(max_length=10)
sta=models.CharField(max_length=10)
des=models.TextField(default='')
class Meta:
db_table="meet"
class Admin(models.Model):
name=models.CharField(max_length=50)
dob=models.CharField(max_length=10)
email=models.CharField(primary_key=True,max_length=50)
contact=models.CharField(max_length=10)
password=models.CharField(max_length=20)
class Meta:
db_table="admin"
class Feedback(models.Model):
name=models.CharField(max_length=20)
email=models.CharField(primary_key=True,max_length=50)
message=models.TextField(default='')
class Meta:
db_table="feedback"
class Alumnus(models.Model):
userid = models.CharField(max_length=70)
contact = models.CharField(max_length=15)
email = models.CharField(max_length=50)
dob = models.CharField(max_length=10)
doj = models.CharField(max_length=10)
state = models.CharField(max_length=50)
city = models.CharField(max_length=50)
course = models.CharField(max_length=50)
address = models.TextField(default='')
rollno = models.IntegerField(primary_key=True)
144
class Meta:
db_table = "alumnus"
class User(models.Model):
rollno = models.IntegerField(primary_key=True)
userid = models.CharField(max_length=20)
passwd = models.CharField(max_length=100)
name = models.CharField(max_length=100)
class Meta:
db_table = "user"
class Userimage(models.Model):
rollno = models.CharField(max_length=20)
image = models.CharField(max_length=200)
class Meta:
db_table = "userimage"
Views.py
from django.shortcuts import render
from django.template import loader
from myapp.models import *
from django.conf import settings
# Create your views here.
from django.http import HttpResponse
def hello(request):
return HttpResponse("<h2>Hello,Welcome to Django!</h2>")
def home(request):
return render(request,"home.html")
def reg(request):
return render(request,"reg.html")
def login(request):
return render(request,"login.html")
def event(request):
return render(request,"event.html")
def grid(request):
return render(request,"grid.html")
def adminweb(request):
request.session['valid']=True
return render(request,"adminweb.html")
def course(request):
return render(request,"course.html")
def feedback(request):
return render(request,"feedback.html")
def newadmin(request):
return render(request,"newadmin.html")
def meet(request):
145
return render(request,"meet.html")
def update(request):
return render(request,"update.html")
def homestart(request):
return render(request,"homestart.html")
def about(request):
return render(request,"about.html")
def forget(request):
return render(request,"forget.html")
def adminforget(request):
return render(request,"adminforget.html")
def regaction(request):
status='successful'
if request.method == 'POST':
rollno=request.POST.get('rollno')
name=request.POST.get('name')
contact=request.POST.get('contact')
email=request.POST.get('email')
address=request.POST.get('address')
doj=request.POST.get('doj')
dob=request.POST.get('dob')
city=request.POST.get('city')
state=request.POST.get('state')
course=request.POST.get('course')
userid=request.POST.get('userid')
passwd=request.POST.get('passwd')
image_file=request.FILES['ppic']
check=Alumnus.objects.filter(rollno=rollno)
try:
check=check[0].rollno
except:
pass
if str(check)==rollno:
status='already exists'
Userimage.objects.create(rollno=rollno,image=rollno+image_file.name)
a=Alumnus(rollno=rollno,contact=contact,dob=dob,doj=doj,email=email,address=address,course=course,u
serid=userid,city=city,state=state)
u=User(passwd=passwd,rollno=rollno,name=name,userid=userid)
a.save()
u.save()
from django.contrib.staticfiles.storage import staticfiles_storage
from django.templatetags.static import static
import os,myapp
# img=Userimage.objects.filter(id='1')
146
path=os.path.dirname(myapp.__file__)
# ff=open(path+'\\static\\pic\\'+image_file.name,'wb+')
# ff.write(img[0].image)
# ff.close()
with open(path+'\\static\\pic\\'+rollno+image_file.name,'wb+') as destination:
for chunk in image_file.chunks():
destination.write(chunk)
return render(request,"reg.html",{'msg':'registration '+status})
def loginaction(request):
if request.method == 'POST':
userid=request.POST.get('userid')
passwd=request.POST.get('pass')
almns=User.objects.filter(userid=userid,passwd=passwd)
if len(almns)>0:
return render(request,"home.html")
else:
return render(request,"login.html",{'msg':'wrong user id & passwd'})
return render(request,"login.html")
def newadminaction(request):
msg=''
if request.method=='POST':
name=request.POST.get('name')
email=request.POST.get('email')
dob=request.POST.get('dob')
contact=request.POST.get('contact')
passwd=request.POST.get('passwd')
cpasswd=request.POST.get('cpasswd')
admin=Admin(name=name,email=email,dob=dob,contact=contact,password=passwd)
if passwd!=cpasswd:
msg='The password and confirmed password are not same'
else:
admin.save()
msg='Record inserted successfully'
return render(request,"newadmin.html",{'msg':msg})
def gridaction(request):
msg=""
if request.method=='POST':
name=request.POST.get('name')
email=request.POST.get('email')
message=request.POST.get('message')
fd=Feedback.objects.filter(email=email)
if len(fd)>0:
msg='error'
else:
147
feed=Feedback(name=name,email=email,message=message)
feed.save()
msg='Responce submitted successfully'
return render(request,"grid.html",{'msg':msg})
def adminwebaction(request):
msg=""
if not request.session.has_key('valid'):
return render(request,"adminweb.html")
if request.method=='POST':
email=request.POST.get('email')
passwd=request.POST.get('passwd')
admin=Admin.objects.filter(email=email,password=passwd)
if len(admin)>0:
result=Feedback.objects.all()
return render(request,"feedback.html",{'result':result})
else:
return render(request,"adminweb.html")
return render(request,"adminweb.html")
def adminforgetaction(request):
if request.method=='POST':
email=request.POST.get('email')
contact=request.POST.get('num')
dob=request.POST.get('dob')
password=request.POST.get('pass')
cpassword=request.POST.get('cpass')
ad=Admin.objects.filter(email=email,contact=contact,dob=dob)
if len(ad)>0:
if (password==cpassword):
a=Admin.objects.filter(email=email).update(password=password)
else:
return render(request,"adminforget.html",{'msg':'Password and confirmed password do
not match'})
else:
return render(request,"adminforget.html")
return render(request,"adminforget.html",{'msg':'Password Updated successfully'})
def forgetaction(request):
if request.method=='POST':
userid=request.POST.get('userid')
rollno=request.POST.get('roll')
passwd=request.POST.get('passwd')
cpasswd=request.POST.get('cpasswd')
us=User.objects.filter(userid=userid,rollno=rollno)
if len(us)>0:
if(passwd==cpasswd):
148
a=User.objects.filter(userid=userid,rollno=rollno).update(passwd=passwd)
else:
return render(request,"forget.html",{'msg':'Password and confirmed password do not
match'})
else:
return render(request,"forget.html")
return render(request,"forget.html",{'msg':'Password Updated successfully'})
def meetaction(request):
if request.method=='POST':
title=request.POST.get('title')
loc=request.POST.get('loc')
date=request.POST.get('date')
time=request.POST.get('time')
sta=request.POST.get('sta')
des=request.POST.get('des')
a=Meet(title=title,loc=loc,date=date,time=time,sta=sta,des=des)
a.save()
return render(request,"meet.html",{'msg':'event updated'})
return render(request,"meet.html",{'msg':'error'})
def event(request):
result=Meet.objects.all()
return render(request,"event.html",{'result':result})
Manage.py
import os
import sys
def main():
"""Run administrative tasks."""
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'sample.settings')
try:
from django.core.management import execute_from_command_line
except ImportError as exc:
raise ImportError(
"Couldn't import Django. Are you sure it's installed and "
"available on your PYTHONPATH environment variable? Did you "
"forget to activate a virtual environment?"
) from exc
execute_from_command_line(sys.argv)
if __name__ == '__main__':
main()
URLs.py
from django.contrib import admin
149
from django.urls import path
from myapp import views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('home/',views.home),
path('reg/',views.reg),
path('login/',views.login),
path('event/',views.event),
path('grid/',views.grid),
path('adminweb/',views.adminweb),
path('course/',views.course),
path('feedback/',views.feedback),
path('newadmin/',views.newadmin),
path('meet/',views.meet),
path('update/',views.update),
path('newadminaction/',views.newadminaction),
path('regaction/',views.regaction),
path('gridaction/',views.gridaction),
path('loginaction/',views.loginaction),
path('adminwebaction/',views.adminwebaction),
path('homestart/',views.homestart),
path('about/',views.about),
path('forget/',views.forget),
path('adminforget/',views.adminforget),
path('adminforgetaction/',views.adminforgetaction),
path('forgetaction/',views.forgetaction),
path('meetaction/',views.meetaction),
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Settings.py
"""
Django settings for sample project.
Generated by 'django-admin startproject' using Django 3.2.3.
For more information on this file, see
https://docs.djangoproject.com/en/3.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.2/ref/settings/
"""
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
150
# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-@&z942vi26pvgsd7qh0iq&94tm=34%$1f^g!1h#=_7ddx5w($4'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp'
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'sample.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'sample.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
151
##DATABASES = {
## 'default': {
## 'ENGINE': 'django.db.backends.sqlite3',
## 'NAME': BASE_DIR / 'db.sqlite3',
## }
##}
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME':'sample',
'USER':'root',
'PASSWORD':'root',
'HOST':'localhost',
'PORT':'3306',
'OPTIONS': {
'autocommit': True,
},
}
}
# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
152
STATIC_ROOT = '/static/'
STATIC_URL = '/static/'
# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
Asgi.py
"""
ASGI config for sample project.
It exposes the ASGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/
"""
import os
from django.core.asgi import get_asgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'sample.settings')
application = get_asgi_application()
8. TESTING
Testing is the process of detecting errors. Testing performs a very critical role for quality assurance and
for ensuring the reliability of software. The results of testing are used later on during maintenance also.
Psychology of Testing
The aim of testing is often to demonstrate that a program works by showing that it has no errors. The
basic purpose of testing phase is to detect the errors that may be present in the program. Hence one
should not start testing with the intent of showing that a program works, but the intent should be to show
that a program doesn’t work. Testing is the process of executing a program with the intent of finding
errors.
Testing Objectives
153
The main objective of testing is to uncover a host of errors, systematically and with minimum effort and
time. Stating formally, we can say,
A good test case is one that has a high probability of finding error, if it exists.
The software more or less confirms to the quality and reliable standards.
Types Of Testing
Unit Testing
Link Testing
Unit Testing
Unit testing focuses verification effort on the smallest unit of software i.e. the module. Using the
detailed design and the process specifications testing is done to uncover errors within the boundary of the
module. All modules must be successful in the unit test before the start of the integration testing begins.
In this project each service can be thought of a module. There are so many modules like Home,
Registration, Login, Event, Visit Us, About Us.
Giving different sets of inputs has tested each module. When developing the module as well as
finishing the development so that each module works without any error. The inputs are validated when
accepting from the user.
In this application we test the programs up as system. Software units in a system are the modules and
routines that are assembled and integrated to form a specific function. Unit testing is first done on
modules, independent of one another to locate errors. This enables to detect errors. Through this errors
resulting from interaction between modules initially avoided.
Link Testing
Link testing does not test software but rather the integration of each module in system. The primary
concern is the compatibility of each module. The Programmer tests where modules are designed with
different parameters, length, type etc.
Integration Testing
After the unit testing we have to perform integration testing. The goal here is to see if modules can be
integrated properly, the emphasis being on testing interfaces between modules. This testing activity can be
considered as testing the design and hence the emphasis on testing module interactions.
154
In this project integrating all the modules forms the main system. When integrating all the modules I
have checked whether the integration effects working of any of the services by giving different
combinations of inputs with which the two services run perfectly before Integration.
System Testing
Here the entire software system is tested. The reference document for this process is the
requirements document, and the goal is to see if software meets its requirements.
Here entire ‘System’ has been tested against requirements of project and it is checked whether all
requirements of project have been satisfied or not.
Acceptance Testing
Acceptance Test is performed with realistic data of the client to demonstrate that the software is
working satisfactorily. Testing here is focused on external behavior of the system; the internal logic of
program is not emphasized.
In this project ‘Alumni Website’, I have collected some data and tested whether project is working
correctly or not. Test cases should be selected so that the largest number of attributes of an equivalence
class is exercised at once. The testing phase is an important part of software development. It is the process
of finding errors and missing operations and also a complete verification to determine whether the
objectives are met and the user requirements are satisfied.
This is a unit testing method where a unit will be taken at a time and tested thoroughly at a statement
level to find the maximum possible errors. I tested step wise every piece of code, taking care that every
statement in the code is executed at least once. The white box testing is also called Glass Box Testing.
I have generated a list of test cases, sample data, which is used to check all possible combinations of
execution paths through the code at every module level.
This testing method considers a module as a single unit and checks the unit at interface and
communication with other modules rather getting into details at statement level. Here the module will be
treated as a block box that will take some input and generate output. Output for a given set of input
combinations are forwarded to other modules.
1. Test cases that reduced by a count that is greater than one, the number of additional test cases that
much be designed to achieve reasonable testing.
2. Test cases that tell us something about the presence or absence of classes of errors, rather than an
error associated only with the specific test at hand.
155
9. IMPLEMENTATION
After carefully planning the project, we are ready to start the project implementation phase, the third
phase of the project management life cycle. The implementation phase involves putting the project plan
into action. Now we have to direct and manage each activity, every step of the way. That’s what happens
in the implementation phase of the project life cycle: we follow the plan we’ve put together and handle
any problems that come up.
The implementation phase is where the project team actually does the project work to produce the
deliverables. The word “deliverable” means anything your project delivers. The deliverables for your
project include all of the products or services that you and your team are performing for the client,
customer, or sponsor, including all the project management documents that you put together.
156
Prepare the infrastructure. ... Many solutions are implemented into a production environment that is
separate and distinct from where the solution was developed and tested. It is important that the
characteristics of the production environment be accounted for. This strategy includes a review of
hardware, software, communications, etc.
Coordinate with the organizations involved in implementation. ... This may be as simple as
communicating to your client community. Part of the implementation work is to coordinate the work of
any other groups that have a role to play.
Implement training. ... Many solutions require users to attend training or more informal coaching sessions.
This type of training could be completed in advance, but the further out the training is held, the less
information will be retained when implementation rolls around. Training that takes place close to the time
of implementation should be made part of the actual implementation plan.
Install the production solution. ... Solution needs to be moved from development to test. If the solution is
brand new, this might be finished in a leisurely and thoughtful manner over a period of time. If this project
involves a major change to a current solution, you may have a lot less flexibility in terms of when the new
solution moves to production, since the solution might need to be brought down for a period of time. You
have to make sure all of your production components are implemented successfully, including new
hardware, databases, and program code.
Convert the data. ... Data conversion, changing data from one format to another, needs to take place once
the infrastructure and the solution are implemented.
Perform final verification in production. ... You should have prepared to test the production solution to
ensure everything is working as you expect. This may involve a combination of development and client
personnel. The first check is just to make sure everything is up and appears okay. The second check is to
actually push data around in the solution, to make sure that the solution is operating as it should.
Depending on the type of solution being implemented, this verification step could be extensive.
Implement new processes and procedures. ... Many IT solutions require changes to be made to business
processes as well. These changes should be implemented at the same time that the actual solution is
deployed.
Monitor the solution. … Usually the project team will spend some period of time monitoring the
implemented solution. If there are problems that come up immediately after implementation, the project
team should address and fix them.
157
10. SIGNIFICANCE
Creating an engaged, supportive alumni network is crucial to an institution’s success. If
communication stops once graduates leave the institution, their understanding of the
college becomes stale. Instead they should be kept informed so they can remain engaged
and keep the progress of the university.
As graduates of the institution, alumni have a special connection with the university and as
a result are likely to be some of its more loyal supporters.
“An engaged alumni network allows the college to benefit from the skills and experience of
our graduates, by offering their support to the students, to the institution and to each
other. If we keep them properly informed and engaged, alumni are our most loyal
158
supporters and our best ambassadors, offering invaluable marketing and promotion across
their personal and professional networks.”
Creating an engaged alumni network is beneficial for us because engaged graduates are
much likely to want to “give back” to the college; that could be, for example, by coming
back and sharing their experiences with prospective and current students.
11. Limitations
All work is handled by the admin only. So, the admin has to be active all round to make changes in the
website.
The alumni registered on the portal cannot connect with each other.
The password of the account holder does not include 2nd step verification. Thus, the password is not
protected.
The database has to be connected with the site at all times so that alumni can register him on the
website.
159
12. REFERENCES
Websites:
www.python.org
www.quora.com
www.w3schools.com
www.stackoverflow.com
www.javatpoint.com
160
Acknowledgement
It gives me immense pleasure in submitting the project report on “Alumni Website” for the
partial fulfillment of the requirements for the degree of B.Voc(SD& eG) at Deen Dayal
Upadhyay Kaushal Kendra.
I wish to place on my record my deep sense of gratitude and dedicate the whole project to
my project guide, ma’am Dr. Amitabha Yadav for her constant motivation and valuable help
161
through the project work. I also want to extend my thanks to other faculties for their
cooperation during my course.
I have completed the project at the UPTEC Computer Consultancy Limited. I would like to
thank our instructor Sir Anshumaan and our project coordinator Leenu Jain ma’am for their
help and support throughout the completion of the project.
Finally I would like to thank my friends and my team for their cooperation to complete this
project, who not only encouraged me but also helped me in the process of making this
project.
Thanking All
Vaibhav Srivastava
718621
Acknowledgement
162
It gives me immense pleasure in submitting the project report on “Alumni Website” for the
partial fulfillment of the requirements for the degree of B.Voc(SD& eG) at Deen Dayal
Upadhyay Kaushal Kendra.
I wish to place on my record my deep sense of gratitude and dedicate the whole project to
my project guide, ma’am Dr. Amitabha Yadav for her constant motivation and valuable help
through the project work. I also want to extend my thanks to other faculties for their
cooperation during my course.
I have completed the project at the UPTEC Computer Consultancy Limited. I would like to
thank our instructor Sir Anshumaan and our project coordinator Leenu Jain ma’am for their
help and support throughout the completion of the project.
Finally I would like to thank my friends and my team for their cooperation to complete this
project, who not only encouraged me but also helped me in the process of making this
project.
Thanking All
Dhurval Raj Tripati
718645
Acknowledgement
It gives me immense pleasure in submitting the project report on “Alumni Website” for the
partial fulfillment of the requirements for the degree of B.Voc(SD& eG) at Deen Dayal
Upadhyay Kaushal Kendra.
163
I wish to place on my record my deep sense of gratitude and dedicate the whole project to
my project guide, ma’am Dr. Amitabha Yadav for her constant motivation and valuable help
through the project work. I also want to extend my thanks to other faculties for their
cooperation during my course.
I have completed the project at the UPTEC Computer Consultancy Limited. I would like to
thank our instructor Sir Anshumaan and our project coordinator Leenu Jain ma’am for their
help and support throughout the completion of the project.
Finally I would like to thank my friends and my team for their cooperation to complete this
project, who not only encouraged me but also helped me in the process of making this
project.
Thanking All
Samriddhi Shanker
718648
164