Perancangan Website pada Yayasan Perguruan Panca Jaya Galang

(1)

PERANCANGAN WEBSITE PADA YAYASAN PERGURUAN

PANCA JAYA GALANG

TUGAS AKHIR

KHAIRANI NASUTION

102406055

PROGRAM STUDI D3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2013

(2)

PERANCANGAN WEBSITE PADA YAYASAN PERGURUAN

PANCA JAYA GALANG

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat mencapai gelar Ahli Madya

KHAIRANI NASUTION

102406055

PROGRAM STUDI D3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2013

(3)

PERSETUJUAN

Judul : PERANCANGAN WEBSITE PADA YAYASAN

PERGURUAN PANCA JAYA GALANG

Kategori : TUGAS AKHIR

Nama : KHAIRANI NASUTION

Nomor Induk Mahasiswa : 102406055

Program Studi : DIPLOMA (D3) TEKNIK INFORMATIKA

Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN

ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA

Diluluskan di Medan, Mei 2013

Diketahui / Disetujui oleh

Departemen Matematika FMIPA USU Pembimbing, Ketua,

Prof. Dr. Tulus, M.Si, Drs. Partano Siagian, M.Sc NIP. 19620901 198803 1 002 NIP . 19511227 198003 1 001

(4)

PERNYATAAN

PERANCANGAN WEBSITE PADA YAYASAN PERGURUAN PANCA JAYA GALANG

TUGAS AKHIR

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

Medan, Mei 2013

KHAIRANI NASUTION 102406055

(5)

PENGHARGAAN

Puji dan syukur penulis panjatkan kepada Allah SWT atas limpahan rahmat dan hidayah-Nya sehingga tugas akhir ini dapat diselesaikan dengan baik. Tugas akhir ini merupakan syarat untuk dapat menyelesaikan pendidikan di program D3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam di Universitas Sumatera Utara. Adapun judul tugas akhir ini adalah “Perancangan Website pada Yayasan Perguruan Panca Jaya Galang”.

Pada kesempatan ini penulis juga menyampaikan terima kasih yang sebesarbesarnya kepada seluruh pihak yang sudah banyak membantu:

1. Bapak Dr. Sutarman,M.Sc selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

2. Bapak Prof. Dr. Tulus, Vordipl, M.Si, Ph.D selaku Ketua Departemen Matematika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

3. Bapak Drs. Partano Siagian, M.Sc sebagai Dosen Pembimbing yang telah banyak memberikan saran dan masukan dalam penyelesaian laporan ini. 4. Bapak Ir. Jhon Piter AS Saragih selaku pemilik yayasan.

5. Kedua orang tua dan keluarga untuk segenap doa dan dukungannya.

6. Seluruh guru dan staf administrasi yang telah membantu penulis dalam pengumpulan data riset di Yayasan Perguruan Panca Jaya Galang

7. Seluruh teman-teman yang ikut memberikan saran dan kritik dalam penyusunan Tuga Akhir ini.

Semoga tugas akhir ini dapat berguna. Kritik dan saran penulis harapkan untuk perbaikan dan kemajuan tugas akhir ini di masa mendatang. Terima kasih.

Medan, Mei 2013

(6)

ABSTRAK

Pembuatan website yang dilakukan penulis bertujuan untuk mempermudah proses publikasi sekolah dan memberikan kemudahan bagi siswa dalam hal memperoleh informasi yang sedang berkembang di lingkungan sekolahnya. Dalam pembuatan situs yayasan ini, penulis menggunkaan PHP sabagai bahasa pemrogramannya dan MYSQL sebagai pembuatan databasenya. Sedangkan Macromedia Dreamweaver CS5 digunakan dalam pembuatan layout situs tersebut.

(7)

DAFTAR ISI

Halaman

PERSETUJUAN i

PERNYATAAN ii

PENGHARGAAN iii

ABSTRAK iv

DAFTAR ISI v

DAFTAR GAMBAR vii

DAFTAR TABEL viii

BAB 1 PENDAHULUAN 1

1.1 Latar Belakang Masalah 1

1.2 Identifikasi Masalah 2

1.3 Rumusan Masalah 2

1.4 Tujuan Penelitian 3

1.5 Manfaat Penelitian 3

1.6 Metode Penelitian 4

1.7 Tinjauan Pustaka 4

1.8 Sistematika Penulisan 5

1.9 Deskripsi Yayasan 6

1.9.1 Sejarah Berdirinya Yayasan 6

1.9.2 Visi dan Misi 7

1.9.3 Struktur Organisasi 8

1.9.4 Uraian Tugas dan Tanggung Jawab 9

BAB 2 LANDASAN TEORI 13

2.1 Aplikasi Berbasis Web 13

2.2 Defenisi Website 14

(8)

2.4 Pengenalan PHP 15

2.5 Pengenalan MySQL 16

2.6 CSS (Cascading Style Sheet) 16

2.7 Pengenalan Macromedia Dreamweaver CS5 17

BAB 3 PERANCANGAN SISTEM 19

3.1 Perancangan Sistem 19

3.2 Perancangan Algoritma 19

3.3 Perancangan Data Flow Diagram (DFD) 24

3.4 Mempersiapkan Database server 25

3.5 Desain Situs 27

3.6 Proses Upload File 28

3.7 Metode Pengembangan Sistem 28

BAB 4 IMPLEMENTASI SISTEM 30

4.1 Arti Implementasi Sistem 30

4.2 Tujuan Implementasi Sistem 30

4.3 Spesifikasi Program 31

BAB 5 KESIMPULAN DAN SARAN 33

5.1 Kesimpulan 33

5.2 Saran 33

DAFTAR PUSTAKA 35

Lampiran A : Tampilan Halaman Situs Lampiran B : Listing Program

(9)

DAFTAR GAMBAR

Halaman

Gambar 1.1 Struktur Organisasi Yayasan Perguruan Panca Jaya Galang 9

Gambar 2.1 Fasilitas Baru Macromedia Dreamweaver CS5 18

Gambar 3.1 Flowchart Rancangan Web (situs) 21

Gambar 3.2 Flowchart Rancangan Admin 23

Gambar 3.3 Data Flow Diagram (DFD) Diagram Konteks 24

(10)

DAFTAR TABEL

Halaman

Tabel 3.1 Tabel Admin 25

Tabel 3.2 Tabel Fasilitas 25

Tabel 3.3 Tabel Gambar Fasilitas 26

Tabel 3.4 Tabel Pengajar 26

Tabel 4.3 Tabel Siswa SMP 26

Tabel 4.4 Tabel Siswa SMA 27

(11)

ABSTRAK

(12)

BAB 1

PENDAHULUAN

1.1 Latar Belakang Masalah

Perkembangan dunia informatika dan komputer demikian pesat dan ke berbagai sisi kehidupan manusia. Perkembangan yang demikian tersebut didukung oleh tersedianya perangkat keras maupun perangkat lunak yang semakin hari semakin hebat kemampuannya.

Teknologi informasi tidak dapat dipisahkan dengan perkembangan dunia informasi internet saat ini. Informasi yang disajikan di dunia internet sudah sangat global dan selalu diusahakan ontime sehingga waktu update suatu informasi sangatlah cepat, sehingga mendorong setiap manusia untuk memanfaatkan kemajuan tersebut untuk mendukung aktifitas kerja dan kegiatan lainnya. Komputer yang saat ini terus dikembangkan sedemikian rupa, telah berubah fungsinya tidak hanya sebagai alat hitung-menghitung, serta sebagai alat manipulasi data tetapi lebih dari itu sudah berkembang menjadi alat komunikasi yang handal dan efisien. Pemanfaatan komputer yang seolah-olah tak dapat dihindari lagi sudah merambah kedalam setiap sisi kehidupan manusia, baik di dalam kehidupan politik, ekonomi, sosial, budaya, pertahanan dan keamanan bahkan ke segala aspek kehidupan termasuk di dalamnya lembaga pendidikan.

Yayasan Perguruan Panca Jaya Galang adalah sebuah yayasan perguruan swasta yang berada di Kecamatan Galang Kabupaten Deli Serdang mempunyai jenjang pendidikan yaitu :

1. SMP (Sekolah Menengah Pertama) 2. SMA (Sekolah Menengah Atas)

(13)

3. SMK (Sekolah Menengah Kejuruan)

Sebagai sebuah yayasan perguruan swasta yang berusaha meningkatkan mutu dan kualitas pendidikan, saat ini Yayasan Perguruan Panca Jaya Galang sudah memanfaatkan teknologi komputer, akan tetapi belum digunakan secara maksimal. Sehingga penyajian informasi masih kurang akurat dan sering terjadi keterlambatan. Contoh dari kekurangan tersebut adalah:

1. Penyampaian informasi nilai yang lambat khususnya kepada para siswa.. 2. Kurang dikenalnya Yayasan Perguruan Panca Jaya secara detail oleh

masyarakat.

3. Masih digunakannya selebaran dan radio siaran sebagai bentuk penyampaian informasi, dan perancangan website hadir untuk melengkapinya.

Dengan melihat permasalahan diatas maka penulis mencoba untuk menyusun sebuah perancangan website yang akan penulis sajikan dalam bentuk tugas akhir.

1.2 Identifikasi Masalah

Identifikasi masalah yaitu bagaimana merancang sebuah website untuk dapat digunakan sebagai media untuk memperkenalkan atau memberikan suatu informasi ke masyarakat luas melalui internet. Begitu juga dengan Yayasan Perguruan Panca Jaya Galang yang merupakan salah satu lembaga pendidikan yang ingin mempublikasikan sekolahnya dalam hal kegiatan, prestasi dan fasilitas yang diberikan oleh sekolah itu sendiri.

1.3 Rumusan Masalah

Agar penelitian lebih sederhana dan terarah perlu adanya perumusan masalah. Berdasarkan latar belakang masalah yang telah penulis uraikan di atas maka penulis merumuskan perumusan masalah sebagai berikut:

(14)

1. Merancangan website Yayasan Perguruan Panca Jaya Galang yang dapat membantu dalam penyajian informasi secara online menggunakan Adobe Dreamweaver CS5

1.4 Tujuan Penelitian

