LKP : Rancang Bangun Aplikasi Media Promosi Berbasis Web di Total Image Communication.

TOTAL IMAGE COMMUNICATION

KERJA PRAKTEK

Nama : MUNIR AGUNG WISUDAWANTO NIM : 09.41010.0165

Program : S1 (Strata Satu) Jurusan : Sistem Informasi

SEKOLAH TINGGI

MANAJEMEN INFORMATIKA & TEKNIK KOMPUTER SURABAYA

RANCANG BANGUN APLIKASI MEDIA PROMOSI

BERBASIS WEB DI

TOTAL IMAGE COMMUNICATION

KERJA PRAKTEK

Diajukan sebagai salah satu syarat untuk mengerjakan Tugas Akhir

Disusun oleh :

Nama : MUNIR AGUNG WISOUDAWANTO

NIM : 09.41010.0165 Program : S1 (Strata Satu) Jurusan : Sistem Informasi

SEKOLAH TINGGI

MANAJEMEN INFORMATIKA & TEKNIK KOMPUTER SURABAYA

RANCANG BANGUN APLIKASI MEDIA PROMOSI

BERBASIS WEB DI

TOTAL IMAGE COMMUNICATION

KERJA PRAKTEK

Telah diperiksa, diuji dan disetujui

Surabaya, November 2012

Disetujui :

Pembimbing Penyelia

Chayadi Oktomy N.S., S.T., M.Eng. Catur Mulyono

NIDN 0707108402

Mengetahui :

KaProdi S1 Sistem Informasi

Erwin Sutomo, S.Kom, M. Eng. NIDN 0722057501

Dalam memasarkan produknya, Total Image Communication tidak menggunakan promosi melalui televisi, radio, koran ataupun media cetak lainnya, namun hanya melalui media mulut ke mulut atau door to door saja. Hal ini membuat area pasar yang bisa dijangkau masih sangat sempit yaitu hanya di area Surabaya dan sekitarnya saja, sehingga berdampak pada jumlah customer dan pendapatan yang sedikit.

Menurut data yang diambil dari theultralinx.com pengguna aktif internet di seluruh dunia saat ini mencapai lebih dari 2,1 Milyar user, dan salah satu cara melakukan promosi di internet adalah dengan menggunakan website.

Informasi yang terdapat dalam Rancang Bangun Aplikasi Media Promosi ini adalah informasi produk, company profile, pricelist, dan pesan dari pengunjung untuk Total Image Communication.

Dengan adanya Rancang Bangun Aplikasi Media Promosi Berbasis Web diharapkan dapat membantu Total Image Communication agar dapat lebih dikenal secara luas dan terjadinya peningkatan jumlah customer dan peningkatan pendapatan.

ABSTRAK ... v

KATA PENGANTAR ... vi

DAFTAR ISI ... viii

DAFTAR TABEL ... x

DAFTAR GAMBAR ... xi

DAFTAR LAMPIRAN ... xiv

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Perumusan Masalah ... 2

1.3 Batasan Masalah ... 2

1.4 Tujuan ... 3

1.5 Kontribusi ... 3

1.6 Sistematika Penulisan ... 4

BAB II GAMBARAN UMUM TOTAL IMAGE COMMUNICATION ... 5

2.1 Profil Total Image Communication ... 5

2.2 Visi dan Misi Total Image Communication ... 5

2.3 Struktur Organisasi Total Image Communication ... 5

BAB III LANDASAN TEORI ... 7

3.1 Aplikasi Web ... 7

3.2 World Wide Web ... 8

3.3 Promosi ... ... 9

3.4 Analisis dan Perancangan Sistem ... 10

3.7 Interaksi Manusia dan Komputer ... 13

3.8 Hypertext Markup Language ... 14

3.9 Hypertext Preprocessor ... 14

3.10 Cascading Style Sheet ... 15

3.10 Javascript ... 16

3.11 MySQL ... 16

BAB IV DESKRIPSI PEKERJAAN ... 23

4.1 Membuat Prosedur Kerja ... 17

4.2 Melakukan Survey dan Mengumpulkan Data ... 18

4.3 Menganalisa Kebutuhan Sistem dan Merancang Sistem ... 18

4.4 Mendesain dan Membuat Sistem ... 18

4.5 Struktur Tabel ... 34

4.6 Site Map ... 37

4.7 Desain Input Output ... 37

4.8 Mengimplementasi Sistem ... 46

4.9 Melakukan Pembahasan terhadap Implementasi Sistem ... 47

BAB V PENUTUP ... 58

5.1 Kesimpulan ... 58

5.2 Saran ... 58

DAFTAR PUSTAKA ... 59

1.1 Latar Belakang Masalah

Total Image Communication adalah sebuah perusahaan yang bergerak di

bidang advertising (outdoor-indoor, design & printing). Dalam memasarkan produknya, Total Image Communication tidak menggunakan promosi melalui televisi, radio, koran ataupun media cetak lainnya, namun hanya promosi melalui mulut ke mulut atau door to door saja. Hal ini membuat area pasar yang bisa dijangkau masih sangat sempit yaitu hanya di area Surabaya dan sekitarnya saja, sehingga berdampak pada jumlah customer dan pendapatan yang sedikit.

Media promosi bukan hanya menjadi unsur pelengkap, akan tetapi sebagai penunjang utama kesuksesan suatu perusahaan dalam mencapai sasaran atau segmen pasar yang dituju. Menurut data yang diambil dari theultralinx.com pengguna aktif internet di seluruh dunia saat ini mencapai lebih dari 2,1 Milyar

users, dan salah satu cara melakukan promosi di internet adalah dengan

menggunakan website. Website ini akan memberikan pengaruh yang sangat besar sebagai media untuk memasarkan berbagai macam produk atau jasa baik dalam bentuk fisik maupun digital. Terbukti banyak perusahaan yang berlomba-lomba mengolah websitenya untuk kemajuan perusahaannya dan untuk mendapatkan pengunjung (customer) diseluruh lapisan masyarakat dunia.

Untuk mengatasi permasalahan tersebut maka akan dibuat suatu rancang bangun website sebagai media promosi online, yang akan membantu Total Image

dengan adanya website ini, Total Image Communication lebih dapat dikenal secara luas dan terjadinya peningkatan jumlah customer dan peningkatan pendapatan

1.2 Perumusan Masalah

Berdasarkan latar belakang di atas perlu dirumuskan suatu masalah. Perumusan masalah tersebut adalah bagaimana membuat suatu media promosi yang dapat menarik customer dengan menggunakan teknologi informasi di Total

Image Communication?

1.3 Batasan Masalah

Dalam membuat aplikasi ini diperlukan pembatasan agar tidak menyimpang dari topik yang diambil. Pembatasan aplikasi tersebut dijelaskan di bawah ini :

1. Aplikasi ini dibuat menggunakan Artisteer 2, bahasa pemrograman PHP dan

database MySQL.

2. Aplikasi ini dibuat untuk menghasilkan informasi yang menangani proses katalog produk, company profile, serta maintenance data master produk.

1.4 Tujuan

Dengan melihat perumusan masalah yang ada, dalam kerja praktek ini didapatkan tujuan yang akan dibahas. Tujuan tersebut adalah untuk membuat aplikasi media promosi berbasis web yang berisi fitur-fitur untuk katalog produk,

yang mudah dengan tujuan untuk memudahkan dan mempercepat pengguna dalam melakukan kegiatan promosi produknya dengan menggunakan aplikasi ini.

1.5 Kontribusi

Beberapa hal yang dapat diperoleh dari kegiatan kerja praktek di Total

Image Communication antara lain:

1. Mempermudah bagian promosi dalam memasarkan produk-produk Total

Image Communication kepada pelanggan atau calon pembeli.

2. Mempermudah calon pembeli dalam memperoleh informasi mengenai produk-produk yang ada di Total Image Communication.

1.6 Sistematika Penulisan

Sistematika penulisan laporan kerja praktek digunakan untuk menjelaskan penulisan laporan per bab. Sistematika penulisan kerja praktek dapat dijelaskan pada alinea di bawah ini.

