Pembangunan website dan Fitur Upload Foto di eM-BOX Cafe and Lounge

KERJA PRAKTEK

Diajukan untuk memenuhi Tugas Mata Kuliah Kerja Praktek Program Strata Satu Jurusan Teknik Informatika

Fakultas Teknik dan Ilmu komputer Univeristas Komputer Indonesia

Abdul Aziz

10110084

PROGRAMS TUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK DAN ILMU KOMPUTER

UNIVERSITAS KOMPUTER INDONESIA

BANDUNG

E-1 LAMPIRAN E LEMBAR PENGESAHAN

F-1 LAMPIRAN F

LAMPIRAN G

Nama Lengkap : Abdul Aziz NIM : 10110084

Tempat/Tanggal Lahir : Cirebon, 01 November 1990 Jenis Kelamin : Pria

Agama : Islam

Alamat Lengkap : Ds. Mertapada Kulon Rt.18 Rw.06 Kel. Mertapada Kec. Astanajapura Kab. Cirebon

Nomor Telepon

PENDIDIKAN

: 081398353551

1997-2003 : SDN 1 Mertapada Kulon

2003-2006 : MTs NU Putra 2 Buntet Pesantren Cirebon 2006-2009 : MAN Buntet Pesantren Cirebon

2010 s/d sekarang : Program Strata 1 (S1) Program Studi Teknik Informatika Fakultas Teknik dan Ilmu Komputer Universitas

Komputer Indonesia Bandung

LEMBAR PENGESAHAN

KATA PENGANTAR ... I DAFTAR ISI ... II DAFTAR TABEL ... ..VIII DAFTAR GAMBAR ... X DAFTAR LAMPIRAN ... ..XIV

BAB 1 PENDAHULUAN ... 1

1.1 LATAR BELAKANG ... 1

1.2 PERUMUSAN MASALAH ... 1

1.3 MAKSUD DAN TUJUAN ... 2

1.4 BATASAN MASALAH ... 2

1.5 METODE PENELITIAN ... 3

1.6 SISTEMATIKA PENULISAN ... 5

BAB 2 TINJAUAN PUSTAKA ... 7

2.1 PROFIL eM-BOX Cafe and Lounge ... 7

2.1.1 Sejarah eM-BOX Cafe and Lounge ... 7

2.1.2 Visi dan Misi eM-BOX Cafe and Lounge ... 7

2.1.3 Logo eM-BOX Cafe and Lounge ... 7

2.1.4 Struktur Organisasi dan Job Deskription ... 7

2.2 LANDASAN TEORI ... 9

2.2.1 Pengertian Internet ... 9

2.2.2 Pengertian Database ... 10

2.2.3 Pengertian Software ... 11

2.2.4 Konsep Dasar Aplikasi Berbasis Web ... 11

2.3 ALAT BANTU ANALISIS ... 13

2.3.1 Entiity Relationship Diagram (ERD) ... 12

2.3.2 Diagram Konteks ... 13

2.4 PERANGKAT LUNAK PENUNJANG ... 13

BAB 3 PEMBAHASAN ... 16

3.1 JADWAL KERJA PRAKTEK ... 16

3.3.2 Analisis Kebutuhan Non Fungsional ... 17

3.3.2.1 Analisis Pengguna Sistem ... 17

3.3.2.2 Analisis Perangkat Keras ... 18

3.3.2.3 Analisis Perangkat Lunak ... 19

3.3.3 Analiaia Basia Data ... 19

3.3.3.1 Entity Relationship Diagram (ERD) ... 19

3.3.4 kebutuhan Fungsional ... 20

3.3.4.1 Diagram Konteks ... 20

3.3.4.2 Data Flow Diagram (DFD) ... 20

3.3.4.3 Data Flow Diagram Level 1 ... 21

3.3.4.4 DFD Level 2 Proses Pengolahan Data Login ... 21

3.3.4.5 DFD Level 2 Proses Pengolahan Data ... 22

3.3.4.6 DFD Level 3 Proses Pengolahan Data Foto ... 22

3.3.4.7 DFD Level 3 Proses Pengolahan Data Galeri ... 23

3.3.4.8 DFD Level 3 Proses Pengolahan Data Konten ... 23

3.3.5 Spesifikasi Proses ... 24

3.3.6 Kamus Data ... 32

3.3.6.1 Data Login ... 32

3.3.6.2 Data Foto ... 33

3.3.6.3 Data Galeri ... 33

3.3.6.4 Data Konten ... 34

3.4 PERANCANGAN BASIS DATA ... 35

3.4.1 Skema Relasi ... 35

3.4.2 Diagram Relasi ... 35

3.5 PERANCANGAN ARSITEKTUR ... 36

3.5.1 Perancangan Struktur menu ... 35

3.5.1.1 Perancangan Struktur Menu Operator ... 36

3.5.2 Perancangan Antar Muka ... 37

3.5.2.1 Perancangan Antarmuka Login Operator... 37

3.5.2.2 Perancangan Antarmuka Olah Data ... 37

3.5.2.3 Perancangan Antarmuka Upload Foto ... 38

3.5.3 Perancangan Antar Muka Pengunjung ... 39

3.5.3.1 Perancangan Antarmuka Halaman Pengunjung ... 40

3.5.4 Perancangan Pesan ... 40

3.5.4.1 Perancangan Pesan Login Gagal ... 40

3.6 PERANCANGAN PROSEDURAL ... 40

3.6.1 Prosedural Login ... 41

3.6.2 Proseduran Upload Foto ... 41

3.6.3 Prosedural Hapus Foto ... 42

3.6.4 Prosedural Tambah galeri ... 42

3.6.5 Prosedural Hapus Galeri ... 43

3.6.6 Prosedural Tambah Konten ... 43

3.6.7 Prsedurla Hapus Konten ... 44

3.7 IMPLEMENTASI ANTARMUKA ... 45

3.7.1 Halaman Utama ... 45

3.7.2 Halaman Login ... 46

3.7.3 Halaman Menu Olah Data ... 46

3.7.4 Halaman Upload Foto ... 46

3.7.5 Halaman Olah Data foto... 47

3.7.6 Halaman Olaha Galeri ... 48

3.7.7 Halaman Olah Data Konten ... 48

BAB 4 KESIMPULAN DAN SARAN ... 49

4.1 KESIMPULAN ... 49

4.2 SARAN ... 49

dapat menyelesaikan laporan kerja praktek ini dengan judul

PEMBANGUNAN WEB“ITE DAN FITUR UPLOAD FOTO DI eM-BOX Cafe and Lounge , yang merupakan syarat untuk menyelesaikan Mata Kuliah Kerja Praktek Jurusan Teknik Informatika Fakultas Teknik dan Ilmu Komputer pada Universitas Komputer Indonesia.

Penulis menyadari dengan sepenuhnya bahwa dalam penyusunan laporan ini masih jauh dari kata sempurna. Hal ini mengingat keterbatasan pengetahuan, pengalaman dan kemampuan dalam mengolah serta menyajikannya. Namun demikian, penulis telah berusaha untuk menyusun laporan kerja praktek ini dengan sebaik-baiknya dan penulis berharap semoga laporan ini dapat bermanfaat bagi pembaca dan perkembangan ilmu komputer, khususnya bagi penulis sendiri.

Selama pelaksanaan dan penyusunan laporan Kerja Praktek ini banyak menemui hambatan dan kesulitan. Namun berkat dorongan, bantuan dan bimbingan baik secara moril ataupun material dari berbagai pihak penulis dapat mengatasinya. Untuk itu penulis ingin mengucapkan terima kasih kepada :

1. Allah SWT yang telah memberikan rahmat dan hidayah-Nya kepada penulis

sehingga penulis dapat menyelesaikan laporan ini.

2. Kedua orang tua serta keluarga yang selalu memberikan dukungannya baik

material maupun spiritual kepada penulis.

3. Ibu Dian Dharmayanti, S.T., M.KOM., selaku dosen pembimbing dan dosen wali IF-2

yang telah banyak meluangkan waktunya dan memberikan pengarahan kepada penulis.

4. Bapak Irawan Afrianto, S.T., M.T., selaku Ketua Program Studi Teknik

Informatika Universitas Komputer Indonesia.

