bab iii metode penelitian - sir.stikom.edusir.stikom.edu/2062/5/bab_iii.pdf · kelebihan dalam...

27
1 BAB III METODE PENELITIAN Metode yang digunakan dalam proses pembuatan website company profile SMA Antartika Sidoarjo ini dilakukan berdasarkan WDLC (Web Development Life Cycle). Dimana WDLC merupakan sebuah proses pengembangan suatu sistem yang digunakan oleh analis sistem, untuk mengembangkan sebuah website dan gambaran yang disampaikan kepada pengguna. Berikut tahapan yang dilakukan dalam proses pembuatan website SMA Antartika Sidoarjo. 3.1 Tahap Perencanaan Agar menghasilkan sebuah website yang baik diperlukan perencanaan matang yaitu dengan melakukan studi kelayakan tentang metode yang digunakan dalam proses pengumpulan data. Studi kelayakan yang dilakukan diantaranya adalah metode pengumpulan data, sumber data, teknik pengumpulan data, dan teknik analisa data. 3.1.1 Metode Pengumpulan Data Metode pengumpulan data dilakukan dengan mengidentifikasi masalah dan membuat alur perancangan yang akan dilaksanakan, agar dalam proses pembuatanya tidak menyimpang dari tujuannya. Dalam tahap ini, rancangan perencanaan yang akan dilakukan dalam pembuatan website ini dapat dilihat pada gambar 3.1 diagram metodologi perancangan berdasarkan metode WDLC berikut ini:

Upload: duongcong

Post on 02-Mar-2019

220 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

1

BAB III

METODE PENELITIAN

Metode yang digunakan dalam proses pembuatan website company

profile SMA Antartika Sidoarjo ini dilakukan berdasarkan WDLC (Web

Development Life Cycle). Dimana WDLC merupakan sebuah proses

pengembangan suatu sistem yang digunakan oleh analis sistem, untuk

mengembangkan sebuah website dan gambaran yang disampaikan kepada

pengguna. Berikut tahapan yang dilakukan dalam proses pembuatan website SMA

Antartika Sidoarjo.

3.1 Tahap Perencanaan

Agar menghasilkan sebuah website yang baik diperlukan perencanaan

matang yaitu dengan melakukan studi kelayakan tentang metode yang digunakan

dalam proses pengumpulan data. Studi kelayakan yang dilakukan diantaranya

adalah metode pengumpulan data, sumber data, teknik pengumpulan data, dan

teknik analisa data.

3.1.1 Metode Pengumpulan Data

Metode pengumpulan data dilakukan dengan mengidentifikasi masalah

dan membuat alur perancangan yang akan dilaksanakan, agar dalam proses

pembuatanya tidak menyimpang dari tujuannya. Dalam tahap ini, rancangan

perencanaan yang akan dilakukan dalam pembuatan website ini dapat dilihat pada

gambar 3.1 diagram metodologi perancangan berdasarkan metode WDLC berikut

ini:

Page 2: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

2

Gambar 3.1 Diagram Metodologi Perancangan

1. Pengumpulan data, tahap ini dilakukan untuk mengidentifikasi permasalahan

yang ada pada SMA Antartika Sidoarjo dan mencari literatur yang mendukung.

2. Planning, tahap ini dilakukan untuk menentukan ide dan konsep sebuah

website Company Profile SMA Antartika Sidoarjo yang akan dibuat.

3. Analisis, tahap ini dilakukan untuk menganalisis warna dan layout yang nanti

akan dipakai berdasarkan teori yang mendukung.

4. Desain, tahap ini dilakukan untuk membuat desain website Company Profile

SMA Antartika sesuai dengan ide dan konsep yang dibuat.

5. Implementasi, tahap ini akan dilakukan pengkodean website Company Profile

SMA Antartika Sidoarjo sesuai dengan rancangan yang dibuat dengan

menggunakan PHP dan MySql.

3.1.2 Tahap Analisa

Pada tahap ini dilakukan analisa terhadap website kompetitor. Kegiatan

ini meliputi proses analisa pada salah satu website yang baik dan kelebihan yang

