Ubah Tema Default OpenSID | Themes Batudhaa | #3 | Mukti911

 A. Pendahuluan

Pada Artikel sebelumnya aku sudah share cara untuk meng-install OpenSID. Lalu banyak yang tanya apakah tampilannya bisa diubah. Memang bisa tampilannya diubah sendiri dengan cara re-coding theme dari OpenSID. tapi jika kalian mengubah sendiri akan memakan waktu yang cukup lama maka dari itu kita gunakan saja tema yang sudah dibuat oleh Pegiat OpenSID atau Komunitas OpenSID.

B. Latar Belakang
Karena default tema dari OpenSID kurang menarik dan kurang interaktif.

C. Maksud dan Tujuan
Agar dapat memasang tema pada OpenSID.

D. Alat & Bahan

• WebServer ( Apache2, MySQL, PHP ).
• OpenSID
• Tema OpenSID

D. Waktu Pelaksanaan

• 10 Menit

E. Pembahasan

Pada artikel sebelumnya aku sudah meng-share cara untuk menginstall OpenSID. Sekarang aku akan share bagaimana cara memasang tema pada OpenSID. OpenSID menyediakan dua tema penampilan web.

• Tema default, dan
• Tema hadakewa (tema ini responsif).

Setting tema yang akan digunakan dijelaskan di Panduan Konfigurasi Aplikasi, lihat bagian Setting web_theme. Jika setting ini dikosongkan, yang akan ditampilkan adalah tema default. Pada SID inti (berkas asli rilis unduhan), berkas tema ada di folder themes. Style/css masing-masing tema ada di:

• Style/css tema default ada di folder themes/default/css, dan
• Style/css tema hadakewa ada di folder themes/hadakewa/css.

Di masing-masing folder tersebut bisa ditemukan berkas berikut:

• first.css yang mengubah style yang ada di assets/front/css/first.css, dan
• default.css yang mengubah style yang ada di assets/front/css/default.css.
• Kedua berkas tersebut berisi setting css yang terpenting untuk menentukan penampilan modul Web.

Berikut adalah Tema yang telah dikembangkan teman teman dari Pegiat & Komunitas OpenSID :

• Batudaa. Download Sekarang
• ODC. Download Sekarang
• Urban. Download Sekarang
• Default
• Hadekawa

F. Langkah Kerja
Aku akan share cara untuk mengubah tema OpenSID menjadi OpenSID batudhaa :

• Pastikan kalian sudah download temanya lalu kalian extract setelah di extract kalian masukkan folder tersebut di folder <opnsid>/themes/ . Lalu ubah permission akses pada file yang kalian copy-kan tadi menjadi 777 dan www-data:www-data.

root@911-X453MA:/# cd /home/mukti/Downloads/
root@911-X453MA:/home/mukti/Downloads# unzip batudaa-theme-master.zip 
root@911-X453MA:/home/mukti/Downloads# mv batudaa-theme-master/batudaa /var/www/html/desamaron/themes/
root@911-X453MA:/home/mukti/Downloads# cd /var/www/html/desamaron/themes/
root@911-X453MA:/var/www/html/desamaron/themes# ls -l
total 16
drwxr-xr-x 7 root     root     4096 Apr  4 06:34 batudaa
drwxrwxr-x 5 www-data www-data 4096 Jul  1 05:19 default
drwxrwxr-x 5 www-data www-data 4096 Jul  1 05:19 hadakewa
-rwxrwxr-x 1 www-data www-data  114 Jul  1 05:19 index.html
root@911-X453MA:/var/www/html/desamaron/themes# chown -R www-data:www-data batudaa/
root@911-X453MA:/var/www/html/desamaron/themes# chmod -R 775 batudaa/

• Lalu buka browser lalu masuk ke siteman lalu login setelah itu klik pada pojok kanan atas yaitu user lalu klik pilih pengaturan. setelah itu pilih Setting Aplikasi lalu scroll kebawah lalu pada menu web_theme pilih batudaa. setelah itu simpan.

Login Page OpenSID

Admin

Setting Aplikasi

• Lalu lihat pada first apakah tema sudah berubah. 

Tampilan Default OpenSID

Tampilan Batudaa OpenSID

G. Hasil Yang Didapat

• Dapat menambah dan mengubah tema pada OpenSID

H. Kesimpulan
Jadi dalam OpenSID dapat diubah temanya.

I. Referensi

• opensid.info

Install OpenSID 18.07 di Linux | #2 | Mukti911

A. Pendahuluan

Dalam artikel sebelumnya aku sudah memberikan penjelasan tentang OpenSID. Bagaimana cara menginstallnya ? berikut adalah cara untuk menginstall OpenSID 18.07 di Linux Xubuntu.

B. Latar Belakang

Karena dalam sistem informasi desa jika masih menggunakan sistem manual maka sistem tersebut seiring perkembangan zaman akan semakin lambat. Maka dari itu OpenSID dibuat, sehingga dapat melancarkan Sistem Informasi Desa.

C. Maksud dan Tujuan
Agar dapat melakukan installasi OpenSID di Linux.

D. Alat & Bahan

•  Web Server ( Apache2, MySQL, PHP ). Belajar Sekarang
•  unzip
• OpenSID 18.07. Download Sekarang

D. Waktu Pelaksanaan

• 15 Menit.
  

E. Pembahasan

OpenSID 18.07 - Rilis ini menambahkan modul Inventaris sesuai dengan PERMENDAGRI NO 4 THN 2007. Selain itu, rilis ini juga berisi perbaikan lain yang diminta oleh komunitas SID.

Terima kasih pada Diego Dafma, Yusup Hambali dan tim programmer dari Diskominfo Kab Bandung, yang terus berkontribusi. Juga terima kasih pada https://github.com/LIQRGV yang mulai kontribusi.

Lengkapnya, isi rilis versi 18.07:

1. Tampilkan logo OpenSID sebagai lambang desa default.
2. #1037: Tambahkan validasi nama penduduk hanya boleh berisi karakter alpha, spasi atau tanda petik. [bug-fix]
3. #1037: Perbaiki tampilkan pilihan penduduk program bantuan di mana nama penduduk berisi tanda kutip. [bug-fix]
4. #860: Sekarang umur penduduk dengan status dasar mati atau hilang yang ditampilkan di halaman Penduduk adalah umur pada tanggal peristiwa. [bug-fix]
5. #972: Ubah judul tombol mengunduh surat di Cetak Surat > Arsip Layanan dari Cetak menjadi Surat. [bug-fix]
6. #935: Form surat keterangan kelahiran sekarang menampilkan hari lahir yang benar bagi data kelahiran dari database penduduk. [bug-fix]
7. #1033: Sekarang lampiran F-1.15 untuk surat permohonan kartu keluarga menampilkan jumlah dan daftar anggota keluarga tidak termasuk kepala keluarga. Di form, pemohon dibatasi pada kepala keluarga saja. [bug-fix]
8. #1033: Sekarang lampiran F-1.16 untuk surat permohonan perubahan kartu keluarga menampilkan jumlah dan daftar anggota keluarga tidak termasuk kepala keluarga. Di form, pemohon dibatasi pada kepala keluarga saja. [bug-fix]
9. Di SID Home > Identitas Desa, sekarang peta lokasi Kantor Desa bisa diubah dan disimpan tanpa mempengaruhi perubahan data identitas desa. [bug-fix]
10. Di SID Home > Identitas Desa, sekarang peta Wilayah Desa bisa diubah dan disimpan tanpa mempengaruhi perubahan data identitas desa. [bug-fix]
11. Di Penduduk > Penduduk > Ubah data penduduk, sekarang peta lokasi penduduk bisa diubah dan disimpan tanpa mempengaruhi perubahan data penduduk lainnya. [bug-fix]
12. #665: Sekarang mencentang checkbox Desa di Peta akan menampilkan lokasi kantor desa dan wilayah desa. Penampilan peta di widget Wilayah Desa dan Kantor Desa diseragamkan dengan tampilan di Peta.
13. #1035: Sekarang data persil pemilik desa dan luar desa bisa ditambah dan diubah tanpa error. [bug-fix]
14. Tambah modul Inventaris berdasarkan PERMENDAGRI NO 4 THN 2007.
15. #1067: Sekarang Log Penduduk tidak lagi menampilkan data ganda untuk penduduk pecah KK atau penduduk baru yang status dasarnya diubah menjadi mati/hilang/pindah. [bug-fix]
16. #1114: Perbaiki fitur cari dan filter aktif/tidak-aktif di Pengaturan > Manajemen Modul. [bug-fix]
17. #143: Sekarang Laporan Kependudukan Bulanan menampilkan jumlah penduduk WNA dengan benar. [bug-fix]
18. #1031: Sekarang bisa cari Keluarga berdasarkan nomor KK.
19. #1032: Sekarang jumlah surat juga ditampilkan di Arsip Layanan > Grafik Surat Keluar.
20. #1121: Sederhanakan paginasi artikel dan galeri di modul Web untuk mengatasi masalah di mana ada banyak artikel atau gambar galeri.

