T0 562009015 Full text
Rancang Bangun Aplikasi Web
Untuk Perusahaan Design
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Ahli Madya Komputer
oleh:
Yudha Pranata
NIM : 562009015
Program Studi Diploma Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2013
Rancang Bangun Aplikasi Web
Untuk Perusahaan Design
Laporan Tugas Akhir
oleh:
Raditya Yudha Pranata
NIM : 562009015
Program Studi Diploma Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2013
i
LEMBAR PENGESAHAN
Judul
: Rancang Bangun Aplikasi Web Untuk
Perusahaan Design
Nama Mahasiswa
: Yudha Pranata
NIM
Program Studi
Fakultas
: 562009015
: Diploma Teknik Informatika
: Teknologi Informasi
Salatiga, 13 April 2013
Menyetujui,
Teguh Wahyono S.Kom., M.Cs
Mengesahkan
Dr. Dharmaputra T. Palekahelu, S.Pd., M.Pd
Budhi Kristianto, S.Kom, M.Sc
Dekan
Ketua Program Studi
ii
PERNYATAAN BEBAS PLAGIASI
Yang bertanda tangan di bawah ini,
Nama
: Yudha Pranata
Nim
: 562009015
Program Studi : Diploma Teknik Informatika
Fakultas
: Teknologi Informasi, Universitas Kristan Satya
Wacana
Menyatakan Dengan sesuhngguhnya laporan yang berjudul :
Rancang Bangun Aplikasi Web Untuk Perusahaan Design
Yang dibimbing oleh :
1.Teguh Wahyono S.Kom., M.Cs
Adalah benar-benar hasil karya saya
Di dalam laporan kerja praktek ini tidak dapat keseluruhan atau
sabagian tulisan atau gagasan orang lain yang saya ambil dengan cara
menyalin atau meniru dalam bentuk rangkaian kalimat atau gambar
serta symbol yang saya akui seolah-olah sebagai karya saya tanpa
memberikan pengakuan pada penulis atau sumber aslinnya.
Salatiga, 13 April 2013
Yang memberi pernyataan,
Yudha Pranata
iii
PERNYATAAN PERSETUJUAN PUBLIKASI LAPORAN TUGAS
AKHIR UNTUK KEPENTINGAN AKADEMIS
Sebagai sivitas akademika Universitas Kristen Satya Wacana (UKSW).
Saya yang bertanda tangan di bawah ini :
Nama
:
Yudha Pranata
NIM
:
562009015
Program Studi
:
Diploma Teknik Informatika
Fakultas
: Teknologi Informasi, Universitas Kristen Satya
Wacana
Jenis Karya
:
Laporan Kerja Praktek
Demi Pengembangan ilmu pengetahuan, menyetujui untuyk memberikan
kepada UKSW hak bebas royalti non-eksklusif (non-exclusive royalty free
right) atas karya ilmiah saya yang berjudul :
Rancang Bangun Aplikasi Web Untuk Perusahaan Design
Beserta perangkat yang ada (jika perlu).
Dengan hak bebas royalty non-eksklusif ini, UKSW berhak menyimpan
mengalihmedia/mengalihformatkan, mengolah dalam bentuk pangkalan data,
merawat, dan mempublikasikan laporan tugas akhir saya, selama tetap
mencantumkan nama saya sebagai penulis/pencipta.
Demikian pernyataan ini saya buat dengan sebenarnya
Dibuat di : Salatiga
Pada Tanggal : 13 April 2013
Yang menyatakan
Yudha Pranata
Mengetahui
Teguh Wahyono S.Kom., M.Cs
iv
Prakata
Segala puji dan syukur penulis panjatkan kepada Tuhan
Yesus Kristus atas berkat dan anugerahnya yang telah
dilimpahkan
kepada
penulis,
sehingga
penulis
dapat
menyelesaikan Laporan Tugas Akhir yang berjudul “Pembuatan
Website perusahaan Desain”.
Tugas Akhir adalah bagian dari syarat yang harus
dipenuhi untuk dapat lulus pada Fakultas Teknologi Informasi,
Universitas Kristen Satya Wacana. Namun, Tugas Akhir ini
memberikan
mengikutinya,
banyak
manfaat
khususnya
kepada
penulis
mahasiswa
mendapat
bekal
yang
untuk
diterapkan di kemudian hari lewat Penulisan Laporan Tugas
Akhir ini.
Keberhasilan dalam penyelesaian Laporan Tugas Akhir
ini tidak akan terwujud tanpa adanya
bantuan dari berbagai
pihak, dengan rasa rendah hati penulis sampaikan rasa terima
kasih yang sedalam-dalamnya kepada pihak-pihak yang selama
ini telah membimbing serta membantu penulisan Laporan Tugas
Akhir ini, Yaitu kepada :
1. Tuhan Yesus Kristus atas segala rahmat dan karunia-Nya
dan Bimbingan-Nya sehingga penyusunan Laporan Tugas
Akhir ini dapat terselesaikan dengan baik.
v
2. Bapak Dr. Dharmaputra T. Palekahelu, S.Pd., M.Pd sebagai
Dekan Fakultas Teknologi Informasi, Universitas Kristen
Satya Wacana.
3. Bapak Budhi Kristianto, S.Kom, M.Sc sebagai Ketua
Program Studi Teknik Informatika, Diploma Fakultas
Teknologi Informasi, Universitas Kristen Satya Wacana.
4. Bapak Teguh Wahyono selaku dosen pembimbing yang
telah banyak memberikan arahan, bimbingan, serta
masukan sehingga laporan ini dapat terselesaikan dengan
baik.
5. Segenap dosen yang telah memberikan bekal ilmu selama
ini.
6. Orang tua dan keluarga tercinta, yang memberikan
dukungan baik moril maupun materil kepada penulis
untuk selalu berusaha mencapai hasil yang terbaik.
7. Dimas Prasetya yang telah memberikan banyak masukan
dalam pengembangan aplikasi ini.
8. Vistra Vevtisia, Kristin Wahyuningsih
yang telah
memberikan support serta dukungan moril
9. Serta semua pihak yang tidak dapat penulis sebutkan satu
persatu.
Penulis sadar bahwa dalam mengerjakan karya tulis ini
masih ada kekurangannya, untuk itu penulis mengharapkan saran
dan kritik yang sifatnya membangun, semoga karya tulis ini dapat
vi
Penulis sadar bahwa dalam mengerjakan karya tulis ini
masih ada kekurangannya, untuk itu penulis mengharapkan saran
dan kritik yang sifatnya membangun, semoga karya tulis ini dapat
bermanfaat khususnya bagi penulis sendiri dan umumnya bagi
pembaca.
Salatiga, 13 April 2013
Penulis
vii
Daftar Isi
Hal
Judul
.................................................................................................
i
Lembar Pengesahan ............................................................................. ii
Lembar Pernyataan Bebas Plagiasi ...................................................... iii
Lembar Pernyataan Hak Bebas Royalti dan Publikasi......................... iv
Prakata ................................................................................................. v
Daftar Isi .............................................................................................. viii
Daftar Gambar ..................................................................................... x
Daftar lampiran .................................................................................... xi
Abstrak ................................................................................................. xii
Bab I Pendahuluan ............................................................................... 1
1.1 Latar Belakang ..................................................................... 1
1.2 Rumusan Masalah ............................................................... 2
1.3 Tujuan .................................................................................. 2
1.3.1 Tujuan Umum ........................................................... 2
1.3.2 Tujuan Khusus ...................................................... 3
1.4 Batasan Masalah .................................................................. 3
1.5 Metodologi........................................................................... 3
Bab II Tinjauan Pustaka ....................................................................... 5
2.1 Penelitian Terdahulu ......................................................... 5
viii
2.2 Landasan Teori .................................................................. 5
Bab III Perancangan Sistem ................................................................. 12
3.1 Flowchart .......................................................................... 12
3.2 Lembar Kerja Tampilan .................................................... 13
3.3 Jaringan Sematik Tampilan……………………………. .. 22
Bab IV Hasil dan Analisis.................................................................... 23
4.1 Hasil Karya / Implementasi ............................................... 23
4.2 Hasil Pengujian ................................................................. 32
Bab V Penutup ..................................................................................... 33
5.1 Kesimpulan ....................................................................... 33
5.2 Saran.................................................................................. 33
Daftar Pustaka ...................................................................................... 34
Lampiran............................................................................................. 35
ix
Daftar Gambar
Hal
Gambar3.1Flowchart…………………………………….. .................. 12
Gambar 3.2 Form Home. ..................................................................... 14
Gambar 3.3 Form About Us................................................................ 15
Gambar 3.4 Form Register ................................................................... 16
Gambar 3.5 Form Galery ..................................................................... 17
Gambar3.6 Form web Design…………………………………….. .... 18
Gambar3.7 Form Desain Logo…………………………………….. ... 19
Gambar3.8Form Program Aplikasi……………………………….. .... 20
Gambar3.9 Form web Contact…………………………………….. ... 21
Gambar3.10 Jaringan Sematik Tampilan ……………………….. .. 22
Gambar4.1 Tampilan Awal…………………………………….. ........ 24
Gambar4.2 Tampilan Halaman About Us………………………
25
Gambar4.3 Tampilan Halaman Register ……………………….. ... 26
Gambar4.4 Tampilan Halaman Galery ……………………….. ..... 27
Gambar4.5 Tampilan Halaman Web Design …………………….. 28
Gambar4.5 Tampilan Halaman Desain Logo ………………….. ... 29
Gambar4.5 Tampilan Halaman program Aplikasi ………………. 30
Gambar4.5 Tampilan Halaman Contact ……………………… ...... 31
x
Daftar Lampiran
Lampiran 1 Kode Program................................................................
xi
35
Abstrak
Website tampaknya telah menjadi kebutuhan bagi sebuah
organisasi, lembaga, perusahaan komersial, dan sebagainya.
Website adalah media alternatif untuk memasarkan produk,
di samping sistem pemesanan online diharapkan
meningkatkan pelayanankepadakonsumen.
Penelitian ini dilakukan bertujuan untuk membuat website
yang menarik dan interaktif sehingga dapat di publikasikan
kepada masyarakat luas oleh karena itu diharapkan dapat
menciptakan website yang lebih baik dari pada website yang
sebelumnya.
Keyword : Website
xii
BAB I
Pendahuluan
1.1.
Latar Belakang
Seiring dengan perkembangan teknologi informasi saat
ini, penggunaan komputer telah merambah ke berbagai
bidang kehidupan, dan dalam berbagai penyelesaian
pekerjaan.
Diramalkan
penggunaan
komputer
dalam
kehidupan modern ini akan banyak memberikan manfaat
untuk
berbagai
bidang,
baik
itu
bidang
keuangan,
manajemen, perbankan, dan lainnya.
Website memiliki peranan yang sangat penting dalam
sebuah perusahaan khususnya dalam bidang marketing atau
dalam memberikan suatu informasi tentang sebuah produk
karena
kita
menggunakan
tahu
sekarang
komputer
dan
ini
hampir
kebanyakan
semua
dari
orang
mereka
menggunakannya untuk mengakses website contohnya seperti
facebook, toko bagus, detik.com, dll, selain itu website juga
dapat di jadikan sebagai sarana perusahaan untuk memberikan
informasi informasi penting perusahaan yang dapat digunakan
oleh karyawan dalam mendukung kinerjannya.
Dan berdasarkan hal tersebut, bermaksud untuk
mendirikan sebuah usaha dalam bidang pembuatan desain
logo, pembuatan program aplikasi desain web dan
pembuatan website dan memasarkannya via website.
1
2
Sehingga memunculkan ide untuk membuat “Rancang
Bangun Aplikasi Web Untuk Perusahaan Design”
Sebagai judul tugas akhir
1.2.
Rumusan Masalah
Website
adalah
dokumen
yang memuat
data
mengenai detail dan selling point dari sebuah perusahaan,
lembaga, atau instansi. Maka dari itu diperlukan sebuah
Website harus di buat dengan jelas dan semenarik
mungkin, maka dari itu didapat rumusan masalah sebagai
berikut:
a) Bagaimana membuat Website tampak lebih menarik
dan interaktif.
b) Bagaimana membuat interface website agar dapat
dipahami
oleh
konsumen
dan
pesan
dapat
tersampaikan.
1.3.
Tujuan
1.3.1.
Tujuan Umum
Tujuan
dari
penelitain
ini
adalah
untuk
mengembangkan website prusahaan desain yang menarik
dan interaktif
3
1.3.2.
Tujuan Khusus
a) Untuk mempublikasikan dan memasarkan
produk kepada masyarakat luas.
b) Untuk mempelajari lebih lanjut tentang ilmu
multimedia dan pemrograman menggunakan
php serta saya ingin mengetahui lebih dalam
tentang system dalam sebuah website.
1.4.
Batasan masalah
Supaya pembahasan masalah lebih mendalam dan
terperinci, maka pembahasan masalah dibatasi menjadi:
a) Website ini menggunakan bahasa pemrograman
HTML
b) Ruang lingkup dari Website ini hanya membahas
mengenai apa itu Perusahaan design, produk-produk
yang ditawarkan dan proses menhubungi.
c) Tidak membahas tentang transaksi karena website ini
haya untuk mempermudah dalam melakukan proses
pemsanan.
1.5.
Metodologi
Adapun metodologi penelitian yang dilakukan
penulis untuk menyelesaikan berbagai permasalahan yang
terjadi diatas adalah:
a)
Pengumpulan data
4
-
Data-data gambar untuk melengkapi website
-
Data-data source/coding dari contoh sebsite
yang saya jadikan referensi.
-
Data teks
b) Pengolahan Data
Tahap ini meliputi :
-
Pembongkaran template yang sudah ada
-
Menambahkan
ataupun
mengurangi
data
dalam template agar sesuai dengan keinginan
saya
-
Menyatukan data sehingga aplikasi dapat di
analisa ke tahap selanjutnya
c) Analisa
Melakukan pencarian error dari aplikasi yang
telah diedit pengkodeannya
d)
Pengujian
Melakukan pengetesan untuk mengetahui berjalan
dengan lancar
e)
Penyusunan laporan
Membuat kesimpulan dan saran dari aplikasi yang
telah selesai di buat..
BAB II
TINJAUAN PUSTAKA
2.1. Penelitian terdahulu
Pada tahun 2011 Marsita Dewi Telah membuat website
“Pembuatan situs web almamater perguruan tinggi”,
dengan sedikit mengacu pada website tersebut mencoba
mengubah konsepnya menjadi konsep baru sesuai dengan
dengan keinginan, sehingga menghasilkan tampilan yang lebih
menarik dan lebih interaktif.
2.2. Landasan teori
2.2.1. Website
Web merupakan hal yang tidak dapat dipisahkan dari
dunia internet. Melalui web, setiap pemakai internet bisa
mengakses informasi-informasi di situs web yang tidak hanya
berupa teks, tetapi juga dapat berupa gambar, suara, film,
animasi, dan lain-lain.
Berikut ini pengertian dan definisi
pembelajaran menurut sumber dan para ahli:
Website adalah keseluruhan halaman-halaman web yang
terdapat dalam sebuah domain yang mengandung informasi.
Sebuah website biasanya dibangun atas banyak halaman web
yang saling berhubungan. Hubungan antara satu halaman web
dengan halaman web yang lainnya disebut dengan hyperlink,
5
6
sedangkan teks yang dijadikan media penghubung disebut
hypertext (Yuhefizar, 2009).
Menurut Sampurna (1996) : WEB adalah sekelompok
kode berbasis teks yang sederhana dan universal
Secara terminologi website adalah kumpulan dari
halaman-halaman situs, yang biasanya terangkum dalam
sebuah domain atau subdomain, yang tempatnya berada di
dalam World Wide Web (WWW) di Internet. WWW terdiri
dari seluruh situs web yang tersedia kepada publik. Halamanhalaman sebuah situs web (web page) diakses dari sebuah
URL yang menjadi “akar” ( root ), yang disebut homepage
(halaman induk; sering diterjemahkan menjadi “beranda”,
“halaman muka”), URL ini mengatur web page untuk menjadi
sebuah hirarki, meskipun hyperlink-hyperlink yang ada di
halaman tersebut mengatur para pembaca dan memberitahu
mereka susunan keseluruhan dan bagaimana arus informasi ini
berjalan (http://www.proweb.co.id).
7
2.2.2. HTML
HTML(Hyper
Text
Markup
Language)
adalah
sekumpulan simbol-simbol atau tag-tag yang dituliskan
dalam sebuah file yang dimaksudkan untuk menampilkan
halaman pada web browser. Tag-tag tadi memberitahu
browser bagaimana menampilkan halaman web dengan
lengkap kepada pengguna.
Tag-tag HTML selalu diawali dengan dan
diakhiri dengan dimana x tag HTML seperti b, i, u dan
sebagainya. (Rio Astamal, 2006). HTML memiliki beberapa
versi, yaitu:
a. HTML2.0
Dikembangkan oleh Internet Engineering Task Force HTML
Working Group pada tahun 1996. HTML 2.0 adalah
versi HTML yang sudah kadaluarsa. Jadi bagi para
pengembang
Web sudah
tidak
lagi
menggunakan
versi HTML 2.0 standar.
b. HTML3.2
HTML 3.2 menjadi Rekomendasi W3C 14. Januari 1997.
HTML 3.2 berisi fitur baru seperti font, table, applet,
superscripts, subscript dan banyak lagi, dengan standar
HTML 2.0 yang ada.
c. Salah satu unsur yang ditambahkan ke standar HTML 3.2,
adalah . Tag ini diperkenalkan kompleksitas yang
8
tidak perlu untuk tugas penting dari memisahkan konten
HTML (teks) dari presentasi (style).
d. HTML4.0
HTML 4.0 menjadi Rekomendasi W3C 18. Desember 1997.
Rilis kedua dikeluarkan pada tanggal 24. April 1998 dengan
hanya beberapa koreksi editorial. Fitur yang paling penting
dari HTML 4.0 adalah pengenalan style sheet (CSS).
e. HTML4.01
HTML 4.01 menjadi Rekomendasi W3C 24. Desember 1999.
HTML 4.01 adalah minor update-koreksi dan perbaikan bug
dari HTML 4.0.
f. XHTML1.0
XHTML 1.0 merumuskan HTML 4.01 dalam XML.
XHTML 1.0 menjadi Rekomendasi W3C 20. Januari 2000.
g. HTML5
Pada tanggal 22 Januari 2008, W3C menerbitkan rancangan
kerja
untuk
HTML
5.
HTML
5
meningkatkan
interoperabilitas, dan mengurangi biaya pengembangan,
dengan membuat aturan yang tepat tentang bagaimana untuk
menangani
semua
elemen
memulihkan dari kesalahan.
HTML,
dan
bagaimana
Beberapa fitur baru dalam
HTML 5 adalah fungsi untuk audio embedding, video,
grafik, sisi penyimpanan data klien, dan dokumen interaktif.
HTML 5 juga mengandung unsur-unsur baru seperti ,
, dan . Yang termasuk dalam
9
kelompok kerja HTML 5 diantaranya AOL, Apple, Google,
IBM, Microsoft, Mozilla, Nokia, Opera, dan banyak lagi
vendor lainnya. Untuk mendapatkan sebuah website yang
menarik
dengan
berbagai
animasi,
maka
penulis
menggunakan HTML5 sebagai HTML dalam website
tersebut.
2.2.3. JQuery
JQuery adalah pustaka Java Script kecil bersumber
terbuka yang menekankan pada interaksi antara java script
dan html. (John Resig, 2006)
Dengan JQuery, suatu halaman web yang menjadi
aplikasi web, jika dilihat sourcenya , akan terlihat seperti
dokumen HTML biasa, tidak ada kode Java Script yang
terlihat langsung.
JQuery merupakan salah satu library yang membuat
program web di sisi klien, tidak terlihat sebagai program
Java Script biasa, yang harus secara eksplisit disisipkan pada
dokumen web. Pada teknik pemrograman sisi klien dengan
menggunakan java script biasa, setiap elemen yang akan
memiliki event, akan secara eksplisit terlihat ada event yang
dilekatkan pada elemen tersebut.
10
2.2.4. CSS
CSS (Cascading Style Sheet) adalah standard
pembuatan dan pemakaian style untuk dokumen terstruktur ,
CSS digunakan untuk mempersingkat penulisan tag HTML
seperti font,color,text, dan table menjadi lebih ringkas
sehingga tidak terjadi pengulangan tulisan. (Suprayogi).
Keuntungan menggunakan CSS :
• Memisahkan presentastion sebuah dokumen dari
content document itu sendiri.
• Mempermudah dan Mempersingkat pembuatan
dan pemeliharaan dokumen web
• Mempercepat
proses
rendering/pembacaan
HTML.
CSS
digunakan dalam
kode HTML untuk
menciptakan suatu kumpulan style yang terkadang dapat
digunakan untuk memperluas kemampuan HTML, sebagai
contoh, kode HTML murni tidak memungkinkan untuk untuk
mengatur ukuran font yang diterapkan pada setiap sel dan
bahkan tag pun tak berpengaruh pada selsel
tabel (Abdul, 2003).
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1,
CSS2, dan CSS3. CSS1 dikembangkan berpusat pada
pemformatan dokumen HTML, SSS2 dikembangkan untuk
memenuhi kebutuhan terhadap format dokumen agar bisa
ditampilkan di printer, sedangkan CSS3 adalah versi terbaru
11
dari CSS yang mampu melakukan bayak hal dalam desain
web.
CSS2
mendukung
penentuan
posisi
konten,
downloadable, huruf, tampilan pada tabel dan media tipe
untuk printer. Kehadiran versi CSS yang kedua diharapkan
lebih baik dari versi pertama.
CSS3 juga dapat melakukan animasi pada halam
website, diantaranya animasi warna hingga animasi 3D.
Dengan CSS3 desainer lebih dimudahkan dalam hal
kompatibilitas
websitenya
pada
smartphone
dengan
dukungan fitur baru yakni media query. Selain itu, banyak
fitur baru pada CSS3 seperti; multiple background, borderradius, drop-shadow, border-image, CSS Math, dan CSS
Object Model. Untuk mendapatkan sebuah website yang
menarik
dengan
berbagai
animasi,
maka
penulis
menggunakan CSS3 sebagai CSS dalam website tersebut.
12
BAB III
PERANCANGAN SISTEM
3.1 Flowchart
Pada gambar 3.1 di tampilkan flowchart untuk website
Start
Home
About Us
Profil
Peruhaan
register
Galery
Contact
Desain
Logo
Web Desain
Finish
Program
Aplikasi
Tidak
Ya
Exit
Gambar 3.1 Flowchart Website
Pada gambar diatas yaitu gambar 3.1, ditampilkan flowchart
untuk website.
Dari gambar diatas dapat dijelaskan sebagai berikut:
a)
Start
Saat website pertama kali dibuka.
b) Home
13
Tampilan awal saat user membuka website. Merupakan
halaman yang berisi menu menu sebagai berikut:
1.
About Us
Jika menu “About Us” dipilih maka akan ditampilkan
sebuah tulisan tentang perusahaan Six Nine Design
2.
Register
Jika menu “Register” dipilih maka akan ditampilkan formform untuk di isi jika akan menjadi member
3.
Galery
Jika menu “Galery” dipilih maka akan ditampilkan daftar
daftar sample produk.
-
Web Design
-
Logo Design
-
Program Aplikasi
4.
Contact
Jika menu “Contact” dipilih maka akan ditampilkan form
untuk mengirim pesan.
c)
Exit
Website keluar seutuhnya.
3.2 Lembar Kerja Tampilan
Lembar kerja tampilan ini sangat berguna bagi user ,
karena
dapat
sebagai
pedoman
untuk
mengimplementasikannya. Sehingga perancang seharusnya
membuat dokumentasi akan bentuk-bentuk tampilan yang
akan digunakan.
14
Berikut ini merupakan LKT (Lembar Kerja Tampilan)
pada website perusdahaan desain
a. Form Home
Gambar 3.2 Form Home
Keterangan:
Pada rancangan tampilan pertama ini dibagian atas terdapat
logo perusahaan, button menu yang terdiri dari “Home”,
“About Us”, “Register”,”Galery”“Contact”, “Contact”,
Pada tampilan ini terdapat sebuah slideshow, dan juga
terdapat sebuah kolom untuk isi.
15
b. Form About Us
Gambar 3.3 Form About Us
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“About
Us”,
“Register”,
“Galery”,
“Contact”, Pada tampilan ini terdapat bagian isi yang
bertuliskan tentang
produk.
Website dan tentang layanan
16
c. Form Register
Gambar 3.4 Form Register
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“Contact”,
“About
Us”,
“Register”,
“Galery”,
Pada tampilan ini terdapat bagian yang
berisi form-form untuk melakukan registrasi.
17
d. Form Galery
Gambar 3.5 Form Galery
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas terdapat
logo perusahaan, button menu yang terdiri dari “Home”,
“About Us”, “Register”, “Galery”, “Contact”,
Pada
tampilan ini terdapat beberapa gambar produk dan layanan.
18
d.1 Form Web Design
Gambar 3.6 Form Web Design
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“Contact”,
“About
Us”,
“Register”,
“Galery”,
Pada tampilan ini terdapat tampilan
gambar sample produk web design.
19
d.2 Form Desain Logo
Gambar 3.7 Form Desain logo
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“Contact”,
“About
Us”,
“Register”,
“Galery”,
Pada tampilan ini terdapat tampilan
gambar sample produk desain logo
20
d.3 Form Program Aplikasi
Gambar 3.8 Form Program aplikasi
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“Contact”,
“About
Us”,
“Register”,
“Galery”,
Pada tampilan ini terdapat tampilan
gambar sample produk program aplikasi
21
e. Form Contact
Gambar 3.9 Form Contact
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“About
Us”,
“Register”,
“Galery”,
“Contact”, Pada tampilan ini terdapat tampilan formform untuk menghubungi.
22
3.3 Jaringan Sematik Tampilan
Jaringan semantik merupakan gambaran pengetahuan
grafis yang menunjukkan hubungan antar berbagai objek.
Jaringan semantik terdiri dari lingkaran-lingkaran yang
menunjukkan objek dan informasi tentang objek-objek
tersebut.
T2
T1
T3
T4
T8
5
T5
T6
T7
Gambar 3.10 Jaringan Sematik Tampilan
Pada Gambar 3.10 ditunjukkan bahwa T1 merupakan menu,
yang terdiri dari T2, T3, T4, dan T8. Selanjutnya tampilan
T4 mempunyai beberapa tampilan materi yang terdiri dari
T5. T6 danT7
23
BAB IV
HASIL DAN ANALISIS
4.1. Hasil karya / Implementasi
Implementasi adalah pelaksanaan sebuah aplikasi. Dalam
implementasi aplikasi ini menampilkan rancangan antar muka.
Pada aplikasi ini, user dapat mengetahui tentang apa itu Website
perusahaan design, dan juga produk produk yang ditawarkan.
Perancangan website yang telah dilakukan , diimplementasikan
menggunakan perangkat lunak adobe dreamweaver CS 3.
Dalam pembuatan Website ini, merancang pembuatan
website dengan menggunakan flowchart yang sudah dijelaskan
pada halaman sebelumnya. Dari tahap-tahap rancangan tersebut,
maka dihasilkan sebuah website perusahaan design.
4.1.1. Tampilan Program
Berikut ini merupakan tampilan website perusahaan
design:
24
a)
Tampilan Awal
Gambar 4.1 Tampilan awal
Pada saat website pertama kali dijalankan, akan muncul
tampilan seperti pada gambar 4.1, saat user klik button
About, maka akan lanjut ke halaman selanjutnya, seperti pada
gambar 4.2.
Home
About Us
Register
Galery
Contact
25
b) Tampilan Halaman About Us
Gambar 4.2 Tampilan halaman About Us
Pada gambar 4.2 menampilkan beberapa menu yang dapat
dipilih oleh user. Jika user memilih “about us”, maka akan
ditampilkan tampilan seperti pada gambar ini. Berisi tentang
profil perusahaan
Design & Logo
Meliputi Pembuatan desain grafis, dan juga logo-logo
untuk pribadi, intansi maupun perusahaan.
26
c)
Tampilan Halaman Register
Gambar 4.3 Tampilan halaman Register
Pada gambar 4.3 menampilkan beberapa menu yang dapat
dipilih oleh user. Jika user memilih “Register ”, maka akan
ditampilkan tampilan seperti pada gambar ini. Berisi formform untuk melakukan registrasi.
User ID
:
Untuk Perusahaan Design
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Ahli Madya Komputer
oleh:
Yudha Pranata
NIM : 562009015
Program Studi Diploma Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2013
Rancang Bangun Aplikasi Web
Untuk Perusahaan Design
Laporan Tugas Akhir
oleh:
Raditya Yudha Pranata
NIM : 562009015
Program Studi Diploma Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2013
i
LEMBAR PENGESAHAN
Judul
: Rancang Bangun Aplikasi Web Untuk
Perusahaan Design
Nama Mahasiswa
: Yudha Pranata
NIM
Program Studi
Fakultas
: 562009015
: Diploma Teknik Informatika
: Teknologi Informasi
Salatiga, 13 April 2013
Menyetujui,
Teguh Wahyono S.Kom., M.Cs
Mengesahkan
Dr. Dharmaputra T. Palekahelu, S.Pd., M.Pd
Budhi Kristianto, S.Kom, M.Sc
Dekan
Ketua Program Studi
ii
PERNYATAAN BEBAS PLAGIASI
Yang bertanda tangan di bawah ini,
Nama
: Yudha Pranata
Nim
: 562009015
Program Studi : Diploma Teknik Informatika
Fakultas
: Teknologi Informasi, Universitas Kristan Satya
Wacana
Menyatakan Dengan sesuhngguhnya laporan yang berjudul :
Rancang Bangun Aplikasi Web Untuk Perusahaan Design
Yang dibimbing oleh :
1.Teguh Wahyono S.Kom., M.Cs
Adalah benar-benar hasil karya saya
Di dalam laporan kerja praktek ini tidak dapat keseluruhan atau
sabagian tulisan atau gagasan orang lain yang saya ambil dengan cara
menyalin atau meniru dalam bentuk rangkaian kalimat atau gambar
serta symbol yang saya akui seolah-olah sebagai karya saya tanpa
memberikan pengakuan pada penulis atau sumber aslinnya.
Salatiga, 13 April 2013
Yang memberi pernyataan,
Yudha Pranata
iii
PERNYATAAN PERSETUJUAN PUBLIKASI LAPORAN TUGAS
AKHIR UNTUK KEPENTINGAN AKADEMIS
Sebagai sivitas akademika Universitas Kristen Satya Wacana (UKSW).
Saya yang bertanda tangan di bawah ini :
Nama
:
Yudha Pranata
NIM
:
562009015
Program Studi
:
Diploma Teknik Informatika
Fakultas
: Teknologi Informasi, Universitas Kristen Satya
Wacana
Jenis Karya
:
Laporan Kerja Praktek
Demi Pengembangan ilmu pengetahuan, menyetujui untuyk memberikan
kepada UKSW hak bebas royalti non-eksklusif (non-exclusive royalty free
right) atas karya ilmiah saya yang berjudul :
Rancang Bangun Aplikasi Web Untuk Perusahaan Design
Beserta perangkat yang ada (jika perlu).
Dengan hak bebas royalty non-eksklusif ini, UKSW berhak menyimpan
mengalihmedia/mengalihformatkan, mengolah dalam bentuk pangkalan data,
merawat, dan mempublikasikan laporan tugas akhir saya, selama tetap
mencantumkan nama saya sebagai penulis/pencipta.
Demikian pernyataan ini saya buat dengan sebenarnya
Dibuat di : Salatiga
Pada Tanggal : 13 April 2013
Yang menyatakan
Yudha Pranata
Mengetahui
Teguh Wahyono S.Kom., M.Cs
iv
Prakata
Segala puji dan syukur penulis panjatkan kepada Tuhan
Yesus Kristus atas berkat dan anugerahnya yang telah
dilimpahkan
kepada
penulis,
sehingga
penulis
dapat
menyelesaikan Laporan Tugas Akhir yang berjudul “Pembuatan
Website perusahaan Desain”.
Tugas Akhir adalah bagian dari syarat yang harus
dipenuhi untuk dapat lulus pada Fakultas Teknologi Informasi,
Universitas Kristen Satya Wacana. Namun, Tugas Akhir ini
memberikan
mengikutinya,
banyak
manfaat
khususnya
kepada
penulis
mahasiswa
mendapat
bekal
yang
untuk
diterapkan di kemudian hari lewat Penulisan Laporan Tugas
Akhir ini.
Keberhasilan dalam penyelesaian Laporan Tugas Akhir
ini tidak akan terwujud tanpa adanya
bantuan dari berbagai
pihak, dengan rasa rendah hati penulis sampaikan rasa terima
kasih yang sedalam-dalamnya kepada pihak-pihak yang selama
ini telah membimbing serta membantu penulisan Laporan Tugas
Akhir ini, Yaitu kepada :
1. Tuhan Yesus Kristus atas segala rahmat dan karunia-Nya
dan Bimbingan-Nya sehingga penyusunan Laporan Tugas
Akhir ini dapat terselesaikan dengan baik.
v
2. Bapak Dr. Dharmaputra T. Palekahelu, S.Pd., M.Pd sebagai
Dekan Fakultas Teknologi Informasi, Universitas Kristen
Satya Wacana.
3. Bapak Budhi Kristianto, S.Kom, M.Sc sebagai Ketua
Program Studi Teknik Informatika, Diploma Fakultas
Teknologi Informasi, Universitas Kristen Satya Wacana.
4. Bapak Teguh Wahyono selaku dosen pembimbing yang
telah banyak memberikan arahan, bimbingan, serta
masukan sehingga laporan ini dapat terselesaikan dengan
baik.
5. Segenap dosen yang telah memberikan bekal ilmu selama
ini.
6. Orang tua dan keluarga tercinta, yang memberikan
dukungan baik moril maupun materil kepada penulis
untuk selalu berusaha mencapai hasil yang terbaik.
7. Dimas Prasetya yang telah memberikan banyak masukan
dalam pengembangan aplikasi ini.
8. Vistra Vevtisia, Kristin Wahyuningsih
yang telah
memberikan support serta dukungan moril
9. Serta semua pihak yang tidak dapat penulis sebutkan satu
persatu.
Penulis sadar bahwa dalam mengerjakan karya tulis ini
masih ada kekurangannya, untuk itu penulis mengharapkan saran
dan kritik yang sifatnya membangun, semoga karya tulis ini dapat
vi
Penulis sadar bahwa dalam mengerjakan karya tulis ini
masih ada kekurangannya, untuk itu penulis mengharapkan saran
dan kritik yang sifatnya membangun, semoga karya tulis ini dapat
bermanfaat khususnya bagi penulis sendiri dan umumnya bagi
pembaca.
Salatiga, 13 April 2013
Penulis
vii
Daftar Isi
Hal
Judul
.................................................................................................
i
Lembar Pengesahan ............................................................................. ii
Lembar Pernyataan Bebas Plagiasi ...................................................... iii
Lembar Pernyataan Hak Bebas Royalti dan Publikasi......................... iv
Prakata ................................................................................................. v
Daftar Isi .............................................................................................. viii
Daftar Gambar ..................................................................................... x
Daftar lampiran .................................................................................... xi
Abstrak ................................................................................................. xii
Bab I Pendahuluan ............................................................................... 1
1.1 Latar Belakang ..................................................................... 1
1.2 Rumusan Masalah ............................................................... 2
1.3 Tujuan .................................................................................. 2
1.3.1 Tujuan Umum ........................................................... 2
1.3.2 Tujuan Khusus ...................................................... 3
1.4 Batasan Masalah .................................................................. 3
1.5 Metodologi........................................................................... 3
Bab II Tinjauan Pustaka ....................................................................... 5
2.1 Penelitian Terdahulu ......................................................... 5
viii
2.2 Landasan Teori .................................................................. 5
Bab III Perancangan Sistem ................................................................. 12
3.1 Flowchart .......................................................................... 12
3.2 Lembar Kerja Tampilan .................................................... 13
3.3 Jaringan Sematik Tampilan……………………………. .. 22
Bab IV Hasil dan Analisis.................................................................... 23
4.1 Hasil Karya / Implementasi ............................................... 23
4.2 Hasil Pengujian ................................................................. 32
Bab V Penutup ..................................................................................... 33
5.1 Kesimpulan ....................................................................... 33
5.2 Saran.................................................................................. 33
Daftar Pustaka ...................................................................................... 34
Lampiran............................................................................................. 35
ix
Daftar Gambar
Hal
Gambar3.1Flowchart…………………………………….. .................. 12
Gambar 3.2 Form Home. ..................................................................... 14
Gambar 3.3 Form About Us................................................................ 15
Gambar 3.4 Form Register ................................................................... 16
Gambar 3.5 Form Galery ..................................................................... 17
Gambar3.6 Form web Design…………………………………….. .... 18
Gambar3.7 Form Desain Logo…………………………………….. ... 19
Gambar3.8Form Program Aplikasi……………………………….. .... 20
Gambar3.9 Form web Contact…………………………………….. ... 21
Gambar3.10 Jaringan Sematik Tampilan ……………………….. .. 22
Gambar4.1 Tampilan Awal…………………………………….. ........ 24
Gambar4.2 Tampilan Halaman About Us………………………
25
Gambar4.3 Tampilan Halaman Register ……………………….. ... 26
Gambar4.4 Tampilan Halaman Galery ……………………….. ..... 27
Gambar4.5 Tampilan Halaman Web Design …………………….. 28
Gambar4.5 Tampilan Halaman Desain Logo ………………….. ... 29
Gambar4.5 Tampilan Halaman program Aplikasi ………………. 30
Gambar4.5 Tampilan Halaman Contact ……………………… ...... 31
x
Daftar Lampiran
Lampiran 1 Kode Program................................................................
xi
35
Abstrak
Website tampaknya telah menjadi kebutuhan bagi sebuah
organisasi, lembaga, perusahaan komersial, dan sebagainya.
Website adalah media alternatif untuk memasarkan produk,
di samping sistem pemesanan online diharapkan
meningkatkan pelayanankepadakonsumen.
Penelitian ini dilakukan bertujuan untuk membuat website
yang menarik dan interaktif sehingga dapat di publikasikan
kepada masyarakat luas oleh karena itu diharapkan dapat
menciptakan website yang lebih baik dari pada website yang
sebelumnya.
Keyword : Website
xii
BAB I
Pendahuluan
1.1.
Latar Belakang
Seiring dengan perkembangan teknologi informasi saat
ini, penggunaan komputer telah merambah ke berbagai
bidang kehidupan, dan dalam berbagai penyelesaian
pekerjaan.
Diramalkan
penggunaan
komputer
dalam
kehidupan modern ini akan banyak memberikan manfaat
untuk
berbagai
bidang,
baik
itu
bidang
keuangan,
manajemen, perbankan, dan lainnya.
Website memiliki peranan yang sangat penting dalam
sebuah perusahaan khususnya dalam bidang marketing atau
dalam memberikan suatu informasi tentang sebuah produk
karena
kita
menggunakan
tahu
sekarang
komputer
dan
ini
hampir
kebanyakan
semua
dari
orang
mereka
menggunakannya untuk mengakses website contohnya seperti
facebook, toko bagus, detik.com, dll, selain itu website juga
dapat di jadikan sebagai sarana perusahaan untuk memberikan
informasi informasi penting perusahaan yang dapat digunakan
oleh karyawan dalam mendukung kinerjannya.
Dan berdasarkan hal tersebut, bermaksud untuk
mendirikan sebuah usaha dalam bidang pembuatan desain
logo, pembuatan program aplikasi desain web dan
pembuatan website dan memasarkannya via website.
1
2
Sehingga memunculkan ide untuk membuat “Rancang
Bangun Aplikasi Web Untuk Perusahaan Design”
Sebagai judul tugas akhir
1.2.
Rumusan Masalah
Website
adalah
dokumen
yang memuat
data
mengenai detail dan selling point dari sebuah perusahaan,
lembaga, atau instansi. Maka dari itu diperlukan sebuah
Website harus di buat dengan jelas dan semenarik
mungkin, maka dari itu didapat rumusan masalah sebagai
berikut:
a) Bagaimana membuat Website tampak lebih menarik
dan interaktif.
b) Bagaimana membuat interface website agar dapat
dipahami
oleh
konsumen
dan
pesan
dapat
tersampaikan.
1.3.
Tujuan
1.3.1.
Tujuan Umum
Tujuan
dari
penelitain
ini
adalah
untuk
mengembangkan website prusahaan desain yang menarik
dan interaktif
3
1.3.2.
Tujuan Khusus
a) Untuk mempublikasikan dan memasarkan
produk kepada masyarakat luas.
b) Untuk mempelajari lebih lanjut tentang ilmu
multimedia dan pemrograman menggunakan
php serta saya ingin mengetahui lebih dalam
tentang system dalam sebuah website.
1.4.
Batasan masalah
Supaya pembahasan masalah lebih mendalam dan
terperinci, maka pembahasan masalah dibatasi menjadi:
a) Website ini menggunakan bahasa pemrograman
HTML
b) Ruang lingkup dari Website ini hanya membahas
mengenai apa itu Perusahaan design, produk-produk
yang ditawarkan dan proses menhubungi.
c) Tidak membahas tentang transaksi karena website ini
haya untuk mempermudah dalam melakukan proses
pemsanan.
1.5.
Metodologi
Adapun metodologi penelitian yang dilakukan
penulis untuk menyelesaikan berbagai permasalahan yang
terjadi diatas adalah:
a)
Pengumpulan data
4
-
Data-data gambar untuk melengkapi website
-
Data-data source/coding dari contoh sebsite
yang saya jadikan referensi.
-
Data teks
b) Pengolahan Data
Tahap ini meliputi :
-
Pembongkaran template yang sudah ada
-
Menambahkan
ataupun
mengurangi
data
dalam template agar sesuai dengan keinginan
saya
-
Menyatukan data sehingga aplikasi dapat di
analisa ke tahap selanjutnya
c) Analisa
Melakukan pencarian error dari aplikasi yang
telah diedit pengkodeannya
d)
Pengujian
Melakukan pengetesan untuk mengetahui berjalan
dengan lancar
e)
Penyusunan laporan
Membuat kesimpulan dan saran dari aplikasi yang
telah selesai di buat..
BAB II
TINJAUAN PUSTAKA
2.1. Penelitian terdahulu
Pada tahun 2011 Marsita Dewi Telah membuat website
“Pembuatan situs web almamater perguruan tinggi”,
dengan sedikit mengacu pada website tersebut mencoba
mengubah konsepnya menjadi konsep baru sesuai dengan
dengan keinginan, sehingga menghasilkan tampilan yang lebih
menarik dan lebih interaktif.
2.2. Landasan teori
2.2.1. Website
Web merupakan hal yang tidak dapat dipisahkan dari
dunia internet. Melalui web, setiap pemakai internet bisa
mengakses informasi-informasi di situs web yang tidak hanya
berupa teks, tetapi juga dapat berupa gambar, suara, film,
animasi, dan lain-lain.
Berikut ini pengertian dan definisi
pembelajaran menurut sumber dan para ahli:
Website adalah keseluruhan halaman-halaman web yang
terdapat dalam sebuah domain yang mengandung informasi.
Sebuah website biasanya dibangun atas banyak halaman web
yang saling berhubungan. Hubungan antara satu halaman web
dengan halaman web yang lainnya disebut dengan hyperlink,
5
6
sedangkan teks yang dijadikan media penghubung disebut
hypertext (Yuhefizar, 2009).
Menurut Sampurna (1996) : WEB adalah sekelompok
kode berbasis teks yang sederhana dan universal
Secara terminologi website adalah kumpulan dari
halaman-halaman situs, yang biasanya terangkum dalam
sebuah domain atau subdomain, yang tempatnya berada di
dalam World Wide Web (WWW) di Internet. WWW terdiri
dari seluruh situs web yang tersedia kepada publik. Halamanhalaman sebuah situs web (web page) diakses dari sebuah
URL yang menjadi “akar” ( root ), yang disebut homepage
(halaman induk; sering diterjemahkan menjadi “beranda”,
“halaman muka”), URL ini mengatur web page untuk menjadi
sebuah hirarki, meskipun hyperlink-hyperlink yang ada di
halaman tersebut mengatur para pembaca dan memberitahu
mereka susunan keseluruhan dan bagaimana arus informasi ini
berjalan (http://www.proweb.co.id).
7
2.2.2. HTML
HTML(Hyper
Text
Markup
Language)
adalah
sekumpulan simbol-simbol atau tag-tag yang dituliskan
dalam sebuah file yang dimaksudkan untuk menampilkan
halaman pada web browser. Tag-tag tadi memberitahu
browser bagaimana menampilkan halaman web dengan
lengkap kepada pengguna.
Tag-tag HTML selalu diawali dengan dan
diakhiri dengan dimana x tag HTML seperti b, i, u dan
sebagainya. (Rio Astamal, 2006). HTML memiliki beberapa
versi, yaitu:
a. HTML2.0
Dikembangkan oleh Internet Engineering Task Force HTML
Working Group pada tahun 1996. HTML 2.0 adalah
versi HTML yang sudah kadaluarsa. Jadi bagi para
pengembang
Web sudah
tidak
lagi
menggunakan
versi HTML 2.0 standar.
b. HTML3.2
HTML 3.2 menjadi Rekomendasi W3C 14. Januari 1997.
HTML 3.2 berisi fitur baru seperti font, table, applet,
superscripts, subscript dan banyak lagi, dengan standar
HTML 2.0 yang ada.
c. Salah satu unsur yang ditambahkan ke standar HTML 3.2,
adalah . Tag ini diperkenalkan kompleksitas yang
8
tidak perlu untuk tugas penting dari memisahkan konten
HTML (teks) dari presentasi (style).
d. HTML4.0
HTML 4.0 menjadi Rekomendasi W3C 18. Desember 1997.
Rilis kedua dikeluarkan pada tanggal 24. April 1998 dengan
hanya beberapa koreksi editorial. Fitur yang paling penting
dari HTML 4.0 adalah pengenalan style sheet (CSS).
e. HTML4.01
HTML 4.01 menjadi Rekomendasi W3C 24. Desember 1999.
HTML 4.01 adalah minor update-koreksi dan perbaikan bug
dari HTML 4.0.
f. XHTML1.0
XHTML 1.0 merumuskan HTML 4.01 dalam XML.
XHTML 1.0 menjadi Rekomendasi W3C 20. Januari 2000.
g. HTML5
Pada tanggal 22 Januari 2008, W3C menerbitkan rancangan
kerja
untuk
HTML
5.
HTML
5
meningkatkan
interoperabilitas, dan mengurangi biaya pengembangan,
dengan membuat aturan yang tepat tentang bagaimana untuk
menangani
semua
elemen
memulihkan dari kesalahan.
HTML,
dan
bagaimana
Beberapa fitur baru dalam
HTML 5 adalah fungsi untuk audio embedding, video,
grafik, sisi penyimpanan data klien, dan dokumen interaktif.
HTML 5 juga mengandung unsur-unsur baru seperti ,
, dan . Yang termasuk dalam
9
kelompok kerja HTML 5 diantaranya AOL, Apple, Google,
IBM, Microsoft, Mozilla, Nokia, Opera, dan banyak lagi
vendor lainnya. Untuk mendapatkan sebuah website yang
menarik
dengan
berbagai
animasi,
maka
penulis
menggunakan HTML5 sebagai HTML dalam website
tersebut.
2.2.3. JQuery
JQuery adalah pustaka Java Script kecil bersumber
terbuka yang menekankan pada interaksi antara java script
dan html. (John Resig, 2006)
Dengan JQuery, suatu halaman web yang menjadi
aplikasi web, jika dilihat sourcenya , akan terlihat seperti
dokumen HTML biasa, tidak ada kode Java Script yang
terlihat langsung.
JQuery merupakan salah satu library yang membuat
program web di sisi klien, tidak terlihat sebagai program
Java Script biasa, yang harus secara eksplisit disisipkan pada
dokumen web. Pada teknik pemrograman sisi klien dengan
menggunakan java script biasa, setiap elemen yang akan
memiliki event, akan secara eksplisit terlihat ada event yang
dilekatkan pada elemen tersebut.
10
2.2.4. CSS
CSS (Cascading Style Sheet) adalah standard
pembuatan dan pemakaian style untuk dokumen terstruktur ,
CSS digunakan untuk mempersingkat penulisan tag HTML
seperti font,color,text, dan table menjadi lebih ringkas
sehingga tidak terjadi pengulangan tulisan. (Suprayogi).
Keuntungan menggunakan CSS :
• Memisahkan presentastion sebuah dokumen dari
content document itu sendiri.
• Mempermudah dan Mempersingkat pembuatan
dan pemeliharaan dokumen web
• Mempercepat
proses
rendering/pembacaan
HTML.
CSS
digunakan dalam
kode HTML untuk
menciptakan suatu kumpulan style yang terkadang dapat
digunakan untuk memperluas kemampuan HTML, sebagai
contoh, kode HTML murni tidak memungkinkan untuk untuk
mengatur ukuran font yang diterapkan pada setiap sel dan
bahkan tag pun tak berpengaruh pada selsel
tabel (Abdul, 2003).
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1,
CSS2, dan CSS3. CSS1 dikembangkan berpusat pada
pemformatan dokumen HTML, SSS2 dikembangkan untuk
memenuhi kebutuhan terhadap format dokumen agar bisa
ditampilkan di printer, sedangkan CSS3 adalah versi terbaru
11
dari CSS yang mampu melakukan bayak hal dalam desain
web.
CSS2
mendukung
penentuan
posisi
konten,
downloadable, huruf, tampilan pada tabel dan media tipe
untuk printer. Kehadiran versi CSS yang kedua diharapkan
lebih baik dari versi pertama.
CSS3 juga dapat melakukan animasi pada halam
website, diantaranya animasi warna hingga animasi 3D.
Dengan CSS3 desainer lebih dimudahkan dalam hal
kompatibilitas
websitenya
pada
smartphone
dengan
dukungan fitur baru yakni media query. Selain itu, banyak
fitur baru pada CSS3 seperti; multiple background, borderradius, drop-shadow, border-image, CSS Math, dan CSS
Object Model. Untuk mendapatkan sebuah website yang
menarik
dengan
berbagai
animasi,
maka
penulis
menggunakan CSS3 sebagai CSS dalam website tersebut.
12
BAB III
PERANCANGAN SISTEM
3.1 Flowchart
Pada gambar 3.1 di tampilkan flowchart untuk website
Start
Home
About Us
Profil
Peruhaan
register
Galery
Contact
Desain
Logo
Web Desain
Finish
Program
Aplikasi
Tidak
Ya
Exit
Gambar 3.1 Flowchart Website
Pada gambar diatas yaitu gambar 3.1, ditampilkan flowchart
untuk website.
Dari gambar diatas dapat dijelaskan sebagai berikut:
a)
Start
Saat website pertama kali dibuka.
b) Home
13
Tampilan awal saat user membuka website. Merupakan
halaman yang berisi menu menu sebagai berikut:
1.
About Us
Jika menu “About Us” dipilih maka akan ditampilkan
sebuah tulisan tentang perusahaan Six Nine Design
2.
Register
Jika menu “Register” dipilih maka akan ditampilkan formform untuk di isi jika akan menjadi member
3.
Galery
Jika menu “Galery” dipilih maka akan ditampilkan daftar
daftar sample produk.
-
Web Design
-
Logo Design
-
Program Aplikasi
4.
Contact
Jika menu “Contact” dipilih maka akan ditampilkan form
untuk mengirim pesan.
c)
Exit
Website keluar seutuhnya.
3.2 Lembar Kerja Tampilan
Lembar kerja tampilan ini sangat berguna bagi user ,
karena
dapat
sebagai
pedoman
untuk
mengimplementasikannya. Sehingga perancang seharusnya
membuat dokumentasi akan bentuk-bentuk tampilan yang
akan digunakan.
14
Berikut ini merupakan LKT (Lembar Kerja Tampilan)
pada website perusdahaan desain
a. Form Home
Gambar 3.2 Form Home
Keterangan:
Pada rancangan tampilan pertama ini dibagian atas terdapat
logo perusahaan, button menu yang terdiri dari “Home”,
“About Us”, “Register”,”Galery”“Contact”, “Contact”,
Pada tampilan ini terdapat sebuah slideshow, dan juga
terdapat sebuah kolom untuk isi.
15
b. Form About Us
Gambar 3.3 Form About Us
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“About
Us”,
“Register”,
“Galery”,
“Contact”, Pada tampilan ini terdapat bagian isi yang
bertuliskan tentang
produk.
Website dan tentang layanan
16
c. Form Register
Gambar 3.4 Form Register
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“Contact”,
“About
Us”,
“Register”,
“Galery”,
Pada tampilan ini terdapat bagian yang
berisi form-form untuk melakukan registrasi.
17
d. Form Galery
Gambar 3.5 Form Galery
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas terdapat
logo perusahaan, button menu yang terdiri dari “Home”,
“About Us”, “Register”, “Galery”, “Contact”,
Pada
tampilan ini terdapat beberapa gambar produk dan layanan.
18
d.1 Form Web Design
Gambar 3.6 Form Web Design
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“Contact”,
“About
Us”,
“Register”,
“Galery”,
Pada tampilan ini terdapat tampilan
gambar sample produk web design.
19
d.2 Form Desain Logo
Gambar 3.7 Form Desain logo
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“Contact”,
“About
Us”,
“Register”,
“Galery”,
Pada tampilan ini terdapat tampilan
gambar sample produk desain logo
20
d.3 Form Program Aplikasi
Gambar 3.8 Form Program aplikasi
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“Contact”,
“About
Us”,
“Register”,
“Galery”,
Pada tampilan ini terdapat tampilan
gambar sample produk program aplikasi
21
e. Form Contact
Gambar 3.9 Form Contact
Keterangan :
Pada rancangan tampilan pertama ini dibagian atas
terdapat logo perusahaan, button menu yang terdiri dari
“Home”,
“About
Us”,
“Register”,
“Galery”,
“Contact”, Pada tampilan ini terdapat tampilan formform untuk menghubungi.
22
3.3 Jaringan Sematik Tampilan
Jaringan semantik merupakan gambaran pengetahuan
grafis yang menunjukkan hubungan antar berbagai objek.
Jaringan semantik terdiri dari lingkaran-lingkaran yang
menunjukkan objek dan informasi tentang objek-objek
tersebut.
T2
T1
T3
T4
T8
5
T5
T6
T7
Gambar 3.10 Jaringan Sematik Tampilan
Pada Gambar 3.10 ditunjukkan bahwa T1 merupakan menu,
yang terdiri dari T2, T3, T4, dan T8. Selanjutnya tampilan
T4 mempunyai beberapa tampilan materi yang terdiri dari
T5. T6 danT7
23
BAB IV
HASIL DAN ANALISIS
4.1. Hasil karya / Implementasi
Implementasi adalah pelaksanaan sebuah aplikasi. Dalam
implementasi aplikasi ini menampilkan rancangan antar muka.
Pada aplikasi ini, user dapat mengetahui tentang apa itu Website
perusahaan design, dan juga produk produk yang ditawarkan.
Perancangan website yang telah dilakukan , diimplementasikan
menggunakan perangkat lunak adobe dreamweaver CS 3.
Dalam pembuatan Website ini, merancang pembuatan
website dengan menggunakan flowchart yang sudah dijelaskan
pada halaman sebelumnya. Dari tahap-tahap rancangan tersebut,
maka dihasilkan sebuah website perusahaan design.
4.1.1. Tampilan Program
Berikut ini merupakan tampilan website perusahaan
design:
24
a)
Tampilan Awal
Gambar 4.1 Tampilan awal
Pada saat website pertama kali dijalankan, akan muncul
tampilan seperti pada gambar 4.1, saat user klik button
About, maka akan lanjut ke halaman selanjutnya, seperti pada
gambar 4.2.
Home
About Us
Register
Galery
Contact
25
b) Tampilan Halaman About Us
Gambar 4.2 Tampilan halaman About Us
Pada gambar 4.2 menampilkan beberapa menu yang dapat
dipilih oleh user. Jika user memilih “about us”, maka akan
ditampilkan tampilan seperti pada gambar ini. Berisi tentang
profil perusahaan
Design & Logo
Meliputi Pembuatan desain grafis, dan juga logo-logo
untuk pribadi, intansi maupun perusahaan.
26
c)
Tampilan Halaman Register
Gambar 4.3 Tampilan halaman Register
Pada gambar 4.3 menampilkan beberapa menu yang dapat
dipilih oleh user. Jika user memilih “Register ”, maka akan
ditampilkan tampilan seperti pada gambar ini. Berisi formform untuk melakukan registrasi.
User ID
: