## pISSN: 2442-3386  eISSN: 2442-4293

## Vol 8 No 1 Jan – Jun  2022, 67 - 76

## RANCANG BANGUN WEB PROFIL SEKOLAH SEBAGAI MEDIA PROMOSI SMP
KARTIKA IV-10 SURABAYA
1 Robi Dwi Darmawan, 2 Tauhid Nur Irawan, 3 Shofiya Syidada *
1,2,3 Program Studi Informatika, Fakultas Teknik, Universitas Wijaya Kusuma Surabaya
1 robidwidarmawan27@gmail.com, 2 tauhid.irwn@gmail.com, 3 shofiya@uwks.ac.id

## Abstrak
Di era disrupsi digital saat ini, telah banyak Lembaga yang memanfaatkan sistem informasi untuk mencapai tujuan tertentu. Misalnya Lembaga Pendidikan atau sekolah, menggunakan sistem informasi untuk media promosi sekolah, mengenalkan profil sekolah kepada masyarakat, membantu mendokumentasikn kegiatan administrasi, dan fasilitas yang dimiliki oleh sekolah. Khususnya SMP Kartika VI-10 yang berlokasi di Jl. Brawijaya No.38, Sawunggaling, Kec.  Wonokromo,  Kota  Surabaya  memerlukan  sistem  informasi  sebagai  solusi  dan  media  untuk  mengenalkan sekolah  berupa  informasi  profil  sekolah  dan  juga  sebagai  perantara  bagi  siswa  maupun  orang  tua  siswa  untuk mengetahui informasi pengumuman, agenda atau informasi sekolah lainnya. Oleh karena itu, pada penelitian ini dilakukan  perancangan dan pembuatan website profil sekolah yang dapat menyajikan informasi mengenai profil sekolah  dan  informasi  lainnya  seperti  pengumuman,  agenda,  dan  berita.  Metode  pengembangan  sistem  ini menggunakan pendekatan SDLC ( System Development Life Cycle ) atau siklus hidup pengembangan sistem. Metode ini meliputi 5(lima) tahapan yaitu identifikasi masalah, analisa kebutuhan, desain (perancangan), implementasi dan pengujian.  Identifikasi  masalah  dilakukan  dengan  observasi  dan  wawancara  dengan  pihak  sekolah.  Analisa kebutuhan untuk mencari kebutuhan fungsional dan non-fungsional, desain atau perancangan sistem yaitu model sistem,  model  basis  data  dan  desain  UI  ( User  Interface ).  Pengkodean  tampilan  website  dilakukan  dengan menggunakan  HTML,  sedangkan  Bahasa  pemrogram  PHP  digunakan  untuk  menghubungkan  halaman  website dengan database yang menggunakan MySQL. Metode blackbox digunakan untuk menguji Sistem informasi web profil  sekolah.  Hasil  yang  diperoleh  adalah  sebuah  web  profil  sekolah  SMP  Kartika  4-10  Surabaya  yang  dapat menampilkan informasi tentang profil sekolah, pengumuman, agenda serta informasi pendaftaran siswa baru. Kata Kunci : Sekolah, media promosi, Website Profil, Sistem Informasi, SDLC

## Abstract
Information  systems  are  widely  used  in  an  institution.  For  example  in  a  company,  office  and  education.  In educational  institutions  this  information  system  aims  to  promote  or  provide  an  overview  of  the  profile  of  the relevant educational institution, administration, and other facilities. This website is the solution needed by SMP Kartika  VI-10  which  is  located  on  Jl.  Brawijaya  No.38,  Sawunggaling,  Kec.  Wonokromo,  Surabaya  City  as  a medium to introduce schools in the form of school profile  information and also as an intermediary for students and parents to find out information on announcements, agendas or other school information. This study conducted to design and build a profile website that can apply information about school profiles and other information such as announcements, agendas, and news. The system is built using a system development life cycle approach where there  are  5  stages,  namely  problem  identification,  requirements  analysis,  design,  implementation  and  testing. Problem identification was carried out to collect data from observations and interviews. Requirements analysis was to find functional and non-functional requirements. System design, namely  system models, database models and UI designs. The implementation is done by using HTML, PHP and MySQL. The blackbox method is used to test the system. The results obtained from this study is a web profile for SMP Kartika 4-10 Surabaya which can display information about school profiles, announcements, agendas and information for new student registration. Keyword: School, promotion, web profile, information system, SDLC

