Home » Archives for September 2017

Cara Menginstall WordPress Offline pada Localhost di Komputer

data:post
0 Comments
Jumat, 08 September 2017

Berikut ini adalah langkah-langkah menginstall CMS Wordpress pada localhost PC atau Laptop :

A. Siapkan bahan-bahan yang dibutuhkan

1. XAMPP

Silahkan Download dan instal XAMPP bagi yang belum punya bisa download di Apache Friends.

Jika anda menggunakan sistem operasi Linux Ubuntu atau turunannya anda dapat menginstall nya sesuai dengan tutorial berikut : Cara Menginstall XAMPP di Ubuntu.

Setelah menginstall silahkan start Apache dan MySQL nya. 


Anda dapat mengetestnya dengan cara membuka localhost di web browser anda. jika muncul tampilan seperti pada gambar dibawah ini berarti proses instal telah berhasil.

2. Wordpress

Wordpress dapat di download official webnya Wordpress,org





B. Membuat Database & USER

Setelah anda menyiapkan bahan-bahan selanjutnya anda membutuhkan database sebagai penampung data pada wordpress yang akan anda install, dan User yang dapat mengakses database tersebut

1. Membuat Database

DataBase ini Berfungsi untuk menampung data-data yang akan disi kan pada wordpress yang anda install. Data tersebut misalkan User, Content, Tag, Category, dan lain sebagainya.
Dengan menggunakan wordpress kita telah dipermudah dengan hanya membuat database saja,  untuk table, dan field lain sebagainya akan diisikan secara otomatis ketika proses install.


Berikut ini adalah cara membuat database :
  • Buka XAMPP yang telah anda install kemudian pastikan MYSQL and Apache telah status running, masing-masing adalah penyedia layanan Database dan web server secara Local.


  • Selanjutnya, Buka Web Browser anda ketik :
    localhost/phpmyadmin




  • Kemudian klik New untuk membuat Database baru.

  • Silahkan isi Database name dan Collation nya.

    Untuk pengisian nama anda dapat mengisinya sesuai dengan yang anda inginkan, pada tutorial kali ini saya akan menggunakan nama database saya wordpress_db supaya mudah dipahami.

  • Selanjutnya untuk mengeksekusi proses pembuatan database silahkan klik Create.
  • Berikut ini adalah hasil dari pembuatan database wordpress_db

2. Membuat User

User yang akan kita buat adalah user yang memiliki hak akses untuk mengakses database melalui localhost, biasanya digunakan untuk membuat suatu koneksi antara database dengan aplikasi yang digunakan.

Jika anda ingin seolah-olah wordpress yang akan anda install aman, anda dapat membuat user untuk mengakses database tersebut. Berikut ini adalah cara membuat user pada database :

  • Membuat User baru, pertama buka tab user account pada localhost/phpmyadmin
  • Selanjutnya silahkan isi data berikut ini pada username, hostname, password, dan silahkan chack pada Global Privileges. Seperti pada gambar dibawah ini adalah contoh pengisian
  • Untuk username dan password silahkan isi sesuai dengan keinginan kalian, tidak harus sama dengan gambar. Username dan password yang digunakan menghubungkan wordpress dengan database

    Jika user berhasil ditambahkan maka akan muncul notifikasi seperti pada gambar di bawah ini,


    dan apabila anda membuka tab user account maka username yang telah berhasil anda tambahkan akan muncul pada user list.








3. Configurasi Wordpess

