Sistem Informasi Pelaksanaan Praktek Kerja Lapangan Berbasis Web Pada Jurusan D-3 Ilmu Komputer Departemen Matematika Universitas Sumatera Utara

SISTEM INFORMASI PELAKSANAAN PRAKTEK KERJA

LAPANGAN BERBASIS WEB PADA JURUSAN D-3 ILMU

KOMPUTER DEPARTEMEN MATEMATIKA UNIVERSITAS

SUMATERA UTARA

TUGAS AKHIR

ACI SRIHANDAYANI SINAMBELA

052406101

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2008

SISTEM INFORMASI PELAKSANAAN PRAKTEK KERJA LAPANGAN BERBASIS WEB PADA JURUSAN D-3 ILMU KOMPUTER

DEPARTEMEN MATEMATIKA UNIVERSITAS SUMATERA UTARA

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya

ACI SRIHANDAYANI SINAMBELA 052406101

PROGRAM STUDI DIPLOMA III ILMU KOMPUTER DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

MEDAN 2008

PERSETUJUAN

Judul : SISTEM INFORMASI PELAKSANAAN PRAKTEK KERJA LAPANGAN BERBASIS WEB PADA JURUSAN D3 ILMU KOMPUTER DEPARTEMEN MATEMATIKA UNIVERSITAS SUMATERA UTARA

Kategori : TUGAS AKHIR

Nama : ACI SRIHANDAYANI SINAMBELA

Nomor Induk Mahasiswa : 052406101

Program Studi : D3 ILMU KOMPUTER

Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN

ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA

Diluluskan di

Medan,

Komisi Pembimbing :

Diketahui/Disetujui oleh Pembimbing, Departemen Matematika FMIPA USU

Ketua,

Dr. Saib Suwilo, M.Sc Drs. Faigiziduhu. Bu’ulolo, M. Si NIP : 131796149 NIP : 130810772

PERNYATAAN

SISTEM INFORMASI PELAKSANAAN PRAKTEK KERJA LAPANGAN BERBASIS WEB PADA JURUSAN D-3 ILMU KOMPUTER

DEPARTEMEN MATEMATIKA UNIVERSITAS SUMATERA UTARA

TUGAS AKHIR

Saya mengakui bahwa Tugas Akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Mei 2008

ACI SRIHANDAYANI SINAMBELA 052406101

PENGHARGAAN

Puji dan syukur penulis panjatkan ke hadirat Tuhan Yang Maha Esa, karena hanya dengan kemurahan, berkat dan rahmat-Nya semata maka kertas kajian ini berhasil diselesaikan sesuai dengan waktu yang telah ditetapkan.

Ucapan terimakasih saya sampaikan kepada Drs.F. Bu’ulolo M.Si. selaku pembimbing pada penyelesaian tugas akhir ini yang telah memberikan bimbingan dan panduan dengan penuh kepercayaan kepada saya untuk menyempurnakan kajian ini. Ucapan terima kasih juga ditujukan kepada Ketua dan Sekretaris Departemen Matematika Dr. Saib Suwilo. M.Sc yang telah memberikan izin kepada saya untuk melakukan riset di FMIPA USU khususnya di jurusan D-3 Ilmu Komputer USU, Dekan dan Pembantu Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara, pegawai di FMIPA USU yang telah bersedia membantu saya khususnya dalam pengumpulan data-data, dan rekan-rekan kuliah khususnya kelas komputer B 2005.

Ucapan terimakasih kepada teman-teman saya Winda Nita Maria Simamora, Novia Dewi Anjani br. Purba, Marlina Hutabarat, Topsan R. L yang telah banyak memberikan semangat dan bantuan selama perkuliahan dan juga dalam penyelesaian tugas akhir ini. Teristimewa tidak terlupakan kepada kedua orang tua saya, bapak dan ibu tercinta, abang, kakak, adik dan semua ahli keluarga yang selama ini memberikan bantuan dan doa yang telah banyak membantu saya selama kuliah dan tugas akhir ini. Semoga Tuhan Yang Maha Esa akan membalasnya.

ABSTRAK

Kajian ini bertujuan untuk membangun aplikasi web suatu lembaga pendidikan pemerintah yang difokuskan pada satu jurusan. Aplikasi ini dikembangkan dengan menggunakan perangkat lunak Macromedia Fireworks MX 2004, Adobe Photoshop 7.0, Macromedia Dreamweaver MX 2004, Apache2Triad 1.5.4 dan browser Internet Explorer. Aplikasi web ini bekerja untuk dapat menyajikan informasi tentang praktek kerja lapangan baik pengumuman, profil universitas, profil jurusan, data mahasiswa dan dosen dan kegiatan-kegiatan di jurusan tersebut secara teraktual dan juga memberikan user/pengguna untuk memasukkan data, membaca pengumuman dan melihat nilai yang diperoleh sebagai hasil akhir dari praktek kerja lapangan. Tujuan aplikasi web ini adalah untuk memudahkan penyajian dan pemberitahuan informasi kepada user/pengguna dengan baik dan dapat meng-update isi dari informasi yang terdapat pada web tersebut dengan mudah pada waktu yang diinginkan.

DAFTAR ISI

Halaman

Persetujuan ii

Pernyataan iii

Penghargaan iv

Abstrak v

Daftar Isi vi

Daftar Tabel viii

Daftar Gambar ix

Bab 1 Pendahuluan 1

1.1 Latar Belakang 1

1.2 Perumusan Masalah 3

1.3 Tujuan Penelitian 3

1.4 Pembatasan Masalah 4

1.5 Metode Penelitian 5

1.6 Sistematika Penulisan 5

Bab 2 Landasan Teori 7

2.1 Sejarah Singkat Internet 7

2.2 World Wide Web 9

2.2.1 Lahirnya Web 12

2.2.2 Browser Web 13

2.2.2.1 Cara Kerja Browser Mengambil Halaman / Page 14 2.2.2.2 Cara Kerja Browser Menampilkan Halaman / Page 14

2.2.3 Server Web 14

2.2.4 Istilah-Istilah Umum Yang Harus Diketahui 15

2.3. HTML (HyperText Markup Language) 16

2.3.1 Dokumen HTML 16

2.3.1.1 Penamaan Dokumen HTML 17

2.3.1.2 Elemen dan Tag HTML 18

2.3.1.3 Format Tag HTML 19

2.4. DHTML 21

