PEMBUATAN WEBSITE POLITEKNIK NEGERI JEMB

(1)

DENGAN MENGGUNAKAN METODE CMS

(

CONTENT MANAGEMENT SYSTEM)

LAPORAN

PROYEK USAHA MANDIRI

(PUM)

Diajukan Sebagai Salah Satu Syarat Untuk Menyelesaikan Pendidikan di Politeknik Negeri Jember

Jurusan Manajemen Agribisnis Program Studi Manajemen Informatika

Oleh:

Dimas Fariztha Hadiyatullah NIM. D3 304 078

DEPARTEMEN PENDIDIKAN NASIONAL

POLITEKNIK NEGERI JEMBER

(2)

I. PENDAHULUAN

1.1 Latar Belakang

Dewasa ini perkembangan ilmu pengetahuan dan teknologi semakin pesat,

khususnya teknologi informasi. hampir semua instansi menerapkan sistem

komputerisasi untuk membantu menyelesaikan masalah sehingga lebih efektif dan

efisien. Salah satu perkembangan dari teknologi informasi adalah internet.

Dengan adanya internet maka waktu yang dibutuhkan untuk memberikan

informasi akan lebih mudah dan cepat. Sejalan dengan perkembangan teknologi

tersebut, internet sudah menjadi elemen penting dalam sistem informasi karena

kemampuannya dalam menghadirkan berbagai informasi yang dibutuhkan oleh

masyarakat secara lebih efisien.

Politeknik Negeri Jember sebagai salah satu lembaga perguruan tinggi

membutuhkan suatu kemudahan untuk memberikan informasi pada masyarakat

tentang Politeknik Negeri Jember itu sendiri, sehingga dapat memperlancar

aktivitas Informasi dan perkembangan Politeknik Negeri Jember. Penulis memilih

Internet sebagai salah satu alternatif media elektronika dan Website sebagai

aplikasinya yang digunakan untuk memperkenalkan Politeknik Negeri Jember

kepada masyarakat.

Seperti halnya kita ketahui, proses pembuatan website pada umumnya

dimulai dengan menyusun halaman web. Berbagai jenis perangkat penyususun

(authoring tools) dibuat khusus untuk keperluan itu, fitur utama authoring tool

halaman web biasanya berupa menu yang memudahkan atau mengotomatis

penulisan tag-tag scripting. Dengan dilakukan scripting menggunakan HTML

Hypertext Markup language) maka dapat dibuat suatu bentuk desain website

untuk menampilkan segala macam informasi melalui media internet.

Beberapa macam cara pembuatan desain website dapat dilakukan, baik

secara statis dan dinamis. Dimana website yang dibuat secara statis, biasanya

hanya digunakan untuk menampilkan produk yang sifatnya permanen atau tidak

akan berubah dalam jangka waktu yang lama. Sedangkan website yang bersifat

(3)

halamannya untuk mempermudah pemakai dalam melakukan pengolahan dan

penyusunan data dalam website tersebut.

Pada Proyek Usaha Mandiri (PUM) yang berjudul “Pembuatan Website

Politeknik Negeri Jember Menggunakan Konsep Content Management System

(CMS)” Penulis akan menerapkan konsep Content Managament System (CMS)

pada website Politeknik Negeri Jember. Dimana dengan konsep CMS, website

dapat dengan mudah untuk diatur dan diorganisir tanpa harus mengubah susunan

keseluruhan website, bahkan hampir tidak memerlukan scripting lagi. Contoh

beberapa template yang menggunakan konsep CMS adalah Drupal

(www.drupal.org) dan Mambo (www.mambo.org). Penulis akan mencoba

membuat website dengan konsep CMS seperti halnya pada kedua contoh website

diatas dengan modifikasi untuk kalangan instansi dan perguruan tinggi, karena

selama ini diberbagai instansi dan perguruan tinggi masih jarang website yang

menggunakan konsep Content Managament System (CMS).

Dengan adanya PUM ini diharapkan dapat membantu kelancaran aktifitas

Politeknik Negeri Jember dan memperbaharui metode pembuatan website yang

sudah diterapkan sebelumnya.

1.2 Perumusan Masalah

Berdasarkan latar belakang masalah Pembuatan Website Politeknik

Negeri Jember menggunakan konsep Content management System (CMS), maka

penulis dapat merumuskan beberapa masalah antara lain:

1. kurangnya kemampuan website Politeknik Negeri Jember sebelumnya dalam

memberikan informasi tentang profil Politeknik Negeri Jember.

2. Halaman website masih bersifat statis dan untuk perubahan halaman dilakukan

dengan mengubah keseluruhan bentuk dari halaman tersebut.

3. Pengguna masih merasa kesulitan dalam pengelolaan situs Politeknik Negeri

(4)

1.3 Tujuan dan Manfaat

Adapun tujuan dan manfaat dibuatnya Proyek Usaha Mandiri (PUM) yang

berjudul Pembuatan Website Politeknik Negeri Jember Menggunakan Konsep

Content management System (CMS) antara lain:

1.3.1 Tujuan

Tujuan dari kegiatan Proyek Usaha Mandiri (PUM) yang berjudul

Pembuatan Website Politeknik Negeri Jember Menggunakan Konsep Content

management System (CMS) adalah:

1. Membuat Desain Website Politeknik Negeri Jember

2. Membuat sistem informasi berbasis web dengan menggunakan metode

Content management System (CMS) .

3. Menerapkan Ilmu yang kita dapat di Politeknik Negeri Jember ini dan sebagai

bahan untuk mencapai kelulusan.

1.3.2 Manfaat

Manfaat dari kegiatan Proyek Usaha Mandiri (PUM) yang berjudul

Pembuatan Website Politeknik Negeri Jember Menggunakan Konsep Content

management System (CMS) antara lain:

1. Sebagai pengenal Politeknik Negeri Jember pada masyarakat umum yang

berbasis internet.

2. Memberikan kemudahan pada user untuk mengelola dan mengatur websitenya

tanpa mengubah kaseluruhan bentuk dari website tersebut.

(5)

II. TINJAUAN PUSTAKA

2.1 Website

Menurut Sutarman (2003) Website merupakan alamat URL yang

