LAPORAN

PEMROGRAMAN WEB LANJUT

SI-SISTEM INFORMASI

"UJIAN AKHIR SEMESTER (UAS)"

Disusun Oleh :

Nama Kelompok SEKOLAHMU

1. Alfian Yoga Permana 20.12.1566

Nama dan NIM Anggota 2. Dewangga Arya 20.12.1584
Kelompok 3. Rangga Ihya Ulumuddin 20.12.1585
4. Triwiyanto 20.12.1565

Dosen Pengampu Irma Rofni Wulandari

Nama Koordinator Asisten Wayan Alvarito

Kelas 20 SI 03

Sl - SISTEM INFORMASI
FAKULTAS ILMU KOMPUTER UNIVERSITAS
AMIKOM YOGYAKARTA
2021/2022

1
 DAFTAR ISI

DAFTAR ISI.............................................................................................................................................2

BAB I......................................................................................................................................................3

PENDAHULUAN.................................................................................................................................3

1.1 Latar Belakang...................................................................................................................3

1.2 Tujuan Perancangan..........................................................................................................3

BAB II.....................................................................................................................................................4

TINJAUAN PUSTAKA...........................................................................................................................4

2. 1 Tinjauan Pustaka.....................................................................................................................4

METODE PERANCANGAN..................................................................................................................7

3. 1 Alat dan Bahan........................................................................................................................7

3.2 Daftar Fitur / Menu / Fasilitas / Keunikan dan Value Web.......................................................7

3.3 Inovasi / Implementasi dan Potensi Web ...............................................................................8

BAB IV....................................................................................................................................................8

HASIL DAN PEMBAHASAN.................................................................................................................8

4.1 Tampilan Web Dan Penjelasan Kegunaan Fitur-Fitur.........................................................8

4.2 Daftar Anggota Kelompok Dan Job Desc..........................................................................13

4.3 Alamat Web ( Jika Sudah Di Hosting)...............................................................................13

BAB V...................................................................................................................................................14

KESIMPULAN...................................................................................................................................14

DAFTAR PUSTAKA................................................................................................................................15

2
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Di masa pandemi covid-19 masyarakat sangat terbatas untuk melakukan kegiatan dan
aktivitas apapun, begitu juga dengan para siswa-siswi Sekolah Menengah Pertama (SMP)
yang baru saja lulus dan ingin mencari Sekolah Menengah Atas (SMA) untuk
melanjutkan pendidikanya. Karena pandemi yang semakin hari semakin memburuk para
siswa-siswi ini sangat sulit untuk mendapatkan informasi secara langsung untuk
mendaftar ke SMA favoritnya, tak sedikit pula siswa-siswi yang masih bingung bahkan
tidak tahu sama sekali tentang informasi SMA yang akan jadi pelabuhan selanjutnya
untuk melanjutkan pendidikannya. Di zaman yang serba online ini banyak sekali siswa
yang mengeluh kesulitan untuk mendapatkan informasi SMA-SMA favorit khususnya di
Yogyakarta. Nah, disini kami menawarkan solusi untuk para siswa yang masih bingung
dan bahkan tidak tahu informasi ini. Kami mebuat website yang bernama
SEKOLAHMU! dengan website ini kami memudahkan para siswa-siswi untuk
mendapatkan informasi lengkap SMA-SMA favorit yang ada di Yogyakarta. Dengan
mengakses website ini siwa dapat dengan mudah melihat profil, visi & misi SMA-SMA
favorit di Yogyakarta, terlebih website yang kami buat ini gratis dan tidak dipungut biaya
apapun.

1.2 Tujuan Perancangan

Tujuan perancangan web ini adalah untuk memudahkan para siswa/siswi dalam
mendaftar sekolah dengan hanya dirumah dan tidak perlu untuk keluar rumah. Selain
itu, kami membuat web ini untuk memudahkan para siswa untuk menemukan sekolah
yang diinginkan dengan banyak pilihan sekolah yang sudah kami highlight profil, visi dan
misinya.

3
 BAB II
TINJAUAN PUSTAKA

2. 1 Tinjauan Pustaka

Ide Website dalam kelompok kami diambil dari website Sekolah Pintar , lalu kami
ubah sedikit dengan merubah warna , isi, navbar dsb agar website lebih menarik dan lebih
dipercaya oleh pengunjung website, website kami juga menambahkan fitur login agar
memudahkan pengguna agar mendapatkan referensi sekolah yang lebih baik.

