Jumat, 31 Juli 2015

PHP

Ane cuma ngasih tau cara bikin admin panelnya, maksudnya kaya buat edit judul, deskripsi, via admin panel. Bukan admin panel sepenuhnya. Tapi, dari kode dasar ini bisa kalian kembangin untuk fitur lainnya, yang penting kalian tau dasarnya dulu
Logika nya, jika ingin membuat admin panel yang bisa mengubah konten dari sebuah web, berarti harus ada koneksi antara database, tampilan, dan program inti. Untuk database kita menggunakan MySQL via phpmyadmin. Nah, pertama, kita bikin koneksi ke database dulu yuk. Sebelumnya, kalian bikin db nya dulu di php my admin, gausah pake table atau apa. polos aja dulu. terus sekarang bikin file namanya koneksi.php, fungsinya untuk mengkoneksikan ke db

koneksi.php
<?php
$host	= "localhost";
$user	= "username database";
$pass	= "password database";
$name	= "nama database";

mysql_connect("$host", "$user", "$pass");
mysql_select_db("$name");
?>

Bikin tabel
Setelah kalian selesai membuat file koneksi.php tadi, sekarang kita bikin tabel di databasenya. Saya pake phpmyadmin versi 3.5.1, setelah login, pilih database yang tadi ente buat + udah dimasukin ke koneksi.php. terus disebelah kiri klik tulisan "create table". table name tulis aja "jc_setting", terus bikin coloumn set_id, type nya INT, length nya 11, terus coloumn set_name, type varchar, length nya 32, terus set_content, length 255, type varchar, dan set_url, setingannya sama kaya set_content.

Insert data ke kolom
Sekarang insert data dulu ke kolom di databasenya, pencet menu insert. lalu isikan data seperti ini. Klik untuk memperbesar gambar.
contoh

Bikin template webnya standar
Nah sekarang bikin web templatenya dulu. standar aja, kan buat contoh >_<. kasih nama index.php
<?php
include 'koneksi.php';
include 'head.php';
nah sekarang bikin file lagi dengan nama head.php
<html>
	<head>
		<title><?php
$sql = mysql_query("SELECT * FROM jc_setting WHERE set_id=1");
if(mysql_num_rows($sql) != 0){
	while($data = mysql_fetch_assoc($sql)){
		echo ''.$data['set_content'].'';
	}
}
?> 

- 

<?php
$sql = mysql_query("SELECT * FROM jc_setting WHERE set_id=2");
if(mysql_num_rows($sql) != 0){
	while($data = mysql_fetch_assoc($sql)){
		echo ''.$data['set_content'].'';
	}
}
?></title>
</head>
<body>
<h1>welcome to <?php
$sql = mysql_query("SELECT * FROM jc_setting WHERE set_id=1");
if(mysql_num_rows($sql) != 0){
	while($data = mysql_fetch_assoc($sql)){
		echo ''.$data['set_content'].'';
	}
}
?> </h1>
</body>
</html>
ini sengaja ane buat panjang biar ente ente pada ngerti itu data muncul dari mana. perhatiin tulisan WHERE set_id=1, bisa ente main mainin tuh, mau ORDER BY ASC atau DESC, atau apalah terserah ente. main experiment aja kaya pas pertama ane belajar ini. ane belajar ini sendiri :3

Bikin halaman admin buat ngatur konten websitenya
Nah bikin file baru lagi, namanya admin.php
<?php
session_start();
ob_start();
include'config.php';
?>
<!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>
    <title>admin site</title>
