Xdebug adalah sebuah extensi PHP yang digunakan untuk memudahkan proses debugging (pemecahan masalah) dalam pengembangan aplikasi web. Xdebug memungkinkan developer untuk melakukan debugging pada kode PHP secara langsung dengan mudah dan cepat. Artikel ini akan membahas tentang cara menginstal Xdebug pada XAMPP di Windows.

Langkah-langkah untuk menginstal Xdebug di XAMPP di Windows adalah sebagai berikut:

Langkah 1: Download Xdebug

Pertama, download file Xdebug yang sesuai dengan versi PHP yang terpasang pada XAMPP. Anda dapat mengecek versi PHP dengan membuka localhost/phpinfo.php pada browser. Kemudian, cari dan catat versi PHP yang terpasang di XAMPP.

Selanjutnya, buka halaman download Xdebug di https://xdebug.org/download. Pilih file Xdebug yang sesuai dengan versi PHP yang terpasang di XAMPP.

Langkah 2: Pindahkan file Xdebug

Setelah mengunduh file Xdebug, ekstrak file tersebut dan pindahkan file Xdebug yang sesuai dengan versi PHP ke direktori "ext" di dalam direktori instalasi XAMPP. Direktori "ext" biasanya terletak di dalam direktori "php" pada direktori instalasi XAMPP.

Langkah 3: Konfigurasi php.ini

Buka file php.ini pada direktori "php" di dalam direktori instalasi XAMPP. Cari baris yang berisi "zend_extension" dan tambahkan baris berikut di bawahnya:

zend_extension = "<path_to_xdebug>/php_xdebug-<version>-<architecture>.dll"

Ganti "<path_to_xdebug>" dengan direktori tempat Anda menyimpan file Xdebug. Ganti "<version>" dan "<architecture>" sesuai dengan versi Xdebug yang Anda unduh.

Langkah 4: Restart Apache

Setelah mengedit file php.ini, restart Apache di XAMPP untuk memuat pengaturan baru.

Langkah 5: Verifikasi instalasi

Untuk memeriksa apakah Xdebug telah terpasang dengan benar, buka localhost/phpinfo.php pada browser. Cari bagian "Xdebug" pada halaman phpinfo.php. Jika Xdebug telah terpasang dengan benar, Anda akan melihat informasi tentang Xdebug di bagian tersebut.

Langkah 6: Konfigurasi Xdebug

Anda dapat menambahkan konfigurasi Xdebug pada file php.ini untuk mempercepat proses debugging. Beberapa konfigurasi Xdebug yang berguna adalah sebagai berikut:

xdebug.remote_enable=1

xdebug.remote_host="localhost"

xdebug.remote_port=9000

Kode di atas akan mengaktifkan debugging jarak jauh, dengan Xdebug yang berjalan pada localhost pada port 9000.

Dengan demikian, tutorial ini telah memberikan panduan tentang cara menginstal Xdebug pada XAMPP di Windows. Setelah berhasil menginstal Xdebug, Anda akan dapat melakukan debugging pada kode PHP dengan mudah dan efektif.

Single Page Application (SPA) adalah sebuah pendekatan dalam membangun aplikasi web modern yang memungkinkan pengguna untuk berinteraksi dengan satu halaman saja, tanpa perlu memuat ulang seluruh halaman seperti pada aplikasi web tradisional. Dalam SPA, konten pada halaman akan diperbarui secara dinamis sesuai dengan interaksi pengguna, sehingga memberikan pengalaman yang lebih halus dan responsif.

Salah satu contoh dari SPA yang populer adalah Gmail. Saat pengguna mengklik pada pesan email, konten pada halaman tidak perlu dimuat ulang, melainkan diperbarui secara dinamis. Hal ini membuat aplikasi web Gmail terasa lebih responsif dan nyaman digunakan, terlebih jika dibandingkan dengan aplikasi web tradisional yang memerlukan waktu untuk memuat ulang seluruh halaman setiap kali pengguna melakukan interaksi.

Baca juga Angular framework untuk membuat Single Page Application

Keuntungan dari penggunaan pendekatan SPA antara lain:

1. Responsif dan Lebih Cepat

Dalam SPA, sebagian besar sumber daya aplikasi, seperti file CSS, JavaScript, dan gambar, dimuat hanya satu kali pada awalnya, kemudian disimpan di dalam memori browser. Saat pengguna berinteraksi dengan aplikasi, konten akan diperbarui secara dinamis tanpa perlu memuat ulang seluruh halaman. Hal ini membuat aplikasi terasa lebih responsif dan cepat.

2. Pengalaman Pengguna yang Lebih Halus

