Informasi Berbasis Web SMP Negeri 5 Medan

(1)

INFORMASI BERBASIS WEB

SMP NEGERI 5 MEDAN

TUGAS AKHIR

ISMAIL

092406121

PROGRAM STUDI D–III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2012

(2)

INFORMASI BERBASIS WEB SMP NEGERI 5 MEDAN

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat mencapai gelar Ahli Madya

ISMAIL 092406121

PROGRAM STUDI D–III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

MEDAN 2012

(3)

PERSETUJUAN

Judul : INFORMASI BERBASIS WEB SMP NEGERI 5

MEDAN

Kategori : TUGAS AKHIR

Nama : ISMAIL

Nomor Induk Mahasiswa : 092406121

Program Studi : D-III TEKNIK INFORMATIKA

Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA

Diluluskan di: Medan, Juli 2012

Diketahui,

Departemen Matematika FMIPA USU Pembimbing Utama/ Penanggung Jawab Ketua,

Prof.Dr.Tulus,VordipL.Math.,M.Si.,Ph.D

NIP : 196209011988031002 NIP : 196209011988031002

(4)

PERNYATAAN

INFORMASI BERBASIS WEB SMP NEGERI 5 MEDAN

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, terkecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Mei 2012

ISMAIL 092406121

(5)

PENGHARGAAN

Puji syukur penulis ucapkan kehadirat Allah SWT karena dengan rahmat dan hidayah-Nya lah penulis dapat menyelesaikan Tugas Akhir ini dengan baik dan dalam waktu yang telah ditetapkan. Tak lupa shalawat serta salam kepada junjungan Nabi Besar Muhammad SAW dan para sahabat-Nya yang telah membawa kita dari kegelapan kealam terang benderang yang penuh ilmu pengetahuan.

Penulisan Tugas Akhir yang berjudul : INFORMASI BERBASIS WEB SMP NEGERI 5 MEDAN, ini merupakan salah satu persyaratan untuk menyelesaikan Pendidikan Program Diploma III Jurusan Teknik Informatika Universitas Sumatera Utara.

Dalam menyelesaikan Tugas Akhir ini, penulis mendapatkan banyak bantuan dan bimbingan serta dorongan dari berbagai pihak, maka dalam kesempatan ini penulis dengan tulus hati menyampaikan penghargaan dan rasa terima kasih kepada:

1. Bapak Prof. Dr. Tulus, VordipL.Math.,M.Si.,Ph.D selaku Dosen Pembimbing penulis sekaligus ketua Departemen Matematika FMIPA USU yang telah memberikan bimbingan dan arahan dalam penulisan laporan Tugas Akhir. 2. Bapak Dr. Sutarman, M.Sc. selaku Dekan Fakultas Matematika dan Ilmu

Pengetahuan Alam, Universitas Sumatera Utara.

3. Bapak Syahril Efendi, S.Si, M.IT dan Syahriol Sitorus S.Si, M.IT selaku ketua dan sekertaris program studi Diploma III Teknik Informatika FMIPA USU. 4. Seluruh dosen Pengajar program studi Diploma III Teknik Informatika

Fakultas MIPA Universitas Sumatera Utara yang telah memberikan ilmu yang bermanfaat kepada penulis selama masa kuliah.

5. Bapak H.Kasintan Harahap, S.Pd. selaku Kepala Sekolah SMP Negeri 5 Medan yang telah memberikan bantuan selama melakukan riset di SMP Negeri 5 Medan.

6. Teristimewa sekali kepada kedua orang tua penulis tercinta Ibunda Asmawani dan Ayahanda Awaluddin Ch yang selalu memberikan doa dan dukungan serta kata-kata dan nasihat bijak yang selalu diberikannya untuk ketenangan hati.

(6)

7. Kepada kakanda Rismawati dan Habibah serta abangda Hasan Basri dan Muchlis yang selalu memberikan motivasi kepada dalam menyelesaikan penulisan tugas akhir ini.

8. Terima kasih buat teman-teman D-III Teknik Informatika umumnya Kom-B angkatan 2009 Tetty, Febby, Wanda, Bali, Firza, Suprik dan seluruh teman-teman tidak dapat penulis sebutkan satu persatu, terima kasih atas bantuan dan kerja samanya semoga kita cepat kerja dan meraih kesuksesan.

9. Terima kasih kepada sahabat penulis Riza dan Rido yang selalu memberikan penulis semangat dan harapan dalam menyelesaikan tugas akhir ini.

10.Terima kasih kepada teman terdekat penulis Sayra Salsabila yang singgah dihati selama ini telah mendukung dan semangat dalam menyelesaikan tugas akhir ini.

Akhir kata, penulis berharap semoga Tugas Akhir ini dapat bermanfaat bagi penulis sendiri maupun pihak-pihak yang berkepentingan, walaupun penulis menyadari bahwa Tugas Akhir ini masih jauh dari kesempurnaan. Untuk itu penulis mengharapkan saran dan kritik yang membangun.

Medan, Mei 2012 Penulis

(7)

ABSTRAK

Kajian ini bertujuan untuk memberikan suatu aplikasi sistem yang dapat digunakan dengan mudah dalam melakukan pekerjaan dan untuk mendukung dalam pengambilan keputusan. Aplikasi ini dirancang sesuai dengan kebutuhan informasi yang semakin maju seiring dengan perkembangan teknologi komputer yang sangat cepat, baik dari segi perangkat keras dan perangkat lunak.

Dengan demikian, perancangan suatu sistem informasi yang memerlukan data dan informasi yang akurat agar sistem informasi yang dirancang dapat memenuhi kebutuhan yang sesuai yang diinginkan. Untuk itu penulis akan membahas

“Informasi Berbasis Web SMP Negeri 5 Medan”. Sistem ini meliputi modul-modul masukan data yang berkaitan dengan guru, siswa, alumni. Selain itu juga meliputi modul-modul keluaran data yang berkaitan dengan data masukan tersebut.

(8)

DAFTAR ISI Halaman PERSETUJUAN PERNYATAAN PENGHARGAAN ABSTRAK DAFTAR ISI DAFTAR TABEL DAFTAR GAMBAR BAB 1 PENDAHULUAN

1.1Latar Belakang 1.2Rumusan Masalah 1.3Batasan Masalah 1.4Metodologi Penelitian 1.5Maksud dan Tujuan 1.6Kegunaan Penulisan 1.7Sistematika Penulisan

BAB 2 LANDASAN TEORI

2.1 Sistem

2.1.1 Konsep dasar sistem 2.1.2 Klasifikasi Sistem 2.2 Konsep Dasar Informasi dan Data

2.2.1 Pengertian informasi dan data 2.2.2 Sistem informasi

2.3 Pengertian Internet 2.3.1 Sejarah internet 2.3.2 Fasilitas internet

2.3.3 Istilah-istilah dalam internet 2.3.4 Manfaat internet

2.4 Pengertian World Wide Web (WWW) 2.4.1 Sejarah World Wide Web (WWW) 2.5 Pengertian Web Browser

2.6 Pengertian PHP dan MySQL 2.6.1 Pengertian PHP 2.6.2 Sejarah PHP 2.6.3 Pengertian MySQL 2.6.4 Sejarah MySQL

2.7 Pengertian Cascading Style Sheet (CSS) 2.8 Pengenalan HTML

2.8.1 Elemen dan tag HTML

2.9 Sekilas Tentang Macromedia Dreamweaver

BAB 3 SEKOLAH MENENGAH PERTAMA NEGERI 5 MEDAN

(9)

3.2 Visi dan Misi SMP Negeri 5 Medan 3.2.1 Visi SMP Negeri 5 Medan 3.2.2 Misi SMP Negeri 5 Medan 3.3 Motto SMP Negeri 5 Medan

3.4 Struktur Organisasi SMP Negeri 5 Medan 3.5 Uraian Tugas dan Fungsi Organisasi

3.5.1 Kepala sekolah 3.5.2 Wakil kepala sekolah 3.5.3 Guru

3.5.4 Wali kelas

3.5.5 Pustakawan sekolah 3.5.6 Pengelola laboratorium 3.5.7 Kepala tata usaha

BAB 4 PERANCANGAN SISTEM

4.1 Perencanaan dan Perancangan 4.2 Perancangan Halaman Website

4.2.1 Halaman beranda 4.2.2 Halaman profil 4.2.3 Halaman berita 4.2.4 Halaman akademik 4.2.5 Halaman ekstrakurikuler 4.2.6 Halaman arsip

4.2.7 Halaman gallery 4.2.8 Halaman administrator

4.3 Perancangan Data Flow Diagram (DFD) 4.3.1 Diagram konteks level 0

4.4 Perancangan Diagram Alir (Flowchart) Website 4.4.1 Flowchart menu utama

4.4.2 Flowchart sign in admin 4.4.3 Flowchart registrasi guru

4.4.4 Flowchart registrasi siswa dan nilai siswa 4.4.5 Flowchart buku tamu

4.4.6 Flowchart registrasi alumni 4.5 Merancang Database Server

BAB 5 IMPLEMENTASI SISTEM

5.1 Pengertian Implementasi Sistem 5.2 Tujuan Implementasi Sistem

5.3 Komponen dalam Implementasi Sistem 5.4 Proses Installasi Web Server (XAMPP) 5.5 Proses Pengujian Website Melalui Browser 5.6 Demonstrasi Program

BAB 6 KESIMPULAN DAN SARAN

6.1 Kesimpulan 6.2 Saran

DAFTAR PUSTAKA LAMPIRAN

(10)

DAFTAR TABEL

Halaman

Tabel 4.1 Simbol-Simbol Data Flow Diagram (DFD) Tabel 4.2 Simbol-Simbol Flowchart

Tabel 4.3 Tabel Admin

Tabel 4.4 Tabel Registrasi Siswa Tabel 4.5 Tabel Registrasi Guru Tabel 4.6 Tabel Nilai Siswa Tabel 4.7 Tabel Registrasi Siswa Tabel 4.8 Tabel Buku Tamu

