SISTEM INFORMASI PORTAL AKADEMIK PADA SMA SWASTA ERIA MEDAN TUGAS AKHIR RIDZAL ARIF

Transkripsi

1 SISTEM INFORMASI PORTAL AKADEMIK PADA SMA SWASTA ERIA MEDAN TUGAS AKHIR RIDZAL ARIF DEPARTEMEN MATEMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA MEDAN 2009

2 SISTEM INFORMASI PORTAL AKADEMIK PADA SMA SWASTA ERIA MEDAN TUGAS AKHIR Diajukan Sebagai Salah Satu Syarat Untuk Menyelesaikan Studi Pada Program Studi D 3 Ilmu Komputer RIDZAL ARIF DEPARTEMAEN METEMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA MEDAN 2009

3 Katakanlah : Adakah sama orang-orang yang mengetahui dengan orang-orang yang tidak mengetahui? Sesungguhnya orang yang berakallah yang dapat menerima pelajaran (Az Zumar : 9) Allah meninggikan orang yang beriman di antara kamu dan orang-orang yang diberi ilmu pengetahuan, beberapa derajat (Al Mujaadalah : 11) Tugas Akhir ini kupersembahkan bagi Ibunda ELFISNAR dan Ayahanda ASWAN RAHIM serta abang dan adikku BANG EKO dan GIA Kemuliaan bukan terletak pada kedudukan yang mulia. Kemuliaan adalah orang yang menolak kedudukan

4 PERSETUJUAN Judul : SISTEM INFORMASI PORTAL AKADEMIK PADA SMA SWASTA ERIA MEDAN Kategori : TUGAS AKHIR Nama : RIDZAL ARIF Nomor Induk Mahasiswa : Program Studi : D3 ILMU KOMPUTER Departemen : MATEMATIKA Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA Diluluskan di Medan, Mei 2009 Diketahui / Disetujui oleh Departemen Matematika FMIPA USU Ketua, Pembimbing Dr. Saib Suwilo, M.Sc Syahriol Sitorus, S.Si, M. IT NIP NIP

5 PERNYATAAN SISTEM INFORMASI PORTAL AKADEMIK PADA SMA SWASTA ERIA 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, Mei 2009 RIDZAL ARIF

6 PENGHARGAAN Bismillahirrahmanirrahim Puji dan syukur penulis panjatkan kehadirat Allah SWT, karena dengan limpah rahmat dan karunia-nya penulis berhasil menyelesaikan tugas akhir ini yang berjudul Sistem Informasi Portal Akedemik Pada SMA Swasta Eria Medan pada waktu yang telah ditetapkan. Adapun Tugas Akhir ini. Tak lupa shalawat serta salam kepada junjungan Nabi Besar Muhammad SAW dan para sahabatnya yang telah membawa kita dari kegelapan kealam terang benderang yang penuh ilmu pengetahuan. Tugas Akhir ini tidak mungkin bisa selesai dengan baik, jika tidak ada bantuan dari berbagai pihak. Pada kesempatan yang baik ini, penulis ingin mengucapkan terima kasih yang setulus-tulusnya kepada : 1. Bapak Dr. Eddy Marlianto, M.Sc selaku Dekan Fakultas MIPA Universitas Sumatera Utara. 2. Bapak Dr. Saib Suwilo, M.Sc selaku Ketua Jurusan Program Studi D-3 Ilmu Komputer. 3. Ibu Syahriol Sitorus, S.Si, M. IT, M.Sc selaku Dosen Pembimbing Tugas Akhir Program Studi D-3 Ilmu Komputer Fakultas MIPA Universitas Sumatera Utara yang telah memberikan bimbingan dan arahan selama ini kepada penulis dalam penyelesaian tugas akhir.

7 4. Seluruh Staf Pengajar Program Studi D-3 Ilmu Komputer Faklutas MIPA Universitas Sumatera Utara yang telah memberikan ilmu dan pengetahuannya kepada penulis selama masa perkuliahan. 5. Bapak Drs. H. Khoiruddin Hasibuan. selaku Kepala Sekolah SMA Swasta Eria Medan Medan yang telah memberikan kesempatan kepada penulis untuk melakukan riset sebagai data dalam pembuatan tugas akhir. 6. Seluruh guru dan pegawai SMA Swasta Eria Medan khususnya Pak As Ari yang telah banyak membantu penulis dalam mengumpulkan data dalam pembuatan tugas akhir. 7. Seluruh Keluarga besarku yang telah banyak memberikan dorongan dan doa kepada penulis selama ini. 8. Buat sahabat-sahabatku selama kuliah di Komputer Rini, Nina, Santi, Ayu, Ade, Surya, Arief, Atoy, Fikri, Eka, Naldi, walau kita terkadang ada permusuhan ataupun perdebatan, tapi itulah persahabatan yang tidak selalu berjalan dengan baik dan tidak lupa terima kasihku atas doa, nasehat, bantuan, serta curahan hati kalian semua, terutama pengertian dan kesabaran kalian selama berteman denganku. 9. Seluruh rekan-rekan jurusan Komputer, terutama angkatan Komputer B 2006 pada khusunya pada Atoy, yang telah banyak membantu dan mendukung penulis selama menjalani Pendidikan di D3 Ilmu Komputer USU. 10. Pihak-pihak yang telah banyak membantu penulis, yang tidak dapat penulis sebutkan namanya satu-persatu. Secara khusus, penulis menyampaikan rasa terima kasih yang sedalam-dalamnya dan sembah sujud penulis persembahkan kepada yang tercinta dan terkasih Ayahanda

8 Aswan Rahim dan Ibunda Elfisnar, yang telah membesarkan, mengasuh, mendidik dan membimbing penulis dengan segala pengorbanan yang tak terhitung serta kasih sayang yang tulus dan doa restunya kepada penulis sehingga dapat mengerti dan memahami kehidupan ini. Dan selalu memberikan dukungan moril maupun materil dan doa-doanya yang selalu mengiringi penulis. Ucapan terima kasih juga sampaikan kepada abangku Eko dan adikku Gia yang selalu memberikan dukungan moril dan doanya yang selalu mengiringi penulis. Akhirnya penulis berharap semoga tulisan ini dapat memperkaya khasanah ilmu pengetahuan dan bermanfaat bagi kita semua. Amin Medan, Mei 2009 Penulis Ridzal Arif

9 ABSTRAK Kajian ini bertujuan untuk membangun suatu website pada SMA Swasta Eria Medan. Website ini dikembangkan dengan mengguinakan perangkat lunak Macromedia Dreamweaver MX 2004, Apache, PHP, dan MYSQL, website ini berfungsi untuk memberikan informasi tentang SMA Swasta Eria Medan. Tujuan website ini adalah untuk mempermudah masyarakat dalam memperoleh informasi mengenai SMA Swasta Eria Medan secara online dan update.

10 DAFTAR ISI Halaman Persetujuan... ii Pernyataan... iii Penghargaan... iv Abstrak... vii Daftar Isi... viii Daftar Tabel... xi Daftar Gambar... xii Bab 1 Pendahuluan 1.1. Latar Belakang Identifikasi Masalah Ruang Lingkup Masalah Maksud dan Tujuan Metode Penelitian Sistematika Penulisan... 6 Bab 2 Tinjauan Teori 2.1. Pengertian Web Dinamis Syarat-Syarat Web Dinamis Sekilas Lahirnya Internet Teknologi Internet URL (Uniform Resource Locator) Nama Domain Browser Chatting Pengenalan HTML Pendahuluan HTML Bagian-bagian Pengenalan PHP Sejarah PHP Kelemahan dan Kelebihan PHP Penggabungan Script PHP dan HTML Pengenalan MySQL Sejarah SQL Standarisasi SQL Pemakaian Dasar SQL Pengenalan CSS Pengenlan DHTML Mengenal Macromedia Dreamweaver MX

11 Memulai Dreamweaver MX Area Kerja Pada Dreamweaver MX Menu Bar Area Kerja Bagan Alir (Flowchart) Bab 3 Sekilas SMA Swasta Eria Medan 3.1. Profil Uraian Tugas dan Fungsi Organisasi Koordinator Perguruan Eria Wakil Koordinator Perguruan Eria Kepala Sekolah Wakil Kepala Sekolah PKS I Edukatif PKS II Kesiswaan Guru Pembimbing dan Konseling Kepala Tata Usaha Wali Kelas Guru Visi dan Misi Struktur Organisasi Bab 4 Perancangan Sistem 4.1. Perancangan Sistem Data Flow Diagram Perancangan Halaman Website Bagan Alur Flowchart Mempersiapkan Database Server Normalisasi Database Kamus Data Desaign Web Mendesign Halaman Intro Website Mendesign Layout/Header Membangun Halaman Website Mendefensikan Website Penempatan Layout Situs Jendela Pernacangan Situs Halaman Situs Penggambungan Script Dengan Layout Situs Membuat Pop-Up Menu Bab 5 Implementasi Sistem 5.1. Pengertian Sistem Informasi Sistem Informasi dan Pemakaian Sistem Pengertian Implementasi Sistemq Tujuan Implementasi Instlasi Apache, PHP dan MySQL Mengkonfigurasi Apache, PHP dan MySQL Menjalankan Apache, PHP dan MySQL Pengujian Website di Browser... 94

12 5.8. Pemeliharaan Web Memperbaharui Web Bab 6 Kesimpulan dan Saran 6.1. Kesimpulan Saran DAFTAR PUSTAKA LAMPIRAN

13 DAFTAR TABEL Halaman Tabel 2.1 Simbol-Simbol Flowchart Tabel 4.1 Admin Tabel 4.2 Alumni Tabel 4.3 Daftar Tabel 4.4 Guru / Pegawai Tabel 4.5 Mengajar Tabel 4.6 Pengunjung Tabel 4.7 Sekolah Tabel 4.8 PMP Table 4.9 Event Tabel 4.10 Artikel Tabel 4.11 Nilai Tabel 4.12 Data SISWA Table 4.13 Data NILAI Table 4.14 Relasi SISWA_NILAI Table 4.15 Data GURU Tabel 4.16 Data MENGAJAR Tabel 4.17 Relasi GURU_MANGAJAR Tabel 5.1 Daftar Web Penyedia Hosting Gratisan... 97

14 DAFTAR GAMBAR Halaman Gambar 3.1 Struktur Organisasi SMA Swasta Eria Medan Gambar 4.1 Diagram Konteks Sistem Informasi Berbasis Web Gambar 4.2 Data Flow Diagram (DFD) Level 0 Sistem Informasi Berbasis Web Gambar 4.3 Data Flow Diagram (DFD) Level 1 Penginputan Gambar 4.4 Aliran Informasi rancangan situs Gmabar 4.5 Percabangan Dalam Aliran Informasi Gambar 4.6 Alur Flowchart Menu Utama Gambar 4.7 Alur Flowchart Login Siswa Gambar 4.8 Alur Flowchart Admin Gambar 4.9 Alur Flowchart Tambah Data Gambar 4.10 Alur Flowchart Ubah Data Gamabr 4.11 Alur Flowchart Hapus Data Gambar 4.12 Design Halaman Intro Website Gambar 4.13 Layout/Header Website Edit Pakai Photoshop Gambar 4.14 Tampilan Macromedia Dreamweaver MX Gambar 4.15 Window Manage site Gambar 4.16 Window Site Definition Gambar 4.17 Layout Web SMA Swasta Eria Medan Gambar 4.18 Window Tabel Gambar 4.19 Halaman Visi dan Misi Pada Situs... 78

15 Gambar 4.20 Gambar Sebagai Link Penghubung Pop-Up Menu Gambar 4.21 Window Content Show Pop-Up Menu Gambar 4.22 Window Appearance Show Pop-Up Menu Gambar 4.23 Window Advanced Show Pop-Up Menu Gambar 4.24 Window Position Show Pop-Up Menu Gambar 4.25 Tampilan Pop-Up Menu pada Jendela Browser Gambar 5.1 Uji Apache Gambar 5.2 Uji PHP Gambar 5.3 Uji MySQL Gambar 5.4 Halaman Index Website SMA Swasta Eria Medan... 95

16 BAB 1 PENDAHULUAN 1.1 Latar Belakang Teknologi di bidang komputer saat ini sangat berkembang pesat sehingga dapat meningkatkan keefisienan dan efektifitas dalam melakukan setiap pekerjaan. Komputer bukan hanya sekadar pengolah data dan gambar saja tetapi penggunaannya semakin meluas menjadi salah satu sarana komunikasi, media informasi dan edukasi. Saat ini adalah zamannya internet dimana batasan waktu dan jarak tidak berarti lagi bagi media yang satu ini. Kita dapat berkomunikasi dengan siapa saja dan dimana saja di seluruh dunia ini dengan menggunakan fasilitas maupun dengan cara chatting. Mungkin pada saat ini hampir setiap orang sudah memiliki untuk dapat bergabung di internet. Namun, bagaimana dengan yang memiliki website pribadi? Apalagi website yang merupakan hasil karya sendiri, mungkin tidak semua orang memilikinya. Padahal dengan memiliki website kita dapat mengenalkan diri kita pada semua orang yang ada di seluruh dunia, baik mengenai diri kita, perusahaan kita atau segala sesuatu yang ingin kita sampaikan. Tidak mustahil juga kita dapat memperoleh uang dengan memiliki website pribadi, asalkan kita dapat mengelolanya dengan baik.

17 Pengembangan jaringan komunikasi data antar komputer menjadikan internet muncul dengan berbagai macam aplikasi. internet dengan berbagai aplikasinya pada dasarnya adalah media yang digunakan untuk mengefesienkan proses komunikasi. Untuk dapat memaksimalkan penggunaan internet, harus dapat kita tentukan dan artikan tentang kebutuhan komunikasi dari seseorang. Salah satu aplikasinya yaitu World Wide Web (WWW). Di awal perkembangannya World Wide Web hanya digunakan untuk kalangan akademisi dan riset, namun sekarang World Wide Web digunakan untuk bisnis dan hiburan. Oleh karena itu, dengan berkembangnya kemajuan teknologi ini, SMA Swasta Eria Medan perlu mempromosikan dirinya melalui sebuah website yang online di internet. Dengan sebuah website yang online di internet, masyarakat dapat dengan mudah mengakses dan mengetahui segala sesuatu mengenai SMA Swasta Eria Medan dengan cepat tanpa memerlukan waktu yang banyak. Peranan website ini juga tidak terlepas dari penggunaan peralatan yang mampu mengatasi kelemahan-kelemahan yang mengandalkan tenaga manusia. Informasi tentang sekolah yang dapat di akses oleh semua orang melalui internet memberikan ide buat penulis untuk membuat suatu website sekolah yang bisa memberikan informasi bagi para pengunjungnya. Atas dasar pertimbangan itu, maka penulis tertarik membuat suatu website pendidikan (sekolah) dengan judul :

18 SISTEM INFORMASI PORTAL AKADEMIK PADA SMA SWASTA ERIA MEDAN. Penulis berharap semoga penulisan tugas akhir ini dapat memberikan kemudahan bagi seluruh masyarakat terutama siswa-siswi SMA Swasta Eria Medan melalui sebuah website yang online di internet dan umumnya bagi siapa saja yang ingin tahu mengenai SMA Swasta Eria Medan. 1.2 Identifikasi Masalah Kegiatan penelitian penulis lakukan di SMA Swasta Eria Medan yang berada di Jl.S.M. Raja No.48 Medan. Mengingat jumlah siswa-siswi, staf pengajar dan pegawai dan keingintahuan masyarakat yang tinggi, maka penulis mencoba mengidentifikasi permasalahan : 1. Sejauh mana website ini dapat dirancang dengan semenarik mungkin sehingga dapat memenuhi keingintahuan masyarakat mengenai SMA Swasta Eria Medan. 2. Memberikan kemudahan bagi para alumni untuk mengetahui tentang keberadaan dari semua teman temannya semasa sekolah dulu dengan menggunakan website yang telah online di internet.

19 1.3 Ruang Lingkup Masalah Adapun batasan dari tugas akhir ini adalah membahas pembuatan desain web dinamis sebagai suatu website yang memberikan informasi bagi pengguna baik kalangan masyarakat umum maupun dari pihak sekolah itu sendiri yang membutuhkan informasi tentang SMA Swasta Eria Medan. Aplikasi web ini dibangun dibawah sistem operasi Windows XP yang mencakup aplikasi Macromedia Dreamweaver MX 2004, Web Server Apache, Web Scripting PHP dan MySQL. Selain itu. aplikasi web ini juga didukung bahasa pemrograman web lainnya seperti HTML (Hypertext Markup Language), CSS (Cascading Style Sheet), dan bahasa pemrograman web lainnya. 1.4 Maksud dan Tujuan Dengan semakin berkembangnya perangkat komputer baik hardware maupun software membuat seluruh aspek kehidupan menuntut suatu manajemen yang baikdalam meningkatkan efisiensi dan efektivitas kerja. Salah satu cara penerapannya adalah dengan membuat website SMA Swasta Eria Medan. Adapun maksud dan tujuan dari penelitian ini adalah : 1. Mempromosikan dan mengenalkan SMA Swasta Eria Medan agar para orang tua mau menyekolahkan anak anak mereka disekolah ini.

20 2. Membuat homepage pendidikan SMA Swasta Eria Medan yang dapat diakses oleh siapa saja dan untuk memberikan kemudahan bagi siswanya dalam menikmati layanan yang disediakan dalam situsnya. 1.5 Metode Penelitian Adapun metodologi penelitian yang digunakan penulis dalam mengumpulkan data adalah: 1. Penelitian kepustakaan (Library Research) Disini penulis menggunakan buku-buku yang berhubungan dengan masalah sehingga dapat membantu penyelesaian masalah dalam perancangan situs yang benar, serta dalam mendukung tugas akhir ini untuk menyusun landasan teoritis. 2. Penelitian Lapangan (Field Research) Penelitian dilakukan langsung ke SMA Swasta Eria Medan untuk mendapatkan data, dimana penulis melakukan pengumpulan data dengan cara bertanya langsung kepada kepala sekolah, guru-guru dan pegawai pada sekolah tersebut. 3. Studi Literatur Mempelajari website-website yang berhubungan dengan tugas akhir mahasiswa seperti website-website sekolah, serta mempelajari bahasa-bahasa pemrograman web dengan mengunjungi website-website yang menyediakan tutorial mengenai pemrograman web.