Melakukan Konfigurasi Antara wordpress yang akan anda install dengan database yang baru saja anda buat, hal berikut ini bertujuan supaya wordpress dapat mengakses data dari database melalui user tertentu. Berikut ini adalah langkah-langkah untuk menlakukan konfigurasi wordpress :

  • Pertama silahkan buka directory atau folder htdoc (letak folder bergantung dengan dimana anda menginstall XAMPP). Pada PC saya biasanya terletak di :
    C:\xampp\htdoc\
    Selanjutnya membuat folder baru contoh saya memberi nama folder tersebut "wordpress", nama folder ini akan menjadi alamat untuk memanggil worpress yang anda install.

  • Buka Wordpress yang telah anda download, kemudian ekstrak file Wordpress tersebut.

  • Setelah di ekstrak akan menghasilkan 1 buah folder yang berisi seperti pada gambar dibawah ini.

  • selanjutnya silahkan copy file hasil ekstrak dari Wordpress yang telah anda download ke folder c:\xampp\htdoc\wordpress (ke dalam folder baru yang telah anda buat).

  • Selanjutnya untuk melakukan konfigurasi menghubungkan antara Wordpress dengan database silahkan cari  file bernama wp-config-sampel.php yang berada di dalam folder Wordpress yang baru anda buat. ubah namanya menajdi wp-config.php.

  • Kemudian buka dengan text editor atau code editor,

  • Silahkan ganti database_name, username, password. sesuai dengan nama database, user, dan password yang telah anda buat sebelumnya.



    Apabila anda kesusahan dalam pembuatan user ada, anda dapat mengisi user dengan root dan passwordnya dikosongkan saja.

  • Pastikan anda mengisi dengan benar data diatas, jika konfigurasi telah berhasil maka anda sudah siap untuk melakukan langkah selanjutnya. Jika konfigurasi gagal maka ketika anda membuka localhost\wordpress, di web browser anda maka otomatis akan muncul notifikasi...



D. Menginstall Wordpress

  • Selanjutnya buka alamat berikut ini pada web browser anda :
    localhost\nama_folder_yang_anda_buat_di_dalam_htdoc

    contoh :
    saya tadi menggunakan nama "wordpress" pada folder yang berisi file hasil extract wordpress.

    localhost\wordpress

    maka akan di redirect menuju link localhost/wordpress/wp-admin/install.php untuk melakukan pengisian data dasar dari wordpress yang akan anda install seperti pada gambar di bawah ini.
  • Silahkan isi form tersebut, kemudian klik Install Wordpress untuk menjalankan pemrosesan.
  • Jika Proses install sukses maka akan lanjut pada proses berikut.
  • Berikut ini adalah tampilan CMS Wordpress yang telah berhasil di install dan siap digunakan.






Sekian tutorial Menginstall WordPress Offline pada Localhost  di PC, Terima kasih...


~Semoga Bermanfaat~
MORE

Posted by Darma Kusumandaru on Jumat, 08 September 2017

Cara Menambahkan CSS pada HTML

data:post
0 Comments
Selasa, 05 September 2017

Cara mendeklarasikan atau Menyisipkan CSS pada HTML


Terdapat 3 cara untuk mendeklarasikan atau menuliskan suatu css pada HTML :

1. Inline CSS

Inline CSS adalah CSS yang ditulis atau didekalarasikan sebaris dengan tag nya atau css tersebut dideklarasikan sebagai atribut style="" pada suatu tag atau element tertentu.
Contoh source code Inline CSS :

<p style="color:red;">contoh paragraf dengan teks berwarna merah</p>

Seperti pada contoh di atas :
Atribut style mempunyai value berupa color:red;
Hasil source code Inline CSS di atas :
contoh paragraf dengan teks berwarna merah

2. Internal CSS

Internal CSS adalah CSS yang dideklarasikan pada HTML dengan menggunakan tag berikut. CSS internal ini dapat dibaca apabila diletakkan dimanapun asal berada dalam 1 file HTML,  namun pada umumnya internal CSS ditulis atau dideklarasikan di dalam <head> tag untuk mempermudah dalam pencarian dan peletakan.
Berikut ini adalah tag dimana di dalamnya anda dapat menuliskan CSS :
<style type="text/css">
...
</style>

Contoh Internal CSS :

<!DOCTYPE html>
<html>
<head>
<title>Sinau IT</title>
<style type="text/css">
/* deklarasi CSS pada tag <p>*/
p{
color: red;
}

/* deklarasi CSS pada class dengan nama myClass <p>*/
.myClass{
color: blue;
}

/* deklarasi CSS pada id dengana nama myId <p>*/
#myId{
color: green;
}
</style>
</head>

<body>

<p> isi paragraf </p>
<div class="myClass"> isi myClass </div>
<div id="myId"> isi myId </div>

</body>
</html>

Hasil dari Source code Internal CSS :
isi paragraf
isi myClass
isi myId



