Modul dan ebook kursus web dengan dreamweaver dan phpmysql

April 23, 2013 [MODUL KURSUS WEBPROGRAMMING WWW.KURSUSKOMPUTERNAURA]
1 Modul KursusWebPorgramming | www.kursuskomputernaura.com
Membuat Web Dinamis menggunakan Php Dan Mysql
Menginstall server
Dalam mempelajari pemrograman php mysql ini anda akan bersentuhan dengan yang namanya
bahasa php,server dan database Nah untuk langkah pertama kita harus mengetahui server itu
apa ,karena kode kode php hanya bisa dijalankan di dalam server Nah didalam cd kursus yang
sudah Diberikan terdapat sebuah file zip bernama xampplite-win32-1.7.3 silahkan extract file
tersebut ke direktori c/ ,d/ atau e/ lihat contoh gambar dibawah ini
Dan akan terlihat hasil extract folder tadi didalam folder project kita lihat gambar dibawah ini
kemudian klik dua kali folder xampplite dan cari shortcut xampp-controll kemudian klik 2 x

Kemudian akan muncul jendela xampp-control seperti terlihat pada gambar kemudian klik
tombol start untuk mysql dan apache nya
Kemudian buka browser anda dan ketikkan alamat berikut localhost/phpmyadmin dan akan
terlihat jendela seperti pada gambar dibawah ini
Ini artinya server anda sudah aktif dan siap digunakan
Membuat database
Setelah anda berhasil menginstall server untuk php di Komputer anda saat nya sekarang kita
belajar tentang database dimana database tersebut bernama mysql ,karena sebuah program
aplikasi membutuhkan database dimana disini kita menggunakan database mysql.Disinilah
nanti kita menyimpan seluruh hasil transaksi kita,yang kemudian ditampilkan ke halaman
pengunjung atau user menggunakan kode kode php ,html dan css baiklah kali ini kita akan
mencoba membuat database,membuat relasi antar tabelnya ,baiklah perhatikan gambar
dibawah ini untuk memulai membuat database

Klik tulisan basis data seperti yang terlihat pada gambar
Kemudian tampil kolom untuk membuat database,ketikkan misalnya dbwebmaster,kemudian
klik tombol buat lihat contohnya pada gambar dibawah ini
Jika sudah maka lihat pada menu bagian kiri sudah dibuatkan sebuah database dbwebmaster
kemudian klik tulisan dbwebmasternya,dan disana tersedia sebuah kolom untuk membuat
table database,misalkan kita buat table user,lalu klik tombol kirim lihat contohnya pada gambar
Maka akan tampil gambar seperti dibawah ini kita membuat field untk nama kolom kolom
database kita dan type datanya lihat contoh pembuatannya pada gambar dibawah ini

 Id_user =>kita buat tipe id kita bilangan bulat,dengan panjang karakter 5
digit,kemudian sebagai primary key dan penomorannya otomatis dilakukan database
secara terurut
 Nama_user =>type datanya varhar artinya boleh dengan bilangan karakter
string/huruf kita beri batasan misalnya paling panjang untuk sebuah nama 30 karakter
 Email =>type datanya varchar,kita beri batasan misalnya paling panjang untuk
sebuah email sepanjang 30 karakter
 Username =>type datanya sepanjang 15 karakter
 Password =>type datanya varchar sepanjang 15 karakter batasannya
 Level =>karena untuk level kita hanya butuh satu digit saja sebenarnya kita
menggunakan tinyint,artinya type data bilangan namun dengan batasan tamping lebih
kecil pada database kita beri 2 karakter
 Tanggal =>type data tanggal jadi data yang nanti masuk kita format menggunakan
type data dari mysql ini untuk digit karakter kita kosongkan saja karena sudah otomatis
dibuatkan oleh user
 Jangan lupa type penyimpanannya menggunakan innodb untuk memudahkan proses
relasinya nanti
 Kemudian klik tombol simpan
