You are on page 1of 65

PG Convocation

ABSTRACT
A PG Convocation Web Portal is considered by students for application and
payment through online for the convocation certificate of university. In present situation, PG
universities are maintains manual records or files of students who are applied for their
convocation certificate. Payments for applying convocation are done manually this may cause
loss of data.

To avoid this situation and to provide better environment for students and officials we are
introducing a new website called “PG Convocation”. By using this, administrator can
maintain the database systematically.

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

1. INTRODUCTION
1.1 Objectives of the Project:

In manual application for convocation certificate student need to come


university, fill the application with an accurately information and need submit the certificates,
id proof (Card) Xerox at the end need pay challan. This may take a lot of time and human
effect for student and administrator just to apply for certificate. Then student need to wait
until the convocation certificate is post to his/her communication address. To overcome this
problem, we introduced a new system “PG Convocation”. The main objectives of
Convocation for PG system is to provide systematic way of interaction between the student
and administrative officers the application details will be stored and kept permanently so thus
in any time a officer can retrieve and verify the his/her personal details and transaction details
without loss of time and human effort and risk from the administrative database. It will work
24x7. Convocation for Post-Graduation system maintains all records of the student who
applied in a systematical way to approach to build the friendly environment between the
administrator and students.

1.2 Scopes of the Project:

This document shows the requirement and functional document for convocation for
pg. It symbolizes all the needs and the requirements for the student to save time, money and
remove complexity, provide better security. This student not needs to stand in the queue to
get application form and to pay challan in bank.

By using the PG Convocation system, the officers utilize the service as verification of
certificates, id cards, etc.

1.3 Overview of the Project:

This project is aimed to provide computerized system to


avoid loss of data and time delay as well as human risk. Here technically we provided
database as First student registration number (ID card number) should be register in the
database. Then student will go sign up by providing his registration number (ID Card
Number) the details like father name, address, mobile number, email address will displayed
automatically in the screen and student need to provide a password to confirm this account.

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

After submit student need to activate the account which is providing below of the sign up
menu. By activating his account student is allowed to login his account. Very next to login
page student is allowed to fill a form for further procedure. Once student completed with
form and need to submit Xerox, photos of required documents he/she is allowed to pay
challan based on their course. After payment success with a month convocation certificate
will be posted to his/her address.

1.4 Existing System:

In the existing system the convocation is entered by manually which is time taking
process.

1.5 Proposed System:

In the proposed system students register themselves by creating an account. Everyone are
not allowed to make an account only those students who studied / names are stored in the
administrator database can register for convocation certificate.

1.6 SYSTEM REQUIREMENTS:

SOFTWARE REQUIREMENTS:

Language : HTML

Front-end Design : HTML, CSS, JAVASCRIPT

Database : MYSQL

Scripting : JavaScript

Browser : IE/ Mozilla /Chrome

Operating System : Windows/Linux

Host : XAMPP/APACHE

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

HARDWARE REQUIREMENTS:

Processor : Intel

RAM : 3GB

Hard disk : 500GB

1.7 MODULES

Register Module:

The passed out student are eligible for applying convocation. To apply for
the convocation student need sign up in register form for themselves by providing their hall
ticket and necessary details. The data of the student is taken from administrative database.

Activate Account Module:

After the registration form student will guided to activate their account
and password in the activate account module in the login page.

Login Module:

Here the student will login by providing username and password which
will further guided to the payment (challan) for the convocation. This module is act for both
student and admin system separately.

Payment Module:

For the challan we provide a gateway known as “PayUMoney” by which


student pay the challan secure, safely transactions.

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

2. SYSTEM ANALYSIS
PROCESS MODELS:
Software development life cycle (SDLC) is a series of phases that provide a
common understanding of the software building process. How the software will be
realize and developed from the business idea and requirement elicitation phase to
convert these business ideas and requirements into functions and features until its
usage and operation to achieve the business needs. The good software engineer
should have enough knowledge on how to choose the SDLC model based on the
project context and business requirement.
2.1 WATERFALL MODEL:
DEFINITION:
The Waterfall Model was the first Process Model to be introduced. It is very
simple to understand and use. In “The Waterfall” approach, the whole process
of software development is divided into separate phases. The outcome of one phase
acts as the input for the next phase sequentially. This means that any phase in the
development process begins only if the previous phase is complete. The waterfall
model is a sequential design process in which progress is seen as flowing steadily
downwards (like a waterfall).
As the Waterfall Model illustrates the software development process in a linear
sequential flow; hence it is also referred to as a Linear-Sequential Life Cycle Model.
Each phase in waterfall model begins with design goals and ends with the client
reviewing the progress.
Waterfall model has five phases:
Requirements
System Design
Implementation
Integration and Testing
Deployment/Maintenance of system

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

2.2 WATERFALL MODEL LIFE CYCLE:

Requirements: The first phase involves understanding what needs to design and what is
its function, purpose, etc. Here, the specifications of the input and output or the final
product are studied and marked.
System Design: The requirement specifications from the first phase are studied in this
phase and system design is prepared. System Design helps in specifying hardware and
system requirements and also helps in defining overall system architecture. The software
code to be written in the next stage is created now.
Implementation: With inputs from system design, the system is first developed in small
programs called units, which are integrated into the next phase. Each unit is developed and
tested for its functionality which is referred to as Unit Testing.
Integration and Testing: All the units developed in the implementation phase are
integrated into a system after testing of each unit. The software designed, needs to go
through constant software testing to find out if there are any flaw or errors. Testing is done
so that the client does not face any problem during the installation of the software.
Deployment/Maintenance of System: Once the functional and non-functional testing is
done, the product is deployed in the customer environment or released into the

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

market, this step occurs after installation, and involves making modifications to the system
or an individual component to alter attributes or improve performance. These
modifications arise either due to change requests initiated by the customer, or defects
uncovered during live use of the system. The client is provided with regular maintenance
and support for the developed software.

2.3Waterfall Model - Application

Every software developed is different and requires a suitable SDLC approach to be followed
based on the internal and external factors. Some situations where the use of Waterfall model
is most appropriate are −

 Requirements are very well documented, clear and fixed.

 Product definition is stable.

 Technology is understood and is not dynamic.

 There are no ambiguous requirements.

 Ample resources with required expertise are available to support the product.

 The project is short

2.4Waterfall Model - Advantages

The advantages of waterfall development are that it allows for departmentalization and
control. A schedule can be set with deadlines for each stage of development and a product
can proceed through the development process model phases one by one.

Development moves from concept, through design, implementation, testing, installation,


troubleshooting, and ends up at operation and maintenance. Each phase of development
proceeds in strict order.

Some of the major advantages of the Waterfall Model are as follows −

 Simple and easy to understand and use

 Easy to manage due to the rigidity of the model. Each phase has specific deliverables
and a review process.

 Phases are processed and completed one at a time.

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

 Works well for smaller projects where requirements are very well understood.

 Clearly defined stages.

 Well understood milestones.

 Easy to arrange tasks.

 Process and results are well documented.

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

