WP2

Pertemuan 1
Web Programming II
Software yang digunakan : Macromedia
Dreamweaver 8 & XAMPP
Mata kuliah : Web Programming II
Semester : VI
Jurusan : Manajemen Informatika
Sks : 4sks
CAPAIAN PEMBELAJARAN : Mampu menggunakan
aplikasi Dreamweaver dan memahami bahasa
pemrograman web dan logika pemrograman dengan
baik.
Dapat membuat project web secara lengkap dengan
menggunakan semua materi yang telah diberikan seperti
contoh berikut : Project Penjualan
Pencapaian Pembelajaran Web
Programming II
KONTRAK PERKULIAHAN
Pertemuan 1-12 dilakukan dengan penyampaian materi
kepada mahasiswa secara teori dan praktek
Pertemuan 13 diadakan QUIZ / review materi
Pertemuan 14- 15 UTS
Pertemuan 16-25 dilakukan dengan penyampaian materi
kepada mahasiswa secara teori dan praktek
Pertemuan 26 diadakan QUIZ / review materi
Pertemuan 27-28 UAS
Pertemuan
ke-
Pokok Bahasan Keterangan
1 Pengenalan mysql
2 Pengenalan database dengan mysql
3 Mengenal Dreamweaver
4 Scipt php dalam dreamweaver
5 Form
6 Tabel dan modifikasi tabel
7 Koneksi Database
8 Studi Kasus I Database Penjualan dan Tabel
9 Studi Kasus II Membuat Form Produk
10 Modifikasi Form katalog Produk
11 Studi Kasus III Membuat form login
12 Membuat form login Lanjutan
13 Review / Quiz Dilakukan pada
pertemuan
terakhir
sebelum UTS
Teori
14 Ujian Tengah Semester (UTS) Mata Kuliah Praktikum
Pertemuan
ke-
Pokok Bahasan Keterangan
15 Ujian Tengah Semester (UTS) Mata Kuliah Teori
16 Studi Kasus IV Membuat form Penjualan
17 Modifikasi Form Penjualan I
18 Modifikasi Form Penjualan II
19 Merancang Web Penjualan
20 Merancang Web Penjualan Lanjutan
21 Hosting web
22 Studi Kasus (Merancang Web)
23 Studi Kasus Lanjutan I
24 Studi Kasus Lanjutan 2
25 Studi Kasus Lanjutan 3
26 Review / Quiz
27 Ujian Akhir Semester (UAS) Mata Kuliah Praktikum
Dilakukan pada
pertemuan
terakhir
sebelum UAS
Teori
28 Ujian Akhir Semester (UAS) Mata Kuliah Teori
Pengenalan MySQL
MySQL adalah sebuah server database open source yang kayaknya paling populer
keberadaannya. MySQL umumnya digunakan bersamaan dengan skrip PHP untuk
membuat aplikasi server yang dinamis dan powerful. Sebuah database adalah
sebuah struktur yang umumnya dikategorikan dalam 2 hal: Sebuah database flat
dan sebuah database relasional. Database relasional lebih disukai karena lebih
masuk akal dibandingkan database flat. MySQL adalah sebuah database relasional.
Menjalankan MySQL
- Masuklah pada jendela Command
Propmt atau DOS Prompt, atau dapat
dari jendela Run, jalankan perintah
”cmd” atau ”command” atau ”cmd.exe”
pada kolom masukan.
- Setelah masuk ke dalam halaman
Command Prompt, keluarlah dari folder
aktif user anda, sehingga anda sekarang
bearada pada drive C utama. Perintah
yang digunakan adalah ”CD\” tanpa
tanda petik.
Database
Database di dalam MySQL adalah sekumpulan
tabel-tabel. Perintah membuat database adalah
create database nama_database;
Sebagai contoh, kita akan membuat sebuah
database dengan nama coba
Mysql> create database coba;
Selanjutnya lihatlah database yang telah anda
buat. Dengan mengetikkan perintah :
Mysql> show databases;
Tabel
Setelah membuat database, kemudian membuat tabel. Perintah
membuat table adalah
create table nama_tabel(nama_field);
Sebelum membuat tabel, kita aktifkan terlebih dahulu database yang
akan digunakan. Perintah adalah
use nama_database;
Mysql>use coba;
Sebagai contoh, kita akan membuat sebuah table di dalam database
coba. Nama tabelnya adalah anggota.
Pembuatan Tabel Anggota
Mysql>create table anggota(user_id varchar(30) not null, nama varchar(30) not
null, alamat varchar(100) not null, primary key (user_id));
PERTEMUAN 2
Database dengan PHPMyAdmin
Database dengan PHPMyAdmin
PhpMyAdmin adalah suatu program open sorce yang berbasis web yang dibuat
menggunkan aplikasi PHP. Program ini digunakan untuk mengakses database
MySQL. Program ini mempermudah dan mempersingkat kerja kita. Dengan
kelebihannya, para pengguna tidak harus paham sintax-sintax SQL dalam
pembuatan database dan tabel.
Database dengan PHPMyAdmin
Sebelum membuat database, terlebih dahulu masuk kedalam menu
utama dari PhpMyAdmin, yaitu dengan ketik alamat
http://localhost/phpmyadmin pada browser. Akan muncul halaman
utama PhpMyAdmin. Lihat gambar dibawah ini:
Setelah mucul halaman index PhpMyAdmin, berikut langkah – langkah
dalam membuat database di PhpMyAdmin :
Untuk membuat database baru, Anda dapat menuliskannya ke dalam field
edit di bawah tulisan Create new database (Lihat Gambar). Misalkan Anda
ingin membuat suatu database buku, maka tuliskan buku kemudian Create.
Setelah Anda memasukan nama database buku, Create maka
database dengan nama buku akan terbuat. Lihat pada gambar di
bawah ini.
Database dengan PHPMyAdmin
Sebelum membuat database, terlebih dahulu masuk kedalam menu
utama dari PhpMyAdmin, yaitu dengan ketik alamat
http://localhost/phpmyadmin pada browser. Akan muncul halaman
utama PhpMyAdmin. Lihat gambar dibawah ini:
Setelah mucul halaman index PhpMyAdmin, berikut langkah – langkah
dalam membuat database di PhpMyAdmin :
Untuk membuat database baru, Anda dapat menuliskannya ke dalam field
edit di bawah tulisan Create new database (Lihat Gambar). Misalkan Anda
ingin membuat suatu database buku, maka tuliskan buku kemudian Create.
Setelah Anda memasukan nama database buku, Create maka
database dengan nama buku akan terbuat. Lihat pada gambar di
bawah ini.
Perintah membuat table
Setelah membuat database kemudian membuat tabel yang diperlukan di dalam
database buku. Berikut langkah – langkah dalam pembuatan tabel:
Setiap dalam pembuatan tabel Anda masukan nama tabelnya terlebih dahulu
kemudian masukan jumlah field yang diperlukan contoh dalam pembuatan tabel
buku tamu. Anda buat tabel dengan cara menuliskan anggota pada name dan
jumlah field =4pada field, kemudian klik Go jika sudah selesai.
Selanjutnya, Anda dapat mengisikan field apa saja yang akan Anda
gunakan pada tabel buku tamu. Sebagai contoh, kita menggunakan field
buku tamu seperti tabel pada gambar dibawah ini :
Apabila ada penambahan field dari field yang telah ditentukan sebelumnya isikan
jumlah field penambahannya di kotak isian disebelah tombol save. Kemudian klik
tombol Go. Isikan field penambahannya kemudian klik tombol save. Jika tidak ada
penambahan field langsung klik tombol save, sehingga tampil hasil pembuatan
tabel seperti gambar dibawah ini:
Menambahkan Field
Selanjutnya, untuk membuat beberapa
tabel yang diperlukan Anda dapat
mencobanya seperti langkah 1 sampai
langkah 3.
Pertemuan 3
Mengenal
Dreamweaver
Pengertian Dreamweaver
Dreamwweaver MX (MX 6, MX 7, MX 2004 dan MX 8) adalah suatu
bentuk program editor web yang dibuat oleh Macromedia dengan
alamat Web site www.macromedia.com. Dengan menggunakan
program ini, seorang programmer web dapat dengan mudah membuat
dan mendesain webnya, karena bersifat WYSIWYG (What You See Is
What You Get).
Halaman Utama
Dreamweaver
Mengenal Bagian
Dreamweaver
Sebelum mempelajari tool bar dan pembuatan aplikasi web baik statis
maupun dinamis, ada baiknya dengan mengenal halam kerja yang
disediakan oleh Dreamweaver, terutama versi 8
Halaman Kerja
Dreamweaver
Kemudahan yang disediakan oleh editor Dreamweaver adalah
dengan ketersediaan dua buah halaman yaitu halaman kode dan
halaman desain.
Properti Pengaturan
Data Objek
Untuk mengaktifkan halaman atau jendela properties dapat melaui menu
Windows Properties. Jendela properti akan ditampilkan pada halaman desain
bagian bawah. Secara standar jendela Properties akan ditampilkan untuk
mendukung data teks, berikut tampilannya:
Gambar properti di atas akan selalu berubah saat mengaktifkan objek web
yang berbeda. Untuk membuktikannya, cobalah untuk melihat perubahan
saat mengaktifkan komponen table, komponen form dan semua komponen
yang didukung oleh Dreamweaver MX atau 8. Berikut adalah contoh
perubahan ikon saat objek tabel diaktifkan.
Tools dalam dreamweaver
Untuk mengaktifkan tool bar dapat melalui menu Windows Insert. Bentuk –
bentuk komponen yang disediakan untuk membantu dalam menggunakan objek
web seperti frame, form, dan tabel. Komponen tersebut dikelompokkan dalam
deretan Panel Ikon/ Menu Ikon/ Tool Bar yang berada pada barisan menu bagian
atas. Untuk menampilkannya dapat dengan cara mengklik dropt list yang ada di
bawah menu File. Lihat gambar berikut:
Mengenal Tool Bar Common

