Sistem Informasi Sekolah Berbasis Web pada SMK Tunas Pelita Binjai Chapter III V

BAB 3
PERANCANGAN SISTEM

3.1. Perencanaan dan Perancangan
Tahap perencanaan dan perancangan merupakan tahap awal yang dilakukan
penulis dalam membangun website ini. Pada tahap ini penulis akan menjabarkan
awal perancangan sistem, diagram alur, tujuan dan isi dari situs yang akan
dibangun. Situs ini dirancang dengan menggunakan PHP sebagai bahas
pemogramannya, MySQL sebagai databasenya, Apache sebagai servernya, dan
Dreameamweaver6sebagai media untuk membuat layout dari situs yang
akandirancang.
Sebelum membangun sebuah website, ada beberapa pertanyaan sebagai
identifikasi awal yang perlu dilakukan, antara lain:
1

Website apa yang akan dibangun ?

2

Siapa saja pengunjung yang akan diharapkan ke website tersebut ?


3

Apa saja aktivitas yang dapat dilakukan pengunjung dalam website ?

4

Apa saja yang ingin dicapai dari pembuatan website tersebut ?
Dengan menjawab beberapa pertanyaan di atas, maka akan semakin

membantu dan mempermudah dalam membangun website ini karena dengan
pertanyaan-pertanyaan tersebut akan terbentuk kata kunci untuk membangun dan
mengembangkan website ke arah yang lebih lanjut. Berkaitan dengan website
yang akan dibangun, maka jawaban dari penulis untuk beberapa pertanyaan di
atas sebagai berikut:

Universitas Sumatera Utara

a.

Website yang akan dibuat adalah sistem informasi berbasis web,

yangmenyediakan informasi yang menyangkut pendidikan dan kegiatan yang
dilakukan sekolah.

b.

Pengunjung situs tersebut adalah para siswa SMK Tunas Pelita Binjai, namun
tidak menutup kemungkinan bagi masyarakat umum yang ingin mengetahui
tentang SMK Tunas Pelita Binjai.

c.

Aktivitas yang dapat dilakukan dalam situs tersebut adalah pengunjung dapat
mengetahui informasi sekolah, siswa dan pegawai dapat login untuk
mengolah datanya masing-masing.

d.

Target yang ingin dicapai dalam pembuatan situs ini adalah dapat
memberikan kemudahan bagi siswa dalam memperoleh informasi yang
dibutuhkan


serta

dapat

membantu

sekolah

dalam

mempromosikan

sekolahnya.

Adapun struktur dari situs yang penulis buat ditunjukkan pada Gambar 3.1.

Gambar 3.1. Struktur Website

Universitas Sumatera Utara


3.2. Perancangan Halaman Website
Adapun perancangan halaman-halaman website adalah sebagai berikut:

3.2.1. Halaman Home
Halaman ini merupakan halaman utama dari website. Halaman ini berisikan
beberapa informasi umum tentang sekolah dan link-link utama yang menuju ke
halaman lainnya.

3.2.2. Halaman About Us
Halaman ini berisikan informasi sekilas tentang sekolah dan alamat sekolah.

3.2.3. Halaman Login
Halaman ini berisikan form untuk login siswa yang sudah mendaftar dan guru
yang ada disekolah.

3.2.4. Halaman Admin
Halaman admin berisikan login yang akan menghubungkan ke halaman
administrator. Halaman ini khusus hanya dapat diakses oleh administrator website
dan halaman ini terpisah dari halaman utama atau indeks untuk melakukan

pengaturan website seperti menambah, menghapus dan mengubah data.

3.2.5. Halaman Sekilas
Halaman sekilas berisikan sekilas pengertian tentang sekolah menengah kejuruan
(SMK), galeri foto kegiatan sekolah, dan pengertian dari berbagai kejuruan yang
tersedia di sekolah.

Universitas Sumatera Utara

3.3. Perancangan Diagram Konteks
Diagram konteks adalah suatu diagram yang terdiri dari suatu proses saja dan
biasa diberi nomor proses 0. Proses ini mewakili dari dari seluruh sistem.
Diagram konteks menggambarkan input atau output suatu sistem dengan dunia
luar atau dunia kesatuan luar. Lihat pada gambar 3.2, ini adalah bentuk diagram
konteks dari website SMK Tunas Pelita Binjai.

