Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingAngular JS Tutorial : Membuat proyek web dasar untuk...

Angular JS Tutorial : Membuat proyek web dasar untuk pemula

-

Angular JS, suatu framework website yang saat ini digunakan pada lebih dari 330,000 website, sebagaimana dikutip dari SimilarTech. Mempelajari AngularJS cukup membantu Anda sebagai jalan awal mengimplementasikan teknologi JavaScript dalam pengembangan web.

Apakah Anda belum pernah mempelajari Angular JS sebelumnya? Pada kesempatan kali ini kami akan membahas Angular JS Tutorial tingkat dasar, yaitu membuat suatu aplikasi web sederhana dan mudah dipahami untuk pemula.

Table of Contents

Mengapa menggunakan Angular JS?

Biasanya website yang ada di internet mengadopsi konsep client-server. Terdapat dua bagian dari proses ini, yaitu peramban (browser) web Anda dan server yang menjadi tempat bernaung bagi website. Saat Anda mengetikkan URL (yang berperan sebagai lokasi server) pada web browser, server tujuan tersebut akan memberikan informasi yang berkaitan dengan web yang ingin Anda kunjungi. Informasi tersebut misalnya HTML, CSS, serta JavaScript.

Suatu halaman web umumnya memiliki tombol-tombol yang mengarahkan Anda ke halaman lainnya, entah ke halaman yang masih ada dalam situs tersebut atau halaman di situs lainnya. Saat Anda menekan tombol-tombol tautan ini, Anda kembali meminta pada server untuk memunculkan halaman yang sesuai.

Mungkin ini tidak jadi masalah jika halaman web tersebut adalah web sederhana, kontennya masih statis dan tidak berubah-ubah. Tetapi seiring waktu, tentunya tampilan dan teknologi web terus berkembang. Konten dibuat seinteraktif mungkin, fitur-fitur pada halaman web akan semakin bertambah sehingga dapat melakukan lebih banyak hal. Bahkan halaman web saat ini sudah bukan lagi sekadar halaman web, tetapi bisa ‘menjelma’ menjadi suatu aplikasi utuh.

Jika kita masih menggunakan konsep tadi pada teknologi zaman sekarang, maka berselancar di web akan sangat memakan waktu. Bayangkan, setiap kita mengklik suatu tautan, server harus mengirim keseluruhan informasi yang terkandung dalam halaman web, bahkan jika sesungguhnya sebagian dari informasi tersebut sama saja dengan halaman sebelumnya. Ini membuat waktu tunggu menjadi lebih lama dan halaman web akan terasa lebih lambat.

Maka dari itu kita perlu menggunakan cara yang lebih efisien dalam memuat halaman web. Cara ini dinamakan Single Page Application (SPA), atau aplikasi dengan satu halaman. Saat Anda mengunjungi suatu halaman yang memanfaatkan SPA, browser Anda akan menerima satu halaman dari server. Jika ada bagian halaman yang ter-update atau mengalami perubahan, hanya bagian yang terubah itulah yang akan dimuat ulang secara real-time. Sedangkan bagian lainnya yang tidak berubah akan tetap ada dan didiamkan.

Artikel Terkait  TLS Adalah? Mengenal Istilah SSL/TLS dan HTTPS
Artikel Terkait  Apa Itu Frame Work React Dari JavaScript?

Contohnya, suatu situs memiliki header yang berisi logo situs, halaman utama dan kontak. Baik halaman utama dan halaman kontak menggunakan header yang sama. Maka saat user berpindah dari halaman utama ke halaman kontak, web browser dapat langsung memuat dan menampilkan informasi dari halaman kontak tanpa harus memuat header dari halaman kontak, karena header-nya sama saja dengan halaman utama. Ini menjadikan halaman web terasa lebih cepat dan lebih lancar. Saat ini sudah banyak perusahaan yang webnya menerapkan mekanisme ini.

