Minggu, 01 Juli 2012

Membuat Log In dngan Php part 2

Membuat Blog Sederhana Dengan PHP Part 2 (membuat halaman admin) - membuat blog dengan PHP sangat diperlukan kesabaran, pastikan anda membaca Part 1 (membuat database) terlebih dahulu: Membuat Blog Sederhana Dengan PHP Part 1 (membuat database)
Mari kita lanjutkan Projectnya - Membuat halaman admin - pastikan anda telah membaca artikel Part 1 dan Software" yang dibutuhkan sudah terinstall dan berjalan. kecuali TinyMCE anda akan membutuhkan files tersebut pada saat membuat halaman editor.

1. Sebelum membuat halaman admin, kita akan membuat "conn.php" fungsinya untuk menghubungkan dengan database yang dibuat sebelumnya dengan script sbb:


view source
print?
01.<html>
02.<head>
03.</head>
04.<body>
05.<?php
06.$host="localhost"; //nama host
07.$user="root"; //username host
08.$pass=""; //password host
09.$database="bmw_blog1"; //nama database
10. 
11.$koneksi=mysql_connect($host,$user,$pass) or die (mysql_error());
12.$tanggal=date("Y-m-d H:i:s");
13. 
14.if ($koneksi){
15. //echo "berhasil ";
16.}else{
17. //echo "Gagal Koneksi Database MySql !!";
18.}
19.$db = mysql_select_db($database, $koneksi) or die (mysql_error());
20.if($db){
21.//echo "database berhasil<br/>";
22.}else{
23.//echo "database gagal<br/>";
24.}
25.?>
26.</body>
27.</html>


Sebelum menyimpan, buatlah sebuah folder dengan nama “bmwblog” pada folder htdocs di directory instalasi XAMPP. Buat lagi sebuah folder dengan nama “include” di dalam folder “bmwblog”. Jadi hirarki folder seperti ini

C:\\xampp\htdocs\bmwblog\include

Simpan dengan nama "conn.php" pada folder "include"



2. Membuat Style.cs

CSS adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs kita sekaligus memformat ulang situs kita.
Buka Macromedia Dreamweaver , pilih pada Create New >> CSS

