{"id":27437516,"url":"https://github.com/denatajp/ajax-html","last_synced_at":"2025-04-14T20:29:34.200Z","repository":{"id":286056397,"uuid":"850569179","full_name":"denatajp/AJAX-html","owner":"denatajp","description":"Manipulate the DOM on a web page and receive data asynchronously from the server by utilizing AJAX in Javascript.","archived":false,"fork":false,"pushed_at":"2024-09-01T07:13:41.000Z","size":346,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T05:19:10.514Z","etag":null,"topics":["ajax","html","javascript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/denatajp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-01T06:40:15.000Z","updated_at":"2024-09-01T07:13:44.000Z","dependencies_parsed_at":"2025-04-04T05:29:15.548Z","dependency_job_id":null,"html_url":"https://github.com/denatajp/AJAX-html","commit_stats":null,"previous_names":["denatajp/ajax-html"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denatajp%2FAJAX-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denatajp%2FAJAX-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denatajp%2FAJAX-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denatajp%2FAJAX-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denatajp","download_url":"https://codeload.github.com/denatajp/AJAX-html/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248954963,"owners_count":21188894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","html","javascript"],"created_at":"2025-04-14T20:29:33.651Z","updated_at":"2025-04-14T20:29:34.187Z","avatar_url":"https://github.com/denatajp.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![label](https://img.shields.io/badge/Javascript-orange?style=for-the-badge\u0026logo=javascript)\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n\n# Asynchronous Web using AJAX\nThis project is a website that showcases various musical instruments, utilizing AJAX to dynamically load data without needing to refresh the page. AJAX (Asynchronous JavaScript and XML) allows for asynchronous data retrieval from the server, enabling users to view and filter products seamlessly without interruption.\n\nAJAX is used in this project to fetch musical instrument data from a JSON file (data/data-alat.json) and display it on the webpage without reloading the entire page. With AJAX, content changes such as filtering based on instrument type can be performed quickly and efficiently, only updating the relevant parts of the page.\n\n# How AJAX Enhances User Experience\n\n![ajax](https://github.com/user-attachments/assets/ffd30f1d-0d8b-4c48-848b-ed61693451e9)\n\n- **No Full Page Reloads**: With AJAX, users can interact with the website—such as filtering or searching for products—without the page needing to reload completely. This leads to a smoother and faster browsing experience.\n- **Dynamic Content Loading**: AJAX enables the website to load new content, such as different instrument categories, directly into the page without disrupting the user’s session.\n- **Efficient Data Handling**: By using AJAX, the website only requests the necessary data from the server, reducing bandwidth usage and improving performance.\n\n# Example AJAX Implementation\nHere is an example of how AJAX is used to retrieve and display musical instrument data:\n```javascript\nfunction tampilSemuaAlat() {\n    $.getJSON('data/data-alat.json', function (data) {\n        let alat = data.alat;\n        \n        $('#product-list').empty();\n\n        $.each(alat, function (i, data) {\n            $('#product-list').append(`\u003cdiv class=\"col-md-4 d-flex align-items-stretch\"\u003e\n                \u003cdiv class=\"card my-2\"\u003e\n                  \u003cimg class=\"card-img-top\" src=\"img/` + data.gambar + `\"\u003e\n                  \u003cdiv class=\"card-body\"\u003e\n                    \u003ch5 class=\"card-title\"\u003e` + data.nama + `\u003c/h5\u003e\n                    \u003cp class=\"card-text\"\u003e` + data.deskripsi + `\u003c/p\u003e\n                    \u003ch5 class=\"card-title\"\u003eRp. ` + data.harga.toLocaleString('id-ID') + `\u003c/h5\u003e\n                    \u003chr\u003e\n                    \u003ca href=\"#\" class=\"btn btn-primary\"\u003eBeli Sekarang\u003c/a\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e`);\n        });\n    });\n}\n\ntampilSemuaAlat();\n```\nIn the code above, AJAX is used with jQuery to retrieve data from data/data-tools.json. The results are then processed and displayed dynamically in the #product-list element without reloading the page.\n\n# Filtering Products with AJAX\nUsers can also filter musical instruments by type. Here is an example of how AJAX is used to reload the displayed products based on the selected filter:\n```javascript\n$('.dropdown-item').on('click', function () {\n    $('.dropdown-item').removeClass('active');\n    $(this).addClass('active');\n\n    let jenisAlat = $(this).html();\n\n    if (jenisAlat == 'All') {\n        tampilSemuaAlat();\n        return;\n    }\n\n    $.getJSON('data/data-alat.json', function (data) {\n        let alat = data.alat;\n        let content = '';\n        $.each(alat, function (i, data) {\n            if (data.jenis == jenisAlat.toLowerCase()) {\n                content += `\u003cdiv class=\"col-md-4 d-flex align-items-stretch\"\u003e\n                    \u003cdiv class=\"card my-2\"\u003e\n                    \u003cimg class=\"card-img-top\" src=\"img/` + data.gambar + `\"\u003e\n                    \u003cdiv class=\"card-body\"\u003e\n                        \u003ch5 class=\"card-title\"\u003e` + data.nama + `\u003c/h5\u003e\n                        \u003cp class=\"card-text\"\u003e` + data.deskripsi + `\u003c/p\u003e\n                        \u003ch5 class=\"card-title\"\u003eRp. ` + data.harga.toLocaleString('id-ID') + `\u003c/h5\u003e\n                        \u003chr\u003e\n                        \u003ca href=\"#\" class=\"btn btn-primary\"\u003eBeli Sekarang\u003c/a\u003e\n                    \u003c/div\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e`;\n            }\n        });\n\n        $('#product-list').html(content);\n    });\n});\n```\nThis code shows how AJAX is used to retrieve data that matches the filters selected by the user and update the page content without reloading the entire page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenatajp%2Fajax-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenatajp%2Fajax-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenatajp%2Fajax-html/lists"}