HTML

Fitur Utama yang Dimiliki VueJs | JavaScript

Virtual DOM DOM singkatan dari Document Object Model merupakan model yang mnggambarkan halaman HTML atau XML. DOM berbentuk struktur hirarki pohon yang menghubungkan masing-masing element HTML/XML(node). Contoh: Kode HTML di atas jika dilihat dari sudut pandang DOM memiliki root node html, node html memiliki dua child node yaitu head dan body. Node head memiliki satu child yaitu title, sedangkan node body memiliki dua child yaitu h1 dan p. Javascript memiliki kemampuan untuk mengakses dan memanipulasi semua DOM tersebut secara langsung. const h1s = Array.from(document.getElementsByTagName('h1')) console.log(h1s[0]); Namun alih-alih memanipulasinya secara langsung, Vue memilih pendekatan lain yaitu membuat abstraksi objek virtual dari DOM kemudian memanipulasinya baru kemudian merender atau menampilkan hasilnya. Pendekatan ini lebih efektif dan cepat dibandingkan langsung memanipulasi DOM-nya sebagaimana yang dilakukan pustaka lain semisal JQuery. Component Base Vue menggunakan pendekatan berbasis komponen, dimana setiap tampilan atau bagian dari tampilan merupakan komponen. Melalui pendekatan ini, tampilan yang komplek dapat dipecah menjadi beberapa bagian dan setiap bagian itu bisa digunakan kembali pada bagian lainnya. Hal ini akan membuat kode lebih efisien dan bersih. Kode komponen pada Vue ditulis menggunakan kode Javascript sebagai sebuah object. Template berkaitan dengan poin sebelumnya, template merupakan kode yang dijadikan dasar dari suatu komponen dann biasanya berupa kode-kode HTML biasa. Penulisan template pada Vue bisa sangat fleksibel dan out of the boc. Kita bisa tuliskan tag template tag HTML yang id-nya telah didaftarkan,, bisa juga dipisahkan pada file tersendiri yang umumnya menggunakan ekstensi Vue, dsb. Modularity Komponen pada Vue bisa dipecah menjadi modul-modul kecil. Hal ini akan memudahkan pengembangan untuk mengelola kodenya terutama pada proyek aplikasi yang besar. Reactivity Secara default, Vue mendukung reactivity yaitu perubahan data pada suatu bagian tertentu akan mempengaruhi bagian yang lain. Fitur ini akan memudahkan developer dalam mengembangkan aplikasi karena cukup fokus pada flow data dan template. Routing Routing merupakan kebutuhan untuk pembuatan aplikasi enterprise karena menyangkut bagaimana suatu halaman pada aplikasi tersebut diakses oleh pengguna melalui web browser. Meski bukan pada core-nya, namun Vue menyediakan pustaka yang didukung secara resmi untuk menangani routing aplikasi, yaitu Vue router https://router.vuejs.org. State Management Oleh karena vue berbasis komponen, maka diperlukan pendekatan terpusat untuk menyimpan state atau data aplikasi yang bisa dibaca dan dimodifikasi oleh semua komponen yang membutuhkannya. State management juga bukan core pada Vue seperti halnya routing, namun pustaka yang menangani state ini juga didukung secara resmi yaitu vuex https://vuex.vuejs.org.

Rabu, 22 April 2020 | 2 minutes Read

Download Tutorial W3schools Offline Untuk Belajar Pemrograman dan CSS lengkap

Hello guys kali ini admin akan mengulas sedikit pemahaman tentang w3school, dimana w3school ini digunakan untuk belajar Pemrograman,CSS,Bootsrap, dll. Pada w3schools ini sangat bagus untuk belajar dasar-dasar dari pemrograman dimana pada penjelasan pada w3schools itu sangat lengkap oleh karena itu anda akan lebih cepat mengerti dengan penjelasan tersebut. Jadi sebenarnya w3schools ini di operasikan secara online tetapi admin disini akan berbagi w3schools yang bisa di operasikan secara offline dimana gunanya pada saat anda tidak terkoneksi internet anda bisa mempelajari w3schools offline ini, jadi anda akan lebih mudah untuk mengoprasikannya. link download anda bisa kunjungi link di bawah ini: link download

Sabtu, 25 November 2017 | 1 minute Read