## I. PENDAHULUAN
Di masa online ini, memiliki situs website professional merupakan  sebuah  keharusan  bagi  sebuah  institusi khususnya institusi pendidikan seperti sekolah. Website resmi  sekolah  dapat  dijadikan  sebagai  media  promosi untuk mengenalkan sekolah kepada masyarakat luas.
Website  merupakan  media  komunikasi  yang  sangat fleksibel karena dapat menampung berbagai data teks, gambar,  video,  suara  dan  animasi  [1].  Selain  itu,
website  terhubung  melalui  internet  dan  memiliki jangkauan yang sangat luas, tidak terhalang oleh jarak dan waktu atau borderless [2] [3] [4]. Website dinamis merupakan bentuk implementasi dari bahasa pemograman  web  ( web  programming )  yang  dapat disesuaikan dengan kebutuhan pemilik website [5].
Saat  ini  penggunaan  website  sudah  sangat  popular. Sistem informasi berbasis website dinamis telah banyak dimanfaatkan oleh sekolah untuk mengenalkan sekolah mereka  dan  juga  sebagai  media  belajar  secara online .

## Melek IT
Akan tetapi banyak sekolah-sekolah di Indonesia yang belum  memanfaatkan  website  untuk  sebagai  media profil sekolah, salah satunya di SMP Kartika VI – 10.
Hingga saat ini SMP Kartika VI – 10 belum mempunyai website sebagai media profil dan penyebaran informasi mengenai  sekolah.  Hal  tersebut  membuat  masyarakat termasuk  murid  dan  orang  tua  murid  kesulitan  untuk mengetahui  informasi  sekolah  seperti  berita  sekolah, agenda yang akan dilaksanakan sekolah, pengumuman dari  sekolah,  lokasi  sekolah  dan  lain-lain  termasuk profil lengkap SMP Kartika VI – 10 itu sendiri.
Melihat  pemasalahan  tersebut,  maka  diperlukan pembuatan  website  profil  yang  berisi  informasi mengenai profil SMP Kartika VI – 10 seperti visi misi sekolah,  lokasi,  berita,  agenda,  pengumuman,  video pembelajaran,  data  guru,  data  prestasi  siswa,  data infrastruktur  dan  lain-lain.  Website  profil  ini  bisa diakses secara daring oleh masyarakat dan terdapat juga halaman  admin  untuk  staf  sekolah  yang  berguna memasukkan  segala  informasi  atau  data  -  data  yang perlu  ditampilkan  ke  website.  Dengan  penerapan website  profil  pada  SMP  Kartika  VI  –  10  ini  dapat memudahkan masyarakat dalam menperoleh informasi yang terpercaya mengenai sekolah dan mempermudah pihak sekolah dalam memperkenalkan dan menyebarkan informasi mengenai sekolah.

## II. METODE PENELITIAN
Website profil  pada  SMP  Kartika  IV-10  Surabaya dibangun  dengan  menggunakan  metode waterfall . Penggunaan  metode  ini  sangat  sesuai  untuk mengembangankan sistem secara bertahap dengan alur yang jelas dan terjadwal dengan baik [6]. Metode  ini terbagi  dalam  beberapa  tahapan  yaitu  identifikasi masalah, analisa kebutuhan, perancangan, implementasi dan uji coba . Adapun  tahap-tahap yang dilakukan  pada  rancang  bangun  sistem  ini  disajikan oleh Gambar 1.

## 2.1. Identifikasi Masalah
Tahap  awal  yang  dilakukan  adalah  mengidentifikasi permasalahan yang dihadapi. Identifikasi ini merupakan  kegiatan  untuk  mengumpulkan  data  dan informasi tentang permasalahan yang menjadi landasan utama kenapa  sistem  informasi web  profil  sekolah  ini dibuat.  Langkah-langkah  yang  dilakukan  untuk mengetahui  permasalahan  tersebut  adalah  dengan mengumpulkan  data  primer  melaui  observasi  dan wawancara serta mengumpulkan data sekunder dengan melakukan studi literatur dari berbagai sumber.
Adapun  permasalahan  yang  dapat  diidentifikasi  pada tahap  ini  adalah  SMP  Kartika  IV-10  kesulitan  dalam menyebarkan informasi seputar sekolah serta sekolah belum  memiliki website yang  digunakan  sebagai media  pengenalan  profil  sekolah  dan  menampilkan informasi  seputar  sekolah  seperti  pengumuman, file laporan dan lain-lain.

## Gambar 1. Metode penelitian

## 2.2. Analisa Kebutuhan
Setelah melakukan tahap identifikasi masalah, langkah selanjutnya  ialah  melakukan  identifikasi  terhadap kebutuhan  sistem  ( system  requirement )  yang  akan dibuat. Menurut Simarmata (2010), analisis kebutuhan atau analisa kebutuhan sistem merupakan proses untuk mendapatkan  informasi  tentang  model  dan  spesifikasi sistem  informasi  web  profil  sesuai  dengan  keinginan dari  pengguna  yaitu  pihak  sekolah  [7].  Analisa kebutuhan  sistem  dibagi  menjadi  dua,  kebutuhan fungsional dan kebutuhan non fungsional .

