CODE-IT

CHAPTER 1

Introduction

The purpose of this project is to modernize the practical system of college by

providing easy and convenient way for performing the practical.

This project is aimed at developing a practical system which will be helpful

to teacher as well as student performing the practical. It is a server based practical
system capable of performing the programming in core languages (C/C++/JAVA) of
computer science and engineering course.

This system is trying to solve the problem of various scenarios such as

platform problem, computer problems etc. As the compiler is installed on the server,
even if students don’t have compilers or IDE’s installed on their machine, they can
learn and perform programs and code. This also makes all of the students to submit
the code as everyone has an account of their own.

The students will then observe, analyze and perform the practical in the
respective technology which will be integrated right into the browsers. The teacher
can view the submitted code by the student and check it. They can also react to it or
reply to it if they want.

1.1 Motivation

The real motivation is the actual requirement of the student as well as teacher when
they perform the practical. To reduce the extra work load by the students and
teachers. There are many issues like internet connectivity, different platform
compatibility; each system must be installed with the required IDE’s and many
more. Our primary aim was to overcome all these issues with one system so we
decided to make a server based compiler and interpreter named as CODE-IT.

1.2 Aim

To implement the college practical system in easier and interesting way for students
and teacher and also to overcome the common issues while performing the practical

COETA/CSE/17-18 1
 CODE-IT

1.3 Objectives

 To properly designed the practical system of the college for the overall
development of student.
 To implement the hard work of the teacher in fruitful way for students in
improving their practical knowledge.
 To overcome most of the common issues while performing the practical.
 Perform proper analysis on the student practical records individually.

1.4 Scope

Here the server based practical system is developed for performing practical in an
easy way. As the practical is one of the most important assets of the student life to
gain practical knowledge on their core programming subjects. The system provides
the facility of proper execution of practical, report error or output to the students and
provides an interesting view to teacher for easy analysis of student’s practical.

In future it can be implemented successfully for the practical examination on

many subjects that are based on compilers and interpreters.

1.5 Organization of Report

Chapter 2 provides the literature survey showing different techniques for image
sharing. Chapter 3 provides the analysis of the detailed design of the proposed
system. Chapter 4 of the project gives the complete implementation details of the
system. Chapter 5 provides advantages and limitations of the proposed system.
Conclusion is drawn in Chapter 6 along with discussions of possible future
extensions.

COETA/CSE/17-18 2
 CODE-IT

CHAPTER 2

Literature Review

2.1. Background History

A web integrated development environment is a browser based IDE that allows for
software development or web development. A web IDE can be accessed from a web
browser, such as Google Chrome or Mozilla Firefox, allowing for a portable work
environment. A web IDE does not usually contain all of the same features as a
traditional, or desktop, IDE, although all of the basic IDE features, such as syntax
highlighting, are typically present.

A web IDE, like most websites, is usually composed of two pieces: a

frontend and a backend. The frontend is usually written in Javascript, using AJAX
methods to communicate with the backend using a HTTP API, although in some
cases, a browser extension or desktop application serves as the frontend and
communicates with the backend without the need for a browser. The backend takes
care of creating, saving, and opening files, as well as running any terminal
commands if the IDE supports it. This setup allows for portability and continuity.
The state of the IDE can be saved and reopened on another machine. This also
allows for compiling or running programs to continue while the user is away.

Many web IDEs support several programming languages, while others only
support a specific language. Most web IDEs allow access to a Command-line
interface (CLI) that allows the user to install or run any software that is needed for
development, allowing "full" control over the development environment. Open
source web IDEs allow for installation on local servers or machines and can be used
to give the developer more control over the development environment. IDEs are
designed to maximize programmers’ productivity. They normally achieve this goal
by consisting of a source code editor, a compiler and/or interpreter, built-in
automation tools, and a debugger. Some modern IDEs even employ plug-in
frameworks that support extension to the environment, hence meeting various needs
of programmers.

COETA/CSE/17-18 3
 CODE-IT

The startling growing software sizes and hardware consumption (e.g.

memory and CPU) of IDEs as well as their plug-ins have gradually become a
headache. Moreover, programmers have to ensure that their favorite IDEs and
development toolkits (e.g. JDK) are installed and properly configured in their
computers before they are able to start working, which takes a substantial amount of
time. Even running a properly configured IDE takes a long time to load. It seems
like that IDEs will add troubles to programmers these days instead of aiding them.
Therefore, some interesting solutions are emerging and can keep the hundreds of
megabytes away from disk.

The basic idea is to develop a useful development tool that can be used by
any thin client with a web browser. It will make programming on the move, or
programming outside of the normal working environment far more convenient and
easy. Also, it will provide a plug-in architecture to extend the platform to support
more features. However, plug-ins here no longer needs any installation or
configuration: appending their URLs to the IDE’s setting will automatically trigger
additional functionality.

