GREEN UNIVERSITY OF BANGLADESH (GUB)

Design and Development of a Website for Green

University Computer Club

Submitted by
Md. Rakibul Islam (181002103)
Aowal Hossen Mazumdar (181002084)

A project submitted to the Department of Computer Science & Engineering

for the partial fulfillment of the degree of
Bachelor of Science in Computer Science & Engineering

Supervised by
Arpita Chowdhury
Lecturer
Department of Computer Science & Engineering

Department of Computer Science & Engineering

Green University of Bangladesh
220/D Begum Rokeya Sarani, Dhaka-1207
JUNE 2022
 Declaration

We hereby declare that the work which is being presented in the project entitled, ”Design
and Development of a Website for Green University Computer Club” in partial fulfillment
of requirements for the award of degree of Computer Science and Engineering (CSE),
Green University of Bangladesh is an authentic record of our own work. We hereby
declare that this project is done. Features and ideas are found by other similar project are
mentioned by reference. We have added many features on our own. carried out during a
period from January, 2021 to January, 2022 under the supervision of Arpita Chowdhury,
Lecturer, Department of Computer Science & Engineering. This project, neither in whole
nor in part, has been submitted by us to any other University or Institute for the award of
any Degree.

Aowal Hossen Mazumdar Md. Rakibul Islam

ID: 181002084 ID: 181002103

ii
 Certificate

This project titled ”Design and Development of a Website for Green University Com-
puter Club” have been prepared and submitted by Md. Rakibul Islam & Aowal Hossen
Mazumdar to the department of Computer Science and Engineering, Green University of
Bangladesh, has been accepted as satisfactory for the partial fulfillment of the requirement
for the degree of Bachelor of Science in Computer Science and Engineering approved as
its style and contents. The presentation has been held on 23 June , 2022.

Arpita Chowdhury Prof. Dr. Md. Saiful Azad

Supervisor Chairperson

Dr. Md. Mostafijur Rahman Humayan Kabir Rana

Member Member

Anwarul Islam Md. Abdus Salam

Member External

iii
 ACKNOWLEDGEMENT

First of all we express our heartiest thanks and gratefulness to almighty Allah for his di-
vine blessing makes us possible to complete the final year project/internship successfully.
We are really grateful and wish our profound our indebtedness to Arpita Chowdhury
ma’am, Lecturer , Department of CSE, Green University of Bangladesh, Dhaka. Deep
Knowledge keen interest of our supervisor in the field of project to carry out this project.
Her endless patience scholarly guidance, continual encouragement, constant and ener-
getic supervision, constructive criticism, valuable advice, reading many inferior draft and
correcting them at all stage have made it possible to complete this project. We would like
to express our heartiest gratitude to Arpita Chowdhury ma’am , Lecturer , Department of
CSE, Green University of Bangladesh, Dhaka and for his kind help to finish our project
and also to other faculty member and the staff of CSE department of Green University
of Bangladesh. We would like to thank our entire course mate in Green University of
Bangladesh, who took part in this discuss while completing the course work. Finally, we
must acknowledge with due respect the constant support and patients of our parents.

iv
 ABSTRACT

The computer club of GUB helps to represent the computer science and engineer-
ing department. Besides it also represents the university by sharing different kinds of
news, events and activities. Students face so many problems due to lack of informa-
tion.Computer club helps the students by sharing the information in time. Our computer
club does not have any website. That’s why students have to face so many problems.
So we take this initiative to help our students. From our computer club website students
easily get their important notice, news and events etc.Any students can get programming
related tutorials from our computer club website. Besides they can also upload their re-
sume here. They can also write blogs in the blogs page to help other weaker student.

v
Contents

Declaration ii

Certificate iii

Acknowledgement iv

Abstract v

CHAPTER 1: INTRODUCTION 1
1.1 Motivation 1
1.2 Objectives 1
1.3 Project Questions 2
1.4 Contributions of the Project 3
1.5 Project Outline 3

CHAPTER 2: Literature Review 5

2.1 Problem Domain 5
2.2 Related Works 6
2.3 Proposed Solutions 7
2.4 A Review Of HTML 7
2.5 A Review of CSS 7
2.6 A Review of JavaScript 8
2.7 A Review of Bootstrap 8
2.8 A Review of MySQL Database 8
2.9 A Review Of Laravel 8
2.10 Summary 8