Nah sekarang anda sudah mempunyai sebuah table yang bernama table_user,pada
database dbwebmaster seperti terlihat pada gambar dibawah ini
Kemudian coba kita tambahkan sebuah data baru dengan cara klik tulisan table_user yang
terlihat pada gambar diatas,lalu kemudian muncul tampilan field yang masih kosong ,nah
dibagian atas ada tulisan tambahkan klik lalu isi fieldnya untuk lebih jelasnya lihat gambar
berikut

Isikan seperti contoh pada gambar jika sudah kemudian klik tombol kirim,
nah sekarang anda sudah mempunyai sebuah data dalam table_user untuk melihat hasilnya
kita klik tulisan pada menu sebelah kiri seperti terlihat pada gambar berikut ini
Maka akan terlihat data yang kita inputkan tadi sudah masuk kedatabase seperti terlihat pada
gambar dibawah ini
Sekarang buatlah lagi table table untuk berikutnya seperti yang terlihat pada gambar di bawah
ini

Tabel Artikel
No Nama kolom Type data Panjang karakter Kunci primary
1 Id_artikel int 11 
2 Id_kategori int 11
3 Id_user int 11
4 Judul varchar 200
5 isi text
6 gambar varchar 50
7 tanggal date
Tabel Kategori
1 Id_kategori int 11 
2 Nama_kategori varchar 50
Tabel Komentar
1 Id_komentar int 11 
2 Id_berita int 11
3 nama varchar 30
4 email varchar 30
5 web varchar 30
6 pesan text
7 balas text
8 tanggal date
9 status char 5

Tabel Setting
1 Id_setting int 11 
2 title varchar 70
3 keyword varchar 160
4 deskripsi varchar 200
5 Gambar_header varchar 30
6 footer varchar 50
7 Shotcut_icon varchar 30
8 alamat text
9 telepon varchar 15
10 Nama_pemilik varchar 30
Tabel Profil
1 Id_profil int 11 
2 judul varchar 200
3 isi text
4 gambar varchar 50
5 tanggal date
Tabel Produk
1 Id_produk int 11 
2 Id_kategoriproduk int 11
3 Namaproduk varchar 50
4 keterangan text
5 harga int 50
6 diskon varchar 30
7 gambar varchar 50
7 tanggal date
Tabel Kategori Produk
1 Id_kategoriproduk int 11 
2 Kategoriproduk varchar 50

Tabel Gallery
1 Id_gallery int 11 
2 judul varchar 50
3 keterangan text
4 gambar varchar 50
5 tanggal date
Tabel kontak
1 Id_kontak int 11 
2 nama varchar 30
3 email varchar 30
4 web varchar 50
5 pesan text
6 balas text
7 status varchar 10
8 tanggal date
Table_slider
1 Id_slider int 11 
2 gambar varchar 50
Jika sudah maka akan terlihat semua table yang sudah dibuat seperti gambar dibawah ini
Membuat relasi Antar table
untuk membuatnya klik menu designer seperti yang terlihat pada gambar diatas maka akan
tampil seperti gambar di bawah ini susunlah semua gambar mirip seperti gambar dibawah ini

Backup database
Untuk mempermudah penyalinan database kita dilocalhost yang nanti kemudian kita akan
pindah ke hosting maka kita harus membackup atau mendumping database kita caranya sangat
mudah klik tulisan ekpor seperti gambar dibawah ini

Kemudian muncul dialog seperti ini,pilih metodenya cepat kemudian formatnya pilih sql
kemudian klik tombol kirim
Kemudian muncul kotak dialog pilih save file kemudian klik tombol ok dan lihat hasilnya di
folder download database anda sudah terbackup,sekarang pindahkan file tersebut ke folder
project anda sebagai backup kalau kalau suatu saat server anda mengalami gangguan data anda
masih bisa terselamatkan

