perancangan company profile berbasis web

Perancangan Company Profile

PT. Style Management Berbasis Web

Disusun guna melengkapi tugas Perancangan Web.

Disusun oleh : Suwito (114-11-1356)

Jurusan Teknik Informatika

STMIK ProVisi Semarang

Jl. Pattimura no. 32-34 Semarang, telp. (024) 351 0827, 351 0828

Tahun Akademik 2013/2014

ii

DAFTAR ISI

HALAMAN JUDUL ................................................................................................. i

DAFTAR ISI ............................................................................................................ ii

BAB I PENDAHULUAN ........................................................................................ 1

A. Latar Belakang ................................................................................................. 1

B. Rumusan Masalah ............................................................................................ 1

C. Batasan Masalah ............................................................................................... 1

D. Tujuan Penulisan .............................................................................................. 2

E. Manfaat Penulisan ............................................................................................ 2

BAB II TINJAUAN PUSTAKA ............................................................................. 3

A. Pengertian Perancangan ................................................................................... 3

B. Pengertian Company Profile ............................................................................ 3

C. Pengertian PT (Perseroan Terbatas) ................................................................. 4

D. Pengertian Website ........................................................................................... 4

BAB III METODELOGI PENELITIAN .............................................................. 5

A. Objek Penelitian. .............................................................................................. 5

B. Subjek Penelitian. ............................................................................................. 5

C. Jenis dan Sumber Data ..................................................................................... 5

1. Jenis data ................................................................................................. 5

Data kualitatif ......................................................................................... 5

2. Sumber data ............................................................................................ 6

a. Data primer......................................................................................... 6

iii

b. Data sekunder ..................................................................................... 6

D. Teknik Pengumpulan Data ............................................................................... 6

1. Interview (wawancara) ............................................................................ 6

2. Observasi (pengamatan) ......................................................................... 6

3. Studi pustaka ........................................................................................... 7

BAB IV HASIL DAN PEMBAHASAN ................................................................. 8

A. Penyajian Data .................................................................................................. 8

1. Gambaran umum perusahaan .................................................................. 8

2. Lokasi perusahaan ................................................................................... 8

B. Pembahasan ...................................................................................................... 8

1. Diagram Konteks .................................................................................... 8

2. Design Layout Website ........................................................................... 9

a. Header ................................................................................................ 9

b. Navigasi / menu.................................................................................. 9

c. Contents ............................................................................................. 9

d. Footter .............................................................................................. 10

3. Source Code dan Penjelasan ................................................................. 10

a. index.html ........................................................................................ 10

b. home.html ........................................................................................ 13

c. company.html .................................................................................. 14

d. product.html .................................................................................... 15

e. contact.html ..................................................................................... 16

iv

f. style.css............................................................................................. 17

4. Hasil jadi perancangan website ............................................................. 19

a. Halaman Home ................................................................................. 19

b. Halaman Profile ............................................................................... 19

c. Halaman Our Product ...................................................................... 20

d. Halaman Contact Us ........................................................................ 20

BAB V KESIMPULAN DAN SARAN ................................................................ 21

A. Kesimpulan ..................................................................................................... 21

B. Saran ............................................................................................................... 21

DAFTAR PUSTAKA ............................................................................................ 22

1

BAB I

PENDAHULUAN

A. Latar Belakang

Arus informasi di era modern ini sangatlah cepat menyebar kesegala penjuru

dunia. Informasi menyebar melalui media yang bermacam-macam dan dalam bentuk

yang berbeda-beda. Secara umum bentuk informasi bisa berupa gambar, suara, maupun

video. Salah satu media penyebaran informasi yang sangat cepat yaitu internet.

Informasi disampaikan melalui sebuah portal yang disebut dengan website. Website

adalah sebuah portal yang bisa diakses melalui internet dari mana saja dan kapan saja.

Hampir setiap instansi atau lembaga diseluruh dunia sudah mempunyai website sebagai

sarana komunikasi antara perusahaan dengan pelanggan.

