Apaa Itu CMS?

 Meski sering berselancar di internet, tidak semua orang mengetahui dan memahami dengan benar apa itu CMS. Sistem Manajemen Konten atau yang biasa disingkat CMS adalah sebuah software yang diaktifkan di browser dan memungkinkan usernya untuk membuat, mengelola, dan memodifikasikan website beserta kontennya tanpa harus menguasai bahasa pemrograman terlebih dulu. Sistem manajemen konten ini menyediakan antarmuka pengguna grafis agar Anda dapat mengelola setiap aspek website. Anda bisa membuat dan mengedit konten, menambahkan gambar dan video, dan setup keseluruhan desain atau tampilan situs. WordPress, Magento, dan Drupal adalah tiga contoh CMS terpopuler di pasaran.

Bagaimana Cara Kerja CMS?

CMS adalah software yang memudahkan Anda dalam membuat web karena tidak memerlukan coding sama sekali. Platform ini sangat user-friendly, terutama bagi pengguna yang baru pertama kali membuat website.

Bila tidak menggunakan CMS, maka Anda harus menguasai bahasa pemrograman. Bahkan untuk mengupload konten ke server pun harus dengan cara manual.

Website modern terdiri atas dua bagian utama, yaitu front-end dan back-end. Front-end adalah bagian situs yang dapat dilihat dan diakses oleh visitor, misalnya blog post, gambar, video, halaman Tentang Kami dan Hubungi Kami, formulir newsletter, dan lain sebagainya. Bagian tekstualnya ditampilkan dengan bahasa markup standar yang disebut HTML, sedangkan desain ditambahkan dengan CSS dan JavaScript.

Sementara itu, bagian back-end-nya meliputi database dan fungsionalitas website. Konten disimpan ke dalam database dan di-push dari back-end ke front-end setiap kali user mengakses halaman web. Fungsionalitas back-end dapat ditulis dalam bahasa pemrograman yang berbeda-beda, misalnya PHP, Python, JavaScript, dan lain sebagainya.

Jika menggunakan CMS, maka Anda tak perlu lagi menuliskan kode front-end atau back-end. Aplikasi ini user friendly sehingga dapat dipasangkan dengan mudah di web browser. Di sistem manajemen konten, Anda dapat menggunakan editor konten untuk membuat post, halaman, toko online, dan bahkan mengonlinekan (push) semua konten. Bahkan Anda juga bisa mengonfigurasikan pengaturan dengan bantuan menu drop-down, check box, dan kontrol lainnya. Berikut tampilan editor konten WordPress:

Dengan CMS, Anda tidak perlu lagi mengupload konten secara manual karena seluruh proses teknisnya dilakukan secara otomatis oleh platform ini. Apabila konten sudah siap dionlinekan, klik Publish dan konten akan langsung muncul di halaman situs.

Kelebihan dan Kekurangan CMS

CMS adalah pilihan yang ideal dan tepat untuk pemilik website. Namun, CMS juga memiliki beberapa kelemahan. Berikut beberapa kelebihan dan kekuranganya.

Kelebihan:

• Dengan CMS, Anda tidak memerlukan bahasa pemrograman untuk membuat dan mengelola website.
• CMS beserta tema, plugin, dan ekstensi terkait mudah diinstall dan diupdate.
• Tersedia ratusan hingga ribuan tema mentahan (pre-designed).
• Dengan plugin atau ekstensi, Anda dapat menambahkan bahkan membuat beragam fitur, seperti SEO, keamanan, newsletter, social media buttons, dan toko online.
• Salah satu fungsi CMS  adalah menyediakan fitur manajemen user. Anda bisa dengan cepat setup berbagai role user, seperti subscriber, author, editor, dan administrator.
• Sebagian besar CMS memiliki komunitas online yang di dalamnya menyertakan forum bantuan, chat online, channel Slack, forum grup atau komunitas, dan lain sebagainya.
• CMS menyediakan berbagai artikel dan tutorial terkait platform dan segala yang ada di dalamnya. Anda bisa membaca sejumlah panduan online, halaman FAQ, deskripsi tema dan plugin, tutorial, dan menonton video.
• Kebanyakan CMS bisa diinstall secara gratis. Jadi, Anda hanya perlu membeli domain dan web hosting saja.

Kelemahan:

• Terkadang, hampir semua tampilan tema mentahan (pre-designed) terlihat sama. Meskipun dapat dikustomisasi, jika tema yang dipilih itu populer, maka risikonya tampilan website Anda sama dengan tampilan situs lain.
• Fleksibilitas CMS masih kurang jika dibandingkan dengan website yang dibuat dari awal secara manual menggunakan coding. Apabila Anda menghendaki fitur yang unik, maka mau tak mau Anda harus menyewa jasa programmer untuk membuat dan mengaktifkannya.
• Biasanya website yang menggunakan CMS populer berisiko tinggi terhadap serangan hacker. Untungnya, ancaman terhadap keamanan ini dapat diminimalisir dengan menginstall plugin yang tepat.
• CMS memengaruhi waktu loading website. Umumnya, website yang dibuat dengan CMS memiliki kecepatan loading yang lebih lamban daripada website yang dibuat secara manual menggunakan coding. Untuk mempercepat waktu loading, Anda harus menginstall plugin dan ekstensi tambahan.

