TA : Pembuatan Website PT. Revtech Solution Dengan Menggunakan HTML5.

DENGAN MENGGUNAKAN HTML5

Oleh :

Nama : Marsela Giovani Herianto

NIM : 08.51016.0023

Program Studi : DIV Komputer Multimedia

SEKOLAH TINGGI

MANAJEMEN INFORMATIKA & TEKNIK KOMPUTER SURABAYA

2012

STIKOM

ix

perusahaan harus pandai-pandai bersaing dalam bidang pemasaran mereka melalui internet. PT.Revtech Solution adalah perusahaan jasa konsultasi sistem dan teknologi informasi yang berdiri di Surabaya sejak tahun 2008. PT Revtech Solution membutuhkan website yang akan digunakan sebagai company profile melalui internet. Perkembangan website sendiri sudah mulai didukung oleh bahasa pemrograman terbaru yaitu HTML5. Dengan fitur yang disediakan di HTML5 ini maka desain website dapat dibuat dengan menambahkan backsound dan video tanpa harus menunggu loading data terlalu lama.

Pembuatan website PT.Revtech Solution dibuat dengan menggunakan metode SWOT (Strenght, Weakness, Opportunity, Target) dan STP (Segmenting,

Targeting, Positioning). Metode tersebut didapat setelah melakukan study eksisting terhadap beberapa website yang menggunakan HTML5.

Bentuk desain website menggunakan kerangka 2 kolom dan tema minimalis warna putih, abu-abu, biru dan hitam. Website ini akan menggunakan backsound menggunakan bahasa inggris yang berisikan informasi mengenai perusahaan. Dapat disimpulkan bahwa dengan memakai HTML5 ini membuat tampilan website lebih interaktif dan komunikatif. Website ini dapat meningkatkan daya tarik konsumen untuk bergabung dengan PT Revtech Solution dalam mengunduh data agar tidak terlalu berat seperti pada flash. Salah satu keunggulan dari website ini adalah dapat menampilkan audio sebagai backsound yang tidak semua website dapat memilikinya.

Kata Kunci : HTML5, PT Revtech Solution, Website, internet, interaktif

STIKOM

xi

KATA PENGANTAR ... ix

ABSTRAK ... x

DAFTAR ISI ... xi

DAFTAR GAMBAR ... xv

DAFTAR TABEL ... xviii

DAFTAR LAMPIRAN ... xix

BAB 1 PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Rumusan Masalah ... 2

1.3 Batasan Masalah ... 3

1.4 Tujuan ... 3

1.5 Manfaat ... 4

BAB II LANDASAN TEORI ... 5

2.1 Gambaran Umum Perusahaan ... 5

2.2 Pengertian Website ... 6

2.2.1 World Wide Web (www) ... 7

2.2.2 Internet ... 7

2.2.3 Jenis-jenis website ... 7

STIKOM

xii

2.3.2 Pengertian HTML5 ... 16

2.3.3 Struktur Dasar HTML5 ... 18

2.4 CSS ... 20

2.4.1 Pengertian Dasar CSS ... 20

2.4.2 Kelebihan dan Kekurangan CSS ... 21

2.4.3 CSS3 ... 23

2.5 PHP ... 26

2.5.1 Pengertian Dasar PHP ... 26

2.5.2 Sintaks Dasar PHP ... 27

2.5.3 Tipe Data pada PHP ... 28

2.5.4 Array ... 29

2.5.5 Struktur Kontrol ... 31

2.5.6 Struktur Perulangan (loop) ... 33

2.5.7 Post dan Get ... 35

2.6 MySQL ... 37

2.6.1 Pengertian Dasar MySQL ... 37

2.6.2 Menghubungkan MySQL ... 38

2.6.3 Membuat Database dengan MySQL ... 39

2.7 Java Script ... 41

2.7.1 Pengertian Dasar Java Script ... 41

2.7.2 Cara Penulisan Java Script ... 42

2.8 Elemen Visual Website ... 43

STIKOM

xiii

3.1 Metode Penelitian dan Pengumpulan Data ... 51

3.1.1 Wawancara/Interview ... 52

3.1.2 Pengamatan/Observasi ... 52

3.1.3 Studi Literatur ... 52

3.1.4 Study Eksisting ... 52

3.2 Hasil Analisa SWOT ... 56

3.3 Segmenting, Targeting, Positioning ... 58

3.3.1 Segmenting ... 58

3.3.2 Target Audien ... 59

3._{3.3 Positioning ... 59}

3.4 Rancangan Penelitian ... 59

3.4.1 Pra Produksi ... 62

3.4.2 Produksi ... 63

3.4.3 Pasca Produksi ... 77

3.5 Publikasi 3.5.1 Poster ... 77

3.5.2 CD ... 79

BAB IV IMPLEMENTASI KARYA ... 81

4.1 Kerangka dan Desain Website ... 81

4.1.1Home ... 82

4.1.2About ... 83

4.1.3Service ... 86

STIKOM

xiv

4.2 Halaman Admin ... 90

4.2.1Index Admin ... 91

4.2.2Portfolio Admin ... 93

4.2.3News Admin ... 94

4.2.4Halaman User Message ... 96

4.3 Cover CD dan Poster ... 97

BAB V PENUTUP ... 101

5.1 Kesimpulan ... 101

5.2 Saran ... 101

DAFTAR PUSTAKA... 102

DAFTAR RIWAYAT HIDUP ... 104

LAMPIRAN ... 105

STIKOM

1 1.1 Latar Belakang Masalah

Seiring dengan berkembangnya teknologi dan informasi dalam berkomunikasi, maka munculah sebuah tuntutan dalam menyampaikan informasi yang profesional dan informatif dalam dunia bisnis. Penyampaian informasi tersebut dapat dilakukan dengan berbagai macam cara, salah satunya adalah dengan menggunakan website.

Website adalah keseluruhan halaman-halaman web yang terdapat dalam sebuah domai yang mengandung informasi. Sebuah website biasanya dibangun atas banyak halaman web yang saling berhubungan (Yuhefizar, S.Kom, 2009:2).

Website merupakan salah satu alternatif dalam menyampaikan informasi dalam dunia bisnis dan juga dianggap sebagai instruksi bisnis yang dapat memberikan kesempatan pertama calon klien atau klien untuk mengenal informasi tentang perusahaan secara informatif. Saat ini teknologi website berkembang dengan pesat website sudah mengalihkan aplikasi dekstop yang selama ini kita kenal.

PT. Revtech Solution adalah perusahaan jasa konsultasi sistem dan teknologi informasi yang berdiri di Surabaya sejak tahun 2008. Website digunakan untuk mengenalkan dan menampilkan portfolio perusahaan melalui internet, bahkan website digunakan untuk kualifikasi tender. Diharapkan klien yang melihat website maka dapat menunjang kelancaran bisnis perusahaan.

STIKOM

Pembuatan website ada berbagai macam cara yang dapat digunakan digunakan, salah satunya adalah bahasa pemrograman HTML5. Riset dari Ovum mengindikasikan kalau para developer sudah mulai meninggalkan sistem pengembangan aplikasi yang menggunakan Java dan Flash. Mereka sudah mulai fokus pada pengembangan aplikasi dengan standar HTML5 yang dirasa lebih mudah untuk membuat aplikasi yang kompatibel dengan berbagai platform.

Perkembangan HTML5 untuk perangkat mobile begitu cepat terutama untuk mendukung format video dan audio. HTML5 didukung oleh berbagai platform untuk menyampaikan konten di browser baik secara online maupun offline, termasuk di dalam Google’s Android, Apple’s iOS, Microsoft’s Windows Phone, dan RIM’s BlackBerry. Dengan HTML5 akan menjadikan tampilan desain website lebih menarik dan memungkinkan penyampaian pesan kepada klien lebih informatif dan efisien. Diharapkan dengan adanya penyampaian pesan kepada konsumen melalui multimedia berupa website maka akan membantu perusahaan agar lebih efektif dan efisien dalam mengenalkan perusahaan dan meningkatkan ketertarikan klien dan dapat didukung oleh beberapa platform.

1.2 Rumusan Masalah

Perumusan masalah dalam pembuatan Tugas Akhir ini adalah:

1. Bagaimana menerapkan HTML5 secara maksimal dalam pembuatan desain

STIKOM

Solution?

3. Bagaimana penyajian informasi dan portfolio yang ada di PT Revtech Solution ini dapat sampaikan dengan baik dan mudah diakses oleh user?

1.3 Batasan Masalah

Batasan masalah dalam pembuatan Tugas Akhir ini adalah: 1. Website yang dibuat adalah website yang bersifat dinamis.

2. Tampilan desain akan selalu menyertakan logo perusahaan dan tema yang hampir sama untuk meningkatkan daya citra perusahaan.

3. Desain multimedia ini membidik konsumen kalangan kelas menengah ke atas dan menarik perhatian konsumen agar tertarik untuk bergabung dengan perusahaan PT Revtech Solution.

4. Bahasa pemrograman yang dipakai adalah HTML5 dan PHP dengan beberapa pendukung yaitu javascript, jquery dan CSS.

5. Bentuk konsep desain yang menarik dan informatif lebih diutamakan dalam pembuatan company profile PT Revtech Solution.

6. Informasi yang dimasukkan ke dalam website sepenuhnya berasal dari PT Revtech Solution.

STIKOM

1. Untuk membuat desain website yang unik dengan menggunakan HTML5. 2. Untuk menciptakan website yang bersifat dinamis sebagai company profile

PT. Revtech Solution

3. Untuk mengetahui langkah-langkah pembuatan website yang baik dan mudah diakses oleh user.

1.5 Manfaat

Yang diharapkan dalam pembuatan Tugas Akhir ini adalah:

1. Membantu PT Revtech Solution dalam mengenalkan perusahaan mereka di dunia maya dengan cara yang lebih informatif dan menarik kepada klien. 2. Mengetahui dan menerapkan perkembangan HTML5 di dunia maya.

3. Memberikan masukan kepada masyarakat bahwa website sangatlah penting untuk proses pengenalan perusahaan.

STIKOM

5 2.1 Gambaran Umum Perusahaan

