PERANCANGAN WEBSITE BERBASIS HTML DAN CSS SEBAGAI MEDIA INFORMASI BATIK JAWA

(1)

PERANCANGAN WEBSITE BERBASIS HTML DAN CSS SEBAGAI MEDIA INFORMASI BATIK JAWA

WEBSITE DESIGN BASED ON HTML AND CSS AS INFORMATIONMEDIA FOR JAVANESE BATIK

LAPORAN KERJA PRAKTIK

Diajukan untuk memenuhi persyaratan Sarjana Strata Satu (S-1) Program Studi Teknik Elektro

Fakultas Teknik

Universitas Kristen Maranatha Disusun Oleh:

MICHAEL CLADIUS POLTAK PINTUBATU 1822023

PROGRAM STUDI TEKNIK ELEKTRO FAKULTAS TEKNIK

UNIVERSITAS KRISTEN MARANATHA BANDUNG

2021

(2)

i

Universitas Kristen Maranatha

KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Kuasa, karena atas rahmat-Nya penulis dapat menyelesaikan laporan kerja praktik yang berjudul “PERANCANGAN WEBSITE BERBASIS HTML DAN CSS SEBAGAI MEDIA INFORMASI BATIK JAWA” untuk memenuhi persyaratan kelulusan Program Studi Sarjana Strata Satu (S1) Program Studi Teknik Elektro, Fakultas Teknik, Universitas Kristen Maranatha, Bandung.

Telah terselesaikannya laporan kerja praktik ini tidak lepas dari bantuan, motivasi, bimbingan, dan doa dari semua pihak baik secara langsung maupun tidak langsung. Penulis ingin menyampaikan ucapan terimakasih kepada :

1. Lamcio Pintu Batu dan Tetty Butar-butar selaku orang tua saya yang selalu mendukung saya dalam menyelesaikan laporan kerja praktik ini.

2. Heri Ardianto, S.T., M.T. selaku ketua program studi Teknik Elektro Universitas Kristen Maranatha.

3. Dr. Ratnadewi, S.T., M.T. selaku dosen pembimbing Kerja Praktik.

4. Ir. Audyati Gani, M.Si. selaku koordinator Kerja Praktik.

5. Ir. Yohana Susanthi, M.Sc. selaku dosen wali.

6. Daniel Alfagrace Manurung selaku rekan dalam mengerjakan Kerja Praktik.

Akhir kata, penyusun berharap Kerja Praktik ini dapat memberikan sumbangan nyata bagi kemajuan Teknik Elektro pada khususnya, dan bagi pihak yang memerlukan.

Bandung, Januari 2022 Penyusun,

Michael Cladius P. Pintu Batu

NRP : 1822023

(3)

ii

Universitas Kristen Maranatha

LEMBAR PENGESAHAN

PERANCANGAN WEBSITE BERBASIS HTML DAN CSS SEBAGAI MEDIA INFORMASI BATIK JAWA

WEBSITE DESIGN BASED ON HTML AND CSS AS INFORMATION MEDIA FOR JAVANESE BATIK

LAPORAN KERJA PRAKTIK

Disusun Oleh:

MICHAEL CLADIUS POLTAK PINTU BATU 1822023

DANIEL ALFAGRACE MANURUNG 1822035

Kerja Praktik ini telah diterima dan disahkan untuk memenuhi persyaratan Sarjana Strata Satu (S-1)

Program Studi Teknik Elektro Fakultas Teknik

Universitas Kristen Maranatha

Bandung, Januari 2022

Disahkan oleh : Disetujui oleh :

Ketua Program Studi Teknik Elektro Pembimbing

Heri Andrianto, S.T., M.T. DR. Ratnadewi, S.T., M.T.

NIK : NIK : 220196

(4)

iii

Universitas Kristen Maranatha

(5)

iv

Universitas Kristen Maranatha

(6)

v

Universitas Kristen Maranatha

PERANCANGAN WEBSITE BERBASIS HTML DAN CSS SEBAGAI MEDIA INFORMASI BATIK JAWA

Michael Cladius Poltak Pintu Batu NRP : 1822023

e-mail : [email protected]

ABSTRAK

Indonesia memiliki 34 Provinsi, dimana setiap provinsi mempunyai budaya yang unik. Salah satu budaya Indonesia yang terkenal sampai mancanegara adalah batik. Batik sudah menjadi warisan yang telah diturunkan secara turun temurun oleh nenek moyang kita. Perkembangan batik dimulai ketika zaman Kerajaan Majapahit, yang mana pusatnya terletak di pulau Jawa.

Motif batik Jawa berkaitan erat dengan kultur, kehidupan sosial, tempat bersejarah, dan tanaman atau hewan khas daerah tersebut.

Informasi mengenai motif batik Jawa dapat dibagikan melalui website.

Penggunaan website sebagai media informasi mengikuti perkembangan zaman, selain itu cocok untuk kaum muda yang tidak pernah lepas dengan internet.

Mereka dapat mengakses website melalui gawai ataupun komputer. Dengan begitu kaum muda akan mempunyai informasi mengenai motif batik Jawa dan warisan ini masih diturunkan hingga saat ini.

Pada kerja praktik ini, perancangan website menggunakan bahasa Hypertext Markup Language (HTML) dan Cascading Style (CSS). HTML digunakan untuk merancang struktur website dan konten yang akan ditampilkan, sedangkan CSS digunakan untuk mengatur tampilan menjadi menarik.

Kata kunci: HTML, CSS, Batik

(7)

vi

Universitas Kristen Maranatha

WEBSITE DESIGN BASED ON HTML AND CSS AS INFORMATIONMEDIA FOR JAVANESE BATIK

Michael Cladius Poltak Pintu Batu NRP : 1822023

e-mail : [email protected]

ABSTRACT

Indonesia has 34 provinces, where each province has a unique culture.

One of the famous Indonesian cultures to foreign countries is batik. Batik has become a legacy that has been passed down from generation to generation by our ancestors. The development of batik began during the era of the Majapahit Kingdom, whose center was located on the island of Java.

Javanese batik motifs are closely related to culture, social life, historical places, and plants or animals typical of the area.

Information about Javanese batik motifs can be shared through the website. The use of the website as a medium of information follows the times, besides that it is suitable for young people who are never separated from the internet. They can access the website through their smartphone or computer. That way, young people will have information about Javanese batik motifs and this heritage is still being passed down to this day.

In this project work, website design uses Hypertext Markup Language (HTML) and Cascading Style (CSS). HTML is used to design the structure of the website and the content to be displayed, while CSS is used to adjust the appearance to be attractive.

Keywords: HTML, CSS, Batik

(8)

vii

Universitas Kristen Maranatha

DAFTAR ISI

KATA PENGANTAR ... i

ABSTRAK ... v

ABSTRACT ... vi

DAFTAR ISI ... vii

DAFTAR GAMBAR ... ix

DAFTAR LAMPIRAN ... xi

BAB I PENDAHULUAN ... 1

I.1 Latar Belakang ... 1

I.2 Tujuan dan Manfaat ... 2

