• Tidak ada hasil yang ditemukan

APLIKASI PROGRAM BANTU PEMBUATAN WEBSITE

N/A
N/A
Protected

Academic year: 2019

Membagikan "APLIKASI PROGRAM BANTU PEMBUATAN WEBSITE"

Copied!
64
0
0

Teks penuh

(1)

SKRIPSI

APLIKASI PROGRAM BANTU PEMBUATAN WEBSITE

Diajukan Untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Sains Program Studi Ilmu Komputer

Disusun Oleh : Disusun Oleh:

Nama : Octalia Indriasari NIM : 983124038

PROGRAM STUDI ILMU KOMPUTER JURUSAN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SANATA DHARMA

YOGYAKARTA

(2)
(3)
(4)

Karya ini kupersembahkan untuk :

Alloh SWT

Yang telah melimpahkan rahmat serta hidayahnya

dengan begitu banyaknya kepada hamba dalam

doa hamba untuk menyelesaikan karya ini.

Bapak & ibuku

Atas kasih perhatiannya hingga sekarang serta doa

harapannya

Mbak Reti, de’ Ipul, de En.

Love U My Sister n My Brother

Jainal Abdul Azis

(5)

Pernyataan keaslian karya

Saya menyatakan dengan sesungguhnya bahwa skripsi yang saya tulis ini tidak memuat karya atau bagian karya orang lain, kecuali yang telah disebutkan dalam kutipan dan daftar pustaka sebagaimana layaknya karya ilmiah.

Yogyakarta, Januari 2007

(6)

ABSTRAK

Aplikasi program bantu pembuatan website adalah suatu sistem yang dibuat dengan memanfaatkan bahasa pemrograman berbasis web dan bertujuan untuk membantu mempermudah seseorang dalam pembuatan homepage / website di internet.

Dengan menggunakan program ini pengguna dapat membuat homepage, mengedit, mengubah profil, mengganti password serta menambah halaman html pribadinya.

Sistem terdiri atas dua bagian, yaitu sisi anggota sebagai pengguna dan sisi administrator. Masing – masing sisi diakses dengan alamat yang berbeda. Pada sisi mahasiswa, seseorang dapat menjadi anggota sistem dengan mendaftar dahulu. Pada sisi administrator, yang dapat mengakses hanya orang tertentu yang datanya sudah tersimpan di database.

(7)

ABSTRACT

Assistive program application of creating website is a system made by utilized website based programming language aimed to create easier for someone to create a homepage / website in the internet.

By using this program, users are able to create the homepage, editing, varying the profile, changing password and add his personal html page.

The system consisted of two parts, which are member side as users and administrator side. Each side accessed by using different addresses. On the user side, someone can become the system member with registering at first. On the administrator side, which can be accessed only by certain people, whom is the data have been saved in database.

(8)

KATA PENGANTAR

Dengan menyebut nama Allah Yang Maha Pengasih dan Maha Penyayang. Alhamdulillahirabbil’alamiin....penyusun bisa berhasil menyelesaikan karya ini.

Karya ini tercipta berkat partisipasi, dorongan, bantuan dan do’a dari berbagai pihak, untuk itu dengan serendah dan setulus-tulusnya penyusun memohon dengan segala hormat untuk sekedar mengucapkan terima kasih dan hadiah do’a kepada :

1. Bapak Ir. Ign Aris Dwiatmoko M.Sc, selaku Dekan Fakultas MIPA

2. Bapak Drs. Haris Sriwindono, M.Kom selaku Dosen Pembimbing atas waktu luang diantara jadwal padatnya yang sudah membimbing dan memberikan petuah-petuahnya dalam penyusunan karya ini.

3. Ibu PH. Prima Rosa, S.Si M.Kom. selaku Kaprodi Ilmu komputer atas kebaikan hati dan ketulusannya untuk senantiasa membimbing dan mengarahkan dalam menjalani proses studi di Prodi Ilmu komputer.

4. Bapak St. Eko Hari Permadi, S.Si, M.Kom serta Ibu A. Rita Widiarti, S.Si, M.Kom selaku dosen penguji.

5. Semua Dosen pengajar di Fakultas MIPA dan juga Mas Tukijo + Mbak Linda 6. Bapak, Ibu dan Budhe Nasir serta Almarhum Mbah Kakung yang telah

(9)

7. Mba Lit, de’ Ipul, serta si kecil de’ Memel. Kalian adalah sodaraku yang sangat berarti dalam hidupku.

8. Si ”Geblek” Gesang tengkyu banget, sudah merelakan komputernya untuk kupakai mengerjakan tugas akhirku sampai selesai. Juga buat Ovi dan Tae makasih udah baik hati meminjamkan printernya.

9. G-Ndro yang masih setia menjadi kawanku. Anak-anak “Marto Cendol”: Hari’Gerink’, P-Nyo, Agni’Mungil’, Simbah Sindik, teman-temanku berpetualangan...Miz u guys. Ririn, Dian, Rina, Elz, Susi Mawar, dan semua kawan-kawan ikom’98.

10.Deta atas bantuannya waktu akan ujian, Agustin, Nila, Lidya dan kawannya yang sudah mau menunggu saat ujianku. Mba Asih + Yati temen ngobrolku. 11.Jainal Abdul Azis atas ketulusan kasih, perhatian, bantuan serta dorongan

semangat yang diberikannya.