Ketikkan code CSS berikut:
view source
print?
01.<style type="text/css">
02..style4 {font-family: Arial, Helvetica, sans-serif}
03..style7 {
04. font-family: Geneva, Arial, Helvetica, sans-serif;
05. font-weight: bold;
06.}
07..style8 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
08.a:link {
09. color: #FF0000;
10. text-decoration: none;
11.}
12..style9 {color: #FFFFFF}
13.a:visited {
14. text-decoration: none;
15.}
16.a:hover {
17. text-decoration: none;
18.}
19.a:active {
20. text-decoration: none;
21.}
22.</style>
Simpan dengan nama “style.css” dan letakkan pada folder  “include”

3.    Membuat index.php
Buat sebuah folder dengan nama “admin” didalam folder “bmwblog”. Folder "admin" hanya bisa diakses oleh admin saja, tentu akan ada proses login dan logout, jadi anda akan membuat index.php berupa proses login. Buatlah form PHP pada macromedia dreamweaverdan ketikkan script PHP berikut :
view source
print?
001.<?php session_start(); // memanfaatkan session untuk proses login dan logout
002.if (isset($_POST['admin']))
003.{
004. include ("../include/conn.php"); // memanggil database yg ada dalam file conn.php
005. $user_name=htmlentities((trim($_POST['admin']))); // html entities
006. $password=htmlentities(md5($_POST['kunci'])); //mengacak password dalam bentuk dash
007.  
008. $login=mysql_db_query($database,"select * from tb_admin where username='$user_name' and password='$password'",$koneksi); // melakukan db query
009.  
010. $cek_login=mysql_num_rows($login); // cek login jika benar lanjut kehalaman dashboard, jika salah kembali ke index.php
011. if (empty($cek_login))
012. {
013. ?><script language="javascript">
014. alert("Maaf, Password Anda salah!!");
015. document.location="index.php";
016. </script><?php
017. }
018. else
019. {
020. //daftarkan ID jika user dan password BENAR
021. while ($row=mysql_fetch_array($login))
022. {
023. $id=$row[0];
024. session_register('id');
025. session_register('username');
026. }
027. echo "<script> document.location.href='dashboard.php'; </script>";
028. }
029.}
030.?>
031. 
032.<html>
033.<title>Admin Access</title>
034.<head>
035.<script language="javascript">
036.function cek(){
037. var username= document.getElementById('userid').value;
038. var password= document.getElementById('passwd').value;
039. if(username.replace(/^\s+|\s+$/g, '')==''){
040. alert('Username Harus Diisi!');
041. return false;
042. }
043. if(password.replace(/^\s+|\s+$/g, '')==''){
044. alert('Password Harus diisi!');
045. return false;
046. }
047. return true;
048.}
049.</script>
050.</head>
051. 
052.<form action="index.php" method="post">
053. <p align="center"><?php echo $status;?></p>
054. <table width="346" height="408" border="0" align="center">
055. <tr>
056. <td width="336" height="402"><table width="19%" border="0" cellpadding="0" cellspacing="0" bordercolor="#99CC99" align="center">
057. <tr>
058. <td width="4%" align="right"><img src="/./images/kiri.jpg"></td>
059. <td width="74%" bgcolor="#5686c6" ><div align="center"><strong><font face="verdana" size="2" color="#FFFFFF">ADMINISTRATOR</font></strong></div></td>
060. <td width="21%"><img src="/./images/kanan.jpg"></td>
061. </tr>
062. <tr>
063. <td background="./img/b-kiri.jpg"></td>
064. <td><table width="259" align="center">
065. <tr>
066. <td width="251"><font face="verdana" size="2"></font>
067. <table width="251" height="101" border="0" align="center">
068. <tr valign="bottom">
069. <td width="104" height="35"><font size="4" face="verdana">Username</font></td>
070. <td width="137"><font size="4" face="verdana">
071. <input type="text" name="admin" size="20" id="userid">
072. </font></td>
073. </tr>
074. <tr valign="top">
075. <td height="34"><font size="4" face="verdana">Password</font></td>
076. <td><font size="4" face="verdana">
077. <input type="password" name="kunci" size="20" id="passwd">
078. </font></td>
079. </tr>
080. <tr>
081. <td></td>
082. <td><font size="4" face="verdana">
083. <input type="submit" value="LOGIN" onClick="return cek()">
084. </font></td>
085. </tr>
086. </table></td>
087. </tr>
088. </table></td>
089. <td background="./images/b-kanan.jpg"></td>
090. <td width="1%"></td>
091. </tr>
092. <tr>
093. <td align="right"><img src="/./images/kib.jpg"></td>
094. <td bgcolor="#5686c6" ><div align="center"><strong><font face="verdana" size="3"></font></strong></div></td>
095. <td><img src="/./images/kab.jpg"></td>
096. </tr>
097. </table></td>
098. </tr>
099. </table>
100.</form>
101. 
102.</body>
103.</html>
Tampilan halaman ini akan seperti pada gambar berikut:

Simpan dengan nama “index.php” dalam folder admin.
NOTE: Download folder images dan extract didalam folder admin
4.    Membuat halaman dashboard
Buat sebuah form PHP baru pada Macromedia Dreamweaver anda. Tampilan halaman dashboard hanya seperti ini dengan sedikit PHP script karena halaman dashboard hanya akan berfungsi sebagai media pengalihan saja.

Ketikkan script berikut dan simpan dengan nama "dashboard.php" didalam folder "admin":
view source
print?
01.<?php session_start();
02.if (session_is_registered('id'))
03.{
04. $_SESSION['id'];
05. $_SESSION['username'];
06. ?>
07. <html>
08. <head>
09. <title>[Admin]</title>
10. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
11. <link href="/../include/style.css" rel="stylesheet" type="text/css" media="screen" />
12. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
13. </head>
14. <body background="./img/background.jpg">
15. <table border="0" align="center" bgcolor="#FFFFFF">
16. <tr>
17. <td width="800">
18.  
19. <table width="729" height="345" border="0" align="center">
20. <tr>
21. <td width="800" height="32" align="center" valign="middle" background="images/fav.png" class="style4">
22. <div align="left">
23. <table width="800" border="0">
24. <tr>
25. <th width="243" scope="col"><a href="/dashboard.php" class="style9">Dashboard</a></th>
26. <th width="222" scope="col"><a href="/news.php" class="style9">News</a></th>
27. <th width="180" scope="col"><a href="/logout.php" class="style9">Logout</a></th>
28. </tr>
29. </table>
30. </div></td>
31. </tr>
32. <td width="800" height="32" align="right" valign="top" background="images/fade-butt.png" class="style4">
33.  
34.  
35. <form id="form1" name="form1" method="post" action="search.php">
36. <strong>Search</strong>
37. <label>
38. <input name="c" type="text" id="c" value="<?php echo $c ?>" />
39. </label>
40. <label></label>
41. <input name="Submit" type="submit" id="Submit" value="GO" />
42.</form>
43. <a href="/../index.php" target="_blank"> </a><a href="/../index.php" target="_blank">View</a>
44. </td>
45. <tr>
46. <td height="260" align="center" bgcolor="#CCCCCC">
47. <table width="336" height="229" border="0">
48. <tr>
49. <td width="154" height="101"><div align="center">
50. <p><a href="/../admin/post.php?action=newpost"><img src="/images/addcontent.png" width="48" height="48" border="0"></a></p>
51. <p class="style8"><span class="style7">Add News </span></p>
52. </div></td>
53. <td width="166"><div align="center">
54. <p><a href="/news.php"><img src="/images/viewarticle.png" width="48" height="48" border="0"></a></p>
55. <p class="style7">View Article </p>
56. </div></td>
57. </tr>
58. <tr>
59. <td height="120"><div align="center">
60. <p><a href="/admin.php"><img src="/images/add_admin.png" width="48" height="48" border="0"></a></p>
61. <p class="style8"><span class="style7">Admin</span></p>
62. </div></td>
63. <td><div align="center">
64. <p><a href="/logout.php"><img src="/images/logout.png" width="48" height="48" border="0"></a></p>
65. <p class="style7"><strong>Logout</strong></p>
66. </div></td>
67. </tr>
68. </table>
69. </td>
70. </tr>
71. <tr>
72. <td height="45"><div align="center">Copyright &copy; <a href="http://balimechanicweb.net">aditya subawa</a>
73. </div></td>
74. </tr>
75. </table>
76.  
77. </td>
78. </tr>
79. </table>
80. <p align="center"></p>
81. </body>
82. </html>
83.<?php
84.}else{
85. ?><script language="javascript">
86. alert("Maaf, Anda tidak berhak mengakses halaman ini!!");
87. document.location="index.php";
88. </script>
89. <?php
90.}
91.?>
Pada tahap ini kita sudah membuat 4 file, dan Cukup sekian pada Membuat Blog Sederhana Dengan PHP Part 2 (membuat halaman admin) ,  script lengkapnya bisa anda download disini:

Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)