"KUYRCC- Web Development Report" PDF

Preview

Summary

Kathmandu University Department of Computer Science and Engineering Dhulikhel, Kavre A Project Report On "KUYRCC" COMP 308 Submitted by Sachin Maharjan (27) Nirusha Manandhar (31) Sagun Lal Shrestha (53) Ruchi Tandukar (57) Submitted to Dr. Gajendra Sharma Associate Professor Department of...

Description

Kathmandu University Department of Computer Science and Engineering Dhulikhel, Kavre

A Project Report On "KUYRCC" COMP 308 Submitted by Sachin Maharjan (27) Nirusha Manandhar (31) Sagun Lal Shrestha (53) Ruchi Tandukar (57) Submitted to Dr. Gajendra Sharma Associate Professor Department of Computer Science and Engineering Submission Date: 23rd July 2019

Bona Fide Certification This project work on

“KUYRCC” is a bona fide work of "Sachin Maharjan (27)" "Nirusha Manandhar (31)" "Sagun Lal Shrestha (53)" "Ruchi Tandukar (57)" CE 2016

who carried out the project work under my supervision .

Project Supervisor ___________________ Ms. Deni Shahi Lecturer DoCSE

ABSTRACT This report represents the project assigned to sixth semester students for the partial fulfillment of COMP 308 given by the department of computer science and engineering, KU. Website is the internet advertising and communication billboard for an organization which provides the better visibility about every information needed to be flowed. KUYRCC being a very proficient club in Kathmandu university, it has just recently launched an official site with static message flows, timelines display and other features representing the club. Still with the official launching of the website, recent trend for message flow for this club has been paper based and through Facebook groups which makes the members and visitors unaware of the information. With an objective of developing a viable, usable and dynamic website, “KUYRCC” project, a website development project was initiated. Conducting proper requirement analysis of the website development project, we have developed this website which includes online registration form for new members and online dynamic volunteer forms along the events, which solves the paper-based issues spotted due to existing system. With transparent event updates and notifications, the users can get information about events of the club. Integrating a dynamic event system, provision of updating and deleting the event with authentication and correct verification enabled, this project was developed use JavaScript as programming language, Node JS framework along with Mongo DB as a database, outcoming a viable project.

Keywords: JavaScript, NodeJS, Website, KUYRCC, dynamic website, authentication, verification

Table of Contents ABSTRACT List of Figures .................................................................................................................................... i List of Tables .................................................................................................................................... ii List of Abbreviations ....................................................................................................................... iii CHAPTER 1: INTRODUCTION ............................................................................................................ 1 1.1

BACKGROUND .................................................................................................................. 1

1.2

OBJECTIVE ........................................................................................................................ 2

1.3

MOTIVATION AND SIGNIFICANCE .................................................................................... 2

CHAPTER 2: RELATED WORKS .......................................................................................................... 3 CHAPTER 3: DESIGN AND IMPLEMENTATION.................................................................................. 4 3.1 System Requirement Specification ........................................................................................ 4 3.1.1 Software Specification .................................................................................................... 4 3.1.2 Hardware Specification ................................................................................................... 4 3.2 Development Strategy ........................................................................................................... 4 3.3 Algorithm ............................................................................................................................... 5 3.5 System Flow Diagram........................................................................................................... 17 3.6 Used Libraries and functions................................................................................................ 17 3.7 Use- Case Diagram ............................................................................................................... 20 CHAPTER 4: DISCUSSION................................................................................................................ 21 4.1 Features ............................................................................................................................... 21 CHAPTER 5: CONCLUSION AND RECOMMENDATION ................................................................... 22 5.1 Limitations............................................................................................................................ 22 5.2 Recommendations ............................................................................................................... 22 BIBLIOGRAPHY ............................................................................................................................... 23 APPENDIX 1 .................................................................................................................................... 24 APPENDIX 2 .................................................................................................................................... 25

List of Figures Figure 3.4.1: Main Flowchart ..............................................................................................8 Figure 3.4.2: Login Flow Chart ...........................................................................................9 Figure 3.4.3: Create Event Flow Chart ..............................................................................10 Figure 3.4.4: Home page Flow Chart.................................................................................11 Figure 3.4.5: Contact page Flow Chart ..............................................................................12 Figure 3.4.6: Become a member Flow Chart .....................................................................13 Figure 3.4.7: Register Flow Chart......................................................................................14 Figure 3.4.8: Event Flow Chart..........................................................................................15 Figure 3.5.9: System Flow Diagram ..................................................................................17 Figure 3.6.1: Use Case Diagram ........................................................................................20

i

