eptik9.files.wordpress.com · Web viewSistem komputer terhubung secara global dan menggunakan...

PERANCANGAN WEBSITE

“TOKO BUNGA BERKAH”

Dengan Menggunakan Dreamweaver

DISUSUN OLEH KELOMPOK : 2

1. ANDRI SANJAYANI 121514462. AYU SITI KHOTIJAH 121519463. ABDUR ROZAQ 12156234

4. M.ARIEF AINUL FIKRI 121507045. REGINA CEPE 12150300

MANAJEMEN INFORMATIKA 12-5C-37BINA SARANA INFORMATIKA

TAHUN :2017

i

PENILAIAN TUGAS WEB PEMOGRAMAN

TUGAS ini telah dinilai pada tanggal ………………………

PENILAI

(.......................................................)

Saran-saran dari penilai :

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

ii

KATA PENGANTAR

Puji syukur, penulis panjatkan kehadirat Tuhan Yang Maha Esa, yang telah

melimpahkan rahmat dan karunia – Nya , sehingga penulis dapat menyelesaikan tugas

metode penelitian ini dengan baik. Adapun judul tugas web pwmograman yang di

beri judul sebagai berikut : “Toko Bunga Berkah”.

Tujuan tugas ini adalah sebagai salah satu syarat guna memenuhi syarat

penilaian tugas di semester 5 mata kuliah web pemograman di AMIK BSI, Penulis

menyadari bahwa tanpa bimbingan dan dorongan dari semua pihak, maka penulisan

tugas perancangan web ini tidak akan bisa di selesaikan. Oleh karena itu penulis

menyampaikan ucapan terimakasih kepada :

1. Bapa Arfan selaku dosen mata kuliah web progemming.

2. Orang tua yang selalu memberikan dukungan dan doa.

3. Teman – teman kelompok yang mau berkerjasama.

4. Semua pihak yang telah membantu sehingga makalah ini dapat terselesaikan.

Penulis menyadari bahwa penulisan tugas web pemograman ini masih jauh

sekali dari sempurna, untuk itu penulis mohon kritik dan saran yang bersifat

membangun demi kesempurnaan penulisan dimasa yang akan datang.

Akhir kata, semoga tugas perancangan web ini dapat berguna bagi penulis

khususnya dan bagi pembacanya yang berminat pada umumnya.

Jakarta, 23 Oktober 2017

iii

DAFTAR ISI

Halaman

Cover……………….i

Lembar Penilaian Tugas..........................................................................................iiKata Pengantar........................................................................................................iiiDaftar Isi.................................................................................................................ivDaftar Simbol...........................................................................................................vDaftar Gambar.......................................................................................................vi Daftar Tabel.............................................................................................................ixDaftar Lampiran…………………………………………………………………..xBAB I PENDAHULUAN.......................................................................................1

1.1 Latar Belakang ..................................................................................11.2 Maksud dan Tujuan...........................................................................31.3 Metode Penelitian..............................................................................31.4 Ruang Lingkup..................................................................................61.5 Sistematika Penulisan........................................................................6

BAB I I LANDASAN TEORI...............................................................................82.1 Konsep Dasar Web............................................................................82.2 Teori Pendukung ..............................................................................3

BAB IIIPEMBAHASAN.....................................................................................253.1 Analisa Kebutuhan.........................................................................25 3.1.1 Analisa Kebutuhan User.........................................................32 3.1.2 Analisa Kebutuhan Sistem......................................................323.2 Implementasi...................................................................................30 3.2.1 Implementasi..........................................................................32

BAB IVPENUTUP...............................................................................................844.1 Kesimpulan......................................................................................844.2 Saran................................................................................................85

DAFTAR PUSTAKA...........................................................................................86DAFTAR RIWAYAT HIDUP............................................................................88

iv

LAMPIRAN-LAMPIRAN..................................................................................90

DAFTAR SIMBOL

v

Data Flow

Menunjukkan perpindahan data dari satu titik ke

titik lain.

Data Store

Digunakan untuk menggambarkan suatu tempat

untuk menyimpan atau mengambil data yang

diperlukan.

External Entity

Digunakan untuk menggambar suatu sumber

atau tujuan pada urusan data.

Process

Digunakan untuk menunjukkan adanya proses transformasi dan aliran data yang meninggalkan suatu proses selalu diberi label yang berbeda dari aliran data yang masuk.

DAFTAR GAMBAR

Halaman

1. Gambar II.1 Waterfall..........................................................................................23

2. Gambar II.2 Struktur Navigasi Hierarki..............................................................24

3. Gambar II.3 Struktur Navigasi Linear.................................................................24

4. Gambar II.4 Struktur Navigasi Non Linear.........................................................25

5. Gambar II.5 Struktur Navigasi Composit............................................................26

6. Gambar III.1 Use Case Diagram..........................................................................31

7. Gambar III.2 Activity Diagram............................................................................37

8. Gambar III.3 Class Diagram................................................................................38

9. Gambar III.4 Sequence Diagram.........................................................................38

10. Gambar III.5 Rancangan Antar Muka Upload pembayaran................................39

11. Gambar III.6 Rancangan Antar Muka Info..........................................................39

12. Gambar III.7 Rancangan Antar Muka Lokasi......................................................40

