Rabu, 28 Maret 2012

TUTORIAL PEMBUATAN WEBSITE -4



Character
Pada kategori ini anda dapat memasukkan macam-macam karakter dari teks atau object. Pilih kategori Charackter ini dengan mengklik button paling atas di Object panel, pilih Character.
Kategori Character ini terdiri dari :
Line Breaking , membuat alinea baru.
Non-Breaking Space , memasukkan spasi pada teks atau object.
Copyright , memasukkan karakter Copyright.
Registered , memasukkan karakter registered
Trademark , memasukkan karakter Trademark
Dan berbagai macam karakter yang bisa anda masukkan pada dokumen anda.
PROPERTY INSPECTOR
Pada Property inspector anda dapat memeriksa dan mengedit elemen yang ada pada halaman web. (Elemen itu adalah object atau teks).
Untuk menampilkan atau menyembunyikan Property inspector, pilih menu
Window > Properties.
Selama ini anda mengedit dan membuat teks atau mengedit object didalam dokumen pada tampilan window, dengan Property inspector anda dapat mengeditnya denga cepat.(seperti contohnya : anda ingin merubah jenis fonts teks yang sudah anda buat dengan shadding teks lalu mengganti jenis font, atau pada object anda dapat merubah alamat URL atau link yang dituju).
Tampilan Property inspector sangat bervariasi tergantung elemen yang dipilih. Untuk informasi properties yang spesifik, pilih elemen yang diinginkan pada dokumen window lalu klik icon Help pada pojok kanan atas daripada Property inspector.

Memilih Jenis Font
Pada Property inspector bar, anda diberikan fasilitas dalam memilih jenis- jenis teks atau font untuk penulisan pada pembuatan halaman web anda.

Mengatur format teks
• Ukuran teks atau font dapat diatur pada kolom size
• Anda dapat memilih align dari teks anda
• Membuat list numbering atau bullet
BUAT TEMAN-TEMAN YANG TERTARIK DENGAN PEMBUATAN WEBSITE,BISA DI DOWNLOAD DISINI TUTORIALNYA LENGKAP FORMAT PDF...GRATIS..TIS..TIS,KEBETULAN SAYA SUDAH KELAR NULISNYA JADI TAK SHARE AJA HEHEHEHE...SIAPA TAHU BERMANFAAT BUAT TEMAN-TEMAN
DOWNLOAD DISINITUTORIAL WEBSITE BY  wahyu

Read more: http://ekowahyono.blogspot.com/2010/09/tutorial-pembuatan-website-4.html#ixzz1qTe283jL

TUTORIAL PEMBUATAN WEBSITE -3

DREAMWEAVER WORK AREA 

Kita mulai dengan overview dari dreamweaver work area atau daerah kerja dreamweaver. 
• Jika anda belum masuk ke dalam program dreamweaver, klik 2 kali pada icon shortcut dreamweaver atau klik pada start menu pilih program lalu pilih program macromedia dreamweaver 4 , klik 1 kali pada icon dreamweaver 4. 
Pada area kerja dreamweaver 4 akan tampak seperti di bawah ini :



• Pada tampilan di atas adalah tampilan dimana dokumen yang akan anda buat dan edit. 
• Pada object panel terdapat icon-icon yang dapat anda klik untuk memasukkan object pada dokumen anda dan untuk merubah cara anda dalam pembuatan halaman web. 
• Launcher bar terdapat button-button untuk membuka dan menutup panel-panel icon dimana anda sering menggunakannya dalam bekerja. 
• Pada property inspector ditampilkan properti-properti dari object atau text yang dipilih dan anda dapat memodifikasi properti tersebut. (contoh = jenis text, ukuran text, dan sebagainya) 

Untuk membuka tampilan windows, inspector dan panel-panel, gunakan menu Window. Beri tanda check untuk memilih tampilan mana yang anda perlukan pada tampilan window. 

DOCUMENT WINDOW 

Pada baris judul dari tampilan document window ditunjukkan judul halaman, nama folder dan nama file ada dalam tanda kurung. Bila file anda belum disimpan akan terdapat tulisan unsaved. 
Status bar, didapat pada bagian paling bawah document window, menunjukkan informasi-informasi tentang dokumen yang sedang anda buat.



Pada tag selector menampilkan HTML control pada text atau object yang anda pilih. Klik salah satu text atau object maka pada tag selector akan tampak HTML control, contoh anda dapat mengklik pada dokumen window, pada tag selector akan tampak tulisan disini menunjukan anda sedang bekerja pada body dari dokumen secara HTML. 

