Pada artikel ini, kita akan belajar membuat online code editor dengan menggunakan open-source code. Di sini kita akan membuat satu editor yang mendukung 3 bahasa: C++, Java, dan Python.
Membangun online code editor dapat terlihat terlalu rumit, tetapi kita dapat memecahnya menjadi dua bagian.
- API yang berjalan di server backend, yang akan mengambil sepotong kode dan bahasa sebagai masukan dan mengeluarkan jawaban setelah menjalankan kode di server.
- Frontend code editor, kita dapat memilih bahasa dan mengedit serta memodifikasi kode di sini. Kemudian kita membuat post request ke API backend dan menampilkan output di website.
Membuat FrontEnd
Tampilan frontend kita nantinya cukup sederhana. Kita memiliki satu menu drop-down di mana kita dapat memilih bahasa dan bergantung pada bahasa yang kita pilih, kita akan mendapatkan editor code masing-masing. Code utama kita berada di home-page.html dan code editor berada di texteditor.js.
Di sini kita telah membuat satu onClickListener untuk item menu dropdown. Jadi, ketika satu item diklik, listener yang sesuai akan terpicu dan kita dapat memanggil editor yang kita inginkan. Semua bahasa memiliki id yang berbeda yang terkait dengannya. Daftarnya dapat ditemukan dengan menggunakan ini.
Berikut code untuk file home-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cara Membuat Online Code Editor - Leravio</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
min-width: 500px;
min-height: 500px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="src-noconflict/ace.js"
type="text/javascript"
charset="utf-8"
></script>
</head>
<body>
<div>
<h1>Code Editor</h1>
<select id="myselect" onchange="onSelectChange(this.value.trim())">
<option value="53" >C++</option>
<option value="62" >Java</option>
<option value="70">Python</option>
</select>
<div id="editorContainer">
<div class="container" style="margin-top: 30px">
<div class="row">
<div class="col">
<pre id="editor">
</pre
>
</div>
<div class="col">
<button class="btn btn-success">Execute</button>
<br />
<pre id="ans"></pre>
</div>
</div>
</div>
</div>
</div>
<script src="texteditor.js"></script>
<script>
function onSelectChange(selectedVal){
console.log(selectedVal)
if(selectedVal != undefined && selectedVal!=null && selectedVal!="") {
$("button").off('click');
codeEditor(selectedVal)
}
}
window.onload = function () {
codeEditor("53");
};
</script>
</body>
</html>Di sini kita memanggil fungsi codeEditor dari file javascript, kita mengirim id masing-masing yang terkait dengan bahasa. Setelah itu, kita menambahkan style dari assets/css/style.css.
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: sans-serif;
color: black;
margin-top: 50px;
}
#myselect {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
max-width: 400px;
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #cbd1d8;
font-size: 1rem;
line-height: 1.5;
background: #fff url(../img/down.svg) no-repeat center right 12px / 18px 18px;
transition: all .2s ease-in-out;
}
.myselect::-ms-expand {
display: none;
}
.myselect:focus {
outline: 0;
border-color: #7bbaff;
box-shadow: 0 0 0 3px rgba(0, 121, 250, .3);
}
h1 {
font-size: 1.5rem;
}Kita juga perlu menautkan file javascript agar kode dapat dieksekusi. Kita mendapatkan lang_id dari html dan melakukan pemanggilan network yang sesuai. Untuk code java adalah 62, cpp 53 dan python 70. Ini diteruskan dalam language_id . Kita juga menetapkan nilai default ke editor tergantung pada lang_id.
const JAVA_KEY = "62";
const CPP_KEY = "53";
const PYTHON_KEY = "70";
const BASE_URL = "http://34.72.83.62/submissions"
function codeEditor(lang_id) {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
console.log("id" + lang_id )
$(document).ready(function () {
$("button").click(function () {
let code = editor.getValue();
$("#ans").html("Loading...");
console.log(code);
let data = {
source_code: code,
language_id: lang_id,
number_of_runs: "1",
stdin: "Judge0",
expected_output: null,
cpu_time_limit: "2",
cpu_extra_time: "0.5",
wall_time_limit: "5",
memory_limit: "128000",
stack_limit: "64000",
max_processes_and_or_threads: "60",
enable_per_process_and_thread_time_limit: false,
enable_per_process_and_thread_memory_limit: false,
max_file_size: "1024",
};
console.log(data)
let request = $.ajax({
url: BASE_URL,
type: "post",
data: data,
});
const delay = (ms) => new Promise((res) => setTimeout(res, ms));
// Callback handler that will be called on success
request.done(async function (response, textStatus, jqXHR) {
// Log a message to the console
console.log("Hooray, it worked!");
let token = response.token;
await new Promise((resolve) => setTimeout(resolve, 5000)); // 5 sec
let second_request = $.ajax({
url: BASE_URL + "/"+ token,
type: "get",
});
second_request.done(function (response) {
console.log(response.stdout);
$("#ans").html(response.stdout);
});
});
});
});
if(lang_id==PYTHON_KEY)
editor.setValue("def execute(): \n\t for i in range(10):\n\t\t print i \nexecute()")
//java
if(lang_id==JAVA_KEY){
let javacode = `public class Main{
public static void main(String args[]){
System.out.println("hello");
}
}
`;
editor.setValue(javacode)
}if(lang_id==CPP_KEY){
let cppcode = `#include <iostream>
using namespace std;
int main() {
cout<<"Hello World"; \n
}`
editor.setValue(cppcode)
}
} Penutup
Pada artikel ini telah membahas cara membuat online code editor menggunakan html, css, dan javascript. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.