13. Gambar III.8 Rancangan Antar Muka Hasil Seleksi...........................................40

14. Gambar III.15 Rancangan Antar Muka Login Admin.........................................44

15. Gambar III.16 Rancangan Antar Muka Beranda admin......................................44

6

DAFTAR TABELHalaman

1. Tabel III.1 Spesifikasi Tabel Produk...................................................................54

2. Tabel III.2 Spesifikasi Tabel Administrasi..........................................................56

3. Tabel III.3 Spesifikasi Tabel Customer...............................................................57

4. Tabel III.4 Spesifikasi Tabel Pembayaran...........................................................58

5. Tabel III.5 Spesifikasi Tabel Detail Transaksi....................................................58

6. Tabel III.6 Spesifikasi Tabel Transaksi...............................................................60

7. Tabel III.7 Spesifikasi Tabel Detail Soal.............................................................61

8. Tabel III.8 Spesifikasi Tabel Nilai Ujian Matematika.........................................62

9. Tabel III.9 Spesifikasi Tabel Nilai Ujian Bahasa inggris....................................63

10. Tabel III.10 Spesifikasi Tabel Siswa...................................................................64

11. Tabel III.11 Spesifikasi Tabel Kelas.................................................................... 65

12. Tabel III.12 Spesifikasi Tabel Daya Tampung....................................................66

7

BAB I

PENDAHULUAN

1.1. Latar Belakang

Dari segi bahasa ,toko online berasal dari dua suku kata, Toko dan

Online.menurut Kamus Besar Bahasa Indonesia ,toko berati sebuah tempat atau

bangunan permanen untuk menjual barang – barang. Sedangkan online yang

terjemahan bahasa indonesia adalah keadaan di saat seseorang terhubungke dalam

suatu jaringan ataupun sistem yang lebih besar . Jadi dapat di artikan toko online

sebagai tempat terjadinya aktifitas perdagangan atau jual beli barang yang

terhubung ke dalam suatu jaringan internet.

Toko online adalah tempat kita bisa menampilkan barang dagangan kita di

internet dan dilakukan transaksi dengan pembeli melalui media di website .Saat

ini toko online di Indonesia mulai berkembang pesat. Semakin banyak orang yang

menggunakan internet untuk membeli dan menjual barang ataupun jasa.

Konsep online shopping atau Toko Online menyediakan banyak

kemudahan dan kelebihan jika dibandingkan dengan konsep belanja tradisonal .

Selain proses transaksi bisa lebih cepat .

Dunia internet juga menjadi sumber inspirasi bagi penulis untuk membuat

toko online ini.penulis menyadari adanya keuntungan dari membuat toko online

yaitu biaya lebih murah karena tidak perlu tanpa harus menyewa toko.

Namun di toko online bunga Berkah ini hanya beberapa jenis bunga saja

yang bisa di beli bunga mawar anggrek dan tulip dan menjual bunga

bucket,flower box,bunga tangkai.

8

1.2. Batasan Masalah

1. Sistem ini diimplementasikan pada satu toko bunga online.

2. Target pasar dari toko bunga online yang menerpakan teknologi masyarakat

pengguna internet.

3. Pembuatan toko bunga online ini memakai aplikasi adobe

dreamweaver ,php,xamp, dan sql.

1.3. Maksud dan Tujuan

Adapun maksud dan tujuan yang ingin dicapai dalam pembuatan website adalah

sebagai berikut:

1. Untuk merancang sistem penjualan toko bunga berbasis web

2. Mempermudah oarang yang suka berbelanja namun tidak mempunyai waktu

yang banyak tanpa harus mengunjungi toko sebenarnya.

3. Memudahkan customer untuk membayar melalui m-banking atau bayar di

tempat.

Maksud dari penulisan makalah adalah membuat perancangan website Toko Bunga

Berkah dengan Menggunakan aplikasi adobe dreamwaver ,php dan xamp untuk

memenuhi nilai Ujian akhir Semester 5 pada mata kuliah perancangan web.

1.4. Ruang Lingkup

Dalam penulisan tugas ujian akhir semester penulis membahas mulai dari proses

login , registrasi,pembayaran .

1.5. Sistematika Penulisan

Sistematika penulisan merupakan uraian tentang susunan dari penulis itu sendiri

yang dibuat secara teratur dan terperinci, sehingga dapat memberikan gambaran secara

menyeluruh. Adapun sistematika penulisan pada makalah ini terditi dari empat Bab ,

yaitu sebagai berikut :

9

BAB I: PENDAHULUAN

Dalam Bab ini berisi tentang uraian yang membahas mengenai latar

belakang , batasan masalah, tujuan , ruang lingkup dan sistematika

penulisan tugas web progeming.

BAB II: LANDASAN TEORI

Dalam Bab ini menjelaskan pengertian adobedreamaver,php,xamp dan

photoshop.

BAB III: PEMBAHASAN

Pada Bab ini berisi tentang rancangan sistem yang akan dibuat yaitu

berisikan sistem yang terpadu dengan database , rancangan tampilan

website, diagram use case, diagram activity,diagram class dan diagram

sequence.

BAB IV: PENUTUP

Pada Bab ini berisikan kesimpulan dari apa yang telah dibahas dari Bab I sampai

