7+ Situs Belajar PHP Gratis (Dari Pemula Sampai Mahir)

Mempelajari PHP sendiri adalah hal yang cukup penting, terutama untuk Anda yang ingin membuat website WordPress dan mengelolanya sendiri. Seperti diketahui PHP merupakan bagian penyusun utama dari WordPress.

Mengapa Anda Harus Belajar PHP?

Apakah Anda tahu bahasa pemrograman yang paling banyak digunakan untuk membuat website? Berdasarkan statistik dari w3techs.com, PHP menempati urutan pertama dengan jumlah pengguna lebih dari 83 persen.

Berikut ini adalah alasan kenapa PHP adalah bahasa pemrograman yang layak dijadikan pertimbangan untuk membangun sebuah website.

1. Mudah Digunakan

Membuat website dengan PHP lebih mudah dilakukan. PHP dibuat supaya proses membuat website lebih mudah. Dengan mempelajari beberapa fungsi sederhana, Anda akan terbantu dalam membangun sebuah website.

Jika dibandingkan dengan Java, PHP tidak perlu dicompile. Anda hanya perlu menulis script kemudian menguploadnya ke server atau hosting yang Anda miliki dan Anda sudah bisa langsung mengaksesnya melalui browser.

2. Komunitas yang Besar

Komunitas adalah hal yang cukup penting ketika Anda akan mempelajari sebuah pemrograman. Hal tersebut dapat membantu Anda dalam mencari solusi ketika menghadapi masalah yang sulit Anda pecahkan sendiri. Anda hanya perlu bergabung dan mengajukan pertanyaan terkait masalah yang Anda temukan.

3. Ada Potensi Karier

Karena banyaknya jumlah website yang menggunakan PHP, otomatis peluang berkarier sebagai programmer PHP akan terbuka lebar. Selain itu adanya perusahaan besar yang menggunakan PHP, seperti Facebook, WikiPedia dan Slack, membuktikan PHP memiliki performa yang cukup baik.

3 Aplikasi Penting untuk Belajar PHP

Berikut adalah aplikasi yang Anda butuhkan untuk belajar PHP

Text Editor seperti Notepad++ atau Sublime Text

XAMPP, silakan ikuti tutorial cara install XAMPP

Browser seperti Mozilla atau Google Chrome

Pastikan tiga aplikasi tersebut sudah diinstal pada komputer Anda, setelah itu Anda dapat mencari salah satu sumber untuk mulai mempelajari PHP.

7+ Situs untuk Belajar PHP Dasar Sampai Mahir

1. W3Schools.com

W3Schools menyediakan tutorial untuk pemrograman website, salah satunya adalah PHP. Untuk belajar PHP online melalui website ini Anda hanya perlu mengakses bagian halaman PHP. Bagi Anda yang masih pemula, dapat mempelajari PHP dasar seperti syntax, variabel, string dan masih banyak lagi.

Sedangkan, jika Anda sudah menguasai PHP dasar, dapat langsung mempelajari bagaimana menghubungkan PHP ke database. Pada bagian ini, Anda akan mempelajari bagaimana melakukan koneksi dari PHP ke database.

Setelah Anda selesai mempelajari PHP, untuk menguji pemahaman, Anda dapat langsung mencoba kuis dengan menjawab pertanyaan yang tersedia.

2. Tizag.com

Tizag.com disediakan khusus bagi Anda yang ingin mempelajari dasar-dasar PHP. Dengan tutorial yang tersedia seperti bagaimana menampilkan data dengan menggunakan variabel, bagaimana menggunakan statement loop dan if/else, cara menggunakan POST dan GET.

Tujuan dari tutorial pada website tersebut adalah memberikan pemahan kepada user untuk dapat melakukan kustmisasi script PHP yang sudah didownload melalui link yang sudah tersedia di tizag.com.

3. Codeacademy

Codeacademy memiliki fitur tutorial PHP yang cukup menarik, pada setiap tahapan dari tutorial, terdapat penjelasan, code editor dan tampilan dari code yang dibuat seperti yang terlihat pada gambar di atas. Sehingga untuk menjalankan script pada tutorial PHP, Anda tidak perlu menginstal webserver di localhost, Anda hanya cukup memiliki koneksi internet dan web browser.

4. Learn-PHP.org

Learn-PHP.org adalah website yang menyediakan tutorial PHP interaktif. Anda hanya perlu memiliki koneksi internet, dan belajar PHP sekaligus menjalankan script langsung di halaman yang sama.

Karena code dapat dijalankan langsung, Anda tidak perlu memerlukan PHP terinstal di komputer. Hal ini akan lebih efisien ketika mempelajari PHP.

Situs ini menyediakan tutorial PHP secara gratis dan Anda juga bisa menjadi kontributor karena situs ini masih dalam tahap pengembangan sehingga untuk tutorialnya masih basic, pada saat artikel ini ditulis.

5. SoloLearn.com

SoloLearn.com menyediakan fitur yang cukup menarik untuk mempelajari bahasa pemrograman, salah satunya adalah PHP. Situs ini sangat cocok untuk Anda yang ingin mempelajari PHP baik melalui perangkat desktop maupun mobile, karena sudah tersedia aplikasi mobile (Android & iOS).

Untuk bisa menggunakannya, Anda perlu membuat akun terlebih dahulu, bisa menggunakan alamat email, akun Google atau Facebook.

Seperti tagline nya “Learn Playing. Play Learning”, Anda akan belajar sambil bermain melalui kuis interaktif yang tersedia.

6. Ilmuwebsite.com

Ilmuwebsite.com menyediakan tutorial PHP dalam bentuk artikel dan juga ebook. Meskipun tidak memiliki fitur seperti 3 website tutorial untuk belajar PHP yang telah dibahas sebelumnya, situs ini sangat cocok untuk Anda yang ingin belajar PHP online dari situs dengan tampilan bahasa Indonesia. Untuk jenis tutorial PHP yang disediakan pada website dan ebook, tersedia mulai dari tingkatan dasar sampai tingkat mahir.

7. Codecourse

Jika Anda suka belajar menggunakan media video, Codecourse adalah tempat yang tepat untuk memulai belajar PHP. Terdapat course gratis dan berbayar yang dapat Anda pilih. Anda juga dapat belajar PHP dari Youtube Codecourse.

Terdapat ratusan video belajar PHP dengan berbagai macam penerapan. Jika Anda tertarik dengan bahasa pemrograman lainnya, Codecourse juga menyediakan video tutorial JavaScrip, CSS, MySQL dan JQuery.

8. Udemy

Ya, siapa yang tidak kenal dengan website satu ini. Berbagai macam tutorial dapat Anda temukan di Udemy. Anda juga dapat membeli video tutorial belajar PHP di website ini. Namun, jika Anda tidak ingin mengeluarkan uang Anda bisa memilih video tutorial PHP gratis. Caranya sangat mudah, Anda tinggal mencari tutorial dengan kata kunci “PHP” kemudian pilih filter dan checklist pada pilihan Gratis.

Saat ini terdapat 56 video belajar PHP gratis di Udemy yang dapat Anda akses untuk memperdalam kemampuan Anda menguasai bahasa pemrograman PHP

Apa yang Bisa Dilakukan Setelah Belajar PHP?