Apabila meng-upgrade (yaitu bukan install baru) dari versi SEBELUM versi 18.07, struktur database dan/atau folder desa perlu diubah dengan menjalankan fitur Database > Migrasi DB. Fitur migrasi ini melakukan perubahan database dan/atau folder desa yang diperlukan.

Perhatian: Modul Sekretariat > Inventaris Desa akan dihilangkan pada rilis September 2018 karena telah diganti dengan modul Inventaris baru. Pastikan memindahkan semua data ke format Inventaris baru sebelum rilis tersebut.

F. Langkah Kerja

• Pastikan kalian sudah membuat webserver dan sudah mendownload OpenSID 18.07. Lalu buka Terminal masuk sebagai Root. Lalu masuk ke Folder tempat file Download-an OpenSID.

mukti@911-X453MA:~$ su
Password:
root@911-X453MA:/home/mukti# cd Downloads/Compressed/
root@911-X453MA:/home/mukti/Downloads/Compressed# ls
firefox                    OpenSID-18.07.zip
root@911-X453MA:/home/mukti/Downloads/Compressed# 

•  Lalu ekstrak file OpenSID-18.07 dan pilih destination ekstrakannya. lalu ubah nama dari file ekstrakan tadi menjadi nama desa, contoh : desamaron

root@911-X453MA:/home/mukti/Downloads/Compressed# unzip OpenSID-18.07.zip -d /var/www/html/
root@911-X453MA:/home/mukti/Downloads/Compressed# cd /var/www/html
root@911-X453MA:/var/www/html/# mv OpenSID-18.07/ desamaron/

•  Setelah itu ubah permession akses dari folder tersebut lalu ubah juga user permission akses. Cek apakah sudah berubah jika sudah masuk ke folder tadi lalu lihat isinya. ubah nama dari desa-contoh menjadi desa. Lalu buka file database.php pada folder tadi lalu config. setelah itu scroll kebawah lalu ubah sesuai konfigurasi mysql server yang telah ada lalu pada $db['default']['database'] = 'opensid'; ubah sesuai yang diinginkan contoh $db['default']['database'] = 'desamaron';

root@911-X453MA:/var/www/html# ls -l
drw-r--r-- 3 root root  4096 Jun   13:32 desamaron-rwxrwxrwx 1 root root 10918 Jun 28 23:27 index.html
root@911-X453MA:/var/www/html# chmod -R 777 desamaron/
root@911-X453MA:/var/www/html# chown -R www-data:www-data desamaron/
root@911-X453MA:/var/www/html# ls -l
drwxrwxrwx 3 www-data www-data  4096 Jul  4 13:32 desamaron-rwxrwxrwx 1 root     root     10918 Jun 28 23:27 index.html
root@911-X453MA:/var/www/html# /desamaron/desa/config/database.php 

• Lalu buat database baru dengan nama sesuai konfigurasi file database.php tadi. Contoh : desamaron. Setelah itu import-kan file contoh_data_awal_20180628.sql  jika kalian masih baru menginstall OpenSID jika sudah pernah menginstall OpenSID sebelumnya kalian backup dulu file dari database karena perubahan pada OpenSID 18.07 berada pada model database. Caranya seperti berikut :

root@911-X453MA:/# mysql -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 7
Server version: 5.7.22-0ubuntu18.04.1 (Ubuntu)
Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| phpmyadmin         |
| sys                |
+--------------------+
5 rows in set (0.05 sec)
mysql> CREATE DATABASE desamaron;
Query OK, 1 row affected (0.00 sec)
mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| desamaron          |
| mysql              |
| performance_schema |
| phpmyadmin         |
| sys                |
+--------------------+
6 rows in set (0.00 sec)
mysql> exit
Bye
root@911-X453MA:/# mysql -u root -p desamaron1 < /var/www/html/desamaron/OpenSID-18.07/contoh_data_awal_20180628.sql
Enter password: 

• Cek pada Browser apakah sudah bisa dibuka jika sudah maka tampilannya akan seperti berikut :

G. Hasil Yang Didapat

• Dapat Meng-install OpenSID di WebServer Linux 

H. Kesimpulan
Jadi installasi OpenSID dapat dilakukan di Terminal dan dalam penginstallanya tidak telalu rumit.


I. Referensi

• opensid.info

OpenSID | #1 | Mukti911

 A. Pendahuluan

OpenSID adalah Sistem Informasi Desa (SID) yang sengaja dirancang supaya terbuka dan dapat dikembangkan bersama-sama oleh komunitas peduli SID. OpenSID awalnya dikembangkan menggunakan SID dari Combine Resource Institution (CRI). SID CRI terakhir yang telah digabung dengan OpenSID adalah SID 3.10 yang diperoleh dari teman-teman di https://www.facebook.com/groups/OpenSID pada tanggal 15 Pebruari 2017. Untuk melihat perbedaan antara OpenSID dan SID-CRI, sila klik Tanya-Jawab OpenSID vs SID-CRI.

B. Latar Belakang

Karena dalam sistem informasi desa jika masih menggunakan sistem manual maka sistem tersebut seiring perkembangan zaman akan semakin lambat. Maka dari itu OpenSID dibuat, sehingga dapat melancarkan Sistem Informasi Desa.

C. Maksud dan Tujuan
Agar dapat nengetahui apa itu OpenSID.

D. Pembahasan

OpenSID adalah Sistem Informasi Desa (SID) yang sengaja dirancang supaya terbuka dan dapat dikembangkan bersama-sama oleh komunitas peduli SID. OpenSID awalnya dikembangkan menggunakan SID dari Combine Resource Institution (CRI). SID CRI terakhir yang telah digabung dengan OpenSID adalah SID 3.10 yang diperoleh dari teman-teman di https://www.facebook.com/groups/OpenSID pada tanggal 15 Pebruari 2017. Untuk melihat perbedaan antara OpenSID dan SID-CRI, sila klik Tanya-Jawab OpenSID vs SID-CRI.

OpenSID memberikan panduan dalam bentuk wiki kalian bisa akses di link berikut : https://github.com/OpenSID/OpenSID/wiki/Petunjuk-Memakai-Panduan-OpenSID . OpenSID memberikan panduan yang sifatnya dinamis jadi Wiki dari OpenSID dapat berubah dan dilengkapi kapan saja oleh pegiat OpenSID dan berdasarkan masukan dari Komunitas OpenSID.

Dalam konteks OpenSID, yang dimaksud dengan Sistem Informasi Desa adalah proses dan aplikasi yang:

• Berbasis komputer
• Mengelola informasi kantor desa
• Mendukung fungsi dan tugas kantor desa, termasuk administrasi kependudukan, perencanaan, pelaporan, pengelolaan asset, pengelolaan anggaran, layanan publik, dsbnya

Dengan pengertian ini, jenis aplikasi yang tercakup dalam "Sistem Informasi Desa" suatu desa bisa saja lebih dari satu: misalnya OpenSID untuk pengelolaan data kependudukan, SISKEUDES untuk mengelola keuangan desa, aplikasi lain untuk mengelola BUMDes, dsbnya.

Peran dan Manfaat seperti apakah yang akan didapcat dari OpenSID.

1. Kantor Desa lebih efisien
2. Kantor Desa lebih efektif
3. Pemerintahan Desa lebih transparan
4. Pemerintahan Desa lebih akuntabel
5. Layanan Publik lebih baik
6. Warga mendapatkan akses lebih baik pada informasi desa
7. Warga dapat berpartisipasi lebih aktif dalam pembangunan desa.

 E. Kesimpulan
Jadi OpenSID adalah sebuah CMS yang digunakan untuk mengelola desa.

F. Referensi

• https://github.com/OpenSID/OpenSID/wiki/Peran-dan-Manfaat-Sistem-Informasi-Desa

Cara Mengatasi Error PHP tidak muncul di Browser pada Web Server ( Linux ) | #Fix-1 | Mukti911

 A. Pendahuluan

Oke dari kemarin ada beberapa temen saya yang mendapatkan masalah dimana saat ia menjalankan web servernya lalu membuka file php. Nah dari sini masalahnya setelah ia membuka file itu ternyata file itu kosong / tidak bisa dibuka. tapi setelah dicek file itu ternyata ada isinya tetapi ada kesalahan di koding PHP-nya dan setelah file diperbaiki file bisa dibuka di browser. Nah maka dari itu aku akan share cara menangani agar error PHP bisa terlihat di Browser.

B. Latar Belakang
Karena mungkin banyak dari kalian yang belum bisa atau ingin mengetahui bagaimana cara mengatasi error yang tidak muncul

C. Maksud dan Tujuan
Agar jika ada error pada kodingan PHP dapat muncul di  browser

D. Langkah Kerja

• Buka Terminal lalu masuk sebagai root. Setelah itu buka file php.ini caranya seperti berikut :

mukti@911-X453MA:~$ su
Password:
root@911-X453MA:/home/mukti# cd /etc/php/7.2/apache2/
root@911-X453MA:/etc/php/7.2/apache2# ls
conf.d  php.ini
root@911-X453MA:/etc/php/7.2/apache2# nano php.ini

•  Setelah terbuka cari display_error, jika sudah ketemu ubah dari Off ke On. Cara cari tekan CTRL + W lalu ketikan diplay_error.

