Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tutorial

Cara Memulai Pengkodean Situs Web Dari Awal

Oleh Kepo Gem Posting Komentar
Image


Apakah Anda terkesan dengan situs web indah yang Anda kunjungi setiap hari? Atau apakah Anda akhirnya membuat keputusan untuk mempelajari cara membuat situs web? Mungkin Anda hanya ingin tahu tentang cara kerja situs web?

Biarkan saya memberi tahu Anda sesuatu, Anda berada di tempat yang tepat. Hari ini saya akan membahas dasar-dasar pengembangan web (seperti alat, teknologi, bahasa pemrograman yang digunakan untuk membuat situs web) semuanya melalui panduan langkah demi langkah. Jadi, mari kita mulai perjalanan luar biasa kita!

Apa yang akan Anda pelajari dalam artikel ini?

  • Persyaratan sederhana sebelum memulai
  • Apa itu Bahasa Markup dan HTML
  • Berikan gaya pada markup Anda menggunakan CSS
  • Jadikan situs web Anda interaktif menggunakan JavaScript
  • Perbedaan antara situs web Statis dan Dinamis
  • Apa itu bahasa pemrograman sisi server dan PHP
  • Apa itu Sistem Manajemen Basis Data dan MySQL
  • Daftar beberapa topik pengembangan web lanjutan yang menarik
  • Kesimpulan

Persyaratan sederhana sebelum memulai

Anda harus memenuhi beberapa persyaratan dasar sebelum kami mulai membuat beberapa hal yang luar biasa. Apakah kamu siap?

1- Anda memerlukan Browser Web untuk melihat apa yang Anda desain

Saat Anda melihat artikel ini menggunakan browser, itu berarti Anda telah memenuhi persyaratan kecil namun penting ini. Wow, mari kita bicara sedikit tentang itu.

Peramban web hanyalah sebuah perangkat lunak aplikasi yang dirancang khusus untuk melihat sumber informasi di World Wide Web. Sumber informasi dapat berupa apa saja, mulai dari halaman web sederhana hingga gambar, video, atau konten multimedia lainnya. Sumber daya informasi ini terletak dengan alamat unik yang dikenal sebagai URL (Uniform Resource Locator). Cukup sederhana?

Beberapa browser web populer adalah sebagai berikut: -

  • Google Chrome
  • Firefox
  • Safari
  • UC Browser
  • Internet Explorer
  • Opera

2- Editor Teks atau IDE (Lingkungan Pengembangan Terpadu)

Anda memerlukan editor teks sederhana untuk segera memulai pengkodean situs web. Sepertinya Anda sudah menginstalnya di komputer Anda seperti Notepad, TextEdit dll. Tapi saya akan merekomendasikan menggunakan editor teks yang lebih canggih seperti Notepad++ atau Sublime Text. Karena mereka memiliki beberapa fitur seperti "tab" yang memungkinkan Anda membuka banyak file dalam satu layar. Kami pasti akan sering menggunakan fitur ini ketika kami mulai membuat situs web profesional.

Jika Anda menginginkan perangkat lunak yang lebih canggih maka Anda dapat memilih IDE (Integrated Development Environment) yang memberi Anda lebih banyak fitur daripada editor teks sederhana. Beberapa fiturnya termasuk "menemukan bug", "penyelesaian kode cerdas", dll.

Beberapa IDE yang paling sering digunakan untuk pengembangan web adalah sebagai berikut: -

  • Adobe Dreamweaver
  • Eclipse
  • Studio Aptana

3- Nama domain dan hosting / Pengembangan lokal

Karena kami akan membuat beberapa file untuk menulis kode untuk situs web kami, jadi kami membutuhkan ruang penyimpanan tempat kami meletakkan semua file ini dan mengaksesnya nanti. Kami memiliki dua opsi untuk ruang penyimpanan, ini adalah sebagai berikut: -

Pembangunan Lokal