3. FEASIBILITY STUDY
A feasibility study is carried out to select the best system that meets performance
requirements. The main aim of the feasibility study activity is to determine whether it would
be financially and technically feasible to develop the product. The feasibility study activity
involves the analysis of the problem and collection of all relevant information relating to the
product such as the different data items which would be input to the system, the processing
required to be carried out on these data, the output data required to be produced by the system
as well as various constraints on the behavior of the system.
3.1Technical Feasibility
This is concerned with specifying equipment and software that will successfully satisfy the
user requirement. The technical needs of the system may vary considerably, but might
include :
• The facility to produce outputs in a given time.
• Response time under certain conditions.
• Ability to process a certain volume of transaction at a particular speed.
• Facility to communicate data to distant locations.
In examining technical feasibility, configuration of the system is given more importance than
the actual make of hardware. The configuration should give the complete picture about the
system’s requirements:
How many workstations are required, how these units are interconnected so that they could
operate and communicate smoothly.
What speeds of input and output should be achieved at particular quality of printing.
3.2Economic Feasibility
Economic analysis is the most frequently used technique for evaluating the effectiveness of a
proposed system. More commonly known as Cost / Benefit analysis, the procedure is to
determine the benefits and savings that are expected from a proposed system and compare
them with costs. If benefits outweigh costs, a decision is taken to design and implement the
system. Otherwise, further justification or alternative in the proposed system will have to be
made if it is to have a chance of being approved. This is an outgoing effort that improves in
accuracy at each phase of the system life cycle.

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

3.3Operational Feasibility
This is mainly related to human organizational and political aspects. The points to be
considered are:
• What changes will be brought with the system?
• What organizational structure are disturbed?
• What new skills will be required? Do the existing staff members have these skills? If not,
can they be trained in due course of time?
This feasibility study is carried out by a small group of people who are familiar with
information system technique and are skilled in system analysis and design process.

10

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

4. DATA DESIGN
4.1 ER DIAGRAM

Phone no
StudID
name
address

Email_id

STUDENT

details

MAKE
Report admin

Admin id department
edit delete

REQUEST

studphoto
Documents
Payment

11

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

4.2 UML DIAGRAMS

UML stands for Unified Modelling Language. UML is a standardized general-purpose


modelling language in the field of object-oriented software engineering. The standard is
managed, and was created by, the Object Management Group.

The goal is for UML to become a common language for creating models of object-oriented
computer software. In its current form UML is comprised of two major components: A Meta-
model and a notation. In the future, some form of method or process may also be added to; or
associated with, UML.

The Unified Modelling Language is a standard language for specifying, Visualization,


Constructing and documenting the artefacts of software system, as well as for business
modelling and other non-software systems.

The UML represents a collection of best engineering practices that have proven successful in
the modelling of large and complex systems.

The UML is a very important part of developing objects-oriented software and the software
development process. The UML uses mostly graphical notations to express the design of
software projects.

GOALS:

The Primary goals in the design of the UML are as follows:

1. Provide users a ready-to-use, expressive visual modelling Language so that they can
develop and exchange meaningful models.

2. Provide extendibility and specialization mechanisms to extend the core concepts.

3. Be independent of particular programming languages and development process.

4. Provide a formal basis for understanding the modelling language.

5. Encourage the growth of OO tools market.

6. Support higher level development concepts such as collaborations, frameworks,


patterns and components.

7. Integrate best practices.

12

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

4.2.1 USE CASE DIAGRAM:

A use case diagram in the Unified Modeling Language (UML) is a type of behavioral
diagram defined by and created from a Use-case analysis. Its purpose is to present a graphical
overview of the functionality provided by a system in terms of actors, their goals (represented
as use cases), and any dependencies between those use cases. The main purpose of a use case
diagram is to show what system functions are performed for which actor. Roles of the actors
in the system can be depicted.

USE CASE DIAGRAM: STUDENT PROCESS::

search Roll number

Activiate Rollno

Login

registration form

required document
STUDENT

payment

download payslip

13

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

ADMIN PROCESS:

Login

check the process

ADMIN

send the certificate

Logout

4.2 .2 SEQUENCE DIAGRAM


A sequence diagram in Unified Modeling Language (UML) is a kind of interaction
diagram that shows how processes operate with one another and in what order. It is a
construct of a Message Sequence Chart. Sequence diagrams are sometimes called event
diagrams, event scenarios, and timing diagrams.
Sequence Diagram:

student login form document payment

1.search Rollno

2.Activiate Rollno
3.Login

4.fill application form

5.submit required documents


6.pay the fee

7.download the pay slip

ADMIN LOGIN:

14

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

ADMIN Login process Logout

1.login

2.check the process

3.Logout

4.2.4 ACTIVITY DIAGRAM

Activity Diagram:

Start

ADMIN
LOGIN

Admin view

Check
process

Logout

end

15

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

Student login

starting point

STUDENT

search Activiate
Rollno account

login fill the


application

submit required payment


document process

download
payslip

Ending point

16

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

5. Data Dictionary

NAME TYPE CONSTRAINTS


ID INT NOTNULL
USER-ID INT NOTNULL
DATE DATE NOTNULL
TIME TIME NOTNULL
ACTION TEXT NOTNULL

NAME TYPE CONSTRAINTS


DEGNO VARCHAR(20) NOTNULL
ENROLLMENTNO VARCHAR NOTNULL
DEGREENAME VARCHAR NOTNULL
STUDENTNAME VARCHAR NOTNULL
FATHERNAME VARCHAR NOTNULL
YEAR INT NOTNULL
CGPA VARCHAR NOTNULL
AREASPECILATION VARCHAR NOTNULL
DATE VARCHAR NOTNULL

6. System design
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.

17

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more interactive
and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated
by a web browser. A web page can be identified by entering an URL. A Web page can be of
the static or dynamic type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the
help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content.

HTML Versions

Since the time HTML was invented there are lots of HTML versions in market, the brief
introduction about the HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML
language, and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was standard
language version for website design. HTML 2.0 was able to support extra features such as
form-based file upload, form elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for form elements. It can
also support a web page with complex mathematical equations. It became an official standard
for any browser till January 1997. Today it is practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable
version of HTML language. This version is the current official standard, and it provides
added support for stylesheets (CSS) and scripting ability for various multimedia elements.

18

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of
this version was announced in January 2008. There are two major organizations one is W3C
(World Wide Web Consortium), and another one is WHATWG( Web Hypertext Application
Technology Working Group) which are involved in the development of HTML 5 version, and
still, it is under development.

Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot of


formatting tags.

3) It is a markup language, so it provides a flexible way to design web pages along with the
text.

4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any platform like Windows,


Linux, and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.

HTML text Editors

o An HTML file is a text file, so to create an HTML file we can use any text editors.

o Text editors are the programs which allow editing in a written text, hence to create a
web page we need to write our code in some text editor.

o There are various types of text editors available which you can directly download, but
for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).

o After learning the basics, you can easily use other professional text editors which
are, Notepad++, Sublime Text, Vim, etc.

19

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

o In our tutorial, we will use Notepad and sublime text editor. Following are some easy
ways to create your first web page with Notepad, and sublime text.

Building blocks of HTML

An HTML document consists of its basic building blocks which are:

o Tags: An HTML tag surrounds the content and applies meaning to it. It is written
between < and > brackets.

o Attribute: An attribute in HTML provides extra information about the element, and it
is applied within the start tag. An HTML attribute contains two fields: name & value.

o Elements: An HTML element is an individual component of an HTML file. In an


HTML file, everything written within tags is termed as HTML elements.

HTML Attribute

o HTML attributes are special words which provide additional information about the
elements or attributes are the modifier of the HTML element.