CHAPTER 3: Requirements Analysis & System Specifications 10

vi
 3.1 Introduction 10
3.2 User Requirements 10
3.3 GUCC website Requirement & Specifications 10
3.4 Functional System Requirement 11
3.4.1 Product Features 11
3.4.2 Operating Environment 12
3.5 Methodology 13
3.5.1 Software Process Models 13
3.5.2 Waterfall Method 14
3.5.3 Gantt Chart 15
3.6 Summary 15

CHAPTER 4: System Design 17

4.1 Introduction 17
4.2 Use Case Diagram 17
4.3 Data Flow Diagram And Work Flow Diagram 19

CHAPTER 5: Design Specification 20

5.1 Overview 20
5.2 Front-End Design 20
5.2.1 Home Page 20
5.2.2 Events Page 21
5.2.3 People Page 22
5.2.4 Media Page 22
5.2.5 News Feed 23
5.2.6 GUB Gallery 24
5.2.7 Advisors 24
5.2.8 Blogs 25
5.3 Output 26
5.3.1 About Us 26
5.3.2 Activities News 27
5.3.3 Contact 27

CHAPTER 6: Conclusion 28

vii
 6.1 Limitations 28
6.2 Future Works 28

References 29

viii
 Chapter 1

INTRODUCTION

Green University Computer Club represents the CSE department of GUB by reflecting
visions events for students like fresher orientation, programming contest, cultural activi-
ties, seminar, webinar and soon. however, there is no dedicated website where students
can find those information. Through our website the students are always keep connected
to the university. This website helps the students to get the necessary information in a
shortest possible time . In this site we will try to give our students all the necessary in-
formation related to the university. From this site the skilled students are also avail to get
internship opportunity.

1.1 Motivation
We are facing a lot of problem because we have no computer club website. To overcame
this situation we are working this project so that we can help our students and we can
keep connection with our university always. As our university is progressing day by day.
The university gives us lot of things from this gratitude we are trying to help our students
and that’s why we are working on this project.

1.2 Objectives
A computer club is one of the most vital site of a university. Because through this site the
students can get all the information of the university. From our survey we saw that 60-
70% students can’t get all the information that’s why they face so many problem .students

1
by giving proper information. It’s like a helping hand of the students.
Our aim is to help all of the CSE dept students.

• To motivate the students and help them in academic courses.

• To grow strong collaboration between students and the CSE dept through GUCC
website to encourage students to participate in the club.

1.3 Project Questions

This project question is made of an understanding of the concepts, opinions and thoughts
that come from the audiences. It provides a clear idea of the questions which revolve in
the audience’s mind. Moreover, the mission-vision is clarified in detail so that audiences
can get a clear concept of all of the questions made by them. After we formulate our
opinion, we give a clear concept which is our main idea or argument that not only states
the opinion but also provides a supporting idea on the opinion. The questions are given
below and answered in the logical view.

1. What is the project?

- The project is made for the computer club. We named it Green University Club. From
this site students can get the information and connect to the university. It’s a communica-
tion platform for maintaining and sharing information among the students.

2. What are the functions of this project?

- A computer club represents the department of computer science and engineering. Through
our computer club website students can get the important news and events.Skilled students
can also upload their CV here to get a job. A blog section also included in our site which
can be very helpful to share knowledge.

3. Why will people use this?

- This website can share the information in a quick time. Browsing this site, students can
easily get the information. By this site we will try to create awareness about programming.
Here all programming contest related news are also shared. Most of the information is

2
shared by the computer club. Computer club is the most authentic source to get the infor-
mation.So the students will definitely use this system which offers everything in the same
platform.
Sometimes we can not get the notice in time or can’t follow the Facebook page. So that
we are trying to build a website like this. So the students will definitely use this system
which offers everything in the same platform.

4. How are many people served in a day using this project?

- As it’s a web-based project all the students can use this site.

1.4 Contributions of the Project

Nowadays every university has a computer club of their own for communication and shar-
ing information. The computer club meets the necessity of the students and represents the
university as well. With the blessings of technology, our project can provide a smart so-
lution. Besides it also provides the user a great community where students and successful
alumni can keep connected to each other and upgrading their knowledge. They can also
share post and information with the community.