Bab pertama pendahuluan menjelaskan tentang latar belakang masalah, inti dari permasalahan yang disebutkan pada perumusan masalah, pembatasan masalah yang menjelaskan tentang batasan-batasan dari sistem yang dibuat agar tidak menyimpang dari ketentuan yang ditetapkan. Tujuan dari kerja praktek adalah merancang dan membangun aplikasi program, kontribusi yang dapat diberikan dari pembuatan aplikasi, kemudian dilanjutkan dengan membuat sistematika penulisan laporan kerja praktek.

Bab kedua gambaran umum Total Image Communication yang menjelaskan tentang profil Total Image Communication dan struktur organisasi

Total Image Communication. Gambaran umum ini digunakan untuk menjelaskan

kepada pembaca tentang sejarah, visi dan misi serta alamat instansi.

Bab ketiga landasan teori menjelaskan tentang teori-teori yang berkaitan dalam penyelesaian laporan, yaitu penjelasan tentang aplikasi web, World Wide

Web (www), promosi, analisis dan perancangan sistem, Database, Database Management System, Interaksi Manusia dan Komputer, HTML, PHP, CSS, Java Script, dan MySQL. Teori-teori tersebut diperlukan untuk memecahkan masalah

di dalam aplikasi media promosi berbasis web di Total Image Communication. Bab keempat deskripsi pekerjaan menjelaskan tentang pekerjaan yang dilakukan selama kerja praktek, yaitu membuat prosedur kerja, melakukan survey dan mengumpulkan data, menganalisis kebutuhan sistemdan merancang sistem, mendesain dan membuat sistem, membuat Use Case Diagram, Activity Diagram,

Class Diagram, membuat struktur tabel, membuat Site map, membuat desain Input Output, mengimplementasikan sistem, dan melakukan pembahasan terhadap

implementasi sistem.

Bab kelima berisi kesimpulan dan saran dari aplikasi yang telah dibuat. Saran yang dimaksud adalah saran terhadap kekurangan dari aplikasi yang ada kepada pihak lain yang ingin meneruskan topik kerja praktek ini. Tujuannya adalah agar pihak lain tersebut dapat menyempurnakan aplikasi ini sehingga bisa menjadi lebih baik dan berguna.

2.1 Profil Total Image Communication

CV. Media Nusantara (Total Image Communication) berkedudukan di Jl. Karah Agung I/35 Surabaya. Total Image Communication bergerak dalam bidang

advertising (outdoor-indoor, design & printing).

Total Image Communication berdiri pada tanggal 21 desember 1998

dengan akte notaris Kosidi Wirdjoharjo, SH dengan nama CV. Total Citra Estetik (Total Image Communication).

2.2 Visi dan Misi Total Image Communication 2.2.1 Visi

- Membawa semua elemen perusahaan menuju kesejahteraan dan kemakmuran dunia dan akhirat.

- Menjadikan sebuah perusahaan yang dapat memenuhi keinginan konsumen dan mampu menjawab tantangan zaman.

2.2.2 Misi

- Karyawan harus terlibat dalam kebersamaan melalui rasa tanggung jawab, rasa memiliki dan komitmen.

- Menjalankan roda bisnis dengan cepat, tepat, efisien, kreatif dan inovatif.

2.3 Struktur Organisasi Total Image Communication

Sebagai sebuah instansi perusahaan pada umumnya Total Image

Communication dipimpin oleh seorang pemimpin yang juga sebagai pemilik

perusahaan. Posisi yang berada dibawah pemimpin/pemilik adalah Administrator,

marketing, designer, production and packing, dan delivery. Untuk lebih jelasnya

dapat melihat gambar 2.1 di bawah ini.

Owner / Leader Company

Administrator Marketing Designer Production And

Packing Delivery

BAB III LANDASAN TEORI

Dalam bab ini akan dijelaskan landasan teori yang digunakan untuk mendukung penyusunan laporan kerja praktek ini. Landasan teori yang akan dibahas meliputi permasalahan-permasalahan atau prosedur-prosedur yang berlaku saat ini serta beberapa pengertian tentang ilmu yang berkaitan dengan permasalahan.

3.1 Aplikasi Web

Pada awalnya aplikasi web dibangun dengan hanya menggunakan bahasa yang disebut HTML (HyperText Markup Language). Pada perkembangan berikutnya, sejumlah skrip dan objek dikembangkan untuk memperluas kemampuan HTML seperti PHP dan ASP pada script dan Apllet pada objek. Aplikasi Web dapat dibagi menjadi dua jenis yaitu aplikasi web statis dan dinamis.

Web statis dibentuk dengan menggunakan HTML. Kekurangan aplikasi

seperti ini terletak pada keharusan untuk memelihara program secara terus menerus untuk mengikuti setiap perkembangan yang terjadi. Kelemahan ini diatasi oleh model aplikasi web dinamis. Pada aplikasi web dinamis, perubahan informasi dalam halaman web dilakukan tanpa perubahan program tetapi melalui perubahan data. Sebagai implementasi, aplikasi web dapat dikoneksikan ke basis data sehingga perubahan. informasi dapat dilakukan oleh operator dan tidak menjadi tanggung jawab dari webmaster.

Arsitektur aplikasi web meliputi client, web server, middleware dan basis data. Client berinteraksi dengan web server. Secara internal, web server

berkomunikasi dengan middleware dan middleware yang berkomunikasi dengan basis data. Contoh middleware adalah PHP dan ASP. Pada mekanisme aplikasi

web dinamis, terjadi tambahan proses yaitu server menerjemahkan kode PHP

menjadi kode HTML. Kode PHP yang diterjemahkan oleh mesin PHP yang akan diterima oleh client.(Abdul Kadir, 2009).

3.2 World Wide Web (WWW)

World Wide Web (www) atau web merupakan sumber daya yang sangat

popular dan dapat digunakan untuk memperoleh data atau bahkan melakukan transaksi seperti memperoleh informasi bahkan melakukan perdagangan. Secara teknis, web adalah sebuah sistem dimana informasi dalam bentuk teks, gambar, video, suara dan lain-lain yang tersimpan dalam sebuat Internet Webmaster yang dipresentasikan dalam bentuk hypertext. Informasi dalam bentuk teks umumnya ditulis dalam format HTML (Hypertext Markup Language). Informasi lainnya disajikan dalam bentuk grafis dalam format GIF, JPG, PNG, suara dalam format AU, WAV dan objek multimedia lainnya seperti MIDI, Shockwave, Quicktime

Movie, 3D World.

Sebagai dokumen hypertext, dokumen-dokumen di web dapat memiliki link dengan dokumen lain, baik yang tersimpan dalam webmaster yang sama ataupun webmaster lainnya. Link memudahkan para pengakses web berpindah dari halaman satu ke halaman lainnya, dan berkelana dari satu server ke server lainnya. Kegiatan penelusuran halaman web ini biasanya diistilahkan sebagai

Web dapat diakses oleh perangkat lunak web client yang secara populer

disebut browser. Browser membaca halaman-halaman web yang tersimpan dalam

webmaster melalui protokol yang disebut HTTP (Hypertext Transfer Protocol).

Di saat perkembangan WWW ada dua browser web yang populer yaitu Internet

Explorer (IE) dan Netscape Navigator. Browser web adalah software yang

digunakan untuk menampilkan informasi dari server web. Software ini kini telah dikembangkan dengan menggunakan user interface grafis, sehingga pemakai dapat dengan mudah melakukan „point dan click’ untuk pindah antar dokumen.

Saat ini bermunculan browser web lain yang turut meramaikan persaingan untuk merebut para pengguna Internet. Di antara browser web yang telah banyak digunakan pada saat peluncurannya adalah MSN, Opera dan Mozilla

Firefox. Diantara browser web ini terdapat kelebihan dan kekurangan sehingga

pengguna dapat memilih sesuai keinginan dan kemudahan yang ditawarkan.(Dharma Oetomo Sutedjo, 2008).

3.3 Promosi

Suatu perusahaan banyak aktivitas yang dilakukan tidak hanya menghasilkan produk atau jasa, menetapkan harga, dan menjual produk atau jasa, tetapi banyak aktivitas lainnya yang saling berkaitan satu dengan lainnya. Salah satunya adalah promosi, kegiatan promosi adalah salah satu bagian dari bauran pemasaran perusahaan, yang isinya memberikan informasi kepada masyarakat atau konsumen tentang produk atau jasa yang ditawarkan perusahaan. Tidak hanya itu, kegiatan promosi merupakan kegiatan komunikasi antara perusahaan dengan pelanggan atau konsumen.

