Membuat Web Page Biodata menggunakan HTML, CSS, JavaScript, dan PHP
Untuk memudahkan memahami bagaimana HTML dan CSS sebagai markup language bekerja dengan JavaScript dan PHP sebagai programming language pada Web server, diperlukan aplikasi seperti Text Editor dan XAMPP.
- VSCode Text-Editor, salah satu text-editor yang populer digunakan berfungsi untuk memanipulasi teks sebagai
source codebaik untuk membuat, mengedit, menghapus, serta mengatur teks dalam berbagai format. - XAMPP Web-Server, sebuah perangkat lunak bersifat open source, berfungsi sebagai Web server. Nama XAMPP merupakan singkatandari X (Menunjukkan cross paltform baik OS Linux/Windows/MacOS), Apache (Web Server), MySQL (sistem manajemen basis data), PHP (bahasa pemrograman server-side), dan Perl (Practical Extraction and Reporting Language, sebagai eksentsi tambahan pada Apache.
Pastikan telah men-download dan meng-install kedua aplikasi tersebut untuk mempraktikkan membuat Web page Biodata. Penulis melakukan percobaan menggunakan sistem operasi Windows, sehingga selain OS tersebut dapat menyesuaikan baik untuk meng-install aplikasi VSCode dan XAMPP (mengetahui folder kerja Web server) secara mandiri.
A. Hyper Text Markup Language (HTML)
HTML (bahasa markah/tanda) digunakan untuk mendefenisikan konten dan struktur dari sebuah Web page menggunakan serangkaian elemen untuk memberi tahu Web Browser bagaimana suatu halaman Web ditampilkan.
Gambar Anatomi elemen HTML(Sumber: @_georgemoller)
Pada Gambar Anatomi elemen HTML diatas, terlihat bahwa sebuah HTML element terdiri dari atau didefenisikan dengan opening/start tag, beberapa konten/isi (some content), dan di akhiri dengan closing/end tag. Pada elemen HTML, attribute bersifat opsional, namun diperlukaan saat ingin mendefenisikan rule CSS.
B. Cascading Style Sheet (CSS)
CSS dapat diartikan sebagai bahasa desain untuk memberikan gaya (style) pada lembar/sheet dokumen HTML secara berjenjang/bertingkat/cascading. Dengan kata lain CSS menjelaskan bagaimana elemen HTML harus ditampilkan di Web Browser--termasuk mengatur layout halaman. Berikut ilustrasi sederhana penerapan CSS pada elemen HTML.
Gambar Ilustrasi Penerapan CSS pada elemen HTML(Sumber: https://tutorial.techaltum.com/css.html)
Sintaks atau aturan/rule penulisan kode CSS untuk memberikan style pada element HTML, bergantung pada pendefenisian baik melalui tag, attribute, Pseudo-class (keadaan/state khusus dari sebuah elemen HTML, misal a:hover), atau Pseudo-element (untuk menata bagian tertentu dari elemen HTML, misal p:first-line untuk CSS1 dan CSS2 atau p::first-line untuk CSS3), dan hal ini disebut dengan selector.
Gambar Anatomi/Struktur Blok Penulisan CSS(Sumber: https://bccart87.claudiajacques.com/tutorials/css/)
CSS Writing Style
CSS dapat dituliskan (code) pada dokumen HTML dengan 3 (tiga) cara yaitu sebagai berikut.
1). Internal CSS
Kode CSS dituliskan didalam tag <style> yang didefenisikan didalam elemen/tag <head> pada dokumen HTML. Pada tag <style> walaupun bersifat opsional sebaiknya disertakan atribut type="text/css" untuk menyatakan skrip style sheet atau konten dari CSS itu sendiri.
2). External CSS
Kode CSS ditulis dalam file terpisah dengan ekstensi .css dan pada elemen <link>, serta dilengkapi dengan atribut rel="stylesheet" dan href="style.css", untuk mendefenisikan skrip style sheet dengan cara melampirkan pada sebuah file dengan nama style.css--nama file dapat diganti dengan nama lainnya namun harus berekstensi.css. Sama seperti Internal CSS, pada External CSS tag link didefenisikan didalam elemen/tag <head> pada dokumen HTML.
Berikut ini isi dari file style.css untuk mendefenisikan skrip external CSS.
3). Inline CSS
Kode CSS ditulis pada suatu tag HTML secara langsung, di dalam atribut style, sehingga hanya akan mempegaruhi tag tersebut saja atau bersifat individual. Oleh karena itu, penggunaan Inline CSS sangat sesuai jika hanya ingin menerapkan style/gaya hanya pada satu kemunculan elemen pada HTML saja.
Perlu diingat bahwa Inline CSS memiliki prioritas utama dibanding dengan Internal CSS dan External CSS.
C. JavaScript Programming Language
JavaScript (JS) juga dikenal sebagai Bahasa Pemrograman Web karena merupakan satu-satunya bahasa pemrograman untuk browser Web (menjadikannya ringan/light weight) dan merupakan bahasa pemrograman high level yang dibangun dengan pendekatan object-orited programming (pemrograman berbasis objek) sehingga cukup mudah untuk dipelajari. Pada Web development pemrograman JavaScript dapat digunakan baik untuk font-end maupun back-end (NodeJS).
Secara garis besar, HTML digunakan untuk membuat struktur halaman Web, sedangkan CSS untuk memberikan style berdasarkan elemen HTML. Untuk menambahkan agar suatu elemen HTML dapat bersifat dinamis, maka diperlukan JavaScript--dalam konteks fokus terhadap front-end.
Sama halnya dengan CSS, JavaScript dapat dituliskan (code) pada dokumen HTML dengan 3 (tiga) cara yaitu sebagai berikut.
1). Internal JS
Sejumlah skrip JS dapat di tempatkan dalam dokumen HTML pada bagian tag <body>, <head>, atau di keduanya menggunakan <script>.
2). External JS
Sejumlah skrip JS dapat di tempatkan dalam dokumen HTML pada bagian tag <body>, <head>, atau di keduanya menggunakan <script>.
Pada External JS, kode ditulis pada file eksternal dengan ekstensi .js dan kemudian ditautkan dengan tag script yang dilengkapi dengan atribut src sebagai source/sumber file JS. Berikut ini adalah contoh js eksternal.
Berikut ini isi dari file script.js untuk mendefenisikan skrip external JavaScript.
3). Inline JS
kode inline JS dapat ditulis langsung di dalam tag html. Namun sebaiknya skrip harus ditulis dalam file terpisah (eksternal) atau dalam tag <script> (internal).
D. Membuat Web Page Biodata
Setelah memahami mengenai HTML, CSS, dan JavaScript bekerja, utamanya dari pengkodean client-side, dari sudut pandang praktis, berikutnya belajar mengenai pengkodean server-side menggunakan PHP dan Web server (Apache).
Tahap-1. Membuat Folder Projek pada Web Server
Pastikan telah menginstall aplikasi XAMPP. Kemudian buatlah folder dengan nama biodata pada sub folder C:\xampp\htdocs\ (Direktori XAMPP pada OS Windows).
Tahap-2. Membuat File Index
File index.php adalah file utama yang akan pertama kali dibaca oleh Web server secara default/bawaan. Simpan source code berikut ini kedalam file index.php.
Pada file index.php berisikan kode HTML, JavaScript (internal JS), serta code PHP.
Tahap-3. Membuat File CSS
Pada file index.php, penulisan skrip CSS didefenisikan secara eksternal. Oleh karena itu simpan source code berikut ini kedalam file style.css.
Tahap-4. Akses Web Server
Pastikan telah menjalakan Apache Web server pada XAMPP Control Panel terlebih dahulu. Kemudian buka aplikasi Web Browser dan dengan menuju ke alamat http://localhost/biodata atau menggunakan IP-Address komputer. Selanjutnya isi data yang diminta pada formulir yang disediakan. Kemudian lakukan pengamatan dari apa yang telah dikerjakan.
Pada source code file index.php diatas, disimpan kedalam ekstensi .php, merupakan tanda bahwa suatu Web page yang dibuat mengandung kode PHP (bahasa pemrograman server-side), agar dapat dieksekusi oleh Web server sebelum mengirimkan output/hasilnya ke end-user/pengguna (umumnya melalui aplikasi Web Browser).
Kesimpulan
Web Development dapat diartikan sebagai bagaimana menampilkan berbagai hal (text, gambar, audio, video, dokumen, dll) pada halaman Web.
Meskipun HTML, CSS, dan JavaScript memiliki fungsional yang berbeda-beda, namun diperlukan untuk membangun halaman Web. Oleh karena itu perkembangan teknologi Web tidak terlepas dari 3 (tiga) hal tersebut, seperti HTML digunakan untuk mendefinisikan elemen (sturktur dokumen Web), CSS untuk mengontrol tampilan halaman Web, dan JavaScript untuk memberikan interaksi dan fungsionalitas dari halaman Web seperti agar lebih interaktif dan dinamis.
Warning!
We are not responsible for any loss whatsoever due to this site, also if you want to take this article please read terms of use or touch us via contact page.
If there is question, please discuss below. Very welcome and expected to provide corrections, criticisms, and suggestions.
Be the first :D
