BAB IV

HASIL PRAKTEK KERJA LAPANG

5.1 Perancangan Website Prodi Pemanfaatan Sumberdaya Perikanan

Dalam Perancangan Sistem Informasi Program Studi Pemanfaatan
Sumberdaya Perikanan (PSP) berbasiskan website ini terdapat dua tahapan
perancangan pada basis data yang akan mengatur tentang manajemen data dan
perancangan pada website yang akan berperan dalam penyajian.
Perancangan Website pada Program Studi Pemanfaatan Sumberdaya
Perikanan dapat digambarkan seperti gambar aliran pada (Lampiran 1. Hierarki
dan Enterprise).
5.2 Proses Pembuatan Website
Proses pembuatan Sistem Informasi Program Studi Pemanfaatan
Sumberdaya Perikanan adalah menggunakan Software Macromedia Studio MX
2004 yang digunakan adalah Macromedia Dreamweaver MX 2004. Yang mana
Macromedia Dreamweaver MX 2004 digunakan untuk membuat website dengan
bahasa HTML (Hypertext Mark Lookup).
5.2.1

Penyusunan Folder
a. Buatlah folder dengan nama PSP dan di dalam folder tersebut
terdapat sub-folder yang terdiri dari:
- Data
1. kelembagaan
- Download
1. buku-ajar
2. buku-cetak
3. modul
- Images
1. binadesa-pesisir-pamekasan
2. foto-dosen-psp-ub
3. foto-pimnas-yogyakarta-2012
4. lokakarya-peisisir
5. mitc-its-surabaya-2012
6. open-house-tingkat-anak
7. pelatihan-rumpon-sampang
8. pengembara-ranukombolo
9. pimpi-ipb-bogor-2012
10. re-akreditasi-prodi-psp-fpik-ub
23

11. sulam-jaring-2012

5.2.2

Membuat Halaman jquery.js

a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New JSP.
b. Lalu Ketikan script berikut:

Gambar 1. jquery.js
c. Kemudian Save (simpan) dengan format nama jquery.js
5.2.3

Membuat Halaman script.js

a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New JSP.
b. Lalu Ketikan script berikut:

24

5.2.4

Gambar 2. script.js
c. Kemudian Save (simpan) dengan format nama script.js
Membuat Halaman style.css
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New CSS.
b. Lalu Ketikan script berikut:

Gambar 3. script.css
c. Kemudian Save (simpan) dengan format nama script.css
5.2.5

Membuat Halaman index.html

a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

25

5.2.6

Gambar 4. Script Halaman Utama

c. Kemudian Save (simpan) dengan format nama index.html
d. Tekan tombol F12, untuk melihat hasil (Lampiran 2. Beranda)
Membuat Halaman Profil Singkat
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 5. Script Profil PSP

c. Kemudian Save (simpan) dengan format nama profil-singkat-prodipsp.html
d. Tekan tombol F12, untuk melihat hasil (Lampiran 3. Profil PSP)
5.2.7

Membuat Halaman Staf Pengajar

a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

26

Gambar 6.script staf pengajar

c. Kemudian Save (simpan) dengan format nama staf-pengajar-dosen-

5.2.8

psp.html
d. Tekan tombol F12, untuk melihat hasil (Lampiran 4. Dosen PSP)
Membuat Halaman Mata Kuliah
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 7. Script Mata Kuliah

c. Kemudian Save (simpan) dengan format nama mata-kuliah-prodipsp.html
d. Tekan tombol F12, untuk melihat hasil (Lampiran 5. Mata Kuliah)
5.2.9

Membuat Halaman Laboratorium Penangkapan

a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

27

Gambar 8. Script Laboratorium Penangkapan

c. Kemudian Save (simpan) dengan format nama laboratoriumpenangkapan-psp-ub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 6. Penangkapan)
5.2.10 Membuat Halaman Laboratorium Pemetaan
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 8. Script Laboratorium Pemetaan

c. Kemudian Save (simpan) dengan format nama laboratoriumpemetaan-psp-ub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 7. Pemetaan)
5.2.11 Membuat Halaman Kegiatan Penalaran
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

28

Gambar 9. Script Kegiatan Penalaran

c. Kemudian Save (simpan) dengan format nama kegiatan-penalaranpsp-ub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 8. Penalaran)
5.2.12 Membuat Halaman Kegiatan Minat dan Bakat
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 8. Script Kegiatan Minat & Bakat