PT. Style Management adalah sebuah perusahaan jasa yang bergerak dalam

bidang pengembangan SDM. Untuk mempermudah komunikasi dengan pelanggan PT.

Style Management membutuhkan sebuah website sebagai sarana komunikasi dengan

masyarakat yang potensial menjadi pelanggan maupun masyarakat yang sudah menjadi

pelanggan.

B. Rumusan Masalah

Bagaimana cara membuat company profile berbasis web untuk PT. Style

Management?

C. Batasan Masalah

Dalam laporan ini penulis akan membahas proses pembuatan company profile

PT. Style Managemen yang berbasis web.

2

D. Tujuan Penulisan

Penulisan laporan ini bertujuan untuk mengahasilkan company profile PT. Style

Management yang berbasis web.

E. Manfaat Penulisan

Manfaat penulisan laporan ini adalah :

a. Bagi Penulis

1) Penulis dapat mengerti bagaimana proses merancang sebuah company

profile yang berbasis web.

2) Penulis dapat mengerti bagaimana mengatur tampilan sebuah company

profile yang berbasis web agar terlihat menarik.

b. Bagi Perusahaan

1) PT. Style Management memiliki sebuah company profile yang berbasis

web.

2) PT. Style Management dapat meningkatkan promosi kepada masyarakat

melalui websitenya.

3

BAB II

TINJAUAN PUSTAKA

A. Pengertian Perancangan

Menurut Dr. Azhar Susanto, MBus, Ak dalam bukunya yang berjudul “Sistem

Informasi Manajemen Konsep dan Pengembangannya [2004:51]”, Perancangan adalah

kemampuan untuk membuat beberapa alternatif pemecahan masalah.

Sebuah system yang baik pasti melaui proses perancangan yang baik dan matang.

Tanpa adanya proses perancangan maka proses pembuatan system tidak akan berjalan

secara sistematis dan tentunya akan terjadi banyak kesalahan yang akan mengganggu

jalannya sebuah system.

B. Pengertian Company Profile

Menurut kamus Bahasa Inggris (John M.Echols dan Hassan Shadily),

company profile berasal dari dua kata berbahasa inggris yang masing-masing kata

memiliki pengertian yang berbeda tetapi memiliki keterikatan, yaitu kata “company

“dan “profile” (Echols dan Shadily 131,449). Kata “company“ menurut kamus

Bahasa Inggris-Indonesia mempunyai arti perusahaan, perseroan, maskapai, firma,

persekutuan dan rombongan. Sedangkan untuk kata “profile” menurut kamus Bahasa

Inggris-Indonesia mempunyai arti profil, riwayat, raut muka dan wajah dari sisi. Dari

definisi yang telah dijelaskan di atas, apabila kata “company” dan kata “profile”

digabungkan, maka akan memiliki arti yang berbeda. Berdasarkan informasi yang

diperoleh secara online (Dictionary.com, 2013), company profile adalah Concise

description which, among other items of information, includes (1) firm's history, (2)

number and quality of its human , financial, and physical resources, (3)

4

organizational and management structure, (4) past, current and anticipated

performance, and (5) its repulation, and the standing of its goods or service.

C. Pengertian PT (Perseroan Terbatas)

Dalam Pasal 1 UU Nomor 1 Tahun 1995 disebutkan pengertian PT adalah

“Perseroan Terbatas yang selanjutnya disebut perseroan adalah badan hukum yang

didirikan berdasarkan perjanjian, melakukan kegiatan usaha dengan modal dasar yang

seluruhnya terbagi dalam saham, dan memenuhi persyaratan yang ditetapkan dalam

Undang-Undang ini serta peraturan pelaksananya”.

D. Pengertian Website

Website atau situs adalah kumpulan halaman yang menampilkan informasi

data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan

dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian

bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-

jaringan halaman (Hyperlink).

Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi

informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi informasi

website selalu berubah-berubah, dan isi informasinya interaktif dua arah berasal dari

pemilik serta pengguna website. (Athkinson:2004).

