[solved] bagaimana cara redirect dengan file htaccess ?

kapan perlu redirect ?

Ketika anda punya broken link yang ingin supaya link nya  dapat dipakai lagi, semisal karena sudah terindex oleh google. Bisa juga karena web anda sedang maintenance sementara sehingga redirect kehalaman maintenance agar pengunjung dapat info.
Okey… disini saya anggap temen2 sudah tau apa itu file htaccess, karena kita akan langsung kepada intinya. Bagi yang belum mengetahui tentang htaccess bisa baca-baca disini.

persiapan

pertama kita buat dulu file .htaccess lalu taruh di root directory web kita atau folder yang membutuhkan, misal kalau menggunakan wordpress file .htaccess sejajar dengan folder wp-content wp-include dll. lalu file .htaccess itu akan kita isi dengan script untuk redirect. berikut macam-macam cara redirect dengan file .htaccess

301 (Permanent) Redirect

Redirect seluruh URL website ke URL  yang berbeda secara permanent. Contohnya kita redirect ke domain qodrbee.com

# This allows you to redirect your entire website to any other domain
Redirect 301 / http://qodrbee.com/

 

302 (Temporary) Redirect

Redirect seluruh URL website ke URL  yang berbeda secara sementara. Ini berguna untuk tujuan SEO ketika anda punya landing page sementara dan berencana nanti akan kembali ke landing page utama. Contohnya kita redirect ke domain qodrbee.com

# This allows you to redirect your entire website to any other domain
Redirect 302 / http://qodrbee.com/

 

Redirect index.html ke specific subfolder

# This allows you to redirect index.html to a specific subfolder
Redirect /index.html http://qodrbee.com/newdirectory/

 

Redirect file lama ke file baru

# Redirect old file path to new file path
Redirect /olddirectory/oldfile.html http://qodrbee.com/newdirectory/newfile.html

 

Redirect ke specific index page

# Provide Specific Index Page (Set the default handler)
DirectoryIndex index.html

 

Redirect non-www ke www .htaccess

RewriteCond %{HTTP_HOST} ^qodrbee.com [NC]
RewriteRule ^(.*)$ http://www.qodrbee.com/$1 [L,R=301]

 

Redirect www ke non-www .htaccess

RewriteCond %{HTTP_HOST} ^www.domainanda.com [NC]
RewriteRule ^(.*)$ http://domainanda.com/$1 [L,R=301]

 

Redirect seluruh website ke website lain

RewriteCond %{HTTP_HOST} ^domainlama.com [NC,OR]
RewriteCond %{HTTP_HOST} ^www.domainlama.com [NC]
RewriteRule ^(.*)$ http://domainbaru.com/$1 [L,R=301,NC]

 

Redirect Url Direktori ke Halaman Utama

RedirectMatch 301 /blog/(.*) https://wwqodrbeew.idsysadmin.com/$1
RedirectMatch ^/$ https://www.qodrbee.com/blog

selain dengan file .htaccess redirect juga bisa dilakukan dengan setting config nginx

DevOps Expert | Haproxy – High Performance Load Balancer Server

haproxy load balancer server

Kapan Anda harus menggunakan Haproxy?

Ketika ribuan pengguna mengakses situs atau aplikasi web ataupun sejenisnya pada waktu bersamaan, sehingga trafic yang tinggi yang membuat server anda overload (down) karena tidak dapat menampung request yang diterima, maka haproxy dapat menjadi solusi bagi anda.

Bayangkan kalo anda cuma punya 1 server yang dipakai untuk menangani semua request yg sudah terlanjut buanyaaak bgt… disisi lain spec server sudah mentok g bisa di upgrade lagi. sudah tidak memungkinkan untuk vertical scaling. maka sudah saat nya untuk melakukan horisontal scaling. yap… dengan Haproxy kita dapat membuat horisontal scaling untuk menghajar mengatasi trafic yang tinggi.

