2013hz12018 final-dissertation-presentation

Responsive Students Management System

BITS629T - BITS DISSERTATION

BIRLA INSTITUTE OF TECHNOLOGY & SCIENCEPILANI (RAJASTHAN)

April 2015

By

KARTHIKEYAN B

2013HZ12018

ACKNOWLEDGEMENT

I express my prime gratitude to the LORD ALMIGHTY for giving the confidence and strength for

the successful completion of this project.

I acknowledge sincere and grateful thanks to my Internal Supervisor Mr. Rajasekar R for his

constant guidance, necessary assistance, Kind co-operation and encouragement.

I express my sincere thanks to my Additional Examiner Ms. Rituparna Kashyap for her kind

advice and valuable guidance and her suggestions encouraged me in this project.

It is my immense pleasure to thank Mr. Sanjay Kumar Sahay, Faculty, GOA campus, for his

valuable feedback during the course of this work.

I place on record my warm gratitude to The Dean and the Faculty Members, of BITS for

providing admission and full support for doing this course.

Finally I would like to express my heartfelt thanks to my affectionate and ever-loving parents

and all others friends who helped me in different ways to carry out this course and this project a

successful one.

BITS ZG629T - BITS Dissertation - 2013HZ12018 - Karthikeyan B

Presentation Agenda

Introduction

Overview of the Work

Objective of the Work

Front End Development

HTML5, CSS3 & jQuery

Responsive Web Design

Server Side Development

PHP & MySQL

CodeIgniter

SMS Gateway & API

App System Analysis

Existing System

Proposed System

Data Flow & Project Design

Data Flow Diagram

Add Student, Events/News

Add Examination Desgin

Send Events/News Design

Send Examination Results

Reply for Events/Contact Page

Result Screen Shots

Conclusion & Feature Enhancements

References


Introduction About the Project

Overview of the Work

This work is to explore the responsive web development strategies

and defining a unified architecture by combining responsive site

and also include the advantages of using the communication

methodologies SMS and e-mail.

This document gives brief about development methodologies, its

merits and demerits.

In order to prove the proposed architecture, I have done My POC

and included the Screen shot outputs with this report.


Introduction About the Project

Objective of the Work

The main core objective of this project is to define a unified

architecture by combining the responsive site and also use the

advantages of communication like SMS and e-mail for get the

notifications.

For example, this architecture will use responsiveness for the site,

so that user will able to access the site from any devices.

All the events, news, results like notifications are going to send as

a e-mail and SMS. So the user will able to know the status

immediately even without logging into the site.



HTML Hyper Text Markup Language (HTML) is used for creating and

visually representing a web page.

HTML adds "markup" to standard English text. "Hyper Text" is the

word that refers to the links that connect Web pages to one

another.

HTML is the language that describes the structure and the

semantic content of the web document.

Contents that are within the web pages is tagged with HTML

elements such as <img>, <title>, <p>, <div>, <picture> etc.

These are the elements that are used to form the building blocks

of a website.



HTML5

HTML5 defines the fifth major revision of the core language of the

World Wide Web, HTML. "HTML5 differences from HTML4"

describes the differences between HTML4 and HTML5 and provides

some of the rationale for the changes. Tags like <section>,

<aside>, <articles>, <video>, <audio> are newly added.

In this “Responsive Student Management System” HTML5 is used

to develop all the pages in the site. The main block elements like

<div>, <p> header tags are widely used.

Form elements like text box, text area, Buttons are used for the

forms where ever it’s needed.



CSS CSS is an acronym of Cascading Style Sheets, a language that is

used to style the html pages in the web development.

CSS is designed primarily to enable the separation of block content

in the HTML pages. This separation of blocks can improve more

content accessibility and provide more flexibility and also control in

the specification of blocks in multiple HTML pages to format by

specifying the relevant CSS like color, background, fonts in a

separate .css file.

For eg, a CSS rule specify that "all heading elements needs to be

bold with font size 18px," means without formatting the code such

