Entity Relationship Diagram ERD Flowchart

41

3.6 Entity Relationship Diagram ERD

ERD merupakan suatu model untuk menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi. Di bawah ini adalah ERD untuk membuat Website yang akan dirancang. Berikut Gambar 3.6 ERD Website Komunitas D3 Teknik Informatika Gambar 3.6 ERD Website Komunitas Universitas Sumatera Utara 42 Dari ERD pada pembahasan sebelumnya, mempunyai keterangan sebagai berikut: 1. Tabel Identitas mempunyai atribut id_nim, nim, dan active memerlukan verifikasi dari mahasiswa yang mempunyai nim dari mahasiswa pada saat registerasi untuk menjadi member di Website komunitas D3 Teknik Informatika. 2. Tabel data diri yang mempunyai atribut username, password dapat mengupload gambar yang mempunyai atribut id_gambar, nama_gambar, dan kapan gambar tersebut di-upload. 3. Tabel data mempunyai atribut username dan password dapat sharing informasi yang diwakili oleh atribut id_informasi, isi, dan time yang artinya kapan informasi tersebut dikirm. 4. Tabel data diri yang mempunyai atribut username dan password dapat memberikan komentar kepada suatu informasi tertentu. Komentar tersebut sendiri diwakili oleh atribut isi komentar, id_komentar dan time yang artinya kapan komentar tersebut dikirim. 5. Tabel data diri yang mempunyai atribut username dan password dapat mengirim pesan kepada member lain. Tabel pesan sendiri diwakili oleh atribut id_pesan, isi pesan, dan kapan pesan tersebut dikirim. Universitas Sumatera Utara 43

3.7 Rancangan User Interface

User Interface adalah mekanisme komunikasi antara pengguna atau user dengan sistem. Berikut rancangan user interface:

3.7.1 Rancangan Output

1. Halaman Home Website Komunitas D3 Teknik Informatika Sumatera Utara Komunitas D3 Teknik Informatika Universitas Sumatera Utara nama_profile Pesan Kirim Pesan Lihat Pesan Pesan Terkirim Image Upload Image Foto Galeri Notifikasi Pesan Masuk Pesan Balasan Copyright 2012 WITA Gambar 3.7 Halaman Home Website Komunitas Nama User Beranda Nama User Search Sharing Informasi Gambar pemberi informasi Nama pemberi informasi Isi Informasi Isi Komentar More Gambar Profile Universitas Sumatera Utara 44 2. Halaman Output Website lengkap Data AlumniMahasiswa Komunitas D3 Teknik Informatika Universitas Sumatera Utara Nama Profile Pesan Kirim Pesan Lihat Pesan Pesan Terkirim Image Upload Image Foto Galeri Notifikasi Pesan Masuk Pesan Balasan NIM : |||| Nama Lengkap : |||| Email : |||| Status : |||| Handphone : |||| Tanggal Lahir : |||| Copyright 2012 WITA Gambar 3.8 Halaman Output Website Lengkap Data AlumniMahasiswa Nama User Beranda Nama User Search Gambar Profile Gambar Profile Universitas Sumatera Utara 45 3. Halaman Galeri Foto Komunitas D3 Teknik Informatika Universitas Sumatera Utara nama_profile Pesan Kirim Pesan Lihat Pesan Pesan Terkirim Image Upload Image Foto Galeri Notifikasi Pesan Masuk Pesan Balasan Galeri Foto 1 2 Copyright 2012 WITA Gambar 3.9 Halaman Galeri Foto Nama User Beranda Nama User Search Image Image Image Image Gambar Profile Universitas Sumatera Utara 46 4. Halaman Pesan Masuk dan Pesan Terkirim Komunitas D3 Teknik Informatika Universitas Sumatera Utara nama_profile Pesan Kirim Pesan Lihat Pesan Pesan Terkirim Image Upload Image Foto Galeri Notifikasi Pesan Masuk Pesan Balasan Pesan Masuk Dari: |||| Waktu : |||| Pesan : |||| Copyright 2012 WITA Gambar 3.10 Halaman Pesan Masuk dan Pesan Terkirim Nama User Beranda Nama User Search Gambar Profile Universitas Sumatera Utara 47 5. Halaman admin Website pengolahan data AlumniMahasiswa Admin Home Manage Users Manage Informasi Manage Admin AlumniMahasiswa NIM Yang Sudah Aktif: |||| NIM Yang Belum Aktif: |||| Posting Terbaru |||| Posting Paling Dibahas |||| Data AlumniMahasaiswa Yang Aktif di Website komunitas Pilih Semua Username NIM Tanggal Lahir Details Edit |||| ||| |||| |||| |||| Copyright 2012 WITA Gambar 3.11 Halaman Admin Website Pengolahan Data AlumniMahasiswa √ HAPUS BATAL Universitas Sumatera Utara 48 6. Halaman admin Website pengolahan data Informasi Admin Home Manage Users Manage Informasi Manage Admin AlumniMahasiswa NIM Yang Sudah Aktif: |||| NIM Yang Belum Aktif: |||| Posting Terbaru |||| Posting Paling Dibahas |||| Data Informasi Pilih Semua Username Isi Date Posting Details |||| ||| |||| |||| Copyright 2012 WITA Gambar 3.12 Halaman Admin Website Pengolahan Data Informasi HAPUS BATAL √ Universitas Sumatera Utara 49 7. Halaman Details Website Pengolahan Informasi dan Komentar Admin Home Manage Users Manage Informasi Manage Admin AlumniMahasiswa NIM Yang Sudah Aktif: |||| NIM Yang Belum Aktif: |||| Posting Terbaru |||| Posting Paling Dibahas |||| Posting Oleh: |||| Waktu: |||| Suka: |||| Tidak Suka: ||| Komentar: Copyright 2012 WITA Gambar 3.13 Halaman Details Website Pengolahan Informasi dan Komentar Dikomentari Oleh: ||| isi komentar : ||| X Universitas Sumatera Utara 50 8. Halaman Admin Pengolahan Data Admin Admin Home Manage Users Manage Informasi Manage Admin AlumniMahasiswa NIM Yang Sudah Aktif: |||| NIM Yang Belum Aktif: |||| Posting Terbaru |||| Posting Paling Dibahas |||| Pilih Semua Username password Edit |||| ||| |||| Copyright 2012 WITA Gambar 3.14 Halaman Admin Pengolahan Data Admin √ HAPUS BATAL Universitas Sumatera Utara 51