12.Semua pihak yang telah membantu tersusunnya karya ini yang tidak dapat penyusun sebut satu persatu.

Untuk akhirnya, hanya kata maaf yang terucap atas kesalahan dan segala kekurangan penyusun dalam penciptaan karya ini. Semoga bisa bermanfaat bagi penyusun pribadi dan kita semua. Amin. Semoga apa yang telah diperbuat oleh semuanya, Allah SWT akan menggantikannya dengan pahala yang berlipat. Amin.

Yogyakarta, Januari 2007

(10)

DAFTAR ISI

Halaman

HALAMAN JUDUL ... i

HALAMAN PERSETUJUAN PEMBIMBING ... ii

HALAMAN PENGESAHAN ... iii

HALAMAN KEASLIAN KARYA ... iv

HALAMAN PERSEMBAHAN ... v

ABSTRAK ... vi

ABSTRACT ... vii

KATA PENGANTAR ... viii

DAFTAR ISI ... x

DAFTAR GAMBAR ... xiii

DAFTAR TABEL ... xiv

BAB I. PENDAHULUAN ... 1

A. Latar Belakang ... 1

B. Tujuan ... 2

C. Batasan Masalah ... 2

D. Metodologi Pembuatan ... 3

(11)

BAB II. LANDASAN TEORI ... 4

A. Pengembangan Perangkat Lunak dengan Metode Waterfall ... 4

B. Konsep Personal Homepage ... 5

C. World Wide Web .... ... 6

D. HTML (Hyper Text Markup Language) ... 6

E. PHP ... 7

1. Popularitas PHP ... 8

2. Keunggulan PHP ... 8

3. Struktur Program PHP ... 8

F. MySQL Database ... 9

1. Keunggulan MySQL ... 9

2. Koneksi dengan Database ... 10

G. Apace Web Server ... 12

H. Session ... 12

I. CSS ... 13

J. Pembuatan Wizard ... 13

BAB III. ANALISIS DAN PERANCANGAN SISTEM A. Analisa Sistem... 14

B. Perancangan Proses ... 15

C. Diagram Arus Data... 17

D. Perancangan Basis Data ... 20

(12)

BAB IV. IMPLEMENTASI SISTEM ... 32

A. Implementasi Basis Data ... 32

B. Implementasi Antar Muka ... 35

BAB V PENUTUP ... 48

A. Kesimpulan ... 48

B. Saran ... 48

DAFTAR PUSTAKA ... 49

(13)

DAFTAR GAMBAR

Gambar Keterangan Halaman

Gambar 3.1 Diagram Konteks 17

Gambar 3.2 DAD level-1 untuk user 18

Gambar 3.3 DAD level-1 untuk administrator 18

Gambar 3.4 DAD level-2 untuk user 19

Gambar 4.12 Form edit dan hapus templates 43

Gambar 4.13 Data guestbook 43

Gambar 4.20 Form upload html pages 47

Gambar 4.21 Setting anggota 48

(14)

DAFTAR TABEL

Tabel Keterangan Halaman

Tabel 4.1 Tabel anggota 33

Tabel 4.2 Tabel forum_post 34

Tabel 4.3 Tabel form_smile 34

Tabel 4.4 Tabel forum_topic 34

Tabel 4.5 Tabel template 35

Tabel 4.6 Tabel forum_postext 35

(15)

BAB 1 PENDAHULUAN

A. LATAR BELAKANG

Perkembangan kemajuan teknologi semakin pesat, khususnya teknologi informasi berbasis komputer yang pada saat ini sudah semakin luas dan dipergunakan dalam berbagai bidang ilmu. Internet adalah salah satu teknologi yang paling efektif untuk penyebaran informasi baik mengenai produk, jasa dan profil perusahaan kepada masyarakat luas.

Dalam bidang bisnis dan perindustrian internet mempunyai kemampuan sebagai media menyalurkan informasi dan iklan. Dengan teknologi internet saat ini efisiensi dapat meningkat serta memungkinkan perusahaan untuk berbagi (sharing) informasi diantara departemen yang pada umumnya diperlukan komunikasi melalui ruang rapat. Keunggulan lainnya adalah setiap karyawan dapat menjangkau informasi secara mudah dan cepat.

(16)

B. TUJUAN

Tujuan perancangan program pada tugas akhir ini adalah penulis akan membuat program bantu yang dapat menghasilkan website

C. BATASAN MASALAH

Oleh karena luasnya permasalahan yang ada pada penulisan tugas akhir ini dibatasi kemampuannya, yaitu :

• Pengguna (user) hanya dapat membangun dan mengedit website dengan menggunakan template yang sudah disediakan di server, sehinggga user tidak dapat menambah dan mengedit page template yang sudah ada di server.

• Informasi pengguna (user) dan page disimpan dalam database secara otomatis oleh program.

• Program dapat membuat direktori sesuai dengan nama pengguna (user) yang akan masuk.

D. METODOLOGI PEMBUATAN

Metodologi yang digunakan adalah dengan metode waterfall yang meliputi : 1. Analisa

Identifikasi apa yang dibutuhkan oleh pengguna (user) dan admin serta mengumpulkan data dalam membuat aplikasi program bantu pembuatan website.

2. Desain

(17)

3. Implementasi

Penulisan Program (coding) sesuai dengan desain yang dibuat. 4. Pengujian

