Lembar Pengesahan Program Studi Teknik Informatika

Membangun Website Sekolah Sebagai Media Promosi dan Informasi Menggunakan

PHP dan MYSQLI
Di PG-TKK Sang Timur Maumere

oleh :
Ismail
/ 021130017
Fransiska Iriani Ongkio Buol / 021130012

disetujui dan disahkan sebagai

Laporan Kerja Praktek

Maumere,
Ketua Program Studi Teknik Informatika UNIPA

Agustinus L. Suban, S.Kom., MT

NIDN: 0823048001

iv

Lembar Pengesahan
Membangun Website Sekolah Sebagai Media Promosi dan Informasi Menggunakan
PHP dan MYSQLI
Di PG-TKK Sang Timur Maumere

oleh :
Ismail
/ 021130017
Fransiska Iriani Ongkio Buol / 021130012

disetujui dan disahkan sebagai

Laporan Kerja Praktek

Maumere,
Jabatan Penanggung jawab di tempat kerja

Nama Penanggung Jawab di tempat kerja

<Nomor Pegawai>

Abstraksi

Salah satu media promosi dan informasi yang paling populer saat ini adalah website. Website
merupakan media yang mudah digunakan dan dapat menjangkau masyarakat luas dengan
berbagai informasi. Kerja praktek dilaksanakan di sekolah PG-TKK Sang Timur mulai
tanggal 11 Maret 2016 sampai dengan tanggal 2016. PG-TKK Sang Timur adalah sekolah
awal bagi anak di bawah umur enam tahun. Tiap tahun pada bulan April, terutama di tahun
2016, sekolah yang diasuh oleh Yayasan Susteran Sang Timur ini membuka pendaftaran bagi
murid baru dengan menyebarkan brosur, menyebarkam pengumuman di radio dan gereja
serta memasang spanduk di depan sekolah. Penyebaran brosur dan pemasangan spanduk ini
merupakan cara yang kurang efektif dan efisien. Kerja praktek yang dilakukan di sekolah ini
adalah untuk memberikan alternatif sistem bagi sekolah dalam rangka mempromosikan
sekolah mereka. Di dalam sistem tersebut terdapat menu-menu utama sebagai halaman
informasi sekolah dan terdapat halaman sebagai tempat bagi pembaca untuk menyampaikan
pendapat. Metodologi yang digunakan untuk menyelesaikan sistem ini adalah metode spiral
yang dimulai dari tahap pertama analisa kebutuhan yaitu mencari apa yang dibutuhkan oleh
sistem sehingga dapat diterapkan pada perangkat lunak. Tahap kedua perancangan sistem
yaitu merancang kerangka sebuah sistem perangkat lunak. Tahap ketiga implementasi yaitu
menerapkan semua rancangan sistem perangkat lunak ke dalam bahasa pemograman. Tahap
keempat pengujian program yaitu melalukan pengujian setelah sistem perangkat lunak selesai
dibuat. Tahap kelima penerapan program dan pemeliharaan. Sistem yang dibuat merupakan
sistem berbasis website yang bisa memberikan alternatif dalam mempromosikan sekolah
secara luas dengan menyajikan informasi secara lengkap, detail dan jelas sehingga
meningkatkan mutu sekolah dan jumlah siswa.
Kata kunci : Website, Promosi, Sekolah.

Kata Pengantar
Puji dan syukur kami sebagai penulis panjatkan kehadirat Tuhan Yang Maha Esa karena
atas berkat dan Karunia-Nya, sehingga kami mampu menyelesaikan laporan kerja praktek ini
dengan judul Membangun Website Sebagai Media Promosi dan Informasi Menggunakan
PHP dan MYSQLI di PG-TKK Sang Timur. Kerja praktek merupakan salah satu mata
kuliah semester VI dan merupakan salah satu syarat sebelum penulisan proposal.
Proses penyusunan laporan ini melibatkan bantuan dari berbagai pihak. Oleh karena itu,
tak lupa penulis ucapkan terima kasih kepada :
1. Bapak Ir. Angelinus Vincentius, M. Si selaku Rektor Universitas Nusa Nipa Maumere.
2. Bapak Harry Janto, ST., MEM selaku Dekan Fakultas Teknik Universitas Nusa Nipa
Maumere.
3. Suster Maria Clarina, PIJ, selaku Kepala Sekolah PG-TKK Sang Timur beserta stafstaf pengajar yang telah memberikan ijin bagi kami untuk melakukan kerja praktek
dan pengambilan data.
4. Ibu Maria Margaretha Alaqok, selaku Ibu bagian Tata Usaha Sekolah PG-TKK Sang
Timur yang bersedia mendampingi kami melakukan kerja praktek dan melengkapi
data-data yang kami butuhkan.
5. Bapak Agustinus L. Suban, S.Kom., MT selaku Ketua Program Studi Informatika
Fakultas Teknik Universitas Nusa Nipa Maumere.
6. Ibu Margaretha P.N. Rozady, ST., MT selaku Dosen Pembimbing yang dengan penuh
kesabaran telah meluangkan waktu, tenaga, dan pikiran untuk memberikan masukan
dan saran sehingga penulis dapat menyelesaikan laporan kerja praktek ini dengan
baik.
7. Semua pihak yang dengan caranya masing-masing telah memberikan dukungan dalam
bentuk apapun dalam penyelesaian laporan kerja praktek ini.
Akhir kata kami berharap semoga laporan kerja praktek ini bias bermanfaat bagi semua pihak
yang membutuhkan dan semoga Tuhan Yang Maha Esa selalu senantiasa melimpahkan berkat
dan rahmat-Nya kepada kita semua.

Maumere, 26 September 2016

Penulis

DAFTAR ISI
Bab I...........................................................................................................................................1
Pendahuluan...............................................................................................................................1
I.1

Latar Belakang.............................................................................................................1

I.2

Lingkup........................................................................................................................3

I.3

Tujuan..........................................................................................................................3

I.4

Metode Penelitian........................................................................................................3

I.4.1

Metode Pengumpulan Data..................................................................................3

I.4.2

Metode Perancangan Perangkat Lunak................................................................4

I.5

Sistematika Penulisan..................................................................................................4

Bab II..........................................................................................................................................6
Organisasi PG-TKK Sang Timur...............................................................................................6
II.1 Struktur Organisasi..........................................................................................................6
II.2 Lingkup Kerja..................................................................................................................8
II.3 Deskripsi Pekerjaan.........................................................................................................8
II.4 Jadwal Kerja....................................................................................................................8
III.3 Jadwal Kerja.................................................................................................................10
Bab III......................................................................................................................................11
Teori Penunjang Kerja Praktek.................................................................................................11
III.1 Teori Penunjang KP......................................................................................................11
III.1.1 Pengertian Internet................................................................................................11

III.1.2 Pengertian Website................................................................................................11

III.1.3 Pengertian Web Server..........................................................................................12
III.1.4 Pengertian Domain dan Hosting...........................................................................12
III.1.5 Entity Relationship Diagram (ERD).....................................................................13
III.1.6 Data Flow Diagram (DFD)...................................................................................16
III.2 Kakas Pembangunan....................................................................................................18
III.2.1 PHP.......................................................................................................................18
III.2.2 Bootstrap...............................................................................................................18
III.2.3 MySQLi.................................................................................................................19
III.2.4 JQuery...................................................................................................................19
III.2.5 Web Editor.............................................................................................................20
III.2.6 Web Browser.........................................................................................................20
BAB IV....................................................................................................................................22
PELAKSANAAN KERJA PRAKTEK....................................................................................22
IV.1 Gambaran Umum.........................................................................................................22
IV.1.1 Visi dan Misi..........................................................................................................23
IV.1.2 Tujuan....................................................................................................................23
IV.2 Gambaran Tentang System Yang Sedang Berjalan......................................................23
IV.3 Gambaran Mengenai System Baru...............................................................................24
IV.3.1 Diagram Konteks Sistem Baru..............................................................................24
IV.3.2 Diagram Berjenjang...............................................................................................25
IV.3.3 Diagram Level 0....................................................................................................26
IV.3.4 Diagaram Level 1 Proses 2 (memasukkan data)...................................................27
IV.3.5 Diagram Level 1 Proses 3 (mengolah data)..........................................................28
IV.3.6 Diagram Level 1 Proses 4 (menampilkan data)...................................................29
IV.3.7 Entity Relationship Diagram (ERD).....................................................................30
IV.3.8 Desain Database....................................................................................................31

