DEV Community: Wahyu Triono

Panduan memulai cepat Laravel

Wahyu Triono — Tue, 12 Dec 2023 02:58:20 +0000

Komponen penting Laravel ada 3, yaitu (MVC):

M (Model) Merupakan jembatan antara database dengan controller, model juga dapat berisi relasi antar tabel (misalnya tabel user dengan produk), dan konfigurasi tabel (misalnya kolom apa saja yang boleh diinputkan dan kolom apa saja yang tidak boleh diinputkan)
V (View) Merupakan file yang berisi html untuk menampilkan website nya
Controller Merupakan file yang berisikan logika dari setiap url yang ada, misalnya url domain.com/api/siswa menggunakan controller SiswaController dengan fungsi index, yang berarti logika apa yang akan di tampilkan pada domain.com/siswa akan berada di SiswaController pada fungsi index

Pada Laravel setiap route menggunakan Http Method

Setiap route pada laravel menggunakan http method, seperti Get, Post, Put, atau Delete

GET (Digunakan untuk mengambil/menampilkan data)
POST (Digunakan untuk mengirim/memasukan data)
PUT (Digunakan untuk mengupdate data)
DELETE (Digunakan untuk menghapus data)

Alur pembuatan endpoint/url pada laravel

Misalnya kita ingin membuat url seperti ini domain.com/api/siswa dan kita ingin menampilkan seluruh data siswa pada endpoint/url tersebut.

Konfigurasi database (Jika menggunakan mongodb, pada note satunya)
Buat Model (untuk mengatur tabel) dan Controller (untuk menyimpan logic pada endpoint/url) terlebih dahulu.

   // membuat model dengan nama siswa dan controller
   // option -c akan membuat controller dengan nama SiswaController
   php artisan make:model Siswa -c

   dan model akan di simpan pada App\Models

