Perancangan Sistem Informasi Berbasis Web Pada MAN 2 Model Medan

TUGAS AKHIR

NANA SUTRI FARINDANI

052406019

PROGRAM STUDI D3 ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2008

PERANCANGAN SISTEM INFORMASI BERBASIS WEB

PADA MAN 2 MODEL MEDAN

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat mencapai gelar Ahli Madya

NANA SUTRI FARINDANI

052406019

PROGRAM STUDI D3 ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2008

Judul : PERANCANGAN SISTEM INFORMASI BERBASIS WEB PADA MAN 2 MODEL MEDAN

Kategori : TUGAS AKHIR

Nama : NANA SUTRI FARINDANI

Nomor Induk Mahasiswa : 052406019

Program Studi : D3 KOMPUTER

Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN

ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA

Diluluskan di Medan, Juni 2008

Komisi Pembimbing :

Diketahui/Disetujui oleh Pembimbing I

Departemen Matematika FMIPA USU Ketua,

Dr. Saib Suwilo, M.Sc Dra. Mardiningsih M.Si

PERNYATAAN

PERANCANGAN SISTEM INFORMASI BERBASIS WEB PADA MAN 2 MODEL MEDAN

TUGAS AKHIR

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

Medan, Juni 2008

NANA SUTRI FARINDANI 052406019

Puji dan syukur penulis panjatkan kehadirat Allah SWT, serta shalawat dan salam kepada junjungan kita nabi Muhammad SAW, karena atas berkah dan rahmatNya lah, akhirnya penulis dapat menyelesaikan dan merampungkan tugas akhir ini dalam waktu yang telah ditetapkan.

Ucapan terima kasih penulis sampaikan kepada Dra. Mardiningsih M.Si selaku pembimbing yang telah membantu penulis dalam penyelesaian tugas akhir ini dan juga memberikan panduan dan penuh kepercayaan kepada penulis untuk menyempurnakan tugas akhir ini. Ucapan terima kasih juga ditujukan kepada Kepala Sekolah MAN 2 Model Medan H. Ali Masran Daulay dan seluruh guru dan pegawai MAN 2 Model Medan, Ketua dan Sekretaris Departemen Matematika Dr. Saib Suwilo. M.Sc. dan Drs. Henri Rani Sitepu, Dekan dan Pembantu Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara, pegawai di FMIPA USU, dan rekan-rekan kuliah khususnya kelas komputer A 2005 dan juga teman-teman di D-3 Kimia Analis 2005, Diah, Nina dan Rahmi yang telah membantu penulis dalam pembuatan tugas akhir ini. Akhirnya tidak terlupakan kepada bapak, ibu dan semua ahli keluarga yang selama ini memberikan bantuan dan doa yang diperlukan.. Semoga Allah SWT membalas dengan kebaikan yang berlipat ganda dan selalu melimpahkan rahmat Nya kepada kita semua. Amin.

ABSTRAK

Tugas Akhir ini bertujuan membangun sebuah web yang dinamis. Sistem perancangan dalam membangun web MAN 2 Model Medan ini dikembangkan dengan menggunakan sebuah software yakni Adobe Photoshop CS, Macromedia Dreamweaver 8, Macromedia Fireworks 8, Apache Web Server, PHP, MySQL dan browser Internet Explorer. Adapun tabel-tabel yang dipakai dalam pembuatan web MAN 2 Model Medan ini adalah tabel guru, table siswa, tabel alumni, tabel admin, table berita dan tabel buku tamu. Semua tabel diatas digunakan untuk menampung data-data yang diperlukan dalam pembangunan web MAN 2 Model Medan. Tujuan aplikasi web ini adalah untuk menyajikan dan menyebarkan informasi kepada user/pengguna dengan baik dan dapat meng-update isi dari informasi yang terdapat pada web tersebut dengan mudah pada waktu yang diinginkan.

Halaman

Persetujuan ii

Pernyataan iii

Penghargaan iv

Abstrak v

Daftar Isi vi

Daftar Tabel ix

Daftar Gambar x

Bab 1 Pendahuluan 1

1.1 Latar Belakang Masalah 1

1.2 Identifikasi Masalah 3

1.3 Maksud dan Tujuan 3

1.4 Manfaat Penelitian 4

1.5 Ruang Lingkup Masalah 4

1.6 Tinjauan Pustaka 5

1.7 Metode Penelitian 6

1.8 Sistematika Penulisan 8

Bab 2 Landasan Teori 10

2.1 Pengertian Internet 10

2.2 Sejarah Internet 11

2.3. World Wide Web (WWW) 12

2.3.1 Lahirnya Web 13

2.3.2 Browser Web 14

2.3.3 Server Web 14

2.3.4 Istilah-Istilah Umum Yang Harus Diketahui 15

2.4. HTML (Hypertext Markup Language) 16

2.4.1 Dokumen HTML 16

2.4.1.1 Penamaan Dokumen HTML 16

2.4.1.2 Elemen Dan Tag HTML 17

2.5 PHP (Hypertext Preprocessor) 19

2.5.1 Pengertian PHP 19

2.5.2 Sejarah PHP 20

2.5.3 Kelebihan-Kelebihan PHP 21

2.5.4 Skrip PHP 22

2.5.5 Integrasi dengan Database 22

2.6 MySQL 25

2.6.1 Sejarah MySQL 25

2.6.2 Pengertian MySQL 26

2.7 Macromedia Dreamweaver 8 28

2.8 Macromedia Fireworks 8 29

Bab 3 Profil MAN 2 Mode Medan 30

3.1 Sejarah Singkat MAN 2 Model Medan 30

3.2 Latar Madrasah 31

3.3 Visi, Misi dan Target MAN 2 Model Medan 32

3.3.1 Visi 32

3.3.2 Misi 32

3.3.3 Target 32

3.4 Struktur Organisasi 33

3.5 Uraian Tugas dan Fungsi Struktur Organisasi 35

3.5.1 Kepala Madrasah 35

3.5.2 Kepala Urusan Tata Usaha 36

3.5.3 Wakil Kepala Madrasah (WKM) 36

3.5.3.1 Wakil Kepala Madrasah Kurikulum 36

3.5.3.2 Wakil Kepala Madrasah Kesiswaan 37

3.5.3.3 Wakil Kepala Madrasah Sarana/Prasarana 38

3.5.4 Koordinator Pembelajaran 39

3.5.5 Koordinator BP/BK 39

3.5.6 Wali Kelas 40

3.5.7 Kepala Unit Produksi/Komputer 40

3.5.8 Majelis Madrasah 41

Bab 4 Perancangan Sistem 42

4.1 Perencanaan dan Perancangan 42

4.2 Mempersiapkan Database Server 43

4.3 Membangun Halaman Situs 48

4.4 Flowchart Situs 51

4.5 Algoritma Program 55

Bab 5 Implementasi Sistem 59

5.1 Pengertian Implementasi sistem 59

5.2 Tujuan Implementasi Sistem 60

5.3 Komponen Dalam Implementasi Sistem 60

5.3.1 Hardware 60

5.3.2 Software 61

5.3.3 Brainware 61

5.4 Instalasi Apache dan PHP 62

5.4.1 Instalasi Apache 62

5.4.2 Instalasi PHP 65

5.4.3 Konfigurasi Apache dan PHP 66

5.5 Tampilan Program 67

5.5.1 Tampilan Menu Utama 67

5.5.2 Tampilan Menu Sejarah 68

5.5.3 Tampilan Visi Misi & Target 69

5.5.6 Tampilan Fasilitas Sekolah 72

5.5.7 Tampilan Data Guru 73

5.5.8 Tampilan Data Siswa 73

5.5.9 Tampilan Data Alumni 74

5.5.10 Tampilan Buku Tamu 74

Bab 6 Kesimpulan Dan Saran 75

6.1 Kesimpulan 75

6.2 Saran 76

Daftar Pustaka 77

DAFTAR TABEL

Halaman

Tabel 2.1 Daftar Database-Database Yang Didukung PHP 23

Tabel 4.1 Tabel Admin 44

Tabel 4.2 Tabel Berita 44

Tabel 4.3 Tabel Buku Tamu 45

Tabel 4.4 Tabel Guru 46

Tabel 4.5 Tabel Siswa 46

Tabel 4.6 Tabel Alumni 47

Tabel 4.7 Tabel Prestasi 47

Halaman

Gambar 3.1 Struktur Organisasi MAN 2 Model Medan 34

Gambar 4.1 Tampilan Macromedia Dreamweaver 8 50

Gambar 4.2 Flowchart rancangan aplikasi web (situs) 51

Gambar 4.3 Percabangan Dalam Suatu Flowchart 52

Gambar 4.4 Alur Flowchart Menu Utama 53

Gambar 4.5 Alur Flowchart Administrator 54

Gambar 4.6 Alur Flowchart User 55

Gambar 5.1 Apache 2.2.8 Instaler 63

Gambar 5.2 Setup wizard 63

Gambar 5.3 Server Information 64

Gambar 5.4 Destination folder 64

Gambar 5.5 Penginstalan Apache berhasil 65

Gambar 5.6 Tampilan Menu Utama 67

Gambar 5.7 Tampilan Menu Sejarah 68

Gambar 5.8 Tampilan Visi Misi & Target 69

Gambar 5.9 Tampilan Struktur Organisasi 70

Gambar 5.10 Tampilan Moto & Nilai 71