Gambar 3.2. Diagram Konteks Website

3.4. Perancangan Diagram Alir (Flowchart) Website
Diagram alir (flowchart) ini menjelaskan secara rinci langkah-langkah dari proses

program. Flowchart dibuat dengan menggunakan simbol-simbol tertentu yang
menyatakan setiap langkah program. Berikut ini adalah bentuk-bentuk flowchart
dari website SMK Tunas Pelita Binjai.

Universitas Sumatera Utara

3.4.1. Flowchart Menu Utama
Seorang pengunjung website dapat mengakses website SMK Tunas Pelita Binjai
dan dapat berpindah dari halaman yang satu ke halaman yang lainnya. Masingmasing halaman utama memiliki link-link yang dapat dipilih oleh pengunjung.
Flowchart menu utama dapat dilihat pada Gambar 3.3.

Gambar 3.3. Flowchart Menu Utama

3.4.2. Flowchart Admin
Halaman admin hanya bisa diakses oleh administrator. Username dan password
dari administrator harus sesuai dengan tabel admin. Jika username dan password
sesuai maka admin akan masuk ke halaman administrator dan jika username atau
password salah maka akan timbul pesan data tidak tepat dan diminta untuk login
kembali. Flowchart admin dapat dilihat pada Gambar 3.4.


Universitas Sumatera Utara

Gambar 3.4. Flowchart Menu Admin

3.5. Merancang Database Server
Database merupakan tempat penyimpanan data yang terstruktur sehingga
dapatdiakses dengan cepat dan mudah. Tahap mempersiapkan database ini
merupakan tahap dimana penulis mempersiapkan tempat untuk menampung data
di server. Data tersebut akan diproses oleh program yang kita buat pada tahap
pemograman baik menambah, mengubah, penghapusan, dan menampilkan
database itu sendiri. Database terdiri dari tabel-tabel yang dibuat menggunakan
program MySQL. Database yang dirancang penulis adalah database tugas yang
terdiri dari 5tabel sebagai berikut:

Universitas Sumatera Utara

1. Tabel Admin

Tabel 3.1. Tabel Admin
Field Name


Type

Width

Description

Admin

varchar

10

Nama user

Pass

varchar

20


Password

Universitas Sumatera Utara

2. Tabel Siswa

Tabel
Tabel 3.2 . Siswa
Field Name

Type

Width

Description

NIS

int


10

Nomor induk siswa

Pass

varchar

20

Password siswa

nama

varchar

30

Nama siswa


jk

varchar

10

Jenis Kelamin siswa

ttl

varchar

15

Tempat lahir siswa

ttl2

date

agama

Varchar

Tanggal lahir
10

Agama siswa

Alamat

Varchar

100

Alamat siswa

Asal

Varchar

30

Asal SMP

Ayah

Varchar

20

Nama ayah

Ibu

Varchar

20

Nama ibu

Alamat ortu

Varchar

100

Alamat orang tua

Telportu

Varchar

13

Telepon orang tua

Job

Varchar

20

Pekerjaan orang tua

Wali

Varchar

20

Nama wali

Alamatwali

Varchar

100

Alamat wali

Telpwali

Varchar

13

Telepon wali

Universitas Sumatera Utara

Jobwali

Varchar

20

Pekerjaan Wali

Tabel
Tabel 3.2. Siswa
Field Name

Type

Width

Description

Jurusan

Varchar

30

Jurusan siswa di sekolah

Foto

File

100

Pas foto siswa

3. Tabel Guru

Tabel 3.3. Tabel Guru
Field Name

Type

Width

Description

NIP

Int

10

Nomor Induk

Nama

varchar

30

Nama guru

Agama

Varchar

10

Agama guru

Alamat

varchar

50

Alamat guru

kontak

varchar

15

Kontak guru

Guru

Varchar

20

Bidang yang ditekuni guru

Tugas

varchar

30

Mengajar sesuai tugas

Pass

Varchar

20

Password guru

Foto

File

200

Pas foto guru

Universitas Sumatera Utara

Universitas Sumatera Utara

4. Tabel Files

Tabel 3.4. Tabel Files
Field Name

Type

Width

Description