Tips dan Trik Belajar Pemrograman Dengan Meniru dan inspeksi Emelemnt Berbasis HTML dan CSS

Salam hangat para pejuang programmer bukan pro-gamer kali ini admin akan mengulaskan sedikit pemahaman mengenai cara cepat belajar pemrograman yang admin alami pada saat ini. Pada gambar di atas admin mencoba meniru web sia unram bisa anda lihat dengan mengunjungi web site ini: sia.unram.ac.id dimana admin memulai belajar pemrograman dengan cara meniru website yang di anggap mudah dan tampilannya menarik untuk kita tiru. Selanjutnya pada gambar di atas menggunakan sedikit elemen HTML dan lebih banyak digunakan CSS dari pada HTML karena CSS itu berfungsi untuk mendesain halaman web supaya template web tersebut terlihat bagus di pandangan para pengunjung. Berkaitan dengan CSS admin belajar melalui W3school disana pusat pembelajaran admin mengenai CSS,HTML,PHP.dll Berikut ini adalah script gambar di atas Seperti yang kita liat pada gambar script di atas ini yang berwana merah,hijau,kuning itu warna kombinasi HTML dan yang warna Biru adalah CSS bisa di lihat di bagian sebelah kanan gambar terdapat warna biru panjang itu adalah script CSS yang berguna untuk mendesain tampilan yang ada pada gamabr pertama di atas. Sumber pembelajaran admin disini ada 2 cara yaitu: belajar di w3school inspeksi element (klik kanan pada browser kemudian plih paling bawah atau bisa menekan ctrl+shift+I ) pada gambar pertama di atas masih menggunakan versi localhost karena masih proses belajar untuk pemula Alat dan bahan yang digunakan: aplikasi editor pemrograman (sublime) XAMPP (untuk menjalankan di localhost) sampai disini dulu ulasan pertama admin mengenai Cara Mudah belajar pemrograman semoga bermanfaat informasi yang di dapatkan pada postingan kali ini dan..... Salam programmer bukan pro-gamer

Kamis, 17 Agustus 2017 | 2 minutes Read

Membuat Form Dengan Input dan Pemrosesan Terpisah di HTML5 dan PHP

kembali lagi di blog kuasai teknologi kali ini saya akan membawa materi tutorial tentang membuat Form dengan input dan pemrosesan terpisah, maksudnya disini terpisah adalah reloadnya dari halaman 1 ke halaman 2 dengan menampilkan data yang ada pada halaman 1, selanjutnya simak penjelasannya di bawah ini. Form di HTML5 dikenal dengan adanya tag <form> dan di tutup dengan </form> . Di dalam tag pembuka <form> diikuti dengan atribut action dan method. Action menjelaskan ke halaman yang digunakan untuk memproses input, smentara method digunakan untuk mengatur cara mem-parsing konten. Ada 2 method yang biasa digunakan. GET: Variabel akan bisa dilihat di URL POST: Variabel akan disembunyikan dan tidak terlihat di URL, lebih secure dan cocok untuk memparsing informasi yang penting, seperti password. Selain itu anda harus juga mengerti sintaks pembuatan form, yang terpenting adalah atribut "name" di masing-masing objek form (misalnya input atau text area). Atribut name ini penting karena nantinya digunakan untuk memanggil variabel di form lainnya. Berikut ini adalah kode untuk menerima masukan user. Kode ini bisa disimpan dalam format HTML atau PHP karena tidak ada kode PHP di dalamnya dan hanya berfungsi untuk merender form dan menentukan actionnya, seperti gambar di bawah ini. gambar 1 Apabila dijalankan pada browser tampilannya seperti gambar 2 di bawah ini: gambar 2 Untuk memproses Anda perlu membuat terlebih dahulu file tangkapaninput.php. Yang harus di perhatikan adalah nama dari objek-objek form yang akan di gunakan untuk mengambil nilai variabel. Cara mengambilnya adalah dengan menggunakan sintaks $_POST['nama_variabel']." misalnya untuk mengambil variabel yang diisikan di kotak dengan name = "nama" maka digunakan sintaks $_POST['nama']. sperti ambar di bawah ini adalah file tangkapinput.php nya: gambar 3 Script yang ada pada gambar 3 akan mengambil variabel-variabel yang dimasukkan dari from yang ada pada gambar 1 yang kemudian ditampilkan dengan memanfaatkan label untuk me-layout-nya. Gambar 3 apabila dijalankan pada browser maka tampilannya akan seperti di bawah ini: gambar 4 Data yang ada di gambar 4 ini adalah Data yang di isi oleh user pada Gambar 2 di atas dan hasilnya seperti gambar di atas. Mungkin sampai disini dulu penjelasan tutorial kali ini jangan lupa di praktikan lansung...

