Laporan PKL Teknik Informatika

LAPORAN PRAKTEK KERJA LAPANGAN
SISTEM INFORMASI COMPANY PROFILE SMPN 1 PRAYA

BERBASIS WEBSITE
Oleh:
M. Qodly Aldy Arfiady

F1D019057
PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS MATARAM
2022
HALAMAN PENGESAHAN
LAPORAN PRAKTEK KERJA LAPANGAN
SISTEM INFORMASI COMPANY PROFILE SMPN 1 PRAYA
BERBASIS WEBSITE
Oleh:
M. Qodly Aldy Arfiady

F1D019057
Telah disetujui oleh:
1. Dosen Pembimbing
Tanggal:
Dr. Eng. I GP Wirarama W.W., S.T., M.T.

19840919 201803 1 001
2. Pembimbing Lapangan
Tanggal:
M. Zaenal Mustopa, S.Pd

19681130 199301 1 003
Mengetahui:
Program Studi Teknik Informatika FT-UNRAM

Sekretaris,
Andy Hidayat Jatmika, ST., M. Kom.

198312092012121001
ii
KATA PENGANTAR
Puji syukur penulis panjatkan atas kehadirat Tuhan Yang Maha Esa, karena dengan berkat,
rahmat dan limpahan karunianya, penulis dapat menyelesaikan Laporan Praktek Kerja
Lapangan ini sebagaimana mestinya. Praktek Kerja Lapangan (PKL) ini dilaksanakan di SMP
Negeri 1 Praya dengan judul “Sistem Informasi Company profile SMPN 1 Praya Berbasis
Website”. Sistem Informasi Company profile berfungsi untuk memudahkan pihak instansi
dalam mengelola dan menyebarkan informasi mengenai sekolah sekaligus mempromosikan
sekolah ke masyarakat luas. Dalam pembuatan laporan ini, penulis berpedoman pada bahan
kuliah yang telah dipelajari, petunjuk dari pembimbing lapangan, dosen pembimbing, serta
referensi dan literatur yang terkait dengan sistematis penulisan laporan. Tidak lupa pula
penulis mengucapkan terimakasih atas bantuan dan waktunya kepada pihak yang telah ikut
andil dalam penyelesaian laporan ini. Semoga laporan ini dapat menambah pengetahuan dan
pengalaman bagi para pembaca. Pengetahuan maupun pengalaman penulis yang masih
terabatas memungkinan adanya kekurangan dan juga kesalahan pada laporan ini. Untuk
itulah, penulis mengharapkan saran dan koreksi dari pembaca sehingga dapat dilakukan
penyempurnaan pada edisi mendatang. Terima kasih
iii
DAFTAR ISI
HALAMAN PENGESAHAN ii
KATA PENGANTAR iii
DAFTAR ISI iv
DAFTAR TABEL vi
DAFTAR GAMBAR vii
BAB I PENDAHULUAN 1
1.1 Latar Belakang 1
1.2 Rumusan Masalah 1
1.3 Batasan Masalah 2
1.4 Tujuan 2
1.5 Manfaat 2
BAB II TINJAUAN UMUM TEMPAT PKL 3
2.1 Profil Singkat SMPN 1 Praya 3
2.2 Visi dan Misi SMPN 1 Praya3
2.3 Sturktur Organisasi SMPN 1 Praya 4
2.4 Detail Tugas dan Lokasi PKL 4
BAB III DASAR TEORI 5
3.1 Sistem Informasi 5
3.2 Company Profile 5
3.3 Website 5
3.4 Basis Data 6
3.5 Unified Modeling Language (UML) 6
3.6 Entity Relationship Diagram 11
3.7 Framework Codeigniter 12
3.8 Framework Bootstrap 12
3.9 XAMPP 12
3.10 MySQL 13
BAB IV PELAKSANAAN PRAKTEK KERJA LAPANGAN 14
4.1 Bidang Kerja 14
4.2 Kendala Yang Dihadapi 14
4.3 Cara Mengatasi Kendala 14
BAB V HASIL DAN PEMBAHASAN 15
5.1 Analisis Kebutuhan 15
iv
5.2 Metode Perancangan Sistem 16
5.3 Desain Sistem 17
5.4 Implementasi Sistem 51
5.5 Testing 82
BAB VI KESIMPULAN DAN SARAN 84
6.1 Kesimpulan 84
6.2 Saran 84
DAFTAR PUSTAKA 85
LAMPIRAN 86
v
DAFTAR TABEL
Tabel 3.1 Simbol class diagram 6
Tabel 3.2 Simbol use case diagram 7
Tabel 3.3 Simbol activity diagram 8
Tabel 3.4 Simbol sequence diagram 10
Tabel 3.5 Simbol entity relationship diagram11
vi
DAFTAR GAMBAR
Gambar 2.1 Struktur organisasi SMPN 1 Praya 4
Gambar 5.1 Flowchart analisis kebutuhan 15
Gambar 5.2 Metode extreme programming 16
Gambar 5.3 Use case diagram pengunjung 17
Gambar 5.4 Use case diagram admin 18
Gambar 5.5 Class diagram 20
Gambar 5.6 Activity diagram proses login admin 21
Gambar 5.7 Activity diagram proses tambah data 22
Gambar 5.8 Activity diagram proses edit data 22
Gambar 5.9 Activity diagram proses cari data 23
Gambar 5.10 Activity diagram proses hapus data 24
Gambar 5.11 Activity diagram proses edit profile 24
Gambar 5.12 Activity diagram proses ubah password 25
Gambar 5.13 Activity diagram proses logout admin25
Gambar 5.14 Activity diagram proses melihat halaman 26
Gambar 5.15 Activity diagram proses mengisi buku tamu 26
Gambar 5.16 Sequence diagram login admin 27
Gambar 5.17 Sequence diagram tambah data guru 28
Gambar 5.18 Sequence diagram tambah data staff 28
Gambar 5.19 Sequence diagram tambah data foto 29
Gambar 5.20 Sequence diagram tambah data mading 29
Gambar 5.21 Sequence diagram tambah data berita30
Gambar 5.22 Sequence diagram tambah data pengumuman 31
Gambar 5.23 Sequence diagram tambah data bahan ajar 31
Gambar 5.24 Sequence diagram tambah data ekstrakurikuler 32
Gambar 5.25 Sequence diagram edit data guru 33
Gambar 5.26 Sequence diagram edit data staff 33
Gambar 5.27 Sequence diagram edit data foto 34
Gambar 5.28 Sequence diagram edit data mading 34
Gambar 5.29 Sequence diagram edit data berita 35
Gambar 5.30 Sequence diagram edit data pengumuman 36
Gambar 5.31 Sequence diagram edit data bahan ajar 36
Gambar 5.32 Sequence diagram edit data ekstrakurikuler 37
vii
Gambar 5.33 Sequence diagram edit profile admin 38
Gambar 5.34 Sequence diagram ubah password admin 38
Gambar 5.35 Sequence diagram hapus data guru 39
Gambar 5.36 Sequence diagram hapus data staff 39
Gambar 5.37 Sequence diagram hapus data foto 40
Gambar 5.38 Sequence diagram hapus data mading 41
Gambar 5.39 Sequence diagram hapus data berita 41
Gambar 5.40 Sequence diagram hapus data pengumuman 42
Gambar 5.41 Sequence diagram hapus data bahan ajar 43
Gambar 5.42 Sequence diagram hapus data ekstrakurikuler 43
Gambar 5.43 Sequence diagram hapus data buku tamu 44
Gambar 5.44 Sequence diagram logout admin 45
Gambar 5.45 Sequence diagram melihat halaman home 45
Gambar 5.46 Sequence diagram mengisi buku tamu 46
Gambar 5.47 Sequence diagram melihat halaman profile 46
Gambar 5.48 Sequence diagram melihat halaman direktori guru 47
Gambar 5.49 Sequence diagram melihat halaman direktori staff 47
Gambar 5.50 Sequence diagram melihat halaman galeri foto 48
Gambar 5.51 Sequence diagram melihat halaman galeri mading 48
Gambar 5.52 Sequence diagram melihat halaman informasi berita 49
Gambar 5.53 Sequence diagram melihat halaman informasi pengumuman49
Gambar 5.54 Sequence diagram melihat halaman informasi bahan ajar 50
Gambar 5.55 Sequence diagram melihat halaman ekstrakurikuler 50
Gambar 5.56 Entity relationship diagram 51
Gambar 5.57 Implementasi halaman home 52
Gambar 5.58 Implementasi halaman profile 53
Gambar 5.59 Implementasi halaman direktori guru 54
Gambar 5.60 Implementasi halaman direktori staff 55
Gambar 5.61 Implementasi halaman galeri foto 56
Gambar 5.62 Implementasi halaman galeri mading 57
Gambar 5.63 Implementasi halaman informasi berita 58
Gambar 5.64 Implementasi halaman informasi detail berita 59
Gambar 5.65 Implementasi halaman informasi pengumuman 60
Gambar 5.66 Implementasi halaman informasi bahan ajar 60
viii
Gambar 5.67 Implementasi halaman ekstrakurikuler 61
Gambar 5.68 Implementasi halaman PPDB 61
Gambar 5.69 Implementasi halaman admin login 62
Gambar 5.70 Implementasi halaman admin dashboard 62
Gambar 5.71 Implementasi halaman admin direktori guru 63
Gambar 5.72 Implementasi halaman admin tambah data guru 63
Gambar 5.73 Implementasi halaman admin edit data guru 64
Gambar 5.74 Implementasi halaman admin hapus data guru 64
Gambar 5.75 Implementasi halaman admin direktori staff 65
Gambar 5.76 Implementasi halaman admin tambah data staff 65
Gambar 5.77 Implementasi halaman admin edit data staff 66
Gambar 5.78 Implementasi halaman admin hapus data staff 66
Gambar 5.79 Implementasi halaman admin galeri foto 67
Gambar 5.80 Implementasi halaman admin tambah data foto 67
Gambar 5.81 Implementasi halaman admin edit data foto 68
Gambar 5.82 Implementasi halaman admin hapus data foto 68
Gambar 5.83 Implementasi halaman admin galeri mading 69
Gambar 5.84 Implementasi halaman admin tambah data mading 70
Gambar 5.85 Implementasi halaman admin edit data mading 70
Gambar 5.86 Implementasi halaman admin hapus data mading 71
Gambar 5.87 Implementasi halaman admin informasi berita 71
Gambar 5.88 Implementasi halaman admin tambah data informasi berita 72
Gambar 5.89 Implementasi halaman admin edit data informasi berita 72
Gambar 5.90 Implementasi halaman admin hapus data informasi berita 73
Gambar 5.91 Implementasi halaman admin informasi pengumuman 73
Gambar 5.92 Implementasi halaman admin tambah data informasi pengumuman 74
Gambar 5.93 Implementasi halaman admin edit data informasi pengumuman 74
Gambar 5.94 Implementasi halaman admin hapus data informasi pengumuman 75
Gambar 5.95 Implementasi halaman admin informasi bahan ajar 75
Gambar 5.96 Implementasi halaman admin tambah data informasi bahan ajar 76
Gambar 5.97 Implementasi halaman admin edit data informasi bahan ajar 76
Gambar 5.98 Implementasi halaman admin hapus data informasi bahan ajar 77
Gambar 5.99 Implementasi halaman admin ekstrakurikuler77
Gambar 5.100 Implementasi halaman admin tambah data ekstrakurikuler 78
ix
Gambar 5.101 Implementasi halaman admin edit data ekstrakurikuler 78
Gambar 5.102 Implementasi halaman admin hapus data ekstrakurikuler 79
Gambar 5.103 Implementasi halaman admin buku tamu 79
Gambar 5.104 Implementasi halaman admin hapus data buku tamu 80
Gambar 5.105 Implementasi halaman profile admin 80
Gambar 5.106 Implementasi halaman edit profile admin 81
Gambar 5.107 Implementasi halaman ubah password admin 81
Gambar 5.108 Hasil kuesioner 83
x
BAB I
PENDAHULUAN
1.1 Latar Belakang
Penyebaran informasi berbanding lurus dengan kemajuan teknologi pendukungnya,
dewasa ini penyebaran informasi dapat dengan mudah dilakukan dan banyak sekali memberi
perubahan pada berbagai aspek di kehidupan baik untuk diri sendiri maupun untuk sebuah
perusahaan atau instansi. Secara tidak sadar teknologi telah mempengaruhi sistem kerja
dalam sebuah instansi. Peran teknologi ini sangat penting untuk mendukung proses kerja di
dalam sebuah instansi sehingga proses tersebut berjalan lebih efektif dan efisien dengan hasil
yang maksimal.
Sistem informasi berbasis website adalah salah satu pemanfaatan teknologi dalam
sebuah instansi. Sistem tersebut tidak hanya bermanfaat bagi instansi, melainkan juga
bermanfaat untuk masyarakat. Pihak instansi dapat memberikan informasi kepada masyarakat
terkait visi misi instansi, tugas-tugas instansi, hingga informasi terkait kegiatan yang
dilakukan instansi. Sistem informasi berbasis website juga dapat dijadikan sebagai wadah
digital bagi instansi untuk mendapatkan masukan dari masyarakat dan menjadi media
interaksi antara masyarakat dengan instansi.
Sekolah Menengah Pertama Negeri 1 Praya atau singkatnya SMPN 1 Praya merupakan
sebuah instansi yang bergerak dalam bidang pendidikan yang terletak di pusat kota Praya,
Lombok Tengah. Sekolah ini adalah sekolah favorit di Lombok Tengah yang dapat
dibuktikan dengan banyaknya prestasi yang dihasilkan, baik oleh guru maupun siswanya.
SMPN 1 Praya tiap tahunnya selalu dicari oleh masyarakat yang ingin mendaftarkan anak
mereka untuk melanjutkan pendidikannya. Namun, saat ini masyarakat masih sulit untuk
mengakses informasi yang dibutuhkan karena tidak terdapat media digital resmi dari pihak
SMPN 1 Praya.
Untuk memecahkan masalah yang ada maka perlu dibuat sebuah Sistem Informasi
Company profile SMPN 1 Praya berbasis Website yang diharapkan dapat memudahkan
masyarakat dalam mendapatkan informasi lebih lanjut dan resmi terkait dengan SMPN 1
Praya secara mudah darimana saja dan kapan saja.
1.2 Rumusan Masalah
Berdasarkan latar belakang yang telah dipaparkan, maka dapat dirumuskan pokok
permasalahan yaitu bagaimana cara merancang dan membuat sistem informasi company
profile berbasis website pada SMPN 1 Praya?
1
1.3 Batasan Masalah
Berdasarkan rumusan masalah yang telah dipaparkan di atas, dapat diambil batasan
masalah sebagai berikut:
1. Sistem informasi yang dibuat berbasis website dan menampilkan informasi resmi
tentang sekolah, tenaga pengajar, ekstrakurikuler, galeri foto dan mading, kontak yang
dapat dihubungi serta informasi-informasi terkini seperti berita, bahan ajar dan
pengumuman terbaru sekolah.
2. Sistem yang dibangun merupakan sebuah sistem informasi yang dapat dikelola oleh
pihak instansi, yakni operator atau administrator SMPN 1 Praya.
3. Sistem informasi yang dibuat berbasis website dengan menggunakan PHP dan MySQL
serta framework Codeigniter 4 dan Bootstrap 5.
1.4 Tujuan
Berdasarkan latar belakang yang telah dijelaskan, tujuan Praktek Kerja Lapangan
(PKL) yang dilakukan yaitu merancang dan membuat sistem informasi company profile
SMPN 1 Praya berbasis website untuk memudahkan penyebaran informasi sekolah.
1.5 Manfaat
Manfaat dari pembuatan sistem informasi company profile berbasis website untuk
SMPN 1 Praya ini adalah sebagai berikut:
1. Bagi Instansi
Dengan adanya sistem informasi company profile SMPN 1 Praya berbasis website ini
diharapkan dapat membantu penyebaran informasi, serta meningkatkan eksistensi dari
instansi dan memberikan informasi lebih lengkap mengenai SMPN 1 Praya kepada
masyarakat secara mudah di mana saja dan kapan saja. Website ini juga dapat
menyimpan pesan yang ditinggalkan oleh pengunjung berupa kritik dan saran sebagai
sarana pengembangan lebih lanjut.
2. Bagi Operator/Administrator
Dengan adanya sistem informasi ini, pegawai SMPN 1 Praya dapat dengan mudah
untuk mengelola, memantau, dan memberikan informasi yang lengkap kepada
masyarakat.
3. Bagi Mahasiswa
Pembuatan dan perancangan sistem informasi berbasis website ini diharapkan menjadi
wadah bagi mahasiswa untuk menerapkan ilmu yang telah didapatkan selama
2
perkuliahan dan memberikan kesempatan bagi mahasiswa untuk merasakan dunia
kerja.
3
BAB II
TINJAUAN UMUM TEMPAT PKL
2.1 Profil Singkat SMPN 1 Praya
SMPN 1 Praya merupakan suatu instansi pemerintahan yang dipimpin oleh seorang
Kepala Sekolah beserta jajaran-jajaran di bawahnya. SMPN 1 Praya merupakan sekolah
favorit di Lombok Tengah yang terletak di pusat kota Praya, tepatnya di Jl. M. Yamin No. 01
Praya, Kabupaten Lombok Tengah, NTB. Kondisi geografis tersebut membuat SMPN 1
Praya mudah dijangkau oleh masyarakat.
2.2 Visi dan Misi SMPN 1 Praya
Adapun visi dan misi dari SMPN 1 Praya adalah sebagai berikut:
1. Visi: Beriman, Berilmu, Berbudaya dan Berprestasi
Dengan indikator sebagai berikut:
a. Bermutu dalam aktivitas keagamaan
b. Bermutu dalam bidang akademik
c. Bermutu dalam lomba olahraga
d. Bermutu dalam lomba kesenian
e. Bermutu dalam kegiatan ekstrakurikuler lainnya
f. Bermutu dalam disiplin
g. Bermutu dalam etika pergaulan
2. Misi:
a. Menumbuhkan penghayatan terhadap ajaran agama yang dianut, budaya bangsa
sehingga menjadi sumber kearifan dalam bertindak.
b. Melaksanakan pembelajaran dan bimbingan secara efektif, sehingga setiap siswa
dapat berkembang secara optimal sesuai dengan potensi yang dinilikinya.
c. Menumbuhkan semangat persaingan yang sehat dalam berkompetensi.
d. Mendorong dan membantu setiap siswa untuk mengenali potensi dirinya sehingga
dapat dikembangkan secara optimal.
e. Menumbuhkan budaya untuk senantiasa menjaga dan memelihara kebersihan,
kedisiplinan dalam lingkungan sekolah.
f. Menumbuhkan semangat yang bermutu secara intensif kepada seluruh warga
sekolah.
g. Menumbuhkan kepatuhan etika sopan santun dalam pergaulan sesuai norma yang
berlaku.
4
h. Mendorong dan membantu siswa dalam penguasaan berbagai keterampilan
sebagai bekal hidupnya setelah terjun di tengah-tengah masyarakat.
2.3 Struktur Organisasi SMPN 1 Praya
Berikut adalah struktur organisasi SMPN 1 Praya, seperti yang dapat dilihat pada
Gambar 2.1 berikut:
Gambar 2.1 Struktur organisasi SMPN 1 Praya