Teknik ini dikenal dengan load balancing. Jadi load balancing adalah teknik untuk melakukan distribusi beban trafik pada dua atau lebih jalur koneksi secara seimbang sehingga setiap jalur koneksi akan menerima beban trafik yang sama. yap begitulah cara kerja load balancing.

Apa itu Haproxy?

HAProxy adalah project open source dibawah GPLv2 license. Haproxy atau kepanjangan dari High Availability Proxy adalah loadbalancer TCP/IP dan proxy server yang dapat membagi beban request yang datang kepada multi node server. sehingga beban server akan dibagi kepada node server yang ada.

Pembagian beban nya pun bermacam-macam cara ada yang sama rata, ada yang berdasarkan beban trafic dan lain nya. akan kita pelajari algoritma pembagian beban request  ini selanjutnya. Jadi haproxy ini adalah perantara antara client/user dengan server (web/database/dll) sehingga disebut juga dengan haproxy reverse proxy.

Haproxy tidak hanya bisa untuk web load balancing namun juga yang lain seperti smtp load balancing atau mysql load balancing.

Bagaimana cara kerja Haproxy?

Load balance pada web server dapat dilakukan dengan 2 macam yaitu pada Layer 4 (transport layer) dan Layer 7 (application layer). Layer 4 lebih sederhana karena pembagian hanya berdasarkan range IP dan port. Pada layer 7 pembagian lebih kompleks sampai pembagian trafic berdasarkan url tertentu, dsb.

User akan mengirimkan request kepada load balancer (haproxy) kemudian diteruskan (forward) ke node (web server) lain. Teknik load balancing yang sering digunakan adalah roundrobin dan least connection. RoundRobin adalah cara yang menganggap bahwa semua beban server sama, jadi setiap server yang ada di akses secara bergantian dan berurutan, sedangkan Least Connection hanya mengalihkan beban ke server yang dianggap kosong atau trafficnya rendah.

di dalam haproxy terdapat 2 bagian (side) yakni frontend dan backend. koneksi yang datang dari user akan di terima oleh bagian frontend untuk di olah/filter sesuai rule frontend, jika lolos maka paket di lanjutkan ke backend untuk di oleh/filter sesuai rule backend selanjutnya akan di putuskan untuk kirim ke node tertentu sesuai strategi yang di pakai backend. Jadi frontend hanya mengurusi client/users dan backend mengurusi node server.
haproxy ada 2 mode dalam operasinya yakni HTTP close mode dan HTTP keep-alive mode.

Mengapa harus Haproxy?

Sebenarnya untuk melakukan load balancing trafic pada server ada beberapa alternative lain seperti Nginx, LVS / IPVS, varnish, dll. Namun haproxy memang khusus dibuat untuk keperluan ini, mature, reliable dan high performance. Disamping dia mempunyai fitur-fitur pendukung lain tentunya.

Haproxy hanya menggunakan 15% dari processing time penggunaan CPU dengan HTTP close mode dan sekitar 30% jika menggunakan HTTP keep-alive mode. Itu artinya secara global haproxy mempunyai impact yang besar dalam performa namun kecil dalam penggunaan resource.

Dengan load balancing maka yang akan menerima request tidak hanya 1 server, sehingga mempercepat waktu response sebuah web. 1 web server dapat menerima banyak request, sedangkan 1 server biasanya kita memiliki 1 web server, bayangkan saja jika kita mempunyai 3 dan masing – masing server mempunyai 1 web server maka waktu response sebuah web akan meningkat 3 kali lipat. Kesimpulan nya dengan haproxy dapat mempercepat waktu reponse sebuah web (fast response).

Karena adanya server yang lebih dari 1, hal ini memungkinkan ketika salah 1 server mati request tetap dapat di layani dengan server lain. jadi lebih reliable.

Ada beberapa variasi dalam penggunaannya haproxy diantaranya ada yang berfokus pada bandwidth, atau berdasarkan request rate, atau koneksi yang konkuren, atau pada kinerja SSL. Fitur-fitur yang ada disediakan untuk membantu tugas haproxy dalam mengendalikan trafic. Contohnya nanti akan kita bahas dalam haproxy configuration.