Pada Window size pop-up menu dapat melihat ukuran window yang ditampilkan dan anda dapat mengedit tampilan ukuran yang anda inginkan 


Disebelah kanan menu window size pop-up dapat anda lihat ukuran besarnya file dokumen dan waktu yang dibutuhkan untuk download file pada tampilan window. 

Launcher bar yang terdapat di sebelah kanan bawah pada tampilan window, pada setting awal launcher bar buttons akan menampilkan Asset panel, HTML styles panel, CSS styles panel, Behaviors panel, History panel dan Code inspector. 

Mengatur ukuran window 

Pada status bar di dokumen window menampilkan dimensi atau ukuran window saat itu (dalam pixel). Jika anda mengklik ukuran window ini, Dreamweaver menampilkan menu window size pop-up, dimana anda dapat mengatur ukuran yang cocok untuk tampilan pada monitor anda. Untuk mendesain sebuah halaman pada ukuran spesifik yang terbaik, anda dapat memilih pada ukuran yang sudah ditentukan, mengatur ukuran yang sudah ditentukan itu sesuai dengan keinginan anda atau membuat ukuran baru. 
TOOLBAR

Toolbar dreamweaver terdapat button-button yang dapat anda pilih dalam menampilkan dokumen anda secara cepat : Code (HTML), desain, dan gabungan keduanya yaitu tampilan secara HTML dan desain.Toolbar juga menampilkan button-button perintah yang terdapat pada sebelah kanan nama dokumen. 
• Untuk menampilkan dan menyembunyikan Toolbar, pilih menu 
View > Toolbar. 
• Untuk tampilan dokumen secara kode atau HTML , klik button Code View pada toolbar. Disini anda dapat mengedit atau membuat halaman web anda secara HTML 
• Untuk tampilan dokumen secara kode dan desain, klik button Code 
& Design View 
• Untuk tampilan dokumen secara desain, klik button Design View. 
Disini anda bisa mengedit atau membuat halaman web anda secara visual. 
• Untuk merubah nama dokumen, klik pada title lalu rubah nama dokumen sesuai dengan keinginan anda. 
• Anda dapat melihat halaman web secara browser (Internet 
Explorer) dengan mengklik button Preview Browser. 
• Pada Options menu, anda dapat memilih tampilan desain yang anda inginkan , contoh : anda dapat menambahkan tampilan Rulers(garis ukuran) untuk memudahkan anda dalam mendesain sebuah web. 
OBJECT PANEL 

Pada Object panel terdapat button-button untuk membuat dan memasukkan object seperti tabel, layer dan images. Untuk menampilkan dan menyembunyikan Objects panel, pilih menu Window > Objects. 

Memasukkan sebuah Object : 

Klik icon button pada Object panel, tergantung pada object yang dipilih setelah anda mengkik salah satu button maka akan tampil Dialog Box yang harus anda isi untuk memasukkan object tersebut. 
Object panel terdiri dari 7 kategori : Character, Common, Form, Frames, Head, Invisibles dan Special. Semua kategori tersebut menampilkan button untuk merubah tampilan : Standard dan Layout. 
Untuk saat ini kita hanya akan membicarakan kategori Common atau kategori yang umum dan biasa dipakai dan kategori Character. 


Common 
Kategori Common pada Object panel terdiri dari : 

Image Memasukkan sebuah gambar atau image pada cursor. Dialog Box akan tampil sehingga anda dapat secara spesifik memilih file image yang anda inginkan. 

Rollover Image Anda dapat secara khusus memilih 2 file image yang akan anda masukkan dan membuat 2 file image tersebut ditampilkan secara rollover. Rollover adalah bila sebuah gambar atau image akan berubah menjadi gambar yang lain bila mouse pointer dikenakan pada image tersebut. 

Tabular Data Membuat tabel, lalu mengisi tabel tersebut dengan data dari file yang lain (seperti Microsoft Excel atau dari database). 
Navigation Bar Memasukkan beberapa image untuk Navigasi masuk ke site yang lain. 
Layer Membuat sebuah layer. Klik button layer, lalu tempatkan mouse pointer pada halaman kerja dan drag untuk mengatur ukuran dan lokasi dari layer tersebut. 
Date Menempatkan tanggal pada halaman web. Dialog Box akan muncul untuk spesifikasi format dari tanggal, Dreamweaver akan mengupdate dari tanggal secara otomatis setiap kali anda menyimpan file. 
Server-Side Include Memasukkan server-side termasuk dalam web page. Dialog Box akan tampil dimana anda dapat memilih sumber file yang ada di server. 
Fireworks HTML Memasukkan file HTML yang sudah dibuat atau sudah ada yang dibuat dari program Fireworks. 
Shockwave Menempatkan movie dari Macromedia Shockwave pada halaman web. Dialog Box akan muncul agar anda dapat memilih sumber file DCR daripada movie, atau anda dapat menggunakan Property inspector untuk menspesifikasi sumber file. 
Layout and View 
Pada bagian View daripada Object panel terdapat button-button untuk anda pilih mode tampilan, Standard atau Layout. 