Berdasarkan dari hasil penulisan program, kemudian dilakukan pengujian untuk memastikan bahwa input yang sudah didefinisikan pada tahap perancangan dan analisis akan menghasilkan suatu output.

5. Evaluasi dan Perbaikan

Setelah pelaksanaan tahap keempat maka pada tahap ini akan dilakukan evaluasi untuk menyempurnakan sistem yang telah dibangun. Berdasarkan dari hasil evaluasi ini maka akan dilakukan perubahan-perubahan yang diperlukan untuk memperbaiki atau menyempurnakan sistem yang telah ada. E. SISTEMATIKA PENULISAN

Sistematika penulisan tugas akhir ini terdiri dari :

Bab I Menjelaskan tentang latar belakang dan rumusan masalah, tujuan, batasan masalah, metodologi penulisan dan sistematika penulisan.

Bab II Menjelaskan tentang landasan teori yang berkaitan dengan teori pembuatan aplikasi program bantu pembuatan website.

Bab III Menjelaskan tentang analisa sistem, perancangan database, perancangan proses, perancangan antar muka serta input dan output program

Bab IV Menjelaskan implementasi basis data, implementasi proses, implementasi antar muka serta hasil input dan output program

(18)

BAB II

LANDASAN TEORI

Bab ini berisi mengenai dasar–dasar teori yang menjadi dasar pembuatan aplikasi program bantu pembuatan website. Pada bab ini akan dibahas secara singkat tentang pengembangan perangkat lunak dengan metode waterfall, HTML, bahasa pemrograman internet PHP, dasar-dasar Mysql untuk perancangan database, serta Apache web server.

A. Pengembangan Perangkat Lunak dengan Metode Waterfall

Metode waterfall adalah paradigma rekayasa perangkat lunak yang paling tua. Dalam proses pengembangan perangkat lunak dibutuhkan pendekatan yang sistematis. Metode waterfall dapat diilustrasikan sebagai berikut :

Analisa

Desain

Implementasi

Pengujian

Perawatan

Gambar 2.1 Metode Waterfall

(19)

1. Analisa, semua kebutuhan yang sudah dikumpulkan diidentifikasikan dan difokuskan secara khusus pada program aplikasi.

2. Desain, tahap ini akan megubah kebutuhan yang sudah diidentifikasikan menjadi suatu representasi perangkat lunak seperti flowchart atau pseudocode yang dapat dipelajari kualitasnya sebelum memasuki tahap implementasi.

3. Implementasi, hasil tahap desain akan diubah menjadi bentuk yang dapat dibaca dan dieksekusi oleh mesin, dalam halaman ini dibentuk menjadi sebuah program.

4. Pengujian, pengujian terhadap program dilakukan untuk menemukan error dan memastikan bahwa input yang sudah didefinisikan pada tahap perancangan dan analisis akan menghasilkan suatu output.

5. Perawatan, tahap ini akan menangani masalah – masalah karena adanya perubahan tertentu pada perangkat lunak akibat pengadaptasian perangka lunak pada lingkungan eksternal, seperti kemungkinan penerimaan input yang tidak seperti input seharusnya.

B. Konsep Personal Homepage

(20)

C. W orld Wide Web

World wide website (www) atau lebih dikenal dengan web site merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet. Web menggunakan konsep hypertext antar dokumen yang berkaitan. Website awalnya sebagai penyedia informasi dalam internet, kini digunakan juga untuk komunikasi hingga media transaksi bisnis. Protokol yang digunakan untuk mengakses halaman web adalah Hypertext Transfer Protokol (HTTP)

D. HTML ( Hyper Text Markup Language)

HTML adalah sebuah bahasa yang menggunakan penandaan (Mark-Up) yang sederhana dan universal digunakan untuk membangun suatu halaman web. HTML merupakan pengembangan dari standar performatan dokumen teks yaitu SandartGeneralited Markup Languange (SGML).

HTML sebenarnya bukan merupakan suatu bahasa pemrograman karena sangat tercermin dari namanya, HTML adalah bahasa penandaan terhadap sebuah dokumen teks. Pemakaian tanda ini diajukan untuk menentukan bentuk atau format dengan teks ini yang diapit oleh dua buah tanda.

Pembuatan sebuah file HTML dapat dilakukan dengan editor teks sederhana seperti Notepad, ataupun dengan editor khusus yang sifatnya visual. Penandaan yang terdapat pada dokumen HTML dengan file teks yang lain, selain dari ekstensi filenya sendiri yang berupa .htm atau .html.

(21)

Setiap tag yang dituliskan harus memiliki program dengan sebuah tag penutup yang diawali dengan tanda garis miring (/). Tag biasanya berupa kata-kata dalam bahasa Inggris ataupun singkatan dari kata-kata tersebut. Penulisan tag HTML biasa dengan huruf kecil maupun huruf kapital, karena tidak bersifat case sensitive. Misalkan untuk menampilkan huruf yang dicetak miring (Italic) digunakan tag <I> seperti pada contoh ini :

<I> teks ini akan dicetak miring </I>.

E. PHP