3. External CSS

External CSS atau CSS Eksternal adalah CSS yang ditulis atau dideklarasikan di dalam file dengan extensi .css. Penulisan External CSS sama masing-masing tag, class, dan id sama dengan internal CSS, hanya saja terpisah dangan file HTML nya. Oleh sebab itu supaya Browser dapat membaca css tersebut, maka letak dan nama file CSS tersebut harus di deklarasikan pada HTML nya dengan source code berikut ini :

<link rel="stylesheet" type="text/css" href="link dimana anda menyimpan file css">

dengan menggunakan External CSS dapat dijadikan sebagai framework CSS.



Cara Menyisipkan CSS External pada suatu file HTML


HTML Source Code :

<!DOCTYPE html>
<html>
<head>
<title>Sinau IT</title>


</head>
<body>
<div class="header">
<h1 class="head-title">SINAU IT</h1>
<h2>Tutorials, Computer, Linux, Website</h2>
</div>
<div class="content">
<p align="center">
<i>Karena Belajar itu tidak harus selalu menjadi siswa...</i><br>
<b>SINAU IT</b> adalah blog yang kami gunakan sebagai sarana berbagi Ilmu dan Tutorial tentang IT.
</p>
</div>
</body>
</html>

CSS Source Code :

.header {
    text-align: center;
    color: white;
    padding: 20px;
    margin: 10px;
    background: #73ace6;
    border: #aeccea solid 2px;
}
.head-title{
text-shadow: 3px 1px 0px #aeccea;
}

h2{
font-family: monospace;
    color: #c6e5ff;
    font-weight: normal;
}

.content{
background: #ead546;
    padding: 20px;
    border: solid 2px #eae190;
    margin: 10px;
    font-family: monospace;
}
menyimpan source code di atas dalam bentuk file HTML, Saya menyimpannya dengan nama index.html
menyipan source code ditas dalam bentuk file css. Saya menyimpannya dengan nama style.css

Berikut ini adalah hasil dari index.html pada web browser sebelum di tambahkan External CSS :


click gambar untuk memperbesar
click untuk melihat hasil HTML
Pindahkan file style.css ke dalam folder yang sama dengan index.html

click gambar untuk memperbesar
Tambahkan source code berikut ini di dalam tag <head>

CSS Source Code :

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

atribut href="" pada tag link diatas, seperti berikut :
href="style.css"

digunakan sebagai atribut yang berfungsi untuk memanggil file css pada suatu link yang dituils pada value atribut tersebut.
karena file Style.css berada di dalam folder yang sama dengan file index.html, maka value atributnya dapat ditulis sebagai
href="style.css"
atau
href="./style.css"
.


Hasil HTML yang telah ditambahkan External CSS :


click gambar untuk memperbesar / click untuk melihat hasil HTML
Download CSS external diatas : Download

Sumber : Mega Aspada Computer

~Semoga Bermanfaat~
MORE

Posted by SkyLight Animation on Selasa, 05 September 2017

Mengenal Tag Element dan Atribut pada HTML Dasar untuk Pemula