Dalam aplikasi web tradisional, pengguna harus menunggu seluruh halaman dimuat ulang setiap kali mereka melakukan interaksi, misalnya saat mengklik tautan atau tombol pada navigasi. Dalam SPA, halaman hanya dimuat satu kali pada awalnya, dan setelah itu semua interaksi akan dilakukan secara dinamis. Pengguna akan merasakan pengalaman yang lebih halus dan nyaman karena tidak perlu menunggu seluruh halaman dimuat ulang setiap kali mereka melakukan interaksi.

3. Pemeliharaan yang Lebih Mudah

Dalam SPA, sebagian besar kode aplikasi dijalankan di sisi klien (client-side), sehingga memungkinkan pengembang untuk memisahkan tugas antara sisi klien dan sisi server. Hal ini membuat pemeliharaan aplikasi lebih mudah, karena perubahan pada kode sisi klien tidak akan mempengaruhi kode sisi server. Selain itu, karena sebagian besar sumber daya aplikasi dimuat hanya satu kali pada awalnya, perubahan pada aplikasi dapat diterapkan dengan cepat dan mudah.

4. Dukungan untuk Aplikasi Mobile

SPA sangat cocok untuk digunakan dalam membangun aplikasi mobile, karena ukuran file yang relatif kecil dan pengalaman pengguna yang lebih responsif. Dalam aplikasi mobile, kecepatan dan responsifitas sangat penting, dan SPA mampu memberikan pengalaman yang lebih baik daripada aplikasi web tradisional.

Kesimpulan

Single Page Application (SPA) adalah sebuah pendekatan dalam membangun aplikasi web modern yang memungkinkan pengguna untuk berinteraksi dengan satu halaman saja, tanpa perlu memuat ulang seluruh halaman seperti pada aplikasi web.

Kali ini kita akan  belajar tentang perbedaan Asynchronous dan Synchronous Programming dalam pemrograman Javascript dan bagaimana kedua metode ini mempengaruhi kecepatan eksekusi program. Asynchronous dan Synchronous adalah istilah yang sering digunakan dalam pemrograman Javascript.

Asynchronous Programming adalah pendekatan pemrograman yang tidak terikat pada input output (I/O) protocol. Ini berarti bahwa pemrograman asynchronous tidak melakukan pekerjaan secara berurutan seperti pemrograman lama. Sebaliknya, pekerjaan dilakukan secara independen dan tanpa harus menunggu proses lain selesai. Hal ini membuat waktu eksekusi menjadi lebih singkat dan cepat.

Sedangkan Synchronous Programming memiliki pendekatan yang lebih tradisional, dengan task yang dieksekusi satu per satu sesuai urutan dan prioritas. Namun, Synchronous Programming memiliki kemudahan yang tidak ditawarkan oleh Asynchronous Programming.

Baca juga Apa itu AJAX

Kedepannya, kedua pendekatan ini akan terus berkembang dan berada pada satu tujuan yang sama. Terlebih dengan semakin berkembangnya teknologi seperti Rest API. Pelajari lebih lanjut tentang Asynchronous dan Synchronous Programming dalam pemrograman Javascript!

$ cd aplikasi-reactjs
$ npm install --save semantic-ui-react

$ npm install --save semantic-ui-css

$ mkdir src/containers
$ mkdir src/components

Baca juga  apa itu react js belajar react js

$ cd aplikasi-reactjs
$ npm install --save react-router-dom

$ mkdir src/pages

$ npm start

$ npm run build

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

$ sudo apt-get install nginx

$ sudo vi /etc/nginx/sites-available/api.example.com.conf

server {
 keepalive_timeout 30;
 # SSL configuration
 listen 443 ssl default_server;
 listen [::]:443 ssl default_server;
 server_name api.example.com;
 ssl_certificate /etc/nginx/ssl/certificate.crt;
 ssl_certificate_key /etc/nginx/ssl/certificate.key;
 ssl_session_cache    shared:SSL:10m;
 ssl_session_timeout  10m;
 # application-a
 location /application-a {
  include /etc/nginx/global/include.request.conf;
  rewrite ^/application-a(/.*) $1 break;
  proxy_pass http://127.0.0.1:8881;
 }
 # application-b
 location /application-b {
  include /etc/nginx/global/include.request.conf;
  rewrite ^/application-b(/.*) $1 break;
  proxy_pass http://127.0.0.1:8882;
 }
 # application-c
 location /application-c {
  include /etc/nginx/global/include.request.conf;
  rewrite ^/application-c(/.*) $1 break;
  proxy_pass http://127.0.0.1:8883;
 }
 location / {
  try_files $uri $uri/ =404;
 }
 access_log /etc/nginx/logs/access.log;
 error_log  /etc/nginx/logs/error.log;
}