4
 Ide login kami aplikasikan karena kami melihat di website Cari Sekolah | Edumor , karena
dengan fitur login ini kami bisa lebih dekat kepada pengguna, sehingga pengguna akan
mendapatkan benefit yang lebih dari website kami.

5
 Website minimalis dan flat kami mendapat inspirasi dari website Sekolahpedia. Website
minimalis terbukti mendapat lebih banyak pengunjung , dikarenakan tampilan yang lebih sederhana
dan memudahkan pengunjung website dalam berseluncur di website kami walaupun koneksi
internet sedang tidak baik.

6
 BAB III
METODE PERANCANGAN

3. 1 Alat dan Bahan

Alat dan bahan yang kami gunakan adalah sebagai berikut :
1. PC Dekstop
2. Windows
3. Sublime Text/Visual Code Studio
4. XAMPP
5. Code Igniter
6. Bootsrap
7. Google Chrome & Web Browser lain

3.2 Daftar Fitur / Menu / Fasilitas/ Keunikan dan Value yang ada di web
Di website yang kami buat ini tidak banyak fitur-fitur dapat dijumpai karena website ini
sangat sederhana dan simple. Berikut beberapa fitur yang kami sediakan dalam website
SEKOLAHMU! :

 Caraousel/Slideshow
Pertama, di homepage website kami mememilik fitur Caraousel atau gambar yang
dapat di slideshow. Fitur ini kami buat agar website kami terlihat interaktif.

 Login & Daftar

Kedua, di bagian navigation bar kami memliki fitur login & daftar. Fitur ini kami
buat untuk pelanggan baru dan pelanggan lama kami untuk dapat megakses
website kami sepenuhnya dan mendapatkan informasi-informasi terbaru dari
website ini.

 Responsive
Ketiga, website SEKOLAHMU! memiliki fitur yang responsive baik untuk yang
mangakses menggunakan Smartphone, Tablet dan Laptop.

 Ramah dari covid-19

Terakhir, website kami sangat ramah dengan covid-19 karena dapat mengurangi
kemungkinan pengguna jauh dari kerumunan yang dapat menyebarkan covid-19.

 Register User Baru/ Login untuk User dan Admin

Dalam fitur login user dapat login menggunakan username dan password apabila
belum mendaftar user dapat mendaftar terlebih dahulu dengan mengisikan data-

7
 data yang telah disediakan. Dalam fitur admin, admin bisa menambah, mengedit
dan menghapus data sekolah.

Selain itu Keunikan dari website kami yaitu user dapat menggunakannya secara
mudah dan banyak menampilkan informasi rujukan SMA secara lengkap bagi siswa
maupun siswi SMP yang ingin melanjutkan ke jenjang pendidikian berikutnya yaitu
SMAatau SMK. Selain itu bagi admin dapat mudah untuk menambahkan data
sekolah yang ingin dimasukkan dengan fungsi CRUD yang kami sediakan.

3.3 Daftar Fitur / Menu / Fasilitas/ Keunikan dan Value yang ada di web

Potensi dari web kami yaitu mungkin nantinya dapat bekerjasama dengan
kemendikbud untuk memberikan fasilitas bagi siswa maupun siswi dalam segi
informasi mengenai kelanjutan jenjang sekolah dari smp untuk melanjutkan ke
jenjang berikutnya. Dan untuk inovasi web nantinya bisa ditambahkan mengenai
informasi beasiswa untuk siswa yang ingin mendaftar dan membutuhkan.

8
 BAB IV
HASIL DAN PEMBAHASAN

4.1 Tampilan Web Dan Penjelasan Kegunaan Fitur-Fitur

Diawali di halaman awal , ada Navigation Bar yang berguna agar pengunjung web
dapat memilih halaman yang ingin dikehendaki, dan juga ada logo web di sebelah kiri
navigation bar yang berguna sebagai identitas web.

Selanjutnya ada Carousel atau Slideshow content di web , berguna agar pengunjung
web tau apa saja konten-konten yang tersedia di web.

Lalu yang selanjutnya di halaman awal ada perkenalan singkat dari website ini. Yang
berguna bagi para pengunjung baru website agar tertarik terhadap website ini.

9
Untuk memunculkan ikon kecil, kami menggunakan ikon online dari font awesome
yang harus kita deklarasikan dulu di bagian <head> .