(11)

DAFTAR GAMBAR

Halaman

Gambar 2.1 Fungsi Sistem Informasi

Gambar 2.2 Dokumen HTML ditampilakn di Mozilla Firefok Gambar 2.3 Tampilan Macromedia Dreamweaver 8.0

Gambar 3.1 Struktur Organisasi SMP Negeri 5 Medan Gambar 4.1 Struktur Website

Gambar 4.2 Diagram Konteks Gambar 4.3 Flowchart Menu Utama Gambar 4.4 Flowchart Sign In Admin Gambar 4.5 Flowchart Registrasi Guru

Gambar 4.6 Flowchart Registrasi Siswa dan Nilai Siswa Gambar 4.7 Flowchart Buku Tamu

Gambar 4.8 Flowchart Registrasi Alumni Gambar 5.1 Xampp-Win32-1.6.4-Installer Gambar 5.2 Installer Language

Gambar 5.3 Instalasi Wizard

Gambar 5.4 Memilih Lokasi Installasi Gambar 5.5 Installasi Option

Gambar 5.6 Proses Installasi Xampp Gambar 5.7 Proses Installasi Selesai Gambar 5.8 Control Panel Xampp

Gambar 5.9 Database SMP Negeri 5 Medan dalam PHP MyAdmin Gambar 5.10 Halaman Index SMP Negeri 5 Medan

Gambar 5.11 Halaman Beranda Gambar 5.12 Halaman Sign in Admin Gambar 5.13 Halaman Administrator Gambar 5.14 Halaman Registrasi Guru

Gambar 5.15 Halaman Update dan Delete Guru Gambar 5.16 Halaman Registasi Siswa

Gambar 5.17 Halaman Update dan Delete Siswa Gambar 5.18 Halaman Nilai Siswa

Gambar 5.19 Halaman Registrasi Alumni Gambar 5.20 Halaman Buku Tamu

(12)

ABSTRAK

(13)

BAB 1

PENDAHULUAN

1.1Latar Belakang

Perkembangan teknologi dan informasi pada era globalisasi seiring dengan perkembangan zaman, kebutuhan akan teknologi informasi menjadi hal yang sangat penting dalam dunia pendidikan. Kondisi seperti ini menuntut berkembangnya teknologi informasi yang canggih dan menghasilkan informasi yang cepat, efisien, efektif, dan akurat. Pengaruh teknologi informasi terhadap dunia pendidikan khususnya dalam proses pembelajaran. Perkembangan teknologi informasi ada lima pergeseran yaitu pelatihan ke penampilan. Pergeseran dari ruang kelas ke dimana saja dan kapan saja. Pergeseran dari kertas ke “on-line” atau penggunaan internet.

Pergeseran dari fasilitas fisik ke jaringan kerja. Pergeseran dari waktu siklus ke waktu nyata.

Menurut (Resnick, 2002) ada tiga hal yang penting dan harus dipikirkan terkait dengan moderisasi pendidikan yaitu bagaimana kita belajar (how people learn), apa yang kita pelajari (what people learn), dan kapan dan dimana kita belajar (where and

(14)

when people learn). Sehingga informasi tersebut mempunyai nilai lebih dalam menghasilkan suatu informasi yang efisien. Dipilihnya SMP Negeri 5 Medan dikarenakan informasi yang ada di sekolah tersebut masih menggunakan manual. Sehingga sering terjadinya kesalahan penyampaian informasi sehingga menjadi tidak cepat, tepat, akurat dan relevan. Saat tejadi perubahan paradigma pembelajaran terkait ketergantungan terhadap guru. Proses pembelajaran seharusnya tidak 100% bergantung kepada guru lagi. Oleh karena itu, informasi berbasis web ini dibuat untuk memudahkan dan mengurangi kesalahan yang terjadi serta menambah pengetahuan murid agar tigak bergantung kepada pelajaran yang diberikan oleh guru saja.

informasi berbasis web tentang sekolah dapat di akses oleh semua orang melalui internet memberikan ide buat penulis untuk membuat suatu website sekolah yang bisa memberikan informasi bagi para pengunjungnya.

Atas dasar pertimbangan itu, maka penulis tertarik membuat suatu website

pendidikan (sekolah) dengan judul : “Informasi Berbasis Web SMP Negeri 5 Medan”.

Dalam perancangan informasi berbasis web SMP Negeri 5 Medan ini penulis menggunakan bahasa pemograman PHP dan MySQL dan beberapa software

(15)

1.2Rumusan Masalah

Bagaimana melakukan penyebaran informasi berupa data siswa, guru dan kegiatan/agenda ataupun informasi lainnya tentang SMP Negeri 5 Medan kepada masyarakat.

1.3Batasan Masalah

Proses perancangan dan pembuatan informasi SMP Negeri 5 Medan dibutuhkan pertimbangan yang penuh. Dibutuhkan sebuah batasan masalah agar tidak menyimpang dari tujuan yang diharapkan. Adapun yang menjadi batasan masalah penulis dalam penyusunan tugas akhir adalah:

a) Informasi ini dirancang menggunakan Macromedia Dreamweaver 8.0.

b) Informasi ini sebagian besar memiliki fungsi untuk meringankan tugas administrator.

Sistem yang dirancang digunakan untuk data guru, siswa, dan data alumni SMP Negeri 5 Medan

1.4Metodologi Penelitian

Metodologi penelitian adalah cara yang bersifat sistematis, terencana dan mengikuti konsep ilmiah dengan tujuan untuk menyimpulkan keterangan-keterangan atau data

(16)

yang diperlukan. Metode penelitian yang penulis lakukan berdasarkan permasalahan yang ada, dimana teknik-tekniknya dapat diuraikan sebagai berikut:

1. Penelitian lapangan (Field research)

Suatu metode penelitian yang dilakukan dengan cara mengamati lanngsung lokasi sekolah serta peralatan yang terdapat pada SMP Negeri 5 Medan melalui langkah-langkah sebagai berikut:

a. Observasi (Pengamatan)

Memperoleh data dengan cara mengamati secara langsung sistem pengolahan data siswa dan guru yang digunakan dan ikut serta dalam kegiatan bekerja dan mengadakan pengamatan, pencatatan seluruh data yang diperlukan.

b. Interview (Wawancara)

Mengumpulkan data dengan cara melakukan tanya jawab dengan orang-orang yang berkaitan langsung atau pihak yang berwewenang dengan sistem pengolahan data guru, siswa. Antara lain dengan melakukan tanya jawab dengan bagian tata usaha yang ada di SMP Negeri 5 Medan.

c. Sample

Penulis mengadakan pengumpulan data dengan cara pengambilan dokumen sebagai sumber data di SMP Negeri 5 Medan.

d. Perancangan sistem

Perancangan sistem ini terdiri dari perancangan proses dan perancangan antarmuka.

(17)

2. Penelitian pustaka (Library research)

Suatu metode penelitian berdasarkan kepustakaan dengan mengumpulkan data, keterangan, atau informasi dimana penulis berpedoman pada bahan bacaan berupa buku-buku, literatur dan dokumen, karya ilmiah yang berhubungan dengan judul tugas akhir penulis.

1.5Maksud dan Tujuan

Maksud penulis mengadakan penelitian pada SMP Negeri 5 Medan adalah untuk mensosialisasikan Perancangan Informasi Berbasis Web SMP Negeri 5 Medan tersebut sehingga informasi yang akan dirancang sesuai dengan kebutuhan dan permasalahan yang ada.

Adapun tujuan dari penelitian yang dilakukan penulis adalah untuk membangun informasi berbasis web di SMP Negeri 5 Medan. Hal ini diharapkan dapat memberikan manfaat baik secara langsung maupun tidak langsung dengan menggunakan bahasa pemograman HTML, PHP, dan MySQL.

1.6Kegunaan Penulisan

Kegunaan penelitian yang dilakukan penulis adalah sebagai berikut :

1. Bagi SMP Negeri 5 Medan mendapat suatu aplikasi komputerisasi yang memudahkan dalam mencari penyampaian informasi data siswa dan guru serta

(18)

data yang lainnya dan mendapatkan kemudahan pekerjaan dalam menangani pengolahan web secara efektif dan efisien.

2. Bagi penulis untuk memenuhi syarat bagi Mahasiswa Fakultas Matematika dan Ilmu Pengetahuan Alam Program Studi D-III Teknik Informatika dalam menyelesaikan perkuliahan.

3. Merupakan kesempatan yang baik bagi penulis untuk menerapkan dan mengaplikasikan ilmu yang didapat selama perkuliahan.

1.7Sistematika Penulisan

Dalam penulisan tugas akhir ini, penulis membentuk suatu sistematika penulisan yang bertujuan untuk menggambarkan secara ringkas bab-bab yang mencakup hal-hal sebagai berikut :

BAB 1 : PENDAHULUAN

Bab ini berisikan latar belakang penulisan, identifikasi masalah, pembatasan masalah, metodelogi penelitian, maksud dan tujuan, kegunaan penulisan, dan sistematika penulisan.

BAB 2 : LANDASAN TEORI

Bab ini menjelaskan landasan teori yang meliputi pengertian data, informasi, sistem informasi, XAMPP, Dreamweaver 8, uraian singkat tentang bahasa pemograman HTML, PHP dan

(19)

BAB 3 SEKOLAH MENENGAH PERTAMA NEGERI 5 MEDAN

Bab ini menjelaskan secara rinci mengenai informasi yang terdapat pada SMP Negeri 5 Medan.

BAB 4 : PERANCANGAN SISTEM

Bab ini menjelaskan tentang perancangan struktur database, perancangan program yang meliputi input dan output yang akan dibuat pada sistem informasi pengolahan data.

BAB 5 : IMPLEMENTASI SISTEM