PHP adalah teknologi yang dikenalkan pada tahun 1995 yang terkenal dengan nama Personal Home Page tools, terkandung di dalamnya sebuah parser engine (mesin pengurai) yang sangat sederhana yang hanya mampu mengelola makro khusus dan beberapa utilitas yang sering digunakan pada homepage seperti buku tamu, pencacah, dan semacamnya. Parse tersebut ditulis ulang pada pertengahan 1995 dan dinamakan PHP / FI 2.0 FI (Form Intrepeter) sendiri ditulis dalam kode lain yang ditulis oleh Rasmus, yang menterjemahkan HTML dari data. Ia menambahkan Personal Home Page tools dengan Form Interpreter dan menambahkan dukungan server database menggunakan mSQL, sehingga lahirlah PHP / FI PHP / FI tumbuh dengan pesat dan orang-orang mulai menyiapkan kode programnya biar bisa mendukung PHP.

(22)

yang sangat lengkap dan mudah. PHP merupakan Script yang menyatu dengan HTML dan berada pada server (server side HTML embedded scripting).

1. Popularitas PHP

Berdasarkan hasil survey Neteraft pada bulan Desember 1999, lebih dari satu juta site yang menggunakan PHP.

2. Keunggulan PHP

PHP memiliki Life Cycle yang singkat, sehingga PHP selalu up to date mengikuti perkembangan teknologi internet. Kemudian Cross platform, PHP dapat dipakai dihampir semua web server yang ada di pasaran (Apache, AOLServer, fhttpd, phttpd, Microsoft IIS, dan lain-lain) yang dijalankan pada beberapa system operasi (Linux, FreeBSD, Unix, Solaris, Windows). Dengan demikian, proses developing dapat dilakukan menggunakan sistem operasi yang berbeda dengan sistem operasi yang digunakan setelah publish (misalnya, developing di windows kemudian dipasang di web server yang menggunakan sistem operasi Linux) [AZI01].

PHP mendukung banyak paket database baik yang komersil maupun nonkomersil, seperti dBase, DBM, FilePro, mSQL, MySQL, ODBC, Oracle PostgreSQL, Sybase, Velocis. Selain itu PHP juga mendukung koneksi dengan protokol IMAP, SNMP, NNTP dan POP2

.3. Struktur Program PHP

(23)

berisi tag HTML dan kode PHP ini diberi ekstensi, php atau ekstensi lainnya yang ditetapkan pada apache / web server.

Berdasarkan ekstensi ini, pada saat file diakses, server akan tahu bahwa file ini mengandung kode PHP. Server akan menerjemahkan kode ini dan menghasilkan output dalam bentuk tag HTML yang akan dikirimkan ke browser client yang mengakses file tersebut.

Berikut contoh penggunaan script PHP pada tag HTML : <HTML><HEAD>

<TITLE> Struktur Pemograman PHP </TITLE> </HEAD>

<BODY> <CENTER> <?

Echo “silakan menggunakan PHP” ?>

</CENTER> </BODY> </HTML>

F. MySQL Database

1. Keunggulan MySQL

Merupakan software database yang termasuk paling popular di lingkungan pemrograman menggunakan database, kepopuleran ini karena ditunjang performansi query dari database-nya selain itu juga memiliki keistimewaan dan kemampuan yang lain, yaitu :

1. Memiliki kemampuan untuk melayani pengguna (user) secara simultan atau bersamaan (multiuser)

2. Mampu melayani lebih dari 50.000.000 record

(24)

informasi dan eksekusi perintah yang cukup baik 4. Mampu mendukung implementasi client / server 5. Mudah untuk disimpan dan diupdate

6. Memiliki kemampuan yang hampir setara dengan database ORACLE, paling tidak untuk database dalam skala kecil maupun medium database.

Model koneksi dengan protokol TCP/IP membuat akses ke server database lebih cepat dibanding jika menggunakan mapping drive, semacam Novell untuk membuat program client/server.

MySQL mengenal beberapa data tipe diantaranya adalah : ƒ Numeric Values

ƒ String (character) Value ƒ Date and Time Values ƒ Null Values

2. Koneksi dengan Database

Untuk membuat suatu database sebelumnya harus terhubung dengan database server. Di dalam database server tersimpan database yang terdiri dari table-tabel dan kolom-kolom beserta tipe datanya. Di dalam database inilah semua data dan relasinya tersimpan.

(25)

sehingga dapat mengontrol server selain itu juga dapat mengexport data dan mengecek hak akses. Perintah yang digunakan adalah :

MySQL –h host name –u user nme –p password

Keterangan :

• -h host-name, merupakan nama server host tempat MySQL berada. Apabila MySQL berada pada server host yang sama ( localhost ) maka option –h ini dapat dihilangkan.

• -u user name nama MySQL user.

• -p adalah password atas user yang dibuat.

Setelah sukses melakukan koneksi ke MySQL kemudian akan muncul tampilan :

Welcome to the MySQL monitor. Commands end with; or\g. Your MySQL connection id is 49 to server version :

Type ‘help’for help MySQL>

Dari prompt inilah dapat dilakukan segalanya seperti mengeksekusi semua perintah MySQL dan membuat database. Untuk menggunakan database yang telah ada digunakan perintah :

MySQL> use nama_database;

Database tidak dapat digunakan sebelum dibuat. Cara membuat database yaitu dengan syntax, syntax untuk membuat database adalah :

(26)

MySQL> create database homepage ;

G. Apache Web Server