Draw Layout Cell Membuat tabel cell secara individu pada tampilan 
Design View. 
Draw Layout Table Membuat tabel secara individu pada tampilan Design 
View. 
====>>>>>NEXT..... 


Read more: http://ekowahyono.blogspot.com/2010/09/tutorial-pembuatan-website-3.html#ixzz1qTdVqlXu

TUTORIAL PEMBUATAN WEBSITE -2


MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML
Dreamweaver menawarkan berbagai macam cara untuk membuat suatu dokumen. Anda dapat membuat baru, dokumen HTML yang kosong; Anda dapat membuka dokumen HTML yang sudah ada, atau jika untuk mempersingkat waktu, anda dapat membuat dokumen baru berdasarkan template (blangko).
Membuat dokumen HTML kosong baru :
Pada tampilan windows, pilih menu File > New.


Untuk membuka file HTML yang sudah ada :
Pilih menu File > Open
Anda dapat memilih file HTML yang anda inginkan.

Membuat dokumen baru berdasarkan template :
• Pilih menu File > New from Template. Akan tampak dialog box, daftar template-template yang ada (anda harus membuat sebuah template terlebih dahulu sebelum membuat dokumen baru berdasarkan template)
• Pilih salah satu template. Dokumen baru akan dibuat berdasarkan template tersebut.
Menyimpan dokumen :
• Pilih menu File > Save.
• Ketik nama file dan tentukan dimana anda ingin menyimpan file tersebut.
Catatan : Dreamweaver akan secara otomatis menyimpan file tersebut dalam bentuk htm atau html.
• Klik button Save untuk menyimpan file tersebut.

Mengatur document properties
Judul halaman, background image dan warna-warna, teks dan warna link adalah dasar dari semua dokumen HTML. Judul halaman merupakan identitas dan nama dokumen. Background image atau gambar background dari halaman (kita bisa juga memakai warna untuk background) diatur untuk keseluruhan tampilan dari dokumen tersebut. Teks dan warna link membantu untuk pengunjung situs membedakan teks mana yang bisa masuk kehalaman lain, dan juga bisa membedakan dari warna teks link sudah dikunjungi atau belum.

Merubah judul halaman
Judul dari halaman HTML sangat membantu pengunjung tetap dapat memberitahu site apa yang sedang pengunjung buka, dapat dilihat pada menu bar windows dibawah. Jika anda memberi judul pada halaman tersebut maka tidak akan tampak identitas halaman tersebut pada tampilan window.

Untuk mengganti judul halaman :
Langkah-langkah :
• Pilih menu Modify > Page Properties.
• Klik kursor anda pada daerah kosong di halaman web. Lalu pilih Page
Properties dengan mengklik kanan mouse anda.
Masukkan judul untuk halaman tersebut pada title text box.



Read more: http://ekowahyono.blogspot.com/2010/09/tutorial-pembuatan-website-2.html#ixzz1qTd4XP2B

TUTORIAL PEMBUATAN WEBSITE -1


