Perancangan Portal Berbasis Web Dengan Menggunakan Php Dan MySQL Pada SMA Negeri 18 Medan

(1)

PERANCANGAN PORTAL BERBASIS WEB

DENGAN MENGGUNAKAN PHP DAN MY SQL

PADA SMA NEGERI 18 MEDAN

TUGAS AKHIR

ILHAM MAHYU DANIL SRG

062406110

PROGRAM STUDI D3 ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2009


(2)

PERANCANGAN PORTAL BERBASIS WEB

DENGAN MENGGUNAKAN PHP DAN MY SQL

PADA SMA NEGERI 18 MEDAN

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat mencapai gelar Ahli Madya

ILHAM MAHYU DANIL SRG

062406110

PROGRAM STUDI DIPLOMA 3 ILMU KOMPUTER

FAKULATAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2009


(3)

PERSETUJUAN

Judul : PERANCANGAN PORTAL BERBASIS WEB

DENGAN MENGGUNAKAN PHP DAN MYSQL

PADA SMA NEGERI 18 MEDAN

Kategori

: TUGAS AKHIR

Nama

: ILHAM MAHYU DANIL SIREGAR

Nomor Induk Mahasiswa

: 062406110

Program Studi

: DIPLOMA (D-3) ILMU KOMPUTER

Departemen

: MATEMATIKA

Fakultas

: MATEMATIKA DAN ILMU PENGETAHUAN ALAM

(FMIPA) UNIVERSITAS SUMATERA UTARA

Diluluskan di

Medan, Juni 2009

Diketahui/disetujui oleh

Departemen Matematika FMIPA USU

Ketua,

Pembimbing

Dr. Saib Suwilo, M.Sc

Drs.Partano Siagian, M.Sc


(4)

PERNYATAAN

PERANCANGAN PORTAL BERBASIS WEB

DENGAN MENGGUNAKAN PHP DAN MY SQL

PADA SMA NEGERI 18 MEDAN

TUGAS AKHIR

Saya mengakui bahwa Tugas Akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan

dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juni 2009

ILHAM MAHYU DANIL

062406110


(5)

PENGHARGAAN

Puji dan syukur Alhamdulillah penulis panjatkan ke hadirat Allah SWT, yang telah

melimpahkan rahmat dan karunia-Nya, dalam menjalankan kehidupan ini. Karena berkat rahmat

dan izin-Nya pula penulis dapat menyelesaikan Tugas Akhir dengan judul

PERANCANGAN

PORTAL BERBASIS WEB DENGAN MENGGUNAKAN PHP DAN MYSQL PADA

SMA NEGERI 18 MEDAN.

Penyusunan dan penulisan Tugas Akhir ini dibuat untuk

memenuhi syarat kelulusan bagi setiap Mahasiswa Jurusan Ilmu Komputer Program Studi D-3 di

FMIPA USU Medan.

Penulis sepenuhnya menyadari bahwa penyelesaian Tugas Akhir ini tidak akan terwujud

tanpa adanya dukungan dan bantuan semua pihak. Penulis mengucapkan terima kasih dan

penghargaan yang setinggi-tingginya kepada :

1.

Bapak Dr. Eddy Marlianto, M.Sc, selaku dekan Fakultas Matematika dan Ilmu Pengetahuan

Alam Universitas Sumatera Utara.

2.

Bapak Dr. Saib Suwilo, M.Sc, selaku ketua jurusan Program Studi D-3 Ilmu Komputer.

3.

Bapak Drs. Partano Siagian, M.Sc, sebagai Dosen Pembimbing yang telah banyak

meluangkan waktu, pikiran, serta dorongan moril dalam menyelesaikan Tugas Akhir ini.

4.

Ayahanda Hasan Basri Siregar dan Ibunda Alm Tetty Mardiana Simamora tercinta, terima

kasih atas kasih sayangnya yang tulus serta dorongan materil dan spiritual. Abangku Riski

One Putra Srg, kedua kakakku Lenny Hasnita Srg. dan Nona Rahma Yanti Srg. serta adikku

Mulia Srg.

Thanks for all.

5.

Seluruh pihak sekolah SMA NEGERI 18 MEDAN yang telah bersedia membantu penulis

dalam menyelesaikan tugas akhir ini.


(6)

6.

Bapak Drs. Partano Siagian, M.Sc, selaku dosen wali yang telah memberikan dukungan

kepada penulis agar terus berprestasi.

7.

Bou

Hindun Pasaribu yang telah banyak memberikan dukungan moril kepada penulis.

8.

Sahabat-sahabatku seperjuangan anak KOM B 2006 yang namanya tidak dapat disebutkan

satu persatu. Terima kasih atas kebaikan dan perhatian kalian selama ini. Dan tak terlupakan

untuk Rizky yang telah meluangkan waktunya untuk mengajariku,

terima kasih ya Ky.

Penulis menyadari bahwa dalam penyusunan Tugas Akhir ini masih banyak kekurangan

karena keterbatasan kemampuan yang penulis miliki, untuk itu penulis mengharapkan saran dan

kritik yang membangun.

Akhir kata saya mohon maaf atas segala kekurangan yang ada dalam penulisan Tugas

Akhir ini dan sekali lagi saya berharap semoga Tugas Akhir ini dapat memberikan manfaat

walaupun hanya sedikit khususnya bagi penulis dan para pembaca umumnya.

Medan, Juni 2009

Penulis,


(7)

ABSTRAK

Perkembangan teknologi khususnya komputer pada saat ini mempunyai peranan yang sangat

panting dalam kehidupan di masyarakat. Teknologi yang berkembang sesuai tuntutan zaman

diharapkan menjadi sarana penunjang untuk menangani permasalahan yang timbul dalam

mengelola dan menyelesaikan permasalahan yang ada di perusahaan atau organisasi.

Begitu juga dengan SMA Negeri 18 Medan, diharapkan dapat menyediakan informasi

yang tepat dan akurat dalam data siswa secara on-line. System yang sedang berjalan pada SMA

Negeri 18 Medan saat ini belum sepenuhnya menggunakan komputerisasi.

Oleh sebab itu penulis mencoba merancang sebuah portal berbasis web pada SMA

Negeri 18 Medan. Dengan adanya portal ini diharapkan sekolah ini dapat menyediakan

informasi yang lebih cepat dan akurat pada siswa maupun masyarakat yang juga dapat

membantu dalam mempromosikan sekolah ini.

Portal ini dirancang dengan menggunakan bahasa program web, yaitu PHP 5.0 dan

MySQL 5.0 sebagai server database serta Apache 2.0 sebagai web server. Portal ini dirancang

sedemikian rupa agar dapat menarik minat siswa dalam memperoleh niformasi yang lebih cepat

dan akurat serta menarik. Portal ini bersifat dinamis, yaitu berarti bahwa informai yang

diberikan tersebut dapat berubah sewaktu-waktu berdasarkan keadaan yang sedang terjadi. Portal

ini meliputi banyak informasi seperti profil sekolah, data pegawai dan data siswa. Objektif

uatama Portal ini adalah untuk menyediakan jendela bagi masing-masing siswa dalam

mendapatkan informasi secara lengkap dan jelas.


(8)

DAFTAR ISI

Halaman

Persetujuan

ii

Pernyataan

iii

Penghargaan

iv

Daftar Isi

vi

Daftar Tabel

vii

Daftar Gambar

viii

Bab 1 Pendahuluan

...

1

1.1

Latar Belakang...

1

1.2

Identifikasi Masalah ...

2

1.3

Batasan Masalah ...

3

1.4

Maksud dan Tujuan ...

4

1.5

Kontribusi Penelitian ...

4

1.6

Metodologi Penelitian ...

5

1.7

Tinjauan Pustaka...

6

1.8

Sistematika Penulisan ...

7

Bab 2 Landasan Teori

...

9

2.1

Pengertian Sistem Informasi ...

9

2.2 Pengenalan internet ...

12

2.3 Pengenalan PHP ...

14

2.4 Pengenalan Mysql ...

18

2.5 Pengenalan Macromedia Dreamweaver 8 ...

19

Bab 3 Perancangan Sistem

22

3.1

Mendefenisikan Web dalam Macromedia Dreamweaver 8

22

3.2

Database Website

26

3.3

Membangun Halaman Situs Web

28

3.4

Flowchart Situs

31

3.5

Tampilan Situs Web

33

Bab 4 Implementasi Sistem

...

34

4.1

Pengertian Implementasi Sistem ...

34

4.2

Tujuan Implementasi Sistem ...

35

4.3

Komponen Dalam Implementasi Sistem...

35

Bab 5 Penutup

...

39

5.1

Kesimpulan ...

39


(9)

Daftar pustaka

...

41

Lampiran

A :

Listing Program ...

42

Lampiran B :

Surat-surat ...

43

DAFTAR TABEL

Halaman

Tabel 3.1 Tabel Home

26

Tabel 3.2 Tabel News

27

Tabel 3.3 Tabel Profil

27

Tabel 3.4 Tabel fasilitas

27

Tabel 3.5 Tabel Galery