o Each element or tag can have attributes, which defines the behavior of that element.

o Attributes should always be applied with start tag.

o The Attribute should always be applied with its name and value pair.

o The Attributes name and values are case sensitive, and it is recommended by W3C
that it should be written in Lowercase only.

o You can add multiple attributes in one HTML element, but need to give space
between two attributes.

CSS:

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe
the look and formatting of a document written in markup language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web pages and user

20

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

interfaces. It can also be used with any kind of XML documents including plain XML, SVG
and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for
web applications and user interfaces for many mobile applications.

These are the three major benefits of CSS:

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size had
to be repeated on every web page. This was a very long process. For example: If you are
developing a large website where fonts and color information are added on every single page,
it will be become a long and expensive process. CSS was created to solve this problem. It
was a W3C recommendation.

2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of CSS
rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector

3. CSS Class Selector

4. CSS Universal Selector

5. CSS Group Selector

21

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

CSS is added to HTML pages to format the document according to information in the style
sheet. There are three ways to insert CSS in HTML documents.

1. Inline CSS

2. Internal CSS

3. External CSS

Inline CSS

We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. This method
mitigates some advantages of style sheets so it is advised to use this method sparingly.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Syntax:

1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>    

External CSS

The external style sheet is generally used when you want to make changes on multiple pages.
It is ideal for this condition because it facilitates you to change the look of the entire web site
by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

CSS Comments

CSS comments are generally written to explain your code. It is very helpful for the users who
read your code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /*............*/.

1. <!DOCTYPE html>  

22

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

2. <html>  

3. <head>  

4. <style>  

5. p {  

6.     color: blue;  

7.     /* This is a single-line comment */  

8.     text-align: center;  

9. }   

10. /* This is  

11. a multi-line  

12. comment */  

13. </style>  

14. </head>  

15. <body>  

16. <p>Hello Javatpoint.com</p>  

17. <p>This statement is styled with CSS.</p>  

18. <p>CSS comments are ignored by the browsers and not shown in the output.</p>  

19. </body>  

20. </html>   

CSS Background

CSS background property is used to define the background effects on element. There are 5
CSS background properties that affects the HTML elements:

1. background-color

23

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

2. background-image

3. background-repeat

4. background-attachment

5. background-position

CSS Display

CSS display is the most important property of CSS which is used to control the layout of the
element. It specifies how the element is displayed.

Every element has a default display value according to its nature. Every element on the
webpage is a rectangular box and the CSS property defines the behavior of that rectangular
box.

CSS display values

There are following CSS display values which are commonly used.

1. display: inline;

2. display: inline-block;

3. display: block;

4. display: run-in;

5. display: none;

CSS Font

CSS Font property is used to control the look of texts. By the use of CSS font property you
can change the text size, color, style and more. You have already studied how to make text
bold or underlined. Here, you will also know how to resize your font using percentage.

These are some important font attributes:

1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)

24

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

2. CSS Font family: This property is used to change the face of the font.

3. CSS Font size: This property is used to increase or decrease the size of the font.

4. CSS Font style: This property is used to make the font bold, italic or oblique.

5. CSS Font variant: This property creates a small-caps effect.

6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.

CSS Layout

CSS layout is easy to design. We can use CSS layout to design our web page such as home
page, contact us, about us etc.

There are 3 ways to design layout of a web page:

1. HTML Div with CSS: fast and widely used now.

2. HTML Table: slow and less preferred.

3. HTML Frameset: deprecated now.

JAVASCRIPT::

JavaScript is a dynamic computer programming language. It is lightweight and most


commonly used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming language
with object-oriented capabilities.

Client-Side JavaScript

Client-side JavaScript is the most common form of the language. The script should be
included in or referenced by an HTML document for the code to be interpreted by the
browser.

25

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

It means that a web page need not be a static HTML, but can include programs that interact
with the user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional CGI server-
side scripts. For example, you might use JavaScript to check if the user has entered a valid e-
mail address in a form field.

The JavaScript code is executed when the user submits the form, and only if all the entries are
valid, they would be submitted to the Web Server.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and
other actions that the user initiates explicitly or implicitly.

Advantages of JavaScript

The merits of using JavaScript are −

 Less server interaction − You can validate user input before sending the page off to
the server. This saves server traffic, which means fewer loads on your server.

 Immediate feedback to the visitors − they don't have to wait for a page reload to see
if they have forgotten to enter something.

 Increased interactivity − You can create interfaces that react when the user hovers
over them with a mouse or activates them via the keyboard.

 Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript

We cannot treat JavaScript as a full-fledged programming language. It lacks the following


important features −

 Client-side JavaScript does not allow the reading or writing of files. This has been
kept for security reason.

 JavaScript cannot be used for networking applications because there is no such


support available.

 JavaScript doesn't have any multi-threading or multiprocessor capabilities.

26

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

Once again, JavaScript is a lightweight, interpreted programming language that allows you to
build interactivity into otherwise static HTML pages.

JavaScript Development Tools

One of major strengths of JavaScript is that it does not require expensive development tools.
You can start with a simple text editor such as Notepad. Since it is an interpreted language
inside the context of a web browser, you don't even need to buy a compiler.

To make our life simpler, various vendors have come up with very nice JavaScript editing
tools. Some of them are listed here −

 Microsoft FrontPage − Microsoft has developed a popular HTML editor called


FrontPage. FrontPage also provides web developers with a number of JavaScript tools
to assist in the creation of interactive websites.

 Macromedia Dreamweaver MX − Macromedia Dreamweaver MX is a very popular


HTML and JavaScript editor in the professional web development crowd. It provides
several handy prebuilt JavaScript components, integrates well with databases, and
conforms to new standards such as XHTML and XML.

 Macromedia HomeSite 5 − HomeSite 5 is a well-liked HTML and JavaScript editor


from Macromedia that can be used to manage personal websites effectively.

A Document object represents the HTML document that is displayed in that window. The
Document object has various properties that refer to other objects which allow access to and
modification of document content.

The way a document content is accessed and modified is called the Document Object
Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies
to the organization of objects in a Web document.

 Window object − Top of the hierarchy. It is the outmost element of the object
hierarchy.

 Document object − Each HTML document that gets loaded into a window becomes a
document object. The document contains the contents of the page.

27

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

 Form object − everything enclosed in the <form>...</form> tags sets the form object.

 Form control elements − the form object contains all the elements defined for that
object such as text fields, buttons, radio buttons, and checkboxes.

Here is a simple hierarchy of a few important objects −

Enabling JavaScript:

All the modern browsers come with built-in support for JavaScript. Frequently, you may need
to enable or disable this support manually. This chapter explains the procedure of enabling
and disabling JavaScript support in your browsers: Internet Explorer, Firefox, chrome, and
Opera.

JavaScript in Internet Explorer

Here are simple steps to turn on or turn off JavaScript in your Internet Explorer −

 Follow Tools → Internet Options from the menu.

 Select Security tab from the dialog box.

 Click the Custom Level button.

 Scroll down till you find Scripting option.

 Select Enable radio button under Active scripting.

28

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

 Finally click OK and come out

To disable JavaScript support in your Internet Explorer, you need to select Disable radio


button under Active scripting.

JavaScript in Firefox