Bab III serta berisikan saran yang bersifat membangun untuk penulisan tugas web

progemming.

10

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

1.Website

Menurut Hakim Lukmanul (2004) Website merupakan fasilitas internet yang

menghubungkan dokumen dalam lingkup lokal maupun jarak jauh. Dokumen pada

website disebut dengan web page dan link dalam website memungkinkan pengguna

bisa berpindah dari satu page ke page lain (hyper text),baik diantara page yang

disimpan dalam server diseluruh dunia .page diakses dan dibaca melalui browser

seperti netscape navigator ,internet explorer , mozila firefox ,google chrome dan

aplikasi browser lainnya.

A.Pengertian Internet

Adalah merupakan “kependekan dari kata “internetwork”’yang berarti

rangkainan komputer yang terhubung menjadi beberapa rangkaian jaringan”.

Sistem komputer terhubung secara global dan menggunakan TCP/IP sebagai

protocol. Secara umum internet dapat di artikan sebagai pertukaran informasi

dan komunikasi. Semua informasi bisa didapatkan dengan mudah dan bebas di

internet tanpa ada batasan.Ada beberapa istilah yang sering digunakan yaitu:

a. World Wide Web (WWW)

b. Website

c. Web Pages (Halaman Web)

d. Home Page (Halaman Muka)

e. Browser

f. URL (Universal Resource Locator)

g. HTTP (Hypertext Transfer Protocol)

h. DNS (Domain Name System)

i. TCP/IP (Transmission Control Protocol/Internet Protocol)

11

j. IP (Intenet Protocol)

k. Hyperlink

l. Web Browser

dengan halaman web yang lainnya disebut Hyperlink, sedangkan teks yang

dijadikan media penghubung disebut Hypertext.

2. Bahasa Pemograman

A.Pengertian HTML (Hypertext Markup Language)

Menurut Simarmata (2010:52) HTML adalah bahasa markup untuk

menyebarkan informasi pada web. Ketika merancang HTML ,ide ini diambil dari

standard generalized markup language (SGML) . walaupun HTML tidak dengan mudah

dapat dipahami kebanyakan orang,ketika di terbitkan penggunanya pada tcp yang

awalnya digunakan untuk mengambil kembali file – file HTML dari server web ketika

dirancang pada tahun 1991.

B.Pengertian PHP (Hypertext Prepocessor)

PHP atau PHP Hypertext Prepocessor adalah sebuah bahasa pemograman web

berbasis server (server – side) yang mampu mem-parsing kode php dari kode web

dengan ekstensi .php, sehingga menghasilkan tampilan website yang dinamin di sisi

clinet(browser).

C.Pengertian CSS (Cascading Style Sheet)

Istilah CSS ini sering kali kita dengar ketika berurusan dengan mendesain

halaman web . CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu

dokumen yang ditulis dalam bahasa markup language.jika kita berbicara dalam konteks

web ,bisa di artikan secara bebas sebagai:CSS merupakan bahasa yang digunakan untuk

mengatur tampilan/desain suatu halaman HTML. Ada beberapa kelebihan penggunaan

css yaitu halamn web menjadi tidak padat,lebih mudah mengganti tampilan web dengan

cukup mengganti nilai dan defisi pada satu file css saja.

12

D.Pengertian Adobe Dreamweaver

adalah sebuah software HTML editor profesional yang digunakan untuk

mendisain secara visual dan mengelola situs web maupun halaman web . Dreamweaver

memudahkan kita dalam pembuatan website karena tidak perlu berhubung langsung

dengan codingan html dan lainnya karena dilengkapi dengan berbagai macam tools

pendukung . Dreamweaver dilengkapi dengan beberapa fasilitas diantaranya :

Referensi HTML

CSS dan Java Script

Java script debugger

Editor kode

E.Pengertian Xampp

Menurut Betha Sidik,dalam bukunya yang berjudul Pemograman

Web dengan PHP (2012:72),menyebutkan bahwa: “ XAMPP

(X(windows/linux)Apache MysqlPHP dan Perl) merupakan paket server

web php dan database MYSQL yang paling popular dikalangan

pengembangweb menggunakan PHP dan Mysql sebagai data basenya”.

F.Pengertian Photoshop

Adalah perangkat lunak editor citra buatan adobe systems yang di khususkan untuk

pengeditan foto/gambar dan pembuatan efek.perangkat lunak ini banyak digunakan

oleh fotografer digital dan perusahaan iklanuntuk perngakat lunak pengelolah

gambar / foto.

G. ENTERPRISE ARCHITECTURE

Adalah proses menerjemahkan visi dan strategi suatu bisnis keperubahan yang lebih

efektif dengan cara membuat ,mengomunikasikan,dan meningkatkan kebutuhan

kunci,prinsip dan model yang mendeskripsikan rancangan web.

3. Basis Data

13

Menurut Kusniri (2007:02) “Basis data merupakan data yang saling

berelasi”. Menurut Solichin (2010:06) “Kumpulan informasi yang disimpan

didalam computer secara sistematik sehingga dapat diperiksa menggunakan suatu

program untuk memperoleh dari basis data tersebut”.

A.Bahasa Basis Data

Menurut Connoly & Begg (2010:91) menerangkan bahwa data language

