Perancangan Sistem Informasi SMA Negeri 5 Medan Berbasis Web

(1)

Ade Yulia Sari : Perancangan Sistem Informasi Sma Negeri 5 Medan Berbasis Web, 2009.

PERANCANGAN SISTEM INFORMASI SMA NEGERI 5 MEDAN

BERBASIS WEB

TUGAS AKHIR

ADE YULIA SARI

062406117

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

(2)

PERANCANGAN SISTEM INFORMASI SMA NEGERI 5 MEDAN BERBASIS WEB

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya

ADE YULIA SARI 062406117

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

(3)

PERSETUJUAN

Judul : PERANCANGAN SISTEM INFORMASI SMA

NEGERI 5 MEDAN BERBASIS WEB

Kategori : TUGAS AKHIR

Nama : ADE YULIA SARI

Nomor Induk Mahasiswa : 062406117

Program Studi : D3 ILMU KOMPUTER

Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN

ALAM (FMIPA) UNIVERSITAS SUMATERA UTARA

Diluluskan di

Medan, Juni 2009

Diketahui / Disetujui oleh

Departemen Matematika FMIPA USU

Ketua, Pembimbing

Dr. Saib Suwilo, M.Sc Dra. Normalina Napitupulu, M.Sc NIP 131796149 NIP 131831527

(4)

PERNYATAAN

PERANCANGAN SISTEM INFORMASI SMA NEGERI 5 MEDAN BERBASIS WEB

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

(5)

ABSTRAK

Perancangan Sistem Informasi SMA Negeri 5 Medan Berbasis Web ini bertujuan

untuk mempermudah proses pencarian atau searching data dan informasi untuk

seluruh siswa SMA Negeri 5 Medan yang mengalami kesulitan dalam memperoleh

data mengenai aktivitas akademik di SMA Negeri 5 Medan tersebut. Fasilitas-fasilitas

yang terdapat dalam aplikasi ini berupa penyediaan data dan informasi mengenai

berita- berita terbaru, profil agenda kegiatan, dan data- data yang berguna untuk

kelangsungan belajar siswa. Pada proses pembuatan aplikasi ini perangkat lunak

yang digunakan adalah PHP ( terdiri dari Apache Server dan MySQL ) sebagai

bahasa pemrograman dengan mengunakan PHP 5.0, Macromedia Dreamweaver 8

(6)

(7)

(8)

5.4.12 Halaman Absensi Guru 64

5.4.13 Halaman Jadwal Guru Mengajar 64

5.4.14 Halaman Profil Guru 65

5.4.15 HalamanUtama Admin 65

5.4.16 Halaman Data Kelas 66

5.4.17 Halaman Created 66

5.4.18 Halaman Edit Absensi Guru 67

5.4.19 Halaman Edit Berita 67

5.4.20 Halaman Input Data Jadwal 68

5.4.21 Halaman Input Data Guru 68

5.4.22 Halaman Input Data Nilai Siswa 69

5.5 Petunjuk Instalasi 69

Bab 6 Kesimpulan dan Saran 81

6.1 Kesimpul 81

6.2 Saran 82

Daftar Pustaka 83

(9)

DAFTAR TABEL

Halaman

Tabel 4.1 Penjelasan Perancangan Halaman Utama Website 39

Tabel 4.2 Algoritma Umum Halaman Utama Website 40

Tabel 4.3 Penjelasan Perancangan Halaman Admin 42

Tabel 4.4 Algoritma Halaman Utama Admin 42

Tabel 4.5 Penjelasan Perancangan Halaman Utama Siswa 43

Tabel 4.6 Algoritma Umum Halaman Utama Siswa 44

Tabel 4.7 Penjelasan Perancangan Halaman Utama Guru 45

Tabel 4.8 Algoritma Umum Halaman Utama Guru 46

Tabel 4.9 Algoritma Login Admin 47

Tabel 4.10 Algoritma Login Guru 47

Tabel 4.11 Algoritma Login Siswa 48

Tabel 4.12 Algoritma Pengolahan Jadwal 48

Tabel 4.13 Algoritma Pengolahan Absensi Siswa 49

Tabel 4.14 Algoritma Pengolahan Nilai Siswa 49

Tabel 4.15 Algoritma Pengolahan Absensi Guru 50

Tabel 4.16 Jajak 51

Tabel 4.17 Halaman Berita 51

Tabel 4.18 Siswa 52

Tabel 4.19 Absensi Siswa 52

Tabel 4.20 Absensi Guru 52

Tabel 4.21 Guru 53

Tabel 4.22 Mata Pelajaran 53

Tabel 4.23 Nilai 53

Tabel 4.24 Agenda 54

Tabel 4.25 Jadwal 54

(10)

Tabel 4.27 Profil 54

Tabel 4.28 Semester 54

Tabel 4.29 User 55

Tabel 4.30 Buku Tamu 55

(11)

DAFTAR GAMBAR

Halaman

Gambar 3.1 Struktur Organisasi SMA Negeri 5 Medan 26

Gambar 4.1 Struktur Menu Utama 35

Gambar 4.2 Perancangan Halaman Utama Website 39

Gambar 4.3 Perancangan Halaman Utama Admin 41

Gambar 4.4 Perancangan Halaman Utama Siswa 43

Gambar 4.5 Perancangan Halaman Utama Guru 45

Gambar 5.1 Halaman Utama 58

Gambar 5.2 Halaman Guestbook 59

Gambar 5.3 Halaman News 59

Gambar 5.4 Halaman Visi Misi 60

Gambar 5.5 Halaman Profil 60

Gambar 5.6 Halaman Utama Siswa 61

Gambar 5.7 Halaman Absensi Siswa 61

Gambar 5.8 Halaman Nilai Siswa 62

Gambar 5.9 Halaman Jadwal Siswa 62

Gambar 5.10 Halaman Profil Siswa 63

Gambar 5.11 Halaman Utama Guru 63

Gambar 5.12 Halaman Absensi Guru 64

Gambar 5.13 Halaman Jadwal Guru Mengajar 64

Gambar 5.14 Halaman Profil Guru 65

Gambar 5.15 Halaman Utama Admin 65

Gambar 51.6 Halaman Data Kelas 66

Gambar 5.17 Halaman Created 66

Gambar 5.18 Halaman Edit Absensi Siswa 67

(12)

Gambar 5.20 Halaman Input Data Jadwal 68

Gambar 5.21 Halaman Input Data Guru 68

Gambar 5.22 Halaman Input Data Nilai 69

Gambar 5.23 Pemilihan Instalasi 70

Gambar 5.24 Instalasi Apche Sukses 71

Gambar 5.25 Test PHP 74