MERENCANAKAN SEBUAH WEBSITE
Dalam membuat website kita harus merencanakan dahulu apa tujuan dari pembuatan website ini, informasi-informasi apa yang akan diberikan dan kepada siapa informasi-informasi tersebut dituju.Macromedia Dreamweaver adalah salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk mendesain website yang lebih kreatif, anda dapat membuat sebuah site yang komplit. Untuk mendapatkan hasil lebih bagus, anda harus mendesain dan merencanakan wesite anda lebih dahulu untuk tiap-tiap halaman site yang ada.
Rencana dan desain sebuah site
Ketika memulai merencanakan membuat website, anda diharapkan melakukannya secara bertahap dan terencana untuk memastikan situs anda baik dan berhasil. Walaupun anda hanya akan membuat homepage pribadi yang hanya akan dilihat dan dikunjungi oleh teman dan keluarga anda. Bagi anda seorang staff pengajar situs pribadi anda bisa digunakan untuk memberikan informasi dan layanan ajar online untuk mahasiswa anda.
Menentukan tujuan anda
Menentukan tujuan site anda adalah langkah pertama kali yang harus anda ambil untuk pembuatan sebuah website. Tanya pada diri anda atau rekan anda tentang sebuah website. Apa yang anda harapkan bila anda mempunyai situs pribadi? Tulis semua tujuan dan harapan anda agar anda dapat mengingatnya saat proses mendesain website. Tujuan-tujuan tersebut akan sangat membantu anda agar tetap terfokus dan mempunyai target terhadap website yang anda inginkan. Sebuah website yang memberikan berita-berita dengan subjet tertentu sangat berbeda dengan website yang menjual produk atau komersial. 
Memilih sasaran pengunjung situs
Setelah anda menentukan apa yang anda inginkan untuk menyelesaikan website anda, anda harus menentukan siapa saja, atau sasaran pengunjung situs anda. Sebenarnya ini adalah pertanyaan bodoh, siapa saja didunia dapat mengunjungi situs anda. Banyak orang mengunakan browser berbeda satu dengan lainnya, kecepatan yang berbeda, dan punya atau tidak punya media plug-in tambahan (contoh=speaker). Semua faktor-faktor tersebut dapat mempengaruhi dalam menggunakan situs anda. Maka anda harus menentukan target audience, setelah itu dapat mendesain website anda.
===TUTORIAL BAG-1=====NEXT

Read more: http://ekowahyono.blogspot.com/2010/09/tutorial-pembuatan-website-1.html#ixzz1qTcHgzoC

BELAJAR MEMBUAT WEBSITE DENGAN HTML

Bagaimana cara membuat website? Ada beberapa tahapan dan langkah yang harus kita lalui untuk membuat sebuah Website yang baik. Lain halnya dengan instan CMS maupun instan blog yang kita tinggal mendaftar saja di penyedia layanan blog seperti Blogspot, Wordpress, dll. Maupun CMS seperti Joomla, Mambo, dll yang tinggal instal saja seperti. Disini kita belajar manual web (membuat website secara manual) walaupun masih sederhana dan statis. Untuk membuat website pertama-tama kita harus belajar bahasa HTML yaitu sebuah "bahasa program" yang memungkinkan kita membuat halaman web yang bisa ditampilkan dalam browser (Chrome, Firefox, Internet Explorer, Netscape, Opera, dll).

Nah, kini kita mulai dari langkah awal yaitu belajar bahasa HTML.

BELAJAR WEBSITE

Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, Sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk mudahnya, kita gunakan program Dreamweaver.

Apa yang dimkasud dengan file HTML?

-    HTML merupakan kependekan dari Hyper Text markup Language

-    Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

-    Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

-    File HTML harus memiliki ekstensi htm atau html

-    File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code 
tutorial dreamweaver
disini anda akan menemui tag - tag semacam ini:
<HTML>
</HTML>
Penjelasan:
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing.  
Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash(garis miring) di depan awal tulisannya. 
Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser. 

Sekarang kita akan beralih pada tag selanjutnya.
<HTML>
<BODY>
</BODY>
</HTML>
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Sekarang simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah hasil karya anda yang pertama dengan menekan F12 disitu akan muncul tulisan "Tulisan ini akan tampak dalam browser by ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan saja sedangkan tagnya hanya merupakan suatu perintah bagi browser untuk menampilkan perintah kita. 

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.
<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya tekan F12 atau klik tombolRefresh pada browser atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:
tutorial dreamweaver
Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa contohnya seperti #rrggbb.

Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD dan TITLE. Di sini terlihat bahwa kita mempunyai tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:
<HTML>
<HEAD>
<TITLE>WEBSITE BUATANKU</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: WEBSITE BUATANKU 
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:
tutorial dreamweaver
Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver 
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/

Senin, 26 Maret 2012

PENCARIAN DATA DAN EDIT, UPDATE DATA DENGAN DATABASE MYSQL DENGAN KATA KUNCI OPTION.

BELAJAR PHP PENCARIAN DATA DAN EDIT, UPDATE DATA DENGAN DATABASE MYSQL DENGAN KATA KUNCI OPTION

 Panduan ini merupakan lanjutan dari panduan ini. Jika kamu belum membuat / mempraktekkan panduan sebelumnya, kamu bisa mendownload filenya di sini.
Kita akan belajar : mencari data dan mengupdate data dari php ke mysql
Logika Langkahnya :
1. Membuat form pencarian (halaman pencarian) –> formcari.php
2. Membuat script action pencarian –> cari.php
3. Membuat script update data –> update.php
Kita mulai
1. Membuat form pencarian
  • Jangan lupa jalankan xampp
  • Buka notepad atau notepad++
  • Ketikkan :
