Biology, Medicine, & Natural Product Chemistry ISSN 2089-6514 (paper) Volume 6, Number 2, 2017 | Pages: 63-68 | DOI: 10.14421/biomedich.2017.62.63-68 ISSN 2540-9328 (online) On Designing Interactive Online Atlas of Reptile Anatomy (Mabouya multifacsiata) Muhammad Jafar Luthfi1, Riyanto2 1Biological Education Department, 2Integrated Laboratory; Faculty of Science and Technology, UIN Sunan Kalijaga Jl. Marsda Adisucipto 55281 Yogyakarta, Indonesia Author correspondency: jafarluthfi@yahoo.com1; justofeel@gmail.com2 Abstract This research is an integration between fields of Biology, Photography, Design, and Informatics Engineering. The study aimed to build an interactive online atlas of reptile anatomy to improve the accessibility and data sharing (free access) of reptile anatomy. Website was developed using SDLC (System Development Life Cycle) which consist of five steps as follows: website’s strategic planning, determine the scope of website, website’s requirements analysis, design and implementations of website, and testing. Based on the results of testing and system implementation, it can be concluded that online interactive atlas (AtlasAnatomy.org) had been successfully built as anatomical educational media of reptile. Keywords: AtlasAnatomy.org; online anatomy atlas; vertebrates; reptile; interactive atlas. INTRODUCTION Advances in information technology are increasingly made information exchange easier. Facility from information technology becomes important for supporting research and scientific activities. One of the advances in information technology is the rapid development of the Internet. Data show that the number of internet users has increased from year to year, either globally or in Indonesia (APJII, 2014). The data are shown in Figure 1. Figure 1. (A) World Internet users (Source: APJII); (B) Internet users in Indonesia (Source: statista.com). From the development of information technology, internet, and growing number of domains (detik.com), a new perspective begins in the development and distribution of science. In 2011, research on digital atlas has been done by Jones, Stone & Karten, entitled "High-resolution digital brain atlases: a Hubble telescope for the brain". This research explains the application method for digitalize microscopic part of the brain network containing normal and experimental data and to make the content easily accessible online. The results of this study can be accessed at URL www.BrainMaps.org. The predecessor http://dx.doi.org/10.14421/biomedich.2017.62.63-68 64 Biology, Medicine, & Natural Product Chemistry 6 (2), 2017: 63-68 study related to BrainMaps.org was in 2008 entitled "BrainMaps.org - Interactive High-Resolution Digital Brain Atlases and Virtual Microscopy" (Mikula S, et al, 2008). Other online atlases avalaible are anatomyatlases.org, innerbody.com, instantanatomy.net, and Biodigital.com. All the atlases are human anatomy. This study used reptile as objects in the preparation of interactive online atlas as a reference for learning source. MATERIALS AND METHODS Vertebrates include all animals that have spines. Some of the characteristics possessed by vertebrate animals are having a closed circulatory system, having a backbone in their body, having a complete digestive system, and having a bilateral symmetry body. Vertebrates consist of 5 (Five) classes, namely Pisces, Amphibians, Reptiles, Aves, and Mammals. We used Mabouya multifasciata as a representation of Reptile Class. Animal 3 lizards (Mabouya multifasciata) were used in this study. The lizards were sacrificed, dissected and photographed using Canon EOS 60D camera; Online Atlas Design For design online atlas we used computer with Intel @ 3.40GHz processor i7-4770 CPU (C) i7-4770 equipped with Microsoft Windows 8.1 Operating system software, PHP 5.3.0 programming language, Apache local web server version 2.0, MySQL Client Database Server version 5.1.37, Mozilla Firefox Web Browser version 56.0.2, Text Editor Sublime Text 3, Adobe Photoshop CS4 Extented, CorelDRAW X6; HTML, PHP, Javascript, and Image Map programming languages; Servers for data processing and storage; AtlasAnatomy.org domain name. This research was conducted at Integrated Laboratory of UIN Sunan Kalijaga Yogyakarta. Development and manufacture of interactive online atlas system using insourcing method (Mulyanto, 2008) SDLC (System Development Life Cycle) covering stages of planning, needs analysis, design, manufacture, and testing. Working procedures used in this study include Literature Studies, Data Collection & Processing, Website Design, System Testing, and System Implementation Analysis. Figure 2. AtlasAnatomy.org drafting scheme. Luthfi & Riyanto – On Designing Interactive Online Atlas of Reptile Anatomy … 65 The steps of this research were:  The first step was literature study; namely the study of theories related to animal anatomy, photography techniques, as well as the theory of website making and programming languages.  The second step was Data collection & Processing; i.e, taking pictures/images on the dissected reptile object and processing the image using software to get the image data. Organs were identified and named.  The third step was website making by way of insoursing; there are 5 (Five) stages that need to be done namely planning, needs analysis, design, manufacture, and testing.  The fourth step was system testing; there are 2 (two) tests conducted, namely alpha testing conducted directly by the research team about the functional website and beta testing conducted by the general public with a focus on the functionality and interface website. The results of this test are used as material improvement and website development.  The fifth step was system implementation; namely implementation of the website system to obtained evidence or comprehensive facts about animal anatomy website. RESULTS AND DISCUSSION Determination of Mapping Area Objects Mabouya multifasciata morphology consisted of external morphology, anterior extremities, posterior extremities, organ topography, respiratory system, male reproductive system, female reproductive system, and digestorium system. Table 1, Figure 3-Figure 7 show the segmentation of each section to create Image Map. Table 1. Division of Mabouya multifasciata Image Map area. No Anatomy System Area Mapping Objects 1 External Morphology Nares Anteriores, Thympanic membrane, Trucus, Rima oris, Caput, Squama, Orgamon visus, Cervix, Cauda, Front limb, Hind limb 2 Anterior extremities Bracium, Digit, Antebracium, Manus, Falcuna 3 Posterior extremities Femur, Digit, Crus, Pes, Falcuna 4 Organ Topography Trachea, Hepar, Hepar, Vesica fellea, Pulmo, Duadenoum, Abdominal fat 5 Respiration system Lingua bifida, Rima glottides, Trachea, Pulmo 6 Male Reproductive System Hemipenis, Epidydimis, Ren, Vas deferent, Testis 7 Female Reproductive System Ovarium, Oviduct, Embrio 8 Digestorium Hepar, Vesica fellea, Lien, Small intestine, Rectum Preparation and writing of syntax to create mapping in the Truncus section were as follows:  Image Dimensions: 950 x 364 pixels  Syntax determination of Truncus part coordinate region: Figure 3. Original images external morphology Mabouya multifasciata on the website system. 66 Biology, Medicine, & Natural Product Chemistry 6 (2), 2017: 63-68 Figure 4. Original images organ Mabouya multifasciata on website system. Figure 5. Output images with Image Map on external morphology Mabouya multifasciata on the website system. (A). Caput; (B). Truncus; (C). Cervix; (D). Cauda; (E). Digiti; (F). Antebracium; (G). Manus; (H). Bracium; (I). Crus; (J). Femur; (K). Falcuna; (L). Pes. Figure 6. Output images with Image Map on Mabouya multifasciata on the website system. (A). Duodenoum; (B). Abdominal fat; (C). Hepar; (D). Pulmo; (E). Lingua bifida; (F). Pulmo. Luthfi & Riyanto – On Designing Interactive Online Atlas of Reptile Anatomy … 67 Figure 7. Output images with Image Map on Mabouya multifasciata on the website system. (A). Trachea; (B). Rima glottidis; (C). Rectum; (D). Small intestine; (E). Lien; (F). Hepar; (G). Hemipenis; (H). Testis; (I). Epidydimis; (J). Vas deferent; (K). Oviduct; (L). Ovarium. The anatomical photographs of reptile in this study had successfully arranged for online access. Goubran & Vinjamury (2007) stated that online atlas is an effective way for student learning. CONCLUSION Based on the results of the study we concluded that this research has succeeded in establishing an interactive anatomy of reptile anatomy available online (AtlasAnatomy.org). ACKNOWLEDGEMENTS This research is supported and funded by Institute for Research and Community Service (LP2M) UIN Sunan Kalijaga fiscal year 2017. REFERENCES Arfian, Gilang. 2009. Dasar-Dasar Pemrograman Web. ElexMedia. Jakarta: Komputindo. Asosiasi Penyelenggara Jasa Internet Indonesia. 2015. Profil Pengguna Internet Indonesia 2014. Jakarta: Puskakom UI. Asosiasi Penyelenggara Jasa Internet Indonesia. Infografis Penetrasi & Perilaku Pengguna Internet Indonesia Survey 2016. Retrieved from https://apjii.or.id/survei2016 at 7 March 2017, time 13.33 WIB Bunafit, Nugroho. 2004. Cascading Style Sheets (CSS). Yogyakarta: Andi. Bunafit, Nugroho.. Database Relational Dengan MySQL. Yogyakarta: Andi. Detik. Pengguna Internet 2.4 miliar, Jumlah Situs Tembus 634 Juta. Retrieved from http://inet.detik.com/read/2013/01/21/081040/2147888/398/pe ngguna-internet-24-miliar-jumlah-situs-tembus-634-juta at 27 November 2015, time 18.27 WIB Flanagan, David. 2011. JavaScript: The Definitive Guide (6th ed.). O'Reilly & Associates Goubran, E.Z., S. P. Vinjamury. 2007. Interactive Atlas of Histology A Tool for Self-Directed Learning, Practice, and Self-Assessment. The Journal of Chiropractic Education 21 (1): 13-18. Hariyanto, Bambang. 2004. Sistem manajemen basis data. Bandung: Informatika. Janner. 2009. Pengantar Sistem dan Teknologi Informasi. AMUS. Yogyakarta. Jones, E. G., Stone, J. M. and Karten, H. J. (2011), High- resolution digital brain atlases: a Hubble telescope for the brain. Annals of the New York Academy of Sciences, 1225: E147–E159. doi: 10.1111/j.1749-6632.2011.06009.x Kadir, Abdul. 2005. Pengenalaan Teknologai Informasi. Yogyakarta: Andi Mikula S, Stone JM, Jones EG (2008). BrainMaps.org - Interactive High-Resolution Digital Brain Atlases and Virtual Microscopy. In: Lorenz S, Egelhaaf M (eds): Interactive Educational Media for the Neural and Cognitive Sciences. Brains, Minds & Media, Vol. 3, bmm1426. (urn:nbn:de:0009- 3-14269) 68 Biology, Medicine, & Natural Product Chemistry 6 (2), 2017: 63-68 Mulyanto, A., 2008. Sistem Informasi Konsep dan Aplikasi. Yogyakarta: Pustaka Pelajar. Peranginangin, Kasiman. 2006. Aplikasi Web dengan PHP dan MySQL. Yogyakarta: Andi. Ramadhan, A. 2008. Pemrograman Web dengan Html, CSS dan Javascript. Jakarta: Elexmedia Komputindo. Sidik, Betha. 2009. .Pemrograman Web dengan HTML. Bandung: Informatika Bandung. Statista. Number of worldwide internet users from 2000 to 2015. Retrieved from http://www.statista.com/statistics/273018/number-of-internet- users-worldwide/ at 19 November 2015, time 14.33 WIB. Suntoro, Susilo Handari, dkk. 1994. Anatomi Hewan. Jakarta: Universitas Terbuka. Sunyoto, Andi. 2007. Ajax Membangun Web dengan Teknologi Asynchronouse JavaScript & XML, Yogyakarta: Andi. www.w3school.com www.php.net