How - fix error on github clone(permission denied)

Oke karena codedoct baru saja upgrade os Ubuntu ke versi 16.04 LTS maka untuk melanjutkan development project sebelumnya yang sudah ada di github dalam hal ini project-blog-ruby, kita harus meng-clone project tersebut ke komputer yang baru diinstall, caranya?..

# git clone 
sudo git clone https://github.com/codedoct/project-blog-ruby.git

#masuk ke path project-blog-ruby
cd project-blog-ruby

#bundle install rails
bundle install

#jika terjadi error#
An error occurred while installing pg (0.18.4), and Bundler cannot continue.
Make sure that `gem install pg -v '0.18.4'` succeeds before bundling.

#install libpq terlebih dahulu
sudo apt-get install libpq-dev

#bundle install lagi
bundle install

Oke, sekarang project sudah siap untuk di running

rails server

#jika terjadi error#
Permission denied @ dir_s_mkdir - /var/www/html/blog/project-blog-ruby/tmp/cache

#ubah saja owner folder seperti ini
#mundur satu path dir 
cd ..
sudo chown -R user_name:root project-blog-ruby

#kita juga bisa memperbaikinya dengan cara ini
sudo chmod -R 777 project-blog-ruby
#tapi cara chmod atau mengubah hak akses sangat tidak dianjurkan karena terlalu beresiko untuk project kita bisa di hack

Jika rails server sudah running dengan benar coba test dengan membuka url localhost:3000

===DONE!===

Read More »

How - Install LAMP server di ubuntu 16.04 LTS

Hello everyone,,

Kali ini codedoct akan membagikan sedikit pengalaman tentang ubuntu 16.04.. yup, belum lama ini ubuntu telah merilis versi terbarunya yaitu 16.04 LTS codedoct pun tertarik untuk mencobanya untuk keperluan development,

Dan setelah ubuntu 16.04 LTS sudah terinstall pada tablet Acer Iconia W700 codedoct pun mencoba untuk menginstall beberapa aplikasi pendukung untuk development, dalam hal ini yaitu LAMP server, apa itu LAMP server? lihat disini.

Setelah mencoba menginstall LAMP server dengan cara ini, terjadi masalah serperti ini,

Pada saat codedoct mencoba untuk restart service apache2 terjadi error seperti ini,



Kemudian codedoct mencoba untuk membuat halaman php info pada dir /var/www/html/ tapi hasilnya blank, alias halaman php sama sekali tidak bisa di display atau hanya menampilkan layar putih,

Selanjutnya codedoctpun mencoba menginstall phpmyadmin kemudian mengetesnya dengan membuka url localhost/phpmyadmin hasilnya serperti ini,

Setelah mengetahui beberapa error yang ditunjukkan codedoct pun berasumsi ada masalah pada php yang telah terinstall, setelah mencari tahu sana-sini akhirnya codedoct banyak membaca artikel bahwa default php ubuntu 16.04 LTS adalah php7.0,

Kemudian codedoct mencoba untuk menginstall ulang LAMP server dengan mengikuti cara pada page website ini.

Dan hasilnya sama saja, php7.0 tidak bekerja dengan baik, oke selanjutnya codedoct mencoba untuk menginstall php5.6 dan juga php7.0 secara bersamaan dengan code seperti ini,

sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
sudo apt-get install php7.0 php5.6 php5.6-mysql php-gettext php5.6-mbstring php-xdebug libapache2-mod-php5.6 libapache2-mod-php7.0

Setelah itu menonaktifkan php7.0 dan mengaktifkan php5.6

sudo a2dismod php7.0 ; sudo a2enmod php5.6 ; sudo service apache2 restart

Dan hasilnya tara......!!

it work,.,.,

Kemudian codedoct mencoba untuk menonaktifkan php5.6 dan mengaktifkan php7.0

sudo a2dismod php5.6 ; sudo a2enmod php7.0 ; sudo service apache2 restart

Dan hasilnya tara.....!

it work to.,.,.

Akhirnya codedoct menyimpulkan bahwa untuk dapat untuk menjalankan php7.0 pada LAMP server ubuntu 16.04 LTS anda juga harus menginstall php5.6. Codedoct tidak tahu alasannya, dan codedoct juga tidak tahu hasilnya jika LAMP server ini diinstall pada ubuntu 16.04 LTS dengan menggunakan komputer tipe lain,, mungkin teman-teman ada yang sudah mencobanya?