Web server adalah merupakan suatu server internet yang menggunakan protocol HTTP ( Hypertext Transfer Protocol ) untuk melayani semua proses pentransferan data. Web server hingga saat ini merupakan server yang dapat dikatakan tulang punggung bagi semua pengguna internet. Hal ini dikarenakan, web server bukan hanya dapat melayani jenis data dalam bentuk teks, akan tetapi juga dapat menampilkan format-format data dalam bentuk gambar, baik gambar dalam bentuk 2D ataupun 3D, suara dan juga dapat berinteraksi dalam dunia wireless internet dengan menjadikannya sebagai sebuah Wireless Acces Protocol ( WAP ) gateway dan sebagainya.

Banyak aplikasi yang dapat digunakan untuk membuat suatu webserver. Akan tetapi salah satu keuntungan dari pemakaian apache server ini adalah tidak mengeluarkan biaya untuk mendapatkannya dan juga kecepatannya cukup baik dibanding web server lain.

H. Session

(27)

Untuk mengawali session digunakan fungsi session_start() ataupun session_register(). Sedangkan untuk mengakhiri session digunakan fungsi session_destroy(). Selain itu PHP juga masih menyediakan beberapa fungsi session lainnya.

I. Cascading Style Sheet (CSS)

CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, dll) untuk dokumen terstruktur. CSS memisahkan presentation sebuah dokumen dari content dokumen itu sendiri. CSS memudahkan pembuatan dan pemeliharaan dokumen web. Setiap User Agent mempunyai default style sheet, sehingga pendefinisian rule CSS pada sebuah dokumen akan menimpa rule default.

Stylesheet di definisikan dalam bentuk rule, terdiri dari selector, dan declaration yang terdiri atas property dan value. Contoh rule adalah h1 { color: blue }, selector pada rule tersebut adalah h1, propertynya adalah color, sedangkan value pada rule tersebut adalah blue. Seluruh elemen (tag) HTML dapat digunakan sebagai selector.

J. Pembuatan Wizard

(28)

BABIII

PERANCANGAN SISTEM DAN PERANCANGAN DATABASE

A. ANALISA SISTEM

1. Analisa Masalah

Aplikasi program bantu pembuatan website dibuat untuk meringankan kesulitan dalam pembuatan homepage.

2. Analisa Kelayakan

Aplikasi ini dianggap layak karena sekarang ini internet mempunyai banyak manfaat dalam berbagai bidang. Salah satu cara memanfaatkan teknologi internet adalah dengan mempunyai website. Jadi dengan adanya aplikasi ini diharapkan bisa membantu mempermudah dalam pembuatan homepage.

3. Analisa Kebutuhan

Sistem dapat dipandang dari dua sisi : • Sisi pengguna (user)

Pengguna (user) adalah pihak yang membutuhkan aplikasi ini untuk membuat homepage pribadinya.

• Pembuat sistem

(29)

o Perangkat Keras Perangkat

- 1 unit komputer dengan sistem operasi Windows XP o Perangkat lunak (software)

- Browser : Internet Explorer 4.0+. - Website server : Apache

- Bahasa pemrograman : PHP

- Database : MySQL

- User interface : Macromedia dreamweaver 8 o Pengetahuan (knowledge)

- Pengetahuan tentang Basis data

- Pengetahuan tentang internet dan clien – server programming

B. PERANCANGAN PROSES

Proses yang terjadi dalam aplikasi program bantu pembuatan website ini dapat dilihat dari dua sisi yaitu :

1. Dari sisi pengguna

Proses Pendaftaran : proses pendaftaran merupakan proses dimana identitas

pengguna dimasukkan ke dalam database anggota. Jika sudah selesai proses pendaftaran anggota dapat melanjutkan dengan proses : edit homepage, edit template, upload, setting.

(30)

edit homepage, ganti template, setting. Akan tetapi jika data tidak valid maka proses login harus diulang lagi.

Proses Upload : merupakan proses dimana anggota dapat menambahkan

halamannya sendiri dengan format html yang akan dipublikasikan pada link mypage pada homepage utama anggota.

2. Dari sisi administrator

Proses Login: digunakan untuk mengecek apakah data administrator berupa

nama dan password yang dimasukkan sesuai dengan data dalam database administrator.

Proses Hapus Data : merupakan proses untuk menghapus data anggota, data

guestbook dan template.

Proses Upload : merupakan proses untuk menambah data templates

Proses Tampil Data : merupakan proses untuk melihat data anggota yang

(31)

C. DIAGRAM ARUS DATA

Gambar 3.1 Diagram Konteks user

sistem aplikasi program bantu pembuatan

website

admin data user utk daftar

hasil daftar, upload

hasil login data file yg akan

diupload

(32)

Gambar 3.2 DAD Level-1 Untuk User

Gambar 3.3 DAD Level-1 Untuk Administrator Daftar file

3 update Data yg diupdate

user Data user utk daftar

database anggota Data user utk login

hsl update

hsl pendaftaran

admin Data admin yg sdh valid

database anggota Data anggota yg akan

ditampilkan Hsl templates yg sudah diupload

Database templates yg sdh diupload

Data templates yg akan ditampilkan

Data template akan dihapus

(33)

Gambar 3.4 DAD Level-2 Untuk User Data yg diupdate

user

3.1 tambah daftar file

3.2 edit

3.3 hapus Pesan tambah

Data yg telah ditambahkan

Data yg akan dihapus

Data yg telah diedit

user

(34)

STRUKTUR MENU

Gambar 3.4 Struktur menu user

Gambar 3.5 Struktur menu administrator Menu utama

Login

daftar Menu User