## 1. Kebutuhan Fungsional
Kebutuhan fungsional sistem merupakan proses-proses atau fitur atau layanan yang disediakan oleh sistem [7]. Kebutuhan fungsional ini juga mencakup respon sistem pada  kondisi  tertentu  dan  terhadap  masukan  dari pengguna.  Berikut  ini  adalah  analisis  kebutuhan fungsional dari  sistem  informasi  web  profil  SMP Kartika IV-10 Surabaya yang akan dibuat:
1) User
a) Dapat mengakses website sekolah
b) Dapat melihat informasi seputar sekolah
2) Admin atau Pengurus
a) Dapat melakukan login
b) Dapat mengelola data informasi sekolah
c) Dapat mengirim informasi seputar sekolah
d) Dapat logout
2. Kebutuhan Non Fungsional
Batasan-batasan fitur atau layanan yang bisa diberikan oleh  sistem  merupakan  definisi  dari  kebutuhan  non- fungsional [7]. Kebutuhan fungsional sistem web profil sekolah  meliputi usability , portability , reliability , supportability . Sistem web profil sekolah berbasis web sehingga mudah diakses dengan menggunakan browser baik  dari  PC/laptop  maupun  dari  perangkat mobile . Selain  itu  sistem  terkoneksi  dengan  internet  sehingga bisa  diakses  kapan  saja  dan  dari  mana  saja.  Untuk keperluan perubahan konten informasi yang ditampilkan  pada  website  hanya  bisa  dilakukan  oleh admin dengan cara login terlebih dahulu.

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 8 No 1 Jan – Jun  2022, 69 - 76
Selain  itu,  kebutuhan  fungsional  ini  juga  mencakup tentang apa saja yang dibutuhkan oleh pengguna untuk menjalankan  sistem  diantaranya hardware dan software yang  digunakan  [8].  Berikut  hasil  analisis kebutuhan non fungsional pada website profil  sekolah yang akan dikembangkan : 1) Hardware a) Server
Laptop  atau personal  computer (PC)  dengan spesifikasi Prosesor Intel® Core™ i3-7020U CPU @  2.30GHz  2.30  GHz,  Memori  RAM  2,00  GB, Tipe  Sistem  32-bit, Harddisk 500  GB, Monitor , Keyboard , Mouse dan Modem atau WiFi dengan kecepatan internet 1 Mbps.
b) Client
Laptop  atau personal  computer (PC)  dengan spesifikasi Prosesor Intel® Core™ i3-7020U CPU @  2.30GHz  2.30  GHz,  Memori  RAM  2,00  GB,
Tipe  Sistem  32-bit, Harddisk 500  GB, Monitor , Keyboard , Mouse ,  perangkat  telepon  genggam atau smartphone dengan  ukuran  resolusi  layar minimal  320X480  atau  HVGA  (Half  VGA)  dan perangkat untuk akses internet Modem, WiFi atau data seluler dengan kecepatan internet 1 Mbps.
2) Software
a) Server
Paket hosting , domain dan  alamat  situs website sistem,  Microsoft  Windows  7,  Perangkat  lunak untuk mengakses website atau peramban (Google Chrome, Mozila Fire-fox, Opera dan lain-lain). b) Client
Microsoft  Windows  7,  Perangkat  lunak  untuk mengakses  website  atau  peramban  (Google Chrome,  Mozila  Fire-fox,  Opera  dan  lain-lain). Sistem  operasi  Windows  Phone,  Symbian  OS, Android,  IOS,  Blackberry  OS  dan  peramban (Google Chrome, Mozila Fire-fox, Opera, Safari, UC Browser dan lain-lain).