memiliki dua bagian, yaitu :

1.Data Definition Language (DDL)

Menurut Connoly & Begg (2010:92), menerapkan bahwa DDL merupakan

sebuah bahasa pemprograman yang menyediakan DBA atau pengguna untuk

mendeksripsikan dan menentukan nama entitas, atribut, dan hubungan yang di

butuhkan aplikasi yang digabungkan secara integritas. DDL juga digunakan untuk

menetapkan skema basis data.

2.Data Manipulation Language (DML)

Menurut connoly & Begg (2010:92), Menerangkan bahwa DML merupakan

sebuah bahasa pemprograman yang menyediakan beberapa set operasi untuk

mendukung operasi dan manipulasi dalam sebuah data yang berperan didalam basis

data. Berikut ini adalah operasi yang dilakukan oleh DML yaitu :

a. Memasukan data baru kedalam basis data.

b. Memodifikasikan penyimpanan data dalam basis data.

c. Memperbanyak data didalam basis data.

d. Menghapus data didalam basis data.

14

DML dibedakan menjadi dua tipe, yaitu :

1.Procedural DML

Menurut Connoly & Begg (2010:93), procedural DML adalah sebuah bahasa

yang memungkinkan pengguna untuk menjelaskan data apa yang dibutuhkan dan

bagaimana mendapatkan data tersebut. Procedural DML memberikan hak kepada

pengguna atau seorang programer untuk menspesifikasikan data yang dibutuhkan dan

bagaimana mendapatkannya.

2.Non Procedural DML

Menurut Connoly & Begg (2010:93), non prosedural DML adalah sebuah

bahasa yang memungkinkan pengguna untuk menekankan kepada data yang

dibutuhkan daripada bagaimana data tersebut didapatkan. Non Procedural DML

menspesifikasi data yang dibutuhkan secara tunggal. Pengguna menspesifikasikan data

yang dibutuhkan tanpa menspesifikasikan bagaimana tersebut ditemukan .

B. MysqlMenurut solichin (2010:08) “Mysql adalah sebuah perangkat lunak system

manajemen basis data SQL (bahasa inggris : database managemen system) atau DBMS

yang multithread, multi-user, dengan sekitar 6 juta instalasi diseluruh dunia”.

C.PHPMyadmin

Menurut Solichin (2010:22) “PHPMyadmin merupakan front-end MySQL

berbasis web”.

Dengan adanya aplikasi ini akan sangat mempermudah dan mempersingkat

kerja kita dalam mengelola database MySQL. Dengan adanya kelebihan yang

dimilikinya mengakibatkan para pengguna awan tidak harus mampu untuk mengetahui

perintah-perintah MySQL dalam pembuatan database dan tabel.

4. Model Pengembangan Perangkat Lunak

Model pengembangan yang diperkenalkan oleh Winston Royce PADA TAHUN

70-an ini Merupakan model klasik yang sederhana dengan aliran sistem yang linier

keluaran dari tahap sebelumnya merupakan masukan untuk tahap berikutnya :

15

A)Definisi Waterfall

Menurut Rosa dan Shalahuddin (2013:28) “Waterfall sering juga disebut model

sekuensial linier (Sequential linear) atau alur hidup klasik (classic life circle).

B) Tahapan Waterfall

Waterfall memiliki beberapa tahapan, yaitu sebagai berikut :

1.Analisis Kebutuhan Perangkat Lunak

Proses pengumpulan kebutuhan dilakukan secara intensif untuk

menspesifikasi kan kebutuhan perangkat lunak seperti apa yang dibutuhkan oleh

user. Spesifikasi kebutuhan perangkat lunak pada tahap ini perlu perlu untuk

didokumentasikan.

2.Design

Design perangkat lunak adalah proses multi langkah yang focus pada design

pembuatan program perangkat lunak termasuk struktur data, arsitektur perangkat lunak

representsi antar muka, dan prosedur pengkodean. Tahapan ini mentranslasi kebutuhan

perangkat lunak dari tahap analisis kebutuhan ke representasi design agar dapat

diimplementasikan menjadi program dalam tahap selanjutnya. Design perangkat lunak

yang dihasilkan pada tahap ini juga perlu di dokumentasikan.

3.Pembuatan kode Program

Design harus ditranslasikan ke dalam program perangkat lunak. Hasil

dari tahap ini adalah program computer sesuai dengan design yang telah dibuat

pada tahap design.

4.Pengujian

Pengujian fokus pada perangkat lunak secara dari segi logic dan fungsional dan

memastikan bahwa semua bagian sudah diuji. Hal ini dilakukan untuk meminimalisir

kesalahan (error) dan memastikan keluaran yang dihasilkan sesuai dengan yang

diinginkan.

16

5.Pendukung (Support) atau pemeliharaan (maintenence)

Tidak menutup kemungkinan sebuah perangkat lunak mengalami perubahan

ketika sudah dikrim ke user. Perubahan biasa terjadi karena adanya kesalahan yang

muncul dan tidak terdeteksi saat pengujian atau perangkat lunak harus beradaptasi

dengan lingkungan baru.

Dari kenyataan yang terjadi sangat jarang model air terjun dapat dilakukan sesuai

alurnya karena sebab berikut :

a. Perubahan spesifikasi perangkat lunak terjadi ditengah alur perkembangan .

b. Sangat sulit bagi pelanggan untuk mendefinisikan semua spesifikasi dari awal alur

perkembangan.

c. Pelaanggan tidak mungkin bersabar mengakomodasikan perubahan yang diperlukan

diakhiri pengembangan.

A. Gambar Waterfall

Sumber : Rossa dan Shalahuddin (2013:29)

Gambar II.1 Gambar Waterfall

17

Analisis

Sistem/Rekayasa Informasi

Desain Pengkodean

Pengujian

2.2. Teori Pendukung

1. Struktur Navigasi

Menurut Binanto (2010:268) mengemukakan bahwa “Setiap rencana akan dibuat

desainnya dan kmeudian diproduksi menjadi produk jadi yang bersifat sementara.

Disamping itu tahap ini mencakup perencanaan struktur navigasi yang baik untuk

antarmuka penggunanya. Ada 4 struktur data yang digunakan yaitu linier, non linier,

hierarki dan komposit”.

Ada empat macam bentuk dasar struktur navigasi menurut Bintaro

(2010:269) adalah sebagai berikut :

a. Stuktur Navigasi Hirarki

Struktur yang mengandalkan percabangan untuk data atau gambar pada layar dengan

kriteria tertentu. Menu utama (Master page) memiliki percabangan yang disebut

halaman pendukung (Slave page).

Pendukung dan jika dipilih akan menjadi halaman kedua, begitu seterusnya.

Sumber :Binanto (2010:269)

18

Gambar II.2 Struktur Navigasi Hirarki

b.Struktur Naviigasi Linier

Struktur navigasi linier (satu arah) adalah struktur yang mempunyai satu rangkaian alur

cerita yang berurutan. Dalam struktur navigasi ini tidak diperkenankan adanya

percabangan.

Sumber : Binanto (2010:269)

Gambar II.3 Struktur Navigasi Linier

c.Struktur Navigasi Non Linear

Struktur navigasi non linear adalah pengembangan dari struktur navigasi linear dalam

struktur navigasi inidimungkinkan adanya percabangan. Percabangan ini berbeda

dengan struktur hierarki karena tiap-tiap tampilan mempunyai kedudukan yang sama

yaitu tidak adanya menu utama dan tampilan pendukung.

Gambar : Binanto (2010:270)

19

Gambar II.4 Struktur Navigasi Non Linear

d.Struktur Navigasi Komposit

Merupakan gambaran dari ketiga struktur sebelumnya yaitu navigasi hirarki,

navigasi linear dan navigasi nin linear.

Sumber : Binanto (2010:270)

Gambar II.5 Struktur Navigasi Composit

20

A. Pengertian Activity Diagram

Menurut Rosa A.S dan M. Shalahuddin (2011:134) , diagram aktivitas

menggambarkan workflow (aliran kerja) atau aktivitas dari sebuah sistem

atauproses bisnis .Yang perlu diperhatikan disini dalah bahwa diagram aktivitas

menggambarkan aktivitas sistem bukan apa yang dilakukan aktor , jadi

aktivitasyang dapat dilakukan oleh sistem.

B. Pengertian Diagram Use Case

Diagram use case menggambarkan apa saja aktivitas yang dilakukan oleh suatu

sistem dari sudut pandang pengamatan luar.yang menjadi persoalan itu yang dilakukan

bukan bagaimana melakukannya.Diagram use case dekat kaitannya dengan kejadian –

kejadian seseorang yang berinteraksi dengan sistem .

C. Diagram Class

Menurut Rosa A.S dan M.Shalahuddin (2011 :122) , diagram classdiagram

menggambarkan struktur sistem dari segi pendefinisian kelas – kelas yang akan dibuat

untuk membangun sistem . kelas mempunya yang disebut atribut dan metode atau

operasi yaitu:

1. Atribut merupakan variabel – variabel yang di miliki oleh suatu kelas .

2. Operasi yaitu metode adalah fungsi yang dimili oleh suatu kelas.

D. Diagram Sequence

Menurut Rosa A.S dan M.shalahuddin(2011 : 137) diagram sequence

menggambarakan kelakuan objek pada use case dengan mendeskripsikan waktu hidup

objek dan messager yang dikirimkan dan diterima objek. Oleh karna itu untuk

menggambarakan diagram sequnce , maka harus diketahui objek – objek yang terlibat

dalam sebuah use case berserta metode –metode yang dimiliki kelas yang diintansiasi

menjadi obejk itu.

21

A) Pengujian Web

Menurut Rosa dan M.Shalahuddin (2013 : 275) menyaytakan bhwa “Black box

testing yaitu menguji perangkat lunak dari spesifikasi fungsional tanpa menguji

design dan kode program”.

Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi masukan, dan

keluaran dari perangkat lunak sesuai dengan spesifikasi yang dibutuhkan perangkat

lunak apakah sesuai dengan spesifikasi yang dibutuhkan dengan kasus ujian yang

dibuat untuk melakukan pengujian kotak harus dibuat dengan kasus besar.

Misalkan untuk kasus proses login maka kasus ujian yang dibuat adalah :

1.Jika user memasukan nama pemakai (username) dan kata sandi (password)yang

benar.

2.Jika user memasukan nama pemakai (username) dan kata sandi (password)yang

salah.

22

BAB III

PEMBAHASAN

3.1. Analisis Kebutuhan

3.1.1. Analisis Kebutuhan User

Penulis mendeskripsikan analisa kebutuhan user menjadi tiga bagian:

1. Analisa Kebutuhan Customera. customer dapat melihat tampilan beranda, dan mengunjungi icon navigasi

b. customer dapat memesan bunga

c. Melakukan Login ke halam web yang tertera di beranda toko bunga berkah

d. Melakukan upload bukti pembayaran

e. customer dapat melihat info terkait tentang pemesanan

2. Analisa Kebutuhan Admin

a. Melakukan login keruang admin

b. Admin dapat memanipulasi data pendaftaran seperti tambah, ubah, hapus,

simpan dan cetak

c. Admin dapat konfirmasi pembayaran pelunasan

d. Admin dapat mencetak data pembayar yang lunas

e. Admin dapat melihat pemesanan yang di pesan customer

f. Keluar dari admin

3.1.2.Analisa kebutuhan sistem

Penulis mendeskripsikan analisa kebutuhan sistem menjadi dua bagian

1. Hardware (Perangkat Keras)

a. Perangkat Keras (contohnya keyboard,mouse,kamera dan scanner)

Digunakan untuk memasukan data input berupa karakter dan melakukan perintah

dengan cara klik tombol aktif

23

b. Output Device (contohnya monitor,printer)

Fungsinya untuk mengeluarkan hasil pemrosesan ataupun pengolahan data yang

berasal dari CPU kedalam suatu media yang dapat dibaca oleh manusia

c. Memori Device (contohnya harddisk,ram)

Funsinya sebagai tempat penyimpanan data dalam sebuah komputer penulis

menggunakan spesifikasi harddisk 500gb, ram 4gb

d. Processor

Digunakan sebagai pusat otak dari sebuah komputer yang fungsinya melakukan

perhitungan dan menjalankan tugas, penulis menggunakan spesifikasi processor

core i3

2. Software (Perangkat Lunak)a. OS ( Operating System)

(1) Berfungsi sebagai resource manager, merupakan sumber daya dan

mengalokasikannya, contoh: memori, cpu, disk drive dan perangkat lainnya

(2) Interface/Tatap muka, yaitu sebagai perantara antar pengguna perangkat

keras dengan menyediakan tampilan kepada pengguna yang mudah dipahami dan

bersahabat(user friendly)

(3) Coordinator, mengkordinasikan dan menyediakan fasilitas sehingga aktifitas

yang kompleks dapat diatur dan dapat di proses secara berurutan

b. Database (Xampp)

(1) Mengelompokan data, database bertujuan untuk mengelompokan data agar

mudah dipahami

(2) Menghindari terjadinya duplikasi atau inkonsistensi data

(3) Memudahkan dalam menyimpan, mengakses dan memperbaharui serta

menghapus data

c. Design web (PHP, Dreamweaver)

(1) Untuk dapat mendesain dan membangun sebuah website agar tampilan

website terlihat lebih menarik ketika di kunjungi pengunjung website

(2) Untuk dapat membuat program berbasis website

d. Browser (Contohnya Google Chrome)

24

(1) Untuk Menampilkan dan melakukan interaksi-interaksi dengan halaman-

halaman yang disediakan oleh webserver

e. Security Web

(1) Untuk mendeskipsikan password login

(2) Hak akses admin untuk hanya admin yang dapat memasuki, merubah,

menghapus dan menambahkan data pada sebuah website

A. Use case diagram

uc Use Case View

EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version


































admin

Akses Web

Doctor Akun

Login

Home User

Password

Web

User

Costumer

Input Produk

Update Produk

Hapus Produk

Produk

Transaksi

Pembayaran

Laporan

Transaksi

Gambar III.1 Use case diagram

25

B. Activity diagram

act Admin

EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version



































Admin

Login

Kelola Produk

Kelola Transaksi

Laporan Penjualan Transaksi

Kirim Produk

System

Update Produk

Produk

Transaksi

Customer

Pilih

Laporan

Terima

Gambar III.2

Activity diagram

26

C. Class diagram

class AdminEA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version EA 13.5 Unregistered Trial Version
































Admin

+ id_admin

+ nm_admin

+ password

+ kelola transasksi

+ kelola_produk

+ kirim produk

Detail Transasksi

+ id_admin

+ id_customer

+ id_pembayaran

+ id_produk

+ subtotal

+ tampil detail transasksi

Customer

+ alamat

+ email

+ id_customer

+ nama

+ telepon

+ lihat_produk

+ pilih_produk

+ terima_barang

+ transasksi

«import»

«import»

Gambar III.3

Class diagram

27

D. Sequence Diagram

Gambar III.4

Sequence diagram

28

E. Spesifikasi File

Spesifikasi File merupakan kumpulan item data yang di atur di dalam suatu

record dimana item-item data tersebut dimanipulasi untuk memproses data tertentu,

di dalam perancangan program ini penulis memberi nama database adalah toko

bunga berkah. Spesifikasi ini terdiri dari file-file yang akan dibuat untuk sebuah

program berserta record-record yang di perlukan antara lain:

1. Spesifikasi File Produk

