PTSM_PROFILE

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

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
ii

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
iii

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

iv

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.

1

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.

2

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).

Bahasa Inggris-Indonesia mempunyai arti

Kata “company“ menurut kamus

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
diperoleh secara online (Dictionary.com, 2013), company

profile

yang

adalah Concise

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

quality

of

its

human

,

3

financial,

and

physical resources, (3)

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 jaringanjaringan 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).

4

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.

5

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.

6

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.

7

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

8

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.

9

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");
10

});
$("#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>

11

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");
});

12

Perintah untuk memuat/membuka halaman contact.html
});
</script>
b. home.html
<head>
<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.

13

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>

14

d. product.html
<head>
<title>Product</title>
</head>
<body>
<p><b><font size="+2">Our Product</font></b></p>
<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>

15

e. contact.html
<head>
<title>Contact Us</title>
</head>
<body>
<b><font size="+2">Contact Us</font></b><br />
<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@stylemgnt.com?Subject=Hallo">info@style-mgnt.com</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

16

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;
}

17

#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 */

18

4. Hasil jadi perancangan website
Hasil proses perancangan website company profile PT. Style Management
adalah sebagai berikut :
a. Halaman Home

b. Halaman Profile

19

c. Halaman Our Product

d. Halaman Contact Us

20

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.

21

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-mudamandiri-menggunakan-visual-basic-60 pada 15/12/2013 15:49

22

PTSM_PROFILE

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to PTSM_PROFILE

Similar to PTSM_PROFILE (20)

Recently uploaded

Recently uploaded (20)

PTSM_PROFILE