3.7.2 Rancangan Input

1. Halaman InputUpload Gambar Website Komunitas Komunitas D3 Teknik Informatika Universitas Sumatera Utara nama_profile Pesan Kirim Pesan Lihat Pesan Pesan Terkirim Image Upload Image Foto Galeri Notifikasi Pesan Masuk Pesan Balasan Upload Gambar Pilih Gambar: Copyright 2012 WITA Gambar 3.15 Halaman InputUpload Gambar Website Komunitas Nama User Beranda Nama User Search Browse Upload Gambar Profile Universitas Sumatera Utara 52 2. Halaman Input Pengiriman Pesan Komunitas D3 Teknik Informatika Universitas Sumatera Utara nama_profile Pesan Kirim Pesan Lihat Pesan Pesan Terkirim Image Upload Image Foto Galeri Notifikasi Pesan Masuk Pesan Balasan Kirim Pesan Ke Isi Pesan Copyright 2012 WITA Gambar 3.16 Halaman Details Website Input Pengriman Pesan Nama User Beranda Nama User Search Kirim Pesan Gambar Profile Universitas Sumatera Utara 53 3. Halaman Website Pendaftaran AlumniMahasiswa Komunitas D3 Teknik Informatika Universitas Sumatera Utara NIM Username Nama Lengkap Password Ulangi Password Kategori Email HpTelepon Tanggal Lahir Masukkan Teks Yang anda lihat I agree Above the terms Gambar 3.17 Halaman Details Website Pendaftaran AlumniMahasiswa Login Signup V Tgl Bln Thn 288909 «» V LOGO USU Universitas Sumatera Utara 54 4. Halaman Login AlumniMahasiswa Website Komunitas D3 Teknik Informatika USU Komunitas D3 Teknik Informatika Universitas Sumatera Utara NIM Password Gambar 3.18 Halaman Details Website Login AlumniMahasiswa 5. Halaman Admin untuk penginputan data NIM alumnimahasiswa Admin Home Manage Users Manage Informasi Manage Admin AlumniMahasiswa NIM Yang Sudah Aktif: |||| NIM Yang Belum Aktif: |||| Posting Terbaru |||| Posting Paling Dibahas |||| Input NIM AlumniMahasiswa NIMMahasiswa: Copyright 2012 WITA Gambar 3.19 Halaman Input Data Nim AlumniMahasiswa Login Signup LOGIN LOGO USU NIM Baru Universitas Sumatera Utara 55

3.8 Flowchart

Flowchart adalah penggambaran secara grafik dari langkah-langkah dan urut-urutan prosedur dari suatu program. Flowchart menolong analis dan programmer untuk memecahkan masalah kedalam segmen-segmen yang lebih kecil dan menolong dalam menganalisis alternatif-alternatif lain dalam pengoperasian suatu masalah. Berikut flowchart dari pembangunan Website komunitas D3 Teknik Informatika yaitu: 1. Flowchart Login Gambar 3.20 Flowchart Login Universitas Sumatera Utara 56 2. Flowchart Penginputan Data Member Gambar 3.21 Flowchart Inputan Member Universitas Sumatera Utara 57 3. Flowchart Penginputan Informasi oleh member alumnimahasiswa Gambar 3.22 Flowchart inputan informasi Universitas Sumatera Utara 58 4. Flowchart Inputan Gambar oleh member alumnimahasiswa Gambar 3.23 Flowchart Inputan Gambar Universitas Sumatera Utara 59 5. Flowchart Inputan Komentar Gambar 3.24 Flowchart Inputan Komentar Universitas Sumatera Utara 60 6. Flowchart Inputan NIM oleh Admin Gambar 3.25 Flowchart Inputan Data NIM oleh Admin Universitas Sumatera Utara 61 7. Flowchart inputan data admin oleh admin Gambar 3.26 Flowchart Inputan Data Admin oleh Admin Universitas Sumatera Utara 62 8. Flowchart Pengolahan Data AlumniMahasiswa Gambar 3.27 Flowchart Pengolahan Data AlumniMahasiswa Universitas Sumatera Utara 63 9. Flowchart data pengolahan data informasi Gambar 3.28 Flowchart Pengolahan Data Informasi Universitas Sumatera Utara 64 10. Flowchart Pengolahan Data Admin oleh admin Gambar 3.29 Flowchart Pengolahan Data Admin oleh admin Universitas Sumatera Utara 65 BAB 4 IMPLEMENTASI SISTEM

4.1 Pengertian Implementasi Sistem