List of Tables Table 3.6.1:Passport used functions...................................................................................18 Table 3.6.2: Express Routing used functions.....................................................................18 Table 3.6.3: bcryptJS used functions .................................................................................19 Table 3.6.4: Mongoose-Flash used functions ....................................................................19 Table 3.6.5: Nodemailer used functions ............................................................................19

ii

List of Abbreviations KUYRCC: Kathmandu University Youth Red Cross Circle IDE: Integrated Development Environment JS: JavaScript HTML: Hypertext Markup Language DB: Database CSS: Cascading Style Sheet RAD: Rapid Application Development

iii

CHAPTER 1: INTRODUCTION 1.1 BACKGROUND With today’s trend of digitally driven lifestyle, website development is the key to give exposure of any organization or businesses to the people about what services is provided, where it is provided, and other related information. In other words, website is the internet advertising and communication billboard for an organization which provides the better visibility about every information needed to be flowed. Thus, a person is more likely to search for the website of the firm directly, concluding the emergence of proper website development. KUYRCC being a very proficient club in Kathmandu university, it has just recently launched an official site. The major drawback of this site is lack of user interaction within the users of the website. The web visitors can read view about the information and events of the club. Except for leaving the comments, there are no provision for online forms, dynamic event developments within the website which the crucial responsibility carried out by websites today, Before the launch of this website, this club depended on its single BlogSpot which was used for event information flow within the members. The major drawback in this website was it was incomplete, and ineffective. The recent information, online registration processes which is very crucial and main objective of any visitor of the website had been insignificant. Still with these official launching of the websites, recent trend for message flow for this club has been paper based and through Facebook groups which makes the members and visitors unaware of the information. With an objective of developing a usable and dynamic website, “KUYRCC” project, a website development project was initiated. It is website for existing active club Kathmandu University Youth Red Cross Circle under Social Welfare in Kathmandu University. The major intention for developing this website is to make all the information regarding the club from its mottos to past accomplishments, present events and upcoming programs or news updates accessible all in one place. Our website includes online registration form for new members, transparent event updates and notifications, volunteer form for various 1

events and programs conducted by club. It is a viable project carried out be a corner for sharing from experience and stories to updating all the members about the events.

1.2 OBJECTIVE The main objectives of developing this website are: 1. To make a viable, usable and dynamic website for KUYRCC club. 2. To replace paper-based registration by digital forms online, making transparent update about upcoming events and volunteering of the club.

1.3 MOTIVATION AND SIGNIFICANCE For information exchange KUYRCC has just recently launched an official site with its static features of club events. Except for leaving the comments, there are no provision for online forms, dynamic event developments within the website which is the crucial responsibility carried out by websites today. Before the launch of this website, this club depended on its single BlogSpot which was used for event information flow within the members, which was incomplete, and ineffective. Still with these official launching of the websites, recent trend for message flow for this club has been paper based and through Facebook groups which makes the members and visitors unaware of the information. With this insignificance drawbacks observation, our team was motivated to develop a dynamic and usable website for this club. Our website significantly brings out the development in information exchanging process of the club which includes online registration form for new members and online dynamic volunteer forms along the events, which solves the paper-based issues spotted due to existing system. Integrating an automatically event deleting systems after the event has occurred have easily reduce loads on server due to piles of past events on the database system of the website. Unlike the existing system it has the provision of updating and deleting the events. The major advantage is its dynamic events, volunteer flow and security we have integrated unlike the older websites of KUYRCC. 2

CHAPTER 2: RELATED WORKS (Kent, 2003) have shown that nonprofit organizations have not been able to use websites as strategic, interactive stakeholder engagement tools. Also, the advent of social networking sites like Facebook and Twitter have taken away this excuse since these sites are free and have built-in interactivity. A proper web development lags behind for a nonprofit organizations due lack of proper problem addressing and development. A good website design and development relies on navigation design, information design and visual design along with its aesthetics (Farhang Salehiᵃ*, 2012). Internet is a dynamic place and dynamic website blend advanced and sophisticated technology to retrieve information and update it, which reacts well to queries staying as much transparent to the visitors of the website (Bitra, n.d.) (YRCC, n.d.) is the official website of KUYRCC club launched recently, which is still under development process. All the upcoming events, timelines, stories and activities conducted within the club are updated through this site, which has been working as the basic hub of the club. Required contact details and provision to leave comments are also available in the site along with a simple user interface of the website Still, the club is dependent paper-based forms and Facebook Page Groups for event details and message flowing, which shows that this website is insignificant. (KUYRCC_BlogSpot, n.d.) is a club website for Red Cross Society in Kathmandu University and it is still in development phase. Information like Red Cross news and events organized by KUYRCC club is shown here. Other details like forms, contact details, health information is still inaccessible as this BlogSpot is incomplete. (Nepal Red Cross Society, n.d.) is a nationwide website of Red Cross Society. Any events related to health care and people participation or volunteering in the event either big or small is also shown here. The information like programs completed, principles, different committee, partners and history of the Red Cross and other useful information are also included in this site.

