PENDAHULUAN

Website merupakan suatu halaman berisi banyak informasi yang

disediakan melalui akses internet sehingga bisa diakses oleh seluruh
pengguna internet di dunia. Awal adanya internet, akses informasi pada
website masih sangat terbatas. Perkembangan website masih sangat
sederhana dan belum tersedia cukup banyak untuk bisa diakses. Secara
terminologi, website adalah kumpulan yang berasal dari
halaman-halaman situs, biasanya terangkum di dalam sebuah domain
atau subdomain, yang tempatnya berada di dalam World Wide Web
(WWW) di Internet. World Wide Web (WWW) merupakan gabungan atas
semua situs yang dapat diakses publik di internet. Website biasanya
ditempatkan setidaknya pada sebuah server web yang dapat diakses
melalui jaringan seperti internet, ataupun jaringan area lokal (LAN)
melalui alamat internet yang dikenal dengan URL. Proses kerja World
Wide Web (WWW) dapat dibagi menjadi beberapa komponen seperti
berikut: 1. Protocol: Protocol adalah sebuah media yang distandarkan
untuk dapat mengakses komputer di dalam sebuah jaringan. Dengan
menggunakan protocol ini sebuah halaman yang ada di dalam komputer
jaringan dapat dibuka dan diakses. 2. Address: Merupakan alamat yang
berkaitan dengan penamaan sebuah komputer di dalam jaringan.
Alamat ini merupakan sebuah nomor yang dimiliki sebuah komputer
atau disebut dengan nomor IP. Namun, dengan adanya perkembangan
teknologi nomor IP tersebut berkembang dengan nama Domain Name.
3. HTML: HTML (Hypertext Markup Language), yaitu sebuah bahasa
scripting yang dapat menghasilkan halaman website sehingga halaman
tersebut dapat diakses. Halaman web yaitu dokumen yang ditulis dalam
format HTML yang bisa di akses melalui HTTP, yaitu protokol yang
menyampaikan informasi dari server website untuk ditampilkan kepada
para pemakai melalui web browser. Semua informasi yang ditampilkan
melalui website tersebut membentuk sebuah jaringan informasi yang
sangat besar. Layaknya sebuah buku, halaman web menampung
informasi tentang berbagai hal, baik yang bersifat komersil maupun
nonkomersil. Melalui media web inilah seseorang dapat bertukar
informasi kepada orang lain di seluruh dunia.HTML merupakan
singkatan dari Hypertext Markup Language.
Bahasa pemrograman HTML merupakan salah satu bahasa
pemrograman untuk membangun website dengan mudah dan cepat.
Selain bahasa pemrograman HTML tersebut masih banyak lagi bahasa
pemrograman lain untuk membangun sebuah website. Saat ini banyak
sekali bahasa pemrograman yang menjadi salah satu bahasa yang
mudah dipahami. Bahasa pemrograman tersebut antara lain seperti
JavaScipt, C++, PHP, Visual Basic, Laravel, Python, dan lain
sebagainya. Ada beberapa situs yang bahkan memberikan informasi
terkait bahasa pemrograman apa yang sering digunakan, salah satunya
yaitu pada situs TIOBE. Yang bisa Anda akses ke link situs
https://tiobe.com/tiobe-index/ .

Web Statis
Secara sederhana, website statis dapat didefinisikan sebagai website
yang kontennya konstan atau tidak berubah. Setiap laman dibuat
dengan kode HTML dan menunjukkan informasi yang sama kepada
setiap pengunjung. Hanya webmaster atau developer yang bisa
melakukan update pada konten website statis. Umumnya website statis
dibuat dengan menggunakan HTML dan CSS oleh developer yang
memahami pemrograman dan coding. Anda juga bisa menggunakan
generator website statis seperti Jekyll, Hexo, atau Hugo. Karena website
statis tidak membutuhkan update konten secara berkala, website statis
tidak memerlukan database. Biasanya website statis digunakan untuk
website perusahaan yang hanya perlu memberikan informasi-informasi
dasar seperti alamat, kontak, dan sejarah perusahaan.

Web Dinamis
Website dinamis mempunyai konten yang dapat di-update secara
berkala dengan mudah. Adanya kemampuan website dalam pembaruan
konten tersebut, maka diperlukan adanya database di dalamnya. Web
dinamis dibuat dengan bahasa pemrograman yang lebih kompleks dari
pada web statis, seperti menggunakan bahasa pemrograman PHP,
Javascript, Phyton, dan lain sebagainya. Perancangan web dinamis
dibuat semudah mungkin sehingga pengguna website dapat
menggunakan secara maksimal sesuai dengan kebutuhan para
penggunanya. Web dinamis memungkinkan untuk memiliki banyak user
untuk dapat melakukan proses update konten sendiri tanpa merubah
desain web utama.