1.5 Project Outline

• Chapter 2: Literature Review
In this chapter, we have described the literature review, project gap, and proposed
solution of our developing system.

• Chapter 3: Requirements Analysis & System Specifications

In this chapter, we show requirements analysis, system specifications, project fea-
tures, operating environment & methodology.

• Chapter 4: System Design

In this chapter, we have described a different kinds of Unified Modeling Language

3
 (UML) diagrams.

• Chapter 5: Design specification

In this chapter, we have shared our design and specification.

• Chapter 6: Conclusion
In this chapter, we introduced the purpose of our work and major results, limitation
of the project and practical implications. Also, we shared our future plan for this
project

4
 Chapter 2

Literature Review

2.1 Problem Domain

In recent time we observe some problem like it’s very difficult to find a information in
quick time this is the real problem in our university website. Though We have our univer-
sity website but we cant not get the proper information related to our department which is
announced in the classroom. These problem has create a lot of gapes between university
and students. But one of the major reasons user are not likely to view these announce-
ments published in most media is due to the attractiveness and not for having user friendly
design, The announcements are poorly organized and categorized leading to user having
difficulties in finding important messages or alerts only related to them. Besides, the
formality of some channels also caused the use of unattractive fonts, colors, and fewer
multimedia elements thus, decreasing user’s loyalty to assess these announcements regu-
larly. With the internet nowadays, communicating with each other especially through the
proposed website named green university computer club could most probably solve the
stated problem. If the project can be expanded students and university will both benefit
from it.

5
2.2 Related Works
When we observed, we got some of the website for example- Green University website[1].
International Computer Club [2]. North south Computer Club [3].East west University
computer club [4]

Table 2.1: comparison table

Website name News and events Programming site Club activities info
Green University Yes No No
North South Computer Club Yes No Yes
Northern computer club Yes No No
East West University Computer Club Yes No Yes

Green University Website: From the Green university website we see that it’s a huge
platform so it is very difficult to find any information. In our website GUB quick links
pages students can easily get their important information.

North South Computer Club: From the North south computer club we see that there
are no programming sections which are very important for the students. That’s why we
added this feature in our website.

Northern computer club: There is no CV uploading and options in the Northern com-
puter club site. Also there are no club activities and active members. So we keep these
features in our site.

East-West Computer Club: In the East-West computer club we have observed that there
are no pages for blog writing. Which is very important.In our website we add blogs pages
for writing creative blogs.

6
2.3 Proposed Solutions
In this GUCC website students can get all important information and can gather valuable
knowledge and skilled themselves. Also students can keep connected to the university
and the alumni and the teachers.

Advantages of Proposed System:

• News and events section are nicely organized.

• Time saving.

• Media and photo gallery to represents university .

• Students and teacher can keep connected in same platform

• Student don’t need to browse Facebook page to know information.

• Students can gain programming knowledge.

Our project brings a solution so that this kind of communication can be directly com-
municated through the website and can be made available for the student.

2.4 A Review Of HTML

HTML means hyper text markup language. It helps developer to build a website. Every
web page we can see was written using one version of HTML. HTML code ensures the
proper formatting of text and images for your Internet browser. Without HTML, a browser
would not know how to display text as elements or load images or other elements. That’s
why to build a website HTML is very necessary tools.

2.5 A Review of CSS

CSS means Cascading Style Sheets. CSS describes how HTML elements are displayed
on screen, paper, or in other media or section. CSS saves a lot of work. It can control the
layout of multiple web page in a single code and shortest possible time. All external style
sheets are stored in CSS files so that it can use for any other documentation.

7
2.6 A Review of JavaScript
JavaScript is a text based programming language used both on the client side and server
side that allows you to make web pages interactive. Where HTML and CSS are lan-
guages that give structure and style to web pages, JavaScript gives web pages interactive
elements that engage a user. In fact JavaScript is like the neuron. which controls the
whole functionality.

2.7 A Review of Bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for creating respon-
sive, mobile-first websites. By using bootstrap developers can easily make the website
user friendly and dynamic.

2.8 A Review of MySQL Database

