Kang Alim

Membuat Aplikasi Web HTML5 Menggunakan Intel XDK

Intel XDK memungkinkan developer untuk membuat aplikasi jenis web dan hybrid menggunakan teknologi web seperti HTML5, JavaScript, dan CSS3 untuk di banyak platform. Developer dapat menulis satu aplikasi yang dapat berjalan secara lintas platform dan perangkat mobile tanpa perlu melakukan modifikasi.

Intel XDK mendukung semua platform besar saat ini seperti Microsoft Windows, OS X, dan Ubuntu Linux. Tool ini memberikan developer sebuah alur kerja yang lengkap untuk pengembangan, debugging, pengujian, dan deploy aplikasi mereka pada perangkat berbasis platform yang dituju.

Intel XDK cocok untuk developer pemula maupun yang telah berpengalaman serta menyediakan alur kerja yang telah disederhanakan untuk membuat developer dapat dengan mudah merancang, membangun, dan deploy aplikasi web maupun hybrid di beberapa toko aplikasi dan beragam jenis perangkat.

Developer dapat memulai pengembangan aplikasi dari nol atau bisa menggunakan proyek demo yang telah ada atau template lainnya. Pengetikkan kode menggunakan HTML5 Brackets Editor yang berbasis open source. HTML5 Brackets Editor menyediakan beberapa fitur yang akan mempermudah developer seperti penyelesaian koding otomatis dan menyediakan semua tool siklus siklus pengembangan aplikasi yang relevan untuk debugging, membangun, dan menguji aplikasi.

Artikel ini akan menunjukkan pembaca bagaimana membuat aplikasi web yang bersifat native menggunakan HTML5, JavaScript, dan CSS3. Dalam hal ini akan dijelaskan bagaimana cara menginstal Intel XDK, membuat proyek log-in form yang sederhana, style, dan mengujinya pada emulator.

Beberapa referensi untuk artikel ini:

Instalasi Intel XDK

Unduh dan instal versi terbaru dari Intel XDK di http://xdk-software.intel.com. Tool pengembangan ini disediakan secara gratis. Kamu perlu membuat akun Intel XDK untuk memulai dan menguji aplikasi kamu pada perangkat pengjuian.

Untuk mendapatkan tutorial mengenai bagaimana menjalankan aplikasi pada perangkat pengujian, kunjungi halaman Get Started with the Intel XDK. Akun Intel XDK tidak dibutuhkan apabila kamu hanya menggunakan emulator dari Intel XDK untuk menguji aplikasi kamu.

Buat Proyek Kosong

Kamu dapat memulai sebuah proyek dengan menggunakan template, demo, atau proyek kosong. Tool ini menyertakan alur kerja yang efisien, yang memandu developer dari tahap pengembangan, pengujian, debugging, hingga penyebaran secara bertahap dalam pengembangan aplikasi.

Editor teks pada tab “Develop” berbasis Brackets Editor di mana kamu bisa melakukan proses edit pada aplikasi kamu. Dokumentasi Intel XDK akan memberikan rincian mengenai cara menggunakan setiap tab di Intel XDK.

Gambar 1 : Memulai Proyek Baru

Gambar 2 : Membuat Proyek Kosong

Buat Log-in Form menggunakan HTML5, JavaScript, dan CSS3

Kamu sekarang telah siap untuk mengoding file index.html-mu untuk membuat log-in form. Pertama, kamu harus mulai dengan tab pembuka elemen form. Jenis masukan untuk nama pengguna dan kata sandi adalah teks dengan placeholder. Placeholder mengambarkan nilai dari input field.

<form action="" method="post" name="login" class="little-chef-form">
    <label>
                <span>Username:</span> 
                <input type="text" name="username" placeholder="Username" id="username" />
    </label>

    <label>
                <span>Password:</span>
                <input type="password" name="password" placeholder="Password" />
    </label>
</form>

<label>

<span>Username:</span>

</label>

<label>

<span>Password:</span>

</label>

</form>

Contoh Kode 1 : Log-in Form dengan HTML5

Gambar 3 : Tata letak Log-in Form pada Emulator

Jenis input berikutnya adalah tombol. Setelah pengguna menekan tombol log-in, maka JavaScript validateForm () akan dipanggil untuk memvalidasi log-in form. Kamu dapat menggunakan HTML5 untuk memvalidasi log-in form, namun lebih baik menggunakan JavaScript karena beberapa atribut HTML5 terbatas pada browser terbaru.

<label>
                <span> </span>
                <input type="button" class="button" value="Login" onclick="return validateForm()" />
</label>

<label>

</label>

Contoh Kode 2 : Tombol Input dengan HTML5

Berikut adalah contoh penggunaan JavaScript untuk memvalidasi form. File JavaScript harus disimpan dengan ekstensi .js.

