Perancangan Portal Berbasis Web Dengan Menggunakan Php Dan MySQL Pada SMA Negeri 18 Medan
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
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.
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
StartF
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 tamuHalaman 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 administrasiIndex
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"> </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"> </p> <p> </p>
<p style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal"> </p> <p> </p>
<p style="margin: 0in 0in 0pt; text-align: justify;" class="MsoNormal"> </p> <p> </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 © 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 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 © 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