Nah, Angular JS adalah suatu kerangka (framework) yang berjalan di bagian depan (front-end) dari halaman web yang menerapkan konsep SPA. Angular JS membantu kita untuk mengembangkan HTML agar menjadi lebih dinamis. Angular JS dikembangkan oleh para developer independen dengan dukungan penuh dari Google.

Dengan menggunakan Angular, kita mendapatkan seperangkat alat untuk membantu membangun aplikasi web yang lebih baik. Misalnya, AngularJS membantu membuat koding kita menjadi lebih mudah dipelihara dan diuji karena logika kode dipisahkan dengan tampilan web (view).

Konsep Angular JS

Sebelum kita lanjut ke Angular JS tutorial-nya, ada baiknya untuk setidaknya sedikit mengetahui tentang HTML, CSS dan framework JavaScript seperti jQuery.

Selain itu, ada beberapa konsep lain yang perlu diketahui: akan kami bahas beberapa konsep tersebut secara singkat:

  1. Model View Controller (MVC)

MVC adalah suatu pola yang digunakan untuk mengimplementasikan antarmuka pengguna. View atau tampilan web akan dipisahkan dari logika atau kodingnya. Dengan MVC, testing menjadi lebih cepat karena hasil dari perubahan kode bisa segera tampak setelah kode selesai ditulis.

  1. 2-way Data Binding

Angular JS memiliki fitur 2-way data binding yang membantu memindai beberapa komponen secara bersamaan, sehingga jika ada satu hal yang diubah, hal-hal lainnya dapat ter-update secara langsung.

  1. Directives

Angular JS mengembangkan kode HTML biasa dengan directives. Directive adalah atribut HTML yang membantu AngularJS memberikan perilaku yang tepat. Misalnya atribut <html ng-app> yang akan kita pakai pada Angular JS Tutorial kali ini mengisyaratkan Angular JS untuk memberlakukan halaman HTML kita sebagai suatu aplikasi.

Artikel Terkait  MySQL vs SQLite : Apa sih Bedanya? Yuk Cari Tahu!
Artikel Terkait  Mengenal Pure CSS Framework, Alternative untuk BootStrap

C. Angular JS Tutorial sederhana

Proyek Angular JS yang akan dibuat kali ini adalah proyek sederhana. Mekanismenya yaitu Anda akan diarahkan untuk mengisi nama di kolom teks. Saat Anda mengetik, nama Anda pun akan dimunculkan pada halaman tersebut.

Proyek kali ini akan mengenalkan kita dengan fitur dasar AngularJS seperti 2-way data binding dan directives. Langsung saja kita ikuti Angular JS tutorial sederhana kali ini:

  1. Menyiapkan proyek

Pertama-tama siapkan terlebih dahulu sebuah file bernama index.html. Keseluruhan proyek kita kali ini akan dibuat dalam file ini. Untuk melihat hasilnya nanti, kita hanya perlu membuka file ini di komputer, jadi Anda dapat membuatnya di folder mana saja.

  1. Membuat file index.html

Dalam file index.html, kita akan memasukkan suatu struktur HTML yang sederhana. Anda dapat copy paste kode berikut:

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div>
      <label>Nama:</label>
      <input type="text" placeholder="Masukkan nama Anda">
      <hr>
      <h1>Halo! Di sini nama Anda</h1>
    </div>
  </body>
</html>

Anda juga dapat mengubah tulisan yang dicetak tebal dengan keinginan Anda.

Berikut adalah hasilnya:

angular js 1

Halaman ini belum memanfaatkan AngularJS. Kita langsung saja lakukan langkah selanjutnya:

  1. Menambahkan AngularJS

Agar proyek kita lebih interaktif, kita akan menambahkan Angular JS. Cara paling mudahnya adalah menambahkan Angular JS versi hosted atau yang terdapat di internet. Caranya pada koding index.html tadi, tambahkan script berikut di antara bagian head:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>