Database MySQL MySQL adalah salah satu aplikasi RDBMS (Relational

Database Management System). MySQL merupakan system
manajemen database relasional open source (RDBMS) dengan client
server model. Sedangkan RDBMS merupakan software untuk membuat
dan mengelola database berdasarkan pada model relasional. Paypal,
NetFlix, Ebay, Facebook, Twitter, YouTube, Google termasuk beberapa
aplikasi maupun website yang menggunakan MySQL untuk database
mereka. Penggunaan MySQL sebelumnya digunakan hanya terbatas.
Namun, saat ini MySQL sudah kompatibel dengan berbagai platform
computing, seperti Microsoft Windows, Linux, macOS, dan Ubuntu. SQL
statement menginstruksikan server untuk menjalankan operasi tertentu:
Data query: Meminta informasi yang spesifik dari database yang sudah
ada. Manipulasi data: Menambahkan, menghapus, mengubah
,menyortir, melakukan operasi lainnya untuk memodifikasi data, value,
atau visual. Identitas data (data identity): Menentukan tipe data,
misalnya mengubah data numerik menjadi data integer. Selain itu, juga
menentukan schema atau hubungan dari masing-masing tabel yang ada
di database. Data access control: Menyediakan metode keamanan
untuk melindungi data, termasuk dalam menentukan siapa yang boleh
melihat atau menggunakan informasi yang tersimpan di database

kita akan membahas Tailwind css, tailwind css adalah framework css
yang paling mudah dipelajari.Tailwind css adalah framework CSS yang
bersifat utility-first. Artinya, framework ini menyediakan serangkaian
utility classes untuk merancang elemen UI langsung di markup, tanpa
harus meninggalkan HTML dan kembali ke stylesheet untuk
menentukan style.
Keuntungan utama dari metode ini adalah kamu tidak perlu menulis CSS
dari awal karena Tailwind telah menyediakan serangkaian utility classes
yang siap digunakan.

Sebagai contoh, jika kamu ingin menerapkan display: flex pada

elemen, kamu tidak perlu membuat class CSS baru dalam
stylesheet-mu. Cukup tambahkan class flex dari Tailwind ke elemen
tersebut dalam HTML dan secara otomatis elemen akan
menerapkannya.

Berbeda dengan framework CSS lainnya yang sering kali membatasi

kreativitas dengan komponen pre-styled, Tailwind CSS memungkinkan
kamu 'membangun' daripada 'menyesuaikan', memberikan kontrol
penuh atas setiap elemen desain.
Hasilnya, kamu dapat lebih leluasa dalam mewujudkan ide kreatif dan
menghasilkan user interface yang tidak hanya indah, tetapi juga
fungsional.

Dalam artikel ini, kamu akan menemukan wawasan mendalam tentang

bagaimana Tailwind CSS bisa mengubah alur kerja pengembangan web,
mempercepat proses pembuatan UI, dan memberi kamu kebebasan
untuk bereksperimen dengan desain.

Tailwind CSS adalah kerangka kerja CSS yang diciptakan oleh

Adam Wathan, Jonathan Reinink, David Hemphill, dan Steve Schoger.
Diperkenalkan pada tahun 2017, Tailwind CSS memberikan pendekatan
baru dalam pengembangan antarmuka pengguna (UI) dengan fokus
pada penggunaan kelas utilitas.

Awal Mula:
● Tailwind CSS muncul sebagai tanggapan terhadap kebutuhan
pengembang untuk meningkatkan produktivitas dalam pengembangan
UI.
● Penciptanya menyadari bahwa kebanyakan proyek UI memiliki pola
yang serupa dalam hal styling, sehingga mereka menciptakan kerangka
kerja yang memanfaatkan kelas-kelas utilitas untuk mengatur tampilan.

Filosofi:
● Salah satu poin utama dalam filosofi Tailwind CSS adalah "utility-first".
Pendekatan ini mengubah cara pengembang memikirkan CSS, dengan
menggabungkan serangkaian kelas utilitas kecil untuk membangun
tampilan daripada menulis gaya CSS khusus.
● Ini memungkinkan pengembang untuk fokus pada struktur dan
fungsionalitas, sementara tampilan ditangani oleh kelas-kelas utilitas.
Pertumbuhan dan Penerimaan:
● Seiring waktu, Tailwind CSS mendapatkan popularitas yang signifikan di
kalangan pengembang web.
● Komunitas pengguna Tailwind tumbuh dengan cepat, dengan kontribusi
dari berbagai pengembang yang menyediakan sumber daya, tutorial,
dan plugin yang berbeda.

Pengembangan dan Iterasi:

● Tim pengembang Tailwind terus memperbarui dan meningkatkan
kerangka kerja ini dengan menambahkan fitur-fitur baru, perbaikan bug,
dan peningkatan performa.
● Mereka juga secara teratur memperbarui dokumentasi dan
menyediakan sumber daya bagi pengembang untuk mempelajari dan
memahami Tailwind CSS dengan lebih baik.
Tailwind CSS telah menjadi pilihan populer di antara pengembang web yang
mencari cara yang lebih cepat dan efisien untuk membangun UI yang
konsisten dan menarik. Dengan pendekatan yang unik dan filosofi yang kuat,
Tailwind CSS terus menjadi salah satu kerangka kerja CSS yang paling
diminati dan digunakan secara luas di komunitas pengembangan web.

Kenapa Pakai Tailwind CSS?