function validateForm() {
    var formUsername = document.forms.login.username.value;
    var formPassword = document.forms.login.password.value;

    // Validate username and password
    if (formUsername === null || formUsername === "") {
        alert("Username must be filled out");
    }
    else if (formPassword === null || formPassword === "") {
        alert("Password must be filled out");
    }
    else if (formUsername.length < MINLENGTH || formPassword.length < MINLENGTH) {
        alert("The minimum length of username and password at least " + MINLENGTH);
    }
    else {
        // Call api function to check whether the username and password exist in the server
        return;
        }        
        alert("Login failed!!!");
    }

function validateForm() {

var formUsername = document.forms.login.username.value;

var formPassword = document.forms.login.password.value;

// Validate username and password

if (formUsername === null || formUsername === "") {

alert("Username must be filled out");

}

else if (formPassword === null || formPassword === "") {

alert("Password must be filled out");

}

else if (formUsername.length < MINLENGTH || formPassword.length < MINLENGTH) {

alert("The minimum length of username and password at least " + MINLENGTH);

}

else {

// Call api function to check whether the username and password exist in the server

return;

}

alert("Login failed!!!");

}

Contoh Kode 3 : Validasi form dengan JavaScript

Jika pengguna gagal melakukan login, maka data yang dimasukkan ke dalam form akan dibersihkan dan memberikan pengguna untuk memasukkan kembali datanya. Jika pengguna berhasil login, maka form akan dibersihkan dan dimatikan seperti fungsi di bawah ini :

function clearAndDisableForm(form) {   
    if (form == formType.LOGIN_FORM) { 
        // Clear the form       
        document.forms.login.username.value = '';
        document.forms.login.password.value = '';
        // Diabled the form
        document.forms.login.username.disabled = true;
        document.forms.login.password.disabled = true;
    }
}

