Sabtu, 27 Februari 2016

Cara Menjalankan File PHP di Browser

Cara Menjalankan File PHP di Browser

Menjalankan file php itu susah-susah gampang menurut saya, tapi bagi mereka yang baru dan belum pernah sama sekali menjalankan file PHP pastinya akan sangat kesulitan dalam menjalankannya.

Nah, sebelum mulai pembahasan pada topik kali ini, saya akan menjelaskan terlebih dulu apa itu php !

PHP: Hypertext Preprocessor atau yang biasa disebut dengan PHP adalah bahasa Server Side Scripting yang menyatu pada HTML. karena PHP bersifat Server Side Scripting maka sintaks dan perintah-perintah PHP akan dieksekusi di dalam server, kemudian hasilnya dikirimkan ke browser dalam format HTML.

Jadi, intinya disini kita akan membuat sebuah server local yang digunakan untuk menjalankan file PHP, gimana caranya, penasaran, jangan kemana-mana ikuti terus tutorial berikut ini :

Pertama

Terlebih dahulu anda harus menginstal XAMPP dan ini berlaku untuk pengguna windows. Apa itu xampp ? xampp Merupakan aplikasi yang mengintegrasikan beberapa aplikasi web di dalamnya. Dalam XAMPP terdapat instalasi modul PHP, MYSQL, Web Server Apache.

Untuk medapatkan XAMPP versi terbaru, anda bisa mengunduhnya secara gratis disini Download Xampp

Kedua

Jika syarat pertama sudah terpenuhi, langkah selanjutnya yaitu menjalankan service Apache dengan cara, buka XAMPP Control panel kemudian ceklist service apache dan tekan tombol Start kurang lebih seperti gambar berikut ini.

Cara Menjalankan File PHP di Browser

Apache digunakan untuk membuat server local dengan bantuan Xampp.

Ketiga

Selanjutnya yaitu mencari folder instalasi Xampp biasanya terletak di drive C:, jika sudah ketemu buka folder Xampp/htdocs, kemudian buatl folder project kalian.

Folder project ini nantinya akan digunakan untuk menyimpan semua file PHP yang nantinya akan anda buat dan dijalankan di browser kesukaan anda.

Keempat

Buatlah file baru dengan nama index.php kemudian isi dengan kode html, dan simpan file tersebut kedalam folder project yang sudah anda buat sebelumnya.

Kemudian buka browser kesukaan anda dan ketikkan di kolom URL localhost/nama folder project anda dan enter, maka akan tampil kode html yamg sudah anda buat sebelumnya pada file index.php

Selesai sudah tutorial menjalankan file php di browser kali ini, jika masih bingung monggo coret-coret di form komentar yang sudah disediakan. Dan jangan sungkan-sungkan untuk berbagi ke sosial media berikut ini, terimakasih.

Read more

Jumat, 26 Februari 2016

Cara Mengganti Tema Sublime Text 3

Cara Mengganti Tema Sublime Text 3

Mengganti Tema sebuah text editor itu susah-susah gampang menurut saya, apalagi bagi mereka yang belum pernah samasekali melakukan hal tersebut pastinya akan sangat kebingungan.

Nah, bagi anda yang suka koding pastinya tidak luput dari yang namanya text editor, namun text editor sekarang ini kebanyakan menghadirkan tampilan sederhana atau kurang memberikan tampilan yang enak di pandang oleh mata, dan jika terlalu lama dipandang, akan membuat sakit mata anda.

Tapi jangan kahwatir, disini saya akan memberikan anda solusi agar text editor anda lebih elegan dan enak dipandang, caranya gampang dan tidak perlu bayar cukup ikuti saja tutorial berikut ini.

Pertama

langkah pertama pastikan sublime text 3 anda sudah terpasang plugin Package Control. Jika belum, anda harus menginstalnya terlebih dahulu, jika belum tau caranya bisa mengikuti tutorial berikut ini Cara instal package control.

Kedua

Jika package control sudah terinstal, selanjutnya bukalah Sublime Text 3 anda, kemudian tekan tombol Ctrl + Shift + P, maka akan tampil seperti gambar berikut ini.

Cara Mengganti Tema Sublime Text 3

Jika sudah emudian ketikkan Instal di form input yang sudah disediakan, maka akan muncul beberapa pilihan dan pilih Instal Package maka akan muncul from input baru lagi.

