International Journal of Computer and Information System (IJCIS) Peer Reviewed Ae International Journal Vol : Vol.
Issue 01.
January 2025 e-ISSN : 2745-9659 https://ijcis.
net/index.
php/ijcis/index Information System for Batik Small and Medium Enterprises (SME.
: Implementation of 3D Maps as a Means of Promotion and Ease of Access to Information 1st Dwi Wahyuningrum, 2st Oktavia Dewi Alfiani, 3th Nasrul Arfianto Department of Geomatics Engineering, 3Department of Civil Engineering Universitas Pembangunan Nasional Veteran Yogyakarta, 3Universitas Cokroaminoto Yogyakarta Yogyakarta.
Indonesia wahyuningrum@upnyk.
id, 2oktavia.
dewi@upnyk.
id, 3nasrularfianto@gmail.
AbstractAi Competition to improve and optimize existing systems to achieve targeted results in an industrial ecosystem is increasingly fierce.
This also applies to the Micro.
Small, and Medium Enterprises (MSME.
in Yogyakarta's batik industry.
From the consumer's perspective, access to location information is crucial for evaluating the conditions and products of MSMEs.
On the other hand, for MSMEs, an increase in consumer visits translates to higher sales.
Facilitating the availability of information is a key strategy to attract more visitors to MSMEs, both through direct visits to physical stores and virtually via online shopping platforms.
One critical type of information is spatial data .
pace/positio.
, which consumers use to locate MSMEs.
A technological approach, such as website-based spatial access, is expected to meet this need.
This study aims to enhance the accessibility of information for all stakeholders, including consumers and other participants in the batik industry It also enables batik MSMEs to optimize promotional strategies, increasing visitor numbers and product sales.
This research applied the concept of 3-dimensional visualization to represent the locations of Batik MSMEs in Yogyakarta City and developed an information system for these businesses.
The data includes spatial data and attributes, such as a list of MSMEs and detailed information.
The information system was developed by integrating MSME location data with MapboxGL .
web app servic.
to provide a realistic 3D visualization of MSME locations.
The final output is a websitebased information system freely accessible online to various stakeholders, including consumers, policymakers, and Keywords: Batik.
MSME.
Geospatial Information System, 3D Map, geo-visualization INTRODUCTION The rapid development of technology and information has become integral to daily activities, supporting various industries in innovating and optimizing existing systems to achieve targeted results .
Ae.
This phenomenon is also evident in the Micro.
Small, and Medium Enterprises (MSME.
of the batik industry .
Ae.
Yogyakarta has many MSMEs spread across various regions, with batik MSMEs being a favorite among the public.
, .
, .
Despite this, many batik MSMEs still rely on offline promotion through physical stores, while others have started leveraging social media and e-commerce platforms.
From the consumerAos perspective, access to location information is essential for assessing the conditions and products of these MSMEs.
Optimally packaged information could attract more consumers to visit physical stores or explore online platforms .
Ae.
Facilitating access to information is a crucial strategy to increase visits to MSMEs, whether directly .
o physical store.
or virtually .
ia online shopping Spatial data, such as the geographical location of MSMEs, plays a critical role in enhancing the visibility of these businesses.
The concept of geovisualization, particularly in 3-dimensional .
D) formats, offers a promising alternative to improve the Journal IJCIS homepage - https://ijcis.
net/index.
php/ijcis/index visual appeal and promotional value of such information .
, .
Through geovisualization, consumers can physically visit or view photos/videos of batik MSMEs online and visualize the exact locations of these businesses.
The integration of 3D geovisualization into GIS offers additional advantages .
Ae.
By incorporating elevation data and realistic visual models, 3D geovisualization enhances user engagement and provides more comprehensive insights .
, .
Recent advancements in software tools, such as QGIS with the Qgis2threejs plugin, have made it possible to create interactive 3D models accessible through web platforms.
This study aims to apply 3D geo-visualization concepts to the locations of batik MSMEs in Yogyakarta City and to develop a website-based information system for these businesses.
The expected benefits include creating a modern promotional method that simplifies access to information for consumers and other stakeholders within the batik industry ecosystem.
Accessible and comprehensive information is anticipated to enhance the marketing effectiveness of YogyakartaAos batik MSMEs, ultimately increasing visits and sales.
Page 24 International Journal of Computer and Information System (IJCIS) Peer Reviewed Ae International Journal Vol : Vol.
Issue 01.
January 2025 e-ISSN : 2745-9659 https://ijcis.
net/index.
php/ijcis/index II.
RESEARCH METHODS
1 Materials and Tools The materials used in this study included a sample dataset from 24 batik MSMEs in Yogyakarta City, such as Gee Batik.
Puji Batik Antik, and Batik Canting Mas.
The tools used for system development included:
Hardware:
Laptop with Intel i5-1135G7 processor, 24 GB RAM, and 512 GB storage.
Software:
Windows 11 as the operating system.
XAMPP version 8 for local server deployment.
MySQL as the database server.
PHP version 8 and Laravel version 9 as the programming framework.
Visual Studio Code as the programming editor.
Mapbox GL for 3D map visualization.
QGIS 3.
10 with the QGIS2ThreeJs plugin for 3D visualization.
Balsamiq for interface design.
Google Chrome as the web browser.
1 Data Collection Data was collected through online and field surveys, supplemented with interviews to gather information on 24 batik MSME locations.
The data included MSME names, geographic coordinates .
atitude and longitud.
, addresses, and business scale of each MSME.
The data was converted into shapefiles and enriched with attribute information, enabling detailed visualizations of each MSME location.
2 Interface Design The interface was designed using Balsamiq, a prototyping tool for creating wireframes of user The homepage was designed to display a 3D visualization of MSME locations using QGIS2ThreeJs and provide online map-based route information.
Features included options for users to view MSME details, reset the interface, and access navigation routes.
2 Procedures Figure 2.
3D Visualization Homepage Design for Batik MSMEs The admin uses the admin login form to access the system.
This form consists of two fields: one for entering an email address and another for the password, along with a sign-in button to execute the login The design of this login form can be seen in Figure 3.
Figure 1.
Research Flowchart Journal IJCIS homepage - https://ijcis.
net/index.
php/ijcis/index Figure 3.
Design Admin Login Form The homepage on the dashboard is designed to provide an overview and quick access to the website's main The homepage design can be seen in Figure 4.
The admin data page is where the admin can manage information related to administrators.
This page Page 25 International Journal of Computer and Information System (IJCIS) Peer Reviewed Ae International Journal Vol : Vol.
Issue 01.
January 2025 e-ISSN : 2745-9659 https://ijcis.
net/index.
php/ijcis/index displays details such as the admin's name and email.
The design of the admin data page can be seen in figure Figure 6.
Business Scale Data Page Design Figure 4.
Homepage Design Figure 7.
Batik Data Page Design Figure 5.
Admin Data Page Design The admin uses the business scale data page to manage available business scale information.
This page only displays the details of the business scale names.
The design of the business scale data page can be seen in Figure 6.
The admin uses the batik data page to manage batik-related information.
This page displays the batik name, coordinates, address, and business The design of the batik data page can be seen in Figure 7.
3 3D Visualization The 3D visualization of MSME locations was created using QGIS software and the QGIS2ThreeJs plugin, which supports WebGL technology and the JavaScript library Three.
The exported 3D visualization results (Figure .
were integrated into the WebGIS system, enabling users to access spatial information online.
Figure 8.
Creation of 3D Visualization of MSME Distribution Using qgis2threejs 4 Coding and Web Development The systemAos backend was developed using PHP and Laravel.
Initial steps included creating a Laravel project, setting up the database, and establishing Journal IJCIS homepage - https://ijcis.
net/index.
php/ijcis/index Page 26 International Journal of Computer and Information System (IJCIS) Peer Reviewed Ae International Journal Vol : Vol.
Issue 01.
January 2025 e-ISSN : 2745-9659 https://ijcis.
net/index.
php/ijcis/index connectivity with PHPMyAdmin.
The MVC (ModelView-Controlle.
architecture guided the development, with controllers managing data flow and views handling the user interface.
Mapbox API integration enabled interactive maps, while routes were configured to support admin and public interfaces.
The completed system was uploaded to a hosting service via CPanel for public accessibility.
5 System Testing System testing comprised usability and Usability Testing: Conducted with 30 respondents using a Likert scale questionnaire to assess user satisfaction and system effectiveness.
Table 1.
Admin Questions System Testing Question Options The system can improve Skala Likert:
of 1 = Strongly batik disagree 2 = Disagree The system makes it easier 3 = Neutral for the admin to manage 4 = Agree 5 = Strongly batik data.
The system helps the Agree admin in mapping batik The system meets the admin's expectations.
The system can be operated with minimal The system can be used without difficulty.
The system can be used easily, both in occasional and routine situations.
The admin learns quickly how to use the system.
The information delivery is easy to understand and 10 The admin is satisfied with the system.
Table 2.
User Questions System Testing Question Options This system has provided Skala Likert:
the accurate information 1 = Strongly needed by users.
The system makes it easier 2 = Disagree for guests to view routes.
3 = Neutral The system meets the 4 = Agree guests' expectations.
Journal IJCIS homepage - https://ijcis.
net/index.
php/ijcis/index The system can be 5 = Strongly operated with minimal Agree actions required.
The system can be used without difficulty.
The system can be easily used in both occasional and routine situations.
Users learn quickly how to use the system.
The information delivery is easy to understand and Users are satisfied with the Functional Testing (Blackbox Testin.
Evaluated system functionalities, including login verification, data input for admin and MSMEs, and map display.
Test scenarios ensured the system met the expected data accuracy and usability criteria.
RESULT AND ANALYSIS
1 Batik MSME Locations in Yogyakarta This study identified the distribution of 24 Batik MSMEs in Yogyakarta City.
The location data was collected through online and field surveys and interviews with MSME owners.
The MSME locations were presented in shapefile format, which included key attributes such as the MSME name, address, geographic coordinates, and business scale.
Data processing results revealed that Batik MSMEs are distributed across various strategic areas in Yogyakarta City, with some locations clustered closely, making them easily accessible to consumers.
This location information served as the basis for creating 3D visualizations and integrating them into a web-based information system.
2 Batik MSME Information System Based on 3D Mapping Creating a 3D map visualization began with incorporating spatial data into Geographic Information System (GIS) software.
Quantum GIS, and integrating it with available attribute data.
The 3D visualization was developed using QGIS software and the QGIS2ThreeJS plugin .
This plugin supports 3D visualization using WebGL technology and the JavaScript library three.
The visualization process started by importing a base map to identify building shapes for each MSME The base map was Open Street Map, obtained via the Open Layers plugin in the same software.
Digitization was performed by geometrically defining Page 27 International Journal of Computer and Information System (IJCIS) Peer Reviewed Ae International Journal Vol : Vol.
Issue 01.
January 2025 e-ISSN : 2745-9659 https://ijcis.
net/index.
php/ijcis/index areas to represent 2D building outlines.
To create the 3D model, building height data was added as an attribute for each feature.
Using the QGIS2ThreeJS plugin, extrusion was applied based on the building height values.
Blue was selected as the color to represent the 3D shapes of the Batik MSME buildings.
Figure 9.
3D Visualization of MSME Distribution 3 Information System Result The Batik MSME distribution information system is named UBAJO (UMKM Batik Jogj.
(Figure .
This web-based system includes a 3D visual map that highlights business locations.
The resulting display is interactive, featuring representations of business This functionality lets users quickly locate businesses and access comprehensive details about Batik MSMEs.
Users can interact with the map through zooming, dragging, and rotating.
On the left side of the interface, there are two icons for modifying the display.
The first icon, resembling a stack of layers, allows users to adjust the opacity of each data layer.
The second icon provides navigation information to guide users in interacting with the map canvas.
The name UBAJO was chosen for its simplicity and It is an acronym for UMKM Batik Jogjakarta, making it both straightforward and representative of the system's primary purpose.
The system is designed as a foundational tool, allowing for future enhancements and expanded functionalities.
new features are added, the system's name may also evolve to reflect these updates.
VI.
CONCLUSION
The advancement of technology and information has enabled improvements in the presentation of information, including geospatial information.
This concept has been successfully implemented to present information about the locations of Batik SMEs in Yogyakarta City.
By integrating spatial and non-spatial data, this information system not only provides an appealing visual representation but also delivers information that is more accessible and understandable for various stakeholders.
A web-based information system featuring 3D geospatial models has been developed to enhance the process of presenting integrated spatial and non-spatial information.
Through this system, users can easily explore the locations of Batik SMEs virtually, view detailed information, and obtain routes to their desired destinations.
This research is expected to serve as an initial step toward developing geo-visualization applications to enhance the promotion and development of the Batik industry in Yogyakarta.
THANK-YOU NOTE
We sincerely thank our research team for their hard work, dedication, and collaboration throughout our Your expertise and commitment were invaluable in successfully creating the 3D Map-Based Information System for Batik MSMEs to enhance consumer information accessibility.
We also appreciate the support and encouragement from all stakeholders, including the MSME owners, who generously provided the data and insights necessary for this research.
Your contributions have made this project meaningful and impactful.
REFERENCES