Nurroin's Blog

index.html

style.css

result | index.html

By Nurroin's Blog

Assalamu'alaikum

1. Pendahuluan

Paralaks, atau lebih tepatnya paralaks gerak (bahasa yunani: παραλλαγή (parallagé)) adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu obyek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.

2. Tujuan

• Membuat simple parallax scrolling

3. Alat dan Bahan

• Laptop
• Text Editor
• Gambar
• Web Browser

 4. Pembahasan

• Dalam pembuatan Parallax Scrolling yang paling penting, jangan membuat website terlau sulit.
• Periapkan bahan yang dibutuhkan

•  Buka Text Editor
• Ketik Coding dibawah ini.
• Untuk HTML-nya

•  Untuk CSS-nya

•  Save dan cek di web browser

5. Referensi

• http://dimbleweb.com/blog/read/apa-itu-parallax-scrolling-pada-web-design/52 

By Nurroin's Blog

Assalamu'alaikum

1. Pendahuluan

Untuk memudahkan kita mengetahui fungsi dari sebuah code (HTML, CSS, PHP, JavaScript), biasanya membuat sebuah tanda atau yang di namakan comment. Dan di setiap bahasa pemograman pasti cara mengimputkan comment pasti beda, dan kali ini saya akan membahaskan tentang cara membuat comment di setiap bahasa pemograman.

2. Tujuan 

• Membuat comment pada setiap bahasa pemograman

3. Alat dan Bahan

• Laptop
• Text editor
• Web Browser

4. Pelaksanaan

• Pertama buka terlebih dahulu Text editornya.
• Ketik codingnya
• Untuk HTML : 

• Untuk CSS :

• Untuk PHP :

• Untuk JavaScript : 

By Nurroin's Blog

1. Pendahuluan

Sekarang banayak programmer mengedepankan tampilannya agar, para user yang menggunak aplikasi yang  dibuat oleh programmer tertarik. contohnya seprti Background pada sebuah website yang bergerak. Dalam kesempatan ini penulis akan mempersembahkan tutorial membuat background bergerak

2. Tujuan

• Membuat Background bergerak dengan menggunakan (HTML, jQuery) 

3. Alat dan Bahan

• Laptop
• Teks Editor
• Web browser
• Gambar Background

4. Pelaksanaan

• Sebelum itu kalian harus memiliki file dibawah ini

• Buka Text Editor (Sublime Text)
• Ketik kode dibawah ini

•  Untuk file jQuery-nya kalian bisa download disini
• Setelah itu save dan buka  dalam web browser.

DEMO | DOWNLOAD 

5. Hasil

• Background  bergerak (Slideshow) 

By Nurroin's Blog

Kali ini saya akan berbagi sedikit ilmu tentang cara membuat tampilan Login dengan CSS dan HTML. Kali ini saya menggunakan CSS external , yaitu CSS yang berada berbeda file dengan file html nya  HTML.

1.PENGERTIAN

Login juga biasa disebut sebagai log in, log on, logon, signon, sign on, signin, sign in) adalah proses untuk mengakses komputer dengan memasukkan identitas dari akun pengguna dan kata sandi guna mendapatkan hak akses menggunakan sumber daya komputer.

2. ALAT & BAHAN

• PC / Laptop
• Sublime Text / Text editor lainya
• Browser 

3. LANGKAH KERJA

Pada pembuatan tampilan login kali ini saya membuat dua file yaitu file html dan CSS untuk tampilan loginnya .
Pertama tama kita buat file CSS nya terlebih dahulu dan mulai mengcoding tampilan dari login. Di bawah ini saya beri contoh tampilan file CSS yang saya buat :

body {
    background:url(background.jpg);
    width: 100%;
    height: 100%;
}

h2 {
    font-family: raleway;
    text-align: center;
    font-size: 30px
}

#login {
    max-width: 320px;
    margin: 100px auto;
    background :#F5F5F5;
    box-shadow: 0 0 10px #aaa
}

#login h3 {
    text-align: center;
    font-family: raleway;
    padding:20px 10px;
    background-color: #3CB371;
    color: white;
}

#login footer {
    text-align: center;
    font-family: raleway;
    padding:20px 10px;
    background-color: #3CB371;
    color: white;
}

fieldset {
    margin: 0;
    border: none;
}

form {
    padding: 0%;
    margin-top: 0%;
    padding: 15px;
}