berfungsi sebagai tempat penyimpanan data informasi dengan berdasarkan topik

tertentu. Yang biasanya berisi tentang apa dan siapa dari perusahaan atau instansi

atau organisasi pemiliki website tersebut.

Prorses pembuatan website pada umumnya dimulai dengan menyusun

halaman web. Berbagai jenis perangkat penyususun (authoring tools) dibuat

khusus untuk keperluan itu, fitur utama authoring tool halaman web biasanya

berupa menu yang memudahkan atau mengotomatis penulisan tag-tag HTML

(Hypertext Markup Language) ( Andy,2002 ).

2.2 Elemen Desain Grafis

Desain grafis khususnya halaman-halaman web terdiri dari beberapa

elemen sebagai berikut:

1. Teks adalah bagian paling utama untuk menampilkan informasi. Tujuan

pengguna mengunjungi website adalah untuk membaca informasi yang ada di

dalamnya.

2. Grafik dan image adalah elemen yang dapat membantu menjelaskan

informasi. Dengan penggunaan grafik maupun image, orang lebih muda

memahami suatu pesan. Grafik dapat dibuat dengan draw program atau image

dapat dibuat dengan paint program yang juga dapat memanipulasi sebuah

gambar.

3. Animasi merupakan sarana untuk menampilkan informasi dengan baik.

Animasi dapat dibuat misalnya dengan Macromedia flash.

4. Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan

animasi serta memberi kenyamanan bagi pengguna yang mendengarkan.

Interactive link dapat menggunakan tombol yang berupa teks, simbol,

grafik, maupun image. Interactive link menggunakan gambar dapat lebih muda

(6)

2.3 Metode

Website yang dikembangkan bersifat dinamis sehingga memerlukan

metode link yang digunakan pada kelas dan object.

Pada kelas dan object, metode link digunakan untuk menghubungkan

dengan halaman tertentu. Metode link yang terdapat pada kelas dan object image

digunakan untuk menghubungkan dengan halaman tertentu untuk yang berisi

penjelasan lebih rinci dari image tersebut. Image yang dimaksud di sini dapat

berupa gambar bitmap yang dapat berasal dari pembuatan gambar dengan vector,

bitmap, maupun hasil scan suatu foto.

Pada kelas & object banner, metode link digunakan untuk menghubungkan

dengan halaman tertentu yang dapat digunakan sebagai sarana promosi internal,

maupun promosi untuk pihak dari luar. (Sutopo, 2002:180)

2.4 Konsep Desain Grafis

Suatu desain apapun, misalnya web, brosur, majalah, buku dan lain-lain

dibuat dengan memperhatikan desain grafis sebagai berikut:

1. Komunikatif. Prinsip berhubungan dengan coorporate identity, isi pesan serta

audiens. Desain web untuk media berita seperti koran dan lain-lain tidak sama

dengan desain web untuk site yang menampilkan karya seni. Web yang

ditujukan untuk anak muda tidak sama dengan web yang ditujukan untuk

orang dewasa, contohnya anak-anak akan sulit membaca huruf dengan huruf

yang banyak variasi. Semua elemen desain yang ditempatkan di halaman web

harus memiliki makna tidak hanya untuk mengisi ruangan.

2. Estetis. Desain web yang tidak memperhatikan keindahan biasanya jarang

dukunjungi oleh pengguna, karena pengguna hanya mengunjungi web tersebut

sekali saja. Walaupun demikian terdapat desain web yang tidak memerlukan

keindahan dengan alasan tertentu, misalnya nama sudah terkenal sehingga

tampilan apapun bentuknya tidak mempengaruhi audiens. Keindahan suatu

tampilan web akan menarik perhatian serta selalu diingat oleh pengguna.

3. Ekonomis. Desain web harus memperhatikan faktor ekonomis dalam arti

(7)

walaupun secara estetis memenuhi selera, tetapi mengakibatkan pengunjung

memerlukan waktu yang lama untuk membuka halaman tersebut.

(Sutopo, 2002:183)

2.5 Macromedia Dreamweaver

Menurut Sutarman (2003) Dreamweaver adalah program desain halaman

web yang dibuat oleh Macromedia. fitur-fitur penting yang dimilikinya antara lain

adalah tool layout WYSIWYG, SiteMap, DHTML (Dynamic hypertext markup

language), CSS (Cascading Style Sheet), dan FTP (File Transfer Protocol)

Macromedia Dreamweaver adalah salah satu software web generator yang

diperuntukkan bagi semua tingkatan level. mulai dari pemula sampai programmer

kelas kakap. hal itu ditunjukan dengan tersedianya objek-objek yang langsung

bisa ditempelkan dalam web. Sebuah solusi untuk merangkul pengguna dengan

kemampuan web programming yang sewajarnya.

Dan untuk kalangan profesionalpun, Dreamweaver tetap bisa

memamerkan keperkasaanya, baik untuk desain web ataupun pemrograman web.

Software yang dipasarkan dengan harga kira-kira US $67.98 ini, memang sangat tepat untuk digunakan oleh kalangan profesional, industri ataupun bisnis, akan

tetapi bukan pilihan yang tepat jika hanya digunakan untuk kepentingan personal

mengingat harganya yang cukup mahal.