• Menghasilkan halaman konten dinamis;
• Membuat, membuka, membaca, menghapus, mengisi, dan menutup file di server;
• Menambah, menghapus, memodifikasi informasi yang tersimpan di database;
• Mengontrol akses user;
• Melakukan enkripsi data, dll.

PHP dapat berjalan di berbagai sistem operasi seperti Windows, Linux, Unix, Mac OS X dan lainnya. Selain itu PHP kompatibel dengan hampir semua jenis web server seperti Apache, IIS dan yang lainnya.

Jadi dengan PHP Anda memiliki kebebasan menentukan sistem operasi dan web server yang diinginkan.

Sumber:

niagahoster.co.id

Read More

JSON Pengertian, Fungsi dan Cara Menggunakannya

JSON adalah turunan JavaScript yang digunakan dalam transfer dan penyimpanan data. Kekinian, bahasa ini sering dimanfaatkan dalam pembuatan aplikasi web.

Seperti yang tadi disebutkan, JavaScript object notation atau JSON adalah format yang digunakan untuk menyimpan dan mentransfer data.

Berbeda dengan XML (extensive markup language) dan format lainnya yang memiliki fungsi serupa, JSON memiliki struktur data yang sederhana dan mudah dipahami. 

JSON sendiri terdiri dari dua struktur, yaitu:

Kumpulan value yang saling berpasangan. Dalam JSON, contohnya adalah object. 

Daftar value yang berurutan, seperti array.

JSON juga tidak hanya dapat digunakan dengan JavaScript. Berikut ini adalah beberapa bahasa pemrograman lain yang mendukung penggunaan format tersebut:

• PHP
• Python
• Ruby
• C++
• Perl

Fungsi JSON

Fungsi JSON kurang lebih sama dengan XML. Sebelum JSON diciptakan, format bahasa markup ini sering digunakan dengan JavaScript dalam AJAX (asynchronous JavaScript and XML) untuk penyimpanan dan perpindahan data.

Berkat gabungan keduanya, developer dapat membuat halaman website di mana informasinya dapat diperbarui tanpa harus memuat ulang halaman tersebut. Ini sudah menjadi hal yang umum, terutama dengan menjamurnya tren aplikasi web.

Nah, JSON memiliki fungsi yang sama. Bedanya, ia memiliki beberapa keunggulan yang membuatnya lebih sering digunakan daripada XML, termasuk:

• File yang lebih ringan
• Struktur kode yang lebih sederhana
• Kode yang mudah dipahami oleh manusia

Agar Anda paham dengan ketiga keunggulan tersebut, mari simak contoh yang ada di poin berikutnya.

Perbandingan JSON dan XML

Seberapa sederhanakah kode JSON jika dibandingkan dengan kode XML? Untuk mengetahuinya, Anda dapat memperhatikan kedua contoh di bawah ini. Contoh pertama adalah kode XML.<users> <user> <username>Anton</username> <lokasi>Bandung</lokasi> </user> <user> <username>Budi</username> <lokasi>Semarang</lokasi> </user> <user> <username>Nana</username> <lokasi>Surabaya</lokasi> </user> <user> <username>Jamal</username> <lokasi>Tangerang</lokasi> </user> </users>

Nah, berikut ini adalah contoh kode JSON.{"users": [ {"username" : "Anton", "lokasi" : "Bandung"}, {"username" : "Budi", "lokasi" : "Semarang"}, {"username" : "Nana", "lokasi" : "Surabaya"}, {"username" : "Jamal", "lokasi" : "Tangerang"} ] }

Dapat Anda lihat bahwa kode JSON lebih ringkas karena tidak memerlukan tag pembuka dan penutup. Dengan demikian, kodenya juga lebih mudah dipahami. Di samping itu, kelebihan ini juga memberikan dua manfaat lainnya, yaitu:

Proses loading data yang lebih ringan karena ukuran file yang kecil.

Penulisan kode yang lebih cepat dengan kode yang sederhana.

Cara Menggunakan JSON

Ada dua hal yang perlu Anda pelajari agar dapat menggunakan JSON, yaitu syntax (cara penulisan) dan jenis value-nya. Untuk memahami keduanya, simak penjelasan di bawah ini. 

Syntax JSON

Pada contoh di bagian sebelumnya memang menunjukkan bahwa JSON memiliki struktur kode yang sederhana. Namun, mari lihat contoh yang lebih simpel lagi agar Anda tahu apa saja yang ada dalam syntax-nya:{"city":"New York", "country":"United States "}

JSON selalu dibuka dan ditutup dengan tanda {} atau kurung kurawal. Syntax-nya terdiri dari dua elemen, yaitu key dan value. Keduanya dipisahkan oleh titik dua agar jelas.

Contoh key adalah “city”, sedangkan “New York” adalah contoh value. Keduanya selalu dibuka dan ditutup dengan tanda kutip ganda. Perlu Anda ingat bahwa kedua tidak ada spasi di antara kedua elemen tersebut.

Apabila ada lebih dari satu pasang key dan value, Anda perlu memisahkannya dengan tanda koma yang diikuti spasi. Ini dapat Anda lihat pada contoh di atas.

Nah, meskipun key harus berupa string, Anda dapat menggunakan beberapa jenis data sebagai value-nya. Apa saja itu? Mari kita bahas di bagian selanjutnya.

Jenis-jenis Value JSON

Setidaknya ada enam jenis data yang dapat digunakan sebagai value JSON, yaitu:

• String
• Object
• Array
• Boolean
• Number
• Null
• String

String

String adalah data yang terdiri dari karakter unicode, seperti “Anton” pada contoh di bawah ini.“nama”:”Anton”

Object

Object adalah sepasang key dan value. Seperti pada contoh syntax tadi, object dibuka dan ditutup dengan kurung kurawal. Jika ada lebih dari satu object, masing-masing dipisahkan oleh koma dan spasi.“karyawan”: {“nama”:”Anton”, “asal”:”Bandung”}

Pada contoh di atas, semua yang ada di dalam kurung kurawal adalah object yang merupakan value dari “karyawan”.

Array

Array adalah kumpulan object. Kumpulan ini dibuka dan ditutup dengan kurung siku []."karyawan":[ {"nama":"Anton", "asal":"Bandung"}, {"nama":"Nana", "asal":"Surabaya"}, {"nama":"Jamal", "asal":"Tangerang"} ]

Boolean

Boolean adalah jenis data yang hanya berisikan pernyataan benar atau salah. Anda hanya tinggal memasukkan true atau false, seperti pada contoh berikut ini:“karyawan tetap”:”false”

Number

Seperti namanya, jenis data ini berupa angka saja. Dengan catatan, angkanya harus merupakan integer atau angka bulat. Artinya, 21,8 atau √2 tidak dapat dijadikan sebagai value . Contoh penggunaannya seperti di bawah ini:“usia”:“29”

Null

Jika sebuah key tidak memiliki value, Anda dapat mengetikkan null. Contohnya seperti pada kode berikut:“golonganDarah”:”null”

Membuat Nested Objects dan Nested Arrays

Anda dapat membuat nested object dan nested array dalam kode JSON. Untuk memahami penggunaannya, amati kedua contoh yang dibahas pada bagian ini.

Pertama, mari perhatikan contoh nested object berikut:“karyawan”: { “nama”:“Anton”, “asal”:“Bandung”. “hobi”: { “hobi1”:“berenang”, “hobi2”:“melukis”, “hobi3”:“jogging” } }

