Showing posts with label Tutorial. Show all posts

Home Tutorial

Friday, January 5, 2018

Tips & Trik Memilih Tools untuk Pengembangan Web

  Author : Unknown     No comments
8:27 AM



Dalam pengembangan sebuah web dibutuhkan tools-tools yang dapat membantu menunjang produktifitas dari seorang programmer. Tapi, dari sekian banyak tools-tools yang tersedia masih banyak juga programmer pemula yang bingung menentukan tools yang terbaik buat mereka atau tools yang biasa digunakan oleh seorang master web.
Pada tulisan ini, saya akan membagikan tips & trik untuk memulai mengembangkan sebuah web yang baik dan tidak membuang waktu selama masa production. Oke, tidak usah buang-buang waktu kita langsung saja masuk ke pembahasan.

Tips Memilih Tools untuk Pengembangan Web


Text Editor

Text Editor memiliki peranan yang sangat penting dalam pengembangan sebuah web, bagaimana tidak ? Karena kita ngodingnya di text editor :=D. Sekarang ini sudah banyak text editor yang sudah bagus dan cepat dalam pemakaiannya. Tidak hanya untuk pembuatan web namun juga pembuatan program yang lain, seperti Java, Kotlin, C#, Python, dll. Namun ada satu hal yang menjadi perhatian khusus seorang programmer, yaitu kepraktisan. Seberapa praktis kah text editor yang kamu gunakan saat ini ? Mari kita bahas satu per satu.

1. Visual Studio Code

Visual Studio Code merupakan text editor yang masih balita saat ini. Walaupun pendatang baru (April, 2015), VS Code memberikan fitur yang sangat banyak namun tetap dalam performa yang baik dan stabil. Ini artinya Microsoft telah sukses membanggakan para developernya.

Packages

Apa itu packages ? packages itu tidak ada perbedaannya dengan plugin, jadi ada pihak ketiga yang membuat plugin untuk VS Code yang kemudian dapat digunakan oleh user atau dalam hal ini developer. Sampai saat ini sudah terdapat ribuan plugin yang siap kamu gunakan secara gratis! Namun ada beberapa packages atau plugin yang sudah terinstal secara default.
Tapi mungkin kita sedikit kewalahan untuk memilih plugin yang terbaik untuk digunakan, kadang jumlah download plugin yang banyak tidak menjamin lugin tersebut cocok untuk kita gunakan (Kita asumsikan kita menggunakan perspective masing-masing). VS Code dibuat menggunakan JavaScript Engine.

2. Atom

Atom merupakan text editor yang dirilis sejak tahun 2014. Sejak perilisannya Atom berhasil memikat banyak penggemar programming untuk menggunakan text editor tersebut. Yang menjadi pertimbangan pada saat itu adalah, Atom dibuat oleh GitHub. Jadi, besar kemungkinan peminatnya juga tidak jauh-jauh dari pengguna platform tersebut.

  • URL: https://atom.io/
  • Harga: Gratis sampai kamu bosan ngoding
  • Developer: GitHub
  • Platforms: OSX, Windows, Linux

Packages

Tidak berbeda dengan VS Code, Atom juga memiliki ribuan packages dan tema yang bisa kita install kapan saja. Packages tersebut di host di GitHub yang kemudian didistribusikan ke Atom.
Dari pengalamanku, Atom merupakan text editor terbaik yang pernah aku gunakan. Mulai dari penggunaan FTP untuk share remote > local atau sebaliknya sangat mudah. Proses connect juga mudah. Semua pengaturan yang pada Atom menggunakan model JSON, jadi kita lebih terbiasa menggunakan JSON dalam keseharian sebagai seorang programmer. Namun dari semua kelebihannya itu, aku merasakan kalau Atom masih terasa berat. Pada saat dibuka pertama itu masih menunggu beberapa menit sampai semua proses selesai dan bahkan tidak jarang Atom mengalami gagal operasi jadi mesti di end process terlebih dahulu trus dibuka ulang.
Silahkan baca kelanjutannya di prathnandesign.com

Posted by
Read More

Wednesday, January 29, 2014

Cara Membuat Form Register dengan PHP

  Author : Unknown     No comments
8:13 AM



Form Register. Form register biasanya digunakan untuk website yang membutuhkan data user ketika diperlukan. Sebelumnya juga saya sudah membuat postingan tutorial tentang bagaimana cara membuat form Login dengan bahasa pemrograman PHP.