Menampilkan gambar di html

 

Tutorial cara mengoding di sublime text 3

             Assalamualaikum...Halo guys, jadi hari ini aku akan memberikan tutorial untuk membuat 

codingan gambar di sublime dengan bahasa html, yang pertama" kalian buat folders baru di file kalian

lalu kalian rename folders nya html, lalu kalian masukan folder itu ke sublime, dan lamgsung aja kita

bikin file baru, caranya control/command N lalu kalian save dengan cara control/command S lalu kalian

rename file nya.

gambar.html

sekarang kita mulai aja degan membuat file baru namanya gambar.html terus kalian ketik <ht  maka dia akan muncul seperti ini.

nah setelah itu di title nya kalian tulis Contoh Gambar Di Html

Seperti itu.

Lalu kalian coding seperti ini, dan kalian bikin folder baru yang namanya images  yang berisi foto atau gambar lalu gambar itu.

kalian masukan ke folder yang bernama images atau yang baru kalian buat tadi,

setelah itu aku akan jelaskan di sini :

1.apa fungsi <h1> fungsinya adalah untuk membuat judul.

2.apa fungsi <p> fungsinya untuk membuat paraghraf di situ.

3.bagaimana caranya agar tulisan menjadi abu" itu kalian tinggal pencet control/command garis miring.

4.kenapa kita pake <img> karna untuk memanggil gambar nya.

5.kenapa kita width dan height karna untuk merubah ukuran" gambarnya.

6.dan alt juga utntuk memanggil gambarnya.

Ini hasil runnya.

gambar_link.html

seperti biasa kalian klik control/command N lalu kalian control/command s dengan nama gambar_link.html, lalu kalian klik <ht dan enter

lalu title nya kalian isi dengan seperti ini 

lalu kita koding seperti ini

jadi disini ketika kita mengklik gambarnya maka akan berpindah ke tab baru dan membuka link yang sudah kalian siapkan.

disini kau memakai gambar yang aku masukan ke folder image yang telah kita masukan ke folder html

Hasil Run :

Nah ketika aku klik hasilnya seperti ini:

gambar_area.html

seperti biasa kalian klik control/command N lalu kalian control/command s dengan nama gambar_area.html, lalu kalian klik <ht dan enter.

lalu title nya kalian isi dengan seperti ini :

lalu langsung kita coding aja :

Seperti ini

jadi disini ketika kita mengklik gambar dan menyentuh salah satu icons nya maka akan muncul nama

icons nya dan memuncul kan link icons tersebut.

kurang lebihnya seperti ini.

 

gambar_style.html

seperti biasa kalian klik control/command N lalu kalian control/command s dengan nama gambar_style.html, lalu kalian klik <ht dan enter

lalu title nya kalian isi dengan seperti ini :

lalu langsung kita coding aja :

jadi kenapa disini kita kasih border radius karna untuk mengubah radius gambar

dan width height untuk mengubah ukurannya.

Hasil Run :

Sampai disini saja tutorialnya makasihh:).

maaf simple:)

Cara Input Audio Din Sublime Text 3

 Assalamualikum...

hallo guys, jadi hari ini aku akan membuat tutorial tentang html lagi, dengan aplikasi sublime text 3 jadi disini aku akan memberikan tutorial cara menampilkan Audio di html dengan codingan.

langsung saja kita tutorialnya...

Opsi 1

Pertama kalian buat project baru namanya contoh_audio.html setelah membuat project kalian bisa coding seperti ini untuk opsi controls.

tapi sebelum kalian ke codingan kalian siapkan audio yg akan kalian gunakan, kalian masukan file audionya ke folder html.

tetapi untuk Ngoni.mp3 itu adalah nama audio aku, terus sementara dengan "audio/mpeg" itu harus di pake.

Opsi 2 file audio terpisah dengan file html.

nah jadi disini caranya kalian buat folder baru nama folder audio lalu di folder itu kalian masukan audio yang tadi atau audio yang tadi kalian copy lalu masukan ke folder itu, lalu folder kalian masukan ke folder html.

masih dalam satu project.

berikut codingannya :

Opsi 3 Menggunakan Url

nah jadi disini kalian gunakan link dari audionya, untuk mendapatkan link nya kalian bisa open audionya lewat chrome atau browser lainnya.

Berikut codingannya :

Opsi Control

nah jadi disini kalian pake file audio nya ada di dalam folder audio, dan folder audionya ada di folder html.

berikut codingannya :

Opsi Control 2

disini codingannya hampir sama dengan codingan sebelumnya hanya dia memiliki perbedaan sedikit.

Berikut codingannya.

Opsi AutoPlay

disini codingannya hampir sama tapi dia mempunya perbedaan atau ketika di run dia akan memulai dengan sendirinya tanpa kita klik.

Berikut codinganya :