MySQL is a database system which is used on the website. MySQL is a database system
that runs on a server. MySQL is ideal for both small and large web applications. It is very
fast, reliable, and easy to use. MySQL uses standard SQL. MySQL compiles on a number
of platforms. MySQL is free to download and use.MySQL is developed, distributed, and
supported by Oracle Corporation.

2.9 A Review Of Laravel

Laravel is a back end PHP based and open-source framework used for building a wide
range of custom web applications. It’s an entirely server-side framework that manages
data with the help of Model-View-Controller design which breaks an application back-
end architecture into logical parts.

2.10 Summary
Our website is a like a first aid which meets all necessity to the students. It can be so
convenient to get the user updated about their study and programming related informa-

8
tion. In our website, we will serve better facilities for the students. This website can share
any information in quick time. That is time saving. Our website provide more informa-
tion about the university and other knowledge. Through this website any students can
participate various events.

9
 Chapter 3

Requirements Analysis & System

Specifications

3.1 Introduction
The specification and analysis of requirements identify, analyze and model the function-
ality or “what” of a forward-looking software system. The requirement specification and
analysis phase of a software project is the most significant phase of software development
and should not be omitted under any condition.As our project is web based so we have
different requirements which are stated below.

3.2 User Requirements

Green University computer club website will provide the students of any information
news and events that are happening in the university and also gives the students legal and
real information about career guidance. As it online based website so user must have a
PC or laptop. Student must need an Android Mobile or Tab.

3.3 GUCC website Requirement & Specifications

Here in this project we use adobe photo-shop, adobe illustrator and adobe XD. Also we
used Laravel and MySQL for back-end and for front-end we use HTML, CSS, JavaScript
and Bootstrap 5. Here we use SQL for database.

10
Development Tools: Visual studio code.
Other Software’s: Adobe Photo-shop, Adobe Illustrator, Adobe XD.
Programming Languages: HTML, CSS, JavaScript, Bootstrap5, Laravel.
Database: MySQL Database

3.4 Functional System Requirement

This area gives us a perspective on functional requirement that are pertinent for the Green
university computer club website. There are 2 types of user in our system. They are:
Admin
User(students)

3.4.1 Product Features

The following are the main features which are to be achieved from the development of
the Green University Computer Club:-
Our website features:

• Activities and News: Here all students can see the activities and news.

• Events: Here all ongoing programming information will be shared.

• People: Here all executive member or the ex member of the club will be shown-
when a student click this site they can see their info and other details

• Resume: Here all skilled students can upload their resume for job placement offer-
ing by us Bangla group or university .

• Tutorial section: In this section student will be able to get the programming tutorial.
When the need it.

• Blogs: In this section students and teachers can write programming related blogs to
share their knowledge among other students.

• GUB Quick Links: In this section students can easily get their important link in a
short time.

11
 • Contact: When any students need any contact info,they can easily get it from this
site.

3.4.2 Operating Environment

First of all our project is web based. We used UI & UX for design in this website. We used
some software like visual studio code, also used adobe photo-shop as designing tools. We
work with HTML,CSS, JavaScript, MySQL, laravel etc as a programming language for
made our project. We also used other software like MySQL Database, PHP framework
laravel.

12
3.5 Methodology
In this chapter we will discuss the chosen methodology for the project. The description
will include which methodology is chosen and the reasons behind choosing it.
For each phase of the methodology life cycle, activities which are planned to be executed
will also be explained. A Gantt Chart is included in this chapter as an initial schedule
of tasks to be completed throughout the project life cycle. The development models are
the various processes or methodologies that are being selected for the development of the
project depending on the project’s aims and goals.

There are many development life cycle models that have been developed in order to
achieve different required objectives. The models specify the various stages of the process
and the order in which they are carried out. In addition to using computer for work, peo-
ple use it for fun and entertainment. Noticeably, the number of companies that produce
software programs for the purpose of facilitating works of offices, administrations, banks,
etc., has increased recently which results in the difficulty of enumerating such compa-
nies. During the previous four decades, software has been developed from a tool used
for analyzing information or solving a problem to a product in itself. However, the early
programming stages have created a number of problems turning software an obstacle to
software development particularly those relying on computers. Software consists of doc-
uments and programs that contain a collection that has been established to be a part of
software engineering procedures. Moreover, the aim of software engineering is to create
a suitable work that construct programs of high quality.