(13)

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Dewasa ini perkembangan teknologi informasi dan teknologi komputer berkembang

dengan sangat pesat. Kebutuhan tersebut semakin diminati oleh semua kalangan

masyarakat, baik masyarakat awam maupun kaum intelektual. Hal ini berkaitan

dengan kegiatan-kegiatan yang sering dilakukan manusia yang biasanya dilakukan

secara manual dan tradisional, kini akan semakin lebih cepat dan tepat jika dilakukan

dengan bantuan mesin yaitu teknologi komputer. Dengan pemanfaatan teknologi

komputer tersebut juga dapat menghemat segala sesuatu, baik itu tenaga, waktu,

maupun biaya, sehingga pengeluaran untuk itu dapat ditekan seminimal mungkin.

Sistem Informasi di SMA Negeri 5 Medan khususnya dalam beberapa bidang

diantaranya penilaian, penjadwalan, dan absensi siswa masih menggunakan sistem

manual, sehingga mempersulit dalam pencarian data. Hal tersebut dapat

mengakibatkan berkurangnya kinerja SMA Negeri 5 Medan ini. Oleh sebab itu

penulis tertarik membuat tugas akhir dengan judul ”Perancangan Sistem Informasi

SMA Negeri 5 Medan Berbasis Web” .

Perancangan Sistem Informasi SMA Negeri 5 Medan Berbasis Web ini berisi

data dan informasi mengenai SMA Negeri 5 Medan yang terdiri dari data guru, data

(14)

mengenai perkembangan dunia pendidikan yang ada, serta jadwal pengajaran.

Aplikasi ini dirancang oleh sistem operasi Windows XP SP2 yang didukung oleh

software Web Server Apache, web scripting PHP dan MySQL sebagai Database

server. Selain itu, aplikasi web ini juga didukung bahasa pemrograman web lainnya

seperti HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) serta

menggunakan Website editor Macromedia Dreamweaver 8 sebagai aplikasi

perancangan layout.

Administrator dalam aplikasi ini adalah anggota Tata Usaha yang diberi

wewenang untuk mengatur jalannya aplikasi ini. Misalnya mengatur hak akses user.

Pengguna / user yang kami maksud dalam aplikasi ini adalah siswa- siswi SMA

Negeri 5 Medan yang diberi hak akses oleh administrator, hak akses yang diberikan

oleh administrator adalah hanya untuk melihat data nilai, data jadwal, dan data absensi

siswa- siswi tersebut. Sehingga dapat mendukung peningkatan produktifitas dan

peningkatan kinerja SMA Negeri 5 Medan.

1.2 Identifikasi Masalah

Berdasarkan latar belakang di atas ada beberapa masalah yang melatar belakangi

pembuatan aplikasi ini, diantaranya :

a. Pengelolaan data nilai, data jadwal, dan data absensi masih menggunakan

(15)

b. Masih kurangnya prediksi data nilai, data jadwal, dan data absensi siswa yang

dapat membantu dalam pengolahan data akademik secara cepat, akurat dan

terpercaya.

c. Laporan data hasil penilaian, absensi siswa, dan jadwal mata pelajaran yang

masih manual.

1.3 Tujuan Masalah

Ada beberapa tujuan yang ingin dicapai setelah dibuatnya aplikasi ini yaitu:

a. Pengelolaan data nilai, data jadwal, dan data absensi menjadi sistematis.

b. Memberikan pengolahan data akademik secara cepat, akurat, dan terpercaya.

c. Memberikan hasil Laporan data hasil penilaian, absensi siswa, dan jadwal

mata pelajaran menjadi lebih cepat dalam penyampaian laporan kepada pihak

Kepala Sekolah.

(16)

Dalam merancang Sistem Informasi ini terdapat beberapa batasan,yaitu:

a. Aplikasi Sistem Akademik ini merupakan aplikasi yang cukup sederhana,

sehingga tidak terlalu banyak fitur di dalamnya.

b. Aplikasi ini hanya mengatur data nilai siswa, data absensi, dan data

penjadwalan.

c. Aplikasi ini hanya khusus digunakan oleh kalangan sekolah saja termasuk

siswa- siswi.

1.5 Metode Penelitian

Metode penelitian yang digunakan dalam penelitian ini terdiri dari 2 macam, yaitu :

1. Studi Pustaka

Studi pustaka dilakukan dengan cara mempelajari teori-teori literature dan

buku-buku yang berkaitan dengan Tugas Akhir penulis.

2. Studi Lapangan

a. Interview (wawancara)

Yaitu pengumpulan data dengan cara mengadakan wawancara secara

(17)

b. Observasi (pengamatan)

Yaitu teknik pengumpulan data secara langsung dilapangan sehingga

memperoleh data yang lebih akurat dan keterangan yang cukup jelas.

1.6 Tinjauan Pustaka

Dalam pembuatan tugas akhir ini penulis mengunakan empat buku yang menjadi

acuan dalam pembuatan tugas akhir, yaitu:

1. Peranginangin,Kasiman. 2006. Aplikasi Web dengan PHP dan MySQL.

Yogyakarta:Penerbit Andi.

Dimana dalam buku ini menjadi acuan dalam pembuatan program yang

menggunakan bahasa script PHP dalam pengembangan Web pada dokumen

HTML.

2. Jogiyanto. 2005. Analisis dan Desain. Yogyakarta: Penerbit Andi.

Buku ini menjadi tuntunan penulis dalam pembuatan sistem penulisan pada

tugas akhir.

(18)

Buku ini menjadi acuan penulis dalam pembuatan database.

4. Selain ketiga buku di atas, penulis juga menggunakan beberapa pendukung

lainnya yang menjadi referensi dalam pembuatan tugas akhir ini.

1.7 Sistematika Penulisan

Sistematika penulisan tugas akhir ini terdiri dari :

BAB 1 PENDAHULUAN

Bab ini berisikan mengenai latar belakang masalah, identifikasi

masalah, tujuan masalah, batasan masalah, metode penelitian, tinjauan

pustaka, dan sistematika penulisan.

BAB 2 LANDASAN TEORI

Pada bab ini diuraikan teori yang mendukung perancangan aplikasi ini.

BAB 3 GAMBARAN SEKILAS SMA NEGERI 5 MEDAN

Bab ini berisikan tentang profil SMA Negeri 5 Medan, struktur

organisasi SMA Negeri 5 Medan, uraian tugas dan fungsi organisasi,

(19)

BAB 4 PERANCANGAN SISTEM

Di dalam bab akan dijelaskan tentang penentuan bentuk dari

kebutuhan aplikasi pada saat membangun maupun pada saat

implementasi.

BAB 5 IMPLEMENTASI SISTEM