PT. Revtech Solution adalah perusahaan jasa pengembangan dan konsultasi sistem dan teknologi informasi berpusat di Surabaya sejak tahun 2008. PT. RevTech Solution menyediakan layanan antara lain: pembuatan dan pengembangan perangkat lunak sistem informasi, keamanan dan jaringan komputer, serta layanan konsultasi dan pelatihan sistem dan teknologi informasi. PT. RevTech Solution menyediakan solusi bisnis kepada perusahaan sebagai partner agar dapat bekerjasama saling menguntungkan melalui pengembangan sistem dan teknologi informasi guna meningkatkan produktivitas, efisiensi dan efektivitas bagi kemajuan perusahaan di masa mendatang.

Gambar 2.1 Logo dan Nama Perusahaan

Melalui tenaga-tenga profesional yang terampil, kompeten, berdedikasi dan menjunjung etika bisnis, PT. RevTech Solution senantiasa melayani partner kami dengan solusi bisnis yang terintegrasi dan tepat guna dengan tampilan yang

friendly, mudah digunakan pengguna dan siap dikembangkan seiring kemajuan

STIKOM

dan perkembangan perusahaan.

Visi perusahaan ini adalah untuk menjadi perusahaan terkemuka yang profesional, handal dan terpercaya dalam pengembangan sistem dan teknologi informasi berkualitas bagi solusi bisnis perusahaan.

Misi Perusahaan :

1. Menyediakan solusi bisnis dan layanan (services) terpercaya kepada partner demi tercapainya tujuan pengembangan sistem dan teknologi informasi perusahaan partner.

2. Mengembangkan sistem dan teknologi informasi yang berkualitas, reliabel, efektif dan efisien serta mudah dalam penggunaan, pemeliharaan dan pengembangan oleh partner.

3. Berkontribusi secara aktif dalam mengembangkan dan memajukan sistem dan teknologi informasi serta sumber daya manusia dalam masyarakat.

2.2 Pengertian Website

Website adalah keseluruhan halaman-halaman web yang terdapat dalam sebuah domai yang mengandung informasi. Sebuah website biasanya dibangun atas banyak halaman web yang saling berhubungan (Cara Mudah Membangun Website Interaktif Menggu-nakan CMS Joomla, 2009:2). Website awalnya merupakan suatu layanan sajian informasi yang menggunakan konsep hyperlink, yang memudahkan surfer atau pengguna internet melakukan penelusuran informasi di internet. Informasi yang disajikan dengan web menggunakan konsep multimedia, informasi dapat disajikan dengan

STIKOM

menggunakan banyak media, seperti teks, gambar, animasi, suara, atau film.

2.2.1 World Wide Web (www)

Www (World Wide Web) adalah sebuah metode baru yang berjalan di dunia internet yang akhir - akhir ini berkembang dengan cepat. (Bunafit Nugroho, PHP & MySQL dengan Editor Dreamweaver MX, 2004:1)

World Wide Web yang juga disebut web didefinisikan sebagai sistem

interkoneksi komputer internet (disebut server) yang mendukung dokumen- dokumen berformat multimedia (Williams & Sawyer, 2007:15).

2.2.2 Internet

Internet adalah jaringan komputer di seluruh dunia yang menghubungkan atau bahkan ratusan jaringan yang lebih kecil, misalnya: jaringan pendidikan, komersial, nirbala, dan militer bahkan jaringan jaringan individual (Using Information Technology, 2007:17).

2.2.3 Jenis-jenis website

Berdasarkan pengoperasiannya, ada 2 jenis website secara umum, yaitu website statis (Static Website) dan Website Dinamis (Dynamic Website).

1. Static Website (Website Statis)

Website statis hanya memiliki front end, yaitu halaman-halaman situs yang bisa diakses oleh pengunjung. Biasanya web jenis ini hanya dibuat dengan kode HTML (hypertext markup language) dan biasanya dilengkapi dengan script javascript dan flash untuk memperindah tampilan.

Konten website statis tidak dapat diupdate. Jika ingin merubah isi website

STIKOM

statis, harus merombak kode-kode HTMLnya dan hanya bisa dilakukan oleh orang yang mengerti bahasa HTML. Website statis hanya bisa mengirimkan data ke dalam database yang berbentuk xml, sedangkan untuk memanggil data masih belum bisa. Pembuatan website seperti ini relatif sangat mudah tapi kurang baik untuk popularitas di mata search engine sehingga perlu usaha lebih banyak untuk mempopulerkan website statis dan mendatangkan pengunjung, misalnya dengan beriklan. Website statis biasanya berupa

company profile sederhana, brosur online, atau situs-situs yang berisi

informasi sederhana yang tidak perlu diubah. 2. Dynamic Website (Website Dinamis)

Website dinamis biasanya memiliki front-end dan back end. Front end adalah halaman-halaman situs yang bisa diakses pengunjung, sedangkan back-end yang biasa disebut CMS (content management system) atau biasa juga disebut Admin Area, atau kalau di dunia blog dikenal dengan nama

Dashboard, berfungsi untuk mengupdate halaman-halaman front-end. Jadi

halaman back end biasanya hanya bisa diakses oleh pemilik atau pengelola situs dengan username dan password yang telah ditetapkan.

Ada berbagai macam bentuk halaman back-end yang dibuat sesuai kebutuhan. Pada back-end atau admin area ini kita bisa merubah isi tulisan2 pada halaman situs, menambah tulisan atau artikel baru, mengupdate katalog produk seperti pada toko online, mengupdate portfolio, mengatur iklan yang

STIKOM

tampil di halaman situs jika ada, mengontrol user atau member situs dan lain-lain.

Website dinamis juga bisa dibuat interaktif dimana pengunjung atau user bisa meninggalkan komentar, menuliskan artikel baru dan lain-lain tergantung fungsi dan tujuan situs tersebut.

Berbeda dengan website statis, pembuatan website dinamis jauh lebih rumit dan komplikatif tergantung fitur-fitur yang diinginkan. Yang pasti untuk membangun sebuah web dinamis tidak cukup dengan bahasa HTML biasa tapi juga harus mengabungkan antara Web Sever (Apache, IIS, Tomcat), bahasa pemograman/script yang bekerja di sisi server tersebut (PHP, Perl, ASP dll) serta database.

Website dinamis memiliki berbagai tipe dan terus berkembang berdasarkan, fungsi, fitur dan tujuan pembuatannya, antara lain:

a. News Site (Situs Berita)

Website ini biasanya berisi artikel-artikel atau berita-berita yang diupdate secara rutin. Pada beberapa situs, pengunjung atau user bisa meninggalkan komentar. Contoh: Detiknews, Antaranews dan BBC. b. Social Network Site (Situs Jejaring Sosial)

Website ini digunakan untuk berinteraksi sosial. Seperti Friendster, MySpace, Facebook, Tagged, dan lain-lain.

STIKOM

c. Forum

Website ini dibuat khusus agar para member dapat berdiskusi sesuai dengan topic-topik yang telah ditetapkan. Contohnya: Kaskus, Detik forum, Rumah Motor, PHPBulider.com.

Untuk membuat forum diskusi biasanya menggunakan platform-platform yang sudah tersedia, baik yang berbayar seperti V-Bulletin ataupun yang gratisan seperti phpBB, SMF dan lain-lain.

d. e-Commerce (Toko Online)

Website ini dibuat khusus untuk menjual produk secara online. Umumnya dilengkapi dengan shopping cart (keranjang belanja) untuk memudahkan user/pengunjung berbelanja. Tapi sebagian juga hanya berupa catalog online yang lengkap dengan detil dan harga produk, untuk melakukan pembelian dapat dilakukan melalui email atau telepon. e. Search Engine (Mesin Pencari)

Situs yang dibuat khusus untuk mencari informasi sekaligus gateway ke halaman-halaman situs lain. Contoh Google, Yahoo, Bing, Altavista. f. Archive Site

Situs khusus dimana para pengguna dapat berbagi informasi dan disimpan dalam arsip-arsip elektronik. Contoh: Yahoogroups, Google Groups, Wikipedia dan Archive.org.

STIKOM

g. Blog

Situs ini biasa juga disebut diari online dimana pemilik (individu atau

group) dapat mengupdate artikel, baik tulisan, gambar ataupun file

multimedia lain secara rutin dimana semua entri tersusun berurutan dan memiliki fasilitas komentar buat pengunjung. Secara standar blog juga telah dilengkapi dengan sidebar yang full custom, fasiltas RSS dan permalink.

h. Corporate/Company Website

Biasanya berisi informasi umum dan kegiatan suatu perusahaan. i. Web Portal

Bentuk sederhana dari search engine dimana situs ini berisi informasi-informasi singkat dan link ke sumber yang berupa situs-situs lain. j. Community site (Situs Komunitas)

Situs yang dibuat khusus untuk komunitas-komuntas tertentu untuk berbagi informasi yang terbatas.

k. File Sharing

Situs yang dibuat khusus untuk berbagi file, baik gambar, video, musik dan file-file digital lainnya. Ada yang berbayar adapula yang gratisan. Contoh: Photobucket, Flickr, Imageshack, Rapidshare dan 4shared.

l. Business Online Site

Situs-situs yang dibuat dengan tujuan bisnis online. Ada banyak jenis

STIKOM

bisnis online yang disediakan oleh situs-situs ini dan dibutuhkan 1 bahasan terpisah untuk membahas situs-situs yang menyelenggarakan bisnis online termasuk menawarkan pekerjaan-pekerjaan online.

2.2.4 Unsur-unsur Dalam Penyediaan Website atau Situs

Untuk menyediakan sebuah website, ada beberapa hal yang harus dipersiapkan, yaitu:

1. Nama domain (Domain name/URL - Uniform Resource Locator)

Nama domain atau biasa disebut dengan Domain Name atau URL adalah alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain domain name adalah alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Contoh: http://www.nama situs.com.

Nama domain diperjualbelikan secara bebas di internet dengan status sewa tahunan. Setelah Nama Domain itu terbeli di salah satu penyedia jasa pendaftaran, maka pengguna disediakan sebuah kontrol panel untuk administrasinya. Jika pengguna lupa atau tidak memperpanjang masa sewanya, maka nama domain itu akan di lepas lagi ketersediaannya untuk umum. Nama domain sendiri mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan website tersebut. Contoh nama doamain yang ada di indonesia adalah dot com, net, org, info, biz, name, ws.

STIKOM

.com : layanan situs yang bersifat komersil .eEdu : Layanan Pendidikan International. .Gov : Layanan untuk pemerintahan.

.mil : Layanan kebutuhan angkatan bersenjata atau militer .org : Layanan Kebutuhan Organisasi