Pada contoh tersebut, “hobi1”, “hobi2”, dan “hobi3” merupakan value dari key “hobi”. Perhatikan bahwa ketiga value tersebut ada di dalam kurung kurawal. Dengan demikian, “hobi” beserta ketiga value-nya merupakan object di dalam object.

Penggunaan nested array tidak jauh berbeda. Perhatikan contoh di bawah ini:“karyawan”: { “nama”:“Anton”, “asal”:“Bandung”. “hobi”: [ “berenang”, “melukis”, “jogging” ] }

Pada contoh di atas, “berenang”, “melukis”, dan “jogging adalah array yang merupakan value dari “hobi”.

JSON adalah format yang digunakan dalam penyimpanan dan transfer data, terutama dalam aplikasi web. Format ini makin sering digunakan karena struktur kode yang lebih ringkas dan mudah dipahami daripada XML.

Sumber:

niagahoster.co.id

Read More

Panduan Belajar JavaScript Untuk Pemula

JavaScript menjadi bahasa pemrograman yang wajib dipelajari untuk para developer website. JavaScript dianggap mudah digunakan untuk membuat website yang menarik dan interaktif. Akibatnya, saat ini hampir semua website menggunakan JavaScript sebagai bahasa pemrograman yang digunakan untuk membuat website mereka.

Kemudahan yang ditawarkan membuat JavaScript saat ini tidak hanya digunakan pada sisi klien saja. JavaScript sudah bisa digunakan pada sisi server, mobile, game, aplikasi desktop, Internet of Things (IoT), dan lain sebagainya.

Apa itu JavaScript?

Untuk tahap awal belajar JavaScript, Anda perlu mengenal apa itu JavaScript. Pertama kali, JavaScript dikembangkan oleh Brendan Eich dari Netscape dengan nama Mocha. Nantinya, nama ini diganti menjadi LiveScript sebelum berakhir dengan nama JavaScript. JavaScript inilah yang merupakan pengembangan bahasa dari LiveScript.

JavaScript saat ini sudah banyak dikembangkan menjadi beberapa pengetahuan lain, seperti AJAX. Asynchronous JavaScript dan XML (AJAX) adalah teknik yang digunakan pada halaman website dengan menggunakan bahasa pemrograman JavaScript. Metode yang diterapkan adalah menerima dan mengirimkan data dengan server tanpa harus menyegarkan (refresh) halaman itu.

JavaScript sudah menjadi bahasa pemrograman yang baku. Maka dari itu, JavaScript bisa dikolaborasikan dengan banyak bahasa lain, seperti HTML, untuk membuat website yang mudah digunakan oleh pengguna.

JavaScript bisa membuat berbagai fitur mulai dari yang sederhana sampai dengan yang paling kompleks, mislanya layout, galeri, tombol, causels, dan lain sebagainya. Jika dikembangkan lebih lanjut, JavaScript dapat digunakan untuk membuat baik animasi dua dimensi maupun tiga dimensi, bahkan aplikasi yang behubungan dengan database.

Meski tersusun atas bahasa yang cukup kompleks, JavaScript sangatlah fleksibel. Banyak pengembang yang telah memanfaatkannya untuk membangun dan menyediakan berbagai macam aplikasi. Apalagi saat ini juga tersedia banyak sekali bahasa pemograman pendukung seperti Node.js dan lainnya. Node.js sendiri merupakan salah satu framework Javacript yang mengeksekusi kode program JavaScript di luar browser.

Apa Saja yang Dibutuhkan untuk Belajar JavaScript?

Ada beberapa aplikasi yang dibutuhkan untuk belajar JavaScript, yaitu:

Web Browser (Google Chrome, Firefox, Opera, dll).

Teks Editor (Atom, Notepad++, Sublime, dll).

Web server, digunakan untuk menjalankan kode program, seperti HTML dan PHP yang biasanya dikombinasikan dengan JavaScript.

Panduan Singkat JavaScript

Setelah semuanya sudah siap, selanjutnya adalah mempelajari cara kerja JavaScript dan penggunaan bahasa JavaScript secara sederhana. Panduan berikut didapatkan dari beberapa referensi halaman yang saya coba kombinasikan dan kembangkan.

Hello JavaScript

1. Pertama, pada folder web server atau biasanya jika di dalam server web hosting disebut dengan public_html, buatlah sebuah folder dengan nama script dan di dalam folder tersebut ditambahkan file dengan nama main.js

2. Selanjutnya, buka atau buat file index.html Anda, kemudian masukkan elemen pada sebuah baris sebelum tag penutup </body>. Tambahkan kode berikut pada file main.js

Berikut tampilan kode program pada file index.html dan main.js:

4. Akses file index.html pada folder web server Anda melalui browser.

Sebelum menggunakan JavaScript, tulisan yang ditampilkan adalah ‘Domain Murah‘. Setelah ditambahkan, Anda akan melihat ‘Hello, Welcome to Arch‘.

Kode program di atas digunakan untuk mengganti Heading dari tampilan website yang sudah ada menjadi tampilan yang sesuai dengan kode JavaScript. Kesimpulannya, kode yang sudah ada ditimpa dengan kode JavaScript setelahnya.

Aturan Penulisan Kode JavaScript

Berikut ini adalah beberapa penulisan pada kode program JavaScript yang perlu Anda ketahui.

1. Penulisan Dengan Embed

Penulisan JavaScript dengan Embed memanfaatkan tag <script> untuk menyisipkan kode JavaScript ke html di dalam tag <body> atau <head>. Akan tetapi, disarankan untuk menambahkan kode embed pada tag <body> karena loadnya lebih cepat apabila menambahkannya pada <head>.

2. Penulisan InLine

Penulisan secara inLine sudah dicontohkan pada program untuk memunculkan teks ‘Hello, Welcome to Arch!’ pada bagian awal artikel.

3. Eksternal Line

Contoh penulisan ini sudah kita bahas pada bagian sebelumnya ketika menggunakan main.js sebagai tempat file JavaScript. Jadi, akan tedapat beberapa file terpisah yang tersimpan di dalam folder web server untuk membuat satu struktur web yang lengkap.

Biasanya struktur seperti ini digunakan untuk mengembangkan proyek website yang besar dan sangat kompleks.

4. Case Sensitivity

Jadi, penulisan huruf pada JavaScript juga memperhatikan besar dan kecilnya. Anda akan menemui masalah jika menganggap tidak ada masalah pada besar dan kecilnya huruf di JavaScript. Sehingga penulisan harus konsisten.

Misalnya, jika menggunakan variabel ‘Tanggal’ akan berbeda jika menggunakan huruf kecil ‘tanggal’, keduanya adalah variabel yang berbeda meskipun cara membacanya sama.

5. Penulisan Komentar

Komentar pada JavaScript bisa menggunakan dua cara, yaitu satu baris dan yang mencakup beberapa baris.

6. Penulisan Karakter

Kode program JavaScript akan mengabaikan karakter-karakter yang menggunakan spasi, enter, tab, dan karakter lainnya, sedangkan tanda titik dua koma ‘;’ tidak wajib digunakan di setiap akhir baris program JavaScript. Hanya saja, untuk mendapatkan hasil yang diinginkan, terkadang penggunaan tanda ‘;’ diperlukan.

