|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /var/www/laciasmara.com/public_html/shop/application/views/admin_new/contents/pages/ |
Upload File : |
<main class="flex-1 py-4 px-4 bg-purple-50">
<h1 class="text-xl font-bold mb-2 text-[#333]">Tambah Halaman Statis</h1>
<!-- Form -->
<form action="<?= base_url('admin/contents/store_page') ?>" method="POST" enctype="multipart/form-data" class="space-y-4 mb-10">
<input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>">
<!-- Informasi Brand Section -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-lg font-semibold mb-4">Informasi Halaman</h2>
<!-- Judul Halaman -->
<div class="mb-4">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2 w-full mt-1">
<label class="text-[#333] font-medium">Judul Halaman</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Seperti namanya 'Judul' akan menjadi judul dari halaman statisnya dan yang akan ditampilkan di menu navigasi halaman.</p>
</div>
</div>
<div class="w-2/3">
<input type="text" name="page_title" placeholder="Masukkan judul halamannya disini" required
autocomplete="off"
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500">
</div>
</div>
</div>
<!-- Alias Halaman -->
<div class="mb-4">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2 w-full mt-1">
<label class="text-[#333] font-medium">Alias URL</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Alias ini digunain sebagai navigasi yang akan digunakan di URL, misal kalau aliasnya 'Awal Kisah' maka nanti URL nya akan menjadi https://www.laciasmara.com/shop/page/Awal-Kisah.</p>
<p class="mt-3">Kalau ga diisi, akan otomatis diambil dari judul halaman.</p>
</div>
</div>
<div class="w-2/3">
<input type="text" name="alias" placeholder="Masukkan alias halamannya disini"
autocomplete="off"
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500">
</div>
</div>
</div>
<!-- Judul Halaman EN -->
<div class="mb-4">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2 w-full mt-1">
<label class="text-[#333] font-medium">Judul Halaman EN</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Judul bahasa inggrisnya.</p>
</div>
</div>
<div class="w-2/3">
<input type="text" name="page_title_en" placeholder="Yang ini diisi versi bahasa inggrisnya" required
autocomplete="off"
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500">
</div>
</div>
</div>
<!-- Alias Halaman En-->
<div class="mb-4">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2 w-full mt-1">
<label class="text-[#333] font-medium">Alias URL EN</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Alias ini digunain sebagai navigasi yang akan digunakan di URL, misal kalau aliasnya 'The Story' maka nanti URL nya akan menjadi https://www.laciasmara.com/shop/page/The-Story.</p>
</div>
</div>
<div class="w-2/3">
<input type="text" name="alias_en" placeholder="Masukkan alias halamannya disini"
autocomplete="off"
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500">
</div>
</div>
</div>
</div>
<!-- Detail Halaman-->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-lg font-semibold mb-4">Detail Halaman</h2>
<!-- Intro Merk -->
<div class="mb-4">
<div class="flex items-start gap-4">
<!-- Label & Info -->
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2 w-full mt-1">
<label class="text-[#333] font-medium">Intro</label>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Kalimat intro/pengantar sebelum ke isi halaman</p>
</div>
</div>
<!-- Tabs & Editor Container -->
<div class="w-2/3">
<!-- Tabs -->
<div class="flex border-b">
<button type="button" class="tab-link px-4 py-2 text-sm font-semibold text-gray-600 focus:outline-none border-b-2 border-transparent hover:border-[#7A4397] active-tab" data-group="intro" data-target="#intro-tab-id">Indonesian</button>
<button type="button" class="tab-link px-4 py-2 text-sm font-semibold text-gray-600 focus:outline-none border-b-2 border-transparent hover:border-[#7A4397]" data-group="intro" data-target="#intro-tab-en">English</button>
</div>
<!-- Tab Content -->
<div class="py-4">
<div id="intro-tab-id" class="tab-content">
<textarea name="introduction" id="intro-editor-id"></textarea>
</div>
<div id="intro-tab-en" class="tab-content hidden">
<textarea name="introduction_en" id="intro-editor-en"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="mb-4">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2 w-full mt-1">
<label class="text-[#333] font-medium">Isi Halaman</label>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Isi konten dari halamannya dimasukin disini ya</p>
</div>
</div>
<!-- Tabs & Editor Container -->
<div class="w-2/3">
<!-- Tabs -->
<div class="flex border-b">
<button type="button" class="tab-link px-4 py-2 text-sm font-semibold text-gray-600 focus:outline-none border-b-2 border-transparent hover:border-[#7A4397] active-tab" data-group="body" data-target="#body-tab-id">Indonesian</button>
<button type="button" class="tab-link px-4 py-2 text-sm font-semibold text-gray-600 focus:outline-none border-b-2 border-transparent hover:border-[#7A4397]" data-group="body" data-target="#body-tab-en">English</button>
</div>
<!-- Tab Content -->
<div class="py-4">
<div id="body-tab-id" class="tab-content">
<textarea name="body" id="body-editor-id"></textarea>
</div>
<div id="body-tab-en" class="tab-content hidden">
<textarea name="body_en" id="body-editor-en"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pengelolaan Halaman -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-lg font-semibold mb-4">Pengelolaan Halaman</h2>
<!-- Status Merk -->
<div class="mb-4">
<div class="flex items-start gap-4">
<!-- Label & Info -->
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2 w-full mt-1">
<label class="text-[#333] font-medium">Status Halaman</label>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Kalau status aktif, halaman bisa diakses oleh pengunjung website.</p>
</div>
</div>
<!-- Input & Tips -->
<div class="w-2/3">
<div class="flex items-center gap-3">
<label class="relative inline-flex items-center cursor-pointer">
<input
id="pageStatus"
type="checkbox"
name="status"
class="sr-only peer"
value="1">
<div class="w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#7A4397] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#7A4397]"></div>
</label>
<span id="statusText" class="text-sm font-medium text-gray-500">Tidak Aktif</span>
</div>
</div>
</div>
</div>
<!-- SEO Meta Description-->
<div class="mb-4">
<div class="flex items-start gap-4">
<!-- Label & Info -->
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2 w-full mt-1">
<label class="text-[#333] font-medium">Meta Description (SEO)</label>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Meta Description adalah ringkasan singkat yang muncul di hasil pencarian Google di bawah judul halaman. Ini membantu pengguna memahami isi halaman sebelum mengklik.</p>
</div>
</div>
<!-- Input & Tips -->
<div class="w-2/3">
<?php $this->load->view('admin_new/components/input', [
'id' => 'seoMetaDescription',
'type' => 'text',
'name' => 'seoMetaDescription',
'placeholder' => 'Masukkan ringkasan halaman yang menarik dan mengandung kata kunci',
'required' => false
]); ?>
<div class="mt-2 flex text-sm text-gray-600">
<p>Tips: Jangan gunakan meta description terlalu panjang, karena akan terpotong di hasil pencarian. Pastikan deskripsi mengandung kata kunci utama untuk hasil SEO yang lebih optimal.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex justify-end gap-4">
<button type="button" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
onclick="window.location.href='<?= base_url('admin/products/manage-brand') ?>'">
Batal
</button>
<button type="submit" class="px-6 py-2 bg-[#7A4397] text-white rounded-lg hover:bg-[#7A4397] transition-colors">
Simpan & Tambah Baru
</button>
</div>
</form>
</main>
<script>
const BASE_URL = '<?= base_url() ?>';
const brandForm = document.querySelector('form');
document.addEventListener('DOMContentLoaded', function() {
const statusCheckbox = document.querySelector('#pageStatus');
const statusText = document.getElementById('statusText');
statusCheckbox.addEventListener('change', function() {
if (this.checked) {
statusText.textContent = 'Aktif';
statusText.classList.add('text-[#7A4397]');
statusText.classList.remove('text-gray-500');
} else {
statusText.textContent = 'Tidak Aktif';
statusText.classList.remove('text-[#7A4397]');
statusText.classList.add('text-gray-500');
}
});
// Words count for name
document.querySelectorAll("[data-count]").forEach(input => {
const counter = document.querySelector(`.${input.dataset.count}`);
input.addEventListener("input", () => {
counter.textContent = `${input.value.length}/50`;
});
});
// Intro
let introEditorId, introEditorEn;
ClassicEditor.create(document.querySelector("#intro-editor-id"))
.then(editor => {
introEditorId = editor;
})
.catch(error => console.error(error));
ClassicEditor.create(document.querySelector("#intro-editor-en"))
.then(editor => {
introEditorEn = editor;
})
.catch(error => console.error(error));
// Deskripsi Brand
let bodyEditorId, bodyEditorEn;
ClassicEditor.create(document.querySelector("#body-editor-id"))
.then(editor => {
bodyEditorId = editor;
})
.catch(error => console.error(error));
ClassicEditor.create(document.querySelector("#body-editor-en"))
.then(editor => {
bodyEditorEn = editor;
})
.catch(error => console.error(error));
// Tab Switching (Pisahkan berdasarkan group)
document.querySelectorAll(".tab-link").forEach(button => {
button.addEventListener("click", function() {
const group = this.dataset.group; // Ambil group (short atau full)
const target = this.dataset.target; // Ambil target tab
// Hapus active-tab hanya dari tab dalam group yang sama
document.querySelectorAll(`.tab-link[data-group="${group}"]`).forEach(btn => {
btn.classList.remove("active-tab", "border-[#7A4397]");
});
// Tambahkan active-tab ke tombol yang diklik
this.classList.add("active-tab", "border-[#7A4397]");
// Sembunyikan hanya tab dalam group yang sama
document.querySelectorAll(`.tab-content[id^="${group}-tab"]`).forEach(content => {
content.classList.add("hidden");
});
// Tampilkan tab yang dipilih
document.querySelector(target).classList.remove("hidden");
});
});
});
</script>