PHP MySQL Ecommerce Web Design Part 5


Postingan saya kali ini adalah tentang regristrasi sebagai customer

1. Buat file .PHP dengan nama customer_register.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file customer_register.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :

<?php
//session_start(); //start session first thing in script
// Connect to the mySQL database
include "phpScripts/connect_to_mysql.php";

include "captcha_global.php";
//////////// dropdown city from shipping table //////////////////
    $shipping_cities = mysql_query("SELECT DISTINCT CITY
    FROM shipping ORDER BY id ASC");
        $city = array();
    while($row = mysql_fetch_row($shipping_cities)){
        $city[] = $row[0];   
    }
?>   
   
<?php
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>

<?php
// Parse the form data and add inventory item to the system
if(isset($_POST['customerReg'])){
    $customer_name=mysql_real_escape_string($_POST['customer_name']);
    $email=mysql_real_escape_string($_POST['email']);
    $password=mysql_real_escape_string($_POST['password']);
    $confirm_password=mysql_real_escape_string($_POST['confirm_password']);
    $phone=mysql_real_escape_string($_POST['phone']);
    $address=mysql_real_escape_string($_POST['address']);
    $city=mysql_real_escape_string($_POST['city']);
    $newsletter=mysql_real_escape_string($_POST['newsletter']);
   
    // See if that name is an identical match to another product in the system
    $sqlCcheck=mysql_query("SELECT c_id FROM customer
    WHERE customer_name='$customer_name' LIMIT 1");
    $productMatch=mysql_num_rows($sqlCcheck); // Count the output amount
    if($productMatch > 0){
        echo 'Sorry you tried to place a duplicate "Customer Name" into the system,
        <a href="customer_login.php">click here</a>';
        exit();   
    }
    // See if that name is an identical match to another product in the system
    $sqlEcheck=mysql_query("SELECT c_id FROM customer
    WHERE email='$email' LIMIT 1");
    $productMatch=mysql_num_rows($sqlEcheck); // Count the output amount
    if($productMatch > 0){
        echo 'Sorry you tried to place a duplicate "Email" into the system,
        <a href="customer_login.php">click here</a>';
        exit();   
    }
     if ($_POST["password"] == $_POST["confirm_password"]) {
        // Add this customer into the database now
        $sqlCust=mysql_query("INSERT INTO customer
        (customer_name, email, password, confirm_password, phone,
        address, city, date_added)
        VALUES('$customer_name','$email', '$password', '$confirm_password','$phone',
        '$address','$city',now())")
        or die (mysql_error());
        //////////////// upload file  /////////////////////////////////
        $c_id=mysql_insert_id();
        // Place image in the folder
        $newname="$c_id.jpg";
        // Make sure that the customer_photos folder in the server has Write permission
        move_uploaded_file($_FILES['fileField']['tmp_name'],"customer_photos/$newname");
        //////////////// END upload file  ////////////////////////////////
        $sqlNews=mysql_query("INSERT INTO newsletter
        (customer_name, status, date_added)
        VALUES('$customer_name','$newsletter', now())")
        or die (mysql_error());
   
        header("location:index.php"); // Avoid re-adding item when refreshing the page
        exit();
    }else{
        echo 'Sorry password and confirm password do not match,
            <a href="customer_register.php">click here</a>';   
    } // closing if ...
} // closing if ...
?>

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Customer Register</title>
<!---------------------- LINK -------------------------->
    <?php include_once("template_links_head.php"); ?>
<!---------------------- END of LINK -------------------------->

<!--- Validating customerRegForm --->
<?php include_once("validasi_creg.php"); ?>
<!---------------------------------->

</head>
<body>
<div id="wrapper">
      <div id="customerReg">
        <!-------------------------- CAPTCHA --------------------------->
        <?php
        if (isset ($_POST['valid'])){
            $error_count =0;
            $error_message = array();
            $validate = trim(strtolower($_POST['validate']));
            if ($validate != get_answer() ) {
                $error_count++;
                $error_message['validate'] = "Jawaban salah!";   
            }
            //echo $error_count;
            if ($error_count >0 ) {
        ?>
                <form id="validateRegForm" name="validateRegForm" method="post" 
                style="font-size:15px; font-family:'Trebuchet MS',
                Arial, Helvetica, sans-serif">
                <!--- jika jawaban salah --->
                <center><h2>Jawab dengan benar!</h2></center>
                <div align="center" style="background-color:#CF9; padding-top:10px;
                padding-bottom:10px;">
                    <span style="color:blue; font-size:24px; font-family:'Trebuchet MS',
                    Arial, Helvetica, sans-serif">
                    <?php
                    create_question ()
                    ?>
                    </span>
                    <br />
                    <?php if (isset ($error_message ['validate'])): ?>
                    <span style="color:red; font-size:12px; font-family:'Trebuchet MS',
                    Arial, Helvetica, sans-serif">
                    <?php
                    echo $error_message['validate'];
                    ?>
                    <?php
                    endif;
                    ?>
                    <span style="color:green; font-size:12px; font-family:'Trebuchet MS',
                    Arial, Helvetica, sans-serif">
                    Jawab lagi pertanyaan
                    </span>
                    <input name="validate"  type="text" id="validate" size="15"
                    placeholder="Validate" style="font-size:15px; font-family:'Trebuchet MS',
                    Arial, Helvetica, sans-serif" />
                    <input type="submit" name="valid" id="valid" value="Validate"
                    style="font-size:15px; font-family:'Trebuchet MS',
                    Arial, Helvetica, sans-serif" />
                </div>
                </form>
                   
            <?php
            }else
            echo
                '<div style="background-color:#CF9;">
                <h3>'   ."Jawaban anda benar!".    '</h3>
                </div>';
            }else{
            ?>
                <form id="validateRegForm" name="validateRegForm"  method="post" 
                style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
                    <center><h2>Validasi</h2></center>
                    <div align="center" style="background-color:#CF9; padding-top:10px;
                    padding-bottom:10px">
                        <span style="color:blue; font-size:24px; font-family:'Trebuchet MS',
                        Arial, Helvetica, sans-serif">
                        <?php
                        create_question ()
                        ?>
                        </span>
                        <br />
                        <input name="validate" type="text" id="validate" size="15"
                        placeholder="Validate" style="font-size:15px; font-family:'Trebuchet MS',
                        Arial, Helvetica, sans-serif" />
                        <input type="submit" name="valid" id="valid" value="Validate"
                        style="font-size:15px; font-family:'Trebuchet MS',
                        Arial, Helvetica, sans-serif" />
                        </div>
                </form>
            <?php
            }   
            ?>
        <!-------------------------------- END CAPTCHA ------------------------------------->
        <?php
        // form registrasi tersembunyi, captcha terlihat
        // jika ada $_POST['valid'], tidak ada pesan error dan jawaban validasi benar maka:
        // tampilkan form registrasi   
        if (isset ($_POST['valid'])){      
            if (!isset ($error_message ['validate'])){        
                if ($validate = get_answer()){   
        ?>
                    <form id="customerRegForm" name="customerRegForm" method="post"
                    action="customer_register.php"     enctype="multipart/form-data"
                    style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
                    <h2>REGISTER</h2>
                    Name:
                    <br />
                    <input
                    name="customer_name" type="text" id="customer_name" size="35" placeholder="Name"
                    style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
                    <br />
                      Email:
                    <br />
                    <span  style="font-size:13px;  font-family:'Trebuchet MS',
                    Arial, Helvetica, sans-serif;  color:blue">
                    Pastikan email anda valid!
                    </span>
                    <br />
                    <input
                    name="email" type="text" id="email" size="35" placeholder="Email Address"
                    style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif" />
                    <br />
                    Password:
                    <br />
                    <input     name="password" type="password" id="password" placeholder="Password"
                    size="35" style="font-size:15px; font-family:'Trebuchet MS',
                    Arial, Helvetica, sans-serif" />
                    <br />
                    Confirm Password:
                    <br />
                    <input
                    name="confirm_password" type="password" id="confirm_password"
                    placeholder="Confirm Password" size="35" style="font-size:15px;
                    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif" />
                    <br />
                    Phone:
                    <br />
                    <input     name="phone" type="text" id="phone" size="35"     placeholder="Phone"
                    style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif" />
                    <br />
                    Address:
                    <br />
                    <span  style="font-size:13px; font-family:'Trebuchet MS',
                    Arial, Helvetica, sans-serif; color:blue">
                    Pastikan data alamat anda lengkap!
                    </span>
                    <br />
                    <textarea name="address" id="address" cols="33" rows="3" placeholder="Address"
                    style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
                    </textarea>
                    <br />
                    City:
                    <br />
                    <?php  // dropdown city retrieved from data base
                    if(count($city) <= 0){
                        echo 'No results have been found.';
                    } else { 
                        echo '<select name="city" id="city" style="font-size:15px;
                        font-family:Trebuchet MS, Arial, Helvetica, sans-serif">';
                        foreach($city as $city)
                        echo "<option style='font-size:15px; font-family:Trebuchet MS,
                        Arial, Helvetica, sans-serif'>$city</option>";
                        echo '</select>';
                    }
                    ?>
                    <br />
                    <br />
                     Apakah ingin dikirimi Newsletter:
                    <br />
                      <select name="newsletter" id="newsletter" style="font-size:15px; width: 170px;
                    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
                    <option value="0">Please Select</option>
                    <option value="YA">Ya, kirimi saya Newsletter</option>
                    <option value="TIDAK">Tidak, terima kasih</option>
                    </select>
                      <br />
                    <br />
                    <span  style="font-size:13px; font-family:'Trebuchet MS', Arial, Helvetica,
                    sans-serif; color:blue">
                    Upload foto kamu (.jpg)
                    <br/>
                    (jika tidak ada foto biarkan saja kosong!)
                    </span>
                    <br />
                    <input  type="file" name="fileField"  id="fileField" style="font-size:15px;
                    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
                    <br />
                    <br />
                    <input type="submit" name="customerReg" id="button" value="Register"
                    style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"
                    onclick="javascript:return validatecustomerRegForm();" />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;
                       <a href="customer_login.php"><input type="button" name="backToLogin"
                    id="backToLogin" value="Log In" style="font-size:15px; font-family:'Trebuchet MS',
                    Arial, Helvetica, sans-serif"/></a>
                       </form>
        <?php
        // END jika ada $_POST['valid'], tidak ada pesan error dan jawaban validasi benar maka:
        // tampilkan form registrasi                  
                } // closing if ...
            } // closing if ...
        } // closing if ...
        ?>   
    </div><!--- END customerReg --->
</div><!--- END Wrapper --->

</body>
</html>


2. Buat file .PHP dengan nama validasi_creg.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file validasi_creg.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :

<script type="text/javascript" language="javascript">
// By Adam Khoury @ www.developphp.com
function validatecustomerRegForm ( ) {
    var isValid = true;
    if ( document.customerRegForm.customer_name.value == "" ) {
    alert ( "Do not leave it blank!" );
    isValid = false;
    } else if ( document.customerRegForm.customer_name.value.length < 8 ) {
            alert ( "Your name must be at least 8 characters long" );
            isValid = false;
    } else if ( document.customerRegForm.email.value == "" ) {
            alert ( "Do not leave it blank!" );
            isValid = false;
    } else if ( document.customerRegForm.password.value == "" ) {
            alert ( "Do not leave it blank!" );
            isValid = false;
    } else if ( document.customerRegForm.confirm_password.value == "" ) {
            alert ( "Do not leave it blank!" );
            isValid = false;
    } else if ( document.customerRegForm.confirm_password.value != password.value ) {
            alert ( "Confirm Password harus sama dengan Password! " );
            isValid = false;
    } else if ( document.customerRegForm.phone.value == "" ) {
            alert ( "Do not leave it blank!" );
            isValid = false;
    } else if ( document.customerRegForm.address.value == "" ) {
            alert ( "Do not leave it blank!" );
            isValid = false;
    } else if ( document.customerRegForm.city.value == "" ) {
            alert ( "Do not leave it blank!" );
            isValid = false;
    }
    return isValid;
}
</script>


3. Buat file .PHP dengan nama captcha_global.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file captcha_global.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :

<?php
// allow session on the page
session_start();
// get all function
include 'captcha_functions.php';
?>


4. Buat file .PHP dengan nama captcha_functions.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file captcha_functions.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :

<?php
// include files from functions directory
set_include_path ('captcha_functions');
// captcha functions
include 'captcha.php';
restore_include_path ();
?>


5. Buat file .PHP dengan nama captcha.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file captcha.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :

<?php
$questions = array (
    1 => array (
         'question' => '1 + 3 =',
         'answer' => '4'
    ),
    2 => array (
         'question' => '10 x 3 =',
         'answer' => '30'
    ),
    3 => array (
         'question' => '7 x 3 =',
         'answer' => '21'
    ),
    4 => array (
         'question' => '5000 x 1',
         'answer' => '5000'
    ),
    5 => array (
         'question' => '100 x 2 =',
         'answer' => '200'
    )
);
function create_question (){
    global $questions;
    $random = rand (1, count($questions));
    $_SESSION['qid'] = $random;
    echo $questions [$random]['question'];
    }
function get_answer () {
    global $questions;
    $qid = $_SESSION ['qid'];
    return $questions[$qid]['answer'];
    }
?>


6. Buat file .PHP dengan nama customer_login.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file customer_login.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :

<?php
session_start();
if(isset($_SESSION["manager"])){
    header("location: index.php");
    exit();
}
?>

<?php
// Parse the log in form if the user has filled it out and pressed "Log In"
if(isset($_POST["customer_name"])&&isset($_POST["password"])){
// filter everything but numbers and letters
$manager = preg_replace('#[^A-Za-z0-9]#i','',$_POST["customer_name"]);
// filter everything but numbers and letters
$password = preg_replace('#[^A-Za-z0-9]#i','',$_POST["password"]);
// Run mySQL query to be sure that this person is an admin
// and that their password session var equals the database information
// Connect to the mySQL database
include "phpScripts/connect_to_mysql.php";
// query the person
$sql = mysql_query("SELECT*FROM customer WHERE customer_name='$manager'
AND password='$password' LIMIT 1");
//------- MAKE SURE PERSON EXISTS IN DATABASE ---------
// count the row nums
$existCount = mysql_num_rows($sql);
if($existCount == 1){ // evaluate the count
    while($row = mysql_fetch_array($sql)){
        $id = $row["id"];
        }
        $_SESSION["id"] = $id;
        $_SESSION["manager"] = $manager;
        $_SESSION["password"] = $password;

        header("location: customer_login.php");
        exit();
    }
    else{
    echo 'That information is incorrect, try again <a href="index.php">
    Click Here</a>';
    exit();
    }
}
?>

<?php
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Customer Login</title>
<!---------------------- LINK -------------------------->
     <?php include_once("template_links_head.php"); ?>
<!---------------------- END of LINK ------------------->

<!--- Validating customerLoginForm --->
    <?php include_once("validasi_clog.php"); ?>
<!--- END Validating customerLoginForm --->

</head>
<body>
<div id="wrapper">
      <div id="customerLogin" class="one-edge-shadow">
        <h2>CUSTOMER LOGIN</h2>
        <form
        id="customerLoginForm" name="customerLoginForm" method="post"
        action="customer_login.php"    enctype="multipart/form-data"
        style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
        Name:
        <br />
        <input name="customer_name" type="text" id="customer_name" size="35" placeholder="Name"
        style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
        <br />
        Password:
        <br />
        <input name="password" type="password" id="password" placeholder="Password" size="35"
        style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif" />
        <br />
           <br />   
        <input type="submit" name="button" id="button" value="Log In"
        style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"
        onclick="javascript:return validatecustomerLoginForm();" />
        <br />
        <br />
        <span style="font-size:18px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
        <a href="customer_register.php">
        REGISTER
        </a>
        </span>
        <font style="font-size:13px">jika belum terdaftar</font> 
        </form>
    </div><!--- END customerLogin --->
</div><!--- END Wrapper --->
</body>
</html>


7. Buat file .PHP dengan nama validasi_clog.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file validasi_clog.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :

<script type="text/javascript" language="javascript">
// By Adam Khoury @ www.developphp.com
function validatecustomerLoginForm ( ) {
    var isValid = true;
    if ( document.customerLoginForm.customer_name.value == "" ) {
    alert ( "Do not leave it blank!" );
    isValid = false;
    } else if ( document.customerLoginForm.customer_name.value.length < 8 ) {
            alert ( "Your name must be at least 8 characters long" );
            isValid = false;
    } else if ( document.customerLoginForm.password.value == "" ) {
            alert ( "Do not leave it blank!" );
            isValid = false;
    }
    return isValid;
}
</script>


8. Buat file .PHP dengan nama create_newsletter_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_newsletter_table.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :

<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand = "CREATE TABLE newsletter (
    n_id int(11) NOT NULL auto_increment,
    customer_name varchar(255) NOT NULL,
    status varchar(11) NOT NULL,
    date_added DATETIME NOT NULL,
    PRIMARY KEY (n_id),
    FOREIGN KEY (customer_name) REFERENCES customer(customer_name)
)ENGINE = InnoDB";

if (mysql_query($sqlCommand)){
    echo "Your newsletter table has been created successfully!";
} else {
    echo "CRITICAL ERROR: newsletter table has not been created.";
}
?>


9. Buat folder dengan nama customer_photos di D:\TUTOR WEB\RIANKLIK\
10. Buka Notepad++, pilih File, klik Open, cari file style.php di dalam folder styleCSS. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :

/*--------------- customer_register----------------- */
#customerReg {
    -moz-border-radius: 8px 8px 8px 8px;  /* for Firefox */
    -webkit-border-radius: 8px 8px 8px 8px; /* for Webkit-Browsers */
    border-radius: 8px 8px 8px 8px; /* regular */
    opacity: 0.8;
    padding: 20px;
    width: 298px;
    margin-right: auto;
    margin-left: auto;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    overflow: hidden;
    position: relative;
    border: 1px solid #CCC;
    background-color: #FFF;
}
/*--------------- customer_login----------------- */
#customerLogin {
    -moz-border-radius: 8px 8px 8px 8px;  /* for Firefox */
    -webkit-border-radius: 8px 8px 8px 8px; /* for Webkit-Browsers */
    border-radius: 8px 8px 8px 8px; /* regular */
    opacity: 0.8;
    padding: 20px;
    height: 280px;
    width: 300px;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;   
}


11. Upload semua file dan folder ke webserver
Buka winSCP, masuk ke 192.168.88.111, User name: root, Password: 654321, lalu rubah Permissions-nya folder customer_photos menjadi Write.
Buka dengan browser 192.168.88.111/phpScripts/, klik create_newsletter_table.php

12. Klik Register yang ada di bagian atas (header) atau di bagian bawah (footer),



jawab pertanyaan validasi, lalu klik Validate





Isi sesuai dengan data kalian. Name tidak boleh ada spasi (harus nyambung). Setelah selesai mengisi semua, klik Register, secara otomatis akan kembali ke halaman index.php
Kemudian klik Login yang ada di bagian atas (header)



Isikan sesuai dengan nama dan password yang sudah kalian daftarkan lalu klik Log In



Pada halaman index.php di bagian atas (header) akan muncul ikon gambar keranjang belanja



Pada halaman mensClothing.php juga akan muncul ikon gambar keranjang dan muncul beberapa pilihan baru pada menu yaitu Logout, Edit, Pesanan dan Comment

Comments

Popular posts from this blog

Sepuluh Langkah Membuat Warnet