<?
echo “<b> PENCARIAN BUKU TAMU </b>”;
echo “<form method=’post’ action=’cari.php’><br>”;
echo “Cari berdasarkan<br>”;
echo “<select name=’pilihan’>”;
echo “<option value=’nama’>Nama </option>”;
echo “<option value=’alamat’>Alamat</option>”;
echo “</select>”;
echo “<input type=’text’ name=’katacari’><br><br>”;
echo “<input type=’submit’ value=’cari…’>”;
echo “</form>”;
?>
  • Simpan di folder c:\xampp\htdocs\tamu dengan nama formcari.php
  • Jalankan, buka browsermu ketikkan pada addres bar localhost/tamu/formcari.php

  • Hasil :

Tampilan di atas belum berfungsi karena action : cari.php belum kita buat.
2. Membuat script action pencarian
  • Buka notepad, ketikkan :
<?
$host=”localhost”;
$user=”root”;
$password=”";
$db=”databaseku”;
$konek=mysql_connect($host,$user,$password) or die (mysql_error());
mysql_select_db($db,$konek) or die (mysql_error());
$opt=$_POST['pilihan'];
$katakunci=$_POST['katacari'];
$query=mysql_query(“select*from buku_tamu where $opt like ‘%$katakunci%’”,$konek) or die (mysql_error());
while ($data=mysql_fetch_array($query))
{
echo “<b>EDIT / UPDATE Buku Tamu</b><br>”;
echo “<form method=’post’ action=’update.php’>”;
echo “Nama : <input type=’text’ name=’nama_tamu’ value=’$data[0]‘><br><br>”;
echo “Alamat : <input type=’text’ name=’alamat_tamu’ value=’$data[1]‘><br><br>”;
echo “Pesan : <textarea row=5 cols=45 name=’pesan_tamu’ rows=5>$data[2]</textarea><br>”;
echo “<input type=’submit’ value=’UDPATE’>”;
echo “<input type=’reset’ value=’CANCEL’>”;
echo “</form>”;
echo “<a href=’lihat.php’>Lihat Buku Tamu</a>”;
}
?>
  • Simpan di c:\xampp\htdocs\tamu dengan nama cari.php
  • Untuk melihat cari.php sukses atau tidak, kita coba mencari data. Buka formcari.php
(localhost\tamu\formcari.php)
Pilih option dan ketikkan kata kunci pencarian (usahakan kata kuncinya yang di dalam table ada datanya). Jika berhasil, maka nanti data yang kita cari akan ditampilkan. Bila data yang kita cari tidak ada, maka halaman akan kosong.
  • Hasil :
3. Membuat action update
  • Buka notepad, ketikkan :
<?
$host=”localhost”;
$user=”root”;
$password=”";
$db=”databaseku”;
$konek=mysql_connect($host,$user,$password) or die (mysql_error());
mysql_select_db($db,$konek) or die (mysql_error());
$update=mysql_query(“update buku_tamu set nama=’$_POST[nama_tamu]‘,alamat=’$_POST[alamat_tamu]‘,pesan=’$_POST[pesan_tamu]‘”,$konek) or die(mysql_error());
if($update)
{
header(“refresh:1;url=’lihat.php’ “);
}
?>
  • Simpan dengan nama update.php
  • Kita uji apakah sudah berhasil update kita.
    Buka browser, ketikkan localhost/tamu/formcari.php
  • Ketikkan kata kunci pencarian
    Kita akan diberikan tampilan data yang kita cari
  • Ubah data tersebut, kemudian klik update.
    Hasil :
Pada update.php setelah data database diperbaharui kita akan langsung direct ke halaman lihat.php
Halaman tersebut(lihat.php) telah kita buat pada panduan/praktek sebelumnya.
Di situ bisa kita lihat data kita telah berubah/terupdate.
Selamat mencoba.

MEMBUAT APLIKASI SEDERHANA DENGAN PHP.

Aplikasi Input Data Sederhana Dengan PHP

WP Greet Box icon
Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.
Detil Tutorial 
Tingkat Kesulitan: Pemula
Bahasa: PHP
Software yang Digunakan: Dreamweaver
Lama Pengerjaan: 1 Hours – 2 Hours

Untuk mengawali kembalinya blog yang sudah lama tidur ini, saya membuat tutorial untuk aplikasi input data sederhana dengan menggunakan PHP. Dalam tutorial ini akan dipelajari cara untuk membuat koneksi ke database dan CRUD data (Create, Read, Update, Delete) dengan studi kasus data user. Tutorial ini belum membahas tentang validasi inputan baik client side maupun server side.
Untuk dapat mengikuti tutorial ini, pastikan anda sudah menginstall server lokal pada PC anda. Saya menggunakan XAMPP sebagai bundled server apache dan PHP.

