membangun aplikasi web input, edit, dan hapus … · desain halaman home.php menggunakan fasilitas...

6
MEMBANGUN APLIKASI WEB INPUT, EDIT, DAN HAPUS MENGGUNAKAN DREAMWEAVER CS 3, PHP, & MYSQL 1. Persiapan Awal Sebelum memulai membangun sebuah aplikasi web, maka perlu dipersiapkan perangkat aplikasi pendukungnya. Diantaranya adalah aplikasi browser, webserver, dan aplikasi desain web nya. Disini penulis menggunakan aplikasi Google Chrome, Xampp versi 1.6.6a, dan Dreamweaver CS 3 untuk aplikasi pendukungnya. Jika belum ada, bisa di download di internet secara gratis. 2. Membuat Database Silahkan buka google chrome lalu ketikan localhost di addres bar lalu enter. Lihat gambar Maka akan tampil Lalu klik phpMyadmin Buat databasenya, misalnya dengan nama kampus_db lalu create Setelah membuat database, selanjutnya membuat table. Dibawah ini rancangan struktur table nya. 1

Upload: vuongdung

Post on 04-Apr-2019

272 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: MEMBANGUN APLIKASI WEB INPUT, EDIT, DAN HAPUS … · Desain halaman home.php menggunakan fasilitas table, dan mengatur backroud colornya. Jangan lupa di simpan kembali. Buat lagi

MEMBANGUN APLIKASI WEB INPUT, EDIT, DAN HAPUSMENGGUNAKAN DREAMWEAVER CS 3, PHP, & MYSQL

1. Persiapan AwalSebelum memulai membangun sebuah aplikasi web, maka perlu dipersiapkanperangkat aplikasi pendukungnya. Diantaranya adalah aplikasi browser,webserver, dan aplikasi desain web nya. Disini penulis menggunakan aplikasiGoogle Chrome, Xampp versi 1.6.6a, dan Dreamweaver CS 3 untuk aplikasipendukungnya. Jika belum ada, bisa di download di internet secara gratis.

2. Membuat DatabaseSilahkan buka google chrome lalu ketikan localhost di addres bar lalu enter.Lihat gambar

Maka akan tampil

Lalu klik phpMyadmin

Buat databasenya, misalnya dengan nama kampus_db lalu create

Setelah membuat database, selanjutnya membuat table. Dibawah ini rancanganstruktur table nya.

1

Page 2: MEMBANGUN APLIKASI WEB INPUT, EDIT, DAN HAPUS … · Desain halaman home.php menggunakan fasilitas table, dan mengatur backroud colornya. Jangan lupa di simpan kembali. Buat lagi

tbl_adminFiel name Type dan Panjang Keterangan

id Int(2) Nomor id admin(primary key, index)

user Varchar(20)password Varchar(10)

tbl_mahasiswaFiel name Type dan Panjang Keterangan

nim Varchar(12) Nomor id admin(primary key, index)

nama_mhs text(100)jns_klm text(20)ttl varchar(50)jurusan text(100)alamat varchar(200)

Buatlah table sesuai dengan struktur table di atas. Lihat gambar

Lalu klik go

Jangan lupa di Fiel Id dirubah menjadi Primary dam di Extra di atur menjadiauto_increment lalu save.Gambar table yang sudah dibuat.

Buatlah table mahasiswa seperti pembuatan table admin. Setelah selesaimembuat table semuanya, isikan data ke table admin demgan klik insert:id : 01user : admin01Password : admin01

2

3

Page 3: MEMBANGUN APLIKASI WEB INPUT, EDIT, DAN HAPUS … · Desain halaman home.php menggunakan fasilitas table, dan mengatur backroud colornya. Jangan lupa di simpan kembali. Buat lagi

3. Pembuatan SitusSebelum pembuatan siuts, buka folder Xampp -> htdocs, buatlah folderdengan nama kampus dan buatlah folder images di folder kampus. Jikas sudahmembuat folder, buka aplikasi Dreamweaver CS 3. Ikuti perintah di bawah ini :Klik Site -> New Site

Klik Advance dan atur pengaturannya (lihat gambar)Pengaturan Local Info

Pengaturan Remote Info

4

5

Page 4: MEMBANGUN APLIKASI WEB INPUT, EDIT, DAN HAPUS … · Desain halaman home.php menggunakan fasilitas table, dan mengatur backroud colornya. Jangan lupa di simpan kembali. Buat lagi

Pengaturan Testing Server

Setelah semuanya sudah di atur lalu kik ok.

4. Pembuatan Halaman WebBuat halaman php dengan mengklik ikon php

Klik Page Properties untuk pengaturan huruf, backround, link dan lain-lain

6

7

Page 5: MEMBANGUN APLIKASI WEB INPUT, EDIT, DAN HAPUS … · Desain halaman home.php menggunakan fasilitas table, dan mengatur backroud colornya. Jangan lupa di simpan kembali. Buat lagi

Klik ok lalu simpan dengan nama index.php di folder kampus. Lalu buat halamanhome.php dengan cara save as dari halaman index.php dan buat desainhalamannya.

Desain halaman home.php menggunakan fasilitas table, dan mengatur backroudcolornya.

Jangan lupa di simpan kembali. Buat lagi halaman input.php dengan cara save asdari halaman home.php.Desain halaman input.php di awali dengan memasukan form dan diberi namamahasiswa, kemudian menyisipkan table ke dalam form sesuai dengan gambar.Hapus dulu desain daftar mahasiswa.

Text FieldRadio Group8

9

Page 6: MEMBANGUN APLIKASI WEB INPUT, EDIT, DAN HAPUS … · Desain halaman home.php menggunakan fasilitas table, dan mengatur backroud colornya. Jangan lupa di simpan kembali. Buat lagi

Pembuatan Radio Group

List / Menu Text Area

10