Tujuan penelitian adalah merancangan website Yayasan Perguruan Panca Jaya Galang yang bermanfaat untuk mempermudah suatu informasi dan pengenalan yayasan perguruan ini yang lebih efektif dan efisien. Sehingga perancangan website ini dapat membantu masyarakat yang ingin mengetahui yayasan ini lebih mendalam.

1.5 Manfaat Penelitian

Manfaat dari penelitian : 1. Bagi Yayasan

Manfaat yang dapat diperoleh pihak yayasan sebagai berikut:

a. Memberikan kemudahan dalam penyampaian informasi kepada siswa, guru, masyarakat maupun pihak yang berkepentingan lainnya.

b. Memperoleh sebuah gambaran tentang desain website yang berguna bagi eksistensi kerja dan demi kualitas Yayasan Perguruan Panca Jaya Galang. 2. Bagi Penulis

Manfaat yang dapat diperoleh penulis dari penelitian ini sebagai berikut : a. Penulis dapat merealisasikan teori-teori yang telah diperoleh selama

berada di bangku kuliah ke dalam dunia praktek nyata.

b. Penulis dapat membuat perancangan website yang nantinya dapat meningkatkan kecepatan maupun ketepatan dalam penyajian informasi melalui media internet.

3. Bagi Masyarakat

Masyarakat dapat memperoleh informasi secara cepat dan akurat mengenai keberadaan Yayasan Perguruan Panca Jaya Galang.

(15)

Instansi lain dapat memanfaatkan hasil dari website tersebut untuk membantu kinerja pada bagian perancangan websitenya. Website ini nantinya diharapkan akan lebih efisien dan efektif sehingga manfaat yang diperoleh bagi pengguna website akan lebih besar.

1.6 Metodologi Penelitian

Metodologi penelitian yang digunakan penulis untuk menyelesaikan berbagai permasalahan yang terjadi diatas adalah :

1. Studi Kepustakaan

Pengumpulan data-data yang erat kaitannya dengan permasalahan yang terjadi diatas dengan cara membaca buku-buku, makalah dan membaca bahan-bahan dari sumber terpercaya lainnya.

2. Studi Lapangan

Penelitian dilakukan secara langsung di YP. Panca Jaya Galang untuk mendapatkan data dimana penulis melakukan pengumpulan data dengan cara bertanya langsung kepada semua pihak yang terkait dalam pembuatan web tersebut.

1.7 Tinjauan Pustaka

Sebagai karya tulis yang ingin dinilai baik haruslah memiliki referensi yang cukup. Oleh karena itu penulis mengumpulkan bahan bacaan guna mengumpulkan informasi yang berhubungan dengan materi yang terdapat dalam tugas akhir nantinya. Sebagai sumber bahan bacaan atau informasi tersebut penulis mendapatkannya dari perpustakaan Universitas Sumatera Utara, koleksi buku pribadi (milik sendiri) serta pinjaman dari teman-teman penulis. Bahan pustaka yang penulis maksud adalah sebagai berikut.

1. Membuat Desain Web Untuk Pemula, Madcoms, 2008, penerbit Andi Yogyakarta, Yogyakarta, yang mana buku ini menjadi acuan dalam pembuatan desain web.

(16)

2. Pemrograman Web Mencakup : Html, Css, Javascript & PHP, A. Kadir, 2002, penerbit Andi Yogyakarta, Yogyakarta, yang mana buku ini menjadi acuan dalam pembuatan program website sekolah pada Yayasan Perguruan Panca Jaya Galang.

3. PHP dan MySQL untuk Pemula, Madcoms, 2008, penerbit Andi Yogyakarta, Yogyakarta, buku ini menjadi acuan pembelajaran dasar PHP dan MySQL 4. Algoritma dan Pemrograman Menggunakan Java, L.N. Hamaningrum, 2009,

penerbit Graha Ilmu, Yogyakarta, buku ini menjadi acuan pembelajaran perancangan algoritma .

5. Cara Cerdas Menguasai Layout, Desain dan Aplikasi Web, Lukmanul Hakim dan Uus Musalini, 2004, penerbit PT Elex Media Komputindo, Jakarta, buku ini menjadi acuan cara pembuatan layout dan desain web.

6. Pemrograman Web dengan PHP, Sidik, 2004, penerbit Informatika Bandung, Bandung, buku ini menjadi acuan dalam pembuatan program website tugas akhir penulis.

7. Selain ke enam buku di atas, penulis juga menggunakan beberapa buku pendukung lainnya yang menjadi referensi dalam pembuatan tugas akhir ini

1.8 Sistematika Penulisan

Secara garis besar pembahasan tugas akhir ini terdiri dari 5 (lima) bab, yaitu : BAB 1 PENDAHULUAN

Pada bab ini berisikan latar belakang masalah, identifikasi masalah,rumusan masalah, tujuan penelitian, manfaat penelitian, metode penelitian, tinjauan pustaka, sistematika penulisan dan deskripsi yayasan.

BAB 2 LANDASAN TEORI

Bab ini berisi tentang aplikasi berbasis web, defenisi website, pengertian

internet dan pengenalan PHP, MySQL, CSS dan Macromedia

Dreamweaver CS5.

(17)

Pada bab ini dijelaskan tentang file yang digunakan dalam perancangan sistem, peracangan database, algoritma dari sistem yang dirancang.

BAB 4 IMPLEMENTASI SISTEM

Pada bab ini dijelaskan tentang pengertian, tujuan implementasi sistem dan spesifikasi program.

BAB 5 KESIMPULAN DAN SARAN

Sebagai bab terakhir penulis akan menguraikan beberapa kesimpulan dari uraian bab-bab sebelumnya. Dan akan berusaha memberikan saran yang mungkin ada manfaatnya untuk pengembangan system ke depan.

1.9 Deskripsi Yayasan

Deskripsi yayasan berisikan gambaran umum yayasan seperti :

1.9.1 Sejarah Berdirinya Yayasan

Yayasan perguruan Panca Jaya Galang bergerak dalam bidang pendidikan serta memiliki status gedung milik sendiri (yayasan) dimana Yayasan Perguruan Panca Jaya Galang sudah memiliki jenjang akreditasi yaitu Diakui (B).

Perkembangan Yayasan perguruan Panca Jaya Galang begitu cepat dikenal masyarakat. Disiplin dan siswa/i yang berprestasi dari sekolah ini sehingga tidak heran apabila sekolah ini tidak asing lagi dimata masyarakat. Selain itu alasan sekolah ini begitu dikenal masyarakat adalah setiap proses kegiatan yang berlangsung disekolah tersebut terlebih dahulu didasari iman yang kuat sebagai fondasi untuk menimba ilmu. Sebelum memulai kegiatan proses belajar mengajar setiap pagi siswa/i harus hadir 10 menit sebelum bel sekolah berbunyi. Data lengkap sekolah ini sebagai berikut :

Nama Sekolah : YAYASAN PERGURUAN PANCA JAYA GALANG

(18)

Serdang, Sumatera Utara, Kode Pos : 20585.

Telp : (021)52725477

Tahun Berdiri : 1985

Kecamatan : Galang

Desa : Galang Kota

Kabupaten : Deli Serdang

Nama Yayasan : Yayasan Panca Jaya Galang

Tujuan didirikannya Yayasan Perguruan Panca Jaya Galang adalah:

1. Menghasilkan tamatan yang memiliki pengetahuan dan teknologi untuk melanjutkan ke jenjang pendidikan yang lebih tinggi

2. Meningkatkan kualitas pembelajaran bagi siswa

3. Membekali peserta didik dengan untuk mampu bersaing dalam perkembangan IPTEK dan mengembangkannya di lingkungan masyarakat

4. Membekali peserta didik dengan kemauan dan kemampuan untuk dapat mengembangkan dirinya, bertanggung jawab, berakhlak mulia, beriman dan bertaqwa dalam kehidupan bermasyarakat.

1.9.2 Visi dan Misi

Perkembangan teknologi diberbagai bidang, seperti IPTEK yang sangat cepat, sehingga membuat masyarakat merasa terdorong untuk bersekolah guna meresponi tantangan sekaligus meraih peluang tersebut. Dengan itu Yayasan perguruan Panca Jaya Galang memiliki visi dan misi sebagai berikut:

Visi :

Menjadikan siswa/i aktif dan mampu dalam mengembangkan bakat yang mereka miliki sesuai dengan bidangnya.

Misi :

1. Mengadakan berbagai kegiatan dan pelatihan bagi para siswa/i

(19)

3. Aktif mengikuti segala kompetisi yang di adakan baik dalam lingkungan sekolah maupun di luar sekolah.

1.9.3 Struktur Organisasi.

Struktur Organisasi menunjukkan karakter dan satu susunan perwujudan pola tetap hubungan diantara bagian-bagian maupun orang-orang yang menunjukkan kedudukan, tugas, wewenang, dan tanggung jawab yang berbeda-beda dalam suatu organisasi. Semakin baik struktur organisasi suatu pekerjaan maka sistem operasionalnya akan dapat lebih terinteraksi dan terkoordinasi sehingga tujuan dari pada sekolah semakin jelas.

Struktur organisasi yang di tetapakan di Yayasan perguruan Panca Jaya Galang terdiri dari :

1. Ketua Yayasan 6. Kepsek SMK(BM)

2. Wakil Yayasan 7. Kepsek SMK(TI)

3. Bendahara 8. Dewan Guru

4. Pks.Kurikulum 9. Siswa-Siswi

(20)

Struktur organisasi pada Yayasan Pergurnan Panca Jaya Galang, yaitu:

Gambar 1.1 Struktur organisasi Yayasan Perguruan Panca Jaya Galang.

1.9.4 Uraian Tugas Dan Tanggung Jawab

Di bawah ini akan dijabarkan pembahasan tentang tugas-tugas yang di gunakan di Yayasan Perguruan Panca Jaya Galang:

Wakil Yayasan

Hendriyani Hasibuan S.pd

Bendahara

Suwahinda .SE

Pks.Kurikulum

Erijal.E.Chan S.pd

Sekertaris

Afrilia Wulan Dari S.pd Ketua Yayasan

Ir.Jhon Piter .A.S.Saragih

Kepsek SMK(TI)

Ir.Jhon Piter .A.S.Saragih Kepsek

SMK(BM)

Ir.Jhon Piter .A.S.Saragih Kepsek SMA