## 2.3. Desain Sistem
Tahap  perancangan  ini  meliputi  perancangan  sistem, database  serta  tampilan antarmuka atau user  interface (UI).  Rancangan  atau  desain  yang  baik  akan menentukan kualitas dari website yang dibuat [9].
Tahap desain sistem adalah menterjemahkan kebutuhan sistem atau system requirement ke rancangan logis dari sistem. Perancangan ini bertujuan untuk menyelaraskan kebutuhan pengguna dengan implementasi yang dibuat oleh pengembang sistem.
Desain website profil ini dibuat dengan menggunakan software Microsoft Visio 2016, Microsoft Word 2016 dan  Corel  Draw  X8.  Pada  tahap  desain  sistem  ini mencangkup beberapa aspek, yaitu :
a. Pembuatan  model  sistem  atau  alir  data  sistem dengan  menggunakan  bagan  alir  data  atau Use Case Diagram Dan Activity Diagram.
b. Pembuatan  model  atau  desain  tampilan user interface (UI) sistem.
1) Rancangan Sistem
a. Use Case Diagram
Gambar 2. Use Case Diagram Sistem web Profil Sekolah
Use  Case  Diagram merupakan  diagram  yang menggambarkan  tentang  apa  yang  bisa  dilakukan sistem dari sudut pandang pengguna. Usecase diagram sistem  informasi  web  profil  sekolah  ini  ditunjukkan oleh Gambar 2. Pada diagram usecase terdapat 2 actor yaitu Admin dan User .  Di  bagian actor admin dapat login dan logout ,  mengelola  data  dan  data  diri,  data home ,  data  tentang,  daftar  PPDB,  data  pengumuman, data  tenaga  pengajar.  Kemudian actor  user dapat melihat home ,  melihat  tentang,  melihat  daftar  PPDB, melihat pengumuman, melihat tenaga pengajar.
b. Activity Diagram
Activity diagram login admin disajikan oleh Gambar 3. Saat  admin  login ke  sistem perlu  mengakses  halaman dashboard sekolah terlebih dahulu, selanjutnya sistem akan menampilkan halaman login yang mengharuskan admin untuk  memasukkan  data akun ke dalam  kolom username  dan  pasword,  ketika  admin  telah  mengisi kolom username dan  pasword  sistem  akan  mengecek apakah  ada  keasalah  atau  tidak,  jika  terjadi  kesalahan atau  ketidak  cocokan  username  dan  pasword  akan muncul  notifikasi  kesalahan,  dan  apabila  tidak  sistem akan  langsung  mengarahkan  ke  halaman  dasbord website.

## Melek IT
Gambar 3. Activity Diagram Login Admin
Gambar 4. Activity Diagram Input Data Pengumuman
Untuk  input  data  pengumuman,  diagram  aktivitasnya ditunjukkan oleh Gambar 4, admin perlu memilih menu pengumuman,  kemudian  pilih  tombol  tambah  data  di laman  menu  tersebut,  saat  sistem  menampilkan halaman  inputan,  admin  memilih  data  pengumuman yang  akan  ditambahkan  kemudian  menekan  tombol simpan.  Sistem  akan  memproses  perubahan  data kemudian menyimpan data inputan kedalam database.
Diagram  aktivitas  input  data  home  disajikan  oleh Gambar 5. Untuk input data home admin perlu memilih menu  home  kemudian  pilih  tombol  tambah  data  di laman  menu  tersebut.  Sistem  akan  menampilkan halaman  masukan  bagi  admin.  Admin  memilih  data home  yang  akan  ditambahkan  selanjutnya  dapat menyimpan perubahan tersebut. Sistem akan memproses  perubahan  tersebut  kemudian  menyimpan data inputan kedalam database.
Untuk input data Tenaga Pengajar admin perlu memilih menu  home  kemudian  pilih  tombol  tambah  data  di laman  menu  tersebut,  saat  sistem  menampilkan halaman inputan admin memilih data Tenaga Pengajar yang  akan  ditambahkan  kemudian  dapat  memyimpan perubahan tersebut, sistem akan memproses kemudian
menyimpan data  inputan ke dalam database.  Diagram aktivitas  dari  input  tenaga  pengajar  ditunjukkan  oleh Gambar 6.
Gambar 5. Activity Diagram Input Data Home
Gambar 6. Activity Diagram Input Data Tenaga Pengajar
Gambar 7. Activity Diagram Input Data Kontak
Untuk bagian input data kontak, admin perlu memilih menu  kontak  kemudian  pilih  tombol  tambah  data  di laman  menu  tersebut,  saat  sistem  menampilkan

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 8 No 1 Jan – Jun  2022, 71 - 76
halaman  inputan,  admin  dapat  memilih  data  kontak yang  akan  di  tambahkan  kemudian  dapat  menyimpan perubahan tersebut, sistem akan memproses kemudian menyimpan  data  inputan  kedalam  database.  Diagram aktivitasnya disajikan pada Gambar 7.
Gambar 8. Activity Diagram Input Data Tentang
Diagram  aktivitas  pada  Gambar  8  menunjukkan aktivitas untuk input data tentang pada website. Untuk input data tentang admin perlu memilih menu tentang, kemudian  pilih  tombol  tambah  data  di  laman  menu tersebut,  saat  sistem  menampilkan  halaman  inputan, admin  dapat  memilih  data  tentang  yang  akan  di tambahkan  kemudian  dapat  menyimpan  perubahan tersebut, sistem akan memproses kemudian menyimpan data inputan ke dalam database.
Gambar 9. Activity Diagram Input Data Visi Misi
Gambar  9.  merupakan  diagram  aktivitas  untuk  input data visi misi sekolah. Untuk input data visi misi admin perlu  memilih  menu visi misi, kemudian pilih tombol tambah  data  di  laman  menu  tersebut,  saat  sistem menampilkan halaman inputan, admin dapat membuat
teks visi misi kemudian jika selelsai dapat memyimpan perubahan tersebut, sistem akan memproses kemudian menyimpan data inputan kedalam database
2) Rancangan User Interface
a. Halaman Login
Gambar 10. Halaman Login
Desain  halaman login pada  Gambar  10.  dibuat dengan sederhana yaitu terdapat textbox username or email address, textbox password, button login.
b. Halaman Utama