Konfigurasi Model agar dapat digunakan

   1. jika menggunakan mongodb, maka harus import
   use MongoDB\Laravel\Eloquent\Model;

   2. lalu atur collection mana yang akan digunakan (jika menggunakan mongodb)
   (collection seperti tabel, jadi nanti model Siswa akan memasukan data ke dalaman collection apa, pada code di atas, model Siswa akan menyimpan data pada collection siswas

   3. Lalu kita pilih kolom mana yang akan kita lindungi (lindungi maksudnya agar user tidak bisa memasukan data pada kolom tersebut) pada code di atas, kolom yang dilindugi adalah kolom _id. Jika kita menggunakan 
   protected $guarded
   berarti user dapat mengisi pada kolom sisanya (misalnya ada kolom _id, nama, kelas, alamat, maka user tidak boleh mengisi kolom _id, dan kolom sisanya (nama, kelas, alamat) itu boleh diisi oleh user)

Setelah itu langkah selanjutnya adalah membuat route, karena kita akan membuat API sehingga kita membuat route pada file routes/api.php

   // Berikut untuk contoh route nya
   Route::get('get-all-siswa-data', [SiswaController::class, 'getAllUserData');

Dengan route tersebut, sehingga nanti akan menghasilkan endpoint/url

   domain.com/api/get-all-siswa-data

Lalu selanjutnya ketika kita mengakses url/endpoint tersebut, maka akan error

   method getAllSiswaData not found

Ini dikarenakan pada controller yang dituju (SiswaController) itu tidak ada fungsi/method getAllSiswaData, selanjutnya kita mencoba membuat fungsi tersebut pada controller

Controller harusnya sudah ikut terbuat pada langkah sebelumnya, sehingga kita bisa membuka controller pada folder

   App\Http\Controllers

Lalu buka SiswaController.php, lalu kita buat fungsi getAllSiswaData, sehingga code nya menjadi seperti berikut

(Part 2) Membuat CRUD sederhana menggunakan Node Js, Express Js, Prisma, dan PostgreSQL

Wahyu Triono — Sun, 13 Nov 2022 08:43:44 +0000

Setelah kita berhasil mempersiapkan project dan tabel kita, selanjutnya kita akan membuat function CRUD yang nantinya digunakan pada router kita.

Membuat controller

Pertama yang akan kita lakukan adalah membuat controller yang akan kita letakan pada folder controllers, dan buat file dengan nama userController.js pada folder controllers

Membuat fungsi getAllData

Setelah itu masukan kode berikut pada userController.js

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient

export const getAllData = async (req, res) => {
    try {
        const user = await prisma.user.findMany()

        res.status(200).json({
            status: 'Success',
            data: user
        })
    } catch (error) {
        res.status(500).json({
            status: 'error',
            message: error
        })
    }
}

fungsi getAllData akan melakukan proses mendapatkan semua data dengan menggunakan prisma.user.findMany(), dan mengirimkan response json dengan status 200

Setelah itu kita buka routes/users.js, lalu ubah menjadi berikut

import express from 'express'
import { getAllData } from '../controllers/userController.js'
let router = express.Router()

router.get('/', getAllData)

export default router

yang pertama kita lakukan adalah melakukan import fungsi getAllData pada userController.js, lalu kita gunakan pada router.get('/', getAllData) yang berarti ketika kita mengunjungi route localhost:3000/users/ maka system akan menjalankan fungsi getAllData.

Buka terminal lalu jalankan command berikut untuk menjalankan project

npm run dev

Lalu buka postman atau insomnia, disini saya menggunakan insomnia. Dan buat request collection baru

Setelah itu tambahkan HTTP Request

Lalu atur seperti berikut

Lalu tekan sent

Jika tampilan insomnia kalian sama dengan saya, maka fungsi get pertama anda berhasil dibuat, sehingga anda sudah menyelesaikan salah satu fungsi CRUD, yaitu Read.

Membuat fungsi create

Kita buka kembali file userController.js, lalu tambahkan fungsi create seperti berikut:

export const getAllData = async (req, res) => {
    try {
        const user = await prisma.user.findMany()

        res.status(200).json({
            status: 'Success',
            data: user
        })
    } catch (error) {
        res.status(500).json({
            status: 'error',
            message: error
        })
    }
}

export const create = async (req, res) => {
    try {
        await prisma.user.create({
            data: {
                email: req.body.email,
                name: req.body.name
            }
        })

        res.status(200).json({
            status: 'success',
            message: 'Successfully insert user data'
        })
    } catch (error) {
        res.status(500).json({
            status: 'error',
            message: error
        })
    }
}

Lalu buka file routes/users.js, lalu tambahkan code

router.post('/', create)

dan pada bagian import userController.js pada file users.js tambahkan create

Lalu pada insomnia atau postman, tambahkan HTTP Request baru dengan endpoint http://localhost:3000/users dengan method POST dan tambahkan request email dan name, lalu click send
Jika tampilan postman seperti dibawah, maka fungsi create anda berhasil dan anda sudah menyelesaikan 2 fungsi CRUD yaitu Create dan Read

Untuk memastikan data sudah masuk kedalam database, anda dapat membuka HTTP Request sebelumnya pada endpoint http://localhost:3000/users dengan method GET

Membuat fungsi update

Buka file userController.js, lalu tambahkan fungsi update seperti berikut:

export const update = async (req, res) => {
    const checkNumber = !isNaN(req.params.id)

    if (!checkNumber) {
        throw 'Please enter valid number'
    }

    const id = parseInt(req.params.id)

    try {
        await prisma.user.update({
            where: {
                id: id
            },
            data: {
                email: req.body.email,
                name: req.body.name
            }
        })

        res.status(200).json({
            status: 'success',
            message: 'Successfully update user data'
        })
    } catch (error) {
        res.status(500).json({
            status: 'error',
            message: error
        })
    }
}

Setelah itu buka file routes/users.js, dan tambahkan endpoint baru seperti berikut:

router.put('/:id', update)

dan juga jangan lupa import fungsi update, agar tidak error. Sehingga keseluruhan code pada file users.js adalah seperti berikut:

Buka aplikasi insomnia atau postman, lalu tambahkan HTTP Request, dan masukan endpoint http://localhost/users/1 dengan method PUT, dan masukan response
Jika tampilan kalian sama seperti gambar dibawah, maka fungsi update dapat berjalan dengan normal

Untuk melihat apakah data benar benar berhasil di update, kalian dapat membuka endpoint get sebelumnya, maka data sudah di ubah

Membuat fungsi deleteUser

Ini merupakan fungsi terakhir kita. Buka file userController.js lalu tambahkan fungsi deleteUser seperti berikut:

export const deleteUser = async (req, res) => {
    const checkNumber = !isNaN(req.params.id)

    if (!checkNumber) {
        throw 'Please enter valid number'
    }

    const id = parseInt(req.params.id)

    try {
        await prisma.user.delete({
            where: {
                id: id,
            }
        })

        res.status(200).json({
            status: 'success',
            message: 'Successfully delete user data'
        })
    } catch (error) {
        res.status(500).json({
            status: 'error',
            message: error
        })
    }
}

Setelah itu, buka file routes/users.js dan import deleteUser function dan tambahkan baris baru dibawah endpoint terakhir, seperti berikut:

router.delete('/:id', deleteUser)

Sehingga total keseluruhan code file users.js adalah seperti berikut

Setelah itu, coba jalankan endpoint http://localhost:3000/users/1 dengan method DELETE pada insomnia atau postman
Jika tampilan insomnia kalian sama dengan gambar dibawah, maka fungsi deleteUser kalian berhasil

Selanjutnya silahkan cek endpoint GET, apakah data user sudah terhapus atau belum.

Jika tampilan sama dengan gambar di atas, maka data user anda sudah berhasil di hapus.

Penutup

Terimakasih banyak karena sudah membaca dan mengikuti tutorial ini, kalian dapat mengunduh source code part 2 ini disini, atau jika anda ingin mengunduh seluruh source code, kalian dapat mengunduhnya disini

(Part 1) Membuat CRUD sederhana menggunakan Node Js, Express Js, Prisma, dan PostgreSQL

Wahyu Triono — Sun, 13 Nov 2022 08:41:39 +0000

Persiapan

Sebelum kita mulai membuat CRUD sederhana ini, kalian diharuskan sudah menginstall beberapa alat yang akan digunakan, berikut adalah alatnya:

Pembuatan Program

Install express generator

Setelah anda sudah mempersiapkan alat yang digunakan, yang pertama kalian lakukan adalah menginstall express generator, dimana nanti kita akan menggunakan express generator agar kita tidak perlu mengkonfigurasi server atau hal lainnya, karena itu akan ditangani oleh express generator tersebut.

Jalankan command berikut pada terminal kalian

npm install -g express-generator

Setelah selesai, coba kalian jalankan command berikut pada terminal kalian

express -h

Jika terminal menampilkan seperti berikut, maka express generator kalian berhasil diinstal

Setelah express generator berhasil diinstall, sekarang kita persiapkan folder dengan nama bebas yang digunakan untuk menampung projek kita nantinya, setelah itu buka terminal pada folder tersebut dan jalankan perintah berikut

express --no-view --git

--no-view digunakan untuk membuat project express generator tanpa view, karena disini kita akan membuat backend untuk Rest Api
--git digunakan untuk membuat git ignore agar saat nanti kita push kedalam github, file atau folder yang tidak penting akan tidak ikut ter push ke dalam repositori

Setelah itu buka vscode atau code editor lainnya pada project tersebut, jika anda menggunakan vscode, kalian dapat membuka project tersebut melalui command berikut

code .

Menginstall package yang diperlukan

Setelah project berhasil dibuka, maka tampilannya adalah seperti berikut
Setelah itu install beberapa package, menggunakan command berikut

npm i nodemon prisma @prisma/client

npm i merupakan perintah yang digunakan untuk menginstall package node, npm i juga merupakan kependekan dari npm install
nodemon merupakan package node yang digunakan untuk melakukan refresh server pada setiap perubahan code yang dilakukan
prisma merupakan package node ORM (Object Relational Mapping) yang mempermudah kita para developer dalam berinteraksi dengan database
@prisma/client merupakan package node tambahan dari prisma agar kita bisa menggunakan perintah tambahan dari prisma seperti prisma studio

Mengubah project menjadi ES6

Pada project ini, saya menggunakan ES6 untuk mempermudah developing saya

Pada file package.json, tambahkan baris berikut

"type": "module",

Sehingga akan menjadi seperti berikut

Ubah nama file www pada folder bin menjadi www.js, dan ubah isinya menjadi ES6
Ubah file app.js menjadi ES6 seperti berikut

import express from 'express'
import path from 'path'
import cookieParser from 'cookie-parser'
import logger from 'morgan'
import { fileURLToPath } from 'url'

import indexRouter from './routes/index.js'
import usersRouter from './routes/users.js'

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
app.use(express.static(path.join(__dirname, '../public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

export default app

Ubah folder router file index.js dan users.js menjadi seperti berikut

import express from 'express'
let router = express.Router()

/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});

export default router

Pada package.json ubah key scripts menjadi seperti berikut

  "scripts": {
    "start": "node ./bin/www.js",
    "dev": "nodemon ./bin/www.js"
  },

Jalankan project pada terminal menggunakan command berikut

npm run dev

Buka browser dan buka localhost:3000, jika tampilannya adalah seperti berikut, maka project anda berhasil diubah menjadi ES6

Kalian jangan bingung dahulu, intinya ES6 dapat mempermudah kita dalam melakukan developing pada project javascript

Persiapan prisma

Jalankan command berikut pada terminal kalian

npx prisma init --datasource-provider postgresql

setelah menjalankan perintah tersebut, seharusnya akan generate file baru

Pada folder prisma dengan nama schema.prisma
File .env pada folder root

Setelah itu, pahami file schema.prisma. Disitu tertera url = env("DATABASE_URL"), yang berarti url database diambil dari file env, agar mengamankan autentikasi database kita. Lalu kita buka file .env pada folder root, lalu ubah database url menggunakan kredensial postgresql anda

postgresql://username:password@host/nama-database?schema=public

prisma akan otomatis membuat database, sehingga kita tidak perlu membuat database secara manual pada postgres

Setelah kita mengubah database url pada file .env, selanjutnya kita buka lagi file schema.prisma, lalu tambahkan kode berikut pada akhir code

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User    @relation(fields: [authorId], references: [id])
  authorId  Int
}

model User berarti kita akan membuat tabel User dengan ketentuan berikut

id tipe data Int dan merupakan id(primary key) dan default value nya adalah autoincrement, yang berarti setiap data baru maka nilai id akan ditambah
email tipe data string dan merupakan unique, sehingga pada tabel user ini, tidak boleh ada data email yang sama
name tipe data string dan terdapat tanda "?", yang berarti kolom ini optional sehingga boleh diisi dan juga boleh kosong
posts Post[], berarti kolom posts ini adalah relasi kedalam tabel Post dan memiliki relasi 1 to Many. Jika anda ingin membaca mengenai relasi, kalian dapat membaca disini

Selanjutnya, untuk penjelasan model Post kalian dapat membaca disini

File schema.prisma merupakan file yang berisikan konfigurasi untuk menyambungkan ke database dan juga berisikan model model yang digunakan untuk membuat tabel. Setelah itu jalankan command berikut untuk melakukan migrate

npx prisma migrate dev

Setelah itu masukan nama migrate yang kalian inginkan, misalnya create_user_and_post_table, setelah itu tekan enter

Setelah melakukan migrate, seharusnya tabel telah dibuat pada database kita. Kita dapat mengecek apakah tabel sudah berhasil dibuat atau belum dengan membuka terminal baru lalu jalankan command berikut

npx prisma studio

tunggu sampai proses selesai, lalu prisma akan membuka browser otomatis untuk menampilkan data pada database kita

Lalu coba klik pada user, maka akan menampilkan data pada tabel user

Penutup

Kita telah berhasil mempersiapkan project kita, dan juga membuat tabel menggunakan bantuan prisma melalui file schema.prisma. Selanjutnya kita akan membuat fungsi CRUD menggunakan prisma.
Jika kalian terdapat kesusahan dalam mengikuti tutorial ini, kalian dapat mengunduh source code part 1 ini disini

Konfigurasi database pada hosting

Wahyu Triono — Sat, 23 Jul 2022 05:39:01 +0000

Jika sebelumnya kita telah melakukan deployment projek kita (Cara agar projek kita dapat diakses melalui domain), sekarang kita akan melakukkan konfigurasi database pada hosting.

Setelah kalian berhasil login ke dalam dashboard hosting, kalian pilih MySQL Management.

Setting database pada Hosting
Lalu kalian pilih create new database

Lalu kalian isi form yang tersedia

Lalu kita kembali ke dashboard, lalu pilih PHPMyadmin, dan masukkan username dan password yang telah kita buat tadi

Lalu pada bagian berikutnya, kalian click pada database kalian

Setelah itu click import pada bagian atas

Export database pada lokal
Okey sebelum kita lanjut pada proses selanjutnya, kita buka xampp/wampp kita dahulu dan nyalakan Apaceh dan Mysql. Disini saya menggunakan wampp, tapi dalam penggunaan sama.

Setelah itu kalian masuk ke dalam PHPMyadmin kalian dengan memasuki link berikut http://localhost/phpmyadmin
Lalu kita pilih database yang ingin kita gunakan, lalu pilih export pada bagian atas

Setelah itu click Go pada bagian kanan. Pada proses ini seharusnya kalian akan melakukan download file database kalian.

Memasukan database ke dalam hosting
Setelah kita berhasil export database pada lokal, selanjutnya kita kembali pada PHPMyadmin pada hosting. Dan click Choose file, lalu pilih database yang telah kita export sebelumnya.

Setelah berhasil, sekarang kita setting file koneksi kita. Kembali ke dashboard lalu pilih File Manager, lalu masuk ke folder public_html pada domain kita

Setelah itu kita edit file koneksi kita, disini file koneksi saya adalah koneksi.php

Pada edit ini, kita masukan username, password, dan database yang telah kita buat sebelumnya pada hosting kita.

Lalu kita simpan, dan cek website kita apakah sudah bisa mengakses database.

Cara agar projek kita dapat diakses melalui domain

Wahyu Triono — Sat, 23 Jul 2022 05:21:00 +0000

Jika kalian belum menghubungkan domain pada hosting kalian bisa mengikuti tutorial berikut : Cara menghubungkan domain ke hosting

Setelah kita berhasil menghubungkan domain ke dalam hosting, selanjutnya kita akan memasukan projek kita agar dapat di akses melalui domain. Berikut adalah caranya:
Login ke dalam dashboard hosting setelah berhasil login ke dalam dashboard, kalian pilih file manager.

Memasukkan projek, pada bagian ini kalian pilih domain

Lalu masuk ke dalam folder berikut

Lalu kalian klik upload pada bagian sidebar

Lalu upload file zip projek kalian, jika sudah kalian extract file tersebut

Lalu kalian hapus file index.html

Setelah itu, cek domain kalian apakah projek kalian sudah berubah atau belum.

Lalu selanjutnya kita akan konfigurasi database pada hosting, kalian dapat membaca nya pada link berikut: Konfigurasi database pada hosting

Cara menghubungkan domain dengan hosting untuk tugas DPW

Wahyu Triono — Sat, 23 Jul 2022 05:10:00 +0000

Agar domain kita dapat diakses, kita harus menyambungkan domain yang sudah ada dengan hosting yang tersedia. Untuk melakukannya gunakan cara berikut:

Membeli domain disini saya membeli domain pada hoster.co.id.

Setting hosting, yang pertama kita lakukan setelah membeli domain, kita harus login ke hosting yang telah di berikan oleh Pak Ariq.

Setelah kalian login dan berhasil masuk ke dalam dashboard, kalian pilih Domain setup.

Setelah itu kalian ikuti langkah berikut ini:

Add new
Lalu isi form yang ada

Setting domain, setelah setting hosting berhasil, kalian kembali ke dashboard lalu pilih DNS Management.
Jika sudah dibuka, maka akan terdapat DNS baru seperti berikut

Lalu perhatikan pada data desabanteran.my.id dengan tipe NS, kita akan gunakan NS (Name Server) tersebut untuk menghubungkan domain dengan hosting.
Kembali pada domain anda, silahkan atur nameserver sesuai pada data tadi, seperti berikut

Setelah itu tunggu beberapa menit hingga terhubung, kalian bisa cek apakah sudah terhubung atau belum dengan memasuki domain kalian.

Untuk mengatur projek kalian agar dapat digunakan pada domain yang telah anda setting, kalian bisa lihat tutorialnya pada link berikut: Cara mengakses projek kalian melalui domain

Ekstension vscode terbaik menurut saya [penggunaan umum]

Wahyu Triono — Thu, 30 Jun 2022 22:44:55 +0000

Dalam penulisan code tentunya kita ingin dipermudah, misalnya kita lupa tentang syntax dan harus menjelajahi google untuk menemukan syntax yang kita inginkan atau kita harus mengurutkan baris kode secara manual agar terlihat rapi. Pada vscode terdapat banyak sekali extension yang sangat berguna dalam penulisan code kita, berikut adalah beberapa extension pada vscode yang menurut saya wajib dan selalu saya gunakan.

Ekstension untuk penggunaan umum

1. Github Copilot

Digunakan untuk automation code

2. Database client

Ekstension tersebut seperti phpmyadmin pada browser, tetapi kita dapat menggunakannya pada vscode

3. Auto close Tag & Auto rename tag

Jika kalian masih manual menutup atau menamai suatu tag, kalian dapat menggunakane extension tersebut untuk otomatis mengubahnya

4. Bracket pair colorizer 2, Highlight Matching Tag & indent-rainbow

Extension tersebut digunakan untuk menandai bracket atau kurung kurawal dan juga baris, agar kita tahu kurung kurawal tersebut menutup baris kode mana

5. Beautify

Digunakan untuk merapikan baris kode yang berantakan, ekstension tersebut dapat digunakan dengan menggunakan shortcut ctrl+shift+p lalu ketik beautify file

6. Todo tree

Berfungsi seperti bookmark, misalnya kita memiliki suatu bug pada code dan kita lupa bug tersebut berada pada file/line mana.
Penggunaanya cukup simpel, kita hanya membuat command dan diawali dengan tab/label yang kita buat pada Todo tree, misalnya
// BUG: Tidak bisa menambahkan user

7. Code runner

Digunakan untuk menjalankan kode php, js, python dll

8. Color highlight

Digunakan untuk menyorot warna, misalnya #fff maka akan disorot dengan warna putih

9. Css Peek

Digunakan untuk menampilkan baris css pada class html

10. Project manager

Digunakan untuk berpindah projek secara instant

11. Wakatime

Digunakan untuk tracking kita dalam melakukan pemrograman

12. Color picker

Digunakan untuk menampilkan widget pengambilan warna

13. Live server dan live server preview

Digunakan untuk menampilkan file html secara live, sehingga jika terdapat perubahan, maka tampilan juga akan berubah

Mengaktifkan debug panel pada LARAVEL

Wahyu Triono — Wed, 22 Jun 2022 05:36:09 +0000

Tidak seperti Code Igniter yang secara otomatis mengaktifkan debug panel, pada Laravel kita harus mengaktifkannya secara manual dengan menggunakan library yang telah dibuat oleh *barryvdh * pada github nya, kalian dapat mengunjungi dokumentasi lengkapnya di sini.

Instalasi

Buatlah projek laravel baru lalu ikuti langkah berikut:

Buka cmd lalu masukan perintah berikut composer require barryvdh/laravel-debugbar
Setelah proses sebelumnya selesai, buka config/app.php dan edit bagian providers masukan kode berikut Barryvdh\Debugbar\ServiceProvider::class
Lalu pada file yang sama edit pada bagian aliases masukan kode berikut 'Debugbar' => Barryvdh\Debugbar\Facade::class
Setelah itu buka cmd lagi dan masukan perintah berikut php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"
Setelah proses instalasi selesai, sekarang coba jalankan projek laravel tersebut dengan menggunakan perintah php artisan serve pada cmd, dan masuk ke dalam url localhost:8000 pada browser. Jika debuger berhasil di instal, maka akan muncul panel debugger di bagaian bawah

Membuat CRUD sederhana dengan PHP

Wahyu Triono — Fri, 17 Jun 2022 03:24:41 +0000

Persiapan Projek

Siapkan XAMPP, Browser (Bebas), dan Code Editor (Disini saya menggunakan VS CODE)
Buka Xampp lalu aktifkan Apache dan Mysql
Setelah itu klik Explorer pada Xampp controll panel atau bisa juga masuk ke folder instalasi Xampp (Default folder = C:\Xampp), lalu masuk ke folder htdocs (Default folder = C:\Xampp\htdocs).
Buat folder bernama CRUD

Penjelasan

Apache dalam xampp digunakan untuk menjalankan file berekstensi php.
Mysql digunakan dalam penyimpanan data yang nantinya digunakan dalam percobaan CRUD

Dalam pembuatan projek PHP kita diharuskan membuatnya dalam folder htdocs agar dapat dijalankan.

Pembuatan database

Setelah persiapan selesai dilakukan, selanjutnya masuk ke dalam fase pembuatan database. Silahkan buka aplikasi XAMPP lalu pada mysql, klik Admin. Setelah itu maka akan di alihkan ke browser yang membuka phpmyadmin, dimana phpmyadmin akan menjadi tempat kita membuat database, table dll.

Pertama buatlah database dengan klik new atau baru pada panel kiri lalu masukan nama database pada form yang disediakan, disini kita menggunakan nama database crud.
Lalu pada database crud, buatlah tabel bernama user
Setelah itu buatlah beberapa kolom sehingga menjadi seperti berikut
Setelah itu klik simpan pada bagian bawah.

Database telah dibuat, selanjutnya kita akan membuat program CRUD pada code editor.

Penjelasan

Indeks PRIMARY dalam pembuatan kolom berfungsi untuk memberikan nilai yang unik pada setiap data/record yang disimpan, ini berguna untuk membedakan setiap data yang ada. Primary key juga digunakan dalam melakukan JOIN dalam database nantinya.

Checkbox A_I berfungsi jika terdapat data baru, maka kolom id akan menambahkan atau melakukan increment dari nilai sebelumnya, misalnya terdapat data baru, maka id akan mengisi sendiri menjadi 1, jika terdapat data baru lagi, maka id data terbaru akan diisi dengan id sebelumnya yang dilakukan increment (2).

Pembuatan program

Setelah persiapan dan database berhasil dilakukan. Silahkan buka code editor masing-masing, lalu masukan folder CRUD yang telah dibuat sebelumnya (C:\Xampp\htdocs\CRUD).

Buatlah file koneksi.php, lalu isikan dengan kode berikut:

<?php 
    $database = 'crud';
    $connect = new mysqli("localhost", "root", "", $database);
    // Ketentuan paramater
    // 1. Merupakan host, karena kita menggunakan xampp (local) maka diisi dengan localhost
    // 2. Username dari mysql
    // 3. Password dari mysql
    // 4. Nama database
 ?>

Penjelasan

File koneksi.php ini bertujuan untuk menghubungkan projek website kita dengan database, sehingga kita dapat Create, Read, Delete, dan Update data pada database.

Buatlah file index.php, lalu isikan dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>Data pengguna</h1>
        <a href="tambah.php">Tambah Data</a>
        <table border='1'>
            <tr>
                <th>No</th>
                <th>Username</th>
                <th>Email</th>
                <th>Password</th>
                <th>Aksi</th>
            </tr>
            <?php 
                $no = 1;
                // Memanggil koneksi.php agar dapat menggunakan variabel didalamnya
                include 'koneksi.php';
                // Mengisi nilai pada variabel $data
                // mysql_query digunakan untuk membuat query mysql, dimana pada contoh tersebut 
                // digunakan untuk menampilkan semua data pada tabel user.
                $data = mysqli_query($connect, "SELECT * FROM user");
                while($data2 = mysqli_fetch_array($data)){
            ?>
            <tr>
                <td><?php echo $no ?></td>
                <td><?php echo $data2['username'] ?></td>
                <td><?php echo $data2['email'] ?></td>
                <td><?php echo $data2['password'] ?></td>
                <td>
                <div>
                    <a class="hapus" href="hapus.php?id=<?php echo $data2['id'] ?>">Hapus</a>
                    <a class="edit" href="edit.php?id=<?php echo $data2['id'] ?>">Ubah</a>
                </div>
                </td>
            </tr>
            <?php $no++; } ?>
        </table>    
    </div>
</body>
</html>

Penjelasan

File index.php merupakan file yang nantinya menampilkan seluruh data

Buatlah file tambah.php, lalu isikan dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- action="proses.php" berarti proses dalam form tersebut nantinya akan dikirim ke proses.php -->
    <!-- lalu pada proses.php nantinya akan menginputkan data ke database -->
    <!-- method="POST" digunakan agar data yang diinputkan user tidak terlihat pada url website -->
    <form action="proses.php" method="POST">
        <h1 class="judul">Tambah data</h1>

        <div>
            <label>Username :</label>
            <!-- required digunakan agar user diwajibkan mengisikan data pada form tersebut -->
            <!-- name="username" digunakan pada saat mengirimkan data ke proses.php maka data tersebut bernama username -->
            <input required type="text" name="username" placeholder="Masukan username"><br>

            <label>Email :</label>
            <input required type="email" name="email" placeholder="Masukan email"><br>

            <label>Password :</label>
            <input required type="password" name="password" placeholder="Masukan password"><br>

            <input type="reset" value="Reset"><br>
            <input type="submit" value="Submit" name="submit"><br>
            <a href="index.php">Semua data</a>
        </div>
    </form>
</body>
</html>

Penjelasan

File tambah.php merupakan file yang nantinya menampilkan form untuk menambahkan data

Buatlah file proses.php, lalu isikan dengan kode berikut:

<?php 
    include 'koneksi.php';

    // memanggil query mysql yang berisikan perintah untuk mengisikan data ke dalam tabel user
    // paramater pertama kosong karena dalam database, kolom pertama adalah id yang sudah di set A_I atau auto increment
    mysqli_query($connect, "INSERT INTO user VALUES('', '$_POST[username]', '$_POST[email]', '$_POST[password]')") or die(mysqli_error($connect));
?>
<script>
  alert("Data berhasil di tambah.");
  window.location.href = "index.php";
</script>

Penjelasan

File proses.php merupakan file menangani proses penambahan data, jadi didalam file ini data yang telah kita inputkan akan di proses agar masuk ke database

Buatlah file edit.php, lalu isikan dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="proses_edit.php" method="POST">
        <?php 
            include 'koneksi.php';
            // $_GET['id'] digunakan untuk mendapatkan nilai dari url yang bernama id
            $id = $_GET['id'];
            // mengeksekusi query mysql untuk mendapatkan data user dimana id nya adalah $id
            $data = mysqli_query($connect, "SELECT * FROM user WHERE id='$id'");
            $data2 = mysqli_fetch_array($data);
         ?>
        <h1 class="judul">Edit data Id <?php echo $data2['id'] ?></h1>

        <div>
            <!-- Kenapa type="hidden", disini kita hidden form tersebut karena kita tidak ingin pengguna mengubah id tersebut -->
            <!-- karena kita gunakan id tersebut dalam pengubahan data, jika id tersebut dirubah maka dapat terjadi error -->
            <!-- sehingga kita sembunyikan form tersebut dan mengirimkanya pada proses_edit.php -->
            <input type="hidden" name="id" value="<?php echo $data2['id'] ?>">

            <label>Username :</label>
            <!-- Value="" berarti kita menginisialisasikan nilai dari form tersebut -->
            <!-- Dimana kita mengisi form tersebut dengan data dari tabel user yang memiliki id $id -->
            <input required type="text" name="username" placeholder="Masukan username" value="<?php echo $data2['username'] ?>"><br>

            <label>Email :</label>
            <input required type="email" name="email" placeholder="Masukan email" value="<?php echo $data2['email'] ?>"><br>

            <label>Password :</label>
            <input required type="text" name="password" placeholder="Masukan password" value="<?php echo $data2['password'] ?>"><br>

            <input type="reset" value="Reset"><br>
            <input type="submit" value="Submit" name="Ubah"><br>
            <a class="tombol" href="data.php">Data</a>
        </div>
    </form>
</body>
</html>

Penjelasan

File edit.php berbeda dengan create.php, disini data yang kita pilih kita tampilkan pada form inputan yang nantinya akan kita proses di file proses_edit.php

Buatlah file proses_edit.php, lalu isikan dengan kode berikut:

<?php 
    include 'koneksi.php';
    $id = $_POST['id'];
    mysqli_query($connect, "UPDATE user SET username='$_POST[username]', email='$_POST[email]', password='$_POST[password]' WHERE id='$id'") or die(mysqli_error($connect));
 ?>

  <script>
    alert("Data berhasil di ubah.");
    window.location.href = "index.php";
</script>

Buatlah file hapus.php, lalu isikan dengan kode berikut:

<?php 
    include 'koneksi.php';
    $id = $_GET['id'];

    mysqli_query($connect, "DELETE FROM user WHERE id='$id'") or die(mysqli_error($connect));
 ?>
 <script>
    alert("Data berhasil di hapus.");
    window.location.href = "index.php";
</script>

Penjelasan

File proses_edit.php merupakan file yang menangani proses pengubahan data, jadi didalam file ini data yang telah kita inputkan akan di proses agar dapat mengubah data yang telah kita pilih

Test Program

Setelah pembuatan program selesai, coba jalankan dengan masuk url localhost/nama_folder_projek (localhost/CRUD)

Read data
Create data
Edit data
Delete data

Download Projek

Kalian dapat mendownload projek yang telah di buat tadi disini.
https://github.com/whytrno/Simple-PHP-Crud

Membuat CRUD sederhana dengan PHP

Wahyu Triono — Fri, 17 Jun 2022 03:22:03 +0000

Persiapan Projek

Siapkan XAMPP, Browser (Bebas), dan Code Editor (Disini saya menggunakan VS CODE)
Buka Xampp lalu aktifkan Apache dan Mysql
Setelah itu klik Explorer pada Xampp controll panel atau bisa juga masuk ke folder instalasi Xampp (Default folder = C:\Xampp), lalu masuk ke folder htdocs (Default folder = C:\Xampp\htdocs).
Buat folder bernama CRUD

Penjelasan

Apache dalam xampp digunakan untuk menjalankan file berekstensi php.
Mysql digunakan dalam penyimpanan data yang nantinya digunakan dalam percobaan CRUD

Dalam pembuatan projek PHP kita diharuskan membuatnya dalam folder htdocs agar dapat dijalankan.

Pembuatan database

Pertama buatlah database dengan klik new atau baru pada panel kiri lalu masukan nama database pada form yang disediakan, disini kita menggunakan nama database crud.
Lalu pada database crud, buatlah tabel bernama user
Setelah itu buatlah beberapa kolom sehingga menjadi seperti berikut
Setelah itu klik simpan pada bagian bawah.

Database telah dibuat, selanjutnya kita akan membuat program CRUD pada code editor.

Penjelasan

Indeks PRIMARY dalam pembuatan kolom berfungsi untuk memberikan nilai yang unik pada setiap data/record yang disimpan, ini berguna untuk membedakan setiap data yang ada. Primary key juga digunakan dalam melakukan JOIN dalam database nantinya.

Checkbox A_I berfungsi jika terdapat data baru, maka kolom id akan menambahkan atau melakukan increment dari nilai sebelumnya, misalnya terdapat data baru, maka id akan mengisi sendiri menjadi 1, jika terdapat data baru lagi, maka id data terbaru akan diisi dengan id sebelumnya yang dilakukan increment (2).

Pembuatan program

Setelah persiapan dan database berhasil dilakukan. Silahkan buka code editor masing-masing, lalu masukan folder CRUD yang telah dibuat sebelumnya (C:\Xampp\htdocs\CRUD).

Buatlah file koneksi.php, lalu isikan dengan kode berikut:

<?php 
    $database = 'crud';
    $connect = new mysqli("localhost", "root", "", $database);
    // Ketentuan paramater
    // 1. Merupakan host, karena kita menggunakan xampp (local) maka diisi dengan localhost
    // 2. Username dari mysql
    // 3. Password dari mysql
    // 4. Nama database
 ?>

Penjelasan

File koneksi.php ini bertujuan untuk menghubungkan projek website kita dengan database, sehingga kita dapat Create, Read, Delete, dan Update data pada database.

Buatlah file index.php, lalu isikan dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>Data pengguna</h1>
        <a href="tambah.php">Tambah Data</a>
        <table border='1'>
            <tr>
                <th>No</th>
                <th>Username</th>
                <th>Email</th>
                <th>Password</th>
                <th>Aksi</th>
            </tr>
            <?php 
                $no = 1;
                // Memanggil koneksi.php agar dapat menggunakan variabel didalamnya
                include 'koneksi.php';
                // Mengisi nilai pada variabel $data
                // mysql_query digunakan untuk membuat query mysql, dimana pada contoh tersebut 
                // digunakan untuk menampilkan semua data pada tabel user.
                $data = mysqli_query($connect, "SELECT * FROM user");
                while($data2 = mysqli_fetch_array($data)){
            ?>
            <tr>
                <td><?php echo $no ?></td>
                <td><?php echo $data2['username'] ?></td>
                <td><?php echo $data2['email'] ?></td>
                <td><?php echo $data2['password'] ?></td>
                <td>
                <div>
                    <a class="hapus" href="hapus.php?id=<?php echo $data2['id'] ?>">Hapus</a>
                    <a class="edit" href="edit.php?id=<?php echo $data2['id'] ?>">Ubah</a>
                </div>
                </td>
            </tr>
            <?php $no++; } ?>
        </table>    
    </div>
</body>
</html>

Penjelasan

File index.php merupakan file yang nantinya menampilkan seluruh data

Buatlah file tambah.php, lalu isikan dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- action="proses.php" berarti proses dalam form tersebut nantinya akan dikirim ke proses.php -->
    <!-- lalu pada proses.php nantinya akan menginputkan data ke database -->
    <!-- method="POST" digunakan agar data yang diinputkan user tidak terlihat pada url website -->
    <form action="proses.php" method="POST">
        <h1 class="judul">Tambah data</h1>

        <div>
            <label>Username :</label>
            <!-- required digunakan agar user diwajibkan mengisikan data pada form tersebut -->
            <!-- name="username" digunakan pada saat mengirimkan data ke proses.php maka data tersebut bernama username -->
            <input required type="text" name="username" placeholder="Masukan username"><br>

            <label>Email :</label>
            <input required type="email" name="email" placeholder="Masukan email"><br>

            <label>Password :</label>
            <input required type="password" name="password" placeholder="Masukan password"><br>

            <input type="reset" value="Reset"><br>
            <input type="submit" value="Submit" name="submit"><br>
            <a href="index.php">Semua data</a>
        </div>
    </form>
</body>
</html>

Penjelasan

File tambah.php merupakan file yang nantinya menampilkan form untuk menambahkan data

Buatlah file proses.php, lalu isikan dengan kode berikut:

<?php 
    include 'koneksi.php';

    // memanggil query mysql yang berisikan perintah untuk mengisikan data ke dalam tabel user
    // paramater pertama kosong karena dalam database, kolom pertama adalah id yang sudah di set A_I atau auto increment
    mysqli_query($connect, "INSERT INTO user VALUES('', '$_POST[username]', '$_POST[email]', '$_POST[password]')") or die(mysqli_error($connect));
?>
<script>
  alert("Data berhasil di tambah.");
  window.location.href = "index.php";
</script>

Penjelasan

File proses.php merupakan file menangani proses penambahan data, jadi didalam file ini data yang telah kita inputkan akan di proses agar masuk ke database

Buatlah file edit.php, lalu isikan dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="proses_edit.php" method="POST">
        <?php 
            include 'koneksi.php';
            // $_GET['id'] digunakan untuk mendapatkan nilai dari url yang bernama id
            $id = $_GET['id'];
            // mengeksekusi query mysql untuk mendapatkan data user dimana id nya adalah $id
            $data = mysqli_query($connect, "SELECT * FROM user WHERE id='$id'");
            $data2 = mysqli_fetch_array($data);
         ?>
        <h1 class="judul">Edit data Id <?php echo $data2['id'] ?></h1>

        <div>
            <!-- Kenapa type="hidden", disini kita hidden form tersebut karena kita tidak ingin pengguna mengubah id tersebut -->
            <!-- karena kita gunakan id tersebut dalam pengubahan data, jika id tersebut dirubah maka dapat terjadi error -->
            <!-- sehingga kita sembunyikan form tersebut dan mengirimkanya pada proses_edit.php -->
            <input type="hidden" name="id" value="<?php echo $data2['id'] ?>">

            <label>Username :</label>
            <!-- Value="" berarti kita menginisialisasikan nilai dari form tersebut -->
            <!-- Dimana kita mengisi form tersebut dengan data dari tabel user yang memiliki id $id -->
            <input required type="text" name="username" placeholder="Masukan username" value="<?php echo $data2['username'] ?>"><br>

            <label>Email :</label>
            <input required type="email" name="email" placeholder="Masukan email" value="<?php echo $data2['email'] ?>"><br>

            <label>Password :</label>
            <input required type="text" name="password" placeholder="Masukan password" value="<?php echo $data2['password'] ?>"><br>

            <input type="reset" value="Reset"><br>
            <input type="submit" value="Submit" name="Ubah"><br>
            <a class="tombol" href="data.php">Data</a>
        </div>
    </form>
</body>
</html>

Penjelasan

File edit.php berbeda dengan create.php, disini data yang kita pilih kita tampilkan pada form inputan yang nantinya akan kita proses di file proses_edit.php

Buatlah file proses_edit.php, lalu isikan dengan kode berikut:

<?php 
    include 'koneksi.php';
    $id = $_POST['id'];
    mysqli_query($connect, "UPDATE user SET username='$_POST[username]', email='$_POST[email]', password='$_POST[password]' WHERE id='$id'") or die(mysqli_error($connect));
 ?>

  <script>
    alert("Data berhasil di ubah.");
    window.location.href = "index.php";
</script>

Buatlah file hapus.php, lalu isikan dengan kode berikut:

<?php 
    include 'koneksi.php';
    $id = $_GET['id'];

    mysqli_query($connect, "DELETE FROM user WHERE id='$id'") or die(mysqli_error($connect));
 ?>
 <script>
    alert("Data berhasil di hapus.");
    window.location.href = "index.php";
</script>

Penjelasan

File proses_edit.php merupakan file yang menangani proses pengubahan data, jadi didalam file ini data yang telah kita inputkan akan di proses agar dapat mengubah data yang telah kita pilih

Test Program

Setelah pembuatan program selesai, coba jalankan dengan masuk url localhost/nama_folder_projek (localhost/CRUD)

Read data
Create data
Edit data
Delete data

Download Projek

Kalian dapat mendownload projek yang telah di buat tadi disini.

Cara menjalankan file PHP

Wahyu Triono — Fri, 17 Jun 2022 03:00:47 +0000

Pendahuluan

PHP atau PHP Hypertext Preprocessor merupakan bahasa pemrograman script open source yang dapat digunakan untuk pembuatan suatu website dalam sisi server.

Persiapan

Pertama download dahulu XAMPP disini.
Lalu jalankan dan install seperti biasa.
Setelah itu buka dan jalankan apache
Lalu klik pada explorer pada aplikasi XAMPP atau bisa juga masuk ke folder instalasi XAMPP (Default C:\xampp)
Lalu masuk ke dalam folder htdocs
Lalu buatlah folder dengan nama tes (atau bebas)
Lalu buka code editor dan arahkan ke dalam folder yang telah dibuat tadi.
Lalu buatlah file php dengan nama index.php
Lalu masukan kode berikut: <?php echo "Menjalankan file php pertama berhasil!” ?>
Setelah itu buka browser dan isi url dengan localhost/tes (atau nama folder yang telah dibuat tadi)
Jika pada browser menampilkan "Menjalankan file php pertama berhasil!” maka file php berhasil dijalankan

Rangkuman

File php harus berada di dalam folder htdocs (C:\xampp\htdocs) atau folder instalaasi xampp

File php bernama index.php akan dijalankan otomatis jika nama foldernya dipanggil pada url (misalnya localhost/tes maka akan menjalankan file index.php yang berada pada folder tes)

Jika ingin menjalankan file php lainnya, cukup tambahkan nama file setelah nama folder (misalnya localhost/tes/nama_file.php)

5 menit membuat website menggunakan wordpress

Wahyu Triono — Fri, 17 Jun 2022 02:51:56 +0000

Pendahuluan

Wordpress merupakan sebuat software yang dapat membantu para penggunanya dalam membuat sebuah website. Wordpress pada awalnya hanya dapat membuat sebuah blog seperti blogspot, tetapi seiring perkembangan jaman, wordpress berubah menjadi aplikasi CMS (Content Management System) yang intinya CMS ini kita dapat membuat dan mengelola sebuah website tanpa harus mengenal bahasa pemrograman.

Persiapan

Yang perlu disiapkan sebelum memulai membuat website menggunakan wordpress adalah akun wordpress itu sendiri, kalian bisa membuat akun wordpress pada wordpress.com. Jika anda memiliki sebuah hosting, anda bisa membuat akun wordpress dengan langkah berikut:

Masuk CPanel
Pilih Softaculous
Pilih blog
Pilih Wordpress
Lalu ikuti instruksi yang ada

Pembuatan

Setelah kalian mempunyai akun wordpress, kalian dapat mengikuti instruksi berikut:

Login akun Wordpress
Kalian dapat login akun kalian pada wordpress.com, atau jika kalian membuat akun pada hosting, kalian bisa masuk menggunakan https://domain-kalian.com/wp-admin
Menambah dan memasang tema
Setelah kalian berhasil login, kalian dapat melihat berbagai menu pada sidebar. Disini kalian bisa memilih Appearance-Themes-Add new-Lalu cari tema dengan nama Astra-Install-Activate.
Menggunakan starter template
Setelah kalian berhasil memasang tema Astra, kalian akan menemukan tulisan baru di bagian atas “Thank you for installing Astra!”, lalu kalian klik “Get Started” di bawah tulisan tersebut. Jika tidak ada tulisan atau tombol Get Started tersebut, kalian bisa masuk ke menu Appearance-Astra Options-Klik “Get Started” pada bagian atas.
Setelah kalian klik “Get Started”, kalian dapat klik “Build Your Website Now”, lalu pilih Page Builder, disini saya sarankan menggunakan elementor. Setelah itu, kalian akan diarahkan ke dalam bagian pemilihan template (jika template tidak muncul, silahkan refresh website anda dengan menekan f5), disini kalian bebas menggunakan template apa saja. Setelah memilih, kalian dapat menambahkan logo atau melanjutkannya (kalian dapat mengubahnya nanti) dengan klik “Skip & Continue”, lalu pemilihan warna dan font website anda, lalu klik “Continue”. Setelah itu kalian klik “Submit & Build My Website”, tunggu proses instalasi sampai selesai.
Melihat website)
Setelah berhasil menginstall starter template, kalian dapat klik “View Your Website” untuk melihat website anda. Atau kalian juga dapat melihat website anda dengan klik pada nama website anda di kiri atas setelah logo wordpress.
Kustomisasi website
Setelah kalian berhasil membuat website tersebut, kalian dapat kustomisasi dengan cara mengunjungi website kalian melalui domain (https://domain-kalian.com) atau klik nama website anda pada dashboard kiri atas. Setelah kalian mengunjui website kalian, kalian klik “Edit with elementor” pada bagian atas website anda. Setelah itu, kalian akan melihat banyak block yang kalian dapat gunakan, seperti contohnya Button, Heading, Image dll pada bagian sidebar. Jika kalian ingin menggunakannya, kalian dapat drag block tersebut ke dalam website anda. Jika kalian ingin mengubah tulisan yang terdapat pada website anda, kalian dapat klik tulisan tersebut, lalu ubah sesuai keinginan kalian.