c. Kemudian Save (simpan) dengan format nama kegiatan-minat-pspub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 9. Minat dan Bakat)
5.2.13 Membuat Halaman Jurnal Mahasiswa
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

29

Gambar 9. Script Jurnal Mahasiswa

c. Kemudian Save (simpan) dengan format nama jurnal-mahasiswapsp-ub.html
d. Tekan tombol F12, untuk melihat (Lampiran 10.Jurnal Mahasiswa)
5.2.14 Membuat Halaman Lembaga Mahasiswa
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 10. Script Lembaga Mahasiswa

c. Kemudian Save (simpan) dengan format

nama

lembaga-

mahasiswa-psp-ub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 11. Lembaga)
5.2.15 Membuat Halaman Daftar Alumni
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New PHP.
b. Lalu Ketikan script berikut:

30

Gambar 11. Script Daftar Alumni

c. Kemudian Save (simpan) dengan format nama view-alumni.php
d. Tekan tombol F12, untuk melihat (Lampiran 12. Daftar Alumni)
5.2.16 Membuat Halaman Seminar & Lokakarya
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New PHP.
b. Lalu Ketikan script berikut:

Gambar 12. Script Seminar & Lokakarya

c. Kemudian Save (simpan) dengan format nama seminar-lokakaryapsp-ub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 13. Seminar)
5.2.17 Membuat Halaman Pelatihan Kursus
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New PHP.
b. Lalu Ketikan script berikut:

31

Gambar 13. Script Pelatihan Kursus

c. Kemudian Save (simpan) dengan format nama view-pelatihankursus.php
d. Tekan tombol F12, untuk melihat (Lampiran 14. Pelatihan Kursus)
5.2.18 Membuat Halaman Buku Cetak
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 15. Script Buku Cetak

c. Kemudian Save (simpan) dengan format nama buku-cetak-pspub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 16. Buku Cetak)
5.2.19 Membuat Halaman Buku Ajar
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

32

Gambar 16. Script Buku Ajar

c. Kemudian Save (simpan) dengan format nama buku-ajar-pspub.html
d. Tekan tombol F12, untuk melihat (Lampiran 17. Buku Ajar)
5.2.20 Membuat Halaman Modul
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 17. Script Modul

c. Kemudian Save (simpan) dengan format nama modul-psp-ub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 18. Modul)
5.2.21 Membuat Halaman Buku Jurnal Dosen
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

33

Gambar 18. Script Jurnal Dosen

c. Kemudian Save (simpan) dengan format nama jurnal-dosen-pspub.html
d. Tekan tombol F12, untuk melihat (Lampiran 19. Jurnal Dosen)
5.2.22 Membuat Halaman Penelitian
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 19. Script Penelitian Dosen

c. Kemudian Save (simpan) dengan format nama penelitian-dosenpsp-ub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 20. Penelitian)
5.2.23 Membuat Halaman Pengabdian Masyarakat
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

34

Gambar 20. Script Pengabdian Masyarakat

c. Kemudian Save (simpan) dengan format nama

kegiatan-

kesejahteraan-psp-ub.html
d. Tekan tombol F12, untuk melihat (Lampiran 21. Kesejahteraan)
5.2.24 Membuat Halaman SIM Semiloka
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 21. Script SIM Semiloka

c. Kemudian Save (simpan) dengan format nama seminar-lokakaryapsp-ub.html
d. Tekan tombol F12,untuk melihat hasil (Lampiran 22. SIM Semiloka)
5.2.25 Membuat Halaman SIM Pelatihan
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

35

Gambar 22. Script SIM Pelatihan Kursus

c. Kemudian Save (simpan) dengan format nama pelatihan-kursuspsp-ub.html
d. Tekan tombol F12, untuk melihat (Lampiran 23. SIM Pelatihan)
5.2.26 Membuat Halaman SIM Alumni
a. Buka Software Macromedia Dreamweaver MX 2004 , lalu pilih Create
New HTML.
b. Lalu Ketikan script berikut:

Gambar 23. Script SIM Alumni

c. Kemudian Save (simpan) dengan format nama alumni-psp-ub.html
d. Tekan tombol F12, untuk melihat (Lampiran 24. SIM Alumni)
Dalam pembuatan sistem informasi berbasiskan website pada Program
Studi Pemanfaatan Sumberdaya Perikanan yang paling diutamakan adalah
penyajian yang cukup menarik dan mudah untuk diakses. Hal ini dilakukan guna
menarik perhatian para pengguna agar selalu dapat menerima dan juga
memberikan informasi dengan cepat dan tepat.

36