Variabel

Jika Anda belajar JavaScript, seperti belajar JavaScript Android atau belajar JavaScript untuk game pasti akan kesulitan memahami jika tidak belajar bagaimana menggunakan variabelnya dengan baik. Berikut ini adalah beberapa contoh penggunaan variabel pada JavaScript.

Variabel merupakan tempat yang bisa digunakan untuk memberikan nilai pada kode pemrograman. Pertama-tama deklarasikan variabel dengan keyword var, diikuti dengan nama variabel yang akan digunakan.

var nama; var az=12; var teks="Belajar JavaScript dengan Niagablogger";

Tanda titik koma digunakan untuk memisahkan antarvariabel. Meskipun ada variabel yang sudah terlebih dahulu diberikan nilai. Anda nantinya dapat mengubah nilai tersebut dengan nilai yang lainnya. Misalnya:

var nama = ’Nia’; nama = ‘Angga’;

Sejak awal variabel nama dari awal sudah diberikan nilai dengan isi ‘Nia’, setelah itu diisikan nilai lain menjadi ‘Angga’, maka nilai akhir yang ada pada variabel nama adalah ‘Angga’.

Tipe data pada variabel JavaScript dinamis, yang berarti satu variabel bisa mengelola beberapa tipe data. Misalnya:

var x; // Belum x = 10; // Tipe data Number x = "Nia"; // Tipe data String

Ada beberapa tipe data yang bisa dipelajari saat Anda belajar JavaScript dengan cepat:

Tipe Data JavaScript

Beberapa tipe data yang dimiliki JavaScript.

1. String

Menandakan bahwa variabel tersebut adalah string sehingga jika ingin mengubahnya, harus menggunakan tanda kutip.

var nama = "Nia Blogger";

2. Number

Digunakan untuk variabel angka.

Var tahun = 2017; var tanggal = 20;

3. Boolean

Digunakan untuk memberikan nilai benar atau salah (true/false).

var nilaiAwal = TRUE;

4. Array

Digunakan untuk menyimpan lebih dari satu nilai dalam satu var.

var hari = ["Senin","Selasa","Rabu","Kamis","Jumat","Sabtu","Minggu"]; var nilai = [5,7,8,2.4,4.5,10]; var mix = [ "gfyty$^%", 12.3, NULL, TRUE, FALSE, ["a","b","C"] ];

5. Object

Bisa menyimpan semua bentuk pada JavaScript.

var orang = { nama : "Nia", umur : 23, "berat badan" : 55.5, "sudah nikah" : TRUE, "jumlah anak": NULL };

6. Function

Potongan kode yang dikumpulkan dan bisa digunakan rulang, caranya dengan cara memanggil fungsi tersebut.

var apakahGanjil = function(nilai){ return nilai % 2 == 0; };

function(nilai) merupakan fungsi yang digunakan untuk melakukan pengecekan apakah nilai tersebut genap atau tidak.

Operator

Merupakan simbol matematika yang menghasilkan nilai yang baru. Operator berikut bisa Anda gunakan pada kode program JavaScript.

1. Penambahan/penggabungan (+)

6 + 9; "Hello " + "world!";

2. Pengurangan, Perkalian, Pembagian (-, *, /)

9 - 3; 8 * 2; // perkalian di JS menggunakan tanda bintang (*) 9 / 3;

3. Operator Penugasan (=)

var myVariable = 'Bob';

4. Operator Kesetaraan (==)

var myVariable = 3; myVariable === 4;

5. Negasi, Tidak Sama Dengan (!, !==)

Operator ini digunakan untuk kesetaraan dan membalikan nilai dari sebuah variabel. Contohnya membalikan true menjadi false dan sebaliknya.

Kondisional

Kondisional ini digunakan untuk mempertimbangkan ekspresi memberikan nilai benar atau tidak. Hasilnya adalah menjalankan perintah lain sesuai dengan hasil kondisi dari ekspresi yang dimasukan dalam pengujian.

var makanan = 'nasi'; if (makanan === 'nasi') { alert('Variabel makanan isinya nasi!'); } else { alert('Makanan tidak sama dengan nasil'); }

Ekspresi if digunakan untuk pengujian kesetaraan, jadi untuk membandingkan antara string makanan dengan string nasi. Jika yang dibandingkan benar, maka eksekusi kode block selanjutnya. Sebaliknya jika salah, maka kode block else yang dieksekusi.

Fungsi

Fungsi merupakan potongan kode yang bisa digunakan kembali dan dipanggil secara berulang. Anda pun tidak perlu menuliskan kembali kode block yang sama. Fungsi digunakan jika potongan kode tersebut digunakan pada beberapa bagian kode program JavaScript. Misalnya:

function penjumlahan(nilai1,nilai2) { var hasil = nilai1 + nilai2; return hasil; }

Fungsi tersebut bisa dipanggil dengan menggunakan kode program penjumlahan(1,2). Output-nya adalah angka 3.

Kesimpulan

JavaScript merupakan bahasa pemrograman yang cukup mudah untuk dipelajari. Meskipun dikenal sebagai bahasa pemrograman website yang handal, hampir tidak ada perbedaan dengan bahasa lainnya dalam penggunaan dan penulisan beberapa kode programnya.

Sumber:

niagahoster.co.id

Read More

Cara Menjadi Web Developer

Web developer menjadi salah satu pekerjaan yang banyak dicari. Menariknya sektor web development (di mana web developer bekerja) merupakan salah satu bidang yang mempunyai lapangan kerja dengan penawaran tinggi. Tidak mengherankan jika sektor ini dilirik dan diminati oleh banyak orang.

Apa Itu Web Developer?

Web developer merupakan pekerjaan programmer yang bertugas untuk membuat berbagai aplikasi dan website untuk klien dan perusahaan. Banyak perusahaan berlomba-lomba membuat website.

ni menjadi peluang bagi orang yang ingin terjun di dunia web development. Semakin banyak perusahaan yang ingin membuat website semakin banyak pula kebutuhan seorang web developer.

Bagi Anda yang ingin menjadi web developer tentunya harus mempunyai tujuan yang jelas. Apakah Anda ingin menyelami karir sebagai senior developer, membuat jasa pembuatan website, atau hanya sekedar membuat toko online.

Langkah pertama cara menjadi web developer adalah menentukan tujuannya sehingga lebih jelas membuat keputusan tentang apa saja yang perlu dipelajari.

Apa Tugas Utama Web Developer?

Web development adalah proses pengembangan website secara umum. Mulai dari perancangan, pengembangan, pengetesan, sampai dengan rilis.

Tugas seorang web developer (seorang programmer di web development) masuk di antara proses ini. Jadi lingkup tugas seorang web developer sangatlah luas.

Web development bukan hanya berhubungan dengan coding saja melainkan juga berhubungan dengan pengembangan konten, penyusunan desain, pemilihan dan pengelolaan server hosting (web server), client/server side scripting, dan tentu saja konfigurasi keamanan jaringan.

Perbedaan Front End dan Back End Developer

Sekarang di dunia kerja ada tiga pilihan karir di web developer, yaitu Front-end Developer, Back-end Developer, dan Full-stack Developer. Apa saja sih kriteria masing-masing karir tersebut? Yuk simak ulasannya di bawah ini.