.Net : Layanan Kebutuhan Jaringan Komputer . Biz : Layanan kebutuhan dunia bisnis

2. Skrip (Bahasa Program)

Bahasa pemprograman untuk internet adalah HTML, PHP, MySQL, Java, dan lain-lain. Bahasa pemrograman ini digunakan untuk memerintah komputer untuk mendesain sesuatu dengan perintah-perintah yang diaplikasikan dalam bentuk teks.

3. Hosting

Hosting adalah ruangan hardisk tempat menyimpan berbagai data, file, gambar, video dan lain-lain. Biasanya disewakan.

4. Browser

Cara Kerja Browser:

a. Browser mengambil informasi melalui jaringan internet pada serverlife. b. Server memberi respon dengan memberikan informasi yang diminta. c. Browser menampilkan informasi menggunakan fasilitas yang berupa

kode-kode HTML.

STIKOM

2.3 HTML

2.3.1 Pengertian dasar HTML

HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.

File HTML mempunyai ekstensi .html atau .htm. Karena bahasa ini merupakan jesnis bahasa markup, maka HTML mempunyai pasangan tag untuk menandai block script HTML, yaitu <HTML> ... </HTML>. Di HTML terdapat beberapa macam markup yang dapat dikelompokkan menjadi 4 jenis:

1. Sturctural

Markup ini merupakan tanda yang menentukan level atau tingkatan dari sebuah teks. Contoh:

<h1>Stikom</h1>

Yang artinya memerintahkan browser agar mencetak teks “Stikom” dengan ukuran atau format Heading 1.

2. Presentational

Markup ini merupkan tanda yang menentukan tampilan teks. Contoh: <i>Petra</i>

Yang artinya memerintahkan browser agar mencetak teks “Petra” dengan tampilan miring. Untuk saat ini peran presentational markup sudah banyak

STIKOM

digantikan oleh CSS. 3. Hypertext

Markup ini merupakan tanda yang menunjukkan sebuah link ke situs web atau dokumen tertentu. Contoh:

<a href=”http://www.stikom.co.id/”>Stikom</a>

Yang berarti memerintahkan browser untuk menampilkan teks “Stikom” dengan fitur link ke situs http://www.stikom.co.id/ jika teks tersebut diklik. 4. Widget Element

Markup ini merupakan tanda yang digunakan untuk memuat suatu objek tertentu. Contoh:

<button>

Yang berarti memerintahkan browser untuk membuat objek tombol.

2.3.2 Pengertian HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML. HTML yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997 dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh

STIKOM

mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

Gambar 2.2 Logo HTML5

Pada HTML 5 memperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia

STIKOM

<audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).

Perkembangan HTML5 untuk perangkat mobile yang begitu cepat terutama untuk mendukung format video. HTML5 didukung oleh berbagai platform untuk menyampaikan konten di browser, termasuk di dalamnya Google‟s Android, Apple‟s iOS, Microsoft‟s Windows Phone, dan RIM‟s BlackBerry (untuk OS6 ke atas).

Melalui pengumuman yang disampaikan di blog resminya, Adobe akan menghentikan pengembangan Flash Player untuk mobile. Versi terakhir adalah 11.1 untuk Android dan BlackBerry PlayBook dan mengalihkan sumberdayanya untuk mendukung inovasi menggunakan HTML5. Tetapi Adobe tetap akan memberikan dukungan untuk setiap perbaikan bug Flash Player untuk mobile yang critical dan pembaruan aspek security.

Adobe membolehkan license source code Flash Player-nya untuk terus mengembangkan produk ini di ranah mobile. Adobe sendiri akan memberikan fitur baru agar produk yang menggunakan Flash untuk mobile dapat dikonversikan dengan mudah ke HTML5. Selain dukungan terhadap HTML5, Adobe juga akan mendorong pengembang Flash untuk membuat aplikasi native di berbagai platform menggunakan Adobe AIR. Khusus untuk Flash sendiri, Adobe akan fokus untuk mengembangkannya untuk PC, di mana saat ini mereka tengah

STIKOM

mengembangkan Flash Player 12 untuk memberikan pengalaman hiburan dalam high definition (HD).

2.3.3 Struktur dasar HTML5 <html>

<head>

<title>Disini Judul Dokumen HTML</title> </head>

<body>

Disini penulisan informasi Web </body>

</html> Penjelasan: 1. Tag

Berupa dua karakter „<‟ dan „>‟. Sebagai contoh, <title> adalah sebuah tag dengan nama title. sebuah tag di tulis secara berpasangan yang terdiri atas tag pembuka dan tag penutup. Pada tag penutup harus ditambahan simbol „/‟ setelah „<‟. Sebagai contohnya tag <title> akan di tutup dengan </title> .

STIKOM

2. Element Html

Merupakan sebagai pernyataan bahwa dokumen tersebut adalah dokumen HTML.

<html> ……

……. </html> 3. Element Head

Merupakan element yang dimulainya kepala dari sebuah file html yang letaknya diantara tag <html> dan </html>.

<head> ……… ………. </head> 4. Element Title

Merupakan judul dari sebuah file html yang nantinya akan tampil ketika halaman tersebut sedang dibuka. Element title berada tag <head> dan </head>. Contoh:

<tittle>

html pertamaku <title>

STIKOM

5. Element Body

Merupakan Element yang berfungsi untuk menampillan semua isi yang berada pada file html yang bersangkutan. Element ini terletak pada pas di bawah tag <head> </head> dan masih berada di dalam tag <html> </html>.

2.4 CSS

2.4.1 Pengertian dasar CSS

CSS atau Cascading StyleSheet merupakan salah satu bahasa standar pemograman web. Bahasa ini diciptakan untuk menstandarisasi syntax-syntax tidak akan berjalan pada yang browser yang diciptakan oleh Netscape dan Internet Explorer. Tidak seperti sekarang ini, pada era itu hanya kedua browser tersebutlah yang menguasai pasar software browsing.

Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri.

Suatu style sheet merupakan tempat dimana anda mengontrol dan mengatur style yang ada. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar. Anda juga bias menyebutnya sebagai template dari document HTML yang menggunakanya.

Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang

STIKOM

mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet.

Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser. Karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.

2.4.2 Kelebihan dan kekurangan CSS Kelebihan dari CSS adalah:

1. Memisahkan desain dengan konten halaman web. 2. Mengatur desain seefisien mungkin.

3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja.

4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML. 5. Lebih mudah didownload karena lebih ringan ukuran filenya. 6. Satu CSS dapat digunakan banyak halaman web.

7. dan masih banyak lagi.

STIKOM

Kekurangan dari CSS adalah:

1. Tampilan pada browser berbeda-beda.

2. Kadang juga terdapat browser yang tidak support CSS (browser lama). 3. Harus tahu cara menggunakannya.

4. dibutuhkan waktu lebih lama dalam membuatnya. 5. Belum lagi ada bug/error dalam CSS.

2.4.3 CSS3

Pada tahun 1998, W3c kembali mengupdate CSS1 menjadi CSS2. Karena komplitnya fitur baru tersebut maka CSS2 semakin populer hingga tahun 2004. Saat programer mulai menemukan kekurangan-kekurangannya, yaitu CSS 2 tidak bisa mengatur beberapa fungsi semisal shadow, radient atau radius. Desain tersebut harus dikerjakan dengan software desktop seperti Photoshop dan sejenisnya. Sehingga tampilan web-pun mau tidak mau harus menggunakan image/gambar. Ini berimbas pada loading web yang semakin lama karena penggunaaan gambar tersebut. Maka dari itu di diciptakanlah CSS3.

CSS3 membawa fitur-fitur desain yang lebih kompleks bahkan bisa dibilang hampir setara dengan dengan desain software desktop. Selain itu, CSS3 juga bisa membuat fungsi web interaktif yang selama ini hanya bisa dikerjakan oleh Flash atau Javascript Framework.

CSS3 adalah generasi penerus CSS yang ada sekarang (ver 2.1). Kelebihan

STIKOM

CSS3 adalah tambahan beberapa fungsi yang menarik seperti di bawah ini: 1. Borders

border-color border-image border-radius box-shadow 2. Backgrounds

background-origin and background-clip background-size

multiple backgrounds 3. Color

HSL colors HSLA color Opacity RGBA colors 4. Text effects

Text-shadow Text-overflow Word-wrap

STIKOM

5. User-interface Box-sizing Resize Outline

Nav-top, nav-right, nav-bottom, nav-left 6. Selectors

Attribute selectors 7. Basic box model

Overflow-x, overflow-y 8. Generated Content

Content

9. Other modules Media queries Multi-column layout 10. Web fonts

Speech

Pada saat ini CSS3 masih baru dan masih dalam tahap pengembangan maka setiap browser harus membuat syntax generatornya sendiri-sendiri. Syneax generator maksudnya adalah bahasa pemrograman yang mereka gunakan untuk menyesuaikan browser mereka agar dapat menerima bahasa CSS3.

Berikut daftar browser yang mendukung CSS3:

STIKOM

Gambar 2.3 Daftar Browser

Menurut Jeanot Nahasan (2012) di dalam blognya, mengatakan bahwa beberapa situs yang sudah menerapkan CSS3 + HTML5 akan menggantikan fungsi jQuery sepenuhnya. Perkiraan ke depan, tidak ada lagi web yang menggunakan jQuery karena sizenya lebih besar dibanding CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga mulai terakusisi dengan semakin berkembangnya CSS3. Menurut saya, CSS3 merupakan bahasa pemrograman olah digital gambar/citra tingkat tinggi karena dengan CSS3, anda bisa menggambar Tokoh Kartun Doraemon seperti contoh berikut :

STIKOM

Gambar 2.4 Citra CSS3 2.5 PHP

2.5.1 Pengetian dasar PHP

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP bernama FI (Form Interpreted). Pada saat tersebut PHP adalah sekumpulan script yang digunakan untuk mengolah data form dari web. Saat ini, PHP merupakan kepanjangan “PHP: Hypertext Preprocessor adalah sebuah bahas script berjenis server side yang menyatu dengan HTML. Sintaks dan perintah-perintah yang dimasukkan akan sepenuhnya dijalankan dan dikerjakan oleh server dan disertai pada halaman HTML biasa. PHP bertujuan untuk membuat aplikasi-aplikasi yang dijalankan di atas taknologi Web. Dalam hal ini, aplikasi-aplikasi pada umumnya akan memberikan hasil pada Web browser, tetapi prosesnya secara keseluruhan dijalankan dan dikerjakan di Web server.

