“NGO Website”

MINI PROJECT REPORT (KCA-353)

SUBMITTED TO

DR. A.P.J. ABDUL KALAM TECHNICAL UNIVERSITY,

LUCKNOW
(U.P.)

FOR THE PARTIAL FULFILLMENT OF THE DEGREE OF

MASTER IN COMPUTER APPLICATION SESSION (2022-

24)

Under the Guidance of: Submitted by:

Ms. Vaishnavi Sharma Sudhanshu Vishwakarma(2200980140044)

School of IT Naman Gupta (2100980140030)
Assistant Professor
IMS-Noida

INSTITUTE OF MANAGEMENT STUDIES, NOIDA

 PERFORMA FOR APPROVAL OF MCA MINI PROJECT (KCA-353)

Roll No.: 2200980140044

Name of the Student: Sudhanshu Vishwakarma
E-mail: sudhanshuvishwakarma.mca22022@m
ail.com
Mob. No.: 8853451387
Title of the Project: NGO Website
Name of the Project Guide: Ms. Vaishnavi Sharma

For Office Use Only:

Signature of the Guide

Approved Not Approved Date :

Suggestions (if any):-

1
2
3
4
5
 CERTIFICATE OF ORIGINALITY

I hereby declare that Mini Project (MCA-353) titled “NGO Website” has been
submitted to the School of IT, IMS Noida, which is affiliated with ABDUL
KALAM TECHNICAL UNIVERSITY LUCKNOW (U.P.), for the partial
fulfillment of the degree of Bachelor of Computer Application, in A.Y. 2023-24.
This has not previously formed the basis for the award of any other degree,
diploma, or other title from any other University.

Place: IMS Noida Date:

Name of Student: Sudhanshu Vishwakarma

University Roll Number: 2200980140044

Signature
 ACKNOWLEDGEMENT

I would like to express my special thanks to my project guide Mr. Vaishnavi

Sharma for her time and efforts that he provided throughout the year. Her
useful advice and suggestions were really helpful to me during the project’s
completion. I am eternally grateful to my project guide.
I would like to acknowledge that this project was completed entirely by me and
not by someone else.

Signature

Sudhanshu Vishwakarma (2200980140044)

 INDEX
No. Description Page No.
1. Project Profile
1.1 Project Definition
1.2 Project Description
1.3 Existing System / Work Environment

2. Work Environment

3. Hardware & Software Requirements

4 Modules

5. Design
5.1 Diagrams
5.1.1. DFD
5.1.2. Entity Relationship Diagram
6. Implementation

7. Future Enhancement
8. Bibliography
 1. Project Profile

1.1 Project Definition

A minor project for an NGO website in a college context typically refers to a

smaller-scale web development initiative aimed at supporting the mission and
activities of a non-governmental organization (NGO). In this context, a minor project
may involve creating or enhancing a website for an NGO. Here's a definition: A
minor project for an NGO website in a college setting is a web development endeavor
undertaken by students or faculty members to design, develop, or improve a website
that serves the needs of a non-governmental organization.

This project typically involves tasks such as website design, content creation, and
functionality enhancement, and may focus on specific features or functionalities
requested by the NGO. The primary goal is to contribute to the organization's online
presence, communication, and outreach efforts, aligning with the college's educational
objectives and providing students with practical experience in web development and
social responsibility.

This definition highlights that a minor project in this context is a collaborative effort
between college students and an NGO, aimed at benefiting both parties by addressing
the NGO's digital needs while offering students valuable hands-on experience.
 1.2 Project Description
This software portion entitled “NGO Activity Portal” is very useful for any non-government organization
to develop its social services in a more effective manner. So that they can improve society without any
poverty and illiteracy.

The module is used to display the nongovernment organization information like their name, place, history
of the NGO, when they established their organization, president of the organization, vice president,
number of members of the NGO, etc.
The past work module is used to display the NGO’s exciting service to society.

It deals with the service of their poor people, illiterate people, and how they saved their society from
several Natural disasters like floods and rains. On-going Programs is told about the currently running
programs of this organization.

It supports various programs like the Violating Child Labor’s system, Anti-dowry System, self-help
Groups, Rescue of Poor People, Rescue People from various natural disasters like floods, Tsunami, etc.
The photo gallery is used to display their collection of photos of their good work done for the society.
It tells their organization's services in a more accurate way.

