Frontend dan Backend

ARSITEKTUR DAN MANAJEMEN E-BUSINESS
AMRI SINURAYA
41816310013

Frontend

“Frontend” mengacu pada setiap aspek dari proses desain yang muncul dalam atau berhubungan langsung dengan browser yang berkaitan dengan desain antarmuka website. Tugas-tugas berikut umumnya dianggap sebagai tugas frontend:

• Desain grafis dan pembuatan gambar
• Desain antarmuka
• Desain Informasi seperti berkaitan dengan pengalaman pengguna dari situsnya
• Dokumen HTML dan pengembangan style sheet dengan CSS
• JavaScript dan jQuery

Ketika kita membahas “frontend” dari web, apa yang kita bicarakan sebenarnya adalah tentang bagian dari web yang Anda dapat dilihat dan berinteraksi. Frontend biasanya terdiri dari dua bagian: desain web dan pengembangan web frontend.

Di masa lalu ketika seseorang membahas pengembangan biasanya disebut backend, namun dalam beberapa tahun terakhir telah terjadi kebutuhan nyata untuk membedakan antara desainer yang bekerja menggunakan Photoshop dan orang-orang yang bisa membuat kode dengan HTML dan CSS. Bahkan dengan memasukan kode JavaScript dan jQuery untuk menampilkan web yang interaktif.

Jadi sekarang ketika kita membahas istilah “desain web“, kita sebenarnya berbicara tentang orang-orang yang bekerja tool desain seperti Photoshop dan Fireworks, dan orang-orang yang menggunakan kode HTML, CSS, JavaScript atau jQuery (mungkin penting di sini untuk menyatakan bahwa jQuery adalah perpustakaan yang dikompilasi dari Javascript).

Segala sesuatu yang Anda lihat ketika menggunakan web adalah kombinasi dari HTML, CSS, dan JavaScript semua dikendalikan oleh browser komputer Anda. Ini termasuk hal-hal seperti font, menu drop-down, tombol, transisi, slider, form kontak, dan lain-lain.

Sekarang untuk membuat semua ini menjadi kenyataan dan untuk menyimpan informasi yang Anda masukkan ke dalam elemen frontend, kita membutuhkan teknologi untuk mewujudkannya. Teknologi yang dimaksud adalah memasukkan backend.

Backend

“Backend” mengacu pada program dan skrip yang bekerja pada server di balik layar untuk membuat halaman web yang dinamis dan interaktif. Secara umum, pengembangan backend web berada di tangan programmer berpengalaman, tapi itu baik untuk semua desainer web agar terbiasa dengan fungsi backend. Tugas-tugas berikut yang umumnya berlangsung pada backend:

• Desain informasi seperti berkaitan bagaimana informasi diatur di server
• Pemrosesan form
• Pemograman database
• Content management systems
• Aplikasi berbasis web server lain menggunakan PHP, JSP, Ruby, ASP.NET, Java, dan bahasa pemograman lainnya

Dari tugas-tugas yang disebutkan di atas Backend biasanya terdiri dari tiga bagian: server, aplikasi, dan database. Misalkan, Anda memesan tiket penerbangan atau membeli tiket konser, Anda biasanya membuka website dan berinteraksi Frontend tersebut. Setelah Anda memasukkan informasi itu, aplikasi tersebut menyimpannya dalam database yang telah dibuat pada sebuah server.

Semua informasi yang tersimpan pada server sehingga ketika Anda masuk kembali ke dalam aplikasi untuk mencetak tiket Anda, semua informasi masih ada di akun Anda.

Teknologi yang seperti ini dibangun bekerja sama dengan pengembang backend. Teknologi backend biasanya terdiri dari bahasa seperti PHP, JSP, Ruby, ASP.NET, Java, dan bahasa pemograman lainnya Untuk membuat mereka lebih mudah untuk menggunakan mereka biasanya ditingkatkan dengan kerangka seperti Ruby on Rails, CakePHP, dan CodeIgniter yang semua membuat pengembangan lebih cepat dan lebih mudah untuk berkolaborasi .

Banyak web profesional yang baru terjun ke bidang ini mungkin pernah mendengar banyak orang berbicara tentang WordPress. Dan WordPress ini merupakan salah satu framework yang sudah menyediakan frontend dan backend yang siap pakai dan juga masih bisa dilakukan perubahan desain pada frontend sesuai dengan kriteria website yang akan dibuat.

STUDI KASUS PEMBUATAN SISTEM E-COMMERCE PRODUK MEUBEL BERBASIS KOMPONEN