Pada bab ini dibahas tentang implementasi sistem yang dirancang.

BAB 6 : KESIMPULAN DAN SARAN

Bab ini merupakan bab terakhir yang mencakup kesimpulan dan saran.

(20)

BAB 2

LANDASAN TEORI

2.1Sistem

2.1.1 Konsep dasar sistem

Secara sederhana sistem dapat diartikan sebagai suatu kumpulan unsur atau komponen yang terorganisasi, berinteraksi dan saling tergantung satu sama lain. Ada dua pendekatan yang dapat dilakukan untuk mendefinisikan sebuah sistem, yaitu:

1. Tinjauan atas dasar fasilitas (komponen/elemen)

Sistem yaitu kumpulan komponen yang saling berkaitan dan bekerja sama untuk mencapai suatu tujuan tertentu.

2. Tinjauan atas dasar aktivitas (prosedur)

Sistem yaitu suatu jaringan kerja dari prosedur-prosedur yang berupa urutan kegiatan yang saling berhubungan dan bekerjasama untuk mencapai tujuan tertentu.

(21)

Model dasar sebuah sistem terdiri atas masukan, proses, keluaran. Namun sistem dapat dikembangkan hingga menyertakan media penyimpanan, dan sistem juga dapat bersifat terbuka dan tertutup. Sistem terbuka artinya sistem tersebut dapat menerima berbagai masukan dari lingkungan sekitarnya. Sistem tertutup, sebaliknya.

2.1.2 Klasifikasi sistem

Sistem merupakan suatu bentuk integrasi antara satu komponen dengan komponen lain karena sistem memiliki sasaran yang berbeda untuk setiap kasus yang terjadi di dalam sistem tersebut. Oleh karena itu sistem dapat diklasifikasikan dari beberapa sudut pandangan:

1. Sistem abstrak dan sistem fisik

a. Sistem abstrak yaitu sistem yang berupa pemikiran atau ide-ide yang tidak tampak secara fisik. Contohnya sistem teologia, yaitu satu sistem yang berupa pemikiran tentang hubungan antara manusia dengan Tuhan.

b. Sistem Fisik yaitu sistem yang ada secara fisik. Contohnya sistem komputer, sistem produksi, sistem penjualan dan sistem administrasi personalia.

2. Sistem alamiah dan sistem buatan manusia

a. Sistem alamiah yaitu sistem yang terjadi melalui proses alam, tidak dibuat oleh manusia. Contohnya sistem pemutaran bumi, terjadinya siang malam dan pergantian musim.

(22)

b. Sistem buatan manusia yaitu sistem yang melibatkan hubungan manusia dengan mesin, yang disebut dengan Human Machine System. Contohnya sistem informasi berbasis komputer, karena menyangkut penggunaan komputer yang berinteraksi dengan manusia.

3. Sistem deterministik dan sistem probabilistik

a. Sistem deterministik yaitu sistem yang beroperasi dengan tingkah laku yang dapat diprediksi. Contohnya sistem pemprograman dalam komputer, karena berdasarkan program-program komputer yang dijalankan.

b. Sistem probabilistik yaitu sistem yang kondisi masa depannya tidak dapat diprediksi karena mengandung unsur probabilitas. Contohnya sistem pemilu dan sistem pemerintahan.

4. Sistem terbuka dan sistem tertutup

a. Sistem terbuka yaitu sistem yang berhubungan dan dipengaruhi oleh lingkungan luarnya, yang menerima masukan dan menghasilkan keluaran untuk subsistem lainnya. Contohnya sistem perdagangan.

b. Sistem tertutup yaitu sistem yang tidak berhubungan dan tidak dipengaruhi oleh lingkungan luarnya. Sistem ini bekerja secara otomatis tanpa ada campur tangan dari pihak luar. Contohnya sistem robotic, sistem arloji dan sistem ATM.

(23)

2.2Konsep Dasar Informasi dan Data

2.2.1 Pengertian informasi dan data

Informasi (Information) adalah data yang telah dibentuk menjadi sesuatu yang memiliki arti dan berguna bagi manusia. Sebaliknya data merupakan sekumpulan fakta mentah yang mewakili kejadian-kejadian yang terjadi dalam organisasi atau lingkungan fisik perusahaan. Data biasanya belum dikelola dan diorganisasikan kedalam bentuk yang dapat secara efektif dipahami oleh manusia. (Laudon, Kenneth C. dan Jane P, Laudon. 2008).

2.2.2 Sistem informasi

Banyak aktivitas manusia yang berhubungan dengan sistem informasi. Tidak hanya di negara-negara maju, di Indonesia pun sistem informasi telah banyak diterapkan dimana-mana, seperti di kantor , di pasar swalayan, di bandara, bahkan di rumah ketika pemakai bercengkrama dengan dunia internet. Entah disadari atau tidak,sistem informasi telah banyak membantu manusia.

Sesungguhnya yang dimaksud dengan sistem informasi tidak harus melibatkan komputer. Sistem informasi yang menggunakan komputer biasa disebut sistem informasi berbasis komputer(Computer Based Information System atau CBIS).

(24)

Ada berbagai macam definisi sistem informasi antara lain:

1. Alter (1992) : Sistem informasi adalah kombinasi antara prosedur kerja, informasi, orang, dan teknologi informasi yang diorganisasikan untuk mencapai tujuan dalam sebuah organisasi.

2. Bodnar dan Hopwood (1993) : Sitem informasi adalah kumpulan perangkat keras dan perangkat lunak yang dirancang untuk mentransformasikan data ke dalam bentuk informasi yang berguna.

3. Gelians, Oram, dan Wiggins (1990) : Sistem informasi adalah suatu sistem buatan manusia yang secara umum terdiri atas sekumpulan komponen berbasis komputer dan manual yang dibuat untuk menghimpun, menyimpan,dan mengelola data serta menyediakn informasi keluaran kepada para pemakai.

4. Hall (2001) : Sistem informasi adalah sebuah rangkaian prosedur formal dimana data dikelompokan , diproses menjadi informasi, dan didistribusikan kepada pemakai.

5. Turban, McLean, dan Wetherbe (1999) : sebuah sistem informasi mengumpulkan, memperoses, menyimpan, menganalisis, dan menyebarkan informasi untuk tujuan yang spesifik.

6. Wikinson (1992) : Sistem informasi adalah kerangka kerja yang mengkoordinasikan sumber daya (manusia, komputer) untuk mengubah

(25)

masukan (input) menjadi keluaran (informasi), guna mencapai sasaran-sasaran perusahaan.

Sistem informasi merupakan sekumpulan komponen yang saling berhubungan, mengumpulkan, memproses, menyimpan, dan mendistribusikan informasi untuk menunjang pengambilan keputusan dan pengawasan dalam suatu organisasi. (Laudon, Kenneth C. dan Jane P, Laudon. 2008).

Tiga aktivitas didalam sistem informasi akan memproduksi informasi yang dibutuhkan oleh organisasi untuk membuat keputusan, mengendalikan operasi, menganalisis permasalahan dan menciptakan produk baru. Aktivitas tersebut adalah

input, proses dan output. Input yaitu merekam dan mengumpulkan data mentah dari dalam maupun luar organisasi. Pemrosesan (processing) yaitu mengubah data input

mentah tersebut menjadi bentuk yang berarti. Output yaitu mengirimkan informasi yang telah diproses tersebut ke orang-orang yang akan menggunakan atau kepada aktivitas yang akan menggunakan informasi tersebut. Sistem informasi juga memerlukan umpan balik, yang merupakan output yang dikembalikan ke anggota yang tepat untuk mengevaluasi atau mengoreksi tahapan input. (Laudon, Kenneth C. dan Jane P, Laudon. 2008).

(26)

Gambar 2.1 Fungsi Sistem Informasi

2.3 Pengertian Internet

Internet berasal dari kata InterconnectionNetworking yang mempunyai arti hubungan komputer dengan berbagai tipe yang membentuk sistem jaringan yang mencakup seluruh dunia (jaringan komputer global) dengan melalui jalur telekomunikasi seperti telepon, radio link, satelit dan lainnya.

Dalam mengatur integrasi dan komunikasi jaringan komputer ini digunakan protokol yaitu TCP/IP. TCP (TransmissionControl Protocol) bertugas memastikan bahwa semua hubungan bekerja dengan benar, sedangkan IP (InternetProtocol) yang mentransmisikan data dari satu komputer ke komputer lain.

Pemasok

Organisasi

Pelanggan

Sistem Informasi

Input Pemrosesan Output

Pemegang Saham

(27)

TPC/IP secara umum berfungsi memilih rute terbaik transmisi data, memilih

rute alternatif jika suatu rute tidak dapat di gunakan, mengatur dan mengirimkan paket-paket pengiriman data.

2.3.1 Sejarah internet

Internet berasal dari kata Interconnection Networking yang mempunyai arti hubungan ketika ARPANET (Advanced Research Project Agency Network) melakukan penyelidikan. Beberapa penyelidikan awal yang disumbang oleh ARPANET,termasuk kaidah rangkaian tanpa pusat (decentralized network), teori queueing, dan kaidah pertukaran paket.

Beberapa situs tertentu menambahkan bahwa ARPANET dan ARPA ini dipengaruhi oleh perang dingin diantara dua kutub besar di dunia, yaitu AS dan Uni Soviet. Uni Soviet yang pada tahun 1957 meluncurkan sebuah satelit sputnik membuat AS kelabakan. Kemudian presiden Dwight D. Eisenhower membuat program tandingan serupa agar kedigdayaan mereka tidak tersaingi oleh AS dengan membangun kedua sarana tersebut. Hal inilah yang sampai sekarang menjadi perdebatan di kalangan praktisi internet dalam menentukan mana yang lebih berperan dalam sejarah internet.

(28)

2.3.2 Fasilitas internet

Beberapa fasilitas-fasilitas yang dapat dimanfaatkan dengan menggunaakan internet