A student welfare module describes the scholarships for the well-studied students and the students to those
who are in slum areas. It also provides school materials for disabled students once in month. It’s a very
useful scheme for students to encourage their studies.

Feedback is used to get the customer opinions. So that it can improve its functionality in a more accurate
and easiest way. Based on the Customer feedback it can easily develop their services for society.
 1.3 Existing System / Work Environment

Existing System:

Generally, all the Nongovernmental activities details like past work and going work details are maintained
manually by the organization. But it takes more time to maintain these records and it is very difficult to
find the details for various particulars.
Everything is done manually, so it is very difficult to maintain the records.
It’s also very difficult to find the activities
Long-time process
It takes more time to prepare various events within a short time.
 1) Work Environment

The proposed system is developed to overcome the disadvantages of the existing specified earlier. This
system is being created using PHP and My SQL. Since PHP is our Front-End it looks more look and feels
for the web application is very Effective & Security.

This look and feel of it is more users friendly and easy to operate on. We can create dynamic and
Interactive user application using PHP.
All the Nongovernmental activities details like past work and going work details are maintained
systematically by the organization through the website.
This project is reliable, flexible. So it is easy to store and retrieve the huge amount of data.

2 Takes less time to do the process.

3 Fully Automated
Hardware & Software Requirements

Hardware requirements:
1.Processor: Minimum Intel core i3

2.RAM: Minimum 4GB

3. Hard disk: Minimum 8GB

4. Connectivity: Internet connectivity required

Software requirements:

Operating System: Windows 7

professional/8/10/11

Front end: HTML, CSS, Javascript

Modules:
Authentication
Past work
On-Going Programs
Photo gallery
Students Welfare
Sponsors
Module Description:
Authentication Module
This module contains all the information about the authenticated Administrator.

Past work :-

In this module, Administrator Add the past work Information using this module. It Contains Information
about the Program id, Program Name, Description, Start Date, End Date.

It makes easy to integrate Administrator authentication into your web application. Information is stored in
your database.

Ongoing Program :-

This page is handled by the administrator. The administrator has full right to access the entire project. In
this module, the admin adds the ongoing program information.

This information included the details of the program ID, Program Name, Description, Start Date, End
Date. This detail also includes the status details for complete or not.

The details are stored in a database. It can view by Admin for reference.

Photo Gallery :-

This page is handled by the administrator. In this module, the admin adds the photo gallery of program
information.

This information included the details of the Program id, Program Name, Date, and Photo. The details are
stored in a database. It can view by User for reference.

Student Welfare :-
This page is handled by the administrator. In this Student Welfare module, the admin adds the welfare
information.

This information included the details of the Work id, work Name, Description, Sponsor Name, and
Announcement Date. The details are stored in a database. It can view by User for reference.

Sponsors :-

This page is handled by the Users. In this Sponsors module, the volunteer sponsors register his/her
information to this web application.

This information included the details of the Sponsors id, Sponsors Name, Mobile No, Mail ID, Address,
Sponsor Amount. The details are stored in the database. It can view by Administrator for reference
5. Design

5.1.1 DFD
ER Diagram

5.1.2
4 Implementation

Project Scope Definition: Identify the specific objectives of the NGO website.

Domain and Hosting:

Purchase a domain name (e.g., www.ngocollegeproject.com) and hosting plan.

Website Design:

Choose a user-friendly Content Management System (CMS) like WordPress.

Select a suitable theme that aligns with the NGO's mission and customize it.

Content Creation:

Create webpages for the NGO's mission, programs, projects, and contact information.
Develop engaging content and use high-quality images to showcase the NGO's work.

Features and Functionality:

Implement features such as a donation button, volunteer registration form, and

newsletter subscription.
Ensure mobile responsiveness for accessibility on different devices.

User Authentication:

If needed, create a login system for members, volunteers, or donors.

Donation Integration:

Integrate a secure payment gateway (e.g., PayPal) to accept online donations.

SEO Optimization:

Optimize website content for search engines (SEO) to improve visibility.

Testing and Debugging:

Test the website thoroughly to ensure all features work correctly.

Fix any bugs or issues that arise during testing.

Security Measures:

Implement security plugins or measures to protect against cyber threats.

Documentation:

Create documentation for future maintenance and updates.

Training:

Train the NGO staff or college students responsible for managing the website.
Launch and Promotion:

Launch the website and promote it through social media and other channels.

Maintenance:

Regularly update content and security measures.

Monitor website performance and make improvements as needed.

Feedback Collection:

Set up a feedback mechanism to gather input from users for continuous improvement.

Reporting:

Generate reports on website traffic, donations, and user engagement.

This project will provide valuable experience in web development, content
management, and online presence for the NGO. Ensure that you follow ethical
guidelines and data privacy regulations during implementation.
 Future Enhancement

To enhance your Python Application for turning face expressions into emojis and emotion
recognition further, consider the following future enhancements and features:

1. Interactive Donation Portal: Implement an interactive and secure donation portal that allows
donors to make online contributions easily. This could include options for one-time donations,
recurring donations, and the ability to specify where the donation should be allocated within the
NGO's initiatives.

2. Volunteer Management System: Create a system for managing volunteers. Volunteers can sign
up, specify their skills and interests, and be matched with relevant projects or events within the
NGO. This can streamline volunteer recruitment and coordination.

3. Event Calendar: Develop an event calendar to showcase upcoming events, workshops, and
campaigns organized by the NGO. Users should be able to register for events and receive event
reminders.

4. Impact Reporting: Include a section dedicated to showcasing the impact and outcomes of the
NGO's projects. This could include statistics, success stories, and testimonials from beneficiaries.

5. Multilingual Support: Make the website accessible to a wider audience by offering content in
multiple languages, especially if the NGO serves diverse communities.

6. Social Media Integration: Integrate social media sharing buttons and feeds to encourage users to
share NGO activities and stories on their own social profiles, increasing visibility and engagement.

7. Newsletter Subscription: Allow users to subscribe to the NGO's newsletter for regular updates.
Include an archive of past newsletters for reference.

8. Feedback Mechanism: Implement a feedback form or survey to collect input from users and
donors. Use this feedback to continuously improve the NGO's programs and website.
9. Online Store: If the NGO sells merchandise or products to support its cause, consider adding an
online store for purchasing items, with proceeds going towards the NGO's mission.

10. Data Analytics: Use data analytics to gather insights into user behavior and preferences, helping
the NGO make data-driven decisions for its projects and outreach.

These enhancements can help the NGO website for the college become more engaging,
effective, and user-friendly, ultimately supporting the organization's mission and goals.
<html>
<head>
<title>
front page</title>
<head>
<link rel="stylesheet" href="index.css">
<script>
var counter = 1;
setInterval(function() {
document.getElementById('radio'+ counter).checked = true;
counter++;

if(counter>4){
counter=1
}

}, 5000);
</script>

<body>

<header class="header">
<a href="#" class="logo">LOHARS.org</a>
<nav class="nav-items">
<a href="/index.html">Home</a>
<a href="/ourclub/club.html">Our Club</a>
<a href="/blog/blog.html">Blog</a>
<a href="/about us/about.html">About</a>
<a href="/contact us/contact.html">Contact</a>
</nav>
</header>
<main>
<div class="intro">
<h1>VISHWAKARMA SEWA SANSTHAN</h1>
<p>Connecting all Vishwakarmas The Born Engineers.</p>
</div>
<br>
<!-- Image Slider Start -->
<div class="slider">
<div class="slides">
<!-- Radio Button Start -->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!-- Radio Button Close -->
 <!-- Slide Image Start -->
<div class="slide first">
<img src="/mains/imgs/slider 1.jpg" alt="">
</div>
<div class="slide">
<img src="/mains/imgs/slider 2.jpg" alt="">
</div>
<div class="slide">
<img src="/mains/imgs/slider 3.jpeg" alt="">
</div>
<div class="slide">
<img src="/mains/imgs/slider 4.jpg" alt="">
</div>
<!-- Slide Image Close -->
<!-- Automatic Navigation Start -->
<div class="navigation-auto">
<div class="auto-btn-1"></div>
<div class="auto-btn-2"></div>
<div class="auto-btn-3"></div>
<div class="auto-btn-4"></div>
</div>
<!-- Automatic Navigation Close -->
</div>
<!-- Slides Close -->
<!-- Mannual Navigation Start -->
<div class="navigation-mannual">
<label for="radio1" class="mannual-btn"></label>
<label for="radio2" class="mannual-btn"></label>
<label for="radio3" class="mannual-btn"></label>
<label for="radio4" class="mannual-btn"></label>
</div>
<!-- Mannual Navigation Close -->
</div>
<!-- Image Slider Close -->
<br>
<marquee behavior="alternate" onmouseover="this.stop()"
onmouseout="this.start()">
<font face="verdana" color="black"><a
href="http://www.lohars.org/projects.html" style="color:
black;"><b>Supporting Document for ST
certificate in Bihar</b></a></font>
</marquee>
<br>
<div class="achievements">
<div class="work">
<i class="fas fa-atom"></i>
<p class="work-heading">Vishwakarma Puja</p>
 <p class="work-text">Vishwakarma Puja is celebrated widely on every