Perancangan sistem E-Commerce diawali dengan tahap perencanaan untuk melakukan penelusuran setiap proses bisnis perusahaan. Kegiatan ini untuk memperoleh semua kebutuhan mengenai informasi setiap proses bisnis, agar model aplikasi dan prosedur E-Commerce memiliki kesesuaian dengan proses bisnis konvensional. Merumuskan dengan pemilik bisnis tentang fungsionalitas E-Commerce dan aktivitas pada saat pemasaran produk, termasuk didalamnya mendefinisikan kebutuhan user interface. Melakukan restrukturisasi kegiatan pemasaran melalui media digitisasi. Hal ini dapat menawarkan sebuah peluang baru dan sekaligus menjadi solusi dari sejumlah batasan pada perusahaan dengan mempertimbangkan prosedur dan standarisasi operasional perusahaan. Sasarannya adalah menghasilkan proses digitisasi pemasaran secara online tanpa bergantung kepada lokasi dan terikat dengan waktu transaksi bisnis. Perencanaan spesifikasi sistem dibedakan menjadi fungsional dan nonfungsional. Kebutuhan fungsional adalah kebutuhan yang berisi proses-proses yang dilakukan oleh sistem. kebutuhan nonfungsional adalah kebutuhan yang menitikberatkan kepada properti perilaku sistem. Pembuatan sistem E-Commerce memiliki dua unsur utama: back-end dan front-end. Back-end merupakan halaman pengelolaan untuk seluruh konten website, dan halaman front-end untuk kebutuhan interaktif oleh end-user. Sistem E-Commerce menggunakan XAMPP 1.8.1-VC9 untuk menjalankan Apache web server dan PhpMyAdmin sebagai database server dan web browser. Selanjutnya tahap perancangan sistem E-Commerce menggunakan perangkat lunak open source PHP dengan kerangka CodeIgniter (CI) dan struktur file MVC (Model View Controller), dan untuk perancangan basis datanya menggunakan Dreamweaver dan phpMyAdmin. Melalui kerangka CI semua fungsi yang dibutuhkan untuk menghasilkan sebuah aplikasi sudah tersedia seperti folder untuk application, assets, captcha, dan system sehingga memudahkan dalam perancangan sistemnya. Penerapan struktur komponen dalam kerangka MVC CodeIgniter memperlihatkan proses kerja sistem dalam bentuk diagram komponen (gambar 1). 

Gambar 1 Diagram Komponen MVC CodeIgniter

Penggunaan MVC untuk memisahkan pengembangan berdasarkan komponen utama seperti manipulasi data, antarmuka pengguna, dan bagian yang menjadi kontrol dalam sistem E-Commerce. Bagian controller melakukan pemanggilan ke model untuk mendapatkan data yang relevan dan menampilkannya. Controller memberikan data untuk fungsi view yang akan menampilkan data dan berbagai elemen antarmuka. MVC berisi berbagai fungsi yang akan melakukan query ke database, seperti function menu_upload(), tampil_produk(), pencarian(), hingga data_login_member(). Kemudian bagian view berisikan folder admin dan folder halaman web. Bagian controller berisikan beberapa file php, seperti member.php mengelola halaman login user, produk.php mengelola halaman penjualan produk. Kemudian setelah melalui MVC maka akan masuk kebagian web server yang berfungsi menerima permintaan (request) dari klien dan akan dikirimkan kembali (response) yang hasilnya adalah bentuk dari halaman E-Commerce UD. Rotan Mas. Navigasi E-Commerce UD. Rotan Mas memiliki navigasi halaman admin dan halaman pengunjung/member (gambar 2-3).

Gambar 2 Struktur Navigasi Halaman Admin E-Commerce

Gambar 3 Struktur Navigasi Halaman Member E-Commerce

Sistem E-Commerce memiliki kemampuan komunikasi antara client tier dengan server tier melalui interface. Kebutuhan proses presentation logic menampilkan view-view pada MVC CodeIgniter sehingga memiliki tampilan antarmuka dengan pengguna. Untuk kebutuhan business logic memiliki proses untuk mengatur tampilan presentation logic atau mengirim informasi melalui interface untuk kemudian masuk ke dalam server tier yang mengelola data access logic oleh model-model yang akan bertanggung jawab terhadap pengambilan maupun penyimpanan di dalam basis data (gambar 4).

Gambar 4 Diagram Komponen Sistem E-Commerce

Sistem E-Commerce memiliki arsitektur secara fisik dengan komposisi komputer pengunjung, member dan administrator. Semua perangkat komputer harus memiliki keterhubungan yang konsisten dengan jaringan internet. Hal ini penting mengingat semua proses baru dapat dilaksanakan, kalau sudah memiliki akses koneksi ke komputer server melalui fasilitas hosting. Untuk semua file yang telah di upload dan menjadi susunan dalam framework CodeIgniter akan diakses oleh komputer server melalui fasilitas hosting dengan MySQL Server. Basis data ini akan dibentuk dari hasil export dari XAMPP dan akan di import oleh MySQL Server oleh Komputer Server melalui proses Hosting

 

 (gambar 5). 