Ya, Anda dapat membuat situs web di komputer Anda dan melihatnya kapan pun Anda mau tanpa harus memiliki koneksi internet. Tetapi situs web hanya dapat diakses oleh Anda karena semua kode dan file multimedia berada di komputer lokal Anda dan tidak ada orang lain yang memiliki akses ke sana.

Anda dapat menyimpan file di mana saja di komputer Anda, tetapi agar tetap teratur, saya sarankan membuat folder terpisah untuk setiap situs web yang akan Anda buat.

Jika Anda ingin membuat situs web Anda online, yang memungkinkan teman, keluarga, dan seluruh dunia memiliki koneksi internet untuk melihat situs web Anda yang menakjubkan, maka Anda harus membaca bagian "Nama domain dan hosting" jika tidak, Anda dapat melewatinya dan beralih ke bagian bagian "Bahasa Markup".

Nama domain dan hosting

Dengan kata sederhana hosting adalah ruang penyimpanan file online di mana Anda dapat menempatkan sumber daya situs web Anda (yaitu file kode, gambar, video, dll.) sehingga setiap orang yang memiliki koneksi internet dapat mengaksesnya menggunakan browser web untuk melihat situs web, bukan begitu Dingin?

Ada banyak penyedia hosting gratis dan berbayar yang bisa Anda gunakan, seperti:

Hosting GRATIS:-

  • 000webhost
  • awardspace
  • freehosting.com

Hosting Berbayar:-

  • Godaddy
  • Bluehost
  • HostGator

Sekarang Anda tahu di mana menyimpan file dan sumber daya situs web Anda, tetapi bagaimana orang lain di dunia dapat mengaksesnya? Untuk itu Anda memerlukan alamat unik (sering disebut nama domain) dan menautkannya ke hosting Anda.

Jika Anda mendapatkan nama domain dan hosting dari perusahaan yang sama maka kemungkinan besar mereka akan secara otomatis menghubungkan dan mengatur nama domain Anda dengan akun hosting. Jika tidak, Anda mungkin harus melakukan konfigurasi sederhana di pengelola domain dan akun hosting Anda masing-masing, Anda bisa mendapatkan informasi langkah demi langkah dari nama domain dan penyedia hosting khusus Anda.

Itu saja yang Anda butuhkan untuk membuat dan melihat situs web Anda sendiri. Mari kita lanjutkan dan pelajari bahasa apa yang Anda butuhkan untuk mulai menulis kode untuk situs web Anda, bersemangat? Gerakan mengungkap kekerasan seksual demi menghapuskannya!

Apa itu Bahasa Markup dan HTML

Dengan kata sederhana, bahasa markup digunakan untuk mendeskripsikan dan memberi struktur pada konten dalam file. Ini terdiri dari markup's (juga dikenal sebagai "tag") yang menginstruksikan komputer untuk menampilkan teks di dalam tag pembuka dan penutup dengan cara tertentu (yaitu membuat judul teks atau paragraf, dll.). Dalam sebagian besar bahasa markup, tag dihilangkan dalam output dan hanya teks aktual di dalamnya yang ditampilkan.

Ada banyak bahasa markup yang berbeda tetapi untuk pengembangan situs web modern kami hanya menggunakan HTML dan khususnya versi terbaru yaitu HTML5. Mari kita bicara sedikit lebih banyak tentang HTML.

HTML

HTML juga dikenal sebagai Hyper Text Markup Language adalah bahasa utama web. Browser web Anda memahaminya dan menampilkan konten yang diformat di layar sambil menghilangkan tag dari hasil akhir. Terkadang file HTML juga disebut sebagai "dokumen HTML" atau "halaman web".

Ini terdiri dari kumpulan elemen yang telah ditentukan, semuanya memiliki arti tertentu sehingga mereka harus digunakan dengan tepat. Sebagian besar elemen HTML memiliki tag pembuka dan penutup yang memungkinkan kita untuk menambahkan teks yang diinginkan di antaranya. Beberapa elemen HTML tidak memiliki tag penutup, itulah sebabnya mereka dikenal sebagai tag penutup sendiri.