Ir.Jhon Piter .A.S.Saragih

DEWAN GURU

(21)

1. Ketua Yayasan

Ketua berfungsi sebagai educator, manajer, administrator dan supervisor dengan uraian sebagai berikut:

1. Membimbing semua guru dan staf pegawai dalam pimpinannya kearah kesempurnaan pelaksanaan tugas dan perilaku baik dalam maupun luar sekolah.

2. Membimbing semua siswa yang ada di dalam asuahan sekolahnya.

3. Memimpin dan bertanggung jawab atas penelolaan tenaga, sarana keuangan, serta pelaksanaan tata usaha sekolah

4. Pembinaan personil yaitu mengadakan supervise kepada guru dan staf sekolah dalam pelaksanaan tugasnya masing-masing.

5. Pelaksanaan kurikulum secara efektif dan efisien.

6. Pelaksanaan hubungan kerja sama dengan pemda dan masyarakat. 7. Pelaksanaan laporan kepada atasan.

2. Wakil Yayasan

a. Wakil kepala sekolah berfungsi sebagai pembantu kepala sekolah dalam perencanaan dan pengembangan:

1. proses belajar mengajar baik kurikuler,ekstrakulikuler maupun pengembangan kemampuan guru.

2. pembinaan OSIS dan pelaksanaan disiplin serta tat tertib.

3. pengadaaan dan pemeliharaan sarana dan prasarana penunjang proses belajar mengajar.

4. kerjasama dengan lembaga-lembaga pemerintah dan swasta serta pengabdian masyarakat.

5. koordinator tugas PKS dan wali kelas.

3. Guru Bidang Studi

1. Bertanggung jawab terhadap kepala sekolah dan perguruan

2. Setiap saat memberikan tugas PR kepada siswa, kemudian hendaknya di periksa baik perorangan maupun kelompok.

(22)

4. Mempersiapkan SP/Sylabus dan menyerahkan kepada tata usaha untuk ditanda tangani kepala sekolah.

5. Membantu kepala sekolah dalam usaha meningkatkan mutu penddik.

6. Membantu /mendukung serta loyalitas sepenuhnya pada usaha yang di rencanakan pihak sekolah untuk kemajuan peningkatan sekolah

7. Menanda tangani daftar hadir setiap hari tugas di meja TU.Bagi yang tidak mengisi di angggap absen.

8. Mengutamakan kewajiban dari pada hak.

9. Memupuk kerjasama yang baik,rasa kekeluargaandan kebersamaan serta saling menghargai sesama guru/ TU/ Wakasek/ Kasek/ Perguruan..

10.Melaksanakan tugas dengan penuh tanggungjawab.

11.Membuat laporan /izin apabila tidak melaksanakan tugasnya lagi.

12.Senantiasa memberikan motivasi kepada siswa untuk giat belajar,baik dirumah maupun disekolah.

4. Guru Piket

1. Hadir disekolah 15 menit sebelum jam pertama dimulai/jam m.

2. Mengatur pergantian les pelajaran dan mengawasi siswa yang keluar –masuk pada waktu jam belajar.

3. Mengawasi dan memonitor siswa pada waktu jam istirahat.

4. Memperhatikan kebersihan kelas masing-masing dn halaman sekolah.

5. Membariskan seluruh siswa dihalaman sekolah sebelum masuk jam 1 serta membaca do’a bersama.

6. Piket yang terlambat datang dianggap tidak piket dan dipotong honornya serta diberikan kepada penggantinya.

7. Mencatat daftar hadir guru dan buku piket dan mencatat nama-nama siswa yang absen untuk di proses pada hari berikutnya.

5. Guru Bp/Bk

1. Menyusun program BP/BK

2. Memberikan bimbingan penyuluhan kepada siswa secara individu yang berkaitan dengan hambatan hidup,latarbelakang sosial,pengaruh lingkungan,kesukaran belajar dan sebagainya.

(23)

3. Mengembangkan potensi siswa sesuai dengan bakat dan minat siswa. 4. Membimbing siswa dalam pengenalan diri dan lingkungan.

6. Pegawai Tata Usaha

1. Bertugas dan bertanggungjawab terhadap pelayanan dalam bidang ketatausahaan sekolah.

2. Selaku anggota keluarga sekolah membantu kepala sekolah dalam memelihara ketertiban administrasi dan menunjang ketertiban sekolah.

3. Selaku pegawai negeri melaksanakan tugas pokoknya selaku pegawai tata usaha sekolah dan menghayati serta mengamalkan peraturan disiplin PNS dan DOKTRIN KOPRI.

4. Uraian tugas pegawai tata usaha: a. Administrasi Kepegawaian b. Administrasi Edukatif c. Administrasi Kesiswaan

d. Administrasi Surat menyurat/Arsi

7. Bendahara

Tugas Bendahara membantu kepala sekolah dalam bidang administrasi keuangan dengan ketentuan sebagai berikut:

1. Menerima setiap pembayaran SPP dari siswa.

2. Mencatat dengan tertib semua keuangan masuk dan keluar. 3. Mengidentifikasi semua data keuangan masuk dan keluar. 4. Mencatat sumber keuangan yang belum masuk satu minggu

5. Menyampaikan tunggakan SPP kepada Kepala Sekolah setiap awal bulan 6. Memproses tunggakan SPP bagi siswa bermasalah secara prosedural

7. Bekerjasama atau melibatkan pihak lain ( wali kelas, BP, PKS) jika di perlukan dalam proses siswa bermasalah

8. Mengeluarkan pihak keuangan setelah mendapat persetujuan dari kepala sekolah

9. Membuat data keuangan dengan rincian sebagai berikut: Setiap hari, minggu, bulan, semester dan keuangan selama satu tahun.

(24)

BAB 2

LANDASAN TEORI

2.1 Aplikasi Berbasis Web

Yang dimaksud dengan aplikasi web atau aplikasi berbasis web adalah aplikasi yang dijalankan melalui browser. Aplikasi seperti ini pertama kali dibangun hanya dengan menggunakan bahasa yang disebut dengan HTML (HyperText Markup Language) dan protokol yang digunakan dinamakan HTTP (HyperText Transfer Protokol). Namun, tentu saja hal seperti ini memiliki kelemahan. Semua perubahan harus dilakukan pada level aplikasi. Pada perkembangan berikutnya, sejumlah skrip dan objek dikembangkan untuk memperluas kemampuan HTML. Pada saat ini, banyak skrip seperti itu antara lain yaitu PHP, ASP, ASP.NET sedangkan contoh yang berupa objek antara lain adalah applet (Java).

Dengan mengembangkan kemampuan HTML, yakni dengan menggunakan perangkat lunak tambahan, perubahan informasi dalam halaman-halaman web dapat ditangani melalui perubahan data bukan melalui program. Sebagai implementasinya, aplikasi web dapat dikoneksikan ke database. Dengan demikian, perubahan informasi dapat dilakukan oleh operator atau yang bertanggung jawab terhadap kemutakhiran data dan tidak menjadi tanggung jawab pemrogram atau web master. Konsep yang mendasari aplikasi web sebenarnya sederhana. Operasi yang melatarbelakanginya melibatkan pertukaran informasi antara komputer yang meminta informasi yang disebut client, dan komputer yang memasok informasi (atau disebut server). Secara lebih detail, server yang melayani permintaan dari client sesungguhnya berupa suatu perangkat lunak yang dinamakan webserver. Secara internal, webserver inilah yang berkomunikasi dengan perangkat lunak lain yang disebut middleware dan middleware inilah yang berhubungan dengan database. Model seperti inilah yang mendukung web

(25)

dinamis. Dengan menggunakan web dinamis, dimungkinkan untuk membentuk aplikasi berbasis web yang berinteraksi dengan database.

2.2 Definisi Website

Website adalah kumpulan halaman-halaman yang digunakan untuk mempublikasikan informasi berupa teks, gambar dan program multimedia lainnya berupa animasi (gambar gerak,tulisan gerak), suara dan atau gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait antara satu page dengan page yang lain yang sering disebut sebagai hyperlink. Website biasanya terangkum dalam sebuah domain atau subdomain yang tempatnya berada di dalam World Wide Web (www) di internet. Sebuah Web Page adalah dokumen yang ditulis dalam format HTML yang hampir selalu bisa diakses melalui HTTP, yaitu protocol yang bisa menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. Semua publikasi dari website-website tersebut dapat membentuk sebuah jaringan informasi yang sangt besar.

Halaman-halaman dari website akan bisa diakses melaui sebuah URL yang bisa disebut Homepage. URL ini mengatur halaman-halaman situs untuk menjadi sebuah hirarki, meskipun hyperlink-hyperlink yang ada di halaman tersebut mengatur para pembaca dan memberitahu mereka susunan keseluruhan dan bagaimana arus informasi ini berjalan. Beberapa website membutuhkan subskripsi (data masukan) agar para user bisa mengakses sebagian atau keseluruhan isi web tersebut. Contohnya, ada beberapa situs-situs bisnis, situs-situs email gratisan yang membutuhkan subskripsi agar kita bisa mengakses situs tersebut.

2.3 Pengertian Internet

Dalam beberapa tahun terakhir ini istilah internet sudah tidak asing lagi, dari orang dewasa sampai pelajar sudah menggunakan teknologi ini. Bahkan produsen komputer

(26)

pun berlomba-lomba menciptakan komputer yang canggih untuk memenuhi kebutuhan yang semakin bertambah.

Pada jaman dahulu informasi yang didapat hanya melalui media cetak seperti koran atau buku serta media elektronik seperti radio dan televisi. Media-media ini berkembang terus seiring dengan kebutuhan masyarakat akan informasi. Namun media-media ini banyak kekurangannya, karena hanya memberikan informasi yang ada maupun berita yang sudah lama juga informasi ini hanya sekali, maksudnya tidak dapat diulang lagi. Dengan internet, informasi yang didapat tida terbatas oleh waktu, terbuka sehari-semalam dan dapat mencari informasi yang dibutuhkan.