</head>
<body>
<h1>Site configuration</h1>
<!------------- Ganti Judul ---------------->
<?php
$sql = mysql_query("SELECT * FROM jc_setting WHERE set_id=1");
if(mysql_num_rows($sql) != 0){
	while($data = mysql_fetch_assoc($sql)){
		echo '<b>Site Name:</b> '.$data['set_content'].'';
	}
}
?> <a href="admin.php?aksi=edit&id=1">Edit</a><br>
<?php	
//edit judul
	if(@$_GET['aksi'] == "edit"){
		$id = abs((int)$_GET['id']);
		$get = mysql_query("SELECT * FROM jc_setting WHERE set_id='$id'");
		$dataGet = mysql_fetch_assoc($get);
		
		if(@$_POST['save-judul']){
			$Title	= $_POST['judul'];
			
			if($Title){
				$up = mysql_query("UPDATE jc_setting SET set_content='$Title' WHERE set_id='1'");
				if($up){
					echo '<script language="javascript">alert("Data Successfully Saved!"); document.location="admin.php?aksi=edit&id=1";</script>';
				}else{
					echo '<div class="error">ERROR: Fail to Save Data.</div>';
				}
			}else{
				echo '<div class="error">ERROR: Enter your new site name.</div>';
			}
		}
		
		echo '<form action="" method="post">';
		echo '<h3>Change Site Name</h3>';
    	echo '<p>New Site Name:<br /><input type="text" name="judul" placeholder="Masukan Judul Web Anda Yang Baru" /></p>';
        echo '<input type="submit" name="save-judul" value="save" />';
    	echo '</form>';
	}?>
	
<!------------- Ganti Deskripsi ---------------->
<hr style="margin-top:20px;"><?php
$sql = mysql_query("SELECT * FROM jc_setting WHERE set_id=2 ORDER BY set_content ASC");
if(mysql_num_rows($sql) != 0){
	while($data = mysql_fetch_assoc($sql)){
		echo '<b>Web Description:</b> '.$data['set_content'].'';
	}
}
?> <a href="admin.php?aksi=edit&id=2">Edit</a><br>
<?php	
//edit deskripsi
	if(@$_GET['aksi'] == "edit"){
		$id = abs((int)$_GET['id']);
		$get = mysql_query("SELECT * FROM jc_setting WHERE set_id='2'");
		$dataGet = mysql_fetch_assoc($get);
		
		if(@$_POST['save-desc']){
			$Description	= $_POST['deskripsi'];
			
			if($Description){
				$up = mysql_query("UPDATE jc_setting SET set_content='$Description' WHERE set_id='2'");
				if($up){
					echo '<script language="javascript">alert("Data Has Been Saved."); document.location="admin.php?aksi=edit&id=2";</script>';
				}else{
					echo '<div class="error">ERROR: Failed to Save Data.</div>';
				}
			}else{
				echo '<div class="error">ERROR: Enter Your Site Description.</div>';
			}
		}
		
		echo '<form action="" method="post">';
		echo '<h3>Change Web Description</h3>';
    	echo '<p>Web Description:<br /><input type="text" name="deskripsi" placeholder="Masukan Deskripsi Web Anda Yang Baru" /></p>';
        echo '<input type="submit" name="save-desc" value="save" />';
    	echo '</form>';
	}?>
        <div class="clear"></div>

</body>
</html>
Taraaa... jadi deh. tapi kalo di perhatiin, itu kode vuln sama mysqli loh :v entar deh kapan kapan di bahas cara ngepatch nya. Oh iya ini halaman adminnya sederhana, kalo mau pake login segala macem, ini bisa baca tutorial dari gua sebelumnya yaitu Cara membuat sistem login dan signup dengan PHP, MySQL, dan jQuery

Membuat Sistem Login dan Signup Dengan Mysql, PHP, Jquery dan CSS

hai gan! kali ini saya akan memberikan sebuah tutorial untuk membuat sistem login, logout, dan signup pada web anda. menggunakan PHP, MYsql, jquery dan css. Langsung aja ya. sebenarnya pemrogramman ini gampang, kita hanya membutuhkan logika untuk membuatnya. Karena jika ingin berbuat sesuatu kita membutuhkan logika.
1. MYSQL
ini dia MYSQL nya bro.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
--
-- Table structure for table `dh_members`
--
 
