Laporan Tugas Besar pemrograman web 1 PDF

Preview

Summary

Laporan Tugas Besar Mata Kuliah Pemrograman Web 1 Dosen Pengasuh : Muhammad Taher Jufri S.T., M.T. Kelompok 4 Disusun oleh : ARSIH ILYAS (16-621-046) R.R.RACHASIWI SUPRAYOGI (16-621-016) ENOS FONATABA (16-621-023) PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN SISTEM INFORMASI UNIVERSITAS YAPIS ...

Description

Accelerat ing t he world's research.

Laporan Tugas Besar pemrograman web 1 Rachasiwi Suprayogi

Related papers

Download a PDF Pack of t he best relat ed papers 

Di susun oleh BSI fot ocopy cahaya

Pemrog T im Koalisi merah put ih php Abdul Rochman Disusun oleh : AHMAD AFANDI -1210651245 PEMROGRAMAN BERBASIS WEB Lingga Asni Maulina

Laporan Tugas Besar Mata Kuliah Pemrograman Web 1 Dosen Pengasuh : Muhammad Taher Jufri S.T., M.T.

Kelompok 4 Disusun oleh : ARSIH ILYAS (16-621-046) R.R.RACHASIWI SUPRAYOGI (16-621-016) ENOS FONATABA (16-621-023)

PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN SISTEM INFORMASI

UNIVERSITAS YAPIS PAPUA JAYAPURA TAHUN AKADEMIK 2016/2017

Kata pengantar Puji syukur kehadirat Tuhan Yang Maha Esa atas segala rahmat-Nya sehingga Laporan Tugas Besar Pemrograman Web 1 ini dapat tersusun hingga selesai . Tidak lupa kami juga mengucapkan banyak terimakasih atas bantuan dari pihak yang telah berkontribusi dengan memberikan sumbangan baik materi maupun pikirannya. Dan harapan kami semoga laporan ini dapat menambah pengetahuan dan pengalaman bagi para pembaca, Untuk ke depannya dapat memperbaiki bentuk maupun menambah isi laporan agar menjadi lebih baik lagi. Karena keterbatasan pengetahuan maupun pengalaman kami, Kami yakin masih banyak kekurangan dalam laporan ini, Oleh karena itu kami sangat mengharapkan saran dan kritik yang membangun dari pembaca demi kesempurnaan

laporan

ini.

Jayapura,

Mei 2017

Kelompok 4

1

DAFTAR ISI Kata pengantar ………………………………………………….........

1

Daftar isi ……………………………………………………………..

2

Daftar gambar ………………………………………………………..

4

Daftar table …………………………………………………………..

6

Bab 1 Analisis kebutuhan ……………………………………………

7

1. Kebutuhan perangkat keras …………………………………..

7

2. Kebutuhan perangkat lunak ………………………………….

7

2.1.Aplikasi web developer tools …………………………….

7

2.2.Aplikasi web server ………………………………………

8

2.3.Aplikasi DBMS …………………………………………..

8

2.4.Aplikasi web browser …………………………………….

9

Bab 2 Perancangan ……………………………………………………

10

1. Perancangan table ……………………………………………..

10

1.1.Membuat database …………………………………………

10

1.2.Membuat tabel ……………………………………………..

10

1.2.1. Tabel tbdatateman …………………………………

11

1.2.2. Tabel tbuser ……………………………………….

12

1.2.3. Tabel download ……………………………………

13

2. Perancangan system …………………………………………...

14

2

2.1. Membuat file koneksi database …………………………...

14

2.2. Membuat file css ………………………………………….

15

2.3. Membuat layout halaman web ……………………………

16

2.4. Membuat halaman beranda ……………………………….

19

2.5. Membuat fasilitas input data teman ………………………

22

2.5.1. Membuat form input data …………………………

22

2.5.2. Membuat halaman web untuk simpan data ……….

25

2.6. Membuat fasilitas lihat data teman ………………………..

29

2.6.1. Membuat halaman tampil data …………………….

29

2.6.2. Membuat halaman ubah data ………………………

37

2.6.3. Membuat halaman update data …………………….

41

2.6.4. Membuat hapus data ……………………………….

44

2.7. Membuat fasilitas upload ………………………………….

45

2.8. Membuat fasilitas download ………………………………

49

2.8.1. Membuat form tambah daftar download …………...

49

2.8.2. Membuat halaman simpan daftar download ……….

51

2.8.3. Membuat halaman daftar download ………………..

54

2.9. Membuat Fasilitas Login Authentication ………………….

56

2.9.1. Membuat form daftar user …………………………

56

2.9.2. Membuat form user login ………………………….

67

2.9.3. Membuat logout ……………………………………

73

Bab 3 Kesimpulan ………………………………………………………

75

Daftar pustaka …………………………………………………………..

76 3

DAFTAR GAMBAR Gambar 1.1 Tampilan Adobe Dreameaver CS6 ………………………

7

Gambar 1.2 Tampilan XAMPP ……………………………………….

