Sistem Informasi Akademik Berbasis Web Pada SMA Muhammadiyah 5 Lubuk Pakam

SISTEM INFORMASI AKADEMIK BERBASIS WEB PADA

SMA MUHAMMADIYAH 5 LUBUK PAKAM

TUGAS AKHIR

DINI HANDAYANI

072406054

PROGRAM STUDI D3 ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2010

SISTEM INFORMASI AKADEMIK BERBASIS WEB PADA

SMA MUHAMMADIYAH 5 LUBUK PAKAM

TUGAS AKHIR

Diajukan sebagai salah satu syarat dalam menyelesaikan Pendidikan Program Studi D3 Ilmu Komputer

DINI HANDAYANI

072406054

PROGRAM STUDI D3 ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2010

PERSETUJUAN

Judul : SISTEM INFORMASI AKADEMIK BERBASIS

WEB PADA SMA MUHAMMADIYAH 5 LUBUK PAKAM

Kategori : TUGAS AKHIR

Nama : DINI HANDAYANI

Nomor Induk Mahasiswa : 072406054

Program Studi : DIPLOMA 3 ILMU KOMPUTER

Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN

ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA

Diluluskan di

Medan, Juni 2010

Komisi Pembimbing :

Diketahui/Disetujui oleh

Departemen Matematika FMIPA USU Pembimbing,

Ketua,

Dr. Saib Suwilo, M.Sc Syahril Efendi, S.Si, M. IT

PENGHARGAAN

Puji dan syukur penulis panjatkan kehadirat Allah SWT yang telah memberikan rahmat dan karunia-Nya sehingga penulis dapat menyelesaikan Tugas Akhir ini tepat pada waktunya. Pembuatan Tugas Akhir ini merupakan salah satu syarat untuk menyelesaikan Program Studi Diploma III Ilmu Komputer pada Universitas Sumatera Utara. Adapun judul Tugas Akhir ini adalah “SISTEM INFORMASI AKADEMIK BERBASIS WEB PADA SMA MUHAMMADIYAH 5 LUBUK PAKAM”.

Selama mempersiapkan Tugas Akhir ini penulis banyak mendapat bantuan, dorongan, dan motivasi baik secara langsung maupun tidak langsung, maka pada kesempatan ini penulis ingin mengucapkan terimakasih kepada :

1. Bapak Prof. 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 Departemen Matematika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

3. Bapak Syahril Efendi, S.Si, M. IT selaku pembimbing penulis yang telah banyak memberikan saran dan masukan dalam penyelesaian Tugas Akhir ini.

4. Ibu Nurhayati Siregar, S. Pd selaku kepala sekolah MTs Al-Masruriyah Medan yang telah mengizinkan penulis melakukan penelitian dan membantu penulis selama penelitian.

5. Seluruh staf pengajar di Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara khususnya program studi D3 Ilmu Komputer yang telah benyak memberikan ilmu selama perkuliahan.

6. Ayahanda Irfan dan Ibunda Hartati atas doa restunya dan kasih sayangnya yang tiada habisnya diberikan pada penulis serta dukungan moril maupun materil yang tanpa jasanya tak mungkin penulis sampai pada saat sekarang.

7. Seluruh rekan mahasiswa Jurusan D3 Ilmu Komputer khususnya Kom C 2007 dan teman-teman yang telah banyak memberikan dorongan semangat. Dan terimakasih atas semua dukungannya.

Penulis menyadari bahwa Tugas Akhir ini masih banyak mendapati kekurangan dan kesalahan, untuk itu penulis mengharapkan kritik dan saran dari semua pihak guna penyempurnaan Tugas Akhir di masa yang akan datang. Akhir kata, semoga Tugas Akhir ini dapat berguna dan bermanfaat bagi kita semua dan penulis pada khususnya.

Medan, Mei 2010

ABSTRAK

Teknologi di bidang komputer saat ini sangat berkembang pesat sehingga dapat meningkatkan efisien dan efektifitas dalam melakukan setiap pekerjaan. Komputer bukan hanya sekedar pengolah data dan gambar saja tetapi penggunaanya semakin luas menjadi salah satu sarana komunikasi, media informasi dan edukasi. Perkembangan teknologi tersebut sangat mempengaruhi setiap badan usaha maupun perusahaan-perusahaan dalam hal mengenai masalah yang timbul dalam kegiatan operasionalnya. Demikian juga halnya dengan SMA Muhammadiyah 5 Lubuk Pakam khususnya website yang masih sederhana yang perlu dikembangkan dan dimodifikasi. Untuk itu perlu penulis mencoba untuk merancang suatu sistem yang berbasis komputer yang diharapkan dapat mengatasi kelemahan dari sistem kerja yang selama ini berjalan, khususnya informasi mengenai sekolah SMA Muhammadiyah 5 Lubuk Pakam.

DAFTAR ISI

Halaman

Persetujuan ii

Pernyataan iii

Penghargaan iv

Abstrak vi

Daftas Isi vii

Daftar Tabel ix

Daftar Gambar x

Bab 1 Pendahuluan 1

1.1 Latar Belakang 1

1.2 Identifikasi Masalah 2

1.3 Pembatasan Masalah 3

1.4 Maksud dan Tujuan 3

1.5 Metodelogi Penelitian 4

1.6 Sistematika Penulisan 5

Bab 2 Landasan Teori 7

2.1 Sejarah Singkat Internet 7

2.2 World Wide Web (WWW) 8

2.2.1 Lahirnya Web 9

2.2.2 Browser Web 10

2.2.3 Server Web 11

2.2.4 Istilah-istilah umum yang harus diketahui 12

2.3 Hyper Text Markup Language (HTML) 13

2.3.1 Dokumen HTML 13

2.4 Dynamic Hyper Text Markup Language (DHTML) 17

2.4.1 Cascading Style Sheet (CSS) 18

2.4.2 JavaScript 20

2.5 Pengenalan Hypertext Processor (PHP) 21

2.5.1 Sejarah PHP 21

2.5.2 Script PHP 25

2.3.3 Integrasi Dengan Database 26

2.6 Pengenalan Konsep Pemograman Berorientasi Objek dengan PHP 28

2.6.1 Mengelola Kompleksitas Aplikasi 28

2.6.2 Mengantisipasi adanya perubahan 30

2.7 MySQL 30

2.8 Macromedia Dreameaver 31

Bab 3 Deskripsi Sekolah 32

3.1 Sejarah Singkat Sekolah 32

3.2 Identitas Sekolah 32

3.3 Visi dan Misi 33

Bab 4 Perancangan Sistem 36

4.1 Perencanaan dan Perancangan 36

4.2 Rancangan Data Flow Diagram 38

4.3 Rancangan Diagram Alir (Flowchart) 39

4.3.1 Flowchart Menu Utama 39

4.3.2 Flowchart Portal Akademik 40

4.3.3 Flowchart Admin 40

4.3.4 Flowchart Administrator Siswa 42

4.3.5 Flowchart Administrator Guru 43

4.4 Merancang Database Server 43

4.5 Design Website 47

4.5.1 Design halaman home 47

4.5.2 Design header website 48

4.6 Gambaran Umum Perancangan Sistem 49

4.6.1 Administrator Website 49

4.6.2 Pengunjung website 51

Bab 5 Implementasi Sistem 52

5.1 Pengertian Implementasi Sistem 52

5.2 Tujuan Implementasi Sistem 52

5.3 Komponen Kebutuhan Sistem 53

5.3.1 Hardware 53

5.3.2 Software 53

5.3.3 Brainware 55

5.4 Demonstrasi Program 55

5.4.1 Halaman Portal Akademik 56

5.4.2 Halaman Depan Portal Akademik 56

5.4.3 Halaman Login Admin 57

5.4.4 Halaman Menu Admin 58

5.4.5 Halaman Input Siswa Baru 59

5.4.6 Halaman Edit Siswa 60

Bab 6 Kesimpulan dan Saran 61

6.1 Kesimpulan 61

6.2 Saran 62

Daftar Pustaka Lampiran A Lampiran B

DAFTAR TABEL

Halaman

Tabel 2.1 Daftar Database Yang didukung PHP 26

Tabel 4.1 Tabel Admin 43

Tabel 4.2 Tabel Siswa 44

Tabel 4.3 Tabel Nilai 44

Tabel 4.4 Tabel Guru 46

Tabel 4.5 Tabel Buku Tamu 46

Tabel 4.6 Tabel Informasi Akademik 47

DAFTAR GAMBAR

Halaman

Gambar 2.1 Tampilan Halaman Dokumen HTML 17

Gambar 2.2 Dokumen PHP ditampilkan di browser Mozila 25 Gambar 3.1 Struktur Organisasi SMA Muhamaadiyah 5 Lubuk Pakam 35

Gambar 4.1 Diagram Konteks Website 38

Gambar 4.2 Flowchart Menu Utama 39

Gambar 4.3 Flowchart Portal Akademik 40

Gambar 4.4 Flowchart Admin 41

Gambar 4.5 Flowchart Admin Siswa 42

