Main Kode
Blog yang akan membahas segala hal yang berkaitan dengan kode-kodean. Mulai dari kode JavaScript, PHP, Golang, dan kode-kodean yang lainnya.
Wait, apakah judul ini salah? PHP dan Firefox? Bagaimana bisa? Padahal kan biasanya frontend itu pakainya ya serba JavaScript. Kok ini pakai PHP?
Oke, jadi gini, jangan protes dulu yah. Kan, sekarang itu yang diutamakan adalah performa. Maka, kalau dalam pandanganku ya performa itu akan dicapai jika kita 0 kb JS, yaitu fokus ke HTML aja. Terus, untuk CSS pakainya yang pure, tanpa framework. Sedangkan, untuk JS, pakai secukupnya, tapi tanpa framework.
Lah, memberatkan dong? Ya nggak sih. Cuma perlu pembiasaan aja. Ingat nggak dulu pas waktu pertama belajar React? Susah kan? Sekarang kan udah biasa karena sudah latihan dan udah sering digunakan. Nah, begitu juga dengan pure CSS dan pure JS (JS DOM). Kita akan coba membiasakannya sehingga akan lebih mudah, nggak terasa sulit lagi.
Lalu, buat apa PHP? PHP di sini digunakan untuk menyatukan berbagai file PHP. Jadi ya mainan include gitu. Udah paham kan ya? Lalu, bagaimana cara menyatukannya? Kita memerlukan Gajah untuk menyatukannya. Jadi, nanti download Gajah di mzaini30/gajah.
[link https://github.com/mzaini30/gajah]
Kalau Firefox, kita gunakan untuk desain website menggunakan CSS. Soalnya kan di Firefox itu ada fitur Style Editor, yang nggak ada di browser lainnya.
Oke, kayaknya kita langsung latihan aja deh. Bingung aku mau nulis apa lagi.
Jadi, sekarang, aku membuat folder main-php yang berisi 3 file: html-1.php, html-2.php, dan index.php.
Isi dari html-1.php adalah:
<!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>Isi dari html-2.php adalah:
</body>
</html>Isi dari index.php adalah:
<?php include './html-1.php' ?>
<h1>Hello World</h1>
<?php include './html-2.php' ?>Jadi, logikanya adalah meletakkan awalan kode default html di html-1.php dan meletakkan kode akhir dari default html di html-2.php. Makanya kan kita bisa melihat isi dari index.php yang merupakan penggabung dari kedua file tersebut.
Oh iya, karena kita mau bermain styling, buat dulu style.css yang isinya:
/**/Kemudian, ubah html-1.php menjadi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
+ <link rel="stylesheet" href="style.css" />
</head>
<body>(Itu tanda plusnya nggak usah ikutan dicopas ya...)
Kenapa kok file style.css harus diisi dulu? Soalnya nanti kalau kita develop CSS dengan style editornya Firefox, terus nggak ada isi CSSnya, nanti akan diabaikan, jadi nggak masuk list style in this page.
Sekarang, kita jalankan standalone PHP dengan perintah php -S localhost:3000
Lalu, kita buka deh localhost:3000 di Firefox. Maka, kita hanya melihat tulisan Hello World yang memiliki font serif.
Nah, sekarang kita mulai stylingnya. Yaitu dengan memencet Shift F7. Maka, akan muncul Style Editor.
Nah sekarang, kita mulai deh styling-stylingnya.
Kalau sudah, pencet Ctrl s atau bisa juga memencet tombol Save. Lalu, simpan di lokasi CSSnya berada.
Kan kita ini bermain dengan PHP. Jadi, selalu membutuhkan server PHP untuk bisa menjalankannya. Jadi, solusinya adalah kita harus mengubahnya menjadi file HTML biasa. Bagaimana caranya? Aku udah membuat toolsnya yang bernama Gajah.
Untuk menggunakan Gajah, silahkan kunjungi repositorinya di Github mzaini30/gajah. Di situ ada petunjuk bagaimana cara mendownload aplikasi Gajah. Untuk saat ini, Gajah tersedia untuk OS Windows dan Linux, baik itu 32 bit maupun 64 bit.
Setelah mendownload aplikasi Gajah, kamu bisa jadikan Gajah itu sebagai aplikasi yang bisa dijalankan di manapun, artinya kan masukkan di $PATH. Tapi, bisa juga sih aplikasi Gajah ini sebagai standalone. Artinya, letakkan aplikasi Gajah di proyek yang sedang kita kerjakan.
Setelah memiliki Gajah, sekarang waktunya untuk build file-file PHP tadi menjadi file HTML.
Kan tadi tu ada Terminal atau Command Prompt yang sedang berjalan, yang perintahnya itu adalah untuk menjalankan PHP pada port 3000. Nah, yang itu jangan ditutup. Biarkan aplikasinya jalan sendiri, berkembang.
Jadi, kita membuka Terminal atau Command Prompt baru, kemudian ketikkan perintah ini: gajah 3000, maka secara otomatis, file-file HTML akan terbentuk, yang merupakan hasil generate dari file-file PHP.
File PHPnya (sebelum menjalankan Gajah):
<?php include './html-1.php' ?>
<h1>Hello World</h1>
<?php include './html-2.php' ?>File HTMLnya (setelah menjalankan Gajah):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Canggih kan ya, jadi kita bisa generate file-file PHP yang kita buat menjadi HTML. Jadi pengen mendesain web pakai PHP dan Firefox deh.
Tes
BalasHapusBalas komentar
Hapus