year 17 September. This is time of resolution and an inspiration for
workers, craftsmen and engineers to create new products and increase
productivity. They make resolution from this auspicious day to perform
better. This ritual usually takes place within the factory, workshops and
manufacturing unit premises.</p>
</div>
<div class="work">
<i class="fas fa-skiing"></i>
<p class="work-heading">History and Spread</p>
<p class="work-text">We belongs to the Parusheya Brahmin community.
These brahmin migrants who settled in Bihar, Madhya Pradesh and Maharashtra
identify themselves as Maithil Brahmins. Vishwakarma from Maharashtra
identify themselves as Vishwa Brahmins Vishwakarma from Gujarat identify
themselves as Panchal Brahmins.</p>
</div>
<div class="work">
<i class="fas fa-ethernet"></i>
<p class="work-heading">Position In Society</p>
<p class="work-text">In Kerala, the Vishwakarmas have claimed a
higher social status for many years, and believe that the trades which they
traditionally follow are superior to the work of a manual labourer because
they require artistic and scientific skills as well as those of the
hand.</p>
</div>
</div>
<div class="about-me">
<div class="about-me-text">
<h2>About Vishwakarma Ji</h2>
<p>According to Purana Bhagwan Vishwakarma "The Lord of the Arts" Son
of Brahma, is reverential because of his specialized knowledge and science
not only for humans but also for deities. He architected and created Sone
ki Lanka, Dwarka, Hastinapur and Indra prastha apart from Indrapuri,
Kuberpuri and all building, vehicles for deities. Bhagwan Vishwakarma is
also credited for creating the sacred weapons for Dieties including "Vajra"
the sacred weapon of Devraj Indra and "KaalDand" of Yamraaj. Bhagwan
Vishwakarma is regarded as the god of architecture and engineering.</p>
<p>According to Vedas Vishwakarmaji created Brahma, Vishnu, Mahesh
and gave them power and direction to create and run the world.
Parmapita created Gayatri from his body and gave birth of 5 Rishis
so Vishwakarmaji had five sons - Manu, Maya, Twastha, Shilpi and
Devagya.</p>
<p>The eldest son of Vishwakarma Bhagwan was Manu, married with
Kanchna, daughter of Rishi Angira. Rishi Agnigarva and Rishi Sarvatomukh
were born in this clan. Second son was Maya married with Sulochana,
daughter of Rishi Parasar. Oaj, Mahoaj, Vishnuvardhan and Suryatanti were
born in this clan. Third son was Twastha, he was married with Jayanti,
daughter of Rishi Kaushik. Fourth was Shilpi, he was married with Karuna,
daughter of Rishi Bhrigu and Sage Devagya was the fifth son of bhagwan
Vishwakarma, he was married with Chandrika, daughter of Rishi Gemini.</p>
</div>
<img src="/mains/imgs/god.jpg" alt="me">
</div>
</main>
<footer class="footer">
<div class="bottom-links">
<div class="links">
<span>More Info</span>

<a href="/alumini/alumini.html">Luminaries</a>
<a href="/matrimony/mmatrimony.html">Matrimony</a>
<a href="/temple/temple.html">Temple</a>
<a href="/moral/moral.html">Moral Story</a>
<a href="/project/project.html">Projects</a>
<a href="/photo gallery/photo.html">Photo Gallery</a>
</div>
<div class="links">
<span>Social Links</span>
<a href="#"><i class="*">Facebook</i></a>
<a href="#"><i class="*">Instagram</i></a>
<a href="#"><i class="*">Youtube</i></a>
</div>
<div class="links">
<span>More About </span>
<a href="/contact us/contact.html"><i class="">Contact Us</i></a>
<a href="/about us/about.html"><i class="*">About Us</i></a>

