...

Pengenalan Web

Rekan-rekan programmer dan calon programmer, teknologi berbasis web menjadi nomor 1 karena teknologi ini dapat diakses melalui lintas platform. Tidak masalah jika kita ingin menggunakan Linux, Android, iOS, ataupun Windows sebab hal yang paling panting adalah adanya aplikasi browser pada platform-platform tersebut. Saat ini, teknologi web bukan hanya skedar HTML, CSS, dan Javascript saja. Sekarang, teknologi web sudah sangat maju walaupun dasar-dasar web tetap berpijak pada 3 teknologi (HTML, CSS, dan JS). Hal ini tentu semakin memantapkan keunggulan aplikasi berbasis web, yakni penggunaanya yang bisa dilakukan kapan saja (anytime), di mana saja (anywhere), dan oleh siap saja (everyone).

Rangking Bahasa Pemrograman di Tahun 2021 | Statistic Times

Sebaiknya, Jika sahabat Cyberspace.id ingin belajar membuat aplikasi web, jangan belajar HTML, PHP, dan MySQL saja. Masih banyak teknologi di luar sana yang perlu kita pelajari, seperti Analytic Tool, Advertising Network, Cache Tools, Blog Platform, Captcha, CDN (Content Delivery Network), CMS (Content Management System), Comment System, Maps, Fontscript, dan Framework.

Berita baiknya adalah saat ini membuat aplikasi web semakin mudah, siapapun mampu mempelajarinya bahkan sekalipun Sahabat Cyberspace.id tidak mempunyai bakat keilmuan teknik informatika. Sekarang ini, programmer tidak harus kuliah dijurusan komputer atau teknik informatika.

Tantangan dalam membuat teknologi web adalah bagaimana cara membuatnya dan bagaimana hasilnya. Nah, Framework Laravel adalah salah satu teknologi pemrograman PHP untuk membuat aplikasi web dan menghasilkan produk yang luar biasa.

Zaman sekarang tidak mempunyai website? Rugi jika sekarang ini kita belum mempunya halaman dunia online. Realitanya, untuk memperoleh informasi dalam maktu cepat atas suatu kejadian seseorang lebih senang mengakses media online.

Tidak hanya informasi, tetapi juga transaksi dan komunikasi sosial. Hal inilah yang menjadi motivasi semua orang membuat atau memiliki website karena melihat prospek, kecepatan, dan efektivitas media ini. Pada umumnya, motivasi seseorang membuat website adalah sebagai berikut:

Berbagi informasi dan pengalaman.

Ilmu yang bermanfaat merupakan salah satu amalan yang baik. Orang membuat blog atau website senatiasa mencoba berbagi pengetahuan dan pengalamannya kepada orang lain. Dengan berbagi informasi, seorang pembuat blog akan memperoleh kepuasan bathin yang nyata. Dia merasa bahwa sayang sekali jika ilmu yang dimilikinya tidak diwariskan kepada generasi muda berikutnya.

Mencari penghasilan tambahan.

Banyak pengguna internet, membuat sebagian orang berencana untuk membuat blog atau website. Melihat kesempatan ini, memberikan motivasi untuk mencari penghasilan didunia online melalui pembuatan blog atau website. Cara-cara yang ditempuh biasanya dengan membuat toko online atau membuat blog yang banyak pengunjungnya sehingga dapat menarik datangnya iklan sehingga rupiah-rupiah bahkan dolar pun akan terkumpul.

Hobi atar kegemaran.

Membuat blog juga dilatabelakangi oleh hobi atau kesenangan. Membuat blog yang menarik dengan desain yang bagus serta berpengunjung banyak merupakan tujuannya. Desaian blog yang bagus dapat memberikan kepuasan dan kesenangan pribadi.

Menambah pengetahuan diri.

Kemajuan teknologi terutama di dunia online membuat seseorang tidak mau ketinggalan untuk berpartisipasi aktif di dalamnya.

Motivasi seseorang pembuat website memang bermacam-macam semuanya tidak ada yang salah, tapi ingat selalu gunakan cara-cara yang baik untuk mencapai tujuan yang kita inginkan. Pada dasarnya sesuatu hal yang dimulai dengan niat iklas dan baik akan menuai hasil yang baik pula.