On the other hand, web-based IDE encourages live collaboration between

team members, because its structure requires all documents and codes to be
modified and saved on the servers, which will release the problems of the implicit
code knowledge. The most exciting advantage of web-based IDE is that, with the
new generation of smart phones and PDAs that support AJAX and Java ,
programming jobs can be done movably anywhere anytime.

COETA/CSE/17-18 4
 CODE-IT

2.2. Related Works

An automated web-based grading system called Infandango was developed by Hull,

Powell and Klein. The system allows students to submit Java source filesand a
backend JUnit test engine compiles and executes a set of predefined tests. The
outcome is then stored in a database and communicated back to the students. The
Infandango system is composed of four components: a web front-end, the CoSign
authentication module, the Jester JUnit tester and the PostgreSQL database. Based
on the authors’ conclusion, the components are loosely coupled and they can be
swapped out with other appropriate components.

Web-CAT, developed by Edwards and Perez-Quinones, also provides an

automatic web-based grading system. It supports mainly Java and C++ exercises.
Web-CAT exercises can be configured to require the test cases together with the
source files. This is one of the well-known features of Web-CAT. Web-CAT is
extensible with its plug-ins. Plug-ins can be developedto support other programming
languages and they can be configured to collect more statistical data from the
students’ submissions.

Pritchard’s approach with Websheet is for an instructor to setup a solution

and provide the locations of the "fill-in-the-blank" areas [18]. Through a browser,
students provide the fill-in and submit for evaluation. Websheet supports both Java
and C++ and uses CodeMirror for its text editor. It is designed for in-class exercises
or practice homework problems. After three failed attempts, the solution is made
available to the user.

Deeb and Hickey developed Spinoza, which is also a web-based IDE with an
automatic grading engine. With SpinozaExercises, instructors can quickly create a
problem by providing a description and optional skeleton codes.
SpinozaHomeworks are more comprehensive in that solution files and test cases are
required so they can be used to evaluate submitted solutions. A unique feature of
Spinoza is the share mode where instructors can display submitted code to the entire
class. The instructor view offers instructors the current progress of the class.

In real time, the instructors can see the students that have completed the
assignment, those that still have syntax errors and those that have the same

COETA/CSE/17-18 5
 CODE-IT

equivalent class file. A survey was done by the authors with 238 students and found
that 36% preferred this system over lectures with Powerpoint. Also, 28% of the
students thought Spinoza is as good as a learning method as Powerpoint lectures.

Collabode from Goldman, Little and Miller enables programmers to

synchronously collaborate and immediately share the changes with one another. The
web-based development environment is powered by Eclipse on the server side. Each
user accesses the files via their respective browsers. The multiple editors are
supported by EtherPad, an open-source collaborative online editor, which shares the
changes in near real-time. The system supports the Python and Java programming
languages. The authors describe three collaborative scenarios: micro-outsourcing,
test-driven paired programming and mobile instructors. With micro-outsourcing,
many programmers can make small contributions to a developer. And in the last
scenario, instructors can help the students by connecting to their IDEs. Kurtz,
Fenwick, Tashakkori, Esmaili and Tate introduced the Code Magnet microlabs into
their lecture. Students use tablets during lectures to graphically compose solutions to
in-class conceptual problems. The submitted solutions are evaluated by Code
Magnet and feedback is provided. A control study with two different groups of
students was done at SUNY Stony Brook where three identical questions were asked
on their tests. The questions were taken from lectures on the binary tree traversals,
the building of binary search tree (BST) from postorder traversal and the building of
general binary tree from preorder and inorder traversals. The authors found that the
group that had been exposed to microlabs performed, on average, better than those
that had not been by 8 to 10% with a statistical significance of p = 0.038.

COETA/CSE/17-18 6
 CODE-IT

2.3. Summary & Discussion

While there currently exists popular IDEs such as Eclipse, however, there seems not
to be a huge demand for web based IDEs. We state against this belief, claiming that
web based IDEs offer functionality not provided by traditional IDEs.

Aside from including features of all web based applications, such as thin
clients and any time/any place services, web based IDEs have other unique features.
The compiling on the server side can be done on powerful and separate processors,
saving the client all the trouble. Also, the client does not need to have all SDKs
installed to be able to use them.

There is another alternative for web based IDEs i.e. a remote desktop
connection (RDC). For an organization, RDC allows the IT department to install
applications on a central server instead of multiple computers. Remote users can log
on and use those applications over the network. Such centralization can make
maintenance and troubleshooting easier. RDC and Windows authentication systems
prevent unauthorized users from accessing apps or data. RDC is successfully applied
in multiple industries for the management of IT infrastructure.