27

Tabel 3.6 Tabel Buku Tamu

27


(10)

DAFTAR GAMBAR

Halaman

Gambar 2.1

Tampilan Ruang Kerja pada Macromedia Dreamweaver 8

20

Gambar 3.1

Tampilan Kotak Dialog Manage Sites

22

Gambar 3.2

Tampilan Windo w Site Definition

23

Gambar 3.3

Rancangan Halaman Web

29

Gambar 3.4

Alur Flowchart Menu Utama

31

Gambar 3.5

Alur Flowchart Guestbook (Buku Tamu)

32

Gambar 3.6

Alur Flowchart Administrator

33

Gambar 3.7

Tampilan Home Page SMAN 18 Medan

34

Gambar 4.1

Tampilan Sistem Operasi Windows XP

37

Gambar 4.2

Tampilan Macromedia Dreamweaver 8

38


(11)

ABSTRAK

Perkembangan teknologi khususnya komputer pada saat ini mempunyai peranan yang sangat

panting dalam kehidupan di masyarakat. Teknologi yang berkembang sesuai tuntutan zaman

diharapkan menjadi sarana penunjang untuk menangani permasalahan yang timbul dalam

mengelola dan menyelesaikan permasalahan yang ada di perusahaan atau organisasi.

Begitu juga dengan SMA Negeri 18 Medan, diharapkan dapat menyediakan informasi

yang tepat dan akurat dalam data siswa secara on-line. System yang sedang berjalan pada SMA

Negeri 18 Medan saat ini belum sepenuhnya menggunakan komputerisasi.

Oleh sebab itu penulis mencoba merancang sebuah portal berbasis web pada SMA

Negeri 18 Medan. Dengan adanya portal ini diharapkan sekolah ini dapat menyediakan

informasi yang lebih cepat dan akurat pada siswa maupun masyarakat yang juga dapat

membantu dalam mempromosikan sekolah ini.

Portal ini dirancang dengan menggunakan bahasa program web, yaitu PHP 5.0 dan

MySQL 5.0 sebagai server database serta Apache 2.0 sebagai web server. Portal ini dirancang

sedemikian rupa agar dapat menarik minat siswa dalam memperoleh niformasi yang lebih cepat

dan akurat serta menarik. Portal ini bersifat dinamis, yaitu berarti bahwa informai yang

diberikan tersebut dapat berubah sewaktu-waktu berdasarkan keadaan yang sedang terjadi. Portal

ini meliputi banyak informasi seperti profil sekolah, data pegawai dan data siswa. Objektif

uatama Portal ini adalah untuk menyediakan jendela bagi masing-masing siswa dalam

mendapatkan informasi secara lengkap dan jelas.


(12)

BAB 1

PENDAHULUAN

1.1

Latar Belakang

Komputer adalah kekuatan yang dominan di dalam masyarakat. Penggunaannya terus saja

berkembang dari tahun ke tahun yang mulanya hanya sebagai mesin pengolah informasi dan saat

ini komputer lebih beragam penggunaannya terutama dalam dunia

internet.

Teknologi informasi tidak dapat dipisahkan dengan perkembangan dunia informasi

internet

saat ini. Informasi merupakan salah satu kebutuhan di dalam suatu instansi, perusahaan,

organisasi, lembaga serta lingkungan yang berada di luar sistem. Adapun pengertian

internet

yaitu sekumpulan jaringan komputer yang saling terhubung satu dengan yang lainnya di seluruh

dunia dan berkomunikasi dengan cepat. Informasi yang disajikan di dunia

internet

sudah sangat

global dan selalu diusahakan

on time

sehingga waktu

update

suatu informasi sangat cepat.

Seiring dengan perkembangan

internet

, teknologi web dari waktu ke waktu mengalami

perkembangan yang sangat pesat. Karena itu, banyak orang yang sudah mendengar bahkan

mengetahui bagaimana membuat suatu dokumen di

internet

, yang salah satunya dengan

menggunakan

script

HTML. Biasanya pemrograman yang digunakan adalah PHP dan

server


(13)

Penulis melakukan penelitian di SMA Negeri 18 Medan sebagai langkah awal bagi

sekolah untuk meningkatkan kemampuan dan kualitas siswa. Secara umum dengan adanya web

sekolah dapat membantu sekolah untuk memiliki wadah atau media guna menginformasikan dan

mengkomunikasikan profil, potensi, kegiatan, dan berbagai keunggulan yang dimilikinya kepada

masyarakat umum juga membantu sekolah untuk memiliki media komunikasi global yang efektif

baik untuk kepentingan intern (manajemen sekolah, pengajar, siswa) maupun sebagai sarana

komunikasi global dengan berbagai pihak ekstern. Oleh karena itu, penulis mencoba merancang

suatu sistem

online

berbasis web di SMA Negeri 18 Medan, dengan membangun suatu aplikasi

web

dan

internet

dijadikan sebagai media penghubungnya.

1.2 Identifikasi Masalah

Penulis mencoba mengidentifikasi masalah sebagai berikut :

a.

Sejauh mana

website

ini dirancang semenarik mungkin agar dapat menjadi daya tarik

tersendiri sehingga dapat memenuhi keingintahuan masyarakat.

b.

Bagaimana cara mengelola data agar dapat mencakup seluruh potensi yang tersedia di

SMA Negeri 18 Medan dan digunakan secara efektif dan efisien, serta dapat diakses

dengan baik dan benar.

Menurut penulis,

website

ini dapat membantu pihak lembaga pendidikan dalam

mempublikasikan dan mengembangkan informasi tentang SMA Negeri 18 Medan ke seluruh

Kotamadya medan bahkan ke seluruh daerah di Indonesia.


(14)

Dalam membangun sistem informasi

online

yang dibuat dalam basis

website

dan akan

online

didunia

internet,

seorang web

programmer

pasti membutuhkan data serta informasi yang akurat.

Sistem informasi dan publikasi pada SMA Negeri 18 Medan masih belum tersebar secara luas.

Penulis menyadari keterbatasan dan kemampuan dalam menyelesaikan pekerjaan yang semakin

hari semakin meningkat dan rumit, serta harus memenuhi prinsip efektif dan efisien. Terlebih

lagi dalam hal memperoleh informasi yang baik dan

up to date.

Untuk itu, penulis memberikan batasan masalah dengan maksud untuk mencapai tujuan akhir

penulisan. Batasan masalah dalam pembuatan tugas akhir ini adalah :

1.

Data yang diperoleh dari lembaga pendidikan mencakup profil, kurikulum, fasilitas, dan

segala hal yang menyangkut tentang SMA Negeri 18 Medan


(15)

1.4

Maksud dan Tujuan

1.4.1 Maksud

Sejalan dengan meningkatnya peranan informasi dalam bisnis maupun teknologi, akses

internet

menjadi semakin penting bagi pengguna. Oleh karena itu, maksud dari penelitian ini adalah

untuk menemukan suatu cara dalam pemecahan masalah yang tepat dalam mempromosikan

SMA Negeri 18 Medan agar informasi yang didapat lebih mengglobal dan mudah diterima oleh

masyarakat.

1.4.2

Tujuan

Sedangkan tujuan dari penelitian ini adalah :

1.

Untuk menyampaikan informasi dan mempromosikan SMA Negeri 18 Medan agar orang tua

mau menyekolahkan anak-anak mereka di sekolah ini.

2.

Terbentuknya suatu media informasi yang berbasis web di SMA Negeri 18 Medan sehingga

para alumni dapat menjalin hubungan dengan teman-temannya.

3.

Selain itu, dapat terjalin kerjasama dan persaudaraan antara pihak pemberi informasi atau

pihak lembaga pendidikan dengan pihak peneliti.

1.5

Kontribusi Penelitian

Kontribusi yang dapat diberikan melalui hasil penelitian ini adalah :


(16)

2.

Meningkatkan

image

sekolah di masyarakat umum.

3.

Memiliki media komunikasi berupa

e-mail

maupun forum yang dapat digunakan untuk

berdiskusi antara siswa, guru, dan sekolah.

1.6

Metodologi Penelitian

Dalam penyelesaian tugas akhir ini, penulis melakukan metodologi penelitian untuk memperoleh

data yang diperlukan dalam memecahkan masalah-masalah tersebut. Adapun metode

pengumpulan data yang dilakukan adalah :

1.

Penelitian Lapangan

(Field Research)

Yaitu penulis langsung melakukan penelitian pada objek. Data dan keterangan yang

diperoleh dikumpulkan melalui observasi maupun tanya jawab langsung untuk dapat

memberikan data dan keterangan yang dibutuhkan.

Dalam hal ini menggunakan :

a.

Wawancara

(Interview)

Data yang dikumpulkan yaitu diperoleh dengan cara penulis melakukan Tanya jawab

langsung kepada staff dan tenaga pengajar di Program SMA Negeri 18 Medan Binjai

yang berkaitan dengan masalah yang akan dipecahkan sehingga penulis dapat

memperoleh data dan keterangan yang benar-benar akurat.

b.

Pengamatan

(Observation)