Perusahaan dewasa ini menganggap bahwa promosi merupakan bagian penting dari pemasaran, karena pihak perusahaan berharap dengan promosi yang dilaksanakan secara efektif dapat meningkatkan kualitas produk atau jasa perusahaan sesuai dengan target penjualan yang telah ditetapkan dan dapat bersaing dengan perusahaan lain yang menghasilkan produk atau jasa yang sejenis. Dengan pandangan demikian perusahaan berharap dengan dilaksanakannya kegiatan promosi secara berkesinambungan dan terarah akan mampu mencapai hasil penjualan dan keuntungan yang maksimal. Peneliti akan mengemukakan beberapa pendapat dari para ahli pemasaran dan praktisi tentang penelitian promosi, yaitu sebagai berikut :

Pengertian promosi menurut Djaslim Saladin dan Yevis Marty Oesman (2002 : 123) : “Promosi adalah suatu komunikasi informasi penjual dan pembeli yang bertujuan untuk merubah sikap dan tingkah laku pembeli, yang sebelumnya tidak mengenal menjadi mengenal sehingga menjadi pembeli dan mengingat produk tersebut”.

3.4 Analisis dan Perancangan Sistem

Menurut Kendall dan Kendall (2003:7), analisis dan perancangan sistem dipergunakan untuk menganalisis, merancang, dan mengimplementasikan peningkatan-peningkatan fungsi bisnis yang dapat dicapai melalui penggunaan sistem informasi terkomputerisasi. Analisis sistem dilakukan dengan tujuan untuk dapat mengidentifikasi dan mengevaluasi permasalahan yang terjadi dan kebutuhan yang diharapkan, sehingga dapat diusulkan perbaikannya.

Perancangan sistem merupakan penguraian suatu sistem informasi yang utuh ke dalam bagian komputerisasi yang dimaksud, mengidentifikasi dan mengevaluasi permasalahan, menentukan kriteria, menghitung konsistensi terhadap kriteria yang ada, serta mendapatkan hasil atau tujuan dari masalah tersebut serta mengimplementasikan seluruh kebutuhan operasional dalam membangun aplikasi.

3.5 Database

Menurut Marlinda (2004:1), database adalah suatu susunan/kumpulan data operasional lengkap dari suatu organisasi/perusahaan yang diorganisir/dikelola dan disimpan secara terintegrasi dengan menggunakan metode tertentu menggunakan komputer sehingga mampu menyediakan informasi optimal yang diperlukan pemakainya. Penyusunan satu database digunakan untuk mengatasi masalah-masalah pada penyusunan data yaitu redundansi dan inkonsistensi data, kesulitan pengaksesan data, isolasi data untuk standarisasi,

multiple user (banyak pemakai), masalah keamanan (security), masalah integrasi

(kesatuan), dan masalah data independence (kebebasan data).

3.6 Database Management System

Menurut Marlinda (2004:6), Database Management System (DBMS) merupakan kumpulan file yang saling berkaitan dan program untuk pengelolanya. Basis Data adalah kumpulan datanya, sedang program pengelolanya berdiri sendiri dalam suatu paket program yang komersial untuk membaca data, menghapus data, dan melaporkan data dalam basis data.

Bahasa-bahasa yang terdapat dalam DBMS adalah: 1. Data Definition Language (DDL)

Pola skema basis data dispesifikasikan dengan satu set definisi yang diekspresikan dengan satu bahasa khusus yang disebut DDL. Hasil kompilasi perintah DDL adalah satu set tabel yang disimpan di dalam file khusus yang disebut data dictionary / directory.

2. Data Manipulation Language (DML)

Bahasa yang memperbolehkan pemakai mengakses atau memanipulasi data sebagai yang diorganisasikan sebelumnya model data yang tepat. 3. Query

Pernyataan yang diajukan untuk mengambil informasi. Merupakan bagian DML yang digunakan untuk pengambilan informasi.

DBMS memiliki fungsi sebagai berikut: 1. Data Definition

DBMS harus dapat mengolah pendefinisian data. 2. Data Manipulation

DBMS harus dapat menangani permintaan-permintaan dari pemakai untuk mengakses data.

3. Data Security dan Integrity

DBMS dapat memeriksa security dan integrity data yang didefinisikan oleh DBA.

4. Data Recovery dan Concurrency

a. DBMS harus dapat menangani kegagalan-kegagalan pengaksesan basis data yang dapat disebabkan oleh kesalahan sistem, kerusakan disk, dan sebagainya.

b. DBMS harus dapat mengontrol pengaksesan data yang konkuren yaitu bila satu data diakses secara bersama-sama oleh lebih dari satu pemakai pada saat yang bersamaan.

5. Data Dictionary

DBMS harus menyediakan data dictionary.

3.7 Interaksi Manusia dan Komputer

Menurut Wicaksono (2006:4), Interaksi Manusia dan Komputer (IMK) adalah sebuah disiplin ilmu yang mempelajari desain, evaluasi, implementasi dari sistem komputer interaktif untuk dipakai oleh manusia, beserta studi tentang faktor-faktor utama dalam lingkungan interaksinya. Deskripsi lain dari IMK adalah suatu ilmu yang mempelajari perencanaan dan desain tentang cara manusia dan komputer saling bekerja sama, sehingga manusia dapat merasa puas dengan cara yang paling efektif. Dikatakan juga bahwa sebuah desain antar muka yang ideal adalah yang mampu memberikan kepuasan terhadap manusia sebagai pengguna dengan faktor kapabilitas serta keterbatasan yang terdapat dalam sistem. Pada implementasinya, IMK dipengaruhi berbagai macam faktor antara lain organisasi, lingkungan, kesehatan, pengguna, kenyamanan, antar muka, kendala dan produktifitas.

3.8 Hypertext Markup Language (HTML)

Menurut Firdaus (2007:1) Hypertext Markup Language (HTML) merupakan salah satu pemrograman web yang bersifat statis. HTML ini lebih berfungsi untuk mengatur struktur tampilan web, membuat suatu “Link” atau

sambungan ke lokasi di internet yang lain dan aplikasi agar bisa berjalan di halaman web browser yang disimpan dalam bentuk .html (bagi Sistem Operasi LINUX, UNIX, Macintosh dan Windows 95) dan .htm (bagi Windows 3.1).

Bagaimana cara HTML bekerja? Untuk mengetahuinya, harus terlebih dahulu mengetahui tentang ada yang disebut HTTP. HTTP merupakan protokol yang digunakan untuk mentransfer data atau dokumen antara web server ke web

browser. Selanjutnya sewaktu protokol tersebut melakukan transfer dokumen,

data webnya ditulis atau menggunakan format HTML. HTML disebut juga dengan markup language karena HTML berfungsi untuk memperindah file tulisan

(text) biasa untuk dapat dilihat pada web browser yang ada.

3.9 Hypertext Preprocessor (PHP)

Menurut Firdaus (2007:2) PHP merupakan singkatan dari Hypertext

Preprocessor, adalah sebuah bahasa scripting berbasis server side scripting yang

terpasang pada HTML dan berada di server dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis. Sebagian besar sintaksnya mirip dengan bahasa C atau java, ditambah dengan beberapa fungsi PHP yang spesifik. Tujuan utama bahasa ini adalah untuk memungkinkan perancang web menulis halaman web dinamik dengan cepat.

Halaman web biasanya disusun dari kode-kode HTML yang disimpan dalam sebuah file berekstensi .html. File HTML ini dikirimkan oleh server (atau

file) ke browser, kemudian browser menerjemahkan kode-kode tersebut sehingga

menghasilkan suatu tampilan yang indah. Lain halnya dengan program PHP, program ini harus diterjemahkan oleh web server sehingga menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. Program ini dapat berdiri sendiri ataupun disisipkan di antara kode-kode HTML sehingga dapat langsung ditampilkan bersama dengan kode-kode HTML tersebut. Program php dapat ditambahkan dengan mengapit program tersebut di antara tanda <? dan ?>. Tanda-tanda tersebut biasanya digunakan untuk memisahkan kode php dari kode HTML. File HTML yang telah dibubuhi program php harus diganti ekstensi-nya menjadi .php atau .php3.