5. Bapak Murad Moehidin, selaku pembimbing Kerja Praktek di eM-BOX Cafe and Lounge.

6. Semua Teman-teman IF-2 angkatan 2010

7. Semua pihak yang terlibat yang telah ikut membantu dalam penulisan laporan

ini baik secara langsung maupun tidak langsung.

Akhirnya penulis mengucapkan syukur alhamdullilah kehadirat Illahirobi yang tiada hentinya atas selesainya proses penulisan laporan Kerja Praktek ini

Amien.

Bandung,18 Januari 2013

[1] I. Novianto, “Perilaku Penggunaan Internet di Kalangan Mahasiswa,” Libri -Net, vol. 2, no. 1, 2012

[2] Supardi Yuniar, 2009. Internet untuk Segala Kebutuhan, Penerbit PT Elex Media Komputindo, Jakarta, Indonesia .

[3] Arbie, 2004. Manajemen Database dengan MySQL, Penerbit Andi, Yogyakarta, Indonesia .

[4] Malwin, 2007. Mengenal Hardware-Software Dan Pengelolaan Instalasi Komputer, Penerbit Andi, Yogyakarta, Indonesia .

[5] Sidik, Betha,2001. Pemrograman Web dengan PHP, Penerbit Informatika, Bandung, Indonesia .

[6] Wahana Komputer, 2006. Menguasai Pemrograman Web dengan PHP, Penerbit Andi,Yogyakarta, Indonesia.

[7] T. Connolly and C. Begg, Database Systems: A Practical Approach to Design, Implementation, and Management, 5th ed., New Jersey: Pearson Education, 2010.

[8] H. Jogiyanto, Analisis dan Desain Sistem Informasi : Pendekatan Terstruktur Teori dan Praktik Aplikasi Bisnis, Yogyakarta: Andi, 2005.

[9] I. Fathansyah, Basis Data, 4th penyunt., Bandung: Informatika, 2002. [10] A. Kristanto, Perancangan Sistem Informasi Dan Aplikasinya, Yogyakarta:

Gaya Media, 2008.

[11] Nugroho.Bunafit. 2004. PHP & mySQL dengan Editor Dreamveaver MX, .Yogyakarta : Penerbit Andi.

[12] Wampserver, “Wampserver,” Wampserver, [Online]. Available: http://www.wampserver.com/en/. [Diakses 20 Januari 2014].

[13] Microsoft, “Microsoft Visio,” Microssoft Corporation, [Online]. Available: http://office.microsoft.com/en-us/visio/. [Diakses 20 Januari 2014]..

BAB 1

PENDAHULUAN

1.1.Latar Belakang

Perkembangan internet pada masa kini sudah mengalami perkembangan yang sangat pesat, begitu pula teknologi terkini sudah mengalami kemajuan yang sangat banyak, kini internet sudah menjadi suatu kebutuhan bagi masyarakat luas, karena tidak dibatasi oleh ruang dan waktu, sehingga masyarakat dapat dengan mudah mudah mencari informasi secara instan.

eM-BOX Cafe and Lounge merupakan lembaga waralaba yang berbasis di Jl. Lombok No. 10 Bandung, instansi ini baru memulai bisnisnya pada pertengahan tahun 2013 dengan memfokuskan usaha-nya pada pelayanan dan penyediaan makanan dan minuman bagi pelanggan.

Berdasarkan hasil wawancara yang telah peneliti lakukan kepada GM ( general Manager) dieM-BOX Cafe and Lounge, peneliti mendapatkan beberapa peluang strategi untuk menunjang pemasaran eM-BOX Cafe and Lounge agar lebih dikenal, diantaranya dikarenakan usaha waralaba ini masih baru dan dalam masa pengenalan, maka dibutuhkan sebuah media sosial yang bisa menjadi identitas dari eM-BOX Cafe and Lounge sebagai sebuah badan usaha yang lebih dikenal melalui media internet.

Dengan itu eM-BOX Cafe and Lounge ingin membangun sebuah Website dengan fitur yang menarik, diantaranya operator ingin memiliki fasilitas upload foto yang instan dan mudah di gunakan sebagai media berbagi foto di website-nya.

1.2.Perumusan Masalah

Berdasarkan uraian latar belakang diatas, terdapat permasalahan

Bagaimana membangun Website eM-BOX Cafe and Loung dengan menambahkan fitur upload foto ?

1.3.Maksud dan Tujuan

Maksud dari penulisan laporan kerja praktek ini adalah membuat Website eM-BOX Cafe and Lounge.

Adapun tujuan dari penulisan laporan kerja praktek ini antara lain :

1. Membuat website dan fitur upload foto sebagai sarana media informasi online eM-BOX Cafe and Lounge.

2. Memberi kemudahan bagi pengguna untuk memasukkan foto ke dalam galeri foto website eM-BOX Cafe and Lounge.

3. Membuat media iklan yang menarik di website eM-BOX Cafe and Lounge.

1.4.Batasan Masalah

Ruang lingkup permasalahan untuk membangun Website ini maka diperlukan suatu pembatasan masalah atau ruang lingkup kajian yang meliputi hal-hal sebagai berikut:

1. Aplikasi dibangun dalam bentuk web menggunakan Macromedia Dreamweaver 8.

2. Website dikelola oleh admin dan operator eM-BOX Cafe and Lounge. 3. Kapasitas maksimal upload 10mb.

4. Dibangun menggunakan HTML, PHP, Xamp (localhost), dan MySQL (database server)

5. Fitur upload foto bisa diakses sebagai admin dan operator sesuai dengan hak akses masing-masing melalui localhost.

6. Komputer terhubung dengan media internet.

Dalam pembangunan website eM-BOX Cafe and Lounge metode penelitian yang dipakai adalah pengumpulan data dan pembangun fitur. Peneliti mendapatkan data dana informasi sebagai bahan penyususnan laporan ini melalui beberapa cara :

1.5.1. Teknik Pengumpulan Data

Teknik pengumpulan data yang digunakan dalam mengumpulkan data yang berkaitan dengan penyusunan laporan dan pembuatan aplikasi ini adalah sebagai berikut:

1. Metode Wawancara

Metode wawancara adalah pengumpulan data melalui percakapan dengan narasumber. Wawancara dilakukan langsung dengan Bapak Murad selaku General Maneger di eM-BOX Cafe and Lounge.

2. Metode Observasi

Metode Observasi adalah pengumpulan data melalui pengamatan dan pencatatan langsung terhadap permasalahan dan solusi yang dibutuhkan terhadap penelitian tersebut.

1.5.2. Model Pembangunan Perangkat Lunak

Model yang digunakan dalam pembangunan perangkat lunak ini adalah menggunakan model waterfall seperti yang tercantum pada gambar 1.1, yang meliputi beberapa proses diantaranya :

a. System / Information Engineering

Pemodelan ini diawali dengan mencari kebutuhan dari keseluruhan sistem yang akan diaplikasikan kedalam bentuk perangkat lunak. Hal ini sangat penting, mengingat perangkat lunakharus berinteraksi dengan elemen-elemen yang lain seperti hardware dan database.

Mencari, mendefinisikan dan memahami kebutuhan perangkat lunak. Untuk mengetahui sifat dari perangkat lunak yang akan dibuat, seperti fungsi yang dibutuhkan, performansi (kemampuan) dan antarmuka yang dibutuhkan. Tahapan ini harus didokumentasikan dan ditunjukkan kepada pengguna sistem.

c. Design

Design merupakan proses yang digunakan untuk mengubah kebutuhan-kebutuhan diatas menjadi representasi ke dalam bentuk rancangan perangkat lunak sebelum coding dimulai. Design harus dapat mengimplementasikan kebutuhan yang telah disebutkan pada tahap sebelumnya. Seperti aktivitas sebelumnya, maka proses ini juga harus didokumentasikan sebagai konfigurasi dari perangkat lunak

d. Coding

Untuk dapat dimengerti oleh mesin, dalam hal ini adalah komputer, maka desain tersebut harus diubah bentuknya menjadi bentuk yang dapat dimengerti oleh mesin, yaitu ke dalam bahasa pemrograman melalui proses coding. Tahap ini merupakan implementasi dari tahap design.

e. Testing

