Integrasi CMS Surreal 15 Menit

Indonesian (Bahasa Indonesia) translation by Dwi Bagus Nurrohman (you can also view the original English article)

Anda telah membangun situs web anda, tetapi bagaimana anda akan mempertahankannya? Dalam tutorial ini, anda akan belajar bagaimana mengintegrasikan situs web anda dengan Surreal CMS dalam waktu kurang dari 15 menit. Kita akan membahas beberapa "gotcha" dan meminta anda mengedit hampir semua situs web statis dalam waktu singkat.

Ikhtisar

Anda mungkin bertanya-tanya bagaimana anda bisa mengintegrasikan seluruh situs web anda dengan CMS hanya dalam 15 menit. Yang benar adalah, karena tren baru-baru ini sistem manajemen konten "ringan", menjadi lebih mudah dari sebelumnya untuk membuat situs web statis ukuran kecil hingga menengah dan berjalan di dalamnya.

Apa itu CMS ringan? Demi tutorial ini, saya mendefinisikannya sebagai sistem manajemen konten yang mudah digunakan dan tidak mengganggu yang tidak harus anda instal. Yang menyenangkan tentang sistem ini adalah anda bahkan tidak perlu meng-host-nya sendiri, itulah sebabnya mengapa integrasi membutuhkan sedikit waktu.

Sebenarnya ada beberapa produk CMS yang tersedia, termasuk CushyCMS, Pagelime, dan SimpleCMS. Sebagian besar sistem ini bekerja dengan prinsip dasar yang sama - anda menambahkan kelas= "sesuatu" ke hampir semua elemen HTML, menautkan situs web Anda ke sistem mereka, dan anda selesai. Yang terbaik dari semuanya, setiap sistem ini menawarkan versi gratis.

Meskipun setiap produk CMS ringan memiliki pro dan kontra, saya memilih untuk bekerja dengan Surreal CMS karena set fitur yang luas dan antarmuka yang sederhana. Anda akan melihat secara tepat apa yang saya maksud hanya dalam beberapa saat, tetapi sementara itu, inilah proses umum untuk berintegrasi dengan CMS ringan:

Buat website anda
TAutkan dengan CMS
Aktifkan halaman web
Tambahkan satu atau lebih editor
Mulai Editing

Hanya untuk membiasakan anda dengan alat yang akan kami kerjakan, berikut adalah sekilas layar pengeditan laman web CMS Surreal:

Pertimbangan Desain

Sebelum anda mulai bekerja dengan CMS ringan, selalu baik untuk memikirkan hal-hal seperti pengkodean karakter dan cara anda menautkan ke gambar dan sumber daya lainnya. Surreal CMS lebih suka bahwa anda menggunakan pengkodean karakter UTF-8, yang sesederhana menambahkan tag meta berikut ke bagian <head> dari setiap halaman web:

1
2	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Penting juga bahwa anda menautkan ke dokumen, gambar, dan sumber daya lain dengan cara yang dapat dimengerti oleh CMS. Surreal CMS bekerja paling baik ketika anda menggunakan tautan relatif atau tautan absolut:

1
2	<a href="/images/photo.jpg">...</a>
3	<a href="http://example.com/images/photo.jpg">...</a>

Hal terakhir tapi mungkin yang paling penting untuk dipertimbangkan sebelum menghubungkan situs web anda ke Surreal CMS adalah penempatan wilayah konten anda. Berikut ini adalah contoh luar biasa dari halaman web yang sangat mendasar yang memiliki menu navigasi, bilah samping, dan area konten utama:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
		<title>Example Webpage</title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta name="description" content="This is an example webpage" />
		<meta name="keywords" content="example, examples" />
		<link href="/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
	</head>
	
	<body>
		
		<div id="header">
			<h1><a href="http://example.com/">Example.com</a></h1>
		</div>
		
		<div id="nav">
			<?php include("$_SERVER[DOCUMENT_ROOT]/includes/nav.php"); ?>
		</div>
		
		<div id="middle">
			
			<div id="sidebar" class="editable">
				<p>Sidebar content here</p>
			</div>
			
			<div id="main_content" class="editable">
				<p>Your content here</p>
			</div>
			
		</div>
		
		<div id="footer">
			<p>&copy;Example.com</p>
		</div>
		
	</body>
	
</html>