Langkah 1 – Struktur Folder

Buat folder baru pada C:\xampp\htdocs\ dengan nama belajar. Folder ini akan menjadi area kerja kita dalam membuat aplikasi yang nantinya dapat diakses menggunakan browser dengan mengetikkan localhost/nama_folder. Karena nama folder kita adalah belajar, maka untuk mengakses aplikasi ketikkan localhost/belajar pada address bar browser anda.

Langkah 2 – Database

Buat database dengan nama belajar. Kemudian buat tabel dengan nama user dengan data berikut:
Fieldname Datatype
user_id int(4), PRIMARY, AUTO INCREMENT
username varchar(20)
password varchar(255)
email varchar(100)
fullname varchar(100)
agama varchar(15)
no_hp bigint(14)

Langkah 3 – File Konfigurasi

Sebelum dapat melakukan CRUD data kedalam database, kita harus membuat koneksi  ke database terlebih dahulu. Tulis kode berikut dengan menggunakan teks editor kesayangan anda (saya pake dreamweaver).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
//host yang digunakan
//99,9% tidak perlu dirubah
$host = 'localhost';
 
//username untuk login ke host
//biasanya didapatkan pada email konfirmasi order hosting
$user = 'root';
 
//jika menggunakan PC sendiri sebagai host,
//secara default password dikosongkan
$pass = '';
 
//isikan nama database sesuai database
//yang dibuat pada langkah-1
$dbname = 'belajar';
 
//mengubung ke host
$connect = mysql_connect($host, $user, $pass) or die(mysql_error());
 
//memilih database yang akan digunakan
$dbselect = mysql_select_db($dbname);
?>
File config.php ini nantinya akan banyak kita gunakan pada file-file lain yang perlu menghubung ke server untuk menyimpan, merubah, maupun menghapus data.

Langkah 4 – Form Input Data

Ketikkan kode berikut, kemudian simpan dalam folder belajar dengan nama index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
<head>
<title>Belajar PHP</title>
</head>
 
<body>
<h1>Form Input Data</h1>
 
<form name="input_data" action="insert.php" method="post">
<table border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td>Username</td>
            <td>:</td>
            <td><input type="text" name="username" maxlength="20" required="required" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td>:</td>
            <td><input type="password" name="password" maxlength="20" required="required" /></td>
        </tr>
        <tr>
            <td>Fullname</td>
            <td>:</td>
            <td><input type="text" name="fullname" maxlength="100" required="required" /></td>
        </tr>
        <tr>
            <td>Email</td>
            <td>:</td>
            <td><input type="email" name="email" required="required" /></td>
        </tr>
        <tr>
            <td>Agama</td>
            <td>:</td>
            <td><input type="text" name="agama" required="required" /></td>
        </tr>
        <tr>
            <td>Nomor HP</td>
            <td>:</td>
            <td><input type="text" name="no_hp" maxlength="14" required="required" /></td>
        </tr>
        <tr>
            <td align="right" colspan="3"><input type="submit" name="submit" value="Simpan" /></td>
        </tr>
    </tbody>
</table>
</form>
</body>
</html>
action=”insert.php” adalah file yang digunakan untuk memproses data yang dimasukkan melalui form ini. method=”post” adalah metode pengiriman data yang digunakan. Ada dua jenis menthod untuk mengirim data, yaitu post dan get.
Pengiriman dengan method POST berarti bahwa variabel-variabel data tidak ditampilkan pada url, sedangkan pengiriman dengan method GET, variabel-variabel data disertakan pada url sehingga url terlihat seperti ini: localhost/belajar/insert.php?username=namanya&password=passwordnya&fullname=nama_lengkapnya
Sekarang coba buka pada browser anda dengan mengetikkan localhost/belajar pada address bar browser. Akan tampil form input data seperti ini.
form input data

Langkah 5 – Menyimpan Data

Ketikkan kode berikut, kemudian dengan nama insert.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
//panggil file config.php untuk menghubung ke server
include('config.php');
 
//tangkap data dari form
$username = $_POST['username'];
$password = $_POST['password'];
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$agama = $_POST['agama'];
$no_hp = $_POST['no_hp'];
 
//simpan data ke database
$query = mysql_query("insert into user values('', '$username', '$password', '$email', '$fullname', '$agama', '$no_hp')") or die(mysql_error());
 
