Zenn
🙆

How to Embed an Online Compiler into a Website

2022/04/07に公開
tech
C
programming
compiler
tech

Software developers have to rely on various tools for writing code. In this piece of article, we are going to learn about how to embed an Online Compiler on your website with these quick and easy steps.

But before digging deep into the topic, let us first discuss some basic concepts.

What is a Compiler?

A compiler is a peculiar program that takes programs written in a particular programming language (regarded as a high-level programming language) as input and turns the statements in the program into machine code that a computer’s processor can interpret.

In simple words, we can say that a compiler is itself a program that takes another program written in some other programming language and converts the entire program into a language that the machine can understand easily.

The program written at a high level is regarded as source code and the program written in a low-level language (or Machine code) is regarded as object code.

Types of compilers:

Compilers can be broadly classified under two categories:

  • Offline compilers: An offline compiler is a compiler that we set up locally in our system. Some of the commonly used offline compilers are Sublime Text 3, Microsoft Visual Studio Code etc.
  • Online compilers: An online compiler is a compiler that we use remotely and generally on a web browser. All we require is to have an active internet connection. Examples of online compiler's: jdoodle, interviewbit,programiz,...

Benefits of using Online Compilers:

The main purpose of any tool is to increase productivity. Online compilers facilitate the development process and provide a flexible testing environment. Unlike offline compilers, we can set up an online compiler easily and efficiently and that saves us a lot of time. All we need is to have an active internet connection and a Web Browser.

Over the past few years, the development of online compilers has increased drastically. Now we can see modern online compilers offering rich features such as debugging environment, syntax highlighting.

Storage capacity is another reason that online compilers are preferred over offline compilers. Programmers had to rely on different IDEs for different tasks. IDEs generally come with a large number of files that in turn consumes a lot of memory space in the system. Now in this modern era of technology they can use online compilers within seconds and save the memory space on their systems for other tasks.

Steps to Embed an Online Compiler:

We will now demonstrate how we can embed InterviewBit’s Online Compiler in a website. We can easily embed this online compiler in our website and write and run any program by giving standard inputs. Moreover, it is also supported in third-party CMS like Medium and Web 2.0 sites.

Steps to be followed:

Step 1: Go to the link given: https://www.interviewbit.com/online-c-compiler/

This will take you to InterviewBit’s Online C compiler website. Now you need to sign up if you haven’t already registered on the InterviewBit site. If you are already a user then please sign in with the credentials.
You can sign up using Google/Linkedin/Facebook or Github account also.

Step 2: Before copying the embed link, we are required to save the snippet first with a name. You can follow the instructions given below to save the snippet.

We are saving our snippet with the name “first”.

Step 3: Since we have saved the snippet, we can now locate that saved snippet from the snippet’s folder. The embed link has an HTML iframe that is used to represent the snippet in a webpage:

Step 4: Now we will create a simple webpage. The copied embed link is then required to be pasted under the body tag of the HTML file.

<!DOCTYPE html>
<html>
<head>
    <title>
        Embedding Interviewbit's Online C Compiler into a website
    </title>
</head>
<body>
        <!-- Heading -->
        <h2 style="text-align:center"> Embedding Interviewbit's Online C Compiler</h2>
        <!-- Break the line -->
        <br>
        <!-- Embed the Interviewbit's Online C Compiler -->
        <iframe style='max-width:100%; border: none' height=375 width=700 src=https://www.interviewbit.com/embed/snippet/78ee2aed4616367d46ab title='Interviewbit Ide snippet/78ee2aed4616367d46ab' loading="lazy" allow="clipboard-write" allowfullscreen referrerpolicy="unsafe-url"></iframe>
</body>
</html>

The working of the HTML program has been discussed below:

  • The HTML program has a heading 2 tag using which we display “Embedding Interviewbit's Online C Compiler” at the top of the webpage.
  • Also, we have centred it using the Center-align text
  • Next, we have a line-break element that is used to break the line after executing the heading 2 tag.
  • After the line-break tag, we have pasted the embedded online C compiler link that we have copied in Step 2.

Note that you can customize the structure of the imported iframe tag. But for simplicity, we are using the default embed link.

Step 5: Now we can run the webpage on the live server. For this purpose, we are Microsoft Visual Studio Code. We can use the “live server extension” that will launch a local development server with a live reload feature for static & dynamic pages.

The InterviewBit’s C online compiler has been embedded successfully on your website.

Running a program on the Embedded Online Compiler:

Once the compiler is embedded on our site we can create and run a program on the embedded compiler. The embedded compiler is also capable of taking standard inputs from the user.

In order to make it more clear, let’s consider a program that takes a positive integer as input from the user and checks whether it is prime or composite and reports the same. We will directly write the source code in the text editor of the embedded online C compiler.

The program used is given below:

// Include header files
 
#include <stdio.h>
#include<stdbool.h>
 
// Function to check number is prime
// or not 
void checkPrime(int number)
{
    // Initialize a boolean variable
    // as true
    bool isPrime = true;
 
    // Iterate using a for loop
    // If there is a factor between 2 and the root of "number"
    // then "number" is not prime
 
    int factor;
    for(factor = 2 ; factor * factor <= number ; factor++)
    {
        // If "number" is divisible by "factor"
        if(number % factor == 0)
        {
            // Mark isPrime as false
            isPrime = false;
 
            // Come out from the for loop
            break;
        }
    }
 
    // Check is isPrime is true
    // Then "number" is prime
    if(isPrime)
        printf("%d is a prime number", number);
    
    // Otherwise "number" is composite number
    else
        printf("%d is a composite number", number);
 
}
 
// menu driver code
int main() {
 
    // Declare a integer variable   
    int number;
 
    // Input the number
    scanf("%d", &number);
 
    // Calling checkPrime function
    checkPrime(number);
 
    return 0;
}

Demonstration:


At first, we were giving 10 as the input and then we passed 7 as the input.

Summary:

  • We learn about some basic concepts like what a compiler is, the types of the compiler, and why online compilers are advantageous over offline compilers.
  • Then we learnt about how we can embed InterviewBit’s Online C Compiler on a website. During this process, we get to know about the iframe tag in HTML.
  • In the end, we successfully compiled a basic program to check whether a number is prime or not using the embedded online c compiler.

Conclusion:

Hurray! You have successfully embedded InterviewBit’s Online C compiler on your website. Now you can enjoy using the most dynamic Online IDE on your own website and run your programs with ease.

Thank You and Good Luck!
:)

Discussion