</div>
</div>
</footer>
</body>
</html>
@import
url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');

body {
margin: 0;
box-sizing: border-box;

}
/* CSS for header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;

.header .logo {
font-size: 25px;
font-family: 'Sriracha', cursive;
color: #000;
text-decoration: none;
margin-left: 30px;
}

.nav-items {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f5f5f5;
margin-right: 20px;
}

.nav-items a {
text-decoration: none;
color: #000;
padding: 35px 20px;
}
/* CSS for main section */
.intro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 520px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0,
0, 0.5) 100%), url("/mains/imgs/img11.avif");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.intro h1 {
font-family: sans-serif;
font-size: 60px;
color: #171718;
font-weight: bold;
text-transform: uppercase;
margin: 0;
}

.intro p {
font-size: 20px;
color: #d1d1d1;
text-transform: uppercase;
margin: 20px 0;
}

.slider{
width: 100%;
height: 300px;
border-radius: 10px;
overflow: hidden;
justify-content: center;
position: relative;
align-items: baseline;
}

.slides{
width: 500%;
height: 300px;
display: flex;
}

.slides input{
display: none;
}

.slide{
width: 20%;
transition: 2s;
}
.slide img{
width: 100%;
height: 320px;
}

.navigation-mannual{
position: absolute;
width: 100%;
margin-top: -40px;
display: flex;
justify-content: center;
}

.mannual-btn{
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}

.mannual-btn:not(:last-child){
margin-right: 40px;
}

.mannual-btn:hover{
background-color: #ccc;
}

#radio1:checked ~ .first{
margin-left: 0;
}

#radio2:checked ~ .first{
margin-left: -20%;
}

#radio3:checked ~ .first{
margin-left: -40%;
}

#radio4:checked ~ .first{
margin-left: -60%;
}

/* Automatic Navigation */
.navigation-auto{
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}

.navigation-auto div{
border: 2px solid #333;
padding: 5px;
border-radius: 10px;
transition: 1s;
}

.navigation-auto div:not(:last-child){
margin-right: 40px;
}

#radio1:checked ~.navigation-auto .auto-btn-1{

background: #ccc;
}

#radio2:checked ~.navigation-auto .auto-btn-2{

background: #ccc;
}

#radio3:checked ~.navigation-auto .auto-btn-3{

background: #ccc;
}

#radio4:checked ~.navigation-auto .auto-btn-4{

background: #ccc;
}

.achievements {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40px 80px;
}

.achievements .work {
display: flex;
flex-direction: column;
justify-content: center;
 align-items: center;
padding: 0 40px;
}

.achievements .work i {
width: fit-content;
font-size: 50px;
color: #333333;
border-radius: 50%;
border: 2px solid #333333;
padding: 12px;
}

.achievements .work .work-heading {

font-size: 20px;
color: #333333;
text-transform: uppercase;
margin: 10px 0;
}

.achievements .work .work-text {

font-size: 15px;
color: #585858;
margin: 10px 0;
}

.about-me {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 80px;
border-top: 2px solid #eeeeee;
}

.about-me img {
width: 500px;
max-width: 100%;
height: auto;
border-radius: 10px;
}

.about-me-text h2 {
font-size: 30px;
color: #333333;
text-transform: uppercase;
margin: 0;
}
.about-me-text p {
font-size: 15px;
color: #585858;
margin: 10px 0;
}
/* CSS for footer */
.footer {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #302f49;
padding: 40px 80px;
width: 100%;
flex-wrap: wrap;
}

.footer .copy {
color: #fff;
}

.bottom-links {
display: flex;
justify-content: space-around;
align-items: flex-start;
padding: 40px 0;
}

.bottom-links .links {
display: flex;
align-items: baseline;
flex-direction: column;
align-items: flex-start;
padding: 0 40px;
}

.bottom-links .links span {

font-size: 20px;
color: #fff;
text-transform: uppercase;
margin: 10px 0;
}

.bottom-links .links a {
text-decoration: none;
color: #a1a1a1;
padding: 10px 20px;
}
 Bibliography

Online Resources:

https://www.w3schools.com/

https://www.phptpoint.com/

https://www.javatpoint.com/mysql-queries

https://www.w3schools.com/bootstrap/