CODE X –REAL TIME CODE EDITOR

A PROJECT REPORT
Submitted by

MOULIESHWARAN D (22500251)

GURUDEV M (22500237)

AMALA PRAVIN SHAJU S (22590151)

DHARSHINI S (22500228)

In partial fulfilment for the award

Of
DIPLOMA
IN
COMPUTER ENGINEERING

GOVERNMENT POLYTECHNIC COLLEGE

COIMBATORE–641 014

DIRECTORATE OF TECHNICAL EDUCATION

CHENNAI–600025
APRIL-2024
 BONAFIDE CERTIFICATE

Certified that this project report title “CODE X- REAL TIME CODE
EDITOR” is the bonafied work of MOULIESHWARN D (22500251),
GURUDEV M (22500237), AMALA PRAVIN SHAJU S (22590151),
DHARSHINI S (22500228) who carried out the work under my supervision.
Certified further that to the best of my knowledge the work reported herein does
not from part of any other project report.

SIGNATURE SIGNATURE
Mrs.G.Deepika , M.E., Mrs. D. JAMUNARANI , M.E.,
Project Supervisor Head of The Department
Department of Computer Engineering Department of Computer Engineering
Government Polytechnic College, Government Polytechnic College,
Coimbatore 641 014.
Coimbatore 641 014.
 CODE X- REAL TIME CODE EDITOR
A PROJECT REPORT

Submitted by

MOULIESHWARAN D (22500251)

GURUDEV M (22500237)

AMALA PRAVIN SHAJU S (22590151)

DHARSHINI S (22500228)

The viva-voice examination of this project work has been done as a part of

curriculum in the Diploma Course in COMPUTER ENGINEERING

department is held on…………………

 ACKNOWLEDGEMENT

We are extremely thankful to Principal P.THENMOZHI M.E.,MBA,

Government Polytechnic College , Coimbatore for giving us the opportunity to
execute this project. Our special thanks to Mrs. D.JAMUNARANI,M.E., Head of
the Computer Engineering Department, for all the facilities provided to
successfully complete this work.

We would like to express our deepest sense of respect and indebtedness to

my project supervisor, Mrs. G.DEEPIKA,M.E., Lecturer, Department of
Computer Engineering, for her consistent support, guidance, encouragement, and
precious pieces of advice in times during the project. I am also very thankful to all
the faculty members of the department for their constant encouragement,
invaluable advice, encouragement, inspiration, and blessings during the project.

I also express my gratitude to the respondents, Parents, and dear friends

without whom the project would not have been successful. Above all, I wish to
thank the almighty for giving courage and wisdom to take up this project and
complete it successfully.

i
 ABSTRACT

The world of Internet is growing rapidly, many applications that created on

the desktop started moving towards web. Many applications could be accessed
anytime and anywhere easily using Internet. Developers need a tool to create their
applications, and one of them named Code Editor.

A Code Editor is one of the tools that developers and programmers require
for developing these kinds of applications. The purpose of this code editor is to
design and develop a Real-time code editing web application to help users
implement code can directly complied and executed without the help of the
system-installed complier. This application provides a feature where users can
upload their own file from their system were no other online code editing
application has given this feature. Code X is a web application that provides
workspace to upload user’s own file, write, perform, display the result of the code
through terminal in real-time.

ii
 TABLE OF CONTENTS

CHAPTER NO TITLE PAGE NO

ACKNOWLEDGEMENT i

ABSTRACT ii

LIST OF FIGURES v

1 INTRODUCTION 1

EXISTING SYSTEM 3

2 2.1 Disadvantages Of Existing System 4

2.2 Literature Survey 5

3 PROBLEM STATEMENT 7

4 PROPOSED SYSTEM 9

4.1 System Architecture 11

4.2 System Description 14

5 SYSTEM SPECIFICATION 15

5.1 Hardware Specification 16

5.2 Software Specification 16

6 MODULE DESCRIPTION 17

6.1 Login 18

6.2 interface 18

6.3 code area/ upload button 19

6.4 compiler 19

6.5 output/error reporting 20

6.6 logout 20

iii
7 SYSTEM IMPLEMENTATION 21

7.1 php 22

7.2HTML 23

7.3 CSS 24

7.4JavaScript 25