8

Gambar 1.3 Tampilan MySql …………………………………………

8

Gambar 1.4 Tampilan phpMyAdmin ………………………………....

9

Gambar 1.5 Tampilan Mozilla Firefox ………………………………..

9

Gambar 2.1 Membuat Database Melalui phpmyadmin ……………….

10

Gambar 2.2 Membuat Tabel Melalui phpmyadmin …………………...

10

Gambar 2.3 Menentukan Struktur Tabel ………………………………

11

Gambar 2.4 Tampilan Tabel tbdatateman ……………………………..

12

Gambar 2.5 Tampilan Tabel tbuser ……………………………………

13

Gambar 2.6 Tampilan Tabel download ………………………………..

13

Gambar 2.7 Tampilan Halaman Beranda ………………………………

22

Gambar 2.8 Tampilan Form Input Data Teman ………………………..

25

Gambar 2.9 Hasil Proses Simpan ………………………………………

28

Gambar 2.10 Tampilan Halaman Tampil Data …………………………

37

Gambar 2.11 Tampilan Halaman Ubah Data ……………………………

41

Gambar 2.12 Tampilan Hasil Proses Update ……………………………

44

Gambar 2.13 Tampilan Halaman Upload ……………………………….

49

Gambar 2.14 Tampilan Halaman Form Tambah Daftar Download …….. 51 Gambar 2.15 Tampilan Hasil Proses Simpan Data File Download ……… 53 Gambar 2.16 Tampilan Halaman Daftar Download …………………….. 55 Gambar 2.17 Tampilan Halaman Form Pendaftaran User ………………. 61

4

Gambar 2.18 Tampilan Hasil Proses Simpan Data User ………………... 67 Gambar 2.19 Tampilan Halaman Form User Login …………………….

70

5

DAFTAR TABEL Tabel 2.1 Struktur Tabel tbdatateman ………………………………….

11

Tabel 2.2 Struktur Tabel tbuser ………………………………………...

12

Tabel 2.3 Struktur Tabel download …………………………………….

13

6

BAB 1 ANALISIS KEBUTUHAN A. Kebutuhan Perangkat Keras Komputer/laptop yang kami gunakan dalam pembuatan web database sederhana ini memiliki spesifikasi sebagai berikut: TOSHIBA Satellite C40-A  Prosesor: Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz 2.39GHz

 Sistem operasi: Windows 7 Ultimate Service Pack 1

 Kapasitas Harddisk: 500 GB

 RAM: 4,00 GB

 Tipe sistem: Sistem Operasi 64-bit

B. Kebutuhan Perangkat Lunak Perangkat lunak yang dibutuhkan yaitu sebagai berikut: a) Aplikasi web developer tools, yaitu: Notepad, Wordpad, Editplus, Ultraedit, Microsoft Frontpage, Adobe Dreamweaver dsb. Aplikasi web developer tools yang kami gunakan adalah Adobe Dreamweaver CS6.

Gambar 1.1 Tampilan Adobe Dreameaver CS6

7

b) Aplikasi web server, yaitu: Lite Speed, Lighttpd, Nginx,

Apache dsb.

Aplikasi Web server yang kami gunakan adalah Apache, yang telah termasuk dalam program aplikasi XAMPP.

Gambar 1.2 Tampilan XAMPP

c) Aplikasi DBMS (Database Management System), yaitu: MySql, Postgresql, Microsoft Access, Oracle, Firebird, Sybase dsb. Aplikasi DBMS yang kami gunakan adalah MySql dan phpMyAdmin, yang telah termasuk dalam aplikasi XAMPP.

Gambar 1.3 Tampilan MySql

8

Gambar 1.4 Tampilan phpMyAdmin d)

Aplikasi web browser, yaitu: Mozilla Firefox, Google Chrome, Opera, UC Browser dsb. Aplikasi web browser yang kami gunakan adalah Mozilla Firefox.

Gambar 1.5 Tampilan Mozilla Firefox

9

BAB 2 PERANCANGAN A. Perancangan Tabel 1.

Membuat Database Membuat database baru pada MySQL melalui phpMyAdmin, dilakukan

dengan cara seperti dibawah ini:

Gambar 2.1 Membuat Database Melalui phpmyadmin

Buat database baru dengan nama “latihan_db” atau yang lain. Klik tombol Create untuk memastikan membuat database yang baru. 2.

Membuat Tabel Membuat tabel baru pada MySQL melalui phpMyAdmin, dilakukan dengan

cara, seperti dibawah ini:

Gambar 2.2 Membuat Tabel Melalui phpmyadmin

Setelah menentukan nama tabel dan banyak field yang digunakan, klik tombol GO untuk lanjut menentukan struktur tabel yang akan dibuat.

10

Gambar 2.3 Menentukan Struktur Tabel