Beberapa elemen HTML terpenting yang Anda lihat setiap hari adalah sebagai berikut:

  • Judul: <h1> hingga <h6>
  • Paragraf: <p>
  • Tombol: <tombol>
  • bidang masukan: <input>
  • Tag jangkar (juga dikenal sebagai tautan): <a>

Ada lebih dari 100 tag di HTML5. Untuk referensi tag yang lengkap, Anda harus mengunjungi situs web Mozilla dan w3schools.com masing-masing.

Elemen HTML juga memiliki atribut yang memungkinkan mereka memberikan informasi dan fungsionalitas tambahan. Atribut yang diizinkan bergantung pada elemen yang dipilih dan harus disertakan dalam tag pembuka.

Untuk mulai menulis kode HTML, Anda perlu membuat file berekstensi .html dari editor teks favorit Anda. Simpan file setelah menulis beberapa kode HTML di dalamnya dan kemudian buka dengan browser web favorit Anda. Sesederhana itu!

Berikan gaya pada markup Anda menggunakan CSS

Sekarang Anda mungkin memiliki sedikit ide tentang bagaimana struktur halaman web dibuat, tetapi Anda mungkin berpikir tentang bagaimana situs web favorit Anda seperti Google atau Facebook menata elemen HTML untuk membuat situs web yang terlihat profesional. Biarkan saya memberi tahu Anda sesuatu bahwa itu semua terjadi dengan kekuatan besar CSS.

CSS

CSS juga dikenal sebagai Cascading Style Sheets adalah bahasa yang memungkinkan Anda untuk mengatur gaya tag HTML Anda sesuai dengan kebutuhan Anda. Peramban web memahaminya dan menata halaman web Anda sesuai keinginan.

Sintaks CSS sangat sederhana karena terdiri dari kumpulan aturan yang selanjutnya dibagi menjadi bagian pemilih dan deklarasi. Selektor mendefinisikan elemen HTML yang ingin Anda ubah dan blok deklarasi menentukan semua properti yang akan diubah. Properti CSS memiliki arti yang telah ditentukan sebelumnya tetapi Anda dapat mengubah nilainya (seperti: "mengubah properti warna paragraf dari hijau menjadi biru"), kemungkinannya tidak terbatas.

Untuk referensi lengkap properti CSS, saya akan merekomendasikan mengunjungi situs web w3schools.com .

Ada tiga cara di mana Anda dapat menambahkan CSS di halaman web Anda, ini adalah sebagai berikut:

  • Inline Style:- Gaya sebaris adalah kumpulan properti CSS yang disisipkan di dalam atribut "gaya" elemen HTML.
  • internal style sheet:- Lembar gaya internal adalah kumpulan set aturan CSS yang ditambahkan dalam file HTML menggunakan tag <style>.
  • eksternal style sheet:- Dalam lembar gaya eksternal kami membuat file teks terpisah yang memiliki ekstensi .css dan menempatkan semua set aturan CSS kami di dalamnya dan kemudian cukup hubungkan file itu di file HTML kami menggunakan tag <link>.

Jadikan situs web Anda interaktif menggunakan JavaScript

Sejauh ini kami telah mempelajari cara menyusun dan mendesain situs web, tetapi tahukah Anda bahwa kami juga dapat menambahkan hal-hal keren di situs web seperti penggeser animasi, penghitung waktu, validasi input pengguna, menu drop-down, memuat posting terbaru tanpa menyegarkan halaman seperti di Facebook dll. Itu semua mungkin karena kekuatan dan fleksibilitas yang disediakan JavaScript.

JavaScript

Pada dasarnya JavaScript adalah bahasa pemrograman berorientasi objek tingkat tinggi yang dimengerti oleh browser Anda. Ini memiliki semua fitur dari bahasa pemrograman yang khas seperti variabel, operasi aritmatika dan perbandingan, loop untuk mengulangi tugas lagi dan lagi, array, fungsi dan sebagainya. Ini memungkinkan Anda untuk berinteraksi dengan elemen HTML dan desainnya (seperti mengubah warna paragraf saat mengklik tombol).

Untuk menambahkan JavaScript di halaman web Anda, Anda memiliki dua opsi, yaitu sebagai berikut:

  • Di dalam tag <script>:- Anda dapat menambahkan kode JavaScript di dalam file HTML menggunakan tag <script>. Anda dapat menempatkan tag ini di mana saja dalam dokumen tetapi cara yang disarankan adalah menambahkannya tepat sebelum tag <body> penutup untuk mengurangi waktu buka halaman situs web kami.
  • File eksternal: - Jika Anda ingin menggunakan kode JavaScript yang sama di banyak file, saya sarankan Anda membuat file teks terpisah yang memiliki ekstensi .js dan menempatkan kode Anda di dalamnya. Jadi, Anda akan dapat menambahkannya di halaman web mana pun yang Anda suka. Anda dapat menghubungkan file JavaScript dalam HTML menggunakan tag <script>.

Perbedaan antara situs web Statis dan Dinamis

Sebenarnya kita dapat secara luas mengkategorikan situs web menjadi dua jenis utama, Statis dan Dinamis. Sejauh ini kita telah mempelajari tentang situs web statis, sekarang beralih ke pembahasan apa yang berbeda dalam situs web dinamis.

Situs web statis

Situs web yang isinya tidak dapat diubah tanpa benar-benar mengedit kode disebut situs web Statis. Situs web ini hanya dibuat untuk menampilkan konten yang tidak perlu sering kami perbarui.

Situs web dinamis

Situs web dinamis adalah situs web yang sering memperbarui kontennya tanpa mengedit file kode yang sebenarnya. Sama seperti Anda melihat kiriman terbaru dari teman dan keluarga Anda muncul di umpan berita Facebook Anda.

Tapi bagaimana mereka melakukannya?

Untuk membuat website dinamis kita harus menggunakan dua hal lagi, bahasa pemrograman Server-side dan Database Management System.

Konsep dasar di balik situs web dinamis adalah bahwa kami menyimpan dan mengambil data kami dari Database, bukan mengkodekannya di dalam file HTML. Bahasa pemrograman sisi server digunakan untuk melakukan operasi penyimpanan dan pengambilan data.

Apa itu bahasa pemrograman sisi server dan PHP

Bahasa pemrograman sisi server adalah bahasa yang berjalan di server alih-alih browser. Ada daftar besar bahasa-bahasa ini seperti PHP, ASP.NET, Java, Python, dan sebagainya. Demi artikel ini saya akan memilih bahasa pemrograman sisi Server yang paling populer "PHP" yang gratis dan open source. Yang terpenting, situs web favorit Anda seperti Facebook, Yahoo, Wikipedia, Flickr, dll. Dikembangkan dengan menggunakannya. Jadi, itulah alasan besar memilih bahasa ini sebagai peluang karir.

Mari kita bahas lebih lanjut tentang PHP…

PHP

PHP (singkatan rekursif untuk PHP: Hypertext Preprocessor) adalah bahasa scripting tingkat tinggi berorientasi objek. Dengan bahasa scripting yang saya maksud adalah bahwa itu dapat disematkan di dalam kode HTML kami. Ini adalah bahasa pemrograman sisi Server yang paling banyak digunakan untuk membuat situs web dinamis. Ini memiliki semua fitur bahasa pemrograman modern. Ini memungkinkan kita untuk terhubung dengan Sistem Manajemen Basis Data untuk melakukan operasi CRUD (Buat, Ambil, Perbarui, dan Hapus) pada basis data.

Kami membutuhkan file teks yang memiliki ekstensi .php untuk mulai menulis kode PHP kami. Ya itu benar, kami tidak dapat mengeksekusi kode PHP dalam file HTML, tetapi kami dapat menambahkan kode HTML dalam file PHP.

Untuk mengeksekusi kode PHP kita membutuhkan server. Apakah Anda memikirkan apa yang akan kami lakukan jika kami belum membeli server hosting? Ada kabar baik untuk Anda: kami dapat menjalankan kode PHP di komputer lokal kami dengan menginstal perangkat lunak sederhana dan gratis. Hampir semua pengembang profesional membuat situs web di komputer lokal terlebih dahulu dan setelah pengujian kode selesai, unggah ke server online.

Ada banyak perangkat lunak gratis yang tersedia yang menyediakan alat yang diperlukan untuk mengeksekusi kode PHP di komputer lokal, beberapa di antaranya adalah sebagai berikut:

Apa itu Sistem Manajemen Basis Data dan MySQL

Sistem Manajemen Basis Data atau DBMS adalah perangkat lunak aplikasi yang memungkinkan Anda membuat dan mengelola basis data Anda. Ada beberapa jenis DBMS tetapi kami hanya akan fokus pada Relational Database Management System (RDBMS) yang dibangun berdasarkan model Relasional.

Ada beberapa perusahaan seperti Oracle Corporation dan Microsoft yang mengembangkan RDBMS mereka sendiri. Jadi, ada banyak RDBMS yang bisa kita gunakan dengan bahasa pemrograman tetapi RDBMS gratis dan open source yang paling banyak digunakan adalah "MySQL", kita pasti akan memanfaatkannya.

Ingin mendengar kabar baik? Ini dia: Seperti yang telah kita bicarakan sebelumnya tentang beberapa perangkat lunak XAMPP, WAMP, MAMP dan LAMP, semuanya datang dengan DBMS MySQL bawaan dan aplikasi bernama PHPMyAdmin yang membuatnya sangat mudah untuk membuat dan mengelola database, jadi kita tidak perlu ' t perlu menginstal perangkat lunak tambahan.

Menyimpan dan mengambil data dari database – (MySQL)

Ada satu bahasa lagi yang disebut sebagai Structured Query Language atau SQL yang merupakan bahasa umum untuk berbicara dengan RDBMS dan memungkinkan kita untuk melakukan banyak operasi (seperti membuat database, CRUD "Buat, Ambil, Perbarui dan Hapus catatan" dll.) pada sebuah database.

Untuk mempelajari lebih lanjut tentang SQL saya akan merekomendasikan mengunjungi w3schools.com

Daftar beberapa topik pengembangan web lanjutan yang menarik

Itu saja untuk saat ini, jika Anda ingin mempelajari lebih lanjut daripada di sini adalah beberapa topik lanjutan yang menarik

  • Desain responsif
    • Media Queries
    • Bootstrap (kerangka CSS)
  • Kerangka JavaScript
    • jquery
  • kerangka kerja PHP
    • CodeIgniter
    • Laravel
    • symfony
    • Zend
    • Cakephp
  • Sistem Manajemen Konten
    • WordPress
    • drupal
    • Joomla
  • Font ikon
    • FontAwesome
    • Glyphicon bootstrap
  • FTP (File Transfer Protocol) / C-panel untuk mengunggah file situs web ke hosting/server

Kesimpulan

Pengembangan web adalah bidang yang menarik dengan cakupan yang luas karena meningkatnya penggunaan internet dari hari ke hari. Usaha kecil dan besar mempekerjakan orang untuk mengembangkan situs web untuk kehadiran online mereka. Anda juga dapat bekerja dari rumah sebagai pekerja lepas dan mulai menghasilkan uang segera. Tetapi yang utama adalah dibutuhkan kesabaran dan upaya terus menerus untuk mempelajari sesuatu.

Bagikan pengalaman Anda sendiri tentang teknologi pengembangan web di komentar. Juga beri tahu saya bagaimana posting blog pertama saya dan jika Anda tidak mengerti apa-apa maka saya di sini untuk membantu. Hubungi saya saja.

Jika menurut Anda postingan ini bermanfaat, jangan lupa untuk membagikannya ke teman-teman Anda di platform media sosial favorit Anda

Posting Komentar untuk "Cara Memulai Pengkodean Situs Web Dari Awal"