Front End Developer

Front-end Developer merupakan orang yang mengurusi tampilan dari website. Jadi front-end memuat apa pun yang dilihat oleh user atau pengunjung website.

Seorang front-end developer mengurusi desain website secara keseluruhan. Mulai dari menu (development, design, marketing, company), tombol interaksi (menampilkan banner ebook gratis), dan gambar untuk meningkatkan pengalaman user saat membuka website.

Nama front-end sendiri dianggap sama dengan halaman muka sebuah toko yang menampilkan gambaran umum atau informasi sebelum orang mau masuk ke dalamnya.

Itulah mengapa seorang front-end dituntut untuk kreatif dan memiliki skill desain yang cukup –paling tidak tahu tentang desain. Seorang front-end juga memikirkan bagaimana alur sebuah website, bagaimana seorang pengunjung harus berinteraksi, proses navigasi, dan juga kenyamanan pengunjung selama berselancar di dalam website.

Nah untuk mengakomodasi kebutuhan tersebut, selain mengetahui mengenai desain, seorang front-end setidaknya harus menguasai beberapa bahasa pemrograman, seperti HTML, CSS, dan JavaScript.

1. Hypertext Markup Language (HTML)

Seorang pengembang website menggunakan HTML untuk menyusun dan membuat bagian paragraf, heading, link atau tautan, dan juga blockquote untuk halaman website.

HTML merupakan bahasa pemrograman yang sudah cukup lama digunakan untuk mengembangkan website. Bahasa ini merupakan poin utama yang harus diketahui oleh orang yang ingin terjun di dunia pemrograman.

Anda tidak perlu khawatir karena bahasa pemrograman ini terkenal mudah untuk dipelajari. Saat menggunakan HTML, Anda akan berhubungan dengan struktur kode sederhana seperti tag dan atribut untuk mark up halaman website. Contohnya ketika Anda membuat sebuah paragraf, cukup memasukkan sebuah teks di antara tag pembuka <p> dan penutup </p>.

2. Cascading Style Sheets (CSS)

CSS membantu Anda untuk membuat tampilan website yang modern dan menarik.

Fungsi utama dari CSS ini untuk memisah antara konten dengan tampilan visual di website. Anda bisa mengatur tampilan elemen website yang tertulis dalam bahasa mark up, seperti HTML. Nah, melalui CSS Anda bisa mengubah warna, posisi, dan ukuran elemen di dalam website dengan sangat mudah.

CSS pun juga dapat membuat fungsi-fungsi yang cukup kompleks seperti membuat dropdown menu. Anda bisa mengintip di artikel kami ‘Cara Membuat Menu Dropdown CSS Mudah’. Selain HTML, CSS juga dapat dikombinasikan dengan JavaScript.

3. JavaScript

Anda tentunya ingin membuat website yang sempurna navigasi dan tampilannya, semua itu bisa Anda wujudkan menggunakan JavaScript. Memanfaatkan JavaScript, Anda bisa membuat berbagai fitur dari yang sederhana sampai dengan yang paling kompleks. Misalnya saja layout, galeri, tombol, carousel, dan lain sebagainya.

JavaScript juga mampu membuat berbagai animasi dua dimensi maupun tiga dimensi, bahkan aplikasi yang berhubungan dengan database jika Anda mau mengembangkannya.

Nah! Kelebihan JavaScript dibandingkan dengan bahasa pemrograman sejenisnya adalah banyaknya framework yang tersedia.

Itulah tiga poin yang setidaknya dipahami untuk menjadi seorang web developer khususnya bagian front-end. Ingin tahu poin lainnya?

Back End Developer

Jika front-end berurusan dengan tampilan depan, back-end developer berurusan dengan penulisan kode yang tidak terlihat oleh pengunjung. Umumnya back-end developer berurusan dengan berbagai peningkatan dan perbaikan fungsi sistem, API, library, dan lain sebagainya.

Jadi seorang back-end bertugas untuk menghubungkan antara bagian depan dengan server atau fungsi-fungsi yang tidak dapat dilihat oleh pengunjung secara langsung.

Ada beberapa poin yang setidaknya dipelajari jika Anda ingin menjadi seorang back-end developer.

1. Structured Query Language (SQL)

Anda tahu database? Nah SQL ini berguna saat Anda ingin mengumpulkan berbagai informasi pengunjung. Saat pengunjung mendaftar atau mengisi form dan melakukan submit, SQL bertugas untuk mengeksekusi sebuah perintah untuk mengambil data tersebut disimpan ke dalam database.

Jadi Anda dapat menyimpan informasi seperti username, password, nama, dokumen, dan lain sebagainya menggunakan SQL.

SQL juga bisa Anda manfaatkan untuk menampilkan informasi yang sebelumnya tersimpan di dalam database. Selain menyimpan dan menampilkan informasi di dalam database, SQL juga dapat menghapus dan menyunting informasi di dalam database.

Tentunya sangat banyak fungsi SQL di dalam berjalannya sebuah website. Ketika Anda membuat form sign up, login, form pendaftaran, pemesanan, dan lain sebagainya, itu semua tidak pernah lepas dari yang namanya SQL.

2. Hypertext Preprocessor (PHP)

Pasti pernah melihat form login atau sign-up kan ya? Nah! Berbagai form tersebut biasanya dibuat menggunakan bahasa pemrograman PHP. Tidak hanya sampai di situ, PHP juga dapat membuat tampilan website Anda menjadi lebih menarik, dinamis (menyesuaikan perangkat pengunjung), dan mempunyai fungsionalitas yang maksimal.

Apa bedanya dengan HTML? Website yang tersebut menggunakan HTML saja hasilnya masih statis (tidak responsif) sehingga tampilannya terkesan biasa saja dan monoton. Sedangkan ketika dikombinasikan dengan PHP, website dapat berjalan lebih maksimal dan tampilannya maupun navigasinya lebih menarik.

Selain itu, proses input dan output dengan database akan lebih mudah dilakukan jika menggunakan PHP daripada HTML. Bagaimana caranya? Anda bisa mengikuti artikel kami ‘Cara Membuat CRUD Dengan PHP Dan MySQL’ untuk mempelajari dasar-dasar dari penggunaan PHP dengan database.

Full Stack Developer

Seorang full stack developer adalah gabungan dari keduanya, harus mengurusi front-end sampai dengan back-end. Jadi Full Stack Developer dituntut tidak hanya mempunyai keahlian dalam mengembangkan bagian depan website saja melainkan juga di dalamnya.

Selain itu, seorang full stack developer setidaknya mempunyai pengetahuan tentang manajemen server, API, websocket, database, pemrograman, dan struktur website. Penting juga untuk memahami disiplin ilmu lain yang berhubungan dengan tampilan depan seperti user experience (UX) dan user interface (UI). Ingin coba?

Tools yang Wajib Dipelajari Para Web Developer

Nah berbicara mengenai tools, ada beberapa tools yang wajib Anda pelajari. Berbagai macam tools ini nantinya dapat Anda manfaatkan untuk mempermudah dan mempercepat proses pengembangan website.

1. Revision Control

Revision Control membantu Anda untuk mencatat perubahan yang terjadi selama proses pengembangan aplikasi web. Aplikasi ini akan mencatat segala perubahan pada source code. Jika ada anggota yang melakukan perubahan pengguna dalam satu tim akan menerima notifikasi. Ini akan sangat membantu apalagi jika proses pengembangan melibatkan sebuah tim.