Fitur Basic

Proxying : menjembatani koneksi dari client dan server.
SSL : haproxy ssl support secure sockets layer (https)
Monitoring : termonitor secara terus menerus dan tercatat
High availibility : walaupun 1 atau beberapa web server mati masih tetap terkoneksi
Load balancing : beban trafik yang terbagi sama rata atau sama rasa
Stickiness : aliran data/paket yang melekat pada aturan/rule yang di setting
Sampling and converting information : pengelompokan dan rekap data dari paket yang lewat
Map : membuat simple rule untuk setting frontend dan backend
ACLs dan Conditions : haproxy acl mengatur trafic dengan rule dan condition
Stick-tables
Formatted strings
HTTP rewriting and redirection
Server protection
Logging : terdapat haproxy log file untuk maintenance
Statistics : data statistic untuk monitoring trafic

Fitur Advance

Management
System-specific capabilities
Scripting : HAProxy support Lua embedded language

Persiapan Installasi dan Konfigurasi

Kali ini kita akan gunakan 3 server  VPS dengan OS terinstall ubuntu 18.04
1 server sebagai load balancer dengan haproxy
2 server sebagai web server dengan nginx

server haproxy kita beri nama haproxy.qodrbee.com
web server kita beri nama web1.qodrbee.com dan web2.qodrbee.com
berikut konfigurasinya :

haproxy.qodrbee.com

ip public : 10.20.30.40 open port 80 # terhubung ke internet/user
ip private : 192.168.1.1/24 #terhubung dengan private web server

web1.qodrbee.com

ip private : 192.168.1.2/24 #terhubung dengan haproxy.qodrbee.com

web2.qodrbee.com

ip private : 192.168.1.3/24 #terhubung dengan haproxy.qodrbee.com

persiapan haproxy load balancer server

okey itu tadi adalah persiapan kita (persiapan mental dan kesabaran :v) sebelum memulai instalasi dan konfigurasi haproxy.
Selanjutnya kita coffe break dulu agar kembali fresh dan fokus. 10menit…
10.. 9.. 8.. 7.. 6.. 5.. 4.. 3.. 2.. 1..
oke break habis kita lanjutkan tahap instalasi dan konfigurasi.

kalau sudah sampai sini anda wajib share tulisan ini.
agar (banyak pengunjung di web saya) manfaatnya lebih tersebar ke yang lain.

tanpa basa bali klik disini untuk menuju babak baru dalam haproxy.
HAProxy installation and configuration
jeng jeng jeng…..

Referensi :

How to Native Image Lazy Loading for Web

Native Lazy Loading Image for Web

native lazyload image for web

yess… native lazy load image for web. coba lihat script di atas… ada attribut loading pada tag img. Selama ini kita kalo mau melakukan lazy loading kita pake plugin kan? jQuery kan? … nah ini nih ada cara native loh…
dan ini berlaku untuk tag img dan iframe.

loading attribute ini akan bekerja ketika halaman di scroll ke img atau frame yang memakai loading ini. loading support 3 value :

  1. lazy: ini untuk lazy loading.
  2. eager: load langsung.
  3. auto: browser yang akan menentukan lazy load atau tidak.

jika tidak ada attribute loading maka dianggap auto. Berikut adalah contoh script nya..

<!-- Lazy-load an offscreen image when the user scrolls near it -->
<img src="unicorn.jpg" loading="lazy" alt=".."/>

<!-- Load an image right away instead of lazy-loading -->
<img src="unicorn.jpg" loading="eager" alt=".."/>

<!-- Browser decides whether or not to lazy-load the image -->
<img src="unicorn.jpg" loading="auto" alt=".."/>

<!-- Lazy-load images in <picture>. <img> is the one driving image 
loading so <picture> and srcset fall off of that -->
<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" loading="lazy">
</picture>

<!-- Lazy-load an image that has srcset specified -->
<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf" loading="lazy">