Data yang diperoleh yaitu dengan cara penulis melakukan peninjauan secara langsung

kelapangan.


(17)

2.

Penelitian Kepustakaan

(Library Research)

Dalam hal ini penulis menggunakan buku-buku yang berhubungan dengan masalah dan juga

media

internet

untuk dapat memperoleh dan mengumpulkan data yang dibutuhkan.

1.7

Tinjauan Pustaka

Ada beberapa

software

yang terlibat dalam mengaplikasikan web, diantaranya adalah dalam

perancangan tampilan sebagai

interface

terhadap

user,

pembuatan database serta dalam sistem

pemrogramannya. Dalam hal ini penulis memilih bahasa pemrograman PHP dan mySQL sebagai

databasenya serta Macromedia Dreamweaver 8 sebagai

text

editornya.

MySQL adalah multiuser database yang menggunakan bahasa

Structure Query Language

(SQL). MySQL dalam operasi

client-server

melibatkan

server daemon

MySQL di sisi

server

dan

berbagai macam program serta

library

yang berjalan di sisi

client.

MySQL mampu menangani

data yang cukup besar. PHP adalah bahasa

server-side scripting

yang menyatu dengan HTML

untuk membuat halaman web yang dinamis. Maksud dari

server-side scripting

adalah sintaks

dan perintah-perintah yang diberikan akan sepenuhnya dijalankan di

server

tetapi disertakan

pada dokumen HTML. Hampir seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun

kekuatan utama adalah konektivitas database dengan web.

(PHP dan MYSQL untuk Web, Bimo Sunarfrihantono, 2002)

Database adalah kumpulan file-file yang saling berelasi, relasi tersebut biasa ditunjukkan

dengan kunci dari tiap file yang ada. Satu database menunjukkan satu kumpulan data yang


(18)

dipakai dalam satu lingkup perusahaan, instansi. Merancang database merupakan suatu hal yang

sangat penting. Kesulitan utama dalam merancang database adalah bagaimana merancang

sehingga dapat memuaskan keperluan saat ini dan masa mendatang.

(Konsep dan Perancangan Database, Harianto Kristanto, 2004)

Macromedia Dreamweaver 8 merupakan program aplikasi professional untuk mengedit

HTML secara visual. Dasar dari desain web adalah menggunakan format data HTML

(HyperText Markup Language).

HTML merupakan dokumen

hypertext

yang bisa dibaca dari

suatu

platform

komputer lain. Perancangan secara visual sangat memudahkan

user

untuk

membuat web.

(Membuat Website Interaktif dengan Macromedia Dreamweaver

8, Wahana Komputer, 2006)

1.8

Sistematika Penulisan

Secara garis besar tugas akhir ini terdiri atas lima bab dan beberapa lampiran. Adapun kelima

bab tersebut adalah :

BAB 1

: PENDAHULUAN

Bab ini merupakan bagian yang berisi mengenai latar belakang penulisan,

identifikasi dan batasan masalah, maksud dan tujuan, kontribusi penelitian,

metodologi penelitian, tinjauan pustaka serta sistematika penulisan.


(19)

Bab ini berisikan tentang uraian teoritis mengenai pengertian, metode

penyusunan data serta mengenai bahasa pemrograman yang digunakan.

BAB 3

: PERANCANGAN SISTEM

Bab ini berisikan mengenai perancangan sistem yang dibentuk. Yaitu berisikan

sistem yang terpadu dengan database, rancangan model tampilan

website,

file

yang digunakan serta flowchart terbentuknya program.

BAB 4

: IMPLEMENTASI SISTEM

Bab ini merupakan bagian yang berisi tentang pengertian dan tujuan

implementasi sistem serta penjabaran-penjabaran elemen sistem baik dari segi

hardware, software

dan

brainware.

BAB 5

: KESIMPULAN DAN SARAN

Bab ini berisikan kesimpulan mengenai hasil rancangan sistem yang telah

dibuat dan disertai dengan saran yang diberikan oleh penulis kepada pihak

lembaga pendidikan SMA Negeri 18 Medan.


(20)

BAB 2

LANDASAN TEORI

2.1

Pengertian Sistem Informasi

Computer Based Information System

(CBIS) atau yang dalam Bahasa Indonesia disebut juga

Sistem Informasi Berbasis Komputer merupakan sistem pengolah data menjadi sebuah

informasi yang berkualitas dan dipergunakan untuk suatu alat bantu pengambilan keputusan.

Sistem Informasi yang akurat dan efektif, dalam kenyataannya selalu berhubungan dengan istilah

“computer-based”

atau pengolahan informasi yang berbasis pada komputer. Sistem Informasi

“berbasis komputer” mengandung arti bahwa komputer memainkan peranan penting dalam

sebuah sistem informasi.

Secara teori, penerapan sebuah Sistem Informasi memang tidak harus menggunakan

komputer dalam kegiatannya. Tetapi pada prakteknya tidak mungkin sistem informasi yang

sangat kompleks itu dapat berjalan dengan baik jika tanpa adanya komputer. Sistem Informasi

merupakan sistem pembangkit informasi. Dengan integrasi yang dimiliki antar subsistemnya,

sistem informasi akan mampu menyediakan informasi yang berkualitas, tepat, cepat dan akurat

sesuai dengan manajemen yang membutuhkannya.


(21)

Menurut berbagai kamus bahasa Inggris-Indonesia, data diterjemahkan sebagai istilah yang

berasal dari kata “

datum

” yang berarti fakta atau bahan-bahan keterangan. Data merupakan

deskripsi dari sesuatu dan kejadian yang kita hadapi. Data adalah fakta yang jelas lingkup,

tempat, dan waktunya. Data diperoleh dari sumber data primer atau sekunder dalam bentuk

berita tertulis atau sinyal elektronis. Jadi pada intinya, data merupakan kenyataan yang

menggambarkan suatu kejadian dan merupakan kesatuan nyata yang nantinya akan digunakan

sebagai bahan dasar suatu informasi.

2.1.2

Sistem

Sistem adalah kumpulan dari beberapa elemen yang saling berintegrasi untuk mencapai tujuan

tertentu. Elemen-elemen yang mewakili suatu sistem secara umum adalah masukan

(input),

pengolahan

(processing)

dan keluaran

(output).

Elemen-elemen sistem secara garis besar dapat

digambarkan sebagai berikut :

Sistem mempunyai karakteristik atau sifat – sifat tertentu, yaitu :

1.

Komponen Sistem

2.

Batasan Sistem

3.

Lingkungan Luar Sistem


(22)

4.

Penghubung Sistem

5.

Masukan Sistem

6.

Keluaran Sistem

7.

Pengolahan Sistem

8.

Sasaran Sistem

2.1.3

Informasi

Informasi adalah data yang diolah menjadi bentuk yang berguna dan menjadi berarti bagi

penerimanya. Kegunaan informasi adalah untuk mengurangi ketidakpastian di dalam proses

pengambilan keputusan tentang suatu keadaan. Suatu informasi dikatakan bernilai bila

manfaatnya lebih efektif dibandingkan dengan biaya untuk mendapatkan informasi tersebut.

Kualitas informasi sangat dipengaruhi atau ditentukan oleh beberapa hal yaitu :

a.

Relevan

(Relevancy)

b.

Akurat

(Accurancy)

c.

Tepat waktu

(Time liness)

d.

Ekonomis

(Economy)

e.

Efisien

(Efficiency)

f.

Ketersediaan

(Availability)

g.

Dapat dipercaya

(Reliability)


(23)

2.2

Pengenalan Internet

Internet

atau

Interconnected Networking

merupakan dua komputer atau lebih yang saling

berhubungan membentuk jaringan komputer hingga meliputi jutaan komputer di dunia, yang

saling berinteraksi dan bertukar informasi.

Internet

mempunyai sejarah yang sangat kompleks dan mencakup banyak aspek seperti

teknologi, organisasi dan komunitas. Pengaruh

internet

tidak hanya terhadap bidang teknik

komunikasi komputer saja tetapi, terhadap masalah sosial misalnya dengan menggunakan alat –

alat bantu

online

untuk mencapai bisnis elektronik

(e-commerce),

kepemilikan informasi dan

interaksi dengan masyarakat.

Ada beberapa fasilitas dari

internet

yang sering kita temui bahkan digunakan antara lain :

1.

E-mail

2.

World Wide Web (WWW)

3.

Newsgroup

4.

Telnet

5.

Chat

6.

File Transfer Protocol (FTP)


(24)

2.2.1

Network

Jaringan atau

network

saat ini menjadi istilah yang sangat penting dalam dunia pengolahan data

dan informasi. Pengertian sederhana dari jaringan komputer adalah sekumpulan perangkat yang

dapat digunakan untuk menyimpan dan manipulasi data elektronis dan pesan-pesan, saling

terkait satu dengan lainnya di mana dengan cara tersebut pengguna dapat menyimpan, menggali

dan saling berbagi terhadap informasi yang tersedia.

Istilah

“Network”

mengacu pada perangkat keras dan lunak yang digunakan untuk

