BAB III METODE PENELITIAN. Metode yang digunakan dalam proses pembuatan website company

dokumen-dokumen yang mirip
BAB III METODOLOGI DAN PERANCANGAN KARYA

BAB IV HASIL DAN PEMBAHASAN. Implementasi ini akan menjelaskan detil Company Profile di SMA

BAB IV DESKRIPSI PEKERJAAN

BAB IV DESKRIPSI PEKERJAAN

BAB IV DESKRIPSI PEKERJAAN. Berdasarkan hasil survey yang dilakukan pada saat kerja praktek di CV.

JSIKA Vol. 5, No. 12, Tahun 2016 ISSN X

BAB IV PERANCANGAN SISTEM

BAB IV DESKRIPSI PEKERJAAN. masyarakat (Humas) dalam hal ini bertujuan membantu mengembangkan sistem

BAB III ANALISIS DAN PERANCANGAN SISTEM. 2. Analisa permasalahan dan perancangan sistem

BAB IV DESKRIPSI PEKERJAAN. ada di atas maka diperlukan langkah-langkah sebagai berikut: 4. Melakukan Pembahasan terhadap Implementasi Sistem.

BAB IV DESKRIPSI PEKERJAAN

BAB IV DESKRIPSI PEKERJAAN. sistem. Menurut Kendall & Kendall (2003), perangkat atau teknik

BAB IV DESKRIPSI PEKERJAAN

BAB IV DESKRIPSI PEKERJAAN. tersebut. Menurut Satzinger, J.W., Jackson, R.B., & Burd, S.D. (2010, p4)

BAB IV PERANCANGAN SISTEM. harus menyerahkan data kompetensi siswa kepada pihak staff PSG untuk

BAB IV DESKRIPSI KERJA PRAKTEK. Pada bab ini akan dibahas mengenai tahap yang dilakukan dalam

BAB III METODOLOGI DAN PERANCANGAN KARYA. berdasarkan SDLC (System Development Life Cycle) dimana SDLC didefinisikan

BAB III METODOLOGI DAN PERANCANGAN KARYA. Pada BAB ini dijelaskan tentang Metodologi Penelitian, Study Existing, dan

BAB IV DESKRIPSI KERJA PRAKTEK. mengelola data-data pengumuman dan agenda kegiatan secara terintegrasi.

BAB IV ANALISIS DAN PERANCANGAN. (planning system) dan sebelum tahap sistem desain (design system). Tahap

BAB III CARA DAN METODOLOGI PENELITIAN

Bab III. PERANCANGAN SISTEM

BAB III ANALISIS DAN DESAIN SISTEM

BAB 4 HASIL DAN PEMBAHASAN

BAB III ANALISA DAN PERANCANGAN SISTEM

BAB III ANALISIS DAN PERANCANGAN SISTEM. departemen Health, Safety dan Environment (HSE) PT Bangun Sarana Baja,

BAB III PEMBAHASAN. Pelaksanaan kerja praktek dilaksanakan di Dinas Energi dan Sumber Daya

BAB III ANALISA DAN PERANCANGAN

BAB IV DISKRIPSI PEKERJAAN

BAB IV ANALISIS DAN PERANCANGAN. suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya

BAB 3 PERANCANGAN SISTEM. sistem baik yang lama maupun untuk mulai memiliki sistem yang baru. Perancangan

BAB IV HASIL DAN PEMBAHASAN. masalah tersebut. Untuk mengatasi masalah yang terjadi maka diperlukan

BAB IV SISTEM DAN IMPLEMENTASI. Indonesia Tbk. diperoleh data secara langsung dari manager operasional yang

BAB IV ANALISIS DAN PERANCANGAN. diidentifikasi lalu dicarikan solusinya. Dalam tahap ini akan diuraikan beberapa

BAB IV DESKRIPSI PEKERJAAN. mendapatkan tugas dan di tempatkan pada bagian Bagian Bagian Tata Usaha dalam

BAB IV DESKRIPSI PEKERJAAN

BAB IV ANALISIS DAN PERANCANGAN SISTEM. merancang dan membangun aplikasi menggunakan konsep System Development

BAB III ANALISIS DAN PERANCANGAN SISTEM

BAB IV HASIL DAN PEMBAHASAN

