SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

91
SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA NEGERI 1 SERBELAWAN BERBASIS WEB TUGAS AKHIR CINDY FERRYZA 142406155 PROGRAM STUDI D3 TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA MEDAN 2017 UNIVERSITAS SUMATERA UTARA

Transcript of SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Page 1: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

SISTEM INFORMASI PENERIMAAN SISWA BARU PADA

SMA NEGERI 1 SERBELAWAN BERBASIS WEB

TUGAS AKHIR

CINDY FERRYZA

142406155

PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2017

UNIVERSITAS SUMATERA UTARA

Page 2: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

SISTEM INFORMASI PENERIMAAN SISWA BARU PADA

SMA NEGERI 1 SERBELAWAN BERBASIS WEB

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh

Ahli Madya

CINDY FERRYZA

142406155

PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2017

UNIVERSITAS SUMATERA UTARA

Page 3: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

PERSETUJUAN

Judul : Sistem Informasi Penerimaan Siswa Baru Pada

SMA Negeri 1 Serbelawan Berbasis Web

Kategori : Tugas Akhir

Nama : Cindy Ferryza

Nomor Induk Mahasiswa : 142406155

Program Studi : D3Teknik Informatika

Departemen : Matematika

Fakultas : Matematika Dan Ilmu Pengetahuan Alam

Universitas Sumatera Utara

Disetujui di

Medan, Juli 2017

Disetujui Oleh

Program Studi D3 Teknik Informatika Pembimbing,

Ketua,

Dra. Normalina Napitupulu,M.Sc Prof. Dr. Tulus, M.Si. Ph.D

NIP. 196311061989022001 NIP. 196209011988031002

UNIVERSITAS SUMATERA UTARA

Page 4: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

PERNYATAAN

SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA

NEGERI 1 SERBELAWAN 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, Juli 2017

CINDY FERRYZA

142406155

UNIVERSITAS SUMATERA UTARA

Page 5: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

PENGHARGAAN

Alhamdulillah, puji syukur penulis panjatkan ke Hadirat Allah SWT, yang

masih memberikan kesempatan dan kesehatan sehingga akhirnya Tugas Akhir ini

dapat diselesaikan dalam waktu yang telah ditetapkan dengan judul Sistem

Informasi Penerimaan Siswa Baru Pada SMA Negeri 1 Serbelawan Berbasis Web.

Terima kasih penulis sampaikan kepada Prof. Dr. Tulus, M.Si. Ph.D selaku

pembimbing yang telah meluangkan waktunya selama penyusunan Tugas Akhir ini.

Terima kasih kepada Dr. Syahriol Sitorus, S.Si, M.IT sebagai Dosen Pembimbing

Akademik yang telah membimbing dan mengarahkan selama penulis dalam proses

perkuliahan. Terima kasih kepada Ibu Dra. Normalina Napitupulu, M.Sc dan Bapak

Drs. James Piter Marbun, M.Kom selaku Ketua dan Sekretaris Program Studi

Teknik Informatika D3 FMIPA USU Medan, Dekan dan Wakil Dekan FMIPA

USU, seluruh staf dan Dosen Teknik Informatika D3 FMIPA USU, pegawai

FMIPA USU dan rekan-rekan kuliah. Akhirnya tidak terlupakan kepada Bapak, Ibu

dan keluarga yang selama ini memberi bantuan dan dorongan yang diperlukan.

Semoga Allah SWT membalasnya.

Medan, Juli 2017

Cindy Ferryza

UNIVERSITAS SUMATERA UTARA

Page 6: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA

NEGERI 1 SERBELAWAN BERBASIS WEB

ABSTRAK

Penelitian ini bertujuan untuk menghasilkan Sistem Informasi Penerimaan Siswa Baru Berbasis

Web dengan PHP dan SQL yang mampu mengelola pelaksanaan Penerimaan Siswa Baru yaitu

pendaftaran, seleksi, dan pengumuman. Sistem ini dikembangkan menggunakan Apache, PHP,

MySQL dan browser Google Chrome. Sistem ini bekerja memasukkan dan menyimpan data serta

menampilkan informasi mengenai pendaftaran siswa dari sekolah tersebut. Sehingga masyarakat

luas akan lebih mudah mengetahui informasi yang disajikan oleh pihak sekolah.

Kata Kunci : Sistem Informasi, Siswa Baru, Berbasis Web, Web, PHP, dan SQL.

UNIVERSITAS SUMATERA UTARA

Page 7: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

NEW STUDENT ACCEPTANCE INFORMATION SYSTEM IN

SMA WEB-BASED 1 SCHOOL SERBELAWAN

ABSTRACT

This study aims to produce a Web-Based Student Admissions Information System with PHP and

SQL that is able to manage the implementation of New Student Admissions namely registration,

selection, and announcement. The system was developed using Apache, PHP, MySQL and

Google Chrome browser. This system works to enter and store data and display information

about student enrollment from the school. So that the wider community will be easier to know

the information presented by the school.

Keywords: Information Systems, New Students, Web Based, Web, PHP, and SQL.

UNIVERSITAS SUMATERA UTARA

Page 8: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

DAFTAR ISI

..................................................................................................................... Halaman

Persetujuan ............................................................................................................... i

Pernyataan ............................................................................................................... ii

Penghargaan ........................................................................................................... iii

Abstrak ................................................................................................................... iv

Abstract .................................................................................................................... v

Daftar Isi................................................................................................................. vi

Daftar Tabel ......................................................................................................... viii

Daftar Gambar ........................................................................................................ ix

Bab 1. Pendahuluan ....................................................................................................

1.1 Latar Belakang ....................................................................................... 1

1.2 Perumusan Masalah ................................................................................ 2

1.3 Batasan Masalah ..................................................................................... 2

1.4 Tujuan Penelitian .................................................................................... 3

1.5 Manfaat Penelitian .................................................................................. 3

1.6 Metodologi Penelitian ............................................................................ 3

1.7 Sistematika Penulisan ............................................................................. 6

Bab 2. Landasan Teori ...............................................................................................

2.1 Pengertian Sistem .................................................................................. 8

2.2 Pengertian Informasi ............................................................................. 8

2.3 Pengertian Sistem Informasi ................................................................. 9

2.4 World Wide Web (WWW) .................................................................... 9

2.5 HTML 10

2.5.1. Pengenalan HTML 10

2.5.2. Bagian-Bagian HTML 11

2.6 Internet ................................................................................................. 12

2.7 MySQL ................................................................................................ 13

2.8 CSS ...................................................................................................... 14

2.9 Flowchart .............................................................................................. 14

2.10 Data Flow Diagram ............................................................................ 16

Bab 3. Profil Sekolah .................................................................................................

3.1 Data Sekolah ........................................................................................ 18

3.2 Visi, Misi, dan Tujuan .......................................................................... 19

3.2.1. Visi 19

3.2.2. Misi 19

3.2.3. Tujuan 20

3.3 Sasaran ................................................................................................. 20

Bab 4. Perancangan Sistem ........................................................................................

4.1 Perancangan Data Flow Diagram (DFD) ............................................ 22

4.2 Perancangan Struktur Database ......................................................... 325

UNIVERSITAS SUMATERA UTARA

Page 9: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

4.3 Perancangan Flowchart ...................................................................... 326

Bab 5. Implementasi Sistem .......................................................................................

5.1 Komponen Implementasi Sistem 30

5.1.1. Kebutuhan Perangkat Keras (Hardware) 30

5.1.2. Kebutuhan Perangkat Lunak (Software) 31

5.1.3. Unsur Manusia 32

5.2 Prosedur Penggunaan Program ............................................................ 33

5.3 Implementasi Program ......................................................................... 33

5.3.1. Halaman Utama Website 34

5.3.2. Halaman Login Admin 35

5.3.3. Halaman Data Admin 35

Bab 6. Kesimpulan dan Saran ....................................................................................

6.1 Kesimpulan 37

6.2 Saran ..................................................................................................... 38

Daftar Pustaka

Lampiran

UNIVERSITAS SUMATERA UTARA

Page 10: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

DAFTAR TABEL

Nomor Judul ................................................. Halaman

Tabel

2.1 Simbol Flowchart ................................................... 16

2.2 Simbol Data Flow Diagram ................................... 19

4.1 Admin ..................................................................... 25

4.2 Users ....................................................................... 25

4.3 Nilai ........................................................................ 26

UNIVERSITAS SUMATERA UTARA

Page 11: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

DAFTAR GAMBAR

Nomor Judul .................................................... Halaman

Gambar 4.1 Diagram Konteks .......................................................................... 23

4.2 Diagram Konteks Level 0 (Nol) .................................................... 24

4.3 Flowhchart Halaman Utama .......................................................... 27

4.4 Flowchart Halaman Login Administrator ..................................... 28

4.5 Flowchart Halaman Login Siswa .................................................. 29

5.1 Halaman Utama Website ............................................................... 34

5.2 Halaman Login Admin .................................................................. 35

5.3 Halaman Data Admin .................................................................... 36

UNIVERSITAS SUMATERA UTARA

Page 12: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Perkembangan informasi teknologi saat ini semakin pesat, kebutuhan informasi dan

pengolahan data dalam banyak aspek kehidupan manusia sangat penting. Dari

perkembangan teknologi yang demikian pesat berdampak bagi seluruh kehidupan

khususnya penyediaan informasi bagi suatu organisasi/instansi atau perusahaan

yang membutuhkan sistem pengolahan data secara cepat, tepat dan akurat. Untuk

menunjang efektifitas, produktifitas dan efisiensi dalam suatu organisasi/instansi

atau perusahaan dalam menyelesaikan masalah manajemen, terutama memberikan

pelayanan kepada calon siswa baru SMA Negeri 1 Serbelawan, maka perlu

menyusun suatu sistem pengelolaan data terkomputerisasi yang baik dan berdaya

guna. Sistem tersebut diharapkan dapat menyelesaikan tugas-tugas rutin yang

berguna dalam pengambilan keputusan oleh organisasi/instansi atau perusahaan

tersebut terutama pada SMA Negeri 1 Serbelawan.

Pengelolaan informasi pendaftaran siswa baru secara online bertujuan untuk

menciptakan kinerja yang efektif dan efisian, karena lebih mudah mendapatkan

informasi dan tidak perlu membuang banyak biaya yang harus dikeluarkan.