menghubungkan antara komputer satu dengan komputer lainnya, sehingga memungkinkannya

untuk berkomunikasi satu sama lain. Sistem jaringan tidak lagi hanya akan melayani sebuah

mesin besar saja. Sebaliknya jaringan-jaringan akan merupakan sarana bantu yang

memungkinkan sebuah organisasi besar untuk melakukan penyesuaian yang sesuai, antara

kebutuhan informasi dengan besarnya aplikasi serta investasi perangkat keras dan lunaknya.

2.2.2 Web Server

Web server

adalah sebuah bentuk

server

yang khusus digunakan untuk menyimpan halaman

website

atau

homepage.

Komputer dapat dikatakan

web server

jika komputer tersebut memiliki

suatu program

server

yang disebut

Personal Web Server

(PWS).

Macam-macam

web server

antara lain :

1.

Apache

(Open Source)


(25)

3.

IIs

4.

PWS

(Personal web Server)

Website

(Situs Web) merupakan alamat (URL) yang berfungsi sebagai tempat penyimpanan

data dan informasi dengan berdasarkan topik tertentu situs atau web dapat dikategorikan menjadi

2 yaitu :

a.

Web statis, yaitu :

Web yang berisi atau menampilkan informasi-informasi yang sifatnya statis (tetap)

b.

Web Dinamis, yaitu :

Web yang menampilkan informasi serta dapat berinteraksi dengan

user

yang bersifat

dinamis.

2.2.3

HTTP

HTTP

(Hypertext Transfer Protocol)

merupakan protokol yang digunakan untuk

mendistribusikan sistem informasi yang berbasis

hypertext

. Protokol ini merupakan protokol

standar yang digunakan untuk mengakses HTML. HTTP diprakarsai oleh

World Wide Web

sistem informasi yang menyeluruh sejak tahun 1990. Apabila pada penjelajahan web dan pada

alamat tertulis

dalam web.


(26)

2.3

Pengenalan PHP

Rasmus Lerdorf merupakan seorang programmer yang menciptakan PHP pada tahun 1994. PHP

terus mengalami perkembangan dan perubahan hingga saat ini dalam berbagai versi.

PHP adalah salah satu

server side

yang dirancang khusus untuk aplikasi web. PHP

disisipkan diantara bahasa HTML dan karena bahasa

server side

, maka bahasa PHP akan

dieksekusi di

server,

sehingga yang dikirimkan ke

browser

adalah hasil jadi dalam bentuk

HTML, dan kode PHP tidak akan terlihat. PHP termasuk

Open Source Product

. Jadi, dapat

diubah

source code

dan mendistribusikanya secara bebas.

Untuk menjalankan sistem PHP dibutuhkan 3 komponen :

1.

Web server

2.

Program PHP

3.

Database Server

Adapun kelebihan-kelebihan dari PHP yaitu :

1.

PHP mudah dibuat dan kecepatan akses tinggi.

2.

PHP dapat berjalan dalam

web server

yang berbeda dalam sistem operasi yang berbeda pula.

3.

PHP diterbitkan secara gratisan

4.

PHP merupakan bahasa yang dapat diletakkan dalam tag HTML.


(27)

6.

PHP termasuk

server side

programming.

Salah satu fitur yang dapat diandalkan oleh PHP adalah dukungannya terhadap banyak

database. Berikut adalah database yang dapat didukung oleh PHP :

1.

Adabas D

12. MSQL

2.

dBase

13. MySQL

3.

Direct MS-SQL

14. ODBC

4.

Empress

15. Oracle (OCI7 dan OCI8)

5.

Filepro

(Read only)

16. Ovrimos

6.

FrontBase

17. PostgrSQL

7.

Hyperwave

18. Solid

8.

IBM DB2

19. Sybase

9.

Informix

20. Unix DBM

10.

Ingres

21. Velocis

11.

Interbase

2.3.1

Konsep Dasar PHP

Kode PHP diawali dengan tanda lebih kecil (<) dan diakhiri dengan tanda lebih besar (>). Ada

tiga cara untuk menuliskan

script

PHP yaitu :

1.

<?


(28)

?>

2.

<?php

Script PHP

?>

3.

<SCRIPT LANGUAGE

=

”php”>

Script php

</script>

Pemisah antar instruksi adalah tanda titik koma (;). Untuk membuat atau menambahkan

komentar, standar penulisan adalah /*komentar*/, //komentar dan #komentar. Untuk menuliskan

script

PHP, ada dua cara yang sering digunakan yaitu

Embedded Script

dan

Non- Embedded

Script.

a.

Embedded Script

Embedded Script

yaitu

script

PHP yang disisipkan diantara tag-tag HTML.

Contoh dari

Embedded Script

:

<html>

<head>

<title>Embedded Script</title>

</head>

<body>

<?php

Echo “Hallo, selamat menggunakan PHP”;

?>


(29)

</html>

b.

Non-Embedded Script

Non-Embedded Script

adalah

script

program PHP murni. Termasuk tag HTML yang disisipkan

dalam

script

PHP.

Contoh dari

Non-Embedded Script

:

<?php

echo “<html>”;

echo “<head>”;

echo “<title>Mengenal PHP</title>”;

echo “</head>”;

echo “<body>”;

echo “<p>PHP cukup jitu</p>’;

echo “</body>”;

echo “</html>”;

?>

2.4

Pengenalan MySQL

MySQL adalah salah satu jenis database

server

yang sangat terkenal. Kepopulerannya

disebabkan MySQL menggunakan SQL sebagai bahasa dasar untuk mengakses databasenya.

MySQL termasuk jenis RDBMS

(Relational Database Management System).

Pada MySQL,

sebuah database mengandung satu atau sejumlah tabel. Tabel terdiri atas sejumlah baris dan

setiap baris mengandung satu atau beberapa kolom. Untuk mengelola database MySQL ada


(30)

beberapa cara yaitu melalui

prompt

DOS

(tool command line)

dan dapat juga menggunakan

program

utility

seperti:

1.

PHP MyAdmin

2.

MySQLGUI

3.

MySQL Manager Java Based

4.

MySQL Administrator for windows.

2.5

Pengenalan Macromedia Dreamweaver 8

Salah satu

software

web editor adalah Macromedia Dreamweaver 8 yang merupakan

penyempurnaan dari versi sebelumnya dan tentu saja semakin mudah dalam penggunaannya.

Oleh karena itu,

software

ini paling inovatif dan lebih lengkap dibandingkan

software

web editor

lain. Adapun pengertian dari Macromedia Dreamweaver 8 ini adalah program aplikasi

professional untuk mengedit HTML secara visual. Program Aplikasi Macromedia Dreamweaver

8 menyertakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML,

CSS, serta

JavaScript

.

Fasilitas terbaru dari Macromedia Dreamweaver 8 adalah

Zoom Tool and Guides

, Panel

CSS yang baru,

Code Collapse

,

Coding Toolbar

, dan

Insert Flash Video

. Macromedia

Dreamweaver 8 mendukung pemrograman

script server-side

, seperti PHP, ASP, ASP.NET,

ColdFusion

dan JSP. Pemrograman

script server-side

maksudnya adalah

script

yang digunakan

dalam pemrograman web dinamis dimana semua perintahnya dieksekusi pada

server.

Fungsi


(31)

server

disini adalah sebagai pemroses

script

dan hasilnya dikembalikan dalam bentuk tag-tag

HTML yang kemudian ditampilkan dalam

browser.

2.5.1

Ruang Kerja Macromedia Dreamweaver 8

Komponen-komponen yang terdapat pada ruang kerja Macromedia Dreamweaver 8 adalah :

Gambar 2.1 Tampilan ruang kerja pada Macromedia Dreamweaver 8

1.

Insert Bar

Insert bar

merupakan

tool

yang digunakan untuk menyisipkan objek ke dalam dokumen web.

Ada enam kelompok kategori yang digunakan untuk

insert bar

yaitu

Common, Layout

,

Form

,

Text

, HTML, dan

Application

yang masing-masing memiliki beberapa

tool

beserta

kegunaannya.


(32)

2.

Document Window

Jendela kerja dokumen terdiri atas layar kerja serta fasilitasnya. Yang dimaksud dengan

fasilitas adalah

tool

untuk mengatur layar kerja atau sering disebut

Document Toolbar

, antara

lain

Coding tool

dan

Zoom & Guide tool

. Di samping

Document Toolbar

, tersedia fasilitas

lain yaitu

Tag Selection

.

3.

Panel Groups

Panel

pada Macromedia Dreamweaver 8 merupakan suatu media yang berfungsi sebagai

fasilisator. Kumpulan berbagai panel disebut

Panel Groups

, terletak pada sebelah kanan layar

kerja. Panel-panel tersebut diantaranya CSS,

Application, Tag Inspector, Files dan History

yang masing-masing memiliki bagian dan fungsi.

4.

Property Inspector

Property Inspector

merupakan area kerja untuk mengatur dalam mengelola properti-properti

seperti pada

text

,

image,

maupun tabel dalam suatu dokumen web. Cara kerja

Property

Inspector