Bab ini menguraikan tentang definisi, tujuan, dan langkah-langkah

dalam implementasi sistem juga disertai dengan komponen-komponen

kebutuhan sistem.

BAB 6 KESIMPULAN DAN SARAN

Berisi pencapaian tujuan dari aplikasi yang dibuat. Saran berisi hal-

hal yang dirasakan masih belum sempurna.

BAB 2

(20)

2.1 Pengertian Komputer

Kata komputer berasal dari bahasa Inggris yaitu “to compute” yang artinya menghitung. Bila ditinjau dari asal kata maka komputer adalah alat hitung atau mesin hitung. Tentu saja orang berpandangan komputer sama dengan kalkulator. Pandangan ini tentunya salah karena komputer bukanlah kalkulator.

Menurut buku Computer Today (Donald H.Sanders), ”Komputer adalah

sistem elektronik untuk memanipulasi data yang cepat dan tepat serta dirancang dan

diorganisasikan supaya secara otomatis menerima dan menyimpan data input,

memprosesnya dan menghasilkan output dibawah pengawasan suatu langkah

instruksi-instruksi program yang tersimpan di memori”.

2.2 Pengertian Sistem

Fatansyah (Basis data 1999, hal 9), ”Sistem merupakan suatu tatanan yang terdiri atas

sejumlah komponen fungsional (dengan satuan fungsi atau tugas khusus) yang saling

berhubungan secara bersama-sama yang bertujuan untuk memenuhi suatu proses atau

(21)

Jogiyanto H.M (Pengenalan Komputer, 2000, hal 683), ” Sistem adalah suatu

kesatuan yang terdiri dari dua atau lebih komponen atau subsistem yang saling

berinteraksi untuk mencapai suatu tujuan” .

Dari beberapa uraian diatas mengenai defenisi sistem, penulis dapat

menyimpulkan pengertian dari sistem yang berkaitan dengan judul, yaitu ”Sistem

adalah suatu cara yang dibuat sedemikian rupa yang terdiri dari dua elemen atau lebih

yang saling berhubungan untuk mengatasi masalah atau kendala-kendala yang terjadi

dengan tujuan yang diinginkan.

2.3 Pengertian Informasi

Informasi didefenisikan sebagai sesuatu yang nyata atau setengah nyata yang dapat

mengurangi derajat ketidakpastian tentang suatu keadaan atau kejadian (Analisi,

Design, dan Implementasi Sistem Informasi, Henry C.Lucas Jr, Erlangga).

Jogiyanto H.M (Analisis Dan Desain Sitem Informasi Pendekatan

Terstruktur Teori Dan Praktek Aplikasi Bisnis, 1989, hal 8), ”Informasi adalah data

yang diolah menjadi bentuk yang lebih berguna dan lebih berarti bagi yang

menerimanya.

(22)

Sistem informasi adalah suau cara tertentu untuk menyediakan informasi yang

dibutuhkan oleh organisasi untuk beroperasi dengan cara yang sukses dan untuk

organisasi bisnis dengan cara yang menguntungkan. Dalam beberapa permasalahan

sistem informasi selalu dititikberatkan kepada dan bagaimana dalam menghasilkan

sebuah informasi dan saran apa yang harus dilengkapi sebagai pendukung yang handal.

Perlu diperhatikan bahwa informasi yang digunakan di dalam suatu sistem informasi

pada umumnya dapat digunakan.

Jogiyanto H.M (Analisa Dan Desain Sistem Informasi Pendekatan

Terstruktur Teori Dan Praktek Aplikasi Bisnis, 1989, hal 11), ” Sistem Informasi

adalah suatu sistem di dalam suatu organisasi yang mempertemukan kebutuhan

pengolahan transaksi harian, bersifat manajerial dan kegiatan strategi dan suatu

organisasi dan menyediakan pihak luar tertentu dengan laporan-laporan yang

diperlukan” .

2.5Syarat-Syarat Merancang Sistem Informasi Berbasis Web

Adapun syarat- syarat agar terbentuknya sebuah website adalah;

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

(23)

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

(24)

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 lakukan dengan internet, apakah akan

mengakses situs web melakukan transfer file, mengirim email dan sebagainya.

Sejarah 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 e-mail yang

ia ciptakan setahun yang lalu untuk ARPANET. Program e-mail ini begitu mudah,

sehingga langsung menjadi populer. Pada tahun yang sama, icon @ 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

(25)

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,

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 e-mail 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

(26)

jumlah komputer yang tersambung dengan jaringan. Pada 1987 jumlah komputer yang

tersambung ke jaringan melonjak 10 kali lipat menjadi 10.000 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 100.000 komputer kini membentuk sebuah jaringan. Tahun 1990 adalah tahun

yang paling bersejarah, ketika Tim Berners Lee menemukan program editor dan

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 3.000 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 150.000 dollar AS. Tahun 1998, situs

(27)

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.7 Pengertian Web Server

Web server adalah perangkat lunak server yang berfungsi menerima permintaan

HTTP atau HTTPS dari client yang dikenal dengan nama web browser dan akan

mengirim kembali hasilnya dalam bentuk halaman – halaman web yang umumnya

berbentuk dokomen HTML. Salah satu web server yang banyak dipakai adalah

Apache. Apache merupakan web server antara platform yang dapat berjalan di

beberapa flatfrom seperti Linux dan Windows.

2.8 HTML (HyperText Markup Language)

2.8.1 Pendahuluan HTML

HTML atau yang memiliki kepanjangan Hypertext Markup Language adalah script

dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML

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“

(28)

dimana kita bisa mengatur judul, garis, tabel, gambar, dan lain-lain dengan perintah

yang telah ditentukan pada elemen HTML.

2.8.2 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

bagian-bagian HTML perhatikan skema dibawah ini :

<html>

<head>

<title>…</title>

</head>

<body>

… isi dari halaman web …

</body>

</html>

Keterangan:

1. Dokumen HTML selalu diawali dengan tanda tag pembuka <html> dan

(29)

2. Pada elemen head <head>, dapat kita sisipkan kode-kode untuk

menuliskan keterangan tentang dokumen HTML, atau dapat juga kita

sisipkan scripts-scripts pemograman web seperti JavaScript, VBScripts,

atau CSS untuk menambah daya tarik pada situs yang kita buat agar lebih

menarik dan dinamis.

3. Elemen <body> </body> berisi tag-tag untuk isi atau layout tampilan

pada situs, seperti : <font> </font>, <table>, </table>, <form>, </form>.

Tag adalah kode-kode yang digunakan untuk mem_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 sebagainya.

2.9 Pengenalan PHP (Personal Home Page)

2.9.1 Sejarah 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

(30)