Internet adalah metode untuk menghubungkan berbagai komputer ke dalam satu jaringan komputer global, melalui protokol yang disebut Transmission Control Protocol/ Internet Protokol (TCP/IP). Protokol adalah suatu petunjuk yang menunjukkan pekerjaan yang akan pengguna (user) lakukan dengan internet, apakah akan mengakses situs web, melakukan transfer file, mengirim email dan sebagainya. Protokol biasa dibayangkan seperti suatu bahasa yang digunakan untuk berkomunikasi berbagai jenis komputer maupun sistem operasi yang terhubung di internet (Abdul Kadir, 2002).

2.4 Pengenalan PHP

Hypertex Preprocessor (PHP) adalah skrip yang berjalan pada server side yang ditambahkan dalam HTML. PHP itu sendiri merupakan singkatan dari Personal Home Page Tools. Skrip ini akan membuat suatu aplikasi yang dapat diintegrasikan kedalam HTML sehingga suatu halaman HTML tidak lagi bersifat statis, namun menjadi bersifat dinamis. Sifat server side membuat pengerjaan skrip tersebut dikerjakan di server sdangkan yang dikirimkan kepada browser adalah hasil proses dari skrip tersebut yang sudah berbentuk HTML.

PHP dibuat pada tahun 1994 oleh Rasmus Lerdfort. Tetapi dikembangkan oleh orang lain dan setelah melalui tiga kali karya penulisan, akhirnya PHP menjadi bahasa

(27)

Pemograman Web. PHP adalah sebuah produk yang berbentuk open source, sehingga source code-code dari PHP dapat digunakan, diganti, diedit tanpa harus membayar atau dikenakan biaya(Betha Sidik, 2001).

2.5 Pengenalan MySQL

MySQL adalah Relational Database Management Sistem ( RDBMS ) yang didistribusikan secara gratis di bawah lisensi General Public license ( GPL ). Dimana setiap orang bebas untuk menggunakan, namun tidak boleh dijadikan produk turunan yang bersifat closed source atau komersil.

MySQL sebenarnya merupakn turunan salah satu konsep uatama dalam database sejak lama yaitu SQL (Structure Query Language). SQL adalah bahasa standar yang digunakan untuk mengakses database server. Bahasa ini pada awalnya dikembangkan oleh IBM, namun telah di adopsi dan digunakan sebagai standar industri. Dengan menggunakan SQL, proses akses database menjadi lebih user- friendly dibandingkan dengan menggunakan perintah-perintah pemograman dBASE atau Clipper yang masih menggunakan perintah-perintah pemograman.

2.6 CSS (Cascading Style Sheet)

CSS merupakan singkatan dari Cascading Style Sheet yang berfungsi untuk mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut standar HTML (Hypertext Markup Language). CSS sebenarnya adalah suatu kumpulan atribut untuk fungsi format tampilan dan dapat digunakan untuk mengontrol tampilan banyak dokumen secara bersama. Keuntungan menggunakn CSS yaitu jika kita ingin mengubah format dokumen, maka tidak perlu mengedit satu persatu.

Penggunaan CSS ada dua cara yaitu dengan menyisipkan kode CSS langsung dalam kode HTML atau simpan file tersendiri berekstensi *.css. dengan menyimpan sebagai file tersendiri akan lebih memudahkan untuk mengontrol tampilan dalam

(28)

banyak dokumen secara langsung. CSS mendefinisikan karakteristik tampilan (warna, style, dan posisi) suatu elemen pada dokumen HTML dalam bentuk properti elemen tersebut. Pemisahan isi dengan tampilan yang dilakukan dengan penerapan CSS ini, memberikan kemungkinan penyusunan struktur suatu halaman HTML dengan lebih fleksibel. CSS merupakan bagian/subset dari yang sangat berperan dalam DHTML (H. Supriansyah dan Kartoyo, 30 Menit Menjadi Webmaster, 2006).

2.7 Pengenalan Macromedia Dreamweaver CS5

Merancang sebuah website tidak terlepas dari pembuatan desain tampilan web tersebut, karena desain web merupakan langkah awal dari pembuatan website. Dasar pembuatan website menggunakan bahasa HTML (HyperText Markup Language) yaitu bahasa pemrograman dalam pembuatan web. Penggunaan HTML dalam pembuatan web tidak semua orang dapat menggunakannya untuk mempermudah dalam pembuatan web ini kita dapat menggunakan aplikasi editor web yang bersifat visual.

Salah satu aplikasi untuk melakukan perancangan desain web secara visual adalah Adobe Dreamweaver. Aplikasi ini secara umum sudah sangat poluler digunakan untuk merancang desain website. Saat ini terpopuler di kalangan web editor yaitu Macromedia Dreamweaver CS5. Aplikasi Adobe Dreamweaver menyediakan banyak fasilitas yang dapat memudahkan user dalam menghasilkan sebuah website yang interaktif dan menarik.

(29)

(30)

BAB 3

PERANCANGAN SISTEM

3.1 Perancangan Sistem

Tahap perencanaan dan perancangan sistem ini merupakan tahap awal dalam membangun sebuah situs, seperti membuat perencanaan, perancangan, diagram alur, tujuan dan isi dari sebuah situs. Situs ini dirancang dengan menggunakan PHP sebagai bahasa pemrogramannya dan MySQL sebagai databasenya, sedangkan Dreamweaver CS5 digunakan sebagai tempat untuk membuat layout dari situs yang telah dirancang.

Tahap selanjutnya yaitu tahap pembuatan flowchart (bagan alir) atau aliran informasi dari situs tersebut. Flowchart atau diagram alir adalah gambaran yang menampilkan struktur hirarki dan isi halaman per halaman. Dengan adanya flowcart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman situs tersebut.

Dengan pembuatan flowchart dalam suatu situs dapat mebantu mempermudah dalam pemeliharaan dan pembaharuan isi situs. Hal ini sangat penting dilakukan karena isi situs harus selalu diperbaharui sehingga pegunjung tidak bosan.

3.2 Perancangan Algoritma

Algoritma adalah urutan dari barisan langkah-langkah atau instruksi penyelesaian masalah yang disusun secara sistematis. Kriteria algoritma yang baik adalah mempunyai output efektif, jumlah langkah berhingga, terstruktur dan punya akhir. Salah satu cara penyajian dengan algoritma yaitu dalam bentuk flowchart. Fllowchart

(31)

adalah gambaran dalam bentuk diagram alir dari algoritma dalam suatu program yang menyatakan arah alur program dalam menyelesaikan suatu masalah.

Berikut algoritma untuk menampilkan halaman menu pada website yayasan : Langkah algoritmanya adalah :

1. Definisikan variabel menu 2. Definisikan variabel isi menu 3. Pilih menu

4. Tampilkan hasilnya

Pseude Code :

Algoritma tampilan menu Deklarasi

<div class="menu"> <div class="isi-menu"> Deskripsi

Masukkan menu(Home, Profil, Staff Pengajjar, Fasilitas, Kesiswaan) Pilih isi menu :

Home Slider Gambar

Profil Sejarah, Profil, Visi Misi Staff Pengajar Database Staff Pengajar Fasilitas Database Fasilitas

Kesiswaan Database Siswa SMP, SMA, SMK

Tampilan (isi menu)

(32)

Flowchart dari situs penulis buat yaitu :

Gambar 3.1 Flowchart Rancangan Web (situs) Start

Slider Gambar Home

Sejarah Profil Visi Misi Profil

Database Staff Pengajar Staff

Pengajar

Database Fasilitas Fasilitas

Database Siswa SMP Siswa SMA Siswa SMK Kesiswaan

(33)

Berikut algoritma untuk menampilkan halaman admin pada website yayasan : Langkah algoritmanya adalah :

1. Definisikan variabel admin 2. Definisikan variabel menu 3. Defenisikan aksi admin 4. Pilih menu

5. Tampilkan hasilnya

Pseude Code :

Algoritma tampilan admin Deklarasi

<div class="content"> <div class="menu-kiri"> <div class="aksi"> Deskripsi

Login admin (Nama/Id, Password)

Masukkan menu (Home, Staff Pengajar, Fasilitas, Kesiswaan) Pilih menu (Home, Staff Pengajar, Fasilitas, Kesiswaan) Pilih aksi (Lihat Data, Edit, Tambah, Hapus)

(34)

Gambar 3.2 Flowchart Rancangan Admin Start

Admin

Username Password Login

Aksi Database

Admin Home

Aksi Database

Staff Pengajar Staff

Pengajar

Aksi Database

Fasilitas Fasilitas

Database Siswa SMP Siswa SMA Siswa SMK

Aksi Kesiswaan

Logout

(35)

Halaman-halaman yang dirancang penulis, yaitu:

1. Halaman home.php, merupakan halaman yang pertama kali muncul pada saat situs dibuka.

2. Halaman profil.php, merupakan halaman yang berisikan tentang sejarah, profil dan visi misi yayasan berupa data perkembangan dan informasi tentang yayasan. 3. Halaman staff.php, merupakan halaman yang mnampilkan data guru di Yayasan

Perguruan Panca Jaya Galang

4. Halaman fasilitas.php, merupakan halaman yang berisi tentang fasilitas yang ada pada yayasan dalam mengembangkan kegiatan ekstra kulikuler yayasan.

5. Halaman kesiswaan.php, merupakan halaman yang menampilkan data siswa-siswi SMP, SMA dan SMK dari Yayasan Perguruan Panca Jaya Galang.

6. Halaman admin.php, merupakan halaman yang berisi tentang admin dimana admin berfungsi mengatur tampilan halaman website.

3.3 Perancangan Data Flow Diagram (DFD)

Data Flow Diagram (DFD) adalah gambaran sistem secara logika. Gambaran ini tidak tergantung pada perangkat keras, lunak, struktur data atau organisasi. Pada tahap analisa, penanganan notasi symbol lingkaran dan anak panah mewakili/ menggambarkan arus data dalam perancangan sistem yang sangat membantu sekali di dalam komunikasi dengan pemakaian sistem menggunakan notasi-notasi ini untuk menggambarkan arus dari data sistem. Data Flow Diagram (DFD) yang penulis ajukan yaitu:

informasi

Admin 0 User

Perancangan website pada Yayasan Perguruan Panca Jaya Galang

(36)

Name dan password) - home

- profil

- staff pengajar - fasilitas - kesiswaan

Gambar 3.3 Data Flow Diagram (DFD) Diagram Konteks

3.4 Mempersiapkan Database Server