STIKOM

2.6.2 Sintaks Dasar PHP

Ada empat macam cara penulisan kode PHP, yaitu: 1. <? echo (“ini adalah script PHP\n”); ?>

2. <? php echo(“ini adalah script PHP\n”); ?> 3. <script language=”php”>

echo (“tulis pakai ini jika HTML editor yang dipakai tidak mengenali PHP”); 4. </script>

5. <% echo (“kalau yang ini mirip dengan ASP”);%>

Anda dapat memilih salah satu dari empat cara tersebut. Tetapi yang paling sering digunakan adalah cara pertama dan kedua. Perhatikan bahwa tiap akhir baris harus selalu diberi tanda titik koma (;). Seperti pada bahasa pemograman lain, Anda pun bisa meletakkan baris komentar pada program. Pada PHP caranya adalah dengan meletakkan komentar tersebut disebelah kanan tanda // jika komentar satu baris /* dan /* jika komentar lebih dari satu baris.

Contoh: <?

echo (“latihan PHP”); //ini adalah contoh komentar satu baris

/* kalau yang ini adalah komentar lebih dari satu baris */

echo (_”memang mudah”);?>

STIKOM

2.5.3 Tipe Data pada PHP

PHP mengenal tiga macam tipe data, yaitu: 1. Integer

Yang termasuk dalam tipe data ini adalah bilangan bulat (tidak pakai koma). Contoh:

$a = 1234 // decimal $b = -1234 // negative $c = 0123 // octal

$d = 0x12 // heksadesimal

Pernyataan seperti $a = 1234 disebut pernyataan penugasan. Dalam contoh tersebut maksudnya adalah memberi nilai 1234 ke variable $a.

2. Floating Point Number

Disebut juga bilangan pecahan. Terdapat tanda titik yang merupakan pemisah antara bagian bulat dan pecahaan. Contoh:

$a = 1.234 // bentuk biasa

$b = 1.2e3 // bentuk exsponensial 3. String

String merupakan tipe data yang terdiri dari huruf (teks), angka dan karakter- karakter lainnya. Teks, angka dan karakter lainnya dapat digabungkan jika ingin membentuk sebuah kalimat atau pernyataan tertentu. Untuk memasukkan nilai string selalu diapait tanda kutip ganda seperti

STIKOM

contoh:

$a = “ini adalah tipe data string”

2.5.4 Array

Array merupakan tipe data terstruktur yang berguna untuk menyimpan sejumlah data yang bertipe sama. Bagian yang menyusun array disebut elemen array, yang masing-masing elemen dapat dapat diakses tersendiri melalui indeks array. Terdapat dua macam type array yaitu array berdimensi satu dan multidimensi.

1. Array berdimensi satu

Pemakaian array berdimensi satu adalah sebagai berikut. Contoh: <?

$kota[0] = “Yogyakarta”; $kota[1] = “Jakarta”; $kota[2] = “Malang”; $kota[3] = “Purwokerto”;

print (“Kota favorit saya adalah $kota[2]”); ?>

Kode diatas jika dijalankan pada browser, akan muncul tulisan:

Kota favorit saya adalah Malang

Indeks array dimulai dari 0. Jadi indeks array 0 menyatakan elemen

STIKOM

pertama dari array, indeks array 1 menyatakan elemen array kedua, dan seterusnya.

2. Array Multidimensi

Yang termasuk dalam tipe data ini adalah bilangan bulat (tidak pakai koma). Contoh:

<?

$buah = array( “apel”=> array( “warna”=> “merah”, “rasa “=> “manis” ),

“pisang” => array( “warna” => “kuning”, “rasa” => “manis” ) ); ?>

print (“Warna buah apel adalah “); print ($buah[“apel”][“warna”]),”<br>”;

print (“rasa buah pisang adalah”);

print($buah[„pisang”][“rasa”]); ?>

Kode di atas akan menghasilkan tulisan:

Warna buah apel adalah merah rasa buah pisang adalah manis

STIKOM

2.5.5 Struktur Kontrol

Struktur kontrol atau struktur keputusan yang dikenali oleh PHP terdiri dari struktur If dan struktur Elseif.

1. Statement If

Statement If digunakan untuk menguji suatu kondisi, jika kondisi bernilai benar maka Statement akan dieksekusi, jika kondisi bernilai salah maka statement tidak akan dieksekusi, dan program akan melanjutkan perintah-perintah selanjutnya dalam script. Struktur dari statement if dalam PHP adalah sebagai berikut:

If (Kondisi) Statement

Contoh: menampilkan nilai dari variabel a, jika variabel a lebih besar dari variabel x

$a= ;

$b = $a-2; if ($a>$b)

print “$a lebih besar dari $b”;

Karena variabel a lebih besar dari b maka program akan menampilkan pernyataan yang di bawah if (10 lebih besar dari 8).

STIKOM

2. Statement Else

Statement elseif juga digunakan untuk menguji suatu kondisi, hampir sama dengan statement if, namun dalam statement if...elseif, jika kondisi dari statement if bernilai salah maka program atau script akan memeriksa kondisi kondisi berikutnya yang ada pada elseif, demikian seterusnya. Struktur statement else if dalam PHP adalah:

If (kondisi) { statement } elseif(kondisi) else

{ statement } { statement }

Contoh berikut akan menampilkan nilai dari variabel berdasarkan kondisi yang diuji:

$a = 10; $b =$a-2;

if ($A>$b){print “$A lebih besar dari $b;}

elseif ($a = $b) {print “$a sama dengan $b;} else{print “$a lebih kecil $b;}

Karena kondisi dari statement if pertama adalah True maka program akan menampilkan pernyataan yang ada pada statement if pertama (10 lebih besar

STIKOM

dari 8), kemudian program akan keluar control struktur tersebut.

2.5.6 Struktur Pengulangan (Loop)

Struktur pengulangan atau loop diterapkan pada situasi suatu intruksi atau grup dari intruksi yang diproses berulang kali sampai pada kondisi yang diinginkan sudah terpenuhi. Struktur pengulangan atau loop yang dikenali oleh PHP adalah for loop dan while loop.

1. For Loop

Dalam PHP struktur pengulangan for loop ditulis dengan sintak : For (Inisialisasi, Pengulangan, Penambahan) statement

Contoh:

For($a=1;$a<=5;$a++) {print $a; }

Pada contoh di atas, pertama nilai a diberikan=1, kemudian pada bagian pengulangan ($a<=5) jika variabel a masih lebih kecil atau sama dengan 5 maka program akan terus melaksanakan perintah di bawah for, pada bagian penambahan ($a++) setiap selesai pengulangan maka nilai a ditambah dengan 1, kemudian program akan kembali ke pengulangan untuk menguji kondisi nilai dari a, jika masih lebih kecil dari 5 maka program akan melaksanakan perintah dibawah for, demikian seterusnya sampai a bernilai lebih dari 5.

STIKOM

2. While loop

While adalah jenis pengulangan yang sederhana. Bentuk sintak penulisannya dalam PHP adalah sebagai berikut:

While (kondisi) statement

While mengulang statement selama kondisi bernilai benar. Contoh:

$x = 1;

while ($x<=10 )

{ print $x++; /*setelah nilai x ditampilkan, kemudian var x ditambah dengan 1 (x++) */

}

2.5.7 POST dan GET

Merupakan motode pingiriman data pada form HTML. Terdapat dua tipe pengiriman yaitu post dan get.

1. HTTP_POST_V ARS

Digunakan jika dalam form HTML ditetapkan metode pengiriman datanya menggunakan:

Method=”post” Contoh: dibawah dibuat suatu HTML form, ketikan dan simpan dengan nama test.html, yang mana methode pengiriman datanya menggunakan method=”post” Karena methodnya menggunakan “post”, maka

STIKOM

data yang dikirim dari form dalam file script PHP ditampung pada variabel array “$HTTP_POST_VARS”.

<form action=”mytest.php” method=”post”> Nama : <input type=”text” name=”nama”><br>

Alamat : <input type=”text” name=”alamat”><br>

<input type=”submit”> </form>

Berikut adalah file mytest.php yang harus dibuat untuk mengelola dan menampilkan data yang dikirimkan dari form HTML di atas:

<?php

print “Nama kamu : $HTTP_POST_VARS[nama]\n”;

print “Alamatnya : $HTTP_POST_VARS[alamat]\n”;

?>

Pada layar browser hasil yang akan ditampilkan adalah sesuai dengan data yang diketikan pada form.test.html diatas. Jadi nama variabel input yang dikirim dari form test.html harus sesuai dengan elemen array pada file

mytest.php yang akan menampung datanya dalam hal ini “$HTTP_POST_VARS[nama]” dan “$HTTP_POST_V ARS[alamat]”.

2. HTTP_GET_V ARS

Hampir sama dengan methode post perbedaannya jika mengggunakan methode get maka data dikirim sebagai bagian dari url, methode get digunakan jika dalam form HTML ditetapkan methode pengiriman datanya

STIKOM

menggunakan method=”get”. Contoh : dibawah dibuat suatu HTML form, ketikan dan simpan dengan nama test.html, yang mana methode pengiriman datanya menggunakan method=”GET”. Karena methodenya menggunakan “get”, maka data yang dikirim dari form dalam file script PHP ditampung pada variabel array “HTTP_GET_VARS”.

<form action=”mytest.php” method=”get”> Nama : <input type=”text” name=”nama”><br>

Alamat : <input type=”text” name=”alamat”><br>

<input type=”submit”> </form>

Berikut adalah file mytest.php yang harus dibuat untuk mengelola dan menampikan data yang dikirimkan dari form HTML diatas :

<?php

print “Nama kamu : $HTTP_GET_VARS[nama]\n”;

print “Alamatnya : $HTTP_GET_VARS[alamat]\n”;

?>

Pada layar browser hasil yang akan ditampilkan adalah sesuai dengan data yang diketikan pada form test.html diatas. Jadi nama variabel input yang dikirim dari form test.html harus sesuai dengan element array pada file mytest.php yang akan menampung datanya dalam hal ini “HTTP_GET_VARS[nama]” dan “HTTP_GET_V ARS[alamat]”.

STIKOM

2.6 MySQL

2.6.1 Pengertian Dasar MySQL