diantaranya yaitu:

1. Web, adalah fasilitas hypertext untuk menampilkan data berupa teks, gambar, bunyi, animasi dan data multimedia lainnya, yang diantara data tersebut saling berhubungan satu sama lain.

2. E-Mail (Electronic Mail), dengan fasilitas ini user dapat mengirim dan menerima surat elektronik (e-mail) pada/dari pemakai komputer lain yang terhubung di internet, dan dapat menyertakan file sebagai lampiran (attachment).

3. FTP (File Transfer Protocol), fasilitas ini digunakan untuk menghubungkan ke

computer server tertentu dan bila perlu menyalin (download) file yang dibutuhkan dari server tersebut dan menyimpannya di komputer.

2.3.3 Istilah-istilah dalam internet

Ada beberapa istilah yang sering digunakan dalam internet, diantaranya yaitu:

1. World Wide Web (WWW), merupakan kumpulan web server dari seluruh dunia yang berfungsi menyediakan data dan informasi untuk digunakan bersama

(29)

2. Web Site (Situs Web), merupakan tempat penyimpanan data dan informasi dengan berdasarkan topik tertentu.

3. Web Pages (Halaman Web), merupakan sebuah halaman khusus dari situs

Web tertentu.

4. Homepage, merupakan sampul halaman yang berisi daftar isi atau menu dari sebuah situs Web. Browser.

2.3.4 Manfaat internet

Adapun beberapa manfaat yang bisa diperoleh dari internet adalah sebagai berikut: 1. Informasi yang didapatkan lebih cepat dan murah dengan menggunakan

aplikasi dan fasilitas internet seperti: e-mail, www, newsgroup, dan ftp,

2. Mengurangi biaya kertas dan biaya distribusi, dengan adanya koran, majalah, brosur dalam internet.

3. Sebagai media promosi seperti: pengenalan, pemesanan produk perusahaan. 4. Komunikasi interaktif melalui e-mail, videoconferencing, dan mIRC. 5. Sebagai alat penelitian dan pengembangan.

(30)

2.4 Pengertian World Wide Web (WWW)

World Wide Web (WWW) adalah suatu ruang informasi yang yang dipakai oleh pengenal global yang disebut Uniform Resource Identifier(URI) untuk mengidentifikasi sumber-sumber daya yang berguna. World Wide Web (WWW) sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya. World Wide Web (WWW) berfungsi untuk menyediakan data dan informasi untuk dapat digunakan bersama.

2.4.1 Sejarah World Wide Web (WWW)

World Wide Web (WWW) dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa (CERN), Jenewa, Swiss. Pada tahun 1989 Berners-lee membuat proposal untuk proyek pembuatan hypertext secara global, kemudian pada bulan Oktober 1990, WorldWideWeb sudah bisa dijalankan dalam lingkungan CERN. Pada musim panas tahun 1991, www resmi digunakan secara luas pada jaringan internet.

2.5 Pengertian Web Browser

Browser adalah sebuah program yang digunakan untuk menampilkan halaman web.

Web browser berkomunikasi dengan web server melalui protocol HTTP, yang membaca dan menerjemahkan bahasa HTML dan data gambar untuk menampilkan

(31)

secara visual sehingga informasi yang ada dapa dibaca. Beberapa contoh webbrowser

yaitu: InternetExplorer, MozillaFirefox, dan Opera.

2.6 Pengertian PHP dan MySQl

2.6.1 Pengertian PHP

PHP adalah singkatan dari PHP Hypertext Preprocessor yang digunakan sebagai bahasa script serverside dalam pengembangan web yang disisipkan oleh dokumen

HTML. Penggunaan PHP memungkinkan web dapat dibuat dinamis sehingga

maintenance situs web tersebut menjadi lebih mudah dan efisien.

PHP merupakan software open-source yang disebarkan dan dilisensikan secara gratis serta dapat di download secara bebas dari situs resminya yaitu

http://www.php.net. (Abdul Kadir, 2005).

2.6.2 Sejarah PHP

PHP diciptakan pertama kali oleh Rasmus Lerdorf pada tahun 1994. Awalnya PHP

digunakan untuk mencatat jumlah serta untuk mengetahui siapa saja pengunjung pada

homepage nya. Rasmus Lerdorf adalah seorang pendukung opensource. Oleh karena itu, ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis. Kemudian menambah kemampuan PHP 1.0 dan meluncurkan PHP 2.0.

(32)

Pada tahun 1996, PHP telah banyak digunakan dalam website di dunia.sebuah kelompok pengembang software yang terdiri dari Rasmus, Zeew Suraski, Andi Gutman, Stig Bekken, Shane Caraveo, dan Jim Winstead bekerja sama untuk menyempurnakan PHP 2.0.

Akhirnya, pada tahun 1998, PHP 3.0 diluncurkan. Penyempurnaan terus dilakukan sehingga pada tahun 2000 dikeluarkan PHP 4.0.Tidak berhenti sampai di situ, kemampuan PHP terus ditambah hingga saat ini telah diluncurkan kembali PHP

5.0.x. (Kadir, Abdul. 2005).

2.6.3 Pengertian MySQL

MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (database management system) atau DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU GeneralPublic License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

2.6.4 Sejarah MySQL

MySQL dibuat pada tahun 1994/1995 dan dikembangkan oleh sebuah perusahaan di Swedia yang bernama MySQL AB dengan istilah T.c.X Data Konsult AB. Saat itu

(33)

Michael Widenius atau “Monty” merupakan satu-satunya pengembang MySQL di

T.c.X, yang memiliki aplikasi UNIREG dan rutin ISAM. Pada awalnya T.c.X

menggunakan mSQL atau mini SQL, namun ternyata tidak terlalu cepat dan fleksibel. Bahkan versi pertamanya tidak memiliki index , sehingga ia memutuskan untuk membuat sendiri mesin SQL yang interfacenya seperti mSQL tetapi memiliki kemamuan yang lebih. MySQL versi 1.0 dirilis Mei 1996 secara terbatas kepada empat orang rekannya. Kemudian di bulan Oktober, versi 3.1.1.0 dilepas ke masyarakat umum.

MySQL dapat juga dikatakan sebagai RelationalDatabaseManagementSystem

(RDBMS), yaitu hubungan antar tabel yang berisi data-data pada suatu database. Dengan demikian dapat mempercepat pencarian suatu data. Tabel-tabel tersebut di

link oleh suatu relasi yang memungkinkan kombinasi data dari beberapa tabel ketika

user menginginkan tampilnya informasi dari suatu database.

2.7 Pengertian Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) merupakan salah sat mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur

dan seragam. Sama halnya styles dalam

style, misalnya heading, subbab, bodytext,

footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berka

(34)

CSS dapat mengendalikateks, warnaborder, warna border, warna warna, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda

2.8 Pengenalan HyperText Markup Language (HTML)

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi homepage dengan perintah-perintah HTML. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium

(W3C). Pada dasarnya HTML menentukan dua fungsi yaitu:

1. Membentuk tata letak dokumen, seperti jenis huruf, gambar, dan komponen dokumen lainnya.

2. Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa

computer yang termasuk dalam katetegori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk mengatur dokumen.

(35)

2.8.1 Elemen dan Tag HTML

Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Untuk menandai berbagai elemen dalam suatu dokumen HTML, digunakan tag. Tag HTML terdiri atas sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya <H1> dengan </H1>), tag yang menjadi pasangan selalu diawali dengan karakter garis miring. Tag

yang pertama menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti akhir elemen.

Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan

tagnya, dituliskan : <namatag> _ </namatag>. Penulisan penamaan tag bebas, dapat menggunakan huruf besar, huruf kecil, ataupun campuran (tidak case sensitive). Tetapi untuk antisipasi pada standar penulisan tag, direkomendasikan untuk menuliskan tag dengan menggunakan huruf kecil semuanya.

Tag mark up ini digunakan sebenarnya memberi tahu browser web

bagaimana memperlakukan atau menampilkan (memformat) halaman dokumen tersebut dalam browser.

Dalam membuat suatu dokumen HTML dibutuhkan elemen yang dinyatakan dengan tag <html>, <head> dan <body> berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang

(36)

dokumen tersebut, dan elemen body berisi teks yang sebenarnya yang tersusun dari

link, grafik, paragraf dan elemen lainnya.

Secara umum dokumen dibagi menjadi dua section (bagian), yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola dasar sebagai berikut :

… informasi tentang dokumen HTML

</head> <body>

… informasi yang ditampilkan dalam browserweb </body>

</html>

Contoh penulisan suatu dokumen HTML sebagai berikut : <html>

<head>

<title> contoh </title> </head>

<body>

(37)

Hasil dokumen HTML yang ditampilkan di browserMozilafirefox

Gambar 2.2 Dokumen HTML ditampilkan di browserMozillaFirefox

2.9 Sekilas Tentang Macromedia Dreamweaver

MacromediaDreamweaver adalah sebuah HTMLeditorprofesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver

mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.

Dreamweaver MX dalam hal ini digunakan untuk web desain.dreamweaver

MX mengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode Javascript, XML, dan dokumen teks lain secara langsung dalam

(38)

Dreamweaver. Teknologi Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan memformat ulang HTML

bila kita menginginkannya.

Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu download halaman web.

(39)

BAB 3

SEKOLAH MENENGAH PERTAMA NEGERI 5 MEDAN

3.1Profil SMP Negeri 5 Medan

SMP Negeri 5 Medan merupakan salah satu sekolah yang berlokasi di Jalan Stasiun Desa Besar Kelurahan Martubung Kecamatan Medan Labuhan. Sejarah singkat mengenai SMP Negeri 5 Medan didirikan pada tahun 1957, adapun kepala sekolah di SMP Negeri 5 Medan yaitu oleh Bapak H. Kasintan Harahap, S.Pd. Kegiatan pembelajaran di SMP Negeri 5 Medan ini dilakukan setiap hari senin hingga sabtu dimana jadwal masuk siswa yaitu dari pukul 07.15 hingga pukul 12.50.