Nama_file

varchar

50

Nama file

Deskripsi

varchar

100

Deskripsi singkat

Dari

Varchar

50

Nama pengunggah

NIP

Integer

6

Nomor induk pengunggah

File

Varchar

255

Judul file

Universitas Sumatera Utara

5. Tabel nilai

Tabel 3.5. Tabel Nilai
Field Name

Type

Width

Description

Nis

Varchar

10

Nomor induk siswa

Bindo

Varchar

3

Bahasa indonesia

Mm

Varchar

3

Matematika

Agm

Varchar

3

Agama

Kimia

Varchar

3

Kimia

Fisika

Varchar

3

Fisika

Kwu

Varchar

3

Kewirausahaan

Mulok

Varchar

3

Muatan lokal

Ips

Varchar

3

Ilmu pengetahuan alam

Kjrn

Varchar

3

Ilmu pengetahuan sosial

Bing

Varchar

3

Bahasa inggris

Pjs

Varchar

3

Pendidikan jasmani

Seni

Varchar

3

Kesenian

Pkn

Varchar

3

Pendidikan kewarganegaraan

Universitas Sumatera Utara

BAB 4
IMPLEMENTASI SISTEM

4.1. Pengertian Implementasi Sistem
Implementasi sistem adalah langkah-langkah atau proses yang dilakukan dalam
menyelesaikan desain sistem yang telah disetujui, selanjutnya diinstal, diuji dan
mulai digunakan untuk menggantikan sistem yang diperbaiki. Implementasi
merupakan tahap penerapan rancangan yang sudah dibuat ke dalam. Bahasa
pemrograman yang digunakan. Dalam tahap ini dilakukan beberapa hal yaitu
penulisan program, kompilasi dan membuat program aplikasi yang siap pakai atau
executable.

4.2. Kebutuhan Sistem
Sarana-sarana sangat dibutuhkan untuk memperoleh hasil dalam perancangan
sistem yang baik yaitu berupa komponen-komponen penting dalam menunjang
penerapan sistem yang telah dirancang. Komponen-komponen penting dalam
menunjang penerapan sistem yang telah dirancang tersebut adalah sebagai
berikut:
1.

Perangkat Keras (hardware)
Hardware adalah komponen-komponen yang membentuk suatu sistem
komputeryang berhubungan dengan peralatan (komponen) lainnya, sehingga
memungkinkan komputer dapat melakukan tugasnya. Umumnya peralatan
tersebut terdiri dari tiga jenis perangkat yaitu masukan (input device),

Universitas Sumatera Utara

perangkat pengolahan (processor) dan perangkat keluaran (output device),
adapun hardware yang digunakan penulis dalam merancang sistem ini
adalah:
a.

Peralatan input, seperti: mouse, keyboard.

b. Peralatan proses, seperti: processor, RAM 4GB, hardisk 500 GB.

2.

c.

Peralatan output, seperti: monitor.

d.

Peralatan tambahan lainnya, seperti USB flashdisk.

Perangkat Lunak (software)
Software adalah seluruh fasilitas suatu sistem pengolahan data yang
bukanperalatan komputernya atau merupakan suatu susunan yang harus
diberikan kepada unit pengolahan agar komputer dapat menjalankan
pekerjaannya sesuai yang dibutuhkan. Fasilitas software terdiri dari sistem
desain, program-program dan prosedur-prosedur. Software yang digunakan
antara lain:
a.

Sistem operasi minimum microsoft windows XP dan maksimun microsoft
windows 8.1

b. Macromedia Dreamweaver sebagai pemrograman dan
perancangandesain.

3.

Unsur Manusia (Brainware)
Brainware merupakan aspek manusia yang menangani pengolahan
komputermaupun pengembangan, yang termasuk dalam brainware adalah:

Universitas Sumatera Utara

a.

Analisis sistem, yaitu orang membentuk dan membangun fasilitas
rancangan sistem atau program.

b. Programmer, yaitu orang yang mengerti bahasa pemrograman yang
digunakandalam membuat dan membangun suatu program.
c.

Operator (administrator), yaitu orang yang mengoperasikan sistem
sepertimemasukkan data untuk dioperasikan oleh komputer dalam
menghasilkan informasi dan lainnya.

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