Saya sebelumnya pernah pakai framework yang berbasis komponen
seperti Bootstrap CSS, Bulma, MaterializeCSS, namun merasa kurang
puas dengan framework ini.
Mengapa?
Pertama saya merasa kurang bebas kustomisasi komponennya. Kalau
mau custom, harus override class yang udah ada.
Kedua, kode CSS dari komponen yang nggak dipakai akan ikut
nyangkut di CSS hasil build. Ini membuat ukuran CSS-nya jadi lebih
besar.
Walaupun saya coba pakai PurgeCSS, namun kadang hasil tampilannya
nggak maksimal, ada aja yang bermasalah.
Akhirnya, saya coba Tailwind.. dan merasa sangat puas dan bebas
kustomisasi tampilan web.
Hasil build kode CSS tailwind hanya akan menambahkan class-class
yang dipakai saja.

Kalau class-nya nggak dipakai, ya nggak akan ditambahkan. Ini yang

membuat hasil build CSS Tailwind lebih kecil dibandingkan Bootstrap,
Bulma, Materialize, dll.
Ada beberapa alasan mengapa seseorang mungkin memilih
Tailwind CSS sebagai kerangka kerja CSS pilihan mereka:
​ Pendekatan Utility-First yang Efisien: Tailwind CSS
mengadopsi pendekatan "utility-first", yang memungkinkan
pengembang untuk membuat tampilan dengan menambahkan
kelas-kelas utilitas ke elemen HTML, daripada menulis CSS
kustom. Ini dapat meningkatkan produktivitas dan
mempercepat proses pengembangan.
​ Konsistensi Desain yang Mudah Dicapai: Dengan
menggunakan kelas-kelas utilitas yang telah ditentukan,
pengembang dapat memastikan konsistensi desain di seluruh
proyek dengan mudah. Ini membantu dalam mempertahankan
gaya visual yang seragam dan profesional.
​ Fleksibilitas dan Adaptabilitas: Tailwind CSS menyediakan
berbagai kelas utilitas yang dapat digunakan untuk
memodifikasi tampilan dengan cepat. Dari warna, tipografi,
hingga tata letak, pengembang memiliki kendali penuh atas
bagaimana elemen UI ditampilkan.
​ Responsif secara Bawaan: Tailwind CSS dilengkapi dengan
fitur responsif yang memungkinkan pengembang
menyesuaikan tampilan untuk berbagai perangkat dan lebar
layar dengan mudah. Ini mempermudah pembuatan situs web
yang responsif tanpa perlu menulis banyak kode CSS
tambahan.
​ Dukungan Komunitas yang Kuat: Tailwind CSS memiliki
komunitas yang besar dan aktif, yang menyediakan berbagai
sumber daya, tutorial, dan plugin tambahan. Dukungan ini
memudahkan pengembang untuk mempelajari, berbagi, dan
menyelesaikan masalah terkait penggunaan Tailwind CSS.
​ Performa yang Optimal: Dibandingkan dengan beberapa
kerangka kerja CSS lainnya, Tailwind CSS terkenal karena
ukuran file yang kecil dan kinerja yang optimal. Hal ini
membuatnya cocok untuk digunakan dalam proyek-proyek di
mana performa menjadi faktor penting.
​ Kemudahan Integrasi dengan Proyek yang Ada: Tailwind CSS
dapat dengan mudah diintegrasikan dengan proyek yang
sudah ada, baik itu menggunakan kerangka kerja frontend
seperti React atau Vue.js, atau bahkan dalam proyek yang
dibangun dengan platform backend tertentu.
Dengan kombinasi keuntungan-keuntungan tersebut, Tailwind CSS
menjadi pilihan yang menarik bagi pengembang yang ingin
meningkatkan produktivitas, konsistensi desain, dan fleksibilitas
dalam pengembangan UI web.

Persiapan Alat untuk Belajar Tailwind

Ada tiga alat yang kita butuhkan untuk coding Tailwind:
1. Teks Editor – buat menulis kode
2. Web browser – buat ngeliat hasilnya
3. Nodejs – buat install library dan package
Nodejs dipakai buat menginstal Tailwind CSS dan juga beberapa modul
yang diperlukan.
Jika kamu belum menginstal Nodejs, silahkan baca:
● Cara Install Nodejs di Windows, Linux, dan Mac
Kemudian untuk text editor bebas, bisa pakai yang mana aja, sesuai
selera masing-masing.
Biasanya teks editor yang dipakai adalah:
● VSCode
● Sublime Text
● Atom
● web storm dll.
Pada tutorial ini saya akan menggunakan text editor Visual Studio Code,
karena fitur dan extensions yang ditawarkan dapat mempermudah
proses development.
Oya, di VS Code.. kamu bisa install ekstension Tailwind IntelliSense buat
mempermudah saat kamu kurang inget nama-nama class.
Lihat cara instalnya di website resmi Tailwind Intellisense.
Oke, selanjutnya untuk browser kita bebas menggunakan Chrome,
Mozilla, Safari, Brave dll.
Setelah semuanya siap, mari kita mulai praktik hand on Tailwind..

Membuat Project Tailwind

Ada dua cara yang bisa dilakukan untuk menggunakan Tailwind di dalam
project:
1. Menggunakan link CDN
2. Menggunakan NPM dari Nodejs
Mari kita coba keduanya.

1. Menggunakan Tailwind dari CDN