Ide Konsep Literatur Masalah

2. Planning 1. Data

Warna 4. Desain 3. Analisis

Layout

5. Implementasi PHP, Mysql

Page 3: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

3

dimiliki oleh kompetitor yang dapat diimplementasikan pada website SMA

Antartika Sidoarjo. Di dalam tahap ini berisi analisa tentang: Studi eksiting, STP

dan Analisis keyword.

1. Study Eksisting

Berikut ini proses analisa study eksisting pada website SMA

Laboratorium Percontohan:

Gambar 3.2 SMA Laboratorium Percontohan

Analisa website kompetitor berdasarkan tampilan website SMA

Laboratorium Percontohan pada Gambar 3.2 sebagai berikut:

1. Website ini merupakan website dari SMA Percontohan yang memiliki

keunggulan memiliki konten yang lengkap, terdapat company profile, E-

Learning, fitur, sistem informasi dan pendaftaran siswa baru.

2. Website ini mempunyai warna khas hijau yang melambangkan identitas

sekolah tersebut dan website ini termasuk web dinamis dimana tidak hanya

Page 4: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

4

menampilkan company profile saja tetapi terdapat menu lain seperti informasi

sekolah, galeri video dan foto.

Gambar 3.3 SMA Negeri 2 Surabaya

Analisa website kompetitor berdasarkan tampilan website SMA Negeri 2

Surabaya pada Gambar 3.3 sebagai berikut:

1. Website dari SMA Negeri 2 Surabaya ini tampak lebih sederhana dalam

menampilkan informasi yang disajikan dengan warna khas biru yang

mendominasi.

2. Dari segi website juga menampilkan galeri, fasilitas, prestasi yang ada

disekolah dan juga melayani pendaftaran siswa baru. Website ini memiliki

kelebihan dalam tampilan yang menarik seperti slide show pada halaman

utama website.

Hasil Analisa Kompetitor

Setelah melakukan analisis terhadap website kompetitor yang telah ada di

publik, maka gambaran dari website SMA Antartika Sidoarjo ini adalah:

Page 5: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

5

Desain website menampilkan warna yang khas sesuai identitas sekolah

dan memiliki konten layaknya website sekolah seperti company profile, galeri,

fasilitas, informasi sekolah, kesiswaan, kontak dan pendaftaran siswa baru.

2. Segmenting, Targeting, dan Positioning

Penentuan Segmentasi, target dan posisi audien sangat diperhatikan agar

penyajian informasi yang akan di hasilkan bisa sesuai dengan apa yang dituju dan

sesuai kondisi lingkungan sekitar, yang secara tidak langsung dapat membuat

website company profile lebih efisien.

1. Segmentasi

a. Usia (15-45 Tahun)

b. Jenis kelamin (Laki-laki/Perempuan)

c. Wilayah (Sidoarjo, Surabaya)

d. Daerah (Kota Besar)

2. Target dari website ini adalah semua golongan yang ingin mengetahui lebih

jelas tentang SMA Antartika Surabaya dan ingin mendaftarkan anaknya pada

jenjang SMA.

3. Positioning website SMA Antartika adalah menjadi website yang dapat

memperkenalkan dan memberikan informasi kepada masyarakat luas tentang

fasilitas, prestasi dan pendaftaran siswa baru.

C. Analisis Keyword

Tahap selanjutnya adalah melakukan kajian dan analisa keyword yang

digunakan sebagai acuan desain yang akan di terapkan dalam website company

profile SMA Antartika Sidoarjo. Hasil keyword yang diperoleh berdasarkan

kajian segmentasi targeting dan positioning yang telah di tentukan sebelumnya.

Page 6: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

6

Diagram alur keyword website company profile SMA Antartika Sidoarjo dapat

dilihat pada Gambar 3.4.

Perkotaan

SMP

SMA

Usia

15-45

Semua

Kalangan

Aktif

Ingin tahu

Ulet

Selektif

Berpendidikan

Simple

Nyaman

Hemat

Sopan

Intelektual

Padat

Pekerja kerasRational

Youthful