ketiga

Selanjutnya ketikkan Spaceblack di from input, maka akan muncul beberapa pilihan lagi dan pilih Theme - Spaceblack, Spaceblack adalah nama tema yang akan kita instal.

Cara Mengganti Tema Sublime Text 3

Tunggu hingga proses instalasi selesai.

Keempat

Jika proses instalasi sudah selesai, selanjutnya masuk ke Prefernces, Setting - User, dan hapus semua text yang ada didalam file tersebut, kemudian ganti dengan text berikut ini dan save.

{
    "color_scheme": "Packages/Theme - Spaceblack/Color Schemes/Spaceblack-alt.tmTheme",
    "font_size": 11.5,
    "ignored_packages":
    [
        "Vintage"
    ],
    "theme": "Spaceblack.sublime-theme"
}

Jika sudah, selanjutnya close semua file dan folder dan matikan Sublime Text 3 anda.

Kelima

Kemudian buka kembali Sublime Text 3 dan buka salah satu file yang sudah berisi kode html dan lihat hasilnya kurang lebih seperti gambar dibawah ini.

Cara Mengganti Tema Sublime Text 3

jika tidak ada perubahan coba cek di Preferences, Color Scheme dan pilih Spaceblack. dan jika anda tidak suka dengan tema Spacblack, anda bisa mengunjungi halaman berikut ini packagecontrol.io untuk mendapatkan tema yang anda sukai, karena disana banyak sekali beragam tema yang bisa anda pilih secara gratis.

Selesai sudah tutorial mengganti tema sublime text 3 kali ini, jika masih bingung monggo coret-coret di form komentar yang sudah disediakan. Dan jangan sungkan-sungkan untuk berbagi ke sosial media berikut ini, terimakasih.

Read more

Cara Instal Package Control Sublime Text 3

Package controller adalah plugin yang digunakan untuk menginstall, upgrade, delete dan melihat paket-paket plugin yang terinstall pada Sublime Text 3

Nah, untuk bisa melakukan hal tersebut, terlebih dahulu kita harus menginstal Sublime Text 3, jika sudah ada kita bisa langsung menginstall Package Control dengan cara sebagai berikut ini :

Pertama

Anda harus mengunjungi situs penyedia kode instalasi package control di sini packagecontrol.io, kemudian salin kode instalasi pada situs web tersebut seperti yang sudah ditandai warna merah pada gambar berikut ini :

Cara Instal package Control Sublime Text 3

PERHATIAN ! jika anda menggunakan Sublime Text 3 maka pilihlah kode instalasi untuk sublime text 3, dan sebaliknya.

Kedua