3.10 Cascading Style Sheet (CSS)

CSS merupakan kependekan Cascading Style Sheet yang berfungsi untuk mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut standar HTML. CSS sebenarnya adalah suatu kumpulan atribut untuk fungsi format tampilan dan dapat digunakan untuk mengontrol tampilan banyak dokumen secara bersamaan. Keuntungan menggunakan CSS yaitu jika ingin mengubah dokumen, maka tidak perlu mengubah satu persatu.

Penggunaan CSS ada dua cara yaitu dengan menyispkan kode CSS langsung dalam kode HTML atau simpan menjadi file tersendiri berekstensi *.css. Dengan meyimpan sebagai file tersendiri akan memudahkan untuk mengontrol tampilan dalam banyak dokumen secara langsung. CSS mendapat dukungan penuh pada browser versi 4 dan pada versi sebelumnya, hanya Internet Explorer

yang masih mampu mengenal CSS. Tampilan CSS dapat berbeda jika ditampilkan pada menu browser yang berbeda.(Diar Puji Oktavian, 2010).

3.11 Java Script

Menurut Hakim (2010:2) Java Script merupakan bahasa scripting yang dapat bekerja di sebagian besar web browser. Java Script dapat disisipkan didalam web menggunakan tag script.

Java script dapat digunakan untuk banyak tujuan, misalnya untuk membuat efek roolover baik gambar maupun text, dan untuk membuat AJAX Java

script adalah bahasa yang digunakan untuk AJAX. Kode Java script juga dapat

diletakkan di file tersendiri yang berekstensi .js (singkatan dari java script). Script tersebut akan dieksekusi ketika dipanggil berdasarkan trigger pada event tertentu.

3.12 MySQL

”MySQL adalah database yang menghubungkan script PHP

menggunakan perintah query dan escape character yang sama dengan PHP. PHP memang mendukung banyak database, tetapi untuk membuat sebuah web yang dinamis selalu Up to Date, MySQL merupakan pilihan database tercepat saat ini. (Firdaus, 2007:3)”.

”MySQL (My Structured Query Language) atau yang bisa di baca