Fresh

Cultivated

COOL

CASUAL

Gambar 3.4 Diagram Alur Keyword

3.2 Tahap Perancangan Website

Tahap perancangan merupakan salah satu langkah wajib dalam

pembuatan suatu karya. Di dalam tahap ini terdapat beberapa perancangan teknis

yang ada di dalam nya, Antara lain ide, konsep, tipografi, desain web dan

database.

3.2.1 Ide Dan Konsep

Ide awal dalam pembuatan website ini muncul setelah melakukan

beberapa penelitian dan observasi pada SMA Antartika Sidoarjo, Yang selama ini

Page 7: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

7

website sekolah yang sejak dibuat belum pernah melakukan evaluasi, Oleh karena

itu peneliti bertujuan merancang dan membangun website Company Profile SMA

Antartika Sidoarjo dengan harapan dapat memperkenalkan kepada masyarakat

luas dan calon peserta didik baru, Karena di era sekarang calon peserta didik baru

lebih suka memilih sekolah melalui internet dan mengunjungi website sekolah, hal

ini dalam desain website mempunyai peran penting sebagai sarana promosi

kepada publik tentang jati diri sebuah sekolah agar membuat web sekolah menjadi

menarik.

Konsep pada pembuatan website ini adalah desain website yang

minimalis dibalut dengan warna khas biru yang berhubungan dengan hasil analisis

warna, Website ini mempunyai kerangka yang dibagi menjadi 3 bagian yaitu

Header yang berisi logo SMA Antartika Sidoarjo dan menu-menu pada website,

lalu pada Content yang berisi company profile, informasi sekolah, galeri, fasilitas

dan pendaftaran siswa baru, yang terakhir adalah footer yang berisi copyright

sekolah. Website SMA Antartika Sidoarjo ini nanti dibuat menggunakan bahasa

pemrograman PHP, MySQL dan jQuery.

Data Yang Dimasukkan

Data yang dimasukkan dalam pembuatan website SMA Antartika

Sidoarjo agar memenuhi syarat yang dibutuhkan.

Website ini berisi tentang:

a. Profil sekolah

b. Visi misi, Sejarah

c. Struktur organisasi

d. Sarana fasilitas

e. Prestasi siswa

f. Ekstrakulikuler

g. Persyaratan dan pendaftaran

siswa baru

Page 8: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

8

8

Diagram Proses input Output

Input Proses OutputPh

ase

Data Profil

Sekolah

Data

Visi,misi,

sejarah

Data

Struktur

Organisasi

Data

Sarana

Fasilitas

Data

Prestasi

Siswa

Proses Profil

Sekolah

Proses

Visi,misi,

sejarah

Proses

Struktur

Organisasi

Proses

Sarana

Fasilitas

Proses

Prestasi

Siswa

Proses Ekstra

kulikuler

Tampilan

Profil

sekolah

Tampilan

visi, misi,

sejarah

Tampilan

struktur

organisasi

Tampilan

sarana

fasilitas

Tampilan

prestasi

siswa

Tampilan

Ekstrakulik

uler

Data

Ekstra

kulikuler

Data

Kalender

Sekolah

Data

Pendaftara

n Siswa

Baru

Proses

Pendaftaran

Siswa Baru

Proses

Kalender

Sekolah

Tampilan

Kalender

Sekolah

Tampilan

Pendaftara

n Siswa

Baru

Gambar 3.5 Diagram IPO

Gambar 3.5 diatas merupakan gambar Diagram IPO website Company

Profile SMA Antartika Sidoarjo. Input yang dibutuhkan untuk diproses antara lain

data profil sekolah, visi misi, struktur, fasilitas, prestass siswa, ekstrakulikuler,

PPDB dan kalender. Pada block output hasil informasi ditampilkan sama dengan

data yang diinputkan.

Page 9: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

9

9

3.2.2 Data Flow Diagram

A. Context Diagram

Context diagram menjelaskan aliran data dari website pada SMA

Antartika Sidoarjo. Gambar 3.6 berikut adalah context diagram , dan pada gambar