BAB IV DESKRIPSI KERJA PRAKTEK. yang akan diolah, kebutuhan dari solusi permasalahan, dan output yang akan

BAB III ANALISIS DAN PERANCANGAN SISTEM. tindakan solusi yang tepat untuk menyelesaikan masalah tersebut.

BAB IV DESKRIPSI KERJA PRAKTEK 1. Berdasarkan hasil survey yang dilakukan pada saat kerja praktek di PT

BAB III PERANCANGAN SISTEM

BAB III ANALISIS DAN DESAIN SISTEM

BAB III ANALISIS DAN PERANCANGAN SISTEM

BAB IV DESAIN DAN IMPLEMENTASI SISTEM. menjelaskan siapa pengguna (user) sistem, apa saja yang akan dilakukan oleh

BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN SISTEM. diambil pada bagian administrasi PT TAMBANGAN RAYA PERMAI. Selain

BAB IV HASIL PRAKTEK KERJA DAN ANALISIS. penjual dan pihak pembeli. Sistem informasi akuntasi penjualan di CV. Kasih Karunia

BAB IV DESKRIPSI PEKERJAAN. Berdasarkan hasil wawancara di perusahaan tersebut terdapat

BAB IV DESKRIPSI PEKERJAAN. kertas. Pencatatan stok dilakukan dengan cara mengecek jumlah stok barang

BAB IV DESAIN DAN IMPLEMENTASI SISTEM. permasalahan yang ada di PT. Barata Indonesia (Persero). Untuk memperoleh

BAB IV DESKRIPSI KERJA PRAKTEK. pelaporan dalam struktur organisasi PT. PLN (Persero) JMK UMK II

BAB IV HASIL DAN PEMBAHASAN

BAB IV ANALISIS DAN PERANCANGAN. singkat keterangan flowchart tersebut adalah sebagai berikut. User yang mengunjungi

BAB IV. lebih detailnya, bisa dilihat pada gambar 4.1 dibawah ini. dan dikategorikan sesuai dengan kategori dokumen tersebut. Sistem arsip disini

Dalam penyelesaian proyek kerja praktek pada PT. Pelabuhan Indonesia. analisa, perancangan dan pengembangan program. Hal-hal tersebut berkaitan

BAB IV DESKRIPSI PEKERJAAN. data, selanjutnya melakukan tahapan sebagai berikut: menyajikan suatu rancangan langkah kerja dari sistem yang baru.

BAB III ANALISIS DAN DESAIN SISTEM

BAB II. Analisis Perancangan Sistem. Analisis sistem merupakan kegiatan penguraian suatu sistem informasi

BAB IV DISKRIPSI PEKERJAAN. pada bapak Kepala Sekolah dan bagian akademik untuk mendapatkan informasi

BAB III ANALISIS DAN DESAIN SISTEM

BAB V PENGUJIAN DAN IMPLEMENTASI SISTEM. dimana sistem yang baru ini dapat dioperasikan secara menyeluruh. Implementasi

BAB IV DESKRIPSI PERKERJAAN

BAB III ANALISA DAN PERANCANGAN SISTEM

BAB III ANALISA DAN PERANCANGAN SISTEM

BAB IV DESKRIPSI PEKERJAAN. 4 kali dalam 1 minggu sesuai dengan kesepakatan penulis dengan pihak sekolah,

BAB IV DESKRIPSI KERJA PRAKTIK

BAB IV DESKRIPSI PEKERJAAN. berbeda dengan beberapa institusi pendidikan lain. Hal ini disebabkan karena

BAB IV DESKRIPSI KERJA PRAKTEK. praktik di CV. Dwitunggal Abadi, ada beberapa cara yang telah dilakukan, ditampilkan dalam web yang akan dibangun.

BAB III ANALISIS DAN PERANCANGAN

BAB IV DESKRIPSI PEKERJAAN

BAB III METODE PENELITIAN. penulisan dan penyusunan dalam laporan ini, metode tersebut adalah :

Gambar 3.1 Data Flow Diagram Level 0

BAB III DESAIN DAN PERANCANGAN

BAB IV TESTING DAN IMPLEMENTASI

BAB IV DESKRIPSI PEKERJAAN. perhitungan data presensi siswa yang dilakukan oleh wali kelas. Dalam