CREATE TABLE `dh_members` (
  `id` int(11) NOT NULL auto_increment,
  `usr` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `pass` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `email` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `regIP` varchar(15) collate utf8_unicode_ci NOT NULL default '',
  `dt` datetime NOT NULL default '0000-00-00 00:00:00',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `usr` (`usr`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

itu simpel banget, diimport aja ke phpmyadminnya.

2. Slider Tab
kita taro di file demo.php aja ya langsung.
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div id="toppanel">
   
  <div id="panel">
     
    <div class="content clearfix">
       
      <div class="left">
         
        <h1>The Sliding jQuery Panel</h1>
         
        <h2>A register/login solution</h2>
         
        <p class="grey">You are free to use this login and registration system in you sites!</p>
         
        <h2>A Big Thanks</h2>
         
        <p class="grey">This tutorial was built on Jagocoding.com</p>
      </div>
      <!--?php
      if(!$_SESSION['id']):
      // If you are not logged in
      ?-->
       
      <div class="left"><!-- Login Form --><form class="clearfix" action="" method="post">
         
        <h1>Member Login</h1>
        <!--?php
        if($_SESSION['msg']['login-err'])
        {
        echo '
         
        <div class="err"-->'.$_SESSION['msg']['login-err'].'</form></div>
      '; unset($_SESSION['msg']['login-err']); // This will output login errors, if any } ?&gt; <label class="grey" for="username">Username:</label> <input id="username" class="field" type="text" name="username" value="" size="23" /> <label class="grey" for="password">Password:</label> <input id="password" class="field" type="password" name="password" size="23" /> <label><input id="rememberMe" type="checkbox" name="rememberMe" value="1" checked="checked" /> &nbsp;Remember me</label>
       
      <div class="clear">&nbsp;</div>
      <input class="bt_login" type="submit" name="submit" value="Login" /></div>
     
    <div class="left right"><!-- Register Form --><form action="" method="post">
       
      <h1>Not a member yet? Sign Up!</h1>
      <!--?php
       
      if($_SESSION['msg']['reg-err'])
      {
      echo '
       
      <div class="err"-->'.$_SESSION['msg']['reg-err'].'</form></div>
    '; unset($_SESSION['msg']['reg-err']); // This will output the registration errors, if any } if($_SESSION['msg']['reg-success']) { echo '
     
    <div class="success">'.$_SESSION['msg']['reg-success'].'</div>
    '; unset($_SESSION['msg']['reg-success']); // This will output the registration success message } ?&gt; <label class="grey" for="username">Username:</label> <input id="username" class="field" type="text" name="username" value="" size="23" /> <label class="grey" for="email">Email:</label> <input id="email" class="field" type="text" name="email" size="23" /> <label>A password will be e-mailed to you.</label> <input class="bt_register" type="submit" name="submit" value="Register" /></div>
  <!--?php
  else:
  // If you are logged in
  ?-->
   
  <div class="left">
     
    <h1>Members panel</h1>
     
    <p>You can put member-only data here</p>
    <a href="registered.php">View a special member page</a>
     
    <p>- or -</p>
    <a href="?logoff">Log off</a></div>
   
  <div class="left right">&nbsp;</div>
  <!--?php
  endif;
  // Closing the IF-ELSE construct
  ?--></div>
 
<p>&nbsp;</p>
 
<div class="tab">
   
  <ul class="login">
    <li class="left">&nbsp;</li>
    <li>Hello <!--?php echo $_SESSION['usr'] ? $_SESSION['usr'] : 'Guest';?-->!</li>
    <li class="sep">|</li>
    <li id="toggle"><a id="close" class="close" style="display: none;" href="#">Close Panel</a></li>
    <li class="right">&nbsp;</li>
  </ul>
</div>

itu tadi buat jadi slider tabnya. kaya yang di web-kreation.com. Fungsi $_SESSION['usr'] apa bro? fungsinya untuk mengambil data sang visitor, contohnya fullname, username dsb. sementara SESSION['id'] berfungsi untuk membatasi daerah kekuasaan yang logged in dan yang tidak ter logged in

3. Otak dari Programming demo.php
Ini dia otak inti dari programming kita tadi.
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
66
67
68
69
70
71
72
73
74
75
76
77
define('INCLUDE_CHECK',true);
 
require 'connect.php';
require 'functions.php';
 
// Those two files can be included only if INCLUDE_CHECK is defined
 
session_name('dhLogin');
// Starting the session
 
session_set_cookie_params(2*7*24*60*60);
// Making the cookie live for 2 weeks
 
session_start();
 
if($_SESSION['id'] && !isset($_COOKIE['dhRemember']) && !$_SESSION['rememberMe'])
{
    // If you are logged in, but you don't have the dhRemember cookie (browser restart)
    // and you have not checked the rememberMe checkbox:
 
    $_SESSION = array();
    session_destroy();
 
    // Destroy the session
}
 
if(isset($_GET['logoff']))
{
    $_SESSION = array();
    session_destroy();
    header("Location: demo.php");
    exit;
}
 
if($_POST['submit']=='Login')
{
    // Checking whether the Login form has been submitted
 
    $err = array();
    // Will hold our errors
 
    if(!$_POST['username'] || !$_POST['password'])
        $err[] = 'All the fields must be filled in!';
 
    if(!count($err))
    {
        $_POST['username'] = mysql_real_escape_string($_POST['username']);
        $_POST['password'] = mysql_real_escape_string($_POST['password']);
        $_POST['rememberMe'] = (int)$_POST['rememberMe'];
 
        // Escaping all input data
 
        $row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM dh_members WHERE usr='{$_POST['username']}' AND pass='".md5($_POST['password'])."'"));
 
        if($row['usr'])
        {
            // If everything is OK login
 
            $_SESSION['usr']=$row['usr'];
            $_SESSION['id'] = $row['id'];
            $_SESSION['rememberMe'] = $_POST['rememberMe'];
 
            // Store some data in the session
 
            setcookie('dhRemember',$_POST['rememberMe']);
            // We create the dhRemember cookie
        }
        else $err[]='Wrong username and/or password!';
    }
 
    if($err)
        $_SESSION['msg']['login-err'] = implode('<br />',$err);
        // Save the error messages in the session
 
    header("Location: demo.php");
    exit;
}

Saya sudah membuat kode itu semudah yang saya bisa agar anda dapat mengerti isi dari kode tersebut. fungsi dari dhRemember adalah agar setiap orang yang tidak mencentang pada Remember Me akan terhapus datanya pada auto fill form setelah mereka logout.

Otak Kedua dari demo.php ini adalah
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
66
67
68
69
70
71
else if($_POST['submit']=='Register')
{
    // If the Register form has been submitted
    $err = array();
 
    if(strlen($_POST['username'])<4 || strlen($_POST['username'])>32)
    {
        $err[]='Your username must be between 3 and 32 characters!';
    }
 
    if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['username']))
    {
        $err[]='Your username contains invalid characters!';
    }
 
    if(!checkEmail($_POST['email']))
    {
        $err[]='Your email is not valid!';
    }
 
    if(!count($err))
    {
        // If there are no errors
        $pass = substr(md5($_SERVER['REMOTE_ADDR'].microtime().rand(1,100000)),0,6);
        // Generate a random password
 
        $_POST['email'] = mysql_real_escape_string($_POST['email']);
        $_POST['username'] = mysql_real_escape_string($_POST['username']);
        // Escape the input data
 
        mysql_query("  INSERT INTO dh_members(usr,pass,email,regIP,dt)
                    VALUES(
                    '".$_POST['username']."',
                    '".md5($pass)."',
                    '".$_POST['email']."',
                    '".$_SERVER['REMOTE_ADDR']."',
                    NOW()
        )");
 
        if(mysql_affected_rows($link)==1)
        {
            send_mail(  'bayu.wryatsongko@gmail.com',
                    $_POST['email'],
                    'Registration System Demo - Your New Password',
                    'Your password is: '.$pass);
                    $_SESSION['msg']['reg-success']='We sent you an email with your new password!';
        }
        else $err[]='This username is already taken!';
    }
 
    if(count($err))
    {
        $_SESSION['msg']['reg-err'] = implode('<br />',$err);
    }
 
    header("Location: demo.php");
    exit;
}
 
$script = '';
if($_SESSION['msg'])
{
    // The script below shows the sliding panel on page load
    $script = '
    <script type="text/javascript">
    $(function(){
        $("div#panel").show();
        $("#toggle a").toggle();
    });
    </script>';
}
Berfungsi pada saat registrasi. Ubah email ane ya jadi email ente yang bayu.wryatsongko@gmail.com pada script diatas.:p
4. CSSnya, kita beri nama demo.css
berikut adalah file CSSnya yang kita beri nama demo.css. berikut isi dari demo.css tersebut.
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* The reset rules */
    margin:0px;
    padding:0px;
}
 
body{
    color:#555555;
    font-size:13px;
    background: #eeeeee;
    font-family:Arial, Helvetica, sans-serif;
    width: 100%;
}
 
h1{
    font-size:28px;
    font-weight:bold;
    font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
    letter-spacing:1px;
}
 
h2{
    font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:normal;
    letter-spacing:1px;
    padding-left:2px;
    text-transform:uppercase;
    white-space:nowrap;
    margin-top:4px;
    color:#888888;
}
 
#main p{
    padding-bottom:8px;
}
 
.clear{
    clear:both;
}
 
#main{
    width:800px;
    /* Centering it in the middle of the page */
    margin:60px auto;
}
 