3.7 data flow diagram level 0 yang merupakan turunan dari context diagram,

gambar tersebut dapat dilihat pada berikut ini :

Gambar 3.6 Context Diagram

B. Data Flow Diagram level 0

Gambar 3.7 dibawah merupakan gambar dari dfd level 0 website

Company Profile. Context diagram yang telah dibuat tadi otomatis akan menjadi

proses utama yang membangun dfd level 0 website Company Profile. Dimana

proses tersebut berinteraksi dengan entitas bagian user dan admin.

Username,password

Konfirmasi login

Konfirmasi Pendaftar

Data Pendaftar

Data Komentar

Buku tamu

Kontak kami

Informasi Sekolah

Komentar

Buku tamu

Kontak kami

Konfirmasi Pendaftar

Kontak kami

komentar

buku tamu

Tambah edit hapus dataa

Tambah edit hapus datab

Tambah edit hapus datag

Tambah edit hapus datacp

data sekolah

data pendaftar

data komentar

data kontak kami

data buku tamu

data galeri

data artikel

data berita

1

Website SMA Antartika

Sidoarjo

Pengunjung web

Admin

Calon siswa

Page 10: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

10

10

Gambar 3.7 DFD Level 0

Username, password

Konfirmasi Login

Tambah edit hapus datacpInformasi Sekolah

Data sekolah

Data Pendaftar

Konfirmasi pendaftar

Data Pendaftar

Konfirmasi pendaftar

Komentar

data komentar

data komentar

Komentar

Data Buku tamu

Buku Tamu

data galeri

Tambah edit hapus datag

Tambah edit hapus dataa

data artikel

Tambah edit hapus datab

Data berita

Kontak kami

data kontak kami

Data Buku tamu

Buku Tamu

data galeri

data artikel

Data berita

data kontak kami

Kontak kami

AdminPengunjung web

1.1

Login

1.2

Company Profile

1.3

PPDB

1 Data Login

1.4

Komentar

2 Data Company Profile

3 Data PPDB

4 Data Komentar

1.5

Buku Tamu

1.6

Galeri

1.7

Artikel

1.8

Berita

1.9

Kontak kami

5 Buku tamu

6 Galeri

7 Artikel

8 Berita

9 Kontak Kami

Calon siswa

Page 11: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

11

11

3.2.3 Database

Pada perancangan struktur table database ini dibutuhkan karena pada

website SMA Antartika Sidoarjo memiliki data penyimpanan dari hasil inputan

form pendaftaran siswa baru, kolom komentar dan buku tamu. Database ini dibuat

di MySQL pada aplikasi XAMPP.

A. Conceptual Data Model (CDM)

Gambar 3.8 Conceptual Data Model

Relationship_1

Relationship_2

Relationship_3

Relationship_4

Relationship_5

Relationship_6

Relationship_7

Company Profile

Id_Halaman

Judul

Isi Halaman

Tgl_Posting

Gambar

Username

Dibaca

Jam

Hari

<pi> Integer

Variable characters (100)

Text (100)

Date

Variable characters (100)

Variable characters (50)

Integer

Time

Variable characters (20)

<M>

Identifier_1 <pi>

Komentar

Id_komentar

Nama

Isi

Jam

Email

<pi> Integer

Variable characters (100)

Text (100)

Time

Variable characters (50)

<M>

Identifier_1

...

<pi>

BukuTamu

Id_Buku Tamu

Nama

Email

Pesan

Tanggal

Jam

<pi> Integer

Variable characters (50)

Variable characters (50)

Text (100)

Date

Time

<M>

Identifier_1

...

<pi>

PPDB

Id_Pendaftaran

Nama

Jenis Kelamin

TTL

Alamat

Asal Sekolah

No Tlp

Email

Agama

Wali

Pekerjaan

Tgl_Daftar

<pi> Integer

Variable characters (50)

ENUM

Variable characters (50)

Variable characters (100)

Variable characters (50)

Variable characters (20)

Variable characters (50)

Variable characters (20)

Variable characters (20)

Variable characters (50)

Date

<M>

Identifier_1