E. Hasil Yang Didapat

• Error pada PHP dapat terlihat di browser.

F. Kesimpulan

Jadi jika error tidak muncul kemungkinan kalian bisa cek file php.ini nya dulu.

G. Referensi

• 
  

Cara Membangun Web Server (Apache, PHP, MySQL, phpMyAdmin ) di Debian Server | Mukti911

A. Pendahuluan

Pernah dengar isltilah Web Server, Lalu apa yang pertama kali terlintas di pikiranmu mengenai web server?. Maka dari itu, ayo sama sama bahas mengenai apa sebenarnya  web server. Beberapa orang mungkin, membayangkan web server sebagai sebuah server fisik penyimpan website. Namun, anggapan tersebut kurang sepenuhnya benar.

B. Latar Belakang
Karena web server dapat menjadi media penyimpanan sebuah halaman web.

C. Maksud dan Tujuan

Agar dapat membangun webserver.

D. Alat & Bahan

• Koneksi Internet / Repository Lokal
• Paket Server ( Apache2, PHP, MySQL, phpMyAdmin )

G. Pembahasan

Mungkin ada yang bilang bahwa webserver merupakan salah satu kebutuhan yang sangat penting digunakan oleh user untuk website yang mempunyai kapasitas penyimpanan yang besar dan juga akses yang cepat untuk trafik yang besar dalam mencegah terjadinya down pada suatu website atau aplikasi. Lalu apa itu Web Server adalah sebuah software yang memberikan layanan berbasis data dan berfungsi menerima permintaan dari HTTP ( 80 ) atau HTTPS ( 443 ) pada klien yang dikenal dan biasanya kita kenal dengan nama web browser (Mozilla Firefox, Google Chrome) dan untuk mengirimkan kembali yang hasilnya dalam bentuk beberapa halaman web dan pada umumnya akan berbentuk dokumen HTML.

Lalu apa fungsi sebenarnya dari Web Server Fungsi utama Web server adalah untuk melakukan atau akan mentransfer berkas permintaan pengguna melalui protokol komunikasi yang telah ditentukan sedemikian rupa. halaman web yang diminta terdiri dari berkas teks, video, gambar, file dan banyak lagi. pemanfaatan web server berfungsi untuk mentransfer seluruh aspek pemberkasan dalam sebuah halaman web termasuk yang di dalam berupa teks, video, gambar dan banyak lagi.
Lalu apa itu Apache, Apache sendiri merupakan contoh webserver yang paling banyak dipergunakan di Internet. Program ini pertama kali didesain untuk sistem operasi lingkungan UNIX. Apache mempunyai program pendukung yang cukup banyak. Hal ini memberikan layanan yang cukup lengkap bagi penggunanya. Beberapa dukungan Apache :

• Kontrol Akses, Kontrol ini dapat dijalankan berdasarkan nama host atau nomor IP CGI (Common Gateway Interface) Yang paling terkenal untuk digunakan adalah perl (Practical Extraction and Report Language), didukung oleh Apache dengan menempatkannya sebagai modul (mod_perl) PHP (Personal Home Page/PHP Hypertext Processor)
• Program dengan metode semacam CGI, yang memproses teks dan bekerja di server. Apache mendukung PHP dengan menempatkannya sebagai salah satu modulnya (mod_php). Hal ini membuat kinerja PHP menjadi lebih baik
• SSI (Server Side Includes)

Web Server Apache mempunyai kelebihan dari beberapa pertimbangan di atas :

•  Apache termasuk dalam kategori freeware.
• Apache mudah sekali proses instalasinya.
• Mampu beroperasi pada berbagai platform sistem operasi.
• Mudah mengatur konfigurasinya. Apache mempunyai hanya empat file konfigurasi.
• Mudah dalam menambahkan peripheral lainnya ke dalam platform web servernya.

Lalu kenapa dibutuhkan PHP di Web Server, Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan website statis, dimana konten dan halaman web bersifat tetap.

Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-ubah sesuai input dari user, memproses form, dll.

Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena fitur inilah PHP disebut juga sebagai Scripting Language atau bahasa pemrograman script.

Lalu dibutuhkan MySQL, Karena MySQL digunakan sebagai basis pengolahan ata.MySQL adalah salah satu aplikasi RDBMS (Relational Database Management System). Pengertian sederhana RDBMS adalah: aplikasi database yang menggunakan prinsip relasional. MySQL bersifat gratis dan open source. Artinya setiap orang boleh menggunakan dan mengembangkan aplikasi ini. Namun walaupun gratis, MySQL di support oleh ribuan programmer dari seluruh dunia, dan merupakan sebuah aplikasi RDBMS yang lengkap, cepat, dan reliabel.

Sebelumnya sudah sempat dibahas bahwa phpMyAdmin merupakan salah satu software penting dalam pengelolaan database dengan menggunakan MySQL (Bahasa SQL). Sesuai dengan namanya phpMyAdmin ini ditulis dalam Bahasa pemrograman PHP. Sempat dibahas juga bahwa phpMyAdmin khusus menangani pengelolaan database dalam lingkup website (World Wide Web). Sama halnya dengan MySQL, software yang rilis perdana pada tahu 1998 ini juga berlisensi GNU (General Public License) dan sudah mensupport mutilingual (multi bahasa) dalam user interfacenya.

Lalu apa hubungan paket paket teserbut dalam membangun sebuah web server, hubungan dari mereka untuk membangun web server adalah, Apache sebagai wadah dan penerima request website, lalu MySQL digunakan untuk pengolahan data dari website, lalu gunanya PHP adalah sebagai penghubung antara Apache dan MySQL. bagaimana dengan phpMyAdmin, phpMyAdmin adalah sebagai aplikasi untuk mempermudah pengolahan MySQL.

F. Langkah Kerja

• Pertama pastikan kalian sudah tekoneksi dengan internet / repository lokal. Lalu buka Terminal masuk sebagai Root. Namun untuk menginstall Apache, MySQL, PHP dan phpMyAdmin tidaklah sulit. Ikuti langkah-langkahnya seperti berikut. Perbarui Paket Perbarui daftar paket di sistem Kalian sehingga Kalian dapat memiliki versi Apache Apache, PHP, MySql dan phpMyAdmin terbaru.

apt-get update

• Instalasi Apache, Instal Apache melalui perintah berikut:

apt-get install apache2

• Memeriksa Instalasi Apache yang berhasil, kalian dapat memeriksa apakah Apache telah terinstal dengan mengetikkan alamat IP server kalian http: // your-ip-address atau http://localhost jika Anda melakukannya di server lokal. Akan tampil seperti di bawah ini jika berhasil:

•  Instalasi MySQL, Install MySQL melalui perintah berikut:

apt-get install mysql-server.

• Anda juga akan diminta memasukkan password root MySql yang diinginkan. Meski bersifat opsional, jangan tinggalkan saja. Kata sandi default akun root kosong.

•  Memeriksa Instalasi MySql jika Berhasi, Ketik perintah berikut:

mysql -u root -p

•  Jika MySql telah berhasil diinstal, Kalian harus diminta memasukkan kata sandi. Masukkan kata sandi yang Kalian pilih pada langkah di atas. Kalian harus melihat prompt MySql seperti ini.

mysql>

• Di sini Anda bisa menjalankan query mysql, membuat tabel dll. Sekarang untuk kembali, keluar dari MySql dengan mengetikkan perintah.

exit

• Instalasi PHP dengan Ekstensi Biasa Digunakan, Instal PHP dan ekstensi yang umum digunakan:

apt-get install php libapache2-mod-php php-mysql php-curl php-gd php-json php-mcrypt php-zip

Pada perintah di atas selain PHP, ekstensi PHP berikut juga diinstal:

1. MySql Extension: Untuk menggunakan fungsi MySql yang tersedia di PHP
2. Curl Extension: Untuk membuat permintaan CURL melalui PHP, biasanya digunakan dalam mengimplementasikan panggilan API layanan web
3. GD Extensio: Untuk mengaktifkan perpustakaan GD. PHP menggunakan library GD untuk tugas manipulasi gambar
4. JSON Extension: Untuk memecahkan kode dan mengkodekan JSON melalui PHP
5. Mcrypt Extension: Berisi berbagai fungsi enkripsi
6. Zip Extension: Zip dan unzip melalui PHP

PHP menawarkan lebih banyak ekstensi, namun ini adalah yang paling umum digunakan. Jika diperlukan, kalian bisa memasang ekstensi nanti. Perhatikan juga bahwa libapache2-mod-php adalah Apache Module untuk menjalankan PHP. Modul ini menyediakan koneksi antara Apache dan PHP.

• Memeriksa Instalasi PHP yang Berhasis, Ketik perintah berikut:

 echo "<? php phpinfo ();?>" | sudo tee /var/www/html/phpinfo.php

Ini akan membuat file phpinfo.php di direktori root. Ketik url ini di browser http://your-ip-address/phpinfo.php atau http://localhost/phpinfo.php jika menginstal secara lokal. Kalian akan melihat halaman seperti ini, menunjukkan konfigurasi PHP Kalian.