3.5.1 Software Process Models

A software process model is an abstract representation of a process. It presents the de-

scription of a process from some particular perspective as:specification, validation, de-
sign, and evolution.
The selection of model has very high impact on the testing that is carried out. It will
define the what, where and when of our planned testing, influence regression testing and
largely determines which test techniques to use.

13
3.5.2 Waterfall Method

Figure 3.1: Waterfall Model

The waterfall model is the classical model of software engineering. This model is one of
the oldest models and is widely used in government projects and in many major compa-
nies. As this model emphasizes planning in early stages, it ensures design flaws before
they develop. In addition, its intensive document and planning make it work well for
projects in which quality control is a major concern. The methodology which will be
used to develop this application will be the waterfall method. As we know, the waterfall
method promotes collaboration between both the application users and developers to re-
trieve immediate feedback and to acknowledge their changing requirements very fast.

As this website objective is to solve the main problem of student’s decreasing loyalty
towards the existing announcement platforms, the interaction between them and we, as a
developer is highly essential. Plus, with their immediate feedback or additional require-
ments during the testing stages, modification of the features and contents of the applica-
tion could be performed without any doubt. Since the time for the entire project to be
completed is only 12 weeks and at least estimate of 1-2 weeks is needed to build up a
scope, the waterfall methodology will be a more efficient method when compared to the
others. Lastly, since the waterfall method is highly iterative, developers could easily re-
fine each of the development phases either the ones which are completed or the one which
just started anytime as appropriate.

14
3.5.3 Gantt Chart

Bellow is a Gantt chart of this project as an initial schedule of tasks to be completed

throughout the project life cycle.

Figure 3.2: Gantt chart of the time estimation of this project

A Gantt chart is a bar chart that provides a visual view of project tasks scheduled over
time. A Gantt chart is used for project planning: it’s a useful way of showing what work
is scheduled to be done on specific days. The above chart gives an idea about twelve
month and activities of our project. Here the activities part, we include research, define
specification, project planning, development, test plan, testing question and answer also
include delivery activities as you can see in the Figure 3.1.

3.6 Summary
Green university computer club is a student organization which was founded with the in-
tention of providing everything students need to explore their ideas, develop new skills
related to the field of computer technology. The club also help in building confidence in
students with the help of various programs and programs. This is why we take initiative
to make this website. The main vision of the computer club is to expose the students
to the latest advancements in computer technology and give individuals an opportunity
for sharing and extending ideas, views and knowledge in the field of computers and fast

15
changing technology. This website provides a strong platform for the engineering students
to practically implement their innovative ideas. The Club offers indispensable guidance,
workshops and organizes various events for students to explore their full potential. In our
website we add some feature like Resume upload option blogging section tutorial sec-
tion, news and events section and so on. One students can upload their Resume for job
placement. For growing interest in programming we also share some programming tuto-
rial. Besides, any students and faculty members can write blogs to share their knowledge
among other students. It will also be very helpful to encourage student’s engagement for
mutual sharing of knowledge, support, and development of ideas into the real world.

16
 Chapter 4

System Design

4.1 Introduction
This project is based on the functional design approach, which helps in understanding the
design of the project in a simpler way by explaining its flow, use cases, and implemen-
tation more like a modular approach. For example, there are different modules in this
project which have separate functionality and, other sub functionalities. All the modules
are designed, implemented and integrated together to make a flawless working applica-
tion.

4.2 Use Case Diagram

The use case diagram is a graphical representation of the interactions among the elements
of green university computer club. It represents the methodology used in system analysis
to identity, clarify and organize system requirements of green university computer club
website. The main actors of the system are Admin students.

Major elements of the use case diagram of green university computer club are shown
on the picture below. Figure 4.1 is the use case diagram of our project.

17
 Figure 4.1: Use case diagram

User: User can access all the information from the front end. User can see the news,
events, tutorial and upload their resume.Any user can write blogs in the blog page. User
can see the former committee and executive committee members information in the peo-
ple’s page. A user can also see the photos and videos from the media page.
Admin: In order to get access admin must have signed up into the dashboard.After
this admin can login into system.Admin can manage the database and update all the in-
formation from the dashboard.

