## Rancang Bangun Website Sekolah Dengan Menggunakan Framework Bootstrap
( Studi Kasus SMP Negeri 6 Prabumulih )
Andi Christian 1 , Sebri Hesinto 2 , Agustina 3
Jl. Patra No. 50 Kelurahan Sukaraja Kecamatan Prabumulih Selatan, Sumatera Selatan STMIK Prabumulih
andichristian_cdm@yahoo.com 1 , Sebrivirgo@yahoo.com 2 , Agustina.13984268@gmail.com 3
Abstraksi -- Media informasi yang digunakan di SMP Negeri 6  prabumulih  masih  manual  seperti  menggunakan  papan pengumuman,  spanduk  dan  berosur  sehingga  SMP  Negeri  6 Prabumulih  membutuhkan  suatu  media  informasi  yang  cepat, tepat, tanpa harus  ke sekolah dan dapat di akses secara online oleh  masyarakat  luas  agar  mendapatkan  informasi  yang akurat.  Metode  yang  digunakan  dalam  penelitian  ini  ialah dengan  metode  waterfall  dengan  menganalisa  data  yang diperoleh  dari  sekolahan  kemudian  membanguna  website Sekolah  Menengah  Pertama  Negeri  6  Prabumulih  dan Perancangan  yang  digunakan  untuk  membuat  website  sekolah ini  yaitu  dengan  menggunakan  program  PHP  dan  untuk desainnya  menggunakan  Dreamweaver  CS6,  Bootstrap  dan databasenya. Hasil dari penelitian ini adalah agar mempermudah  para  siswa,  guru  dan  semua  komponen  yang ada  di  lingkungan  sekolah  tersebut  untuk  mendapatkan informasi dengan cepat dan akurat.
Kata Kunci: Sistem Informasi, Website, Sekolah

## 1. Pendahuluan
Website sekolah  sekarang  ini  sedang  menjadi  tren  di dunia  pendidikan  dan website sekolah  mendapatkan perhatian,  tanggapan  yang  sangat  bagus  dari  berbagai  pihak baik itu dari tenaga kependidikan, siswa dan juga masyarakat serta  keberadaan website sekolah  pada  saat  ini  memang sangat penting.  Proses penginputan data siswa,data guru dan karyawan  disekolah  tersebut,akant  tetapi    sekolah  ini  belum memiliki website sendiri  untuk  mempermudah  siswa,  guru dan  karyawan  mendapatkan  informasi,  dengan  begitu  sulit untuk  mengetahui  informasi  yang  ada  pada  sekolah tersebut . Tujuan  diadakan  penelitian  ini  untuk    membuat website pada  Sekolah  Menengah  Pertama  Negeri  6 Prabumulih. Untuk mempermudah siswa,guru, karyawan dan masyarakat mendapatkan informasi tentang Sekolah Menengah  Pertama  Negeri  6  Prabumulih  dengan  cepat. Untuk  memperkenalkan  Sekolah  Menengah  Pertama  Negeri 6 Prabumulih ke publik melalui website.

## 2. TINJAUAN PUSTAKA
2.1 Rancang Bangun
Rancang  Bangun adalah program  yang  menentukan aktifitas  pemrosesan  informasi  yang  dibutuhkan  untuk
penyelesaian tugas-tugas khusus dari pemakai atau pengguna komputer.[8]
1.2 Website website atau disingkat web, dapat diartikan sekumpulan  halaman  yang  terdiri  dari  beberapa  laman  yang berisi  informasi  dalam  bentuk  data  digital  baik  berupa  text, gambar,  video,  audio  dan  animasi  lainnya  yang  disediakan melalui jalur koneksi internet [1]

