Jumat, 31 Maret 2017

Tutorial Mempercantik Terminal Linux

Assalamualaikum Wr.Wb



Pada postingan kali ini saya akan berbagi tutorial memperindah tampilan terminal linux,di sini saya menggunakan linux mint 17.3
  • Alat Dan Bahan
  1. Os linux.
  2. Text Editor(saya menggunakan gedit).
  • Jangka waktu
  1.  15 Menit
  • Tahap Penyelesaian
  • Buka Terminal linux.
  • Instal Figlet dan Cowsay,masukkan perintah di bawah secara urut.
Sudo apt-get install figlet
Sudo apt-get install fortune cowsay
Sudo apt-get install sl
  • Setelah itu kita edit  file .bashrc
sudo gedit .bashrc 

  • Setelah gedit terbuka letakkan scrip berikut letakkan saja di paling bawah.
sl
    cowsay -f meow "Opreker ZC451CG"
    figlet -f smslant "Bootloop Tamvan"
    echo "==============================================================="
    echo -ne "${lightgreen}Today is:\t\t${red}" `date`; echo ""
    echo -e "${lightgreen}Kernel Information: \t${red}" `uname -smr`
    export PS1="\[\033[1;33m\]\u\[\033[1;37m\]@\[\033[1;32m\]\h\[\033[1;37m\]:\[\033[1;31m\]\w \[\033[1;36m\]\\$ \[\033[0m\]"; 

  • Setelah itu save,tutup terminalnya dan buka lagi.





  • Untuk mengganti gambar kucing pada terminal teman - teman tinggal mengganti pada file .bashrc yang tadi, untuk melihat dafatar gambar masukkan perintah di bawah ini.
ls /usr/share/cowsay/cows/

  • Kita coba untuk menggantinya dengan gambar mata,tinggal ganti meow dengan eyes lalu save buka terminal lagi dan lihat hasilnya.
sl
    cowsay -f eyes "Opreker ZC451CG"
    figlet -f smslant "Bootloop Tamvan"
    echo "==============================================================="
    echo -ne "${lightgreen}Today is:\t\t${red}" `date`; echo ""
    echo -e "${lightgreen}Kernel Information: \t${red}" `uname -smr`
    export PS1="\[\033[1;33m\]\u\[\033[1;37m\]@\[\033[1;32m\]\h\[\033[1;37m\]:\[\033[1;31m\]\w \[\033[1;36m\]\\$ \[\033[0m\]"; 

  • Kesimpulan
Ternyata linux bisa di modifikasi tampilannya salah satunya terminal ini yang lumayan menarik tampilannya setelah di modifikasi. 

Oke sekian dulu tutorial kali ini semoga bermanfaat sampai jumpa di postingan berikutnya.

  • Referensi
http://script-kiddies.org/ 

Wassalamualaikum Wr.Wb 
Read More

Kamis, 30 Maret 2017

Tutorial Menggunakan Font Google Pada Layout Web Desain

Assalamualaikum Wr.Wb




  • Pengertian
Google Font merupakan sebuah jenis / gaya font yang telah di sediakan oleh google yang bisa di jadikan salah satu alternatif gaya font pada web yang akan kita buat.

  • Latar Belakang
 Sebuah tampilan website yang bagus memang sangat penting dalam media informasi sekarang,komposisi website yang baik tidak terlepas dari gaya font yang di gunakan untuk menunjang penampilan website.Untuk itu adanya tutorial ini di harapkan bisa membantu teman semua yang ingin membuat font pada layout websitenya terlihat lebih berfariasi dengan font yang tidak monoton.

  • Jangka Waktu 
10 - 15 menit.

  • Tahap Penyelesaian
  • kita hubungkan dulu font google dengan layout yang akan kita buat,tuliskan script atau syntax seperti di bawah ini(saya menggunakan jenis font macondo dan lato)

<link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

  • Kita buat style cssnya agar lebih mudah untuk mengatur penerapan font

<style type="text/css">
    h1{font-family: 'Macondo', sans-serif;}
    p{font-family: 'Lato', sans-serif;}
</style>

  • Setelah itu kita terapkan font nya,Untuk h1(biasanya untuk judul) saya gunakan Macondo dan p(paragraf) saya menggunakan font Lato.
 <body>
<h1>Judul ini menggunakan Font Macondo</h1>
<p>Paragraf ini menggunakan font Lato.
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 commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

  • Untuk yang belum jelas bisa melihat screenshot di bawah
 

  • Hasil
 
  • Kesimpulan