Nama File : id_produk

Akronim : produk

Fungsi :

Tipe File : File Master

Organisasi File : Index Sequential

Akses File : Random

Media : Harddisk

Panjang record :

Kunci Field : id_produk

Software : Mysql,dreamwaver

Tabel III.1.SpesifikasiTabelProduk

29

No ElemenData Nama Field Type Size Keterangan

1 id_produk id_produk Varchar Primary

Key

2 Nm_produk Nm_produk Varchar

3 Harga Harga Varchar

4 Stok Stok Varchar

Spesifikasi File admin

Nama File : id_admin

Akronim : admin

Fungsi : untuk menyimpan data transaksi

Tipe File :


Akses File : Random

Media : Harddisk

Panjang record :

Kunci Field : id_admin


Tabel III.2.Spesifikasi Tabel Admin

No Elemen Data Nama Field Type Size Keterangan

1 Id_admin Id_admin Varchar Primary

Key

2 Nm_admin Nm_admin Varchar

3 Password Password Varchar

30

2. Spesifakasi File Customer

Nama File :id_customer

Akronim : customer

Fungsi :

Tipe File :


Akses File : Random

Media : Harddisk

Panjang record :

Kunci Field : id_customer


Tabel III.3.Spesifikasi Tabel Customer


1 id_customer id_customer Varchar Primary Key

2 Nama Nama Varchar

3 alamat Alamat Text

4 Email Email Varchar

5 telpon Telpon Varchar

31

3. Spesifikasi File Pembayaran

Nama File : id_pembayaran

Akronim : pembayaran

Fungsi : bukti pembayaran

Tipe File :


Akses File : Random

Media : Harddisk

Panjang record :

Kunci Field : id_pembayaran


Tabel III.4.Spesifikasi Tabel Pembayaran


1 id_pembayaran id_pembayaran Varchar Primary Key

2 Id_transaksi Id_transaksi Varchar

3 Sub_total Sub_total Varchar

32

4. Spesifakasi File Detail Transaksi

Nama File : detail transaksi

Akronim : detail transaksi

Fungsi : perincian transaksi



Akses File : Random

Media : Harddisk

Panjang record :

Kunci Field : id_admin

Software : Mysql

Tabel III.5.Spesifikasi Tabel Detail Transaksi


1 Id_pembayaran id_pembayaran Varchar

2 Id_admin Id_admin Varchar Primary key

3 Id_produk id_produk Varchar

4 Id_customer Id_customer Varchar

5 subtotal Subtotal Varchar

33

5. Spesifikasi File Transaksi

Nama File : id_transaksi

Akronim : transaksi

Fungsi :untuk melakukan transaksi



Akses File : Random

Media : Harddisk

Panjang record :

Kunci Field : id_transaksi

Software : Mysql.dreamwaver

Tabel III.6.Spesifikasi Tabel Transaksi


1 id_transaksi id_transaksi Varchar Primary Key

2 Id_produk Id_produk Varchar

3 jumlah Jumlah Varchar

4 Total Total Varchar

34

3.2. Implementasi

3.2.1. Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi Rancangan Antar Muka pada aplikasi penerimaan siswa baru

berdasarkan rancangan antar muka

1. Halaman Login

Gambar III.5

Halaman Login

35

Gambar III.6

Halaman Beranda

Gambar III.7

Halaman Daftar

36

Gambar III.37

Halaman Upload Pembayaran

Gambar III.38

Halaman Info

37

Gambar III.47

Halaman Login Admin

Gambar III.48

Halaman Beranda Admin

38

B. Spesifikasi Sistem Komputer

Berikut ini adaah spesifikasi perangkat keras dan perangkat lunak minimum yang

dibutuhkan untuk mengimplementasikan aplikasi penerimaan peserta Didik Baru

untuk sekolah menengah atas dan sederajat.

1. Spesifikasi Perangkat Keras

a. Server

1) CPU

(a) Processor Intel ®Pentium®Core 2 Duo

(b) RAM DDR2 4 GB

(c) Hard Disk 500 GB

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

Koneksi Internet dengan kecepatan 2 Mbps

b. Client

1) CPU

(a) Processor Intel ®Pentium®4

(b) RAM DDR2 1 GB

(c) Hard Disk 20 GB

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

Koneksi Internet dengan kecepatan 56 Mbps

39

2. Spesifikasi Perangkat Lunak

1. Server

a. Sistem operasi yang umum digunakan seperti:Microsoft Windows atau Linux

(Ubuntu,Fedora,dan lain-lain).

b. Aplikasi bundle web server seperti : Xampp, WampServer, php2triad yang

terdiri dari beberapa komponen,diantaranya:

(1) Aplikasi Apache Server v2

(2) Aplikasi PHP Server v5

(3) Aplikasi MySQL Server v5

(4) Aplikasi phpMyAdmin v3

c. Aplikasi Web Lihat seperti Mozilla Firefox, Opera, Safari, Internet

Explorer, Google Chrome.

2. Client

a. Sistem operasi yang umum digunakan seperti : Microsoft Windows atau

Linux (Ubuntu, Fedore, dan lain-lain).

b. Aplikasi web browser seperti Mozilla Firefox, Opera, Safari, Internet

Explorer, Google Chrome.

40

BAB IV