## Gambar 11. Halaman Utama
Pada  desain  halaman  utama  ditunjukkan  oleh Gambar  11.  terdapat  gambar  logo,  menu,  dan konten.
c. Halaman Daftar Guru

## Gambar 12. Halaman Daftar Guru
Pada  desain  halaman  daftar  guru,  seperti  pada Gambar  12.  terdapat  gambar  logo,  menu,  dan Daftar nama-nama guru beserta foto.
d. Halaman Kontak

## Melek IT
Information Technology Journal. Vol 8 No 1 Jan - Jun 2022, 72 - 76

## Gambar 13. Halaman Kontak
Gambar  13.  menunjukkan  desain  halaman  kontak yang terdapat beberapa sosial media SMP Kartika IV-10  Surabaya,  yaitu  Instagram,  Facebook, beserta Whatsapp.
e. Halaman Visi Misi
Gambar 14. Halaman Visi Misi
Pada  Gambar  14.  menunjukkan  desain  tampilan halaman  Visi  Misi  sekolah.  Halaman  ini  akan menampilkan  informasi  tentang  Visi  &  Misi sekolah SMP Kartika IV-10 Surabaya.
f. Halaman Daftar PPDB

## Gambar 15. Halaman Daftar PPDB
Pada Desain Halaman PPDB, seperti pada Gambar 15, menyajikan informasi seputar cara pendaftaran siswa baru. Siswa dapat mendaftarkan diri melalui halaman ini.
g. Halaman Pengumuman Gambar 16 merupakan desain halaman pengumuman.  Pada  desain  pengumuman,  siswa dapat  melihat  berbagai  macam  pengumuman  di halaman pengumuman. Seperti pendaftaran peserta
didik  baru  di  tutup  dan  pendaftaran  peserta  didik baru di buka.
h. Halaman Tentang Pada  desain  halaman  tentang  terdapat  pengenalan lingkungan  sekolah,  prestasi  siswa,  Fasilitas, Kegiatan  Ekstrakulikuler,  dan  Kegiatan  sekolah. Desain halaman tentang ditunjukkan oleh Gambar 17.
Gambar 16. Halaman Pengumuman
Gambar 17. Halaman Tentang

## III. HASIL DAN PEMBAHASAN
Dalam mengembangkan sistem berbasis web diperlukan web server, yang bertugas untuk mengatur semua komunikasi antara browser dengan server [10]. Implementasi  web  profil  sekolah  SMP  Kartika  IV-10 Surabaya ini menggunakan beberapa tools pengembangan website. Tools untuk mengembangkan website ini antara lain adalah HTML, CSS, Javascript, PHP, My SQL, framework CodeIgniter,
Fungsi  HTML  adalah  untuk  membuat  halaman  web yang bisa dilihat oleh pengguna. HTML ini merupkan script yang  digunakan  untuk  menampilkan  informasi pada browser [11]. Penggunaan CSS ( Cascading Style Sheet )  dalam  pembuatan  website  adalah  untuk mempermudah dalam mengatur keseragaman elemen- elemen  pada  halaman  website  meliputi  warna,  font, ukuran  font,  dan  lain-lain  [12].  Javascript  digunakan untuk membantu membuat tampilan halaman web lebih dinamis [13] [14].
PHP ( Perl Hypertext Preprocessor ) merupakan bahasa pemrograman yang dapat disisipkan ke dalam HTML. PHP dapat berjalan di berbagai Web Server [15]. PHP digunakan  untuk  membangun  sebuah  website  yang dinamis. Kode PHP dari client dikirim ke server untuk

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 8 No 1 Jan – Jun  2022, 73 - 76
diterjemahkan  ke  dalam  tag  HTML  yang  selanjutnya untuk  ditampilkan  pada  halaman  website  melalui browser  [16].  Sedangkan  MySQL  digunakan  untuk menyimpan database dari wesite profil sekolah.
Codeigniter  adalah  salah  satu framework PHP  yang bersifat open  source .  Salah  satu  kelebihan framework ini  menggunakan  metode  MVC  ( Model,  View, Controller ).  Yang  dimaksud  dengan model adalah bagian  yang  berhubungan  dengan  pengolahan  atau manipulasi  database.  Sedangkan view merupakan bagian  yang  menangani  halaman user  interface . Controller ini berfungsi sebagai penghubung view dan model  [17]. Framework Codeigniter  berfungsi  untuk memudahkan developer atau programmer membangun aplikasi berbasis web.