<!-- Lazy-load an offscreen iframe when the user scrolls near it -->
<iframe src="video-player.html" loading="lazy"></iframe>

dan tahukan saudara-saudara bahwa fitur ini direncanakan akan support di chrome 75. itu kata bang Addy Osmani sebagai Engineering Manager at Google working on Chrome. Jadi sabar saja ya… tunggu tanggal main nya di qodrbee ya. cheers… ;p

referensi  https://addyosmani.com/blog/lazy-loading/

[Penjurusan] Silabus School of Startup

  • Penjurusan 1bulan
    • Pengenalan diri
    • Deteksi Minat & bakat
  • Hustler9bulan
    • Leadership
    • Visioner
    • Ide Kreatif
    • Pitching
    • Networking
    • Manajemen & Keuangan
    • Marketing
  • Hipster 9bulan
    • Intro UI/UX Design
    • UX Design 3bulan
      • Dasar-Dasar UX Design
      • Design Sprint
      • Persona atau Customer Segmentation
      • Prototyping
      • User Research
      • UX Parameter
      • Simplicity
      • Addictive App
      • Behavioral Economics
      • Ideation
    • UI Design 3bulan
      • Research
      • Sketch & Wireframe
      • Design & Prototyping
      • Usability Testing
      • Evaluate
      • Implementation
    • StartUp Case 3bulan
  • Hacker 9bulan
    • Frontend Dev 2bulan
      • HTML
      • CSS
      • JS
      • ReactJS
    • Backend Dev 2bulan
      • Algoritma & Pemrograman
      • PHP & OOP
      • Database
      • PHP Framework
    • Mobile Dev 2bulan
      • React Native
    • StartUp Case 3bulan

[Hipster] Silabus School of Startup

  • Penjurusan 1bulan
    • Pengenalan diri
    • Deteksi Minat & bakat
  • Hustler9bulan
    • Leadership
    • Visioner
    • Ide Kreatif
    • Pitching
    • Networking
    • Manajemen & Keuangan
    • Marketing
  • Hipster 9bulan
    • Intro UI/UX Design
    • UX Design 3bulan
      • Dasar-Dasar UX Design
      • Design Sprint
      • Persona atau Customer Segmentation
      • Prototyping
      • User Research
      • UX Parameter
      • Simplicity
      • Addictive App
      • Behavioral Economics
      • Ideation
    • UI Design 3bulan
      • Research
      • Sketch & Wireframe
      • Design & Prototyping
      • Usability Testing
      • Evaluate
      • Implementation
    • StartUp Case 3bulan
  • Hacker 9bulan
    • Frontend Dev 2bulan
      • HTML
      • CSS
      • JS
      • ReactJS
    • Backend Dev 2bulan
      • Algoritma & Pemrograman
      • PHP & OOP
      • Database
      • PHP Framework
    • Mobile Dev 2bulan
      • React Native
    • StartUp Case 3bulan

[Hustler] Silabus School of Startup

  • Penjurusan 1bulan
    • Pengenalan diri
    • Deteksi Minat & bakat
  • Hustler9bulan
    • Leadership
    • Visioner
    • Ide Kreatif
    • Pitching
    • Networking
    • Manajemen & Keuangan
    • Marketing
  • Hipster 9bulan
    • Intro UI/UX Design
    • UX Design 3bulan
      • Dasar-Dasar UX Design
      • Design Sprint
      • Persona atau Customer Segmentation
      • Prototyping
      • User Research
      • UX Parameter
      • Simplicity
      • Addictive App
      • Behavioral Economics
      • Ideation
    • UI Design 3bulan
      • Research
      • Sketch & Wireframe
      • Design & Prototyping
      • Usability Testing
      • Evaluate
      • Implementation
    • StartUp Case 3bulan
  • Hacker 9bulan
    • Frontend Dev 2bulan
      • HTML
      • CSS
      • JS
      • ReactJS
    • Backend Dev 2bulan
      • Algoritma & Pemrograman
      • PHP & OOP
      • Database
      • PHP Framework
    • Mobile Dev 2bulan
      • React Native
    • StartUp Case 3bulan