Index User Edit Templates Edit HomePages Upload My Pages Setting SignOut

Remove MyPage Ubah Profil Ubah Password

(35)

D. PERANCANGAN BASIS DATA

a. Diagram E-R

1

Gambar 3.6 Diagram E-R

Di dalam sistem ini selain entitas – entitas diatas terdapat juga entitas lain yang tidak berelasi yaitu :

• Forum_post

1

M 1

anggota memiliki template

(36)

Atribut yang ada : posted_id, topic_id, poster, post_time, email, website •

da : id, code, smile_url, emotion. •

da : topic_id, topic_title, topic_poster, topic_time, topic_views,

: post_id, post_text. •

ada : id_guestbook, nama, email, homepage, subject, text. b. P

emetaan Diagram E-R ke dalam Tabel

• Tabel anggota

(37)

9 = hak 10 = mypages

es

igunakan untuk menyimpan data templates, id_templates • Tabel templat

Tabel templates d

merupakan key dari tabel ini.

id_templates gambar judul tipegambar ukurangambar

(38)

14 = namalink3

posted_id topic_id poster post_time email website

Tabel forum_smile •

id code smile_url emotion

Tabel forum_topic

topi

d_id topic_title topic_poster topic_time topic_views topic_replies topic_last_post_id

• Tabel forum_postext

post_id post_text

Tabel guestbook

ama email homepage subject text

(39)

E. PERANCANG NTAR A (INTERFACE)

Lima Data HomePage User Terbaru

Gambar 3.7 Tampilan utama

Tampilan utama berisi header yaitu logo dan judul website, link halaman depan (home), link pendaftaran, link templates, link contact us yang berisi informasi administrator, link member, link guestbook, form login, data templates terbaru dan lima anggota terbaru.

(40)

Gambar 3.8 Tampilan Login

Jik (user) belu arus link ke menu

pe

Gambar 3.9 Tampilan pendaftaran a pengguna m pernah membuat halaman, maka h ndaftaran.

Form Pendaftaran

text user

password text

retype password text

(41)

Tampilan pendaftaran berisi profil identitas diri. Tombol next melanjutkan ke halaman berikutnya yaitu memilih templates yang akan di sebagai tampilan homepage.

untuk gunakan

milih templates, klik tombol ”Next” lagi untuk masuk ke alam engisi atau melengkapi profil atau data pribadi user.

Nama templates next

Pilih templates anda

Gambar 3.10 Tampilan Pilih Templates Setelah me

(42)

Form Edit Profil

Judul About Me

Gambar

Caption Gambar Picture Caption

Isi

<html support>

Isi Penjelasan Anda Disini

Link 1

Judul Personal Info Contact Us

Nama Nama

Alamat Alamat

Telepon Telepon

Email Email

Edit

Gambar 3.11 Tampilan Edit Profil

Pada halaman khusus user, terdapat beberapa menu, diantaranya adalah : 1. Home

(43)

page address bagi user yang telah mengupload personal html. Pada menu ini a terdapat link remove mypages yang berfungsi untuk menghapus halaman

ribadi bagi user yang telah mengupload halaman html pribadi. 2. Edit Templates

lates digunakan untuk mengubah tampilan homepage user, ih templates yang disukai.

epages

Edit homepages adalah menu yang digunakan untuk me gubah data profil rti yang digambarkan pada gambar 3.4.

ini digunakan bagi user yang ingin membuat halaman pribadi yang an HTML, dimana halaman tersebut dapat dipublikasikan rogram ini juga. Halaman HTML yang telah diupload dapat dihapus

e pada halaman khusus user. ting

Setting adalah menu yang digunakan untuk mengedit personal data user, engubah password.

SignOut

SignOut digunak s user dan kembali ke

in halaman khusus untuk user, juga terdapat halaman yang digunakan unt

4. Upload Your Pages Menu

berupa halam melalui p

melalui menu hom 5. Set

dan m 6.

an untuk keluar dari halaman khusu halaman utama.

Sela

(44)

1.

ct untuk

2. Dat

gota yang telah mendaftar melalui pada halaman utama, pada menu tersebut terdapat link hom

a menu ini juga disediakan , sehingga administrator dapat dengan mudah menemukan ang

U Name

Home

Home adalah link ke halaman utama administrator yang berisi mengenai informasi jumlah anggota, jumlah templates, dan informasi conta

pengunjung. a Anggota

Menu ini berisi tentang seluruh ang menu pendaftaran

epage yang digunakan untuk melihat homepage anggota dan menu hapus yang digunakan untuk menghapus anggota. Pad

fasilitas cari anggota

gota yang sedang dicari. Berikut adalah tampilan data anggota :

ser Nama Alamat Telepon Email HomePage Hapus user User Jl. XXXX [email protected] homepage hapus

Anggota plates

kan user sebagai tampilan homepagenya. Gambar 3.12 Tampilan data

3. Add Tem

Add Templates digunakan untuk menambah templates yang akan dipublikasikan dan diguna

(45)

4. Data Templates

uhan. k

Yo

Data templates berisi tentang templates-templates yang telah diupload oleh Administrator. Pada menu ini, templates dapat diubah gambarnya atau dihapus secara keselur

5. Data GuestBoo

Data guestbook adalah data buku tamu yang telah dimasukkan melalui halaman utama web. Di dalam menu ini data guestbook dapat diedit dan dihapus.

ur Name

