Web Pencarian Data Sekolah dengan HTML, CSS & JS

Web School Data Search with HTML, CSS & JS

There is an opportunity this time I will discuss how to make a simple menu for searching school data throughout Indonesia using HTML, CSS, JAVASCRIPT and AJAX. Next us Describe the use of HTML to create a web page with the elements used, including:

1. Heading. 

Used to create titles on web pages. Example code implementation:

School Data Throughout Indonesia

2. Select Tag.

Used to create dropdown lists. This element is commonly used in forms for input by users. Example code implementation:

   All data by level based on school name

3. Tabel.

Used to display a list of data on a website page can be in the form of a table. Example code implementation:

LadderSchool NameAddressDistrictKabupatenProvinsi
4. Input text

Used by users to enter data in the form of text. As an input system in data processing. Example code implementation:

5. Button/Tombol

Used as a trigger to process a function. In this application, the button is used to trigger the process of searching for school data. Example code implementation:

value=”Cari Sekolah”>                                                 

     CSS (Cascading Style Sheets) is usually paired with HTML which is used to change the appearance of a web-based application. CSS has several frameworks that function to make it easier for developers to create web-based application designs. In this application I use the Bootstrap framework. One way to insert the CSS Bootstrap Framework is by using the CDN inserted in the

in HTML. Here's the code implementation:

     Javascript is a programming language used to make the interaction on the pages of a website dynamic. While jquery is a javascript library that will make the process of creating a website faster and simpler. The way to use jquery is to insert it into the

in HTML. As follows:

[removed]

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

For the school data itself, I take it from the Indonesian School Data API sourced from github. 

     API (Application Programming Interface) is an interface that connects one application to another. Here the API connects the School Data Search website page with a database of school collections throughout 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. Search across the data

   2. Search by level, the choice is limited to elementary, junior high, high school and vocational school

   3. Search by school name

Berita Rekomendasi

Apa itu Beanstalkd?

12/11/2024

What is Beanstalkd?

Beanstalkd is a work queue solution designed to manage workflows and tasks between parts and workers in application implementation. As a TCP protocol-based tool, it offers a simple approach...

View
Unlocking Real-Time Insights with Metabase

24/07/2025

Unlocking Real-Time Insights with Metabase

Apa Itu Metabase? Metabase adalah platform open-source Business Intelligence (BI) yang memungkinkan siapa saja di dalam organisasi—teknis maupun non-teknis—untuk mengakses, mengeksplorasi, dan mengambil keputusan berbasis data secara real-time. Dengan tampilan…

View
Apache Flink untuk pemprosesan Data Real-Time

02/07/2025

Apache Flink untuk pemprosesan Data Real-Time

Optimalkan Bisnis dengan Pemrosesan Data Real-Time Menggunakan Apache Flink Di era data yang bergerak cepat, bisnis tidak hanya dituntut untuk mengumpulkan data, tetapi juga memproses dan memanfaatkannya secara real-time. Setiap…

View