## 2.3 Bootstrap
Bootstrap adalah  paket  aplikasi  siap  pakai  untuk membuat front-end sebuah website .  Bisa  dikatakan, bootstrap adalah template desain web dengan  fitur  plus. Bootstrap diciptakan untuk mempermudah proses desain web bagi  berbagai  tingkat  pengguna,  mulai  dari level pemula hingga  yang  sudah  berpengalaman.  Cukup  bermodalkan pengetahuan dasar mengenai HTML dan CSS , anda pun siap menggunakan bootstrap [5]
2.4 Pengertian PHP
PHP (Kepanjangan: Hypertext  Preprocessor) itu bahasa pemrograman  berbasis web .  Jadi  , PHP itu  adalah  bahasa pemrograman  yang  digunakan  untuk  membuat  aplikasi berbasis web ( website, blog atau aplikasi web ).[3]

## 2.5 MySQL
MySQL merupakan software  RDBMS (server  database) yang  dapat  mengelola database dengan  sangat  cepat,  dapat menampung  data  dalam  jumlah  sangat  besar,  dapat  diakses oleh  banyak user  (multi-user) dan  dapat  melakukan  suatu proses secara sinkron atau berbarengan (multi-threaded).[4]
2.6 Xampp
Xampp adalah  salah  satu  paket installer yang  berisi Apache yang merupakan web server tempat menyimpan file- file  yang  diperlukan website ,  dan Phpmyadmin sebagai aplikasi  yang  digunakan  untuk  perancangan database MySQL .[1]
2.7 Dreamweaver Dreamweaver merupakan  suatu  perangkat  lunak web editor  keluaran adobe  system yang  digunakan  untuk membangun  dan  mendesign  suatu website dengan  fitur-fitur yang menarik dan kemudahan dalam penggunaannya.[7]
2.8 Web Server
Web  server adalah  sebuah  perangkat  lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web browser dan mengirimkan kembali hasilnya  dalam  bentuk  halaman-halaman web yang umumnya berbentuk dokumen HTML . [6]

## 3. METODELOGI PENELITIAN
A. Metode Pengumpulan Data
1. Observasi Pengumpulan  data  dengan  melakukan  pengamatan secara  langsung  terhadap  objek  penelitian,  terhadap kegiatan yang sedang berlangsung terutama objek yang sedang diteliti.
2. Wawancara Dalam  hal  ini  penulis  melakukan  proses  interaksi  dan komunikasi  atau  Tanya  jawab  pada  pihak-pihak  terkait yang memberikan informasi tentang objek penelitian.
3. Dokumentasi Teknik  dokumentasi  digunakan  untuk  mencari  sumber informasi  yang  ada  kaitannya  dengan  penelitian  yang berupa dokumen dan foto.
4. Studi Pustaka Peneliti  mengumpulkan teori-teori buku-buku yang ada perpustakaan sebagai referensi.
B. Metode Pengembangan Sistem
Metode  pengembangan  sistem  yang  digunakan  dalam penelitian  ini  adalah  metode  model  air  terjutn  atau  yang sering disebut dengan istilah waterfall [2]. ada empat tahapan dalam  model  waterfall  yaitu  (1). System  Engineering (2). Analysis (3). Design (4). Coding .  (5). Testing  (6). Maintenance Berikut adalah gambaran dari metode

## Gambar 3.1 Model Waterfall
1. System  Engineering atau  rekayasa  sistem  dan  analisa merupakan    pembentukan  kebutuhan  dari  semua  elemen sistem  dan  menganalisa  kebutuhan  keinginan user . Meliputi  I/O,  walau  pengerjaan,  ukuran  dan  jumlah  data yang ditangani.
2. Analysis, Analisa  kebutuhan  sistem  dan software adalah proses  menentukan  arsitektur  sistem  secara  total  dan menentukan ukuran data dan jumlah data.
3. Design adalah menentukan dasar-dasar pembentukan dan pemilihan  struktur  data,  struktur  program,  arsitektur program, pemilihan algoritma, intereksi dengan user.
4. Coding adalah  mentrasformasikan  desain  kedalam  baris- baris program, pemilihan bahasa.
5. Testing merupakan pengujian kebenaran program.
6. Maintenance adalah  proses  perawatan software agar dapat digunakan terus.