Gambar 4.6 Flowchart Admin Guru 43

Gambar 4.7 Tampilan Halaman Home 48

Gambar 4.8 Tampilan Header Website 48

Gambar 4.9 Tampilan Halaman Administrator 50

Gambar 5.1 Tampilan Macromedia Drameweaver 8 54

Gambar 5.2 Halaman Portal Akademik 56

Gambar 5.3 Halaman Depan Portal Akademik 57

Gambar 5.4 Halaman Login Admin 58

Gambar 5.5 Halaman Menu Admin 58

Gambar 5.6 Halaman Menu Input Siswa Baru 59

ABSTRAK

Teknologi di bidang komputer saat ini sangat berkembang pesat sehingga dapat meningkatkan efisien dan efektifitas dalam melakukan setiap pekerjaan. Komputer bukan hanya sekedar pengolah data dan gambar saja tetapi penggunaanya semakin luas menjadi salah satu sarana komunikasi, media informasi dan edukasi. Perkembangan teknologi tersebut sangat mempengaruhi setiap badan usaha maupun perusahaan-perusahaan dalam hal mengenai masalah yang timbul dalam kegiatan operasionalnya. Demikian juga halnya dengan SMA Muhammadiyah 5 Lubuk Pakam khususnya website yang masih sederhana yang perlu dikembangkan dan dimodifikasi. Untuk itu perlu penulis mencoba untuk merancang suatu sistem yang berbasis komputer yang diharapkan dapat mengatasi kelemahan dari sistem kerja yang selama ini berjalan, khususnya informasi mengenai sekolah SMA Muhammadiyah 5 Lubuk Pakam.

BAB I

PENDAHULUAN

1.1. Latar Belakang

Teknologi informasi pada saat ini telah berkembang sangat pesat sehingga mempunyai dampak dalam meningkatkan efektifitas dan keefisienan dalam melakukan setiap pekerjaan. Mungkin suatu kenaifan kalau berbicara tentang teknologi informasi dan komunikasi, tanpa membicarakan suatu benda yang bernama komputer. Komputer merupakan suatu media elektronik yang memegang peranan yang sangat penting dalam perkembangan yang terjadi saat ini.

Komputer bukan lagi barang mewah atau sesuatu yang langka untuk dimiliki oleh seseorang seperti awal kedatangannya, tetapi sudah menjadi suatu keperluan bahkan kebutuhan yang sangat bersifat umum dan fital, terutama bagi perusahaan dan badan instansi baik milik pemerintah maupun swasta. Penggunaan komputer telah berkembang menjadi sebuah sarana komunikasi dan edukasi yang paling cepat saat ini. Sehingga pengunaannya menjadi penting di setiap sendi-sendi kehidupan masyarakat, termasuk dalam proses perolehan informasi pada suatu perusahaan ataupun dalam dunia pendidikan.

Sejak munculnya teknologi Internet, proses pengiriman, penyampaian, serta penerimaan informasi itu sendiri menjadi lebih cepat dan efektif. Seiring berkembangnya teknologi internet, maka aplikasi web atau yang sering juga disebut dengan perangkat lunak berbasis web ini baik dari segi penggunaan, ukuran, dan bahasa pemrograman yang digunakan serta kompleksitasnya juga ikut berkembang. Aplikasi ini telah banyak yang bersifat dinamis dan task oriented.

Cara kerja komputer yang cepat dan praktis dalam pengolahan data membuat komputer banyak digunakan oleh organisasi atau perusahaan. Oleh karena itu alangkah bagusnya jika sekolah juga menggunakan teknologi komputer dalam pengolahan data maupun informasi. Dengan pertimbangan tersebut penulis memilih judul “Sistem Informasi Berbasis Web Pada SMA Muhammadiyah 5 Lubuk Pakam”.

Dalam perancangan sistem informasi berbasis Web pada SMA Muhammadiyah 5 Lubuk Pakam ini penulis menggunakan bahasa pemograman PHP dan MySQL dan beberapa software pendukung seperti Apache dan Dreamweaver.

1.2. Identifikasi Masalah

Pengolahan data siswa dengan menggunakan komputer akan dapat menghemat waktu dan dapat mengefisienkan pengerjaan pengolahan data pada SMA Muhammadiyah 5 Lubuk Pakam. Dengan demikian dapat diidentifikasi masalah dalam penelitian ini adalah bagaimana membentuk sebuah pemograman berbasis web untuk mengolah data pada sekolah tersebut dengan efektif dan efisien sehingga dapat terorganisasi dengan baik.

1.3.Pembatasan Masalah

Agar pembahasan masalah tidak menyimpang dari tujuan penelitian, maka berikut adalah beberapa batasan yang perlu dibuat, yaitu:

a. Website ini akan menampilkan halaman-halaman web yang statis maupun dinamis mengenai sistem informasi SMA Muhammadiyah 5 Lubuk Pakam, seperti data guru dan data siswa.

b. Aplikasi ini dibangun dibawah sistem operasi Windows XP Professional

Services Pack 2.

c. Website yang dibangun mendukung bahasa pemograman web yang lainnya seperti HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), dan Javascript.

d. Aplikasi ini dibangun menggunakan Macromedia Dreamweaver 8.

e. Aplikasi dibangun menggunakan aplikasi web server Apache2triad yang terdiri dari Apache, PHP, dan MySQL.

1.4. Maksud dan Tujuan

Maksud penulis mengadakan penelitian pada SMA Muhammadiyah 5 Lubuk Pakam adalah untuk mensosialisasikan Sistem Informasi Akademik Berbasis Web pada SMA Muhammadiyah 5 Lubuk Pakam tersebut sehingga sistem informasi yang akan dirancang sesuai dengan kebutuhan dan permasaahan yang ada dengan menggunakan bahasa pemograman HTML, PHP, dan MySQL.

Adapun tujuan dari penelitian yang diakukan penulis adalah untuk merancang sistem informasi pada SMA Muhammadiyah 5 Lubuk Pakam dengan menggunakan bahasa pemograman HTML, PHP, dan MySQL. Bagi penulis untuk memenuhi syarat bagi Mahasiswa Fakultas Matematika dan Ilmu Pengetahuan Alam Program Studi D3 Ilmu Komputer dalam menyelesaikan perkuliahan.

1.5.Metodologi Penelitian

Metodologi penelitian yang digunakan penulis, meliputi antara lain: 1. Penelitian lapangan ( Field Research )

Penelitian dilakukan langsung ke SMA Muhammadiyah 5 Lubuk Pakam untuk mendapatkan data dan sistem yang sedang berjalan sekarang dimana penulis melakukan pengumpulan data dengan dua cara yaitu:

a. Wawancara

Wawancara yang dilakukan penulis adalah meyakinkan data yang diperoleh akurat. Dalam pengumpulan data tersebut penulis mewawancarai guru dan siswa. Untuk mengetahui apa dan bagaimana dari kegiatan pengolahan data tersebut serta kemampuan memberi informasi yang tepat dan jelas.

b. Observasi

Observasi yang dilakukan penulis adalah untuk mengamati dan

mengetahui secara langsung jalannya sistem yang sedang berjalan saat itu dan proses kerja dari tugas masing-masing serta melihat format-format laporan dalam sekolah tersebut yang digunakan saat itu.

2. Penelitian Kepustakaan

Penulis melakukan penelitian keperpustakaan dengan tujuan agar memperoleh data teoritis yang bersumber dari buku-buku ilmiah dan tulisan yang berkaitan dengan komputer dan masalah-masalah yang berkaitan dengan tugas akhir ini.

1.6. Sistematika Penulisan

Adapun sistematika penulisan Tugas Akhir ini adalah sebagai berikut:

BAB 1 : PENDAHULUAN

Dalam bab ini penulis menguraikan Latar Belakang, Perumusan Masalah, Maksud dan Tujuan, Pembatasan Masalah, Metodologi Penelitian dan Sistematika Penelitian.

BAB 2 : LANDASAN TEORI

Dalam bab ini penulis menguraikan beberapa hal yang berhubungan dengan aplikasi website dinamis yang ingin dibangun penulis yaitu sejarah singkat internet, World wide web, Internet, HTML (

HyperText Markup Language ), DHTML ( Dynamic HyperText Markup Language ), pengenalan PHP, pengenalan konsep Object Oriented Programming, MySQL dan Macromedia Dreamweaver.

BAB 3 : DESKRIPSI SINGKAT SMA MUHAMMADIYAH 5 LUBUK

PAKAM

Dalam bab ini penulis menyajikan gambaran tentang SMA Muhammadiyah 5 Lubuk Pakam yang terdiri dari profil, struktur organisasi dan visi misi sekolah.

BAB 4 : PERANCANGAN SISTEM

Dalam bab ini penulis menguraikan tentang perancangan sistem yang dirancang yang meliputi perancangan layout, perancangan database, gambaran aplikasi website yang akan dibuat serta bagaimana algoritma aplikasi tersebut saat dijalankan.

