Assalamualiakum Wr.Wb
TUTORIAL WEBDESAIN ikuti dengan baik.. SEMANGAT!!
Ø Untuk memulainya/
dibutuhkan saat lomba kita membutuhkan beberapa program
1.
XAMPP
2.
ADOBE
DREAMWEVER CS5
3.
PHOTOSHOP
4.
MICROSOF
OFFICE WORD
5.
NOTEPAD
6.
ADOBE
FLAS
tapi untuk belajar kali ini kita hanya
membutuhkan XAMPP,DREAMWEVER,
PHOTOSHOP DAN FLASS langsung saja kita
menuju ke TKP :D
·
Pertama (Xampp)
1.
Buka
aplikasi XAMPP
2.
klik tombol start (hanya apache dan mysql)
3.
klik
tombol Close (silang merah)
·
Kedua (Folder)
1.
Buka
folder di Data C-XAMPP-Htdocs-klik new folder
ganti nama sesui keinginan (misalnya KUDUS) klik folder kudus dan membuat
folder lagi dg nama IMAGES
2.
Buka aplikasi DREAMWEVER-klik file-New-Klik
PHP- klik 3column fixed header and foother-dan layout css ganti dg creat new
file- simpan difolder kudus tadi dg nama STYLE
3.
lalu muncul tampilan tamplet dan save dg nama
INDEX.PHP
·
Ketiga (Mengedit tamplet)
1.
Header
a.
Hapus
kolom insert_logo(180x90)
b.
Tambahkan
foto header (foto yang akan dimasukkan keweb harus berada difolder Xampp- Htdocs-Kudus-Images)
Klik
Insert-Image dan ambil foto header dg ukuran 961x150px, klik 2x OK, OK
c.
Menubar
Klik
Insert-spry-spry menu bar-Horizontal-ok
Klik
spry menubarhorizontal.css klik code/split width diganti 15em
d.
Untuk
mengubah Warna klik dibagian kanan layar css style-All-Spry
menubarhorizontal.css-Spry menubarhorizontal a.
Dan
untuk mengubah Tulisan/Tab bisa dicode/split
2.
Sidebar1
a.
Klik
Insert-from-from didalam from tambahkan foto
b.
Tambahkan
foto Search (foto yang akan dimasukkan keweb harus berada difolder Xampp- Htdocs-Kudus-Images)
Klik
Insert-Image dan ambil foto Search dg ukuran 180x30px, klik 2x OK
c.
Untuk
mengubah Warna klik dibagian kanan layar css style-All-Style.css-Sidebar1
Dan untuk mengubah Tulisan bisa dicode/split
3.
Sidebar2
a.
Klik
Insert-from-from didalam from tambahkan foto
b.
Tambahkan
foto ARTICEL (foto yang akan dimasukkan keweb harus berada difolder Xampp-
Htdocs-Kudus-Images)
Klik
Insert-Image dan ambil foto Login dg ukuran 180x30px, klik 2x OK
c.
Untuk
mengubah Warna klik dibagian kanan layar css style-All-Style.css-Sidebar2
d.
“KUDUS
merupakan kota terkecil di jawa tengah, KUDUS juga merupakan kota wali karna
diKUDUS mempunyai 2 makam sejarah walisongo yang sangat terkenal diindonesia,
kudus juga terkenal dengan kota industri karna didominasi dengan pabrik rokok
dan percetakan.Dan kudus banyak meniyimpan sejarah dan beberapa asdat istiadat
daerah jawa yang banyak Baca Selengkapnya..”
4.
Content
a.
Klik
Insert-from-from didalam from tambahkan foto
b.
Tambahkan
foto Kudus vocasi (foto yang akan dimasukkan keweb harus berada difolder Xampp-
Htdocs-Kudus-Images)
Klik
Insert-Image dan ambil foto Login dg ukuran 600x30px, klik 2x OK
c.
Insert-media-swf-OK
(ukuran bisa dipaskan sendiri)
Berupa
vidio yang dibuat dari ADOBE FLAS
5.
Footer
a.
Hapus
tulisan yang ada
b.
Dan
tulis tulisan ini di code footer
<p><marquee>
Selamat Datang Di Kudus Kota Kretek:)</marquee></p>
(untuk
membuat tulisan berjalan)
c.
Dibawah
layar klik page properties-css-pilih foto Bg
·
Keempat (confiq.php/koneksi ke localhost)
a.
Jangan
Lupa aktifkan Xampp
c.
Klik
php myadmin
d.
Klik
Database nama database Kudus-create
·
Kelima (konfig/koneksi)
a.
Buat
baru dreamwever
File-new-php-none-creat
b.
Klik
code ctrl-a delete
c.
Tulis
seperti gambar
d.
Dan
save dengan nama config.php di folder XAMPP-Htdocs-Kudus
e.
Dan
Connect internet harus dimatikan terlebih dahulu
·
Keenam Link (untuk link pastikan tampilan tidak akan dirubah
kembali)
a.
Data
C-XAMPP-Htdocs-Kudus
b.
File
Index klik kanan copy – paste dan nama diganti degan linknya
Misalnya nama diganti
kuliner dan buka (nama link harus sama dg file)
c.
Ganti
Content tentang kuliner kudus
d.
Lakukan
seperti itu hingga semua link terisi dan bisa dibuka di mizolla
·
Php (Buku tamu, Pencarian, Login)
1.
Buku Tamu
a.
Buka
file buku tamu
Hapus
content membuat tulisan Guestbook | Lihat Buku Tamu dan membuat table dg cara
insert-table-2-3-200-OK
Column
1 dan 2 tulis Nama dan Pesan, sebelah tulisan nama beri kolom dg cara
insert-from-text field dan disebelah tulisan pesan beri kolom
insert-from-textarea dan tombol submit insert-from-button(Id ditulis sesui nama
dg menggunakan huruf kecil dan label di biarkan) (Gambar
15)
b.
Buka
mizolla localhost-phpmyadmin-buka database yang telah dibuat
Kudus-buku-table
name = buku – column = 3
Isi
seperti
untuk
edit klik insert di localhost
c.
Didreamweaver
klik code/split dibawah tulisan ini
<form
id="form1" name="form1" method="post"
action="">
<img src="images/kudus
vocasi.jpg" width="600" height="30" />
</form>
Tulislah
code php
nomer 68-94
Nanti
akan seperti
d.
Copy
paste index dan beri nama file proses_bukutamu Hapus
content membuat tulisan dan tulisan code
seperti diatas
e.
Isi
kolom di mizolla lalu submit akan muncul Ok akan muncul
2.
Pencarian
a.
Membuat
table dg cara seperti diatas dan
tampilan dimizolla
b.
Copy
paste index dan beri nama file aksi_pencarian Hapus
content membuat tulisan dan tulisan code
seperti diatas 67-88
c.
Jika
seperti maka code diDW ataupun
PHP ada yang salah
Coba
diteliti kembali
d.
Buka
mizolla localhost-phpmyadmin-buka database yang telah dibuat
Kudus-buku-table name = cari – column =
3- insert-value=soto keterangan=soto adalah makanan yang cukup digemari banyak org dll
3.
Login
a.
Membuat
table dg cara seperti diatas dan
tampilan dimizolla
b.
File
–new – none-php-OK
Code
CTRL-A del tulis code dg file
nama aksi
c.
File
–new – none-php-OK
Code
CTRL-A del tulis code dg file
nama logout
d.
Buka
mizolla localhost-phpmyadmin-buka database yang telah dibuat
Kudus-buku-table name = admin – column =
3- column 1= users varchar 10- column 2= pass varchar 10- save
e.
Insert – Go
Selesai
Terima Kasih
nice kik
BalasHapus