UNIVERSITAS SUMATERA UTARA

Page 13: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Berdasarkan uraian latar belakang diatas, penulis bermaksud mengangkat

permasalahan tersebut sebagai bahan perancangan. Oleh karena itu, penulis

memilih topik ini untuk Tugas Akhir dengan judul “SISTEM INFORMASI

PENERIMAAN SISWA BARU PADA SMA NEGERI 1 SERBELAWAN

BERBASIS WEB”.

1.2 Perumusan Masalah

Berdasarkan uraian diatas, maka permasalahan yang akan dibahas adalah

“Bagaimana merancang dan membangun Sistem informasi penerimaan siswa baru

secara online?"

1.3 Batasan Masalah

Dalam pembuatan Sistem ini penulis membatasi permasalahan yang akan dibahas

meliputi:

a. Sistem ini menyediakan informasi tentang penerimaan siswa baru.

b. Di dalam sistem kita dapat mengisi data yang diminta sekolah.

c. Aplikasi ini dibangun menggunakan bahasa pemrograman PHP, HTML dan

MySQL.

d. Menggunakan Sublime Text 2 sebagai tool dalam tahap pengkodingan dan

Google Chrome sebagai media pengujian sistem.

UNIVERSITAS SUMATERA UTARA

Page 14: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

1.4 Tujuan Penelitian

Adapun tujuan dari penelitian adalah sebagai berikut :

a. Untuk merancang dan membangun Sistem Informasi Penerimaan Siswa

Baru Pada SMA Negeri 1 Serbelawan secara online.

b. Mempermudah segala aktivitas Siswa dalam mendaftar sekolah tanpa

membuang banyak waktu.

1.5 Manfaat Penelitian

Pembuatan Sistem Informasi Penerimaan Siswa Baru di SMA Negeri 1 Serbelawan

ini memiliki beberapa manfaat, yaitu :

1. Bagi penulis, dapat melatih diri dalam menganalisis masalah, merancang

dan mendesain program, serta menambah pengetahuan tentang teknologi

informasi, khususnya yang berkaitan dengan Implementasi Sistem

Pendaftaran Siswa Baru Secara Online .

2. Bagi instansi, dapat meningkatkan pelayanan yang lebih efektif kepada

calon siswa dengan memberikan informasi-informasi yang berkaitan

dengan pendaftaran siswa baru, serta dapat mempermudah pencatatan data

untuk penerimaan siswa baru .

1.6 Metodologi Penelitian

Dalam melakukan penelitian ini, penulis menerapkan beberapa metodologi

penelitian untuk memperoleh data, merancang dan membangun aplikasi yang

UNIVERSITAS SUMATERA UTARA

Page 15: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

diinginkan. Adapun metodologi penelitian yang diterapkan penulis adalah sebagai

berikut :

1. Pengumpulan data dan informasi

a. Wawancara

Metode pengumpulan data yang dilakukan penulis dengan mengajukan

pertanyaan-pertanyaan yang telah disusun kepada narasumber yaitu

Kepala Sekolah .

b. Studi pustaka

Metode pengumpulan data dan informasi yang dilakukan penulis

dengan membaca buku-buku literatur yang ada kaitannya dengan

penelitian dan melakukan searching menggunakan internet browser

untuk tambahan data dan informasi.

2. Memahami model proses

Pada tahap ini penulis menentukan model proses apa yang digunakan dalam

pengembangan aplikasi tersebut.

3. Memahami model data

Model data adalah suatu gambaran yang menunjukkan hubungan antara

komponen data yang hendak dibuat.

4. Identifikasi masalah

Dalam penelitian ini, penulis dapat mengidentifikasi masalah yang ada

sebagai berikut:

UNIVERSITAS SUMATERA UTARA

Page 16: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

a. Pendaftaran langsung ke sekolah membuang banyak waktu dan tenaga.

b. Dalam Penerimaan siswa baru yang masih membutuhkan banyak biaya,

waktu dan proses yang masih manual dikembangkan menjadi sistem

terkomputerisasi atau sistem online.

5. Merancang konsep pembangunan sistem yang diusulkan

Konsep pembangunan sistem yang diusulkan penulis adalah merancang dan

membangun sistem informasi penerimaan siswa baru berbasis web.

6. Pembuatan program

Pembuatan program dilakukan dengan menggunakan bahasa pemrograman

PHP, HTML , MySQL, Sublime Text 2 sebagai tools dalam tahap

pengkodingan dan Google Chrome sebagai pengujian Sistem tersebut.

Pembuatan program dilakukan sesuai dengan pembangunan sistem

diusulkan.

7. Implementasi sistem

Implementasi sistem dilakukan sesuai dengan rancangan yang telah

dimodelkan. Implementasi dan pengujian hanya dilakukan pada website

yang sudah di hosting ke internet.

8. Pengujian perangkat lunak

Pengujian perangkat lunak adalah elemen kritis dari jaminan kualitas

perangkat lunak dan merepresentasikan kajian pokok dari spesifikasi,

desain dan pengkodean.

UNIVERSITAS SUMATERA UTARA

Page 17: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

9. Penulisan laporan penelitian

Penulisan laporan penelitian merupakan penulisan dari tahap-tahap awal

hingga akhir sampai pada hasil dari penelitian yang telah dilakukan.

1.7 Sistematika Penulisan

Agar dapat memberikan gambaran yang jelas pada penulisan Tugas Akhir ini, maka

penulis membaginya dalam beberapa bab sebagai berikut:

BAB 1 : PENDAHULUAN

Bab ini menguraikan tentang latar belakang pembangunan aplikasi,

perumusan masalah, batasan masalah, tujuan penelitian, manfaat

penelitian, metodologi penelitian, hingga sistematika penulisan Tugas

Akhir ini.

BAB 2 : LANDASAN TEORI

Bab ini menguraikan tentang hal-hal yang berhubungan dengan judul

seperti pengenalan sistem informasi, pengenalan HTML, World Wide

Web (WWW) , MySQL, Flowchart, DFD,.

BAB 3 : SEKILAS TENTANG SMA NEGERI 1 SERBELAWAN

Bab ini menguraikan secara singkat profil, struktur organisasi, serta visi

dan misi SMA Negeri 1 Serbelawan

UNIVERSITAS SUMATERA UTARA

Page 18: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

BAB 4 : PERANCANGAN SISTEM

Bab ini menguraikan tentang pembahasan mengenai sistem yang

dirancang.

BAB 5 : IMPLEMENTASI SISTEM

Bab ini menguraikan tentang bagaimana proses lanjutan dari

perancangan sistem. Menguraikan secara detail bagian implementasi

sistem dan menyorot apakah implementasi sesuai dengan perancangan

sistem.

BAB 6 : KESIMPULAN DAN SARAN

Bab ini menguraikan tentang kesimpulan dan saran yang dikutip oleh

penulis selama proses pembangunan aplikasi.

UNIVERSITAS SUMATERA UTARA

Page 19: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

BAB 2

LANDASAN TEORI

2.1 Pengertian Sistem

Satzinger, Jackson & Burd (2005:7) mendefinisikan sistem adalah kumpulan dari

beberapa komponen yang saling berhubungan dan berkerja bersamaan untuk

mencapai suatu hasil. Menurut O’Brien (2005:22), sistem dapat didefinisikan

secara sederhana sebagai sekelompok elemen yang saling berhubungan atau

berinteraksi hingga membentuk satu kesatuan. Sistem adalah sekelompok

komponen yang saling berhubungan, bekerja bersama untuk mencapai tujuan

bersama dengan menerima input serta menghasilkan output dalam proses

transformasi yang teratur.

2.2 Pengertian Informasi

Gordon B. Davis (1985) mendefinisikan informasi sebagai data yang telah diolah

menjadi bentuk yang lebih berarti dan berguna bagi penerimanya untuk mengambil

keputusan masa kini maupun masa yang akan datang. Informasi mempunyai ciri

benar atau salah, baru, tambahan, dan korektif. Raymond McLeod (1995)

mendefinisikan informasi sebagai data yang telah diolah menjadi bentuk yang lebih

berarti bagi penerimanya. Alat pengolah informasi dapat meliputi elemen

komputer, elemen non komputer atau kombinasinya (Al-Bahra, 2005).

UNIVERSITAS SUMATERA UTARA

Page 20: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

2.3 Pengertian Sistem Informasi

Sistem informasi adalah suatu sistem di dalam suatu organisasi yang

mempertemukan kebutuhan pengolahan transaksi harian yang mendukung fungsi

operasi organisasi yang bersifat manajerial dengan kegiatan strategi dari suatu

organisasi untuk dapat menyediakan kepada pihak luar tertentu dengan laporan-

laporan yang diperlukan (Tata Sutabri, 2004).

2.4 World Wide Web (WWW)

World wide web (biasa disingkat www) atau web adalah salah satu dari sekian

banyak layanan yang ada di internet. Layanan ini paling banyak digunakan di

internet untuk menyampaikan informasi karena sifatnya mendukung multimedia.

Artinya informasi tidak hanya disampaikan melalui teks, tapi juga gambar, video

dan suara.

Beberapa jenis web:

1. Web server adalah komputer yang tergabung dalam jaringan atau internet

yang memberikan informasi.

2. Web client adalah komputer yang terhubung dalam jaringan atau internet

yang meminta informasi. Untuk dapat mengakses web server, web client

menggunakan aplikasi yang disebut web browser. Web browser meminta

dan menerima data dari web server melalui suatu protokol yang disebut http

(hypertext transfer protocol). Protokol ini bertugas untuk mengirimkan

perintah dari web browser ke web server serta mengirimkan file atau data

UNIVERSITAS SUMATERA UTARA

Page 21: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

dari web server ke web browser. File yang dikirim dari layanan web ini

berekstensi *.htm atau *.html. HTML merupakan singkatan dari Hypertext

Markup Language, yaitu suatu bahasa yang digunakan untuk

mendefinisikan susunan informasi dalama file hypertext. Hypertext sendiri

adalah suatu struktur penyampaian informasi dimana satu atau beberapa

kata pada suatu file dapat di-link untuk mengeluarkan file baru yang

biasanya berisi informasi detail tentang kata tersebut.

2.5 HTML

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang

digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi

di dalam sebuah penjelajah web internet dan pemformatan hypertext sederhana

yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud

yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak

pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman

web dengan perintah-perintah HTML.

2.5.1 Pengenalan HTML

HTML merupakan kependekan dari Hyper Text Markup Language. Dokumen

HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang.

Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen

yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi

UNIVERSITAS SUMATERA UTARA

Page 22: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

ataupun interface aplikasi di dalam internet. HTML sendiri adalah suatu dokumen

teks biasa yang mudah dimengerti dibanding bahasa pemrograman lainnya, dan

karena bentuknya itu maka HTML dapat dibaca oleh sebagai platform seperti :

windows, linux, macintosh. Kata ”Markup Language” pada HTML menunjukkan

fasilitas yang berupa tanda tertentu dalam script HTML dimana kita bisa mengatur

judul, garis, tabel, gambar, dan lain-lain dengan perintah yang telah ditentukan pada

elemen HTML.

2.5.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 senagainya. Untuk lebih lanjut

mengenai bagian-bagian HTML perhatikan skema di bawah ini :

<html>

<head>

<title> ... </title>

</head>

<body>

... isi dari halaman web ...

</body>

</html>

UNIVERSITAS SUMATERA UTARA

Page 23: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Keterangan :

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

diakhiri dengan tanda tag penutup </html>

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

menuliskan keterangan tentang dokumen HTML. Atau dapat juga kita

sisipkan script-script pemrograman web seperti JavaScript, VBScript, atau

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

dan dinamis.

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

situs kita, seperti : <font></font>, <table></table>, </form></form>. Jadi

jelas bahwa elemen adalah suatu bagian yang besar yang terdiri dari kode-

kode tag tersebut. Sedangkan tag hanya merupakan bagian dari elemen.

Tag adalah kode-kode yang digunakan untuk men-setting dokumen HTML.

2.6 Internet

Internet (Interconnected Netwoek) merupakan jaringan komputer yang terdiri dari

ribuan jaringan komputer independen yang dihubungkan satu dengan yang lainnya.

Secara etimologis, internet berasal dari bahasa inggris yakni inter berarti antar dan

net berarti jaringan sehingga dapat diartikan hubungan antar jaringan.

Jaringan komputer ini terdiri dari lembaga pendidikan, pemerintahan, militer,

organisasi dan bisinis dan organisasi lainnya. Internet atau nama pendeknya Net

merupakan jaringan komputer yang tersebar didunia. Sampai saat ini internet sudah

UNIVERSITAS SUMATERA UTARA

Page 24: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

menghubungkan lebih dari 100000 jaringan komputer dengan pemakai lebih dari

100 juta orang. Internet adalah jaringan luas di komputer yang lazim disebut dengan

world wide network secara lebih ringkas internet adalah sumber informasi dan alat

komunikasi serta hiburan. Jaringan internet menyediakan beberapa aplikasi yang

dapat digunakan oleh user internet : E-mail, mailing list, newsgroup, file transfer

protocol (FTP), gopher, telnet, talk, chat, world wide web.

2.7 MySQL

MySQL pada awalnya diciptakan pada tahun 1979, oleh Michael "Monty"

Widenius, seorang programmer komputer asal Swedia. Monty mengembangkan

sebuah sistem database sederhana yang dinamakan UNIREG yang menggunakan

koneksi low-level ISAM database engine dengan indexing. Pada saat itu Monty

bekerja pada perusahaan bernama TcX di Swedia.

MySQL adalah sebuah implementasi dari sistem manajemen basis data

