2013HZ12018 final-dissertation-presentation

Responsive Students Management System
BITS629T - BITS DISSERTATION
BIRLA INSTITUTE OF TECHNOLOGY & SCIENCE
PILANI (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.

Front End Development
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.
Server Side Development

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

Data Flow & Project Design
 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 Dissertation
Responsive Students Management System
http://bkarthikeyan.com/bitsdissertation/

2013HZ12018 final-dissertation-presentation

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 2013HZ12018 final-dissertation-presentation

Similar to 2013HZ12018 final-dissertation-presentation (20)

Recently uploaded

Recently uploaded (20)

2013HZ12018 final-dissertation-presentation