server sedangkan yang dikirimkan kepada browser adalah hasil proses dari skrip

tersebut yang sudah berbentuk HTML.

PHP dibuat pada tahun 1994 oleh Rasmus Lerdof. Tetapi dikembangkan oleh

orang lain dan setelah melalui tiga kali karya penulisan, akhirnya PHP menjadi bahasa

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.

2.9.2 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. Dapat digunakan di berbagai mesin

dijalankan secara runtime melalui console serta juga dapat menjalankan

(31)

Adapun Kelemahan PHP adalah :

1. Tidak ideal untuk pengembangan skala besar.

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.

2.9.3 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

(32)

Contoh penulisan Embedded Script dapat dilihat di bawah ini :

<html>

<head>

<title>Testing</title>

</head>

<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>’;

(33)

echo ‘</body>’;

echo ’</html>’;

?>

2.10 Pengenalan MySQL

MySQL adalah sebuah aplikasi Relational Database Managemen Server (RDBMS).

Dengan menggunakan MySQL server, maka data dapat diakses oleh banyak pemakai

secara bersamaan. MySQL menggunakan bahasa SQL ( structure Query Language )

yaitu bahasa pemrograman standar yang digunakan untuk mengakses server database.

Tiap database memiliki tabel-tabel, tiap table memiliki field-field. Umumnya

informasi tersimpan dalam tabel-tabel yang secara logis merupakan struktur-struktur

dimensi terdiri atas baris dan kolom. Field-field tersebut dapat berupa data seperti int,

real, char, date, time, dan lainnya.

MySQL memiliki keunggulan, diantaranya :

a. Bekerja pada berbagai plat form ( tersedia berbagai versi untuk berbagai

sistem operasi ).

b. Pengaksesan database dapat dilakukan dengan mudah.

c. Memiliki jenis kolom yang cukup banyak sehingga memudahkan konfigurasi

(34)

d. Mendukung record yang memiliki kolom dengan panjang tetap atau panjang

bervariasi, dan masih banyak keunggulan lainnya.

e. MySQL dan PHP saling terintegrasi , maksudnya adalah pembuatan data

base dengan menggunakan sintak PHP dapat dibuat. Sedangkan input yang

dimasukkan melalui aplikasi web yang menggunakan skrip server side

seperti PHP dapat langsung dimasukkan ke data base MySQL yang ada di

server dan tentunya web tersebut berada di sebuah web server.

Pemakaian Dasar SQL

Pemakaian dasar SQL adalah sebagai berikut:

1. Mendefinisikan Tabel

CREATE TABLE NAMA_TABLE (DEFINISI_TABLE);

Contoh: CREATE TABLE MAHASISWA ( NAMA VARCHAR(20),

ALAMAT VARCHAR(255), PASSWORD VARCHAR(10) );

2. Menyimpan data

INSERT INTO NAMA_TABLE (DAFTAR_FIELD) VALUES

(DAFTAR_NILAI);

Contoh: INSERT INTO MAHASISWA (NAMA, ALAMAT, PASSWORD)

(35)

3. Mengambil data

SELECT DAFTAR_FIELD FROM NAMA_TABLE KONDISI;

Contoh: SELECT NAMA FROM MAHASISWA;

4. Mengubah data

UPDATE NAMA_TABEL SET DATA_FIELD_LAMA WHERE

DATA_FIELD_BARU;

Contoh:UPDATE MAHASISWA SET nama = 'ade' WHERE nama = 'delia';

5. Menghapus data

DELETE FROM NAMA_TABLE KONDISI

Contoh: DELETE FROM MAHASISWA WHERE NAMA='ade';

2.11 Pengenalan CSS (Cascading Style Sheet)

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

(36)

2.12 Pengenalan Macromedia Dreamweaver 8

Macromedia Dreamweaver adalah sebuah editor HTML profesional untuk mendesain

secara visual dan mengelola situs Web maupaun halaman Web.Saat ini Dreamweaver

merupakan software utama yang digunakan oleh web desainer maupun web

programmer dalam membangun suatu situs web. Dreamweaver memberikan

kemudahan bagi penggunanya dalam menentukan ruang kerja yang diinginkan.Tipe

ruang kerja ditentukan berdasarkan kebutuhan maupun kebiasaan pemakainya. Ruang

kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas

dan efektifitas dalam desaian maupun dalam membangun sebuah situs web (Isak

Rickyanto, 2002).

Macromedia Dreamweaver 8 telah mengalami banyak perbaikan dan

peningkatan dari versi sebelumnya, yang mana user interface yang lebih baik dari

versi 4, kerena adanya peningkatan kemampuan toolbar sehingga dapat memakai

toolbar yang sudah ada atau menambahkan fungsi baru.

(37)

BAB 3

SEKILAS TENTANG SMA NEGERI 5 MEDAN

3.1 Profil SMA Negeri 5 Medan

SMA Negeri 5 Medan berada di Jalan Pelajar No.17 Medan. Sekolah ini didirikan

pada tahun 1963. Seperti sekolah-sekolah lain pada umumnya memiliki ruang kelas

untuk kegiatan belajar mengajar siswa-siswanya serta dukungan laboratorium untuk

pelaksanaan praktikum. Untuk pelaksanaan kegiatan olah raga sekolah ini sudah

dilengkapi dengan lapangan basket, lapangan volley dan lapangan futsal, serta

lapangan untuk lompat jauh. Untuk mendukung kegiatan siswa dalam belajar terdapat

perpustakaan, laboratorium komputer, laboratorium bahasa dan laboratorium IPA

serta fasilitas lainnya untuk menunjang kegiatan belajar siswa dengan tidak

mengesampingkan moral dan ahlak siswa dengan adanya tempat ibadah seperti

mushola dan kegiatan-kegiatan keagamaan seperti pesantren kilat dan kebangkitan

(38)

3.2 Struktur Organisasi

Gambar 3.1 Struktur Organisasi SMA Negeri 5 Medan

Kepala Sekolah

Drs. Salmi Effendi, M.Pd

Tata Usaha

Drs. L. Hasibuan

Komite Sekolah

H. Firdaus Nasution

Bidang Kurikulum

Drs. M. Nainggolan

Bidang HUMAS

Drs. Zulkifli Lbs

Siswa / i Wali Kelas

Bidang Kesiswaan

Drs. H. Simamora

Bidang SAR / PRA

H. Nilam Cahaya, Spd

BP / BK

(39)

3.3 Uraian Tugas dan Fungsi Organisasi

3.3.1 Kepala Sekolah

Kepala Sekolah berfungsi dan bertugas sebagai edukator, manejer, administrator,

supervisor serta pemimpin / Leader inovator.