MySQL adalah sebuah sistem manajemen database relasi (relationaldatabase management system) yang bersifat open source. (Arbie, 2004: 5) MySQL merupakan buah pikiran dari Michael “Monty” Widenius, David Axmark dan Allan Larson yang di mulai tahun 1995. Mereka bertiga kemudian mendirikan perusahaan bernama MySQL AB di Swedia.

Pengertian MySQL menurut MySQL manual adalah sebuah open source software database SQL (Search Query Language) yang menangani sistem manajemen database dan sistem manajemen database relational. MySQL adalah open source software yang dibuat oleh sebuah perusahaan Swedia yaitu MySQL AB. MySQL sangat mudah digunakan, reliable dan sangat cepat.

MySQL mempunyai fitur-fitur yang sangat mudah dipelajari bagi para penggunanya dan dikembangkan untuk menangani database yang besar dengan waktu yang lebih singkat. Kecepatan, konektivitas dan keamanannya yang lebih baik membuat MySQL sangat dibutuhkan untuk mengakses database di internet.

MySQL versi 1.0 di rilis pada Mei 1996 dan penggunaannya hanya terbatas di kalangan perusahaan saja. Barulah pada bulan Oktober 1996, MySQL versi 3.11.0 di rilis ke masyarakat luas. MySQL menggunakan bahasa standar SQL (Structure Query Language) sebagai bahasa interaktif dalam mengelola data. MySQL memiliki kinerja, kecepatan proses dan ketangguhan yang tidak kalah dibanding database-database besar lainnya yang komersil seperti ORACLE,

STIKOM

Sybase, Unify dan sebagainya. MySQL dapat berjalan di atas banyak sistem operasi seperti Linux, Windows, Solaris, FreeBSD, Mac OS X, dan lain sebagainya.

2.6.2 Menghubungkan MySQL

Menghubungkan MySQL ke server, pengguna harus menyediakan nama user dan password untuk terhubung dengan MySQL. Pengguna juga harus menentukan hostname yang digunakan. Kemudian masuk ke shell (contoh: shell :dosprompt ) dan ketikan perintah berikut:

Shell>

mysql –h host –u ser –p Enter password :*******

Tanda ******** mewakili password pengguna, masukkan password. Jika berhasil akan terlihat informasi seperti ini:

Shell> mysql –h nama_host –u nama_user –p Enter password : *******

Welcome to the MySQL monitor. Commands end with ; or\g.

Your MySQL connection id is 459 to server version:3.22.20a-log Type „help‟ for help.

Mysql>

Prompt mysql> menunjukan bahwa MySQL dapat menerima perintah-perintah

STIKOM

MySQL. Untuk memutuskan hubungan dengan server, perintah adalah sebagai berikut:

Mysql>quit.

2.6.3 Membuat Database dengan MySQL

Pada bagian ini akan dijelaskan bagaimana menggunakan perintah-perintah MySQL untuk membuat dan menggunakan database. Perintah-perintah yang terdapat dalam MySQL adalah:

1. Membuat sebuah database dengan perintah: mysql>

CREATE DATABASE nama_database;

2. Untuk menampilkan database apa saja yang aktif dalam server, gunakan perintah

mysql>SHOW database;

3. Untuk menggunakan database dalam server gunakan perintah: mysql>USE nama_database;

4. Untuk membuat tabel yang akan menyimpan data yang dibutuhkan dapat menggunakan perintah:

mysql>CREATE TABLE

nama_tabel(namafield,nama_field.,namafield);

STIKOM

5. Untuk melihat tabel yang kita buat, ketikan perintah: mysql>SHOW TABLES;

6. Untuk memasukkan data kedalam tabel Buatlah sebuah file teks (format *.txt) yang mengandung sebuah record pada setiap barisnya. Masukkan nilai-nilai sesuai dengan field yang telah dibuat. Setiap nilai field dipisahkan dengan tabulasi (tab). Kemudian gunakan perintah ini:

mysql>

LOAD DATA LOCAL INFILE ”nama_file.txt” INTO TABLE nama_tabel;

Jika ingin menambahkan record dapat digunakan perintah: mysql> INSERT INTO nama_tabel

VALUES („nilai_field‟,‟nilai_field‟,NULL); 7. Untuk mengambil data Untuk mengambil database gunakan perintah:

SELECT apa_yang_dipilih FORM nama_tabel

WHERE kondisi

8. Jika terjadi kesalahan dalam pengisian data pada suatu record dapat dilakukan koreksi dengan cara:

a. Edit file text yang telah dibuat. Kemudian edit record yang salah dengan nilai yang benar, lalu jalankan perintah:

mysql>SET AUTOCOMMIT=1;

STIKOM

# digunakan untuk membuat tabel secara cepat mysql>

DELETE FROM nama_table_eror; mysql>

LOAD DATA LOCAL INFILE “nama_file.txt” INTO TABLE nama_table;

b. Perbaiki data yang salah saja denagan perintah update: mysql>UPDATE nama_tabel

SET nama_field =”nilai_baru” WHERE name= “nama_field”;

2.7 Java Script

2.7.1 Pengertian Dasar Java script

JavaScript adalah suatu bahasa script yang di-interpreter oleh browser

(client side). JavaScript pertama kali dikembangkan oleh Brendan Eich dari

Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi

LiveScript, dan akhirnya menjadi JavaScript.

Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan

para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada

STIKOM

hubungan bahasa antara Java dengan JavaScript. JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

Javascript bergantung kepada browser (navigator) yang memanggil halaman web yang berisi skrip dari Javascript dan tentu saja tersisipkan dalam dokumen HTML. Javascript juga tidak memerlukan compiler atau penterjemah khusus untuk menjalankannya.

Penulisan kode Javascript diletakkan diantara tag HTML. Javascript merupakan suatu bahasa yang perkembangannya lambat dibandingkan dengan bahasa Java yang berkembang sangat cepat. Sama halnya seperti pemrograman bahasa C, Javascript juga bersifat Case Sensitive untuk setiap perintah dan penamaan variabelnya.

2.7.2 Cara penulisan Javascript

Script Javascript dapat ditempatkan pada: 1. Body dalam dokumen HTML

Javascript hanya diinputkan dalam bentuk bahasa di elemen body.

STIKOM

Gambar 2.5 Body Javascript 2. Header, dalam bentuk function.

Gambar 2.6 Header Javascript

2.8 Elemen Visual Website 2.8.1 Teori Warna

1. Pengertian Warna

Warna memegang peran sebagai sarana untuk lebih mempertegas dan memperkuat kesan dan aspek identitas perusahaan dalam pembuatan Company profile.

Menurut Anne Dameria (2011), Warna merupakan fenomena yang terjadi

STIKOM

karena adanya tiga komponen yaitu Cahaya, Objek dan Observer/pengamat (dapat berupa mata kita ataupun alat ukur).

Menurut hasil experimen James Clerck Maxwell (1855-1861) menyimpulkan bahwa warna hijau, merah dan biru merupakan warna-warna primer (utama) dalam pencampuran warna cahaya. Warna primer adalah warna- warna yang tidak dapat dihasilkan lewat pencampuran warna apapun. Melalui warna- warna primer cahaya ini (biru, hijau, dan merah) semua warna cahaya dapat dibentuk dan diciptakan. Jika ketiga warna cahaya primer ini dalam intensitas maksimum digabungkan, berdasarkan eksperimen 3 proyektor yang didemonstrasikan Maxwell, maka ditunjukkan sebagai berikut:

Gambar 2.7 Hasil Eksperiment Maxwell 2. Psikologis Warna

Pada tahun 1858, Munsell menyelidiki warna dengan standar warna untuk aspek fisik dan psikis. Teorinya menyatakan bahwa warna pokok terdiri dari merah, kuning, hijau, biru, dan jingga. Sementara warna sekunder terdiri dari warna jingga, hijau muda, hijau tua, biru tua, dan nila. Secara umum, warna dikaitkan dengan pertimbangan makna psikologis.

STIKOM

a. Merah keunguan

Darah, marah, berani, seks, bahaya, kekuatan, kejantanan, kebahagiaan, cinta, mulia, agung, kaya, bangga (sombong), mengesankan.

b. Hitam

Misteri, berwibawa, berkelas, konservatif, kegelapan, tegas, kukuh, formal, struktur yang kuat

c. Merah jingga

Semangat, tenaga, kekuatan, pesat, hebat, gairah. d. Kuning jingga

Kebahagiaan, penghormatan, kegembiraan, optimisme, terbuka. e. Putih

Sporty, bersih, segar, mahal, positif, merangsang, cemerlang, ringan, sederhana, polos, jujur, murni., suci,lugu, spiritual, tenang.

f. Kelabu

Maskulin, serius, tenang, sopan, sederhana, orang yang telah berumur, kepasifan, sabar, rendah hati, intelegensia, ragu-ragu, tidak dapat membedakan yang penting dan tidak penting. Netral, penengah dalam peperangan.

g. Jingga

Kecerahan, hangat, semangat muda, ekstrimis, menarik. h. Kuning

STIKOM

Ceria, hangat, semangat, cerah, kesenangan, kelincahan kemuliaan cinta, pengertian yang mendalam, lambang intelektual, bijaksana, pengecut, pengkhianatan.

i. Kuning hijau

Persahabatan, muda, kehangatan, baru, gelisah, berseri. j. Hijau muda

Tumbuh, cemburu, kurang berpengalaman, iri ahti, kaya, segar, istirahat, tenang.

k. Hijau biru

Tenang, santai, diam, lembut, setia, kepercayaan. l. Biru

Melankolis, teknologi, sejuk, pasif terhormat, tenang, damai, depresi, menahan diri, ikhlas, setia, konservatif, lembut, menahan diri. Goethe menyebutnya mempesona, spiritual, monoteis, kesepian, sedang memikirkan masa lalu dan masa akan datang. Warna perspektif yang menarik kita dalam kesendirian, dingin, membuat jarak, dan terpisah. Melambangkan kesucian dan harapan.

m. Ungu

Kebesaran, sejuk, negative, mundur, tenggelam dan khidmat, berarti sukacita, kontemplatif, suci, lambang agama, murung, melankolis, pendiam, agung (mulia), aristokrasi, dan menyerah.

STIKOM

n. Cokelat

Bersahabat, hangat, tenang, alami, kebersamaan, sentosa, rendah hati. o. Hijau

Emosi hamper mendekati pasif, lebih istirahat. Melambangakan renungan, kepercayaan (agama), dan keabadian.Fungsi:kesegaran, mentah, muda, belum dewasa, pertumbuhan, kehidupan dan harapan, kelahiran kembali, dan kesuburan.