Merestore database
Untuk mengembalikan database atau merestore caranya juga cukup mudah, buatlah sebuah
database di phpmyadmin misalnya kita buat namanya dbwebmaster_backup jika sudah
kemudian klik tombol import lihat contohnya seperti gambar dibawah ini
Kemudian klik pilih file/browse,kemudian pilih file dari folder backup yang sudah kita pindahkan
tadi ke folder project kita lihat contohnya pada gambar dibawah ini :
Kalau sudah semua sekarang tinggal klik tombol kirim ,jika tidak ada masalah maka anda akan
dibuatkan table tebel seperti database sebelumnya (dbwebmaster) ke database yang
baru(dbwebmaster_backup) Nah cukup mudahkan untuk membackup dan restore database
sekarang saatnya kita bermain main dengan kode php
Mulai membuat project

Untuk pengenalan php anda bisa lihat di modul tambahan,untuk memperkuat logis anda
memasuki tahap project ini ,baiklah pertama-tama kita buka dulu editor kesayangan kita yaitu
dreamweaver kemudian kita akan mengkonfigurasikan project kita dengan server dengan
bantuan dreamweaver nama istilahnya mendefenisikan website
Mendefenisikan website
Untuk mengkoneksikan antara editor ke file kita deserver local,browser,dan database maka kita
defenisikan terlebih dahulu project kita caranya bisa dilihat pada gambar dibawah ini
Ketikkan sesuai nama folder project kita sebelumnya,yaitu latihanweb .kemudian klik gambar
folder disebelah kanan ,untuk lebih jelasnya lihat gambar berikut
Lalu akan muncul window dialog untuk membuat folder diserver kemudian buat folder baru
bernama latihanweb sesuai nama yang kita ketikkan diatas tadi kemudian klik open lihat
gambar

Jika sudah maka akan muncul window dialog baru lagi dan pilih select seperti terlihat pada
gambar berikut.setelah itu kemudian kita atur lagi konfigurasi servernya lihat gambar
Kemudian akan muncul lagi window dialog baru dan isikan konfigurasinya seperti terlihat pada
gambar dibawah ini kemudian tekan tombol save,jika sudah jangan lupa dicentang remote dan
testingnya kemudian klik tombol savenya lagi
Nah sekarang anda sudah selesai mengkonfigurasi di dreamweaver ,sekarang ! kita salin semua
hasil dari webdesign kita sebelumnya ke folder yang baru saja kita ciptakan tadi deserver yaitu
di c/xammplite/htdocs/latihanweb caranya masuk kefolder project kita yang didekstop
kemudian klik folder administrator lalu tekan shift kemudian arahkan cursor kefile paling bawah
dan klik kemudian klik kanan dan pilih copy setelah itu masuk ke sytem c ->pilih xampp->htdocs
kemudian tekan tombol ctrl dan s secara bersamaan untuk menyalin data yang tadi
dicopy,untuk lebih jelasnya lihat gambar dibawah ini

Jika sudah silahkan buka browser anda dan ketikkan alamat localhost/latihanweb maka web
anda sudah tampil deserver local computer kita seperti terlihat pada gambar dibawah ini

Jika sudah kita kemudian kembali ke editor dreamweaver anda dan ubah file
index.html,index.html dalam folder administrator dan dashboard.html menjadi berekstensi php
agar bisa kita sisipkan kode kode php ,caranya buka file index.html didreamweaver kemudian
klik file kemudian save as ganti akhiran htmlnya menjadi php.liat contohnya pada gambar
dibawah ini
Kemudian tampil gambar seperti dibawah klik lagi tombol save,ulangi lagi langkah ini untuk file
index.html dan dashboard.html di folder administrator

Jika semua file diatas sudah dirubah semua formatnya ke php maka sekarang kita akan
membuat folder bernama config,kemudian buat sebuah file php baru simpan dengan nama
koneksi.php simpan di folder config adapun kodennya lihat seperti gambar dibawah ini
Jika sudah preview hasilnya di browser melalui dreamweaver atau mengetikkan
localhost/latihanweb/config/koneksi.php ,jika tidak ada error atau layarnya putih blank berarti
koneksinya sudah berhasil terlihat seperti gambar dibawah ini
Selanjutnya kita buka file index.php di folder Administrator dan tambahkan script ceklogin.php
pada actionnya lihat gambar berikut