IV.3.9 Persiapan Implementasi.........................................................................................33

IV.3.10 Implementasi.......................................................................................................52
Lampiran A. Log Activity........................................................................................................53

Bab I
Pendahuluan
1

Latar Belakang
Keberadaan internet menjadi sarana untuk mendapatkan dan menyebarkan
informasi dengan cepat. Internet memberikan kemudahan bagi manusia baik itu dalam
urusan individu maupun lembaga

dalam bidang pendidikan, pemerintahan, dan

komersial. Dengan menggunakan jaringan ini, sebuah instansi dalam berbagai bidang
dapat melakukan penyebaran informasi kepada masyarakat luas. Secara online kita dapat
menggunakan website sebagai media untuk

memperkenalkan dan menyebarkan

informasi yang dapat diakses oleh masyarakat luas.

Dengan menggunakan fungsi website tersebut maka lembaga pendidikan dapat
menggunakan website sebagai media untuk memberikan informasi serta memperkenalkan
secara lengkap, detail dan jelas. Melalui cara inilah maka lembaga pendidikan tersebut
dapat dikenal sehingga meningkatkan mutu dari lembaga pendidikan tersebut.
PG-TKK Sang Timur adalah lembaga pendidikan bagi anak-anak usia dini.
Sekolah yang diasuh oleh Yayasan Susteran Sang Timur, didirikan pada tanggal 11
Agustus 2003 yang berlokasi di Jalan Wairklau No. 80 Kelurahan Kota Uneng Kecamatan
Alok, merupakan sekolah yang didirikan untuk menjawab kebutuhan pendidikan
masyarakat Maumere secara khusus untuk menampung anak-anak usia dini di sekitar
daerah wairklau dan sekitarnya.
Sekolah ini secara resmi mendapat izin operasionalnya pada tahun 2007 dari Dinas
PPO dan mendapatkan akreditasi A pada tahun 2008. Sekolah multikultural ini juga aktif
di berbagai kegiatan di luar dan sudah mendapat berbagai piagam penghargaan, seiring
dengan misi sekolah untuk membawa anak-anak kepada Tuhan walau berbeda agama.
Tiap tahun PG-TKK Sang Timur membuka pendaftaran bagi anak-anak usia dini untuk
dibimbing di sekolah tersebut, dengan menggunakan cara promosi yaitu menyebarkan
informasi menggunakan brosur, memasang spanduk di depan sekolah, serta memberikan
pengumuman melalui radio dan gereja.
Cara ini memang membantu mereka dalam menyampaikan informasi dan
memperkenalkan sekolah tersebut, namun seiring kemajuan teknologi internet cara ini
menjadi kurang efektif dan efisien, dikarenakan makin banyak orang yang mengakses
informasi melalui internet dibandingkan mendengarkan pengumuman atau membaca pada
spanduk dan brosur. Sehingga diusulkan salah satu alternatif yang bisa membantu, yaitu
1

membangun sebuah website sebagai media promosi sekaligus media informasi bagi
masyarakat luas.
Berdasarkan latar belakang di atas, maka penulis menyusun laporan kerja praktek
ini dengan judul Membangun Website Sekolah Sebagai Media Promosi dan Informasi
Menggunakan PHP dan MYSQLI di PG-TKK Sang Timur.

Lingkup
Berdasarkan lingkup materi kerja praktek yang dilaksanakan di sekolah PG-TKK
Sang Timur dalam membangun website sekolah sebagai media promosi dan informasi
menggunakan PHP dan MYSQLI, ruang lingkup pembahasan dibatasi pada membuat
interface halaman website yang terdiri dari halaman home, admin, artikel, profil, guru,
galeri, dan kontak. Dengan submenu yang terdiri dari halaman kata sambutan, visi dan
misi, sejarah, struktur organisasi, dan halaman kurikulum.

Tujuan
Tujuan pelaksanaan kerja praktek di PG-TKK Sang Timur adalah membangun
sebuah media informasi dan promosi, dalam hal ini website untuk menyebarkan
informasi dan memperkenalkan sekolah PG-TKK Sang Timur kepada masyarakat luas
sehingga masyarakat dapat memperoleh informasi yang diinginkan dengan lengkap, detail
dan jelas dan dapat berguna untuk meningkatkan mutu sekolah dan siswa yang mendaftar.

4
1

Metode Penelitian
Metode Pengumpulan Data
Metode pengumpulan data dan informasi dalam penyusunan laporan kerja praktek ini,
yaitu melalui :
1. Wawancara, yaitu mengumpulkan data dan informasi secara langsung dengan cara
mewawancarai narasumber yang terkait. Yang menjadi narasumber adalah ibu
bagian tata usaha dan ibu wakil kepala sekolah bagian kurikulum PG-TKK Sang
Timur.
2. Studi literatur, yaitu mengumpulkan data dan informasi dari sumber bacaan,
seperti buku, jurnal yang berkaitan dengan laporan kerja praktek. Dalam hal ini,
studi literatur yang diambil adalah dari contoh laporan kerja praktek ITB, dan
jurnal teknik informatika.
3. Observasi di PG-TKK Sang Timur, yaitu mengumpulkan semua data-data yang
dibutuhkan untuk membangun website Sekolah. Data-data yang dikumpulkan
dalam hal ini adalah data-data mengenai sejarah sekolah, struktur organisasi
sekolah, tenaga mengajar, dan kegiatan murid bersama guru dan orangtua.

Metode Perancangan Perangkat Lunak

Metode perancangan perangkat lunak yang digunakan untuk membangun Website

Sekolah PG-TKK Sang Timur Maumere adalah menggunakan model Spiral. Model Spiral
adalah suatu model perancangan perangkat lunak yang dilakukan secara bertahap dan
dinamis, sehingga memungkinkan pengembangan versi perangkat lunak yang lebih lengkap
secara bertahap. Metode Spiral memiliki tahap-tahap yaitu :
1. Analisa kebutuhan, yaitu mencari apa yang dibutuhkan oleh sistem. Dari kebutuhan
sistem tersebut akan diterapkan ke dalam perangkat lunak tersebut.
2. Perancangan sistem, yaitu merancang kerangka sistem.
3. Penulisan kode program, yaitu mengimplementasikan rancangan ke dalam bahasa
pemograman tertentu.
4. Pengujian program, yaitu melakukan pengujian setelah program selesai dibuat.
5. Penerapan program dan pemeliharaan.
5

Sistematika Penulisan
Penyusunan laporan kerja praktek ini diuraikan dalam beberapa bab dan sub bab yang
tersusun sebagai berikut :
Bab I Pendahuluan
Bab ini membahas mengenai latar belakang masalah, lingkup kerja praktek, tujuan kerja
praktek, sistematika laporan, dan metode perancangan perangkat lunak.
Bab II Organisasi dan Lingkungan Kerja Praktek
Bab ini membahas mengenai struktur organisasi, lingkup pekerjaan, deskripsi pekerjaan,
dan jadwal kerja.
Bab III Pengetahuan Penunjang Kerja Praktek
Bab ini membahas mengenai teori penunjang kerja praktek dan kakas pembangunan
perangkat lunak.
Bab IV Pelaksanaan Kerja Praktek
Bab ini membahas mengenai input, proses dan pencapaian hasil.
Bab V Penutup
Bab ini membahas mengenai kesimpulan dan saran.

