buku panduan (manual book) : situs...

22

Upload: nguyendan

Post on 06-Aug-2019

227 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya
Page 2: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-1-

PERANCANGAN DAN PEMBUATAN

SITUS KEMAHASISWAAN

STMIK JAKARTA STI&K DENGAN MENGGUNAKAN

MACROMEDIA DREAMWEAVER 8.0,

PHP dan MYSQL.

I. Pengantar

Pesatnya perkembangan teknologi informasi dan komunikasi

memungkinkan pengembangan layanan informasi yang lebih

baik dalam suatu institusi pendidikan. Di lingkungan perguruan

tinggi, dimana juga seharusnya dapat memanfaatkan sarana ini

sebagai pendukung penyelenggaraan pendidikan sehingga

perguruan tinggi dapat menyediakan layanan informasi yang

lebih baik kepada pihak terkait. Salah satu bagian yang ada di

perguruan tinggi adalah mahasiswa, oleh karena itu disetiap

perguruan tinggi ada suatu bidang yang menangani tentang

kemahasiswaan. Pada kegiatan bidang kemahasiswaan tersebut

maka disaajikan informasi bidang kemahasiswaan dalam bentuk

website. Pembuatan struktur navigasi pada situs ini digunakan

untuk menggambarkan secara garis besar isi dari seluruh situs

dan bagaimana hubungan antara content tersebut. Struktur

navigasi situs ini adalah struktur navigasi campuran. Dengan

membuat struktur navigasi ini dapat memberikan petunjuk

kepada user sebagai pedoman dalam mencari informasi yang ada

dalam situs. Pembuatan struktur navigasi situs ini sangat

membantu nantinya ketika akan membuat rancangan seluruh

halaman situs. Dalam membuat situs kemahasiswaan, struktur

navigasi dibagi menjadi tiga bagian, yaitu:

a. Area Publik :

Informasi yang ditampilkan dapat diakses secara umum baik

yang menjadi member atau tidak. Sehingga pengunjung bisa

melihat informasi antara lain Profil Bidang Kemahasiswaan dan

Lembaga Kemahasiswaan yang ada di STMIK JAKARTA

STI&K, Berita yang berisi tentang kegiatan, lomba dan seminar.

b. Area Member (Anggota Lembaga Kemahasiswaan) :

Digunakan bagi anggota lembaga kemahasiswaan yang telah

melakukan registrasi dan login sekaligus dapat mengupload

kegiatan terbaru.

c. Area Admin : Digunakan bagi admin untuk mengatur data-data yang telah ada.

Admin dapat menambah dan menghapus data-data yang ada

pada database kemahasiswaan.

II. Struktur Navigasi

2.1. Struktur Navigasi Admin

Page 3: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-2-

Dalam membuat situs bidang kemahasiswaan ini dirancang

struktur navigasi yang terbagi menjadi tiga bagian area, yaitu

area publik , area member dan admin. Pada struktur navigasi

admin ini digunakan oleh admin yang mengatur kinerja situs

utama. Pada area ini admin harus login terlebih dahulu untuk

dapat masuk ke area pengaturan situs. Admin dapat

memasukkan berita yang terbaru tentang bidang kemahasiswaan

serta dapat melakukan perubahan atau menghapus terhadap

berita yang sebelumnya telah diinput. Selain itu admin juga

dapat mengatur member yang mendaftar pada situs ini serta

dapat melihat informasi member dan melakukan hapus member.

Login Admin

Member Berita Kegiatan Beasiswa

Tambah Lihat Hapus Tambah Edit Lihat Hapus Lihat Hapus Lihat Hapus

Laporan LogOut

Gambar-1 : Struktur Navigasi Admin

2.2 Struktur Navigasi Member

Pada area member dapat digunakan bagi member yang telah

registrasi dan login. Member dapat mengedit profil dari

website, membuat website mini lembaga kemahasiswaan yang

informasinya terdiri dari profil lembaga kemahasiswaan dan

kegiatan lembaga tersebut. Area member diutamakan untuk

mahasiswa aktif yang hendak mempromosikan KM atau UKM

member melalui fasilitas website mini yang memudahkan

dalam memperkenalkan KM atau UKM member kepada

mahasiswa agar dapat melakukan aktifitas atau maintenance

website tersebut.

Page 4: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-3-

Login Member

Data Pribadi Profil UKM/KM

Update

Kegiatan

Tambah

Ubah Password Ubah Profil UKM/KM Logout

Edit Hapus Lihat Hapus UbahSimpan

Gambar-2 : Struktur Navigasi Member

2.3 Struktur Navigasi User

Pada area publik informasi yang ditampilkan dapat diakses

secara umum baik yang menjadi member atau tidak. Sehingga

pengunjung bisa melihat informasi seperti berita dari bidang