Dalam mendukung proses pembelajaran, saat ini SMP Negeri 5 Medan telah memiliki lebih kurang 21 ruangan kelas dan dilengkapi dengan berbagai fasilitas lainnya seperti lapangan basket, lapangan voli, lapangan badminton, laboratorium IPA, laboratorium komputer, perpustakaan, mushola, dan lainnya. Hal ini dilakukan demi mendukung kesuksesan dan kenyamanan belajar bagi seluruh para siswa dan guru di lingkungan SMP Negeri 5 Medan.

(40)

3.2Visi dan Misi SMP Negeri 5 Medan

3.2.1 Visi SMP Negeri 5 Medan

Mewujudkan manusia yang taat, optimis dan berprestasi berdasarkan iman dan taqwa.

3.2.2 Misi SMP Negeri 5 Medan

1. Menjalankan siar agama sesuai agama yang dianutnya. 2. Meningkatkan disiplin untuk sesama warga sekolah. 3. Membudayakan sikap sopan-santun dan ramah. 4. Menyediakan sarana dan prasarana.

5. Meningkatkan kwalitas proses belajar dan mengajar.

6. Mengarahkan dan mengembangkan bakat serta kemampuannya. 7. Menciptakan lingkungan sekolah yang bersih, nyaman, dan sejuk.

3.3Motto SMP Negeri 5 Medan

(41)

3.4Struktur Organisasi SMP Negeri 5 Medan

Struktur organisasi merupakan rangka atau bagian yang menunjukkan tugas untuk mencapai suatu tujuan dalam suatu organisasi, hubungan antara fungsi-fungsi dan tanggung jawab antara setiap anggota organisasi. Berikut adalah struktur organisasi yang terdapat pada SMP Negeri 5 Medan yang ditunjukkan oleh Gambar 3.1.

Keterangan: Garis Komando Garis Konsultasi

Gambar 3.1 Struktur Organisasi SMP Negeri 5 Medan 3.5Uraian Tugas dan Fungsi Organisasi

KOMITE SEKOLAH

KEPALA SEKOLAH H. KASINTAN HARAHAP, S.Pd

NIP. 1970 0707 199802 1 001 PENGAWAS/ TIM AHLI

WAKA SEK dan PKS

WAKA SEK : JOHAN, S.Pd

PKS : ALI MARWAN HASIBUAN, S.Pd

PKS : KASMAR LUMBAN RAJA, S.Pd

PKS : TUMBUR GAJAH, S.Pd

PKS : ZURAIDAH, S.Pd

PERPUSTAKAAN LABORATORIUM IPA DAN KOMPUTER

TATA USAHA BENDAHARA

WALI KELAS

GURU PIKET GURU BK

GURU MATA PELAJARAN

PENJAGA SEKOLAH

SATPAM

PETUGAS KEBERSIHAN SISWA/SISWI

(42)

3.5.1 Kepala sekolah

Kepala Sekolah bertugas dan bertanggung jawab atas semua kelancaran kegiatan dan kemajuan pelaksanaan pendidikan di sekolah, melaksanakan kegiatan manajemen sekolah secara keseluruhan meliputi:

1. Merencanakan pendidikan.

2. Mengorganisasikan seluruh komponen kegiatan pendidikan.

3. Menggerakkan seluruh sumber daya yang ada untuk kemajuan pendidikan. 4. Mengontrol semua kegiatan yang berjalan.

5. Mengatur kegiatan secara seksama yang berhubungan langsung dengan: a. Dinas Pendidikan Nasional Provinsi Sumatera Utara/kota Medan. b. Sub Rayon.

c. Dengan instansi lain yang terkait.

6. Merencanakan hubungan kerja sama terhadap instansi lain yang memiliki manfaat terhadap sekolah.

7. Mengatur hubungan baik terhadap orang tua murid yang berhubungan dengan penyelesaian masalah-masalah yang dihadapi anak didik, melalui koordinasi dengan PKS (menyangkut masalah pendidikan peserta didik) dan BK (menyangkut masalah keteladan siswa).

8. Mengatur administrasi kantor, yang meliputi administrasi ketatausahaan, keuangan, hubungan masyarakat, pendidikan dan administrasi laboratorium. 9. Bersama wakil kepala sekolah menyusun perencanaan program tahunan

(43)

10.Bersama wakil kepala sekolah menentukan langkah-langkah kegiatan pendidikan yang memiliki tujuan untuk kemajuan.

11. Melaksanakan supervisi guru-guru bidang studi.

3.5.2 Wakil kepala sekolah

Wakil Kepala Sekolah bertugas membantu Kepala Sekolah dalam kegiatan: 1. Menyusun kurikulum

2. Mengatur segala program kesiswaan.

3. Merencanakan kebutuhan sarana dan prasarana.

4. Mengatur dan mengembangkan hubungan dengan masyarakat. 5. Mengatur dan mengawasi penyelenggaraan program pendidikan. 6. Mengatur mutasi siswa.

7. Menyusun program kegiatan ekstrakurikuler.

8. Mengatur penyusunan bahan pengajaran dan pengembangan kurikulum.

3.5.3 Guru

Guru bertanggung jawab kepada Kepala Sekolah dan mempunyai tugas melaksanakan kegiatan proses belajar mengajar secara efektif dan efisien.

(44)

3.5.4 Wali kelas

Membantu Kepala Sekolah dalam kegiatan: 1. Pengelolaan kelas.

2. Penyelenggaraan administrasi kelas. 3. Pembuatan catatan khusus tentang siswa. 4. Penyusunan statistik bulanan siswa. 5. Penyusunan nilai siswa.

3.5.5 Pustakawan sekolah

Membantu Kepala Sekolah dalam kegiatan: 1. Menginventaris buku perpustakaan 2. Mendistribusikan buku kepada siswa

3. Melayani siswa/guru berkunjung ke perpustakaan 4. Mengolah perpustakaan secara umum

3.5.6 Pengelola laboratorium

Bertugas membantu Kepala Sekolah dalam kegiatan-kegiatan sebagai berikut: 1. Perencanaan dan pengadaan alat laboratorium

2. Menyusun jadwal laboratorium

(45)

3.5.7 Kepala tata usaha

Kepala Tata Usaha mempunyai tugas melaksanakan ketatausahaan sekolah dan bertanggung jawab kepada Kepala Sekolah dalam kegiatan-kegiatan sebagai berikut:

1. Menginventarisir barang masuk/ keluar

2. Membuat laporan barang inventaris secara rutin/ berkala 3. Menginventaris barang yang rusak

4. Membuat merk barang yang diterima 5. Urusan pensiun

6. Bantuan siswa 7. Urusan BP3 terarah

(46)

BAB 4

PERANCANGAN SISTEM

4.1 Perencanaan dan Perancangan

Tahan perencanaan dan perancangan merupakan tahap awal yang dilakukan penulis dalam membangun website ini. Pada tahap ini penulis akan menjabarkan awal perancangan sistem, diagram alur, tujuan dan isi dari situs yang akan dibangun. Situs ini dirancang dengan menggunakan PHP sebagai bahas pemogramannya, MySQL

sebagai database nya, XAMPP sebagai server nya, dan Deameamweaver 8 sebagai media untuk membuat layout dari situs yang akan dirancang.

Sebelum membangun sebuah website , ada beberapa pertanyaan sebagai identifikasi awal yang perlu dilakukan, antara lain:

a. Website apa yang akan dibangun?

b. Siapa saja pengunjung yang akan diharapkan ke website kita? c. Apa saja aktivitas yang dapat dilakukan pengunjung dalam website? d. Apa saja yang ingin dicapai dari pembuatan website tersebut?

(47)

Dengan menjawab beberapa pertanyaan di atas, maka akan semakin membantu dan mempermudah dalam membangun website ini karena dengan pertanyaan-pertanyaan tersebut akan terbentuk kata kunci untuk membangun dan mengembangkan website kearah yang lebih lanjut.

Berkaitan dengan website yang akan dibangun, maka jawaban dari penulis untuk beberapa pertanyaan di atas sebagai berikut :

a. Website yang akan dibuat adalah sistem informasi berbasis web, yang menyediakan informasi yang menyangkut pendidikan dan kegiatan yang dilakukan di SMP Negeri 5 Medan.

b. Pengunjung situs tersebut adalah para siswa SMP Negeri 5 Medan, orang tua para siswa serta para alumni, namun tidak menutup kemungkinan bagi masyarakat umum yang ingin mengetahui tentang SMP Negeri 5 Medan.

c. Aktivitas yang dapat dilakukan dalam situs tersebut adalah pengunjung dapat mengetahui informasi mengenai berita pendidikan terbaru, membaca artikel para siswa, mengetahui nilai siswa, roster mata pelajaran siswa, data guru, data alumni, serta mengetahui kegiatan yang dilakukan sekolah.

d. Target yang ingin dicapai dalam pembuatan situs ini adalah dapat memberikan kemudahan bagi siswa dalam memperoleh informasi yang dibutuhkan serta dapat membantu sekolah dalam mempromosikan sekolahnya.

(48)

Tahap selanjutnya adalah tahap pembuatan bagan atau sruktur dari situs tersebut. Struktur website tersebut menampilkan struktur hirarki dan isi halaman per halaman. Dengan adanya struktur, akan sangat mudah untuk memvisualisasikan isi dari setiap halaman situs dan navigasi antar halaman.

Adapun struktur dari situs yang penulis buat ditunjukkan pada gambar berikut:

Gambar 4.1 Struktur Website

SMP Negeri 5 Medan

Beranda Profil Berita Akademik Ekskul Arsip Galerry Admin

Profil Sekolah

Struktur

Kepala Sekolah

Wakil Kepsek

Data Guru

Data Siswa

Nilai Siswa

