Langsung ke konten utama

Panduan Rinci Cara Membuat Website


Website adalah suatu kumpulan halaman berbentuk digital yang dapat diakses menggunakan perangkat lunak yang disebut Browser, dengan bantuan jaringan Internet. Penjelasan mengenai apa itu website telah dijelaskan sebelumnya di dalam postingan : Mengenal Apa Itu Web dan Hal yang Perlu di Perhatikan dalam Membangun Web.

Didalam postingan tersebut sudah dijelaskan apa saja yang perlu diperhatikan dalam pembuatan web atau website. Selanjutnya pada postingan ini akan dijelaskan secara rinci bagaimana cara membuat sebuah website. Sebelum membuat sebuah website anda harus memutuskan terlebih dahulu akan membuat website seperti apa. Jika anda sudah menentukan tema web anda sekarang anda perlu menentukan aplikasi apa yang ingin anda gunakan. Apakah anda akan membuatnya secara native, menggunakan framework, atau menggunakan CMS.

Pada postingan ini yang dijelaskan adalah langkah-langkah membuat sebuah website baik secara native, framework, ataupun menggunkan CMS. Silahkan anda simak langkah demi langkah.

Langkah pertama menentukan dan menginstall aplikasi

Adapun aplikasi yang dibutuhkan adalah sebuah aplikasi editor text untuk menuliskan kode pemrograman, aplikasi web server (untuk melihat web dalam keadaan offline), serta aplikasi browser untuk menampilkan web yang sudah di tuliskan. Disini saya akan menyebutkan saja aplikasi yang digunakan, karena saya tahu tentunya anda sudah mengenal aplikasi di bawah ini :

  • Aplikasi Server : XAMPP
  • Aplikasi editor : Sublime Text
  • Aplikasi browser : Mozilla Firefox




Langkah Kedua Memilih

Secara Native (Coding langsung)

Jika anda sudah menginstall semua aplikasi di atas kini saatnya anda memulai menuliskan sebuah program. Silahkan buka folder XAMPP anda, bisanya berada di lokasi C:/Xampp/Htdocs/ silahkan buat folder baru dalam folder Htdocs tersebut. Berikan nama folder sesuai dengan keinginan anda misalnya "percobaan". Sehingga nantinya untuk mengakses website ini kita memasukkan alamat "http://localhost/percobaan/".

Jangan lupa jalankan aplikasi XAMPP klik start pada Apache dan MySql. Selanjutnya ikuti langkah pembuatan web secara native berikut :

  • Buat sebuah struktur folder di dalam folder web "percobaan" anda. Struktur yang baik nantinya akan memudahkan anda bila ingin mengedit kembali web anda. Sebaliknya web yang strukturnya buruk nantinya akan berefek ketika anda ingin mangedit kembali web anda. Buatlah struktur folder yang dimulai dari asset, dan inc.

    Asset - berisi file-file dan folder yang mendukung tampilan web seperti css, js, boostrap, gambar, serta plugin-plugin yang ingin anda tambahkan.

    Inc - folder ini berisi file yang nantinya akan di includekan dengan file utama yaitu file index. File-file yang bisa anda masukkan kesini seperti header, content, atau footer.

    Jika anda sudah membuat struktur di atas itu berarti di folder utama sekarang terdapat 2 folder dan satu file seperti gambar berikut :


  • Langkah selanjutnya adalah mengisi folder css dengan kode css yang akan anda terapkan pada web nantinya. Begitupula dengan js atau javascript silahkan diisi dengan kode js anda.
  • File utama yang harus anda perhatikan adalah index.php karena itu adalah file pertama yang akan di eksekusi apabila web di akses.

Menggunakan Framework

Framework akan sangat membantu apabila anda ingin membuat web dengan bantuan class-class yang tinggal anda panggil. Misalnya untuk mengakses ke database anda tinggal memanggilnya dengan perintah yang sangat sederhana, tidak lagi menuliskan "mysql_query(aksi)" tapi anda bisa menggunakan perintah "return $this->db->get('user')". Perintah tersebut berlaku untuk framework CI (Codeigniter). Tidak tahu apa itu Codeigniter, silahkan baca Mengenal Apa itu Codeigniter (CI) beserta Sejarahnya. Untuk tahapan penggunaan CI anda bisa memulai dengan :

  • Silahkan download file Ci di website resminya disini. Pilih yang paling terbaru.
  • Setelah itu hasil file download tadi akan berupa file berekstensi ".zip". Exctract file tersebut kedalam folder htdocs.
  • Sekarang anda bisa berkreasi mengguanakan Codeigniter. Silahkan baca : Dasar-dasar Codeigniter Bagi Pemula.

Menggunakan CMS

CMS kepanjangan daari Content Management System adalah situs atau aplikasi yang berguna untuk membuat web secara instant. Contoh CMS seperti Wordpres. Dengan menggunakan cms anda tidak perlu lagi khawatir akan segi keamanannya karena sudah teruji. CMS menyediakan tema tampilan web, serta halaman admin dimana anda bisa mengatur bagaimana tampilan web anda. Sayangnya anda tidak akan leluasa untuk membangun web sesuai keinginan anda sebab, diperlukan pemahaman koding yang tinggi untuk mengutak atik koding CMS.

Apabila anda berniat menggunakan CMS saya merekomendasikan Wordpress. Untuk mengetahui lebih jauh dan cara pemasangan silahkan baca : Cara Pasang Wordpress di Htdoc Xamp.

Langkah Ketiga Mulailah Belajar Bahasa Pemrograman WEB

Bukan Development Web namanya jika belum tahu bahasa pemrograman web. Ada beberapa bahasa pemrograman web yang harus anda ketahui. Berikut yang saya maksudkan :

  • HTML - merupakan bahasa pemrograman web wajib untuk anda ketahui karena dengan bahasa inilah anda akan mengatur element-element apa saja yang akan anda tampilkan pada web anda.
  • CSS - berguna untuk mengatur tampilan, contohnya background, padding, margin, dan lain-lain.
  • JavaAcript - bahasa ini akan membuat web anda lebih interaktif. Contoh penggunaan js atau javascript bisa dilihat pada slide, menu, splash screen, serta animasi. Baca Belajar Fungsi Dasar Java Script

Komentar

Postingan populer dari blog ini

Cara Mengatasi Blank Hitam Pada Photoshop

Saat ini mungkin anda sedang mengalami hal yang pernah saya alami, dimana ketika mengedit gambar di Photoshop tiba-tiba screen layer project berubah menjadi hitam. Apalagi pas menambahkan atau mengedit tulisan, blank ini kerap kali muncul. Kurang lebih akan tampak seperti gambar berikut. Teman-teman jangan khawatir karena saya telah menemukan solusinya dan berhasil saya terapkan. Berikut Cara Mengatasi Blank Hitam Pada Photoshop. 1. Masuk ke menu preferences dengan menekan menu Edit -> Preferences -> Performance . 2. Pada layar Preferences klik tombol Advanced Settings 3. Pada layar Advanced Graphics Processor Settings pada pilihan Drawing Mode silahkan ganti menjadi basic kemudian klik Ok , anda akan kembali ke layar Preferences silahkan klik lagi OK . 4. Selanjutnya tutup Photoshop anda dengan klik menu File -> exit . 5. Terakhir buka kembali Photoshop dan lihat hasilnya.

Inilah Kelebihan dan Kekurangan Ruby

Ruby merupakan salah satu bahasa pemrograman berorientasi objek berbasis skrip yang dikembangkan oleh Yukihiro Matsumoto yaitu seorang programer asal Jepang. Untuk mengetahui lebih jauh tentang bahasa Ruby silahkan baca postingan sebelumnya : Mengenal Bahasa Pemrograman Ruby  Sesuai judul postingan kali ini kita hanya akan membahas mengenai Kelebihan serta Kekurangan Bahasa Pemrograman Ruby. Berikut beberapa point yang telah kami jabarkan. Kelebihan Bahasa Pemrograman Ruby 1. Kode sederhana  Dibandingkan dengan bahasa pemrograman lainnya, yang kebanyakan untuk menulis kode dibutuhkan sekitar 10 baris, pada Ruby hanya butuh 1 atau 2 baris. Inilah kenapa Ruby dikatakan memiliki kode yang sederhana. Karena kesederhanaan dalam kodenya, akan mengurangi jam kerja programmer. 2. Multi-platform Ruby dapat berjalan di berbagai sistem operasi seperti Mac, Windows, hingga Linux. 3. Tingkat kebebasan yang tinggi Salah satu bentuk kebebasan programer dalam menuliska kode Ruby seperti tidak adanya p

Mengenal Apa itu Android Studio

Android Studio merupakan tools IDE ( Integrated Development Environment ) yang digunakan untuk membuat aplikasi android. Fungsi utamanya adalah sebagai editor yang menyediakan berbagai kebutuhan dalam membangun aplikasi android seperti widget, library, dll. Android Studio versi terbaru telah mendukung 2 bahasa pemrograman yaitu Java dan Kotlin. Sebelumnya hanya mendukung bahasa Java. Android Studio hadir sebagai pengganti Eclipse ADT ( Android Development Tools ) yaitu tools utama sebelumnya. Tools Android Studio ini dibangun di atas aplikasi yang sudah populer sebagai editor programer yaitu JetBrains IntelliJ IDE. Selain itu Android Studio di lengkapi dengan Emulator sendiri. Sama halnya seperti Eclipse, Android Studio juga memerlukan SDK ( Software Development Kit ) untuk membangun aplikasi android. Bedanya Android Studio didukung penuh oleh Google sebagai pengembangnya serta menggunakan grandle dalam melakukan build. Baca juga : Perbedaan Membuat Aplikasi Android Menggunakan Ecli