Setiap website atau setiap perusahaan mempunyai gaya form Register atau field dari form Register yang berbeda-beda. Tapi karena sekarang saya akan memberikan contoh tentang cara pembuatan form Register, jadi saya akan membuat form Register yang biasa digunakan atau yang biasa kita lakukan saat membuat sebuah account.

Langkah-langkah :

1. Membuat file baru dengan nama koneksi.php
2. Membuat file baru dengan nama register.php
3. Membuat file baru dengan nama register-config.php
4. Mengatur database :
    a. Buat Database dengan nama Tutorial ( Sesuai dengan keinginan anda )
    b. Buat Tabel baru dengan nama user ( Biasakan untuk tidak mengawali nama tabel dengan huruf besar )
    c. Membuat Entity dari tabel "user" :
        - id_user INT Auto Increment
        - nama_depan VARCHAR 50
        - nama_belakang VARCHAR 50
        - username VARCHAR 10
        - password VARCHAR 100
        - email VARCHAR 50
        - j_kelamin VARCHAR 10
        - tgl_lahir DATE
        - tgl_register DATE


Posted by
Read More

Friday, January 10, 2014

Cara Membuat Contact Form dengan PHP

  Author : Unknown     No comments
1:44 AM



Play in youtube

Kali ini saya akan menjelaskan bagaimana cara membuat Contact Form ( Kontak Form ) dengan PHP dan Mysql.

Simak baik-baik jon.

Sebelum kita mulai, siapkan dulu database kalian :

1. Beri nama database "tutorial" ato mau diganti yang lain silahkan,
2. Buat table baru dengan nama "Contact",
3. Entitinya sebagai berikut :
    a. id_contact (INT | AI (Auto Increment)),
    b. username (VARCHAR 10),
    c. email (VARCHAR 100),
    d. comment (TEXT),
    e. date (DATE)

Pertama-tama, kita buat dulu file dengan nama connect.php

Fungsi Koding di dalam file ini untuk melakukan koneksi ke database :

<?php

 $server = "localhost";
$username = "root";
$pass = "";
$db = "tutorial";  ## Nama Database

mysql_connect($server, $username, $pass) or die("Cannot connect to server");
mysql_select_db($db) or die("Cannot connect to database");

 ?>

Selanjutnya buat file baru dengan nama index.php dan ketikkan kode berikut :

<?php require_once("connect.php"); require_once("contact_config.php"); ?>
<html>
<head>
<title>Contact Form</title>
</head>

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

 <body>

<div id="wrapper">

<div id="contactForm">

<table>
<form method="post">
<tr><td>Username</td><td><input type="text" name="username" placeholder="Required Field" value="<?php echo $_POST['username'] ?>" /></td></tr>
<tr><td>Email</td><td><input type="email" name="email" placeholder="Required Field" value="<?php echo $_POST['email'] ?>" /></td></tr>
<tr><td colspan="2">
<textarea name="comment" cols="20" rows="8"><?php echo $_POST['comment'] ?></textarea>
</td></tr>
<tr><td><?php if ($contact_error) { echo "<div class=error>$contact_error</div>"; } else { echo $contact_success; } ?></td><td><input type="submit" name="send" value="Send" /></td></tr>
</form>
</table>

</div>

</div>

</body>
</html>

 Langkah 3, Agar tampilan Form terlihat lebih menarik sisipkan kode CSS berikut :

body { background: #eeeeee; margin: 0; padding: 0; }

 #wrapper { width: 1000px; margin: 10px auto; }
#contactForm { background: #FFF; box-shadow: 0 0 3px #CCC; padding: 10px; border-radius: 8px; }
#contactForm table { width: 600px; margin: 0 auto; padding: 5px; background: #f8f8f8; box-shadow: 0 0 3px #CCC; border-radius: 5px; }
#contactForm td { width: 300px; padding: 4px; }
#contactForm input { width: 250px; padding: 8px; border: 1px solid #dbdbdb; outline: none; }
#contactForm input[type=submit] { background: none; border: 1px solid #00ccff; color: #00ccff; }
#contactForm input[type=submit]:hover { background: #00ccff; cursor: pointer; color: #FFF; }
#contactForm textarea { width: 545px; max-width: 545px; height: 150px; max-height: 150px; outline: none; padding: 10px; }

Langkah 4 ato langkah terakhir adalah membuat file baru dengan nama contact_config.php, sisipkan kode berikut :

<?php

 error_reporting(0);

 $date = date("Y-m-d");

 if ($_POST['send'])

 {

 if (empty($_POST['username']) || empty($_POST['email']) || empty($_POST['comment']))

{

$contact_error = "<b>WARNING:</b> All fields are required.";

}

elseif (!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))

{

$contact_error = "<b>WARNING:</b> You're email is not valid.";

}

else

{

$check_user = mysql_query("SELECT * FROM Contact WHERE username='$_POST[username]' AND comment='$_POST[comment]'");
$exist = mysql_num_rows($check_user);

if ($exist == 0) {

$input = mysql_query("INSERT INTO Contact VALUES(NULL, '$_POST[username]', '$_POST[email]', '$_POST[comment]', '$date')");

if ($input) { $contact_success = "You're form has been send. Thank You."; } else { $contact_error = mysql_error(); }

} else { $contact_error = "You already sent this form."; }

}

 }

 ?>

 Sampai disini ada yang mau ditanyakan ? Jika nanti terjadi error tolong komen ya, atau masih kurang ngerti silahkan putar video yang telah saya buat di youtube. Terima kasih Jon !