5

BAB III

METODELOGI PENELITIAN

A. Objek Penelitian.

Dalam penelitian ini, yang menjadi objek penelitian adalah PT. Style Management,

sebuah perusahaan yang bergerak dalam bidang jasa pengembangan SDM.

B. Subjek Penelitian.

Yang menjadi subjek penelitian adalah “Perancangan Company Profile PT. Style

Management Berbasis Web”. Jadi penelitian yang dilakukan lebih mengarah pada seluk

beluk perusahaan / company profile yang nantinya akan diwujudkan dalam sebuah website,

sehingga masyarakat yang ingin mengetahui / tertarik dengan produk PT. Style

Management dapat melihatnya melalui website tersebut.

C. Jenis dan Sumber Data

1. Jenis data

Data kualitatif

Data yang membentuk uraian atau penjelasan laporan-laporan,

kemudian dikumpulkan untuk mendapatkan kesimpulan yang tepat. Contoh :

dokumen-dokumen, profil PT. Style Management.

6

2. Sumber data

a. Data primer

Data primer adalah data yang diperoleh dengan cara mengevaluasi

secara langsung ke objek lapangan. Contoh : Membaca secara langsung

company profile yang sudah ada.

b. Data sekunder

Data sekunder adalah data yang diperoleh secara tidak langsung guna

melengkapi data primer baik berupa dokumen, daftar pustaka, dan lain-lain.

Contoh: sarana perpustakaan dan catatan yang penulis peroleh selama duduk

dibangku perkuliahan yang berkaitan dengan objek dan menunjang dalam

permasalahan.

D. Teknik Pengumpulan Data

Adapun teknik pengumpulan data yang digunakan adalah :

1. Interview (wawancara)

Adalah teknik pengumpulan data dengan mengajukan beberapa pertanyaan

guna mencari informasi secara langsung melalui wawancara dengan pimpinan PT.

Style Management, tentang masalah-masalah yang terkait dengan proses pembuatan

company profile berbasis web.

2. Observasi (pengamatan)

Dengan melakukan pengamatan, mencari informasi dan mengumpulkan data

secara langsung di PT. Style Management. Misalnya mencatat data-data tentang

kegiatan yang dilakukan.

7

3. Studi pustaka

Dengan cara mempelajari literatur buku dan bahan-bahan yang berkaitan

dengan materi dalam pembahasan laporan dan menulis data-data yang dibutuhkan

dalam penulisan laporan.

8

BAB IV

HASIL DAN PEMBAHASAN

A. Penyajian Data

1. Gambaran umum perusahaan

PT. Style Management adalah sebuah perusahaan yang berdiri pada tahun 2006

dan bergerak dalam bidang jasa pengembangan SDM. Produk jasa yang ditawarkan

yaitu jasa pengembangan softskills dan hardskills. PT. Style Management adalah

merupakan perusahaan yang tergabung dalam CG Group.

2. Lokasi perusahaan

PT. Style Management terletak di jalan Sinabung I no. 15 Semarang. Lokasinya

berada di kawasan Candisari Semarang, tidak jauh dari kantor pos jalan

Sisingamangaraja.

B. Pembahasan

1. Diagram Konteks

9

2. Design Layout Website

a. Header

Berisi Logo perusahaan, nama dan alamat perusahaan.

b. Navigasi / menu

Berisi menu untuk berpindah antar halaman. Menu yang tersedia adalah sebagai

berikut :

- Home : halaman utama / home page.

- Profile : memuat informasi profile perusahaan.

- Our Product : memuat informasi product perusahaan.

- Contact Us : memuat informasi kontak perusahaan / yaitu bagaimana

pengunjung bisa menghubungi perusahaan.

c. Contents

Berfungsi sebagai tempat memuat halaman yang dibuka melalui menu / navigasi.

10

d. Footter

Memuat informasi hak cipta website

3. Source Code dan Penjelasan

Pada Website PT. Style Management terdiri dari beberapa komponen / file