input[type="text"] , input [type="email"] {
    width: 235px;
    padding: 1em;
    margin-top: 1em;
    color: #888;
}

input[type="text"]:focus {
    color: #3CB371;
    border: 2px solid #3CB371;
}

input[type="password"] {
    width: 235px;
    padding: 1em;
    margin-top: 1em;
    color: #888;
}

input[type="password"]:focus {
    color: #3CB371;
    border: 2px solid #3CB371;
}

input[type="submit"] {
    font-family: raleway;
    font-size: 14px;
    width:100%;
    padding: 1.1em;
    margin: 1.5em 0;
    color: #888;
    background-color: #708090;
    border:none;
    color: #eee;
    border-bottom: 4px solid transparent ;
}

input[type="submit"]:hover {
    background-color:  #2F4F4F ;
}

a {
    text-decoration: none;
    color: white;
}

Setelah selesai membuat file CSS nya, selanjutnya buat file html untuk memanggil CSS dan memeri isi dari tampilan login.
Di bawah ini adalah contoh file html yang saya buat :

<!DOCTYPE html>
<html>
<head>
    <title>Login SMK N 2 Karanganyar</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2><font color="#20B2AA"> BELAJAR MEMBUAT TAMPILAN LOGIN DENGAN CSS </font></h2>
<div id="login">
<h3>Login</h3>
<fieldset>
    <form >
        <input type="text" name="username" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
        <input type="submit" name="submit" value="Login">
    <div class="border-p"> </div>
    </form>
</fieldset>
<footer><a href="#">Belum punya account ?</a> </footer>
</div>
</body>
</html>

Setelah selesai membuat kedua file , lalu simpan di dalam satu folder yang sama.

Setelah jadi satu folder  lalu jalanke file html nya.


Itu tadi adalah contoh dari tampilan login saya buat. Sekian dari saya kawan kawan semoga bermanfaat ya , Terima Kasih 

By Nurroin's Blog

1. Pengertian

By Nurroin's Blog

Assalamu'alaikum

A. Pendahuluan
   
   LAMP adalah istilah yang merupakan singkatan dari Linux, Apache, MySQL dan Perl/PHP/Phyton. Merupakan sebuah paket perangkat lunak bebas yang digunakan untuk menjalankan sebuah aplikasi secara lengkap. Dan biasanya salah satu dari keempat itu sering ada yagn tidak  bisa diinstal atau error, dan untuk solusinya kita harus unistall LAMP tersebut, dengan menggunakan Terminal.

B. Alat dan Bahan

• Web Browser
• Terminal
• Koneksi Internet

C. Tujuan

• Untuk Meng-unistall LAMP

D. Pelaksanaan 

1. Buka Terminal (CTRL+ALT+T).
Masuk sebagai superuser/root :

~$ su

2.  Ketikan di Terminal :
Padahal cara tersebut kurang tepat, karena menguninstall LAMP dengan cara tersebut tidak hanya me-remove LAMP tetapi juga akan me-remove sebagian dari program Anda yang ada seperti, Open Office, Games, dll.

3. Pertama kita hapus terlebih dahulu PHPMyAdmin, dengan perintah sebagai berikut.

 # sudo apt-get purge libapache2-mod-auth-mysql phpmyadmin

Jika muncul pertanyaan, pilih saja Yes

4. Kedua adalah menghapus MySQL. Cari terlebih dahulu paket-paket yang berhubungan MySQL. Lakukan dengan perintah sebagai berikut :

# dpkg -l | grep ^ii | grep mysql-server | awk -F' ' '{ print $2 }'

kemudian akan muncul daftar paket-paket yang berhubungan dengan MySQL. Maka kite perlu menguninstall paket-pakte tersebut. Sebagai contoh misal dibawah ini adalah daftar paket yang berhubungan dengan MySQL.

1. mysql-server
2. mysql-server-5.5
3. mysql-server-core-5.5

 Jadi kita perlu menhapus daftar paket diatas dengan perintah sebagai berikut :

# apt-get purge mysql-server mysql-server-5.5 mysql-server-core-5.5

5. MySQL sudah terhapus, kini gantian untuk menghapus Apache. Sama dengan cara diatas, kita cari dulu paket-paket yang berhubungan dengan Apache dengan perintah seperti di bawah ini

# dpkg -l | grep ^ii | grep apache2 | awk -F' ' '{ print $2 }'

akan muncul daftar paket-paket yang berhubungan dengan apache apache2