...

<pi>

Kontak Kami

Id_Hubungi

Nama

Email

Subject

Pesan

Tanggal

Jam

<pi> Integer

Variable characters (50)

Variable characters (50)

Variable characters (50)

Text (100)

Date

Time

<M>

Identifier_1

...

<pi>

Berita

Id_Berita

Username

Judul

Isi Berita

Keterangan

Hari

Tanggal

Jam

Gambar

<pi> Integer

Variable characters (50)

Variable characters (100)

Text (100)

Text (100)

Variable characters (20)

Date

Time

Variable characters (100)

<M>

Identifier_1

...

<pi>

Artikel

Id_Artikel

Username

Judul

Isi Artikel

Keterangan

Hari

Tanggal

Jam

Gambar

<pi> Integer

Variable characters (50)

Variable characters (100)

Text (100)

Text (100)

Variable characters (20)

Date

Time

Variable characters (100)

<M>

Identifier_1

...

<pi>

Galeri

Id_galeri

Id_album

Username

Judul

Keterangan

Gambar

<pi> Integer

Integer

Variable characters (50)

Variable characters (100)

Text (100)

Variable characters (100)

<M>

Identifier_1

...

<pi>

Page 12: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

12

12

B. Physical Data Model (PDM)

Gambar 3.9 Physical Data Model

C. Struktur Tabel

1. Table Buku Tamu

Nama : Buku Tamu

Primary Key : ID_buku tamu

Foreign Key : -

Fungsi : Menyimpan daftar buku tamu.

Tabel 3.1 Buku Tamu

No Name Data Type Length Index Extra

1 ID_buku tamu Int 10 PK

2 Nama Varchar 50

3 Email Varchar 100

Company Profile

Id_Halaman

Id_Artikel

Id_komentar

Id_Berita

Id_Hubungi

Id_Pendaftaran

Id_Buku Tamu

Id_galeri

Judul

Isi Halaman

Tgl_Posting

Gambar

Username

Dibaca

Jam

...

integer

integer

integer

integer

integer

integer

integer

integer

varchar(100)

long varchar

date

varchar(100)

varchar(50)

integer

time

varchar(20)

<pk>

<fk2>

<fk6>

<fk3>

<fk4>

<fk7>

<fk1>

<fk5>

Komentar

Id_komentar

Nama

Isi

Jam

Email

...

integer

varchar(100)

long varchar

time

varchar(50)

<pk>

BukuTamu

Id_Buku Tamu

Nama

Email

Pesan

Tanggal

Jam

...

integer

varchar(50)

varchar(50)

long varchar

date

time

<pk>

PPDB

Id_Pendaftaran

Nama

Jenis Kelamin

TTL

Alamat

Asal Sekolah

No Tlp

Email

Agama

Wali

Pekerjaan

Tgl_Daftar

...

integer

varchar(50)

ENUM

varchar(50)

varchar(100)

varchar(50)

varchar(20)

varchar(50)

varchar(20)

varchar(20)

varchar(50)

date

<pk>

Kontak Kami

Id_Hubungi

Nama

Email

Subject

Pesan

Tanggal

Jam

...

integer

varchar(50)

varchar(50)

varchar(50)

long varchar

date

time

<pk>

Berita

Id_Berita

Username

Judul

Isi Berita

Keterangan

Hari

Tanggal

Jam

Gambar

...

integer

varchar(50)

varchar(100)

long varchar

long varchar

varchar(20)

date

time

varchar(100)

<pk>

Artikel

Id_Artikel

Username

Judul

Isi Artikel

Keterangan

Hari

Tanggal

Jam

Gambar

...

integer

varchar(50)

varchar(100)

long varchar

long varchar

varchar(20)

date

time

varchar(100)

<pk>

Galeri

Id_galeri

Id_album

Username

Judul

Keterangan

Gambar

...

integer

integer

varchar(50)

varchar(100)

long varchar

varchar(100)

<pk>

Page 13: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

13

13

No Name Data Type Length Index Extra

4 Pesan Text 100

5 Tanggal Date

6 Jam Time