sebagai berikut :

- image / gambar – gambar pendukung

- index.html

- home.html

- company.html

- product.html

- contact.html

- jquery-1.10.2.js

- style.css

File – file yang akan dibahas source codenya antara lain :

a. index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PT. Style Management</title>

<link href="style.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript">

$(document).ready(function(){

$("#isi").load("home.html")

$("#home").click(function(){ $("#isi").load("home.html");

});

$("#company").click(function(){ $("#isi").load("company.html");

11

});

$("#product").click(function(){ $("#isi").load("product.html");

});

$("#contact").click(function(){ $("#isi").load("contact.html");

});

}); </script>

</head>

<body>

<div id="out"> <div id="in">

<div id="header">

<table width="600" border="0"> <tr>

<td width="34"><img src="images/style2.png"

height="89px"/></td> <td width="550"><font size="+3">PT. Style

Management</font><br />

<span style="font-size:12px">Jl.

Sinabung I no. 15 Semarang, Telp. (024)8509216, 8509217</span></td> </tr>

</table>

<br /> </div>

<div id="nav">

<table width="480" border="0" align="center"> <tr>

<td width="120"><a href="#" id="home">Home</a></td>

<td width="120"><a href="#" id="company">Profile</a></td>

<td width="120"><a href="#" id="product">Our Product</a></td> <td width="120"><a href="#" id="contact">Contact US</a></td>

</tr>

</table> </div>

<div id="isi">

</div> <div id="footer">

<center>Copyright © suwito 2013</center>

</div>

</div> </div>

</body>

</html>

12

Penjelasan :

<link href="style.css" rel="stylesheet" type="text/css"/>

digunakan untuk melampirkan file css kedalam halaman web

<script type="text/javascript" src="jquery-1.10.2.js"></script>

Digunakan untuk melampirkan file jquery kedalam halaman web

<script type="text/javascript">

$(document).ready(function(){

$("#isi").load("home.html") Akan secara otomatis memuat halaman utama ketika website

dibuka.

$("#home").click(function(){

$("#isi").load("home.html"); });

Perintah untuk memuat/membuka halaman home.html kedalam

div dengan id “isi”.

$("#company").click(function(){

$("#isi").load("company.html");

}); Perintah untuk memuat/membuka halaman company.html

kedalam div dengan id “isi”.

$("#product").click(function(){

$("#isi").load("product.html"); });

Perintah untuk memuat/membuka halaman product.html


$("#contact").click(function(){

$("#isi").load("contact.html");

});

13

Perintah untuk memuat/membuka halaman contact.html


}); </script>

b. home.html


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Home</title>

</head>

<body>

<div style="margin-top:150px;margin-left:auto;text-align:center;">

<b><span style="font-size:20px;text-shadow:0px 0px 5px #9F0">Selamat

datang di website resmi PT. Style Management</span></b><br /><br />

<img src="images/style.PNG" />

</div>

</body>

</html>

Penjelasan.

<div style="margin-top:150px;margin-left:auto;text-align:center;">

</div>

Margin-top: 150px artinya akan membuat tulisan “Selamat datang di

website resmi PT. Style Management” berjarak 150px kebawah dari

navigasi / menu.

<span style="font-size:20px;text-shadow:0px 0px 5px #9F0">Selamat

datang di website resmi PT. Style Management</span>

Tag span berfungsi untuk meng-override css yang berada diatasnya,

sehingga memungkinkan pemberian efek css khusus dengan memberikan

style tersendiri.

14

style="font-size:20px;text-shadow:0px 0px 5px #9F0".

Artinya untuk mengatur ukuran hurufnya menjadi 20px, text-shadow

berfungsi memberikan efek bayangan, dengan pola ({x-aksis} {y-aksis}

{lebar bayangan} {warna}) .

c. company.html




<head>


<title>Company Profile</title>

</head>

<body>

<b><font size="+2">Profile</font></b><br /><br />

<p>Kami adalah sebuah perusahaan yang bergerak dibidang jasa