Bab II
Organisasi PG-TKK Sang Timur
PG-TKK Sang Timur yang didirikan pada tanggal 11 Agustus 2003 beralamat di jalan
Wairklau No. 80 Kelurahan Kota Uneng, Kecamatan Alok adalah sekolah Katolik bagi anakanak usia dini yang multikultural yaitu dengan menerima anak dari berbagai suku, ras,
agama, latar belakang, dan strata keluarga yang berbeda. Keunggulan PG-TKK Sang Timur
adalah pendidikan karakter yang terintegrasi dalam semua bidang pengembangan, dalam
kegiatan ekstrakurikuler dalam rangka menyiapkan dan membekali generasi muda bangsa
agar menjadi pribadi yang berintegritas tinggi, berkarakter.

II.1 Struktur Organisasi

YKST-PUSAT

YKSTPERWAKILAN
FLORES

KOMITE
SEKOLAH

MPK
KEPALA PGTKK

TATA USAHA

DINAS PPO
KAB

BENDAHARA

PARA GURU

PESERTA DIDIK

PRESCHOOL

PLAYGROUP

TKA1

TKA2

Gambar 2.1 Struktur Organisasi

YKST (Yayasan KeSangTimuran) dipimpin oleh seorang Madre yang bertempat di
Italia. YKST membuka cabang di Flores yang kemudian membangun sebuah sekolah di kota
Maumere dengan kedudukan tertinggi adalah Kepala Sekolah PG-TKK Sang Timur yang
berhubungan dengan MPK dan Komite Sekolah serta Dinas PPO Maumere. Di bawah Kepala
Sekolah ada tiga bagian unit yang berhubungan yaitu, Tata usaha (TU), Bendahara dan para
5

TKB

guru. Unit yang diberi tanda merah pada gambar di atas menunjukkan tempat penulis
melaksanakan kerja praktek di bawah bimbingan Ibu Rid selaku bagian Tata Usaha.

II.2 Lingkup Kerja

Tempat penulis melaksanakan kerja praktek adalah di PG-TKK Sang Timur Maumere.
Sekolah ini membimbing anak-anak dari umur 2 tahun sampai dengan 5 tahun, dari kategori
PreSchool, PlayGroup, TK A, dan TK B. ketika proses kerja praktek ini berlangsung, PGTKK Sang Timur sedang mempersiapkan brosur pendaftaran untuk dibagikan. Pada
pelaksanaan kerja praktek, penulis membantu membangun sebuah website sebagai media
promosi dan informasi untuk sekolah tersebut.

II.3 Deskripsi Pekerjaan

Deskripsi pekerjaan yang dilakukan selama kerja praktek di PG-TKK Sang Timur adalah
membangun website sebagai media promosi dan informasi yang menangani hal-hal berikut :
1. Menampilkan visi-misi sekolah, prakata (kata sambutan) kepala sekolah, foto
slideshow.
2. Menampilkan profil sekolah, data guru, galeri, berita dan artikel terbaru, serta syaratsyarat pendaftaran.

II.4 Jadwal Kerja

Kerja praktek dilaksanakan dari tanggal 11 Maret 2016 sampai dengan 10 Mei 2016,
selama 8 minggu. Waktu kerja praktek adalah hari Selasa, Jumad dan Sabtu pukul 08.00
WITA 12.30 WITA. Secara umum, kegiatan yang dilakukan selama kerja praktek adalah
sebagai berikut :
1. Minggu pertama :
a) Pengenalan lingkungan kerja
b) Melakukan wawancara singkat tentang lingkungan dan kebutuhan sekolah,
memberikan solusi alternatif

aplikasi berdasarkan kebutuhan utama dari

sekolah.
c) Di antara solusi alternatif tersebut, setelah dianalisis berdasarkan kebutuhan
dan lingkungan sekolah, maka disetujui pembuatan sebuah aplikasi yang
berguna sebagai media promosi dan informasi, dalam hal ini sebuah website.
d) Mendesign tampilan awal dari website tersebut.
2. Minggu kedua :
a) Menunjukkan design awal dari tampilan website sekolah.
b) Pengambilan data secara umum (lambang sekolah, prakata kepala sekolah,
visi-misi sekolah, serta profil dan sejarah sekolah).
c) Pengambilan foto bangunan dan lingkungan sekolah.
d) menginput data tersebut ke halaman website.
7

3. Minggu ketiga :
a) Pengambilan data tambahan (kurikulum sekolah, data guru, aturan seragam
guru-murid) , tetapi belom ada hasil karena menunggu dari bagian kurikulum.
b) Mengedit header website sekolah.
c) Menyesuaikan tampilan website berdasarkan penerapan IMK.
4. Minggu keempat :
a) Melakukan wawancara kembali untuk mendapatkan data lebih jelas tentang
cara promosi sekolah dan perkembangan murid yang mendaftar tiap tahun.
b) Mencari website sekolah di kota lain yang dibina oleh YKST, sebagai patokan
untuk website sekolah di Mamuere.
c) Membuat koneksi database menggunakan MySQLi.
5. Minggu kelima :
a) Permintaan pembuatan brosur pendaftaran untuk tahun ajaran 2016/2017.
b) Pengambilan foto dan video untuk pendokumentasian di acara gebyar seni.
6. Minggu keenam :
a) Memberikan contoh brosur dan mengambil data yang akan di masukkan ke
dalam brosur.
b) Mendesign brosur sesuai permintaan.
7. Minggu ketujuh :
a) Menunjukkan brosur yang telah dibuat serta menerima berbagai masukan
untuk perbaikan brosur tersebut.
b) Memperbaiki isi dan tampilan brosur.
c) Mencetak brosur.

III.3 Jadwal Kerja

N
O
1
2

TAHAP KEGIATAN
Menentukan lokasi kerja praktek
Mengindetifikasi masalah,
menentukan tema, menentukan
metode pengumpulan data

Pengumpulan data

Analisis dan perancangan sistem

Pembuatan laporan
Bab I
Bab II
Bab III
Bab IV

6
7

Bab V
Implementasi (desain Perangkat
Lunak)
Uji coba sistem

MARET
II
I
II
I
V

APRIL
II
II
I

I
V

MEI
II
II
I

JUNI
I
V

II

III

JULI
I
V

II

III

I
V

AGUSTUS
II
I
I II
I
V

SEPTEMBER
II
I II
I
IV

Bab III
Teori Penunjang Kerja Praktek
III.1 Teori Penunjang KP
III.1.1 Pengertian Internet
Internet adalah kelompok atau kumpulan dari jutaan computer, yang penggunaannya
memungkinkan untuk mendapatkan informasi dari computer yang ada di dalam kelompok
tersebut dengan asumsi bahwa pemilik computer memberikan hak akses. (Simarmata,
2010:47). Internet juga

merupakan sekumpulan jaringan yang terhubung satu dengan

lainnya, di mana jaringan menjadikan sambungan menuju global informasi. (Sutedjo,dkk,

2007:117).
Menurut Kadir (2002), internet adalah metode untuk menghubungkan berbagai
computer ke dalam suatu jaringan computer global, melalui protocol disebut Transmission
Control Protocol/ internet protocol (TCP/IP). Protocol adalah suatu petunjuk yang
menunjukkan pekerjaan yang akan pengguna (user) lakukan dengan internet, apakah akan
mengakses situs web, melakukan transfer file, mengirim email dan sebagainya. Protocol bisa
dibayangkan seperti suatu bahasa yang digunakan untuk berkomunikasi berbagai jenis
computer maupun system operasi yang terhubung di internet.
Daya guna internet itu terletak pada informasi itu sendiri, bukan pada jaringan
computer. Informasi itu ada karena beberapa orang atau beberapa kelompok memberikan
waktu, usaha dan karya mereka. Mereka mempunyai ide, menyusunnya, menciptakan sesuatu
yang berguna dan membuatnya tersedia buat pemakai internet di seluruh dunia. (Shalahuddin
dan Rosa, 2010:3).

III.1.2 Pengertian Website

Website atau situs juga dapat diartikan sebagai kumpulan halaman yang menampilkan
informasi data teks, data gambar diam atau gerak, data animasi, suara, video atau gabungan
dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian
bangunan yang saling terkait di mana masing-masing dihubungkan dengan jaringan-jaringan
halaman (hyperlink). (Purwanti, 2008).
Menurut Yulaitmoko (2010), secara garis besar website bisa digolongkan menjadi tiga
bagian , yaitu :