(http://www.pintunet.com/lihat_opini.php)

2.6 Apache

Apache adalah web server yang bersifat open source, dan digunakan lebih

dari 2/3 web server didunia. Unggul bukan hanya karena gratis, Apache

merupakan web server yang tangguh, mudah konfigurasinya, dan mendukung

banyak bahasa pemrograman berbasis web Apache mendukung modul sehingga

kita bisa membuat modul-modul sendiri untuk memperlakukan request atas web

server kita.

Sebagai contoh, kita bisa membuat apache sebuah file sebelum dikirim ke

browser dan lain sebagainya. Sifat open source pada apache, memungkinkan

(8)

dari segi pengembangan dan keamanan mendapat beberapa keliebihan. Apache

memang terfokus pada sistem operasi linux, tetapi apache juga menyediakan

paket untuk windows. Untuk windows biasanya dirangkai dengan Php dan Mysql

yang membentuk Phptriad. Apache yang banyak digunakan adalah versi 1.3

meskipun sekarang Apache sudah versi 2.0.

(http://www.pintunet.com/lihat_opini.php)

2.7 HTML (Hypertext Markup Language)

HTML (Hipertext markup language) adalah suatu bahasa yang digunakan

untuk menulis halaman web. HTML dirancang untuk digunakan tanpa tergantung

pada suatu platform tertentu (platform independent) Dokumen HTML adalah

suatu dokumen teks biasa dan disebut markup language karena mangandung

tanda-tanda (tag) tertentu yang digunakan untuk menentukan tampilan suatu teks

dan tingkat kepentingan dari teks tersebut dalam suatu dokumen.

Pada dokumen HTML yang termasuk sistem hypertext, kita tidak harus

membaca dokumen tersebut secara urut dari atas kebawah atau sebaliknya tetapi

kita dapat menuju pada topik tertentu secara langsung menggunakan teks

penghubung yang akan membawa anda ke suatu topik dokumen lain secara

langsung (Sutarman, 2003:47)

HTML merupakan pengembangan dari standar pemformatan dokumen

teks yaitu SGML (Standart Generalized Markup Language). Sejak awal

perkembangan sampai sekarang ini telah tersedia bermacam-macam level (versi)

HTML, HTML 1.0, HTML 2.0, HTML 3.0, HTML 4.0.

Perbedaan HTML dengan dokumen lain adalah HTML dapat memberikan

suatu format seperti bentuk tebal, miring, form, list, tabel sedangkan dokumen

teks biasa tidak bisa. Dokumen HTML bisa mengandung suatu link (hubungan) ke

bagian dalam dokumen tersebut atau ke dokumen

Penandaan dilakukan dengan memberikan tag, misalnya pada HTML

untuk mengaktifkan huruf tebal (bold), tag-nya adalah <bold> sedangkan untuk

mengaktifkannya adalah </bold>. Bila anda sudah sedikit mengenal HTML, maka

akan lebih mudah memahami bahasa-bahasa lainnya seperti XML.

(9)

2.8 PHP

PHP adalah salah satu bahasa Server-Side yang didesain khusus untuk

aplikasi web. PHP dapat disisipkan diantara bahasa HTML karena bahasa Server-

side, maka bahasa PHP akan di eksekusi di server, sehingga yang dikirimkan ke

browser adalah hasil jadi dalam bentuk HTML, dan kode PHP tidak akan terlihat

(Sutarman,2002:108).

Menurut Suraski dalam Sutarman (2002) PHP merupakan bahasa yang

mudah dibuat. Notepad merupakan editor teks yang biasa digunakan. Dan juga

dapat dibuat dengan editor yang lain seperti PHPed, UltraEdit, Crimson Editor.

Fungsi-funsi yang ada di PHP tidak case sensitve tetapi variabelnya case sensitive

(membedakan huruf besar dan kecil). Ada tiga cara untuk menuliskan scrip PHP

agar scrip dapat digunakan, yaitu:

1. <?

3. <SCRIPT LANGUAGE=”php”>

Script PHP

</SCRIPT>

pemisah antara intruksi adalah titik-koma (;) dan untuk membuat atau menambah

komentar, standart penulisan adalah

/* komentar */

// komentar

# komentar.

2.9 MySQL

Menurut Sutarman (2002) MySQL termasuk jenis RDBMS (Relational

Database Management System). Sehingga istilah seperti table, baris, dan kolom

tetap digunakan dalam MySQL. Pada MySQL sebuah database mengandung satu

(10)

SQL, pada umumnya informasi tersimpan dalam tabel-tabel yang secara logik

merupakan struktur dua dimensi yang terdiri atas baris-baris data (row atau

record) yang berada dalam satu atau lebih kolom. Baris pada table sering disebut

sebagai instance dari data sedangkan kolom sering disebut sebagai attributes atau

field. MySQL mengenal beberapa tipe data field, yaitu: • Tipe data numerik

Tipe data numeric dibedakan dalam dua macam kelompok, tipe data

integer dan tipe data floating point. Tipe data integer untuk data bilangan bulat,

tipe data floating point untuk bilangan desimal. Tipe data numerik selengkapnya

pada tabel di bawah ini :

(-28)-127 atau (0—255)

(-32768)-32767 atau (0-65535)

(-3888608)-8388607 atau 0-16777215)

-2147683648)-(2144768367) atau

(11)

• Tipe data String

Yang termasuk dalam Tipe data String adalah tipe-tipe data berikut:

Tipe data Kisaran nilai

Maksimum 65535 character

Maksimum 64 elemen

Tabel 2. tipe data string

• Tipe data tanggal

Untuk data tanggal dan waktu (jam) tersedia tipe-tipe data field sebagai berikut :

Tipe data Kisaran nilai

DATETIME

DATE

TIMESTAMP

TIME

YEAR

1000-01-01 00:00 TO ‘9999-12-31

23:59:59’

1000-01-01’ TO ‘9999-12-31

1970-0101 00:00:00’-2037

-838:59’ TO ‘838:59:59:59’

1901-2155

_{Tabel 3. tipe data tanggal}

3.11 Content management System (CMS)

CMS ( Content Managament System ) adalah suatu alat yang dapat

memusatkan kemampuan teknis dan menyebarkan kemampuan non teknis kepada

anggota tim untuk membuat, mengubah, mengelola dan mem-publish sejumlah isi

website seperti teks, gambar, animasi, suara. Dengan aturan, proses dan alur kerja

yang sudah baku sehingga website dapat terlihatsesuai keinginan

(12)

III. METODE PENELITIAN

3.1 Tempat dan Waktu Penelitian

Tempat dan waktu penelitian dilakukan pada bulan desember sampai

dengan selesai di Politekni Negeri Jember.

3.2 Alat dan Bahan Penelitian

Dalam penelitian ini dibutuhkan beberapa bahan dan alat sebagai

pendukung dalam pembuatan Website Politeknik Negeri Jember menggunakan

metode CMS (Content Management System).

3.2.1 Alat

Alat-alat yang dibutuhkan dalam pembuatan program ini ada dua jenis, yaitu

perangkat keras dan perangkat lunak seperti yang dijabarkan dibawah ini.

a. Perangkat Keras

Perangkat keras yang digunakan dalam pembuatan program ini adalah satu