Kemudian klik tombol Save untuk menyimpan tabel dengan struktur yang telah ditentukan. Dalam perancangan database ini, kami membuat 3 tabel yaitu sebagai berikut: a) Tabel tbdatateman Tabel ini dibuat untuk menyimpan data dari input_dt.php dan simpan_dt.php. Tabel tbdatateman dibuat dengan struktur sebagai berikut: No.

Auto Nama

Tipe

Panjang

Atribut

Null

Indeks Increment

1.

id

2.

Int

4

UNSIGNED

No

Primary Key

Yes

50

-

No

-

No

20

-

No

-

No

Varcha namateman r

3.

Varcha tempat r

4.

tanggallahir

Date

-

-

No

-

No

5.

alamat

varchar

200

-

No

-

No

6.

kota

varchar

50

-

No

-

No

7.

nohp

varchar

15

-

No

-

No

8.

notelp

varchar

15

-

No

-

No

Tabel 2.1 Struktur Tabel tbdatateman

11

Berikut ini tampilan dari tabel tbdatateman yang telah berhasil disimpan:

Gambar 2.4 Tampilan Tabel tbdatateman

b) Tabel tbuser Tabel

ini

dibuat

untuk

menyimpan

data

dari

reguser.php

dan

savedatauser.php. Tabel tbuser dibuat dengan struktur sebagai berikut:

No.

Nama

Tipe

Panjang

Atribut

Null

Indeks

Auto Increment

1.

iduser

int

4

UNSIGNED

No

Primary Key

Yes

2.

nama_depan

varchar

30

-

No

-

No

3.

nama_belakang

varchar

30

-

No

-

No

4.

jk

varchar

10

-

No

-

No

5.

email

varchar

50

-

No

-

No

6.

no_hp

varchar

15

-

No

-

No

7.

username

varchar

30

-

No

-

No

8.

password

varchar

200

-

No

-

No

Tabel 2.2 Struktur Tabel tbuser

12

Berikut ini tampilan dari tabel tbuser yang telah berhasil disimpan:

Gambar 2.5 Tampilan Tabel tbuser

c) Tabel download Tabel ini dibuat untuk menyimpan data dari addlistdownload.php dan savelistdownload.php. Tabel download dibuat dengan struktur sebagai berikut:

No.

Nama

Tipe

Panjang

Atribut

Null

Indeks

Auto Increment

1.

id

Int

3

UNSIGNED

No

Primary Key

Yes

2.

deskripsi

varchar

100

-

No

-

No

3.

namafile

varchar

100

-

No

-

No

Tabel 2.3 Struktur Tabel download

Berikut ini tampilan dari tabel download yang telah berhasil disimpan:

Gambar 2.6 Tampilan Tabel download

13

B. Perancangan Sistem Berikut akan kami jabarkan langkah-langkah dalam penerapan aplikasi database berbasis web sederhana dengan menggunakan database dan tabel yang telah dibuat sebelumnya. 1.

Membuat File Koneksi Database Setiap halaman web yang menggunakan database dan table, haruslah

terhubung dengan database. Supaya penulisan koneksi database tidak berulangulang. Kami membuat satu buah file koneksi yang nantinya akan digunakan pada halaman web dengan mudah. Berikut script koneksi database seperti dibawah ini:

Simpanlah dengan nama: koneksidb.php, dalam folder c:\XAMPP\htdocs \bikinweb.

14

2.

Membuat File CSS File CSS digunakan untuk mempercantik tampilan web, dan juga untuk

mempermudah pengaturan tampilan halaman web. Berikut script CSS yang kami buat seperti dibawah ini: a { color: #009; text-decoration: underline; } a:hover { color: #009; text-decoration: blink; } TD { color: #009; FONT-SIZE: 20px; font-family: "tekton pro"; font-style: oblique; }

15

Simpanlah dengan nama: style.css, dalam folder c:\XAMPP\htdocs \bikinweb. 3.

Membuat Layout Halaman Web Layout digunakan untuk mempermudah pengaturan tampilan halaman web.

Layout web dasar terdiri dari header, navigation, sidebar, content dan footer. Berikut script Layout yang kami buat seperti dibawah ini:

Layout Dasar Dokumen Web



Simpanlah dengan nama: layout.html, dalam folder c:\XAMPP\htdocs \bikinweb. 4.

Membuat Halaman Beranda Halaman beranda merupakan halaman awal dalam web database sederhana

yang kami buat. Pada halaman ini terdapat menu-menu yang menghubungkan halaman beranda dengan halaman lain yang kami sediakan, yaitu lihat data teman, input data teman, upload file, daftar download, tambah daftar download dan log out, namun baru bisa diakses ketika semua script-nya telah selesai dibuat. Berikut script halaman beranda yang kami buat seperti dibawah ini:

beranda

19



BERANDA

TUGAS BESAR PEMROGRAMAN WEB I ~ Pembuatan Web Sederhana ~ ARSIH ILYAS

(16621046)

ENOS FONATABA

(16621023)

R.R.RACHASIWI SUPRAYOGI

(16621016)

Lihat

Data

SIZE=4>Input

Data

Teman ...