1. Website statis adalah web yang mempunyai halaman yang tidak berubah.
2. Website dinamis merupakan website yang memerlukan update sesering mungkin.
Contoh website dinamis adalah web berita atau web portal yang di dalamnya terdapat
fasilitas berita, polling dan sebagainya.
3. Website interaktif adalah web yang saat ini memang sedang booming, user bisa
berinteraksi dan beradu argument. Salah satu contoh website interaktif adalah blog
dan forum.
Menurut Rahmat (2010:3), website terbagi atas empat berdasarkan fungsinya, yaitu :
1. Personal website, website yang berisi informasi pribadi seseorang,
2. Commercial website, website yang dimiliki oleh sebuah perusahaan yang bersifat
bisnis.
3. Government website, website yang dimiliki oleh instansi pemerintahan, pendidikan
yang bertujuan memberikan pelayanan kepada pengguna.
4. Non-profit organization website, dimiliki oleh organisasi yang bersifat non-profit atau
tidak bersifat bisnis.

III.1.3 Pengertian Web Server

Web server adalah tempat anda mendapatkan halaman web dan data yang
berhubungan dengan website yang anda buat, sehingga data dapat diakses dan dilihat
oleh orang lain. (Jhonsen, 2004:174).

III.1.4 Pengertian Domain dan Hosting

Domain adalah alamat unik di dunia internet yang digunakan untuk
mengidentifikasi sebuah website, atau dengan kata lain domain adalah alamat yang
digunakan untuk mencari dan menemukan sebuah website pada dunia internet (Rahmat,
2010:9). Menurut Oya Suryana (2008:7), domain pada umumnya dikenal identic dengan
nama

url

atau

website,

sebagai

contoh

domain

blog

bisnis

penulis

http://onlinebisnis.web.id dan lain-lain. Hosting berasal dari kata host. Computer yang
terhubung dalam jaringan memanfaatkan fasilitas yang tersedia dalam suatu computer
yang terhubung dengan jaringan. Hosting menyediakan sumber daya server-server untuk
disewakan sehingga memungkinkan organisasi atau individu menempatkan informasi di
internet, server hosting terdiri dari gabungan server-server atau sebuah server yang
terhubung dengan jaringan internet berkecepatan tinggi. (Bonafit Nugroho, 2008).

III.1.5 Entity Relationship Diagram (ERD)

Menurut Halim (2013), untuk mendeskripsikan hubungan antara penyimpanan
data yang dirancang di DFD dibutuhkan suatu model jaringan yang menghubungkan
struktur data dan hubungan antar data. Model ini dikenal dengan nama Entity
Relationship Diagram (ERD). Penyajian sebuah diagram merupakan hal yang sangat
penting dalam mempresentasikan sebuah hubungan relasi. Untuk merancang sebuah basis
data kita harus memodelkan data-data tersebut agar penyajiannya menjadi lebih muda
dimengerti dan proses perancangannya juga lebih mudah karena datanya terstruktur.
Salah satu metode dalam model merancang suatu basis data yang banyak digunakan
yaitu, Entity Relationship Diagram (ERD).
ERD merupakan model jaringan data yang menekankan pada struktur-struktur
data dan relationship data. Model relasional merupakan model data yang paling banyak
digunakan saat ini. Hal ini disebabkan oleh bentuknya yang sederhana dibandingkan
dengan model jaringan atau model hirarki. Bentuk yang sederhana ini membuat pekerjaan
seorang programmer menjadi lebih mudah, yaitu dalam melakukan berbagai operasi data
(insert, update, delete, dan lainnya). ERD digunakan untuk menggambarkan model
hubungan data dalam system, di mana didalamnya terdapat hubungan entitas beserta
atribut relasinya dan mendokumentasikan kebutuhan untuk system pemrosesan data.
Keuntungan menggunakan ERD sebagai berikut :
1.
2.
3.
4.

ERD berbentuk sederhana

Mudah melakukan berbagai operasi data
ERD digunakan untuk menghindari pengulangan informasi
ERD digunakan untuk menghindari hilangnya informasi

Elemen-elemen ERD adalah sebagai berikut :

1. Entity (Entitas)
Pada ERD, entitas digambarkan dengan sebuah bentuk persegi panjang. Entitas adalah
sebuah objek yang ada di dalam system baik itu nyata maupun abstrak dan dapat
dibedakan dengan objek lain. Entitas diberi nama denan kata benda dan
dikelompokkan dalam empat jenis nama yaitu : orang, benda, lokasi dan kejadian.
Setiap entitas memiliki atribut sebagai keterangan dari entitas. Misalnya: entitas
mahasiswa yang memiliki atribut nim, nama dan alamat. Setiap entitas juga memiliki
kunci atribut atau primary key. Misalnya: entitas mahasiswa dengan atribut nim

sebagai primary key sedangkan entitas dosen memiliki atribut no_dosen sebagai
primary key. Symbol entitas dapat dilihat pada gambar berikut :

Gambar 3.1 Entity

2. Relationship
Pada ERD, relationship dapat digambarkan dengan sebuah belah ketupat. Pada
umumnya penghubung diberi nama dengan kata kerja dasar sehingga memudahkan
untuk membaca relasinya. Symbol relationship dapat dilihat pada gambar sebagai
berikut :

Gambar 3.2 Relationship

3. Derajat Relationship (Relationship Degree)

Derajat relationship adalah jumlah entitas yang berpartisipasi dalam suatu
relationship. Symbol derajat relationship dapat dilihat pada gambar sebagai berikut :

Gambar 3.3 Derajat Relationship

4. Atribut
Atribut adalah sifat atau karakteristik dari tiap entitas maupun tiap relationshipnya.
Maksudnya atribut adalah sesuatu yang menjelaskan apa sebenarnya yang dimaksud
entitas dan relationshipnya. Dalam atribut terdapat value atau nilai yang merupakan
suatu occurance tertentu dari sebuah atribut dalam entitas dan relationshipnya. Ada
dua jenis atribut nilai yaitu :
1. Identifier (Key)
Identifier digunakan untuk menentukan suatu entitas secara unik (primary key).
2. Descriptor (nonkey atribut)

Descriptor digunakan untuk menspesifikasikan karakteristik dari suatu entity yang

tidak unik. Symbol atribut dapat digambarkan sebagai berikut:

Gambar 3.4 Atribut

5. Kardinalitas Relasi
Kardinalitas relasi menunjukkan jumlah maksimum tupel yang dapat berelasi dengna
entitas pada entitas yang lain. Terdapat 3 macam entitas kardinalitas relasi yaitu ;
1. One to one
Tingkat hubungan ini menunjukkan hubungan satu ke satu, dinyatakan dengan
satu kejadian pada entitas pertama dan hanya mempunyai satu hubungan dengan
satu kejadian pada entitas yang ke dua dan sebaliknya.
Contoh kardinalitas one to one
1

Meminjam

1
Buku

Anggota

Gambar 3.5 one to one

2. One to many atau many to one
Tingkat hubungan satu ke banyak adalah sama dengan banyak ke satu, tergantung
dari mana hubungan tersebut dimulai. Untuk suatu kejadian pada entitas yang
pertama dapat mempunyai banyak hubungan dengan kejadian pada entitas kedua.
Sebaliknya, satu kejadian pada entitas yang kedua hanya dapat mempunyai satu
hubungan dengan satu kejadian pada entitas yang pertama.
Contoh kardinalitas Many to one
N

Memiliki

Ruang kelas

Siswa

Gambar 3.6 Many to one

3. Many to many

Tingkat hubungan banyak ke banyak terjadi jika tiap kejadian pada sebuah entitas
akan mempunyai banyak hubungan dengan kejadian pada entitas lainnya, dilihati
dari sisi entitas pertama maupun dilihat dari sisi yang kedua.
N

diajarkan

N
Guru

Siswa

Gambar 3.7 Many to many