## 4.1. Hasil Implementasi Sistem
1) Halaman Beranda

## Gambar 18. Halaman Beranda
Halaman  beranda  merupakan  halaman  pertama  yang dilihat  oleh user saat  mengakses web ,  seperti  pada gambar  18.  Halaman  ini  dibangun  dengn  Javascript Halaman  ini  berisi  informasi  sepertin  poster  depan, navigasi,  cuplikan  berita,  cuplikan  pengumuman  dan cuplikan agenda.

## 2) Halaman Sambutan

## Gambar 19. Halaman Sambutan
Halaman sambutan merupakan halaman yang memuat  informasi  sambutan  dari  kepala  sekolah beserta  foto  kepala  sekolah.  Tampilan  halaman  ini seperti Gambar 19.
3) Halaman Visi & Misi

## Gambar 20. Halaman Visi & Misi
Gambar  20  menampilkan  halaman  visi  misi  sekolah. Halaman ini berisi informasi tentang visi dan misi yang diusung oleh sekolah.

## 4) Halaman Daftar Guru

## Gambar 21. Daftar Guru
Halaman  daftar  guru,  Gambar  21,  berisi  informasi mengenai guru-guru yang mengajar di sekolah beserta staf  tata  usaha  dan  tenaga  keamanan  serta  tenaga kebersihan.  Data  yang  ditampilkan  sesuai  dengan jumlah data yang tersimpan

## 5) Halaman Kontak

## Gambar 22. Halaman Kontak
Halaman kontak berisi informasi mengenai Instagram sekolah, facebook sekolah, dan nomor WhatsApp yang dapat  dihubungi.  Tampilan  halaman  kontak  dapat dilihat pada Gambar 22.
6) Halaman Daftar PPDB

## Melek IT
Information Technology Journal. Vol 8 No 1 Jan - Jun 2022, 74 - 76

## Gambar 22. Halaman Daftar PPDB
Gambar  22  merupakan  tampilah  halaman  informasi tentang  PPDB  sekolah.  Halaman  Daftar  PPDB  berisi informasi  atau  persyaratan  –  persyaratan  berupa Foto/Scan  Asli  Akta  Kelahiran  Calon  Siswa  Baru, Foto/scan  Asli  Kartu  Keluarga  (KK),  Foto/Scan  Asli Kartu Program Sosial (KPS)/Kartu Keluarga Harapan (PKH)  bila  memiliki,  Foto/Scan  Asli  Kartu  Program Indonesia Pintar (PIP) bila memiliki

## 7) Halaman Pengumuman

## Gambar 23. Halaman Pengumuman
Pada Halaman Pengumuman ditunjukkan oleh Gambar 23, berisi informasi seputar pengumuman- pengumuman sekolah seperti tentang tanggal pendaftaran  peserta  didik  baru  dibuka  dan  tanggal pendaftaran peserta didik baru ditutup.

## 8) Halaman Login Admin

## Gambar 24. Halaman Login Admin
Untuk  melakukan  perubahan  isi  website  dapat dilakukan  oleh  admin.  Halaman  login  admin ditunjukkan  oleh  Gambar  24.  Pada  Halaman  Login Admin User Harus Memasukkan Username atau Email dan Password agar bisa mengakses halaman web.