As all these feature are also provided by a remote desktop connection (RDC),
but the ability to share a project between multiple users, allowing them to develop
different parts of a project simultaneously without extra coordination gives web
based IDEs an edge over RDCs. However, RDC can be ineffective in transmissions
and inconvenient to use. What’s more, we need to have another remote computer
that we have access to and an RDC tool to make the connection happen.

COETA/CSE/17-18 7
 CODE-IT

CHAPTER 3

Proposed System Analysis & Design

3.1 Problem Statement

As in practical sessions we need to install all the related software for performing the
practical on C/C++ and Java on every individual system along with this teacher have
to note the student performance as per the schedule. But the problem is that no such
systems are available or not in use for college practical. Therefore, there is a need of
college practical systems which can assist teacher to easily and properly configure
practical by uploading list for practical and complete analysis of individual students.
Also there will be simple and effective practical performance by the student.

3.2 Analysis

Practical is one of the most important assets of student life that help them to gain
practical knowledge. Today when practical session for the core subjects of computer
engineering (C/C++/Java) starts, we need to install different IDE or compilers in
every individual system. Problems occur when some software for performing the
practical is not compatible with the system. This modern method of performing
practical leads to the end of all the above issues discussed. To make this practical
system interesting and fruitful to every student, CODE-IT can be easy to implement.
CODE-IT is a server based compiler means any computer system can access this
practical system connected to the server and can perform practical on various
subjects. Another point is that to provide an interface to teacher that can make
complete analysis of each and every student. By this system teacher can easily
upload the practical list with the aim of the practical along with some little
description about it.

COETA/CSE/17-18 8
 CODE-IT

3.2.1 Feasibility Study

Feasibility means whether some idea will work or not. In other work, feasibility
study involves an examination of the operations. A project feasibility study is an
exercise that involves documenting each of the potential solutions to a particular
business problem or opportunity. Feasibility studies can be undertaken by any type
of business, project or team and as a critical part of the project life cycle. A
procedure that identifies, describes, and evaluates candidate systems and selects the
best system for the job is called as Feasibility study.

Three key considerations are involved in the feasibility analysis:

1. Technical Feasibility:-

The use of HTML, CSS, Java Script and JSP makes form design easy and
convenient. The project can be run on any system with minimum requirements. It
reduces data entry errors because of applying validation in most of all the forms, it
can be easily handled by any user, and it also helps in faster data updations. Also the
project though developed in latest GUI, it is very easy to operate. Hence the project
is technically feasible.

2. Economic Feasibility:-

Cost benefit analysis is very important in deciding whether the project is

economically feasible or not. It is alone sufficient to save our time and money. It is
one time investment and does not require regular maintenance. Through cost benefit
analysis it was concluded that the benefits outweigh costs and thus the project is
economically feasible.

3. Behavioral Feasibility:-

Behavioral feasibility determines how much effort will go into educating, selling
and training the users on a candidate system. As everyone now-a-days are users of
social Network it is very easy to handle normally by anyone. The project was also
evaluated to be behaviorally feasible as it is very user-friendly and hardly needs any
extra efforts to educate user for its utility and functioning.

COETA/CSE/17-18 9
 CODE-IT

3.2.2 Requirement Analysis

In this system to develop a college practical system we have to study the

requirement and dependencies for its development. Analysis shows that,
unfortunately users struggle to set up and maintain status of practical performed
hence this process is little bit tedious and time consuming. This proposed practical
system mainly consisting of student interface for performing practical, teacher
interface for managing and configuring the students as well as practical and
compiler and interpreter for performing C,C++ and java programs successfully.

3.3 System Design

3.3.1 Basic Idea

To design a college practical system such that it should be easy to implement and
can be able to overcome their related issues. In this college practical system two
main entities students and teachers are involved. Teachers have been given an
interface where they can perform analysis on the practical performed by the
individual student and can accept or reject the particular practical also teacher can
upload aim of the practical with some description for their respective classes.

Students on the other hand have to register with their credentials and their
current academic year so that they can login into the system and can perform the
practical on C, C++ and Java related to them. Students need to run their program
code, solve errors in their program if any and submit their program code to the
system so that teacher would be able to check it and accept or reject accordingly.

To make this system in used to other than student not registered, for
practicing themselves we have implemented compilers that can run the program
code on C, C++ and JAVA language.

COETA/CSE/17-18 10
 CODE-IT

3.3.2 Algorithms Used

1. Step 1: Classify the code based on the programming language.

2. Step 2: Execute the respective function based the programming language.
3. Step 3: Take the input and code provided and save it into file with respective
extension
4. Step 4: Compile the file providing inputs (if any).
5. Step 5: Save the output in a variable.
6. Step 6: Return the variable.
7. Step 7: Display the output.

3.3.3 Working Methodology

Figure 3.3.3.1: Dataflow Diagram of Proposed System