Here are the steps to turn on or turn off JavaScript in Firefox −

 Open a new tab → type about: config in the address bar.

 Then you will find the warning dialog. Select I’ll be careful, I promise!

 Then you will find the list of configure options in the browser.

 In the search bar, type javascript.enabled.

 There you will find the option to enable or disable javascript by right-clicking on the
value of that option → select toggle.

If javascript.enabled is true; it converts to false upon clicking toogle. If javascript is disabled;


it gets enabled upon clicking toggle.

JavaScript in Chrome

Here are the steps to turn on or turn off JavaScript in Chrome −

 Click the Chrome menu at the top right hand corner of your browser.

 Select Settings.

 Click Show advanced settings at the end of the page.

 Under the Privacy section, click the Content settings button.

 In the "Javascript" section, select "Do not allow any site to run JavaScript" or "Allow
all sites to run JavaScript (recommended)".

JavaScript in Opera

Here are the steps to turn on or turn off JavaScript in Opera −

 Follow Tools → Preferences from the menu.

29

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

 Select Advanced option from the dialog box.

 Select Content from the listed items.

 Select Enable JavaScript checkbox.

 Finally click OK and come out.

To disable JavaScript support in your Opera, you should not select the Enable JavaScript
checkbox.

Warning for Non-JavaScript Browsers

If you have to do something important using JavaScript, then you can display a warning
message to the user using <noscript> tags.

You can add a noscript block immediately after the script block as follows −

<html>

<body>

<script language = "javascript" type = "text/javascript">

<!--

document.write("Hello World!")

//-->

</script>

<noscript>

Sorry...JavaScript is needed to go ahead.

</noscript>

</body>

</html>

30

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

Now, if the user's browser does not support JavaScript or JavaScript is not enabled, then the
message from </noscript> will be displayed on the screen.

Errror Handling:

There are three types of errors in programming: (a) Syntax Errors, (b) Runtime Errors, and
(c) Logical Errors.

Syntax Errors

Syntax errors, also called parsing errors, occur at compile time in traditional programming


languages and at interpret time in JavaScript.

For example, the following line causes a syntax error because it is missing a closing
parenthesis.

<script type = "text/javascript">

<!--