Bagi yang sedang atau memulai belajar untuk membuat website, berikut ini adalah hal-hal yang harus kita pahami terlebih dahulu sehingga akan memudahkan perjalanan pembelajaran melalui blog ini.

HTML

Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa scripting seperti JavaScript dan VBScript.

Peramban internet menerima dokumen HTML dari server web atau dari penyimpanan lokal dan membuat dokumen menjadi halaman web multimedia. HTML menggambarkan struktur halaman web secara semantik dan isyarat awal yang disertakan untuk penampilan dokumen.

Elemen HTML digambarkan oleh tag, ditulis menggunakan tanda kurung sudut. Tag seperti <p>   mengelilingi dan memberikan informasi tentang teks dokumen dan mungkin menyertakan tag lain sebagai sub-elemen. Peramban tidak menampilkan tag HTML, tetapi menggunakannya untuk menafsirkan konten halaman.

Untuk informasi lebih lanjut mengenai HTML bisa buka website berikut : https://www.w3schools.com/html/default.asp

Contoh dokumen HTML sederhana :


CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.  

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. 

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Untuk informasi lebih lanjut mengenai CSS bisa buka website berikut : https://www.w3schools.com/css/default.asp

Contoh document CSS sedeherna:


Javascript

JavaScript (disingkat JS) adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. JavaScript merupakan salah satu teknologi inti World Wide Web selain HTML dan CSS. JavaScript membantu membuat halaman web interaktif dan merupakan bagian aplikasi web yang esensial.  

Awalnya hanya diimplementasi sebagai client-side dalam penjelajah web, kini engine JavaScript disisipkan ke dalam perangkat lunak lain seperti dalam server-side dalam server web dan basis data, dalam program non web seperti perangkat lunak pengolah kata dan pembaca PDF, dan sebagai runtime environment yang memungkinkan penggunaan JavaScript untuk membuat aplikasi desktop maupun mobile.

Untuk informasi lebih lanjut mengenai Javascript bisa buka website berikut : https://www.w3schools.com/js/default.asp

Contoh document CSS sedeherna:


MVC

Model-View-Controller atau MVC adalah sebuah metode untuk membuat sebuah aplikasi dengan memisahkan data (Model) dari tampilan (View) dan cara bagaimana memprosesnya (Controller). Dalam implementasinya kebanyakan kerangka kerja (framework) dalam aplikasi web adalah berbasis arsitektur MVC. MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data, antarmuka pengguna, dan bagian yang menjadi kontrol dalam sebuah aplikasi web.

  1. Model, Model mewakili struktur data. Model merupakan bagian yang bertugas untuk mengatur, menyiapkan, memanipulasi, dan mengorganisir data (biasanya dari basis data). Tugas yang ia lakukan meliputi memasukkan data ke basis data, pembaruan data, menghapus data, dan lain-lain. Model menjalankan tugasnya berdasarkan instruksi dari controller. 
  2. View, View merupakan bagian yang mengatur tampilan ke pengguna. Bisa dikatakan berupa halaman web. 
  3. Controller, Controller merupakan bagian yang menjembatani model dan view. Controller berisi perintah-perintah yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web. 

Dengan menggunakan metode MVC maka aplikasi akan lebih mudah untuk dirawat dan dikembangkan. Untuk memahami metode pengembangan aplikasi menggunakan MVC diperlukan pengetahuan tentang pemrograman berorientasi objek (Object-oriented programming).

Gambar Konsep Model MVC

PHP

PHP: Hypertext Preprocessor (sebelumnya disebut Personal Home Pages) adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memprogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.  Tidak hanya berjalan melalui peladen web, PHP juga bisa menyelesaikan tugas-tugas pemrograman dalam bentuk antarmuka baris perintah (CLI).

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.

Beberapa kelebihan PHP dari bahasa pemrograman web, antara lain:

  1. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaannya. 
  2. Peladen web yang mendukung PHP dapat ditemukan di mana - mana dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif mudah. 
  3. Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap membantu dalam pengembangan. 
  4. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang banyak. 
  5. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.