Website Anda tentunya akan terus dikembangkan dan mengalami berbagai macam perubahan. Anda bisa saja mencatat perubahan ini secara manual, tapi itu tidak efisien.

Anda pun bisa menggunakan aplikasi semacam ini untuk pribadi karena Revision Control biasanya menyediakan backup. Jadi jika sewaktu-waktu terjadi masalah Anda bisa langsung kembali ke versi sebelumnya.

Untuk mempelajarinya, Anda dapat membaca artikel kami mengenai Git –salah satu Revision Control yang populer.

2. Linux

Anda bisa tetap menggunakan Windows jika sudah nyaman, tapi kami menyarankan sistem operasi Linux sebagai alat untuk belajar menjadi web developer.

Linux membuat Anda lebih peduli dengan penulisan dan terbiasa dengan script pemrograman. Selain itu proses instalasi aplikasi yang dilakukan menggunakan Terminal akan membuat Anda lebih perhatian dengan huruf besar dan kecil (case sensitive).

Tidak hanya itu, Linux juga dapat menjadi media pembelajaran permission pada folder maupun file. Permission akan sangat berguna apalagi jika berhubungan dengan folder yang ada di web server. Kesalahan mengatur permission dapat menyebabkan seluruh folder website Anda bisa diakses melalui internet. Tidak mau kan folder penting Anda bisa diakses sembarang orang di internet?.

3. Framework

Dengan bantuan Framework, Anda tidak perlu membuat aplikasi web dari awal (scratch) dengan menulis satu per satu baris kodenya.

Framework memiliki kumpulan library file yang mengandung beberapa fungsi dasar. Fungsi-fungsi ini dapat Anda manfaatkan untuk membuat pondasi website dengan mudah.

Contohnya saja ketika ingin membuat sebuah halaman web (page). Anda tidak perlu menuliskan ribuan baris kode untuk membuat halaman web. Anda cukup memanggil beberapa fungsi yang ada di framework. Hanya dengan beberapa baris saja Anda sudah bisa membuat halaman web secara utuh.

Ibarat ingin membangun sebuah rumah, framework merupakan segala peralatan pertukangan yang berguna untuk memudahkan proses pembangunan, seperti sekop, bor, cangkul, ember, dan lain sebagainya.

Bayangkan jika segala peralatan ini tidak ada. Anda harus membangun rumah hanya menggunakan tangan. Mengaduk semen menggunakan tangan, melubangi tembok hanya dengan tangan, dan mengangkat adukan semen hanya dengan tangan. Tentu saja akan membutuhkan tenaga ekstra dan membutuhkan waktu yang cukup lama.

Dari sekian banyak framework yang populer, ada beberapa framework yang sudah pernah kami bahas, di antaranya Laravel dan CodeIgniter.

4. CSS Framework

Tidak semua pengunjung menggunakan perangkat desktop untuk mengakses website. Ada juga pengunjung yang menggunakan perangkat mobile. Responsive layout merupakan teknologi yang bisa membuat tampilan di perangkat mobile tetap nyaman.

Responsive layout memungkinkan aplikasi web dapat menyesuaikan ukuran layar. Tampilan website Anda pun bisa lebih maksimal. Sebelum munculnya Responsive Layout mungkin di antara Anda sudah pernah melihat website yang jika ingin melihat teksnya harus zoom in, zoom out, atau drag. Nah! Responsive Layout hadir untuk menyelesaikan masalah itu dan membuat pengunjung lebih mudah dan nyaman menjelajah website.

Maka dari itu saat ini sangat penting untuk bisa membuat halaman web yang responsive. Salah satu tools yang dapat Anda pelajari untuk membuat responsive web adalah Bootstrap.

Nah! Bootstrap ini merupakan versi Advance dari CSS. Di dalam bootstrap sudah terdapat berbagai macam fungsi yang berisi kumpulan berbagai macam menu, tombol, icon, dan widget website modern. Anda bisa melihat artikel cara menggunakan Bootstrap untuk mempelajarinya.

5. Adobe Color dan Aplikasi Sejenisnya

Adobe Color membantu untuk menentukan kode warna yang dicari. Melalui aplikasi ini, Anda bisa membuat pengelolaan proses desain yang lebih baik. Ini tentu perlu Anda perhatikan juga saat belajar menjadi web developer,

Di dalam aplikasi ini terdapat fitur tool color wheel yang langsung memberikan HEX code pada warna tertentu. Nah kode-kode inilah yang Anda butuhkan dalam proses mendesain website, apalagi jika Anda ingin fokus ke bagian front-end. Inilah tools yang cukup membantu dan lengkap untuk membantu membuat website yang menarik dan enak dilihat.

Selain itu, ada berbagai macam tools lain yang Anda mungkin tertarik untuk melihatnya, seperti Unit Testing, Content Management System (CMS), dan Advance Javascript.

Penutup

Tidak ada yang mustahil untuk menjadi web developer. Bermodalkan pengetahuan yang cukup dan tujuan yang benar, Anda pun bisa menjadi seorang web developer yang sukses.

Apa pun jenis developer yang Anda pilih, semua ada pasarnya masing-masing. Jadi tidak perlu khawatir karena Anda bisa memilih menjadi front end developer, back end developer, atau full stack developer.

Pilihlah jenis developer yang sesuai dengan minat dan kemampuan Anda.

Sumber:

Read More

Belajar HTML Lengkap untuk Pemula

Siapapun bisa belajar bagaimana caranya membuat website, yaitu diawali dengan mempelajari HTML terlebih dahulu sebagai pondasinya.

1. Persiapan Tool Belajar HTML

Pada langkah ini Anda akan mengetahui hal apa saja yang harus dipersiapkan.

Apa yang Anda Butuhkan?

Hal yang pertama dibutuhkan untuk mempelajari HTML tentunya adalah sebuah browser, seperti yang Anda gunakan untuk membuka artikel ini.

Anda dapat menggunakan berbagai jenis browser yang biasa digunakan, seperti Mozilla, Chrome, dll.

Untuk aplikasi lain Anda hanya memerlukan editor sederhana yang ada pada Windows, yaitu Notepad. Aplikasi ini dapat Anda buka melalui Start Menu. Tapi, untuk memudahkan Anda mengelola code HTML, kami menyarankan Anda menggunakan Notepad++.

Untuk sistem operasi selain Windows, Anda dapat menggunakan text editor sejenis seperti Pico untuk Linux atau TextEdit untuk Mac.

Jadi untuk mempelajari HTML Anda hanya memerlukan sebuah browser dan text editor saja.

Apakah Perlu Koneksi Internet?

Untuk menjalankan HTML, tidak perlu koneksi internet, kecuali untuk artikel yang sedang Anda baca ini.

2. Pahami Web Browser

Web browser adalah sebuah aplikasi yang dapat digunakan untuk mengakses dan menampilkan halaman website.

Untuk halaman website biasanya dibuat dengan HTML, XML dan lainnya.

Browser akan menerjemahkan sebuah halaman website yang dikirimkan melalui HTTP (Hypertext Transfer Protocol) ke dalam tampilan yang dipahami manusia.