hanya dengan memasukkan nilai-nilai parameter yang sudah disediakan. Secara

umum

Property Inspector

terdiri dari

Page Property, Table Property, Image Property

, dan

Form Property.

5

. Page Property

Page Property

berguna untuk mengatur properti halaman.

Page Property Inspector

juga

menyediakan fasilitas

Page Properties

.


(33)

BAB 3

PERANCANGAN SISTEM

3.1 Mendefenisikan Web dalam Macromedia Dreamweaver 8

Sebelum membangun web yang akan kita buat, pertama kali yang dilakukan adalah

file

tersusun

rapi dan terkumpul dalam satu dokumen maka dapat didefenisikan menjadi sebuah web.

Macromedia Dreamweaver 8 memberikan kemudahan bagi kita dalam manajemen

file

yang

digunakan dalam membuat halaman web. Untuk itu kita perlu mendefenisikan sebuah web

proyek yang baru kepada ruang kerja Macromedia Dreamweaver 8.

Untuk mendefinisikan web baru, klik menu

Site

pilih

Manage Site

seperti pada gambar

di bawah ini :


(34)

Setelah itu klik

New

pilih

Site

untuk menampilkan

window

yang berisi pengaturan site

yang akan dibuat. Pilih

tab

Advance

lalu

Category

kemudian pilih

lokal info

untuk mengatur

folder-folder tempat

file

yang akan digunakan dalam membuat halaman web. Berikut ini adalah

penjelasannya :

1.

Pada isian

Site name,

isikan nama proyek web yang akan kita buat. Pada tugas akhir saya

ini, saya memberi nama

SMA Negeri 18 Medan.

2.

Local Root folder

merupakan folder utama proyek ini. Beri centang pada

Refresh local file

automatically

agar

file

terbaru muncul di Macromedia Dreamweaver 8.

Gambar 3.2 Tampilan Window Site Definition

3.

Default Image folder

merupakan folder tempat

file-file

gambar disimpan.

Default Image

folder

harus berada didalam

Local Root folder.

4.

Jika kita telah memiliki domain, isikan alamat domain kita dengan

HTTP address

agar

semua link yang ada pada halaman web selalu diperiksa.


(35)

5.

Enable cache

memungkinkan Dreamweaver menggunakan

temporary file

ketika kita

mencoba halaman web yang dibuat (Preview in Browser) pada

browser

dikomputer lokal.

Fungsinya untuk mempercepat proses pengeksekusian

file

ke

browser

.

3.1.1 Merancang File Gambar Utama

File

ini merupakan materi utama yang digunakan dalam mengaplikasikan sebuah

website

sebagai

interface

terhadap

user

pada halaman utama

website.

3.1.2 File Halaman Website

File

halaman

website

menggunakan bahasa pemrograman PHP sehingga bereksistensi .php,

sedangkan MySQL digunakan sebagai tempat penyimpanan databasenya. Berikut ini penjelasan

dari

file

halaman

website

yaitu :

1.

index.php

Halaman index.php merupakan penggabungan antara tag-tag HTML dan pemrograman

PHP.

File

ini adalah halaman utama pada

website

jika

browser

dijalankan. Didalam tampilan

website, file

ini diberi nama

Home.

2. adminnews.inc.php

Halaman adminnews.inc.php merupakan penggabungan antara tag-tag HTML dan

pemrograman PHP serta mySQL sebagai database yaitu tempat penyimpanan datanya.

Hal ini menampilkan semua pengumuman yang berhubungan tentang SMA Negeri 18


(36)

Medan yang dibuat oleh

administrator.

Didalam tampilan

website, file

ini diberi nama

News.

3. adminprofil.inc.php

Halaman adminprofil.inc.php merupakan penggabungan antara tag-tag HTML dan

pemrograman PHP. Halaman ini menampilkan profil SMA Negeri 18 Medan. Di dalam

tampilan situs web,

file

ini diberi nama Profil.

4.

adminfasilitas.inc.php

Halaman fasilitas.php merupakan penggabungan tag-tag HTML dan pemrograman PHP

serta mySQL sebagai databasenya. Halaman ini merupakan tempat pengisian sarana dan

prasarana fasilitas sekolah

.

Di dalam tampilan situs web

,

file

ini diberi nama Fasilitas

.

5.

admingallery.inc.php

Halaman admingallery.inc.php merupakan penggabungan antara tag-tag HTML dan

pemrograman PHP. Halaman ini menampilkan photo-photo yang diperoleh dari sekolah

SMA Negeri 18 Medan sebagai dokumentasi. Di dalam tampilan situs web,

file

ini diberi

nama Gallery.

6.

adminbukutamu.php

Halaman adminguestbook.php merupakan penggabungan tag-tag HTML dan

pemrograman PHP serta mySQL sebagai databasenya. Halaman ini merupakan tempat

pengisian identitas dan komentar para pengunjung

website.

Didalam tampilan

website ,

file

ini diberi nama Buku Tamu

.

7.

adminekskul.inc.php

Halaman adminekskul.inc.php merupakan penggabungan antara tag-tag HTML dan

pemrograman PHP serta mySQL sebagai database yaitu tempat penyimpanan datanya.


(37)

Halaman ini menampilkan ekstrakurikuler siswa yang terdapat pada SMA Negeri 18

Medan yang dibuat oleh

administrator.

Di dalam tampilan situs web

, file

ini diberi nama

Ekskul

.

3.2 Database Website

Dalam penginputan data, data akan disimpan dalam database

.

Dalam hal ini penulis mengambil

mySQL sebagai tempat penyimpanan data pada

website

ini yang memiliki

server

tersendiri.

Untuk menghasilkan informasi pada

website

dibutuhkan beberapa tabel data dalam satu database

,

yaitu :

1.

Tabel Content

Tabel 3.1 Database SMA Negeri 18 Medan -Tabel content

2. Tabel eskul

Tabel 3.2 Database SMA Negeri 18 Medan-Tabel Eskul

3. Tabel Galeri


(38)

4. Tabel Guestbook

Tabel 3.3 Database SMA Negeri 18 Medan-Tabel Guestbook

5. Tabel News

Tabel 3.5 Database SMA Negeri 18 Medan-Tabel News

6.Tabel Buku Page

Tabel 3.4 Database SMA Negeri 18 Medan-Tabel Page

7. Tabel User


(39)

3.3 Membangun Halaman Situs Web

Situs SMUN 2 Binjai dirancang atas kebutuhan informasi dari tiap pengunjung. Berikut ini

adalah halaman-halaman situs SMA Negeri 18 Medan

yang dirancang penulis agar pengunjung

dapat menerima informasi yang disajikan.

Gambar 3.3 Rancangan halaman web

HOMEPAGE

ADMINISTRATOR

NEWS

ESKULL

BUKU TAMU

PROFIL

FASILITAS

GALLERY

HOME


(40)

1.

Halaman Home (Index)

Merupakan halaman utama yang pertama kali diakses saat situs dibuka. Halaman Home

berisi visi dan misi SMA Negeri 18 Medan .

2.

Halaman News

Merupakan halaman mengenai berita sekolah yang ada di SMA Negeri 18 Medan.

3.

Halaman Profil

Merupakan halaman yang berisi profil yang diperoleh SMA Negeri 18 Medan.

4.

Halaman Fasilitas

Merupakan halaman dimana pengunjung situs dapat mengetahui fasilitas yang ada

di SMA Negeri 18 Medan.

5.

Halaman Gallery

Merupakan halaman dimana pengunjung situs dapat melihat foto-foto pada web SMA Negeri

18 Medan.

6.

Halaman Buku Tamu

Merupakan halaman dimana pengunjung situs dapat mengisi dan memberikan komentar pada

web SMA Negeri 18 Medan..

7.

Halaman Ekskul

Merupakan halaman dimana pengunjung situs dapat mengetahui ekstrakurikuler siswa di

SMA Negeri 18 Medan.


(41)

3.4 Flowchart Situs

Di dalam web SMA Negeri 18 Medan terdapat alur-alur aktivitas yang dapat kita gambarkan

dalam bentuk flowchart. Di bawah ini adalah bentuk-bentuk flowchart yang didapat dari web

SMA Negeri 18 Medan.

a.

Flowchart Menu Utama

Seorang Pengunjung dapat mengakses web SMA Negeri 18 Medan dan dapat berpindah halaman

web menuju halaman lain. Flowchart menu utama dapat dilihat pada gambar dibawah ini:

Gambar 3.4 Alur Flowchart Menu Utama

A

B

C

D

E

Start

F

END

Tampilan Web

Pilihan Pada LinkMenu

Home

Fasilitas Profil News

ekskul Buku tamu


(42)

b. Flowchart Guestbook (Buku Tamu)

Untuk halaman

guestbook

saat mengakses halamannya, kita dapat langsung mengisi nama, email

maupun komentar kita

. Flowchart Guestbook