2. Table Kontak Kami

Nama : Kontak Kami

Primary Key : Id_hubungi

Foreign Key : -

Fungsi : Menyimpan data pesan yang dikirim ke pengelola website.

Table 3.2 Kontak Kami

No Name Data Type Length Index Extra

1 Id_hubungi Integer 10 PK AI

2 Nama Varchar 50

3 Email Varchar 100

4 Subject Varchar 50

5 Pesan Varchar 100

6 Tanggal Date

7 Jam Time

3. Table PPDB

Nama : PPDB

Primary Key : Id_pendaftaran

Foreign Key : -

Fungsi : Menyimpan inputan dari form pendaftaran yang ada di website.

Page 14: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

14

14

Table 3.3 PPDB

No Name Data Type Length Index Extra

1 Id_pendaftaran Int 10 PK AI

2 Nama Varchar 50

3 Jenis Kelamin ENUM L,P

4 TTL Varchar 50

5 Alamat Int 5

6 Asal Sekolah Int 5

7 No Tlp Varchar 20

8 Email Varchar 50

9. Agama Varchar 20

10. Wali Varchar 20

11. Pekerjaan Varchar 50

12. Tgl Daftar Date

4. Table Komentar

Nama : Komentar

Primary Key : Id_komentar

Foreign Key : -

Fungsi : Menyimpan data komentar yang ada di website.

Table 3.4 Komentar

No Name Data Type Length Index Extra

1 Id_komentar Int 5 PK AI

2 Nama Varchar 100

3 Isi Text 100

4 Jam Time 100

Page 15: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

15

15

No Name Data Type Length Index Extra

5 Email Varchar 50

5. Table Company Profile

Nama : Company Profile

Primary Key : ID_Halaman

Foreign Key : Id_buku Tamu, Id_artikel, Id_Berita, Id_Hubungi, Id_Galeri,

Id_Komentar, Id_pendaftaran.

Fungsi : Menyimpan data Company Profile yang ada di website.

Tabel 3.5 Company Profile

No Name Data Type Length Index Extra

1 ID_Halaman Int 10 PK AI

2 Id_Komentar Int 10 Fk6

3 Id_buku Tamu Int 10 Fk1

4 Id_Galeri Int 10 Fk5

5 Id_Berita Int 10 Fk3

6 Id_Hubungi Int 10 Fk4

7 Id_pendaftaran Int 10 Fk7

8 Id_artikel Int 10 Fk2

9 Judul Varchar 100

10 Isi Halaman Text

11 Tgl_Posting Date

12 Gambar Varchar 100

13 Username Varchar 50

14 Dibaca Int

Page 16: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

16

16

No Name Data Type Length Index Extra

15 Jam Time

16 Hari Varchar 20

6. Table Berita

Nama : Berita

Primary Key : Id_berita

Foreign Key : -

Fungsi : Menyimpan data berita yang ada di website.

Tabel 3.6 Berita

No Name Data Type Length Index Extra

1 Id_berita Int 10 PK AI

2 Username Varchar 100

3 Judul Varchar 100

4 Isi Berita Text

5 Keterangan Text

6 Hari Varchar 20

7 Tanggal Date

8 Jam Time

9 Gambar Varchar 100

7. Table Artikel

Nama : Artikel

Primary Key : Id_Artikel

Foreign Key : -

Page 17: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

17

17

Fungsi : Menyimpan data artikel yang ada di website.

Tabel 3.7 Artikel

No Name Data Type Length Index Extra

1 Id_Artikel Int 10 PK AI

2 Username Varchar 100

3 Judul Varchar 100

4 Isi Artikel Text

5 Keterangan Text

6 Hari Varchar 20

7 Tanggal Date

8 Jam Time

9 Gambar Varchar 100

8. Table Galeri

Nama : Galeri

Primary Key : Id_Galeri

Foreign Key : -

Fungsi : Menyimpan data galeri yang ada di website.

Tabel 3.8 Galeri

No Name Data Type Length Index Extra

1 Id_Galeri Int 10 PK AI

2 Id_album Int 10

3 Username Varchar 50