as a <b> or <strong> tags indicating how such text should be

displayed as bold.



CSS3

CSS3 is the latest evolution of the Cascading Style Sheets.

CSS3 brings a lots of new features, like shadows, rounded corners,

transitions, gradients and also animations, as well as new layouts

like multi background, multi-columns, grid layouts.

In this project, I used the CSS3 properties like transitions,

gradients, Rounded corners and Animations are used while loading

the site first time.



jQuery

jQuery is one of the fast, the small, and the feature rich JavaScript

library. It makes the HTML document traversal and manipulation,

event handling, animation once the DOM is loaded.

With the combination of versatility and flexibility, jQuery has

changed the way that millions of people start to write JavaScript.

In this project for validation and to trigger some CSS3 events

jQuery is used.



RWD - Responsive Web Design

Responsive web design is all about creating web sites which

automatically adjust themselves on all devices, from small phones,

tablets to large desktops.

As the site is planned to do as responsive design I am using the

Bootstrap frameworks and Media queries to achieve the

responsiveness nature.


Bootstrap Frame Work

Bootstrap is one of the most popular framework for developing

responsive, mobile projects on the web. Bootstrap is a free front-

end framework for faster and easier web development.

Bootstrap includes the HTML and the CSS based design templates

for all the HTML elements like div blocks, table, typography styles,

form elements like buttons, text box, text-area, navigation, tables,

image carousels, modals, and many other, as well as optional

JQuery plugins.

Bootstrap also gives you the ability to easily create responsive

designs.



Media Queries

Media queries are simple filters that can be applied to the CSS styles.

It is easy to change the styles based on the characteristics of the device rendering the

content, including the device width, orientation, height and even resolution.

With some sets of increments, you are able to target most of the devices. In practice,

there is no need to handle all all page widths. In my experience, 320px for Mobiles,

768px for talbets, and 1200px for Desktops are the most commonly used media

queries.


Mobile Devices @media(max-width:767px){}

Mobile Portrait: @media(max-width:479px){}

Tablets: @media(max-width: 1023px){}

Tablets Landscape: @media(min-width: 1024px){}


PHP

PHP is one of the popular general-

purpose scripting language well

suited for web development.

PHP is Fast and flexible and also

pragmatic, PHP is the server side

scripting language that is designed

for develop websites and also it is

used as one of the general-purpose

programming language.

PHP code can mixed with the HTML

code, and also it is used as the

combination with the various

templates and other web

frameworks.

PHP code is usually processed by the

PHP interpreter, which is usually

implemented as the web server's

native module or the Common

Gateway Interface (CGI).

For example, PHP code will generate

the web page's HTML code, as an

image, or as some other data and

also it can be used in standalone

graphical applications.

In this project, I used the PHP code

for server side integration with the

MySQL database.




MySQL

MySQL is a popular choice of database for use in the web

applications, and it is the central component of the widely used

LAMP open source web application software stack (and other 'AMP'

stacks). LAMP is an acronym for "Linux, Apache, MySQL,

Perl/PHP/Python. Open source projects that require a full-featured

database management system often use MySQL.

In this project, I used the MySQL database for all the server side

database and data storage maintain purposes.



CodeIgniter

CodeIgniter, the PHP framework with a very small footprint is

CodeIgniter, it is built for the developers for the one who need a

simple and elegant tool kits to create full featured web

applications.

CodeIgniter is an Application Development MVC Framework.

CodeIgniter helps the people to develop websites using PHP. The

main goal is to develop projects much faster than you could if you

were writing code from scratch, by providing the rich set of

libraries for commonly needed tasks, as well as using the simple

interface and logical structure to access these predefined libraries.



MVC Approach CodeIgniter is based on the Model-View-Controller development

pattern. MVC approach that separates application logic from

presentation.

The Model represents the data structures. Model classes will contain

functions that helps to retrieve, insert, and update information in the

database.

The View is the information that is being presented to a user. A View