Framework

Framework adalah kerangka kerja yang digunakan untuk mengembangkan aplikasi berbasis desktop atau aplikasi berbasis website. Dengan menggunakan framework Anda akan lebih mudah untuk membuat aplikasi atau website. Itu karena Anda hanya perlu menyusun komponen-komponen pemrograman yang sudah jadi. Dengan kata lain, Anda tidak perlu membuat berbagai fitur dari awal lagi.

Framework sengaja diciptakan untuk membantu developer mengembangkan aplikasi atau website lebih cepat serta tersusun dan terstruktur.  

Dengan begitu, developer dan programmer tidak perlu melakukan koding program yang diulang-ulang.

Jenis-Jenis Framework untuk Web Development

Ada banyak sekali framework yang bisa digunakan untuk pengembangan website. Dimana beda bahasa pemrograman, beda pula jenis framework yang harus Anda gunakan. Berikut daftar lengkapnya:

Framework JavaScript

  1. Vue.js — Walaupun terhitung pemain baru, Vue.js dengan cepat menjadi populer. Selain ringan dengan ukuran hanya 58KB saja, Vue.js juga sangat sederhana dan memiliki keamanan yang baik. 
  2. React.js — Ringan dan sangat cocok digunakan untuk mengembangkan website besar. Memiliki segudang fitur canggih seperti reusable component dan declarative yang memudahkan Anda. 
  3. Angular.js — Sangat direkomendasikan untuk pemula. Terutama bagi Anda yang ingin mengembangkan website dengan konsep Rich Internet Application (RIA) atau Single Page Application (SPA). 
  4. Ember.js — Dikenal mempunyai kecepatan dan performa kodenya yang patut diacungi jempol. Ember.js juga mempunyai banyak plugin yang bisa meningkatkan kinerja lebih baik lagi. 
  5. Backbone.js — Memiliki beberapa fitur menarik bagi developer. Salah satunya adalah RESTful JSON yang memungkinan website Anda berkomunikasi dengan bahasa pemrograman lainnya.  
  6. Node.js — Framework yang memungkinan Anda menjalankan JavaScript dari server. Node.js memiliki pustaka server sendiri sehingga Anda tak perlu menggunakan program web server dari luar.

Framework CSS

  1. Bootstrap — Merupakan framework CSS terpopuler. Menawarkan segudang fungsi dengan elemen desain yang responsif. Plus, Bootstrap lah yang pertama kali mempunyai filosofi “Mobile-First.” 
  2. Foundation — Menggunakan sistem open-source berbasis SASS, Foundation menawarkan elemen yang fleksibel, modern, dan kaya akan kustomisasi. Foundation juga menyediakan template siap pakai untuk Anda. 
  3. Bulma — Penggunaannya mudah, open-source, responsif, dan bisa bekerja optimal di berbagai perangkat. Jadi, tak heran walaupun Bulma pendatang baru, tapi sudah cukup populer. 
  4. Semantic UI — Fokus kepada penggunaan human-friendly HTML, sehingga memudahkan Anda. Selain itu, menyediakan 3000+ variabel tema dengan 50.000+ komponen UI. 
  5. UIKit — Cocok bagi Anda yang ingin desain serba minimalis, tapi tetap membuatnya berkelas dan elegan. 
  6. Materialize CSS — Dirancang oleh Google, Materialize CSS bisa menghasilkan elemen dan fitur berkualitas dengan desain unik anti-mainstream. Plus, responsif dan mempunyai kompatibilitas yang baik.
  7.  Miligram — Mempunyai ukuran hanya 2KB saja, Miligram menawarkan desain website yang mudah, cepat, dan bersih. 
  8. PureCSS — Menawarkan rangkaian modul CSS yang cocok digunakan untuk segala jenis project Anda.  
  9. Skeleton — Walaupun hanya memiliki 400 baris jenis kode, tapi Skeleton bisa menghasilkan desain yang kompleks dan responsif. 
  10. Tailwind — Mempunyai CSS libraries yang mudah di kostumisasi membuat Anda bisa menghasilkan UI yang cepat dan praktis.