BAB 5 : IMPLEMENTASI SISTEM

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

BAB 6 : KESIMPULAN DAN SARAN

Dalam bab ini penulis menguraikan tentang kesimpulan dan saran.

BAB 2

LANDASAN TEORI

2.1. Sejarah Singkat Internet

Internet berawal dari diciptakannya teknologi jaringan komputer. Jaringan komputer merupakan beberapa komputer yang terhubung satu sama lain dengan memakai kabel dalam satu lokasi, misalnya satu kantor atau gedung. Jaringan komputer ini berfungsi agar pengguna komputer bisa bertukar informasi dan data dengan pengguna komputer lainnya.

ARPAnet (Us Defense Advanced Research Projects Agency) atau Departemen Pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk menghindarkan terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah dihancurkan. Jadi bila satu bagian dari sambungan jaringan terganggu dari serangan musuh, jalur yang melalui sambungan itu secara otomatis dipindahkan ke sambungan lainnya.

Setelah angkatan bersenjata Amerika, dunia pendidikan pun merasa sangat perlu mempelajari dan mengembangkan jaringan komputer. Salah satunya adalah

University of California at Los Angeles (UCLA). Akhirnya pada tahun 1970 internet

banyak digunakan di universitas-universitas di Amerika dan bekembang pesat sampai saat ini. Agar pengguna komputer dengan merek dan tipe berlainan dapat saling berhubungan, maka para ahli membuat sebuah protokol ( semacam bahasa) yang sama untuk dipakai di internet. Namanya TCP (Transmission Control Protocol) dan IP (Internet Protocol).

2.2. World Wide Web ( WWW )

World Wide Web (WWW) lebih dikenal dengan web, merupakan salah satu layanan

yang dapat dipakai oleh pemakai komputer yang terhubung ke internet.

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

browser web.

Saat ini internet identik dengan web, karena kepopuleran web sebagai standar

interface pada layanan-layanan yang ada di Internet, dari awalnya sebagai penyedia

informasi, kini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi bisnis (commerce).

Saat ini web seakan lebih populer dari pada email, walaupun secara statistik email masih merupakan aplikasi terbanyak yang digunakan oleh pengguna internet.

Web lebih populer bagi khalayak umum dan pemula, terutama untuk tujuan pencarian informasi dan melakukan komunikasi email yang menggunakan web sebagai

interfacenya.

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

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

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

a. Akses informasi mudah b. Setup server lebih mudah

c. Informasi mudah didistribusikan

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

2.2.1 Lahirnya web

Tahun 1989, Timothy Bernes-Lee seorang ahli komputer dari inggris dan peneliti lain di European Particle Physics Lab (Consei European pour la Recherche Nucleaire,

atau CERN) di Geneva, Swiss, mengembangkan suatu cara untuk men-share data antar koleganya menggunakan sesuatu yang disebut dengan hypertext. Pemakai di ERN dapat menampilkan dokumen pada layar komputer dengan menggunakan

software browser baru.

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

Kemampuan internet dimasukkan kedalam browser ini sehingga lompat dari satu dokumen ke dokumen lain, tidak lagi dari satu komputer saja, tetapi dapat melompat ke dokumen lain yang letak nya pada komputer remote. Seorang peneliti dapat juga mengirimkan sebuah file dari komputer remote ke sistem lokalnya, atau log in ke dalam suatu sistem remote hanya dengan mengklik hyperlink, tidak perlu melalui mekanisme FTP atau Telnet. Jalan pintas CERN digunakan sebagai dasar dari yang disebut sekarang dengan World Wide Web dan berikut server browser web-nya.

2.2.2 Browser web

Browser web adalah software yang digunakan untuk menampilkan informasi dari server web. Software ini kini telah dikembangkan dengan menggunakan user interface

grafis, sehingga pemakai dapat dengan mudah melakukan poin dan klik untuk pindah antar dokumen.

Lynx adalah browser web yang masih menggunakan mode teks, yang

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

Di saat perkembangan WWW ada dua browser web yang populer yaitu

Internet Explorer (IE) dan Netscape Navigator. Namun saat ini bermunculan browser

web lain yang turut meramaikan persaingan untuk merebut para pengguna internet. Di antara browser web yang telah banyak digunakan pada saat peluncurannya adalah MSN, Opera dan Mozila Firefox. Di antara browser web ini terdapat kelebihan dan kekurangan sehingga pengguna dapat memilih sesuai keinginan dan kemudahan yang ditawarkan.

2.2.3 Server web

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

Browser web seperti IE atau Opera berkomunikasi melalui jaringan (termasuk

jaringan internet) dengan server web, menggunakan HTTP. Browser akan mengirimkan request kepada server untuk meminta dokumen tertentu atau layanan lain yang disediakan oleh server. Server memberikan dokumen atau layanannya jika tersedia juga dengan menggunakan protokol HTTP.

2.2.4 Istilah-istilah umum yang harus diketahui

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

a. Protokol ; secara defenisi adalah standar pemrosesan informasi yang diterima

secara umum. Protokol TCP/IP merupakan protokol yang digunakan dalam komunikasi dalam internet.

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

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

nama “contoh.html” pada server

“/pub/files” maka URL-nya

d. Browser / Surfing merupakan kegiatan menelusuri dan mencari informasi

2.3. HTML (Hyper Text Markup Language)

2.3.1 Dokumen HTML

Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal dengan sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi di dalam internet.

Ada dua cara untuk membuat sebuah web page : dengan web editor (misalnya

Macromedia Dreamweaver atau Microsoft Frontpage) atau dengan editor teks biasa

(misalnya notepad atau editplus).

a. Penamaan Dokumen HTML

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

Ekstensi dokumen HTML yang menggunakan 3 karakter awalnya adalah untuk mengakomodasikan sistem penamaannya yang ada dalam sistem operasi DOS. Nama dokumen pada beberapa sistem operasi bersifat case sensitive (membedakan huruf besar dan huruf kecil). Nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya dokumen.html akan berbeda dengan DOKUMEN.html. kasus case sensitive akan dijumpai pada dokumen

web yang di hosting di dalam server yang berbasis *nix (keluarga sistem operasi UNIX).

b. 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.

Nama elemen ditunjukkan dengan nama tag nya. Suatu elemen didalam dokumen HTML harus ditandai dengan penulisan tag nya berpasangan. Ada beberapa elemen yang tidak mengharuskan tag nya dituliskan secara berpasangan, elemen tersebut diantaranya adalah:

a. Paragraf dengan tag <p>

b. Ganti baris – line break dengan tag <br> c. Garis datar – horizontal rule dengan tag <hr> d. List item dengan tag <li>

Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : <nama tag>_</nama tag>. 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 markup 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 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:

<html> <head>

…informasi tentang dokumen HTML </head>

<body>

…informasi yang ditampilkan dalam browser web </body>

Setiap dokumen HTML harus diawali dengan menuliskan tag <html> dan tag </html> diakhir dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini adalah dokumen HTML.

Dalam satu dokumen hanya ada satu elemen HTML. Section atau elemen head ditandai dengan tag <head> diawal, dan tag </head> di akhir. Section ini berisi informasi tentang dokumen HTMLnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampilkan pada caption bar dari window browser, ditandai dengan menggunakan tag <title> dan diakhiri dengan </title>.

Section atau elemen body ditandai dengan tag <body> diawal, dan tag </body> diakhir. Section body merupakan elemen terbesar didalam dokumen HTML. Elemen ini berisi isi dokumen yang akan ditampilkan pada browser, meliputi paragraph, grafik, link, table, dan sebagainya.

Contoh penulisan suatu dokumen HTML sebagai berikut:

<!—contoh.html--> <html>

<head>

<title>Halaman Contoh</title> </head>

<body>

File ini merupakan file contoh<br>

<b>Ini untuk membuat huruf cetak tebal</b> </body>

Hasil dokumen HTML yang ditampilkan didalam browser Internet Exlplorer:

Gambar 2.1 Dokumen HTML ditampilkan di browser IE. (Kadir,2002)

2.4 DHTML (Dynamic Hypertext Markup Language)

DHTML adalah suatu istilah yang diberikan untuk suatu halaman web yang memanfaatkan HTML dan DOM (Document Object Model), CSS (Cascading Style

Sheet) dan client-side scripting untuk membuat tampilan halaman tersebut dinamis

atau interaktif. Istilah Dynamic ditambahkan untuk membedakan sifat dinamis halaman web ini dengan halaman web statis yang dibuat hanya berdasarkan HTML.

DHTML mulai diterapkan pada browser generasi ke empat Microsoft Internet

merupakan teknologi client side yang hanya bergantung pada kemampuan browser untuk menampilkan dan memanipulasi elemen halaman web yang tidak bisa dilakukan dengan hanya mengandalkan HTML.

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

pulldown menu, trailing cursor, sliding text,dll.

2.4.1 CSS ( Cascading Style Sheet )

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