Jika sudah kita buat file baru bernama ceklogin.php lalu simpan di folder administrator lalu
ketikkan kode seperti di bawah ini pada file tersebut
Kemudian coba ketikkan coba ketikkan alamat localhost/latihanweb/Administrator coba login
dengan sembarang ,apakah bisa masuk dashboard atau tidak? Jika tidak coba login sesuai data
di table_user yang ada didatabase,nah sekarang sudah bisa masuk kehalaman dashboard.php
namun sekarang coba tutup browser anda dan buka kembali,lalu ketikkan alamat
localhost/latihanweb/administrator/dashboard.php Nah ternyata halamannya tetap bisa
diakses tanpa melalui login,untuk mengatasi ini ketikkan kode berikut dibaris paling atas
halaman dashboard.php berikut kodenya

Sekarang coba lagi baypass menggunakan url seperti diatas,Nah sekarang halaman dashboard
kita sudah terproteksi,sekarang dengan fungsi dari session kita coba bawa data dari ceklogin ke
halaman dashboard dengan script $_SESSION[‘ ’]; untuk lebih jelasnya mari kita lihat kode
berikut
Maka akan ditampilkan siapa user yang login seperti yang tampak pada gambar dibawah ini
sekarang coba login dengan username admin dan password admin maka akan ditampilkan
username anda menggunakan fungsi session
Jika sekarang urusan login dan session sudah beres mari kita coba membuat sitem
template,apakah system template? System template artinya kita hanya menggunakan satu
buah template saja,jadi data yang ditampilkan itu yang berubah hanya di bagian kontennya saja
tidak dengan web statis yang halamannya berganti satu halaman penuh,disinilah keunggulan
php bisa menghemat penulisan kode.sebelumnya buatlah sebuah folder bernama modul
didalam folder administrator lihat contohnya pada gambar

Kemudian didalam folder modul kita buat lagi sepuluh buah folder untuk merapikan penyimpan
modul modul php kita nanti untuk contohnya lihat gambar dibawah ini
kalau sudah mari kita kehalaman dashboard.php kemudian rubah semua kode yang ada di
dalam class kotak-bungkus ketikkan kode nya seperti yang terlihat seperti gambar

Kalau sudah semua rubah lagi semua script yang ada di bagian menu navigasi agar sesuai
dengan system template yang barusan kita buat diatas tadi
Sekarang kita sudah mempunyai template yang dinamis ,untuk mencobanya kita coba buat dulu
script kategori.php yaitu managemen kategori untuk artikel adapun scriptnya kita ambil dari
penggalan script dari produk.html berikut script yang saya ambil untuk saya jadikan template
dalam file kategori.php
Pertama tama ketiklah kode seperti dibawah ini dimana kode berikut adalah untuk
menampilkan data dalam bentuk table berikut tampilan dan kodennya :

Kemudian berikut kodenya
Kemudian berikut tampilan dari form tambah data
Untuk kodenya seperti dibawah ini

Untuk tampilan edit data hampir sama dengan form tambah data hanya perbedaan diquerynya
Kemudian untuk menghapus data kita hanya membuatuhkan query saja adapun kodenya
seperti dibawah ini
Membuat halaman management Artikel

Untuk mempermudah update atau tambah artikel kita menggunakan php dan mysql untuk
mempermudah pengelolaan website kita adapun tampilannya adalah seperti berikut :
Kodenya :

Kemudian untuk tampilan form dan kode tambahnya
Untuk kodenya :

Dibagian edit data artikel untuk tampilan hampir sama hanya perbedaan pada pada kodenya
saja adapun kodenya seperti dibawah ini

Kemudian kode untuk menghapusnya :
Membuat Halaman Management komentar
Nah kita sudah selesai membuat halaman untuk artikel sekarang kita akan membuat halaman
untuk halaman me management komentar pada website kita caranya buka file artikel.php
kemudian klik file->save as lalu simpan dengan nama komentar.php pada folder
komentar,kemudia jika sudah coba tekan tombol ctrl + F secara bersamaan dan isikan seperti
gambar dibawah ini