Kamis, 04 Mei 2017 | 2 minutes Read

membuat input Date Picker menggunakan HTML5

script date picker sampai jumpa lagi di blog saya kuasai teknologi tutorial kali ini akan membahas tentang Date Picker, ini gunanya untuk mengambil data dan waktu lansung saja simak penjelasannya di bawah ini: Date: memilih tanggal, bulan dan tahun Month: memilih bulan dan tahun week: memilih minggu dan tahun Time: memilih waktu (jam dan menit) Datetime-local: memilih waktu, tanggal, bulan dan tahun (waktu lokal) contoh kodenya adalah seperti di bawah ini: date: <input type="date" name="tanggal" /> berikut ini contoh beberapa kode untuk input type: <html> <head> <title>penggunaan input Date Picker</title> </head> <body> <form> silahkan masukkan data anda: </br> alamat email: <input type="email" name="email_pengunjung" /></br> wbsite : <input type="url" name="url_pengunjung" /></br> angka: <input type="number" name="angka" min="1" max="10" /></br> range: <input type="range" name="jangkauan" min="1" max="10" /></br> tanggal: <input type="date" name="tanggal" /> </form> </body> </html> apabila dilihat di browser (contohnya oprea), tampilan tiap field akan sesuai dengan jenisnya bisa anda lihat seperti gambar di bawah ini: hasil dari script di atas mungkin sampai disini pembahasa kali ini megenai Date Picker, apabila mau penjelasan lebih lengkap tonton video di bawah ini: sekian dan terimakasih sudah menyimak dan menonton video di atas semoga bermanfaat dan jangan lupa di Subscribe videonya see you again next time jangan lupa di praktikan lansung

Rabu, 03 Mei 2017 | 1 minute Read

Membuat Tabel di HTML Dengan Detail

lansung saja script yang ada pada gambar di atas adalah script dari tabel yang kita buat pada pertemuan kali ini, script yang sekarang ini lumayan banyak tetapi simpel karena penjelasannya sudah di jelaskan sebagian di potingan yang kemarin" bagi yang belum tau silahkan klik disini dan juga penjelasannya sebagian disini penjelasan: Tabel merupakan sebuah kotak yang terdiri dari baris/row dan kolom/column. untuk membuat tabel, anda menggunakan <table> dan menutupnya dengan tag </table>. anda juga bisa menambahkan atribut lain di tag <table> pembuka. misalnya menentukan border,warna dan sebagainya. Di dalam tag <table> ada beberapa tag lain yang perlu anda pahami yaitu: Tag <tr>, artinya adalah tag untuk menuliskan baris biasa di tabel, TR singkatan dari Tabel Row Tag <td>, artinya adalah tag untuk menuliskan kotak di dalam baris, makanya tag <td> ada di dalam tag <tr>. TD singkatan dari Tabel Data Tag <th> artinya adalah tag untuk menuliskan kotak biasa seperti <td> namun untuk header tabel. TH singkatan dari tabel header. selanjutnya apabila script yang di atas di jalankan pada browser tampilannya akan seperti di bawah ini: Di dalam tag table ada tertulis "border" di sana pada gambar 1, fungsi dari border ini untuk mempertebal ukuran garis pinggir pada tabel seperti gambar yang di atas tebal hitam itu hasil dari border, dan ketebalan yang saya gunakan tingkat 10. mungkin sampai disini pembahasan tentang tabel, pada akhir pembahasan ada tertera SUBSCRIBE lansung saja taruh email anda dan klik submit, apabila ada postingan terbaru dari blog kuasai teknologi akan lansung masuk pada kontak email anda. sekian dan selamat mencoba....

Jumat, 28 April 2017 | 2 minutes Read

Membuat Daftar List Pada HTML: Lengkap Dengan Penjelasannya