Roster Pelajaran

Alumni

(49)

4.2 Perancangan Halaman Website

4.2.1 Halaman beranda

Halaman ini merupakan halaman utama dari website . Halaman ini berisikan beberapa informasi umum tentang sekolah dan link-link utama yang menuju ke halaman-halaman lainnya.

4.2.2 Halaman profil

Halaman ini berisikan informasi sekilas tentang sekolah, alamat sekolah dan link-link

yang menghubungkan ke halaman profil tentang sekolah lainnya, seperti struktur organisasi, profil kepala sekolah, profil wakil kepala sekolah, data guru, serta komponen dari sekolah dan fungsinya.

4.2.3 Halaman berita

(50)

4.2.4 Halaman akademik

Halaman ini berisikan tentang data pribadi siswa, nilai siswa, dan roster pelajaran. Pada data siswa, mereka bisa meregistrasikan diri mereka sendiri. Dan di nilai siswa berisikan hasil studi mereka.

4.2.5 Halaman ekstrakurikuler

Halaman ini berisikan tentang ekstrakurikuler di SMP Negeri 5 Medan

4.2.6 Halaman arsip

Halaman ini berisikan tentang data alumni dan form buku tamu, dimana para alumni bisa meregistrasikan data pribadi mereka. Form buku tamu untuk memberikan pesan dan kesan kepada sekolah.

4.2.7 Halaman gallery

(51)

4.2.8 Halaman administrator

Halaman admin berisikan sign in yang akan menghubungkan ke halaman administrator. Halaman ini khusus hanya dapat diakses oleh administrator website untuk melakukan pengaturan website seperti menambah, menghapus dan mengubah data.

4.3 Perancangan Data Flow Diagram (DFD)

DataFlowDiagram (DFD) adalah gambaran sistem secara logika. Penanganan notasi simbol lingkaran dan anak panah mewakili dan menggambarkan arus data pada perancangan sistem sangat membantu didalam komunikasi dengan pemakaian sistem yang menggunakan notasi-notasi tersebut untuk menggambarkan arus dari sistem data. Perancangan DFD yang penulis buat dalam perancangan ini terdiri dari diagram konteks yang bagiannya terdiri dari pengunjung/siswa ataupun guru, administrator sebagai pengendali sistem informasi, dan kepala sekolah sebagai penerima laporan informasi tersebut. Dalam hal ini, informasi yang terdapat pada SMP Negeri 5 Medan yang telah diproses oleh administrator sekolah dapat diinformasikan kepada pengunjung website dimana website tersebut sebagai objeknya dimana setelah mendapatkan informasi, pengunjung boleh memberikan pesan, kesan, kritik dan saran yang akan diberikan kepada sekolah tersebut.

Berikut ini adalah bentuk data flow diagram dari website SMP Negeri 5 Medan.

(52)

-Struktur Organisasi -Kepala Sekolah -Wkl Kepala Sekolah -Data Guru

Informasi Beranda Informasi Profil

Informasi Berita

Informasi Akademik

-Data Siswa -Nilai Siswa -Roster Pelajaran

Informasi Gallery Informasi Ekskul

Verifikasi Seluruh Data -Data Guru -Data Siswa -Nilai Siswa -Data Alumni -Data Buku Tamu

Informasi Arsip

-Alumni -Buku Tamu

Gambar 4.2 Diagram Konteks

4.3.1 Diagram konteks level 0

Selanjutnya penulis membuat Data Flow Diagram (DFD) level 0 (nol) yang merupakan diagram alir pada sistem informasi sekolah dengan ketentuan yang telah

Beranda

Sistem Informasi Berbasis Web SMP

Negeri 5 Medan

Profil

Berita Akademik

Ekskul Gallery

Admin

Kepala Sekolah

(53)

-Struktur Organisasi -Kepala Sekolah -Wkl Kepala Sekolah -Data Guru

Informasi Beranda Informasi Profil Update Beranda Update Profil

Update Berita Update Akademik Informasi Berita Informasi Akademik -Data Siswa -Nilai Siswa -Roster Pelajaran Informasi Gallery Informasi Ekskul Update Ekskul Update Gallery

Verifikasi Seluruh Data

- Update, Delete Data Guru - Update, Delete Data Data Siswa - Update, Delete Nilai Siswa - Update, Delete Data Data Alumni - Update, Delete Data Data Buku Tamu

penulis perbuat yaitu administrator saja yang berhak membuat link halaman, untuk

input, edit, dan delete data. Semuanya diproses oleh administrator dimana setelah selesai diproses administrator bisa menampilkannya di website yang telah dirancang oleh administrator sebagai objeknya. Diagram alir dapat dilihat pada gambar 4.3 berikut ini:

Gambar 4.3 Diagram Konteks Level 0

Beranda

Sistem Informasi Berbasis Web SMP

Negeri 5 Medan

Profil

Berita Akademik

Ekskul Gallery

Admin Kepala Sekolah Data Guru Data Siswa Nilai Siswa Data Alumni Buku Tamu

(54)

4.4 Perancangan Diagram Alir (Flowchart) Website

Diagram alir (flowchart ) ini menjelaskan secara rinci langkah- langkah dari proses program. Flowchart dibuat dengan menggunakan simbol - simbol tertentu yang menyatakan setiap langkah program. Berikut ini adalah bentuk- bentuk flowchart dari website SMP Negeri 5 Medan.

4.4.1 Flowchart menu utama

Fkowchart menu utama yang telah dirancang terdiri dari masuk ke halaman website. Proses halaman ini dimulai dari beranda, halaman ini berisikan beberapa informasi umum tentang sekolah dan link-link utama yang menuju ke halaman-halaman lainnya. Menu halaman profil sekolah ini berisikan informasi sekilas tentang sekolah, alamat sekolah dan link-link yang menghubungkan ke halaman profil tentang sekolah lainnya, seperti struktur organisasi, profil kepala sekolah, profil wakil kepala sekolah, data guru, serta komponen dari sekolah dan fungsinya. Halaman berita ini berisikan berita-berita yang berhubungan dengan SMP Negeri 5 Medan. Halaman ini berisikan tentang data pribadi siswa, nilai siswa, dan roster pelajaran. Pada data siswa, mereka bisa meregistrasikan diri mereka sendiri. Dan di nilai siswa berisikan hasil studi mereka. Halaman arsip ini berisikan tentang data alumni dan form buku tamu, dimana para alumni bisa meregistrasikan data pribadi mereka. Form buku tamu untuk memberikan pesan dan kesan kepada sekolah. Halaman admin berisikan sign in yang akan menghubungkan ke halaman administrator. Halaman ini khusus hanya dapat diakses

(55)

Tidak

oleh administrator website untuk melakukan pengaturan website seperti menambah, menghapus dan mengubah data.

Flowchart menu utama dapat dilihat pada gambar 4.3 dibawah ini:

Gambar 4.3 Flowchart Menu Utama

Start

Tampilan Web

Beranda A

End Profil

Berita

Akademik

Ekskul

Arsip

Gallery

Admin

Sign Out

B B1

B2 B3 B4 C

D1 D

D2 D3 E

F F1

F2 G

(56)

Keterangan:

A: Halaman Beranda B1: Halaman Struktur Organisasi B: Halaman Profil Sekolah B2: Halaman Kepala Sekolah C: Halaman Berita B3: Halaman Wakil Kepala Sekolah D: Halaman Akademik B4: Halaman Guru

E: Halaman Ekstrakurikuler D1: Halaman Data Siswa F: Halaman Arsip D2: Halaman Nilai Siswa G: Halaman Gallery D3: Halaman Roster Pelajaran H: Halaman Administrator F1: Halaman Alumni

F2: Halaman Buku Tamu

4.4.2 Flowchart sign in admin

Halaman sign inadmin adalah halaman khusus sign inuseradmin . Setelah username

dan password admin diinput dengan benar maka selanjutnya masuk ke halaman

admin. Jika login gagal maka akan kembali ke halaman sign in admin. Flowchart admin dapat pada gambar 4.4 dibawah ini:

(57)

Tidak Ya Ya Tidak Tidak Ya Ya Ya

Gambar 4.4 Flowchart Sign In Admin

Keterangan:

H1: Insert Guru H2: Update Guru H3: Data Siswa H4: Update Siswa H5: Nilai Siswa H6: Insert Nilai Siswa H7: Update Nilai Siswa H8: Alumni H9: Buku Tamu

Form Sign In Admin

Masukkan Username & Password

Cek Username & Password Halaman Admin Halaman Data Guru Halaman Siswa Halaman Data Arsip

Username & Password Salah

Sign Out

H3 H4

H9 H

H5 H6

(58)

Tidak

Tidak Ya

Ya Tidak

Tidak

4.4.3 Flowchart registrasi guru

Halaman registrasi guru adalah halaman untuk meregistrasi data guru SMP Negeri 5 Medan. Setelah data diinput maka data yang diisi akan masuk ke simpan data.

Flowchart registrasi guru dapat dilihat pada gambar 4.5 dibawah ini:

Gambar 4.5 Flowchart Registrasi Guru

Halaman Guru

Insert Guru

Update Guru

Sign Out

From Insert Guru Simpan

Simpan Data

Data Tersimpan Edit

From Update

Update

Simpan Data

Data Tersimpan

Delete

(59)

Ya Tidak Ya Tidak Ya Ya Ya Tidak

Tidak Tidak

Ya Tidak Tidak Ya Ya Tidak

4.4.4 Flowchart registrasi siswa dan nilai siswa

Halaman registrasi siswa dan nilai siswa adalah halaman untuk meregistrasi data siswa dan nilai siswa SMP Negeri 5 Medan. Setelah data diinput maka data yang diisi akan masuk ke simpan data. Flowchart registrasi siswa dapat dilihat pada gambar 4.6 dibawah ini:

Gambar 4.6 Flowchart Registrasi Siswa dan Nilai Siswa