Posted by
Read More

Sunday, September 1, 2013

Cara membuat form Login dengan PHP, Mysql dan SESSION

  Author : Unknown     1 comment
6:45 AM



Kali ini saya akan berbagi cara membuat Login form dengan PHP dan nama username akan selalu tertampil pada website anda. Seperti : Selamat Datang, Username.

Pastikan sudah ada :

1. Tabel member yang berisi username dan password.
2. File connect.php atau koneksi.php yang menghubungkan ke mysql.
3. Password yang sudah teregister sudah di Enkripsi atau md5 pada saat user melakukan register.
4. Jika tidak menggunakan md5 saat melakukan register, ganti $enc_password = md5($pass); menjadi $enc_password = $pass;

Langkah pertama kita akan membuat halaman login. Buat file baru dengan nama Login.php.

Ketik kode php berikut. 

<?php require_once('login_script.php'); ?>


<?php if($error) { echo $error; } ?>

<form method="POST">

      <input type="email" name="email" placeholder="Email or Username" autocomplete="off" /><br />

      <input type="password" name="password" placeholder="Password" autocomplete="off" /><br />

      <input type="submit" name="login" value="Sign In" />

</form>


Kode diatas hanya menampilkan form login.

Untuk source

<?php if ($error) { echo $error; } ?>

berfungsi untuk menampilkan error yang terjadi jika user tidak mengisi field secara benar.

Langkah kedua, kita buat halaman baru dengan judul login_script.php

<?php 
session_start();
include "connect.php";
 
 
 if ($_POST['login']) {
  
  $email = $_POST['email'];
  $pass = $_POST['password'];
  
  $enc_password = md5($pass);

   if ( empty($email) || empty($pass))
  {
   
   $error = 'This engine can\'t read your ID !' ;
   
  }
  
  else {
   
   $query = mysql_query("SELECT * FROM member WHERE email = '$email' or username = '$email' AND password = '$enc_password'");
   $num_rows = mysql_num_rows($query);
   
   if($num_rows == 1)
   {
     $fetch = mysql_fetch_array($query);
     extract($fetch);
    
     $_SESSION['username'] = $fetch['username'];
     $_SESSION['email'] = $fetch['email'];
     $_SESSION['pass'] = $fetch['password'];
    
     if(isset($_SESSION['username']))
     {
      header('location: index.php');
     }
   } else {
  
  $error = 'Wrong Username or Password.';

   }
 }
}
?>


Nanti user bisa memasukkan usernama atau email salah satunya dengan password yang benar.

Untuk halaman login kita sudah selesai.
Bagaimana jika anda ingin nama user bisa ditampilkan disemua halaman website anda ?

solusinya adalah dengan menambahkan kode session_start() pada semua halaman anda.

fungsinya untuk mengambil data dari form yang dikirimkan dari halaman login.

Sekarang kita akan menampilkan nama user di setiap halaman anda.

<p>Selamat Datang, <?php if ($_SESSION['username']) { echo $_SESSION['username'] } else { echo "Guest." } ?></p>

fungsi else disini adalah, jika tidak ditemukan nama username maka session akan menampilkan yang lainnya atau Guest.! Jika anda tidak menyisipkan else maka yang terlihat hanya salam "Selamat Datang,".

Sekian yang dapat saya jelaskan, semoga bermanfaat dan membantu anda dalam berkarya.

Tinggalkan komen jika ada pertanyaan.

Terimakasih, salam

Kadek Pradnyana

Posted by
Read More
Subscribe to: Posts ( Atom )