Gambar 5.11 Tampilan Fasilitas Sekolah 72

Gambar 5.12 Tampilan Data Guru 73

Gambar 5.13 Tampilan Data Siswa 73

Gambar 5.14 Tampilan Data Alumni 74

ABSTRAK

Tugas Akhir ini bertujuan membangun sebuah web yang dinamis. Sistem perancangan dalam membangun web MAN 2 Model Medan ini dikembangkan dengan menggunakan sebuah software yakni Adobe Photoshop CS, Macromedia Dreamweaver 8, Macromedia Fireworks 8, Apache Web Server, PHP, MySQL dan browser Internet Explorer. Adapun tabel-tabel yang dipakai dalam pembuatan web MAN 2 Model Medan ini adalah tabel guru, table siswa, tabel alumni, tabel admin, table berita dan tabel buku tamu. Semua tabel diatas digunakan untuk menampung data-data yang diperlukan dalam pembangunan web MAN 2 Model Medan. Tujuan aplikasi web ini adalah untuk menyajikan dan menyebarkan informasi kepada user/pengguna dengan baik dan dapat meng-update isi dari informasi yang terdapat pada web tersebut dengan mudah pada waktu yang diinginkan.

PENDAHULUAN

1.1 Latar Belakang

Informasi merupakan salah satu kebutuhan di dalam suatu instansi, perusahaan, organisasi, lembaga serta lingkungan yang berada di luar sistem. Informasi dianggap sangat penting karena dengan adanya informasi dapat menambah pengetahuan, mengurangi ketidakpastian dan resiko kegagalan serta dapat membantu para pemimpin atau manajer dalam mengambil suatu kesimpulan dan keputusan yang efektif dan efisien.

Perkembangan teknologi dewasa ini semakin pesat dan semakin akrab menyentuh kehidupan manusia. Dimana manusia yang dalam hal ini sebagai user menginginkan dapat memperoleh informasi yang lengkap serta up todate. Disinilah peranan teknologi yang semakin maju sangat dibutuhkan yaitu dalam upaya mewujudkan keinginan manusia tersebut. Karena informasi dirasa sangat penting dalam pengambilan keputusan dalam mencapai suatu tujuan, selain dapat memperoleh informasi yang lengkap dan up todate, perkembangan teknologi juga dapat mengirimkan serta mempublikasikan informasi kepada masyarakat luas secara online. Komputer sesuai dengan fungsinya sebagai salah satu alat yang berguna untuk mengelola data menjadi sebuah informasi yang tepat, akurat dan berdaya guna memiliki peranan yang cukup penting dalam penyediaan informasi yang diperlukan.

MAN 2 Model Medan merupakan salah satu lembaga pendidikan yang membutuhkan suatu sistem untuk dapat mempublikasikan seluruh kegiatannya kepada masyarakat luas secara online. MAN 2 Model Medan saat ini belum memiliki Web sebagai suatu wadah bagi para siswa dan para pengajar untuk berbagi dan mencari informasi-informasi yang dapat membantu pengembangan ilmu pengetahuan. Web ini bias menjadi tempat pertemuan siswa-siswa dan para pengajar untuk melakukan kontak antara pencari pengetahuan degan penyedia pengetahuan. Dengan pertimbangan tersebut maka penulis mencoba merancang suatu sistem online berbasis web di MAN 2 Model Medan dimana internet dijadikan sebagai media penghubungnya. Dengan sebuah website yang online di internet, masyarakat dapat dengan mudah mengakses dan mengetahui segala sesuatu mengenai MAN 2 Model Medan dengan cepat dan mudah tanpa memerlukan waktu banyak.

Informasi tentang sekolah yang dapat diakses oleh semua orang melalui internet memberikan ide buat penulis untuk membangun suatu situs sekolah yang bisa memberikan informasi bagi para pengunjungnya.

Dengan demikian maka penulis tertarik untuk membuat suatu situs sekolah yang berjudul:

“ PERANCANGAN SISTEM INFORMASI BERBASIS WEB PADA MAN 2 MODEL MEDAN”.

aktifitasnya untuk mencapai tujuan. Masalah yang akan dipecahkan adalah bagaimana MAN 2 Model Medan dapat memanfaatkan aplikasi web sebagai suatu sarana untuk menyajikan dan mengirimkan informasi dengan lebih cepat dan mudah bagi masyarakat umum dan kalangan keluarga besar MAN 2 Model Medan sendiri.

Sehubungan dengan hal tersebut dapa dirumuskan permasalahan dalam penelitian ini sebagai berikut:

1. Sejauh mana web ini dapat dirancang dengan semenarik mungkin sehingga

dapat memenuhi keingintahuan masyarakat mengenai MAN 2 Model Medan.

2. Informasi apa saja yang disediakan dalam web MAN 2 Model Medan sehingga

pengunjung dapat merasakan manfaatnya baik dari pihak sekolah maupun masyarakat luas.

3. Bagaimana informasi pada aplikasi web dapat di-update (diperbaharui) dengan

mudah pada waktu yang diinginkan.

1.3Maksud dan Tujuan

Adapun maksud dan tujuan dari penelitian ini adalah:

1. Merancang suatu aplikasi web yang dapat dimanfaatkan untuk menyebarkan

informasi yang cepat dan mudah.

2. Membantu pihak sekolah dalam menyebarkan dan menyediakan informasi

3. Sebagai tempat bagi siswa-siswa dan para pengajar di MAN 2 Model Medan untuk menggali kreativitas yang mereka punya.

1.4 Manfaat Penelitian

Adapun manfaat dari penelitian ini adalah:

1. Memberikan pengalaman bagi penulis dalam hal kerja sama dan berinteraksi dengan pihak sekolah dalam melakukan riset dan pengumpulan data yang akan digunakan dalam penyelesaian tugas akhir penulis.

2. Membangun sebuah aplikasi web yang dapat digunakan sebagi suatu sarana

penyedia informasi mengenai MAN 2 Model Medan.

3. Memberikan sebuah alternatif penyebarluasan informasi seputar MAN 2

Model Medan melalui internet sehingga dapat diakses oleh berbagai pihak dengan lebih fleksibel.

1.5Ruang Lingkup Masalah

Untuk menghindari penyimpangan maksud dan tujuan serta agar permasalahan yang dibahas lebih terfokus dan tidak melebar, penulis membatasi permasalahan yang akan dibahas. Adapun batasan masalahnya adalah menampilkan halaman-halaman web baik bersifat statis maupun dinamis sebagai suatu website yang dapat memberikan informasi mengenai MAN 2 Model Medan yaitu, sejarah sekolah, struktur organisasi sekolah, visi misi dan target sekolah serta moto dan nilai sekolah.

pembangunan sistem informasi berbasis web ini adalah: Apache 2.2.3, PHP 5.2.0, MySQL 5.0, Macromedia Dreamweaver 8, Adobe Photoshop Cs dan beberapa software pendukung lainnya.

1.6Tinjauan Pustaka

Sebagai karya tulis yang ingin dinilai baik haruslah memiiki referensi yang cukup. Oleh karena itu penulis mengumpulkan bahan bacaan guna mengumpulkan informasi yang berhubungan dengan materi yang terdapat dalam tugas akhir nantinya. Sebagai sumber bacaan atau informasi tersebut penulis mendapatkannya dari perpustakaan Universitas Sumatera Utara, koleksi buku pribadi serta pinjaman dari teman-teman.

Adapun beberapa buku panduan yang penulis pergunakan saat melakukan tinjauan pustaka dalam pembangunan aplikasi web pada MAN 2 Model Medan adalah sebagai berikut:

1. Membuat Website Interaktif dengan Macromedia Dreamweaver 8, Wahana

Komputer, 2006.

Adapun materi yang diambil dari buku ini adalah mengenal Macromedia Dreamweaver 8. Macromedia Dreamweaver 8 mendukung program Script Side yang terkenal, yaitu Java Scipt, seperti Personal Home Page (PHP), Active Server Page (ASP), ASP.NET, ColdFusion dan Java Server Page (JSP). Fasilitas terbaru dari Macromedia Dreamweaver 8 adalah Zoom Tool and Guides, Panel CSS yang terbaru, Code Collapse, Coding Toolbar dan Insert Flash Video.

2. Desain Web dengan Microsoft Office XP oleh Ir. Pandapotan Sianipar, tahun 2002, penerbit Elex Media Komputindo.

Adapun materi yang diambil dari buku ini adalah tentan g pembuatan link pada halaman web yang terdapat pada bab 10, halaman 137.

3. Manajemen Website dan Server WWW oleh Rahmad Rafiudin, tahun 2006,

Penerbit Andi.

Adapun materi yang diambil dari buku ini adalah mengenai elemen dasar manajemen WWW pada bab 1, halaman 1-16.

1.7Metode Penelitian

Adapun metode penelitian yang digunakan penulis dalam mengumpulkan data-data yang dibutuhkan dalam pembuatan web ini adalah:

1. Penelitian Lapangan (Field Research)

Penelitian dilakukan langsung ke lapangan, yaitu MAN 2 Model Medan. Untuk mendapatkan data dimana penulis melakukan pengumpulan data dengan cara melakukan wawancara kepada guru-guru dan pegawai pada sekolah tersebut dan juga melakukan peninjauan langsung di MAN 2 Model Medan.