.container{
    margin-top:20px;
 
    background:#FFFFFF;
    border:1px solid #E0E0E0;
    padding:15px;
 
    /* Rounded corners */
    -moz-border-radius:20px;
    -khtml-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius:20px;
}
 
.err{
    color:red;
}
 
.success{
    color:#00CC00;
}
 
a, a:visited {
    color:#00BBFF;
    text-decoration:none;
    outline:none;
}
 
a:hover{
    text-decoration:underline;
}
 
.tutorial-info{
    text-align:center;
    padding:10px;
}

Css tersebut mewakili seluruh isi dari hasil programming kita tadi. saya sudah membuat css tersebut menjadi semudah mungkin, supaya anda dapat memahami nya dengan mudah.

6. Jquery
Berikut adalah file jquerynya yang dapat membentuk Slider Tab
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="login_panel/js/pngfix/supersleight-min.js"></script>
<![endif]-->
 
<script src="login_panel/js/slide.js" type="text/javascript"></script>
 
<?php echo $script; ?>

Diatas adalah jquery yang dapat membentuk slider tab login yang saya dapatkan dari web-kreation.com

Sekian dari ane. jika ada yangin ditanyaan lewat komentar. Anda bisa mendownload source codenya di bawah ini

WEB

Cara Upload Video Dengan PHP