mai-sekuel adalah program pembuat dan pengelola database. Selain itu data Mysql juga merupakan program pengakses database yang bersifat jaringan, sehingga dapat digunakan untuk Aplikasi Multi User (banyak pengguna). Kelebihan dari MySQL adalah menggunakan bahasa query (permintaan) standar SQL (Structured

BAB IV

DESKRIPSI PEKERJAAN

4.1 Membuat Prosedur Kerja

Berdasarkan hasil survey yang dilakukan pada saat kerja praktek di Total

Image Communication, secara garis besar permasalahan yang ada dalam

perusahaan ini adalah proses pemasaran yang masih dilakukan dengan cara manual dan tradisional yaitu dengan strategi pemasaran jemput bola (strategi dimana para penyedia jasa maupun penjual produk melakukan kegiatan pemasaran dengan cara menghubungi atau mendatangi langsung calon pelanggannya) dan dengan strategi door to door (promosi dari rumah ke rumah) ataupun dari mulut ke mulut.

Dalam kerja praktek selama 180 jam ini, berusaha menemukan permasalahan yang ada dan mempelajari serta mengatasi masalah tersebut. Permasalahan pada Total Image Communication yaitu mengenai proses pemasaran yang masih dilakukan dengan cara manual dan tradisional.

Untuk mengatasi masalah yang ada di atas maka diperlukan langkah-langkah pembagian kerja sebagai berikut:

a. Minggu 1, melakukan survey dan mengumpulkan data.

b. Minggu 2, menganalisa kebutuhan sistem dan merancang sistem. c. Minggu 3, mendesain sistem dan membuat sistem.

Pada langkah-langkah tersebut di atas ditunjukkan untuk dapat menemukan solusi dari permasalahan yang ada pada untuk lebih jelasnya, dapat dijelaskan pada sub bab di bawah ini.

4.2 Melakukan Survey dan Mengumpulkan Data

Survey dan pengumpulan data merupakan langkah awal dalam membuat

suatu sistem yang baru, yaitu dengan melakukan wawancara secara langsung. Wawancara ini dilakukan dengan pemilik perusahaan sendiri (Bapak Catur M.). Pemilik memberikan informasi tentang mekanisme yang diperlukan dalam pembuatan aplikasi media promosi untuk Total Image Communication.

4.3 Menganalisa Kebutuhan Sistem dan Merancang Sistem

Dari hasil wawancara diatas, maka dapat diketahui sistem apa yang dibutuhkan oleh Total Image Communication untuk mengatasi permasalahan yang ada. Analisa kebutuhan sistem diambil berdasarkan data yang diperoleh pada saat

survey di Total Image Communication.

4.4 Mendesain dan Membuat Sistem

Dalam mendesain dan membuat sistem informasi ini menggunakan permodelan sistem antara lain Use Case Diagram, Activity Diagram, dan Class

Tahapan yang dilakukan dalam mendesain dan membuat sistem informasi berbasis object-oriented adalah sebagai berikut:

1. Membuat Use Case Diagram sistem informasi yang menggambarkan hubungan antar aktor dengan sistem.

2. Membuat Activity Diagram yang menggambarkan logika prosedural, proses bisnis, dan jalur kerja dari Use Case Diagram yang telah ditampilkan sebelumnya.

3. Membuat Class Diagram yang menggambarkan hubungan object-object yang digunakan dalam sistem ini.

4.4.1 Membuat Use Case Diagram

Pada gambar Use Case Diagram sistem informasi berbasis web ini dijelaskan proses-proses yang terjadi di dalam sistem yang dibuat :

uc Use Case Diagram Berbasis Web

Admin Pengunj ung Maintenance Produk

View Produk

Maintenance Company Profile

View Company Profile

View Hubungi Maintenance Hubungi

Search Produk

Maintenance Banner

View Banner

Maintenance Pricelist _{View Pricelist}

Dari gambar Use Case Diagram diatas terdapat 2 aktor yang terlibat di dalam sistem. Kedua aktor tersebut berperan sebagai admin dan pengunjung. Pengunjung bertindak sebagai orang yang melakukan aktifitas seperti melihat produk, company profile, banner, pricelist serta mencari produk dan dapat juga menghubungi pihak Total Image Communication apabila diperlukan. Admin adalah pihak yang bertanggung jawab atas maintenance data dan informasi pada sistem. Pada gambar Use Case Diagram terdapat 11 Use Case yaitu :

1. View Produk

Use Case untuk menampilkan produk-produk yang ada di Total Image Communication.

2. Search Produk

Use Case untuk mencari produk Total Image Communication yang ingin

dilihat oleh pengunjung. 3. View Company Profile

Use Case untuk menampilkan halaman company profile dari Total Image Communication.

4. View Hubungi

Use Case untuk menampilkan halaman form pengisian hubungi/contact us.

5. View Banner

Use Case untuk menampilkan banner link dari rekan bisnis Total Image Communication.

6. View Pricelist

Use Case untuk menampilkan pricelist Total Image Communication yang

7. Maintenance Pricelist

Use Case untuk melakukan update pricelist yang berkaitan dengan Total Image Communication.

8. Maintenance Banner

Use Case untuk melakukan update banner yang berkaitan dengan Total Image Communication.

9. Maintenance Hubungi

Use Case untuk melakukan update kritik, saran, komentar yang berkaitan

dengan Total Image Communication.

10.Maintenance Company Profile

Use Case untuk melakukan update company profile yang berkaitan dengan Total Image Communication.

11.Maintenance Produk

Use Case untuk melakukan update produk yang ada di Total Image Communication.

4.4.2 Membuat Activity Diagram View Produk

Activity Diagram view produk berawal saat pengunjung membuka

halaman muka web Total Image Communication dan pengunjung akan langsung diarahkan pada halaman yang akan menampilkan gambar-gambar produk dari

Total Image Communication. Jika berminat pengunjung dapat juga melihat detail

produk dengan melakukan klik selengkapnya / tombol beli. kemudian sistem akan menampilkan data selengkapnya dari produk yang telah di pilih tadi.

act View Produk

Sistem Pengunj ung

Mul ai

Mengakses Halaman Muka Total Image

Communication

Menampilkan List Photo Produk

Sel esai

Melihat Detil Produk yang Dipilih

Menampilkan Detil Produk yang Dipilih

Gambar 4.2 Activity Diagram View Produk

4.4.3 Membuat Activity Diagram Search Produk

Activity Diagram search produk berawal ketika pengunjung mencari

produk dengan mengetikkan nama produk pada kolom pencarian yang ada pada

sidebar halaman sebelah kiri. Setelah itu sistem akan mencari data produk yang

dicari tadi dalam database dan sistem juga akan menampilkan hasil pencariannya. act Search Produk

Sistem Pengunj ung

Mul ai

Sel esai

Mengisi Textbox Pencarian

Menampilkan Hasil Pencarian Produk Mengecek Kesamaan Data

Produk Dengan Keyw ord Pencarian

4.4.4 Membuat Activity Diagram View Company Profile

Activity Diagram view company profile berawal ketika pengunjung ingin

melihat profil perusahaan. Pengunjung dapat melihatnya melalui menu profil perusahaan dan sistem akan menampilkan company profile dari Total Image

Communication beserta peta lokasi yang terhubung dengan google map. act View Company Profile

Sistem Pengunj ung

Mulai

Selesai

Memilih Menu Company Profile

Menampilkan Data Company Profile

Gambar 4.4 Activity Diagram View Company Profile

4.4.5 Membuat Activity Diagram View Hubungi

Activity Diagram view hubungi berawal ketika pengunjung memilih

menu hubungi dan sistem akan menampilkan form hubungi. Jika pengunjung ingin memberikan saran, kritik, dsb pada Total Image Communication, pengunjung dapat mengisi form hubungi dan kemudian sistem akan menyimpan data tersebut dalam database.

act View Hubungi

Sistem Pengunj ung

Mul ai

Memilih Menu Hubungi Kami

Menampilkan Form Hubungi Kami

Mengisi Hubungi Kami

Menyimpan Data Hubungi Kami

Sel esai

Gambar 4.5 Activity Diagram View Hubungi

4.4.6 Membuat Activity Diagram View Banner

Activity Diagram view banner berawal ketika pengunjung mengakses

web Total Image Communication, banner akan dapat dilihat pada sidebar sebelah kiri halaman. Jika ingin mengunjungi link pada banner, pengunjung dapat melakukan klik banner dan kemudian pengunjung akan di redirect ke link banner yang dipilih.

act View Banner

Sistem Pengunj ung

Mul ai

Sel esai

Memilih Banner Mengarahkan Halaman ke Link Banner yang Dipilih Membuka Halaman Muka

Total Image Communication

4.4.7 Membuat Activity Diagram View Pricelist

Activity Diagram view pricelist berawal ketika pengunjung memilih

menu pricelist dan kemudian sistem akan menampilkan list pricelist yang dapat di

download oleh pengunjung. Jika ingin melakukan download, pengunjung hanya

tinggal melakukan klik pricelist yang dia inginkan dan proses download akan segera dimulai.

act View Pricelist

Sistem Pengunj ung

Mulai

Selesai

Memilih Menu Dow nload Menampilkan Halaman Dow nload

Memilih Price List yang Akan Didow nload

Memberikan File untuk Didow nload

Gambar 4.7 Activity Diagram View Pricelist

4.4.8 Membuat Activity Diagram Maintenance Pricelist

Activity Diagram maintenance pricelist berawal ketika admin mengakses

halaman adminweb dan melakukan verifikasi login. Setelah sukses login, admin memilih menu pricelist dan kemudian sistem akan menampilkan daftar seluruh

insert, update, delete pricelist. Kemudian admin dapat melakukan perubahan pada pricelist dan sistem akan menyimpan perubahan tersebut dalam database.

act Maintenance Pricelist

Sistem Admin

Mulai

Selesai Mengakses Halaman

Admin Menampilkan Form Login

Melakukan Login _{Mengecek Data Login}

Verifikasi Login

Menampilkan Halaman Admin Memilih Menu Pricelist

Menampilkan Halaman Pricelist Melakukan Perubahan

Pricelist

Menyimpan Perubahan Pricelist

[Berhasil] [Gagal]

Gambar 4.8 Activity Diagram Maintenace Pricelist

4.4.9 Membuat Activity Diagram Maintenance Banner

Activity Diagram maintenance banner berawal ketika admin mengakses

halaman adminweb dan melakukan verifikasi login. Setelah sukses login, admin memilih menu banner dan kemudian sistem akan menampilkan halaman banner. Didalam halaman banner terdapat menu untuk insert, update, delete banner.

Disini admin dapat melakukan perubahan pada banner dan kemudian sistem akan menyimpan perubahan tersebut dalam database.

act Maintenance Banner

Sistem Admin

Mulai

Selesai Mengakses Halaman

Admin

Menampilkan Halaman Login Admin

Mengisi Form Login Mengecek Data Login

Verifikasi Login

Menampilkan Halaman Admin Memilih Menu

Maintenance Banner

Melakukan Perubahan Pada Banner

Menyimpan Data Perubahan Banner Menampilkan Halaman

Banner [Gagal]

[Berhasil]

Gambar 4.9 Activity Diagram Maintenance Banner

4.4.10 Membuat Activity Diagram Maintenance Hubungi

Activity Diagram maintenance hubungi berawal ketika admin mengakses

halaman adminweb dan melakukan verifikasi login. Setelah sukses login, admin memilih menu hubungi dan kemudian sistem akan menampilkan halaman hubungi. Didalam halaman hubungi terdapat menu untuk view, replay, delete

message. Disini admin dapat membalas pesan dari para pengunjung yang telah

mengisi form hubungi. Pesan balasan tersebut akan langsung dikirim langsung ke email pengunjung.

act Maintenance Hubungi

Sistem Admin

Mulai

Selesai Mengakses Halaman

Admin

Menampilkan Form Login Admin

Melakukan Login Mengecek Data Login

Verifikasi Login

Menampilkan Halaman Admin Memilih Menu

Maintenance Hubungi

Menampilkan Halaman Hubungi

Membalas Pesan Dari

Pengunj ung Mengirim Pesan Ke Email Pengunj ung

[Berhasil] [Gagal]

Gambar 4.10 Activity Diagram Maintenance Hubungi

4.4.11 Membuat Activity Diagram Maintenance Company Profile

Activity Diagram maintenance company profile berawal ketika admin

menampilkan halaman company profile. Didalam halaman company profile ini terdapat menu untuk mengganti foto perusahaan dan update uraian kata-kata

company profile. Disini admin dapat melakukan perubahan lokasi google map

pada company profile dan kemudian sistem akan menyimpan perubahan tersebut dalam database.

act Maintenance Company Profile

Sistem Admin

Mulai

Selesai

Mengakses Halaman Admin

Menampilkan Halaman Login Admin

Mengisi Form Login

Mengecek Data Login

Verifikasi Login

Menampilkan Halaman Admin Memilih Menu Company

Profile

Menampilkan Halaman Company Profile

Melakukan Perubahan Pada Company Profile

Menyimpan Perubahan Company Profile

[Berhasil] [Gagal]

4.4.12 Membuat Activity Diagram Maintenance Produk

Activity Diagram maintenance produk berawal ketika admin mengakses

halaman adminweb dan melakukan verifikasi login. Setelah sukses login, admin memilih menu produk dan kemudian sistem akan menampilkan halaman produk Didalam halaman produk terdapat menu untuk insert, update, delete produk. Disini admin dapat melakukan perubahan pada produk dan kemudian sistem akan menyimpan perubahan tersebut dalam database.

act Maintenance Produk

Sistem Admin

Mulai

Memilih Menu Maintenance Produk

Menampilkan Halaman Produk

Melakukan Perubahan

Pada Produk Menyimpan Data

Perubahan Produk

Selesai Mengakses Halaman Admin

Menampilkan Form Login Admin

Melakukan Login _{Mengecek Data Login}

Verifikasi Login

Menampilkan Halaman Admin

[Berhasil] [Gagal]

4.4.13 Membuat Class Diagram Login(Admin)

Class diagram login menggambarkan class login verificator yang

digunakan untuk melakukan verifikasi atau memeriksa input dari user pada saat melakukan login.

class Login

Login

+ Cek Data Logi n() + Search Status()

Gambar 4.13 Class Diagram Login

4.4.14 Membuat Class Diagram Banner

Class diagram banner digunakan untuk menggambarkan desain statis

dari sistem yang sedang dibangun. Berikut ini terdapat beberapa Class diagram yang digunakan untuk menyusun sistem informasi berbasis web.

Class diagram banner menggambarkan beberapa Class yang terdapat

dalam satu package banner. class Class Model

Banner

Maintenance Banner + delete_banner() + get_banner() + insert_banner() + save_banner() + update_banner()

Banner

+ gambar: varchar + id_banner: int + judul: varchar + tgl_posting: date + url: varchar

+ delete_banner() + get_banner() + insert_banner() + save_banner() + update_banner()

4.4.15 Membuat Class Diagram Produk

Class diagram produk digunakan untuk menggambarkan desain statis

dari sistem yang sedang dibangun. Berikut ini terdapat beberapa Class diagram yang digunakan untuk menyusun sistem informasi berbasis web.

Class diagram produk menggambarkan beberapa Class yang terdapat

dalam satu package produk.

class Class Model

Produk

Maintenace Produk

+ delete_produk() + get_produk() + insert_produk() + save_produk() + update_produk()

Produk + deskripsi: varchar + gamber: varchar + harga: int + id_produk: int + min_pesan: int + nama_produk: varchar

+ delete_produk() + get_produk() + insert_produk() + save_produk() + update_produk()

Gambar 4.15 Class Diagram Produk

4.4.16 Membuat Class Diagram Pricelist

Class diagram pricelist digunakan untuk menggambarkan desain statis

dari sistem yang sedang dibangun. Berikut ini terdapat beberapa Class diagram yang digunakan untuk menyusun sistem informasi berbasis web.

Class diagram pricelist menggambarkan beberapa Class yang terdapat

class Class Model

Pricelist

Maintenance Pricelist

+ delete_pricelist() + get_pricelist() + insert_pricelist() + save_pricelist() + update_pricelist()

Dow nload + hits: int + id_download: int + judul: varchar + nama_file: varchar + tgl_posting: date

+ delete_pricelist() + get_pricelist() + insert_pricelist() + save_pricelist() + update_pricelist()

Gambar 4.16 Class Diagram Pricelist

4.4.17 Membuat Class Diagram Hubungi

Class diagram hubungi digunakan untuk menggambarkan desain statis

dari sistem yang sedang dibangun. Berikut ini terdapat beberapa Class diagram yang digunakan untuk menyusun sistem informasi berbasis web.

Class diagram hubungi menggambarkan beberapa Class yang terdapat

dalam satu package hubungi.

class Class Model

Hubungi

Maintenance Hubungi

+ delete_hubungi() + get_hubungi() + replay_hubungi()

Hubungi + email: varchar + id_hubungi: int + nama: varchar + pesan: varchar + subjek: varchar + tanggal: date

+ delete_hubungi() + get_hubungi() + replay_hubungi()

4.5 Struktur Tabel

Rancangan tabel yang digunakan berdasarkan class diagram yang telah dibuat adalah sebagai berikut:

1. Tabel Admin

Primary Key : USERNAME Foreign Key : -

Fungsi : Untuk menyimpan data admin dan login admin. Tabel 4.1 Struktur Tabel Admin

Field TypeData Length Constraint

USERNAME Varchar 50 Primary Key

PASSWORD Varchar 50

NAMA_LENGKAP Varchar 100

EMAIL Varchar 100

TLP_ADMIN Varchar 20

LEVEL Varchar 20

BLOKIR Bolean

2. Tabel Pricelist

Primary Key : ID_DOWNLOAD Foreign Key : -

Fungsi : Menyimpan file price list untuk di download Tabel 4.2 Struktur Tabel Pricelist

Field Type Data Length Constraint

ID_DOWNLOAD Integer Primary Key

JUDUL Varchar 100

NAMA_FILE Varchar 100

TGL_POSTING Date

3.Tabel Banner

Primary Key : ID_BANNER Foreign Key : -

Fungsi : Menyimpan data banner

Tabel 4.3 Struktur Tabel Banner

Field Type Data Length Constraint

ID_BANNER Integer Primary Key

JUDUL Varchar 100

URL Varchar 100

TGL_POSTING Date

GAMBAR Varchar 100

4.Tabel Hubungi

Primary Key : ID_HUBUNGI Foreign Key : -

Fungsi : Menyimpan data kritik & saran dari pengunjung

website

Tabel 4.4 Struktur Tabel Hubungi

Field Type Data Length Constraint

ID_HUBUNGI Integer Primary Key

NAMA Varchar 50

EMAIL Varchar 100

SUBJEK Varchar 100

PESAN Text 200

5. Tabel Vendor

Primary Key : ID_VENDOR Foreign Key : -

Fungsi : Menyimpan data vendor

Tabel 4.5 Struktur Tabel Vendor

Field Type Data Length Constraint

ID_VENDOR Integer Primary Key

NAMA_VENDOR Varchar 50

ALAMAT_VENDOR Varchar 50

TLP_ VENDOR Varchar 13

6.Tabel Kategori

Primary Key : ID_KATEGORI Foreign Key : -

Fungsi : Menyimpan data kategori produk

Tabel 4.6 Struktur Tabel Kategori

Field Type Data Length Constraint

ID_ KATEGORI Integer Primary Key

NAMA_ KATEGORI Varchar 100

7.Tabel Produk

Primary Key : ID_PRODUK

Foreign Key : ID_KATEGORI reference dari Tabel Kategori, ID_VENDOR reference dari Tabel Vendor,

Tabel 4.7 Struktur Tabel Produk

Field Type Data Length Constraint

ID_PRODUK Integer Primary Key

ID_KATEGORI Integer Foreign Key

ID_VENDOR Integer Foreign Key

NAMA_PRODUK Varchar 100

DESKRIPSI Text 200

HARGA Integer

MIN_PESAN Integer

TGL_PRODUK Date

GAMBAR Varchar 100

4.6 Site Map

Produk

Home _{Profil Produk Cara Pembelian Download Pricelist Hubungi Kami Admin Web}

Login Maintenance Produk Maintenance Vendor Maintenance Kategori Maintenance Banner Maintenance Profil Maintenance Hubungi Maintenance Pricelist

Gambar 4.18 Site Map

4.7 Desain Input Output

Desain input output digunakan untuk memberikan gambaran terhadap desain halaman aplikasi berbasis web yang akan dibangun. Berikut ini desain

input output dari Rancang Bangun Aplikasi Media Promosi Berbasis Web di Total Image Communication.

a. Halaman Utama User

Halaman ini akan tampil ketika pengunjung memngakses

website Total Image Communication. Pada halaman ini hanya

menampilkan produk-produk Total Image Communication yang ada di promosikan.

Header

Info Tentang Total Image Communication

Konten / Isi

Footer Chat Yahoo Messanger

Contoh Produk (Flash)

Banner Pencarian Produk

Home Profil Produk Cara Pembelian Download Price List Hubungi Kami

Cari

Gambar 4.19 Halaman Utama User

b. Halaman Company Profile

Halaman ini akan menampilkan foto perusahaan, deskripsi perusahaan, dan letak lokasi perusahaan yang terhubung dengan google

Header

Info Tentang Total Image Communication

Footer Chat Yahoo Messanger

Contoh Produk (Flash)

Banner Pencarian Produk

Home Profil Produk Cara Pembelian Download Price List Hubungi Kami

Cari

Company Profile

Gambar 4.20 Halaman Company Profile

c. Halaman Download Pricelist

Halaman ini akan menampilkan daftar / list dari Pricelist yang telah di upload oleh admin. Disini pengunjung dapat melakukan

download file pricelist.

Header

Info Tentang Total Image Communication

Footer Chat Yahoo Messanger

Contoh Produk (Flash)

Banner Pencarian Produk

Home Profil Produk Cara Pembelian Download Price List Hubungi Kami

Cari

Pricelist

d. Halaman Hubungi

Halaman ini akan menampilkan form untuk pertanyaan, keluhan, kritik, dan saran dari para pengunjung yang ditujukan pada Total Image

Communication.

Header

Info Tentang Total Image Communication

Footer Chat Yahoo Messanger

Contoh Produk (Flash)

Banner Pencarian Produk

Home Profil Produk Cara Pembelian Download Price List Hubungi Kami

Cari

Hubungi

Gambar 4.22 Halaman Download Pricelist

e. Halaman Login Admin

Halaman ini adalah tampilan awal dari aplikasi saat

administrator akan mengelola website. Pada halaman ini administrator

memasukkan username dan password kemudian menekan tombol login. Apabila username dan password tersebut sudah benar maka

administrator dapat mengelola website dari halaman admin dengan

Header

Sidebar Menu

Footer

Login

USER NAME : PASSWORD :

Login

Gambar 4.23 Halaman Login

f. Halaman Utama Admin

Halaman ini akan tampil ketika petugas yang memiliki hak

akses sebagai ”admin” berhasil masuk ke aplikasi. Halaman ini akan menampilkan halaman menu maintenance data master pada aplikasi.

Header

Maintenence Vendor

Konten / Isi

Footer Maintenence Kategori

Maintenence Banner

Logout Maintenence Kritik & Saran

Maintenence Banner Ganti Password

Maintenance Produk

g. Halaman Insert Banner

Halaman ini berguna untuk memasukkan atau menambah

banner baru pada website.

Header

Sidebar Menu

Footer Tambah Banner

Nama Banner URL

Gambar Choose File

: : :

Simpan Batal

Gambar 4.25 Halaman Insert Banner

h. Halaman Insert Pricelist

Halaman ini berguna bagi admin untuk menambah file pricelist yang ada pada database.

Header

Sidebar Menu

Footer Judul

Choose File

File :

:

Simpan Batal Tambah Download(Pricelist)

i. Halaman Insert Produk

Halaman ini digunakan oleh admin untuk menyimpan data produk baru yang nantinya akan ditampilkan pada website Total Image

Communication. Header Sidebar Menu Footer Nama Tambah Produk Kategori Simpan Batal Harga Vendor V

|

Deskripsi Min. Pesan Rp.

Gambar Choose File

V

|

: : : : : : :

Gambar 4.27 Halaman Insert Produk

j. Halaman Maintenance Company Profile

Halaman Maintenance Company Profile ini digunakan untuk merubah foto perusahaan dan deskripsi-deskripsi singkat maupun sejarah dari Total Image Communication.

Profil

Foto Perusahaan

Choose File

Deskripsi Perusahaan

Update

Header

Sidebar Menu

Footer

Gambar 4.28 Halaman Maintenance Company Profile

k. Halaman Maintenance Produk

Halaman Maintenance Produk ini digunakan untuk merubah data produk Total Image Communication yang telah ada didalam

Header Sidebar Menu Footer Nama Edit Produk Kategori Simpan Batal Harga Vendor V

|

Deskripsi Min. Pesan Rp.

Gambar Choose File

V

|

: : : : : : :

Gambar 4.29 Halaman Maintenance Produk

l. Halaman Maintenance Pricelist

Halaman ini berguna bagi admin untuk merubah file pricelist yang ada pada database.

Header Sidebar Menu Footer Judul Choose File File : : Simpan Batal Edit Download(Pricelist)

Ganti File :

Nama File

m.Halaman Maintenance Banner

Halaman ini berguna untuk merubah banner yang telah ada pada

website sebelumnya.

Gambar 4.31 Halaman Maintenance Banner

4.8 Mengimplementasi Sistem

Sistem yang dipergunakan untuk dapat menjalankan program Rancang Bangun Aplikasi Media Promosi Berbasis Web di Total Image Communication sebagai berikut.

a. Software Pendukung

1. Sistem Operasi Microsoft Windows XP Service Pack 2

2. Web Browser (Google Chrome)

b. Hardware Pendukung

1. Microprocessor Pentium IV atau lebih tinggi.

2. VGA dengan resolusi 1024 x 760 atau lebih tinggi dan mendukung

Microsoft Windows.

Header

Sidebar Menu

Footer

Edit Banner

Nama Banner URL

Gambar

Choose File :

: :

Simpan Batal :

Gambar Banner

4.9 Melakukan Pembahasan terhadap Implementasi Sistem

Implementasi dimaksudkan untuk menggambarkan jalannya sistem yang sudah dibuat, dalam hal ini akan dijelaskan fungsi dari halaman tersebut. Pada gambar di bawah ini adalah tampilan user interface dari sistem:

1. Halaman Utama Pengunjung

Ketika seorang pengunjung website mengakses halaman utama Total

Image Communication maka pengunjung akan dihadapkan pada halaman produk.

Pada halaman ini pengunjung juga dapat melihat detail dari pdoruk dengan melakukan klik pada gambar produk atau judul produk atau bisa juga dengan klik pada tombol beli.

2. Halaman Company Profile

Ketika seorang pengunjung memilih menu profil pada website Total

Image Communication maka pengunjung akan diarahkan pada halaman Company Profile. Pada halaman ini pengunjung juga dapat melihat foto, deskripsi, peta

lokasi Total Image Communication.

Gambar 4.33 Halaman View Company Profile

3. Halaman Download Pricelist

Ketika seorang pengunjung memilih menu download pricelist pada

website Total Image Communication maka pengunjung akan diarahkan pada

halaman download pricelist. Pada halaman ini pengunjung juga dapat melakukan

Gambar 4.34 Halaman Download Pricelist

4. Halaman Hubungi Kami

Ketika seorang pengunjung memilih menu hubungi kami pada website

Total Image Communication maka pengunjung akan diarahkan pada halaman

hubungi kami Pada halaman ini pengunjung dapat mengisi kritik, saran, usulan produk untuk Total Image Communication.

5. Halaman Login

Pada saat petugas atau admin mengakses URL adminweb maka admin akan diarahkan menuju halaman login terlebih dahulu. Halaman login ini berisi

form yang harus diisi oleh petugas dengan username dan password untuk

memasuki halaman utama pada aplikasi. Ketika tombol login diklik maka akan dilakukan pengecekan username dan password dari petugas pada database.

Gambar 4.36 Halaman Login

Apabila proses login sudah benar dan sukses maka petugas akan memasuki halaman utama admin.

6. Halaman Utama Admin

Pada halaman ini, admin akan diberikan beberapa menu maintenance untuk mengelola website Total Image Communication. Menu-menu tersebut akan disediakan pada sidebar sebelah kiri halaman admin seperti pada gambar dibawah ini.

Gambar 4.37 Halaman Utama Admin

7. Halaman Maintenance Produk

Pada halaman ini, admin mengelola produk yang akan di promosikan pada halaman user nantinya. Pada menu ini terdapat 3 halaman yaitu view produk,

insert produk, dan edit produk. view produk digunakan untuk melihat produk yang

sudah ada dalam database seperti gambar dibawah ini.

Insert produk digunakan untuk memasukkan produk baru kedalam database seperti gambar dibawah ini.

Gambar 4.39 Halaman Insert Produk

Edit produk digunakan untuk merubah data produk yang telah ada dalam database seperti gambar dibawah ini.

8. Halaman Maintenance Banner

Pada halaman ini, admin mengelola banner yang akan di tampilkan pada halaman user nantinya. Pada menu ini terdapat 3 halaman yaitu view banner,

insert banner, dan edit banner. view banner digunakan untuk melihat banner yang

sudah ada dalam database seperti gambar dibawah ini.

Gambar 4.41 Halaman View Banner

Insert banner digunakan untuk memasukkan banner baru kedalam database seperti gambar dibawah ini.

Edit banner digunakan untuk merubah data banner yang telah ada dalam database seperti gambar dibawah ini.

Gambar 4.43 Halaman Edit Banner

9. Halaman Maintenance Pricelist

Pada halaman ini, admin mengelola pricelist yang akan di tampilkan pada halaman user nantinya. Pada menu ini terdapat 3 halaman yaitu view

pricelist, insert pricelist dan edit pricelist. view pricelist digunakan untuk melihat pricelist yang sudah ada dalam database seperti gambar dibawah ini.

Gambar 4.44 Halaman View Pricelist

Insert pricelist digunakan untuk memasukkan pricelist baru kedalam database seperti gambar dibawah ini.

Edit pricelist digunakan untuk merubah data pricelist yang telah ada

dalam database seperti gambar dibawah ini.

Gambar 4.46 Halaman Edit Pricelist

10.Halaman Maintenance Hubungi

Pada halaman ini, admin mengelola hubungi yang nantinya akan menjawab pertanyaan, keluhan, dan saran yang ditujukan pada Total Image

Communication. Pada menu ini terdapat 3 halaman yaitu view hubungi dan replay e-mail. View hubungi digunakan untuk melihat pesan dari pengunjung yang sudah

Gambar 4.47 Halaman View Hubungi

Replay e-mail digunakan untuk membalas pesan dari pengunjung yang

akan dikirim langsung ke alamat e-mail mereka, seperti gambar dibawah ini.

BAB V PENUTUP

5.1 Kesimpulan

Dari hasil uji coba dan implementasi terhadap rancang bangun aplikasi media promosi berbasis web di Total Image Communication ini, maka dapat ditarik kesimpulan bahwa aplikasi yang dibuat pada saat kerja praktek ini dapat mempermudah dan membantu Total

Image Communication dalam melakukan kegiatan promosi secara online dan mengenalkan

produknya kepada masyarakat luas.

5.2 Saran

Dari aplikasi yang dibuat pada saat pelaksanaan kerja praktek ini masih terdapat beberapa kekurangan yang diharapkan di kemudian hari dapat diperbaiki oleh pihak lain. Beberapa kekurangan tersebut antara lain:

1. Aplikasi ini hanya bisa diakses melalui komputer saja. Untuk kedepannya mungkin dapat dikembangkan lagi menjadi mobile web aplication sehingga dapat diakses melalui smart

phone agar pengunjung dapat lebih mudah mengaksesnya

2. Aplikasi ini hanya menerapkan keamanan sql anti injection pada halaman login. Untuk kedepannya mungkin masalah keamanan dapat di tambah lagi misal dengan menggunakan enkripsi pada link website dan lain sebagainya

3. Sistem dapat dikembangkan menjadi lebih kompleks lagi dengan menggabungkan beberapa sistem yang telah ada (integrated System), misalnya dengan menambahkan beberapa aplikasi yang lain.

DAFTAR PUSTAKA

Firdaus. 2007. 7 Jam Belajar Interaktif PHP & MySQL dengan Dreamweaver. Palembang: Maxikom.

Hakim, Lukmanul. 2010. Bikin Website Super Keren dengan PHP & JQuery. Yogyakarta: Loko Media.

Kadir, Abdul. 2009. Membuat Aplikasi Web dengan PHP + Database MySQL. Yogyakarta: Andi.

Kendall, K.E. dan Kendall, J.E.. 2003. Analisis dan Perancangan Sistem Jilid 1. Jakarta: Prenhallindo.

Loeng, Marlon. 2004. Pemrograman Dasar Microsoft Visual Basic.NET. Yogyakarta: Andi Offset.

Marlinda, Linda. 2004. Sistem Basis Data. Yogyakarta: ANDI OFFSET. Oetomo, Budi Sutedjo Dharma. 2008. Konsep dan Perancangan Jaringan

Komputer. Yogyakarta: Andi.

Oktavian, Diar Puji. 2010. Menjadi Programmer Jempolan Menggunakan PHP. Yogyakarta: MediaKom.

Saladin, Djaslim; Yevis Marty Oesman. 2002. Intisari Pemasaran dan

Unsur-unsur Pemasaran. Bandung: Linda Karya.

Wicaksono, Soetam Rizky. 2006. Interaksi Manusia dan Komputer. Surabaya: STIKOM Surabaya.

54

Edit banner digunakan untuk merubah data banner yang telah ada dalam database seperti gambar dibawah ini.

Gambar 4.43 Halaman Edit Banner

9. Halaman Maintenance Pricelist

Pada halaman ini, admin mengelola pricelist yang akan di tampilkan pada halaman user nantinya. Pada menu ini terdapat 3 halaman yaitu view pricelist, insert pricelist dan edit pricelist. view pricelist digunakan untuk melihat pricelist yang sudah ada dalam database seperti gambar dibawah ini.

55

Gambar 4.44 Halaman View Pricelist

Insert pricelist digunakan untuk memasukkan pricelist baru kedalam database seperti gambar dibawah ini.

56

Edit pricelist digunakan untuk merubah data pricelist yang telah ada dalam database seperti gambar dibawah ini.

Gambar 4.46 Halaman Edit Pricelist

10. Halaman Maintenance Hubungi

Pada halaman ini, admin mengelola hubungi yang nantinya akan menjawab pertanyaan, keluhan, dan saran yang ditujukan pada Total Image Communication. Pada menu ini terdapat 3 halaman yaitu view hubungi dan replay e-mail. View hubungi digunakan untuk melihat pesan dari pengunjung yang sudah ada dalam database seperti gambar dibawah ini.

57

Gambar 4.47 Halaman View Hubungi

Replay e-mail digunakan untuk membalas pesan dari pengunjung yang akan dikirim langsung ke alamat e-mail mereka, seperti gambar dibawah ini.

58 BAB V PENUTUP

5.1 Kesimpulan

Dari hasil uji coba dan implementasi terhadap rancang bangun aplikasi media promosi berbasis web di Total Image Communication ini, maka dapat ditarik kesimpulan bahwa aplikasi yang dibuat pada saat kerja praktek ini dapat mempermudah dan membantu Total Image Communication dalam melakukan kegiatan promosi secara online dan mengenalkan produknya kepada masyarakat luas.

5.2 Saran

Dari aplikasi yang dibuat pada saat pelaksanaan kerja praktek ini masih terdapat beberapa kekurangan yang diharapkan di kemudian hari dapat diperbaiki oleh pihak lain. Beberapa kekurangan tersebut antara lain:

1. Aplikasi ini hanya bisa diakses melalui komputer saja. Untuk kedepannya mungkin dapat dikembangkan lagi menjadi mobile web aplication sehingga dapat diakses melalui smart phone agar pengunjung dapat lebih mudah mengaksesnya

2. Aplikasi ini hanya menerapkan keamanan sql anti injection pada halaman login. Untuk kedepannya mungkin masalah keamanan dapat di tambah lagi misal dengan menggunakan enkripsi pada link website dan lain sebagainya

3. Sistem dapat dikembangkan menjadi lebih kompleks lagi dengan menggabungkan beberapa sistem yang telah ada (integrated System), misalnya dengan menambahkan beberapa aplikasi yang lain.

59

DAFTAR PUSTAKA

Firdaus. 2007. 7 Jam Belajar Interaktif PHP & MySQL dengan Dreamweaver. Palembang: Maxikom.

Hakim, Lukmanul. 2010. Bikin Website Super Keren dengan PHP & JQuery. Yogyakarta: Loko Media.

Kadir, Abdul. 2009. Membuat Aplikasi Web dengan PHP + Database MySQL. Yogyakarta: Andi.

Kendall, K.E. dan Kendall, J.E.. 2003. Analisis dan Perancangan Sistem Jilid 1. Jakarta: Prenhallindo.

Loeng, Marlon. 2004. Pemrograman Dasar Microsoft Visual Basic.NET. Yogyakarta: Andi Offset.

Marlinda, Linda. 2004. Sistem Basis Data. Yogyakarta: ANDI OFFSET. Oetomo, Budi Sutedjo Dharma. 2008. Konsep dan Perancangan Jaringan

Komputer. Yogyakarta: Andi.

Oktavian, Diar Puji. 2010. Menjadi Programmer Jempolan Menggunakan PHP. Yogyakarta: MediaKom.

Saladin, Djaslim; Yevis Marty Oesman. 2002. Intisari Pemasaran dan Unsur-unsur Pemasaran. Bandung: Linda Karya.

Wicaksono, Soetam Rizky. 2006. Interaksi Manusia dan Komputer. Surabaya: STIKOM Surabaya.