masalah yang dibahas sehingga dapat membantu penyelesaian masalah dalam perancangan situs yang benar, serta dalam mendukung tugas akhir ini untuk menyusun landasan teoritis.

3. Membuat rancangan database, gambaran sistem dan algoritma dari sistem yang

dibangun.

4. Merancang website tersebut dengan menggunakan software-software, yaitu

Apache 2.2.3, PHP 5.2, MySQL 5.0, Macromedia Dreamweaver 8, Adobe Photoshop Cs dan beberapa software pendukung lainnya. Tahap-tahap yang dilakukan sebelum melakukan perancangan adalah sebagai berikut:

a) Mencari bahan atau referensi yang berhubungan dengan software-software

pendukung tersebut. Hal ini bertujuan untuk memudahkan penulis untuk membangun website yang diinginkan dan agar dapat mencapai hasil yang maksimal.

b) Membuat desain website tersebut sehingga tampilan dari website menjadi lebih

menarik, tidak membosankan dan diminati oleh banyak orang.

c) Membuat dan menentukan script-script program yang dibutuhkan dalam

pembuatan website tersebut.

5. Menguji website yang dibangun dan melakukan perbaikan jika masih ditemukan

kesalahan dan masih adanya kekurangan atau ketidaksempurnaan dalam membangun website tersebut.

1.8Sistematika Penulisan

Adapun sistematika penulisan laporan Tugas Akhir ini adalah sebagai berikut:

BAB 1 : Pendahuluan

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

BAB 2 : Landasan Teori

Dalam bab ini penulis menjelaskan teori-teori singkat tentang hal-hal yang berhubungan dengan judul dan bahasa pemrograman dan software-software yang digunakan oleh penulis.

.

BAB 3 : Sekilas Gambaran MAN 2 Model Medan

Dalam bab ini penulis menyajikan gambaran tentang MAN 2 Model Medan yang terdiri dari profil sekolah, struktur organisasi, visi misi dan target MAN 2 Model Medan serta moto dan nilai MAN 2 Model Medan.

pembuatan program, persiapan database, membangun halaman situs yang akan dibuat serta flowchart pada web tersebut.

BAB 5 : Implementasi Sistem

Dalam bab ini penulis menyajikan tentang defenisi, tujuan dan langkah-langkah dalam implementasi sistem juga disertai dengan komponen-komponen kebutuhan sistem dan Instalasi Apache, PHP dan MySQL, dan Tampilan Halaman.

BAB 6 : Kesimpulan dan Saran

Dalam bab ini penulis menguraikan tentang beberapa kesimpulan dari uraian bab-bab sebelumnya dan juga memberikan saran yang mungkin dapat bermanfaat.

BAB 2

LANDASAN TEORI

2.1Pengertian Internet

Internet berasal dari kata Interconnection Networking 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.

Secara etimologis, internet berasal dari bahasa Inggris, yakni inter berarti antar dan net berarti jaringan sehingga dapat diartikan sebagai hubungan antarjaringan.

Dalam mengatur integrasi dan komunikasi jaringan komputer digunakan protokol yaitu TCP/IP. TCP (Transmission Control Protocol) bertugas memastikan bahwa semua hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) yang mentransmisikan data dari satu komputer ke komputer lain. TCP/IP secara umum berfungsi memilih rute terbaik transmisi data, memilih rute alternatif jika suatu rute tidak dapat digunakan, mengatur dan mengirimkan paket-paket pengiriman data.

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.

Sejarah terciptanya internet dimulai di Amerika, saat itu dalam keadaan perang. 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

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

banyak digunakan di universitas-universitas di Amerika dan berkembang pesat sampai saat ini. Selanjutnya, pemerintah Amerika Serikat memberikan izin kearah komersial pada awal tahun 1990. Agar para pengguna komputer dengan merek dan tipe berlainan dapat saling berhubungan, maka para ahli membuat sebuah protokol (semacam bahasa) yang sama untuk dipakai di internet. Namanya TCP (Transmission

Control Protocol, bahasa Indonesianya Protokol Pengendali Transmisi) dan IP (Internet Protocol).

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

yang didapat 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.

Kini internet identik dengan web, karena kepopuleran web sebagai standar

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

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

Web memudahkan pengguna komputer untuk berinteraksi dengan pelaku

internet lainnya dan menelusuri (informasi) di internet.

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

a. Akses informasi mudah.

b. Setup server lebih mudah.

c. Informasi mudah didistribusikan.

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

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

CERN dapat menampilkan dokumen pada layar komputer dengan menggunakan

software browser baru.

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

Kemampuan internet dimasukkan ke dalam browser ini sehingga lompat dari satu dokumen ke dokumen lain, tidak lagi dari satu komputer saja, tetapi dapat melompat ke dokumen lain yang letaknya pada komputer remote. Seorang peneliti dapat juga mengirimkan sebuah file dari komputer remote ke sistem lokalnya, atau log

in ke dalam suatu sistem remote hanya dengan mengklik hyperlink, tidak perlu melalui

mekanisme FTP atau Telnet. Jalan pintas CERN digunakan sebagai dasar dari yang disebut sekarang dengan Word Wide Web dan berikut server dan browser webnya (sekarang di maintenance oleh World Wide Web Consortium).

Browser web adalah software yang digunakan untuk menampilkan informasi dari

server web. Software ini kini telah dikembangkan dengan menggunakan user interface grafis, sehingga pemakai dapat dengan mudah melakukan ‘point dan click’ untuk pindah antardokumen.

Di saat perkembangan WWW ada dua browser web yang populer yaitu Internet

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

lain yang turut meramaikan persaingan untuk merebut para pengguna internet. Di antara browser web yang telah banyak digunakan pada saat peluncurannya adalah

MSN , Opera dan Mozilla Firefox. Diantara browser web ini terdapat kelebihan dan

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

2.3.3Server Web

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

Macam-Macam Server Web:

1. Apache (Open Source)

2. Xitami

3. IIS

4. PWS

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

a. Protokol; Secara definisi adalah standar pemrosesan informasi yang diterima

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

b. URL (Universal Resource Locator); URL digunakan sebagi penunjuk lokasi pada

internet. URL adalah konsep nama file standar yang diperluas dengan jaringannya. Nama file ini tidak hanya menunjukkan direktori dan nama filenya, tetapi juga nama mesinnya dalam jaringan. Jika suatu situs tidak mempunyai URL, maka situs web tersebut tidak dapat dikunjungi.

c. HTTP (HyperText Transfer Protocol); HTTP adalah protocol yang sering

digunakan untuk berkomunikasi antara browser dan web server melalui jaringan internet. 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.

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

melalui layanan informasi web.

e. Browser / Surfer; Browser adalah sebuah program yang digunakan untuk

2.4HTML (HyperText Markup Language)

2.4.1 Dokumen HTML

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

Ada dua cara untuk membuat sebuah web page yaitu dengan web editor (misalnya Macromedia Dreamweaver atau Microsoft Frontpage) atau dengan editor

teks biasa (misalnya notepad atau editplus).

2.4.1.1 Penamaan Dokumen HTML

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

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

2.4.1.2 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 tagnya. Suatu elemen di dalam dokumen HTML harus ditandai dengan penulisan tagnya yang berpasangan. Ada beberapa elemen yang tidak mengharuskan tagnya 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 : <namatag> _ </namatag>. Penulisan penamaan tag bebas, dapat

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 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:

<html> <head>

… informasi tentang dokumen HTML </head>

<body>

… informasi yang ditampilkan dalam browser web </body>

</html> di akhir 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> di awal, 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> di awal, dan tag </body> di akhir. Section body merupakan elemen terbesar di dalam dokumen HTML.

Elemen ini berisi isi dokumen yang akan ditampilkan pada browser, meliputi paragraf, grafik, link, tabel, dan sebagainya.

2.5PHP (HyperText Preprocessor)

2.5.1Pengertian PHP

PHP singkatan dari PHP Hypertext Preprocessor yang digunakan sebagai bahasa script server-side dalam pengembangan web yang disisipkan pada 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. http://www.php.net. PHP ditulis menggunakan bahasa C.

2.5.2 Sejarah PHP

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP bernama FI (Form Interpreted). Pada saat tersebut PHP adalah sekumpulan script yang digunakan untuk mengolah data form dari web. Perkembangan selanjutnya adalah Rasmus melepaskan kode sumber tersebut dan menamakannya PHP/FI, pada saat tersebut kepanjangan dari PHP/FI adalah Personal Home Page/Form Interpreter. Dengan pelepasan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini interpreter sudah diimplementasikan dalam C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan. Pada tahun 1997, sebuah perusahaan bernama Zend, menulis ulang interpreter PHP menjadi lebih bersih, lebih baik dan lebih cepat. Kemudian pada Juni 1998 perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan nama rilis tersebut menjadi PHP 3.0. Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai. Versi ini banyak dipakai sebab versi ini mampu dipakai untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan proses dan stabilitas yang tinggi. Pada Juni 2004, Zend merilis PHP 5.0. Versi ini adalah versi mutakhir dari PHP. Dalam versi

dikenalkan model pemrograman berorientasi objek baru untuk menjawab perkembangan bahasa pemrograman ke arah pemrograman berorientasi objek.

2.5.3Kelebihan-kelebihan PHP