(buku tamu dapat kita lihat sebagai berikut :

Gambar 3.5 Alur Flowchart Buku Tamu

Buka halaman tamu

Halaman isi buku tamu

Simpan Sma Negeri 18 Simpan db

Medan

Data sudah disimpan Isi buku tamu

Lihat buku tamu

F

Index


(43)

c. Flowchart Administrator

Halaman

administrator

hanya diakses oleh seorang yang berhak mengaksesnya. Data login yang

terdiri dari nama dan

password

dari seorang

administrator

harus sesuai dengan data yang ada

pada tabel

administrator

. Jika data nama dan

password

sesuai, maka admin diantarkan menuju

tampilan halaman

administrator

. Jika proses login gagal, maka kembali lagi ke halaman

form

administrator

. Dapat kita lihat gambar

flowchart administrator

sebagai berikut :

Gambar 3.6 Alur Flowchart Administrator

Status=administrator

A

Tampilan halaman administrasi

Index

A

Buka halaman administrator

Input Nama & Password

Nama atau Password


(44)

3.5 Tampilan Situs Web

Dalam merancang tampilan suatu

website

, memiliki beberapa faktor yang perlu diperhatikan.

Dimana tampilan

website

ini digunakan sebagai

interface

terhadap

user

untuk mempublikasikan

suatu institusi ataupun individu kepada khalayak ramai.

Hal-hal yang perlu diperhatikan dalam perancangan tampilan

website

adalah :

a.

Tata letak perancangan gambar pada

website

b.

Pengaturan

layout

c.

Kombinasi Warna

d.

Pemilihan jenis huruf dan ukurannya

e.

Materi yang dipaparkan dalam

website

Dalam perancangan ini penulis menggunakan warna hijau dan biru langit serta dipadukan dengan

warna lain untuk memperindah tampilan

website

.


(45)

(46)

BAB 4

IMPLEMENTASI SISTEM

4.1 Pengertian Implementasi Sistem

Setelah dianalisis dan dirancang secara rinci dan teknologi telah diseleksi dan dipilih. Tiba

saatnya, sistem untuk diimplementasikan. Implementasi sistem adalah langkah-langkah atau

prosedur-prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah disetujui,

untuk menguji, menginstal, dan memulai sistem baru atau sistem yang diperbaiki untuk

menggantikan sistem yang lama. Sedangkan tahap implementasi sistem merupakan tahap

meletakkan sistem agar sistem dapat siap untuk dioperasikan.

Tahap implementasi sistem terdiri dari langkah-langkah sebagai berikut ini :

1. Menerapkan rencana implementasi

2. Melakukan kegiatan implementasi

3. Tindak lanjut implementasi

4.2

Tujuan Implementasi Sistem


(47)

1.

Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai sarana

pengolah data dan penyaji informasi.

2.

Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru atau yang telah

disetujui.

3.

Memastikan bahwa pemakai dapat mengoperasikan dengan mudah terhadap sistem yang

baru dan mendapat informasi yang baik dan jelas.

4.

Memperhitungkan bahwa sistem telah memenuhi permintaan pemakai yaitu dengan menguji

sistem secara menyeluruh.

5.

Memastikan bahwa sistem telah berjalan lancar dengann mengontrol dan melalukan instalasi

secara benar.

4.3 Komponen Dalam Implementasi Sistem

Pada web SMA Negeri 18 Medan ini dibutuhkan beberapa komponen utama mencakup

hardware (perangkat keras), software (perangkat lunak), dan brainware (perangkat operator).

Komponen-komponen itu mempunyai peran yang sangat penting dalam menunjang penerapan

sistem yang dirancang terhadap pengolahan data.

4.3.1

Hardware (Perangkat Keras)

Hardware merupakan suatu komponen yang dibutuhkan dalam mewujudkan sistem yang

diusulkan. Hardware meliputi :


(48)

a.

Monitor Super VGA.

b.

CPU (Central Processing Unit).

c.

Harddisk sebagai tempat sistem beroperasi dan media penyimpanan.

d.

Memori minimal 128 MB.

e.

Keyboard dan Mouse.

4.3.2

Softwar e (Perangkat Lunak)

Adapun software yang digunakan dalam perancangan web SMA Negeri 18 Medan ini meliputi :

a.

Sistem operasi Windo ws XP


(49)

b.

Macromedia Dreamweaver 8 salah satu web editor yang paling inovatif dan lengkap

dibandingkan software web editor lain.

Gambar 4.2 Tampilan Macromedia Dreamweaver 8

c.

XAMPP merupakan kumpulan aplikasi yang mencakup apache sebagai web servernya,

PHP sebagai bahasa pemrogramannya, dan mySQL sebagai tempat penampungan dan

penyimpanan databasenya. Dengan menggunakan XAMPP, memudahkan penginstalan

ketiga paket aplikasi tersebut tanpa perlu melakukan konfigurasi.


(50)

Gambar 4.3 Tampilan XAMPP

d.

Web Browser sebagai tempat tampilan halaman web, seperti : Internet Explorer, Mozilla,

Netscape Navigator, dan lain-lain.

4.3.3

Brainware (Perangkat Operator)

Brainware adalah sumber daya manusia yang akan berperan sebagai user ataupun administrator

sistem. Brainware yang dibutuhkan sebagai administrator nantinya bekerja pada server dalam

pengolahan web. Brainware yang dapat menjalankan web SMA Negeri 18 Medan terbagi 2 yaitu

:

a.

Administrator

Administrator harus mengerti bahasa pemrograman PHP dan mySQL serta mengerti akan

jalannya sistem.

b.

User (Pengunjung)

User (Pengunjung) tidak harus memiliki kemampuan khusus hanya mampu mengoperasikan

internet browser.


(51)

(52)

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dalam penulisan Tugas Akhir ini telah diuraikan bagaimana perancangan sistem dalam

mengaplikasikan web SMA Negeri 18 Medan. Oleh karena itu, dapat penulis simpulkan

1.

Sejalan dengan perkembangan

internet

, banyak sekali situs yang bermunculan maka

penulis tertarik untuk membuat Tugas Akhir yang berupa situs sekolah yaitu situs SMA

Negeri 18 Medan.

2.

Aplikasi web SMA Negeri 18 Medan merupakan kumpulan halaman yang dapat

mengolah data yang kita inginkan, sehingga isi dan tampilannya dapat berubah sesuai

dengan kebutuhan dan dapat berinteraksi dengan para pengunjungnya.

3.

Situs SMA Negeri 18 Medan ini adalah sarana informasi

online

yang dapat diakses oleh

siapapun juga.


(53)

5.2 Saran

1.

Sebaiknya ada partisispasi dari pihak sekolah untuk melanjutkan pembenahan ataupun

pengembangan

website

SMA Negeri 18 Medan.

2.

Penulis berharap agar website sekolah yang dibangun dapat memberikan kemudahan bagi

guru dan murid, misalnya, untuk saling berkomunikasi, tukar menukar informasi atau

sebagai sarana dan wadah untuk mengembangkan mutu pendidikan dalam arti yang

seluas-luasnya.


(54)

DAFTAR PUSTAKA

Hakim, Lukmanul dan Uus Musalini. 2004.

Cara Cerdas Menguasai Layout, Desain dan

Aplikasi Web

. Jakarta: PT Elex Media Komputindo.

Kadir, Abdul.

2002.

Dasar Pemrograman Web Dinamis Menggunakan PHP.

Yogyakarta: Andi

Yogyakarta.

Kristanto, Harianto. 2004.

Konsep dan Perancangan Database.

Yogyakarta: Andi

Yogyakarta.

Sunarfrihantono, Bimo. 2002.

PHP dan MYSQL Untuk Web.

Yogyakarta: Andi Yogyakarta.

Wahana Komputer. 2003.

Promosi Efektif dengan Web.

Yogyakarta: Andi Yogyakarta.

Wahana Komputer. 2006.

Membuat Website Interaktif dengan Macromedia Dreamweaver

8.

Yogyakarta: Andi Yogyakarta.


(55)


(56)

ListingHome

<html > <head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="index, follow">

<meta name="keywords" content="sekolah">

<meta name="description" content="SMA Negeri 18 Medan"> <title>SMAN 18 MEDAN</title>

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> <script type="text/javascript" src="css/caption.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css">

<script language="javascript" type="text/javascript"> var rightCollapseDefault='show';

var excludeModules='0'; </script>

<script type="text/javascript" src="css/ja_002.js"></script>

<link href="css/ja.css" rel="stylesheet" type="text/css"> <link href="css/template.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="css/general.css" type="text/css"> <link href="css/green.css" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript" src="css/ja.js"></script> <script language="javascript" type="text/javascript" src="css/opacity.js"></script> <script language="javascript" type="text/javascript">

var objMyImg = null; function initPNGTrans() {

objMyImg = new OpacityObject('ja-topnav','images/opaque'); objMyImg.setBackground();

} </script> <!--[if lte IE 6]> <style type="text/css">

.clearfix { height: 1%;}

</style> <![endif]--> <!--[if gte IE 7.0]> <style type="text/css">

.clearfix { display: inline-block;}

</style> <![endif]-->

</head><body id="bd" class="wide fs3"> <div id="ja-wrapper">

<a name="Top" id="Top"></a>

<a title="Skip to content" href="#Content" style="display: none;">Skip to content</a> <!-- BEGIN: HEADER -->

<div id="ja-header-wrap1">

<div id="ja-header-wrap2">

<div id="ja-header-wrap3">

<div id="ja-header" class="clearfix">

<h1> <a

href="index.php"><img src="css/logo-green.jpg" alt="joomla test"></a> </h1>


(57)

<div id="ja-usertoolswrap">

<div id="ja-usertools"> <ul class="ja-usertools-font">

<li><img style="cursor: pointer;" title="Increase font size" src="css/user-increase.gif"

alt="Increase font size" id="ja-tool-increase" onclick="switchFontSize('ja_zibal_ja_font','inc'); return false;"></li> <li><img style="cursor: pointer;" title="Decrease font size" src="css/user-decrease.gif" alt="Decrease font size" id="ja-tool-decrease" onclick="switchFontSize('ja_zibal_ja_font','dec'); return false;"></li>

<li><img style="cursor: pointer;" title="Default font size" src="css/user-reset.gif" alt="Default font size" id="ja-tool-reset" onclick="switchFontSize('ja_zibal_ja_font',3); return false;"></li>

</ul> </div> </div> </div> </div> </div> </div>

<!-- END: HEADER --> <!-- BEGIN: SUBHEADER --> <div id="ja-sh-wrap1">

<div id="ja-sh-wrap2">

<div id="ja-sh-wrap3">

<div id="ja-sh" class="clearfix" style="background: transparent

url(images/green/sh01.jpg) no-repeat scroll right top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

<div style="image: url(images/opaque.png); background-repeat: repeat;" id="ja-topnav">

<!-- BEGIN: MAIN NAVIGATION --> <div id="ja-mainnav" class="clearfix">

<div id="ja-splitmenu" class="mainlevel clearfix"> <ul>

<li class="first-item"><a href="index.php?page=1" class="active first-item"><span>Home</span></a></li> <li><a href="index.php?page=3" ><span>News</span></a></li>

<li><a href="index.php?page=2" ><span>Profil</span></a></li> <li><a href="index.php?page=7" ><span>fasilitas</span></a></li> <li><a href="index.php?page=4" ><span>Gallery</span></a></li> <li><a href="index.php?page=6" ><span>Buku Tamu</span></a></li> <li><a href="index.php?page=9" ><span>ekskul</span></a></li> </ul>

</div> </div>

<!-- END: MAIN NAVIGATION --> </div> <script type="text/javascript">initPNGTrans();</script> </div> </div> </div> </div>

<!-- END: SUBHEADER --> <!-- BEGIN: MAIN CONTENT --> <div id="ja-main-wrap1">

<div id="ja-main-wrap2">


(58)

<div id="ja-main" class="clearfix"> <!-- BEGIN: CONTENT --> <div id="ja-content">

<a name="Content" id="Content"></a> <div id="ja-mainbody">

<div class="componentheading">Home</div> <p align="center" style="margin: 0in 0in 0pt; text-align: center;" class="MsoNormal"><b><span style="font-size: small;"><span style="font-family: Times New Roman;">

<br /></span></span></b></p>

<p align="center" style="margin: 0in 0in 0pt; text-align: center;" class="MsoNormal"> <br /></p>

<p align="center" style="margin: 0in 0in 0pt; text-align: center;" class="MsoNormal"><b><span style="font-size: small;"><span style="font-family: Times New Roman;"><span style="background-color: rgb(0, 0, 0);"><span style="color: rgb(128, 0, 0); background-color: rgb(255, 255, 255);">Visi dan Misi SMA Negeri 18

Medan</span></span></span></span></b> <br /></p>

<ol style="margin-top: 0in;" type="A">

<li style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal"><span style="font-size: small; font-family: Times New Roman;"><span style="color: rgb(128, 0, 0);">Visi</span></span></li>

</ol>

<p style="margin: 0in 0in 0pt 0.5in; text-align: justify;" class="MsoNormal"><span style="size: small; font-family: Times New Roman;"><span style="color: rgb(128, 0, 0);">Melahirkan insan yang cerdas berfikir, trampil berbuat, berwawasan luas dan dilandasi keimanan yang kokoh serta berakhlak mulia.</span></span></p> <p style="margin: 0in 0in 0pt 0.5in; text-align: justify;" class="MsoNormal">&nbsp;</p>

<ol start="2" style="margin-top: 0in;" type="A">

<li style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal"><span style="font-size: small; font-family: Times New Roman;"><span style="color: rgb(128, 0, 0);">Misi</span></span></li>

<ol style="margin-top: 0in;" type="1">

<li style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal"><span style="font-size: small; font-family: Times New Roman;"><span style="color: rgb(128, 0, 0);">Menciptakan insan yang cerdas berfikir dan kritis terhadap perkembangan global.</span></span></li>

<li style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal"><span style="font-size: small; font-family: Times New Roman;"><span style="color: rgb(128, 0, 0);">Menumbuhkankembangkan semangat keunggulan secara intensif kepada seluruh warga sekolah dan masyarakat.</span></span></li>

<li style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal"><span style="size: small; font-family: Times New Roman;"><span style="color: rgb(128, 0, 0);">Meningkatkan kompetensi guru dan pegawai menuju tenaga yang profesionalisme</span></span></li>

<li style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal"><span style="size: small; font-family: Times New Roman;"><span style="color: rgb(128, 0, 0);">Menjadikan sekolah yang berbudaya lingkungan hidup dan ramah terhadap lingkungan. </span></span></li>

</ol> </ol>

<p style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal">&nbsp;</p> <p>&nbsp;</p>

<p style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal">&nbsp;</p> <p>&nbsp;</p>

<p style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal">&nbsp;</p> <p>&nbsp;</p>

<br /> </div>

</div>

<!-- END: CONTENT --> <!-- BEGIN: COLUMN --> <div id="ja-sidecol">


(59)

<div class="jamod moduletable" >

<h3 class="show"><span>Login Form</span></h3> <div style="overflow: hidden;" class="jamod-content"> <form action="login.php" method="post" name="login" id="login">

<label for="modlgn_username">Username <input id="modlgn_username" name="user" class="inputbox" alt="username" size="18" type="text"></label>

<label for="modlgn_passwd">Password <input id="modlgn_passwd" name="password" class="inputbox" size="18" alt="password" type="password"></label>

<input type="submit" name="Submit" class="button" value="Login" /> </form>

</div>

</div> <div class="jamod moduletable_text" >

<h3 class="show"><span>News</span></h3>

<div style="overflow: hidden;" class="jamod-content"><div class="bannergroup_text"> <div class="banneritem_text"><a

href="index.php?page=3&id=10">eskul</a><br>

<h5>2009-06-11 13:19:34</h5>

<p>karate juara 2 sekota med <div class="clr"></div></div>

<div class="banneritem_text"><a

href="index.php?page=3&id=9">ujian</a><br>

<h5>2009-06-11 13:17:13</h5>

<p>ujian akhir nasional tahu <div class="clr"></div></div> </div>

</div>

<!-- END: COLUMN -->

</div> </div>

</div> </div>

</div>

<!-- END: MAIN CONTENT --> `<!-- BEGIN: FOOTER --> <div id="ja-footer-wrap1">

<div id="ja-footer-wrap2">

<div id="ja-footer-wrap3"> <div id="ja-footer">

<p id="ja-bottomline">copyright &copy; 2009 SMA Negeri 18 Medan</p>

</div> </div>

</div> </div>

<!-- END: FOOTER --> </div>


(60)

Outputnya :

Listing NEWS

<html > <head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="index, follow">

<meta name="keywords" content="sekolah">

<meta name="description" content="SMA Negeri 18 Medan"> <title>SMAN 18 MEDAN</title>

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> <script type="text/javascript" src="css/caption.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css">

<script language="javascript" type="text/javascript"> var rightCollapseDefault='show';

var excludeModules='0'; </script>

<script type="text/javascript" src="css/ja_002.js"></script>

<link href="css/ja.css" rel="stylesheet" type="text/css"> <link href="css/template.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="css/general.css" type="text/css"> <link href="css/green.css" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript" src="css/ja.js"></script> <script language="javascript" type="text/javascript" src="css/opacity.js"></script> <script language="javascript" type="text/javascript">

var objMyImg = null; function initPNGTrans() {


(61)

objMyImg = new OpacityObject('ja-topnav','images/opaque'); objMyImg.setBackground();

} </script> <!--[if lte IE 6]> <style type="text/css">

.clearfix { height: 1%;}

</style> <![endif]--> <!--[if gte IE 7.0]> <style type="text/css">

.clearfix { display: inline-block;}

</style> <![endif]-->

</head><body id="bd" class="wide fs3"> <div id="ja-wrapper">

<a name="Top" id="Top"></a>

<a title="Skip to content" href="#Content" style="display: none;">Skip to content</a> <!-- BEGIN: HEADER -->

<div id="ja-header-wrap1"> <div id="ja-header-wrap2">

<div id="ja-header-wrap3">

<div id="ja-header" class="clearfix"> <h1>

<a href="index.php"><img src="css/logo-green.jpg" alt="joomla test"></a> </h1>

<div id="ja-usertoolswrap">

<div id="ja-usertools"> <ul class="ja-usertools-font">

<li><img style="cursor: pointer;" title="Increase font size" src="css/user-increase.gif" alt="Increase font size" id="ja-tool-increase" onclick="switchFontSize('ja_zibal_ja_font','inc'); return false;"></li>

<li><img style="cursor: pointer;" title="Decrease font size"

src="css/user-decrease.gif" alt="Decrease font size" id="ja-tool-decrease" onclick="switchFontSize('ja_zibal_ja_font','dec'); return false;"></li>

<li><img style="cursor: pointer;" title="Default font size" src="css/user-reset.gif" alt="Default font size" id="ja-tool-reset" onclick="switchFontSize('ja_zibal_ja_font',3); return false;"></li> </ul> </div> </div> </div> </div> </div> </div>

<!-- END: HEADER --> <!-- BEGIN: SUBHEADER --> <div id="ja-sh-wrap1">

<div id="ja-sh-wrap2">

<div id="ja-sh-wrap3">

<div id="ja-sh" class="clearfix" style="background: transparent url(images/green/sh01.jpg) no-repeat scroll right top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

<div style="background-image: url(images/opaque.png); background-repeat: repeat;" id="ja-topnav">


(1)

<link href="css/green.css" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript" src="css/ja.js"></script> <script language="javascript" type="text/javascript" src="css/opacity.js"></script> <script language="javascript" type="text/javascript">

var objMyImg = null; function initPNGTrans() {

objMyImg = new OpacityObject('ja-topnav','images/opaque'); objMyImg.setBackground();

} </script> <!--[if lte IE 6]> <style type="text/css">

.clearfix { height: 1%;}

</style> <![endif]--> <!--[if gte IE 7.0]> <style type="text/css">

.clearfix { display: inline-block;}

</style> <![endif]-->

</head><body id="bd" class="wide fs3"> <div id="ja-wrapper">

<a name="Top" id="Top"></a>

<a title="Skip to content" href="#Content" style="display: none;">Skip to content</a> <!-- BEGIN: HEADER -->

<div id="ja-header-wrap1"> <div id="ja-header-wrap2">

<div id="ja-header-wrap3">

<div id="ja-header" class="clearfix">\ <h1>

<a href="index.php"><img src="css/logo-green.jpg" alt="joomla test"></a> </h1>

<div id="ja-usertoolswrap">

<div id="ja-usertools"> <ul class="ja-usertools-font">

<li><img style="cursor: pointer;" title="Increase font size" src="css/user-increase.gif" alt="Increase font size" id="ja-tool-increase" onclick="switchFontSize('ja_zibal_ja_font','inc'); return false;"></li>

<li><img style="cursor: pointer;" title="Decrease font size" src="css/user-

decrease.gif" alt="Decrease font size" id="ja-tool-decrease" onclick="switchFontSize('ja_zibal_ja_font','dec'); return false;"></li>

<li><img style="cursor: pointer;" title="Default font size" src="css/user- reset.gif" alt="Default font size" id="ja-tool-reset" onclick="switchFontSize('ja_zibal_ja_font',3); return false;"></li>

</ul>

</div>

</div>

</div> </div>


(2)

</div>

<!-- END: HEADER --> <!-- BEGIN: SUBHEADER --> <div id="ja-sh-wrap1">

<div id="ja-sh-wrap2">

<div id="ja-sh-wrap3">

<div id="ja-sh" class="clearfix" style="background:

transparent url(images/green/sh01.jpg) no-repeat scroll right top; -moz-background-clip: -moz-initial; -moz- background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

<div style="background-image: url(images/opaque.png); background-repeat: repeat;" id="ja-topnav">

<!-- BEGIN: MAIN NAVIGATION --> <div id="ja-mainnav" class="clearfix">

<div id="ja-splitmenu" class="mainlevel clearfix">

<ul> <li class="first-item"><a href="index.php?page=1" ><span>Home</span></a></li> <li><a href="index.php?page=3" ><span>News</span></a></li>

<li><a href="index.php?page=2" ><span>Profil</span></a></li> <li><a href="index.php?page=7" ><span>fasilitas</span></a></li> <li><a href="index.php?page=4" ><span>Gallery</span></a></li> <li><a href="index.php?page=6" ><span>Buku Tamu</span></a></li>

<li><a href="index.php?page=9" class="active"><span>ekskul</span></a></li> </ul>

</div> </div>

<!-- END: MAIN NAVIGATION --> </div> <script type="text/javascript">initPNGTrans();</script> </div> </div> </div> </div>

<!-- END: SUBHEADER --> <!-- BEGIN: MAIN CONTENT --> <div id="ja-main-wrap1">

<div id="ja-main-wrap2">

<div id="ja-main-wrap3">

<div id="ja-main" class="clearfix"> <!-- BEGIN: CONTENT --> <div id="ja-content">

<a name="Content" id="Content"></a> <div id="ja-mainbody">

<div class="componentheading">ekskul</div>

<h1>Ekstrakurikuler</h1> <p><a href="?page=9&ekskulid=19">Rohis</a></p>

<p><a href="?page=9&ekskulid=18">Sanggar Tari</a></p> <p><a href="?page=9&ekskulid=17">Renang</a></p> <p><a href="?page=9&ekskulid=16">Basket</a></p> <p><a href="?page=9&ekskulid=15">PMR</a></p>


(3)

<table border="0" width="50%" align="center"> <tr>

<td width="23%" align="center"> </td> <td width="31%" align="center"> </td> <td width="23%" align="center"> <a

href="/sman18/index.php?pageNum_rsEkskul=1&totalRows_rsEkskul=7&page=9" class ="pagenav">Next</a> </td>

<td width="23%" align="center"> <a

href="/sman18/index.php?pageNum_rsEkskul=1&totalRows_rsEkskul=7&page=9" class="pagenav">Last</a> </td> </tr> </table> </div> </div>

<!-- END: CONTENT --> <!-- BEGIN: COLUMN --> <div id="ja-sidecol">

<div class="jamod moduletable" >

<h3 class="show"><span>Login Form</span></h3>

<div style="overflow: hidden;" class="jamod-content"> <form action="login.php" method="post" name="login" id="login">

<label for="modlgn_username">Username <input id="modlgn_username" name="user" class="inputbox" alt="username" size="18" type="text"></label>

<label for="modlgn_passwd">Password <input id="modlgn_passwd" name="password" class="inputbox" size="18" alt="password" type="password"></label>

<input type="submit" name="Submit" class="button" value="Login" /> </form>

</div>

</div> <div class="jamod moduletable_text" >

<h3 class="show"><span>News</span></h3>

<div style="overflow: hidden;" class="jamod-content"><div class="bannergroup_text"> <div class="banneritem_text"><a

href="index.php?page=3&id=11">PMDK</a><br>

<h5>2009-06-11 13:25:52</h5>

<p>ADA 11 ORANG&nbsp;MASUK P <div class="clr"></div></div> <div class="banneritem_text"><a

href="index.php?page=3&id=10">eskul</a><br>

<h5>2009-06-11 13:19:34</h5>

<p>karate juara 2 sekota medan <div class="clr"></div></div> </div>

</div>

<!-- END: COLUMN -->

</div> </div>

</div> </div>

</div>

<!-- END: MAIN CONTENT --> <!-- BEGIN: FOOTER --> <div id="ja-footer-wrap1">

<div id="ja-footer-wrap2">

<div id="ja-footer-wrap3"> <div id="ja-footer">


(4)

<p id="ja-bottomline">copyright &copy; 2009 SMA Negeri 18 Medan</p>

</div> </div>

</div> </div> <!-- END: FOOTER --> </div>

</body> </html>


(5)


(6)

DEPARTEMEN PENDIDIKAN NASIONAL

UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA)

JL. BIOTEKNOLOGI NO. 1 KAMPUS USU Telp. (061) 8214290s

MEDAN – 20155, EMAI

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa

: Ilham Mahyu danil Siregar

Nomor Stambuk

: 062406110

Judul Tugas Akhir

: Perancangan Portal Berbasis Web

Dengan Menggunakan PHP dan MySQL

Pada SMA Negeri 18 Medan

Dosen Pembimbing

: Drs.Partano Siagian, M.Sc

Tanggal Mulai Bimbingan

: ………

Tanggal Selesai Bimbingan

: ………

No

TANGGAL ASSISTEN BIMBINGAN

PEMBAHASAN PADA ASSISTEN MENGENAI

PADA BAB

PARAF DOSEN

PEMBIMBING KETERANGAN

Kartu ini harap dikembalikan kejurusan Matematika

Bila Bimbingan Mahasiswa telah selesai.

Diketahui

Disetujui

Ketua Jurusan Matematika

Pembimbing Utama/

Penanggung Jawab

Dr. Saib Suwilo, M.Sc.

Drs.Partano Siagian, M.Sc.

NIP 131796149

NIP 130877994