2.4.1 CSS (Cascading Style Sheets 22

2.4.2 Javascript 24

2.5 Pengenalan PHP (Hypertext Preprocessor) 25

2.5.1 Sejarah PHP 25

2.5.1.1 PHP/FI 25

2.5.1.2 PHP 3 26

2.5.1.3 PHP 4 27

2.5.1.4 PHP 5 27

2.5.2 Skrip PHP 28

2.5.3 Integrasi dengan Database 30

2.7 Macromedia Fireworks MX 2004 33 2.8 Macromedia Dreamweaver MX 2004 34

Bab 3 Sekilas Fakultas Matematika dan Ilmu Pengetahuan Alam 36 3.1 Sejarah Universitas Sumatera Utara 36 3.1.1 Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas

Sumatera Utara 37

3.1.1.1 Visi dan Misi Fakultas Matematika dan Ilmu Pengetahuan Alam 38 3.1.2 Program Studi D-3 Ilmu Komputer 40 3.1.2.1 Visi dan Misi Program Studi D-3 Ilmu Komputer 40

3.2 Struktur Organisasi 41

3.2.1 Bagian Administrasi 42

3.2.2 Laboratorium Penelitian FMIPA USU 42 3.2.3 Unit Pelaksana Teknis FMIPA USU 42 3.2.4 Unit Pengembangan Pendidikan FMIPA USU 42

Bab 4 Perancangan Sistem 43

4.1 Perencanaan dan Perancangan 43

4.2 Mendesain Layout/Template 48

4.3 Pemotongan Grafik Web 49

4.4 Mempersiapkan Database Server 51

4.5 Relasi Antar Tabel 55

4.5.1 Mengenal key pada MySQL 56

4.6 Membangun Halaman Situs 59

Bab 5 Implementasi Sistem 65

5.1 Pengertian Implementasi sistem 65

5.2 Tujuan Implementasi Sistem 65

5.3 Spesifikasi Sistem 66

5.4 Instalasi Apache2Triad 1.5.4 68

5.5 Pengujian di Browser 74

5.6 Melakukan Import database pada PhpMyAdmin 76

Bab 6 Kesimpulan Dan Saran 78

6.1 Kesimpulan 78

6.2 Saran 79

Daftar Pustaka 81

DAFTAR TABEL

Halaman

Tabel 2.1 Daftar tag HTML 20

Tabel 2.2 Daftar Database-database yang didukung PHP 31

Tabel 4.1 Tabel login 52

Tabel 4.2 Tabel mahasiswa 52

Tabel 4.3 Tabel perusahaan 52

Tabel 4.4 Tabel dosen 53

Tabel 4.4 Tabel nilai_dosen 53

Tabel 4.4 Tabel nilai_perusahaan 53

Tabel 4.4 Tabel nilai_mhs_dosen 54

Tabel 4.4 Tabel nilai_mhs_perusahaan 54

Tabel 4.4 Tabel hasil_kerja_praktek 54

Tabel 4.4 Tabel pengumuman 55

Tabel 4.4 Tabel event 55

DAFTAR GAMBAR

Halaman Gambar 2.1 Hasil tampilan contoh dokumen HTML pada IE 19 Gambar 2.2 Dokumen PHP Ditampilkan Di Browser IE 30 Gambar 3.1 Struktur Organisasi Fakultas Matematika dan Ilmu Pengetahuan 41 Gambar 4.1 Bagan rancangan menu aplikasi web (situs) 46 Gambar 4.2 Percabangan bagan menu dalam suatu situs 47

Gambar 4.3 Desain awal layout web 49

Gambar 4.4 Proses slice pada photoshop 50

Gambar 4.5 Bagan relasi data antar table berdasarkan primay key 58

Gambar 4.6 Tampilan halaman perusahaan.php 62

Gambar 4.7 Tampilan Macromedia Dreamweaver MX 2004 63

Gambar 5.1 Apache2Triad 5.4 Installer 69

Gambar 5.2 Verifying installer 69

Gambar 5.3 Memilih komponen yang akan diinstal 70

Gambar 5.4 Destination Folder 70

Gambar 5.5 Halaman memasukkan password 71

Gambar 5.6 Halaman persetujuan license 72

Gambar 5.7 Proses extract 72

Gambar 5.8 Laporan extract telah selesai 73

Gambar 5.9 Command Prompt yang meminta password 73 Gambar 5.9 Pemberitahuan keberhasilan konfigurasi 74 Gambar 5.11 Peletakan Folder berisi file-file Web dalam folder htdocs 74

Gambar 5.12 Penulisan Alamat di URL 75

Gambar 5.13 Hasil pengujian aplikasi web di browser 75

Gambar 5.14 Import database 76

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Dalam perkembangan peningkatan zaman sekarang ini membutuhkan sumber daya manusia yang berkualitas dan terampil dalam segala bidang. Setiap kampus memiliki Sumber Daya Manusia (SDM) yang telah dididik untuk memiliki pemikiran yang lebih luas untuk perkembangan diri menjadi Sumber Daya Manusia (SDM) yang akan terjun langsung ke dunia nyata yaitu dunia pekerjaan.

Sejalan dengan perkembangan zaman yang sekarang lebih difokuskan pada perkembangan teknologi informasi, masyarakat Indonesia sangat membutuhkan suatu alat komunikasi yang dapat menunjang perkembangan zaman era globalisasi saat ini. Termasuk setiap perusahaan dengan pelanggan atau konsumennya. Hal ini ditujukan bukan saja untuk menjamin kepuasan pelanggan, tetapi juga untuk menjamin pencapaian tujuan perusahaan, baik dalam jangka pendek maupun dalam jangka panjang. Dengan adanya teknologi informasi, banyak pekerjaan yang dianggap sulit menjadi lebih mudah. Hal ini tentu mempengaruhi laju perkembangan sebuah usaha. Memakai waktu yang lebih efisien serta hasil kerja yang lebih akurat merupakan langkah pasti menuju kemajuan zaman yang semakin canggih.

Dalam dunia pendidikan, Praktek Kerja Lapangan yang sering disebut PKL, merupakan kewajiban bagi mahasiswa yang memang mengambil mata kuliah tersebut, tidak terkecuali pada Jurusan D-3 Ilmu Komputer Universitas Sumatera. praktek kerja lapangan dilaksanakan oleh mahasiswa semester V, namun kerap dalam pelaksanaannya masih terjadi kekurangan informasi bagi mahasiswa. Banyak diantaranya yang belum mengetahui dimana mendapatkan pengumuman tentang praktek kerja lapangan, apa langkah-langkah untuk mencari tempat praktek kerja lapangan, dan perusahaan- perusahaan apa saja yang layak dimasuki. Karena selain universitas, sekolah-sekolah pun banyak yang melakukan PKL (Praktek Kerja Lapangan) dalam perusahaan yang sama. Salah satu tujuan praktek kerja kapangan yang paling nyata adalah untuk mengetahui jenis-jenis pelayanan terhadap pelanggan yang diberikan oleh perusahaan. Memperkenalkan mahasiswa pada situasi di dunia kerja yang sesungguhnya, dimana pada saat menjalankan praktek kerja lapangan mahasiswa dapat melihat langsung dan dengan cepat mampu menyesuaikan diri dalam dunia pekerjaan nantinya setelah menyelesaikan perkuliahan.

Dengan permasalahan diatas maka penulis mencoba membuat sistem baru yang bisa membantu para user dimana diprioritaskan bagi mahasiswa Ilmu Komputer D-3 Universitas Sumatera Utara untuk mendapatkan informasi seputar praktek kerja lapangan dan hal-hal lain yang terjadi di program studi D-3 Ilmu Komputer Universitas Sumatera Utara.

Sehingga Penulis membuat sistem untuk ini dengan mengangkat judul

“SISTEM INFORMASI PELAKSANAAN PRAKTEK KERJA LAPANGAN BERBASIS WEB PADA JURUSAN D-3 ILMU KOMPUTER DEPARTEMEN MATEMATIKA UNIVERSITAS SUMATERA UTARA “ .

1.2 Perumusan Masalah

Beradasarkan latar belakang diatas, maka perumusan masalah dalam penelitian ini dapat dirumuskan sebagai berikut:

1. Sejauh ini apa saja yang menjadi kendala dalam pengelolaan data-data pelaksanaan PKL pada jurusan D-3 Ilmu komputer?

2. Apa saja hal-hal yang menyebabkan mahasiswa sehingga tidak bisa mendapatkan informasi tentang PKL dengan mudah?

3. Hal-hal apa yang perlu dibenahi untuk memudahkan pengelolaan data-data yang berhubungan dengan Praktek Kerja Lapangan di Jurusan D-3 Ilmu Komputer, mulai dari pencarian tempat PKL sampai selesainya PKL tersebut?

1.3 Tujuan Penelitian

Adapun tujuan dari penelitian ini adalah untuk :

1. Memberikan kemudahan kepada Fakultas MIPA khususnya di Jurusan D-3 Ilmu Komputer Universitas Sumatera Utara.

2. Mengetahui faktor-faktor penghambat yang dihadapi pihak yang menangani data-data pelaksanaan Praktek Kerja Lapangan.

3. Memudahkan dalam pengelolaan data-data pelaksanaan Praktek Kerja Lapangan yang setiap tahun dilakukan di Jurusan D-3 Ilmu Komputer.

4. Sebagai sistem informasi yang berfungsi memudahkan pengelolaan data di Jurusan D-3 Ilmu Komputer USU dengan menerapkan sistem yang lebih mudah dengan pengelolaan database mahasiswa D-3 Komputer yang meliputi 3 (tiga) kelas pada aplikasi web.

1.4 Pembatasan Masalah

1. Khusus membahas pembuatan program sistem informasi manajemen online berbasis web.

2 Sistem informasi hanya menangani semua data-data yang berhubungan dengan perlaksanaan kerja lapangan, mulai dari mahasiswa mengirimkan surat permohonan ke sebuah perusahaan, memulai praktek kerja lapangan, menyelesaikan praktek kerja lapangan serta menampung nilai-nilai yang diperoleh selama praktek kerja lapangan dan apa saja hasil pekerjaan selama praktek kerja lapangan yaitu berupa laporan .

3 Subsistem yang ada dalam program ini pengelolaan data-data selama pelaksanaan praktek kerja lapangan hanya dibatasi pada Jurusan D-3 Ilmu Komputer.

4 Di dalam sistem informasi ini hanya menampilkan data-data mahasiswa yang sah diterima di Jurusan D-3 Ilmu Komputer, dan yang menjalankan praktek kerja lapangan.

1.5 Metode Penelitian

Ada 2 teknik pengumpulan data yang digunakan, yaitu :

Library research (Riset kepustakaan) yakni : melalui pencarian referensi /bahan-bahan, jurnal, hasil-hasil penelitian dan penelusuran situs yang berhubungan dengan penelitian ini.

Field Research (Riset lapangan /Pengumpulan data primer) : pengumpulan data melalui observasi, wawancara langsung kepada pihak yang menangani pengelolaan data-data dalam pelaksanan praktek kerja lapangan, serta mengumpulkan data-data tersebut untuk melengkapi penyelesaian sistem informasi tersebut.

1.6 Sistematika Penulisan

Adapun sistematika penulisan laporan Tugas Akhir ini adalah sebagai berikut :

BAB 1 : PENDAHULUAN

Dalam bab ini penulis menguraikan Latar Belakang, Identifikasi Masalah, Maksud Dan Tujuan Penulisan, Ruang Lingkup Masalah, Metode Penelitian dan Sistematika Penulisan.

BAB 2 : LANDASAM TEORI

Dalam bab ini penulis menguraikan beberapa hal yang berhubungan dengan aplikasi web dinamis yang ingin dibangun penulis yaitu sejarah singkat internet, World Wide

Web, HTML (HyperText Markup Language), DHTML (Dynamic HyperText Markup Language), pengenalan PHP(PHP Hypertext Preprocessor), MySQL dan Macromedia Dreamweaver.

BAB 3 : SEKILAS FAKULTAS MATEMATIKA DAN ILMU

PENGETAHUAN ALAM

Dalam bab ini penulis menyajikan gambaran tentang Fakultas Matematia dan Ilmu Pengetahuan Alam yang terdiri dari profil, struktur organisasi, visi dan misi Fakultas Matematika dan Ilmu Pengetahuan Alam secara umum dan visi dan misi jurusan Ilmu Komputer D-3 Universitas Sumatera Utara secara khusus.

BAB 4 : PERANCANGAN SISTEM

Dalam bab ini penulis menguraikan tentang perancangan sistem yang dirancang yang meliputi perancangan layout, perancangan database, gambaran aplikasi web yang akan dibuat serta bagaimana relasi antar tabel pada aplikasi tersebut saat dijalankan.

BAB 5 : IMPLEMENTASI SISTEM

Dalam bab ini penulis menyajikan tentang pengertian implementasi aplikasi, tujuan implementasi aplikasi serta spesifikasi aplikasi.

BAB 6 : KESIMPULAN DAN SARAN

BAB 2

LANDASAN TEORI

2.1 Sejarah Singkat Internet

Secara teknis, Internet atau international networking merupakan dua atau lebih yang saling berhubungan membentuk jaringan komputer hingga meliputi jutaan komputer di dunia, yang saling berinteraksi dan bertukar informasi. Sedangkan dari segi ilmu pengetahuan, Internet merupakan sebuah perpustakaan yang didalamnya terdapat jutaan bahkan miliaran informasi atau data yang dapat berupa teks, grafik, suara maupun animasi dalam bentuk elektronik. Jadi, Internet adalah sarana yang efektif dan efisien untuk melakukan pertukaran informasi jarak jauh.

Internet telah membuat revolusi dunia komputer dan dunia komunikasi yang tidak pernah diduga sebelumnya. Penemuan telegram, telepon, radio, dan computer merupakan rangkaian kerja ilmiah yang menuntun menuju terciptanya Internet yang lebih terintegrasi dan lebih berkemampuan daripada alat-alat tersebut. Internet memiliki kemampuan untuk mencakup dunia, memiliki mekanisme informasi yang global dfan merupakan media yang bias digunakan untuk kolaborasi dan berinteraksi antar individu dengan komputernya tanpa dibatasi oleh ruang dan waktu.

Penemuan Internet mengalami perjalanan sejarah yang amat panjang yang dimulai dari tahun ke tahun. Berikut ringkasannya:

a. Tahun 1836. Ada penemuan telegraph dfan kode morser di mana hak patennya dipegang oleh Cooke dan Wheatstone. Pada tahun ini, dengan adanya penemuan telegraph telah terjadi revolusi telekomunikasi antar manusia. Tambah lagi dengan adanya penemuan kode atau sandi morse yang merupakan sederetan titik dan garis yang digunakan untuk komunikasi antar komputer yang menggunakan data kode biner.

b. Tahun 1858-1866. Penemuan kabel memungkinkan adanya komunikasi ke seluruh benua. Kabel masih merupakan penghubung yang penting dalam telekomunikasi.

c. Tahun 1876. Penemuan telepon oleh Alexander Graham Bell. Saluran telepon merupakan dasar untuk hubungan dalam Intenet dan aplikasinya dalam modern, di mana dalam modern dapat mengubah sinyal digital ke sinyal analog maupun sebaliknya yang dipakai dalam komputer untuk saling berhubungan dengan menggunakan jaringan telepon.

d. Tahun 1957. Peluncuran satelit Sputnik USSR, yang merupakan satelit pertama di bumi. Untuk permulaan telekomunikasi, satelit memegang peranan yang sangat penting dalam pengiriman data pada zaman sekarang ini. Sebagai respon dari semuanya ini , Dewan Pertahanan Amarika Serikat malakukan riset yang dikenal sebagai Advanced Research Project Agency (ARPA) untuk meneguhkan kepemimpinan dalam hal ilmu pengetahuan dan teknologi dalam bidang peralatan militer.

e. Tahun 1962-1968. Pengembangan jaringan packet switching, yang dipakai Internet untuk transfer data. Paket switching pertama kali digunakan untuk

militer dalam keamanan pengiriman informasi dalam jaringan. Dalam prakteknya data dipecah-pecah menjadi beberapa paket yang mempunyai rute yang berbeda-beda, sehingga misalnya ada salah satu rute yang rusak maupun gagal bisa menggunakan rute yang lain. Selain itu data tidak mudah disadap.

Setelah angkatan bersenjata Amerika, dunia pendidikan pun merasa sangat perlu mempelajari dan mengembangkan jaringan komputer. Salah satunya adalah Universitas of California at Los Angeles (UCLA). Akhirnya pada tahun 1970 internet banyak digunakan di universitas-universitas di Amerika dan berkembang pesat sampai saat ini. Agar para pengguna komputer dengan merek dan tipe berlainan dapat saling berhubungan, maka para ahli membuat sebuah protokol (semacam bahasa) yang sama untuk dipakai di internet. Namanya TCP (Transmission Control Protocol, bahasa Indonesianya Protokol Pengendali Transmisi) dan IP (Internet Protocol).

2.2 World Wide Web (WWW)

World Wide Web (WWW), adalah aplikasi yang paling menarik di Internet dan seperti e-mail aplikasi ini sangat penting dan banyak sekali digunakan. Dari www para pengguna dapat memperoleh informasi tidak hanya teks tetapi juga gambar maupun multimedia. WWW merupakan suatu sistem yang menciptakan pertukaran data di Internet dengan dan mudah dan efisien. Ada dua bagian utama www, yaitu:

1. Server Web

Merupakan komputer dan software yang menyimpan dan mendistribusikan data ke komputer lain lewat Internet yang meminta informasi tersebut.

2. Browser Web

Merupakan software yang beroperasi di setiap komputer pribadi (client) yang meminta informasi dari server web dan menampilkan sedemikian rupa sehingga data dapat langsung diakses.

World Wide Web (WWW) mendapat perhatian publik yang sangat besar yang tidak dapat disamai oleh aplikasi internet lainnya. Pada tahun 1995, www menggantikan FTP sebagai aplikasi internet yang bertanggungjawab atas sebagian besar lalu lintas internet. Web telah menjadi sedemikian terkenalnya sehingga kadang dicampuradukkan dengan istilah internet itu sendiri meskipun pengertian “di Web” dan “di Internet” sebenarnya tidak sama.

Web adalah sistem pengiriman dokumen tersebar yang berjalan di internet. Web dikembangkan di CERN (European Center for Nuclear Research), suatu lembaga bagi penelitian fisika energi tinggi di Geneva, Swiss. Tujuan semula dari lembaga ini adalah untuk membantu para fisikawan di berbagai lokasi yang berbeda dalam bekerja sama dan berbagi material penelitian.

Web dengan cepat berkembang ke luar lingkup masyarakat fisika energi tinggi. Pada tahun 1993, terdapat 130 server web di internet. Setahun kemudian jumlahnya meningkat menjadi 2.738, dan pada bulan Juni 1995 terdapat 23.500 server web.

Sekarang ini web telah memiliki pemirsa dalam jumlah yang sangat besar di luar lingkup akademis : kurang lebih 30% dari server web yang tengah beroperasi saat ini berada di komputer dalam domain komersial, dan di sebagian industri, di mana keberadaaan perusahaan web sama pentingnya dengan memiliki telepon atau faks bagi tujuan komunikasi bisnis. Web sekarang telah menjadi media yang sangat penting bagi

periklanan dan alamat web sekarang sudah umum dijumpai pada majalah, surat kabar, dan iklan televisi.

Web pada awalnya adalah ruang informasi dalam internet, dengan menggunakan teknologi hypertext, pemakai dituntun untuk menemukan informasi dengan mengikuti link yang disediakan dalam dokumen web yang ditampilkan dalam browser web.

Kini internet identik dengan web, karena kepopuleran web sebagai standar interface pada layanan-layanan yang ada di internet, dari awalnya sebagai penyedia informasi, kini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi bisnis (commerce).

Kini, web seakan lebih populer daripada email, walaupun secara statistik email masih merupakan aplikasi terbanyak yang digunakan oleh pengguna internet. Web lebih populer bagi khalayak umum dan pemula, terutama untuk tujuan pencarian informasi dan melakukan komunikasi email yang menggunakan web sebagai interfacenya.

Internet identik dengan web, karena popularitasnya sebagai penyedia informasi dan interface yang dibutuhkan oleh pengguna internet dari masalah informasi sampai dengan komunikasi. Informasi produk dari yang serius sampai dengan yang sampah, dari yang cuma-cuma sampai dengan yang komersial, semuanya ada.

Web memudahkan pengguna komputer untuk berinteraksi dengan pelaku internet lainnya dan menelusuri (informasi) di internet.

Selain itu web telah diadopsi oleh perusahaan sebagai sebagian dari strategi teknologi informasinya, karena beberapa alasan :

a. Akses informasi mudah. b. Setup server lebih mudah.

c. Informasi mudah didistribusikan.

d. Bebas platform; informasi dapat disajikan oleh browser web pada sistem operasi mana saja karena adanya standar dokumen berbagai tipe data dapat disajikan.

2.2.1 Lahirnya Web

Tahun 1989, Timothy Berners-Lee seorang ahli komputer dari Inggris dan peneliti lain di European Particle Physics Lab (Consei European pour la Recherche Nucleaire, atau CERN) di Geneva, Swiss, mengembangkan suatu cara untuk men-share data antarkoleganya menggunakan sesuatu yang disebut dengan hypertext. Pemakai di CERN dapat menampilkan dokumen pada layar komputer dengan menggunakan software browser baru.

Kode-kode khusus disisipkan ke dalam dokumen elektronik ini, memungkinkan pemakai untuk meloncat dari satu dokumen ke dokumen lainnya pada layar dengan hanya memilih sebuah hyperlink.

Kemampuan intenet dimasukkan ke dalam browser ini sehingga lompat dari satu dokumen ke dokumen lain, tidak lagi dari satu komputer saja, tetapi dapat melompat

ke dokumen lain yang letaknya pada komputer remote. Seorang peneliti dapat juga mengirimkan sebuah file dari komputer remote ke sistem lokalnya, atau log in ke dalam suatu sistem remote hanya dengan mengklik hyperlink, tidak perlu melalui mekanisme FTP atau Telnet. Jalan pintas CERN digunakan sebagai dasar dari yang disebut sekarang dengan Word Wide Web dan berikut server dan browser webnya (sekarang dimaintenance oleh World Wide Web Consortium).

2.2.2 Browser Web

Browser web adalah software yang digunakan untuk menampilkan informasi dari server web. Software ini kini telah dikembangkan dengan menggunakan user interface grafis, sehingga pemakai dapat dengan mudah melakukan ‘point dan click’ untuk pindah antar dokumen.

Lynx adalah browser web yang masih menggunakan mode teks, yang akibatnya adalah tidak ada gambar yang dapat ditampilkan. Lynx ini ada pada lingkungan DOS (Disk Operating System) dan *.nix (keluarga sistem operasi UNIX). Akan tetapi perkembangan dari browser mode teks ini tidaklah secepat browser web dengan GUI (Grafic User Interface).

Di saat perkembangan WWW ada dua browser web yang populer yaitu Internet Explorer (IE) dan Netscape Navigator. Namun saat ini bermunculan browser web lain yang turut meramaikan persaingan untuk merebut para pengguna internet. Di antara browser web yang telah banyak digunakan pada saat peluncurannya adalah MSN , Opera dan Mozilla Firefox. Diantara browser web ini terdapat kelebihan dan

kekurangan sehingga pengguna dapat memilih sesuai keinginan dan kemudahan yang ditawarkan.

2.2.2.1 Cara kerja browser mengambil halaman / page

Suatu browser mengambil sebuah web page dari server dengan sebuah request. Sebuah request adalah HTTP standar yang berisi sebuah page address. Sebuah page address terlihat seperti berikut : http://www.google.co.id.

2.2.2.2 Cara kerja browser menampilkan halaman / page

Seluruh web page berisi instruksi-instruksi bagaimana untuk ditampilkan. Browser menampilkan page dengan membaca instruksi-instruksi ini. Instruksi yang paling umum untuk menampilkan disebut tag HTML. Tag HTML contohnya, yaitu <p> Ini merupakan suatu paragraf </p>.

2.2.3 Server Web

Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web, komputer ini akan melayani permintaan dokumen web dari kliennya.

Browser web seperti IE atau Opera berkomunikasi melalui jaringan (termasuk jaringan internet) dengan server web, menggunakan HTTP. Browser akan mengirimkan request kepada server untuk meminta dokumen tertentu atau layanan

lain yang disediakan oleh server. Server memberikan dokumen atau layanannya jika tersedia juga dengan menggunakan protokol HTTP.

2.2.4 Istilah-Istilah Umum yang Harus Diketahui

Berikut ini penjelasan beberapa istilah-istilah umum yang harus diketahui antara lain :

a. Protokol; Secara definisi adalah standar pemrosesan informasi yang diterima secara umum. Protokol TCP/IP merupakan protokol yang digunakan dalam komunikasi dalam internet.

b. URL (Universal Resource Locator); URL adalah konsep nama file standar yang diperluas dengan jaringannya. Nama file ini tidak hanya menunjukkan direktori dan nama filenya, tetapi juga nama mesinnya dalam jaringan. URL dapat disediakan (ada atau diakses) dengan berbagai metoda, dan bisa jadi bukan sekedar file, karena URL dapat menunjukkan query-query, dokumen yang disimpan dalam database, hasil dari suatu perintah finger atau archie, atau apapun yang berkaitan dengan data hasil proses.

c. HTTP (HyperText Transfer Protocol); HTTP umumnya digunakan untuk melayani dokumen hypertext, karena HTTP adalah protokol dengan overhead yang sangat rendah, sehingga pada kenyataan navigasi informasi dapat ditambahkan langsung ke dalam dokumen dengan demikian protokolnya sendiri tidak harus mendukung navigasi secara penuh. Sebuah file dengan nama ”contoh.html” pada server www.lybrary.usu.ac.id dalam direktori

“/pub/files” maka URL-nya http://www.lybrary.usu.ac.id/contoh.html”. Nomor port jaringan HTTP default adalah 80, jika suatu server HTTP berada pada port jaringan yang berbeda, misal pada port 1234 maka URL menjadi http://www.lybrary.usu.ac.id:1234/pub/files/contoh.html.

d. Browsing / Surfing; kegiatan menelusuri dan mencari informasi dalam internet melalui layanan informasi web.

e. Browser / Surfer; pengguna komputer yang melakukan browsing / surfing.

2.3 HTML (HyperText Markup Language)

2.3.1 Dokumen HTML

HTML singkatan dari Hypertext Mark-up Language, yaitu sebuah bahasa standard yang digunakan untuk menampilkan/ mengatur penampilan materi-materi informasi di Internet. HTML merupakan bahasa penandaan (markup), yaitu suatu bahasa untuk menerangkan cara pemberian format bagi sebuah dokumen. Istilah markup berasal dari copy editor dahulu yang memberikan tanda dokumen-dokumen untuk dikirimkan ke printer, yang biasanya berisi tentang jenis huruf dipakai, dan lain-lain. Bahasa markup berisi perintah pemformatan secara eksplisit.

Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan

dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi di dalam internet.

Ada dua cara untuk membuat sebuah web page : dengan web editor (misalnya Macromedia Dreamweaver atau Microsoft Frontpage) atau dengan editor teks biasa (misalnya notepad atau editplus).

2.3.1.1 Penamaan dokumen HTML

Penamaan dokumen HTML dapat dilakukan dengan memilih suatu nama, sembarang nama, kemudian menambahkan sebuah ekstensi “.htm” atau “.html” (tanda kutip tidak perlu dituliskan karena digunakan sebagai penjelas saja).

Ekstensi dokumen HTML yang menggunakan 3 karakter awalnya adalah untuk mengakomodasikan sistem penamaannya yang ada dalam sistem operasi DOS. Nama dokumen pada beberapa sistem operasi bersifat case sensitive (membedakan huruf besar dengan huruf kecil). Nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya dokumen.html akan berbeda dengan DOKUMEN.html. Kasus case sensitive akan dijumpai pada dokumen web yang di-hosting di dalam server yang berbasis *nix (keluarga sistem operasi UNIX).

2.3.1.2 Elemen dan tag HTML

Dokumen HTML merupakan teks sederhana yang sering dikenal sebagai ASCII, file yang dibuat dengan menggunakan berbagai pengolah kata (misalnya Notepad/ Wordpad di Windows di Windows, Emacs atau vi di mesin UNIX serta BBEdit di Macintosh). Beberapa program untuk membuat dan mengedit dokumen HTML (editor HTML) bisa menampilkan secara utuh atau WYSIWYG (What You See Is What You Get).

Setiap dokumen HTML harus berisi beberap kode HTML standart. Setiap dokumen terdiri dari bagian kepala dan bagain badan aktual teks yang terdiri dari paragrap, list, dan elemen lainnya.

Berikut contoh dokumen HTML sederhana: <html>

<head> <TITLE> Berikut contoh dokumen HTML sederhana</TITLE></head> <body><H1>Sistem Informasi ini menggunakan HTML</H1>

<P>Di paragraph pertama ini menampilkan judul Situs</P> <P>Di paragraph selanjutnya keterangan lebih lengkap </P> </body> </html>

Gambar 2.1 Hasil tampilan contoh dokumen HTML pada IE

2.3.1.3 Format tag HTML

Bagian ini merupakan komponen mendasar dari struktur teks dokumen. Beberapa contoh elemen misalnya bagian kepala, paragraph dan lists. Elemen berisi teks sederhana atau elemen lainnya atau keduanya. Untuk menandakan berbagai atribut dokumen HTML. Tag yang biasa digunakan terdiri dari tanda kurang buka (<), tag nama, dan tanda kurung tutup (>). Tag biasanya berpasangan misalnya, <H1> dan </H1> untuk memulai dan mengakhiri perintah tag. Bagian akhir tag seperti bagian awalnya kecuali tanda garis miring (/) mengawali teks dalam tanda kurung.

Berikut adalah table beberapa daftar tag HTML yang umum digunakan dan beberapa tag yang memiliki parameter tambahan.

Tabel 2.1 Daftar tag HTML

Tag Keterangan <HTML>….</HTML> Mendeklarasikan bahwa halaman WEB

akan ditulis dalam HTML. <HEAD>….</HEAD> Membatasi kepala halaman

<TITLE>….</TITLE> Mendefinisikan title (tidak ditampilkan pada halaman)

<BODY>….</BODY> Membatasi badan halaman

<Hn>….</Hn> Membatasi tingkat heading n <B>….</B> Memformat dengan cetak tebal

<I>….</I> Memformat dengan cetak miring

<UL>….</UL> Membatasi list tidak berurut (daftar butir) <OL>….</OL> Membatasi list berurut

<MENU>….</MENU> Membatasi menu item-item <L1>

<L1> Mengawali item list (tidak terdapat </L1>

<BR> Pindah baris

<P> Mengawali sebuah paragraph

<HR> Garis horizontal

<PRE>….</PRE> Teks preformat, tidak diformat ulang <IMG SRC=”>>”> Menampilkan gambar

2.4 DHTML (Dinamic HyperText Markup Language)

DHTML adalah suatu istilah yang diberikan untuk suatu halaman web yang memanfaatkan HTML dan DOM (Document Object Model), CSS (Cascading Style Sheet) dan client-side scripting untuk membuat tampilan halaman tersebut dinamis atau interaktif. Istilah Dynamic ditambahkan untuk membedakan sifat dinamis halaman web ini dengan halaman web statis yang dibuat hanya berdasarkan HTML.

DHTML mulai diterapkan pada browser generasi ke empat – Microsoft Internet Explorer 4 (IE4) dan Netscape Communicator 4 (NS4). DHTML sepenuhnya merupakan teknologi client side yang hanya bergantung pada kemampuan browser untuk menampilkan dan memanipulasi elemen halaman web yang tidak bisa dilakukan dengan hanya mengandalkan HTML.

Sebagian besar hal yang bisa dibuat dengan DTML bisa juga dibuat dengan teknologi authoring web lain seperti Java, Flash, atau Shockwave. Penggunaan DHTML mempunyai kelebihan karena tidak memerlukan plugin apapun untuk menjalankannya dan ukurannya jauh lebih kecil dibandingkan dengan penggunaan teknologi lain. Kelemahannya, masih banyak hal-hal yang belum bisa dilakukan dengan menggunakan DHTML seperti suara dan video. Saat ini sudah cukup banyak penerapan DHTML yang sering ditemukan sewaktu mengakses internet sehari-hari. Yang umum misalnya rollover menu (baik berbentuk image ataupun teks biasa), pulldown menu, trailing cursor, sliding text, dll.

2.4.1 CSS ( Cascading Style Sheet)

CSS mendefinisikan karakteristik tampilan (warna, style, dan posisi) suatu elemen pada dokumen HTML dalam bentuk properti elemen tersebut. Pemisahan isi dengan tampilan yang dilakukan dengan penerapan CSS ini, memberikan kemungkinan penyusunan struktur suatu halaman HTML dengan lebih fleksibel. CSS merupakan bagian/subset dari DOM yang sangat berperan dalam DHTML.

Perbedaan implementasi antara Netscape dan Microsoft sehingga akhirnya W3C melakukan suatu standardisasi CSS. Pada awalnya, upaya standardisasi CSS dibagi dua, yaitu CSS1 untuk pengaturan warna dan style, serta CSS-P untuk pengaturan posisi suatu elemen. CSS2 dari W3C selanjutnya menggabungkan kedua standar ini menjadi suatu standar yang meliputi semua setting tampilan suatu elemen halaman HTML.

Dalam spesifikasi CSS2, ada beberapa properti elemen dokumen yang berhubungan dengan posisi suatu elemen di halaman browser. Properti tersebut adalah:

a. position – ada dua pilihan untuk nilai properti ini, yaitu absolute dan relative. Setting absolute mengatur posisi elemen berdasarkan jarak terhadap ujung kiri-atas elemen parent-nya. Sedangkan setting absolute bekerja sesuai layout HTML biasa dimana posisinya ditentukan berdasarkan akhir elemen sebelumnya.

b. Left dan top – menentukan jarak ke arah kanan dan ke bawah dari posisi awal elemen. Unitnya bisa dinyatakan dalam point(pt), pixel(px) atau unit standar CSS lainnya.

c. Width dan height – menentukan lebar dan tinggi elemen. Unitnya bisa dinyatakan dalam point(pt), pixel(px) atau unit standar CSS lainnya.

d. Z-index – menentukan apakah suatu elemen ditampilkan di layar. Nilainya bisa visible (tampil) atau hidden (tersembunyi).

e. Overflow – menentukan perilaku ruang penampung jika isinya melebihi batasnya. Ada tiga pilihan untuk nilai properti ini, yaitu clip, scroll, dan none. Setting clip berarti isi akan dipotong jika melebihi batas. Scroll akan memunculkan scrollbar pada container. Sedangkan none tidak akan melakukan apapun terhadap isi sehingga isi tersebut akan keluar dari ruang batasnya.

f. Background-color atau layer-background-color – menentukan warna dasar dari suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang kedua berlaku untuk NS.

g. Background-image atau layer-background-image – menentukan gambar latar belakang dari suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang kedua berlaku untuk NS.

2.4.2 JavaScript

JavaScript pertama kali nuncul di Netscape2.0 dan dikembangkan lebih lanjut pada Netscape 3.0. Walaupun memiliki nama yang serupa. JavaScript sama sekali tidak berhubungan dengan Java.

Java adalah bahasa pemrograman tingkat tinggi untuk membuat aplikasi cross-platform, sedangkan JavaScript hanyalah scripting language yang terintegrasi dengan web browser untuk memberikan fleksibilitas tambahan bagai programmer untuk mengontrol elemen-elemen dalam halaman web.

Aplikasi JavaScript sebenarnya cukup luas, tetapi disini penulis menggunakan JavaScript dibatasi untuk DHTML, yaitu JavaScript yang digunakan untuk mengakses property, method, dan event handler yang disediakan oleh DOM dan CSS.

Property didefinisikan sebagai setting nilai suatu objek tertentu. Contohnya adalah warna suatu teks, action untuk suatu form, nama file untuk suatu gambar, dll. Method adalah fungsi-fungsi yang dapat diterapkan untuk suatu objek. Misalnya maximize untuk window. Event handler menspesifikasikan bagaimana suatu objek merespon terhadap suatu kejadian, misalnya suatu button di click, window di resize, dll.

2.5 Pengenalan PHP (HyperText Preprocessor)

2.5.1 Sejarah PHP

PHP dirancang untuk membentuk web dinamis. Artinya, dengan PHP dapat dibentuk suatu tampilan berdasarkan permintaan terkini. Menurut dokumen resmi PHP, PHP singkatan dari PHP Hypertext Preprocessor yaitu salah satu bahasa berbentuk skrip yang ditempatkan dalam server dan diproses di server. Hasilnya dikirim ke klien, tempat pemakai menggunakan browser.

2.5.1.1 PHP/FI (Personal Home Page / Form Interpreter)

Pertama kali PHP dibuat dan diperkenalkan oleh Rasmus Lerdorf pada tahun 1995 menggunakan nama PHP/FI. Generasi awal PHP/FI dibuat dari Perl yang waktu itu digunakan untuk kebutuhan pribadi saja. Pada awalnya, PHP/FI merupakan bagian dari Personal Home Page Tools. Namun, karena kebutuhan penggunaan web yang semakin kompleks maka dikembangkan PHP/FI dengan menggunakan bahasa C. Rasmus menulis sejumlah besar fungsi untuk pengaksesan ke dalam database. Penulisan itu juga bertujuan membangun halaman web menjadi dinamis.

PHP/FI merupakan akronim dari Personal Home Page/Forms Interpreter. Pada awal penyusunan, PHP/FI hanya mempunyai fungsi dasar dari PHP yang ada sekarang ini. Jadi, dengan kata lain, pondasi PHP sekarang ini adalah PHP/FI. Karena ketika pertama dibuat menggunakan Perl maka PHP/FI juga mempunyai susunan dan karakter pemrogram yang sama dengannya.

Pada tahun 1997, dikeluarkan PHP/FI versi 2.0. Fungsi-fungsi pada PHP/FI ditulis dengan menggunakan bahasa C. Karena telah memiliki fungsi khusus untuk mengakses database maka, pada tahun yang sama, terdapat kurang lebih 50.000 domain yang menggunakan PHP/FI sebagai bahasa pemrograman untuk website, atau sekitar 1% dari total domain yang ada pada waktu itu. Booming PHP/FI tersebut membuat semakin banyak orang yang tertarik untuk berpartisipasi mengembangkan PHP/FI. Berkat kerjasama dan konstribusi mereka, PHP versi 3.0 pun dikeluarkan walau kala itu masih dalam tahap alpha.

2.5.1.2 PHP 3

PHP 3 merupakan generasi baru hasil pemgembangan PHP/FI. Banyak developer yang terlibat di dalamnya. Tak heran jika PHP 3 dianggap sebagai tonggak awal bagi terciptanya PHP versi sekarang ini. Secara resmi, peluncur PHP 3.0 ialah Andi Gutmans dan Zeev Suraski pada tahun 1997. Mereka mengeluarkan PHP 3.0 karena melihat kelemahan PHP/FI yang digunakan dalam aplikasi e-commerce. Kemudian, mereka menulisnya ulang dengan masih mengacu kepada PHP/FI. Setelah PHP 3 dikeluarkan, mereka menyarankan untuk menghentikan proyek PHP/FI karena PHP 3 masih lebih baik.

Alasan untuk mulai mengembangkan PHP, merupakan akronim dari Hypertext Preprocessor, dan memfokuskan diri pada PHP 3.0 ialah pengembangan versi ini secara meluas dalam mendukung berbagai jenis database, protokol dan API. Dengan dukungan yang semakin besar dari berbagai pihak yang menyumbangkan berbagai

modul maka, pada tahun 1998, 10% dari seluruh webserver yang ada saat itu telah menginstalasi PHP versi 3.0.

2.5.1.3 PHP 4

PHP versi 4 diluncurkan untuk menangani kelemahan PHP 3, yaitu penggunaan fungsi yang begitu kompleks. Kurangnya efisiensi waktu dan kinerja yang buruk diperbaiki dan ditulis ulang dari inti PHP 3.

Dengan penambahan fitur baru, seperti session, output buffering dan penanganan input, menjadikan PHP 4 aman dari berbagai jenis bahasa pemrograman berbasis web. Selain itu, inti perbedaan mereka terletak pada penggunaan Zend Engine. Zend engine merupakan inti dari PHP. Sebagai bagian dari inti PHP, secara fungsional ia bertugas menangani input, menterjemahkan dan mengeksekusinya. PHP juga berperan menterjemahkan fungsi.

2.5.1.4 PHP 5

Pada Juni 2004, Zend merilis PHP 5.0. PHP versi 5 muncul untuk menangani kelemahan-kelemahan yang terdapat pada versi sebelumnya. PHP versi 5 dapat membuat file swf dan applet java. Fokus utamanya adalah mengoptimalkan penggunaan PHP untuk OOP (Object Oriented Programming).

2.5.2 Skrip PHP

Skrip PHP berkedudukan sebagai tag dalam bahasa HTML. Suatu skrip akan dikenali sebagai skrip PHP bila diapit oleh tanda :

a. <?php . . . ?> b. <? . . . ?>

c. <script language=”PHP”> . . . </script>

Skrip yang dibuat dengan PHP disimpan dengan nama file dan diikuti dengan ekstensi *.php, misalnya : contoh.php. Bila skrip PHP diakses melalui komputer lokal maka file PHP disimpan di folder htdocs di web server. Sama halnya dengan penamaan dokumen HTML, pemberian nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya contoh.php akan berbeda dengan CONTOH.php atau Contoh.php. Skip PHP dapat disisipkan di bagian manapun dalam dokumen HTML, begitu pula sebaliknya skrip HTML dapat diletakkan di antara skrip PHP.

Berikut ini contoh dari skrip PHP:

a. contoh1.php <html> <head>

<title> Menyisipkan PHP di dokumen HTML </title> </head>

Dunia akan semakin mengenal: <br> <p>

<?php

echo (“Hallo dunia, Hallo PHP?”); ?>

</body> </html> b. contoh2.php <?php

echo(“Skrip Sistem Informasi menggunakan PHP !!”); ?>

<html> <body> <br> <hr>

Ini ditulis dengan HTML </body>

</html> <?php

echo(“<br>sekian. “); ?>

Hasil dokumen PHP yang ditampilkan di browser Internet Explorer:

Gambar 2.2 Dokumen PHP ditampilkan di browser IE

2.5.3 Integrasi dengan Database

PHP yang digabungkan dengan database akan lebih berkekuatan jika digabungkan dengan database yang reliabel, gratis dan mudah diinstalasi. Terdapat 2 jenis database yang memenuhi yaitu MySQL dan PostgreSQL. Kedua jenis database ini dipergunakan karena kinerja yang bagus dan, untuk mengaksesnya, PHP mempunyai fungsi khusus. Berikut ini daftar database yang didukung oleh PHP sampai versi 5 :

Tabel 2.2 Daftar Database-Database Yang Didukung PHP

No. Nama Database No. Nama Database

1. 2. 3. 4. 5. 6. 7. 8. 9. 10 11. Adabas D DBase Empress FilePro (read-only) Hyperwave IBM DB2 Informix Ingres Interbase FrontBase MSQL 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Direct MS-SQL MySQL ODBC

Oracle (OCI7 dan OCI8) Ovrimos PostgreSQL SQLite Solid Sybase Velocis Unix dbm

PHP mempunyai fungsi khusus untuk mengakses MySQL. Ada sekitar 48 fungsi yang didukung PHP dalam mengakses MySQL dalam membuat aplikasi. Adapun yang biasa digunakan diantaranya adalah :

a. mysql_connect()

Fungsi mysql_connect adalah untuk menghubungkan PHP dengan database MySQL. Format fungsinya adalah:

b. mysql_select_db

Setelah terhubung ke database MySQL dengan menggunakan mysql_connect, langkah selanjutnya adalah memilih database yang akan digunakan. Fungsi mysql_select_db digunakan untuk memilih database. Format fungsinya adalah:

mysql_select_db (string database, koneksi)

Koneksi ialah variabel yang terhubung ke MySQL. Jika tidak mengisi variabel koneksi maka koneksi yang terbuka saat itulah yang dianggap digunakan. Manfaat berbagai macam koneksi adalah bahwa dengan pilihan seperti itu maka dalam satu file dimungkinkan mengambil query dari 2 database sekaligus.

c. mysql_query

Dalam database MySQL, perintah untuk melakukan transaksi ialah perintah SQL. Sebutan untuk mengirim perintah SQL dinamakan query. Query memberi perintah kepada database untuk melakukan apa yang dikehendaki. Format fungsinya adalah:

int mysql_query(string query, int [link_identifier] );

d. mysql_num_rows

Kegunaan dari fungsi ini adalah untuk menghitung jumlah baris yang dikenai oleh proses SQL. Format fungsinya adalah:

e. mysql_fetch_array

Fungsi ini berkaitan dengan menampilkan data. Untuk menampilkan data, digunakan fungsi mysql_fetch_array. Dengan fungsi ini, hasil query ditampung dalam bentuk array. Format fungsinya adalah:

array mysql_fetch_array(int result, int [result_type] );

2.6 MySQL

MySQL merupakan salah satu perangkat lunak sistem pengelola basis data (Data Base Management System). MySQL juga dapat dikategorikan sebagai Relational Data Base Management System (RDBMS), karena dalam pembuatan basis data pada MySQL dapat dipilah-pilah ke dalam berbagai tabel 2 (dua) dimensi. Setiap tabel pada MySQL terdiri atas lajur horizontal dan lajur vertical.

MySQL, pada saat ini, banyak digunakan oleh pemrogram web untuk membangun situs yang memerlukan basis data sebagai data dan pengolahan data.

2.7 Macromedia Fireworks MX 2004

Macromedia Fireworks MX 2004 adalah sebuah program andal dalam pengolahan grafis, terutama grafis web. Oleh karena itu kemampuan dan fasilitasnya dirancang dan dioptimalkan untuk menangani pembuatan dan pengeditan gambar web.

Fitur-fitur dalam Fireworks MX 2004 antara lain: server-side support yang memungkinkan kita untuk menyimpan file fireworks ke dalam bentuk ASP, PHP, atau CFM. Dengan fitur tersebut maka dapat dibuat web dinamis yang interaktif.

2.8 Macromedia Dreamweaver MX 2004

Macromedia Dreamweaver adalah sebuah HTML editor professional untuk mendesain secara visual dan mengelola situs web maupun halaman web.

Saat ini terdapat software dari kelompok Macromedia yang banyak digunakan untuk mendesain situs web. Macromedia banyak digunakan untuk mendesain situs web. Macromedia Dreamweaver 3 merupakan versi lama dari Macromedia

Dreamweaver dan merupakan Web Authoring terbaik untuk tahun 2000. Pada tahun 2001, Macromedia meluncurkan Macromedia Dreamweaver 4 yang lebih baik dan lebih canggih lagi. Pada tahun 2002 Macromedia meluncurkan versi baru lagi, yaitu Macromedia Dreamweaver MX. Macromedia Dreamweaver saat ini adalah

Dreamweaver MX 2004. Pada versi ini terdapat beberapa kemampuan bukan hanya sebagai software untk desain web saja tetapi juga untuk menyunting kode serta

pembuatan aplikasi web dengan menggunakan berbagai bahasa pemrograman web antara lain JPS, PHP, ASP dan ColdFussion.

Dreamweaver merupakan software utama yang digunakan oleh web desainer maupun Web programmer guna mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam

desain maupun membangun situs, web. Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap.

Fasilitas penyuntingan secara visual dari Dreamweaver MX 2004 membuat kita dapat menambah desain dan fungsionalitas halaman web tanpa perlu menulis satu baris kode pun. Anda dapat membuat dan mengedit image dalam Macromedia

Fireworks. Kita juga dapat menambahkan objek Flash secara langsung dalam Dreamweaver MX 2004.

Dalam membuat suatu website diperlukan suatu editor. Salah satu editor yang sangat sederhana adalah notepad. Dengan perkembangan perangkat lunak, suatu perusahaan yang bernama Macromedia, Inc. membuat suatu editor berbasis GUI yang dikhususkan untuk pembuatan website yang diberi nama Dreamweaver.

Dreamweaver merupakan editor HTML yang professional untuk mendesain, menulis kode program, dan mengembangkan website, halaman web, dan aplikasi web. Dalam pengerjaannya, Dreamweaver memberikan 3 (tiga) pilihan yaitu bekerja dengan menulis kode program (Menu Code), dengan pengeditan secara visual (Mode Design) dan dengan tampilan keduanya (Mode Split). Dreamweaver juga menyediakan alat-alat bantu untuk mengembangkan kreativitas pembuatan web.

BAB 3

SEKILAS FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

3.1 Sejarah Universitas Sumatera Utara

Pada tanggal 20 bulan November tahun 1957, Presiden Republik Indonesia Dr. Ir. Soekarno meresmikan berdirinya Universitas Sumatera Utara ( USU) yang merupakan perguruan tinggi negeri ke tujuh di Indonesia.

Awal berdiri, USU mengelola tiga fakultas yaitu: Fakultas Kedokteran, Fakultas Hukum dan Pengetahuan Kemasyarakatan serta Fakultas Pertanian (1958), Fakultas Teknik (1959), Fakultas Ekonomi (1961), Fakultas Kedokteran Gigi (1961), Fakultas Sastra (1965), Fakultas Matematika & Ilmu Pengetahuan Alam (1965), Politeknik (1980), Fakultas Ilmu Sosial & Politik (1980) dan Fakultas Kesehatan Masyarakat (1993). Pada tahun 1964 Fakultas Keguruan dan Ilmu pendidikan dipisahkan dari USU dengan berdirinya Institut Keguruan dfan Ilmu Pendidikan (IKIP) Negeri Medan yang saat ini dikenal sebagai Universitas Negeri Medan (UNIMED).

3.1.1 Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara

Pendirian Fakultas Ilmu Pasti & Ilmu Alam Universitas Sumatera Utara (FIPIA USU) mulai dirintis sejak tahun 1959. Universitas Sumatera Utara saat itu dipimpin oleh Presiden USU yang dijabat Prof. dr. A. Sofjan. Namun dengan terjadinya pergolakan di USU yang dijabat oleh seorang Rektor yaitu drg. Nazir Alwi. Melalui Surat Keputusan Menteri Pendidikan dan Kebudayaan Republik Indonesia No. 9683/Sekret/BUP/1965 tertanggal: 30 November 1965 yang ditanda tangani oleh Prof. dr. Syarief Thayeb. Tetapi sebelum Surat Keputusan diterbitkan, pimpinan FIPIA USU telah terlebih dahulu dilantik oleh Menteri Pendidikan dan Kebudayaan Republik Indonesia pada tanggal 25 Agustus 1965 dengan susunan sebagai berikut:

Dekan : Andreas Teman Barus, M.Sc. Pembantu Dekan-I : Drs. Pemimpin Siagian Pembantu Dekan-II : Drs. Dj. Pinem

Pembantu Dekan-III : Drs. Raden Achmad Soekemi, Apt.

Hasil musyawarah dan mufakat para pimpinan FIPIA USU ditetapkan bahwa pada tanggal: 25 Agustus 1965 merupakan Hari Kelahiran FIPIA/FMIPA USU Medan.

Peresmian berdirinya FIPIA USU ditandai dengan dibukanya tiga jurusan yaitu : Jurusan Matematika. Fisika dan Kimia. Pada tahun 1969, FIPIA USU membuka Jurusan Farmasi dan pada tahun 1981 membuka Program Diploma-3 Pendidikan Ahli Kimia Analisis (PAKA) melalui Surat Keputusan Rektor USU Nomor: 3491/PT05/SK/C/1981. Pada tahun 1974 FIPIA USU berubah nama menjadi Fakultas Ilmu Pasti dan Ilmu Pengetahuan Alam USU, namun beberapa tahun

kemudian yaitu pada tahun 1982 kembali merubah nama dengan Fakultas Matematika dan Ilmu Pengetahuan Alam (FMIPA) USU.

Pada tahun 1985 FMIPA USU dipercayakan permerintah Republik Indonesia untuk menyelenggarakan Program Diploma-3 Kependidikan meliputi Program Studi: Matematika, Fisika, Kimia dan Biologi. Program ini dimaksudkan untuk pengadaan guru-guru dalam bidang eksakta yang akan ditempatkan di daerah dan seluruh mahasiswanya memperoleh bea siswa.

3.1.1.1Visi dan Misi Fakultas Matematika dan Ilmu Pengetahuan Alam

Visi Fakultas Matematika dan Ilmu Pengetahuan Alam

Menjadikan fakultas sains yang terkemuka di Asia melalui pengembangan sumber daya manusia yang berorientasi pada ilmu pengetahuan, teknologi dan industri serta memiliki sikap dan perilaku professional.

Misi Fakultas Matematika dan Ilmu Pengetahuan Alam

1. Mempersiapkan sumber daya manusia yang berkualitas sarjana sains melalui penyelenggaraan pendidikan, penelitian dan pengabdian pada masyarakat. 2. Mempersiapkan sarjana sains yang professional dan bertanggungjawab secara

etik dan strategic.

3. Mampu melihat kesempatan untuk kepentingan masyarakat teknologi dan industri melalui peningkatan ilmu pengetahuan.

4. Mampu mengamalkan ilmu yang dimiliki demi bangga dan Negara.

Tujuan Fakultas Matematika dan Ilmu Pengetahuan Alam

1. Menyelenggarakan proses belajar mengajar dalam bidang ilmu-ilmu dasar untuk menghasilkan anggota masyarakat yang memiliki kemampuan akademik dan/atau professionalisme tinggi dan bertanggungjawab di dalam menerapkan, mengembangkan dan/atau menciptakan ilmu pengetahuan.

2. menyelenggarakan praktek laboratorium dalam bidang ilmu-ilmu dasar untuk menghasilkan dan/atau mewujudkan ilmu pengetahuan dan teknologi yang bermanfaat bagi kemajuan serta kesejahteraan masyarakat.

3. meningkatkan mutu proses penyelenggaraan pendidikan dan praktek laboratorium secara berkelanjutan melalui peningkatan kualitas sumber daya manusia, sarana dan prasarana, sumber daya informasi, organisasi dan manajemen.

4. Meletakkan dasar-dasar professionalisme penyelenggaraan pendidikan, pendidikan, penelitian dan pengabdian pada masyarakat untuk mewujudkan Fak. MIPA Universitas Sumatera Utara sebagai suatu unsur penunjang akademik dengan akuntabilitas tinggi.

3.1.2 Program Studi D-3 Ilmu Komputer

Program Diploma III Komputer dibuka pada tahun 1993, di bawah Jurusan Matematika FMIPA USU. Lapangan kerja yang memungkinkan untuk alumni antara

lain: perusahaan-perusahaan, lembaga-lembaga instansi pemerintahan maupun swasta, indusri, bidang pertahanan keamanan, perkebunan, bank dan perkantoran

3.1.2.1 Visi dan Misi Program Studi D-3 Ilmu Komputer

Visi Program Studi D-3 Ilmu Komputer

Menjadi tempat penyediaan tenaga yang profesional dan siap pakai di bidang komputer di wilayah Sumatera Utara tahun 2010.

Misi Program Studi D-3 Ilmu Komputer

1. Meningkatkan kualitas staf pengajar di bidang komputer secara profesional. 2. Meningkatkan sarana dan prasarana laboratorium komputer.

3. Membina kerjasama program studi dengan penguna tenaga kerja.

3.2 Struktur Organisasi

Dewan Pertimbangan

Fakultas DEKAN

Dept.

Matematik Dept. Dept. Dept. Dept.

Dept. Ilmu Dosen Adm Lab Dosen Adm Lab Dosen Adm Lab Dosen Adm Lab Dosen Adm Lab Dosen Adm Lab Unit

Pelaksana Bengkel

Unit Pengembangan Pembantu Dekan

Bid. Akademik

Pembantu Dekan Bid. Kepeg & Keu

Ka. Bag. Administrasi/Tata Usaha

Ka. Sub. Bag. Akademik

Ka. Sub. Bag. Kepeg & Kau Pembantu Dekan

Bid. Kemhs &

Alumni Ka. Sub. Bag. Kemhs &

Alumni

Ka. Sub. Bag. Um & Perlengkp

3.2.1 Bagian Administrasi

Ka. Bag. Tata Usaha/ Administrasi : Mara Syarifat Nainggolan, SH Ka. Sub. Bag. Akademik/ Pendidikan : Nursiah Siahaan, SH

Ka. Sub. Bag. Kepegawaian & Keuangan : Mutaqqien, SE Ka. Sub. Bag. Kemahasiswaan & Alumni : Basri Idris Ka. Sub. Bag. Umum & Perlengkapan : Edi Suriono

3.2.2 Laboratorium Penelitian FMIPA USU

Ketua : Dr. Harry Agusnar, M.Sc.,M.Phill. Sekretaris : Drs. Eddy Marlianto, M.Sc., PhD.

3.2.3 Unit Pelaksana Teknis FMIPA USU Mikroelektronik, Tiup Gelas & Kalibrasi

Ketua : Drs. Kurnia Brahmana, Dipi. Ing.,MSi.

Penyimpanan Peralatan Laboratorium

Ketua : Drs. Ahmad Darwin M.Sc. Sekretaris : Dra. Saodah, M.Sc.

3.2.4 Unit Pengembangan Pendidikan FMIPA USU Ketua : Drs. Saut Nainggolan Sekretaris : Drs. Syarial Yoenoes, SU., Apt.

BAB 4

PERANCANGAN SISTEM

4.1 Perencanaan dan Perancangan

Persiapan dalam membuat suatu situs, sebelumnya harus sudah mempunyai bayangan tentang situs yang akan dibuat terutama dalam hal sifat, yaitu dinamis dan statis sebuah halaman situs. Halaman yang statis akan selalu memunculkan tampilan dan isi yang sama tanpa membedakan hal-hal yang berkaitan dengan pengaksesan halaman tersebut, misalnya : ketentuan user, waktu pengaksesan dan privelege user, dan lain-lain. Halaman statis tidak terkoneksi dengan database. Penulisan kode sampai desain tampilan relatif mudah dilakukan.

Jika halaman situs akan terkoneksi dengan database atau memiliki perubahan-perubahan terntentu layaknya program aplikasi seperti pemanggilan fungsi, looping, pengecekan kondisi If-Then dan lain-lain, dan bisa menampilkan informasi secara dinamis maka harus menggunakan script.

Sebelum membangun situs, perlu dilakukan identifikasi awal antara lain:

a. Situs apa yang akan dibuat?

b. Siapa saja pengunjung yang diharapkan berkunjung ke situs tersebut? c. Apa saja aktivitas yang dapat mereka lakukan dalam situs?

d. Apa saja fasilitas yang bisa dimanfaatkan oleh pengunjung dari situs? e. Apa sasaran yang ingin dicapai dari pembuatan situs tersebut?

Permasalahan yang ditemukan dapat dijadikan sebagai acuan dalam membuat situs, karena dengan pertanyaan-pertanyaan tersebut bayangan tentang pembuatan situs semakin jelas dan dapat melanjutkan pada persiapan selanjutnya. Persiapan yang dilakukan, selain komputer yang baik dan nyaman digunakan, penulis juga membutuhkan software web server, bahasa script web, software database karena situs yang akan dibuat menggunakan database, dan editor untuk script yang akan digunakan.

Berkenaan dengan situs yang akan dibangun, maka jawaban untuk pertanyaan di atas sebagai berikut:

a. Situs yang akan dibuat adalah situs lembaga pendidikan pemerintahan, dalam hal ini adalah Universitas Sumatera Utara yang difokuskan pada program studi D-3 Ilmu Komputer, yang menyediakan informasi-informasi mengenai pelaksanaan praktek kerja lapangan yang dilaksanakan setiap tahunnya oleh mahasiswa Jurusan D-3 Ilmu Komputer, profil, pengumuman, daftar perusahaan yang bekerja sama dengan Universitas Sumatera Utara, data mahasiswa dan data dosen pembimbing.

b. Pengunjungnya adalah dosen pembimbing dan mahasiswa Jurusan D-3 Ilmu Komputer Universitas Sumatera Utara, pengguna lain yang ingin mengetahui kegiatan-kegiatan yang dilaksanakan di Fakultas Matematika dan Ilmu Pengetahuan Alam.

c. Aktivitas yang akan dijumpai di dalam situs tersebut adalah pengunjung dapat mengetahui informasi mengenai jurusan D-3 Ilmu Komputer, membaca pengumuman atau berita seputar jurusan D-3 Ilmu Komputer, mahasiswa dapat melihat daftar yang memuat sejumlah perusahaan yang tersebar diberbagai tempat di Medan dan di luar kota lainnya, melihat hasil kerja praktek kerja lapangan dan melihat nilai yang diberikan dosen pembimbing.

d. Target yang akan dicapai dari situs tersebut adalah pengunjung khususnya mahasiswa tingkat satu dan tingkat dua yang mau melaksanakan praktek kerja lapangan dapat memperoleh informasi yang lengkap.

Kemudian langkah selanjutnya adalah membuat outline atau garis besar dari situs tersebut. Salah satu cara yang dapat digunakan adalah dengan membuat aliran informasi atau relasi antar tabel (bagan alir) situs tersebut. Relasi antar tabel merupakan gambaran yang menampilkan struktur, hierarki dan isi halaman per halaman, biasanya berbentuk tabel-tabel yang saling berhubungan ditentukan oleh primary key, dimana beberapa tabel terpisah namun sebagian besar saling berhubungan antara tabel yang satu dengan yang lain.

Dengan adanya bagan percabangan menu, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman dan link atau navigasi antara halaman-halaman tersebut. Di samping itu, juga dapat mempermudah dalam mengatur kode dan file HTML-nya, terutama link untuk navigasi penjelajahan ke seluruh halaman web. Secara sederhana bagan rancangan menu dalam membangun situs ini dapat dilihat pada gambar di bawah ini:

Gambar 4.1 Bagan rancangan menu aplikasi web (situs)

Pada gambar 4.1,bagannya tampak sederhana, tapi di setiap cabang menu masih terdapat cabang-cabang lagi bergantung pada seberapa kompleks dan seberapa banyak halaman yang akan dibuat. Misalnya pada bagian ’Halaman Login’ dibagi lagi ke dalam tiga bagian yaitu ’Admin’, ’ Dosen’, ’Mahasiswa’ maka harus dilanjutkan tiga cabang lagi. Lihat Gambar 4.2.

Home Profil Informasi Biodata

Mahasiswa

Dosen Pembimbin Menu Kategori

Daftar Perusahaan Hasil Kerja

Gambar 4.2 Percabangan bagan menu dalam suatu situs

Pada percabangan salah satu bagan menu diatas menununjukkan bahwa setelah admin memasuki ’Halaman login’ selanjutnya admin berwenang untuk melakukan perubahan data pada tabel-tabel yang merupakan kelanjutan percabangannya. Semakin kompleks data yang ditampilkan sebuah situs maka semakin banyak pula percabangan antar tabel dalam database-nya. Dengan demikian, PHP mampu membangun suatu situs menjadi dinamis, dimana pada suatu halaman akan dipakai oleh ribuan artikel yang ditampilkan sesuai dengan permintaan user.

Home

Halaman Login

Admin Dosen

Mahasiswa

Perusahaan

Nilai Dosen

Nilai Perusahaan

Pengguna

Mahasiswa _Event

4.2 Mendesain Layout/Template

Sebelum membuat situs yang perlu diperhatikan adalah desain layout situs tersebut. Dalam mendesain harus diperhatikan bentuk, pemilihan warna, bentuk dan juga penempatan gambar-gambar. Salah satu faktor agar situs diminati para pengunjung adalah desain layout yang bagus. Adapun langkah-langkah umum yang penulis lakukan dalam mendesain layout adalah sebagai berikut:

a. Membuat dokumen baru dengan ukuran panjang 1000 pixel dan lebar 900 pixel. Resolution: 72 Pixels/Inch, dan Canvas color: Custom dengan warna biru muda (#4ABAE2).

b. Selanjutnya menggambar kotak memanjang. Dengan pilihan warnanya pada Properties di bagian Fill category: Solid dengan warna Abu-abu (#0E1937). Selanjutnya, mengatur posisi dan ukurannya.

c. Menggambar bentuk-bentuk unik, menduplikasi bentuk unik , memberikan pola efek bayangan, memberikan hiasan foto dan logo hingga menggambar tombol-tombol navigasi dan mengatur bagian content layout.

d. Dengan memanfaatkan tool-tool yang ada di Macromedia Fireworks MX 2004 seperti rectangular marquee tool, gradient fill tool, line tool, pointer tool dan text tool dan dengan kreasi penulis, dibentuk suatu layout seperti gambar berikut ini:

Gambar 4.3 Desain awal layout web

4.3 Pemotongan Grafik Web

Pemotongan (slice) merupakan cara pemotongan gambar besar menjadi gambar-gambar dengan ukuran yang lebih kecil, yang nantinya gambar-gambar-gambar-gambar tersebut akan disatukan kembali menjadi satu kesatuan gambar yang utuh dalam HTML (Hypertext Markup Language). Tujuan utama proses slice ini adalah untuk mempercepat proses download/akses sebuah situs web di Internet.

Pemotongan (slice) grafik adalah suatu proses memotong suatu grafik menjadi bagian-bagian kecil. Slice merupakan suatu teknik yang sering digunakan oleh seorang web designer untuk mempercepat akses loading situs yang dibuat.

Suatu browser tidak membaca keseluruhan grafik terlebih dahulu lalu menampilkannya tetapi browser akan membaca potongan kecil grafik yang telah dibuat lalu langsung menampilkannya. Dengan memanfaatkan teknik ini dapat mempercepat proses loading dalam menampilkan halaman web.

Pemotongan grafik ini dapat dilakukan di Photoshop atau menggunakan Image Ready yang sudah terinstal secara otomatis ketika menginstal Photoshop. Adapun tool yang digunakan adalah slice tool dan slice select tool. Hasil dari prosesnya dapat dilihat pada gambar di bawah ini:

4.4 Mempersiapkan Database Server

MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa

Inggris: database management system) atau DBMS yang multithread, multi-user,

dengan sekitar 6 (enam) juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat lunak dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber dimiliki oleh penulisnya masing-masing, MySQL dimiliki dan disponsori oleh sebuah perusahaan komersial Swedia MySQL AB, dimana memegang hak cipta hampir atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia yang mendirikan MySQL AB adalah: David Axmark, Allan Larsson, dan Michael "Monty" Widenius.

Pada tahap ini dipersiapkan tempat untuk menampung data di server, data tersebut nantinya akan diproses oleh program yang kita buat pada tahap pemrograman, baik penambahan, pengeditan, panghapusan dan menampilkan isi database ke halaman web. Database terdiri atas tabel-tabel yang dibuat dengan menggunakan program MySQL. Database dibuat di PhpMyAdmin dengan nama database adalah ’pkl’ dan di dalam database tersebut terdiri dari sebelas tabel.

Adapun database yang dibuat oleh penulis adalah database pkl dengan tabel-tabel sebagai berikut:

a. Tabel login terdiri dari:

Tabel 4.1 Tabel login

Field Type User Varchar(60) Password Varchar(60) status Varchar(60)

b. Tabel mahasiswa terdiri dari:

4.2 Tabel mahasiswa

Field Type NIM int(10)

NIP Varchar(10) NPWP Varchar(10) Nama_mhs Varchar(60) Kelas_mhs Varchar(10) Jenis_kel_mhs Varchar(60) Tmptlahir_mhs Varchar(60) Tgllahir_mhs Date

c. Tabel perusahaan terdiri dari:

4.3 Tabel perusahaan

Field Type NPWP int(11)

Nama_per Varchar(60) Alamat_per Varchar(60)

d. Tabel dosen terdiri dari:

4.4 Tabel dosen

Field Type NIP int(11)

Nama_dos varchar(60) Alamat_dos varchar(60) Notelp_dos varchar(10)

e. Tabel nilai_dosen terdiri dari:

4.5 Tabel nilai_dosen

Field Type Idnilai_dosen int(11)

Namanil_dos Varchar(60) Keterangan_dos Varchar(60)

f. Tabel nilai_perusahaan terdiri dari:

4.6 Tabel nilai_perusahaan

Field Type IdNilai_per int(11)

Namanil_per Varchar(60) Keterangan_per Varchar(60)

g. Tabel nilai_mhs_dosen terdiri dari:

4.7 Tabel nilai_mhs_dosen

Field Type IdNilai int(11)

NIM Varchar(10) Idnilai_dosen Varchar(11) nilMhs_dos Varchar(10)

h. Tabel nilai_mhs_perusahaan terdiri dari:

4.8 Tabel nilai_mhs_perusahaan Field Type IdNilai int(11)

NIM Varchar(10) IdNilai_per Varchar(11) nilMhs_per Varchar(10)

i. Tabel hasil_kerja_praktek terdiri dari:

4.9 Tabel hasil_kerja_praktek

Field Type IdHasil int(11)

NIM Varchar(10) Judul_laporan Varchar(100) lokasi Varchar(60) keterangan Varchar(60)

j. Tabel pengumuman terdiri dari:

4.10 Tabel pengumuman

Field Type IdPengumuman int(11)

Judul Varchar(60)

isi Text Tgl_pengumuman date status Varchar(2)

k. Tabel event terdiri dari:

4.11 Tabel event

Field Type IdEvent int(11)

Nama_event Varchar(10) Tgl_event Varchar(100) Lokasi_event Varchar(60)

4.5 Relasi Antar Tabel

Relasi database adalah model paling sederhana dari suatu komponen basis data yang saling berhubungan antara suatu tabel basis data dengan tabel basis data yang lain sehingga mudah dipahami. Model ini menggunakan sekumpulan tabel berdimensi dua yaitu relasi dan tabel. Masing-masing relasi tersusun atas tupel atau barisan dan atribut, relasi dirancang sedemikian rupa sehingga dapat menghilangkan kemubajiran data atau redudansi dan menggunakan kunci utama (primary key) sebagai penghubung relasi.

4.5.1 Mengenal key pada MySQL

Key merupakan constraint (pembatas) yang diterapkan ke sebuah tabel untuk memastikan integritas data. Constraint menentukan aturan yang harus diikuti untuk menjaga konsistensi dan ketepatan data. Constraint dapat dibuat pada waktu pembuatan tabel atau ditambahkan setelah tabel dibuat pada waktu pembuatan tabel atau ditambahkan setelah terbentuk. Ketika sebuah constraint tersebut akan mengecek data yang telah ada. Jika tidak mungkin diterapkan , constraint akan ditolak.

Constraint dapat terdiri dari 3 key (kunci) yaitu:

1. Primary key

Primary key merupakan constraint yang diterapkan pada sebuah atau lebih kolom sehingga mempunyai nilai unik dalam mengidentifikasi baris-baris pada tabel. Kolom primary key tidak dapat berisi nilai NULL karena digunakan secara unik untuk mengidentifikasi baris-baris pada sebuah tabel. Primary key berguna untuk memastikan integritas seluruh data.

2. Unique key

Unique key digunakan untuk memberikan keunikan kepada kolom yang bukan merupakan kolm primary key. Kolom primary key secara otomatis memberi constraint yang uik. Constraint dari Unique key hampir sama dengan constraint dari Primary key. Perbedaannya adalah kolom unique key dapat diberi nilai NULL.

3. Foreign key

Foreign key merupakan constraint untuk membuang ketidak-konsitenan dua tabel ketika data pada sebuah tabel tergantung kepada data yang ada di tabel lain.

Berikut bagan yang menunjukkan hubungan antar tabel, dimana tabel tersebut saling berhubungan sehingga data dapat diolah dengan baik. Berdasarkan bagan aliran data antar tabel berikut menunjukkan bagaimana aliran data yang diinput pada satu tabel dan hubungannya dengan tabel lainnya. Dimana <p> merupakan satu field yang menjadi primary key.

Gambar 4.5 Bagan relasi data antar tabel berdasarkan primary key mahasiswa NIM <P> NIP NPWP Nama_mhs Kelas_mhs Jenis_kel_mhs Tmptlahir_mhs Tgllahir_mhs perusahaan NPWP Nama_per Alamat_per Nilai_dosen Idnilai_dosen <P> Namanil_dos Keterangan_dos Nilai_mahasiswa _perusahaan IdNilai <P> NIM IdNilai_per nilMhs_per Nilai _mahasiswa_dosen IdNilai <P> NIM Idnilai_dosen nilMhs_dos Pengumuman IdPengumuman Judul isi Tgl_pengumuman status Hasil_kerja_praktek IdHasil <P> NIM Judul_laporan lokasi keterangan Nilai_perusahaan IdNilai_per <P> Namanil_per Keterangan_per 1 login User Password status dosen NIP <P> Nama_dos Alamat_dos notelp_dos 1 ₁ 1 1 1 1

4.5 Membangun Halaman Situs

Halaman – halaman situs yang terdapat dalam website sistem informasi pelaksanaan praktek kerja lapangan ini adalah

a. Halaman index.php, merupakan halaman utama yang akan diakses pertama kali situs dibuka. Halaman ini berisikan sekilas tentang penjelasan PKL (Praktek Kerja Lapangan), kata sambutan dan tujuan PKL (Praktek Kerja Lapangan) dan link-link menuju halaman home, dosen dan login.

b. Halaman profil.php merupakan halaman yang memberikan informasi tentang sejarah singkat USU (Universitas Sumatera Utara) secara umum dan sejarah singkat MIPA (Matematika dan Ilmu Pengetahuan Alam) yang menaungi jurusan D-3 Ilmu Komputer secara khusus, visi dan misi, dan struktur organisasi dari Fakultas Matematika dan Ilmu Pengetahuan Alam Medan.

c. Halaman pengumuman.php, merupakan halaman yang memberikan informasi tentang pengumuman-pengumuman yang dikeluarkan FMIPA (Fakultas Matematika dan Ilmu Pengetahuan Alam) dimana pengumuman tersebut dikeluarkan oleh jurusan khusus untuk Mahasiswa/i jurusan D-3 Ilmu Komputer Universitas Sumatera Utara.

d. Halaman mahasiswa.php, merupakan halaman yang menampilkan data-data mahasiswa jurusan D-3 Ilmu Komputer yang terdiri dari 3 (tiga) kelas dan

Mahasiswa tersebut telah mengikuti PKL (Praktek Kerja Lapangan) yang mana dalam hal ini hanya difokuskan pada Mahasiswa tingkat tiga.

e. Halaman dosen.php, merupakan halaman yang memuat daftar data-data dosen pembimbing, khususnya yang membimbing mahasiswa Jurusan D-3 Ilmu Komputer yang menampilkan nama dosen, alamat dan nomor telepon sehingga mahasiswa dengan mudah dapat memperoleh keterangan yang diperlukan yang berkaitan dengan dosen pembimbing.

f. Halaman hasil_kerja_praktek.php, merupakan halaman yang mengizinkan pengunjung yang mana adalah mahasiswa jurusan D-3 Ilmu Komputer untuk mengisikan laporan PKL (Praktek Kerja Lapangan), mulai dari judul dan juga bisa meng-upload file laporan yang berekstension .pdf, .sehingga dosen dapat melihat hasil laporan hanya dengan membuka halaman ini. Dan file yang telah dismpan bisa disimpan dan dipindahkan sewaktu-waktu diperlukan lagi.

g. Halaman perusahaan.php, merupakan halaman yang menampilkan daftar perusahaan-perusahaan yang telah menerima mahasiswa jurusan D-3 Ilmu Komputer untuk melakukan PKL (Praktek Kerja Lapangan) di perusahaan tersebut. Melalui halaman ini pengunjung dapat melihat dan juga memilih perusahaan mana yang mereka inginkan sebagai tempat PKL (Prakter Kerja Lapangan) dan bisa memperoleh informasi lebih awal. Dengan demikian mahasiswa dengan mudah bisa menemukan perusahaan dan alamat perusahaan tersebut yang memudahkan mahasiswa untuk menjatuhkan permohonan ke perusahaan tersebut.

<? } ?> </select> </td> </tr>

<tr>

<td>Nilai Perusahaan</td> <td>:</td>

<td><input type="text" class="post" name="nil" value="<? echo $data[0]['nilMhs_per']?>" size="1" maxlength="1"/>

</td> </tr>

<tr>

<td colspan="4" align="center"><input type="submit" class="post" name="update_nilai_mhs_perusahaan" value="Ubah" /></td>

</tr> </form> </table> <? }

//jika di edit

if(@isset($_GET['edit'])) {

display_edit_nilai_mhs_perusahaan($_GET['id']); }

if(@isset($_POST['update_nilai_mhs_perusahaan'])) {

$hasil =

update_one_nilai_mhs_perusahaan($_POST['idNilai'],$_POST['NIM'],$_POST['idNil '],$_POST['nil']);

if($hasil==true)

echo "Success!"; else

echo "Fail!"; }

//untuk menampilkan

function get_all_nilai_mhs_perusahaan() {

$sql = "select a.*, b.namanil_per from nilai_mhs_perusahaan a, nilai_perusahaan b where a.idNilai_per=b.idNilai_per";

//echo $sql;

$result = mysql_query($sql); if(!$result) return false;

if($rows==0) return false; else

{

//berhasl dieksekusi querynya dan ad isi tabl nya maka dikembalikan array

$ret = db_result_to_array($result);

return $ret;

}

//1.tandanya ada nilai kembalian sebuah fungsi, didalm fungsi tu ad return }

function display_all_nilai_mhs_perusahaan() {

//2.nilai kembalian dr fugsi 'get_all_mahasiswa' dtampung di $data $data = get_all_nilai_mhs_perusahaan();

if($data!=false) {

?>

<span class="d_header">NILAI MAHASISWA DARI PERUSAHAAN</span>

<table border="0" cellpadding="1" cellspacing="2"> <tr class="header" align="center">

<td><strong>NIM</strong></td>

<td><strong>Nilai Perusahaan</strong></td> <td><strong>Nilai Mahasiswa</strong></td>

<td colspan="2" align="center"><strong>Aksi</strong></td> </tr>

<?

//looping sebanyak jumlah baris data dalam tabel di dalam database foreach($data as $row)

{

//nim,nama,jenis_kelamin harus sama dgn nama field dalam tabel di database

?>

<tr class="d_contbox">

<td><? echo $row['NIM']?></td>

<td><? echo $row['namanil_per']?></td> <td><? echo $row['nilMhs_per']?></td> <td><a href="nilai_mhs_perusahaan.php?edit&id=<? echo $row['idNilai']?>">Edit</a></td>

<td><a href="nilai_mhs_perusahaan.php?delete&id=<? echo $row['idNilai']?>" title="Hapus" onClick="return window.confirm('Apakah Anda yakin untuk menghapus?')">Hapus</a></td>

</tr> <? }

echo "</table>"; }

else {

echo "tidak ada data dalam tabel!"; }

}

display_all_nilai_mhs_perusahaan(); //akhir untk menampilkan

}

include 'footer.php';?>

B.17 menu.php

<style type="text/css"> <!--

.style2 {color: #009999}

.style3 {font-family: "Eras Medium ITC"; color: #009999; } .style4 {font-size: 16px}

.style8 {

font-family: "Modern No. 20"; font-size: 14px;

}

.style9 {font-family: "Modern No. 20"} -->

</style>

<table background="images/batang.jpg" border="0"> <tr>

<td height="46">

<a href="index.php" class="style2 style4 style9">HOME</a> | <a href="dosen.php" class="style2 style4 style9"> Dosen</a> | <?

if($_SESSION['kelompok']=='admin'||$_SESSION['kelompok']=='dosen') {

?>

<a href="mahasiswa.php">Mahasiswa</a>| <a href="perusahaan.php">Perusahaan</a>| <a href="nilai_dosen.php">Nilai Dosen</a>|

<a href="nilai_perusahaan.php">Nilai Perusahaan</a>| <a href="pengguna.php">Pengguna</a>|

<a href="event.php">Event</a>|

<a href="pengumuman.php">Pengumuman</a>| <?

}

if($_SESSION['kelompok']=='dosen') {

?>

<a href="hasil_kerja_praktek.php">Laporan Mahasiswa</a>| <a href="profil_dosen.php">Profil Dosen</a>|

<a href="nilai_mhs_dosen.php">Nilai Mahasiswa Dosen</a>|

<a href="nilai_mhs_perusahaan.php">Nilai Mahasiswa Perusahaan</a>| <?

}

if($_SESSION['kelompok']=='mahasiswa') {

?>

<a href="profil_mahasiswa.php">Profil mahasiswa</a>| <a href="hasil_kerja_praktek.php">Laporan Mahasiswa</a>| <?

} ?>

<a href="login.php" class="style9 style2 style4">Login</a> <br />

<br> </td> </tr>

</table>

B.18 global.css

/* CSS Document */ .header{

font-family:Arial, Helvetica, sans-serif; font-size:12px;

color:#264B84; font-weight:bold;

background-color:#CCDCE6; }

.contbox{

font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;

text-align:justify; color:#001700; line-height:16px; }

.d_header{

font-family:Arial, Helvetica, sans-serif; font-size:16px;

color:#264B84; font-weight:bold; }

.s_header{

font-family:Arial, Helvetica, sans-serif; font-size:14px;

color:#264B84; font-weight:bold;

}

.d_contbox{

font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;

text-align:justify; color:#001700; line-height:20px;

background-color:#E3E9F2; }

.p_header{

font-family:Arial, Helvetica, sans-serif; font-size:12px;

color:#1D601A; font-weight:bold; }

.p_contbox{

font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;

text-align:left; color:#006600; }

a.home {

font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;

text-decoration:none; color:#264B84; }

a.home:hover {

color:#164514; }

a {

font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;

text-decoration:none; color:#3F6581 }

a:hover {

color:#006F00 }

a.back {

font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;

text-decoration:none; color:#385F7E }

a.back:hover {

}

.tanggal {

font-family:Georgia, "Times New Roman", Times, serif; font-size:12px;

color:#264B84; }

.d_tanggal {

font-family:Georgia, "Times New Roman", Times, serif; font-size:14px;

color:#264B84; }

.p_tanggal {

font-family:Georgia, "Times New Roman", Times, serif; font-size:10px;

color:#788CAB; }

.tanggal_a {

font-family:Georgia, "Times New Roman", Times, serif; font-size:12px;

color:#D1F1D9; }

.contact {

font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;

color:#465551; text-align:right; padding-right:4px; padding-top:10px; padding-bottom:10px; }

input.post, textarea.post, select { background-color: #FFF; border: solid 1px #999; } input.post, select { height: 17px; }

B.19 js.js

// ActionScript Document function change(id){

ID = document.getElementById(id);

if(ID.style.display == "") ID.style.display = "none"; else

ID.style.display = ""; }