Kemudian klik tombol replace All jika sudah hapuslah seluruh kode yang ada diantara
$_get[‘data’]==tambah jadi yang tersisa tampilan table $_get[‘data’]==edit dan
$_get[‘data’]==hapus dan lakukan perubahan seperti tampak dibawah ini

Membuat halaman management Setting web
Halaman ini berfungsi untuk mengatur seo dan identitas web kita misalnya gambar header
slider kontak dll Nah seperti cara diatas untuk mempermudah pembuatan kodenya kita save
lagi halaman artikel.php menjadi halaman setting.php kemudian simpan di folder setting,tekan
ctrl + f kemudian isikan artikel dikolom find dan setting dikolom replace kemudian klik tombol
replece,untuk contoh gambar lihat gambar diatas,kemudian rubahlah semua kodenya ,menjadi
seperti dibawah ini

Untuk membuat halaman management user
silahkan buka file setting.php kemudian klik file lalu save as dengan nama user.php dan simpan
di folder user kemudian rubahlah scriptnya menjadi seperti dibawah ini :

Membuat halaman management slider
Untuk membuat halaman management slider anda bisa memakai file user.php kemudian save
as menjadi slider.php kemudian simpan dengan nama slider.php di folder slider dan buatkan
juga penampung folder gambarnya beri nama gambar-slider untuk kode selengkapnya bisa
dilihat contoh seperti dibawah ini

Membuat halaman kategori produk
Untuk membuat halaman kategori produk silahkan buka file kategori.php di folder kategori
kemudian simpan dengan save as berinama kategoriproduk.php dan simpan di folder
kategoriproduk kemudian rubah scriptnya menjadi seperti contoh dibawah ini

Membuat halaman Produk
Untuk membuat halaman produk Anda bisa copy dari file artikel.php kemudian lakukan
perubahan pada scriptnya dengan cara klik file save as kemudian simpan dengan nama
produk.php kemudian simpan dengan nama produk.php di folder produk kemudian buat lagi
sebuah folder bernama gambar-produk didalam folder latihanweb untuk menampung gambar
hasil upload ,untuk scriptnya silahkan lihat gambar dibawah ini

Nah selesai sudah kita membuat halaman produk,sekarang kita akan membuat halaman untuk
management portfolio

Membuat Halaman Management Portfolio
Buatlah sebuah folder bernama gambar-portfolio di folder latihan web,kemudian save as file
produk.php menjadi portfolio.php kemudian simpan di folder portfolio kemudian ubahlah
scriptnya menjadi seperti dibawah ini :

Membuat Halaman Management Kontak
Nah untuk yang terakhir dihalaman backend kita akan membuat halaman kontak caranya
tinggal di save as saja halaman portfolio menjadi halaman kontak.php kemudian simpan
difolder kontak yang didalam modul seperti yang sudah kita siapkan sebelumnya kemudian kita
rubah scriptnya menjadi seperti dibawah ini

Membuat file logout.php
Untuk membuat logout.php cukup mudah ketikkan seperti script dibawah ini dan simpan
difolder administrator,kemudian ubah link dari navigasi menjadi
<ahref=’logout.php’>Keluar</a> adapun scriptnya lihat gambar dibawah ini :

Membuat Kode untuk Tampilan halaman pengunjung
Bukalah file index.php kemudian editlah scriptnya menjadi seperti dibawah ini ubahlah dibagian
div menu menjadi seperti gambar di bawah ini :

Modul dan ebook kursus web dengan dreamweaver dan phpmysql

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (17)

Similar to Modul dan ebook kursus web dengan dreamweaver dan phpmysql

Similar to Modul dan ebook kursus web dengan dreamweaver dan phpmysql (20)

Recently uploaded

Recently uploaded (20)

Modul dan ebook kursus web dengan dreamweaver dan phpmysql