unit komputer dengan spesifikasi sebagai berikut :

1. Processor Intel Pentium 2.6 GHz.

2. RAM 256 MB.

3. Motherboard Asus P4V8X-X.

4. Harddisk Maxtor 80 GB.

5. Monitor Daewoo 17 Inch.

6. Mouse dan Keyboard.

7. Floppy Disk 1,44 MB.

8. CD RW Samsung 52 X.

b. Perangkat Lunak

Perangkat lunak yang digunakan dalam website POLIJE adalah sebagai

berikut:

1. Aplikasi Macromedia Dreamweaver 8 .

2. Aplikasi Adobe Photoshop CS.

3. Aplikasi Macromedia Fireworks 8

(13)

5. Apache2Triad.

6. Microsoft Word 2003

3.2.2 Bahan

Bahan – bahan yang diperoleh dari tempat penelitian yang digunakan

dalam pembuatan program ini berupa data – data content yang diperlukan dalam

pembuatan website Politeknik Negeri Jember dengan metode CMS (Content

Management System).

Pengumpulan Kebutuhan

Konstruksi Prototipe

Menggunakan Prototipe

Revisi dan Perbaikan Prototipe

Evaluasi Prototipe

3.3 Metode Penelitian

Metode yang akan digunakan pada Proyek Usaha Mandiri (PUM) ini

adalah metode prototype yaitu proses yang digunakan untuk membantu

pengembang perangkat lunak dalam membentuk model dari perangkat lunak yang

harus dibuat. Menurut Pressman (1992), metode ini memiliki beberapa tahap yaitu

(14)

Penjelasan tahap-tahap penelitian ini adalah sebagai berikut :

a.TahapPengumpulan Kebutuhan

Tahap ini dimulai dengan mengumpulkan data-data yang dibutuhkan. Data

data yang dikumpulkan berdasarkan kebutuhan website Politeknik Negeri Jember

dan dengan pertemuan beberapa dosen dan karyawan Politeknik Negeri Jember

untuk menentukan kebutuhan website tersebut.

b. TahapKonstruksi Prototype

Pembuatan sistem dilakukan dengan membuat prototype sistem awal yang

disesuaikan dengan keinginan dan kesepakatan ketika menentukan kebutuhan

dasar sistem. Dalam hal ini pembuat sistem harus memiliki kemampuan dan

pengetahuan dan memilih alat atau software yang digunakan. Tahap ini umumnya

memerlukan waktu beberapa hari hingga beberapa minggu tergantung pada

ukuran dan kompleksitas dari sistemnya. Pada tahap ini pembuat sistem

menggunakan sitemap dan perancangan relasi antar tabel dalam database

berdasarkan modul-modul yang telah ditentukan. Hasil desain akan digunakan

untuk membuat prototype awal dari Website Politeknik Negeri Jember dengan

menggunakan metode CMS (Content Managemet System).

Sitemap Website Politeknik Negeri Jember: • Halaman Utama

♦ Halaman Menu

¾ Halaman Artikel dan Profil

Halaman Daftar Artikel

Halaman Tambah Artikel

Halaman Ubah Artikel

Halaman Hapus Artikel

¾ Halaman Berita dan Informasi

Halaman Daftar Berita

Halaman Tambah Berita

Halaman Ubah Berita

Halaman Hapus Berita

¾ Halaman Hak Akses Modul

(15)

¾ Halaman Konfigurasi Menu

Halaman Daftar Menu

Halaman Tambah Menu

Halaman Ubah Menu

Halaman Hapus Menu

Halaman Konfigurasi Utama

¾ Halaman Kredit Website

Halaman Daftar Kredit

Halaman Tambah Kredit

¾ Halaman Upload Berkas

Halaman Daftar Upload

Halaman Tambah Upload

Halaman Ubah Upload

Halaman Hapus Upload

¾ Halaman Aktivasi

Halaman Konfigurasi Hak Akses

Halaman Daftar Pengguna

Halaman Tambah Pengguna

Halaman Ubah Pengguna

Halaman Hapus Pengguna

c. Tahap Menggunakan Prototype

Pada tahap ini sebagai pemakai sistem adalah Staff pengajar dan

Mahasiswa Politeknik Negeri Jember. Staff dan Mahasiswa mengkoreksi website

tersebut dari segi kemampuan akses website, modul-modul yang dapat digunakan

atau perlu diperbaiki, data-data yang perlu ditambahkan dalam modul tersebut dan

broken links yang kemudian didiskusikan kembali untuk dilakukan

(16)

d.TahapRevisi dan Perbaikan Prototype

Pada tahap ini pembuat sistem memodifikasi sistem yang telah dibuat

untuk memasukkan perubahan yang diinginkan oleh Staff Pengajar dan

Mahasiswa Politeknik Negeri Jember. Tahap revisi dan perbaikan prototype

diulang secara terus menerus hingga prototype sesuai dengan yang diharapkan

oleh pengguna sistem Staff Pengajar dan Mahasiswa Politeknik Negeri Jember.

e.Tahap Evaluasi Prototype

Pada tahap ini evaluasi prototype dan program yang sudah jadi dilakukan

oleh Staf Pengajar dan Mahasiswa Politeknik Ngeri Jember. Apabila dalam

evaluasi terjadi kekurangan, kesalahan, maka desain dan program akan diperbaiki

(17)

IV. HASIL DAN PEMBAHASAN

4.1. Pengumpulan Kebutuhan

Pengumpulan kebutuhan dilakukan dengan diskusi bersama antara Staff

dan Karyawan PT. PLN (PERSERO) APJ JEMBER. untuk mengumpulkan

data-data yang diperlukan dalam pembuatan Sistem Informasi Tagihan Rekening PT.

PLN (PERSERO) APJ JEMBER berbasis Webt, data – data yang dibutuhkan

antara lain :

1. Data Modul yang dibutuhkan dalam pembuatan website. Meliputi pengaturan

website, pengaturan content website, pengaturan berita dan artikel, pengaturan

pengguna dan hak akses, pengaturan Jurusan dan Program Studi.

2. Data Artikel untuk menampilkan Profil Politeknik Negeri Jember. Dapat diisi

oleh user, namun yang memiliki wewenang untuk publikasi adalah

