Perancangan Aplikasi Website Builder.
ABSTRAK
D
i
m
b
u
l
e
k
n
e
i
g
n
a
g
n
i
b
n
a
e
r
n
k
u
e
m
n
b
u
t
a
k
n
m
g
e
n
r
y
a
a
n
p
c
a
e
n
n
y
g
e
s
i
e
c
a
r
a
u
m
u
m
,
k
u
r
a
a
u
t
S
b
r
s
a
(
n
i
w
e
n
f
b
o
)
r
s
m
e
a
b
a
a
h
a
l
n
y
a
u
p
a
h
n
s
i
g
m
a
e
i
l
m
a
e
d
l
u
i
a
i
j
a
p
r
e
i
n
n
g
y
a
a
n
i
m
p
n
t
a
i
e
a
r
n
e
n
i
t
n
,
f
m
o
a
r
k
m
a
a
s
i
.
t
g
n
y
a
p
e
n
g
e
a
h
u
a
n
m
a
s
y
a
r
a
k
a
e
t
m
s
e
o
r
a
n
g
w
e
b
-
t
p
r
o
g
r
a
m
m
e
r
m
e
n
n
a
t
y
n
g
p
e
m
r
o
g
r
a
m
a
n
w
e
b
d
a
n
t
e
b
a
b
k
a
n
m
u
n
c
u
l
n
y
a
i
d
e
u
n
u
k
t
m
e
n
g
a
a
s
i
h
a
l
e
t
r
s
e
b
u
.
t
D
a
l
a
t
m
u
g
a
s
a
k
h
i
r
i
n
i
e
t
m
e
n
g
g
u
n
a
k
a
l
a
h
d
i
r
e
a
l
i
s
a
s
i
k
a
n
s
n
P
H
P
u
n
u
k
m
e
r
a
n
c
a
n
g
s
e
b
u
a
h
s
i
u
t
m
e
r
a
n
c
a
n
g
s
i
i
h
a
r
a
p
k
a
n
u
a
s
d
a
n
m
e
n
g
a
u
r
i
s
i
s
i
u
t
p
l
i
k
a
s
i
i
n
i
d
a
p
s
e
a
p
i
m
e
m
i
l
i
k
i
k
e
k
u
r
a
n
g
a
a
m
n
w
e
b
u
a
h
a
p
l
i
k
a
s
i
b
e
r
b
a
s
i
s
w
e
b
d
e
n
g
a
n
s
s
e
c
a
r
a
d
i
n
a
m
i
s
.
A
r
i
e
m
b
r
s
e
b
u
l
t
a
n
u
m
e
r
n
a
l
a
m
h
a
l
s
a
u
s
e
r
d
a
p
a
a
n
g
s
u
n
g
m
e
l
a
l
t
u
i
w
e
b
b
r
o
w
s
e
r
.
t
e
k
a
y
a
n
g
i
n
g
i
n
m
e
m
i
l
i
k
i
s
i
u
t
d
y
t
e
t
t
t
b
t
t
D
e
t
s
w
e
b
s
e
n
d
i
r
i
t
u
m
b
e
r
d
a
y
a
d
a
n
k
e
m
a
m
p
u
a
n
e
t
k
n
i
s
.
t
ABSTRACT
W
i
h
h
t
f
o
r
a
w
e
b
s
e
g
r
o
w
i
f
i
n
i
e
r
n
e
e
a
r
e
l
a
i
q
u
a
n
i
y
s
a
p
o
r
a
l
o
f
i
n
f
o
f
T
h
e
l
a
c
i
e
l
y
f
o
r
o
r
m
a
x
p
e
n
s
i
v
k
o
e
w
a
i
o
n
h
i
o
n
p
r
o
v
a
f
t
i
d
e
r
i
l
o
w
o
v
e
o
l
v
h
s
g
e
i
n
e
t
r
o
w
i
n
g
e
q
u
f
r
e
s
o
u
r
c
e
s
e
b
-
p
r
o
g
r
a
m
,
h
m
r
n
e
e
e
c
h
n
i
c
a
l
s
k
i
l
l
s
o
n
w
e
,
t
a
l
l
y
w
b
p
r
o
i
g
h
r
h
t
h
t
e
n
h
e
p
r
o
b
l
e
m
e
e
r
s
e
d
s
e
e
x
p
a
n
s
i
o
n
t
a
m
m
i
n
g
a
n
d
h
e
t
r
v
i
c
e
s
m
a
d
e
a
n
i
d
e
a
o
m
a
k
e
a
n
a
p
p
l
i
c
a
i
t
e
e
t
t
t
s
r
t
t
t
e
m
t
t
v
n
t
t
.
t
g
t
t
o
n
t
o
n
o
t
t
.
t
I
e
b
s
i
t
t
h
e
t
a
h
v
a
e
b
t
e
o
w
e
p
n
k
m
o
a
n
d
a
e
a
n
s
a
u
s
e
i
e
w
m
e
n
t
b
h
b
i
a
s
s
f
e
i
d
n
a
e
l
n
t
v
a
i
s
p
k
o
,
a
m
e
n
n
a
t
p
a
p
n
l
i
d
c
u
a
t
s
i
s
i
n
g
a
e
p
c
b
a
n
m
b
p
a
o
s
w
h
w
o
s
e
l
a
n
o
n
g
f
P
o
H
p
m
P
s
a
c
p
k
i
i
p
n
g
t
l
a
a
n
d
g
y
u
n
a
a
n
m
g
i
e
.
c
I
t
w
k
e
a
e
b
s
i
t
e
a
n
d
e
a
s
y
t
o
e
d
i
t
t
h
e
e
w
u
i
e
p
.
A
n
b
s
i
t
e
c
o
n
t
e
n
t
i
w
d
f
o
p
t
h
e
l
a
s
t
,
h
o
p
i
n
g
t
h
e
a
t
h
o
n
l
y
w
p
p
l
i
c
a
t
i
o
n
c
a
n
h
e
l
p
t
h
o
s
e
w
c
k
o
f
p
e
s
o
u
p
c
e
s
a
n
d
t
h
e
t
e
c
h
n
i
c
a
l
s
k
i
l
l
s
o
n
e
b
p
p
o
g
p
a
m
m
i
n
g
.
w
Universitas Kristen Maranatha
DAFTAR ISI
Kata Pengantar……………………………………………………………………..……………………..……………….……….…....i
Abstrak………………………………………………………………………………..…………………………………..…….…………..iii
Daftar gsi……………………………………………………………….………………………………………………………..….……….iv
Daftar Gambar…………………………………………………………………………………………………………..…….….……..vii
Daftar Tabel…………………………………………………………………………………………….…………….…………….………x
Daftar Lampiran.……………………………………………………………………………………………………………………….…xi
TAT I PENDAHULUAN................................................................................................ 1
1.1
LATAR BELAKANG MASALAH..................................................................................................... 1
1.2
RUMUSAN MASALAH .............................................................................................................. 1
1.3
TUJUAN ................................................................................................................................ 2
1.4
BATASAN MASALAH................................................................................................................ 2
1.5
SgSTEMATgKA PEMBAHASAN ..................................................................................................... 3
1.6
TgME SCHEDULE ..................................................................................................................... 4
TAT II DASAR TEORI .................................................................................................. 5
2.1
WORLD WIDE WEB (WWW) .................................................................................................. 5
2.2
UNIFORM RESOURCE LOCATOR (URL)........................................................................................ 5
2.3
WEB SERVER ......................................................................................................................... 6
2.4
APACHE ................................................................................................................................ 6
2.5
ggS (gNTERNET gNFORMATgON SERVgCE) ....................................................................................... 6
2.6
HYPERTEXT MARKUP LANGUAGE (HTML) .................................................................................. 6
2.7
CASCADING STYLE SHEET (CSS)................................................................................................. 8
2.8
WEB BROWSER ...................................................................................................................... 8
2.9
DATABASE............................................................................................................................. 8
2.10
MYSQL ........................................................................................................................... 9
2.11
PHP................................................................................................................................ 9
2.10.1
Kelebihan PHP........................................................................................................... 9
2.10.2
Penulisan PHP ......................................................................................................... 10
2.10.3
Session dalam PHP.................................................................................................. 11
2.12
MEAN OPINION SCORE (MOS) .......................................................................................... 11
TAT III ANALISA DAN PEMODELAN .......................................................................... 12
73
Universitas Kristen Maranatha
3.1
ARSgTEKTUR APLgKASg ............................................................................................................ 12
3.1.1
3.2
Data Flow Diagram................................................................................................. 12
TEKNOLOGg YANG DgGUNAKAN ................................................................................................ 21
3.2.1
Perangkat lunak...................................................................................................... 21
3.2.2
Perangkat keras...................................................................................................... 21
3.2.3
Kebutuhan minimal untuk menjalankan aplikasi ................................................... 21
3.3
ENTgTY RELATgONSHgP DgAGRAM DAN TABLE DgAGRAM ............................................................... 22
3.3.1
Entity Relationship Diagram ................................................................................... 22
3.3.2
Table Diagram ........................................................................................................ 23
3.4
WEB MAP DAN LAYOUT ......................................................................................................... 24
3.4.1
Web map ................................................................................................................ 24
3.4.2
Layout ..................................................................................................................... 25
3.5
PERANCANGAN USER gNTERFACE.............................................................................................. 34
TAT IV PERANCANGAN APLIKASI ............................................................................. 40
4.1
PENJABARAN DARg SETgAP FUNGSg UTAMA ................................................................................. 40
4.1.1
Form login............................................................................................................... 40
4.1.2
Form daftar baru .................................................................................................... 41
4.1.3
Form bantuan admin .............................................................................................. 41
4.1.4
Form lupa password ............................................................................................... 42
4.1.5
Form ganti template............................................................................................... 43
4.1.6
Form atur file .......................................................................................................... 44
4.1.7
Form atur isi situs ................................................................................................... 45
4.1.8
Form login ubah profil ............................................................................................ 45
4.1.9
Form ganti profil ..................................................................................................... 46
4.1.10
Form ganti password .............................................................................................. 47
4.1.11
Form login reset password user.............................................................................. 47
4.1.12
Form reset password user....................................................................................... 48
4.1.13
Form hubungi master ............................................................................................. 49
4.1.14
Form atur user ........................................................................................................ 49
4.1.15
Form atur file user .................................................................................................. 50
4.1.16
Form atur isi situs user............................................................................................ 51
4.1.17
Flow Chart Fungsi Utama Aplikasi Website Builder................................................ 52
TAT V PENGUJIAN................................................................................................... 53
74
Universitas Kristen Maranatha
5.1
PENGUJgAN ......................................................................................................................... 53
5.1.1
Form login............................................................................................................... 53
5.1.2
Form daftar baru .................................................................................................... 54
5.1.3
Form bantuan admin .............................................................................................. 56
5.1.4
Form lupa password ............................................................................................... 57
5.1.5
Form ganti template............................................................................................... 59
5.1.6
Form atur file .......................................................................................................... 60
5.1.7
Form atur isi situs ................................................................................................... 61
5.1.8
Form login ubah profil ............................................................................................ 62
5.1.9
Form ganti profil ..................................................................................................... 63
5.1.10
Form ganti password .............................................................................................. 64
5.1.11
Form login reset password user.............................................................................. 65
5.1.12
Form reset password user....................................................................................... 66
5.1.13
Form hubungi master ............................................................................................. 66
5.1.14
Form login daftar admin baru ................................................................................ 68
5.1.15
Form daftar admin baru ......................................................................................... 68
5.1.16
Form atur isi situs user............................................................................................ 70
5.2
HASgL SURVEY DENGAN METODA MOS (MEAN OPgNgON SCORE) .................................................. 71
TAT VI KESIMPULAN DAN SARAN ............................................................................ 72
6.1
KESgMPULAN BERDASARKAN HASgL EVALUASg.............................................................................. 72
6.2
SARAN BERDASARKAN HASgL EVALUASg ...................................................................................... 72
Daftar Pustaka.….………………………………………………………..…………………………………….……..…xii
75
Universitas Kristen Maranatha
Daftar Gambar
Gambar 3.1 DFD Level 0 ................................................................................................... 12
Gambar 3.2 DFD Level 1 ................................................................................................... 17
Gambar 3.3 DFD Level 2 dari proses 2 ............................................................................. 18
Gambar 3.4 DFD Level 2 dari proses 3 ............................................................................. 18
Gambar 3.5 DFD Level 2 dari proses 4 ............................................................................. 19
Gambar 3.6 DFD Level 2 dari proses 5 ............................................................................. 19
Gambar 3.7 DFD Level 2 dari proses 7 ............................................................................. 20
Gambar 3.8 DFD Level 2 dari proses 8 ............................................................................. 20
Gambar 3.9 Entitp Relationship Diagram ......................................................................... 22
Gambar 3.10 Table Diagram............................................................................................. 23
Gambar 3.11 Web map (home)........................................................................................ 24
Gambar 3.12 Web map (user menu)................................................................................ 24
Gambar 3.13 Web map (admin menu)............................................................................. 25
Gambar 3.14 Halaman home, login.................................................................................. 25
Gambar 3.15 Halaman daftar baru .................................................................................. 26
Gambar 3.16 Halaman hubungi admin ............................................................................ 26
Gambar 3.17 Halaman lupa password ............................................................................. 27
Gambar 3.18 Halaman user menu, preview website user ............................................... 27
Gambar 3.19 Halaman ganti template ............................................................................. 28
Gambar 3.20 halaman Manage content .......................................................................... 28
76
Universitas Kristen Maranatha
Gambar 3.21 Halaman Login change profile .................................................................... 29
Gambar 3.22 Halaman change profile.............................................................................. 29
Gambar 3.23 Halaman change password......................................................................... 30
Gambar 3.24 Halaman admin maintain page................................................................... 30
Gambar 3.25 Halaman reset user password .................................................................... 31
Gambar 3.26 Halaman contact master ............................................................................ 31
Gambar 3.27 Halaman manage user................................................................................ 32
Gambar 3.28 Halaman manage user files ........................................................................ 32
Gambar 3.29 Halaman manage user content .................................................................. 33
Gambar 3.30 Halaman home, login.................................................................................. 34
Gambar 3.31 halaman register......................................................................................... 34
Gambar 3.32 Halaman forgot password .......................................................................... 35
Gambar 3.33 Halaman bantuan admin ............................................................................ 35
Gambar 3.34 Halaman preview website user .................................................................. 36
Gambar 3.35 Halaman manage template ........................................................................ 36
Gambar 3.36 Halaman manage file.................................................................................. 37
Gambar 3.37 Halaman manage content .......................................................................... 37
Gambar 3.38 Halaman change profile login..................................................................... 38
Gambar 3.39 Halaman Change Profile ............................................................................. 38
Gambar 3.40 Halaman change password......................................................................... 39
77
Universitas Kristen Maranatha
Gambar 4.1 Halaman Home, Login.................................................................................. 40
Gambar 4.2 Halaman register ......................................................................................... 41
Gambar 4.3 Halaman bantuan admin ............................................................................. 41
Gambar 4.4 Halaman lupa password .............................................................................. 42
Gambar 4.5 Halaman Change Template.......................................................................... 43
Gambar 4.6 Halaman manage files ................................................................................. 44
Gambar 4.7 Halaman manage content ........................................................................... 45
Gambar 4.8 Halaman login change profile...................................................................... 45
Gambar 4.9 Halaman Ubah Profil.................................................................................... 46
Gambar 4.10 Halaman ubah password ........................................................................... 47
Gambar 4.11 Halaman login reset password user .......................................................... 47
Gambar 4.12 Halaman reset password user ................................................................... 48
Gambar 4.13 Halaman Hubungi Master.......................................................................... 49
Gambar 4.14 Halaman Pilih user ..................................................................................... 49
Gambar 4.15 Halaman atur file user ............................................................................... 50
Gambar 4.16 Halaman atur content user........................................................................ 51
Gambar 4.17 Flow Chart Fungsi Utama Aplikasi Website Builder................................... 52
78
Universitas Kristen Maranatha
Daftar Tabel
Table 5.1 Tabel test form login......................................................................................... 53
Table 5.2 Tabel test form daftar baru .............................................................................. 54
Table 5.3 Tabel test form bantuan admin........................................................................ 56
Table 5.4 Tabel test form lupa password ......................................................................... 57
Table 5.5 Tabel test form ganti template......................................................................... 59
Table 5.6 Tabel test form atur file.................................................................................... 60
Table 5.7 Tabel test form atur isi situs ............................................................................. 61
Table 5.8 Tabel test form login ubah profil ...................................................................... 62
Table 5.9 Tabel test form ganti profil............................................................................... 63
Table 5.10 tabel test form ganti password....................................................................... 64
Table 5.11 Tabel test form login reset password user ..................................................... 65
Table 5.12 Tabel test form reset password user.............................................................. 66
Table 5.13 Tabel test form hubungi master ..................................................................... 66
Table 5.14 Tabel test form login daftar admin baru ........................................................ 68
Table 5.15 Tabel test form daftar admin baru ................................................................. 68
Table 5.16 Tabel test form atur isi situs user ................................................................... 70
Table 5.17 Tabel Survep.................................................................................................... 71
Table 5.18 Tebel Nilai Survep ........................................................................................... 71
79
Universitas Kristen Maranatha
Daftar Lampiran
L
a
m
p
i
r
a
n
L
a
m
p
i
r
a
n
L
a
m
p
i
r
a
n
A
Q
u
B
C
L
D
i
s
a
e
t
s
i
t
n
a
t
i
o
g
n
P
P
e
n
r
n
a
o
u
i
g
l
r
i
r
e
a
d
a
n
H
a
s
i
l
S
u
r
v
e
y
m
s
Universitas Kristen Maranatha
BABBIB
PendahuluanB
1.1 LatarBBelakangBMasalahB
Berkembangnya jaringan internet membuat banyak perusahaan besar dan
individu yang memiliki situsnya sendiri di internet. Untuk membuat sebuah situs
dibutuhkan seseorang yang mengerti
mempublikasikan situs
w
e
s
c
r
i
p
pemograman
t
w
e
dan untuk
b
tersebut dibutuhkan biaya yang tidak sedikit Hal ini
b
.
sering menjadi kendala untuk perusahaan-perusahaan kecil dan individu yang ingin
memiliki situsnya sendiri karena jasa seorang
p
w
e
b
r
o
g
r
a
m
m
tidaklah murah.
r
-
e
Masalah tersebut menimbulkan ide untuk membuat sebuah aplikasi yang
berguna untuk membantu
akan berupa sebuah
C
M
s
untuk membuat situsnya secara gratis Aplikasi ini
r
u
e
.
atau
S
o
n
t
C
n
t
a
e
n
a
g
m
M
e
n
t
s
e
S
a
t
s
w
e
b
(
k
i
n
)
t
m
p
l
a
e
t
e
s
u
r
e
dalam mengatur
yang akan dipakai dalam membuat sebuah
a
d
Aplikasi ini akan menyediakan beberapa
pakai, dimana
yang maksudnya
m
e
adalah sebuah aplikasi yang memberi kemudahan untuk
dokumen-dokumen atau
t
y
t
m
e
p
l
a
t
e
s
w
e
i
b
e
diberi kebebasan untuk membuat
l
a
o
y
t
m
p
l
a
t
e
.
s
u
r
e
juga
-nya sendiri.
t
e
i
b
halaman
t
u
user menjadi lebih menarik. Selain itu
t
e
buatan sendiri yang sudah siap
yang dimaksud adalah tampilan atau desain
untuk membuat
s
w
e
1.2 RumusanBMasalahB
1. Bagaimana aplikasi ini membantu
s
u
r
e
dalam membuat situs
memiliki kemampuan teknis dalam hal pemograman
w
e
b
w
e
b
tanpa harus
?
2. Bagaimana aplikasi ini membantu menyalurkan kreatifitas individu dalam
membuat sebuah situs
w
e
b
?
1
Universitas Kristen Maranatha
1.3 TujuanB
Merealisasikan sebuah aplikasi dengan menggunakan PHP untuk membuat
situs
w
e
yang dapat diatur isi dan tampilannya dengan menggunakan aplikasi
b
tersebut.
1.4 BatasanBMasalahB
1
Terdapat 3 tingkatan pengguna aplikasi, yaitu
a
m
i
),
n
d
2
a
s
t
a
m
r
M
a
m
e
3
A
i
d
n
i
s
t
i
n
r
a
t
o
(
r
c
o
n
a
m
i
) dan
n
d
s
s
t
r
e
a
m
i
n
i
s
t
r
a
t
o
(
r
m
d
a
s
t
r
e
.
r
u
a
e
adalah pemilik aplikasi dan orang yang bertanggung jawab
n
d
terhadap
m
i
d
m
t
n
t
a
p
l
i
k
a
s
i
e
.
adalah orang yang bekerja untuk
untuk melayani kebutuhan
s
a
s
t
r
a
m
e
i
dan bertanggung jawab
n
d
sekaligus mengawasi kegiatan
r
u
m
e
s
dalam
r
u
e
menggunakan aplikasi.
4
5
s
U
r
e
adalah pengguna jasa aplikasi
Seorang
m
a
s
t
r
a
m
e
i
m
a
i
n
t
n
a
n
i
t
i
b
e
b
u
l
r
d
e
.
a
c
c
terhadap aplikasi.
c
e
b. Menghapus
e
mempunyai hak untuk:
n
d
a. Melakukan
s
w
e
o
n
yang dianggap melanggar peraturan.
t
u
c. Membatasi akses pengguna aplikasi (misalnya akses ke
d. Menambahkan
t
m
p
l
a
baru atau mengurangi jumlah
t
e
a
e
t
a
a
d
t
).
s
b
e
m
p
l
a
t
e
e
yang
disediakan.
e. Mendaftarkan
f. Melakukan
aplikasi (
a
d
r
e
m
g. Melakukan
s
i
a
d
e
t
i
p
baru.
n
a
s
s
w
o
r
apabila ada permintaan dari pengguna
d
)
n
p
a
u
m
pada
t
d
e
c
o
n
t
n
e
t
aplikasi
w
e
b
(menambahkan berita
atau fitur baru pada aplikasi).
6
Seorang
a
m
d
i
n
mempunyai hak untuk:
a. Mengakses
a
t
a
a
d
secara terbatas.
s
b
e
b. Menghapus atau melakukan audit terhadap content
s
w
e
b
i
t
e
yang
dianggap melanggar peraturan.
c. Melakukan
r
s
e
t
e
p
a
s
s
o
w
apabila ada permintaan dari pengguna
r
d
aplikasi (user).
2
Universitas Kristen Maranatha
d. Menambahkan
t
m
p
l
a
baru atau mengurangi jumlah
t
e
e
t
m
p
l
a
yang
t
e
e
disediakan.
e. Membatasi
7
Seorang
s
o
n
t
n
dari
t
e
e
a. Mendapatkan sebuah
r
g
i
s
w
e
i
yang dibuat
t
b
e
s
.
r
u
e
mempunyai hak untuk:
r
u
c
s
t
e
a
c
c
o
n
atau mendaftarkan
r
e
b. Membuat
s
w
e
i
a
c
c
o
n
u
t
pada aplikasi).
dengan mengikuti aturan yang telah disetujui
t
b
untuk menggunakan aplikasi (melakukan
t
u
e
s
r
u
e
sebelumnya.
c. Melakukan
p
a
u
(profil, desain
d.
s
e
l
a
o
dan
t
y
u
c
o
e
e. Setiap
t
n
t
e
s
e
i
yang telah dibuat
t
b
e
).
diberikan fasilitas penyimpanan ruang
r
u
e
MB untuk menyimpan
pembuatan
f.
n
s
w
diberikan halaman yang tak terbatas untuk dikembangkan.
r
U
atau perbuahan pada isi
t
d
Setiap
s
s
w
e
e
r
i
d
s
sebesar 10
k
d
berupa gambar yang dipakai untuk
a
d
.
t
b
t
e
diberi pilihan 5 buah
r
u
i
a
a
h
t
m
e
p
l
a
t
e
untuk dipakai sesuai
keinginan.
g. Modul
l
o
g
i
dan
n
r
g
i
s
t
e
pada aplikasi memakai enkripsi
r
e
p
a
s
s
o
r
w
d
sederhana.
h.
n
p
f
t
I
o
r
diatur sedemikian rupa sehingga tidak dapat menerima
m
u
karakter-karakter khusus (karakter khusus yang tidak boleh ada dalam
beberapa
f
o
r
: 0123456789():;
D
i
m
b
u
l
e
k
n
e
i
g
n
a
g
n
i
b
n
a
e
r
n
k
u
e
m
n
b
u
t
a
k
n
m
g
e
n
r
y
a
a
n
p
c
a
e
n
n
y
g
e
s
i
e
c
a
r
a
u
m
u
m
,
k
u
r
a
a
u
t
S
b
r
s
a
(
n
i
w
e
n
f
b
o
)
r
s
m
e
a
b
a
a
h
a
l
n
y
a
u
p
a
h
n
s
i
g
m
a
e
i
l
m
a
e
d
l
u
i
a
i
j
a
p
r
e
i
n
n
g
y
a
a
n
i
m
p
n
t
a
i
e
a
r
n
e
n
i
t
n
,
f
m
o
a
r
k
m
a
a
s
i
.
t
g
n
y
a
p
e
n
g
e
a
h
u
a
n
m
a
s
y
a
r
a
k
a
e
t
m
s
e
o
r
a
n
g
w
e
b
-
t
p
r
o
g
r
a
m
m
e
r
m
e
n
n
a
t
y
n
g
p
e
m
r
o
g
r
a
m
a
n
w
e
b
d
a
n
t
e
b
a
b
k
a
n
m
u
n
c
u
l
n
y
a
i
d
e
u
n
u
k
t
m
e
n
g
a
a
s
i
h
a
l
e
t
r
s
e
b
u
.
t
D
a
l
a
t
m
u
g
a
s
a
k
h
i
r
i
n
i
e
t
m
e
n
g
g
u
n
a
k
a
l
a
h
d
i
r
e
a
l
i
s
a
s
i
k
a
n
s
n
P
H
P
u
n
u
k
m
e
r
a
n
c
a
n
g
s
e
b
u
a
h
s
i
u
t
m
e
r
a
n
c
a
n
g
s
i
i
h
a
r
a
p
k
a
n
u
a
s
d
a
n
m
e
n
g
a
u
r
i
s
i
s
i
u
t
p
l
i
k
a
s
i
i
n
i
d
a
p
s
e
a
p
i
m
e
m
i
l
i
k
i
k
e
k
u
r
a
n
g
a
a
m
n
w
e
b
u
a
h
a
p
l
i
k
a
s
i
b
e
r
b
a
s
i
s
w
e
b
d
e
n
g
a
n
s
s
e
c
a
r
a
d
i
n
a
m
i
s
.
A
r
i
e
m
b
r
s
e
b
u
l
t
a
n
u
m
e
r
n
a
l
a
m
h
a
l
s
a
u
s
e
r
d
a
p
a
a
n
g
s
u
n
g
m
e
l
a
l
t
u
i
w
e
b
b
r
o
w
s
e
r
.
t
e
k
a
y
a
n
g
i
n
g
i
n
m
e
m
i
l
i
k
i
s
i
u
t
d
y
t
e
t
t
t
b
t
t
D
e
t
s
w
e
b
s
e
n
d
i
r
i
t
u
m
b
e
r
d
a
y
a
d
a
n
k
e
m
a
m
p
u
a
n
e
t
k
n
i
s
.
t
ABSTRACT
W
i
h
h
t
f
o
r
a
w
e
b
s
e
g
r
o
w
i
f
i
n
i
e
r
n
e
e
a
r
e
l
a
i
q
u
a
n
i
y
s
a
p
o
r
a
l
o
f
i
n
f
o
f
T
h
e
l
a
c
i
e
l
y
f
o
r
o
r
m
a
x
p
e
n
s
i
v
k
o
e
w
a
i
o
n
h
i
o
n
p
r
o
v
a
f
t
i
d
e
r
i
l
o
w
o
v
e
o
l
v
h
s
g
e
i
n
e
t
r
o
w
i
n
g
e
q
u
f
r
e
s
o
u
r
c
e
s
e
b
-
p
r
o
g
r
a
m
,
h
m
r
n
e
e
e
c
h
n
i
c
a
l
s
k
i
l
l
s
o
n
w
e
,
t
a
l
l
y
w
b
p
r
o
i
g
h
r
h
t
h
t
e
n
h
e
p
r
o
b
l
e
m
e
e
r
s
e
d
s
e
e
x
p
a
n
s
i
o
n
t
a
m
m
i
n
g
a
n
d
h
e
t
r
v
i
c
e
s
m
a
d
e
a
n
i
d
e
a
o
m
a
k
e
a
n
a
p
p
l
i
c
a
i
t
e
e
t
t
t
s
r
t
t
t
e
m
t
t
v
n
t
t
.
t
g
t
t
o
n
t
o
n
o
t
t
.
t
I
e
b
s
i
t
t
h
e
t
a
h
v
a
e
b
t
e
o
w
e
p
n
k
m
o
a
n
d
a
e
a
n
s
a
u
s
e
i
e
w
m
e
n
t
b
h
b
i
a
s
s
f
e
i
d
n
a
e
l
n
t
v
a
i
s
p
k
o
,
a
m
e
n
n
a
t
p
a
p
n
l
i
d
c
u
a
t
s
i
s
i
n
g
a
e
p
c
b
a
n
m
b
p
a
o
s
w
h
w
o
s
e
l
a
n
o
n
g
f
P
o
H
p
m
P
s
a
c
p
k
i
i
p
n
g
t
l
a
a
n
d
g
y
u
n
a
a
n
m
g
i
e
.
c
I
t
w
k
e
a
e
b
s
i
t
e
a
n
d
e
a
s
y
t
o
e
d
i
t
t
h
e
e
w
u
i
e
p
.
A
n
b
s
i
t
e
c
o
n
t
e
n
t
i
w
d
f
o
p
t
h
e
l
a
s
t
,
h
o
p
i
n
g
t
h
e
a
t
h
o
n
l
y
w
p
p
l
i
c
a
t
i
o
n
c
a
n
h
e
l
p
t
h
o
s
e
w
c
k
o
f
p
e
s
o
u
p
c
e
s
a
n
d
t
h
e
t
e
c
h
n
i
c
a
l
s
k
i
l
l
s
o
n
e
b
p
p
o
g
p
a
m
m
i
n
g
.
w
Universitas Kristen Maranatha
DAFTAR ISI
Kata Pengantar……………………………………………………………………..……………………..……………….……….…....i
Abstrak………………………………………………………………………………..…………………………………..…….…………..iii
Daftar gsi……………………………………………………………….………………………………………………………..….……….iv
Daftar Gambar…………………………………………………………………………………………………………..…….….……..vii
Daftar Tabel…………………………………………………………………………………………….…………….…………….………x
Daftar Lampiran.……………………………………………………………………………………………………………………….…xi
TAT I PENDAHULUAN................................................................................................ 1
1.1
LATAR BELAKANG MASALAH..................................................................................................... 1
1.2
RUMUSAN MASALAH .............................................................................................................. 1
1.3
TUJUAN ................................................................................................................................ 2
1.4
BATASAN MASALAH................................................................................................................ 2
1.5
SgSTEMATgKA PEMBAHASAN ..................................................................................................... 3
1.6
TgME SCHEDULE ..................................................................................................................... 4
TAT II DASAR TEORI .................................................................................................. 5
2.1
WORLD WIDE WEB (WWW) .................................................................................................. 5
2.2
UNIFORM RESOURCE LOCATOR (URL)........................................................................................ 5
2.3
WEB SERVER ......................................................................................................................... 6
2.4
APACHE ................................................................................................................................ 6
2.5
ggS (gNTERNET gNFORMATgON SERVgCE) ....................................................................................... 6
2.6
HYPERTEXT MARKUP LANGUAGE (HTML) .................................................................................. 6
2.7
CASCADING STYLE SHEET (CSS)................................................................................................. 8
2.8
WEB BROWSER ...................................................................................................................... 8
2.9
DATABASE............................................................................................................................. 8
2.10
MYSQL ........................................................................................................................... 9
2.11
PHP................................................................................................................................ 9
2.10.1
Kelebihan PHP........................................................................................................... 9
2.10.2
Penulisan PHP ......................................................................................................... 10
2.10.3
Session dalam PHP.................................................................................................. 11
2.12
MEAN OPINION SCORE (MOS) .......................................................................................... 11
TAT III ANALISA DAN PEMODELAN .......................................................................... 12
73
Universitas Kristen Maranatha
3.1
ARSgTEKTUR APLgKASg ............................................................................................................ 12
3.1.1
3.2
Data Flow Diagram................................................................................................. 12
TEKNOLOGg YANG DgGUNAKAN ................................................................................................ 21
3.2.1
Perangkat lunak...................................................................................................... 21
3.2.2
Perangkat keras...................................................................................................... 21
3.2.3
Kebutuhan minimal untuk menjalankan aplikasi ................................................... 21
3.3
ENTgTY RELATgONSHgP DgAGRAM DAN TABLE DgAGRAM ............................................................... 22
3.3.1
Entity Relationship Diagram ................................................................................... 22
3.3.2
Table Diagram ........................................................................................................ 23
3.4
WEB MAP DAN LAYOUT ......................................................................................................... 24
3.4.1
Web map ................................................................................................................ 24
3.4.2
Layout ..................................................................................................................... 25
3.5
PERANCANGAN USER gNTERFACE.............................................................................................. 34
TAT IV PERANCANGAN APLIKASI ............................................................................. 40
4.1
PENJABARAN DARg SETgAP FUNGSg UTAMA ................................................................................. 40
4.1.1
Form login............................................................................................................... 40
4.1.2
Form daftar baru .................................................................................................... 41
4.1.3
Form bantuan admin .............................................................................................. 41
4.1.4
Form lupa password ............................................................................................... 42
4.1.5
Form ganti template............................................................................................... 43
4.1.6
Form atur file .......................................................................................................... 44
4.1.7
Form atur isi situs ................................................................................................... 45
4.1.8
Form login ubah profil ............................................................................................ 45
4.1.9
Form ganti profil ..................................................................................................... 46
4.1.10
Form ganti password .............................................................................................. 47
4.1.11
Form login reset password user.............................................................................. 47
4.1.12
Form reset password user....................................................................................... 48
4.1.13
Form hubungi master ............................................................................................. 49
4.1.14
Form atur user ........................................................................................................ 49
4.1.15
Form atur file user .................................................................................................. 50
4.1.16
Form atur isi situs user............................................................................................ 51
4.1.17
Flow Chart Fungsi Utama Aplikasi Website Builder................................................ 52
TAT V PENGUJIAN................................................................................................... 53
74
Universitas Kristen Maranatha
5.1
PENGUJgAN ......................................................................................................................... 53
5.1.1
Form login............................................................................................................... 53
5.1.2
Form daftar baru .................................................................................................... 54
5.1.3
Form bantuan admin .............................................................................................. 56
5.1.4
Form lupa password ............................................................................................... 57
5.1.5
Form ganti template............................................................................................... 59
5.1.6
Form atur file .......................................................................................................... 60
5.1.7
Form atur isi situs ................................................................................................... 61
5.1.8
Form login ubah profil ............................................................................................ 62
5.1.9
Form ganti profil ..................................................................................................... 63
5.1.10
Form ganti password .............................................................................................. 64
5.1.11
Form login reset password user.............................................................................. 65
5.1.12
Form reset password user....................................................................................... 66
5.1.13
Form hubungi master ............................................................................................. 66
5.1.14
Form login daftar admin baru ................................................................................ 68
5.1.15
Form daftar admin baru ......................................................................................... 68
5.1.16
Form atur isi situs user............................................................................................ 70
5.2
HASgL SURVEY DENGAN METODA MOS (MEAN OPgNgON SCORE) .................................................. 71
TAT VI KESIMPULAN DAN SARAN ............................................................................ 72
6.1
KESgMPULAN BERDASARKAN HASgL EVALUASg.............................................................................. 72
6.2
SARAN BERDASARKAN HASgL EVALUASg ...................................................................................... 72
Daftar Pustaka.….………………………………………………………..…………………………………….……..…xii
75
Universitas Kristen Maranatha
Daftar Gambar
Gambar 3.1 DFD Level 0 ................................................................................................... 12
Gambar 3.2 DFD Level 1 ................................................................................................... 17
Gambar 3.3 DFD Level 2 dari proses 2 ............................................................................. 18
Gambar 3.4 DFD Level 2 dari proses 3 ............................................................................. 18
Gambar 3.5 DFD Level 2 dari proses 4 ............................................................................. 19
Gambar 3.6 DFD Level 2 dari proses 5 ............................................................................. 19
Gambar 3.7 DFD Level 2 dari proses 7 ............................................................................. 20
Gambar 3.8 DFD Level 2 dari proses 8 ............................................................................. 20
Gambar 3.9 Entitp Relationship Diagram ......................................................................... 22
Gambar 3.10 Table Diagram............................................................................................. 23
Gambar 3.11 Web map (home)........................................................................................ 24
Gambar 3.12 Web map (user menu)................................................................................ 24
Gambar 3.13 Web map (admin menu)............................................................................. 25
Gambar 3.14 Halaman home, login.................................................................................. 25
Gambar 3.15 Halaman daftar baru .................................................................................. 26
Gambar 3.16 Halaman hubungi admin ............................................................................ 26
Gambar 3.17 Halaman lupa password ............................................................................. 27
Gambar 3.18 Halaman user menu, preview website user ............................................... 27
Gambar 3.19 Halaman ganti template ............................................................................. 28
Gambar 3.20 halaman Manage content .......................................................................... 28
76
Universitas Kristen Maranatha
Gambar 3.21 Halaman Login change profile .................................................................... 29
Gambar 3.22 Halaman change profile.............................................................................. 29
Gambar 3.23 Halaman change password......................................................................... 30
Gambar 3.24 Halaman admin maintain page................................................................... 30
Gambar 3.25 Halaman reset user password .................................................................... 31
Gambar 3.26 Halaman contact master ............................................................................ 31
Gambar 3.27 Halaman manage user................................................................................ 32
Gambar 3.28 Halaman manage user files ........................................................................ 32
Gambar 3.29 Halaman manage user content .................................................................. 33
Gambar 3.30 Halaman home, login.................................................................................. 34
Gambar 3.31 halaman register......................................................................................... 34
Gambar 3.32 Halaman forgot password .......................................................................... 35
Gambar 3.33 Halaman bantuan admin ............................................................................ 35
Gambar 3.34 Halaman preview website user .................................................................. 36
Gambar 3.35 Halaman manage template ........................................................................ 36
Gambar 3.36 Halaman manage file.................................................................................. 37
Gambar 3.37 Halaman manage content .......................................................................... 37
Gambar 3.38 Halaman change profile login..................................................................... 38
Gambar 3.39 Halaman Change Profile ............................................................................. 38
Gambar 3.40 Halaman change password......................................................................... 39
77
Universitas Kristen Maranatha
Gambar 4.1 Halaman Home, Login.................................................................................. 40
Gambar 4.2 Halaman register ......................................................................................... 41
Gambar 4.3 Halaman bantuan admin ............................................................................. 41
Gambar 4.4 Halaman lupa password .............................................................................. 42
Gambar 4.5 Halaman Change Template.......................................................................... 43
Gambar 4.6 Halaman manage files ................................................................................. 44
Gambar 4.7 Halaman manage content ........................................................................... 45
Gambar 4.8 Halaman login change profile...................................................................... 45
Gambar 4.9 Halaman Ubah Profil.................................................................................... 46
Gambar 4.10 Halaman ubah password ........................................................................... 47
Gambar 4.11 Halaman login reset password user .......................................................... 47
Gambar 4.12 Halaman reset password user ................................................................... 48
Gambar 4.13 Halaman Hubungi Master.......................................................................... 49
Gambar 4.14 Halaman Pilih user ..................................................................................... 49
Gambar 4.15 Halaman atur file user ............................................................................... 50
Gambar 4.16 Halaman atur content user........................................................................ 51
Gambar 4.17 Flow Chart Fungsi Utama Aplikasi Website Builder................................... 52
78
Universitas Kristen Maranatha
Daftar Tabel
Table 5.1 Tabel test form login......................................................................................... 53
Table 5.2 Tabel test form daftar baru .............................................................................. 54
Table 5.3 Tabel test form bantuan admin........................................................................ 56
Table 5.4 Tabel test form lupa password ......................................................................... 57
Table 5.5 Tabel test form ganti template......................................................................... 59
Table 5.6 Tabel test form atur file.................................................................................... 60
Table 5.7 Tabel test form atur isi situs ............................................................................. 61
Table 5.8 Tabel test form login ubah profil ...................................................................... 62
Table 5.9 Tabel test form ganti profil............................................................................... 63
Table 5.10 tabel test form ganti password....................................................................... 64
Table 5.11 Tabel test form login reset password user ..................................................... 65
Table 5.12 Tabel test form reset password user.............................................................. 66
Table 5.13 Tabel test form hubungi master ..................................................................... 66
Table 5.14 Tabel test form login daftar admin baru ........................................................ 68
Table 5.15 Tabel test form daftar admin baru ................................................................. 68
Table 5.16 Tabel test form atur isi situs user ................................................................... 70
Table 5.17 Tabel Survep.................................................................................................... 71
Table 5.18 Tebel Nilai Survep ........................................................................................... 71
79
Universitas Kristen Maranatha
Daftar Lampiran
L
a
m
p
i
r
a
n
L
a
m
p
i
r
a
n
L
a
m
p
i
r
a
n
A
Q
u
B
C
L
D
i
s
a
e
t
s
i
t
n
a
t
i
o
g
n
P
P
e
n
r
n
a
o
u
i
g
l
r
i
r
e
a
d
a
n
H
a
s
i
l
S
u
r
v
e
y
m
s
Universitas Kristen Maranatha
BABBIB
PendahuluanB
1.1 LatarBBelakangBMasalahB
Berkembangnya jaringan internet membuat banyak perusahaan besar dan
individu yang memiliki situsnya sendiri di internet. Untuk membuat sebuah situs
dibutuhkan seseorang yang mengerti
mempublikasikan situs
w
e
s
c
r
i
p
pemograman
t
w
e
dan untuk
b
tersebut dibutuhkan biaya yang tidak sedikit Hal ini
b
.
sering menjadi kendala untuk perusahaan-perusahaan kecil dan individu yang ingin
memiliki situsnya sendiri karena jasa seorang
p
w
e
b
r
o
g
r
a
m
m
tidaklah murah.
r
-
e
Masalah tersebut menimbulkan ide untuk membuat sebuah aplikasi yang
berguna untuk membantu
akan berupa sebuah
C
M
s
untuk membuat situsnya secara gratis Aplikasi ini
r
u
e
.
atau
S
o
n
t
C
n
t
a
e
n
a
g
m
M
e
n
t
s
e
S
a
t
s
w
e
b
(
k
i
n
)
t
m
p
l
a
e
t
e
s
u
r
e
dalam mengatur
yang akan dipakai dalam membuat sebuah
a
d
Aplikasi ini akan menyediakan beberapa
pakai, dimana
yang maksudnya
m
e
adalah sebuah aplikasi yang memberi kemudahan untuk
dokumen-dokumen atau
t
y
t
m
e
p
l
a
t
e
s
w
e
i
b
e
diberi kebebasan untuk membuat
l
a
o
y
t
m
p
l
a
t
e
.
s
u
r
e
juga
-nya sendiri.
t
e
i
b
halaman
t
u
user menjadi lebih menarik. Selain itu
t
e
buatan sendiri yang sudah siap
yang dimaksud adalah tampilan atau desain
untuk membuat
s
w
e
1.2 RumusanBMasalahB
1. Bagaimana aplikasi ini membantu
s
u
r
e
dalam membuat situs
memiliki kemampuan teknis dalam hal pemograman
w
e
b
w
e
b
tanpa harus
?
2. Bagaimana aplikasi ini membantu menyalurkan kreatifitas individu dalam
membuat sebuah situs
w
e
b
?
1
Universitas Kristen Maranatha
1.3 TujuanB
Merealisasikan sebuah aplikasi dengan menggunakan PHP untuk membuat
situs
w
e
yang dapat diatur isi dan tampilannya dengan menggunakan aplikasi
b
tersebut.
1.4 BatasanBMasalahB
1
Terdapat 3 tingkatan pengguna aplikasi, yaitu
a
m
i
),
n
d
2
a
s
t
a
m
r
M
a
m
e
3
A
i
d
n
i
s
t
i
n
r
a
t
o
(
r
c
o
n
a
m
i
) dan
n
d
s
s
t
r
e
a
m
i
n
i
s
t
r
a
t
o
(
r
m
d
a
s
t
r
e
.
r
u
a
e
adalah pemilik aplikasi dan orang yang bertanggung jawab
n
d
terhadap
m
i
d
m
t
n
t
a
p
l
i
k
a
s
i
e
.
adalah orang yang bekerja untuk
untuk melayani kebutuhan
s
a
s
t
r
a
m
e
i
dan bertanggung jawab
n
d
sekaligus mengawasi kegiatan
r
u
m
e
s
dalam
r
u
e
menggunakan aplikasi.
4
5
s
U
r
e
adalah pengguna jasa aplikasi
Seorang
m
a
s
t
r
a
m
e
i
m
a
i
n
t
n
a
n
i
t
i
b
e
b
u
l
r
d
e
.
a
c
c
terhadap aplikasi.
c
e
b. Menghapus
e
mempunyai hak untuk:
n
d
a. Melakukan
s
w
e
o
n
yang dianggap melanggar peraturan.
t
u
c. Membatasi akses pengguna aplikasi (misalnya akses ke
d. Menambahkan
t
m
p
l
a
baru atau mengurangi jumlah
t
e
a
e
t
a
a
d
t
).
s
b
e
m
p
l
a
t
e
e
yang
disediakan.
e. Mendaftarkan
f. Melakukan
aplikasi (
a
d
r
e
m
g. Melakukan
s
i
a
d
e
t
i
p
baru.
n
a
s
s
w
o
r
apabila ada permintaan dari pengguna
d
)
n
p
a
u
m
pada
t
d
e
c
o
n
t
n
e
t
aplikasi
w
e
b
(menambahkan berita
atau fitur baru pada aplikasi).
6
Seorang
a
m
d
i
n
mempunyai hak untuk:
a. Mengakses
a
t
a
a
d
secara terbatas.
s
b
e
b. Menghapus atau melakukan audit terhadap content
s
w
e
b
i
t
e
yang
dianggap melanggar peraturan.
c. Melakukan
r
s
e
t
e
p
a
s
s
o
w
apabila ada permintaan dari pengguna
r
d
aplikasi (user).
2
Universitas Kristen Maranatha
d. Menambahkan
t
m
p
l
a
baru atau mengurangi jumlah
t
e
e
t
m
p
l
a
yang
t
e
e
disediakan.
e. Membatasi
7
Seorang
s
o
n
t
n
dari
t
e
e
a. Mendapatkan sebuah
r
g
i
s
w
e
i
yang dibuat
t
b
e
s
.
r
u
e
mempunyai hak untuk:
r
u
c
s
t
e
a
c
c
o
n
atau mendaftarkan
r
e
b. Membuat
s
w
e
i
a
c
c
o
n
u
t
pada aplikasi).
dengan mengikuti aturan yang telah disetujui
t
b
untuk menggunakan aplikasi (melakukan
t
u
e
s
r
u
e
sebelumnya.
c. Melakukan
p
a
u
(profil, desain
d.
s
e
l
a
o
dan
t
y
u
c
o
e
e. Setiap
t
n
t
e
s
e
i
yang telah dibuat
t
b
e
).
diberikan fasilitas penyimpanan ruang
r
u
e
MB untuk menyimpan
pembuatan
f.
n
s
w
diberikan halaman yang tak terbatas untuk dikembangkan.
r
U
atau perbuahan pada isi
t
d
Setiap
s
s
w
e
e
r
i
d
s
sebesar 10
k
d
berupa gambar yang dipakai untuk
a
d
.
t
b
t
e
diberi pilihan 5 buah
r
u
i
a
a
h
t
m
e
p
l
a
t
e
untuk dipakai sesuai
keinginan.
g. Modul
l
o
g
i
dan
n
r
g
i
s
t
e
pada aplikasi memakai enkripsi
r
e
p
a
s
s
o
r
w
d
sederhana.
h.
n
p
f
t
I
o
r
diatur sedemikian rupa sehingga tidak dapat menerima
m
u
karakter-karakter khusus (karakter khusus yang tidak boleh ada dalam
beberapa
f
o
r
: 0123456789():;