PHP memiliki banyak kelebihan yang tidak dimiliki oleh bahasa script sejenis. PHP difokuskan pada pembuatan script server-side, yang bisa melakukan apa saja yang dapat dilakukan oleh CGI, seperti mengumpulkan data dari form, menghasilkan isi halaman web dinamis dan kemampuan mengirim serta menerima cookies, bahkan lebih daripada kemampuan CGI.

PHP dapat digunakan pada semua sistem operasi, antara lain LINUX, UNIX (termasuk variannya HP-UX, Solaris dan OpenBSD), Microsoft Windows, Mac OS X, RISC OS. PHP juga mendukung banyak Web Server, seperti Apache, Microsoft Internet Information Server (MIIS), Personal Web Server (PWS), Netscape and iPlanet servers, Oreilly Website Pro server, audium, Xitami, OmniHTTPd, dan masih banyak lagi lainnya, bahkan PHP dapat bekerja sebagai suatu CGI processor.

PHP tidak terbatas pada hasil keluaran HTML (HyperText Markup Languages). PHP juga memiliki kemampuan untuk mengolah keluaran gambar, file PDF, dan mofies Flash. PHP juga dapat menghasilkan teks seperti XHTML dan file XML lainnya.

Skrip PHP berkedudukan sebagai tag dalam bahasa HTML. Ada empat macam pasangan tag PHP yang dapat digunakan untuk menandai blok script PHP:

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

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

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

2.5.5 Integrasi dengan Database

PHP yang digabungkan dengan database akan lebih berkekuatan jika digabungkan dengan database yang reliabel, gratis dan mudah diinstalasi. Terdapat 2 (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:

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

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

Tabel 2.1 Daftar Database-Database Yang Didukung PHP

PHP mempunyai fungsi khusus untuk mengakses MySQL. Ada sekitar 48

fungsi yang didukung PHP dalam mengakses MySQL dalam membuat aplikasi. Adapun yang biasa digunakan diantaranya adalah :

a. mysql_connect()

Fungsi mysql_connect adalah untuk menghubungkan PHP dengan database

Format fungsinya adalah:

mysql_connect (string hostname, string username, string password);

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)

c. mysql_query

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

Format fungsinya adalah:

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

d. mysql_num_rows

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

int mysql_num_rows(int result);

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.6MySQL

2.6.1Sejarah MySQL

Pada awalnya, para pencipta MySQL mencoba suatu database server yaitu mSQL (mini Structure Query Language) untuk menghubungkan tabel-tabel dengan menggunakan fast-low level ( ISAM ) routine mereka sendiri. Setelah beberapa test yang mereka lakukan, mereka berkesimpulan bahwa mSQL tidak begitu cepat dan tidak begitu fleksibel bagi kebutuhan mereka. Hal ini membuat mereka untuk dapat membuat suatu interface SQL baru yang sesuai dengan kebutuhan mereka dengan cara menambahkan atau memodifikasi dari mSQL dan mereka namakan MySQL. Adapun alasan mereka menambahkan kata ‘My’ pada MySQL sebenarnya masih sebuah misteri bagi mereka sendiri tapi hampir semua libraries dan tools pada direktori

mereka memiliki awalan ‘My’. Juga nama adiknya ‘Monty’ (salah satu pencipta MySQL) diberi nama ‘My’.

2.6.2 Pengertian MySQL

a) MySQL adalah sebuah sistem manajemen database. Database adalah sekumpulan

data yang terstruktur. Data-data itu dapat suatu daftar belanja yang sangat sederhana sampai ke galeri lukisan atau banyaknya jumlah informasi pada jaringan perusahaan. Untuk menambah, mengakses dan memproses data yang tersimpan pada database komputer, kita membutuhkan manajemen database seperti MySQL.

b) MySQL adalah sebuah sistem manajemen database yang saling berhubungan.

Sebuah hubungan database dari data yang tersimpan pada tabel yang terpisah daripada menyimpan semua data pada ruang yang sangat besar. Hal ini menambah kecepatan dan fleksibilitas. Table-tabel tersebut dihubungkan oleh hubungan yang

sudah didefinisikan mengakibatkan akan memungkinkan untuk

mengkombinasikan data dari beberapa tabel sesuai dengan keperluan.

c) MySQL adalah ‘Open Source Software’. ‘Open Source’ maksudnya program

tersebut memungkinkan untuk dipakai dan dimodifikasi oleh siapa saja. Semua orang bisa mendownload MySQL dari Internet dan memakainya tanpa membayar sepeser pun. Seseorang dapat mempelajari ‘Source Code‘ dan dapat mengubahnya sesuai dengan kebutuhan mereka. MySQL menggunakan GPL (GNU General

2.6.3Kelebihan–Kelebihan MySQL

Selain karena Open Source program, MySQL juga memiliki kelebihan-kelebihan yang tak kalah bagusnya dengan Database Server lainnya, seperti SQL server, Sybase bahkan Oracle. Kelebihan-kelebihan itu antara lain :

a) Dapat bekerja di beberapa platform yang berbeda, seperti LINUX, Windows,

MacOS dan lain lain.

b) Dapat dikoneksikan pada bahasa C, C++, Java, Perl, PHP dan Python.

c) Memiliki lebih banyak type data seperti : signed/unsigned integer yang memiliki

panjang data sebesar 1,2,3,4 dan 8 byte, FLOAT, DOUBLE, CHAR, VARCHAR, TEXT, BLOB, DATE, TIME, DATETIME, TIMESTAMP, YEAR, SET dan tipe ENUM.

d) Mendukung penuh terhadap kalimat SQL GROUP BY dan ORDER BY.

Mendukung terhadap fungsi penuh ( COUNT ( ),COUNT (DISTINCT), AVG ( ), STD ( ), SUM ( ), MAX ( ) AND MIN ( ) ).

e) Mendukung terhadap LEFT OUTHER JOIN dengan ANSI SQL dan sintak

ODBC.

f) Mendukung ODBC for Windows 95 (dengan source program). Semua fungsi

ODBC 2.5 dan sebagainya. Sebagai contoh kita dapat menggunakan Access untuk connect ke MySQL server.

g) Menggunakn GNU automake, autoconf, dan LIBTOOL untuk portabilitas.

h) Kita dapat menggabungkan beberapa tabel dari database yang berbeda dalam

i) Ditulis dengan menggunakan bahasa C dan C++. Diuji oleh compiler yang sangat jauh berbeda.

j) Privilege (hak) dan password sangat fleksibel dan aman serta mengujinkan

‘Host-Based’ Verifikasi.

2.7Macromedia Dreamweaver 8

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

Dreamweaver merupakan editor HTML yang professional untuk mendesain,

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

Design) dan dengan tampilan keduanya (Mode Split). Dreamweaver juga

menyediakan alat-alat bantu untuk mengembangkan kreativitas pembuatan web.

Macromedia Dreamweaver 8 mendukung program Script Side yang terkenal, yaitu Java Scipt, seperti Personal Home Page (PHP), Active Server Page (ASP), ASP.NET, ColdFusion dan Java Server Page (JSP). Fasilitas terbaru dari Macromedia Dreamweaver 8 adalah Zoom Tool and Guides, Panel CSS yang terbaru, Code Collapse, Coding Toolbar dan Insert Flash Video.

2.8Macromedia Fireworks 8

Seiring dengan pesatnya perkembangan teknologi informasi dan dunia internet, berkembang pula software aplikasi desain grafis yang nantinya banyak digunakan untuk mendesain web. Untuk membangun web – setelah membuat desain – dibutuhkan program aplikasi lain yang menyediakan tool-tool web grafik, seperti button, menu, slice, hotspot dan animasi untuk mempercantik suatu halaman web.

Macromedia Fireworks dapat mengerjakan kedua hal tersebut sekaligus, karena Fireworks bukan hanya sebuah software aplikasi untuk mendesain web, tetapi juga menyediakan tools pembangun sebuah web. Selain itu kita juga dapat mengedit kode HTML (Hypertext Markup Language) yang secara otomatis terbangun ketika sebuah web dibangun.

Halaman yang berbasis web biasanya menggunakan HTML untuk membangunnya. Terdapat beberapa aplikasi yang khusus menyediakan fasilitas pembangun web yang berbasis WYSWYG (What You See is What You Get), seperti Macromedia Dreamweaver, Adobe GoLive, Microsoft FrontPage, atau Adobe PageMill.

PROFIL MAN 2 MODEL MEDAN

3.1Sejarah Singkat MAN 2 Model Medan

Madrasah Aliyah Negeri 2 Model Medan (selanjutnya disingkat MAN 2 Model) Medan secara historis merupakan konversi dari Pendidikan Guru Agama Negeri (PGAN) 6 tahun Medan. PGAN 6 tahun ini didirikan tahun 1956 oleh H. Bustami Ibrahim yang pada saat itu sebagai Inspektur Pendidikan di Kantor Wilayah Departemen Agama Provinsi Sumatera Utara. Untuk pertama kali Direktur PGAN Medan pertama kali dijabat oleh H. Bustami Ibrahim sendiri. Kemudian secara berturut-turut penggantinya adalah H. Abdul Malik Syafi'i, Nazaruddin Yasin dan terakhir adalah Drs. Miskun. AR.

Ketika terjadi perubahan tuntutan kebutuhan terhadap kualitas guru mata pelajaran Pendidikan Agama Islam dengan mensyaratkan lulusan Diploma II, maka PGAN 6 tahun Medan dilikuidasi oleh pemerintah menjadi MAN 2 Medan sejak tahun 1992. Dalam perjalanannya, madrasah ini berturut-turut telah dipimpin oleh lima Kepala Madrasah, yaitu:

(1) Drs.Musa (periode 1992-1999)

(4) Drs. Syaiful Syah (periode 2003-2005)

(5) H. Ali Masran Daulay, S.Pd. MA (periode 2005-sekarang)

Pada tahun 1998 MAN 2 Medan ditetapkan oleh pemerintah sebagai salah satu Madrasah Aliyah Model di antara 35 MAN Model di Indonesia, dengan Surat Keputusan Direktur Jenderal Kelembaga Agama Islam, Departemen Agama Nomor E.IV.PP.00.6/KEP/17.A/98 tahun 1998 tentang pedoman Madrasah Aliyah Model.

Secara umum tujuan berdiri MAN 2 Medan untuk membina dan membimbing siswa-siswa beriman, bertaqwa, berakhlakul karimah, berilmu tinggi dan mampu bersaing dengan sekolah-sekolah pada umumnya.

3.2Latar Madrasah

Madrasah Aliyah Negeri 2 Model Medan beralamat di Jalan Williem Iskandar atau Pancing nomor 7 Kecamatan Medan Tembung kota Medan. Keberadaan MAN 2 Model Medan terletak pada lahan dengan keliling 13.297 m2, dengan luas bangunan 3485 m2, halaman 5000 m2, lapangan olahraga 1710 m2, taman 1805 m2 dan lain-lain 1297 m2. Lokasi MAN 2 Model Medan juga ada di Jalan Beringin IX Perumnas

Helvetia Medan yang memiliki luas 1.657 m2, dengan rincian untuk gedung 1230 m2

dan taman 427 m2 yang berbatas dengan perumahan penduduk di Perumnas Helvetia

Medan.

Adapun Visi, Misi dan Target daripada MAN 2 Model Medan adalah sebagai berikut

3.3.1Visi

MAN 2 sebagai MAN Model yang Islam, unggul, berkualitas dan populis.

3.3.2Misi

a) Meningkatkan pendidikan yang didasarkan pada pendidikan agama sebagai

pembinaan moral.

b) Menyelenggarakan program pembelajaran yang berkualitas sesuai kebutuhan

masyarakat.

c) Meningkatkan SDM (Sumber Daya Manusia) tenaga kependidikan dengan

berorientasi pendidikan bermoral.

d) Menghasilkan lulusan yang memiliki keterampilan dengan penerapan program life

skill.

3.3.3Target

a) Diterimanya lulusan MAN 2 Model Medan di perguruan tinggi yang berkualitas baik di dalam dan di luar negeri ( >80%) tiap tahun.

b) Diraihnya prestasi akademik yang baik oleh alumni MAN 2 Model Medan selama

diperlihatkan dengan perilaku: ikhlas, sederhana, mandiri, ukhuwah dan bebas berkreasi.

d) Diterimanya lulusan MAN 2 Model Medan bekerja di berbagai instansi

pemerintahan dan swasta baik dalam maupun luar negeri.

3.4Struktur Organisasi

Setiap organisasi formal memiliki struktur organisasi sebagai keharusan manajerial. Tujuan struktur organisasi dibuat adalah mempertegas pembagian tugas bidang-bidang yang ada sesuai keperluan organisasi, mengatur alur dan proses komunikasi dan koordinasi antar bidang. Eksistensi MAN 2 Model Medan sebagai sub sistem dari sistem pendidikan keagamaan yang dikelola pemerintah, dalam hal ini Departemen Agama memiliki struktur tersendiri, seperti halnya dengan MAN lainnya di Indonesia.

Gambar 3.1: Struktur Organisasi MAN 2 Model Medan

Majelis Madrasah

Kepala Madrasah

Dharma Wanita

WKM Bidang Kesiswaan WKM

Bidang Kurikulum

OSIS Koord.

Pembelajaran

MAN 2

Helvetia

WKM Bidang Sarana/ Prasarana

Ka.Unit Produksi/ Komputer

Kepala Tata Usaha

Kord. BP/BK

SISWA Guru Wali Kelas

garis koordinasi garis perintah

3.5Uraian Tugas dan Fungsi Struktur Organisasi

3.5.1Kepala Madrasah

Kepala Madrasah sebagai pimpinan puncak (top leader) di madrasah merupakan penanggung jawab umum pengaturan dan penyelenggaraan tugas/fungsi Madrasah Aliyah.

Kepala Madrasah MAN 2 Model Medan mempunyai tugas-tugas yang harus dilakukan yaitu:

a) Mengatur penyelenggaraan pendidikan dan pengajaran madrasah

b) Mengatur penyelenggaraan urusan tata usaha madrasah

c) Mengatur penyelenggaraan urusan kepegawaian

d) Mengatur penyelenggaraan urusan keuangan madrasah

e) Mengatur penyelenggaraan urusan sarana dan peralatan madrasah

f) Mengatur penyelenggaraan urusan rumah tangga madrasah

g) Mengatur penyelenggaraan urusan urusan asrama

h) Mengatur penyelenggaraan urusan laboratorium dan perpustakaan madrasah

i) Mengatur pembinaan kesiswaan

3.5.2Kepala Urusan Tata Usaha

Kepala Urusan Tata Usaha mempunyai tugas dan tanggung jawab, yaitu:

a) Bertugas dan bertanggung jawab atas berlakunya garis kebijakan Kepala Madrasah

di bidang ketatausahaan

b) Membina staf tata usaha madrasah sehingga mampu dan kreatif dalam

melaksanakan tugas masing-masing

c) Bertanggung jawab terhadap pelaksanaan administrasi madrasah

d) Membantu semua pihak madrasah dalam ketatausahaan pada khususnya dan

kelancaran fungsi madrasah pada umunya

e) Menyusun program pembinaan administrasi madrasah

3.5.3Wakil Kepala Madrasah (WKM)

3.5.3.1Wakil Kepala Madrasah Kurikulum

Adapun tugas dan tanggung jawab dari WKM Kurikulum adalah:

a) Menyusun program pembelajaran

b) Menyusun pembagian tugas guru

c) Menyusun jadwal pembelajaran

d) Menyusun penjabaran kalender pendidikan

dan administrasi guru piket

g) Menyusun kriteria dan persyaratan naik/tidak naik kelas, lulus/tidak lulus

h) Mengatur pembagian laporan pendidikan (raport)

i) Membuat laporan pelaksanaan Kepala Madrasah

3.5.3.2Wakil Kepala Madrasah Kesiswaan

Adapun tugas dan tanggung jawab dari WKM Kesiswaan adalah:

a) Menyusun program pembinaan kegiatan kesiswaan/OSIS

b) Membimbing, mengarahkan dan mengendalikan kegiatan siswa/OSIS dalam

rangka mengadakan disiplin dan tata tertib

c) Membimbing, mengarahkan dan mengendalikan proses pemilihan pengurus OSIS

d) Menyelenggarakan Latihan Kepemimpinan Dasar Madrasah

e) Mengkoordinir, membina dan mengawasi kegiatan upacara bendera, SKJ

f) Mengkoordinir, membina dan mengawasi kegiatan try out/try in

g) Memantau lulusan madrasah

h) Senantiasa berusaha meningkatkan kualitas siswa dan kegiatan siswa

i) Mengkoordinir, membina dan mengawasi kegiatan UKS, PMR, PKM, Pramuka,

kantin siswa dan kegiatan siswa lainnya

j) Membina dan mengawasi pelaksanaan 8 K (Keagamaan, Keamanan, Kebersihan,

Keindahan, Ketertiban, Kekeluargaan, Kesehatan dan Kerindangan)

k) Merencanakan, membina dan mengawasi praktik kerja siswa dan karya wisata

l) Membina karya siswa, KIR, majalah dinding dan bulletin

m) Merencanakan, membina dan mengawasi orientasi madrasah bagi siswa baru

n) Menyusun laporan bulanan pelaksanaan tugas

3.5.3.3Wakil Kepala Madrasah Sarana/Prasarana

Adapun tugas dan tanggung jawab dari WKM Kesiswaan adalah:

a) Menyusun program pengadaan, pemeliharaan dan pengamanan barang inventaris

khususnya yang berkaitan dengan KBM

b) Mendayagunakan sarana dan prasarana KBM (termasuk kartu-kartu pelaksanaan

pendidikan)

c) Menjaga stabilitas dan kesejahteraan guru dan karyawan

d) Merencanakan kegiatan pendayagunaan sarana dan prasarana madrasah secara

optimal

e) Merencanakan kegiatan teknik pemeliharaan sarana dan prasarana madrasah

f) Melaksanakan tugas temporer Kepala Madrasah

g) Mencatat dan menginventariskan tropy piala dan piagam yang diperoleh

madrasah/siswa

a) Mengkoordinir guru yang mengajar di masing-masing kelas

b) Mengawasi kegiatan pembelajaran siswa

c) Mengawasi kebersihan pekarangan madrasah

d) Mengawasi dan keamanan siswa madrasah

e) Membuat rencana, mengatur dan mengawasi kegiatan PSBB

f) Mengawasi disiplin belajar siswa

3.5.5Koordinator BP/BK

a) Menyusun dan melaksanakan program bimbingan dan penyuluhan yang meliputi

waktu kegiatan, metoda bimbingan, peralatan dan biaya, teknik pengelolaan data hasil bimbingan dan penyuluhan, petugas yang akan memberikan BP.