COETA/CSE/17-18 11
 CODE-IT

The stepwise workflow of this working methodology using data flow diagram
shown above is mention below. These steps completely describe the above working
methodology.

Stepwise Workflow of working system:

1. Step 1: Registration for adding new student

2. Step 2: Student login to perform their respective practical.
3. Step 3: Select practical to perform.
4. Step 3: Take input (program code) from student.
5. Step 4: Save it in a respective files (C/C++/Java).
6. Step 5: Compile (Execute the file).
7. Step 6: Take the output from the compilation process and send it back to the
user.
8. Step 7: Report any error and total compilation time.
9. Step 8: Submit the program code.
10. Step 8: Teacher login to Perform Analysis of student practical based on their
submitted code and comments on particular practical perform.

COETA/CSE/17-18 12
 CODE-IT

3.3.4 Usecase Diagram

Figure 3.3.4.1: Use Case Diagram

COETA/CSE/17-18 13
 CODE-IT

3.3.5 Sequence Diagram

Figure 3.3.5.1: Sequence Diagram for Student

Figure 3.3.5.2: Sequence Diagram for Teacher

COETA/CSE/17-18 14
 CODE-IT

CHAPTER 4

Technology Implementation & Testing

4.1Technology

4.1.1 HTML

Hypertext Markup Language (HTML) is the standard markup language for creating
web pages and web applications. With Cascading Style Sheets (CSS) and
JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.
Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure
of a web page semantically and originally included cues for the appearance of the
document.

HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be embedded into
the web page. HTML provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links, quotes and
other items. HTML elements are delineated by tags, written using angle brackets.
Tags such as <img /> and <input /> directly introduce content into the page. Other
tags such as <p>...</p> surround and provide information about document text and
may include other tags as sub-elements. Browsers do not display the HTML tags,
but use them to interpret the content of the page.

HTML provides a means to create structured documents by denoting

structural semantics for text such as headings, paragraphs, lists, links, quotes and
other items. HTML elements are delineated by tags, written using angle brackets.
HTML can embed programs written in a scripting language such as JavaScript
which affects the behavior and content of web pages. Inclusion of CSS defines the
look and layout of content.

COETA/CSE/17-18 15
 CODE-IT

4.1.2 CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language. Along with HTML and
JavaScript, CSS is a cornerstone technology used by most websites to create visually
engaging web pages, user interfaces for web applications, and user interfaces for
many mobile applications.

CSS is designed primarily to enable the separation of presentation and

content, including aspects such as the layout, colors, and fonts. This separation can
improve content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple HTML pages to share
formatting by specifying the relevant CSS in a separate .css file, and reduce
complexity and repetition in the structural content.

Separation of formatting and content makes it possible to present the same

markup page in different styles for different webpage. Changes to the graphic design
of a document (or hundreds of documents) can be applied quickly and easily, by
editing a few lines in the CSS file they use, rather than by changing markup in the
documents.

The styles can also be placed in an external CSS file, as described below, and
loaded using syntax similar to:

<link href="path/to/file.css" rel="stylesheet" type="text/css">

Here link tag is used under the head tag (<head> </head>) to link the
external css file with the HTML page, href is used to specify the location of the .css
file, rel specify the relation between the HTML page and css document as stylesheet
and type defines the type of file which we want to link.

4.1.3 JavaScript

JavaScript often abbreviated as JS, is a high-level, interpreted programming

language. It is a language which is also characterized as dynamic, weakly typed,
prototype-based and multi-paradigm.

COETA/CSE/17-18 16
 CODE-IT

Alongside HTML and CSS, JavaScript is one of the three core technologies
of the World Wide Web. It is used to make dynamic web pages interactive and
provide online programs, including video games. The majority of websites employ it
and all modern web browsers support it without the need for plug-ins by means of a
built-in JavaScript engine. Initially only implemented client-side in web browsers,
JavaScript engines are now embedded in many other types of host software,
including server-side in web servers and databases.

Although there are strong outward similarities between JavaScript and Java,
including language name, syntax, and respective standard libraries, the two
languages are distinct and differ greatly in design; JavaScript was influenced by
programming languages such as Self and Scheme.

4.1.4 jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side

scripting of HTML. It is free, open-source software using the permissive MIT
License. Web analysis indicates that it is the most widely deployed JavaScript
library by a large margin.

jQuery's syntax is designed to make it easier to navigate a document, select

DOM elements, handle events, and develop Ajax applications. jQuery also provides
capabilities for developers to create plug-ins on top of the JavaScript library. This
enables developers to create abstractions for low-level interaction and animation,
advanced effects and high-level, themeable widgets. The modular approach to the
jQuery library allows the creation of powerful dynamic web pages and Web
applications.

4.1.5 Materialize CSS

Materialize is a UI component library created with CSS, JavaScript, and HTML.

Materialize UI components help in constructing attractive, consistent, and functional
web pages and web apps, while adhering to modern web design principles such as
browser portability, device independence, and graceful degradation. It helps in
creating faster, beautiful, and responsive websites. It is inspired from Google

COETA/CSE/17-18 17
 CODE-IT

Material Design. Materialize provides you ready made rich layouts, animations and
many more powerful UI.

Materialize CSS have rich set of colors available that can be easily applied to the
text as well as background. There are various readymade components available that
can be used for attractive and simple designing of the webpage.

Some of them are as follows:

 Cards: - Cards are a convenient means of displaying content composed of

different types of objects. They’re also well-suited for presenting similar
objects whose size or supported actions can vary considerably, like photos
with captions of variable length.

 Buttons: - There are 3 main button types described in material design. The
raised button is a standard button that signify actions and seek to give depth
to a mostly flat page. The floating circular action button is meant for very
important functions. Flat buttons are usually used within elements that
already have depth like cards or modals.
 Navbar: - The navbar is fully contained by an HTML5 Nav tag. Inside a
recommended container div, there are 2 main parts of the navbar. A logo or
brand link, and the navigations links. You can align these links to the left or
right.
 Grid: - We are using a standard 12 column fluid responsive grid system. The
grid helps you layout your page in an ordered, easy fashion.
 Tabs: - The tabs structure consists of an unordered list of tabs that have
hashes corresponding to tab ids. Then when you click on each tab, only the
container with the corresponding tab id will become visible.

4.1.6 PHP

Hypertext Preprocessor (PHP) is a server-side scripting language designed for web

development but also used as a general-purpose programming language.

PHP code may be embedded into HTML code, or it can be used in

combination with various web template systems, web content management systems,
and web frameworks. PHP code is usually processed by a PHP interpreter

COETA/CSE/17-18 18
 CODE-IT

implemented as a module in the web server. The web server combines the results of
the interpreted and executed PHP code, which may be any type of data, including
images, with the generated web page.

Example #1 An introductory example

<html>

<head>

<title>Example</title>

</head>

<body>

<?php

echo “This is a PHP Script!”;

?>

</body>

</html>

Instead of lots of commands to output PHP pages contain HTML with

embedded code that does “something” (in this case, output “This is a PHP Script!”).
The PHP code is enclosed in special start and end processing instruction <?php and
?> that allow you to jump into and out of “PHP Mode.”

What distinguishes PHP from something like client-side JavaScript is that

the code is executed on the server, generating HTML which is then sent to client.
PHP is mainly focused on server side scripting which can be used for collecting
form data, generating dynamic page content. The best things in using PHP are that it
is extremely simple for beginners to start, but offers many advanced features for a
professional programmer.

COETA/CSE/17-18 19
 CODE-IT

4.1.7 MySql

MySQL is an open-source relational database management system (RDBMS). Its

name is combinations of “My”, the name of co-founder Michael Widenius's
daughter, and "SQL", the abbreviation for Structured Query Language. The MySQL
development project has made its source code available under the terms of the GNU
General Public License, as well as under a variety of proprietary agreements.
MySQL was owned and sponsored by a single for-profit firm, the Swedish company
MySQL AB, now owned by Oracle Corporation. For proprietary use, several paid
editions are available, and offer additional functionality.

MySQL is a central component of the LAMP open-source web application

software stack (and other "AMP" stacks). LAMP is an acronym for "Linux, Apache,
MySQL, Perl / PHP / Python". MySQL is offered under two different editions: the
open source MySQL Community Server and the proprietary Enterprise Server.
MySQL Enterprise Server is differentiated by a series of proprietary extensions
which install as server plugins, but otherwise shares the version numbering system
and is built from the same code base.

4.1.8 Codeigniter Framework

CodeIgniter is a powerful PHP framework with a very small footprint, built for
developers who need a simple and elegant toolkit to create full-featured web
applications.CodeIgniter is loosely based on the popular model–view–controller
(MVC) development pattern. While controller classes are a necessary part of
development under CodeIgniter, models and views are optional. Codeigniter can be
also modified to use Hierarchical Model View Controller (HMVC) which allows
developers to maintain modular grouping of Controller, Models and View arranged
in a sub-directory format.

 Model: - The Model represents your data structures. Typically, your model
classes will contain functions that help you retrieve, insert and update
information in your database.
 View: - The View is information that is being presented to a user. A View
will normally be a web page, but in CodeIgniter, a view can also be a page

COETA/CSE/17-18 20
 CODE-IT

fragment like a header or footer. It can also be an RSS page, or any other
type of “page”.
 Controller: - The Controller serves as an intermediary between the Model,
the View, and any other resources needed to process the HTTP request and
generate a web page.