21 1.6 Sistematika Penulisan Secara garis besar tugas akhir ini terdiri dari 6 (enam) bab dan beberapa lampiran. Adapun setiap bab terdiri dari sub-sub bab. Adapun sistematika penulisan tugas akhir ini adalah : BAB 1 : PENDAHULUAN Pada bab ini diuraikan secara ringkas pembahasan tentang Latar Belakang, Identifikasi Masalah, Ruang Lingkup Masalah, Maksud dan Tujuan, Metode Penelitian, dan Sistematika Penulisan. BAB 2 : TINJAUAN TEORI Di dalam bab ini diuraikan sekilas tentang Pengertian Web Dinamis, Pengenalan Internet, Teknologi Internet, Pengenalan HTML, PHP, MySQL, CSS, dan DHTML, serta Macromedia Dreamweaver MX BAB 3 : SEKILAS SMA SWASTA ERIA MEDAN Bab ini berisikan tentang profil SMA Swasta Eria Medan, struktur organisasi SMA Swasta Eria Medan, uraian tugas dan fungsi organisasi, serta visi dan misi SMA Swasta Eria Medan

22 BAB 4 : PERANCANGAN SISTEM Bab ini berisikan pembahasan mengenai sistem yang dirancang, dan penggunaan Macromedia Dreamweaver MX 2004 sebagai editor perancangan website. BAB 5 : IMPLEMENTASI SISTEM Pada bab ini berisikan Pengertian Implementasi Sistem, tujuan Implementasi Sistem, Spesifikasi Sistem, dan Instalasi Apache, PHP, dan MySQL. BAB 6 : KESIMPULAN DAN SARAN Di bab ini diuraikan kesimpulan dan saran dari hasil penelitian yang penulis peroleh.

23 BAB 2 TINJAUAN TEORI 2.1 Pengertian Web Dinamis Bagi orang awam yang ingin membuat website atau home page pribadi pasti pernah mendengar istilah web dinamis. Web dinamis adalah website dimana halaman yang akan ditampilkan dibuat pada saat halaman tersebut diminta oleh user/pemakai, misalnya user/pemakai ingin mengakses database dan menampilkannya pada halaman website. Jika zaman dulu, pembuat masih menggunakan HTML biasa untuk membuat home page, tapi untuk saat ini, akan sangat "ketinggalan zaman" jika hanya menggunakan HTML saja Syarat-Syarat Web Dinamis Adapun syarat- syarat agar website selalu dinamis adalah;

24 1. Tersedianya Web Server. Baik web statis ataupun dinamis, jika ingin bisa online di internet, maka syarat pertama haruslah memiliki server, baik berupa hardware maupun software. Untuk hardware yaitu seperangkat komputer yang selalu terhubung online dengan internet. Untuk software, selain operating system, harus disediakan juga software untuk web server itu sendiri. Untuk saat ini web server yang menjadi favorit adalah Apache. 2. Tersedianya Software Pemrograman Web Berbasis Server. Jika ingin membuat web dinamis, berarti harus tersedia sebuah bahasa pemrograman web selain HTML, baik itu client side maupun server side. Untuk yang client side, memiliki kekurangan yaitu instruksi program bisa terlihat oleh pengguna internet. Sedangkan server side lebih aman karena instruksi programnya tidak terlihat oleh user. Yang terlihat adalah seperti HTML biasa. Contoh bahasa pemrograman web yang favorit adalah PHP. 3. Tersedianya Database. Database merupakan software yang digunakan untuk menyimpan dan memanajemen data. Jika memiliki data yang sedikit, mungkin masih bisa memakai file biasa sebagai media penyimpanannya. Tapi jika datanya sudah sangat banyak, tanpa database akan sangat rumit. Database dapat menyimpan berjuta-juta data, dan dapat diakses dengan sangat cepat. Contoh database yang bisa dipakai untuk membuat web adalah Oracle, MsSQLServer, MySQL dan masih banyak lagi yang lain. Saat ini database yang menjadi favorit adalah MySQL.

25 2.2 Sekilas Lahirnya Internet Sejarah internet dimulai pada 1969 ketika Departemen Pertahanan Amerika memutuskan untuk mengadakan riset tentang bagaimana caranya menghubungkan sejumlah komputer sehingga membentuk jaringan organik. Program riset ini dikenal dengan nama ARPANET. Pada 1970, sudah lebih dari 10 komputer yang berhasil dihubungkan satu sama lain sehingga mereka bisa saling berkomunikasi dan membentuk sebuah jaringan. Tahun 1972, Roy Tomlinson berhasil menyempurnakan program yang ia ciptakan setahun yang lalu untuk ARPANET. Program ini begitu mudah, sehingga langsung menjadi populer. Pada tahun yang sama, juga diperkenalkan sebagai lambang penting yang menunjukan "at" atau "pada". Tahun 1973, jaringan komputer ARPANET mulai dikembangkan meluas ke luar Amerika Serikat. Komputer University College di London merupakan komputer pertama yang ada di luar Amerika yang menjadi anggota jaringan ARPANET. Pada tahun yang sama, dua orang ahli komputer yakni Vinton Cerf dan Bob Kahn mempresentasikan sebuah gagasan yang lebih besar, yang menjadi cikal bakal pemikiran internet. Ide ini dipresentasikan untuk pertama kalinya di Universitas Sussex. Hari bersejarah berikutnya adalah tanggal 26 Maret 1976, ketika Ratu Inggris berhasil mengirimkan e- mail dari Royal Signals and Radar Establishment di Malvern. Setahun kemudian, sudah lebih dari 100 komputer yang bergabung di ARPANET membentuk sebuah jaringan atau network. Pada 1979, Tom Truscott, Jim Ellis dan Steve Bellovin,

26 menciptakan newsgroups pertama yang diberi nama USENET. Tahun 1981 France Telecom menciptakan gebrakan dengan meluncurkan telpon televisi pertama, di mana orang bisa saling menelpon sambil berhubungan dengan video link. Karena komputer yang membentuk jaringan semakin hari semakin banyak, maka dibutuhkan sebuah protokol resmi yang diakui oleh semua jaringan. Pada tahun 1982 dibentuk Transmission Control Protocol atau TCP dan Internet Protocol atau IP yang kini kita kenal semua. Sementara itu di Eropa muncul jaringan komputer tandingan yang dikenal dengan Eunet, yang menyediakan jasa jaringan komputer di negara-negara Belanda, Inggris, Denmark dan Swedia. Jaringan Eunet menyediakan jasa dan newsgroup USENET. Untuk menyeragamkan alamat di jaringan komputer yang ada, maka pada tahun 1984 diperkenalkan sistem nama domain, yang kini kita kenal dengan DNS atau Domain Name System. Komputer yang tersambung dengan jaringan yang ada sudah melebihi 1000 komputer lebih. Setahun kemudian alamat anggota jaringan mulai menggunakan alamat dengan akhiran.com.. Sistem alamat yang serba praktis ini langsung menggelumbungkan jumlah komputer yang tersambung dengan jaringan. Pada 1987 jumlah komputer yang tersambung ke jaringan melonjak 10 kali lipat menjadi lebih. Tahun 1988, antar sesama komputer sudah mulai dapat mengobrol atau chatting, karena Jarko Oikarinen dari Finland berhasil menemukan dan sekaligus memperkenalkan IRC atau Internet Relay Chat. Setahun kemudian, jumlah komputer yang saling berhubungan kembali melonjak 10 kali lipat dalam setahun. Tak kurang dari komputer kini membentuk sebuah jaringan. Tahun 1990 adalah tahun yang paling bersejarah, ketika Tim Berners Lee menemukan program editor dan

27 browser yang bisa menjelajah antara satu komputer dengan komputer lainnya, yang membentuk jaringan itu. Program inilah yang disebut www, atau World Wide Web. Tahun 1992, komputer yang saling tersambung membentuk jaringan sudah melampaui sejuta komputer, dan di tahun yang sama muncul istilah "surfing the internet". Tahun 1994, situs internet telah tumbuh menjadi alamat halaman, dan untuk pertama kalinya virtual-shopping atau e-retail muncul di internet. Dunia langsung berubah. Di tahun yang sama Yahoo! Didirikan, yang juga sekaligus tahun kelahiran Netscape Navigator 1.0. Setahun kemudian internet sudah menjadi jalur di mana suara, gambar, bisa streaming sekaligus. Tahun 1996 transaksi perdagangan di internet sudah mencapai satu milyar dollar AS. Tahun 1997 situs internet sudah melewati 1,2 juta. Nama domain business.com mencapai rekor penjualan dollar AS. Tahun 1998, situs internet tumbuh menjadi 4,2 juta, dan nama domain yang terdaftar sudah melewati angka dua juta. Tahun 1999 nama domain business.com terjual kembali 7,5 juta dollar AS. Tahun 2000 situs internet sudah melewati 21,1 juta. 2.3 Teknologi Internet Internet sebagai suatu media informasi memiliki beberapa teknologi yang umum untuk diketahui diantaranya adalah URL, TCP/IP, nama domain, browser, , dan chatting. Semuanya adalah alat bagi seseorang dalam berhubungan dengan dunia internet.