b) Menyusun dan melaksanakan koordinasi dengan wali kelas, seksi kesiswaan, seksi

pengajaran dan pendidikan, BP3/orangtua/wali kelas

c) Menyusun dan melaksanakan program kerjasama dengan Dinas penyuluhan

tenaga kerja dan Departemen Trankopnaker, klinik psikologi, seksi Binapta pada Komdak/Kanwil, mengadakan evaluasi pelaksanaan BP, menyusun statistik hasil BP, melengkapi dan menertibkan administrasi ketatausahaan BP, membuat laporan kepada Kepala Madrasah secara periodik

3.5.6Wali Kelas

a) Sebagai administrator kelas, dengan menyelenggarakan kegiatan mengelola

administrasi kelas, mengelola personil kelas, mengelola administrasi keuangan kelas/membantu pelaksanaan pembayaran SPP/BP3, mengelola administrasi peribadatan kelas, mengelola administrasi olah raga siswa, mengelola administrasi

kesenian, mengelola administrasi PMR/UKS, mengelola administrasi

pengembangan ilmu pengetahuan, melaksanakan fungsi-fungsi administrasi di

kelas binaannya, melaksanakan kepemimpinan kelas dan menjalin

hubungan/koordinasi dengan warga madrasah

b) Sebagai supervisor dan Guru Pembina, bertugas mengadakan supervise di kelas binaannya dalam bidang kegiatan belajar mengajar, kegiatan bimbingan penyuluhan, kegiatan ko kurikuler, kegiatan ekstrakurikuler

3.5.7Kepala Unit Produksi/Komputer

a) Menyusun rencana kegiatan unit produksi setiap semester

b) Mengkoordinir guru/insruktur dalam pembelajaran Teknologi Informasi dan

Komunikasi (TIK)

c) Membagi pengelompokan siswa dalam setiap pembelajaran TIK dan internet

d) Mengawasi pelaksanaan pembelajaran TIK dan internet

e) Mengawasi perawatan, kebersihan dan keamanan komputer dan peralatan

keterampilan tata busana dan elektronik

g) Membuat laporan keadaan barang dan peralatan praktik keterampilan tatabusana

dan elektronik.

h) Membuat laporan keuangan pengelolaan unit produksi

3.5.8Majelis Madrasah

a) Berkoordinasi dengan Kepala Madrasah dalam masalah RAPBM

b) Memeriksa Program Kerja Kepala Madrasah

BAB 4

PERANCANGAN SISTEM

4.1 Perencanaan dan Perancangan

Membuat suatu situs memerlukan persiapan, perencanaan yang baik, tujuan yang jelas dan percobaan yang berulang-ulang karena menyangkut semua elemen yang membentuk situs. Maka terlebih dahulu harus dipikirkan bagaimana bentuk tampilannya agar kelihatan lebih menarik, dan link-link apa saja yang akan dirancang serta informasi apa saja yang akan disajikan dalam sebuah website. Dalam perancangan website ini lebih ditujukan pada informasi yang berhubungan tentang sekolah MAN 2 Model Medan.

Sebelum membangun situs, perlu dilakukan identifikasi awal antara lain:

a. Situs yang akan dibuat adalah situs lembaga pendidikan, dalam hal ini adalah MAN 2 Model Medan, yang menyediakan informasi-informasi mengenai sekolah tersebut.

b. Pengunjungnya adalah dari pihak sekolah sendiri dan masyarakat awam yang

mengetahui informasi mengenai sekolah tersebut, mengisi buku tamu dan membuat pesan dan kesan terhadap organisasi tersebut.

d. Target yang akan dicapai dari situs tersebut adalah pengunjung mendapatkan

informasi tentang MAN 2 Model Medan.

4.2Mempersiapkan Database Server

Database dapat diumpamakan sebagai sebuah tempat penyimpanan data yang terstruktur agar dapat diakses dengan cepat dan mudah. Database terdiri atas tabel-tabel yang dibuat dengan menggunakan program MySQL. Pada tahap ini dipersiapkan tempat untuk menampung data di server, data tersebut nanti akan diproses oleh program yang kita buat pada tahap pemrograman, baik penambahan, pengeditan, penghapusan dan menampilkan isi database ke halaman web.

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

a. Tabel admin terdiri dari:

Field Jenis

Username Varchar(50)

Password Varchar(6)

Nama Varchar(50) Tempat Lahir Varchar(15)

Tgl Lahir Text

Alamat Long Text

Telepon Text

Email Varchar(30)

Tabel 4.1 Tabel admin

b. Tabel berita terdiri dari:

Field Jenis

No_berita Int(10)

Judul Varchar(100)

Penulis Varchar(100)

Tanggal Varchar(50)

Jam Varchar(50)

Kategori Varchar(100)

Isi_berita Text

Gambar Varchar(100)

Field Jenis

Nama varchar(30)

Tanggal varchar(30)

Jam varchar(8)

Alamat varchar(70)

Email varchar(30)

Telepon char(30)

Pesan varchar(1000)

Tabel 4.3 Tabel Buku Tamu

d. Tabel guru terdiri dari:

Field Jenis

Id Guru Int(5)

Nama Guru Varchar(100)

NIP Varchar(15)

Tmpt Tgl Lahir Varchar(50)

Alamat Varchar(50)

Telepon Varchar(30)

Jabatan Varchar(20)

Golongan Varchar(10)

Bidang Varchar(50)

Tabel 4.4 Tabel Guru

e. Tabel siswa terdiri dari:

Field Jenis

Nama Siswa Varchar(100)

NIS Varchar(10)

Jenis Kelamin Varchar(10)

Alamat Varchar(100)

Status Varchar(10)

Asal Varchar(30)

TTL Varchar(20)

Kelas Varchar(12)

Tabel 4.5 Tabel Siswa

f. Tabel alumni terdiri dari:

Field Jenis

No Int(5)

Alamat Varchar(100)

Telepon Varchar(30)

Handphone Varchar(30)

Tahun Tamat Varchar(15)

Pekerjaan Varchar(50)

Tabel 4.6 Tabel Alumni

g. Tabel prestasi terdiri dari:

Field Jenis

Kategori Varchar(60)

Perlombaan Varchar(1500)

Tingkat Varchar(60)

Tahun Varchar(4)

Tabel 4.7 Tabel Prestasi

h. Tabel ekstra terdiri dari:

Field Jenis

No Int(10)

Organisasi

Jenis Kegiatan Varchar(200)

Tabel 4.8 Tabel Ekstra

4.3Membangun Halaman Situs

Adapun halaman-halaman yang dibangun oleh penulis adalah:

a. Halaman index.php, merupakan halaman utama yang akan diakses pertama kali

situs dibuka. Halaman ini berisikan berita dan artikel secara singkat dan link-link menuju halaman berikutnya.

b. Halaman profil, merupakan halaman yang memberikan informasi tentang sejarah,

visi,misi dan target sekolah, struktur organisasi dan moto dan nilai dari MAN 2 Model Medan.

c. Halaman guru, merupakan halaman yang memberikan informasi tentang data guru

di MAN 2 Model Medan.

d. Halaman siswa, merupakan halaman yang memberikan informasi tentang data

siswa dan prestasi yang diraih oleh siswa/siswi MAN 2 Model Medan.

e. Halaman berita.php, merupakan halaman yang memberikan informasi berita

f. Halaman artikel.php, merupakan halaman yang memberikan informasi artikel mengenai kesehatan.

g. Halaman bukutamu.php, merupakan halaman yang mengizinkan pengunjung

untuk mengisikan buku tamu sehingga diketahui siapa saja yang mengunjungi situs.

h. Halaman kontak.php, merupakan halaman yang mengizinkan pengunjung untuk

memberikan saran, kritik atau pertanyaan ke MAN 2 Model Medan.

i. Halaman admin.php, merupakan halaman yang khusus diakses oleh admin untuk

melakukan pengaturan seperti membuat, menghapus atau mengubah berita, artikel dan anggota.

Tahap-tahap yang dilakukan penulis dalam membangun halaman situs adalah sebagai berikut:

1. Membuka software Macromedia Dreamweaver 8 sebagai software pengatur letak

layout dan penulisan skrip-skrip PHP dalam membangun halaman. Tampilannya

Gambar 4.1 Tampilan Macromedia Dreamweaver 8

2. Mengatur letak layout dengan memanfaatkan tool dan perintah yang terdapat pada

Macromedia Dreamweaver yaitu dengan meletakkan link-link dan modul-modul

lainnya di tempat yang telah ditentukan.

3. Menulis dan meletakkan skrip-skrip PHP dan HTML yang diperlukan pada tempat

yang sesuai yang dikerjakan di jendela Code pada Macromedia Dreamweaver.

4. Menulis skrip CSS untuk memperindah tampilan situs dan skrip javascript untuk melakukan peringatan (alert) pada pengisian form.

Flowchart merupakan gambaran yang menampilkan struktur, hierarki dan isi halaman

per halaman, biasanya berbentuk pohon yang bercabang-cabang. Dengan adanya

flowchart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman

dan link atau navigasi antara halaman-halaman tersebut. Di samping itu, juga dapat mempermudah dalam mengatur kode dan file HTML-nya, terutama link untuk navigasi penjelajahan ke seluruh halaman web. Secara sederhana flowchart dalam membangun situs ini dapat dilihat pada gambar di bawah ini:

Gambar 4.2 Flowchart rancangan aplikasi web (situs)

Pada gambar 4.2 , flowchartnya masih sangatlah sederhana karena di setiap cabang flowchart masih terdapat cabang-cabang lagi bergantung pada seberapa kompleks dan seberapa banyak halaman yang akan dibuat. Misalnya pada bagian

Login Index

Profil Guru Siswa Alum ni

Fasil itas

Buku Tamu

Gale ri

Arti kel

Beri ta

’Login’ dibagi lagi ke ’Halaman Admin’ dan ’Halaman User’, maka harus dibuat dua cabang lagi. Lihat Gambar 4.3

Gambar 4.3 Percabangan Dalam Suatu Flowchart

Di dalam website MAN 2 Model Medan terdapat alur-alur aktivitas yang dapat kita gambarkan dalam bentuk flowchart. Dibawah ini adalah bentuk-bentuk flowchart yang didapat dari website MAN 2 Model Medan.

a. Flowchart Menu Utama

Seorang pengunjung dapat mengakses website MAN 2 Model Medan dan dapat berpindah halaman web menuju halaman lain. Terdiri dari 5 halaman utama yakni halaman profil, guru, siswa, alumni dan buku tamu. Masing–masing halaman utama memiliki link-link yang dapat dipilih oleh pengunjung kecuali halaman buku tamu. Flowchart Menu Utama dapat dilihat pada gambar dibawah ini:

Login

Halaman Admin

Pilih link yang ada

Pilih link yang ada

Pilih link yang ada

A

B

C

Pilih link yang ada D

Form Buku Tamu E

Gambar 4.4 Alur Flowchart Menu Utama

b. Flowchart Administrator

Halaman administrator hanya diakses oleh seorang yang berhak mengaksesnya. Data login dan password dari seorang administrator harus sesuai dengan data yang ada pada

A

! " "

" # $ %

" " & " "

! " "

'

A

tabel administrator. Jika data login dan password sesuai, maka admin diantarkan menuju tampilan halaman administrator, jika proses login gagal, maka kembali lagi ke halaman form administrator. Dapat kita lihat Gambar adalah flowchart administrator.

Gambar 4.5 Alur Flowchart Administrator

c. Flowchart User (Siswa)

Halaman administrator hanya diakses oleh seorang yang berhak mengaksesnya. Data login dan password dari seorang administrator harus sesuai dengan data yang ada pada

A

! '

" # $ %

" " &

' ( )

! ' ( )

'

A

menuju tampilan halaman administrator, jika proses login gagal, maka kembali lagi ke halaman form administrator. Dapat kita lihat Gambar adalah flowchart administrator.

Gambar 4.6 Alur Flowchart User

Algoritma adalah urutan langkah-langkah berhingga untuk memecahkan masalah logika atau matematika. Adapun algoritma yang akan dibahas antara lain yaitu:

Algoritma Homepage

Berfungsi menampilkan tampilan utama website MAN 2 Model Medan, dengan menu pilihan antara lain : Profil, Guru, Siswa, Alumni, Buku Tamu, Galeri, Artikel, Berita, Link, Contact Us.

1. Algoritma Profil

Langkah 1 : Jika Klik sub menu Sejarah maka akan tampil halaman sejarah dari sekolah.

Langkah 2 : Jika Klik sub menu Visi Misi & Target maka akan tampil halaman visi, misi dan target sekolah.

Langkah 3: Jika Klik sub menu Struktur Organisasi maka akan tampil halaman struktur organisasi.

Langkah 3 : Jika Klik sub menu Moto & Nilai maka akan tampil halaman moto dan nilai.

2. Algoritma Berita

Langkah 1 : Klik menu Berita

Langkah 2 : Maka akan menampilkan beberapa judul berita terbaru. Langkah 3 : Klik salah satu judul yang sesuai.

Langkah 4 : Menampilkan keseluruhan isi berita.

jika data selesai diinput maka klik tombol kirim untuk melakukan penyimpanan data, sedangkan untuk membatalkan klik tombol reset.

Langkah 2 : Jika Klik sub menu Lihat Bukutamu maka akan terlihat data yang sudah tersimpan.

4. Algoritma Guru

Langkah 1 : Jika Klik sub menu Data Guru maka akan tampil halaman data guru. Langkah 2 : Jika ingin kembali ke halaman awal maka pilih menu home.

5. Algoritma Siswa

Langkah 1 : Jika Klik sub menu Data Siswa maka akan tampil halaman data siswa. Langkah 2 : Jika Klik sub menu Prestasi Siswa maka akan tampil halaman prestasi

siswa.

6. Algoritma Alumni

Langkah 1 : Jika Klik sub menu Data Alumni maka akan tampil halaman data alumni. Langkah2 : Jika Klik sub menu Registrasi Alumni maka akan tampil halaman

registrasi siswa.

Langkah3 : Jika ingin mendaftar maka pilih menu daftar alumni. Kemudian isi biodata alumni, kemudian klik tombol daftar maka data akan disimpan. Jika ingin batal klik tombol reset.

Langkah 1 : Klik menu Ekstrakurikuler.

Langkah 2 : Maka akan menampilkan halaman yang berisi tentang ekstrakurikuler di MAN 2 Model Medan.

8. Algoritma Galeri

Langkah 1 : Klik menu Galeri

Langkah 2 : Maka akan menampilkan halaman galeri.

9. Algoritma Artikel

Langkah 1 : Klik menu Artikel

Langkah 2 : Maka akan menampilkan halaman artikel.

10.Algoritma Link

Langkah 1 : Klik menu Link

Langkah 2 : Maka akan menampilkan link-link situs yang dapat dikunjungi.

11.Algoritma Kontak

Langkah 1 : Klik menu Contact Us

BAB 5

IMPLEMENTASI SISTEM

5.1Pengertian Implementasi Sistem

Implementasi sistem adalah langkah-langkah atau prosedur-prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk menguji, menginstall dan memulai sistem baru atau sistem yang diperbaiki untuk menggantikan sistem yang lama.

Adapun langkah-langkah yang yang dibutuhkan dalam implementasi sistem adalah:

1. Mendapatkan software dan hardware yang tepat serta sesuai untuk merancang

website.

2. Menyelesaikan rancangan sistem.

3. Menulis, menguji, mengontrol dan mendokumentasikan website.

5.2Tujuan 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 pemkai.

4. Memastikan bahwa konversi ke sistem baru berjalan yaitu dengan membuat

rencana, mengontrol dan melakukan instalasi baru secara benar.

5.3Komponen Dalam Implementasi Sistem

Agar sistem perancangan yang telah kita kerjakan dapat berjalan baik atau tidak, maka perlu kiranya dilakukan pengujian terhadap sistem yang telah kita kerjakan. Untuk itu dibutuhkan beberapa komponen utama mencakup perangkat keras (hardware), perangkat lunak (software), dan perangkat operator (brainware). Pada Website MAN 2 Model Medan ini dibutuhkan komponen-komponen yang mencakup seperti yang diatas.

5.3.1Hardware