Email

Homepage http://

Subject

Text

Submit

(46)

Poster Topics Title Tangga

by YourName -em

-homepage

Isi subject l post

ail

Subject edit

Gambar 3.15 Data Guest Book 6. Set

inistrator, dan mengubah password.

SignOut digunakan untuk keluar dari halaman administrator dan kembali an utama.

ting

Seperti halnya setting pada halaman user, yaitu menu yang digunakan untuk mengedit personal data adm

7. SignOut

(47)

BAB IV

LEMENTASI SISTEM

ntasi Basis Data

Databa

sist

Field Type Ukuran Keterangan

IMP

A. Impleme

se Management System (DBMS) yang digunakan adalah MySql. Dalam em ini terdiri atas tujuh tabel, yaitu :

1. anggota

no_anggota integer 9 Nomor anggota

Id_anggota varchar 12 Id anggota

password varchar 100 Password anggota

nama varchar 30 Nama anggota

alamat text Alamat anggota

no_telpon varchar 30 Nomor telpon anggota

email varchar 60 Email anggota

tgl_pendaftaran date Tanggal pendaftaran

hak tinyint 2 Hak anggota

mypages tinyint 2 Halaman html punya anggota

(48)

2. forum_post

Field Type Ukuran Keterangan

posted_id Int 10 Idpengirim

topic_id Int 10 Id topik

poster Varchar 50 Pengirim forum

post_time Varchar 20 Waktu pengiriman

email Varchar 75 Email forum

website Varchar 75 Alamat website

bel forum_post ile

e uran n

Tabel 4.2. Ta 3. forum_sm

Field Typ Uk Keteranga

id Int 10 Id forum smile

code Varchar 5 e dari ikon bentuk

resi wajah

0 Kod

gambar eksp

smile_url Varchar 100 Nama dan tipe gambar

emotion Varchar 75 gambar Keterangan ikon

Tabel 4.3. T for rum_topic

T Uku n n

abel um_smile 4. fo

Field ype ra Keteranga

topic_id Int 0 1 Id topik topic_title Varchar 100 Judul topik topic_poster Varchar 50 Pembuat topik topic_time Varchar 20 Waktu pembuatan topik

topic_views Int 10 Jumlah berapa kali topik dilihat topic_replies Int 10 Balasan untuk topik yang dibuat topic_last_post_id Int 10 Urutan dari pembuatan topik

(49)

5. templates ukurangambar Varchar 15 Ukuran gambar

4.5. Tabel plate 6. forum_postext

Field Type Ukuran Keterangan

Tabel tem

post_id Int 10 Id post forum

post_text Text informasi yang dibuat

pengunjung Tabel 4.6. Tabel forum_post

l

Field Type Ukuran Keterangan

(50)

namalink4 varchar 30 Nama link4

url4 varchar 100 Alamat url4

personal_info varchar 30 Info pribadi anggota

nama varchar 30 Nama anggota

alamat Text Alamat anggota

telepon varchar 30 Nomor telepon anggota email varchar 60 Alamat email anggota

Tabel 4.7. Tabel Profil

B. Imp tasi Antar M

entasi antar muka sistem aplikasi program site ini terdiri dari :

1. Menu Utama

lemen uka

Implem bantu pembuatan web

a. Halaman Indeks

(51)

b. Halaman Pendaftaran

Gambar 4.2 Form Pendaftaran

n ini untuk pendaftaran bagi pengguna (user) yang belum

c. Login Halama

pernah membuat page.

Gambar 4.3 Tampilan Login

(52)

Gambar 4.4 Konfirmasi Password d. Templates

Gambar 4.5 Templates

(53)

e. Contact Us

Gambar 4.6 Contact Administrator

Contact Us adalah informasi administrator. Anggota dapat menghubungi adminis

er

trator lewat informasi tersebut. f. Link Memb

Gambar 4.7 Link Member

(54)

g. Guest Book

Guest book adalah buku tamu yang digunakan oleh pengunjung untuk memberikan komentar, saran, kritik, atau informasi kepada seluruh anggota, administrator atau semua pengunjung.

Gambar 4.8 Tambah GuestBook 2. Menu administrator

a. Halaman Index Administrator

Administrator mempunyai wewenang menghapus data anggota,

menambah templates, m enghapus

tem

Administrator tidak memiliki hak untuk mengubah password anggota engubah gambar templates, m

plates, mengubah guestbook, dan menghapus data guestbook.

(55)

terdapat informasi jumlah anggota, jumlah templates, dan contact administrator.

Gambar 4.9 Halaman Index Administrator b. Data Anggota

(56)

anggota terbaru sampai data anggota terlama. Pada menu ini administrator apat mengetahui homepage masing-masing anggota, dan dapat menghapus data anggota. Menu ini juga dilengkapi dengan pencarian data anggota untuk mempermudah administrator mencari anggota

c. Add Templates

Halaman ini digunakan untuk menambah data templates, sehingga anggota dapat membuat variasi homepagenya dengan mengganti templatesnya dengan templates yang telah disediakan.

Pada halaman ini ditampilkan seluruh data anggota mulai dari data

d

Gambar 4.11 Form Tambah Templates d. Data Templates

(57)

Gambar 4.12 Form Edit dan Hapus Templates e. Data GuestBook

Menu ini berisi tentang seluruh data guestbook. Administrator pada menu ini dapat mengedit guestbook dan menghapus guestbook.