Testing adalah sesuatu yang dibuat haruslah diujicobakan. Demikian juga dengan perangkat lunak. Semua fungsi-fungsi di perangkat lunak harus diujicobakan, agar perangkat lunak bebas dari error, dan hasilnya harus benar-benar sesuai dengan kebutuhan yang sudah didefinisikan sebelumnya.

f. Maintenance

Pemeliharaan suatu perangkat lunak diperlukan, termasuk di dalamnya adalah pengembangan, karena perangkat lunak yang dibuat tidak selamanya hanya seperti itu. Ketika dijalankan mungkin saja masih ada error kecil yang tidak ditemukan sebelumnya, atau ada penambahan fitur-fitur yang belum ada pada perangkat lunak tersebut. Pengembangan diperlukan ketika adanya perubahan dari eksternal perusahaan seperti ketika ada pergantian sistem operasi, atau perangkat lainnya.

Gambar 1.1 Model Waterfall [Sommerville, I. (2003), Software Enginering (Rekayasa Perangkat Lunak)edisi 6 jilid 1, Erlangga, Jakarta.]

1.6.Sistematika Penulisan

Sistematika penulisan laporan kerja praktek ini disusun untuk memberikan gambaran umum tentang kegiatan kerja praktek yang telah dilakukan. Sistematika penulisan kerja praktek ini adalah sebagai berikut :

BAB 1 PENDAHULUAN

Bab ini membahas tentang latar belakang dan perumusan masalah, maksud dan tujuan penulisan, batasan masalah, metode penelitian dan sistematika penulisan.

BAB 2 TINJAUAN PUSTAKA

Bab ini merupakan tinjauan umum yang di dalamnya menjelaskan tentang profil instansi, mulai dari sejarah eM-BOX Cafe and Lounge, Logo instansi, Badan Hukum instansi,dan struktur organisasi, dengan landasan teori yang yang berhubungan dengan permasalahan tersebut.

BAB 3 PEMBAHASAN

Bab ini membahas proses pembangunan Website eM-BOX Cafe and Lounge dengan fitur Upload foto.

BAB 4 KESIMPULAN DAN SARAN

Bab ini berisi kesimpulan dari seluruh kegiatan yang dilakukan dan saran untuk pengembangan sistem yang lebih baik selama penulisan laporan kerja praktek.

BAB 2

TINJAUAN PUSTAKA

2.1. Profil eM-BOX Cafe and Lounge

2.1.1. Sejarah eM-BOX Cafe and Lounge

eM-BOX cafe Lounge merupakan badan usaha milik swasta yang berbasis pada penjualan dan pelayanan makanan. Awal kehadiran eM-BOX Cafe and Lounge adalah untuk ikut bersaing dalam usaha kuliner dengan memberikan pelayanan sekaligus penyediaan tempat yang nyaman untuk berkumpul dengan keluarga, teman, maupun untuk menjadi tempat meeting yang nyaman di kota bandung.

2.1.2. Visi dan Misi eM-BOX Cafe and Lounge

Dalam menjalankan lembaganya, eM-BOX Cafe and Lounge memiliki visi dan misi sebagai pedoman dalam mencapai tujuannya. Adapun visi dan misi yang dimiliki oleh eM-BOX Cafe and Lounge adalah sebagai berikut:

1. Visi

“ Menjadi badan usaha yang dapat melayani keinginan pelanggan”. 2. Misi

a.Menjadikan eM-BOX Cafe and Lounge sebagai alternatif tempat makan dan santai yang terbaik bagi konsumen.

b.Membangun mitra strategis dengan kantor – kantor di kota bandung untuk menjadikan eM-BOX Cafe and Lounge sebagai tempat meeting yang utama.

c.Menjadikan badan usaha yang terbaik meberikan pelayanan dan kenyamanan terhadap konsumen.

2.1.3. Logo Instansi

Logo merupakan sebuah lambang yang dimiliki oleh setiap perusahaan atau instansi. Pembuatan logo dimaksudkan untuk merepresentasikan sebuah identitas suatu perusahaan yang mencerminkan jiwa, visi dan misi suatu perusaha

instansi. Adapun Logo yang dimiliki atau digunakan oleh instansi tempat kerja praktek peneliti adalah sebagai berikut :

Gambar 2.1 Logo eM-BOX Cafe and Lounge

Dalam pembuatan logo, eM-BOX Cafe and Lounge mempunyai berbagai makna yang merupakan kepribadian dari eM-BOX Cafe and Lounge. Adapun arti dan makna logo eM-BOX Cafe and Lounge adalah sebagai berikut :

Gambar kuda pada logo melambangkan kekuatan dalam berbisnis sehingga menjadi motivasi pengusaha untuk memajukan usahanya agar menjadi lebih kuat bersaing dalam dunia usaha.

2.1.4. Struktur Organisasi dan Job description

Struktur organisasi perusahaan merupakan bangunan fungsi bagian-bagian manajemen yang tersusun dari suatu kesatuan hubungan yang menunjukan tingkatan fungsi, tugas, wewenang dan tanggung jawab dalam manajemen perusahaan.

Penerapan struktur organisasi di lingkungan eM-BOX Cafe berbentuk garis dan staf, dimana wewenang dari pimpinan dilimpahkan kepada satuan-satuan organisasi dibawahnya untuk semua bidang pekerjaan bantuan. Struktur organisasi eM-BOX Cafe adalah sebagai berikut :

Berikut job description untuk masing – masing posisi : 1. Penasehat

a. Memimpin lembaga dan menentukan kebijakan yang akan diambil oleh lembaga.

b. Bertanggung jawab terhadap kelangsungan lembaga. 2. General Manager (GM).

a. Bertanggung jawab atas implementasi kebijakan perusahaan

b. Mengontrol dan mengevaluasi implementasi strategi agar memperoleh masukan strategis

3. Sekertaris

a. Bertugas kesekretariatan berupa surat menyurat, proposal. b. Bertanggungjawab pada administrasi dan pengarsipan. 4. Bendahara

a. Melakukan penelitian dan analisa keuangan.

b. Melakukan pemeriksaan semua bukti kas, penerimaan dan pengeluaran 5. Humas

a. Melakukan perekrutan sumber daya manusia. b. Melakukan survei terhadap kebutuhan perusahaan. 6. Sumber Daya Manusia (SDM)

a. Melakukan pelayanan kepada tamu atau pelanggan. b. Menjalankan tugas pekerjaan.

2.2. Landasan Teori

2.2.1. Pengertian Internet

Interconnection network (internet) adalah sistem global dari seluruh jaringan komputer yang saling terhubung. Internet berasal dari bahasa latin "inter" yang berarti "antara". Internet merupakan jaringan yang terdiri dari milyaran komputer yang ada di seluruh dunia. Internet melibatkan berbagai jenis komputer serta topology jaringan yang berbeda. Dalam mengatur integrasi dan komunikasi jaringan, digunakan standar protokol internet yaitu TCP/IP. TCP bertugas untuk memastikan bahwa semua hubungan bekerja dengan baik, sedangkan IP bertugas untuk mentransmisikan paket data dari satu komputer ke komputer lainya. [1]

Sejarah internet awalnya berasal dari proyek ARPA yang dibentuk tahun 1969 oleh Departemen Pertahanan Amerika Serikat. Proyek ini kemudian dikenal dengan ARPANET (Advanced Research Project Agency Network) yang melakukan riset tentang cara menghubungkan komputer satu dengan komputer lainnya agar bisa saling berkomunikasi. Pada tahun 1970, proyek ini berhasil menghubungkan lebih dari 10 komputer dalam bentuk jaringan, dan beberapa tahun kemudian, hasil riset proyek ini dikembangkan di luar Amerika. Karena jumlah komputer yang terhubung semakin banyak, maka pada tahun 1980 dibuatlah protokol resmi yang dikenal dengan TCP/IP (Transmission Control Protocol/Internet Protocol). [2]

Berikut ini adalah beberapa fasilitas yang disediakan melalui internet: 2.2.2. Pengertian Database