Langkah-langkah teknis yang dapat dilakukan untuk menghasilkan diagram ERD
adalah sebagai berikut :
a. Mengidentifikasi dan menetapkan seluruh entitas yang akan terlibat
b. Menentukan atribut-atribut key (primary key) dari masing-masing entitas
c. Mengidentifikasi dan menetapkan derajat / kardinalitas seluruh relasi antara
entitas-entitas yang ada beserta foreign key nya
d. Melengkapi entitas dan relasi dengan atribut-atribut deskriptif

III.1.6 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) awalnya dikembangkan oleh Chris Gane dan Trish
Sarson pada tahun 1979 yang termasuk dalam Structured Systems Analysis and Design
Methodology (SSADM) yang ditulis oleh Chris Gane dan Trish Sarson. System yang
dikembangkan ini berbasis pada dekomposisi fungsional dari sebuah system. Berikut
adalah contoh DFD yang dikembangkan oleh Chris Gane dan Trish Sarson:

Aliran data

D44

Gambar 3.8 Contoh DFD yang dikembangkan Chris Gane & Trish
Sarson

Edward Yourdon dan Tom DeMarco memperkenalkan metode yang lain pada tahun
1980-an di mana mengubah persegi dengan sudut lengkung (pada DFD Chris Gane dan Trish
Sarson) dengan lingkaran untuk menotasikan. DFD model Edward Yourdon dan Tom
DeMarco popular digunakan sebagai model analisis system perangkat lunak untuk system
perangkat lunak yang akan diimplementasikan dengan pemograman terstruktur. Informasi
yang ada di dalam perangkat lunak dimodifikasi dengan beberapa transformasi yang
dibutuhkan. Data Flow Diagram (DFD) atau dalam bahasa Indonesia menjadi Diagram Alir
Data (DAD) adalah representasi grafik yang menggambarkan aliran informasi dan
transformasi informasi yang diaplikasikan sebagai data yang mengalir dari masukan (input)
dan keluaran(output). DFD dapat digunakan untuk merepresentasikan sebuah system atau
perangkat lunak pada beberapa level abstraksi

III.2 Kakas Pembangunan

III.2.1 PHP
PHP singkatan dari Hypertext Preprocessor yang merupakan server-side
programming, yaitu bahasa pemograman yang diproses di sisi server. Fungsi utama PHP
dalam membangun website adalah untuk melakukan pengolahan data pada database. Data
website akan dimasukkan ke database, diedit dihapus dan ditampilkan pada website
yang diatur oleh PHP.(Rohi Abdulloh, 2016)

III.2.2 Bootstrap
Bootstrap merupakan salah satu framework CSS yang sangat popular di kalangan
pecinta pemograman website. Dengan bootstrap, proses desain website tidak dibuat dari
nol, sehingga proses desain website lebih cepat dan mudah. Bahkan tanpa kita membuat
skrip CSS sedikit pun, kita sudah dapat membuat desain website yang bagus. Sejak
bootstrap dilengkapi dengan fitur responsive pada tahun 2012, bootstrap semakin banyak
digemari dan semakin banyak website yang menggunakan bootstrap dalam desainnya.
Dengan fitur responsive yang disediakan bootstrap ini, website dapat dilihat dalam
berbagai ukuran layar seperti smartphone atau tablet dengan desain tetap teratur dan
mengikuti ukuran layar. Hasil ekstrak dari file bootstrap terdiri dari tiga folder, yaitu
folder css, font, dan js. Folder css berisi file css bootstrap yang terdiri dari bootstrap.css
dan bootstrap-theme.css. sebenarnya masih ada dua file css lain, tetapi hanya bentuk
minimal atau file yang sudah dikompresi dari kedua file css yang telah disebutkan, yaitu
bootstrap.min.css dan bootstrap-theme.min.css. Pada folder js berisi file javascript, yaitu
bootstrap.js dan bootstrap-min.js. pada folder font berisi file font yang digunakan untuk
membuat ikon oleh file bootstrap.css. (Rohi Abdullh, 2015)

III.2.3 MySQLi
Salah satu software database relasional adalah MySQL yang didesain khusus
untuk menangani pengelolaan database di lingkungan web. PHP mempunyai fungsi atau
ekstension dalam mengakses database MySQL, ada tiga pilihan ekstension yang
digunakan, yaitu :
1. Mysql, contohnya : mysql_connect, mysql_query, mysql_fetch_array, dll.
2. Mysqli (i:improved), contohnya : mysqli_connect, mysqli_query, dll.
3. PDO (PHP Data Object).
Ekstension mysql paling popular di kalangan programmer PHP, namun sejak PHP versi
5.5 sudah tidak dianjurkan lagi untuk digunakan, sehingga ada peringatan resmi dari
pengembang PHP, kurang lebih bunyinya begini : Deprecated :mysql_connect(): The
mysql extension is deprecated and will be removed in the future: use mysqli or PDO

instead . Artinya, ekstension mysql dalam proses deprecated (akan dihapus pada PHP
versi berikutnya) , silahkan pakai ekstension mysqli atau PDO. Alasan tim pengembang
PHP mengapa sudah tidak menggunakan ekstension mysql adalah masalah keamanan
database dan performa kinerja database . Disamping itu, ekstension mysql tidak
menyediakan antarmuka berorientasi objek dan tidak mendukung fitur terbaru dari
MySQL seperti Prepared Statement, Transaction, Compression, Stored Procedure, dan
Encryption (SSL). (Lukman Hakim, 2014)

III.2.4 JQuery
JQuery merupakan sebuah framework dan cara baru dalam menuliskan kode
JavaScript. JavaScript sendiri adalah bahasa pemograman yang dapat bekerja di sebagian
besar browsesr terbesar seperti Google Chrome, Mozilla Firefox, Safari, Internet Explorer
(IE), Opera dan lainnya. Kode JavaScript dapat disisipkan dalam halaman web
menggunakan tag SCRIPT. JQuery disini hadir untuk mengoptimisasi dan meringkaskan
cara penulisan library JavaScript, sehingga mempercepat perpindahan dokumen HTML,
penanganan event (event handling), pembuatan animasi di dalam web, sehingga web kita
tampak seperti Flash, sampai dengan interaksi AJAX untuk pengembangan web yang
modern dan cepat. JQuery mempunyai lisensi di bawah GNU artinya jQuery merupakan
aplikasi yang Open Source dan bebas dipublikasikan oleh siapapun. Ukurannya juga
cukup kecil yaitu sebesar 56 KB (compressed), sehingga menggunakan jQuery menjadi
jauh lebih cepat dan mudah daripada menggunakan framework yang lain atau
menggunakan JavaScript konvensional. (Hariyanto Agus, 2014)
Berbeda dengan php yang diproses di sisi server, JavaScript diproses pada
computer client. Karena pemrosesannya dilakukan di computer client, membuat
JavaScript lebih interaktif disbanding php. Peran JavaScript dalam membuat website
adalah memberikan efek animasi yang menarik, dan interaktifitas dalam penanganan
event yang dilakukan oleh pengguna website. (Abdulloh Rohi, 2015)

III.2.5 Web Editor

Merupakan program aplikasi yang berfungsi mengetikkan perintah-perintah
dokumen web baik client slide scripting maupun server side scripting. Saat ini banyak
tersedia web editor mulai dari yang paling sederhana hingga yang lebih smart. Mulai dari
web editor yang berbayar hingga yang gratis. Contoh web editor adalah : Notepad,
Notepad++, Macromedia Dreamweaver. (M. Rudyanto Arief, 2011)

III.2.6 Web Browser

Digunakan untuk menampilkan hasil website yang telah dibuat. Web browser
yang paling sering digunakan, di antaranya Mozilla Firefox, Google Chrome, Internet
Explorer, Opera dan Safari. (Rohi Abdulloh, 2016)