PENUTUP

4.1. Kesimpulan

Dari pembahasan yang telah ada pada bab – bab sebelumnya, maka

dapat dipahami dengan adanya pembuatan program web ini, diharapkan dapat

membantu proses penjualan toko bunga online .maka penulis menyimpulkan :

1. Website ini adalah sarana penjualan bunga secara online yang dapat di

akses oleh siapa saja.

2. Sasaran dari website ini adalah para user yang tidak mempunyai waktu

untuk mengunjungi toko sebenarnya untuk membeli bunga .

3. Website ini di buat dengan desain yang simple agar nyaman dilihat oleh para

user.

4. Website ini di buat jugauntuk menghemat biaya karena tidak perlu menyewa

toko.

4.2. Saran

Adapun saran yang dapat penulis berikan yang diharapkan bergunan di masa

yang akan datang adalah sebagai berikut :

1. Agar selalu dipercaya oleh pelanggan ataupun calon pembeli maka

hendaknya pemilik toko online ini selalu cepat dan tepat dalam memberikan

informasi dan layanan yang di butuhkan.

2. Perlu adanya pengembangan dari segi desain ,kelengkapan ,detail produk ,

tata cara pembayaran dan pengiriman yang cepat dan mudah kedepannya.

3. Kecepatan dalam membuka halaman web juga nantinya akan di tingkatakan.

4. Penambahan fitur – fitur serta content juga perlu dilakukan untuk menarik

minat calon pembeli ataupun pelanggan.

41

DAFTAR PUSTAKA

Irawan, Anton . 2016 . Perancangan Sistem Informasi Peserta didik baru

berbasis web Pada SMK Tirta Sari Surya Jakarta: Tugas akhir.

Modul Web Progeming Semester 5 BSI

Modul Perancangan web Semester 5 BSI

http :// karyatulisilmiah.com/lrs-logical-record-structure(8 Mei 2016)

42

DAFTAR RIWAYAT HIDUP

DATA PRIBADI

Nama Lengkap : Abdur rozaqTempat/Tanggal Lahir : Jakarta , 16 November 1989Agama : IslamStatus Perkawinan : Belum KawinTelephone/HP : 085694268911Email : [email protected] Sekarang : Jl. Kp.Jembatan Rt.006 Rw.001 No.72.

Kec. Cakung Kel.penggilingan

PENDIDIKAN FORMALSD . Alwhathoniyah43. Tahun 2001SMP. MTS.Asshidiqiyah Tahun 2004MAN 8 Jakarta Tahun 2007BSI Tahun 2015-Sekarang

43


DATA PRIBADI

Nama Lengkap : ANDRI SANJAYANITempat/Tanggal Lahir :Tasikmalaya,24 Juli 1992

Agama : IslamStatus Perkawinan : Belum KawinTelephone/HP : 0853-1311-6476Email : [email protected] Sekarang : Jl.Kh.Maisin RT.004/016 No.11P

Kel.Klender-Kec.Duren, Jaktim

PENDIDIKAN FORMALSDN KALAPAHEJO Tahun1999MTs CIPAINGEUN Tahun 2005MA AL ROHMAH CIPAINGEUN Tahun 2012Bina Sarana Informatika Tahun 2015-Sekarang

44

mailto:[email protected]


DATA PRIBADI

Nama Lengkap : AYU SITTI KHOTIJAH Tempat/Tanggal Lahir : Ngawi , 8 mei 1994Agama : IslamStatus Perkawinan : Belum KawinTelephone/HP : 085692604331Email : [email protected] Sekarang : Jl.Y. Gg.buntu Rt.001 Rw.014No.19

Kec.Cilincing Kel.SemperBarat

PENDIDIKAN FORMALSDN 06 Petang Semper Barat Tahun 2006SMPN 143 Tahun 2009SMAN 114 Tahun 2012BSI Tahun 2015-sekarang

45

mailto:[email protected]


DATA PRIBADI

Nama Lengkap : M.ARIEF AINUL FIKRITempat/Tanggal Lahir :Tegal,11 November 1994

Agama : IslamStatus Perkawinan : Belum KawinTelephone/HP : 085799555794Email : [email protected] Sekarang : Jl.Merpati No .173 Rt 005 Rw 006

Kelurahan Randugunting tegal

PENDIDIKAN FORMALSDN 02 RANDUGUNTING TEGAL Tahun2006SLTPN 14 TEGAL Tahun 2009SMK MUHAMMADIYAH 1 TEGAL Tahun 2012Bina Sarana Informatika Tahun 2015-Sekarang

46


DATA PRIBADI

Nama Lengkap : Regina CepeTempat/Tanggal Lahir: Wolowajo ,25 April 1995Agama : KristenStatus Perkawinan : Belum MenikahTelephone/HP : 081296950074Email : [email protected] Sekarang :

PENDIDIKAN FORMALSDN III Karang Nongko Tahun 2003 SMPN 1 Panggang Tahun 2006SNKN 1 Purwasari Tahun 2008BSI Tahun 2015-Sekarang

47

eptik9.files.wordpress.com · Web viewSistem komputer terhubung secara global dan menggunakan...

Documents

Transcript of eptik9.files.wordpress.com · Web viewSistem komputer terhubung secara global dan menggunakan...