BAB III ANALISIS DAN PERANCANGAN

BAB III PERANCANGAN WEBSITE. Pelaksanaan perancangan dan realisasi website dilakukan dengan

BAB IV DESKRIPSI KERJA PRAKTEK. Sistem yang dibangun adalah Sistem Informasi Penjadwalan kegiatan

BAB IV DESKRIPSI PEKERJAAN

BAB III METODOLOGI 3.1 Analisis Kebutuhan Proses Bisnis Dari hasil observasi di lembaga Indonesia College, proses bisnis bimbingan privat di

BAB IV DESKRIPSI PEKERJAAN. barang terlebih dahulu, kemudian dicatat. Hasil dari catatan tersebut akan direkap

BAB IV DESKRIPSI PEKERJAAN

Bab III PERANCANGAN SISTEM

BAB IV DESKRIPSI PEKERJAAN. Berdasarkan hasil survey yang dilakukan pada saat kerja praktek di Total

BAB IV DESKRIPSI PEKERJAAN. dalam menganalisa, merancang dan mengembangkan program adalah: yang sekiranya dapat membantu pengembangan program.

BAB III ANALISIS DAN PERANCANGAN SISTEM. Pada bab ini dibahas tentang identifikasi permasalahan, analisis

BAB III ANALISIS DAN DESAIN SISTEM

BAB III ANALISIS DAN PERANCANGAN SISTEM. masyarakat serta lembaga usaha dalam menghadapi ancaman bencana.

BAB IV DISKRIPSI KERJA PRAKTIK. Analisis Masalah. masih secara manual. Hal ini menyebabkan instansi mengalami kesulitan dalam

BAB III ANALISIS DAN DESAIN SISTEM

DISKRIPSI PEKERJAAN. tahapan penelitian yang dilakukan adalah sebagai berikut.

BAB IV DESKRIPSI PEKERJAAN. Pembuatan program, Validasi sistem dan Implementasi Sistem.

BAB III ANALISIS DAN PERANCANGAN SISTEM

BAB IV DESKRIPSI PEKERJAAN

BAB I PENDAHULUAN. Perkembangan teknologi informasi telah memasuki babak baru. Di mana

BAB III ANALISIS DAN DESAIN SISTEM

BAB IV DESKRIPSI PEKERJAAN. kertas. Pencatatan stok dilakukan dengan cara mengecek jumlah stok barang

BAB IV DESKRIPSI PEKERJAAN. dilakukan secara manual dengan menggunakan kertas. Proses peminjaman pada PT

Transkripsi:

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: 1

2 Literatur Masalah Konsep Ide 1. Data 2. Planning 4. Desain 3. Analisis Warna Layout 5. Implementasi PHP, Mysql 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

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

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:

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.

6 Diagram alur keyword website company profile SMA Antartika Sidoarjo dapat dilihat pada Gambar 3.4. Perkotaan Intelektual Padat Pekerja keras Rational SMP SMA Aktif Ingin tahu Ulet Youthful COOL CASUAL Usia 15-45 Selektif Berpendidikan Simple Fresh Semua Kalangan Nyaman Hemat Sopan Cultivated 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

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

8 Diagram Proses input Output Input Proses Output Data Profil Sekolah Proses Profil Sekolah Tampilan Profil sekolah Data Visi,misi, sejarah Proses Visi,misi, sejarah Tampilan visi, misi, sejarah Data Struktur Organisasi Proses Struktur Organisasi Tampilan struktur organisasi Data Sarana Fasilitas Proses Sarana Fasilitas Tampilan sarana fasilitas Data Prestasi Siswa Proses Prestasi Siswa Tampilan prestasi siswa Data Ekstra kulikuler Proses Ekstra kulikuler Tampilan Ekstrakulik uler Data Pendaftara n Siswa Baru Proses Pendaftaran Siswa Baru Tampilan Pendaftara n Siswa Baru Data Kalender Sekolah Proses Kalender Sekolah Tampilan Kalender Sekolah Phase 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. 8

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 : Kontak kami Tambah edit hapus datacp Tambah edit hapus datag Buku tamu Data Komentar Tambah edit hapus datab Tambah edit hapus dataa buku tamu komentar Pengunjung web Informasi Sekolah 1 Website SMA Antartika Sidoarjo Kontak kami Konfirmasi Pendaftar Username,password Admin Komentar Buku tamu Kontak kami Konfirmasi Pendaftar Konfirmasi login data sekolah data pendaftar data komentar data kontak kami data buku tamu Calon siswa Data Pendaftar data galeri data artikel data berita 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. 9