Gambar 5 Diagram Komponen Sistem E-Commerce Untuk menjabarkan struktur sistem E-Commerce menggunakan diagram hubungan entitas. Diagram hubungan entitas digunakan untuk menggambarkan hubungan antar tabel di dalam database rancangan sistem yang diusulkan. Pemodelan diagram hubungan entitas lebih ditujukan pada hubungan atau kaitan antar simpanan data pada diagram arus data sistem usulan (gambar 6).

 

Gambar 6 Diagram Hubungan Entitas E-Commerce

Prototipe sistem E-Commerce memiliki tampilan halaman keranjang belanja pada halaman pengunjung. Apabila pengunjung melakukan transaksi dengan mengklik tombol beli maka akan masuk ke keranjang belanja. Halaman member memiliki sejumlah informasi seperti harga dan tipe produk, pengaturan profil pengunjung, pengaturan password, hubungi kami, konfirmasi pembayaran, historis transaksi, testimoni dan jasa pengiriman (gambar 7). Memiliki register member untuk informasi seperti nama, alamat, telepon, email, kode captcha (gambar 8). Sistem memiliki form konfirmasi pembayaran pemesanan produk sehingga jelas rekamaman data pembayaran pengunjung. Apabila data sudah dikirimkan melalui email dan dalam tiga hari belum mendapatkan konfirmasi pembayaran maka pihak admin akan membatalkan pesanan dengan mengubah status pemesanan member tersebut sesuai prosedur yang sudah ditetapkan dan proses pengiriman tidak akan dilakukan atau tidak terjadi (gambar 9). Sistem memiliki halaman testimoni pengunjung (gambar 10) dan dapat menampilkan semua daftar penjualan produk untuk masing-masing member (gambar 11).

Gambar 7 Halaman Utama Member

 

Gambar 8 Halaman Register Member

 

Gambar 9 Halaman Konfirmasi Pembayaran

 

Gambar 10 Halaman Testimoni Pengunjung

 

Gambar 11 Halaman Menampilkan Semua Produk

Hasil perancangan sistem E-Commerce secara spesifik dapat meniadakan perantara, mengurangi biaya pembuatan, pengiriman, dan penyimpanan informasi sesuai kebutuhan. Mekanisme penjualan memiliki aksesibilitas yang luas dengan pola penyebaran produk yang sesuai kebutuhan dan membuat informasi tersebut semakin tersedia dan mudah diakses kapan dan dimana saja. Terlepasnya informasi dari saluran-saluran penjualan secara tradisional memberikan pengaruh yang sangat signifikan dalam proses transformasi ke model bisnis digitisasi pemasaran dalam upaya memperluas pangsa pasar. Sistem digitisasi penjualan ini memberikan sejumlah kelebihan operasional seperti pemrosesan data menjadi lebih mudah ditelusuri, sistem pembayaran menjadi lebih akurat dan tidak memiliki piutang, informasi persediaan lebih akurat, dapat membangun hubungan personalisasi dengan pelanggan sehingga menjadi lebih dekat dan hal ini merupakan salah satu daya saing perusahaan. Selanjutnya dapat mengidentifikasi kebutuhan pelanggan yang belum terpenuhi, meniadakan keterbatasan waktu bagi pelanggan untuk mendapatkan informasi tentang produk yang ditawarkan ataupun promosi-promosi yang sedang diselenggarakan, komunikasi dengan pelanggan dapat menjadi lebih jelas dan menyelesaikan persoalan kebutuhan mereka secara langsung. Semua produk yang dijual tidak lagi hanya fokus kepada masyarakat setempat saja, yang semakin hari semakin banyak pesaingnya. Melalui sistem E-Commerce secara digital dapat banyak membantu perusahaan menciptakan dan mendapatkan keuntungan dengan cara-cara baru melalui penambahan nilai pada produk dan layanan yang ada, atau dengan menyediakan fondasi bagi produk dan layanan baru. Semakin berkembangnya saluran digitisasi transaksi penjualan memberikan dampak dimana tanpa bergantung lagi kepada lokasi perusahaan dan peluang meniadakan perantara serta mempererat hubungan dengan pelanggan. Peluang melakukan ekspansi sudah bukan lagi merupakan sebuah hambatan yang selama ini menjadi persoalan. Kenyataan dengan jumlah dan persediaan produk yang banyak dan tidak terserap oleh masyarakat pada lokasi setempat sudah bukan lagi menjadi persoalan. Melalui sistem informasi penjualan berbasis web memberikan banyak peluang dan kesempatan perluasan pasar sehingga dapat meningkatkan daya saingnya dibandingkan dengan usaha dagang lainnya yang menjual barang yang sama namun tidak memiliki sistem digitisasi penjualan ini.