2.4 Detail Tugas dan Lokasi PKL
SMPN 1 Praya terletak di Jl. M. Yamin No. 01 Praya, Kabupaten Lombok Tengah,
NTB 83513. SMPN 1 Praya dipimpin oleh seorang kepala sekolah yang dibantu oleh jajaran-
jajaran di bawahnya. Selama masa Praktek Kerja Lapangan (PKL) di SMPN 1 Praya, penulis
diberikan tugas untuk membuat sistem informasi company profile SMPN 1 Praya berbasis
website untuk memudahkan pengelolaan dan penyebaran informasi bagi pihak SMPN 1
Praya. Selama kegiatan, penulis dibimbing oleh kepala laboratorium komputer dan dibantu
mengumpulkan data oleh penanggungjawab laboratorium komputer 3.
2.5
5
BAB III
DASAR TEORI
2.6 Sistem Informasi
Dimulai dari kata ‘sistem’ yang merupakan sebuah kata yang berasal dari bahasa
Yunani, yaitu ‘systema’, yang memiliki arti himpunan bagian atau komponen yang saling
berhubungan secara teratur dan merupakan suatu keseluruhan. Dapat diartikan juga sebagai
sekelompok elemen yang independen, namun saling terkait satu sama lain sebagai satu
kesatuan. Menurut Budi Sutedjo (2002), sistem adalah kumpulan elemen yang saling
berhubungan satu sama lain, yang membentuk satu kesatuan dalam usaha mencapai suatu
tujuan.
Sistem informasi merupakan sebuah kumpulan komponen pembentuk sistem yang
memiliki hubungan antara satu komponen dan komponen lain yang menghasilkan informasi
dalam bidang tertentu. Menurut Rommey (1983), sistem informasi adalah cara-cara yang
diorganisasi untuk mengumpulkan, memasukkan, mengolah, dan menyimpan data serta cara-
cara yang diorganisasi untuk menyimpan, mengelola, mengendalikan, dan melaporkan
informasi sehingga sebuah organisasi dapat mencapai tujuan yang telah ditetapkan [1].
2.7 Company profile
Company profile merupakan suatu sistem informasi mengenai sebuah perusahaan yang
diberikan melalui beberapa media promosi yang bertujuan untuk memberikan informasi
mengenai segala sesuatu yang yang berkaitan dengan perusahaan tersebut. Informasi tersebut
bersifat umum dan perusahaan dapat memilih informasi apa saja yang ingin disampaikan
secara terbuka kepada publik.
Rachmat Kriyantono dalam buku “Public Relations Writing: Media Public Relations
Membangun Citra Korporat” mengatakan bahwa company profile merupakan produk tulisan
praktisi Public Relations yang berisi gambaran umum perusahaan yang tidak sepenuhnya
lengkap, detail dan mendalam sehingga perusahaan dapat memilih informasi apa saja yang
ingin disampaikan secara terbuka kepada publik (Kriyantono, 2008) [2].
2.8 Website
Sebuah situs web (website) adalah sebutan bagi sekelompok halaman website (web
page), yang umumnya merupakan bagian dari suatu nama domain (domain name) atau
subdomain di World Wide Web (WWW) di Internet. Sebuah web page adalah dokumen yang
ditulis dalam format HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses
melalui protokol yang menyampaikan informasi dari server website untuk ditampilkan
kepada para pemakai melalui web browser baik yang bersifat statis maupun dinamis yang
6
membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan
dengan jaringan-jaringan halaman (hyperlink), protocol tersebut adalah HTTP (Ali Zaki,
2009).
Sebuah website dikatakan statis apabila isi informasi website tetap, jarang berubah, dan
isi informasinya searah hanya dari pemilik website. Dikatakan dinamis apabila isi informasi
website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik
serta pengguna website [3].
2.9 Basis Data
Basis data merupakan kumpulan data terpusat dan terstruktur yang disimpan dalam
sistem komputer yang diorganisasikan berdasarkan sebuah skema atau struktur tertentu, dan
dengan software untuk melakukan manipulasi untuk kegunaan tertentu. Sistem tersebut
menyediakan fasilitas untuk mengambil, menambahkan, memodifikasi, menghapus data, atau
pengelolaan yang lainnya saat diperlukan. Sistem juga menyediakan fasilitas untuk dapat
mengubah data yang diambil menjadi informasi yang berguna [4].
2.10 Unified Modeling Language (UML)
Unified Modeling Language merupakan alat perancangan sistem yang berorientasi pada
objek. Kemunculan UML didasari oleh konsep permodelan Object Oriented (OO) yang telah
ada, konsep ini menganalogikan sistem seperti kehidupan nyata yang didominasi oleh obyek
dan digambarkan atau dinotasikan dalam simbol-simbol yang cukup spesifik sehingga
memiliki proses standard dan bersifat independen.
UML diagram digunakan untuk membantu tim pengembangan proyek berkomunikasi,
mengeksplorasi potensi desain, dan memvalidasi desain arsitektur perangkat lunak atau
pembuat program [5].
2.10.1 Class Diagram
Class diagram adalah model statis yang menunjukkan kelas dan hubungan di antara
kelas yang tetap konstan dalam sistem dari waktu ke waktu. Class diagram menggambarkan
kelas, yang meliputi perilaku dan keadaan, dengan hubungan antar kelas (Dennis et al., 2015)
[6].
Terdapat beberapa simbol dan cara penulisan dari class diagram yang dapat dilihat
pada Tabel 3.1 berikut:
Tabel 3.1 Simbol class diagram
Simbol Nama Keterangan
7
Mewakili orang, tempat, atau hal-hal
Class yang dibutuhkan sistem untuk
menangkap dan menyimpan informasi.
Merupakan properti yang