## C. Alat Bantu Analisis dan Perancangan
1. Diagram Konteks Diagram konteks
adalah diagram yang menggambarkan sumber serta tujuan data yang akan diproses  atau  dengan  kata  lain  diagram  tersebut digunakan  untuk  menggambarkan  sistem  secara umum/global dari keseluruhan sistem yang ada.
2. Data Flow Diagram (DFD)
Data Flow Diagram
digunakan untuk menggambarkan  suatu  sistem  yang  telah  ada  atau sistem  baru  yang  akan  dikembangkan  secara  logika tanpa  mempertimbangkan  lingkungan  fisik  dimana data tersebut akan disimpan. Data flow diagram juga digunakan  pada  metodelogi  pengembangan  sistem yang terstruktur.
3. Entity Relationship Diagram (ERD) Entity Relationship Diagram adalah sebuah pendekatan top-bottom dalam perancangan basis data yang  dimulai  dengan  mengidentifikasikan  data-data terpenting  yang  disebut  dengan  entitas,  dan hubungan  antara  entitas-entitas  tersebut  yang digambarkan dalam suatu model.
4. HASIL DAN PEMBAHASAN
4.1 Analisa Sistem Yang Berjalan
Analisa  sistem  merupakan  suatu  tahap  pemahaman proses  yang  bertujuan  untuk  mengetahui  proses  apa  saja yang  terlibat  di  dalam  sistem,  bagaimana  kerja  dari  setiap proses  yang  terlibat  didalam  sistem  dan  hubungan  suatu proses dengan proses  yang  lainnya. Dari pemahaman proses tersebut  maka  dapat  dilakukan  suatu  evaluasi  dan  usulan terhadap sistem yang ada, untuk dikembangkan lebih lanjut.
4.2 Evaluasi Sistem Yang Sedang Berjalan
Evaluasi  sistem  pengelolahan  data  siswa,  guru,  dan karyawan  di  SMP  Negeri  6  Prabumulih  memang  sudah menggunakan  komputer  dengan  Aplikasi Microsoft  Excel , dimana Microsoft  Excel ini  tidak  dapat  di  akses  pemakai secara  bersamaan  dan  masih  menggunakan flashdisk untuk saling tukar data dan informasi.
4.3 Perancangan Sistem Yang di usulkan
Tahap  perancangan  prosedur  yang  diusulkan  ini  akan dibuat diagram  konteks , data  flow  diagram ,  tahap  prosedur yang diusulkan ini merupakan pengembangan dari
System Engeneering Analysis Design Coding Testing Maintenance
perancangan  sistem  yang  diusulkan  untuk  menyelesaikan permasalahan.

## 4.3.1 Diagram Konteks

## Gambar 4.1  Diagram Konteks

## 4.3.2 Data Flow Diagram level 0
Gambar 4.3 Entity Relationship Diagram