28 2.3.1 URL (Uniform Resource Locator) URL digunakan sebagai penunjuk lokasi pada internet. URL dapat dimisalkan dengan alamat yang menunjuk pada suatu lokasi. Contoh penggunaan URL adalah untuk menunjuk alamat pada suatu website Nama Domain Setiap komputer yang terhubung jaringan TCP/IP akan memilki IP address yang unik. IP address terdiri dari empat grup angka yang dipisahkan oleh titik. Nama domain sebenarnya adalah representasisari IP address. Sebagai contoh IP address dari adalah Kedua URL tersebut akan menampilkan halaman yang sama, yaitu website Google. Perbedaannya adalah saat mengetikkan url komputer terlebih dahulu mencari IP address dari google.com yaitu ( kemudian akan me-link ke server tempat file filenya disimpan Browser Browser adalah sebuah program yang digunakan untuk menampikan halaman web. Browser berkomunikasi dengan web server melalui protocol HTTP, yang membaca

29 dan menerjemahkan bahasa HTML dan data gambar untuk ditampilkan secara visual sehingga informasi yang ada dapat dibaca.. Pengeksekusian atau pembacaan halaman web oleh browser dibagi menjadi dua berdasarkan pengeksekusiannya, yaitu pengeksekusian pada sisi klien dan pada sisi server. a. Client Side Pada sisi klien, script yang dibuat akan dijalankan pada komputer klien (user) lalu ditampilkan hasinya pada browser sehingga sering disebut browser scripting. Diantaranya adalah HTML, JavaScript, VBScript, DHTML dan lain lain. Kegunaannya untuk membuat tampilan pada web lebih menarik dan dinamis. b. Server Side Pada sisi server, script akan dijalankan pada komputer server, kemudian server akan mengirimkan hasilnya pada browser komputer klien. Kerja script pada server side berbeda dengan client side, pada server side, server pada komputer menjadi berat, karena server side membutuhkan banyak resource server untuk mendukung scriptingnya. Scripting pada server side diantaranya adalah Perl, PHP, ASP, JSP, Coldfusion dan lain-lain adalah salah satu produk yang dihasilkan pada masa sejarah berkembang internet. Dengan komunikasi pada dunia internet menjadi lebih cepat dan efisien. adalah singkatan dari electronic mail (surat elektronik) yang fungsinya

30 sama yaitu untuk mengirim surat atau pesan ke alamat yang dituju, tetapi dengan media internet Chatting Chatting adalah pembicaraan yang dilakukan kepada orang lain dengan menuliskan kata-kata dan menggunakan komputer yang terhubung ke internet secara bersamaan. Apapun yang anda ketik melalui keyboard, maka akan muncul pada layar komputer rekan chatting anda. Ada banyak program-pogram chatting diantaranya Yahoo Instant Messager (YIM), MIRC, MSN, dan lain-lain. 2.4 Pengenalan HTML HTML merupakan salah satu format yang digunakan dalam pembuatan dokumen da aplikasi yang berjalan di halaman web. Oleh karena itu agar dapat membuat program aplikasi di atas halaman web, yang harus terlebih dahulu harus mengenal dan menguasi HTML Pendahuluan HTML HTML atau yang memiliki kepanjangan Hypertext Markup Language adalah script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML

31 sendiri adalah suatu dokumen teks biasa yang mudah dimengerti dibanding bahasa pemrograman lainnya, dan karena bentuknya itu maka HTML dapat dibaca oleh berbagai platform seperti : Windows, Linux, Macintosh. Kata Markup Language pada HTML menunjukkan fasilitas yang berupa tanda tertentu dalam skrip HTML dimana kita bisa mengatur judul, garis, tabel, gambar, dan lain-lain dengan perintah yang telah ditentukan pada elemen HTML. HTML sendiri dikeluarkan oleh W3C (World Wide Web Consortium), setiap terjadi perkembangan level HTML, harus dievaluasi ketat dan disetujui oleh W3C. Hingga kini versi terakhir HTML yang telah disetujui oleh W3C adalah HTML versi Bagian-Bagian HTML HTML terdiri dari beberapa bagian yang fungsinya sebagai penanda suatu kelompok perintah tertentu, misalnya kelompok perintah form yang ditandai dengan kode <form>, judul dengan <title> dan sebagainya. Untuk lebih lanjut mengenai bagianbagian HTML perhatikan skema dibawah ini : <html> <head> <title> </title> </head> <body> isi dari halaman web

32 </body> </html> Tag adalah kode-kode yang digunakan untuk men-setting dokumen HTML. Secara garis besar bentuk umum tag adalah sebagai berikut : <tag-awal>teks<tag-akhir> Namun ada juga tag yang tidak perlu ada tag penutup seperti <br>, <hr>, <img>, dan lain-lain. 2.5 Pengenalan PHP PHP adalah bahasa server-side scripting yang menyatu dengan HTML untuk membuat halaman web yang dinamis. Maksud dari server-side scripting adalah sintaks dan perintah-perintah yang diberikan akan sepenuhnya dijalankan di server tetapi diesrtakan pada dokumen HTML. Pembuat web ini merupakan kombinasi antara PHP sendiri sebagai bahasa pemrograman dan HTML sebagai pembangun halaman web Sejarah PHP PHP adalah bahasa pemrograman web atau scripting language yang didesain untuk web. PHP dibuat pertama kali oleh satu orang yaitu Rasmus Lerdorf, yang pada awalnya dibuat untuk menghitung jumlah pengunjung pada homepagenya. Pada waktu

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

34 Pada Juni 2004, Zend merilis PHP 5.0. Versi ini adalah versi mutakhir dari PHP. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Dalam versi ini juga dikenalkan model pemrograman berorientasi objek baru untuk menjawab perkembangan bahas pemrograman kearah pemrograman berorientasi objek Kelebihan dan Kelemahan PHP Kelebihan PHP sebagai bahasa server-side adalah : 1. Bahasa pemrograman php adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya. 2. Web Server yang mendukung php dapat ditemukan dimana - mana dari mulai IIS sampai dengan apache, dengan configurasi yang relatif mudah. 3. Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap membantu dalam pengembangan. 4. Dalam sisi pemahaman, php adalah bahasa scripting yang paling mudah karena referensi yang banyak. 5. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (linux, unix, windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system. Adapun Kelemahan PHP adalah : 1. Tidak ideal untuk pengembangan skala besar.

35 2. Tidak bisa memisahkan antara tampilan dengan logik dengan baik (walau penggunaan template dapat memperbaikinya). 3. PHP memiliki kelemahan security tertentu apabila programmer tidak jeli dalam melakukan pemrograman dan kurang memperhatikan isu dan konfigurasi PHP Penggabungan Script PHP dan HTML Bahasa pemrograman PHP dapat digabungkan dengan HTML dengan terlebih dahulu memberikan tanda tag buka dilanjutkan tanda tanya ( <? ) kemudian ditutup dengan tanda tanya dilanjutkan tanda tag tutup (?> ). Ada dua tipe penggabungan antara PHP dan HTML yaitu: 1. Embedded Script Yakni penulisan tag PHP di sela-sela tag HTML. Dengan cara ini, penulisan tag PHP digunakan untuk mengapit bagian-bagian tertentu dalam dokumen yang memerlukan script PHP untuk proses di dalam server. Embedded Script menempatkan sebagai bagian dari script HTML. Contoh penulisan Embedded Script dapat dilihat di bawah ini : <html> <head> <title>testing</title> </head>

36 <body> <? echo "Halo Dunia";?> </body> </html> 2. Non Embedded Script Yakni cara penulisan tag PHP dibagian paling awal dan paling akhir dokumen. Dengan cara ini, penulisan tag PHP digunakan untuk mengawali dan mengakhiri keseluruhan bagian dalam sebuah dokumen. Non Embedded Script menempatkan script HTML sebagai bagian dari script PHP. Contoh Penulisan Non Embedded Script dapat dilihat dibawah ini : <? echo <html> ; echo <head> ; echo <title>testing</title> ; echo </head> <body> ; echo Halo Dunia ; echo </body> ; echo </html> ;?>

37 2.6 Pengenalan MySQL MySQL adalah multiuser database yang menggunakan bahasa Structural Query language (SQL). MySQL dalam operasi client-server melibatkan server daemon MySQL disisi server dan berbagai macam program serta library yang berjalan di sisi client. MySQL mampu menangani data yang cukup besar Sejarah SQL SQL adalah sebuah database yang dapat berjalan sebagai Server maupun Client. Produk database MySQL ini memiliki General Public Licence, dan bersifat Open Source, sehingga bebas untuk digunakan, diedarkan, maupun dikembangkan kembali, tanpa harus khawatir dengan hak cipta. Sejarah SQL dimulai dari artikel seorang peneliti dari IBM bernama EF Codd yang membahas tentang ide pembuatan basis data relasional pada bulan juni tahun Dalam artikel ini juga dibahas tentang kemungkinan pembuatan bahasa standar untuk mengakses data dalam basis data tersebut. Bahasa tersebut kemudian diberi nama SEQUEL (Structured English Query Language). Setelah terbitnya artikel tersebut, maka IBM mengadakan proyek pembuatan basis data relasional beserta SEQUEL. Akan tetapi karena permasalah hukum mengenai penamaan SEQUEL, maka IBM merubahnya menjadi SQL. Implementasi basis data relasional dikenal dengan System/R.

38 Di akhir tahun 1970-an muncul perusahaan bernama Oracle yang membuat server basis data populer yang bernama sama dengan nama perusahaannya. Dengan naiknya kepopuleran Oracle, maka SQL juga ikut populer sehingga saat ini menjadi standar defacto bahasa dalam manajemen basis data Standarisasi SQL Standarisasi SQL dimulai pada tahun 1986, ditandai dengan dikeluarkannya standar SQL oleh ANSI. Standar ini sering disebut dengan SQL86. Standar tersebut kemudian diperbaiki pada tahun 1989 kemudian diperbaiki lagi pada tahun Versi terakhir dikenal dengan SQL92. Pada tahun 1999 dikeluarkan standar baru yaitu SQL99 atau disebut juga SQL99, akan tetapi kebanyakan implementasi mereferensi pada SQL Pemakaian Dasar SQL Pemakaian dasar SQL adalah sebagai berikut: 1. Mendefinisikan Tabel Untuk mendefinisikan / membuat suatu tabel digunakan sintaks : CREATE TABLE NAMA_TABLE (DEFINISI_TABLE); Contoh: CREATE TABLE TEST ( NAMA VARCHAR(20), ALAMAT VARCHAR(255), PASSWORD VARCHAR(10) );

39 2. Menyimpan data Untuk menyimpan data dalam tabel dipergunakan sintaks : INSERT INTO NAMA_TABLE (DAFTAR_FIELD) VALUES (DAFTAR_NILAI); Contoh: INSERT INTO TEST (NAMA, ALAMAT, PASSWORD) VALUES ('rozi', 'jl. Kapten muslim gg. Pertama no. 74', '201285'); 3. Mengambil data Untuk mengambil data dipergunakan sintaks : SELECT DAFTAR_FIELD FROM NAMA_TABLE KONDISI; Contoh: SELECT nama FROM TEST; Kondisi diatas berupa optional (bisa digunakan dan bisa tidak digunakan). 4. Mengubah data Untuk mengubah data dipergunakan sintaks : UPDATE NAMA_TABEL SET DATA_FIELD_LAMA WHERE DATA_FIELD_BARU; Contoh: UPDATE mahasiswa SET nama = 'rozi' WHERE nama = 'fachru'; 5. Menghapus data Untuk menghapus data dipergunakan sintaks:

40 DELETE FROM NAMA_TABLE KONDISI Contoh: DELETE FROM TEST WHERE NAMA='rozi'; 2.7 Pengenalan CSS Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. CSS bekerja sebagai pelengkap pada HTML. Dan tugas utama CSS adalah adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah website. CSS dapat mengubah besar kecilnya text, mengganti warna background pada sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan oleh CSS. Singkatnya, CSS digunakan untuk mengatur susunan tampilan pada halaman HTML. 2.8 Pengenalan DHTML DHTML adalah suatu istilah yang diberikan untuk suatu halaman web yang memanfaatkan HTML (Hypertext Markup Language) 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.

41 DHTML mulai diterapkan pada browser generasi ke empat - Microsoft Internet Explorer 4 (IE4) dan Netscape Communicator 4 (NS4). DHTML sepenuhnya 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 DHTML bisa juga dibuat dengan menggunakan 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 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 anda temukan sewaktu mengakses internet seharihari. Yang umum misalnya rollover menu (baik berbentuk image ataupun teks biasa), dropdown menu, trailing cursor, sliding text, dll. 2.9 Mengenal Macromedia Dreamweaver MX 2004 Macromedia Dreamweaver adalah sebuah editor HTML profesional untuk mendesain secara visual dan mengelola situs Web maupaun halaman Web. Macromedia Dreamweaver MX 2004 adalah salah satu produk dari vendor Macromedia Inc. Pada saat ini, pihak Macromedia telah mengeluarkan versi terbaru dari Macromedia Dreamweaver yaitu Macromedia Dreamweaver MX 8.

42 Dreamweaver MX 2004 memiliki kemampuan untuk menyunting kode dengan lebih baik, serta mampu menggabungkan layout site dengan programming webnya. Kehebatan Dreamweaver ini menjadikan Dreamweaver lebih banyak digunakan oleh Web Desainer maupun Web Programmer guna mengembangkan situs web. Ruang kerja, fasilitas, dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam desain maupun membangun situs web Memulai Dreamweaver MX 2004 Sepertinya halnya dengan program-program lain, untuk menjalankan Macromedia Dreamweaver MX 2004, mulailah dengan memilih tombol Start pada taskbar, kemudian pilih All Program pada tampilan Start Menu Program, pilih folder Macromedia dan klik Macromedia Dreamweaver MX Pada saat pertama kali menggunakan Dreamweaver setelah penginstallan, kita akan mendapatkan tampilan kotak dialog yang menanyakan pilihan layout ruang kerja yang ingin anda gunakan, sebaiknya kita gunakan ruang kerja designer Area Kerja Pada Dreamweaver MX 2004 Komponen yang terdapat pada ruang kerja Dreamweaver MX 2004 adalah : 1. Document Window berfungsi untuk menampilkan dokumen dimana Anda sekarang bekerja.

43 2. Menu Utama berisi semua perintah yang dapat digunakan untuk bekerja pada Dreamweaver. 3. Insert Bar terdiri dari tombol-tombol untuk menyisipkan berbagai macam objek seperti hyperlink, image, tabel, daan lain-lain. 4. Document Toolbar berisi tombol-tombol dan menu pop-up dari dokumen yang sedang kita gunakan. 5. Panel Groups adalah sekumpulan panel window yang saling berkaitan satu sama lain, yang dikelompokkan dibawah satu judul untuk membantu bekerja dengan Dreamweaver. 6. Tag Selector adalah tag-tag HTML yang terpilih sesuai dengan objek yang ada di area kerja. 7. Properti Inspector digunakan untuk melihat dan megubah berbagai properti dari tiap objek terpilih yang ada di area kerja. Setiap objek memiliki properti yang berbeda-beda Menu Bar Area Kerja Di dalam area kerja Dreamweaver MX 2004 terdapat beberapa menu utama yang sangat sederhana dan mudah untuk dipahami. Pada Menu Bar Area Kerja Dreamweaver MX 2004 terdiri dari beberapa komponen yang dapat kita gunakan, yaitu :

44 1. Menu File Menu File terdiri dari perintah untuk membuat dokumen baru, membuka dokumen yang telah disimpan, dan lain-lain. 2. Menu Edit Menu Edit terdiri dari perintah untuk mencopy, memindahkan, serta perintah untuk pemilihan seperti Select All, dan lain-lain. 3. Menu View Berisi perintah untuk menampilkan beberapa macam tampilan jendela dari area kerja Dreamweaver MX Seperti jendela Code dan View, serta untuk menampilkan dan menyembunyikan beberapa elemen halaman dan toolbar. 4. Menu Insert Berisikan alternatif baris insert untuk menyisipkan obyek didalam dokumen. 5. Menu Modify Berfungsi untuk melakukan perubahan properti pada item atau halaman terpilih. Dengan menggunakan menu ini kita dapat mengedit atribut tag, mengganti tabel dan elemen tabel, dan bermacam bentuk aksi untuk item library dan template.

45 6. Menu Text Berfungsi untuk mempermudah dalam melakukan format teks. 7. Menu Commands Berisi akses ke beberapa perintah, format kode yang sesuai dengan format pilihan kita, membuat photo album, dan melakukan pengeditan gambar dengan menggunakan Macromedia Fireworks. 8. Menu Site Berisi item untuk mengelola situs seperti mendefenisikan situs baru, menghapus situs, menduplikasikan situs yang telah didefenisi. 9. Menu Window Menyediakan akses ke seluruh panel, inspector, dan jendela didalam Dreamweaver. 10. Menu Help Menyediakan fasililtas membantu kita dalam menggunakan Dreamweaver Bagan Alir (Flowchart) Flowchart merupakan gambar yang menampilkan struktur dan isi halaman per halaman. Bagan alir (flowchart) ini menjelaskan secara rinci langkah-langkah dari

46 proses program. Flowchart dibuat dengan menggunakan simbol-simbol tertentu yagn menyatakan tiap langkah program. Simbol-simbol flowchart dapat dilihat pada tabel 2.1 berikut ini: Tabel 2.1 Simbol-Simbol Flowchart Simbol Nama Kegunaan Input/Output symbol Simbol input/output digunakan mewakili data inpu/output Process symbol Simbol proses digunakan untuk mewakili suatu proses Flow lines symbol Simbol garis arah digunakan untuk menunjukan arus ari proses Connector symbol Simbol penghubung digunakan untuk menunjukan sambungan dari bagan alir yang terputus di halaman yang masih sama atau di halaman lainnya Decision symbol Simbol keputusan digunakan Predifined symbol process untuk suatu penyeleksian kondisi di dalam program Simbol proses terdefenisi digunakan untuk menunjukan suatu operasi yang rincinya ditunjukan ditempat / halaman

47 lain. Magnetik disk symbol Simbol yang menunjukan penyimpanan data ke dalam database Terminal symbol point Simbol titik terminal digunakan untuk menunjukan awal dan akhir dari suatu proses

48 BAB 3 SEKILAS SMA SWASTA ERIA MEDAN 3.1 Profil Sekolah menengah atas (ERIA) sesuai dengan cikal bakal pendirian TAMAN IDRIA berlokasi di Jl. S.M. Raja No. 48 Medan, pada mulanya yang didirikan bertujuan untuk: 1. Sebagai Balai Penitipan Anak (BPA) 2. Taman kanak-kanak (TK) 3. Sekolah Dasar (SD) Pada tanggal 19 Oktober 1960, mendirikan YAYASAN PENDIDIKAN DEMOCRATIC di Medan, sesuai Akte No.67dari Notaris Merah Sutan Nasution yang bertujuan untuk untuk membantu pemerintah mengembangkan dunia pendidikan, yang ditujukan dalam karya nyata dengan mendirikan: 1. Democratic English School (DES) di jl. S.M. Raja No. 195 Medan. 2. SD Swasta KATALIA di jl. S.M. Raja No. 48 Medan melanjutkan TAMAN IDRIA. Karena adanya ketentuan Pemerintah tentang larangan Sekolah berbahasa asing (Inggris), dalam upaya mengembangkan penggunaan Bahasa Indonesia sebagai bahasa nasional, maka secara bertahap YAYASAN PENDIDIKAN DEMOCRATIC perlahan membangun basis

49 pendidikan dengan menggunkan bahasa Indonesiasebagai bahasa pengantar dan bahasa utama, sedangkan bahasa Inggris digunakan sebagai bahasa untuk menjadikan siswa didik lebih terampil dalam menggunakan bahasa asing. Hal ini ditandai dengan pendirian TK SD SMP Perguruan ERIA di jl. S.M. Raja No. 195 Medan, papa tanggal 21 April 1977, sebagai pengembangan DEMOCRATIC ENGLISH SCHOOL. Pada perkembangan selanjutnya pada tahun 1984 konsentrasi pendidikan dan agamadilakukan dengan mendirikan Sekolah Pendidikan Agama Islam setingkat SD, yaitu: Madrasah Ibtidaiyah ROHANIAH, di jl. Selamat Ujung Simpang Limun, serta membangun mesjid sebagai sarana pendukung pendidikan dan pengembangan agama islam. Dedikasi Yayasan Perguruan ERIA tidak hanya sebatas pada pendidikan SD SMP semata, keinginan untuk membantu Pemerintah dalam memajukan pendidikan kembali dibuktikan dengan sungguh-sungguh melalui pendirian SEKOLAH ILMU KOMUNIKASI PEMBANGUNAN (STIKP) khusus dibidang Jurnalistik dan Humas, yang hingga tahun 2008 masih eksis mengembangkan dan mendidik mahasiswa. Melalui beberapa konsep dan metode pengembangan yang dilaksanakan. Pada tahun ajaran dibuka SEKOLAH MENENGAH EKONOMI ATAS (SMEA) ERIA yang disatukan dengan gedung STIKP. Dengan berbagai pertimbangan, saran, dan masukan dari berbagai pihak, masyarakat, dan kalangan pemerhati pendidikan yang ada di Sumatera Utara umumnya, dan di kota Medan

50 secara khusus, serta didukung dengan proposal dan harapan Dewan Guru seluruhnya yang mendedikasikan kemampuan dan pengabdiannya kepada Perguruan ERIA. Pada tanggal 21 April 1991 (bertepatan pada Hari Kartini), di HUT Perguruan ERIA ke 13 resmi YAYASAN PENDIDIKAN DEMOCRATIC berubah nama menjadi YAYASAN PENDIDIKAN DEMOCRATIC dan sekaligus meresmikan pengembang Kursus Komputer (K.3), menjadi Lembaga Pendidikan Komputer Komunikasi (LPKK). Didirikan pada tahun SMA Swasta Eria menjadi pelengkap tingkatan sekolah pada perguruan Eria dengan izin Operasional Dinas pendidikan Kota Medan No.31/I.05/A/1991. Pada tanggal 1 Februari NSS No , dan NDS No Dengan Kepala Sekolah Drs. H. Khoiruddin Hasibuan, dan wakil Bapak Drs. As Ari, yang dibantuoleh Bagian Tata Usaha Susiawati, Bagian urusan Administrasi Zurlina, Bagian urusan Kurikulum Drs As Ari, Bagian Kesiswaan Dra. Mulyana Moenir, dan Drs. Daud Ja far, hingga saat ini (tahun 2008). 3.2 Uraian Tugas dan Fungsi Organisasi Setiap susunan organisasi saling berhubungan yang berkoordinasi antar tiap struktur dan terikat di bawah garis komando dan setiap struktur oraganisasi mempunyaui tugasnya masing-masing.

51 3.2.1 Koordinator Perguruan Eria Koordinator Perguruan Eria adalah yang berwenang dalam menentukan kurkulum dan membuat peraturan-peraturan kurikulum sekolah sesuai dengan kurikulum Dinas Pendidikan Kota Medan,serta sebagai pemimpin utama perguruan Wakil Koordinator Perguruan Eria Wakil Koordinator Perguruan Eria bertugas mambantu segala kewenangan koordinator serta mengawasi jalannya kurikulum Kepala Sekolah Kepala sekolah merupakan manajer, edukator, administrator serta sekaligus pemimpin sekolah SMA Swasata Eria Wakil Kepala Sekolah Wakil Kepala Sekolahbertugas membantu Kepala Sekolah dalam menyusun kurikulum, mengatur program kesiswaan, menyediakan sarana dan prasarana,

52 mengawasi porgra pendidikan dan menyusun bahan pengajaran dan pengembangan kurikulum PKS I Edukatif PKS I Edukatif bertugas membantu Kepala Sekolah dalam mengawasi kegiatan laboratorium, menyusun jadwal, menyediakan alat laboratorium dan menyusun laporan kegiatan laboratorium PKS II Kesiswaan PKS II Kesiswaan berfungsi menjalankan atau mengawasi kegiatan kesiswaan seperti dibidang OSIS, urusan pramuka serta pelatihan seni tari dan segala kegiatan kesiswaan selalu dalam pengawasan Kepala Sekolah Guru Pembimbing dan Konseling Bertugas membantu Kepala Sekolah dalam penyusunan dan pelaksanaan pembimbing dan konseling disekolah berkoordinasi dengan PKS I dan II dalam mengawasi segala aktifitas siswa

53 3.2.8 Kepala Tata Usaha Kepala Tata Usaha mempunyai tugas melaksanakan ketatausahaan sekolah dan bertanggung jawab kepada Kepala Sekolah dalam kegiatan penyusunanprogram kerja tata usaha, pengolahan keuangan sekolah, penyusunanadministrator perlengkapan dan pelaksanaan tata usaha secara umum Wali Kelas Wali Kelas adalah guru ataupun perwalian tiap kelas yang membantu Kepala Sekolah dalam kegiatan pengolahan kelas, menyelengarakan administrasi kelas, pembuatan catatan khusus tentang siswa, penyusunan bulanan dan nilai siswa Guru Guru adalah yang memberikan materi-materi pelajaran berdasarkan kurikulum yang berlaku kepada siswa serta mendidik siswa menajdi manusia yang bermoral dan berguna untuk bangsa.

54 3.3 Visi dan Misi 1 Visi Sekolah "Mencerdaskan siswa dalam berbagai aspek ilmu, memiliki wawasan kedepan, tanggapan terhadap dinamika kehidupan di dasarkan pada Iman dan Taqwa terhadap Tuhan Yang Maha Esa". 2. Misi Sekolah 1. Menumbuhkan moral dan budi pekerti, sehingga mampu menjauhkan diri dari perbuatan dan sikap tercela. 2. Mengantarkan anak pada persiapan UN. 3. Melatih dan membimbing siswa terampil berkomunikasi dengan mempergunakan Bahasa Inggris. 4. Mempersiapkan anak memasuki jenjang pendidikan tinggi. 5. Melaksanakan sistem pembelajaran yang relevan dengan tujuan Pendidikan Nasional sesuai Kurikulum yang berlaku. 6. Melaksanakan kegiatan pembelajaran dan bimbingan secara efektif dan optimal. 7. Melaksanakan aktifitas keagamaan secara rutin dalam upaya pembentuk watak dan prilaku warga sekolah. 8. Mengadakan kerjasama dengan lembaga terkait yang mendukung sebagai upaya tercapainya tujuan pembelajaran optimal.

55 3.4 Struktur Organisasi DINAS PENDIDIKAN PROVINSI Koorinator Perg. Eria H. Prabudi Said DINAS PENDIDIKAN KOTA MEDAN Wakor Perg. Eria Drs. H. Rukzaidan Kabid.pddk Drs H. Sabar Kabid.Umum H. Goenadi Kepala Sekolah Drs H. Khoruddin Hasibuan Wakil Kepala Sekolah Drs As Ari PKS I Edukatif Drs. As Ari Ur. Lab. IPA Ur. Lab. Komputer Ur Lab. Perpustakaan Ur. Lab. Bahasa PKS II Kesiswaan Dra. Mulyana Moenir Bidang Osis Urusan Pramuka Pelatih Seni Tari Guru BP/BK Drs. Daud Ja far TU I Zurlina TU II SUSIWATI Wali Kelas Guru Mata Pelajaran Siswa / Siswi Keterangan. Garis Komando Garis Kordinasi Gambar 3.1 Struktur Organisasi SMA Swasta Eria Medan.

56 BAB 4 PERANCANGAN SISTEM 4.1 Perancangan Sistem Perancangan sistem adalah upaya suatu organisasi atau lembaga untuk memulai memiliki suatu sistem yang lebih baik lagi dari sistem yang sebelumnya. Perancangan sistem dilakukan setelah mendapat gambaran dengan jelas apa yang harus dikerjakan. Tujuan dari perancangan sistem adalah untuk memenuhi kebutuhan user (pemakai) mengenai gambaran yang jelas tentang perancangan sistem yang akan dibuat serta diimplementasikan. 4.2 Data Flow Diagram (DFD) Data Flow Diagram (DFD) adalah gambaran sistem scara logika. Gambaran ini tidak tergantung pada preangkat keras, lunak, struktur data atau organisasi. Pada tahap analisa, penanganan notasi simbol lingkaran dan anak panah mewakili / menggambarkan arus data dalam perancangan sistem sangat membantu sekali didalam

57 komunikasi dengan pemakaian sistem menggunakan notasi-notasi ini untuk menggambarkan arus dari data sistem Rancangan Data Flow diagram Data Guru Mengajar, pegawai, nilai dan informasi siswa adalah sebagai berikut: Admin - Data guru mengajar/pegawai - Data nilai siswa - Data infomasi siswa - Data siswa - Data komentar siswa - Data artikel siswa Siswa - Info siswa - Info komentar - Info artikel siswa Sistem Informasi Berbasis Web - Info guru mengajar/pegawai - Info nilai siswa - Info-info siswa - Info profil sekolah Laporan Kepsek Gambar 4.1 Diagram Konteks Sistem Informasi Berbasis Web

58 0.1 admin Login Registrasi administrator Pengolahan Info guru mengajar/pegawai - Info nilai siswa - Info-info siswa - Data guru mengajar/pegawai - Data nilai siswa - Data infomasi siswa Input Data - Data siswa - Data komentar siswa - Data Artikel siswa Siswa Simpan data Data guru Data mengajar Data penilaian F1 Guru/ pegawai F2 Guru mengajar F3 Nilai 0.3 Cetak laporan Pembuatan Laporan Laporan Kepsek Gambar 4.2 Data Flow Diagram (DFD) Level 0 Sistem Informasi Berbasis Web

59 F1 Guru/ pegawai F3 Guru mengajar F4 Nilai Simpan Simpan Simpan Input Data siswa Input Data Guru Mengajar Input Data Nilai Proses Proses Proses Siswa Data nilai Admin Proses Simpan data 1.6 Data siswa 1.4 Input Data Siswa Pencatatan Laporan Cetak nilai Laporan Kepsek Gambar 4.3 Data Flow Diagram (DFD) Level 1 Penginputan

60 Dengan adanya aliran informasi dapat membantu dalam menggambarkan isi dari setiap halaman dan link atau navigasi antara halaman-halaman didalam situs 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 aliran Informasi dalam membangun situs ini dapat dilihat pada gambar dibawah ini:

61 Index / Halaman Intro Login Profil Pengajar Siswa Bukutamu Alumni Kata Sambutan Data Guru/Pegawai Ekskul Data Alumni Sejarah Data Guru Mengajar Daftar Member Cari Data Alumni Visi & Misi Cari Data Guru/Pegawai Penerima PMP Pendaftaran Alumni Organisasi Nilai Siswa Fasilitas Ruang Gambar 4.4 Aliran Informasi rancangan situs

62 Pada gambar 4.4, aliran informasinya masih sangatlah sederhana karena di setiap cabang aliran informasi masih terdapat cabang-cabang lagi bergantung pada seberapa kompleks dan seberapa banyak halaman yang akan dibuat. Misalnya pada halaman Login dibagi lagi ke Halaman Admin dan Halaman User, maka harus dibuat dua cabang lagi. Seperti pada Gambar 4.5 Login Halaman Admin Halaman User Gambar 4.5 Percabangan Dalam Aliran Informasi 4.3 Perancangan Halaman Website 1. Halaman Index (Intro) Merupakan halaman intro atau halaman pembuka yang akan diakses pertama kali saat situs dibuka. Dalam halaman ini akan ditampilkan teks dan gambar SMA Swasta Eria Medan yang dibuat sedemikan rupa agar website menjadi lebih menarik untuk dikunjungi.

63 2. Halaman Home Merupakan halaman utama dari website. Halaman ini berisikan login untuk siswa/siswi SMA Swasta Eria Medan serta link-link utama yang menuju halaman lainnya. 3. Halaman Login Siswa Merupakan halaman yang hanya dapat diakses oleh siswa yang dimiliki username dan password. Halaman ini berisikan data pribadi siswa yang melakukan login tersebut dan terdapat halaman untuk siswa yang dapat memberikan komentar secara langsung oleh siswa yang bersangkutan. 4. Halaman Pihak Sekolah Merupakan halaman yang hanya dapat diakses oleh pihak sekolah yang dimiliki administrator dan password, dimana pada halaman ini pihka sekolah yang dapat melihat seluruh data pribadi siswa dan mengontrol perkembangan nilai siswa-siswi SMA Swasta Eria Medan. 5. Halaman Profil Merupakan halaman yang berisikan informasi sekolas tentang sekolah, alamat sekolah serta link-link yang menghubungkan ke halaman tentang profil SMA Swasta Eria Medan lainnya, seperti Kata Sambutan, Sejarah Sekolah, Visi dan Misi, Struktur Organisasi, Fasilitas serta Ruang Sekolah.

64 6. Halaman Pengajar Merupakan halaman yang menampilakan data guru dan pegawai yang mengajar di SMA Swasta Eria Medan, seperti data guru / pegawai, data guru mangajar, serta mancari data guru / pegawai, yang terdiri dari nama guru, nip, golongan, jabatan, bidang studi, pendidikan terakhir, tahun tamat. 7. Halaman Siswa Merupakan halaman yang berisikan tata tertib siswa SMA Swasta Eria Medan. Halaman ini juga berisikan link-link yang akan menghubungkan user ke halaman yang berhubungan dengan kesiswaan, yaitu. a. Ekstrakurikuler siswa b. Informasi siswa c. Pendaftaran member d. Penerimaan PMP e. Nilai sisiwa-siswi 8. Halaman Buku Tamu Merupakan halaman yang digunakan untuk pegunjung dalam pengisian komentar yang terlebih dahulu melakukan login atau pun pendaftaran member sehingga dapat ditulis secara langsung oleh para siswa SMA Swasta Eria Medan.

65 9. Halaman Alumni Merupakan halaman yang menampilakan tentang data alumni, pencarian data alumni, pendaftaran alumni yang terdiri dari nama alumni, tempat dan tanggal alumni, alamat, telepon, kota, angkatan, pekerjaan dan alumni 10. Halaman Admin Halaman admin berisikan login yang menghubungkan ke halaman administrator. Halaman administrator adalah halaman khusus yang hanya dapat diakses oleh seorang admin untuk melakukan pengaturan website seperti menambah, menghapus dan mengubah data. 4.4 Bagan Alur Flowchart Di dalam situs SMA Swasta Eria Medan, terdapat alur-alur akitivitas yang dapat kita gambarka dalam bentuk flowchart. Berikut ini adalah bentuk-bentuk flowchart yang didapat dari situs SMA Swasta Eria Medan. a. Flowchart Menu Utama Seorang pengujung dapat mengakses web SMA Swasta Eria Medan dana dapat berpindah halaman web menuju halaman lain. Masing-masing halaman utama memiliki link-link yang dapat dipilih oleh pengunjung kecuali halaman admin. Flowchart Menu Utama dapat dilihat pada Gambar 4.6 di bawah ini:

66 START Tampilan Website Tampilan Menu Home ya Pilih link yang ada A tidak Login siswa ya Form login B Profil tidak ya Pilih link yang ada C Pengajar tidak ya Pilih link yang ada D Siswa tidak ya Pilih link yang ada E Bukutamu tidak ya Tampilan Bukutamu Alumni tidak ya Pilih link yang ada F Admin tidak ya Form Admin G tidak Keluar END tidak Gambar 4.6 Alur Flowchart Menu Utama b. Flowchart Login Siswa Halaman login siswa hanya dapat diakses oleh siswa/pihak sekolah yang dimiliki username dan password. Pada halaman ini terdapat dua buah hak akses yaitu hak

67 akses sebagai siswa dan hak akses sebagai pihak sekolah. Namun jika username dan password salah maka penggna akan kembali ke halaman from login siswa ataupun belum terdaftar sebagai member. Flowchart login siswa dapat dilihat pada Gambar 4.7 di bawah ini: B Pilih Login Siswa F Username &Password tidak Status = Siswa Status = Sekolah Form Admin ya Halaman Daftar Member/Siswa Halaman Admin Edit Data Pribadi ya Prosedur Edit Data Hapus Member tidak ya Halaman Komentar Siswa Hapus Komenetar Tilis Komentar Data Disimpan tidak Lihat Komentar tidak Logout B Gambar 4.7 Alur Flowchart Login Siswa

68 c. Flowchart Admin Halaman Admin hanya diakses oleh seorang yang berhak mengaksesnya. Username dan password dari seorang administrator harus sesuai dengan data yang ada pada tabel admin. Jika username dan password sesuai, maka seorang admin dapat mengakses halaman administrator, namun jika proses gagal maka pengguna akan kembali ke halaman form admin. Flowchart dapat dilihat pada Gambar 4.8 dibawah ini:

69 B Buka Halaman admin Halaman Administrator & Passwor Status = Admin ya Tampilan Halaman Administrator tidak Administrator & Password Salah Tambah Data Prosedur Tambah Data H Ubah Data tidak Prosedur Ubah Data I tidak Hapus Data Prosedur Hapus Data J Logout tidak A ya Gambar 4.8 Alur Flowchart Admin

70 d. Flowchart Tambah Data H Prosedur Tambah Data Form Tambah data tidak Simpan ya Simpan Data Data Sudah Disimpan e. Flowchart Ubah Data Gambar 4.9 Alur Flowchart Tambah Data I Prosedur Ubah Data Form Ubah data tidak Ubah ya Simpan Data Data Sudah Disimpan Gambar 4.10 Alur Flowchart Ubah Data

71 f. Flowchart Ubah Data J Prosedur Hapus Data Form Hapus data tidak Hapus ya Simpan Data Data Sudah Dihapus Gambar 4.11 Alur Flowchart Hapus Data 4.5 Mempersiapkan Database Server Pada tahapan ini dipersiapkan tempat untuk menampung data di server, data tersebut nantinya akan diproses oleh program yang kita buat pada tahap pemrograman, baik penambahan, pengeditan, panghapusan dan menampilkan isi database ke halaman website. Database terdiri atas tabel-tabel yang dibuat dengan menggunakan program MySQL. Adapun database yang dibuat oleh penulis adalah database SMA Swasta Eria Medan dengan tabel-tabel sebagai berikut:

72 Tabel 4.1 Admin Field Jenis id user_admin pass_admin int(10) varchar(40) varchar(20) Tabel 4.2 Alumni Field Jenis No Nama Ttglahir Alamat Phone Kota Tamat Pekerjaan int(11) varchar(25) varchar(40) Text Varchar(15) Varchar(30) Varchar(20) Varchar(30) Varchar(15) Tabel 4.3 Daftar Field no_sis nama nomor Jenis int(10) varchar(50) varchar(10)

73 jkelamin varchar(15) kelas_siswa varchar(10) username password varchar(50) varchar(30) Tabel 4.4 Guru / Pegawai Field id_guru nama nip gol jabatan bid_studi strata thn_tmt Jenis int(11) varchar(50) varchar(15) varchar(5) varchar(20) varchar(50) varchar(30) varchar(7) Tabel 4.5 Mengajar Field id_guru kls jml_jam Jenis int(11) varchar(20) varchar(20) Tabel 4.6 Pengunjung Field Jenis

74 no nama komentar int(10) varchar(50) longtext Tabel 4.7 Sekolah Field Jenis no nama_ruang int(5) varchar(40) jumlah_ruang varchar(2) keterangan text Tabel 4.8 PMP Field Jenis id nama pt golongan jurusan int(20) char(200) char(200) char(200) varchar(200) Tabel 4.9 Event Field nama waktu info Jenis char(50) char(50) char(250)

75 Tabel 4.10 Artikel Field Jenis no judul nama tanggal Isi_artikel int(20) varchar(50) varchar(30) varchar(20) text Tabel 4.11 Nilai Field nama nis kelas agama bio ind ing jerman jepang perancis akun eko fis geo Jenis char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50)

76 ktk mate kim penjas ppkn sejarah sos komp jlh rata rank char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) char(50) 4.6 Normalisasi Database Normalisasi dipakai sebagai metodologi untuk menciptakan struktur tabel (relasi) dalam basis data dengan tujuan untuk mengurangi kemubaziran data, normalisasi terkadang hanya dipakai sebagai perangkat vertifikasi terhadap tabal-tabel yang dihasilkan metodologi lain. Normalisasi memberikan panduan yang sangat membantu bagi pengembang untuk mencegah penciptaan struktur tabel yang kurang fleksibel atau mengurangi ketidakefisien.