Meskipun setiap web browser memiliki fitur dan tampilan yang berbeda, tapi untuk fungsi secara umum sama.

3. Memahami Sejarah HTML

HTML dibuat pada tahun 1990 oleh seorang ilmuan yang bernama Tim Berners-Lee. Tujuan awal dibuatnya HTML ini untuk memudahkan para ilmuan ketika akan mengakses dokumen mereka satu sama lain.

Ternyata hasilnya lebih dari yang dibayangkannya, HTML menjadi pondasi untuk website seperti yang dikenal saat ini.

HTML adalah sebuah bahasa markup standar singkatan dari Hyper Text Markup Language. Dengan HTML memungkinakan Anda untuk menampilkan informasi di internet.

Browser akan menampilkan code HTML dengan tampilan seperti yang Anda baca saat ini, untuk melihat code HTML silakan klik kanan kemudian pilih View page source (ctrl+u).

Melalui tutorial ini akan membuat struktur HTML yang tidak jauh berbeda seperti code tersebut. HTML adalah bagian penting untuk membuat website dan mudah dipelajari.

4. Mempelajari Element, Tag, dan Attribut

Element pada HTML membentuk sebuah struktur dan memberitahu browser untuk halaman website yang akan ditampilkan. Biasanya untuk element terdiri dari tag pembuka, konten, dan tag penutup.

Tag sendiri digunakan untuk menandai sebuah element pada bagian awal dan akhir, dengan format yang sama diawali dengan tanda < dan ditutup dengan >.

Jika dibedakan, untuk tag terdapat dua jenis, yaitu tag pembuka <html> dan tag penutup </html>. Dua jenis tag ini hanya dibedakan dengan tanda garis miring.

Contoh

Sebagai contoh untuk element em (emphasis) terdiri dari semua code mulai dari tag pembuka <em> dan tag penutup </em>.

Berikut untuk contoh codenya:<em>Contoh element.</em>

Untuk hasilnya akan terlhat seperti tulisan di bawah:

Contoh element.

Untuk membuat sebuah heading atau subjudul, digunakan element h1, h2, h3, h4, h5, atau h6. Dimana kepanjangan h adalah heading. Untuk ukuran paling besar diawali dengan h1 sampai h6 adalah ukuran terkecil.

Berikut adalah codenya:<h1>Ini adalah h1</h1> <h2>Ini adalah h2</h2> <h3>Ini adalah h3</h3> <h4>Ini adalah h4</h4> <h5>Ini adalah h5</h5> <h6>Ini adalah h6</h6>

Untuk tampilan di browser akan terlihat seperti gambar di bawah:

Seperti yang terlihat dari code di atas, pada sebuah element terdapat tag pembuka dan tag penutup. Ini tidak berlaku untuk beberapa element seperti code untuk membuat enter atau baris baru, yaitu <br>.

Menggunakan huruf besar atau huruf kecil?

Mungkin Anda memiliki pertanyaan mengenai penulisan tag, apakah harus menggunakan huruf besar atau huruf kecil. Meskipun browser tidak membedakan mengenai hal tersebut, untuk pembuatan tag pada umumnya menggunakan huruf kecil.

Itulah sedikit pengenalan mengenai element dan tag.

Attribute

Setelah Anda memahami element dan tag, Anda perlu memahami apa itu attribute. Seperti diketahui jika sebuah element berupa sturktur pada HTML yang berfungsi untuk memberitahu browser mengenai apa yang akan ditampilkan.

Aturan penulisan sebuah attribute:

• Nama attribute diikuti oleh tanda sama dengan
• Nilai attribut diapit oleh dua tanda petik pembuka dan penutup
• Jika lebih dari satu attribut, diberi jarak dengan spasi

Berikut adalah contoh element yang disertai sebuah attribute:<p>Berikut adalah <a href="https://www.niagahoster.co.id/" title="Halaman hosting terbaik" target="_blank">hosting terbaik</a>.</p>

Berikut adalah tampilan pada browser:

Penjelasan:

Dari contoh di atas untuk element <a> berguna untuk memberikan batasan pada hyperlink dengan beberapa attribute di dalamnya:

href – Ini adalah attribute untuk menentukan alamat sebuah website, dimana ketika tautan diklik akan diarahkan ke halaman sesuai dengan tautan yang diisi, pada contoh ini adalah halaman href=”https://www.niagahoster.co.id/”.

title – Attribute ini berguna untuk menambahkan informasi pada tautan ketika kursor mouse diarahkan pada tautan. Pada contoh ini untuk title yang digunakan adalah title=”Halaman hosting terbaik”.

target – Untuk attribute ini berguna untuk memberitahu browser jika tautan diklik akan dibuka pada tab baru. Pada contoh ini adalah target=”_blank”. Jika attribut ini dihilangkan, untuk tautan tidak akan dibuka di tab baru.

Untuk mempercepat pemahaman Anda dalam belajar HTML dasar ini, silakan ikuti langkah selanjutnya.

5. Struktur HTML

Setelah Anda memehami elemet HTML, selanjutnya adalah menggabungkannya menjadi satu di dalam dokumen HTML.

Coba perhatikan code berikut ini:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Halaman pertamaku</title> </head> <body> <p>Ini adalah halaman pertamaku</p> </body> </html>

Penjelasan:

<!DOCTYPE html> – Merupakan deklarasi dari type dokumen

<html></html> – Dikenal dengan element utama karena semua element berada di dalamnya.

<head></head> – Element ini berfungsi untuk memasukkan konten yang tidak ingin ditampilkan. Konten tersebut dapat berupa keyword, deskripsi, CSS, dll.

<meta charset=”utf-8″> – Berfungsi untuk memberitahu browser mengenai pengkodean karakter yang sesuai dengan ketentuan UTF-8.

<title></title> – Merupakan judul dari halaman website yang muncul pada bagian tab browser.

<body></body> – Berisi konten yang ditampilkan pada browser ketika pengunjung mengakes halaman tersebut, contohnya seperti artikel yang sedang Anda baca saat ini.

6. Buat Halaman Website Pertama Anda

Dengan HTML Anda dapat membuat website sendiri dengan memahami dasarnya, berbeda ketika Anda membuat website dengan WordPress. Meskipun website WordPress jauh lebih bagus, tapi Anda belum tentu memahami strukturnya seperti apa.

Pada bagian pertama, Anda sudah mengetahui hal yang dibutuhkan untuk membuat website dengan HTML, yaitu sebuah browser dan text editor seperti Notepad.

Text editor terbaik yang kami sarankan adalah Notepad++, karena Anda akan lebih mudah dalam membaca code, silakan download melalui tautan ini, kemudian lakukan instalasi.

Setelah Anda selesai melakukan instalasi Notepad++, silakan ikuti langkah di bawah ini:

1. Buka Notepad++, kemudian buat halaman baru.

2. Copy code di atas ke dalam halaman baru.

3. Kemudian simpan dengan Save as type pilih html.

Untuk melihat hasilnya, silakan buka file index.html yang telah Anda buat melalui browser. Berikut adalah tampilannya:

7. Lengkapi Halaman Website Anda

Setelah Anda selesai membuat halaman website sederhana dan memahami strukturnya, selanjutnya adalah menambahkan beberapa elemen yang dibutuhkan pada sebuah halaman website pada umumnya.

