 Show
Table of Contents
Anda ingin menyatakan sesuatu ke gebetan atau ke pacar? Namun, Anda ingin menyatakannya dengan tak biasa seperti melalui script HTML. Berikut ini pembahasan script HTML romantis Android yang bisa Anda lakukan. Bagi Anda penyuka teknologi, pasti sudah tidak asing mendengar HTML. Sebelum membahas script HTML romantis Android, sebaiknya Anda kenali dulu apa itu HTML? HTML atau Hypertext Markup Language adalah bahasa markup yang berguna untuk membuat struktur dari halaman suatu web atau situs. HTML ini terdiri dari beberapa huruf, angka, dan simbol. Tentunya, untuk menjalankan HTML, Anda harus membuat script. Lalu, bagaimana cara membuat script HTML? Anda bisa membuat script sesuai yang ingin Anda inginkan, seperti membuat script HTML romantis Android untuk gebetan atau pacar. Berikut ini cara membuat script HTML romantis yang bisa Anda lakukan. Anda bisa juga menyalin dan menempelkan script di bawah ini ke notepad atau aplikasi yang bisa untuk mengedit HTML. <html> <head> <title> DIBUKA AJA YA </title> <script type=”text/javascript”> flag=1 function f1() { alert(“Thanks Udah pilih Jawaban YA”) } function f() { if(flag==1) { Bn.style.top=400 Bn.style.left=300 flag=2 } else if(flag==2) { Bn.style.top=400 Bn.style.left=50 flag=3 } else if(flag==3) { Bn.style.top=370 Bn.style.left=166 flag=1 } } </script> </head> <body> <h2> Surat Spesial Dariku <h2> <img alt=”EvilicaCell” src=”https://res06.noxgroup.com/noxinfluencer/youtube/avatar/fc4d6a2c4953c885ed1adbd2c45a813b.png” height=”200″ /> <h2 style=”#”>Apa Kamu Mencintaiku?</h2> <div id=”By” style=”position:absolute; left:64px; top:370px; width:210px; height:210px;”> <input type=”button” value=” YA ” onClick=”f1()” /> </div> <div ID=”Bn” style=”position:absolute; left:166px; top:370px; width:210px; height:210px;”> <input type=”button” value=” TIDAK ” onMouseOver=”f()” /> </div> </body> </html> Cara Jalankan HTMLLalu, bagaimana cara menjalankan file HTML? Anda bisa menjalankan HTML dengan aplikasi Acode yang bisa Anda gunakan di Android Anda. Berikut ini penjelasan yang bisa Anda lakukan.
PenutupItulah penjelasan dari Motiska mengenai HTML, script HTML romantis Android, hingga cara menjalankan HTML yang bisa Anda lakukan. Dengan begitu, Anda bisa menyatakan sesuatu ke gebetan maupun ke pacar dengan cara yang keren. Nyekrip » Website » Cara Membuat Aplikasi Web Sederhana
Halo Nyekriper! Pada tutorial ini kita akan belajar cara membuat aplikasi web sederhana tanpa menggunakan web server seperti apache, hanya menggunakan javascript dan fitur canggih yang dimiliki HTML5. Pada saat ini Web browser sudah mendukung HTML5 yang sudah memiliki fitur seperti canvas, WebGL, localStorage yang digunakan untuk menyimpan data dalam bentuk key value, video dan Audio, dan masih banyak lagi. Dengan adanya fitur tersebut kita sudah bisa membangun aplikasi yang dapat diakses secara lokal, dan tidak perlu membutuhkan web server. Hasil Akhir dari tutorial ini akan nampak seperti gambar berikut ini: Tampilan Awal Anda bisa download aplikasi web dengan klik tombol “Download” diatas atau ingin mencobanya secara online dengan klik “Demo Skrip”. Untuk membuat Aplikasi web tersebut, silahkan anda ikuti langkah-langkah berikut ini. Cara Membuat Aplikasi Web Sederhana: Persiapan AwalDalam artikel ini kita akan membuat sebuah aplikasi web lokal yang mempunyai fitur CRUD (Create Reset Update Delete) data. Berikut ini adalah fitur yang akan kita buat untuk membangun aplikasi web lokal:
Sedangkan perangkat lunak yang dibutuhkan adalah sebagai berikut.
Membuat Aplikasi Web: Membangun KerangkaPertama kita akan membuat folder dengan nama “nyekrip aplikasi web” dalam folder tersebut kita akan membuat satu folder lagi dengan nama “files” dan satu file HTML dengan nama “index.html”. Secara lebih detail, fungsi dari kedua file adalah sebagai berikut:
Mari kita buat terlebih dahulu file <!DOCTYPE HTML>
<html>
<head>
<title>Nyekrip Aplikasi Web Sederhana</title>
</head>
<body onload="muatDaftarData();">
</body>
<script type="text/javascript">
</script>
</html>Langkah selanjutnya adalah memasang aset aplikasi yaitu file Twitter Bootstrap dan Jquery yang telah kita download sebelumnya, tambahkan skrip yang telah di-blok dengan background hitam berikut dibawah tag title. <!DOCTYPE HTML>
<html>
<head>
<title>Nyekrip Aplikasi Web Sederhana</title>
<script src="files/js/jquery.min.js"></script>
<script src="files/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="files/bootstrap/css/bootstrap.min.css">
</head>
<body onload="muatDaftarData();">
</body>
<script type="text/javascript">
</script>
</html>
Setelah menyiapkan file HTML, selanjutnya kita membuat folder yang bernama “files”, dalam folder tersebut kita masukkan file Twitter Bootstrap dan Jquery. Aplikasi Web Sederhana: Membuat Form dan NavigasiSelanjutnya kita membuat dua form yaitu form tambah data dan form edit data, kita akan membuat perubahan di dalam dan pada tag
Berikut ini adalah perubahan isi dan tag <body onload="muatDaftarData();">
<div class="col-md-8 col-md-offset-2" ng-controller="listContactCtrl">
<div class="page-header">
<h2>
Nyekrip CRUD Aplikasi Web Sederhana
</h2>
<ul class="nav nav-pills">
<li><a id="nav-list-data" href="javascript:void(0);" onclick="gantiMenu('list-data');">Daftar Data</a></li>
<li><a id="nav-tambah-data" href="javascript:void(0);" onclick="gantiMenu('tambah-data');">Tambah Data</a></li>
</ul>
</div>
<div id="tambah-data" class="well" style="display:none;">
<form id="form-data">
<div id="name-group" class="form-group">
<label>Nama:</label>
<input type="text" class="form-control" id="nama" name="nama" placeholder="contoh: Nyekrip Web" /><br/>
</div>
<div id="alamat-group" class="form-group">
<label>Alamat:</label>
<input type="text" class="form-control" id="alamat" name="alamat" placeholder="contoh: Indonesia" /><br/>
</div>
<div id="ket-group" class="form-group">
<label>Keterangan:</label>
<textarea class="form-control" id="ket" name="ket" placeholder="contoh: Web Tutorial Indonesia"></textarea><br/>
</div>
<input type="button" value="Simpan" onclick="simpanData();" class="btn btn-success btn-small"/>
<input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
</form>
</div>
<div id="edit-data" class="well" style="display:none;">
<form id="eform-data">
<div id="name-group" class="form-group" style="display:none;">
<label>id data:</label>
<input type="text" class="form-control" id="eid_data" name="nama" placeholder="" /><br/>
</div>
<div id="name-group" class="form-group">
<label>Nama:</label>
<input type="text" class="form-control" id="enama" name="nama" placeholder="contoh: Nyekrip Web" /><br/>
</div>
<div id="alamat-group" class="form-group">
<label>Alamat:</label>
<input type="text" class="form-control" id="ealamat" name="alamat" placeholder="contoh: Indonesia" /><br/>
</div>
<div id="ket-group" class="form-group">
<label>Keterangan:</label>
<textarea class="form-control" id="eket" name="ket" placeholder="contoh: Web Tutorial Indonesia"></textarea><br/>
</div>
<input type="button" value="Simpan" onclick="simpanEditData();" class="btn btn-success btn-small"/>
<input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
<input type="button" value="Cancel" onclick="gantiMenu('list-data');" class="btn btn-warning btn-small"/>
</form>
</div>
<div id="list-data" class="well">
Tidak ada data...
</div>
</div>
</body>Penjelasan singkat tentang kegunaan Skrip :
Selanjutnya
tambahkan skrip javascript berikut untuk membuat fungsi ganti menu, letakkan persis dibawah <script type="text/javascript">
function gantiMenu(menu){
if (menu == "list-data"){
muatDaftarData();
$('#tambah-data').hide();
$('#list-data').fadeIn();
$('#edit-data').hide();
}
else if (menu == "tambah-data"){
$('#tambah-data').fadeIn();
$('#list-data').hide();
$('#edit-data').hide();
}else if (menu == "edit-data"){
$('#edit-data').fadeIn();
$('#tambah-data').hide();
$('#list-data').hide();
}
}
</script>Penjelasan singkat kegunaan skrip: Fungsi Sampai tahap ini kita sudah membuat aplikasi web sederhana dalam tahap Membuat Fungsi daftar, edit, simpan dan hapus DataTambah Data Setelah kita membuat form dan navigasi sebagai elemen Ketik-kan skrip berikut dalam tag function muatDaftarData(){
if (localStorage.daftar_data && localStorage.id_data){
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
var data_app = "";
if (daftar_data.length > 0){
data_app = '<table class="table">';
data_app += '<thead>'+
'<th>ID</th>'+
'<th>nama</th>'+
'<th>alamat beli</th>'+
'<th>ket</th>'+
'<th>aksi</th>'+
'<th>aksi 2</th>'+
'</thead><tbody>';
for (i in daftar_data){
data_app += '<tr>';
data_app += '<td>'+ daftar_data[i].id_data + ' </td>'+
'<td>'+ daftar_data[i].nama + ' </td>'+
'<td>'+ daftar_data[i].alamat + ' </td>'+
'<td>'+ daftar_data[i].ket + ' </td>'+
'<td><a class="btn btn-danger btn-small" href="javascript:void(0)" onclick="hapusData(\''+daftar_data[i].id_data+'\')">Hapus</a></td>'+
'<td><a class="btn btn-warning btn-small" href="javascript:void(0)" onclick="editData(\''+daftar_data[i].id_data+'\')">Edit</a></td>';
data_app += '</tr>';
}
data_app += '</tbody></table>';
}
else {
data_app = "Tidak ada data...";
}
$('#list-data').html(data_app);
$('#list-data').hide();
$('#list-data').fadeIn(100);
}
}
function editData(id){
if (localStorage.daftar_data && localStorage.id_data){
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
idx_data = 0;
for (i in daftar_data){
if (daftar_data[i].id_data == id){
$("#eid_data").val(daftar_data[i].id_data);
$("#enama").val(daftar_data[i].nama);
$("#ealamat").val(daftar_data[i].alamat);
$("#eket").val(daftar_data[i].ket);
daftar_data.splice(idx_data, 1);
}
idx_data ++;
}
gantiMenu('edit-data');
}
}
function simpanData(){
nama = $('#nama').val();
alamat = $('#alamat').val();
ket = $('#ket').val();
if (localStorage.daftar_data && localStorage.id_data){
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
id_data = parseInt(localStorage.getItem('id_data'));
}
else {
daftar_data = [];
id_data = 0;
}
id_data ++;
daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
localStorage.setItem('id_data', id_data);
document.getElementById('form-data').reset();
gantiMenu('list-data');
return false;
}
function simpanEditData(){
id_data = $('#eid_data').val();
nama = $('#enama').val();
alamat = $('#ealamat').val();
ket = $('#eket').val();
daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
document.getElementById('eform-data').reset();
gantiMenu('list-data');
return false;
}
function hapusData(id){
if (localStorage.daftar_data && localStorage.id_data){
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
idx_data = 0;
for (i in daftar_data){
if (daftar_data[i].id_data == id){
daftar_data.splice(idx_data, 1);
}
idx_data ++;
}
localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
muatDaftarData();
}
}
Penjelasan singkat skrip:
Akhirnya kita selesai juga dalam membuat aplikasi web sederhana dengan memanfaatkan Jika anda ingin membuat website sederhana dengan html5 kunjungi artikel “Cara Membuat Website Sederhana dengan HTML 5“. Happy Nyekrip! AdminSuka ingin berbagi pengetahuan dan pengalaman nyekrip program yang dituangkan dalam web ini dan sekarang sedang fokus mengembangkan Web Tutorial berbahasa Indonesia. Nyekrip - Web Tutorial Indonesia Artikel Terkait
Comments
Tinggalkan BalasanThis site uses Akismet to reduce spam. Learn how your comment data is processed. Apa itu script di HTML?HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web. Bagaimana cara menggunakan HTML?Cara Membuat Halaman Web Sederhana dengan HTML. Buka editor teks. ... . Atur jenis dokumen untuk HTML. ... . Tambahkan tab judul untuk halaman web kamu. ... . Ketik di bawah tag "Head" yang tertutup. ... . Selanjutnya membuat judul halaman. ... . Tambahkan judul tambahan jika kamu mau. ... . Membuat paragraf. ... . Mengubah warna teks.. Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?Cara membuat JavaScript di HTML secara langsung Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head> Bagaimana langkah langkah membuat web HTML di Android?4 Langkah Cara Membuat Website Dengan HTML Di Android:. Install Acode dari Playstore.. Buat Path untuk Folder Koding HTML.. Pindahkan Source Code HTML CSS ke Android.. Selesai.. Bagaimana cara menggunakan HTML?Cara Membuat Halaman Web Sederhana dengan HTML. Buka editor teks. ... . Atur jenis dokumen untuk HTML. ... . Tambahkan tab judul untuk halaman web kamu. ... . Ketik di bawah tag "Head" yang tertutup. ... . Selanjutnya membuat judul halaman. ... . Tambahkan judul tambahan jika kamu mau. ... . Membuat paragraf. ... . Mengubah warna teks.. Bagaimana cara menulis kode JavaScript di HTML?Cara membuat JavaScript di HTML secara langsung
Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head> di antara <body>
Apa yang dimaksud dengan script HTML?HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web.
Kode HTML apa saja?Berikut adalah 9 kode HTML dasar untuk blog dan arti coding tersebut:. Title Tag. Tag HTML yang pertama yaitu title tag. ... . Meta Description. Berikutnya, ada meta description. ... . 3. Heading Tag. ... . 4. Anchor Text dan Link. ... . Nofollow. ... . 6. Image Alt Text. ... . 7. Tag Kanonikal. ... . 9. Tag Huruf Tebal (Bold). |
Cara menggunakan script html code
Pos Terkait
Copyright © 2024 idkuu.com Inc.