sukses
-keputusan
-keyakinan
-berubah
–perubahan konstan
—1.upgrade standar
—2.yakin bisa membuhi standar
—3.ubah strategi atau cari mentor
–setiap kejadian selalu memilih berpikir positif
–membuka diri untuk belajar dia bisa berubah
-cari cara untuk solusi bukan alasan
-ganti kaya tapi dengan kata dan
-masalah besar/kecil itu tergantung masalah itu bertemu dengan siapa?

keahlian itu harus spesialis
pengetahuan itu generalis

step from zero to hero
1.inocent – manusia biasa
2.the call – manusia menemukan panggilan
3.ujian – pasti diuji
4.partner – menemukan sekutu
5.celebration

error
sifat impian dan syarat perubahan sama

DevOps Expert | apa dan bagaimana Google CLoud Platform (GCP) ?

google cloud platform gpc adalah
Google Cloud Platform atau disingkat GCP adalah layanan dari google tentang public cloud computing yang terdiri dari beragam layanan. diantara layanan nya adalah

  • Google Compute Engine
  • Google App Engine
  • Google Cloud Storage
  • Google Container Engine

Google Cloud Platform Service dapat diakses oleh software developer, DevOps, Sys admin dan profesional IT lainnya menggunakan piblic internet  atau melalui koneksi jaringan dedicated lain nya.
Lalu apa dan bagaimanakah GCP serta layanan-layanan nya?
ikuti event seminar gratis dari Cloud Ace berikut :

Topik Seminar :

– Pengenalan GCP
– Perbedaan antara GCP, AWS & Azure
– Demo GCP
– Sesi Q & ATanggal : 11 April 2019
Pukul : 10:00-12:00
Tempat : Horaios Malioboro Hotel
Jalan Gowongan Kidul No. 57, Gedongtengen, Yogyakarta, Yogyakarta Province, Indonesia, 55271
E-mail : id@cloud-ace.com

google cloud platform gpc adalah

klik disini untuk pendaftaran

[Compare] Berbedaan dan Perbandingan Flutter vs React Native

flutter vs react native

2017 Dunia Coding di hebohkan dengan rilisnya bahasa baru dari google. Bahasa untuk men-develop aplikasi mobile multi platform Android dan IOS. FLUTTER ikut meramaikan kancah persaingan antar bahasa pemrograman di platform mobile device. Dengan sekali coding hasilnya dapat berjalan di android dan IOS.
Tentu setiap framework mempunyai kelebihan dan kekurangan masing-masing. Pada ulasan kali ini kita bahas tentang Flutter dan React Native yang notabene sedang popular dan banyak dipakai.

1. Vendor Developer

Seperti yang kita tahu bersama bahwa 2 framework ini di develop oleh 2 raksasa yakni Flutter oleh Google dan React Native oleh Facebook. Sangat menjanjikan.

2. Initial Release

React Native rilis tahun 2015 otomatikeli dia lebih tua dan sewajarnya lebih banyak pengalaman nya. Sedangkan Flutter 2017, walaupun baru kemaren namun perkembangan nya bisa dibilang pesat.

3. Language

Javascript adalah bahasa yang dipakai React Native. Ini menjadi poin plus tersendiri karena javascript sudah dikenal sejak lama dan banyak yang menguasai sehingga tidak membutuhkan waktu lama dalam mempelajarinya. Sedangkan Flutter menggunakan Dart, bahasa baru yang mudah digunakan bagi developer yang terbiasa dengan OOP seperti C++ dan Java.

4. Learning Curve

React Native sepertinya mendapat poin plus untuk ini karena menggunakan javascript sebagai base nya.

5. Platform

Sama2 multi platform. draw

6. Simulator

Sama2 punya hot reload yang memungkinkan untuk live coding melihat hasil nya.

7. Reusable Code

Flutter membuat developer menjadi mudah karena dapat melakukan reuse existing code. Sedangkan pada React Native meskipun dapat reusable code namun lebih mudah di Flutter