Lalu untuk memunculkan ikon, ada di bagian <i class>, kode tersebut bisa didapat di
fontawesome pada bagian ikon-ikon, setiap ikon berbeda kodenya.

Kemudian, di bagian ini kami menggunakan card text dengan class="card-img-top".

Kami menampilkan beberapa highlight dari sekolah-sekolah favorit dengan
menampilkan penjelasan sejarah singkat, apabila user atau siswa ingin melihat highlight
lengkap dari sekolah yang ingin dia tampilkan, maka siswa tinggal mengklik tombol
selengkapnya. Apabila tombol selengkapnya di klik maka akan muncul halaman baru
seperti pada gambar dibawah ini.!

10
Nah, setelah tombol selenkapnya di klik maka akan menampilkan page baru seperti
gambar di atas, dengan penjelasan lengkap terkait profil,visi dan misi sekolah tersebut.

Di bagian halaman ini kami menampilkan foto yang kami ambil dari web resmi dari
sekolah tersebut dengan width 80%. Terakhir di bagian bawah halaman kami
mencantumkan link web resmi agar user dapat mengakses langsung ke situs web resmi
dari sekolah tersebut.

Selanjutnya, di bagian bawah sebelum footer, kami membuat tombol navigasi halaman
yang aktif jika di klik. Apabila user mengklik next atau 2 maka web akan menampilkan

11
halaman selanjutnya (halaman 2), untuk kembali ke halaman sebelumnya user tinggal
menekan Previous atau 1.

Lalu dibagian bawah dari halaman awal website , ada Alert dan Footer dari website.
Alert yang berguna sebagai peringatan yang berguna kepada pengunjung website dan
alert juga bisa di Close dengan meng klik X di bagian kanan. Footer sebagai identitas
website bahwa website ini dibuat sendiri oleh kelompok kami.

Lalu lanjut ke halaman selanjutnya ada Tentang ,yang menjelaskan apa itu alasan
website ini dibuat.

Lalu jika diperhatikan , dibagian Navbar ada bayangan, itu karena dengan
mneambahkan shadow-lg di nav class nya.

12
Lalu dibawah nya ada Tim pembuat website ini, digunakan untuk memperkenalkan
siapa saja pembuat website Sekolahmu!.

Untuk dibagian hubungi kami ini silahkan mengisi kolom yang sudah disediakan
ya,dan jangan lupa untuk memberikan email yang benar dan nomer telepon yang
aktif. Jika ada masukan atau kerusakan pada web bisa tulis dikolom komentar ya.

13
 Lalu ke halaman Login, kalian bisa login atau kalian bisa mendaftarkan diri dahulu.
Jika kalian sudah login maka disetiap halaman di website utama akan berubah menjadi
Logout. Dan jika kalian logout maka akan menuju ke halaman beranda.

4.2 Daftar Anggota Kelompok Dan Job Desc

Nama NIM Jobdesc

Triwiyanto 20.12.1565 Halaman Hubungi Kami

Halaman Awal, Tentang dan

Dewangga Arya 20.12.1584
Login

Rangga Ihya U. 20.12.1585 Isi Halaman dan Konten

4.3 Alamat Web ( Jika Sudah Di Hosting)

http://kelompokaweawe.000webhostapp.com/

14
 BAB V
KESIMPULAN

Web SEKOLAHMU! yang kami buat ini merupakan web yang sangat sederhana dan masih
jauh dari kata sempurna, akan tetapi kami sudah berusaha semaksimal mungkin untuk
membuat website sederhana ini, atas izin yang Maha Kuasa dengan materi-materi yang sudah
diajarkan oleh dosen kami tercinta, Alhamdulillah website ini berhasil kami buat dan kami
hosting. Di dalam website ini terdapat banyak sekali kekurangan-kekurangan, diantaranya
fitur dari website yang masih sangat sedikit, sekolah-sekolah yang disediakan belum lengkap
dan masih banyak lagi. Untuk itu kami memohon kritik dan saran dari teman-teman untuk
menjadikan website kami makin berkembang.

15
 DAFTAR PUSTAKA
[1] akupintar,id (2021) Cari Sekolah [online]. Available : https://akupintar.id/sekolah
[2] EduMor (2021) School [online]. Available : https://www.edumor.com/school
[3] Sekolahpedia (2018) Daftar Sekolah Seluruh Indonesia [online]. Available :
https://sekolahpedia.id/

16