BAB IV
PELAKSANAAN KERJA PRAKTEK
IV.1 Gambaran Umum
Pendidikan anak Usia Dini Sang Timur ( PG-TKK ) didirikan pada pada tanggal 11
Agustus 2003 berlokasi di Jl.Wairklau N0.80 Maumere . Play Group TKK Sang Timur
didirikan untuk menjawab kebutuhan pendidikan masyarakat Maumere secara khusus
menampung anak-anak usia dini di sekitar daerah Wairklau dan sekitarnya. PG-TKK Sang
Timur Maumere menerima anak-anak dari berbagai kalangan latar belakang ekonomi orang
tua, yang pada awal berdirinya terdiri dari golongan ekonomi menengah ke atas. PAUD ini
telah melaksanakan kegitan belajar sambil bermain sejak berdirinya hingga tahun 2007
mendapat izin operasional secara resmi dari Dinas Pendidikan dan Kebudayaan ( nama :
Dinas PPO sekarang).Pada Tahun 2008 PG-TKK Sang Timur terakreditasi dengan nilai
A. Kata Sang Timur berasal dari Bahasa Jawa : Sang artinya Yang dan Timur berarti kecil.
Jadi Sang Timur berarti Yang Kecil. Sebutan ini sebagai tanda penghormatan bagi Yesus
yang masih muda. Sang Timur merupakan pelindung di dalam karya pendidikan.
Kepala Sekolah pertama adalah Sr.Evarista,PIJ (2003 - 2005), dilanjutkan oleh Sr
Stefana, PIJ (2005- 2007) , Sr Innes PIJ (2007- 2012), dari tahun 2012 - November 2015
oleh Sr.Evarista,PIJ, Sr.Clarina,PIJ November 2015 hingga kini perkembangannya, PGTKK

Sang Timur tetap konsisten dalam mengemban misi Sang Timur dalam upaya

membawa anak-anak kepada Tuhan. Pendampingan anak intensif untuk membentuk mentalspiritual, kepribadian dan intelektual menjadi manusia yang utuh (integral).
Hal yang khas di PG-TKK Sang Timur Maumere adalah: budaya kasih persaudaraan,
kegembiraan dan kesederhanaan, disiplin, reflektif, kreatif. Keakraban antara anak dengan
guru,orang tua dalam setiap kegiatan bersama baik dalam pembelajaran maupun kegiatan
pengembangan, sangat dirasakan oleh warga sekolah, Perhatian terhadap anak sangat besar
terlebih kepada anak yang bermasalah dalam mental maupun spiritual, kepribadian/sosial.
Kehidupan religius sangat diperhatikan dan merupakan pembiasaan yang utama.
PG-TKK Sang Timur merupakan PAUD yang multikultural yaitu dengan menerima
anak dari berbagai suku, ras, agama, latar belakang, strata keluarga. Asas penghargaan
terhadap martabat-pribadi menjadi dasar rasa kekeluargaan yang dapat meretas berbagai
perbedaan yang ada.
Keunggulan PG-TKK

Sang Timur adalah pendidikan karakter yang terintegrasi

dalam semua bidang pengembangan, dalam kegiatan ekstrakurikuler dalam rangka

menyiapkan dan membekali generasi muda bangsa agar menjadi pribadi yang berintegritas
tinggi, berkarakter.
Selain itu PG-TKK Sang Timur Maumere menjadikan pendidikan entrepreneurship dan
Parething day di setiap jenjang / kelompok , sebagai salah satu upaya pembentukan karakter:
kreatif, inovatif, mandiri dan bertanggung jawab, tangguh menghadapi kesulitan, daya juang.

IV.1.1 Visi dan Misi

1. Visi
Mewujudkan sikap dan perilaku yang mandiri, berbudi luhur, dalam semangat kasih
persaudaraan, kesederhanaan, dan kegembiraan terhadap Tuhan dan sesama.
2. Misi
Menumbuhkan sikap mandiri dalam diri anak didik melalui aneka kegiatan :
a. Menumbuhkan rasa toleransi melalui sikap saling menghargai terhadap sesama.
b. Menciptakan suasana persaudaraan, kesederhanaan, kegembiraan melalui budaya
5S yaitu senyum, salam, sapa, sopan dan santun.

IV.1.2 Tujuan
1.
2.
3.
4.

Membawa anak didik bercita-cita luhur dan berjiwa gembira.

Membawa anak didik untuk berjiwa murni dan memiliki cinta sejati.
Membawa anak didik untuk saling mencinta dan saling melayani.
Membawa anak didik untuk menjadi manusia yang bertanggung jawab, berdikari,
mandiri, tertib, disiplin, jujur, dan bermoral tinggi.

IV.2 Gambaran Tentang System Yang Sedang Berjalan

Berdasarkan pengamatan yang penulis temukan pada PG-TKK Sang Timur ada dua hal
yang disoroti yaitu, pertama, promosi sekolah untuk memperbanyak siswa yang masuk
sehingga meningkatkan kualitas sekolah adalah dengan menggunakan beberapa cara
misalnya dengan menggunakan brosur, spanduk dan dari mulut ke mulut masyarakat. Cara
promosi yang seperti ini, sangat diperlukan namun, ini membuat pengeluaran dana yang lebih
besar serta efektivitas waktu yang tidak memadai. Karena masih banyaknya Playgroup
maupun TKK di kota Maumere ini, sehingga diperlukan cara promosi yang efektif dan
efisien. Kedua, penyampaian informasi tentang PG-TKK Sang Timur tidak dapat
dipublikasikan, karena masih banyak masyarakat yang tidak mengenal sekolah ini dengan

baik. Adapun kegiatan-kegiatan yang dilakukan oleh PG-TKK Sang Timur dengan
melibatkan pihak luar hanya dipublikasikan melalui media cetak seperti Pos Kupang dan
melalui media suara seperti Radio Rogate, Sonia FM. Untuk itu perlu adanya sarana yang
bisa digunakan kapan saja, dan di mana saja. Sehingga dapat mempersingkat waktu
pengerjaan, membatasi pengeluaran dana serta penyampaian informasi sekolah yang dapat
dipublikasikan dengan cepat.

IV.3 Gambaran Mengenai System Baru

Berdasarkan gambaran mengenai system lama yang sedang berjalan ,maka penulis akan
membangun sebuah webite PG-TKK Sang Timur sebagai sarana untuk mempromosikan PGTKK Sang Timur dan sarana penyebaran informasi kegiatan sekolah agar dapat dikenal di
seluruh wilayah baik di sekitar flores maupun di seluruh Indonesia. Untuk itu penulis telah
membuat suatu desain system baru.

IV.3.1 Diagram Konteks Sistem Baru

Gambar 4.1 Diagram Konteks Sistem Baru

1. Dalam system ini terdapat 2 entitas yaitu entitas admin dan entitas user.
2. Entitas admin memiliki hak akses untuk menginput data, mengubah, menghapus dan
mempublikasikan data admin, halaman (data sejarah sekolah, visi misi, tata tertib,
kurikulum pembelajaran, fasilitas, guru dan karyawan dan pendaftaran siswa baru),
menu-menu website, data galeri, pegumuman dan pesan-pesan

3. User hanya memiliki akses untuk melihat informasi sejarah sekolah, visi misi, tata
tertib, kurikulum pembelajaran, fasilitas, guru dan karyawan dan pendaftaran siswa
baru, pegumuman dan galeri dan mengirim pesan.
IV.3.2 Diagram Berjenjang

Gambar 4.2 Diagram Berjenjang

IV.3.3 Diagram Level 0

Gambar 4.3 Diagram Level 0

1. Dalam system ini terdapat 3 proses yaitu proses login, memasukkan data, dan
mengolah data. pada system ini terdapat 5 data store yaitu datastore admin, halaman,
pegumuman, galeri, dan pesan.
2. Untuk dapat mengakses system, admin harus melakukan proses login dengan
menginputkan data login, proses login akan berhasil jika data login yang dimasukkan
cocok dengan data login yang diambil dari datastore admin sehingga proses login
memberikan informasi login berhasil kepada admin.
3. Admin memiliki hak akses untuk memasukkan data admin, halaman, pegumuman,
dan galeri. Admin juga melakukan pengolahan data admin, halaman, pegumuman,
galeri, menu-menu, dan pesan. Semua data yang dimasukkan dan diolah oleh admin
akan langsung dipublikasikan ke website.
4. User mempunyai hak akses hanya sebatas untuk melihat informasi halaman,
pegumuman, dan galeri.