I.3 Batasan Masalah ... 2

I.4 Metode Penelitian ... 2

I.5 Sistematika Penulisan ... 3

BAB II LANDASAN TEORI ... 5

II.1 Website ... 5

II.2 Hypertext Markup Language ... 6

II.3 Cascading Style ... 6

II.4 Visual Studio Code ... 7

II.5 Batik ... 7

II.5.2 Batik Betawi ... 10

II.5.3 Batik Cimahi ... 13

II.5.4 Batik Lasem ... 16

II.5.5 Batik Yogyakarta ... 18

II.5.6 Batik Mojokerto... 20

BAB III PERANCANGAN SISTEM ... 23

(9)

viii

Universitas Kristen Maranatha

III.1 Perancangan Website ... 23

III.2.6 Halaman Menu ... 40

BAB IV DATA PENGAMATAN DAN ANALISIS ... 40

IV.1 Data Pengamatan ... 41

IV.1.1 Tampilan Saat Diakses Menggunakan Komputer... 41

IV.1.2 Tampilan Saat Diakses Menggunakan Gawai ... 46

BAB V SIMPULAN DAN SARAN ... 49

V.1 Simpulan ... 49

V.2 Saran ... 49

DAFTAR REFERENSI ... 50

(10)

ix

Universitas Kristen Maranatha

DAFTAR GAMBAR

Gambar II. 1 Motif Dataluya ... 8

Gambar II. 2 Motif Mandhalikan ... 9

Gambar II. 3 Motif Kawangsan ... 9

Gambar II. 4 Motif Sabakingking ... 10

Gambar II. 5 Motif Ondel-Ondel ... 11

Gambar II. 6 Motif Nusa kelapa ... 11

Gambar II. 7 Motif Ciliwung ... 13

Gambar II. 8 Motif Rasamala... 12

Gambar II. 9 Motif Salaknagara... 12

Gambar II. 10 Motif Pucuk Rebung ... 13

Gambar II. 11 Motif Anyaman Awi ... 14

Gambar II. 12 Motif Pusaka Kujang ... 14

Gambar II. 13 Motif Sampeu ... 15

Gambar II. 14 Motif Militer ... 15

Gambar II. 15 Motif Curug Cimahi ... 16

Gambar II. 16 Motif Latohan ... 17

Gambar II. 17 Motif Kricak ... 18

Gambar II. 18 Motif Gunung Ringgit ... 18

Gambar II. 19 Motif Sekar Jagad ... 19

Gambar II. 20 Motif Sido Asih ... 19

Gambar II. 21 Motif Sidomukti Magetan ... 20

Gambar II. 22 Motif Keraton ... 20

Gambar II. 23 Motif Micro Bolong ... 21

Gambar II. 24 Motif Burung Peksi ... 22

(11)

x

Universitas Kristen Maranatha

Gambar II. 25 Motif Buah Mojo ... 22

Gambar III. 1 Diagaram Blok Perancangan Website ... 23

Gambar III. 2 Flowchart ... 25

Gambar IV. 1 Halaman Login ... 41

Gambar IV. 2 Halaman Pendaftaran ... 41

Gambar IV. 3 Halaman Konfirmasi Pendaftaran ... 42

Gambar IV. 4 Halaman Awal ... 42

Gambar IV. 5 Halaman Menu ... 42

Gambar IV. 6 Halaman Batik Banten ... 43

Gambar IV. 7 Halaman Batik Betawi ... 43

Gambar IV. 8 Halaman Batik Cimahi ... 44

Gambar IV. 9 Halaman Batik Lasem ... 44

Gambar IV. 10 Halaman Batik Yogyakarta ... 45

Gambar IV. 11 Halaman Batik Mojokerto ... 45

Gambar IV. 12 Halaman Login, Daftar, dan Konfiramsi Pendaftara Mobile ... 46

Gambar IV. 13 Halaman Awal dan Menu Mobile ... 46

Gambar IV. 14 Halaman Batik Banten, Betawi, Cimahi, dan Lasem Mobile ... 47

Gambar IV. 15 Halaman Batik Yogyakarta dan Mojokerto Mobile ... 48

(12)

xi

Universitas Kristen Maranatha

DAFTAR LAMPIRAN

Lampiran A SYNTAX PROGRAM ..….………..A-2

(13)

1 Universitas Kristen Maranatha

BAB I

PENDAHULUAN

Pada bab ini menjelaskan mengenai Latar Belakang, Rumusan Masalah, Tujuan, Batasan Masalah, Metode Penelitian, dan Sistematika Penulisan.

I.1 Latar Belakang

Identitas merupakan sesuatu yang melekat dan mencerminkan jati diri seseorang dalam lingkup kecil dan jati diri bangsa dalam lingkup luas. Identitas suatu bangsa terwujud dalam berbagai bentuk seperti bendera kebangsaan, lagu kebangsaan, lambang negara, dan budaya [1].

Batik sebagai bagian dari budaya Indonesia yang diwariskan oleh nenek moyang Bangsa Indonesia sejak zaman dahulu merupakan suatu kerajinan dengan nilai seni yang tinggi. Asal-usul lahirnya batik di Indonesia berkaitan dengan berkembangnya kerajaan Majapahit, Solo dan Yogyakarta. Pada mulanya budaya membatik merupakan suatu adat istiadat yang turun menurun, hal tersebut menyebabkan suatu motif batik biasanya dapat dikenali dari asal daerah ataupun asal keluarganya. Beberapa motif batik dapat menandakan status/derajat seseorang, bahkan hingga sekarang beberapa motif batik tradisional hanya dapat dipakai oleh keluarga kerajaan seperti keluarga keraton Yogyakarta dan Surakarta.

Terdapat banyak sekali jenis dan corak dari suatu batik tradisional, akan tetapi motif dan ragamnya sesuai dengan filosofi dan budaya dari masing-masing daerah. Kekayaan Budaya Indonesia yang fantastis menjadi pemicu terciptanya berbagai motif dan jenis batik tradisional dengan keunikannya tersendiri [2].

Beberapa daerah di pulau Jawa menjadi pusat produksi kerajinan batik.

Hampir seluruh daerah di pulau Jawa mempunyai motif khas daerah mereka.

Motif ini berkaitan dengan kultur, kehidupan sosial, tempat bersejarah, dan hewan

atau tumbuhan khas daerah mereka. Beragamnya motif batik Jawa ini

(14)

Universitas Kristen Maranatha menyebabkan kurangnya informasi mengenai batik itu sendiri. Oleh karena itu diperlukan pengenalan yang berisi informasi melalui media Website yang dapat diakses meluali gawai ataupun komputer.

Website merupakan kumpulan halaman-halaman yang digunakan untuk menampilkan informasi, gambar gerak, suara, dan atau gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian informasi yang saling terkait dimana masing-masing dihubungkan dengan link- link [3].

Pembuatan website yang menampilkan informasi batik Jawa diharapkan dapat memberikan informasi yang edukatif, sehingga masyarakat yang berada di pulau Jawa mengenal sejarah, ciri khas, dan makna dari motif-motif batik yang terdapat di daerah pulau Jawa.