kemahasiswaan terbaru, kegiatan lembaga kemahasiswaan

hingga informasi beasiswa.

Beranda

Profil

Gallery

Berita

Visi & Misi

Pendaftaran Beasiswa Form Beasiswa

Keterangan

Tugas

Pengurusan

Beasiswa

Pembinaan

mahasiswa Baru

Penegakan

Disiplin mhasiswa

BEM

GITA

PASUATIKA

PALATIKA

PO

TUMORITIS

KOMPUTIKA

SJFC

VOSTA

BOMBASTIK

Tae Kwon Do

Lomba

Seminar

Foto

Lembaga

Kemahasiswaan

LDK

alHikmah

BPM

Lokasi kami

Login Member

Keterangan

Kegiatan Lembaga Keterangan

Gambar-3 Struktur Navigasi User

III. Tampilan Output Situs

Dalam Situs Kemahasiswaan, ditampilkan output dari halaman

beranda, profil, berita, gallery, lembaga kemahasiswaan, lokasi

hingga kegiatan UKM,KM.

3.1 Tampilan Output Halaman Beranda

Page 5: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-4-

Gambar-4 Tampilan Output Beranda

3.2 Tampilan Output Halaman Profil

Dalam halaman profil terdapat halaman Visi,misi dan Tugas.

3.2.1 Tampilan Output Halaman Visi Misi

Gambar-5 Tampilan Output Halaman Visi Misi

3.2.2 Tampilan Output Halaman Tugas

Dalam Halaman terdapat submenu pengurusan beasiswa,

pembinaan mahasiswa baru dan penegakkan disiplin mahsiswa.

3.2.2.1 Tampilan Output Halaman Pengurusan Beasiswa

Page 6: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-5-

Gambar-6 Tampilan Output Pengurusan Beasiswa

3.2.2.2 Tampilan Output Halaman Pembinaan Mahasiswa

Baru

Gambar-7 Tampilan Output Pembinaan Mahasiswa Baru

3.2.2.3 Tampilan Output Halaman Penegakkan Disiplin

Mahasiswa

Page 7: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-6-

Gambar-8 Tampilan Output Penegakkan Disiplin Mahasiswa

3.2.2.4 Tampilan Output Halaman Berita

Dalam Halaman berita terdapat halaman lomba dan seminar.

3.2.2.4.1 Tampilan Output Halaman Lomba

Gambar-9 Tampilan Output Halaman Lomba

3.2.2.4.2 Tampilan Output Halaman Seminar

Page 8: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-7-

Gambar-10 Tampilan Output Halaman Seminar

3.2.2.5 Tampilan Output Halaman Gallery

Gambar-11 Tampilan Output Halaman Gallery

3.2.2.6 Tampilan Output Halaman Lembaga

Kemahasiswaan

Page 9: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-8-

Dalam Halaman BEM terdapat halaman LDK Al-Hikmah, PO,

KOMPUTIKA, TUMORITIS, SJFC, BOMBASTIK, VOSTA

dan Tae Kwon Do.

3.2.2.6.1 Tampilan Output Halaman BPM

Gambar-12 Tampilan Output Halaman BPM

3.2.2.6.2 Tampilan Output Halaman BEM

Page 10: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-9-

Gambar -13 Tampilan HalamanOutput BEM

3.2.2.6.3 Tampilan Output Halaman LDK Al – Hikmah

Gambar-14 Tampilan Halaman Output LDK Al-Hikmah

3.2.2.6.4 Tampilan Output Halaman PO

Page 11: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-10-

Gambar-15 Tampilan Halaman Output PO

3.2.2.6.5 Tampilan Output Halaman KOMPUTIKA

Gambar-16 Tampilan Halaman Output KOMPUTIKA

3.2.2.6.6 Tampilan Output Halaman TUMORITIS

Page 12: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-11-

Gambar-7 Tampilan Halaman Output TUMORITIS

3.2.2.6.7 Tampilan Output Halaman SJFC

Gambar-18 Tampilan Halaman Output SJFC

Page 13: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-12-

3.2.2.6.8 Tampilan Output Halaman BOMBASTIK

Gambar-19 Tampilan Halaman Output BOMBASTIK

3.2.2.6.9 Tampilan Output Halaman VOSTA

Gambar-20 Tampilan Output Halaman Output VOSTA

Page 14: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-13-

3.2.2.6.10 Tampilan Output Halaman Tae Kwon Do

Gambar- 21 Tampilan Halaman Output Tae Kwon Do

3.2.2.7 Tampilan Output Halaman GITA PASUATIKA

Gambar-22 Tampilan Halaman Output GITA PASUATIKA

Page 15: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-14-

3.2.2.8 Tampilan Output Halaman PALATIKA

Gambar- 23 Tampilan Halaman Output PALATIKA

3.2.3 Tampilan Output Halaman Lokasi