IV.3.4 Diagaram Level 1 Proses 2 (memasukkan data)

Gambar 4.4 Diagram Level 1 Proses 2

IV.3.5 Diagram Level 1 Proses 3 (mengolah data)

Gambar 4.5 Diagram Level 1 Proses 3

IV.3.6 Diagram Level 1 Proses 4 (menampilkan data)

Gambar 4.6 Diagram Level 1 proses 4

IV.3.7 Entity Relationship Diagram (ERD)

Gambar 4.7 Entitiy Relationship Diagram

Gambar di atas adalah Entitiy Relationship Diagram. Entitiy Relationship Diagram
adalah jenis model perancangan basis data yang digunakan untuk melihat dengan hubungan
antara table yang saling berhubungan.
Kamus data:
1.
2.
3.
4.
5.
6.

Admin (id_admin*, username, password)

Menu (id_menu*, judul, link, urutan)
Halaman (id_halaman*, judul, isi)
Galeri (id_galeri*, judul, gambar, tanggal)
Pegumuman (id_pegumuman*, tanggal, judul, isi)
Pesan (id_pesan*, tanggal, nama, email, subjek, pesan, balasan)

IV.3.8 Desain Database

1. Table Admin

Table di bawah ini adalah table database Admin, yang bertujuan untuk menginput dan
menyimpan data-data yang berkaitan dengan data admin.
Nama Field
Id_admin

Tipe Data dan Ukuran

Integer (5)

keterangan
Auto Increment dan Primary
key,

username
Password

Varchar (5)
Varchar (5)
Tabel 4.1 Admin

2. Table Menu
Nama Field
Id_menu*

Tipe data dan Ukuran

Integer (5)

Keterangan
Auto increment dan primary
key

judul
link
Urutan

Varchar (20)
Varchar (20)
Integer (3)
Tabel 4.2 Menu

3. Table Halaman
Nama Field
Id_halaman*

Tipe Data dan Ukuran

Integer (5)

keterangan
Auto increment dan primary
key

Judul
isi

Varchar (100)
text
Tabel 4.3 Halaman

4. Table galeri
Nama Field
Id_galeri

Tipe Data dan Ukuran

Integer (5)

Keterangan
Auto increment dan primary
key

Judul
Gambar
Tanggal

Varchar (100)
Varchar (100)
Date
Tabel 4.5 Galeri

5. Table pegumuman
Nama Field
Id_pegumuman*

Tipe Data dan Ukuran

Integer (5)

Keterangan
Auto increment dan primary
key

Tanggal
Judul
isi

date
Varhcar (50)
Text
Tabel 4.5 Pegumuman

6. Table Pesan
Nama Field
Id_pesan*

Tipe Data dan Ukuran

Integer (5)

Tanggal
Nama
Email
Subjek
Pesan
balasan

date
Varchar (50)
Varchar (30)
Varchar (30)
Text
Text
Tabel 4.6 Pesan

Keterangan
Auto increment dan primary
key

IV.3.9 Persiapan Implementasi

IV.3.9.1 Desain Halaman User
1. Desain Halaman Beranda
HEADER

HOM

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

LOGIN

ISI HALAMAN BERANDA

Slide show foto

JAM

KALENDER

GOOGLE MAP LETAK

SEKOLAH

FOOTER

Gambar 4.8 Desain Halaman Beranda

Halaman beranda merupakan halaman yang pertama ditampilkan pada saat user
mengunjungi website PG-TKK Sang Timur. Secara keseluruhan setiap halaman pada
website ini terdapat link-link, yaitu :
a. Link profil
Link yang memunculkan submenu lain yaitu submenu sejarah, visi-misi, tata
tertib, staf pengajar, dan kurikulum.
b. Link galeri
Link yang menghubungkan ke halaman galeri yang berisi foto dan video kegiatan
PG-TKK Sang Timur.
c. Link pegumuman
Link yang menghubungkan ke halaman pegumuman yang berisi pegumuman yang
berkaitan dengan PG-TKK Sang Timur.
d. Link PPDB
Link yang menghubungkan ke halaman yang berisi syarat-syarat pendaftaran
siswa baru di PG-TKK Sang Timur.
e. Link kontak kami
Link yang menghubungkan ke halaman untuk user mengirim pesan kepada PGTKK Sang Timur.
f. Link login
Link yang menghubungkan ke halaman login admin untuk mengolah data.

2. Desain halaman menu Profil submenu Sejarah

HEADER
HOME

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

JAM

ISI HALAMAN

GOOGLE MAP LETAK SEKOLAH

FOOTER

Gambar 4.9 Desain Halaman sumenu sejarah

Halaman ini berisi sejarah dari PG-TKK Sang Timur.

LOGIN

3. Desain halaman menu Profil submenu Visi-Misi

HEADER
HOME

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

JAM

ISI HALAMAN

GOOGLE MAP LETAK SEKOLAH

FOOTER

LOGIN

Gambar 4.10 Desain Halaman Submenu Visi-Misi

Halaman ini berisi tentang visi misi PG-TKK Sang Timur.

4. Desain halaman menu Profil submenu Tata Tertib PG-TKK Sang Timur

HEADER
HOME

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

JAM

ISI HALAMAN

GOOGLE MAP LETAK SEKOLAH

FOOTER

LOGIN

Gambar 4.11 Desain halaman Submenu Tata Tertib

Halaman ini berisi tata tertib PG-TKK Sang Timur.

5. Desain halaman menu Profil submenu Staf Pengajar

HEADER
HOME

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

JAM

ISI HALAMAN

GOOGLE MAP LETAK SEKOLAH

FOOTER

Gambar 4.12 Desain halaman submenu Staf Pengajar

LOGIN

Halaman ini berisi data lengkap staf pengajar (guru dan karyawan) di PG-TKK Sang
Timur.

6. Desain halaman menu Profil submenu Kurikulum

HEADER
HOME

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

JAM

ISI HALAMAN

GOOGLE MAP LETAK SEKOLAH

FOOTER

Gambar 4.13 Desain halaman submenu Kurikulum

Halaman ini berisi kurikulum pembelajaran yang ada di PG-TKK Sang Timur.

LOGIN

7. Desain halaman menu Fasilitas

HEADER
HOME

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

JAM

ISI HALAMAN

GOOGLE MAP LETAK SEKOLAH

FOOTER

Gambar 4.14 Desain halaman menu Fasilitas

Halaman ini berisi fasilitas-fasilitas yang tersedia di PG-TKK Sang Timur.

LOGIN

8. Desain halaman menu Galeri

HEADER
HOME

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

LOGIN

JAM

ISI HALAMAN

GOOGLE MAP LETAK SEKOLAH

FOOTER

Gambar 4.15 Desain halaman menu Galeri

Halaman ini berisi kumpulan foto dan video kegiatan-kegiatan yang dilakukan oleh
PG-TKK Sang Timur.

9. Desain halaman menu pegumuman

HEADER
HOME

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

LOGIN

JAM

ISI HALAMAN

GOOGLE MAP LETAK SEKOLAH

FOOTER

Gambar 4.16 Desain halaman menu Pegumuman

Halaman ini berisi pegumuman yang berhubungan dengan PG-TKK Sang Timur.

10. Desain halaman menu PPDB

HEADER
HOME

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

JAM

ISI HALAMAN

GOOGLE MAP LETAK SEKOLAH

FOOTER

Gambar 4.17 Desain halaman menu PPDB

Halaman ini berisi syarat pendaftaran untuk PG-TKK Sang Timur.

LOGIN

11. Desain halaman menu kontak kami

HEADER

HOM

PROFIL

GALERI

PEGUMUMAN

PPDB

KONTAK KAMI

LOGIN

JAM

Kotak pesan

GOOGLE MAP LETAK

SEKOLAH

FOOTER

Gambar 4.18 Desain halaman menu Kontak Kami