relasional (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL

(General Public License). Setiap pengguna dapat secara bebas menggunakan

MySQL, namun dengan batasan perangkat lunak tersebut tidak boleh dijadikan

produk turunan yang bersifat komersial. MySQL sebenarnya merupakan turunan

salah satu konsep utama dalam basis data yang telah ada sebelumnya, SQL

(Structured Query Language). SQL adalah sebuah konsep pengoperasian basis data,

terutama untuk pemilihan atau seleksi dan pemasukkan data, yang memungkinkan

pengoperasian data dikerjakan dengan mudah secara otomatis.

UNIVERSITAS SUMATERA UTARA

Page 25: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

2.8 CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa

komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS

bukan merupakan bahasa pemograman. Pada umumnya CSS dipakai untuk

memformat tampilan halaman web yang dibuat dengan bahasa HTML dan

XHTML.

Menurut BPTIK (Badan Pengembangan Teknologi Informasi dan

Komunikasi) CSS adalah sebuah pemrogaman atau boleh dibilang script yang

mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga

tampilan akan menjadi lebih terstruktur dan seragam.

2.9 Flowchart

Flowchart atau Bagan alir adalah bagan (chart) yang menunjukkan alir (flow) di

dalam program atau prosedur sistem secara logika. Bagan alir (flowchart)

digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi. Berikut

ini adalah simbol-simbol standar pada sebuah flowchart beserta fungsinya.

Tabel 2.1. Simbol Flowchart

No Nama Simbol Fungsi

1

Terminator

Digunakan untuk

mewakili simbol start atau

end.

UNIVERSITAS SUMATERA UTARA

Page 26: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

2 Arrow

Menunjukkan alur proses.

3 Rectangle

Menunjukkan langkah

pemrosesan.

4 Trapezium

Simbol untuk input-

output.

5 Document

Digunakan untuk

mewakili output.

6 Decision

Simbol yang berfungsi

untuk menyatakan

keputusan.

7 Preparation

Simbol yang berfungsi

untuk proses inisialisasi

atau pemberian harga

awal.

Tabel 2.1. Lanjutan

No Nama Simbol Fungsi

8 Connector

Simbol untuk keluar-

masuk atau

penyambungan proses

pada halaman yang

berbeda.

9

Manual Input

Simbol untuk

pemasukkan data secara

manual melalui keyboard.

10 Manual

Operation

Simbol yang

menunjukkan pengolahan

yang tidak dilakukan oleh

komputer.

UNIVERSITAS SUMATERA UTARA

Page 27: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

11 Predefine

Process

Simbol untuk pelaksanaan

suatu bagian (sub-

prosedur)

12 Display

Simbol yang menyatakan

peralatan output yang

digunakan seperti layar,

printer, plotter, dan

sebagainya.

13 Magnetic Disk

Simbol yang digunakan

untuk penyimpanan data

ke database.

14 Storage Data

Simbol yang menyatakan

input yang berasal dari

disk atau disimpan ke

disk.

2.10 Data Flow Diagram

Data Flow Diagram adalah alat perancangan sistem yang berorientasi pada alur

data dengan konsep dekomposisi yang dapat digunakan untuk penggambaran

analisa maupun perancangan sistem yang mudah dikomunikasikan ke pengguna

ataupun ke pembuat program.

Didalam DFD terdapat tiga level, yaitu:

1. Diagram Konteks (DFD Level 0)

Diagram konteks menggambarkan satu lingkaran besar yang dapat

mewakili seluruh proses yang terdapat dalam suatu sistem. Diagram konteks

merupakan tingkatan tertinggi dalam Data Flow Diagram dan biasanya

diberi penomoran nol.

UNIVERSITAS SUMATERA UTARA

Page 28: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

2. Diagram Nol (DFD Level 1)

Diagram nol merupakan satu lingkaran besar yang mewakili lingkaran-

lingkaran kecil yang ada pada diagram konteks. Dengan kata lain diagram

nol merupakan pemecahan dari diagram konteks.

3. Diagram Rinci

Lebih rinci lagi, diagram rinci adalah diagram yang menguraikan proses-

proses yang terdapat di dalam diagram nol.

Berikut merupakan simbol-simbol standar menurut Yourdan dan DeMarco yang

digunakan untuk membuat sebuah Data Flow Diagram.

Tabel 2.2. Simbol Data Flow Diagram

No Nama Simbol Fungsi

1 Kesatuan Luar

Sebagai kesatuan

(entitas) di lingkungan

luar sistem yang dapat

berupa orang,

organisasi, sumber asli

transaksi, atau penerima

akhir.

2 Arus Data

Berfungsi untuk

menghubungkan antara

proses, simpanan data,

dan kesatuan luar.

3 Proses

Berupa kegiatan atau

proses yang sedang

dilakukan.

4 Simpanan Data

Menunjukkan informasi

yang tersimpan.

Nama data store Media

UNIVERSITAS SUMATERA UTARA

Page 29: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

BAB 3

PROFIL SEKOLAH

3.1 Data Sekolah

Nama Sekolah : SMA NEGERI 1 SERBELAWAN

Alamat : Jln. Sisingamangaraja No.01 Serbelawan

Kode Pos : 21155

E-mail : [email protected]

Website : http://www.zufrihelmylubis.com

Kecamatan : Dolok Batu Nanggar

Kabupaten : Simalungun

N I S : 300160

N S S : 301070130037

N P S N : 10202765

Tahun didirikan : 1900

Tahun beroperasi : 1983

Luas Tanah : 12750 M2

Status Tanah dan Bangunan : Milik Pemerintahan Kabupaten Simalungun

Luas Bangunan : 3.941 M2

Nomor Rekening Sekolah : 278760963

Nama Bank : Bank BNI Cabang Pematang Siantar

UNIVERSITAS SUMATERA UTARA

Page 30: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

3.2 Visi, Misi, dan Tujuan

3.2.1 Visi

Terpuji di dalam akhlak, Terdepan di setia prestasi, Menuju masa depan yang

gemilang.

3.2.2 Misi

1. Terbentuknya warga sekolah yang beriman, bertaqwa, berakhlak mulia dan

berbudi pekerti luhur baik didalam sekolah maupun diluar sekolah

2. Melaksanankan pembelajaran di sekolah dengan menanamkan nilai-nilai

budaya dan karakter bangsa

3. Meningkatnya prestasi akademik dan non akademik melalui kegiatan

peningkatan mutu pembelajaran

4. Terciptanya budaya gemar membaca, rasa ingin tahu, bertoleransi,

bekerjasama, saling menghargai, disiplin, jujur, kerja keras, kreatif dan

inovatif

5. Mengembangkan minat, bakat dan kreativitas siswa agar tumbuh dan

berkembang sesuai dengan potensi yang dimiliki

6. Menciptakan suasana pembelajaran yang kompetitif, menyengangkan,

komunikatif, dan demokratis

7. Menciptakan lingkungan belajar yang asri dan kondusif

UNIVERSITAS SUMATERA UTARA

Page 31: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

3.2.3 Tujuan

1. Meningkatkan kecerdasan, pengetahuan, kepribadian, akhlak mulia, jujur,

serta keterampilan untuk hidup mandiri dan mengikuti pendidikan lebih

lanjut

2. Memiliki sarana dan prasarana yang cukup

3. Memilki tenaga pendidik yang kependidikan yang terampil di bidangnya

4. Terciptanya manajemen sekolah yang efektif dan efisien untuk menuju

Sekolah Standar Nasional (SSN)

5. Mengusahakan sistem pembelajaran berbasi TIK

3.3 Sasaran

1. Membuat kelas unggulan pada setiap tahun ajaran

2. Melaksanakan bimbingan test bagi siswa kelas III ( Tiga ) pada semester

ganjil

3. Mengadakan kursus bagi siswa kelas III ( Tiga ) pada semester genap

4. Melaksanakan pelatihan komputer/internet kepada setiap siswa pada sore

hari

5. Mengadakan pendekatan kepada alumni yang telah berhasil

6. Melaksanakan dan mengirim tenaga pendidik untuk mengikuti pendidikan

dan latihan, baik ditingkat daerah maupun provinsi

7. Mengadakan pengawasan bagi seluruh warga sekolah dalam melaksanakan

tugas

UNIVERSITAS SUMATERA UTARA

Page 32: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

8. Mengirim siswa untuk mengikuti kegiatan akademik maupun non akademis

di daerah maupun provinsi

9. Melaksanakan kegiatan ekstrakurikuler ( PMR dan Olahraga )

UNIVERSITAS SUMATERA UTARA

Page 33: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

BAB 4

PERANCANGAN SISTEM

Perancangan Sistem yang dilakukan merupakan analisis perangkat lunak, analisis

program dan model yang akan di buat. Oleh karena itu semua data yang ada didalam

sistem akan dikemas dalam suatu basis data,kemudian dideskripsikan kedalam

DataFlow Diagram (DFD), Entity Relationship Diagram (ERD) dan Flowchart

system.

Salah satu cara yang dapat digunakan adalah dengan membuat aliran

informasi atau flowchart (bagan alir) dari situs tersebut. Flowchart adalah suatu

bagan yang berisi seluruh tahapan/rangkaian kegiatan dalam suatu pekerjaan.

Flowchart dapat dipergunakan untuk memperinci tahap-tahap rangkaian dan suatu

proses pekerjaan. Flowchart juga dapat dipergunakan untuk menjabarkan suatu

proses pekerjaan ke dalam tahap-tahap rangkaian yang lebih spesifik untuk

pemeriksaan selanjutnya.

4.1 Perancangan Data Flow Diagram (DFD)

Data Flow Diagram (DFD) adalah alat pembuatan model yang memungkinkan

profesional sistem untuk menggambarkan sistem sebagai suatu jaringan proses

fungsional yang dihubungkan satu sama lain dengan laur data, baik secara manual

maupun komputerisasi. Adapun Data Flow Diagram yang penulis ajukan, yaitu:

UNIVERSITAS SUMATERA UTARA

Page 34: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Adapun Data Flow Diagram yang penulis rancang, yaitu :

Gambar 4.1 Diagram Konteks

UNIVERSITAS SUMATERA UTARA

Page 35: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Gambar 4.2 Diagram Konteks Level 0 (Nol)

UNIVERSITAS SUMATERA UTARA

Page 36: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

4.2 Perancangan Struktur Database

Database dapat diartikan sebagai sebuah tempat menyimpan data yang terstruktur

agar dapat diakses dengan cepat dan mudah. Membangun sebuah database

merupakan langkah awal pembuatan aplikasi.

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

Tabel 4.1 admin

No Field Name Type Length

1 username varchar 255

2 password varchar 255

Tabel 4.2 users

No Field Name Type Length

1 nisn varchar 255

2 nama_lengkap varchar 255

3 password varchar 32

4 Type varchar 255

5 no_pendaftar varchar 3

6 no_peserta_un varchar 255

7 tahun_lulus varchar 255

8 ayah varchar 255

9 ibu varchar 255

10 asal varchar 255

UNIVERSITAS SUMATERA UTARA

Page 37: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

11 jk varchar 255

12 ttl varchar 255

13 alamat varchar 255

Tabel 4.3 nilai

No Field Name Type Length

1 id int 11

2 bind int 11

3 mtk int 11

4 bing int 11

5 ipa int 11

6 nem int 11

7 status varchar 255

8 nisn varchar 255

4.3 Perancangan Flowchart

Tahap selanjutnya adalah tahap pembuatan flowchart (diagram alir) atau aliran

informasi dari situs tersebut. Flowchart atau diagram alir adalah gambaran yang

menampilkan struktur, hierarki, dan isi halaman per halaman. Dengan adanya

flowchart, akan sangat membantu untuk memvisualisasikan isi dari setiap halaman

situs tersebut. Dengan pembuatan flowchart dalam suatu situs dapat membantu

mempermudah dalam pemeliharaan dan pembaharuan isi situs. Hal ini sangat

penting dilakukan karena isi situs harus selalu diperbahrui sehingga pengunjung

UNIVERSITAS SUMATERA UTARA

Page 38: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

tidak bosan. Secara sederhana flowchart dalam membangun situs ini dapat dilihat

pada gambar berikut :

Gambar 4.3 Flowchart halaman utama

UNIVERSITAS SUMATERA UTARA

Page 39: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Gambar 4.4 Flowchart halaman Login Administrator

UNIVERSITAS SUMATERA UTARA

Page 40: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Gambar 4.5 Flowchart halaman Login Siswa

UNIVERSITAS SUMATERA UTARA

Page 41: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

BAB 5

IMPLEMENTASI SISTEM

Implementasi sistem merupakan langkah-langkah atau prosedur yang dilakukan

dalam menyelesaikan desain sistem yang telah disetujui, untuk menguji, menginstal

dan memulai sistem baru atau sistem yang diperbaiki dari sistem yang lama.

5.1 Komponen Implementasi Sistem

Perancangan sistem yang telah dikerjakan dapat berjalan dengan baik atau tidak,

maka perlu dilakukan pengujian terhadap sistem yang telah dikerjakan. Untuk itu

dibutuhkan beberapa komponen utama yang mencakup perangkat keras

(hardware), perangkat lunak (software), dan perangkat operator (brainware).

5.1.1 Kebutuhan Perangkat Keras (Hardware)

Perangkat keras (hardware) adalah komponen-komponen peralatan yang

membentuk suatu sistem computer dan peralatan-peralatan tambahan lainnya yang

mungkin komputer jalankan tugasnya sesuai dengan yang diperintahkan.

Komponen ini bersifat nyata secara fisik, artinya dapat dilihat dan dipergunakan.

UNIVERSITAS SUMATERA UTARA

Page 42: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Dalam menyusun sistem informasi penerimaan siswa baru ini, saya membubuhkan

perangkat keras sebagai berikut:

a. CPU (Central Processing Unit)

CPU adalah otak dari komputer, cpu merupakan pusat pengolahan data serta

pusat pengontrolan dari keseluruhan sistem komputer.

b. Memori

Memori alah tempat penampungan atau tempat penyimpanan data

sementara.

c. Monitor

Monitor adalah layar yang menampilkan output program.

d. Keyboard

Keyboard adalah alat menginput data.

5.1.2 Kebutuhan Perangkat Lunak (Software)

Software adalah instruksi atau program-program computer yang dapat digunakan

oleh computer dengan memberikan fungfsi serta penampilan yang diinginkan.

Dalam hal ini, perangkat lunak yang digunakan penulis untuk penulis untuk aplikasi

perangkat website adalah:

a. Sistem Operasi Windows 7.

b. Mysql/PHPMyAdmin sebagai Bahasa pemrograman untuk database

dalam Bahasa SQL.

c. Sublime Text 2 sebagai editor pendesainannya.

UNIVERSITAS SUMATERA UTARA

Page 43: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

d. XAMPP sebagai server yang berdiri sendiri (Localhost) yang terdiri atas

program Apache, Mysql Database, dan penerjemah bahasa yang ditulis

dengan bahasa pemrograman PHP.

e. PHP sebagai bahasa pemrograman server side.

f. Browser sebagai tempat media tampilan halaman website, Seperti:

Google Chrome atau Mozilla Firefox.

5.1.3 Unsur Manusia (Brainware)

Brainware merupakan factor manusia yang menangani fasilitas computer yang ada.

Faktor manusia yanag dimaksud adalah orang-orang yang memiliki bagian untuk

menangani sistem dan merupakan unsur manusia. Perangkat operator (Brainware)

meliputi 3 bagian yaitu:

a. Analisis Sistem, yaitu orang yang membentuk dan membangun fasilitas

rancangan sistem atau program.

b. Programmer, yaitu orang yang mengerti bahasa pemrograman yang

digunakan dalam membuat dan membangun suatu program.

c. Operator (Administrator), yaitu orang yang mengoperasikan sistem seperti

memasukkan data untuk dioperasikan dan menghasilkan informasi.

d. Public (Pengguna), yaitu orang yang memakai sistem yang telah dirancang

untuk mendapatkan informasi yang dibutuhkan.

UNIVERSITAS SUMATERA UTARA

Page 44: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

5.2 Prosedur Penggunaan Program

Ketika telah selesai mengerjakan tahap perancangan sistem, baik dalam merancang

tabel-tabel didalam database dengan menggunakan phpMyAdmin maupun dalam

merancang halaman-halaman website, kini program tersebut dapat dijalankan.

ketikkkan pada address bar http:localhost untuk melihat tampilan Apache web

server pada browser.

Adapun prosedur penggunaan program secara manual dapat diuraikan sebagai

berikut:

1. Aktifkan Apache, Mysql dan Filezila pada XAMPP Control Panel

Aplication

2. Klik Start pada desktop, kemudian klik Mozilla Firefox

3. Setelah jendela Mozilla Firefox terbuka, ketik alamat website yang telah

dirancang pada address bar untuk menampilkan halaman utama website

4. Setelah halaman utama website terbuka, terdapat beberapa pilihan halaman

link.

5.3 Implementasi Program

Implementasi ini dilakukan agar pemakai sistem dapat mengerti tentang bagaimana

cara bekerja dari sistem ini. Berikut adalah implementasi dari sistem informasi

sekolah berbasiskan web.

UNIVERSITAS SUMATERA UTARA

Page 45: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

5.3.1 Halaman Utama Website

Halaman utama interface dari website SMA Negeri 1 Serbelawan berisi tentang

halaman selamat datang. Berikut adalah tampilan halaman utama user dari website

SMA Negeri 1 Serbelawan

Gambar 5.1 Halaman Utama Website

5.3.2 Halaman Login Admin

Halaman login administrator agar dapat mengakses seluruh pengelolaan data-data

yang dibutuhkan dan hanya admin yang dapat mengupdate atau menghapus data

yang ada. Berikut halaman login admin :

UNIVERSITAS SUMATERA UTARA

Page 46: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Gambar 5.2 Halaman login admin

5.3.3 Halaman Data Admin

Berisi menu pengolahan nilai siswa, jumlah siswa yang diterima, jumlah siswa

yang ditolak, dan kuota penerimaan siswa. Berikut halaman data admin :

Gambar 5.3 Halaman Data Admin

UNIVERSITAS SUMATERA UTARA

Page 47: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

BAB 6

KESIMPULAN DAN SARAN

6.1 Kesimpulan

Dalam penulisan tugas akhir ini telah diuraikan bagaimana perancangan sistem

dalam pembangunan website SMA Negeri 1 Serbelawan. Maka dapat disimpulkan

bahwa :

1. Website merupakan sarana informasi online yang dapat diakses oleh

siapapun.

2. Dalam membangun sebuah website tidak harus terhubung dengan internet.

Internet diperlukan pada saat upload file dan pengaksesan website.

3. Website ini dibuat menggunakan bahasa pemrograman PHP dan MySQL

sebagai pembuatan databasenya, sehingga pengelolaan website tidak perlu

lagi melakukan proses editing pada dokumen HTML, tetapi cukup dengan

melakukan penambahan dan perubahan dalam database sehingga pengelola

situs sudah dapat memperbaharui isi website.

UNIVERSITAS SUMATERA UTARA

Page 48: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

6.2 Saran

Saran yang bisa diberikan agar web ini tetap terus dapat digunakan adalah sebagai

berikut:

1. Isi situs web seharusnya memberikan informasi yang teraktual agar

mempermudah pengunjung memperoleh informasi secara online.

2. Komputer yang digunakan dalam membuat suatu aplikasi web sebaiknya

memiliki spesifikasi dengan level menengah ke atas karena penggunaan

software-software yang banyak memakan sumber daya komputer seperti

memori dan kapasitas harddisk.

3. Dalam menggunakan situs perlu adanya server, agar data atau informasi

yang masuk dapat dilihat secara kontiniu.

UNIVERSITAS SUMATERA UTARA

Page 49: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

DAFTAR PUSTAKA

.

Kadir, Abdul. 2003. Pengenalan Sistem Informasi. Andi. Yogyakarta.

Ladjamudin, Al Barha. 2005. Analisis dan Desain Sistem Informasi. Graha Ilmu. Yogyakarta.

Sutabri, Tata. 2003. Analisis Sistem Informasi. Penerbit Andi Yogyakarta.

Pengertian sistem menurut para ahli. (20 Juni 2017). Diperoleh dari

https://hedisasrawan.blogspot.co.id/2014/01/25-pengertian-sistem-menurut-para-

ahli.html.

Wikipedia. (20 Juni 2017). Penjelasan Tentang World Wide Web. Diperoleh dari

https://id.wikipedia.org/wiki/Google_Maps.

Wikipedia. (20 Juni 2017). Penjelasan Tentang CSS. Dieroleh dari

https://id.wikipedia.org/wiki/Cascading_Style_Sheets

UNIVERSITAS SUMATERA UTARA

Page 50: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

LISTING PROGRAM

1. index.php

<?php

session_start();

if(isset($_SESSION['user'])) {

if($_SESSION['user'] == "admin")

header('location:admin/index.php');

else

header('location:profil.php');

include 'config/connection.php';

}

?>

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="apple-touch-icon" sizes="76x76"

href="assets/img/apple-icon.png">

<link rel="icon" href="assets/img/favicon.ico">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta content='width=device-width, initial-scale=1.0,

maximum-scale=1.0, user-scalable=0' name='viewport' />

<title>SMAN 1 Serbelawan</title>

<link rel="stylesheet"

href="https://fonts.googleapis.com/icon?family=Material+Icons"

/>

<link rel="stylesheet" type="text/css"

href="https://fonts.googleapis.com/css?family=Roboto:300,400,5

00,700" />

<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/font-

awesome/latest/css/font-awesome.min.css" />

UNIVERSITAS SUMATERA UTARA

Page 51: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />

<link href="assets/css/material-kit.css" rel="stylesheet"/>

</head>

<body class="index-page">

<nav class="navbar navbar-transparent navbar-fixed-top

navbar-color-on-scroll">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle"

data-toggle="collapse" data-target="#navigation-

index">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="collapse navbar-collapse"

id="navigation-index">

<ul class="nav navbar-nav navbar-right">

<li>

<a href="login.php">

<i class="material-icons">dashboard</i> Masuk

</a>

</li>

</ul>

</div>

</div>

</nav>

<div class="wrapper">

<div class="header header-filter" style="background-image:

url('assets/img/bgheader.jpg');">

UNIVERSITAS SUMATERA UTARA

Page 52: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<div class="container">

<div class="row">

<div class="col-md-8 col-md-offset-2">

<div class="brand">

<h1>SMAN 1 Serbelawan</h1>

<h3>Kecamatan Dolok Batu Nanggar</h3>

</div>

</div>

</div>

</div>

</div>

<div class="main main-raised">

<div class="section text-center section-landing">

<div class="row">

<div class="col-md-8 col-md-offset-2">

<h2 class="title">Selamat Datang</h2>

<h5 class="description">SMA Negeri 1 Dolok Batu Nanggar awalnya

adalah bekas sekolah RRT "Nan Kiang" yang di tetapkan

pemanfaatanya kepada SMEP Negeri dan SP. Pepelzrada Sumut tanggal

17 Maret 1966 No Kep. 0085/Pepelrada/7/1996. Kemudian pada tanggal

1 Maret 1967 Inpeksi Daerah SMA Sumatera Utara merencanakan

membuka SMA Negeri di Serbalawan dengan memakai sebagian komplek

SMEP yang di jadikan kelas jauh (filial) dari SMA Negeri 3

Pematang Siantar.

Sekolah Menegah Atas (SMA) Negeri 1 Dolok Batu Nanggar terletak di

Jl. Sisingamangaraja No. 1 Serbalawan, Kecamatan Dolok Batu

Nanggar, Kabupaten Simalunun ( sekitar 90 kilometer sebelah

selatan dari kota Medan) didirikan pada tahun 1969 dengan luas

tanah 92 x 120 m = 10.800 m²</h5>

</div>

</div>

<div class="features">

<div class="row">

<div class="col-md-4">

<div class="info">

UNIVERSITAS SUMATERA UTARA

Page 53: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<img src="assets/img/pramuka.png" style="width: 120px;

height:120px;">

<h4 class="info-title">PRAMUKA</h4>

<p>Kepramukaan adalah proses pendidikan di luar lingkungan sekolah

dan di luar lingkungan keluarga dalam bentuk kegiatan menarik,

menyenangkan, sehat, teratur, terarah, praktis yang dilakukan di

alam terbuka dengan Prinsip Dasar Kepramukaan dan Metode

Kepramukaan, yang sasaran akhirnya pembentukan watak, akhlak, dan

budi pekerti luhur.</p>

</div>

</div>

<div class="col-md-4">

<div class="info">

<img src="assets/img/osis.png" style="width: 120px;

height:120px;">

<h4 class="info-title">OSIS</h4>

<p>Organisasi Siswa Intra Sekolah (disingkat OSIS) adalah suatu

organisasi yang berada di tingkat sekolah di Indonesia yang

dimulai dari Sekolah Menengah yaitu Sekolah Menengah Pertama (SMP)

dan Sekolah Menengah Atas (SMA). OSIS diurus dan dikelola oleh

murid-murid yang terpilih untuk menjadi pengurus OSIS. Biasanya

organisasi ini memiliki seorang pembimbing dari guru yang dipilih

oleh pihak sekolah.</p>

</div>

</div>

<div class="col-md-4">

<div class="info">

<img src="assets/img/pmr.png" style="width: 120px; height:120px;">

<h4 class="info-title">PMR</h4>

<p>Palang Merah Remaja (disingkat PMR) adalah wadah pembinaan dan

pengembangan anggota remaja PMI, yang selanjutnya disebut

PMR.Terdapat di PMI kota atau kabupaten di seluruh Indonesia,

dengan anggota lebih dari 5 juta orang, anggota PMR merupakan

salah satu kekuatan PMI dalam melaksanakan kegiatan-kegiatan

kemanusiaan dibidang kesehatan dan siaga bencana, serta

mengembangkan kapasitas organisasi PMI.</p>

</div>

</div>

</div>

</div>

</div>

UNIVERSITAS SUMATERA UTARA

Page 54: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<div class="section section-basic">

<div class="container">

<div class="row">

<h2 class="title">Profil</h2>

<div class="col-md-6">

<div class="card card-raised card-carousel">

<div id="carousel-example-generic" class="carousel slide" data-

ride="carousel">

<div class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">

<li data-target="#carousel-example-generic" data-slide-to="0"

class="active"></li>

<li data-target="#carousel-example-generic" data-slide-

to="1"></li>

<li data-target="#carousel-example-generic" data-slide-

to="2"></li>

</ol>

<div class="carousel-inner">

<div class="item active">

<img src="assets/img/sma1.jpg" alt="Awesome Image">

<div class="carousel-caption">

<h4><i class="material-icons">location_on</i> SMAN 1

Serbelawan</h4>

</div>

</div>

<div class="item">

<img src="assets/img/sma4.jpg" alt="Awesome Image">

<div class="carousel-caption">

<h4><i class="material-icons">location_on</i> SMAN 1

Serbelawan</h4>

</div>

</div>

<div class="item">

<img src="assets/img/sma3.jpg" alt="Awesome Image">

<div class="carousel-caption">

UNIVERSITAS SUMATERA UTARA

Page 55: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<h4><i class="material-icons">location_on</i> SMAN 1

Serbelawan</h4>

</div>

</div>

</div>

<a class="left carousel-control" href="#carousel-example-generic"

data-slide="prev">

<i class="material-icons">keyboard_arrow_left</i>

</a>

<a class="right carousel-control" href="#carousel-example-generic"

data-slide="next">

<i class="material-icons">keyboard_arrow_right</i>

</a>

</div>

</div>

</div>

</div>

<div class="col-md-5 col-md-offset-1">

<div class="row">

<div class="tim-typo text-center">

<h3>Visi</h3>

</div>

<div class="tim-typo">

<p>

Terpuji Di Dalam Akhlak , Terdepan Di Setiap Prestasi, Menuju Masa

Depan Yang Gemilang.

</p>

</div>

</div>

<div class="row">

<div class="tim-typo text-center">

<h3>Misi</h3>

</div>

UNIVERSITAS SUMATERA UTARA

Page 56: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<div class="tim-typo">

<p>

1. Terbentuknya warga sekolah yang beriman, bertaqwa, berakhlak

mulia dan berbudi pekerti luhur baik didalam sekolah maupun diluar

sekolah.

<p>2. Melaksanakan pembelajaran di sekolah dengan menanamkan

nilai-nilai budaya dan karakter bangsa.</p>

<p>3. Meningkatnya prestasi akademik dan non akademik melalui

kegiatan peningkatan mutu pembelajaran.</p>

<p>4. Terciptanya budaya gemar membaca, rasa ingin tahu,

bertoleransi, bekerjasama, saling menghargai, displin , jujur,

kerja keras, kreatif dan inovatif.</p>

<p>5. Mengembangkan minat, bakat dan kreativitas siswa agar tumbuh

dan berkembang sesuai dengan potensi yang dimiliki.</p>

</p>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="section section-basic">

<div class="container">

<div class="row">

<h2 class="title">Panduan Pendaftaran</h2>

<div class="row">

<div class="col-md-12">

<div class="tim-typo">

<p>1. Daftarkan akun kamu dengan memasukkan data diri kamu secara

lengkap terlebih dahulu.</p>

<p>2. Login dengan nisn akun yang telah kamu didaftarkan

sebelumnya.</p>

<p>3. Isikan nilai Ujian Nasional (UN) pada halaman profil

kamu.</p>

<p>4. Pengumuman hasil seleksi akan diberitahukan di profil kamu

paling lama 3 hari kemudian.</p>

UNIVERSITAS SUMATERA UTARA

Page 57: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

</div>

</div>

</div>

<div class="section section-download">

<div class="container">

<div class="row text-center">

<div class="col-md-8 col-md-offset-2">

<h2>Kamu tertarik?</h2>

<h4>Daftarkan segera diri kamu segera, siswa yang diterima

terbatas loh...</h4>

</div>

<div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-4">

<a href="daftar.php" class="btn btn-primary btn-lg">

<i class="material-icons">cloud_download</i> Daftar Sekarang

</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<footer class="footer">

<div class="container">

<div class="copyright pull-left">

JL. Sisingamangaraja no. 01 Serbelawan, Sumatera Utara 21155

</div>

<div class="copyright pull-right">

&copy; 2017, made with <i class="material-icons">favorite</i> by

SMA Negeri 1 Serbelawan.

</div>

UNIVERSITAS SUMATERA UTARA

Page 58: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

</div>

</footer>

</div>

<script src="assets/js/jquery.min.js"

type="text/javascript"></script>

<script src="assets/js/bootstrap.min.js"

type="text/javascript"></script>

<script src="assets/js/material.min.js"></script>

<script src="assets/js/nouislider.min.js"

type="text/javascript"></script>

<script src="assets/js/bootstrap-datepicker.js"

type="text/javascript"></script>

<script src="assets/js/material-kit.js"

type="text/javascript"></script>

<script type="text/javascript">

$().ready(function(){

materialKit.initSliders();

window_width = $(window).width();

if (window_width >= 992){

big_image = $('.wrapper > .header');

$(window).on('scroll', materialKitDemo.checkScrollForParallax);

}

});

</script>

</body>

</html>

2. admin.php

<?php

session_start();

UNIVERSITAS SUMATERA UTARA

Page 59: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

if(isset($_SESSION['user'])) {

if($_SESSION['user'] == "admin")

header('location:admin/index.php');

else

header('location:profil.php');

include 'config/connection.php';

}

?>

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-

icon.png">

<link rel="icon" href="assets/img/favicon.ico">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta content='width=device-width, initial-scale=1.0, maximum-

scale=1.0, user-scalable=0' name='viewport' />

<title>SMAN 1 Seberlawan</title>

<link rel="stylesheet"

href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<link rel="stylesheet" type="text/css"

href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,7

00" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-

awesome/latest/css/font-awesome.min.css" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />

<link href="assets/css/material-kit.css" rel="stylesheet"/>

</head>

<body class="signup-page">

<div class="wrapper">

<div class="header header-filter" style="background-image:

url('assets/img/sma1.jpg');">

UNIVERSITAS SUMATERA UTARA

Page 60: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<div class="container">

<div class="row">

<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">

<div class="card card-signup">

<form class="form" method="post" action="proses/adminlogin.php">

<div class="header header-primary text-center">

<h4>Admin</h4>

</div>

<div class="content">

<div class="input-group">

<span class="input-group-addon">

<i class="material-icons">face</i>

</span>

<input type="text" name="username" class="form-control"

placeholder="Nama Pengguna...">

</div>

<div class="input-group">

<span class="input-group-addon">

<i class="material-icons">lock_outline</i>

</span>

<input type="password" name="password" placeholder="Kata Sandi..."

class="form-control" />

</div>

</div>

<div class="footer text-center">

<button type="submit" class="btn btn-primary btn-

lg">Masuk</button> <br />

</div>

</form>

</div>

</div>

</div>

</div>

UNIVERSITAS SUMATERA UTARA

Page 61: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

</div>

</div>

<script src="assets/js/jquery.min.js"

type="text/javascript"></script>

<script src="assets/js/bootstrap.min.js"

type="text/javascript"></script>

<script src="assets/js/material.min.js"></script>

<script src="assets/js/nouislider.min.js"

type="text/javascript"></script>

<script src="assets/js/bootstrap-datepicker.js"

type="text/javascript"></script>

<script src="assets/js/material-kit.js"

type="text/javascript"></script>

<script type="text/javascript">

$().ready(function(){

materialKit.initSliders();

window_width = $(window).width();

if (window_width >= 992){

big_image = $('.wrapper > .header');

$(window).on('scroll', materialKitDemo.checkScrollForParallax);

}

});

</script>

</body>

</html>

3. login.php

<?php

session_start();

UNIVERSITAS SUMATERA UTARA

Page 62: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

if(isset($_SESSION['user'])) {

if($_SESSION['user'] == "admin")

header('location:admin/index.php');

else

header('location:profil.php');

include 'config/connection.php';

}

?>

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-

icon.png">

<link rel="icon" href="assets/img/favicon.ico">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta content='width=device-width, initial-scale=1.0, maximum-

scale=1.0, user-scalable=0' name='viewport' />

<title>SMAN 1 Serbelawan</title>

<link rel="stylesheet"

href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<link rel="stylesheet" type="text/css"

href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,7

00" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-

awesome/latest/css/font-awesome.min.css" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />

UNIVERSITAS SUMATERA UTARA

Page 63: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<link href="assets/css/material-kit.css" rel="stylesheet"/>

</head>

<body class="signup-page">

<div class="wrapper">

<div class="header header-filter" style="background-image:

url('assets/img/sma1.jpg'); background-size: cover; background-

position: top center;">

<div class="container">

<div class="row">

<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">

<div class="card card-signup">

<form class="form" method="post" action="proses/login.php">

<div class="header header-primary text-center">

<h4>SMAN 1 Serbelawan</h4>

</div>

<div class="content">

<div class="input-group">

<span class="input-group-addon">

<i class="material-icons">face</i>

</span>

<input type="text" name="nisn" class="form-control"

placeholder="NISN...">

</div>

<div class="input-group">

<span class="input-group-addon">

<i class="material-icons">lock_outline</i>

UNIVERSITAS SUMATERA UTARA

Page 64: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

</span>

<input type="password" name="password" placeholder="Kata Sandi..."

class="form-control" />

</div>

</div>

<div class="footer text-center">

<button type="submit" class="btn btn-primary btn-

lg">Masuk</button> <br />

<a href="daftar.php" class="btn btn-simple btn-primary btn-

lg">Belum punya akun...?</a>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</div>

<script src="assets/js/jquery.min.js"

type="text/javascript"></script>

<script src="assets/js/bootstrap.min.js"

type="text/javascript"></script>

<script src="assets/js/material.min.js"></script>

<script src="assets/js/nouislider.min.js"

type="text/javascript"></script>

<script src="assets/js/bootstrap-datepicker.js"

type="text/javascript"></script>

UNIVERSITAS SUMATERA UTARA

Page 65: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<script src="assets/js/material-kit.js"

type="text/javascript"></script>

<script type="text/javascript">

$().ready(function(){

materialKit.initSliders();

window_width = $(window).width();

if (window_width >= 992){

big_image = $('.wrapper > .header');

$(window).on('scroll', materialKitDemo.checkScrollForParallax);

}

});

</script>

</body>

</html>

4. daftar.php

<?php

session_start();

if(isset($_SESSION['user'])) {

if($_SESSION['user'] == "admin")

header('location:admin/index.php');

else

header('location:profil.php');

include 'config/connection.php';

UNIVERSITAS SUMATERA UTARA

Page 66: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

}

?>

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-

icon.png">

<link rel="icon" href="assets/img/favicon.ico">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta content='width=device-width, initial-scale=1.0, maximum-

scale=1.0, user-scalable=0' name='viewport' />

<title>SMAN 1 Serbelawan</title>

<link rel="stylesheet"

href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<link rel="stylesheet" type="text/css"

href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,7

00" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-

awesome/latest/css/font-awesome.min.css" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />

<link href="assets/css/material-kit.css" rel="stylesheet"/>

</head>

<body class="signup-page">

<div class="wrapper">

UNIVERSITAS SUMATERA UTARA

Page 67: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<div class="header header-filter" style="background-image:

url('assets/img/city.jpg'); background-size: cover; background-

position: top center;">

<div class="container">

<div class="row">

<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">

<div class="card card-signup">

<form class="form" method="post" action="proses/daftar.php">

<div class="header header-primary text-center">

<h4>SMAN 1 Serbelawan</h4>

</div>

<div class="content">

<div class="input-group">

<span class="input-group-addon">

<i class="material-icons">face</i>

</span>

<input type="text" name="nisn" class="form-control"

placeholder="NISN...">

</div>

<div class="input-group">

<span class="input-group-addon">

<i class="material-icons">email</i>

</span>

<input type="text" name="nama_lengkap" class="form-control"

placeholder="Nama Lengkap...">

</div>

UNIVERSITAS SUMATERA UTARA

Page 68: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<div class="input-group">

<span class="input-group-addon">

<i class="material-icons">lock_outline</i>

</span>

<input type="password" name="password" placeholder="Kata Sandi..."

class="form-control" />

</div>

</div>

<div class="footer text-center">

<button type="submit" class="btn btn-primary btn-

lg">Daftar</button> <br />

<a href="login.php" class="btn btn-simple btn-primary btn-

lg">Sudah punya akun</a>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</div>

<script src="assets/js/jquery.min.js"

type="text/javascript"></script>

<script src="assets/js/bootstrap.min.js"

type="text/javascript"></script>

<script src="assets/js/material.min.js"></script>

<script src="assets/js/nouislider.min.js"

type="text/javascript"></script>

UNIVERSITAS SUMATERA UTARA

Page 69: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<script src="assets/js/bootstrap-datepicker.js"

type="text/javascript"></script>

<script src="assets/js/material-kit.js"

type="text/javascript"></script>

<script type="text/javascript">

$().ready(function(){

materialKit.initSliders();

window_width = $(window).width();

if (window_width >= 992){

big_image = $('.wrapper > .header');

$(window).on('scroll', materialKitDemo.checkScrollForParallax);

}

});

</script>

</body>

</html>

5. profil.php

<?php

include 'config/connection.php';

session_start();

if(isset($_SESSION['user'])) {

if($_SESSION['user'] == "admin")

header('location:admin/index.php');

UNIVERSITAS SUMATERA UTARA

Page 70: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

else {

$nisn = $_SESSION['user'];

$cekuser = mysql_query("SELECT * FROM users WHERE nisn='$nisn'");

$user = mysql_fetch_array($cekuser);

$ceknilai = mysql_query("SELECT * FROM nilais WHERE nisn =

'$nisn'");

$rownilai = mysql_num_rows($ceknilai);

$nilai = mysql_fetch_array($ceknilai);

}

}

else

header('location:login.php');

?>

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-

icon.png">

<link rel="icon" href="assets/img/favicon.ico">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta content='width=device-width, initial-scale=1.0, maximum-

scale=1.0, user-scalable=0' name='viewport' />

<title>SMAN 1 Serbelawan</title>

UNIVERSITAS SUMATERA UTARA

Page 71: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<link rel="stylesheet"

href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<link rel="stylesheet" type="text/css"

href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,7

00" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-

awesome/latest/css/font-awesome.min.css" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />

<link href="assets/css/material-kit.css" rel="stylesheet"/>

</head>

<body class="profile-page">

<nav class="navbar navbar-transparent navbar-fixed-top navbar-

color-on-scroll">

<div class="container">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target="#navigation-example">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="collapse navbar-collapse" id="navigation-index">

<ul class="nav navbar-nav navbar-right">

<li>

UNIVERSITAS SUMATERA UTARA

Page 72: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<a href="proses/logout.php">

<i class="material-icons">dashboard</i> Keluar

</a>

</li>

</ul>

</div>

</div>

</nav>

<div class="wrapper">

<div class="header header-filter" style="background-image:

url('assets/img/sma5.png');"></div>

<div class="main main-raised">

<div class="profile-content">

<div class="container">

<div class="row">

<div class="profile">

<div class="avatar">

<img src="assets/img/avatar.png" alt="Circle Image" class="img-

circle img-responsive img-raised">

</div>

<div class="name">

<?php

echo "<h3 class=\"title\">$user[nama_lengkap]</h3>";

echo "<h6>$user[nisn]</h6>";

echo "<h6>No. Pendaftar : <b>0$user[no_pendaftar]</b></h6>";

?>

UNIVERSITAS SUMATERA UTARA

Page 73: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

</div>

</div>

</div>

<div class="row">

<div class="col-md-6 col-md-offset-3">

<div class="profile-tabs">

<div class="nav-align-center">

<ul class="nav nav-pills" role="tablist">

<li class="active">

<a href="#informasi" role="tab" data-toggle="tab">

<i class="material-icons">camera</i>

Informasi Diri

</a>

</li>

<li>

<a href="#nilai" role="tab" data-toggle="tab">

<i class="material-icons">palette</i>

Nilai Ujian (UN)

</a>

</li>

<li>

<a href="#hasil" role="tab" data-toggle="tab">

<i class="material-icons">favorite</i>

Pengumuman

</a>

</li>

UNIVERSITAS SUMATERA UTARA

Page 74: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

</ul>

<div class="tab-content gallery">

<div class="tab-pane active" id="informasi">

<div class="row">

<form class="form" method="post" action="proses/informasi.php">

<div class="content">

<?php echo "

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Nomor Peserta UN</label>

<input name=\"no_peserta_un\" type=\"text\" class=\"form-control\"

value=\"$user[no_peserta_un]\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Tahun Lulus</label>

<input name=\"tahun_lulus\" type=\"text\" class=\"form-control\"

value=\"$user[tahun_lulus]\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Asal SMP/MTs/Paket B</label>

<input name=\"asal\" type=\"text\" class=\"form-control\"

value=\"$user[asal]\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Jenis Kelamin</label>

<input name=\"jk\" type=\"text\" class=\"form-control\"

value=\"$user[jk]\">

</div>

UNIVERSITAS SUMATERA UTARA

Page 75: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Tempat/Tanggal Lahir</label>

<input name=\"ttl\" type=\"text\" class=\"form-control\"

value=\"$user[ttl]\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Nama Ayah Kandung</label>

<input name=\"ayah\" type=\"text\" class=\"form-control\"

value=\"$user[ayah]\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Nama Ibu Kandung</label>

<input name=\"ibu\" type=\"text\" class=\"form-control\"

value=\"$user[ibu]\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Alamat</label>

<textarea name=\"alamat\" class=\"form-control\"

rows=\"3\">$user[alamat]</textarea>

</div>

"; ?>

</div>

<div class="footer text-center">

<button type="submit" class="btn btn-simple btn-primary btn-

lg">Selesai</button>

</div>

</form>

</div>

</div>

UNIVERSITAS SUMATERA UTARA

Page 76: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<div class="tab-pane text-center" id="nilai">

<div class="row">

<?php

if($user['no_peserta_un'] != NULL){

if($rownilai == 0) {

echo "

<form class=\"form\" method=\"post\" action=\"proses/nilai.php\">

<div class=\"content\">

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Bahasa Indonesia</label>

<input name=\"bind\" type=\"text\" class=\"form-control\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Matematika</label>

<input name=\"mtk\" type=\"text\" class=\"form-control\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Bahasa Inggris</label>

<input name=\"bing\" type=\"text\" class=\"form-control\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">Ilmu Pengetahuan Alam</label>

<input name=\"ipa\" type=\"text\" class=\"form-control\">

</div>

<div class=\"form-group label-floating text-left\">

<label class=\"control-label\">NEM</label>

UNIVERSITAS SUMATERA UTARA

Page 77: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<input name=\"nem\" type=\"text\" class=\"form-control\">

</div>

</div>

<div class=\"footer text-center\">

<button type=\"submit\" class=\"btn btn-simple btn-primary btn-

lg\" onclick=\"return confirm('Kamu yakin dengan nilai yang

diinput?')\">Selesai</button>

</div>

</form>

";

}

else {

echo "

<div class=\"alert alert-primary\">

<div class=\"container-fluid\">

<b>Informasi:</b> Nilai kamu sedang diseleksi, lihat hasilnya di

panel pengumuman

</div>

</div>

<div class=\"row\">

<div class=\"col-md-6\">

<div class=\"tim-typo text-center\">

<h3>Bahasa Indonesia</h3>

<p>$nilai[bind]</p>

</div>

</div>

<div class=\"col-md-6\">

<div class=\"tim-typo text-center\">

UNIVERSITAS SUMATERA UTARA

Page 78: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<h3>Bahasa Inggris</h3>

<p>$nilai[bing]</p>

</div>

</div>

<div class=\"col-md-6\">

<div class=\"tim-typo text-center\">

<h3>Matematika</h3>

<p>$nilai[mtk]</p>

</div>

</div>

<div class=\"col-md-6\">

<div class=\"tim-typo text-center\">

<h3>Ilmu Pengetahuan Alam</h3>

<p>$nilai[ipa]</p>

</div>

</div>

</div>

";

}

}

else {

echo "

<div class=\"tim-typo text-center\">

<h2>Informasi Belum Ada...</h2>

</div>

<div class=\"tim-typo\">

<h4>

UNIVERSITAS SUMATERA UTARA

Page 79: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

Mohon untuk melengkapi informasi diri kamu sebelum memasukkan

nilai ujian Nasional. Terimakasih...

</h4>

</div>

";

}

?>

</div>

</div>

<div class="tab-pane text-center" id="hasil">

<div class="row">

<?php

if($rownilai != 0) {

if($nilai['status'] == "LULUS"){

echo "

<div class=\"tim-typo text-center\">

<h2>Selamat...</h2>

</div>

<div class=\"tim-typo\">

<h4>

Kamu diterima masuk ke SMAN 1 Serbelawan, Untuk selanjutnya kamu

diharapkan segera datang ke SMAN 1 Serbelawan untuk pendaftaran

ulang dengan membawa berkas-berkas yang lengkap. Terimakasih...

</h4>

</div>

";

}

UNIVERSITAS SUMATERA UTARA

Page 80: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

else if($nilai['status'] == "TIDAK LULUS") {

echo "

<div class=\"tim-typo text-center\">

<h2>Mohon Maaf...</h2>

</div>

<div class=\"tim-typo\">

<h4>

Kamu tidak diterima masuk ke SMAN 1 Serbelawan, Tetap semangat

jangan jadikan ini akhir dari segalanya. Kami doakan yang terbaik

untuk kamu dikemudian hari. Terimakasih...

</h4>

</div>

";

}

else {

echo "

<div class=\"tim-typo text-center\">

<h2>Mohon Kesabarannya...</h2>

</div>

<div class=\"tim-typo\">

<h4>

Hasil seleksi kamu sedang kami proses, mohon pengertiannya.

Terimakasih...

</h4>

</div>

";

}

}

UNIVERSITAS SUMATERA UTARA

Page 81: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

else {

echo "

<div class=\"tim-typo text-center\">

<h2>Nilai Belum Ada...</h2>

</div>

<div class=\"tim-typo\">

<h4>

Diharapkan kamu untuk mengisi nilai kamu terlebih dahulu sebelum

melihat hasil pengumuman seleksi. Terimakasih...

</h4>

</div>

";

}

?>

</div>

</div>

</div>

</div>

</div>

<!-- End Profile Tabs -->

</div>

</div>

</div>

</div>

</div>

UNIVERSITAS SUMATERA UTARA

Page 82: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

</div>

<footer class="footer">

<div class="container">

<div class="copyright pull-left">

JL. Singamangaraja no. 1 Serbelawan, Sumatera Utara 21155

</div>

<div class="copyright pull-right">

&copy; 2017, made with <i class="material-icons">favorite</i> by

Mesut Developer.

</div>

</div>

</footer>

<script src="assets/js/jquery.min.js"

type="text/javascript"></script>

<script src="assets/js/bootstrap.min.js"

type="text/javascript"></script>

<script src="assets/js/material.min.js"></script>

<script src="assets/js/nouislider.min.js"

type="text/javascript"></script>

<script src="assets/js/bootstrap-datepicker.js"

type="text/javascript"></script>

<script src="assets/js/material-kit.js"

type="text/javascript"></script>

<script type="text/javascript">

$().ready(function(){

UNIVERSITAS SUMATERA UTARA

Page 83: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

materialKit.initSliders();

window_width = $(window).width();

if (window_width >= 992){

big_image = $('.wrapper > .header');

$(window).on('scroll', materialKitDemo.checkScrollForParallax);

}

});

</script>

</body>

</html>

6. adminlogin.php

<!DOCTYPE html>

<html>

<body>

<?php session_start();

include'../config/connection.php';

$username = $_POST['username'];

$pass = md5($_POST['password']);

$cekuser = mysql_query("SELECT * FROM admins WHERE username =

'$username'");

$jumlah = mysql_num_rows($cekuser);

$hasil = mysql_fetch_array($cekuser);

UNIVERSITAS SUMATERA UTARA

Page 84: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

if($jumlah == 0 || $hasil['username'] != "admin") {

echo '<script>alert("Username salah !")</script>';

echo '<meta http-equiv="refresh" content="0;url=../admin.php" />';

}

else if($pass != $hasil['password']) {

echo '<script>alert("Password salah !")</script>';

echo '<meta http-equiv="refresh" content="0;url=../admin.php" />';

}

else {

$_SESSION['user'] = $hasil['username'];

if($hasil['username'] == "admin")

header('location:../admin/index.php');

else

header('location:../profil.php');

}

?>

</body>

</html>

7. daftar.php

<!DOCTYPE html>

<html>

<body>

<?php

UNIVERSITAS SUMATERA UTARA

Page 85: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

include('../config/connection.php');

$nisn = $_POST['nisn'];

$nama_lengkap = $_POST['nama_lengkap'];

$password = $_POST['password'];

$hash= md5($password);

$check = mysql_query("SELECT * FROM users WHERE nisn='$nisn'");

$cekusers = mysql_query("SELECT * FROM users");

$jumlah = mysql_num_rows($cekusers) + 1;

if(empty($nisn) || empty($nama_lengkap) || empty($password)) {

echo '<script>alert("Semua form wajib diisi !")</script>';

echo '<meta http-equiv="refresh" content="0;url=../daftar.php"

/>';

}

else if (mysql_num_rows($check)<> 0) {

echo '<script>alert("NISN sudah pernah terdaftar sebelumnya

!")</script>';

echo '<meta http-equiv="refresh" content="0;url=../daftar.php"

/>';

}

else {

$save = mysql_query("INSERT INTO

users(nisn,nama_lengkap,password,no_pendaftar) VALUES

('$nisn','$nama_lengkap','$hash','$jumlah')");

UNIVERSITAS SUMATERA UTARA

Page 86: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

if ($save==true) {

echo '<script>alert("Akun kamu telah berhasil dibuat...

!")</script>';

echo '<meta http-equiv="refresh" content="0;url=../login.php" />';

}

else {

echo '<script>alert("Registrasi gagal !")</script>';

echo '<meta http-equiv="refresh" content="0;url=../daftar.php"

/>';

}

}

?>

</body>

</html>

8. seleksi.php

<?php

include '../config/connection.php';

session_start();

if(isset($_SESSION['user'])) {

if($_SESSION['user'] == "admin"){

$nisn = $_SESSION['user'];

}

else

header('location:../profil.php');

}

else

header('location:../login.php');

?>

UNIVERSITAS SUMATERA UTARA

Page 87: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="description" content="A front-end template that helps

you build fast, modern mobile web apps.">

<meta name="viewport" content="width=device-width, initial-

scale=1">

<title>Admin - SMAN 1 Serbelawan</title>

<meta name="mobile-web-app-capable" content="yes">

<link rel="icon" sizes="192x192" href="images/android-

desktop.png">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style"

content="black">

<meta name="apple-mobile-web-app-title" content="Material Design

Lite">

<link rel="apple-touch-icon-precomposed" href="images/ios-

desktop.png">

<meta name="msapplication-TileImage" content="images/touch/ms-

touch-icon-144x144-precomposed.png">

<meta name="msapplication-TileColor" content="#3372DF">

<link rel="icon" href="../assets/img/favicon.ico">

<link

href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,

italic,thin,light,bolditalic,black,medium&amp;lang=en"

rel="stylesheet">

<link

href="https://fonts.googleapis.com/icon?family=Material+Icons"

rel="stylesheet">

<link rel="stylesheet" href="assets/css/material.min.css">

<link rel="stylesheet" href="assets/css/styles.css">

UNIVERSITAS SUMATERA UTARA

Page 88: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />

<link href="../assets/css/material-kit.css" rel="stylesheet"/>

<style>

#view-source {

position: fixed;

display: block;

right: 0;

bottom: 0;

margin-right: 40px;

margin-bottom: 40px;

z-index: 900;

}

</style>

</head>

<body>

<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--

fixed-drawer mdl-layout--fixed-header">

<header class="demo-header mdl-layout__header mdl-color--grey-100

mdl-color-text--grey-600">

<div class="mdl-layout__header-row">

<span class="mdl-layout-title">Seleksi</span>

</div>

</header>

<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-

900 mdl-color-text--blue-grey-50">

<header class="demo-drawer-header">

<img src="assets/images/user.jpg" class="demo-avatar">

<div class="demo-avatar-dropdown" style="margin-top: 5%;">

<span>hello, Admin...</span>

</div>

</header>

<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-

800">

UNIVERSITAS SUMATERA UTARA

Page 89: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<a class="mdl-navigation__link" href="index.php"><i class="mdl-

color-text--blue-grey-400 material-icons"

role="presentation">home</i>Beranda</a>

<a class="mdl-navigation__link" href="seleksi.php"><i class="mdl-

color-text--blue-grey-400 material-icons"

role="presentation">inbox</i>Seleksi</a>

<a class="mdl-navigation__link" href="diterima.php"><i class="mdl-

color-text--blue-grey-400 material-icons"

role="presentation">delete</i>Siswa Diterima</a>

<a class="mdl-navigation__link" href="../proses/logout.php"><i

class="mdl-color-text--blue-grey-400 material-icons"

role="presentation">delete</i>Keluar</a>

</nav>

</div>

<main class="mdl-layout__content mdl-color--grey-100">

<?php

$query = mysql_query("SELECT * FROM nilais LEFT JOIN users on

users.nisn = nilais.nisn WHERE status is NULL");

while($row = mysql_fetch_assoc($query))

{

extract($row);

echo "

<div class=\"demo-updates mdl-color--white mdl-shadow--2dp mdl-

cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-

desktop\">

<div class=\"mdl-card__supporting-text mdl-color-text--grey-600

text-center\">

<h2>$nama_lengkap</h2>

<h4>$nisn</h4>

<p>

No. Pendaftar : 0$no_pendaftar <br />

No. Peserta UN : $no_peserta_un <br />

Tahun Lulus : $tahun_lulus <br />

<b>NEM : $nem</b>

</p>

<div class=\"row\">

<div class=\"col-md-3\">

<div class=\"tim-typo text-center\">

UNIVERSITAS SUMATERA UTARA

Page 90: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

<h4>Bahasa Indonesia</h4>

<h4>$bind</h4>

</div>

</div>

<div class=\"col-md-3\">

<div class=\"tim-typo text-center\">

<h4>Bahasa Inggris</h4>

<h4>$bing</h4>

</div>

</div>

<div class=\"col-md-3\">

<div class=\"tim-typo text-center\">

<h4>Matematika</h4>

<h4>$mtk</h4>

</div>

</div>

<div class=\"col-md-3\">

<div class=\"tim-typo text-center\">

<h4>Ilmu Pengetahuan Alam</h4>

<h4>$ipa</h4>

</div>

</div>

</div>

</div>

<div class=\"mdl-card__actions mdl-card--border mdl-color--grey-

200\">

<center>

<a href=\"../proses/terima.php?nisn=$nisn\" class=\"btn btn-

success\">Terima</a>

<a href=\"../proses/tolak.php?nisn=$nisn\" class=\"btn btn-

danger\">Tolak</a>

</center>

</div>

</div>

UNIVERSITAS SUMATERA UTARA

Page 91: SISTEM INFORMASI PENERIMAAN SISWA BARU PADA SMA …

";

}

?>

</main>

</div>

<script src="assets/js/material.min.js"></script>

</body>

</html>

UNIVERSITAS SUMATERA UTARA