18
4.3 Data Flow Diagram And Work Flow Diagram
Bellow are data flow diagrams of green university computer club part of this project. We
have attached the level 0 level 1 and work flow diagram of this project as you can see in
the Figure 4.2 and 4.3.

Figure 4.2: Level 0 data flow diagram

Figure 4.3: Level 1 data flow diagram

19
 Chapter 5

Design Specification

5.1 Overview
The design specification describes the detailed operation and attributes of a system and is
used as the basis of the design concept. With small designs, developing a clear and concise
design specification is a relatively straight forward task. However, design specification is
a statement of how a design is developed. In the section of design specification, we try to
show the design of our website. We also discussed many tools, which we use to develop
our website.

5.2 Front-End Design

If we want to design these components we need to know the different programming lan-
guage like HTML, CSS, JavaScript, Bootstrap etc Therefore, these programming are
called front-end programming. The most important part of a project is front-end de-
signing to keep the users interested in the website. Generally, most of the users expect a
simple user interface or graphical user interface from the developer. The website fails to
attract the user if the front-end design is so intricate. Front-end designs entangle creating
the XML and UI that make up a user interface.

5.2.1 Home Page

When a user open the website they can see a splash screen containing the logo of the ap-
plication. Then they see the Home Page of the application. In the dash board we can see

20
different type of feature like about, people activities and news, news feed events, tutorial
section, media gallery, contact. In the slide menu, user can see their profile, notification,
rate us, log out as

Figure 5.1: Home Page

5.2.2 Events Page

In this section all active or ongoing programs are being shown.

Figure 5.2: Events page

21
 Figure 5.3: Programs

5.2.3 People Page

In this section all executive committee and former committee and advisors information
will bee shown.

Figure 5.4: People Page

5.2.4 Media Page

In this page user can the photo and video gallery of the university and the club activity
related photos videos.

22
 Figure 5.5: Media Page

5.2.5 News Feed

Figure 5.6: News Feed

Figure 5.7: News Feed

23
5.2.6 GUB Gallery

Figure 5.8: GUB Gallery

5.2.7 Advisors

Figure 5.9: Advisors

24
 Figure 5.10: Advisors

5.2.8 Blogs

In this section any students or faculty members can share their programming knowledge
by blogging.This can be very helpful because when any students understand any program-
ming related problem they can be easily shared here.From this other weaker students can
be benefited.

Figure 5.11: Blogs

25
 Figure 5.12: Write Blog

5.3 Output

5.3.1 About Us

Figure 5.13: About Us

26
 Figure 5.14: About Us

5.3.2 Activities News

Figure 5.15: Activities News

5.3.3 Contact

Figure 5.16: Contact

27
 Chapter 6

Conclusion

This project is mainly targeted to the Students of green university of Bangladesh. Gener-
ally we are facing a lot of problems to find all necessary information related to our course
in time. That creates a gap between the students and the university. So our project tries to
bridge this gap between students and the university. We faced different problems but we
could overcome those.

6.1 Limitations
The project has the following limitations:

• The project has no android version.

• The project has no online based course.

• The project has no online chatting option.

6.2 Future Works

We tried to build a perfect web-based project but it has also some limitations. To make
a more perfect and reliable project we have to do lots of work on it. The following
limitations should be solved,

• Real time job placement.

• Own online programming course and It related course to developed students pro-
gramming skill.

28
• We shall try to build this on android version.

• The project has no online chatting option.We have to work on this to build a perfect
project.

29
 References

[1] https://green.edu.bd/

[2] http://www.northsouth.edu/osa/clubs/nsucec.html

[3] https://www.apollo.io/companies/International-Computer-Club–ICC-
/54a129c769702d931380dd01

[4] http://home.ewubd.edu/ewu-computer-programming-club/

[5] https://github.com/

[6] https://dribbble.com/tags/ui

[7] https://www.w3schools.com/css/

[8] https://www.w3schools.com/bootstrap/bootstrap ver.asp

[9] https://kec.edu.np/community-and-alumini/students-club/computer-club/

[10] https://www.tutorialspoint.com/laravel/laravel overview.htm

[11] https://cse.primeasia.edu.bd/computer-club

30