Hardware adalah suatu komponen yang sangat dibutuhkan dalam mewujudkan sistem yang diusulkan. Dalam hal ini penulis merinci spesifikasi komponen hardware yaitu:

} else{ ?>

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>::: Situs MAN 2 Model Medan :::</title>

<link href="../linkUtama.css" rel="stylesheet" type="text/css"> <script language="JavaScript">

function mmLoadMenus() {

if (window.mm_menu_0417001309_0) return;

window.mm_menu_0417001309_0 = new

Menu("root",150,18,"",12,"#184500","#FFFF00","#B5E300","#427100","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

mm_menu_0417001309_0.addMenuItem("Sejarah","location='sejarah.php'");

mm_menu_0417001309_0.addMenuItem("Visi,&nbsp;Misi&nbsp;dan&nbsp;Target","location='visi_ misi_target.php'");

mm_menu_0417001309_0.addMenuItem("Struktur&nbsp;Organisasi","location='struktur.php'");

mm_menu_0417001309_0.addMenuItem("Moto&nbsp;dan&nbsp;Nilai&nbsp;","location='moto_nilai. php'");

mm_menu_0417001309_0.fontWeight="bold"; mm_menu_0417001309_0.hideOnMouseOut=true; mm_menu_0417001309_0.bgColor='#555555'; mm_menu_0417001309_0.menuBorder=1;

mm_menu_0417001309_0.menuLiteBgColor='#FFFFFF'; mm_menu_0417001309_0.menuBorderBgColor='#000000';

window.mm_menu_0417002140_0 = new

Menu("root",87,18,"",12,"#184500","#FFFF00","#B5E300","#427100","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

mm_menu_0417002140_0.addMenuItem("Data&nbsp;Guru","location='data_guru.php'"); mm_menu_0417002140_0.fontWeight="bold";

mm_menu_0417002140_0.hideOnMouseOut=true; mm_menu_0417002140_0.bgColor='#555555'; mm_menu_0417002140_0.menuBorder=1;

mm_menu_0417002140_0.menuLiteBgColor='#FFFFFF'; mm_menu_0417002140_0.menuBorderBgColor='#000000';

window.mm_menu_0417010246_0 = new

Menu("root",111,18,"",12,"#184500","#FFFF00","#B5E300","#427100","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

mm_menu_0417010246_0.addMenuItem("Data&nbsp;Siswa","location='data_siswa.php'"); mm_menu_0417010246_0.addMenuItem("Prestasi&nbsp;Siswa","location='prestasi.php'"); mm_menu_0417010246_0.fontWeight="bold";

mm_menu_0417010246_0.hideOnMouseOut=true; mm_menu_0417010246_0.bgColor='#555555'; mm_menu_0417010246_0.menuBorder=1;

mm_menu_0417010246_0.menuLiteBgColor='#FFFFFF'; mm_menu_0417010246_0.menuBorderBgColor='#000000';

window.mm_menu_0417011147_0 = new

Menu("root",105,18,"",12,"#184500","#FFFF00","#B5E300","#427100","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

mm_menu_0417011147_0.addMenuItem("Kelas&nbsp;X","location='kelas.php'"); mm_menu_0417011147_0.addMenuItem("Program&nbsp;IPA","location='ipa.php'"); mm_menu_0417011147_0.addMenuItem("Program&nbsp;IPS","location='ips.php'"); mm_menu_0417011147_0.addMenuItem("Program&nbsp;IPB","location='ipb.php'"); mm_menu_0417011147_0.addMenuItem("Program&nbsp;AI","location='ai.php'"); mm_menu_0417011147_0.fontWeight="bold";

mm_menu_0417011147_0.bgColor='#555555'; mm_menu_0417011147_0.menuBorder=1;

mm_menu_0417011147_0.menuLiteBgColor='#FFFFFF'; mm_menu_0417011147_0.menuBorderBgColor='#000000';

window.mm_menu_0425180733_0 = new Menu("root",105,18,"",12,"#184500","#FFFF00","#B5E300","#427100","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);

mm_menu_0425180733_0.addMenuItem("Kelas&nbsp;X","location='kelas.php'"); mm_menu_0425180733_0.addMenuItem("Program&nbsp;IPA","location='ipa.php'"); mm_menu_0425180733_0.addMenuItem("Program&nbsp;IPS","location='ips.php'"); mm_menu_0425180733_0.addMenuItem("Program&nbsp;IPB","location='ipb.php'"); mm_menu_0425180733_0.addMenuItem("Program&nbsp;AI","location='ai.php'"); mm_menu_0425180733_0.fontWeight="bold";

mm_menu_0425180733_0.hideOnMouseOut=true; mm_menu_0425180733_0.bgColor='#555555'; mm_menu_0425180733_0.menuBorder=1;

mm_menu_0425180733_0.menuLiteBgColor='#FFFFFF'; mm_menu_0425180733_0.menuBorderBgColor='#000000'; mm_menu_0425180733_0.writeMenus();

} // mmLoadMenus() //-->

</script>

<script language="JavaScript" src="mm_menu.js"></script> <style type="text/css">

<!--

.style1 {font-size: 14px} .style4 {

font-family: "Times New Roman", Times, serif; color: #0000FF;

font-size: 14; }

.style13 {color: #00FF00} -->

</style> </head>

<body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <script language="JavaScript1.2">mmLoadMenus();</script>

<table width="800" height="800" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">

<!--DWLayoutTable--> <tr>

<td height="200" colspan="7" valign="top"><img src="../images/header.png" width="800" height="200"></td>

</tr> <tr>

<td width="73" height="1"></td> <td width="78"></td>

<td width="73"></td> <td width="101"></td> <td width="80"></td> <td width="321"></td> <td width="74"></td> </tr>

<tr>

<td width="73" height="20" align="center" valign="middle" bgcolor="#CCFFCC"><div align="center"><a href="siswa.php">HOME</a></div></td>

<td width="78" align="center" valign="middle" bgcolor="#CCFFCC"><div align="center"><a href="editsiswa.php">SISWA</a></div></td>

<td width="73" align="center" valign="middle" bgcolor="#CCFFCC"><div align="center"><a href="editberita.php">BERITA</a></div></td>

<td width="101" align="center" valign="middle" bgcolor="#CCFFCC"><div align="center"><a href="editbuku_tamu.php">BUKU TAMU</a> </div></td>

<td width="80" align="center" valign="middle" bgcolor="#CCFFCC"><div align="center"><a href="logout.php">LOGOUT</a></div></td>

<td colspan="2" valign="top" bgcolor="#CCFFCC"><!--DWLayoutEmptyCell-->&nbsp;</td> </tr>

<tr>

<td height="29" valign="top" bgcolor="#FFFFFF"><!--DWLayoutEmptyCell-->&nbsp;</td> <td colspan="5" align="center" valign="middle" bgcolor="#FFFFFF"><strong>

<marquee behavior="alternate" class="style13">

<span class="style1"> ::.. Selamat Datang di Halaman User <?php echo $_SESSION['id'];?> ..:: </span>

</marquee> </strong></td>

<td align="center" valign="middle" bgcolor="#FFFFFF"> <div align="center"><span class="style1"></span>

<script language="JavaScript" type="text/javascript"> <!--

<?php include “jam.php” ?>

&nbsp;</div></td> </tr>

<tr>

<td height="600" colspan="7" valign="top" bgcolor="#FFFFFF"><p align="center"><br> </p>

<form name="form1" method="post" action=""> <p align="center">

<?php include “tanggal.php” ?> </form>

<p align="center">&nbsp;</p>

<p align="center">WELCOME USER </p> <p align="center">IN</p>

<p align="center">WEBSITE OF MAN 2 MODEL MEDAN </p> <p align="center"><a href="logout.php">Logout</a><br> </p></td>

</tr> <tr>

<td height="20" colspan="7" align="center" valign="middle" bgcolor="#FFCC33"><div align="center">Copyright &copy; 2008 MAN 2 Model Medan All Rights Reserved. </div></td> </tr>

<tr>

<td height="5"></td> <td></td>

<td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <?php } ?> </body>

</html>

jam.php

// JAM

var clockid=new Array() var clockidoutside=new Array() var i_clock=-1

var thistime= new Date() var hours=thistime.getHours() var minutes=thistime.getMinutes() var seconds=thistime.getSeconds() if (eval(hours) <10) {hours="0"+hours} if (eval(minutes) < 10) {minutes="0"+minutes} if (eval(seconds) < 10) {seconds="0"+seconds} var thistime = hours+":"+minutes+":"+seconds function writeclock() {

i_clock++

if (document.all || document.getElementById || document.layers) { clockid[i_clock]="clock"+i_clock

document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")

} }

function clockon() {

thistime= new Date() hours=thistime.getHours() minutes=thistime.getMinutes() seconds=thistime.getSeconds()

if (eval(hours) <10) {hours="0"+hours} if (eval(minutes) < 10) {minutes="0"+minutes} if (eval(seconds) < 10) {seconds="0"+seconds} thistime = hours+":"+minutes+":"+seconds if (document.all) {

for (i=0;i<=clockid.length-1;i++) { var thisclock=eval(clockid[i]) thisclock.innerHTML=thistime }

}

if (document.getElementById) {

for (i=0;i<=clockid.length-1;i++) {

document.getElementById(clockid[i]).innerHTML=thistime }

}

var timer=setTimeout("clockon()",1000) }

window.onload=clockon //-->

</script>

<script language="JavaScript" type="text/javascript"> writeclock()

</script>

tanggal.php

<SCRIPT language=JavaScript> var fixd;

function isGregLeapYear(year) {

return year%4 == 0 && year%100 != 0 || year%400 == 0; }

function gregToFixed(year, month, day) {

var a = Math.floor((year - 1) / 4); var b = Math.floor((year - 1) / 100); var c = Math.floor((year - 1) / 400);

var d = Math.floor((367 * month - 362) / 12); if (month <= 2)

e = 0;

else if (month > 2 && isGregLeapYear(year)) e = -1;

else e = -2;

return 1 - 1 + 365 * (year - 1) + a - b + c + d + e + day; }

function Hijri(year, month, day) {

this.year = year; this.month = month; this.day = day;

this.toFixed = hijriToFixed; this.toString = hijriToString; }

function hijriToFixed() {

return this.day + Math.ceil(29.5 * (this.month - 1)) + (this.year - 1) * 354 + Math.floor((3 + 11 * this.year) / 30) + 227015 - 1;

}

function hijriToString() {

var months = new Array("Muharam","Safar","Rabi\'ul Awal","Rabi\'ul Akhir","Jamadil Awal","Jamadil Akhir","Rejab","Sya\'ban","Ramadan","Syawal","Dzulka\'edah","Dzulhijjah"); return this.day + " " + months[this.month - 1]+ " " + this.year;

}

function fixedToHijri(f) {

var i=new Hijri(1100, 1, 1);

var i2=new Hijri(i.year, 1, 1);

var m = Math.ceil((f - 29 - i2.toFixed()) / 29.5) + 1; i.month = Math.min(m, 12);

i2.year = i.year; i2.month = i.month; i2.day = 1;

i.day = f - i2.toFixed() + 1; return i;

}

var tod=new Date();

var weekday=new Array("Ahad","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu");

var monthname=new

Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","No vember","Desember");

var y = tod.getFullYear(); var m = tod.getMonth(); var d = tod.getDate(); var dow = tod.getDay();

document.write(weekday[dow] + ","+ " " + d + " " + monthname[m] + " " + y); m++;

fixd=gregToFixed(y, m, d); var h=new Hijri(1421, 11, 28); h = fixedToHijri(fixd);

document.write(" | " + h.toString() + " H"); </SCRIPT>