Tutorial Website | Tutorial PHP & MYSQL | Boostsrap | Ajax Javascript

Membuat popup dengan time javascript bootstrap

2020-09-09T13:24:00.000+07:00

Selamat datang kembali diwebsite writecode ditutorial kali ini writecode akan berbagi sedikit ilmu Membuat popup dengan time Javascript Bootstrap lasung saja tanpa basa basi silakan copas koding dibawah ini :


<html>
    <head>
        <title>Latihan Modal | Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet"></head>
    <body>
<div class="container">      
    <center><h1>Membuat Modal dengan Bootstrap</h1>
        <!-- Tombol untuk menampilkan modal-->
        <button type="button" class="btn btn-info btn-lg" 
        data-toggle="modal" data-target="#myModal">Buka Modal</button>
        <h1>TutorialPedia.NET</h1>
    </center>

    <!-- Modal -->

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- konten modal-->
            <div class="modal-content">
                <!-- heading modal -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                    <h4 class="modal-title">Bagian heading modal</h4>
                </div>
                <!-- body modal -->
                <div class="modal-body">
                    <p>bagian body modal.</p>
                </div>
                <!-- footer modal -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" 
                     data-dismiss="modal">
                    Tutup Modal</button>
                </div>
            </div>
        </div>
    </div>
   </div>        

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
      // angka 500 dibawah ini artinya pesan akan muncul dalam 0,5 detik setelah document ready
        $(document).ready(function(){
          setTimeout(function(){
            $('#myModal').modal('show');
          }, 500);
        });
      // angka 3000 dibawah ini artinya pesan akan hilang dalam 3 detik setelah muncul
      setTimeout(function(){
        $('#myModal').modal('hide');
      }, 3000);
    </script>
</body>
</html>

Bisa anda perhatikan script dibawah ini , koding inilah nantinya yang akan menampilakan popup berdasarkan time sesuai dengan waktu yang ditentukan oleh agan sendiri mau berapa lama waktu munculnya.

<script>
      // angka 500 dibawah ini artinya pesan akan muncul dalam 0,5 detik setelah document ready
        $(document).ready(function(){
          setTimeout(function(){
            $('#myModal').modal('show');
          }, 500);
        });
      // angka 3000 dibawah ini artinya pesan akan hilang dalam 3 detik setelah muncul
      setTimeout(function(){
        $('#myModal').modal('hide');
      }, 3000);
</script>

Sekian tutorial singakat writecode cara Membuat popup dengan time javascript bootstrap semoga bermanfaat.

Cara menampilkan data json ke dalam datatables menggunakan jquery

2020-09-09T13:23:00.004+07:00

Stories adalah blog Menulis Artikel dan Sambung cerita bersama teman.

Dalam posting ini saya akan menunjukkan Cara untuk mengambil data JSON dari file dan tampilan di JQuery Datatables. Format data JSON adalah format data yang sangat ringan untuk menyimpan data. Apakah Anda tahu apa itu JQuery Datatables, ini adalah plugin JQuery untuk menampilkan data dalam format Tabel.

Dengan menggunakan plugin JQuery ini Anda tidak hanya bisa menampilkan data dalam tabel juga tapi juga menyediakan fetures lain seperti data pencarian dari data html, Anda dapat mengontrol berapa banyak record yang ingin Anda tampilkan pada satu halaman, namun juga menyediakan fitur seperti data tampilan dalam ascending. atau urutan menurun dan juga menyediakan pagination. Caranya sangat simple silakan anda ikuti langkah2 dibawah ini :

Baca juga : Cara membuat Shoping Cart PHP Mysql

Buat file index.php script kode :

<!DOCTYPE html>  
 <html>  
      <head>  
           <title>Show JSON Data in Jquery Datatables</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>  
           <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container">  
                <h1 align="center">Show JSON Data in Jquery Datatables</h3><br />  
                <h3 align="center">Employee Database</h3><br />  
                <table id="data-table" class="table table-bordered">  
                     <thead>  
                          <tr>  
                               <th>Name</th>  
                               <th>Gender</th>  
                               <th>Designation</th>  
                          </tr>  
                     </thead>  
                </table>  
           </div> 

           <!-- script -->
           <script>  
   $(document).ready(function(){  
      $('#data-table').DataTable({  
          "ajax" : "employee_data.json",  
          "columns"     :     [  
               { "data" : "name"     },  
               { "data" : "gender"},  
               { "data" : "designation"}  
          ]  
      });  
   });  
   </script>   
      </body>  
 </html>

sekarang buat satu file employee_data.json

Baca Juga : Membuat Editor CSS dengan Textarea

{  
      "data"     :     [  
           {  
                "name": "Michael Bruce",  
                "gender": "Male",  
                "designation": "System Architect"  
           },  
           {  
                "name": "Jennifer Winters",  
                "gender": "Female",  
                "designation": "Senior Programmer"  
           },  
           {  
                "name": "Donna Fox",  
                "gender": "Female",  
                "designation": "Office Manager"  
           },  
           {  
                "name": "Cynthia E. Folmar",  
                "gender": "Female",  
                "designation": "Pharmacy technician"  
           },  
           {  
                "name": "Charles E. Drexler",  
                "gender": "Male",  
                "designation": "Pamphlet binding worker"  
           },  
           {  
                "name": "Andre F. Morris",  
                "gender": "Male",  
                "designation": "Respiratory therapy technician"  
           },  
           {  
                "name": "James P. Baumgartner",  
                "gender": "Male",  
                "designation": "Diesel mechanic"  
           },  
           {  
                "name": "Harold E. Welter",  
                "gender": "Male",  
                "designation": "Cooling and freezing equipment operator"  
           },  
           {  
                "name": "Antionette J. Ellard",  
                "gender": "Female",  
                "designation": "Power plant distributor"  
           },  
           {  
                "name": "Edith C. Hughes",  
                "gender": "Female",  
                "designation": "Record clerk"  
           },  
           {  
                "name": "Mary R. Johnson",  
                "gender": "Female",  
                "designation": "Direct care worker"  
           },  
           {  
                "name": "Christina R. Belin",  
                "gender": "Female",  
                "designation": "Cost engineer"  
           },  
           {  
                "name": "Edith J. Ochoa",  
                "gender": "Female",  
                "designation": "Gastroenterologist"  
           },  
           {  
                "name": "Elizbeth R. Thornton",  
                "gender": "Female",  
                "designation": "Public relations consultant"  
           },  
           {  
                "name": "Barbara W. Ibarra",  
                "gender": "Female",  
                "designation": "Regional geographer"  
           },  
           {  
                "name": "Art D. Steiner",  
                "gender": "Male",  
                "designation": "Camp director"  
           },  
           {  
                "name": "Dorothy C. Downs",  
                "gender": "Female",  
                "designation": "Conference interpreter"  
           },  
           {  
                "name": "Francisca J. Healy",  
                "gender": "Female",  
                "designation": "Stereotyper"  
           },  
           {  
                "name": "Janice J. Luton",  
                "gender": "Female",  
                "designation": "Quality control technician"  
           },  
           {  
                "name": "Jeanetta M. Brown",  
                "gender": "Female",  
                "designation": "Machine feeder"  
           },  
           {  
                "name": "Susan P. Nazario",  
                "gender": "Female",  
                "designation": "Process metallurgical engineer"  
           },  
           {  
                "name": "Antonia K. Vogl",  
                "gender": "Female",  
                "designation": "Psychiatrist"  
           },  
           {  
                "name": "Cheryl P. Mahn",  
                "gender": "Female",  
                "designation": "Credit manager"  
           },  
           {  
                "name": "Stephen E. Lynn",  
                "gender": "Male",  
                "designation": "Golf course architect"  
           },  
           {  
                "name": "Michael M. Rodriguez",  
                "gender": "Male",  
                "designation": "Psychologist"  
           },  
           {  
                "name": "Elsie D. Jones",  
                "gender": "Female",  
                "designation": "Research psychologist"  
           },  
           {  
                "name": "Jeremy J. Underwood",  
                "gender": "Male",  
                "designation": "Commentator"  
           },  
           {  
                "name": "Brenda J. Fowler",  
                "gender": "Female",  
                "designation": "Radio equipment installer"  
           },  
           {  
                "name": "Mollie S. Castillo",  
                "gender": "Female",  
                "designation": "Information processing worker"  
           },  
           {  
                "name": "Carol T. McDill",  
                "gender": "Female",  
                "designation": "Power distributor"  
           },  
           {  
                "name": "Darlene P. Allen",  
                "gender": "Female",  
                "designation": "Industrial production manager"  
           }  
      ]  
 }

Silakan di praktekan di media belajar anda.
Baca juga : Ajax add & delete a Record with jQuery dan Load More Ajax Jquery

Cara membuat Shoping Cart PHP Mysql

2020-09-09T13:19:00.005+07:00

Jika Anda ingin mencari tutorial cara membuat keranjang belanja dengan PHP MYSQL ? berikut langkah demi langkah pembuatan keranjang belanja. Di posting ini kita akan belajar bagaimana Cara membuat Shoping Cart PHP MYSQL. Disini akan menjelaskan bagaimana cara menampilkan daftar produk dari database MySql.

Di setiap produk display kami telah memberikan pilihan untuk memasukkan jumlah barang dan menambahkan item ke keranjang belanja dan item keranjang belanja tersebut akan disimpan ke dalam variabel sesi dan jika Anda ingin menghapus item dari keranjang belanja, Anda dapat menghapus variabel sesi dan dapat menghapusnya.

barang dari keranjang belanja Saya telah menggunakan kode php inti yang sangat sederhana untuk membuat keranjang belanja sederhana ini dengan menggunakan metode get and post php.

Stories adalah blog Menulis Artikel dan Sambung cerita bersama teman.

Sebelum masuk ke script kode silakan buat tabel seperti dibawah ini :

CREATE TABLE IF NOT EXISTS `tbl_product` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `name` varchar(255) NOT NULL,  
  `image` varchar(255) NOT NULL,  
  `price` double(10,2) NOT NULL,  
  PRIMARY KEY (`id`)  
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

sekarang buat file index.php script kode :

<?php   
 session_start();  
 $connect = mysqli_connect("localhost", "root", "password", "database");  
 if(isset($_POST["add_to_cart"]))  
 {  
      if(isset($_SESSION["shopping_cart"]))  
      {  
           $item_array_id = array_column($_SESSION["shopping_cart"], "item_id");  
           if(!in_array($_GET["id"], $item_array_id))  
           {  
                $count = count($_SESSION["shopping_cart"]);  
                $item_array = array(  
                    'item_id' => $_GET["id"],  
                    'item_name' => $_POST["hidden_name"],  
                    'item_price' => $_POST["hidden_price"],  
                    'item_quantity' => $_POST["quantity"]  
                );  
                $_SESSION["shopping_cart"][$count] = $item_array;  
           }  
           else  
           {  
                echo '<script>alert("Item Already Added")</script>';  
                echo '<script>window.location="index.php"</script>';  
           }  
      }  
      else  
      {  
           $item_array = array(  
                'item_id'=> $_GET["id"],  
                'item_name'=> $_POST["hidden_name"],  
                'item_price'=> $_POST["hidden_price"],  
                'item_quantity'=> $_POST["quantity"]  
           );  
           $_SESSION["shopping_cart"][0] = $item_array;  
      }  
 }  
 if(isset($_GET["action"]))  
 {  
      if($_GET["action"] == "delete")  
      {  
           foreach($_SESSION["shopping_cart"] as $keys => $values)  
           {  
                if($values["item_id"] == $_GET["id"])  
                {  
                    unset($_SESSION["shopping_cart"][$keys]);  
                    echo '<script>alert("Item Removed")</script>';  
                    echo '<script>window.location="index.php"</script>';  
                }  
           }  
      }  
 }  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Cara membuat shoping cart php mysql</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Cara membuat shoping cart php mysql</h3><br />  
                <?php  
                $query = "SELECT * FROM tbl_product ORDER BY id ASC";  
                $result = mysqli_query($connect, $query);  
                if(mysqli_num_rows($result) > 0)  
                {  
                    while($row = mysqli_fetch_array($result))  
                    {  
                ?>  
                <div class="col-md-4">  
                     <form method="post" action="index.php?action=add&id=<?php echo $row["id"]; ?>">  
                          <div style="border:1px solid #333; background-color:#f1f1f1; border-radius:5px; padding:16px;" align="center">  
                               <img src="<?php echo $row["image"]; ?>" class="img-responsive" /><br />  
                               <h4 class="text-info"><?php echo $row["name"]; ?></h4>  
                               <h4 class="text-danger">$ <?php echo $row["price"]; ?></h4>  
                               <input type="text" name="quantity" class="form-control" value="1" />  
                               <input type="hidden" name="hidden_name" value="<?php echo $row["name"]; ?>" />  
                               <input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>" />  
                               <input type="submit" name="add_to_cart" style="margin-top:5px;" class="btn btn-success" value="Add to Cart" />  
                          </div>  
                     </form>  
                </div>  
                <?php  
                }  
                }  
                ?>  
                <div style="clear:both"></div>  
                <br />  
                <h3>Order Details</h3>  
                <div class="table-responsive">  
                     <table class="table table-bordered">  
                          <tr>  
                               <th width="40%">Item Name</th>  
                               <th width="10%">Quantity</th>  
                               <th width="20%">Price</th>  
                               <th width="15%">Total</th>  
                               <th width="5%">Action</th>  
                          </tr>  
                          <?php   
                          if(!empty($_SESSION["shopping_cart"]))  
                          {  
                            $total = 0;  
                            foreach($_SESSION["shopping_cart"] as $keys => $values)  
                            {  
                          ?>  
                          <tr>  
                               <td><?php echo $values["item_name"]; ?></td>  
                               <td><?php echo $values["item_quantity"]; ?></td>  
                               <td>$ <?php echo $values["item_price"]; ?></td>  
                               <td>$ <?php echo number_format($values["item_quantity"] * $values["item_price"], 2); ?></td>  
                               <td><a href="index.php?action=delete&id=<?php echo $values["item_id"]; ?>"><span class="text-danger">Remove</span></a></td>  
                          </tr>  
                          <?php  
                            $total = $total + ($values["item_quantity"] * $values["item_price"]);  
                            }  
                          ?>  
                          <tr>  
                               <td colspan="3" align="right">Total</td>  
                               <td align="right">$ <?php echo number_format($total, 2); ?></td>  
                               <td></td>  
                          </tr>  
                          <?php  
                          }  
                          ?>  
                     </table>  
                </div>  
           </div>  
           <br />  
      </body>  
 </html>