Attribute menggambarkan keadaan suatu objek.
Mewakili tindakan atau fungsi yang dapat

Operation dilakukan oleh kelas.
Mewakili hubungan sejenis di antara

Generalization beberapa kelas.
Mewakili hubungan antara beberapa

Association kelas atau kelas dan dirinya sendiri.
Merupakan hubungan sebagian (a part of)

yang logis diantara beberapa kelas atau
Aggregation suatu kelas dengan kelas itu sendiri.
Mewakili hubungan fisik antara beberapa

Composition kelas atau kelas dan kelas itu sendiri.
2.10.2 Use Case Diagram

Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem.
Yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan “bagaimana”. Sebuah use
case merepresentasikan sebuah interaksi antara aktor dengan sistem. Use case merupakan
sebuah pekerjaan tertentu, misalnya login ke sistem, meng-create sebuah daftar belanja, dan
sebagainya. Seorang/sebuah aktor adalah sebuah entitas manusia atau mesin yang
berinteraksi dengan sistem untuk melakukan pekerjaan-pekerjaan tertentu [6].
Terdapat beberapa simbol dan cara penulisan dari use case diagram yang dapat dilihat
Tabel 3.2 Simbol use case diagram
8
Actor/Role Orang atau sistem lain yang berinteraksi
dengan sistem saat ini.
Use Case Bagian utama dari fungsionalitas sistem.
Berisi nama dari sistem yang diletakkan

Subject Boundary di dalam atau di bagian atas boundary.
Association Menghubungkan actor dengan use case.

Relationship
Include Memasukkan satu use case dalam use

Relationship case lainnya.
Memperluas use case untuk memasukkan

Extend perilaku opsional.
Relationship
Mewakili use case khusus untuk use case

Generalization yang lebih umum.
Relationship
2.10.3 Activity Diagram

Activity diagrams menggambarkan berbagai alir aktivitas dalam sistem yang sedang
dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan
bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses paralel
yang mungkin terjadi pada beberapa eksekusi [6].
Terdapat beberapa simbol dan cara penulisan dari activity diagram yang dapat dilihat
Tabel 3.3 Simbol activity diagram
Perilaku yang sederhana dan tidak dapat

Action diuraikan. Dilabeli dengan Namanya.
9
Digunakan untuk mewakili sekumpulan
Activity tindakan (action). Dilabeli dengan
namanya.
Digunakan untuk mewakili sebuah objek

yang terhubung ke sekumpulan arus
Object Node objek. Dilabeli dengan nama classnya.
Control Flow Menunjukkan urutan eksekusi.
Menunjukkan aliran suatu objek dari satu

aktivitas (atau tindakan) ke aktivitas (atau
Object Flow tindakan) lain.
Menggambarkan awal dari serangkaian

Initial Node tindakan atau kegiatan.
Digunakan untuk menghentikan semua

Final Activity Node arus kontrol dan arus objek dalam suatu
aktivitas (tindakan).
Digunakan untuk menghentikan aliran

Final Flow Node kontrol atau aliran objek tertentu.
Digunakan untuk mewakili kondisi

pengujian untuk memastikan bahwa
Decision Node aliran kontrol atau aliran objek hanya
turun satu jalur.
Digunakan untuk menyatukan kembali

berbagai jalur keputusan yang dibuat
Merge Node menggunakan simpul keputusan.
Digunakan untuk membagi perilaku

menjadi seperangkat aktivitas yang
Fork Node paralel atau bersamaan dari aktivitas
(tindakan).
10
Digunakan untuk menyatukan kembali
serangkaian arus aktivitas (tindakan)
Join Node yang paralel atau bersamaan.
Swimlane memisahkan organisasi bisnis