Database atau basis data adalah kumpulan data yang disimpan secara sistematis di dalam komputer dan dapat diolah atau dimanipulasi menggunakan perangkat lunak (program aplikasi) untuk menghasilkan informasi. Pendefinisian basis data meliputi spesifikasi berupa tipe data, struktur, dan juga batasan-batasan data yang akan disimpan. Basis data merupakan aspek yang sangat penting dalam sistem informasi dimana basis data merupakan gudang penyimpanan data yang akan diolah lebih lanjut. Basis data menjadi penting karena dapat menghidari duplikasi data, hubungan antar data yang tidak jelas, organisasi data, dan juga update yang rumit. [3]

Proses memasukkan dan mengambil data ke dan dari media penyimpanan data memerlukan perangkat lunak yang disebut dengan sistem manajemen basis data (database management system | DBMS). DBMS merupakan sistem perangkat lunak yang memungkinkan user untuk memelihara, mengontrol, dan mengakses data secara praktis dan efisien. Dengan kata lain semua akses ke basis data akan ditangani oleh DBMS. Ada beberapa fungsi yang harus ditangani DBMS yaitu mengolah pendefinisian data, dapat menangani permintaan pemakai untuk mengakses data, memeriksa sekuriti dan integriti data yang didefinisikan oleh DBA (Database Administrator), menangani kegagalan dalam pengaksesan data yang disebabkan oleh kerusakan sistem maupun disk, dan menangani unjuk kerja semua fungsi secara efisien. [3]

Tujuan utama dari DBMS adalah untuk memberikan tinjauan abstrak data kepada user (pengguna). Jadi sistem menyembunyikan informasi tentang bagaimana data disimpan, dipelihara, dan tetap dapat diambil (akses) secara efisien. Pertimbangan efisien di sini adalah bagaimana merancang struktur data yang kompleks tetapi masih tetap bisa digunakan oleh pengguna awam tanpa mengetahui kompleksitas strukturnya. [3]

2.2.3. Pengertian Software

Perangkat keras dan perangkat lunak sebuah komputer merupakan dua hal yang berbeda tetapi tidak dapat dipisahkan. Hardware (perangkat keras) adalah aspek fisik yang dapat dilihat dan diraba. Sebuah unit komputer umumnya tersusun atas beberapa hardware atau komponen utama yaitu CPU (unit pengolah pusat), memori, perangkat penyimpan data (disk, CD), perangkat input dan output (monitor, mouse, printer), dan perangkat komunikasi (NIC, modem). Software (perangkat lunak) adalah kumpulan perintah yang dieksekusi oleh mesin komputer dalam menjalankan pekerjaannya. Tanpa adanya software, komputer hanyalah sebuah mesin kosong yang tidak akan berarti apa-apa. Komputer tidak mengerti bahasa manusia dan hanya mengerti bahasa mesin yang dihasilkan dari perangkat lunak. [4]

Software merupakan perangkat lunak yang tidak dapat disentuh maupun dilihat wujud fisiknya. Sekalipun tidak berwujud fisik, keberadaan software sangat penting. Software dibuat untuk menjalankan hardware komputer agar dapat berjalan sesuai fungsi yang diinginkan. Software dapat dibedakan atau dibagi berdasarkan jenis dan juga pendistribusianya. [4]

2.2.4. Konsep Dasar Aplikasi Berbasis Web 2.2.4.1. Web

Halaman web tersusun atas satu atau beberapa komponen baik dokument web itu sendiri ataupun komponen penyerta lainnya. Komponen – komponen tersebut biasanya dapat langsung ditampilkan oleh browser, tetapi terkadang harus menggunakan program pembantu atau aplikasi tambahan lain (plug – in). [5]

Web browser adalah perangkat lunak di sisi klien yang digunakan untuk mengakses informasi web, memformat teks dan menempatkan grafik pada layer. Ada beberapa jenis web browser yang dipakai sebagai sumber tampilan antara lain: internet Explorer, Mozilla Firefox, Google Crome, safari, dan sebagainya. Prinsip kerja pengaksesan sebuah website yang berbasis HTML adalah sebagai berikut :

a. Browser meminta sebuah halaman ke suatu situs web melaui protocol http.

b. Web server menerima permintaan.

c. Web server segera mengirimkan dokumen HTML yang diminta ke klien.

d. Browser pada klien akan membaca dan mengartikan dokumen yang diterima berdasarka kode – kode performatan yang terdapat pada dokumen HTML, lalu menampilkan dalam versi masing – masing. [5]

2.2.4.2. Web Server

Web server adalah software yang menjadi tulang belakang dari world wide web(www). Web server menunggu permintaan HTTP atau HTTPS dari client yang menggunakan browser seperti Netscape Navigator, Internet Explorer, Mozilla, dan program browser lainnya. Jika ada permintaan dari browser, maka web server akan memproses permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan kembali ke browser. Data ini mempunyai format yang standar, disebut dengan format SGML (standart general markup language). Data yang berupa format ini kemudian akan ditampilkan oleh browser sesuai dengan kemampuan browser tersebut. [6]

2.3. Alat Bantu Analisis.

2.3.1. Entity Relationship Diagram (ERD)

Penggunaan Entity Relationship Diagram (ERD) dimungkinkan untuk memberikan kemudahan di dalam melakukan pemodelan data. Entity Relationship Diagram (ERD) digunakan untuk menggambarkan hubungan antara satu entitas

dengan entitas yang lain. [7] 2.3.2. Diagram Konteks

Diagram konteks adalah level teratas dari diagram arus data, yaitu diagram yang tidak detail dari sebuah sistem informasi yang menggunakan aliran-aliran data kedalam dan keluar entitas eksternal. Diagram konteks memberikan batasan yang jelas mengenai besaran-besaran entitas yang berada di luar sebuah sistem yang sedang dibuat, artinya diagram ini menggambarkan secara jelas batasan-batasan dari sebuah sistem yang sedang dibuat. [9]

Diagram konteks adalah sebuah diagram sederhana yang menggambarkan hubungan antara entity luar, masukan dan keluaran sistem. Diagram konteks ini direpresentasikan dengan lingkaran tunggal yang mewakili seluruh sistem. [10]

2.3.3. Data Flow Diagram (DFD)

Diagram Arus Data adalah suatu model logika data atau proses yang dibuat untuk menggambarkan dari mana asal data dan kemana tujuan data yang keluar dari sistem, dari mana data disimpan, proses apa yang menghasilkan data tersebut dan interaksi antara data yang tersimpan dan proses yang dikenakan pada data tersebut. [10]

2.4. Perangkat Lunak Penunjang

2.4.1. Adobe Dreamweaver CS6

Macromedia Dreamweaver adalah program editor HTML professional untuk mendesain, mengkode dan mengembangkan situs, halaman web, serta aplikasi web. Tampilan fitur editing dalam Dreamweaver akan membantu dalam membuat sebuah halaman web tanpa harus menuliskan kode java script maupun HTML. Dreamweaver juga dapat membantu dalam membangun dinamik database untuk aplikasi web dengan menggunakan server seperti ASP, ASPNet, ColdFusion Markup Language (CFML), JSP dan PHP. [12]

2.4.2. Wampserver

WAMP merupakan akronim dari Windows, Apache, MySQL, dan PHP. WAMP digunakan untuk membangun sebuah host lokal untuk membuat simulasi sebuah website yang memiliki server side script sebelum dipublikasikan pada server yang sebenarnya. Penjelasan dari komponen dalam WAMP adalah sebagai berikut:

a. Apache

Server HTTP Apache atau Server Web/WWW Apache adalah server web yang dapat dijalankan di banyak sistem operasi (Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.[12]

b. PHP (Personal Home Page)

PHP merupakan bahasa scripting yang bersifat Server Side, artinya kode – kode PHP akan dieksekusi oleh web server kemudian hasil dari eksekusi akan dikirimkan ke browser client berupa kode HTML. Cara kerja yang seperti ini mengakibatkan client tidak dapat melihat kode PHP dan hanya bisa melihat kode HTML yang telah diciptakan oleh mesin PHP yang berada pada web server. Dengan kata lain PHP memungkinkan untuk membuat halaman web dinamis yang aman.

PHP dapat berjalan dengan baik di banyak Sistem Operasi seperti Windows, Linux, MacOS, dll. PHP juga kompatibel untuk berbagai jenis database misalnya MySQL, PostgreSQL, Oracle, Microsoft access, Interbase, dll.[12]

c. Mysql

MySQL adalah sebuah aplikasi Relational Database Management Server (RDBMS) yang sangat cepat dan kokoh. Dengan menggunakan MySQL Server maka data dapat diakses oleh banyak pemakai secara bersamaan sekaligus dapat membatasi akses para pemakai berdasarkan privilege (hak akses) yang diberikan.

yaitu bahasa standar yang digunakan untuk pemrograman database. MySQL dipublikasikan sejak 1996, tetapi sebenarnya dikembangkan sejak 1979. MySQL telah memenangkan penghargaan Linux Journal Reader’s Choice Award selama tiga tahun. MySQL sekarang tersedia dibawah izin open source, tetapi juga ada izin

untuk penggunaan secara komersial. Keunggulan dari MySQL adalah: 1) Bersifat Open Source