Buka Sublime Text 3 anda, jika sudah kemudian tekan tombol Ctrl + ` dan tempelkan kode instalasi tersebut kedalam kolom seperti yang sudah ditandai warna merah pada gambar berikut ini :

Cara Instal package Control Sublime Text 3

Kemudian tekan enter dan tunggu hingga proses instalasi Package Control selesai. dan restart sublime text 3 anda.

Ketiga

Nah, untuk menjalankan package Control buka menu Preferences, Package Control. atau dengan cara cepatnya tekan tombol Ctrl + Shift + P.

Selesai sudah tutorial Instal package Control Sublime kali ini, jika masih bingung monggo coret-coret di form komentar yang sudah disediakan. Dan jangan sungkan-sungkan untuk berbagi ke sosial media berikut ini, terimakasih.

Read more

Kamis, 25 Februari 2016

Persiapan Dasar Untuk Belajar PHP

Text Editor Untuk Web Developer

Jumpa lagi bersama saya fiki efendi, kali ini saya akan membahas tentang persiapan dasar untuk belajar php.

Sebelum melakukan persiapan untuk belajar PHP, ada baiknya kita meluangkan waktu sedikit untuk mengenang pengertian dari PHP

Php: Hypertext Preprocessor atau yang lebih dikenal dengan sebutan PHP, adalah bahasa Server Side Scripting yang menyatu dengan HTML untuk membuat halaman web yang dinamis.

PHP bersifat Server Side Scripting maka sintaks dan perintah-perintah php akan dieksekusi di server kemudian hasilnnya dikirimkan ke browser dalam bentuk HTML, dengan demikian kode program yang ditulis dalam PHP tidak akan terlihat oleh user, sehingga keamanan wen lebih terjamin.

Gimana sudah pada tau kan pengertian dari PHP, nah selanjutnya kita akan mempersiapkan bahan-bahan yang diperlukan untuk belajar php, berikut bahannya :

Windows

Persiapan Dasar Untuk Belajar PHP

Kenapa memakai Sistem Operasi Windows ? karena semua tutorial di blogs ini menggunakan windows hihihi. Tapi jangan khawatir, karena hampir semua sistem operasi baik itu Windows, Linux, Mac OS, Solaris, Semuanya bisa digunakan.

Browser

Persiapan Dasar Untuk Belajar PHP

Browser digunakan untuk menampilkan hasil kode program yang kita buat. Berikut ini beberapa browser yang cukup populer seperti Internet Explorer, Mozila Firefox, Google Chrome, Opera, Safari. Dan untuk menghindari kompatibilitas sebaiknya gunakanlah browser versi terbaru.

Xampp

Persiapan Dasar Untuk Belajar PHP

Merupakan aplikasi yang mengintegrasikan beberapa aplikasi utama web di dalamnya. Dalam XAMPP terdapat instalasi modul PHP, MYSQL, Web Server Apache. Untuk medapatkan XAMPP versi terbaru, anda bisa mengunduhnya langsung dari web resminya secara gratis di sini Xampp For Windows

Text Editor

Persiapan Dasar Untuk Belajar PHP

Text Editor adalah aplikasi yang digunakan untuk menuliskan kode-kode HTML, CSS, PHP, JavaScript dan sebagainya. Untuk saat ini banyak sekali macam-macam text editor diantaranya Notepad++, Sublime Text 3, PhpStorm dan sebagainya.

Untuk text editor terpopuler saat ini bisa anda lihat disini Popular Text Editor.

Selesai sudah Persiapan Dasar Untuk Belajar PHP kali ini, jika masih bingung monggo coret-coret di form komentar yang sudah disediakan. Dan jangan sungkan-sungkan untuk berbagi ke sosial media berikut ini, terimakasih.

Read more

Rabu, 24 Februari 2016

Cara Membuat Layout HTML dan CSS

Cara membuat layout html dan css

Layout atau dalam bahasa Indonesia dikenal dengan tata letak adalah pengaturan tulisan-tulisan dan gambar-gambar untuk mecapai tujuan tertentu. Kemudian bagaimanakah membuat layout yang baik ? atau bagaimanakah layout bisa dikatakan baik ?

Untuk saat ini belu ada penjelasan yg cukup tepat. Namun, layout bisa dikatan baik apabila memenuhi kriteria berikut yaitu : It Works mencapai tujuannya, It Organizes ditata dengan baik, dan It Attracts menarik bagi pengguna.

Sudah jelas bukan tentang tujuan membuat layout. Nah sekarang kita akan memulai membuat layout dengan bantuan html dan css, brikut tutorialnya :

Pertama

Buatlah file baru dengan nama index.html, kemudian masukkan kode html berikut ini, dan simpan file tersebut kedalam folder project anda masing-masing.

<!DOCTYPE html>
<html>
<head>
    <title>layout</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">
    <div id="header">
        
    </div>
    <div id="nav">
        
    </div>
    <div id="content">
        
    </div>
    <div id="sidebar">
        
    </div>
    <div id="footer">
        
    </div>
</div>

</body>
</html>

Kedua

Buatlah file baru lagi dengan nama style.css, kemudian masukkan kode css berikut ini, dan simpan file tersebut kedalam folder project anda maisng-masing.

body {
    margin: 0px;
    background: #f6f6f6;
}
#container {
    width: 1100px;
    margin: 0 auto;
}
#header {
    width: 100%;
    height: 100px;
    background: #e74c3c;
}
#nav {
    width: 100%;
    height: 50px;
    background: #e74c3c;
    margin: 10px 0px 10px 0px;
}
#content {
    width: 800px;
    height: 400px;
    background: #e74c3c;
    margin: 0px 10px 10px 0px;
    float: left;
}
#sidebar {
    width: 290px;
    height: 400px;
    background: #e74c3c;
    float: left;
}
#footer {
    clear: both;
    width: 100%;
    height: 50px;
    background: #e74c3c;
    margin: 10px 0px 0px 0px;
}
PERHATIAN ! file index.html dan file style.css letakkan didalam satu folder

Jika sudah, maka jalankan file index.html menggunakan browser kesukaan anda, kurang lebih hasilnya seperti berikut ini :

Cara Membuat Layout HTML dan CSS

Selesai sudah tutorial membuat layout html dan css kali ini, jika masih bingung monggo coret-coret di form komentar yang sudah disediakan. Dan jangan sungkan-sungkan untuk berbagi ke sosial media berikut ini, terimakasih.

Read more

Cara Membuat From Input HTML

Cara Membuat Tabel HTML dan CSS

From Input merupakan fasilitas sebuah website yang digunakan untuk mendapatkan masukan dari user. User dapat memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button, dropdown dan lain-lain. Selain itu pengunjung juga dapat melakukan pemilihan data mengunakan elemen select list atau dengan istilah lain combo box atau drop-down list.

jadi, dengan fasilitas ini sebuah website bisa menjadi lebih dinamis dan interaktif dengan pengunjung. karena from digunakan oleh pengembang web untuk menerima masukkan dari pengunjung website.

Cukup itu dulu penjelasannya, pasti sudah nggak sabar kan mau bikin from inputnya hehehhe ? Oke langsung saja ikuti tutorial berikut ini :

Form Input

Disini kita akan membuat sebuah form input pendaftaran mahasiswa, dan didalamnnya terdapat type-type form html diantaranya text, select, radio, checkbox, textarea, submit, reset.

Buat file baru dengan nama index.html, masukkan kode berikut ini, dan simpam di folder project anda masing-masing.

<form>
    <table cellpadding="5">
        <tr>
            <td width="130px">NAMA</td>
            <td><input type="text" name="nama" size="64"></td>
        </tr>
        <tr>
            <td>TTL</td>
            <td>
                <input type="text" name="tempat" size="">
                <select title="tanggal">
                    <option>Tanggal</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                    <option>32</option>
                </select>
                <select title="bulan">
                    <option>Bulan</option>
                    <option>Januari</option>
                    <option>Februari</option>
                    <option>Maret</option>
                    <option>April</option>
                    <option>Mei</option>
                    <option>Juni</option>
                    <option>Juli</option>
                    <option>Agustus</option>
                    <option>September</option>
                    <option>Oktober</option>
                    <option>November</option>
                    <option>Desember</option>
                </select>
                <select title="tahun">
                    <option>Tahun</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                    <option>2006</option>
                    <option>2007</option>
                    <option>2008</option>
                    <option>2009</option>
                    <option>2010</option>
                    <option>2011</option>
                    <option>2012</option>
                    <option>2013</option>
                    <option>2014</option>
                    <option>2015</option>
                    <option>2016</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>JENIS KELAMIN</td>
            <td>
                <input type="radio" name="gender"> Lelaki</br>
                <input type="radio" name="gender"> Perempuan
            </td>
        </tr>
            <td>NO TELP</td>
            <td><input type="text" name="telp"></td>
        </tr>
        <tr>
            <td>ALAMAT</td>
            <td><textarea rows="5" cols="61" name="alamat"></textarea></td>
        </tr>
        <tr>
            <td>HOBBY</td>
            <td>
                <table>
                    <tr>
                        <td width="180px">
                            <input type="checkbox" name=""> Sepak Bola
                        </td>
                        <td>
                            <input type="checkbox" name=""> Berenang
                        </td>                       
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name=""> Futsal
                        </td>
                        <td>
                            <input type="checkbox" name=""> Membaca
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name=""> Jogging
                        </td>
                        <td>
                            <input type="checkbox" name=""> batminton
                        </td>
                    </tr>
                </table>                                                
            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="">
                <input type="submit" value="Kirim">
                <input type="reset" value="Reset">
            </td>
        </tr>
    </table>
</form>     

Untuk tampilannya kurang lebih seperti ini, mungkin jika anda jalankan di tempat kalian akan berbeda, karena disini terpengarus sama template blog saya.

NAMA
TTL
JENIS KELAMIN Lelaki
Perempuan
NO TELP
ALAMAT
HOBBY
Sepak Bola Berenang
Futsal Membaca
Jogging batminton

Selesai sudah tutorial membuat form input html kali ini, jika masih bingung monggo coret-coret di form komentar yang sudah disediakan. Dan jangan lupa untuk berbagi ke sosial media berikut ini, terimakasih.

Read more