1. Membuat Kerangka Website dengan Table

Transkripsi

1 Pada Postingan Kali ini saya akan sedikit berbagi tentang dasar "Membuat Website Berbasis HTML" dengan menggunakan "Macromedia Dreamweaver MX ", Kenapa menggunakan Macromedia Dreamweaver MX, sedangkan diluar sana masih banyak Software editor lainnya???, Hal ini cukup simple menurut saya, Macromedia Dreamweaver MX cukup ringan untuk diinstal di komputer-komputer,,,, Kemudian dari segi fiturnya.. tidak kalah dengan Tingkatan di atasnya.. Bagi anda yang ingin menggunakan editor laiinya itu tidaklah menjadi masalah, OK langsung aja kita masuk dalam pokok pembahasannya : 1. Membuat Kerangka Website dengan Table a. Buka Dreamweaver MX, Kemudian di Bagian Creat New, Pilih HTML b. Pilih Insert Table, Lihat Gambar di bawah

2 Lakukan Pengaturan pada Table Seperti Gambar dibawah Setelah itu Klik OK, Maka akan tampil Seperti gambar dibawah : Lakukan Pengaturan Propertis Table, Lihat Gambar dibawah

3 Table Sudah Kita buat, Nah sekarang kita lakukan Pengaturan Propertis Pada Table yang Sudah Kita Buat.. Gambar diatas Menandakan Penggabungan 2 buah Kolom Header dengan menggunakan "Marge Cells" dan hasilnya akan terlihat seperti gambar dibawah ini : Lakukan Pengaturan, Ketinggian "HEADER" pada propertis...seperti gambar dibawah ini : Nah Hasilnya, akan terlihat seperti gambar dibawah ini : Setelah itu lakukan Pengaturan pada Baris ke "3" kolom "1" dengan "W=600" dan High ="200"

4 a. Pada baris keempat bagian footer isi properties Highnya (H) 60

5 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"

6 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 : 1. <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" " 2. <html> 3. <head> 4. <title>web Portal Ebsof</title> 5. <meta http-equiv="content-type" content="text/html; charset=iso "> 6. </head> <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 :

7 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. Untuk Lanjutan dari Materi Ini.. Bisa di Lihat Pada "Membuat Website Dinamis Bagian II (Membuat Halaman Admin Web Dinamis "

8 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 membuat Form Login. Diman Form Login berfungsi sebagai jalan Masuk Ke Halaman Admin. Berikut ini Script Kerangka admin : 1. <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" " 2. <html> 3. <head> 4. <title>untitled Document</title> 5. <meta http-equiv="content-type" content="text/html; charset=iso "> 6. <style type="text/css"> 7. <!-- 8..style1 { 9. font-family: Georgia, "Times New Roman", Times, serif; 10. font-weight: bold; 11. } > 13. </style> 14. </head> <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 </span></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 :

9 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

10 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" 1. <?php $server= "localhost"; $username = "root"; $password = ""; $database = "db_web"; mysql_connect($server,$username,$password) or die ("Koneksi Gagal"); mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " ); ?> 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

11 Nah pada kali ini kita akan membuat Sistem Login, dimana ini digunakan untuk masuk ke halaman admin bagi yang mempunyai, Password, username dan hak akses, intinya kira-kira begitu. Sekarang aktifkan Xampp Control->Service Apache dan Mysql->buat database dengan nama "db_ebsof" pada phpmyadmin Gambar Xampp Control Pembuatan Database "db_ebsof" Setelah itu buatlah tabel, di dalam database "db_ebsof" dengan nama tbl_user berikut script nya tbl_user: 1. CREATE TABLE `db_ebsof`.`tbl_user` ( 2. ìd_user` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY, 3. ùsername` VARCHAR( 40 ) NOT NULL, 4. `password` VARCHAR( 40 ) NOT NULL, 5. `level` VARCHAR( 40 ) NOT NULL, 6. `blokir` ENUM( 'Y', 'N' ) NOT NULL 7. ) ENGINE = MYISAM ; Setelah tbl_user berhasil dibuat, insertkan data sebagai berikut : 1. INSERT INTO `db_ebsof`.`tbl_user` ( 2. ìd_user`, 3. ùsername`, 4. `password`, 5. `level`, 6. `blokir` 7. )