2) Sistem yang digunakan oleh perangkat lunak ini tidak memberatkan kerja dari server, karena dapat bekerja di background.

3) Mempunyai koneksi yang stabil dan kecepatan yang tinggi. [12]

2.4.3. Microsoft Visio Professional 2010

Microsoft Visio (atau sering disebut Visio) adalah sebuah program aplikasi komputer yang sering digunakan untuk membuat diagram, diagram alur (flowchart), brainstorm, dan skema jaringan yang dirilis oleh Microsoft Corporation. Aplikasi ini menggunakan grafik vektor untuk membuat diagram-diagramnya.

Pada seri Professional, Microsoft menawarkan lebih banyak pilihan template untuk pembuatan diagram yang lebih lanjut dan juga penataan letak (layout). Selain itu, edisi Professional juga memudahkan pengguna untuk mengoneksikan diagram-diagram buatan mereka terhadap beberapa sumber data dan juga menampilkan informasi secara visual dengan menggunakan grafik. [13]

BAB 3

PEMBAHASAN

3.1. Jadwal Kerja Praktek

Kegiatan kerja praktek dilakukan selama 1 bulan di eM-BOX Cafe and Lounge mulai tanggal 15 agustus 2013 sampai dengan 15 september 2013. Setiap hari mulai pukul 10.00 – 16.00 WIB.

3.2. Teknik Kerja Praktek

Peneliti melaksanakan Kerja praktek di perusahaan eM-BOX Cafe and Lounge selama 1 bulan, adapun teknis pelaksanaan kerja praktek adalah sebagai berikut :

a. Melakukan analisa terhadap sistem yang berjalan di eM-BOX Cafe and Lounge.

b. Mendiskusikan Kebutuhan di Bidang Prosmosi dan Pengiklanan. c. Merancang pembangunan website eM-BOX Cafe and Lounge .

Dengan pelaksanaan kerja praktek ini dibagi kedalam beberapa tahapan kegiatan untuk mengetahui permasalahan yang ada didalam pelaksanaan kegiatan yang dapat diangkat menjadi topik dalam kegiatan kerja praktek ini.

Adapun tahapan yang dilakukan antara lain : 1. Metode wawancara

Merupakan metode pengumpulan berita dan data yang dilakukan dengan cara melakukan wawancara langsung dengan narasumber untuk memperoleh suatu informasi yang dituju.

2. Metode observasi lapangan

Merupakan metode pengumpulan berita dan data yang dilakukan dengan cara mengamati langsung kejadian yang terjadi dilapangan.

3.3. Analisis Sistem

Analisis sistem (System Analysis) dapat didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalama bagian-bagian komponennya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkna perbaikan-perbaikannya.

3.3.1. Analisis Masalah

Ada beberapa permasalahan yang dihadapi dalam sistem yang sedang berjalan saat ini dintaranya :

a. Pemberian informasi kepada masyarakat dirasakan kurang efektif sehingga masyarakat belum tentu mendapatkan informasi secara lengkap.

b. Media yang dipakai pada saat ini untuk menyampaikan informasinya hanya berupa media cetak, contohnya : Brosur

c. Dengan teknologi internet informasi bisa tersampaikan ke masyarakat yang lebih luas.

3.3.2. Analisis Kebutuhan Non Fungsional

Analisis kebutuhan non fungsional menggambarkan keadaan sistem yang ada pada Website eM-BOX Cafe and Lounge, diantaranya perangkat keras, perangkat lunak, serta pengguna sebagai bahan analisis kebutuhan yang harus dipenuhi dalam perancangan sistem yang akan diterapkan.

3.3.2.1.Analisis Pengguna Sistem

Sistem yang akan dibangun ini akan digunakan oleh dua jenis pengguna utama yaitu Operator , dan Pengunjung . pengguna dapat melakukan pengelolaan terhadap data master. Sedangkan Pengunjung hanya dapat melihat informasi di website eM-BOX Cafe.

Tabel 3.1 Karakteristik Pengguna

3.3.2.2.Analisis Perangkat keras

Sistem yang masih dalam tahap analisis ini selanjutnya akan diimplementasikan kedalam komputer. Adapun perangkat minimum yang digunakan untuk membangun sistem ini adalah :

1.Perangkat kerass minimum pada server yang dibutuhkan adalah : a. Processor dengan kecepatan minimal 2 GHz

b. Kapasitas harddisk minimal 80 GB c. RAM minimal 512 GB

d. VGA Card Minimal 128 MB e. Network Interface Card (NIC). f. Koneksi internet minimal 64 kbps g. Monitor

h. Keyboard i. Mouse

2.Perangkat keras minimum pada pengunjung yang dibutuhkan adalah : a. Processor dengan kecepatan minimal 1 GHz

b. RAM minimal 256 GB c. VGA card 256 MB d. Monitor

e. Keyboard f. Mouse

Pengguna Tanggung

jawab Hak Akses

Tingkat keteerampilan

Pengalaman Jenis Pelatihan

Operator Mengolah

data

Mengatur, mengontrol, dan mengedit data Mahir menggunan HTML Menggunakan Dreamweaver Dreamweaver

Pengunjung - Melihat

informasi Mengerti aplikasi web Menggunakan internet -

3.3.2.3.Analisis Perangkat lunak

Spesifikasi perangkat lunak yang digunakan i server antara lain : a. Sistem operasinya menggunakan windows.

b. Dreamweaver.

c. Web server yang digunakan Apache.

d. Database server yang digunakan adalah MySQL.

3.3.3. Analisis Basis Data

3.3.3.1.Entity Relationship Diagram (ERD)

ERD digunakan untuk menggambarkan secara sistematis berbagai entitas dan komponen data yang dimiliki sistem dan hubungan antar masing-masing entitas tersebut. Untuk melihat keterhubungan antar entitas yang ada maka akan digambarkan sebagai berikut :

Operator

Konten Mengolah

Data

galeri

Id_operator

Nama_operator

Password_operator

Username_operator

Foto Memiliki

Id_konten deskripsi_konten Id_galeri

Deskripsi_galeri

Id_foto Nama_Foto nama_konten File_konteni

nama_galeri File_galeri

1

N ₁

1

N

Menyimpan N

3.3.4. Kebutuhan Fungsional

Kebutuhan fungsional merupakan tahap aliran informasi yang meliputi diagram konteks dan aliran informasi yang di representasikan dengan menggunakan data flow diagram (DFD).

3.3.4.1.Diagram Konteks

Untuk membatasi sistem yang menunjukkan adanya interaksi sistem dngan komponen luar sistem, maka perlu dibuat diagram konteks yang merupakan suatu diagram yang menggambarkan sistem dalam satu lingkungan dan hubungan entitas luas. Diagram konteks dari sistem yang siusulkan yaitu :

Pembangunan Website eM-BOX

Cafe and Lounge Operator

Data_login Data_foto Data_galeri Data_konten

Pengunjung Informasi_konten

Informasi_galeri

Informasi_login Informasi_foto Informasi_galeri Informasi_Konten

Gambar 3.2 Diagran Konteks Website eM-BOX Cafe and Lounge

3.3.4.2.DFD (Data Flow Diagram)

Data flow diagram merupakan suatu media yang digunakan untuk menggambarkan aliran data yang mengalir pada suatu sistem informasi.