1. apache2
2. apache2-bin
3. apache2-data
4. apache2-mpm-prefork
5. libapache2-mod-php5

Nah, kita hanya perlu menhapus paket-paket yang terdaftar diatas dengan perintah seperti di bawah ini

# apt-get purge apache2 apache2-mpm-prefork apache2-data apache2-bin libapache2-mod-php5

6. Kemudian, ketikan di Terminal :

# apt-get autoremove

kemudian ketikan :

# apt-get autoclean

Setelah itu, update sistem linux kalian

# apt-get update

E. Kesimpulan
   Setelah proses unistall LAMP selesai kalian bisa install LAMP kembali, apabila terjadi error lagi, berarti laptop kalian tidak support, sehingga langkah yang paling tepat adalah denga intall ulang lagi.

F. Referensi

• http://febroherdyanto.blogspot.co.id/2015/05/langkah-langkah-yang-tepat-dalam.html 

By Nurroin's Blog

Nah, bertemu lagi dikesempatan kali ini dengan cuaca yang cerah. Kesempatan kali ini kita masih akan membahas tentang HTML yaitu tentang Form dan HTML5. Langsung saja kita masuk ke materinya.

I. Latar Belakang

   HTML <form> elemen mendefinisikan bentuk yang digunakan untuk mengumpulkan input dari user. Tag <input> elemen adalah elemen bentuk yang paling penting. <Input> elemen dapat ditampilkan dalam beberapa cara, tergantung pada jenis atribut seperti dibawah ini.

• <Input type = "text"> : Mendefinisikan satu baris kolom input teks
• <Input type = "radio"> : Mendefinisikan sebuah tombol radio (untuk memilih salah satu dari banyak pilihan)
• <Input type = "submit"> : Mendefinisikan sebuah tombol submit (untuk mengirimkan formulir)

    Tag <select> elemen mendefinisikan daftar drop-down. Tag <option> elemen mendefinisikan opsi yang bisa dipilih. Secara default, item pertama dalam daftar drop-down yang dipilih. Untuk menentukan pilihan pra-dipilih, tambahkan dipilih atribut untuk opsi menggunakan selected setelah value.

    Tag <textarea> elemen mendefinisikan field input multi-line ( text area ). Tag texarea harus memerlukan atribut yaitu menentukan jumlah terlihat dari baris dalam area teks. Atribut Cols menentukan lebar terlihat dari area teks.

    Tag <button> elemen mendefinisikan diklik tombol. Jika kita ingin membuat nama yang kita masukkan tidak dapat diubah bisa menggunakan tag readonly.

    HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
     Yang paling menarik elemen HTML5 baru:

• New unsur semantik seperti <header>, <footer>, <article>, dan <section>.
• New atribut elemen bentuk seperti nomor, tanggal, waktu, kalender, dan jangkauan.
• New elemen grafis : <svg> dan <canvas>.
• New unsur multimedia : <audio yang> dan <video>.

     Sejarah HTML sejak awal dari World Wide Web (W3), ada banyak versi HTML :

• 1989  :   Tim Berners-Lee invented www
• 1991  :  Tim Berners-Lee invented HTML
• 1993  :   Dave Raggett drafted HTML+
• 1995  :   HTML Working Group defined HTML 2.0
• 1997  :   W3C Recommendation: HTML 3.2
• 1999  :   W3C Recommendation: HTML 4.01
• 2000  :   W3C Recommendation: XHTML 1.0
• 2008  :   WHATWG HTML5 First Public Draft
• 2012  :   WHATWG HTML5 Living Standard
• 2014  :   W3C Recommendation: HTML5
• 2016  :   W3C Candidate Recommendation: HTML 5.1

II. Alat dan Bahan 

• Laptop
• Software Sublime Text
• OS Linux
• W3S

III. Tujuan 

      Yaitu untuk mempelajari dan memperdalam pemahaman dari HTML dasar.

IV. Tahap Pelaksanaan

     A. Form 

• Masukkan coding dibawah ini untuk membua form yang berisi komponen select, button, input, radio, textarea, password beserta atributnya.

