lOMoARcPSD|39218703

CSS Microproject

Engineering (Bharati Vidyapeeth College of Engineering, Navi Mumbai)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)
 lOMoARcPSD|39218703

A
Micro Project Report
On

COLLAGE WEBSITE

Submitted By

Prathmesh Vijay Kannalwar

Samarth Balaji Bondhare

Guided By

MR. DEVDATT KHILLARE

To
DEPARTMENT OF COMPUTER ENGINNERING
GRAMIN TEECHNICAL & MANAGEMENT CAMPUS,
VISHNUPURI NANDED – 431601.

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

(MSBTE), MUMBAI
ACADEMIC YEAR 2022 - 2023

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

CERTIFICATE

This is to certified that the project entitled

COLLAGE WEBSITE
Being submitted by Mr. Prathmesh Vijay Kannalwar To state board of
Technical Education Mumbai as a partial fulfilment of award of
Diploma In Computer Engineering is record of bonafide work carried
out by his under supervision and guidance of MR. Devdatt Khillare
The assigned project is performed statisfactorily in the academic year
2022 – 2023.

MR. DEVDATT KHILLARE MS. DUDHMALE M.N

Guide HOD

DR. PAWAR V.S

Principal

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

CERTIFICATE

This is to certified that the project entitled

COLLAGE WEBSITE
Being submitted by Mr. Samarth Balaji Bondhare To state board of
Technical Education Mumbai as a partial fulfilment of award of
Diploma In Computer Engineering is record of bonafide work carried
out by his under supervision and guidance of MR. Devdatt Khillare
The assigned project is performed statisfactorily in the academic year
2022 – 2023.

MR. DEVDATT KHILLARE MS. DUDHMALE M.N

Guide HOD

DR. PAWAR V.S

Principal

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

ANNUEXURE ||
Evaluation Sheet for the Micro Project
Academic Year: __2022 - 2023____ Name of faculty: MR Devdatt Khillare
Course: ___CO Engineering__________ Course Code:_______.
Semester: ___05____
Title of Project: ____Collage Website____________________
Cos addressed by 6 the Micro Project: _______________________________________
A._____________________________________________________________________
B._____________________________________________________________________
C._____________________________________________________________________
D._____________________________________________________________________
Major Learning Outcomes achieved by doing the Project:
A . Practical Outcomes: ___________________________________________________
_______________________________________________________________________
B . Unit Outcomes in Cognitive domain: ______________________________________
_______________________________________________________________________
C. Outcomes in Affective Domains:
 internship/ interpersonal
Comments / Suggestions about team work/ leadership communication (if any)

Roll No. Student Marks out of 6 Marks out of 4 for Total out of 10
Name. performance in performance in
group activity oral/presentation.

28 Prathmesh
Vijay
Kannalwar
04 Samarth
Balaji
Bondhare

MR. DEVDATT KHILLARE

(Name & Signature of faculty)

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

INDEX

Sr. Title Page No.

1. Abstract 5
2. Introduction 6
3. Architecture of IP finder 7-8
4. Problem Statement 9
5. Code 10
6. Result 11
7. Conclusion 12
8. Reference 13

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

Title of Project: College Website

1. Aims/Benefits of the Micro-Project:

a) Great help with studies and in making a career choice.

b) Improves academic performance and interest.

c) To Support Self Directed Learning.

d) To help students develop teamwork and problem-solving skills.

e) To enhance the skills to ‘communicate effectively and skillfully at workplace’.

2. Course Outcomes Addressed:

a. Create interactive webpage using program flow control structure.

b. Implement array and functions in Java Script.

c. Create based Event based form using Java Script.

d. Use java Script for handling Cookies.

e. Create Interactive webpages using regular expression for validation.

f. Create menu and navigation in web pages.

3. Proposed Methodology:

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

The work will be distributed among 3 students involved in the group. To complete
the Project “College Website”, qualitative method will be used in which data
collection, analysis and interpretation is required. The data will be collected from
different sources such as Internet, reference books etc. The analysis and
interpretation will be done by observing the collected data & programming work.
Finally the data will be represented with interpretation in the form of application or
collected data.

Abstract

In the present times Internet and automation is one of the vital things which
we want to adopt for efficiently. College website consists of many webpages
and implement different kinds of menus and scrollbars. In this we have
implemented dynamic menus and done the styling and validation part using
JavaScript. Java Script is always one of the languages which seems to be the
best option for validation in webpages like form validation, menu validation,
events validations etc. A college management system enables colleges and
higher education to manage enrollment, admissions, students, faculty,
attendance, fees, scheduling, assignments, grades and library of the institution.
The College ERP allows you to manage the entire academic and administrative
processes hassle free. Each pages are interlinked to each other. When we click
on the particular menus it will redirect to corresponding pages according to the
specified destination.

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

Introduction

Client-side scripting is changing interface behaviors within a specific web page

in response to mouse or keyboard actions, or at specified timing events. In this
case, the dynamic behavior occurs within the presentation. The client-side
content is generated on the user's local computer system.

Such web pages use presentation technology called rich interfaced pages.
Client-side scripting languages like JavaScript or Action Script, used for
Dynamic HTML (DHTML) and Flash technologies respectively, are frequently
used to orchestrate media types (sound, animations, changing text, etc.) of the
presentation. Client-side scripting also allows the use of remote scripting, a
technique by which the DHTML page requests additional information from a
server, using a hidden frame, XML Http Requests, or a Web service.

In our project we have developed a website in which we have create few pages
for our Institute website in which we have created various web pages of

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

different functions. Main aspect of this website is to validate the menu bars and
redirect the pages according to the menus.

We have created pages like home, About, Facilities, Contact and Gallery. Form
validation normally used to occur at the server, after the client had entered all
the necessary data and then pressed the Submit button. If the data entered by a
client was incorrect or was simply missing, the server would have to send all the
data back to the client and request that the form be resubmitted with correct
information. This was really a lengthy process which used to put a lot of burden
on the server.

We have used HTML (Hyper Text Markup Language) for our front end design.
For backup functions we have used PHP language and Java Script for form
validation. Why is this necessary to create this kind of website to improve the
experience the students and to improve the user experience we have used or
create or separate sections and in different sections we have used different
elements of java script?

Pull down menus is a kind of menu in which you have defined a menu in which
one menu and after that sub menu is created. In poll down menu one is the main
menu and the others are the sub menu. When we do mouse over the menu tab
then instantly it displays the sub menu items just below the main menu. We
have done validation in the menu like in which we have validate the menu like
one click and double click.

Dynamically changing the menu means the items present in the menu are
changing automatically. Following is a JavaScript example in which two menus
are placed – one for category of students in the class and other names of
facilities in the college website.

In this website we are solving a very common problem – The common problem
that user normally creates is – he/she forgets to select particular item from the

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

menu and if such item is required for processing further then it creates severe
problem.

We have developed different menu section like floating menu, pop up menu,
sliding menu etc.

The popup menu contains lower level menu items that are associated with the
top-level menu item. The pop menu appears as you move mouse over each
menu items. Sometimes there is limited space on the web page for displaying all
the menu options. Then in such case only limited menu options are displayed
and remaining options can be accessed by scrolling left or right.

LITERATURE SURVEY

Title of the book Author Publication

Making Use of JavaScript Shweta Bhasin Wiley; 1 edition

Mastering JavaScript Tomas Corral Packt Publication

Design Patterns

Java FX Script Jim Weaver Apress; 1st ed. edition

Client Side Action Against Mohammed H. LAP LAMBERT Academic Publication

Cross Site Scripting Attacks Abu Hamada

Client Side Scripting Dr. Meenakshi A. Nirali Publication

Language Thalor

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

Implementation

HTML Code:

<body>

<!-- header -->

<header>

<div class="container">

<div class="header d-lg-flex justify-content-between align-items-center py-2 px-sm-2

px-1">

<div id="logo">

<h1><a href="index.html">My School</a></h1>

</div>

<div class="nav_w3ls ml-lg-5">

<nav>

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

<label for="drop" class="toggle">Menu</label>

<input type="checkbox" id="drop" />

<ul class="menu">

<li><a href="index.html">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#join">Join Now</a></li>

<li>

<!-- First Tier Drop Down -->

<label for="drop-2" class="toggle toogle-2">Pages <span class="fa fa-

angle-down"

aria-hidden="true"></span>

</label>

<a href="#">Pages <span class="fa fa-angle-down" aria-

hidden="true"></span></a>

<input type="checkbox" id="drop-2" />

<ul>

<li><a href="#events" class="drop-text">Events</a></li>

<li><a href="#what" class="drop-text">What We Do?</a></li>

<li><a href="#courses" class="drop-text">Popular Courses</a></li>

<li><a href="#stats" class="drop-text">Statistics</a></li>

<li><a href="#gallery" class="drop-text">Gallery</a></li>

</ul>

</li>

<li><a href="#contact">Contact</a></li>

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

<li><a href="login.html">Login</a></li>

<li><a href="register.html">Register</a></li>

</ul>

</nav>

</div>

CSS Code Java Script Code

<script type="text/javascript">
nav ul ul li a:hover {
function data_check()
}
{
var
/* Display Dropdowns on Hover */
str=document.getElementById("l1").value;
nav ul li:hover>ul {
if(str.length <=0){
display: inherit;
alert("Please select one option ");
}
}else{
document.forms['drop_list'].submit();//
/* Fisrt Tier Dropdown */
working
nav ul ul li {
}
width: 170px;
}
float: none;
</script>
display: list-item;

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

Result

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

Use Case Diagram

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

Fig. Use Case Diagram

Data Flow Diagram

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

Fig. Data Flow Diagram

Conclusion

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

We have concluded that we have created a college website in which we have developed
different sections in which we have used different menu elements and form and done form
validation with the use of Java Script. We have created students information menus in which
all the recent event is mentioned. We have developed a list down menu to select the
department like computer department, civil department, and mechanical department and
so on.

References

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)

 lOMoARcPSD|39218703

Books:

 JavaScript: The Good Parts (Douglas Crockford)

 Effective JavaScript (David Herman)

Websites:

 https://www.w3schools.com/

 http://www.echoecho.com/jsdropdown.htm

 https://www.tutorialspoint.com/

Downloaded by MOHAMMAD RASHID (mohammad.rashid2181@gmail.com)