===DONE!===

Read More »

Syntax - Syntax sass

Sass merupakan salah satu compiler css yang sangat populer, untuk dapat menggunakan sass sebagai compiler css, kita harus menginstallnya terlebih dahulu, lihat disini.

Berikut beberapa syntax sass dan perbandingannya dengan css biasa,

Parent and child

//sass
.test{
    position: absolute;
    border: 4px solid black;
    top: 200px;
    left: 25%;
    width: 50%;
    height: 200px;
    text-align: center;
    span{
      font-size: 24px;
      line-height: 200px;
    }
}
//css
.test span {
  font-size: 24px;
  line-height: 200px;
}

Use one parameter

//sass
.test {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");
  border:{
    top: 4px solid black;
    bottom: 4px solid black;
  }
}
//css
.test {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");
  border-top: 4px solid black;
  border-bottom: 4px solid black;
}

Use variable

//sass
$translucent-white:rgba(255,255,255,0.3);
$standard-border: 4px solid black;
.test{
 background-color: $translucent-white;
 border: $standard-border;
}
//css
.test{
 background-color: rgba(255, 255, 255, 0.3);
 border: 4px solid black;
}

Use mixin

//sass
@mixin transform($transformation) {
  transform: $transformation;
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;  
}
.test {
 width: 300px;
 height: 180px;
 &:hover{
  @include transform (rotatey(-180deg));  
 } 
}
//css
.test {
  width: 300px;
  height: 180px;
}
.test:hover {
  transform: rotatey(-180deg);
  -webkit-transform: rotatey(-180deg);
  -moz-transform: rotatey(-180deg);
  -ms-transform: rotatey(-180deg);
  -o-transform: rotatey(-180deg);
}

Variable on mixin

//sass
$stripe-properties: to bottom, 15%, blue, white;
@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}
.test {
 width: 100%;
 height: 100%;
 @include stripes($stripe-properties...);
}
//css
.test {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(to bottom, white, white 14%, blue 1%, white 15%);
}

Use String

//sass
@mixin photo-content($file) {
  content: url(#{$file}.jpg); //this is ruby???
  object-fit: cover;
}
.image {
    @include photo-content('titanosaur');
    width: 60%;
    margin: 0px auto;  
}
//css
.image {
  width: 60%;
  margin: 0px auto;
  object-fit: cover;
  content: url(titanosaur.jpg);
}

Hover in mixin

//sass
@mixin hover-color($color) {
   &:hover{
       color: $color;
   }
}
.test {
 display: block;
 text-align: center;
 position: relative;
 top: 40%;
 @include hover-color(red);
}    
//css
.test:hover {
  color: red;
}

You can use your math skill

//sass
.test {
  color: red+blue;
}
//css
.math {
  color: magenta; //hahahaha
}

//other math
$width:250px;
.math {
  width: $width;
  border-radius: $width/6;
}
//css
.math{
  width:250px;
  border-radius: 41.66667px;
}

Looping

//use each
$list: (orange, purple, teal);
@each $item in $list { //shit this code same with ruby hahaha,.,.
  .#{$item} {
    background: $item;
  }
}
//css
.orange {
  background: orange;
}
.purple {
  background: purple;
}
.teal {
  background: teal;
}

//use for
$total: 10;
$step: 360deg / $total;
.test {
  height: 30px;
}
@for $i from 1 through $total {
  .test:nth-child(#{$i}) {
    background: adjust-hue(blue, $i * $step);
   }
}
//css
.test {
  height: 30px;
}
.test:nth-child(1) {
  background: #9900ff;
}
.test:nth-child(2) {
  background: #ff00cc;
}
.test:nth-child(3) {
  background: #ff0033;
}
.test:nth-child(4) {
  background: #ff6600;
}
.test:nth-child(5) {
  background: yellow;
}
.test:nth-child(6) {
  background: #66ff00;
}
.test:nth-child(7) {
  background: #00ff33;
}
.test:nth-child(8) {
  background: #00ffcc;
}
.test:nth-child(9) {
  background: #0099ff;
}
.test:nth-child(10) {
  background: blue;
}

Import scss

//import other scss files
@import "test";

//extend
.test{
 position: absolute;
}
.test2 {
    @extend .absolute;
}
//css
.test, .test2, {
  position: absolute;
}

Read More »

Syntax - Syntax php