## 4.2. Pengujian Sistem
Pengujian  sistem  informasi  web  profil  sekolah  ini menggunakan  metode blackbox yaitu  pengujian  dari
sisi  fungsionalitas.  Uji  cob  aini  akan  melihat  apakah sistem  berjalan  sesuai  dengan  apa  yang  diinginkan. Pengujian  menggunakan  metode blackbox dikatakan berhasil, jika fitur-fitur yang ada pada sistem informasi web  profil  ini  telah  sesuai  dengan  kebutuhan fungsional.  Pengujian  ini  meliputi  login,  menambah data, mengedit data dan menghapus data. Hasil dari uji coba sistem ditunjukkan oleh Tabel 1.
Tabel 1. Pengujian Black Box
No Skenario Pengujian Hasil Yang DIharapkan Kesimpulan 1 Memasukkan data username dan password yang sesuai saat
login Login sukses dan masuk ke halaman admin Valid 2 Memasukkan data username dan password yang salah saat login Login gagal dengan muncul keterangan
“ Username Atau
Password Salah”
Valid 3 Login dengan kondisi kolom username dan
password kosong Login gagal dengan muncul keterangan
“ Username Atau Password Salah”
Valid 4 Menambahkan data baru pada halaman data Tentang, data Daftar PPDB,
data Pengumuman, data Tenaga Pengajar.
Berhasil menambahkan data Valid

## IV. KESIMPULAN
Berdasarkan  dari  hasil  uji  coba  yang  telah  dilakukan pada penelitian merancang dan membuat website profil sekolah  SMP  Kartika  IV-10  Surabaya,  maka  dapat disimpulkan  bahwa  (1)  Website  profil  sekolah  telah berhasil dibuat dan dapat menampilkan informasi yang sesuai  dengan  rancangan  sistem  pada  Gambar  2.  (2) Website berkerja dengan baik dan dapat menampilkan data  atau  informasi  yang  diiputkan  melalui  halaman admin, admin dapat melakukan login, menambah data, memperbaharui data dan menghapus data.
Untuk  pengembangan  lebih  lanjut  dari  web  profil sekolah  ini  dapat  dilakukan  dengan  menambah informasi  yang  ditampilkan  ke  dalam  website  seperti kegitan  sekolah.  Penambahan  sistem e-learning akan meningkatkan  fungsionalitas  dari  website  sekolah sehingga  juga  dapat  digunakan  sebagai  media pembelajaran  online.  Selain  itu,  untuk  menarik pengunjung supaya lebih lama dalam berselancar pada website  sekolah  ini  dimungkinkan  untuk  menambah beberapa fitur seperti ruang diskusi atau game edukasi.

## pISSN: 2442-3386  eISSN: 2442-4293
Vol 8 No 1 Jan – Jun  2022, 75 - 76