4 Judul Varchar 100

5 Keterangan Text

Page 18: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

18

18

6 Gambar Varchar 100

3.2.4 Desain Website

Pada tahap desain website ini dilakukan rancangan desain yang meliputi

pembuatan sitemap, layout website, menentukan font dan warna.

i. Site Map

Site Map baik bagi website untuk menemukan lokasi halaman dengan

mudah. Untuk menggambarkan model tersebut digunakan ilustrasi dengan

hierarchy model tree yang bertujuan agar user friendly.

Website SMA Antartika Sidoarjo

Home Profile Informasi Kesiswaan PPDB Online Interaksi Galeri Foto

Profil Sekolah

Visi Misi

Struktur Organisasi

Fasilitas

Berita

Artikel

Video

Prestasi Siswa

Ekstrakulikuler

Info PPDB

Form PPDB

Hasil Seleksi

Kontak Kami

Buku Tamu

Gambar 3.10 Site Map

ii. Font

Jenis font yang digunakan pada website Company Profile SMA Antartika

Sidoarjo adalah Century Gothic. Jenis huruf ini dipilih karena mengikuti font logo

perusahaan. Century Gothic merupakan jenis font yang tidak terlalu tebal namun

memiliki sifat keterbacaan yang jelas, dan mudah dipahami.

Page 19: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

19

19

Gambar 3.11 Font Century Gothic

iii. Warna

Berdasarkan pada color chart kobayashi, warna yang sesuai dengan

keyword yang di butuhkan, mengarah pada cool casual, Sifat cool casual sangat

cocok dan efisien diperlukan dalam proses pengenalan identitas sekolah kepada

masyarakat dan calon peserta didik yang dapat memberikan informasi yang jelas,

yang nanti akan digunakan di website company profile SMA Antartika sidoarjo,

color chart warna dapat dilihat pada Gambar 3.12

Page 20: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

20

20

Gambar 3.12 Color Chart Kobayashi

iv. Layout

Kerangka ini terdiri atas header, content, dan footer. Pada header

terdapat menu yang berisikan home, profile sekolah yang terdiri atas SMA

Antartika Sidoarjo, informasi kegiatan sekolah, kesiswaan, pendaftaran siswa baru

dan kontak. Sidebar berisi link social media atau iklan dan mesin pencarian.

Content berisikan informasi apa saja yang akan disampaikan sekolah, sedangkan

footer berisikan copyright sekolah.

Page 21: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

21

21

1. Form Login

Gambar 3.13 Login

Halaman Login, Admin memasukan nama dan kata sandi untuk masuk ke dalam

halaman admin.

2. Form Admin

Gambar 3.14 Halaman Admin

Page 22: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

22

22

Halaman admin adalah tempat pengelolaan website Antartika Sidoarjo seperti

mengisi visi misi sekolah, melayani pendaftaran siswa baru dan menulis artikel.

3. Form Home

Gambar 3.15 Home

Untuk halaman home ini berisi slide show yang menampilkan foto lalu

dibawahnya terdapat artikel sebagai bacaan pembaca untuk di side bar terdapat

iklan yang berhubungan dengan pendidikan.

Page 23: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

23

23

4. Form Profile

Gambar 3.16 Profile

Pada tab profile ini berisi company profile seperti sejarah, visi misi dan tujuan

dari SMA Antartika Sidoarjo.

5. Form Informasi

Gambar 3.17 Informasi

Page 24: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

24

24

Pada tab informasi ini berisi informasi tentang fasilitas sekolah, prestasi dan

kegiatan apa saja yang ada disekolah.

6. Form Kesiswaan

Gambar 3.18 Kesiswaan

Pada tab kesiswaan ini berisi informasi tentang yang ditujukan kepada siswa

seperti extrakulikuler, pengumuman tentang jadwal sekolah dan kegiatan siswa.

Page 25: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

25

25

7. Form PPDB

Gambar 3.19 Pendaftaran siswa baru

Pada tab PPDB ini berisi form pendaftaran online untuk siswa baru yang akan

mendaftar di SMA Antartika Sidoarjo.