server {
 listen 80 default_server;
 listen [::]:80 default_server;
 server_name    api.example.com;
 rewrite        ^ https://$server_name$request_uri? permanent;
}

$ sudo mkdir /etc/nginx/global

$ sudo vi /etc/nginx/global/include.request.conf

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;

$ sudo mkdir /etc/nginx/ssl

$ sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/nginx/ssl/certificate.key -out /etc/nginx/ssl/certificate.crt

$ sudo ln -s /etc/nginx/sites-available/api.example.com.conf /etc/nginx/sites-enabled/

$ sudo systemctl reload nginx

let angka=12;//type data Number
let ubah = String(angka);// "12"
console.log(typeof ubah); // type data menjadi String

let cek = true; //type data boolean
let ubah2= String(cek);//"true"
console.log(ubah2);

let num=12;//type Number
let ubah =  num.toString();
console.log(typeof ubah);// "String"

let text ="123";//String
let ubah = Number(text);
console.log(typeof ubah);//Number

let cek =true;//boolean
let ubah1 =Number(cek);// 1
console.log(typeof ubah1);//Number

Baca juga cara menghitung jumlah array pada javascript

let num="12.12";//string
let bulat = parseInt(num); //hasil 12
console.log(typeof bulat);// Number

let pecahan=parseFloat(num);//hasil 12.12
console.log(typeof pecahan);//Number

console.log(Boolean(1));//true
console.log(Boolean(0));//false
console.log(Boolean("story"));//true
console.log(Boolean(""));//false

"" + 2 + 3
"" - 4 + 5
true + true
12 / "3"
"5" * "5"
7 + 8 + "px"
"$" + 1 + 12
"5" - 4
"12px" - 8
12 / 0
"  -12\n" + 5
"  -14\n" - 3
null + 3
undefined + 3

memahami layout pada bootstrap

layout merupakan hal yang sangat penting dalama pembuatan website, maka dari itu kita harus paham dulu agar bisa membuat layout yang responsif.coba temen-temen bayangkan kalau website/blog yang temen-teman kunjungi itu tidak responsif pasti langsung di closs atau cari alternatif lain yang lebih nyaman digunakan.dengan layout yang responsif akan membuat user betah berkunjung di website. layout yang respinsif adalah website yang kita buat bisa beradaptasi dengan device yang user gunakan.layout yang kita pelajari saat ini menggunakan framework, yaitu framework bootstrap.

layout yang paling dasar diboostrap adalah class container, container adalah pembungkus semua element.

class container terbagi menjadi dua:
1. container
2. container-fluid

Baca juga membuat segitiga dengan javascript

class container akan membuat layout berada di tegah-tegah atau hanya 80% saja dari browser.

cara mnggunakanya

<div class="container">
//content
</div>

class container-fluid akan membuat layout berada 100% ukuran browser atau full layar

cara menggunakannya

<div class="container-fluid">
//content
</div>

dalam satu halaman web bisa saja digunakan dua-duanya sesuai kebutuhan.

selanjutnya class row, class row sama seperti row/baris pada tabel pada umumnya.

class col sama seprti colum tabel pada umunya, row dan col selalu berdampingan penggunanya.

<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>

perlu di perhatikan layout pada framework boostrap itu terbagi menjadi 12 collum

terdapat juga beberapa pilihan class grid

Small untuk ukuran layar ≥576px dengan nama classnya sm, class sm bisa diisi 1-12

<div class="row">
<div class="col-sm-12">
//content
</div>
</div>

Medium untuk ukuran layar ≥768px dengan nama class md, class md sama juga bisa diisi 1-12

<div class="row">
<div class="col-md-12">
//content
</div>
</div>

Large untuk ukuran layar ≥992px dengan nama class lg, class lg sama juga bisa diisi 1-12

<div class="row">
<div class="col-lg-12">
//content
</div>
</div>

Extra large untuk layar ≥1200px dengan nama class xl, class xl juga bisa diisi -12

<div class="row">
<div class="col-xl-12">
//content
</div>
</div>

class grid bisa di kombinasikan penggunaanya tergantung dari website target pengguna website temen-teman

<div class="row">
<div class="col-xl-12 col-md-8">content</div>
</div>

terdapat satu class keren yaitu class offset, class ini digunakan jika kamu ingin membuang beberapa collum sebelunya.

<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 offset-md-4">col-md-4 .offset-md-4</div>
</div>

silahkan lihat documentasinya klik disini

artikel ini hanya membahas pengenalnya saja