Membuat variasi font pada layot web ternyata tidak begitu sulit dan prosesnya juga tidak lama,dan yang terpenting bisa membuat tampilan layout website kita lebih bervariasi.
 
 
Ya mungkin sekian dulu postingan kali ini semoga bermanfaat,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya
 
Wassalamualaikum Wr.Wb 
Read More

Rabu, 29 Maret 2017

W3.Css Sidebar

Assalamualaikum Wr.Wb



Seperti judulnya pada kesempatan kali ini saya akan memposting tentang salah satu style yang tersedia pada w3.css yaitu sidebar. Sidebar ini hampir mirip dengan navbar tetapi sidebar ini umumnya terletak pada samping halaman web,dan fungsinya juga hampir mirip - mirip,sidebar ini juga bisa untuk di jadikan navigasi pada tampilan website kita,baiklah mari kita mulai saja.

  • Tulis syntax yang akan di gunakan untuk memanggil w3.css
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Tuliskan syntax di atas di antara <title> dan </title> seperti gambar di bawah.


  •  Sekarang mari kita buat sidebarnya
<!DOCTYPE html>
<html>
<head>
    <title>w3sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px;" id="mySidebar">
<button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
<a href="#" class="w3-bar-item w3-button">Menu 1</a>
<a href="#" class="w3-bar-item w3-button">Menu 2</a>
<a href="#" class="w3-bar-item w3-button">Menu 3</a>  
</div><!--w3sidebar-->

<div class="w3-main" style="margin-left: 200px">
<div class="w3-teal">
    <button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</button>
    <div class="container">
        <h1>Setiyono's Blog</h1>
   
</div><!--w3teal-->
</div><!--w3main-->

<div class="w3-container">
    <h3>Resize Ukuran untuk melihat sidebar yang responsive</h3>
    <p>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 commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>

Dan inilah hasilnya

Saat tampilan di perkecil





oh ya hampir kelupaan,selain menggunakan w3.css sidebar di atas juga menggunakan javascript yang di awali dengan <script> dan di akhiri dengan </script> yang fungsinya untuk memberikan efek bergerak pada sidebar saat ukuran layar di perkecil,untuk lebih jelasnya silahkan di coba sendiri.Sekian postingan kali ini semoga bermanfaat.

Wassalamualaikum Wr.Wb
Read More

Senin, 27 Maret 2017

Instalasi CMS Popoji Di linux mint 17.3

Assalamualaikum Wr.Wb


Cms merupakan salah satu pilihan yang tepat untuk membuat sebuah website,jaman sekarang sudah banyak sekali cms yang bisa di jadikan pilihan untuk membuat website secara cepat dan mudah salah satunya popoji cms ini.

  • Latar Belakang
Banyaknya akan kebutuhan website di jaman yang serba instan ini maka website merupakan salah satu media yang bisa di gunakan sebagai media komunikasi,promosi dan lain - lain.Popoji cms bisa di jadikan salah satu pilihan di antara sekian banyaknya cms,seperti Wordpress misalnya,dengan adanya tutorial ini di harapkan bisa bermanfaat bagi yang membutuhkan tutorial penginstalan popoji cms khususnya bagi pengguna linux.
  • Pengertian
PopojiCMS adalah Content Management System yang dibuat dengan konsep yang sangat menarik dan mudah untuk digunakan. PopojiCMS dibuat dengan tampilan responsive dengan base bootstarp dan selain itu juga dilengkapi dengan banyak plugin jQuery.PopojiCMS dibangun di atas dasar OOP tetapi tetap tidak menghilangkan rasa native-nya, sehingga developer awam pun bisa dengan mudah menggunakannya. Semoga PopojiCMS dapat menjawab semua kebutuhan Anda tentang web. 

  • Jangka Waktu
  • 15-25 menit
  • Tahap Penyelesaian
  • Download terlebih dahulu popoji cms di sini lalu ekstrak  file nya.
  • Setelah di Ekstrak buka terminal lalu ketik
sudo caja
  • Pindahkan file hasil ektrak tadi ke var/www/html
  • Setelah itu kita beri hak akses,kembali ke terminal ketikkan
chmod -R 755 popojicms/

  • Jangan lupa beri hak milik
chown -R www-data:www-data popojicms/

  •   Buat Datadabase pada php myadmin/localhost 

  • Buka browser lalu ketik localhost/popojicms (sesuai nama folder popoji anda) Lalu kita mulai penginstalan

  • Paths Checks (klik Next)


  • Database 
Isikan yang perlu saja seperti: nama database,user,dan password database anda




  • Configuration