7.5 xampp 27

8 SYSTEM TESTING 28

8.1 Unit Testing 29

8.2 Integration Testing 31

8.3 Validation Testing 31

8.4 System Testing 31

9 CONCLUSION 33

10 REFERENCES 35

11 APPENDICES 37

11.1 Sample code 38

11.2 Screenshot 44

iv
 LIST OF FIGURES

FIG.NO. TITLE PAGE.NO

11.2.1 Code-X Interface 44

11.2.2 Login Page 44

11.2.3 Code Editor 45

11.2.4 Upload Page 45

11.2.5 Uploaded Page 46

v
INTRODUCTION

1
 CHAPTER-1
INTRODUCTION
Online code editors have revolutionized the way users can write, test,
and collaborate on the code. They offer a flexible and accessible way to create and
experiment with code, directly in your web browser, without having to install any
software.

A code editor is a fundamental tool in the field of software

development that plays a crucial role in converting human-readable source code
into machine-readable executable code. It is an essential component of the
software development process, enabling programmers to write code in high-level
programming languages and then transform it into a format that computers can
understand and execute.

The primary purpose of a code editor is to translate source code

written in languages such as C, C++, Java, Python, and others into machine code or
byte code. This process involves several stages, including lexical analysis, syntax
analysis, semantic analysis, optimization, and code generation.

These editors typically provide features like syntax highlighting,

auto-completion, version control integration, and collaboration capabilities,
enabling programmers to write and debug code more efficiently. Online code
editors are convenient for quick coding tasks, collaborative coding sessions, and
accessing code from multiple devices. Popular examples include CodePen,
JSFiddle, and StackBlitz.

2
EXISTING SYSTEM

3
 CHAPTER-2

EXISTING SYSTEM
Online code editors have revolutionized the way developers create,
collaborate on, and deploy software solutions. These web-based platforms offer a
comprehensive suite of tools tailored to various programming languages and
frameworks, empowering developers to write and test code directly in the browser.
With features like syntax highlighting, auto-completion, and live previews, online
code editors streamline the development process and foster productivity. Whether
for front-end web development, back-end scripting, or full-stack application
building, these platforms provide a flexible and accessible environment for coding
projects of all sizes. In this overview, will deliver into some of the prominent
features and examples of existing online code editors, showcasing their capabilities
and benefits to developers worldwide.

2.1. DISADVANTAGES OF EXISTING SYSTEM

Distractions: Working in a web browser environment can be more prone to

distractions compared to a dedicated coding environment. Notifications, other tabs,
and online temptations can easily pull your attention away from your work.

Cost: Many online editors offer free basic plans, but advanced features and
increased storage often require paid subscriptions. This can add up over time,
especially for professional use.

4
Learning curve: While some online editors are user-friendly, others have a
steeper learning curve, especially for those unfamiliar with web-based interfaces.
This can be an obstacle for beginners and slow down your workflow.

Local file importing: Local file importing in online code editors poses a drawback
of online code editor. It introduces compatibility challenges and complicates
workflows, potentially undermining the efficiency of project management.

2.2. LITERATURE SURVEY

[1] Collaboration is at the heart of software development, and it involves

interactions among developers. Previous literature defines collaboration as any
form of interaction between distributed software developers or teams (Cook, 2011;
David and Borges, 2004). To achieve a common objective, software development
requires collaboration among developers within and occasionally outside their
project teams. Previous research studies have shown that almost 70% of software
development time is spent on collaborative activities (Sarma, 2005).

[2] The ability to code directly in a browser without requiring local installations has
made web-based software development environments more and more popular.
Among the well-known platforms in this field, Visual Studio Code Online (VS
Code Online) is notable for offering a feature-rich coding environment that
includes debugging and syntax highlighting. GitHub Code spaces make it easier to
collaborate with version control in cloud-hosted development environments. Pre-
configured workspaces for a variety of projects are available through Gitpod, while
web development frameworks like React and Vue.js are supported by Code
Sandbox and Stack Blitz.