p. Pastel

Lembut, feminim, romantis, inspirasi.

2.8.2 Teori Tipografi 1. Pengertian Tipografi

Tiprografi merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin. Menurut Jefkins (1996: 248), tipografi adalah seni memilih jenis huruf, dari ratusan jumlah rancangan atau desain jenis huruf yang berbeda, menggabungkan sejumlah kata yang sesuai dengan ruang yang tersedia, dengan menggunakan ketebalan dan ukuran berbeda dan menandai naskah untuk proses typesetting.

STIKOM

2. Prinsip Tipografi

Pada umumnya prinsip tipografi adalah : a. Visibility

Terfokus pada apakah jenis huruf tertentu dapat dilihat atau tidak. b. Readibility

Kualitas dan jenis huruf, lebih ke arah pemilihan huruf yang tepat untuk teks yang tepat

c. Legibility

Menekankan apakah dapat terbaca atau tidak, ada jenis huruf yang indah. tetapi jika digunakan daam teks akan mengakibatkan pembaca meninggalkan teks tersebut.

d. Clearly

Kejelasan huruf, mempunyai fungsi jelas dan mudah terbaca. Bovee menagatakan ada hal yang perlu dipertimbangkan dalam memilih suatu type huruf, yakni: keterbacaan, adalah hal yang berperan penting dalam memilih suatu jenis huruf.

3. Jenis huruf

a. Huruf tidak berkait (sans serif)

1) Tidak memiliki kait (hook/terminal) hanya tangkai dan batang saja. 2) Ujungnya berbentuk tajam atau tumpul.

3) Sifatnya kurang formal dan sederhana.

STIKOM

4) Sangat mudah dibaca

5) Contoh: Arial, avant grade, MS Sans Serif. b. Huruf berkait (serif)

1) Memiliki terminal.

2) Sifatnya formal, elegan, mewah, anggun. 3) Kurang mudah dibaca.

4) Contoh: Times New Roman, Garamond, MS Serif. c. Huruf Tulis (scipt)

1) Setiap huruf terkait seperti tulisan tangan.

2) Sifatnya anggun, eksklusif, romantis, tradisional. 3) Sulit dibaca jika terlalu kecil dan banyak.

4) Contoh: Shelley Alegro, Bradley Hand, Lucida Handwriting. d. Huruf Dekoratif

1) Setiap hurufnya dibuat secara detail dan komplit. 2) Sifatnya mewah, bebas, anggun, tradisional, istimewa.

3) Sangat sulit dibaca, gunakan hanya sebagai alternative drop cap. 4) Contoh: English dan Augsburger Initial.

e. Huruf monospace

1) Identik dengan serif atau sans serif tapi jarak antar huruf disamakan. 2) Sifatnya formal, sderhana, futuristik, kaku.

3) Mudah dibaca tapi kurang rapi.

STIKOM

4) Contoh: Courier. 4. Anatomi Tipografi

a. Tinggi Huruf

Gambar 2.8 Tinggi Huruf

b. Bentuk Huruf

Gambar 2.9 Bentuk Huruf 5. Geometri Tipografi

Dari geometrinya huruf dibagi menjadi 4 kelompok yaitu: a. Garis tegak datar : E, F, I, H, L.

b. Garis tegak miring : A, K, M, N, V, W, X, Y, Z. c. Garis tegak lengkung : B,D, G, J, P, R, U. d. Garis lengkung : C, O, Q, S.

STIKOM

51 3.1 Metode Penelitian dan Pengumpulan Data

Bentuk metodelogi dan pengumpulan data dari Tugas akhir ini adalah sebagai berikut:

Gambar 3.1 Bagan Pengumpulan Data

STIKOM

Pengumpulan data dilakukan dengan beberapa cara, yaitu: 1. Wawancara/Interview

Cara ini dilakukan untuk mengetahui permasalahan-permasalahan yang terjadi di PT Revtech Solution berkaitan dengan konsep desain, perkembangan perusahaan dan informasi apa saja yang akan disampaikan. Sumber wawancara adalah manager perusahaan PT. Revtech Solution yaitu Bpk. Eric Priyo Tranggono,S.I.

Pertanyaan jawaban yang ditanyakan adalah sebagai berikut: a. Perusahaan ini sudah berdiri berapa lama?

Sudah sejak tahun 2008.

b. Perusahaan ini apakah sudah memiliki website sebelumnya? Sudah memiliki tetapi desainnya sangat sederhana.

c. Bentuk desain yang digunakan sebagai pedoman warna seperti apa? Kita biasanya mengikuti warna logo yaitu biru, putih dan kuning. d. Website yang diinginkan website statis atau dinamis?

Website dinamis.

e. Informasi apa saja yang ingin disampaikan melalui website ini?

Informasi mengenai perusahaan dan lokasi kita, visi misi perusahaan, pelayanan apa saja yang kita tawarkan, portfolio perusahaan dan berita. Kalau bisa dibuatkan kolom untuk menampung pesan user.

STIKOM

2. Pengamatan/Observasi

Cara ini dilakukan oleh penulis untuk melihat kondisi PT Revtech Solution dalam hal bentuk desain yang digunakan, apakah sudah menampilkan keselarasan dengan desain yang sudah ada. Website ini merupakan new desain dari website terdahulu PT. Revtech Solution.

3. Study Literatur

Suty Literatur merupakan pengumpulan data yang dilakukan dengan mengumpulkan bahan-bahan dari buku-buku panduan , majalah, internet dan Koran yang berhubungan dengan pembuatan website. Dengan studi ini maka penulis memberikan keterangan sumber dalam suatu uraian dan sumber data dalam daftar pustaka.

4. Study Eksisting

Proses analisa studi eksisting diperlukan sebagai objek yang akan digunakan sebagai kompetitor tidak langsung pada proyek pembuatan aplikasi ini. Kegiatan ini meliputi penelusuran kompetitor terhadap proyek yang akan dibuat dalam hal

Strength (Kekuatan), Weakness (Kelemahan), Opportunity (Kesempatan), dan Threat (Ancaman) atau SWOT. Selain SWOT juga dilakukan analisa terhadap

STP (Segmenting, Targeting dan Positioning) untuk mengetahui target audience dari pembuatan website. Kegiatan ini dilakukan agar terciptanya hasil karya yang sempurna karena telah belajar dari hasil yang telah ada pada publik.

Studi eksisting ini memilih 3 subjek yang akan dianalisis, yaitu The Art of

STIKOM

bussiness, Red bull, dan trifermed. Pembuatan website dengan menggunakan HTML5 masih belum ditemukan, jadi study eksisting ini menggunakan bentuk tampilan desain website yang paling interaktif dengan menggunakan bahasa pemrograman HTML5 dan CSS3.

Gambar 3.2 Wesbos Website

Strength : Desain warna sangat bersih sehingga memudahka pembaca

mengerti isi websie dengan benar.

Weakness : Kurang interaktif, hanya penataan komposisi gambar saja

Opportunity : Benar-benar memiliki konsep desain yang mudah dibaca dan informatif

Threat : Pemilihan warna yang benar menentukan kejelasan content.

Segmenting : Web tersebut ditujukan anak muda.

Targeting : Anak muda yang membutuhkan ide dalam mendesain.

STIKOM

Positioning : Simpel, mudah dibaca dan dimengerti. Informasi didapat dari Oscar Haris, S.Kom.

Gambar 3.3 Red Bull

Strength : Antarmuka menarik dan interaktif. Konsep kuat.

Weakness : Loading data sangat lama karena gambar dan effect yang diberikan terlalu banyak.

Opportunity : Benar-benar memiliki konsep desain dengan mengguna- kan banyak gambar dan transition yang menarik.

Threat : Konsep seperti ini dapat dimasukkan untuk pembuatan

website photography atau company profile yang lebih mengutamakan gambar.

Segmenting : Kalangan menengah keatas

STIKOM

Targeting : Pecinta berita dan business man.

Positioning : Mudah dibaca, interkatif, menarik dipandang. Informasi didapat dari Eric Priyo Tranggono, S.Kom.

Gambar 3.4 Trifermed

Strength : Simpel, interaktif dan menarik.

Weakness : Membuat user cepat bosan membaca informasinya karena tidak ada gambar sama sekali dan hanya ada satu effect transition.

Opportunity : Konsep sesuai dengan tema yang diambil. Banyak menggunakan simbol-simbol ikon.

Threat : Konsep minimalis dengan menggunakan HTML5 dan CSS3.

Segmenting : Kalangan menengah keatas

Targeting : Masyarakat yang ingin mengetahui informasi mengenai

STIKOM

kesehatan dan membutuhkan layanan kesehatan

Positioning : Interaktif, sederhana, informasi perusahaan lebih banyak dan bahasa yang digunakan adalah bahasa Inggris. Informasi didapat dari Welliam Roberto, S.Kom.

3.2 Hasil Analisa SWOT

Setelah melakukan beberapa pengamatan pada media yang telah ada di publik, maka gambaran dari website PT. Revtech Solution ni adalah:

1. Desain antarmuka dengan page intro untuk menyapa konsumen agar lebih menarik.

2. Penggunaan lightbox pada porfolio dan menggunakan sliding image untuk mendukung iPad screen touch.

3. Memanfaatkan fungsi html5 sebaik-baiknya, yaitu memasukkan video dan audio.

4. Nuansa warna yang digunakan adalah putih, abu-abu, dan biru untuk meningkatkan kesan teknologi.

5. Pembuatan website ini akan diutamakan bentuk tampilan desain dan penyampaian informasi dengan cara yang lebih informatif.

6. Bahasa yang digunakan adalah bahasa Inggris.

Dari analisa SWOT (strenght, weakness, oportunity, thread) yang diambil dari study eksisting diatas, maka dapat kita ambil bagan analisa SWOT untuk

STIKOM

website PT Revtech Solution sebagai berikut: 3.1 Tabel Hasil analisa SWOT

Internal Factor External Factor

Strenght Weakness

- Pengunaan HTML5 membuat desain website yang unik

- Ada audio sambutan

- Mungkin akan mengalami sedikit loading audio dan gambar.

Opportunity Strategy SO Strategy WO

- Website Dinamis - Informasi website

mudah dibaca dan dimengerti oleh user

- Pemberian sliding wrapper sebagai background

- Audio yang diberikan hanya berkisar 1 Mb