## V. DAFTAR PUSTAKA
[1]   Waryanto, “Pengertian Website Lengkap dengan Jenis dan Manfaatnya,” 22 Januari 2018. [Online]. Available: https://www.niagahoster.co.id/blog/pengertian- website/.
[2]   J. Asmara, “Rancang Bangun Sistem Informasi Desa Berbasis Website (Studi Kasus Desa Netpala),” Jurnal Pendidikan Teknologi Informasi (JUKANTI), p. 3, 2019.
[3]   W. J. d. S. Lestari, “Sistem Informasi UKM Berbasis Website Pada Desa Sumber Jaya,”
Jurnal Pengabdian Kepada Masyarakat, p. 4, 2015.
[4]   F. N. Adzan Abdul Zabar, “Keamanan Http Dan Https Berbasis Web Menggunakan Sistem Operasi Kali Linux,” Jurnal Ilmiah Komputer dan Informatika , pp. 69-74, 2015.
[5]   Niko, “Pintar Komputer,” 2015. [Online]. Available: http://www.pintarkomputer.com/ pengertian-web-statis-dan-web-dinamis-beserta- perbedaannya/#:~:text=Web%20Statis%20adalah %20website%20dimana,update%20melalui%20 aplikasi%20website%20tersebut..
[6]   Guntoro, “Metode Waterfall : Pengertian , Tahapan, Contoh, Kelebihan dan Kekurangan,” 13 Juli 2020. [Online]. Available: https://badoystudio.com/metode-waterfall/.
[7]   R. I. B. E. R. S. Mia Melinda, “Rancang Bangun Sistem Informasi Publik Berbasis Web (Studi Kasus : Desa Durian Kecamatan Padang Cermin Kabupaten Pesawaran),” Jurnal Tekno Kompak, pp. 1-4, 2018.
[8]   U. Yoki Firmansyah, “Penerapan Metode SDLC Waterfall Dalam Pembuatan Sistem Informasi Akademik Berbasis Web Studi Kasus Pondok Pesantren Al-Habi Sholeh Kabupaten Kubu Raya, Kalimantan Barat,” Jurnal Teknologi & Manajemen Informatika, pp. 181-191, 2018.
[9]   D. Linda, “Merancang e-katalog Berbasis Website Sebagai Media Informasi pada Badan Perpustakaan Arsip dan Dokumentasi Daerah (BPAD) Lampung,” Jurnal Sistem informasi dan telematika, p. 3, 2016.
[10]  M. S. N. K. M. Lilyani Asri Utami, “Sistem informasi Penjualan Kerajinan Tempurung Kelapa Berbasis Web pada Butik "Wood & Coconut",” Jurnal & Penelitian Teknik Informatika Volume 2 Nomor 2, pp. 98-104, 2018.
[11]  A. Nawadwipa, “Pengertian Dan Fungsi HTML (Hypertext Markup Language),” 19 Agustus 2020. [Online]. Available: https://www.nawadwipa.co.id/pengertian-dan- fungsi-html-hypertext-markup-language/.
[12]  B. R. S. Frederick Constantianus, “Analisa dan Desain Sistem Bimbingan Tugas Akhir Berbasis Web dengan Studi Kasus Fakultas Teknologi Informasi,” Jurnal Informatika, pp. 93-106,
2005.
[13]  S. Bhirawa Anoraga Nandari, “Pembuatan Website Portal Berita,” Indonesian Journal on Networking and Security, pp. 1-14, 2018.
[14]  W. Y. Dio Lavariano, “Rancang Bangun E- Voting Berbasis Website Di Universitas Negeri Surabaya,” Jurnal Manajemen Informatika, pp. 4-13, 2016.
[15]  A. K. Efy Widyawati, “Rancang Bangun Aplikasi Kependudukan Berbasis Web Di Desa Kedungrejo Waru-Sidoarjo,” Jurnal Manajemen Informatika, pp. 171-179, 2016.
[16]  H. F. W. X. N. Astria Firman, “Sistem Informasi Perpustakaan Online Berbasis Web,” Jurnal Teknik Elektro dan Komputer, pp. 29-36, 2016.
[17]  D. A. Hadi, “Malasngoding.com,” 12 Januari 2016. [Online]. Available: https://www.malasngoding.com/pengertian-dan- cara-menggunakan-codeigniter/.
[18]  B. Angga, “Analisi Dan Perancangan Basis Data Manajamen Perhotelan Dengan Metode Database Application Life Cycle (Studi Kasus : Hotel Maqdis Palembang),” p. 5, 2013.
[19]  Sigitbc, “6 Fungsi Database Secara Umum Dalam Komputer,” [Online]. Available: https://dosenit.com/kuliah-it/database/fungsi- database.
[20]  D. Puspitasari, “Sistem Informasi Perpusatakaan Sekolah Berbasis Web,” Jurnal Pilar Nusa Mandiri Vol.XII, No.2, pp. 227-240, 2016.
[21]  A. M. E. G. S. Annisa Rizki, “Sistem Informasi Persediaan Barang Pada Toko Mainan Nanda Toys Bekasi,” Teknologi Informatika &
Komputer, pp. 62-70, 2019.
[22]  M. H. Nursari, “Sistem Monitoring Pengajar Pada Kegiatan Pendidikan Dan Pelatihan ( DIKLAT ) Di Balai Pekerjaan Umum ( PU ) Bandung Jurnal Ilmiah Komputer dan
Informatika ( KOMPUTA ),” Jurnal Ilmiah Komputer dan Informatika (KOMPUTA), 2014.

## Melek IT
[23]  S. Fatimah, “Rancang Bangun Sistem Pengelolaan Data Kelurahan Tombolo Berbasis
Web,” pp. 42-43, 2018.
[24]  Ansori, “Pengertian DFD (Data Flow Diagram) : Fungsi, Simbol, dan Contohnya,” 28 Maret
2020. [Online]. Available: https://www.ansoriweb.com/2020/03/pengertian-
dfd.html.
[25]  M. Roziq, “Pengertian Data Flow Diagram (DFD), Jenis dan Bentuknya Lengkap,” 13 Juli
2020. [Online]. Available: https://caraguna.com/pengertian-dfd-dan-
jenisnya/.
[26]  A. S. M. L. A. W. Maria.W.H Barri,
“Perancangan Aplikasi Sms Gateway Untuk Pembuatan Kartu Perpustakaan Di Fakultas Teknik Unsrat,” Jurnal Teknik Elektro dan Komputer, pp. 23-28, 2015.
[27]  Y. K, “Apa Itu Web Server dan Fungsinya ?,” 24 April 2018. [Online]. Available: https://www.niagahoster.co.id/blog/web-server- adalah/.
[28]  Y. P. Sari, “Rancang Bangun Aplikasi Penjualan Dan Persediaan Di Kota Prabumulih,” Jurnal Sistem Informasi Dan Komputerisasi Akuntansi
(JSK), pp. 81-88, 2017.
[29]  H. Anindita, “Jojonomic.com,” 8 Desember 2020. [Online]. Available:
https://www.jojonomic.com/blog/bootstrap/.