Isikan identitas website yang kita buat berserta username dan password serta email kita




  • Setelah di klik Next lalu akan muncul tampilan seperti di bawah klik saja Finish


  • Hapus folder "po - instal" pada direktori var/www/html/popojicms
  • Lalu buka kembali pada browser localhost/popojicms/

  • Untuk masuk pada Dashboard ketik pada browser localhost/popojicms/po-admin lalu masukkan username dan password

  • Setelah masuk halaman Dashboard Administrator teman semua bisa mengatur website yang akan di buat dari tema,postingan dll.


  • Hasil dan kesimpulan
Menginstal popoji sebenarnya tidak begitu sulit bagi teman semua yang sudah terbiasa menginstal berbagai cms sebelumnya,serta popoji dapat di jadikan salah satu alternatif untuk membuat website karena tampilannya tidak kalah dari cms lain dan jangan lupa ini adalah cms Indonesia jadi tidak ada salahnya kita menggunakan cms popoji sebagai pilihan kita.


Baik sekian dulu postingan saya kali ini semoga bermanfaat,terima kasih sudah berkunjung sampai  jumpa di postingan berikutnya.

Wassalamualaikum Wr.Wr
Read More

Sabtu, 25 Maret 2017

W3.Css Images

Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan membahas mengenai sebuah style yang ada pada W3.Css yaitu w3.css images style ini di gunakan untuk mengatur tampilan pada gambar misalnya untuk memberi border,bentuk gambar dan lain sebagainya mari kita bahas satu persatu.

  • Rounded Image.
Style ini berguna untuk  membuat sudut pada gambar menjadi melengkung

<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
    <h1>Contoh Rounded Image</h1>
    <img src="1.jpg" class="w3-round" alt="gambar">
</div>
</body>
</html>
Dan hasilnya seperti di bawah


  • Circle Image
Seperti namanya style ini di gunakan untuk memberi efek circle pada gambar
<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
    <h1>Contoh Circle Image</h1>
    <img src="1.jpg" class="w3-circle" alt="gambar">
</div>
</body>
</html>
 Dan hasilnya seperti berikut ini


  • Bordered Image
Style ini di gunakan untuk memberikan border pada sudut gambar.
<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
    <h1>Contoh Bordered Image</h1>
    <img src="1.jpg" class="w3-border" alt="gambar" style="padding: 4px;width: 50%">
</div>
</body>
</html>
Dan inilah hasilnya


  • Image As Card 
Tampilan gambar dengan style ini hampir mirip dengan border hanya saja memiliki tambahan efek shadow / bayangan.
<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
    <h1>Image As Card</h1>
    <img src="1.jpg" class="w3-card" alt="gambar" style="padding: 4px;width: 50%">
</div>
</body>
</html>
Dan inilah hasilnya


Ya itu tadi pembahasan mengenai style image pada w3.css semoga bermanfaat sampai jumpa di postingan selanjutnya.


Wassalamualaikum Wr.Wb
Read More

Jumat, 24 Maret 2017

Membuat Backgroud Paralax

Assalamualaikum Wr.Wb



Pada postingan kali saya akan berbagi tutorial membuat Backgroud Parallax,yaitu sebuah background yang posisinya akan fixed atau berhenti saat kita scrol halaman web ke bawah.Parallax background di biasanya banyak di gunakan untuk sebuah website one page yaitu website yang hanya memiliki satu halaman saja.Di sini saya membuat 2 file yang satu untuk file style.css dan yang satunya paralax.html,baiklah mari kita mulai.
  • Style.css
tuliskan scipt di bawah untuk stylenya simpan dengan nama style.css.

 .container {
  max-width: 960px;
  margin: 0 auto;
}
section.section:last-child {
  margin-bottom: 0;
}
section.section h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.section p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.section p:last-child {
  margin-bottom: 0;
}
section.section.content {
  padding: 40px 0;
}
section.section.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.section.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  margin: 0 auto;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.section.parallax-1 {
  background-image: url("1.jpeg");
}
section.section.parallax-2 {
  background-image: url("2.jpeg");
}
section.section.parallax-3 {
  background-image: url("3.jpeg");
}

@media all and (min-width: 600px) {
  section.section h2 {
    font-size: 42px;
  }
  section.section p {
    font-size: 20px;
  }
  section.section.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.section.parallax h1 {
    font-size: 160px;
  }
}
  • Paralax
Untuk menampilkan paralax saya gunakan html,tuliskan script di bawah lalu simpan dengan paralax.html
<!DOCTYPE html>
<html>
<head>
  <title>Tutorial Parallax Scrolling</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="margin:0 auto;">
  <section class="section parallax parallax-1">
  <div class="container">
  </div>
</section>

<section class="section content">
  <div class="container">
    <h2>lorem1</h2>
    <p>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 commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</section>