I.2 Tujuan dan Manfaat

Tujuan dari kerja praktik ini adalah membuat sebuah website yang dapat diakses dimana pun dan kapan pun oleh pengguna baik diakses melalui gawai ataupun melalui komputer.

Manfaat dari kerja praktik ini adalah diharapkan pengguna dapat mencari informasi mengenai sejarah, ciri khas, dan makna dari batik-batik yang terdapat di berbagai daerah pulau Jawa. Selain itu diharapkan seluruh Warga Negara Indonesia lebih mencintai batik khsusnya para kaum muda agar batik dapat tetap ada dan terlestarikan hingga generasi selanjutnya.

I.3 Batasan Masalah

Batasan masalah dalam kerja praktik ini adalah sebagai berikut :

1. Informasi yang ditampilkan mengenai sejarah, ciri khas, makna dari motif batik Jawa.

2. Website dapat diakses menggunakan gawai dan komputer.

I.4 Metode Penelitian

Metode penelitian yang digunakan pada kerja praktik ini adalah :

 Studi literatur

(15)

3 Universitas Kristen Maranatha Pendalaman mengenai informasi mengenai sejarah, motif, ciri khas, dan makna Batik yang tersebar di berbagai daerah pada pulau Jawa.

Selanjutnya adalah memahami mengenai styling language website yaitu Hypertext Markup Language dan desain tampilan dengan Cascading Style.

 Perancangan

Dalam proses perancangan pembuatan website ini terdapat beberapa hal yang perlu diperhatikan :

1. Ketepatan informasi Batik yang akan ditampilkan pada web agar tidak memberikan informasi palsu yang tidak akurat (hoax ).

2. Website dapat diakses menggunakan gawai atau komputer.

3. Pemrograman Hypertext Markup Language tanpa error agar website dapat digunakan.

 Implementasi

Implementasi dilakukan dengan menggunakan web programming berupa Hypertext Markup Language dan Cascading Style untuk mengatur tampilan.

 Pengujian

Pengujian dilakukan dengan membandingkan tampilan website saat diakses menggunakan gawai dan menggunakan komputer.

I.5 Sistematika Penulisan

Sistematika penulisan laporan kerja praktik ini dibagi menjadi 5 bagian, didukung dengan referensi dan lampiran terkait. Berikut pembahasan dari masing- masing bab :

BAB I : PENDAHULUAN

Bab ini menjelaskan tentang latar belakang, perumusan masalah, tujuan, dan pembatasan masalah dari kerja praktik ini.

BAB II : LANDASAN TEORI

Pada bab ini menjelaskan mengenai teori-teori penunjang Kerja Praktik.

Adapun teori-teori penunjang tersebut adalah sebagai berikut : Webstie, Hypertext

(16)

Universitas Kristen Maranatha Markup Language (HTML), Cascadaing Style (CSS), Batik, Batik Banten, Batik Betawi, Batik Cimahi, Batik Lasem, Batik Yogyakarta, dan Batik Mojokerto.

BAB III : PERANCANGAN SISTEM

Bab ini menjelaskan tentang langkah-langkah perancangan website sebagai media informasi Batik Jawa berbasis HTML dan CSS.

BAB IV : DATA PENGAMATAN DAN ANALISIS

Bab ini menjelaskan tentang data pengamatan dari website yang telah dirancang baik tampilan halaman utama dan halaman penunjang lain yang menjelaskan batik dari setiap daerah yang terdapat di pulau Jawa.

BAB V : SIMPULAN DAN SARAN

Bab ini menjelaskan simpulan yang didapatkan dari kerja praktik dan saran untuk

pengembangan laporan.

(17)

5 Universitas Kristen Maranatha

BAB II

LANDASAN TEORI

Pada bab ini menjelaskan mengenai teori-teori penunjang Kerja Praktik.

Adapun teori-teori penunjang tersebut adalah sebagai berikut : Webstie, Hypertext Markup Language, Cascadaing Style, Batik, Batik Banten, Batik Betawi, Batik Cimahi, Batik Lasem, Batik Yogyakarta, dan Batik Mojokerto.

II.1 Website

Website merupakan kumpulan halaman digital yang berisi informasi berupa teks, animasi, gambar, suara dan video atau gabungan dari semuanya yang terkoneksi oleh internet, sehingga dapat dilihat oleh seluruh siapapun yang terkoneksi jaringan internet. Jenis Kategori Website:

a. Web Statis

Web Statis merupakan website yang mempunyai halaman yang tidak berubah. Perubahan suatu halaman dilakukan secara manual dengan mengedit kode yang menjadi struktur dari website tersebut.

b. Web Dinamis

Web Dinamis merupakan website yang secara terstruktur diperuntukkan untuk diupdate sesering mungkin. Biasanya disediakan halaman backend untuk melakukan perubahan konten dari website tersebut. Contohnya : web portal, web berita, dll.

c. Web Interaktif

Web Interaktif merupakan website yang berinteraksi antara penggunanya.

Biasanya berupa forum diskusi maupun blog dengan adanya moderator

sebagai pengatur alur diskusi [4].

(18)

Universitas Kristen Maranatha II.2 Hypertext Markup Language

Hypertext Markup Language (HTML) adalah bahasa pemrograman yang digunakan untuk menampilkan sebuah website. HTML termasuk dalam bahasa pemrograman gratis, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global. Dokumen HTML adalah dokumen teks yang dapat diedit oleh editor teks apapun. Dan disimpan dengan file extension “.html” . Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag-teks yang dimulai dengan symbol “ < ” dan berakhir dengan sebuah symbol “ > ” [4].

Disebut dengan Mark-up Language karena HTML mengandung tanda- tanda dan perintah-perintah tertentu untuk menampilkan teks, gambar, dan lain sebagainya beserta dengan fungsi-fungsi yang diinginkan. Perintah-perintah dalam bahasa HTML memiliki perintah-perintah khusus yang disebut dengan elemen, dan elemen ini berada di antara tag awal dan tag akhir.

Membuat file HTML dapat dianalogikan dengan membuat kliping. Semua bahan yang mau ditempelkan telah tersedia. Dalam hal ini, bahan tersebut disimpan di dalam web server. Hasilnya akan kita lihat di klien melalui web browser.

Kelebihan yang dapat diperoleh dengan menggunakan HTML adalah :

1. HTML adalah dasar pembuatan website. Orang yang bisa membuat website dengan Frontpage atau Dreamweaver belum tentu bisa mengetikkan perintah-perintah HTML-nya. Sedangkan orang yang mampu mengetikkan perintah-perintah HTML, dengan mudah dapat memahami pemakaian Frontpage/Dreamweaver.

2. Membuat website dengan mengetikkan perintah HTML, dapat dilakukan di mana pun tanpa bergantung pada software apapun [5].

II.3 Cascading Style

Casecading Style Sheet (CSS) merupakan suatu salah satu kode

pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout

(19)

7 Universitas Kristen Maranatha halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