4.3. Tampilan Program
Adapun tampilan-tampilan program yang telah dirancang, adalah sebagai berikut:

4.3.1. Tampilan Home
Tampilan home merupakan halaman yang paling pertama tampil saat
pengunjung mengakses web sekolah ini, dalam halaman in berisi menu-menu
yang ada dalam web sekolah SMK Tunas Pelita Binjai. Tampilan home dilihat
pada gambar 4.1.

Universitas Sumatera Utara

Gambar 4.1. Tampilan Home

4.3.2. Tampilan Login
Tampilan Login menampilkan login panel untuk siswa dan guru, di halaman ini
juga tersedia link untuk ke panduan dan login admin.

Gambar 4.2. Tampilan Login Sekolah

Universitas Sumatera Utara

4.3.3. Tampilan About Us
Pada Tampilan ini pengunjung dapat melihat sekilas profil sekolah, mulai dari
alamat, nomor telepon dan profil di social media.

Gambar 4.3. Tampilan About Us

4.3.4. Tampilan Login Admin
Tampilan ini menampilkan suatu form untuk masuk ke halaman admin yang dapat
dibuka pada bagian menu login, tampilannya dapat dilihat pada gambar 4.4.

Universitas Sumatera Utara

Gambar 4.4. Tampilan Login Admin

4.3.5. Tampilan Halaman Admin
Tampilan ini bertujuan untuk mengubah data siswa, guru, ataupun nilai baik itu
menambahkan data, menghapus data yang ada di dalam website sekolah ini.

Gambar 4.5. Tampilan Halaman Admin

Universitas Sumatera Utara

4.3.6. Tampilan Halaman Sekilas
Pada halaman sekilas, menampilkan galeri sedikit kegiatan, kejuruan yang tersedia
serta pengertian SMK.

Gambar 4.6. Tampilan Halaman Sekilas

4.3.7. Tampilan Halaman Panduan
Halaman panduan berisi panduan untuk bagaimana calon siswa mendaftar ke sekolah
SMK Tunas Pelita Binjai. Tampilan halamannya dapat dilihat pada gambar 4.7.

Universitas Sumatera Utara

Gambar 4.7 Panduan

4.3.8. Tampilan Halaman Siswa
Tampilan halaman siswa akan muncul ketika siswa login ke halaman tersebut.

Gambar 4.8. Halaman Siswa

Universitas Sumatera Utara

BAB 5
KESIMPULAN DAN SARAN

5.1. Kesimpulan
Dari keterangan dan bab-bab sebelumnya penulis dapat mengambil beberapa
kesimpulan sebagai berikut:
1. Dalam pembuatan sistem informasi ini ada beberapa tahapan yang dilakukan
penulis yaitu tahap perencanaan, tahap perancangan diagram konteks, merancang
dan mempersiapkan database server, dan tahap implementasi sistem.
2. Website ini dibuat dengan menggunakan bahasa pemograman PHP sebagai
bahasapemogramannya, MySQL sebagai database servernya dan apache sebagai
server.
3. Pembuatan website ini dilakukan pada intranet atau komputer lokal tanpa
terkoneksi ke internet. Koneksi internet dibutuhkan pada saat menghosting
website dan pengaksesan situs setelah di hosting.

5.2. Saran
Adapun beberapa saran yang penulis sampaikan pada pembuatan website ini adalah:
1. Perlu dilakukan pembaharuan atau update berkala oleh administrator pada
website ini guna memberikan informasi yang terbaru.
2. Untuk menarik minat pengunjung, perlu dibuat rancangan layout atau template
dengan gambar dan animasi yang menarik.
3. Perlu dilakukan penggandaan (backup) database secara teratur ke dalam media

Universitas Sumatera Utara

penyimpanan lainnya untuk mencegah hal-hal yang tidak diinginkan seperti data
hilang atau rusak.
4. Dalam pembuatan situs, perlu dirancang dengan teliti agar dalam melakukan
pembaharuan data tidak terjadi kesalahan.
Dengan adanya website ini dapat memotivasi siswa SMK Tunas Pelita Binjai
dalam berprestasi dan terus meningkatkan ilmu pengetahuannya khususnya dalam
bidang Teknologi Informasi.

Universitas Sumatera Utara