Administrator

3. Data Berita yang terdiri atas berita seputar POLIJE dan berita Informasi dan

Teknologi yang dapat diinputkan oleh user yang memiliki hak akses. User yang

memiliki akses terhadap konfigurasi Berita maka dapat mengatur publikasi

halaman berita tersebut.

4. Data Pengguna, terdiri atas pengguna umum , dosen, mahasiswa dan

Administrator dengan hak akses content yang telah ditentukan.

5. Data Jurusan dan Program Studi yang digunakan untuk relasi dengan

pengguna.

6. Data detail pengguna, dengan beberapa kondisi, jika dosen maka ditampilkan

Curriculum Vitae, Data Jurusan, data Program Studi, NIP, Pendidikan, Riset

dan Karya Ilmiah, Seminar, Simposium dan Workshop. Sedangkan untuk

Mahasiswa maka hanya ditampilkan Data Jurusan, Program Studi dan NIM.

Kelemahan dari website Politeknik Negeri Jember sebelumnya adalah data

yang diinputkan masih statis, sehingga untuk perubahan data harus merubah dari

HTML (Memerlukan pengetahuan lebih tentang scripting). Oleh karena itu

website ini dibuat untuk mepermudah pengguna dalam mengatur website secara

(18)

website tersebut. Website dibuat user-friendly sehingga pengoprasian dapat lebih

mudah dan menghemat waktu.

4.2. Konstruksi Prototype

Konstruksi atau desain awal dari pembuatan sistem informasi ini

dilakukan dengan menggunakan :

4.2.1 Penentuan Modul yang akan dibuat dan tablenya dalam database

Berikut ini modul-modul yang dibutuhkan dengan prototype tabelnya:

1. Konfigurasi Utama - Digunakan untuk konfigurasi halaman website.

a. Tabel Konfigurasi_utama

b. Tabel User

2. Berita – Digunakan untuk konfigurasi berita

a. Tabel Berita

b. Tabel Berita_type

c. Tabel User

3. Artikel – Digunakan untuk konfigurasi artikel

a. Tabel Halaman

b. Tabel Sub_menu

c. Tabel User

d. Tabel Upload

4. Menu – Digunakan untuk konfigurasi menu

a. Tabel Modul_menu

b. Tabel Sub_menu

c. Tabel Menu

d. Tabel User

5. Pengguna – Digunakan untuk konfigurasi pengguna

a. Tabel User

b. Tabel User_admin

c. Tabel User_detail

d. Tabel User_detail_akademik

e. Tabel Jurusan

f. Tabel Program_studi

(19)

a. Tabel Jurusan

7. Program Studi – Digunakan untuk master Program Studi

a. Tabel Program_studi

8. History – Digunakan untuk history pembuatan website

a. Tabel History

b. Tabel User

9. Maintenance – Digunakan bila website dalam mode perbaikan

a. Tabel Maintenance

b. Tabel User

4.2.2 Pembuatan Relasi antar table ( Normalisasi Tabel )

Terlihat adanya duplikasi data karena masing masing modul membutuhkan

tabel dan data yang sama. Untuk itu diperlukan normalisasi dalam pembuatan

tabel tersebut. Dari hasil normalisasi yang dilakukan maka berikut ini adalah hasil

tabel untuk dibuat databasenya:

1. Tabel berita

Nama Field Attribut Keterangan

Kode_berita Varchar(100) Primary Key

Tipe_berita Varchar(5)

Isi_berita Text

Author Varchar(20)

Tanggal Varchar(50)

Stat1 Tinyint(1)

Stat2 Tinyint(1)

Stat3 Tinyint(1)

Stat4 Tinyint(1)

(20)

2. Tabel berita_tipe

Kode_tipe Varchar(100) Primary Key

Tipe_berita Varchar(5)

Tabel 5. buku_tamu

3. Tabel buku_tamu

Kode_bukutamu Varchar(5) Primary Key

Nama_pengirim Varchar(50)

Url_pengirim Varchar(50)

Komentar Text

Tanggal Varchar(25)

Tabel 6. buku_tamu

4. Tabel halaman

Kode_hal Varchar(50) Primary Key

Judul_hal Text

Isi_hal Text

Kode_upload Varchar(5)

Tabel 7. halaman

5. Tabel history

Kode_his Varchar(10) Primary Key

Nama_his Varchar(30)

Isi_his Text

tanggal Varchar(50)

(21)

6. Tabel jurusan

Kode_jurusan Varchar(5) Primary Key

Nama_jurusan Varchar(25)

Keterangan Text

Tabel 9. jurusan

7. Tabel konfigurasi_utama

Logo Varchar(10) Primary Key

Judul Text

Slogan Text

Alamat Text

Link1 Text

Link2 Text

Link3 Text

Tabel 10. konfigurasi_utama

8. Tabel maintenance

Tanggal Varchar(50) Primary Key

Isi_main Text

Status1 Tinyint(1)

(22)

9. Tabel menu

Kode_menu Varchar(10) Primary Key

Nama_menu Varchar(25)

Tempat Varchar(10)

Posisi_menu Int(11)

Tabel 12. menu

10. Tabel modul_menu

Kode_modul Varchar(10) Primary Key

Nama_modul Varchar(50)

Alias_modul Varchar(50)

Alamat_modul Text

Kode_akses Text

Tipe_modul Varchar(20)

Avatar Text

Tabel 13. modul_menu

11. Tabel pendidikan

Kode_uid Bigint(20) Primary Key

Kode_user Varchar(5)

Nama_institusi Text

Tahun_lulus Int(4)

(23)

12. Tabel program_studi

Kode_prodi Varchar(5) Primary Key

Kode_jurusan Varchar(5)

Nama_prodi Varchar(25)

Keterangan Text

Tabel 15. program_studi

13. Tabel riset_seminar

Kode_uid Bigint(20) Primary Key

Kode_user Varchar(5)

Riset Text

Seminar Text

Tabel 16. riset_seminar

14. Tabel submenu

Kode_sub Varchar(50) Primary Key

Nama_sub Varchar(50)

url Varchar(150)

Target Varchar(10)

Kode_menu Varchar(50)

Penempatan_sub Varchar(50)

(24)

15. Tabel upload