Artikel kali ini akan membahas beberapa syntax yang sering digunakan dalam programming PHP.

Tag And comment

===> tag php
<?php ?>

<?php

//===> comment one line
// content comment

//===> comment multi line
/*  
 content comment
 content comment
*/

Display

//===> show string
echo "content string";

//===> show integer
echo 21;

//===> show variabel
echo $variabel;

//===> mix variabel and string
echo "test ".$variabel." test2";

Array

here

Loop

//===> for
for ($i = 2; $i < 11; $i = $i + 2) {
  echo $i;
}
output:
246810

//===> foreach
$sentence = array("Im ", "learning ", "PHP!");        
foreach($sentence as $word) {
  echo $word;
}
output:
Im learning PHP!

//===> while
$loopCond = true;
while ($loopCond){
 echo "<p>The loop is running.<p>";
 $loopCond = false;
}
output:
The loop is running.
//other example
$i=0;
while($i<5){
    echo $i;
    $i++;
}
output:
01234
//with other way
$i=0;
while($i<5):
    echo $i;
    $i++;
endwhile;
output:
01234

//===> do while
$loopCond = false;
do {
 echo "<p>The loop ran even though the loop condition is false.</p>";
} while ($loopCond);
output:
The loop ran even though the loop condition is false.

Library

//===> length
$length = strlen("sayah");
echo $length;
output:
5

//===> partial, uppercase, lowercase
$myname = "Dark King";

$partial = substr($myname, 1, 3);
print $partial;

$uppercase = strtoupper($myname);
print $uppercase;

$lowercase = strtolower($myname);
print $lowercase;

output:
ark
DARK KING
dark king

//===> find position
$myname = "Dark King";
echo strpos($myname, "i");
output:
6

//===> round(pembulatan)
$round = round(M_PI);
print $round;

$round = round(M_PI, 3);
print $round;
output:
3
3.142

//===> rand(random number between)
 print rand(1, 10);

$name = "Dark King";
echo $name[rand(0, strlen($name)-1)];
output:
4
n

//===> length string
$name = "Dark King";
echo strlen($name);
output:
9

Function

//===> play with function
function greetings($name){
    echo "Greetings, " . $name . "!";
}

greetings("Dark King");
output:
Greetings, Dark King!

//===> class
// The code below creates the class
class Person {
    // Creating some properties (variables tied to an object)
    public $isAlive = true;
    public $firstname;
    public $lastname;
    public $age;
    
    // Assigning the values
    public function __construct($firstname, $lastname, $age) {
      $this->firstname = $firstname;
      $this->lastname = $lastname;
      $this->age = $age;
    }
    
    // Creating a method (function tied to an object)
    public function greet() {
      return "Hello, my name is " . $this->firstname . " " . $this->lastname . ". Nice to meet you! :-)";
    }
  }
  
// Creating a new person called "boring 12345", who is 12345 years old ;-)
$me = new Person('Dark', 'King', 12345);

// Printing out, what the greet method returns
echo $me->greet(); 
output:
Hello, my name is Dark King Nice to meet you!

//===> other example class
class Dog{
    public $numLegs = 4;
    public $name;
    
    public function __construct($name){
        $this->name = $name;    
    }
    
    public function bark(){
        return "Woof!";   
    }
    
    public function greet(){
        return "My name is ".$this->name;    
    }
}

$dog1 = new Dog("Barker");
$dog2 = new Dog("Amigo");

echo $dog1->bark();
echo $dog2->greet();
output:
Woof! My name is Amigo

//===> cheking class
class Person {
  public $isAlive = true;
  
  function __construct($name) {
      $this->name = $name;
  }
  
  public function dance() {
    return "I'm dancing!";
  }
}

$me = new Person("Shane");
if (is_a($me, "Person")) {
  echo "I'm a person, ";
}
if (property_exists($me, "name")) {
  echo "I have a name, ";
}
if (method_exists($me, "dance")) {
  echo "and I know how to dance!";
}
output:
I m a person, I have a name, and I know how to dance!

//===> cheking class
class Shape {
  public $hasSides = true;
}
class Square extends Shape {

}
$square = new Square();
if (property_exists($square, 'hasSides')) {
  echo "I have sides!";
}
output:
I have sides!

//===> overide class / extends
class Vehicle {
  public function honk() {
    return "HONK HONK!";
  }
}
class Bicycle extends Vehicle {
   public function honk() {
      return "Beep beep!";   
   }
}
$bicycle = new Bicycle();
echo $bicycle->honk();
output:
Beep beep!