8. Form Kontak

Gambar 3.20 Kontak

Page 26: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

26

26

Pada tab kontak ini berisi informasi tentang website untuk pengunjung dapat

mengisi buku tamu dan dapat memberikan komentar.

3.2.5 Desain Uji Coba

Pada tahap desain uji coba, sistem yang telah dibuat akan di uji menurut

fungsional masing-masing form sesuai dengan metode yang digunakan yaitu

metode Black Box. Pada tabel ini merupakan desain uji coba yang direncanakan

pada saat uji coba form.

Tabel 3.9 Desain Uji Coba

No Tujuan Input Output yang diharapkan

1. Menampilkan berita, artikel dan video

Data berita, artikel dan video

Tampil berita, artikel dan video

2. Mengedit berita, artikel dan video

Data berita, artikel dan video

Update berita, artikel dan video

3. Menghapus berita, artikel dan video

Data berita, artikel dan video

Hapus berita, artikel dan video

4. Mengupload foto Data foto kegiatan sekolah

Tampil foto kegiatan sekolah

5. Mengedit foto Data foto kegiatan sekolah

Update foto kegiatan sekolah

6. Menghapus foto Data foto kegiatan sekolah

Hapus foto kegiatan sekolah

7. Menampilkan profile,visi misi, struktur, fasilitas, ekstrakulikuler dan prestasi siswa

Data profile,visi misi, struktur, fasilitas, ekstrakulikuler dan prestasi siswa

Tampil profile,visi misi, struktur, fasilitas, ekstrakulikuler dan prestasi siswa

8. Mengedit profile,visi misi, struktur, fasilitas, ekstrakulikuler dan prestasi siswa

Data profile,visi misi, struktur, fasilitas, ekstrakulikuler dan prestasi siswa

Update profile,visi misi, struktur, fasilitas, ekstrakulikuler dan prestasi siswa

9. Menghapus profile,visi misi, struktur, fasilitas,

Data profile,visi misi, struktur, fasilitas,

Hapus profile,visi misi, struktur, fasilitas,

Page 27: BAB III METODE PENELITIAN - sir.stikom.edusir.stikom.edu/2062/5/BAB_III.pdf · kelebihan dalam tampilan yang menarik seperti slide show pada halaman ... mempunyai peran penting sebagai

27

27

No Tujuan Input Output yang diharapkan

ekstrakulikuler dan prestasi siswa

ekstrakulikuler dan prestasi siswa

ekstrakulikuler dan prestasi siswa

10 Menampilkan data buku tamu yang masuk

Data buku tamu yang masuk

Tampil buku tamu

11 Menghapus data buku tamu yang masuk

Data buku tamu yang masuk

Hapus buku tamu

12 Menampilkan data kontak yang masuk

Data kontak yang masuk Tampil kontak

13 Menghapus data kontak yang masuk

Data kontak yang masuk Hapus kontak

14 Menampilkan data komentar yang masuk

Data komentar yang masuk

Tampil komentar

15 Menghapus data komentar yang masuk

Data komentar yang masuk

Hapus komentar

16 Menentukan daya tampung dan nilai kelulusan

Data daya tampung dan nilai kelulusan

Tampil daya tampung dan nilai kelulusan

17 Menampilan data calon siswa yang masuk

Data calon siswa Tampil data calon siswa yang masuk

18 Mengedit calon siswa Data calon siswa Update data calon siswa

19 Menyimpan data calon siswa dalam bentuk PDF

Data calon siswa Menyimpan data calon siswa dalam bentuk PDF

20 Menampilan data hasil seleksi calon siswa

Data calon siswa Tampil data hasil seleksi calon siswa

21 Mengedit data hasil seleksi calon siswa

Data calon siswa Update data hasil seleksi calon siswa

22 Menghapus data hasil seleksi calon siswa

Data calon siswa Menghapus data hasil seleksi calon siswa

23 Menyimpan data hasil seleksi calon siswa dalam bentuk PDF

Data calon siswa Menyimpan data hasil seleksi calon siswa dalam bentuk PDF