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

Membangun CMS: Struktur Dan Styling 

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building a CMS.
Building a CMS: goPress

Indonesian (Bahasa Indonesia) translation by Biyan Pasau (you can also view the original English article)

Final product image
What You'll Be Creating

Bagi anda yang familiar dengan CMS seperti wordpress tampilan web pertama anda  tidak akan jauh berbeda dengan tampilan sederhana flat desain CMS di atas. Perlu di ingat judul artikelnya membangun CMS namun poinnya adalah bagaimana menstruktur dan mendesain tampilan, tidak berkaitan dengan database. Sebagai gantinya, semua informasi disimpan dalam file teks biasa. Karena banyak virtual private server (VPS) saat ini menggunakan RAM berbasis hard drive, pendekatan ini lebih cepat dan lebih aman.

Dalam seri tutorial ini, saya akan menunjukkan cara untuk membuat flat file sistem CMS anda sendiri menggunakan teknologi web sederhana. Tidak seperti sistem CMS pada umumnya yang sudah jadi dan sudah siap pakai, Ini adalah sistem CMS dasar tetapi tetap apa yang di butuhkan untuk para pemula yang ingin belajar dasar CMS akan di jelaskan disini.

Jika anda punya project dan bila project anda sudah berkembang menjadi project yang besar, maka bersiaplah karena masalah pengornasian file dan folder akan segera menghampiri anda ( Serem kan... hihihi ). Juga, setiap jenis halaman memiliki direktori sendiri difolder situs dengan direktori bagian untuk bagian-bagian kecil dari CMS. Hal ini mempertahankan semuanya pada tempatnya masing-masing dan membuat sebuah sistem fleksibel.

Struktur Folder Utama (Root Folder)

Dalam direktori di mana Anda akan membangun proyek, umumnya anda akan membuat direktori seperti: src, site, dan tema. Folder src untuk menyimpan file yang berkaitan dengan server, folder site untuk menyimpan file halaman yang akan menampilkan informasi seperti halaman beranda, kontak, tentang atau lainnya, dan folder tema untuk menyimpan file layout seperti header dan footer atau yang lebih spesifik lagi navigasi. 

Dalam direktori theme, Anda perlu membuat direktori layout dan styling. Direktori layouts akan berisi layout halaman web yang berbeda. Dengan memisahkan informasi layout dari informasi styling, theme menjadi lebih fleksibel. Untuk saat ini, akan ada satu layout bernama SingleCol.

Untuk semua pembuatan styling dan layout, saya menggunakan Sass, Compass, dan Susy. Sass adalah bahasa pengolahan Custom Style Sheet. Ini memberikan cara yang lebih kuat untuk menciptakan CSS style sheet untuk website Anda. Compass adalah ekstensi untuk Sass. Sassy-buttons adalah ekstensi Sass untuk membuat tombol menarik di situs web. Susy juga merupakan ekstensi untuk membuat sistem layout grid untuk situs Anda.

Karena Ruby sudah terpasang di semua Mac, Anda tidak perlu menginstalnya. Untuk menjalankan Ruby di sistem Windows, Anda perlu mendownload Ruby's Windows Installer. Pada Linux, Anda perlu menggunakan Manajer paket sistem Anda untuk menginstal Ruby.

Setelah Ruby ada pada sistem Anda, Anda dapat menginstal Sass, Compass, Sassy-buttons, dan Susy dengan baris perintah ini:

Untuk tutorial ini, saya menggunakan Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3, dan Susy 2.2.5. Tergantung pada konfigurasi sistem Anda, Anda mungkin harus menjalankan perintah ini dengan sudo.

Tata Letak (Layout)

Untuk memulai membuat layout, jalankan perintah ini di direktori SingleCol:

Ini akan membuat directory sass dan stylesheet dan file bernama config.rb. Karena saya suka menggunakan css untuk direktori stylesheet, ubah nama direktori stylesheet menjadi css. Juga, buat direktori js untuk file JavaScript yang diperlukan untuk layout. Buka file config.rb dan buat terlihat seperti ini:

Sekarang, untuk membuat layout dasar website, buat file dalam direktori layout yang disebut template.html. Dalam file ini, tambahkan kode berikut:

Template ini menciptakan halaman web standar untuk situs. Setiap halaman memiliki header dengan panel navigasi, sidebar tunggal, area konten, dan area footer. Hal terakhir yang dimuat adalah javascript yang dibutuhkan untuk situs ini.

Setiap bagian diwakili dengan makro Handlebar. Server memperluas macro-nya sebelum menampilkannya kepada pengguna.

Dalam direktori sass, buat sebuah file bernama base.scss dan letakkan kode ini:

Kode sass ini dimuat dalam style reset compass untuk menetralisir browser default. Kemudian itu memuat and menyiapkan susy untuk membuat grid yang tepat untuk semua elemen di halaman web.

Sistem navigasi css ada setelah halaman aktif. Drop-down yang tersebunyi untuk menu menjadi terlihat dengan definisi "mouse-over". Ini hanya memberikan sistem menu css.

Semua style ini mendefinisikan struktur dasar dari website. Tidak ada satu pun dari hal diatas yang membuat tampilan halaman, hanya posisinya. Semua styling akan ditangani oleh konten styling.

Styles

Untuk direktori styling, buatlah sebuah direktori bernama Basic. Inisialisasi informasi sass seperti yang dilakukan untuk direktori layouts/SingleCol. Dalam direktori ini, jalankan baris perintah berikut:

Ini akan membuat direktori sass dan stylesheet dan file bernama config.rb. Karena saya suka menggunakan css untuk direktori stylesheet, ubah nama direktori stylesheet menjadi css. Juga, buat sebuah direktori js untuk setiap JavaScript untuk membuat theme. Buka file config.rb dan buat terlihat seperti ini:

Untuk mengubah desain tombol di situs web, saya menggunakan sassy-buttons. Karenanya, itu diperlukan dulu, baru kemudian struktur direktori.

Dalam direktori Basic/sass, buat file Basic.scss dengan informasi ini:

Code ini mendefinisikan bagaimana website terlihat. Itu juga mendefinisikan background, pewarnaan, font, dsb. Yang membentuk styling untuk website pada umumnya.

Direktori Styling/Basic berisi berkas yang diperlukan untuk tampilan default halaman 404, header, footer, dan bagian sidebar situs web. Oleh karena itu, buat sebuah file bernama 404.html dan tempatkan kode ini:

Ini adalah halaman error 404 dasar. Anda harus berhati-hati dengan informasi yang diberikan di sini, karena Anda tidak ingin mengungkapkan terlalu banyak informasi tentang bagaimana situs Anda bekerja. Karena ini akan ditempatkan dibagian content halaman, akan mudah bagi pengguna untuk bernavigasi darinya.

Berikutnya, buat file header.html dengan konten berikut:

Ini hanya sebuah header dasar tanpa deskripsi, tetapi memberikan CMS sesuatu untuk ditampilkan.

Selanjutnya, buat file footer.html dengan konten ini:

Selanjutnya, buat file sidebar.html yang dengan konten ini:

Sekali lagi, ini adalah placeholder. Semua file tersebut disalin ke direktori site/parts dan diubah sesuai kebutuhan situs. Tujuannya agar server memiliki nama untuk digunakan seandainya pengguna lupa membuatnya.

Struktur Situs

Dengan theme dan layout yang didefinisikan, saatnya untuk menciptakan konten dasar dan struktur untuk situs sebenarnya. Dalam direktori site, buat direktori parts, pages, posts, images, css, js.

Parts (bagian)

Direktori parts akan berisi potongan kecil html/css/javascript yang akan membuat satu unit ditempatkan di beberapa lokasi situs web. Bagian ini masuk ke server dan digabungkan dengan isi halaman jika diperlukan. Untuk situs demo kita, buat bagian berikut:

  • footer.html dengan code ini:
  • header.html dengan code berikut:
  • headr.html dengan code berikut:
  • navbar.html dengan code berikut:
  • sidebar.html dengan code ini:
  • socialmedia.html dengan code ini:

Server memuat bagian ini dengan menggunakan nama tanpa ekstensinya dalam template Handlebar untuk perluasan. Sebagai contoh, dimana pun socialmedia.html perlu ditempatkan, Anda menempatkan makro {{{socialmedia}}} disana. Juga, bagian ini dapat berupa HTML, Markdown, atau format apapun yang dapat ditangani oleh server. Dalam server, saya akan membuat file-file pendukung yaitu HTML, Jade/Amber, dan Markdown. Saya akan membahas detail ini di tutorial pembuatan server yang sebenarnya.

Pages (halaman)

Semua halaman untuk situs akan ditempatkan dalam direktori pages. Untuk saat ini, buat file-file berikut dengan konten-nya masing-masing:

  • main.html dengan code ini:
  • flatcms.md dengan code ini:
  • about.md dengan code ini:

Ini adalah halaman demo untuk situsnya. Satu-satunya file wajib adalah main.html karena server akan memuat konten halaman ini kedalam memory dan menyediakan dari memory. Ini membantu mempercepat pemuatan halaman depan website. Dua halaman lainnya memiliki ekstensi md karena mereka dalam format Markdown. Server akan menterjemahkan konten ke HTML sebelum menyematkannya di halaman layout.

Umumnya, halaman berisi informasi yang tidak banyak berubah sepanjang waktu. Itu memberikan pemirsa informasi tentang situs, tujuannya dan sasarannya.

Halaman bisa bersifat hirarkis dengan membuat direktori dan subdirektori dengan halaman. Nama direktori ini membuat alamat ke halaman direktori ini.

Posts

Tidak seperti page, post adalah item yang ditambahkan secara regular, misalnya, posting blog harian/mingguan/bulanan dan item berita. Area ini diharapkan untuk sering diupdate. Dalam direktori posts, buat dua direktori baru: blogs dan news. Dimasing-masing direktori tersebut, buat direktori flatcms. Ini akan berisi postingan blog dan item berita untuk website Flat CMS.

Pada direktori posts/blogs/flatcms, buat file-file berikut:

  • index.amber dengan konten ini:
  • flatcms.md dengan konten ini:

Index.amber adalah template Jade untuk menentukan berbagai post yang berbeda di blog. Sistem template HTML Jade memudahkan menambahkan konten baru dengan format yang tepat. Parameter ke makro membentuk item yang berbeda. Anda bisa menemukan lebih banyak informasi tentang Jade di Tuts+.

Di sini, ekstensi yang digunakan adalah amber karena Go language yang setara dengan Jade adalah Amber. Karena di situlah saya memulai, begitulah cara saya membuatnya. Jika Anda ingin mengubah ekstensi, ingatlah untuk mengubahnya dalam kode server yang sesuai juga.

Di direktori posts/news/flatcms, buat file berikut ini:

  • index.amber dengan konten ini:
  • flatcms.md dengan konten ini:

Ini membuat item news untuk demo situs. Di situs saya, saya menggunakan struktur yang sama untuk tutorial dan demo halaman code.

Images

Semua website punya gambar. Dalam konfigurasi ini, semua gambar ada di direktori site/images. Untuk keperluan demo, hanya icon social media yang diletakkan di sini. Anda bisa mendapatkan file gambar dari file download.

Site CSS

Bahkan dengan layout css dan styling css, akan ada waktu dimana Anda ingin aturan css khusus. Direktori site/css berisi semua file css yang menempatkan sentuhan akhir di situs web. Semua layout, styling, dan site/css akan dikompilasi bersama ke dalam satu file css. Karena itu, buatlah direktori site/css/final untuk menempatkan file yang dikompilasi ini. Sekarang, buat file site/css/site.css dengan konten berikut:

Tidak banyak di sini—hanya definisi untuk class clear. Anda bisa menambahkan apapun yang Anda mau, tapi harus sesuatu yang tidak berkaitan dengan layout atau kategori styling.

Site Scripts

direktori site/js berisi semua file JavaScript spesial untuk situs. Ini akan disusun bersama-sama dan diminimalkan agar memuat halaman situs menjadi lebih cepat. Untuk sekarang, buat direktori site/js/final untuk script yang dikompilasi dan file site/js/01-site.js dengan isi berikut:

Tidak banyak di sini, untuk sekarang. Tapi, karena Anda membutuhkan JavaScript kustom, itu bisa diletakkan di sini.

Karena script akan disusun bersama, saya memasukkannya sesuai urutan yang dibutuhkan untuk pemuatan. Aturan untuk mengkompilasi script bersama-sama akan memuat script dalam urutan numerik.

Otomatisasi Dengan Gulp