pengembangan SDM, baik soft skill maupun hard skill.<br /><br />

We are here to DEVELOP YOU..!!<br /><br />

Sesuai dengan slogan kami, maka bila anda membutuhkan keterangan,

bantuan, maupun konseling untuk mengembangkan kemampuan anda,

silahkan kontak kami, kami dengan senang hati membantu anda.

</p>

<table width="840" border="0" align="center">

<tr>

<td width="280" height="226"><img src="images/manajemen1.jpg"

height="226" /></td>

<td width="280"><img src="images/manajemen2.jpg" height="226"

/></td>

<td width="280"><img src="images/manajemen3.jpg" height="226"

/></td>

</tr>

</table>

</body>

</html>

15

d. product.html




<head>


<title>Product</title>

</head>

<body>

<p><b><font size="+2">Our Product</font></b></p>

<table width="461" border="0">

<tr>

<td width="212"><img src="images/soft.jpg" height="200" width="200"

/></td>

<td width="239"><dt><b>Soft Skills</b></dt>

<ul>

<li>Sales and Marketing</li>

<li>Supervisors and Managers</li>

<li>Train the Trainer</li>

<li>Human Resources</li>

</ul></td>

</tr>

<tr>

<td width="212"><img src="images/hard.png" height="200"

width="200" /></td>

<td><dt><b>Hard Skills</b></dt>

<ul>

<li>Balance Score Card</li>

<li>KPI</li>

<li>Survey</li>

</ul></td>

</tr>

</table>

</body>

</html>

16

e. contact.html




<head>


<title>Contact Us</title>

</head>

<body>

<b><font size="+2">Contact Us</font></b><br />

<table width="896" border="0">

<tr>

<td width="289" height="474" rowspan="2" valign="top"><b>Office

:</b><br />

Jl. Sinabung I no. 15 Semarang<br />

Telp : (024)- 850 92 16 / 850 92 17<br />

Fax : (024)- 850 92 18<br />

e-mail : <a href="mailto:info@style-

mgnt.com?Subject=Hallo">[email protected]</a></td>

<td width="597" valign="top"><b>Lokasi :</td>

</tr>

<tr>

<td valign="top"><iframe width="600" height="400" frameborder="0"

scrolling="no" marginheight="0" marginwidth="0"

src="https://maps.google.co.id/maps/ms?msa=0&msid=206123803874

050931090.0004ddab092d84bbd10a5&hl=en&ie=UTF8&t=

m&ll=-

7.013157,110.424067&spn=0.003727,0.006437&z=17&outp

ut=embed"></iframe><br /><small>View <a

href="https://maps.google.co.id/maps/ms?msa=0&msid=20612380387

4050931090.0004ddab092d84bbd10a5&hl=en&ie=UTF8&t

=m&ll=-

7.013157,110.424067&spn=0.003727,0.004828&z=17&sour

ce=embed" style="color:#0000FF;text-align:left">PT. Style

Management</a> in a larger map</small></td>

</tr>

</table>

</body>

</html>

Penjelasan.

<iframe width="600" height="400" frameborder="0" scrolling="no"

marginheight="0" marginwidth="0"

src="https://maps.google.co.id/maps/ms?msa=0&msid=206123803874

050931090.0004ddab092d84bbd10a5&hl=en&ie=UTF8&t=

m&ll=-

7.013157,110.424067&spn=0.003727,0.006437&z=17&outp

17

ut=embed"></iframe><br /><small>View <a

href="https://maps.google.co.id/maps/ms?msa=0&msid=20612380387

4050931090.0004ddab092d84bbd10a5&hl=en&ie=UTF8&t

=m&ll=-

7.013157,110.424067&spn=0.003727,0.004828&z=17&sour

ce=embed" style="color:#0000FF;text-align:left">PT. Style

Management</a> in a larger map</small>

Kode diatas didapat dari Google Map, kode diatas akan menampilkan lokasi

PT. Style Management pada Google Map.

f. style.css