Tahap ini merupakan tahap dimana penulis menempatkan data yang sudah ada pada bagian server. Data tersebut nantinya akan diproses oleh data yang sudah dibuat. Tempat untuk menampung data tersebut disebut dengan database, database terdiri atas tabel-tabel yang dibuat menggunakan program MySQL.

Database yang penulis buat yaitu database pancajaya yang terdiri dari 5 (lima) tabel, yaitu :

1. Tabel Admin

Tabel 3.1 Tabel Admin

Field Type Description

Id Varchar(50) Kode login admin

User_name Varchar(30) Nama login admin

Password Varchar(30) Password admin

Foto Varchar(50) Foto admin

2. Tabel Fasilitas

Tabel 3.2 Tabel Fasilitas

Field Type Description

(37)

Icon Varchar(50) Logo fasilitas

Id_Gambar Varchar(10) Kode Fasiitas

Nama_Gambar Varchar(50) Nama file gambar

3. Tabel Gambar Fasilitas

Tabel 3.3 Tabel Gambar Fasilitas

Field Type Description

Id_Gambar Varchar(10) Kode Gambar

Nama_Gambar Varchar(50) Nama file gambar

4. Tabel Pengajar

Tabel 3.4 Tabel Pengajar

Field Type Description

NUPTK Varchar(20) Nomor urut pegawai

Nama Varchar(50) Nama Pengajar

Lahir Varchar(30) Tempat, Tanggal Lahir

Alamat Varchar(30) Alamat Pengajar

Mapel Varchar(30) Bidang studi yg diajarkan

Tugas Varchar(30) Tugas tambahan/ Jabatan

Foto Varchar(100) Gambar Staf Pengajar

5. Tabel Siswa SMP

Tabel 3.5 Tabel Siswa SMP

Field Type Description

Induk Varchar(20) Nomor Induk Siswa

Nama Varchar(50) Nama Siswa

Jk Varchar(15) Jenis Kelamin Siswa

Lahir Varchar(30) Tempat, Tanggal Lahir

Kelas Varchar(10) Kelas Siswa

(38)

6. Tabel Siswa SMA

Tabel 3.6 Tabel Siswa SMA

Field Type Description

Induk Varchar(20) Nomor Induk Siswa

Nama Varchar(50) Nama Siswa

Jk Varchar(15) Jenis Kelamin Siswa

Lahir Varchar(30) Tempat, Tanggal Lahir

Kelas Varchar(10) Kelas Siswa

Tahun Varchar(10) Tahun Masuk Siswa

7. Tabel Siswa SMK

Tabel 3.7 Tabel Siswa SMK

Field Type Description

Induk Varchar(20) Nomor Induk Siswa

Nama Varchar(50) Nama Siswa

Jk Varchar(15) Jenis Kelamin Siswa

Lahir Varchar(30) Tempat, Tanggal Lahir

Kelas Varchar(10) Kelas Siswa

Tahun Varchar(10) Tahun Masuk Siswa

3.5 Desain situs

Pada tahap desain situs ini, penulis hanya membuat desain untuk header atau bagian atas dari suatu situs, kemudian ditambah dengan grafik-grafik aksesoris lainnya sebagai pelengkap.

Dalam membuat desain header pada situs yayasan ini, penulis menggunakan software Adobe Photoshop CS sebagai pengolah gambarnya. Area header adalah bagian paling atas dari sebuah situs. Pada area ini biasanya terdapat logo, foto, dan navigasinya. Secara keseluruhan desain header yang penulis buat dapat dilihat seperti gambar di bawah ini.

(39)

Gambar 4.4 Desain Area Header

3.6 Proses Upload File

Proses upload adalah proses mentransfer file-file situs yang telah dibuat ke suatu server di internet, dengan tujuan agar situs tersebut dapat diakses semua orang di seluruh dunia yang terhubung ke internet.

Tempat untuk meletakkan file-file situs di internet namanya server hosting atau web hosting. Ada dua jenis web hosting, yaitu web hosting yang gratisan dan web hosting yang berbayar.

3.7 Metode Pengembangan Sistem

Metode pengembangan sistem yang digunakan dalam penulisan perancangan website ini adalah Metode Fabbri dan Schwab yang terdiri dari.

1. Studi Kelayakan

Yaitu mengidentifikasikan apakah perancangan website yang akan dikerjakan atau yang akan dibuat sesuai dengan kebutuhan yayasan.

2. Rencana Pendahuluan

Yaitu menentukan lingkup proyek atau sistem yang akan ditangani. 3. Analisis Sistem

Penguraian dari suatu perancangan website yang utuh ke dalam bagian – bagian komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasikan permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikan.

(40)

4. Perancangan Sistem

Pendefenisian dari kebutuhan-kebutuhan fungsional, persiapan untuk rancang bangun implementasi, menggambarkan bagaimana suatu sistem dibentuk serta mengkonfigurasikan komponen-komponen perangkat lunak dan perangkat keras dari suatu sistem.

5. Implementasi sistem

Tahap meletakkan sistem supaya siap untuk dijalankan dan siap dipergunakan untuk keperluan instansi yang terkait.

(41)

BAB 4

IMPLEMENTASI SISTEM

4.1 Pengertian Implementasi Sistem

Implementasi Sistem adalah prosedur yang dilakukan dalam menyelesaikan sistem yang ada dalam dokumen rancangan sistem yang telah disetujui dan mengujinya, menginstall dan memulai menggunakan sistem baru yang diperbaiki. Adapun langkah- langkah yang dibutuhkan dalam implementasi sistem adalah:

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

2. Menyelesaikan rancangan sistem.

3. Menulis, menguji, mengontrol dan mendokumentasikan website. 4. Mendapatkan persetujuan.

4.2 Tujuan Implementasi Sistem

Tujuan implementasi sistem adalah sebagai berikut :

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

2. Menguji program-program dan prosedur-prosedur yang diperlukan oleh desain sistem yang telah disetujui.

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

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

(42)

4.3 Spesifikasi Program

Dalam pengimplementasian Perancangan Website Pada Yayasan Perguruan Panca Jaya Galang, spesifikasi program yang sudah dirancang membutuhkan perangkat keras (hardware), perangkat lunak (software) dan perangkat operator (brainware) antara lain :

a. Perangkat Keras (Hardware) 1. Microprocessor Dual Core.

2. Harddisk untuk tempat sistem beroperasi dan sebagai media penyimpanan data 3. Memori minimal 64 Mb, karena menggunakan Under Windows

4. Monitor super VGA

5. Keyboard untuk melakukan input data.

6. Mouse digunakan untuk mengaktifkan/menggerakkan pointer. 7. Printer untuk mencetak hasil laporan.

b. Perangkat Lunak (Software)

1. Sistem Operasi Windows XP, Windows 7. Sistem operasi yang penulis gunakan adalah Windows 7.

2. PHP merupakan software yang digunakan untuk membangun sebuah PHP server didalam windows.

3. MySQL adalah multiuser database dalam bahasa SQL (Stucture Query Language).

4. HTML Editor adalah software yang dipakai untuk mendisain web seperti : Notepad, Micromedaia Dreamweaver dan software yang lain.

5. Web server sebagai server local sebelum file-file dan script web dipublikasikan pada ISP (Internet Service Privider), yang disebut PWS (Personal Web Server) atau Apache.

6. Browser sebagai output atau tampilan hasil akhir program yang telah selesai, misalnya : Internet Exploler, Opera, Mozilla, dan lain-lain.

(43)

Yaitu orang yang mengerti dan mampu mengoperasikan sistem windows dan internet. User dibagi menjadi 2 yaitu :

1. User Admin (Programmer) 2. User Public (Pengunjung)

(44)

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dari hasil penelitian dapat disimpulkan sebagai berikut :

1. Dengan perancangan website yang tepat dan akurat maka pihak sekolah dapat menentukan keputusan yang tepat berkaitan di Yayasan.

2. Dengan perkembangan website yang begitu pesatnya memungkinkan untuk melakukan pengolahan data yang hemat ruang, waktu dan biaya namun dapat menghasilkan suatu informasi yang sangat berguna dan bermanfaat karena sekarang ini kemampuan mengolah data dan menggunakan informasi secara efektif merupakan hal yang sangat penting bagi Yayasan.

3. Perancangan Website pada Yayasan Perguruan Panca Jaya Galang dapat digunakan untuk mengolah data-data Pegawai, Siswa-siswi, Fasilitas dan Kegiatan yang ada pada yayasan sehingga menghasilkan informasi tentang yayasan yang cepat dan akurat.

5.2 Saran

Berdasarkan kesimpulan dapat memberikan saran sebagai berikut :

1. Yayasan harus lebih besar lagi menyediakan fasilitas kerja untuk melakukan modernisasi agar lebih cepat mencapai produktivitas kerja standarisasi.

(45)

2. Diharapkan program yang telah di rancang ini akan berguna untuk Yayasan dan akan meningkatkan produktivitas Yayasan tersebut.

3. Diharapkan adanya pengembangan lebih lanjut dari perancangan website yang di rancang sehingga menjadi informasi yang terpadu untuk menanggulangi dan mengolah data yang lebih besar di masa yang akan datang.

(46)

DAFTAR PUSTAKA

Hakim, Lukmanul. 2004. Cara Cerdas Menguasai Layout, Desain dan Aplikasi Web. PT Elex Media Komputindo Jakarta.

Hamaningrum, L.N. 2009. Algoritma dan Pemrograman Menggunakan Java. Graha Ilmu Yogyakarta.

Kadir, A. 2002. Pemrograman Web Mencakup : Html, Css, Javascript & PHP. Jilid I Yogyakarta.

Kadir, A. 2002. Penuntun Praktis Belajar SQL. Yogayakarta : Andi Yogyakarta.

Madcoms. 2008. Membuat Desain Web Untuk Pemula. Yogyakarta : Andi Yogyakarta.

Madcoms. 2008. PHP dan MySQL untuk Pemula. Yogyakarta : Andi Yogyakarta.

Sidik, B. 2004. Pemrograman Web dengan PHP. Jilid I Bandung : Informatika Bandung.

(47)

LAMPIRAN A

TAMPILAN

HALAMAN

(48)

1. Tampilan home.php

2. Tampilan profil.php

