
Sebagaimana kita ketahui bahwa CMS WordPress digunakan sebagai managemen konten, dan oleh sebab itu WordPress memiliki beberapa tipe konten yang untuk berbeda dan disebut sebagai "**Post Type**". 

Konten konten tersebut disimpan dalam satu table `wp_posts` dan di bedakan dengan column `post_type` .

## Default Post Type
Ketika pertama kali menginstall WordPress, maka secara default akan ada beberapa default post type yang telah ada di WordPress
-   Posts
-   Pages
-   Attachments
-   Revisions
-   Navigation Menus
-   Custom CSS
-   Changesets

Mungkin disini kita tidak asing lagi dengan Post dan juga Pages, karena menu nya jelas terpampang di Dashboard WordPress.

Akan tetapi disini coba kami kenalkan secara singkat satu persatu

### Posts
Di dalam table `wp_post` ditulis `post` kebanyakan digunakan sebagai konten berupa artikel dan normalnya akan ditampilkan secara urut berdasarkan waktu dari yang terbaru ditampilkan lebih awal kemudian yang berikutnya.

Secara umum, Posts adalah konten utama di web dengan CMS WordPress dan dikelompokan dengan sebuah taxonomy categories dan tags.

### Pages
Pages mirip dengan Posts, dan di tandai dalam `wp_post` dengan `page`. Umumnya digunakan sebagai konten pendukung dari website dengan CMS WordPress seperti untuk halaman Kontan, About Us, Privacy Policy dll.

### Attachments
Di `wp_post` ditandai dengan `attachment` dan digunakan sebagai penghubung antara media dengan post atau page (relationship). Disini post dan juga page sebagai parent. Attachments juga menggunakan `wp_postmeta` untuk menyimpan informasi tambahan seperti halnya post dan juga.

### Revisions
Revisions digunakan untuk menyimpan history post type lainnya yang mana kita bisa melakukan rollback atau  menembalikan data sebelumnya.

### Navigation Menus
Bukan hanya post, menu juga disimpan di table `wp_post` untuk menyimpan navigasi website. 

### Custom CSS
Untuk menyimpan custom css teruntuk theme tertentu yang disimpan melalui customizer dengan post type `wp_global_styles`

Ketika menyimpan custom css melalui customerizer **Additional CSS**, maka akan disimpan table `wp_post` dengan slug `wp-global-styles-theme-slug`. Misalnya `wp-global-styles-twentytwentythree`. 

### Changesets
Mirip dengan **Revisions** namun spesifik digunakan untuk history dari **Customizer**


## Custom Post Type
Selain default post type, kita juga bisa membuat custom post type yang berbeda.
Contoh simple pembuatan custom post type

```php
    function register_book_post_type(){
	    register_post_type('book');
    }
    add_action('init','register_book_post_type');
```