data:post
0 Comments
Sabtu, 02 September 2017
Pada kesempatan kali ini saya akan menjelaskan perbedaan antar Tag, Element, dan Atribut pada HTML.

  • Tag

    Tag pada HTML adalah bahasa markup yang digunakan untuk mengubah tampilan dari suatu teks, pada umumnya teks yang ditampilkan di web browser tampilan nya akan dibedakan berdasarkan tag yang digunakan untuk melengkapi teks tersebut.
    <p> </p>
    Tag yang memberikan efek pada teks dibuat secara berpasangan, jika ada tag pembuka maka ada tag penutup. Ketika anda mendeklarasikan tag jangan lupa menutupnya, Jika source code sudah ribuan dan ada yang tag yang tidak anda tutup kadang akan menyebabkan tata letak website yang anda buat menjadi acak-acakan, dan kadang susah untuk mencari dimana anda harus menutup tag tersebut.

    Ada juga tag yang tidak perlu ditutup yaitu :

    break <br>, berfungsi untuk membuat baris baru atau berganti baris.
    horizontal line <hr>, adalah tag yang digunakan untuk menampilkan garis horizontal.
    image <img scr="">, adalah tang yang digunakan untuk menampilkan gambar dari link yang dipanggil.


  • Element

    Yang disebut sebagai Element  pada HTML adalah tag yang telah diisi. contoh pada gambar diatas adalah tag <span>  yang berisi teks berupa "Lorem ipsum dolor sit laborum".

  • Atribut

    Atribut adalah suatu perlengkapan yang dimiliki oleh tag atau dapat ditambahkan pada suatu tag, yang berfungsi untuk mendeklarasikan suatu value nilai pada atribut tersebut. Value tersebut akan mempengaruhi hasil tag yang ditampilkan pada web browser. Masing-masing atribut memiliki kegunaan masing-masing, ada yang harus satu paket dengan tagnya (hanya dapat digunakan oleh tag tertentu), ada pula yang dapat dideklarasikan pada semua jenis tag. Contoh :

    Hyperlink
    <a href=""></a>
    tag <a>  memiliki atribut href="", yang berfungsi sebagai tepat link yang dituju apabila text pada tag <a> tersebut dikilk.

    Gambar
    <img scr="">
    tag <img> memliki atribut src="", yang berfungsi untuk link gambar yang akan ditampilkan pada ketika tag <img> diinterpreterkan oleh web browser.


Berikut ini adalah susunan tag yang merupakan source code dasar HTML  :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
....
</body>
</html>


Beberapa Contoh Tag pada HTML :

1. html

html adalah tag paling luar dari HTML file yang digunakan untuk membungkus menjadi 1 dari tag-tag dalam satu kesatuan yaitu HTML. Penulisan :
<html></html>

2. head

head adalah bagian dimana kita bisa mendeklarasikan metadata suatu website.
Selain metadata tag <head> juga diguankan untuk mendeklarasikan Framework website dapat berupa CSS, JS, font yang bersifat external. Penulisan
<head></head>

3. title

tag tittle berisi tentang nama dari halaman yang akan anda buat, ketika file html dibuka di browser maka title akan tampil sebagai site title.
contoh :

Source Code :
<title>Belajar HTML</title>
Hasil :

4. body

<body> adalah bagian dimana dapat mengisikan content atau isi dari web tersebut.
Gambar diatas menjelaskan isi dari tag <body>. didalam tag body terdapat bebrapa tag yang berfungsi untuk menyusun tata letak dari suatu website.

5. heading

heading adalah tag yang diguankan untuk mendeklarasikan judul, sub judul, dan judul-judul yang lain. terdapat 6 buah heading yang dapat digunakan yaitu <h1> sampai dengan <h6>, masing masing heading memiliki size atau ukuran yang berbeda sesuai dengan kebutuhan dalam meletakkan judul. berikut ini adalah contoh sourcecode dan hasilnya :

Source Code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Hasil :

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

6. paragraf

<p></p> adalah tag yang digunakan untuk mengelompokan bebrapa kalimat yang akan tampil supaya dapat tersusun dalam suatu paragraf. Contoh :

Source Code :
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Hasil :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

7. bold

bold tag yang digunakan untuk merubah text yang ada di dalam nya menjadi BOLD / cetak Tebal. Contoh  :

Source Code :
<b>Cetak Tebal</b>
Hasil : Cetak Tebal

8. italic

italic adalah tag yang digunakan untuk merubah teks atau karakter yang ada di dalam nya menjadi Italic / cetak miring. Contoh :

Source Code :
<i>Cetak Miring</i>
Hasil : Cetak Miring

9. underline

underline adalah tag yang digunakan untuk merubah teks atau karakter yang ada di dalam nya menjadi Underline / bergaris bawah. Contoh :

Source Code :
<u>Ditampilkan dengan Underline</u>
Hasil : 
Ditampilkan dengan Underline


~Semoga Bermanfaat~
MORE

Posted by SkyLight Animation on Sabtu, 02 September 2017

Translate

Copyright © 2015 - 2017. Acitya IT. All Rights Reserved
    • IA - V01_17_B Template by Ichiri_Arima. Powered by Blogger
    Original Theme by SkyLight~Army