3. Tampilan staff.php

(49)

5. Tampilan kesiswaan.php

6. Tampilan admin-login.php

(50)

8. Tampilan edit-admin.php

9. Tampilan tambah-admin.php

(51)

11. Tampilan staff.php

12. Tampilan edit-staff.php

(52)

14. Tampilan hapus-staff.php

15. Tampilan fasilitas.php

(53)

17. Tampilan tambah-gambar-fasilitas.php

18. Tampilan hapus-gambar-fasilitas.php

(54)

20. Tampilan data-siswa-sma.php

21. Tampilan data-siswa-smk.php

(55)

23. Tampilan tambah-data-siswa.php

24. Tampilan hapus-data-siswa.php

(56)

LAMPIRAN B

LISTING

(57)

1. style.css body{ margin: 0px; padding: 0px; } .clear{ clear: both; } .wrapper{ width: 100%; } .wrapper .head{ width: 100%; height: 80px; float: left; padding-bottom: 50px; } .wrapper .menu{ width: 150%; height: 80px;

background: rgb(37, 153, 218); position: fixed; float: left; z-index: 2; } .menu #logo{ width:500px; float: left; margin: auto; height: 100px; } #logo a#linka{ text-decoration: none; background: green; position: relative; width: 100px; height: 100px; } img#gambar{ margin-left: -100px; margin-top: -90px; } #logo img{ margin-top: -15px; } #logo p{ font-family: calibri; font-size: 25pt; color: white;

(58)

margin: auto; margin-left: 130px; position: relative; top: -130px; } #logo p#sub-judul{ font-family: cursive; font-size: 10pt; color: white; margin: auto; margin-left: 220px; } .isi-menu ul{ margin: 0px; padding-top: 10px; }

.isi-menu ul li{

display: inline; color: white;

font-family: calibri; font-size: 17pt;

padding: 0px 30px 0px 10px; }

.isi-menu ul li a{

text-decoration: none; color: white;

}

.isi-menu ul li a img#gambar-s{ position: relative; top: 10px; margin-right: -10px; width:50px; height:60px; margin-top: -20px; }

.isi-menu ul li a img#gambar-k{ position: relative; top: 10px; margin-right: -5px; width:40px; height:50px; margin-top: -20px; }

.isi-menu ul li a img#gambar-h{ position: relative;

top: 0px;

margin-right: 0px; width:28px; height:31px;

(59)

margin-top: -20px; }

.isi-menu ul li a img#gambar-f{ position: relative; top: 5px; margin-right: 0px; width:40px; height:40px; margin-top: -0px; }

.isi-menu ul li a img#gambar-p{ position: relative; top: 10px; margin-right: 0px; width:40px; height:55px; margin-top: -10px; } .wrapper .wrapper-content{ margin: auto; width: 1250px; } .wrapper-content .content{ width: 100%; } .content .kiri-home{ width: 20%; height: 400px; float: left; margin-right: 10px; } .content .kanan-home{ padding-top: 40px; width: 79%; height: 400px;

background: rgb(240, 242, 243); float: left; } .kanan-home img#gambar-rumah{ position: relative; top: -390px; z-index: 4; height: auto; } .content .kiri2{ width: 30%; float: left; margin-right: 70px; margin-left: 100px;

(60)

}

/*Style Untuk Fasilitas Baru*/ .kiri2 #isi-kiri2-fasilitas{ width: 100%; margin-bottom: 20px; float: left; } #isi-kiri2-fasilitas a#link-fasilitas{ color: black; } #isi-kiri2-fasilitas a#link-fasilitas:hover{ color: red; } .kiri2 #judulnya{ width: 300px; position: relative; left: 10px; top: 15px; float: left; } #isi-kiri2-fasilitas #icon-fasilitas{ width: 35px; height: 35px; position: relative; top: 15px; margin-right: 10px; float: left; } #judulnya p#kategori-fasilitas{ font-family: calibri; text-align: right; font-weight: bold; } .kiri2 #sub-menu-kiri2{ text-align: right; width: 100%; height: 50px; margin-bottom: 30px; font-family: calibri; font-size: 15pt; font-weight: bold; } #sub-menu-kiri2 a{ text-decoration: none; color: black; width: 100%; float: left; height: 80%; padding-top: 10px;

(61)

} #sub-menu-kiri2 a:hover{ font-weight: bold; } #sub-menu-kiri2 img#gambar1{ padding-right: 10px; } #sub-menu-kiri2 img#gambar2{ padding-right: 31px; } #sub-menu-kiri2 img#gambar3{ padding-right: 70px; width: 50px; height: 70px; position: relative; top: 20px; left: 15px; margin-top: -70px; } .content .kanan{ width: 55%; float: left; } .kanan #isi-kanan-profil{ width: 450px;

background: rgb(240, 242, 243); text-align: justify;

padding: 10px 40px 10px 40px; line-height: 2em; border-radius: 4px; } #isi-kanan-profil img#gambar-fasilitas{ width: 100%; height: 550px; border-radius: 4px; } .footer{ margin: auto; width: 1250px;

border-radius: 0px 0px 4px 4px; height: 50px;

background: -webkit-linear-gradient(white,rgb(37, 153, 218)); margin-top: 90px; } .footer p{ text-align: center; font-size: 12pt; color: black; padding-top: 15px;

(62)

font-family: cursive; }

/*Style Untuk Sejarah*/ .kanan #isi-kanan-profil p{

font-size: 12pt; font-family: cursive; }

/*Style Untuk Profil*/

.kanan #isi-kanan-profil #profil{ width: 100%;

}

.kanan #isi-kanan-profil #profil table.tabelprofil{ width: 100%;

font-family: cursive; }

.kanan #isi-kanan-profil #profil table.tabelprofil th{ text-align: left;

width: 120px; height: 50px; }

/*Style Untuk Visi-Misi*/

.kanan #isi-kanan-profil #visi-misi ol li{ font-family: cursive;

}

/*Style Untuk Staff*/ .kiri2 img#gambar-staff{

margin-top: 40px; }

#isi-kanan-staff{ width: 550px;

background: rgb(240, 242, 243); text-align: justify;

padding: 10px 40px 10px 40px; line-height: 2em;

border-bottom: 1px solid #fff; float: left; } #isi-kanan-staff img#gambar-staff2{ width: 150px; height: 180px; border-radius: 4px; float: left; margin-right: 20px; } #isi-kanan-staff #detail-staff{ width: 320px; padding: 10px; float: left; }

(63)

#detail-staff table{ width: 100%; font-family: calibri; }

#detail-staff table th{ width: 80px; text-align: left; padding-right: 10px; }

/*Style Untuk fasilitas*/

#sub-menu-kiri2 img#gambar-1{ position: relative; top: 10px; margin-right: 70px; width:35px; height:35px; margin-top: -20px; } #sub-menu-kiri2 img#gambar-2{ position: relative; top: 10px; margin-right: 65px; width:30px; height:30px; margin-top: -20px; } #sub-menu-kiri2 img#gambar-3{ position: relative; top: 10px; margin-right: 70px; width:30px; height:45px; margin-top: -20px; } #sub-menu-kiri2 img#gambar-4{ position: relative; top: 30px; margin-right: 170px; width:50px; height:65px; margin-top: -40px; } #sub-menu-kiri2 img#gambar-5{ position: relative; top: 30px; margin-right: 135px; width:60px; height:70px; margin-top: -50px;

(64)

} #sub-menu-kiri2 img#gambar-6{ position: relative; top: 20px; margin-right: 90px; width:50px; height:50px; margin-top: -50px; } #sub-menu-kiri2 img#gambar-7{ position: relative; top: 5px; margin-right: 132px; width:25px; height:30px; margin-top: 0px; } #sub-menu-kiri2 img#gambar-8{ position: relative; top: 10px; margin-right: 108px; width:35px; height:40px; margin-top: -10px; } #sub-menu-kiri2 img#gambar-9{ position: relative; top: 10px; margin-right: 142px; width:40px; height:45px; margin-top: 0px; } #sub-menu-kiri2 img#gambar-10{ position: relative; top: 10px; margin-right: 188px; width:40px; height:45px; margin-top: 0px; } #sub-menu-kiri2 img#gambar-11{ position: relative; top: 10px; margin-right: 138px; width:35px; height:40px; margin-top: 0px; }

(65)

/*Style Untuk Kesiswaan*/ #sub-menu-kiri3 img#gambar-smp{ width: 60px; height: 50px; padding-right: 30px; } #sub-menu-kiri3 img#gambar-sma{ width: 70px; height: 50px; padding-right: 20px; } #sub-menu-kiri3 img#gambar-smk{ width: 50px; height: 50px; padding-right: 30px; } .content .kiri3{ width: 20%; float: left; margin-right: 70px; margin-left: 100px; } .kiri3 #sub-menu-kiri3{ text-align: right; width: 100%; height: 50px; margin-bottom: 30px; font-family: calibri; font-size: 15pt; font-weight: bold; } #sub-menu-kiri3 a{ text-decoration: none; color: black; width: 100%; float: left; height: 80%; padding-top: 10px; } #sub-menu-kiri3 a:hover{ font-weight: bold; } .content .kanan-kesiswaan{ width: 65%; float: left; } .kanan-kesiswaan #isi-kanan-kesiswaan{ width: 700px;

(66)

text-align: justify;

padding: 10px 40px 10px 40px; line-height: 2em;

border-radius: 4px; }

#isi-kanan-kesiswaan #detail-siswa{ width: 100%;

/*background: rgb(50, 239, 247);*/ margin-bottom: 20px; margin-top: 30px; border-radius: 4px; } #detail-siswa img#gambar-siswa{ width: 100%; height: 400px; }

/*Style untuk menu/kesiswaan/siswa/detail-smp.php*/ #detail-siswa .wrapper-detail-siswa-smp{ width: 100%; } .wrapper-detail-siswa-smp #isi-detail-smp{ width: 100%; } #isi-detail-smp img#gambar-detail-smp{ width: 120px; height: 150px; border-radius: 5px; position: relative; left: 280px; margin-bottom: 20px; } #isi-detail-smp #kiri-biodata{ width: 50%; } #kiri-biodata p{ font-family: calibri; position: relative; left: 200px; font-weight: bold; } #isi-detail-smp #kanan-biodata{ width: 50%; position: relative; margin-top: -290px; left: 352px; } #kanan-biodata p{ font-family: calibri; position: relative;

