Bikin Company Profile Pribadi dengan Odoo Website App
Membangun Company Profile Pribadi dengan Odoo Website App
Panduan langkah demi langkah, dari aktivasi module sampai isi konten — ditulis berdasarkan pengujian langsung, bukan teori.
Dokumen ini merekam proses nyata membangun sebuah website company profile personal (untuk Mohamad Yusuf Ibrahim, IT Developer) menggunakan Website App bawaan Odoo — dijalankan di atas instalasi Odoo 17 lokal (Docker) pada project ai-erp-platform. Setiap langkah di sini benar-benar dijalankan dan di-screenshot pada saat prosesnya berlangsung, supaya pembaca bisa mengikuti persis tanpa menerka-nerka.
Environment: Odoo 17 Community, dijalankan via Docker Compose —
http://localhost:8069Status akhir: Website lokal (belum di-deploy ke domain publik) — fokus dulu ke proses belajar, go-live dipikirkan belakangan.
Dokumen ini disusun urut sesuai urutan proses yang benar-benar dijalankan — ikuti dari atas ke bawah, jangan melompat, karena beberapa langkah bergantung pada langkah sebelumnya (misalnya: kamu tidak akan menemukan menu "Success Stories" kalau App Website belum diaktifkan).
- Prasyarat & Asumsi Awal
- Aktivasi Website App
- Website Configurator: Wizard 4 Langkah
- Mengenal Mode Edit & Panel Builder
- Mengisi Konten Halaman Home
- Mengisi Konten Halaman About Us
- Mengisi Konten Halaman Services (+ Catatan Etika Konten)
- Success Stories: Ternyata Ini Module Blog, Bukan Halaman Statis
- Mengisi Contact Us & Footer
- Istilah & Komponen yang Perlu Dikenali (Glosarium)
- Kesalahpahaman Umum yang Perlu Diwaspadai
Sebelum mulai, pastikan hal-hal ini sudah terpenuhi — kalau salah satu belum ada, langkah-langkah selanjutnya di dokumen ini tidak akan bisa diikuti dengan hasil yang sama:
- Odoo 17 Community sudah berjalan di lokal (di project ini lewat Docker Compose), dan bisa diakses di
http://localhost:8069. - Kamu sudah login sebagai admin/administrator — hanya administrator yang bisa melihat toolbar admin ungu (dengan tombol Edit, +New, dsb) yang muncul di semua screenshot pada dokumen ini.
- Module dasar (
base) sudah terinstall — ini biasanya otomatis pada instalasi awal Odoo.
http://localhost:8069/web/login, isi Email dan Password administrator-mu. Kalau ini instalasi baru lewat command line (bukan wizard database manager), kredensial default yang umum dipakai adalah admin / admin — tapi selalu ganti password ini sebelum situs benar-benar publik.
Tujuan langkah ini: mengaktifkan module website bawaan Odoo, yang menyediakan website builder drag-and-drop lengkap dengan halaman, menu, dan blog.
Langkah 1 — Buka menu Apps
Klik ikon grid (titik sembilan) di pojok kiri atas, lalu pilih Apps. Di kotak pencarian, ketik Website untuk mempersempit daftar.
Gambar 2.1 — Halaman Apps, kartu module "Website" (file: gambar-2.1-apps-website.jpg)
Kartu Website ("Enterprise website builder") terlihat di antara kartu-kartu module lain seperti Sales, CRM, dan Academy Core (module custom yang dibuat pada sesi belajar sebelumnya). Pada screenshot ini kartu Website hanya menampilkan tombol Learn More karena module sudah aktif duluan pada environment ini — kalau di laptopmu module ini belum pernah diaktifkan, kamu akan melihat tombol ungu bertuliskan Activate di posisi yang sama. Klik tombol itu.
URL lokal: http://localhost:8069/odoo/apps (menu Apps)
Tujuan langkah ini: memahami bahwa Website Configurator bukan cuma dekorasi — jawaban di sini benar-benar menentukan halaman, tema, dan warna yang dihasilkan secara otomatis.
Begitu module aktif, muncul layar pembuka bertuliskan "Ready to build the perfect website?" dengan dua pilihan: "Let's do it" (lanjut wizard 4 langkah) atau "Skip and start from scratch" (langsung ke halaman kosong).
Langkah 1 — Jenis situs
Pertanyaan: "I want ___". Pilihan: a business website, an online store, a blog, an event website, an elearning platform.
Untuk company profile personal → pilih "a business website".
Langkah 2 — Industri / jenis bisnis
Field teks bebas dengan autocomplete, contoh: "Clothes, Marketing, ...". Untuk profil developer → isi "IT Development" (akan muncul saran autocomplete yang match, klik untuk pilih).
Langkah 3 — Tujuan utama
Pertanyaan: "...with the main objective to ___". Pilihan: get leads, develop the brand, sell more, inform customers, schedule appointments.
Untuk profil personal (bukan jualan produk) → pilih "develop the brand".
Langkah 4 — Palette warna & halaman tambahan
Pilih kombinasi warna dari grid palette siap pakai (atau upload logo untuk deteksi warna otomatis). Setelah itu wizard menawarkan checklist halaman/fitur tambahan: About Us, Services, Pricing, Privacy Policy, News, Success Stories, Career, Shop, Events, Forum, Live Chat, eLearning, Stores Locator.
Untuk company profile personal, cukup pilih yang relevan: About Us, Services, dan Success Stories (untuk portfolio/testimoni). Lewati Shop, Career, Forum, dsb — kamu selalu bisa menambahkannya manual nanti kalau berubah pikiran.
Klik "Build my website". Odoo memerlukan beberapa detik untuk menyusun seluruh halaman dengan gambar hero, teks placeholder yang cukup masuk akal, dan menu navigasi otomatis sesuai pilihan di atas.
Tujuan langkah ini: memahami tiga komponen UI yang akan terus dipakai di semua langkah selanjutnya: tombol Edit, dan tiga tab panel di sisi kanan: BLOCKS, CUSTOMIZE, THEME.
Gambar 4.1 — Mode Edit aktif, panel CUSTOMIZE terbuka untuk block "Cover" (file: gambar-4.1-mode-edit-panel.jpg)
Setelah klik tombol Edit (pojok kanan atas), seluruh isi halaman menjadi bisa diklik langsung. Panel kanan punya 3 tab: BLOCKS (daftar elemen siap-pakai untuk di-drag ke halaman, seperti Banner, Text-Image, Columns, dsb), CUSTOMIZE (setting untuk block yang sedang dipilih — pada gambar ini sedang menampilkan setting block Cover: Layout, Background, Image, Position, dan di bagian bawah ada Inline Text untuk styling teks yang sedang diseleksi), dan THEME (setting global warna & font seluruh situs). Tombol Discard dan Save (kanan atas, warna ungu) muncul begitu ada perubahan yang belum disimpan.
URL lokal: http://localhost:8069/ (mode Edit, halaman Home)
Cara paling praktis mengedit teks: triple-click pada teks yang ingin diganti (ini menyeleksi satu baris/paragraf penuh), lalu langsung ketik penggantinya. Untuk block/gambar, klik sekali untuk menyeleksi seluruh block — akan muncul ikon kecil di atasnya (pindah posisi, hapus, dsb).
Shift+Enter (bukan Enter biasa) untuk pindah baris di dalam blok yang sama, baru ketik baris kedua.
Setiap kali selesai mengedit satu bagian, klik Save di kanan atas untuk menyimpan permanen ke server — halaman akan otomatis berstatus Published (label hijau di sebelah tombol Edit).
Tujuan langkah ini: mengganti teks placeholder generik hasil wizard dengan identitas asli.
Hasil otomatis wizard untuk hero section biasanya berupa judul generik seperti "Transforming Technology" dan sub-judul seperti "Our mission is to empower businesses through cutting-edge software solutions...". Dengan teknik triple-click yang dijelaskan di bagian 4, bagian-bagian ini diganti:
- Headline hero → nama lengkap: Mohamad Yusuf Ibrahim
- Sub-headline → ringkasan profesional singkat, contoh: "Senior Java Backend Engineer — 10+ tahun membangun sistem backend enterprise-grade untuk banking, fintech, SaaS, dan edtech."
- Tombol CTA → teks default biasanya "Get Involved", diganti jadi "Contact Me" (tombol ini sudah otomatis mengarah ke halaman Contact Us, tidak perlu diubah link-nya)
Gambar 5.1 — Halaman Home, hasil akhir setelah konten diisi (file: gambar-5.1-home-hasil-akhir.jpg)
Tampilan akhir setelah semua teks diganti dan disimpan. Perhatikan menu navigasi di header (Home, Services, Success Stories, About Us, Contact us) — menu ini otomatis terbentuk dari halaman yang dipilih pada wizard di bagian 3, urutannya bisa diatur ulang lewat menu Site → Menu Editor di toolbar admin kalau diperlukan.
URL lokal: http://localhost:8069/
Tujuan langkah ini: mengganti bio generik dengan riwayat & keahlian profesional yang sebenarnya.
- Heading "Building Tomorrow's Technology" → diganti "Building Reliable Backend Systems"
- Paragraf pengantar → ringkasan pengalaman (10+ tahun di banking/fintech/SaaS/edtech, keahlian Java/Spring Boot/microservices, pengalaman di platform banking teregulasi seperti ISO 8583 dan card management systems)
- Section kedua di halaman ini pada hasil wizard berjudul generik "Our Services Overview" dengan placeholder "Write one or two paragraphs describing your product or services..." — ini diganti judulnya jadi "Skills & Focus", dengan dua paragraf: paragraf pertama daftar keahlian Backend Development (Java, Spring Boot, Jakarta EE, REST API, Microservices, SQL), paragraf kedua daftar keahlian Messaging/Database/DevOps (Kafka, RabbitMQ, Redis, PostgreSQL, MySQL, MongoDB, Docker, CI/CD).
Gambar 6.1 — Halaman About Us, hasil akhir (file: gambar-6.1-about-us-hasil-akhir.jpg)
Layout dua kolom (teks di kiri, gambar/ilustrasi di kanan) adalah bagian dari block bawaan bertipe "Text - Image" yang bisa dilihat di panel BLOCKS. Section "Skills & Focus" di bagian bawah halaman menggunakan block yang sama, hanya posisi gambar dan teksnya ditukar (mirror).
URL lokal: http://localhost:8069/about-us
/about-us berdasarkan judul halaman saat dibuat wizard. Kalau kamu mengubah judul halaman di kemudian hari, URL-nya tidak otomatis berubah kecuali diatur manual lewat menu Site → Website → Pages.
Tujuan langkah ini: mengganti tiga kartu layanan placeholder dengan penawaran nyata, dan membersihkan konten yang secara etika tidak boleh dibiarkan pada profil personal.
Langkah 1 — Ganti tiga kartu layanan
Wizard menghasilkan tiga kartu default: "Data Management Solutions", "Software Development Framework", "Agile Development" — masing-masing punya gambar, judul, dan satu paragraf deskripsi. Diganti menjadi:
- Backend & API Development — Java, Spring Boot, Jakarta EE, REST API, microservices
- Banking & Fintech Systems — ISO 8583, card management systems, integrasi Core Banking System
- Event-Driven Architecture & DevOps — Kafka, RabbitMQ, Redis, Docker, CI/CD
Gambar 7.1 — Halaman Services, tiga kartu layanan hasil akhir (file: gambar-7.1-services-hasil-akhir.jpg)
Tiap kartu adalah satu instance dari block "Big Boxes" atau "Features" (bisa dicek namanya lewat panel BLOCKS saat block itu diseleksi). Gambar latar tiap kartu memakai foto stok bawaan Odoo — bisa diganti lewat tombol Replace yang muncul di panel CUSTOMIZE saat gambar diseleksi.
URL lokal: http://localhost:8069/our-services
Langkah 2 — Testimoni palsu & logo klien fiktif, wajib dibersihkan
Untuk situs personal, konten ini tidak boleh dibiarkan apa adanya sebelum publish — menampilkan testimoni dan logo klien seolah-olah nyata bisa dianggap menyesatkan pengunjung. Yang dilakukan pada sesi ini:
- Kutipan testimoni diganti jadi pernyataan filosofi kerja pribadi (ditulis sebagai pendapat sendiri, bukan mengaku-aku sebagai orang lain), dengan nama diganti jadi nama pemilik situs sendiri.
- Section "Our Clients" dihapus total: klik sekali pada block untuk menyeleksi seluruh section (akan muncul garis putus-putus biru di sekelilingnya), lalu klik ikon tempat sampah merah yang muncul di toolbar kecil di atas block tersebut.
Tujuan langkah ini: memahami bahwa "Success Stories" bukan halaman statis seperti About Us, melainkan sebuah kategori Blog — konsep yang berbeda dan butuh cara isi konten yang berbeda pula.
Saat menu "Success Stories" pertama kali dibuka, halamannya kosong dengan pesan "No blog post yet." Ini karena wizard hanya membuat kategori blog-nya (bernama "Success Stories", terpisah dari blog default "Our blog" yang juga otomatis dibuat), belum mengisi post apa pun di dalamnya.
Langkah 1 — Klik "+ New" di toolbar admin
Tombol + New ada di ujung kanan toolbar ungu admin. Klik tombol ini di halaman mana pun pada situs untuk memunculkan grid pilihan jenis konten yang bisa dibuat.
Gambar 8.1 — Grid pilihan tipe konten (muncul setelah klik "+ New") (file: gambar-8.1-new-content-grid.jpg)
Delapan pilihan ikon: Page (halaman statis baru, seperti About Us), Blog Post (yang dibutuhkan di langkah ini), Event, Forum, Job Position, Product, Course, dan Livechat Widget. Pilihan yang muncul di grid ini bergantung pada module apa saja yang sudah diaktifkan di instalasi Odoo-mu — instalasi yang lebih minim module akan menampilkan grid yang lebih sedikit.
URL lokal: http://localhost:8069/blog/success-stories-2 (halaman Success Stories, sebelum ada post)
Langkah 2 — Klik "Blog Post", pilih kategori blog yang benar
Gambar 8.2 — Dialog "New Blog Post" (file: gambar-8.2-dialog-new-blog-post.jpg)
Dialog kecil ini punya dua field: Select Blog (dropdown, default-nya Our blog — wajib diganti manual ke Success Stories kalau memang mau post ini masuk kategori Success Stories) dan Title (judul post). Klik tombol Save untuk membuat post dan langsung masuk ke editor artikelnya.
URL lokal: http://localhost:8069/blog/success-stories-2
Our blog), post yang dibuat akan muncul di kategori "Our blog", bukan di "Success Stories" — padahal proses pembuatannya dimulai dari halaman Success Stories. Field ini harus diganti manual setiap kali membuat post baru.
Langkah 3 — Isi konten post, lalu publish manual
Editor artikel blog punya dua bagian yang bisa diklik langsung: judul besar (sudah terisi dari dialog sebelumnya) dan area abu-abu bertuliskan Subtitle di bawahnya (cocok diisi info singkat seperti nama perusahaan & periode kerja), lalu area "Start writing here..." untuk isi artikel.
Post yang baru dibuat berstatus Unpublished (label merah di toolbar admin) — setelah konten diisi dan disimpan, klik label status itu untuk mengubahnya jadi Published (label hijau). Tanpa langkah ini, post tidak akan muncul di halaman listing Success Stories untuk pengunjung biasa.
Gambar 8.3 — Halaman Success Stories, listing akhir dengan 3 post (file: gambar-8.3-success-stories-listing.jpg)
Tiga post mewakili tiga pengalaman kerja nyata: sistem banking untuk fintech Singapura, platform project management, dan sistem collection tracking untuk perusahaan multifinance. Breadcrumb "Blogs: All | Our blog | Success Stories" di bagian atas listing menegaskan bahwa Success Stories adalah satu dari (minimal) dua kategori blog yang ada di situs ini.
URL lokal: http://localhost:8069/blog/success-stories-2
Tujuan langkah ini: membedakan bagian mana di halaman Contact Us yang boleh diedit (teks statis) dan mana yang tidak perlu disentuh (form isian pengunjung), lalu menyesuaikan footer yang tampil di semua halaman.
Langkah 1 — Halaman Contact Us punya dua bagian berbeda
- Form isian (Name, Phone Number, Email, Company, Subject, Question, tombol Submit) — ini murni form untuk pengunjung mengisi pesan, tidak perlu diedit teksnya karena itu adalah label field standar.
- Kotak info kontak di sebelah kanan form (nama perusahaan, alamat, telepon, email dengan ikon) — ini teks statis biasa yang bisa langsung diklik dan diedit seperti teks di halaman lain.
Langkah 2 — Footer tampil di semua halaman, edit sekali berlaku semua
Footer (bagian paling bawah situs, berisi "How can we help?", info kontak, dan ikon social media "Follow us") adalah komponen global — muncul identik di Home, About Us, Services, Success Stories, dan Contact Us. Mengeditnya di satu halaman otomatis mengubahnya di semua halaman lain.
Gambar 9.1 — Halaman Contact Us, hasil akhir (termasuk footer) (file: gambar-9.1-contact-us-hasil-akhir.jpg)
Kotak info kontak (kanan atas) diisi nama, kota (tanpa alamat detail demi privasi), link LinkedIn, dan email. Footer di bagian bawah menampilkan info kontak yang sama dengan istilah berbeda ("Connect on LinkedIn", "Send us a message") supaya tidak terasa berulang secara kaku.
URL lokal: http://localhost:8069/contactus
Shift+Enter.
Tabel ini merangkum semua istilah UI yang muncul berulang kali di seluruh dokumen — supaya kalau lupa, tidak perlu mencari ulang ke bagian sebelumnya.
| Istilah | Penjelasan |
|---|---|
| Website Configurator | Wizard 4 langkah yang muncul otomatis setelah aktivasi module Website; menentukan jenis situs, industri, tujuan, palette warna, dan halaman awal. |
| Mode Edit | Diaktifkan lewat tombol Edit di toolbar admin; membuat seluruh isi halaman bisa diklik & diedit langsung, memunculkan panel BLOCKS/CUSTOMIZE/THEME di kanan. |
| Panel BLOCKS | Daftar elemen/section siap-pakai (Banner, Cover, Text-Image, Columns, Features, dst.) yang bisa di-drag ke halaman. |
| Panel CUSTOMIZE | Setting detail untuk block yang sedang diseleksi — layout, warna latar, gambar, dan (kalau teks yang diseleksi) sub-panel Inline Text untuk font/ukuran/warna. |
| Panel THEME | Setting global yang berlaku ke seluruh situs: warna utama, font, dan gaya default komponen. |
| Blog (module) | Module terpisah dari halaman statis biasa; satu situs bisa punya beberapa kategori blog (misalnya "Our blog" dan "Success Stories") yang masing-masing punya listing dan post sendiri. |
| Select Blog (field) | Dropdown di dialog "New Blog Post" untuk menentukan post baru masuk ke kategori blog mana. Wajib dicek manual, defaultnya sering tidak sesuai kategori yang dimaksud. |
| Status Published / Unpublished | Label di toolbar admin (hijau/merah). Konten dengan status Unpublished tidak muncul untuk pengunjung biasa, meskipun sudah tersimpan di database. |
| Footer (global) | Komponen yang tampil identik di semua halaman; mengedit di satu tempat mengubah semua halaman sekaligus. |
- Skip wizard = mulai dari kanvas kosong. Kalau memilih "Skip and start from scratch" pada bagian 3, halaman-halaman siap pakai di dokumen ini tidak akan muncul.
- Admin tidak otomatis "kebal" dari konten yang memang sengaja dibuat oleh wizard (misalnya testimoni/klien fiktif) — itu semua tetap harus dibersihkan manual, wizard tidak tahu bahwa situs ini untuk personal branding.
- Triple-click bisa menyeleksi lebih dari satu baris kalau dua baris teks itu satu blok dengan line-break internal, bukan dua paragraf. Gunakan Shift+Enter saat mengetik ulang untuk menjaga baris tetap terpisah.
- Field "Select Blog" tidak otomatis mengikuti halaman asal saat membuat Blog Post baru — harus dicek dan diganti manual setiap kali.
- Post/halaman baru berstatus Unpublished secara default dan harus di-klik manual untuk diubah jadi Published, walaupun kontennya sudah lengkap dan tersimpan.
- Footer & menu navigasi bersifat global — perubahan di satu halaman langsung terlihat di semua halaman lain, jadi hati-hati saat menghapus/mengedit elemen di sana.
Dokumen ini disusun berdasarkan sesi kerja langsung pada project ai-erp-platform, Agustus 2026. Semua screenshot diambil dari environment Odoo lokal (localhost:8069) — belum pernah di-deploy ke domain publik.
Comments
Post a Comment