12 8. VALUES ( 9. '1', 'admin', 'admin', 'admin', 'N' Pada tahap ini kita sudah selesai membuat Database dengan nama "db_ebsof" dan tabel dengan nama "tbl_user", Nah.. Langkah selanjutnya ialah kita membuat FORM login pada halaman index.php, berikut tampilannya : User : Pass : Form Login Login langkah penambahan Form login yaitu dengan menambahkan form dan table dengan ukuran 200 px, dengan baris 5, dan 2 kolom, baris boleh lebih,, tergantung selera anda Tambahkan Form Login ini di antara code :

13 1. <td width="200" height="600" valign="top" bgcolor="#00ccff"> </td> dan berikut ini code form login. 1. <table width="200" border="0" cellspacing="0" cellpadding="0"> 2. <tr> 3. <td><form name="form1" method="post" action="cek_login.php"> 4. <table width="200" border="0" cellspacing="0" cellpadding="2"> 5. <tr bgcolor="#003366"> 6. <td height="30" colspan="2"><div align="center"><strong>form Login < /strong></div></td> 7. </tr> 8. <tr> 9. <td width="74" height="30">username</td> 10. <td width="126">: 11. <input name="username" type="text" id="username" size="10"></td> 12. </tr> 13. <tr> 14. <td height="30">password</td> 15. <td>: 16. <input name="password" type="password" id="password" size="10"></t d> 17. </tr> 18. <tr> 19. <td height="30"> </td> 20. <td><input type="submit" name="submit" value="login"></td> 21. </tr> 22. </table> 23. </form></td> 24. </tr> 25. <tr> 26. <td> </td> 27. </tr> 28. </table> Sehingga kode html "index.php" yang sudah di modifikasi dengan penambahan form login akan seperti ini 1. <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>web Portal Ebsof</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head>

14 <body> <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr bgcolor="#003366"> <td height="100" colspan="2"> </td> </tr> <tr bgcolor="#ccff66"> <td colspan="2"> </td> </tr> <tr> <td width="200" height="600" valign="top" bgcolor="#00ccff"><table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td><form name="form1" method="post" action="cek_login.php"> <table width="200" border="0" cellspacing="0" cellpadding="2"> <tr bgcolor="#003366"> <td height="30" colspan="2"><div align="center"><strong>form Login < /strong></div></td> </tr> <tr> <td width="74" height="30">username</td> <td width="126">: <input name="username" type="text" id="username" size="10"></td> </tr> <tr> <td height="30">password</td> <td>: <input name="password" type="password" id="password" size="10"></t d> </tr> <tr> 68.

15 69. <td height="30"> </td> <td><input type="submit" name="submit" value="login"></td> </tr> </table> </form></td> </tr> <tr> <td> </td> </tr> </table></td> <td valign="top"> </td> </tr> <tr bgcolor="#0099ff"> <td height="80" colspan="2"> </td> </tr> </table> </body> </html> Pada tahap ini kita sudah menyelesaikan 2 pekerjaan untuk membuat sistem login yaitu : 1. Membuat Database dimana databasenya bernama "db_ebsof" dan tbl_user, serta id user yang nantinya kita gunakan adalah : userid : admin password : admin 2. Memodifikasi "index.php" guna membuat Form Login Setelah selesai pada 2 tahap di atas, tahap selanjutnya adalah membuat coding PHP, yang berguna untuk memproses atau mengecek userid dan password yang di inputkan lewat form Login, dengan yang terdaftar di dalam database : dengan logika : "APABILA userid dan password yang diinputkan sama dengan Yang ada di DATABASE".. maka ia berhak masuk ke halaman admin" berikut adalah script php "cek_login.php" yang berfungsi memproses dan mengecek user id dan password yang di inputkan :

16 1. <?php // pemanggilan file koneksi include "koneksi.php"; // pembuatan variabel pada penginputan username dan password $username = $_POST['username']; $pass = $_POST['password']; // Pengecekan user id dan password dengan yang ada di database $login=mysql_query("select * FROM tbl_user WHERE username='$username' AND password ='$pass' AND blokir='n'"); $ketemu = mysql_num_rows($login); $r=mysql_fetch_array($login); if ($ketemu > 0) { session_start (); $_SESSION[namauser] = $r[username]; $_SESSION[passuser] = $r[password]; $_SESSION[leveluser]= $r[level]; header('location:admin.php'); } else { echo "<center>login GAGAL Username atau Password Anda Tidak benar Atau Acount Anda Sedang Di blokir 52. "; echo "<a href='index.php'>ulangi Lagi</a>"; } 57.

17 58.?> copy paste, coding php di atas ke text editor, simpan dengan nama "cek_login.php" di folder yang sama dengan file-file yang telah kita buat sebelumnya.. Untuk melihat hasil nya, silahkan jalankan file index.php.. dan masukkan userid : admin password : admin maka akan masuk ke halaman admin, dan jika user id dan password salah,, akan keluar pesan " username atau Password Tidak benar, Atau Acount Anda Sedang Di blokir. Silahkan mencoba

18 Baiklah... pada setelah kita berhasil login ke admin pada, tentunya kita akan membuat sistem Logout. berikut file "logout.php" Copy lah coding di atas di text editor anda. Dan Simpan Dengan nama "logout.php" ke folder yang sama dengan File, : index.php, Koneksi.php, cek_login.php. dll

19 Pada tutorial sebelumnya kita sudah Membuat Sistem Login Untuk Hak Akses User menuju halaman admin, dimana halaman admin ini akan kita isi untuk memanajemen website kita nanti,disinilah perlunya sistem login untuk membatasi hak akses user, Dengan demikian seitap orang yang mengakses website kita memiliki tingkatkan antara user biasa dan Admin. Pada tutorial sebelumnya juga kita sudah Membuat Sistem Logout untuk yang berfungsi untuk keluar dari Halaman Admin. Tahukah anda, Sistem keamanan Yang kita buat ini masih terlalu mudah untuk di temubus oleh sang penyusup, Meskipun ia tidak mempunyai hak akses untuk login, namun sang penyusup masih dapat mengakses halaman admin dengan menggetikkan URL yang menuju ke halaman admin pada address bar browser. Itulah Sang Hacker Nah disinilah perlunya kita Memproteksi Halaman Admin untuk mengatasi masalah tersebut. Hal yang perlu kita lakukan ialah Menyilumuti Seluruh Kode halaman Admin dengan Kode Proteksi. Begini gambarannya :...<Awal Kode Proteksi>......<Kode Keseluruhan halaman admin>.....<akhir Kode Proteksi> <?php session_start(); if (emptyempty($_session[username]) AND emptyempty($_session[passuser])) { echo "<center>untuk mengakses modul, Anda harus login 8. "; echo "<a href=../index.php><b>login</b></a></center>"; } else{ ?> <KODE HALAMAN ADMIN> <?PHP }?> dan Berikut Hasil Penempatan kode pada coding halaman admin : 1. <?php session_start();

20 4. 5. if (empty($_session[username]) AND empty($_session[passuser])) { echo "<center>untuk mengakses modul, Anda harus login 8. "; echo "<a href=../index.php><b>login</b></a></center>"; } else{ ?> <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>untitled Document</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> <! style1 { font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; } > </style> </head> <body> <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr bgcolor="#cccc00"> <td height="100" colspan="2"><span class="style1">welcome To Admin </span></td > </tr> <tr> 59.

21 60. <td width="200" height="200" valign="top" bgcolor="#99ff66"><a href="logout.ph p">logout</a></td> <td> </td> </tr> <tr bgcolor="#cccc00"> <td height="40" colspan="2"> </td> </tr> </table> </body> </html> <?php }?>