BAB II LANDASAN TEORI
2.1. Metode Penelitian Metode penelitian ini menggunakan studi literatur. Studi literatur ini dilakukan dengan cara mengumpulkan data atau informasi yang berkaitan dengan Game, GDLC (Game Development Life Cycle), Construct2, HTML5, JavaScript, CSS3, melalui: a) Artikel, yang didapat melalui internet. Kata kunci yang didapat untuk mencari artikel ini diantaranya, HTML5, JavaScript, Construct2, CSS3, GDLC b) Jurnal penelitian atau karya ilmiah, yang didapat melalui situs resmi perpustakaan nasional yaitu e-resource.perpusnas.go.id c) Buku, yang didapat melalui perpustakaan Universitas Mercu Buana Jakarta dan juga melalui internet yaitu dengan mencarinya di books.google.com secara gratis
2.2. Metode Pengembangan Sistem Pada perancangan aplikasi game ini penulis menggunakan metode GDLC (Game Development Life Cycle), dan penulis menganut kepada GDLC versi Heater Chandler‟s
GDLC. Karena metode
yang
dikembangkan Heater Chandler‟s GDLC cukup mudah dan metode tersebut merupakan yang merujuk kearah pendekatan yang sistematis dan sekuensial melalui tahap-tahap yang ada untuk membangun sebuah aplikasi perangkat lunak dengan tahapan yang tidak terlalu banyak tetapi mencakup kesemua tahapan.
2.2.1. Metodologi GDLC (Game Development Life Cycle) GDLC (Game Development Life Cycle) adalah sebuah kerangka yang didalamnya berisi tahapan-tahapan pekerjaan yang dilakukan saat membangun sebuah game, Sehingga dapat mengekspresikan
5
http://digilib.mercubuana.ac.id/
logika maupun fisik antarmuka eksternal yang ditampilkan. (Widyani, 2013) Terdapat beberapa metode pada GDLC yang ada pada saat ini antara lain adalah sebagai berikut :
A.
Blitz Games Studios GDLC Blitz Games Studios GDLC mendefinisikan enam langkah pada
GDLC, rangkaianya sebagai berikut :
Gambar 2.1 Blitz Games Studios GDLC Dimana langkah-langkah pengembangan yang ditunjukan pada gambar 2.1 dimulai dari : a) Pitch adalah langkah pertama yang harus di lakukan saat membangun sebuah game adalah desain dan konsep awal. b) Pre-Production adalah langkah setelah proses desain dan konsep awal tersusun rapi maka akan di lanjutkan ke tahap Pre-Production untuk mengetest desian dan konsep game. c) Main Production adalah tahap ini adalah untuk merealisasikan desain dan konsep game setelah melalui ujicoba. d) Alpha adalah langkah setelah melalui proses panjang maka permainan kemudian diuji oleh tim internal yang disebut Alpha. e) Beta adalah langkah ketika pembangunan telah memenuhi standart pengujian Alpha maka penguji tahap berikutnya disebut Beta. f) Master adalah langkah jika pengujian Alpha dan Beta telah dilalui maka permainan ini diluncurkan pada tahap master. (http://www.blitzgamesstudios.com/blitz_academy/game_dev/proje ct_lifecycle)
6
http://digilib.mercubuana.ac.id/
http://digilib.mercubuana.ac.id/
http://digilib.mercubuana.ac.id/
http://digilib.mercubuana.ac.id/
ulang dan menggunakan tahapan pengujian internal maupun eksternal dalam satu tahapan. Dari emapat GDLC yang disebutkan, dapat di simpulkan bahwa proses pengembangan game terdiri dari tiga tahapan utama, tahapan tersebuat sebagai berikut : a) Desain dan prototipe yaitu menciptakan desain awal dan konsep permainan. b) Produksi yaitu proses pembuatan game dari semua aspek yang telah di tentukan. c) Pengujian yaitu proses pengetesan game tersebuat apakah game yang telah dibuat sesuai atau tidak dengan konsep yang telah ditentukan. 2.3. Game Game merupakan kata dalam bahasa inggris yang berarti permainan. Permainan
yang menggunakan media elektronik untuk sarana bermain,
Permaianan merupakan sebuah hiburan berbentuk multimedia yang di buat semenarik mungkin agar pemain bisa mendapatkan sesuatu sehingga adanya kepuasaan. Game juga dapat dijadikan sebagai sarana edukasi dengan tujuan spesifik sebagai alat pengenalan angka, huruf, warna, matematika, belajar menyusun strategi sampai sebagai sarana belajar bahasa asing, selain itu game juga bisa menjadi salah satu sarana refreshing dikala kita sedang stres. Untuk tujuan tertetu game di dunia semakin pesat, tak terkecuali di Indonesia. Game saat ini sudah menjadi alternatif hiburan industri game sudah menjadi suatu hal yang menjanjikan, terbukti dengan banyaknya perusahaan pengembang dan produksi game dari Amerika, Eropa, dan Asia Tenggara. Negara Indonesia masih terhitung sebagai konsumen game, ini dilihat dari tingkat konsumen game yang sangat tinggi, terutama game konsol, LAN, online dan game yang berkembang di Smartphone. Walau terhitung sebagai negara konsumen, di Indonesia sendiri sudah ada pengembang game ada yang berdiri sendiri dan ada yang bekerja sama dengan pihak asing untuk membuat game. (Ridwan & Erdhi, 2012)
10
http://digilib.mercubuana.ac.id/
2.3.1. Sejarah Perkembangan Game Perkembanga game saat ini sangatlah pesat seiring semakin banyaknya penikmat game serta didukungnya sarana untuk bermain dan
membuat
game
maka,
berikut
sedikit
ulasan
tentang
perkembangan game dari masa ke masa. Dimulai pada tahun 1947 ditangan Thomas T, Goldsmith jr, dan Estle Ray Mann adalah tahun pertama dimana game mensimulasi peluru yang ditembakan pada terget yang terinspirasi oleh perang dunia II yang didesain untuk dimainkan dengan layar CRT (Cathode Ray Tube), aplikasi ini dipatenkan pada tanggal 14 desember 1948. Sedangkan game grafis pertama dibuat oleh A.S. Douglas yang membuat game OXO di Universitas of Cambridge pada tahun 1952. Game portable genggam yang pertama dibuat adalah Tic Tac Toe ditahun 1972 oleh Waco Company. Tahun 1958 menciptakan game Tennis for Two pada osiloskop. Game ini menampilkan lapangan tenis sederhana dipandang dari samping. Bola seakan dipengaruhi oleh gravitasi dan harus melewati net/jaring. Dengan dua kontrol yang masing-masing dilengkapi knop untuk mengarahkan bola dan sebuah tombol untuk memukul bola sampai melewati net. Tahun 1972 dirilis perangkat video game pertama untuk pasar rumahan Magnavox Odyssey yang dihubungkan dengan televisi. Meski tidak sukses besar, perusahaan lain dengan produk yang sama harus membayar lisensi, tetapi kesuksesan menjemput sejak Atari meluncurkan sebuah video game ping-pong pada 29 November 1972. Berangkat dari sini, video dan komputer game menjadi populer dan hobi baru di saat PC baru saja mulai dikenal dan dipakai secara luas. Mistery House merupakan rancangan ibu rumah tangga Roberta Williams, yang dipercaya untuk game petualangan pertama dengan grafis pada Apple II. Meski interface untuk input perintah masih berupa teks, ilustrasi grafik hitam putih sebuah rumah bergaya viktoria merupakan gebrakan baru di masa itu. Pada awal tahun 1980-an ditandai oleh Nintendo, Kesuksesan LCD genggam ini menciptakan
11
http://digilib.mercubuana.ac.id/
banyak pengikut untuk membuat yang sama dengan mengadopsi game-game popular, awal tahun 1980-an juga ditandai dengan hadirnya media penyimpan CD-ROM yang dalam waktu singkat menjadi populer. Era game 3 dimensi (3D) dengan perspektif orang pertama dan multiplayer game mulai muncul di era ini. Suara dan musik semakin berkembang di pertengahan 1980-an seiring dengan hadirnya produk sound card. Jadi, memang terasa bahwa pasar game komputer semakin berkembang sejalan dengan perkembangan teknologi pendukungnya. Teknologi
game
online
berawal
dari penemuan metode
networking computer tahun 1970-an oleh militer Amerika. Pada game online ini pertama kali menggunakan jaringan LAN atau Local Area Network tetapi sesuai dengan perkembangan teknologi akhirnya game oline menggunakan jaringan yang lebih luas lagi seperti www atau world wide web atau yang lebih dikenal dengan internet yang bisa diakses dengan menggunakan nirkabel, untuk bisa memainkan game online terlebih dahulu kita harus menginstal program game tersebut, untuk memulai game online terlebih dahulu kita harus register atau mendaftar dan kita langsung dapat memainkannya. Bedanya dengan game offline, dalam bermain game online kita tidak harus berpergian, kita hanya butuh duduk di depan komputer dan bisa langsung menikmati permainan. Perbedaan besar lainnya adalah dengan menghubungkan internet secara global, pemain bisa memiliki kesempatan untuk bersaing dan mendapatkan teman dari seluruh dunia. Contoh game online adalah Ragnarok Online, RF Online, Ayo Dance, Perfect World, Yugioh! Online.(Rosa,2013) 2.3.2.Macam-macam Game a) Action Game Action Game dikatagorikan sebagai permainan dengan aksi di dalam game tersebut. b) Adventure Game
12
http://digilib.mercubuana.ac.id/
Adventure Game dikatagorikan sebagai permainan dengan petualangan memecahkan teka teki. c) Racing game Racing game dikatagorikan sebagai permaianan dengan balapan bertujuan sebagai yang tercepat. d) Game Simulation Game Simulation dikatagorikan sebagai permaianan bayangan atau dibuat dari hal-hal yang ada di dunia nyata. e) Fighting Fighting dikatagorikan sebagai permainan pertarungan yang bertujuan mengalahkan musuh dengan karakter masing-masing yang berbeda-beda. f) Sports Sports dikatagorikan sebagai permainan olahraga yang di sesuaikan dengan olahraga di dunia nyata. g) Strategy game Strategy
game
dikatagorikan
sebagai
permainan
yang
membutuhkan pemikiran yang tepat agar mendapat kemenangan. 2.3.3.Komponen-komponen Game Didalam sebuah game terdapat beberapa komponen, sebagai berikut: a) Grafik Grafik merupkan komponen didalam game yang berfungsi untuk menghidupkan tampilan dari suasana game tersebut. b) Suara Dengan adanya suara game tersebut akan menarik sehingga pemain dapat merasakan seolah-olah ada didalam game tersebut. c) AI /Artificial Inteligence (kecerdasan buatan) Kecerdasan buatan atau AI menjadi komponen dalam sebuah game karena dengan adanya kecerdasan buatan atau AI maka game akan menjadi lebih menantang, dengan kecerdasan buatan
13
http://digilib.mercubuana.ac.id/
atau AI game dapat berfikir mengalahkan pemain, sehingga membuat game tersebut terasa semakin menarik dan menantang. d) Skenario game Skenario menjadi komponen game karena dengan adanya skenario didalam game maka pemain akan bermain sesuai petunjuk, sehingga game tersebut memiliki cerita yang membuat pemain lebih asik memaikan game tersebut. e) Multiplayer Multiplayer adalah salah satu komponen game, karena denga multiplayer maka pemain bisa bermain dengan teman-temanya bahkan oranglain di dalam game tersebut. 2.3.4.Game Design Document Game Design Document adalah sebuah rancangan yang berisi element penting dalam pembuatan game yang menjadi panduan bagi tim developer dalam proses pembuatan game. Game Design Document besifat dinamis dengan kata lain masih bisa di update demi perkembangan
game
tersebut
kecuali
kerangka
utama
dari
keseluruhan konsep game, umumnya berupa mekanisme inti game tersebut. Unsur-unsur yang terdapat pada game design document adalah sebagai berikut : a) Latar cerita adalah alur cerita dari game itu sendiri. b) Mekanisme game adalah alur yang mencakup lavel dan tahapantahapan game c) Visual pendukung adalah Sebagai pengembangan visual atau pengembangan konsep design 2.3.5.Game Engine Game engine adalah suatu software yang digunakan untuk membuat game. Fungsi utama dari game engine adalah sebagai renderer grafik 2D dan 3D, Physics engine, pengaturan audio,
14
http://digilib.mercubuana.ac.id/
http://digilib.mercubuana.ac.id/
2.4. Construct 2 Software construct 2 adalah software pembuat game berbasis HTML 5 yang didesain untuk game 2 dimensi, software ini dapat digunakan oleh siapa saja bahkan orang awam pun dapat menggunakannya untuk membuat game dengan construct 2 tidak memerlukan bahasa pemrograman (https://www.scirra.com/construct2) 2.4.1. Start Page Ketika pertama kali mau membuka Construct 2 akan tampil menu Start Page yang terlihat seperti ini:
Gambar 2.6 Halaman Utama Start Page Construct 2 Halaman ini akan membantu untuk memulai sebuah projek karena di start page ini memliki beberapa link yang berguna untuk membuat projek baru, melihat tutorial terbaru di website, melihat projek yang baru dikerjakan , terdapat link facebook, twitter, halaman google+ dll. 2.4.2.The Interface Gambar berikut memperlihatkan bagian-bagian penting dari tampilan software Construct 2
16
http://digilib.mercubuana.ac.id/
Gambar 2.7 Interface Construct 2 a) File Menu and Ribbon Tabs
Gambar 2.8 File Menu dan Ribbon Tabs Construct 2 Construct2 menggunakan ribbon interface yang mirip seperti toolbar tab pada Microsoft Office tombol biru dengan panah ke bawah terdapat menu file dan lain-Jain, ada juga toolbar yang dapat Iangsung digunakan seperti save, undo, redo, dan preview. b) The Layout View
Gambar 2.9 Tampilan Layout View Construct 2 Layout view adalah tempat dimana dapat menempatkan objek I iui adalah layar kerja yang mernasukan objek dan dilayar ini dapat mengarur tata letak benda seperti level dari game, menu atau title screen, menarnbahkan objek, mengubab/ menghapus dan sebagainya.
17
http://digilib.mercubuana.ac.id/
c) View Tabs
Gambar 2.10 Tampilan View Tabs Construct 2 Tab ini memungkinkan user untuk memilih antara tampilan tata letak dan lembar logika dari permainan. d) The Properties Bar
Gambar 2.11 Tampilan Properties Bar Construct 2 Pada bar properties ini akan menampilkan daftar properti dari setiap objek yang diklik dan dapat merubah isi dari bar properties ini sesuai kebutuhan game. e) Project Bar and Layers Bar
Gambar 2.12 Tampilan Project Bar dan Layers Bar Construct 2
18
http://digilib.mercubuana.ac.id/
Project bar berisi gambar dari segala sesuatu didalam projek, di dalamnya terdapat organizing project atau yang dapat digunakan untuk menyusun folder dan sub folder sehingga projek tersusun dengan rapi, managing projek digunakan untuk mengganti nama, menghapus item-item yang telah dibuat, deleting objects digunakan untuk
menghapus objek atau item secara pennanen
karena
menghapus objek atau item pada tampilan layout tidak akan terhapus secara utuh, importing audio terdapat folder khusus musik atau audio folder ini akan mengambil
audio
yang berada dikomputer.
Sedangkan layers bar dapat digunakan untuk menambah lapisan yang berbeda untuk layout, pada layer list terdapat checkbox yang berfungsi untuk menampilkan layer, pada lock icon digunakan untuk mengunci layer yang telah selesai sehingga tidak dapat berubah, number layer dimulai dari angka 0 hingga seterusnya. f) Object Bar
Gambar 2.13 Tampilan Object Bar Construct 2 Bar ini berisi daftar objek dalam game, objek tersebut dapat didrag dan drop dari ini untuk menempatkan objek tersebut dalam layout.
19
http://digilib.mercubuana.ac.id/
g) Status Bar Editor Pada bagian bawah jendela editor terdapat status bar, status ini menunjukkan apakah Construct seperti mengekspor
2 sedang melakukan
pekerjaan
atau menyimpan projek, berapa event dan
ukuran file, koordinat posis mouse, dan presentase zoom level.
h) Top-right buttons
Gambar 2.14 Tampilan Top-right Buttons Construct 2 Windows bisa meminimalkan, memaksimalkan dan tombol close terdapat juga tombol untuk membuka dialog tentang infonnasi dan kredit Construct 2
2.5. HTML5 HTML 5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web (WWW), sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML. HTML5 menempatkan beberapa penekanan pada perampingan markup yang sebenarnya diperlukan untuk membuat sebuah halaman yang
20
http://digilib.mercubuana.ac.id/
memvalidasi standar W3C dan menghubungkan semua CSS yang diperlukan, JavaScript dan file gambar (Frain,2012) 2.5.1.Dasar-dasar HTML Fungsi utama HTML ialah memberi perintah pada browser untuk melakukan manipulasi tampilan melalui tag-tag yang ditulis dalam HTML. Dengan demikian, browser akan menghasilkan tampilan yang sesuai dengan perintah-perintah yang sudah dibuat atau ditetapkan terlebih dahulu. Untuk menuliskan suatu dokumen HTML dapat digunakan perangkat lunak sederhana ataupun khusus, yang dapat menghasilakan file Text ASCII, diantaranya: a) Notepad b) Dreamweaver c) Ultraedit (Taryana & Koesheryatin, 2014)
2.5.2. Tujuan HTML5 Berikut tujuan dibuatnya HTML5 : a) Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript b) Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash ) c) Penanagan kesalahan yang lebih baik d) Lebih markup untuk menggantikan scripting e) HTML5 merupakan perangkat mandiri f) Proses pembangunan dapat terlihat untuk umum
2.5.3. Fitur HTML5 Berikut Fitur baru dalam HTML5 : a) Unsur kanvas untuk menggambar b) Video dan elemen audio untuk media pemutaran c) Dukungan yang lebih baik untuk penyimpanan secara offline
21
http://digilib.mercubuana.ac.id/
d) Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section e) Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
2.5.4. Tampilan Dokumen HTML Sederhana Suatu dokumen HTML yang paling sederhana, setidak-tidaknya mempunyai elemen seperti dibawah ini.
Isi
Gambar 2.15 Struktur Dokumen HTML a) Setiap
dokumen
HTML
terdiri
atas
,
, <TITLE> DAN . b) Diantara perintah <TITLE> dengan terdapat bagian judul untuk dokumen yang akan dibuat c) Antara dengan disebut sebagai bagian pertama d) Anatara dengan disebut bagian kedua/isi (Taryana & Koesheryatin, 2014) 2.6. JavaScript JavaScript adalah bahasa pemrograman yang khusus untuk halaman web/HTML agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa
22
http://digilib.mercubuana.ac.id/
pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program. JavaScript adalah bahasa pemrograman web. Mayoritas situs web modern menggunakan JavaScript, dan semua browser web modern pada desktop, konsol game, tablet dan smartphone termasuk juru javascript, membuat javascript yang paling terlihat di sebagian besar pemrograman di mana saja dalam sejarah. JavaScript adalah bagian dari trias teknologi yang semua pengembang web harus belajar: HTML untuk menentukan isi dari halaman web, css untuk menentukan penyajian halaman web dan javascript untuk menentukan perilaku halaman web. Ada beberapa hal yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil, Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t. Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dan banyak yang lainnya. (Flanagan, 2010)
2.6.1.Menjalankan JavaSript Untuk dapat mempelajari JavaScript, ada dua peranti yang diperlukan, yaitu browser dan teks editor. Teks editor adalah sebuah pengolah kata (word processor) yang menghasilkan file dalam format ASCII murni. Jika kita pengguna windows, kita bisa menggunakan Notepad, Wordpad, atau Ultraedit Text Editor. Selain itu, browser web yang akan anda gunakan harus mendukung JavaScript. Kita dapat menggunakan Internet Explorer, Opera, Firefox dan lainnya. Kode program JavaScript dapat dituliskan langsung pada file HTML menggunakan tag container <SCRIPT>. Dengan kata lain, kita
23
http://digilib.mercubuana.ac.id/
tidak perlu menuliskan program JavaScript pada file terpisah. (Taryana & Koesheryatin, 2014) Contoh :
2.6.2.Tipe Data Pada JavaScript Berikut ini adalah contoh tipe data dasar pada JavaScript: a) Tipe Numerik JavaScript hanya mengenal dua macam tipe numerik, yaitu bilangan bulat dan bilangan real. Untuk bilangan bulat kita bias mempresentasikan dengan bilangan decimal, octal, atau heksadesimal. Contoh: var A = 100 ; var A = 0 x 2F Untuk pendeklarasian tipe bilangan real, bias menggunakan tanda titik atau notasi ilmiah (notasi E). Contoh: var
a = 123.567
var
b = 1.234567E+3
b) Tipe String Untuk pendeklarasian tipe string dapat dilakukan dengan cara menuliskan string diantara tanda tunggal („) atau tanda petik ganda (“). Contoh: var
A = „Ini pendeklarasian String‟ ;
var
C = “Ini juga string” ;
24
http://digilib.mercubuana.ac.id/
c) Tipe Boolean Tipe Boolean hanya mempunyai nilai true atau false. Tipe ini biasanya digunakan untuk mengecek suatu kondisi atau keadaan. Contoh: Var X = (Y>90); Pada contoh menunjukan bahwa jika Y lebih besar dari 90 maka X akan bernilai True. d) Tipe Null Tipe null digunakan merepresentasikan variable yang tidak diberi nilai awal (inisialisasi). (Taryana & Koesheryatin, 2014) 2.7. Cascading Style Sheet (CSS) Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Cascading Style Sheets (CSS) memberikan kontrol kreatif atas tata letak dan desain halaman web Anda. Menggunakan CSS, Anda dapat membuat teks situs Anda dengan headline yang eye-catching, drop caps, dan borders. Anda juga dapat mengatur gambar dengan presisi, membuat kolom dan spanduk, dan menyoroti link Anda dengan efek rollover dinamis. Anda bahkan dapat membuat elemen memudar dalam atau keluar dari tampilan, memindahkan objek di sekitar halaman, atau membuat tombol perlahan berubah warna ketika mouse pengunjung di atasnya (McFarland, 2013) CSS bekerja dengan HTML, tapi tidak HTML. Ini adalah bahasa yang berbeda sama sekali. Sementara HTML menyediakan struktur untuk dokumen dengan mengorganisir informasi ke header, paragraf, daftar bullet,
25
http://digilib.mercubuana.ac.id/
dan sebagainya, CSS bekerja Hand-in-hand dengan browser web untuk membuat HTML terlihat baik. Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu. Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut. 2.8. Flowchart Flowchart adalah bagan (chart) yang menunjukan alir (flow) didalam program atau prosedur sistem secara logika. Bagan alir biasanya digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi. Pada waktu akan menggambar suatu bagan alir, analisis sitem atau program dapat mengikuti pedoman sebagai berikut: a) Dibuat atau digambar dari atas kebawah mulai dari bagian kiri suatu halaman b) Kegiatan dalam bagan alir harus ditunjukkan dengau jelas c) Harus ada dari mana kegiatan akan di mulai dan dimana akan berakhir d) Setiap kegiatan dalam bagan alir harus digunakkan suatu kata yang mewakili pekerjaan e) Urutannya harus jelas f) Kegiatan yang terpotong pada satu halaman harus disambung pada tempat lain. g) Pergunakan simbol flowchart yang standart Simbol flowchart yang biasanya digunakan dalam bagian alir program adalah sebagai berikut:
26
http://digilib.mercubuana.ac.id/
Tabel 2.2 Simbol Flowchart
No. 1 2 3 4
Simbol
Nama dan fungsi Simbol input/output: digunakan unruk adanya proses pembacaan data file input, atau melakukan penulisan pada file keluaran (output) Simbol proses digunakkan uutuk mewakili suatu proses Simbol ini bisa sebagai dokumen berbentuk kertas, data masukkan atau sebuah laporan yang dihasilkan oleh suatu proses tertentu Simbol garis alir digunakkan untuk mnuujukkan arus dari proses Simbol penghubung (connector symbol ) untuk meuunjukkan
5
sambungan dari bagan alir yang terputus di halaman yang masih sama atau halaman lainnya
6
7 8
9
10
Simbol
keputusan
digunakkan
untuk
suatu penyeleksian
kondisi di dalam program, Simbol Proses terdefinisi untuk menunjukkan suatu opersasi yang rinciannya ditunjukkan di tempat lain Simbol Persiapan digunakan untuk memberi harga awal suatu besaran Simbol titik terminal digunakkan untukmeuunjukkan awal dan akhir suatu proses Simbol yang menunjukkan penjelasan operasi/pekerjaan secara manual/ bukan computer
11
Memberikan gambaran rnasukkan secara manual
12
Memberikan gambaran arsip komputer berbentuk pita magnetic Menggambarkau tentang data atau arsip secara permanen dan
13
merupakan tempat penyimpanan doknmen yang tidak akan di proses lagi pada sistem akuntansi yang ber3sangkutan
14
Menunjukkan tempatpenyimpanan arsip sementara
27
http://digilib.mercubuana.ac.id/
2.9. Struktur Navigasi Struktur navigasi digunakan sebagai penuntun alur sebuah aplikasi, dapat pula dianalogikan sebagai penuntun alur sebuah aplikasi atau flowchart dalam perancangan bahasa pemrograman. struktur navigasi berfungsi untuk menggambarkan hubungan dan rantai kerja seluruh elemen yang akan digunakan dalam aplikasi. Struktur navigasi sebaiknya dibuat sebelum aplikasi dibuat agar pembuatan aplikasi menjadi lebih mudah dan sistematis. Struktur navigasi dikelompokan menjadi 4 struktur berbeda, yaitu: 2.9.1. Struktur Navigasi Linear Struktur navigasi linear hanya mempunyai
satu rangkaian
cerita yang berurut, yang menampilkau satu demi satu tampilan layar secara berurut menurut urutannya Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.
Gambar 2.16 Struktur Navigasi Linear
2.9.2. Struktur Navigasi Hirarki Tampilan
yang dapat ditampilkan
pada sruktur jenis
ini
adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya. Struktur navigasi
hirarki
biasa
disebut
struktur
bercabang,
merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan
pada
menu pertama akan disebut sebagai Master Page (halarnan utama pertama), halaman utama ini mempunyai halaman percabangan 28
http://digilib.mercubuana.ac.id/
yang disebut Slave Page (halaman pendukung). Jika salah satu halaman
pendukung
dipilih
atau
diaktifkan,
maka
tampilan
tersebutakan bernama Master Page (halaman utama kedua)
dan
seterusnya. Pada struktur navigasi ini tidak diperkenankan adanya tampilan secara linier
Gambar 2.1 Struktur Navigasi Hirarki
2.9.3. Struktur Navigasi Non Linear Non Iinier merupakan pengembangan struktur navigasi linier hanya saja pada struktur ini diperkenankan untuk membuat percabangan. Percabangan pada struktur non linier berbeda dengan percabangan
pada struktur hirarki, pada struktur ini kedudukan ini
semua page sama, sehingga tidak dikenal adanya master atau slave page.
Gambar 2.18 Struktur Navigasi Non Linear
29
http://digilib.mercubuana.ac.id/
2.9.4. Struktur Navigasi Campuran Struktur Navigasi Campuran, struktur sebelumnya
merupakan
gabungan dari
dan disebut juga struktur navigasi bebas,
maksudnya adalah jika suatu tampilan membutuhkan percabangan maka dibuat percabangan.
Struktur ini paling banyak digunakan
dalam pembuatan aplikasi multimedia.
Gambar 2.19 Struktur Navigasi Campuran
30
http://digilib.mercubuana.ac.id/