5
[3] There may not be a single authoritative source that is only focused on this
subject, but there are a number of publications and resources that provide insightful
information. Mistrik et al.'s book "Collaborative Software Engineering: Integrating
Theory and Practice" examines a number of topics related to collaborative software
development, such as team roles and cooperation strategies. Furthermore,
publications on agile methodologies—which frequently entail role-based
collaboration—such as Cohn's "Agile estimating and Planning" and Shore and
Warden's "The Art of Agile Development" delves into this subject. Gothelf and
Seiden's book "Lean UX: Designing Great Products with Agile Teams" explores
the relationship between UX design and agile approaches, placing a strong
emphasis on cross-functional cooperation. Online classes and scholarly research
publications offer many perspectives, yet

6
PROBLEM STATEMENT

7
 CHAPTER-3
PROBLEM STATEMENT
Current online code editors often struggle with importing files, creating
a frustrating and inefficient experience for developers. Limited format support,
complex processes, and lack of information about import errors hinder productivity
and collaboration. This project seeks to address these issues by creating an online
code editor with broader file type compatibility, streamlined importing,
informative error handling, and complete functionality for imported files. This will
empower developers to work more efficiently, collaborate seamlessly, and
ultimately, unlock their full coding potential.

8
PROPOSED SYSTEM

9
 CHAPTER-4
PROPOSED SYSTEM
Introducing a hybrid code editor system that combines the flexibility of
uploading files from a local system. By seamlessly integrating local file upload
functionality with advanced error-checking features, this proposed system
empowers developers to work efficiently and confidently.

ADVANTAGES

1. Local File Upload: Users can easily upload files from their PC directly into
the code editor environment. This feature ensures seamless integration with
existing workflows and enables developers to work on projects regardless of
internet availability.

10
 4.1 SYSTEM ARCHITECTURE

USER INTERNET USER INTERFACE CODEAREA

LOGIN

UPLOAD
DISPLAY THE
FILE
OUTPUT COMPILER

RUN

11
USER

FRONTEND (HTML) BACKEND (PHP)

Visit codex

Return HTML UI

Navigate to login

Display login form

Enter credentials
Send login request

Validate credentials

Authentication result

Upload file
Send upload request

Handle file upload

Edit and compile file

Return compiled result

Display compiled result

12
 Visit codeX

Render HTML UI

Clicks upload button

Send upload request

Validate user
authentication

Handle file upload

Edit code

Compile code

Handle errors

Display compiled result

13
4.2 SYSTEM DESCRIPTION

This online code editor tackles the shortcomings of existing platforms by

offering a robust file import system. Users can upload diverse file types through
file selection. Smart format detection and parsing, tailored to specific programming
languages, extract the code content. Informative error messages guide users
through any issues during processing. The extracted code is then seamlessly
integrated into the editor, granting it full functionality like syntax highlighting and
debugging, just like native files. Additional features like version control and
collaboration tools further enhance the development experience. This system
promises increased productivity, a smoother workflow, and improved collaboration
for developers of all levels

14
SYSTEM SPECIFICATION

15
 CHAPTER-5
SYSTEM SPECIFICATION
5.1 HARDWARE SPECIFICATION

PROCESSOR : INTEL(R) CORE(TM)

HARDDISK CAPACITY : 500 GB

MONITOR : ACER

INTERNAL MEMORY CA : 4 GB

CPU CLOCK : 3.00 GHz

5.2 SOFTWARE SPECIFICATION

OPERATING SYSTEM : WINDOWS 10

LANGUAGE : HTML, CSS, JS

BACKEND : PHP

TOOLS USED : XAMPP

16
MODULE DESCRIPTION

17
 CHAPTER-6

MODULES DESCRIPTION

The system comprises of 6 modules as follows:

1. Login
2. Interface
3. Code Area / Upload Button
4. Compiler
5. Output/Error Reporting
6. Logout

