{"id":8313,"date":"2025-09-10T15:30:43","date_gmt":"2025-09-10T07:30:43","guid":{"rendered":"https:\/\/people.utm.my\/shahabuddin\/?p=8313"},"modified":"2025-09-10T15:30:43","modified_gmt":"2025-09-10T07:30:43","slug":"the-making-of-the-kalkulator-musafir-waktu-solat-web-app","status":"publish","type":"post","link":"https:\/\/people.utm.my\/shahabuddin\/?p=8313","title":{"rendered":"The Making of the &#8220;Kalkulator Musafir &amp; Waktu Solat&#8221; Web App"},"content":{"rendered":"<p>For the Muslim traveler, a journey of more than 81 kilometers is not just a change of location; it&#8217;s a transition into the state of a &#8216;musafir&#8217;, a traveler granted special dispensations in their prayer obligations. However, planning for these religious duties on the road can be a fragmented process, involving separate tools for distance calculation, prayer time lookups, and understanding the intricate rules of combining (jamak) and shortening (qasar) prayers.<\/p>\n<p>To address this, we developed the <b>Kalkulator Musafir &amp; Waktu Solat<\/b>, a unified, all-in-one web application designed specifically for Muslim travelers in Malaysia. This tool seamlessly integrates route planning with essential Islamic prayer information, providing clarity and confidence for any journey.<\/p>\n<p>&nbsp;<\/p>\n<h4><b>What is the &#8220;Kalkulator Musafir &amp; Waktu Solat&#8221;?<\/b><\/h4>\n<p>&nbsp;<\/p>\n<p>At its core, the application is a smart travel assistant. It solves a multi-step problem with a single, intuitive interface. Users can enter their departure and destination locations, and the app instantly provides three critical pieces of information:<\/p>\n<ol start=\"1\">\n<li><b>Travel Distance &amp; Musafir Status:<\/b> It calculates the estimated road distance and immediately determines if the user qualifies as a &#8216;musafir&#8217;.<\/li>\n<li><b>Accurate Prayer Times:<\/b> It provides location-specific prayer times for both the start and end points of the journey.<\/li>\n<li><b>Practical Fiqh Guidance:<\/b> It offers clear, actionable suggestions for performing jamak and qasar prayers, along with a handy, accordion-style guide to the underlying Islamic jurisprudence (fiqh).<\/li>\n<\/ol>\n<p>The entire experience is bilingual (Bahasa Melayu and English) and wrapped in a modern, mobile-friendly design that presents complex information in a simple and digestible format.<\/p>\n<p>&nbsp;<\/p>\n<h4><b>How It&#8217;s Used: A Traveler&#8217;s Workflow<\/b><\/h4>\n<p>&nbsp;<\/p>\n<p>Using the application is a straightforward process designed to deliver information quickly:<\/p>\n<ol start=\"1\">\n<li><b>Input Locations:<\/b> The user starts by typing their departure and destination locations into the clearly labeled input fields. For added convenience, a &#8220;Use Current Location&#8221; button allows them to instantly populate the starting point using their device&#8217;s GPS.<\/li>\n<li><b>Calculate:<\/b> With a single click on the &#8220;Kira Jarak &amp; Waktu Solat&#8221; (Calculate Distance &amp; Prayer Times) button, the application&#8217;s engine gets to work.<\/li>\n<li><b>View Results:<\/b> In seconds, the results are displayed in a series of informative cards:\n<ul>\n<li>First, a prominent card shows the <b>total distance<\/b> and confirms their <b>musafir status<\/b>.<\/li>\n<li>Next, an <b>interactive map<\/b> visualizes the calculated route.<\/li>\n<li>Below the map, two distinct cards display the official <b>JAKIM prayer times<\/b> for both the departure and destination locations. A subtle notification, &#8220;Menyemak data JAKIM&#8230;&#8221;, appears momentarily, informing the user that the system is fetching live, official data.<\/li>\n<li>Finally, a detailed card provides tailored <b>suggestions for Jamak &amp; Qasar prayers<\/b>, outlining which prayers can be combined or shortened.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>For those seeking deeper knowledge, a comprehensive section at the bottom explains the key rules and conditions of a musafir&#8217;s prayer, all neatly organized into expandable sections.<\/p>\n<p>&nbsp;<\/p>\n<h4><b>The Technology Behind the Tool<\/b><\/h4>\n<p>&nbsp;<\/p>\n<p>The application&#8217;s power lies in its intelligent integration of several modern web technologies and external APIs, all orchestrated with vanilla JavaScript. No heavy frameworks were needed, making the app lightweight and fast.<\/p>\n<ul>\n<li><b>User Interface &amp; Styling:<\/b> The front-end is built with <b>HTML<\/b> and styled using <b>Tailwind CSS<\/b>. This utility-first framework allows for rapid development of a responsive, modern interface. The &#8220;glassmorphism&#8221; effect on the cards provides a sleek, contemporary feel, while the <b>Lucide Icons<\/b> library offers clean and clear iconography.<\/li>\n<li><b>Geocoding &amp; Location Services:<\/b> To convert user-inputted location names (like &#8220;Johor Bahru&#8221;) into precise geographic coordinates (latitude and longitude), the application utilizes the free and open <b>Nominatim API<\/b>, which is based on OpenStreetMap data.<\/li>\n<li><b>Routing &amp; Distance Calculation:<\/b> The core distance calculation is powered by the <b>Open Source Routing Machine (OSRM) API<\/b>. This powerful engine computes the most efficient driving route between two coordinate points and returns not only the distance but also the geometric data needed to draw the route on a map.<\/li>\n<li><b>Interactive Mapping:<\/b> The route visualization is handled by <b>Leaflet.js<\/b>, a lightweight and mobile-friendly open-source library for interactive maps. The map tiles themselves are from <b>CartoDB<\/b>, providing a dark, stylish theme that matches the application&#8217;s aesthetic.<\/li>\n<li><b>Prayer Time Engine:<\/b> This is the most critical and layered component:\n<ul>\n<li><b>Primary Source (JAKIM):<\/b> The application&#8217;s first priority is to provide official data. It dynamically finds the nearest official <b>JAKIM prayer time zone<\/b> based on the location&#8217;s coordinates. It then makes an API call to the <code>e-solat.gov.my<\/code> portal to fetch the official, authoritative prayer times for that day.<\/li>\n<li><b>Fallback Source (Hisab):<\/b> In cases where a location is outside of a defined JAKIM zone (e.g., outside Malaysia) or if the JAKIM API fails, the application uses <b>Adhan.js<\/b>. This robust JavaScript library performs astronomical calculations to determine prayer times based purely on the given latitude and longitude, serving as a reliable backup.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>By combining these technologies, the &#8220;Kalkulator Musafir &amp; Waktu Solat&#8221; transforms a complex planning task into a simple, elegant, and empowering experience for the modern Muslim traveler.<\/p>\n<p><a href=\"https:\/\/dev.kstutm.com\/musafir2\">https:\/\/dev.kstutm.com\/musafir2<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For the Muslim traveler, a journey of more than 81 kilometers is not just a change of location; it&#8217;s a transition into the state of a &#8216;musafir&#8217;, a traveler granted special dispensations in their prayer obligations. However, planning for these religious duties on the road can be a fragmented process, involving separate tools for distance [&hellip;]<\/p>\n","protected":false},"author":6946,"featured_media":8305,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[1285,111,25,110],"tags":[1209,163,1295],"class_list":["post-8313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-project","category-public","category-research","tag-coding","tag-development","tag-musafir"],"uagb_featured_image_src":{"full":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/09\/Screenshot-2025-09-08-at-10.36.19-PM.png",1125,840,false],"thumbnail":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/09\/Screenshot-2025-09-08-at-10.36.19-PM-150x150.png",150,150,true],"medium":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/09\/Screenshot-2025-09-08-at-10.36.19-PM-300x224.png",300,224,true],"medium_large":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/09\/Screenshot-2025-09-08-at-10.36.19-PM-768x573.png",640,478,true],"large":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/09\/Screenshot-2025-09-08-at-10.36.19-PM-1024x765.png",640,478,true],"1536x1536":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/09\/Screenshot-2025-09-08-at-10.36.19-PM.png",1125,840,false],"2048x2048":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/09\/Screenshot-2025-09-08-at-10.36.19-PM.png",1125,840,false],"slider-thumb":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/09\/Screenshot-2025-09-08-at-10.36.19-PM-542x352.png",542,352,true],"pop-thumb":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/09\/Screenshot-2025-09-08-at-10.36.19-PM-542x340.png",542,340,true]},"uagb_author_info":{"display_name":"Dr. Shah","author_link":"https:\/\/people.utm.my\/shahabuddin\/?author=6946"},"uagb_comment_info":0,"uagb_excerpt":"For the Muslim traveler, a journey of more than 81 kilometers is not just a change of location; it&#8217;s a transition into the state of a &#8216;musafir&#8217;, a traveler granted special dispensations in their prayer obligations. However, planning for these religious duties on the road can be a fragmented process, involving separate tools for distance&hellip;","_links":{"self":[{"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/posts\/8313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/users\/6946"}],"replies":[{"embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8313"}],"version-history":[{"count":1,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/posts\/8313\/revisions"}],"predecessor-version":[{"id":8314,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/posts\/8313\/revisions\/8314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/media\/8305"}],"wp:attachment":[{"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}