Perancangan Website E-Commerce Pada Toko Pakaian Cantik Modis Menggunakan Dreamweaver 8
PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
PAKAIAN CANTIK MODIS MENGGUNAKAN DREAMWEAVER 8
TUGAS AKHIR
DIMAS ANDIKA NASUTION
102406146
PROGRAM STUDI DIPLOMA 3 TEKNIK INFORMATIKA
DEPARTEMEN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2013
Universitas Sumatera Utara
PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
PAKAIAN CANTIK MODIS MENGGUNAKAN
DREAMWEAVER 8
TUGAS AKHIR
Diajukan untuk melengkapi tugas dan memenuhi syarat
mencapai gelar Ahli Madya Komputer
DIMAS ANDIKA NASUTION
102406146
PROGRAM STUDI DIPLOMA 3 TEKNIK INFORMATIKA
DEPARTEMEN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2013
Universitas Sumatera Utara
PERNYATAAN
PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
PAKAIAN CANTIK MODIS MENGGUNAKAN
DREAMWEAVER 8
TUGAS AKHIR
Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa
kutipan dan ringkasan yang masing-masing disebut sumbernya.
Medan,
Juni 2013
DIMAS ANDIKA
102406146
Universitas Sumatera Utara
ii
PERSETUJUAN
Judul
:
Nama
Nomor Induk Mahasiswa
Program Studi
Departemen
Fakultas
:
:
:
:
:
PERANCANGAN WEBSITE E-COMMERCE
PADA TOKO PAKAIAN CANTIK MODIS
MENGGUNAKAN DREAMWEAVER 8
DIMAS ANDIKA NASUTION
102406146
DIPLOMA (D3) TEKNIK INFORMATIKA
MATEMATIKA
MATEMATIKA DAN ILMU PENGETAHUAN
ALAM
Diluluskan di
Medan,
Juni 2013
Diketahui/Disetujui oleh
Departemen Matematika FMIPA USU
Ketua,
Pembimbing,
Prof. Dr. Tulus, M.Si., P.hD
NIP. 19620901 198803 1 002
Syahriol Sitorus S.Si,M.IT
NIP. 197103101997031004
Universitas Sumatera Utara
iii
PERNYATAAN
PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
PAKAIAN CANTIK MODIS MENGGUNAKAN DREAMWEAVER 8
TUGAS AKHIR
Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa
kutipan dan ringkasan yang masing-masing disebutkan sumbernya.
Medan,
Juni 2013
DIMAS ANDIKA NASUTION
102406146
Universitas Sumatera Utara
iv
PENGHARGAAN
Puji dan syukur penulis panjatkan kepada Allah SWT atas rahmat dan Karunia-Nya,
sehingga penulis telah menyelesaikan tugas akhir ini. Tidak lupa pula shalawat dan
beriring salam kepada Nabi Muhammad SAW sebagai suri teladan terbaik bagi umat
manusia, yang telah membawa kita dari zaman jahiliyah ke zaman yang terang
benderang dengan ilmu pengetahuan seperti sekarang ini.
Adapun judul Tugas Akhir ini adalah “PERANCANGAN WEBSITE ECOMMERCE PADA TOKO PAKAIAN CANTIK MODIS MENGGUNAKAN
DREAMWEAVER 8”. Tugas Akhir ini merupakan syarat untuk dapat
menyelesaikan pendidikan program D3 Teknik Informatika Fakultas Matematika dan
Ilmu Pengetahuan Alam di Universitas Sumatera Utara.
Pada kesempatan ini penulis juga menyampaikan terima kasih kepada semua
pihak yang telah banyak membantu, antara lain:
1. Bapak Dr. Sutarman, M. Sc., selaku Dekan Fakultas Matematika dan Ilmu
Pengetahuan Alam di Universitas Sumatera Utara.
2. Bapak Prof. Dr. Tulus, M.Si., selaku Ketua Departemen Matematika di FMIPA
USU.
3. Bapak Syahriol Sitorus S.Si,M.IT., selaku Ketua Jurusan Program Studi D3
Teknik Informatika FMIPA USU dan selaku Dosen Pembimbing yang telah
banyak memberikan pangarahan dan bimbingan dalam penulisan tugas akhir ini.
4. Seluruh Dosen Pengajar Program Studi D-III Teknik Informatika FMIPA USU
yang telah memberikan ilmu yang bermanfaat kepada penulis selama masa
perkuliahan.
5. Teristimewa buat kedua orang tua tercinta, serta seluruh keluarga yang telah
memberikan kasih sayang, semangat, motivasi, dan mendo’akan penulis agar
lancar dalam segala urusan.
6. Teman-teman terdekat Novri Pramana Putra, Sadzali Yunaifi Machril,
Muhammad Richky Darmawan, Dina Anggraini, Isnan Habibi yang membantu
dan memberi semangat penulis dalam menyelesaikan tugas akhir ini.
7. Buat seluruh teman angkatan 2010 yang selama ini telah menjadi keluarga dan
sahabat penulis.
Universitas Sumatera Utara
v
8. Kepada senior-senior D3 Teknik Informatika USU, yang telah memberikan
nasihat dan pengarahan selama penyusunan dan penulisan tugas akhir ini.
Laporan ini sudah selesai, namun penulis menyadari bahwa masih ada
kekurangan didalamnya karena keterbatasan pengetahuan dan kemampuan penulis.
Untuk itu, diharapkan kritik dan saran yang bersifat membangun demi perbaikan dan
penyempurnaan laporan ini. Semoga laporan ini bermanfaat bagi semua yang
membaca sebagai wacana dalam memperluas cakrawala pengetahuan.
Kiranya Allah SWT memberikan hidayah-Nya kepada kita semua sehinga sukses
dalam menggapai cita-cita yang diinginkan. Amin.
Medan,
Penulis,
Juni 2013
Dimas Andika Nasution
NIM: 102406146
Universitas Sumatera Utara
vi
ABSTRAK
Kajian ini bertujuan untuk membangun suatu website e-commerce mengenai penjualan
pakain wanita secara online. Sistem informasi ini dikembangkan menggunakan
Macromedia Dreamweaver 8 sebagai editor , dan perangkat lunak XAMPP 2.5.
Tujuan dari website e-commerce ini adalah untuk membantu penjual dalam melakukan
proses pemasaran produk mereka serta membantu pembeli dalam melakukan proses
pembelian dan pemesanan secara online.
Universitas Sumatera Utara
vii
DAFTAR ISI
Halaman
Persetujuan
Pernyataan
Penghargaan
Abstrak
Daftar Isi
Daftar Tabel
Daftar Gambar
ii
iii
iv
vi
vii
ix
x
Bab 1 Pendahuluan
1.1 Latar Belakang
1.2 Perumusan Masalah
1.3 Batasan Masalah
1.4 Tujuan dan Manfaat Penelitian
1.5 Metode Penelitian
1.6 Sistematika Penulisan
1
1
3
3
4
4
5
Bab 2 Landasan Teori
2.1 Pengertian Komputer
2.2 Pengenalan Internet
2.3 Pengertian E-commerce
2.3.1 Jenis-jenis e-commerce
2.3.2 Tujuan menggunakan e-commerce dalam berbisnis
2.3.3 Manfaat menggunakan e-commerce dalam dunia bisnis
2.4 Pengenalan Website
2.5 Pengertian HTML, PHP, dan MySQL
2.5.1 Pengenalan HTML
2.5.2 Pengenalan PHP
2.5.3 Pengenalan MySQL
2.6 CSS (Cascading Style Sheets)
2.7 Pengertian Data, Informasi, dan Database
2.7.1 Database management system (DBMS)
2.8 Macromedia Dreamweaver 8
2.9 Flowchart
7
7
8
9
12
14
14
15
16
16
17
18
19
20
21
23
24
Bab 3 Analisis Dan Perancangan Sistem
3.1 Analisis Sistem
3.2 Analisa Permasalahan
3.3 Usulan dan Solusi
3.4 Perancangan Sistem
3.4.1 Data Flow Diagram (DFD)
27
27
27
28
28
29
Universitas Sumatera Utara
viii
3.4.1.1 Diagram Konteks
3.4.1.2 Diagram Nol/Zero (Overview Diagram)
3.4.1.3 Diagram Rinci (Level Diagram)
3.4.2 Entity Relationship Diagram (ERD)
3.4.3 Normalisasi Database
3.4.4 Perancangan Struktur Database
3.4.5 Flowchart Website
3.4.6 Perancangan Tampilan Website
30
31
32
32
33
35
37
40
Bab 4 Implementasi Sistem
4.1 Pengertian Implementasi Sistem
4.2 Tujuan Implementasi Sistem
4.3 Komponen Utama dalam Implementasi Sistem
4.3.1 Perangkat keras (Hardware)
4.3.2 Perangkat lunak (Software)
4.3.3 Sumber daya manusia (Brainware)
4.4 Tampilan Website
44
44
45
45
45
46
46
47
Bab 5 Kesimpulan dan Saran
5.1 Kesimpulan
5.2 Saran
56
56
57
Daftar Pustaka
58
Lampiran
Universitas Sumatera Utara
ix
DAFTAR TABEL
Halaman
Tabel 2.1
Tabel Simbol Pada Flowchart
24
Tabel 3.1
Simbol Data Flow Diagram
30
Tabel 3.2
Tabel User
35
Tabel 3.3
Tabel Barang
35
Tabel 3.4
Tabel Kategori
36
Tabel 3.5
Tabel Pesanan
36
Universitas Sumatera Utara
x
DAFTAR GAMBAR
Halaman
Gambar 3.1
Diagram Konteks
31
Gambar 3.2
Diagram Level 0
31
Gambar 3.3
Diagram Level 1
32
Gambar 3.4
ERD Pada Toko Pakaian Cantik Modis
33
Gambar 3.5
Bentuk Normal Pertama (1NF)
34
Gambar 3.6
Bentuk Normal Kedua (2NF)
34
Gambar 3.7
Flowchart Halaman Utama
37
Gambar 3.8
Flowchart Kategori Barang
38
Gambar 3.9
Flowchart Halaman Admin
39
Gambar 3.10 Rancangan Tampilan Home
40
Gambar 3.11 Rancangan Tampilan Menu Cara Order
40
Gambar 3.12 Rancangan Tampilan Menu Gallery
41
Gambar 3.13 Rancangan Tampilan Menu About Us
41
Gambar 3.14 Rancangan Tampilan Menu Contact
42
Gambar 3.15 Rancangan Tampilan Menu Login Admin
42
Gambar 3.16 Rancangan Tampilan Menu Kategori Barang
43
Gambar 4.1
Tampilan Halaman Awal
47
Gambar 4.2
Tampilan Menu Cara Order
48
Gambar 4.3
Tampilan Menu About Us
49
Gambar 4.4
Tampilan Menu Contact
50
Gambar 4.5
Tampilan Menu Gallery
50
Gambar 4.6
Tampilan Produk
51
Gambar 4.7
Tampilan Form Order
52
Gambar 4.8
Tampilan Login Admin
52
Gambar 4.9
Tampilan Tambah Barang
53
Gambar 4.10 Tampilan Lihat Barang
54
Gambar 4.11 Tampilan Daftar Order
54
Universitas Sumatera Utara
PAKAIAN CANTIK MODIS MENGGUNAKAN DREAMWEAVER 8
TUGAS AKHIR
DIMAS ANDIKA NASUTION
102406146
PROGRAM STUDI DIPLOMA 3 TEKNIK INFORMATIKA
DEPARTEMEN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2013
Universitas Sumatera Utara
PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
PAKAIAN CANTIK MODIS MENGGUNAKAN
DREAMWEAVER 8
TUGAS AKHIR
Diajukan untuk melengkapi tugas dan memenuhi syarat
mencapai gelar Ahli Madya Komputer
DIMAS ANDIKA NASUTION
102406146
PROGRAM STUDI DIPLOMA 3 TEKNIK INFORMATIKA
DEPARTEMEN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2013
Universitas Sumatera Utara
PERNYATAAN
PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
PAKAIAN CANTIK MODIS MENGGUNAKAN
DREAMWEAVER 8
TUGAS AKHIR
Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa
kutipan dan ringkasan yang masing-masing disebut sumbernya.
Medan,
Juni 2013
DIMAS ANDIKA
102406146
Universitas Sumatera Utara
ii
PERSETUJUAN
Judul
:
Nama
Nomor Induk Mahasiswa
Program Studi
Departemen
Fakultas
:
:
:
:
:
PERANCANGAN WEBSITE E-COMMERCE
PADA TOKO PAKAIAN CANTIK MODIS
MENGGUNAKAN DREAMWEAVER 8
DIMAS ANDIKA NASUTION
102406146
DIPLOMA (D3) TEKNIK INFORMATIKA
MATEMATIKA
MATEMATIKA DAN ILMU PENGETAHUAN
ALAM
Diluluskan di
Medan,
Juni 2013
Diketahui/Disetujui oleh
Departemen Matematika FMIPA USU
Ketua,
Pembimbing,
Prof. Dr. Tulus, M.Si., P.hD
NIP. 19620901 198803 1 002
Syahriol Sitorus S.Si,M.IT
NIP. 197103101997031004
Universitas Sumatera Utara
iii
PERNYATAAN
PERANCANGAN WEBSITE E-COMMERCE PADA TOKO
PAKAIAN CANTIK MODIS MENGGUNAKAN DREAMWEAVER 8
TUGAS AKHIR
Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa
kutipan dan ringkasan yang masing-masing disebutkan sumbernya.
Medan,
Juni 2013
DIMAS ANDIKA NASUTION
102406146
Universitas Sumatera Utara
iv
PENGHARGAAN
Puji dan syukur penulis panjatkan kepada Allah SWT atas rahmat dan Karunia-Nya,
sehingga penulis telah menyelesaikan tugas akhir ini. Tidak lupa pula shalawat dan
beriring salam kepada Nabi Muhammad SAW sebagai suri teladan terbaik bagi umat
manusia, yang telah membawa kita dari zaman jahiliyah ke zaman yang terang
benderang dengan ilmu pengetahuan seperti sekarang ini.
Adapun judul Tugas Akhir ini adalah “PERANCANGAN WEBSITE ECOMMERCE PADA TOKO PAKAIAN CANTIK MODIS MENGGUNAKAN
DREAMWEAVER 8”. Tugas Akhir ini merupakan syarat untuk dapat
menyelesaikan pendidikan program D3 Teknik Informatika Fakultas Matematika dan
Ilmu Pengetahuan Alam di Universitas Sumatera Utara.
Pada kesempatan ini penulis juga menyampaikan terima kasih kepada semua
pihak yang telah banyak membantu, antara lain:
1. Bapak Dr. Sutarman, M. Sc., selaku Dekan Fakultas Matematika dan Ilmu
Pengetahuan Alam di Universitas Sumatera Utara.
2. Bapak Prof. Dr. Tulus, M.Si., selaku Ketua Departemen Matematika di FMIPA
USU.
3. Bapak Syahriol Sitorus S.Si,M.IT., selaku Ketua Jurusan Program Studi D3
Teknik Informatika FMIPA USU dan selaku Dosen Pembimbing yang telah
banyak memberikan pangarahan dan bimbingan dalam penulisan tugas akhir ini.
4. Seluruh Dosen Pengajar Program Studi D-III Teknik Informatika FMIPA USU
yang telah memberikan ilmu yang bermanfaat kepada penulis selama masa
perkuliahan.
5. Teristimewa buat kedua orang tua tercinta, serta seluruh keluarga yang telah
memberikan kasih sayang, semangat, motivasi, dan mendo’akan penulis agar
lancar dalam segala urusan.
6. Teman-teman terdekat Novri Pramana Putra, Sadzali Yunaifi Machril,
Muhammad Richky Darmawan, Dina Anggraini, Isnan Habibi yang membantu
dan memberi semangat penulis dalam menyelesaikan tugas akhir ini.
7. Buat seluruh teman angkatan 2010 yang selama ini telah menjadi keluarga dan
sahabat penulis.
Universitas Sumatera Utara
v
8. Kepada senior-senior D3 Teknik Informatika USU, yang telah memberikan
nasihat dan pengarahan selama penyusunan dan penulisan tugas akhir ini.
Laporan ini sudah selesai, namun penulis menyadari bahwa masih ada
kekurangan didalamnya karena keterbatasan pengetahuan dan kemampuan penulis.
Untuk itu, diharapkan kritik dan saran yang bersifat membangun demi perbaikan dan
penyempurnaan laporan ini. Semoga laporan ini bermanfaat bagi semua yang
membaca sebagai wacana dalam memperluas cakrawala pengetahuan.
Kiranya Allah SWT memberikan hidayah-Nya kepada kita semua sehinga sukses
dalam menggapai cita-cita yang diinginkan. Amin.
Medan,
Penulis,
Juni 2013
Dimas Andika Nasution
NIM: 102406146
Universitas Sumatera Utara
vi
ABSTRAK
Kajian ini bertujuan untuk membangun suatu website e-commerce mengenai penjualan
pakain wanita secara online. Sistem informasi ini dikembangkan menggunakan
Macromedia Dreamweaver 8 sebagai editor , dan perangkat lunak XAMPP 2.5.
Tujuan dari website e-commerce ini adalah untuk membantu penjual dalam melakukan
proses pemasaran produk mereka serta membantu pembeli dalam melakukan proses
pembelian dan pemesanan secara online.
Universitas Sumatera Utara
vii
DAFTAR ISI
Halaman
Persetujuan
Pernyataan
Penghargaan
Abstrak
Daftar Isi
Daftar Tabel
Daftar Gambar
ii
iii
iv
vi
vii
ix
x
Bab 1 Pendahuluan
1.1 Latar Belakang
1.2 Perumusan Masalah
1.3 Batasan Masalah
1.4 Tujuan dan Manfaat Penelitian
1.5 Metode Penelitian
1.6 Sistematika Penulisan
1
1
3
3
4
4
5
Bab 2 Landasan Teori
2.1 Pengertian Komputer
2.2 Pengenalan Internet
2.3 Pengertian E-commerce
2.3.1 Jenis-jenis e-commerce
2.3.2 Tujuan menggunakan e-commerce dalam berbisnis
2.3.3 Manfaat menggunakan e-commerce dalam dunia bisnis
2.4 Pengenalan Website
2.5 Pengertian HTML, PHP, dan MySQL
2.5.1 Pengenalan HTML
2.5.2 Pengenalan PHP
2.5.3 Pengenalan MySQL
2.6 CSS (Cascading Style Sheets)
2.7 Pengertian Data, Informasi, dan Database
2.7.1 Database management system (DBMS)
2.8 Macromedia Dreamweaver 8
2.9 Flowchart
7
7
8
9
12
14
14
15
16
16
17
18
19
20
21
23
24
Bab 3 Analisis Dan Perancangan Sistem
3.1 Analisis Sistem
3.2 Analisa Permasalahan
3.3 Usulan dan Solusi
3.4 Perancangan Sistem
3.4.1 Data Flow Diagram (DFD)
27
27
27
28
28
29
Universitas Sumatera Utara
viii
3.4.1.1 Diagram Konteks
3.4.1.2 Diagram Nol/Zero (Overview Diagram)
3.4.1.3 Diagram Rinci (Level Diagram)
3.4.2 Entity Relationship Diagram (ERD)
3.4.3 Normalisasi Database
3.4.4 Perancangan Struktur Database
3.4.5 Flowchart Website
3.4.6 Perancangan Tampilan Website
30
31
32
32
33
35
37
40
Bab 4 Implementasi Sistem
4.1 Pengertian Implementasi Sistem
4.2 Tujuan Implementasi Sistem
4.3 Komponen Utama dalam Implementasi Sistem
4.3.1 Perangkat keras (Hardware)
4.3.2 Perangkat lunak (Software)
4.3.3 Sumber daya manusia (Brainware)
4.4 Tampilan Website
44
44
45
45
45
46
46
47
Bab 5 Kesimpulan dan Saran
5.1 Kesimpulan
5.2 Saran
56
56
57
Daftar Pustaka
58
Lampiran
Universitas Sumatera Utara
ix
DAFTAR TABEL
Halaman
Tabel 2.1
Tabel Simbol Pada Flowchart
24
Tabel 3.1
Simbol Data Flow Diagram
30
Tabel 3.2
Tabel User
35
Tabel 3.3
Tabel Barang
35
Tabel 3.4
Tabel Kategori
36
Tabel 3.5
Tabel Pesanan
36
Universitas Sumatera Utara
x
DAFTAR GAMBAR
Halaman
Gambar 3.1
Diagram Konteks
31
Gambar 3.2
Diagram Level 0
31
Gambar 3.3
Diagram Level 1
32
Gambar 3.4
ERD Pada Toko Pakaian Cantik Modis
33
Gambar 3.5
Bentuk Normal Pertama (1NF)
34
Gambar 3.6
Bentuk Normal Kedua (2NF)
34
Gambar 3.7
Flowchart Halaman Utama
37
Gambar 3.8
Flowchart Kategori Barang
38
Gambar 3.9
Flowchart Halaman Admin
39
Gambar 3.10 Rancangan Tampilan Home
40
Gambar 3.11 Rancangan Tampilan Menu Cara Order
40
Gambar 3.12 Rancangan Tampilan Menu Gallery
41
Gambar 3.13 Rancangan Tampilan Menu About Us
41
Gambar 3.14 Rancangan Tampilan Menu Contact
42
Gambar 3.15 Rancangan Tampilan Menu Login Admin
42
Gambar 3.16 Rancangan Tampilan Menu Kategori Barang
43
Gambar 4.1
Tampilan Halaman Awal
47
Gambar 4.2
Tampilan Menu Cara Order
48
Gambar 4.3
Tampilan Menu About Us
49
Gambar 4.4
Tampilan Menu Contact
50
Gambar 4.5
Tampilan Menu Gallery
50
Gambar 4.6
Tampilan Produk
51
Gambar 4.7
Tampilan Form Order
52
Gambar 4.8
Tampilan Login Admin
52
Gambar 4.9
Tampilan Tambah Barang
53
Gambar 4.10 Tampilan Lihat Barang
54
Gambar 4.11 Tampilan Daftar Order
54
Universitas Sumatera Utara