Buat Editor Web Langsung Anda Sendiri menggunakan HTML, CSS, dan JavaScript
Perkenalan
Dalam tutorial ini, kita akan membuat editor web langsung. Ini adalah aplikasi web yang memungkinkan Anda menulis kode HTML, CSS, dan JavaScript dan melihat hasilnya secara real time. Ini adalah alat yang hebat untuk mempelajari pengembangan web dan untuk menguji cuplikan kode. Kami akan menggunakan elemen iframe untuk menampilkan hasilnya. Elemen iframe digunakan untuk menyematkan dokumen lain dalam dokumen HTML saat ini. Atribut src dari elemen iframe menentukan URL dokumen yang akan disematkan
.
Apa itu Editor Web?
Editor web adalah aplikasi web yang memungkinkan Anda menulis kode HTML, CSS, dan JavaScript dan melihat hasilnya secara real time. Kegunaan editor web meliputi: Pembuatan prototipe cepat, Pengujian mudah, dan Pembelajaran pengembangan web.
Apa itu Editor Web Langsung?
Live web editor adalah editor web yang menampilkan hasil kode secara real time.
Prasyarat
Sebelum memulai tutorial ini, Anda harus memiliki pemahaman dasar tentang HTML, CSS, dan JavaScript. Anda juga harus memiliki pemahaman dasar tentang DOM dan cara memilih elemen menggunakan JavaScript. Terakhir, Anda harus memiliki pemahaman dasar tentang elemen iframe.
Perangkat lunak yang Anda perlukan:
- Editor kode (Visual Studio Code, Sublime Text, Atom, dll.)
- Peramban web (Google Chrome, Mozilla Firefox, Microsoft Edge, dll.)
- Ekstensi browser untuk pratinjau langsung (Server Langsung, Pratinjau Langsung, dll.)
- Github
- Halaman Github untuk hosting
Langkah 1: Buat File HTML
Buat folder baru dan beri nama "live-web-editor". Di dalam folder tersebut, buat file baru dan beri nama " index.html ". Buka file di editor kode Anda dan tambahkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Real-Time Editor</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script defer type="text/javascript" src="app.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.0.0/split.min.js" integrity="sha512-tTsZnBXEzNdEaqUO9Ok8fUofS73xieiBa54pD/sxOSvayIgItM9MmEM0CnUjA13LDnJT22sfwmjf20+Bo2174g==" crossorigin="anonymous"></script>
</head>
<body>
<div class="container split">
<!-- Text area for Html Code -->
<textarea id="htmlCode" placeholder="Type HTML code here" spellcheck="false" oninput="update(0)" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}if(event.keyCode==8){update(1);}"></textarea>
<!-- Text area for Css Code -->
<textarea id="cssCode" placeholder="Type CSS code here" spellcheck="false" oninput="update(0)" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}if(event.keyCode==8){update(1);}"></textarea>
<!-- Text area for Javascript Code -->
<textarea id="javascriptCode" spellcheck="false" placeholder="Type JavaScript code here" oninput="update(0)" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}if(event.keyCode==8){update(1);}"></textarea>
</div>
<div class="iframe-container split">
<iframe id="viewer"></iframe>
</div>
</body>
</html>
Untuk Penjelasan kode
onkeydown="if(event.keyCode===9){var v=this.value,s=this.
Kode di atas digunakan untuk rendering langsung textarea, maka secara otomatis akan dirender ketika Anda mengetik di textarea dan juga digunakan mengaktifkan tab di textarea karena secara default tab tidak diaktifkan di textarea.
Langkah 2: Buat File CSS
Buat file baru dan beri nama " styles.css ". Buka file di editor kode Anda dan tambahkan kode berikut:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
}
.container{
background: #E7E7E7;
display: flex;
flex-direction: column;
width: 50%;
height: 100vh;
margin: 3px;
}
.container textarea {
background-color: #121212;
border:1px solid #0dddf0;
resize: none;
width: 100%;
height: 33.333%;
font-size: 1.4rem;
padding: 10px;
resize: vertical;
overflow-y: scroll;
color:white;
}
.container textarea:focus {
outline: none;
color:white;
}
.iframe-container{
background: white;
width: 50%;
height: 100vh;
margin: 3px;
}
#viewer{
width: 100%;
height: 100%;
}
.split {
width:100%;
height:100%;
}
.gutter {
cursor: e-resize;
height: 100%;
background: grey;
}
.gutter.gutter-horizontal {
cursor: ew-resize;
}
Langkah 3: Buat File JavaScript
Buat file baru dan beri nama " app.js ". Buka file di editor kode Anda dan tambahkan kode berikut:
var j=0;
//Function for live Rendering
function update(i) {
if(i==0){
let htmlCode=document.getElementById("htmlCode").value;
let cssCode=document.getElementById("cssCode").value;
let javascriptCode=document.getElementById("javascriptCode").value;
let text=htmlCode+"<style>"+cssCode+"</style>"+"<scri"+"pt>"+javascriptCode+"</scri"+"pt>";
let iframe=document.getElementById('viewer').contentWindow.document;
iframe.open();
iframe.write(text);
iframe.close();
}
else if(i==1){
let htmlCode=document.getElementById("htmlCode").value;
let html=htmlCode.slice(0,htmlCode.length);
document.getElementById("htmlCode").value=html;
j=1;
}
Untuk Penjelasan kode di bawah ini, baris mengambil nilai textarea dan menyimpannya dalam variabel
let text=htmlCode+"<style>"+cssCode+"</style>"+"<scri"+"pt>"+javascriptCode+"</scri"+"pt>";
Langkah 4: Menjalankan Proyek
Simpan semua file dan buka file " index.html " di browser Anda menggunakan ekstensi server langsung.
Anda akan melihat keluaran berikut:
Langkah 5: Cobalah
Sekarang Anda dapat mencoba kode Anda sendiri di area teks dan melihat hasilnya di iframe.
Anda juga dapat menguji rendering langsung dengan menghapus kode di area teks dan melihat hasilnya di iframe.
Tidak ada komentar
Posting Komentar