H Halaman Siswa Insert Siswa Insert Nilai Sign Out H

From Insert Siswa Simpan

Simp an Data Data Tersimpan Edit From Update Update Simpan Data Data Tersimpan Delete Data dihapus Update Siswa From Insert Nilai Simpan Simpan Data Data Tersimpan

(60)

Tidak

Ya Ya

4.4.5 Flowchart buku tamu

Halaman buku tamu adalah halaman untuk memberikan pesan dan kesan kepada sekolah, serta kritik dan saran. Flowchart dapat dilihat pada gambar 4.8 dibawah ini:

Gambar 4.7 Flowchart Buku Tamu

Buku Tamu

Input nama, email, pesan

Kelengkapan Data

Data Sukses diinput

Simpan Data

Input nama, email, pesan

Maaf, data belum lengkap

F1 F1

(61)

Ya Tidak Ya Tidak Tidak Ya Tidak Ya Ya Tidak Tidak Tidak

4.4.6 Flowchart registrasi alumni

Halaman registrasi alumni adalah halaman untuk meregistrasikan para alumni SMP Negeri 5 Medan. Setelah data diinput maka data yang diisi akan masuk ke simpan data. Flowchart dapat dilihat pada gambar 4.9 dibawah ini:

Gambar 4.9 Flowchart Registrasi Alumni

H Halaman Alumni Insert Alumni Update Alumni Sign Out H From Insert

Alumni Simpan

Simpan Data Data Tersimpan Edit From Update Update Simpan Data Data Tersimpan Delete Data dihapus

(62)

Tabel 4.1 Simbol-Simbol Data Flow Diagram (DFD)

No. Simbol Nama Keterangan

1. Kesatuan Luar

(External entity)

Externalentity (kesatuan luar) merupakan model yang menggambarkan dengan

menggunakan persegi panjang dan mewakili entity luar dimana suatu sistem bekomunikasi.

2. Aliran Data

(DataFlow)

Data flow (arus data) diberi simbol suatu panah yang menuju ke atau dari bagian kebagian lain dari sistem.

3. Process

(proses)

Process (proses) menunjukkan transportasi dari masukan menjadi keluaran

Tabel 4.2 Simbol-Simbol Flow Chart

No. Simbol Fungsi

1 Terminal, untuk memulai dan mengakhiri suatu program.

2 Proses, suatu simbol yang menunjukkan setiap pengolahan yang dilakukan oleh komputer.

3 Input-output, untuk memasukkan data sekaligus menunjukkan hasil dari suatu proses.

(63)

4 Decisio, suatu kondisi yang akan menghasilkan beberapa kemungkinan jawaban.

5 Off Line Connector, merupakan simbol untuk masuk atau keluarnya suatu prosedur pada lembar kertas yang lain.

6 Arus atau flow, prosedur yang dapat dilakukan dari atas ke bawah, bawah ke atas, kiri ke kanan, atau dari kanan ke kiri.

7 Menyatakan sekumpulan langkah atau proses

yang ditulis sebagai prosedur.

8 Untuk penyimpanan data.

4.5 Merancang Database Server

Database merupakan tempat penyimpanan data yang terstruktur sehingga dapat diakses dengan cepat dan mudah. Tahap mempersiapkan database ini merupakan tahap dimana penulis mempersiapkan tempat untuk menampung data di server. Data tersebut akan diproses oleh program yang kita buat pada tahap pemograman baik menambah, mengubah, penghapusan, dan menampilkan database itu sendiri.

(64)

Database terdiri dari tabel-tabel yang dibuat menggunakan program MySQL.

Database yang dirancang penulis adalah database sekolah yang terdiri dari 6 tabel sebagai berikut:

1. Tabel Admin

Tabel admin digunakan untuk menampung data dari admin SMP Negeri 5 Medan. Dalam tabel admin berisi fiel user dan password dimana password

adalah primary keynya. Berikut ini adalah field-field yang dibuat dalam tabel admin.

Tabel 4.3 Tabel Admin

Field Name Type Width Description

user varchar 20 Username

varchar

password 15 Password (primary key)

2. Tabel Registrasi Siswa

Tabel registrasi siswa digunakan untuk menampung data siswa SMP Negeri 5 Medan yang telah mendaftarkan diri di website SMP Negeri 5 Medan. Dalam tabel registrasi siswa nis merupakan primary key pada registrasi siswa. Berikut ini adalah field-field yang dibuat dalam tabel registrasi siswa.

Tabel 4.4 Tabel Registrasi Siswa

Field Type Width Description

(65)

varchar

nis 5 Nis (primary key)

kelas varchar 6 Kelas

alamat varchar 100 Alamat

tempat_tanggal_lahir varchar 60 Tempat,Tanggal Lahir

agama varchar 15 Agama

no_telepon varchar 20 No.Telepon

3. Tabel Registrasi Guru

Tabel registrasi guru digunakan untuk menampung data guru SMP Negeri 5 Medan. Dalam tabel registrasi guru, nip merupakan primary key pada registrasi guru. Berikut ini adalah field-field yang dibuat dalam tabel registrasi guru.

Tabel 4.5 Tabel Registrasi Guru

Field Type Width Description

nama varchar 50 Nama

varchar

nip 18 NIP (primary key)

agama varchar 15 Agama

golongan varchar 2 Golongan

tempat_tanggal_lahir varchar 60 Tempat/Tanggal Lahir

b_studi varchar 15 B.Studi

alamat varchar 100 Alamat

(66)

Tabel nilai siswa digunakan untuk mengisi nilai-nilai dari siswa SMP Negeri 5 Medan, siswa SMP Negeri 5 Medan dapat melihat nilai mereka melalu website

sekolah ini. Dalam tabel nilai siswa, nip merupakan primary key pada nilai siswa. Berikut ini adalah field-field yang dibuat dalam tabel nilai siswa.

Tabel 4.6 Tabel Nilai Siswa

Field Type Width Description

nama varchar 50 Nama

varchar

nis 5 NIS (primary key)

agama varchar 5 Agama

pkn varchar 5 PKN

b_indo varchar 5 B.Indo

b_ing varchar 5 B.ing

mtk varchar 5 MTK

ipa varchar 5 IPA

ips varchar 5 IPS

a_industri varchar 5 A.Industri

s_budaya varchar 5 S.Budaya

penjas varchar 5 Penjas

tik varchar 5 TIK

5. Tabel Registrasi Alumni

Tabel registrasi alumni digunakan untuk mengisi data diri para alumni-alumni, sehingga para alumni dapat mengetahui data teman-teman mereka. Dalam

(67)

tabel registrasi alumni, no merupakan primary key pada registrasi alumni. Berikut ini adalah field-field yang dibuat dalam tabel registrasi alumni.

Tabel 4.7 Tabel Registrasi Alumni

Field Type Width Description

int

no 10 No (primary key, auto_increment)

nama_lengkap varchar 50 Nama Lengkap

Tempat_tanggal_lahir varchar 60 Tempat/Tanggal Lahir

alamat varchar 100 Alamat

pekerjaan varchar 30 Pekerjaan

no_hp varchar 20 No.Hp/Telp

email varchar 20 Email

tahun_tamat varchar 4 Tahun Tamat pendidikan varchar 40 Pendidikan

6. Tabel Buku Tamu

Tabel buku tamu digunakan untuk mengisi pesan dan kesan untuk SMP Negeri 5 Medan dan diisi oleh tamu. Dalam tabel buku tamu, id merupakan primary key pada buku tamu. Berikut ini adalah field-field yang dibuat dalam tabel buku tamu

Tabel 4.8 Tabel Buku Tamu

(68)

int

id 10 Id Buku Tamu (primary key)

nama varchar 50 Nama

situs varchar 30 Situs

email varchar 30 Email

pesan text - Pesan

(69)

BAB 5

IMPLEMENTASI SISTEM

5.1 Pengertian Implementasi Sistem

Implementasi sistem (system implementation) adalah proses pegujian atau proses uji coba terhadap sebuah sistem yang telah selesai dibentuk.

5.2 Tujuan Implementasi Sistem

Tujuan implementasi sistem adalah sebagai berikut:

1. Menyelesaikan desain sistem yang ada dalam dokumen sistem yang disetujui, menysusun dokumen baru atau dokumen yang diperbaiki.

2. Menguji program-program dan prosedur baru atau dokumen yang diperbaiki.

3. Memastikan bahwa sistem yang dibuat dapat digunakan oleh setiap pemakai tanpa mengalami kesulitan dalam penggunaannya.

(70)

4. Menguji apakah sistem baru tersebut sesuai dengan apa yang diinginkan oleh pemakai.

5.3 Komponen dalam Implementasi Sistem

Adapun komponen utama dalam proses perancangan sistem informasi akademik ini yaitu:

1. Komponen Hardware

Komponen hardware (perangkat keras) adalah sebuah komponen yang sangat penting dan menentukan dalam proses perancangan sistem informasi akademik. Adapun spesifikasi komponen hardware yang digunakan, antara lain:

a. Notebook HP Mini 110 b. Hardisk 320 GB c. Ram 1 GB

d. Mouse

e. Printer

f. Dan lain-lain

2. Komponen Software

Komponen software (perangkat lunak) merupakan komponen vital yang sangat penting dalam proses perancangan sistem informasi akademik. Karena didalam komponen ini, semua kegiatan inti akan dilakukan. Adapun komponen software

yang digunakan, antara lain: a. PHP dan MySQL

(71)

b. MacromediaDreamweaver 8 c. Windows 7 Ultimate

d. AdobePhotoshop 7.0 e. GoogleChrome

f. Microsoft Office

g. Dan lain-lain

3. Brainware

Brainware adalah orang atau programmer yang membuat sistem informasi akademik tersebut dari awal hingga akhir atau dapat dikatakan sebagai orang yang memiliki keahlian dalam proses perancangan sebuah sistem yang akan dibentuk.