//===> call const
class Ninja extends Person {
  const stealth = "MAXIMUM";
}
echo Ninja::stealth;
output:
MAXIMUM

//===> const
class King {
  public static function proclaim() {
    echo "A kingly proclamation!";
  }
}
King::proclaim()
output:
A kingly proclamation!

Read More »

How - Use Charles Proxy (Mobile App)

On the previous trick we have run Charles Proxy on web browser, this time we will join Charles Proxy with your device(mobilephone), for get the url of mobile app.

Ok just following the tutorial,

The first time, you must install Certificates Charles Proxy on your mobilephone, you can download here,

If done, then open that certificates on your mobilephone, so it would appear like this,

Fill the name certificates and "Oke"

Next, set the manual proxy on your mobilephone like this,

Fill the field Proxy with ip on your computer and Port field with your setting on Charles Proxy,

In the picture above, proxy settings done by equating the settings on your computer, where ip computer can be found on Charles Proxy

or command prompt (type ipconfig on command prompt see on IPv4 address)

Whereas port proxy, you can set port proxy on your Charles Proxy like this,
Just click menu Proxy and click Proxy Settings

And then set the Port,

The last, run Charles Proxy and then open one of your app on mobile phone, so that the view on Charles Proxy will look like this,

===DONE!===

Read More »

How - Use Charles Proxy (Web Browser)

Welcome back,,

This time, i will give you some trick about networking,

In the development a website we often hear about get and post method, and because of that method a website can work properly,

In this tutorial i want to tell you how to know what the post or get method that used in a website?
what variabel are given from a get method? and what variable are use for post method?

With server proxy, we will know that all.. ha..ha..ha..(don't laugh like me!)

Ok, the first time that we must to do is,,
install the Charles Proxy,
and to do that you must install java first.

if you have done all so you can running that software like this ha..ha..ha..(don't laugh like me!)

second, checked Windows Proxy, like this..

And try to running Charles Proxy(Press the button), then open your browser and type anything url you want and you will see this!

You see that?!!! i get that get and post method of this website! ha..ha..ha..(don't laugh like me!)

So easy, yes! because this website not require https link, and what about the https link?
simple, just install SSL Certificates of Server Proxy to your browser like this,

Open and intsall,,

Download SSL Certificates Charles Proxy, Java, and Charles Proxy, here..

Oke, but what about a mobile app? how i can get the post and get method?
see here..

===DONE!===

Read More »

Engine - Create graph or chart

Hello everyone,,

Tutorial kali ini codedoct akan membagikan cara membuat grafik / chart menggunakan highcharts pada php.

Grafik atau chart ini sangat berguna pada pada setiap perusahaan untuk menampilkan data statistik dari pertumbuhan database suatu perusahaan.

Oke langsung saja kita buat grafik / chart nya,

Berikut codenya,

<?php
 //you can change this data with your database
 $datas = array(
  array(
   'gender' => 'Laki-laki',
   'jumlah' => '123'
  ),
  array(
   'gender' => 'Perempuan',
   'jumlah' => '321'
  )
 );
?>
<html>
 <head>
  <title>Grafik | Chart</title>
  <script type="text/javascript" src="extension/jquery.min.js"></script>
  <script type="text/javascript" src="extension/highcharts.js"></script>
  <script type="text/javascript">
   $(function(){
     showChart();
   });

   function showChart()
   {
     var chart1; // globally available
     $(document).ready(function() {
       chart1 = new Highcharts.Chart({
          chart: {
             renderTo: 'chart',
             type: 'column'
          },   
          title: {
             text: 'Grafik Jumlah Penduduk'
          },
          xAxis: {
             categories: ['Gender']
          },
          yAxis: {
             title: {
                text: 'Jumlah Penduduk'
             }
          },
               series:             
             [
              //i'am use data array
               <?php foreach ($datas as $data) { ?>
        {
          name: '<?=$data['gender']?>',
          data: [<?=$data['jumlah']?>]
        },
      <?php } ?>
             ]
       });
     });
   }
  </script>
 </head>
 <body>
  <button onclick="showChart(this)" type="button">test</button>
  <div id="chart"></div>
 </body>
</html>

Dan hasilnya akan tampak seperti ini,

Jika butuh file extensionnya silahkan download langsung full codenya disini,

===DONE!===

Read More »