if ($query) {
    header('location:index.php?message=success');
}
?>
include() digunakan untuk menyertakan file lain dalam file ini. Ingat bahwa pada langkah pertama kita sudah membuat file config.php yang berisi konfigurasi untuk menghubung ke server, maka setiap kali kita perlu untuk menghubung ke database, kita cukup memanggil file config.php saja tanpa harus menuliskan kembali kode-kodenya.
$_POST['name'] digunakan untuk menangkap value yang dikirim dari form. Untuk menangkap data, gunakan name yang sama dengan name dari form. Contoh: untuk menangkap data username dari form, maka gunakan $_POST['username'].
mysql_query() digunakan untuk menjalankan script SQL. Pada langkah ini, script SQL yang kita gunakan adalah untuk menambah data ke database.
Tambahkan kode berikut pada file index.php setelah <h1></h1> untuk menampilkan pesan sukses ketika berhasil menyimpan data.
1
2
3
4
5
6
7
8
9
10
11
...
<h1>Form Input Data</h1>
 
<?php
if (!empty($_GET['message']) && $_GET['message'] == 'success') {
    echo '<h3>Berhasil menambah data!</h3>';
}
?>
 
<form name="input_data" action="insert.php" method="post">
...
Sekarang coba jalankan aplikasi dengan membuka localhost/belajar dan isikan data pada form dan klik tombol simpan. Jika berhasil, anda akan melihat pesan Berhasil menambah data! seperti gambar dibawah. Jika gagal, periksa kembali kode yang anda tuliskan. Pastikan tidak ada salah pengetikan.
berhasil input data

Langkah 6 – Menampilkan Data

Setelah kita berhasil menyimpan data kedalam database, sekarang kita buat halaman untuk menampilkan data-data yang sudah kita simpan. Ketikkan kode berikut dan simpan dengan nama view.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php
include('config.php');
?>
 
<html>
<head>
<title>Belajar PHP</title>
</head>
 
<body>
<h1>Data User</h1>
 
<a href="index.php">+ Tambah Data</a>
 
<table border="1" cellpadding="5" cellspacing="0">
    <thead>
        <tr>
            <td>No.</td>
            <td>Username</td>
            <td>Password</td>
            <td>Email</td>
            <td>Fullname</td>
            <td>Agama</td>
            <td>No. HP</td>
            <td>Opsi</td>
        </tr>
    </thead>
    <tbody>
    <?php
    $query = mysql_query("select * from user");
 
    $no = 1;
    while ($data = mysql_fetch_array($query)) {
    ?>
        <tr>
            <td><?php echo $no; ?></td>
            <td><?php echo $data['username']; ?></td>
            <td><?php echo $data['password']; ?></td>
            <td><?php echo $data['email']; ?></td>
            <td><?php echo $data['fullname']; ?></td>
            <td><?php echo $data['agama']; ?></td>
            <td><?php echo $data['no_hp']; ?></td>
            <td><a href="#">Edit</a> || <a href="#">Hapus</a></td>
        </tr>
    <?php
        $no++;
    }
    ?>
    </tbody>
</table>
</body>
</html>
Kemudian tambahkan kode berikut pada file index.php setelah </form> sebelum </body>.
1
2
3
4
5
6
7
...
</form>
 
<a href="view.php">Lihat Data</a>
 
</body>
</html>
Sekarang bukalah localhost/belajar/view.php untuk melihat hasilnya.
view data
Pada kolom opsi terdapat dua menu, yaitu edit dan hapus. Pada langkah ini, kedua menu tersebut masih belum dapat digunakan. Pada langkah berikutnya akan kita buat menu edit tersebut.

Langkah 7 – Merubah/Update Data

Dalam menginputkan data bisa terjadi kesalahan seperti kesalahan input, kesalahan data yang dimasukkan, ataupun lainnya. Untuk itu, data yang sudah disimpan harus dapat dirubah sehingga kesalahan dapat diperbaiki.
Pada dasarnya, form untuk mengedit data adalah sama dengan form untuk menginputkan data. Hanya saja pada form untuk mengedit data, form tersebut harus menampilkan data yang akan dirubah.
Untuk itu, buat file baru dengan nama edit.php, kemudian copy-kan semua kode yang ada pada file index.php kedalam file edit.php. Selanjutnya kita harus menambahkan beberapa kode agar form edit dapat menampilkan data yang akan di edit.
Kode untuk file edit.php menjadi seperti ini. Highlight yang saya berikan adalah baris-baris kode yang ditambahkan ataupun dirubah.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php
include('config.php');
?>
 
<html>
<head>
<title>Belajar PHP</title>
</head>
 