• Instalasi phpMyAdmin, Instal phpMyAdmin melalui commannd:

sudo apt-get install phpmyadmin

• Kalian akan diminta untuk memilih jenis server web. Pilihan defaultnya adalah apache2. Tekan tombol spasi untuk memilih. Sekarang tekan tombol Tab untuk menyorot tombol Ok, kemudian tekan tombol enter.

• Kalian kemudian akan ditanya apakah akan mengkonfigurasi database untuk phpmyadmin dengan dbconfig-common. Pilih Yes dan klik enter.

 

• Kalian kemudian akan diminta memasukkan password akun root MySql. Masukkan password yang anda ketik saat menginstall MySql. Gunakan tombol Tab untuk menyorot tombol Ok dan tekan enter.
• Lakukan hal yang sama saat meminta konfirmasi password.

• Memeriksa Instalasi phpMyAdmin yang berhasil, Buka url http://your-ip-address/phpmyadmin atau http://localhost/phpmyadmin di browser Anda. Jika phpMyAdmin berhasil diinstal, Anda harus melihat halaman login phpMyAdmin standar. Ketik root sebagai username, dan kata kunci MySql yang anda pilih tadi untuk mengakses database.
• Aktifkan Apache Rewrite Module, Aktifkan Modul Rewrite di Apache, agar aplikasi Anda bisa memanfaatkan URL cantik seo-friendly, seperti http://website.com/posts/12/post-on-ubuntu/ (bukan http://website. com? post_id = 12). Kemungkinan besar Anda akan membutuhkan URL cantik di masa depan, lebih baik aktifkan sekarang juga.

a2enmod rewrite

• Sekarang restart Apache agar perubahan ini menjadi live.

service apache2 restart

E. Hasil Yang Didapat

• Dapat Membangun Web Server

E. Kesimpulan
Jadi dalam pembuatan web server tidak lah sulit namun hanya membutuhkan koneksi internet ataupun repository lokal.

F. Referensi

• https://idcloudhost.com
• https://www.nesabamedia.com
• https://bukainfo.com
• https://www.duniailkom.com
• https://www.nesabamedia.com

LAMPP atau XAMPP

A. Pendahuluan

Mungkin banyak dari kalian yang sudah tahu mengenai web. Namun beberapa orang belum tahu dimana tempat simpannya sebuah halaman web. Halaman web disimpan dalam sebuah peragnkat server yaitu web server. Ada beberapa aplikasi web server yang mungkin pernah kalian gunakan. Contohnya saja produk dari Bitnami yaitu XAMPP dan LAMP. Namun terkadang tanpa disadari kita sering lupa atau bahkan tidak tau Apa sih XAMPP dan LAMP itu ? Darimana sih asal-usul XAMPP dan LAMP itu ? dan Apa sih yang bisa dilakukan dengan XAMPP dan LAMP?. 

B. Latar Belakang

Karena XAMPP dan LAMPP adalah Aplikasi Web Server yang paling populer. 

C. Maksud dan Tujuan

Agar dapat menggunakan web server sesuai kebutuhan yang di inginkan. 

D. Pembahasan

XAMPP adalah perangkat lunak gratis yang mendukung banyak sistem operasi yang merupakan kompilasi dari beberapa program aplikasi. XAMPP adalah aplikasi web server yang dapat berjalan dengan kompilasi program yang XAMPP gabungkan.  Lalu dari mana penyebutan XAMPP, XAMPP sendiri adalah singkatan dari masing masing program yang dikompilasikan yaitu X yang dimana artinya dapat dijalankan dibanyak sistem operasi, A adalah Apache yang merupakan aplikasi webservernya, M adalah yang artinya MySQL yang merupakan database server. P yaitu PHP dimana merupakan bahasa pemrograman yang dapat penjembatani antara Apache dan MySQL. P adalah Perl adalah bahasa pemrograman yang dapat digunakan untuk segala keperluan. Aplikasi XAMPP ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis.  XAMPP dikembangkan dari sebuah tim proyek bernama Apache Friends, yang terdiri dari Tim Inti (Core Team), Tim Pengembang (Development Team) & Tim Dukungan (Support Team).

Istilah software yang satu ini mungkin terdengar masih awam di telinga masyarakat pada umumnya namun bagi anda yang menekuni bidang IT khususnya developer web pasti sudah cukup familiar. Tidak dapat dipungkiri bahwa website sudah menjadi hal yang paling vital mengingat kemajuan trend teknologi berbasis internet saat ini. Oleh karena itu pastinya kegiatan membuat dan mengelola web tentunya menjadi sangat diminati oleh banyak orang. Salah satu software penting yang harus dimiliki oleh para developer web pemula adalah XAMPP. Disadari atau tidak meskipun banyak yang sudah lama menggunakan software XAMPP ini namun kurang paham mengenai definisi dan cara kerjanya.

