Membuat Aplikasi Berbasis Web Sederhana Untuk Menu Pencarian Data Sekolah Seluruh Indonesia Menggunakan HTML, CSS & Javascript

Membuat Aplikasi Berbasis Web Sederhana Untuk Menu Pencarian Data Sekolah Seluruh Indonesia Menggunakan HTML, CSS & Javascript

Ada kesempatan kali ini saya akan membahas cara membuat menu sederhana untuk pencarian data sekolah seluruh Indonesia dengan menggunakan HTML, CSS, JAVASCRIPT dan AJAX. HTML digunakan untuk membuat halaman web dengan element-element yang digunakan antara lain:

  1. Heading. 

Digunakan untuk membuat judul pada halaman web. Contoh implementasi code:

Data Sekolah Seluruh Indonesia

     1. Select Tag.

Digunakan untuk membuat dropdown list. Element ini biasa digunakan pada form untuk inputan oleh user. Contoh implementasi code:

   Seluruh Data    Berdasarkan Jenjang    Berdasarkan Nama Sekolah

     2. Tabel.

Digunakan untuk menampilkan list data pada halaman website bisa dalam bentuk table. Contoh implementasi code:

JenjangNama SekolahAlamatKecamatanKabupatenProvinsi

     3. Input text

Digunakan oleh user untuk memasukkan data berupa teks. Sebagai inputan system dalam pengolahan data. Contoh implementasi code:

     4. Button/Tombol

Digunakan sebagai trigger untuk memproses sebuah fungsi. Pada aplikasi ini button digunakan untuk mentrigger proses pencarian data sekolah. Contoh implementasi code:

value=”Cari Sekolah”>                                                 

     CSS (Cascading Style Sheets) biasanya dipasangkan dengan HTML yang digunakan untuk mengubah tampilan dari suatu aplikasi berbasis web. CSS memiliki beberapa framework yang berfungsi untuk memudahkan developer dalam membuat desain aplikasi berbasis web. Pada aplikasi ini saya menggunakan framework Bootstrap. Salah satu cara menyisipkan Framework CSS Bootstrap yaitu dengan menggunakan CDN yang disisipkan didalam tag

pada HTML. Berikut implementasi codenya:

     Javascript adalah bahasa pemrograman yang digunakan untuk membuat interaksi pada halaman sebuah website menjadi dinamis. Sementara jquery adalah library javascript yang akan membuat proses pembuatan website menjadi lebih cepat dan lebih sederhana. Cara menggunakan jquery yaitu dengan menyisipkannya kedalam tag

pada HTML. Sebagai berikut:

[removed]

flare.com/ajax/libs/jquery/3.6.0/jquery.min.js”>[removed]             

Untuk data sekolah sendiri saya ambil dari API Data Sekolah Seluruh Indonesia bersumber dari github. 

     API (Application Programming Interface) adalah antarmuka yang menghubungkan antara satu aplikasi dengan aplikasi lainnya. Disini API menghubungkan halaman website Pencarian Data Sekolah dengan basis data kumpulan sekolah seluruh Indonesia.

Pada aplikasi ini menampilkan data sekolah berupa jenjang, nama sekolah, alamat, kecamatan, kabupaten dan provinsi. Terdapat 3 buah pilihan pencarian yang dapat digunakan untuk menampilkan data sekolah:

  1. Pencarian seluruh data

   2. Pencarian berdasarkan jenjang, pilihan dibatasi hanya SD, SMP, SMA dan SMK

   3. Pencarian berdasarkan nama sekolah

Berita Rekomendasi

Bukan 5 M lagi, Sekarang Cara Cegah Covid-19 Dengan 10 M

11/11/2024

Bukan 5 M lagi, Sekarang Cara Cegah Covid-19 Dengan 10 M

Belakangan ini angka kasus covid-19 terus meningkat. Demi menjaga diri kita, keluarga dan orang-orang terdekat supaya semuanya tetap terlindungi, kita harus patuhi protokol kesehatan. Maka dari itu penerapan protokol kesehatan…

Lihat
Tips Tetap Produktif Selama bulan Ramadan

12/11/2024

Tips Tetap Produktif Selama bulan Ramadan

Perubahan ritme dalam beraktivitas pada bulan Ramadan membuat stamina tubuh berbeda dari hari-hari biasa. Tubuh akan terasa lemas karena asupan yang didapat hanya ketika sahur. Namun kamu masih dapat produktif…

Lihat
Secure Software Development Lifecycle (SSDL) Membangun Perangkat Lunak yang Aman

03/09/2024

Secure Software Development Lifecycle (SSDL) Membangun Perangkat Lunak yang Aman

This Is a Post Article Testing #1 [...]Read More... from Secure Software Development Lifecycle (SSDL) Membangun Perangkat Lunak yang Aman

Lihat