Pada playlist ini, kita akan belajar mengenai cara membuat situs startup menggunakan Bootstrap versi 5. Bisa dilihat di layar, ini adalah situs yang akan kita buat menggunakan Bootstrap. Pada bagian paling atas ada navigasi. Disusul oleh jumbotron yang berisi keterangan ringkas mengenai aplikasi. Kemudian ada bagian fitur-fitur aplikasi. Bagian testimoni yang bisa memuat beberapa testimoni dalam satu tempat. Lalu kita memiliki pricing card. Ada tabel perbandingan paket. Dan bagian terakhir adalah formulir hubungi kami.

Mungkin teman-teman ada yang bertanya mengapa kita mengangkat tema startup? Jawabannya karena saat ini startup sedang trending ya, walaupun di negara berkembang seperti Indonesia. Kita sudah memiliki banyak contoh startup yang sudah berhasil berkembang besar hingga menjadi unicorn, seperti Tokopedia, Gojek, Bukalapak, dan lain-lain.

Kalau kita melihat ke tahun 2020 dan 2021, dimana kita sedang menghadapi pandemi covid, perusahaan-perusahaan yang berhubungan dengan IT seperti startup justru mengalami peningkatan. Mengapa? Karena masyarakat kita sedang mengalami perubahaan kebiasaan secara besar-besaran. Yang awalnya bekerja mesti ke kantor, sekarang bekerja dari rumah. Yang tadinya meeting harus tatap muka, sekarang bisa menggunakan teleconference. Yang biasa belanja mesti ke toko, sekarang menggunakan e-commerce. Dan agar bisa mengadaptasi kebiasaan baru ini, masyarakat harus menggunakan teknologi terbaru yang ditawarkan oleh startup.

Oleh karena itu teman-teman yang sedang belajar pemograman, harus lebih semangat ya. Karena kebutuhan akan pemograman itu semakin lama semakin besar.

Topik yang kita ambil untuk situs ini adalah aplikasi kasir Laris Pos, bisa dilihat situsnya di http://www.larispos.com. Aplikasi Laris Pos dapat dijalankan pada tablet atau smartphone Android, sehingga dapat berfungsi sebagai mesin kasir. Kelebihannya adalah aplikasi ini berbasis cloud, jadi data transaksi akan dikirim ke cloud, dan dapat diakses oleh manajemen atau owner menggunakan internet. Jadi sudah tidak perlu datang ke restoran lagi.

Dan fitur baru dari Laris Pos yang berkaitan dengan pandemi adalah fitur e-menu. Jadi dengan menggunakan fitur ini, maka pelanggan dapat mengakses buku menu dari smartphone masing-masing, baik menggunakan QR Code, ataupun URL dari buku menu onlinenya.

Pada playlist ini, kita akan mempelajari mengenai cara mereplikasi situs Laris Pos sehingga hasilnya menjadi seperti ini ya. Dan untuk keperluan belajar, ada beberapa konten dari situs replika yang merupakan tambahan dari saya, bukan dari situs aslinya ya. Jadi kalau teman-teman membutuhkan informasi lebih lanjut mengenai aplikasi Laris Pos, lebih baik langsung ke situs aslinya, di http://www.larispos.com. Jangan dari situs replika ya, karena ada sebagian konten yang diubah.

Situs replika ini akan kita buat menggunakan Bootstrap. Bagi yang belum tau apakah itu bootstrap, kita bisa buka situsnya di getbootstrap.com. Di tampilan paling depannya, kita bisa melihat bahwa Bootstrap mengklaim bahwa dirinya adalah the world’s most popular front-end open source toolkit. Artinya apa? Artinya Bootstrap ini adalah perangkat kerja untuk pemograman front-end, dan Bootstrap mengklaim bahwa dirinya adalah perangkat kerja yang paling popular di dunia.