Server HTTP Apache atau Server Web/WWW Apache adalah server web yang dapat dijalankan di banyak sistem operasi seperti (Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.

Asal kata dari XAMPP

XAMPP adalah singkatan yang masing-masing hurufnya adalah:

• X: Program ini dapat dijalankan dibanyak sistem operasi, seperti Windows, Linux, Mac OS, dan Solaris.
• A: Apache, merupakan aplikasi web server. Tugas utama Apache adalah menghasilkan halaman web yang benar kepada user berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. jika diperlukan juga berdasarkan kode PHP yang dituliskan,maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan.
• M: MySQL, merupakan aplikasi database server. Perkembangannya disebut SQL yang merupakan kepanjangan dari Structured Query Language. SQL merupakan bahasa terstruktur yang digunakan untuk mengolah database. MySQL dapat digunakan untuk membuat dan mengelola database beserta isinya. Kita dapat memanfaatkan MySQL untuk menambahkan, mengubah, dan menghapus data yang berada dalam database.
• P: PHP, bahasa pemrograman web. Bahasa pemrograman PHP merupakan bahasa pemrograman untuk membuat web yang bersifat server-side scripting. PHP memungkinkan kita untuk membuat halaman web yang bersifat dinamis. Sistem manajemen basis data yang sering digunakan bersama PHP adalah MySQl. namun PHP juga mendukung sistem manajement database Oracle, Microsoft Access, Interbase, d-base, PostgreSQL, dan sebagainya.
• P: Perl, bahasa pemrograman untuk segala keperluan, dikembangkan pertama kali oleh Larry Wall di mesin Unix. Perl dirilis pertama kali pada tanggal 18 Desember 1987 ditandai dengan keluarnya Perl 1. Pada versi-versi selanjutnya, Perl tersedia pula untuk berbagai sistem operasi varian Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti DOS, Windows,PowerPC, BeOS, VMS, EBCDIC, dan PocketPC.

Dalam aplikasi XAMPP terdapat bagian bagian yang penting yang umumnya digunakan saat mengunakan XAMPP :

• htdocs di XAMPP digunakan sebagai folder tempat meletakkan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML dan skrip lain.

• phpMyAdmin adalah tempat untuk mengelola data MySQL yang ada dikomputer. Untuk membukanya, buka browser lalu ketikkan alamat http://localhost/phpMyAdmin, maka akan muncul halaman phpMyAdmin. phpMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web). phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain).Pada dasarnya, mengelola basis data dengan MySQL harus dilakukan dengan cara mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu. Jika seseorang ingin membuat basis data (database), ketikkan baris perintah yang sesuai untuk membuat basis data. Jika seseorang menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut tentu saja sangat menyulitkan karena seseorang harus hafal dan mengetikkan perintahnya satu per satu.

• Control yang berfungsi untuk mengelola layanan (service) XAMPP. Seperti menghentikan (stop) layanan, ataupun memulai (start). atau Me-Restart layanan. 

Saat ini banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola basis data dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin, seseorang dapat membuat database, membuat tabel, mengisi data, dan lain-lain dengan mudah, tanpa harus menghafal baris perintahnya. phpMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada di komputer. Untuk membukanya, buka browser lalu ketikkan alamat http://localhost/phpmyadmin, maka akan muncul halaman phpMyAdmin. Di situ nantinya seseorang bisa membuat (create) basis data baru, dan mengelolanya.

Sebagai pengguna yang baik tentunya anda harus mengerti software seperti apa yang sedang digunakan. Hal ini juga semakin mengoptimalkan kinerja anda. Namun jangan khawatir karena dalam kesempatan ini kami akan mengulas lebih dalam mengenai software XAMPP beserta fungsi dan bagian – bagian yang tentunya harus anda pahami sebagai developer web yang bijak. Langsung saja ulasan lengkap mengenai pengertian XAMPP dapat anda simak dibawah ini :

Sesuai dengan namanya software yang satu ini merupakan gabungan dari beberapa software dengan fungsi yang sama yakni menunjang para pembuat web yang menginginkan adanya web server sendiri di PC atau laptopnya. Software ini juga berlisensi GNU dan dapat didownload secara gratis di internet mengingat peran vital yang dimilikinya terutama bagi pembuat web pemula.

Lalu apa Itu LAMP? jika diartikan dalam bahasa inggris yang pasti artinya lampu nampu LAMP dalam istilah komputer maupun web server adalah sebuah aplikasi web server. Jika diambil dari namanya sebenarnya LAMP adalah sebuah aplikasi web server yang dikemas dalam suatu tool yaitu LAMP. LAMP adalah singkatan dari Linux, Apache, MySQL dan Perl/PHP/Phyton yang merupakan sebuah paket perangkat lunak bebas yang digunakan untuk menjalankan sebuah aplikasi secara lengkap.

Dan LAMP yang mengambil inisial ini. Keduanya cocok untuk pembangunan situs web, termasuk konten dinamis dalam database terkait, dan apa popularitas tinggi. Dalam distribusi OS menjabat sebagai Linux, tetapi beberapa dari LAMP ini telah didistribusikan dalam satu set. software kelompok tersebut, atau tidak lebih murah karena merupakan perangkat lunak open source, karena biaya yang sangat rendah bahkan jika dibutuhkan, adalah mungkin untuk mengurangi biaya, memiliki keuntungan dari Ikaseru yang sangat disesuaikan. sisi lain, jaminan, seperti tidak ada dukungan, risiko besar di bidang manajemen operasional, pengembang, manajer operasi akan dibutuhkan keterampilan sesuai. LAPP Jika Anda ingin menggunakan PostgreSQL ke basis data melalui mesin scan, seperti LASP Jika Anda ingin menggunakan SQLite, kata-kata serupa akan melimpah untuk mengubah singkatan tergantung pada konfigurasi. Selain itu, ada WISA sebagai relatif, ini dimaksudkan untuk menggunakan OS Windows Sever, server Web IIS, database SQL Server, pemrograman ASP.NET, merujuk ke server Web yang dibangun dalam penawaran Microsoft untuk teknologi Anda.

Komponen-komponen dari LAMP :

• Linux – sistem operasi
• Apache HTTP Server – web server
• MariaDB atau MySQL – sistem basis data
• PHP atau Perl atau Python – bahasa pemrograman yang dipakai
• Beberapa perangkat lunak yang menggunakan konfigurasi LAMP antara lain MediaWiki dan Bugzilla.

Fungsi dari komponen-komponen LAMP adalah:

• Linux sebagai sistem operasi, Linux mewakili sistem operasi lainnya: FreeBSD, NetBSD, OpenBSD, dan Darwin/Mac OS X.
• Apache HTTP Server sebagai web server, Apache mewakili web server lain, seperti IIS dari Microsoft
• MySQL sebagai sistem basis data (database), MySQL mewakili sistem database lainnya, yaitu PostgreSQL.
• Perl atau PHP atau Pyton sebagai bahasa pemrograman yang digunakan, Perl/PHP/Pyton dapat mewakili pemrograman Ruby.

Kesamaan XAMPP dan LAMP :

• memiliki komponen MySQL, PHP, Perl, Apache.
• Dapat berjalan di berbagai platform.
• GUI service.
• Server Mandiri

Perbedaan XAMPP dan LAMP :

• XAMPP dapat berjalan di berbagai platform os. Sedangkan LAMP hanya dapat berjalan diberbagai platform linux. 

E. Langkah Kerja

1. Download aplikasi XAMPP / LAMP terbaru.
2. Jika di OS Windows double klik file XAMPP yang baru saja kalian download. Tapi jika mengunakan OS Basis Linux buka Teminal masuk sebagai root lalu masuk ke tempat file download tadi lalu mauskkan perintah " ./nama_file_download-an ", nanti selanjutnya akan muncul jendela “installer language” seperti di bawah ini:
3. Selanjutnya pilih bahasa. Pilih yang Bahasa Inggris (English). Klik OK.
4. Kadang pada proses ini muncul pesan error. Jika ada, abaikan saja dan lanjutkan dengan klik OK dan YES.
5. Berikutnya akan muncul jendela yang isinya meminta kaian menutup semua aplikasi yang sedang berjalan. Jika semua aplikasi sudah ditutup, maka klik tombol Next.
6. Selanjutnya kalina akan diminta untuk memilih aplikasi yang mau diinstal. Centang saja semua pilihan dan klik tombol Next.
7. Kemudian kalian akan diminta untuk menentukan lokasi folder penyimpanan file-file dan folder XAMPP / LAMP. Secara default akan diarahkan ke lokasi dfaule. Namun jika kalian ingin menyimpannya di folder lain bisa klik browse dan tentukan secara manual folder yang ingin digunakan. Jika sudah selesai, lanjutkan dan klik tombol Install.
8. Tunggu beberapa menit hingga proses intalasi selesai. Jika sudah muncul jendela seperti di bawah ini, klik tombol Finish untuk menyelesaikannya.
9. Berikutnya, akan muncul jendela dialog seperti gambar di bawah ini yang menanyakan Anda apakah mau langsung menjalankan aplikasi XAMPP / LAMP atau tidak. Jika ya, maka klik YES.
10. Bukalah aplikasi XAMPP / LAMP, bisa melalui Start Menu atau Desktop, dan klik icon XAMPP. Atau, jika kalian membukanya begitu proses instalasi selesai maka klik Yes seperti yang terlihat pada gambar di atas.
11. Setelah terbuka, silahkan klik tombol Start pada kolom Action sehingga tombol tersebut berubah menjadi Stop. Dengan mengklik tombol tersebut, artinya itulah aplikasi yang dijalankan. Biasanya jika saya menggunakan XAMPP / LAMP, yang saya start hanyalah aplikasi Apache dan MySQL, karena saya tidak memerlukan aplikasi seperti Filezilla, dan lain-lain.
12. Sekarang bukalah browser yang kaina punya, dan coba ketikkan http://localhost di address bar. Jika muncul tampilan seperti gambar di bawah ini, instalasi telah berhasil.
13. Selamat, akhirnya kalian berhasil menginstal aplikasi XAMPP / LAMP. 

E. Kesimpulan

Jadi XAMPP dan LAMP adalah aplikasi yang dikembangkan Bitnami yang digunakan sebagai web server XAMPP dapat dinstall diberbagai sistem operasi sedangkan LAMPP hanya dapat dijalankan di OS Linux.

F. Referensi

• http://www.dosenpendidikan.com
• https://www.nesabamedia.com
• https://www.tifkom.net
• http://www.pusatdesainweb.com
• https://www.niagahoster.co.id
• http://www.maniacms.web.id
• https://id.wikipedia.org
• http://ngadimin.com
• https://www.dicloud.id
• https://www.digitalocean.com

CMS ? Apa itu ? Megenal Content Management System | Mukti911

 A. Pendahuluan

CMS, Apa CMS itu ? Adalah sebuah pertanyaan yang aku tanyakan ketika aku belajar website. Pada saat itu aku masih belajar basic HTML, CSS & PHP. Dan mungkin ada dari kalian yang bertanya apa itu CMS. Ketika aku sudah tahu ternyata CMS adalah sebuah aplikasi Management untuk membuat website. Namun jika kalian ingin membuat website blog aku menyarankan belajar CMS.

B. Latar Belakang
Karena CMS adalah perangkat lunak yang digunakan untuk membangun sebuah website. Dimana CMS menawarkan fitur admin yang sangat berguna bagi kalian yang ingin memiliki website tanpa harus tau coding terlalu dalam.

C. Maksud dan Tujuan
Agar dapat mengetahui Apa sebanarnya CMS dan bagaimana penerapannya.

D. Pembahasan

CMS, CMS adalah singkatan dari Content Management System dimana digunakan untuk mengelola kreasi dan memodifikasi konten digital. Dan dalam beberapa CMS sudah dapat mendukung banyak pengguna dalam lingkungan dan dapat berkolaborasi. Fitur CMS kebanyakan sangat bervariasi . Namun biasanya CMS berupa perangkat lunak berbasis web, managemen format, edit history, dan kontrol, pengindekan, pencarian dan pengambilan.

Sedangkan CMS yang saya maksudkan adalah adalah WCMS. Apa itu WCMS? WCMS adalah singkatan dari Web Content Management System. Dimana CMS ini dirancang untuk mendukung pengelolaan konten halaman Web. dan CMS yang paling populer adalah WCMS. WCMS biasanya digunakan untuk mamagemen konten web mencakup teks dan grafik yang disematkan, foto, video, audio, peta, dan kode program (misalnya, untuk aplikasi) yang menampilkan konten atau berinteraksi dengan pengguna.

Jika diibaratkan CMS adalah aplikasi managemen konten bebabasis web yang ditawarkan dalam satu paket. Kehadiran CMS sebagai satu paket kode terstruktur yang lengkap menawarkan kemudahan bagi developer dalam membuat sebuah website. Membangun website dengan CMS cukup mudah. Tinggal mengikuti instruksi instalasi maka sistem akan berjalan. Orang awam yang tidak memiliki pengetahuan html dan pemrograman pun bisa membuat website dengan CMS. 

Dalam CMS biasanya terdapat dua komponen utama :

• CMA : Content Management Application, adalah antarmuka penguna front-end yang memungkinkan pengguna hanya dapat fitur terbatas dimana dalam hal INPUT, UPDATE, DELETE konten dari situs web tanpa campur tangan seorang webmaster.
• CDA : Content Delivery Application, dalah antarmukan untuk mengubah dan memperbarui situs web. 

Berdasarkan survey beberapa CMS yang sering digunakan adalah WordPress.WordPress digunakan oleh lebih dari 28% dari semua situs web di internet, dan oleh 59% dari semua situs web menggunakan sistem manajemen konten yang dikenal lainnya.

Salah satu perangkat lunak Content Management System yang dikenal luas yaitu MediaWiki, perangkat lunak yang dipakai di Wikipedia dan proyek-proyek sejenis.

Di CMS ada beberapa Fitur utama yang harus dimiliki sebuah CMS agar dapat disebut CMS :

• URL yang SEO
• Bantuan dalam pengintregrasian dan online
• Modularitas dan Ekstensibitas.
• Fungsinal pengguna dan grup.
• Dapat diubah template-nya sesuai keinginan.
• Ada Installernya dan dapat di Update
• Tedapat log yang terintregasi
• Dapat digunakan dalam berbagai perangkat kerja dan memiliki standart aksesbilitas.

Lantas apa yang menguntungkan dari mengunakan CMS :

• Tidak butuh pengunaan kode dari awal.
• Mudah untuk membuat tampilannya dan memiliki keseragaman.
• Memiliki Fitur Admin

Namun CMS juga memiliki kekurangan :

• Memiliki keterbatasan dalam kemampuan fungsionalitas. Semisal saat ingin membuat Tata letak, Aplikasi Web, dan masih banyak lagi. Namun yang paling sering yaitu tata letak.
• Peningkatan fungsi penulisan konten. Semisal kalian ingin membuat tool untuk pengambilan suatu data.

Berikut adalah bebrapa CMS yang aku rekomendasikan untuk kalian pakai :

• Blogger

Blogger adalah sebuah layanan publikasi blog yang dibuat oleh Pyra Labs dan diakuisisi oleh Google pada tahun 2003. Secara umum, blog yang dihost oleh Google berada di bawah subdomain blogspot.com . Blogger memperbolehkan penggunanya untuk mempublikasikan blognya di server lain, melalui FTP hingga 1 Mei 2010.

• Drupal 

Drupal juga satu CMS yang bagus, tetapi menurut saya cocok digunakan untuk level mahir. Drupal bebas digunakan untuk berbagai macam aplikasi web. Dan drupal juga membebaskan anda mempadupadankan dengan framework yang anda buat sendiri.

• WordPress 

WordPress merupakan sebuah platform CMS untuk blog dan website yang paling populer dan paling banyak digunakan oleh para pengembang website. Dengan wordpress anda bisa membuat sebuah web blog, web corporate, web portofolio, web online shop dengan beberapa tambahan plugin.

WordPress satu dari sekian CMS yang menurut saya “Easy to Use”. Yup, mudah digunakan. WordPress mudah digunakan bagi siapa saja, bagi level expert ataupun yang masih newbie (baru belajar web).

• MediaWiki

MediaWiki adalah sebuah paket perangkat lunak wiki yang menggunakan lisensi GNU General Public License. MediaWiki merupakan perangkat lunak yang dibuat secara khusus untuk Wikipedia dan proyek-proyek lainnya dari Yayasan Wikimedia, tetapi sekarang ini sudah digunakan secara luas.

• Joomla

Joomla juga salah satu yang terbaik dari sekian banyak CMS yang ada. Juga memiliki support dan dukungan komunitas yang baik. Joomla menyediakan berbagai macam ekstensi untuk menambah fungsional web site anda.

Bagi saya joomla sedikit rumit, tidak cocok bagi anda yang baru belajar membuat web. Joomla cocok untuk level menengah dan yang sudah sedikit tahu tentang web development.

Dalam hal pemanfaatan CMS dapat digunakan sebagai :

• Situs web perusahaan, bisnis, organisasi atau komunitas.
• Portal
• Galeri foto
• Aplikasi E-Commerce.
• Mengelola website pribadi/ blog.
• Situs web pembelajaran daring (Inggris: e-learning)

E. Kesimpulan
Jadi CMS adalah sebuah aplikasi sistem managemen konten yang biasanya berbasis web. dimama digunakan dalam administrasi web dinamis.

F. Referensi

• https://id.wikipedia.org
• https://gegeriyadi.com
• https://id.wikipedia.org
• http://www.rongrangreng.net
• https://www.datamaya.com
• http://blog.wonderlabs.io
• https://www.nesabamedia.com

Cara Buat List dan Tabel Sederhana HTML & CSS | Mukti911

 A. Pendahuluan

Dalam website biasanya terdapat tabel dan untuk memberikan beberap informasi. Nah kali ini aku akan share tentang cara membuat daftar dan tabel dengan coding html dan css. lalu perberdaan apa jika gunakan html saja dan html css.

B. Latar Belakang
Karena dalam website biasanya terdapat informasi berbentuk tabel atau daftar, jadi bagaimana cara membuatnya.

C. Maksud dan Tujuan
Agar dapat mengerti dan membuat tabel dan daftar di HTML CSS.

D. Alat & Bahan

• Aplikasi Editor Text ( Sublime Text )
• Web Browser ( Mozzila Firefox )

E. Waktu Pelaksanaan

•  5 -10 Menit

F. Pembahasan

Daftar dalam HTML, mungin kalian sudah tau apa itu daftar. Lalu bagaimana cara buat Daftar di HTML. Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>.

Properti tipe-daftar-gaya CSS digunakan untuk menentukan gaya penanda item daftar:

• disc Menetapkan penanda item daftar ke sebuah peluru (default)
• circle Mengatur penanda item daftar ke sebuah lingkaran
• square Setel penanda daftar item ke persegi
• none Item daftar tidak akan ditandai

Ordered List dimulai dengan tag <ol> diakhiri </ol>. Setiap item daftar dimulai dengan tag <li>. Item daftar akan ditandai dengan angka secara default.
Atribut type dari tag <ol>, mendefinisikan tipe penanda item daftar. Atribut tupe pada ol maupu li.

• type = "1" Item daftar akan diberi nomor (default)
• type = "A" Item daftar akan diberi nomor dengan huruf besar
• type = "a" Item daftar akan diberi nomor dengan huruf kecil
• type = "I" Item daftar akan diberi nomor dengan angka romawi huruf besar
• type = "i" Item daftar akan dinomori dengan angka romawi huruf kecil

HTML juga mendukung daftar deskripsi. Daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah. Tag <dl> mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag <dd> menggambarkan setiap istilah.

Secara default, daftar yang dipesan akan mulai menghitung dari 1. Jika kalin ingin mulai menghitung dari angka yang ditentukan, Anda dapat menggunakan atribut start.

Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.
Pembuatan Tabel

Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table. dan selanjutnya, kita dapat menambahkan baris ke dalam tabel tersebut dengan menggunakan elemen tr. Dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel. Pengisian data pada tabel dilakukan dengan menggunakan elemen td.

Meskipun terlihat sederhana, pembangunan tabel yang telah kita lakukan sampai sejauh ini masih merupakan sebuah tabel yang hanya menyimpan data. Data yang disimpan dan ditampilkan sendiri tidak memiliki strukutr, sehingga tidak terdapat organisasi data yang baik. Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan sangat membantu kita dalam mengembangkan aplikasi web, terutama jika tabel yang ingin dibangun harus bersifat dinamis.

Penambahan kolom dan baris tabel saja tidak cukup untuk mengorganisasikan data pada tabel, karena kita tidak dapat secara langsung mengetahui mana bagian dari tabel yang merupakan data, mana yang merupakan isi data, dan mana yang merupakan nilai agregasi dari data. Kita juga tidak dapat mengetahui tujuan atau deskripsi dari sebuah tabel dengan hanya baris dan kolom tabel. HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen caption, thead, tfoot, dan tbody. 

Berikut Contoh untuk memperjelas mengenai Table dan List :

Contoh List HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Mukti911</title>
</head>
<body>
<h3>Ini Daftar</h3>
<ul style="list-style-type: circle;">
    <li>Tutorial Mukti911_1</li>
    <li>Tutorial Mukti911_2
        <ol start="10" type="I">
            <li>Tutorial Mukti911_1</li>
            <li>Tutorial Mukti911_2</li>
            <li>Tutorial Mukti911_3</li>
        </ol>
    </li>
    <li>Tutorial Mukti911_3</li>
</ul>
<dl>
    <dt>Tutorial</dt>
    <dd>- Mukti911</dd>
    <dt>Tutorial</dt>
    <dd>- Mukti911</dd>
    <dt>Tutorial</dt>
    <dd>- Mukti911</dd>
</dl>
<h3>Ini Table</h3>
<table width="100%" border="1px" cellpadding="2" cellspacing="1" >
    <caption>Ini Caption Table</caption>
    <thead>
        <tr><th>Kelas</th><th>Nama</th><th>No. Absen</th></tr></thead>
    <tbody>
        <tr><td rowspan="2">XI -TKJ 1</td><td colspan="2">Colirul 1</td></tr>
        <tr><td>Marji</td><td>2</td></tr>
        <tr><td>XI -TKJ 3</td><td>Tampir</td><td>3</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="3">Akhir</td></tr>
    </tfoot>
</table>
</body>
</html>

Hasil :

 Penjelasan :

• <ul> Menentukan daftar yang tidak diurutkan 
• <ol> Mendefinisikan daftar yang dipesan 
• <li> Mendefinisikan sebuah item daftar 
• <dl> Mendefinisikan daftar deskripsi 
• <dt> Mendefinisikan istilah dalam daftar deskripsi 
• <dd> Menjelaskan istilah dalam daftar deskripsi
• style="list-style-type" Mengubah bentuk list pada <ul>
• start="" Mendefinisikan awal dari List <ol>
• type="I" Untuk mengubah bentuk list pada <ol> 
• <table> untuk mendefinisikan tabel
• <tr> untuk menentukan baris tabel
• <td> untuk menentukan data tabel 
• <th> untuk menentukan judul tabel 
• <caption> untuk menentukan keterangan tabel/li>
• colspan untuk membuat sel menjangkau banyak kolom
• rowspan untuk membuat sel menjangkau banyak baris
• cellpading untuk membuat sel memili jarak dari content
• border untuk garis tepi
• width untuk mengubah ukuran sebuah atribut
• thead untuk mendefinisikan header dari tabel
• tbody untuk mendefinisikan body dari tabel
• tfoot untuk mendefinisikan footer dari tabel

Jika mengunakan HTML saja kan terlihat monoton tidak terlihat bagus. Namun jika tidambah CSS seperti dibawah ini dimana CSS untuk tabel dan daftar maka akan terlihat lebih bagus:

Contoh :

<style type="text/css">
ul.q, dl { width: auto; background-color: #889; border-radius: 5px; padding: 5px; padding-left: 20px; color: #fff; }
ul.q li { padding: 5px; list-style-position: inside; list-style-type: katakana; }
ul.q li ol { background-color: #900; padding-left: 30px; }
ul.q li ol li { padding: 10px; list-style-type: georgian; }
dl { font-style: italic; }
dt { font-weight: bold; }
dd { font-style: normal;}
table { width: 100%; border-spacing: 0px; }
table caption { background-color: #899; padding: 10px; color: #fff; border-radius: 10px 10px 0px 0px; }
table tr { background-color: #810; }
table tr td, table tr th { border: 2px solid #890; color: #fff; padding: 5px; text-align: center; }
</style>

Penjelasan :

• width untuk mengatur lebar pada tag
• background-color untuk merubah warna pada background
• border-radius untuk membuat sudut pada tag menjadi tidak lancip
• padding untuk membuat jarak antara tag dan content
• color untuk merubah warna isi tag
• list-style-type untuk merubah tipe penomeran list
• list-style-position untuk merubah posisi content list
• font-style & font-weight untuk merubah style text
• border-spacing untuk membuat jarak antar border
• text-aligh untuk merubah bentuk paragraf pada text

Hasil :

G. Hasil Yang Didapat
Bisa membuat tabel dan list.

H. Kesimpulan
Jadi untuk membuat tabel dan daftar pada conding HTML mengunakan tag table dan ol / li. Tapi HTML saja tidak cukup agar tampilan lebih bagus gunakan CSS pula.

I. Referensi

• www.w3schools.com
• www.dumetschool.com
• www.malasngoding.com
• www.duniailkom.com
• www.wikipedia.org

CSS ? CSS3? | Mukti911

A. Pendahuluan

CSS merupakan singkatan dari ” Cascading Style Sheets “. sesuai dengan namanya CSS memiliki sifat ” style sheet language ” yang berarti bahasa pemrograman yang di gunakan untuk web design. CSS adalah bahasa pemrograman yang di gunakan untuk men-design sebuah halaman website. dalam mendesign halaman website CSS menggunakan penanda yang kita kenal dengan id dan class.

B. Latar Belakang
Karena css dapat mendukung agar website tempilannya menjadi lebih user friendly.

C. Maksud dan Tujuan
Agar dapat mengetahui apa itu CSS dan dasar CSS.

D. Pembahasan

Cascading Style Sheets (CSS) adalah bahasa gaya yang digunakan untuk menggambarkan / penyajian dokumen yang ditulis dalam bahasa markup seperti HTML. CSS adalah teknologi landasan World Wide Web, bersama HTML dan JavaScript.

CSS sebenarnya dirancang untuk pemishan presentasi dan konten tapi juga tata letak warna dan font. Dimana akses pada dapat diberikan lebih banyak fleksiblititas dan kontrol dalam spesifikasi tertentu. CSS dirancang agar memungkinkan beberapa halaman web untuk berbagi format dengan menentukan CSS yang relevan dalam file .css terpisah, dan mengurangi kompleksitas dan pengulangan dalam konten struktural.

Pemisahan format dan konten juga membuatnya layak untuk menyajikan halaman markup yang sama dalam gaya yang berbeda untuk metode rendering yang berbeda, seperti di layar, di cetak, dengan suara (melalui browser berbasis ucapan atau pembaca layar), dan pada berbasis Braille perangkat taktil. CSS juga memiliki aturan untuk pemformatan alternatif jika konten diakses pada perangkat seluler. Bukan hanya HTML saja tapi, bahasa markup lainnya mendukung penggunaan CSS, termasuk XHTML, XML polos, SVG, dan XUL. dalam mendesign halaman website CSS menggunakan penanda yang kita kenal dengan id dan class.

Fungsi dan Kegunaan CSS, CSS dapat digunakan mengubah text dan font serta mengubah warnanya. mengatur ukuran layout, lebar tinggi dan warna element, mengubah tampilan form, membuat halaman website yang responsive dan masih banyak lagi yang dapat di lakukan oleh css.

Css juga bisa color, margins digunakan untuk mengatur jarak pada luar element tertetu. mengatur warna atau gambar pada latar belakang bisa menggunakan background.

CSS memiliki sintaks yang sederhana dan menggunakan sejumlah kata kunci bahasa Inggris untuk menentukan nama-nama berbagai properti gaya Lembar gaya terdiri dari daftar aturan. Setiap aturan atau aturan-set terdiri dari satu atau lebih pemilih, dan blok deklarasi.







CSS3 adalah standar terbaru untuk bahasa CSS, yang sedang dikembangkan sejak 2005. Ini kompatibel dengan versi lama dari CSS, dan memiliki properti baru yang men-debug quirks sebelumnya dan memperluas fitur CSS2, dan bahkan mendapat beberapa kemampuan seperti JavaScript. CSS3 juga telah membahas sejumlah masalah pengembangan ponsel, akuntansi untuk desain responsif dan mengimbangi masalah yang disebabkan oleh ketidakcocokan Adobe Flash pada perangkat seluler. Dalam kombinasi dengan JavaScript, CSS3 memiliki banyak fungsi Flash sekarang - animasi- dan interaktivitas-bijaksana.

Berikut adalah tujuh hal utama yang membedakan CSS3 dari pendahulunya.

• Mentalitas seluler pertama, CSS3 secara inheren mendukung desain responsif, dan dilengkapi untuk menangani kueri media. Kueri media adalah panggilan yang dibuat oleh kode untuk menentukan perangkat dan layar ukuran apa yang dilihat oleh pengguna di situs. Ini menambah kemampuan desain responsif yang baru untuk repertoar CSS.
• Kode berbasis modul, Salah satu perkembangan terbesar adalah bahwa CSS3 dibagi menjadi "modul." Semua spesifikasi CSS lama telah bermigrasi ke versi baru dan dibagi menjadi bagian yang lebih kecil (dengan beberapa modul baru ditambahkan juga).
• Modul CSS3 lainnya termasuk: Pemilih: Pengembang dapat mengedit elemen berdasarkan nama, kelas, jenis, atribut, dan lainnya.
• Modul Box Model: Ini menjelaskan pendekatan untuk menciptakan konsistensi antara elemen HTML pada halaman, atau "kotak." Dengan menerapkan margin, batas, dan padding ke konten kotak, pengembang dapat membersihkan area di sekitar elemen, memberinya batas, dan lebih.
• Latar belakang dan batas: Dengan kontrol yang lebih baik terhadap perlakuan batas elemen dan latar belakang halaman, CSS3 juga memungkinkan sudut membulat pada kotak dan bayangan. Sebelum CSS3, latar belakang harus dicapai dengan gambar, yang ditambahkan ke ukuran file halaman dan waktu buka.
• Efek teks: CSS3 mencakup efek bayangan, overflow teks (yang menyembunyikan teks yang terlalu panjang untuk elemennya), melanggar kata (melanggar teks secara otomatis sehingga cocok dalam kotak), dan pembungkusan teks - semua hal yang menghemat banyak waktu pemformatan desainer .
• Dukungan font web memberi para desainer akses ke cara yang lebih dari sekadar font “web safe”. Sebelum CSS3, desainer hanya bisa menggunakan font “web safe” untuk 100 persen yakin bahwa font akan selalu menampilkan hal yang sama di semua mesin. Font aman web adalah font yang telah dipasang dan dikenali oleh setiap komputer. Jika seorang perancang menggunakan font umum seperti Times New Roman atau Arial, mereka dapat menjamin bahwa setiap pengguna akan melihat situs mereka seperti yang dimaksudkan. Namun, jika mereka ingin menggunakan font yang lebih jarang, jika tidak didukung oleh mesin pengguna, itu akan secara default kembali ke font web aman. Desainer sekarang dapat menjalankan font web di CSS3, font khusus seperti yang tersedia melalui Google Fonts dan Typecast. Font ini dapat diunduh ke server dan dijalankan melalui kode CSS, atau diakses langsung dari sumbernya melalui skrip, yang disebut tepat di dalam kode CSS. Ini telah membuka dunia kemungkinan bagi para desainer.
• Ini memungkinkan pengembangan lebih cepat, dan waktu muat lebih cepat Apa yang dulu membutuhkan gambar latar belakang, CSS3 sekarang dapat dicapai dengan peningkatan visual, yang menghemat waktu pengembang dalam produksi. Ini mengurangi panggilan dan waktu muat untuk banyak gambar karena semua efek ini dibangun ke dalam kode. Selain itu, halaman memuat lebih cepat berkat ukuran file yang lebih kecil secara keseluruhan dan lebih sedikit panggilan.
• Buat transformasi dan animasi 2D, 3D, dan transisi, Efek ini memungkinkan elemen pada halaman untuk memutar, tumbuh, menyusut, membalik, atau menerjemahkan ke warna yang berbeda. Untuk pertama kalinya, elemen yang dibuat dalam CSS dapat bergerak di layar tanpa memerlukan JavaScript atau kode Flash. Dengan transisi, elemen dapat mengubah ukuran dan warna dengan mulus. Anda dapat menetapkan durasi untuk transisi, mis. membuat tombol yang perlahan-lahan mengembang dan berubah warna saat Anda mengarahkan mouse ke atasnya.
• Warna dan efek gambar baru, CSS3 mendukung warna baru (RGBA, HSL, HSLA) dan warna gradien, dan memungkinkan penyesuaian untuk opasitas. Masalah besar lainnya adalah dukungannya terhadap sudut gambar yang membulat, sebuah efek yang membutuhkan banyak pemformatan dan kerja Photoshop untuk mencapainya sebelumnya.
• Box-sizing telah memperbaiki beberapa masalah penyelarasan yang menyebalkan Kotak-sizing memungkinkan pengembang untuk mendapatkan ukuran elemen yang tepat tanpa harus mengurangi dimensi untuk padding dan batas. Dengan properti kotak-sizing, padding dan batas termasuk dalam tinggi dan lebar. CSS adalah teknologi pengembangan web mendasar yang tetap menjadi inti dari bagaimana segala sesuatu di web terlihat, tetapi dengan evolusi terbaru, terbukti mampu jauh lebih banyak.

Selector, Dalam css selector sangatlah penting sekali dimana ia diguanakan untuk menyatakan bagian mana dari markup yang berlaku untuk gaya dengan mencocokan tag dan atribut di markup itu sendiri. Selector mungkin berlaku untuk beberapa hal berikut:

• semua elemen dari jenis tertentu, mis. header tingkat kedua h2
• elemen yang ditentukan oleh atribut, khususnya:
• id: pengenal unik dalam dokumen
• class: identifier yang dapat membubuhi keterangan beberapa elemen dalam dokumen
• elemen tergantung pada bagaimana mereka ditempatkan relatif terhadap orang lain di pohon dokumen.

Kelas dan ID bersifat case-sensitive, dimulai dengan huruf, dan dapat menyertakan karakter alfanumerik dan garis bawah. Kelas dapat berlaku untuk sejumlah contoh elemen apa pun. ID hanya dapat diterapkan ke satu elemen.

Pseudo-class digunakan dalam pemilih CSS untuk memungkinkan pemformatan berdasarkan informasi yang tidak terdapat dalam pohon dokumen. Salah satu contoh pseudo-class yang banyak digunakan adalah: hover, yang mengidentifikasi konten hanya ketika pengguna "menunjuk ke" elemen yang terlihat, biasanya dengan memegang kursor mouse di atasnya. Ini ditambahkan ke pemilih seperti dalam: hover atau #elementid: hover. Kelas pseudo mengklasifikasikan elemen dokumen, seperti: tautan atau: dikunjungi, sedangkan elemen pseudo membuat seleksi yang mungkin terdiri dari elemen parsial, seperti :: first-line atau :: first-letter.

Para pemilih dapat dikombinasikan dalam banyak cara untuk mencapai kekhususan dan fleksibilitas yang tinggi. [7] Beberapa pemilih dapat bergabung dalam daftar spasi untuk menentukan elemen berdasarkan lokasi, tipe elemen, id, kelas, atau kombinasi apa pun darinya. Urutan pemilih sangat penting. Sebagai contoh, div. MyClass {color: red;} berlaku untuk semua elemen class myClass yang berada di dalam div elemen, sedangkan. MyClass div {color: red;} berlaku untuk semua elemen div yang ada di elemen class myClass.

Cara Penggunaannya css dapat diakses / dibuat melalui beberapa cara :

• File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan kedalam HTML yang ingin kita design dengan CSS menggunakan syntax berikut ini. dengan tag link seperti di atas di gunakan untuk menghubungkan file html dengan fie css. syntax di atas di letakkan pada file html. pada atribut rel dan type di tag link di atas di gunakan untuk mende nisikan bahwa yang di panggil atau yang di hubungkan adalah fie Style sheet atau css. kemudian atribut href di gunakan untuk meletakkan letak file css.Contoh jika file style.css terletak satu folder atau direktori dengan file html yang di tambahkan syntax di atas.

<link rel="stylesheet" type="text/css" href="style.css" /><link rel="stylesheet" type="text/css" href="../style.css" />
<link rel="stylesheet" type="text/css" href="../assets/style.css" />

Sebenarnya ada beberapa metode untuk meng import-kan file CSS yaitu adalah :

• Inline CSS Style

Teknik penulisan CSS Inline Style, Cara pertama Belajar CSS Dasar Cara Penulisan CSS. Teknik penulisan syntax css dengan Inline style adalah teknik cara penulisan syntax CSS yang tidak memerlukan selector(id dan class) sehingga syntax CSS di letakkan atau langsung di sisipkan pada element HTML. syntax css di letakkan di dalam atribut style=””.

Contoh penulisan inline css style

Contoh Belajar CSS Dasar Cara Penulisan CSS. Untuk membuat contoh penulisan CSS dengan gaya inline caranya sediakan sebuah le HTML atau PHP. di sini saya menggunakan HTML. saya membuat sebuah file dengan nama index.html.

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Mukti911</title>
</head>
<body>
<p style="color: #927; font-size: 100px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Pada Coding diatas dapat dilihat pada elemet p memiliki atribut style="". Pada atribut itu terdapat color: #927; yang mana digunakan untuk merubah warna isi dari element p lalu font-size digunakan untuk merubah ukuran font text. Dan Jika file tersebut dibuka dibrowser maka akan terlihat seperti berikut :

• Internal CSS Style

Teknik penulisan syntax CSS dengan Internal style adalah teknik cara penulisan syntax css yang di

letakkan satu le dengan le html atau le php. syntax CSS di letakkan di dalam tag <style> dan di akhiri dengan tag </style>. biasa nya tag <style> .. </style> di letakkan pada bagian tag <head> pada HTML.

<!DOCTYPE html>
<html>
<head>
<title>Tutorial  Mukti911</title>
<style type="text/css">
#isi{ color: #999; }
  .wadah{ background: pink; padding: 5px; }
</style>
</head>
<body>
<div class="wadah"><p id="isi">Mukti911</a></p></div>
</body>
</html>

Perhatikan contoh penulisan internal css style di atas. syntax css di letakkan satu le dengan le html.

syntax css di letakkan di dalam tag <style>. syntax css padding berfungsi sebagai pengatur jarak pada sisi dalam element. pada contoh ini kita memberikan jarak sebesar 5px atau 5 pixel. css memanggil selector class dengan tanda titik ” . ” dan memanggil selector id dengan tanda pagar ” # “. saat di jalankan maka hasilnya sebagai berikut:

• External CSS Style

Teknik penulisan CSS External Style. Teknik penulisan Syntax CSS dengan External Style adalah teknik penulisan yang memisahkan le css dan html. penggunaan css yang baik adalah menggunakan teknik penulisan CSS ini karena kode program kita tidak akan berantakan karena syntax css di simpan pada le css. le css dan html di hubungkan menggunakan

<link rel="stylesheet" type="text/css" href="nama + format file css kalian">

Contohnya :
Index.html

<!DOCTYPE html>
<html>
<head>
<title>Tutorial  Mukti911</title>
</head>
<body>
<div class="wadah"><h1 id="isi">Mukti911</a></h1></div>
</body>
</html>

Style.css

.isi{ color: #999; }
 .wadah{ background: pink; padding: 5px; }

Hasilnya :

E. Kesimpulan
Jadi dapat dismpulkan CSS adalah sebuah bahasa pengayaan untuk membuat website lebih informatif .

F. Referensi

• www.tutorialspoint.com
• www.w3schools.com
• www.id.wikipedia.org
• www.duniailkom.com
• www.codepolitan.com