upload video php
Video saat ini sudah menjadi salah satu elemen dalam website yang bisa membuat orang tertarik dan betah berlama-lama berada di website tersebut, sebut saja Youtube, website youtube saat ini menjadi

Referensi Kode dan Nama Warna Pada HTML dan CSS


nama warna web css html
Komputer menyediakan jutaan warna yang bisa kita gunakan hanya dengan menuliskan kode tertentu yang sesuai dengan warna yang diinginkan.

Cara Membuat Scroll pada Tag DIV dengan HTML dan CSS


Scroll tidak hanya bisa muncul ketika halaman website melebihi tinggi dari monitor saja, namun scroll bisa juga digunakan dalam sebuah tag div meskipun tingginya tidak melebihi lebar monitor.

Cara Membuat Text di Tengah Dengan HTML dan CSS


Banyak cara yang bisa digunakan untuk membuat text atau objek agar berada di tengah atau center dengan menggunakan html dan css

8 Fakta Web Desain Yang Menakjubkan


fakta web desain
Jika Anda termasuk orang yang mudah terpesona maupun mudah kesal dengan tampilan website. Maka Anda perlu mengetahui bagaimana

8 Alat Membuat Desain Web Responsive Untuk Developer


froont responsive web design
Desain web adalah bagian yang penting dalam sebuah proyek pengembangan website. Klien pada saat ini menuntut sebuah website yang responsive untuk dibuat.

3 Langkah Dasar Membuat Desain Web Responsive


ukuran screen devices
Membuat website responsive itu susah-susah gampang, akan lebih mudah jika Anda mengetahui apa hal utama yang harus di perhatikan ketika ingin membuat website responsive

7 Tutorial Cara Konversi PSD ke HTML dan CSS


psd to html css
Merancang website kadang bisa menjadi pekerjaan yang membosankan, namun apabila kita telah memiliki mock up photoshop pasti akan sangat membantu

7 Tutorial Cara Membuat Desain Web Dengan Photoshop

membuat desain layout website dengan photoshop
Dunia web desain semakin hari semakin ramai dan semakin diminati, desain website memang memiliki keasyikan tersendiri, berbeda dengan aktivitas koding, membuat desain dianggap lebih asik karena

Sejarah Singkat Ikon Hamburger Menu


Kita pasti mengetahui dan telah melihat icon hamburger ini. Sebagai contoh saja pasti hampir setiap hari Anda melihat icon yang ada di pojok kanan atas dari browser Google Chrome atau Mozilla Firefox