will normally a web page for other languages, but in CodeIgniter, view

can also be segmented like header,footer main content etc.

The Controller is intermediate one between the Model and the View to

process the HTTP request and also to generate a web page.


System Analysis

Existing System In the latest world we need easy communicating way in all fields, but in

displaying the results no such modern technologies are to used.

Normally, the news, events and results are displayed through the web now.

By giving their register number the students are able to know their results.

For each and every time the students need to login into the system have to

verify/Know to see any changes in the existing info or any new information

is announced or not.

Meanwhile, the admin also have to login to the system to check for the

comments or queries raised by the students and have to answer for that.

In the existing system communication is quite complex to know the data for

students and also to admin.


Proposed System The proposed system uses PHP, HTML, jQuery as the front end and used the

MySQL as the database for back end storage, and for Integration between

MySQL and HTML blocks PHP is used.

This project maintains the database which consists of the student personal

details, examination marks, events information’s are stored as the input.

The event information, examination marks are stored in the database and

send through the students as an e-mail and SMS.

The same way once the circular is announced the student will get the e-mail

and SMS as mentioned above. If the students have any queries the students

can able to login through any devices like mobile, tablet and desktop as the

site is built as a responsive site.


System Analysis


Add Events / News Details

Data Flow Diagram


Add Student Details

Add Examination Design Send Events/News Design



Send Examination Results Reply Comment/Contact



Result Screen Shots

Home Page Login Page


Events Page

Result Screen Shots

Contact Page Admin Dashboard


Add Students Add Events

Result Screen Shots

Examination Admin page Mail Settings Page


Conclusion

This project is developed to send the exam results, events, news,

comments and contact details through SMS & e-mail. The student

details, events, comments, and the examination answers and

results are stored in the database and retrieved in some places

where we need to send the SMS and e-mail.

Ordering of objeccts is a fundamental issues in human decision

making and it plays a significant role in the design of intelligent

information systems. Applications in ordered information table deal

with ordering objects instead of classifying them, in which objects

are ordered both by descriptive and overall attributes, and the

rules to be mined are actually the association between them.


Conclusion

Using the ordering rules we ordered the students in the students

database based on their roll no and events based on the created

date. Using the e-mail SMTP server and SMS server the system will

send the SMS and e-mail accordingly based on the query the SMS

server is connected with the help of API with the system.

A model students records are loaded and the events, news are

send to all the users and the specific examination results are send

to the specific user only. In the same way, the comment for the

events, news and the contact section details are send as e-mail

and SMS to admin.


Feature Enhancements

In this project, now only the assignment examination results are

send through the SMS and e-mail once the examination is finished.

In future this project can able to develop to send the Mid

Semester, Final Semester and Final grade results through out the

colleges / Universities.

It is possible to develop for the comments, Events section by just

sending the SMS reply it will trigger the email and SMS to admin

instead of login into the system/Mobile with internet connection by

having the SMS functionality alone without net connection able to

reply/ask the queries regarding the news/events.


References

HTML & HTML5

https://developer.mozilla.org/en-US/docs/Web/HTML

http://en.wikipedia.org/wiki/HTML

http://en.wikipedia.org/wiki/HTML5

CSS & CSS3

http://en.wikipedia.org/wiki/Cascading_Style_Sheets

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3

Bootstrap Frame work

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

jQuery

https://jquery.com/


References

Media Queries

https://developers.google.com/web/fundamentals/layouts/rwd-

fundamentals/use-media-queries?hl=en

PHP

http://en.wikipedia.org/wiki/PHP

MySQL

http://en.wikipedia.org/wiki/MySQL

CodeIgnitor

https://ellislab.com/codeigniter/user-guide/

https://ellislab.com/codeigniter/user-guide/overview/mvc.html


Thank You

BITS DissertationResponsive Students Management System

http://bkarthikeyan.com/bitsdissertation/


http://bkarthikeyan.com/bitsdissertation/

2013hz12018 final-dissertation-presentation

Career