Untuk sebuah halaman website biasanya terdari dari judul, subjudul, list, link, gambar, tabel, komentar untuk code, dan form.

Untuk lebih detailnya, silakan ikuti langkah di bawah ini:

1. Silakan edit code yang Anda buat sebelumnya, pertama adalah membuat judul, silakan tambahkan code di bawah ini ke dalam tag <body>.<h1>Hosting Indonesia</h1>

2. Setelah menambahkan judul, Anda dapat menambahkan paragraf pertama dibagian bawah tag h1.<p>Kami menyediakan berbagai paket hosting dengan fitur lengkap</p>

3. Selanjutnya adalah menambahkan subjudul, untuk subjudul Anda dapat menggunakan h2, h3 dst, letakkan code di bawah ini setelah tag p.<h2>Pilihan Paket Hosting Indonesia:</h2>

4. Untuk menambahkan list, silakan masukkan code berikut:<ul> <li>Paket Bayi</li> <li>Paket Pelajar</li> <li>Paket Personal</li> <li>Paket Bisnis</li> </ul>

5. Seperti yang sudah kami bahas sebelumnya, untuk menambahkan link Anda perlu menggunakan attribute href yang ada di dalam element <a>, untuk lebih jelasnya silakan tambahkan code berikut pada list setiap paket hosting di nomor 4, sehingga codenya akan terlihat seperti berikut. Jangan lupa untuk mengecek hasilnya dengan merefresh halaman index.html:<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bayi</a></li> <li><a href="https://www.niagahoster.co.id" target="_blank">Paket Pelajar</a></li> <li><a href="https://www.niagahoster.co.id" target="_blank">Paket Personal</a></li> <li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bisnis</a></li>

Berikut tampilannya:

6. Untuk membuat tampilan sedikit menarik, Anda silakan tambahkan gambar pada halaman tersebut. Pada contoh ini gambar akan diletakkan di bagian bawah judul, yaitu element h1. Silakan taruh gambar menjadi satu folder dengan file index.html. Kemudian beri nama, misalnya hosting-indonesia. Kemudian tambahkan code berikut:<img alt="Hosting Indonesia" src="hosting-indonesia.png" height="200" />

Keterangan:

Untuk gambar hanya menggunakan satu tag, sehingga untuk elementnya hanya <img />.

alt adalah nama untuk gambar supaya dapat dipahami oleh mesin pencari seperti Google.

src nama file dari gambar yang ditampilkan, jika file tidak di folder yang sama, atau berada di alamat website tertentu, Anda perlu menulisnya dengan lengkap, misalnya: https://namadomain.com/nama-file.png.

Untuk ukuran, supaya bentuknya proporsional, silakan gunakan salah satu diantara height atau width, pada contoh ini kami menggunakan height.

7. Selanjutnya adalah cara membuat tabel di HTML, silakan tambahkan code di bawah ini setelah code untuk list yaitu di bawah tag </ul>.<table border="1"> <tr> <td>Bayi</td> <td>Pelajar</td> <td>Personal</td> <td>Bisnis</td> </tr> <tr> <td>Rp 19.800/ bln</td> <td>Rp 44.800/ bln</td> <td>Rp 67.800/ bln</td> <td>Rp 91.800/ bln</td> </tr> <tr> <td>500 MB Disk Space</td> <td>Unlimited Disk Space</td> <td>Unlimited Disk Space</td> <td>Unlimited Disk Space</td> </tr> <tr> <td>1 Domain</td> <td>10 Addon Domains</td> <td>Unlimited Addon Domains</td> <td>Unlimited Addon Domains</td> </tr> </table>

Untuk tampilan tabel akan terlihat seperti gambar di bawah:

7. Supaya mudah dalam mengetahui fungsi code yang dibuat, Anda dapat menambahkan keterangan atau komentar pada bagian atas code yang ingin diberi keterangan. Pada contoh ini adalah komentar untuk memberi keterangan pada code tabel.<!-- Untuk tabel harga -->

Berikut adalah code yang akan terlihat pada editor Notepad++:

8. Selanjutnya adalah menambahkan form pada halaman HTML. Silakan tambahkan code berikut pada bagian bawah tag </table>.<div> <h2>Hubungi Kami</h2> <form action=" index.html" method="get"> <div> <input type="text" name="nama" placeholder="Nama Anda" required="" /> </div><br> <div> <input type="text" name="email" placeholder="Masukkan Email Anda" required="" > </div><br> <div> <input type="text" name="subject" placeholder="Subjek" required=""> </div><br> <div> <textarea type="text" name="pesan" rows="10" cols="30" placeholder="Pertanyaan"></textarea> </div><br> <div> <input type="submit" value="Kirim Sekarang" > </div> </form> </div>

Untuk form yang dibuat pada contoh ini berfungsi untuk form kontak yang terdiri dari form nama, email, subjek, isi pertanyaan, dan tombol kirim.

Pada langkah ini Anda sudah berhasil menyelesaikan tutorial belajar HTML, untuk memperbaiki tampilannya dibutuhkan script tambahan yaitu CSS yang akan kami bahas pada tutorial selanjutnya. 🙂

Untuk code secara keseluruhan pada artikel ini akan terlihat seperti berikut:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Halaman pertamaku</title> </head> <body> <h1>Hosting Indonesia</h1> <img alt="Hosting Indonesia" src="hosting-indonesia.png" height="200" /> <p>Kami menyediakan berbagai paket hosting dengan fitur lengkap</p> <h2>Pilihan Paket Hosting Indonesia:</h2> <ul> <li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bayi</a></li> <li><a href="https://www.niagahoster.co.id" target="_blank">Paket Pelajar</a></li> <li><a href="https://www.niagahoster.co.id" target="_blank">Paket Personal</a></li> <li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bisnis</a></li> </ul> <!-- Untuk tabel harga --> <table border="1"> <tr> <td>Bayi</td> <td>Pelajar</td> <td>Personal</td> <td>Bisnis</td> </tr> <tr> <td>Rp 19.800/ bln</td> <td>Rp 44.800/ bln</td> <td>Rp 67.800/ bln</td> <td>Rp 91.800/ bln</td> </tr> <tr> <td>500 MB Disk Space</td> <td>Unlimited Disk Space</td> <td>Unlimited Disk Space</td> <td>Unlimited Disk Space</td> </tr> <tr> <td>1 Domain</td> <td>10 Addon Domains</td> <td>Unlimited Addon Domains</td> <td>Unlimited Addon Domains</td> </tr> </table> <br> <div> <h2>Hubungi Kami</h2> <form action=" index.html" method="get"> <div> <input type="text" name="nama" placeholder="Nama Anda" required="" /> </div><br> <div> <input type="text" name="email" placeholder="Masukkan Email Anda" required="" > </div><br> <div> <input type="text" name="subject" placeholder="Subjek" required=""> </div><br> <div> <textarea type="text" name="pesan" rows="10" cols="30" placeholder="Pertanyaan"></textarea> </div><br> <div> <input type="submit" value="Kirim Sekarang" > </div> </form> </div> </body> </html>

Kesimpulan

Setelah Anda menyelesaikan tutorial belajar HTML langkah demi langkah pada artikel ini, Anda akan memahami beberapa hal seperti cara membuat judul, memasukkan gambar, membuat link, sampai membuat kontak form.

Sumber:

Read More