<body>
<h1>Form Input Data</h1>
 
<?php
$id = $_GET['id'];
 
$query = mysql_query("select * from user where user_id='$id'") or die(mysql_error());
 
$data = mysql_fetch_array($query);
?>
 
<form name="update_data" action="update.php" method="post">
<input type="hidden" name="user_id" value="<?php echo $id; ?>" />
<table border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td>Username</td>
            <td>:</td>
            <td><input type="text" name="username" maxlength="20" required="required" value="<?php echo $data['username']; ?>" disabled /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td>:</td>
            <td><input type="password" name="password" maxlength="20" required="required" value="<?php echo $data['password']; ?>" /></td>
        </tr>
        <tr>
            <td>Fullname</td>
            <td>:</td>
            <td><input type="text" name="fullname" maxlength="100" required="required" value="<?php echo $data['fullname']; ?>" /></td>
        </tr>
        <tr>
            <td>Email</td>
            <td>:</td>
            <td><input type="email" name="email" required="required" value="<?php echo $data['email']; ?>" /></td>
        </tr>
        <tr>
            <td>Agama</td>
            <td>:</td>
            <td><input type="text" name="agama" required="required" value="<?php echo $data['agama']; ?>" /></td>
        </tr>
        <tr>
            <td>Nomor HP</td>
            <td>:</td>
            <td><input type="text" name="no_hp" maxlength="14" required="required" value="<?php echo $data['no_hp']; ?>" /></td>
        </tr>
        <tr>
            <td align="right" colspan="3"><input type="submit" name="submit" value="Simpan" /></td>
        </tr>
    </tbody>
</table>
</form>
 
<a href="view.php">Lihat Data</a>
 
</body>
</html>
Kemudian ubah link pada file view.php menjadi seperti ini.
1
<td><a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> || <a href="#">Hapus</a></td>
Umumnya, username seseorang tidak boleh dirubah setelah ia terdaftar. Untuk membuat agar field input username tidak dapat dirubah, kita gunakan atribut disabled. Sampai langkah ini kita belum dapat melakukan perubahan data, kita baru dapat menampilkan data pada form edit. Untuk merubah data pada database, kita perlu membuat query SQL lagi untuk meng-update database dengan data yang baru.
Buat file baru dengan nama update.php dan ketikkan kode berikut.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
include('config.php');
 
//tangkap data dari form
$id = $_POST['user_id'];
$password = $_POST['password'];
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$agama = $_POST['agama'];
$no_hp = $_POST['no_hp'];
 
//update data di database sesuai user_id
$query = mysql_query("update user set password='$password', fullname='$fullname', email='$email', agama='$agama', no_hp='$no_hp' where user_id='$id'") or die(mysql_error());
 
if ($query) {
    header('location:view.php?message=success');
}
?>
Kemudian tambahkan baris kode berikut pada file view.php setelah <h1></h1> (sama seperti pada file index.php).
1
2
3
4
5
<?php
if (!empty($_GET['message']) && $_GET['message'] == 'success') {
    echo '<h3>Berhasil meng-update data!</h3>';
}
?>
Sekarang bukalah halaman view.php pada browser dan ubah-lah salah satu data yang sudah di inputkan dengan meng-klik tombol edit.
form edit databerhasil edit data

Langkah 8 – Menghapus/Delete Data

Setelah bisa menambah dan merubah data, sekarang kita buat untuk menghapus data. Buat file baru dengan nama delete.php dan ketikkan kode berikut.
1
2
3
4
5
6
7
8
9
10
11
<?php
include('config.php');
 
$id = $_GET['id'];
 
$query = mysql_query("delete from user where user_id='$id'") or die(mysql_error());
 
if ($query) {
    header('location:view.php?message=delete');
}
?>
Kemudian tambahkan kode pada link dalam file view.php seperti berikut.
1
2
3
4
<td>
    <a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a> ||
    <a href="delete.php?id=<?php echo $data['user_id']; ?>">Hapus</a>
</td>
Sekarang cobalah untuk menghapus beberapa data yang sudah di-input-kan.

Kesimpulan

Cobalah ber-eksperimen membuat aplikasi dengan lebih banyak input-an data sehingga tabel didalam database juga menjadi semakin banyak, agar pemahaman konsep dasar tentang pembuatan aplikasi web dengan PHP semakin kental dan mendalam.
Untuk pembuatan aplikasi yang lebih kompleks, tentu tutorial ini tidak cukup karena masih banyak sekali yang harus disertakan seperti validasi, security, user interface, dan banyak lagi materi lainnya yang akan dibahas dalam tutorial berikutnya.