Kode_upload Varchar(5) Primary Key

Tipe_upload Varchar(5)

Nama_upload Varchar(25)

Alamat_upload text

Tabel 18. upload

16. Tabel user

Kode_user Varchar(10) Primary Key

Nama_user Varchar(50)

Kata_kunci Varchar(50)

Kode_admin Text

Aktivasi Tinyint(1)

Tabel 19. user

17. Tabel user_admin

Kode_admin Varchar(5) Primary Key

Tipe_admin Char(2)

Tipe_administrasi Varchar(20)

Keterangan Varchar(80)

(25)

18. Tabel user_detail

Kode_pengguna Varchar(50) Primary Key

Nama_pengguna Text

Tgl_lahir Varchar(20)

Pekerjaan Text

Jenis_kelamin Char(1)

Alamat_email Varchar(50)

Alamat_rumah Text

No_telp Varchar(20)

No_hp Varchar(20)

Keterangan Text

Kode_akademik Varchar(1)

Tabel 21. user_detail

19. Tabel user_detail_akademik

Kode_detail Varchar(5) Primary Key

Kode_jurusan Varchar(5)

Kode_prodi Varchar(5)

NIP Varchar(10)

Pangkat_gol Text

Jabatan_fungsional Text

Bidang_keahlian Text

Pendidikan Varchar(1)

Riset Varchar(1)

Seminar Varchar(1)

(26)

4.2.3 Pembuatan Flowchart dari masing-masing modul

Konsep flowchart untuk proses data yang dibuat pada masing-masing

modul memiliki kesamaan alur. Berikut ini flowchart proses data:

Penjelasan dari Flowchart (Bagan 2): Mulai

Bagan 2. Flowchart Proses data pada Modul

1. Pertama kali client side akan mengirimkan variabel-variabel yang ada pada

form untuk dikirimkan ke server

2. Client side juga akan mengirimkan sesi sebagai kode pengenal inputan

3. Di server, akan di cek apakah sesi tersebut sesuai dengan data yang telah

dikirimkan

4. Apabila tidak terjadi validasi antara variabel yang dikirim dengan variabel

yang ada pada server, maka data tidak akan diproses.

5. Data yang tidak diproses dapat ditandai dengan error sesuai dengan

variabel yang tidak sesuai pada halaman client side.

6. Apabila terjadi validasi maka isi dari variabel yang telah dikirimkan akan

di proses kembali di server, kemudian dimasukkan kedalam tabel-tabel

yang sesuai pada database.

(27)

4.2.4 Pembuatan Desain Form dari modul-modul yang akan dibuat

Pembuatan halaman-halaman yang ada pada website dilakukan sesuai

dengan tabel-tabel yang ada dalam database. Berikut ini halaman-halaman yang

dibuat untuk Website Politeknik Negeri Jember :

1. Halaman Index

Halaman ini adalah halaman utama dari website Politeknik Negeri Jember.

2. Halaman Utama

Halaman ini berisikan menu utama dari pengguna yang telah terdaftar,

(28)

Apabila pengguna terebut adalah administrator maka seluruh menu yang

ada akan ditampilkan, namun bila pengguna bukan administrator, maka akan

ditampilkan menu berdasarkan hak aksesnya.

Gambar 2.1. Halaman Menu Utama dengan haka akses Administrator

Gambar 2.1. Halaman Menu Utama dengan spesifik hak akses

3. Halaman Konfigurasi berita (Modul Berita)

Halaman ini merupakan halaman konfigurasi berita, dimana halaman ini

dapat mengakses halaman List Berita, Tambah berita, Ubah berita, Dan Hapus

(29)

Untuk halaman Berita, terdapat kondisi jika tidak ada kode yang di

kirimkan ke server, maka akan ditampilkan halaman sebagai berikut. Gambar 3.1 Halaman List Berita

Gambar 3.2 Halaman Tambah Berita

(30)

Sedangkan jika pengguna menekan link judul berita, maka akan

ditampilkan halaman ubah berita.

Gambar 3.3 Halaman Ubah Berita setelah ada request kode

Gambar 3.4 Halaman Hapus Berita

4. Halaman Konfigurasi artikel (Modul Artikel)

Halaman ini merupakan halaman konfigurasi artikel, dimana halaman ini

dapat mengakses halaman List Artikel, Tambah Artikel, Ubah Artikel, Dan Hapus

(31)

Pada halaman tambah artikel terdapat dropdown Menu yang berfungsi

untuk ditampilkan pada menu di halaman utama, sesuai dengan penempatanya.

Untuk halaman Artikel, terdapat kondisi jika tidak ada kode yang di

kirimkan ke server, maka akan ditampilkan halaman sebagai berikut. Gambar 4.1 Halaman List Artikel

Gambar 4.2 Halaman Tambah Artikel

(32)

Sedangkan jika pengguna menekan link judul artikel, maka akan

ditampilkan halaman ubah artikel.

Gambar 4.4 Halaman Ubah Artikel tanpa request kode

Gambar 4.5 Halaman Ubah Artikel dengan request kode

Gambar 4.6 Halaman Hapus Artikel

5. Halaman Hak Akses Modul

Halaman ini merupakan halaman hak akses untuk setiap halaman yang ada

pad masing modul. Dalam halaman ini, setiap halaman pada

masing-masing modul memiliki hak akses. Yang nantinya dapat disesuaikan dengan haka

(33)

6. Halaman Menu (Modul Menu) Gambar 5 Halaman Hak Akses

Halaman ini berfungsi untuk menentukan peletakan menu pada halaman

utama. Terdapat link ke List menu, tambah menu, ubah menu dan hapus menu.

Gambar 6.1 Halaman List Menu

Gambar 6.2 Halaman Tambah Menu

(34)

7. Halaman Konfigurasi Utama

Halaman ini merupakan halaman konfigurasi utama dari Website. Dalama

halaman ini dapat ditentukan logo, judul website, slogan website, alamat website,

dan link yang ditampilkan di halaman utama. Tepatnya di bagian header, middle,

dan footer.

Gambar 7.1 Halaman Ubah Menu

Gambar 7.2 Bagian Header

Gambar 7.3 Bagian Middle

(35)

8. Halaman Upload File