•  Keterangan :
• Select : terdapat di line ke 10 sampai 17. Pada tag <select> ini harus menggunakan option yang digunakan untuk memilih dan memberi efek drop-down.
• Button : terdapat di line ke 20 dan 21. Ke 3 button tersebut berbeda, button line 20 menggunakan atribut onclik yang berfungsi jika kita tekan langsung akan tampil hasilnya. Sedangkan line 21 ada 2 button yaitu bertype submit dan reset. Submit ini digunakan untuk menuju ke proses selanjutnya bisa juga untuk menyimpan jika ada penyimpanannya. Reset digunakan untuk menghapus seluruh data yang diinputkan user. 
• Input : terdapat di line ke 1 dan 2. Pada line 1 hanya menggunakan type text untuk tempat user memasukkan inputan. Yang line ke 2 menggunakan readonly yang muncul ditampilan hanya dapat dibaca saja oleh user dan tidak dapat diganti. 
• Radio : terdapat di line ke 9 sampai line 11. Didalam tag radio harus menggunakan type="radio" yang digunakan untuk mengidentifikasi type apa yang kita pilih. Pada line 10 terdapat atribut tambahan yaitu checked yang berfungsi untuk membuat tampilan awal saat kita membuka file, radio langsung otomatis terisi sesuai checked yang kita masukkan dimana.
• Textarea : terdapat di line ke 20 dan 21. Saat kita membuat textarea harus merubah cols dan rows nya terlebih dahulu. Kita memerlukan berapa cols dan rows sesuai kebutuhan kita.
• Password : pada password ini menggunakan input type="password" jika kita memasukkan password tidak akan terlihat dan akan digantikan dengan bullet.

Hasil dari coding diatas seperti gambar diatas.

• Keterangan : 
• Input yang berwarna abu-abu tersebut berarti disable dan readonly. Disable itu kita masih bisa memasukkan kursor kedalam input sedangkan readonly kita hanya bisa membacanya tanpa kita bisa memasukkan kursor kedalam input.
• Pada tahun lahir jika kita tekan panah kecil yang ada disebelah kanan tersebut akan menghasilkan efek drop-down dan kita bisa memilih tahun lahir kita.

     B. HTML5

     - Contoh Sederhana HTML5 dan unsurnya

• Masukkan coding dibawah ini untuk membuat program sederhana HTML5

Hasil dari coding diatas. Meta itu hanya digunakan untuk melengkapi coding dari HTML 5.

    - Menambah elemen baru ke halaman HTML dan HTML5Shiv

• Masukkan coding dibawah ini untuk membuat elemen baru dan HTML5shiv untuk menyediakan kompitabilitas untuk IE broser tua dari IE 9.

• Keterangan :
• Line 9-16 merupakan Add New element untuk HTML menggunakan unsur css didalamnya. Tag <myHero> menunjukkan elemen baru ke halaman HTML.
• Line 5-7 merupakan sebuah komentar yang didalamnya terdapat Shiv.  Jika kita tidak dapat mendownload dan menyimpan HTML5 Shiv di dalam situs.

Hasil dari coding diatas yang didalanya terdapat Add new HTML dan HTMLShiv

- HTML5 Semantic

• Silahkan masukkan coding dibawah ini untuk membuat Semantic pada HTML5. Semantic jelas menggambarkan artinya untuk kedua browser dan pengembang. 

• Hasilnya keseluruhan akan seperti dibawah ini beserta penjelasan hasilnya.

Gambar A

Gambar B

• Keterangan :

Gambar 1. Menggambarkan penerapan fungsi section yang terjadi

Gambar 2. Menggambarkan peneraan fungsi dari Article, Header dan Nav(Facebook, Twitter, W3Schools)

Gambar 3. Menggambarkan penerapan fungsi dari figure (Gambar Peta Indonesia) dan figcaption (* Gambar Peta Nusantara)

Gambar 4. Menggambarkan penerapan fungsi dari Aside untuk beberapa konten selain dari konten itu ditempatkan.

Gambar 5. Menggambarkan penerapan fungsi dari footer

    - Migrasi HTML5

• Masukkan coding dibawah ini untuk membuktikan perbedaan sintaks dari HTML4 dan HTML5.

V. Kesimpulan

    Dari sharing yang kita bahas diatas dapat disimpulkan bahwa form terderi dari banyak komponen pendukung yaitu select, button, input, textarea, radio, penggunaan atribut password, penggunaan atribut yang readonly dan disable pada input. Dan versi baru dari HTML5 yang memiliki komponen-komponen terbaru yang dapat mendukung semua browser modern. 

VI. Referensi

• http://www.w3schools.com
• https://id.wikipedia.org/wiki/HTML5

Sekian dan Terimakasih.

SMK Bisa !!

Wasalamu'alaikum wr.wb.

By Nurroin's Blog