- Meminimalisir audio dan gambar sehingga tidak terlalu berat

Thread Strategy ST Strategy WT

- Pesaing website dengan menggunakan HTML5 sudah mulai

bermunculan

- Desain website dibuat dengan bantuan Jquery dan CSS3

- Konsep perusahaan diperkuat

- Meminimalisir audio dan gambar sehingga tidak terlalu berat

STIKOM

3.3 Segmenting, Targeting, Positioning

3.3.1 Segmenting

Pembagian segmentasi, target audien dan posisi produk sangat diperhatikan agar produk yang akan dihasilkan bisa sesuai dengan kondisi masyarakat sekitar, yang secara tidak langsung dapat membuat produk lebih efisien dalam proses distribusi.

1. Demografis:

a. Usia = 17 - 50 Tahun

b. Jenis kelamin = Laki-laki, perempuan

2. Geografis:

a. Daerah = Perkotaan

b. Kepadatan = Kota (pusat kota)

3.3.2 Target Audien

Target audien dari website ini adalah orang-orang kalangan menengah keatas yang sudah bekerja dan memiliki perusahaan sendiri.

STIKOM

3.3.3 Positioning

Website ini akan diberi wrapper yang berupa sliding image dengan tujuan agar user tidak cepat bosan ketika membaca informasi website, selain itu di halaman utama akan diberikan backsound sebagai petunjuk kepada user untuk mengetahui informasi singkat mengenai perusahaan. Penggunaan HTML5 juga mengurangi tingkat loading data yang terlalu lama sehingga penggunaan

backsound tidak akan terlalu berat.

3.4 Rancangan Penelitian

Rancangan penelitian ini mebutuhkan beberapa langkah, yaitu para produksi, produksi dan pasca produksi. Pada langkah pertama sampai langkah ketiga merupakan proses selama pra produksi. Sedangkan pada langkah keempat sampai ketujuh adalah masa produksi. Pasca produksi adalah melakukan promosi melalui xbanner dan brosur perusahaan.

Dalam pembuatan website PT Revtech Solution dilakukan perancangan konsep pada awal pengerjaannya. Konsep yang diambil dalam pembuatan ini yaitu tema minimalis dengan warna biru, putih dan abu-abu. Disetiap desain akan dicantumkan logo PT Revtech Solution.

Langkah kedua adalah pengumpulan data. Pengumpulan data penelitian ini dilakukan dengan cara mengambil studi pustaka dari buku, internet dan wawancara mengenai informasi apa saja yang akan dimasukkan ke dalam

STIKOM

company profile di PT Revtech Solution dan juga melakukan analisis desain website perusahaan lain dengan cara studi existing.

Langkah ketiga adalah persiapan hardware, software yang akan kita gunakan untuk pembuatan website. Software yang digunakan adalah Adobe Dreamweaver CS5 dan Adobe Photoshop CS5. Untuk sound yang digunakan sebagai opening page dapat dibuat dengan recording suara di Garage Band.

Langkah keempat adalah pembuatan website PT Revtech Solution. Urutannya adalah pembuatan tema background yang berbentuk data PNG dan JPG. Kemudian dilanjutkan dengan pemberian bahasa pemograman yang berbentuk HTML 5, kemudian memasukkan data-data milik perusahaan kedalamnya. Setelah website tersebut siap dalam bentuk HTML, maka diubah sebagai PHP dan mengaktifkan website tersebut di internet dengan domain yang sudah dibeli serta memasukkan data offline ke dalam CD perusahaan kemudian dilakukan untuk testing dan perbaikan.

Langkah kelima adalah testing website. Ada beberapa yang harus diperhatikan yaitu apakah bentuk webste tersebut sudah bisa masuk ke dalam semua software internet tanpa ada perubahan. Misalnya di Mozila Firefox, Google Chrome, Safari, dan lain-lain. Kemudian pastikan domain yang kita beli sudah cukup bagus mengikuti bobot website yang sudah kita buat. Untuk company profile yang berbentuk offline, pastikan bisa terbaca di Ipad dan di burn CD tanpa ada masalah.

STIKOM

Langkah keenam adalah perbaikan website, perbaikan ini dilakukan berdasarkan testing dan refisi dari pihak perusahaan PT Revtech solution. Revisi dilakukan sebanyak tiga kali.

Langkah ketujuh adalah penyelesaian website. Pada langkah ini, website dipastikan sudah masuk semua software internet dan terbaca di Ipad dan domain yang digunakan sudah mencukupi dan perusahaan sudah bisa melakukan interaksi secara online maupun offline.

Merancang Konsep

Pengumpulan Data

Persiapan hardware, Software

Pembuatan Aplikasi

Testing

Perbaikan

STIKOM

Penyelesaian

(Finishing)

Gambar 3.5 Alur Kerja

3.4.1 Pra Produksi 1. Ide

Ide pembuatan website PT Revtech Solution adalah karena merupakan perusahaan yang baru berdiri dan tentunya memerlukan website sebagai sarana pengenalan mereka di dunia maya dengan cara yang lebih informatif dan lebih mudah dikenali masyarakat banyak sekaligus menanamkan citra perusahaan di mata konsumen. Selain itu HTML5 merupakan bahasa pemrograman yang baru saja launching dan mampu menunjang pembuatan website yang ingin membuat tampilan mereka lebih menarik dan informatif. 2. Konsep

Konsep yang dipakai adalah tema desain yang berbentuk minimalis dengan nuansa warna biru, abu-abu dan putih yang berhubungan dengan teknologi dan informasi. Untuk pembuatan website akan menggunakan bahasa pemrograman HTML5 yang dirubah menjadi PHP. Warna yang dipakai nantinya akan dibuat selaras dan selalu menampilkan logo PT Revtech Solution, agar konsumen mudah menangkap citra PT Revtech Solution.

STIKOM

Pembuatannya akan dibuat seinteraktif mungkin agar audience dapat tertarik dan menggunakan fungsi dari HTML5 semaksimal mungkin, yaitu memasukkan audio dan video.

3.4.2 Produksi

Setelah ide dan konsep ditentukan, pembuatan promotion design dan website PT Revtech Solution sudah dapat dilakukan. Software yang digunakan adalah Adobe Dreamweaver CS5 sebagai pengatur bahasa pemrogramannya dan Adobe Photoshop CS5 untuk mendesain layout-layout yang dibutuhkan. Urutan pembuatannya adalah xbanner, brosur, kemudian pembuatan websitenya.

Pada masa produksi ada beberapa hal yang telah ditentukan, yaitu: 1. Perancangan Database

Database yang dibutuhkan di dalam website ini adalah portfolio dan news. Karena data tersebut akan dimasukkan ke dalam website secara up to date. Pada awal pembuatan, database dibuat dengan menggunakan XAMPP. Berikut tabel portfolio yang akan dibuat:

STIKOM

Tabel 3.1 Tabel Portfolio

No Nama Field Tipe Data Key Extra

1 id_port int(10) Primary_key Auto_increment

2 Title Varchar(30)

3 class Varchar(20)

4 content Varchar(50)

5 bg_images Varchar(20)

6 icon Varchar

Bentuk tabel news: Tabel 3.2 Tabel News

No Nama Field Tipe Data Key Extra

1 id_news int(10) Primary_key Auto_increment

2 Title Varchar(30)

3 artist Varchar(20)

4 content Varchar(150)

5 images Varchar(20)

6 date date

Untuk memasukkan data-data portfolio dan news diperlukan halaman admin, yaitu halaman yang hanya dapat dibuka oleh admin dengan password. Berikut bentuk bagannya:

STIKOM

Gambar 3.6 Tabel Login Admin

Admin dapat menggunakan database atau tidak, pada website ini admin juga memerlukan database untuk menyimpan nama dan password mereka. Hal ini dilakukan untuk membantu admin jika ingin merubah kata sandi atau user name mereka. Berikut tabel admin dalam database:

Tabel 3.3 Tabel Admin

No Nama Field Tipe Data Key Extra

1 id_admin int(10) Primary_key Auto_increment

2 name Varchar(20)

3 password Varchar(20)

Selain admin, user juga dapat mengirimkan comment kepada admin atau perusahaan. Berikut tabel yang digunakan utnuk memasukkan comment user: Tabel 3.4 Tabel User

No Nama Field Tipe Data Key Extra

1 id_user int(10) Primary_key Auto_increment

2 name Varchar(20)

3 email Varchar(20)

4 comment Varchar(200)

5 date date

STIKOM

Jika database telah dibuat di XAMPP maka dilanjutkan proses pembuatan desain dalam bentuk HTML terlebih dahulu kemudian pembuatan PHP. Script PHP ini akan menghubungkan database dengan website.

Saat database telah dihubungkan dengan websitw, perlu dilakukan testing apakah database tersebut sudah benar-benar terhubung. Jika memang tidak ada kendala, barulah diperlukan domain untuk memposting website tersebut di dunia maya.

Database yang sudah ada tinggal dipindahkan ke dalam room domain yang sudah tersedia dengan menggunakan nama yang sama. Jika sudah dipindahkan, diperlukan testing sekali lagi untuk melihat apakah database domain dan website sudah benar-benar terhubung. Jika sudah tidak ada kendala, maka website sudah siap dipakai.

2. Desain

Dalam pembuatan website ini deperlukan rancangan desain terlebih dahulu yang dibuat dalam bentuk kerangka desain. Kerangka ini terdiri atas header,

content, dan footer. Header berisikan logo perusahaan, content berisikan

informasi yang akan disampaikan oleh perusahaan kepada konsumen, sedangkan footer berisikan email dan copyright perusahaan. Rencana pembuatan website ini adalah memberikan sliding image di belakang main

page. Jarang sekali ada web yang seperti ini. Pada bagian footer

STIKOM

menggunakan warna transparan saja, sehingga background masih tetap terlihat.

Gambar 3.7 Kerangka Dasar Website

Berikut kerangka halaman home pada website PT Revtech Solution:

Gambar 3.8 Kerangka Halaman Home

STIKOM

Gambar-gambar yang digunakan sebagai background adalah gambar yang bertema teknologi dan warna-warna biru gelap dan hitam.

Pada halaman utama, bentuk kerangka seperti pada gambar di atas. Background gambar dijalankan secara otomatis. Selain itu juga menggunakan tombol untuk mengganti, tetapi tanpa diganti pun gambar akan tetap berjalan. Sedangkan pada background text digunakan wana putih dengan header berbentuk pattern garis horisontal berwarna abu-abu.

