Dream Weaver PHP MySQL
22
APLIKASI WEB DATABASE Menggunakan Adobe Dreamweaver pemrograman PHP+MySQL (Diajukan sebagai tugas pada matakuliah Pemrograman WEB) Dosen Pembimbing: Ir Agus Kanda D I S U S U N Oleh: PATIMATUZZAHRO 20054350054 TEKNIK INFORMATIKA KELAS N (SORE) UNIVERSITAS INDRAPRASTA PGRI JAKARTA SELATAN
Transcript of Dream Weaver PHP MySQL
APLIKASI WEB DATABASE Menggunakan Adobe Dreamweaver pemrograman
PHP+MySQL (Diajukan sebagai tugas pada matakuliah Pemrograman WEB)
Dosen Pembimbing: Ir Agus Kanda
D I S U S U N
Oleh: PATIMATUZZAHRO
20054350054
TEKNIK INFORMATIKA KELAS N (SORE)
UNIVERSITAS INDRAPRASTA PGRI JAKARTA SELATAN
Mengintip Versi Anyar Dreamweaver CS3 Dreamweaver merupakan salah satu software dari kelompok Adobe yang banyak digunakan untuk mendisain situs web. Adapun Adobe Dreamweaver sendiri adalah sebuah HTML editor profesional yang berfungsi mendesain secara visual dan mengelola situs web maupun halaman web. Welcome to Adobe Dreamweaver CS3
Dreamweaver merupakan tool terbaik untuk membuat situs menarik bahkan mungkin menakjubkan. Memang tidak semudah membalikkan telapak tangan, tapi tidak sulit untuk berlatih dan kemudian mengoperasikan Dreamweaver. Dreamweaver CS3 merupakan versi terbaru yang memiliki performa yang lebih baik dan memiliki tampilan yang memudahkan kita membuat halaman web, baik saat sedang bekerja dalam jendela desain maupun dalam jendela kode rumus. Untuk memulai penggunaan Dreamweaver CS3, kliklah tombol Start > All Programs > Adobe Design Premium CS3 > Adobe Dreamweaver CS3 Saat pertama kali kita menjalankan Dreamweaver CS3 , welcome Screen akan tampil . apabila tidak mendapati Welcome Screen, kita dapat menampilkannya dengan klik menu Edit > Preferences. Pilihlah Kategory – General, lalu aktifkan kotak dan periksa Show Welcome Screen. Welcome Screen memberi kemudahan dalam mengakses Tutorial Dreamweaver, memilih yang sudah terbuka, membuat halaman baru, membuat halaman dari contoh dan Dreamweaver serta masih banyak lagi. Elemen Dreamweaver CS3 Dalam ruang kerja Dreamweaver CS3, ada beberapa elemen utama yang membentuk suatu ruang kerja yang merupakan satu kesatuan tampilan antara menu utama, panel, property inspector, serta toolbar. Berikut ruang kerja Dreamweaver berikut:
a. Insert Bar berisi tombol-tombol untuk menyisipkan berbagai macam objek, seperti: image, tabel dan frame, ke dalam dokumen.
b. Document Toolbar berisi tombol-tombol menu pop-up yang menyediakan tampilan berbeda Document Window, misalnya Code, Spilt, atau Design.
c. Document Window berfungsi menampilkan dokumen di maman Anda bekerja sekarang
d. Panel Groups adalah kumpula panel yang saling berkaitan yang dikelompokkan di bawah satu judul.
e. Tag Selector berfungsi menampilkan hirarki tag disekitar pilihan yang aktif pada Design View
f. Property Inspector berfungsi melihat dan mengubah berbagai property objek yang terpilih
g. Files Panel berfungsi mengatur file-file dan folder-folder yang membentuk situs web.
1
Mengenal Insert Bar
Common berisi tombol untuk membuat dan memasukkan data yang sering digunakan, misalnya gambar dan tabel Layout berisi tombol untuk memasukkan tabel, div tags dan Spry
widgets. Kita dapat pula memilih tampilan tabel yaitu Standart (default) dan Expanded. Fungsinya untuk memudahkan pengeturan tabel dalam halaman web Forms berisi tombol untuk membuat form dan elemen-elemen form
lain, termasuk elemen Spry Data untuk memudahkan penggunaan Spry seperti recordset, repeated
regions, serta record insertion dan form untuk update data Spry terdiri atas tombol-tombol untuk membuat halaman web dengan
Spry, termasuk pengolahan data dengan Spry dan widgets Text untuk menambah teks dan memodifikasi teks agar terlihat lebih
menarik Favorites berfungsi mengelompokkan elemen Insert bar yang sering
kita gunakan dalam satu tempat Server-code hanya terdapat pada halaman web yang menggunakan
bahasa pemograman seperti ASP, ASPNET,CFML Basic, CFML Flow, CFML AdvanceD, JSP dan PHP
Mengenal Status Bar
a. Tag selector menunjukkna tag (bagian HTML) yang sedang dipilih.
Kliklah <body> untuk memilih bagian body pada seluruh halaman b. Select tool untuk mengaktifkan dan menon aktifkan Hand tool c. Hand tool untuk memilih halaman tool yang sedang kita buat untuk
menggeser atau mengatur posisi tampilan halaman d. Zoom tool untuk mengatur ukura tampilan halaman e. Set magnification untuk mengatur ukuran tampila halaman f. Windows size merupakan menu yang hanya muncul pada tampilan Design
View. Ukuran halaman web anda ditampilkan di sini g. Document size and estimated download time menunjukkna besar
halaman web dalam ukuran byte dan lama untuk mendownload halamannya, termasuk semua elemen halaman seperti gambar atau file lain
Mengenal Toobar Document
a. Show Code View untuk menampilkan baris kode dalam halaman semua web
b. Show Code and Design Views untuk membagi dua halaman Dreamweaver dan menampilkan bagian Code dan Design View di atas akan tidak aktif pada menu View Option
c. Show Design View untuk menampilkan Design View pada halaman web
d. Document Title untuk memberi halaman web yang akan muncul pada title bar halaman browser sebelah kiri atas. Jika halamn web sudah diberi nama maka namanya akan muncul pada bagian ini
e. File Management untuk menampilkan daftar menu file management
2
f. Preview/Debug in Browser untuk melihat hasil tampilan halaman web yang kita buat di dalam Browser. Pilihlah browser yang kita inginkan dalam menu
g. Refresh Design View untuk me-refresh halaman web yan kita buat ketika kita sudah membuat perubahan pada bagian kode. Perubahan demikian tidak secara otomatis muncul pada tampilan Design sampai kita melakukan aksi lain, seperti menyimpan halaman tersebut atau mengklik tombolnya
h. View options untuk membantu kita mengatur tampilan pada Code View, Design View maupun keduanya. Contohnya dalam Code View adalah memberikan angka pada tiap baris program dengan mengklik menu View Option > Line Numbers. Fungsinya untuk mempermudah pencarian kesalahan pada baris program
i. Visual Aids untuk membantu kita melihat disain yang kita buat dalam berbagai tampilan. Contohnya pilihlahVisual Aids > Frame Borders, lalu akan tampil pada Design View garis tepi atau border pada desain
j. Validate Markup untuk memvalidasi program HTML yang sedang kita kerjakan
k. Check Browser Compatibility untuk mengetahui apakah CSS yang kita buat dapat berjalan semestinya pada browser yang berbeda
Mengenal Toolbar Coding
Toolbar Coding terdiri atas tombol-tombol yang membantu kita melakukan banyak opersi pengkodean. Toolbar Coding hanya akan muncul pada saat kita bekerja dengan tampilan Code View dan muncul secara vertikal pada bagian kiri halaman web yang sedang kita buat. Kita tidak bisa memindahkan toolbar Coding, tetapi bisa menyembunyikannya. Kita bisa pula menambahkan tombol lain (misalnya Word Wrap, Show Hidden Characters dan Auto Indent) atau menyembunyikan tonbol yang jarang kita gunakan.
Mengenal Toolbar Style Rendering
Toolbar Style Rendering terdiri atas tombol yang dapat kita gunakan untuk melihat tampilan desain halaman web ynag kita buat pada halaman media. Toolbar meliputi pula tombol yang dapat memunculkan atau menghilangkan style CSS. Untuk menampilkannya, pilih View > Toolbar > Style Rendering. Secara default, Dreamweaver menampilkan desain kita pada tampilan layar komputer. Kita dapat pula memilih tampilan pada halaman yang lain, diantaranya:
Render Screen Media Type untuk menampilkan halaman yang ditampilkan Reader Print Media Type untuk menampilkan halaman sebelum
dicetak pada kertas Reader Handheld Media Type untuk menunjukkan tampilan halaman
web pad perangkat elektronik seperti telepon selular atau Blackberry
3
Render Projektion Media Type untuk menunjukkan tampilan halaman pada layar LCD Render TTY Media Type untuk mrnunjukkan tampilan halaman
teletype Render TV Media Type untuk menunjukkan halaman yang
ditampilkan pada layar televisi Toggle Displaying of CSS Styles untuk membantu dalam
menggunakan style CSS
Mengenal Panel Properties
Panel Properties digunakan untuk melihat dan mengubah berbagai property Objek dan teks yang terpilih. Setiap objek memiliki objek yang berbeda-beda. Misalnya gambar memiliki properti. Pada panel properti kita dapat mengetahui nama gambar, ukuran gambar, atribut fisik dan gambar, atribut fisik gambar seperti lebar dan tinggi, dan sebagainya.
Kelebihan Dreamweaver CS3
Banyak kelebihan dalam Dreamweaver CS3, diantaranya adalah; Dapat digunakan pada dua sistem operasi, yaitu Macintosh atau
Windows Dapat dilihat tampilan website preview pada komputer, ponsel atau
PDA dan printer Membangun web dengan CSS dengan menggunakan CSS layout, CSS
panel dan CSS visualization Fasilitas lengkap pendukung CSS Kemudahan pengelolaan data dengan form maupun Spray Data Objek
Menginstal Apache, PHP, dan MYSQL
PHP merupakan salah satu bahasa program yang berjalan dengan sebuah web server dan berfungsi sebagai pengolah data pada sebuah server. PHP mampu mengolah data dari komputer client atau dari komputer server itu sendiri, sehingga mudah disajikan di browser dengan PHP, website akan lebih interaktif dan dinamis. Untuk menjalankan program PHP dan MySQL, kita harus meninstal beberapa program kedalam program komputer. Program yang harus kita persiapkan adalah web server, MYSQL dan modul PHP. Kita bisa mendwnload secara gratis dari wibesite yang menyediakannya. Data yang dikirim pengunjung website client akan diolah dan disimpan pada database web server, kemudian akan tampil jika diakses. Untuk menjalankan kode-kode PHP, kita harus meng-upload file ke server.
4
Menginstal Apache Apache adalah sebuah software yang bila dijalankan akan menjadikan komputer kita server untuk web. Apche selain andal dan tangguh, merupakan sofware open source dan relatif gratis. Kita bisa men-download Apacha pada situs http://www.apache.org. File yang perlu kita download adalah versi yang paling baru dan dinyatakan stabil. Janagn lupa sebelum mendownload, sesuaikan dengan sistem komputer yang kita gunakan, Windows atau Linux. Jika menggunakan Windows, kita bisa download Win32 Binary. Setelah men-download file penginstalan Apache. Kita dobel klik file kemudian ikuti langkah berikut:
1. setelah mendoble klik penginstalan Apache. Kotak dialog kan tampil. Tekanlah Next untuk melanjutkan proses penginstalan
2. kotak dialog kedua merupakan lembar kerja persetujuan penggunaan program. Pilihlah I accept the terms in the licenceagreement jika kita ingin melanjutkan proses menginstal.
3. kliklah Next, selanjutnya akan tampil kotak dialog yang meminta kita mengisikan nama domain, nama server, dan email administrator.
4. kliklah Next, kemudian pilih jenis penginstalan yang ingin kita gunakan, misalnya pilih Typical, kemudian klik Next.
5. pilih kotak dialog selanjutnya, kita diminta menentukan tempat penyimpanan file penginstalan. Tekan tombol Change untuk mengganti letak penyimpanan. Kalo gitu kita simpan di file penginstalan di C:\Apache aja ya...
6. klik OK, kemudian tekan Next. Pad kotak dialog selanjutnya yang tampil, kliklah tombol Install. Tunggu hingga prose penginstalan selesai dan klik tombol Finish
7. perhatikan pada ujung kanan layar monitor. Pad umumnya akan muncul sebuah Ikon Apache Servis Monitor yang menandakan bahwa Apache telah terinstal dan dapat berjalan dengan baik
Menginstal Modul PHP Modul PHP adalah program untuk membaca, mengolah dan menterjemahkan bahas PHP menjadi bahasa HTML agar dikenali oleh browser. Agar kode PHP dapat dibaca oleh web server dan dikenal dengan kode PHP, kita harus menginstal kode PHP. Kita dapat mendownload modul dari situs http://www.php.net. Setelah kita mendapatkan file penginstalan dari internet. Klik ganda untuk memulai proses penginstalan pada komputer. Proses penginstalan akan berjalan otomatis. Pilihlah wev server sesuai dengan jenis web server yang akan digunakan. Pada kotak dialog Server Type, kita diminta memilih web server yang kita digunakan. Kita gunakan Apache 2.0.45 sebagai web server. Selanjutnya, tentukan direktori untuk program Apache dan sesuaikan dengan tempat file penginstalan Apache kita. Untuk mengubah folder tujuan, silahkan kita klik pada tombol Browse. Bila kita ingin
5
mengubah, lanjutkan dengan mengklik tombol Next. Pada kotak dialog selanjutnya, tentukan fitur-fitur PHP yang ingin diikutkan dalam proses penginstalan. Kemudian tekan tombol Next, pilih tombol Instal, dan tunggu proses penginstalan sampai selesai. Selanjutnya klik Finish. Untuk membaca ulang file konfigurasi Apache serta PHP, kita dapat mengklik tombol Restart pada Apache. Untuk mencoba apakah langkah script PHP sudah berjalan pada komputer, bukalah program Notepad. Kemudian ketiklah script program berikut: <html> <head> <title> PHP INFO </title> </head> <body> <? phpinfo()?> </body> </html> Simpan Notepad diatas pada directory c:\apache\htdocs\, dengan nama testphp.php. utnuk mengakses filenya, bukalah jendela Internet Explorer dan ketik http://localhoast/testphp.php di bagian address Mengatur konfigurasi PHP Kita harus melakukan konfigurasi PHP dengan web server agar script PHP yang kita ketik dapat terbaca sebagai script PHP oleh web server. Untuk langkah-langkah konfigurasi, kita dapat mengikuti langkah sebagai berikut:
1. Pada PHP5, carilah php5ts.dll bagi yang mengguanakan Windows XP/2003, lakukan perubahan berikut:
Masuklah dalam Control Panel > System > Advanced Tekan tombol Environment Variables pada System Variables dan
cari baris path Klik tombol Edit, kemudian lakukan pengeditan pada System
Variables dengan menambahkan ;C:\PHP Kliklah OK, kemudian lakukan Restart pada komputer
2. Cari file PHP ini dalam folder konvigurasi PHP, lalu lakukan erubahan pada file. Kita bisa menggunakan Notepad untuk melakukan pengeditan. Untuk proses pencarian baris perintah, kita dapat menggunakan fasilitas Find
3. Kemudian cari baris perintah error_reporting = E_ALL dan ketik tanda titik koma (;) di awal baris
4. Carilah baris error_reporting = E_ALL & ~E_NOTICE hapus tanda titik koma (;) di awal baris
5. Dari baris perintah display_error = Off dan ubahlah menjadi display_error = On
6. Dari baris perintah register_global dan pastikan perintahnya menjadi register_globals = Off
6
7. Darilah baris perintah magic_quotes_gpc = Off dan ubahlah menjadi magic_quotes_gpc = On
8. Tambahkan baris perintah doc_rot = “c:\apache2\htdocs” 9. Perhatikan bahwa baris extention_dir terisi nama directory dimana terdapat
fle-file DLL (file ekstensi ini berada di directory C:\php\ext). Baris ekstention_dir berubah menjadi extention_dir = “C:\php\ext”
10. Carilah baris upload_tmp_dir dengan nama directory yang telah kita siapkan untuk menampung data-data temporer. Misalnya kita membuat diractory C:\Dtemp sebagai directory untuk penampungan data-data temporer, maka baris perintahnya menjadi: upload_tmp_dir =”C:\Dtemp”
11. Tambahkan baris perintah session.save_path = “C:/Dtemp” untuk menampung data-data temporer pada proses session
12. Baris perintah WindowsExtention pada umumnya ditulis di bagian akhir file php.ini. Periksalah baris perintah di bawah ini: extention=php_mbstring.dll extention=php_bz2.dll extention=php_gd2.dll extention=php_mcrypt.dll extention=php_mhash.dll extention=php_mime_magic.dll extention=php_mysql.dll extention=php_mysqli.dll
13. Simpan perubahan, kemudian tutup program editor Mengatur Konfigurasi Apache
Setelah menginstal Apache dan melakukan konfigurasi PHP, kita harus pula melakukan konfigurasi pada Apache, langkahnya adalah sebagai berikut: 1. Cari file http.conf di C:\Apache2\conf 2. Editlah file http.conf dengan menggunakan teks editor 3. Bila belum ada tambahkan dua baris perintah berikut: LoadModule
php5_module “c:/php5apache2_2.dll” dan PHPIniDir “C:/php” pada bagian akhir file http.conf
4. Tambahkan baris perintah AddType application/x-httpd-php.php 5. Cari baris perintah DirectoryIndex dan lengkapi menjadi DirectoryIndex
index.html index.php 6. Dobel kliklah p[ada ikon Apache Service Monitor untuk menampilakan
Apache Service Monitor, lalu klik tombol Restrat 7. Bukalah jendela Browser, kemudian jalankan file phpinfo.php
Menginstal MySQL Selanjutnya kita perlu menginstal server Database MySQL. Kita dapat men-dwnload file MySQL dari situs http://www.mysql.com Setelah kita mendapatkan file penginstalan, dobel klik untuk menjalankan program ekstraksi yang ada pada komputer. Disini kita menggunakan WinZip setelah kita mengekstraksi file, dobel klik Setup.exe untuk memulai proses penginstalan. Dan ikuti langkah-langkah berikut:
1. Setelah kita dobel klik file penginstalan MySQL, lalu akan tampil kotak dialog. Disini kita menggunakan MySQL Server5.0.
7
2. Kliklah Next pada kotak dialog berikutnya, pilihlah jenis penginstalan. Kita bisa memilih Complete. Untuk menginstal MySQL secara lengkap. Kemudian tekanlah Next.
3. Tampilan berikutnya merupakan konfirmasi untuk melakukan penginstalan. Kliklah tombol Install untuk melanjutkan proses, tunggu hingga proses penginstalan selesai, lalu kliklah Finish
Mengatur Konfigurasi Database MySQL Setelah kita menginstal MySQL, proses selanjutnya adalah proses konfigurasi. Ikitu langkah-langkahnya sebagai berikut:
1. Kliklah Start > All Program > MySQL > MySQL Server 5.0 > MySQL Server Instance Config Wizard
2. Pada kotak dialog awal(Kotak dialog Welcome), kliklah Next untuk melanjutkan proses konfigurasi.
3. Ada dua pilihan konfigurasi yaitu: Detailed Configuration dan Standart Configuration. Pilihlah Detailed Configuration agar kita dapat melakukan konfigurasi selanjutnya. Kliklah Next untuk melanjutkan
4. Selanjutnya kita diminta memilih database MySQL yang kita gunakan, masing-masing pilihan disesuaikan dengan kapasitas memori komputer. Gunakan Server Mecine jika digunakan sebagai server database untuk web kemudian kliklah Next untuk proses penginstalan selanjutnya
5. Isi password pada user root untuk menjaga keamanan data yang ada dalam database. Tekanlah Next kemudian klik tombol Execute. Tunggu hingga setting selesai dan klik Finish
Mengenal Adobe Photoshop CS3
Adobe Photoshop CS3 merupakan salah satu program grafis yang dapat digunakan untuk mengoah gambardan membuat desain dalam pembuatan situs web. Adanya fasilitas tool akan memberi kemudahan dalam mengolah gambar maupun membuat desain halaman web. Lebih lanjut, ada banyak fasilitas lain yang mendukung keperluan dalam membuat desain halaman web yang menarik. Elemen Adibe Photoshop CS3 Pada saat pertama kali kita menjalankan Adobe Photoshop CS3, akan tampil lembar kerja Adobe Photoshop CS3. dengan elemen sebagai berikut:
a. Menu Bar berfungsi menampilkan pilihan menu atau perintah untuk pengopersikan Photoshop. Misalnya menu File, Edit, Image, Layer dan sebagainya
b. Toolbox merupakan sebuah kotak yang berisi berbagai peranti untuk memanipulasi dan menyunting sebuah tampilan
c. Option Bar menyediakan opsi tools pada Photoshop d. Pallet berfungsi mengontrol sifat dan cara kerja tombol-tombol yang ada
dalam toolbox
8
Peranti untuk membentuk seleksi
Tool Fungsi Rectangular Marquee Untuk membuat seleksi yang berbentuk
segi empat Elliptical Merquee Untuk membuat seleksi yang berbentuk
elips atau lingkaran dengan menekan tombol SHIFT sambil melakukan proses pada mouse
Single Row Marquee Untuk membuat seleksi Horizontal Single Coloum Marquee Untuk membuat seleksi Vertikal Lasso Untuk membuat seleksi dengan pola
bebas. Jika kita menggunakannya, saat melepas mouse titik awal dan titik akhir akan terhubung
Polygonal Lasso Untuk membuat seleksi berbentuk poligon atau segi banyak. Cara menggunakannya: klik sekali pada bidang ynag akan diseleksi sebagai titik awal, kemudian klik seleksi pada titk yang kedua dan lakukan terus sampai membentuk bidang seleksi yang diinginkan
Magnetic Lasso Untuk membuat seleksi yang melekat pada piksel yang dipilih. Cara menggunakannya: klik di satu titik bidang yang akan diseleksi, kemudian gerakkan mouse pada bidang yang diinginkan. Proses seleksi akan berhenti jika titik awal dan titik akhir saling bertemu, kemudian klik sekali pada pertemuan kedua titik.
Magic Wand Untuk membuat seleksi atas piksel-piksel yang ada di dalam kawasan warna tertentu
Crop Untuk membuang area yang tidak diinginkan
Peranti untuk menggambar
Tool fungsi Brush Untuk membuat goresan warna dengan
kuas Pencil Untuk membuat goresan secara bebas.
Warna yang digunakan adalah waran foreground
Color Replacement Untuk mengganti piksel warna pada bidag gambar
9
Gradient Open Gradian Piksel
Untuk memberi warna gradasi pada suatu objek
Menyediakan bentuk gradasi dan waran pada option bar Untuk menentukan arah arsiran
gradiant tool, pilihlah tombol gradasi yang tersedia di option bar
Paint Bucket Tool Untk memberi warna pada blok area tertentu. Proses menggunakannya pilihlah tombolnya dan klik mouse di area yang ingin diberi warna
Untuk membuat garis, tetapi dapat pula digunakan untuk membuat garis
Line Tool Dengan mata panah pada ujung garis Eraser Tool Untuk menghapus area pada layer aktif Nackgroud Eraser Untuk menghapus backgroud Magic Eraser Untuk menghapus area warna tertentu Peranti untuk membuat teks Tool Fungsi Horizontal Type Tool dan Type Mask Untuk membuat teks, kita pun dapat
memilih bentuk penulisan teks Peranti Lain Tool Fungsi Move Untuk memindah seleksi atau layer yang
aktif Eyedropper Tool Untuk memilih warna foreground dari
warna yang ada pada lembar kerja atau dari Swatcehes Pallete.
Zoom Tool Untuk memperbesar tampilan kerja.Untuk memperkecil tampilan zoom tool, kita dapat mengimbangi dengan menekan tombol Alt.
Menggunakan Gradient Tool Gradient Tool digunakanutnuk membuat gradasi warna yang berbeda.
Linier Gradient menghasilkan corak dari batas awal sampai batas akhir di dalam garis lurus Radial Gradient menghasilkan corak dari batas awal hingga batas akhir yang
berbentuk pola melingkar Angle Gradient corak yang dihasilkan dapat berupa sapuan yang berlawanan
dengan arah karum jam yang di sekeliling batas awal. - Reflected Gradient corak ang menggunakan gradasi garis lurus simetris
pada salah satu sisi batas awal
10
- Diamond Gradient menghasilkan corak dari sisi luar batas awal di dalam pola Diamond. Batas akhir menentukan satu sudut pada Diamond.
Untuk mengisi sebuah area dengan pola gradasi, kita bisa menggunakan proses drag pada image. Image gradasi ditampilkan pada batas awal (dimana mouse ditekan) dan batas akhir, tergantung pada peranti gradieant yang digunakan. Perhatikan langkah berikut untuk menggunakan warna gradasi:
1. Misalnya, buatlah sebuah image. Untuk mengisi bagian sebuah image, pilihlah area yang diinginkan. Sebaliknya warna gradasi akan diterapkan pada sebuah layer.
2. Pilihlah gradient tool. 3. Tentukan beberapa pilihan pada bagian options bar.
Pilihlah gradient fill dari palet pop-up. Tentukan Mode Blending dari Opacity untuk menggambar Aktifkan pilihan Reverse unutk membalik warana gradasi Aktifkan pilihan Dither untuk membuat campuran warna yang halus Pilihlah Transparancy untuk menggunakan lapisan transparan pada
gradasi warna 4. Tempatkan pointerpada image dimana kit aingin menentukan batas awal
gradasi warna, lalu drag untuk menentukan batas akhir
Mengenal HTML dan PHP
Membekali dasar-dasar teori HTML dan PHP tujuannya adalah agar membantu kita memahami script pemograman yang dapat diimplementasikan pada proyek web. Mengenal HTML dan PHP HTML adalah kependekan Hyper Text Markup Language. Dokumen HTML merupakan eks murni yang sering disebut wb page. Dokumen HTML berekstensi “.htm” atau “.html” sedangkan PHP adalah script pemograman yang terletak dan dieksekusi di server. Salah satu fungsinya adalah menerima, mengolah, dan menampilkan data dari dan ke sebuah situs Data akan diolah ke sebuah database server (program database yang terletak disisi server, contoh: MySQL) untuk kemudian hasilnya ditampilakan di browser sebuah situ. Dengan demikian, PHP dapat membuat situs lebih dinamis karena data situs dapat selalu berubah sesuai permintaan Mengenal Tag Dalam HTML Dokumen HTML terbentuk dari beberapa tag. Yaitu <html>, <head> dan <body>. Tag penutup diawali garis miring (/) </html>, </head> dan</body> Pola dasar HTML adalah sebagai berikut:
11
Kita dapat mengetik tag HTML dalam Notepad atau HTML, simpan dan beri nama lat1. html. Untuk menampilkannya dalam jendela browser, klik dua kali lat1.html, sehingga file akan ditampilkan dalam jendela browser.
Untuk memperindah tampilan web yang kita buat, ikuti langkah Tag HTML
berikut:
Membuat Paragraf dengan Tag HTML Untuk membuat suatu paragraf dalam dokumen HTML. Kita dapat menggunakan tag<p> dan diakhiri </p>
Tag HTML untuk Membuat Line Break Line Break <br> digunakan untk menganti baris. Tag <br> tidak diakhiri tag penutup. Untuk penulisannya, ketik tag <br> ddepan kalimat yang akan diganti barisnya.
Membuat Heading dengan tag HTML Halaman web terbagi menjadi beberapa Heading untuk besar kecilnya teks yang kita buat. HTML menyediakan 6 heading. Heading 1 merupakan heading dengan format yang lebih besar. Misalnya membuat judul dengan headnig 1. maka tag yang harus kita ketik adalah <h1> dan diakhiri dengan </h1>
Mengatur Perataan dengan Tag HTML Pengaturan perataan atau Alignment terdiri atas rata kiri (left), rata tengah (center) dan tara kanan (right) Perhatikan contoh berikut untuk penulisan perataan dalam heading dan paragraf: <h1 align=”center”>teks akan berada di tangah </h1> <p align=”right”> teks akan berada di kiri </p> Tag HTML untuk Membuat Garis Horizontal Selain format-format diatas, kita bisa menambahkan garis horizontal atau mendatar pada halaman web. Gunakan tag <hr> untuk membuat garis mendatar.
12
Menyisipkan Keterangan dalam Script HTML Dalam menuliskan tag HTML tidak jarang kita membutuhkan keterangan atau komentar sebagai penjelasan atau pengingat tag yang kita ketik. Keterangan tidak ikut ditampilkan dalam jendela browser. Untuk menambahkan keterangan. Ketiklah tag <!—sebagai tanda pembuka, ketik keterangan, kemudian akhiri dengan --> sebagai tag penutup
Membuat Layout Halaman Web Buka Dreamweaver CS3 dan pilihlah Dreamweaver site utnuk mendefenisikan situs yang akan kita buat, dan diberi nama dengan nama folder untuk menyimpan halaman wev Jika saat kita pertama membuka Dreamweaver CS3, kita dapat menemui welcome screen, pilihlah menu Site > Manage Site. Kemudian isikan nama situs, folder tempat penyimpanan halamn web (Local rot folder), dan alamat url-nya. Selanjutnya, pilihlah testing server. Server mode yang kita gunakan adalah PHP mySQL. Aksesnya adalah lokal karena kita bekerja menggunakan web server yang ada di komputer. Lebih lanjut, testing server folder adalah tempat kita untuk menyimpan halaman web yang kita buat. Setelah itu klik OK dan kotak dialog Sita akan tertutup. Perhatikan pada panel Files. Situs yang kita buat tadi sudah ada dalam Dreamweaver. Selanjutnya, setiap halaman yang kita buat akan tersimpan dalam situs my_web dalam Dreamweaver dan ada dalam folder C:\AppServ\www\my_web\. Membuat Header Website Ukalah program pengolahan gambar. Kita gunakan Adobe Photoshop CS3. buat file baru dengan ukuran 640x480 pixels Buka file baru dengan memilih File > New setelah muncul kotak dialog New. Isikan lebar (width) 640 pixels dan tinggi (Height) 480 pixels Pertama kita membuat bagian Header. Pilihlah Rectangular Marquee Tool untuk menyeleksi area yang akan kita gunakan utnuk header. Setelah memilih are header, ubahlah Set foreground Color dan pilih warna hijau. Pilihlah Set. Foreground Color akan muncul kotak dialoh Color Pixels. Pilih warna pada area Select Foreground Color. Setelah itu pilihlah Gradient Tool dengan mode Angle Gradient. Kemudian letakkan kusor, klik tahan lalu tarik mouse hingga terbentuk sesuai keinginan kita. Tambahkan tulisan Mu Web untuk judul web dan ubah jenis huruf sesuai keinginan. Membuat halaman pertama Anda Halaman ini adalah halaman dasar yang kita tampilkan di browser.
1. kembali ke Dreamweaver, lalu kita buat file baru. Pilih menu File > New > Dynamic Page > PHP. Kemudian simpan dengan mengklik File > Save dan beri nama index.php. lalu tambahkan tabel dengan mengklik Table muncul, isikan jumlah baris dan kolom dengan formasi 3 baris dan 2 kolom
13
2. Pada baris pertama dan ketiga gunakan Marge Cell untuk mengubahnya menjadi 1 kolom. Pilihla baris pertama kemudian klik kanan pada mouse dan pilihlah Table> Marge Cell, dan ulangi untuk baris ke-3
3. Setelah selesai kita masuk ke pemograman. Pilihlah Spilt untuk menampilkan Code View dan Design View
4. Beralihlah ke Code View. Hapuslah kode   dengan tombo Delete dan gantikan dengan kode PHP <? Include “header.PHP”;?> fungsi kodenya adalah memasukkan halaman header .php yang kita buat sebelumnya.
5. Untuk baris ke-3, ulangi langkah seperti tadi. Untuk baris ke-3, ketiklah <? Include “footer.PHP”;?>. kemudian pilihlah File > Save.
Membuat Pemograman Web dengan Dreamweaver CS3
Koneksi ke database 1. Bukalah Dreamweaver CS3 dan buka file index.php 2. Pilihlah panel Application > Database > + > MySQL Connection untuk
membuat koneksi database situs kita 3. Beri nama sesuai dengan gambar. Untuk MYSQL sever, username dan
password; sesuaikan dengan server dari database yang kita gunakan. Untuk database kita gunakan yang suda kita bua sebelumnya, yaitu myweb_db. Kemudian kliklah tombol Test untuk mengecek apakah sudah terkoneksi berhasil atau tidak. Jika sudah lanjutkan dengan mengklik OK
4. Jika koneksi sudah berhasil dibuat, didalam panel Application akan terdapat nama koneksi kita, yaitu myweb_koneksi.
Membuat Halaman Admin Setelah kita membuat koneksi, langkag selanjutnya adalah membuat halaman Admin. Sebelumnya kita buat dulu halaman untuk login. Membuat bagian Login: 1. Buatlah halaman baru. Pilih File > New Document > PHP dan beri nama
Login.PHP 2. letakkan form dengan mengklik Insert > Form > Form, 2 field teks untuk
Username dan Password serta tombol 1. Caranya, pilih Insert > Form > Textfield. Untuk masukkan tombol, pilihlah Insert > Form > Button.
3. Setelah itu pindah ke panel Application >Binding > + > Recordset untuk menampilkan darta user dari database
4. Kemudian beralih ke Server Behaviors > + > User uathentication > Log In User. Isikan data.
5. Tekan OK Membuat bagian Log Out 1. Buat halaman baru, lalu simpan dengan membuat nama Logout.PHP 2. Pilih panel Application > Server Behaviors > + > User Authentication >
Log Out User.
14
Membuat bagian Admin Pertama-tama yang kita bua adalah menu. Yang terdiri atas tulisan yang menghubungkan ke halaman-halaman lain: 1. Buat halaman baru dan simpan dengan nama menu.php. 2. Beralih ke Code View da tuliskan script berikut <table width=”200” boder=”” cellpadding=”0” sellspacing=”0”> <tr> <td allign=”center”><a href=”admin.PHP”>Admin Home</a> <hr/> <a href=”adminuser.PHP”>user</a> <hr/> <a href=”adminkategori.PHP”>Kategori</a> <hr/> <a href=”adminberita.PHP”>berita</a> <hr/> <a href=”Logout.PHP”> Log Out</a> <hr/></td> </tr> </table> Setelah selesai dengan nama menu, sekarang kita buka kembali halaman admin. Buat tampilan berikut dan tambahkan menu. Berikut adalah script programnya: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 transsitional//EN” http://www.w3.org/TR/xhtml1?DTD/xhtml1-transitional.dtd> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utp-8”> <title>halaman Admin</title> <style type=”text/css> <!-- .style1 {font-size:36px} --> </style> </head> <body> <table width=”640” border=”1” align=”center”> <tr> <td colspan=”2”><div align=”center”><strong>Halaman Admin </strong></div></td> </tr> <tr valign=”top”> <td width=”200” heigth=”347”><?PHP include “menu.php”;?.></td> <td width=”430” valign=”middle”><p align=”center” Class=”style1”>Selamat datang </p> <p align=”center” class=”style1”>Admin</p></td> </tr>
15
</table> </body> </html>
Membuat Halaman Kategori Sebagai halaman utama maka kita buat: 1. Buat halaman baru dan simpan dengan nama admin-kategori.PHP. kemudian
buatlah recordset kategori dengan memilih panel Application > Binding > + > Recordset
2. Isikan Nama= Kategori, Connection = myweb_koneksi, Table = kategori, Colums pilih All, Sort = nama-kategori,dan pilih Ascending untuk penguruta berdasarakan nama_kategori. Lalu OK
3. Setelah sukses, perhatikan pada Bildings telah terbentuk 1 recordset dengan nama kategori dan fieldnya, jika kita beralih ke halaman Code maka akan mendapatkan scrit berikut:
<?PHP require_once(‘Connection/myweb_koneksi.PHP’); ?> <?PHP MySQL_select_db($database_myweb_koneksi, $myweb_koneksi); $query_kategori +”SELECT * FROM kategori ORDER BY nama_kategori ASC”; $kategori=MySQL_query($query_kategori,$myweb_koneksi)or die(MySQL_eror()); $row_kategori = MySQL_fetch_assoc)$kategori); $totalRows_kategori =MySQL_num_rows($kategori); ?>
4. Akhiri dengan script berikut:
<?PHP MySQL_free_result($kategori); ?>
5. Selanjutnya, buatlah tampilan seperti yang kita buat 6. Kemudian pilih baris di bawah No, Kategori dan Proses. Selanjutnya, pilih
Application > Server Behaviors > + > repeat Region. Pilihlah Recordset = Kategori dan Show = All Records, lalu OK
7. setelah selesai, simpan dan cobalah di browser 8. Berikut adalah script keseluruhan halaman Kategori di atas
<?PHP require_once(‘Connections/myweb_koneksi.PHP’)?> <?PHP MySQL_select_db($database_myweb_koneksi,$myweb_koneksi); $query_kategoru = “SELECT * FROM kategori ORDER BY nama_kategori ASC”; $kategori =MySQL_query($query-kategori,$myweb_koneksi) or die(MySQL_error()); $row_kategori = MySQL_fetch_assoc($kategori); $totalRows_kategori = MySQL_num_rows($kategori);
16
?> <!DOCTYPE HTML PUBLIC “-//W#C//DTD HTML 4.01 Transitional//EN” <html> <head> <title>Halaman management Kategori</title> <meta http-equiv=”content-Type” content=”text/html; charset=iso-8859-1”> </Head> <body> <table width=”640” border=”1” align=”center”>
<tr> <td colspan=”2”><div align=”center”><strong>Halaman Management Kategori </strong?</div></td> </tr> <tr valign=”top”> <td width=”200” height=”347”><?PHP include”menu.PHP”;?></td> <td width=”430” align=”center” valign=”top”><p> </p> Table width=”400” border=”0”> <tr> <td align=”left”><div align=”left”><a Href=”adminkategoriinput.PHP”>Input Baru</a></div></td> </tr> <tr> <td><table width=”400”border=”1” cellpadding=”0” cellspacing=”0”> <tr> <td width=”48”><div align=”center”><strong>No</strong></div></td> <td width=”243><div Align=”center”><strong>kategori</strong></div></td> <td colspan=”2”><div Align=”center”><strong>Proses</strong></div></td> </tr> <?PHP do { ?> <tr> <td><?PHP $i++; Echo “$i”; ?></td> <td align=”left”><div align=”left”><?PHP echo
$row_kategori[‘nama_kategori”]; ?> </div></td> <td width=”53”><a href=”adminkategoriedit.PHP?id=<?PHP Echo $row_kategori[“id_kategori”]; ?>”>Edit</a></td> <td width=”46”><a href=”adminkategorihapus.PHP?id=<?PHP Echo $row_kategori[‘id_kategori’];?>”>hapus</a></td> </tr> <?PHP }while ($row_kategori = MySQL_fetch_assoc($kategori)); ?> </table></td> </tr> </table>
17
<p align=”center”></p></td> </tr> </table> </body> </html> <?PHP MySQL_free_result($kategori); ?> Membuat halaman Management User Bukalah halaman baru dan simpan dengan nama adminuser.PHP. buat recordset dengan nama user dengan isi dari tabel user. Dari recordset, nanti kita akan menampilkan data user. Setelah selesai, akan muncul di bawah panel Application > Bindings > Recordset (USER). Agar daftar user tampil secara keseluruhan, tambahkan Repeat Region untuk baris kedua. Pilihlah tabel baris kedua, lalu pulih Application > Server Behavior > + > Repeat Region Kemudian akan muncul kotak dialog Repeat Region. Isikan Record User yang akan menampilkan data user, disini kita gunakan All Record berarti menampilkan seluruh data. Berikut script programhalaman adminuser.PHP: <?PHP require_once(‘Connection/myweb_koneksi.PHP’);?> <?PHP If(!function_exist(“getSQLValue,$theType,$theDefinedValue =””,$theNotDefinedValue =””) { $theValue =get_magic_quotes_gpc() ? srtipslashes($thevalue) : $theValue; $thevalue = function_exists(“MySQL_real_escape_string”)? MySQL_real_escape_string($theValue) : MySQL_escape_string($theValue0; Switch ($theType) { Case “text”: $theValue = ($theValue !=””) ? “”.$theValue .”” : “NULL”; Berak; Case”long” Case”int”: $theValue = ($theValue !=””) ? intval($theValue) : “Null”; Break; Case “double”: $theValue ($theValue !=””)?””.doubleval($theValue).””: “NULL”; Break; Case “date”: $theValue = ($theValue !=””) ? “”.$theValue.””:”NULL”;
18
Break; Case “defined”: $theValue = ($theValue !=””) ?theDefinedValue : $theNotDefinedValue; Break; } Return $theValue; } } MySQL_select_db($database_myweb_koneksi, $myweb_koneksi); $query_user = “SELECT * FROM ‘user’”; $user = MySQL_query($query_user,$myweb_koneksi) or die(MySQL_error()); $row_user = MySQL_fetch_assoc($user); $totalRows_user =MySQL_num_rows($user); ?><!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/> <title>halaman management user</title> </head> <body> <tablr width=”640” border=”1” align=”center”> <tr> <td colspan=”2”><div align=”center”><strong>halaman management user</strong></div></td> </tr> <tr valign=”top”> <td width=”200” heigth=”347”><?PHP include “menu.PHP”;?></td> <td width=”430” align=”center” valign=”top”><p </p> <table width=”400” border=”0”> <tr> <td align=”left”><div align=”left”><div align=”left”><a Href=”adminuserinput.PHP”>Input baru</a></div></td> </tr> <tr> <td><table width=”400”border=”1” cellpading=”0” cellpacing=”0”> <tr> <td width=”48”><div Align=”center”><strong>No</strong></div></td> <td width=”201”><div align=”center”><strong>Daftar User</strong></div></td> <td colspan=”3”><div Align=”center”><strong>Proses</strong></div></td> </tr> <?PHP do { ?> <tr> <td><?PHP $i++; Echo “$i”; ?></td>
19
<td align=”left”><div align=”left”><?PHP echo $row_user[‘nama’]; ?> </div></td> <td width=”50”><a href=”adminuserview.PHP?id=<?PHP ecjo $row_user[‘id_user’]; ?>”>View</a></td> <td width=”43”><a href=”adminuseredit.PHP?id=<?PHP echo $row_user[‘id_user’]; ?>”>Edit</a></td> <td width=”46”<a href=”adminhapus.PHP?id=<?PHP echo $row_user[‘id_user’] ?>”>Hapus</a></td> </tr> <?PHP } while ($row_user = MySQL-fetch_assoc($user)); ?> </table></td> </tr> </table> <p align=”center”> </p> </td> </tr> </table> </body> </html> <?PHP mySQL_free_result($User); ?> Didalam script halaman adminuser di atas, ada script berikut: <td width=”200” height=”347”><?PHP include”menu.PHP”;?></td> Fungsi perintah di atas adalah memanggil halaman menu.php yang sudah kita buat sebelumnya. Maka kalau ada perubahan, kita tidak perlu mengubah setiap halaman yang memiliki halaman menu.php Kemudian, Halaman Manegement User memiliki beberapa link tambahan, yaitu inptu baru, dan pada setiap baris data terdapat link View, Edit dan Hapus. Tiap menu mengacu pada halaman yang berbeda dan berdasarkan pada id data masing-masing. Bagian script programnya adalah: <td width=”50”><a href=”adminuserview.PHP?id=<?PHP echo $row_user[‘id_user’]; ?>”> View</a></td> <td width=”43”><a href=”adminuseredit.PHP?id=<?PHP echo $row_user[‘id_user’]; ?>”>edit</a></td> <td width=”46”><a href=”adminhapus.PHP?id=<?PHP echo $row_user[‘id_user’]; ?>”>Hapus</a></td> Ketika kita mengklik View, browser akan beralih ke halaman adminuserview.php dengan membawa id data yang diambil dari recordset user pada field id_user, yaitu <?PHP echo $row_user[‘id_user’]; ?>. begitu pula seterusnya dengan Edit dan Hapus. Berbeda dengan input baru. Jika kita mengkliknya maka akan mereferensi ke halaman adminuserinput.php yang digunakan untuk memasukkan daftar user baru.
20
21