Cara termudah untuk mempercepat load halaman web adalah dengan memiliki request HTTP sedikit mungkin. Karenanya, lebih baik untuk menggabungkan semua CSS dan JavaScript file ke dalam satu file. Cara terbaik untuk mengkompilasi file ini adalah dengan membuat script. Melakukan hal itu setiap kali server menerima request adalah buang-buang waktu pemrosesan.

Pilihan saya untuk otomatisasi script adalah Gulp. Gulp berjalan pada Node.js. Oleh karena itu, pergi ke website Node.js dan download programnya untuk sistem Anda. Setelah Anda menginstal Node.js, Anda dapat menginstal Gulp dengan ini:

Ini akan menginstal Gulp dan Modul Gulp yang saya gunakan di script yang dibuat. Sekarang, di bagian atas direktori Anda, buat file gulpfile.js yang berisi konten berikut:

Ini akan menggabungkan semua CSS dan JavaScript ke dalam satu file: di dalam file site/css/final/final.css untuk CSS, dan di dalam file site/js/final/final.js untuk JavaScript. Ini juga akan menambahkan aturan prefix browser untuk CSS Jalankan di direktori utama perintah berikut:

Gulp akan mengkompilasi semua file kita dan menempatkan mereka di lokasi yang tepat. Setiap tugas yang didefinisikan dalam gulpfile.js dapat dijalankan secara terpisah dengan memberikan nama tugas setelah perintah gulp. Anda bisa mempelajari lebih jauh tentang Gulp di Tuts+.

File Configuration Server

Semua server memerlukan informasi konfigurasi. Karena itu, di root direktori, buat file server.json dengan informasi ini:

File json ini mendeskripsikan informasi tentang layout yang digunakan, styling yang digunakan, tujuan respon alamat dan port server, nama utama untuk situs dengan sub judul, caching untuk dijalankan dan dimatikan cache untuk keperluan debugging, dan lokasi direktori yang berbeda digunakan untuk situs. Dengan memberikan informasi ini ke server dalam file json, server bisa fleksibel, dengan informasi yang tidak butuh terlalu banyak code.

Mengupload Situs ke Server

Kebanyakan orang menggunakan klien FTP untuk menyalin file ke server mereka. Hal ini mudah dilakukan, tetapi sangat bervariasi mengenai sistem dan program yang digunakan. Tetapi ada beberapa alternatif.

Anda dapat menyiapkan daemon Dropbox untuk memuat situs Anda dari akun Dropbox Anda. Dropbox Wiki punya instruksi detail untuk menyiapkannya. Satu-satunya masalah adalah file secara otomatis terupload ke server ketika Anda membuat perubahan. Kadang-kadang, Anda ingin membuat perubahan tanpa mengupdate ke server. Jika hal ini terjadi, miliki lokasi bebas-Dropbox dari semua file situs dan lokasi Dropbox juga. Ketika selesai, buat tugas di file Gulp Anda untuk menyalin file situs baru ke lokasi Dropbox.

Dropzone 3 Setup for CMS Uploading
Menyiapkan Dropzone 3 Untuk Mengupload CMS

Pendekatan pilihan saya adalah dengan menggunakan Dropzone 3. Anda dapat memprogram Dropzone 3 dengan Ruby atau Python untuk menjalankan file yang dipasangkan padanya. Dropzone 3 juga memiliki banyak fungsi bawaan. Ada file action yang dibangun di untuk meng-upload ke situs FTP/SFTP. Aku membuat satu target Dropzone 3 untuk masing-masing direktori utama di situs saya. Kemudian, ketika saya ingin mengubah atau menambahkan file, saya cukup menyeretnya ke direktori yang sesuai untuk target dropzone. Anda dapat mempelajari lebih lanjut tentang Dropzone 3 dengan tutorial saya Writing Dropzone 3 Actions.

Kesimpulan

File-file dasar ini akan membuat sebuah website yang terlihat seperti ini:

Demo Site in Browser
Situs demo di Browser

Ini adalah hanya permulaan! Sekarang, dengan struktur situs yang ditata, sekarang saatnya untuk mulai membangun server web. Bergabung dengan saya di mana saya akan membangun server web berbasis Go language untuk situs demo ini tutorial selanjutnya.

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.