## 4.4 IMPLEMENTASI DAN PENGUJIAN SISTEM
Tahap implementasi merupakan tahap penerapan sistem supaya  dapat  dioperasikan.  Pada  tahap  ini  dijelaskan mengenai,  implementasi  perangkat  lunak,  implementasi perangkat keras dan implementasi antar muka.
4.5  Implementasi Perangkat Lunak
Untuk  mendukung  sistem  yang  diusulkan  bejalan dengan  optimal  dibutuhkan  software  pengolahan  data, adapun  perangkat  lunak  yang  digunakan  untuk  mendukung pembuatan website sekolah ini sebagai berikut: 1. Sistem Operasi
: Windows
2. Pembuatan Basis Data : Xampp Control Panel
Adapun  perangkat  keras  yang  digunakan  untuk mendukung pembuatan website ini sebagai berikut:
Perangkat  keras  yang  digunakan  berdasarkan kebutuhan  minimal  yang  harus  terpenuhi  adalah  sebagai berikut:
1. Komputer/Laptop
a. Processor Intel Pentium Dual Core atau diatasnya b. Harddisk 250 GB atau diatasnya
c. RAM 1 GB
d. VGA 512 MB
4.6  Pengujian Sistem
Pada  bagian  pengujian  sistem  ini  penulis  menyajikan bahasan tentang apa yang akan kita temui pada website SMP Negeri  6  Prabumulih,  menu  dan  langkah-langkah  didalam pengoperasian  dan  serta  proses  menampilkan.  Untuk menjalankan website SMP  Negeri  6  Prabumulih  dapat dilakukan sebagai berikut:
1. Nyalakan  komputer/Laptop  tunggu  komputer/Laptop menampilkan area kerja.
2. Buka xampp klik start pada apache dan MySQl.
Website SMP Negeri 6 Prabumulih Pengunjung Admin Data Admin Data Beranda Data Profil Data Guru Data Siswa Data Alumni Data Mata Pelajaran Data Galeri Data Berita Infomasi Beranda Informasi Profil
Informasi Galeri
Informasi berita Informasi kurikulum Informasi Kotak kami Informasi verifikasi Data Admin Lihat Beranda Lihat Profil Lihat Galeri Lihat berita Lihat kurikulum Lihat Kotak kami Infomasi Beranda Informasi Profil Informasi Galeri Informasi berita Informasi kurikulum Informasi Kotak kami 1.0 Input Data Admin 2.0 Input Data Beranda 3.0 Input Data Profil 4.0 Input Data Guru 5.0 Input Data Siswa 6.0 Input Data Alumni 7.0 Input Data Mata Pelajaran 9.0 Input Data Berita 8.0 Input Data Galeri Admin Data Admin Data Beranda Data Prifil Data Guru Data Siswa Data Alumni Mata Pelajaran Data Galeri Data Berita Pengujung 10.0 Sistem Informasi Website SMP N 6 Prabumulih Data Beranda Data Profil Data Guru Data Siswa Alumni Data Mata Pelajaran Data Galeri Data Berita Admin Lihat Beranda Lihat Profil Lihat Galeri Lihat berita Lihat kurikulum Lihat Kotak kami Infomasi Beranda Informasi Profil Informasi Galeri Informasi berita Informasi kurikulum Informasi Kotak kami Infomasi Beranda Informasi Profil Informasi Galeri Informasi berita Informasi kurikulum Informasi Kotak kami Informasi verifikasi Data Admin Admin *Id_admin username password menu siswa guru komentar berita submenu galeri *Id_menu judul link urutan *Id_submenu Id_menu link urutan *Id_galeri judul gambar tanggal *Id_siswa nis nama alamat *Id_guru nip nama alamat pesan *Id_pesan nama subjek email *Id_berita judul gambar isi *Id_komentar Id_berita nama email halaman *Id_halaman judul isi 1 alumni *Id_alumni nis nama alamat Matapelajaran *Id_matapelajaran Judul Gambar Tanggal 1 M Mengelola 1 M 1 M M 1 1 M 1 1
3. Buka web browser mozila firefox atau google chorme
4. Dibagian addres bar ketik http://localhost/smpn6pbm /
5. Kemudian  akan  masuk  kehalaman  utama,  masuk sebagai  admin  maka  dibagian address  bar ketik http://localhost/smpn6pbm/admin/
6. Kemudian  akan  masuk  kehalaman login  admin , masukkan username dan password .
4.7 Implementasi Antar Muka
1. Tampilan Halaman Login Admin
Gambar 5.1 tampilan login admin
Gambar 4.4 tampilan Login Admin
2. Tampilan menu beranda pada website
Gambar 4.5 tampilan beranda pada website
3. Tampilan visi dan misi pada website
Gambar 4.6 Tampilan visi dan misi pada website
4. Tampilan sejarah pada website
Gambar 4.7 Tampilan sejarah pada website 5. Tampilan kata sambutan pada website
Gambar 4.8 Tampilan kata sambutan pada website
6. Tampilan data guru pada website
Gambar 4.9 Tampilan data guru pada website 7. Tampilan data siswa pada website
8. Tampilan data alumni pada website

