BAB 3 PEMBAHASAN
3.4 Implementasi Sistem
3.4.4 Implementasi Antarmuka
Implementasi antarmuka merupakan tampilan dari aplikasi yang dibangun. Aplikasi web profile memilki beberapa bagian tampilan menu untuk admin maupun pengunjung, yaitu:
3.4.4.1 Tampilan Antarmuka Admin
Tampilan dari apilkasi web profile untuk bagian admin dibagi menjadi beberapa menu.
1. Tampilan Menu Login
2. Tampilan Menu Utama
Gambar 3.27 Tampilan Menu Utama
4. Tampilan Menu Product
Gambar 3.29 Tampilan Menu Product
6. Tampilan Menu Experience
Gambar 3.31 Tampilan Menu Experience
7. Tampilan Menu Admin
8. Tampilan Menu Tambah Data Profile
Gambar 3.33 Tampilan Menu Tambah Data Profile
Gambar 3.34 Tampilan Menu Tambah Data Product 10.Tampilan Menu Tambah Data Service
Gambar 3.35 Tampilan Menu Tambah Data Service
Gambar 3.36 Tampilan Menu Tambah Data Experience 3.4.4.2 Tampilan Antarmuka Pengunjung
Tampilan dari apilkasi web profile untuk bagian pengunjung dibagi menjadi beberapa menu.
1. Tampilan Menu Utama
2. Tempilan Menu Profile
Gambar 3.38 Tampilan Menu Profile
3. Tampilan Menu Product/Service
4. Tampilan Menu Service
Gambar 3.40 Tampilan Menu Service
5. Tampilan Menu Experience
6. Tampilan Menu Contact Us
BAB 4
KESIMPULAN DAN SARAN 4.1 Kesimpulan
Berdasarkan permasalahan yang ada pada Pembuatan Web Profile di CV. Pramega Hanitama maka dapat disimpulkan sebagai berikut :
1. Dengan adanya web profile di suatu perusahaan dapat menciptakan citra yang baik di kalangan masyarakat juga perusahaan lain, selain untuk memperkenalkan perusahaan ke masyarakat luas juga.
2. Dapat membantu perkembangan perusahaan di bidang promosi 4.2 Saran
Saran-saran yang diharapkan dapat lebih meningkatkan hasil yang telah didapatkan. Berikut beberapa saran yang dikemukakan:
1. Tampilan form lebih diperindah sesuai dengan tema perusahaan
2. Disediakan form untuk melayani perusahaan lain yang ingin melakukan tender sebuah proyek.
DAFTAR PUSTAKA
[1] Harry Susanto, pramega.doc.[2] Proposal RPL, http://nin9r0emz.files.wordpress.com/2008/02/proposal-rpl.doc diakses pada Senin, 11/10/2010, 10.10
[3] Proses Software, Arna Fariza,
http://repository.usu.ac.id/bitstream/123456789/16955/4/Chapter%20II.pdf
PEMBANGUNAN WEB PROFILE
DI CV. PRAMEGA HANITAMA
KERJA PRAKTEK
Diajukan untuk Memenuhi Tugas Mata Kuliah Kerja Praktek
Program Strata Satu Jurusan Teknik Informatika Fakultas Teknik dan Ilmu Komputer
Universitas Komputer Indonesia
ARNI ARDIANY NUR RAHMAN
10107256
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
UNIVERSITAS KOMPUTER INDONESIA
BANDUNG
menyelesaikan laporan kerja praktek dengan tepat waktu.
Laporan ini dapat diselesaikan, tidak lain atas bantuan dari berbagai pihak, oleh karena itu, penulis ingin mengucapkan terima kasih kepada:
1. Ibu Tati Harihayati S.Kom, yang telah membimbing penulis dalam menyelesaikan laporan kerja praktek ini.
2. Bapak Asep Barkah, S.T selaku pembimbing penulis di tempat kerja praktek yakni CV. Pramega Hanitama yang telah membimbing penulis dalam menyelesaikan tugas dan laporan kerja praktek.
Penulis sangat menyadari dalam pembuatan laporan ini masih banyak terdapat kekurangan, untuk itu penulis mohon saran dan kritik yang membangun agar kedepannya lebih baik lagi. Penulis juga berharap agar laporan ini dapat bermanfaat bagi kita semua.
Bandung, 26 Agustus 2010
KATA PENGANTAR ... i
DAFTAR ISI ... ii
DAFTAR TABEL ... vi
DAFTAR GAMBAR ... vii
DAFTAR SIMBOL ... ix
DAFTAR LAMPIRAN ... x
BAB 1 PENDAHULUAN ... 1
1.1 Latar Balakang Masalah ... 1
1.2 Perumusan Masalah ... 2
1.3 Maksud dan Tujuan ... 2
1.3.1 Maksud... 2
1.3.2 Tujuan ... 2
1.4 Batasan Masalah ... 2
1.5 Metode Penelitian ... 3
1.5.1 Tahap Pengumpulan Data ... 3
1.5.1.1 Studi Literatur ... 3
1.5.1.2 Studi Lapangan ... 4
1.5.2 Tahap Pembuatan Perangkat Lunak ... 4
1.6 Sistematika Penulisan ... 6
BAB 2 TINJAUAN PUSTAKA ... 7
2.1.4 Struktur Organisasi dan Job Description ... 9
2.2 Landasan Teori ... 10
2.2.1 Definisi Web Profile ... 10
2.2.2 Metode Pengembangan Sistem ... 10
2.2.2.1 Metode Waterfall [2] ... 10
2.2.3 Perangkat Lunak Pendukung [3] ... 12
2.2.3.1 Macromedia Dreamweaver 8 ... 12
2.2.3.2 Ruang Kerja Macromedia Dreamweaver 8... 13
2.2.3.3 MySQL ... 14
BAB 3 PEMBAHASAN ... 15
3.1 Waktu dan Tempat Kerja Praktek ... 15
3.2 Analisis Masalah ... 15
3.2.1 Analisis Prosedur yang sedang berjalan ... 15
3.2.2 Analisis Kebutuhan Non Fungsional ... 17
3.2.2.1 Analisis Kebutuhan Perangkat Keras ... 18
3.2.2.2 Analisis Kebutuhan Perangkat Lunak ... 18
3.2.2.3 Analisis Jaringan ... 19
3.2.2.4 Analisis Kebutuhan Pengguna ... 19
3.2.3 Analisis Basis Data ... 20
3.2.3.1 Enitity Relationalship Diagram (ERD)... 20
3.2.4 Analisis Fungsional ... 21
3.2.4.5 DFD Level 1 proses 1.4 Pengolahan Data Service ... 24
3.2.4.6 DFD Level 1 proses 1.5 Pengolahan Data Experience ... 24
3.2.4.7 Spesifikasi Proses ... 25
3.2.4.8 Kamus Data ... 29
3.3 Perancangan Data ... 31
3.3.1 Diagram Relasi ... 31
3.3.2 Struktur Tabel ... 32
3.3.3 Perancangan Arsitektur Perangkat Lunak ... 34
3.3.3.1 Perancangan Struktur Menu ... 34
3.3.3.2 Perancangan Antarmuka ... 35
3.3.3.2.1 Perancangan Form ... 35
3.3.3.3 Perancangan Pesan ... 41
3.3.3.4 Jaringan Semantik ... 41
3.3.3.5 Perancangan Prosedural ... 41
3.3.3.5.1 Perancangan Prosedural Login ... 42
3.4 Implementasi Sistem ... 42
3.4.1 Implementasi Perangkat Keras ... 42
3.4.2 Implementasi Perangkat Lunak ... 43
3.4.3 Implementasi Basis Data ... 43
3.4.4 Implementasi Antarmuka ... 45
3.4.4.1 Tampilan Antarmuka Admin ... 45
Tabel 3.3 Tabel Admin ... 32
Tabel 3.4 Tabel Profile ... 32
Tabel 3.5 Tabel Product ... 33
Tabel 3.6 Tabel Service ... 33
Gambar 2.2 Struktur Organisasi CV. Pramega Hanitama ... 9
Gambar 2.3 Metode Waterfall ... 10
Gambar 2.4 Tampilan ruang kerja pada Macromedia Dreamweaver 8 ... 13
Gambar 3.1 Flowmap promosi di CV. Pramega Hanitama ... 17
Gambar 3.2 Entity Relationship Diagram (ERD) Web Profile CV. Pramega Hanitama ... 21
Gambar 3.3 Diagram Konteks Web Profile CV. Pramega Hanitama... 22
Gambar 3.4 DFD Level 0 Web Profile ... 22
Gambar 3.5 DFD level 1 proses 1.2 Pengolahan data profile ... 23
Gambar 3.6 DFD Level 1 Proses 1.3 Pengolahan data product ... 23
Gambar 3.7 DFD Level 1 Proses 1.4 Pengolahan data service ... 24
Gambar 3.8 DFD Level 1 Proses 1.5 Pengolahan data experience ... 24
Gambar 3.9 Skema Relasi Web Profile CV. Pramega Hanitama ... 32
Gambar 3.10 Struktur Menu Pengunjung ... 34
Gambar 3.11 Perancangan Menu Admin ... 34
Gambar 3.12 Perancangan Menu Login ... 35
Gambar 3.13 Perancangan Menu Utama ... 36
Gambar 3.14 Perancangan Tampil Data Profile ... 36
Gambar 3.15 Perancangan Tampil Data Product ... 37
Gambar 3.16 Perancangan Tampil Data Service ... 37
Gambar 3.17 Perancangan Tampil Data Experience ... 38
Gambar 3.18 Perancangan Tampil Data Admin ... 38
Gambar 3.19 Perancangan Tambah Data Profile ... 39
Gambar 3.20 Perancangan Tambah Data Product ... 39
Gambar 3.21 Perancangan Tambah Data Service ... 40
Gambar 3.22 Perancangan Tambah Data Experience ... 40
Gambar 3.28 Tampilan Menu Profile ... 46
Gambar 3.29 Tampilan Menu Product ... 47
Gambar 3.30 Tampilan Menu Service ... 47
Gambar 3.31 Tampilan Menu Experience ... 48
Gambar 3.32 Tampilan Menu Admin ... 48
Gambar 3.33 Tampilan Menu Tambah Data Profile ... 49
Gambar 3.34 Tampilan Menu Tambah Data Product ... 50
Gambar 3.35 Tampilan Menu Tambah Data Service ... 50
Gambar 3.36 Tampilan Menu Tambah Data Experience ... 51
Gambar 3.37 Tampilan Menu Utama ... 51
Gambar 3.38 Tampilan Menu Profile ... 52
Gambar 3.39 Tampilan Menu Product/Service ... 52
Gambar 3.40 Tampilan Menu Service ... 53
Gambar 3.41 Tampilan Menu Experience ... 53
No Simbol Keterangan
1. Proses
Menunjukan transformasi dari masukan menjadi keluaran, dalam hal ini sejumlah masukan dapat menjadi hanya satu keluaran ataupun sebaliknya
2. Terminator
Mewakili entitas luar dimana sistem berkomunikasi
3. Penyimpanan
Untuk memodelkan kumpulan data/paket data
4. Aliran
Menggambarkan gerakan paket data atau informasi dari suatu bagian lain dari sistem dimana sistem penyimpanan mewakili lokasi penyimpanan data
LAMPIRAN C Daftar Kehadiran Kerja Praktek ... C-1 LAMPIRAN D Daftar Nilai Kerja Praktek ... D-1
Jurusan : Teknik Informatika
Fakultas : Teknik dan Ilmu Komputer
Program : Strata I
Tempat/Tanggal Lahir: Bandung, 25 September 1989 Anak ke : 1 dari 2 bersaudara
Alamat : Jl. OTISTA Gg. Tegallega No. 36 A/20 C Bandung 40252
RIWAYAT PENDIDIKAN
1995 – 2001 : SDN Mohammad Toha 22 Bandung 2001 – 2004 : SMP N 10 Bandung2004 – 2007 : SMA N 17 Bandung
CV. Pramega Hanitama merupakan suatu perusahaan yang bergerak di bidang teknologi informasi dan komunikasi, yaitu jasa Total IT Solution, IT & Manajemen Training dan Konsultasi Manajemen & Engineering, dimana dalam perkembangannya ke depan tidak menutup kemungkinan untuk bergerak di bidang lainnya.
2.1.1 Sejarah CV. Pramega Hanitama
Berawal dari berkumpulnya beberapa orang professional yang banyak berpengalaman, terutama dalam perdagangan dan jasa, maka didirikan perusahaan berbentuk CV, yang disebut CV. Pramega Hanitama. Setelah kurun waktu yang panjang, akhirnya perusahaan ini memilih bidang teknologi informasi dan komunikasi, yaitu jasa Total IT Solution, IT & Manajemen Training dan Konsultasi Manajemen & Engineering, dimana dalam perkembangannya ke depan tidak menutup kemungkinan untuk bergerak ke bidang-bidang lain.
Dengan berbekal pengalaman para professional yang telah banyak berkiprah dalam pengerjaan projek-projek Perencanaan dan Pengembangan serta Pemeliharaan Sistem dan Teknologi Informasi (IT), Implementasi IT, dan Pelatihan IT, CV. Pramega Hanitama siap untuk menyumbangkan tenaga dan pikiran untuk berperan serta dalam membantu berbagai instansi atau perusahaan baik pemerintah maupun swasta, dalam bidang Perencanaan, Pelatihan, Implementasi dan Pengembangan Sistem & Teknologi Informasi, untuk mendapatkan solusi yang terbaik bagi terlaksananya mekanisme kerja yang lebih efektif dan efisien.
2.1.2 Logo CV. Pramega Hanitama
CV. Pramega Hanitama selama hampir 5 tahun berdiri, melakukan projek-projek Perencanaan dan Pengembangan serta Pemeliharaan Sistem
dan Teknologi Informasi (IT), Implementasi IT, dan Pelatihan IT memakai logo instansi yang terdapat dalam gambar 2.1.
Gambar 2.1 Logo CV. Pramega Hanitama
Penjelasan dari gambar 2.1 adalah :
1. Huruf P dengan warna hijau, diharapkan dapat berkembang maju sebagaimana pohon yang segar terus tumbuh ke atas dan berkembang.
2. Warna merah melambangkan Pramega juga berani bersaing dengan pesaing-pesaing di dunia bisnis.
2.1.3 Badan Hukum Instansi
CV. Pramega Hanitama adalah sebuah perusahaan swasta nasional yang bergerak dalam bidang jasa Total IT Solution, IT Training dan Konsultasi Manajemen & Engineering. Didirikan di Bandung dengan Nomor Akta 21 tanggal 05 Oktober 1983 di depan Notaris Albertus Sutjipto Budihardjoputra, SH. Data dan legalitas perusahaan, adalah sebagai berikut :
1 Akta Pendirian : CV Pramega Utama
Nomor Akta : 21
Tgl/bln/thn berdiri perusahaan : 05-10-1983
Nama Notaris : Albertus Sutjipto Budihardjoputra, SH
2 Akta Perubahan terakhir CV Pramega Hanitama
Nomor Akta : 30
Tgl/bln/thn : 18 April 2009
2.1.4 Struktur Organisasi dan Job Description
CV. Pramega Hanitama dipimpin oleh Dewan Direksi yang dipimpin oleh Direktur Utama, bertanggung jawab kepada Rapat Umum Pemegang Perusahaan melalui Komisaris. Struktur CV. Pramega Hanitama adalah sebagai berikut:
Gambar 2.2 Struktur Organisasi CV. Pramega Hanitama
Keputusan-keputusan strategis dilakukan oleh dewan direksi yang dipimpin oleh Direktur Utama. Seperti tampak pada gambar di atas, Direktur Utama dibantu oleh Direktur Operasi.
Direktur Operasi bertanggung jawab atas operasional perusahaan dan pemasaran perusahaan. Direktur Operasi dibantu oleh beberapa manajer, yaitu manajer teknik bertanggung jawab atas penguasaan teknologi dan bertanggung jawab atas pemeliharaan dan penyimpanan produk-produk perusahaan, Manajer Keuangan dan Administrasi serta Manajer Pemasaran. Operasional perusahaan meliputi dukungan atas jalannya operasional kantor dan produksi serta pengelolaan sumberdaya manusia. Sedang fungsi niaga adalah dalam rangka pemasaran produk dan jasa perusahaan. Fungsi niaga dijalankan oleh semua manajemen perusahaan dengan Manajer Pemasaran sebagai fasilitator.
2.2 Landasan Teori
2.2.1 Definisi Web Profile
Web Profile merupakan suatu prasarana untuk memperkenalkan profile suatu tempat atau suatu instansi yang ada dengan berbasis web. Jadi user manapun dapat mengetahui bagaimana profile suatu tempat ataupun suatu instansi dari web profile yang dimiliki. Siapapun dapat mengakses web profile tersebut dengan tujuan user agar dapat lebih mengenal Profile instansi ataupun tempat tersebut.
2.2.2 Metode Pengembangan Sistem
Metode yang digunakan pada sistem informasi ini adalah metode sekuensial linear atau sering juga disebut dengan metode waterfall.dengan pengembangan sistemnya SDLC (Sistem Development Life Cycle).
2.2.2.1 Metode Waterfall [2]
Model sekuensial linier untuk software engineering, sering disebut juga dengan siklus kehidupan klasik atau model air terjun. Model ini mengusulkan sebuah pendekatan kepada perkembangan yang sistematik dan sekuensial yang mulai pada tingkat dan kemajuan sistem pada seluruh analisis, desain, kode, pengujian, dan pemeliharaan. Dimodelkan setelah siklus rekayasa konvensional, model sekuensial linier melingkupi aktivitas –
aktivitas yang dijelaskan pada gambar 2.3.
1. Rekayasa dan pemodelan sistem/informasi (Sistem Engineering) Pandangan sistem ini penting ketika software harus berhubungan dengan elemen-elemen yang lain seperti software, manusia, dan database. Rekayasa dan anasisis system menyangkut pengumpulan kebutuhan pada tingkat sistem dengan sejumlah kecil analisis serta disain tingkat puncak. Rekayasa informasi mancakup juga pengumpulan kebutuhan pada tingkat bisnis strategis dan tingkat area bisnis.
2. Analisis kebutuhan software (Software Analys)
Proses pengumpulan kebutuhan diintensifkan dan difokuskan, khusunya pada software. Untuk memahami sifat program yang dibangun, analis harus memahami domain informasi, tingkah laku, unjuk kerja, dan interface yang diperlukan. Kebutuhan baik untuk sistem maupun software didokumentasikan dan dilihat lagi dengan pelanggan. 3. Desain (Design)
Desain software sebenarnya adalah proses multi langkah yang berfokus pada empat atribut sebuah program yang berbeda; struktur data, arsitektur software, representasi interface, dan detail (algoritma) prosedural. Proses desain menerjemahkan syarat/kebutuhan ke dalam sebuah representasi software yang dapat diperkirakan demi kualitas sebelum dimulai pemunculan kode. Sebagaimana persyaratan, desain didokumentasikan dan menjadi bagian dari konfigurasi software.
4. Generasi kode (Coding)
Desain harus diterjemahkan kedalam bentuk mesin yang bisa dibaca. Langkah pembuatan kode melakukan tugas ini. Jika desain dilakukan dengan cara yang lengkap, pembuatan kode dapat diselesaikan secara mekanis.
5. Pengujian (Testing)
Sekali program dibuat, pengujian program dimulai. Proses pengujian berfokus pada logika internal software, memastikan bahwa semua pernyataan sudah diuji, dan pada eksternal fungsional, yaitu
mengarahkan pengujian untuk menemukan kesalahan – kesalahan dan memastikan bahwa input yang dibatasi akan memberikan hasil aktual yang sesuai dengan hasil yang dibutuhkan.
6. Pemeliharaan (Maintenance)
Software akan mengalami perubahan setelah disampaikan kepada pelanggan (perkecualian yang mungkin adalah software yangdilekatkan). Perubahan akan terjadi karena kesalahan – kesalahan ditentukan, karena software harus disesuaikan untuk mengakomodasi perubahan – perubahan di dalam lingkungan eksternalnya (contohnya perubahan yang dibutuhkan sebagaiakibat dari perangkat peripheral atau sistem operasi yang baru), atau karena pelanggan membutuhkan perkembangan fungsional atau unjuk kerja. Pemeliharaan software mengaplikasikan lagis etiap fase program sebelumnya dan tidak membuat yang baru lagi.
2.2.3 Perangkat Lunak Pendukung [3]
Perangkat lunak yang digunakan untuk menunjang pembuatan aplikasi sehingga dapat menjalankan aplikasi sesuai dengan yang diharapkan.
2.2.3.1 Macromedia Dreamweaver 8
Salah satu software web editor adalah Macromedia Dreamweaver 8 yang merupakan penyempurnaan dari versi sebelumnya dan tentu saja semakin mudah dalam penggunaannya.
Oleh karena itu, software ini paling inovatif dan lebih lengkap dibandingkan software web editor lain. Adapun pengertian dari Macromedia Dreamweaver 8 ini adalah program aplikasi professional untuk mengedit HTML secara visual. Program Aplikasi Macromedia Dreamweaver 8 menyertakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, serta JavaScript.
Fasilitas terbaru dari Macromedia Dreamweaver 8 adalah Zoom Tool and Guides, Panel CSS yang baru, Code Collapse, Coding Toolbar, dan Insert Flash Video. Macromedia Dreamweaver 8 mendukung pemrograman script server-side, seperti PHP, ASP, ASP.NET, ColdFusion dan JSP. Pemrograman script server-side maksudnya adalah script yang digunakan dalam pemrograman web dinamis dimana semua perintahnya dieksekusi pada server. Fungsi server disini adalah sebagai pemroses script dan hasilnya dikembalikan dalam bentuk tag-tag HTML yang kemudian ditampilkan dalam browser.
2.2.3.2 Ruang Kerja Macromedia Dreamweaver 8
Komponen-komponen yang terdapat pada ruang kerja Macromedia Dreamweaver 8 adalah :
Gambar 2.4 Tampilan ruang kerja pada Macromedia Dreamweaver 8
1. Insert Bar
Insert bar merupakan tool yang digunakan untuk menyisipkan objek ke dalam dokumen web. Ada enam kelompok kategori yang digunakan untuk insert bar yaitu Common, Layout, Form, Text, HTML, dan Application yang masing-masing memiliki beberapa tool beserta kegunaannya.
2. Document Window
Jendela kerja dokumen terdiri atas layar kerja serta fasilitasnya. Yang dimaksud dengan fasilitas adalah tool untuk mengatur layar kerja atau sering disebut Document Toolbar, antara lain Coding tool dan Zoom & Guide tool. Di samping Document Toolbar, tersedia fasilitas lain yaitu Tag Selection.
3. Panel Groups
Panel pada Macromedia Dreamweaver 8 merupakan suatu media yang berfungsi sebagai fasilisator. Kumpulan berbagai panel disebut Panel Groups, terletak pada sebelah kanan layar kerja. Panel-panel tersebut diantaranya CSS, Application, Tag Inspector, Files dan History yang masing-masing memiliki bagian dan fungsi.
4. Property Inspector
Property Inspector merupakan area kerja untuk mengatur dalam mengelola properti-properti seperti pada text, image, maupun tabel dalam suatu dokumen web. Cara kerja Property Inspector hanya dengan memasukkan nilai-nilai parameter yang sudah disediakan. Secara umum Property Inspector terdiri dari Page Property, Table Property, Image Property, dan Form Property.
5. Page Property
Page Property berguna untuk mengatur properti halaman. Page Property Inspector juga menyediakan fasilitas Page Properties.
2.2.3.3 MySQL
MySQL adalah salah satu jenis database server yang sangat terkenal. Kepopulerannya disebabkan MySQL menggunakan SQL sebagai bahasa dasar untuk mengakses databasenya. Pada MySQL, sebuah database mengandung satu atau sejumlah tabel. Tabel terdiri atas sejumlah baris dan setiap baris mengandung satu atau beberapa kolom. Untuk mengelola database MySQL ada beberapa cara yaitu melalui prompt DOS (tool command line) dan dapat juga menggunakan program utility seperti:
1. PHP MyAdmin 2. MySQLGUI
3. MySQL Manager Java Based 4. MySQL Administrator for windows.