<section class="section parallax parallax-2">
  <div class="container">
  </div>
</section>

<section class="section content">
  <div class="container">
    <h2>lorem 2</h2>
    <p>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 commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</section>

<section class="section parallax parallax-3">
  <div class="container">
  </div>
</section>

<section class="section content">
  <div class="container">
    <h2>lorem 3</h2>
    <p>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 commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</section>
</body>
</html>
Untuk tulisan berwarna biru di gunakan untuk memanggil style.css yang telah kita buat tadi.

Dan inilah hasilnya

sebelum di scroll

 
 Jika di scroll akan seperti ini




Oke mungkin cukup sekian postingan kali ini semoga bermanfaat,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.

Refrensi:https://trustme.co.id/parallax-scrolling-tutorial-menggunakan-css/

Wassalamualaikum Wr.Wb


Read More

Kamis, 23 Maret 2017

W3.Css Quotes

Assalamualaikum Wr.Wb



Pada postingan kali ini saya akan membahas sebuah style yang ada di W3.Css yaitu style yang bisa di gunakan untuk membuat sebuah quotes,ada banyak macam style quotes mari kita mulai satu persatu.

  • Displaying Quotes
Quotes dengan style ini memiliki tampilan dengan background grey dan menurut saya style jenis ini sangat cocok untuk membuat quotes karena terlihat simpel.
<!DOCTYPE html>
<html>
<head>
    <title>W3quotes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container">
    <h2>Contoh Displaying Quotes</h2>
    <p>Gunakan w3-panel Untuk memanggil style quotes</p>

    <div class="w3-panel w3-leftbar w3-light-grey">
        <p class="w3-xlarge w3-serif"><i>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit   
        </i>           
        </p>
        <p>Quotes</p>
    </div><!--w3panel-->
</div><!--w3container-->
</body>
</html>
Dan inilah hasilnya



  • Black Quotes 
Seperti namanya quotes jenis ini memiliki tampilan hitam
<!DOCTYPE html>
<html>
<head>
    <title>W3quotes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container">
    <h2>Black Quotes</h2>
   

    <div class="w3-panel w3-black">
        <p class="w3-large w3-serif">
            <i class="fa fa-quote-right w3-xxlarge xw3-margin-right">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit  
            </i>
        </p>
    </div><!--w3panel black-->
</div><!--w3container-->
</body>
</html>
Dan ini hasilnya



  • Quotes Card
Seperti namanya quotes ini memiliki tampilan seperti card

<!DOCTYPE html>
<html>
<head>
    <title>W3quotes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container">
    <h2>Black Quotes</h2> 

    <div class="w3-panel w3-card-4 w3-light-grey" style="width: 50%">
        <p class="w3-large w3-serif">
            <i class="fa fa-quote-right w3-xxlarge w3-text-red"></i>
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
            <br>
        </p>
    </div><!--w3panel black-->
</div><!--w3container-->
</body>
</html>
Dan inilah hasilnya




Ya mungkin sekian dulu postingan kali ini semoga bermanfaat terimakasih sudah berkunjung.

Refrensi:https://www.w3schools.com/

Wassalamualaikum Wr.Wb
Read More

Rabu, 22 Maret 2017

Tutorial Mengaktifkan Mod-Rewrite Apache2 di Linux Mint 17.3


Assalamualaikum Wr.Wb


  • Pengertian
Module mod_rewrite sebenarnya adalah padanan nama, dengan menulis ulang. seorang webmaster dapat menggunakannya untuk menulis ulang URL dengan mengikut sertakan kondisi dan expresion, dengan menggunakan modul ini, anda dapat membuat user melihat clean URL yang mana terlihat static tetapi memiliki halaman yang dinamis. module mod_rewrite digunakan dengan menaruh beberapa baris dalam file .htaccess atau pada file config apache. pertama yang harus dilakukan adalah mengaktifkan Rewrite Engine dan mensetting RewriteBase dengan memberikan beberapa baris code di dalam file .htaccess.

  • Latar Belakang
mod_rewrite secara default saat kita memakai hosting yang online, modul tersebut sudah di aktifkan tapi kalau di localhost biasanya belum aktif. agar mod_rewrite bisa berjalan di server local atau localhost untuk itu kita harus mengaktifkannya.
  •  Alat dan Bahan
  1. Laptop/PC
  2. Terminal
  • Maksud dan Tujuan 
Agar tau cara mengatasi Program yang error di Apache 2 dengan  Mengaktifkan Mod-rewrite di apache2.Dan semoga bisa membantu teman - teman semua.
  • Tahap Penyelesaian
  • Buka Terminal lalu masuk ke superuser