Penamaan post type harus mengikuti [best practice pembuatan Wordpress Plugin](https://www.dankedev.com/best-practice-wordpress-plugin)

Anda bisa mencopy code [template Custom Post Type
](https://www.dankedev.com/snippet/membuat-custom-post-type-wordpress)
---
Dengan mengetahui macam-macam post type ini, sebagai dasar atau alasan apakah kita membutuhkan custom post type atau memanfaatkan post type yang sudah ada untuk melengkapi plugin atau theme yang kita bangun.

Selamat bercoding ria

Kenali dulu Post Type yang ada di WordPress sebelum membuat custom post type mu

Mengenal WordPress Post Type

Berikut beberapa best practive yang bisa Anda gunakan dalam membangun sebuah WordPress Plugin.

## 1. Pilih nama Plugin yang unik dan Mudah diingat

Ini hanya jika Anda ingin merilis plugin WordPress yang Anda buat ke publik.

Tujuanya adalah agar orang mudah mengingat dan memahami secara langsung ketika menyebut namanya.

## 2. Gunakan nama folder file yang unik

Agar nanti saat di install tidak bentrok dengan plugin lainya. Misalnya jangan gunakan nama yang sama dengan `seo` karena plugin dengan url tersebut sudah ada di direktori WordPress.

  

Untuk mengeceknya, Anda bisa buka link ini

```text
https://wordpress.org/plugins/seo/[folder-plugin-mu]
```


ganti `[folder-plugin-mu]` dengan nama folder plugin yang ingin kamu buat.

  

Jika hasilnya adalah halaman pencarian dari wordpress plugin directory. maka folder tersebut bisa kamu gunakan.

  

**Tips**
Gunakan prefix atau sufix untuk nama folder. Contoh

- `dankedev-seo`
- `seo-by-dankedev`
- dan lain-lain

## 3. Pahami dasar-dasar penulisan nama variable, function pada PHP

Anda harus dan wajib paham ini, meskipun mudah tapi terkadang bagi pemula sering terlewatkan. Misalnya yang wajib Anda lakukan terkait variable dan nama function
 - Tidak boleh ada spasi dan simbol kecuali under dash (_), dan juga tidak boleh diawali angka 
    - `❌ $setting-umum`
    - `❌ function register$include-script(){}`
    - `✅ $setting_umum`
    - `✅ function register_include_script(){}`

 - Ketika anda membuka, pastikan Anda menutupnya, misal
    - ❌  `$variable = 'seo'` // kurang titik koma `;`
    - ❌  `$variable = 'seo ;` // kurang penutup string `'`
    - ❌  `$variable = array(...` // kurang tutup kurung `)`
    - dll

Demikian juga dengan standard standard penulisan php lainy.

## 4. Hindari penamaan yang sama

Ketika plugin Anda aktif, secara otomatis semua kode yang Anda buat tadi akan di proses oleh WordPress bersamaan dengan dengan kode dari Core WordPress, Theme, atau plugin lain nya yang terinstall dalam web tersebut.

### Solusi dan Tips

#### Gunakan prefix

Tambahkan awalan (`prefix`) disetiap function khususnya, dan juga global variable, agar tidak terjadi bentrok.

contoh

```php
/**
Tambahkan dankedev_ sebagai prefix function (bebas sesuai kehendak Anda)
**/
dankedev_get_seo_title(){
    //kode lainya disini
}
```

#### Lakukan pengecekan diawal

PHP menyediakan banyak metode pengecekan, baik untuk varibale, nama function atau class atau konstanta. Misalnya
- Untuk mengecek variables, array key, atau object gunakan [isset()](http://php.net/manual/en/function.isset.php)
- Untuk mengecek nama function gunakan [function_exists()](http://php.net/manual/en/function.function-exists.php)
- untuk mengecek nama class gunakan [class_exists()](http://php.net/manual/en/function.class-exists.php)
- Untuk mengecek konstanta gunakan [defined()](http://php.net/manual/en/function.defined.php)

**Contoh**

```php
// cek keberadaan apakah sebuah key didefinisikan di dalam array

$args = isset($options['some_key']) ? $options['some_key']:'';

// cek apakah functions sudah ada atau belum

if(!function_exists('nama_function_yang_akan_dibuat')){
    function nama_function_yang_akan_dibuat(){
        // kode lainya disini
    }
}

// Cek apakah nama class sudah ada atau belum
if ( ! class_exists( 'NamaClass' ) ) {
    class NamaClass{
        // kode lainya disini
    }
}

```

### Gunakan Metode Object Oriented Programming dan NamaSpacing

Salah satu yang mudah diterapkan adalah menggunakan `class`. Dan gunakan `namespace` untuk membuatnya lebih unik.

Contoh

```php
namespace Dankedev;

class Plugin{
    protected static $variable;

    public static function init(){
        return self::$variable;
    }
}


//Bisa digunakan dengan cara
$init = \Dankedev\Plugin::init();
```


## 5. Management File yang Mudah

Jika plugin yang Anda buat nantinya memerlukan banyak file, misal file css, html, javascript, pihak ketika atau lainya. Maka menyusun struktur yang baik sangat-sangat diperlukan.

Gunanya adalah agar kita nanti tidak bingung saat proses development. 

Pisahkan file-file sejenis baik secara kegunaan ataupun berdasarkan ekstensi.

Berikut contoh struktur file yang kami sarankan

```
/nama-plugin
    nama-plugin.php
    uninstall.php
    /assets
        /admin
            /css
                /dashboard.css
                /...css
            /js
                /dashboard.js
                /chart.js
                /...js
        /public
            /css
                /my-app.css
                /...css
            /js
                /my-app.js
                /...js
            /images
                /logo.png
                /...jpg
    /includes/
        helper.php
        format.php
    /languages
    /vendor
```

Yang demikian hanya contoh saja, prakteknya terserah Anda yang tentunya seuai yang mudah bagi Anda.

## 6. Gunakan Conditional

Ini juga akan sangat membantu ketika Anda memiliki file yang banyak, namun penggunaanya berbeda-beda. Contoh ada function tertentu yang hanya akan digunakan di admin dan ada yang untuk user umum. Maka bisa gunakan metode ini:

```php
if(is_admin()){
        require_once __DIR__ . '/admin/plugin-name-admin.php';
}

//hanya untuk user yang login
if(is_user_logged_in()){
            require_once __DIR__ . '/user/profile-function.php';

}

require_once __DIR__ . '/admin/function-umum.php';
```


## 7. Sanitize First, Escape letter

Lakukan sanitize setiap kali anda melakukan post atau request
Contoh

```php
$id = isset($_POST['id']) ? sanitize_text_field($_POST['id']) : null;
```

### Prinsip Keamanan yang harus dijaga

1. Asas tidak percaya terhadap apapun yang menjadi input dari pengguna
2. Lakukan `escape` selama memungkinkan
3. Lakukan `escape` apapun yang berasal dari atau menuju ke "untrusted sources" misalnya database, user form, Rest API dll. 
4. Jangan berasumsi apapun
6. Lakukan "reject" jika mencurigakan.

Beberapa function `escape` yang bisa digunakan

- [esc_attr()](https://developer.wordpress.org/reference/functions/esc_attr/) // untuk string
- [esc_textarea()](https://developer.wordpress.org/reference/functions/esc_textarea/) // untuk string
- [esc_url()](https://developer.wordpress.org/reference/functions/esc_url/) // untuk string
- [esc_html()](https://developer.wordpress.org/reference/functions/esc_html/) // untuk string
- dll






Agar menjaga kualitas dan kemananan WordPress Plugin, kamu perlu melakukan hal-hal ini.

Best Practice - Pembuatan WordPress Plugin

Ketika membangun sebuah aplikasi web atau mobile, atau mungkin bagi Anda yang berprofesi sebagai designer. Pasti sering membutuhkan contoh konten yang bisa disematkan di project kita sebagai contoh penerapan isi konten pada aplikasi atau project kita.
Misalnya saja konten text, logo, atau gambar-gambar yang spesifik atau json dan juga lainya.

Untuk memudahkan disini saya menyusun beberapa contoh placeholder yang bisa kita gunakan.

## Text Placeholder

### 1. lipsum

Standard dummy text generator yang biasa digunakan oleh industri.![](https://api.dankedev.com/assets/articles/lipsum.png)[lipsum](https://www.lipsum.com/)

### 2. Loripsum.net

Versi lebih advance dari lipsum, Anda bisa menyertaakan link, list, quote, dan lainya

![](https://api.dankedev.com/assets/articles/loripsum.png)[Loripsum.net](https://loripsum.net/) 

## Image Placeholder

### 3. Picsum Photos

Menyediakan gambar acak atau bisa juga spesifik. Dengan ukuran yang bisa ditentukan dengan efek gambar yang bisa kita pilih juga.

![](https://api.dankedev.com/assets/articles/lorempicsum.png)[Picsum Photos](https://picsum.photos/)

### 4. Logo Ipsum

Variant logo yang sangat banyak dengan banyak tipe dengan format SVG.![](https://api.dankedev.com/assets/articles/logoipsum.png)[Logo Ipsum](https://logoipsum.com/)

### 5. DiceBear

DiceBar adalah placeholder Avatar dengan karakteristik terntentu yang tersedia API juga untuk diakses secara gratis.
![](https://api.dankedev.com/assets/articles/dicebear.png)[DiceBear](https://avatars.dicebear.com/)

### 6. Personas

A playful avatar generator for the modern age.

Placeholder avatar juga, tapi kamu bisa menggenerate avatar sesuai karakter yang kamu inginkan. Bisa memilih model rambut, warna kulit, mata dan lainya.
![](https://api.dankedev.com/assets/articles/personas.png)[Personas](https://personas.draftbit.com/)

### 7. Avataaars

Masih placeholder Avatar juga, seperti halnya Personas, tapi lebih banyak variant yang bisa kamu terapkan pada avatar yang ingin kamu gunakan. Tersedia juga react library yang bisa langsung digunakan pada project reactjs.
![](https://api.dankedev.com/assets/articles/avataaars.png)[Avataaars](https://getavataaars.com/)

### 8. Place Kitten

Gambar anak2 kucing untuk placeholder image.
![](https://api.dankedev.com/assets/articles/place-kitten.png)[Place Kitten](https://placekitten.com/)


### 9. CupCake Ipsum

Placeholder gambar kue.
![](https://api.dankedev.com/assets/articles/cupcake-ipsum.png)[CupCake Ipsum](http://www.cupcakeipsum.com/)

### 10. RoboHash

Placeholder gambar robot![](https://api.dankedev.com/assets/articles/robohash.png)[RoboHash](https://robohash.org/)

## JSON

### 11. Random User

Open Source API untuk menggenerate data user
![](https://api.dankedev.com/assets/articles/randomuser.png)[Random User](https://randomuser.me/)

### 12. JSON Placeholder

REST API yang bisa digunakan dimanapun dengan berbagai macam fake data.![](https://api.dankedev.com/assets/articles/json-placeholder.png)[JSON Placeholder](http://jsonplaceholder.typicode.com/)

### 13. Fake JSON

Gratis 1000 request JSON data dengan advance editor.

![](https://api.dankedev.com/assets/articles/fake-json.png)
[Fake JSON](https://fakejson.com/)

[Sumber Artikel](https://javascript.plainenglish.io/15-useful-placeholder-tools-for-designers-and-developers-deea3c410b6b)


Mempermudah proses design dan membangun aplikasi dengan menggunakan placeholder

13 Placeholder untuk Designer dan Developer


PHP localhost Server Terbaik

`localhost` adalah istilah yang digunakan untuk menyebutkan server lokal di komputer kita.

Pada dasarnya komputer adalah server, server adalah komputer. Akan tetapi term server sering kali digunakan untuk menyebut sebuah komputer yang isinya bisa di-akses secara publik.

Dengan localhost, kita menjadikan komputer kita sebagai sebuah virtual server yang bisa diakses secara lokal saja. Butuh pengaturan khusus lainya agar localhost di komputer kita bisa diakses oleh komputer lain. (saya belum pernah coba).

Untuk komputer dengan operating system linux dan mac `localhost` biasanya sudah bawaan dan tidak memerlukan software khusus agar bisa digunakan, termasuk windows pun sebenarnya juga sama, namun butuh sentuhan khusus juga agar `localhost` ini bisa digunakan dan bisa menjalankan script php.

Untuk itu, kita membutuhkan software tambahan. Selain sebagai localhost server, software ini nantinya juga akan mempermudah untuk menginstall dependency lain seperti apache, nginx, mariaDB, SQL, PHP, dan lainya.

Ada beberapa macam HTTP Server, tergantung pada kebutuhanya, misal untuk bahasa pemograman Web dengan PHP umumnya menggunakan Apache atau NGINX, NodeJS biasanya sudah built-in, demikian juga python, atau juga go-lang.

Kalau kamu hanya menggunakan nodejs dan mendevelop menggunakan JS Framework nodejs misalnya, maka kamu gak membutuhkan Apache/Nginx Web Server.

Namun pada pembahasan kali ini, kami akan membahas tentang Apache/Nginx Web Server. Karena ini sangat penting diketahui lebih awal agar nantinya ketika Anda mempraktekan tutorial dari kami bisa langsung di praktekan di komputer anda (_local machine_) terutama untuk panduan yang terkait dengan bahasa pemograman PHP.

## `localhost` server untuk apa?

Dalam pembahasan ini kita fokuskan `localhost` server ini cakupanya hanya untuk web development terkhusus `php`.

Karena untuk HTM kita tidak butuh software tambahan (seperti SQL, apache dll). Dan untuk bahasa javascript biasanya menggunakan `nodejs`.

Jadi, software localhost server ini adalah sebuah software untuk mengelola server lokal yang telah terintegrasi dengan apache atau nginx yang bisa menghubungkan komputer dengan browser sebagai web address (url).

## Perbedaan Apache dan NGINX

Apache sendiri adalah senior dari Nginx, dibuat tahun 1995 dengan lisensi Open Source yang artinya dikembangkan oleh komunitas.

Nginx (dibaca _en-jin-eks_) di bangun sekitar tahun 2004.

Keduanya bisa berjalan di multi platform seperti berbagai distribusi linux, windows, macOS. Dan server yang banyak digunakan untuk mengoperasikan Apache dan Nginx ini adalah Ubuntu dan CentOS (jika dilihat dari banyaknya penyedia hosting yang menawarkan httpd server ini).

Adapun perbedaan secara signifikan mungkin lebih kepada pemprosesan data nya. Nginx lebih dikenal dengan efesiensi cache nya (apa itu cache? nanti kita bahas di materi selanjutnya). Sementara Apache lebih dikenal dengan security dan kemampuan multi-proses nya.

Akan tetapi untuk masa sekarang ini, banyak yang memilih Nginx daripada Apache, dikarenakan Nginx dianggap lebih ringan prosesnya.
tentunya ini akan terasa ketika aplikasi web yang diproses sudah besar atau membutuhkan request yang sangat banyak dalam satu waktu.

Kalau masih sekala kecil sih mungkin tidak terlalu terasa ya...

Jadi singkatnya, secara umum Apache lebih banyak digunakan bagi yang fokus pada kustomisasi koneksi, serta sangat-sangat banyak dokumentasi nya sehingga memudahkan bagi pemula.
Sedangkan Nginx fokus pada kecepatan karena dia unggul dalam cache dan efesiensi memori. Namun beberapa pengguna mungkin harus memiliki effort lebih ketika terjadi trouble.

Selebihnya kamu bisa baca artikel perbandingan **Apache VS Nginx**
## Software localhost server pilihan

Berikut kami berikan pilihan terbaik yang bisa Anda gunakan, dengan menyebutkan kelebihan, kekurangan dan platformnya.

### 1. XAMPP

Xampp adalah program aplikasi pengembang yang berguna untuk pengembangan website berbasis PHP dan MySQL. 

#### Kelebihan

1. Instalasi mudah
2. Cross Platform 
3. Terintegrasi dengan banyak modul seperti OpenSSL, MediaWiki, Joomla, WordPress dll
4. Terintegrasi dengan phpMyAdmin

#### Kekurangan

1. Konfigurasi cukup sulit bagi pengguna baru
2. Tidak bisa membuat virtual host langsung

#### Platform

1. Windows
2. Linux
3. macOS

[Download XAMPP](https://www.apachefriends.org/download.html)
<details>
<summary> ℹ️ **Cara Install XAMPP** </summary>

Berikut Ini Cara Mudah Install XAMPP Di Komputer Windows Anda :

1. Download XAMPP
2. Setelah Anda mendownload XAMPP lakukan instalasi.
3. Klik tombol Next.
4. Kemudian pada tampilan selanjutnya akan muncul pilihan komponen dari XAMPP yang ingin Anda Install.
5. Di Tampilan Selanjutnya silahkan pilih folder tujuan XAMPP yang ingin diinstall.
	`contoh : C:\xampp`
6. Selanjutnya silahkan pilih bahasa, untuk pilihan hanya ada 2 yaitu bahasa inggris dan bahas jerman.
7. Menginstal Bitnami untuk XAMPP yang nantinya bisa Anda gunakan untuk install WordPress, Drupal, dan Joomla secara otomatis.
8. Pada proses ini instalasi XAMPP akan dimulai. Silakan klik tombol Next.
9. Proses instalasi sedang berjalan, silahkan tunggu hingga selesai.
10. Setelah Proses Instalasi selesai, Maka akan muncul notifikasi untuk langsung menjalankan control panel. Silakan klik Finish.
11. Setelah Aplikasi XAMPP terbuka kemudian jalan Apache dan MySQL. Apabila berhasil dijalankan, Apache dan MySQL akan berwarna hijau.
![](https://api.dankedev.com/assets/articles/11-jalankan-aplikasi-xampp.png)

Itulah Cara install XAMPP di Windows, Untuk melakukan pengecekan, silakan akses link berikut melalui browser Anda http://localhost.
</details>

### 2. WAMP

WAMP adalah singakatan dari  *Windows, Apache, Mysql, and PHP.* 
Seperti namanya, WAMP hanya bisa digunakan di Platform Windows saja.

#### Keunggulan

1. Tampilan simple dan mudah digunakan
2. Terintegrasi dengan phpMyAdmin
3. Mudah membuat virtual host
4. Mudah mengganti versi PHP

#### Kekurangan

1. Hanya bisa digunakan di OS Windows

#### Platform

1. Windows

[Download WAMP](https://www.wampserver.com)

<details>
<summary>ℹ️ Cara Install WAMP</summary>

1. Download WAMP Server
Untuk mendownload WAMP silahkan buka situs resmi WAMP. pastikan anda sudah tahu versi windows yang Anda gunakan adalah untuk 32 bit atau 64 bit.
Selanjutnya akan diarahkan pada halaman seperti di bawah ini.
Kemudian, akan muncul popup dan klik pada "beralih ke unduhan langsung" seperti pada gambar di bawah ini.
![](https://api.dankedev.com/assets/articles/1-popup-download.png)
2. Buka File setup instalasi WAMP Server kemudian pilih bahasa.
3. Pilih "I accept the agreement" untuk menerima license Agreement. Kemudian Klik Next.
4. Pada tampilan Selanjutnya silahkan pilih folder tujuan WAMP. Contoh c:\wamp64 Kemudian klik Next.
5. selanjutnya akan muncul pilihan komponen dari WAMP yang ingin Anda Install. Fungsi komponen adalah untuk memperlancar penggunaan WAMP Server dan mendukung file dengan kapasitas besar. Setelah selesai mememilih komponen klik Next.
6. Menentukan Nama Aplikasi, Anda bebas mengganti nama aplikasi tetapi, sebaiknya gunakan nama Wampserver64 agar lebih mudah saat mencari aplikasi ini.
7. Klik Install untuk mulai proses instalasi.
8. Proses instalasi sedang berjalan, silahkan tunggu hingga selesai.
9. Setelah proses instalasi selesai maka akan muncul pop up pilihan browser yang akan digunakan. Kemudian Klik Yes *Silahkan pilih default browser Anda dan klik Open untuk melanjutkan proses instalasi.*
10. Kemudian Silahkan pilih aplikasi Text Editor. Klik Yes
Silahkan pilih aplikasi Text Editor yang akan digunakan dan klik Open untuk melanjutkan
11. Silahkan tunggu hingga proses instalasi selesai dan klik Finish.

Demikian Cara Install WAMP Server di Windows, untuk mengecek WAMP buka WAMP Server dan tunggu hingga berjalan di komputer Anda.
Pada menu taskbar klik kiri icon WAMP Server dan klik menu localhost kemudian akan diarahkan pada halaman default WAMP Server.

</details>



### 3. Laragon

Laragon termasuk Aplikasi DesktopServer baru dibandingkan aplikasi lainya. Diklaim sebagai local server yang paling ringan, serta support untuk php, Node.js, Python, Java, Go dan Ruby.

#### Kelebihan

1. Auto SSL
2. Mudah membuat virtual host
3. Install Software seperti WordPress, Laravel, Lumen, CakePHP, Drupal dll dengan sekali klik (one click install)
4. Multi database platform (mysql, mongodb, postgressql dll)

#### Kekurangan

1. Hanya bisa digunakan di Windows

#### Platform

1. Windows

<details>
<summary>ℹ️ **Cara Install Laragon di Windows**</summary>

1. Download Laragon di web resminya
2. Pilih di bagian Edition, kemudian klik Download Laragon - Full (147 MB).
3. Setelah download selesai, buka file setup Laragon untuk memulai proses instalasi. kemudian pilih bahasa
4. Selanjutnya silahkan pilih folder tujuan Laragon C:\laragon. Klik Next untuk melanjutkan instalasi.
5. Tampilan selanjutnya pilihan mulai otomatis laragon, deteksi otomatis dan buat host virtual. Klik Next untuk melanjutkan.
6. Klik Install untuk mulai proses instalasi.
7. Proses instalasi sedang berjalan, silahkan tunggu hingga selesai.
8. Setelah proses instalasi selesai klik Finish.
9. Tampilan Laragon apabila proses install sudah selesai.
</details>

### 4. Laravel Valet

Valet adalah aplikasi development environment untuk macOS. Diklaim hanya menggunakan 7MB dari RAM, menjadikan valet adalah dev environment yang paling ringan. Wajar saja, karena tidak ada interface apapun alias semua dijalankan di terminal.

#### Kelebihan

1. Ringan digunakan
2. Berjalan dibawah nginx
3. Tidak perlu banyak pengaturan
4. Otomatis membuat virtual host berdasarkan nama folder juga bisa kustom

#### Kekurangan

5. Hanya berjalan di macOS
6. Tidak ada interface hanya bisa di operasikan via terminal

#### Platform

1. macOS

[Download dan Cara Install](https://laravel.com/docs/valet)

### 5. LocalWP 

LocalWP adalah localhost server khusus untuk WordPress, cukup jadi pilihan bagi Anda yang fokus ke pengembangan WordPress.

#### Kelebihan

1. Mudah digunakan
2. One Click Install
3. Cloud Backup
4. Terintegrasi dengan wp-cli

#### Kekurangan

5. Hanya bisa digunakan untuk WordPress


#### Platform

6. Windows
7. Linux
8. macOs

[Download LocalWP](https://localwp.com/)

<details>
<summary>ℹ️ **Cara Install LocalWP di Windows**</summary>

1. Download LocalWP Windows di web resminya.
2. Setelah mendownload file installer Localwp. silahkan install dengan cara dobel klik file tersebut.
3. Silahkan pilih folder tujuan LocalWP yang ingin diinstall. `C:\Users\DELL\AppData\Local\Programs\Local`. Kemudian Klik Install
4. Silahkan tunggu proses install hingga selesai.
5. Setelah selesai klik Finish.
6. Jalankan LocalWP klik **I AGREE**.
7. Kemudian Create a new site mulai membuat website baru.
8. Tuliskan nama website yang Anda inginkan. Contoh : `dankedev` maka Local akan otomatis memilihkan dankedev.local sebagai domain lokal yang nantinya bisa Anda akses dari Browser. Kemudian Klik continue.
9. Halaman selanjutnya berisi informasi tentang environment dari website yang akan Anda buat. Apabila tidak ada yang khusus, maka biarkan pilihan di Preferred. Kemudian Klik continue.
10. Silahkan tuliskan username dan password untuk website Wordpress. Klik Add Site.
11. Tunggu proses install dan setting website selesai.
12. Tampilan LocalWP apabila proses install dan setting website sudah selesai.
13. Silahkan buka website yang Anda buat dengan klik Open Site atau langsung di browser dankedev.local
</details>
### 6. MAMP

MAMP Server adalah aplikasi local server apache dan nginx yang bisa bergantian dengan mudah dirubah melalui interfacenya. Versi pro nya sangat powerful karena sangat memudahkan, seperti membuat virtual host, memilih versi php, memilih nginx atau apache dan lainya. 

#### Kelebihan

1. Tersedia versi lite dan pro
2. Versi pro sangat newbie friendly
3. Terintegrasi dengan code editor (built-in)
4. Snapshot project

#### Kekurangan

1. Tidak support untuk Linux
2. Versi lite nya tidak begitu lengkap

#### Platform

1. Windows
2. Linux

[Download MAMP](https://www.mamp.info/en/downloads/)

<details>
<summary> ℹ️ **Cara Install MAMP**</summary>

Cara Install MAMP di Windows

1. Download dahulu MAMP untuk Windows di website resminya 
2. Kemudian Setelah Download silahkan install dengan cara dobel klik file MAMP.
3. Pilih bahasa untuk memulai instalasi.
4. Klik Next untuk melanjutkan.
5. Tampilan selanjutkan akan ada pilihan untuk intall MAMP Pro, Anda bisa centang jika ingin install atau uncentang jika tidak ingin install MAMP berbayar.
6. Kemudian tekan I accept the agreement, lalu klik next.
7. Pilih direktori tujuan di mana Anda ingin menginstal MAMP. Sebaiknya biarkan sebagai lokasi default. Kemudian klik tombol Next.
8. Pilih folder Start Menu tempat MAMP berada, lalu klik next.
9. apakah Anda ingin membuat ikon di desktop dan klik next.
10. Kemudian akan disajikan dengan layar ringkasan. Apabila semuanya sudah benar tekan tombol Install.
11. Proses instalasi sedang berjalan, silahkan tunggu hingga selesai.
12. Setelah instalasi selesai Anda akan melihat layar seperti ini. Klik Finish.
13. Apabila Anda memasang ikon di desktop, Anda dapat mengklik dua kali ikon tersebut untuk memulai program. Jika tidak, temukan MAMP di bawah menu Start untuk memulai program.
14. Mulai server MAMP dengan mengklik tombol daya "Start Servers". Ini akan berubah menjadi hijau ketika server telah diaktifkan.
15. MAMP juga akan meluncurkan halaman Web Start Page. Web Start Page merupakan beranda untuk instans MAMP lokal Anda.
16. Klik menu "My Website" untuk melihat situs web Anda. Saat ini situs web Anda tidak menghosting halaman apa pun saat ini. Untuk itu buka jendela file explorer dan arahkan ke direktori c:\MAMP\htdocs. Buat atau salin halaman web sederhana di direktori itu dan simpan sebagai index.html sehingga mengunjungi tautan "My Website" akan membawa saya ke halaman ini.
17. Untuk menggunakan MySQL, Anda harus menggunakan layanan phpMyAdmin yang terinstal. Kunjungi phpMyAdmin dari "My Tools menu" di halaman Web "Start Page".
18. Klik pada SQL untuk membuka textarea input SQL. Masukkan beberapa SQL dan tekan Go di sudut kanan bawah.

Demikian Cara Install MAMP di Windows, Kami juga sudah jelaskan diatas cara penggunaannya. Semoga bermanfaat.
</details>

### 7. AMPPS

AMPPS merupakan singaktan dari  Apache, MYSQL, PHP , PERL, Python, dan Softaculous.  Web server ini dibuat oleh Softaculous dan juga digunakan oleh cPanel yang sering digunakan di web server atau hosting provider.

AMPPS dapat berjalan di Windows, Linux atau pun Mac OS X. Selain itu, karena memiliki fitur Softaculous auto installer, dengan menggunakan AMPPS, Anda dapat memasang berbagai aplikasi web seperti WordPress, Joomla, dan Drupal secara mudah cukup sekali klik saja.

#### Kelebihan

1. Tersedia versi lite dan pro
2. Fitur lengkapnya terbatas untuk pro saja
3. One Click App Install (Bisa install framework dengan mudah)

#### Kekurangan
1. Lumayan memakan space
2. Versi berbayarnya cukup mahal

#### Platform
1. Windows
2. Linux
3. macOS

[Download AMPPS](https://ampps.com/downloads)


Masih banyak lagi aplikasi alternative yang bisa digunakan untuk mengelola local server. Masing-masing memiliki kelebihan dan kekurangan. Maka pilihlah sesuai dengan kebutuhan Anda.


Macam-macam Aplikasi Local Web Server (localhost) pilihan terbaik

7 Aplikasi Local Web Server (localhost) Terbaik

Terkadang kita membutuhkan custom interval atau durasi untuk cron pada WordPress dijalankan.

Namun sebelum lebih lanjut membahas cara membuat custom inteval WordPress cron Schedule, kita perhatikan dulu function utama dari `wp_schedule_event`

```php
    wp_schedule_event( $timestamp, $recurrence, $hook, $args);
```


Kita lihat dulu detail parameternya

1.  `$timestamp` adalah waktu pembanding awal kapan cron tersebut akan dijalankan. Biasa yang digunakan adalah waktu saat ini dan Anda bisa menggunakan fungsi `time()` untuk mengisinya
2.  `$recurrence` berisikan string yang mendefinisikan kapan cron akan dijalankan, WordPress menyediakan tiga nilai yakni _hourly_ (setiap jam), _twicedaily_ (sehari dua kali) dan juga _daily_ (sehari satu kali). Dan bagian ini yang akan menjadi pembahasan utama kita. Yakni membuat custom `$recurrence` sesuai dengan kebutuhan kita
3.  `$hook` adalah nama function yang akan Anda jalankan.
4.  $`args` adalah argumen parameter yang akan Anda jalankan di $hook tadi. Kami jarang memakainya jadi tidak bisa menjelaskan lebih lanjut. Karena contoh2nya pun jarang ada.

Contoh penggunaaan Schedule Event
```php

    register_activation_hook( __FILE__, 'dankedev_plugin_activation' );
    
    function dankedev_plugin_activation() {
        if ( ! wp_next_scheduled( 'wpshout_do_thing' ) ) {
            wp_schedule_event( time(), 'daily', 'hook_dankedev_daily_backup_db' );
        }
    }
    
    
    add_action('hook_dankedev_daily_backup_db', 'do_dankedev_daily_backup_db');
    
    function do_dankedev_daily_backup_db()
    {
        // do what you will do
    }

```

Membuat Custom Internval Cron Job WordPress
-------------------------------------------

Pada dasarnya waktu yang digunakan untuk cron job WordPress adalah **second**, jadi nilai dari hourly adalah 60×60 (3600 second).

### Custom Interval Cron Job Weekly

```php
    function custom_cron_job_weekly( $schedules ) {
        if(!isset($schedules['weekly'])){
            $schedules['weekly'] = array(
                'display' => __( 'Once a week', 'textdomain' ),
                'interval' => 60*60*24*7,
            );
        }
    
        return $schedules;
    }
    add_filter( 'cron_schedules', 'custom_cron_job_weekly' );

```

### Custom Interval Cron Job Monthly
```php

    function custom_cron_job_monthly( $schedules ) {
        if(!isset($schedules['monthly'])){
            $schedules['monthly'] = array(
                'display' => __( 'Once a month', 'textdomain' ),
                'interval' => 60*60*24*30,
            );
        }
    
        return $schedules;
    }
    add_filter( 'cron_schedules', 'custom_cron_job_monthly' );
```


### Custom Interval Cron Job Yearly

```php
    function custom_cron_job_yearly( $schedules ) {
        if(!isset($schedules['yearly'])){
            $schedules['yearly'] = array(
                'display' => __( 'Once a year', 'textdomain' ),
                'interval' => 60*60*24*365,
            );
        }
    
        return $schedules;
    }
    add_filter( 'cron_schedules', 'custom_cron_job_yearly' );

```

Atau agar lebih mudah Anda bisa gabungkan dalam satu functions
```php

    function custom_cron_job_time( $schedules ){
       if(!isset($schedules['weekly'])){
            $schedules['weekly'] = array(
                'display' => __( 'Once a week', 'textdomain' ),
                'interval' => 60*60*24*7,
            );
        }
    
       if(!isset($schedules['monthly'])){
            $schedules['monthly'] = array(
                'display' => __( 'Once a month', 'textdomain' ),
                'interval' => 60*60*24*30,
            );
        }
    
      if(!isset($schedules['yearly'])){
            $schedules['yearly'] = array(
                'display' => __( 'Once a year', 'textdomain' ),
                'interval' => 60*60*24*365,
            );
        }
    
        return $schedules;
    }
    
    add_filter( 'cron_schedules', 'custom_cron_job_time' );
```


Selebihnya tinggal anda gunakan di cron schedule yang Anda buat

```php
    wp_schedule_event( time(), 'monthly', 'hook_dankedev_daily_backup_db' );
```



Custom WordPress Schedule interval Weekly, Monthly, or Yearly


Belakangan ini sedang hangat perbincangan tentang profesi SEO Specialist yang harus memiliki serfikasi uji kelayakan dari Lembaga Negara Republik Indonesia.

Tanpa melihat berbagai kontroversi (dan ini sudah biasa terjadi), maka siapapun yang ingin menjadi SEO Specialist maka memang harus punya kompetensi terkait SEO.

Ya kan gak mungkin mau jadi AHLI tapi tidak tahu ilmunya. 🙂

Untuk itu, saya mencoba membedah dulu beberapa hal teoritis terkait SEO dan kemudian akan menjelaskan apa saja syarat-syarat minimal untuk bisa lulus menjadi SEO Spesicialist.

## 1. Definisi


Jangan sampai salah persepsi atau salah tafsir mengenai apa itu SEO, karena perbedaan definisi seringkali menjadi sumber gagal-paham alias tidak nyambung dengan tujuanya.

**Jadi apa itu SEO?**

Agar pemahaman kita standard, maka saya ambil rujukan dari beberapa website yang kredible dan memang berfokus pada SEO

> SEO stands for **search engine optimization**, which is a set of practices designed to improve the appearance and positioning of web pages in organic search results.
> 
> [moz.com](https://moz.com/learn/seo/what-is-seo)

> SEO stands for “search engine optimization.” In simple terms, it means the process of improving your site to increase its visibility when people search for products or services related to your business in Google, Bing, and other search engines.
> 
> [searchengineland.com](https://searchengineland.com/guide/what-is-seo)

> Search engine optimization (SEO) refers to the process of improving your site’s organic traffic and ranking on search engines such as Google, Bing, and other search engines. 
> 
> [semrush.com](https://www.semrush.com/blog/what-is-seo/)

> SEO (Search Engine Optimization) is the practice of optimizing a website or webpage to increase the quantity and quality of its traffic from a search engine’s organic results. 
> 
> [ahrefs.com](https://ahrefs.com/blog/what-is-seo/)

Dari beberapa penjelasan istilah tersebut, maka dapat kita simpulkan garis besarnya adalah:

**SEO atau (Search Engine Optimization)** adalah sebuah upaya pengoptimalan website atau halaman web agar mendapatkan posisi terbaik di mesin pencari seperti Google, Bing, dan mesin pencari lainya.

Dengan demikian, berarti ada upaya-upaya khusus untuk melakukan SEO ini baik secara off-page atau on-page (istilah istilah ini akan saya jelaskan kemudian dibawah ya…)

## 2. Tujuan Menggunakan SEO

Dari pengertian di atas, rasayanya sudah cukup jelas bahwa tujuan kita melakukan optimasi website adalah untuk mendapatkan pengunjung (traffic/visitor) melalui posisi atau rangking di mesin pencari.

Kemudian pengunjung atau traffic tersebut ya bebas mau diarahkan kemana, apakah mau diarahkan untuk membeli atau hanya sekedar lihat lihat terus klik iklan :).

Menurut saya yang jadi tujuan utama dari SEO tetaplah Revenue, meskipun terkadang revenue tersebut baru bisa didapatkan setelah user melewati beberapa step (funneling).

**Jadi tidak ada artinya kalau kita diposisi pertama pada pencarian kata kunci tertentu, namun ternyata tidak mendapatkan pengunjung dari situ.**

Apakah ada yang diposisi satu google tapi tidak dapat pengunjung?

Ya ada dong, nanti kamu akan tahu sendiri kalau sudah berkecimpung di dunia SEO.

Cukup jelas kan?

## 3. Cakupan SEO


Kembali melihat pada definisi, cakupan SEO adalah seputar WEB dan Search Engine.

Entah apapun jenis web nya, atau platform nya. Bisa aja kita sebut aktifitas SEO itu untuk mengoptimasi Video Youtube, atau Produk di Market place, atau bahkan tulisan kita di Facebook.

Maka akan tetap dikatakan aktifitas SEO jika kita melakukan optimasi pada platform Web tersebut meski kita bukan pemilik dari website tersebut secara langsung.

Adapun Search Engine, sebenarnya bukan pilihan. Karena kita tidak bisa mengontrol secara langsung prilaku search engine (mesin pencari) ini. Akan tetapi ada kiat-kiat khusus untuk bisa menaklukan search engine tertentu baik itu dengan cara yang benar ataupun dengan cara yang salah atau dilarang.

## 4. Alasan Kenapa harus Menggunakan SEO

Alasan utamanya adalah behaviour pengguna internet yang ingin dijadikan target audience oleh pemilik website/konten.

Seperti kita tahu, bahwa mungkin bisa dikatakan lebih dari 80% orang ketika menginginkan suatu informasi, produk, video, dll pertama kali mereka akan menggunakan kolom pencarian di browser.

Sisa dari 80% ini kemungkinan yang mereka langsung mencari di social media, atau langsung di marketplace ketika ingin melakukan pencarian.

Note: angka 80% ini saya kira2 sendiri ya. jadi jangan tanya sumber darimana. Tapi point intinya adalah kebanyakan orang mencari menggunakan search engine.

**Ok, kembali ke topik utama.**

Dengan mengetahui 4 hal diatas. maka sebanarnya SEO itu adalah sesuatu yang simple secara teori. Akan tetapi pada prakteknya akan sangat banyak kesulitan karena adanya alogaritma atau metode mesin pencari dalam melakukan rangking sebuah web.

Contohnya google setiap tahun tau kadang kurang dalam setahun melakukan perubahan alogaritma yang sering membuat kalang kabut “pemain SEO”. Yang saya masih ingat ada namanya panda, huming bird. Selebihnya saya tidak begitu mengikuti.

## **Lalu bagaimana Sayratnya agar bisa menjadi SEO Spesialist?**

### 1. Harus Punya Ilmu Teori


Karena mungkin akan muncul ketika test atau dengan paham teorinya kamu juga bisa menjelaskan dengan mudah kepada client.

Kalau kamu ingin menjadi pelaku SEO tanpa harus mendapatkan gelar Spessialis, maka tentunya teori tidak dibutuhkan. yang penting prakteknya kamu berhasil.

### 2. Punya Kemampuan Analisis


Salah satu faktor keberhasilan pemain SEO adalah kemampuan mereka dalam menganalisa. Bukan hanya menganalisa hari ini traffic naik, besok turun, besok naik lai. Bukan itu saja tentunya.

Akan tetapi yang lebih penting adalah mengalaisa seluruh kegiatan optimilasisai dengan membandingkan hasil yang dicapai seperti traffic, sales, awarnes dll.

Sehingga kemudian seorang Spesialis dituntut untuk memutuskan tehnik A cocok untuk website tipe O, tehnik B cocok untuk konten tipe X. (ini hanya contoh ya).

Dalam berbagai kasus juga, seorang SEO Specialist juga harus bisa menganalisa web yang akan dioptimasi, dan ini berkaitan dengan istilah “On-Page Optimization” seperti yang saya sebut diatas. diantanya

1.  Kecepatan Website/Landing Page
2.  HTML tag yang digunakan di website tersebut
3.  Meta Optimization
4.  Keyword Optimization
5.  User Experience
6.  dll

Meski tidak harus ahli dalam hal coding (karena beberapa hal di atas ada kaitanya dengan code), Seorang SEO Spesicialist harus tahu itu semua. Karena tentunya diantara faktor utama mesin pencari merangking website kita adalah dari “On-Page” ini.

Dan bicara soal Meta Optimiztion, kamu bisa pakai tools buatan kami “[Meta Tags Generator](https://tools.dankedev.com/seo/meta-tag-generator)” untuk membantu mengoptimasi meta tags kamu

Sementara untuk analisis lainya yang diperlukan adalah External Factor. Yang nantinya bisa digunakan untuk mengoptimasi website dari luar atau istilahnya adalah “Off-Page Optimization”, dimana seorang spesialis harus bisa memetakan kompetitor, kemudian melihat kekuatan kompetitor dan bagaimana menyamakan kedudukan website kita secara SEO Factor seperti dengan “Backlink” atau lainya.

### 3. Punya Kemampuan Teknis

Yang ini sudah pasti harus juga ya, masa spesialis gak bisa teknis?

Meskipun nantinya bukan hanya kamu yang mengerjakan campaign SEO tersebut (misal dengan team), kamu tetap wajib bisa masalah teknis.

Kan gak lucu kalau dikatakan SEO Specialist tapi tidak bisa memasang kode analytic. 🙂

Dengan menggabungkan antara kemampuan teoritis dan teknis, maka seorang SEO Specialist bisa membuat sebuah strategi SEO yang tepat.

### 4. Memiliki Portofolio

Nah ini penting juga, Kamu harus memiliki portofolio keberhasilan yang menunjukan kamu memang layak disebut Spesialis SEO.

Dan portofolio terbaik adalah bukti nyata bahwa dengan campaign SEO yang kamu jalankan, sebuah website tersebut mendapatkan revenue yang maksimal dengan campaign tersebut.

Dan salah satu portofolio yang bisa kamu tampilkan juga adalah pengakuan dari pihak kredibel lain akan ke-ahlian mu dibidang SEO misalnya dari hasil mengikuti ujian sertifikasi yang diselenggarakan oleh lembaga kursus SEO atau dari praktisi SEO.

Semakin banyak portofilio yang kamu miliki, tentunya akan menjadi pertimbangan khusus bagi yang menilai atau akan menggunakan jasamu.

Sementara Kontes SEO, menurut saya yang pantas menggunakan portofolio tersebut adalah penyelenggara atau SEO Planner nya. Karena peserta kontes hanyalah media atau alat untuk mencapai tujuan SEO itu sendiri.

* * *

Demikian kira-kira pembahasan sedikit seputar SEO. Untuk guidline seo sendiri kamu bisa baca langsung dari [sini](https://developers.google.com/search/docs/beginner/seo-starter-guide) atau dari [sini](https://static.googleusercontent.com/media/www.google.co.id/id/id/intl/id/webmasters/docs/search-engine-optimization-starter-guide-id.pdf)

Terakhir, bahwa kembali pada tujuan SEO adalah mendapatkan revenue yang maksimal. Artinya tidak hanya SEO yang bisa digunakan untuk mendapatkan renvenue maksimal, bisa jadi menggunakan SEM atau paid traffic lainya seperti facebook ads, tiktok ads dll.

Dan apapun teknik SEO yang nantinya diterapkan untuk mencapai tujuan tersebut, yang terpenting adalah cara tersebut benar dan legal.

Terimakasih sudah membaca ya ….


Mau jadi spesialis SEO? Kamu harus tahu dulu cara agar lulus jadi SEO Specialist.

Syarat Minimal “Lulus” Sertifikasi SEO Specialist


Beberapa library JavaScript baru di NPM memerlukan versi Node.js terbaru, jadi Anda harus terus memperbarui Node.js Anda. Mari kita lihat cara termudah untuk melakukannya di macOS Anda!

### 1. Buka Terminal dan Cek versi Node.Js

```bash
$ node -v
v 16.x.x```
```


### 2. Install `n` Package dengan `npm` jika Anda belum menginstallnya

```bash
$ sudo npm cache clean -f 
$ sudo npm install -g n```
```

### 3. Kemudian, Anda dapat mengupdate versi nodeJs sesuai kebutuhan Anda

**Versi Stable** (Rekomended)

```bash
$ sudo n stable
```
**Versi Terbaru** (terkadang beberapa library belum support)

  ```bash
$ sudo n latest```
````

Jika anda menggunakan versi terbaru, terkadang akan menadapatkan notice “The engine “node” is incompatible with this module”. Bisa di akali dengan flag `--ignore-engines`

**Versi LTS** (Long Term Support)

Versi yang paling recommended untuk production

```bash
$ sudo n lts
```

### 4. Terakhir, cek apakah update berhasil

```bash
$ node -v
v x.x.x
```

Demikian, semoga bermanfaat


Beberapa library JavaScript baru di NPM memerlukan versi Node.js terbaru, jadi Anda harus terus memperbarui Node.js Anda. Mari kita lihat cara termudah untuk melakukannya di macOS Anda!

Cara Mudah Upgrade Versi NodeJS di MacOS


Sedikit catatan dari contoh penggunaan sehari-hari code javascript dengan standard ES6,

### Arrow Function
```javascript

    const sum = (a,b) => a + b;
    console.log(sum(2,6)) // prints 8

```

### Default Parameters

```javascript
    function print(a = 5) {
       console.log(a)
    }
    
    print() // prints 5
    print(22) // prints 22

```

### Let Scope

```javascript
    let a = 3
    if (true) {
      let a = 5
      console.log(a) // prints 5
    }
    console.log(a) // prints 3

```

### Const
```javascript
    // can be assigned only once
    const a = 55
    a = 44 // throws an error

```

### Multi-line String

```javascript
    console.log(
      `This is a
      multi-line string`
    )
```

### Template String

```javascript
    const names = "World"
    const message = `Hello ${names}`
    console.log(message)
    
    // prints "Hello World"

```

### Exponent Operator

```javascript
    const byte = 2 ** 8
    
    // expected result = 256
    
    // Same as: Math.pow(2, 8)

```

### Spread Operator

```javascript
/* Ini sama dengan `array_merge($arr1,$arr2)` pada php */

    const a = [ 1, 2 ]
    const b = [ 3, 4 ]
    const c = [ ...a, ...b ]
    
    console.log(c) 
    
    // [1, 2, 3, 4]

```

### String Includes()
```javascript

    console.log('Dankdev'.includes('s'))
    
    // prints true
    
    console.log('Dankdev'.includes('m'))
    
    // prints false
    
    
    
    // includes() method ini case sensitive, contohnya 
    console.log('Dankdev'.includes('E'))
    
    // prints false
    
    console.log('Dankdev'.includes('D'))
    // prints true
    

```
### String startsWith()

```javascript
    console.log('Dankedev'.includes('Da'))
    
    // prints true
    
    console.log('Dankedev'.includes('an'))
    
    // prints false

```

### String repeat()
```javascript
    console.log('ha'.repeat(3))
    
    // prints "hahaha"

```

### Destructuring array

```javascript
    let [a,b] = [3,7];
    
    console.log(a); // 3
    console.log(b); // 7

```

### Destructuring object

```javascript
    let obj = {
      a: 77,
      b: 66
    };
    
    let { a,b } = obj;
    
    console.log(a); // 77
    console.log(b); // 66

```

### Object Property Assignment

```javascript
    const a = 2
    const b = 5
    
    const obj = { a, b }
    
    // Before es6:
    // obj = { a: a, b:b }
    
    console.log(obj)
    
    // prints { a:2, b:5 }

```

### Object.assign()

```javascript
    const obj1 = { a: 1 }
    const obj2 = { b: 2 }
    
    const obj3 = Object.assign({},
          obj1, obj2)
    
    console.log(obj3)
    // { a: 1, b: 2 }

```

### Promises with finally

```javascript
    Promise
    
     .then((result) => { ... })
     .catch((error) => { ... })
     .finally(() => { /* logic independent of success/error */ })
    
     /* The handler is called when the promise is fulfilled or rejected. */
    
    //biasa dipakai saat menggunakan async dan await pada saat kita melakukan request dengan fetch atau ketika menggunakan axios

```

### Spread Operator

```javascript
    const a = {
      firstName: "Hadie",
      lastName: "Danker",
    }
    
    const b = {
       ...a,
      lastName: "Abu Arsy",
      canSing: true,
    }
    
    console.log(a)
    
    //{firstName: "Haddide", lastName: "Danker"}
    
    
    console.log(b)
    
    /* {firstName: "Hadie", lastName: "Abu Arsy",
       canSign: true} */
    
    // cara ampuh untuk memodifikasi object tanpa harus mempengaruhi object aslinya

```

### Destructuring Nested objects

```javascript
    const Person = {
      name: "Hadie Danker",
      age: 17, // :)
      sex: "male",
      maritalstatus: "single",
      address: {
      country: "ID",
      state: "South Sumatrea",
      city: "OKU",
      pincode: "123456",
     },
    };
    
    const { address: { state, pincode }, name } = Person;
    
    console.log(name, state, pincode)
    
    // Hadie Danker South Sumatera 123456
    
    console.log(city) // ReferenceError

```

### Object function assignment

```javascript
    const obj = {
      a: 5,
      b() {
      
     console.log('b')
    
     }
    }
    
    obj.b() // prints "b"

```

### Object.entries()

Looping object as array entries
```javascript
    const obj = {
      firstName: "Hadie",
      lastName: "anker",
      age: 17,
      country: "Indonesia",
    };
    
    const entries = Object.entries(obj);
    
    console.log(entries)
    
    /* prints [
    
       ['firstName', 'Hadie'],
       ['lastName', 'Danker'],
       ['age', 23],
       ['country', 'Indonesia']
    
      ];
    
    */

```


### Object.keys()

Looping object as array keys

```javascript

    const obj = {
      firstName: "Hadie",
      lastName: "Danker",
      age: 17,
      country: "Indonesia",
    };
    
    const keys = Object.keys(obj);
    
    console.log(keys);
    
    /* prints [
    'firstName',
    'lastName',
    'age',
    'country'
      ];
    
    */

```

### Sorting Array

```javascript
    // Sorting Ascending
    const arr = [40, 100, 1, 5, 25, 10];
    arr.sort((a,b) => a - b)
    
    console.log(arr)
    /*
    [
        100,
        40,
        25,
        10,
        5,
        1
    ]
    */
    
    
    // Sorting Descending
    arr.sort((a,b) => b - a)
    
```

### Sorting Multidimensional Array

```javascript
    	const Categories = [
    		{
    			id:10,
    			name:'PHP'
    		},
    		{
    			id:5,
    			name:'JavaScript'
    		},
    		{
    			id:30,
    			name:'Go'
    		},
    	]
    	
    	// Sorting Ascending
    	Categories.sort( (a,b) => a.id - b.id);
    	
    	console.log(Categories);
    	
    	
    	//Sorting Descending
    
    	Categories.sort( (a,b) => b.id - a.id);
    
    	console.log(Categories);

```

Demikian catatan singkat tentang cheatset code javascript dengan standard es6 yang biasa saya gunakan. Semoga bermanfaat.


Sedikit catatan dari contoh penggunaan sehari-hari code javascript dengan standard ES6,

JavaScript – ES6 Cheat Sheet

Salah satu cara meningkatkan kepercayaan calon pembeli adalah dengan “Social Proof”, dan Sales Proof adalah salah satu metoded untuk menonjolkan social proof kepada calon pelanggan kita.

Apa itu sales pop?
------------------

Sales pop adalah pop-up kecil yang tampil umumnya di pojok bawah website dengan posisi fixed. contohnya seperti ini

![](https://api.dankedev.com/assets/articles/membuat-sales-pop-laravel-dengan-alpinejs.webp)



Data yang ditampilkan berganti-ganti, biasanya diambil secara random dengan batas waktu tertentu misalnya data satu bulan terakhir.

Oke langsung saja kita mulai.

Disini kami menggunakan tailwindcss untuk styling nya, dan pastinya menggunakan library javascript alpinejs.

### Step 1 : Buat format html nya

```html
    <div  x-data="salesProof">
        <div  x-show="show" 
              class="fixed bottom-5 left-5 max-w-md z-50 h-20 w-auto">
            <div class="w-full rounded-lg bg-white shadow-md flex items-center px-3 py-1 space-x-2">
                <div class="w-12 h-12 bg-indigo-600 rounded-full bg-cover bg-center bg-no-repeat"     :style="'background-image: url(\'' + user?.photo_url + '\');'"></div>
                <div class="flex-grow leading-none">
                    <div class="font-bold line-clamp-1 mb-0.5" x-text="user.name">H****</div>
                    <div class="text-xs text-gray-600" x-text="user.order">Order paket 1 tahun</div>
                    <div class="text-xs text-gray-600" x-text="user.order_date"></div>
    
                </div>
                <div class="w-6"></div>
            </div>
        </div>
    </div>
```


Keterangan Kode

1.  `x-data="salesProof"` adalah alpine component salespop

2\. `x-show="show"` ini untuk menampilkan dan menyembunyikan sales pop

3\. `:style="background-url....` untuk menampilkan avatar atau user profile

4\. `x-text="user.name"` , `x-text="user.order"` dan `x-text="user.register"` adalah text yang akan tampil nantinya

### Step 2 : Kita buat directive function untuk component saleesProof

```javascript
      Alpine.data('salesProof', function () {
       // kode nya nanti disini
      })
```



Kemudian kita definisikan default value nya

```javascript
Alpine.data('salesProof', function () {
            return {
                user: {
                    name:'Someone in Aceh',
                    order_date:'1 jam yang lalu',
                    order:'baru saja bergabung'
                },
                show: false,
                init() {
                   
                },
                async getUser() {
                  
                }
            }
        });
    
```




Kita ambil data dengan menggunakan getUser, namun sebelumnya kita perlu Controller dan route API atau Ajax route terlebih dahulu:

### Step 3 : Buat Route dan Controller getUser

```bash
php artisan make:controller AjaxSalesProofController
```

  ```php
<?php
    namespace App\Http\Controllers;
    
    use App\Http\Controllers\Controller;
    use App\Models\Order;
    use Illuminate\Http\Request;
    
    class AjaxSalesProofController extends Controller
    {
    
        public function getUser()
        {
           $response = [
                'success' => false,
                'data' => null
            ];
                 $order = Order::query()->with(['user','product'])->inRandomOrder()->first();
                 if($order){
                    $response['success'] = true;
                    $user = $order->user;
                    $user->order_date = $order->created_at->diffForHumans();
                    $user->photo_url = 'https://ui-avatars.com/api/?name='.str_replace('*','',$user->name).'&background=random';
                    $user->order = $order->product->name;
    $response['data'] = $user;
                 }
    
        }
    

```

PHP

Copy

Route

```php
    Route::get('/ajax/sales-proof',[\App\Http\Controllers\AjaxSalesProofController::class,'getUser']);
```
    


### Step 4 : Kita selesaikan alpine componen nya

```javascript
    ....
    ....
          async getUser() {
                  await window.axios.get('/ajax/sales-proof')
                        .then(res => {
                            if (res.data.success) {
                                this.user = res.data.data;
                                this.show = true;
                            }
                        })  
                }

```


### Step 5 : Buat Interval sales pop-nya

```javascript
init() {
                    setInterval(async () => {
                        await this.getUser()
    
                    }, 10000);
    
                    setInterval(async () => {
                        this.show = false
    
                    }, 5000);
    
                },

```


Maka kode lengkap javascriptnya seperti ini

```javascript
     Alpine.data('salesProof', function () {
            return {
                user: {
                    name:'Someone in Aceh',
                    order_date:'1 jam yang lalu',
                     order:'baru saja bergabung'
                },
                show: false,
                init() {
                    setInterval(async () => {
                        await this.getUser();
                    }, 10000);
    
                    setInterval(async () => {
                        this.show = false;
                    }, 5000);
    
                },
                async getUser() {
                    await window.axios.get('/ajax/sales-proof')
                        .then(res => {
                            if (res.data.success) {
                                this.user = res.data.data;
                                this.show = true;
                            }
                        })
    
                }
            }
        });

```

Anda bisa mengembangkan lebih lanjut lagi dengan ide-ide keren lainya. misalnya membatasi sales pop tampil berapa kali dalam satu kali session, atau range date data order yang diambil dll.

Semoga bermanfaat, dam salam koding selalu

Catatan:

Library terkait

1.  [Laravel](https://laravel.com/)
2.  [AlpineJS](https://alpinejs.dev/start-here)
3.  [Axios](https://axios-http.com/docs/intro)

Membuat Sales Pop Laravel dengan AlpineJS

Terkadang kita memerlukan sebuah kondisi dimana harusa mengeksekusi sebuah logical dengan membedakan jenis device apakah dia di mobile atau desktop.

Dengan menggunakan javascript, kita bisa mendeteksi hal tersebut dengan beberapa cara, diantaranya

1\. Dengan Mendeteksi Ukuran Screen nya
---------------------------------------

    if(window.matchMedia("(max-width: 767px)").matches){
            // The viewport is less than 768 pixels wide
            alert("This is a mobile device.");
        } else{
            // The viewport is at least 768 pixels wide
            alert("This is a tablet or desktop.");
        }

JavaScript

Copy

Rata-rata screen pada mobile berada dibawah 700an Pixel, akan tetapi kondisi seperti ini terkadang terkecohkan ketika ternyata ada user yang dengan sengaja mengecilkan ukuran window pada browsernya.

Akan tetapi ini cukup mudah, atau mungkin juga diperlukan ketika Anda hanya menginginkan melihat screen nya saja. Biasanya digunakan untuk layouting.

2\. Dengan mendeteksi User Agent
--------------------------------

Kode dasar untuk mendeteksi user agent dengan javascript adalah `navigator.userAgent` maka kita bisa memanfaatkan hasil dari user agent tersebut dengan melihat apakah user agent nya ini biasa digunakan untuk mobile atau desktop.

    let isMobile = false; //initiate as false
    // device detection
    if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
        || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
        isMobile = true;
    }
    
    console.log(isMobile)
    

JavaScript

Copy

3\. Mendeteksi apakah Devicenya Touch Screen atau Bukan
-------------------------------------------------------

    function isMobile() {
      try{ document.createEvent("TouchEvent"); return true; }
      catch(e){ return false; }
    }
    
    console.log(isMobile())

JavaScript

Copy

Ya, kendalanya sekarang sudah banyak laptop yang juga touch screen. Tapi ini juga cukup membantu kalau mau lebih berexperiment

4\. Megabungkan dari ke-3 Cara di atas
--------------------------------------

    let isMobile = window.matchMedia("(max-width: 767px)").matches && /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
        || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))&& 'ontouchstart' in document.documentElement;
    
    
    console.log(isMobile)

JavaScript

Copy

5\. Dengan Library `mobile-detect.js`
-------------------------------------

Terakhir adalah menggunakan library mobile-detect.js, ini menurut saya langkah akhir jika ke-4 cara tersebut ternyata tidak sesuai dengan kebutuhan Anda.

Cukup install dan import saja, jalanakan

    npm install mobile-detect --save

Bash

Copy

Atau dengan yarn

    yarn add mobile-detect

Bash

Copy

Kemudian jalankan

    let md = new MobileDetect(window.navigator.userAgent);
    console.log(md)
    

JavaScript

Copy

Tergantung pada kebutuhan project Anda, Bebas menggunakan yang mana saja asalkan work dan bisa berjalan sesuai yang Anda harapkan.

Semoga bermanfaat

Belajar jadi Web Programmer Handal

Artikel Terbaru