Gambar-24 Tampilan Output Halaman Lokasi

Page 16: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-15-

3.2.4 Tampilan Output Halaman Kegiatan UKM,KM

Gambar-25 Tampilan Output Halaman Kegiatan UKM/KM

3.2.5 Tampilan Output Halaman Member

Dalam Halaman Member terdapat button link data pribadi,

button link ubah password,button link kegiatan, button link

profil UKM/KM, button link ubah profil UKM/KM, dan button

link logout.

3.2.5.3 Tampilan Output Halaman Data Pribadi

Page 17: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-16-

Gambar-26 Tampilan Output Halaman Data Pribadi

3.2.5.4 Tampilan Output Halaman Ubah Password

Gambar-27 Tampilan Output Halaman Ubah Password

3.2.5.5 Tampilan Output Halaman Kegiatan

Gambar-28 Tampilan Output Halaman Kegiatan

Page 18: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-17-

3.2.5.6 Tampilan Output Halaman Profil UKM/KM

Gambar-29 Tampilan Output Halaman Profil UKM/KM

3.2.5.7 Tampilan Output Halaman Ubah Profil UKM/KM

Gambar-30 Tampilan Output Halaman Ubah Profil UKM/KM

Page 19: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-18-

3.2.6 Output Halaman Admin

Untuk masuk kedalam halaman admin maka admin harus login

terlebih dahulu,Dalam halaman admin terdapat button link

member, button link berita, button link beasiswa, button link

kegiatan, button link laporan dan button link logout.

3.2.6.3 Tampilan Output Login Admin

Gambar-31 Tampilan Output Halaman login admin

3.2.6.4 Tampilan Output Halaman Member

Gambar-32 Tampilan Output Halaman Member

3.2.6.5 Tampilan Output Halaman Berita

Page 20: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-19-

Gambar-33 Tampilan Output Halaman Berita

3.2.6.6 Tampilan Output Halaman Beasiswa

Gambar-34 Tampilan Output Halaman Beasiswa

3.2.6.7 Tampilan Output Halaman Kegiatan

Page 21: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-20-

Gambar-35 Tampilan Output Halaman Kegiatan.

3.2.6.8 Tampilan Output Halaman Laporan

Page 22: Buku Panduan (Manual Book) : Situs Bidangaqwamrosadi.staff.gunadarma.ac.id/Publications/files/2589/Manual+Book... · MACROMEDIA DREAMWEAVER 8.0, PHP dan MYSQL. I. Pengantar Pesatnya

Buku Panduan (Manual Book) : Situs Bidang Kemahasiswaan STMIK JAKARTA STI&K

-21-

Gambar-36 Tampilan Output Halaman laporan.

IV. Prosedur dan Menjalankan

Untuk mengetahui sejauh mana situs ini bekerja dengan baik

terhadap jaringan internet yang sebenarnya melakukan proses

upload situs ke penyedia layanan hosting dapat dilakukan.

Layanan hosting yang berbayar atau gratis memiliki kelebihan

masing-masing. Salah satu penyedia layanan hosting gratis

adalah www.000webhost.com yang memberikan layanan

hosting gratis situs yang telah menjadi member. Tetapi layanan

hosting ini memiliki keterbatasan terhadap file-file yang di

upload dan penggunaan script tertentu yang tidak diperbolehkan.

Hal ini yang membuat fungsi-fungsi tertentu dalam situs yang

ingin di upload tidak bekerja dengan seharusnya pada jaringan

internet yang sebenarnya. Prosedur upload situs pada layanan

hosting gratis www.000webhost.com adalah sebagai berikut :

1. Registrasi username dan password serta menentukan nama

domain yang diinginkan situs.

2. Setelah registrasi berhasil, lakukan login dengan memasukan

username dan password yang telah di registrasi.

3. Masuk ke bagian PhpMyAdmin untuk mengatur database

sesuai situs yang dibuat. Untuk keamanan akan diminta

username dan password tersendiri untuk mengakses database.

Buat database sesuai dengan database yang telah dibuat pada

situs yang ingin diupload.

4. Masuk ke bagian File Manager yang merupakan tempat

menampung seluruh file situs. Lakukan proses upload file

situs yang telah dibuat dari mulai file script, gambar atau

video yang mendukung tampilan dari situs.

5. Untuk melihat hasil dari situs yang telah di upload ketikan

pada browser nama domain yang telah didaftarkan pada

proses registrasi.

V. Penutup

Ahirnya dengan penjelasan dari buku manual (manual book) ini

diharapkan dapat memberikan pejelasan secara lebih rinci

tentang pemanfaatan dan penggunaan situs bidang

kemahasiswaan, STMIK Jakarta STI&K sehingga dapat

menjadi panduan dalam menjalankan aplikasi kemahasiswaan

ini. Terima kasih.