3.3.2 Wakil Kepala Sekolah

Wakil Kepala Sekolah bertugas membantu Kepala Sekolah dalam kegiatan:

1. Menyusun kurikulum.

2. Mengatur segala program kesiswaan.

3. Merencanakan kebutuhan sarana dan prasarana.

4. Mengatur dan mengembangkan hubungan dengan masyarakat.

5. Mengatur dan mengawasi penyelenggaraan program pendidikan.

6. Mengatur mutasi siswa.

7. Menyusun program kegiatan ekstrakurikuler.

(40)

3.3.3 Tata Usaha

Kepala Tata Usaha mempunyai tugas melaksanakan ketatausahaan sekolah dan

bertanggung jawab kepada kepala sekolah dalam kegiatan-kegiatan sebagai berikut:

1. Penyusunan program kerja tata usaha sekolah.

2. Pengolahan keuangan sekolah.

3. Penyusunan administrasi perlengkapan sekolah.

4. Penyusunan laporan pelaksanaan kegiatan pengurusan ketatausahaan

secara umum.

3.3.4 Komite Sekolah

Membantu sekolah dalam hal:

1. Peningkatan kegiatan sekolah.

2. Peningkatan kesejahteraan guru dan pegawai.

3.3.5 Bidang Sarana dan Prasarana

Tugas yang dilakukan disini adalah:

(41)

2. Pengawasan dalam hal sarana dan prasarana yang ada.

3.3.6 Bidang Kurikulum

Membantu Kepala Sekolah dalam hal:

1. Pelaksanaan kur ikulum.

2. Pemberian tugas guru.

3. Mengawas jadwal pelaksanaan KBM.

4. Administrasi kurikulum dan penelitian.

5. Konsultasi dengan Kepala Sekolah.

3.3.7 Bidang Kesiswaan

Membantu Kepala Sekolah dalam bidang:

1. Pembinaan disiplin sekolah.

2. Koordinator pembinaan siswa.

3. Koordinator pelaksana kegiatan intra / ekstrakulikuler.

4. Koordinator kegiatan sekolah.

3.3.8 Bidang Humas (Hubungan Masyarakat)

(42)

1. Hubungan sekolah, masyarakat , dan pemerintah.

2. Hubungan sekolah dengan perguruan tinggi.

3. Penelusuran tamatan.

4. Penelitian

5. Konsultasi dengan Kepala Sekolah.

3.3.9 Guru

Guru bertanggung jawab kepada kepala sekolah dan mempunyai tugas melaksanakan

kegiatan proses belajar mengajar secara efektif dan efisien.

3.3.10 Wali Kelas

Membantu kepala sekolah dalam kegiatan:

1. Pengelolaan kelas.

2. Penyelenggaraan administrasi kelas.

3. Pembuatan catatan khusus tentang siswa.

4. Penyusunan statistik bulanan siswa.

(43)

3.3.11 Guru Pembimbing dan Konseling (BP / BK)

Bertugas membantu Kepala Sekolah dalam penyusunan dan pelaksanaan

pembimbingan dan konseling di sekolah.

3.4 Visi, Misi, dan Motto Sekolah

3.4.1 Visi Sekolah

Mempersiapkan lulusan sebagai calon pemimpin yang memiliki wawasan iman dan

taqwa (IMTAK) serta IPTEK yang handal, berbudi pekerti luhur, daya juang kuat,

integritas tinggi, berwawasan lingkungan mandiri serta mempunyai kemampuan

intelektual (IQ), kemampuan emosional (EQ) dan kemampuan spiritual (SQ) yang

tinggi serta kepribadian utuh dan kokoh.

3.4.2 Misi Sekolah

1. Mewujudkan kultur lingkungan belajar yang aman, tentram, nyaman dan kondisif.

2. Menyiapkan para lulusan terampil dan mampu berkomunikasi bahasa inggris dan

mengoperasikan komputer secara maksimal.

3. Mewujudkan sekolah yang efektif, yang memiliki profil kuat, mandiri, kreatif,

(44)

4. Menyiapkan lulusan yang potensial, sehingga mampu meraih kursi di perguruan

tinggi negeri yang favorit sesuai dengan apa yang didambakan oleh setiap siswa.

5. Memepersiapkan lulusan yang memiliki skil (keterampilan) bagi yang ingin terjun

ke dunia kerja.

3.4.3 Motto Sekolah

R : Rapi

E : Elok

F : Familiar

O : Orangnya

R : Ramah

M : Menyenangkan

A : Aman

S : Serasi

(45)

BAB 4

PERANCANGAN SISTEM

4.1 Perancangan Sistem

Tahap perancangan merupakan tahap awal yang dilakukan penulis dalam membangun

situs web. Pada tahap ini penulis akan menjabarkan awal perancangan sistem, diagram

alur, tujuan dan isi yang akan dibangun. Situs ini sendiri dirancang dengan

menggunakan PHP sebagai bahasa pemogramannya, MySQL sebagai databasenya

serta Dreamweaver 8 sebagai media untuk membuat layoutn dari situs yang telah

dirancang.

Sebelum membangun sebuah situs, ada beberapa pertanyaan sebagai

identifikasi awal yang perlu dilakukan,antara lain:

1. Website apa yang akan dibuat?

2. Siapa saja pengunjung yang diharapkan berkunjung ke website tersebut?

3. Kegiatan apa saja yang dapat pengunjung lakukan didalam website tersebut?

(46)

Dengan menjawab pertanyaan-pertanyaan di atas, maka akan semakin

memperjelas dan mempermudah dalam membangun situs website tersebut. Sesuai

dengan website yang akan dibuat, maka jawaban untuk pertanyaan-pertanyaan di atas

sebagai berikut:

1. Situs akan dibuat adalah sistem informasi berbasis web yang menyediakan

segala informasi-informasi tentang sekolah tersebut, artikel mengenai

pendidikan dan kegiatan yang dilakukan sekolah.

2. Pengunjung dari website tersebut diharapkan adalah para siswa siswi, guru,

pegawai dan alumni dari SMA Negeri 5 Medan serta masyarakat luas yang

ingin tahu mengenai segala sesuatu tentang sekolah ini.

3. Aktivitas yang akan dijumpai di dalam situs tersebut adalah pengunjung dapat

mengetahui segala informasi mengenai SMA Negeri 5 Medan, informasi

tentang dunia pendidikan ataupun berita terkini, mengetahui nilai siswa.data

siswa,serta informasi penting lainnya.

4. Target yang ingin dicapai dari situs tersebut adalah dapat memberikan

kemudahan bagi para siswa dalam memperoleh informasi yang dibutuhkan

(47)

4.2 Perancangan Struktur Menu Utama