10 1 Data Login Konfirmasi Login Informasi Sekolah 1.1 Login 1.2 Company Profile Username, password Tambah edit hapus datacp Data sekolah Data Pendaftar Konfirmasi pendaftar 2 Data Company Profile 1.3 PPDB Data Pendaftar Konfirmasi pendaftar Calon siswa 3 Data PPDB Pengunjung web data komentar Komentar 1.4 Komentar 4 Data Komentar data komentar Komentar Admin Data Buku tamu Buku Tamu 1.5 Buku Tamu Buku Tamu Data Buku tamu data galeri 5 Buku tamu 1.6 Galeri data galeri Tambah edit hapus datag 6 Galeri data artikel 1.7 Artikel 7 Artikel Tambah edit hapus dataa data artikel Data berita 1.8 Berita Tambah edit hapus datab Data berita 8 Berita data kontak kami Kontak kami 1.9 Kontak kami Kontak kami data kontak kami 9 Kontak Kami Gambar 3.7 DFD Level 0 10

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) Artikel Id_Artikel Username Judul Isi Artikel Keterangan Hari Tanggal Jam Gambar <pi> Integer Variable characters (100) Text (100) Text (100) Variable characters (20) Date Time Variable characters (100) <M> Identifier_1 <pi> Relationship_3 Relationship_4 Id_Buku Tamu Email Pesan Tanggal Jam <pi> Identifier_1 <pi> BukuTamu Relationship_2 Company Profile Id_Halaman <pi> Integer <M> Judul Variable characters (100) Isi Halaman Text (100) Tgl_Posting Date Gambar Variable characters (100) Username Dibaca Integer Jam Time Hari Variable characters (20) Identifier_1 <pi> Integer <M> Text (100) Date Time Relationship_1 Relationship_7 Id_Pendaftaran Jenis Kelamin TTL Alamat Asal Sekolah No Tlp Email Agama Wali Pekerjaan Tgl_Daftar Identifier_1 <pi> Id_komentar Isi Jam Email <pi> Identifier_1 <pi> <pi> PPDB Integer <M> ENUM Variable characters (100) Variable characters (20) Variable characters (20) Variable characters (20) Date Komentar Integer <M> Variable characters (100) Text (100) Time Berita Id_Berita Username Judul Isi Berita Keterangan Hari Tanggal Jam Gambar <pi> Integer Variable characters (100) Text (100) Text (100) Variable characters (20) Date Time Variable characters (100) <M> Identifier_1 <pi> Id_Hubungi Email Subject Pesan Tanggal Jam Relationship_5 <pi> Identifier_1 <pi> Kontak Kami Relationship_6 Integer <M> Text (100) Date Time Galeri Id_galeri Id_album Username Judul Keterangan Gambar <pi> Integer Integer Variable characters (100) Text (100) Variable characters (100) <M> Identifier_1 <pi> Gambar 3.8 Conceptual Data Model 11

12 B. Physical Data Model (PDM) Id_Buku Tamu Email Pesan Tanggal Jam... Id_Artikel Username Judul Isi Artikel Keterangan Hari Tanggal Jam Gambar... BukuTamu Artikel long varchar date time varchar(100) long varchar long varchar varchar(20) date time varchar(100) <pk> <pk> 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... Company Profile varchar(100) long varchar date varchar(100) time varchar(20) <pk> <fk2> <fk6> <fk3> <fk4> <fk7> <fk1> <fk5> Id_Pendaftaran Jenis Kelamin TTL Alamat Asal Sekolah No Tlp Email Agama Wali Pekerjaan Tgl_Daftar... Id_komentar Isi Jam Email... PPDB ENUM varchar(100) varchar(20) varchar(20) varchar(20) date Komentar varchar(100) long varchar time <pk> <pk> Id_Berita Username Judul Isi Berita Keterangan Hari Tanggal Jam Gambar... Berita varchar(100) long varchar long varchar varchar(20) date time varchar(100) <pk> Id_Hubungi Email Subject Pesan Tanggal Jam... Kontak Kami long varchar date time <pk> Gambar 3.9 Physical Data Model Id_galeri Id_album Username Judul Keterangan Gambar... Galeri varchar(100) long varchar varchar(100) <pk> C. Struktur Tabel 1. Table Buku Tamu : 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 Varchar 50 3 Email Varchar 100 12