Perbedaan implementasi antara Netscape dan Microsoft sehingga akhirnya W3C melakukan suatu standardisasi CSS. Pada awalnya, upaya standardisasi CSS dibagi dua, yaitu CSSI untuk pengaturan warna dan style, serta CSS-P untuk

pengaturan posisi suatu elemen. CSS2 dari W3C selanjutnya menggabungkan kedua standar ini menjadi suatu standar yang meliputi semua setting tampilan suatu elemen halaman HTML.

Dalam spesifikasi CSS2, ada beberapa properti elemen dokumen yang berhubungan dengan posisi suatu elemen dihalaman browser. Property tersebut adalah:

a. Posisition - ada dua pilihan untuk nilai properti ini, yaitu absolute dan relative.

Setting absolute mengatur posisi elemen berdasarkan jarak terhadap ujung

kiri-atas elemen parent-nya. Sedangkan setting absolute bekerja sesuai layout HTML biasa dimana posisinya ditentukan berdasarkan akhir elemen sebelumnya.

b. Left dan Top – menentukan jarak kearah kanan dan ke bawah dari posisi awal

elemen. Unitnya bisa dinyatakan dalam point (pt), pixel(px) atau unit standar CSS lainnya.

c. Width dan Height – menentukan lebar dan tinggi elemen. Unitnya bisa

dinyatakan dalam point(pt), pixel(px) atau unit standar CSS lainnya.

d. Z-index – menentukan apakah suatu elemen ditampikan dilayar. Nilainya bisa

visible (tampil) atau hidden (tersembunyi).

e. Overflow – menentukan perilaku ruang penampung jika isinya melebihi

batasnya. Ada tiga untuk nilai properti ini, yaitu clip, scroll, dan none. Setting

clip berarti isi akan dipotong jika melebihi batas. Scroll akan memunculkan scrollbar pada container. Sedangkan none tidak akan melakukan apapun

f. Background-color atau Layer-background-color – menentukan warna dasar

dari suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang kedua berlaku untuk NS.

g. Background-image atau Layer-background-image – menentukan gambar latar

belakang dari suatu elemen. Yang pertama berlaku untuk IE, sedangkan yang kedua berlaku untuk NS.

2.4.2 JavaScript

JavaScript pertama kali muncul di Netscape 2.0 dan dikembangkan lebih lanjut pada Netscape 3.0. walaupun memiliki nama yang serupa. JavaScript sama sekali tidak

berhubungan dengan Java.

Java adalah bahasa pemograman tingkat tinggi untuk membuat aplikasi cross-platform, sedangkan JavaScript hanyalah scripting language yang terintegrasi dengan web browser untuk memberikan fleksibilitas tambahan bagi programmer untuk

mengontrol elemen-elemen dalam halaman web.

Aplikasi JavaScript sebenarnya cukup luas, tetapi disini penulis menggunakan

JavaScript dibatasi untuk DHTML, yaitu JavaScript yang digunakan untuk

mengakses property, method, dan event handler yang disediakan oleh DOM dan CSS.

Property didefenisikan sebagai setting nilai suatu objek tertentu. Contohnya

adalah warna suatu teks, action untuk suatu form, nama file untuk suatu gambar, dll.

maximize untuk window. Event handler menspesifikasikan bagaimana suatu objek

merespon terhadap suatu kejadian, misalnya suatu button di click, window di

resize,dll. (kadir,2002).

2.5 Pengenalan PHP (HyperText Preprocessor)

2.5.1 Sejarah PHP

PHP merupakan salah satu bahasa pemograman web yang masih muda namun telah mengalami perkembangan yang cukup signifikan dan telah banyak digunakan oleh banyak user dalam membuat aplikasi web baik perseorangan maupun perusahaan.

a. PHP/FI (personal home page / form interpreter )

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

PHP/FI merupakan akronim dari Personal Home Page/Form Interpreter. Pada awal penyusunan, PHP/FI hanya mempunyai fungsi dasar dari PHP yang ada sekarang ini. Jadi, dengan kata lain, pondasi PHP sekarang ini adalah PHP/FI. Karena ketika

pertama dibuat menggunakan Perl maka PHP/FI juga mempunyai susunan dan karakter pemograman yang sama dengannya.

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

b. PHP3

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

Alasan untuk mulai mengembangkan PHP, dan memfokuskan diri pada PHP 3.0 ialah pengembangan versi ini secara meluas dalam mendukung berbagai jenis

database, protokol dan API. Dengan dukungan yang semakin besar dari berbagai pihak yang menyumbangkan berbagai modul maka, pada tahun 1998, 10% dari seluruh web server yang ada kala itu telah menginstalasi PHP versi 3.0.

c. PHP 4

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

Dengan penambahan fitur baru, seperti session, output buffering dan penanganan input, menjadikan PHP 4 aman dari berbagai jenis bahasa pemograman berbasis web. Selain itu, inti perbedaan mereka terletak pada penggunaan Zend

Engine. Zend Engine merupakan inti dari PHP. Sebagian dari inti PHP, secara

fungsional ia bertugas menangani input, menterjemahkan dan mengeksekusinya. Ia juga berperan menterjemahkan fungsi.

d. PHP 5

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

2.5.2 Skrip PHP

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

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

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

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

Berikut ini contoh dari skrip PHP:

<html>

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

<body>

Cara menyapa PHP dengan akrab:<br> <p>

<?php

Echo(“Hallo PHP, apa kabar?”); ?>

</body> </html>

Gambar 2.2 Dokumen PHP ditampilkan di Browser Mozila

2.5.3 Integrasi dengan database

PHP yang digabungkan dengan database akan lebih berkekuatan jika digabungkan dengan database yang realible, gratis dan mudah diinstalasi. Terdapat dua jenis

database yang memenuhi yaitu MySQL dan PostgreSQL. Kedua jenis database ini

dipergunakan karena kinerja yang bagus dan untuk mengaksesnya.PHP mempunyai fungsi khusus. berikut ini daftar database yang didukung oleh PHP sampai versi 5:

Tabel 2.1 Daftar Database Yang Didukung PHP

No. Nama Database No. Nama Database

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

Oracle (OC17 dan OC18) Ovrimos PostgreSQL SQLite Solid Sybase Velocis Unix dbm

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

a. mysql_connect()

fungsi mysql_connect adalah untuk menghubungkan PHP dengan database

MySQL. Format fungsinya adalah:

b. mysql_select_db

setelah terhubung ke database MySQL dengan menggunakan mysql_connect, langkah selanjutnya adalah memilih database yang akan digunakan. Fungsi

mysql_select_db digunakan untuk memilih database. Format fungsinya adalah:

mysql_select_db(string database, koneksi)

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

c. mysql_query

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