3.3.4.3.Data Flow Diagram Level 1 Operator 1 Login 2 Pengaturan Data Situs T_operator Data_login Informasi_login Data_login Informasi_login Data_foto Data_galeri Data_konten T_Foto T_galeri T_konten Data_foto Informasi_foto Data_galeri Informasi_galeri Data_konten Informasi_konten Informasi_foto Informasi_galeri Informasi_konten

Gambar 3.3 Data Flow Diagram level 1

3.3.4.4. DFD level 2 Proses Pengolahan Data Login

Operator 1.1 Verifikasi Username 1.2 Verifikasi Password T_operator Data_login Informasi_login Data_login Data_login Data_login Informasi_login Informasi_login Informasi_login

3.3.4.5. DFD Level 2 Proses Pengolahan Data Operator 2.1 Data Foto 2.2 Data Galeri 2.3 Data Konten T_foto T_galeri T_konten Info Data foto

Data foto

Info Data galeri Data galeri

Info Data Konten Data Konten

Data foto

Data galeri

Data Konten

Info data Konten Info Data galeri Info Data foto

Info data foto Data foto Info data foto Data foto

Gambar 3.5 DFD Level 2 Proses Pengolahan Data Master

3.3.4.6. DFD Level 3 Proses Pengolahan Data Foto

Operator 2.1.1 Upload foto 2.1.2 Hapus Foto T_foto

Info Data foto Data foto

Info Data foto

Data foto Info data foto

Data foto

T_konten T_galeri

Data galeri

Info data galeri

Data galeri

Info data galeri

Data konten _{Info data konten}

Info data konten Data konten

3.3.4.7. DFD Level 3 Proses Pengolahan data Galeri Operator 2.2.1 tambah galeri 2.2.2 Hapus galeri T_foto Info Data foto

Data foto

Info Data foto

Data foto Info data foto

Data foto

T_konten T_galeri

Data galeri

Info data galeri

Data galeri

Info data galeri

Data konten _{Info data konten}

Info data konten Data konten

Gambar 3.7 DFD Level 3 Proses Pengolahan data Admin

3.3.4.8. DFD Level 3 Proses Pengolahan Data Konten

Operator 2.3.1 Tambah Konten 2.3.3 Hapus Konten T_konten Info Data konten

Data konten

Info Data konten

Infoi data konten Data konten 2.3.2 Edit Konten 2.3.4 Tampil Konten Infoi data konten

Data konten

Data konten Info data konten

Data konten

Info konten

Info data konten

Pengunjung Info data konten

T_galeri

T_foto Data galeri

Data foto

Info data foto Info data galeri

3.3.5. Spesifikasi Proses

Spesifikasi proses digunakan untuk menggambar kan proses model aliran yang terdapat pada DFD. Spesifikasi proses dari gambaran DFD diatas akan dijelaskan pada tabel – tabel berikut :

Tabel 3.2 Spesifikasi Proses

No. Urut Proses Keterangan

1

No. Proses 1 Nama proses Login

Deskripsi Proses untuk masuk ke fitur Upload foto Masukan Data Login

keluaran Info Data Login Tujuan Operator

Logika Proses 1. Input Username dan password

2. Jika username dan password telah sesuai maka tampilkan halaman menu olah data. Jika belum sesuai maka input kembali username dan password.

2

No. Proses 2

Nama proses Pengolahan Data Situs

Deskripsi Proses Pengolahan Data Website

Masukan

1. Data Foto 2. Data Galeri 3. Data Konten Keluaran 1. Informasi Data Foto

2. Informasi Data Galeri 3. Informasi Data Konten Tujuan Operator, Pengunjung

Logika Proses

1. Apabila operator akan mengolah data foto, maka operator dapat memilih menu olah data foto disana operator dapat melakukan pengolahan data foto berupa upload foto, dan hapus foto.

2. Apabila operator akan mengolah data galeri, maka operator dapat melakukan pengolahan data galeri berupa tambah galeri, dan hapus galeri.

3. Apabila operator akan mengolah data konten makan operator dapat melakukan tambah konten, edit konten, hapus konten dan tampilkan konten.

3

No. Proses 1.1

Nama proses Verifikasi Username

Deskripsi Proses pengisian menu/ form login Masukan Data Login

Keluaran 1. Info data Login, login valid, login tidak valid.

Tujuan Operator

Logika Proses

1. Apabila username sesuai maka operator akan masuk ke halaman menu olah data.

2. Apabila usaername salah maka operator akan kembali pada form login.

4

No. Proses 1.2

Nama Proses Verifikasi Password

Masukan Data Login

Keluaran Info Data Login, Login Valid, Login Tidak Valid

Tujuan Operator

Logika Proses

1. Jika password benar maka akan masuk ke halaman menu olah data.

2. Juka password salah maka akan kembali ke menu form login.

5

No. Proses 2.1

Nama Proses Pengolahan data foto

Sumber Operator

Deskripsi Proses pengolahan data foto Masukan Data foto

Keluaran Informasi foto

Tujuan Operator

Logika Proses 1. Operator dapat melakukan Upload Foto, Hapus Foto untuk mengolah data Foto.

6

No. Proses 2.2

Nama Proses Pengolahan data galeri

Sumber Operator

Deskripsi Proses pengolahan data galeri Masukan Data galeri

Keluaran Info data galeri

Tujuan Operator

2. Setelah login berhasil maka operator akan menuju halaman olah data untuk menambah galeri atau menghapus galeri.

7

No. Proses 2.3

Nama Proses Pengolahan data Konten

Sumber Operator

Deskripsi Proses pengolahan data konten Masukan Data data konten

Keluaran Info data konten

Tujuan Operator

Logika Proses

1. Operator melakukan verifikasi login terlebih dahulu.

2. Setelah login berhasil operator akan menuju halaman olah data

3. Operator dapat melakukan Tambah Konten, Edit konten, dan hapus konten, untuk menampilkan data konten.

8

No. Proses 2.1.1

Nama Proses Upload data foto

Sumber Operator

Deskripsi Proses upload foto Masukan Data foto

Keluaran Informasi data foto

Tujuan Operator

Logika Proses

1. Operator melakukan verifikasi login terlebih dahulu.

halaman olah data

3. Operator memilih menu ‘upload foto’

4. Setelah berada di halaman upload foto operator memilih foto dari dalam PC atau laptop dengan memilih button ‘telusuri’

5. Setelah operator memilih foto/ gambar maka operator memilih galeri untuk menyimpan foto. 6. setelah memilih galeri operator memilih button

‘simpan’ untuk mengupload foto. 7. Foto berhasil diupload

9

No. Proses 2.1.2 Nama Proses Hapus foto

Sumber Operator

deskripsi Proses hapus foto Masukan Data foto

Keluaran Informasi data foto yang akan dihapus

Tujuan Operator

Logika Proses

1. Operator melakukan verifikasi login terlebih dahulu.

2. Setelah login berhasil operator akan menuju halaman olah data.

3. Operator memilih menu ‘Hapus Foto’ 4. Operator memilih foto yang akan dihapus 5. Setelah operator memilih foto/ gambar maka

operator memilih button ‘hapus’ untuk menghapus foto.

6. Foto berhasil dihapus.

10

No. Proses 2.2.1

Sumber Operator

Masukan Data galeri yang akan dibuat Keluaran Info Data galeri yang telah dibuat

Tujuan Operator

Logika Proses

1. Operator melakukan verifikasi login terlebih dahulu.

2. Setelah login berhasil Operator akan menuju halaman olah data.

3. Operator memilih memilih menu ‘tambah galeri’ 4. Setelah operator memilih tambah galeri operator akan masuk ke halaman form pembuatan galeri untuk mengisi nama galeri dll.

5. Pilih ‘ok’ untuk membuat galeri baru. 6. Galeri berhasil dibuat

11

No. Proses 2.2.2

Nama Proses Hapus galeri

Sumber Operator

Masukan Data galeri

Keluaran Informasi data galeri yang akan dihapus

Tujuan Operator

Logika Proses

1. Operator melakukan verifikasi login terlebih dahulu.

2. Setelah login berhasil operator akan menuju halaman olah data.

3. Operator memilih memilih menu ‘hapus galeri’ 4. Setelah operator memilih menu ‘hapus galeri’

pengguna akan masuk ke halaman untuk menghapus galeri dll.

6. Pilih ‘ok’ untuk menghapus galeri. 7. Galeri berhasil dihapus.