assalamu’alaikum wr.wb salam sejahtera untuk kita semua, kali ini saya akan berbagi tutorial dengan judul cara membuat list pada HTML, baiklah lansung saja simak tutorialnya seperti di bawah ini: gambar 1 penjelasan: dari beberapa code HTML di atas sudah di jelaskan pada postingan yang kemarin bagi yang belum tahu bisa klik disini. selanjutnya penjelasan tentang beberapa code html yang berguna untuk membuat list. Dari gambar di atas ada kode yang tertera di dalam gambar seperti berikut <ol> , <li> dan <ul> . arti dari ketiga code tersebut adalah: <ol> artinya adalah Order List yang dimaksud dengan daftar yang berurutan seperti contoh di gambar 2, tentang cara membuat program disitu ada no urut 1,2 dan 3. itulah yang dimaksud dengan <ol> (Order List) <li> artinya adalah List yang dimaksud dengan list disini adalah isi dari Order list yang di atas seperti "tulisan script code", "kompilasi", dan "buat file executable" <ul> artinya adalah unorder list maksudnya unorder list ini baris yang tidak berurutan contohnya bisa di lihat pada gambar 2, disana ada tanda titik hitam tebal itu salah satu contoh dari unorder list yang tidak berurutan. gambar 2 saya rasa cukup jelas dengan penjelasan dari code html pada gambar 1 dan pada gambar 2 ini adalah hasil dari gambar 1 apabila di jalankan pada browser. oke sampai di sini penjelasan kali ini karena tutorial pemograman nya secara bertahap jadi nantikan postingan" yang terbaru lagi di blog saya kuasai tekologi. sekian dan terimakasih, jangan lupa langsung di praktikan.

Kamis, 27 April 2017 | 2 minutes Read

Membuat Link Menggunakan HTML5

assalammu'alaikum wr.wb salam sejahtera bagi kita semua, postingan kali ini saya akan berbagi tutorial untuk membuat link menggunakan HTML, selanjutnya mari kita simak langkah" pembuatannya seperti berikut: gambar 1 perhatikan gambar 1 di atas kode program di atas adalah kode setandar dari HTML dimana terdapat beberapa bagian/elemen HTML seperti, <html>, <head>, <title>, <body>, dan di akhiri dengan </html>. <html> adalah awal kode dari HTML atau bisa di bilang sebagai pembukaannya <head> adalah tempat penampungan elemen yang terkandung di dalamnya seperti <link>,<meta>,<title> tetapi elemen yang di kandung di dalam head ersebut akan di bahas divlain waktu <title> adalah untuk mnampilkan judul dari coding yang anda buat <body> adalah bagian dari halaman web, jadi semua elemen yang di inputkan ke dalam body akan muncul di halaman web </html> adalah penutup dari kode HTML yang di awali dengan tanda / kemudian di dalam body ada elemen <hr/> untuk membuat garis horizontal/garis pembatas dari <hr /> lainnya <h1> artinya heding 1, heding ini berfungsi untuk memberikan judul yang ada di dalam body tersebut <a href> adalah tempat penaruhan link yang kita inginkan. apabila coding pada gambar satu di simpan bentuk html kemudian di jalankan di browser tampilannya akan muncul seperti berikut: gambar 2 pada gambar 2 di atas sudah ada penjelasan yang di maksud dengan code" yang ada di gambar 1 bagian" dari elemen HTML tersebut apabila link bagian blog di klik akan muncul ke link yang kita masukan tadi, pada gambar 1 saya memasukan link kuasai teknologi maka link tersebut akan muncul seperti ini apa bila sudah di klik: gambar 3 begitupun link email juga apabila di klik akan lansung muncul email yang kita cantumkan pada pengelingan di gambar 1 mungkin sampe disini toutorial kita kali ini apabila ada kekurangan/kurang jelas silahkan lansung di komen dan apabila anda mengerti dengan penjelasan singkat yang ada pada di atas silahkan di peraktikan dan sampaikan keluhan anda di kolom komentar. anda bisa juga simak video tutorial Membuat Link Menggunakan HTML di bawah ini: sekian untuk toutorial kali ini See you again

Rabu, 26 April 2017 | 2 minutes Read

Mengenal dan Tutorial HTML5 Dalam Bahasa Pemrograman