Kepanjangan dari PWA adalah Progressive Web Apps. lantar apa itu pengertian dari Progressive Web Apps ??

Apa itu Progressive Web Apps(PWA)  ?

Alibaba

trivago

Instagram

Twitter

1. Chrome 52 atau di atasnya
2. Web Server for Chrome, atau server web pilihan Anda
3. Text Editor
4. Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools

Post Data Ke Rest API Menggunakan React Js

import React from "react";
import ReactDOM from "react-dom";
import axios from 'axios';
import "./styles.css";

class App extends React.Component {
  constructor(){
    super();
 this.state={
      title: '',
      body: '',
      userId: 1
    }
  }  
  onChange =(e) =>{
    this.setState({
      [e.target.id]:e.target.value
    })
  }
 onSubmit=()=>{
    let data ={
      title: this.state.title,
      body: this.state.body,
      userId: this.state.userId
    }
    axios.post('https://jsonplaceholder.typicode.com/posts',data)
 .then((res)=>{
      console.log(res)
 }).catch((err)=>{
      console.log(err)
    })
  }
  render() {
    return (
      <div className="App">
        <div>
          <label>Title</label>
          <input type="text" id="title" onChange={this.onChange} />
        </div>
        <div>
          <label>Body</label>
          <textarea id="body" onChange={this.onChange} />
        </div>
        <button type="button" onClick={this.onSubmit}>Post</button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Get Data Dari API Menggunakan React js

Persiapan untuk mulai get data dari rest api

cara install axios

npm install axios

yarn add axios

import axios from 'axios';

https://jsonplaceholder.typicode.com/

constructor() {
    super();
    this.state = {
      data: []
    };
  }

    componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(res =>
      this.setState({
        data: res.data
      })
    );
  }

render() {
    return <>{this.state.data.map((data, key) => {
    return  	
  })}</>;
  }

import React, { Component } from "react";
class List extends Component {
  render() {
    return (
      <div>
        <h4>{this.props.judul}</h4>
        <p>{this.props.isi}</p>
        <hr/>
      </div>
    );
  }
}
export default List;

import React, { Component } from "react";
import axios from "axios";
import List from "./List";
class App extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(res =>
      this.setState({
        data: res.data
      })
    );
  }
  render() {
    return <>{this.state.data.map((data, key) => {
    return <List judul={data.title} isi={data.body} />
  })}</>;
  }
}
export default App;

kesimpulan

Menghandle Form Pada React Js

import React, { Component } from "react";
class App extends Component {
  constructor(){
    super();
 this.state={
      email:'',
      password:''
    }
  }
  //mengambil text value dari input 
  //kemudia di pindahkan ke state
 onChang=(e)=>{
    this.setState({
      [e.target.id]:e.target.value
    })
  }
  //mengumpulkan data dari state untuk di kirimkan ke server
 onSubmit=()=>{
    let data={
      email:this.state.email,
      password:this.state.password
    }
    console.log(data);
  }
  render() {
    return <div>
        <input type="email" id="email" placeholder="masukan email" onChange={this.onChang} /><br/>
        <input type="password" id="password" placeholder="Masukan password" onChange={this.onChang}/><br/>
        <button type="button" onClick={this.onSubmit}>login</button>
    </div>;
  }
}
export default App;

Lists and Keys Pada React JS

semple data

[
  {id:1,nama:'soto',harga:8000},
  {id:2,nama:'sate',harga:7000},
  {id:3,nama:'bakso',harga:10000},
  {id:4,nama:'nasi campur',harga:5000}
]

import React, { Component } from "react";
import List from "./List";
class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { id: 1, nama: "soto", harga: 8000 },
        { id: 2, nama: "sate", harga: 7000 },
        { id: 3, nama: "bakso", harga: 10000 },
        { id: 4, nama: "nasi campur", harga: 5000 }
      ]
    };
  }
  render() {
    return (
      <>
        <h1>daftar makanan</h1>
        <ol>
          {this.state.list.map((data, key) => {
            return <List key={key} nama={data.nama} harga={data.harga} />
          })}
        </ol>
      </>
    );
  }
}
export default App;

import React, { Component } from "react";
class List extends Component {
  render() {
    return (
      <li>
        {this.props.nama} = {this.props.harga}
      </li>
    );
  }
}

export default List;

Coditional Rendering React js

Conditional Rendering Pada React js

// ternary
import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      isLoggedIn:true
    }
  }
  render() {
    return (
       <div>
      {this.state.isLoggedIn ? (
        <button>Logout</button>
      ) : (
        <button>Login</button>
      )}
    </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      isLoggedIn:true
    }
  }
  render() {
    return (
       <div>
      {this.state.isLoggedIn &&
          <h5>selamat datang</h5>
      }
    </div>
    );
  }
}