(58)

Gambar 4.14 Form Edit GuestBook f. Setting

Setting adalah menu yang digunakan untuk mengubah data contact administrator dan untuk mengubah password. Pada proses pengubahan password, administrator akan di relogin untuk memastikan bahwa password telah diubah. Dalam proses pengubahan password, administrator dikonfirmasi untuk memasukkan password lama kemudian memasukkan password baru dan konfirmasi password baru.

(59)

Gambar 4.16 Form Ubah Password g. SignOut

Link ini un dan kembali ke

a deks.

3. M

a

tuk keluar dari halaman administrator h laman in

enu Anggota

. Halaman Index Anggota

Gambar 4.17 Halaman Index Anggota

(60)

page bagi anggota yang telah mengupload halaman html pribadinya di homepage ini.

b. Edit Templates

Anggota dapat mengubah templates pada homepagenya di menu ini. Pada menu ini, diberikan informasi juga mengenai templates yang saat ini digunakan, sehingga anggota dapat memilih templates yang lain untuk menvariasi homepagenya.

Gambar 4.18 Edit Templates

c. Edit Homepage

(61)

Gambar 4.19 Edit HomePage d. Upload Your Pages

Anggota dapat menambahkan halamannya sendiri dengan format HTML di menu ini. Halaman yang telah diupload melalui menu ini akan dipublikasikan pada link mypage yang terdapat pada homepage utama anggota. Link halaman tambahan tersebut juga dapat dilihat pada halaman

. Halaman tambahan ini juga dapat dihapus melalui link remove page yang ada pada halaman utama khusus anggota.

index khusus anggota

(62)

e. Setting

Setting adalah menu yang digunakan untuk mengubah data personal anggota dan untuk mengubah password. Pada proses pengubahan password, anggota akan di relogin untuk memastikan bahwa password telah diubah. Dalam proses pengubahan password, anggota dikonfirmasi untuk memasukkan password lama kemudian memasukkan password baru dan konfirmasi password baru.

Gambar 4.21 Setting Anggota

Gambar 4.22 Form Ubah Password Anggota f. SignOut

(63)

PENUTUP

A. KE

program program

penguj ersebut pada komputer stand alone dengan webserver apache.

Dengan menggunakan program ini pengguna dapat membuat homepage, mengedit, mengupload serta menghapus file html pribadinya. PENUTUP

B. SARAN

Untuk perkembangan program dikemudian hari penulis menyarankan untuk menambah fasilitas sup ya mampu menerima teks dan gambar tapi juga dapat menerima data, suara dan video. Serta untuk tampilannya ditambah dengan animasi supaya program terlihat lebih menarik.

SIMPULAN

Setelah melakukan analisa, perancangan, dan implementasi pada aplikasi bantu pembuatan website, penulis mengambil kesimpulan bahwa aplikasi bantu pembuatan website telah berhasil dibangun dengan melakukan ian awal implementasi program t

(64)

DAF KA

eguh, W. 2005. PHP Triad Fundamental. Yogyakarta : Gava Media.

5. Aplikasi WEB Database dengan Dreamweaver MX 2004. Yogyakarta : Andi Yogyakarta

Didik Dwi Prasetyo. 2003. Tip dan Trik Kolaborasi PHP dan MySQL untuk

MySQL. Yogyakarta : Gava Media.

Didik Dwi Prasetyo. 2003. Administrasi Database Server MySQL. Jakarta : PT mputindo

1. an mengcopy file yang ada di folder komputer ke folder server(web) TAR PUSTA

T

Stendy B Sakur. 200

membuat Database yang Interaktif. Jakarta : PT Gramedia.

Bunafit Nugroho. 2004. Aplikasi Pemrograman Web Dinamis dengan PHP dan

Gambar

Gambar 2.1 Metode Waterfall
Gambar 3.1 Diagram Konteks
Gambar 3.2 DAD Level-1 Untuk User
Gambar  3.4 DAD Level-2 Untuk User
+7

Referensi

Dokumen terkait

Comparative study of Knowledge Based Algorithms for Automated Road Network Generalization, (A case study of Dehradun City), Project Report, Indian Institute of

Paket Outbound Malang ini kami khususkan untuk peserta Anak-anak yang masih duduk dibangku sekolah.. Memberikan motivasi untuk giat belajar,

Bahwa Form Model B.1-KWK keputusan DPP Partai Nasdem Nomor 066-Kpts/DPP- NasDem/VIII/2016 Tentang Persetujuan Pasangan Calon Walikota dan Wakil Walikota Kota

Seperti pemotongan pajak perusahaan, dimana saat ini pajak perusahaan di Amerika Serikat mencapai 35%, hal yang membuat Apple mengalihkan usahanya ke Irlandia

Menurut Djamarah (1996, hlm. 35), “metode pe mbelajaran konvensional adalah metode pembelajaran tradisional, karena sejak dulu metode ini telah dipergunakan sebagai

Sangat terampill, jika menunjukkan adanya usaha untuk menerapkan konsep/prinsip dan strategi pemecahan masalah yang relevan yang berkaitan membuat diagram ladder

Ogan Komering Ulu Sel... 532

PERUBAHAN ATAS PERATURAN PEMERINTAH NOMOR 49 TAHUN 1963 TENTANG HUBUNGAN SEWA-MENYEWA PERUMAHANb. PRESIDEN