sudo su
  • ketik perintah di bawah ini:
a2enmod rewrite 
  • Lalu akan muncul tulisan seperti dirimu
Module rewrite already enabled
  • Lalu ketik di bawah ini:
service apache2 restart
  • kita akan mengedit apache2nya dengan mengetik di bawah ini:
nano /etc/apache2/sites-available/000-default.conf
  • Maka akan muncul tampilan seperti ini
 
  • Lalu letakkan script di bawah ini di posisi paling bawah
<Directory /var/www/html/>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
Lebih jelasnya lihat gambar di bawah


  • Selanjutnya restart apache nya
service apache2 restart



  •  Kesimpulan
Mengaktifkan Mod-Rewrite tidaklah terlalu sulit asalkan tapi kita harus melakukannya dengan teliti agar tidak terjadi kesalahan yang berakibat fatal.

Wassalamualaikum Wr.Wb



Read More

Selasa, 21 Maret 2017

W3.Css Effects

Assalamualaikum Wr.Wb


Pada postingan kali ini saya akan membahas tentang w3css Effects yang di maksud di sini yaitu efek yang akan kita terapkan pada gambar,baiklah mari kita mulai.

  • Opacity Efect
Ada 4 macam opacity yaitu: Normal,Opacity Min,Opacity,Opacity Max

<!DOCTYPE html>
<html>
<head>
    <title>w3css Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container w3-row">
    <h2>Opacity Effect</h2>

    <p>Normal:</p>
    <img src="1.jpeg" style="width: 300px;">

    <P>Opacity Min:</P>
    <img src="1.jpeg" style="width: 300px;" class="w3-opacity-min">

    <p>Opacity:</p>
    <img src="1.jpeg" style="width: 300px;" class="w3-opacity">

    <p>Opacity Max:</p>
    <img src="1.jpeg" style="width: 300px;" class="w3-opacity-max">
</div><!--w3-container-->
</body>
</html>
Dan inilah hasilnya




  •  Grayscale
Untuk grayscale sama dengan opacity  yaitu ada 4.
 <!DOCTYPE html>
<html>
<head>
    <title>w3css Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container w3-row">
    <h2>Grayscale</h2>

    <p>Normal:</p>
    <img src="1.jpeg" alt="gambar1" style="width: 300px;">

    <P>Grayscle Min:</P>
    <img src="1.jpeg" alt="gambar2" style="width: 300px;" class="w3-grayscale-min">

    <p>Grayscale:</p>
    <img src="1.jpeg" alt="gambar3" style="width: 300px;" class="w3-grayscale">

    <p>Grayscale Max (black and white):</p>
    <img src="1.jpeg" alt="gambar4" style="width: 300px;" class="w3-grayscale-max">
</div><!--w3-container-->
</body>
</html>
Dan inilah hasilnya



  • Sepia
Ini juga ada 4 macam

<!DOCTYPE html>
<html>
<head>
    <title>w3css Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container w3-row">
    <h2>Sepia</h2>

    <p>Normal:</p>
    <img src="1.jpeg" alt="gambar1" style="width: 300px;">

    <P>Sepia Min:</P>
    <img src="1.jpeg" alt="gambar2" style="width: 300px;" class="w3-sepia-min">

    <p>Sepia:</p>
    <img src="1.jpeg" alt="gambar3" style="width: 300px;" class="w3-sepia">

    <p>Sepia Max:</p>
    <img src="1.jpeg" alt="gambar4" style="width: 300px;" class="w3-sepia-max">
</div><!--w3-container-->
</body>
</html>
Dan inilah hasilnya



  •  Hover Effect
Ini di gunakan untuk memberikan efek saat mouse hover ada 3 macam yaitu: Opacity,Grayscale dan Sepia.
<!DOCTYPE html>
<html>
<head>
    <title>w3css Effects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container w3-row">
    <h2>Hover Efect</h2>


    <P>Hover Opacity</P>
    <img src="1.jpeg" alt="gambar2" style="width: 300px;" class="w3-hover-opacity">

    <p>Grayscale</p>
    <img src="1.jpeg" alt="gambar3" style="width: 300px;" class="w3-hover-grayscale">

    <p>Sepia</p>
    <img src="1.jpeg" alt="gambar4" style="width: 300px;" class="w3-hover-sepia">
</div><!--w3-container-->
</body>
</html>
Dan inilah hasilnya

  • Hover Effect



  •  Hover Grayscale


  • Hover Sepia



Oke itu tadi mengenai postingan saya mengenai berbagai efek gambar dengan w3css semoga bermanfaat,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb






Read More