Framework PHP

  1. Laravel — Framework PHP terpopuler di dunia. Laravel mempunyai sintaks yang elegan, rapi, dan ringkas.  
  2. CodeIgniter — Sangat cocok bagi Anda yang baru belajar PHP framework. Sebab, CodeIgniter mudah dipahami dan mempunyai dokumentasi lengkap. 
  3. Symfony — Menawarkan fitur bundle dan komponen. Sehingga Anda bisa mengambil sebagian fungsi PHP, atau keseluruhan secara langsung. 
  4. Yii — Mempunyai konfigurasi cukup mudah dengan performa dan tingkat keamanan yang baik. 
  5. Zend — Cocok digunakan bagi Anda yang sudah mengerti dasar-dasar PHP. Sebab, Zend digunakan untuk pengembangan website enterprise yang kompleks. 
  6. CakePHP — Menawarkan kumpulan library yang berisi banyak komponen. Bahkan bisa dibilang komplit. 
  7. Phalcon — Mempunyai performa yang lebih konsisten dibanding framework CSS lain.  
  8. FuelPHP — Framework PHP yang cukup ringan dan mendukung template parsing, powerful ORN, dan fitur-fitur lainnya yang memudahkan Anda. 
  9. Fat Free — Merupakan satu-satunya framework yang mengusung tema mikro. Memiliki berbagai fitur seperti kompresi CSS, pemrosesan gambar, validasi data, dan masih banyak lainnya. 
  10. Aura — Mempunyai seperangkat libraries yang bisa Anda integrasikan dengan project apapun. Selain itu, setiap librariesnya juga tidak memilikid depencies sehingga sangat fleksibel.
Webserver

Bagian dalam dan depan server Dell PowerEdge, komputer yang dirancang untuk dipasang di lingkungan rack mount. Server web atau peladen web adalah perangkat lunak server, atau perangkat keras yang didedikasikan untuk menjalankan perangkat lunak ini, yang dapat memenuhi permintaan klien di World Wide Web. Server web dapat, secara umum, berisi satu atau lebih situs web. Server web memproses permintaan jaringan yang masuk melalui HTTP dan beberapa protokol terkait lainnya.  

Fungsi utama server web adalah untuk menyimpan, memproses, dan mengirimkan halaman web ke klien.[1] Komunikasi antara klien dan server berlangsung menggunakan Hypertext Transfer Protocol (HTTP). Halaman yang dikirimkan adalah dokumen HTML yang paling sering, yang mungkin termasuk gambar, style sheet dan skrip di samping konten teks.   Beberapa server web dapat digunakan untuk situs web dengan lalu lintas tinggi; di sini, server Dell dipasang bersama untuk Wikimedia Foundation.

Agen pengguna, umumnya peramban web atau perayap web, memulai komunikasi dengan membuat permintaan untuk sumber daya tertentu menggunakan HTTP dan server merespons dengan konten sumber daya itu atau pesan kesalahan jika tidak dapat melakukannya. Sumber daya biasanya berupa file nyata pada penyimpanan sekunder server, tetapi ini belum tentu demikian dan tergantung pada bagaimana server web diimplementasikan.  Sementara fungsi utamanya adalah untuk menyajikan konten, implementasi penuh HTTP juga mencakup cara penerimaan konten dari klien. Fitur ini digunakan untuk mengirimkan formulir web, termasuk mengunggah file.  

Pada bulan Maret 1989, Sir Tim Berners-Lee mengusulkan proyek baru kepada majikannya CERN, dengan tujuan memudahkan pertukaran informasi antara para ilmuwan dengan menggunakan sistem hypertext.Proyek ini menghasilkan Berners-Lee menulis dua program pada tahun 1990:  

  1. Peramban web bernama WorldWideWeb
  2. Server web pertama di dunia, yang kemudian dikenal sebagai CERN httpd, yang berjalan pada NeXTSTEP