Potongan script kode dibawah ini untuk menambahkan data belaja kedalam keranjang menggunakan session

<?php   
 session_start();  
 $connect = mysqli_connect("localhost", "root", "password", "database");  
 if(isset($_POST["add_to_cart"]))  
 {  
      if(isset($_SESSION["shopping_cart"]))  
      {  
           $item_array_id = array_column($_SESSION["shopping_cart"], "item_id");  
           if(!in_array($_GET["id"], $item_array_id))  
           {  
                $count = count($_SESSION["shopping_cart"]);  
                $item_array = array(  
                    'item_id' => $_GET["id"],  
                    'item_name' => $_POST["hidden_name"],  
                    'item_price' => $_POST["hidden_price"],  
                    'item_quantity' => $_POST["quantity"]  
                );  
                $_SESSION["shopping_cart"][$count] = $item_array;  
           }  
           else  
           {  
                echo '<script>alert("Item Already Added")</script>';  
                echo '<script>window.location="index.php"</script>';  
           }  
      }  
      else  
      {  
           $item_array = array(  
                'item_id'=> $_GET["id"],  
                'item_name'=> $_POST["hidden_name"],  
                'item_price'=> $_POST["hidden_price"],  
                'item_quantity'=> $_POST["quantity"]  
           );  
           $_SESSION["shopping_cart"][0] = $item_array;  
      }  
 }  
 if(isset($_GET["action"]))  
 {  
      if($_GET["action"] == "delete")  
      {  
           foreach($_SESSION["shopping_cart"] as $keys => $values)  
           {  
                if($values["item_id"] == $_GET["id"])  
                {  
                    unset($_SESSION["shopping_cart"][$keys]);  
                    echo '<script>alert("Item Removed")</script>';  
                    echo '<script>window.location="index.php"</script>';  
                }  
           }  
      }  
 }

Silakan dicoba dan dipraktekan dengan baik, teruslah mengasah kemampuan anda. Selamat Belajar

Cara Mudah Membuat Upload Crop Image PHP Mysql Javascript

2020-08-09T11:47:00.001+07:00

Ditutorial kali writecode akan membahas cara UPLOAD CROP IMAGE PHP JQUERY berikut langkah demi langkah pembuatan UPLOAD CROP IMAGE PHP JQUERY sederhana. Script PHP ini sengaja disimpan sesederhana mungkin untuk programmer yang baru belajar PHP. Apa saja yang harus anda siapkan sebelum memulai project ini Silakan download Jquery jquery-pack.js & jquery.imgareaselect.min.js DISINI bila sudah selesai di download silakan masukan ke dalam folder project belajar anda.

Directory

Js //file js disini
upload_pic //folder image

File php

index.php
function.php

Pertama buat file index.php didalam folder latihan silkan copas script kodenya seperti dibawah ini :

Baca Juga : Cropping image php mysql jquery in modal bootstrap

<?php include_once __DIR__.'/function.php';?>
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Upload crop image php jquery</title>
 <script type="text/javascript" src="js/jquery-pack.js"></script>
 <script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>

</head>
<body>

<?php
//Only display the javacript if an image has been uploaded
if(strlen($large_photo_exists)>0){
 $current_large_image_width = getWidth($large_image_location);
 $current_large_image_height = getHeight($large_image_location);?>

 <script type="text/javascript">
  function preview(img, selection) { 
   var scaleX = <?php echo $thumb_width;?> / selection.width; 
   var scaleY = <?php echo $thumb_height;?> / selection.height; 
   $('#thumbnail + div > img').css({ 
    width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
    height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
   });
   $('#x1').val(selection.x1);
   $('#y1').val(selection.y1);
   $('#x2').val(selection.x2);
   $('#y2').val(selection.y2);
   $('#w').val(selection.width);
   $('#h').val(selection.height);
  } 
  $(document).ready(function () { 
   $('#save_thumb').click(function() {
    var x1 = $('#x1').val();
    var y1 = $('#y1').val();
    var x2 = $('#x2').val();
    var y2 = $('#y2').val();
    var w = $('#w').val();
    var h = $('#h').val();
    if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
     alert("You must make a selection first");
     return false;
    }else{
     return true;
    }
   });
  }); 
  $(window).load(function () { 
   $('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
  });
 </script>
<?php }?>

<h1>Photo Upload and Crop</h1>
<?php
//Display error message if there are any
if(strlen($error)>0){
echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
}
if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
echo $large_photo_exists."&nbsp;".$thumb_photo_exists;
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete&t=".$_SESSION['random_key'].$_SESSION['user_file_ext']."\">Delete images</a></p>";
echo "<p><a href=\"".$_SERVER["PHP_SELF"]."\">Upload another</a></p>";
//Clear the time stamp session and user file extension
$_SESSION['random_key']= "";
$_SESSION['user_file_ext']= "";
}else{
 if(strlen($large_photo_exists)>0){?>
  <h2>Create Thumbnail</h2>
  <div align="center">

   <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />

   <div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
    <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
   </div>

   <br style="clear:both;"/>

   <form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
    <input type="hidden" name="x1" value="" id="x1" />
    <input type="hidden" name="y1" value="" id="y1" />
    <input type="hidden" name="x2" value="" id="x2" />
    <input type="hidden" name="y2" value="" id="y2" />
    <input type="hidden" name="w" value="" id="w" />
    <input type="hidden" name="h" value="" id="h" />
    <input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
   </form>
  </div>
  <hr />
 <?php } ?>

 <h2>Upload Photo</h2>
 <form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
 Photo <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" />
 </form>

<?php } ?>

</body>
</html>

selanjutnya untuk script kode function.php seperti dibawah ini :

Baca Juga : Insert dynamic multi select data menggunakan PHP Ajax Jquery

<?php
 error_reporting (E_ALL ^ E_NOTICE);
 session_start(); //Do not remove this
 //only assign a new timestamp if the session variable is empty
 if (!isset($_SESSION['random_key']) || strlen($_SESSION['random_key'])==0){
     $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
  $_SESSION['user_file_ext']= "";
 }
 
 $upload_dir = "upload_pic"; // The directory for the images to be saved in
 $upload_path = $upload_dir."/"; // The path to where the image will be saved
 $large_image_prefix = "resize_"; // The prefix name to large image
 $thumb_image_prefix = "thumbnail_"; // The prefix name to the thumb image

 $large_image_name = $large_image_prefix.$_SESSION['random_key']; // New name of the large image (append the timestamp to the filename)
 $thumb_image_name = $thumb_image_prefix.$_SESSION['random_key']; // New name of the thumbnail image (append the timestamp to the filename)

 $max_file = "3"; // Maximum file size in MB
 $max_width = "500"; // Max width allowed for the large image
 $thumb_width = "100"; // Width of thumbnail image
 $thumb_height = "100"; // Height of thumbnail image

 // Only one of these image types should be allowed for upload
 $allowed_image_types = array('image/pjpeg'=>"jpg",'image/jpeg'=>"jpg",'image/jpg'=>"jpg",'image/png'=>"png",'image/x-png'=>"png",'image/gif'=>"gif");
 $allowed_image_ext = array_unique($allowed_image_types); // do not change this
 $image_ext = ""; // initialise variable, do not change this.
 foreach ($allowed_image_ext as $mime_type => $ext) {
     $image_ext.= strtoupper($ext)." ";
 }

 ##########################################################################################################
 # IMAGE FUNCTIONS                       #
 # You do not need to alter these functions                 #
 ##########################################################################################################
 function resizeImage($image,$width,$height,$scale) {
  list($imagewidth, $imageheight, $imageType) = getimagesize($image);
  $imageType = image_type_to_mime_type($imageType);
  $newImageWidth = ceil($width * $scale);
  $newImageHeight = ceil($height * $scale);
  $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
  
  switch($imageType) {
   case "image/gif":
    $source=imagecreatefromgif($image); 
    break;
      case "image/pjpeg":
   case "image/jpeg":
   case "image/jpg":
    $source=imagecreatefromjpeg($image); 
    break;
      case "image/png":
   case "image/x-png":
    $source=imagecreatefrompng($image); 
    break;
    }
  imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
  
  switch($imageType) {
   case "image/gif":
      imagegif($newImage,$image); 
    break;
        case "image/pjpeg":
   case "image/jpeg":
   case "image/jpg":
      imagejpeg($newImage,$image,90); 
    break;
   case "image/png":
   case "image/x-png":
    imagepng($newImage,$image);  
    break;
     }
  
  chmod($image, 0777);
  return $image;
 }
 //You do not need to alter these functions
 function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
  list($imagewidth, $imageheight, $imageType) = getimagesize($image);
  $imageType = image_type_to_mime_type($imageType);
  
  $newImageWidth = ceil($width * $scale);
  $newImageHeight = ceil($height * $scale);
  $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
  switch($imageType) {
   case "image/gif":
    $source=imagecreatefromgif($image); 
    break;
      case "image/pjpeg":
   case "image/jpeg":
   case "image/jpg":
    $source=imagecreatefromjpeg($image); 
    break;
      case "image/png":
   case "image/x-png":
    $source=imagecreatefrompng($image); 
    break;
    }
  imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
  switch($imageType) {
   case "image/gif":
      imagegif($newImage,$thumb_image_name); 
    break;
        case "image/pjpeg":
   case "image/jpeg":
   case "image/jpg":
      imagejpeg($newImage,$thumb_image_name,90); 
    break;
   case "image/png":
   case "image/x-png":
    imagepng($newImage,$thumb_image_name);  
    break;
     }
  chmod($thumb_image_name, 0777);
  return $thumb_image_name;
 }
 //You do not need to alter these functions
 function getHeight($image) {
  $size = getimagesize($image);
  $height = $size[1];
  return $height;
 }
 //You do not need to alter these functions
 function getWidth($image) {
  $size = getimagesize($image);
  $width = $size[0];
  return $width;
 }

 //Image Locations
 $large_image_location = $upload_path.$large_image_name.$_SESSION['user_file_ext'];
 $thumb_image_location = $upload_path.$thumb_image_name.$_SESSION['user_file_ext'];

 //Create the upload directory with the right permissions if it doesn't exist
 if(!is_dir($upload_dir)){
  mkdir($upload_dir, 0777);
  chmod($upload_dir, 0777);
 }

 //Check to see if any images with the same name already exist
 if (file_exists($large_image_location)){
  if(file_exists($thumb_image_location)){
   $thumb_photo_exists = "<img src=\"".$upload_path.$thumb_image_name.$_SESSION['user_file_ext']."\" alt=\"Thumbnail Image\"/>";
  }else{
   $thumb_photo_exists = "";
  }
     $large_photo_exists = "<img src=\"".$upload_path.$large_image_name.$_SESSION['user_file_ext']."\" alt=\"Large Image\"/>";
 } else {
     $large_photo_exists = "";
  $thumb_photo_exists = "";
 }

 if (isset($_POST["upload"])) { 
  //Get the file information
  $userfile_name = $_FILES['image']['name'];
  $userfile_tmp = $_FILES['image']['tmp_name'];
  $userfile_size = $_FILES['image']['size'];
  $userfile_type = $_FILES['image']['type'];
  $filename = basename($_FILES['image']['name']);
  $file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));
  
  //Only process if the file is a JPG, PNG or GIF and below the allowed limit
  if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {
   
   foreach ($allowed_image_types as $mime_type => $ext) {
    //loop through the specified image types and if they match the extension then break out
    //everything is ok so go and check file size
    if($file_ext==$ext && $userfile_type==$mime_type){
     $error = "";
     break;
    }else{
     $error = "Only <strong>".$image_ext."</strong> images accepted for upload<br />";
    }
   }
   //check if the file size is above the allowed limit
   if ($userfile_size > ($max_file*1048576)) {
    $error.= "Images must be under ".$max_file."MB in size";
   }
   
  }else{
   $error= "Select an image for upload";
  }

  //Everything is ok, so we can upload the image.
  if (strlen($error)==0){
   
   if (isset($_FILES['image']['name'])){
    //this file could now has an unknown file extension (we hope it's one of the ones set above!)
    $large_image_location = $large_image_location.".".$file_ext;
    $thumb_image_location = $thumb_image_location.".".$file_ext;
    
    //put the file ext in the session so we know what file to look for once its uploaded
    $_SESSION['user_file_ext']=".".$file_ext;
    
    move_uploaded_file($userfile_tmp, $large_image_location);
    chmod($large_image_location, 0777);
    
    $width = getWidth($large_image_location);
    $height = getHeight($large_image_location);
    //Scale the image if it is greater than the width set above
    if ($width > $max_width){
     $scale = $max_width/$width;
     $uploaded = resizeImage($large_image_location,$width,$height,$scale);
    }else{
     $scale = 1;
     $uploaded = resizeImage($large_image_location,$width,$height,$scale);
    }
    //Delete the thumbnail file so the user can create a new one
    if (file_exists($thumb_image_location)) {
     unlink($thumb_image_location);
    }
   }
   //Refresh the page to show the new uploaded image
   header("location:".$_SERVER["PHP_SELF"]);
   exit();
  }
 }

 if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
  $x1 = $_POST["x1"];
  $y1 = $_POST["y1"];
  $x2 = $_POST["x2"];
  $y2 = $_POST["y2"];
  $w = $_POST["w"];
  $h = $_POST["h"];
  $scale = $thumb_width/$w;
  $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
  header("location:".$_SERVER["PHP_SELF"]);
  exit();
 }


 if ($_GET['a']=="delete" && strlen($_GET['t'])>0){
  $large_image_location = $upload_path.$large_image_prefix.$_GET['t'];
  $thumb_image_location = $upload_path.$thumb_image_prefix.$_GET['t'];
  if (file_exists($large_image_location)) {
   unlink($large_image_location);
  }
  if (file_exists($thumb_image_location)) {
   unlink($thumb_image_location);
  }
  header("location:".$_SERVER["PHP_SELF"]);
  exit(); 
 }