Menggunakan Tailwind dari CDN tidak direkomendasikan untuk dipakai
di production, karena kita nggak akan dapat hasil build CSS yang
optimal.
Tapi jika hanya untuk belajar Tailwind dan coba-coba, ini dibolehkan.
Gimana cara menggunakan Tailwind dari CDN?
Pertama siapkan dulu file atau kode HTML, kemudian di dalam tag
<head> tambahkan link CSS dengan alamat CDN Tailwind.
Mari kita coba!
Buat file dengan nama tailwind-from-cdn.html kemudian isi dengan kode
berikut: 1
tailwind-from-cdn.html
Menjelaskan
<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

<title>Coba Tailwind dari CDN</title>

<script src="https://cdn.tailwindcss.com"></script>

</head>

<body>

<h1 class="text-3xl font-bold underline">

Hello world!

</h1>

</body>

</html>
Setelah itu, buka dengan web browser.
Maka hasilnya:

Sangat mudah bukan.

Tapi ingat ya, CDN ini dipakai buat coba-coba dan belajar aja. Nggak
direkomendasikan untuk production.
Jika mau pakai Tailwind di production, maka kita harus menggunakan
Tailwind CLI dengan NPM.
Mari kita coba!

2. Membuat Project Tailwind dengan NPM

Pertama kita siapkan dulu folder baru untuk project.
Gunakan perintah:
mkdir belajar-tailwind
untuk membuat folder baru dari Terminal.

Setelah itu, masuk ke dalam folder yang sudah dibuat tadi dengan
perintah
cd belajar-tailwind
Kemudian seperti biasa, kita harus melakukan inisialisasi atau persiapan
awal dengan NPM di dalam folder ini.
Jalankan perintah:
npm init
Kemudian isi dengan data project, jika tidak mau diubah biarkan saja
kosong dengan menekan enter.
Perintah ini akan membuat file baru bernama package.json yang berisi
metadata project seperti (package name, version, description, author).
Selanjutnya kita akan menginstall tailwind css menggunakan npm.
Jalankan perintah ini di Terminal atau CMD:
npm install tailwindcss
untuk menginstall Tailwind ke dalam project.
Tunggulah sampai prosesnya selesai.
Setelah itu, lanjutkan membuat file konfigurasi tailwind.
Jalankan perintah:
npx tailwindcss init
Perintah ini akan membuat file baru bernama tailwind.config.js. File ini
berisi konfigurasi yang dibutuhkan Tailwind.
Berikut tampilan dari project setelah melakukan proses instalasi tailwind.
Kemudian, kita akan melakukan konfigurasi path konten pada file
tailwind.config.js.
Menjelaskan
/** @type {import('tailwindcss').Config} */