CSS digunakan oleh web programmer dan juga web designer untuk menentukan warna, tata letak font, dan semua aspek lain yang ada pada situs mereka. Saat ini hampir tidak ada situs web yang dibangun tanpa kode CSS [6].

II.4 Visual Studio Code

Visual Studio Code (VS Code) ini adalah sebuah teks editor ringan dan handal yang dibuat oleh Microsoft untuk sistem operasi multiplatform, artinya tersedia juga untuk versi Linux, Mac, dan Windows. Teks editor ini secara langsung mendukung bahasa pemrograman JavaScript, Typescript, dan Node.js, serta bahasa pemrograman lainnya dengan bantuan plugin yang dapat dipasang via marketplace Visual Studio Code (seperti C++, C#, Python, Go, Java, dst).

Banyak sekali fitur-fitur yang disediakan oleh Visual Studio Code, diantaranya Intellisense, Git Integration, Debugging, dan fitur ekstensi yang menambah kemampuan teks editor. Fitur-fitur tersebut akan terus bertambah seiring dengan bertambahnya versi Visual Studio Code. Pembaruan versi Visual Studio Code ini juga dilakukan berkala setiap bulan, dan inilah yang membedakan VS Code dengan teks editor-teks editor yang lain. Teks editor VS Code juga bersifat open source, yang mana kode sumbernya dapat kalian lihat dan kalian dapat berkontribusi untuk pengembangannya [7].

II.5 Batik

Batik (kata Batik) berasal dari bahasa Jawa yaitu: “amba” yang berarti

menulis dan “nitik” yang berarti titik. Sedangkan pengetian dalam Kamus Umum

Bahasa Indonesia, definisi batik ialah kain dan sebagainya yang bergambar

(bercorak beragi) yang pembuatannya dengan cara titik (mula-mula ditulisi atau

ditera dengan lilin lalu diwarnakan dengan tarum dan soga) [8].

(20)

Universitas Kristen Maranatha II.5.1 Batik Banten

Pada tahun 1976, arkeolog Universitas Indonesia yang bekerja sama dengan arkeolog nasional melakukan penggalian atau ekskavasi untuk mendapatkan artefak-artefak Terwengkal, yaitu warisan budaya dari masa Kerajaan Islam di Banten abad ke-17 [9]. Lokasi penemuan artefak adalah di wilayah Sukadiri, Panjunan, Banten Lama, dan Banten Girang [10].

Kemudian, pada tahun 2002 dilakukan pengkajian guna mengetahui detail dari artefak dan didapatkan hasil 75 ragam hias dengan dekoratif yang khas, unik, dan tidak ditemukan di tempat lain. Sebagai wujud heritage yang dimiliki Banten dari zaman Kerajaan Islam, kini ragam hias artefak Terwengkal dikembangkan menjadi motif batik khas Banten. Batik Banten dikelola langsung oleh Uke Kurniawan melalui Griya Batik Banten. Motif yang diciptakan dan telah disahkan pada tahun 2004 ditahap awal sebanyak dua belas motif. Diantaranya motif kapurban, motif datulaya, motif surosowan, motif pasepen, motif mandhalika, motif srimangati, motif kawangsan, motif pasulaman, motif sabakingking, motif pancaniti, motif pamaranggen, dan motif pejantren. [11].

Motif-motif tersebut berhubungan dengan toponim desa, gelar, dan tempat dalam Kesultanan Banten. Berikut ini empat motif dari dua belas motif yang sahkan pada tahap awal.

 Motif Dataluya

Motif Datulaya. Datulaya dalah nama tempat tinggal Sultan Maulana Hasanuddin / tata ruang keluarga di Kesultanan Banten.

Gambar II. 1 Motif Dataluya [12]

(21)

9 Universitas Kristen Maranatha

 Motif Mandhalikan

Motif Mandalikan. Mandalikan adalah nama gelar yang diberikan kepada Pangeran Aria Mandalika dalam penyebaran Agama lslam.

Gambar II. 2 Motif Mandhalikan

 Motif Kawangsan

Motif Kawangsan. Kawangsan adalah nama gelar yang diberikan kepada Pangeran Wangsa dalam penyebaran Agama lslam.

Gambar II. 3 Motif Kawangsan [13]

 Motif Sabakingking

Motif Sebakingking. Sebakingking adalah nama gelar Panembahan

Sultan Maulana Hasanuddin dalam penyebaran Agama lslam.

(22)

Universitas Kristen Maranatha Gambar II. 4 Motif Sabakingking [11]

II.5.2 Batik Betawi

Batik Betawi sudah berkembang di Batavia (sekarang Jakarta) sejak abad ke-19. Motif Buketan, Liong, dan Lokcan atau Burung Hong terdapat pada batik Betawi pengaruh Cina. Sementara itu, motif kereta kuda dan binatang khas Eropa dengan warna biru menandakan adanya pengaruh Eropa. Pengaruh Timur Tengah dapat dilihat dari kebaya encim, kebayak enyak, baju sadariah, baju abang none, dan baju pengantin Betawi.

Batik Betawi juga memiliki motif lain seperti Ondel-ondel (boneka tolak bala), Nusa Kelapa (sebutan leluhur Betawi untuk Jakarta), Ciliwung (peradaban manusia berasal dari tepian Sungai Ciliwung, motif ini sebagai simbol rejeki yang terus mengalir bak sebuah aliran kali), Rasamala (sebutan untuk pohon Jati Hindia yang kulit kayunya mengeluarkan bau wangi, kini merupakan pohon langka dan hanya terdapat di Kebon Raya Bogor), dan Salakanegara (merupakan batik kerajaan pertama di tanah Betawi yang didirikan oleh Aki Tirem 130 Masehi, berkaitan dengan kepercayaan yang menganggap Gunung Salak mempunyai kekuatan) [14].

 Motif Ondel-ondel

Motif ini dibuat mengangkat bentuk Ondel-ondel sebagai boneka

yang dapat menolak bala. Motif ini mengandung harapan agar

(23)

11 Universitas Kristen Maranatha pemakainya mendapat kehidupan yang lebih baik serta jauh dari kemalangan.

Gambar II. 5 Motif Ondel-Ondel [15]

 Motif Nusa Kelapa

Memiliki ide disain dari pemerintahan Prabu Siliwangi. Dari diketahui Jakarta dulu bernama nusa kelapa, hingga menjadi Sunda Kelapa, Jayakarta, Batavia, dan Jakarta. Nama Nusa Kelapa ini diambil oleh nenek moyang masyarakat Betawi saat itu, hingga dijadikan motif batik Betawi.

Gambar II. 6 Motif Nusa kelapa [15]

 Motif Rasamala

Menggambarkan riwayat Belanda saat masuk ke wilayah Sunda

Kelapa. Saat itu daerah Sunda Kelapa masih berupa hutan belantara yang

banyak ditumbuhi pohon jenis Rasamala. Warga Betawi menganggap

keramat pohon Rasamala karena baunya yang wangi, kulit kayu, rasamala

dijadikan setanggi.

(24)

Universitas Kristen Maranatha Gambar II. 7 Motif Rasamala [15]

 Motif Salakanagara

Merupakan batik yang mengangkat motif bertemakan kerajaan pertama di tanah Betawi yang didirikan oleh Aki Tirem pada 130 masehi.

Nama Salakanegara berhubungan dengan kepercayaan warga saat itu yang menganggap bahwa gunung mempunyai kekuatan dan gunung itu adalah Gunung Salak yang terletak di Kabupaten Bogor.

Gambar II. 8 Motif Salaknagara [15]

 Motif Ciliwung

Berdasarkan ide dari peradaban manusia yang berasal dari tepian

Sungai Ciliwung. Konon penguasa Portugis dan Belanda begitu tertarik

dengan Sungai Ciliwung hingga bermaksud menguasai Betawi. Sesuai

namanya, pemakaian batik ini diharapkan pemakainya menjadi pusat daya

tarik dan sebagai simbol rezeki yang terus mengalir seperti aliran kali.

(25)

13 Universitas Kristen Maranatha Gambar II. 9 Motif Ciliwung [16]

 Motif Pucuk Rebung

Batik Betawi Motif Pucuk Rebung merupakan khas batik pesisir yang menggambarkan pucuk batang bambu. Motif Pucuk Rebung menjadi seragam wajib ketika pemilihan Abang-None Jakarta. Batik Betawi Motif Pucuk Rebung sering digunakan sebagai busana bawahan None Jakarta [17].

Gambar II. 7 Motif Pucuk Rebung [18]

II.5.3 Batik Cimahi

Batik Cimahi pertama kali dibuat melalui suatu kompetisi yang diadakan

oleh Dewan Kerajinan Nasional Daerah (Dekranasda) kota Cimahi yang diketuai

oleh Atty Suharti Tochija. Menurut Dekranasda kota Cimahi, batik Cimahi

memiliki lima desain motif dasar, yang merupakan hasil perlombaan desain motif

batik yang digelar pada tanggal 21 Juni 2009 yang bertepatan dengan sewindu

Hari Jadi Kota Cimahi. Kelima motif itu adalah motif anyaman awi (bambu),

(26)

Universitas Kristen Maranatha motif pusaka Kujang, motif Sampeu Cireundeu (daun singkong), motif militer Cimahi (pusdik), dan motif Curug Cimahi.

 Motif anyaman awi (bambu)

Motif ini oleh Didi Sahadi didominasi oleh lukisan bambu dan anyamannya. Inspirasinya datang dari seorang warga Cimahi yang merupakan penggagas Asosiasi Bambu Sedunia. Ciawitali sendiri merupakan nama suatu kampung di Kecamatan Cimahi Tengah yang banyak ditumbuhi rumpun bambu.

Gambar II. 8 Motif Anyaman Awi [19]

 Motif pusaka Kujang

Diambil karena pusaka Kujang merupakan simbol Jawa Barat. Ini dapat memperkuat bahwa batik Cimahi adalah salah satu batik dari Jawa Barat.

Gambar II. 9 Motif Pusaka Kujang [19]

 Motif Sampeu Cireundeu (daun singkong)

(27)

15 Universitas Kristen Maranatha Motif yang dibuat oleh Dadang lebih mewakili masyarakat adat Kampung Cirendeu yang terletak di wilayah Leuwigajah, Cimahi Selatan.

Singkong atau sampeu yang merupakan makanan pokok pengganti nasi bagi masyarakat sekitar selama 80 tahun, telah menjadi inspirasi bagi Dadang untuk menciptakan motif batik. Jadi, pada motif Cirendeu ini, motif daun singkong dan ketela lebih mendominasi.

Gambar II. 10 Motif Sampeu [19]

 Motif militer Cimahi

Motif ini terinspirasi dari banyaknya Pusat Pendidikan (Pusdik) militer di kota Cimahi. Meskipun tergolong kota kecil, namun Pusdik ini mencapai angka belasan sehingga membedakan kota Cimahi dengan kota- kota lain yang ada di Jawa Barat. Pada motif Pusdik, terlukis berbagai aktivitas pendidikan militer seperti latihan perang, motif Kawah Candradimuka yang merupakan simbol pendidikan militer, dan lain-lain.

Gambar II. 11 Motif Militer [19]

(28)

Universitas Kristen Maranatha

 Motif Curug Cimahi

Motif ini terinspirasi dari air terjun kebanggaan masyarakat Cimahi. Sekalipun kawasan wisata Curug Cimahi kini telah masuk ke dalam wilayah Kecamatan Cisarua, Kabupaten Bandung Barat [20].

Gambar II. 12 Motif Curug Cimahi [19]

II.5.4 Batik Lasem

Batik Lasem mempunyai keunikan serta ciri khas tersendiri. Keunikan ini terlihat pada motif yang ada didalam batik Lasem. Motif yang ada dalam batik Lasem merupakan motif yang dihasilkan dari sebuah proses akulturasi dari dua budaya yang berbeda. Motif ini dihasilkan dari silang budaya yang berjalan dengan sinergis yaitu antara budaya Jawa-Tionghoa. Motif yang ada pada batik Lasem sangat sarat dengan makna baik makna yang berasal dari budaya Tionghoa maupun Jawa.

Warna yang ada pada Batik Lasem mempunyai ciri khas batik pesisiran yang kaya akan warna dan menggunakan warna tegas. Akan tetapi yang paling terkenal pada batik Lasem dan menjadi identitas dari batik Lasem adalah warna merah darah ayam. Warna merah darah ayam ini tidak dapat ditemui pada batik dari daerah lain.

Motif yang dihasilkan dari proses akulturasi Jawa-Tionghoa menghasilkan pola yang cantik, dan sarat dengan nilai filosoifis dari sebuah budaya.

Kedatangan Bangsa Tionghoa pada sekitar Tahun 1335 membawa pengaruh

besar dalam batik Lasem. Adalah Putri Na Li Ni yang merupakan istri dari Bhi

Nang Un, mengajarkan motif budaya Tionghoa pada masyarakat Lasem yang

memang sudah mengenal batik tetapi dengan motif terbatas.

(29)

17 Universitas Kristen Maranatha Motif gaya Jawa atau motif yang dihasilkan oleh para perajin batik yang merupakan orang Lasem asli dapat dilihat dari gambar Latohan, Watu Kricak, Pasiran, Gunung Ringgit, dari beberapa motif yang dihasilkan dari masyarakat asli Lasem diatas masing – masing memiliki makna.

 Motif Latohan

Motif latohan ini berupa bentuk seperti bunga dengan bulatan- bulatan kecil. Latohan ini diambil dari nama Latoh yang merupakan salah satu jenis tanaman laut yang sering di konsumsi oleh masyarakat Lasem.

Gambar II. 13 Motif Latohan [21]

 Motif Watu Kricak

Watu kricak ini berbentuk pecahan – pecahan batu, selain merupakan

krikil orang juga melihat motif ini sebagai motif yang berbentuk tanah yang

retak, ini sesuai dengan karakteristik tanah Lasem yang kering. Pengambilan

motif ini juga dipakai untuk mengenang para korban kerja paksa pada saat

pembuatan jalan yang dilakukan oleh Deandels. Kerja Paksa yang menelan

banyak korban di Lasem ini membuat para penduduk Lasem merasa prihatin,

dan ini menjadi bentuk keprihatinan masyarakat Lasem.

(30)

Universitas Kristen Maranatha Gambar II. 14 Motif Kricak [22]

 Motif Gunung Ringgit

Gunung rinngit ini menyerupai gunungan yang sering di gunakan pada pewayangan.

Gambar II. 15 Motif Gunung Ringgit [22]

Warna-warna pada batik lasem yang khas sesuai dengan karaketeristik batik pesisiran yang kaya warna dan cenderung menggunakan warna - warna cerah lalu tepatnya Tahun 1920 – 1960, Industri batik Lasem sudah memproduksi batik tulis sekaligus batik cap [23].

II.5.5 Batik Yogyakarta

Pada awalnya, batik hanya digunakan oleh keluarga Keraton Yogyakarta dan Surakarta, namun kini batik telah digunakan oleh berbagai kalangan [24].

Yogyakarta memiliki semua kekayaan mengenai batik, mulai dari sejarah, variasi

motifbatik, makna simbolisme batik, kegiatan kebudayaan dan fasilitas yang

(31)

19 Universitas Kristen Maranatha terkait batik, serta para pelaku batik meliputi pengrajin, peneliti, pengusaha dan pecinta batik yang mulai melibatkan generasi muda. Kekayaan dan kegigihan terhadap batik sebagai acuan tradisi membuat Yogyakarta mampu meraih predikat Kota Batik Dunia. Ciri khas dari batik Yogyakarta antara lain warna dasarnya cokelat, hitam, dan putih. Sebagian besar motifnya berupa pola geometris, serta tiap motifnya memiliki makna tersendiri dan digunakan pada acara-acara tertentu [25].

 Motif Sekar Jagad

Motif yang berasal dari Yogyakarta ini sangat khas Indonesia dikarenakan adanya bentuk pulau-pulau yang menggambarkan peta dunia dalam motifnya.

Gambar II. 16 Motif Sekar Jagad [2]

 Motif Sido Asih

Motif ini bermakna agar manusia bisa saling menyayangi dan mengasihi antar sesama manusia dan makhluk hidup. Motif tersebut biasa digunakan saat acara pernikahan oleh pengantin wanita.

Gambar II. 17 Motif Sido Asih [2]

 Motif Sidomukti Magetan

(32)

Universitas Kristen Maranatha Motif ini bergambar bambu yang berfilosofi akan adanya ketenangan lahir dan batin. Biasanya batik ini digunakan pada upacara adat ataupun untuk menghadiri acara resmi.

Gambar II. 18 Motif Sidomukti Magetan [2]

 Motif Keraton

Para putri keraton dan juga para ahli pembatik dalam keratonlah yang telah menciptakan motif ini, zaman dahulu batik keraton hanya boleh dipakai oleh Sultan dan keluarganya saja. Tetapi saat ini batik sudah bebas digunakan oleh siapapun, batik keraton ini memiliki filosofi dan makna yang hidup [2].

Gambar II. 19 Motif Keraton [2]

II.5.6 Batik Mojokerto

Beberapa masyarakat beranggapan bahwa batik Indonesia lahir di

Majapahit dengan hadirnya batik Keraton. Namun seiring runtuhnya kerajaan ini,

batik Majapahit sempat menghilang, tenggelam, dan hilang dari peredaran

perkembangan batik Indonesia. Mojokerto sendiri sebagai kota petilasan

Majapahit, ditinggalkan oleh para nenek moyang para empu batik kerajaan . Batik

baru muncul kembali pada tahun 1920-an di kota Mojokerto ini. Para generasi

(33)

21 Universitas Kristen Maranatha baru menghidupkan kembali warisan nenek moyang kerajaan ini. Batik yang muncul di kota ini bukanlah berakar dari batik keraton Majapahit, tetapi dari generasi baru masa kini. Beberapa warga masyarakat di kota ini menjadi pengrajin batik dan berusaha untuk melestarikannya [26].

Pengrajin batik Mojokerto berusaha mengembangkan batik hingga menemukan ciri khas daerah. Batik Rengkik merupakan batik unggulan yang digunakan sebagai batik khas Kota Mojokerto (ciri kedaerahan). Motif batik Rengkik terinspirasi dari bentuk ikan Rengkik, menggambarkan makanan khas Mojokerto yakni ikan Rengkik yang hidup di Sungai Brantas. Warna orange melambangkan warna khas Kota Mojokerto. Motif ikan rengkik dikomposisikan dengan motif Surya Majapahit, lambang kerajaan Majapahit.

Motif batik Mojokerto lainnya yakni yakni motif Sisik, Peksi, dari tumbuhan yakni Mrico, Koro, dan Talas, dari elemen alam yakni Alas, Kali, Surya, Bulan dan Majapahit. Ada 7 (tujuh) nama, yaitu: MricoBolong, Sisik Gringsing, Mahkota Majapahit, Teratai Surya Majapahit, Surya Majapahit,Satrio Manah, dan Gerbang Mahkota Raja. Ada 5 (lima) nama motif batik yang merujuk ke alam yaitu: Bunga Matahari, Daun Talas, Koro Renteng, Terang Bulan dan Lerek Kali. Sedangkan yang dipengaruhi oleh gaya hidup manusia, yaitu: Nam Kloso, Rawan Inggek, dan Alas Majapahit [27].

 Motif Micro Bolong

Motif batik yang dipengaruhi oleh nilai sosial budaya di masyarakat Mojokerto.

Gambar II. 20 Motif Micro Bolong [27]

(34)

Universitas Kristen Maranatha

 Motif Burung Peksi

Motif Burung Peksi merupakan batik yang terinspirasi dari binatang.

Gambar II. 21 Motif Burung Peksi [27]

 Motif Buah Mojo

Motif Buah Mojo merupakan motif yang terinsipirasi dari tumbuhan, dimana buah mojo merupakan buah yang terkenal dari Mojokerto.

Gambar II. 22 Motif Buah Mojo [27]

(35)

23 Universitas Kristen Maranatha

BAB III

PERANCANGAN SISTEM

Pada bab ini menjelaskan mengenai perancangan sistem. Hal-hal yang akan dipaparkan: Perancangan Website, Halaman Log in, Halaman Pendaftaran Akun, Halaman Konfirmasi Pendaftaran, Halaman Home, Halaman Informasi Website, dan Halaman Menu.

III.1 Perancangan Website

Gambar III. 1 Diagaram Blok Perancangan Website

Perancangan website batik Jawa sebagai media informasi pada kerja praktek ini menggunakan bahasa pemrograman web HTML dan CSS. Pada Gambar III.1, menggambarkan alur dari perancangan website. Perancangan dimulai dari menentukan tema yang akan digunakan. Tema website yang akan dipakai adalah Informasi. Informasi yang ditampilkan pada website merupakan informasi mengenai motif batik daerah di pulau Jawa. Selain itu terdapat informasi mengenai sejarah asal mula motif itu ditemukan, makna yang terkandung dari setiap motif, dan ciri khas yang dimiliki yang membuat membedakan dengan motif batik lainnya. Dengan memberikan informasi mengenai batik Jawa melalui website diharapkan dapat memberikan pengetahuan kepada pengunjung yang mengakses website khusunya kaum muda agar batik ini dapat dilestarikan dan diturunkan ke generasi selanjutnya.

Konsep yang akan diaplikasikan pada website ini adalah sebagai media

diskusi dan pembelajaran. Diharapkan setelah pengunjung mendapatkan informasi

(36)

Universitas Kristen Maranatha dari website, nantinya para pengunjung dapat saling berdiskusi dan bertukar pikiran mengenai topik batik yang telah mereka peroleh informasinya dan menjadi ilmu pengetahuan baru yang didapatkan oleh pengunjung.

Untuk fitur yang dapat digunakan oleh pengunjung selama mengakses website berupa login, pendaftaran akun, dan sebuah menu yang berfungsi untuk menuntun pengunjung selama mengakses website. Dengan fitur-fitur yang disediakan pengunjung diharapkan mudah ketika mengakses website.

Langkah selanjutnya adalah menentukan nama domain yang akan digunakan. Agar memudahkan semua orang untuk mengakses website tersebut nama domain yang digunakan haruslah unik dan mudah diingat. Maka nama domain yang digunakan pada website ini adalah “BatikJawa”.

Selanjutnya adalah proses perancangan tampilan pada website. Pada langkah ini akan dibagi menjadi dua proses yaitu perancangan untuk tampilan pada komputer dan perancangan tampilan pada gawai. Perbedaannya hanya terlatak pada ukuran halamannya dimana ukuran halaman pada komputer akan lebih besar dibandingkan pada gawai. Isi konten akan tetap sama baik tampilan pada komputer ataupun pada gawai.

Tampilan pada website dirancang menggunakan CSS. Ditahap ini akan mengatur tata letak menu dan konten yang akan ditampilkan. Konten akan berisi mengenai informasi batik seperti, motif, makna, ciri khas dan sejarah. Selain itu pada proses ini juga melakukan beberapa pengaturan seperti ukuran huruf, tipe huruf (font), animasi atau efek, Background tampilan, ukuran halaman, dan ukuran gambar. Semua hal tersebut diatur untuk memberikan kesan menarik bagi para pengunjung dan mendapatkan umpan balik yang baik.

Langkah terakhir dalam perancangan ini adalah meng-upload hasil

perancangan ke server dan melakukan hosting, agar website ini dapat diakses

secara luas oleh masyarakat. Setelah website ter-upload ke server, perlu dilakukan

pengujian terlebih dahulu untuk memastikan bahwa website dapat digunakan

dengan baik. Seiring berjalannya waktu, akan dilakukan proses pemeliharaan

(Maintenance), evaluasi, dan pembaharuan konten.

(37)

25 Universitas Kristen Maranatha Gambar III. 2 Flowchart

Saat mengunjungi website terlebih dahulu akan melewati hosting dengan mengetikan URL atau Domain. Selanjutnya pengunjung akan diminta untuk melakukan log in terlebih dahulu. Jika didapati belum mempunyai akun maka, akan dialihkan untuk membuat akun terlebih dahulu. Setelah melakukan log in maka akan menuju halaman Home yang berisi mengenai gambaran utama dari website. Pada halaman Home terdapat sebuah tombol menu dimana apabila menekan tombol tersebut akan terdapat enam pilihan halaman, setiap halaman merupakan informasi mengenai batik dari 6 provinsi yang terdapat di pulau Jawa.

Halaman tersebut berisi konten mengenai informasi batik seperti motif, sejarah,

dan makna. Jika pengunjung berada di salah satu halaman batik daerah tertentu

(38)

Universitas Kristen Maranatha dan ingin berganti halaman maka, dapat menekan kembali tombol menu dan memilih halaman yang ingin dikunjungi. Selain itu, pada setiap halaman terdapat tombol pilihan home yang mana jika ditekan akan kembali ke halaman Home.

Alur sistem website akan sama apabila diakses menggunakan komputer atau menggunakan gawai. Yang berbeda hanyalah pada ukuran halaman dimana akan menyesuaikan dengan layar pada perangkat yang digunakan.

Proses perancangan akan dibagi menjadi dua bagian yaitu perancangan tampilan pada komputer dan perancangan tampilan pada gawai dengan masing- masing tampilan mempunyai konfigurasi berbeda.

III.2 Halaman

Pada perancangan website ini terdapat 11 halaman ( 6 halaman informasi, 1 halaman login, 1 halaman pendaftaran akun, 1 halaman konfirmasi pendaftaran, 1 halaman Home, dan 1 halaman menu). Seluruh tampilan halaman didesain menggunakan CSS. Untuk ukuran halaman log in, pendaftaran akun, dan halaman konfirmasi pendaftaran. Pada tampilan komputer akan berukuran dengan lebar 1920 px dan tinggi 1080 px, sedangkan tampilan pada gawai mempunyai lebar 393 px dan tinggi 851px. Enam halaman informasi akan mempunyai ukuran yang berbeda-beda untuk menyesuaikan konten yang akan ditampilkan.

III.2.1 Halaman Log in

Aktivitas Log in merupakan langkah awal ketika mengakses website. Ini dilakukan agar sistem dapat mengidentifikasi seseorang yang akan mengakses website. Jika pengunjung belum mempunyai akun, maka terlebih dahulu untuk melakukan pendaftaran akun.

<!DOCTYPE html>

<head>

<title>LOGIN PAGE</title>

</head>

<body>

<h1>SELAMAT DATANG</h1>

<h2> Belum ada akun ? <br>

<a href="signup.html">DAFTAR</a>

</h2>

(39)

27 Universitas Kristen Maranatha

</form>

</body>

</html>

Program tersebut akan menghasilkan sebuah form berbentuk kotak atau seperti box ketika pada box tersebut akan terdapat sebuah kolom pengisian untuk username dan password. Lalu ada tombol yang apabila ditekan akan melanjutkan ke halaman Home.

III.2.2 Halaman Pendaftaran Akun

Halaman pendaftaran akun akan muncul jika pengunjung ingin mendaftar agar dapat masuk ke website. Pendaftaran dapat dilakukan menggunakan E-Mail.

Hal-hal yang harus diisi saat mendaftar akun adalah Username, Password, dan Nomor telepon. Jika langkah tersebut selesai maka, pengunjung dapat log in dan bisa masuk ke website. Berikut ini kode program untuk halaman pendaftaran akun.

<!DOCTYPE html>

<head>

<title>PENDAFTARAN AKUN</title>

</head>

<body>

<h1>ISI DATA BERIKUT :</h1>

</form>

</body>

</html>

III.2.3 Halaman Konfirmasi Pendaftaran

Pada halaman ini akan muncul apabila pendaftaran berhasil dilakukan.

Nantinya pada halaman ini akan terhubung pada halaman log in, sehingga pengunjung yang sudah melakukan pendaftaran dapat langsung melakukan log in untuk masuk ke halaman Home. Kode program pada halaman ini akan sebagai berikut.

</html>

</head>

<body>

(40)

Universitas Kristen Maranatha

<span>SELAMAT DATANG</span>

</div>

</rect>

</svg>

<span>BACK TO LOGIN</span>

</div>

<span>AKUN ANDA SUDAH TERDAFTAR</span>

</div>

</body>

</html>

III.2.4 Halaman Home

Halaman Home menampilkan gambaran garis besar mengenai website seperti tujuan dan isi konten. Pada halaman Home terdapat sebuah tombol menu berfungsi untuk menghubungkan halaman-halaman informasi. Pengunjung dapat memilih untuk mengunjungi halaman informasi mana terlebih dahulu dan cukup menekan pada judul halamannya, nantinya akan langsung terhubung dengan halaman yang dipilih.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<img id="vi_color_all_11-13" src="vi_color_all_11-13.png"

srcset="vi_color_all_11-13.png 1x, [email protected] 2x">

<span>WEBSITE KP</span>

(41)

29 Universitas Kristen Maranatha

</div>

<span>MEDIA INFORMASI BATIK JAWA</span>

</div>

</ellipse>

</svg>

</path>

</svg>

</path>

</svg>

</div>

</div>

<img id="Logo_UKM-TE-biru" src="Logo_UKM-TE-biru.png"

srcset="Logo_UKM-TE-biru.png 1x, [email protected] 2x">

</div>

</body>

</html>

III.2.5 Halaman Informasi

Halaman informasi berisikan informasi mengenai batik dari 6 provinsi yang berada di pulau Jawa. Setiap provinsi akan diwakili satu kota yang akan menampilkan batik khas daerah mereka. Berikut ini 6 halaman batik daerah.

III.2.5.1 Halaman Batik Banten

Pada halaman ini menampilkan informasi mengenai motif-motif seperti,

Dataluya, Mandhalikan, Kawangsan, dan Sabakingking. Ukuran tampilan pada

(42)

Universitas Kristen Maranatha komputer mempunyai tinggi 2825px dan lebar 1920 px, sedangkan pada tampilan gawai akan mempunyai tinggi 2125px dan lebar 393 px.

<!DOCTYPE html>

<html>

<head>

<title>banten</title>

</head>

<body>

<span>Banten</span>

</div>

<span>Batik Banten</span>

</div>

<span>penjelasan</span>

</div>

<span>Motif Dataluya</span>

</div>

<span>penjelasan.</span>

</div>

<span>Motif Dataluya</span>

</div>

<span>Motif Mandhalikan </span>

</div>

<span> penjelasan.</span>

</div>

<span>Motif Mandhalikan </span>

</div>

(43)

31 Universitas Kristen Maranatha

</div>

<span>Motif Kawangsan </span>

</div>

</div>

<span>Motif Kawangsan </span>

</div>

<span>Motif Sabakingking</span>

</div>

</div>

<span>Motif Sabakingking</span>

</div>

</body>

</html>

III.2.5.2 Halaman Batik DKI Jakarta

Pada halaman ini berisi informasi mengenai motif-motif batik yang terdapat di daerah provinsi DKI Jakarta seperti, Ondel-ondel, Nusa Kelapa, Ciliwung, Rasamla, dan Salakanagara. Ukuran tampilan pada komputer mempunyai panjang 3961px dan lebar 1920px, sedangkan pada tampilan gawai mempunyai panjang 3502 px dan lebar 393 px.

<html>

<head>

<title>jakarta</title>

</head>

(44)

Universitas Kristen Maranatha

<body>

<span>Jakarta</span>

</div>

<span>Batik Betawi</span>

</div>

<span> penjelasan </span>

</div>

<span>Motif Ondel-Ondel</span>

</div>

<span>penjelasan.</span>

</div>

<span>Motif Nusa Kelapa </span>

</div>

</div>

<span>Motif Ciliwung</span>

</div>

</div>

<span>Motif Rasamala </span>

</div>

</div>

<span>Motif Ondel-Ondel</span>

(45)

33 Universitas Kristen Maranatha

</div>

<span>Motif Nusa kelapa </span>

</div>

<span>Motif Ciliwung</span>

</div>

<span>Motif Rasamala</span>

</div>

<span>Motif Salakanagara </span>

</div>

</div>

<span>Motif Salaknagara</span>

</div>

<span>Motif Pucuk Rebung </span>

</div>

</div>

<span>Motif Pucuk Rebung</span>

</div>

</body>

</html>

III.2.5.3 Halaman Batik Cimahi

Pada halaman batik Cimahi ini akan mewakili batik yang ada di provinsi

Jawa Barat. Halaman ini akan berisi informasi mengenati motif-motif batik yang

(46)

Universitas Kristen Maranatha terdapat di kota Cimahi seperti, Anyaman Awi, Pusaka Kujang, Sampeu Cireundeu, Militer, dan Curug Cimahi. Ukuran tampilan pada komputer mempunyai panjang 3780px dan lebar 1920px, sedangkan tampilan pada gawai mempunyai panjang 2978px dan lebar 393px.

<html>

<head>

<title>jawabarat</title>

</head>

<body>

<span>Jawa Barat</span>

</div>

<span>Batik Cimahi</span>

</div>

</div>

<span>Motif Anyaman Awi</span>

</div>

<span> penjelasan. </span>

</div>

<span>Motif Pusaka Kujang</span>

</div>

</div>

<span>Motif Sampeu Cireundeu </span>

(47)

35 Universitas Kristen Maranatha

</div>

</div>

<span>Motif militer Cimahi</span>

</div>

</div>

<span>Motif Anyaman Awi</span>

</div>

<span>Motif Pusaka Kujang</span>

</div>

<span>Motif Sampeu</span>

</div>

<span>Motif Militer</span>

</div>

<span>Motif Curug Cimahi</span>

</div>

</div>

<span>Motif Curug Cimahi</span>

</div>

</body>

</html>

III.2.5.4 Halaman Batik Lasem

(48)

Universitas Kristen Maranatha Pada halaman ini akan berisi informasi batik terdapat di provinsi Jawa Tengah yaitu batik Lasem. Halaman ini menampilkan informasi mengenai motif- motif pada batik lasem seperti Latohan, Gunung Ringgit, dan Kricak. Ukuran tampilan pada komputer akan mempunyai panjang 2553px dan lebar 1920 px, sedangkan tampilan pada gawai mempunyai panjang 1926 px dan lebar 393 px.

<html>

<head>

<title>jawatengah</title>

</head>

<body>

<img id="vi_color_all_16-09_g" src="vi_color_all_16-09_g.png"

srcset="vi_color_all_16-09_g.png 1x, [email protected] 2x">

<span>Jawa Tengah</span>

</div>

<span>Batik Lasem</span>

</div>

</div>

<span>Motif Latohan</span>

</div>

</div>

<span>Motif Kricak</span>

</div>

</div>

<span>Motif Gunung Ringgit </span>

</div>