?>

Untuk kode Javascriptnya seperti dibawah ini :

<script type="text/javascript">
function preview(img, selection) { 
 var scaleX = <?php echo $thumb_width;?> / selection.width; 
 var scaleY = <?php echo $thumb_height;?> / selection.height; 
 $('#thumbnail + div > img').css({ 
  width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
  height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
  marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
  marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
 });
 $('#x1').val(selection.x1);
 $('#y1').val(selection.y1);
 $('#x2').val(selection.x2);
 $('#y2').val(selection.y2);
 $('#w').val(selection.width);
 $('#h').val(selection.height);
} 
$(document).ready(function () { 
 $('#save_thumb').click(function() {
  var x1 = $('#x1').val();
  var y1 = $('#y1').val();
  var x2 = $('#x2').val();
  var y2 = $('#y2').val();
  var w = $('#w').val();
  var h = $('#h').val();
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
   alert("You must make a selection first");
   return false;
  }else{
   return true;
  }
 });
}); 
$(window).load(function () { 
$('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
});
</script>

Disini untuk menyimpan nama file gamabr acak menggunakan timestamp. Kita sekarang juga menyimpan ekstensi file yang melalui script, untuk memastikan kita berhadapan dengan tipe gambar yang tepat.kodenya seperti dibawah ini :

Baca Juga : Load more dengan ajax jquery php mysqli

if (!isset($_SESSION['random_key']) || strlen($_SESSION['random_key'])==0){
$_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s'));//assign the timestamp to the session variable
$_SESSION['user_file_ext']= "";
}

silakan dipelajari dan dipahami untuk script lengkapnya DISINI selamat belajar

Template ECommerce Product Detail CSS

2018-02-22T16:33:00.000+07:00

Jumpa lagi dengan Lacodeid(WriteCode) ditutorial ini WriteCode Akan membahas cara membuat Template ECommerce Product Detail CSS, untuk membuat template seperti gambar diatas bisa ikuti tutorial ini sampai dengan selesai, cara ini sering saya gunakan untuk membuat detail produk disetiap project website yang berhubungan dengan penjualan, langsung saja tanpa basa basi kita masuk kekodingannya dibawah ini :

Baca Juga : Carousal Product Responsive Ponsel dan Desktop

Step 1

Untuk script CSS bisa Anda copas dibawah ini letakan didalam tag <head> :

<style type="text/css">
        
        /*****************globals*************/
        body {
          font-family: 'open sans';
          overflow-x: hidden; }

        img {
          max-width: 100%; }

        .preview {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column; }
          @media screen and (max-width: 996px) {
            .preview {
              margin-bottom: 20px; } }

        .preview-pic {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
              -ms-flex-positive: 1;
                  flex-grow: 1; }

        .preview-thumbnail.nav-tabs {
          border: none;
          margin-top: 15px; }
          .preview-thumbnail.nav-tabs li {
            width: 18%;
            margin-right: 2.5%; }
            .preview-thumbnail.nav-tabs li img {
              max-width: 100%;
              display: block; }
            .preview-thumbnail.nav-tabs li a {
              padding: 0;
              margin: 0; }
            .preview-thumbnail.nav-tabs li:last-of-type {
              margin-right: 0; }

        .tab-content {
          overflow: hidden; }
          .tab-content img {
            width: 100%;
            -webkit-animation-name: opacity;
                    animation-name: opacity;
            -webkit-animation-duration: .3s;
                    animation-duration: .3s; }

        .card {
          margin-top: 50px;
          background: #eee;
          padding: 3em;
          line-height: 1.5em; }

        @media screen and (min-width: 997px) {
          .wrapper {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex; } }

        .details {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column; }

        .colors {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
              -ms-flex-positive: 1;
                  flex-grow: 1; }

        .product-title, .price, .sizes, .colors {
          text-transform: UPPERCASE;
          font-weight: bold; }

        .checked, .price span {
          color: #ff9f1a; }

        .product-title, .rating, .product-description, .price, .vote, .sizes {
          margin-bottom: 15px; }

        .product-title {
          margin-top: 0; }

        .size {
          margin-right: 10px; }
          .size:first-of-type {
            margin-left: 40px; }

        .color {
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
          height: 2em;
          width: 2em;
          border-radius: 2px; }
          .color:first-of-type {
            margin-left: 20px; }

        .add-to-cart, .like {
          background: #ff9f1a;
          padding: 1.2em 1.5em;
          border: none;
          text-transform: UPPERCASE;
          font-weight: bold;
          color: #fff;
          -webkit-transition: background .3s ease;
                  transition: background .3s ease; }
          .add-to-cart:hover, .like:hover {
            background: #b36800;
            color: #fff; }

        .not-available {
          text-align: center;
          line-height: 2em; }
          .not-available:before {
            font-family: fontawesome;
            content: "\f00d";
            color: #fff; }

        .orange {
          background: #ff9f1a; }

        .green {
          background: #85ad00; }

        .blue {
          background: #0076ad; }

        .tooltip-inner {
          padding: 1.3em; }

        @-webkit-keyframes opacity {
          0% {
            opacity: 0;
            -webkit-transform: scale(3);
                    transform: scale(3); }
          100% {
            opacity: 1;
            -webkit-transform: scale(1);
                    transform: scale(1); } }

        @keyframes opacity {
          0% {
            opacity: 0;
            -webkit-transform: scale(3);
                    transform: scale(3); }
          100% {
            opacity: 1;
            -webkit-transform: scale(1);
                    transform: scale(1); } }

    </style>

Step 2

Untuk Bootstrap bisa anda copas dibawah ini letakan didalam tag <head>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

Step 3

Kode HTML bisa anda copas dibawah ini :

Baca Juga : HTML CSS Produk Mobile Responsive

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template E-Commerce Product Detail CSS</title>

    <!-- letakan bootstrap disini -->


    <!-- letakan style css disini -->

  </head>

  <body>
    
    <div class="container">
        <div class="card">
            <div class="container-fliud">
                <div class="wrapper row">
                    <div class="preview col-md-6">
                        
                        <div class="preview-pic tab-content">
                          <div class="tab-pane active" id="pic-1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                          <div class="tab-pane" id="pic-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                          <div class="tab-pane" id="pic-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                          <div class="tab-pane" id="pic-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                          <div class="tab-pane" id="pic-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></div>
                        </div>
                        <ul class="preview-thumbnail nav nav-tabs">
                          <li class="active"><a data-target="#pic-1" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                          <li><a data-target="#pic-2" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                          <li><a data-target="#pic-3" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                          <li><a data-target="#pic-4" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                          <li><a data-target="#pic-5" data-toggle="tab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTHY93lAVZt-oGuIp7LaduDESC3KNTR_NPeK8uf4Gg_jEbwdJiFP6kVbzUorv95XfcBHwO1Fw8A3WOXsbdrSMOzFNR9F0BDyN9sIgJSfWwHELU0Z0ARcbYi181HfWDsAE9wqSkdG0LQU/s640/lacodeid.jpg" /></a></li>
                        </ul>
                        
                    </div>
                    <div class="details col-md-6">
                        <h3 class="product-title">men's shoes fashion</h3>
                        <div class="rating">
                            <div class="stars">
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                            </div>
                            <span class="review-no">41 reviews</span>
                        </div>
                        <p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
                        <h4 class="price">current price: <span>$180</span></h4>
                        <p class="vote"><strong>91%</strong> of buyers enjoyed this product! <strong>(87 votes)</strong></p>
                        <h5 class="sizes">sizes:
                            <span class="size" data-toggle="tooltip" title="small">s</span>
                            <span class="size" data-toggle="tooltip" title="medium">m</span>
                            <span class="size" data-toggle="tooltip" title="large">l</span>
                            <span class="size" data-toggle="tooltip" title="xtra large">xl</span>
                        </h5>
                        <h5 class="colors">colors:
                            <span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span>
                            <span class="color green"></span>
                            <span class="color blue"></span>
                        </h5>
                        <div class="action">
                            <button class="add-to-cart btn btn-default" type="button">add to cart</button>
                            <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

Untuk Tampilan yang lebih baik silakan anda kembangkan sesuai dengan keinginan agan, diatas cara membuat Template ECommerce Product Detail CSS bila ada pertanyaan silakan komen dibawah

Baca Juga : Ecommerce Popup Produk HTML 5

Membuat Editor CSS dengan Textarea

2018-02-19T23:26:00.000+07:00

Ditutorial kali ini WriteCode akan membuat tutorial cara Membuat Editor CSS dengan Textarea, membuat editor ini tidak sulit untuk dilakukan, disini kami akan membagikan cara membuatnya bisa anda ikuti step step dibawah ini :

Sebelum masuk kekodingan siapkan dua buah file seperti dibawah ini :

1.editorcss.php
2.style.css untuk style css dibiarkan kosong jangan dulu diisi

Step 1

Silakan anda copas koding dibawah ini kedalam file editorcss.php untuk kodingnya dibawah ini :

<?php
session_start();
if (isset($_POST['cssedit'])) {
 $p=$_POST['editor'];
 $a = fopen("style.css", 'w');
 fwrite($a, $p);
 fclose($a);
 chmod("style.css", 0644);
}
echo '<link rel="stylesheet" href="style.css">';
$myfile = fopen("style.css", "r") or die("Unable to open file!");
echo '<br><h1>EDITOR CSS</h1>';
echo '<form method="post">';
echo '<center><textarea name="editor">';while(!feof($myfile)) {echo fgets($myfile);}
echo '</textarea></center>
<center><input type="submit" name="cssedit" value="SAVE CSS"></center>
</form>';
fclose($myfile);

Sejauh ini script php diatas sudah berjalan normal, untuk mencobanya proses cara update css silakan dijalankan dilocalhost kesayangan agan untu ujicoba silakan copas CSS dibawah ini , masukan kedalam textarea lalu klik tombol save css bila anda berhasil maka akan tampak seperti gambar diatas

body {margin-left:0; margin-right:0; margin-top:0;text-align:left}
p, li {font:13px Verdana; color:black;text-align:left;margin-top:0.2em;margin-bottom:0}
h1 {font:bold 28px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
h3 {font:bold 15px Verdana;}
.a {font:bold 13px Verdana; margin:0 25px 0 0;}
.b {font:bold 13px Verdana; margin:10px 25px 0 0;}
.c {width:100%; margin:0; padding:0;}
.d {position:absolute; left:0px; top:100px; width:200px; margin:0; padding:10px; background-color:#cccccc; border:2px solid #000; font:bold 11px Verdana;}
.e {position:absolute; left:25%; top:100px; width:74.9%; height:20px; margin:0; padding:0 0 0 20px; background-color:#cccccc; border:2px solid #000; font:bold 11px Verdana;}
.f {position:absolute; left:5px; top:5px; width:233px; height:91px; margin:0; color:darkorange; font:bold 11px Courier; padding:0; z-index:10; background-image:url('logo1.jpg'); background-repeat:no-repeat; line-height:0.88em; text-align:right;}
.g {color:blue; border:1px solid blue;padding:5px}
.ad {position:absolute;width:145px;top:150px;left:857px;text-align:left}
.main {position:absolute;width:560px;top:150px;left:270px;padding:10px;text-align:left}
textarea {
    width: 50%;
    height: 350px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}
input[type=text], select, textarea{
    display: block;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}
input[type=submit] {
    background-color: #fb036d;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

input[type=submit]:hover {
    background-color: #45a049;
}

Potongan script :

Baca Juga : Cara mencegah copy file css dengan php

session_start();
if (isset($_POST['cssedit'])) {
 $p=$_POST['editor'];
 $a = fopen("style.css", 'w');
 fwrite($a, $p);
 fclose($a);
 chmod("style.css", 0644);
}

fopen berfungsi membuka file style.css

fwrite berfubgsi untuk menulis kode css kedalam file style.css

fclose berfungsi untuk menutup perintah

chmod berfungsi untuk membaca path folder

Potongan script dibawah ini, untuk menampilkan css yang sudah tersimpan di file style.css

echo '<link rel="stylesheet" href="style.css">';
$myfile = fopen("style.css", "r") or die("Unable to open file!");
echo '<br><h1>EDITOR CSS</h1>';
echo '<form method="post">';
echo '<center><textarea name="editor">';while(!feof($myfile)) {echo fgets($myfile);}
echo '</textarea></center>
<center><input type="submit" name="cssedit" value="SAVE CSS"></center>
</form>';
fclose($myfile);

Diatas adalah cara Membuat Editor CSS dengan Textarea, silakan dipelajari dan dipahami bila ada masalah dengan koding bisa komentar dibawah, semoga koding ini bermanfaat untuk anda yang membutuhkanya...Salam WriteCode Sampai jumpa ditutorial selanjutnya

Cara mencegah copy file css dengan php

2018-02-17T23:57:00.000+07:00

Ditutorial kali ini WriteCode akan membahas Cara mencegah copy file css dengan php, bagi agan yang sering membuat design website yang sering berurusan dengan CSS pasti agak sedikit tidak suka file css nya dicopas dengan orang lain, cara ini mungkin bisa membantu anda supaya file css agan tidak mudah untuk dicopas dan dicuri begitu saja , pertama siapkan tiga buah file index.php, style.php dan .htaccess, untuk kode file index.php seperti dibawah ini :

<?php
session_start();
$_SESSION['NameSession'] = "Key";
?>
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Proteksi CSS Dengan PHP</title>
 <meta name="description" content="Preteksi CSS Dengan PHP"/>
 <meta name="keywords" content="Protection, CSS Guard, Script Guard, Protect File"/>

 <style type="text/css">@import url(http://localhost/demo/php/protek-css/style.css);</style>

</head>
<body>
 <div class="container">
  <header>
   <h1>Cara mencegah copy file css dengan php</h1>
  </header>

  <section>
   Ini adalah contoh demo cara memproteksi css dengan php, untuk membuktikan apakah ini benar-benar memproteksi css maka silahkan buka <strong>View Source / View Page Source</strong> dari browser kamu <br>
   Maka kita hanya akan mendapatkan lokasi file css, namun jika url itu kita buka, maka kita tidak akan mendapatkan kode cssnya, melainkan hanya tulisan "CSS Protected" <br>
   Hal ini dikarenakan file css sebenarnya adalah script php yang dimanipulasi namanya dengan bantuan .htaccess

  </section>

  <section>
   <strong>Kelemahan</strong> <br>
   Memproteksi memang sulit, masih ada kelemahan jika menggunakan firebug, karena memang sebenarnya file css itu sudah disimpan di komputer kita, namun hal ini cukup bisa diandalkan untuk menyulitkan orang yang main copy-paste melalui fitur view source
  </section>
 </div>
</body>
</html>

diatas script index.phpnya, selanjutnya untuk script kode style.php bisa anda copas dibawah ini :

<?php
session_start();
header("Content-type: text/css"); 
if($_SESSION['NameSession'] != "Key" ){ die("CSS PROTECTED"); }
$_SESSION['NameSession'] = "AnotherKey";
?>
*{
 margin:0; padding:0;
}
body{
 background: #EB984F;
 color: #34495E;
 line-height:1.5em;
}
a{
 color: #505F6E;
}
.container{
 width: 800px;
 margin:30px auto;
 background: #F4D03F;
}

header{
 padding: 30px;
 margin:10px;
}

section{
 padding: 30px;
 margin:10px;
}

Copas lagi script .htaccess dibawah ini :

RewriteEngine on
RewriteRule style.css style.php

Script .htaccess ini berfungsi untuk menganti extensi style.css menjadi style.php dengan menggunakan bantuan session, untuk menggunakan file style.css cukup mudah sererti dibawah ini :

<style type="text/css">@import url(http://localhost/latihansaya/style.css);</style>

Sampai sejauh ini koding ini berjalan dengan normal bila anda kendala silakan komen, cara ini tidak sepenuhnya aman dari tukang copas CSS yang tanpa usaha setidaknya sudah memberi sedikit ruang keamanan pada file CSS anda, sekian tutorial Cara mencegah copy file css dengan php silakan dipelajari dan dikembangkan untuk kesempurnaan koding ini.

sumber : http://www.tutorial-webdesign.com/proteksi-css-dengan-php/

Cara update style css dengan php

2018-02-17T22:38:00.000+07:00

Ditutorial kali ini WriteCode akan membahas Cara update style css dengan php, bagi agan yang sering menggunakan wordpress pasti sering mengedit style css dengan texteditor tanpa anda harus kembali ke file style.css baik menambahi atau menggurangi isi file itu sndiri, hal ini akan membuat pekerjaan dalam mengedit file css sedikit lebih mudah, untuk membuat ini pertama silakan agan buat buah file style.css, edit_css.php dalam folder latihan agan, untuk kodingannya seperti dibawah ini :

Letakan kodingan dibawah ini kedalam file edit_css.php file ini nantinya yang akan membaca dan menulis css kedalam style.css

Baca Juga : Validasi cek form inputan text empty dengan jquery

<?php
$p="
body{margin-left:0; margin-right:0; margin-top:0;text-align:left}\n
p, li {font:13px Verdana; color:black;text-align:left;margin-top:0.2em;margin-bottom:0}\n
h1 {font:bold 28px Verdana; color:black;text-align:center}\n
h2 {font:bold 24px Verdana;text-align:center}\n
h3 {font:bold 15px Verdana;}\n
.a {font:bold 13px Verdana; margin:0 25px 0 0;}\n
.b {font:bold 13px Verdana; margin:10px 25px 0 0;}\n
.c {width:100%; margin:0; padding:0;}\n
.d {position:absolute; left:0px; top:100px; width:200px; margin:0; padding:10px; background-color:#cccccc; border:2px solid #000; font:bold 11px Verdana;}\n
.e {position:absolute; left:25%; top:100px; width:74.9%; height:20px; margin:0; padding:0 0 0 20px; background-color:#cccccc; border:2px solid #000; font:bold 11px Verdana;}\n
.f {position:absolute; left:5px; top:5px; width:233px; height:91px; margin:0; color:darkorange; font:bold 11px Courier; padding:0; z-index:10; background-image:url('logo1.jpg'); background-repeat:no-repeat; line-height:0.88em; text-align:right;}\n
.g {color:blue; border:1px solid blue;padding:5px}\n
.ad {position:absolute;width:145px;top:150px;left:857px;text-align:left}\n
.main {position:absolute;width:560px;top:150px;left:270px;padding:10px;text-align:left}\n
textarea {width: 100%;height: 500px;}\n
";
$a = fopen("style.css", 'w');
fwrite($a, $p);
fclose($a);
chmod("style.css", 0644);
echo '<link href="style.css" rel="stylesheet">';
echo "<textarea>".$p."</textarea>";

fopen berfungsi untuk membuka file style.css.

fwrite berfungsi untuk menulis file css kedalam style.css.

chmod membaca letak file style.css dalam folder.

Baca Juga : Cara mudah membuat CRUD dengan PDO php

Diatas cara Cara update style css dengan php silakan dikembangkan dan dipelajari, semoga tutorial singkat ini bisa membantu anda yang lagi mencari cara untuk mengedit file style.css dengan php.

Baca Juga : Cara membuat class crud php mysql

HTML CSS Produk Mobile Responsive

2018-02-15T21:16:00.000+07:00

Ditutorial kali ini WriteCode akan membuat tutorial dengan judul HTML CSS Produk Mobile Responsive, ditulisan yang sederhana ini kami berbagi kepada anda yang membutuhkan ilmu dari kami WriteCode yang sederhana ini, tanpa menunda waktu yang panjang bisa langsung anda praktikkan dilembar kerja agan langsung saja kita menuju TKP

Step 1
Silakan copas kode style CSSnya dibawah ini letakan didalam tag <head> letakan dimana agan suka:

<style class="cp-pen-styles">.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slider__slides {
  position: relative;
  width: 300%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  transition: transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1), -webkit-transform 0.6s cubic-bezier(0.51, 0.92, 0.24, 1);
  will-change: transform;
}

.slider__slide {
  float: left;
  width: 33.33333%;
  height: 100%;
}
.slider__dots {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 1.5em;
  left: 50%;
  top: 70px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.slider__dot, .slider__indicator {
  display: block;
  margin: 0 0.5em;
  width: 0.5em;
  height: 0.5em;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 100px;
}
.slider__indicator {
  position: absolute;
  background: white;
  /*width: auto;*/
}
.slider__indicator--left {
  -webkit-transition: left 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);
  transition: left 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
.slider__indicator--right {
  -webkit-transition: left 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15);
  transition: left 0.6s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.6s cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

.content[data-pos="0"] .slider__slides {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.content[data-pos="1"] .slider__slides {
  -webkit-transform: translateX(-33.33333%);
          transform: translateX(-33.33333%);
}
.content[data-pos="2"] .slider__slides {
  -webkit-transform: translateX(-66.66667%);
          transform: translateX(-66.66667%);
}

.content[data-pos="0"] .slider__indicator {
  left: 0em;
  right: 4em;
}
.content[data-pos="1"] .slider__indicator {
  left: 1.5em;
  right: 2em;
}
.content[data-pos="2"] .slider__indicator {
  left: 3em;
  right: 0em;
}

.content[data-pos="0"] .slider__slide:nth-child(1) .picture span {
  left: -160px;
}
.content[data-pos="1"] .slider__slide:nth-child(2) .picture span {
  left: -140px;
}
.content[data-pos="2"] .slider__slide:nth-child(3) .picture span {
  left: -85px;
}

.content[data-pos="0"] .slider__slide:nth-child(1) .buttons {
  display: block;
}
.content[data-pos="1"] .slider__slide:nth-child(2) .buttons {
  display: block;
}
.content[data-pos="2"] .slider__slide:nth-child(3) .buttons {
  display: block;
}

.content[data-pos="0"] .slider__slide:nth-child(1) .dropdown {
  display: block;
}
.content[data-pos="1"] .slider__slide:nth-child(2) .dropdown {
  display: block;
}
.content[data-pos="2"] .slider__slide:nth-child(3) .dropdown {
  display: block;
}

.content[data-pos="0"] > div {
  background-color: rgba(255, 87, 34,.65);
}
.content[data-pos="1"] > div {
  background-color: rgba(13,148,20,.4);
}
.content[data-pos="2"] > div {
  background-color: rgba(209,27,27,.65);
}

body {
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
  background-color: #f3f3f3;
}

.wrapper {
  background-color: #f8f8f8;
  display: flex;
  max-height: 736px;
  height: 736px;
  width: 414px;
  margin: 10px auto;
  /*border: solid 2px #aaa;*/
  box-shadow: 0px 2px 15px #ddd;
  border-radius: 3px;
}

.sidebar {
  max-height: 736px;
  height: 736px;
  width: 250px;
  position: absolute;
  padding: 0 10px;
}

.sidebar .brand {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 3.5em;
  /*http://www.cssmatic.com/es/gradient-generator*/
  background: linear-gradient(to right, 
    rgba(209,27,27,1) 0%, 
    rgba(209,27,27,1) 1%, 
    rgba(248,80,50,1) 20%, 
    rgba(13,148,20,1) 50%, 
    rgba(230,202,60,1) 77%, 
    rgba(230,143,12,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  position: absolute;
  top: 10px;
  left: 30px;
}

.sidebar .menu { 
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

.sidebar .menu ul {
  padding-left: 0;
}

.sidebar .menu .glyph-icon {
  font-weight: 700;
  margin-right: 20px;
  vertical-align: middle;
}

.sidebar .menu .flaticon-mail {
  font-weight: 400;
}

.sidebar ul li {
  color: #777;
  line-height: 3;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
}

.content {
  flex: 1;
  transform: translateX(0) scale(1);
  animation: shrink-off .4s ease-out;
  background: linear-gradient(to right, #666 0%, #FFEB3B 100%);
}

.content.shrink {
  box-shadow: -2px 2px 20px #ddd;
  transform: translateX(250px) scale(.95);
  animation: shrink-on .4s ease-out;
}

.content > div { 
  position: relative;
  transition: background-color 0.8s ease; 
}

.content #openMenu { 
  cursor: pointer; 
  position: absolute;
  top: 10px;
  left: 10px;
}

.content #openMenu > div { 
  width: 20px; 
  border: solid #fff 1px;
  margin-bottom: 5px; 
}

.content #openMenu > div:nth-child(2) { width: 15px; }

.content #shoppingIcon {
  color: #fff;
  position: absolute;
  top: 10px;
  right: -10px;
  transform: rotateY(180deg);
}

.content .flaticon-cart:before { font-size: 24px }

.content #shoppingIcon span {
  color: #fff;
  background-color: red;
  padding: 1px 6px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  left: 35px;
  top: -4px;
  transform: rotateY(180deg);
}

.content .header {
  color: #fff;
  height: 100px;
  text-align: center;
  padding-top: 5px;
  letter-spacing: 1;
}

.content .header h3 {
  margin: 0;
  margin-bottom: 3px;
  font-weight: 100;
}

.content .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 414px 0 0;
  border-color: transparent #fff transparent transparent;
  margin-top: -1px;
}

.content .product {
  height: 448px;
  width: 100%;
  background-color: #fff;
}

.slider { position: absolute; top: 100px; height: 554px; }
.picture { position: relative; margin: 0 15px; }
.picture img { height: 362px; margin-left: 70px; position: relative; }
.title { position: relative; color: #777; margin: 0 15px; }
.title h3 { margin-bottom: 5px; font-family: 'Montserrat', sans-serif; letter-spacing: 1; }
.title span { color: green; font-weight: bold; margin-right: 5px; }
.description { color: #999; margin: 15px 15px; font-size: 14px; }
.picture span { 
  position: absolute;
    top: 160px;
    left: -20px;
    font-size: 10em;
    color: #ededed;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    letter-spacing: 4;
    text-transform: uppercase;
    transition: all .8s ease-in-out;
}
.buttons {
  display: none;
  position: absolute;
    top: 70px;
    right: 20px;
    animation: scale-up .8s ease;
}
.buttons > div {
  margin-bottom: 30px;
    border: solid 2px #ddd;
    padding: 10px 12px 10px 10px;
    border-radius: 50px;
    cursor: pointer;
}
.buttons > div:before { 
  font-size: 25px;
    font-weight: 600;
    color: #888;
    margin-left: 0;
    transition: color .6s ease-out;
}

.buttons > div:nth-child(1).selected { border-color: #F44336; }
.buttons > div:nth-child(1).selected:before { color: #F44336; }
.buttons > div:nth-child(2).selected { border-color: #2196F3; }
.buttons > div:nth-child(2).selected:before { color: #2196F3; }

.content .price {
  height: 80px;
  width: 100%;
  background-color: #fff;
  border-top: solid #ddd 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content .price > div {
  margin: 0 20px;
}

.content .price span {
  font-size: 30px;
  color: #00BC34;
}

.content .price a {
  font-size: 20px;
  background-color: #00BC34;
  color: #fff;
  text-decoration: none;
  padding: 8px 35px;
  border-radius: 50px;
}

.content .price a:hover { background-color: #00a52e; }

.no-animation {
  animation: none !important;
}

@keyframes shrink-on {
  0% {
    transform: translateX(0) scale(1);
  }
  70% {
    transform: translateX(250px) scale(.9);
  }
  100% {
    transform: translateX(250px) scale(.95);
  }
}

@keyframes shrink-off {
  0% {
    transform: translateX(250px) scale(.95);
  }
  70% {
    transform: translateX(-10px) scale(1.05);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes scale-up {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}


.slider .dropdown { 
  position: absolute; 
  top: 0; 
  right: 20px; 
  font-family: "Montserrat", sans-serif; 
  animation: scale-up .8s ease;
}
/** Dropdown **/
.dropdown {
  display: none;
  position: relative;
  width: 100px;
  color: #fff;
  transform-style: preserve-3d;
  perspective: 1500;
}
.dropdown.flip .front {
  transform: rotateX(180deg);
}
.dropdown.flip .back {
  transform: rotateX(0deg);
}
.dropdown .front,
.dropdown .back {
  transition: all 0.4s ease;
}
.dropdown .front {
  height: 40px;
  width: 90px;
  backface-visibility: hidden;
  cursor: pointer;
  border: solid 2px #ddd;
  border-radius: 50px;
  line-height: 40px;
  text-align: center;
  color: #888;
  margin-left: 5px;
}
.dropdown .front:after {
  content: "";
  position: relative;
  top: 15px;
  left: 4px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #888;
}
.dropdown .back {
  transform: rotateX(180deg);
  backface-visibility: hidden;
}
.dropdown ul {
  position: absolute;
  top: -120px;
  z-index: 1;
  width: calc(100% - 40px);
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
  list-style: none;
  border-radius: 3px;
}
.dropdown ul li {
  color: #888;
  line-height: 30px;
  cursor: pointer;
}

</style>

Step 2
Copas lagi kode HTML dibawah ini kedalam lembar kerja agan :

div class="wrapper">
      <div class="sidebar">
        <div class="brand">JUUCE</div>
        <div class="menu">
          <ul>
            <li><i class="glyph-icon flaticon-user"></i> Profile</li>
            <li><i class="glyph-icon flaticon-like"></i> Wish list</li>
            <li><i class="glyph-icon flaticon-like-1"></i> Why buy juuce?</li>
            <li><i class="glyph-icon flaticon-vision"></i> About us</li>
            <li><i class="glyph-icon flaticon-mail"></i> Contact us</li>
            <li><i class="glyph-icon flaticon-info"></i> FAQ</li>
          </ul>
        </div>
      </div>

      <div class="content no-animation" data-pos="0">
        <div>

          <div id="openMenu">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div id="shoppingIcon">
            <span>4</span>
            <i class="glyph-icon flaticon-cart"></i>
          </div>
          <div class="header">
            <h3>Cold pressed juices</h3>
            <small>shop category</small>
          </div>
          <div class="triangle"></div>
          
          <div class="product">
            <div class="slider__dots">
              <a href="#" class="slider__dot" data-pos="0"></a>
              <a href="#" class="slider__dot" data-pos="1"></a>
              <a href="#" class="slider__dot" data-pos="2"></a>
              <a href="#" class="slider__indicator"></a>
            </div>
          </div>
          
          <div class="price">
            <div><span>€ 3.00</span></div>
            <div><a href="#">Add to cart</a></div>  
          </div>

          <div class="slider" data-pos="0">
            <div class="slider__slides">

              <div class="slider__slide">
                <div class="picture">
                  <span>ster</span><img src="https://github.com/emoreno911/UI-to-Code/blob/master/juuce_app/img/bottle3x.png?raw=true">
                  <div class="buttons">
                    <div class="glyph-icon flaticon-like"></div>
                    <div class="glyph-icon flaticon-arrows"></div>
                    <div class="glyph-icon flaticon-share"></div>
                  </div>
                </div>
                <div class="title">
                  <h3>Booster</h3><small><span>✔</span> In Stock</small>
                  <div class="dropdown">
                    <div class="front"> 250 ml </div>
                    <div class="back"> 
                      <ul>
                        <li>250 ml</li>
                        <li>500 ml</li>
                        <li>1 lt</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
              </div>
              <div class="slider__slide">
                <div class="picture">
                  <span>Fuel</span> <img src="https://github.com/emoreno911/UI-to-Code/blob/master/juuce_app/img/bottle2x.png?raw=true">
                  <div class="buttons">
                    <div class="glyph-icon flaticon-like"></div>
                    <div class="glyph-icon flaticon-arrows"></div>
                    <div class="glyph-icon flaticon-share"></div>
                  </div>
                </div>
                <div class="title">
                  <h3>Rocket Fuel</h3><small><span>✔</span> In Stock</small>
                  <div class="dropdown">
                    <div class="front"> 250 ml </div>
                    <div class="back"> 
                      <ul>
                        <li>250 ml</li>
                        <li>500 ml</li>
                        <li>1 lt</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
              </div>
              <div class="slider__slide">
                <div class="picture">
                  <span>Red</span><img src="https://github.com/emoreno911/UI-to-Code/blob/master/juuce_app/img/bottle1x.png?raw=true">
                  <div class="buttons">
                    <div class="glyph-icon flaticon-like"></div>
                    <div class="glyph-icon flaticon-arrows"></div>
                    <div class="glyph-icon flaticon-share"></div>
                  </div>
                </div>
                <div class="title">
                  <h3>Big Red</h3><small><span>✔</span> In Stock</small>
                  <div class="dropdown">
                    <div class="front"> 250 ml </div>
                    <div class="back"> 
                      <ul>
                        <li>250 ml</li>
                        <li>500 ml</li>
                        <li>1 lt</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div>
              </div>

            </div>
          </div>

        </div>
      </div>
      
    </div>

Step 3
Copas Javascript dibawah ini letakan didalam tag <body> untuk kodenya dibawah ini :

<script >/** https://github.com/emoreno911/UI-to-Code/tree/master/juuce_app **/
'use strict';

var dots = 3;
var contentElem = document.querySelector('.content');
var dotElems = document.querySelectorAll('.slider__dot');
var indicatorElem = document.querySelector('.slider__indicator');
Array.prototype.forEach.call(dotElems, function (dotElem) {
    dotElem.addEventListener('click', function (e) {
        var currentPos = parseInt(contentElem.getAttribute('data-pos'));
        var newPos = parseInt(dotElem.getAttribute('data-pos'));
        var newDirection = newPos > currentPos ? 'right' : 'left';
        var currentDirection = newPos < currentPos ? 'right' : 'left';
        indicatorElem.classList.remove('slider__indicator--' + currentDirection);
        indicatorElem.classList.add('slider__indicator--' + newDirection);
        contentElem.setAttribute('data-pos', newPos);
    });
});

// Hammer.js for touch gestures
var hammertime = new Hammer(contentElem);

// listen to touch events...
hammertime.on("swipeleft swiperight", function(evt) {
    var currentPos = parseInt(contentElem.getAttribute('data-pos')),
        newPos;
    
    if(evt.type == 'swipeleft')
        newPos = (currentPos + 1 > 2)? currentPos : currentPos + 1; 
    else if (evt.type == 'swiperight')
        newPos = (currentPos - 1 < 0)? currentPos : currentPos - 1;

    if(newPos != currentPos) {
        var newDirection = newPos > currentPos ? 'right' : 'left';
        var currentDirection = newPos < currentPos ? 'right' : 'left';
        indicatorElem.classList.remove('slider__indicator--' + currentDirection);
        indicatorElem.classList.add('slider__indicator--' + newDirection);
        contentElem.setAttribute('data-pos', newPos);
    }
});

/** Events **/
$('#openMenu').on('click', function(evt) {
  $('.content')
    .removeClass('no-animation') //disable initial animation
    .toggleClass('shrink');
});

$('.buttons > div').on('click', function(evt) {
  $(this).toggleClass('selected');
});


$(".dropdown").on("click", function(){
  $(this).toggleClass("flip");
})

$(".back ul li").on("click", function(){
    var val = $(this).text();
  $(this).closest('.dropdown').find('.front').text(val);
});
//# sourceURL=pen.js
</script>

Diatas step step cara membuat HTML CSS Produk Mobile Responsive, silakan dikerjakan dan dipahami kalo sudah bisa jangan banga dulu karena perjalanan kita masih panjang untuk mencapai hasil yang maksimal, salam WriteCode.

Carousal Product Responsive Ponsel dan Desktop

2018-02-15T20:58:00.000+07:00

Carousal Product Responsive Ponsel dan Desktop, diwaktu yang sama dan kesempatan yang sama tidak bosanya kami berbagi sedikit ilmu kepada agan dan pengunjung setiap blog kami ini, tutorial kali ini pembahasan hampir sama seputar website dan design kembali, tanpa mengurangi waktu langsung saja menuju TKP

Step 1

Silakan anda copas link bootstrapnya dibawah ini :

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="http://yourjavascript.com/21051171187/jquery-touchswipe-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/11873115711/jquery-1-12-4-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/71712155041/responsive-bootstrap-carousel.js"></script>

Step 2

Silakan copas lagi kode CSS dibawah ini kedalam lembar kerja agan

Baca Juga : Ecommerce Popup Produk HTML 5

.team_columns_carousel_wrapper {
    padding: 25px;
    overflow: hidden
}
.team_columns_carousel_control_left,
.team_columns_carousel_control_right {
    top: 26px;
    z-index: 2;
    opacity: 1;
    width: 35px;
    height: 35px;
    border: 0;
    text-shadow: none;
    text-align: center;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s
}
.team_columns_carousel_control_icons {
    line-height: 35px;
    font-size: 20px!important;
    font-weight: normal!important;
    margin-top:8px;
}
.team_columns_carousel_control_left {
    left: 26px!important
}
.team_columns_carousel_control_right {
    left: 63px!important
}
.adv_left {
    left: 41px!important
}
.adv_right {
    left: 78px!important
}
.team_columns_item_image {
    padding-top: 60px;
    padding-bottom: 25px
}
.team_columns_item_image img {
    width: 100%;
    -webkit-filter: grayscale(70%);
    -moz-filter: grayscale(70%);
    -ms-filter: grayscale(70%);
    -o-filter: grayscale(70%);
    filter: grayscale(70%);
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    -ms-transition: all ease-in-out .3s;
    -o-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s
}
.team_columns_item_image:hover img {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%)
}
.team_columns_item_caption {
    padding: 10px;
    text-align: center;
    padding-bottom: 30px
}
.team_columns_item_caption>hr {
    width: 15%
}
.team_columns_item_caption h4 {
    font-weight: 800;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif
}
.team_columns_item_caption h5 {
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif
}
.team_columns_item_caption p {
    font-weight: 400;
    margin-top: 20px;
    font-family: 'Open Sans', sans-serif
}
.team_columns_item_caption p a,
.team_columns_item_caption p a:visited {
    text-decoration: none;
    -webkit-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s
}
.team_columns_item_social a,
.team_columns_item_social a:visited {
    width: 25px;
    float: left;
    height: 25px;
    display: block;
    line-height: 25px;
    margin-right: 2px;
    text-decoration: none;
    -webkit-transition: background ease-in-out .3s;
    transition: background ease-in-out .3s
}
@media(min-width:768px) and (max-width:789px) {
    .adv_team_columns_item_social a, .adv_team_columns_item_social a:visited {
        margin-right: 0
    }
}
.team_columns_carousel_wrapper {
    background: #fff
}
.team_columns_carousel_control_left,
.team_columns_carousel_control_left:hover,
.team_columns_carousel_control_left:active,
.team_columns_carousel_control_left:focus,
.team_columns_carousel_control_right,
.team_columns_carousel_control_right:hover,
.team_columns_carousel_control_right:active,
.team_columns_carousel_control_right:focus {
    color: #fff;
    background: #feb600!important
}
.team_columns_item_caption {
    color: #fff;
    background: #171717
}
.team_columns_item_caption>hr {
    border-top: 2px solid #feb600
}
.team_columns_item_caption p a,
.team_columns_item_caption p a:visited {
    color: #feb600
}
.team_columns_item_caption p a:hover,
.team_columns_item_caption p a:active {
    color: #cb9200
}
.team_columns_item_social a,
.team_columns_item_social a:visited {
    color: #171717;
    background: #feb600
}
.team_columns_item_social a:hover,
.team_columns_item_social a:active {
    background: #cb9200
}
.four_shows_one_move .cloneditem-1,
.four_shows_one_move .cloneditem-2,
.four_shows_one_move .cloneditem-3 {
    display: none
}
@media all and (min-width: 768px) {
    .four_shows_one_move .carousel-inner>.active.left,
    .four_shows_one_move .carousel-inner>.prev {
        left: -50%
    }
    .four_shows_one_move .carousel-inner>.active.right,
    .four_shows_one_move .carousel-inner>.next {
        left: 50%
    }
    .four_shows_one_move .carousel-inner>.left,
    .four_shows_one_move .carousel-inner>.prev.right,
    .four_shows_one_move .carousel-inner>.active {
        left: 0
    }
    .four_shows_one_move .carousel-inner .cloneditem-1 {
        display: block
    }
}
@media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {
    .four_shows_one_move .carousel-inner>.item.active.right,
    .four_shows_one_move .carousel-inner>.item.next {
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
        left: 0
    }
    .four_shows_one_move .carousel-inner>.item.active.left,
    .four_shows_one_move .carousel-inner>.item.prev {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        left: 0
    }
    .four_shows_one_move .carousel-inner>.item.left,
    .four_shows_one_move .carousel-inner>.item.prev.right,
    .four_shows_one_move .carousel-inner>.item.active {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        left: 0
    }
}
@media all and (min-width: 992px) {
    .four_shows_one_move .carousel-inner>.active.left,
    .four_shows_one_move .carousel-inner>.prev {
        left: -25%
    }
    .four_shows_one_move .carousel-inner>.active.right,
    .four_shows_one_move .carousel-inner>.next {
        left: 25%
    }
    .four_shows_one_move .carousel-inner>.left,
    .four_shows_one_move .carousel-inner>.prev.right,
    .four_shows_one_move .carousel-inner>.active {
        left: 0
    }
    .four_shows_one_move .carousel-inner .cloneditem-2,
    .four_shows_one_move .carousel-inner .cloneditem-3 {
        display: block
    }
}
@media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
    .four_shows_one_move .carousel-inner>.item.active.right,
    .four_shows_one_move .carousel-inner>.item.next {
        -webkit-transform: translate3d(25%, 0, 0);
        transform: translate3d(25%, 0, 0);
        left: 0
    }
    .four_shows_one_move .carousel-inner>.item.active.left,
    .four_shows_one_move .carousel-inner>.item.prev {
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
        left: 0
    }
    .four_shows_one_move .carousel-inner>.item.left,
    .four_shows_one_move .carousel-inner>.item.prev.right,
    .four_shows_one_move .carousel-inner>.item.active {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        left: 0
    }
}

Step 3

Silakan anda copas lagi kode HTML dibawah ini :

<div class="container">
   <div class="row">
      <div id="adv_team_4_columns_carousel" class="carousel slide four_shows_one_move team_columns_carousel_wrapper" data-ride="carousel" data-interval="2000" data-pause="hover">
         <!--========= Wrapper for slides =========-->
         <div class="carousel-inner" role="listbox">
            <!--========= 1st slide =========-->
            <div class="item">
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image">
                  <img src="http://placehold.it/150x150" alt="slider 01">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
            </div>
            <!--========= 2nd slide =========-->
            <div class="item active">
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
            </div>
            <!--========= 3rd slide =========-->
            <div class="item">
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
            </div>
            <!--========= 4th slide =========-->
            <div class="item">
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
            </div>
            <!--========= 5th Slide =========-->
            <div class="item">
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
            </div>
            <!--========= 6th Slide =========-->
            <div class="item">
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3">
                  <img src="http://placehold.it/150x150" alt="slider 01">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
            </div>
            <!--========= 7th Slide =========-->
            <div class="item">
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2">
                  <img src="http://placehold.it/150x150" alt="slider 01">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
            </div>
            <!--========= 8th Slide =========-->
            <div class="item">
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1">
                  <img src="http://placehold.it/150x150" alt="slider 01">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Lahore</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
               <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3">
                  <img src="http://placehold.it/150x150" alt="slider 02">
                  <div class="team_columns_item_caption">
                     <h4>Karachi</h4>
                     <hr>
                     <h5>PAKISTAN</h5>
                  </div>
               </div>
            </div>
         </div>
         <!--======= Navigation Buttons =========-->
         <!--======= Left Button =========-->
         <a class="left carousel-control team_columns_carousel_control_left adv_left" href="#adv_team_4_columns_carousel" role="button" data-slide="prev">
         <span class="fa fa-angle-left team_columns_carousel_control_icons" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
         </a>
         <!--======= Right Button =========-->
         <a class="right carousel-control team_columns_carousel_control_right adv_right" href="#adv_team_4_columns_carousel" role="button" data-slide="next">
         <span class="fa fa-angle-right team_columns_carousel_control_icons" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
         </a>
      </div>
   </div>
</div>

Cuma tiga langkah mudah untuk membuat Carousal Product Responsive Ponsel dan Desktop silakan dipelajari dan kembangkan sesuai dengan ide kreatif sodara-sodara senasip dan seperjuangan...Happy WriteCode.

Baca Juga : Paralax efect slideshow responsive css3

Ecommerce Popup Produk HTML 5

2018-02-15T20:45:00.000+07:00

Dikesempatan yang sama kami masih membahas seputar CSS dan pembuatan Website yang menarik dan elegan, ditutorial singkat ini juga kami ingin berbagi cara membuat Ecommerce Popup Produk HTML 5 dengan menggunakan bootstrap, untuk agan yang baru menggenal bootstrap silakan kunjungi link resminya framework bootstrap, langsung kepokok pembahasan tanpa lama-lama menunggu 3 langkah mudah membuat tampilan website menarik.

Step 1
Silakan agan copas script css dibawah ini :

 .product_view .modal-dialog{max-width: 800px; width: 100%;}
 .pre-cost{text-decoration: line-through; color: #a5a5a5;}
 .space-ten{padding: 10px 0;}

Step 2

Silakan copas juga kode HTMLnya dibawah ini :

<div class="container">
    <div class="row">
        <div class="col-md-4">
              <div class="thumbnail">
                <img src="http://tech.firstpost.com/wp-content/uploads/2014/09/Apple_iPhone6_Reuters.jpg" alt="" class="img-responsive">
                <div class="caption">
                  <h4 class="pull-right">$700.99</h4>
                  <h4><a href="#">Mobile Product</a></h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
                <div class="ratings">
                  <p>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                     (15 reviews)
                  </p>
                </div>
                <div class="space-ten"></div>
                <div class="btn-ground text-center">
                    <button type="button" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add To Cart</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button>
                </div>
                <div class="space-ten"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="thumbnail">
                <img src="http://tech.firstpost.com/wp-content/uploads/2014/09/Apple_iPhone6_Reuters.jpg" alt="" class="img-responsive">
                <div class="caption">
                  <h4 class="pull-right">$700.99</h4>
                  <h4><a href="#">Mobile Product</a></h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
                <div class="ratings">
                  <p>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                     (15 reviews)
                  </p>
                </div>
                <div class="space-ten"></div>
                <div class="btn-ground text-center">
                    <button type="button" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add To Cart</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button>
                </div>
                <div class="space-ten"></div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="thumbnail">
                <img src="http://tech.firstpost.com/wp-content/uploads/2014/09/Apple_iPhone6_Reuters.jpg" alt="" class="img-responsive">
                <div class="caption">
                  <h4 class="pull-right">$700.99</h4>
                  <h4><a href=  "#">Mobile Product</a></h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
                <div class="ratings">
                  <p>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                     (15 reviews)
                  </p>
                </div>
                <div class="space-ten"></div>
                <div class="btn-ground text-center">
                    <button type="button" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add To Cart</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button>
                </div>
                <div class="space-ten"></div>
              </div>
            </div>
    </div>
</div>

Lanjut copas juga code HTML popupnya dibawah ini :

<div class="modal fade product_view" id="product_view">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon glyphicon-remove"></span></a>
                <h3 class="modal-title">HTML5 is a markup language</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 product_img">
                        <img src="http://img.bbystatic.com/BestBuy_US/images/products/5613/5613060_sd.jpg" class="img-responsive">
                    </div>
                    <div class="col-md-6 product_content">
                        <h4>Product Id: <span>51526</span></h4>
                        <div class="rating">
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            <span class="glyphicon glyphicon-star"></span>
                            (10 reviews)
                        </div>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                        <h3 class="cost"><span class="glyphicon glyphicon-usd"></span> 75.00 <small class="pre-cost"><span class="glyphicon glyphicon-usd"></span> 60.00</small></h3>
                        <div class="row">
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <select class="form-control" name="select">
                                    <option value="" selected="">Color</option>
                                    <option value="black">Black</option>
                                    <option value="white">White</option>
                                    <option value="gold">Gold</option>
                                    <option value="rose gold">Rose Gold</option>
                                </select>
                            </div>
                            <!-- end col -->
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <select class="form-control" name="select">
                                    <option value="">Capacity</option>
                                    <option value="">16GB</option>
                                    <option value="">32GB</option>
                                    <option value="">64GB</option>
                                    <option value="">128GB</option>
                                </select>
                            </div>
                            <!-- end col -->
                            <div class="col-md-4 col-sm-12">
                                <select class="form-control" name="select">
                                    <option value="" selected="">QTY</option>
                                    <option value="">1</option>
                                    <option value="">2</option>
                                    <option value="">3</option>
                                </select>
                            </div>
                            <!-- end col -->
                        </div>
                        <div class="space-ten"></div>
                        <div class="btn-ground">
                            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart</button>
                            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span> Add To Wishlist</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Karena diawal sudah saya sampaikan ini menggunakan framework bootstrap 3.7, jadi untuk tampilan yang baik silakan download dulu bootstrapnya distus resminya, diatas adalah cara membuat Ecommerce Popup Produk HTML 5 semoga dapat membantu kesulitan anda untuk membuat tampilan website yang murah dan tidak murahan silakan dipelajari dan dikembangkan.

Convert HTML ke AMP

2018-02-15T01:18:00.000+07:00

Ditutorial kali WriteCode akan menulis cara Convert HTML ke AMP (Accelerated Mobile Pages Project), Sebelum masuk ke pembahasan saya akan mejelaskan sedikit tentang AMP Project adalah inisiatif sumber terbuka yang bertujuan untuk membuat web lebih baik bagi semua kalangan. Proyek ini memungkinkan pembuatan situs dan iklan dengan performa tinggi, cepat, dan konsisten di berbagai perangkat dan platform distribusi. Untuk di Blog AMP ini lebih sulit untuk terapkan karena anda harus membuat kodingan kedalam blog anda, tapi untuk yang menggunakan wordpress lebih mudah untuk dipasang karena ada plugin yang digunakan untuk membuat halaman AMP ini. Kembali ke pembahasan awal disini saya akan berbagi cara Convert HTML ke AMP, syarat untuk membuat halaman AMP seperti dibawah ini :

1.Pengetahuan dasar tentang HTML, CSS, dan JavaScript
2.Browser pilihan Anda yang bisa memeriksa konsol JavaScript
3.Editor teks pilihan Anda

Membangun halaman HTML biasa

Untuk Kode HTML nya bisa anda copas dibawah ini :

<!doctype html>
<html lang="en">
  <head>
    <title>News Article</title>
    <link href="base.css" rel="stylesheet" />
    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

Diatas adalah kode HTML yang belum dalam bentuk AMP, apa saja yang harus dilakukan untuk menjadikan kode HTML diatas menjadi halam AMP bisa anda lihat perubahanya di kode HTML dibawah ini :

Pertama anda harus menambahkan baris ini ke bagian bawah tag <head> :

<script async src="https://cdn.ampproject.org/v0.js"></script>

Biasanya halaman yang sudah dalam bentuk AMP memiliki tanda Petir seperti dibawah ini :

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Perhatikan dengan teliti perbedaannya kedua kode HTML diatas. Untuk uji coba halaman yang sudah dipasang AMP anda dapat menambahkan #develoment=1 atau seperti dibawah ini :

http://localhost:8000/article.amp.html#development=1

Diatas adalah tutorial singkat cara Convert HTML ke AMP, silakan dipelajari dan dikembangkan.

CSS Grid Hover Responsive

2018-02-14T13:31:00.000+07:00

Ditutorial kali ini masih membahas seputar masalah css dan grid dengan judul CSS Grid Hover Responsive, langsung saja tanpa basa basi kita menuju kodingannya, dibawah ini koding CSS nya silakan anda copas kedalam lembar kerja anda

Step 1

<style class="cp-pen-styles">body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

h1, h2, h3, h4, h5, h6, p{
  color: #fff;
  font-weight: 200;
}

a{
  text-decoration: none;
}

/* GRID */

.grid { max-width: 940px; width: 100%; margin: 0 auto; }

.four { 
 width: 32.26%; 
}

/* COLUMNS */

.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}

.col:first-of-type { margin-left: 0; }

/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table; 
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

/* GENERAL STYLES FOR BOX AND OVERLAY */

.box {
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #bbb;
  text-align: center;
  position: relative;
}

.overlay{
  width: 100%;
  height:100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* SLIDE IN */

.slide-in .overlay{
  background-color: #6addaa;
  line-height: 200px;
  color: #fff;
  transform: translateX(-100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}

.slide-in .box:hover .overlay{
  transform: translateX(0);
}

/* SLIDE UP */

.slide-up .overlay{
  background-color: #3dcbe8;
  line-height: 200px;
  color: #fff;
  transform: translateY(100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}

.slide-up .box:hover .overlay{
  transform: translateY(0);
}

/* SLIDE DOWN DELAY */

.slide-down-delay .overlay{
  background-color: #ee6f8c;
  line-height: 200px;
  color: #fff;
  transform: translateY(-100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}

.slide-down-delay .box:hover .overlay{
  transform: translateY(0);
}

.slide-down-delay .overlay i{
  transform: translateY(-80%);
  opacity: 0;
  -webkit-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
  -o-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
  transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
}

.slide-down-delay .box:hover .overlay i{
  transform: translateY(0);
  opacity: 1;
}

/* ROTATE */

.rotate .overlay{
  background-color: #6d94bb;
  line-height: 200px;
  color: #fff;
  transform-origin: 0 0;
  transform: rotate(90deg);
  -webkit-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}

.rotate .box:hover .overlay{
  transform: rotate(0deg);
}

/* SCALE */

.scale .overlay{
  background-color: #efcb5e;
  line-height: 200px;
  color: #fff;
  transform: translateX(210%) scale(3);
  -webkit-transition: transform 0.6s ease-in-out;
  -o-transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
}

.scale .box:hover .overlay{
  transform: translateX(0) scale(1);
}

/* FLIP */

.flip .overlay{
  background-color: #009688;
  line-height: 200px;
  color: #fff;
  opacity: 0;
  transform: rotateY(180deg);
  -webkit-transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
  -o-transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
  transition: transform 0.6s ease-in-out 0.3s, opacity 0.3s ease-in-out;
}

.flip .box:hover .overlay{
  opacity: 1;
  transform: rotateY(0deg);
}

/* SKEW */

.skew .overlay{
  background-color: #f44336;
  line-height: 200px;
  color: #fff;
  opacity: 0;
  transform: skewX(-10deg);
  -webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.skew .box:hover .overlay{
  transform: skewX(0deg);
  opacity: 1;
}

/* CORNER */

.corner-bottom .overlay{
  background-color: #9c27b0;
  line-height: 200px;
  color: #fff;
  transform: translate(100%, 100%);
  -webkit-transition: transform 0.4s ease-in-out;
  -o-transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

.corner-bottom .box:hover .overlay{
   transform: translate(0, 0);
}

/* CORNER */

.corner-top .overlay{
  background-color: #ff5722;
  line-height: 200px;
  color: #fff;
  transform: translate(-100%, -100%);
  -webkit-transition: transform 0.4s ease-in-out;
  -o-transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

.corner-top .box:hover .overlay{
   transform: translate(0, 0);
}</style>

Step 2
Untuk kode HTML nya bisa anda copas dibawah ini :

<div class="grid">
  <div class="row cf">
   <div class="slide-in four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide in from left</p>
     </span>
     <div class="overlay">
      <i class="fa fa-commenting-o fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="slide-up four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide up</p>
     </span>
     <div class="overlay">
      <i class="fa fa-cogs fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="slide-down-delay four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide down with icon delay</p>
     </span>
     <div class="overlay">
      <i class="fa fa-users fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
  </div>
  <div class="row cf">
   <div class="rotate four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Rotate into view</p>
     </span>
     <div class="overlay">
      <i class="fa fa-star fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="scale four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide in from right and scale</p>
     </span>
     <div class="overlay">
      <i class="fa fa-trophy fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="flip four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Fade in then flip</p>
     </span>
     <div class="overlay">
      <i class="fa fa-thumbs-up fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
  </div>
  <div class="row cf">
   <div class="skew four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Fade in and skew</p>
     </span>
     <div class="overlay">
      <i class="fa fa-rocket fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="corner-bottom four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide in from bottom corner</p>
     </span>
     <div class="overlay">
      <i class="fa fa-coffee fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
   <div class="corner-top four col">
    <div class="box">
     <span class="original">
      <h1>Hover!</h1>
      <p>Slide in from top corner</p>
     </span>
     <div class="overlay">
      <i class="fa fa-calendar fa-3x" aria-hidden="true"></i>
     </div>
    </div>
   </div>
  </div>
 </div>

Untuk bootstrapnya silakan anda download di situs resminya bootstrap download free, semoga tutorial cara membuat CSS Grid Hover Responsive bisa membantu dan bermanfaat. Baca juga : Membuat halaman AMP HTML pertama

3 Langka Mudah Membuat Grid Pinterest Responsive

2018-02-13T22:59:00.002+07:00

WriteCode Tutorial Membuat Grid Pinterest Responsive pasti anda pernah membayangkan bagaimana cara membuat grid seperti media sosial Pinterest, disini kami akan memberikan cara membuatnya, langkah membuat grid seperti Pinterest cukup mudah bisa dengan menggikuti tutorial sederhana ini anda bisa membuatnya, langsung saja menuju ke TKP...

Step 1

Silakan anda copas CSSnya dibawah ini :

/*
Ref:
Thanks to:
http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html
*/

body {
 background-color:#eee;   
}    

#pinBoot {
  position: relative;
  max-width: 100%;
  width: 100%;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.white-panel {
  position: absolute;
  background: white;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  padding: 10px;
}
/*
stylize any heading tags withing white-panel below
*/

.white-panel h1 {
  font-size: 1em;
}
.white-panel h1 a {
  color: #A92733;
}
.white-panel:hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  margin-top: -5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

Step 2

Silakan Copas Untuk Javascriptnya dibawah ini :

$(document).ready(function() {
$('#pinBoot').pinterest_grid({
no_columns: 4,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
;(function ($, window, document, undefined) {
    var pluginName = 'pinterest_grid',
        defaults = {
            padding_x: 10,
            padding_y: 10,
            no_columns: 3,
            margin_bottom: 50,
            single_column_breakpoint: 700
        },
        columns,
        $article,
        article_width;

    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype.init = function () {
        var self = this,
            resize_finish;

        $(window).resize(function() {
            clearTimeout(resize_finish);
            resize_finish = setTimeout( function () {
                self.make_layout_change(self);
            }, 11);
        });

        self.make_layout_change(self);

        setTimeout(function() {
            $(window).resize();
        }, 500);
    };

    Plugin.prototype.calculate = function (single_column_mode) {
        var self = this,
            tallest = 0,
            row = 0,
            $container = $(this.element),
            container_width = $container.width();
            $article = $(this.element).children();

        if(single_column_mode === true) {
            article_width = $container.width() - self.options.padding_x;
        } else {
            article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns;
        }

        $article.each(function() {
            $(this).css('width', article_width);
        });

        columns = self.options.no_columns;

        $article.each(function(index) {
            var current_column,
                left_out = 0,
                top = 0,
                $this = $(this),
                prevAll = $this.prevAll(),
                tallest = 0;

            if(single_column_mode === false) {
                current_column = (index % columns);
            } else {
                current_column = 0;
            }

            for(var t = 0; t < columns; t++) {
                $this.removeClass('c'+t);
            }

            if(index % columns === 0) {
                row++;
            }

            $this.addClass('c' + current_column);
            $this.addClass('r' + row);

            prevAll.each(function(index) {
                if($(this).hasClass('c' + current_column)) {
                    top += $(this).outerHeight() + self.options.padding_y;
                }
            });

            if(single_column_mode === true) {
                left_out = 0;
            } else {
                left_out = (index % columns) * (article_width + self.options.padding_x);
            }

            $this.css({
                'left': left_out,
                'top' : top
            });
        });

        this.tallest($container);
        $(window).resize();
    };

    Plugin.prototype.tallest = function (_container) {
        var column_heights = [],
            largest = 0;

        for(var z = 0; z < columns; z++) {
            var temp_height = 0;
            _container.find('.c'+z).each(function() {
                temp_height += $(this).outerHeight();
            });
            column_heights[z] = temp_height;
        }

        largest = Math.max.apply(Math, column_heights);
        _container.css('height', largest + (this.options.padding_y + this.options.margin_bottom));
    };

    Plugin.prototype.make_layout_change = function (_self) {
        if($(window).width() < _self.options.single_column_breakpoint) {
            _self.calculate(true);
        } else {
            _self.calculate(false);
        }
    };

    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Plugin(this, options));
            }
        });
    }

})(jQuery, window, document);

Step 3

Untuk kode HTML dibawah copas kelembar kerja anda :

<div class="container">
  <div class="row">
    <h2>Pinterest Responsive Grid</h2>
    <section id="pinBoot">

      <article class="white-panel"><img src="http://i.imgur.com/sDLIAZD.png" alt="">
        <h4><a href="#">Title 1</a></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>

      <article class="white-panel"> <img src="http://i.imgur.com/8lhFhc1.gif" alt="">
        <h4><a href="#">Title 2</a></h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>

      <article class="white-panel"> <img src="http://i.imgur.com/xOIMvAe.jpg" alt="">
        <h4><a href="#">Title 3</a></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </article>


      <article class="white-panel"> <img src="http://i.imgur.com/3gXW3L3.jpg" alt="">
        <h4><a href="#">Title 4</a></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>

      <article class="white-panel"> <img src="http://i.imgur.com/o2RVMqm.jpg" alt="">
        <h4><a href="#">Title 5</a></h4>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>

      <article class="white-panel"> <img src="http://i.imgur.com/kFFpuKA.jpg" alt="">
        <h4><a href="#">Title 6</a></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </article>



      <article class="white-panel"><img src="http://i.imgur.com/E9RmLPA.jpg" alt="">
        <h4><a href="#">Title 7</a></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>

      <article class="white-panel"> <img src="http://i.imgur.com/8lhFhc1.gif" alt="">
        <h4><a href="#">Title 8</a></h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>

    </section>


    <hr>


  </div>

</div>

Disini WriteCode menggunakan Bootstrap untuk bootstrapnya silakan anda download dilink resminya, Diatas adalah step step Membuat Grid Galeri Responsive silakan dipelajari dan dikembangkan, semoga bermanfaat.

Baca juga : CSS Grid Hover Responsive

Grid Gallery Masonry Responsive CSS

2018-02-13T22:36:00.000+07:00

Dikesempatan ini WriteCode tidak bosannya berbagi dan belajar untuk membuat tutorial yang sederhana ini, WriteCode akan menulis tutorial cara membuat Grid Gallery Masonry Responsive CSS, membuat galeri didalam sebuah website kadang kita kebingungan mencari tampilan galeri yang menarik dan sesuai dengan keinginan kita, nyari dimbah google kadang nemu kadang ngak eh ketemu disini ngumpet ya...slow. Langsung saja tanpa panjang dan lebar kita langsung menuju TKP jadi ingat OVJ hehehe....

Step 1

Silakan anda copas css dibawah ini kedalam lembar kerja anda :

#masonry {
  column-count: 2;
  column-gap: 1em;
}

@media(min-width: 30em) {
  #masonry {
    column-count: 3;
    column-gap: 1em;
  }
}

@media(min-width: 40em) {
  #masonry {
    column-count: 4;
    column-gap: 1em;
  }
}

@media(min-width: 60em) {
  #masonry {
    column-count: 5;
    column-gap: 1em;
  }
}

@media(min-width: 75em) {
  #masonry {
    column-count: 6;
    column-gap: 1em;
  }
}

.item {
  background-color: none;
  display: inline-block;
  margin: 0 0 1em 0;
  width: 100%;
  cursor: pointer;
}

.item img {
  max-width: 100%;
  height: auto;
  width: 100%;
  margin-bottom: -4px;
  
  /*idk why but this fix stuff*/
}

.item.active {
  animation-name: active-in;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.item.active:before {
  content: "+";
  transform: rotate(45deg);
  font-size: 48px;
  color: white;
  position: absolute;
  top: 20px;
  right: 20px;
  background-color:rgba(0,0,0,0.85);
  border-radius: 50%;
  width:48px;
  height:48px;
  text-align:center;
  line-height:48px;
  z-index:12;
}

.item.active img {
  animation-name: active-in-img;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}


@keyframes active-in {
  0% {
    opacity:1;
    background-color:white;
  }
  
  50% {
    opacity:0;
    background-color:rgba(0,0,0,0.90);
  }
  
  100% {
    opacity: 1;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.90);
  }
}

@keyframes active-in-img {
  0% {
    opacity:1;
    transform:translate(0%, 0%);
    top: 0;
    left: 0;
    max-width: 100%;
  }
  49% {
    opacity:0;
    transform: translate(0%, -50%);
  }
  50% {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  100% {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  width: auto;
  max-height: 95vh;
  opacity:1;
  }
}

Step 2

Copas Lagi untuk javascriptnya dibawah ini :

$('.item').click(function() {
  $(this).toggleClass('active');
});

Step 3

Untuk script HTMLnya dibawah ini :

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="well text-center"><h2>Full Responsive CSS Masonry Grid Gallery Or Blog</h2></div>
    </div>
  </div>
  <div class="container">
  <div id="masonry">
    <div class="item">
      <img src="http://placehold.it/1200x1200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x300" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x250" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x320" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x300" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x250" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x320" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x300" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x250" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x320" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x300" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/200x200" alt="" />
    </div>
    <div class="item">
      <img src="http://placehold.it/300x250" alt="" />
    </div>
  </div>
</div>
</div>

Untuk Bootstrapnya silakan anda download di link resminya, 3 langkah mudah membuat Grid Gallery Masonry Responsive CSS, bila ada kekurangan didalam koding harap dimaklum silakan dikembangkan dan dipelajari, semoga bermanfaat untuk anda.

Baca Juga : CSS Image Galeri Responsive

Membuat Halaman AMP HTML Pertama

2018-02-13T15:57:00.000+07:00

Tidak tahu cara memulainya? Dalam tutorial ini, Anda akan mempelajari cara membuat halaman AMP HTML, cara menggelarnya, dan memvalidasi bahwa halaman tersebut sesuai dengan AMP, dan terakhir cara menyiapkannya untuk dipublikasikan dan didistribusikan.

Sebelum Memulai membuat halaman AMP. Untuk titik awal bisa anda perhatikan script hmtl dibawah ini :

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Untuk Membuat Halaman AMP jangan lupa untuk menambahkan script dibawah ini kedalam project AMP anda letakan didalam tag <head>

<script async src="https://cdn.ampproject.org/v0.js"></script>

Dan jangan lupa juga menambahkan Script CSS dibawah ini kedalam tag <head> silakan copas css dibawah ini kedalam project anda

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>

<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Tambahkan juga LD-JSON Kedalam Project AMP anda letakan kedalam tag <head>

<script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
</script>

Dan tambahkan juga meta dan link dibawah ini kedalam Tag <head>

<link rel="canonical" href="http://example.ampproject.org/project-amp-saya.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Untuk link jangan lupa menambahkan rel="canonical"

Untuk Membuat costum css dengan style jangan untuk menambahkan <style amp-costum> seperti dibawah ini :

<style amp-custom>
  h1{
      color: red
  }
</style>

Diatas adalah sedikit penjelasa cara Membuat Halaman AMP HTML Pertama untuk tutorial lengkap bisa juga langsung menuju link dibawah ini :

AMP PROJECT

Cara Membuat Halaman Maintenance dengan CSS

2018-02-13T12:05:00.001+07:00

Ditutorial kali ini writecode mau berbagi tutorial Cara Membuat Halaman Maintenance dengan CSS Langsung saja tanpa basa basi silakan copas koding dibawah ini :

<!DOCTYPE html>
<html>
    <head>
        <title>Site is down for maintenance</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style type="text/css">
            body { text-align: center; padding: 10%; font: 20px Helvetica, sans-serif; color: #333; }
            h1 { font-size: 50px; margin: 0; }
            article { display: block; text-align: left; max-width: 650px; margin: 0 auto; }
            a { color: #dc8100; text-decoration: none; }
            a:hover { color: #333; text-decoration: none; }
            @media only screen and (max-width : 480px) {
                h1 { font-size: 40px; }
            }
        </style>
    </head>
    <body>
        <article>
            <h1>Site is temporarily unavailable.</h1>
            <p>Scheduled maintenance is currently in progress. Please check back soon.</p>
            <p>We apologize for any inconvenience.</p>
            <p id="signature">&mdash; <a href="mailto:[Email]">Website</a></p>
        </article>
    </body>
</html>

Silakan dicopas koding diatas dan dimodifikasi sesuai dengan kebutuhan agan sekalian, sekian tutorial singkat ini semoga bermanfaat.

Cara Menghilangkan Extension WWW di URL

2018-02-06T10:04:00.001+07:00

Cara Menghilangkan Extension WWW di URL

Tambah kode berikut pada file .htaccess

RewriteEngine On

RewriteCond %{HTTP_HOST} ^www.example.com$ [NC]

RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]

Untuk Menghilangkan Extension .php

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*)$ $1.php
</IfModule>

Dibawah ini cara menghilangkan extension .html

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html-f
RewriteRule ^(.*)$ $1.html
</IfModule>

Diatas adalah kode , silakan copas kedalam file .htaccess

Css Image Galeri Responsive

2018-02-05T16:30:00.002+07:00

Css Image Galeri Responsive

Selamat datang kembali anak kids zaman now, berjumpa kembali dengan si semut hitam manis, ditutorial kali ini saya akan memberikan tutorial untuk anda petualang tutorial gratis, CSS Image Galeri Responsive tanpa banyak basa basi bisa langsung saja kita menuju kekoding dibawah ini :

<html> <head> <style> div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> </head> <body> <div class="gallery"> <a href="https://draft.blogger.com/img_fjords.jpg" target="_blank"> <img alt="Trolltunga Norway" height="200" src="img_fjords.jpg" width="300" /> </a> <div class="desc"> Add a description of the image here</div> </div> <div class="gallery"> <a href="https://draft.blogger.com/img_forest.jpg" target="_blank"> <img alt="Forest" height="400" src="img_forest.jpg" width="600" /> </a> <div class="desc"> Add a description of the image here</div> </div> <div class="gallery"> <a href="https://draft.blogger.com/img_lights.jpg" target="_blank"> <img alt="Northern Lights" height="400" src="img_lights.jpg" width="600" /> </a> <div class="desc"> Add a description of the image here</div> </div> <div class="gallery"> <a href="https://draft.blogger.com/img_mountains.jpg" target="_blank"> <img alt="Mountains" height="400" src="img_mountains.jpg" width="600" /> </a> <div class="desc"> Add a description of the image here</div> </div> </body> </html>

diatas kode lengkapnya silakan dikopas kelembar kerja anda

Validasi cek form inputan text empty dengan jquery

2017-12-21T17:08:00.001+07:00

Validasi cek form inputan text empty dengan jquery cara ini mungkin sudah sering anda gunakan untuk mengecek inputan data yang kosong didalam form inputan tapi disini akan saya berikan contoh sederhanannya hanya dengan menggunakan Jquery tanpa basa basi silakan copy Jquery dibawah ini :

Copy Jquery dibawah ini :

<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

Copy lagi script dibawah ini

<script>
   $(document).ready(function () {
     $('#cekinputan').validate({
         rules: {
          _name: "required",
             _noKtp: "required",
             _tempat: "required",
            
         },
         messages: {
          _name: "Silakan isi nama lengkap ",
          _noKtp: "silakan input nomer KTP",
          _tempat: "Silakan input tempat lahir sesuai edintitas",
      }
     });
   });
</script>

Copy juga form dibawah ini

<form method="POST" id="cekinputan">
    <div class="form-group">
     <input type="text" class="form-control areakontak" name="_name" id="_name" placeholder="Nama Lengkap" required>
    </div>
    <div class="form-group">
     <input type="text" class="form-control areakontak" name="_noKtp" id="_noKtp" placeholder="No Edintitas(KTP)" required onkeypress="return hanyaAngka(event, false)" maxlength="17">
    </div>
    <div class="form-group">
     <textarea name="_tempat" id="_tempat" placeholder="Tempat Lahir" class="form-control areakontak" maxlength="300" required></textarea>
    </div>
    <div class="form-group">
 <center>
 <button type="submit" class="btn btn-danger btn-grn">KIRIM 
  <i class="fa fa-arrow-right" style="border-radius: 25px; border: 1px solid; padding: 6px;"></i>
 </button>
 </center></div>
</form>

Silakan dipelajari dan kembangkan sendiri Validasi cek form inputan text empty dengan jquery bisa anda gunakan juga untuk semua form inputan dilembar kerja anda.

Install plugin seo di wordpress untuk peringkat website

2017-11-11T00:54:00.000+07:00

Dikesempatan ini saya akan membahas install plugin seo di wordpress untuk meningkatkan peringkat website anda di google, bing, yahoo, biasanya untuk pengguna wordpress baru akan kesulitan bagaimana cara memudahkan website anda mudah untuk ditemukan di mesin pencari seperti google, bing, yahoo dll, hanya dengan instal plugin dibawah ini sudah cukup untuk membuat seo

1. All in One SEO Pack

Plugin ini menyediakan google analytic, sitemap XML, robot.txt, meta title, meta keyword, meta description dan masih banyak lagi jadi jangan sungkan untuk menggunakan plugin yang satu ini.

2. Yoast SEO

Ini salah satu plugin yang paling banyak digunakan di wordpress karena plugin ini menyediakan fitur keyword, url, tag dll.

3. Google XML Sitemaps

Google ML Sitemaps dapat digunakan untuk membuat sitemap XML, yaitu dapat membantu search engine seperti Google,Bing dan Yahoo lebih baik lagi dalam mengindex website Anda. Sitemap berguna untuk memudahkan perayap search engine ketika mengecek struktur website. Untuk Mendaftarkan sitemap.xml di Google webmasters silakan menuju link ini

4. Broken Link Checker

Broken Link Checker dapat melakukan pemantauan link yang ada di website anda, jika terdapat link yang rusak, maka Anda dapat mengetahuinya dengan segera. Seperti link yang ada pada postingan, halaman dan komentar.

5. Rel Nofollow Checkbox

Rel Nofollow Checkbox berguna untuk menambahkan pilihan checkbox nofollow pada link yang ada di artikel Anda. Ini berguna untuk Anda yang tidak ingin memberikan backlink pada link yang dituju. Ada banyak plugin yang bisa anda gunakan untuk meningkatkan peringkat website anda di mensin pencari, karena di cms wordpress begitu banyak plugin2 yang disediakan untuk anda meningkatkan rangking website, jadi tidak salah bila anda ingin membuat website dengan cms wordpress hanya dengan cms ini telah menyediakan apa yang anda butuhkan baik dari theme, plugin, widget dll semua bisa anda gunakan sesuai dengan kebutuhan website anda.

Cara mendapatkan key api google map

2017-11-07T22:59:00.000+07:00

Untuk membuat key api google map silakan anda menuju link ini untuk tampilannya seperti dibawah ini :

Bila anda sudah masuk kehalam seperti diatas silakan login ke akun google sobat. Setelah login silakan klik tombol DAPATKAN KUNCI seperti didalam gambar diatas line warna merah lalu akan muncul popup layar seperti dibawah ini :

Lalu Select Create a new project buat nama project key anda setelah itu akan muncul key api seperti dibawah ini :

Diatas cara mendapatkan key api google map silakan dipraktekan semoga bermanfaat.

Menampilkan map kedalam html

2017-11-07T22:39:00.001+07:00

Menampilkan google map kedalam HTML sebenarnya bukan hal yang sulit dengan mengikuti tutorial ini saya yakin anda pasti bisa membuat google map sendiri, biasanya google digunakan untuk menentukan lokasi alamat kantor,perusahaan dan nama jalan dengan icon map marker berwarna merah. Untuk contoh sederhanya dibawah ini :

Kode HTML

<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<style>#map {
height: 500px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}</style>
</head>
<body>
<div id="map"></div>
<script>
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.863276, 151.207977),
zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap">
</script>
</body>
</html>

Yang perlu di perhatikan ID map yang akan menampilkan map google ke dalam HTML , <div id="map"></div> google map di tampilkan disini.

Untuk membuat KEY API map silakan menuju link ini setelah KEY API dibuat copas keynya letakan didalam tag <script> dibawah ini

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KEY API(Letakan disini)&callback=initMap">
</script>

Diatas adalah cara menampilkan google map kedalam HTML silakan dipelajari dan dikembangkan.

Cara membuat class crud php mysql

2017-11-04T23:22:00.000+07:00

Ditutorial kali ini WriteCode akan membahas cara membuat class crud dengn php mysql berbasis PDO(PHP Data Object), mengapa kita harus membuat atau memahami Data object karena data obejct lebih mudah digunakan serta penempatan koding yang lebih teratur dan rapi untuk documentasinya silakan baca disini . Berikut step-step membuat class crud.

Step 1

Membuat class koneksi database mysql, koneksi database merupakan akar dari sebuah website dengan adanya database kita bisa melakukan penambahan data, edit,delete dll, maka sangat penting bagi anda pengembangan website tahu cara membuat class koneksi database yang baik.DIbawah ini contoh class koneksi database

Baca Juga : Cara membuat class crud php mysql

<?php 
class database 
{
    private $dsn;
    public $default = array(
        'datasource' => 'Database/Mysql',
        'persistent' => false,
        'host' => 'localhost',
        'login' => 'root',
        'password' => 'password',
        'database' => 'database'//name database,
        'prefix' => 'tbl_',
        'encoding' => 'UTF8',
        'port' => '',
    );

    public function dbkoneksi() {
        static $instance;
        if ($instance === null) {
            $opt = array(
                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
                PDO::ATTR_EMULATE_PREPARES => FALSE,
            );
            $dsn = 'mysql:host=' .$this->default['host'] . ';dbname=' .$this->default['database'] . ';charset=' .$this->default['encoding'];
            $instance = new PDO($dsn, $this->default['login'], $this->default['password'], $opt);
        }
        return $instance;
    }
 
}

diatas adalah contoh class koneksi database dengan name class database dengan function dbkoneksi dalam pembuatan class koneksi database ini hal yang harus di perhatikan adalah name class database itu sendiri dengan adanya nama didalam sebuah class memudahkan kita untuk memangil class itu sendiri.

Step 2

Baca Juga : Cara membuat shoping cart php mysql

Membuat class crud untuk anda yang seorang developer website atau pengembang website membuat crud mungkin sudah tidak asing lagi bagi kalian bagi pemula ini sangat diperhatikan bagai mana cara membuat sebuah crud yang baik dan benar. Dalam membuatse class crud ada beberapa hal yang harus anda perhatikan name class dan name function digunakan. Disini saya mengunakan name class CRUD untuk nama class sendiri bebas terserah anda mau dikasih dengan nama apa saja yang penting mudah untuk di ingat contoh dibawah ini :

<?php 
class crud extends database {
        
   //ini class CRUD

   private $db;
 
   function __construct()  { 
    $this->db = $dbs;//variabel databasenya
   }

   public funtion insert(){
      //letakan code disini
   }

   public function update(){
       //letakan code disini
   }

   public function read(){
      //letakan code disini
   }

   public function delete(){
       //letakan code disini
   }

}

diatas adalah contoh class crud yang telah kita buat dengan name class CRUD sedangkan function digunakan untuk apa ? tugas dari function dalam sebuah class bermacam kegunaan sesuai dengan kebutuhan anda sedangkan function dalam bahasa pemograman adalah kode program yang dirancang untuk menyelesaikan sebuah tugas tertentu, dan merupakan bagian dari program utama. Disini saya hanya membuat beberapa function saja untuk functionnya saya akan jelaskan dibawah ini : Sebelum saya menjelaskan maksud dari function-function dalam class diatas, disini saya akan mejelaskan bagaimana cara menggunakan atau memangil class yang telah dibuat, pengunaannya sangat mudah contoh anda memiliki halaman index.php nah didalam index.php silakan di panggil nama file php-nya sebagai contoh dibawah ini

<?php 
  // Path constants// Path constants   
  include_once 'database.php';//koneksi database    
  include_once 'crud.php';//crud

  $systemcrud = new crud();//name class

Letakan kode diatas kedalam file index.php untuk databasenya disini saya menggunakan extends (class turunan ) Sekali lagi dalam PDO ada yang disebut dengan penurunan class. Maksudnya kita bisa membuat suatu class baru dari class yang sudah ada, mekanisme ini disebut penurunan kelas. Pada php , untuk menurunkan kelas maka digunakan kata kunci extends. Contoh dibawah ini :

class crud extends database {
//ini class turunan
}

diatas adalah contoh class turunan disini class turunannya database yang di dapat dalam class database diatas.sampai disini saya rasa anda sudah paham sekarang lanjut ke penjelasan funtion-function didalam class crud.
Function __construct() dibawah ini biasanya digunakan untuk menghubungkan class crud dengan databasenya.

function __construct() {
  //letakan code disini
}

Function insert(), function ini untuk menambahkan data ke dalam database cara penulisannya seperti dibawah ini

public function insert() {
  //letakan code disini
}

Function Update(), function ini untuk mengedit data didalam database cara penulisannya seperti dibawah ini

public function update() {
  //letakan code disini
}

Function Delete(), function ini untuk menhapus data didalam database cara penulisannya seperti dibawah ini

public function delete() {
  //letakan code disini
}

Function Read(), function ini untuk membaca atau menampilkan data didalam database cara penulisannya seperti dibawah ini

public function read() {
  //letakan code disini
}

Dari penjelasan singkat diatas saya rasa anda sudah mengerti cara membuat class crud dengan benar silakan dipelajari.

Baca Juga : Membuat fitur autosave dengan ajax jquery

Slug untuk seo friendly website

2017-11-04T23:13:00.000+07:00

Membuat slug untuk website seo friendly untuk meningkatkan skor pada website. Untuk membuat slug sebenarnya sangat mudah. Pada prinsipnya slug tersebut akan menggantikan ID (http://www.website.com?id=441) karena bila website anda masih menggunakan ID untuk menampilkan data itu tidak baik dimesin pencari google dan juga tidak aman untuk website itu sendiri. Itu juga alasan kenapa kita harus menggunakan slug untuk (seo friendly). Jadi pertama kita perlu menambahkan kolom slug pada pada tabel content anda. Kemudian membuat fungsi slug yang akan meng convert judul berita menjadi slug (seo friendly). untuk script kodenya dibawah ini

function create_slug($string){
 $replace = '-'; 
 $string = strtolower($string); 
 //replace / and . with white space 
 $string = preg_replace("/[\/\.]/", " ", $string); 
 $string = preg_replace("/[^a-z0-9_\s-]/", "", $string); 
 //remove multiple dashes or whitespaces 
 $string = preg_replace("/[\s-]+/", " ", $string); 
 //convert whitespaces and underscore to $replace 
 $string = preg_replace("/[\s_]/", $replace, $string); 
 //limit the slug size 
 $string = substr($string, 0, 100); 
 //slug is generated 
 return $string; 
 }

Untuk menggunakan function crate_slug diatas seperti dibawah ini :

create_slug(strtolower(trim($_POST['content']))

Untuk website yang telah menggunakan slug biasanya linknya akan tampka seperti ini (http://website.com/membuat-slug/) silakan copas koding diatas dan diterapkan dilembar kerja anda semoga bermanfaata