assalamualaikum wr.wb salam sejahtera bagi kita semua postingan kuasai teknologi kali ini kita akan membahas tentang HTML sperti yang kita ketahui HTML itu sangat luas tetapi kali ini kita akan mengambil poinnya aja supaya tidak terlalu membingungkan, oke lansung saja mari kita simak artikel di bawah ini. Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapa pun, pengembangannya dilakukan oleh banyak orang di banyak negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara gelobal. Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat di edit oleh editor teks apapun. Dokumen HTML punya beberapa elemen yang di kelilingi oleh tag teks yang dimulai dengan tanda < dan berakhir dengan tanda > . 1. pengenalan Dasar HTML dapat mencakup petunjuk untuk memformat dalam bahasa yang disebut cascading style sheets (CSS) dan program untuk interaksi dalam bahasa yang disebut JavaScrip. Halaman web yang biasa anda lihat ketika browsing di internet selalu ditulis menggunakan bahasa HTML tak peduli halaman web tersebut dibuat menggunakan berbagai bahasa seperti PHP, JSP, ASPX, atau Cold Fusion, hasil akhirya yang di tampilkan oleh browser tetap adalah HTML murni. HTML awalnya hanya didesain sebagai bahasa untuk pertukaran dokumen teknis dan saintifik, karena itu HTML didesain secara sederhana, HTML menggunakan tag-tag yang dapat di pahami dengan mudah untuk membuat dokumen sederhana. Dalam waktu yang singkat HTML kini telah populer dan dikuasai banyak orang untuk membuat halaman web. HTML adalah bahasa yang mengatur bagaimana tampilan isi dari situs web, di dalam html ada tag-tag dimana tag berfungsi menyediakan informasi berkaitan dengan sifat dan struktur konten serta refrensi untuk gambar dan media lainnya. jadi dengan menggunakan HTML5, anda dapat membuat situs web canggih yang sangat interaktif, memang hingga saat ini tidak semua browser bisa memparsing dan menampilkan semua fitur, tetapi browser yang berbobot sudah bisa menampilkannya. Dan anda pun mulai bisa belajar HTML5, CSS, dan JavaScript dengan spesifikasi baru. Sruktur Dasar HTML Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag akhir. Tag berakhir termasuk simbol / diikuti oleh tipe elemen misalnya </HEAD>. Sebuah elemen HTML dapat bersarang di dalam elemen lainnya. sebuah dokumen HTML standar terlihat seperti ini: gambar 1 kode di atas penulis beri indentasi untuk membuat program bisa terbaca lebih jelas, tetapi HTML sebenarnya mengabaikan indentasi ini (sering juga dibuat spasi atau whitespace). jadi anda tidak wajib untuk anda membuat indentasi di kode anda sendiri. Dokumen HTML sendiri terdiri dari unsur HTML di tandai dengan tag <html> awal dan di akhiri dengan tag html penutup berupa </html>. dokumen HTML biasanya memiliki HEAD dan elemen BODY. HEAD ini di dalamnya berisi judul atau <title>. judul nantinya muncul di bagian title bar dari browser. ini adalah hasil dari kode program yang di atas pada saat di jalankan di browser: gambar 2 jadi saya menyimpan di localhost dengan folder"html" dan nama filenya adalah "tombol.html". sperti yang kita lihat pada gambar browser di atas yang mempunya judul "ini judul dokumen html" sudah kita tulis di kode HTML pada gambar pertama dengan elemen <title> ini judul dokumen html </title> selanjutnya elemen: <body> Teks ini adalah teks yang muncul di body dari dokumen </body> pada gambar pertama ada elemen body yang di tulis seperti yang di atas maksudnya di sini segala sesuatu yang di tulis di dalam elemen body, akan muncul di halaman web, sperti gambar pertama yang ada di dalam elemen body ketika di jalankan isinya akan muncul di halaman web seperti gambar yang ke dua. oke bro sampe disini dulu pembahasan mengenai HTML, dan jangan lupa luangkan waktunya untuk mengunjungi blog saya kuasai teknologi masih banyak lagi artikel" tentang bahasa pemrograman yang akan di sampaikan di blog ini dan artikel" tentang bahasa pemrograman tersebut akan menyusul dan satu lagi toutorial berbentuk video juga akan segera menyusul di channel youtube saya dan jangan lupa juga untuk di subscribe. sekian terimakasih.

Selasa, 25 April 2017 | 3 minutes Read