Opsi Autoplay 2

 disini codingannya hampir sama dan fungsinya pun sama.

Berikut codingannya :

Opsi Loop

di opsi loop codingannya hampir tetapi ada sedikit perbedaan dan fungsinya juga berbeda, jadi di opsi loop gunanya untuk memutar berkali" audionya.

Berikut codingannya :

Opsi Loop 2

disini juga codingannya hampir sama, dan fungsinya juga sama.

berikut codingannya :

Opsi Muted

Jadi disini fungsinya untuk mengsenyapkan audio dan bisa nge unmute juga.

Berikut codingannya :

Opsi Muted 2

 

disini codingan dan fungsinya asih sama.

Berikut codingannya :

Opsi Background

audio biasanya di gunakan sebagai background. biasanya menggunakan musik.

tujuan menambahkan background agar menambah kesan tertentu pada web, misalkan ingin membuat pengunjung merasa santai, maka kita bisa memutar audio musik yang santai.

berikut codingannya :

Sampai disini saja tutor ku semoga bermanfaat.

wasalamualaikum...

Menampilkan video di html

Assalamualikum...

hallo guys, jadi hari ini aku akan membuat tutorial tentang html lagi, dengan aplikasi sublime text 3 jadi disini aku akan memberikan tutorial cara menampilkan video di html dengan codingan.

langsung saja kita tutorialnya...

video.html

nahh jadi disini seperti biasa kita buat file baru atau ctrl/cmnd N setelah itu ctrl/cmnd s dan kalian rename file nya jadi video.html.

nah setelah itu kalian save lalu langsung saja kita coding.

seperti biasa kita tulis <ht terlebih dahulu.

seperti itu lalu kalian enter dan dia akan muncul seperti ini.

setelah itu di bawah <head> kalian kasih seperti ini

lalu kalian beri <h1> terus di enter dan beri text seperti ini.

<title> itu untuk memberikan judul pada tab html nya.

nah jadi disini <h1> itu fungsinya untuk memberikan judul di dalam html nya.

setelah itu kalian klik ctrl/cmnd garis miring untuk membuat tulisan kalian jadi sperti abu-abu, dan tidak bergpengaruh pada run nya nanti. nah seperti ini.

dan untuk tulisan opsi 1 nya kalian bisa tulis sendiri. setelah itu kalian enter dan buat codingan seperti ini.

nah jadi disini aku berikan videonya, dan videonya ini di masukan ke folder html nya, jadi kita buat folder baru nama folder nya video, lalu folder videonya kalian masukan ke folder html nya.

https://www.petanikode.com/img/html-video/cat-herd.webm

itu tinggal di download saja ya.

itu untuk link videonya, sebenarnya disini videonya bebas tetapi kalo bisa durasi nya kurang dari 10 detik.

setelah itu ketika kita akan memasukan video ke dalam html, kalian harus pake tag <video>.

kenapa kita disini menggunakan controls karna untuk menampilkan videonya.

sekarang kita lanjut ke opsi ke dua

setelah itu kalian bisa coding seperti ini

nah ini opsi kedua sebenernya sama saja bedanya ini menggunakan link dari video tersebut.

https://www.petanikode.com/img/html-video/cat-herd.webm itu link nya.

setelah itu kalian buat lagi opsi ke 3

setelah itu kalian code seperti ini.

jadi disini aku buat videonya seperti gif,

Video Sebagai Gambar Animasi Gif

Banyak website modern saat ini menggunakan video sebagai ganti dari animasi gif. Bahkan juga Google menyarankan untuk menggunakan video daripada gif. Mengapa?
Karena ukuran file dari video jauh lebih kecil dibandingkan dengan gif dan juga tentunya akan mempengaruhi kecepatan download.
Lalu, bagaimana cara membuat video menjadi gambar gif di HTML.
Caranya sama seperti menambahkan video biasa, tapi kita harus mengaktifkan beberapa atribut seperti autoplay, muted, playsinline dan loop.

oke sekarang kita lanjut ke video ber subtitle

nah jadi disini kalian buat opsi 4

setelah itu kalian code seperti ini

nah kadi disini adalah video yang menyajikan subtitle.

sekarang kita ke video from youtube

lalu kalian tulis opsi 5.

setelah itu kalian coding seperti ini.

nah disini untuk menampilkan video dari youtube hya kalian harus ke web youtube lalu pilih video yang kalian inginkan.

nah untuk menambahkan cvideo youtube nya agar muncul di html kalian harus :

1. pilih video yang kalian inginkan

2. lalu klik tombol bagikan pada video.

3. lalu setelah di klik akan muncul seperti ini.

lalu kalian klik sematkan.

setelah itu dia akan muncul seperti ini.

nah setelah itu di bagian kanan nya kalian copy seperti ini

nah untuk copy nya kalian bisa ctrl/cmnd c setelah kalian ke sublime text lagi dan masukan, yang telah di copy tadi ke sublime seperti ini.

setelah itu kalian coba run.

hasil run :

itu hasil run tersebut di aku.

sampai disini saja tutorialnya semoga bermanfaat.

makasiiii