6.1. LOGIN
` Online code editors share common features like syntax highlighting for
code clarity and auto-completion for faster writing. Integration with Git simplifies
version control, while collaborative editing fosters teamwork. Live previews aid
iterative development, and debugging tools efficiently address coding issues. File
and project management features ensure organization, with the ability to
import/export files. Extensions and plugins allow customization for specific
languages or frameworks. Overall, these features make online code editors
versatile and efficient tools for various programming needs.

6.2. INTERFACE - MODULE

The interface module serves as the user's gateway to an intuitive and
interactive experience within our platform. This module is meticulously designed
to provide a visually appealing and user-friendly environment, fostering seamless
navigation and effortless interaction. With a clean and responsive design, easily

18
access various features, tools, and functionalities. The interface module also
incorporates intuitive controls, ensuring that users can efficiently manage their
tasks and customize their workspace according to their preferences.

6.3. CODE AREA / UPLOAD BUTTON - MODULE

The code area/upload button module serves as a dynamic space for
users to input, edit, and upload code seamlessly. Users can either type or paste their
code directly into the designated area, providing an intuitive environment for
coding tasks. The module is equipped with syntax highlighting and auto-
indentation features to enhance code readability. Additionally, the upload button
facilitates the quick and convenient submission of code files, supporting various
programming languages and file formats. This versatile module is designed to
streamline the coding experience, allowing users to interact with their code
effortlessly and efficiently within the platform.

6.4. COMPILER - MODULE

The compiler module is a pivotal component within our platform,

empowering users to transform their source code into executable programs
seamlessly. Integrated directly into the development environment, this module
supports a multitude of programming languages, enabling users to compile and run
their code with ease. The compiler module provides real-time feedback on syntax
errors and compilation issues, aiding developers in identifying and resolving issues
promptly. With support for customizable compiler options, users can fine-tune
their compilation process to meet specific project requirements. This module plays
a crucial role in facilitating a smooth development workflow, allowing users to test

19
and debug their code efficiently within the platform before deploying their
applications.

6.5. OUTPUT/ERROR REPORTING - MODULE

The Output/Error Reporting module is a critical component of our
platform, providing users with real-time insights into the performance of their
code. This module serves as a dynamic display, presenting the output of executed
code alongside any error messages or debugging information. Through clear and
organized presentation, developers can quickly identify and address issues,
enhancing the efficiency of the debugging process. With syntax-highlighted error
messages and detailed stack traces, the Output/Error Reporting module ensures a
comprehensive understanding of code behaviour, aiding developers in
troubleshooting and refining their scripts. This module is designed to empower
users with the information needed to iteratively improve their code, fostering a
more streamlined and effective development workflow within our platform.

6.6. LOGOUT - MODULE

The logout module offers users a secure and efficient way to

conclude their session within the platform. By clicking the "Logout" button, users
initiate a process that ensures the termination of their authenticated session,
effectively logging them out of their account. This action is fundamental for
maintaining the security and privacy of user accounts, preventing unauthorized
access in shared environments or on public devices. As an additional security
measure, the logout module may prompt users to confirm their intention to log out,
mitigating the risk of accidental sign-outs. By implementing this module, we
prioritize the protection of user information and uphold the principles of secure and
responsible access management within our platform

20
SYSTEM IMPLEMENTATION

21
 CHAPTER-7
SYSTEM IMPLEMENTATION
7.1 PHP

PHP, a free and open-source scripting language, has become a cornerstone

of web development. Originally an acronym for "Personal Home Page," it now
humorously stands for "PHP: Hypertext Preprocessor." Unlike static HTML pages,
PHP code executes on the server before reaching users' browsers, enabling
powerful functionalities.

One key advantage of PHP is its dynamic nature. It can interact with
databases, allowing websites to pull information, manage user accounts, and
display personalized content based on user preferences. This dynamic capability
empowers features like shopping carts, user forums, and content management
systems (CMS).

Furthermore, PHP boasts a relatively easy-to-learn syntax, making it

approachable for beginners. With its vast online community, extensive
documentation, and numerous tutorials, developers can readily find support and
guidance.

PHP offers a diverse set of features tailored to web development needs. It

can handle user input from forms, manage user sessions (maintaining login
information across pages), and work with files (uploading and downloading).
Additionally, it can be used to create APIs (application programming interfaces) to
connect different applications and exchange data.

22
Despite its strengths, it's important to note that while PHP excels in web
development its security needs careful consideration. Developers must be mindful
of best practices to mitigate potential vulnerabilities.

Overall, PHP's open-source nature, dynamic capabilities, ease of use, and

rich set of features make it a powerful and versatile tool for web developers of all
skill levels. From building simple websites to complex web applications, PHP
remains a dominant force in the ever-evolving world of web development.

7.2 HTML (HYPET TEXT MARKUP LANGUAGE)

HTML is an application of the Standard Generalized Markup Language

(SGML), which was approved as an international standard in the year 1986. SGML
provides a way to encode hyper documents so they can be interchanged.

SGML is also a Meta language for formally describing document markup

system. Infact HTML uses SGML to define a language that describes a WWW
hyper document’s structure and inter connectivity.

Following the rigors of SGML, TBL bore HTML to the world in 1990.
Since then, many of us have it to be easy to use but sometimes quite limiting.
These limiting factors are being addressed but the World Wide Web Consortium
(aka W3c) at MIT. But HTML had to start somewhere, and its success argues that
it didn’t start out too badly.

Hypertext Markup Language (HTML) is the standard markup language for

documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such as
JavaScript. HTML is a computer language devised to allow website creation.
These websites can then be viewed by anyone else connected to the Internet. It is

23
relatively easy to learn, with the basics being accessible to most people in one
sitting; and quite powerful in what it allows you to create. It is constantly
undergoing revision and evolution to meet the demands and requirements of the
growing Internet audience under the direction of the W3C, the organisation
charged with designing and maintaining the language.

Hypertext is the method by which you move around on the web — by

clicking on special text called hyperlinks which bring you to the next page. The
fact that it is hyper just means it is not linear - i.e. you can go to any place on the
Internet whenever you want by clicking on links — there is no set order to do
things in. Markup is what HTML tags do to the text inside them. They mark it as a
certain type of text (italicised text, for example). HTML is a Language, as it has
code-words and syntax like any other language.

HTML consists of a series of short codes typed into a text-file by the site
author — these are the tags. The text is then saved as a html file, and viewed
through a browser, like Internet Explorer or Netscape Navigator. This browser
reads the file and translates the text into a visible form, hopefully rendering the
page as the author had intended. Writing your own HTML entails using tags
correctly to create your vision. You can use anything from a rudimentary text-
editor to a powerful graphical editor to create HTML pages.

7.3 CSS (CASCADDING STYLE SHEETS)

Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation of a document written in a markup language like HTML. CSS is a
cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including
layout, colours, and fonts. This separation can improve content accessibility,

24
provide more flexibility and control in the specification of presentation
characteristics, enable multiple web 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 also makes it feasible to present the

same markup page in different styles for different rendering methods, such as on-
screen, in print, by voice (via speech-based browser or screen reader), and on
Braille-based tactile devices. CSS also has rules for alternate formatting if the
content is accessed on a mobile device. The name cascading comes from the
specified priority scheme to determine which style rule applies if more than one
rule matches a particular element. This cascading priority scheme is predictable.

The CSS specifications are maintained by the World Wide Web

Consortium (W3C). Internet media type (MIME type) text/css is registered for use
with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation
service for CSS documents. In addition to HTML, other markup languages support
the use of CSS including XHTML, plain XML, SVG, and XUL.

CSS has a simple syntax and uses a number of English keywords to

specify the names of various style properties. A style sheet consists of a list of
rules. Each rule or rule-set consists of one or more selectors, and a declaration
block.

7.4 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

25
capabilities. JavaScript was first known as LiveScript, but Netscape changed its
name to JavaScript, possibly because of the excitement being generated by Java.
JavaScript made its first appearance in Netscape 2.0 in 1995 with the name
LiveScript. The general-purpose core of the language has been embedded in
Netscape, Internet Explorer, and other web browsers.

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. 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.

JavaScript can be implemented using JavaScript statements that are

placed within the <script>... </script> HTML tags in a web page.

You can place the <script> tags, containing your JavaScript, anywhere within
your web page, but it is normally recommended that you should keep it within the
<head> tags.

26
7.5 XAMPP

XAMPP is a free and open-source software solution that bundles

essential components for local web development. It stands for X (Cross-Platform),
A (Apache), M (MySQL), P (PHP), and P (Perl). This package combines the
Apache HTTP Server, MariaDB database (formerly MySQL), and interpreters for
scripting languages like PHP and Perl, creating a complete environment for
building and testing websites on your own computer.

XAMPP's popularity stems from its user-friendliness and broad

functionality. It's easy to install and use, making it ideal for beginners learning web
development. Developers can create and test their websites locally before
deploying them online. Additionally, XAMPP supports multiple platforms like
Windows, macOS, and Linux, offering flexibility and accessibility for various
users.

However, it's important to note that XAMPP is primarily designed for

development purposes and often has security features disabled by default.
Therefore, it's not recommended for directly deploying websites on the internet due
to potential security risks.

27
SYSTEM TESTING

28
 CHAPTER-8
SYSTEM TESTING
It is the process of exercising software with the intent of finding and
ultimately correcting errors. This fundamental philosophy does not change for web
applications, because web based system and applications reside on network and
inter-operate with many different operating systems, browsers, hardware platforms
and communication protocols .Thus searching for errors is a significant challenge
for web applications.

8.1 UNIT TESTING

Here each program is tested individually so any error apply unit is

debugged. The sample data are given for the unit testing. The unit test results are
recorded for further references. During unit testing the functions of the program
unit validation and the limitations are tested.

Unit testing is testing changes made in an existing or new program this

test is carried out during the programming and each module is found to be working
satisfactorily. For example in the registration form after entering all the fields we
click the submit button. When submit button is clicked, all the data in form are
validated. Only after validation entries will be added to the database.

Unit testing comprises the set of tests performed by an individual prior

to integration of the unit into large system. The situation is illustrated in as follows

Coding-> Debugging ->Unit testing -> Integration testing

29
 The four categories of test that a programmer will typically perform on a
program unit

1. Functional test
2. Performance test
3. Stress Test
4. Structure test

Functional test involves exercising the code with nominal input values
for which the expected results are known as well as boundary values and special
values.

Performance testing determines the amount of execution time spent in

various parts of unit program through put and response time and device utilization
by the program.

A variation of stress testing called sensitivity testing in same situations a

very small range of data contained in a bound of valid data may cause extreme and
even erroneous processing or profound performance degradation.

Structured testing is concerned with a exercising the internal logic of a

program and traversing paths. Functional testing, stress testing performance testing
is referred as “black box” testing and structure testing is referred as “white box”
testing.

30
8.2 INTEGRATION TESTING

Integrated testing is a systematic technique for constructing tests to

uncover errors associated with interface.

Objective is to take unit tested modules and build a program structure

that has been dictated by design.

8.3 VALIDATION TESTING

Software validation is achieved through a series of test that

demonstrates the conformity and requirements. Thus the proposed system under
consideration has to be tested by validation and found to be working satisfactorily.
For example in customer enters phone number field should contain number
otherwise it produces an error message similarly in all the forms the fields are
validated.

Software validation is achieved through a serious of testes that

demonstrate conformity with requirements. Thus the proposed system under
consideration has been tested by validation & found to be working satisfactory.

8.4 SYSTEM TESTING

In the system testing the whole system is tested for interface

between each module and program units are tested and recorded. This
testing is done with sample data. The securities, communication between
interfaces are tested.

System testing is actually a series of different tests, whose primary

purpose is to fully exercise the computer based system although each
test has a different purpose all work to verify that all system elements
properly integrated and perform allocate function.

31
 Asking the user about the format required by them tests the output
generated by the system under consideration. It can be done in two ways, one on
screen and other on printer format. The output format on the screen is found to be
correct as the format designed n system test.

32
CONCLUSION

33
 CHAPTER-9
CONCLUSION
This project tackles the challenge of limited file import in online code
editors. By offering a robust and user-friendly import system, it empowers
developers with several benefits. The streamlined process and full functionality for
imported files lead to increased productivity and a smoother user experience.
Additionally, the ability to easily import and manage various file types fosters
improved collaboration on diverse projects. This online code editor goes beyond
existing platforms, creating a more efficient, user-centric, and collaborative
development environment for programmers of all levels, ultimately empowering
them to unleash their full coding potential.

34
REFERENCES

35
 CHAPTER-10
REFERENCES
REFERENCE

[1] H. B. Salameh and C. Jeffery, “Collaborative and social development

environments: a literature review", International Journal Computer Applications
in Technology, Vol. 49, No. 2, (2014), pp. 89.
*2+ L. C. L. Kats, R. G. Vogelij, K. T. Kalleberg, and E. Visser, “Software development
environments on the web", in Proceedings of the ACM international symposium
on New ideas, new paradigms, and reflections on programming and software -
Onward! ’12, (2012), pp. 99.
*3+ M. Goldman, “Role-based interfaces for collaborative software development",
in Proceedings of the 24th Annual ACM Symposium Adjunct on User Interface
Software and Technology - UIST ’11 Adjunct, (2011), pp. 23.
[4] F. FröSler, "A Practice Theoretical Analysis of Real Time Collaboration
Technology: Skype and Sametime in Software Development Projects", Göttingen:
Cuvillier, (2008).
*5+ S. Klein, N. Vehring, and M. Kramer, “Introducing Real Time Communication:
Frames, Modes & Rules", in Proceedings 23nd Bled eConference eTrust:
Implications for the Individual, (2010), pp. 591–606.
[6] K. Riemer and F. FröSler, “Introducing Real-Time Collaboration Systems:
Development of a Conceptual Scheme and Research Directions", Communications
of the Association for Informations Systems (CAIS), Vol. 20, (2007), pp. 204–225.

36
APPENDICES

37
 CHAPTER-11
APPENDICES
11.1 SAMPLE CODE

Ide.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Code-X</title>

<link rel="stylesheet" href="css/style.css" />

<style>

/* Additional CSS styles for the Choose File form */

.upload-form {

margin-top: 20px; /* Adjust top margin as needed */

text-align: center; /* Align form content to the center */

.file-input {

display: none; /* Hide the default file input */

.upload-label {

padding: 10px 20px;

38
 font-size: 16px;

background-color: #007bff;

color: #fff;

border: none;

border-radius: 5px;

cursor: pointer;

transition: all 0.3s ease;

display: inline-block;

.upload-label:hover {

background-color: #0056b3;

</style>

</head>

<body>

<div class="header"> Code-X </div>

<div class="control-panel">

Select Language:

&nbsp; &nbsp;

<select id="languages" class="languages" onchange="changeLanguage()">

<option value="c"> C </option>

<option value="cpp"> C++ </option>

39
 <option value="php"> PHP </option>

<option value="python"> Python </option>

<option value="node"> Node JS </option>

</select>

</div>

<div class="editor" id="editor"></div>

<!-- Choose File form -->

<div class="upload-form" enctype="multipart/form-data">

<label for="fileToUpload" class="upload-label">Upload File</label>

<input type="file" id="fileToUpload" class="file-input" onchange="readFile()">

</div>

<div class="button-container">

<button class="btn" onclick="executeCode()"> Run </button>

</div>

<div class="output"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="js/lib/ace.js"></script>

<script src="js/lib/theme-monokai.js"></script>

40
 <script src="js/ide.js"></script>

<script>

function readFile() {

var file = document.getElementById('fileToUpload').files[0];

var reader = new FileReader();

reader.onload = function(event) {

var fileContent = event.target.result;

// Set the content of the editor to the content of the uploaded file

editor.setValue(fileContent);

};

reader.readAsText(file);

</script>

</body>

</html>

41
COMPILER.PHP

<?php

$language = strtolower($_POST['language']);

$code = $_POST['code'];

$random = substr(md5(mt_rand()), 0, 7);

$filePath = "temp/" . $random . "." . $language;

$programFile = fopen($filePath, "w");

fwrite($programFile, $code);

fclose($programFile);

if($language == "php") {

$output = shell_exec(" $filePath $filePath 2>&1");

echo $output;

if($language == "python") {

$output =
shell_exec("C:\Users\Admin\AppData\Local\Programs\Python\Python310\pythonw.exe
$filePath 2>&1");

echo $output;

if($language == "node") {

rename($filePath, $filePath.".js");

42
 $output = shell_exec("node $filePath.js 2>&1");

echo $output;

if($language == "c") {

$outputExe = $random . ".exe";

shell_exec("gcc $filePath -o $outputExe");

$output = shell_exec(__DIR__ . "//$outputExe");

echo $output;

if($language == "cpp") {

$outputExe = $random . ".exe";

shell_exec("g++ $filePath -o $outputExe");

$output = shell_exec(__DIR__ . "//$outputExe");

echo $output;

43
11.2 SCREESHORTS

Figure 11.2.1

Figure 11.2.2

44
Figure 11.2.3

Figure 11.2.4

45
Figure 11.2.5

46