export default App;

React event handling functions

langsung aja kita praktek aja

//html
<button id="foobutton" onclick="handleClick()">
  simpan
</button>

//js
function handleClick() {
  alert('tombol simpan diclik');
};

//code react
class ButtonMe extends Component {
  handleClick = () => {
    alert('tombol di clik');
  }
  render() {
    return <button onClick={this.handleClick}>kilk saya</button>
  }
}

// cara pertama
class Component1 extends Component {
constructor(){
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
    alert('clicked.');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

// cara kedua
class Component1 extends Component {
  handleClick = () => {
    alert('clicked.');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

Latihan Event Handling

import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      num:10
    }
 this.increment=this.increment.bind(this);
  }
  increment(){
    this.setState({
      num:this.state.num + 1
    })
  }
 decrement=()=>{
    this.setState({
      num:this.state.num - 1
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.increment}>+</button>
        <div>{this.state.num}</div>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

export default App;

React Lifecycle

Fase Mounting

1. constructor : disini akan di inisialisasikan state
2. componentDidMount : biasnya disini digunakan untuk me-request data dari rest api
3. componentWillMount :  bisa digunakan untuk merubah state yang tidak mempengaruhi UI

Fase Updating

Sumber: https://rangle.github.io/react-training/react-lifecycles/

React Fragment

class BlogPostExcerpt extends Component {
  render() {
    return (
      <React.Fragment>
        <h1>Judul Blog</h1>
        <p>ini isi blog</p>
      </React.Fragment>
    )
  }
}

class BlogPostExcerpt extends Component {
  render() {
    return (
      <>
        <h1>Judul Blog</h1>
        <p>ini isi blog</p>
      </>
    )
  }
}

apa itu props

import React, { Component } from 'react';
import Welcome from "./Welcome"

class App extends Component {
  render() {
    return (
       <div classname="App">
        <welcome name="andi"/>
       </div>
     );
  }
}

export default App;

import React, { Component } from 'react';
class Welcome extends Component {
  render() {
    return (
      <h1>Welcome back,{this.props.name}</h1>
    );
  }
}
export default Welcome;

Welcome.defaultProps={
  name:'eka'
}

static defaultProps={
  name:'eka'
}

npm install prop-types --save

import PropTypes from 'prop-types';

Welcome.propsType={
    name:PropType.string
}

Welcome.propsType={
    name:PropType.string.isRequired
}

• PropTypes.any — untuk type prop apapun
• PropTypes.bool — untuk type prop boolean 
• PropTypes.number — untuk type prop number 
• PropTypes.string — untuk type prop string 
• PropTypes.func — untuk prop berupa function 
• PropTypes.array — untuk type prop berupa array 
• PropTypes.object — untuk type prop berupa object 
• PropTypes.symbol — untuk type prop berupa symbol 

class App extends Component {
  render() {
    return (
       <div classname="App">
        <welcome name="andi"/>
       </div>
     );
  }
}

export default App;

import React, { Component } from 'react';
import PropType from "prop-types"
class Welcome extends Component {
  render() {
    return (
      <h1>Welcome back,{this.props.name}</h1>
    );
  }
}
 Welcome.defaultProps={
  name:'eka'
  }
 Welcome.propsType={
    name:PropType.string
  }
export default Welcome;

create-react-app namaproject

App.js

import React,{ Component } from 'react';
class App extends Component{
  render(){
    return(
    <h1>hello </h1>
    )
  }
 }
 export default App;

import React,{ Component } from 'react';

export default Nama component

App.js

import React, { Component } from 'react';
class Nama extends Component {
  render() {
    return (
      <span>developer</span>
    );
  }
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>hello  <Nama /></h1>
        <Footer />
      </div>
    );
  }
}

export default App;

App.js

import React, { Component } from 'react';
import Header from './Header';
class Nama extends Component {
  render() {
    return (
      <span>developer</span>
    );
  }
}
const Footer =()=>{
return(
  <h3>ini footer</h3>
)
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>hello  <Nama /></h1>
        <Footer />
      </div>
    );
  }
}
export default App;

Header.js

import React,{ Component } from 'react';
class Header extends Component {
  render() {
    return (
      <div className="App">
        <h1>ini header</h1>
      </div>
    );
  }
}
export default Header;

import Header from './Header';

App.js

import React, { Component } from 'react';
import Header from './Header';
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <h1>hello </h1>
        <Footer />
      </div>
    );
  }
}
export default App;