Antara 1991 dan 1994, kesederhanaan dan keefektifan teknologi awal yang digunakan untuk berselancar dan bertukar data melalui World Wide Web membantu untuk memindahkan mereka ke berbagai sistem operasi dan menyebarkan penggunaannya di antara organisasi ilmiah dan universitas, dan kemudian ke industri.  Pada tahun 1994, Berners-Lee memutuskan untuk membentuk World Wide Web Consortium (W3C) untuk mengatur pengembangan lebih lanjut dari banyak teknologi yang terlibat (HTTP, HTML, dll.) Melalui proses standardisasi.

Gambar Cara Kerja Webserver

Database

Merupakan kumpulan data yang terorganisir, yang umumnya disimpan dan diakses secara elektronik dari suatu sistem komputer. Pada saat pangkalan data menjadi semakin kompleks, maka pangkalan data dikembangkan menggunakan teknik perancangan dan pemodelan secara formal.  

Perangkat lunak yang digunakan untuk mengelola dan memanggil kueri (query) basis data disebut sistem manajemen basis data (database management system, DBMS). Sistem basis data dipelajari dalam ilmu informasi.  

Istilah "basis data" berawal dari ilmu komputer. Meskipun kemudian artinya semakin luas, memasukkan hal-hal di luar bidang elektronika, artikel ini mengenai basis data komputer. Catatan yang mirip dengan basis data sebenarnya sudah ada sebelum revolusi industri yaitu dalam bentuk buku besar, kuitansi dan kumpulan data yang berhubungan dengan bisnis.  

Konsep dasar dari basis data adalah kumpulan dari catatan-catatan, atau potongan dari pengetahuan. Sebuah basis data memiliki penjelasan terstruktur dari jenis fakta yang tersimpan di dalamnya: penjelasan ini disebut skema. Skema menggambarkan objek yang diwakili suatu basis data, dan hubungan di antara objek tersebut. Ada banyak cara untuk mengorganisasi skema, atau memodelkan struktur basis data: ini dikenal sebagai model basis data atau model data. Model yang umum digunakan sekarang adalah model relasional, yang menurut istilah layman mewakili semua informasi dalam bentuk tabel-tabel yang saling berhubungan di mana setiap tabel terdiri dari baris dan kolom (definisi yang sebenarnya menggunakan terminologi matematika). Dalam model ini, hubungan antar tabel diwakili denga menggunakan nilai yang sama antar tabel. Model yang lain seperti model hierarkis dan model jaringan menggunakan cara yang lebih eksplisit untuk mewakili hubungan antar tabel.

XAMPP

Merupakan perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program.  

Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (tempat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. Untuk mendapatkanya dapat mendownload langsung dari web resminya.

Mengenal bagian XAMPP yang biasa digunakan pada umumnya:

  1. htdoc adalah folder tempat meletakkan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML dan skrip lain. 
  2. phpMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada dikomputer. Untuk membukanya, buka browser lalu ketikkan alamat http://localhost/phpMyAdmin, maka akan muncul halaman phpMyAdmin. 
  3. Kontrol Panel yang berfungsi untuk mengelola layanan (service) XAMPP. Seperti menghentikan (stop) layanan, ataupun memulai (start).

Gambar Cpanel XAMPP

PhpMyAdmin

phpMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui website Jejaring Jagat Jembar (World Wide Web) . phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perizinan (permissions), dan lain-lain).


Pada dasarnya, mengelola basis data dengan MySQL harus dilakukan dengan cara mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu. Jika seseorang ingin membuat basis data (database), ketikkan baris perintah yang sesuai untuk membuat basis data. Jika seseorang menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut tentu saja sangat menyulitkan karena seseorang harus hafal dan mengetikkan perintahnya satu per satu.

Saat ini banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola basis data dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin, seseorang dapat membuat database, membuat tabel, mengisi data, dan lain-lain dengan mudah, tanpa harus menghafal baris perintahnya.

phpMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada di komputer. Untuk membukanya, buka browser lalu ketikkan alamat http://localhost/phpmyadmin, maka akan muncul halaman phpMyAdmin. Di situ nantinya seseorang bisa membuat (create) basis data baru, dan mengelolanya.