Tahap selanjutnya adalah pembuatan struktur menu yamg meliputi dari situs tersebut,

sebagai gambaran yang menampilkan struktur hirarki dan isi halaman perhalaman dan

membantu dalam menggambarkan isi dari setiap halaman dan link atau navigasi

antara halaman-halaman didalam situs website tersebut.

Adapun bentuk struktur menu utama dari situs sekolah yang penulis buat

ditunjukkan pada gambar dibawah ini:

Menu Pengunjung

Akses guestbook

Lihat guestbook

Menu Administrator Menu Siswa Menu Guru

Lihat news

Lihat visi misi

Lihat profil

Lihat data siswa dan data guru Sistem web Sma Negeri 5

(48)

Gambar 4.1 Struktur Menu Utama

Struktur menu untuk aplikasi ini meliputi 4 user yaitu : Administrator,

Pengunjung, Guru, dan Siswa, masing – masing user tersebut memiliki tugas sebagai

berikut :

a. Administrator mempunyai tugas untuk mengelola nilai siswa, jadwal dan

absensi siswa dan guru, tidak hanya itu admin juga dapat melihat apakah

sistem yang di buat dapat berjalan dengan ketentuan.

b. Pengunjung yang penulis maksud disini selain para siswa-siswi dan juga

guru tapi juga terdapat pengunjung umum yang hannya dapat memperoleh

informasi yang disajikan pada website tersebut.Pengunjung umum hannya

dapat melihat isi dari website tersebut tanpa dapat mengubah,menambah, dan

menghapus isi dari website tersebut.

c. Guru mempunyai tugas memberikan nilai kepada siswa, mengabsen siswa,

memberikan penilaian ujian siswa. Data- data ini diberikan kepada tata

usaha untuk diinputkan kedalam database yang nantinya berguna untuk

siswa untuk melihat data- data tersebut

d. Siswa dapat melihat data nilai siswa yang telah diberikan guru kepada tata

(49)

profil siswa dan melihat jadwal pelajaran yang akan dilaksanakan sehari-

hari.

4.3 Perancangan Halaman Website

Adapun halaman - halaman yang dibangun oleh penulis adalah:

a. Halaman index merupakan halaman yang pertama kali muncul pada saat

website dibuka. Halaman ini berisikan artikel dan link-link menuju halaman

berikutnya.

b. Halaman home merupakan halaman yang berisikan tentang kata sambutan dari

pihak sekolah serta link-link menuju halaman berikutnya.

c. Halaman profil merupakan halaman yang berisikan tentang sejarah singkat dan

motto SMA Negeri 5 Medan.

d. Halaman berita merupakan halaman yang berisikan informasi, diantaranya

mengenai pendidikan ataupun berita terkini.

e. Halaman visi misi merupakan halaman berisikan tentang visi dan misi SMA

Negeri 5 Medan.

f. Halaman Guestbook merupakan halaman dikhususkan bagi pengunjung yang

(50)

g. Halaman admin merupakan halaman yang hanya dapat diakses oleh admin

yang mempunyai tugas untuk mengola nilai siswa, jadwal, absensi, dan tidak

hanya itu admin juga dapat melihat apakah sistem yang di buat dapat berjalan

dengan ketentuan atau tidak.

h. Halaman Guru merupakan halaman yang hannya diakses oleh guru yang

memiliki username dan password, dan disini guru mempunyai tugas

memberikan nilai kepada siswa, mengabsen siswa, memberikan penilaian ujian

siswa. Data- data ini diberikan kepada tata usaha atau yang berperan untuk

diinputkan kedalam database yang nantinya berguna untuk siswa untuk

melihat data- data tersebut.

i. Halaman Siswa hannya dapat diakses oleh siswa yang memiliki username dan

password. Halaman ini siswa dapat melihat data nilai siswa yang telah

diberikan guru kepada tata usaha tersebut, melihat data absensi siswa, melihat

profil siswa dan melihat jadwal pelajaran yang akan dilaksanakan sehari- hari.

4.4 Perancangan User Interface

Tampilan utama situs ini dirancang dengan bantuan software dreamweaver 8.

Perancangan tampilan utama pada situs ini dibagi menjadi dua bagian yaitu header

(51)

atas yang berisikan logo, sedangkan bagian isi adalah bagian terpenting karena

merupakan tempat menampilkan informasi yang akan disampaikan.

4.4.1 Perancangan Halaman Utama Website

NNNN

Gambar 4.2 Perancangan Halaman Utama Website

a. Penjelasan Rancangan Halaman Utama Website

Tabel 4.1 Penjelasan Peancangan Halaman Utama Website

Item Keterangan

Logo Bagian yang berisi bagian gambar dan logo tutwuri

handayani

(52)

dituju

Home Button yang apabila di klik akan mengelink ke halaman home pada web

Guestbook Button yang apabila di klik akan mengelink ke halaman guestbook

Tabel 4.1 Penjelasan Perancangan Halaman Utama Website (Sambungan)

News Button yang apabila di klik akan mengelink ke halaman berita

Visi dan Misi Button yang apabila di klik akan mengelink ke halaman visi misi

Profil Text box yang berisi informasi mengenai profil SMA

Negeri 5 Medan

Gambar Bagian gambar sekolah, laboraturium komputer dan

perpustakaan.

Pengunjung Text yang bertuliskan jumlah pengunjung dan pengunjung ke berapa.

Halaman Utama Text yang menampilkan menu- menu utama yang berada di tengah- tengah web ini

Login Bagian untuk masuk sebagai admin, guru, dan siswa.

Sumber inspirasi Text yang menampilkan inspirasi- inspirasi mengenai sumber acuan kehidupan

Agenda kegiatan Berisi agenda kegiatan yang akan diadakan oleh SMA Negeri 5 Medan.

Polling Berisi polling yang memuat seberapa besar web ini. Footer Teks yang berisi copyrigth pembuat web

b. Algoritma Umum Halaman Utama Website

Tabel 4.2 Algoritma Umum Halaman Utama Website

Proses Data in Data out Logika Proses

(53)

News Data news Informasi data news If (login=halaman

utama) and (pilihan=news) then Tampilan halaman news

Tabel 4.2 Algoritma Umum Halaman Utama Website (Sambungan)

Visi dan Misi Data Visi dan Misi Informasi Visi dan Misi

If (login=halaman utama) and (pilihan=visi dan misi) then

Tampilan halaman visi dan misi

Profil Data profil Informasi profil If (login=halaman

utama)

and(pilihan=profil) then

Tampilan halaman profil

(54)

Gambar 4. 3 Perancangan Halaman Utama Admin

a. Penjelasan Peancangan Halaman Utama Admin