module.exports = {

content: ["./src/**/*.{html,js}"],

theme: {

extend: {},

},

plugins: [],
}
Perhatikan pada bagian content:, di sana kita menambahkan path
./src/**.
Artinya saat kita melakukan build CSS, si Tailwind akan mencari
class-class apa saja yang dipakai di file HTML dan JS pada path
tersebut.
Setelah itu, buat folder baru dengan nama src di dalam project.
Kemudian buat file CSS baru di dalam src dengan nama input.css dan
isi seperti ini:
@tailwind base;

@tailwind components;

@tailwind utilities;
Selanjutnya buatlah file index.html di dalam folder src untuk
menggunakan class-class dari Tailwind.
Isi file index.html seperti ini:
Menjelaskan
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width,
initial-scale=1.0">

<link rel="stylesheet" href="/dist/output.css"/>

<title>Project Tailwind dengan NPM</title>

</head>

<body>

<h1 class="text-3xl font-bold text-teal-700">Petani Kode</h1>

</body>

</html>

Perhatikan link CSS di HTML ini 👆. Kita menulisnya seperti ini:

/dist/output.css

Karena kita akan buka di Live server atau localhost. Jika kamu mau
langsung buka tanpa live server, cukup tuliskan seperti ini tanpa /
../dist/output.css

Tanda ../ artinya kita mau akses file CSS yang berada di parent direktori.
Ini karena kita menyimpan file HTML-nya di dalam folder src.
O iya, file dist/output.css ini belum ada. File ini akan dibuat otomatis oleh
Tailwind.
Caranya:
Jalankan perintah berikut:
npx tailwindcss -i src/input.css -o dist/output.css
Perintah ini 👆 bertujuan untuk membuat file CSS (output.css)
berdasarkan class-class yang dipakai pada path konten (index.html).
Ini hasil build-nya:
Jika kamu ingin hasil build-nya di-optimasi (minify), gunakan opsi
--minify di belakangnya.
Contoh:
npx tailwindcss -i src/input.css -o dist/output.css --minify
Hasil output.css akan di-minify.

Hasil build yang minify ini cocok dipakai di production, karena ukurannya
lebih kecil dan sudah dioptimasi.
Jika kamu membuka file index.html di browser sekarang, maka tidak
akan ada hasil CSS dari Tailwind.

Tenang..

Jangan panik!
Ini karena kita menuliskan di href dengan /dist, seharusnya ../dist/
biar dia membaca folder dist.
Coba ubah /dist/ menjadi ../dist/.
<link rel="stylesheet" href="../dist/output.css" />
Maka hasilnya:
Menggunakan Live Server
Alur kerja kita di project Tailwind dengan NPM adalah seperti ini:
1. Ubah atau gunakan class di file HTML
2. Jalankan perintah untuk build CSS Tailwind
3. Lihat hasilnya di browser
Ini cukup merepotkan, karena harus dilakukan berulang-ulang.
Biar tidak begini, kita bisa pakai Live server dan membuat custom
script sendiri di package.json.
Silahkan buka file package.json, lalu di bagian "scripts" buat
menjadi seperti ini:
package.json
Menjelaskan
{

"name": "belajar-tailwind",

"version": "1.0.0",

"description": "belajar tailwind",

"main": "index.js",

"scripts": {

"dev": "tailwindcss -i src/input.css -o dist/output.css --watch",

 "test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"dependencies": {

"tailwindcss": "^3.1.8"

}
Pada script ini, kita menentukan perintah untuk build CSS tailwind
dengan opsi --watch.
Ini artinya Tailwind akan memantau perubahan yang terjadi pada
konten, lalu langsung melakukan build otomatis.
Setelah itu, install extension Live Server Preview di VS Code.

Extension ini buat buka live preview langsung di VS Code, tanpa

harus buka web browser.
Nah sekarang mari kita coba!
Buka terminal di VS Code, lalu jalankan perintah ini:
npm run dev
Ini akan menjalankan perintah yang sudah kita definisikan di
package.json.
Setelah itu, klik kanan pada file index.html kemudian pilih show
preview.

Tutorial Tailwind: Membuat Card dengan

Image Zoom-in Saat Hover

#Tailwind#CSS

Di tutorial Tailwind kali ini, kita akan belajar membuat komponen Card
dengan efek image zoom-in saat mouse hover.
Kira-kira preview-nya seperti ini:
Gimana cara buatnya di Tailwind?
Mari kita pelajari..
Membuat File HTML
Buatlah file HTML baru dengan nama card-image-zoom-in.html dan isi
seperti ini:
card-image-zoom-in.html
Menjelaskan
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"

/>

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Tailwind Card Image Zoom-in</title>

<script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="bg-gray-200">

<!-- di sini kita akan menampilkan card -->

</body>

</html>
Pada kode HTML ini, kita menggunakan Tailwind dari CDN. Ini supaya
cepat dan gak ribet setup-setup pakai NPM.
Oke, setelah itu.. lanjut!

Membuat Komponen Card

Kemudian, pada bagian <body>, tambahkan kode HTML seperti ini
untuk membat card.
Menjelaskan
<div class="p-4 m-8 w-80 bg-white shadow-md rounded-xl">

<picture class="rounded-lg block">

<img src="https://picsum.photos/360/240" />

</picture>

<h1 class="mt-4 mb-2 text-xl font-bold">Judul Card di sini</h1>

<p class="text-sm text-gray-600">

Keterangan pendek tentang card di sini. Biasanya panjangnya dua

sampai tiga baris, biar terlihat rapi.
</p>

</div>
Ini 👆 kode untuk membuat komponen card, kamu bisa atur ukuran
lebar, padding, dan margin dengan mengubah class p, m, dan w.
● p-4 artinya paddingnya sebesar 1rem atau 16px;
● m-4 artinya marginnya sebesar 1rem atau 16px;
● w-80 artinya lebarnya sebesar 20rem atau 320px;
Ini bisa kamu lihat di dokumentasi Tailwind.
Oke, sekarang coba buka card-image-zoom-in.html di browser.
Maka hasilnya:

Yay! Sejauh ini kita sudah berhasil membuat komponen Card.

Selanjutnya kita akan membuat efek Zoom-in pada image saat di hover
pointer

Membuat Efek Zoom-in Image

Untuk membuat effek zoom-in sebenarnya kita hanya perlu
memperbesar gambarnya dengan class scale-.
Mari kita coba!
Ubahlah kode komponen card tadi menjadi seperti ini:
Menjelaskan
<div class="p-4 m-8 w-80 bg-white shadow-md rounded-xl">
<picture class="rounded-lg block">

<img

class="hover:scale-125"

src="https://picsum.photos/360/240"

/>

</picture>

<h1 class="mt-4 mb-2 text-xl font-bold">Judul Card di sini</h1>

<p class="text-sm text-gray-600">

Keterangan pendek tentang card di sini. Biasanya panjangnya

dua sampai tiga baris, biar terlihat rapi.

</p>

</div>
Pada kode ini kita melakukan scale image dengan class
hover:scale-125. Artinya image akan diperbesar menjadi 125 (1.25)
pada saat hover.
Hasilnya:
Imagenya berhasil di-zoom, tapi ini bukan seperti yang kita
inginkan.
Kita ingin:
“Ukuran gambarnya tetap, tapi hanya zoom-in pada bagian dalam
gambar saja”
Ini bisa kita lakukan dengan menambahkan overflow-hidden pada
kontainer gambar, yakni elemen <picture>.
Silahkan ubah kodenya menjadi seperti ini:
Menjelaskan
<div class="p-4 m-8 w-80 bg-white shadow-md rounded-xl">

<picture class="rounded-lg block overflow-hidden">

<img

class="hover:scale-125"

src="https://picsum.photos/360/240"

/>

</picture>

<h1 class="mt-4 mb-2 text-xl font-bold">Judul Card di sini</h1>

<p class="text-sm text-gray-600">

Keterangan pendek tentang card di sini. Biasanya panjangnya

dua sampai tiga baris, biar terlihat rapi.

</p>

</div>
Hasilnya:
Mantap 👍
Tapi transisinya terlalu cepat. 🤔
Menentukan Durasi dan Transisi di Tailwind
Biar terlihat smooth transisi efek zoom-in imagenya, kita perlu
menambahkan class duration dan ease-in.
● Class duration digunakan untuk menentukan seberapa lama
transisi dilakukan
● Class ease-in digunakan untuk menentukan kurva timeline
dari waktu, selain ease-in ada juga linear, ease-out,
ease-in-out.
Mari kita coba!
Silahkan ubah kode komponen card menjadi seperti ini:
Menjelaskan
<div class="p-4 m-8 w-80 bg-white shadow-md rounded-xl">

<picture class="rounded-lg block overflow-hidden">

 <img

class="hover:scale-125 ease-in duration-150"

src="https://picsum.photos/360/240"

/>

</picture>

<h1 class="mt-4 mb-2 text-xl font-bold">Judul Card di sini</h1>

<p class="text-sm text-gray-600">

Keterangan pendek tentang card di sini. Biasanya panjangnya

dua sampai tiga baris, biar terlihat rapi.

</p>

</div>
Class duration-150 artinya kita ingin menentukan durasi transisi
selama 150ms.
Maka hasilnya:
Nah, ini baru mantap-tapp 👍
Apa Selanjutnya?
Kita sudah berhasil membuat card dengan efek image zoom-in saat
hover.
Intinya untuk membuat efek ini, kita butuh class scale,
overflow-hidden, duration, dan ease-in.
Sisanya hanya tambahan biar komponennya terlihat lebih elegan

Membuat tombol yang menarik dengan Tailwind CSS bisa dilakukan

dengan menggabungkan kelas-kelas utilitas yang disediakan. Berikut
adalah langkah-langkah untuk membuat tombol yang menarik:

1. Tentukan Tipe Tombol:

● Pilih apakah tombol Anda akan menjadi tombol primer, sekunder,
atau mungkin tombol aksi khusus.

2. Tentukan Ukuran Tombol:

● Gunakan kelas-kelas seperti w-[ukuran] dan h-[ukuran] untuk
menentukan lebar dan tinggi tombol, misalnya w-40 untuk lebar 40
piksel.

3. Beri Efek Hover:

● Gunakan kelas-kelas hover:[efek] untuk memberikan efek saat
tombol dihover. Misalnya, hover:bg-blue-500 untuk mengubah
warna latar belakang saat dihover.
4. Beri Efek Fokus:
● Gunakan kelas-kelas focus:[efek] untuk memberikan efek saat
tombol difokuskan. Misalnya, focus:outline-none untuk menghapus
garis pinggir saat difokuskan.

5. Gaya Tambahan:
● Beri gaya tambahan seperti bayangan, transisi, atau efek lainnya
untuk menambah kesan menarik. Gunakan kelas-kelas seperti
shadow-md atau transition duration-300.

Contoh Tombol Primer Sederhana:

html
Copy code
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2
px-4 rounded">
Tombol Primer
</button>

Contoh Tombol Sekunder dengan Icon:

html
Copy code
Menjelaskan
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold
py-2 px-4 rounded inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2"
viewBox="0 0 20 20" fill="currentColor">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
<path fill-rule="evenodd" d="M0 10a10 10 0 1120 0 10 10 0 01-20 0zm2
0a8 8 0 1016 0 8 8 0 00-16 0z" clip-rule="evenodd" />
</svg>
Tombol Sekunder
</button>

Dengan menggabungkan kelas-kelas utilitas seperti yang dijelaskan di

atas, Anda dapat membuat tombol yang menarik dengan berbagai gaya
dan efek yang sesuai dengan kebutuhan desain Anda. Selain itu, Anda
juga dapat menyesuaikan tombol dengan warna, ukuran, dan efek yang
sesuai dengan gaya visual dari proyek Anda.

TailwindCSS cukup populer belakangan ini.

Saya menyukai Tailwind, karena ia berbasis utility.

Ini memberi kita kebebasan dalam membuat komponen.
Dulu sewaktu Tailwind baru rilis, Tailwind cukup sulit digunakan
pada Hugo. Karena Hugo waktu itu belum ada fitur Pipe.
Fitur Pipe memungkinkan kita untuk melakukan pemrosesan
asset, seperti SASS, PostCSS, dan Javascript.
Nah, inilah yang akan kita gunakan untuk memproses
TailwindCSS di Hugo.
Gimana caranya?
Mari kita pelajari!
Step 0: Persiapan
Sebelum kita mulai, ada beberapa hal yang harus dipersiapkan
terlebih dahulu.
Apa saja itu?
1. Hugo Extended Version
2. Nodejs dan NPM
Mengapa harus pakai Hugo Extended version?
Ini karena kita membutuhkan fitur pipe untuk melakukan
generate CSS dari Tailwind. Fitur pipe cuma ada di extended
version. Sedangkan di versi biasa, fitur ini tidak ada.

Kemudian, kita akan menggunakan NPM untuk menginstal

Tailwind CSS dan beberapa libray tambahan seperti postcss.
Checklist:
● Pastikan kamu menggunakan Hugo Extended Version
● Pastikan Nodejs dan NPM sudah terinstal di komputermu
Jika keduanya sudah siap, silahkan lanjutkan!

Step 1: Membuat Project Web Hugo

Jika kamu belum memiliki web Hugo, maka buatlah dulu.
Gunakan perintah berikut untuk membuatnya:
hugo new site hugo-tailwind
Tunggu beberapa saat, project web hugo kita akan jadi.
Tapi jika kamu sudah ada webnya, kamu bisa lanjut ke langkah
berikutnya.
Step 2: Initialize Project Nodejs
Karena kita akan menggunakan NPM untuk menginstal
Tailwind, maka kita membutuhkan package.json untuk
menyimpan konfigurasinya dan versinya.
Silahkan ketik perintah berikut untuk membuat project Nodejs
di dalam folder web hugo.
npm init -y
Perintah ini akan menghasilkan file package.json yang berisi
konfigurasi untuk project berbasis Nodejs.

Step 3: Install Tailwind

Karena kita membutuhkan TailwindCSS, maka kita harus
menginstalnya.
Silahkan ketik perintah berikut untuk menginstal:
npm install -D tailwindcss postcss postcss-cli autoprefixer
Tunggulah sampai proses instalasi selesai.
Oya, di tutorial ini.. kita akan menggunakan postcss, jadi kita
juga instal aja sekalian.

Step 4: Konfigurasi Tailwind

Setelah semuanya siap, sekarang kita tinggal melakukan
konfigurasi TailwindCSS.
Ketik perintah berikut untuk membuat file konfigurasi:
npx tailwindcss init
Perintah ini akan membuat file baru dengan nama
tailwind.config.js. File ini akan kita gunakan untuk konfigurasi
Tailwind.
Silahkan ubah isinya menjadi seperti ini:
Menjelaskan
module.exports = {

content: ["./layouts/**/*.html"],