yang bertanggung jawab terhadap
Swimlane aktivitas yang terjadi.
2.10.4 Sequence Diagram

Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem
(termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap
waktu. Sequence diagram terdiri atar dimensi vertikal (waktu) dan dimensi horizontal (objek-
objek yang terkait). Sequence diagram biasa digunakan untuk menggambarkan skenario atau
rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk
menghasilkan output tertentu. Diawali dari apa yang men-trigger aktivitas tersebut, proses
dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan [6].
Terdapat beberapa simbol dan cara penulisan dari sequence diagram yang dapat dilihat
Tabel 3.4 Simbol sequence diagram
Adalah orang atau sistem yang

Actor memperoleh manfaat dari dan berada di
luar sistem.
Berpartisipasi dalam suatu urutan dengan

Object mengirim dan / atau menerima pesan.
Menggambarkan tampilan program

Boundary Class
Menggambarkan controller.
Controll Class
11
Menggambarkan hubungan yang akan
Entiity Class dilakukan.
Menunjukkan kehidupan suatu objek

Lifeline selama suatu urutan.
Menunjukkan kapan suatu objek

Execution mengirim atau menerima pesan.
Occurence
Menyampaikan informasi dari satu objek

Message ke objek lainnya.
Merupakan tes yang harus dipenuhi untuk

Guard Condition pesan yang akan dikirim.
X ditempatkan di ujung lifeline objek

Object Destruction untuk menunjukkan bahwa objek tersebut
akan keluar dari eksistensi.
Menunjukkan konteks sequence diagram.

Frame
2.11 Entity Relationship Diagram

ERD (Entity Relationship Diagram) adalah model teknik pendekatan yang menyatakan
atau menggambarkan hubungan suatu model. Didalam hubungan ini tersebut dinyatakan yang
utama dari ERD adalah menunjukan objek data (Entity) dan hubungan (Relationship), yang
ada pada Entity berikutnya.
Menurut Simarmata (2010:67), “Entity RelationShip Diagram (ERD) adalah alat
pemodelan data utama dan akan mambantu mengorganisasi data dalam suatu proyek ke
dalam entitas-entitas dan menentukan hubungan antar entitas” [7].
Terdapat beberapa simbol dan cara penulisan dari entity relationship diagram yang
dapat dilihat pada Tabel 3.5 berikut:
12
Tabel 3.5 Simbol entity relationship diagram
Suatu yang nyata atau abstrak

Entity yang mempunyai karakteristik
dimana kita akan menyimpan
data
Hubungan yang terjadi antara

Relationship satu atau lebih entitas
Ciri umum semua atau

Atribut sebagian besar instansi pada
entitas tertentu
Garis penghubung atribut

Link dengan kumpulan entitas dan
kumpulan entitas dengan relasi
2.12 Framework Codeigniter

CodeIgniter merupakan sebuah framework yang dibuat dengan menggunakan bahasa
PHP, yang dapat digunakan untuk pengembangan web secara cepat. Adapun framework
sendiri dapat diartikan sebagai suatu struktur pustaka-pustaka, kelas-kelas dan infrastruktur
run-time yang dapat digunakan oleh programmer untuk mengembangkan aplikasi web secara
cepat. Tujuan penggunaan framework adalah untuk mempermudah pengembang web
mengembangkan aplikasi web yang robust secara cepat tanpa kehilangan fleksibilitas.
Pola desain dalam pengembangan web dengan CodeIgniter menggunakan MVC
(Model-View-Controller). Dimana aplikasi yang dibuat akan dipisahkan antara logika bisnis
dan presentasinya, sehingga memungkinkan web programmer dan web designer bekerja
secara terpisah antara satu dengan yang lain. Agar bisa mengembangkan web dengan
CodeIgniter, maka perlu dipahami terlebih dahulu konsep MVC dan struktur direktori dari
CodeIgniter [8].
2.13 Framework Bootstrap
Bootstrap adalah framework front-end yang intuituf dan powerful untuk pengembangan
aplikasi web yang lebih cepat dan mudah. Bootstrap menggunakan HTML, CSS, dan
13
Javascript. Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton dari Twitter.
Framework ini diluncurkan sebagai produk open source pada Agustus 2011 di Github.
Bootstrap memiliki fitur-fitur komponen interface yang bagsu seperti Typography,
Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion,
Carousel, dan lain sebagainya. Dengan menggunakan Bootstrap, layout situs dapat dibuat
responsive dengan mudah [9].
2.14 XAMPP
XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi,
merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri
sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan
penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP
merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl.
Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server
yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis [10].
2.15 MySQL
Kustiyahningsih (2011:145), “MySQL adalah sebuah basis data yang mengandung satu
atau jumlah table. Table terdiri atas sejumlah baris dan setiap baris menggandung satu atau
sejumlah tabel.
Menurut Wahana Komputer (2010:21), MySQL adalah database server opensource
yang cukup popular keberadaanya. Dengan berbagai keunggulan yang dimiliki, membuat
software database ini banyak digunakan oleh praktisi untuk membangun suatu project.
Adanya fasilitas API (Application Programming Interface) yang dimiliki oleh Mysql,
memungkinkan bermacam-macam aplikasi Komputer yang ditulis dengan berbagai bahasa
pemograman dapat mengakses basis data MySQL [10].
14
BAB IV
PELAKSANAAN PRAKTEK KERJA LAPANGAN
4.1 Bidang Kerja
Pelaksanaan Praktek Kerja Lapangan (PKL) di SMPN 1 Praya dilakukan pada bidang
pengelolaan informasi dan komunikasi. Pada bidang tersebut, praktikan ditugaskan untuk
membuat suatu sistem informasi untuk menyebarluaskan informasi kepada masyarakatat
umum mengenai SMPN 1 Praya.
Adapun beberapa kegiatan yang dilakukan selama melaksanakan Praktik Kerja
Lapangan adalah sebagai berikut:
1. Berdiskusi dengan pembimbing lapangan terkait rancangan website yang akan
dibangun.
2. Membuat sistem informasi company profile SMPN 1 Praya berbasis website.
3. Memasukan data-data dan informasi sekolah pada sistem informasi company profile
SMPN 1 Praya berbasis website.
4. Mengelola data-data dan informasi sekolah pada sistem informasi company profile
SMPN 1 Praya berbasis website.
5. Menyosialisasikan sistem informasi company profile kepada pembimbing lapangan dan
operator laboratorium komputer 3 SMPN 1 Praya.
6. Menghosting sistem informasi company profile SMPN 1 Praya berbasis website.
4.2 Kendala Yang Dihadapi
Pada pelaksanaan PKL, terdapat beberapa kendala yang dihadapi, yakni sebagai
berikut:
1. Penanggungjawab laboratorium komputer 3 sebagai pihak yang ikut membantu
dipindahtugaskan dan diganti oleh pegawai baru.
2. Lamanya proses pengumpulan data-data dan informasi dari pihak sekolah untuk
ditampilkan pada sistem informasi company profile SMPN 1 Praya dikarenakan
datanya belum ter-update.
3. Tidak adanya domain dan hosting yang dimiliki sekolah.
4.3 Cara Mengatasi Kendala
Berdasarkan kendala yang telah dijabarkan di atas, maka adapun cara mengatasi
kendala tersebut, antara lain:
1. Menjelaskan ulang terkait dengan tugas dan kebutuhan PKL kepada
penanggungjawab laboratorium komputer 3 yang baru
15
2. Diadakannya komunikasi untuk menanyakan secara langsung kepada pengurus atau
operator sekolah terkait data-data yang masih berlaku atau tidak.
3. Dilakukan proses pembelian hosting dan domain.
BAB V
HASIL DAN PEMBAHASAN
5.1 Analisis Kebutuhan
Pada Praktek Kerja Lapangan di SMPN 1 Praya dilakukan proses analisis kebutuhan
yang diperlukan dalam pembuatan sistem informasi company profile dengan tahapan seperti
pada gambar 5.1 berikut:
Gambar 5.1 Flowchart analisis kebutuhan

Berdasarkan flowchart pada gambar 5.1, proses analisa kebutuhan perangkat lunak
yang pertama kali dilakukan yaitu melakukan identifikasi masalah. Proses identifikasi
masalah ini dilakukan untuk mengetahui apa saja masalah yang terdapat pada SMPN 1 Praya.
16
Setelah melakukan identifikasi masalah, dilanjutkan dengan analisis kebutuhan yang
diperlukan dalam pembuatan sistem informasi company profile. Kemudian langkah
selanjutnya yaitu melakukan perancangan sistem seperti menentukan apa saja metode yang
digunakan, bagaimana alur dari program, dan bagimana sistem yang diinginkan oleh pihak
SMPN 1 Praya. Setelah melakukan perancangan sistem, dilanjutkan dengan melakukan
pembuatan sistem informasi company profile sesuai dengan rancangan yang telah dibuat.
Kemudian dilakukan implementasi dan testing pada sistem yang telah dibuat. Jika sistem
tidak berhasil lolos tahap testing, maka akan kembali ke tahapan implementasi untuk
dilakukan perbaikan sistem. Jika program berhasil lolos tahap testing, maka akan dilanjutkan
dengan proses pembuatan survey untuk mengukur tingkat kepuasan responden terhadap
sistem. Tahap terakhir adalah pembuatan laporan berdasarkan hasil praktek kerja lapangan.
5.2 Metode Perancangan Sistem
Pengembangan sistem dibuat dengan menggunakan metode extreme programming,
metode ini dipilih karena lebih efisien dalam waktu pengerjaan dan dapat memperkecil biaya
yang dikeluarkan akibat seringnya perubahan requirement. Selain itu metode pengembangan
Extreme Programming merupakan metode pengembangan sistem yang akan dikembangkan
dengan memprioritaskan keinginan user.
Gambar 5.2 Metode extreme programming

Tahapan proses XP atau siklus pengembangan secara keseluruhan terdiri dari empat
tahap, yaitu:
1. Perencanaan (Planning)
17
Tahapan perencanaan (planning) bertujuan untuk menjelaskan tugas-tugas teknis
yang akan dilakukan, resiko yang dapat terjadi, sumber daya yang diperlukan, produk
kerja yang ingin dihasilkan, penjadwalan kerja yang akan dilaksanakan, dan tracking
proses pengerjaan sistem.
2. Design
Tahapan design bertujuan untuk merancang dan memodelkan arsitektur sistem
yang berfokus pada perancangan struktur data, tampilan interface, dan algoritma
pemrograman. Hal ini dilakukan untuk memahami gambaran project yang dikerjakan.
3. Coding
Tahapan coding memiliki tujuan untuk menerjemahkan tahapan design ke dalam
bahasa yang bisa dikenali oleh komputer. Tahapan ini lah yang merupakan tahapan
secara nyata dalam mengerjakan suatu sistem. Dengan kata lain, pada tahap ini
penggunaan komputer akan dimaksimalkan.
4. Testing
Tahapan akhir merupakan testing sistem, dimana sistem akan diuji kemampuan
dan keefektifannya. Tujuan tahap ini adalah untuk menemukan kesalahan-kesalahan
atau error pada sistem, memastikan sistem dapat berjalan dengan lancar, dan
memastikan sistem dapat berjalan dengan lancar, dan memastikan bahwa sistem yang
dibuat sudah sesuai dengan keinginan pengguna.
5.3 Desain Sistem
5.3.1 Use Case Diagram
Use Case Diagram dari Sistem Informasi Company profile SMPN 1 Praya adalah
sebagai berikut:
18
Gambar 5.3 Use case diagram pengunjung
Gambar 5.4 Use case diagram admin

Use case diagram dari sistem informasi company profile SMPN 1 Praya yang telah
dibuat memiliki dua aktor, yakni sebagai berikut:
19
1. Pengunjung
Pengunjung dapat melihat tampilan home, profile, guru, staff, foto, mading,
berita, pengumuman, bahan ajar, mengunduh file, melihat kontak, melihat PPDB, dan
mengisi buku tamu. Pengunjung dapat melakukan semua proses tersebut tanpa login
atau memiliki akun terlebih dahulu.
2. Admin
Admin atau pengelola sistem dapat melakukan proses-proses berikut ini:
a. Melihat semua data, yaitu data dashboard, data guru, data staff, data foto, data
mading, data berita, data pengumuman, data bahan ajar, data ekstrakurikuler, dan
data tamu.
b. Edit atau update beberapa data, yaitu data dashboard, data guru, data staff, data
foto, data mading, data berita, data pengumuman, data bahan ajar, data
ekstrakurikuler. Sedangkan data tamu tidak dapat diubah karena merupakan data
yang langsung didapat dari pengunjung.
c. Hapus atau delete semua data, yaitu yaitu data dashboard, data guru, data staff,
data foto, data mading, data berita, data pengumuman, data bahan ajar, data
ekstrakurikuler, dan data tamu.
d. Mencari semua data, yaitu yaitu data dashboard, data guru, data staff, data foto,
data mading, data berita, data pengumuman, data bahan ajar, data ekstrakurikuler,
dan data tamu.
e. Mengubah profile dan juga password admin.
f. Melakukan login sebelum melihat data.
g. Melakukan logout setelah login.
20
5.3.2 Class Diagram
21
Gambar 5.5 Class diagram
22
Gambar 5.5 merupakan class diagram dari sistem informasi company profile SMPN 1
Praya. Berdasarkan class diagram tersebut, terdapat Controller yang mengatur admin yang
terdiri dari class ‘Users’, ‘Dashboard’, ‘BahanAjar’, ‘Mading’, ‘Guru’, ‘Staff’, ‘Berita’,
‘Pengumuman’, ‘Foto’, ‘BukuTamu’, dan ‘Ekstrakurikuler’. Terdapat juga Controller yang
mengatur pengunjung yang terdiri dari class ‘Home’, ‘GaleriFoto’, ‘GaleriMading’,
‘InformasiBerita’, ‘InformasiPengumuman’, ‘InformasiBahanAjar’, ‘DirektoriGuru’,
‘DirektoriStaff’, ‘Profile’, dan ‘Ekstrakurikuler’.
Terdapat juga Model untuk mengatur data di dalamnya yang terdiri dari class
‘FotoModel’, ‘MadingModel’, ‘GuruModel’, ‘StaffModel’, ‘BahanAjarModel’,
‘EkstrakurikulerModel’, ‘PengumumanModel’, ‘BeritaModel’, ‘BukuTamuModel’,
‘DashboardModel’, dan ‘UsersModel’.
5.3.3 Activity Diagram
Berikut merupakan activity diagram dari Sistem Informasi Company profile SMPN 1
Praya:
1. Proses login admin
Gambar 5.6 Activity diagram proses login admin

Gambar 5.6 merupakan activity diagram dari proses login admin. Berdasarkan
activity diagram tersebut, pada proses log in sistem akan menampilkan form log in
yang kemudian akan diisi oleh admin sesuai dengan akun yang dimiliki setelah itu akan
dilakukan verifikasi akun, apabila data sesuai maka sistem akan berpindah ke halaman
dashboard admin, jika tidak maka akan tetap pada halaman log in.
23
2. Proses tambah data
Gambar 5.7 Activity diagram proses tambah data

Gambar 5.7 merupakan activity diagram dari proses tambah data. Berdasarkan
activity diagram tersebut, sistem akan menampilkan halaman form untuk
menambahkan data, setelah itu user akan mengisi data sesuai dengan yang dibutuhkan,
lalu sistem akan memverifikasi data yang telah diisi. Jika data telah diisi dengan
lengkap maka data akan disimpan ke dalam database dan akan menampilkan list data
tersebut, jika tidak maka akan kembali ke form tambah data untuk melengkapi kembali
data yang belum terisi.
3. Proses edit data
24
Gambar 5.8 Activity diagram proses edit data
Gambar 5.8 merupakan activity diagram dari proses edit data. Berdasarkan
activity diagram tersebut, sistem akan menampilkan halaman daftar data. Ketika admin
menekan tombol detail, lalu edit data, sistem akan menampilkan halaman edit data
untuk mengubah data, setelah itu admin akan mengisi data sesuai dengan yang
dibutuhkan, lalu sistem akan memverifikasi perubahan data yang telah diisi. Jika data
telah diisi dengan lengkap maka data akan disimpan ke dalam database, jika tidak maka
kembali ke halaman edit data untuk melengkapi kembali data yang belum terisi.
4. Proses cari data
Gambar 5.9 Activity diagram proses cari data

Gambar 5.9 merupakan activity diagram dari proses cari data. Berdasarkan
activity diagram tersebut, sistem akan menampilkan halaman daftar data. Ketika user
25
memasukkan kata kunci yang diinginkan pada bagian search, maka sistem akan
memeriksa data tersebut di database. Jika data tersedia maka akan ditampilkan, namun
jika data tidak tersedia akan dibalikkan ke daftar data.
5. Proses hapus data
Gambar 5.10 Activity diagram proses hapus data

Gambar 5.10 merupakan activity diagram dari proses hapus data. Berdasarkan
activity diagram tersebut, sistem akan menampilkan halaman daftar data. Ketika admin
menekan tombol detail, lalu tombol hapus data, maka sistem akan memunculkan pop-
up untuk mengonfirmasi tindakan, jika admin mengonfirmasi maka sistem akan
menghapus data yang dipilih. Jika tidak, maka akan kembali ke halaman daftar data.
6. Proses edit profile
26
Gambar 5.11 Activity diagram edit profile
Gambar 5.11 merupakan activity diagram dari proses edit profile admin. Ketika
admin menekan menu edit profile, sistem akan menampilkan halaman edit profile.
Setelah itu admin akan mengisi data sesuai dengan yang dibutuhkan, lalu sistem akan
memverifikasi perubahan data yang telah diisi. Jika data telah diisi dengan sesuai, maka
perubahan profile akan disimpan ke dalam database, jika tidak maka kembali ke
halaman edit profile untuk melengkapi form kembali.
7. Proses ubah password
Gambar 5.12 Activity diagram proses ubah password
27
Gambar 5.12 merupakan activity diagram dari proses ubah password.
Berdasarkan activity diagram tersebut, ketika admin menekan menu ubah password,
sistem akan menampilkan halaman ubah password. Setelah itu admin akan mengisi data
sesuai dengan yang dibutuhkan, lalu sistem akan memverifikasi perubahan password
yang telah diisi. Jika data telah diisi dengan sesuai, maka perubahan password akan
disimpan ke dalam database, jika tidak maka kembali ke halaman ubah password untuk
melengkapi form kembali.
8. Proses logout admin
Gambar 5.13 Activity diagram proses logout admin

Gambar 5.13 merupakan activity diagram dari proses log out. Berdasarkan
activity diagram tersebut, Ketika sistem menampilkan halaman saat ini, admin akan
memilih menu log out, kemudian sistem akan menampilkan halaman home.
9. Proses melihat halaman
Gambar 5.14 Activity diagram proses melihat halaman

Gambar 5.14 merupakan activity diagram dari proses melihat halaman. Dimana
proses ini berawal dari sistem yang menampilkan halaman home, kemudian pengguna
memilih menu pada navbar, yakni profile, direktori guru, direktori staff, galeri foto,
28
galeri madding, informasi berita, informasi pengumuman, informasi bahan ajar,
esktrakurikuler, dan PPDB. Setelah itu, sistem akan menampilkan halaman yang telah
dipilih tersebut.
10. Proses mengisi buku tamu
Gambar 5.15 Activity diagram proses mengisi buku tamu

Gambar 5.15 merupakan activity diagram dari proses mengisi buku tamu.
Dimana proses ini berawal dari sistem yang menampilkan halaman home, kemudian
pengguna mengisi form buku tamu, kemudian data tersebut akan diverifikasi. Jika
sudah sesuai, data tamu akan disimpan, jika tidak sesuai, maka sistem akan
menampilkan halaman home dengan alert bahwa data gagal dikirim dan diminta untuk
mengisi form kembali.
5.3.4 Sequence Diagram
1. Login admin
29
Gambar 5.16 Sequence diagram login admin
Gambar 5.16 merupakan sequence diagram dari login admin. Proses ini diawali
dengan fungsi ‘login()’ untuk mengakses form login dimana admin memasukkan
username/email dan password lalu memanggil fungsi ‘attemptLogin()’ pada
Controller Auth. Kemudian akan dilakukan cek validasi, lalu Model UsersModel akan
mengirimkan nilai login berhasil atau gagal. Apabila berhasil maka akan menampilkan
halaman dashboard admin, jika gagal maka akan kembali ke form login.
2. Tambah data guru
30
Gambar 5.17 Sequence diagram tambah data guru
Gambar 5.17 merupakan sequence diagram dari tambah data guru. Proses ini
diawali dengan form tambah data dimana admin memasukkan data guru yang baru, lalu
memanggil fungsi ‘create()’ pada Controller Guru. Kemudian akan dipanggil fungsi
‘save()’ untuk dilakukan cek validasi pada Model GuruModel. Apabila berhasil maka
akan disimpan dan menampilkan halaman data guru, sedangkan jika gagal maka akan
kembali ke form tambah data guru.
3. Tambah data staff
Gambar 5.18 Sequence diagram tambah data staff

Gambar 5.18 merupakan sequence diagram dari tambah data staff. Proses ini
diawali dengan form tambah data dimana admin memasukkan data staff yang baru, lalu
memanggil fungsi ‘create()’ pada Controller Staff. Kemudian akan dipanggil fungsi
‘save()’ untuk dilakukan cek validasi pada Model StaffModel. Apabila berhasil maka
31
akan disimpan dan menampilkan halaman data staff, sedangkan jika gagal maka akan
kembali ke form tambah data staff.
4. Tambah data foto
Gambar 5.19 Sequence diagram tambah data foto

Gambar 5.19 merupakan sequence diagram dari tambah data foto. Proses ini
diawali dengan form tambah data dimana admin memasukkan data foto yang baru, lalu
memanggil fungsi ‘create()’ pada Controller Foto. Kemudian akan dipanggil fungsi
‘save()’ untuk dilakukan cek validasi pada Model FotoModel. Apabila berhasil maka
akan disimpan dan menampilkan halaman data foto, sedangkan jika gagal maka akan
kembali ke form tambah data foto.
5. Tambah data mading
Gambar 5.20 Sequence diagram tambah data mading
32
Gambar 5.20 merupakan sequence diagram dari tambah data mading. Proses ini
diawali dengan form tambah data dimana admin memasukkan data mading yang baru,
lalu memanggil fungsi ‘create()’ pada Controller Mading. Kemudian akan dipanggil
fungsi ‘save()’ untuk dilakukan cek validasi pada Model MadingModel. Apabila
berhasil maka akan disimpan dan menampilkan halaman data mading, sedangkan jika
gagal maka akan kembali ke form tambah data mading.
6. Tambah data berita
Gambar 5.21 Sequence diagram tambah data berita

Gambar 5.21 merupakan sequence diagram dari tambah data berita. Proses ini
diawali dengan form tambah data dimana admin memasukkan data berita yang baru,
lalu memanggil fungsi ‘create()’ pada Controller Berita. Kemudian akan dipanggil
fungsi ‘save()’ untuk dilakukan cek validasi pada Model BeritaModel. Apabila
berhasil maka akan disimpan dan menampilkan halaman data berita, sedangkan jika
gagal maka akan kembali ke form tambah data berita.
33
7. Tambah data pengumuman
Gambar 5.22 Sequence diagram tambah data pengumuman

Gambar 5.22 merupakan sequence diagram dari tambah data pengumuman.
Proses ini diawali dengan form tambah data dimana admin memasukkan data
pengumuman yang baru, lalu memanggil fungsi ‘ create()’ pada Controller
Pengumuman. Kemudian akan dipanggil fungsi ‘save()’ untuk dilakukan cek validasi
pada Model PengumumanModel. Apabila berhasil maka akan disimpan dan
menampilkan halaman data pengumuman, sedangkan jika gagal maka akan kembali ke
form tambah data pengumuman.
8. Tambah data bahan ajar
Gambar 5.23 Sequence diagram tambah data bahan ajar

Gambar 5.23 merupakan sequence diagram dari tambah data bahan ajar. Proses
ini diawali dengan form tambah data dimana admin memasukkan data bahan ajar yang
34
baru, lalu memanggil fungsi ‘create()’ pada Controller BahanAjar. Kemudian akan
dipanggil fungsi ‘save()’ untuk dilakukan cek validasi pada Model BahanAjarModel.
Apabila berhasil maka akan disimpan dan menampilkan halaman data bahan ajar,
sedangkan jika gagal maka akan kembali ke form tambah data bahan ajar.
9. Tambah data ekstrakurikuler
Gambar 5.24 Sequence diagram tambah data ekstrakurikuler

Gambar 5.24 merupakan sequence diagram dari tambah data ekstrakurikuler.
Proses ini diawali dengan form tambah data dimana admin memasukkan data
ekstrakurikuler yang baru, lalu memanggil fungsi ‘ create()’ pada Controller
Ekstrakurikuler. Kemudian akan dipanggil fungsi ‘save()’ untuk dilakukan cek
validasi pada Model Ekstrakurikuler Model. Apabila berhasil maka akan disimpan dan
menampilkan halaman data ekstrakurikuler, sedangkan jika gagal maka akan kembali
ke form tambah data ekstrakurikuler.
35
10. Edit data guru
Gambar 5.25 Sequence diagram edit data guru

Gambar 5.25 merupakan sequence diagram dari edit data guru. Proses ini
diawali dengan form edit data dimana admin mengubah atau melengkapi salah satu data
guru yang sudah ada, lalu memanggil fungsi ‘edit()’ pada Controller Guru. Kemudian
akan dipanggil fungsi ‘update()’ untuk dilakukan cek validasi pada Model
GuruModel. Apabila berhasil maka data akan disimpan dan akan menampilkan
halaman data guru, sedangkan jika gagal maka akan kembali ke form edit data guru.
11. Edit data staff
Gambar 5.26 Sequence diagram edit data staff

Gambar 5.26 merupakan sequence diagram dari edit data staff. Proses ini diawali
dengan form edit data dimana admin mengubah atau melengkapi salah satu data staff
yang sudah ada, lalu memanggil fungsi ‘edit()’ pada Controller Staff. Kemudian akan
36
dipanggil fungsi ‘update()’ untuk dilakukan cek validasi pada Model StaffModel.
Apabila berhasil maka data akan disimpan dan akan menampilkan halaman data staff,
sedangkan jika gagal maka akan kembali ke form edit data staff.
12. Edit data foto
Gambar 5.27 Sequence diagram edit data foto

Gambar 5.27 merupakan sequence diagram dari edit data foto. Proses ini diawali
dengan form edit data dimana admin mengubah atau melengkapi salah satu data foto
yang sudah ada, lalu memanggil fungsi ‘ edit()’ pada Controller Foto. Kemudian akan
dipanggil fungsi ‘update()’ untuk dilakukan cek validasi pada Model FotoModel.
Apabila berhasil maka data akan disimpan dan akan menampilkan halaman data foto,
sedangkan jika gagal maka akan kembali ke form edit data foto.
13. Edit data mading
Gambar 5.28 Sequence diagram edit data mading
37
Gambar 5.28 merupakan sequence diagram dari edit data mading. Proses ini
mading yang sudah ada, lalu memanggil fungsi ‘ edit()’ pada Controller Mading.
Kemudian akan dipanggil fungsi ‘update()’ untuk dilakukan cek validasi pada Model
MadingModel. Apabila berhasil maka data akan disimpan dan akan menampilkan
halaman data mading, sedangkan jika gagal maka akan kembali ke form edit data
mading.
14. Edit data berita
Gambar 5.29 Sequence diagram edit data berita

Gambar 5.29 merupakan sequence diagram dari edit data berita. Proses ini
berita yang sudah ada, lalu memanggil fungsi ‘ edit()’ pada Controller Berita.
Kemudian akan dipanggil fungsi ‘update()’ untuk dilakukan cek validasi pada Model
BeritaModel. Apabila berhasil maka data akan disimpan dan akan menampilkan
halaman data berita, sedangkan jika gagal maka akan kembali ke form edit data berita.
38
15. Edit data pengumuman
Gambar 5.30 Sequence diagram edit data pengumuman

Gambar 5.30 merupakan sequence diagram dari edit data pengumuman. Proses
ini diawali dengan form edit data dimana admin mengubah atau melengkapi salah satu
data pengumuman yang sudah ada, lalu memanggil fungsi ‘ edit()’ pada Controller
Pengumuman. Kemudian akan dipanggil fungsi ‘ update()’ untuk dilakukan cek
validasi pada Model PengumumanModel. Apabila berhasil maka data akan disimpan
dan akan menampilkan halaman data pengumuman, sedangkan jika gagal maka akan
kembali ke form edit data pengumuman.
16. Edit data bahan ajar
Gambar 5.31 Sequence diagram edit data bahan ajar
39
Gambar 5.31 merupakan sequence diagram dari edit data bahan ajar. Proses ini
bahan ajar yang sudah ada, lalu memanggil fungsi ‘ edit()’ pada Controller
BahanAjar. Kemudian akan dipanggil fungsi ‘update()’ untuk dilakukan cek validasi
pada Model BahanAjarModel. Apabila berhasil maka data akan disimpan dan akan
menampilkan halaman data bahan ajar, sedangkan jika gagal maka akan kembali ke
form edit data bahan ajar.
17. Edit data ekstrakurikuler
Gambar 5.32 Sequence diagram edit data ekstrakurikuler

Gambar 5.32 merupakan sequence diagram dari edit data ekstrakurikuler. Proses
ini diawali dengan form edit data dimana admin mengubah atau melengkapi salah satu
data ekstrakurikuler yang sudah ada, lalu memanggil fungsi ‘edit()’ pada Controller
Ekstrakurikuler. Kemudian akan dipanggil fungsi ‘update()’ untuk dilakukan cek
validasi pada Model EkstrakurikulerModel. Apabila berhasil maka data akan disimpan
dan akan menampilkan halaman data ekstrakurikuler, sedangkan jika gagal maka akan
kembali ke form edit data ekstrakurikuler.
40
18. Edit profile admin
Gambar 5.33 Sequence diagram edit profile admin

Gambar 5.33 merupakan sequence diagram dari edit profile admin. Proses ini
diawali dengan form edit data dimana admin mengubah atau melengkapi profilenya,
lalu memanggil fungsi ‘updateProfile()’ pada Controller Users. Kemudian akan
dipanggil fungsi ‘save()’ untuk dilakukan cek validasi pada Model UsersModel.
Apabila berhasil maka data akan disimpan dan akan menampilkan halaman profile
admin, sedangkan jika gagal maka akan kembali ke form edit profile admin.
19. Ubah password admin
Gambar 5.34 Sequence diagram ubah password admin

Gambar 5.34 merupakan sequence diagram dari ubah password admin. Proses
ini diawali dengan form ubah password dimana admin mengubah passwordnya, lalu
41
memanggil fungsi ‘ubahPassword()’ pada Controller Users. Kemudian akan dipanggil
fungsi ‘updatePassword()’ untuk dilakukan cek validasi pada Model UsersModel.
Apabila berhasil maka data akan disimpan dan akan menampilkan halaman profile
admin, sedangkan jika gagal maka akan kembali ke form ubah password.
20. Hapus data guru
Gambar 5.35 Sequence diagram hapus data guru

Gambar 5.35 merupakan sequence diagram dari hapus data guru. Proses ini
diawali dengan tombol menu hapus data dimana admin menghapus salah satu data guru
yang sudah ada, lalu akan muncul pop-up sebagai konfirmasi penghapusan data. Jika
admin mengonfirmasi, maka akan dipanggil fungsi ‘ delete()’ untuk dilakukan
penghapusan salah satu data guru pada Model GuruModel kemudian akan ditampilkan
list data guru.
21. Hapus data staff
42
Gambar 5.36 Sequence diagram hapus data staff
Gambar 5.36 merupakan sequence diagram dari hapus data staff. Proses ini
diawali dengan tombol menu hapus data dimana admin menghapus salah satu data staff
penghapusan salah satu data staff pada Model StaffModel kemudian akan ditampilkan
list data staff.
22. Hapus data foto
Gambar 5.37 Sequence diagram hapus data foto

Gambar 5.37 merupakan sequence diagram dari hapus data foto. Proses ini
diawali dengan tombol menu hapus data dimana admin menghapus salah satu data foto
43
penghapusan salah satu data foto pada Model FotoModel kemudian akan ditampilkan
list data foto.
23. Hapus data mading
Gambar 5.38 Sequence diagram hapus data mading

Gambar 5.38 merupakan sequence diagram dari hapus data mading. Proses ini
diawali dengan tombol menu hapus data dimana admin menghapus salah satu data
mading yang sudah ada, lalu akan muncul pop-up sebagai konfirmasi penghapusan
data. Jika admin mengonfirmasi, maka akan dipanggil fungsi ‘ delete()’ untuk
dilakukan penghapusan salah satu data mading pada Model MadingModel kemudian
akan ditampilkan list data mading.
24. Hapus data berita
44
Gambar 5.39 Sequence diagram hapus data berita
Gambar 5.39 merupakan sequence diagram dari hapus data berita. Proses ini
berita yang sudah ada, lalu akan muncul pop-up sebagai konfirmasi penghapusan data.
Jika admin mengonfirmasi, maka akan dipanggil fungsi ‘ delete()’ untuk dilakukan
penghapusan salah satu data berita pada Model BeritaModel kemudian akan
ditampilkan list data berita.
25. Hapus data pengumuman
Gambar 5.40 Sequence diagram hapus data pengumuman
45
Gambar 5.40 merupakan sequence diagram dari hapus data pengumuman. Proses
ini diawali dengan tombol menu hapus data dimana admin menghapus salah satu data
pengumuman yang sudah ada, lalu akan muncul pop-up sebagai konfirmasi
penghapusan data. Jika admin mengonfirmasi, maka akan dipanggil fungsi ‘ delete()’
untuk dilakukan penghapusan salah satu data pengumuman pada Model
PengumumanModel kemudian akan ditampilkan list data pengumuman.
26. Hapus data bahan ajar
Gambar 5.41 Sequence diagram hapus data bahan ajar

Gambar 5.41 merupakan sequence diagram dari hapus data bahan ajar. Proses ini
bahan ajar yang sudah ada, lalu akan muncul pop-up sebagai konfirmasi penghapusan
dilakukan penghapusan salah satu data bahan ajar pada Model BahanAjarModel
kemudian akan ditampilkan list data bahan ajar.
27. Hapus data ekstrakurikuler
46
Gambar 5.42 Sequence diagram hapus data ekstrakurikuler
Gambar 5.42 merupakan sequence diagram dari hapus data ekstrakurikuler.
Proses ini diawali dengan tombol menu hapus data dimana admin menghapus salah satu
data ekstrakurikuler yang sudah ada, lalu akan muncul pop-up sebagai konfirmasi
penghapusan data. Jika admin mengonfirmasi, maka akan dipanggil fungsi ‘ delete()’
untuk dilakukan penghapusan salah satu data ekstrakurikuler pada Model
EkstrakurikulerModel kemudian akan ditampilkan list data ekstrakurikuler.
28. Hapus data buku tamu
Gambar 5.43 Sequence diagram hapus data buku tamu
47
Gambar 5.43 merupakan sequence diagram dari hapus data buku tamu. Proses
ini diawali dengan tombol menu hapus data dimana admin menghapus salah satu data
buku tamu yang sudah ada, lalu akan muncul pop-up sebagai konfirmasi penghapusan
dilakukan penghapusan salah satu data buku tamu pada Model BukuTamuModel
kemudian akan ditampilkan list data buku tamu.
29. Logout admin
Gambar 5.44 Sequence diagram logout admin

Gambar 5.44 merupakan sequence diagram dari logout admin. Proses ini diawali
dengan tombol menu logout, jika admin menekan tombol tersebut, maka akan dipanggil
fungsi ‘logout()’ untuk dilakukan proses logout admin, kemudian akan ditampilkan
halaman homepage.
30. Melihat halaman home
48
Gambar 5.45 Sequence diagram melihat halaman home
Gambar 5.45 merupakan sequence diagram dari melihat halaman home. Proses
ini diawali dengan tombol menu home yang ada di navbar, jika pengunjung menekan
tombol tersebut, maka akan dipanggil fungsi ‘ index()’ pada Controller Home untuk
menampilkan halaman home.
31. Mengisi buku tamu
Gambar 5.46 Sequence diagram mengisi buku tamu

Gambar 5.46 merupakan sequence diagram dari mengisi buku tamu. Proses ini
diawali dengan form contact us dimana pengunjung dapat mengisi buku tamu, lalu
memanggil fungsi ‘saveTamu()’ pada Controller Home untuk dilakukan cek validasi
pada Model BukuTamuModel. Apabila berhasil maka data akan disimpan dan akan
menampilkan halaman home dengan alert berhasil, sedangkan jika gagal juga akan
menampilkan halaman home, namun dengan alert gagal.
49
32. Melihat halaman profile
Gambar 5.47 Sequence diagram melihat halaman profile

Gambar 5.47 merupakan sequence diagram dari melihat halaman profile. Proses
ini diawali dengan tombol menu profile yang ada di navbar, jika pengunjung menekan
tombol tersebut, maka akan dipanggil fungsi ‘index()’ pada Controller Profile untuk
menampilkan halaman profile.
33. Melihat halaman direktori guru
Gambar 5.48 Sequence diagram melihat halaman direktori guru

Gambar 5.48 merupakan sequence diagram dari melihat halaman direktori guru.
Proses ini diawali dengan tombol menu direktori guru yang ada di navbar, jika
pengunjung menekan tombol tersebut, maka akan dipanggil fungsi ‘ index()’ pada
Controller DirektoriGuru untuk menampilkan halaman direktori guru.
34. Melihat halaman direktori staff
50
Gambar 5.49 Sequence diagram melihat halaman direktori staff
Gambar 5.49 merupakan sequence diagram dari melihat halaman direktori staff.
Proses ini diawali dengan tombol menu direktori staff yang ada di navbar, jika
Controller DirektoriStaff untuk menampilkan halaman direktori staff.
35. Melihat halaman galeri foto
Gambar 5.50 Sequence diagram melihat halaman galeri foto

Gambar 5.50 merupakan sequence diagram dari melihat halaman galeri foto.
Proses ini diawali dengan tombol menu galeri foto yang ada di navbar, jika pengunjung
menekan tombol tersebut, maka akan dipanggil fungsi ‘ index()’ pada Controller
GaleriFoto untuk menampilkan halaman galeri foto.
51
36. Melihat halaman galeri mading
Gambar 5.51 Sequence diagram melihat halaman galeri mading

Gambar 5.51 merupakan sequence diagram dari melihat halaman galeri mading.
Proses ini diawali dengan tombol menu galeri mading yang ada di navbar, jika
Controller GaleriMading untuk menampilkan halaman galeri mading.
37. Melihat halaman informasi berita
Gambar 5.52 Sequence diagram melihat halaman informasi berita

Gambar 5.52 merupakan sequence diagram dari melihat halaman informasi
berita. Proses ini diawali dengan tombol menu informasi berita yang ada di navbar, jika
Controller InformasiBerita untuk menampilkan halaman informasi berita.
52
38. Melihat halaman informasi pengumuman
Gambar 5.53 Sequence diagram melihat halaman informasi pengumuman

pengumuman. Proses ini diawali dengan tombol menu informasi pengumuman yang
ada di navbar, jika pengunjung menekan tombol tersebut, maka akan dipanggil fungsi
‘index()’ pada Controller InformasiPengumuman untuk menampilkan halaman
informasi pengumuman.
39. Melihat halaman informasi bahan ajar
Gambar 5.54 Sequence diagram melihat halaman informasi bahan ajar

bahan ajar. Proses ini diawali dengan tombol menu informasi bahan ajar yang ada di
navbar, jika pengunjung menekan tombol tersebut, maka akan dipanggil fungsi
53
‘index()’ pada Controller InformasiBahanAjar untuk menampilkan halaman informasi
bahan ajar.
40. Melihat halaman ekstrakurikuler
Gambar 5.55 Sequence diagram melihat halaman ekstrakurikuler

Gambar 5.55 merupakan sequence diagram dari melihat halaman
ekstrakurikuler. Proses ini diawali dengan tombol menu ekstrakurikuler yang ada di
navbar, jika pengunjung menekan tombol tersebut, maka akan dipanggil fungsi
‘index()’ pada Controller Ekstrakurikuler untuk menampilkan halaman
ekstrakurikuler.
5.3.5 Entity Relationship Diagram

ERD dari sistem informasi sistem informasi company profile SMPN 1 Praya adalah
sebagai berikut:
54
Gambar 5.56 Entity relationship diagram
Gambar 5.56 merupakan Entity Relationship Diagram dari sistem informasi company
profile SMPN 1 Praya. Terdapat entitas ‘Guru’, ‘Galeri_foto’, ‘Galeri_mading’,
‘Bahan_ajar’, ‘Buku_tamu’, ‘Berita’, ‘Ekstrakurikuler’, ‘Staff’, dan ‘Pengumuman’ memiliki
relasi kepada entitas ‘Users’, yang dinamakan ‘mengelola’ karena entitas ‘Users’ akan
mengelola entitas-entitas tersebut. Entitas ‘Users’ juga memiliki relasi dengan entitas
‘Auth_login’, yaitu ‘Login’ yang digunakan oleh entitas ‘Users’ untuk masuk ke dalam
sistem.
5.4 Implementasi Sistem
Berikut merupakan implementasi tampilan (interface) dari Sistem Informasi Company
profile SMPN 1 Praya:
1. User
a. Home
55
Gambar 5.57 Implementasi halaman home
56
Gambar 5.57 merupakan implementasi dari halaman home dalam sistem
informasi company profile pada SMPN 1 Praya. Halaman ini adalah halaman yang akan
ditampilkan pertama kali saat user mengunjungi domain “https://smpn1praya.sch.id/”.
Halaman ini berisikan informasi-informasi mengenai ringkasan isi dari website yang
ada, seperti galeri foto, berita terbaru, lokasi, sambutan kepala sekolah, dan buku tamu.
b. Profile
Gambar 5.58 Implementasi halaman profile

Gambar 5.58 merupakan implementasi dari halaman profile dalam sistem
informasi company profile pada SMPN 1 Praya. Halaman ini berisikan informasi-
informasi yang mendeskripsikan tentang sekolah, seperti profile sekolah, visi, misi, dan
struktur organisasi.
57
c. Direktori Guru
Gambar 5.59 Implementasi halaman direktori guru

Gambar 5.59 merupakan implementasi dari halaman direktori guru dalam sistem
58
informasi mengenai daftar guru aktif yang berada di SMPN 1 Praya. Nama beserta
mata pelajaran yang diajarkan oleh guru tersebut akan muncul saat user mengarahkan
pointer ke salah satu foto dari daftar guru tersebut.
d. Direktori Staff
Gambar 5.60 Implementasi halaman direktori staff

Gambar 5.60 merupakan implementasi dari halaman direktori staff dalam sistem
informasi mengenai daftar staff/pegawai aktif yang berada di SMPN 1 Praya. Nama
59
beserta posisi jabatan akan muncul saat user mengarahkan pointer ke salah satu foto
dari daftar staff tersebut.
e. Galeri Foto
Gambar 5.61 Implementasi halaman galeri foto

Gambar 5.61 merupakan implementasi dari halaman galeri foto dalam sistem
informasi company profile pada SMPN 1 Praya. Halaman ini berisikan foto-foto beserta
judul atau keterangan yang berkaitan dengan SMPN 1 Praya.
60
f. Galeri Mading
Gambar 5.62 Implementasi halaman galeri mading

Gambar 5.62 merupakan implementasi dari halaman galeri mading dalam sistem
informasi company profile pada SMPN 1 Praya. Halaman ini berisikan kumpulan
mading beserta judul, penulis, dan deskripsi yang berkaitan dengan SMPN 1 Praya.
61
g. Informasi Berita
Gambar 5.63 Implementasi halaman informasi berita
62
Gambar 5.63 merupakan implementasi dari halaman informasi berita dalam
sistem informasi company profile pada SMPN 1 Praya. Halaman ini berisikan
kumpulan berita yang berkaitan dengan SMPN 1 Praya. Terdapat juga card yang
menampilkan tiga berita terbaru.
h. Informasi detail berita
Gambar 5.64 Implementasi halaman informasi detail berita
63
Gambar 5.64 merupakan implementasi dari halaman informasi detail berita
dalam sistem informasi company profile pada SMPN 1 Praya. Halaman ini berisikan
isi/detail dari berita yang sebelumnya telah dipilih pada halaman informasi berita.
Terdapat juga card yang menampilkan tiga berita terbaru.
i. Informasi pengumuman
Gambar 5.65 Implementasi halaman informasi pengumuman

Gambar 5.65 merupakan implementasi dari halaman informasi pengumuman
kumpulan pengumuman yang memuat informasi pengumuman, tanggal pengumuman,
dan file pengumuman yang dapat diunduh.
j. Informasi bahan ajar
Gambar 5.66 Implementasi halaman informasi bahan ajar
64
Gambar 5.66 merupakan implementasi dari halaman infromasi bahan ajar dalam
sistem informasi company profile pada SMPN 1 Praya. Halaman ini berisikan
kumpulan bahan ajar yang memuat informasi bahan ajar dan file bahan ajar yang dapat
diunduh.
k. Ekstrakurikuler
Gambar 5.67 Implementasi halaman ekstrakurikuler

Gambar 5.67 merupakan implementasi dari halaman ekstrakurikuler dalam
sistem informasi company profile pada SMPN 1 Praya. Halaman ini berisikan informasi
tentang kumpulan ekstrakurikuler yang terdapat di SMPN 1 Praya.
l. PPDB
Gambar 5.68 Implementasi halaman PPDB

Gambar 5.68 halaman ini adalah halaman resmi dari website PPDB Loteng yang
ditautkan dalam sistem informasi company profile pada SMPN 1 Praya untuk
memudahkan pengunjung dalam mengakses informasi mengenai PPDB di Lombok
Tengah.
65
2. Admin
a. Login
Gambar 5.69 Implementasi halaman admin login

Gambar 5.69 merupakan implementasi dari halaman login dalam sistem
informasi company profile pada SMPN 1 Praya. Halaman ini adalah halaman yang
pertama kali ditampilkan saat admin akan masuk ke dalam sistem informasi.
b. Dashboard
Gambar 5.70 Implementasi halaman admin dashboard

Gambar 5.70 merupakan implementasi dari halaman admin dashboard dalam
sistem informasi company profile pada SMPN 1 Praya. Halaman ini adalah halaman
yang pertama kali ditampilkan saat admin berhasil masuk ke dalam sistem informasi.
Halaman ini berisikan jumlah data dari masing-masing kategori yang ada di sidebar.
66
c. Direktori guru
Gambar 5.71 Implementasi halaman admin direktori guru

Gambar 5.71 merupakan implementasi dari halaman admin direktori guru dalam
tentang data guru-guru yang ada di SMPN 1 Praya dalam bentuk tabel.
d. Tambah data guru
Gambar 5.72 Implementasi halaman admin tambah data guru
67
Gambar 5.72 merupakan implementasi dari halaman admin tambah data guru
dalam sistem informasi company profile pada SMPN 1 Praya. Halaman ini digunakan
untuk menambahkan data guru ke dalam sistem yang nantinya akan muncul di halaman
admin direktori guru.
e. Edit data guru
Gambar 5.73 Implementasi halaman admin edit data guru

Gambar 5.73 merupakan implementasi dari halaman admin edit data guru dalam
sistem informasi company profile pada SMPN 1 Praya. Halaman ini digunakan untuk
mengubah atau melengkapi salah satu data guru yang sudah ada di dalam sistem.
f. Hapus data guru
Gambar 5.74 Implementasi halaman admin hapus data guru
68
Gambar 5.74 merupakan implementasi dari halaman admin hapus data guru
untuk menghapus salah satu data guru yang sudah ada di dalam sistem.
g. Direktori Staff
Gambar 5.75 Implementasi halaman admin direktori staff

Gambar 5.75 merupakan implementasi dari halaman admin direktori staff dalam
tentang data staff yang ada di SMPN 1 Praya dalam bentuk tabel.
h. Tambah data staff
Gambar 5.76 Implementasi halaman admin tambah data staff
69
Gambar 5.76 merupakan implementasi dari halaman admin tambah data staff
untuk menambahkan data staff ke dalam sistem yang nantinya akan muncul di halaman
admin direktori staff.
i. Edit data staff
Gambar 5.77 Implementasi halaman admin edit data staff

Gambar 5.77 merupakan implementasi dari halaman admin edit data staff dalam
mengubah atau melengkapi salah satu data staff yang sudah ada di dalam sistem.
j. Hapus data staff
Gambar 5.78 Implementasi halaman admin hapus data staff

Gambar 5.78 merupakan implementasi dari halaman admin hapus data staff
untuk menghapus salah satu data staff yang sudah ada di dalam sistem.
70
k. Galeri Foto
Gambar 5.79 Implementasi halaman admin galeri foto

Gambar 5.79 merupakan implementasi dari halaman admin galeri foto dalam
tentang foto-foto yang ada di SMPN 1 Praya dalam bentuk tabel.
l. Tambah data foto
71
Gambar 5.80 Implementasi halaman admin tambah data foto
Gambar 5.80 merupakan implementasi dari halaman admin tambah data foto
untuk menambahkan datafoto ke dalam sistem yang nantinya akan muncul di halaman
admin galeri foto.
m. Edit data foto
Gambar 5.81 Implementasi halaman admin edit data foto

Gambar 5.81 merupakan implementasi dari halaman admin edit data foto dalam
mengubah atau melengkapi salah satu data foto yang sudah ada di dalam sistem.
n. Hapus data foto
72
Gambar 5.82 Implementasi halaman admin hapus data foto
Gambar 5.82 merupakan implementasi dari halaman admin hapus data foto
untuk menghapus salah satu data foto yang sudah ada di dalam sistem.
o. Galeri Mading
73
Gambar 5.83 Implementasi halaman admin galeri mading
Gambar 5.83 merupakan implementasi dari halaman admin galeri mading dalam
tentang data madding-mading yang ada di SMPN 1 Praya dalam bentuk tabel.
p. Tambah data mading
74
Gambar 5.84 Implementasi halaman admin tambah data mading
Gambar 5.84 merupakan implementasi dari halaman admin tambah data mading
untuk menambahkan data mading ke dalam sistem yang nantinya akan muncul di
halaman admin galeri mading.
q. Edit data mading
Gambar 5.85 Implementasi halaman admin edit data mading

Gambar 5.85 merupakan implementasi dari halaman admin edit data mading
untuk mengubah atau melengkapi data salah satu mading yang sudah ada di dalam
sistem.
75
r. Hapus data mading
Gambar 5.86 Implementasi halaman admin hapus data mading

Gambar 5.86 merupakan implementasi dari halaman admin hapus data mading
untuk menghapus data salah satu mading yang sudah ada di dalam sistem.
s. Informasi Berita
Gambar 5.87 Implementasi halaman admin informasi berita

Gambar 5.87 merupakan implementasi dari halaman admin informasi berita
informasi tentang kumpulan data berita yang ada di SMPN 1 Praya dalam bentuk tabel.
76
t. Tambah data informasi berita
Gambar 5.88 Implementasi halaman admin tambah data informasi berita

Gambar 5.88 merupakan implementasi dari halaman admin tambah data berita
untuk menambahkan data berita ke dalam sistem yang nantinya akan muncul di
halaman admin informasi berita.
u. Edit data informasi berita
Gambar 5.89 Implementasi halaman admin edit data informasi berita
77
Gambar 5.89 merupakan implementasi dari halaman admin edit data informasi
berita dalam sistem informasi company profile pada SMPN 1 Praya. Halaman ini
digunakan untuk mengubah atau melengkapi salah satu data berita yang sudah ada di
dalam sistem.
v. Hapus data informasi berita
Gambar 5.90 Implementasi halaman admin hapus data informasi berita

Gambar 5.90 merupakan implementasi dari halaman admin hapus data informasi
berita dalam sistem informasi company profile pada SMPN 1 Praya. Halaman ini
digunakan untuk menghapus data salah satu berita yang sudah ada di dalam sistem.
w. Informasi pengumuman
Gambar 5.91 Implementasi halaman admin informasi pengumuman

Gambar 5.91 merupakan implementasi dari halaman admin informasi
pengumuman dalam sistem informasi company profile pada SMPN 1 Praya. Halaman
ini berisikan informasi tentang kumpulan data pengumuman yang ada di SMPN 1 Praya
dalam bentuk tabel.
78
x. Tambah data informasi pengumuman
Gambar 5.92 Implementasi halaman admin tambah data informasi pengumuman

Gambar 5.92 merupakan implementasi dari halaman admin tambah data
ini digunakan untuk menambahkan data pengumuman ke dalam sistem yang nantinya
akan muncul di halaman admin informasi pengumuman.
y. Edit data informasi pengumuman
Gambar 5.93 Implementasi halaman admin edit data informasi pengumuman
79
ini digunakan untuk mengubah atau melengkapi data salah satu pengumuman yang
sudah ada di dalam sistem.
z. Hapus data informasi pengumuman
Gambar 5.94 Implementasi halaman admin hapus data informasi pengumuman

ini digunakan untuk menghapus data salah satu pengumuman yang sudah ada di dalam
sistem.
aa. Informasi bahan ajar
Gambar 5.95 Implementasi halaman admin informasi bahan ajar

Gambar 5.95 merupakan implementasi dari halaman admin informasi bahan ajar
80
informasi tentang kumpulan data bahan ajar yang ada di SMPN 1 Praya dalam bentuk
tabel.
bb. Tambah data informasi bahan ajar
Gambar 5.96 Implementasi halaman admin tambah data informasi bahan ajar
Gambar 5.96 merupakan implementasi dari halaman admin tambah data bahan
ajar dalam sistem informasi company profile pada SMPN 1 Praya. Halaman ini
digunakan untuk menambahkan data bahan ajar ke dalam sistem yang nantinya akan
muncul di halaman admin informasi bahan ajar.
cc. Edit data informasi bahan ajar
Gambar 5.97 Implementasi halaman admin edit data informasi bahan ajar
81
bahan ajar dalam sistem informasi company profile pada SMPN 1 Praya. Halaman ini
digunakan untuk mengubah atau melengkapi salah satu data bahan ajar yang sudah ada
di dalam sistem.
dd. Hapus data informasi bahan ajar
Gambar 5.98 Implementasi halaman admin hapus data informasi bahan ajar
bahan ajar dalam sistem informasi company profile pada SMPN 1 Praya. Halaman ini
digunakan untuk menghapus data salah satu bahan ajar yang sudah ada di dalam sistem.
ee. Ekstrakurikuler
Gambar 5.99 Implementasi halaman admin ekstrakurikuler

Gambar 5.99 merupakan implementasi dari halaman admin ekstrakurikuler
informasi tentang kumpulan data ekstrakurikuler yang ada di SMPN 1 Praya dalam
bentuk tabel.
82
ff. Tambah data ekstrakurikuler
Gambar 5.100 Implementasi halaman admin tambah data ekstrakurikuler

Gambar 5.100 merupakan implementasi dari halaman admin tambah data
ekstrakurikuler dalam sistem informasi company profile pada SMPN 1 Praya. Halaman
ini digunakan untuk menambahkan data ekstrakurikuler ke dalam sistem yang nantinya
akan muncul di halaman admin ekstrakurikuler.
gg. Edit data ekstrakurikuler
83
Gambar 5.101 Implementasi halaman admin edit data ekstrakurikuler
Gambar 5.101 merupakan implementasi dari halaman admin edit data
ini digunakan untuk mengubah atau melengkapi salah satu data ekstrakurikuler yang
sudah ada di dalam sistem.
hh. Hapus data ekstrakurikuler
Gambar 5.102 Implementasi halaman admin hapus data ekstrakurikuler

Gambar 5.102 merupakan implementasi dari halaman admin hapus data
ini digunakan untuk menghapus data salah satu ekstrakurikuler yang sudah ada di
dalam sistem.
ii. Buku Tamu
Gambar 5.103 Implementasi halaman admin buku tamu

Gambar 5.103 merupakan implementasi dari halaman admin buku tamu dalam
tentang kumpulan data tamu yang ada di SMPN 1 Praya dalam bentuk tabel.
84
jj. Hapus data buku tamu
Gambar 5.104 Implementasi halaman admin hapus data buku tamu

Gambar 5.104 merupakan implementasi dari halaman admin hapus data buku
tamu dalam sistem informasi company profile pada SMPN 1 Praya. Halaman ini
digunakan untuk menghapus data salah satu tamu yang sudah ada di dalam sistem.
kk. Profile admin
Gambar 5.105 Implementasi halaman profile admin

Gambar 5.105 merupakan implementasi dari halaman profile admin dalam
tentang profile admin yang sedang login saat ini.
85
ll. Edit profile admin
Gambar 5.106 Implementasi halaman edit profile admin

Gambar 5.106 merupakan implementasi dari halaman edit profile admin dalam
mengubah atau melengkapi profile admin yang sudah ada di dalam sistem.
mm. Ubah password admin
Gambar 5.107 Implementasi halaman ubah password admin

Gambar 5.107 merupakan implementasi dari halaman ubah password admin
untuk mengubah password yang dimiliki oleh admin yang sudah ada di dalam sistem.
86
5.5 Testing
Testing sistem informasi company profile pada SMPN 1 Praya menggunakan metode
user acceptance testing. Metode user acceptance testing menggunakan black box testing dan
kuesioner dalam pengujiannya. Berikut hasil dari testing yang telah dilakukan:
5.5.1 Black Box Testing
Black box testing atau dikenal juga dengan Behavioral testing adalah pengujian yang
dilakukan untuk mengamati hasil input dan output dari sistem tanpa mengetahui struktur kode
dari sistem tersebut. Pengujian ini dilakukan di akhir pembuatan sistem untuk mengetahui
apakah sistem dapat berfungsi dengan baik.
1. Functional Testing
Functional testing digunakan untuk melakukan pengujian terhadap fungsi atau
fitur yang spesifik dari sebuah sistem. Pada sistem informasi company profile SMPN 1
Praya telah dilakukan functional testing pada semua fitur-fiturnya dengan
menggunakan berbagai data masukan, baik yang diterima maupun ditolak oleh sistem.
Sehingga didapat kesimpulan bahwa fitur-fitur yang ada pada sistem informasi
company profile pada SMPN 1 Praya telah berjalan dengan baik.
2. Non-functional Testing
Non-functional testing digunakan untuk melakukan pengujian terhadap aspek-
aspek tambahan nonfungsional. Pada sistem informasi company profile SMPN 1 Praya
telah dilakukan non-functional testing, seperti pengujian apakah sistem dapat berjalan
dengan baik ketika diakses dengan sistem operasi ataupun ukuran layar yang berbeda-
beda, sehingga didapati hasil bahwa aspek-aspek tersebut berjalan dengan baik.
5.5.2 Kuesioner
Setelah dilakukan pengimplementasian sistem, selanjutnya dilakukan pengujian
terhadap sistem yang sudah dibuat. Pengujian ini menggunakan kuesioner yang dilakukan
dengan cara mencari responden yaitu pengguna. Pengguna yang dimaksud disini adalah
mereka yang membutuhkan informasi tentang SMPN 1 Praya. Responden pengujian ini juga
mencakup pihak SMPN 1 Praya untuk memastikan apakah informasi yang terdapat di
website ini sudah sesuai dengan kebutuhan instansi. Uji coba sistem dilakukan dengan
menjawab pertanyaan dari kuesioner yang diberikan. Terdapat beberapa parameter pengujian
yang digunakan pada kuesioner ini diantaranya adalah:
1. Apakah tampilan interface website Sistem Informasi Company profile SMPN 1 Praya
menarik dan mudah dimengerti?
87
2. Apakah fitur-fitur yang ada sudah lengkap dan berjalan sesuai fungsionalitasnya?
3. Apakah user dapat dengan mudah menemukan informasi yang dicari pada website ini?
4. Apakah website ini mudah dioperasikan?
5. Apakah penyajian informasi dalam website ini sudah memenuhi kebutuhan user?
Kemudian responden akan diberikan pilihan jawaban dari pertanyaan-pertanyaan di
atas, yaitu:
1. SS : Sangat Setuju
2. S : Setuju
3. C : Cukup
4. TS : Tidak Setuju
5. STS : Sangat Tidak Setuju
Hasil rekapitulasi jawaban responden dihitung dari jawaban berdasarkan pengisian
kuesioner dari masing-masing pertanyaan. Berikut merupakan grafik hasil kuesioner hasil
pengujian dari 40 responden:
Hasil Kuesioner Pengujian

30
25
20
15
10
0
Pertanyaan 1 Pertanyaan 2 Pertanyaan 3 Pertanyaan 4 Pertanyaan 5
STS TS C S SS
Gambar 5.108 Hasil kuesioner

Gambar 5.108 merupakan data yang telah divisualisasikan dalam bentuk grafik
berdasarkan kuesioner yang telah diberikan. Dari grafik tersebut, dapat dilihat bahwa
responden dominan menjawab pertanyaan dengan pilihan setuju dan sangat setuju, hanya
sedikit responden yang menjawab pertanyaan dengan pilihan cukup. Sehingga dapat
disimpulkan bahwa berdasarkan hasil survey tersebut, responden setuju atau menerima sistem
informasi company profile SMPN 1 Praya yang telah dibangun.
88
BAB VI
KESIMPULAN DAN SARAN
6.1 Kesimpulan
Berdasarkan hasil Praktek Kerja Lapangan di SMPN 1 Praya didapatkan kesimpulan
sebagai berikut:
1. Sistem informasi company profile SMPN 1 Praya dapat digunakan untuk mengetahui
informasi terbaru mengenai sekolah serta mempromosikan sekolah kepada masyarakat
luas. Fitur-fitur yang terdapat pada sistem informasi company profile ini, antara lain
informasi umum sekolah, guru, staff, galeri foto, galeri mading, ekstrakurikuler, kontak
yang dapat dihubungi serta informasi-informasi terkini seperti berita, bahan ajar dan
pengumuman.
2. Sistem informasi company profile SMPN 1 Praya memiliki dua target user atau
pengguna, yaitu pengunjung dan juga administrator. Kepuasan responden terhadap
sistem informasi yang telah dibuat dapat dilihat dari jawaban atas pertanyaan yang ada
di kuesioner yang telah diberikan dan didapati hasil bahwa responden setuju dengan
sistem informasi yang telah dibangun.
6.2 Saran
Berdasarkan sistem informasi company profile yang telah dibuat, penulis menyarankan
beberapa hal agar sistem ini dapat lebih baik lagi kedepannya sebagai berikut:
1. Tetap mengelola dan memperhatikan website tersebut agar dapat terus menjadi sumber
informasi resmi dari SMPN 1 Praya.
2. Diharapkan kedepannya website tersebut dapat dikembangkan, baik itu fitur maupun
tampilannya agar dapat menyesuaikan dengan perkembangan di dunia teknologi.
3. Memantau dan meningkatkan keterampilan admin sekolah dalam memanajemen konten
dari website tersebut dengan cara memberikan pelatihan manajemen website atau
konsultasi dan diskusi secara berkala.
89
DAFTAR PUSTAKA
[1] H. A. Rusdiana and M. Irfan, “Sistem Informasi Manajemen,” Sist. Inf. Manaj., pp. 5–
387, 2014.
[2] R. Liem, Erandaru, and R. P. Sutanto, “Perancangan Buku Company Profile Sebagai
Media Promosi Vegas Conceptual Show,” J. DKV Adiwarna, vol. 2, no. 7, pp. 1–11,
2019.
[3] Rudika Harminingtyas, SE, MM, “Analysis Service Of Website As Promotionmedia,
Transactions Media And Informationmedia And Its Effect On Brand Image At Hotel
Ciputra In The Semarang City,” Jurnal Stie Semarang, Vol 6, No 3, Edisi Oktober
2014 (Issn : 2252 – 7826).
[4] Fitria Nur Hasanah dan Rahmania Sri Untari, “Buku Ajar Basis Data.,” pp. 1–94,
2019.
[5] Haviluddin, “Memahami Penggunaan UML (Unified Modelling Language),”
Memahami Pengguna. UML (Unified Model. Lang., vol. 6, no. 1, pp. 1–15, 2011,
[Online]. Available: https://informatikamulawarman.files.wordpress.com/2011/10/01-
jurnal-informatika-mulawarman-feb-2011.pdf.
[6] S. Dharwiyanti and R. S. Wahono, “Pengantar Unified Modeling Language (UML),”
IlmuKomputer.com, pp. 1–13, 2003, [Online]. Available:
http://www.unej.ac.id/pdf/yanti-uml.pdf.
[7] Eka Wida Fridayanthie dan Tias Mahdiati, “Rancang Bangun Sistem Informasi
Permintaan Atk Berbasis Intranet (Studi Kasus: Kejaksaan Negeri Rangkasbitung),”
Jurnal Khatulistiwa Informatika, Vol. IV, No. 2 Desember 2016.
[8] L. Afuan, “Pemanfaatan Framework Codeigniter dalam Pengembangan Sistem
Informasi Pendataan Laporan Kerja Praktek Mahasiswa Program Studi Teknik
Informatika Unsoed,” Juita, vol. I, no. 2, pp. 39–44, 2010, [Online]. Available:
http://jurnalnasional.ump.ac.id/index.php/JUITA/article/view/413.
[9] Gregorius Agung, “Pemrograman Bootstrap untuk Pemula,” Jubilee Enterprise, ISBN:
978-602-02-9540-4, PT Elex Media Komputindo, Jakarta, 2016
[10] H. Riyadli, A. Arliyana, and F. E. Saputra, “Rancang Bangun Sistem Informasi
Keuangan Berbasis WEB,” J. Sains Komput. dan Teknol. Inf., vol. 3, no. 1, pp. 98–
103, 2020, doi: 10.33084/jsakti.v3i1.1770.
90
LAMPIRAN
Pengerjaan Sistem Informasi Company Profile Di SMPN 1 Praya
91

Laporan PKL Teknik Informatika

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan PKL Teknik Informatika

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTEK KERJA LAPANGAN

SISTEM INFORMASI COMPANY PROFILE SMPN 1 PRAYA

M. Qodly Aldy Arfiady

PROGRAM STUDI TEKNIK INFORMATIKA

M. Qodly Aldy Arfiady

Telah disetujui oleh:

Dr. Eng. I GP Wirarama W.W., S.T., M.T.

M. Zaenal Mustopa, S.Pd

Program Studi Teknik Informatika FT-UNRAM

Andy Hidayat Jatmika, ST., M. Kom.

Gambar 2.1 Struktur organisasi SMPN 1 Praya

Simbol Nama Keterangan

Merupakan properti yang

Mewakili tindakan atau fungsi yang dapat

Mewakili hubungan sejenis di antara

Mewakili hubungan antara beberapa

Merupakan hubungan sebagian (a part of)

Mewakili hubungan fisik antara beberapa

2.10.2 Use Case Diagram

Simbol Nama Keterangan

Use Case Bagian utama dari fungsionalitas sistem.

Berisi nama dari sistem yang diletakkan

Association Menghubungkan actor dengan use case.

Include Memasukkan satu use case dalam use

Memperluas use case untuk memasukkan

Mewakili use case khusus untuk use case

2.10.3 Activity Diagram

Simbol Nama Keterangan

Perilaku yang sederhana dan tidak dapat

Digunakan untuk mewakili sebuah objek

Control Flow Menunjukkan urutan eksekusi.

Menunjukkan aliran suatu objek dari satu

Menggambarkan awal dari serangkaian

Digunakan untuk menghentikan semua

Digunakan untuk menghentikan aliran

Digunakan untuk mewakili kondisi

Digunakan untuk menyatukan kembali

Digunakan untuk membagi perilaku

Swimlane memisahkan organisasi bisnis

2.10.4 Sequence Diagram

Simbol Nama Keterangan

Adalah orang atau sistem yang

Berpartisipasi dalam suatu urutan dengan

Menggambarkan tampilan program

Menunjukkan kehidupan suatu objek

Menunjukkan kapan suatu objek

Menyampaikan informasi dari satu objek

Merupakan tes yang harus dipenuhi untuk

X ditempatkan di ujung lifeline objek

Menunjukkan konteks sequence diagram.

2.11 Entity Relationship Diagram

Simbol Nama Keterangan

Suatu yang nyata atau abstrak

Hubungan yang terjadi antara

Ciri umum semua atau

Garis penghubung atribut

2.12 Framework Codeigniter

Gambar 5.1 Flowchart analisis kebutuhan

Gambar 5.2 Metode extreme programming

Gambar 5.4 Use case diagram admin

Gambar 5.6 Activity diagram proses login admin

Gambar 5.7 Activity diagram proses tambah data

Gambar 5.9 Activity diagram proses cari data

5. Proses hapus data