13 No Name Data Type Length Index Extra 4 Pesan Text 100 5 Tanggal Date 6 Jam Time 2. Table Kontak Kami : 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 Varchar 50 3 Email Varchar 100 4 Subject Varchar 50 5 Pesan Varchar 100 6 Tanggal Date 7 Jam Time 3. Table PPDB : PPDB Primary Key : Id_pendaftaran Foreign Key : - Fungsi : Menyimpan inputan dari form pendaftaran yang ada di website. 13

14 Table 3.3 PPDB No Name Data Type Length Index Extra 1 Id_pendaftaran Int 10 PK AI 2 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 : 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 Varchar 100 3 Isi Text 100 4 Jam Time 100 14

15 No Name Data Type Length Index Extra 5 Email Varchar 50 5. Table Company Profile : 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 15

16 No Name Data Type Length Index Extra 15 Jam Time 16 Hari Varchar 20 6. Table Berita : 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 : Artikel Primary Key : Id_Artikel Foreign Key : - 16

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 : 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 17

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 Berita Prestasi Siswa Info PPDB Kontak Kami Visi Misi Artikel Ekstrakulikuler Form PPDB Buku Tamu Struktur Organisasi Video Hasil Seleksi Fasilitas 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. 18

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 19

20 iv. Layout Gambar 3.12 Color Chart Kobayashi 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. 20

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 21

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. 22

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 23

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. 24

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 25

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 2. Mengedit berita, artikel dan video 3. Menghapus berita, artikel dan video Data berita, artikel dan video Data berita, artikel dan video Data berita, artikel dan video Tampil berita, artikel dan video Update berita, artikel dan video Hapus berita, artikel dan video 4. Mengupload foto Data foto kegiatan sekolah 5. Mengedit foto Data foto kegiatan sekolah 6. Menghapus foto Data foto kegiatan sekolah Tampil foto kegiatan sekolah Update foto kegiatan sekolah Hapus foto kegiatan sekolah 7. Menampilkan profile,visi struktur, ekstrakulikuler prestasi siswa misi, fasilitas, dan 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 9. Menghapus profile,visi misi, struktur, fasilitas, Data profile,visi misi, struktur, fasilitas, ekstrakulikuler dan prestasi siswa Data profile,visi misi, struktur, fasilitas, Update profile,visi misi, struktur, fasilitas, ekstrakulikuler dan prestasi siswa Hapus profile,visi misi, struktur, fasilitas, 26

27 No Tujuan Input Output yang diharapkan ekstrakulikuler prestasi siswa dan ekstrakulikuler prestasi siswa dan ekstrakulikuler prestasi siswa dan 10 Menampilkan data buku tamu yang masuk 11 Menghapus data buku tamu yang masuk 12 Menampilkan data kontak yang masuk 13 Menghapus data kontak yang masuk 14 Menampilkan data komentar yang masuk 15 Menghapus data komentar yang masuk 16 Menentukan daya tampung dan nilai kelulusan 17 Menampilan data calon siswa yang masuk Data buku tamu yang masuk Data buku tamu yang masuk Data kontak yang masuk Data kontak yang masuk Data komentar yang masuk Data komentar yang masuk Data daya tampung dan nilai kelulusan Data calon siswa Tampil buku tamu Hapus buku tamu Tampil kontak Hapus kontak Tampil komentar Hapus komentar Tampil daya tampung dan nilai kelulusan 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 21 Mengedit data hasil seleksi calon siswa Data calon siswa Data calon siswa Tampil data hasil seleksi calon siswa Update data hasil seleksi calon siswa 22 Menghapus data hasil seleksi calon siswa 23 Menyimpan data hasil seleksi calon siswa dalam bentuk PDF Data calon siswa Menghapus data hasil seleksi calon siswa Data calon siswa Menyimpan data hasil seleksi calon siswa dalam bentuk PDF 27