(67)

left: 20px; }

/*Style untuk menu/kesiswaan/siswa/detail-smp.php*/ #detail-siswa .wrapper-detail-siswa-smk{ width: 100%; } .wrapper-detail-siswa-smk #isi-detail-smk{ width: 100%; } #isi-detail-smk img#gambar-detail-smk{ width: 120px; height: 150px; border-radius: 5px; position: relative; left: 280px; margin-bottom: 20px; } #isi-detail-smk #kiri-biodata{ width: 50%; } #kiri-biodata p{ font-family: calibri; position: relative; left: 200px; font-weight: bold; } #isi-detail-smk #kanan-biodata{ width: 50%; position: relative; margin-top: -340px; left: 352px; } #kanan-biodata p{ font-family: calibri; position: relative; left: 20px; }

/*Style Untuk siswa/sma*/ #isi-kanan-kesiswaan .tabel-sma{

width: 100%; }

.tabel-sma table#t-sma{ width: 100%;

border: 1px solid #fff; border-collapse: collapse; font-family: calibri; font-size: 12pt; }

(68)

cursor:pointer; }

table#t-sma tr#kursor:hover{

background: rgb(192, 227, 255); }

table#t-sma tr{

border: 1px solid #fff; }

table#t-sma td{

border: 1px solid #fff;

padding: 5px 10px 5px 10px; }

table#t-sma td a{

color:rgb(37, 153, 218); }

table#t-sma td a:hover{ font-weight: bold; color: rgb(50, 239, 247); }

table#t-sma th{

border: 1px solid #fff;

background: rgb(37, 153, 218); color: white;

}

/*Style Untuk siswa/smp*/ #isi-kanan-kesiswaan .tabel-smp{

width: 100%; }

.tabel-smp table#t-smp{ width: 100%;

border: 1px solid #fff; border-collapse: collapse; font-family: calibri; font-size: 12pt; } table#t-smp tr#kursor{ cursor:pointer; } table#t-smp tr#kursor:hover{

background: rgb(192, 227, 255); }

table#t-smp td{

border: 1px solid #fff;

padding: 5px 10px 5px 10px; }

table#t-smp td a{

color:rgb(37, 153, 218); }

(69)

font-weight: bold; color: rgb(50, 239, 247); }

table#t-smp tr{

border: 1px solid #fff; }

table#t-smp th{

border: 1px solid #fff;

background: rgb(37, 153, 218); color: white;

height: 30px; font-size: 13pt; }

/*Style Untuk siswa/smk*/ #isi-kanan-kesiswaan .tabel-smk{

width: 100%; }

.tabel-smk table#t-smk{ width: 100%;

border: 1px solid #fff; border-collapse: collapse; font-family: calibri; font-size: 12pt; } table#t-smk tr#kursor{ cursor:pointer; } table#t-smk tr#kursor:hover{

background: rgb(192, 227, 255); }

table#t-smk td{

border: 1px solid #fff;

padding: 5px 10px 5px 10px; }

table#t-smk td a{

color:rgb(37, 153, 218); }

table#t-smk td a:hover{ font-weight: bold; color: rgb(50, 239, 247); }

table#t-smk tr{

border: 1px solid #fff; }

table#t-smk th{

border: 1px solid #fff;

background: rgb(37, 153, 218); color: white;

(70)

2. generic.css

/* For generic page styles. Not for sliders. */ body {

background:#F6F6F6; font:normal 0.9em Arial; margin:0;

padding:0;

padding-bottom:60px; }

h2 {

display:inline; }

.div2 {

width:700px; margin:0 auto; }

.div2 li {

padding-top:6px; padding-bottom:6px; }

.green {

color:Green; }

.cn {

font-family: "Courier New", Georgia; }

#status {

display:inline-block; margin-left:26px; line-height:50px; height:50px;

vertical-align:middle; }

.code {

border: dashed 1px #BCBCCB; padding:900px 12px;

background-color:#F3F3F9;

white-space:pre; font-family:"Courier New", Georgia; font-size:12px;

margin:6px 0; overflow:auto; }

(71)

<img width="200px" height="150px"src="gambar/search.png"> <p>YP.PANCA JAYA GALANG</p>

<p id="sub-judul">Yayasan Perguruan Panca Jaya Galang</p> </div>

<div class="isi-menu"> <?php

include('koneksi/koneksi.php');

$query="select *from fasilitas order by id_gambar asc"; $data=mysql_query($query);

$data2=mysql_fetch_array($data); ?>

<ul>

<li><a href="menu/profil/profil.php" title="Profil YP Panca Jaya Galang"><img id="gambar-p" src="gambar/icon-building.png" >Profil</a></li>

<li> <a href="menu/staff/staff.php?nuptk=5249749651200033" title="Daftar-Daftar Guru"> <img id="gambar-s" src="gambar/teacher.png" >Staff Pengajar</a></li>

<li> <a href= "menu/fasilitas/fasilitas.php?id_gambar=<?php echo $data2['id_gambar']; ?>" title= "Fasilitas yang Ada di YP Panca Jaya Galang"> <img id= "gambar-f" src= "gambar/facility.png">fasilitas</a></li>

<li> <a href= "menu/kesiswaan/kesiswaan.php?menu=menu1" title="Kesiswaan"> <img id= "gambar-k" src= "gambar/siswa.png"> Kesiswaan</a></li> </ul> </div> </div> <div class="wrapper-content"> <div class="content"> <div class="kiri-home"> </div> <div class="kanan-home">

(72)

<?php

include('demo2.html'); ?>

</head> <body>

</div>

<div id="thumbs"> <div class="thumb">

<div class="thumb-content"> <p>Gedung Perpustakaan</p> Nyaman dan Tenang Untuk Membaca</div>

<div class="thumb-content"> <p>Gedung Utama YP Panca Jaya Galang</p> Gedung Tempat Siswa & Siswi Belajar</div>

(73)

<div class="thumb-content"> <p>Penyiaran Radio Sekolah</p> Tempat Berkembangnya Informasi di YP Panca Jaya Galang</div>

<div class= "thumb-content"> <p>Siswa dan Guru Memperbaiki Mobil</p> </div>

<div style="clear:both;height:0;"></div> </div> </body> </html> 5. profil.php <html> <head> <title></title>

<img width= "200px" height= "150px" src= "../../gambar/search.png"> <p> YP.PANCA JAYA GALANG </p> <p id="sub-judul"> Yayasan Pergurusan Panca Jaya Galang </p>

</div>

<div class="isi-menu"> <?php

include('../../koneksi/koneksi.php');

$query="select *from fasilitas order by id_gambar asc"; $data=mysql_query($query);

$data2=mysql_fetch_array($data); ?>

<ul>

<li> <a href= "profil.php" title= "Profil YP Panca Jaya Galang"> <img id= "gambar-p" src="../../gambar/icon-building.png">Profil</a></li>

<li> <a href= "../staff/staff.php?nuptk=5249749651200033" title= "Daftar-Daftar Guru"> <img id= "gambar-s" width= "30px" height= "35px" src= "../../gambar/teacher.png">Staff Pengajar</a></li>

(74)

<li> <a href= "../fasilitas/fasilitas.php?id_gambar=<?php echo $data2['id_gambar']; ?>" title= "Fasilitas yang Ada di YP Panca Jaya Galang"> <img id= "gambar-f" src= "../../gambar/facility.png">fasilitas</a></li>

<li> <a href= "../kesiswaan/kesiswaan.php?menu=menu1" title= "Kesiswaan"><img id= "gambar-k" src= "../../gambar/siswa.png"> Kesiswaan </a> </li> </ul> </div> </div> <div class="wrapper-content"> <div class="content"> <div class="kiri2"> <div id="sub-menu-kiri2">

<a href= "profil.php?menu=menu1"> <img id= "gambar1" width= "30px" height= "25px" src= "../../gambar/history.png"> Sejarah Singkat YP Panca Jaya Galang </a>

</div>

<a href="profil.php?menu=menu2"><img img id="gambar2" width="25px" height="25px" src="../../gambar/home_large_icon_black.png">Profil Singkat YP Panca Jaya Galang</a>

</div>

<a href= "profil.php?menu=menu3"> <img img id= "gambar3" src= "../../gambar/misi-2.png"> Visi Misi YP Panca Jaya Galang </a>

</div>  </div> <div class="kanan"> <div id="isi-kanan-profil"> <?php error_reporting('0'); $menu=$_GET['menu']; if($menu=='menu1'){ include('link/sejarah.php'); } elseif($menu=='menu2'){ include('link/profil.php'); } elseif($menu=='menu3'){ include('link/visimisi.php'); } else include('link/sejarah.php'); ?> </div> </div> <div class="clear"></div> </div>

(75)

</div>

<p>             Sejarah Yayasan Perguruan Panca Jaya berdiri sejak tahun 1985. Yayasan ini diberi nama panca jaya berasal dari dua kata yaitu panca yang artinya lima, dan jaya yang artinya makmur. Jadi makna dari kata tersebut lima tingkat kejayaan atau kemakmuran, bebas buta huruf, bebas kemiskinan dan kaya akan pengetahuan. Pendirian yayasan ini dipelopori oleh 5 orang yang mempunyai hubungan keluarga untuk memenuhi keinginan masyarakat sekitar. Pendiri-pendiri yayasan ini antara lain sebagai berikut : J. Saragih, K. Br. Purba, J. Purba, K. Br. Saragih dan anak-anaknya.</p>

<p>      Pada awal berdirinya yayasan ini pertama kali dibuka Sekolah Menengah Pertama, Sekolah Mengah Atas dan Sekolah Menengah Kejuruan. Pada saat itu Sekolah Menengah Atas terdiri dari jurusan IPA dan IPS, kemudian Sekolah Menengah Kejuruan terdiri dari jurusan Bisnis Managemen.</p>

<p>             Selanjutnya menyusul pada tahun 2007 dibuka jurusan Teknologi Industri untuk Sekolah Menengah Kejuruan, dan pada tahun 2010 disusul dengan jurusan Teknik Komputer Jaringan.</p> </div> </div> 7. profil.php <div id="profil"> <table class="tabelprofil"> <tr>