Tabel 4.3 Penjelasan Perancangan Halaman Utama Admin

Item Keterangan

Header Bagian yang berisi bagian nama dan logo sma negeri 5

medan

Lihat tabel Button yang apabila di klik akan mengelink ke halaman lihat tabel, terdapat beberapa menu di lihat tabel ini

Tambah data Button yang apabila di klik akan mengelink ke halaman tambah data, didalamnya terdapat beberapa menu untuk tambah data

Menu utama Button yang apabila di klik akan mengelink ke halaman home admin

Tulisan berjalan Teks yang berisi tulisan berjalan.

Logout Button yang apabila di klik akan keluar dari halaman

Admin dan akan kembali kemenu utama

Tulisan berjalan

M

mmkmkm

MM

HEADER

MENU UTAMA ADMINISTRATOR

Created By Ade Yulia Sari Menu Utama >>

Lihat Tabel >>

>> Tambah Data

(55)

b. Algoritma Umum Halaman Utama Admin

Tabel 4.4 Algoritma Halaman Utama Admin

Lihat table - Hak akses admin - Lihat tabel

-Data lihat table If (login=admin) and (pilihan= lihat tabel) then

Tampilan halaman Lihat tabel

Tambah data -Hak akses admin - Tambah Data

-Informasi

Pengolahan tambah data

If (login=admin) and(pilihan=tambah data) then

Tampilan halaman tambah data

(56)

Gambar 4.4 Perancangan Halaman Utama Siswa

a. Penjelasan Perancangan Halaman Utama Siswa

Tabel 4.5 Penjelasan Perancangan Halaman Utama Siswa

Item Keterangan

Header Bagian yang berisi bagian nama dan logo sma negeri 5 medan

Logout Button yang apabila di klik akan keluar dari halaman siswa dan

akan kembali ke menu utama

Home Button yang apabila di klik akan mengelink ke halaman utama

siswa

Absensi Button yang apabila di klik akan mengelink ke halaman absensi

siswa

Nilai Button yang apabila di klik akan mengelink ke halama nilai siswa

Jadwal Button yang apabila di klik akan mengelink ke halama jadwal

mata pelajaran siswa

Profil Button yang apabila di klik akan mengelink ke halama profil

siswa

b. Algoritma Umum Halaman Utama Siswa

Tulisan berjalan

(57)

Tabel 4.6 Algoritma Umum Halaman Utama Siswa

Absensi -Hak akses admin - lihat absensi

Nilai -Hak akses admin

- lihat nilai

Jadwal -Hak akses admin - lihat jadwal

(58)

Tabel 4.6 Algoritma Umum halaman guru

Gambar 4.5 Perancangan Halaman Utama Guru

a. Penjelasan Perancangan Halaman Utama Guru

Tabel 4.7 Penjelasan Perancangan Halaman Utama Guru

Item Keterangan

Header Bagian yang berisi bagian nama dan logo sma negeri 5 medan

Logout Button yang apabila di klik akan keluar dari halaman guru dan

akan kembali ke menu utama

Home Button yang apabila di klik akan mengelink ke halaman utama

guru

Absensi Button yang apabila di klik akan mengelink ke halama absensi

guru

Nilai Button yang apabila di klik akan mengelink ke halama nilai guru

Jadwal Button yang apabila di klik akan mengelink ke halaman jadwal

mata pelajaran siswa

Profil Button yang apabila di klik akan mengelink ke halaman profil

siswa

b. Algoritma Umum Halaman Utama Guru

Tulisan berjalan

Created By Ade Yulia Sari

Header

(59)

Tabel 4.8 Algoritma Umum Halaman Utama Guru

Absensi -Hak akses admin - lihat absensi

Nilai -Hak akses admin

- lihat nilai

Jadwal -Hak akses admin - lihat jadwal

(60)

Nama Modul Deskripsi

Login Administrator Sistem melakukan validasi atas user yang masuk ke dalam sistem dengan mencocokkan id dan password dari inputan dengan id dan password serta hak akses pada database

Tabel 4.10 Algoritma Login Guru

Login Guru Sistem melakukan validasi atas user yang masuk ke dalam sistem dengan mencocokkan id dan password dari inputan dengan id dan password serta hak akses pada database

Algoritma Mulai

Masukkan id dan password Identifikasi id dan password If id dan password valid then Masuk ke halaman guru

(61)

Login Siswa Sistem melakukan validasi atas user yang masuk ke dalam sistem dengan mencocokkan id dan password dari inputan dengan id dan password serta hak akses pada database

Algoritma Mulai

Masukkan id dan password Identifikasi id dan password If id dan password valid then Masuk ke halaman siswa

Tabel 4.12 Algoritma Pengolahan Jadwal

Pengolahan Data User Dalam proses ini Administrator dapat melakukan penambahan, pengubahan, dan penghapusan data mengenai user.

Algoritma Mulai

Masukkan id dan password Identifikasi id dan password If id dan password valid then

Masuk ke halaman Administrator Pilih menu Tambah data

Klik link jadwal

Masukkan id kelas, nama mata

pelajaran,nama guru,hari, jam,id semester If input valid then

(62)

Pengolahan Absensi Siswa Dalam proses ini admin dapat melakukan penambahan, pengubahan, dan penghapusan data mengenai absensi siswa.

Algoritma Mulai

Masuk ke halaman Absensi siswa Pilih menu Tambah data

Klik link data absensi siswa

Masukkan nis,tahun, hari, id kelas, semester, id matpel, keterangan.

Tabel 4.14 Algoritma Pengolahan Nilai Siswa

Pengolahan Nilai siswa Dalam proses ini admin dapat melakukan penambahan, pengubahan, dan penghapusan data mengenai nilai siswa.

Algoritma Mulai

Masuk ke halaman Administrator Pilih menu Daftar Tambah data Klik link data nilai

Masukkan nis, id matpel, id semester, tahun, uas, uts, uh.

If input valid then

Muncul pesan “input data

(63)

Tabel 4.15 Algoritma Pengolahan Absensi Guru

Pengolahan Absensi Guru Dalam proses ini admin dapat melakukan penambahan, pengubahan, dan penghapusan data mengenai absensi guru

Algoritma Mulai

Masuk ke halaman Absensi siswa Pilih menu Tambah data

Klik link data absensi guru

(64)

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 db_proyek dengan

tabel-tabel sebagai berikut:

Tabel 4.16 Jajak

Nama Field Type Size Keterangan

NO VARCHAR 5 Primary key

TOPIK VARCHAR 25

PIL1 VARCHAR 2

PIL2 VARCHAR 2

PIL3 VARCHAR 2

VOTE1 CHAR 2

VOTE2 CHAR 2

