T0 562013016 BAB III

12 BAB III

PERANCANGAN SISTEM

3.1 Ruang Lingkup Website

Berdasarkan kebutuhan dari pengguna, pembuatan

website ini ditujukan kepada anak-anak untuk lebih mudah

mengakses cerita dongeng dan masyarakat yang ingin mempublikasikan cerita dari daerah masing-masing.

3.2 DFD ( Data Flow Diagram )

Sebuah teknik grafis yang menggambarkan aliran informasi dan transformasi yang diaplikasikan pada saat data bergerak dari input menjadi output. Berikut adalah

gambaran DFD website“1001 Dongeng Basis Website dan

Multimedia” :

Website

1001 Dongeng Admin

User

1 2

3

4 5

Gambar 3.1 DFD tingkat 0 Website 1001 Dongeng Basis Website dan Multimedia

Keterangan:

Data yang mengalir dari atau ke user : 1. Memposting cerita dongeng. 2. Info konfirmasi berhasil.

Data yang mengalir dari atau ke Admin :

3. Username dan password.

4. Daftar cerita dongeng yang di post oleh user.

5. Menambahkan/menghapus cerita dongeng yang di

post.

Dari data flow diagram diatas Admin dapat mengolah data dongeng, sedangkan Member hanya dapat melihat dan mempublikasi cerita yang akan member posting.

1.1 Proses input data

1.2 Proses Data tersimpan User 3

4

1.0 Proses

Login 9 Admin

5 Database 6 8 1 2 11 12 13 10 7

Gambar 3.2 DFD tingkat 1 Website 1001 Dongeng Basis Website dan Multimedia

Keterangan: Data yang mengalir dari atau ke user : 1. Memasukkan username dan password. 2. Data yang diinputkan oleh user. 3. From dongeng.

5. Data dongeng yang di input user.

6. Menyimpan data yang di input user. 7. Data berhasil disimpan.

8. Informasi data telah disimpan.

Data yang mengalir dari atau ke Admin :

9. Memasukkan username dan password. 10. Data dari admin.

11. Inputan user yang berhasil disimpan. 12. Mengedit data yang diinputkan oleh user. 13. Informasi data telah berhasil diedit. 3.3 Sitemap

Sitemap atau sering disebut peta situs kurang lebihnya adalah sesuatu yang menggambarkan tentang peta dari website,yaitu segala informasi mengenai halaman atau file-file yang ada pada sebuah website. Berikut gambaran

sitemap website 1001 Dongeng basis website dan Multimedia :

3.3.1 Sitemap Beranda

Beranda

Jenis dongeng

Daftar dongeng

Halaman lain

Cerita rakyat

Fabel

Cerita sejerah

Mitos

Youtube video

3.3.2 Sitemap Profile

Profile

Tentang

Penjabaran konten

Halaman lain

Tentang saya

Tentang saya

Youtube video

Gambar 3.3 Sitemap Profile

3.3.3 Sitemap Berbagi Dongeng

Berbagi Dongeng

Upload User Gambar 3.4 Sitemap Berbagi dongeng

3.3.4 Sitemap Login Admin

Login

Login Admin

Database

3.4 Lembar Kerja Tampilan (LKT)

Perancangan antarmuka Website 1001 Dongeng digambarkan seperti ini :

1. Halaman awal

Gambar 3.4 LKT Beranda

Navigasi:

 Klik beranda untuk menampilkan halaman awal pada website tersebut yang berisi jenis dongeng, konten, dan halaman untuk melihat beberapa video dongeng dari youtube .

 Klik link jenis dongeng untuk menampilkan dongeng yang sudah digolongkan oleh admin.  Klik read more untuk membaca dongeng

secara utuh.

 Klik lihat selanjutnya ini di lood kan pada halaman kumpulan video dongeng yang ada di youtube.

Keterangan:

 Pada tampilan halaman Beranda, user akan dihadapkan pada jenis-jenis dongeng yang sudah digolongkan oleh user dan konten dongeng tersebut.

2. Tampilan Profil

Gambar 3.5LKT Profil Navigasi:

 Klik Profil untuk menampilkan penjelasan singkat tentang website tersebut dan admin.  Link tentang website dan tentang saya jika

diklik ada muncul keterangan pada bagian deskripsi.

Keterangan:

 Pada halaman Profil user akan dijelaskan secara singkat tentang seperti apa itu website

1001 dongeng dan sedikit boidata tentang admin.

3. Tampilan Berbagi Dongeng