12

No. Proses 2.3.1

Nama Proses Tambah data konten

Sumber Operator

Masukan Data konten

Keluaran Informasi data konten

Tujuan Operator

Logika Proses

1. Operator melakukan verifikasi login terlebih dahulu.

2. Setelah login berhasil operator akan menuju halaman olah data.

3. Operator memilih memilih menu ‘tambah konten’

4. Setelah operator memilih tambah konten operator akan masuk ke halaman konten untuk memilih konten.

5. Pilih ‘ok’ untuk membuat konten baru.

6. Konten berhasil dibuat

13

No. Proses 2.3.2

Nama Proses Edit data konten

Sumber Operator

Masukan Data konten

Keluaran Informasi data konten yang telah diedit

Tujuan Operator

Logika Proses

1. Operator melakukan verifikasi login terlebih dahulu.

halaman olah data.

3. Operator memilih memilih menu ‘edit konten’ 4. Setelah pengguna memilih edit konten operator

akan masuk ke halaman edit konten untuk memilih konten yang akan diedit.

5. Pilih ‘ok’ untuk menyimpan hasil edit konten.

6. konten berhasil di simpan

14

No. Proses 2.3.3

Nama Proses Hapus data konten

Sumber Operator

Masukan Data konten

Keluaran Informasi data konten yang telah dihapus

Tujuan Operator

Logika Proses

1. Operator melakukan verifikasi login terlebih dahulu.

2. Setelah login berhasil operator akan menuju halaman olah data.

3. Operator memilih memilih menu ‘hapus Konten 4. Di halaman hapus konten pengguna memilih

konten yang akan dihapus.

5. Pilih ‘ok’ untuk menghapus konten.

6. Konten berhasil dihapus.

15

No. Proses 3.3.4

Nama Proses Tampil konten Sumber Operator Masukan Data konten

Keluaran Informasi data konten

Pengunjung

Logika Proses

1. Operator dapat menampilkan data konten.

2. Pengunjung mengakses website di browser dan pengunjung dapat melihat data konten.

3.3.6. Kamus Data

Kamus data (data dictionary) merupakan katalog fakta tentang data dan kebutuhan-kebutuhan informasi dari suatu sistem. Kamus data dibuat berdasarkan arus data yang ada pada diagram aliran data. Dengan menggunakan kamus data, analisis sistem dapat mendefinisikan data yang mengalir pada sistem secara lengkap. Kamus data digunakan untuk merancang input dan merancang database. Kamus data yang dibutuhkan untuk membuat Fitur Upload Foto di webiste eM-BOX Cafe and Lounge, yaitu :

3.3.6.1. Data Login

Tabel 3.3 Data login

Nama aliran data Data Login Where used / how

used 1. Operator , ke proses 1 Login

2. Operator , ke proses 1.1 Verifikasi username 3. Operator , ke proses 1.2 verifikasi password Deskripsi Data untuk masuk ke fitur upload.

Struktur data Username_ operator + Password_ operator, Username_ operator

Password_ operator

Teks, Panjang: 5-15, Range: -, Null Teks, Panjang: 5-15, Range: -, Null

3.3.6.2. Data Foto

Tabel 3.4 Data Foto

Nama aliran data Data Foto Where used / how

used

1. Operator ke proses 2.1 Data Foto. 2. Operator ke proses 2.1.1 upload Foto 3. Operator ke proses 2.1.2 Hapus Foto. Deskripsi Data untuk melakukan upload dan hapus Foto.

Struktur data Id_ Foto + Nama_ Foto + File_Foto + Deskripsi_Foto Id_ Foto

Nama_Foto File_Foto Deskripsi_Foto

Numerik, Panjang: Auto_increment, Range: -, Not Null Teks, Panjang: 25, Range: ‘a’..’Z’, spasi, Not Null Attachment

Teks, Panjang: 50, Range: -, spasi, Not Null

3.3.6.3.Data Galeri

Tabel 3.5 Data Galeri

Nama aliran data Data Galeri Where used / how

used

1. Operator ke proses 2.2. Data galeri. 2. Operator ke proses 2.2.1 Tambah Galeri 3. Operator ke proses 2.2.2 Hapus galeri. Deskripsi Pembuatan galeri, tambah galeri, dan hapus galeri Struktur data Id_galeri + Nama_galeri

Id_galeri Nama_galeri File_galeri Deskripsi_galeri

Numerik, Panjang: 11, Range: -, Not Null

Teks, Panjang: 25, Range: ‘a’..’Z’, spasi, Not Null Attachment

3.3.6.4.Data konten

Tabel 3.6 Data Konten

Nama aliran data

Data Konten

Where used / how used

1. Operator ke proses 2.3 Data konten. 2. Operator ke proses 2.3.1 Tambah konten 3. Operator ke proses 2.3.2 Edit konten 4. Operator ke proses 2.3.3 Hapus konten 5. Operator ke proses 2.3.4 Tampil konten. Deskripsi Memproses data konten berupa tambah,edit,hapus,

dan tampilkan konten. Struktur data Id_konten+ Nama_konten Id_konten

Nama_konten File_konten Deskripsi_konten

Numerik, Panjang: 11, Range: -, Not Null

Teks, Panjang: 25, Range: ‘a’..’Z’, spasi, Not Null Teks, Panjang: 5-15, Range: -, Null

3.4.

Perancangan Basis Data

Perancangan data atau lebih dikenal dengan perancangan basis data yaitu menciptakan atau merancang data yang terhubung dan disimpan secara bersama-sama. Untuk menggambarkannya digunakanlah skema relasi, diagram relasi dan perancangan struktur tabel. Dari tiga hasil tersebut, implementasi basis data akan bisa dikerjakan.

3.4.1.Skema Relasi

Setiap himpunan entitas dipetakan menjadi sebuah relasi dasar dengan primary key yang telah didefinisikan. Adapun skema relasi yang ada yaitu sebagai berikut :

a. Operator =(id_ Operator, nama_ Operator, username_ Operator, password_ Operator).

b. Foto = (id_foto, nama_fot, file_foto, deskripsi_foto, id_admin). c. Galeri =(id_galeri, nama_galeri, file_galeri, deskripsi_galeri) d. konten =(id_konten, nama_konten, file_konten, deskripsi_konten)

3.4.2. Diagram Relasi

3.5. Perancangan Arsitektur

Setelah melakukan perancangan data pada sistem yang dibangun, maka dilakukanlah perancangan arsitektur. Perancangan arsitektur yang telah dibuat meliputi beberapa perancangan diantaranya perancangan struktur menu, perancangan antarmuka, dan jaringan semantik.

3.5.1. Perancangan Struktur Menu

Struktur menu dirancang sesuai dengan level pengguna sistem. Terdapat pengguna fitur ini yaitu Operator, Adapun struktur menunya adalah sebagai berikut :

a. Perancangan Struktur Menu Operator

Beranda Olah Data Operator

Olah Data galeri Olah Data Foto Olah Data konten

Gambar 3.10 Perancangan Struktur Menu Admin

3.5.2. Perancangan Antar Muka

Spesifikasi antarmuka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user. Berikut beberapa perancangan antarmuka untuk Website eM-BOX Cafe and Lounge :

3.5.2.1. Perancangan Antarmuka Login Operator

Gambar 3.11 Perancangan Antarmuka Login Operator

3.5.2.2. Perancangan Antarmuka Olah Data

3.5.2.3. Perancangan Antarmuka Upload Foto

Gambar 3.13 Perancangan Antarmuka Upload Foto

3.5.2.4.Perancangan Antarmuka Olah Foto

3.5.2.5.Perancangan Antarmuka Olah Galeri

Gambar 3.15 Perancangan Antarmuka Olah Galeri

3.5.2.6._{Perancangan Antarmuka Olah Konten}

3.5.3. Perancangan Antarmuka Pengunjung

3.5.3.1.Perancangan Antarmuka Halaman utama Website

Gambar 3.17 Perancangan Antarmuka Halaman utama Website

3.5.4. Perancangan Pesan

3.5.4.1.Perancangan Pesan Login Gagal

Gambar 3.18 Perancangan Pesan Login Gagal

3.6. Perancangan Prosedural