function clearAndDisableForm(form) {

if (form == formType.LOGIN_FORM) {

// Clear the form

document.forms.login.username.value = '';

document.forms.login.password.value = '';

// Diabled the form

document.forms.login.username.disabled = true;

document.forms.login.password.disabled = true;

}

Contoh Kode 4 : Bersihkan dan Matikan form dengan JavaScript

Tautan untuk menuju file skrip eksternal “js/Login.js” yang menggunakan script tag dan atribut sumber dari index.html.

<script src="js/Login.js" type="text/javascript"></script>

1	<script src="js/Login.js" type="text/javascript"></script>

Contoh Kode 5 : Script Tag

Ini merupakan sebuah contoh lengkap dari log-in form menggunakan HTML5 adalah sebagai berikut :

<html>
    <head>     
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />  

    <title>Little Chef Login</title>
    <script src="js/Login.js" type="text/javascript"></script>
    </head>
    
    <body>
        <form action="" method="post" name="login" class="little-chef-frm">
            <h1>
Little Chef Log in
                <span>Please login or sellect other options </span>
            </h1>
<label>
                <span>Username:</span> 
                <input type="text" name="username" placeholder="Username" id="username" autofocus required />
            </label>

            <label>
                <span>Password:</span>
                <input type="password" name="password" placeholder="Password" />
            </label>

            <label>
                <span> </span>
                <input type="button" class="button" value="Login" onclick="return validateForm()" />
            </label>
          
            <label>
                <span> </span>
                <input type="button" class="button" value="Reset Password" onclick="return resetPassword()" />
            </label>
          
            <label>      
                <span> </span>
                <input type="button" class="button" value="Register New User" onclick="return registerNewUser()" />   
            </label>
        </form>
<table id="myTable"></table>
</body>    
</html>

<html>

<head>

<title>Little Chef Login</title>

</head>

<body>

<h1>Little Chef Log in

<span>Please login or sellect other options </span>

</h1>

<label>

<span>Username:</span>

</label>

<label>

<span>Password:</span>

</label>

<label>

</label>

<label>

</label>

<label>

</label>

</form>

</body>

</html>

Contoh Kode 6 : Contoh Lengkap dari log-in form dengan HTML5

Untuk bentuk style dari tampilan log-in form maka gunakan CSS3. Cara yang paling umum untuk memasukkan style sheet adalah eksternal, internal, dan inline. Style sheet eksternal merupakan bentuk yang paling ideal digunakan oleh banyak halaman web. Setiap halaman harus menyertakan tautan ke style sheet dengan tag <link> di dalam head section.

<head>     
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>

<head>

</head>

Contoh Kode 7 : tag style sheet eksternal

Untuk menambahkan 1 pixel border dengan warna abu-abu terang di sekitar teks input dan input password field, gunakan “border: 1px solid #CCC”. Dengan 6 digit nilai heksadesimal warna, kamu bisa membuat style warna pada teks, latar belakang, dan border. Nilai bawaannya adalah #000000.

Kamu juga dapat menggunakan nama warna seperti red, green, blue, dan lainnya atau menggunakan pemilih warna HTML. Salah satu cara menggunakan pixel untuk menentukan lebar adalah dengan kode “line-height:15px”. Hal ini juga dapat menentukan ruang antara garis dalam dua paragraf.

Selain itu, dengan menggunakan “margin-bottom: 16px”, kamu dapat merubah margin di bagian bawah. Demikian juga dengan margin-right dan margin-top dapat menentukan margin di bagian bawah maupun atas pada sebuah field.

.little-chef-form input[type="text"], .little-chef-form input[type="password"], .little-chef-form select{
    border: 1px solid #CCC;
    color: #888;
    background-color: #000000

    line-height:15px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
}

.little-chef-form input[type="text"], .little-chef-form input[type="password"], .little-chef-form select{

border: 1px solid #CCC;

color: #888;

background-color: #000000

line-height:15px;

margin-bottom: 16px;

margin-right: 6px;

margin-top: 2px;

}

Contoh Kode 8 : Input field style dengan CSS3

Contoh di bawah adalah style dari tampilan tombol. Hal ini menentukan warna latar belakang, warna teks pada tombol, dan border. Untuk style dari bentuk tombol, gunakan border-radius. “padding: 4px 25px 4px 25px” akan menentukan ukuran tombol.

.little-chef-form .button {
    background: #EEE;
    border: 1px solid #DDD;
    padding: 4px 25px 4px 25px;
    color: #333;
    border-radius: 4px;
}

.little-chef-form .button {

background: #EEE;

border: 1px solid #DDD;

padding: 4px 25px 4px 25px;

color: #333;

border-radius: 4px;

}

Contoh Kode 9 : Style tombol dengan CSS3

Tes di Emulator

Tab “Emulate” digunakan untuk menguji fungsi dan tata letak aplikasi kamu pada koleksi dari perangkat virtual mobile. Bawaannya adalah Motorola Droid 2 dengan perangkat berbasis Android.

Gambar 4 : Log-in Form pada Emulator

Setelah berhasil menciptakan log-in form dan mengujinya pada emulator, maka kamu dapat mencoba untuk membuat reset kata sandi dan form registrasi untuk pengguna baru.

Gambar 5 : Reset Kata Sandi

Gambar 6 : Registrasi Pengguna Baru

Rangkuman

Intel XDK merupakan tool pengembangan aplikasi cross-platform yang terintegrasi dengan HTML. Beragam tab di bagian atas akan memandu developer untuk membuat aplikasi dengan mudah melalui beragam tugas pengembangan.

Tool ini dapat membuat developer mengembangkan dan menyebarkan aplikasi mereka untuk satu atau beberapa toko aplikasi dengan sangat mudah. Dokumen ini juga menunjukkan kepada pengguna baru, bagaimana menggunakan Intel XDK untuk membuat aplikasi web yang bersifat native.

Tentang Penulis

Nancy Le adalah seorang software engineer di Software and Services Group Intel yang bekerja pada bagian proyek skala prosesor Intel Atom.

Referensi

HTML5 training: http://software.intel.com/html5

sumber https://teknojurnal.com/tutorial-aplikasi-web-html5-dengan-intel-xdk/

Apa Itu Intel XDX dan HTML 5

Android saat ini adalah salah satu mobile platform terpopuler di dunia. Kepopulerannya tidak hanya di kalangan pengguna ponsel saja namun juga di kalangan pengembang aplikasi. Bagi developer, untuk membuat aplikasi Android dengan HTML5 kini semakin mudah.

Untuk membuat aplikasi Android dengan HTML5, sudah tersedia banyak development tool yang dapat digunakan salah satunya adalah Intel XDK. Seperti namanya, Intel XDK disokong oleh Intel, salah satu perusahaan mikrokonduktor terbesar di Indonesia. Development tool ini disediakan oleh Intel secara gratis.

Yang membuat Intel XDK ini unik dibandingkan dengan development tool lainnya adalah aplikasi Android-nya dibuat dengan menggunakan bahasa HTML5 dan juga dapat membuat aplikasi mobile untuk platform lainnya selain Android seperti Windows Phone 8, iOS, atau BlackBerry.

Tanpa panjang lebar lagi, saya akan menjabarkan cara untuk membuat aplikasi Android dengan HTML5 menggunakan Intel XDK.

Pertama-tama, unduh Intel XDK di tautan ini: https://software.intel.com/en-us/intel-xdk

Pengenalan Intel XDK

Ketika kita menjalankan Intel XDK, akan terlihat 5 menu utama yang dapat digunakan, yaitu:

Develop

Di menu inilah kita mengkoding aplikasi yang kita buat. Intel sudah menyediakan berbagai macam API HTML5 yang dapat kita gunakan untuk mengembangkan aplikasi kita. Selain menyediakan antarmuka untuk pengkodingan, di menu ini juga terdapat fitur App Designer yang bisa kita gunakan untuk mendesain tampilan antarmuka aplikasi kita tanpa koding.

Intel sudah menyediakan contoh HelloWorld di Intel XDK untuk dapat kita mengetes langsung alur penggunaan Intel XDK

Emulate

Jika kita sudah mengkoding dan ingin melihat seperti apa jadinya aplikasi yang kita buat, di menu Emulate kita dapat mengemulasikan aplikasi kita. Di menu ini terdapat berbagai macam pilihan emulasi sesuai dengan target aplikasi kita.

Test

Setelah aplikasi yang kita buat sudah jadi dan ingin kita tes di ponsel kita, kita dapat menggunakan menu Test. Di sinilah Intel XDK akan mem-push aplikasi kita ke layanan cloud untuk kemudia dapat kita unduh di ponsel kita dan langsung dicoba aplikasinya.

Build

Setelah kita sudah menyelesaikan seluruh pengembangan aplikasi kita dan ingin mendistribusikan aplikasi kita, kita dapat membuat file aplikasi di menu Build. Ada banyak pilihan target mobile platform yang dapat kita gunakan salah satunya Android.

Service

Di menu ini, kita dapat menggunakan berbagai macam layanan tambahan yang disediakan oleh Intel beserta partner-partner mereka.

Kehadiran Standar Resmi HTML5

HTML5 merupakan kelanjutan dari HTML 4 yang tidak diupdate sejak tahun 1999. Dimana W3C sebagai badan yang membuat standar HTML lebih berminat mengembangkan XHTML daripada melanjutkan HTML.

Setelah beberapa tahun pengembangan, XHTML ternyata tidak sesuai dengan harapan. XHTML 2.0 tidak kunjung selesai, sehingga beberapa programmer web bergabung membentuk badan tersendiri: WHATWG. WHATWG kemudian mengembangkan format yang akan menjadi cikal bakal HTML5. Singkat cerita, W3C meninggalkan XHTML 2.0 dan ikut mengembangkan HTML5 bersama WHATWG.

Tepat pada tanggal 28 Oktober 2014 lalu, W3C telah resmi merampungkan standar HTML5 (sumber resminya dapat dibaca pada http://www.w3.org/blog/news/archives/4167). Walaupun demikian, saat ini HTML5 telah didukung hampir oleh semua web browser modern, sehingga sudah saatnya kita mulai membuat kode HTML menggunakan standar HTML5.

HTML5 vs (HTML 4 dan XHTML 1.1)

HTML5 adalah versi terbaru dari HTML. Versi terakhir HTML sebelum HTML5 adalah HTML 4.01. dan XHTML 1.1. Kali ini kita akan membahas apa saja fitur-fitur baru yang tersedia di dalam HTML5 serta perbedaannya dengan versi HTML sebelumnya.

Perkembangan HTML terhenti pada versi 4.01 di tahun 1999. W3C sebagai badan yang bertanggung jawab dalam standarisasi teknologi internet (termasuk HTML), kemudian beralih mengembangkan XHTML yang juga akhirnya menemui jalan buntu pada versi 2.0. Jika sebelumnya anda sudah terbiasa menggunakan HTML 4.01 ataupun XHTML 1.1, terdapat perubahan kecil pada HTML5.

Pada dasarnya HTML5 adalah gabungan ‘best practice‘ dari HTML 4.01 dan XHTML. Hampir semua tag atau elemen pada HTML 4.01 maupun XHTML 1.1 dapat digunakan dalam HTML5.

Beberapa perbedaan yang akan ditemukan dalam HTML5:

Penulisan doctipe pada HTML5 lebih sederhana. Mungkin inilah perbedaan paling mencolok dari halaman HTML yang ditulis menggunakan HTML5 atau tidak. Penulisan Doctype atau DTD pada HTML5 menjadi lebih sederhana: <!DOCTYPE html>.

Penulisan type atribut untuk tag <style> dan <script> tidak diperlukan pada HTML5. Hal ini karena secara default web browser akan menggunakan text/css untuk tag <style>, dan text/javascript untuk tag <script>. Sebagai contoh, untuk menggunakan external CSS, Pada HTML versi sebelumnya kita menuliskan tag <style> secara lengkap: <style type=”text/css”>…kode CSS… </style>, namun dalam HTML5 kita bisa membuatnya lebih sederhana: <style>…..kode CSS…..</style>

Penulisan meta tag karakter set (charset) pada HTML5 menjadi lebih sederhana: <meta charset=”utf-8″>, dibandingkan versi sebelumnya: <meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />.

Pada HTML5, tag yang berdiri sendiri (void element) tidak harus ditutup seperti dalam XHTML. Penulisan tag <br> (break) dapat ditulis dengan <br> maupun <br />.

Walaupun tidak dianjurkan, sebuah tag pada HTML5 boleh ditulis tanpa tag awal atau tanpa tag akhir. Sebagai contoh, kita tidak perlu menutup tag <p> dengan tag </p>.

Penulisan tag dan atribut adalah case-insensitive di dalam HTML5, sehingga tag <p> dan tag <P> akan dianggap sama. Hal ini berbeda dengan XHTML yang mengharuskan seluruh tag ditulis dalam huruf kecil.

Penulisan atribut tidak harus di dalam tanda kutip. Sebagai contoh: <p class=satu> adalah valid. Namun jika nilai atribut terdiri dari karakter spasi, maka tetap harus menggunakan tanda kutip, seperti: <p class=”satu dua tiga”>.

HTML5 mendukung multimedia secara langsung menggunakan tag <audio> dan <video>, sehingga kita tidak perlu tergantung kepada aplikasi pihak ke-3 seperti flash player.

HTML 5 hanya memiliki 1 versi, tidak seperti pendahulunya yang memiliki 3 versi (pada HTML 4 dan XHTML, anda akan menemukan versi strict, transitional, dan frameset).

Sebagai contoh, kode HTML berikut dinyatakan valid oleh validator HTML5 di http://validator.w3.org/:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Tes Validasi HTML5</TITLE>

  <style>

    .penting {

      color:blue;

     }

  </style>

</head>

<BODY>

   <p CLASS=penting>Paragraf ini menggunakan atribut tanpa 

      menggunakan tanda kutip </p>

   <br>

   <p> Paragraf ini tidak memiliki penutup tag

</body>

</html>

Perbedaan HTML5 dengan HTML 4 - Hasil validasi W3C

Dari perbedaan diatas, terlihat bahwa HTML5 ‘lebih bebas‘ dari XHTML. Akan tetapi sebaiknya kita tetap menggunakan penulisan yang ‘rapi‘, seperti menggunakan huruf kecil untuk semua tag, menutup semua tag dan memberi tanda kutip dalam setiap nilai atribut.

XHTML5 : HTML5 “rasa” XML

Jika beberapa aturan diatas dirasa terlalu longgar (terutama jika anda banyak menggunakan XHTML sebelumnya), HTML5 memiliki ‘rasa‘ yang lebih ketat aturan, yakni XHTML5. Di dalam XHTML5, seluruh tag harus ditulis dengan huruf kecil, atribut harus berada di dalam tanda kutip, dan setiap tag harus ditutup.

XHTML5 bukanlah versi lain dari HTML5, akan tetapi hanya HTML5 dengan beberapa aturan dan syntax untuk memenuhi syarat XML.

Untuk menggunakan XHTML5, kita butuh menambahkan atribut xmlns=”http://www.w3.org/1999/xhtml” pada tag <html>, dan menggunakan MIME type: application/xhtml+xml pada http header (diset melalui web server).

Contoh dokumen XHTML5 adalah sebagai berikut:

<!DOCTYPE html>

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title></title>

  <meta charset="UTF-8" />

  </head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg">

    <rect stroke="black" fill="blue" x="45px" y="45px"

    width="200px" height="100px" stroke-width="2" />

  </svg>

  </body>

</html>

Saat ini penggunaan XHTML5 tidak terlalu populer, karena memang lebih praktis menggunakan HTML5. XHTML5 akan berguna jika anda ingin menggunakan teknologi yang berbasis XML seperti SVG, MathML, Xlink,

Semoga pembahasan singkat ini bermanfaat

Membuat Server Web Lokal dengan XAMPP di Windows

Tentang XAMPP

XAMPP adalah gabungan beberapa aplikasi yang biasa digunakan untuk membuat sebuah server web di komputer lokal
XAMPP sering disebut juga aplikasi INSTALLERS, karena dipakai untuk menginstall banyak aplikasi server sekaligus ‘dengan cara mudah’.
XAMPP bisa diakses di alamat https://www.apachefriends.org/index.html
Anda dapat mendownload XAMPP secara langsung dari situsnya.
XAMPP memiliki berbagai macam versi untuk berbagai Sistem Operasi, baik Windows, Linux, maupun Mac OS.

Daftar Aplikasi Server yang ada pada XAMPP 5.5.30

Setiap versi XAMPP akan memiliki kumpulan aplikasi dengan versi yang berbeda beda pula.

TIPS.

Jika XAMPP anda pakai untuk membuat web untuk hosting, pastikan setiap versi aplikasi yang didalamnya memiliki versi yang sama dengan hosting yang anda pakai.

XAMPP memiliki versi portable dan installer

Cara yang paling mudah menggunakan XAMPP adalah pada versi portable.

Cara Menggunakan Versi Portable

Download Versi Portable. Dari halaman utama masuk Other Version => XAMPP For Windows => More Download => XAMPP Windows => [Pilih Versi] => Pilih xampp-portable-xxx
Simpan hasil download, kemudian ekstrak di folder C:\xampp
Masuklah ke folder C:\xampp kemudian cari file xampp-control.exe, jalankan dengan double-klik.
Klik Start di Apache dan MySQL, kemudia tunggu sampai berwaran hijau (jalan)
Untuk menguji apakah Apache telah berfungsi, buka browser, panggil alamat http://localhost
Untuk menguji apakah MySQL telah berfungsi, buka browser, panggil PHPMyAdmin di alamat http://localhost/phpmyadmin/

Membuat Password untuk Database

Masuk phpMyAdmin di alamat http://localhost/phpmyadmin
Klik tab User Accounts
Klik Edit untuk User Name: Root dan Host name: localhost
Klik Change Password
Masukan Password baru
Klik Go
Jika berhasil, muncul pesan berikut
Setelah password diganti, maka anda tidak akan bisa masuk phpMyAdmin secara langsung . Kita perlu membuat supaya phpMyAdmin menampilkan pop-up Login
Masuk folder C:\xampp\phpMyAdmin
Edit file config-inc.php dengan file editor, misalnya Wordpad atau Notepad
Ganti konfigurasi di bawah ini menjadi ‘http’
Maka setiap kali masuk phpMyAdmin, pop-up login akan selalu muncul.

Sinkronisasi Google Drive Di Linux Mint

Panduan singkat berikut untuk mengunduh (sinkronisasi) konten/file dalam google drive ke hardisk yang ada di komputer kita.

Catatan : Sistem operasi yang saya gunakan saat menerapkan teknik ini adalah Linux Mint

Langkah pertama, install grive terlebih dahulu :

sudo apt-add-repository ppa:nilarimogard/webupd8
sudo apt-get update
sudo apt-get install grive

Setelah terinstall, pindahlah ke folder yang kosong (atau ke folder yang akan disinkronkan datanya ke google drive).
Untuk pertama kalinya, otentikasikan grive kita dengan mengetikkan :

  grive -a

Perintah tersebut akan membuat sebuah URL, salin URL tersebut ke peramban (browser), login dengan akun google, di mana akun tersebut terdapat data yang akan disinkronkan dalam google drivenya. Akan diminta untuk melakukan konfirmasi, klik tombol Accept/Izinkan, lalu copy-paste 40-digit kode yang dibuat ke dalam terminal, lalu tekan Enter.

Setelah tombol Enter ditekan, upload (jika di direktori kerja ada file) dan download (mengunduh dari google drive) akan dimulai.
Anda juga dapat melakukan download file pada direktori tertentu, misalnya :

  grive -s SMK/

Perintah tersebut akan mengunduh semua berkas dalam direktori SMK di google drive.
Untuk perintah lengkapnya, silakan ketikkan grive –help di terminal kesukaan Anda.

Tips & Trick

Jika saat dilakukan sinkronisasi (unduh), tidak semua berkas tersinkron, cobalah menyalin berkas tersebut ke folder baru di google drive. Lalu sinkronkan folder baru tersebut. Yang penting semua berkas terunduh toh?

Referensi :

Cara Instalasi Aplikasi Ujian Berbasis Web Dengan CAT/ CBT

Ok file yang sudah kita download langsung simpan di folder root web server kita
- Di XAMPP, taruh di folder => XAMPP/htdocs/ ( Windows )
- Di WAMP, taruh di folder => WAMP/www/ ( Linux )
Buka folder XAMPP/htdocs, pastikan ada file “cat-master.rar”. Kemudian klik kanan, jika sudah terinstall WinRAR, pilih pilihan “Extract Here” :
Akan terbentuk folder “cat-master”, dan segera rename folder tersebut menjadi “cat”
Sekarang akses dengan web browser dengan alamat http://localhost/cat/, akan tampil tampilan sebagai berikut :

Itu berarti database dengan nama “db_cat” belum dibuat, lanjut ke langkah selanjutnya.
Buat database dengan nama “db_cat”, caranya buka http://localhost/phpmyadmin/
Klik menu “Basis Data” (a), buat database dengan nama “db_cat” (b), terakhir klik “Buat” (c)
Jika berhasil, nama database akan muncul di menu daftar nama database di menu sebelah kiri. Klik “db_cat” tersebut :

Kemudian klik menu “Import” (d), kemudian tombol “Pilih File” (e), terus cari file dengan nama “db_cat.sql”, yang terdapat dalam folder hasil ekstrak di langkah ke-3, (f), dan klik tombol “Open” (g)
Klik tombol “Kirim” :
Jika proses import berhasil dengan lancar, akan muncul peringatan warna hijau dan daftar tabel di menu sebelah kiri :
Sekarang akses kembali http://localhost/cat/, harusnya akan tampil tampilan sebagai berikut :

Jika masih ada error “A Database Error Occurred : Unable to connect to your database server using the provided settings.”, berarti setting database belum benar. Cek di file “application/config/database.php”. Harap samakan dengan setting sesuai default servernya. Di XAMPP kalau belum di-ubah-ubah akan seperti ini :
Selesai

Demikian lah , langkah-langkah setting aplikasi ujian online.

Semoga Bermanfaat

Donwload Aplikasi di sini atau Cbt atau di Di Sini aja

Trik Download Video di Facebook

Kita semua dah pada tahu kan kalau di facebook bisa unggah video apalagi sekarang ada yang sudah live alias langsung . Tapi pertanyaannya bagaimana ya cara downloadnya kalau di youtube tinggal klik di bagian download pasti semua sudah tahu ya.
Nah sekarang kita coba download video yang ada di facebook tanpa menggunakan software. Ok langsung kita siapkan ya dan langkah-langkah nya adalah sebagai berikut:

Log in ke facebookkita
Klik video yang ingin di download
Ubah URL facebooknya kedalam versi mobile caranya gimana? Caranya mudah berikut penjelasannya, contoh:URL video aslinya seperti ini http://www.facebook.com/storyblablablablabla
sekarang ganti dengan http://www.m.facebook.com/storyblablablablabla intinya : tinggal menambahkan huruf "m." di depan tulisan facebook (supaya berubah jadi versi mobile)
Setelah semua persiapan sudah selesai putar videonya.
Kemudian klik kanan pada video tersebut, biasanya ada tulisan untuk mendownload video (Save video as ...) atau secara otomatis file video akan di download.

Nah ini adalah trik jadul ya semoga bermanfaat

Tutorial Membuat Login Register dan Logout dengan PHP

Kali ini kami akan membuat login register dan logout yang sangat sederhana ..

Langkah Pertama kita aktifkan Xammp bagi Windows Lammp bagi linux.
1. Buka Notepad ++ atau aplikasi text editor yang kalian suka
kita buat folder dulu supaya mudah kita mengingatnya ok foldernya logreg
2. Kita buat script connect terlebih dahulu

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'logreg';
$konek = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Koneksi Gagal!');
mysql_select_db($dbname);
?>

lalu kita simpan dengan nama connect.php

3. Kita buat lagi script index

<?php
session_start();
if ( !isset($_SESSION['userid']) ) {
header('location:login.php');
}
else {
$usr = $_SESSION['userid'];
}
require_once('connect.php');
$query = mysql_query("SELECT * FROM anggota WHERE userid = '$usr'");
$hasil = mysql_fetch_array($query);
?>

<html>
<head>
<title>Halaman Utama</title>
</head>
<body>
<?php
echo "<h2>Selamat Datang, $usr</h2>";
echo "Nama Lengkap : " . $hasil['nama'] . "<br />";
echo "Email : " . $hasil['email'];
?>
<a href="logout.php"><b>Logout</b></a>
</body>
</html>

kita simpan lagi dengan nama index.php

4. Kemudian kita buat script login

<?php
session_start();
if( isset($_SESSION['userid']) ) {
header('location:index.php');
}
require_once('connect.php');
?>
<html>
<head>
<title>Login Member</title>
</head>
<body>
<table border="1" cellpadding="8" cellspacing="0">
<form action="proseslogin.php" method="post">
<tr>
<th colspan="2">Member Login</td>
</tr>
<tr>
<td>User ID </td>
<td><input name="userid" type="text"/></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Login" /></td>
</tr>
<tr>
<td colspan="2" align="center">Belum Jadi Anggota? <a href="register.php">Daftar</a></td>
</tr>
</form>
</table>
</body>
</html>

kita simpan lagi dengan nama login.php

5. Kemudian lanjut lagi kita buat script logout

<?php
session_start();
unset( $_SESSION['userid'] );
?>
<h2>Anda telah berhasil logout..</h2>
Silahkan klik <a href="login.php"><b>disini</b></a> untuk login kembali

kita simpan lagi dengan nama logout.php

6. Jangan lupa nyimpannya di folder logreg yang sudah kita buat tadi ya... kemudian kita buat script proses loginnya

<?php
session_start();
require_once ('connect.php');
$user = $_POST['userid'];
$pass = $_POST['password'];
$cekuser = mysql_query("SELECT * FROM anggota WHERE userid = '$user'");
$jumlah = mysql_num_rows($cekuser);
$hasil = mysql_fetch_array($cekuser);
if ( $jumlah == 0 ) {
echo 'User ID Belum Terdaftar!<br/>';
echo '<a href="login.php">« Back</a>';
} else {
if ( $pass <> $hasil['password'] ) {
echo 'Password Salah!<br/>';
echo '<a href="login.php">« Back</a>';
} else {
$_SESSION['userid'] = $user;
header('location:index.php');
}
}
?>

kita simpan lagi dengan proseslogin.php

7. Langkah selanjutnya kita buat script proses register

<?php
require_once ('connect.php');
$nama = $_POST['nama'];
$mail = $_POST['email'];
$user = $_POST['userid'];
$pass = $_POST['password'];
$cekuser = mysql_query("SELECT * FROM anggota WHERE userid = '$user'");
if ( mysql_num_rows($cekuser) <> 0 ) {
echo 'User ID Sudah Terdaftar!<br/>';
echo '<a href="register.php">« Back</a>';
} else {
if ( !$nama || !$mail || !$user || !$pass ) {
echo 'Masih ada data yang kosong!<br/>';
echo '<a href="register.php">« Back</a>';
} else {
$simpan = mysql_query("INSERT INTO anggota VALUES('$nama','$mail','$user','$pass')");
if ($simpan) {
echo 'Pendaftaran Berhasil, Silahkan <a href="login.php">Login</a>';
} else {
echo 'Proses Gagal!';
}
}
}
?>

ok kita simpan dengan nama prosesregister.php

8. Terakhir kita buat script registernya

<?php
session_start();
if(isset($_SESSION['userid'])) {
header('location:index.php'); }
?>
<html>
<head>
<title>Pendaftaran Member</title>
</head>
<body>
<table border="1" cellpadding="8" cellspacing="0">
<form action="prosesregister.php" method="post">
<tr>
<th colspan="2" align="center">Pendaftaran Anggota</td>
</tr>
<tr>
<td>Nama Lengkap </td>
<td><input name="nama" type="text" size="40" /></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="text" size="40" /></td>
</tr>
<tr>
<td>User ID </td>
<td><input type="text" name="userid" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="Submit" type="submit" value="Daftar"/></td>
</tr>
<tr>
<td colspan="2" align="center"><font color="#0000FF">Sudah Jadi Anggota? <a href="login.php">Login</a></font></td>
</tr>
</form>
</table>
</body>
</html>

kita simpan lagi dengan nama register.php

Sampai disini kita sudah bisa membuat login dengan cara yang sangat sederhana sekali... tetapi masih belum bisa jalan karena data basenya belum ada... ayo kita buat databasenya

CREATE TABLE `anggota` (
`nama` VARCHAR( 50 ) NOT NULL ,
`email` VARCHAR( 25 ) NOT NULL ,
`userid` VARCHAR( 25 ) NOT NULL ,
`password` VARCHAR( 25 ) NOT NULL ,
PRIMARY KEY ( `userid` )
);

kita simpan dengan nama logreg.sql

Setelah jadi dalam satu forder kemudian kita copy ke dalam htdoc yang ada di dalam xammp lalu kita coba browser terserah boleh mozilla ataupun chrome kita ketik localhost/logreg sudah muncul apa belum ya.... yang pasti blm bisa muncul karena databasenya kita belum buat di server... Ok kita ketik lagi localhost/phpmyadmin... lalu kita buat database nya dengan nama logreg . setelah jadi kemudian kita import database yang sudah kita buat tadi dengan nama logreg.sql... nah selamat mencoba dan berkreasi semoga bisa lebih baik lagi

Kang Alim

Membuat Aplikasi Web HTML5 Menggunakan Intel XDK

Instalasi Intel XDK

Buat Proyek Kosong

Buat Log-in Form menggunakan HTML5, JavaScript, dan CSS3

Tes di Emulator

Rangkuman

Tentang Penulis

Apa Itu Intel XDX dan HTML 5

Pengenalan Intel XDK

Develop

Emulate

Test

Build

Service

Kehadiran Standar Resmi HTML5

HTML5 vs (HTML 4 dan XHTML 1.1)

XHTML5 : HTML5 “rasa” XML

Membuat Server Web Lokal dengan XAMPP di Windows

Tentang XAMPP

Daftar Aplikasi Server yang ada pada XAMPP 5.5.30

TIPS.

Cara Menggunakan Versi Portable

Membuat Password untuk Database

Sinkronisasi Google Drive Di Linux Mint

Tips & Trick

Referensi :

Cara Instalasi Aplikasi Ujian Berbasis Web Dengan CAT/ CBT

Trik Download Video di Facebook

Tutorial Membuat Login Register dan Logout dengan PHP

Cara Ampuh Aktivasi Office 2019 dengan CMD No Ribet

Counters

Mau Dapet Duitt