VOTE3 CHAR 2

Tabel 4.17 Halaman Berita

ID_BERITA INTEGER 5 primary key

JUDUL_BERITA VARCHAR 100

DETAIL_BERITA TEXT

TANGGAL DATE AND TIME

(65)

NIS VARCHAR 10 Primary key

ID_KELAS VARCHAR 10

USER_NAME VARCHAR 30

AGAMA VARCHAR 15

JENIS_KELAMIN CHAR 2

TAHUN_MASUK VARCHAR 5

TEMPAT_LAHIR VARCHAR 50

TGL_LAHIR VARCHAR 50

KOTA VARCHAR 25

NIS VARCHAR 8 primary key

TAHUN VARCHAR 4

HARI VARCHAR 8

ID_KELAS VARCHAR 5 Foreign Key

SEMESTER INT 1

ID_MATPEL VARCHAR 8 Foreign Key

TANGGAL DATE

KETERANGAN VARCHAR 15

Tabel 4.20 Absen Guru

NIP VARCHAR 12 primary key

TAHUN VARCHAR 12

KELAS VARCHAR 12 Foreign Key

SEMESTER VARCHAR 12

TANGGAL DATE

(66)

NIP VARCHAR 6 Primary key

USER_NAME VARCHAR 30

AGAMA VARCHAR 15

JENIS_KELAMIN CHAR 2

TAHUN_MASUK VARCHAR 7

KOTA VARCHAR 15

CONTACT VARCHAR 16

GOLONGAN VARCHAR 20

ALAMAT VARCHAR 50

PHOTO IMAGE 100

Tabel 4.22 Mata Pelajaran

ID_MATPEL CHAR 5 primary key

NAMA_MATPEL VARCHAR 25

Tabel 4.23 Nilai

NIS VARCHAR 8 Primary key

ID_SEMESTER CHAR 2 Foreign Key

TAHUN VARCHAR 4

UAS VARCHAR 4

UTS VARCHAR 4

NH VARCHAR 4

NILAI VARCHAR 4

NM CHAR 1

(67)

ID_AGENDA INT 11 Primary key

ISI_AGENDA VARCHAR 100

TANGGAL VARCHAR 20

Tabel 4.25 Jadwal

ID_KELAS VARCHAR 8 Primary key

ID_MATPEL VARCHAR 8 Primary key

NIP VARCHAR 8

HARI VARCHAR 8

JAM VARCHAR 10

SEMESTER VARCHAR 4

Tebel 4.26 Kelas

ID_KELAS CHAR 5 primary key

NAMA_KELAS VARCHAR 25

Tabel 4.27Profil

ID_PROFIL INT 11 Primary key

ISI_PROFIL TEXT

Tabel 4.28 Semester

ID_SEMESTER INT 11 Primary key

SEMESTER VARCHAR 4

(68)

ID_USER VARCHAR 10 Primary key

PASSWORD VARCHAR 10

Tabel 4.30 Buku Tamu

NO INTEGER 410 Primary key

NAMA VARCHAR 50 Nama pengisi buku

tamu

EMAIL VARCHAR 25 Alamt email dari

pengisi buku tamu

ISI TEXT Komentar dari pengisi

buku tamu

TGL DATE TIME Tanggal pengisian

buku tamu

Tabel 4.31 Visi Misi

ID_VISI_MISI VARCHAR 10 Primary key

TAHUN YEAR

VISI VARCHAR 500

MISI VARCHAR 500

STATUS VARCHAR 100

(69)

IMPLEMENTASI SISTEM

5.1 Pengertian Implementasi Sistem

Implementasi sistem adalah prosedur-prosedur yang dilakukan dalam menyelesaikan

desain sistem yang telah disetujui seperti menginstall sistem, menguji sistem yang

dibuat dan memulai sistem baru atau sistem yang diperbaiki.

5.2 Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sistem ini adalah sebagai berikut:

1. Menyelesaikan desain sistem yang telah disetujui sebelumnya.

2. Memastikan bahwa pemakai (user) dapat mengoperasikan sistem baru

3. Menguji apakah sistem baru tersebut sesuai dengan pemakai (user).

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

rencana, mengontrol dan melakukan instalasi baru secara benar.

(70)

Dalam operasionalnya aplikasi ini menggunakan perangkat lunak, perangkat keras dan

antarmuka komunikasi sebagai berikut :

a. Perangkat Lunak (software) meliput i:

1.Sistem Operasi : Windows XP SP.2

2. Editor Teks : Macromedia Dreamweaver 8

3. Editor Grafik : Adobe Photoshop CS2

4. Server side script language : PHP 5.0

5. Web Server : Apache 2.0

6. Database server : MySQL versi 5

7. Client Application : Mozilla Firefox 3.0/ Internet Explorer

b. Kebutuhan Perangkat Keras

1. Prosesor : Pentium Dual Core Inside (1.60 GHz)

2. Memori : 1024 MB

3. Monitor : Plug and Play 14”

4. Keyboard : Standar

5. Mouse : Standar

6. Printer : Canon IP 1700

(71)

5.4.1 Halaman Utama Website

Gambar 5.1 Halaman Utama Website

Pada halaman utama terdapat beberapa menu diantaranya yaitu : Home, Guestbook,

News, Visi dan Misi, Profil, Login, Polling, Menu link Website. Sebelum kita

menggunakan aplikasi ini terlebih dahulu kita mengakses hak kita, klil menu login di

klik akan menampilkan halaman yang dituju misalnya siswa atau guru.

(72)

Gambar 5.2 Halaman Guestbook

5.4.3 Halaman News

Gambar 5.3 Halaman News

(73)

Gambar 5.4 Halaman Visi Misi

5.4.5 Halaman Profil

Gambar 5.5 Halaman Profil

(74)

Gambar 5.6 Halaman Utama Siswa

5.4.7 Halaman Absensi siswa

(75)

5.4.8 Halaman Nilai Siswa

Gambar 5.8 Halaman Nilai Siswa

5.4.9 Halaman Jadwal Siswa

Gambar 5.9 Halaman Jadwal Siswa

(76)

Gambar 5.10 Halaman Profil Siswa

5.4.11 Halaman Utama Guru

Gambar 5.11 Halaman Utama Guru

(77)

Gambar 5.12 Halaman Absensi Guru

5.4.13 Halaman Jadwal Guru Mengajar

Gambar 5.13 Halaman Jadwal Guru Mengajar

(78)

Gambar 5.14 Halaman Profil Guru

5.4.15 Halaman Utama Admin

Gambar 5.15 Halaman Utama Admin

(79)

Gambar 5.16 Halaman Data Kelas

5.4.16 Halaman Created

Gambar 5.17 Halaman Created