Halaman ini berisi form pesan, apabila user ingin menyampaikan pendapatnya atau
ingin bertanya.

12. Desain halaman menu login

Form login

Gambar 4.19 Desain halaman menu Login

Halaman ini berisi form login untuk admin.

IV.3.9.2 Desain halaman Admin

HEADER

BERANDA

MENU

SUBMENU

HALAMAN

GALERI

PREVIEW

FOOTER

Gambar 4.20 Desain Halaman admin

UBAH PASS

KELUAR

1. Desain halaman kelola menu

HEADER

BERANDA

MENU

SUBMENU

HALAMAN

GALERI

PREVIEW

FORM KELOLA MENU

FOOTER

Gambar 4.21 Desain halaman kelola menu

UBAH PASS

KELUAR

2. Desain kelola halaman submenu

HEADER

BERANDA

MENU

SUBMENU

HALAMAN

GALERI

PREVIEW

FORM KELOLA SUBMENU

FOOTER

Gambar 4.22 Desain halaman kelola submenu

UBAH PASS

KELUAR

3. Desain halaman kelola isi submenu halaman profil

HEADER

BERANDA

MENU

SUBMENU

HALAMAN

GALERI

PREVIEW

UBAH PASS

FORM KELOLA HALAMAN SUBMENU PROFIL

FOOTER

Gambar 4.23 Desain halaman kelola halaman submenu profil

KELUAR

4. Desain halaman kelola galeri

HEADER

BERANDA

MENU

SUBMENU

HALAMAN

GALERI

PREVIEW

FORM KELOLA GALERI

FOOTER

Gambar 4.24 Desain halaman kelola galeri

UBAH PASS

KELUAR

5. Desain halaman preview

Halaman yang ketika diakses akan memunculkan preview dari perubahan yang kita
lakukan pada halaman website tersebut.

HEADER

UBAH PASS

BERANDA

MENU

SUBMENU

HALAMAN

GALERI

PREVIEW

FOOTER

Gambar 4.25 Desain halaman preview

KELUAR

IV.3.10 Implementasi
Website PG-TKK Sang Timur ini dibangun menggunakan bahasa pemograman PHP
(Hypertext Pre-Processor) dengan DBMS MySQLi. Adapun beberapa perangkat lunak yang
digunakann untuk pembuatan aplikasi dibangun menggunakan HTML (Hypertext Markup
Language), CSS, JavaScript, MySQLi, Bootstrap, Notepad++ dan XAMPP.

IV.3.10.1 Rancangan Antarmuka Halaman User

IV.3.10.1.1 Halaman Beranda
Halaman beranda merupakan halaman yang muncul pertama saat diakses oleh
user

Lampiran A. Log Activity

Nama Mahasiswa
NIM
Tempat KP

: Fransiska Iriani Ongkio Buol

: 021130012
: PG-TKK Sang Timur, Jalan Wairklau No.80,
Kelurahan Kota Uneng, Kecamatan Alok, Kabupaten
Sikka.
: Membangun Website Sebagai Media Promosi dan

Topik/ Judul KP

Informasi Menggunakan PHP dan MYSQLI di PGTKK Sang Timur

Pembimbing Prodi
Pembimbing Perusahaan
Tanggal/Bulan
11 Maret 2016

:
:

Kegiatan
Hasil
Memperkenalkan diri dengan
Persetujuan

wakil kepsek bagian kurikulum

tata usaha.
menjelaskan tujuan dan apa

dan tata usaha.

bisa

dibantu

untuk

perkembangan sekolah.
Pertemuan antara salah satu
wakil

dari

beberapa staf pengajar dan

yang
12 Maret 2016

sementara

kepsek

bagian

apa

yang

pembuatan

aplikasi website untuk promosi

kurikulum dan suster kepsek.

Menjelaskan kembali tujuan
dan

Persetujuan
sekolah.

bisa

dikembangkan untuk sekolah

15 Maret 2016

ini.
Perencanaan untuk membuat

website sekolah.
Menyusun

beberapa

pertanyaan wawancara untuk

ditanyakan kepada ibu bagian

tata usaha.
Diberi
tugas

untuk

mendownload

anak-

anak.

lagu

Lagu anak-anak yang bisa

digunakan untuk hiburan serta
anak-anak ekstra menari.

18 Maret 2016

Merancang

website sekolah.
Wawancara
dengan

tampilan

awal

ibu

yang

Data

sekolah,

foto-foto

kegiatan

Suster kepsek dan ibu bagian

dibuat

tata usaha menyetujui tampilan

berdasarkan data yang didapat

awal website.
Beberapa foto sekolah untuk

dari hasil wawancara dan data

sekolah.

guru, murid dan orangtua.

Menunjukkan tampilan awal

website

khas

softcopy lambang, visi misi

bagian tata usaha.

19 Maret 2016

Warna

dijadikan header website dan

softcopy.
Berkeliling untuk mengambil

background website.

gambar sekolah dari berbagai

22 Maret 2016

sudut.
Melanjutkan
tampilan

design

ditambah

awal

dengan

Design

tampilan

serta

antarmuka

menu-menu

berbagi menu serta login dan

namun

login

logout admin.
Mengisi informasi di halaman

admin

awal website serta informasi

kendala.

selesai,

serta

sedang

logout
dalam

pengerjaan dengan beberapa

di tiap tiap menu.

29 Maret 2016

01 April 2016

02 April 2016

Meminta tamban data dari

guru,

menjadi

untuk

kepsek, aturan seragam guru

website sekolah.
Wawancara berkaitan dengan

dan murid, sejarah sekolah.

Informasi berupa cara promosi

informasi

prakata

dari

suster

cara promosi sekolah ini di

serta jumlah siswa di tiap

tahun-tahun kemarin.
Membuat laporan bab I
Diberi tugas untuk membuat

tahunnya.

tahun ajaran 2016/2017.

Mencari bentuk brosur yang
menarik

05 April 2016

Data softcopty berupa; data

tata usaha untuk disaring

brosur promosi sekolah untuk

untuk

Membuat brosur menggunakan

adobe photoshop CS 5.
Mendapatkan bentuk brosur
yang

promosi

pendaftaran siswa baru.

Pengerjaan
brosur
pendaftaran siswa baru.

cocok

dibuat

untuk

sekolah ini.

Informasi dan foto-foto yang

bisa

ditampilkan

di

dalam

Berkonsultasi

dengan

brosur,

ibu

wakasek bagian kurikulum

tentang informasi dan fotofoto apa saja yang harus ada
08 April 2016 12
April 2016
15 April 2016
16 April 2016
19 April 2016 03
Mei 2016
10 Mei 2016

di dalam brosur tersebut.

Lanjutan pengerjaan brosur

promosi sekolah.
Brosur
telah

dikerjakan.
Lanjutan pengerjaan laporan

bab I.
Lanjutan pengerjaan website

dan laporan KP.

Permintaan untuk
sementara.

selesai

istirahat

Brosur siap dicetak.

Persetujuan istirahat dari ibu

wakasek bagian kurikulum dan
apabila ada yang dibutuhkan
dapat kembali lagi.

Nama Mahasiswa
NIM
Tempat KP

: Ismail
: 021130017
: PG-TKK Sang Timur, Jalan Wairklau No.80,
Kelurahan Kota Uneng, Kecamatan Alok, Kabupaten

Topik/ Judul KP

Sikka.
: Membangun Website Sebagai Media Promosi dan
Informasi Menggunakan PHP dan MYSQLI di PGTKK Sang Timur

Pembimbing Prodi
Pembimbing Perusahaan
Tanggal/Bulan
11 Maret 2016
12 Maret 2016
15 Maret 2016
18 Maret 2016
19 Maret 2016
22 Maret 2016
29 Maret 2016
01 April 2016
02 April 2016
05 April 2016
08 April 2016
09 April 2016
12 April 2016
15 April 2016
16 April 2016
19 April 2016
22 April 2016
23 April 2016
26 April 2016
29 April 2016
30 April 2016
03 Mei 2016
10 Mei 2016

:
:
Kegiatan

Berhenti kp

Hasil