theme: {

extend: {},

},

plugins: [],

}
Setelah itu, kita butuh satu lagi file konfigurasi untuk postcess.
Buatlah file baru di folder project dengan nama
postcss.config.js dan isi sebagai berikut:
Menjelaskan
module.exports = {

plugins: {
 tailwindcss: {},

autoprefixer: {},

Step 5: Membuat File CSS

Buatlah folder baru dengan nama assets, kemudian di
dalamnya buat lagi folder dengan nama css.
Setelah itu, buat file CSS baru di dalam folder css dengan
nama main.css.
Isilah file main.css dengan kode berikut:
@tailwind base;

@tailwind components;

@tailwind utilities;
Pada file CSS ini, kita memanggil fungsi tailwind. Nantinya
akan diproses oleh tailwindcss dan postcss.
Step 6: Membuat Layout untuk Index
Buatlah file index.html di dalam folder layouts dengan isi
sebagai berikut:
Menjelaskan
<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

{{ $styles := resources.Get "css/main.css" | postCSS }}

{{ if .Site.IsServer }}

<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />

{{ else }}

{{ $styles := $styles | minify | fingerprint |

resources.PostProcess }}

<link rel="stylesheet" href="{{ $styles.RelPermalink }}"

integrity="{{ $styles.Data.Integrity }}" />

{{ end }}

</head>

<body>

<h1 class="text-3xl font-bold underline">

Hello world!

</h1>

</body>
</html>
Pada layout ini, kita menggunakan beberapa class dari Tailwind
seperti text-3xl , font-bold, dan underline.
Apakah ini akan berhasil?
Mari kita coba!

Step 7: Percobaan Menjalankan Hugo

Ketik perintah berikut untuk menjalankan server hugo.
hugo server
Jika tidak ada error, maka konfigurasi Tailwind kita berhasil.
Silahkan buka localhost:1313 pada web browser, maka
hasilnya:

Yap berhasil!
Tailwind berhasil kita gunakan pada Hugo.
Berikutnya kita akan coba gunakan pada Theme. Caranya
hampir sama, cuma beda di alamat PATH yang dipakai di
konfigurasi.

Step 8: Menggunakan Tailwind untuk Theme

Jika ingin menggunakan Tailwind khusus untuk tema tertentu,
maka kita bisa buat tema baru lalu menambahkan Tailwind di
sana.

Step 8.1: Membuat Tema Baru

Mari kita buat tema baru, gunakan perintah berikut:
hugo new theme masukangin
Perintah ini akan menghasilkan folder baru dengan nama
masukangin. Folder ini berisi layout untuk theme.

Step 8.2: Konfigurasi Tawilwind

Buka file tailwind.config.js.
Kemudian tambahkan PATH folder layout theme masukangin
ke dalam konfigurasi Tailwind seperti ini.
Menjelaskan
module.exports = {

content: [

"./layouts/**/*.html",

"./theme/masukangin/layouts/**/*.html",

],

theme: {

extend: {},

},

plugins: [],

}
Intinya, di mana pun kita menggunakan cass Tailwind, maka
wajib kita tambahkan di sana.
Mungkin kedepan kita akan menggunakannya di content dan
shortcodes, maka bisa juga ditambahkan di sana.
Oke lanjut..

Step 8.3: Folder Assets ke Theme

Pindahkan folder asstes ke folder tema masukangin.

Sebenarnya ini boleh dilakukan boleh juga tidak. Namun, agar

asset tema kita berada di satu tempat.. baiknya kita pindah ke
sana.

Step 8.4: Membuat Layout

Buka file partials/head.html pada tema masukangin, kemudian
tambahkan kode seperti ini:
Menjelaskan
{{ $styles := resources.Get "css/main.css" | postCSS }}

{{ if .Site.IsServer }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />

{{ else }}

{{ $styles := $styles | minify | fingerprint |

resources.PostProcess }}

<link rel="stylesheet" href="{{ $styles.RelPermalink }}"

integrity="{{ $styles.Data.Integrity }}" />

{{ end }}
Setelah itu, buka file layouts/index.html pada tema masukangin
dan tambahkan kode berikut di sana.
Menjelaskan
{{ define "main" }}

<h1 class="text-3xl font-bold text-blue text-teal-500">

Theme Masuk Angin dengan Tailwind

</h1>
{{ end }}
Kemudian, agar file index.html ini tidak bentrok dengan
index.html yang ada di luar tema.. silahkan hapus index.html
yang di luar tema.

Step 8.5: Apply Theme

Terakhir untuk bisa menggunakan tema, kita harus
menambahkan konfigurasi di config.toml milik Hugo.
Silahkan buka config.toml, kemudian ubah theme menjadi
seperti ini:
Menjelaskan
baseURL = 'http://example.org/'

languageCode = 'en-us'

title = 'My New Hugo Site'

theme = 'masukangin'

Step 8.6: Percobaan

Setelah semuanya selesai, sekarang coba jalankan ulang
server hugo dengan perintah:
hugo server
Maka hasilnya:
Mantap 👍 tema kita sudah bisa menggunakan Tailwind.
Apa itu PHP?

PHP (Hypertext Preprocessor) adalah bahasa skrip sisi server yang

dirancang untuk pengembangan web. PHP digunakan untuk
membuat halaman web dinamis yang dapat berinteraksi dengan
pengguna, berkomunikasi dengan database, dan melakukan
banyak tugas lainnya.
Sejarah dan Evolusi PHP
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1994.
Awalnya, PHP adalah sekumpulan skrip CGI yang disebut
"Personal Home Page Tools." Sejak saat itu, PHP telah
berkembang menjadi bahasa pemrograman yang kuat dan
digunakan secara luas di seluruh dunia.

Kelebihan dan Kekurangan PHP

● Kelebihan:

● Mudah dipelajari dan digunakan

● Kompatibel dengan berbagai database
● Komunitas yang besar dan aktif
● Banyak framework dan alat bantu
Pengenalan Web Server dan Server Side Scripting
-Web Server
Web Server merupakan sebuah perangkat lunak dalam server
yang berfungsi menerima permintaan (request) berupa
halaman web melalui HTTP atau HTTPS dari klien yang
dikenal dengan browser web dan mengirimkan kembali
(response) hasilnya dalam bentuk halaman-halaman web yang
umumnya berbentuk dokumen HTML.
 Standar Web Architecture

Dynamic Web Architecture

Instalasi Apache, PHP dan MySQL dengan XAMPP

Proses instalasi Apache, PHP dan MySQL seringkali menjadi
kendala terutama bagi pemula yang baru belajar pemrograman
web dengan PHP. Hal tersebut disebabkan karena software
tersebut harus diinstall dan dikonfigurasikan satu per satu. Bagi
belum mengerti benar, tentu sering mengalami kesulitan,
apalagi bagi kita yang belajar secara mandiri. Namun jangan
berkecil hati, saat ini banyak tersedia aplikasi paket yang
menyatukan ketiga software tersebut (Apache, PHP dan
MySQL) ke dalam satu installer. Proses instalasinya pun dapat
dilakukan dengan mudah dan cepat, hanya perlu next, next,
and finish. Beberapa aplikasi paket tersebut antara lain: 1.
XAMPP (versi Windows) dan LAMPP (versi Linux) yang dapat
didownload di http://apachefriends.org. 2. WAMP Server. 3.
APPServ 4. PHPTriad. Penulis sendiri menyarankan
pemakaian XAMPP atau WAMP Server karena versi software
di dalamnya menggunakan versi terbaru.
Persiapan Instalasi
1. Pastikan komputer Anda belum terinstall web server lain
seperti IIS atau PWS karena dapat menyebabkan bentrok
dengan web server Apache. Namun demikian, jika Anda masih
tetap mempertahankan program tersebut, setelah instalasi
selesai Anda dapat mengkonfigurasikan Apache secara
manual dengan mengganti nomor port yang digunakan.

2. Download Source XAMPP versi stabil terbaru di

http://apachefriends.org. Pilih versi sesuai dengan sistem
operasi yang Anda gunakan (tersedia versi untuk Windows,
Linux dan Mac).

3. Pastikan komputer yang Anda gunakan berjalan dengan baik

dengan kapasitas memori dan hardisk yang masih mencukupi.
Proses Instalasi XAMPP
1.Jalankan file installer XAMPP
xampp-win32-x.x.x-installer.exe.
2. Akan ditampilkan window instalasi XAMPP. Pilih Next >
untuk memulai proses instalasi.