Anda mungkin telah memperhatikan bahwa saya menambahkan kelas yang dapat diedit ke sidebar dan wilayah konten utama. Beginilah cara CMS mengetahui bagian halaman mana yang harus anda edit. Anda dapat menambahkan kelas yang dapat diedit ke hampir semua tag HTML, dan anda dapat memiliki sebanyak yang anda inginkan di setiap halaman.

Hal lain yang mungkin anda perhatikan adalah bahwa navigasi sedang dimasukkan dari file terpisah melalui PHP. Surreal CMS memungkinkan anda untuk bekerja dengan file-file yang disertakan seperti ini sehingga anda dapat memperbarui seluruh navigasi situs anda tanpa harus mengedit setiap halaman satu per satu.

Setelah menyiapkan halaman dan menyiapkan wilayah yang dapat diedit, anda akan siap untuk mengintegrasikan situs web anda dengan Surreal CMS.

Menambahkan Website Anda ke CMS

Surreal CMS menawarkan akun gratis dan berbayar. Akun gratis memiliki batasan sangat sedikit, dan akan lebih dari cukup untuk tutorial ini. Cukup buka situs web mereka dan buat akun gratis.

Setelah akun anda dibuat, login ke CMS di http://edit-content.com/. Ini adalah pintu gerbang ke aplikasi Surreal CMS.

Sekarang anda sudah masuk, pilih tombol yang mengatakan Add a Websites. Inilah formulir yang akan anda lihat:

Masukkan URL situs web anda, server (biasanya ftp.your-domain.com), nama pengguna FTP, dan kata sandi FTP. Anda dapat memverifikasi bahwa anda mengetik semuanya dengan benar dengan mengklik Test Connection.

Untuk Root Situs Web, yang terbaik adalah mengklik tombol Browse dan menggunakan alat browsing. Intinya, root situs web anda akan menjadi folder yang berisi beranda anda. Penting bahwa folder ini menjadi folder aktual yang memiliki beranda Anda sehingga CMS dapat memetakan URL dengan benar ke gambar dan file lainnya.

Jika Anda ingin menentukan jalur khusus untuk dokumen, gambar, dan file media, pilih opsi Advanced. Saat Anda menetapkan jalur khusus, ini akan memberi tahu CMS tempat orang lain yang mengedit situs web Anda diizinkan untuk mengunggah file. Untuk saat ini, Anda dapat mengosongkannya.

Mengaktifkan Halaman Web Anda

Sekarang situs web Anda telah ditambahkan ke CMS, langkah selanjutnya adalah mengaktifkan halaman web Anda. Di produk CMS ringan lainnya, ini bisa sedikit membebani waktu Anda, tetapi Surreal CMS memiliki fitur pemindaian yang bagus yang secara otomatis mengaktifkan halaman web hanya dengan satu klik.

Untuk mulai mengaktifkan halaman, pilih situs web Anda dari daftar:

Selanjutnya, pilih Enable Webpages. Dialog berikut akan muncul:

Pilih halaman atau halaman yang ingin Anda sunting dalam CMS. Saat Anda memilih mereka, mereka akan muncul satu per satu di latar belakang. Sebagai jalan pintas, Anda dapat menavigasi ke direktori mana saja di situs web Anda dan klik Scan for Editable Pages. Ini akan memberi tahu CMS untuk mengaktifkan halaman apa pun di direktori saat ini yang memiliki atribut class="editable" di dalamnya. Setelah selesai, pilih Done.

Secara default, setiap halaman yang Anda aktifkan menggunakan <title> halaman sebagai label. Anda dapat dengan mudah mengubah ini menjadi sesuatu yang lebih ramah-CMS dengan mengklik Edit Label. Misalnya, Anda dapat mengubah label untuk index.php untuk membaca "Beranda" dan label untuk nav.php untuk membaca "Navigasi".

Memperbarui Konten Anda

Percaya atau tidak, bagian yang sulit sudah berakhir. Sekarang tinggal masuk dan mengedit konten. Salah satu alasan mengapa saya sangat menyukai Surreal CMS adalah karena ia merampingkan sebagian besar pengaturan. Karena itu, mari beralih ke mengedit konten.