@charset "utf-8";

/* CSS Document */

#out{

width:100%;

float:left;

}

#in{

margin-left:10%;

margin-right:10%;

box-shadow : 0px 0px 30px #888888;

}

#header {

font-family: Tahoma, Geneva, sans-serif;

font-size: 16px;

font-style: normal;

font-weight: bold;

background-color: #CCC;

height:90px;

width:calc(100% - 20px);

padding: 0px 10px 0px 10px;

border: solid 1px;

text-shadow: 0px 0px 10px #06C;

}

#nav{


font-size: 14px;

font-style: normal;

height:25px;


border:solid 1px;

padding:5px 0px 0px 10px;

background-color:#FFF;

}

18

#nav tr{

background-color:#069;

text-align:center;

border:none;

font-weight:bold;

color:#FFF;

}

#nav tr a{

color:#FFF;

text-decoration:none;

display:block;

}

#nav tr a:hover {

color:#F00;

text-decoration:none;

}

#isi{


height:500px;

overflow:auto;


height:480px;

border: solid 1px;

padding: 10px 10px 10px 10px;

background-color:#FFF;

}

#footer{


font-size: 14px;

font-style: normal;

height:25px;

width:100%;

border: solid 1px;

padding-top:5px;

background-color: #CCC;

}

/* Akhir CSS Document */

19

4. Hasil jadi perancangan website

Hasil proses perancangan website company profile PT. Style Management

adalah sebagai berikut :

a. Halaman Home

b. Halaman Profile

20

c. Halaman Our Product

d. Halaman Contact Us

21

BAB V

KESIMPULAN DAN SARAN

A. Kesimpulan

Dari uraian yang telah disajikan pada bab-bab sebelumnya maka dapat diambil

kesimpulan bahwa pembuatan company profile berbasis web memerlukan keahlian dalam

bidang pemrograman web, dalam hal ini penulis menggunakan HTML + Jquery untuk

membuat website company profile PT. Style Management. Disamping itu untuk mengatur

tampilan website agar terlihat lebih menarik maka penulis menggunakan CSS (cascading

style sheet).

Pembuatan company profile berbasis web akan sangat berguna karena company

profile PT. Style Management bisa diakses oleh siapapun, dimanapun, dan kapanpun,

karena company profilenya berada di internet. Sehingga hal ini akan membuat PT. Style

Management semakin dikenal oleh masyarakat.

B. Saran

Dalam membuat company profile berbasis web agar terlihat lebih menarik

pengunjung website, maka sebaiknya perlu menyisipkan gambar, audio, atau bahkan video

agar lebih informatif.

Disamping itu juga perlunya menata source code atau penataan file-file dari

website tersebut, sehingga memudahkan developer website tersebut dalam proses

perawatan maupun upgrade system.

22

DAFTAR PUSTAKA

Ak, Dr. Azhar Susanto, MBus. (2004). Sistem Informasi Manajemen Konsep dan

Pengembangannya, 51.

Minor, John Echols dan Hassan Shadily. An English-Indonesian dictionary. New York :

Cornell University Press, 1975.

http://sigma.ac.id/wp-content/uploads/2013/04/jurnal.pdf pada 13/12/2013 23:58

http://www.slideshare.net/swtlt/laporan-kerja-paktek-aplikasi-penjualan-pada-cv-muda-

mandiri-menggunakan-visual-basic-60 pada 15/12/2013 15:49

http://sigma.ac.id/wp-content/uploads/2013/04/jurnal.pdf%20pada%2013/12/2013%2023:58

http://www.slideshare.net/swtlt/laporan-kerja-paktek-aplikasi-penjualan-pada-cv-muda-mandiri-menggunakan-visual-basic-60%20pada%2015/12/2013%2015:49

http://www.slideshare.net/swtlt/laporan-kerja-paktek-aplikasi-penjualan-pada-cv-muda-mandiri-menggunakan-visual-basic-60%20pada%2015/12/2013%2015:49

perancangan company profile berbasis web

Education