Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Membangun Startup Anda Dengan PHP: Bootstrap Halaman Beranda Anda

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Designing a RESTful API
Building Your Startup: Leveraging Bootstrap, Ajax, and jQuery

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Final product image
What You'll Be Creating

Tutorial ini adalah bagian dari seri Membangun Startup Anda Dengan PHP di Envato Tuts+. Di seri ini, saya akan memandu Anda untuk meluncurkan startup sejak konsep hingga kenyataan dengan menggunakan aplikasi Meeting Planner saya sebagai contoh nyata. Di setiap langkah di sepanjang jalan, saya akan merilis kode Meeting Planner sebagai contoh sumber terbuka yang Anda bisa belajar darinya. Saya juga akan menunjukkan isu-isu yang muncul terkait bisnis startup. 

Meningkatkan Halaman Beranda

Halaman beranda suatu web layanan memiliki banyak peranan. Secara fungsional, halaman tersebut harus memudahkan orang untuk mendaftar dan memulai aplikasinya. Namun demikian, halaman beranda juga harus menyentuh pengunjung secara estetika dan memberikan kesan profesional bahwa layanan Anda akan memberikan apa yang dikatakan oleh halaman beranda.

Karena saya begitu terfokus pada titik ini terkait pengembangan fungsionalitas penjadwalan untuk Meeting Planner, saya tidak punya banyak waktu dalam berfokus untuk memperindah halaman beranda—dan jujur saja memang kurang menarik, membuat tidak terkesan mereka yang berkunjung untuk pertama kali.

Meskipun saya seorang manajer program dan produk, sedikit menguasai desain UX dan pengembang web, saya bukan desainer grafis yang ahli atau guru HTML/CSS. Saya juga belum menginvestasikan sumber-sumber daya eksternal ke dalam proyek ini, jadi saya harus mengembangkan ini sendiri.

Dalam episode hari ini, saya mengajak Anda belajar cara memperkuat halaman beranda dan aspek mana dari Bootstrap dan CSS yang saya eksploitasi untuk menghasilkan penampilan yang lebih profesional. Ada banyak yang bisa Anda lakukan sendiri dengan Bootstrap jika Anda menggali lebih jauh.

Jika Anda belum mencoba Meeting Planner atau Simple Planner, lakukan dan jadwalkan rapat pertama Anda. Saya benar-benar berpartisipasi di thread komentar di bawah ini, jadi beritahu saya apa yang Anda pikirkan! Anda juga bisa menghubungi saya di Twitter @reifman. Saya secara khusus tertarik jika Anda ingin menyarankan berbagai fitur atau topik baru untuk tutorial yang akan datang.

Sebagai pengingat, semua kode Meeting Planner ditulis dalam Yii2 Framework untuk PHP. Jika Anda ingin belajar lebih banyak tentang Yii2, lihat seri paralel kami Pemrograman Dengan Yii2.

Halaman Beranda Saat Ini

Building Your Startup - Side by side looks at Simple Planner vs Meeting Planner home page

Di episode kemarin, saya menyebutkan peluncuran Simple Planner bersamaan dengan Meeting Planner dengan skema warna dan gambar yang berbeda. Tidak terlihat buruk, tetapi product lead dan tombol signup ada di bawah lipatan. Orang yang pertama kali berkunjung mula-mula akan melihat fotonya.

Berikut adalah penampakan yang lebih dekat:

Building Your Startup Bootstrap Current Home Page

Merencanakan Peningkatan

Building Your Startup Bootstrap Improved Home Page

Di atas Anda bisa melihat versi akhir yang saya buat. Secara esensial, saya ingin memindahkan opsi lead, login, dan signup ke atas lipatan, tanpa menutupi gambar background beranda sama sekali.

Intinya, ada empat hal yang harus saya lakukan:

  1. Memastikan bahwa gambar backgroundnya responsif dan mempunyai kapasitas untuk diterapkan opacity (transparansi).
  2. Membuat kolom sebelah kiri dengan panel yang transparan untuk menampilkan lead.
  3. Membuat kolom di sebelah kanan untuk menampilkan panel dengan signup, login, dan formulir pemberitahuan launching dengan beberapa transparansi.
  4. Pastikan bahwa korsel video memposisikan dirinya di bawah gambar background.

Mari melihat tiap tantangannya.

Restrukturisasi Gambar Background

Untuk membuat background yang responsivitasnya lebih mantap, saya menulis ulang kode untuk menempatkannya sebagai gambar latar belakang pada body element halaman.

Pertama, saya membuat stylesheet baru home.css yang akan dikonfigurasi di file HomeAsset.php:

File asset menentukan CSS, JavaScript, dan dependent library mana yang dimuat untuk tiap tata letak.

Berikut bagian atas home.css yang menetapkan elemen body:

Untuk memutar gambar background secara dinamis, saya menambahkan tag style ke file tata letak, Home.php (CSS tidak bisa melakukan itu):

Ini diterapkan pada gambar latar belakang terpilih yang ditetapkan di episode terakhir dengan SiteHelper.php:

Sisi Kiri Grid

Building Your Startup Bootstrap Lefthand Panel

Berikutnya, saya membuat tata letak grid Bootstrap untuk menampilkan panel konten sebelah kiri:

Saya menggunakan offset satu unit, col-md-offset-1, dan kolom enam unit, col-md-6. Dan beberapa aspek lain yang diintegrasikan di sini.

Kelas home-top di baris memungkinkan saya untuk mengintegrasikan batas vertikal untuk panel-panel tersebut. Saya mendapati bahwa 16% bekerja dengan baik bagi saya, dari home.css:

Dengan memberikan beberapa opacity ke panel di halaman beranda, opacity: 0.9;, gambar background masih ditampilkan sedikit, yang secara estetika cukup bagus: 

Saya juga bisa memberi warna latar belakang hitam ke panel sebelah kiri tetapi dengan opacity yang menggunakan rgba, background-color: rgba(0,0,0,0.3);.

Nilai warna RGBA adalah ekstensi nilai warna RBG dengan kanal alpha - yang menentukan opacity objek. Nilai warna RGBA ditentukan dengan: rgbs (red, green, blue, alpha). Parameter alpha adalah angka yang nilainya antara 0.0 (sepenuhnya transparan) dan 1.0 (sepenuhnya tak tembus pandang). (W3 Schools)

Dan saya membuat batas berbentuk lingkaran dengan menggunakan border-radius:5px;.

Hasilnya akan memungkinkan gambar background ditunjukkan sembari menampilkan teks lead berwarna putih.

Formulir dan Panel Sebelah Kanan

Building Your Startup Bootstrap Righthand side Panels and Forms

Untuk membuat sisi sebelah kanan, saya membuat kolom tiga unit, col-md-3. Lalu, saya membuat dua panel Bootstrap yang mewarisi opacity yang sama, 0.9.

Widget AuthClient di panel atas menampilkan ikon Facebook, Google, dan LinkedIn yang saya bahas di tutorial sebelumnya.

Margin Vertikal untuk Video Carousel

Building Your Startup Bootstrap Video Carousel Vertical Top Margin

Akhirnya, saya hanya butuh untuk memastikan bahwa video carousel di bawah lipatan memiliki cukup margin vertikal supaya tidak menutupi gambar latar belakang. Saya menggunakan kelas video-top untuk hal ini:

Margin 23% bekerja dengan baik untuk desktop dan selular. dan berikut adalah kode HTMLnya:

Halaman Beranda Selular yang Telah Ditingkatkan

Berikut adalah penampakan selular halaman bootstrap:

Building Your Startup Bootstrap Improved Mobile Home Pages side by side

Jauh lebih efektif. Sekarang, apabila pengguna membuka secara selular, mereka akan langsung melihat kontennya, bukan sekedar gambar utama.

Apa Berikutnya?

Building Your Startup Multiple Domains - SimplePlannerio Home Page with Social Image

Tentu saja, ada banyak cara untuk mempercantik dan meningkatkan pengalaman halaman beranda. Tetapi saya harap hari ini Anda melihat bahwa Anda bisa dengan cepat meningkatkan elemen-elemen umum di Bootsrtrap untuk memberikan pengalaman sensasi profesional yang estetis bagi para pengunjung Anda. Saya mampu melakukan ini tanpa mengandalkan perekrutan desainer luar dan penulis kode CSS sampai sejauh ini. Saya harap bisa melakukannya di suatu titik ketika proyek ini mendapatkan dana.

Beberapa pekan ke depan, saya akan memonitor rasio pengunjung yang mendaftar dan melihat apakah ada realisasi peningkatan.

Ke depannya, saya akan mengembangkan fitur untuk meningkatkan Meeting Planner seperti perencanaan kegiatan, lebih banyak SMS, dan memungkinkan pengembangan aplikasi selular. Masih banyak yang harus dilakukan. Saya harap Anda tetap bersama kami.

Untuk sementara waktu, silakan cek Meeting Planner kami dan bagikan dengan rekan bisnis, keluarga, dan teman.

Saya juga semakin dekat pada peluncuran eksperimen dengan WeFunder yang berbasis pada implementasi aturan crowdfunding baru SEC. Anda bisa mengikuti profil kami di sana jika berkenan. Saya juga akan menulis lebih banyak tentang hal ini di tutorial yang akan datang.

Apakah Anda punya pemikiran sendiri? Ide? Umpan balik? Anda selalu bisa menghubungi saya di Twitter @reifman secara langsung. Saksikan tutorial yang akan datang di Seri Membangun Startup Anda dengan PHP.

Tautan-Tautan Terkait

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.