Sebagai langkah terakhir dalam perancangan yaitu merancang procedural yang akan diimplementasikan ke dalam sistem. Prosedur ini akan digunakan sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun perancangan prosedural untuk pembangunan wensite dan fitur upload foto eM-BOX Cafe and Lounge yang akan dibangun adalah sebagai berikut :

3.6.1. Prosedural Login

Mulai

Masukkan Username dan

Password

Mmemproses Username dan Password

Username dan Password sesuai?

Tampilkan Halaman Upload

Foto

selesai

Gambar 3.19 Prosedural Login

3.6.2. Prosedural Upload Foto

Mulai

Masukkan data Foto

Memproses Data Foto

Data Sudah Benar

Tampilkan data Foto

Selesai Ya

Tidak

3.6.3. Prosedural Hapus Foto

Mulai

Pilih Foto yang akan dihapus

Yakin Foto Akan Dihapus?

Tampilkan data Foto

Selesai

Menghapus Foto ya

Tidak

Gambar 3.21 Prosedural Hapus Foto

3.6.4. Prosedural Tambah Galeri

Mulai

Inputkan galeri yang ingin dibuat

Memproses Data Galeri

Data Sudah Benar

Tampilkan data galeri

Selesai Ya

Tidak

3.6.5. Prosedural Hapus galeri Mulai

Pilih galeri yang akan dihapus

Yakin galeri Akan Dihapus?

Tampilkan data Galeri

Selesai

Menghapus galeri ya

Tidak

Gambar 3.23 Prosedural Hapus Galeri

3.6.6. Prosedural Tambah konten

Mulai

Inputkan konten yang

ingin dibuat

Memproses Data konten

Data Sudah Benar

Tampilkan data konten

Selesai

Ya

Tidak

3.6.7. Prosedural hapus konten

Mulai

Pilih konten yang akan

dihapus

Yakin konten Akan Dihapus?

Tampilkan data konten

Selesai Menghapus konten

ya

Tidak

3.7. Implementasi Antarmuka

Implementasi antarmuka merupakan implementasi perancangan kebutuhan fungsional dan perancangan antarmuka

3.7.1. Halaman Utama / Home

Halaman utama atau Home merupakan antarmuka yang menampilkan sebuah halaman depan website eM-BOX Cafe dimana pengunjung akan melihat tampilan depan setelah membuka halaman webiste.

3.7.2. Halaman Login

Halaman Login merupakan halaman untuk admin mengakses fitur upload foto ketika akan meng-upload foto kedalam website, halaman login tersebut berada pada menu Galery.

Gambar 3.27 Halaman Login

3.7.3. Halaman Menu Olah Data

Halaman menu Olah Data merupakan tampilan deretan menu yang berisi langkah untuk pengguna untuk mengolah data foto, galeri dan konten.

3.7.4. Halaman Upload Foto

Halaman Upload Foto adalah halaman yang dimana ketika operator berhasil login dan memilih menu olah data ‘upload foto’, maka akan menuju halaman upload foto ini yang digunakan untuk meng-upload foto.

Gambar 3.29 Halaman Upload Foto

3.7.5. Halaman Olah data Foto

Halaman foto menampilkan hasil foto galeri yang berhasil di upload dan ditampilkan.

3.7.6. Halaman Olah Data Galery

Halaman galery merupakan halaman dimana hasil – hasil foto yang berhasil diupload akan ditampilkan.

Gambar 3.31 Halaman Galery

3.7.7. Halaman Olah Data Konten

Halaman olah data konten merupakan tampilan halaman untuk memperbaharui, mengedit, dan menghapus konten.

BAB 4

KESIMPULAN DAN SARAN

4.1. Kesimpulan

Penulis merancang suatu sistem yang dihasilkan berdasarkan hasil analisa dan pembahasan yang telah diuraikan pada bab-bab sebelumnya. Berdasarkan uraian tersebut, maka dapat diambil kesimpulan terhadap Pembangunan Website dan Fitur Upload Foto di eM-BOX Cafe and Lounge , yaitu sebagai berikut : a. Website eM-BOX Cafe and Lounge dibangun dapat menjadi media perantara

antara pelanggan dengan pihak eM-BOX Cafe and Lounge dalam memberikan informasi terbaru melalui media internet.

b. Fitur Media Upload Foto di website eM-BOX Cafe and Lounge dapat dijadikan sebagai media yang memberikan kemudahan bagi pengguna untuk memperbaharui gambar dan iklan di website eM-BOX Cafe and Lounge.

4.2. Saran

Berdasarkan kesimpulan di atas, maka saran yang diharapkan yaitu dilakukan suatu pengembangan terhadap Pembangunan Website dan Fitur Upload Foto di eM-BOX Cafe and Lounge yang dibangun, sebagai berikut :

a. Website eM-BOX Cafe and Lounge yang telah dirancang dapat dikembangkan lagi untuk hasil yang lebih baik.

b. Website eM-BOX Cafe and Lounge dapat ditambahkan fitur – fitur tambahan mendukung yang dapat membantu promosi melalui iklan di internet.

Mulai

Pilih konten yang akan

dihapus

Yakin konten Akan Dihapus?

Tampilkan data konten

Selesai

Menghapus konten ya

Tidak

3.7. Implementasi Antarmuka

Implementasi antarmuka merupakan implementasi perancangan kebutuhan fungsional dan perancangan antarmuka

3.7.1. Halaman Utama / Home

Halaman utama atau Home merupakan antarmuka yang menampilkan sebuah halaman depan website eM-BOX Cafe dimana pengunjung akan melihat tampilan depan setelah membuka halaman webiste.

3.7.2. Halaman Login

Halaman Login merupakan halaman untuk admin mengakses fitur upload foto ketika akan meng-upload foto kedalam website, halaman login tersebut berada pada menu Galery.

Gambar 3.27 Halaman Login

3.7.3. Halaman Menu Olah Data

Halaman menu Olah Data merupakan tampilan deretan menu yang berisi langkah untuk pengguna untuk mengolah data foto, galeri dan konten.

3.7.4. Halaman Upload Foto

Halaman Upload Foto adalah halaman yang dimana ketika operator berhasil login dan memilih menu olah data ‘upload foto’, maka akan menuju halaman upload foto ini yang digunakan untuk meng-upload foto.

Gambar 3.29 Halaman Upload Foto

3.7.5. Halaman Olah data Foto

Halaman foto menampilkan hasil foto galeri yang berhasil di upload dan ditampilkan.

3.7.6. Halaman Olah Data Galery

Halaman galery merupakan halaman dimana hasil – hasil foto yang berhasil diupload akan ditampilkan.

Gambar 3.31 Halaman Galery

3.7.7. Halaman Olah Data Konten

Halaman olah data konten merupakan tampilan halaman untuk memperbaharui, mengedit, dan menghapus konten.

BAB 4

KESIMPULAN DAN SARAN

4.1. Kesimpulan

Penulis merancang suatu sistem yang dihasilkan berdasarkan hasil analisa dan pembahasan yang telah diuraikan pada bab-bab sebelumnya. Berdasarkan uraian tersebut, maka dapat diambil kesimpulan terhadap Pembangunan Website dan Fitur Upload Foto di eM-BOX Cafe and Lounge , yaitu sebagai berikut : a. Website eM-BOX Cafe and Lounge dibangun dapat menjadi media perantara

antara pelanggan dengan pihak eM-BOX Cafe and Lounge dalam memberikan informasi terbaru melalui media internet.

b. Fitur Media Upload Foto di website eM-BOX Cafe and Lounge dapat dijadikan sebagai media yang memberikan kemudahan bagi pengguna untuk memperbaharui gambar dan iklan di website eM-BOX Cafe and Lounge.

4.2. Saran

Berdasarkan kesimpulan di atas, maka saran yang diharapkan yaitu dilakukan suatu pengembangan terhadap Pembangunan Website dan Fitur Upload Foto di eM-BOX Cafe and Lounge yang dibangun, sebagai berikut :

a. Website eM-BOX Cafe and Lounge yang telah dirancang dapat dikembangkan lagi untuk hasil yang lebih baik.

b. Website eM-BOX Cafe and Lounge dapat ditambahkan fitur – fitur tambahan mendukung yang dapat membantu promosi melalui iklan di internet.