Int mysql_query(string query, int[link_identifier]; d. mysql_num_rows

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

e. mysql_fetch_array

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

Array mysql_fetch_array(int result, int [result type])

2.6 Pengenalan Konsep Pemograman Berorientasi Objek dengan PHP

2.6.1 Mengelola kompleksitas aplikasi

Pemograman berorientasi objek (object oriented programming) memandang aplikasi perangkat lunak sebagai kumpulan object yang saling berinteraksi di dalam suatu sistem. Merancang sebuah aplikasi menggunakan tehnik object oriented dilakukan dengan membagi fungsi-fungsi berdasarkan pembagian tanggung jawab. Pembagian tanggung jawab diterapkan kepada setiap class yang dibuat. Setiap class menyediakan pelayanan untuk mengerjakan operasi tertentu. Operasi-operasi ini dilaksanakan oleh

object-object yang dibuat dari class tersebut. Dengan memfokuskan setiap class pada

tanggung jawab yang tertentu dengan tingkatan kompleksitas yang memadai tentu akan sangat membantu untuk mereduksi kompleksitas aplikasi secara keseluruhan.

Pembangunan aplikasi dapat dianalogikan sebagai misi dari sebuah tim dimana untuk mencapai tujuan dari misi ini dilakukan pembagian tugas yang jelas agar dapat menyelesaikan tugas yang diberikan dengan baik. Dengan tekhnik Object Oriented

ini, jalinan komunikasi antar programmer juga dipermudah dengan masing-masing class yang dibuat akan dilengkapi dengan interface yang menjadi standar bagaimana

class tersebut dihubungi. Interface itu mencakup:

a. Nama

b. Operasi yang menjadi tugasnya c. Cara penggunaannya

d. Hasil yang diperoleh

Pada akhirnya dengan pendekatan object oriented ini akan dihasilkan aplikasi dengan struktur yang kokoh. Operasi dan data dibungkus dengan rapi di dalam class. Data hanya dapat dimanipulasi menggunakan operasi-operasi yang disediakan didalam class.

2.6.2 Mengantisipasi adanya perubahan

Salah satu prinsip dalam perancangan aplikasi dengan pendekatan object oriented adalah pemisahan antara tampilan (user interface) dan implementasi (business logic). Tujuan pemisahan antara bagian tampilan dengan bagian implementasi adalah mengurangi ketergantungan antar bagian di dalam aplikasi.

Tingkat ketergantungan yang rendah tersebut dapat memudahkan penggantian, perbaikan, atau pengembangan suatu modul dengan tidak menimbulkan efek pada modul lainnya. Modul-modul yang independent memungkinkan penggunaan ulang (reuse) dari modul-modul tersebut.(Syafii,2005).

2.7 MySQL

MySQL merupakan salah satu perangkat lunak sistem pengelola basis data (Data Base

Management System). MySQL juga dapat dikategorikan sebagai Relational Data Base Management System (RDBMS), karena dalam pembuatan basis data pada MySQL

terdiri atas lajur horizontal dan lajur vertical.

MySQL pada saat ini banyak digunakan oleh pemograman web untuk

membangun situs yang memerlukan basis data sebagai data dan pengolahan data.(Syafii,2005).

2.8 Macromedia Dreamweaver

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

Dreamweaver merupakan editor HTML yang professional untuk mendesain,

menulis kode program, dan mengembangkan website, halaman web, dan aplikasi web. Dalam pengerjaannya, Dreamweaver memberikan 3 (tiga) pilihan yaitu bekerja dengan menulis kode program (menu code), dengan pengeditan secara visual (Mode

Design) dan dengan tampilan keduanya (mode split). Dreamweaver juga menyediakan

alat-alat bantu untuk mengembangkan kreativitas pembuatan web.(Bambang et al,2004).

BAB 3

DESKRIPSI SEKOLAH

3.1 Sejarah Singkat Sekolah

SMA Muhammadiyah 5 Lubuk Pakam berdiri pada tanggal 17 Juli 1982. Sekolah ini merupakan sekolah swasta yang memberikan pendidikan bagi masyarakat umum, di bawah naungan Muhammadiyah. Seperti sekolah SMA lainnya, sekolah ini juga memberikan ilmu pengetahuan umum dan juga pendidikan agama Islam.

3.2 Identitas Sekolah

Setiap sekolah memiliki identitas masing-masing, begitu juga dengan MTs Al-Masruriyah Medan memiliki indentitas sebagai berikut :

1. Nama Sekolah : SMA Muhammadiyah 5 Lubuk Pakam

2. Nama Yayasan/Pengelola : Muhammadiyah

3. Alamat Sekolah :

a. Jalan : Jl. RA Kartini No. 62.

c. Kelurahan : Lubuk Pakam III

d. Kecamatan : Lubu Pakam

e. Kabupaten : Deli Serdang

f. Provinsi : Sumatera Utara

4. No NDS.G/NDS : 01054008/304070116028

3.3 Visi dan Misi

Visi

Unggul dalam penguasaan pengetahuan, keterampilan yang dilandasi dengan iman dan taqwa secara berperilaku dan berakhlak mulia.

Misi

1. Mewujudkan intelektual, iman dan taqwa sebagai landasan utama dalam kegiatan siswa.

2. Mewujudkan sekolah sesuai dengan konsepsi wawasan cita-cita persyarikatan. 3. Mewujudkan keunggulan prestasi dalam bidang akademik, seni budaya dan

3.4 Struktur Organisasi

Struktur organisasi dari SMA Muhammadiyah 5 Lubuk Pakam adalah dengan garis komando dan garis koordinasi. Di dalam struktur organisasi ini setiap guru dan staf Pembantu Kepala Sekolah (PKS) dan setiap PKS bertanggung jawab kepada Kepala Sekolah. Dan kegiatan kepala sekolah akan diawasi oleh Kanwil Dikdasmen serta Majelis Dikdasmen PCM Lubuk Pakam.

Adapun struktur organisasi pada SMA Muhammadiyah 5 Lubuk Pakam dapat dilihat pada gambar berikut :

BAB 4

RANCANGAN SISTEM PROGRAM

4.1 Perencanaan dan Perancangan

Tahap 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 databasenya, Apache sebagai servernya, 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 tersebut ?

c. Apa saja aktivitas yang dapat dilakukan pengunjung dalam website ?

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 ke arah 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 sekolah.

b. Pengunjung situs tersebut adalah para siswa SMA Muhammadiyah 5 Lubuk Pakam, namun tidak menutup kemungkinan bagi masyarakat umum yang ingin mengetahui tentang SMA Muhammadiyah 5 Lubuk Pakam.

c. Aktivitas yang dapat dilakukan dalam situs tersebut adalah pengunjung dapat mengetahui informasi mengenai berita pendidikan terbaru, membaca artikel para siswa, mengetahui nilai siswa yang dapat diprint, mengetahui kegiatan yang dilakukan sekolah seta informasi penting lainnya.

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.

4.2 Rancangan Data Flow Diagram

Perancangan DFD yang penulis buat dalam perancangan ini terdiri dari Diagram Konteks sebagai berikut :

- Info Struktur Organisasi - Login Administrator

- Info Visi Misi - Data Guru

- Info Kurikulum - Data Siswa dan Nilai Siswa

- Info Data Guru - Data Informasi Beasiswa

- Info Data Siswa - Data Informasi Akademik - Info Komponen Sekolah dan fungsinya - Data Buku Tamu

Buku Tamu

Buku Tamu

Laporan - Pengunjung - Info Data Siswa - Administrator - Info Nilai Siswa - Data Guru - Informasi Akademik - Data Siswa dan Nilai Siswa - Informasi Beasiswa

Gambar 4.1 Diagram Konteks Website Pengunjung

0

Sistem Informasi Akademik Berbasis

Web Pada SMA Muhammadiyah 5

Lubuk Pakam

Administrator

Siswa Kepala Sekolah

4.3 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 SMA Muhammadiyah 5 Lubuk Pakam.

4.3.1 Flowchart menu utama

Flowchart menu utama dapat dilihat pada gambar 4.2 di bawah ini :

START

Tampilan Menu

Home

Profil

Guru dan Siswa

Buku Tamu

Portal Akademik

Admin

Keluar

Pilih link yang ada A

Pilih link yang ada

Pilih link yang ada

Pilih link yang ada

Prosedur Login Prosedur Login END B C D E Ya Ya Ya Ya Ya Ya Ya Tidak Tidak Tidak Tidak Tidak Tidak Tidak

4.3.2 Flowchart portal akademik

Flowchart portal akademik dapat dilihat pada gambar 4.3 di bawah ini : D

Pilih login siswa

Input nis & password

Nis & Password Nis & Password salah

Halaman depan Portal Akademik

Profil siswa

Informasi Hasil Studi

Informasi Akademik

Ganti Password

Logout

Tampil Profil Siswa

Tampil Nilai Siswa

Tampil Informasi Akademik Prosedur Ganti Password D Tidak Ya Ya Ya Ya Ya Tidak Tidak Tidak Tidak Tidak Ya

Gambar 4.3 Flowchart Portal Akademik

4.3.3 Flowchart admin

Halaman admin hanya bisa diakses oleh administrator. Username dan password dari administrator harus sesuai dengan tabel admin. Jika username dan password sesuai maka admin akan masuk ke halaman administrator dan jika username atau password

salah maka akan timbul pesan error dan diminta untuk login kembali. Flowchart admin dapat dilihat pada gambar 4.4 di bawah ini.

E

Buka Halaman Admin

Input username & password

Cek Username &

password Username & password salah

Tampil Menu Admin

Halaman Data Siswa

Halaman Data Guru

Logout

E

Tampil Halaman Siswa

Tampil Halaman Guru

F

G Ya

Ya

Ya

Ya

Tidak

Tidak

Tidak

Tidak

4.3.4 Flowchart administrator siswa

F

Halaman Admin siswa

Input Siswa Baru

Input Nilai Siswa

Edit Data Siswa

Logout

Form Input Siswa

Form Input Nilai

Edit Hapus Form Edit Update Simpan Data Data Tersimpan Data Sudah Dihapus Simpan Simpan Data Data Tersimpan Simpan Simpan Data Data Tersimpan E Ya Ya Ya Ya Ya _Ya Ya Ya Ya Tidak Tidak Tidak Tidak Tidak Tidak Tidak Tidak

4.3.5 Flowchart admin guru

G

Halaman Admin Guru

Input Guru Baru

Edit Data Guru

Logout

Form Input Guru

Edit Hapus Form Edit Update Simpan Data Data Tersimpan Data Sudah Dihapus Simpan Simpan Data Data Tersimpan E Ya Ya Ya Ya Tidak Tidak Tidak Tidak Tidak Ya Ya Tidak Tidak

Gambar 4.6 Flowchart Admin Guru

4.4 Merancang Database Server

Database terdiri dari tabel-tabel yang dibuat menggunakan program MySQL. Database yang dirancang penulis adalah database sekolah yang terdiri dari 7 (tujuh)

tabel sebagai berikut : 1. Tabel Admin

Tabel 4.1 Tabel Admin

Field Name Type Width Description

id Int 10 No.Urut (auto_increment, primary key)

user Varchar 45 Nama User

2. Tabel Siswa

Tabel 4.2 Tabel Siswa

Field Name Type Width Description

id int 10 No Urut (auto_increment, primary key) password varchar 20 Password Siswa Untuk Login Ke Portal

nis varchar 50 No Induk Siswa

nama varchar 40 Nama Siswa

kelamin varchar 15 Jenis Kelamin Siswa tanggal_lahir varchar 15 Tanggal Lahir Siswa

agama varchar 20 Agama Siswa

alamat varchar 60 Alamat Siswa

ortu varchar 40 Nama Orang Tua Siswa

3. Tabel Nilai

Tabel 4.3 Tabel Nilai

Field Name Type Width Description

id int 10 No.Urut (auto_increment, primary key)

nis varchar 15 Nomor Induk Siswa

semester

int 4 Semester

quran

int 4 Pelajaran Qur’an Hadist pai

kmd

int 4 Pelajaran Agama (KMD)

ppkn

int 4 Pelajaran PPKN

ba

int 4 Pelajaran Bahasa Arab bi

int 4 Pelajaran Bahasa Indonesia bing

int 4 Pelajaran Bahasa Inggris mm

int 4 Pelajaran Matematika

biologi

int 4 Pelajaran Biologi

fisika

int 4 Pelajaran Fisika

kimia

int 4 Pelajaran Kimia

ekonomi

int 4 Pelajaran Ekonomi

geokrafi

int 4 Pelajaran Geokrafi

sejarah

int 4 Pelajaran Sejarah

sosiologi

int 4 Pelajaran Sosiologi

retorika

int 4 Pelajaran Retorika

ti

int 4 Pelajaran Teknik Informasi penjas

int 4 Pelajaran Pendidikan Jasmani kesenian

4. Tabel Guru

Tabel 4.4 Tabel Guru

Field Name Type Width Description

id int 4 No Urut (auto_increment, Primary Key)

nig varchar 20 Nomor Induk Guru

nama varchar 45 Nama Guru

kelamin varchar 15 Jenis Kelamin Guru tanggal_lahir varchar 15 Tanggal Lahir Guru

alamat varchar 60 Alamat Guru

lulusan varchar 45 Pendidikan Terakhir Guru

agama varchar 15 Agama Guru

5. Tabel Buku Tamu

Tabel 4.5 Tabel Buku Tamu

Field Name Type Width Description

nama varchar 40 Nama Pengirim

email varchar 45 Email Pengirim

pesan text - Pesan yang Ditinggalkan Pengirim

6. Tabel Informasi Akademik

Tabel 4.6 Tabel Informasi Akademik

Field Name Type Width Description

id int 10 No.Urut (auto_increment, primary key)

tanggal date - Tanggal

7. Tabel Informasi Beasiswa

Tabel 4.7 Tabel Informasi Beasiswa

Field Name Type Width Description

id int 10 No.Urut (auto_increment, primary key)

beasiswa text - Informasi

tanggal date - Tanggal

4.5 Design Website

4.5.1 Design halaman home

Halaman home adalah halaman pembuka yang merupakan halaman yang akan tampil setelah masuk ke dalam situs SMA Muhammadiyah 5 Lubuk Pakam. Adapun tampilannya adalah sebagai berikut :

4.5.2 Design header website

Header website adalah bagian paling atas dari website yang biasanya berisi gambar website, alamat, dan nama website. Pada perancangan website ini penulis juga

mendesign header website dengan menggunakan software Adobe Photoshop CS3.

Header ini berisikan tulisan MTs SMA Muhammadiyah 5 Lubuk Pakam, dan alamat

sekolah. Secara keseluruhan design header yang penulis buat dapat dilihat pada gambar berikut ini :

Gambar 4.8 Tampilan Header Website

4.6 Gambaran Umum Perancangan Website

Sistem yang dibuat dalam situs ini bekerja dalam sebuah web server dan dapat diakses melalui jaringan interanet dan internet. Karena program ini berjalan dalam sebuah jaringan intranet dan internet, maka dapat dijalankan dengan multiuser, dapat diakses oleh banyak pengguna secara bersamaan dari komputer yang berbeda.

4.7.1 Administrator Website

Halaman administrator adalah kumpulan halaman web yang berfungsi sebagai ruang kerja seorang admin untuk memanage dan mengelola data dari website. Data yang ditampilkan pada website diambil langsung dari database. Ada 3 (tiga) cara dari seorang admin dalam mengelola database melalui halaman admin yaitu menambah data, mengedit data, dan menghapus data. Untuk masuk ke halaman menu admin pengguna harus melakukan login terlebih dahulu dengan username : admin dan

password : password.

Pada halaman administrator website SMA Muhammadiyah 5 Lubuk Pakam terdapat 3 (tiga) menu utama, yaitu Halaman Data Siswa, Halaman Data Guru dan Halaman Buku Tamu. Tampilan halaman Administrator dapat dilihat pada gambar berikut ini :

a. Halaman Data Siswa

Halaman ini berfungsi menyediakan ruang kerja bagi administrator untuk menambah, mengubah, menghapus, dan menambah data dan nilai siswa.

b. Halaman Data Guru

Halaman ini berfungsi menyediakan ruang kerja bagi administrator untuk menambah, mengubah, dan menghapus data guru yang mengajar di SMA Muhammadiyah 5 Lubuk Pakam. Seorang admin dapat melakukan penambahan data guru dengan meng-klik link input guru baru. Serta mengedit dan menghapus data guru dengan meng-meng-klik link edit data guru.

Data guru yang dapat ditambah, diubah dan dihapus mencakup nama, tempat lahir, tanggal lahir, jenjang dan jurusan,

4.6.2 Pengunjung Website

Jenis pengunjung pada website SMA Muhammadiyah 5 Lubuk Pakam yang dibuat penulis dibagi atas dua jenis pengunjung yaitu pengunjung umum dan pengunjung khusus (siswa/siswi, guru dan pihak SMA Muhammadiyah 5 Lubuk Pakam).

a. Pengunjung Umum

Pengunjung umum adalah pengunjung biasa atau masyarakat umum yang ingin melihat website SMA Muhammadiyah 5 Lubuk Pakam maupun untuk memperoleh informasi yang disajikan pada website tersebut. Pengunjung umum ini hanya dapat melihat isi dari website tanpa dapat menambah, mengubah, dan menghapus isi

website. Ada beberapa halaman website yang tidak dapat diakses oleh pengunjung

umum yaitu halaman admin dan halaman portal akademik.

b. Pengunjung Khusus

Pengunjung khusus adalah siswa/siswi maupun pihak sekolah SMA Muhammadiyah 5 Lubuk Pakam. Siswa/siswi memiliki username dan password selain dapat melihat isi umum website juga dapat melihat halaman portal akademik dari siswa yang bersangkutan. Halaman portal akademik berisikan profil siswa, hasil study, dan informasi akademik dan informasi beasiswa.

BAB 5

IMPLEMENTASI SISTEM

5.1 Pengertian Implementasi Sistem

Implementasi sistem adalah prosedur-prosedur yang dilakukan dalam penyelesaian desain sistem yang ada dalam rancangan sistem yang telah ditetapkan dan disetujui seperti menginstal, menguji sistem yang dibuat dan memulai sistem yang baru.

5.2 Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sistem ini adalah sebagai berikut: 1. Menyelesaikan desain sistem yang telah disetujui sebelumnya.

2. Memastikan bahwa pemakai (user) dapat mengoperasikan sistem baru. 3. Menguji apakah sistem baru tersebut sesuai dengan pemakai.

4. Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan membuat rencana, mengontrol dan melakukan instalasi baru secara benar.

5.3 Komponen Kebutuhan Sistem

Untuk menunjang penerapan sistem yang dirancang , dibutuhkan komponen-komponen yang sangat berperan terhadap kebutuhan sistem. Berikut beberapa komponen yang dibutuhkan sistem agar dapat beroperasi dengan baik.

5.3.1 Hardware

Komponen ini merupakan komponen pertama yang sangat diperlukan dalam mewujudkan sistem yang diusulkan. Dalam hal ini merincikan spesifikasi hardware yang diajukan adalah sebagai berikut:

a. Komputer dengan processor Intel Pentium 4. b. Memori RAM 256 MB atau lebih.

c. Kapasitas Hardisk minimal 10 GB.

d. Microsoft Windows 2000 service pack 4 atau XP Home. e. Microsoft Windows XP Professional (lebih disarankan).

5.3.2 Software

Dengan adanya hardware saja, tentu tidak akan dapat digunakan tanpa adanya bantuan penuh dari komponen Software. Adapun Software yang digunakan dalam pembuatan website ini adalah:

a. Sistem Operasi Windows XP.

Pada saat ini sistem operasi windows XP merupakan sistem operasi yang sering digunakan oleh masyarakat umum Indonesia. Sistem operasi ini lebih dikenal cara pengoperasiannya atau penggunaannya dibanding sistem operasi lain. Oleh karena itu penulis menggunakan sistem operasi ini.

b. Macromedia Dreamweaver 8

Dreamweaver program professional text editor dalam penulisan PHP maupun HTML yang digunakan untuk mengelola situs dan menata layout halaman web. Saat ini versi terbaru dreamweaver yang dikeluarkan oleh macromedia dreamweaver adalah versi 8, tetapi disini penulis menggunakan Macromedia Dreamweaver 8.

c. Apache2triad

Apache2triad merupakan software triad dari 3 aplikasi yaitu apache sebagai

web servernya, PHP sebagai bahasa pemograman serta MySQL sebagai databasenya. Dengan Apache2triad kebutuhan software telah terpenuhi.

5.3.3 Brainware

Brainware adalah sumber daya manusia yang nantinya akan berperan sebagai user

ataupun administrator. Brainware sebagai administrator adalah yang melakukan pengolahan website. Administrator harus mengerti tentang bahasa pemograman PHP dan MySQL serta jalannya sistem. Sedangkan user adalah pengguna website itu sendiri. User tidak harus mengerti tentang bahasa pemograman tersebut karena user hanyalah pengguna dan hanya cukup mampu mengoperasikan internet browser.

5.4 Demonstrasi Program

Sistem Informasi Akademik Berbasis Web Pada SMA Muhammadiyah 5 Lubuk Pakam yang penulis rancang ini memiliki beberapa halaman. Beberapa dari halaman tersebut adalah sebagai berikut :

5.4.1 Halaman portal akademik

Halaman portal akademik adalah halaman khusus siswa dimana dengan login ke halaman ini siswa dapat melihat hasil pelajaran data pribadi. Tampilan halaman Portal Akademik dapat dilihat pada gambar berikut :

Gambar 5.2 Halaman Portal Akademik

5.4.2 Halaman depan portal akademik

Halaman depan portal akademik adalah halaman lanjutan setelah melakukan login pada halaman portal akademik. Di halaman ini siswa yang telah login dapat melihat data pribadi, melihat hasil pelajaran (raport), informasi akademik, informasi beasiswa

dan mengganti password yang lama dengan password yang baru. Tampilan halaman depan portal akademik dapat dilihat pada gambar berikut ini :

Gambar 5.3 Halaman Depan Portal Akademik

5.4.3 Halaman login admin

Halaman login admin adalah halaman khusus admin. Sebelum admin masuk ke dalam halaman web nya, admin harus melakukan login terlebih dahulu di halaman login admin dengan cara mengisi kotak Username dan memasukkan Password.

Gambar 5.4 Halaman Login Admin

5.4.4 Halaman menu admin

Pada saat admin sukses melakukan proses login maka akan tampil menu admin, dimana pada menu tersebut admin dapat menambah, mengedit dan menghapus data.

5.4.5 Halaman menu input siswa baru

Pada halaman ini ada terdapat form untuk mengisi data dari siswa baru. Tampilan dari halaman menu input siswa baru sebagai berikut :

5.4.6 Halaman menu edit siswa

Halaman ini berisikan tentang data semua siswa. Dengan halaman ini siswa dapat memperbaharui dan menghapus data dari siswa. Tampilan dari halaman ini dapat dilihat pada gambar berikut :

BAB 6

KESIMPULAN DAN SARAN

6.1 Kesimpulan

Sistem informasi akademik berbasis web pada SMA Muhammadiyah 5 Lubuk Pakam ini adalah media yang dapat digunakan untuk menyampaikan informasi khususnya kepada siswa dan guru sekolah. Sistem informasi akademik ini dirancang penulis dengan menggunakan sistem operasi Windows XP Professional, Macromedia

Dreamweaver 8, Photoshop CS, Aplikasi Apache2triad sebagai web servernya, PHP

bahasa scripting-nya dan MySQL sebagai database manajemen sistem (DBMS). Dari penjelasan pada bab-bab sebelumnya, penulis dapat merangkum beberapa kesimpulan yaitu sebagai berikut:

1. Penggunaan dan Pemanfaatan Sistem Informasi Akademik Berbasis web Pada SMA Muhammadiyah 5 Lubuk Pakam ini dapat memberikan kemudahan bagi pihak sekolah dalam pengolahan data siswa dan data guru.

2. Dengan adanya Sistem Informasi Akademik Berbasis Web Pada SMA Muhammadiyah 5 Lubuk Pakam ini siswa dapat melihat langsung data pribadi dan nilai pelajaran mereka.

3. Pembuatan website ini dilakukan pada intranet atau komputer lokal tanpa terkoneksi ke internet. Koneksi internet dibutuhkan pada saat menghosting

website dan pengaksesan situs setelah di hosting.

6.2 Saran

Dari peninjauan dan riset yang telah dilakukan oleh penulis, maka penulis berkeinginan memberikan saran – saran yang mungkin dapat digunakan sebagai bahan pertimbangan bagi para pembaca, yaitu:

1. Sejalan dengan pesatnya kemajuan Teknologi, Penulis berharap agar pembaca lebih memperdalam pengetahuan dibidang komputer, mengingat penggunaan komputer dewasa ini tidak dapat dipisahkan lagi dengan aktifitas sehari-hari. 2. Perlu dilakukan pembaharuan atau update berkala oleh administrator pada

website ini guna memberikan informasi yang terbaru.

3. Untuk menarik minat pengunjung, perlu dibuat rancangan layout atau template dengan gambar dan animasi yang menarik.

4. Perlu dilakukan penggandaan (backup) database secara teratur ke dalam media penyimpanan lainnya untuk mencegah hal-hal yang tidak diinginkan seperti data hilang atau rusak.

DAFTAR PUSTAKA

Jogiyanto, H.M. 1988. Pengenalan Komputer : Dasar Ilmu Komputer, Pemograman,

Sistem Informasi, dan Intelegensi Buatan. Yogyakarta : Andi Yogyakarta.

Kadir, Abdul. 2003. Pemograman Web. Yogyakarta: Andi Yogyakarta.

Lenawati, Mei. 2006. Macromedia Dreameaver 8 dengan PHP. Yogyakarta

Syafii, M. 2005. Membangun Aplikasi Berbasis PHP dan MySQL. Yogyakarta: Andi

Wahana, Komputer. 2006. Membuat Website Interaktif dengan Macromedia

Dreamweaver 8. Yogyakarta: Andi.

KEMENTERIAN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jln. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155

Telp. (061) 8211050, 82144290, Fax. (061) 82144290

Kartu Bimbingan Tugas Akhir Mahasiswa

Nama : Dini Handayani

Nomor Induk Mahasiswa : 072406054

Judul Tugas Akhir : Sistem Informasi Akademik Berbasis Web Pada SMA Muhammadiyah 5 Lubuk Pakam. Dosen Pembimbing : Syahril Efendi, S.Si, M. IT

Tanggal Mulai Bimbingan : Tanggal Selesai Bimbingan :

No Tanggal Asisten Bimbingan

Pembahasan Pada Asistensi Mengenai, Pada Bab :

Paraf Dosen

Pembimbing Keterangan

* Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan Mahasiswa telah selesai.

Diketahui, Disetujui,

Departemen Matematika FMIPA USU Pembimbing Utama/

Ketua Penanggung Jawab

Dr. Saib Suwilo, M. Sc Syahril Efendi, S.Si, M.IT

Hasil Uji Program Tugas Akhir

S U R A T K E T E R A N G A N

Yang bertanda tangan di bawah ini, menerangkan bahwa Mahasiswa Tugas Akhir Program Diploma 3 Ilmu Komputer :

N a m a : DINI HANDAYANI

N I M : 072406054

Program Studi : Ilmu Komputer

Judul TA : SISTEM INFORMASI AKADEMIK BERBASIS WEB PADA SMA MUHAMMADIYAH 5 LUBUK PAKAM.

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut di atas pada tanggal Mei 2010.

Dengan Hasil : Sukses / Gagal

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Mei 2010

Dosen Pembimbing/Kepala Lab. Komputer,

Syahril Efendi, S.Si, M. IT NIP. 196711101996021001

1. Tampilan Halaman Home

3. Tampilan Halaman Guru dan Siswa

5. Tampilan Halaman Data Pribadi Guru

7. Tampilah Halaman Data Pribadi Siswa

9. Tampilah Halaman Depan Portal Akademik

11.Tampilan Halaman Nilai

13.Tampilan Halaman Login Admin

15.Halaman Input Data Guru

17.Halaman Input Data Siswa

19.Halaman Input Nilai Siswa

21.Halaman Buku Tamu

22.Halaman Pesan Buku Tamu

<td valign="top">

<table border="0" cellpadding="0" cellspacing="0" style="background: url(../images/left_bg.gif)">

<tr>

<td><img src="../images/left_left.gif" width="21" height="29" border="0" alt=""></td>

<td><img src="../images/spacer.gif" width="7" height="1" border="0" alt=""></td>

<td width="170"><div class="lb">Link Menu</div> <div class="lw">Link Menu</div></td>

<td><img src="../images/left_right.gif" width="6" height="29" border="0" alt=""></td>

</tr> </table>

<table border="0" cellpadding="0" cellspacing="0"> <tr>

<td style="background: url(../images/c_left.gif)"><img src="../images/spacer.gif" width="1"

height="1" border="0" alt=""></td>

<td width="194" align="center">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td>

<?php echo"<table><tr><td align=\"left\"><b>$nama</b><br>$nis</td></tr></table>"; ?>

<br> <div

class="lmenu"><img src="../images/ico2.gif" width="7" height="5" border="0" alt="" hspace="6"><?php echo"<a href=\"isi.php?nis=$nis\" class=top11>Halaman Depan </a>";?></div>

<div><img

src="../images/line_h2.gif" width="186" height="1" border="0" alt=""></div>

<div><img

src="../images/line_h2.gif" width="186" height="1" border="0" alt=""></div>

<div

class="lmenu"><img src="../images/ico2.gif" width="7" height="5"

border="0" alt="" hspace="6"><?php echo"<a href=\"profil.php?nis=$nis\" class=top11>Profil </a>";?></div>

<div><img

src="../images/line_h2.gif" width="186" height="1" border="0" alt=""></div>

<div

class="lmenu"><img src="../images/ico2.gif" width="7" height="5"

border="0" alt="" hspace="6"><?php echo"<a href=\"hasil.php?nis=$nis\" class=top11>Informasi Hasil Study

</a>";?></div>

<div><img

src="../images/line_h2.gif" width="186" height="1" border="0" alt=""></div>

<div

class="lmenu"><img src="../images/ico2.gif" width="7" height="5"

border="0" alt="" hspace="6"><?php echo"<a

href=\"transkip.php?nis=$nis\" class=top11>Transkip Nilai</a>";?></div>

<div

class="lmenu"><img src="../images/ico2.gif" width="7" height="5"

border="0" alt="" hspace="6"><?php echo"<a

href=\"informasi.php?nis=$nis\" class=top11>Informasi Akademik</a>";?></div>

<div

class="lmenu"><img src="../images/ico2.gif" width="7" height="5" border="0" alt="" hspace="6"><?php echo"<a

href=\"beasiswa.php?nis=$nis\" class=top11>Informasi Beasiswa</a>";?></div>

<div

class="lmenu"><img src="../images/ico2.gif" width="7" height="5"

border="0" alt="" hspace="6"><?php echo"<a href=\"password.php?nis=$nis\" class=top11>Password </a>";?></div>

<div

class="lmenu"><img src="../images/ico2.gif" width="7" height="5" border="0" alt="" hspace="6"><a href="logout.php" class="top11">Logout </a></div>

<div><img

src="../images/line_h2.gif" width="186" height="1" border="0" alt=""></div>

<div class="lmenu"> </div>

</td> </tr>

</table> </td>

<td style="background:

url(../images/c_right.gif)"><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>

</tr> <tr>

<td><img src="../images/c4.gif" width="5" height="5" border="0" alt=""></td>

<td style="background: url(../images/c_bot.gif)"><img src="../images/spacer.gif" width="1"

height="1" border="0" alt=""></td>

<td><img src="../images/c3.gif" width="5" height="5" border="0" alt=""></td>

</tr> </table>

<div><img src="../images/spacer.gif" width="1" height="7" border="0" alt=""></div>

<div><img src="../images/spacer.gif" width="1" height="7" border="0" alt="">

<table align="center"><tr><td><?php include"../time.php";

?></td></tr></table>

</div>

</td>

<td><img src="../images/spacer.gif" width="4" height="1" border="0" alt=""></td>

<td valign="top"><div><img src="../images/spacer.gif" width="1" height="3" border="0" alt=""></div>

<table border="0" cellpadding="0" cellspacing="0" style="background: url(../images/left_bg.gif)">

<tr>

<td><img src="../images/left_left.gif" width="21" height="29" border="0" alt=""></td>

<td><img src="../images/spacer.gif" width="7" height="1" border="0" alt=""></td>

<td width="404"><div class="lb">PORTAL AKADEMIK SMA MUHAMMADIYAH 5 L PAKAM</div>

<div class="lw">PORTAL AKADEMIK SMA MUHAMMADIYAH 5 L PAKAM</div></td>

<td><img src="../images/left_right.gif" width="6" height="29" border="0" alt=""></td>

</tr> </table>

<table border="0" cellpadding="0" cellspacing="0"> <tr>

<td style="background: url(../images/c_left.gif)"><img src="../images/spacer.gif" width="1"

height="1" border="0" alt=""></td>

<td width="428" align="center"> <div>

<font align="CENTER" color="#009933">Halaman Profil </font><br>

<?php

echo "<table border = \"0\" align =\"left\" > <tr bgcolor=#CCCCCC>

<tr></tr> <tr></tr> <tr></tr> </tr>";

Printf("<tr><td><STRONG> NIS </strong> </td><td><strong>:</strong></td><td>$nis </td></tr>");

Printf("<tr><td><strong> NAMA

</strong></td><td><strong>:</strong></td><td>$nama </td></tr>");

Printf("<tr><td><strong> TANGGAL LAHIR </strong></td><td><strong>:</strong></td><td>$tanggal_lahir

</td></tr>");

Printf("<tr><td><strong> JENIS KELAMIN </strong></td><td><strong>:</strong></td><td>$kelamin </td></tr>");

Printf("<tr><td><strong> ALAMAT

</strong></td><td><strong>:</strong></td><td>$alamat </td></tr>");

Printf("<tr><td><strong> NAMA ORANG TUA </strong></td><td><strong>:</strong></td><td>$ortu </td></tr>");

Printf("<tr><td><strong> AGAMA

</strong></td><td><strong>:</strong></td><td>$agama </td></tr>");

echo "</table>";

?>

<div></div>

<p><img src="../images/spacer.gif" width="1" height="14" border="0" alt=""></p>

</div> </td>

<td style="background: url(../images/c_right.gif)"><img src="../images/spacer.gif" width="1"

height="1" border="0" alt=""></td> </tr> <tr>

<td><img src="../images/c4.gif" width="5" height="5" border="0" alt=""></td>

<td style="background: url(../images/c_bot.gif)"><img src="../images/spacer.gif" width="1"

height="1" border="0" alt=""></td>

<td><img src="../images/c3.gif" width="5" height="5" border="0" alt=""></td>

</tr> </table> </td>

</tr> </table>

<div><img src="../images/spacer.gif" width="1" height="9" border="0" alt=""></div><table border="0" cellpadding="0" cellspacing="0" style="background: #767F82" width="647" align="center"> <tr>

<td><img src="../images/bot_left.gif" width="3" height="7"

border="0" alt=""></td> <td align="right"><a href="../images/img.html"><img src="../images/bot_right.gif"

width="4" height="7" border="0" alt=""></a></td> </tr></table> <div><img src="images/spacer.gif" width="1" height="6" border="0" alt=""></div>

<table border="0" cellpadding="0" cellspacing="0" width="647" align="center">

<tr>

<td align="center" valign="top"><div class="top11">Copyright © 2010 www.smamuhammadiyah5pakam.com <b>Powered by Dini Handayani</b><br>

<a href="http://icetemplates.com/" class="top11"></a></div></td>

</tr> </table>

<div><img src="../images/spacer.gif" width="1" height="42" border="0" alt=""></div>

<!-- Start of StatCounter Code -->

<script type="text/javascript" language="javascript"> var sc_project=1952940;

var sc_invisible=1; var sc_partition=17;

var sc_security="fa1db912"; </script>

<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscrip

t><a href="http://icetemplates.com/" target="_blank"><img src="http://c18.statcounter.com/counter.php?sc_project=1952940&amp;ja

va=0&amp;security=fa1db912&amp;invisible=1" alt="website templates" border="0"></a> </noscript>

<!-- End of StatCounter Code --> </body>

9. Server.php <?php

$host = "localhost"; // hostname mysql $user = "root"; // username

$pass = "hasibuan"; // password

$db = "dini"; // database yang digunakan

$koneksi = mysql_connect ($host,$user,$pass) or die ("Tidak dapat terhubung ke mysql");

mysql_select_db($db,$koneksi); ?>

10.Time.php <body>

<strong><font color="#000000" size="3"> <?php

//time.php

//menampilkan tanggal sekarang $data=time();

$sekarang=date("d M Y",$data); echo" <i>$sekarang</i><br>" ?>

</font></strong><font color="#FFFFFF" size="3"></font> </body>

</html>

11. Cek.php <?

session_start();

if(!session_is_registered("password")){ header("location:./error.php");

exit; } ?>

12. login.php <?php

include ("server.php");

$perintah = "select * from admin where user='$user' and password='$password'";

$hasil = mysql_query($perintah); $row = mysql_fetch_array($hasil);

if($row[user]==$user and $row[password]=$password) {

session_start();

session_register("user"); session_register("password"); $user=$row[user];

$password=$row[password]; if ($row[id]=='1')

exit; } }

else {

echo("WARNING<br>");

echo("Login gagal, Karena nama dan password tidak benar <br>"); echo("<A href='admin.php'>Login ulang </a><br><br>");

} ?>

13. logut.php <?

session_start(); session_destroy();

header("location:admin.php"); ?>