Halaman ini merupakan halaman untuk upload file. Dalam Upload file

data yang diperbolehkan adalah, tipe gambar (JPG, JPEG dan GIF) dan tipe data

teks (DOC, TXT, PDF, HTML, XLS dan HTM).

Gambar 8.1 Halaman Upload File

(36)

9. Halaman History

Halaman ini merupakan halaman untuk mengisikan kredit ataupun history

pembuatan website.

(37)

Gambar 9.2 Halaman Tambah History

10. Halaman Aktivasi Pengguna

Halaman ini merupakan halaman untuk aktivasi pengguna, menginputkan

pengguna baru ataupun menonaktifkannya. Halaman ini terdiri atas halaman

Tambah Pengguna, Ubah Pengguna, Detail Pengguna, dan Hapus Pengguna.

Selain itu dalam halaman ini terdapat link ke daftar hak akses pengguna.

Gambar 10.1 Halaman List Pengguna

(38)

Gambar 10.2 Halaman Tambah Pengguna

Gambar 10.3 Halaman Ubah Pengguna

Gambar 10.4 Halaman Konfigurasi Hak Akses

(39)

4.2.5 Scripting dari modul untuk direlasikan dengan halaman utama dan databasenya

Berikut ini beberapa metode scripting dalam pembuatan Website

Politeknik Negeri Jember dengan konsep CMS (Content Management System)

1. Halaman scripting Login Pengguna (dims_acc.php)

<?

session_start();

if($_POST['aksi_login']=="hidupkan") {

require_once "dims_koneksi.php";

$nama_pakai = trim($_POST['nama_user']);

$pass_pakai = trim(md5($_POST['pass_user']));

$sql_pakai1 = "SELECT * FROM user WHERE

nama_user='$nama_pakai' AND kata_kunci='$pass_pakai'";

$qry_pakai1 = mysql_query($sql_pakai1);

$row_pakai1 = mysql_fetch_object($qry_pakai1);

$kode_sip = $row_pakai1->kode_user;

if (empty($kode_sip)) {

$_SESSION['warning_user'] = "User tidak ditemukan atau

Salah Password";

} else {

session_register("hak_akses");

session_register("nick_pengguna");

session_register("kode_pengguna");

$_SESSION["hak_akses"] = $row_pakai1->kode_admin;

$_SESSION["nick_pengguna"] = $row_pakai1->nama_user;

$_SESSION["kode_pengguna"] = $row_pakai1->kode_user;

}

(40)

unset($_SESSION['hak_akses']);

unset($_SESSION['nick_pengguna']);

unset($_SESSION['kode_pengguna']);

}

header("Location:../index.php");

?>

2. Halaman scripting Setting (dims_setting.php)

<?

function ubah_saja() {

print "<table width=100% border=0 cellspacing=0 cellpadding=0><tr>";

print "<th valign=bottom scope=col><div align=left class=aksi>";

print "<a href=index.php?section=".$_SESSION['section']."&sesi=lihat>Mode

Lihat</a>";

print " || <a href=index.php?section=".$_SESSION['section']."&sesi=ubah>Mode

Ubah</a>";

print "</div></th></tr></table>";

}

function logout_wassp() {

print "<center>Tanggal: ".date("d, M Y")."<br>";

print "Selamat Datang, ".$_SESSION['nick_pengguna']."<br>";

print "<a href=data_fungsi/dims_acc.php?aksi_login=matikan>+ Log Out

+</a></center>";

}

function sesi_simpan() {

$_SESSION["section"] = $_GET['section'];

$section = $_SESSION["section"];

}