## Gambar 4.11 Tampilan alumni pada website
9. Tampilan data mata pelajaran pada website
Gambar 4.12 Tampilan mata pelajaran pada website

## 10. Tampilan Menu galeri pada website
Gambar 4.13 Tampilan galeri pada website
11. Tampilan menu kontak kami website
Gambar 4.14 Tampilan kontak kami pada website
12. Tampilan halaman website bootstrap
Gambar 4.15 Tampilan halaman website bootstrap

## 5. PENUTUP
5.1 Kesimpulan
1. Meningkatkan  layana  informasi  tetang  sekolah  SMP Negeri 6 Prabumulih kepada masyarakat.
2. Mepermudah  akses  informasi  bagi  siswa,guru,kepala sekolah,  dan  masyarakat  untuk  mengetahui  informasi sekolah.
3. Sistem  informasi  yang  dibuat  ini  dapat  mempermudah dalam  melakukan  proses  pengolahan  data  informasi sekolah
4. Dengan  adanya website ini  diharapkan  dapat  membantu admin dalam pengontrolan data informasi.
5.2 Saran
1. Adanya  pelatihan  untuk  admin  tentang  mengelola website ,  sehingga website Sekolah  Menengah  Pertama Negeri 6 Prabumulih ini berjalan dengan baik.
2. Sebaiknya  Sekolah  Menengah  Pertama  Negeri  6 Prabumulih menggunakan website ini, sehingga mempermudah  untuk  masyarakat  mengetahui  bagaimana informasi yang ada di Sekolah Menengah Pertama Negeri 6 Prabumulih.
3. Website  ini  masih  memerlukan  pemeliharaan  dan analisisi  terus  menerus  untuk  mengetahui  kekurangan- kekurangan  yang  mungkin  tidak  terpikirkan  oleh  penulis disaat proses pembuatannya dan perlunya
pengembangkan  sistem  agar  website  ini  lebih  baik  lagi dan  bisa  mengikuti  sesuai  perkembangan  zaman  dan kemajuan teknologi.

## DAFTAR PUSTAKA
[1]    Abdulloh,  Rohi;  2016.  “ Web  Programing  is  Easy  & Simple”, Jakarta: PT Elex Media Komputindo.
[2]. Jogiyanto, 2010. “Analisa dan desain  sistem  informasi”, edisi IV.Yogjakarta: Andi Offset.
[3]  Nugroho,Bunafit; 2012. “Dasar pemrograman web PHP- MySQL dengan Dreamweaver ”,  Yograkarta:  Gava media
[4]  Raharjo,  Budi;  2011.  “Belajar  Otodidak  Pemrograman web dengan PHP + ORACLE ” , Bandung: Informatika.
[5] Rozi A. Zaenal & Comunity Smit Dev, 2015. “ Bootstrap Design  Framework ”,  Jakarta:  PT  Elex  Media Komputindo.
[6]  Sadeli, Muhammad, 2014. “Aplikasi Bisnis dengan PHP &  MySQL menggunakan Adobe  Dreamweaver CS  6”, Palembang: Maxikom.
[7]  Sadeli,  Muhammad,  2011.  “Dreamweaver  CS5  untuk orang awam”,  Palembang: Maxikom.
[8]  Usep  Teisnajaya,  2015.  “Rancang  Bangun  Aplikasi Penjualan  Dan  Pemasaran  Barang  Pada  Cabang Pemasaran  Perseroan  Terbatas  (PT)  Halim  Jaya  Sakti Palembang”, Jurnal Informatika, Vol 1 januari- juni 201