Gambar 3.6 LKT Berbagi Dongeng Navigasi:

 Klik Berbagi dongeng untuk

mempublikasikan dongeng yang akan diunggah.

 Klik Simpan jika dongeng akan di unggah untuk direpost oleh admin.

 Klik Batal jika dongeng tidak jadi di unggah. Keterangan:

 Halaman berbagi dongeng ini disediakan untuk user yang akan mempublikasikan

dongeng dengan mengklik simpan dan masuk ke halaman admin yang akan diposting admin setelah masuk database.

4. HALAMAN LOGIN

Gambar 3.7 LKT LOGIN

NAVIGASI :

 Klik login untuk masuk admin setelah memasukkan username dan password.

Keterangan:

 Halaman login hanya bisa dibuka oleh admin saja karena harus memasukkan username dan

3.5 Desain Database

a. Admin Nama Field

Type Nul

l

Id int(11) No

Usernam e

Varchar(20 )

No

Password Text No Tabel 3.1 Tabel Admin

Tabel Admin berfungsi untuk menyimpan data

username dan password yang telah menjadi admin pada website ini.

b. User

Nama Field

Type Null

Id Int(11) No

Nama Varchar(50) No

Asal Text No

Judul Text No

Alur Varchar(25) No Tabel 3.1 Tabel User

Tabel Pelanggan berfungsi untuk menyimpan data

3.3.2 Sitemap Profile

Profile

Tentang

Penjabaran konten

Halaman lain

Tentang saya

Tentang saya

Youtube video

Gambar 3.3 Sitemap Profile

3.3.3 Sitemap Berbagi Dongeng

Berbagi Dongeng

Upload User Gambar 3.4 Sitemap Berbagi dongeng

3.3.4 Sitemap Login Admin

Login

Login Admin

Database Gambar 3.5 Sitemap Login Admin

3.4 Lembar Kerja Tampilan (LKT)

Perancangan antarmuka Website 1001 Dongeng digambarkan seperti ini :

1. Halaman awal

Gambar 3.4 LKT Beranda

Navigasi:

 Klik beranda untuk menampilkan halaman awal pada website tersebut yang berisi jenis dongeng, konten, dan halaman untuk melihat beberapa video dongeng dari youtube .

 Klik link jenis dongeng untuk menampilkan dongeng yang sudah digolongkan oleh admin.  Klik read more untuk membaca dongeng

secara utuh.

 Klik lihat selanjutnya ini di lood kan pada halaman kumpulan video dongeng yang ada di youtube.

Keterangan:

 Pada tampilan halaman Beranda, user akan dihadapkan pada jenis-jenis dongeng yang sudah digolongkan oleh user dan konten dongeng tersebut.

2. Tampilan Profil

Gambar 3.5LKT Profil Navigasi:

 Klik Profil untuk menampilkan penjelasan singkat tentang website tersebut dan admin.  Link tentang website dan tentang saya jika

diklik ada muncul keterangan pada bagian deskripsi.

Keterangan:

 Pada halaman Profil user akan dijelaskan secara singkat tentang seperti apa itu website 1001 dongeng dan sedikit boidata tentang admin.

3. Tampilan Berbagi Dongeng

Gambar 3.6 LKT Berbagi Dongeng Navigasi:

 Klik Berbagi dongeng untuk mempublikasikan dongeng yang akan diunggah.

 Klik Simpan jika dongeng akan di unggah untuk direpost oleh admin.

 Klik Batal jika dongeng tidak jadi di unggah. Keterangan:

 Halaman berbagi dongeng ini disediakan untuk user yang akan mempublikasikan

dongeng dengan mengklik simpan dan masuk ke halaman admin yang akan diposting admin setelah masuk database.

4. HALAMAN LOGIN

Gambar 3.7 LKT LOGIN

NAVIGASI :

 Klik login untuk masuk admin setelah memasukkan username dan password.

Keterangan:

 Halaman login hanya bisa dibuka oleh admin saja karena harus memasukkan username dan passsword.

3.5 Desain Database a. Admin Nama Field

Type Nul

l

Id int(11) No

Usernam e

Varchar(20 )

No

Password Text No Tabel 3.1 Tabel Admin

Tabel Admin berfungsi untuk menyimpan data username dan password yang telah menjadi admin pada website ini.

b. User

Nama Field

Type Null

Id Int(11) No

Nama Varchar(50) No

Asal Text No

Judul Text No

Alur Varchar(25) No Tabel 3.1 Tabel User

Tabel Pelanggan berfungsi untuk menyimpan data user.