Disini juga ada kata kunci yang menarik ya, yaitu open source. Open Source ini artinya apabila kita ingin menggunakan Bootstrap, kita bisa mendapatkan hingga ke source code-nya, sehingga apabila kita mau dan punya skill programming, kita bisa melakukan modifikasi pada source code-nya sesuai dengan yang kita butuhkan.

Dimana kita bisa mendapatkan source code-nya? Biasanya komunitas Open Source melakukan sharing source code pada situs yang bernama GitHub. Bisa kita lihat pada sebelah kanan navigasi ada beberapa icon. Icon dengan gambar bayangan kucing ini adalah GitHub. Bisa kita klik untuk menuju ke halaman GitHub-nya Bootstrap.

Nah, disini kita bisa melihat beberapa proyek yang di-sharing oleh tim Bootstrap. Tentunya proyek paling besarnya adalah Bootstrap ya. Disini bisa kita lihat keterangannya the most popular HTML, CSS and Javascript Framework. HTML, CSS and Javascript ini adalah tiga komponen utama dari Front End. Jadi kalimat ini bisa kita anggap sebagai the most popular front end framework for developing responsive, mobile first projects on the web.

Disini bisa kita lihat jumlah star-nya sudah 152k. Ada 152 ribu programmer yang menanggap proyek Bootstrap ini sebagai proyek favoritnya. Artinya memang benar Bootstrap ini adalah front end framework yang paling popular di dunia, terbukti dari jumlah star-nya.

Disini sering muncul satu pertanyaan dari teman-teman yang masih baru di dunia pemograman. Apabila ada 152 ribu programmer yang membuat situs menggunakan Bootstrap, apakah akan menghasilkan ratusan ribu situs yang bentuknya sama? Jawabannya adalah tidak. Karena pada bootstrap ada satu lagi fitur pentingnya, yaitu bisa di-customize. Jadi penggunaan framework ini masih bisa kita atur lagi sesuai dengan kebutuhan kita.

Sekarang sebagai contohnya saja, situs replika yang akan kita buat ini, kalau kita bandingkan dengan situs aslinya. Kita hendak membuat situs yang membicarakan topik yang sama, dan sama-sama menggunakan Bootstrap. Namun hasilnya bisa berbeda. Ya, karena Bootstrap ini bisa dicustomize lagi. Kita bisa menggunakan warna yang berbeda. Kita bisa menggunakan komponen yang berbeda. Kita bisa menampilkan konten dengan cara yang berbeda, dan lain-lain. Sehingga setiap website yang dibuat menggunakan Bootstrap, semuanya akan berbeda satu dengan yang lain.

Kemudian kita perhatikan lagi pada situs Bootstrap, disini ada kata kunci responsive. Ini adalah fitur yang paling banyak dicari oleh programmer, dan menyebabkan Bootstrap menjadi popular. Responsive ini berarti situs kita bisa memberikan respon terhadap perangkat apa yang sedang digunakan oleh pengunjung kita. Biasanya yang paling diperhatikan disini adalah ukuran layar dari perangkat, karena semakin lama semakin banyak yang mengakses situs kita menggunakan smartphone dan tablet. Situs kita harus tetap kelihatan bagus, walaupun sedang dilihat dari perangkat dengan ukuran layar kecil.

Perhatikan situs replika yang akan kita buat. Pada saat saya mengecilkan ukuran browser, maka secara otomatis kontennya akan dirapikan ulang oleh browser. Dan perhatikan pada saat ukuran browser sudah terlalu kecil, maka navigasinya berubah menjadi hamburger icon, yang kalau kita klik akan memperlihatkan menu navigasi yang disusun ke arah bawah. Perhatikan konten utama kita, yang awalnya dibagi menjadi dua kolom tulisan dan gambar, sekarang menjadi satu kolom yang bertumpuk vertikal.

Kemudian pada bagian fitur, di ukuran layar besar browser menampilkan 3 fitur per baris. Pada saat ukuran layar mengecil, berubah menjadi 2 fitur per baris. Dan pada saat paling kecil, hanya menampilkan 1 fitur per baris. Inilah yang dimaksud dengan responsive.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.