8. Code Style

Flutter dikenal dengan simplicity nya. Sedangkan React Native dikenal dengan Ready to Use componen nya.

9. Development Time

Tergantung developer, Flutter dengan simplicity dan reuse code nya. React Native dengan ready to use library nya.

10. Stability

Karena Flutter lahirnya kalah cepet ya wajar kalo React Native lebih stabil.

11. Performance

Nah, Flutter ini direct component to device loo. Sedangkan React Native pake layer javascript.

12. Library

Sama sama Banyak

13. Time to Reach Market

Tergantung developer juga. Flutter cocok buat  prototyping. React Native cocok buat longterm karena lebih stabil dan mature

14. Popularity

Otomatis React Native lebih populer wong lahir duluan. Namun Flutter sudah hampir menyusul loo.

15. Community

Kalo sekarang banyakan React Native

16. Documentation

Flutter Rapi dan update jadi bagi developer pemula mudah belajar. Sedangkan react kurang terorganisir tapi up to date.

17. Used By

Sama sama dipakai perusahaan-perusahaan besar.

Berikut ringkasan komparasi dari 2 jawara mobile apps builder framework.

Flutter83Faktor87React Native
Google
5
Developers
5
Facebook
2017
4
Initial Release
6
2015
Dart
5
Language
5
JavaScript
Need learning Dart
4
Learning Curve
6
Famous Javascript
Android and iOS
5
Platform
5
Android and iOS
Stateful Hot Reload
5
Simulator
5
Hot Reload
Yes
6
Reusable Code
4
Reuse but restrict few component
Simplicity
6
Code Style
4
More Strict
More time, but reusable code
4
Dev Time
6
Ready to use component
Trying to Stable
4
Stability
6
Mature, older
Direct with native component
6
Performance
4
Use Javascript Layer
Many
5
Library
5
Many
Fast, Cocok untuk protitype
5
Time to Reach Market
5
Longterm lebih matur
60k github
4
Popularity
6
76k github
fast growt
4
Community
6
Large already
Rapi dan up to date
6
Documentation
4
Kurang rapi tapi up to date
Alibaba, Reflectly, Tencent, Hamilton Musical, Google Greentea, JD Finance, Abbey Road Studios, etc
5
Used By
5
Facebook, Oculus Go VR Headset, Instagram, Pinterest, Uber, Tesla, Walmart, Wix.com, Baidu, Artsy, etc

referensi :

[solved] convert htaccess apache to nginx wordpress rewrite rule

convert htaccess to nginx

convert htaccess apache to nginx

Saya baru migrasi dari apache2 ke nginx. Saya bingung bagaimana rewrite rules untuk wordpress di nginx ?
Berikut ini adalah htaccess saya sebelumnya…

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
</IfModule>

# END WordPress

 

Jawaban


  1. open/buka nginx.conf di /etx/nginx/nginx.conf
    vi /etx/nginx/nginx.conf
  2. edit atau tambahkan barus seperti berikut, sesuaikan pathnya
    server {
      ..
      ..
    
      location /blog {
          try_files $uri $uri/ /blog/index.php?$args;
      }
    
      location ~ \.php$ {
          fastcgi_split_path_info ^(/blog)(/.*)$;
      }
    
      ..
      ..
    }

    asumsi wordpress punya subdirectory blog

lihat juga cara redirect dengan nginx disini
ada juga tool online untuk konversi disini

About the htaccess to nginx converter winginx.com
The service is to convert an Apache’s .htaccess to nginx configuration instructions. First of all, the service was thought as a mod_rewrite to nginx converter. However, it allows you to convert some other instructions that have reason to be ported from Apache to nginx. Note server instructions (e.g. php_value, etc.) are ignored. The converter does not check syntax, including regular expressions and logic errors. Please, check the result manually before use.

I’m having no luck converting htaccess rules to nginx rewrite. I’ve checked out the NginxRewriteModule documentation and have a few done, but the more complicate ones I’m at a loss for. Here’s what I’m looking at: