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

Education