5.4 Proses Installasi Web Server (XAMPP)

XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program. Fungsi dari xampp adalah sebagai

server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Adapun langkah-langkah singkat dalam menginstal

(72)

1. Jalankan file Xampp-Win32-1.6.4-Installer dengan cara double klik pada icon.

Gambar 5.1 Xampp-Win32-1.6.4-Installer

2. Pilih bahasa yang digunakan dalam proses instalasi

Gambar 5.2 Installer Language

3. Klik tombol next untuk melanjutkan instalasi.

(73)

4. Untuk lokasi instalasi, penulis melakukannya secara default.

Gambar 5.4 Memilih Lokasi Instalasi

5. Pilih service yang digunakan pada installoption

Gambar 5.5 Install Option

6. Pilih install untuk proses penginstalan Xampp. Proses ini memerlukan beberapa menit hingga selesai.

(74)

Gambar 5.6 Proses Instalasi Xampp

7. Klik Finish untuk menyelesaikan instalasi

Gambar 5.7 Proses Instalasi Selesai

8. Control Panel Xampp 1.6.4

(75)

5.5 Proses Pengujian Website Melalui Browser

Proses pengujian merupakan hal penting yang harus dilakukan dalam sebuah sistem. Hal ini dikarenakan agar kita dapat melihat dan menilai secara langsung hasil dari sistem yang telah kita kerjakan. Adapun langkah-langkah yang harus dilakukan dalam proses pengujian website antara lain:

1. Simpan website (source coude) dan segala hal yang berkaitan dengan website yang telah dibuat didalam folder xampp htdocs. Dalam hal ini folder website

didalam htdocs bernama “smpnegeri5medan”.

2. Aktifkan web server yang telah diinstal ataupun yang telah tersedia sebelumnya (dalam hal ini yaitu xampp).

3. Buka browser yang tersedia untuk melihat database yang digunakan ketikan pada browser seperti berikut “localhost/phpmyadmin”, kemudian pilih nama

database yang digunakan. Apabila berhasil, maka pada layar akan muncul gambar seperti berikut:

(76)

4. Untuk melihat hasil website yang telah selesai, ketikan pada browser seperti berikut “localhost/smpnegeri5medan”, Apabila berhasil, maka pada layar akan muncul gambar seperti berikut:

Gambar 5.10 Halaman Index SMP Negeri 5 Medan

5.6 Demonstrasi Program

Adapun demosntrasi program yang terdapat pada website SMP Negeri 5 Medan adalah sebagai berikut:

(77)

1. Halaman Beranda

Halaman ini merupakan halaman utama dari website SMP Negeri 5 Medan. Halaman ini berisikan beberapa informasi umum tentang sekolah.

Gambar 5.11 Halaman Beranda

2. Halaman Sign In Admin

Halaman sign in admin akan menghubungkan ke halaman administrator. Dengan mengisi username dan password yang benar selanjutnya masuk ke halaman administrator.

(78)

Gambar 5.12 Halaman Sign In Admin

3. Halaman Administator

Halaman administrator hanya dapat diakses oleh administrator website

SMP Negeri 5 Medan untuk melakukan pengaturan website seperti menambah, menghapus dan mengubah data.

(79)

4. Halaman Registrasi Guru

Halaman registrasi guru digunakan untuk meregistrasikandata-data guru di SMP Negeri 5 Medan, dengan mengisi nama, nip, agama, golongan, tempat/tanggal lahir, bidang studi, dan alamat. Selanjutnya klik tombol registrasi, maka data yang telah diisi masuk kedalam database SMP Negeri 5 Medan.

Gambar 5.14 Halaman Registrasi Guru

5. Halaman Update dan Delete Guru

Halaman Update dan delete guru digunakan untuk mengupdate serta mendelete data guru, apabila data guru perlu ditambahkan klik update dan data guru perlu dihapuskan klik delete.

(80)

Gambar 5.15 Halaman Update dan Delete Guru

6. Halaman Registasi Siswa

Halaman registrasi siswa digunakan untuk meregistrasikan data diri siswa/siswi SMP Negeri 5 Medan, pada halaman registrasi siswa ini seluruh siswa dapat meregistrasikan data mereka sendiri, karena halaman registrasi siswa ini tidak berada pada halaman administrator.

(1)

$_PASS = ' '; //password mysql

$_DBNM = "buku"; //nama database //koneksi

$konek = mysql_connect('localhost','root',''); if($konek) {

$sele = mysql_select_db($_DBNM); if(!$sele) {

echo mysql_error(); }

} ?>

Index_bukutamu.php

<html> <body> <p> <?php

include "koneksi_bukutamu.php"; //jika ditekan tombol submit if(isset($_POST['submit'])) {

$nama = addslashes($_POST['nama']); $email = addslashes($_POST['email']); $situs = addslashes($_POST['situs']);

$pesan = addslashes(strip_tags($_POST['pesan'])); //jika nama dan pesan tidak kosong

if(!empty($nama) && !empty($pesan)) {

$sql = mysql_query("INSERT INTO bukutamu VALUES('','$nama','$situs','$email','$pesan',now())"); if($sql) {

alert('Terima kasih. Anda telah mengisi buku tamu'); document.location='lihat.bukutamu.php';

</script> <?

} else {

echo mysql_error(); }

} else { ?>

<? } } ?> <html> <head>

</head>

</tr> <tr>

<tr>

(2)

<td width="378" valign="middle">:

<tr>

<td height="18" valign="middle"> Email</td> <td valign="middle">:

<tr>

<td height="18" valign="middle"> Situs</td> <td valign="middle">:

<input name="situs" type="text" id="situs" value="http://" size="40" maxlength="40"><p>*Jika memiliki situs</td>

</tr> <tr>

<td height="101" valign="top"> Pesan*</td> <td valign="top">  

</tr> <tr>

<tr>

 <a href="lihat.bukutamu.php">Lihat Bukutamu</a></td> </tr>

<tr>

</tr> </form> </table> </div> </body> </html>

Edit_bukutamu.php

<?php include"time.php";?> <center>

<p> <h2> Bukutamu </h2> <?php

include 'koneksi_bukutamu.php';

$query = "SELECT * FROM bukutamu"; //the query for get all data in tb_student $result = mysql_query($query);

echo "<table border='1' cellpadding='2' cellspacing='2'>"; echo "<tr bgcolor='yellow' align='center'>

<td> <b> Id </b> </td> <td> <b> Nama </b> </td> <td> <b> Situs </b> </td>

<td> <b> Email </b> </td> <td> <b> Pesan </b> </td> <td> <b> Waktu </b> </td> <td> <b> Action </b> </td>

<td> <b> Action </b> </td> </tr>";

while ($data = mysql_fetch_array($result)) //mysql_fetch_array = get the query data into array

{

echo "<tr align='center'>

<td>".$data['id']."</td> <td>".$data['nama']."</td> <td>".$data['situs']."</td>

(3)

<td>".$data['pesan']."</td> <td>".$data['waktu']."</td>

<td> <i> <a href='formupdate_bukutamu.php?id=".$data['id']."'> Update </a> </i></td>

<td> <i> <a

href='proses_hapus_bukutamu.php?id=".$data['id']."'> Delete </a> </i></td> </tr>";

}

echo "</table>"; ?>

Formupdate_bukutamu.php

<?php

include 'koneksi_bukutamu.php';

$id = $_GET['id']; //get the no which will updated

$query = "SELECT * FROM bukutamu WHERE id = $id"; //get the data that will be updated

$hasil = mysql_query($query); $data = mysql_fetch_array($hasil); ?>

<td height="21" colspan="3"> <strong> Form Update</strong> </td>

<tr>

</tr> <tr>

</tr> <tr>

<td>Situs</td> <td>:</td>

</tr> <tr> <tr>

<td>Email</td> <td>:</td>

<tr>

<td>Pesan</td> <td>:</td>

</tr> <tr>

<td>Waktu</td> <td>:</td>

</tr>

</table> </form>

(4)

Lihat.bukutamu.php

<?php

include "koneksi_bukutamu.php"; ?>

<title>Lihat bukutamu</title>

<body>

<tr>

</tr> <tr>

<td height="20" valign="top"> <a href="index_bukutamu.php"><u>Klik Disini Untuk Mengisi Buku Tamu</u></a></td>

</tr> <tr>

<tr>

<tr>

$sql = mysql_query("SELECT * FROM bukutamu ORDER BY id DESC"); while($hasil = mysql_fetch_array($sql)) {

$nama = stripslashes($hasil['nama']); $email = stripslashes($hasil['email']); $situs = stripslashes($hasil['situs']); $pesan = stripslashes($hasil['pesan']); $time = $hasil['waktu'];

</a>

- <strong>email : </strong><a href="mailto:<? echo $email ?>"><? echo $email?>

- <strong>situs : </strong><a href="<? echo $situs ?>" target="_blank"><? echo $situs ?> </a>

- <? echo $time ?><br><p> <p>

<? echo nl2br($pesan); ?> <br><p> <p>

</table> </div> </body> </html>

(5)

Proses_hapus_bukutamu.php

<?php

include 'koneksi_bukutamu.php';

$id = $_GET['id']; //get the no which will delete

$query = "SELECT * FROM bukutamu WHERE ID = $id"; //get the data that will be delete

$hasil = mysql_query($query); $data = mysql_fetch_array($hasil); //query for delete data in database

$query = "delete from bukutamu where ID = '$id'";

$hasil = mysql_query($query); //see the result

if ($hasil) {

include "lihat.bukutamu.php";

echo"<center><h2>Data berhasil di DELETE<p></p> <a

href=menuadmin.php><p><u>Klik disini untuk kembali<u></p></a></h2></center>"; }

(6)

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN PENGETAHUAN ALAM

Jln. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155 Telp.(061) 8211050-8214290 Fax.(061) 8214290

Informasi Berbasis Web SMP Negeri 5 Medan