CodeIgniter is most often noted for its speed when compared to other PHP
frameworks. CodeIgniter is faster, lighter and the least like a framework.

4.1.9 Wamp Server

WampServer refers to a software stack for the Microsoft Windows operating system,
created by Romain Bourdon and consisting of the Apache web server, OpenSSL for
SSL support, MySQL database and PHP programming language.

Wamp Stands for "Windows, Apache, MySQL, and PHP." WAMP is a

variation of LAMP for Windows systems and is often installed as a software bundle
(Apache, MySQL, and PHP). It is often used for web development and internal
testing, but may also be used to serve live websites.

The most important part of the WAMP package is Apache (or "Apache
HTTP Server") which is used run the web server within Windows. By running a
local Apache web server on a Windows machine, a web developer can test
webpages in a web browser without publishing them live on the Internet.

WAMP also includes MySQL and PHP, which are two of the most common
technologies used for creating dynamic websites. MySQL is a high-speed database,
while PHP is a scripting language that can be used to access data from the database.
By installing these two components locally, a developer can build and test a
dynamic website before publishing it to a public web server.

While Apache, MySQL, and PHP are open source components that can be
installed individually, they are usually installed together. One popular package is
called "WampServer," which provides a user-friendly way to install and configure
the "AMP" components on Windows.

COETA/CSE/17-18 21
 CODE-IT

NOTE: The "P" in WAMP can also stand for either Perl or Python, which are
other scripting languages. The Mac version of LAMP is known as MAMP.

4.2 Compiler & Interpreter

4.2.1 GNU GCC

The GNU Compiler Collection (GCC) is a compiler system produced by the GNU
Project supporting various programming languages. GCC is a key component of the
GNU toolchain and the standard compiler for most Unix-like operating systems. The
Free Software Foundation (FSF) distributes GCC under the GNU General Public
License (GNU GPL). GCC has played an important role in the growth of free
software, as both a tool and an example.

Originally named the GNU C Compiler, when it only handled the C

programming language, GCC 1.0 was released in 1987. It was extended to compile
C++ in December of that year.

As well as being the official compiler of the GNU operating system, GCC
has been adopted as the standard compiler by many other modern Unix-like
computer operating systems, including Linux and the BSD family, although
FreeBSD and macOS have moved to the LLVM system. Versions are also available
for Microsoft Windows and other operating systems; GCC can compile code for
Android and iOS.

 CodeBlocks:- CodeBlock is a free, open-source cross-platform IDE that

supports multiple compilers including GCC, Clang and Visual C++. It is
developed in C++ using wxWidgets as the GUI toolkit. Using plugin
architecture, its capabilities and features are defined by the provided plugins.
Currently, Code::Blocks is oriented towards C, C++, and FORTRAN. It has
a custom build system and optional Make support.
Code::Blocks is being developed for Windows, Linux, and macOS and has
been ported to FreeBSD, OpenBSD and Solaris.

COETA/CSE/17-18 22
 CODE-IT

4.2.2 Java Development Kit (JDK)

The Java Development Kit (JDK) is an implementation of either one of the Java
Platform, Standard Edition, Java Platform, Enterprise Edition, or Java Platform,
Micro Edition platforms released by Oracle Corporation in the form of a binary
product aimed at Java developers on Solaris, Linux, macOS or Windows. The JDK
includes a private java virtual machine (JVM) and a few other resources to finish the
development of a Java Application. Since the introduction of the Java platform, it
has been by far the most widely used Software Development Kit (SDK). On 17
November 2006, Sun announced that they would release it under the GNU General
Public License (GPL), thus making it free software. This happened in large part on 8
May 2007, when Sun contributed the source code to the OpenJDK.

4.2.3 Ace Editor

Ace (from Ajax.org Cloud9 Editor) is a standalone code editor written in JavaScript.
The goal is to create a web-based code editor that matches and extends the features,
usability, and performance of existing native editors such as TextMate, Vim, or
Eclipse. It can be easily embedded in any web page and JavaScript application. Ace
is developed as the primary editor for Cloud9 IDE and as the successor of the
Mozilla Skywriter project.

Some of the features of Ace editor are as follows:-

 Syntax highlighting.
 Auto indentation and outdent.
 An optional command line.
 Work with large documents (handles hundreds of thousands of lines without
issue).
 Themes (TextMate themes can be imported).
 Search and replace with regular expressions.
 Highlight matching parentheses.
 Toggle between soft tabs and real tabs.
 Displays hidden characters.
 Highlight selected word.
 Multiple cursor selection.

COETA/CSE/17-18 23
 CODE-IT

4.3. System Execution Details

4.3.1 Home :-

Figure 4.3.1: Homepage

Homepage is titled with CODE-IT along with some navigation for the user at the
right side of the header. In the footer there is short description about project and
various links to move on.

COETA/CSE/17-18 24
 CODE-IT

4.3.2. Teacher Login

Figure 4.3.2: Teacher Login

4.3.3 Teacher Profile

Figure 4.3.3: Teacher Profile

COETA/CSE/17-18 25
 CODE-IT

4.3.4. Teacher Profile Edit

Figure 4.3.4: Teacher Profile Edit

Teacher can update their profile by clicking on the Edit profile button in the
navigation part. They are able to update their name, email, and password and can
select the year (1st to 4th) in which they are assign for practical. This is really helpful
for teacher who are assign more than one practical subjects they need not to make
separate id, they can make their profile update and can check the practical of the
respective classes.

COETA/CSE/17-18 26
 CODE-IT

4.3.5. Teacher Dashboard

Figure 4.3.5: Teacher Dashboard

After successful login of the teacher with their valid login credential, teacher
interface is displayed with the dashboard having three sections:

1. Practical: - In this section teacher can check the existing practical and can
enter the new practical with their aim with some description.

2. Codes Submitted: - This section allow teacher to check the code submitted
by the individual student while performing the practical.

3. Students: - In this section teacher is allowed to check the information of the

registered student.

All these section have been displayed further with some more figure and their
workings.

COETA/CSE/17-18 27
 CODE-IT

4.3.6 Existing Practicals

Figure 4.3.6: Existing Practical list

After clicking the practical section as mentioned in Figure 4.3.5 teacher can see the
list of existing practical and can directly search for the required practical details and
number of submissions on that practical.

COETA/CSE/17-18 28
 CODE-IT

4.3.7 Add New Practical

Figure 4.3.7: Add new practical

With this dynamic interface for adding new practical in the list teacher can easily
update the practical list with practical name, subject, semester, programming
language will be used to perform the practical along with some additional
description.

COETA/CSE/17-18 29
 CODE-IT

4.3.8 Practical submitted by student

Figure 4.3.8: List of practical submitted by students.

As in Figure 4.3.5 the second most interesting part is the code submitted section.
The above figure shows the code submitted by various students along with the date
of submission and some more information about the practical. The view code button
allow teacher to check the program code submitted by student. This interface is also
provided with search bar by that teacher can search according to their convenience.

COETA/CSE/17-18 30
 CODE-IT

4.3.9 Student Registered

Figure 4.3.9: List of registered student.

As in Figure 4.3.5 the third section was of student. The above figure shows the list
of registered student on the college practical system. Teacher can sort student list
according to the year for which they are allotted.

COETA/CSE/17-18 31
 CODE-IT

4.3.10 Student Login

Figure 4.3.10: Student Login.

4.3.11 New Student Registration

Figure 4.3.11: New Student Registration.

COETA/CSE/17-18 32
 CODE-IT

4.3.12 Student Profile

Figure 4.3.12: Student Profile.

4.3.13 Practical List for student

Figure 4.3.13: List of practical for student.

COETA/CSE/17-18 33
 CODE-IT

After successful login of the student, student can view the practical assign for their
class and can perform the practical.

4.3.14 Student Profile Edit

Figure 4.3.14: Student Profile Edit

Student can update their profile by clicking on the Edit profile button in the
navigation part. They are able to update their name, email, and password and can
select their current academic year (1st to 4th) .This is really helpful for student in the
sense they don’t have to register in every year again and again with their ID they can
easily update for their current academic year.

COETA/CSE/17-18 34
 CODE-IT

4.3.15 Compiler Page

Figure 4.3.15: Compiler Page.

The header part shows the practical name, subject name and additional information
about practical added by teacher. An attractive view for the compiler page includes
two try-it editors one for the program code and other for giving input required in the
program. The text and syntax highlighting property of the try-it editor according to
the language (C/C++/Java) is really eye-catching.

COETA/CSE/17-18 35
 CODE-IT

While clicking on the run the program code written is executed and result is
displayed on the screen. While clicking on the submit code button the program code
written in the text editor will get submitted.

4.3.16 Output block

Figure 4.3.16: Program output.

After clicking on the Run button the compiler execute the program code and the
output is displayed as in above figure which contains the program output and the
total time that is required for the process. The same can be displayed if there is some
error in the program code describing that error detail such as expected syntax or
declaration and the line where the error exists.

COETA/CSE/17-18 36
 CODE-IT

CHAPTER 5

Application, Advantages & Limitations

5.1 Applications

There are lots of applications of this new college practical system:

 Mainly useful for any college for performing the practical in the
programming languages as C, C++, JAVA.
 Ready to implement in any college easily.
 All the students can perform practical efficiently.
 Teacher can make easy analysis of every student performed practical.
 Available to every system connected to the server.

5.2 Advantages

Some of the advantages are as follows:

 Access from any computer connected to the server.
 Minimal configuration needed (or only needed once).
 Centralized workspace.
 Easily included in a virtual development environment.
 No need to install a lot of software locally.
 Allows for development from inexpensive machines, such as Chromebooks,
since the testing and development occurs on a separate machine (server).
 Can be used as a desktop IDE when setup with a Web server on the local
machine.

5.3 Limitations

Some of the limitations of this system are:

 If not self hosted, possible outside security issues.
 Possible server downtime.
 Maintenance if self hosted
 Most do not support smart phones or tablets well.

COETA/CSE/17-18 37
 CODE-IT

CHAPTER 6

Conclusion and Future Work

6.1. Conclusion

In today’s world we require everything online so this all systems provide the best
solution to these problems.

CODE-IT provides a key solution for online compilation and execution of

college practicals in of C, C++ and Java programming languages for college
students. CODE-IT enables students to compile and execute their programs without
having to configuring their machine for C,C++ and Java program compilation. This
also allows students to perform their practicals online, anytime.

The features provided in this system allow the student to login, perform the
required practical and submit the code. And CODE-IT makes it much easier for the
students to perform the practical and for the teachers to check the progress of their
students

It also generates detailed statistics of student’s compilations that can help

teachers to improve their teaching methodologies. Teachers can also reject student’s
code if they find the logic incorrect or improper output.

6.2.Future Work

There is always space for improvement in every project. This project can be further
developed and additional features can be added like debugging the code, providing
practice problems related to c, cpp and java programming. Initially this website
includes three programming languages i.e. C, C++ and JAVA. We can improve this
system by adding some more programming languages in future. We are also
planning to develop this system into a mobile application for android and ios
devices. So that it can reach to a much larger audience.

COETA/CSE/17-18 38
 CODE-IT

CHAPTER 7

References

[1] F.A. Deeb and T. Hickey, The Spinoza code tutor: faculty poster abstract,
Journal of Computing Sciences in Colleges, 30(6):154–155, 2015

[2] S.H. Edwards, Work-in-Progress: Program Grading and Feedback Generation

with Web-CAT, Proceedings of the first ACM conference on Learning @ scale
conference, 215–216

[3] S.H. Edwards and M.A. Perez-Quinones, Web-CAT: Automatically Grading

Programming, Assignments , Proceedings of the 13th annual conference on
Innovation and technology in computer science education, 328–328

[4] M. Goldman, G. Little and R.C. Miller, Collabode: collaborative coding in the
browser, Proceedings of the 4th International Workshop on Cooperative and Human
Aspects of Software Engineering, 65–68

[5] M.J. Hull, D. Powell and E. Klein, Infandango: automated grading for student
programming, Proceedings of the 16th annual joint conference on Innovation and
technology in computer science education, 330–330

[6] D. Pritchard, Websheets: A Templated Online Coding Exercise System,

Proceedings of the 2015 ACM Conference on Innovation and Technology in
Computer Science Education, 335–335

[7] W. Toll, Top 48 Integrated Developer Environments (IDEs) & Code Editors,
https://blog.profitbricks.com/top-integrated-developerenvironments-ides/

[8] Wikipedia, Comparison of integrated development environments,

https://en.wikipedia.org/wiki/Comparison_of_integrated_development_environment

[9] Berners-Lee, Tim, Connolly, Daniel: HyperText Markup Language Specification

– 2.0 INTERNET DRAFT. IETF. Retrieved 24 October 2010.

[10] Ace Text Editor, https://ace.c9.io/#nav=about

COETA/CSE/17-18 39
 CODE-IT

[11] Berners-Lee, Tim; Fischetti, Mark (2000). Weaving the Web: The Original
Design and Ultimate Destiny of the World Wide Web by Its Inventor. San
Francisco: Harper. ISBN 978-0-06-251587-2.

[12] Holzschlag, Molly E (2005). Spring into HTML and CSS. Pearson Education,
Inc. ISBN 0-13-185586-7.

[13] Burns, Joe; Growney, Andree S. (2001). JavaScript Goodies. Pearson

Education. ISBN 0-7897-2612-2.

[14] Powell, Thomas A.; Schneider, Fritz (2001). JavaScript: The Complete
Reference. McGraw-Hill Companies. ISBN 0-07-219127-9.

[15] Wikipedia, PHP: Hypertext Preprocessor, https://en.wikipedia.org/wiki/PHP.

[16] Susan Perschke (23 April 2012). "WampServer delivers a smart, Windows-
friendly platform for Apache, MySQL and PHP-based apps". Network World.
Retrieved 20 January 2015.

[17] "MySQL | the World's Most Popular Open-Source Database".

[19] "Which Should I Use: MySQL Enterprise or MySQL Community

Server?"MySQL AB. Retrieved 8 April 2009.

COETA/CSE/17-18 40