Cara Membuat Kode Situs Web dari Awal! 5 Langkah Sederhana
Lucas Bennett
Apa saja jenis-jenis bahasa pemrograman?
Bahasa pemrograman untuk website terbagi dalam dua kategori besar, yaitu Frontend dan backend. Bahasa yang digunakan untuk memprogram halaman web untuk Frontend adalah HTML, CSS, dan JavaNaskah.
Bahasa Frontend termasuk
- Bahasa Markup HyperText (HTML) – Bahasa ini digunakan untuk memformat halaman web dan mengatur elemen pada halaman web. Itu terdiri dari tag pembuka dan penutup yang masing-masing memiliki tugas tertentu. Misalnya, tag judul digunakan untuk menulis judul halaman web di bilah alamat.
- Lembar Gaya Cascading (CSS) – Seperti namanya, CSS digunakan untuk menata halaman web. Misalnya, Anda dapat menggunakan CSS untuk mendefinisikan fon situs web, ukuran font, warna, dll. CSS dapat ditulis dalam satu file dan digunakan kembali berulang kali pada berbagai elemen di halaman web.
- JavaSkrip (JS) - JavaSkrip digunakan untuk membuat situs web lebih interaktif. Misalnya Anda telah membuat tombol, dan Anda ingin tombol tersebut menampilkan pesan saat diklik. Anda dapat menggunakan JavaSkrip untuk menulis fungsi tersebut.
Bahasa latar belakang
Backend dapat dikodekan dalam bahasa apa pun yang mendukung pengembangan web. Anda dapat menggunakan JavaScript di sisi server menggunakan NodeJS, Python, Ruby, atau PHP. Salah satu program yang paling umum digunakan untuk pengembangan situs web adalah PHP. Dalam panduan ini, kami akan fokus pada PHP sebagai bahasa scripting.
PHP:
PHP adalah singkatan dari Hypertext Preprocessor. Tidak seperti teknologi frontend yang dijalankan di browser web, PHP dijalankan di webserver. PHP umumnya digunakan untuk melakukan aktivitas seperti mendaftarkan pengguna, mengautentikasi pengguna, mengirim email, dan lain-lain.
Cara Membuat Kode Situs Web – Panduan Lengkap untuk Pemula
Dalam panduan komprehensif ini, kami akan mengajari Anda cara membuat situs web dari awal dan menulis semua kodenya sendiri, atau Anda dapat menggunakan platform yang sudah ada seperti WordPress atau Joomla, dll.
Kami akan membahas topik-topik berikut dalam panduan lengkap ini.
- Membuat dari awal Vs. menggunakan Sistem Manajemen Konten
- Membuat website dari awal menggunakan framework (PHP MVC Framework)
- Membuat situs web menggunakan Sistem Manajemen Konten (WordPress)
Konsep dasar HTML
Dokumen HTML adalah file teks yang berisi tag dan elemen HTML dan biasanya diakhiri dengan ekstensi file .html.
HTML juga dapat disematkan pada ekstensi file bahasa scripting lainnya seperti *.php, *.jsp atau *.asp.
Browser web mengurai dokumen HTML untuk menampilkan halaman Web. Anda dapat melihat HTML yang membentuk halaman web di browser web.
Berikut langkah-langkah membantu Anda membuat situs web:
Langkah 1) Klik kanan pada halaman web untuk menampilkan menu pop-up.
Langkah 2) Pilih Lihat sumber halaman.
Langkah 3) Kode HTML akan ditampilkan dalam teks biasa, dan Anda dapat melihat tag HTML dan elemen yang membentuk halaman tersebut.
Anda mungkin juga melihat beberapa CSS dan JavaSkrip tertanam atau disertakan sebagai berkas eksternal terpisah.
Fungsi dari web browser adalah menerjemahkan dokumen HTML ke dalam format yang dapat dibaca manusia. Browser juga memproses JavaSkrip yang disertakan dalam halaman web.
Memahami Struktur Dokumen HTML
Misalkan Anda telah membuat dokumen Word sebelumnya. Dalam hal ini, memahami struktur dokumen HTML akan cukup mudah bagi Anda. Dalam dokumen Word, Anda akan memiliki judul dokumen, daftar isi yang dapat diklik, bagian konten diformat berbeda, dan footer. Struktur dokumen HTML kurang lebih sama dengan dokumen Word yang baru saja kita jelaskan.
Semua dokumen HTML diapit dalam tag HTML. Di dalam tag HTML, Anda akan memiliki tag lain seperti head dan body. Tag header berisi tag lain, seperti judul untuk menampilkan judul halaman. Ini juga mencakup tautan ke file eksternal untuk gaya CSS, JavaScript, dan metadata. Tag body berisi elemen-elemen yang membentuk halaman web. Elemen-elemen dalam tag body dapat berupa div, tabel, daftar, dll.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to create a website for beginners</title>
<meta name="description" content="My First Webpage created using HTML, CSS, JavaScript, and PHP">
<meta name="author" content="Guru99">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<h3>Welcome to my first webpage</h3>
</body>
</html>
Penjelasan:
- mendefinisikan jenis dokumen yaitu HTML
- … mendefinisikan tag HTML dengan atribut bahasa yang menentukan bahasa situs web.
- Dalam contoh sederhana ini, bahasa situs web adalah bahasa Inggris. Di dalam tag HTML pembuka dan penutup, kita akan memiliki tag seperti head dan body, yang pada gilirannya mengapit tag dan elemen lainnya.
- … mendefinisikan tag head yang berisi metadata di dalamnya.
- … mendefinisikan tubuh yang berisi konten situs web.
Kenali Pemilih CSS
Pemilih CSS memilih elemen pada halaman web yang ingin Anda format berdasarkan aturan CSS yang ditentukan.
Selector CSS dikategorikan menjadi lima kategori besar, yaitu:
- Penyeleksi sederhana: Selector ini digunakan untuk memilih elemen berdasarkan atribut seperti id, nama, atau kelas.
- Penggabung CSS: Seperti namanya, selector jenis ini memilih suatu elemen berdasarkan kombinasi elemen terkait. Misalnya, Anda bisa menggunakan metode ini untuk memilih hanya elemen paragraf yang ada di dalam elemen div.
- Kelas Pseudo CSS: Penyeleksi ini bekerja berdasarkan status suatu elemen. Misalnya, arahkan kursor ke hyperlink. Anda dapat mengubah warna latar belakangnya untuk menunjukkan kepada pengguna ke mana mereka diarahkan saat ini. Jadi ketika pengguna menjauhkan mouse dari hyperlink, formatnya otomatis terhapus.
- Elemen Pseudo CSS: Selector ini digunakan untuk memilih bagian tertentu dari suatu elemen. Misalnya, Anda dapat menggunakan pemilih elemen semu untuk memperbesar huruf pertama dari kata pertama di setiap paragraf dan membiarkan huruf lainnya tidak tersentuh.
- Atribut CSS: Pemilih ini bekerja berdasarkan atribut yang diterapkan pada elemen atau nilai atribut tertentu. Misalnya, Anda dapat menggunakan pemilih atribut CSS untuk memformat semua tombol HTML ke warna latar belakang hijau yang berisi nilai atribut “kirim.” Ini akan menerapkan a warna latar belakang hijau pada tombol yang nilai atributnya disetel untuk dikirimkan.
Menyatukan Stylesheet CSS
Bagian ini akan membuat dokumen gaya CSS sederhana yang melakukan penataan gaya sederhana dengan mendefinisikan aturan penataan gaya berikut.
- Pusatkan teks berdasarkan pusat kelas: Aturan ini akan memusatkan teks dan mengubah warna teks menjadi merah.
- Format teks berdasarkan id elemen: Kami akan membuat aturan penataan gaya untuk judul id yang akan mengubah warna menjadi oranye, membuat bobot font menjadi tebal dan mengubah huruf besar-kecil menjadi huruf besar.
- Format teks berdasarkan elemen judul nomor 2: Aturan ini akan mengatur warna teks judul menjadi biru dan mengatur ukuran font menjadi 60 piksel.
Kode berikut mendefinisikan dokumen CSS dengan aturan di atas.
.center {
text-align: center;
color: red;
}
#title {
color: orange;
text-transform: uppercase;
font-weight: bold;
}
h2 {
font-size: 60px;
color: blue;
}
Menjelaskan:
- .center {…} – mendefinisikan pusat aturan kelas yang menyelaraskan teks di tengah dan mengubah warna font.
- #title {…} – mendefinisikan aturan judul yang mengubah warna font, mengubah semua huruf menjadi huruf besar, dan mengubah berat font menjadi tebal.
- h2 {…} – mendefinisikan aturan yang akan berlaku untuk semua elemen h3. Ukuran font akan diatur ke 60 piksel, dan warna font akan diperbarui menjadi biru.
Unduh/Instal Bootstrap
Bootstrap adalah kerangka CSS yang hadir dengan sejumlah gaya yang dapat Anda mulai gunakan segera. Ini berisi gaya untuk tata letak dan elemen pemformatan.
Anda dapat menulis gaya CSS yang menyesuaikan pengaturan default kerangka kerja CSS bootstrap. Untuk itu, Anda dapat mengunduh Bootstrap langsung dari situs resminya, atau Anda dapat memasukkannya ke dalam dokumen HTML Anda dari jaringan pengiriman konten (CDN).
Atau, Anda dapat menggunakan alat manajemen paket seperti Node Package Manager (NPM) untuk menginstal Bootstrap, tapi ini untuk pengembang web tingkat lanjut. Untuk mengunduh Bootstrap, Anda dapat mengklik ini link disini dan gunakan dalam proyek Anda sama seperti CSS lainnya dan JavaBerkas skrip.
Kami akan mempelajari cara menggunakannya di bagian di bawah ini ketika kami melihat pembuatan halaman web pertama Anda.
Peran HTML dan CSS
Peran HTML adalah menyediakan struktur pada Halaman Web. Browser web menggunakan struktur ini untuk menampilkan konten yang menarik bagi pengguna. Kedua, spider mesin pencari menggunakan struktur HTML untuk menavigasi halaman web dan mengindeksnya.
Peran CSS adalah memberikan gaya pada konten sehingga menarik secara visual bagi pengguna.
Memahami Istilah Umum HTML
Sekarang mari kita lihat beberapa istilah umum HTML yang harus Anda kenal sebagai pengembang web.
| S / N | Istilah | Description |
|---|---|---|
| 1 | Elemen | Elemen adalah kata kunci yang digunakan untuk menentukan struktur dan konten spesifik halaman web. Misalnya, elemen H3 digunakan untuk mendefinisikan struktur heading. Contoh elemen lainnya termasuk paragraf (p), jangkar (a), dan wadah (div), dll. |
| 2 | label | Tag adalah label yang menandai awal dan akhir suatu elemen. Tag menyertakan kata kunci elemen dalam tanda kurung siku. Misalnya, Ayat adalah tag paragraf dimana adalah tag pembuka dan adalah tag penutup. |
| 3 | Atribut | Atribut adalah properti elemen yang memberikan informasi tambahan. Misalnya, kita dapat menggunakan atribut id untuk memberi nama unik pada suatu elemen. Id dapat digunakan dalam CSS atau JavaNaskah. |
| 4 | Hyperlink | Hyperlink adalah tautan yang dapat diklik yang membuka halaman web baru. Anda dapat membuatnya dengan menggunakan elemen jangkar. |
| 5 | kepala | Tag head berisi informasi yang tersembunyi dari pengguna tetapi berguna untuk browser web dan mesin pencari. |
| 6 | Body | Tag body berisi informasi yang dapat dilihat oleh pengguna di browser web. |
| 7 | Footer | Tag footer berisi informasi yang ditampilkan di bagian footer halaman web. |
| 8 | Pesan | Komentar digunakan untuk mendokumentasikan dan menjelaskan kode HTML, dan diabaikan oleh browser saat menguraikan dokumen HTML. |
| 9 | Div | Div adalah elemen container yang digunakan untuk membuat layout. |
| 10 | Kepala | Tag heading digunakan untuk membuat judul HTML. |
| 11 | Garis putus | Elemen ini digunakan untuk membuat jeda baris baru. |
| 12 | Link | Tautan digunakan untuk memasukkan file lain seperti file CSS eksternal ke dalam dokumen HTML. |
| 13 | Metadata | Tag metadata memberikan informasi tambahan tentang halaman web yang paling berguna bagi bot mesin pencari. |
| 14 | Daftar | Tag daftar digunakan untuk membuat daftar. Daftarnya dapat diurutkan atau tidak diurutkan. |
| 15 | Ayat | Elemen paragraf digunakan untuk menampilkan data teks dalam format paragraf |
| 16 | tabel | Elemen ini digunakan untuk membuat tabel |
| 17 | Judul | Sama seperti judulnya, ini digunakan untuk mengatur judul halaman web. |
| 18 | Bentuk | Tag form digunakan untuk membuat formulir yang bisa kita gunakan untuk mendapatkan masukan dari pengguna. |
| 19 | Naskah | Tag skrip tertaut ke eksternal JavaSkrip atau sebaris JavaKode skrip dalam dokumen HTML. |
| 20 | AJAX | AJAX adalah singkatan dari Asynchronous JavaScript dan XML. Ini adalah teknologi yang digunakan untuk memperbarui bagian tertentu dari halaman web tanpa memuat ulang seluruh halaman. |
Memahami Ketentuan Umum CSS
Berikut ini adalah beberapa istilah CSS umum yang harus Anda pahami.
| S / N | Istilah | Description |
|---|---|---|
| 1 | Pemilih | Ini mengacu pada CSS yang bertanggung jawab untuk memilih elemen dokumen HTML yang ingin kita format. |
| 2 | Properties | Properti mengacu pada atribut elemen yang ingin kita tetapkan nilainya. |
| 3 | Nilai - Nilai | Seperti namanya, kami memberikan nilai pada properti untuk tujuan penataan gaya. |
| 4 | Pesan | Komentar digunakan untuk mendokumentasikan dan menjelaskan kode CSS |
| 5 | Set Aturan | Mengacu pada bagian lengkap kode CSS yang terdiri dari pemilih, braket deklarasi, properti, dan nilai masing-masing. |
| 6 | Pernyataan | Ini mengacu pada satu baris kode dalam dokumen CSS |
| 7 | Blok Deklarasi | Ini merujuk pada bagian CSS yang menentukan aturan gaya. Bagian ini diapit oleh tanda kurung kurawal. |
| 8 | Kata kunci | Ini adalah kata khusus yang memiliki arti khusus dalam CSS. Misalnya kata auto mempunyai arti khusus, oleh karena itu merupakan kata kunci |
| 9 | Pemilih Atribut | Pemilih memilih elemen berdasarkan nilai atribut. |
| 10 | Pemilih Universal | Pemilih ini digunakan untuk mencocokkan elemen apa pun dalam konteks tertentu. Konteks biasanya diterapkan pada elemen induk seperti daftar sehingga semua item dalam daftar dapat mewarisi gaya dari induknya |
| 11 | Pemilih Id | Pemilih ini membuat pilihan berdasarkan id elemen. |
| 12 | Pemilih Kelas | Pemilih ini melakukan pemilihan berdasarkan nilai atau nilai atribut kelas. |
| 13 | Pemilih Jenis Elemen | Pemilih ini didasarkan pada jenis elemen yang digunakan dalam dokumen HTML. |
Editor HTML
Editor HTML adalah program yang digunakan untuk menulis dan mengedit kode HTML. Anda dapat menggunakan editor teks apa pun untuk menulis kode HTML, namun editor HTML hadir dengan banyak fitur bawaan yang memudahkan penulisan kode.
Mari kita lihat beberapa pilihan populer:
Visual Studio Code
Visual Studio Code adalah editor kode lintas platform yang dikembangkan oleh Microsoft. Anda dapat menggunakan Visual Studio Code untuk mengedit kode untuk banyak bahasa, termasuk HTML, CSS, JavaSkrip, dan PHP. Visual Studio Code gratis dan terus berjalan Windows, Mac, dan Linux.
Sublime Text
Sublime Text adalah editor kode lintas platform yang juga dapat digunakan untuk menulis dan mengedit HTML, CSS, JavaSkrip dan kode PHP. Ini adalah produk komersial, dan Anda perlu membelinya. Anda juga dapat menggunakannya secara gratis dalam mode tidak terdaftar.
Notepad++
Notepad++ adalah editor kode ringan yang mendukung banyak bahasa juga. Berbeda dengan Visual Studio Code dan Sublime Text, Notepad++ bukan lintas platform. Ini hanya berfungsi di Microsoft Windows platform.
NetBeans IDE
NetBeans adalah lingkungan pengembangan terintegrasi (IDE) yang menawarkan lebih banyak fitur daripada editor kode biasa. NetBeans gratis dan lintas platform.
Membangun Halaman Web Pertama Anda
Sekarang mari kita membuat halaman web sederhana. Di sini kita telah membuat dokumen HTML sederhana dan menerapkan beberapa gaya menggunakan Bootstrap CSS. Kami juga akan memiliki tombol yang dapat diklik yang akan menampilkan pesan sederhana menggunakan JavaNaskah.
Berikut adalah langkah-langkah yang membantu Anda mempelajari cara membuat situs web dari awal:
Langkah 1) Buka editor teks favorit Anda.
Di sini, kami membuka notepad.
Langkah 2) Buat file baru.
bernama indeks.html.
Langkah 3) Tambahkan kode berikut,
ke dalam file indeks.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>My First Web Page</title>
<script>
function displayMessage() {
document.getElementById("message").innerHTML = "Greetings from JavaScript!";
}
</script>
</head>
<body>
<div class="container">
<h1>My Web App!</h1>
<p id="message">Your message will appear here.</p>
<button type="button" class="btn btn-primary" onclick="displayMessage()">Click Me!</button>
</div>
</body>
</html>
Penjelasan:
- mendefinisikan jenis dokumen.
- … mendefinisikan tag head yang berisi metadata yang tidak terlihat oleh pengguna.
- Head juga berisi tag skrip yang berisi JavaKode skrip yang menampilkan pesan ucapan selamat.
- Kami juga sedang memuat Bootstrap CSS dari jaringan CDN.
- … mendefinisikan konten halaman kita: judul, paragraf, dan tombol yang menerapkan beberapa gaya Bootstrap css.
Membuat dari Awal Vs. menggunakan Sistem Manajemen Konten
Membuat website dari awal membutuhkan keterampilan dan pengetahuan yang sesuai. Ini juga memakan lebih banyak waktu dan juga dapat menghabiskan banyak uang.
Di sisi lain, Anda tidak perlu menjadi programmer yang terampil untuk membuat website Anda menggunakan Sistem Manajemen Konten seperti WordPress. Sistem Manajemen Konten mirip dengan aplikasi sejenisnya Microsoft Word.
Dengan Sistem Manajemen Konten, Anda fokus membuat halaman, menulis konten, dan menerbitkan konten, seperti membuat dokumen dalam bentuk kata dan mencetaknya ke printer.
Tabel berikut membandingkan dua metode populer dalam membuat situs web.
| S / N | Pro dan kontra | Membuat dari Awal | Menggunakan Sistem Manajemen Konten |
|---|---|---|---|
| 1 | Waktu | Membutuhkan banyak waktu. | Membutuhkan sedikit waktu. Itu dapat dibuat dalam waktu kurang dari 24 jam. |
| 2 | Biaya | Menyewa seorang programmer yang terampil bisa jadi mahal. | Anda dapat melakukannya sendiri atau mempekerjakan seseorang untuk membuatkannya untuk Anda. |
| 4 | Keterampilan | Memerlukan programmer yang berpengalaman dan terampil | Membutuhkan lebih sedikit keterampilan. Anda harus melek komputer untuk melakukannya. |
| 5 | Security | Peretas tidak dapat dengan mudah menemukan kelemahan dalam kode untuk dieksploitasi. | Peretas dapat dengan mudah menemukan kelemahan kode dan mengeksploitasinya. Pembaruan rutin penting untuk alasan keamanan. |
| 6 | Kecepatan | Cenderung lebih cepat karena hanya fitur-fitur yang diperlukan saja yang dimuat pada saat runtime. | Cenderung lebih lambat karena Sistem Manajemen Konten hadir sebagai solusi tujuan umum yang mungkin memuat fitur yang tidak terlalu Anda perlukan. |
| 7 | pemeliharaan | Mudah perawatannya karena pembaruan hanya dilakukan bila diperlukan | Memerlukan lebih banyak pekerjaan karena Anda harus melakukan pembaruan rutin pada CMS karena alasan keamanan. |
| 8 | Pengoptimalan Mesin Pencari (SEO) | Membutuhkan lebih banyak pekerjaan, dan programmer perlu diingatkan karena kebanyakan programmer bukanlah ahli SEO | Sebagian besar Sistem Manajemen Konten dilengkapi dengan alat SEO bawaan. Fitur tambahan dapat dengan mudah ditambahkan menggunakan plugin. |
Menggunakan Kerangka (Kerangka PHP MVC)
Di bagian ini, kita akan melihat bagaimana kita dapat membuat situs web kita dari awal. Setiap website harus menggunakan teknologi frontend seperti HyperText Markup Language (HTML), JavaSkrip, dan Cascading Style Sheets (CSS).
Backend memiliki lebih banyak pilihan untuk bahasa pemrograman. Anda dapat menggunakan PHP, Python, rubi, JavaScript, dll. PHP adalah salah satu yang paling umum. Kita akan membahas teknologi PHP di bagian ini.
Anda dapat menggunakan PHP karena prosesnya lambat, sehingga pemrogram yang membuat situs web dari awal pun perlu menggunakan kerangka pengembangan. Yang paling populer adalah kerangka Model-View-Controller (MVC). Contoh framework PHP MVC antara lain Laravel, CodeIgniter, Cake PHP, Symfony, dll.
Kerangka kerja MVC menyediakan fitur-fitur berikut:
- Konektivitas database bawaan dengan perpustakaan: Ini menghemat waktu Anda dalam menulis kode untuk menyambung ke database dengan aman guna menulis dan mengambil data.
- Modul otentikasi bawaan: Ini menghemat waktu Anda untuk menulis kode yang mengharuskan pengguna masuk dan keluar dari situs jika diperlukan.
- Kode terstruktur: Pola desain MVC memisahkan logika bisnis dari presentasi. Hal ini memudahkan untuk memiliki seorang programmer yang dapat bekerja di bagian belakang dan seorang desainer web yang bekerja di pengembangan bagian depan.
- Paket: Ini adalah kumpulan perpustakaan yang melakukan tugas yang sangat spesifik. Misalnya, Anda dapat menggunakan atau mendownload paket untuk menambahkan fitur seperti;
- Menambahkan fitur komentar Disqus ke situs Anda
- Memanggil API
- Mengintegrasikan gateway pembayaran.
Anda dapat menggunakan kerangka kerja MVC untuk mempercepat waktu pengembangan. Anda juga dapat menggunakan templat HTML untuk mempercepat pengembangan Frontend dengan menggunakan templat HTML sumber terbuka. Anda juga dapat membeli template HTML komersial lalu menyesuaikannya sesuai kebutuhan Anda. Beberapa pembuat template HTML bahkan membuat template HTML kerangka MVC tertentu.
Misalnya, Anda dapat membeli template HTML yang menggunakan template blade, mesin template yang terintegrasi dalam kerangka Laravel MVC.
Membuat situs web menggunakan Sistem Manajemen Konten (WordPress)
Di bagian ini, kita akan melihat bagaimana Anda bisa membuat situs web menggunakan WordPress:
Mengunduh WordPress
Anda dapat mengunduh WordPress dari situs resminya dan menjalankannya di komputer lokal Anda jika Anda memiliki server web dan menginstal PHP. Namun jika Anda sudah memiliki akun hosting, Anda bisa menginstal WordPress langsung dari cPanel Anda.
Memulai dengan WordPress
Setelah Anda menginstal WordPress, Anda dapat mulai membuat situs web Anda.
Hosting web:
Sebelum Anda memulai, Anda harus memiliki nama domain dan hosting web akun. Akun web hosting harus sudah menginstal PHP dan MySQL sebagai mesin basis data. Anda dapat mengambil layanan dari Bluehost, Godaddy, atau Anda dapat menghosting dengan WP Engine, yang khusus menyediakan hosting WordPress terkelola.
Instalasi:
Sebagian besar penyedia web hosting memiliki skrip khusus di panel administratif yang memungkinkan Anda menginstal WordPress. Jika penyedia hosting Anda menggunakan cPanel, maka Anda seharusnya bisa menginstal WordPress dengan mengklik ikon WordPress seperti yang ditunjukkan pada gambar di bawah ini:
Setelah Anda memilih opsi di atas, Anda akan disajikan dengan jendela berikut untuk menyelesaikan instalasi.
Pengaturan:
Bagian pengaturan memungkinkan Anda untuk mengonfigurasi hal-hal seperti nama situs, tautan permanen URL, zona waktu, apakah ada yang dapat mendaftar di situs Anda, dll.
Template:
Template memungkinkan kita melihat seperti apa tampilan situs web kita. WordPress hadir dengan templat bawaan gratis yang dapat Anda gunakan segera. Anda juga dapat mendownload template yang dibuat oleh orang lain. Selain template gratis, Anda juga dapat membeli template premium dari pasar seperti ThemeForest.
Plug-in:
Plugin memungkinkan Anda memperluas fungsionalitas WordPress. Misalnya, Anda dapat menggunakan plugin untuk memungkinkan klien membayar Anda melalui PayPal dari situs web Anda. Anda juga dapat menggunakan plugin untuk memaksa pengguna menggunakan koneksi aman (HTTPS) atau membuat peta situs.
Pembuat situs web:
Pembuat situs web hadir dengan banyak fitur yang memudahkan pembuatan situs web menggunakan metode drag and drop. Pembuat situs web biasanya dipasang sebagai plugin dan dilengkapi dengan templat yang dapat Anda gunakan.
Mari kita lihat beberapa pembuat web paling populer:
Astra
Astra adalah tema WordPress yang cepat, ringan, dan sangat dapat disesuaikan. Muncul dengan templat pemula yang dapat Anda gunakan untuk membuat situs Anda dengan cepat. Ini memiliki templat pemula gratis dan premium.
Elemen:
Elementor adalah pembuat situs web seret dan lepas untuk WordPress yang digunakan lebih dari 5 juta pengguna. Elementor menawarkan fitur gratis dan premium.
Pembuat Berang-berang:
Beaver Builder adalah pembuat situs web drag-and-drop yang mudah digunakan untuk WordPress yang memungkinkan Anda membuat situs web yang terlihat profesional dengan cepat.
Alternatif WordPress
WordPress bukan satu-satunya Sistem Manajemen Konten yang dapat Anda gunakan untuk membangun situs web Anda. Anda juga dapat melihat alternatif seperti
- Joomla: Joomla adalah sistem manajemen konten sumber terbuka yang dapat digunakan untuk mempublikasikan konten, forum diskusi, aplikasi e-commerce, dll. Joomla menggunakan PHP sebagai bahasa pemrograman dan MySQL sebagai mesin basis data.
- drupal: Ini adalah sistem manajemen konten web yang dapat membuat blog pribadi, situs web perusahaan, atau manajemen pengetahuan untuk kolaborasi bisnis. Drupal ditulis dalam PHP dan JavaNaskah.
- MODX: Ini adalah sistem manajemen konten sumber terbuka yang ditulis dalam PHP. Dan kegunaannya MySQL sebagai mesin basis data. Ini dapat digunakan di web maupun intranet.
- Konstan Kontak: Ini adalah website builder yang menyediakan fitur drag and drop. Ini dapat digunakan untuk membuat situs web dasar dan toko e-niaga.
Kesimpulan
- Situs web dibuat menggunakan kode komputer.
- Kode komputer adalah instruksi yang dapat dibaca manusia yang memberitahu komputer untuk melakukan tugas tertentu.
- Situs web dapat dibuat baik dari awal atau menggunakan platform yang sudah ada seperti WordPress.
- Membuat website dari awal membutuhkan waktu lebih lama dibandingkan membuat menggunakan platform.
- Membuat website dari awal lebih fleksibel dibandingkan menggunakan platform yang sudah ada.
- Bahasa pemrograman yang digunakan untuk membuat website adalah HTML, CSS, JavaSkrip, dan bahasa skrip untuk backend, seperti PHP, Python, Rubi, dll.
- WordPress adalah sistem manajemen konten yang dapat digunakan untuk membuat website dengan sangat cepat.
- WordPress mendukung plugin seperti Astra, Elementor atau, Beaver Builder, dll., untuk menyediakan fitur desain website drag and drop.
- Framework MVC seperti Laravel atau CodeIgniter dapat digunakan untuk mempercepat pengembangan website dari awal.