77 1. Penormalan data Siswa dan Nilai Terdapat tabel SISWA yang terdiri dari data NAMA, NIS, JENIS KELAMIN, KELAS yang menyatakan data siswa. NAMA NIS KELAS JENIS KELAMIN Atoy IPA-1 Laki-laki Ijal IPA-1 Laki-laki Fikri IPA-1 Laki-laki Naldi IPA-1 Laki-laki Tabel 4.12 Data SISWA Terdapat tabel NILAI yang terdiri dari data NAMA, NIS, JENIS KELAMIN, KELAS yang menyatakan data siswa NAMA NIS KELAS RATA-RATA NILAI RANKING Atoy IPA Ijal IPA Fikri IPA Naldi IPA Tabel 4.13 Data NILAI Terjadinya tabel relasi SISWA_NILAI yang mengandung data NAMA, NIS, JENIS KELAMIN, KELAS yang menyatakan data siswa, RATA NILAI dan PERINGKAT yang menyatakan rata-rata nilai dan rangking siswa.

78 NAMA NIS KELAS JENIS KELAMIN RATA NILAI PERINGKAT Atoy IPA-1 Laki-laki Ijal IPA-1 Laki-laki Fikri IPA-1 Laki-laki Naldi IPA-1 Laki-laki Tabel 4.14 Relasi SISWA_NILAI 2. Penormalan data Guru dan Mangajar Terdapat tabel GURU yang terdiri dari data NAMA, NIP, GOLONGAN, JABATAN, BIDANG STUDI, STRATA, TAHUN TAMAT yang menyatakan data guru. NAMA NIP GOLONGAN JABATAN BIDANG STUDI STRATA Drs. As ari IV/A Wakepsek Kewarganegaraan Drs Dra.Hj. Mulyana IV/A Sekretaris Sosial Dra H. Martono, S.Pd V/B Guru Matematika S3 Rieka,S.Pd V/B Guru Bhs. Indonesia S3 Tabel 4.15 Data GURU Terdapat tabel MENGAJAR yang terdiri dari data JUMLAH JAM MENGAJAR, KELAS yang menyatakan data mengajar.

79 JUMLAH JAM MENGAJAR KELAS 20 jam XII IA 14 dan 8 jam X dan XII IS 30 jam XII IA 20 dan 20 jam XI IS dan XI IA Tabel 4.16 Data MENGAJAR Terjadi relasi GURU_MENGAJAR yang mengandung data NAMA, NIP, BIDANG STUDI, MENGAJAR yang menyatakan data guru, JUMLAH JAM dan KELAS yang menyatakan jumlah jam mengajar dan kelas diajarkan. NAMA NIP BIDANG STUDI JUMLAH JAM MENGAJAR KELAS Drs. As ari Kewarganegaraan 20 jam XII IA Dra.Hj. Mulyana Sosial 14 dan 8 jam X dan XII IS H. Martono, S.Pd Matematika 30 jam XII IA Rieka,S.Pd Bhs. Indonesia 20 dan 20 jam XI IS dan XI IA Tabel 4.17 Relasi GURU_MANGAJAR 4.7 Kamus Data Kamus Data (KD) atau atau Data Dictionary (DD) atau disebut juga dengan istilah sistem data dictionary adalah katalog fakata tentang data kebutuhan-kebutuhan informasi dari suatu sistem informasi dari suatu sistem informasi. Dengan menggunakan kamus data analis sistemdapat mendefenisikan data yang mengalir di sistem dengan lengkap. Kamus data dibuat pada tahap analisis sistem dan digunakan baik pada analisis maupun pada tahap perancanagan sistem.