window.print(;

//-->

</script>

When a syntax error occurs in JavaScript, only the code contained within the same thread as
the syntax error is affected and the rest of the code in other threads gets executed assuming
nothing in them depends on the code containing the error.

Runtime Errors

Runtime errors, also called exceptions, occur during execution (after


compilation/interpretation).

For example, the following line causes a runtime error because here the syntax is correct, but
at runtime, it is trying to call a method that does not exist.

<script type = "text/javascript">

<!--

31

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

window.printme();

//-->

</script>

Exceptions also affect the thread in which they occur, allowing other JavaScript threads to
continue normal execution.

Logical Errors

Logic errors can be the most difficult type of errors to track down. These errors are not the
result of a syntax or runtime error. Instead, they occur when you make a mistake in the logic
that drives your script and you do not get the result you expected.

You cannot catch those errors, because it depends on your business requirement what type of
logic you want to put in your program.

The try...catch...finally Statement

The latest versions of JavaScript added exception handling capabilities. JavaScript


implements the try...catch...finally construct as well as the throw operator to handle
exceptions.

You can catch programmer-generated and runtime exceptions, but you


cannot catch JavaScript syntax errors.

Here is the try...catch...finally block syntax −

<script type = "text/javascript">

<!--

try {

// Code to run

[break;]

32

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

catch ( e ) {

// Code to run if an exception occurs

[break;]

[ finally {

// Code that is always executed regardless of

// an exception occurring

}]

//-->

</script>

The try block must be followed by either exactly one catch block or one finally block (or


one of both). When an exception occurs in the try block, the exception is placed in e and
the catch block is executed. The optional finally block executes unconditionally after
try/catch.

Validation:
JavaScript provides a way to validate form's data on the client's computer before sending it
to the web server. Form validation generally performs two functions.
 Basic Validation − First of all, the form must be checked to make sure all the
mandatory fields are filled in. It would require just a loop through each field in the
form and check for data.
 Data Format Validation − Secondly, the data that is entered must be checked for
correct form and value. Your code must include appropriate logic to test correctness
of data.
Basic Form Validation

First let us see how to do a basic form validation. In the above form, we are
calling validate() to validate data when onsubmit event is occurring. The following code
shows the implementation of this validate() function.

Data Format Validation

33

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

Now we will see how we can validate our entered form data before submitting it to the web
server.

The following example shows how to validate an entered email address. An email address
must contain at least a ‘@’ sign and a dot (.). Also, the ‘@’ must not be the first character of
the email address, and the last dot must at least be one character after the ‘@’ sign.

7.SAMPLE CODING
Convocation MySQL

-- phpMyAdmin SQL Dump -- version 4.5.1

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; -- Database: `convocation` -- Table


structure for table `logs`

34

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

CREATE TABLE `logs` (`id` int(11) NOT NULL, `user_id` int(11) NOT NULL,`date` date
NOT NULL,`time` time NOT NULL, `action` text NOT NULL) ENGINE=InnoDB
DEFAULT CHARSET=utf8;

-- Dumping data for table `logs`

INSERT INTO `logs` (`id`, `user_id`, `date`, `time`, `action`) VALUES

(17, 1, '2015-09-30', '08:14:51', 'Updated user - student122 (8) + Changed role to Student'),

(18, 1, '2015-09-30', '08:15:11', 'Updated user - user1 (2) + Changed role to Student'),

(19, 1, '2015-09-30', '08:15:35', 'Updated user - user1 (2) + updated password + Changed role
to Student'),

(20, 1, '2015-09-30', '08:20:56', 'Updated user - student122 (8)'),

(21, 1, '2015-09-30', '08:21:09', 'Updated user - hh (12)'),

(22, 1, '2015-09-30', '08:21:21', 'Updated user - user1 (2) + Changed role to Moderator'),

(23, 1, '2015-09-30', '08:27:46', ' Changed hu (17)''s role to Administrator'),

(24, 1, '2015-09-30', '08:35:51', '::1 - deleted user shob (6) (Mozilla/5.0 (X11; Linux x86_64;
rv:40.0) Gecko/20100101 Firefox/40.0 ) '),

(25, 1, '2015-09-30', '16:22:49', '::1 - Logged in. (Mozilla/5.0 (X11; Linux x86_64; rv:41.0)
Gecko/20100101 Firefox/41.0 ) '),

');

-- Table structure for table `studentinfo’

CREATE TABLE `studentinfo` (`degno` varchar(20) NOT NULL,`enrollmentNo`


varchar(20) NOT NULL,`degreeName` varchar(50) NOT NULL, `studentName` varchar(20)
NOT NULL, `fathersName` varchar(20) NOT NULL,`year` int(10) NOT NULL,`cgpa`
varchar(20) NOT NULL,`AreaSpecialization` varchar(20) NOT NULL,`date` varchar(50)
NOT NULL) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `studentinfo`

35

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

INSERT INTO `studentinfo` (`degno`, `enrollmentNo`, `degreeName`, `studentName`,


`fathersName`, `year`, `cgpa`, `AreaSpecialization`, `date`) VALUES

('D-529', '10/EBT/001', 'Master of Computer ', 'Abha Kumari', 'Krit Narayan Tiwari', 2013,
'6.22', 'computer science', '11'),

('D-530', '10/EBT/002', 'Master of Science', 'Amit Kumar', 'Ramesh Chand ', 2013, '6.73',
'Food Technology', '11'),

('D-531', '10/EBT/003', 'Master of Computer', 'Anu Chaudhary ', 'Bhramraj Singh ', 2013,
'5.73', 'Computer science', '11'),

('D-532', '10/EBT/004', 'Master of Computer', 'Arnab Chatterjee ', 'Arun Chatterjee ', 2013,
'6.11', 'Computer Science', '11'),

('D-533', '10/EBT/006', 'Master of Computer', 'Atul Kumar ', 'Charandas', 2013, '6.42',
'Computer Science', '11');

-- --------------------------------------------------------

-- Table structure for table `update_info`

--CREATE TABLE `update_info` (

`version` float DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Dumping data for table `update_info`

INSERT INTO `update_info` (`version`) VALUES

(4.7);

-- -------------------------------------------------------

-- Table structure for table `users`

CREATE TABLE `users` ( `user_id` int(11) NOT NULL,`username` varchar(25) NOT


NULL,

36

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

`password` varchar(200) NOT NULL,`type` varchar(40) NOT NULL,`email` varchar(50)


NOT NULL,`active` int(11) NOT NULL DEFAULT '0',`profile_picture` varchar(50) NOT
NULL DEFAULT 'resources/images/blank.jpg',`full_name` varchar(40) NOT
NULL,`roll_number` varchar(10) NOT NULL, `phone_number` varchar(15) NOT
NULL,`confirmation_link` varchar(36) NOT NULL,`address` text NOT
NULL,`degreeName` varchar(50) NOT NULL,`fathersName` varchar(50) NOT NULL,
`year` int(10) NOT NULL,`AreaSpecialization` varchar(50) NOT NULL,`gender`
varchar(11) NOT NULL,`accomodation` varchar(30) NOT NULL, `company_name`
varchar(100) NOT NULL,`company_location` varchar(100) NOT
NULL,`compay_designation` varchar(100) NOT NULL, `final_submission` int(11) NOT
NULL DEFAULT '0') ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `users`

INSERT INTO `users` (`user_id`, `username`, `password`, `type`, `email`, `active`,


`profile_picture`, `full_name`, `roll_number`, `phone_number`, `confirmation_link`,
`address`, `degreeName`, `fathersName`, `year`, `AreaSpecialization`, `gender`,
`accomodation`, `company_name`, `company_location`, `compay_designation`,
`final_submission`) VALUES

(1, 'Suresh', '$2a$08$zyDj7ZL23yu1yvhYoa7Eyuy/YtUI.hxjrjE.Vf/wPiIaZGFK3Af12',


'superadmin', 'sureshmanju0888@gmail.com', 3, 'user_uploads/profile_images/1.jpg', 'Suresh
Kumar Y', '13/ICS/057', '', '99f521edd950b44fc232adbbe08c4b68f109', '37, Rajdhani
Nikunk, I.P. Extension 94, Delhi 92', '', '0', 0, '', '0', '0', '', '', '', 0),

(5,'purushotham',
'$2a$08$8X0s.401PfjqUvyNjVM5xuqABNdq.2gbwmO246oZsoPtz5UZU928', 'superadmin',
'purushotham@gmail.com', 1, 'resources/images/blank.jpg', 'Rajat Saxena', '13/ICS/035', '', '',
'', '', '0', 0, '', '0', '0', '', '', '', 0),

(49,'alokkumar','$2a$08$yleK7mWQEare0Xa/bYM19u3lTnD4QMZIjKOnpmgt/6tUV9VaC
2fL2','student', 'purushotham@gmail.com', 1, 'user_uploads/profile_images/49.jpg', 'Alok
Kumar', '10/EBT/205', '8974563210', '07fafec5371b3563b90f4027c28bfcece164',
'12/1/23,bjnagar', 'ardcollege', 'jkrao', 2016, 'computerscience', 'male', 'no', 'infosis', 'chennai',
'software employee', 1);

-- Indexes for dumped tables

37

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

-- Indexes for table `logs`

ALTER TABLE `logs`

ADD PRIMARY KEY (`id`);

-- Indexes for table `studentinfo`

ALTER TABLE `studentinfo`

ADD PRIMARY KEY (`enrollmentNo`);

ALTER TABLE `users`

ADD PRIMARY KEY (`user_id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `logs’

ALTER TABLE `logs`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=241;

-- AUTO_INCREMENT for table `users`

ALTER TABLE `users`

MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=93;

Registration Form:

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

?>

<html> <head> <meta charset="UTF-8">

<title> Sign Up SVU Convocation 2019 </title>

<link rel="stylesheet" href="<?php echo $this->cdn->users() . 'application/views/common/' .


'css/bootstrap-select.min.css' ?>">

38

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

<link rel="stylesheet" href="<?php echo $this->cdn->users() .


'application/views/common/' . 'css/bootstrap.min.css' ?>">

<link rel="shortcut icon" href="<?php echo $this->cdn->base() .


'/resources/images/favicon.ico' ?>">

<script type="text/javascript" src="<?php echo $this->cdn->users() .


'application/views/common/' . 'js/jquery-2.1.3.min.js' ?>"></script>

<script type="text/javascript" src="<?php echo $this->cdn->users() .


'application/views/common/' . 'js/bootstrap-select.min.js' ?>"></script>

<script type="text/javascript" src="<?php echo $this->cdn->users() .


'application/views/common/' . 'js/bootstrap.min.js' ?>"></script>

<style>

body{

background-image: url('<?php echo $this->cdn->users() .


'application/views/common/' . 'color-splash1.jpg' ?>');

background-size: cover; }

.centered-form{ margin-top: 60px;}

.centered-form .panel{ background: rgba(255, 255, 255, 0.8);

box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px;}

.navbar-brand{ position: absolute; width: 100%; left: 0; text-align: center;

margin: auto; } </style> </head>

<body background="url:color-splash1.jpeg">

<div class="container"> <div class="row centered-form">

<nav class="navbar navbar-fixed-top navbar-inverse navbar-default navbar-custom"


role="navigation">

39

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

<a class="navbar-brand" href="<?php echo base_url() ?>"><font size="6"


color="white">Welcome To SVU Convocation 2019</font></a>

</nav>

<div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4">

<div class="panel panel-default">

<div class="panel-heading">

<h3 class="panel-title"><div class="text-center"> Sign up for SVU


Convocation</div></h3>

</div> <div class="panel-body">

<?php echo form_open('Register/index/'); ?>

<div class="form-group">

<input type="text" name="username" value="<?=


set_value('username') ?>"class="form-control input-sm" placeholder="username"
required="true"> </div>

<div class="form-group">

<input type="text" name="full_name" value="<?= set_value('full_name',


@$full_name) ?>" class="form-control input-sm" placeholder="Full Name" required="true">

</div>

<div class="form-group">

<input type="text" name="fathersName" value="<?=


set_value('fathersName', @$fathersName) ?>" class="form-control input-sm"
placeholder="Father's Name">

</div>

<div class="form-group">

40

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

<input type="text" name="roll_number" value="<?=


set_value('roll_number', @$roll_number) ?>" class="form-control input-sm"
placeholder="Roll Number">

</div>

<div class="form-group">

<input type="text" name="degreeName" value="<?=


set_value('degreeName', @$degreeName) ?>" class="form-control input-sm"
placeholder="Degree Name">

</div>

<div class="form-group">

<input type="text" name="AreaSpecialization" value="<?=


set_value('AreaSpecialization', @$AreaSpecialization) ?>" class="form-control input-sm"
placeholder="Area Of Specialization">

</div>

<div class="form-group">

<input type="text" name="year" value="<?= set_value('year', @$year) ?


>" class="form-control input-sm" placeholder="Passout Year">

</div>

<div class="form-group">

<select class="selectpicker" name="gender">

<option value="">Gender</option>

<option value="male">Male</option>

<option value="female">Female</option>

</select>

</div>

41

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

<div class="form-group">

<input type="email" name="email" value="<?= set_value('email',


@$email) ?>" class="form-control input-sm" placeholder="Email Address" required="true">

</div> <div class="form-group">

<input type="text" name="phone_number" value="<?=


set_value('phone_number', @$phone_number) ?>" class="form-control input-sm"
placeholder="Phone Number">

</div> <div class="row">

<div class="col-xs-6 col-sm-6 col-md-6">

<div class="form-group">

<input type="password" name="password" class="form-control


input-sm" placeholder="Password" required="required">

</div> </div>

<div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group">

<input type="password" name="passconf" class="form-control


input-sm" placeholder="Confirm Password" required="required">

</div> </div>

<div class="form-group">

<?php echo '<label><font color="red">' . validation_errors() .


'</font></label>'; ?>

</div>

<input type="submit" value="Register" class="btn btn-info btn-block" >


</form>

42

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

<a href="<?= base_url('login') ?>" class="btn btn-info btn-block" />Already


Registered? Sign in </a>

</div> </div> </div> </div> </div> </body> </html>

USER FORM:

<?php

defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<div class="col-sm-5 col-sm-offset-2"> <div class="text-center">

<h2>Registration Form</h2> <br /> </div> <?php echo


form_open_multipart(current_url() . "?" . $_SERVER['QUERY_STRING']); ?> <?php

if (isset($profile_picture) && strlen($profile_picture) > 0) { ?>

<label>Active Picture</label><br /> <img src = "<?= dirname(base_url()) . '/' .


$profile_picture ?>" width="200px"/> <br /><br /> <br /><br />

<?php } ?> <label>Add/Change Profile Picture</label><br />

<?php if ($this->input->get('user_id') != NULL) { ?>

<input type = "file" name = "profile_picure" size = "20" /> <br />

<?php } else {

echo 'Please create account first. Then go to profile picture and update it from
there<br /><br />'; } ?> <label>Full Name</label>

<input type = "text" class = "form-control" name = "full_name" value = "<?php echo
set_value('full_name', @$full_name); ?>"/> <br /> <label>Father's Name</label>

<input type="text" name="fathersName" value="<?= set_value('fathersName',


@$fathersName) ?>" class="form-control input-sm" placeholder="Father's Name">

<br /> <label>Roll Number</label>

<input type = "text" class = "form-control" name ="roll_number" value = "<?php echo
set_value('roll_number', @$roll_number); ?>"/>

43

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

<br > <label>Degree Name</label>

<input type="text" name="degreeName" value="<?= set_value('degreeName',


@$degreeName) ?>" class="form-control input-sm" placeholder="Degree Name">

<br /> <label>Area Of Specialization</label>

<input type="text" name="AreaSpecialization" value="<?= set_value('AreaSpecialization',


@$AreaSpecialization) ?>" class="form-control input-sm" placeholder="Area Of
Specialization">

<br /> <label>Passout Year</label>

<input type="text" name="year" value="<?= set_value('year', @$year) ?>" class="form-


control input-sm" placeholder="Passout Year">

<br /> <fieldset> <legend> Upload Required Document </legend> <br>

<div class="row”> <div class="col-sm-6 wow fadeInDown"> </div>


<br>

<span style="font-family: 'Gill Sans MT'; font-size: 15px;">

<span id="ContentPlaceHolder1_lbl2" style="font-size:13pt;">Id


Proof(Aadhaar Card / Driving Licence)</span>

<span id="ContentPlaceHolder1_rfv_fuPic2" tabindex="11"


style="color:Red;visibility:hidden;">*</span>

</span><br>

<input type="file" name="ctl00$ContentPlaceHolder1$fuPic2"


id="ContentPlaceHolder1_fuPic2" class="btn btn-primary btn-sm">

<span style="font-family: 'Gill Sans MT'; font-size: 15px;">

<span id="ContentPlaceHolder1_lbl3" style="font-size:13pt;">UG


Degree Certificate/Convocation Certificate</span>

<span id="ContentPlaceHolder1_rfv_fuPic3" tabindex="12"


style="color:Red;visibility:hidden;">*</span>

44

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

</span><br>

<input type="file" name="ctl00$ContentPlaceHolder1$fuPic3"


id="ContentPlaceHolder1_fuPic3" class="btn btn-primary btn-sm">

<span style="font-family: 'Gill Sans MT'; font-size: 15px;">

<span id="ContentPlaceHolder1_lbl4" style="font-


size:13pt;">Consolidate Memo(PG)</span>

<span id="ContentPlaceHolder1_rfv_fuPic4" tabindex="13"


style="color:Red;visibility:hidden;">*</span>

</span><br>

<input type="file" name="ctl00$ContentPlaceHolder1$fuPic4"


id="ContentPlaceHolder1_fuPic4" class="btn btn-primary btn-sm">

<span style="font-family: 'Gill Sans MT'; font-size: 15px;">

<span id="ContentPlaceHolder1_lbl5" style="font-size:13pt;">SSC


Certificate</span>

<span id="ContentPlaceHolder1_rfv_fuPic5" tabindex="14"


style="color:Red;visibility:hidden;">*</span>

</span><br>

<input type="file" name="ctl00$ContentPlaceHolder1$fuPic5"


id="ContentPlaceHolder1_fuPic5" class="btn btn-primary btn-sm">

<span style="font-family: 'Gill Sans MT'; font-size: 15px;">

<span id="ContentPlaceHolder1_lbl6" style="font-


size:13pt;">Intermediate Certificate</span>

<span id="ContentPlaceHolder1_rfv_fuPic6" tabindex="15"


style="color:Red;visibility:hidden;">*</span>

</span><br>

45

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

<input type="file" name="ctl00$ContentPlaceHolder1$fuPic6"


id="ContentPlaceHolder1_fuPic6" class="btn btn-primary btn-sm"> <br>
</div> <br> </fieldset>

<br> <label>Email Address (unique)</label>

<input type = "text" class = "form-control" name = "email" value = "<?php echo
set_value('email', @$email); ?>"/>

<br /> <label>Phone Number</label>

<input type = "text" class = "form-control" name = "phone_number" value = "<?php echo
set_value('phone_number', @$phone_number); ?>"/> <br /> <p>

<label for="address">Residential Address <span class="required">*</span></label>

<br /><input class="form-control" id="address" type="text" name="address" value="<?


php echo set_value('address', @$address); ?>" />

</p>

<p> <label for="gender">Gender <span class="required">*</span></label> <?php

$options = array( '' => 'Please Select', 'male' => 'Male', 'female' => 'Female', ); ?>
<br /><?php echo form_dropdown('gender', $options, set_value('gender', @$gender),
'class="selectpicker"') ?>

</p> <br />

<p><label for="accomodation">Accommodation Required?<span


class="required">*</span></label><?php

$options = array( '' => 'Please Select', 'no' => 'No',

'Yes, 1 Extra Guest' => 'Yes, 1 Extra Guest',

'Yes, 2 Extra Guests' => 'Yes, 2 Extra Guests', ); ?>

<br /><?php echo form_dropdown('accomodation', $options, set_value('accomodation',


@$accomodation), 'class="selectpicker"') ?>

46

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

</p>

<br />

<label>Present Company Name</label>

<input type = "text" class = "form-control" name = "company_name" value = "<?php echo
set_value('company_name', @$company_name); ?>"/>

<br /> <label>Work Address</label>

<input type = "text" class = "form-control" name = "company_location" value = "<?php


echo set_value('company_location', @$company_location); ?>"/>

<br /> <label>Designation</label>

<input type = "text" class = "form-control" name = "compay_designation" value = "<?php


echo set_value('compay_designation', @$compay_designation); ?>"/>

<br /> <br /><?php

if (!isset($user_id) || $user_id != $this->session->userdata('user_id')) { // new user, or not


current user

$options = $this->permissions->all_permisiions(); echo '<label>Type</label><br />';

echo form_dropdown('type', $options, set_value('type', @$type), 'class="selectpicker"');

echo '<br /><br />'; } else

echo '<input type="hidden" name="type" value="' . $this->session->userdata('type') . '" />'


?> <?php

echo '<label><font color="red">' . validation_errors() . '</font></label>';

?> <div>

<b><font color='red'>NOTE: You can not change information once you click on final
submit</font></b><br />

<input type="submit" value="Final Submit" class="btn btn-danger"/>

47

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

</div> <?php echo form_close(); ?> </div>

VIEW ALL USERS:

<?php

defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<script>

function del_ask(str, n) { var x = confirm("Do you want to delete " + n + "?"); if (x ==


true)

location.href = "<?= base_url() ?>" + "User_controls/delete?user_id=" + str;}

var count = 1;

</script> <style>

input.form-fixer { padding: 1px; font-size: 19px; }

.form-horizontal .form-group input,

.form-horizontal .form-group select,

.form-horizontal .form-group label { height: 14px; line-height: 14px;}

</style>

<div class="col-sm-10">

<?php $current_user_id = $this->session->userdata('user_id');

$current_user_type = $this->session->userdata('type');

$options = $this->permissions->all_permisiions();

$options2 = array( '' => 'None', '0' => 'No', '1' => 'Yes', );

$query = $this->db->query('select * from users order by user_id'); ?>

<ul class="nav nav-list"> <li class="list-group-item">

48

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

<div class="row"> <b>

<div class="col-sm-2"> username </div>

<div class="col-sm-2"> Full Name </div>

<div class="col-sm-2"> Roll Number </div>

<div class="col-sm-3" > Modify </div>

<div class="col-sm-2"> Final Submission </div>

<div class="col-sm-1"> Delete </div > </b>

</div> </li> <?php foreach ($query->result() as $row) { ?>

<li class="list-group-item"> <div class="row"> <div class="col-sm-2">

<script> document.write(count + ". "); count++; </script>

<?php if ($row->active == 0)

echo '<font color = "grey">' . $row->username . '</font>'; else

echo $row->username; ?> </div> <div class="col-sm-2">

<?php echo $row->full_name; ?> </div>

<div class="col-sm-2"> <?php echo $row->roll_number; ?> </div>

<div class="col-sm-3 ">

<?php

echo form_open(base_url() . '/User_controls/set_type?user_id=' . $row->user_id,


'style="margin: 0 !important; padding: 0 !important;"'); if ($row->user_id ==
$current_user_id || ($this->permissions->get_level() >= 4 && $this->permissions-
>check_if_greater($current_user_id, $row->user_id) == 1 )) { echo '<a class="btn btn-xs
btn-success" href="' . base_url() . "User_controls/CreateOrUpdate?user_id=$row->user_id" .
'">'

. '<i class="fa fa-pencil fa-fw"></i> Edit</a> '; } else { echo '<a class="btn btn-success
btn-xs disabled"><i class="fa fa-pencil fa-fw"></i> Edit</a> '; }

49

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

if ($row->user_id != $current_user_id && $this->permissions->get_level() >= 2 &&


$this->permissions->check_if_greater($current_user_id, $row->user_id) == 1) {

echo form_dropdown('type', $options, $row->type, 'class="selectpicker" data-style="btn-


warning btn-xs" data-width="50%" onchange="this.form.submit()"'); } else {

echo '<a class="btn btn-xs btn-warning disabled" >' . '<i class="fa fa-gear fa-fw"></i>
Assign</a>'; } echo form_close(); ?> </div> <div class="col-sm-2 "> <?php

if ($row->final_submission == 1) { ?> <b><font color = "Green">Done</font></b>

<?php if ($this->permissions->get_level() >= 3 || $row->user_id == $this->session-


>userdata('user_id')) { ?>

<a target="_blank" class = "btn btn-xs btn-danger" href = "<?= base_url('convert_pdf?


user_id=' . $row->user_id) ?>" >PDF</a>

<?php } } else { echo '<b><font color = "Red">Pending</font></b>'; } ?> </div>

<div class="col-sm-1">

<?php if ($row->user_id == $current_user_id)

echo "<p class='text-right' ><font color='gray'>Seriously?</font></p>";

else if ($this->permissions->get_level() >= 4 &&

$this->permissions->check_if_greater($current_user_id, $row->user_id) == 1) { ?>

<a onclick="del_ask('<?php echo$row->user_id ?>', '<?php echo$row->username ?>')"

class="pull-right btn btn-xs btn-danger"><i class="fa fa-trash-o fa-lg"></i> Delete</a>


<?php } else { echo '<a class="btn btn-danger btn-xs pull-right disabled"><i class="fa
fa-trash-o fa-lg"></i> Delete</a>' } ?> </div> </div> </li> <?php } echo
'</ul> </div>

8.SCREEN SHOT:

50

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

WEBSITE LANDING PAGE:

LOGIN PAGE:

51

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

GOOGLE MAP DESTINATION LINK:

ACTIVIATING ROLL NUMBER:

52

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

REGISTRATION FORM:

SIGN UP FORM:

53

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

PAYMENT AND DOWNLOAD SLIP:

54

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

REGISTRATION SLIP:

55

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

PHP ADMIN FORM:

ADMIN VERIFICATION FORM:

56

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

CONVOCATION FORM IN DATABASE:

ACTIVIATE ACCOUNT

57

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

9. SYSTEM TESTING
INTRODUCTION:

Testing is the debugging program is one of the most critical aspects of the computer
programming triggers, without programming that works, the system would never produce an
output of which it was designed. Testing is best performed when user development is asked
to assist in identifying all errors and bugs. The sample data are used for testing. It is not
quality but quality of the data used the matters of testing. Testing is aimed at ensuring that the
system was accurately an efficient before live operation commands.

Testing Objectives:

The main objective of testing is to uncover a host of error, systematically and with
minimum effort and time. Stating formally, we can stay, testing is a process of executing a
program with intent of finding an error.

1. A successful test is one that uncovers an as yet undiscovered error.


2. A good test case is one that has probability of finding an error, if it exists.
3. The test is inadequate to detect possibly present errors.
4. The software more or less confirms to the quality and reliable standards.

Levels of Testing:

In order to uncover present in different phases we have the concept of levels of testing.

The basic levels of Testing:

Client needs Acceptance testing

Requirements System testing

58

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

Design Integration testing

Code unit testing

Figure 8.1: Levels of Testing


Code testing:
This examines the logic of the program. For example, the logic for updating various
sample data and with the sample files and directories were tested and verified.
Specification Testing:
Executing this specification starting what the program should do and how it should
perform under various conditions. Test cases for various situation and combination of
conditions in all the modules are tested.
Unit testing:
In the unit testing we test each module individually and integrate with the overall
system. Unit testing focuses verification efforts on the smallest unit of software design in the
module. This is also known as module testing. The module of the system is tested separately.
This testing is carried out during programming stage itself. In the testing step each module is
found to work satisfactorily as regard to expected output from the module. There are some
validation checks for fields also. For example the validation check is done for varying the
user input given by the user which validity of the data entered. It is very easy to find error
debut the system.
Each Module can be tested using the following two Strategies:
1. Black Box Testing
2. White Box Testing
BLACK BOX TESTING
What is Black Box Testing?
Black box testing is a software testing technique in which functionality of the
software under test (SUT) is tested without looking at the internal code structure,
implementation details and knowledge of internal paths of the software. This type of testing
is based entirely on the software requirements and specifications.
In Black Box Testing we just focus on inputs and output of the software system without
bothering about internal knowledge of the software program.

59

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

The above Black Box can be any software system you want to test. For example : an
operating system like Windows, a website like Google ,a database like Oracle or even your
own custom application. Under Black Box Testing, you can test these applications by just
focusing on the inputs and outputs without knowing their internal code implementation.
Black box testing - Steps
Here are the generic steps followed to carry out any type of Black Box Testing.
 Initially requirements and specifications of the system are examined.
 Tester chooses valid inputs (positive test scenario) to check whether SUT processes
them correctly. Also, some invalid inputs (negative test scenario) are chosen to verify
that the SUT is able to detect them.
 Tester determines expected outputs for all those inputs.
 Software tester constructs test cases with the selected inputs.
 The test cases are executed.
 Software tester compares the actual outputs with the expected outputs.
 Defects if any are fixed and re-tested.
Types of Black Box Testing
There are many types of Black Box Testing but following are the prominent ones
 Functional testing – This black box testing type is related to functional requirements
of a system; it is done by software testers.
 Non-functional testing – This type of black box testing is not related to testing of a
specific functionality, but non-functional requirements such as performance,
scalability, usability.
 Regression testing – Regression testing is done after code fixes; upgrades or any other
system maintenance to check the new code has not affected the existing code.
WHITE BOX TESTING
White Box Testing is the testing of a software solution's internal coding and
infrastructure. It focuses primarily on strengthening security, the flow of inputs and outputs

60

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

through the application, and improving design and usability. White box testing is also known
as clear, open, structural, and glass box testing.
It is one of two parts of the "box testing" approach of software testing. Its counter-
part, Blackbox testing, involves testing from an external or end-user type perspective. On the
other hand, Whitebox testing is based on the inner workings of an application and revolves
around internal testing. The term "Whitebox" was used because of the see-through box
concept. The clear box or Whitebox name symbolizes the ability to see through the software's
outer shell (or "box") into its inner workings. Likewise, the "black box" in "black box testing"
symbolizes not being able to see the inner workings of the software so that only the end-user
experience can be tested
What do you verify in White Box Testing?

White box testing involves the testing of the software code for the following:
 Internal security holes
 Broken or poorly structured paths in the coding processes
 The flow of specific inputs through the code
 Expected output
 The functionality of conditional loops
 Testing of each statement, object and function on an individual basis
 
The testing can be done at system, integration and unit levels of software development. One
of the basic goals of whitebox testing is to verify a working flow for an application. It
involves testing a series of predefined inputs against expected or desired outputs so that when
a specific input does not result in the expected output, you have encountered a bug.
 How do you perform White Box Testing?
  To give you a simplified explanation of white box testing, we have divided it into two
basic steps. This is what testers do when testing an application using the white box testing
technique:
STEP 1) UNDERSTAND THE SOURCE CODE
The first thing a tester will often do is learn and understand the source code of the
application. Since white box testing involves the testing of the inner workings of an
application, the tester must be very knowledgeable in the programming languages used in the
applications they are testing. Also, the testing person must be highly aware of secure coding
practices. Security is often one of the primary objectives of testing software. The tester

61

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

should be able to find security issues and prevent attacks from hackers and naive users who
might inject malicious code into the application either knowingly or unknowingly.
Step 2) CREATE TEST CASES AND EXECUTE
The second basic step to white box testing involves testing the application’s source
code for proper flow and structure. One way is by writing more code to test the application’s
source code. The tester will develop little tests for each process or series of processes in the
application. This  method requires that the tester must have intimate knowledge of the code
and is often done by the developer. Other methods include manual testing, trial and error
testing and the use of testing tools as we will explain further on in this article.
System testing:
Once the individual module testing is completed, modules are assembled and
integrated to perform as a system. The top down testing, which began from upper level to
lower level module, was carried out to check whether the entire system is performing
satisfactorily. There are three main kinds of System testing:
1. Alpha Testing
2. Beta Testing
3. Acceptance Testing
Alpha Testing:
This refers to the system testing that is carried out by the test team with the Organization.
Beta Testing:
This refers to the system testing that is performed by a selected group of friendly customers
Acceptance Testing:
This refers to the system testing that is performed by the customer to determine
whether or not to accept the delivery of the system.

Table. Acceptance Testing:

62

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

Test Description of Expected results Covered by script


Condition coverage
ID
1. Verification of a If a particular record This type of test in {verify}
particular record already existsit displays procedure in every Jsp file where
a message a record is inserted via an
interface
2. Updating of a All the details should This type of test is covered in all
particular record not be updated. the Asp files where updations are
made.

3. Validity of login Only the authorized This is covered in the login


persons must access procedure for the validity of a
system. user

Integration Testing:
Data can be lost across an interface, one module can have an adverse effort on the
other sub functions, when combined, may not produce the desired major functions. Integrated
testing is the systematic testing for constructing the uncover errors within the interface. The
testing was done with sample data. The developed system has run successfully for this
sample data. The need for integrated test is to find the overall system performance.
Output testing:
After performance of the validation testing, the next step is output testing. The output
displayed or generated by the system under consideration is tested by asking the user about
the format required by system. The output format on the screen is found to be correct as
format was designed in the system phase according to the user needs. Hence the output
testing does not result in any correction in the system.

10. CONCLUSION

63

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

This application created an easy and safe way to apply for convocation of post graduation
students. All the details are stored securely. By using this application one can easy apply for
convocation but the user should be student for certain university or college. This application
has become more popular with number of users. This application saves lot of time.

11. BIBLIOGRAPHY

64

Department of Computer Science , Sri Venkateswara University, Tirupati


PG Convocation

References for the Project Development were taken from the following books and web sites.

 HTML & CSS Design


 Programming in PHP

References
 http://www.w3schools.com
 http://www.tutorialrepublic.com
 www.html.com
 www.edx.org
 www.tutorialpoint.com


65

Department of Computer Science , Sri Venkateswara University, Tirupati

You might also like