3

CHAPTER 3: DESIGN AND IMPLEMENTATION 3.1 System Requirement Specification 3.1.1 Software Specification 3.1.1.1 Front End Tools: Coding language: HTML, CSS, JavaScript Coding IDE: Sublime Text + Atom Editor Framework: Pug JS, Bootstrap Templates

3.1.1.2 Back End Tools Framework: Node Js (Express) Database: Mongo DB Programming Languages: JavaScript

3.1.2 Hardware Specification Targeted devices: Any desktop or android devices with internet connectivity

3.2 Development Strategy Rapid Application Development (RAD) Methodology was adapted for developing this website. As this approach defines the development of an information system project with more rapid deployment radically decreasing the time to design and implement systems, with our time constraints, this strategy was followed. As RAD relies on extensive user involvement and prototyping real targeted users i.e. members of KUYRCC were also asked along with ethnographic studies for their needs in this website. Usability is crucial to any products because if the users cannot achieve their goals effectively, efficiently, and in satisfactory manner, they might seek for alternative solutions to achieve their goals. Ethnographic studies and cognitive walkthrough development strategies were adapted for better user experiences.

4

3.3 Algorithm Layout 1. Displays navigation bar with footer 2. if home clicked open home page 3. if events clicked open eventlist page 4. if first aid clicked open firstAid page 5. if become member is clicked open membership form page 6. if contact / about is clicked open about page 7. if timeline is clicked, open timeline page 8. if user logins and user position is member or above, member button is shown 9. if member clicked open members event page 10. if partners icon is clicked, open individual partners official page Register 1. 2. 3. 4. 5.

Display register page with image and fill up forms take input from user in userfield if password and login password not equal then show error msg when user clicks on register check for validation if not valid flash error msg else send verification email to user 6. if user verify, user can login to system else wait for 2 days and delete users’ registration from database Login 1. 2. 3. 4.

open a login modal view with input fields if user click login check validation if fields are valid search user in database if user not found flash error msg else login to system and set globally the users id and users position

5

Home page 1. 2. 3. 4. 5. 6. 7.

open home page with intro picture and texts shows upcoming events if user logged in volunteer and leave comment button is shown if volunteer clicked open volunteer form if leave a comment is clicked open single event page. if users position is admin edit event button is displayed if edit event is clicked open edit event page

Create event page 1. open create event page 2. take input from users in input field 3. if users select main event small event, firstaidtip or meetings from event type, then shows respective input fields 4. if user clicks on add image, file dialog box is pops up where user uploads image to event 5. if user checks on require volunteer then events request for volunteer in event list 6. if user checks delete event then the event is deleted after certain date 7. if user clicks on submit btn then the event form is submitted to database Event page / first aid / members event page 1. open event page with event image and events list 2. if each event in event list is clicked open individual single event page 3. if leave a comment is clicked open single event page so user can comment if logged in 4. if volunteer is clicked open volunteer form 5. if user id equals event user id or user position equal to board or above, edit button is displayed 6. if edit event is clicked, open edit event page where user can edit or delete the event.

6

Single event page 1. 2. 3. 4. 5. 6. 7. 8. 9.

display single event page with photo display event photo and description if user comment on the event, comment is displayed in page if user reply to the comment, reply is displayed in the page if user comment or reply show commented or replied date and time if user id == comment_user_id , user can edit or delete the comment if user id == reply_user_id , user can edit or delete the reply if comment or reply are edited show edited dated and time. if volunteer now is clicked open volunteer form

Membership form page / volunteer form page 1. 2. 3. 4.

displays membership form and photo take input from user if user clicks on submit button, check input validation if validation is ok, member form / volunteer form is submitted else flash error msg

Contact 1. display about page photo and contact details of board members 2. if user position == admin or board, edit contact button and checkQuestion button is displayed 3. if edit contact is clicked, user can edit or delete the contact information 4. if user clicks checkQuestion button, opens question list where user can reply to question and delete questions 5. if user fills ask questions input field and click summit button, question is added to list

7

3.4 Flowchart

Start

Display navigation bar with footer

Event clicked

Home

H

Events

First-aid

E Member Contact

C Login

Sign up

L R

Be Member

B Timeline Open timeline page Partner

Open individual partners official page Figure 3.4.1: Main Flowchart Figure 3.4.1: Main Flow Chart

8

Login L

Display modal view with input fields

Clicks login

No Valid?

Displa...