Setelah Anda mengaktifkan satu atau lebih halaman web, langkah selanjutnya adalah mulai mengedit. Cukup pilih salah satu halaman yang telah Anda aktifkan dengan mengklik label halaman yang sesuai. Ini akan membawa Anda ke editor halaman web, tempat Anda akan menghabiskan sebagian besar waktu Anda menggunakan CMS yang hebat ini.

Di editor halaman web, Anda akan melihat empat tab:

Content (Konten) - Di sinilah semua wilayah konten Anda dapat ditemukan.
Properties (Properti) - Anda dapat mengedit halaman judul, kata kunci dan deskripsi di sini.
History- Lihat setiap revisi halaman ini yang dipublikasikan hingga 90 hari.
Editors - Lihat daftar semua editor yang memiliki akses ke halaman.

Di dalam tab Content, dengan asumsi halaman anda memiliki setidaknya satu wilayah yang dapat diedit, anda akan melihat sesuatu seperti ini:

Contoh khusus ini memiliki dua wilayah yang dapat diedit yang telah kita bicarakan sebelumnya: sidebar dan main_content. Anda akan melihat bahwa CMS mengubah ID kecil dan garis bawah yang dipisahkan menjadi Camel Case, label yang dipisahkan ruang untuk estetika. Jika Anda memiliki lebih dari satu wilayah yang dapat diedit pada halaman, Anda dapat beralih di antara mereka dengan mengklik tombol yang sesuai.

Pada titik ini, pengeditan bekerja dengan cara yang sama seperti di banyak sistem manajemen konten lainnya dan aplikasi pengolah kata. Anda dapat memformat teks, mengubah perataan, menyisipkan gambar, daftar, dll. Surreal CMS bahkan memiliki File Manager bawaan yang memungkinkan Anda melihat, mengunggah, mengganti nama, dan menghapus file dan folder. Selain itu, ada juga Editor Gambar yang memungkinkan Anda mengubah ukuran, memotong, memutar, dan membalik gambar dengan mudah.

Bergantung pada jenis elemen yang anda tambahkan class= "editable", Surreal CMS akan menyediakan alat pengeditan yang sesuai. Sebagai contoh, inilah tampilan yang dapat diedit:

Tombol Edit Image meluncurkan editor gambar yang saya bicarakan sebelumnya. Ini sangat mudah digunakan, jadi anda seharusnya tidak memiliki masalah sama sekali memanipulasi foto anda. Begini tampilannya:

Setelah anda selesai mengedit, Anda dapat melihat pratinjau perubahan anda dengan mengklik Preview. Jendela baru akan terbuka, dan anda akan melihat halaman anda persis seperti itu akan muncul ketika diterbitkan. Tentu saja, jika Anda senang dengan perubahan Anda, mengklik Publish akan menyimpannya ke situs web Anda.

Mengizinkan Orang Lain Mengedit Situs Web Anda

Sekarang setelah Anda tahu cara mengatur situs web Anda dan mengeditnya sendiri, bukankah menyenangkan untuk mengizinkan orang lain mengakses juga? Ini sangat berguna bagi perancang yang ingin memberi klien akses terbatas untuk mengedit situs web mereka sendiri, dan itu mudah diatur.

Pertama, pilih tab Editors dari mana saja di CMS dan klik Add an Editor. Formulir berikut akan muncul:

Cukup isi nama dan alamat email orang tersebut untuk memulai. Kemudian, pilih situs web yang harus ditugaskan kepadanya. Jika mau, anda dapat membuka bagian Advanced dan memungkinkan editor untuk mengkloning halaman, menghapus halaman, dan mengedit properti halaman. Anda juga dapat mengaktifkan atau menonaktifkan setiap opsi di bilah alat editor teks kaya dari sini.

Setelah anda memasukkan semua informasi yang diperlukan, pilih Add Editor dan pengguna akan ditambahkan ke CMS. Secara default, sebuah email dikirimkan kepada mereka yang berisi nama pengguna dan kata sandi mereka. Anda dapat menonaktifkan ini, dan CMS akan menunjukkan kepada Anda kata sandi sementara untuk Anda berikan secara manual.

Ada beberapa hal yang perlu anda ketahui tentang akun editor. Pertama, mereka tidak memiliki akses ke semua yang anda lakukan sebagai desainer - editor hanya memiliki akses berdasarkan situs web dan izin yang anda tetapkan untuk mereka. Kedua, editor tidak memiliki akses ke hal-hal seperti pengeditan kode sumber satu halaman penuh dan alat perapi, yang akan kita bicarakan segera. Cara terbaik untuk melihat perbedaan antara desainer dan akun editor adalah dengan membuat diri Anda menjadi editor tes dengan alamat email alternatif.

Sebelum kita melanjutkan, ada satu fitur lain yang harus Anda ketahui tentang editor. Anda dapat memblokirnya dari mengedit halaman tertentu berdasarkan per pengguna. Cukup buka halaman mana saja untuk mengedit dan pilih tab Editor. Di sebelah editor anda akan ada opsi untuk Nonaktifkan/Disable pengeditan. Mengklik ini akan mencegah pengguna itu mengedit halaman saat ini.

Fitur Berguna Lainnya

Sejauh ini, kami telah membahas semuanya mulai dari mengintegrasikan Surreal CMS dengan situs web Anda ke halaman pengeditan. Kesenangan tidak berhenti di situ. Berikut adalah daftar fitur yang dapat Anda manfaatkan setelah Anda mulai menjelajahi lebih dalam apa yang ditawarkan Surreal CMS:

Kloning Situs Web

Anda dapat membuat halaman baru dengan menduplikasi halaman yang sudah ada. Ini sangat berguna karena anda dapat mengatur satu atau lebih halaman template kosong dan membiarkan pengguna membuat halaman sesuai kebutuhan. Anda juga dapat mengaktifkan atau menonaktifkan ini untuk setiap pengguna, sehingga editor yang lebih berpengalaman dapat memiliki lebih banyak kontrol atas situs.

Styling Editor Teks Kaya

Terapkan gaya dari situs web anda ke editor teks kaya untuk memberikan tampilan yang mirip dan terasa mirip dengan situs web kepada pengguna. Untuk mengakses fitur ini, pilih tab Websites web dari mana saja di CMS dan pilih situs web. Anda akan melihat tombol berlabel Change Editor Styles.

Mengedit File CSS, JavaScript, dan XML

Anda dapat mengaktifkan stylesheet, skrip, dan file XML sama seperti halaman web lainnya. Tentu saja, anda akan mengedit kode sumber mentah, jadi anda mungkin ingin memblokir pengguna yang tidak berpengalaman mengakses jenis file ini jika anda mengaktifkannya.

Mengedit Kode Sumber HTML Lengkap

Saat anda mengedit halaman web, anda akan melihat tombol berlabel "Edit Daerah Konten". Ini sebenarnya memungkinkan anda mengakses kode sumber lengkap halaman. Editor tidak memiliki akses ke alat ini.

Memperbaiki Kode HTML Berantakan dengan Tidy

Surreal CMS memiliki alat bawaan yang memanfaatkan perpustakaan HTML Tidy yang populer. Ini berguna untuk memperbaiki tag bersarang atau kode HTML tidak valid yang dapat menyebabkan masalah saat mengedit. anda dapat mengakses alat ini dari dalam halaman pengeditan kode sumber lengkap.

Melihat aktivitas Editor

Anda dapat melihat apa yang telah dilakukan oleh editor anda! Ini termasuk halaman apa yang telah mereka akses, ketika diedit, dan bahkan saat mereka login ke CMS. Untuk melihat informasi ini, pilih tab Editosr dari mana saja di CMS dan pilih editor. Klik pada nama editor untuk melihat aktivitas terbaru mereka.

Fitur Pro

Surreal CMS gratis untuk digunakan hingga tiga situs web. Setelah itu, mereka meminta anda untuk membayar $25 USD per bulan untuk layanan berbayar mereka, tetapi akun Pro juga memiliki beberapa fitur bagus lainnya. Misalnya, anda dapat mengakses CMS dari domain atau subdomain anda sendiri (mis. Cms.your-domain.com).

Dengan akun Pro, anda juga dapat mengunggah logo anda sendiri dan menyesuaikan tema, yang sangat ideal untuk desainer yang ingin menggunakan CMS sebagai solusi untuk klien mereka. Berikut adalah contoh dari apa yang dapat anda harapkan ketika anda menganggap CMS sebagai milik anda:

Sumber Daya Tambahan

Sekarang setelah anda mengetahui semua dasar-dasarnya (dan beberapa tips lanjutan juga!), Berikut adalah beberapa sumber yang berguna untuk bekerja dengan Surreal CMS: