Totorial Webdinamis

Webdinamis Bagian 1 Untuk memasuki tutorial ini , saya sarankan untu anda agar lebih dahulu membaca Dasar
Pembuatan Web Dinamis , ebsof akan menjelaskan tahap demi tahap pembuatan web dinamais, Pada judul tutorial ini yaitu "Membuat Web Dinamis (Bagian 1)" , sesuai judulnya "Bagian 1" , Bahwa ini adalah langkah awal dalam pembuatan website yang mempunyai sistem dinamis, bukan statis. Hal yang harus diperhatikan sebelum memulai pembuatan ialah , Menentukan bentuk dan Jenis serta tujuan Website yang ingin dibuat, Tidak panjang lebar lagi, Kali ini Ebsof akan menjelaskan Tahap demi Tahap Pembuatan Web Portal secara dinamis dengan melibatkan bahasa HTML, PHP, CSS, Java Sript. Berikut Flowchart Web dinamis Yang Ingin Kita buat :
Text Editor yang saya gunakan pada Tutorial-tutorial ini : Macromedia Dreamweaver MX , dan Anda Harus sudah menginstal Xampp di komputer anda. Ok Langsung ke TKP : 1. Buat Layout seperti dibawah ini dengan menggunakan table, kemudian simpan dengan nama "index.php"
Gambar. 1.1 (Sekema/Layout Website) Gambar di atas merupakan rancangan sekema bentuk website yang ingin kita buat. ada pun properti-nya ialah sebagai berikut :
Table Terdiri dari 4 baris dan 2 Kolom Ukuran Table Width = "800 px" Baris Pertama adalah bagian "Header". , Hight = 100 px. (Untuk tinggi Header ini dinamis, artinya terserah berapa nilai yang ingin anda beri. Baris Kedua, Biarkan defult, jangan di rubah-rubah Baris Ketiga . Disini terdapat 2 Kolom. Kolom Pertama adalah Bagian Menu ( Width="200" hight="600") , Kolom Kedua merupakan Bagian Content Website ( Width="600") Baris Ke empat ( bagian Footer website ) , atur ketinggian (Hight="80") ini terserah berapa ukurannya.
Jika anda belum mengerti bagaimana cara pembuatan layout di atas, silahkan baca Membuat Website Menggunakan Dremweaver MX Bagian I Berikut script diatas :
view plainprint?
1. <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d td"> 2. <html> 3. <head> 4. <title>Web Portal Ebsof</title> 5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 6. </head> 7. 8. <body> 9. <table width="800" border="0" align="center" cellpadding="0" cellspacing=" 0"> 10. <tr bgcolor="#003366"> 11. <td height="100" colspan="2"> </td> 12. </tr> 13. <tr bgcolor="#CCFF66"> 14. <td colspan="2"> </td> 15. </tr> 16. <tr> 17. <td width="200" height="600" valign="top" bgcolor="#00CCFF"> </td > 18. <td valign="top"> </td> 19. </tr> 20. <tr bgcolor="#0099FF"> 21. <td height="80" colspan="2"> </td> 22. </tr> 23. </table> 24. </body> 25. </html>
Untuk hasil dari script di atas dapat dilihat seperti dibawah ini :
anda bisa mencopy langsung script diatas, dan simpanlah dengan Nama : " index.php" dan simpanlah di folder Xampp-> Htdocs->buat folder baru di dalam Htdocs, dan simpan file "index.php" didalamnya. Jangan lupa aktifkan terlebih dahulu service Apache dan Mysql Xampp anda terlebih dahulu.. untuk melihat hasilnya di browser anda.
Website dinamis bagian 2
Pada Tutorial saya " Membuat Web Dinamis Bagian I" , kita sudah membuat satu file .PHP yaiut file "index.php" . File "index.php" adalah file yang dijadikan halaman depan website yang bisa di akses oleh semua orang. Namun itu hanyalah kerangka website, belum tampilan sesungguhnya. Nah pada Tutorial ini kita akan membuat kerangka Halaman "admin", Apa itu halaman admin..? Halaman admin adalah halaman yang tidak bisa di akses oleh semua orang,
hanya orang yang terdaftar di dalam database, yang memiliki ID Login yang dapat masuk ke halaman admin. Tentunya pada file "Index.php" nanti kita harus membuatForm Login. Diman Form Login berfungsi sebagai jalan Masuk Ke Halaman Admin. Berikut ini Script Kerangka admin :
view plainprint?
1. <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d td"> 2. <html> 3. <head> 4. <title>Untitled Document</title> 5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 6. <style type="text/css"> 7. <!-8. .style1 { 9. font-family: Georgia, "Times New Roman", Times, serif; 10. font-weight: bold; 11. } 12. --> 13. </style> 14. </head> 15. 16. <body> 17. <table width="800" border="0" align="center" cellpadding="0" cellspacing=" 0"> 18. <tr bgcolor="#CCCC00"> 19. <td height="100" colspan="2"><span class="style1">Welcome To Admin </s pan></td> 20. </tr> 21. <tr> 22. <td width="200" height="200" bgcolor="#99FF66"> </td> 23. <td> </td> 24. </tr> 25. <tr bgcolor="#CCCC00"> 26. <td height="40" colspan="2"> </td> 27. </tr> 28. </table> 29. </body> 30. </html>
Hasil dari Script di Atas yaitu :
Welcome To Admin
Seperti biasa anda bisa mengcopy script di atas ke text editor yang anda gunakan. kemudian simpan dengan nama "admin.php" di folder yang sama dengan index.php Website Dinamis Bagian 3 Setelah Kita membuat Kerangka Layout Halaman Website pada index.php dan admin.php, pada Bagian ke III ini , kita akan membuat file koneksi, Dimana, File ini berfungsi sebagai koneksi antara website ke database nya : berikut sript PHP dari "koneksi.php"
view plainprint?
1. <?php 2. 3. $server= "localhost"; 4. 5. $username = "root"; 6. 7. $password = ""; 8. 9. $database = "db_web"; 10. 11. 12. 13. mysql_connect($server,$username,$password) or die ("Koneksi Gagal"); 14. 15. mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " ); 16. 17. ?>
Dari coding php sederhana di atas, kita sudah bisa mengkoneksikan dengan database di phpmyadmin,, yang harus di pahami dari sript di atas ialah : $server,$username,$password,$database merupakan sebuah variabel, dan "db_web" merupakan nama database dari website yang ingin kita buat nanti. nb : simpanlah dengan nama "koneksi.php", di folder yang sama dengan index.php,admin.php Membuat Buku Tamu Untuk Membuat aplikasi buku tamu dengan PHP , Langkah pertama yang kita lakukan adalah membuat database , disini saya akan membuat database dengan nama "ebsof" kemudian , membuat sebuah tabel dengan nama "tbl_bukutamu" 1. Membuat Database Aplikasi Buku Tamu Dengan PHP Berikut ini bentuk database dari tbl_bukutamu yang akan kita gunakan :
2. Membuat Form Aplikasi Buku Tamu Setelah kita selesai membuat database dan tbl_bukutamu langkah selanjutnya ialah membuat form buku tamu, anda bisa menggunakan text editor kesayangan anda, buatlah seperti gambar dibawah ini :
. atau anda bisa mengcopy code di bawah ini untuk hasil yang lebih cepat :
view plainprint?
1. <form name="form1" method="post" action="bukutamu.php?action=simpan"> 2. <table width="500" border="0" cellspacing="0" cellpadding="0"> 3. <tr bgcolor="#FF9900">
4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.
<td height="40" colspan="2"><strong>Form Buku Tamu </strong></td> </tr> <tr bgcolor="#99FF00"> <td height="30">Nama</td> <td>: <input name="nama" type="text" id="nama"></td> </tr> <tr bgcolor="#99FF00"> <td height="30">Email</td> <td>: <input name="email" type="text" id="email"></td> </tr> <tr bgcolor="#99FF00"> <td height="30">Komentar</td> <td valign="top">: <textarea name="komentar" cols="30" rows="5" id="komentar"></textare a></td> 20. </tr> 21. <tr bgcolor="#99FF00"> 22. <td height="30"> </td> 23. <td valign="top"><input type="submit" name="Submit" value="Submit"> 24. <input type="reset" name="Submit2" value="Reset"></td> 25. </tr> 26. </table> 27. </form>
Simpan code diatas dengan nama "bukutamu.php" ... Sampai disini belum selesai.. Nah Sekarang kita akan membuat script pemeroses bukutamu dengan php , 3. Membuat Scrip Proses Buku Tamu Dengan PHP Script ini cukup anda tempatkan di bawah kode </form> yang sudah kita buat sebelumnya diatas :
view plainprint?
1. 2. 3. 4. 5. 6. 7. 8.
<?php if ($_GET[action]=="simpan") { //Membuat Koneksi Ke Database mysql_connect("localhost","root",""); mysql_select_db("db_ebsof");
//validasi data yang kosong if (empty($_POST['nama']) || empty($_POST['email']) || empty($_POST['k omentar'])) { 9. echo "Data harus Diisi Semua"; 10. } 11. else { 12. 13. $simpan="INSERT INTO tbl_bukutamu SET
14. nama='$_POST[nama]', 15. email='$_POST[email]', 16. komentar='$_POST[komentar]'"; 17. mysql_query($simpan); 18. echo '<script language="javascript"> 19. alert("Buku Tamu Berhasil Di Kirim"); 20. window.location="bukutamu.php"; 21. </script>'; 22. exit(); 23. 24. } 25. } 26. ?>
Sampai disini kita sudah bisa Melakukan pengiriman data dari Fdorm buku tamu ke dalam database ., Sebelumny jangan lupa di Save.. lo... heeee Nah.. Bagaimana kita menampilkan buku Tamu nya ? , Lanjut ....ke tahap 4 ... 4. Cara menampilkan /Tampil Buku Tamu dari Database Untuk Menampilkan Buku Tamu yang ada di database, kita perlu menambahkan script lagi ..Buatlah table terlebih dahulu,, Letakkan di bagian paling atas sekali pada coding "bukutamu.php" , kemudian Lakukanlah query Tampil Data dengan PHP , Untuk lebih jelasnya berikut ini script nya :
view plainprint?
1. <table width="500" border="0" cellspacing="0" cellpadding="0"> 2. <tr bgcolor="#FF9900"> 3. <td><strong>No</strong></td> 4. <td><strong>Nama </strong></td> 5. <td><strong>Email</strong></td> 6. <td><strong>Komentar</strong></td> 7. </tr> 8. <?php 9. //Koneksi Ke database 10. mysql_connect("localhost","root",""); 11. mysql_select_db("db_ebsof"); 12. 13. $tampil=mysql_query("SELECT * FROM tbl_bukutamu"); 14. while ($r=mysql_fetch_array($tampil)) { 15. $no++; 16. ?> 17. <tr bgcolor="#CCCCFF"> 18. <td><?php echo $no ; ?></td> 19. <td><?php echo $r['nama']; ?></td> 20. <td><?php echo $r['email']; ?></td> 21. <td><?php echo $r['komentar']; ?></td> 22. </tr> 23. <?php } ?>
24. </table> 25. <p> </p>

Copy script di atas, Di atas script :
view plainprint?
1. <form name="form1" method="post" action="bukutamu.php?action=simpan">

Nah Setelah itu.. Simpan File bukutamu.php, Jika anda berhasil, Maka akan tampil seperti gambar di bawah ini :
Untuk Source Code lengkapnya bisa di download disini dengan password : www.ebsof.com
Read more: http://www.ebsof.com/2013/02/membuat-aplikasi-buku-tamu-denganphp.html#ixzz2mfOdbdSl

Totorial Webdinamis

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Totorial Webdinamis

Diunggah oleh

Hak Cipta:

Format Tersedia

Webdinamis Bagian 1 Untuk memasuki tutorial ini , saya sarankan untu anda agar lebih dahulu membaca Dasar

Website dinamis bagian 2

<?php if ($_GET[action]=="simpan") { //Membuat Koneksi Ke Database mysql_connect("localhost","root",""); mysql_select_db("db_ebsof");

24. </table> 25. <p> </p>

1. <form name="form1" method="post" action="bukutamu.php?action=simpan">

Read more: http://www.ebsof.com/2013/02/membuat-aplikasi-buku-tamu-denganphp.html#ixzz2mfOdbdSl

Anda mungkin juga menyukai

Totorial Webdinamis

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Totorial Webdinamis

Diunggah oleh

Hak Cipta:

Format Tersedia

Webdinamis Bagian 1 Untuk memasuki tutorial ini , saya sarankan untu anda agar lebih dahulu membaca Dasar

Website dinamis bagian 2

<?php if ($_GET[action]=="simpan") { //Membuat Koneksi Ke Database mysql_connect("localhost","root",""); mysql_select_db("db_ebsof");

24. </table> 25. <p>&nbsp;</p>

1. <form name="form1" method="post" action="bukutamu.php?action=simpan">

Read more: http://www.ebsof.com/2013/02/membuat-aplikasi-buku-tamu-denganphp.html#ixzz2mfOdbdSl

Anda mungkin juga menyukai

24. </table> 25. <p> </p>