Background content diberi effect shadow agar tampak timbul sehingga sliding image di belakang background terlihat lebih nyata. Sedangkan bagian content memakai warna dasar putih untuk memudahkan konsumen membaca informasi yang diberikan.

Gambar 3.9 Background

Pada halaman index akan diberikan gambar dengan ukuran 940x370 pixels. Gambar ini tidak berjalan otomatis, tetapi dengan perintah konsumen.

Halaman yang kedua adalah halaman philosophy perusahaan. Berikut kerangkanya:

STIKOM

Gambar 3.10 Kerangka Halaman Philosophy

Pada halaman di atas sebelah kiri akan di isi sejarah dan foto perusahaan. Pada content bagian kanan diberikan ruang tambahan untuk menambahkan informasi singkat, misalnya kategori, visi, misi, alamat, dan map. Bentuk kolomnya akan diberi header berwarna abu-abu tua karena disesuaikan dengan nuansa abu-abu dan putih, berikut gambarnya:

Gambar 3.11 Header Content

Pada halaman portfolio dan service dibutuhkan dua gambar sejenis dengan ukuran yang berbeda. Yang kecil digunakan sebagai icon, sedangkan yang besar digunakan sebagai gambar utama. Sedangkan pada halaman news akan menggunakan gambar ukuran 560 x 260 pixel.

STIKOM

Ukuran yang kecil adalah: 1. 285 x 200 pixel (portfolio) 2. 290 x 170 pixel (news)

Ukuran besarnya adalah: 1. 560 x 260 pixel (serice)

2. Pada portfolio ukuran gambar normal

Berikut kerangka halaman portfolio, service dan news.

Gambar 3.12 Kerangka Halaman Service

STIKOM

Gambar 3.13 Kerangka Halaman News

Gambar 3.14 Kerangka Halaman Portfolio

STIKOM

Pada news akan diberikan tanggal kapan news itu diterbitkan. Tanggal tersebut memakai background berwarna abu-abu, sama seperti warna header content.

Gambar 3.15 Tanggal News

Bentuk desain HTML5 ini ditunjang oleh CSS3. Hanya CSS3 yang dapat diterima oleh HTML5. Dengan CSS3 ini kita dapat mengatur warna font, warna dasar background, margin, padding dan lain-lain.

3. Effect

Effect yang diberikan pada website ini cukup banyak, karena kembali pada tujuan pembuatan website ini adalah membuat tampilan se interaktif mungkin dan menarik. Bahasa pemrograman yang dipakai untuk mebuat effect-effect tersebut adalah jquery dan javascript. Macam-macam effect yang diberikan yaitu:

a. Pretty photo

Pretty photo adalah salah satu jenis effect light box pada jquery, dimana effect ini diberikan pada gambar-gambar yang diklik dan diperbesar

dengan memberikan warna transparan untuk belakangnya. Dengan effect

STIKOM

ini, gambar akan diberi border dan judul gambar.

Gambar 3.16 Pretty Photo

b. Slider Image

Slides image merupakan effect menggeser gambar dengan tombol navigator ke kanan atau ke kiri. Pada website ini rencananya akan diberikan dua slides image. Yaitu pada background dan pada index page.

Gambar 3.17 Slider Image

c. Quick sand

Quick sand merupakan effect jquery memindahkan icon sesuai dengan

karakteristik mereka. Perpindahan ini dilakukan dengan animasi yang sederhana dan ver alur, sehingga tampak bagus dipandang. Biasanya

STIKOM

effect ini diberikan di halaman portfolio untuk memisahkan jenis-jenis

portfolio.

Gambar 3.18 Quick Sand

d. Form Vaidation

Form validation adalah effect jquery yang digunakan untuk membuat

form agar tampilannya lebih minimalis dan bagus.

Gambar 3.19 Form Validation

STIKOM

4. Font

Jenis font family yang digunakan adalah Arial, Helvetica, sans-serif. Font ini dipilih karena bersifat friendly, simpel dan mudah dibaca. Menurut Lizard Wijanarko, jenis huruf sans serif adalah jenis huruf yang tidak memiliki garis-garis kecil dan bersifat solid. Jenis huruf seperti ini lebih tegas, bersifat fungsional dan lebih modern.

Gambar 3.20 Microsof San Serif 5. Data yang dimasukkan

Data yang dimasukkan adalah informasi mengenai perusahaan, yaitu: a. Visi Misi

b. Philosophy

c. Servise yang disediakan d. Alamat dan nomor telepon e. Map

STIKOM

f. Portfolio

g. Kata-kata sambutan h. News

i. Testimony para pelanggan 6. Video dan Audio

Pada halaman index disediakan adio untuk menyambut konsumen dalam bahasa inggris. Audio ini berupa rekaman suara yang menjelaskan secara singkat mengenai revtech solution.

Video hanya ada satu saja, yaitu pada halaman contact us. Video juga tidak akan terlalu berat untuk menghindari buffering yang terlalu lama dan tidak terlalu berat untuk websitenya.

7. Warna

Gambar 3.21 Warna Kobayashi

STIKOM

Pemilihan warna yang dipakai adalah warna menurut kobayashi, yaitu warna yang bernuansa modern karena perusahaan bergerak di bidang teknoligi di kota besar.

3.4.3 Pasca Produksi

Setelah website sudah jadi dan diposting ke internet dengan menggunakan domain yang dibiayai oleh perusahaan sekaligus dalam bentuk CD yang akan disimpan oleh perusahaan. Perusahaan akan melakukan promo melalui brosur, xbanner dan pengenalan tiap orang melalui kartu nama. Untuk promo lainnya akan dilakukan di website perusahaan dan situs sosial seperti facebook, twitter dan blogger.

Jika perusahaan mendapatkan klien yang mau bekerja sama maka perusahaan akan melakukan follow up dan mempresentasikan produk yang ditawarkan secara langsung kepada konsumen.

3.5 Publikasi 3.5.1 Poster 1. Konsep

Poster yang digunakan untuk publikasi ada 2 macam, yaitu ukuran A3 dan ukuran A1. Desain yang dibuat memiliki tema yang sama tetapi beda layoutnya. Warna yang dipakai adalah warna yang sesuai dengan pemilihan

STIKOM

warna website, yaitu biru muda, putih dan biru kehijauan. Warna ini dipilih dari teori warna kobayashi yaitu warna modern.

Jenis font yang digunakan juga font san serif yaitu microsoft sans serif dengan perpaduan font lainnya yang memiliki karakter sama tetapi berbeda ketebalannya.

2. Sketsa

Gambar 3.22 Sketsa Poster A3

STIKOM

97

Jika ingin menambah news baru, makan akan keluar kolom yang sama tetapi dalam bentuk kosong. Jika meghapus news maka akan terhapus dari database.

4.2.4 Halaman User Message

Halaman user message adalah tempat untuk menampung pesan user. Disini tidak ada editing message atau menambah message karena memang hanya untuk menampung pesan user. Jadi disini hanya ada penghapusan pesan.

Gambar 4.24 Tabel Message

Gambar 4.25 Message Admin

STIKOM

98

4.3 Cover CD dan Poster

Bentuk cover CD dan poster ukuran A3 yang akan dipasarkan adalah sebagai berikut :

Gambar 4.26 Poster A1

STIKOM

99

Gambar 4.27 Cover CD

Gambar 4.28 Poster A3

STIKOM

101

BAB V

PENUTUP

5.1 Kesimpulan

Setelah dilakukan analisis, pembuatan website PT Revtech Solution ini dengan menggunakan HTML5 serta dilakukan evaluasi hasil penelitiannya, maka dapat diambil kesimpulan sebagai berikut:

1. Dengan memakai HTML5 ini membuat desain website yang dapat memiliki backsound tanpa harus menginstal flash terlebih dahulu.

2. Website ini bersifat dinamis dengan bantuan bahasa pemrograman PHP sebagai penghubung user, server dan database yang dibuat melalui MySQL 3. Website dapat menampilkan wrapper yang berupa sliding image yang tidak

semua website dapat memilikinya.

4. Data audio dan gambar-gambar yang terdapat di dalam website tidak terlalu berat saat diupload karena memakai bantuan CSS3 dan HTML5.

5.2 Saran

Ada beberapa saran yang dapat disampaikan antara lain:

1. Lebih baik jika ada video yang ditampilkan untuk menunjukkan kantor PT. Revtech Solution

2. Penambahan pilihan bahasa indonesia agar user lebih mengerti informasi yang disampaikan.

STIKOM

102

DAFTAR PUSTAKA

Bunafit Nugroho, 2004. PHP & MySQL dengan Editor Dreamweaver MX. Jakarta: Penerbit Andi.

Brian K Williams & Stacey C. Sawyer. 2007. Using Information Technology. Jakarta : Andi Publisher.

Yuhefizar, S.Kom. 2009. Cara Mudah Membangun Website Interaktif Menggu-nakan CMS Joomla. Jakarta: Elex Media Komputindo.

Jefkins, Frank, 1996. Advertising Made Simple. Wellington: W.H.Allen & Co Ltd. .

Sampurna. 2003. Menguasai Aplikasi Web Tanpa Pemrograman. Jakarta: Elex Media Komputindo.

Hogan, Brian P. 2011. HTML5 & CSS3, Develop with Tommorow’s Standart Today. Dalas: The Pragmatik Bookself

Arbie. 2004. Manajemen database dengan MySQL. Yogyakarta: Andi Keith, Jeremy. 2002. HTML5 for Web Designer. New York: A book Appart. Lubbers, Petter. 2010.Pro HTML5 Programing. New York: Business Media. Alexis Goldstein.2011.HTML5 and CSS3 for the Real World. Australia: Sitepoint.

Internet :

http://jeanotnahasan.blogspot.com/2012/02/mengenal-pengertian-dan-perkembangan.html diakses tanggal 10 juli 2012

http://annedameria.blogspot.com/ diakses tanggal 24 Februari 2012

http://www.scribd.com/doc/14846151/Teori-WARNA-Albert-Munsell diakses tanggal 2 juli 2012

STIKOM

103 Personal :

Oscar Haris, S.Kom. (20 Juli 2012)

Eric Priyo Tranggono, S.Kom. (14 Januari 2012) Welliam Roberto, S.Kom. (14 Januari 2012) Sutikno, S.Kom. (20 Juli 2012)

STIKOM