LEMBAR PERSETUJUAN
APLIKASI PENJUALAN TICKET
TRANSPORTASI ONLINE BERBASIS WEB DENGAN ADOBE DREAMWEAVER CS4
Laporan Tugas Akhir ini
Diajukan sebagai syarat untuk memperoleh sertifikat
Program Pendidikan Setara Diploma 1 Bidang Teknologi Informasi dan
Komunikasi (PRODISTIK)
Kerjasama:
Institut Teknologi Sepuluh Nopember
dan
MA Tarbiyatut Tholabah
Oleh
MOHAMMAD AHLIM IHSAN ABIDIN
Disetujui oleh Pembimbing Tugas Akhir
1. Nurmalis Mudianto, S, Kom.
2. Eka Novi Octavianti, S.Kom.
Disetujui oleh Penguji Tugas Akhir
1. .................................................
2. .................................................
LEMBAR PENGESAHAN
APLIKASI PENJUALAN TICKET TRANSPORTASI ONLINE BERBASIS WEB DENGAN ADOBE
DREAMWEAVER CS4
Diajukan sebagai syarat untuk memperoleh sertifikat Program Pendidikan
Setara Diploma 1 Bidang Teknologi Informasi dan Komunikasi (PRODISTK)
Kerjasama:
Institut Teknologi Sepuluh Nopember
dan
MA Tarbiyatut Tholabah
Oleh
MOHAMMAD AHLIM IHSAN ABIDIN
Disahkan oleh:
Mengesahkan
Mengesahkan
Ketua
PRODISTIK Kepala MA
Tarbiyatut Tholabah Kranji
Ahmad Suroso, S.Kom.
Ahmad Mukhtar, S.Pd., MM.
KATA PENGANTAR
Segenap puji syukur penulis sampaikan kepada Allah karena atas rahmat
dan karunia-Nya, perencanaan, pelaksanaan, dan penyelesaian tugas akhir ini
dapat terselesaikan dengan lancar dan sukses.
Kesuksesan ini dapat penulis peroleh karena dukungan banyak pihak. Oleh
karena itu, penulis menyadari dan menyampaikan terima kasih yang
sedalam-dalamnya kepada:
1. K.H Mohammad Nasrullah Baqir. Selaku Pengasuh pondok pesantren
TARBIYATUT THOLABAH Kranji
2. Drs. Fathur Rohman. Selaku ketua yayasan pondok pesantren TARBIYATUT
THOLABAH Kranji
3.
Bapak Ahmad Mukhtar, S.Pd. MM.
selaku Kepala MA Tarbiyatut Tholabah Kranji
4.
Bapak Ahmad Suroso, S.Kom. selaku
ketua PRODISTIK MA Tarbiyatut Tholabah Kranji dan
5.
Bapak Nurmalis Mudianto
S.Kom, dan Ibu Eka Novi Octavianti,
S.Kom. selaku guru pembimbing
6.
Kedua orang tua yang selalu
memberikan do’a agar tugas akhir ini bisa terselesaikan
7.
Dan juga teman-teman yang selalu
memberikan dorongan sehingga dapat menyelesaikan tugas akhir ini
Akhirnya,
semoga segala amal baik yang telah Bapak/Ibu berikan kepada penulis mendapat
balasan yang baik dari Allah.
Penulis
ABSTRAK
Perkembangan teknologi sangat
cepat sehingga menuntut kita untuk memperoleh
informasi secara cepat dan mudah, saat ini teknologi
menjadi kebutuhan pokok yang mendesak. Dengan begitu akan
mempermudah seseorang untuk mengakses informasi. Suatu
bentuk informasi yang mudah untuk disajikan yaitu dalam
bentuk web penjualan tiket transportasi.
Tugas
Akhir ini adalah untuk membangun sebuah web penjualan tiket transportasi
berbasis web yang memiliki keunggulan dapat memudahkan masyarakat untuk membeli
tiket transportasi tanpa harus keluar rumah dengan memanfaatkan koneksi
internet. Adanya web ini masyarakat tidak perlu repot-repot untuk pergi ke stasiun,
bandara, dan pelabuhan.
Web ini di buat menggunakan Adobe Dreamweaver dan
Adobe photoshop agar memudahkan dalam pembuatan web ini. Dengan Photoshop
sebagai desain gambar dan Dreamweaver sebagai bagian inti dari web ini. Karena
dalam pembuatan web yang paling cocok adalah menggunakan aplikasi Adobe
Dreamweaver.
Penggunaan web sini sangat berguna untuk masarakat umum,
karena web ini mengandung tentang indformasi-informasi penting tentang
penjualan tiket transportasi yang berjarak jauh. Seperti Pesawat, Kapal, dan
Kereta.
DAFTAR ISI
HALAMAN
JUDUL..................................................................................... i
HALAMAN
PERSETUJUAN PEMBIMBING........................................... ii
HALAMAN PENGESAHAN....................................................................... iii
KATA
PENGANTAR................................................................................... iv
ABSTRAK..................................................................................................... v
DAFTAR
ISI.................................................................................................. vi
DAFTAR GAMBAR.....................................................................................vii
BAB I
PENDAHULUAN.............................................................................. 1
1.1 LATAR
BELAKANG................................................................. 1
1.2
TUJUAN...................................................................................... 1
1.3 BATASAN
MASALAH.............................................................. 2
1.4
MANFAAT.................................................................................. 2
BAB II DASAR
TEORI................................................................................ 3
BAB III
PERENCANAAN DAN PERANCANGAN................................... 5
3.1 KEBUTUHAN
HARDWARE..................................................... 5
3.2 KEBUTUHAN
SOFTWARE.......................................... ........... 5
3.3 PENJELASAN
PRODUK........................................................... 5
BAB IV
PEMBAHASAN............................................................................. 11
BAB V
PENUTUP........................................................................................ 15
5.1
KESIMPULAN............................................................................ 15
5.2
SARAN........................................................................................ 15
DAFTAR
DUSTAKA................................................................................... 16
BIODATA PENULIS................................................................................... 16
DAFTAR GAMBAR
1.
Gambar 3.3.1.1 Tampilan gambar yang akan diedit di Photoshop
2.
Gambar 3. 3.1.2 Tanpilan gambar
yang sudah selesai
3.
Gambar 3.3.2.1 Tampilan awal Adobe Dreamweaver
4.
Gambar 3.3.2.2 Tampilan saat insert table
5.
Gambar 3.3.2.3 Tampilan yang sudah jadi
6.
Gambar 3.3.2.4 Tampilan code hyperlink
7.
Gambar 3.3.2.5 Tampilan saat mengCopy hyperlink
8.
Gambar 3.3.2.6 Tampilan saat sudah selesai menambah table pada hyperlink
9.
Gambar 3.3.2.7 Tampilan setelah disimpan
10. Gambar 3.3.2.8 Tampilan saat di browser
mozila firefox
11. Gambar 3.3.2.9 Tampilan menu home
12. Gambar 3.3.2.10 Tampilan menu pesawat
13. Gambar 3.3.2.11 Tampilan menu kereta
14. Gambar 3.3.2.12 Tampilan menu kapal
15. Gambar 3.3.2.13 Tampilan menu pembelian
16. Gambar 3.3.2.14 Tampilan menu about us
BAB I
PENDAHULUAN
1. 1. Latar Belakang
Perkembangan teknologi sangat
cepat sehingga menuntut kita untuk memperoleh
informasi secara cepat dan mudah, saat ini teknologi
menjadi kebutuhan pokok yang mendesak. Dengan begitu akan
mempermudah seseorang untuk mengakses informasi. Suatu
bentuk informasi yang mudah untuk disajikan yaitu dalam
bentuk web penjualan tiket transportasi.
Perkembangan teknologi internet
yang pesat telah memicu munculnya berbagai aplikasi baru termasuk di bidang Teknologi
Informasi.Website adalah salah satu revolusi dibidang informasi berbasis
teknologi Internet.Website diharapkan dapat dijadikan alternative bagi
pengembangan sistem informasi yang lebih efektif dan efesien dengan biaya yang
lebih rendah dimasa mendatang.Hal ini dapat berjalan lancar apabila ada suatu
jaringan computer.
Web ini
menggunakan sebuah aplikasi Adobe Dreamweaver, karena hanya aplikasi ini yang
dapat membantu pembuatan sebuah web. Dan dengan penggunaan Adobe Dreamweaver
pembuat web jauh lebih mudah membuat web ini dibandingkan dengan menggunakan
aplikasi yang lainya.
Web ini
juga menggunakan aplikasi Adobe Photoshop, yang karena dengan aplikasi ini
pembuat web dapat membuat desain maupun background web ini dengan sangat baik
dan bagus. Di dalam aplikasi Adobe Photoshop ini terdapat berbagai macam tool
yang dapat memudahkan pembuat web untuk menyelesaikan desain maupun mengedit
gambar untuk background web ini.
Berdasarkan
hal-hal di atas, memunculkan gagasan untuk membuat sebuah web penjualan tiket
transportasi dengan memanfaatkan Adobe Dreamweaver, Adobe Photoshop yang di
bantu dengan adanya internet. Dengan ini masyarakat dapat membeli tiket
transportasi tanpa harus keluar rumah. Dan ini dapat menjadi penghematan.
1. 2. Tujuan penelitian
Tujuan dari Tugas Akhir ini adalah untuk
membangun sebuah web penjualan tiket transportasi berbasis web yang memiliki
keunggulan dapat memudahkan masyarakat untuk membeli tiket transportasi tanpa
harus keluar rumah dengan memanfaatkan koneksi internet. Adanya web ini
masyarakat tidak perlu repot-repot untuk pergi ke stasiun, bandara, dan
pelabuhan, tapi hanya perlu duduk santai di rumah.
1. 3. Batasan Masalah
Adapun
batasan-batasan yang diberikan pada Tugas Akhir ini adalah :
1)
Web ini hanya melibatkan 3 macam transportasi saja.
2)
Web ini tidak mendukung pada penjualan tiket transportasi jarak dekat.
3)
Pembangunan web menggunakan aplikasi Adobe Dreamweaver dan Adobe
Photoshop.
1. 4. Manfaat
Manfaat
dari web ini adalah untuk mempermudah masyarakat melakukan pembelian tiket
secara online, dan tidak perlu pergi ke loket penjualan tiket di
bandara,stasiun, maupun pelabuhan.
BAB II
DASAR TEORI
2.1 Website
Website merupakan kumpulan halaman web yang
saling terhubung dan file-filenya saling
terkait. Web terdiri dari page atau halaman, dan kumpulan halaman yang
dinamanakan homepage. Homepage berada dibawahnya. Biasanya setiap halaman di
bawah homepage disebut child page, yang berisi hyperlink ke halaman lain dalam
web.
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 menggunakan banyak media, seperti teks, gambar, animasi, suara atau
film.
Ada beberapa kelebihan dan manfaat website
sehingga banyak orang membutuhkan kehadirannya, diantaranya:
1.
Memiliki alamat secara online
2.
Jangakauan tanpa batas sehingga dapat diakses oleh pengguna di seluruh
dunia daam waktu yang tak terbatas.
3.
Menjadi cermin pribadi maupun citra perusahaan apabila fitur yang
disediakan cukup interaktif dan dinamis.
4.
Dapat berfungsi sebagai identitas pribadi / Perusahaan tentang profil
diri agar dapat diketahui oleh para customer dalam menjalankan bisnis sehingga
komunikasi dapat berjalan dengan mulus.
5.
Situs personal dapat berfungsi sebagai juru bicara untuk menuangkan ide,
gagasan, kritik, saran, berbagi ilmu, dan suara hati lainnya yang ingin
dituangkan kedalam situs melalui tulisan.
Website yang dibuat oleh
seorang pengembang website harus benar-benar mencerminkan identitas suatu
institusi, jangan sampai bertolak belakang antara isi dengan bentuk dan tata
letak situs itu sendiri. Ada beberapa hal yang harus diperhatikan, salah
satunya adalah tentang kategori situs itu sendiri1.
2.2
Adobe Dreamweaver CS4
Adobe Dreamweaver adalah aplikasi desain dan pengembangan web yang menyediakan editor WYSIWYG visual (bahasa sehari-hari yang
disebut sebagai Design view) dan kode editor dengan fitur standar seperti syntax highlighting, code completion, dan code collapsing serta fitur lebih
canggih seperti real-time syntax checking
dan code introspection untuk
menghasilkan petunjuk kode untuk membantu pengguna dalam menulis kode. Tata
letak tampilan design memfasilitasi desain cepat dan pembuatan kode seperti
memungkinkan pengguna dengan cepat membuat tata letak dan manipulasi elemen
HTML. Dreamweaver memiliki fitur browser yang terintegrasi untuk melihat
halaman web yang dikembangkan di jendela pratinjau program sendiri agar konten
memungkinkan untuk terbuka di web browser yang telah terinstall. Aplikasi ini menyediakan transfer dan fitur sinkronisasi, kemampuan untuk mencari dan mengganti baris teks atau
kode untuk mencari kata atau kalimat biasa di seluruh situs, dan templating feature yang memungkinkan
untuk berbagi satu sumber kode atau memperbarui tata letak di seluruh situs
tanpa server side includes atau scripting. Behavior Panel juga
memungkinkan penggunaan JavaScript dasar tanpa pengetahuan coding, dan integrasi dengan Adobe Spry Ajax framework menawarkan
akses mudah ke konten yang dibuat secara dinamis dan interface.
Dreamweaver dapat menggunakan ekstensi dari pihak ketiga untuk memperpanjang
fungsionalitas inti dari aplikasi, yang setiap pengembang web bisa menulis
(sebagian besar dalam HTML dan JavaScript). Dreamweaver didukung oleh komunitas
besar pengembang ekstensi yang membuat ekstensi yang tersedia (baik komersial
maupun yang gratis) untuk pengembangan web dari efek rollover sederhana sampai
full-featured shopping cart2.
2.3 Adobe Photoshop CS5
Adobe Photoshop, atau biasa disebut Photoshop, adalah perangkat lunak editor citra buatan Adobe
Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek.
Perangkat lunak ini banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market
leader) untuk perangkat lunak pengolah gambar/foto, dan, bersama Adobe
Acrobat,
dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems3.
BAB III
PERENCANAAN DAN
PERANCANGAN
3.1
Kebutuhan Hardware
Kebutuhan hardware dalam pembuatan tugas
akhir ini adalah : laptop, mouse, Flashdisk, Printer dan Charger.
3.2
Kebutuhan Software
Kebutuhan software dalam pembuatan tugas akhir
ini adalah : Adobe Photoshop SC5, Adobe Dreamweaver CS4, dan Microsoft Word
2007.
3.3
Penjelasan Produk
3.3.1 Pembuatan desain menggunakan photoshop CS5
Langkah-langkahnya sebagai berikut ;
·
Masukan semua gambar yang akan diedit untuk dijadikan sebagai desaign 
Gambar 3.3.1.1 Tampilan gambar yang akan
diedit di Photoshop
·
Satukan gambar-gambar yang sudah dipilih dengan menggunkan magic wand
tool pada worksheet baru dan masukan
text menggunakan text tool sesuai apa yang kamu inginkan, dan inilah hasilnya
Gambar 3. 3.1.2 Tanpilan gambar yang sudah selesai
3.3.2 Pembuatan web menggunakan Adobe Dreamweaver CS4
Langkah-langkahnya sebagai berikut ;
·
Bukalah Adobe Dreamweaver CS4 dan klik text HTML
Gambar 3.3.2.1 Tampilan awal Adobe
Dreamweaver
·
Jika sudah ada workshet kosong, lalu klik insert , table (jumlah table
sesuaikan kebutuhan )
Gambar 3.3.2.2 Tampilan saat insert table
·
Setiap gambar yang kita masukan kedalam table harus kita jadikan dalam
satu folder
·
Lalu didalam table tersebut bisa dimasukan gambar text dan lain-lain,
Gambar 3.3.2.3 Tampilan yang sudah jadi
·
Jika ingin memasukkan hyperlink juga bisa dengan menggunakan rumus yang
bisa dimasukkan di bagian code
Misal codenya “<td width="7%"
height="36" bgcolor="#FFFF00"
class="asd"><a
href="HOME.html">HOME</a></td>”
Gambar 3.3.2.4 Tampilan code hyperlink
·
Untuk menambah hyperlink yang lain kita Cuma copy paste dari hasil yang
sudah kita save di document
Gambar 3.3.2.5 Tampilan saat mengCopy
hyperlink
·
Pada hyperlink bisa kita masukkan table lagi untuk kebutuhan
selanjutnya, misal pemberitahuan gambar dan jurusan
Gambar 3.3.2.6 Tampilan saat sudah selesai
menambah table pada hyperlink
·
Begitupun seterusnya untuk hyperlink yang lain
·
Jika sudah tinggal kita save dan bentuk dari hasil save itu adalah
bergambar seperti berikut
Gambar 3.3.2.7 Tampilan setelah disimpan
·
Jika sudah kita bisa melihatnya melalui browser yang kita gunakan
misalnya mozila firefox. Dan jika kita ingin melihat hyperlink yang sudah kita
buat tadi kita cuma harus mengklik pada menu
Gambar 3.3.2.8 Tampilan saat di browser
mozila firefox
·
Tetapi web ini belum bisa diakses orang karena belum terdaftar pada
sebuah webhost
BAB
IV
PEMBAHASAN
Web ini di buat menggunakan Adobe Dreamweaver dan
Adobe photoshop agar memudahkan dalam pembuatan web ini. Dengan Photoshop
sebagai desain gambar dan Dreamweaver sebagai bagian inti dari web ini.
·
Inilah
tampilan awal dari web ini. Pada tampilan pertama ini mejelaskan tentang
biodata dari pembuat web. Didalam tampilan ini juga sudah terdapat hyperlink
yang bisa kita akses. Pada tampilan ini ada hyperlink “ HOME, PESAWAT, KAPAL,
KERETA, PEMBELIAN, ABOUT US”. Pada menu hyperlink yang lainya juga sama hanya
berbeda tampilan menu saja. Selanjutnya jika anda klik pada menu home akan ada
tampilan seperti berikut
Gambar 3.3.2.9 Tampilan menu home
·
Lalu
jika anda klik menu pesawat akan ada tampilan seperti berikut
Halaman ini menampilkan foto dan keterangan tentang
jurusan dan harga setiap transportasi.
Gambar 3.3.2.10 Tampilan menu pesawat
·
Lalu
jika anda klik menu kereta akan ada tampilan seperti berikut. Halaman ini menampilkan
foto dan keterangan tentang jurusan dan harga setiap transportasi.
Gambar 3.3.2.11 Tampilan menu kereta
·
Lalu
jika anda klik menu kapal akan ada tampilan seperti berikut
Halaman ini menampilkan foto dan keterangan tentang
jurusan dan harga setiap transportasi.
Gambar 3.3.2.12 Tampilan menu kapal
·
Lalu
jika anda klik menu pembelian akan ada tampilan seperti berikut dan anda
tinggal mengisi kolom dan klik menu beli
Halaman ini menampilkan kolom yang harus diisi untuk
melakukan pembelian.
Gambar 3.3.2.13 Tampilan menu pembelian
·
Lalu
jika anda klik menu about ust akan ada tampilan seperti berikut. Halaman ini berisi
tentang inspirasi dan motivasi pembuatan web ini
Gambar 3.3.2.14 Tampilan menu about us
BAB
V
PENUTUP
5.1
Kesimpulan
Kesimpulan dari beberapa tugas akhir ini adalah penggunaan sebuah web
yang dapat meringankan ataupun memudahkan masyarakat dalam pembelian sebuah tiket
teansportasi yang berjarak jauh.
5.2 Saran
Saran kepada pembaca, agar
membuat web selain web penjualan tiket yang dapat meringankan beban masyarakat.
Karena sering melihat web yang tidak berguna dan bahkan ada yang tidak boleh
diperlihatkan kepada anak-anak tapi dapat diakses dengan mudah olek anak-anak
yang masih kecil.
DAFTAR
PUSTAKA
[1]
Anonim
“pengertian website". Dalam https://id.wikipedia.org/wiki/Situweb diakses
tanggal 2015-12-3
[2]
Faiz
Agil Wirawan “ pengertian Adobe Dreamweaver CS4”. Dalam http://www.burung-net.com di akses tanggal 2015-12-3
[3]
Schewe, Jeff (2000). "pengertian Adobe Photoshop CS5". PhotoshopNews.
Dalam https://id.wikipedia.org/wiki/Adobe_Photoshop di akses tanggal 2015-12-3
BIODATA
PENULIS
MOHAMMAD AHLIM
IHSAN ABIDIN, lahir di Lamongan 21 Agustus 1999,
anak tunggal dari pasangan bapak Nur Hasan dan Ibu Siti Aflahah, tinggal di
dusun Sidodadi desa Kranji kecapatan Paciran kabupaten Lamongan.
Mulai tahun 2004 bersekolah di SDN
Kranji III dan lulus pada tahun 2010, lalu di lanjutkan bersekolah di Mts TARBIYATUT
THOLABAH Kranji dan lulus pada tahun 2013, dan di lanjutkan lagi bersekolah di
MA TARBIYATUT THOLABAH kranji.
Saat masih SD tidak begitu menyukai
organisasi dan saat masuk Mts mulai mengikuti keorganisasian. Di mulai saat
kelas VIII Mts ikut serta dalam OSIS dan kepramukaan. Prestasi yang di dapat
saat pramuka tidak terlalu buruk, mulai dari ikut perkemahan tinggkat kecamatan
yaitu SCOUTING SPIRIT lalu dilanjutkan lagi ikut perkemahan tinggat jawa timur
di tuban yakni PERGAMA VII dan di surabaya tepatnya di Universitas Airlangga
serta perkemahan yang lainya.
Kehidupan berorganisasi tidak
berhenti di situ saja, dan masih di lanjutkan saat berada pada jenjang MA yaitu
ikut serta lagi dalam Organisasi Siswa Intra Sekolah(OSIS), dan juga menjabat
sebagai ketua jurusan IPA yakni COSSINES(Community Of Smart Scientist Student
Class) serta beberapa organisasi lainya.
Kesukaanya dalam bidang IT sudah
ada pada saat masih kelas VII Mts, saat itu juga bekerja pada sebuah warnet dan
itu membuat kesukaanya pada IT semakin meningkat.