function getFileExtension($str) {

$i = strrpos($str,".");

if (!$i) { return ""; }

$l = strlen($str) - $i;

$ext = substr($str,$i+1,$l);

(41)

function login_first() {

if (!isset($_SESSION['kode_pengguna'])) {

print "<form id=form1 name=gatel method=post

action=data_fungsi/dims_acc.php>";

print "<table border=0 cellspacing=4 cellpadding=0>";

print "<tr>";

print "<th width=82% valign=top scope=col><div align=right>";

print "<img src=avatar_load/user_login.gif width=22 height=22> </div>";

print "<div align=right></div></th><th width=18% scope=col><div

align=right>";

print "<input name=nama_user type=text class=verdana10 id=nama_user value=\"[

id_pengguna ]\" size=17 onfocus=hiding_user() />";

print "</div></th></tr><tr><th scope=col><div align=right><img

src=avatar_load/user_pass.gif width=22 height=22> </div></th><th scope=col><div

align=right>";

print "<input name=pass_user type=password class=verdana10 id=pass_user

value=\"[ password ]\" size=17 onfocus=hiding_pass() />";

print "</div></th></tr><tr><th scope=col> </th><th scope=col><div

align=left>";

print "<input type=submit name=Submit value=\"Log In\" class=verdana10 />";

print "<input name=aksi_login type=hidden id=aksi_login

value=hidupkan></div></th></tr>";

print "</table></form>";

}

function konfig_data() {

print "<th valign=bottom scope=col><div align=left class=aksi>";

print "<a href=index.php?section=".$_SESSION['section']."&sesi=lihat>Lihat Data</a>";

print " || <a href=index.php?section=".$_SESSION['section']."&sesi=tambah>Tambah

Data</a>";

print " || <a href=index.php?section=".$_SESSION['section']."&sesi=ubah>Ubah

Data</a>";

print " || <a href=index.php?section=".$_SESSION['section']."&sesi=hapus>Hapus Data

</a>";

(42)

}

function permission_denided() {

print "<th height=150 scope=col><span class=style2>";

print "Maaf Anda Tidak Punya Hak Akses pada Halaman ini <br />Silahkan LOG IN

Terlebih Dahulu<br /></span><br />";

print "<img src=avatar_load/no_priff.gif width=48 height=48 /></th></tr></table>";

}

?>

3. Halaman koneksi database (dims_koneksi.php)

<?

$userhost = "localhost";

$username = "dimas";

$userpass = "poltekjember";

$userdata = "polije";

$koneksi = mysql_connect($userhost,$username,$userpass);

if (!($koneksi)) {

print "Failed to connect";

die;

};

$database = mysql_select_db($userdata);

if (!($database)) {

print "Unable to search database";

die;

};

(43)

4. Halaman Index (index.php)

<?

//Memulai sesi

session_start();

//Definisi Top Halaman

define("DIMS_HEAD",true,true);

//Pemanggilan halaman koneksi

require_once "data_fungsi/dims_koneksi.php";

//Pemanggilan halaman fungsi

require_once "data_fungsi/dims_setting.php";

//Inisialisasi variable untuk halaman

$acc = "none";

//Seleksi konfigurasi utama

$sel1 = "SELECT * FROM konfigurasi_utama";

$querysel = mysql_query($sel1);

while ($row1 = mysql_fetch_object($querysel)) {

$_SESSION['dims_logo'] = $row1->logo;

$_SESSION['dims_judul'] = $row1->judul;

$_SESSION['dims_slogan'] = $row1->slogan;

$_SESSION['dims_alamat'] = $row1->alamat;

$_SESSION['dims_upper_link'] = $row1->link1;

$_SESSION['dims_middle_link'] = $row1->link2;

$_SESSION['dims_bottom_link'] = $row1->link3;

}

$_SESSION['dims_javascript'] = "data_fungsi/dims_kalender.js";

// Penentuan Jalur Themes

if (!isset($_SESSION['dims_themes'])) {

$_SESSION['jalur_themes'] = "data_themes/original/";

} else {

$_SESSION['jalur_themes'] = "data_themes/".$_SESSION['dims_themes']."/";

}

// Pemanggilan Fungsi Themes

require_once "data_fungsi/dims_theme_func.php";

// Pemanggilan Index Themes

require_once $_SESSION['jalur_themes']."index.php";

(44)

4.3. Penggunaan Prototype

Penggunaan Prototype dapat dijelaskan sebagai berikut :

a. Halaman Utama (index.php) digunakan untuk menampilkan berita terbaru dan

profil Politeknik Negeri Jember.

b. Halaman Sebelah kanan ditampilkan login pengguna. Jika login maka status

pengguna akan di simpan dalam session.

c. Pengguna yang tidak terdaftar hanya dapat melihat profil dan content yang

disediakan di menu.

d. Pengguna yang terdaftar dan aktif secara default dapat melihat berita secara

lengkap. Sejalan dengan perkembangan, pengguna yang memiliki hak akses

tertentu dapat membuka halaman lain sesuai dengan hak aksesnya. Misalkan

Halaman Aktivasi, pengguna yang memiliki hak akses ini maka dapat

mengatur aktivasi dari pengguna lain.

e. Pengguna yang terdaftar dapat mengubah informasi tentang personal. Jika

dosen maka dapat mengatur Riset dan Karya Ilmiah, Seminar, Simposium,

dan Workshop.

f. Pengguna yang memiliki hak akses Pengirim berita dapat mengirimkan berita

atau artikel, namun publikasi hanya dapat dilakukan oleh Administrator.

g. Administrator dapat mengatur keseluruhan data yang ada, termasuk content

dan modul-modulnya.

h. Administrator mengatur hak akses modul.

i. Administrator dapat mengubah konfigurasi website tersebut.

j. Data Dosen dan Mahasiswa Dapat ditampilkan dan dilihat oleh seluruh

pengguna,

Dari hasil penggunaan prototype program oleh pengguna didapatkan hasil

bahwa program masih kurang sesuai. Ketidaksesuaian terletak pada desain

halaman, karena website ini dikhususkan bagi staff, karyawan dan mahasiswa

Politeknik Negeri Jember, maka diperlukan sekuritas lebih tinggi, mengingat

(45)

Gambar 11. Kekurangan dalam Registrasi Pengguna

Gambar 12. Perbaikan Halaman Login

Berikut ini adalah gambaran tentang kekurangan halaman tersebut.

Ketidaksesuaian Menu pada Website tersebut diperbaiki oleh pembuat

sistem. Perbaikan dilakukan dengan merubah sistem website dimana dibuat

halaman tersendiri untuk login dan hanya administrator atau staff dan mahasiswa

Politeknik Negeri Jember yang dapat login untuk mengakses menu utama.

Berikut ini halaman yang telah diperbaiki.

Setelah program tersebut diterapkan, pembuat sistem mengkonfirmasikan

kepada pengguna sistem. Jika program belum sesuai dengan keinginan pengguna

sistem maka pembuat sistem akan merevisi program tersebut sesuai dengan

(46)

4.4 Evaluasi

Program yang telah direvisi dan diperbaiki serta telah sesuai dengan

pengguna sistem, maka program tersebut harus tetap dilakukan evaluasi terhadap

program yang ada untuk mengantisipasi kesalahan program dan

(47)

V. SIMPULAN DAN SARAN

5.1. Simpulan

Kesimpulan yang dapat diperoleh dari Proyek Usaha Mandiri (PUM) ini

adalah sebagai berikut :

1. Website Politeknik Negeri Jember dapat dibuat dengan bahasa pemrograman

PHP (Pre Hypertext Processor) berisi Profil dan Berita tentang Politeknik

Negeri Jember.

2. Sistem Informasi yang terdapat pada Website Politeknik Negeri Jember

disusun dengan menggunakan metode Prototyping dengan konsep CMS

(Content Management System) sehingga dengan menggunakan konsep ini,

dapat mempermudah pengguna dalam pengelolaan data (content) dari

website Politeknik Negeri Jember..

5.2. Saran

Adapun saran – saran yang dapat dikemukakan untuk membantu

kesempurnaan Website Politeknik Negeri Jember :

1. Dengan adanya keterbatasan dalam pengelolaan hak akses pengguna,

diharapkan dalam pengembangan website selanjutnya, peneliti dapat

menambah hak akses pengguna secara dinamis, tidak melalui database

2. Dengan adanya keterbatasan masalah dalam penelitian, diharapkan adanya

pengembangan dari sistem informasi yang ada agar sistem informasi

(48)

Gilmore, W. J. 2001. “A Programmer’s Introduction to PHP 4.0”. Springer - Verlag. New York

http://blogs.netindonesia.net/resha/articles/1684.aspx

http://id.php.net/manual/en/features.file-upload.php

http://www.pintunet.com/lihat_opini.php

http://www.tutorial.or.id/web/index.html