80 a. Tabel Admin = {user_admin + pass_admin b. Tabel Alumni = {Nama + Ttglahir + Alamat + Phone + Kota + Tamat + Pekerjaan + c. Tabel Daftar = {nama + nomor + jkelamin + kelas_siswa + username + password d. Tabel Guru / Pegawai = {nama + nip + gol + jabatan + bid_studi + strata + thn_tmt e. Tabel Mengajar = {kls + jml_jam f. Tabel Pengunjung = {nama + komentar g. Tabel Sekolah = {nama_ruang + jumlah_ruang + keterangan h. Tabel PMP = {nama + pt + golongan + jurusan i. Tabel Event = {nama + waktu + info j. Tabel Nilai = {nama + nis + kelas + agama + bio + ind + ing + jerman + jepang + perancis + akun + eko + fis + geo + ktk + mate + kim + penjas + ppkn + sejarah + sos + komp + jlh + rata + rank 4.8 Design Website Design web diawali dengan mulai pembuatan halaman intro atau index dan selanjutnya membuat halaman-halaman link yang berhubungan antara halaman web dengan halaman yang lain.

81 4.8.1 Mendesign Halaman Intro Website Dalam pendesaian halaman intro website, penulis menggunakan software Adobe Photoshop CS3 dan Swish. Halaman intro adalah halaman pembuka yagn berupa animasi dan gambar yang dibuat sedemikin rupa agar website terlihat lebih menarik. Gambar yang ditampilkan pada halaman intro adalah gambar sekolah SMA Swasta Eria Medan, simbol/lambang sekolah serta gambar-gambar kegiatan yang dilaksanakan pada SMA Swasta Eria Medan. Adapun tampilan halaman intro website seperti ditunjukan gambar 4.12 sebagai berikut: Gambar 4.12 Design Halaman Intro Website

82 4.8.2 Mendesain Layout/Header Salah satu faktor agar website banyak dikunjungi para pengunjung adalah desain layout yang bagus. Desain Layout dibentuk oleh gambar-gambar dan teks-teks yang menarik. Dalam membuat desain header pada situs sekolah SMA Swasta Eria Medan, penulis menggunakan software Adobe Photoshop CS3 dan ACDsee sebagai media pengolah gambarnya. Adapun langkah-langkah yang penulis lakukan dalam mendesain layout adalah sebagai berikut: a. Membuat dokumen baru dengan ukuran panjang 1024 pixel dan lebar 218 pixel. Kemudian mengisi warna gambar background dengan warna hijau transparan. b. Dengan memanfaatkan tool-tool yang ada di Photoshop seperti filter tool, artistic tool, dan neon glow tool dan mengunaka ACDsee seperti add text tool dengan kreasi penulis, dibentuk suatu layout/header seperti gambar berikut ini: Gambar 4.13 Layout/Header Website Edit Pakai Photoshop

83 4.9 Membangun Halaman Website Adapun halaman - halaman yang dibangun oleh penulis adalah: a. Halaman index.php, merupakan halaman yang pertama kali muncul pada saat website dibuka. Halaman ini berisikan artikel dan link-link menuju halaman berikutnya. b. Halaman data_guru.php, merupakan halaman yang berisikan tentang data guru dan pegawai di SMA Swasta Eria Medan. c. Halaman profil.php, sejarah_sklh.php, visimisi.php, organ_sklh.php, fasilitas.php dan ruang.php, merupakan halaman yang memberikan informasi mengenai profil, kata sambutan, sejarah sekolah, visi dan misi sekolah serta fasilitas dan ruang dari SMA Swasta Eria Medan. d. Halaman alumni.php, merupakan halaman yang diperuntukan bagi alumni SMA Swasta Eria Medan. Pada halaman ini para alumni yang sedang membuka website ini dapat mengisi biodata dan dapat melihat alumni lain yang telah mendaftar e. Halaman daftar.php, merupakan halaman ynag digunakan untuk mendaftar sebagai anggota di website ini. Dengan mendaftar di website ini user dapat menulis artikel.

84 f. Halaman admin.php, merupakan halaman yang hanya dapat diakses oleh admin untuk melakukan pengaturan seperti menghapus atau mengubah artikel, alumni dan anggota serta menambah data guru baru. Tahap-tahap yang dilakukan penulis dalam membangun halaman website adalah sebagai berikut: 1. Membuka Macromedia Dreamweaver MX 2004 sebagai software pengatur letak layout dan penulisan skrip-skrip PHP dalam membangun halaman. Tampilannya dapat dilihat seperti gambar berikut ini: Gambar 4.14 Tampilan Macromedia Dreamweaver MX 2004

85 2. Mengatur letak layout dengan memanfaatkan tool dan perintah yang terdapat pada Macromedia Dreamweaver yaitu dengan meletakkan link-link, grafik, isi berita 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. Mengerjakan halaman-halaman berikutnya Mendefenisikan Website Pertama sekali yang perlu kita lakukan sebelum merancang situs yang akan kita buat agar semua file tertata rapi dan terkumpul pada satu dokumen maka kita perlu mendefenisikan sebuah website. Dreamweaver memberikan kemudahan bagi kita dalam manajemen file yang digunakan dalam membuat halaman web. Untuk itu kita perlu mendefenisikan sebuah web proyek yang baru kepada area kerja Dreamweaver. Untuk mendefenisikan situs baru, klik menu Site pilih Manage Site seperti yang terlihat dibawah ini :

86 Gambar 4.15 Window Manage site Setelah itu klik New pilih Site untuk menampilkan window yang berisi pengaturan site yang akan dibuat. Pilih tab Advanced pilih Category pilih Lokal Info untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web. Berikut ini adalah keterangannya : 1. Pada isian Site name, isikan nama proyek situs yang akan kita buat. Pada Tugas Akhir saya ini, saya memberi nama proyeknya dengan Eria. 2. Local root folder merupakan folder utama proyek kita. Beri centang pada Refresh local file list automatically agar file terbaru anda muncul di Dreamweaver.

87 Gambar 4.16 Window Site Definition 3 Default image folder merupakan folder tempat file-file gambar anda disimpan. Default images folder harus berada pada didalam Local root folder. 4. Jika kita telah memiliki domain isikan alamat domain kita di isian HTTP address agar semua link yang ada pada halaman web kita selalu dicek. 5. Enable cache memungkinkan Dreamweaver menggunakan temporary file ketika ketika kita mengetes halaman web yang kita buat (Preview in Browser) pada browser di komputer lokal. Fungsinya untuk mempercepat proses pengeksekusian file ke browser.

88 4.9.2 Penempatan Layout Situs Situs yang baik adalah situs yang memperhatikan nilai keindahan pada halamannya. Banyak situs yang mempergunakan halaman sederhana, tetapi kebanyakan juga situs yang menampilkan informasi, dengan tetap menghadirkan halaman dengan template yang indah sehingga menjadikan situs tersebut sering dikunjungi orang. Terkadang dengan pemakaian template / halaman pada sebuah situs, bisa jadi waktu untuk mengakses site tersebut menjadi agak lamban, ini disebabkan karena images pada halaman situs tersebut tidak dipotong-potong / dibagi menjadi ukuran file kecil. Pengelolaan situs yang benar adalah jika kita mempergunakan halaman / template dengan ukuran yang besar, perlu kita potong-potong / bagi, agar pengaksesan situsnya menjadi cepat. Berikut ini adalah gambar layout tata letak SMA Swasta Eria Medan dengan menggunakan editor web Dreamweaver MX 2004.

89 Gambar 4.17 Layout Web SMA Swasta Eria Medan Pembuatan layout pada Dreamweaver MX 2004, menggunakan fasilitas tabel untuk menempatkan images-images yang telah dibagi. Cara membuat tabel pada Dreamweaver banyak caranya, salah satunya adalah menggunakan menu Insert pada menu bar kemudian pilih Table. Selanjutnya akan tampil sebuah kotak dialog Table, kemudian tentukan jumlah baris tabel dan kolom tabel dengan memasukkan angka pada beberapa kotak teks yang sudah disediakan. Pada Situs SMA Swasta Eria Medan ini penulis menggunakan 2 kolom dan 4 baris. Dibawah ini adalah gambar kotak dialog tabel :

90 Gambar 4.18 Window Tabel Keterangan Pada Window Tabel : A. Bagian Table Size 1. Rows : Bagian yang digunakan untuk menentukan jumlah baris tabel. 2. Columns : Bagian yang digunakan untuk menentukan jumlah kolom tabel. 3. Width : Bagian yang digunakan untuk menentukan ukuran lebar tabel. dan satuan ukuran yang dipakai pixel atau persentase. 4. Border : Bagian yang digunakan untuk mengatur ketebalan border atau batas tabel.

91 5. Cell Padding : Bagian yang digunakan untuk mengatur jarak antara isi sel dengan batas isi sel. 6. Cell Spacing : Bagian yang digunakan untuk menentukan jarak antarsel dalam tabel. B. Bagian Header Digunakan untuk memberikan keterangan teks pada bagian tabel sesuai dengan pilihan yang tersedia. 1. None : Tanpa menggunakan keterangan teks. 2. Left : Menampilkan keterangan teks pada kolom pertama atau pada bagian sebelah kiri. 3. Top : Menampilkan keterangan teksa pada pertama atau pada bagian sebelah atas. 4. Both : Menampilkan keterangan teks pada kolom dan baris pertama. C. Bagian Accessbility Kita dapat memberikan keterangan judul tabel pada kotak teks Caption. Sedangkan untuk perataan teksnya kita dapat memilih dari daftar yang sudah disediakan pada kotak daftar Align Caption.

92 4.9.3 Jendela Perancangan Situs Dalam perancangan situs, kita pasti akan disibukan dalam menangani scripting dan design web yang telah kita buat. Untuk itu di lembar kerja Macromedia Dreamwaver MX 2004 ada 3 tabulasi jendela yang membantu kita dalam merancang situs yang kita buat.. 1. Jendela Code : Pada jendela ini kita hanya bisa menuliskan teks scripting pemrograman web, baik itu HTML, JavaScripts, PHP dan lainlain. 2. Jendela Split : Pada Jendela ini Dreamweaver memberikan kemudahan bagi kita dalam merancang situs, dengan membagi dua jendela pada lembar kerja yaitu Jendela Code dengan Jendela Design. 3. Jendela Design : Pada Jendela ini kita hanya bisa merancang situs tanpa bisa menuliskan scripting pemrograman web. Pada jendela design kita bisa menuliskan teks, menampilkan images, dan lain-lain. Apa yang kita buat di jendela design maka itulah yang akan kita lihat pada browsingnya atau yang dikenal dengan istilah WYSIWYG (What You See Is What You Get) Halaman Situs Pada jendela halaman utama atau yang sering juga dinamakan dengan file index memiliki 4 buah link. Link adalah suatu teks atau gambar yang dipakai dalam

93 dokumen HTML untuk melompat dari satu dokumen ke dokumen atau ketempat lain pada dokumen yang sama. Kita dapat menggunakan teks / images yang ada didalam halaman Web dan juga dapat membuat teks khusus untuk digunakan sebagai link. Untuk membuat link pada Dreamweaver MX 2004 dapat diikuti cara berikut : 1. Tempatkan kursor pada tempat kerja atau images yang ingin kita jadikan link. 2. Kemudian pada Properti Inspector pilih link dan pilih file yang ingin kita jadikan tempat tujuan dengan mengklik icon berbentuk folder. Berikut ini adalah contoh halaman index yang ditampilkan pada browser Internet Explorer. Gambar 4.19 Halaman Visi dan Misi Pada Situs

94 4.9.5 Penggabungan Scripts Dengan Layout Situs Mungkin karena kemudahan serta kecanggihan editor ini, membuatnya lebih banyak dipakai oleh para web desaigner dan web programming. Salah satu kemudahan yang dimiliki oleh Dreamweaver MX 2004 adalah dapat menggabungkan script program pada layout halaman situs. Penggabungan antara script pemrograman web dengan halaman situs seperti JavaScripts, PHP dan lain-lain dapat dengan menuliskan langsung scriptsnya pada tempat yang telah kita tentukan pada jendela Code atau pada jendela Split, atau dengan memanggil nama filenya saja yang terletak dalam satu dokumen. Dan ini hanya bisa dilakukan hanya untuk pemrograman Server Side seperti PHP. Untuk memanggil file PHP ( mis : photo.php ) untuk ditempatkan pada halaman situs, cukup dengan cara : 1. Tempatkan kursor pada tempat yang telah kita tentukan. 2. Pada Jendela Split, beralihlah pada bagian Code kemudian ketikkan <? include photo.php?> Membuat Pop-Up Menu Pop-Up Menu digunakan untuk membuat sebuah menu dengan banyak pilihan link yang langsung dapat diakses oleh pengunjung. Pop-Up Menu tidak memakan banyak tempat dan dapat dibuat bertingkat sehingga kita tidak perlu bingung untuk

95 menempatkan menu ini. Kita dapat menggunakan teks atau gambar (image) sebagai sarana untuk membuat menu ini. Sebelum kita membuat pop-up menu, ada baiknya kita persiapkan teks atau images sebagai penghubung pop-up menu. Dibawah ini adalah contoh gambar (image) sebagai penghubung pop-up menu: Gambar 4.20 Gambar Sebagai Link Penghubung Pop-Up Menu Adapun cara membuat pop-up menu pada Dreamweaver MX 2004 adalah sebagai berikut : 1. Pilih gambar yang dijadikan penghubung pop-up menu. Misalnya PROFIL 2. Pilih menu Window pilih Behaviors dan aktifkan panel Behaviors atau dapat juga digunakan dengan menekan kombinasi tombol Ctrl + F3. 3. Klik tanda pada panel Behaviors, kemudian pilih submenu Show Pop- Up Menu pada tampilan yang ada sehingga muncul tampilan kotak dialog Show Pop-Up Menu seperti dibawah ini:

96 Gambar 4.21 Window Content Show Pop-Up Menu 4. Pastikan kalau kita sudah berada pada tabulasi Contents. Pada bagian ini, isi dan pilih beberapa ketentuan berikut : a. Masukkan nama menu pada kotak Text b. Tentukan nama file yang akan dituju pada kotak Link. c. Tentukan target linknya pada kotak Target. Kita dapat memilih dan menentukan targetnya dengan mengklik panah bawah kotak Target. 5. Aktifkan tabulasi Appearance untuk mengubah tampilan menu pop-up menu, seperti gambar di bawah ini :

97 Gambar 4.22 Window Appearance Show Pop-Up Menu a. Vertical Menu atau Horizontal Menu digunakan untuk menampilkan menu dengan arah horizontal dan vertical. b. Pilih jenis dan ukuran font untuk teks menu pada kotak Font dan kotak Size. Tentukan pula style dan perataan dari teks menu. c. Up State digunakan untuk menentukan format teks beserta sel pada saat tidak dipilih. d. Over State digunakan untuk menentukan format teks beserta sel pada saat terpilih atau ditunjuk oleh pointer mouse. 6. Aktifkan tabulasi Advanced. Tab Advanced berfungsi untuk mengubah tampilan kotak menu pop-up.

98 Gambar 4.23 Window Advanced Show Pop-Up Menu a. Cell Width dan Cell Height, digunakan untuk menentukan lebar dan tinggi kotak pop-up menu. Jika kita menghendaki agar Dreamweaver mengaturnya secara otomatis, pilih Automatic. b. Cell Padding dan Cell Spacing digunakan untuk menentukan jarak antar sel dan jarak teks dengan sel. c. Tentukan penundaan waktu tampilan menu pada menu Delay. d. Jika kita ingin memberikan border pada kotak men, kita dapat memberikan centang pada kotak Pop-Up Borders.

99 e. Tentukan lebar border pada kotak Border Width, tentukan warna untuk border pada kotak Border Color, warna untuk bayangan menu pada kotak Shadow dan warna untuk sorot menu pada kotak Highlight. 7. Klik tabulasi Position untuk mengatur posisi pop-up menu. Lihat gambar dibawah ini : Gambar 4.24 Window Position Show Pop-Up Menu a. Pilih posisi pop-up menu dengan mengklik tombol pada Menu Position. Jika Anda ingin menentukan sendiri posisi pop-up menu, Anda dapat mengisikan pada kotak X dan Y.

100 b. Untuk menyembunyikan tampilan menu pop-up menu pada saat mouse melewati menu. Anda dapat memberikan tanda centang pada kotak Hide menu on onmouseout event. c. Untuk mengakhiri pembuatan Pop-Up Menu, tekan OK. Hasil dari menu yang dibuat dapat dilihat pada Jendela Browser Internet Explorer berikut ini : Gambar 4.25 Tampilan Pop-Up Menu pada Jendela Browser

101 BAB 5 IMPLEMENTASI SISTEM 5.1 Pengertian Sistem Informasi Sistem Informasi yang melibatkan komputer disebut sistem infomasi berbasis komputer, begitu juga dengan sistem informasi yang melibatkan web dikenal dengan sistem informasi berbasis web. Ada beragam defenisi dan pengertian dari sistem informasi, dari berbagai defenisi tersebut dapat disimpulkan bahwa Sistem Informasi mencakup sejumlah komponen (manusia, teknologi, informasi, dan prosedur kerja), ada sesuatu yang diproses (data menjadi informasi), dan dimaksudkan untuk mencapai suatu sasaran atau tujuan.

102 5.2 Sistem Informasi dan Pemakaian Komputer Sebenarnya sistem informasi telah ada sejak dulu, yang baru pada saat ini adalah komputerisasinya. Sebelum ada komputer, teknik sistem informasi manajemen telah ada untuk memberi manajer sistem informasi yang memungkinkan mereka merencanakan serta mengendalikan operasi. Pada saat ini, ketika segala urusan yang berkaitan pemakaian informasi sudah semakin rumit dan kompleks, maka mutlak diperlukan bantuan komputer. Ada 6 karakteristik komputer sebagai pengolah informasi sebagai alasan tepat dalam pemakaian komputer, yaitu : 1. Kecepatan. Dalam distribusi informasi dan pengolahan data, faktor kecepatan sangat dibutuhkan oleh manajemen. 2. Kapasitas. Volume data yang sangat besar bisa diolah dengan cepat. 3. Repetitif. Dalam pengolahan data yang memiliki prosedur sama, pengolahan dengan komputer akan memakan waktu yang singkat. 4. Input yang pasti. Komputer membutuhkan input yang pasti, karenanya intuisi dan pertimbangan bukanlah merupakan atribut mesin. 5. Output yang akurat. Hasil yang sangat akurat bisa diperoleh dan hal ini tidak terpengaruh oleh kebosanan dan kelelahan.

103 5.3 Pengertian 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. 5.4 Tujuan Implementasi Sistem Tujuan Implementasi sistem 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.5 Instalasi Apache, PHP dan MySQL Dalam menginstalasi Apache, PHP dan MySQL dilakukan secara satu per satu. Adapun softwarenya dapat diperoleh dari situs untuk Apache, untuk PHP dan untuk MySQL. Tahap instalasinya dimulai dengan menginstalasi Apache, kemudian disusul dengan

104 menginstalasi PHP dan MySQL. Setelah instalasi selesai dilanjutkan dengan melakukan pengaturan konfigurasi yang diberikan setelah instalasi selesai. Namun hal ini memerlukan pengaturan yang sedikit rumit Mengkonfigurasi Apache, MySQL, dan PHP 1. Buka file httpd.conf yang berada di folder conf pada Apache. Kemudian tambahkan file yang bercetak tebal berikut di akhir baris file httpd.conf :... #<VirtualHost *:80> # ServerAdmin webmaster@dummy-host.example.com # DocumentRoot /www/docs/dummy-host.example.com # ServerName dummy-host.example.com # ErrorLog logs/dummy-host.example.com-error_log # CustomLog logs/dummy-host.example.com-access_log common #</VirtualHost> ScriptAlias /php/ "c:/php/" AddType application/x-httpd-php.php # For PHP 5

105 Action application/x-httpd-php "/php/php-cgi.exe" 2. Buka file php.ini di folder C:\WINDOWS dengan menggunakan notepad dan lakukan beberapa perubahan sebagai berikut: ; You should do your best to write your scripts so that they do not require ; register_globals to be on; Using form variables as globals can easily lead ; to possible security problems, if the code is not very well thought of. register_globals = On ; Directory in which the loadable extensions (modules) reside. extension_dir = "c:\php\ext" ;extension=php_filepro.dll extension=php_gd2.dll (hilangkan tanda ; di depan kalimat) ;extension=php_gettext.dll

106 ;extension=php_ifx.dll ;extension=php_imap.dll ;extension=php_interbase.dll ;extension=php_ldap.dll ;extension=php_mcrypt.dll ;extension=php_mhash.dll ;extension=php_mime_magic.dll ;extension=php_ming.dll ;extension=php_mssql.dll ;extension=php_msql.dll extension=php_mysql.dll (hilangkan tanda ; di depan kalimat) ;extension=php_mysqli.dll 3. Mengatur MySQL dengan cara Klik Start > Programs > MySQL > MySQL Server 5.0 > MySQL Instance Config Wizard. 4. Pilih Standard Configuration, Klik Next sampai ke Security Options. 5. Konfigurasi Apache 2.0, MySQL 5.0 dan PHP telah berhasil dan dapat dipergunakan.

107 5.5.2 Menjalankan Apache, MySQL, dan PHP Untuk Menjalankan ketiga software yang digunakan dapat dilakukan dengan cara sebagai berikut: 1. Untuk menjalankan Apache, Klik Start > Programs > Apache HTTP Server > Control Apache Server > Monitor Apache Servers. 2. Kemudian untuk melihat Apache telah ter-install dengan baik, tuliskan di URL. Jika telah berhasil akan terlihat seperti gambar berikut ini: Gambar 5.1 Uji Apache

108 3. Uji apakah PHP telah dapat dijalankan dengan cara tuliskan script berikut pada notepad : <?php phpinfo();?> Simpan dengan nama info.php dan letakkan di folder htdocs pada Apache. 4. Buka internet explorer dan tulis di URL address. Jika berhasil akan tampil sebagai berikut: Gambar 5.2 Uji PHP 5. Uji apakah MySQL telah dapat dijalankan dengan cara jalankan command prompt dan ketikan seperti gambar berikut:

109 Gambar 5.3 Uji MySQL 6. Maka Apache, MySQL dan PHP telah dijalankan Pengujian Website di Browser Setelah selesai mengerjakan semua halaman website yang dibuat, maka website tersebut harus di uji terlebih dahulu di browser sebelum di-upload di internet. Adapun cara menguji website di browser sebagai berikut: 1. Simpan website yang telah dibuat pada folder htdocs yang terdapat pada apache dalam folder tersendiri, misalnya C:\Program Files\Apache Group\Apache2\htdocs\eria. 2. Buka internet explorer kemudian ketikan pada URL. Jika berhasil akan tampil seperti berikut ini:

110 Gambar 5.4 Halaman Index Website SMA Swasta Eria Medan 5.8 Pemeliharaan Web Setelah situs web kita telah selesai dibuat dan telah kita hosting (berjalan online), maka perlu kiranya bagi kita untuk memperbarui (update), menjaga, dan mengawasi situs mulai dari halaman web sampai pada data-data yang ada di server dari ancaman dan serangan yang mungkin dapat terjadi.

111 5.9 Memperbarui Web Memperbarui situs web adalah salah satu cara untuk mempertahankan situs agar tetap dikunjungi oleh pengunjung. Dalam memperbarui situs kita harus melihat dan mengetahui apa yang sekiranya dibutuhkan oleh pengunjung. Ada beberapa hal yang dapat kita lakukan dalam memperbarui web kita yaitu : 1. Memperbarui Isi Web Suatu situs web yang baik akan selalu memperbarui isi (content) dengan baik. Dengan semakin seringnya content diperbarui (ditambah, diganti, dikoreksi) menunjukkan kepada pengunjung situs bahwa situs kita memang benar-benar terpelihara. 2. Mengubah Tampilan Desain Web Situs dengan wajah baru dapat menyegarkan rasa bosan pengunjung terhadap situs yang telah kita buat. Mengubah desain situs web sangat disarankan terutama jika situs web kita banyak dikunjungi dan memiliki banyak artikel didalamnya. 2. Menambah Fitur-Fitur Yang Menarik Dari berbagai teknologi web yang telah dikenal maka kita dapat membuat layanan atau fitur khusus dari situs web yang dapat menarik hati pengunjung dengan pelayanan atau fasilitas yang disediakan kemudian membuat mereka penasaran dan mengeksplorasi lebih lanjut situs web kita. Karena mungkin pengunjung akan senang dengan inovasi yang kita terapkan pada situs kita.

112 BAB 6 KESIMPULAN DAN SARAN 6.1 Kesimpulan Dalam penulisan Tugas Akhir ini telah diuraikan bagaimana perancangan sistem dalam pembangunan web SMA Swasta Eria Medan. Maka dapat penulis simpulkan : 1. Situs SMA Swasta Eria Medan ini dapat menyediakan sarana sistem informasi online sekolah itu sendiri yang menginformasi tentang profil sekolah, sejarah, fasilitas, visi dan misi. 2. Situs SMA Swasta Eria Medan memberikan informasi yang berkaitan dengan data yang diperoleh penulis yang menampilkan data-data guru/pegawai, data kesiswaan, yaitu mencatak data nilai siswa dan serta data-data para alumni 3. Dalam penggunaan sistem informasi yang benar akan menghasilkan kemudahan dalam melakukan suatu pencarian informasi yang dibutuhkan.

113 6.2 Saran 1. Senantiasa menjaga dan memperbarui situs SMA Swasta Eria Medan ini agar pengunjung tidak merasa bosan dan bisa menerima informasi-informasi terbaru mengenai SMA Swasta Eria Medan. 2. Perkembangan situs situs SMA lain, kiranya memberikan pengaruh baik bagi pembuat dan pengelola situs dalam menciptakan dan meng-update situs SMA Swasta Eria Medan. 3. Pemeliharaan keamanan terhadap data-data pada server perlu diperhatikan dan dijaga agar data-data pada server tidak bisa diakses oleh orang yang tidak berhak mengaksesnya.

114 DAFTAR PUSTAKA Kadir, Abdul Basis Data. Yogyakarta : Andi. Mutmainah, Siti, Lukmanul Hakim Membuat Grafik Web yang Menarik dengan Photoshop. Jakarta : PT Elex Media Komputindo. Peranginangin, Kasiman Aplikasi Web dengan PHP dan MySQL. Yogyakarta : Andi. MADCOMS Aplikasi Manajemen Database Pendidikan Berbasis Webdengan PHP dan MySQL. Madiun : Andi. MADCOMS Aplikasi Program PHP dan MySQL Untuk Membuat Website Interaktif. Madiun : Andi. MADCOMS Membuat Aplikasi Database Karyawan Online Berbasis Web dengan PHP dan MySQL. Madiun : Andi. MADCOMS Seri Panduan Lengkap Macromedia Dreamweaver. Madiun : Andi.

115 LAMPIRAN LISTING PROGRAM

116 LAMPIRAN A LISTING PROGRAM File Index <!DOCTYPE html PUBLIC <html> <head> <script language="javascript"> <!-- function validate() { if(document.form1.username.value=="") { alert ("Username Siswa / Member Belum Diisi") return false if(document.form1.password.value=="") { alert("password Siswa / Member Belum Diisi") return false //--> <!-- Begin var ver = navigator.appversion; var dom = document.getelementbyid? 1 : 0; var ie5 = (ver.indexof("msie 5") > -1 && dom)? 1 : 0; var n = (document.layers); var ie = (document.all); var sparksaflyin = 0; var totalsparks = 0; var sparkson = 1; function initmouseevents() { document.onmousedown = mousedown; if (n) document.captureevents(event.mousedown Event.MOUSEMOVE); function mousedown(e) { if (sparkson) { var mousex = (n)? e.pagex : event.x+document.body.scrollleft; var mousey = (n)? e.pagey : event.y+document.body.scrolltop; if (!sparksaflyin) { for (var k = 0; k <= 9; k++) eval('show("sdiv'+k+'")'); sparksaflyin = 1; totalsparks = 0; for(i = 0;i <= 9; i++) eval('moveto('+i+',0,'+mousex+','+mousey+')'); function moveto(i,j, mousex, mousey){ if (j < eval('anim_'+i+'_x.length') ){ var tempx = eval('anim_'+i+'_x[j]+mousex'); var tempy = eval('anim_'+i+'_y[j]+mousey');

117 if (ie) { if(tempy+30 > (document.body.offsetheight+document.body.scrolltop)) tempy = document.body.offsetheight+document.body.scrolltop-30; if(tempx+30 > (document.body.offsetwidth+document.body.scrollleft)) tempx = document.body.offsetwidth+document.body.scrollleft-30; eval('document.all.sdiv'+i+'.style.left = tempx;'); eval('document.all.sdiv'+i+'.style.top = tempy;'); if (n) { eval('document.layers.sdiv'+i+'.left = tempx;'); eval('document.layers.sdiv'+i+'.top = tempy;'); j++; // timeout: 50 = fireworks speed, larger number = slower speed settimeout("moveto("+i+","+j+","+mousex+","+mousey+")",50) else { eval('hide("sdiv'+i+'")'); totalsparks++; if (totalsparks == 10) { sparksaflyin = 0; totalsparks = 0; function SHOW(divName){ if (document.all) eval('document.all.'+divname+'.style.visibility = "visible";'); else if (document.layers) eval('document.layers["'+divname+'"].visibility = "visible";'); function HIDE(divName){ if (document.all) eval('document.all.'+divname+'.style.visibility = "hidden";'); else if (document.layers) eval('document.layers["'+divname+'"].visibility = "hide";'); anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0); anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80); anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181); anim_1_y=new Array(-20,-20,-33,-38,-38,-27,- 2,25,51,84,113,141,162,212,253); anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18); anim_2_y=new Array(-20,-20,-33,-38,-38,-27,- 2,25,51,84,113,141,162,212,253); anim_3_x=new Array(-20,-20,-2,- 1,7,10,18,35,60,102,94,94,93,97,108,111,117,127); anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,- 151,-101,-66,-17,27,87,140,189); anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,- 209,-191,-207,-203,-213,-202,-221,-211); anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,- 149,-134,-89,-60,8,51,107,157,201); anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,- 247,-270,-279,-282,-283,-283,-285,-286,-288); anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,- 169,-120,-44,-8,40,87,144,190,248); anim_6_x=new Array(-20,-20,- 7,14,44,79,143,186,217,226,234,244,250,259,265,274);

118 anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,- 3,54,134,187,215,257); anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,- 136,-150,-160,-164,-168,-171,-172,-172,-176,-175); anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,- 240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68); anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,- 11,16,49,64,81,93,100,103,109); anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,- 180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188); anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,- 277,-281,-287); anim_9_y=new Array(-20,-20,-35,-37,-34,- 16,10,47,105,150,189,227,273); // End --> </script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>situs Web SMA Swasta Eria Medan</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script language="javascript"> <!-- function mmloadmenus() { if (window.mm_menu_ _0) return; window.mm_menu_ _0 = new Menu("root",115,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("visi dan Misi","window.op en('visimisi.php', '_self');"); mm_menu_ _0.addmenuitem("ruang Sekolah","window.open('r uang.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#666666'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",140,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("kata Sambutan","window.open('i ndex.php', '_self');"); mm_menu_ _0.addmenuitem("sejarah Sekolah","window.open( 'sejarah_sklh.php', '_self');"); mm_menu_ _0.addmenuitem("visi Dan Misi","window.op en('visimisi.php', '_self');"); mm_menu_ _0.addmenuitem("organisasi Sekolah","window.op en('organ_sklh.php', '_self');"); mm_menu_ _0.addmenuitem("fasilitas Sekolah","window.ope n('fasilitas.php', '_self');");

119 mm_menu_ _0.addmenuitem("ruang Sekolah","window.open('r uang.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",180,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("data Guru dan Pegawa i","window.open('data_guru.php', '_self');"); mm_menu_ _0.addmenuitem("data Guru Mengajar","loca tion='gurumengajar1.php'"); mm_menu_ _0.addmenuitem("cari Data Guru /&nbs p;pegawai","window.open('search.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",205,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("ekstrakurikuler Siswa","window.open('ekstrakurikuler.php', '_self');"); mm_menu_ _0.addmenuitem("informasi Siswa","window.open( 'info.php', '_self');"); mm_menu_ _0.addmenuitem("daftar Siswa / Membe r","window.open('daftar.php', '_self');"); mm_menu_ _0.addmenuitem("siswa Penerima PMP","wind ow.open('pmp.php', '_self');"); mm_menu_ _0.addmenuitem("nilai Siswa/Siswi SMA&nbs p;eria","window.open('carinilai.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",142,18,"",12,"#FFFFFF","#FFFFFF","#65CA00","#50E800","lef t","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("data Alumni","window.open('daf taralumni.php', '_self');"); mm_menu_ _0.addmenuitem("cari Data Alumni","window.open('searchalumni.php', '_self');");

120 mm_menu_ _0.addmenuitem("pendaftaran Alumni","window.op en('alumni.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#ffffff'; mm_menu_ _0.menuborderbgcolor='#ffffff'; mm_menu_ _0.writemenus(); // mmloadmenus() //--> </script> <script language="javascript" src="mm_menu.js"></script> <style type="text/css"> <!--.style1 {color: # style6 { color: #6BC22A; font-weight: bold;.style7 {color: #6BC22A.style8 { font-size: 16px; color: #B64074;.style10 {font-size: 12px; color: #FFC734;.style11 {color: #FFFFFF body { background-image: url(images/img24.jpg); --> </style> </head> <BODY OnLoad="initMouseEvents()"> <script language="javascript1.2">mmloadmenus();</script> <div id="sparks"> <div id="sdiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div> <div id="sdiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div> <div id="sdiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue">.</font></div> <div id="sdiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div> <div id="sdiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange">.</font></div> <div id="sdiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div> <div id="sdiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="green">.</font></div> <div id="sdiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">.</font></div> <div id="sdiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div> <div id="sdiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div> </div> <div id="header"> <div id="menu">

121 <div id="menu_list"><a href="#" name="link8" id="link1" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 8')" onmouseout="mm_starttimeout();">profil</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#" name="link9" id="link3" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 9')" onmouseout="mm_starttimeout();">pengajar</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#" name="link7" id="link5" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 7')" onmouseout="mm_starttimeout();">siswa</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="bukan_tamu.php" target="_self">tamu</a> <img src="images/splitter.gif" class="splitter" alt="" /><a href="index.php" name="link2" target="_self" id="link6" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 2')" onmouseout="mm_starttimeout();">alumni</a></div> </div> </div> <div id="logo"> </div> <div id="main"> <div id="sidebar"> <p align="right"> <? include 'date.php'?> </p> <p> <marquee behavior="scroll" direction="left" class="style3"> Selamat Datang Di Homepage SMA Swasta Eria Medan </marquee> </p> <form name="form1" method="post" action="valid_login.php" onsubmit="return validate()"> <table width="234" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#ffc734"> <tr bgcolor="#1e1e1e"> <td colspan="2" bordercolor="#ff9900" bgcolor="#1ab800"><div align="center" class="style4 style1"><strong>login SISWA / MEMBER</strong></div></td> </tr> <tr> <td width="112"> <span class="style4"> <span class="style11 style5"><strong>username</strong></span></span></td> <td width="172"><input name="username" type="text" id="username" /></td> </tr> <tr> <td> <span class="style11 style5"><strong>password</strong></span></td> <td><input type="password" name="password" id="password" /></td> </tr> <tr> <td> </td> <td><input type="submit" name="submit" value="login" /> <input type="reset" name="reset" value="batal" /></td> </tr> </table> <table width="235" border="0" align="center" cellpadding="2" cellspacing="1">

122 <tr> <td><p><a href="daftar.php" target="_self" title= 'Daftar Siswa / Member Baru Klik Disini'>DAFTAR SISWA MEMBER BARU</a> </p> <p> </p> <p align="center"><a href="admin.php" class="style7 style8">administrator</a></p></td> </tr> </table> </form> <div align="center"> <p> <?php include'counter.php';?> </p> <p> <marquee direction="up" height="120" width="120" align="top" behavior="scroll" scrollamount="5" scrolldelay="75" > <?php include "gambar.php";?> </marquee> </p> <p class="style6"><a href="lihatartikel.php" target="_self" class="style10">artikel SISWA </a> </p> <p> <?php include "huruf.php";?> </p> </div> </div> <div id="text" > <h1><strong>selamat DATANG </strong></h1> <p>ini adalah website resmi <strong>sekolah Menegah Atas Swasta Eria Medan</strong>. Website ini menyajikan berbagai informasi seputar sekolah ini. Data yang disajikan meliputi : </p> <ul> <li>informasi siswa. </li> <li>informasi seputar pengajar dan juga pegawai. </li> <li>sejarah Sekolah.</li> <li>visi dan Misi sekolah. </li> <li>fasilitas sekolah. </li> <li>organisasi sekolah. </li> </ul> <h1>kata SAMBUTAn</h1> <p> Assalamualaikum Wr..Wb </p> <p align="justify"> Syukur Puji Alhamdulillah kami panjatkan hanya kepada Allah SWT. Dengan hadirnya official homepage SMA Swasta Eria Medan ini moganya kita berharap perkembangan pendidikan yang demikian pesat dapat menjadi acuan kita dalam membina generasi bangsa dalam meningkatkan ilmu di bidang IT. Homepage ini sebagai media informasi memberikan kontribusi besar untuk semua kalangan masyarakat yang ada dilingkungan sekolah SMA Swasta Eria Medan baik Pihak Guru maupun seluruh Siswa yang ada. Untuk itu setiap kita hendaknya menjaga dan memelihara agar situs ini dapat kita pergunakan sebagaimana mestinya. <br /> <br /> Dengan tidak mengurangi rasa hormat saya, kami dari pihak sekolah mengucapkan terima kasih kepada adik Ridzal Arif. SMA Swasta Eria Medan, yang telah membuat dan memiliki andil besar dalam situs ini. Semoga situs buatan adik ini dapat dipergunakan dan dimanfaatkan oleh setiap pengunjung site ini. <br /> <br /> <br /> KEPALA SEKOLAH<br />

123 <br /> Drs.H.Khoirudin</p> </div> </div> <div id="footer"> <div id="left_footer"> Copyright SMA Swasta Eria Medan </div> <div id="right_footer"> Design by <strong><a href="profil_pembuat.php" target="_self">ridzal Arif</a></strong> </div> </div> </body> </html> File Daftar.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <script language="javascript"> <!-- function validate() { if(document.form1.username.value=="") { alert ("Username Siswa / Member Belum Diisi") return false if(document.form1.password.value=="") { alert("password Siswa / Member Belum Diisi") return false //--> <!-- Begin var ver = navigator.appversion; var dom = document.getelementbyid? 1 : 0; var ie5 = (ver.indexof("msie 5") > -1 && dom)? 1 : 0; var n = (document.layers); var ie = (document.all); var sparksaflyin = 0; var totalsparks = 0; var sparkson = 1; function initmouseevents() { document.onmousedown = mousedown; if (n) document.captureevents(event.mousedown Event.MOUSEMOVE); function mousedown(e) { if (sparkson) { var mousex = (n)? e.pagex : event.x+document.body.scrollleft; var mousey = (n)? e.pagey : event.y+document.body.scrolltop; if (!sparksaflyin) { for (var k = 0; k <= 9; k++) eval('show("sdiv'+k+'")'); sparksaflyin = 1; totalsparks = 0;

124 for(i = 0;i <= 9; i++) eval('moveto('+i+',0,'+mousex+','+mousey+')'); function moveto(i,j, mousex, mousey){ if (j < eval('anim_'+i+'_x.length') ){ var tempx = eval('anim_'+i+'_x[j]+mousex'); var tempy = eval('anim_'+i+'_y[j]+mousey'); if (ie) { if(tempy+30 > (document.body.offsetheight+document.body.scrolltop)) tempy = document.body.offsetheight+document.body.scrolltop-30; if(tempx+30 > (document.body.offsetwidth+document.body.scrollleft)) tempx = document.body.offsetwidth+document.body.scrollleft-30; eval('document.all.sdiv'+i+'.style.left = tempx;'); eval('document.all.sdiv'+i+'.style.top = tempy;'); if (n) { eval('document.layers.sdiv'+i+'.left = tempx;'); eval('document.layers.sdiv'+i+'.top = tempy;'); j++; // timeout: 50 = fireworks speed, larger number = slower speed settimeout("moveto("+i+","+j+","+mousex+","+mousey+")",50) else { eval('hide("sdiv'+i+'")'); totalsparks++; if (totalsparks == 10) { sparksaflyin = 0; totalsparks = 0; function SHOW(divName){ if (document.all) eval('document.all.'+divname+'.style.visibility = "visible";'); else if (document.layers) eval('document.layers["'+divname+'"].visibility = "visible";'); function HIDE(divName){ if (document.all) eval('document.all.'+divname+'.style.visibility = "hidden";'); else if (document.layers) eval('document.layers["'+divname+'"].visibility = "hide";'); anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0); anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80); anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181); anim_1_y=new Array(-20,-20,-33,-38,-38,-27,- 2,25,51,84,113,141,162,212,253); anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18); anim_2_y=new Array(-20,-20,-33,-38,-38,-27,- 2,25,51,84,113,141,162,212,253); anim_3_x=new Array(-20,-20,-2,- 1,7,10,18,35,60,102,94,94,93,97,108,111,117,127); anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,- 151,-101,-66,-17,27,87,140,189);

125 anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,- 209,-191,-207,-203,-213,-202,-221,-211); anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,- 149,-134,-89,-60,8,51,107,157,201); anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,- 247,-270,-279,-282,-283,-283,-285,-286,-288); anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,- 169,-120,-44,-8,40,87,144,190,248); anim_6_x=new Array(-20,-20,- 7,14,44,79,143,186,217,226,234,244,250,259,265,274); anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,- 3,54,134,187,215,257); anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,- 136,-150,-160,-164,-168,-171,-172,-172,-176,-175); anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,- 240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68); anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,- 11,16,49,64,81,93,100,103,109); anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,- 180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188); anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,- 277,-281,-287); anim_9_y=new Array(-20,-20,-35,-37,-34,- 16,10,47,105,150,189,227,273); // End --> </script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>pendaftaran Siswa / Member Situs Web SMA Swasta Eria Medan</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script language="javascript"> <!-- function mmloadmenus() { if (window.mm_menu_ _0) return; window.mm_menu_ _0 = new Menu("root",115,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("visi dan Misi","window.op en('visimisi.php', '_self');"); mm_menu_ _0.addmenuitem("ruang Sekolah","window.open('r uang.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#666666'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",140,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("kata Sambutan","window.open('i ndex.php', '_self');"); mm_menu_ _0.addmenuitem("sejarah Sekolah","window.open( 'sejarah_sklh.php', '_self');");

126 mm_menu_ _0.addmenuitem("visi Dan Misi","window.op en('visimisi.php', '_self');"); mm_menu_ _0.addmenuitem("organisasi Sekolah","window.op en('organ_sklh.php', '_self');"); mm_menu_ _0.addmenuitem("fasilitas Sekolah","window.ope n('fasilitas.php', '_self');"); mm_menu_ _0.addmenuitem("ruang Sekolah","window.open('r uang.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",180,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("data Guru dan Pegawa i","window.open('data_guru.php', '_self');"); mm_menu_ _0.addmenuitem("data Guru Mengajar","wind ow.open('gurumengajar1.php', '_self');"); mm_menu_ _0.addmenuitem("cari Data Guru /&nbs p;pegawai","window.open('search.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",205,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("ekstrakurikuler Siswa","window.open('ekstrakurikuler.php', '_self');"); mm_menu_ _0.addmenuitem("informasi Siswa","window.open( 'info.php', '_self');"); mm_menu_ _0.addmenuitem("daftar Siswa / Membe r","window.open('daftar.php', '_self');"); mm_menu_ _0.addmenuitem("siswa Penerima PMP","wind ow.open('pmp.php', '_self');"); mm_menu_ _0.addmenuitem("nilai Siswa/Siswi SMA&nbs p;eria","window.open('carinilai.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff';

127 window.mm_menu_ _0 = new Menu("root",142,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("data Alumni","window.open('daf taralumni.php', '_self');"); mm_menu_ _0.addmenuitem("cari Data Alumni","window.open('searchalumni.php', '_self');"); mm_menu_ _0.addmenuitem("pendaftaran Alumni","window.op en('alumni.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#ffffff'; mm_menu_ _0.menuborderbgcolor='#ffffff'; mm_menu_ _0.writemenus(); // mmloadmenus() //--> </script> <script language="javascript" src="mm_menu.js"></script> <style type="text/css"> <!-- body { background-color: #14A500;.style1 { font-size: 16px; color: #B64074;.style3 { font-size: 14px; font-family: Helios-Cond-Light;.style4 {color: # style5 { color: #CCCCCC; font-weight: bold;.style6 { font-size: 14px; font-weight: bold;.style7 {font-size: 16px --> </style> </head> <BODY OnLoad="initMouseEvents()"> <script language="javascript1.2">mmloadmenus();</script> <div id="sparks"> <div id="sdiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div> <div id="sdiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div> <div id="sdiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue">.</font></div> <div id="sdiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div>

128 <div id="sdiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange">.</font></div> <div id="sdiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div> <div id="sdiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="green">.</font></div> <div id="sdiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">.</font></div> <div id="sdiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div> <div id="sdiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div> </div> <div id="header"> <div id="menu"> <div id="menu_list"> <a href="#" name="link2" id="link1" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 2')" onmouseout="mm_starttimeout();">profil</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#" name="link8" id="link3" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 8')" onmouseout="mm_starttimeout();">pengajar</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#" name="link7" id="link5" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 7')" onmouseout="mm_starttimeout();">siswa</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="bukan_tamu.php" target="_self">tamu</a> <img src="images/splitter.gif" class="splitter" alt="" /><a href="index.php" name="link9" target="_self" id="link6" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 9')" onmouseout="mm_starttimeout();">alumni</a></div> </div> </div> <div id="logo"> </div> <div id="main"> <div id="sidebar"> <p align="right"> <? include 'date.php'?> </p> <p> <marquee behavior="scroll" direction="left" class="style3"> Selamat Datang Di Homepage SMA Swasta Eria Medan </marquee> </p> <form action="valid_login.php" method="post" name="form1" id="form1" onsubmit="return validate()"> <table width="234" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#ffc734"> <tr bgcolor="#1e1e1e"> <td colspan="2" bordercolor="#ff9900" bgcolor="#1ab800"><div align="center" class="style2 style4"><strong>login SISWA / MEMBER</strong></div></td> </tr> <tr> <td width="112"> <span class="style4"> <span class="style5">username</span></span></td> <td width="172"><input name="username2" type="text" id="username2" /></td> </tr>

129 <tr> <td> <span class="style5">password</span></td> <td><input type="password" name="password2" id="password2" /></td> </tr> <tr> <td> </td> <td><input type="submit" name="submit" value="login" /> <input type="reset" name="reset" value="batal" /></td> </tr> </table> <table width="235" border="0" align="center" cellpadding="2" cellspacing="1"> <tr> <td><p><a href="daftar.php" target="_self" title= 'Daftar Siswa / Member Baru Klik Disini'>DAFTAR SISWA MEMBER BARU</a> </p> <p> </p> <p align="center"><a href="admin.php" class="style1 style7">administrator</a></p></td> </tr> </table> </form> <div align="center"> <p> </p> <p> <marquee direction="up" height="120" width="120" align="top" behavior="scroll" scrollamount="5" scrolldelay="75" > <?php include "gambar.php";?> </marquee> </p> <p> </p> <p> <?php include "huruf.php";?> </p> </div> <p> </p> <div align="center"></div> </div> <div id="text" > <h1><strong>daftar siswa / member baru </strong></h1> <p> </p> <p>setiap siswa-siswi dapat menjadi anggota member dalam situs ini, dengan terlebih dahulu mendaftarkan diri pada situs ini. Isilah form registrasi ini dengan data yang benar! </p> <form name="form2" method="post" action="proses_daftar.php"> <table width="336" border="0" align="center" cellpadding="2" cellspacing="1"> <tr align="left" valign="top" bordercolor="#fddf5b" bgcolor="#fddf5b"> <td colspan="2" bgcolor="#1ab800"><div align="center" class="style6">registrasi SISWA / MEMBER </div></td> </tr> <tr align="left" valign="top" bordercolor="#fddf5b" bgcolor="#d2edfe"> <td width="132" bgcolor="#aee997"> Nama Lengkap </td> <td width="196" bgcolor="#aee997"><input name="nama" type="text" id="nama"></td> </tr>

130 <tr align="left" valign="top" bordercolor="#fddf5b" bgcolor="#d2edfe"> <td bgcolor="#aee997"> Nomor Induk</td> <td bgcolor="#aee997"><input name="nomor" type="text" id="nomor"></td> </tr> <tr align="left" valign="top" bordercolor="#fddf5b" bgcolor="#d2edfe"> <td bgcolor="#aee997"> Jenis Kelamin </td> <td bgcolor="#aee997"><select name="kelamin" size="1" id="kelamin"> <option>laki-laki</option> <option>perempuan</option> </select></td> </tr> <tr align="left" valign="top" bordercolor="#fddf5b" bgcolor="#d2edfe"> <td bgcolor="#aee997"> Kelas</td> <td bgcolor="#aee997"><select name="kelas" size="1" id="kelas"> <option>---</option> <option>x-1</option> <option>x-2</option> <option>x-3</option> <option>x-4</option> <option>x-5</option> <option>x-6</option> <option>x-7</option> <option>xi IA-1</option> <option>xi IA-2</option> <option>xi-ia-3</option> <option>xi-ia-4</option> <option>xi-ia-5</option> <option>xi-is-1</option> <option>xi-is-2</option> <option>xi-is-3</option> <option>xii IPA-1</option> <option>xii IPA-2</option> <option>xii IPA-3</option> <option>xii IPA-4</option> <option>xii IPA-5</option> <option>xii IPA-6</option> <option>xii IPA-7</option> <option>xii IPS-1</option> <option>xii IPS-2</option> <option>xii IPS-3</option> <option>xii IPS-4</option> </select></td> </tr> <tr align="left" valign="top" bordercolor="#fddf5b" bgcolor="#d2edfe"> <td bgcolor="#aee997"> Username </td> <td bgcolor="#aee997"><input name="username" type="text" id="username"></td> </tr> <tr align="left" valign="top" bordercolor="#fddf5b" bgcolor="#d2edfe"> <td bgcolor="#aee997"> Password </td> <td bgcolor="#aee997"><input name="password" type="password" id="password"></td>

131 </tr> <tr align="left" valign="top" bordercolor="#fddf5b" bgcolor="#d2edfe"> <td bgcolor="#aee997"> </td> <td bgcolor="#aee997"><input name="proses" type="submit" id="proses" value="daftar"> <input name="gagal" type="reset" id="gagal" value="batal"></td> </tr> </table> </form> </div> </div> <div id="footer"> <div id="left_footer"> Copyright SMA Swasta Eria Medan </div> <div id="right_footer"> Design by <a href="profil_pembuat.php" title="website Design" target="_self"><strong>ridzal Arif</strong></a> </div> </div> </body> </html> File Alumni.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <script language="javascript"> <!-- function validate() { if(document.form1.username.value=="") { alert ("Username Siswa / Member Belum Diisi") return false if(document.form1.password.value=="") { alert("password Siswa / Member Belum Diisi") return false //--> <!-- function validate1() { if(document.form2.nama.value=="") { alert ("Nama Siswa Belum Diisi") return false if(document.form2.nis.value=="") { alert("nomor Induk Siswa Belum Diisi") return false

132 if(document.form2.rata.value=="") { alert("nilai Rata-rata Siswa Belum Diisi") return false if(document.form2.rank.value=="") { alert("peringkat Siswa Belum Diisi") return false //--> <!-- Begin var ver = navigator.appversion; var dom = document.getelementbyid? 1 : 0; var ie5 = (ver.indexof("msie 5") > -1 && dom)? 1 : 0; var n = (document.layers); var ie = (document.all); var sparksaflyin = 0; var totalsparks = 0; var sparkson = 1; function initmouseevents() { document.onmousedown = mousedown; if (n) document.captureevents(event.mousedown Event.MOUSEMOVE); function mousedown(e) { if (sparkson) { var mousex = (n)? e.pagex : event.x+document.body.scrollleft; var mousey = (n)? e.pagey : event.y+document.body.scrolltop; if (!sparksaflyin) { for (var k = 0; k <= 9; k++) eval('show("sdiv'+k+'")'); sparksaflyin = 1; totalsparks = 0; for(i = 0;i <= 9; i++) eval('moveto('+i+',0,'+mousex+','+mousey+')'); function moveto(i,j, mousex, mousey){ if (j < eval('anim_'+i+'_x.length') ){ var tempx = eval('anim_'+i+'_x[j]+mousex'); var tempy = eval('anim_'+i+'_y[j]+mousey'); if (ie) { if(tempy+30 > (document.body.offsetheight+document.body.scrolltop)) tempy = document.body.offsetheight+document.body.scrolltop-30; if(tempx+30 > (document.body.offsetwidth+document.body.scrollleft)) tempx = document.body.offsetwidth+document.body.scrollleft-30; eval('document.all.sdiv'+i+'.style.left = tempx;'); eval('document.all.sdiv'+i+'.style.top = tempy;'); if (n) { eval('document.layers.sdiv'+i+'.left = tempx;'); eval('document.layers.sdiv'+i+'.top = tempy;'); j++; // timeout: 50 = fireworks speed, larger number = slower speed settimeout("moveto("+i+","+j+","+mousex+","+mousey+")",50)

133 else { eval('hide("sdiv'+i+'")'); totalsparks++; if (totalsparks == 10) { sparksaflyin = 0; totalsparks = 0; function SHOW(divName){ if (document.all) eval('document.all.'+divname+'.style.visibility = "visible";'); else if (document.layers) eval('document.layers["'+divname+'"].visibility = "visible";'); function HIDE(divName){ if (document.all) eval('document.all.'+divname+'.style.visibility = "hidden";'); else if (document.layers) eval('document.layers["'+divname+'"].visibility = "hide";'); anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0); anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80); anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181); anim_1_y=new Array(-20,-20,-33,-38,-38,-27,- 2,25,51,84,113,141,162,212,253); anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18); anim_2_y=new Array(-20,-20,-33,-38,-38,-27,- 2,25,51,84,113,141,162,212,253); anim_3_x=new Array(-20,-20,-2,- 1,7,10,18,35,60,102,94,94,93,97,108,111,117,127); anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,- 151,-101,-66,-17,27,87,140,189); anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,- 209,-191,-207,-203,-213,-202,-221,-211); anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,- 149,-134,-89,-60,8,51,107,157,201); anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,- 247,-270,-279,-282,-283,-283,-285,-286,-288); anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,- 169,-120,-44,-8,40,87,144,190,248); anim_6_x=new Array(-20,-20,- 7,14,44,79,143,186,217,226,234,244,250,259,265,274); anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,- 3,54,134,187,215,257); anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,- 136,-150,-160,-164,-168,-171,-172,-172,-176,-175); anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,- 240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68); anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,- 11,16,49,64,81,93,100,103,109); anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,- 180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188); anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,- 277,-281,-287); anim_9_y=new Array(-20,-20,-35,-37,-34,- 16,10,47,105,150,189,227,273); // End -->

134 </script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>registrasi Alumni Situs Web SMA Swasta Eria Medan</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script language="javascript"> <!-- function mmloadmenus() { if (window.mm_menu_ _0) return; window.mm_menu_ _0 = new Menu("root",115,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("visi dan Misi","window.op en('visimisi.php', '_self');"); mm_menu_ _0.addmenuitem("ruang Sekolah","window.open('r uang.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#666666'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",140,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("kata Sambutan","window.open('i ndex.php', '_self');"); mm_menu_ _0.addmenuitem("sejarah Sekolah","window.open( 'sejarah_sklh.php', '_self');"); mm_menu_ _0.addmenuitem("visi Dan Misi","window.op en('visimisi.php', '_self');"); mm_menu_ _0.addmenuitem("organisasi Sekolah","window.op en('organ_sklh.php', '_self');"); mm_menu_ _0.addmenuitem("fasilitas Sekolah","window.ope n('fasilitas.php', '_self');"); mm_menu_ _0.addmenuitem("ruang Sekolah","window.open('r uang.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",180,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("data Guru dan Pegawa i","window.open('data_guru.php', '_self');");

135 mm_menu_ _0.addmenuitem("data Guru Mengajar","loca tion='gurumengajar1.php'"); mm_menu_ _0.addmenuitem("cari Data Guru /&nbs p;pegawai","window.open('search.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",205,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("ekstrakurikuler Siswa","window.open('ekstrakurikuler.php', '_self');"); mm_menu_ _0.addmenuitem("informasi Siswa","window.open( 'info.php', '_self');"); mm_menu_ _0.addmenuitem("daftar Siswa / Membe r","window.open('daftar.php', '_self');"); mm_menu_ _0.addmenuitem("siswa Penerima PMP","wind ow.open('pmp.php', '_self');"); mm_menu_ _0.addmenuitem("nilai Siswa/Siswi SMA&nbs p;eria","window.open('carinilai.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",142,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("data Alumni","window.open('daf taralumni.php', '_self');"); mm_menu_ _0.addmenuitem("cari Data Alumni","window.open('searchalumni.php', '_self');"); mm_menu_ _0.addmenuitem("pendaftaran Alumni","window.op en('alumni.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#ffffff'; mm_menu_ _0.menuborderbgcolor='#ffffff'; mm_menu_ _0.writemenus(); // mmloadmenus() //--> </script> <script language="javascript" src="mm_menu.js"></script> <style type="text/css">

136 <!-- body { background-color: #14A500;.style1 { font-size: 16px; color: #B64074;.style3 { font-size: 14px; font-family: Helios-Cond-Light;.style4 {color: # style5 { color: #CCCCCC; font-weight: bold;.style2 {color: #FFFFFF.style6 {font-family: Geneva, Arial, Helvetica, sans-serif; font-weight: bold;.style7 {font-size: 1.5em.style10 {font-size: 12px; color: #FFC734; --> </style> </head> <BODY OnLoad="initMouseEvents()"> <script language="javascript1.2">mmloadmenus();</script> <div id="sparks"> <div id="sdiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div> <div id="sdiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div> <div id="sdiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue">.</font></div> <div id="sdiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div> <div id="sdiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange">.</font></div> <div id="sdiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div> <div id="sdiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="green">.</font></div> <div id="sdiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">.</font></div> <div id="sdiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div> <div id="sdiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div> </div> <div id="header"> <div id="menu"> <div id="menu_list"><a href="#" name="link4" id="link1" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 4')" onmouseout="mm_starttimeout();">profil</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#" name="link9" id="link3" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 9')" onmouseout="mm_starttimeout();">pengajar</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#" name="link8" id="link5"

137 onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 8')" onmouseout="mm_starttimeout();">siswa</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="bukan_tamu.php" target="_self">tamu</a> <img src="images/splitter.gif" class="splitter" alt="" /><a href="index.php" name="link7" target="_self" id="link6" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 7')" onmouseout="mm_starttimeout();">alumni</a></div> </div> </div> <div id="logo"> </div> <div id="main"> <div id="sidebar"> <p align="right"> <? include 'date.php'?> </p> <p> <marquee behavior="scroll" direction="left" class="style3"> Selamat Datang Di Homepage SMA Swasta Eria Medan </marquee> </p> <form action="valid_login.php" method="post" name="form1" id="form1" onsubmit="return validate()"> <table width="234" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#ffc734"> <tr bgcolor="#1e1e1e"> <td colspan="2" bordercolor="#ff9900" bgcolor="#1ab800"><div align="center" class="style4"><strong>login SISWA / MEMBER</strong></div></td> </tr> <tr> <td width="112"> <span class="style4"> <span class="style5">username</span></span></td> <td width="172"><input name="username" type="text" id="username" /></td> </tr> <tr> <td> <span class="style5">password</span></td> <td><input type="password" name="password" id="password" /></td> </tr> <tr> <td> </td> <td><input type="submit" name="submit" value="login" /> <input type="reset" name="reset" value="batal" /></td> </tr> </table> <table width="235" border="0" align="center" cellpadding="2" cellspacing="1"> <tr> <td><p><a href="daftar.php" target="_self" title= 'Daftar Siswa / Member Baru Klik Disini'>DAFTAR SISWA MEMBER BARU</a> </p> <p> </p> <p align="center"><a href="admin.php" class="style1 style7">administrator</a></p></td> </tr> </table> </form> <div align="center">

138 <p><a href="lihatartikel.php" target="_self" class="style10"></a></p> <p> <marquee direction="up" height="120" width="120" align="top" behavior="scroll" scrollamount="5" scrolldelay="75" > <?php include "gambar.php";?> </marquee> </p> <p><a href="lihatartikel.php" target="_self" class="style10"></a><a href="lihatartikel.php" target="_self" class="style10">artikel SISWA </a></p> <p> <?php include "huruf.php";?> </p> </div> </div> <div id="text" > <h1><strong>registrasi alumni</strong></h1> <p> </p> <p align="center" class="style7">isi FORMULIR </p> <p><form name="form2" method="post" action="alumnis.php" onsubmit="return validate1()"> <table width="487" border="0" bordercolor="#ffffff"> <tr> <td width="127" bgcolor="#aee997"><div align="left" class="style4">nama Lengkap </div></td> <td width="357" bgcolor="#aee997"><div align="left"> <input name="nama" type="text" id="nama2" /> </div></td> </tr> <tr> <td bgcolor="#aee997"><div align="left" class="style4">ttl</div></td> <td bgcolor="#aee997"><div align="left"> <table width="353" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td width="93" height="26"><div align="left"> <input name="tempat" type="text" id="tempat" size="10" width="85" /> </div></td> <td width="58" bgcolor="#aee997"> <select name="tanggal" size="1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option>

139 <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select></td> <td width="109"> <select name="bulan" size="1"> <option value="januari">januari</option> <option value="februari">februari</option> <option value="maret">maret</option> <option value="april">april</option> <option value="mei">mei</option> <option value="juni">juni</option> <option value="juli">juli</option> <option value="agustus">agustus</option> <option value="september">september</option> <option value="oktober">oktober</option> <option value="november">november</option> <option value="desember">desember</option> </select></td> <td width="75"> <select name="tahun" size="1"> <option value="1960">1960</option> <option value="1961">1961</option> <option value="1962">1962</option> <option value="1963">1963</option> <option value="1964">1964</option> <option value="1965">1965</option> <option value="1966">1966</option> <option value="1967">1967</option> <option value="1968">1968</option> <option value="1969">1969</option> <option value="1970">1970</option> <option value="1971">1971</option> <option value="1972">1972</option> <option value="1973">1973</option> <option value="1974">1974</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> <option value="1978">1978</option> <option value="1979">1979</option> <option value="1980">1980</option> <option value="1981">1981</option> <option value="1982">1982</option> <option value="1983">1983</option> <option value="1984">1984</option> <option value="1985">1985</option> <option value="1986">1986</option>

140 <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990">1990</option> </select> </td> </tr> </table> </div></td> </tr> <tr> <td bgcolor="#aee997"><div align="left" class="style4">alamat</div></td> <td bgcolor="#aee997"><div align="left"> <textarea name="alamat" cols="30" rows="3" id="alamat"></textarea> </div></td> </tr> <tr> <td bgcolor="#aee997"><div align="left" class="style4">phone</div></td> <td bgcolor="#aee997"><div align="left"> <input name="phone" type="text" id="phone" size="15" /> </div></td> </tr> <tr> <td bgcolor="#aee997"><div align="left" class="style4">kota</div></td> <td bgcolor="#aee997"><div align="left"> <input name="kota" type="text" id="kota" /> </div></td> </tr> <tr> <td bgcolor="#aee997"><div align="left" class="style4">angkatan</div></td> <td bgcolor="#aee997"><div align="left"> <select name="tamat" id="tamat"> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> </select> </div></td> </tr> <tr> <td bgcolor="#aee997"><div align="left" class="style4">pekerjaan</div></td>

141 <td bgcolor="#aee997"><div align="left"> <input name="pekerjaan" type="text" id="pekerjaan" /> </div></td> </tr> <tr> <td bgcolor="#aee997"><div align="left" class="style4"> </div></td> <td bgcolor="#aee997"><div align="left"> <input name=" " type="text" id=" " /> </div></td> </tr> <tr> <td><div align="center"><span class="style2"></span></div></td> <td><div align="left"> <input type="submit" name="submit2" value="daftar" /> </div></td> </tr> </table> </form> </div> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> </div> </div> <div id="footer"> <div id="left_footer"> Copyright SMA Swasta Eria Medan </div> <div id="right_footer"> Design by <strong><a href="profil_pembuat.php" target="_self">ridzal Arif</a></strong> </div> </div> </body> </html> File Admin.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <script language="javascript"> <!-- function validate() { if(document.form2.user_admin.value=="") { alert ("Nama Administrator Belum Diisi") return false if(document.form2.pass_admin.value=="") { alert("password Administrator Belum Diisi") return false //--> <!--

142 function validate1() { if(document.form1.username.value=="") { alert ("Username Siswa / Member Belum Diisi") return false if(document.form1.password.value=="") { alert("password Siswa / Member Belum Diisi") return false //--> <!-- Begin var ver = navigator.appversion; var dom = document.getelementbyid? 1 : 0; var ie5 = (ver.indexof("msie 5") > -1 && dom)? 1 : 0; var n = (document.layers); var ie = (document.all); var sparksaflyin = 0; var totalsparks = 0; var sparkson = 1; function initmouseevents() { document.onmousedown = mousedown; if (n) document.captureevents(event.mousedown Event.MOUSEMOVE); function mousedown(e) { if (sparkson) { var mousex = (n)? e.pagex : event.x+document.body.scrollleft; var mousey = (n)? e.pagey : event.y+document.body.scrolltop; if (!sparksaflyin) { for (var k = 0; k <= 9; k++) eval('show("sdiv'+k+'")'); sparksaflyin = 1; totalsparks = 0; for(i = 0;i <= 9; i++) eval('moveto('+i+',0,'+mousex+','+mousey+')'); function moveto(i,j, mousex, mousey){ if (j < eval('anim_'+i+'_x.length') ){ var tempx = eval('anim_'+i+'_x[j]+mousex'); var tempy = eval('anim_'+i+'_y[j]+mousey'); if (ie) { if(tempy+30 > (document.body.offsetheight+document.body.scrolltop)) tempy = document.body.offsetheight+document.body.scrolltop-30; if(tempx+30 > (document.body.offsetwidth+document.body.scrollleft)) tempx = document.body.offsetwidth+document.body.scrollleft-30; eval('document.all.sdiv'+i+'.style.left = tempx;'); eval('document.all.sdiv'+i+'.style.top = tempy;'); if (n) { eval('document.layers.sdiv'+i+'.left = tempx;'); eval('document.layers.sdiv'+i+'.top = tempy;'); j++; // timeout: 50 = fireworks speed, larger number = slower speed

143 settimeout("moveto("+i+","+j+","+mousex+","+mousey+")",50) else { eval('hide("sdiv'+i+'")'); totalsparks++; if (totalsparks == 10) { sparksaflyin = 0; totalsparks = 0; function SHOW(divName){ if (document.all) eval('document.all.'+divname+'.style.visibility = "visible";'); else if (document.layers) eval('document.layers["'+divname+'"].visibility = "visible";'); function HIDE(divName){ if (document.all) eval('document.all.'+divname+'.style.visibility = "hidden";'); else if (document.layers) eval('document.layers["'+divname+'"].visibility = "hide";'); anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0); anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80); anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181); anim_1_y=new Array(-20,-20,-33,-38,-38,-27,- 2,25,51,84,113,141,162,212,253); anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18); anim_2_y=new Array(-20,-20,-33,-38,-38,-27,- 2,25,51,84,113,141,162,212,253); anim_3_x=new Array(-20,-20,-2,- 1,7,10,18,35,60,102,94,94,93,97,108,111,117,127); anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,- 151,-101,-66,-17,27,87,140,189); anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,- 209,-191,-207,-203,-213,-202,-221,-211); anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,- 149,-134,-89,-60,8,51,107,157,201); anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,- 247,-270,-279,-282,-283,-283,-285,-286,-288); anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,- 169,-120,-44,-8,40,87,144,190,248); anim_6_x=new Array(-20,-20,- 7,14,44,79,143,186,217,226,234,244,250,259,265,274); anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,- 3,54,134,187,215,257); anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,- 136,-150,-160,-164,-168,-171,-172,-172,-176,-175); anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,- 240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68); anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,- 11,16,49,64,81,93,100,103,109); anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,- 180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188); anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,- 277,-281,-287); anim_9_y=new Array(-20,-20,-35,-37,-34,- 16,10,47,105,150,189,227,273);

144 // End --> </script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>login Admin Situs Web SMA Swasta Eria Medan</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script language="javascript"> <!-- function mmloadmenus() { if (window.mm_menu_ _0) return; window.mm_menu_ _0 = new Menu("root",115,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("visi dan Misi","window.op en('visimisi.php', '_self');"); mm_menu_ _0.addmenuitem("ruang Sekolah","window.open('r uang.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#666666'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",140,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("kata Sambutan","window.open('i ndex.php', '_self');"); mm_menu_ _0.addmenuitem("sejarah Sekolah","window.open( 'sejarah_sklh.php', '_self');"); mm_menu_ _0.addmenuitem("visi Dan Misi","window.op en('visimisi.php', '_self');"); mm_menu_ _0.addmenuitem("organisasi Sekolah","window.op en('organ_sklh.php', '_self');"); mm_menu_ _0.addmenuitem("fasilitas Sekolah","window.ope n('fasilitas.php', '_self');"); mm_menu_ _0.addmenuitem("ruang Sekolah","window.open('r uang.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",180,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("data Guru dan Pegawa i","window.open('data_guru.php', '_self');");

145 mm_menu_ _0.addmenuitem("data Guru Mengajar","wind ow.open('gurumengajar1.php', '_self');"); mm_menu_ _0.addmenuitem("cari Data Guru /&nbs p;pegawai","window.open('search.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",205,18,"Arial, Helvetica, sansserif",12,"#ffffff","#ffffff","#65ca00","#50e800","left","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("ekstrakurikuler Siswa","window.open('ekstrakurikuler.php', '_self');"); mm_menu_ _0.addmenuitem("informasi Siswa","window.open( 'info.php', '_self');"); mm_menu_ _0.addmenuitem("daftar Siswa / Membe r","window.open('daftar.php', '_self');"); mm_menu_ _0.addmenuitem("siswa Penerima PMP","wind ow.open('pmp.php', '_self');"); mm_menu_ _0.addmenuitem("nilai Siswa/Siswi SMA&nbs p;eria","window.open('carinilai.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#14a500'; mm_menu_ _0.menuborderbgcolor='#ffffff'; window.mm_menu_ _0 = new Menu("root",142,18,"",12,"#FFFFFF","#FFFFFF","#65CA00","#50E800","lef t","middle",3,0,1000,-5,7,true,true,true,0,true,true); mm_menu_ _0.addmenuitem("data Alumni","window.open('daf taralumni.php', '_self');"); mm_menu_ _0.addmenuitem("cari Data Alumni","window.open('searchalumni.php', '_self');"); mm_menu_ _0.addmenuitem("pendaftaran Alumni","window.op en('alumni.php', '_self');"); mm_menu_ _0.hideonmouseout=true; mm_menu_ _0.bgcolor='#ffffff'; mm_menu_ _0.menuborder=0; mm_menu_ _0.menulitebgcolor='#ffffff'; mm_menu_ _0.menuborderbgcolor='#ffffff'; mm_menu_ _0.writemenus(); // mmloadmenus() //--> </script> <script language="javascript" src="mm_menu.js"></script> <style type="text/css"> <!--

146 body { background-color: #14A500;.style1 { font-size: 16px; color: #B64074;.style3 { font-size: 14px; font-family: Helios-Cond-Light;.style4 {color: # style5 { color: #CCCCCC; font-weight: bold;.style6 {font-size: 14px; font-weight: bold;.style7 {font-size: 16px.style10 {font-size: 12px; color: #FFC734; --> </style> </head> <BODY OnLoad="initMouseEvents()"> <script language="javascript1.2">mmloadmenus();</script> <div id="sparks"> <div id="sdiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div> <div id="sdiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div> <div id="sdiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue">.</font></div> <div id="sdiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">.</font></div> <div id="sdiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange">.</font></div> <div id="sdiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div> <div id="sdiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="green">.</font></div> <div id="sdiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">.</font></div> <div id="sdiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">.</font></div> <div id="sdiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">.</font></div> </div> <div id="header"> <div id="menu"> <div id="menu_list"><a href="#" name="link2" id="link1" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 2')" onmouseout="mm_starttimeout();">profil</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#" name="link8" id="link3" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 8')" onmouseout="mm_starttimeout();">pengajar</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#" name="link9" id="link5" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 9')" onmouseout="mm_starttimeout();">siswa</a> <img

147 src="images/splitter.gif" class="splitter" alt="" /> <a href="bukan_tamu.php" target="_self">tamu</a> <img src="images/splitter.gif" class="splitter" alt="" /><a href="index.php" name="link7" target="_self" id="link6" onmouseover="mm_showmenu(window.mm_menu_ _0,40,41,null,'link 7')" onmouseout="mm_starttimeout();">alumni</a></div> </div> </div> <div id="logo"> </div> <div id="main"> <div id="sidebar"> <p align="right"> <? include 'date.php'?> </p> <p> <marquee behavior="scroll" direction="left" class="style3"> Selamat Datang Di Homepage SMA Swasta Eria Medan </marquee> </p> <form action="valid_login.php" method="post" name="form1" id="form1" onsubmit="return validate()"> <table width="234" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#ffc734"> <tr bgcolor="#1e1e1e"> <td colspan="2" bordercolor="#ff9900" bgcolor="#1ab800"><div align="center" class="style2 style4"><strong>login SISWA / MEMBER</strong></div></td> </tr> <tr> <td width="112"> <span class="style4"> <span class="style5">username</span></span></td> <td width="172"><input name="username" type="text" id="username" /></td> </tr> <tr> <td> <span class="style5">password</span></td> <td><input type="password" name="password" id="password" /></td> </tr> <tr> <td> </td> <td><input type="submit" name="submit" value="login" /> <input type="reset" name="reset" value="batal" /></td> </tr> </table> <table width="235" border="0" align="center" cellpadding="2" cellspacing="1"> <tr> <td><p><a href="daftar.php" target="_self" title= 'Daftar Siswa / Member Baru Klik Disini'>DAFTAR SISWA MEMBER BARU</a> </p> <p> </p> <p align="center"><a href="admin.php" class="style1 style7">administrator</a></p></td> </tr> </table> </form> <div align="center"> <p> </p> <p>

148 <marquee direction="up" height="120" width="120" align="top" behavior="scroll" scrollamount="5" scrolldelay="75" > <?php include "gambar.php";?> </marquee> </p> <p><a href="lihatartikel.php" target="_self" class="style10">artikel SISWA</a></p> <p> <?php include "huruf.php";?> </p> </div> </div> <div id="text" > <h1><strong>login administrator</strong></h1> <p> </p> <form name="form2" method="post" action="login_admin.php" onsubmit="return validate()"> <table width="336" border="0" align="center" cellpadding="2" cellspacing="2"> <tr align="left" valign="top" bgcolor="#fddf5b"> <td colspan="2" bgcolor="#1ab800"><div align="center" class="style6 style3">login AKSES ADMINISTRATOR </div></td> </tr> <tr align="left" valign="top" bgcolor="#d2edfe"> <td width="132" bgcolor="#aee997"> User Administrator </td> <td width="196" bgcolor="#aee997"><input name="user_admin" type="text" id="user_admin" /></td> </tr> <tr align="left" valign="top" bgcolor="#d2edfe"> <td bgcolor="#aee997"> Pass Administrator </td> <td bgcolor="#aee997"><input name="pass_admin" type="password" id="pass_admin" /></td> </tr> <tr align="left" valign="top" bgcolor="#d2edfe"> <td bgcolor="#aee997"> </td> <td bgcolor="#aee997"><input name="proses" type="submit" id="proses" value="login" /> <input name="gagal" type="reset" id="gagal" value="batal" /></td> </tr> </table> </form> <p> </p> <p> </p> </div> </div> <div id="footer"> <div id="left_footer"> Copyright SMA Swasta Eria Medan </div> <div id="right_footer"> Design by <strong><a href="profil_pembuat.php" target="_self">ridzal Arif</a></strong> </div> </div> </body> </html>

149 LAMPIRAN OUTPUT

150 LAMPIRAN B OUTPUT Halaman Index.php

151 Halaman Visimisi.php

152 Halaman Organ_sklh.php

153 Halaman Fasilitas.php

154 Halaman Data_guru.php

155 Halaman Ekstrakurikuler.php

156 Halaman Daftar.php

157 Halaman PMP.php

158 Halaman Tampilnilai1.php

159 Halaman Form_bktamu.php

160 Halaman Daftaralumni.php

161 Halaman Alumni.php

162 Halaman Admin.php

163 Halaman Page_admin.php