Mengenal Tool Bar Layout

Mengenal Tool Bar Frame
Frame digunakan untuk membuat halaman web yang terlihat
terbelah menjadi beberapa bagian, dalam pembuatannya
Dreamweaver MX & Dreamweaver 8 ini telah memberikan
pengelompokkan yang menjadi satu dalam tool bar Layout.
Berikut adalah gambarnya:
Mengenal Tool Bar Form
Dalam Dreamweaver Anda dapat dengan mudah
mengimplementasikan bentuk – bentuk formulir manual ke dalam
formulir yang beruba website aplikasi. Perhatikan gambar tool bar
Form berikut:

Mengenal Tool Bar Text
Tool Bar Text digunakan untuk memformat teks yang ada di dalam halaman
desain serta untuk membuat heading dan karakter khusus. Untuk
mempermudah dalam mendesain, Dreamweaver menyediakan sekumpulan
ikon pengaturan teks yang tergabung dalam tool baru Text seperti gambar
berikut:

Mengenal Tool Bar PHP
Fungsi dari tool bar PHP adalah membantu dalam menuliskan
beberapa kode PHP

Script html sederhana dalam
dreamweaver
Script html sederahana yang akan digunakan adalah, bagaimana cara
membuat table.
1. Dengan menggunakan editor Dreamweaver, buatlah halaman baru
menggunakan tipe HTML.
2. Pada halaman desain, tambahkan objek table ), dengan ketentuan
berikut
3. Setelah table dibuat, desainlah kerangka table tersebut sebagai
berikut:
File di atas simpan
C:\xampp\htdocs\nim\coba.html.
PERTEMUAN 4
Skrip php dalam Dreamweaver
Pengenalan Skrip PHP
Jika diartikan, sebenarnya PHP memiliki beberapa pandangan dalam
mengartikannya, akan tetapi kurang lebih PHP dapat kita ambil arti sebagai
PHP; Hypertext Preeprocesor. Ini merupakan bahasa yang hanya dapat
berjalan pada server dan hasilnya dapat di tampilkan pada Client.
PHP adalah produk Open Source yang dapat digunakan secara gratis tanpa
harus membayar untuk menggunakannya. PHP merupakan bahasa program
yang berbentuk skrip yang diletakkan di dalam server web. Jika kita lihat dari
sejarah mulanya PHP diciptakan dari ide Ramus Lerdof untuk kebutuhan
pribadinya, skrip tersebut sebenarnya di maksudkan untuk digunakan sebagai
keperluan membuat Web site pribadi, akan tetapi kemudian dikembangkan
lagi sehingga menjadi sebuah bahasa yang disebut “Personal Home Page”.
Teknik Menuliskan Skrip
Dalam membuat program PHP, maka yang dibutuhkan adalah memulai
dengan start tag dan end tag, yaitu perintah awal dan perintah akhir. Ada
beberapa cara bagaimana untuk menuliskan start tag dan end tag:
<? Skrip PHP Anda letakkan disini ?>
<?php Skrip PHP Anda letakkan disini ?>
<% Skrip PHP Anda letakkan disini %>
<SCRIPT language=”php”> Skrip PHP Anda letakkan disini </SCRIPT>
Kriteria Penulisan Skrip PHP
1. Setiap halaman yang mengandung skrip PHP harus disimpan
dengan Ekstensi PHP sesuai dengan program PHP yang
mendukungnya, contoh: nama_file.php
2. Setiap skrip PHP harus didahului dengan pembuka PHP (<?php,
dll) dan kemudian diakhiri dengan penutup (?>).
3. Setiap baris skrip isi harus didahului pernyataan cetak. Didalam
PHP pernyataan cetak dibedakan menjadi dua yaitu print dan
echo, adapun criteria penulisannya sebagai berikut:
printf (“ Isi data ”);
printf ( isi data );
echo “ isi data “;
echo isi data
4. Setiap akhir baris di akhiri dengan titik koma (;). Misalkan kita akan
menuliskan ”AMIK Bina Sarana Informatika”, maka perintah yang harus
ditulis adalah :
<?
echo "AMIK Bina Sarana Informatika";
?>
5. Semua bentuk variabel harus diawali tanda dolar ($). Sebagai contoh kita
akan menuliskan perintah nama sebagai variabel yang isinya AMIK Bina
Sarana Informatika
<?php
$nama = ”AMIK Bina Sarana Informatika”;
echo ”Nama saya adalah $nama”;
?>
6. Penulisan keterangan didahului dengan tanda pembuka (/*) dan diakhiri
tanda (*/). Contoh penulisan memberikan keterangan pada skrip:
<?php
/* untuk menuliskan komentar yang informasinya sangat banyak atau berbentuk
kalimat panjang */
echo ”Nama saya AMIK Bina Sarana Informatika”;
?>
Selain menggunakan tanda (/*), penulisan komentar juga dapat menggunakan
tanda slash ganda (//), tanda ini hanya digunakan untuk menuliskan pesan yang
informasinya satu baris saja.
<?php
//untuk menuliskan komentar satu baris
echo ”Nama saya AMIK Bina Sarana Informatika”;
?>
7. Skrip HTML yang akan digabungkan dalam skrip PHP harus menghilangkan
tanda petik ganda (”) dan dapat digantikan dengan tanda petik tunggalm (’)
atau menghilangkannya. Contoh jika ingin memberi warna background pada
halaman web, maka perintah yang digunakan dalam HTML adalah <BODY
bgcolor=”#009966”>, kemudian jika diletakkan dalam program PHP, maka
skrip tersebut menjadi <BODY bgcolor=#009966>. Contoh:
<?php
echo ”<BODY bgcolor=#009966>”;
echo ”Halo apa kabar?”;
?>
Pemakaian perintah echo
Perintah echo digunakan untuk menampilkan data ke dalam browser. Berikut 3
teknik menggunakan perintah ini:
Teknik 1:
Dalam program PHP, untuk menapilkan data string ke dalam halaman editor
Anda harus mengapit data tersebut dengan tanda petik ganda (”).
<?php
echo ”data string”;
?>
Teknik 2:
Kemudian apabila hendak menuliskan data integer maupun operasi, Anda
dapat langsung menuliskan nilai atau operasinya. Berikut caranya:
<?php
echo 4;
echo 4 * 5;
?>
Teknik 3:
Sedangkan apabila hendak menggunakan tag-tag HTML, maka Anda harus
menyertakan tag tersebut di dalam karakter petik ganda (”tag html”).
Contohnya:
<?php
echo ”<br>”;
echo ”<h1> heading 1 </h1>;
?>
Penggabungan Operasi
Angka dan Teks
Apabila hendak menampilkan data hasil dari operasi, maka Anda tidak perlu
menggunakan parameter petik ganda. Data atau operasinya harus
dikeluarkan, kemudian apabila hendak menggabungkan dapat menggunakan
parameter ganda dan titk (”.) atau titik dan petik ganda (.”). Contohnya:
<?php
echo ”Perkalian antara 4 * & = ”. 4 * 8;
echo ”<br>”;
echo 12/2 .” hasilnya pasti = 2 x 3”;
?>
Bekerja dengan teks heading
Dalam penulisan suatu paragrap dalam kode HTML sebenarnya telah ada
tag khusus untuk memberikan macam - macam ukuran dari judul
paragraph tersebut. Disebut dengan text heading. Berikut skrip lengkapnya
dari text heading:
PERTEMUAN 5
Form
Perancangan Awal Form dengan
Tabel
Seperti yang dijelaskan sebelumnya, bahwa kita akan menggunakan table
sebagai kerangka peletakkan form.
1. Pertama kali Anda dapat membuka halaman kerja baru pada editor
Dreamweaver, kemudian mengaktifkan halaman dasar HTML.
2. Tambahkan objek Form ( ), atau melalui menu Insert Form Form.
Maka pada halaman kerja akan tampak bentuk persegi dengan garis
merah putus – putus seperti gambar berikut :
3. Setelah objek Form terbentuk, Anda harus memasukkan alamat hyperlink
yang menjadi target eksekusi data saat tombol Submit diklik.
Pengaturannya dapat menggunakan jendela Properties, berikut adalah
contohnya:
Dari bentuk properties di atas dapat dijelaskan bagiannya sebagai
berikut:
Form Name : digunakan untuk memberikan nama pengenal
form, dalam hal ini dapat dikatakan sebagai variabel form.
Action : digunakan untuk memberikan pengalamatan file
program eksekusi pada saat tombol Submit diklik.
Method : adalah metode pengiriman file dari form, apabila
Anda berkeinginan mengirimkan data dari satu form ke dalam
halaman eksekusi Anda harus menggunakan Metode POST.
Target : digunakan untuk menentukan jenis halaman
eksekusi, yaitu pakah ingin menggunakan jendela Browser atau jendela
baru (_blank).
4. Saat posisi kursor masih di dalam area kotak bergaris putus – putus
(form) tersebut, kemudian buatlah tabel dengan jumlah kolom
sebanyak 2 dan baris disesuaikan dengan kebutuhan. Sehingga
hasilnya akan tampak seperti gambar berikut:
Menggunakan Objek Text Field
Objek Text Field adalah objek form yang digunakan untuk
memasukkan data yang tidak terlalu banyak. Untuk lebih
jelasnya perhatikan cara memasukannya:
1. Pertama kali Anda dapat dapat membuka halaman
kerja baru pada editor Dreamweaver, kemudian
memilih jenis halaman dasar HTML.
2. Masukan objek Form ( ) ke dalam proyek kerja Anda
melalui Insert Form Form
3. Buatlah tabel di dalam objek Form yang telah terbuat
dengan kolom berjumlah 2 dan 5 baris.
4. Aturlah tata letak dan judul tabel, sehingga desain
tabel akan tampak seperti gambar berikut:
5. Dari tool bar Forms, Anda dapat memasukkan Objek Text Field yang
ditandai dengan ikon atau dari menu Insert Form Text Field.
6. Setelah objek Text Field ( ) masuk dalam tabel, kliklah salah satu objek Text
Field tersebut untuk melakukan penyetingan pada jendela Properties.
Perhatikan gambar berikut:
Dari gambar di atas dapat dijelaskan :
TextField : digunakan untuk memberikan variable kepada objek yang telah
dimasukkan, secara standar objek ini akan diberi variable TextField1, TextField2, …
dan selanjutnya tergantung banyaknya objek di dalam form.
Max char : merupakan batasan data (maksimal karakter) yang dimasukkan ke dalam
Text Field.
Char width: merupakan lebar dari Text field yang tampak pada layar, lebar ini tidak
berpengaruh denga Max Char.
Single Line: Text Field secara standar akan dibentuk sebagai media input yang
bersifat single line, artinya Kita hanya dapat memasukkan data berupa satu baris data
saja. Sedangkan apabila memilih multiline Kita dapat memasukkan data lebih dari
satu baris.
Password: Bentuk ini biasanya digunakan untuk membuat media validasi berupa
masukkan data password, data yang dimasukkan dalam objek. Data karakter di sini
tidak dapat dilihat karena akan ditampilkan dalam bentuk enkrip seperti tanda binta
(*).
In Val: Kolom ini digunakan untuk memberi nilai isi, apabila ingin membuat formulir
masukkan data maka kolom ini boleh dikosongkan.
7. Untuk selanjutnya masukan objek Form dengan lengkap, berikut adalah
daftar objeknya.
8. Simpan Form tersebut pilih menu file save pilih drive C:\ pilih
xampp pilih htdocs buat folder baru dengan nama nim anda
buat folder baru dengan nama anggota nama file form_anggota.php.
Menggunakan Objek Hidden Field
Objek Hidden Field adalah sebuah objek form yang disembunyikan, penggunaan
objek ini sebenernya sama dengan Tex field, akan tetapi pada objek ini tidak dapat
digunakan untuk memasukan data. Untuk lebih jelasnya perhatikan langkah –
langkahnya:
1. Untuk memasukan objek ini dapat menggunakan ikon hidden field ( ) dari tool
bar Forms atau melalui menu Insert Form Hidden field.
2. Kemudian jendela properties akan ditampilkan. Untuk memberikan nilai data,
biasnya objek ini sangat berhubungan dengan kode program seperti PHP
maupun ASP.
Menggunakan Objek Text Area
Objek Text area merupakan objek form yang digunakan untuk memasukan data
teks dengan kapasitas besar. Biasanya digunakan untuk memasukan data pesan,
keterangan atau berita. Untuk lebih jelasnya berikut langkah – langkah
pembuatannya
1. Pertama buka Form anggota yang telah anda buat sebelumnya melalui menu
File Open masuk kedalam drive dimana file tersebut disimpan
form_anggota.php Open.
2. Dari tool bar Forms, Anda dapat memasukan objek Text Field yang ditandai
dengan ikon ( ) atau dari menu Insert Form Text Field.
3. Memasukan objek yang digunakan untuk memasukan data anggota,
gunakan objek Text Area ( ) atau melalui menu Insert Form Text
Area. Pengaturan kedua objek tersebut adalah
3. Untuk pengaturan objek Text Area, Anda dapat mengaktifkannya dengan
cara mengklik objek. Berikut adalah contoh pengaturan properti dan hasil
tampilan formnya.
4. Simpanlah objek tersebut, kemudian Anda dapat melihat hasil
pemakaian objek ini dengan menjalankannya, tekanlah F12 atau
Preview dari browser.
Menggunakan Objek Check Box
Check Box adalah salah satu komponen form yang difungsikan agar pengguna dapat
memilih menu yang tersedia dengan cara mengklik salah satu menu yang ada.
Perhatikan teknik pembuatannya:
1. Bukalah halaman kerja baru pada editor Dreamweaver, kemudian memilih jenis
halaman dasar HTML.
2. Masukan objek form kedalam proyek kerja Anda melalui Insert Form Form
atau menggunakan ikon Form ( )
3. Setelah Form dimasukan, tulislah di dalam area Form dengan bertuliskan
”Apakah hobi Anda?”
4. Selanjutnya masukanlah objek Check Box melalui tool bar Forms dengan
gambar ikon Check Box ( ), atau dapat melalui menu Insert Form
Check Box.
5. Masukanlah beberapa daftar hobi anda, diantaranya adalah
(memancing, berenang, makan, membaca komik, chatting, berkenalan)
serta tambahkan satu tombol pada bagian bawah. Sehingga kondisi form
Anda akan tampak seperti berikut:
6. Setiap objek Check box dibuat dalam satu form, apabila digunakan dalam satu
daftar data pilihan harus diberi nama variabel yang sama (Chhobi) kecuali
pada nilainya (Checked value) harus dibuat berbeda.
Menggunakan Objek Radio Button
Jika objek Check box akan mengijinkan Anda menggunakan pilihan lebih dari
satu, maka Radio Button tidak. Pada objek ini hanya akan mengijinkan Anda
untuk menentukan salah satu pilihan saja dan tidak boleh ada dua atau tiga
serta tidak boleh untuk tidak memilih. Dan hanya boleh memilih satu
pilihan, pemahaman ini sering disebut dengan Single Choice. Contoh
pemakaiannya adalah jenis kelamin, golongan darah, setuju atau tidak,
agama dan lain sebagainya:
1. Pertama buka Form anggota yang telah anda buat sebelumnya melalui
menu File Open masuk kedalam drive dimana file tersebut
disimpan form_anggota.php Open.
2. Tambahkan 2 objek Radio Button dari tool bar Forms dengan ikon ( ) atau
dapat diperoleh melalui menu Insert Form Radio Button.
3. Tuliskan keterangan Pria, Wanita, kemudian tambahkan satu tombol
melalui menu Insert Form Button. Hasilnya akan tampak seperti
gambar berikut:
4. Dari setiap objek pilihan yang dibuat, Anda dapat melakukan pengaturan
menggunakan jendela Properties. Berikut adalah contohnya:
5. Simpanlah objek tersebut, kemudian Anda dapat melihat hasil pemakaian
objek ini dengan menjalankannya, tekanlah F12 atau Preview dari browser.

Menggunakan Objek List Menu/ Drop List
Objek List Menu sama dengan ComboBox, yaitu bentuk pilihan yang hampir sama
dengan Radio Button, akan tetapi tampilannya berbeda. Objek ini juga hanya
mengijinkan untuk memilih salah satu dari anggota yang dimilikinya.
Sebagai latihan untuk mencoba membuat rancangan Daftar yang digunakan untuk
menampilkan daftar nama bulan, ikuti langkah – langkah berikut:
1. Bukalah halaman kerja baru pada editor Dreamweaver, kemudian pilih jenis
halaman dasar HTML.
2. Masukan objek form ke dalam proyek kerja Anda melalui Insert Form
Form atau menggunakan ikon Form ( ).
3. Setelah Form ditambahkan, tulislah di dalam area Form dengan bertuliskan ”Apakah
bulan lahir anda?”.
4. Selanjutnya tambahkan objek List Menu dari tool bar Forms dengan mengklik ikon ( ),
atau dapat diperoleh dari menu Insert Form List Menu. Sekarang kondisi Form
adalah :
5. Di dalam objek List Menu kita dapat memberikan nilai pilihan, yang dalam hal ini
adalah daftar bulan. Untuk mengisi nilai daftar bulan, Anda dapat menggunakan
jendela List Values.
6. Cara masuk pada jendela List Values, Anda dapat mengaktifkan objek List Menu,
kemudian klik tombol List Values ( ) yang ada pada jendela Properties.
Masuklah data daftar nama bulan dengan menekan tombol + ( ) dan
tanda– ( ) untuk menghapusnya, perhatikan gambar berikut:
8. Untuk pindah daftar Anda dapat menggunakan ikon panah atas
dan panah bawah. Masukan tombol Submit pada bagian bawah
setelah menu daftar. Jika telah selesai simpanlah kembali dan
tekan F12 untuk melihat hasilnya.
Menggunakan Objek File Field/ Media
Upload
Objek File Field digunakan untuk memasukkan data alamat file (path file)
untuk keperluan pengkopian file, istilah yang sering digunakan adalah Upload.
Untuk mencobanya Anda dapat mengikuti pilihan berikut:
1. Bukalah halaman kerja baru editor Dreamweaver, kemudian pilih jenis
pilihan halaman dasar HTML
2. Masukan objek form ke dalam lembar kerja Anda melalui Insert Form
Form atau menggunakan ikon Form ( ).
3. Setelah Form ditambahkan, tulislah di dalam area Form dengan bertuliskan
”Pengkopian file dengan Program PHP : ”.
4. Masukan objek File Field dari toolbar Forms dengan ikon ( ), atau dapat melalui
menu Insert Form File Field. Hasilnya adalah :
5. Pengaturan variabel dapat dilakukan dengan cara mengaktifkan objek
File Field tersebut, maka Anda akan melihat tampilan properti berikut:
Pada gambar di atas dapat dijelaskan:
File Field name : digunakan untuk mendefinisikan nama
variabel pada File Field.
Char width : digunakan untuk menentukan lebar objek.
Max char : digunakan untuk memberi batasan panjang
file data yang dimasukan, batasan ini berdasarkan jumlah karakter
alamat.
6. Simpanlah dengan nama formfile.php, untuk melihat hasilnya dapat
menekan F12 pada keyboard, maka akan tampak seperti gambar berikut:
7. Pada program ini menghasilkan kolom masukan yang berupa alamat file, untuk
mendapatkan data alamat dari file yang hendak di upload ke dalam web dapat
menggunakan tombol Browse ( ), sehingga akan muncul halaman
pengambilan file seperti gambar berikut:
8. Setelah selesai memilih file yang hendak di upload, maka Anda dapat
mengklik tombol OK. Saat ini Anda telah mendapatkan alamat lengkap
file yang dimasukan pada objek File field
PERTEMUAN 6
Tabel dan Modifikasi Tabel
Pembuatan Tabel
1. Bukalah halaman kerja baru dengan jenis halaman
Basic Pages, kemudian Anda dapat memilih tipe
HTML
2. Untuk membuat tabel, dapat menggunakan menu
Insert Table, selanjutnya akan tampil jendela
penentuan tabel
3. Setelah memilih menu tabel, maka Dreamweaver
akan menyediakan jendela khusus untuk
mendesain struktur tabel.
4. Kemudian tampil jendela tabel. Berikut penjelas dari bagian – bagian yang
diperlukan dalam pembuatan tabel :
Row : digunakan untuk menentukan banyaknya baris, yang perlu Anda
ketahui bahwa baris merupaka bagian kolom yang terbentang dari kiri ke kanan
(horisontal).
Coloumn : digunakan untuk menentukan banyaknya kolom pada tabel yang
dibuat, kolom merupakan bagian dari tabel dari atas ke bawah (vertikal).
Width : digunakan untuk menentukan seberapa besar panjang tabel,
gunakan 100 dalam persen (%) jika ingin tabel yang dibuat memenuhi halaman
web. Sedangkan apabila ingin membuat tabel dengan ukuran statis (tetap), maka
pengaturan lebar dapat menggunakan ukuran pixel (px), sehingga dengan
ukuran ini tabel tidak akan berubah saat ada perubahan ukuran pada browser.
Border : digunakan untuk menentukan tabel border, yang perlu Anda
ketahui bahwa border merupakan garis pinggir dan garis yang membatasi antar
sell (cell) data.
Cell Spadding : digunakan untuk menentukanan jarak anara karakter
teks maupun objek gambar yang ada di dalam tabel degan sisi border
tabel.
Cell Spacing : digunakan untuk menentukan lebar border tabel.
5. Tentukan kolom berjumlah 2 pada
bagian Columns dan baris berjumlah 3
pada bagian Rows, setelah selesai
Anda dapat menutup jendela desain
dengan mengklik tombol OK. Berikut
adalah hasilnya:
6. Setelah melalui tahap di atas, berarti
sekarang Anda telah memiliki tabel
yang telah siap untuk digunakan.
Cara kedua:
1. Selain menggunakan tabel dari menu Insert, Anda dapat mendesain tabel
secara cepat melalui ikon yang ada pada tool bar Common.
2. Apabila ingin menggunakan tool bar Common, maka aktifkanlah tool bar ini
melalui menu Window Insert. Dari menu tersebut Anda dapat
menggunakan ikon Tabel ( ).
Menambahkan Kolom dan Baris
1. Tempatkan kursor di tengah bagian tabel,
sehingga garis bantu akan ditampilkan di
bagian atas atau terkadang dibagian bawah.
2. Pilihlah salah satu panah yang menunjuk pada
kolom tertentu, dan selanjutnya klik tanda
panah tersebut, sehingga akan menampilkan
menu manipulasi sebagai berikut:
3. Selanjutnya pada tabel telah terjadi
penambahan kolom yang berada pada
bagian kanan tabel, perhatikan gambar
berikut:
Memblok dan Menseleksi Tabel
Blok Seluruh Tabel
Memblok seluruh tabel sama artinya dengan mengaktifkan tabel. Berikut
teknik dalam memblok seluruh tabel:
1. Untuk melakukan pengaktifan atau blok tabel dapat dilakukan dengan cara
mengklik salah satu garis tepi tabel (border).
2. Setelah Anda mendekatkan pointer pada sisi luar tabel, maka pada pointer
akan dikituti gambar persegi, kliklah pada saat pointer memiliki gambar
persegi tersebut, maka pada tabel akan aktif. Lihat gambar berikut:
Blok Pada Kolom Tabel
1. Apabila ingin memblok (menyeleksi) kolom atau beberapa kolom,
Anda dapat mulai melakukannya dari bagian atas dengan bentuk
pointer berbentuk panah kecil.
2. Setelah mendapatkan tanda panah ke bawah seperti gambar di atas,
kliklah mouse sebelah kiri, selanjutnya tabel akan berubah menjadi
dalam keadaan terblok. Perhatikan gambar berikut:
Blok Pada Baris Tabel
Setelah berhasil menyeleksi kolom, maka untuk melakukan seleksi baris juga
dapat dilakukan dengan cara yang sama seperti proses di atas.
1. Apabila ingin melakukan seleksi baris maka posisi pointer harus diletakkan
pada bagian kiri tabel.
2. Klik kiri dengan posisi pointer seperti gambar di atas, sehingga pada baris
ketiga dari tabel tersebut sekarang dalam keadaan terblok.
Penggunaan Properties Di Dalam Tabel
Menambahkan Kolom dan Baris
1. Untuk melakukan perubahan pada tabel, Anda
harus bersifat mengaktifkan (memblok) tabel
yang ada, dimana terdapat dua teknik blok.
2. Hampir sama dengan beberapa aplikasi yang
lain, bahwa untuk memblok tabel dapat
dilakukan dengan cara drop dan drag di atas
objek tersebut. Perhatikan gambar berikut:
3. Selanjutnya ubahlah struktur tabel tersebut dengan
mengganti jumlah baris (Rows) dan kolom (Cols) dari
jendela Properties, perhatikan contohnya:
Tata Letak dan Perataan Tabel
1. Mengaktifkan/ memblok terlebih dahulu tabel yang ingin diatur atau
dengan menempatkan kursor pada salah satu sel yang hendak diatur.
2. Kemudian pilih jenis perataan pada kolom Align yang ada di halaman
Properties.
Pengaturan Spacing dan Padding
Bagian Cell Space adalah ketebalan border luar dengan border
bagian dalam, dengan memasukkan nilai border yang besar maka
akan menyebabkan border tabel menjadi renggang dan tebal.
Sedangkan Cell Pad adalah jarak antara border dalam dengan teks,
sehingga apabila ingin membuat jarak objek data dalam tabel
dengan garis border, maka Anda harus memasukan nilai yang lebih
pada bagian Cell Pad. Untuk memperjelasnya Anda dapat
memperhatikan gambar berikut:
Pengaturan Cell Padding dan Cell Spacing dapat dilakukan dengan
menggunakan jendela Properties, syaratnya adalah posisi tabel harus
dalam keadaan terseleksi (terblok). Perhatikan tab untuk menentukan
nilai Cell Padding dan Cell Spacing.
Merge Cell Untuk Menggabungkan
Data
1. Tentukan terlebih dahulu cell mana saja yang
akan digabungkan. Sebagai latihan bloklah
dua buah cell yang ada seperti gambar
berikut:
2. Selain itu dapat juga menggunakan
gabungan antara baris dan untuk
menggabungkan dua bentuk cell dari
gambar di atas dapat menggunakan menu
Modify Table Merge Cell.
3. Selain dari menu modify, juga dapat
menggunakan ikon yang ada pada jendela
Properties yang bersimbol Merger . Untuk
lebih jelasnya perhatikan gambar berikut:
4. Setelah ikon Merger Cell diklik maka pada gambar table sekarang akan
terdapat penggabungan 2 sel yang menjadi satu cell, perhatikan gambar
berikut:
Hasil Merge
Spilt Cell Untuk Membagi Data
1. Untuk membagi salah satu cell menjadi beberapa
cell, letakkan kursor pada cell yang akan dipecah.
Sebagai contoh kita akan membagi cell yang telah
dimerger sebelumnya, maka letakkan kursor pada
cell yang telah dimerger.
2. Selanjutnya untuk memecahkan cell, dapat
menggunakan Menu Modify Table Split Cell.
3. Selain itu juga dapat menggunakan ikon Split ( )
yang ada pada jendela Properties, letaknya tepat di
sebelah kanan ikon Merger.
4. Dengan mengklik ikon Split ( ), maka akan
dihadapkan pada sebuah jedela yang menanyakan
berapa jumlah pecahannya. Perhatikan gambar
berikut:
Pada jendela di atas dapat dijelaskan seperti berikut:
Rows : Untuk menentukan bahwa
menginginkan membagi Cell tersebut dalam bentuk baris.
Coloumns : Untuk menentukan bahwa
menginginkan membagi Cell ke dalam bentuk kolom.
Numbered of Row : Adalah jumlah baris atau kolom yang
ingin ditambahkan pada Split Cell, sehingga pada Cell akan terbagi
menjadi beberapa kolom atau baris sebanyak data yang
dimasukkan pada isian ini.
5. Untuk latihan cobalah untuk memasukkan nilai 3 pada kolom Number
of Rows dan pilihlah Coloumn pada kolom Split Cell. Kliklah tombol
OK bila telah selesai. Maka hasilnya dapat dilihat seperti gambar
berikut:
6. Apabila pada jendela penentuan Split Cell memilih
Rows, maka hasilnya akan tampak seperti gambar
berikut:
Mengubah Ukuran Tabel
Anda juga dapat mengubah ukuran panjang dan lebar table dengan sangat
mudah. Cara standar yang dapat dilakukan adalah dengan memblok table
den mengubah nilai panjang pada jendela Properties. Selain itu, untuk
mengubah panjang maupun tinggi table, Anda dapat melakukannya dengan
cara menarik salah satu garis yang ada pada tepi, perhatikan gambar berikut:
Dan apabila ingin mengubah ukuran tinggi table atau Cell dapat
dilakukan dengan cara yang sama, perhatikan gambar berikut:
Membuat Tabel Di dalam Tabel
Di dalam table, Cell merupakan tempat untuk meletakkan berbagai objek
atau data. Data yang dapat dimasukkan dapat berupa gambar, teks, form
maupun table itu sendiri. Saat mendesain struktur web, Anda dapat
menambahkan lagi table baru di dalam Cell tabel sebelumnya. Berikut
adalah contohnya:
PERTEMUAN 7
Koneksi Database
Bentuk Umum:
mysql_connect(”server host”, ”user”,”password”)
Keterangan:
Server_host : adalah nama host server yang sedang digunakan.
User : hak akses user pada database server MySQL Anda.
Password : Password user pada database server MySQL Anda.
Contoh skrip koneksi.php
<?php
$koneksi=mysql_connect(“localhost”,”root”,”password”) or die
(“Gagal konek server”.mysql_error());
If($koneksi) {
echo “Koneksi berhasil”;
}
?>
Apabila koneksi berhasil, maka browser akan
menampilkan pesan keberhasilan seperti
gambar berikut:
Apabila gagal (tidak dapat koneksi pada
MySQL),maka pesan yang akan ditampilkan akan
tampak seperti gambar berikut:
Catatan : Untuk menggunakan user default, Anda dapat mengosongkan
username dan passwordnya. Atau username dan password harus disesuaikan
pada saat Anda menginstal xampp. Contohnya:
$koneksi=mysql_connect(“localhost”,””,””) or die (“Gagal koneksi
server”.mysql_error());
Mengaktifkan Database
Skrip koneksidb.php
<?php
$koneksi=mysql_connect(“localhost”,”root”,” ”)
or die (“Gagal konek server”.mysql_error());
If($koneksi) {
mysql_select_db(”buku”,$koneksi)
or die (”Database gagal dibuka”.mysql_error());
echo “Koneksi berhasil”;
}
?>
Keterangan skrip:
Pada listing program di atas, perintah yang digunakan untuk
mengaktifkan database adalah:
mysql_select_db(buku,$koneksi)
Kemudian untuk menampilkan pesan apabila terjadi kesalahan,
kita dapat meneruskannya dengan perintah”
or die (”Database gagal dibuka”.mysql_error());
Apabila proses aktifasi database gagal, maka parameter tersebut
akan ditampilkan pada layar. Perhatikan contoh tampilan
kesalahannya:
Sedangkan apabila proses koneksi database berhasil, maka dengan
memberikan perintah ”echo” Database berhasil dibuka ”;” akan ditampilkan
pada layar. Perhatikan hasilnya seperti gambar berikut:
Skrip dalam database
Menampilkan Isi Data dari Database
Penjelasan skrip:
Dengan menggunakan operator perulangan while, kita dapat mengeluarkan
seluruh baris data yang dihasilkan dari perintah SELECT. Hasil dari perintah
SELECT akan kita masukkan ke dalam variabel $data sebagai data array.
Bentuk Umum:
while ($data=mysql_fetch_array($permintaan)){
…
}
Dengan menggunakan teknik di atas, maka Anda dapat menampilkan data pada
array (saat ini bernama $data) pada layer dengan cara berikut:
while ($data=mysql_fetch_array($sql)){
echo “ID : $data[id_anggota]<br>”;
echo “Nama : $data[nm_anggota]<br>”;
echo”Alamat : $data[alamat]<br>”;
echo”Kelamin : “;
echo ($data[‘kelamin’]==”P”)?”Pria”:”Wanita”<br><hr>”;
}
Skrip:
echo ($data[‘kelamin’]==”P”)?”Pria”:”Wanita”;
Digunakan untuk menampilkan data kelamin. Dengan menggunakan struktur
kontrol data di atas, maka apabila data kelaminnya bernilai ”P”, maka dalam
browser Kita tampilkan dengan ”Pria” dan apabila bernilai ”W” akan Kita
tampilkan dengan ”Wanita”.
Skrip:
while ($data=mysql_fetch_array($sql)){
echo “ID : $data[id_anggota]<br>”;
echo “Nama : $data[nm_anggota]<br>”;
echo”Alamat : $data[alamat]<br>”;
echo”Kelamin : “;
echo ($data[‘kelamin’]==”P”)?”Pria”:”Wanita”<br><hr>”;
}
Sebelum ditampilkan, terlebih dahulu tabel yang berada di database
diisikan data. Perhatikan hasilnya seperti gambar berikut:
Membuat Program Masukan Data Anggota
1. Dengan menggunakan editor Dreamweaver, buatlah halaman baru
menggunakan tipe PHP.
2. Pada halaman desain, tambahkan objek Form ( ).
3. Masukkan alamat di dalam kolom Action yang ada pada jendela
properties dari objek Form, alamatnya ” masukansim.php”.
4. Pastikan kursor berada di dalam kalang objek formulir (garis
putus – putus merah), sekarang tambahkan objek Tabel ( ),
dengan ketentuan berikut:
5. Di dalam tabel yang telah di desain, tambahkan beberapa objek formulir
sesuai data pertanyaan yang akan dimasuki.
6. Dari desain formulir di atas, Anda dapat melihat definisi pengaturan setiap
objek form dengan melihat tabel berikut:
7. Simpan file di atas di C:\xampp\htdocs\nim\masukanform.php


Membuat Program Simpan Data Anggota
Membuat Program Hapus Data Anggota
1. Dengan menggunakan editor Dreamweaver, buatlah halaman baru
menggunakan tipe PHP.
2. Pastikan kursor berada di dalam kalang objek formulir (garis putus – putus
merah), sekarang tambahkan objek Tabel ( ), dengan ketentuan berikut:
3. menghasilkan kerangka tabel sebagai berikut:
4. Simpan file di atas di C:\xampp\htdocs\nim\tampilhapus.php




Membuat Program Ubah Data Anggota
menghasilkan kerangka tabel sebagai berikut:
Simpan file di atas di C:\xampp\htdocs\nim\ubahtampil.php
Ubahtampil.php

Ubahdata.php


Ubahsimpan.php
PERTEMUAN 8
Studi Kasus I Database Penjualan
dan Tabel
Buat Database baru : onlinetoko
Buat Tabel-tabel sbb :
Tabel admin
Tabel anggota
Tabel barang
Tabel pemesanan
Tabel pemesanan_detail
Tabel kantong
PERTEMUAN 9
Studi Kasus II Membuat Form Master
Skrip inc_koneksi.php:
<?
$host="localhost";
$username="root";
$password=“ ";
$databasename="onlinetoko";
$koneksi=mysql_connect($host,$username,$password) or die ("Data Base Error");
mysql_select_db($databasename,$koneksi);
?>
Lising di atas di simpan di
C:\xampp\htdocs\nim\onlinetoko\librari\inc_koneksi.php.
Membuat Form Barang
Di dalam tabel yang telah di desain, tambahkan beberapa objek
formulir sesuai data pertanyaan yang akan dimasuki.

Simpan file di atas di C:\xampp\htdocs\nim\onlinetoko\admin\ tambah_barang.php


Form barang yang berhak mengaksesnya adalah admin, maka listing program
diatas di simpan: C:\xampp\htdocs\nim\onlinetoko\admin\
tambah_barang.php. Agar dapat disimpan data yang telah Kita masukan, Kita
memerlukan file bantuan yaitu konf_tambah_barang.php, berikut adalah skrip
lengkapnya:
Catatan: Untuk gambar yang Kita akan gunakan lebih baik di simpan di dalam satu folder dan folder tersebut jadi
satu dengan folder dimana listing program disimpan. Contoh: C:\xampp\htdocs\nim\onlinetoko\produk.
Membuat Form Anggota
Di dalam tabel yang telah di desain, tambahkan beberapa objek
formulir sesuai data pertanyaan yang akan dimasuki.

Simpan file di atas di
C:\xampp\htdocs\nim\onlinetoko\
new_member.php





Konfirmasi_member.php
Disimpan : C:/ Xampp/htdocs/onlinetoko/admin/konfirmasi_member.php
PERTEMUAN 10
Modifikasi Form Master
Menghapus danMengedit Data Barang
Buatlah sebuah tabel dengan ketentuan
Kemudian letakkan kursor di baris ke 2 di dalam tabel, sekarang
tambahkan objek Tabel , dengan ketentuan berikut:
Kemudian letakkan kursor di baris ke 1
kolom ke 2 di tabel yang kedua, sekarang
tambahkan objek Tabel, dengan ketentuan
berikut:
Kemudian letakkan kursor di
luar tabel1, sekarang tambahkan
objek Tabel ,dengan ketentuan
berikut:
Di dalam tabel yang telah di desain, tambahkan beberapa objek formulir
sesuai data pertanyaan yang akan dimasuki.
Dari desain formulir di atas, Anda dapat melihat definisi
pengaturan setiap objek form dengan melihat tabel berikut:





Menghapus Data Barang
Skrip hapus_barang.php:
<?php
include_once "../librari/inc.koneksi.php";
if($_GET['page']=="hapusbarang"){
if(!$_GET['kode']==""){
$sql="DELETE FROM barang WHERE kd_barang='".$_GET['kode']."'";
mysql_query($sql,$koneksi);
echo"<meta http-equiv='refresh' content='0
url=?page=tampilbarang'>";
}
}
?>
Skrip di atas disimpan di C:\xampp\htdocs\nim\onlinetoko\admin\
hapus_barang.php.
Mengedit Data Barang
Buat Tabel dengan ketentuan sbb:
Di dalam tabel yang telah di desain, tambahkan beberapa objek formulir sesuai
data pertanyaan yang akan dimasuki.
Dari desain formulir di atas, Anda dapat melihat definisi pengaturan setiap
objek form dengan melihat tabel berikut:
Simpan file di atas di C:\xampp\htdocs\nim\onlinetoko\admin\
edit_barang.php.


Setelah Kita merubah data barang, supaya data barang yang telah di
rubah dapat di simpan. Kita memerlukan listing bantuan
konf_edit_barang.php. skripnya yaitu sebagai berikut:
Skrip di atas di
simpan di
C:\xampp\htdocs
\nim\onlinetoko\
admin\
konf_edit_barang
.php.
Menampilkan & Menghapus Form Anggota
Buatlah sebuah tabel dan form dengan ketentuan sbb :
Kemudian letakan kursor di dalam
tabel, sekarang tambahkan objek
Tabel dengan ketentuan berikut:
Di dalam tabel yang telah di desain, tambahkan beberapa objek formulir sesuai
data pertanyaan yang akan dimasuki.
Dari desain formulir di atas, Anda dapat melihat definisi pengaturan setiap objek
form dengan melihat tabel berikut:
Simpan file di atas di C:\xampp\htdocs\nim\onlinetoko\admin\
member.php.
Berikut skrip lengkapnya dari disain form di atas

Skrip di atas disimpan C:\xampp\htdocs\nim\onlinetoko\admin\ member.php.
Skrip hapus_member.php:
<?php
include_once "../librari/inc.koneksi.php";
if($_GET['page']=="hapusmember"){
if(!$_GET['kode']==""){
$sql="DELETE FROM member WHERE
kd_member='".$_GET['kode']."'";
mysql_query($sql,$koneksi);
echo"<meta http-equiv='refresh' content='0
url=?page=member'>";
}
}
?>
Skrip di atas disimpan
C:\xampp\htdocs\nim\onlinetoko\admin\
hapus_member.php.
PERTEMUAN 11
Studi Kasus III Membuat Form Login
Membuat Form Login Admin
Buatlah sebuah file baru dengan struktur table nya sbb :
Kemudian letakan kursor di dalam tabel baris kedua, sekarang tambahkan objek
Tabel ,dengan ketentuan berikut:
Di dalam tabel yang telah di desain, tambahkan beberapa objek formulir sesuai
data pertanyaan yang akan dimasuki.
Dari desain formulir di atas, Anda dapat melihat definisi pengaturan setiap
objek form dengan melihat tabel berikut:
Simpan file di atas di C:\xampp\htdocs\nim\onlinetoko\admin\ member.php.


Skrip di atas di simpan di
C:\xampp\htdocs\nim\on
linetoko\
admin\cek_admin.php.
Skrip cek_admin.php:
<?
$uname_admin=$_POST['uname_admin'];
$pswd_admin=$_POST['pswd_admin'];
include ('../librari/inc.koneksi.php');
$sql="select*from admin where uname_admin='$uname_admin'
and pswd_admin='$pswd_admin'";
$cek=mysql_query($sql);
$data=mysql_fetch_array($cek);
if ($data[uname_admin]==$uname_admin and
$data[pswd_admin]==$pswd_admin)
{
session_start();
session_register("uname_admin");
session_register("pswd_admin");
$uname_admin=$data[uname_admin];
$pswd_admin=$data[pswd_admin];
header("location:../admin/index.php");
}
else{header("location:../admin/login.php");}
?>
Membuat Form Home Admin
Apabila ijin akses admin telah disetujui, maka akan tampil halaman home
Admin. Halaman home admin di buat secara index. Berikut skrip lengkapnya:
Untuk membuat tamplate home admin, Kita menggunakan objek tabel, dengan
ketentuan berikut:
Kemudian letakan kursor di bawah tabel, sekarang tambahkan objek Tabel
dengan ketentuan berikut:
Kemudian letakan kursor di dalam tabel 2 baris ke 3 kolom ke 1, sekarang
tambahkan objek Tabel, dengan ketentuan berikut:
Kemudian letakan kursor di dalam tabel 4 baris ke 2 kolom ke 1, sekarang
tambahkan objek Tabel dengan ketentuan berikut:
Di dalam tabel yang telah di desain, tambahkan beberapa objek formulir sesuai data
pertanyaan yang akan dimasuki.
Simpan file di atas di
C:\xampp\htdocs\nim\onlinetoko\
admin\ index.php.
Script Lengkapnya :


Untuk membuka setiap halaman admin dari halaman index,
diperlukan file pembantu yaitu file bukafile.php
PERTEMUAN 12
Membuat Form Login Lanjutan
Membuat Form Login User
Sebuah website hak ases antara pengunjung biasa dengan anggota harus
dibedakan. Dan apabila ingin melakukan transaksi secara online, diharuskan
menjadi member di website tersebut. Karena untuk mencatat data dari anggota,
yang nantinya untuk pengiriman barang yang dipesan. Berikut adalah form login
untuk anggota:



Supaya pelanggan dapat masuk ke dalam halaman pelanggan, Kita memerlukan
login_periksa.php untuk memeriksa pelanggan.

Membuat File UntukMemeriksa Status Login Anggota
Skrip inc.plg.session.php:
<?php
session_start();
$SES_USER=$_SESSION['SES_USER'];
if(!(session_is_registered(SES_USER))){
?>
<br /><br />
<table width="90%" border="0" cellspacing="0" cellpadding="2" class="border">
<tr bgcolor="#FF6600">
<td height="22" align="center">
<b>ANDA BELUM LOGIN</b></td>
</tr>
<tr>
<td bgcolor="#FFFFCC">
Anda Belum melakukan login, untuk mengakses
halaman ini Anda diharuskan untuk melakukan login terlebih dahulu.
Apabila belum memiliki acoount, silahkan daftar sini.
[ <a href="?page=daftar" target="_self">Daftar</a> ]
</td>
</tr>
</table>
<?php } ?>
Skrip di atas di simpan
C:\xampp\htdocs\nim\onlinetoko\
inc.plg.session.php
Membuat Status Akses
Skrip inc.status.php:
<?php
if(isset($_SESSION['SES_USER'])==""){
echo"<b> [ Status : Belum Login ";
echo"<| User : Tamu ]</b>";
}
else{
echo"<b>[ Status : Login ";
echo"| User ".$_SESSION['SES_USER']."]";
echo"[ <a
href='login_out.php'>Logout</a></br>";
}
?>
Skrip di atas di simpan
C:\xampp\htdocs\nim\onlinetoko\
inc.status.php
Membuat File Librari

Membuat Cascading Style Sheet
Cascading Style Sheet adalah suatu teknologi yang digunakan untuk
memperindah tampilan halaman website (situs). Singkatnya dengan
menggunakan Metode CSS ini anda dengan mudah mengubah secara
keseluruhan warna dan tampilan yang ada di situs anda, sekaligus
memformat ulang situs anda (merubah secara cepat). Berikut adalah CSS
yang digunakan untuk halaman user:




A.katlink:visited {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
PADDING-BOTTOM: 2px;
COLOR: #567300;
PADDING-TOP: 2px;
FONT-FAMILY: arial
}
A.katlink:hover {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
PADDING-BOTTOM: 2px;
COLOR: #ff9900;
PADDING-TOP: 2px;
FONT-FAMILY: arial;
TEXT-DECORATION: none
}
Skrip CSS di atas di simpan
C:\xampp\htdocs\nim\onlinetoko\style\
user.css.
PERTEMUAN 16
Studi Kasus IV Membuat
Form Penjualan
Membuat Form Penjualan
Setiap pelanggan yang ingin melakukan transaksi Kita memerlukan form
penjualan.




Ketika tampil data barang dengan mengklik tombol beli maka data akan di simpan
ditabel kantong. Berikut skrip lengkapnya:
Setelah data barang yang dipilih disimpan dikantong. Maka data yang telah
disimpan dapat ditampilkan. Berikut skrip lengkapnya:
PERTEMUAN 17
Memodifikasi Form Penjualan I
Membuat Ubah Penjualan
Apabila ingin merubah jumlah barang dari per barang yang Kita pilih. Maka Kita
memerlukan file untuk merubah jumlah barang. Berikut skrip lengkapnya:
Skrip di atas di simpan
C:\xampp\htdocs\nim\onlinetoko\
beliubah_sim.php
Membuat Konfirmasi Data Anggota Untuk Pengiriman Barang
Untuk mengkonfirmasi ulang data anggota yang telah memesan barang.
Kita memerlukan form konfirmasi ulang data anggota. Berikut skrip
lengkapnya:








<td><input name="imageField2" type="submit"
value="LANJUTKAN"></td>
</tr>
</table>
</form>
Skrip di atas di simpan C:\xampp\htdocs\nim\onlinetoko\
belipenerima.php
Pertemuan 18
Memodifikasi Form Penjualan II
Menyimpan Konfirmasi Ulang Data Anggota
Setelah dilakukan kofirmasi ulang data anggota, maka data yang telah diubah
dapat kita simpan di table member. Berikut skrip lengkapnya:
Skrip di atas di simpan C:\xampp\htdocs\nim\onlinetoko\
belipenerima_sim.php
Setelah data anggota yang telah dirubah di simpan. Maka tampil data barang
yang telah di pesan oleh anggota. Berikut skrip selengkapnya:




LANJUTAN
PERTEMUAN 19
Merancang Web Penjualan
Merancang halaman utama/ Membuat
halaman index
Untuk membuat tamplate home, Kita menggunakan objek
tabel, dengan ketentuan berikut:
Kemudian letakan kursor di bawah tabel, sekarang tambahkan objek Tabel ,
dengan ketentuan berikut:
Kemudian letakan kursor di dalam tabel 2 baris ke 3 kolom ke 1, sekarang
tambahkan objek Tabel , dengan ketentuan berikut:
Kemudian letakan kursor di dalam tabel 3 baris ke 2 kolom ke 1, sekarang
tambahkan objek Tabel,dengan ketentuan berikut:
Di dalam tabel yang telah di desain, tambahkan beberapa objek
formulir sesuai data pertanyaan yang akan dimasuki.
Simpan file di atas di C:\xampp\htdocs\nim\onlinetoko\
index.php.







Dalam halaman index, Kita dapat membuka halaman – halaman yang lainnya.
Penghubung untuk membuka halaman – halaman yang lainnya. Kita
memerlukan file bantuan yaitu:
PERTEMUAN 20
Merancang Web Penjualan
(Lanjutan)
Membuat Form Profil
Membuat Form Info Anggota
Membuat Form Kontak Kami
Membuat Form Cara Pembayaran
PERTEMUAN 21
Hosting Web
Membuat website adalah suatu hal yang sudah biasa di masa sekarang ini.
Setelah kita membuat website, supaya dapat diakses dari internet, maka
kita harus mempublishnya/meletakkan di server Hosting. Penyedia
layanan hosting http://www.100webspace.com merupakan penyedia
layanan hosting gratis. Berikut langkah – langkah pembuatannya:
1. Masuk kedalam situs http://www.100webspace.com.
2. Kemudian Kita daftar terlebih dahulu. Jika gratis, memilih
Free Hosting. Klik Sign Up Now.
3. Kemudian mengisi formulir yang telah disediakan dengan
benar
4. Setelah mengisi klik tombol Continue. Tunggu sebentar
5. Kemudian nama password accountnya telah dikirim ke e-mail kita
yang telah kita tuliskan pada saat pendaftaran.
6. Kemudian buka e-mail Kita. Kemudian ada password untuk
akses Control panel (lewat http/browser)
7. Kemudian login account di http://www.100webspace.com. Masukan
account dan password Kita
8. Setelah login akan muncul Control Panel milik 100 Web Space. Dengan
Control Panel ini kita dapat mengatur hosting Kita, contoh untuk
mengupload file. Atau dapat juga untuk mengatur FTP, domain, database,
dan lain – lain fiturnya. Untuk mulai mengupload file yang telah Kita buat ke
hosting, Kita pilih File Manager. Kemudian masuk ke folder www.
9. Setelah itu masuk kembali ke folder bawahnya lagi sesuai
account yang Kita daftarkan.
10. Masukan file – file yang ingin Kita upload dengan cara klik browser.
Kemudai cari dimana filenya berada. Kita harus memasukkan filenya
satu per satu. Untuk mulai mengupload, selanjutnya klik tombol
upload. Jika menginginkan file yang diupload bersamaan lebih banyak
lagi, Kita klik pada More Files.