<th >Nama Yayasan</th>

<td>: YAYASAN PERGURUAN PANCA JAYA

  GALANG</td></tr> <tr>

<th>Alamat</th><td>: JL. Sei Karang KP.Agam, Desa Galang   Kota, Deli g, Sumatera Utara</td></tr>

<tr>

(76)

<th>Tahun Berdiri</th><td>: 1985</td></tr> <tr>

<th>Kecamatan</th><td>: Galang</td></tr> <tr>

<th>Kabupaten</th><td>: Deli Serdang</td></tr> <tr>

<th>Izin No</th><td>: 173/05/A/1985</td></tr> <tr> <th>NDS.No</th><td>: G.01314202</td></tr> </table> </div> 8. visimisi.php <div id="visi-misi"> <p align="center">VISI</p>

<p align="center">Pusat Pelayanan dan Pelatihan Berstandart Nasional</p> <p align="center">MISI </p>

<ol>

<li>Mengembangkan pendidikan dan pelatihan yang sesuai dengan kebutuhan dunia usaha</li>

<li>Megembangkan pelatihan yang mampu mempertanyakan potensi masyarakat</li>

<li>Mewujudkan suasana belajar yang berakar pada norma, nilai agama dan budaya </li> </ol> </div> 9. staff.php <html> <head> <title></title>

<img width="200px" height="150px"src="../../gambar/search.png"> <p>YP.PANCA JAYA GALANG</p>

<p id="sub-judul">Yayasan Pergurusan Panca Jaya Galang</p> </div>

<div class="isi-menu"> <?php

include('../../koneksi/koneksi.php');

$query="select *from fasilitas order by id_gambar asc"; $data=mysql_query($query);

(1)

echo"

<a href= \"admin.php?kanan=detail-admin&user=

".$user."&id=".$id."&ket=admin\"> <div id=\"kotak\">

<img id=\"gambar-kotak\" src=\"gambar/admin.png\"> <p>LIHAT DATA</p>

</div> </a>

<a href= \"admin.php?kanan=edit-admin&user=

".$user."&id=".$id."&ket=admin\"> <div id=\"kotak\">

</div> </a>

<a href= \"admin.php?kanan=tambah-admin&user=

".$user."&ket=admin\"> <div id=\"kotak\">

<img id=\"gambar-kotak\" src=\"gambar/administrator_add.png\"> <p>TAMBAH</p>

</div> </a>

<a href= \"admin.php?kanan=hapus-admin&user=

".$user."&id=".$id."&ket=admin\"> <div id=\"kotak\">

<img id=\"gambar-kotak\" src=\"gambar/administrator delete.png\"> <p>HAPUS</p>

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

<div id="isi"> <?php

$kanan=$_GET['kanan']; if ($kanan=='kanan2') {

include('menu/isi/staff/isi-staff.php'); }

elseif ($kanan=='kanan4') {

include('menu/isi/fasilitas/fasilitas.php'); }

elseif ($kanan=='kanan5') {

include('menu/isi/kesiswaan/kesiswaan.php'); }

elseif ($kanan=='admin') {

include('menu/isi/admin/data-admin.php'); }

(2)

elseif ($kanan=='detail-admin' && $user==$user && $id==$id) { include('menu/isi/admin/detail-admin.php');

}

elseif ($kanan=='edit-admin' && $user==$user && $id==$id) { include('menu/isi/admin/edit-admin.php');

}

elseif ($kanan=='proses-edit-admin' && $user==$user && $id==$id) { include('menu/isi/admin/proses-edit-admin.php');

}

elseif ($kanan=='tambah-admin' && $user==$user) { include('menu/isi/admin/tambah-admin.php');

}

elseif ($kanan=='proses-tambah-admin' && $user==$user) { include('menu/isi/admin/proses-tambah-admin.php');

}

elseif ($kanan=='hapus-admin' && $user==$user) { include('menu/isi/admin/hapus-admin.php');

}

elseif ($kanan=='proses-hapus-admin' && $user==$user && $id==$id)

{

include('menu/isi/admin/proses-hapus-admin.php'); }

else{ echo "

<img id=\"home-logo\" src=\"\" alt=LOGO> ";

include('menu/isi/isi-home.php'); }

?> </div> </div>

</div> </body> </html> <?php } else{

echo "belum login"; }

13. data-admin.php

<?php

include('../../../../koneksi/koneksi.php'); echo "

(3)

<th>Foto</th> <th>ID</th><th>NAMA</th><th>PASSWORD</th> </tr>

$query="select *from Admin"; $data=mysql_query($query);

while ($data2=mysql_fetch_array($data)) { echo "

<tr>

<a href=\"admin.php?kanan=admin&user=".$user."&id=".$data2[

'id']."&ket=admin\"> <img id=\"gambar-data-admin\" src=\"foto-admin/".$data2['foto']."\"></a></td>

"; } echo " </table> "; ?>

14. detail-admin.php

<div id="detail-admin"> <?php

include('../../../../koneksi/koneksi.php'); $id=$_GET['id'];

$query="select *from admin where id='$id'"; $data=mysql_query($query);

$data2=mysql_fetch_array($data); echo "

"; ?> </div>

15. edit-admin.php

(4)

<?php

include('../../../../koneksi/koneksi.php'); $id=$_GET['id'];

$query="select *from admin where id='$id'"; $data=mysql_query($query);

$data2=mysql_fetch_array($data); echo"

<p>NAMA<p> <p>PASSWORD<p>

<input id=\"submit\" type=\"submit\" value=\"EDIT\"> ";

?> </form> </div>

16. proses-edit-admin.php

<?php

include('../../../../koneksi/koneksi.php'); $id1=$_GET['id'];

$id=$_POST['id']; $nama=$_POST['nama']; $pass=$_POST['pass'];

$lokasi_gambar=$_FILES["foto"]["tmp_name"]; $gambar=$_FILES["foto"]["name"];

if(!empty($gambar)){

move_uploaded_file($_FILES["foto"]["tmp_name"] ,"foto-admin/".$gambar); mysql_query("update admin set foto='$gambar' where id='$id1'");

}

if(!empty($pass)){

mysql_query("update admin set pass=md5('$pass') where id='$id1'"); }

$query="update admin set id='$id', nama='$nama' where id='$id1' ";

if(mysql_query($query)){ echo "berhasil";

(5)

} ?>

17. hapus-admin.php

<p>Apakah Anda Yakin Ingin Menghapus data ini?</p> <?php

include('../../../../koneksi/koneksi.php'); $id=$_GET['id'];

$query="select *from admin where id='$id'"; $data=mysql_query($query);

$data2=mysql_fetch_array($data); echo"

</form> "; ?> </div>

18. proses-hapus-admin.php

<?php

include('../../../../koneksi/koneksi.php'); $id=$_GET['id'];

$query="delete from admin where id='$id'"; if (mysql_query($query)) {

echo "Data Berhasil Di Hapus"; }

else{

echo "Data Gagal Di Hapus"; }

19. tambah-admin.php

<form method= "post" action= "admin.php?kanan=proses-tambah-admin&user=<?php echo $user;?>" enctype="multipart/form-data">

(6)

<p>NAMA</p> <p>PASSWORD</p>

</div>

20. proses-tambah-admin.php

<?php

include('../../../../koneksi/koneksi.php'); $id=$_POST['id'];

$nama=$_POST['nama']; $pass=$_POST['pass']; $pass=md5($pass); // echo

//$nuptk ."-". $nama ."-". $lahir ."-". $alamat ."-". $mapel ."-". $tugas ."-". $foto

// ;

$lokasi_gambar=$_FILES["foto"]["tmp_name"]; $gambar=$_FILES["foto"]["name"];

move_uploaded_file($lokasi_gambar,"foto-admin/".$gambar); $query="insert into admin values('$id','$nama', '$pass','$gambar')"; if(mysql_query($query)){

echo "berhasil";

// header('location:staff.php?kanan=berhasil&nuptk=$nuptk'); }

21. Koneksi.php

<?php

mysql_connect("localhost","root",""); mysql_select_db("pancajaya"); ?>

Perancangan Website pada Yayasan Perguruan Panca Jaya Galang

PERANCANGAN WEBSITE PADA YAYASAN PERGURUAN

PANCA JAYA GALANG

TUGAS AKHIR

KHAIRANI NASUTION

102406055

PROGRAM STUDI D3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2013

PERANCANGAN WEBSITE PADA YAYASAN PERGURUAN

PANCA JAYA GALANG

TUGAS AKHIR

KHAIRANI NASUTION

102406055

PROGRAM STUDI D3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2013

DEWAN GURU

LAMPIRAN A

TAMPILAN

HALAMAN

LAMPIRAN B

LISTING

Parts

Dokumen yang terkait

Pemanfaatan Koleksi Perpustakaan SMK Yayasan Perguruan Awal Karya Pembangunan (AKP) Galang

PERKEMBANGAN YAYASAN PERGURUAN ISLAM DARUL HIKMAH DI JATILUHUR BEKASI 1997.2010

Perancangan Website Perguruan Pencak Silat Tadjimalela

perkembangan yayasan perguruan islam Darul Hikmah di Jatiluhur Bekasi 1997-2010

PENGARUH MODEL PEMBELAJARAN BERBASIS MASALAH TERHADAP KEMAMPUAN MENULIS TEKS EKSPLANASI SISWA KELAS VII SMP YAYASAN PERGURUAN PANCA JAYA GALANG TAHUN PEMBELAJARAN 2014/ 2015.

Pelatihan Tari Galang Bulan Meningkatkan Kebugaran Fisik Pada Pelajar SMP Di Yayasan Perguruan Kristen Harapan Denpasar.

YAYASAN PERGURUAN PANCA SETIA SEKOLAH ME

PERANCANGAN WEBSITE EVENT YAYASAN DAARUT TAUHIID JAKARTA

LAMPIRAN A TAMPILAN HALAMAN - Perancangan Website pada Yayasan Perguruan Panca Jaya Galang

BAB 1 PENDAHULUAN 1.1 Latar Belakang Masalah - Perancangan Website pada Yayasan Perguruan Panca Jaya Galang

Dokumen yang Anda mencari sudah siap untuk unduhkan