Sehingga bagian head menjadi seperti ini:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>

Hasil jadinya belum terlihat, kita lanjut ke langkah berikutnya:

4. Tambahkan Directives

Masih di koding index.html, pada tag <html> tambahkan ‘ng-app’, seperti ini:

<html ng-app>

Seperti yang dijelaskan di awal, directive ini akan memberitahu Angular JS untuk aktif pada keseluruhan halaman web.

5. Memindai (bind) data

Langkah ini akan lebih panjang dari langkah sebelumnya, namun pada langkah inilah kita akan melihat sedikit kemampuan dari AngularJS.

Dalam proyek kita kali ini, halaman web akan menampilkan nama saat kita mengetik di kolom teks yang ada secara langsung, tanpa perlu melakukan refresh halaman atau hal lainnya. Yang kita akan lakukan adalah memindai (bind) data dari kolom teks dan langsung memunculkan data tersebut pada tulisan “Di sini (nama Anda)”, dimana bagian ‘nama Anda’ akan tergantikan oleh apa pun yang diketik pada kotak teks. Inilah yang dimaksud jika satu hal diubah, hal lainnya akan langsung diperbarui.

Artikel Terkait  Rust vs Go Language : Manakah Programming Language Terbaik Masa Kini?
Artikel Terkait  Redis adalah : Panduan Pemula dan Caching dengan Node JS

Kembali ke file index.html, tambahkan ng-model=”namaAnda” pada tag input. Nama ng-model bisa bebas, namun pastikan tidak ada spasi dan dapat dipanggil dengan mudah. Ini menandakan bahwa data kita adalah “namaAnda” yang akan di-bind pada objek lain. Tag input akan menjadi seperti di bawah ini:

<input type="text" ng-model=”namaAnda” placeholder="Masukkan nama Anda">

Kemudian kita akan memberi tahu Angular JS untuk mengubah objek dari data yang tadi di-bind. Objek itu adalah tulisan “nama Anda”, maka ganti tulisan “nama Anda” pada tag h1 menjadi {{namaAnda}}, seperti berikut ini:

<h1>Halo! Di sini {{namaAnda}}</h1>

Ingat, pemanggilan data yang di-bind perlu menggunakan kurung kurawal {{ }}. Di antara kurung kurawal itu Anda memasukkan nama data yang akan dipindai.

Jika Anda mengikuti tutorial secara keseluruhan, kode akhirnya akan terlihat seperti ini:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Nama:</label>
      <input type="text" ng-model="namaAnda" placeholder="Masukkan nama Anda">
      <hr>
      <h1>Halo! Di sini {{namaAnda}}</h1>
    </div>
  </body>
</html>

6. Lihat hasilnya

Simpan file index.html, kemudian buka dengan web browser. Berikut adalah tampilannya:

angular js 2

Jika Anda mengetikkan nama Anda pada kolom teks Nama, maka nama Anda akan langsung muncul pada halaman tersebut.

Jika Anda mengetikkan nama Anda pada kolom teks Nama, maka nama Anda akan langsung muncul pada halaman tersebut.

Selamat, Anda berhasil membuat suatu proyek AngularJS sederhana!

D. Kesimpulan

Itulah Angular JS tutorial yang bisa kami bagikan pada kesempatan kali ini, yaitu membuat proyek sederhana yang menampilkan nama sesuai dengan nama yang dimasukkan.

Selanjutnya, Anda dapat mengembangkan kemampuan dengan mencoba proyek-proyek sederhana yang tertera di website angularjs.org. Anda juga dapat mempelajari lebih lanjut tentang Angular, pengembangan lebih lanjut dari AngularJS dengan fitur-fitur yang lebih banyak dan performa yang lebih disempurnakan.

Selain itu, pastikan Anda juga tetap mengikuti pembahasan menarik lainnya dengan mengunjungi appkey.id!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Mau Jadi Front End Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya